2024年10月5日(土)から10月27日(日)まで開催されている T3 PHOTO FESTIVAL TOKYO 2024 東京国際写真祭。東京駅付近の八重洲・京橋・日本橋を舞台に、まるで街全体が写真展となるということで、これは行ってみたいと思った。
ただ、どこに何があるのか、というのがよく分からなかったので、自分で作ってみることにした。
Google Maps Platform を使って作った地図
10月5日(土)
Google Maps Platformでプロジェクトを新規作成し、APIキーを発行する。
10年前くらいに地図APIをフルカスタマイズして作り込んだ経験があるので、今回はシンプルな実装を想定したので、サクッと作ることができた。
- 地図上に各展示場所をアイコンを表示する
- 各展示場所情報をリストに表示する
- 地図上アイコンと情報リストを紐付けする（アイコンをタップすると該当リストを表示し、情報リストをタップすると該当アイコンを地図の中央に表示する）
これで、何を見ようか検討をつけながら、明日の散歩コースをイメージする。
10月6日(日)
実際に現地で東京散歩。
ここで現在地を取得する機能がないことに後悔した。結局、Google地図も使いながら展示場所を特定しつつ散策を続ける。
帰宅後、現在地取得の機能を追加し、その日iPhoneで撮影した写真をリスト情報に追加する。
- 現在地取得の機能を追加する
- デザインをブラッシュアップする
10月9日(水)
誰でも閲覧できることを想定して、あらためて公開用のサブドメインでURLを用意する。
ついでに、今後も突発的なコンテンツを作るかもしれないことを想定して、コンテンツ紹介ページも用意する。
10月11日(金)
再度、現地で東京散歩。
前回、見れなかった場所を散策する。現在地取得の機能を追加したものの、精度がよくないことと現在地を継続して取得するようにしていなかったので使えない。結局、またGoogle地図を一緒に使うことになる。
帰宅後、現在地取得の機能は削除し、現在地追従の機能を追加する。またiPhoneで撮影した写真リスト情報を更新する
- 現在地追従の機能を追加する
- デザインをブラッシュアップする
最終的に用意した、タップしてできる6つの機能
- 地図上のアイコンをタップ
アイコンの場所をリストに表示する - 現在地アイコンをタップ
現在位置を追従する - リスト情報の地図アイコンをタップ
リストの場所を地図上に表示する、その後タップすると地図の縮尺を変更する（ズームイン） - 裏機能として、ダブルタップしても地図の縮尺を変更できるようにした（ズームアウト）
- 詳細と情報提供元として、各展示ごとに公式サイトへのリンクを設置する
- リスト情報のサムネイルをタップするとサムネイルを拡大表示する
Google Maps Platform を使って作った地図
爆誕：我ながら驚くほどにすぐに実装できた
地図部分だけなら、8時間もかからないくらいで仕上げた。
以前なら何日もかかっていたようなことだが、次の3つの要素が影響してサクッと作ることができた。
- ドキュメントが豊富になっていて、まずはコピペで試すことができたこと
- ChatGPTのおかげで以前なら何日もハマってしまったようなこともすぐに解決できたこと
- CSS3ありきで実装できたこと
残念なのは、今回は思い付きの突貫作業で制作したので、ソースが汚いことかな。
はじめはタスクランナーやライブラリは導入せず、ES6準拠のJavaScriptとCSSで記述していたが、途中で思った以上に複雑なことをやろうとしてることに気がついたので、jQueryとgulpを導入。
もちろん環境用意してからは一気に生産性倍速。こうなると最初からやり直したくなるが、今回は個人用のコンテンツなのでリファクタリングは割愛する。
さいごに：これを地図系のコンテンツを作るテンプレートにしたい
シンプルでありながら裏側では細部にこだわりがある。そういう作り方が好きだし、自分らしさでもある。そして今回は、そのような細部にこだわりを出せる箇所が随所にあったので、思った以上に自己満足したコンテンツに仕上がったと思う。
また次に似たようなコンテンツを作ることがあったら、これをベースにしてカスタマイズしたい。そのときにはちゃんとリファクタリングもしたい。