ごみばこいんはたまに大幅アップデートをしてきて今回シーズン3を迎えました。
目次
プレシーズン: 記録なし…
当時の記録なんてどこにものこっていない。
かろうじてツイッターで見つけたのはこのツイート、全てはここから始まった。（たぶん）
https://twitter.com/sters9/status/263969815297929216
シーズン1: WordPressとTwitterBootstrap
当時TwitterBootstrap2でレイアウトをして、box2d-jquery（だったかな..）を使ったごみばこいんトップページは既に作っていた。 DOMの属性がもりもり変わるので結構動作が重たかった記憶がある。
このトップページのよこに、ブログを載せたいと考え、WordPressを設置。 トップページと同じ見栄えにできるよう320pressでスッと構築した覚えがある。 若干CSS調整などはしているものの、ほぼそのまま使用していた。
TwitterBootstrapはレスポンシブで、画面サイズが変わればダイナミックに表示の仕方が変わる、TwitterBootstrapはすごいなあと思っていたのが懐かしい。
テンプレートやトップページの更新などの作業をするときはsshして直接編集か、GUIでscpできるクライアントを使って作業していた。 内容はバージョン管理もしてないのでやったらやりっぱなし。
トップページはただの静的ページで、WordPress管理された内容は表示していなかった。
あるとき、トップページをmatter-jsという物理エンジンの実装を使ってみたところ、動作がスムーズでモバイル対応も簡単にできたので、これに切り替えた。
シーズン2: WordPressと自作テーマ
リニューアルしたときの記事はここ ごみばこいんブログをガラッと作り直したよ
時はながれ、シーズン2へ。これは今と同じデザイン。 紙の上でデザインを考えたりして、1からCSSを書いた、テーマも1から作った。
このときにレスポンシブはやめた。 よくよく考えて、ページを開くときに、PCかモバイルかが変動することはないだろうし、画面幅をそのレイアウトを変えなければいけないほど変わることもほとんど無いだろう、という考えからの選択。 モバイルのときには、HTMLを出力ときに、html要素にis-spみたいなクラスをつけて、CSSでコントロールすればいいんじゃないかなあって思い、そのように実装をしている。
WordPressということにあまり頼らず、上に自作フレームワークを乗っけたような形で実装した。 applicationというディレクトリを作って、functions.phpには極力記載せず、applicationの中で色々書くようにした。 WordPressが読み込みにくるテンプレートファイルも最小限にして、templatesというディレクトリの中でパーツを分けて、requireするように書いた。 一部の便利そうなものはライブラリとして切り出した。
トップページも自作テーマにのせたので、トップページでもブログコンテンツが出るようになった。 コントローラーも追加して、ちょっと遊べるようにした。 モバイルだと傾きによって重力の向きが変わるようになっていて、コロコロカービィみたいな遊びもできた。
テーマのバージョン管理はGitHubで行うようになり、CircleCIからデプロイされるようにした。 具体的にはWordPressにデプロイ用のAPIを定義して、そこにCircleCIから特定のパラメータを持ったアクセスを行い、作ったAPIがハンドルしてgit pullを行う、みたいな簡単な仕組み。
表示速度についてはそこまで遅いということはなかったけれど、もっと高速化しようとあちこちでAPCuキャッシュを入れ始めた。APCuなのはRedisだとかmemcacheを用意しなくていいというお手軽さから。例えばサイドバー用のHTMLをキャッシュしたりしている。 nginxでキャッシュを持てばいいといえばそうなのだけど、それはなぜかやらなかった。設定が結局うまくいかなかった、とかかなあ。。
これらは一気にやったわけではなくて、気になったときとか、少しずつやっていった。
シーズン3: 静的サイトジェネレータ
ブログ部分はWordPressをやめた。WordPressを使っていたメリットといえば、WordPressのエコシステムに乗れる…つまり、管理画面からの操作であらゆることがポチポチで出来るようになっており、さらには機能を増やすことも（ある程度）簡単にできるところだと思っている。 しかし、ごみばこいんブログではそういったメリットが享受できてない状態で、機能を増やして活用することもなく、ただ記事と画像を投稿するだけだった。そもそも投稿内容の下書きも管理画面で行っておらず、別のツールで書いていたりだったので、CMSとは…という状態になっていた。
というわけで、これは別にWordPressでなくてもいいのでは、キレイサッパリやめよう、と動いた。
いくつか検討はしたが、お手軽にできるかな？とHugoを選択。全部自分で書けばなんとかなったこれまでと比べて細かなかゆいところに手が届かず、多少は妥協が必要である。
記事データはデータベース（MySQL）からmysqldumpを使ってエクスポートし、手元で変換をした。具体的には、データを一度SQLite3に入れ直して、のような実装をして内容を変換したりして、Hugoで扱う形式に出力するスクリプトを書いた。いろいろ抜けてはいるけれどこんなイメージ。
function getPosts(PDO $pdo)
{
return $pdo->query("select * from wp_posts order by post_date asc");
}
function getTags(PDO $pdo, $postId)
{
$stmt = $pdo->prepare(
"select TS.name as tag from wp_term_taxonomy T "
. "LEFT JOIN wp_terms TS ON TS.term_id = T.term_id "
. "LEFT JOIN wp_term_relationships R ON T.term_taxonomy_id = R.term_taxonomy_id "
. "LEFT JOIN wp_posts P ON P.ID = R.object_id "
. "WHERE R.object_id = ?"
. "and T.taxonomy='post_tag'"
);
$stmt->bindParam(1, $postId);
$stmt->execute();
while (($name = $stmt->fetchColumn()) != false) {
yield $name;
}
}
function migrate($pdo) {
foreach (getPosts($pdo) as $post) {
$data = [
'title' => $post['post_title'],
'date' => (new DateTime($post['post_date'], $jst))->format(DATE_RFC3339),
'lastmod' => (new DateTime($post['post_modified'], $jst))->format(DATE_RFC3339),
'tags' => iterator_to_array(getTags($pdo, $id)),
];
$frontMatter = yaml_emit($result, YAML_UTF8_ENCODING, YAML_LN_BREAK);
$frontMatter = preg_replace('/...$/', '---', $frontMatter);
$content = $yaml['content'];
$output = "${frontMatter}\n\n${content}";
file_put_contents($file, $output);
}
}
markdownで書いてコミット&プッシュすれば、CI上でビルドされて、デプロイされるようになっている。 別途、コミット&プッシュが難しい環境（モバイルなど）からでもシュッとできる仕組みを作ろうと思っているがこれはまだ先の話。
トップページのコンテンツはソースを1から書き直した。物理エンジン部分はmatter-jsのまま。 TypeScriptとかビルドしてシュッとやりたいな〜と思いつつ、素のJavaScript…ECMAScriptでもクラスが使えたり、importもできたりすることに気づいてそれでいいか、となった。型が雑ではあるが、VSCodeであれば @ts-check を書けばまあまあイイ感じになる。 各ブラウザも対応が進んできているので、見えない人はごめんなさい、でいいか、と。 追加できるオブジェクトの種類だとか、機能はそのうち増やしていきたい。向きとか頻度や強さをかえたりとか。
サーバは相変わらず以前のまま継続している。 NetlifyやGitHubPagesでもいいかな、と思ったけれど、色々やってみたいことがあるのでサーバはそのまま使っている。 サーバ上で変わったことといえばは、なんとなくAnsibleを使ってみたいな、ということで手元からAnsibleを使っていろいろ設定ファイルなどをいじるようにした。全部コンテナにするのはまたそのうち…。Ansibleの実行はCIでも実行できるようになっていて、一応CDではある。
ちょっとわけあってドメインを移行した。 だいぶ前に取っていたけど全く使っていなかった gomiba.co をメインに使うようになった。 gomiba.co.in時代の記事URLからはリダイレクトするようにした。とりあえずドメインの期限がくるまで。
やりたいことも色々あるのでそのうちちょっとずつ…。
と、いうことで全体の見た目はあまり変わっていないけれどシーズン3が始まりました。