動的Webページから静的Webページへの移行

Last Update


 今までウェブページはPico[1] というフラットファイルCMSを使って公開していた。 2年くらい使っていたらしい。 これはMariaDBやPostgreSQLといったリレーショナルデータベースを使わずに、 PHPがMarkdownをHTMLにレンダリングしてくれるというシステムだ。 インストールはZIPファイルをドキュメントルートに展開するだけだし、 Markdownは覚えるもの書くのも簡単だった。 PHPの要求バージョンも5.3.6以上と低くレンタルサーバでも難なく動き、 シンプルで使いやすい。 ちなみにPicoは2018年07月29日にVersion 2.0.1がリリースされた。 僕の使っていたバージョンはまだVersion 1系だった。 開発は今も盛んにおこなわれているようだ。

 PicoのようなフラットファイルCMSは数多く存在し、 どれもシンプルさと速さを謳い文句にしている。 これは正しく、設定方法こそそれぞれのシステムで異なるものの、 コンテンツはMarkdownという共通のフォーマットで書くので可搬性に優れている。 たとえばPicoからGrav[2] に移行するとき、コンテンツの入れ替えそのものは一瞬で終わるはずだ。 またPandoc[3] のようなコンバータを使えば、 MarkdownからHTMLやODTといった様々なフォーマットへ変換できる。

 シンプルかつキレイなページを生成してくれるのでPicoは重宝していたが、 ついにHTML5ベタ書きによる静的なウェブページ公開に踏み切った。 Pico固有の問題またはフラットファイルCMSの問題というわけではない。 単に個人的なウェブページの使い方を考慮すると、 CMSの動的Webページよりも静的Webページのほうが 個人的に性に合った点が多いと気づいたからだ。

 基本的に、書き物は自分があとから読み返すために書く。 Markdownの書きやすさはすさまじいが、 それをありがたく思えるようなスタイルではなくなった。

 自分が読み返すものは時間をかけて書いた比較的長いページやPDFばかりで、 メモのような短いページは、 書いてある内容を覚えてしまったために参照しなかったり 書いたことすら忘れてGoogle検索してしまう場合がほとんどだった。 Vimやtmuxの操作方法なんかはその代表例だ。 Picoは設定次第でブログらしい振る舞いにすることもできるが、 そもそも日記をあとから読み返す性格ではないし、 キーワード検索機能は自力で書かないといけないから手間がかかると気づいた。 2017年の5月からMarkdownで日記を書き始めたが、読み返したことはほとんどない。 読み返さないものを書き連ねていくよりはちゃんとした文書を残すほうがいい。

 真面目に文書を書くと時間がかかる。 Markdownで書こうがHTMLのタグを打とうが大した差ではなくなる。 これはMarkdownを書かなくなった理由といったほうがいいかもしれない。 エディタの設定が悪いのか、 長い文書をMarkdownで書くとカラーリングが狂ってしまう問題も抱えていた。

 Markdownのパーサが原稿内の改行文字を半角スペースとして解釈する仕様も 少なからず不満だった。 なるべく1行を80文字で収めたい身としては、 変な半角スペースが挿入されるのを防ぐために 1行を長く書かなければいけないことに対し、すっきりしない気持ちを抱いていた (FLOSSなのだから自分で直せばいいだけの話ではある)。

 どんなソフトウェアも設定次第だ。 しかし2年使ったのにも関わらず僕はあまりPicoをカスタマイズできていなかった。 単にTwigやPHPを書いたり勉強したりする気力がなかっただけなのだが、 標準設定のまま使うならPicoであってもオーバースペックだろう。 サーバ機の計算資源も無駄なだけだ(誤差であろうとも……)。

 デザインの好みの問題からヘッダーに色をつけたり、 ソースコード表記をするときに背景をグレーにしたり…… といったような見栄えに関する効果に飽きたというのもある。 ソースコードを読むときはシンタックスカラーが付いていないと 読みづらくて仕方がないし文法のミスを見つけづらいが、 文書は色彩の起伏が抑えられているものが好きだし読みやすい。

 しかし素のHTMLではpreタグとcodeタグの中に書いたものは普通のテキストと区別しづらい。 そこで僕は下記のように黒線で囲うようにしている。文字サイズや左右の空白幅はCSSで調整する。

#include <stdio.h>
int
main(void)
{
        printf("Hello World\n");
        return 0;
}

 このページはHTML 5.2 W3C Recommendation[4] に従って書かれている。 HTMLとCSSと以外で構成されていないので、 リレーショナルデータベースとかPHPとか関係なしにHTTPデーモンさえ動いていれば 確実にブラウザで表示できる。 僕はこういった原始的な手法による優位性を重んじる傾向にあるらしい。 HTMLやCSSの勉強にもなる。

 MarkdownもCommonMark[5] という規格があるものの、GitHub Flavored Markdown(GFM) [6] に代表されるCommonMarkの拡張版も種類が多くややこしい。

 無論、Markdownから原始的な方法に鞍替えした弊害もある。 HTMLタグを調べる手間はやはり大きい。 動的にページを作ってくれないので、当然リンクは手作業で張る必要がある。 現に、Picoを使う前はHTMLを手書きしてウェブページを書いていたし、 手作業が多すぎて嫌になったからPicoに移った経緯もある。 しかしこれらの弊害を許容してでも、 自身で制御し切れない動的なページ生成に頼るよりは 思ったように確実に描画される静的なページを書きたい。 そうしてまとまった文書を書いてなるべく長く残したい。

1 picocms.org

2 getgrav.org

3 pandoc.org

4 www.w3.org/TR/html52/

5 commonmark.org

6 GitHub Flavored Markdown Spec