任意のheadless CMSを使ってzennの記事を書く
Zenn一般公開の直後に試しに使ってみようと思ったんだけど、テキストエディタの問題がしんどくて修正待機ムーブをとっていた（これバグ報告1号だよね）。最近修正してもらえたのでめでたく初投稿だ。そして結果的にこのエントリを読むとわかるんだけど、この修正待機ムーブは完全に意味がなかった(!?)
headless CMSを使いたい（かも）
さて、Zennはgithubリポジトリに記事を保存できる。その場合の記事の書き方は公式ドキュメントが十分わかりやすいのでそっちを見てほしい。
Zennで記事を書こうとしたことがある人なら、気付いている人も少なくないと思うけど、この記事データの形式はjekyllによく似ている。Jekyllの形式でブログを管理するものとして多分一番良く知られているのはgithub.ioじゃないかと思うけど、とにかくポピュラーな形式だ。ZennもJekyllもMarkdownコンテンツの前にFront Matterを書くところから始める。Jekyllの投稿は_postsディレクトリでzennの投稿はarticlesディレクトリだとか、jekyllはRubyのツールでzenn CLIはnodeのツールだといった違いはあるけど。
コンテンツのディレクトリ構成などがJekyllと似ているということは、Jekyllをサポートする任意のCMSが使えるのではないか。Jekyllやgithubリポジトリで管理するZennみたいなサービスをカテゴライズするなら、static CMSあるいはheadless CMSといえると思うけど、任意のheadless CMSが使えたら便利ではなかろうか? このheadless CMSのリストを見るとわかると思うけど、静的コンテンツだけでブログを構成できるJekyllをサポートするCMSは山ほどある。そもそもzenn-editorもheadless CMSの一種だともいえる、気がする（もちろん課金系の機能とかいろいろWebアプリケーションとして実装されている付加機能はある）。
実際には何でもとはいかないかもしれないけど、とりあえずこのエントリはproseを使って書いている。これがうまく出現したらこの試みはうまくいったということだ。
まずnpx zenn new:articleで記事を作成すると、articlesディレクトリ以下にランダムっぽい名前の記事ファイルが生成される（詳しくは公式ドキュメントのslugの説明を参照）。これをproseで開いて編集する。
proseで記事を保存するとgithubリポジトリにpushされる。Zennの管理画面で確認すると…
どうやらうまく更新できたようだ。（なお、このgitリポジトリはprivateなので参照できない。）
titleやemojiは空白なので（emojiはそもそもメタデータが定義されない）、自分で追加する必要がありそうだ。
TODO: 画像もリポジトリで管理したい
問題は画像の扱いだ。このスクショはproseの画像アップロード機能を使ったので、画像はリポジトリ内の同じディレクトリに保存されるので、ユーザーが管理できる。proseのエディタ上ではというmarkdownに変換されたのだけど、これはZennで機能しなかったので、別途「画像をアップロード」せざるを得なかった。こうなると画像のURLはhttps://storage.googleapis.com/zenn-user-upload/以下のものになってしまうようだ。これはちょっともったいない。gitリポジトリで記事を管理するなら画像も管理したい。
この画像は非公開記事についてもアクセス制限なしに参照可能なので（そうであるがゆえにproseのような外部エディタで参照できるという話もある）、それでは困るという人は画像のURLは公開しないほうがよい（まあ普通はしないだろうけど）。Google Cloud上に保存されるファイル名は少なくとも推測が容易ではないので、「自らURLを晒さない」以上に気をつけるべきことは多分ない。
ちなみにproseはJekyllのコンテンツとして今書いたテキストもこんなふうに変換する（変換してしまう、ともいう）。URLの部分がエスケープされて展開されているところに注目。
もしかしたら、画像の扱い方はzenn-editorが（現時点では）使っているCodeMirrorが課している制約なのかもしれない（GCS連携だけ実装されているとか）けど、これが改善されると外部のJekyll対応のheadless CMSでも使いやすくなる、かもしれない。少なくともproseでは使いやすくなる。
追記: というわけでzenn-editorのissueにしてみた。
Discussion