【制作の裏側】プラグインの管理画面を作っていく手順

ワードプレス制作の取り組みで「テーマ作成やプラグイン構築」をしていると機能追加をする場面が増えてきます。そこでエンジニア的な作業を進めるときに陥りやすいのが「あれもこれもループ」です。

カンタンに言えば「あれも便利そうだな、これも入れようかな？」といった風にアイデアをどんどん取り入れてしまい、結果的に作業だけが膨大な量へ増えてしまうことがあったりします。

適度で止めないと本業に支障が出るので極力控えるようにはしていますが「より良いものを」と考えると、気づいたら気づいた分だけ作業したくなるのが現実ですよね。これをやっちゃうと赤字だぞという状況でも実装したくなるシチュエーションは意外とあります。本日はそんな裏側をご紹介。

【制作の裏側】プラグインの管理画面を作っていく手順

いつも技術的な記事が多いので今回は「作り方」より「管理画面を作っていく過程」についてご紹介させていただきます。たとえば最近当サイトへ導入したローディング画面のプラグイン。以下の記事ですね。

ワードプレスでローディング画面を表示させるための軽量プラグイン

自分自身で使うためだけなら多少強引に作っても問題ないのですが、とはいえ、いざ作ってみると「もっと便利な機能を搭載したい！」とか「初心者さんでもスムーズに使える仕様にしたい！」など、当初に考えていた予定とはまるで違うスケジュールになってしまう状況に出くわします。

たとえばローディング画面であればこんな要望をいただきます。

・ローディング画面をカスタマイズできるプラグインがあればぜひ購入したい
・ローディング用の画像を管理画面からカンタンに差し替えられる機能が欲しい
・ローディング画像の上に自分自身が運営しているサイトロゴを表示したい

たしかにいいですよね。

何より「ローディング画面」は『ウェブサイトの離脱防止』に役立ちます。

たとえばサイトを開いて「待っている間にローディング用の画像が表示される」のと「何も表示されずに数秒間待たされる」では来訪者が受ける印象がまるで違いますよね。この点は意外と見落とせません。

言ってしまえば「お店の接客」とまったく同じです。ふらっと立ち寄ったお店が忙しい時間帯で混んでいる状況を想像してみてください。ウェブサイトで言えばサーバーにアクセスが集中している状態ですね。

・店員さんから「少々お待ちくださいね」と声をかけてもらえる
・スタッフが誰もいない状態で「ひたすらそのまま放置」される

もし後者のように「放置」されると、多くの方は愛想をつかしてお店を去ってしまいますよね。多額の費用をかけて立ち上げるウェブサイトにはローディング画面が導入されていることが多いです。

つまり、来訪者に１秒でも長くサイトを見てもらうには“ローディング画面という接客が重要”となります。

もしローディング画面のプラグインを作った場合

仮にローディング画面を表示するプラグインを作るなら以下機能があると便利です。

・ロゴを表示させる機能
・読込み画像を変更する機能
・表示サイズの自動調整

以下で必要な内訳をご紹介いたします。

１. 好みのロゴ画像を表示させる機能

ロゴの設定画面を作るなら以下のインターフェイスが必要となります。

２. 設定画面からメディアライブラリを読み込める機能

選択ボタンを押すと「メディア > ライブラリ」が開きます。画像のアップロード機能も必要ですよね。

３. 選んでいる画像を確認できる機能

画像の選択後は「プレビューする機能」も付いています。

４. 読込み画像を変更できる機能

もし「ロゴを表示する」だけあれば上記で十分かもしれません。でも読込み画像も変更したいですよね。そこでロゴ画像の表示だけではなく「読込み画像の差し替え機能」も併せて追加することにしました。

読込み画像が変更できれば「さまざまなGIFアニメーション」を設定できます。ローディング画像として配布されているGIFアニメーションは商用可能なフリー素材もたくさんあるので自由に差し替えられます。

ただ、こうなってくると次はローディング画面全体の「背景色」も変更したくなってきませんか？ロゴを表示できて読込み画像も出せるとしたら“背景色”まで変更できればより満足感が高くなりそうです。

５. 背景色を変更できる機能

すでに３つの機能が必要になりました。知らない間にどんどんと複雑になっていきます。機能追加を行えば行うほど条件も複雑に絡んでくるのでさまざまな「if」を考慮しなければなりません。

６. ワードプレス「4系」をサポートする機能

