esa.ioで書いたMarkdownを自サイトのトップページに反映する仕組みを作ったメモ

Posted on 2018-01-14

今年スタートの記事は、esa.ioで書いたMarkdownを自サイトのトップページに反映する仕組みを作ったメモです。

経緯

以前のトップページは、FLASHから一旦HTMLにしたくて、そのとき好きだった Edge Animate で作っていたけど、残念ながら、メンテがしにくい挙句に実績も掲載しにくい状態だったので困っていました。

このタイミングで、

いろいろな人と話していてブログの情報量に比べたトップページの情報の少なさへのアドバイスがあった
MIST x TECHの生放送をするにあたって人となりが分かりやすくしたかった
ここ最近の実績を自分でも把握しておきたくて書き留めておきたかった

などなど、いろいろな契機が重なって、リニューアルしてみました。

やりたいこと

ということで、

自分なりの今のスキルバランスでいいかんじにつくる
更新のしやすさをなるべく保ったものにする
情報の分かりやすさを大事にする

という、仕組みにしたいということで、結果として「esa.ioで書いたMarkdownをトップページに反映する仕組み」を作ることにしました。

仕様・技術選定

「esa.ioで書いたMarkdownをトップページに反映する仕組み」として以下に決めました。

公開したesa.ioのURLで取得する方式に
- ログインが必要な取得となるとAPIが絡んで完成が遠くなるのを避けたかった
- 万が一、公開URLが分かっても、そもそも情報は公開して良いものなのでゆるく行く
ローカルのNode.jsで出来上がったものを手動アップデートする
- いきなり自動化すると更新ミスが起きそうだし、難しいことは一旦置いとく
- WEB上で動的にデータを入れてしまうとSEO的に弱くなるかもしれないし
テンプレートとなるHTMLにesa.ioで書いたMarkdown HTMLを入れる方式にした
- SNS OGPやCSSフレームワークなど大枠としてのHTMLのコントロールはしたい
- テンプレートとなるHTMLに任意のコメントに対して差し替える
CSSフレームワークは Milligram - A minimalist CSS framework. に。
- つくりのミニマル度合いが好きだったので使ってみたかった
MarkdownのHTML変換ライブラリはMarked.jsを選定
- シンプルな作りで出力も素直なので合わせる方向で仲良くできそうな気がしたので決めた
- 参考文献
  - Marked.js で Markdown をクライアント側でパースして表示する - Qiita
  - マークダウンを javascript で変換 - Qiita

図に書くとこんな感じです。

このあたりを作ってみてから気づいた追加点として、

取得した esa.io Markdown の上部のキャプションコメントがあるので数行を削る必要があった
合成後のインデントをキレイにしたくてbeautify_htmlのインデント処理を入れた
- 参考文献
  - 時代工房の部活動 - js-beautifyで、HTML、CSS、JavaScriptの整形（cliとEmacs）

も加えました。

出来上がった処理

ということで出来上がった処理はこちらです。

js
var beautify_html = require('js-beautify').html;
var fetch = require('node-fetch');
var fs = require('fs');
var marked = require('marked');

// テンプレートとなるHTMLを取得
var templateHTML = fs.readFileSync('public/index.template.html', 'utf-8');

// 公開したページのMarkdownのURLから取得
fetch('https://esa-pages.io/p/sharing/～～～URL～～～.md')
    .then(function(res) {
        return res.text();
    }).then(function(body) {

        // 取得したMarkdownを一旦保存する
        // console.log(body);
        fs.writeFileSync('info_convert/info.md', body);

        // 取得した esa.io Markdownから上部のキャプションコメント数行を削る
        var bodyLine = body.split("\n");
        bodyLine.splice(0,9);  // 現状 9行
        body = bodyLine.join("\n");

        // markedで esa.io MarkdownからHTMLに変換
        var parsed = marked(body);
        // console.log( parsed );

        // 変換し終わったHTMLも一旦保存
        fs.writeFileSync('info_convert/info_converted.html', parsed);

        // テンプレートとなるHTMLの INFO コメントへテキスト差し替え
        var templateHTMLLine = templateHTML.split('<!-- INFO -->');
        templateHTMLLine.splice(1, 0, parsed)
        templateHTML = templateHTMLLine.join('');

        // beautify_htmlでインデントをきれいに入れる
        templateHTML = beautify_html(templateHTML, { indent_size: 4 });
        // console.log( templateHTML );

        // 出来上がったHTMLを保存 → これを手作業でアップロード（ここは自動化してない）
        fs.writeFileSync('public/index.html', templateHTML);
    });

出来上がった index.html をアップロードすると更新されます。

まとめ

ちょうど2017/11ごろに出来上がって何度か稼働できています。

これで自分向けに良くなったこととしては、

esa.io のイケてるMarkdownの書き心地がサイト制作にそのまま活かせて素敵
- 書きたい気持ちアップ
シンプルすぎるかなと思っていたMarkdown構造も適切なCSSデザインが噛むと見やすい
- これはesa.ioを使っている使用感からの学びをうまく行かせたと思う
手軽に更新できるようになったので更新頻度が高まる
- 以前と比べれば生きた情報になってる
データとプレゼンテーションが分けれるので情報を作る上でスッキリと向かい合える
- 内容を更新したいのか、HTMLとしての構造を更新したいのか、が分けやすい

といったところが良くなりました。

そして、良い具合に、フロントエンド的なアプローチと、最近得たサブスキルの部分が合わせられて、実装が楽しかったです。今後もブラッシュアップしていきたいと考えています。

それでは、よき esa.io トップページ更新 Life を！