先日4/21（木）に、microCMSご利用ユーザーの日本デザインセンター 後藤 健人氏、ヤマップ 石田 浩二氏をお招きして、microCMSの活用事例や開発手法などをご紹介する「microCMS Online Meetup」を開催しました。ミートアップをご視聴いただいた皆様、ありがとうございました！

この記事ではミートアップの内容をご紹介します。

アーカイブ動画はこちら（Youtube）にてご覧いただけます。

登壇者とアジェンダのご紹介

microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話

後藤 健人氏（日本デザインセンター  Webデザイナー）
@takehitogoto

ページの表示速度・応答性を向上させるための取り組みとしてのJamstack開発や画像CDNの活用、スムーズなCMS運用方法について、詳しくお話いただきました。

▼登壇資料はこちら

▼microCMS導入事例インタビュー記事はこちら

microCMS × Shopifyで、ECサイトがリニューアル後急成長した話

石田 浩二氏（ヤマップ ECチームエンジニア リーダー / フロントエンドエンジニア リーダー）

ECサイトリニューアルの際にヘッドレスコマースとヘッドレスCMSを組み合わせた構築方法やShopifyとのデータ連携、運用体制や工夫した点などについて、詳しくお話いただきました。

▼登壇資料はこちら

▼microCMS導入事例インタビュー記事はこちら

microCMS × OpenAPIで高速かつ安全な開発を行う話

入沢 翼（microCMS / バックエンドエンジニア）
@lambdasawa

OpenAPIとは何かについての解説や、microCMSのOpenAPI連携機能の詳細や今後の開発予定について、お話させていただきました。

▼登壇資料はこちら

iframeフィールドでコンテンツにあらゆるAPIをつなぎこもう

松田 承一（microCMS / CEO・バックエンドエンジニア）
@shoma2da

microCMSのiframeフィールドの具体的な開発方法、活用・実用例、今後の開発ロードマップについて、お話させていただきました。

▼登壇資料はこちら

セミナー中にいただいたご質問への回答

Q. microCMSを使った場合、SEOとして弱くならないのかが気になりました。

Jamstackと呼ばれる方式で構築した場合は、microCMSから受け取ったデータをもとに静的なHTMLを生成します。 その場合、動的な処理が必要なく高速にページが表示されるため、むしろSEOに強いウェブサイトとなります。 HTMLからJavaScriptにて、動的にAPIを呼び出すケースにおいては、インデックスがされづらいなどのリスクは考えられますが、問題なく登録されているケースも多いです。Jamstackについて詳しくはこちらをご覧ください。

Q. imgixでキャッシュされたアクセスは、microCMSの転送量に含まれるのでしょうか？

キャッシュを利用して転送された場合についても、データ転送量にカウントされます。 また転送元はimgixではなく、microCMSで管理しているCDNになります。データ転送量について詳しくはこちらをご覧ください。

Q. WordPress等でJSONが出力されるので、ヘッドレスCMSとして利用できないこともないのかなと思いましたが、ヘッドレスCMSを利用する明確なメリットがあれば知りたいです。管理画面がわかりやすいとか画像CDNが無料で利用できるとかでしょうか？

WordPressのヘッドレス化と、microCMSを比較した際のメリットとしては、以下のような点が挙げられます。
・全てのレスポンスがCDN経由で配信されるので、パフォーマンスが良い
・管理画面がSPA(Single Page Application)のため、動作が軽い
・サーバレスと呼ばれるアーキテクチャで構築されているため、セキュアかつスケールしやすい
ヘッドレスCMSの特徴やWordPressとの違いについて詳しくはこちらをご覧ください。

Q. APIでコンテンツ生成するとなると、サービスのメンテナンス中はコンテンツ自体が表示されなくなってしまうのでしょうか？

原則的には24時間365日動作していますが、仮にメンテナンスを行う際はコンンテンツの作成や表示が制限されることは考えられます。microCMSでは、サービスにアクセスしにくい状況が起きた場合、もしくは利用できなくなった場合に障害状況をいち早くリアルタイムで確認できるステータスページをご用意しております。詳しくはこちらをご覧ください。

Q. メディアアップロードのマネジメントAPIが実装されれば、iframeとフリー画像系APIを組み合わせてmicroCMS内でメディアの検索・設定が完結できたりするのでしょうか？

iframe内で画像をアップロード→任意の画像APIで処理→それをmicroCMSにAPI経由で登録といったことはできそうです。 現状でも、iframeにて処理した画像のURLを文字列として連携することは可能です。iframe機能について詳しくはこちらをご覧ください。

Q. 2カラムで多言語対応されているとのことですが、3言語になった場合はどのように設計されますか?

現状はカスタムフィールドのレイアウトを2カラムにできるという特長を活かしたハックなので、3言語になった場合は、やはり縦積みにするしかないと考えております。もし、将来的にmicroCMSさんの管理画面側で言語切替を行えるアップデートがされることがあれば、 もっときれいに実装できると考えております。（WordPressのBogoなど、セレクトボックスで言語を切り替えるようなものを想像しています）
（日本デザインセンター後藤さんよりご回答いただきました）

Q. リスト形式で表示/非表示のステータスをまとめて変えたい時はどうされていますか?

タグの部分でしょうか？ 今回のタグの実装においては、 一括ステータス変更を考慮した設計になっておりませんが、 もし行いたい場合は、ハックじみた方法になりますが、一括選択フラグを操作するスキーマ（真偽値）を一つ用意して、それがチェックされているときは、各コンテンツの表示／ 非表示フラグを無視するなどはフロント側で実装できると思います。 ただ、一括選択を外し忘れるなどの問題が運用上で発生した場合、 それがクレームに繋がったりなどのリスクが考えられるので、 あまり推奨はしません。
（日本デザインセンター後藤さんよりご回答いただきました）

最後に

初の開催となった「microCMS Online Meetup」はおかげ様で大盛況のうちに無事終えることが出来ました。登壇者の方々、YouTube Liveをご視聴いただいた皆様、誠にありがとうございました。

次回は、5/26(木)に「ジャムジャム！！Jamstack_7」の開催を予定しています。

「ジャムジャム！！Jamstack」はJamstackアーキテクチャを愛する方々、これからJamstackについて勉強したい！と思っている方々が知見を共有する、登壇形式による勉強会です。

イベント視聴には参加登録が必要です。ぜひ以下URLより参加登録ください。
参加登録・詳細はこちら
※LTのご参加も絶賛募集中です！登壇内容はJamstackに関することであれば何でもOKです！皆様のご参加お待ちしております。