少し前からcapistというGistをスクリーンキャプチャーのストレージとして使うAutoHotkeyスクリプトを作って使っているが、スクリーンキャプチャーの数が40を超えた辺りでブラウザからは一覧を見ることができなくなった。削除や追加、そしてファイルそれぞれの閲覧は可能なので特に使用上に問題はないが、一覧がないとちょっと寂しいのでCCCCAPTURE!という一覧するだけのものを作った。
仕組みは簡単で、キャプチャする時についでにfilelist.csvというファイル一覧を保持するCSVファイルを更新してやり、それをYQLで処理してやるだけ。YQLのCSV読み込み機能はカンマ区切りのスプレッドシート的なものにちゃんとなっていなくても良いので、簡単なテキストファイルの読み書きにも使える。
スクリーンキャプチャーという性質上、個々の画像の幅や高さを合わせるのはとても面倒くさいので、ビューの方でCSSで頑張ってサイズをなんとなく統一した感じにした。最初は幅だけ統一してMasonryかBrickmaker-jsを使おうかと思っていたけど、それぞれの画像サイズに差がありすぎるためいまいちな感じだった……。
画像表示部分のCSS
#list figure a {
display: block;
width: 432px;
max-height: 243px;
line-height: 243px;
overflow: hidden;
}
#list figure a img {
width: 100%;
vertical-align: middle;
}画像を縦横に固定サイズにリサイズしてしまうと間抜けな感じになることが多いので、とりあえず幅を合わせるだけに留めた。そうするとimg要素でheight属性が指定されていなければ、ブラウザ側がアスペクト比を維持してリサイズしてくれる。もちろんそのままでは高さがマチマチになるので、高さが飛び出す場合はoverflowプロパティで隠し、足りない場合はline-heightプロパティとvertical-alignプロパティの組み合わせで中央に来るようにした。Lightbox的なのが必要そうな気がするので後で付ける……つもりだけどもう飽きてきた。
Gistをスクリーンキャプチャーのストレージとして使うというアイディアはgyastから頂いた。gyastではキャプチャごとにリポジトリを作っているが、一覧が欲しかったのでcapistではひとつのリポジトリに集中させることにした。削除や追加(キャプチャー以外の画像の追加も)、修正等がGitでどうにでも出来ることやリポジトリをDropboxフォルダ内に作っておけばバックアップとかもしやすいことなどが良いところ。反面、予めGistリポジトリを作る必要があったりとか簡便さには欠ける。