ダイアリーのデザイン変更 / Meteor.js でスタイル変更作業

この頃このダイアリーを時折更新していますが、改めて見てみるとデザインが野暮ったかったので、変更しました。Readability を通して読んだときのスタイルが非常に読みやすいので、そのスタイルをパ･･･参考にしました。

ちょっとまだ一部スタイルが当たってないところもありますが、基本はこの路線で。Chrome、Firefox、Safari では確認済み。Windows と Opera では見ていないのでどうなるかわかりません。

どうやって変更したか

ダイアリーの管理画面にスタイルを入力してプレビューで･･･とちまちま変更していくのは流石に大変なので、やり方を少し工夫しました。先日触った Meteor.js を使って先に簡単なアプリを作って、そのアプリ上で変更してできあがった CSS を管理画面に貼り付ける、というもの。

以下、そのソース。

Meteor.js の機能のうち

  • ローカルの .css (.less) を変更するとリロードなしでブラウザに反映される
  • .less は asset pipeline 的に自動で css に変換される

という機能が、この手の CSS 変更作業に便利でした。Emacs でローカルの less ファイルをひたすら編集して、隣においた Chrome、Firefox、Safari を見るだけ。変更はすべてのブラウザにリアルタイムで反映されるので実際の見た目を確認しながらコーディングする。

  • Meteor.js の HTMLテンプレートにはてなダイアリーに近い構造を適当に再現
  • 記法の構造を再現するのは厄介なので、はてな記法のままテキストを MongoDB に入れると text-hatena.js で展開されるように
  • less のコーディング方針は、Twitter bootstrap の LESS ファイルを参考に。Mixin のイディオムや変数の使いどころなどが参考になりました。
  • タイトルのフォントは Google Web Fonts

あたりが工夫したところですかね。自分のダイアリーに特化したものではなくて、誰でも使えるような汎用的なものにツールを仕上げたら面白いかなと思いましたが、その気力はないのでした･･･。