情報共有ツールesa.ioをCMSとして使って1ヶ月運用してみた

このブログはesa.io（情報共有ツール）をソースにしています。API経由でとってきた記事データをGatsby（静的サイトジェネレーター）を使ってhtmlとして吐き出したものをホスティングしています。
この記事では情報共有ツールをCMSとして扱うメリットと使ってみて見えてきた欠点などについて書いていこうと思います。

> 仕組み仕組み

1. esa.ioの特定のディレクトリが更新された際に、WebhookでNetlifyに通知。
   • esa.io Webhook
   • GatsbyJS
   • gatsby-source-esa

1. NetlifyはWebhookを受けて、GithubのリポジトリのBuildタスクを実行し、HTMLを生成、そのままデプロイ
   • Netlify

ざっくり同じことを再現しようとするならmottox2/gatsby-starter-esaをベースに作ればいけます。（近日中にもっとわかりやすいものにしようと思っています。）

> Merit1. 普段文章を書く場所から公開できるMerit1. 普段文章を書く場所から公開できる

普段、普通に使っていればesa.ioには文章やドキュメントを書き溜めているはずです。それを blog/ カテゴリに動かすだけでブログに記事が公開できるという仕組みをとっています。
これは、社内共有用に文章を書いたものを、少し変えればブログとして記事を公開できるようになっています。

通常、ブログを書こうとすると、noteやはてブ・WordPressなどのサービスを使うと思うのですが、そうなると「ブログを書こう」と強い意志を持たなければ、そのURLにすらたどり着くことはありません。
esa.ioなら、普段から書いていれば下書きがあるので、それを書くための気力さえあれば記事を公開できます。

つまり情報共有ツールがCMSとして機能することでブログ投稿のハードルが下がります。

> Merit2. esa.ioの機能がまんま使えるMerit2. esa.ioの機能がまんま使える

エンジニアの技術ブログで採用されるデータソースはリポジトリ内のmdファイルが多いです。ですが、mdファイルを書くのにエディタを立ち上げますが、エディタは基本的にコードを書く場所であって、文章を書くのによいツールが揃っているとは限りません。（もちろんエディタの方がなれている人が多いでしょう）

しかし、esa.ioをCMSとして使うと、本来文章を書くために作られたツール一式がそのまま使えます。
例えば、タグ・カテゴリの補完やテンプレートなどの機能が備わっています。

タグの補完

テンプレート

しかもこれらのエディタは基本壊れず、運営によって自動的にアップデートされます。（何らかのアップデートによって）壊れたとしても運営の人が直してくれるでしょう。

コードエディタと違って、間違いなく文章を書くために作られたツールなので使いやすいです。

補足: 正直、textlintで文章チェックとかマークダウンを挿入する独自拡張を作りたくなる気持ちはあります。

> Merit3. WIPの概念とAPIがよいMerit3. WIPの概念とAPIがよい

これはesa.io固有の話で、esa.ioにはWork in Progressの概念があり、WIPなドキュメントであることを簡単に示すことができます。
このブログではWIPなものは表示せず、Ship Itされたものだけブログに公開されるようにしています。WIPがあるので、雑に下書きを書いておいて気が向いたら本番に書くというお気楽運用ができています。

また、Webhhookも実装してくれているので、Ship Itされたら、ホスティングしているNetlifyでPOSTリクエストが飛んでHTMLをビルドという仕組みも簡単に実装できました。前の記事で書いていますが、esa.ioのプラグイン作成時間を込みで4時間ほどでこの仕組みを作っています。

> Demerit. メタ情報を載せにくかった。Demerit. メタ情報を載せにくかった。

基本的に、esa.ioで記事に入力できる情報は次の4つでした。

• カテゴリ(/区切りで入力できる)
• タイトル
• タグ(#から始めた部分がタグになる)
• 本文

最初はこの4つの情報だけで頑張りました。ただ、日付に関する情報が更新日時と作成日時しかとれず、一発で記事を書ききらないと日付がずれる問題と直面しました。公開日時の概念がなかったのです。

最初はfrontmatterの採用も考えましたが、esa.ioの生成するHTMLにfrontmatterの情報が入ってしまうのは実装上しんどいので却下。
いろいろ考えた結果、タイトルの中に公開日を入れる方針にしました。[year-month-day]形式で入力すると、静的サイトジェネレーターがそれを公開日として認識する実装をしました。

ただ、これはプレビューで表示されるものとブログ上で表示される見た目に乖離が起きてしまったのでちょっとつらいです。

> 簡単に公開できる仕組みを公開予定簡単に公開できる仕組みを公開予定

esa.ioをデータソースにしたブログの仕組みはもう一周ぐらい自分の中で試してから、誰でも簡単に扱えるような形にして公開していこうと思っています。