こんにちは！

5/31（水）に「microCMS Online Meetup 2023」を開催しました。Meetupは年に1度開催している、microCMSの新機能や最新情報を紹介するイベントです。
このイベントレポートでは発表したセッションの内容や、当日の懇親会の様子を紹介します。

また、レポートの下に「質問回答コーナー」を設け、当日取り上げられなかった質問に回答しています。

Meetupの概要

Meetup は昨年に続き2回目の開催となりました。

▼昨年のレポート
【イベントレポート】microCMS Online Meetup

今年も大変多くの方にご参加いただき、400名を超える方に参加登録いただきました。
YouTube Liveでご参加いただいたみなさま、ありがとうございました！

セッションレポート

アーカイブ動画

セッション内容は YouTube でアーカイブを公開しています。
デモの内容や質疑応答も含めてご覧いただけます。ぜひチェックしてみてください。

1. 新リリース: microCMSテンプレート

CXOの柴田より、まもなくリリースされるmicroCMSの新機能「microCMSテンプレート」を紹介しました。

microCMSテンプレートは「表示面の実装が大変」「最新技術のキャッチアップが必要」など、ヘッドレスCMSが抱える課題を解決すべく作られた機能です。1クリックで簡単にソースコードとmicroCMSのサービスが立ち上がるため、質の高いサイトやアプリケーションを誰でもすぐに立ち上げられます。

セッション内ではデモも行いました。microCMSテンプレートは近日リリース予定ですので、続報をおまちください！

2. シン・リッチエディタ徹底解説

最近リリースした「新しいリッチエディタ」について、開発をリードしたプロダクトエンジニアのりゅーそうが紹介しました。

旧リッチエディタは人気のフィールドの1つですが、テーブルが使えないなど行き届かない部分がありました。
新しいリッチエディタでは「テーブル」「カスタムclass」「埋め込みプレビュー」などの機能が追加されたほか、使い勝手も向上しています。

ヘッドレスCMSにおけるリッチエディタの役割やアクセシビリティ、今後の展望についても述べられています。

3. microCMSのエンジニア組織と文化

エンジニアリングマネージャーの大西より、microCMS内部のエンジニア組織について紹介しました。

microCMSは非同期コミュニケーションに比重を置いた働き方を実施しており、開発組織としては「面倒をなくして楽しい部分を増やす」を目指しています。
開発効率をあげるためにアグレッシブな取り組みをしており、AI活用やコードレビューのスキップなどその取り組みの一部を紹介しています。

4. microCMS AI

プロダクトマネージャーの平松より、microCMSとAIの可能性の話を紹介しました。

microCMSの特徴である「APIベース」「構造化データ」はAIと相性が非常に良いと思っています。
開発中の新機能「コンテンツAI」のデモを行い、AI機能を作る上で考えるポイントや知見を紹介しました。

オンライン懇親会

セッションの後、新たな試みとしてオンライン懇親会を開催しました。
microCMS社は普段からフルリモートワークで働いており、バーチャルオフィス「Gather」を利用しています。そのオフィスを開放して、参加者のみなさまと交流させていただきました。

（オンライン懇親会の様子）

おわりに

当日はTwitterやYouTubeのコメント欄、そしてSlidoへの質問など多数のリアクションをいただき、大変盛況のうちに幕を閉じることができました。

オンライン懇親会では30名ほどの方にご参加いただき、セッションの質問やmicroCMSへの要望など直接お話しさせていただきました。ユーザーのみなさまと直接話す機会は普段あまりないので、メンバー一同とても良い時間を過ごせました。

microCMS Online Meetupは年に1度のペースで開催しています。少し期間は空いてしまいますが、また次回もみなさまにお会いできることを楽しみにしております。

改めてになりますが、セッションをご視聴いただいたみなさま、懇親会にご参加いただいたみなさま、ありがとうございました！

microCMSで一緒に働きませんか？

microCMSでは一緒に働くメンバーを募集しています。
会社の雰囲気や採用中の職種は以下のページにまとまっています。
microCMS 採用情報

少しでも興味を持っていただいた方は、まずはカジュアル面談で気軽にお話しさせてください！

質問回答コーナー

当日Slidoに投稿いただいた質問に回答します。各セッションの発表者が回答しています。

microCMSテンプレート

Q. いろんなフレームワーク用のテンプレートがあれば、フレームワークの理解用としても役立ちそうですね。そういったところから利用者を増やすこともできるかと思いますが、新たなフレームワークもどんどんフィーチャー（原文ママ）

