ファッション雑誌を集めている。コーディネートの参考にするためだ。スキャンしてウェブサーバーにアップロードする。「公開」状態になってしまうとまずいので、ユーザーIDを入力してアクセスを制限する。
スキャンの自動化
スキャナーした写真はそのままでは使えない。多分ページをバラバラにしてそのまま保存すると言うこともできるのだろうが、コーディネートだけを切り取って色彩を補正する。これは手作業が必要だ。リサイズは自動化できるのだがエラーも多いので手作業でやっている。しかしファイル名を整えるのにはアップルスクリプトが使える。ファイルをドロップすると連番と日付を付けてくれる。
メタ情報が重要
写真が100を超えてしまうとどこになにがあるか分からなくなる。そこで、データベースに情報を入れておくのが重要だ。付加する情報は試行錯誤の後、次の４つになった。
- 時期（年・月）
- どの雑誌（あるいはカタログ）から抜いたのか：出典
- カテゴリー
- タグ
時期の情報は意外と大切で、例えばジーンズの形が時代によってかなりめまぐるしく違ってくるなどと言うことが分かる。だが実際には雑誌によってかなり時代性が異なるので、出典ごとに並べたほうが分かりやすい。
すべての写真はなんらかの目的のために収集されているので、何らかのカテゴリーに分類できる。カテゴリーはある程度の決まりを作ったうえで分類しないと収拾がつかなくなる。一方タグはいくつでも思いつくままに作れる。１つの写真に複数のタグということも可能なのだがUIはやや複雑になる。１つに写真に１つのタグでもそれなりに使える。
つまり自由に使える分類と固定化した分類の２つがあると利便性が増すのだ。
インターフェイスとスマホ対応
レスポンシブルデザインができて当たり前みたいな風潮があるので、最初は両対応にしようとしたのだが、これはやめたほうがよさそうだ。PCは一覧性がメリットだが、これをスマホで再現すると写真が良く見えない。ポイントは「予め写真の大きさやプロポーションが決められない」という点であり、既存のグリッドデザインでは対応できない。ただ、ウェブでみるためには写真の高さは640px程度に抑えておいたほうがよい。
PC版で異なる大きさとプロポーションの写真を並べるためにはmasonryというプラグインが使える。Pinterest（あるいはテトリス）のように写真が並べられるのだが、可変グリッドと言う名前がついているそうだ。jQueryを利用している。メニューはアンカーで並べたほうが全体像が掴みやすい気がする。
一方、スマホは写真を一枚づつスワイプしたほうがよい。FlickityというjQueryのプラグインが使える。写真の高さをCSSで(imgタグではなく)100%指定した上で並べるとそれなりの閲覧性が得られる。メニューをアンカーで並べるとうるさいのでプルダウンメニューを多用することになる。リストをプルダウン化するプラグインもあるのだが面倒なので利用しなかった。
これを切り替えるのだが、ありものを継ぎ足して作ったためにかなり場当たり的な構造になっている。切り替えにはJavascriptを使う。自作したほうがよいのだろうが、ネットには簡易的なものが落ちている。ただし、当たり前だがPCではスマホのデザインも使える。ということで実際にはスマホでアクセスしてきたときだけ、スマホ専用のデザインに切り替えるようになっている。
後作業
今回は数年に渡って開発したものを継ぎ足しながらシステムを作った。当初はlightbox.jsなどを利用していた。これはprototype.jsを使うのでjqueryベースのスクリプトとはあまりコンパリビリティがない。またタグ付けのシステムは画像をリストアイテムとして扱うのだが、可変グリッドシステムはdivを使っている。このためこの２つのインターフェイスには互換性がない。
本来ならば、使われているスクリプトやメニューを外部化したり整理したりということが必要になるのだろう。データベースのアクセスも２つのやり方が混在していたりする。こういうリファクタリングをやらないとプログラミング上手にはなれないと思うのだが、なんとなく「動けばいいや」と思ってしまうところがある。最初から別のシステムを作り直してもよいかもしれない。
行動が楽になる
画像データベースに限らないと思うのだが、こうしたシステムを作ると行動が楽になる。例えばカーディガンを着るときに「過去に見た写真」を数ある雑誌から探すのは面倒だが、このシステムを使えばスマホの画面から一発でほしい情報に到達できる。