Autocompleteで住所入力

Autocompleteで日付・時刻の入力を作っていた時、住所入力もいけそうだなと思い試行錯誤した。住所は、JavaScript(ブラウザ)のnavigator.geolocation.getCurrentPosition関数で取得した現在の緯度・経度を使ってGoogleのジオコーディングAPI(の逆引き住所検索)を使った。

「here」とタイプすると、候補リストに現在の住所が表示される

ジオコーディングAPIの逆引き住所検索はPHP側(file_get_contents関数)で行い、AJAXで取得した住所リストを取得。住所検索で取得した住所は郵便番号、国名を含んており、今回はそれらを取り除いた。Autocompleteフィルターのoptionsは定数ではなく、メソッドにしてAJAXで取得した住所リストを利用するようにした。

作業中、地味にハマったのは、ジオコーディングAPIのAPIキー。はじめは静的マップで使用しているものを使用したのだが、このAPIキーではうまく取得することができなかった。理由はAPIキーの制限で、静的マップで使用したAPIキーは「ウェブサイトの制限」を制限していたためだった。このためPHP側は新しくAPIキーを取得し、別の制限を設定した(「Geocoding API で API キーを使用する」参照)。うまく両立する制限設定はあるのだろうか。

Autocomplete、いいかもしれない

ブロックエディターの拡張ポイントの1つにAutocompleteがある。任意のブロックに対して「何か」をタイプしたら「選択リスト」が表示され、続けて文字をタイプすると絞り込みできる仕組みのだ。使い方は wp.hooks.addFilter で  ‘editor.Autocomplete.completers’ 向けの関数を登録する感じなので、いくつか実装してみた。

絵文字

🙂 とタイプしたら一覧が表示され、そのリストから選択する感じに。例えば、😀や🚃といった絵文字の入力が楽になる。難点を挙げるなら絵文字の種類が多すぎること。ツールバーにボタンを追加して候補がパパッと表示される方がいいかもしれない。

現在の日時

nowとタイプしたら日付や時刻の例が一覧で表示され、そのリストから選択する。例えば、2023年1月23日や10:07:34といった感じ。こちらについては曜日と12時間制(今は24時間制のみ)の対応は残っている。

追加の文字タイプによるインクリメンタルサーチについて、nowの後に/や:をタイプしても反応するのだが、これらは候補リストの内容も検索対象になっている表れだと思う。このあたりのくわしい仕様を知りたい。また候補リストの最大表示件数が10になっているが、この変更方法だったり、2列や3列に表示する方法があれば知りたいところだ。

そういえば「Create Block Theme」というテーマ開発用のプラグインがあることを最近知った。すごく気になる。。。

はじめてのブロック?

オリジナルブロックを作ってみたくなり、汎用性が高そうなGoogleのMaps Embed APIを使ったものから始めることにした。

手本にしたのは「カスタムHTML」ブロック。サイドバーに設定項目を追加し、iframe要素のsrc属性などを変更できるようにした。プレビュー時に設定される属性についてはもう少しやりようがある気がするのだが、一通りの機能は実装できた感じ。

開発時に最初に戸惑ったのは「npm start」コマンド。このコマンドが実行中、ソースコードの変更を監視し、変更時にすぐビルドするものだった。開発中はそれなりに便利なんだけど、それなら中断・終了方法くらいはきちんとそう書いてほしかった。

またオプションデータを取得・更新できるのが管理者のみということも意外だった。REST API(settings)がそういう設定だっただけなんだけど、ブロックを作る前に知っていれば違ったアプローチをとった気がする。

テーマカスタマイザー対応した

ちょっと前に公開した「Twenty Seventeenのフォントサイズを変更してみた」で作ったプラグインにもう少し手を加えてテーマカスタマイザーに対応。使用するGoogleフォントや(ブロックエディターの)フォントサイズを変更できるようにした。

具体的には、標準のテーマカスタマイザーにトップレベルに「フォント」を、その中に「フォント名」と「フォントサイズ」を追加。それぞれ表示される内容は次の通りである。

テーマカスタマイザーでフォント名とフォントサイズを指定できるように!

フォントサイズまわりについてはCSSカスタムプロパティ(変数)を使い、ブロックエディターのフォントサイズとタイトルや本文のフォントサイズの変更を連動するようにした。 テーマカスタマイザーでフォントサイズを変更した際、プレビューでは対象のCSSカスタムプロパティの値を変更するだけでさまざまな要素に反映できる。プレビュー用のJavaScriptソースコードはとてもシンプルだ。