新しいフレームワークを利用してテンプレートを作ってみるのも、他の方にも役立ちますし、ご自身のポートフォリオにもなると思うので良いと考えています。

Q. テンプレート側の更新に追従したい場合はどういうフローを想定しますか？

今回の形式はforkではないため、本家リポジトリの変更の通知や反映はできません。
（forkも検討したのですが、本家リポジトリのコミット履歴が残ったままでは使いづらいため、Template形式としております）

作った時点から自分自身のリポジトリとして出来上がります。
自身のリポジトリに元リポジトリへのリンクは残るので、変更等はそこからチェックしてもらう形になります。

自身のリポジトリもかなり改変すると思いますので、基本的にはフレームワークのバージョンアップ等もご自身で対応いただくのがベストかと思います。

Q. テンプレートへのプルリクエストは可能ですか？フレームワークのバージョンアップの追随がされないものが増えていきそうな

上記と同じです。

Q. すぐに使いたいです！HubSPOTなど、ほかのアプリ連携は今後拡充する予定はあるのでしょうか？連携予定のアプリが聞けたら、聞きたいですが・・無理ですよね？

ユースケースとして考えられる連携はどんどん作っていきたいと考えています。
連携予定のアプリは現時点では未定です。

シン・リッチエディタ徹底解説

Q. 空行を段落に変更して削ってくれる挙動をするようですが、挙動の詳細はドキュメンテーションされますか？

申し訳ありませんが、ドキュメントは整備中です。
Tiptapのキーボードショートカットに準拠していますので、ドキュメント整備まではこちらをご参照ください。
https://tiptap.dev/api/keyboard-shortcuts

Q. 別タブで開くをドメイン単位でデフォルト値設定したいです！自ドメイン以外は別タブで開きたいので

ご要望ありがとうございます！
社内で検討させていただきます。

Q. 新リッチエディタへAPIからpost/put/patchできるのは時期的にはいつごろ対応予定でしょうか？2Q中くらいにはきますか？

時期は未定です。
段階的なリリースを予定しております。
第1段階：基本的な要素に対応 (画像はmicroCMSにホスティングしているものに限る)
第2段階：外部の画像も対応（画像アップロードAPIを使ってアップロードして紐づける）
それ以降：WordPressなどの他CMSからの移行検証

第1段階は遅くとも今月中にはリリースされる予定です。
画像や埋め込みなどをご利用の場合は別途スクリプト、手動などの対応が必要になります。
お待たせしてしまいますが、よろしくお願い致します。

Q. リッチエディタでdiv要素を作ることはできませんか？

発表の方でも少しお話しさせていただきましたが、そのようなケースでは繰り返しフィールドの活用をご検討ください。
お手数ですが、具体的なユースケースなどあれば、社内チャットサポートなどでご要望いただけますと幸いです。

Q. Lexicalについてどう思いますか？すいません。雑な質問ですが個人的に聞いてみたいです。

Lexicalも検討致しました。
私たちが採用したTiptapとはレイヤーが異なるものだという理解をしています。
- Tiptap→ProseMirrorをラップしたもの。ある程度のロジックが用意されている
- Lexical→Reactのワークフローにのって自身でロジックを組み立てるもの

LexicalもReactとの親和性という部分で魅力的なライブラリでしたが、工数の関係や学習コストという観点でTiptapを採用しました。
ProseMirror自体のナレッジはネット上で豊富なので、細かいカスタマイズも可能だと感じています。

Q. APIレスポンスが変わるということですが、新旧のマイグレーション必要だと思いますが、APIが変わる感じですかね？もう少し詳しく知りたいです！

はい。具体的には新リッチエディタのHTMLの内容が変わります。
具体的には
- 画像がpタグで囲われていた→figureで囲われるようになった
- 文字サイズのstyleタグなどがなくなった
- 埋め込みのiframe要素がdivタグで囲われるように
などの変化があります。このあたりの差分につきましてはドキュメント化を進めてまいります

Q. WordPress移行サポート対応はいつ頃対応予定になるでしょうか？かなり欲しい機能です。。。

対応時期は未定です。 なるべく早く提供できるように、開発を進めてまいります。

Q. 欲しいAPIあるから副業で働きにいきたい

採用ページから、まずはぜひお気軽にカジュアル面談などでお話ししましょう！
https://herp.careers/v1/wanta

Q. 複数の要素に対してdivで囲ってカスタムclassを付与することはできますか？（背景色など）

発表の方でも少しお話しさせていただきましたが、そのようなケースでは繰り返しフィールドの活用をご検討ください。
お手数ですが、具体的なユースケースなどあれば、社内チャットサポートなどでご要望いただけますと幸いです

