リニューアルの成果

まずは今回のリニューアルの「要求」部分をピックアップしてみます。

■要求
▽自分自身が前々からやりたいと思っていたこと
　A.エントリに掲載する写真のサイズをもっと大きくしたい
　B.サイト内の回遊性アップのため各エントリに関連する別のエントリへの導線を設置したい

▽よくお問い合わせいただくこと
　C.写真の撮影場所
　　・地図
　　・カテゴリ
　D.写真撮影時の設定データ

これらの項目はけっこう昔から気になっていたことだったのですが、なかなか機会がなくこれまで着手できませんでした。とはいえ、2011年になってこのブログもまる5年。ここいらで一回ちゃんと整理した方がいいと思い、気合いを入れて一気に機能追加を行うことにしました。

ということで上記A?Dの要求をクリアするために、以下のような施策を打つことにしました。

■要求をプロダクトに反映
　A.写真サイズ
　　・写真サイズを大きくする（旧「500?333」→新「640?426」）
　　・ページのカラム幅を広げる（旧「左カラム：200+右カラム：600」→新「左カラム：250+右カラム：700」）
　　・写真クリックで拡大画像ポップアップ
　B.サイト内回遊性アップ
　　・エントリページ下部に「関連写真」モジュール設置
　　（撮影機材、季節、撮影状況などの関連性が高いエントリのサムネイルを表示）
　C.写真の撮影場所
　　・カテゴリ再編を行い撮影場所のみをカテゴリで表現することにする
　　・全エントリにカテゴリを設定し直す
　　・エントリ下部に「地図」モジュール設置/全エントリに地図表示
　　（これまで本文下部に表示していた地図を別モジュール化してサイズを拡大）
　D.写真撮影時の設定データ
　　・エントリ下部に「撮影詳細情報」を表示

ということでようやく今みなさんがご覧いただいているような状態になりました。それにしても今回のリニューアルはかなり時間がかかりました。何より時間がかかったのはデータの持ち方を変える部分です。

■実施手順
▽もともとのデータの持ち方
　・エントリ本文にflickrのエンベッドスクリプトを直書き
　・エントリmoreにYahoo!地図のエンベッドスクリプトを直書き

要するにこれまでエントリの中に写真と地図のスクリプトが混在していたのです。なので、写真と地図の部分を機能アップしようにも、手をつけることができなかったのです。そこで今回は将来を見越してこれらのデータの持ち方を変えました。

▽事前作業
　・MovableTypeのカスタムフィールドでflickrのphoto_idを記録するフィールドを作る
　・カテゴリ構造を作りおなし

▽個別エントリページの作業
　・全てのエントリを一つ一つ開いてエントリ本文に貼りこまれているflickrのエンベッドタグからphoto_id部分だけをコピーしてカスタムフィールドにペースト。スクリプトそのものはエントリ本文から消す
　・エントリmoreの地図エンベッドスクリプトを削除
　・新しいカテゴリ構造を指定

▽個別エントリの作業終了後
　・flickrのAPIに全エントリ分のIDをリクエストとして投げる
　・レスポンスとしてEXIFの撮影詳細データと緯度経度を取得
　・取得したデータを格納するカスタムフィールドを新設
　・取得したデータを整形してphpMyAdmin経由でMySQLに直接インポート

僕はもともとflickrをオリジナル写真保管場所として、EXIFなどを始めとしてgeotagなど各種情報を入稿していたので、今回はflickrにAPIでリクエストするだけで「撮影詳細情報」や「緯度経度」などを取得できました。これをエントリごとにひとつずつ調べて入力していくことを思うと果てしない気持ちになってしまいますが、flickrにデータがあることはわかっていたので、その分気持ちは楽でした。

とはいえ全エントリで個別にphoto_idを抽出して既存のスクリプトを削除する作業などをやらなきゃいけないことには変りなかったので、その部分に手間がかかりました。

その成果といってはアレですが、一応当初の目的に沿ったサイトになったと思います。例えば今日の写真。お寺にあるお堂の壁に木々の影が映っている写真ですが、例えばこの写真を見て「カメラ何使ってるんだろう？」「この時間帯だったら絞りとシャッタースピードのバランスはどんな感じなんだろ？」「そもそもここはどこ？」というような、写真を趣味とする人が感じるであろう疑問にはだいたいお答えできるサイトになったんじゃないかと思います。