いまさら感はあるが、テーマカスタマイザーをいじるとちょっと楽しくなる。次に何かするとしたらカラーパレットあたりかな。

WordPress 5.7 “Esperanza”公開!

予定通り「WordPress 5.7」が公開されました(今回は貢献者リストに名前が載ってますね)。

日本語版アーカイブも朝には公開されていたので、さくさく手持ちのサイトを順に更新(日本語版の公開が早くなったのはホント助かる)。いまのところ目立った不具合はないようです。

WordPress 5.7ではjQuery 3.5系に変更されたわけですが、あまり更新されていないプラグインを使っているサイトは影響を受ける可能性がありますね。少し前に話題になったクラシックエディターやIE 11のサポートなど、今後の動向が気になるものがあります。自分が公開しているプラグインについても、そういった環境とどう向き合っていくべきなのか悩ましいところ。ブランチを作って対応するのはちょっと厳しいかな。。。

昨日、Login rebuilderをアップデートしました

明日、予定通りならWordPress 5.7がリリースされると思います。

それに先立ち「Login rebuilder 2.7.0」を先日公開しました。初日のダウンロード数は初めて2,000件を超え、多くのサイトでアップデートされた模様です。

「Login rebuilder 2.7.0」では、メインのログインページのアクセスログの保存、ダッシュボードでの表示、ダウンロード機能を追加しています。このログの保存は、「ログインのログ」と連動しており、設定画面を開いて変更する必要はありません。デフォルトの保存件数は200件となっているので、増やす場合は設定画面で行ってください。

WordPress 5.7に向けてLogin rebuilderをアップデート

昨日は「WordPress 5.7 Beta 1」が、今日は「WordPress 5.6.1 Maintenance Release」が公開されました。とりあえず今あるサイトは5.6.1にアップデートしつつ、5.7のBeta 1を触っていく感じでしょう。

ニュースの「Standardize colors used in WP-Admin CSS to a single palette」では管理画面の色設定が調整されることになっており、自作のプラグインの設定ページに違和感がないか確認しないといけない気がします。またjQuery関連の調整についても要確認でしょうか。5.7正式リリースまで後1月ほどですが、やることはそれなりにありそうです。

さて5.7に向けてほかにやることといえば、「Login rebuilder」をアップデートを予定しています。今回のアップデートでは、ログインページのアクセスログを保存し、ダウンロードする機能を考えています。リリースのタイミングはRC版で動作検証した後でしょう。

WordPress 5.5リリース!

WordPress 5.5が予定通りリリースされました。

日本語版もそれほど時差なく公開され、翻訳ファイルの最終更新日が昨日になってたりと、日本語対応チームの方のがんばりに感謝です。

今日は自社サイトを順次アップデートしつつ、プラグインのreadme.txtを更新したりといった感じですね。

tracにポストしたものはまだクローズしていないので今後の展開が気になるところですが、バグっぽいものは早めにフィックスしてくれることを期待します。

WordPress 5.5に向けてLogin rebuilderをアップデート

月曜に投稿したように、今週はWordPress 5.5への準備を進めています。その中でプラグインの動作検証があったのですが、「Login rebuilder」については5.5のXMLサイトマップ生成機能に関連するため、早めに公式サイトを更新しました。

今回の変更点は、Login rebuilderの著者(アーカイブ)ページへのアクセスを制限する機能です。「著者ページの閲覧」で「404ステータス」を選択している場合は、users XMLサイトマップを生成しないようにしました(そのほかのXMLサイトマップの生成については制御していません)。

そのほかのプラグインについてはRC2で動作検証中で今のところ問題は出ていないので、5.5の正式リリースに合わせてreadme.txtを更新する予定です。

WordPress 5.5 RC1でバグっぽいものに遭遇1

WordPress 5.5 RC1の変更点を確認中、バグっぽいものに遭遇。トレースを繰り返しながら状況を把握し、夜中だったけどtracに投稿した。

今朝、気分を一新してもう一度トレースしながら状況を再把握。昨夜投稿した内容が少し正確ではなかったので、その内容をコメントする。

そんなこんなをしていると、RC2が公開されているので早速ダウンロードしてもう一度症状を確認したが、改善はされていなかったので、tracの回答を待とうと思う。