Q. 校閲ツールなども新リッチエディタなどで提供される予定はあるでしょうか？外部の校閲ツールの導入など。AIの部分で話が出るかもしれませんが。

ご要望ありがとうございます！
校閲ツール面白いですね。社内で検討させていただきます。

microCMSのエンジニア組織と文化

Q. コード生成技術は使っていますか？

ChatGPTやGitHub Copilotでコード生成をしています。またテストコードのモックやOpenAPIを使った型の自動生成などは別途ライブラリを用いて行っています。

Q. 業務委託は募集していますか？

スキルや業務時間に加えてその時々の状況によりますが、以下よりお問い合わせください。
https://jobs.microcms.co.jp/

Q. Go移植チームの現在の課題はなんですか？

APIをNode.jsで記述しており、型がないことが最大の課題です。Go移植の作業自体は順調に進んでいます。

Q. ClickUpめっちゃいいですよね（質問ではない）

タスク管理という意味ではGitHubのissueやプロジェクト管理を使うよりは柔軟で使いやすいと思います！

Q. Terraformの反映は自動化していますか？

過渡期ということもあり、手動で行っています。最終的には全て自動化します。

Q. Go移植チームの業務委託勢はどうやって採用しましたか？

現在のメンバーはリファラルやSNSでお声がけさせていただきました。

Q. チームの合意ってどうやってとっているのでしょうか？テキストベースのやり取り？

なるべくSlackでのテキストベースで、結論が出しづらい複雑な場合は口頭で…という考え方です。

Q. ヤフーにいたのがcopilotに把握されているの面白いw

入力している内容を理解し、すぐに予測に使ってくるところがCopilotの強みですね！

Q. コードレビューで担保していたものを、やめた後、どう担保しているのかきになります。

前提としてコードレビューを全てにおいてやめたわけではなく、Go移植においてはやめました。ただしテストカバレッジのクリアとE2Eテストの作成が条件となっています。
設計パターンやコードの大まかな構造が決まっているため実際にはあまりレビューすることはなく、動作の保証はE2Eテストで可能なため、実はコードレビューで担保していたものがそもそもなかったという回答になります。

Q. Node.js→Goの理由はなんですか？

型が欲しかったためです。型がないことで理解が難しくなっていました。
TypeScriptという選択肢もありますが、「型が欲しい」のであれば、強い静的型付け言語を選ぶべきであり、ランタイムには型がない弱い静的型付け言語は選択肢になりませんでした。さらに環境構築やエコシステムも移り変わりが早かったり、悩まされることも多かったです。
Golangを選択した理由として、文法が簡単（誰が書いても同じようなコードになりやすい）、ライブラリが豊富、高速、エコシステムが安定しているなども挙げられます。

microCMS AI

Q. 画像生成AIも組み込まれる予定ですか？

検討しています！
画像のクオリティが重要でないケースもあると思うので、コンテンツの内容をもとに画像を生成するなどチャレンジしていきたいと思っています。

Q. chatGPTによるPRの自動生成ですがコードの差分が多いとtokenをかなり消費するように思うのですがコスト管理どのようにしてますか？(差分が多いと文字数の上限にも引っかかりそうかと)

diffの差分量で処理を分けています。
diffが少ない場合はソースコード内容を詳細にgptに渡してコメントを作っていますが、diffが多い場合はファイル構成やPull Requestの構成など主に概要情報をgptに渡すことで全体感を解説するようなコメントをしています。

Q. 独自に用意したchatGPT・AI機能をmicroCMSに組み込めることも今後検討あるでしょうか？

検討しています。 自社のコンテンツでモデルをチューニングし、自社っぽい文章を書いたり、校正してくれるような使い方ができるようにしたいなと思っています。

Q. アイコンの似顔絵がとても似ていたのですが、これもAIを使ってますか？

ありがとうございます。アイコンは人の手で描かれたもので、ココナラというサービスで書いてもらいました！

Q. AIが参考にする情報はネットから収集するのですか？

インターネットから検索しているというよりは、ある時点でインターネットに公開されていた文章を学習している、が近いかなと思います。
これは裏側で使っているOpenAI社のモデルの性質です。

Q. 最後のタイトルや本文の入力の出しわけがどうやってるか気になります！！

ChatGPTに聞く時に、入力した指示に加えてmicroCMSのスキーマ情報を渡してます。
スキーマに合わせてテキストを生成するようにお願いすると、いい感じに構造化したデータを生成してくれる仕組みです。