mottox2 blog

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

mottox2
mottox2
2018/06/11

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

仕組み

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

スクリーンショット_2018-06-11_19_03_13.png (149.7 kB)

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

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

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

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

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

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

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

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

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

タグの補完

スクリーンショット 2018-06-09 0.40.08.png (69.0 kB)

テンプレート

スクリーンショット 2018-06-09 0.40.36.png (90.3 kB)

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

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

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

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. メタ情報を載せにくかった。

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

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

スクリーンショット 2018-06-09 0.52.36.png (298.4 kB)

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

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

スクリーンショット 2018-06-09 1.00.00.png (68.1 kB)

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

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

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

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。 Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をG

Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォ

netlify

Netlify FunctionsでTypeScriptを使って開発する

この記事は既に内容が古くなっています。最新の内容は「Netlify Functions + TypeScriptのボイラープレートを作った」をご覧ください 先日Netlify Functionsの

netlify

技術ブログを支える技術(Gatsby + esaio)

2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サ

esaiogatsby