yasudacloudの日記

札幌に住むソフトウェアエンジニア

microCMSでチェスの棋譜を管理する

SaaSのヘッドレスCMSはOSS製に比べて拡張しにくいという短所がありますが、microCMSの拡張フィールドの仕組みが解決策の一つだと思います。具体的にはiframeとpostMessageで外部のシステムと連携し、ユーザー側で比較的自由度の高い入力フィールドを自作することができるようになります。

この手のSaaSの拡張は他にも、

①SaaS側がサードパーティ製のシステムと連携

②機能の一部をユーザーがコードで拡張する(FaaS的な)

といった方式を取っている場合がありますが、入力フィールドの拡張はmicroCMSの方式がとても良いなと感じたので、こんなものも出来るよというのを紹介します。

参考

公式の下記をご一読。

document.microcms.io

やってみた

題材はなんでも良いのですが、既に何件も記事が出ているので少し趣向を凝らしてチェスの棋譜(FEN)を入力するフィールドを作りました。

なぜチェスかというと、将棋よりも世界的に普及していることもあってGUIのライブラリが充実しており、将棋よりルール(つまり設定)も単純なので実装しやすいのです。

ライブラリはReact対応のこちらを使います。

www.npmjs.com

実際に組み込んだ例はこんな感じに。

デモ動画

iframeというと昔ながらの読み込みが遅くて違和感があるものを連想しますが、個々のフィールドを表示する分にはあまり気になりませんね。

実際に運用まで考えるなら棋譜をリセットしたり戻ったり、指し手のエラーチェックやポーンの昇格選択などフィールドに色々な考慮が必要ですが、ここで重要なのはデータの連携部分です。

内部的には配列で差し手を複数保持して値が変わる度にpostMessageで送信しており、棋譜自体を複数管理することも可能です。入力フィールド的には1つなので微妙ですが。

他にも外部システム側でレンダリングしてるのでAPI呼び出しなんかも自由です。チェスのケースだと、指し手をAIで検討するとか類似する棋譜を検索して引っ張ってくると実用性が高くなりそうです。

機能の紹介をしたかったのでコードは今回割愛で・・。

まとめ

ヘッドレスCMSはデータ・スキーマやAPIといった機能面に重きを置いているものが多く、コンテンツを編集(投稿)する人のリテラシー要求が高い印象があります。

こちらの上位を見てもここ数年であまり変わってなく、成熟してきていると言えます。開発者にとって使いやすい反面、エンドユーザーが使いやすい仕組みを構築できるかが焦点になると思います。

ちなみに最近はあまりチェスやってませんが、CMSにチェスや将棋を組み込みたい相談といった面白い相談があればお気軽にご連絡ください( ✌︎'ω')✌︎