はじめて公式ディレクトリにWordPressプラグインを登録しました

ACF_Images_Search_And_Insert_—_WordPress_Plugins

はじめて公式ディレクトリにWordPressプラグインを登録しました。ACF Images Search And Insertというプラグインです。あまり大したものではないんですが、Advanced Custom Fields(ACF)の画像フィールドにCC0の商用利用可なフリー素材を検索して差し込んでいけるというものです。

WordPressとACFを使って図鑑のようなコンテンツサイトを作成する場合にはある程度役に立つと思います。

プラグインの概要

動き方としては下記の動画にある通りです。画面遷移なしでサクサク動くようにSPA(Single Page Web Application)で作りました。

ACFの画像フィールドは個々にアップロードするかメディアライブラリから選ぶだけで検索もできないですし複数のフィールドに一括で登録することもできないので、そこでお困りの場合は役に立つかも。

図鑑っぽいコンテンツサイトを作っている場合は作業効率に役にたつと思います。

選定した技術に関して

今回のプラグインを実装するにあたって最初2つ選択肢がありました。

  1. Backbone.jsを利用した実装
  2. wp_iframeを利用した実装

まず1に関してですが、WordPressのMediaモーダルは3.5からBackbone.js(のWP拡張)を利用して作られていて、あまりドキュメントはないのですがJavaScriptで拡張できるようになっています。なのでWordPressの現行の実装系に合わせようとするとBackbone.jsを利用すべきかなという事でこれがまず最初に候補にあがりました。

こちらのgqevu6bsizさんのプラグインを参考に調査しました。

Media Insert from Themes Dir

開発時の感想などもブログに書かれています。やはり苦労されていますね…。

WordPress Plugin Media Insert from Themes Dir

2のwp_iframeを使う方法は3.5以前から利用されているものだと思います。Flickr – Pick a PicturePixabay Imagesなどのプラグインで利用されていました。

このBackbone.jsとwp_iframeのどちらの実装で少し迷いました。wp_iframeを利用した方法はPHPとjQueryベースで簡単に実装できそうですが動き方がイマイチで少し使いづらいなという印象です。シングルページでインタラクティブに動かそうとするとSPAで作るBackbone.jsですが、このBackbone.jsはとにかく分かりにくい。Backbone.jsが分かりにくいというよりWP Media ModalのBackbone.jsをベースとした仕組みが分かりにくいです。調査中に簡易な実装をしてみたんですが、必要な暗黙知が多すぎて行き詰まりやすく無駄に時間がかかりそうな印象でした。

また、先日Automattic社がWordPress.comの管理画面をReactベースで開発したり、3.5から導入されたこのBackbone.jsのアーキテクチャが今この状態で今後さらに主流になるとは思えない状況でした。そのため今回はBackbone.jsを利用するのをやめ、2のwp_iframeの枯れたAPIを利用しながらただし操作性はシングルページで簡潔にするためにiframeの中でReactでSPAにするという形をとりました。

ソースはGitHubに公開しています。

実際に開発してみて

今回はReact + Reduxで開発してます。Reduxはまだ使い方を抑えきれてないところもあるんですが、通常のfluxに比較しコードが簡潔になるので気に入ってます。また開発者のDan Abramovは今回使ったReact DnDもそうなんですが、ドキュメントを丁寧に作っているので、使っていてとても安心感があります。

で、結論からするとReactにして個人的には正解でした。前から使っていた事もありますが、特に実装で大きくハマる事もなくサクサクと設計・実装できました。コードの保守性もJavaScriptとPHPが完全に分離してクライアントとサーバーで責任領域が分かれているので見通しが良くなりました。

WordPressでSPAにするの思ってたより良いですね。今後はREST APIなど積極的に使っていけるともっと面白いかもと思いました。

役に立った情報

gqevu6bsizさんのプラグイン

結局Backbone.jsは利用しなかったんですが、WPからJavaScriptに情報を渡す場面などAPIの使い方がとても参考になりました。

Media Insert from Themes Dir

WordPress Media Javascript Guide

WordPressのMediaを扱うJavaScriptのガイド集があります。

WordPress Media Javascript Guide