こんにちは、みみです。
この記事はShifter Advent Calendar 2019の17日目として書いています。
私が今年の始めに出会ったShifterという素晴らしいサービスの締めのお祭りです。この日本で「師走」っていう言葉通りの半端ない忙しさの時にアドベント・カレンダーなんてやるもんじゃないって去年ぐだぐだ言ってた私が向こう見ずにも参加してしまいました。この一年で頂いたビール代を考えると書かざるを得ないそのぐらい素敵なサービスなのですが、えいやと参加したものの、さて何を書こうかな。
やはりここは満を持して
ShifterにWordPressのお守りを任せておいて、gridsomeでオレ好みに高速変身させたのを打ち返してNetlifyにどーん
をやるしかないのでは？…と思ったのですが、流石は師走、気が付いたら3日前でした。大分と脳が硬化してきている私の一夜漬けでは如何にもなりませんでしたので、今回は「どーん」とするための足掛かりになる情報を書き散らすと共に一年を振り返りたいと思います。
なんてったってデザインが良い
そもそもShifterのサービスにぐっと来た最初の理由はそのデザイン性の高さ。可愛いは正義であり、私はあらゆることを見た目で決定する上っ面な人間なので、美しいものに弱いのです。
上っ面というのは私の人間性の話でして、Shifterはよく考えられてるデザインだからこそ美しく心地よいのです。24pxのradiusなんておいそれと使えません。そしてコンセプトからきっちり作ってあるから遊んでもブレない。素敵。
特にこのキービジュアルを見て、実行委員長やってよかったと思いましたとも。
そんな訳で、サービスと同時にイベントを知った其の場で直ぐに参加申し込みをし、Shifup! JP Getshifter Vol1 に参加してきました。 – Photosynthesic blog が今年の2月のこと。命知らずにもLTなんてしちゃってますね。JAMStackぽいなーと思って参加したらまさにそれがコンセプトだったっていう。
というわけで、JAMStackといえばNetlifyなわけですよ。そろそろ本題に移ろう。
ShifterとNetlifyを繋いでみよう
なのでまあ、兎も角、まずはNetlifyとShifterを繋いでみましょう。Netlifyとは何なのかについては2019年12月現在の資料としてはWikipediaが一番良さげなのでリンク貼っときます。
先日、ShifterとNetlifyの接続にWebhookが用意されたという速報を聞いて、
そのテストの為だけにTier 2プランを購入しましたよ。楽しみにし過ぎ。（ShifterでWebhookを利用するためにはTier 2以上のアカウントが必要です。参照: Pricing – Shifter）
アカウントさえ用意して、以下のリポジトリとYoutubeを見ながらやったらスルッと繋がります。
Shifter Deploy to Netlify
getshifter/shifter-netlify-build
Shifterの弊サイト: https://ecstatic-bartik657.on.getshifter.io/
Netlifyの弊サイト: https://jolly-hodgkin-02624d.netlify.com/
こうやってみるとただのコピーサイトにしか見えないですね。そのままNetlifyにアップしても手間と改悪にしかならない（404が無いなど）のでカスタムが必要です（カスタムしたいから繋ぐんですけれども）。
まあでも少なくとも繋がる！自動デプロイしてくれる！ハラショー！
Shifterとgridsomeとを繋ぐ…？何故？
さてお次は、ShifterとGridsomeを繋いでみましょう。
そもそもgridsomeとはなに？という方はこちらの記事「gridsomeのススメとShifterの可能性について – Photosynthesic blog」などを御覧ください。あれが4月だったんですねえ…。あっという間に師走ですよ。怖い。
え、待って待って、そもそもShifterでちゃんと静的化出来るのになんでgridsomeを挟む必要が？と思った人、正解です。100歩譲ってフロントエンドな我儘で美味しくカスタムしたいとしても、WordPressでも採用されてるReactのGatsbyなら既に公式も対応してきているのに、何故敢えてVueのスタティックサイトジェネレーターで？てね、そうね私もそう思います。ええ、最早ただの、伊達と酔狂です。そこに山があるから登るのだ。1.5合目ぐらいで息切れしてますけども。
WP REST APIはいずこ
や、結構楽勝かなと思ってたんですよ、実は。gridsomeはWordPressのスターターキットがあってWordPressサイトのURLさえあればWP REST APIをいい感じのGraphQLにしてくれるしNetlifyとの繋ぎ込みも標準装備。後はドッタンバッタン好きに作り変えればいい。と思ってたんです。どっちかっていうとそっちのドッタンバッタンが大変だな、と。
Shifterは標準ではWP REST APIを吐いてくれません
そうなんです。まあそりゃそうだ、普通必要ないしサービスとして当然です。
というわけで以下に書いてあるように
Does Shifter support the WP REST API? | Shifter Documentation
WP Serverless APIを使ってみよう
ShifterではRead onlyのJSONを生成してくれるプラグインが用意されています。
wp-serverless-api
https://github.com/getshifter/wp-serverless-api
を書かれている通りにShifterのWordPress上にインストールして、スタティックなJSONを生成します。ここまではサクッといけます。
が、これをGridsomeに繋ぎ込むにはですね、
にテコ入れしなきゃいけないんだ（白目）。そんなの一介のデザイナーに一晩で出来るわけないじゃない。
だからShifterなWordPressの方に元のWP REST API吐く方法がないかなとか探ってみたんだけど、ちょっと分からなかった…。ログインし直したらいける？って思ったんだけどうまくいきませんでした。
静的なほうは多分、構造的に、ちらっとパスを書き換えるだけだとは思うんだけど（JSONの構造が違わなければ）、今回はここで力尽きました…すいません、次のお休みにリトライしてみます。誰かもう作ってないかなあ（念）。
肝心なのはこの先です
というわけでまだ２合目にも達していないのですが、肝心な山場はこの先です。Gridsomeで無事Shifterのサイトを読み込んでNetlifyにデプロイできるようになった其の先。
Shifterに乗っかったWordPressのブロックエディタ画面上とプレビュー画面上とNetlify上にデプロイされるGridsomeでドッタンバッタンしたCSS（Sass）及びJSをいかに繋いで設計するのか。超絶めんどくさそうだけど面白そうじゃない？っていう、この話を一番したかったんですが、次（いつだろうか）に回します（脱兎）。メリー・クリスマス！
2019/12/23 追記:
とろうに先生が作ってくれたよ！テストがまだだけれど、取り急ぎリンクを張っておきます。有難う。有難う。
