Sony Eマウント フルサイズ対応のカメラレンズを集めてみた。
サンプル：https://sample.simplesimplesdesign.com/sonyalpha/lens.php
なせ、そんなページを作ったのか
最近、立て続けに新しいカメラレンズが発売された。そもそも現在発売されているレンズがどのくらいあるのか気になったので調査することにした。各主要レンズメーカーでレンズごとの詳細を見ていたが、気になるスペック情報だけ集めた一覧ページがあればいいなと思って、そんなページを作ることにした。
というわけで、仕様策定からデータ収集、デザイン、コーディング、API制作、プログラミングまで、フルスクラッチで作ってみた。制作期間は3日間（実質20時間ほど）。
（ちなみに、より実用性あるものにブラッシュアップするとしたら、デバック、検証、修正、最適化を何回か回す必要あるので、あと3, 4日は必要になると思う。ただし、このページは、企業案件ではなく、自分のためのページなので、バグ以外は深追いしない）
こだわり
レンズのスペックだけではなく、常に最安値を表示するようにしたり、気になる条件で絞り込みができたら、利用価値が高くなるのではと考えた。
実装する際の思想としては、フレームワークを使わずに、利用者にとって使いやすい、コーダー・開発者にとって使いやすい、運用者にとって使いやすい、それぞれの視点になってUI/UXに配慮している。
データ収集
まず、調べたいメーカーをピックアップ。メーカーごとにレンズページから知りたいスペック情報をWebスクレイピングで抽出してGoogleスプレッドシートに記載する（これらの情報は、公式サイトより価格コムのスペック情報から収集すればラクだった...）。
続いて、レンズごとにそのレンズの価格が掲載されている詳細ページのURLを取得してリスト化。その後、Webスクレイピングで最安値を抽出してGoogleスプレッドシートに記載する。タイマーを設置して、定時間ごとに最新情報に更新するようにした。
参考：商品ごとの最安値を価格コムから参照して、スプレッドシートに記入。毎日、自動更新で。
API制作
非常にシンプルなJSONファイルを作成。
GoogleスプレッドシートのCSVファイルをWeb公開して、そのデータをJSON形式で保存する。さらに、このシンプルな構成にすることで、Googleスプレッドシート自体が仕様書の変わりも果たすことになる。
ページを表示するたびに、Googleスプレッドシートを参照してしまうと、ページ表示速度に影響を及ぼすので、Cronを設定してもよかったが、今回はファイル保存日時と現在時刻を比較して、ファイルが古いと判断したときのみ、Googleスプレッドシートを参照してファイル更新し、通常はローカル保存したファイルを参照するようにした。
データ件数は100件、どんなに増えても1000件も満たないことを踏まえ、アクセス時には一括して全データを取得する。
UI/UXデザイン
- 横幅サイズに合わせて、4段階のデザイン調整（レスポンシブWebデザイン）
- （横幅小さい場合）検索エリアと結果画面を切り替えるボタンを下部に設置し、iOSのデフォルト挙動に干渉しないよう配置に配慮。また、タップ時にアクションを付与することで、このボタンを押すことで開閉ができることを暗示
- （スマホの場合）基本的にデザインガイドラインに配慮した上で、デザイン性を優先したUI設計
- （iOSの場合）スクロールした際、惰性が効かなくなる不具合対応
- （Androidの場合）コンテンツ上部でスクロールした際、自動更新（Pull to Refresh）しないよう配慮
また、検索だけでもいろいろケアしている。
- 項目ごとのクリアする方法を統一することで、学習コストを下げるように配慮
- 検索条件を変更するたびに、即時検索
- 数字入力時のHTMLによるアシスト（最低数値設定、仮想キーボード設定、上下幅設定）
- 検索結果が変更されたことを認知するため、わざと一瞬データを非表示にする（非表示にした際、iOSでデザイン崩れがないようにコンテンツ領域を保持、また、並び替えの場合は検索結果のみ非表示）
- ちなみに検索条件の一括クリア、並び替えの一括クリア、全ての条件クリアを用意していたが、不要と判断し削除することで、よりシンプル設計
コーディング
- 開発言語は、PHP + jQuery + Sass（HTML5 + CSS3.1 + JavaScript ES6）
- CSS設計としてはBEMを採用
- タスクランナー Gulp（ファイル結合、Sassのコンパイル、CSS最少化、JSのES5化、JS難読化）
- Googleガイドライン準拠が基本
- アイコンはicomoonを利用
運用
- レンズが増えても、Googleスプレッドシートに追加するだけで画面反映（強制的にAPIファイルを生成できるように設計）
- メーカーが増えても、自動で画面反映されるようにマークアップ
対応しなかったこと
- 画像関連の処理（画像のローカルコピー、画面の表示時直前呼び出し）
- 検索条件の保持（LocalStorageとHistory APIの利用）
- 検索条件を設定した場合に検索結果数のアフォーダンス（横幅が小さい場合）
- 検索条件を設定した場合にその箇所のハイライト
- お気に入りレンズ登録（ローカル保存）
- レンズ別にAmazonへのリンクボタン（全部対応するには時間がかかるので、少しずつ対応するかもです）
- 多ブラウザ・多デバイス検証（バグ出しは完全に行っていないため、不具合やデータ不備にお気づきの場合、お手数ですがコメントいただけると嬉しいです）
と長々と書き連ねましたが、あらためてページを見ていただけるとめっちゃ嬉しいです。ご意見やご感想などありましたら、ぜひコメントください。お待ちしております。
サンプル：https://sample.simplesimplesdesign.com/sonyalpha/lens.php