2024年12月14日（土）に名古屋で開催された「Stack Nagoya Fes Vol.3」に登壇してきました。Stack Nagoya の今回の内容はショートセッション回で14名の登壇者がリアル会場で様々なお話をするというものでした。登壇者も参加者も、久々に沢山の方にお会いできたこのイベント、いろいろな人の話を聞ける機会が減ってきていたので、とても楽しい時間を過ごすことができました！今回のイベントでは「静的HTMLを最初に作る制作フローにするなら、どのCMSが良いの？」というタイトルで登壇しました。この記事では、その登壇した内容をもとに書いていきます。尚、このエントリーは「...

多言語サイトを作っていて、ハンバーガーメニューのaria-labelをつけたときに、「あれ、そういえば閉じるときは文字列が「メニューを閉じる」になるけど、これって翻訳できるのか？」とふと思って調べました。さすがはWordPress。wp_localize_scriptという関数を使えば可能です。https://developer.wordpress.org/reference/functions/wp_localize_script/functions.phpfunction hamworks_scripts(): void { ...$asset_file = ...

案件でWPMLを使う機会があり、ローカル環境での使用を目的にComposerを使って色々と作業しました。その試行錯誤の結果を備忘録として残しておきます。 経緯いつもローカル環境は以前zennの本にまとめたとおり、@wordpress/envの環境を使っています。プラグインは.wp-env.json内のpluginsで管理でき、zipファイルの指定も可能ですが、WPMLはURLにuser_idやsubscription_keyがあるので、安易にGitHubに置いておくのははばかられます。https://ja.wordpress.org/team/handbook/block-ed...

https://make.wordpress.org/core/2024/06/25/wordpress-6-6-field-guide/https://aki-hamano.blog/2024/06/06/wp6-6-theme-json/この記事を投稿した時点ではバージョンはまだRC1ですが、ちょっとずつ色々検証がてら触り始めているので、触ってみた所感を残しておこうと思います。今回はコレ！Section Styles！https://make.wordpress.org/core/2024/06/24/section-styles/なんぞ？って感じですが、（だいぶん簡略に言...

利用環境Vuetify 3.5.16 〜 3.6.10 へアップデート 調べた背景Vuetify 3 にアップデートする際に、VTabs と VTab VTabWindow VTabWindowItem に変更点があったのでまとめてみました。https://vuetifyjs.com/en/api/v-tabs-window/https://vuetifyjs.com/en/api/v-tabs-window-item/アップデートに伴って、変更箇所を洗い出すためにドキュメントを確認したところ 👆のコンポーネントを知りました。Vuetify の VTabs をVu...

https://apexcharts.com/グラフ系のライブラリは、Apexcharts を Vue 2 / Nuxt 2 / Vuetify 2 では利用していた。Vuetify 3 のアップデートでも同様に利用できることから変更された点についてまとめてみた。 変更点Apexcharts のラッパーライブラリの変更セットアップ方法の変更グラフのツールチップをVueのコンポーネントでカスタマイズしてた場合Apexcharts の変更点は、👆だけになりますが基本的にはVueの変更された部分の影響が大きいです。グラフで利用するオプションの設定などは基本は変わりません。...

Vuetify 3 Theme の変更点この記事では、Vuetify 3.5.16 での theme の変更点をまとめています。また、記事の内容は Composition API を利用して検証しています。 Vuetify 2 Theme Configurationhttps://v2.vuetifyjs.com/en/features/theme/ Vuetify 3 Theme Configurationhttps://vuetifyjs.com/en/features/theme Theme の変更点Vuetify 2 では、this.$vuetify.t...

Vuetify 3 v-combobox / v-autocomplete / v-selectの変更点この記事では、Vuetify 3.5.16 でのv-combobox、v-autocomplete、v-selectの変更点をまとめています。この3つのコンポーネントの基本的な機能に大きな差はありませんが、高度なフィルターを使用する場合はv-autocompleteが適しています。個人的には、v-comboboxでほとんどの機能がカバーできると考えています。公式ドキュメントはこちら：v-selectv-autocompletev-combobox 主な変更点...

2024年6月現在、Vue 3が主流になっていますが、Vuetify 3の変更点を確認するためにVue 2の環境を用意することがあります。新規プロジェクトではVue 2を利用しませんが、Vuetify 3のアップデートに伴う変更点を確認するための環境を構築する方法をまとめました。以前は、vue-cliがボイラーテンプレートとして利用されていましたが、現在はViteの登場により新規プロジェクトではViteを利用することが一般的です。本記事では、Viteを利用してVue 2とVuetify 2をインストールする手順を紹介します。 環境Node.js 20.12.1Vue v2.7...

ブロックに何らかのスタイルをつけたブロックを追加する方法は2種類あります。ブロックスタイルブロックパターンそれぞれの使い方と、どういう使い分けをしているのかご紹介します。 ブロックスタイルhttps://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/デフォルトのコアブロックでも一部のブロックにあります。例えばボタンブロック。デフォルトでは塗りつぶしですが、ブロックスタイルを選択すると輪郭スタイルに変える事ができます。これを自分で作成して作ることができます。...

