アイコンが並ぶよ

18 Mar ’15

サイト

先月、幅を広くする（→ 2015.2.14）のと同時にいくつか細かい変更をした“ひ to り go と”だけど、まだまだ不満は残っていた。

せっかく各カテゴリにアイコンがあるのに、記事の右上に表示するだけでは活かしきれてない。
@2x 画像を用意していないから Retina ディスプレイで見ると悲しくなる。
月ごとの記事を表示するページだけでは読者が好みの記事を探しにくい。
HTML で textarea を貼り付けただけの編集用ページが使いにくい。

すべて改善したつもり。

描き直したカテゴリアイコン

これまでもカテゴリごとにアイコンを用意していたんだけど、Sketch を使ってすべて描き直した。Retina ディスプレイ用の @2x も Sketch のおかげで簡単に書き出せた！

くっきりしていて気持ちいい。Retina ディスプレイ用の画像がないことは更新頻度が下がる理由（2013.6.9）に挙げていたほどなので、今後はどんどん記事を書かないといけないですね。

並ぶ！

このサイトでは、“ブログ”というものの象徴であるサイドバーを一切使っていない｡「あくまでも記事が中心。それ以外のものはできるだけ表示したくない」という思いが強かったのだけど、一目でこのサイトの全体像を感じることができる仕掛けは必要だとも思うようになってきた。

そこで今回からは、ページの上部にカテゴリアイコンを並べてみたのだ。

やっぱりカラフルなアイコンが並ぶのって楽しい。棚に自分の好きなフィギュアを並べるあの感覚である。こういう自由なレイアウトって既存 CMS を使っていたらなかなかやる気になれない。

押すと暗くなるのは別の画像を用意しているのではなく、CSS Filter で brightness を下げている。簡単に使えるけど効果的！

過去記事の一覧ページ

ページトップにカテゴリアイコンが並ぶようになったけど、その一番左に "Archive" という項目がある。ここから過去の記事の一覧を表示できるようになったのだ。

これだけ大量の項目が並んでいると、戻ってきたときに「今読んでた記事どれ？」と迷ってしまう。その対策として、最近使い方を覚えた CSS Animation を使ってみた。どの記事を読んで戻ってきたのか直感的にわかる。
片方のページにアニメーションを足すだけでその前後のページにつながりを感じるのは面白い現象。

iPhone で見るときと Mac で見るときでは並び方を変えてあるので、そこにも注目。

使いやすくなった記事編集用ページ

記事編集用のページは localhost だけで使っているし、読者が目にすることはないので（あるとしたらセキュリティホール！）ここに書くのはどうかと思うけど、記事を書くモチベーションには大きく関わってくる要素である。

まず、Command+S のショートカットが動くようにしてみた。Save ボタンを押す必要がなくなるのは想像以上に便利。

記事の内容は昔ながらの HTML 手打ちで書いてる。単なる textarea で HTML を書くのはいろいろと辛い。そこで JavaScript で実装されたエディタをいろいろ試してみた：

ACE と Orion Editor は日本語入力した時の挙動がおかしかったので、結局採用したのは CodeMirror。単語をダブルクリックしたときの選択範囲などがアルファベット前提で不満だったので自分でいろいろ直したけど、これがあればカラーリング、自動インデント＆タグ閉じなど、いろいろやってくれるのだ。

どうせ Mac の中だけで書いたあとちまちまとサーバにファイルをアップロードしているのだから、PHP & JavaScript で用意せずに専用の Mac アプリケーションを作った方がよかったのかもしれない...

ひtoりgoと