さらに言えば、動作環境はワードプレス「5系」のみじゃなくて「4系」でも動かしたいですよね。ワードプレス「4系」で動かすとなると各バージョンで隅々の動作チェックをしなければなりません。

以下がワードプレス「4系」でプラグインを有効にした状態です。無事レイアウトを崩さず画面が作れました。ただ、多機能になった代償として初心者さんは「使い方」で戸惑ってしまう人も出てきます。

上記の通り、ワードプレスを「4系」のままで使っている人も考慮するとなると初心者さんが多くなるのでカンタンな「操作マニュアル」も必要かもしれません。チュートリアル機能が必要になりそうです。

７. 初心者さんでも使い方がわかる説明機能

管理画面内から使い方を知るための「操作ガイド」を実装。以下が追加した画面となっています。

チュートリアルは「操作ガイド」をクリックすると動作する仕組みです。

各項目を１つずつ解説する機能がチュートリアルとして表示されます。

ただ、チュートリアルで導入するライブラリのライセンスが定期的に変わっているので場合によっては採用は見送った方がいいかもしれません。これまでの流れを見ても元々「MIT」だったライセンスが「AGPLv3」へ変わったり、途中で商用利用が有料になったりとかなり忙しい様子です。

初心者さんでもわかりやすいようなプラグインに仕上げるならこれ以上ベストな機能はないので悩ましいところですね。ライセンスさえクリアできればチュートリアルの導入ができればとは考えています。

８. 全体の設定状況がすぐに確認できる機能

以下が全項目を設定した画面です。試しに「ロゴと読込み画像」を当て込みました。

もちろん、何も当て込まなくても読込み画像だけは表示される仕様なので、本来は設定をしなくてもOK。ロゴ画像や独自の読込み画像を表示させたい方へ向けて設定が変更できる機能を搭載しています。

９. 設定を保存したらお知らせメッセージを表示する機能

初心者さんも利用する可能性が高いので念のため「保存メッセージ」も完備。

１０. ローディング完了時にふわっと透明になる機能

以下は実際にウェブサイト側に表示された例です。なお、ローディングが終わると背景色もゆっくりと透明になっていく仕様なので以下のスクリーンショットは読込みが終わりかけている状態となっています。

もしロゴ画像のにじみが気になるなら「230px」で画像をアップロードすればOK。

上側に表示されているロゴがくっきりとしましたね。このあたりはRetinaディスプレイで見ているのか非Retina環境なのかで見え方も変わってくるので意識しなくてもOKです。ロゴのサイズ変更をできない方もいらっしゃるので500pxでアップロードしても230pxで縮小表示されるように裏側の仕組みを構築しております。

１１. スマートフォンでの表示も自動で最適化する機能

ローディング画面はスマホでも表示可能です。以下の参考画像ではアドレスバーに「鍵アイコン」が表示されているかと思いますが「SSL（https://）環境」でも正しく動作している状況となります。

こちらはSSL非対応のサイト（http://）です。SSLに関係なく動作いたします。

まとめ

今回はワードプレスでプラグインを作る流れをざっと解説させていただきました。人によっては「意外と手がかかっているんだ」と思われたかもしれません。ただ作って完成といったわけではなくて１人でも多くの方に使ってもらうにはさまざまな利用環境を想定した検証作業が必要となります。

結論：理想を追求すると膨大な作業量になる（考える範囲は広い）

ざっと洗い出すと以下の１１項目でした。

１. 好みのロゴ画像を表示させる機能
２. メディアライブラリを読み込める機能
３. 選んでいる画像を確認できる機能
４. 読込み画像を変更できる機能
５. 背景色を変更できる機能
６. ワードプレス4系をサポートする機能
７. 初心者さんでも使い方がわかる説明機能
８. 全体の設定状況がすぐに確認できる機能
９. 設定を保存したらお知らせメッセージを表示する機能
１０. ローディングの読み込み完了時にふわっと透明になる機能
１１. スマートフォンでの表示にも自動で最適化する機能

次回は「実際にプラグインを作っていく裏側の工程」を公開させていただく予定です。なお、今回の手順で作ったプラグインは少し手間がかかりすぎているので、残念ながら無料ダウンロードはできません。

もし興味があれば以下URLからページを開いていただき販売サイトから手に入れてくださいませ。一時的に販売を停止することもあるのでリンクが飛んでいなければまた後日訪れていただけますと幸いです。