スキップしてメイン コンテンツに移動

Google Apps Script上に制作してた静的サイトジェネレータの始末記

ありし日の静的サイトジェネレータ on GAS

静的サイトジェネレーター Advent Calendar 2016 の19日目になります。

直前の記事は sky_y 氏による『 HexoのレンダリングエンジンとしてPandocを使う - Qiita』です。次の記事は TakeshiNickOsanai 氏が準備されています。

Google Apps Script はユーザーの登録した js をサーバ側で実行する環境です。この js から Google の様々なサービスを利用することができます。今回は主に Google Drive を操作して html ファイルを生成します。

静的サイトジェネレータ on Google Apps Script の始末

ホームページの更新のために制作していた静的サイトジェネレータ on Google Apps Script(以下GAS) は次の理由により破棄しました。

  1. ソースの更新・HTML の生成の毎に Google Drive 内のファイル同期で通信が発生する
    • HTML の確認に時間がかかる
    • 従量制の回線のライフが削られる
  2. 100程度のファイル更新を数回行うと GAS のマシンタイムを使い切ってしまいその日は作業できなくなる

こう書いてしまうとやる前から分かりきったことを…

結局デザインを流用しつつ Visual Studio Code の拡張機能として再実装しましたとさ、チャンチャン♪

次の駄文は GAS 版の紹介用に用意していました。こっそり公開フラグを立てておきますよ。

試験運用を開始してから知ったのですが、静的サイトジェネレータというジャンルのツールで出てきているそうです。

ナイスページビルダーはその GAS 版です。

  1. 本文だけの .html とテンプレートファイルを用意します
  2. これらを元に完全版の .html を出力用フォルダに書き出します
  3. 以上の操作をプロジェクトフォルダ以下のすべての .html(.htm) に対して行います
  4. 操作を行うのは Google Apps Script です
  5. テンプレートも .html も書き出しフォルダも Google Drive 上に配置します
  6. ナビゲーションリンクなどの生成は js で書いて自動化できます

個人ホームページあるある？

本題の前に開発の背景を個人ホームページあるあるで明らかにします。

1. 無料ホームページサービスに登録して10年選手だ

Yes, 2003年から無料ホームページサービスの geocities.jp のお世話になっています。

なんと最初期のコンテンツはシグマリオン2の Pocket Word で書いていました。

現在も細々と更新を続けていて反響もたまあに頂きます。

2. ホームページと連動する(はずの)ブログをうっかり始めたが連動していない

Yes, html の更新が大変なことに業を煮やし2009年からブログを併設しました。それもうかりと3つも、、、

Google の無料ブログサービス Blogger でしたのでとてもカスタマイズ性がよく、頑張ってデザインをシームレスにすることはできました。

3. ホームページビルダーでなく Dreamweaver を導入したのは不幸中の幸いだった

Yes, 先のシームレス化に多大な貢献をしてくれたのが途中から導入した Adobe Dreamwerver でした。

個人ホームページ時代の産物をこれまで継続して更新できたのは、Dreamwerver のテンプレート機能とライブラリ機能のおかげです。

4. 個人ホームページだけどおかげさまでレスポンシブレイアウト化した

Yes, 2011年に頑張ってレスポンシブレイアウトを導入しました。個人ホームページなのによくやる、と友人にうけていました。

5. とってもお世話になった Dreamweaver だがそろそろ縁を切りたい

Yes, そんな Dreamweaver ですが、使っている機能といえばテンプレート機能とライブラリ機能だけでした。

一方でデメリットが目に付くようになってきました。

  1. プラグイン機能でやりたいことが出来なかった
  2. Dreamweaver 用のコメントがHTMLに大量に書き出されてしまう
  3. invalid な HTML を書くことが出来ない

そんなあるあるを経て、現在更新が滞りデザインのイケテなさに萎えています…

さぁてこ入れだ、それも頑張らないで

読者諸賢は“個人ホームページあるある”いくつ当てはまりましたか？

さて、そんなこんなでてこ入れをしようと考えていたところ、ようやく頑張らなくてもよさそうな手が見つかりました。

別件で久しぶりに GAS を使ってみて(随分前にサービス提供終了した Yahoo!Pipes の置き換えです…) Google Drive に様々な操作を行えることがわかりました。

これでしたら Dreamweaver のテンプレート機能やライブラリ機能、プラグイン機能を javascript(Google Apps Script)で置き換えることが出来ます。

記事は紹介編として準備していて、これに続く使い方編も書きかけていました。使い方編を書き付けていたお蔭で VSCode 拡張として仕切りなおすときには資料にできましたよ、テヘヘ…

, 編集
コメントを投稿