Jamstackオンラインワークショップ #4「microCMS × Next編」に参加しました + microCMSでサムネイル画像を表示する

こんにちは、みみです。

大変遅くなってしまいましたが、10月8日に行われたmicroCMSの勉強会に参加しまして、とても良かったのでレポートしたいと思います。スグにしたかったのだけれど、復習する時間がなかなかなくて今になってしまいました。

当日のイベントのページはこちら。

Jamstackオンラインワークショップ #4「microCMS × Next編」
https://microcms.connpass.com/event/190260/

残念ながら、今後はしばらくリソースが足らないので次の勉強会は未定ということでしたが、配布資料が完璧だったので、何も困らずに microCMS x Next.js 体験出来るのでは無いかと思います。

当日配布されたのと大体同じ内容（というかもっと詳しいバージョンになってる気がする）の資料を以下のブログで公開してくださっています。

microCMS + Next.jsでJamstackブログを作ってみよう https://microcms.io/blog/microcms-next-jamstack-blog/

…なのでまあ、このブログの役目はこの記事のリンクを紹介することでほぼ終わりなのですが、ワークショップのススメ方がスマートで良かったのでその辺りとかをお伝えしたいなと思います。

会場はremo

会場は、remo。時間になったら、講師の柴田さんのセッションが始まり配布された資料を説明しながら一通り進めてくれます。この資料がほんと良く出来ていて感心しました。あらゆるツマリドコロをちゃんとフォローしてくれる感じ。

きりの良いポイントまで説明が終わったら、会場に切り替わってモクモクタイム。3人の席だったのですが、お一人は柴田さんのセッションを聞きながら進めていてもう終わってらした。優秀！

のんびり発表を聞いていた私もその方にフォローいただきながらポカミスかましつつも、何とかVercelのホスティングまで完了。

この時、柴田さんとメンターさんも順次、席を回ってきてくれてフォローをしてれるのもとても良かったです。Zoomでみんなの前で発言するのってちょっと緊張するけれど、これなら質問しやすいなあと思いました。Zoomじゃなくてremoならではのポイントですね。こういった本気のワークショップにはremoのほうが良いかもなと思いました。Zoomでもブレイクアウトルームがあるので似たようなことは出来るのですが、席についてる感って結構大事なのかも。あとremoだと顔出ししなくてもあんまり気にならない感じで良いですね。

サムネイル画像機能を付けてみる

さて、microCMSは自分で気軽にデータベース設計が出来るのでシンプルな「ブログ」に使うのは勿体ない心地ですが、取り敢えずブログっぽくサムネイル画像を付けてみました。

こういうチュートリアルをやるなら、一歩はみ出してちょっとした機能を足してみると色々知ることが出来てオススメです。

microCMS側でimageという項目を追加して、imageが指定されていたら画像を表示するようにしてみました。microCMSはImgixという画像APIを利用していて、URL末尾にパラメーターを渡すだけで色々処理できるのがめちゃくちゃ便利です。

詳しくは下記公式ドキュメントなどを参照ください。

画像APIとは
https://microcms.io/docs/image-api/introduction

Imgixのドキュメント
Rendering API | imgix Documentation

Next.jsでプレビュー機能のあるHeadless CMSが実現できる

そして、この先が最も知りたかった部分でして、Headless CMSの弱点であるプレビューできない問題が解消するんですって！まじで!?超やりたい！やるしかない！

だけれどこの日は別の予定が被っていて、途中で失礼したため、これ以降は自習で持ち帰りだったのですが、なかなか自習時間が取れずに今になってしまいました。ただ本当に公式ブログをなぞっただけで中身がよく分かってないので、詳しくは以下を参照してください。

Next.jsのPreview Mode＋Vercelでプレビュー機能を実現する

そんなわけで、はじめての　micro CMS x Next.js x Vercel なサイトがこちら。

https://microcms-next-jamstack-blog-rho.vercel.app/

やあたのしや。15年前余に見様見真似でPHPなCMS作ったりしてた時の高揚感を思い出しました。当時はプレビューモードなんて便利な機能、作ってなかったけれども。

Next.js いい感じ

なんかちょっと前に少し触った時はなるほど分からんしか無かったんですが、なんだかとっつきやすくなった気がする。のは、JSXとかReactに少し見慣れて来たからでしょうか。昔の触りたての HTML x CSS x JavaScript で良く分からんけれどガチャガチャやっておもしろ～いってなってた楽しさは今はココにあるのかもしれないなあとか思いました。もうNext.jsで良い気がする。

さて、このテストサイト、どうしようかなあ。