静的サイトジェネレータをVS Code拡張で作ってみた

静的サイトジェネレーター Advent Calendar 2016 の21日目です。前の記事はTakeshiNickOsanai氏の『静的サイトジェネレーター「Movable Type」について、誤解されている4つの事柄』です。

選択肢が多いのは嬉しいですが、一方では「いっぱいありすぎてどれを選べばいいか…」的な悩みがありますよね。

という静的サイトジェネレーターについて、いっぱいありすぎたので“さらに作って増やしてみた”という記事です。

記事の結論としては、簡単でちっちゃなものでもいい仕事をしてくれるので自作しましょう、VS Code 拡張などにして js で開発しましょう、です。

制作の背景

僕は2003年からホビーに関するホームページを Yahoo! Geocities で運営しています。運営開始当初は個人ホームページによくあるシンプルなページでした。

長らくこの状態のまま運営されたホームページは2009年に当時風な2カラムのデザインにリニューアル、続いてレスポンシブデザインに。この際に数十ページを書き換えることができたのは Adobe の Dreamweaver(以下Dw) という静的サイトジェネレータのおかげでした。

Dw でお世話になった機能

テンプレート

テンプレートとなる HTML を継承してページを作る機能、なんと継承したページをさらに継承することも出来ました。

ライブラリ

共通部品を切り出して複数のページから読み込む機能

CSS 等のコード保管

そういえば Dw が初めて触ったコードハイライトの効くエディタでした、その後は最近まで Aptana Studio のお世話になりました。

WYSIWYG 編集機能、特にテーブル

慣れてくるとコード直打ちの方が速くて確実なのですが。テーブルタグの rowspan, colspan をマウス操作で指定できる機能は最後まで便利だなと思ってました。

ftp アップロード

使いだしたときは便利で感動しました。

---

最後のリニューアルから5年近くが経過して、デザインが野暮ったくてコンテンツを追加する気が起きない… 再び大型リニューアルを！という状態になりました。しかしこの時にはもう Dw とそりが合わなくなっていたため足踏み状態が長く続いてしまいました。

Dw が合わない点

1. invalid な HTML を書くことができない
2. プラグインでやりたいことができなかった
3. テンプレートとライブラリしか使っていないから機能過多

そんな矢先に Visual Studio Code を使い始め、このたび拡張機能で静的サイトジェネレータをつくることにしました。

VS Code拡張で静的サイトジェネレートする

今回実装した機能は次になります。これだけで僕のニーズは全て満たすことが出来ています。

1. テンプレート用 HTML とコンテンツ HTML の合成
2. 複数のページで共用するデータを別ファイルに分離するミックスイン機能（Dw のライブラリ機能に近い）
3. サイト開発者が HTML 文字列を返す関数を自由に追加・呼び出す機能
4. Google Spreadsheets に自動で蓄えた(Google Apps Script 使用)ページに関するツイートを json で取得してページに静的に埋め込む機能（コードだけ用意して未確認 → http[s]:経由で json を取得することが出来なかった…）
5. 停止した掲示板の json 形式のログからページを作る機能(コードだけ用意して未確認 → 動作した)

ほんのわずかなコードで実装できるのでお勧め、みんなもドンドン自分で作って「これからは一人いち静的サイトジェネレータだ」という結論のつもりでしたが… いざ数えてみたら500行を超えていました… なのであえてお勧めしません…

JavaScript でつくるメリット

静的サイトジェネレータを VS Code 拡張で制作しておくと全てを js で記述することができます。js で書けるということは次の利点が思いつきます。

1. Web 開発者がもっとも馴染んだ言語で開発できる
2. ソースから HTML を生成するロジックをそのままブラウザで動かすことができる

2 については、例えばオフラインでサイトの全文を閲覧したいケース。ソースと生成ロジックをダウンロードすれば全てのページが再現できます。ということで僕はホームページのオフライン化を次の目標に致します。

ではでは。