メモ

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

Posted on by seigo

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

経緯

image

以前のトップページは、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を選定

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

image

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

も加えました。

出来上がった処理

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

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 をアップロードすると更新されます。

image

まとめ

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

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

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

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

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

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

seigo