JamstackなECサイトの作り方やFlutter Webまで！「ジャムジャム！！Jamstack_5」を開催しました

Jamstack

2022/02/25

ひまらつ

こんにちは。ひまらつです。
先日2/22(火)に「ジャムジャム！！Jamstack_5」を開催いたしました。

「ジャムジャム！！Jamstack」はJamstackに関する登壇形式の勉強会で、毎回Jamstackに関する様々な知見が交換されています。
この記事では今回のイベントで発表された内容をまとめさせていただきます。

なお、動画はアーカイブとして配信しているので興味のあるセッションは動画もあわせてチェックしてみてください。

LTセッションの内容

tetsuro_itさん「WordPressだけで実現するReact x HeadlessCMS」

WordPressでサイトを作成する際に、PHPでテーマを作る代わりにReactでページを作っていく方法をご紹介いただきました。

サイトの構成をいきなりJamstackに変えるのはハードルが高い場合、慣れたWordPressの上でReactでページを作成できるのは便利です。また、そこで好きなヘッドレスCMSと組み合わせて使うこともできるので幅が広がります。
LTではパッケージのインストールから実装の進め方までお話いただきました。

Fastriverさん「Flutter WebでもJamstackしたい」

Flutterはモバイルアプリのためのフレームワークという印象が強いですが、Webアプリを作ることもできます。
通常はビルド時にJavaScriptが生成されSPAとして動作しますが、そのビルド時にデータを取得してJamstackとしてパフォーマンスさせようと試みたお話です。

LTではCIビルドの際にmicroCMSからコンテンツを取得し、それを利用する方法をご紹介いただきました。
また、その仕組みを簡単に利用できるpackageも公開されています。Flutter × microCMSでJamstackする際にはぜひご利用ください。

hanetsukiさん「Next.jsで静的サイトを作成時よく使っているライブラリまとめ」

こちらのZennもあわせてご覧ください：
Next.jsで静的サイトを作成する際によく使っているライブラリまとめ

Next.jsで静的サイトを作る際に便利なライブラリという切り口で、next-seoやaspidaなど11つのライブラリをご紹介いただきました。
それぞれの特徴や利用シーンなど丁寧にまとめられています。
上記のZennにはライブラリへのリンクがまとまっていますので、ぜひチェックしてみてください。

Hide Okamotoさん「microCMSとStripeを使ったJamstackなECサイトの作り方（Next.js篇）」

こちらのQiitaもあわせてご覧ください：
microCMSとStripe + Next.jsを利用したJamstackなHeadless ECサイトを作る方法（入門編）

オンライン決済システムのStripeとmicroCMSを組み合わせ、ECサイトをJamstack構成でつくるお話です。
microCMSで商品の説明などコンテンツを管理しつつ、フィールドの一つとしてStripeのIDを入力。
StripeのSDKを使ってデータを連携し、Jamstackなページを生成します。

LTの中ではmicroCMSのAPIの定義の仕方や、キーを安全に管理するための実装Tipsなどをご紹介いただきました。
上記のQiitaの記事中に具体的な実装も紹介されていますので、気になる方はぜひチェックしてみてください。

しすこさん「『ZUKAN MUSEUM GINZA』公式サイトにおけるmicroCMSでの擬似多言語テキスト管理への挑戦とその苦悩」

サイトはこちら：
ずかんミュージアム銀座

「ずかんミュージアム銀座」では日本語、英語、そして子供のためのひらがな語に切り替えられます。
この複数の言語系を持つコンテンツをmicroCMSを使って管理することに挑戦した話をご紹介いただきました。

microCMSのカスタムフィールドやコンテンツ参照を使って工夫した点や、設計が難しかった点について実体験を下にお話いただきました。

でぃーすけさん「microCMSを使って、ほぼノーコストでフォーム作成機能を追加する」

デモサイトはこちら：
https://custom-forms-with-micro-cms.vercel.app/

柔軟に項目を設定でき、ユーザーに高速で表示されるフォームをmicroCMSを利用して作ることができます。

カスタムフィールドと繰り返しフィールドを使い、フォームの項目を自由に構築。必須チェックやプレースホルダーの内容なども設定できます。
見た目の実装はサイトごとに分けられるので、複数プロジェクトでこのフォーム作成機能を使えます。

APIスキーマのimport/export機能を使えば別プロジェクトでも簡単に利用可。
でぃーすけさんの作ったAPIスキーマを公開いただいてるので、これを参考にするとすぐに作れそうです。

ソースコードはこちら：
custom-forms-with-microCMS | GitHub

最後に

今回も6名の方にLTしていただきました。発表者の方、またYouTube Liveをご視聴いただいた皆様、ありがとうございました。

「ジャムジャム！！Jamstack」勉強会は毎月開催しており、次回は 3/24(木) に開催します。
LT枠、一般枠ともに募集中です。以下のイベントページよりぜひご応募くださいませ！
https://jamjamjamstack.connpass.com/event/240403/

それではみなさま、また次回お会いしましょう！