2021/12/10 Shifter オンラインミートアップ！ https://eventregist.com/e/uULbnS740mav
Pentaprogram 佐藤あゆみnecco 阿部さんの記事を見てShifter Headless + Faust.js + Vercel したらかんたんに実装できちゃった話[12/10 開催] Shifter オンラインミートアップ！
View Slide
͜Ε·Ͱͷ͋Β͢͡
WordPress運用の悩み• WP本体、プラグイン、サーバのアップデート対応がつらい• もたもたしてると、セキュリティちょっと心配• きちんとしたテーマを作るのがたいへん （ブロックエディタ？FSE？）• ちょっと重いかも…
ヘッドレス対応で解消できる（かも）• WP本体、プラグイン、サーバのアップデート対応がつらい• もたもたしてると、セキュリティちょっと心配✓WP本体と公開サイトを分離して管理できる• テーマを作るのがたいへん✓公開サイトは好きな言語を使って自由に色付け• ちょっと重いかも…✓公開サイトは静的ページにできるほか、やりたい放題
いっぽう、残る問題も…• WP本体、プラグイン、サーバのアップデート対応がつらい• ヘッドレス＋Jamstack構成にすると プレビューを実装するのが難しい
Shifter Headless で解消できる！• 本体、プラグイン、サーバのアップデート対応がつらい✓マネージドホスティングなので、 WordPress側はShifterが対応してアップデートしてくれる• ヘッドレス＋Jamstackにすると プレビューを実装するのが難しいhttps://www.getshifter.io/
Faust.js で解消できる！• 本体、プラグイン、サーバのアップデート対応がつらい✓マネージドホスティングなので、 WordPress側はShifterが対応して適用してくれる• ヘッドレス＋Jamstackにすると プレビューを実装するのが難しい✓Headless WordPress用フレームワーク Faust.jsが データをよしなに取り回してくれるので、 WordPress画面から簡単にプレビューできるhttps://faustjs.org/
Faust.js φχϞ ϫΧϥφΠ…Ͱ…
ブログ記事があったー！！しかもすぐ試せるリポジトリもあったー！• necco 阿部さん執筆のブログ記事• HAMWORKS Toro_Unitさんの Faust.js初期設定済リポジトリ• 圧倒的感謝• Shifter Headlessを 組み合わせてみよう！https://necco.co/note/6740
この状態がゴール7日後に自動的に消滅する予定（お試し版なので）https://faustjs-demo.vercel.app/
こんな素敵なレイアウトもスタンダードなWordPressでは難しい表現もできる
Shifter Headless Ͱ WordPressαΠτΛ࡞Ζ͏Shifter
後日でOK
ϩʔΧϧʹϦϙδτϦΛΫϩʔϯ͠Α͏Local &Remote
ローカルにtoro_unitさんのリポジトリをクローンgit clone [email protected]:torounit/faustjs-app.githttps://github.com/torounit/faustjs-app_
リモートに 新規リポジトリを作成•GitHub•GitLab•BitbucketVercelと連携できるならなんでもOK
リモートリポジトリにプッシュcd faustjs-appgit remote set-url origin https://github.com/(自分のアカウント名)/faustjs-demo.gitgit branch -M maingit push -u origin main
VercelΛॳظηοτΞοϓ͠Α͏Vercel
新しいプロジェクトを作成する
リポジトリをインポートする
とりあえずデプロイボタンを押しておく
公開サイトURL
Shifter Headless Λઃఆ͠Α͏Shifter
WordPress 管理画面にログインする
Headless by WP Engineプラグインを有効化する
Headless設定①• Front-end site URLに 公開サイト(Vercel)のURLを 設定する• Secret Keyをメモする
Headless設定②WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢• WP GraphQLをActiveにする
GraphQL設定WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢• Public Introspectionを 有効にする
パーマリンクを設定WP GraphQLΛActiveʹ͢ΔϘλϯΛԡ͢• /posts/%postname%/• こだわりがなければslug（postname）がラクhttps://faustjs.org/docs/next/reference/hooks/usePost
Vercel ʹ Shifter Headless ͷใΛઃఆ͠Α͏Vercel
環境変数を追加するSettings -> Environment Variables• NEXT_PUBLIC_WORDPRESS_URL: ShifterのURL• WP_HEADLESS_SECRET: メモした文字列
ϩʔΧϧڥΛηοτΞοϓ͠Α͏Local
ͳʹͱ͋Εnpm install
.envを編集✴このまま push すると.env も push されてしまうので 気になる場合は先にリモートから .env を消しておくShifter Headless のサイトURLSecret Key
Shifterの情報をローカルのスキーマに反映させるnpm run generate
ローカル環境を立ち上げてみるnpm run dev
リポジトリに変更をプッシュするスキーマを変更したのでリポジトリにPUSHして Vercelに反映させる
͢Δͱ…
デプロイでコケるVercelのデプロイ失敗
デプロイでコケるVercelのデプロイ失敗• toro_unitさんのリポジトリではBookというカスタム投稿タイプを使用• Shifter上にはBookというカスタム投稿タイプがないのでスキーマにも存在しない• コードには存在するので、エラーが出る• そうだ、カスタム投稿を作ろう
ΧελϜߘλΠϓΛઃఆ͠Α͏Shifter
カスタム投稿タイプを設定しようtoro_unitさんのリポジトリを使う場合• mu-pluginsフォルダにカスタム投稿を設定する記述あり• Shifter Headlessはmu-pluginsに直接ファイルを入れられない （FTPやSSH接続できない）• Code Snippetsプラグインを使って同内容の記述を追加する• CPT UIやAtlas Content Modelerでも登録可
https://github.com/torounit/faustjs-app/blob/main/mu-plugins/post-type.php
Code Snippetsプラグインを有効化する
新しいスニペットを作成する
スニペットを登録するmu-plugins/post-type.phpの内容をコピペ• 内容はそのままでOK• コピペできたら Save Changes and Activate ボタンで保存＆有効化
カスタム投稿ができた！
ΧελϜߘλΠϓΛөͤ͞Α͏Local
Shifterの情報をローカルのスキーマに反映させる（再）npm run generate
リポジトリに変更をプッシュする（再）スキーマを変更したのでリポジトリにPUSHして Vercelに反映させる
ߘΛϓϨϏϡʔͯ͠ΈΑ͏Shifter
࠷ޙʹ
まとめ• 記事にそってぽちぽちするだけで味付け自由なヘッドレス WordPress サイトを作れる！• すべて無料で試せる！• カスタム投稿タイプ設定に注意 （※阿部さんの記事執筆後に加わったもので、記事には記載がありません）• necco 阿部さん、HAMWORKS Toro_Unitさん、 ありがとう！！
Pentaprogram 佐藤あゆみありがとうございました"If you put your mind to it, you can accomplish anything."- Back to the Future
trickstar13
peisuke
yoshidashingo
murachiakira
sansantech
oracle4engineer
chiroito
koheiawa
hokaccha
revcomm_inc
tomoaki25
kawagoi
vanstee
mojombo
notwaldorf
nonsquared
thekraken
csswizardry
jeffersonlam
62gerente
productmarketing
samanthasiow
morganepeng
chrisshort