0. 進捗メモをはじめる

進捗報告コンテンツの方は、古き良きテキストサイトっぽいものを再現しようとしてはじめた。内容も技術的なものではなく、時間と共に風化する度合いが低そうなコンテンツに絞っている。しかし、ちょっとした技術メモっぽいものを書くのもいいかなと思い、進捗メモというものを作ってみた。

もともとあったコンテンツの方との違いは、投稿日時や更新日時がついたり、Twitter の投稿ボタンがついたり、ATOM の配信をしたりといった点だ。このサイトを生成するためにMiddlemanの extension を書いている。いくつか気になるところがあったので、それについて説明する。

ATOM の配信について

Middleman にはmiddleman-blogという extension があるのだが、そこについてきていた ATOM を生成するテンプレートを適当に借用して整形し、出力するようにした。何箇所かATOM の規格を見ながら手直ししたように覚えている。

ATOM の配信では HTML の本文を入れているのだが、この HTML 内部にあるリンクが相対パスになっているとあまりよろしくないように思える。しかし記事を書くときは相対パスで書くほうが便利だ。これを修正するために、Markdown のレンダリングエンジンであるRedcarpetにすこし手を加えて、ATOM に載せる本文のレンダリングを別途行い、そのときだけ絶対パスになるようにした。

あとから思うと、普通にすべてのレンダリングにおいて、絶対パスにすればいいんじゃないだろうか。なぜ ATOM のときだけにしたんだろう…… いちおう config.rb で変更できる。

また、画像を載せるときに、いままでの方法だと画像のキャプションが ATOM 内の本文では綺麗に表示できないという問題があった。これは通常の HTML ページであればスタイルがあたっているのだが、ATOM 内の本文にはスタイルが当たっていないために発生していた。これを回避するために、HTML5 の figure タグや legend タグを利用することで、いい感じの表示にすることが出来た。

キャプションがつけられる

このとき知ったのだが、Markdown では画像に対してタイトルを付加することが出来たらしい。

シンタックスハイライトについて

CodeRayをつかってシンタックスハイライトをするようにした。埋め込みでスタイルが適用されるので、ATOM 上でもハイライトされているはずだ。

公開した後に確認したが、残念ながら livedoor Reader ではハイライトされていなかった。

def func
  42
end

ついでなので、バイト先で使ってみて超便利だったPlantUMLをつかえるようにした。上の Ruby のコードと同じように PlantUML のコードを書くと、SVG に変換される。この SVG はページにインラインで埋め込まれ、対応しているブラウザであればそのまま見ることができる。

@startuml
Bob-&gt;Alice : hello
@enduml

公開した後に確認したが、残念ながら livedoor Reader ではテキストしか表示されなかった。

日本語文章におけるハードラップについて

自分は日本語の文章をハードラップされた形(80 桁で改行文字が挿入された形)で書くのが好きなのだが、ブラウザが改行をスペースにするので、文章中に不自然なスペースがあらわれてしまうという問題がある。これも Redcarpet のレンダリング部分に手をいれて、適当に不要そうな改行を省く処理を行っている。