前回の記事では、Rocky Linux 9.3 のサーバセットアップ手順を説明しました。今回の記事では、SSL Storeの証明書を設定していきます。https://zenn.dev/hamworks/articles/article12-centos-rocky1 環境利用環境は、さくらのクラウドを利用しています。さくらのクラウドOS: CentOS 7 → Rocky Linux 9 SSLについてhttps://www.ssl-store.jp/SSL Store で購入した証明書を使います。この記事では、ドメイン認証のFUJI SSLを利用しています。...

CentOS7が2024年6月にサポートが終了するため、Rocky Linux 9 への移行することを決めました。この記事は、Movable Type環境のCentOSからRocky Linuxへの移行手順をまとめたものです。最近ではサーバを1台契約してLAMP環境を用意することもほとんどなくなりましたが、メモとして残しておきます。 環境利用環境は、さくらのクラウドを利用しています。さくらのクラウドOS: CentOS 7 → Rocky Linux 9 Rocky Linux 9.3 のイメージを選択するさくらのクラウドのコントロールパネルから、Rocky Li...

たまたまESLintについて調べていたときに、このような記事を見ました。https://eslint.org/blog/2023/10/flat-config-rollout-plans/eslintrc removed in ESLint v10.0.0まじかよ！！！！というわけで、テストがてらいつものローカル環境の.eslintrcをeslint.config.jsに置き換えてみることにしました。 結論結論から言うと、@wordpress/scriptsを用いてLintをしているのならまだ.eslintrcのままでよさそうです。というかeslint.config.jsが構...

はじめにこの記事は Next.js のAPIテストに利用した next-test-api-route-handler を v3.2.0 から v4.0.7 にアップデートした際に発生したエラーの対処法の備忘録になります。https://www.npmjs.com/package/next-test-api-route-handler 対象読者Next.js を使っている人Pages Router から App Router に移行する人next-test-api-route-handler を利用してテストを書いている人next-test-api-rout...

少し前に新しいローカル環境Studio（ググったらWordPressとStudioの比較記事しか出てこなくて若干不便）が出たのでお試ししてみました。https://developer.wordpress.com/studio/https://developer.wordpress.com/docs/developer-tools/studio/ インストールこの記事を執筆している時点ではまだMac版しかリリースされていません。Windows版は早期アクセス版はありますので、気になる方は試してみてください！ダウンロードしてアプリを立ち上げるとこんな画面が。めちゃ早い！...

10年近くムームードメインを使ってた。しかし、去年くらいから維持調整費というものがかかるようになりました。10年使った更新履歴をみて、改めてドメインの値段が上がってるのを感じた。そこで最近なにかと話題のCloudflareに移管することにした。先にGoogle Domainも使ってたのを、Cloudflareに移管していたためレジストラ統一したくムームードメインも移管することにした。https://totonote.com/2022/02/20/domain-transfer-from-mumu-domain-to-Cloudflare/この参考記事で簡単に移管することがで...

Vuetify 3 になって、VDatePicker が Vuetify 2 から変更点があります。長くVuetify 3でLabs状態だった機能が去年正式にリリースされました。しかし、新しい VDatePickerは、 Vuetify 2 と、Vuetify 3 で変更点が多く書き換えが多く発生している状態です。 Usagehttps://vuetifyjs.com/en/components/date-pickers/#usage APIhttps://vuetifyjs.com/en/api/v-date-picker/ Vuetify 2 Usagehttp...

Vue 2 のときは inputmask-core を使っていましたが、Vue 3 になってからは maska を使うことにしました。理由としてはアップデートがあまり行われておらず、アップデートのタイミングで maska を使うことにしました。https://www.npmjs.com/package/inputmask-corehttps://beholdr.github.io/maska/#/maska は、 単独・Vue・Nuxt 3にも対応しているライブラリです。今回は、Vuetifyの v-text-field に maska を導入する方法を紹介します。 ma...

習作シリーズ（？）です。 create-blockをするhttps://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-create-block/ block.jsonを用意するNEWアイコンにつけるCSSはすべてブロックのCSSで完結させます。なので、supportsで色やフォントサイズ、余白を有効にします。attributesは、NEW用に表示するテキストと、NEWを表示させる期間をもたせておきます。block.json{"$schema": "ht...

WordPressの投稿タイトルにはsubタグやsupタグ、イタリックなどが使えない（HTMLタグを書いたらそのまま出力されてしまう）ぱんくずタイトルだったりRSSのタイトルだったりに使われるので、HTMLタグが除去されるのは正しい挙動だと思います。………が！太字やイタリックはともかく、subとかsupを使いたいっていうケースがそこそこあり、なんか方法はないだろうか、とちょっといろいろ試してみました。 1.そもそもの投稿タイトルに書式フォーマットを有効化できる？https://github.com/WordPress/gutenberg/blob/trunk/packages/b...