GitHub Pagesを使ってWebサイトを公開するまで で作成したWebサイトに Shifter Headless を導入して記事投稿機能を追加しようと思います。
Shifter Headless とは
株式会社デジタルキューブさんが運営するサービスの1つで、 WordPress を ヘッドレスCMS として利用することができるという特徴があります。
Shifter Static と Shifter Headless の違い
Shifter Static は WordPress をそのまま静的サイトとして公開します。
そのため、基本的に必要な技術は WordPress とほぼ同じで、既存で公開されている様々なテーマを使うことで簡単にWebサイトを作成できます。
独自でカスタマイズを行うためには PHP や MySQL といった技術知識が必要となります。
Shifter Headless は WordPress の管理画面だけを使用し、Webサイトの見た目となる部分は独自で作成をしなければなりません。
このような構造を ヘッドレスCMS と呼び、メリットとしてはサイト運用に必要な管理画面と、Webサイトを表示するために必要なフロントエンドの領域を完全に分別することができ、より自由でモダンなWebサイト制作・運用を行うことができます。
Shifter Headless を準備
まずは Shifter Headless を使用するための準備から始めます。
Shifter のアカウント登録が必須となるのでアカウントが無い方はまずは登録ページからアカウントを作成しましょう。
1. Shifter Headless を作成
登録＆ログインが完了したら Shifter Headless を作成します。
まだ作成したことがない場合は、 Create new site (Headless) もしくは Create new のどちらかのボタンを押します。
使用したい用途に合わせてプランを選択します。
価格は Shifter Static と比べて少々割高な設定になっています。
今回は検証の意図も含めているので Free trial で作成します。
Free Trial は何もしなければ7日間で削除されてしまうので注意が必要です。
作成が完了するとこのような画面になります。
2. 管理画面で記事を作成
WordPress admin URL からWordPressへログインすることができます。
初期ログインの情報はその下にある Initial WordPress Username と Initial WordPress Password を入力することでログインが可能になっています。
※WordPress URL 部分の一部文字を変更しています。
管理画面にログインすると、いつも見慣れたWordPressの管理画面が表示されます。
※生粋の日本人なので管理画面にログインしたら速攻で設定を日本語仕様に変更しました。
ちなみにこの管理画面からフロント画面を表示するとこんな表示。
あとは投稿画面でいくつかサンプルとなる記事を投稿したら Shifter Headless での準備は完了です。
Webサイトのフロント画面を準備
モダンな開発を行う場合は、 React.js や Vue.js を使用してWebサイトのフロント画面を構築することが多いと思います。
今回は、いずれも使用せず、可能な限りシンプルなHTMLでの構築を目指します。
1. Shifter Headless からのコンテンツ取得
Shifter Headless からコンテンツを取得するために必要な条件としては、 WordPress から REST API を使用して情報を取得できる環境を用意することです。
今回は、 Shifter の公式ドキュメント内で紹介されていた WordPress RESTAPIサンプルアプリ をベースにWebサイトの作成を行っていきます。
まずはサンプルアプリのリポジトリをローカルにクローンします。
$ git clone https://github.com/smartcatdev/WordPress-REST-API-Sample-App クローンしたソースコードから index.html をブラウザで開いてみると、すでにサンプルとなるWebサイトから REST API を使用して記事を取得してきているのがわかります。
この記事を先ほど自分が作成した記事に入れ替えるためには、 includes/app/main.js を編集します。
デフォルトでは https://wptavern.com/wp-json/ となっている RESTURL を
Shifter Headless の管理画面に記載されている WordPress URL をもとに上記のように変更します。
WordPress URL をコピーして、その後ろに /wp-json/ を追加するだけでOKです。
変更して保存し、 index.html をブラウザで開いてみると、先ほど自分で作成したサンプル記事が表示されるようになりました。
注意としては、このプレビュー段階では Shifter Headless を起動しておかないと正常に記事を取得することができません。
2. Webサイトの表示をカスタマイズ
表示されているWebサイトをカスタマイズして、自身のWebサイトを制作しましょう。
それにはまず記事取得部分を処理している main.js を読み解きます。
書かれている内容はjQueryベースで書かれているためそこまで難しくありません。
各処理にコメントを追記したものがこちら
https://github.com/pitolick/SummerWork-ShifterHeadless/blob/master/includes/app/main.js
どうやら mustache というテンプレートエンジンを使用して取得した情報をWebサイトに表示しているようです。
サンプルとして作成されていたファイルを参考用としてバックアップし、 GitHub Pagesを使ってWebサイトを公開するまで で作成した Webサイトのソースコードを雑に格納、カスタマイズを行っていきます。
今回、記事情報の連携を行えるようにカスタマイズをしていきます。
まずは必須となる3つの JavaScript をbody閉じタグ直前で読み込みます。
次に夏イベント部分のHTMLをテンプレート化します。
※Mustacheに触れるのが今回初めてのため、記法に誤りがあるかもしれません。
最終的にJavaScriptでHTMLをappend（追加）する記述になっていたのでそれに合わせて出力先のHTMLを用意します。
用意したテンプレートと出力先に合わせてJavaScriptの記述を変更します。
また、今回はこれ以外の処理を使用しないため、不要な処理によってエラーが発生しないように、コメントアウトで無効化します。
修正作業は以上で完了です。実際に反映されるかどうかブラウザを更新してチェックします。
このように Shifter Headless から記事情報を連携してWebサイトに表示することができました。
GitHub Pages で公開
編集したソースコードを GitHub に Push したら GitHub Pages で公開設定を行います。
GitHub Pages の公開方法は以下の記事を参考にしてください。
※GitHub Pages で公開する際、 Shifter Headless が STOP している状態だと正常に記事を取得できないため注意が必要です。
実際に公開したWebサイトはこちら
https://pitolick.github.io/SummerWork-ShifterHeadless/
このようにしっかりと記事情報を取得することができています。
Shifter Headless で記事を更新
では、記事を新しく追加した場合はどうなるかやってみましょう。
GitHub Pages で公開したページを更新するとリアルタイムに記事が更新されました。
まとめ
今回はモダンなフロントエンド開発で用いられる React.js や Vue.js を使用せず、 mustache を用いて WordPress の REST API を使用して Shifter Headless にある記事情報を取得し反映させることができました。
ただ、懸念となるのは Shifter Headless の管理画面がSTOPしている場合、記事情報が取得できないのではないか？というところ。
Shifter Static のように一定時間で Shifter Headless がSTOPしてしまう場合、正常に記事情報が取得・表示できなくなる可能性があります。
逆に一定時間でShifter Headless がSTOPしない場合は、管理画面が起動し続けることになるはずなので、セキュリティ的に脆弱になってしまいます。
最初に想定していた動作だと、静的サイトをジェネレートするときにだけ Shifter Headless を起動しておいて記事データを取得し、デプロイするときには Shifter Headless がSTOPしていても問題なくWebサイトが出来上がるというものと思っていたので、少々思っていたのと違うという状態になっています。
検証・構築を行いながらこの記事を同時に書いているため、その後の動作についてはまだ調査不十分ですが、後日、別の方法を取り入れた Shifter Headless でのWebサイト構築を検証しようと思います。
参考サイト
Introducing Shifter Headless
https://support.getshifter.io/en/articles/3870662-introducing-shifter-headless
