Tosainu Lab

とさいぬの隠し部屋はTosainu Labになりました

タイトルの通りです.
”とさいぬの隠し部屋” は “Tosainu Lab” になりました.

理由としては, 最近

という思いが強まっていたからです.
丁度ブログデザインも少し修正したいなーと思っていたので, たまたま休講だった金曜日から一気にコードを書き上げました.

新タイトルはとさいぬのブログだという雰囲気を残しつつ, 少し変わったものにしようとしましたが良さげなものが思い浮かばず…
結局とさいぬという言葉は残し, また技術ネタを中心にしていこうということでLabと付けました.
古臭さは抜けたかもしれないけど, カッコよくなったかはちょっと微妙ですね…
まぁいっか.

その他の変更点

KaTeXの導入

技術ネタを中心にしていこうということで, 以前から興味のあった数式表示を導入しました.
ってことで, とりあえずMaxwllの方程式を置いておきます.

∇×E⃗=−∂B⃗∂t∇×H⃗=σE⃗+∂D⃗∂t∇⋅D⃗=ρ∇⋅B⃗=0\begin{aligned} \nabla \times \vec{E} &= - \frac{\partial\vec{B}}{\partial t}\\ \nabla \times \vec{H} &= \sigma\vec{E} + \frac{\partial\vec{D}}{\partial t}\\ \nabla \cdot \vec{D} &= \rho\\ \nabla \cdot \vec{B} &= 0 \end{aligned}

この手で有名なのはやっぱりMathJaxですが, 前回のデザイン変更で書いたようにあまり重量級Webサイトにしたくないという点でうーんという感じです. 何より静的サイトジェネレータ信者である僕としてはブラウザで開かれたときに構文解析/レンダリングが行われるというのがもう許せないです.

そこで見つけたのが**KaTeX**です. とりあえず左のリンクから公式の紹介サイトへ行き, Type an expression:のところに式を入れてみてください. **!?**となると思います.
流石, The fastest math typesetting library for the web. と謳っているだけはありますね.

もちろん, KaTeXを選んだ理由はこれだけではありません. なんとServer side renderingが可能なんです!!!
つまり, 予めKaTeXのJavaScriptを呼んで式を処理しておけば, 表示するときはCSSだけで良いのです!!! すっごくないですかっ!? (友利奈緒)

とはいえ, このブログの生成に使っているMiddlemanはRuby製です.
ということで, ExecJSを使ったラッパクラスを作成し, markdownパーサのRedcarpetを拡張して強引に対応させました.
RedcarpetのAPI都合上, 数式をcode spanやcode blockの中に記述しないといけないという仕様になっていますが, もし同じようなこと考えている方がいたら(いない)参考ししてもらえると良いかなと思います.1

サイドバー

コードの汚い部分や重複を改善したり, SCSSを複数に分割したり, compass/resetからnormalize.cssに移行といったリファクタリング的な修正が多く, あまり表に見える変更点は少ないのですが, サイドバーはかなり変わったと思います.

まずタグクラウドです. 今まではMiddleman-blogのタグ機能をカテゴリのように使っていましたが, 件数が増えて縦に長くなってきたので, もっとすっきりさせようということでこうしました.
実装はWikipediaにあったアルゴリズムを参考に,

si=fmax⋅ti−tmintmax−tmin+fmins_i = f_{max} \cdot \frac{t_i - t_{min}}{t_{max} - t_{min}} + f_{min}
  • sis_i: 表示するフォントサイズ
  • fminf_{min}: 最小のフォントサイズ
  • fmaxf_{max}: 最大のフォントサイズからfminf_{min}を引いた値
  • tit_i: 現在のタグがついた記事数
  • tmax,tmint_{max}, t_{min}: タグあたりの最大, 最小の記事数

という感じにしました. 実際のSlimで書かれたテンプレートがこれです.

年/月毎のアーカイブのリンクも同様の理由でコンパクトにまとめました. どう見てもはてなブログです.
とはいえ, これもよくある手法を使ってCSSだけで実現しています.

Twitter cardsの画像対応等

Twitter使っているならば対応させておきたいのがTwitter Cardsです.
これは前回のデザイン変更で導入していたのですが, どのページのリンクでも同じ内容が表示されるという雑なものでした.

そこで, 今回の変更でそれなりにマトモなものにしました.
まず, こんな感じのヘルパ関数を追加して, 本文の先頭150字, 記事に貼られた画像を取得できるようにしました.
そして, Twitter CardsだけでなくOpen Graphのタグを設定することで, その他の対応しているサービスでも利用できるようにしました.

記事の画像を取得するヘルパ関数はmarkdownからHTMLに変換された記事をNokogiriでparseみたいな気持ちの悪いことをしているので, いつかなんとかできると良いなぁと. (たぶんしない)

おわり

これからもよろしくお願いします!!!

Footnotes

  1. Kramdownは数式エンジン対応が公式であって強いのだけど, GFM Parserを選択しても微妙に挙動が違って移行できなかった ↩