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->Alice : hello
@enduml

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

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

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