俺の最強ブログ システムが火を噴くぜ
ブログを「はてなダイアリー」から、自分のサーバーに移転しました。
せっかく移転するなら、2012 年の流行を取り入れた挑戦的なブログにしてみたい！と思い、構想から半年、ついにこの日を迎えることができました。
せっかくなので、凝ったところを自慢させてください。
これが俺史上最強のブログ システムだ
- ブログ システムとして Jekyll を採用
- Jekyll のプラグインを自作 (はてな記法対応、英語ブログとの統合)
- 履歴管理は GitHub を利用、
git pushで自動でデプロイ - コメント欄には DISQUS を採用、旧ブログへのコメントはインポート済み
- HTML5 マークアップ、CSS3、レスポンシブ Web デザインでのモバイル対応
盛りだくさんですね。
詳しく説明していきます。
ブログ システムとして Jekyll を採用
最近では WordPress を選ぶのが普通でしょう。WordPress は使ったことありませんが、過去に MovableType で疲弊した苦い経験があります。
大規模なブログ システムの悪夢
WordPress や MovableType などの大規模なブログ システムは、管理インターフェースが充実していたり、HTML がしっかり組んであったり、一見カスタマイズしやすいように見えます。しかし、万人の要望にこたえようとするあまり、システムは複雑であり、気軽にはカスタマイズしにくい状態です。
ちょっとしたデザインの修正をしようとしても、元々の HTML の構造を把握するところから始めなければなりません。HTML を書き換えようにも、既存のテンプレートを読んで理解しなければ手をだせません。何らかの動作を変えようとすると、独自プラグインの作り方であったり、場合によっては、本体のソースの海に潜り込んでいく必要が出てきます。
たとえ満足のいくカスタマイズができたとしても、何か別の改造をしようとするとまた同じような手順で独自のお作法を調べなきゃいけません。凝って調べている間はそれでもいいのですが、少し間が空くと、また最初から学習しなければなりません。
結局、触らぬ神に祟りなし状態の塩漬けブログになってしまいました。
そんな折、GitHub Pages でホスティングしているブログをいくつか見かけるようになってきました。 一番最初に気づいたのが Clojureの作者が作ったデータベースサービス Datomic.com が凄い という記事でした。 この GitHub Pages を裏で支えているのが Jekyll という「静的サイト生成ツール」です。
そこで超絶シンプルな Jekyll です
Jekyll は Ruby で書かれていて、ソースは 2,000 行足らずの 50KB ほどと、超絶シンプルです。GitHub Pages での実績があり、Markdown で書ける、プラグインも作れる、シンタックス ハイライトもできる、と意外に盛りだくさんです。
jekyll --server --auto として起動しておくと、ブラウザーから確認するための Web サーバーが起動して、テキスト エディターで記事を保存するたびに変換した結果を再生成してくれます。面倒な Web の管理インターフェースは必要ありません。
軽量すぎるので。自分で肉付けしていかなければなりませんが、でっぷり太ったシステムをダイエットさせるよりかは気楽です。
あぁ、なんと、プログラマー フレンドリーなんでしょう。
弱点といえば、毎回すべての記事を生成するので、記事の数が増えてくると HTML 生成に時間がかかってしまう点でしょうか。これを改善するために、生成を高速化したり、変更点のあった記事のみを更新するプラグインを書いています。
元々のソースがシンプルなので、ちょっとした改善が簡単に試せるのがうれしいところです。
静的サイトでも何とかなる
さきほど、Jekyll は「静的サイト生成ツール」だといいました。
「静的サイト」では PHP も Perl も Ruby も動いていません。HTML や CSS をアップロードして終わり、という潔い世界です。
いまどき、CGI なしでサイト運営できるのか、と思う人もいるかもしれません。
「今だからこそ」可能なのです。
CGI が必要になるケースは何があるでしょうか。
- コメント欄: Facebook や DISQUS などの外部サービスがある。
- Twitter や Facebook への対応: 特定の HTML を追加するだけ。
- Twitter での評判や関連エントリーの表示: そういう外部サービスがある。
- アクセス解析: Google Analytics に任せれば十分。
- トラックバック: もはや過去の遺産。 (その気になれば外部サービスがある)
ほら、何とかなりますよね。
インターネット初期の静的な HTML が主流の時代から、ブログ システムや CMS を使った動的なサイト生成の時代を経て、いま再び、動的な部分を外部サービスに任せれば静的なコンテンツでいける時代になったのです。
プラグインを使って Jekyll をカスタマイズ
軽量な Jekyll さんは、そのまま使うには不完全なところもあります。でも、プラグインの仕組みがあるので大丈夫。
公式 Wiki の Plugins には、他の人が作ったプラグインがあります。これらを参考にしつつ、足りない分は自作しました。
作ったプラグインを紹介します。
はてな記法で記事を書けるように
せっかく移転するので、過去の記事も引っさげて移転したいと考えました。
「はてなダイアリー」では 500 件以上の記事を書いてきました。500 件の記事を手作業で Markdown に書き換えるのは苦行です。
そこで、「はてな記法」から記事を生成するプラグインを作りました。「はてな記法」の変換処理には、「はてな記法」パーサーの hparser を使っています。
しかし、いざやってみると、hparser には未実装の記法や細かいバグが大量にありました。仕方がないので、本家に沿った出力になるように、hparser にも大幅に手を入れました。hparser への修正は GitHub 上で pull リクエストを出して取り込んでもらっています (RubyForge には反映されていないかも)。
あわせて、はてなダイアリーの記事を取り込むために、簡単なスクリプトを書きました。はてなダイアリーの「エクスポート機能」が出力する「はてなの日記データ形式」を入力として。エントリーごとにテキスト ファイルに出力します。
Twitter や Amazon の埋め込み
ツイートや Amazon の商品埋め込みについては、hparser のレベルではなく、Jekyll プラグインとして実装しました。というのも、はてな記法だけでなく、Markdown で記事を書くときにも、これらの埋め込み機能を使いたかったからです。
各種 API のドキュメントに従いつつ、実装していきました。Ruby のいい練習課題になりました…。API を叩いた結果はキャッシュしているので、初回以外は高速に動作します。
複数ブログにも対応!!
英語ブログ と同じテンプレートを使いたかったので、複数ブログを実現するプラグインを実装しました。
といっても、Jekyll に元々ある「カテゴリー機能」と「カテゴリーごとに別の URL に出力する機能」を流用しています。記事ごとに設定した「言語名」が、内部的にはカテゴリーとして扱われるようになっています。カテゴリーが使えなくなることを少しためらったのですが、タグ機能もあるのでそちらで十分代用できます。
テンプレートで言語によって違う表示をしたいケースに対応するために、国際化プラグインっぽいものを作りました。
GitHub を積極利用
先ほどからいくつかのプラグインやスクリプトのリンクを貼っていますが、これらはすべて GitHub で公開しています。公開しているのはプラグインだけでなく、記事のテキスト ファイル、画像、HTML テンプレート、JavaScript など、サイト生成に必要なものはすべて GitHub で公開しています。
つまり、GitHub からクローンして、ビルド環境を整えれば、誰でもこのブログを生成できます。
コピー ブログを作られる怖さはありますが、ソースを公開してなくてもコピーする人はコピーするでしょう。それよりも、オープンにすることで、データ紛失の恐怖から解放されます。
編集履歴を公開するということ
もう 1 つの副作用として、記事の編集履歴が丸見えになることが挙げられるでしょう。たとえば、ある記事の編集履歴はこうなります。
ちょっとした誤字の修正さえも万人に公開されてしまうので、恥ずかしい面はあります。
しかし、メリットも多いと考えています。
ブログの記事をこっそりと書き換えると、不信感を招きます。最悪のケースでは炎上してしまうかもしれません。かといって、追記や補足のたびに「○月○日追記」のように書くと、逆に、初めて見る人は読みにくくなります。2 回目に見る人に誠実になるために、初見の人に不便を強いるのは何か違います。
そこで、GitHub の履歴です。履歴を公開していることを言い訳にすれば、思い切って記事を書き換えやすくなる気がします。将来的には、それぞれの記事ページから「編集履歴」として GitHub のページへのリンクを貼ることも検討しています。
GitHub から自動デプロイ
GitHub の Post-Receive Hooks を使えば、git push したタイミングで特定の URL を叩くことができます。
この機能を利用して、push 時にサーバーの CGI を叩いて、git pull で GitHub からデータを取得するようにしました。これだけで、簡単なデプロイ システムのできあがりです。
サーバーは さくらのレンタルサーバー スタンダード を使っていますが、CGI が使える環境なら、どこでも同じようなことはできます。
git レポジトリ 上には 2 つのブランチを作成しています。
masterブランチ: ソースやプラグインを置くhtmlブランチ: 生成結果の HTML や CSS を置く (Jekeyll の出力ディレクトリー)
先ほどの自作 CGI では、git push 通知を受けとると、html ブランチを pull しでいます。ブランチの構成についてはいろいろ悩んだのですが、次のサイトを参考にしつつ、いまはこの形にしています。
コメント欄は DISQUS を利用
コメント欄として Facebook の利用も検討はしたのですが、過去のコメントをインポートができないこと、コメント欄が殺伐としにくいことを理由に敬遠しました。
そこで目をつけたのが DISQUS です。最近、いろんなところで見かけるようになってきました。有名どころでは TechChrunch Japan が採用しています。
DISQUS はコメントのインポートにも対応しています。しかし、これが意外に苦労して、いまも少し苦労しました。詳しくは DISQUS へのコメントのインポートが意外に面倒 の記事に書いてあるので、こちらをご覧ください。
HTML5、CSS3、レスポンシブ Web デザイン...
クライアント サイドの技術でも、最新の流行を取り入れてみました。
HTML5 マークアップ
今回、HTML を自由に書けるようになったので、HTML5 マークアップにチャレンジしてみました。<article> などのタグを使っています。
IE8 以下に対応するために html5shiv を使っています。HTML5 的なアウトラインがそれっぽくなるようにも気を使いましたが、完全に自己満足な気がしています。
Compass で楽々 CSS3
CSS の生成には Compass を使っています。Compass は Scss にライブラリの皮をかぶせたものになっています。 詳しくは過去記事の ブログのデザインを新しくしてみた をご覧ください。
Scss 3.2 を使うことで、Media クエリーにも簡単に対応できるようになりました。興味がある人は このサイトの screen.scss を見てください。Scss は深入りすればかなり詳しいことができそうですが、あまり大した機能は使っていません。
Jekyll で Compass を使えるように、compass プラグインを作成しました。
レスポンシブ Web デザインに挑戦
ちまたに解説が溢れているので特に書くことはありませんが、レスポンシブ Web デザインでスマートフォン対応しました。
480px 以下ではスマホ向けのデザインになるようにしています。
もう 1 つの分岐点として 45em を設定しています。画面幅が 45em 以下なら画面にフィットするようにして、画面幅が 45em を超えると固定幅になります。max-width でも対処できるのですが、画面幅に応じて、より細かいカスタマイズができるので、便利だと思いました。
「既存のサイトをデザインそのままでレスポンシブ化するのはよくない」といわれていますが、いまのデザインがスマホ向け表示を意識したものだったので、比較的簡単に対応できました。
まとめ
- 移転しました。
- 新生てっく煮ブログをよろしく。