microCMSワークショップを受講してヘッドレスCMSを実感した！

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

6月21日（日曜日）に午前11時から開催されたオンラインイベント「チャリティカンファレンス沖縄」を視聴しました。

午前中のセッションはいずれも中身の濃い素晴らしいものでした。

そして午後、お目当てのmicroCMSワークショップの受講。
ドキドキしながらの参加でしたがとても楽しかった！参加できてほんとによかった！

もともとNetlifyを使ったヘッドレスCMSの流れに興味を持っていて、microCMSが国産ヘッドレスCMSとして出てきたときに触ってみたんですが、具体的にどう活用できるか見えなかったのでした。

今回のワークショップで使いどころを考えるきっかけになればと思っての受講でした〜

2時間のワークショップの内容は「microCMS + NuxtでJamstackブログを作ってみよう」というもの。

講師はmicroCMSを開発しているウォンタ株式会社の柴田さんで、サポートとしてウォンタ株式会社の松田さんも入っておられました。

まず柴田さんが少し進めて、その後に受講者が手を動かす時間を取るで1セット。このセットを繰り返しで完成に持っていきました。
受講者が手を動かす間は柴田さんと松田さんが受講者の進捗を確認して、質問があるときは気さくに答えてくださいました。超貴重な機会！

柴田さんのカメラ映像と端末の画面をRemoで共有しながらのワークショップの受講でした。
RemoというWebサービスは、仮想の1フロアに4人くらいがシェアするテーブルが10個ほどあって、各テーブルを講師が回ることができる、というちょっとおもしろい設定がありました。
講師側からすると大勢を少人数に分けて相手にすることができるので、ワークショップにはとてもよいWebサービスであるように感じました。

参加資格と事前準備は下記のように伝えられていました。
開発業務をしていれば特に問題なく準備できる内容でした。

参加資格：
npmまたはyarnを扱うことができる

事前準備：
https://ja.nuxtjs.org/guide/installation/
1. create-nuxt-appを利用し、Nuxtの雛形を事前に用意（※途中の質問にあるサーバサイドのフレームワークはNoneを選択する）
2. npm run devコマンドでlocalhost上でサイトが見られるところまでやっておく
https://microcms.io
3. アカウント登録、ログインを事前に済ましておく

https://www.notion.so/microCMS-Nuxt-Jamstack-c7d68e68085a400f8eeb1887e97cdd6f

ワークショップは「microCMS + NuxtでJamstackブログを作ってみよう」を見ていただければわかるとおり、まあ盛りだくさんな内容で、実際はじっくり進めるというよりは講師の話を聞きながら手を動かす感じになりました。

流れは下記のとおり。2時間でこの内容はお腹いっぱい。森は最後までいきつくのに2時間+20分ほどかかりました。

  1. Nuxtプロジェクトを用意する → 環境を作ってnpm run devでブラウザ表示するまで
  2. microCMSの用意する → microCMSのサイトでアカウント作成＆GUIでAPIの作成（タイトルと内容）と簡単なブログ投稿の作成
  3. ブログ一覧を表示する → axiosをインストールして /pages/index.vue にブログ一覧を作成。固定ページっぽい/pages/about/index.vueも作成
  4. ブログ詳細を表示する→ /pages/_slug/index.vueに詳細記事を作成
  5. CSSで見た目を装飾する→ sassのモジュールをインストールして vueファイル内でsassを書いて表示
  6. ビルドして静的ファイルを生成してみる → `npm run build && npm run export` で静的ファイルがdistフォルダに生成されるようにする
  7. ファイルをホスティングする → 6までに手を動かした内容をGithubの新規リポジトリを作ってpushしてNetlifyで公開
  8. microCMSとNetlifyを連携する → microCMSでコンテンツの変更があればNetlifyの公開サイトに反映するようにmicroCMSとNetlifyの設定を調整
  9. カテゴリーを追加する → 記事カテゴリーを作成＆記事に反映＆ブラウザで表示
  10. 下書き確認用のステージング環境を用意する → microCMSで「画面プレビュー」ボタンをクリックしたときに表示される環境を公開用の環境とは別にNetlifyに作って表示

フロントエンドエンジニアだったら特に問題なく触ることができる内容だったと思いますが、なかなかの量だったのでほかの受講者の方々も大変だったかもですね。。Githubのアカウントが必要だったり、Gitの扱いも慣れてないときつかったかも。

内容は最高に楽しかった！特にプレビュー環境を別途作るっていうのがなるほどでした。

ワークショップを受けた時点ではWordPressのように管理画面から階層のある固定ページを作ったり、機能てんこ盛りなエディタからページをつくるならWordPressを使えばいいと思うし、シンプルなものを作るならヘッドレスCMSがいいのかな、と思うところでした。

そもそもmicroCMSはブログを作るための仕組みじゃなく、アプリで利用するようなデータのAPIを自由に作れるのが大きなメリット。
アイデアを形にするときにほんとにありがたいWebサービスですね。

チャリティカンファレンス沖縄の運営の皆さん、講師の皆さん、素晴らしいイベントでした。ありがとうございました！
そしてウォンタ株式会社の柴田さん、松田さん、素晴らしいワークショップを本当にありがとうございました！

2020年6月25日JavaScript, seminar