動的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ページのほうが個人的に性に合った点が多いと気づいたからだ。

なぜHTMLを直書きしようと思ったのか

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

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

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

どんなソフトウェアも設定次第だ。しかし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