Matsubo Tech Blog 
港区スマイル商品券マップを開発しました
こんにちは！ 今回は、港区のスマイル商品券を利用できる施設を簡単に検索・閲覧できる Google Maps ベースのウェブアプリケーションを開発した経験について共有したいと思います。
背景
港区では、地域経済の活性化を目的として「スマイル商品券」を発行しています。この商品券は区内の多くの店舗で使用可能ですが、利用可能な店舗を探すのが難しいという課題がありました[1]。
私自身、過去に商品券の使用期限が迫っているにもかかわらず、使える店舗がわからずに困った経験がありました。この経験から、他の区民の方々も同じような問題を抱えているのではないかと考え、このプロジェクトを始めることにしました。
開発のプロセス
1. データの収集と整理
まず、港区商店街連合会が 公開しているPDFから利用可能店舗のデータを抽出しました。このデータには店舗名、住所、業種などの情報が含まれていました。
Google Maps 上に表示するためにはある程度規定のフォーマットでファイルを作って上げる必要があります。 1 つの Spreadsheet の 1 つ目のシートしか見てくれないのでメトリックごとに CSV ファイルを作って上げる必要があります。
また、カラム名が重要なのでカラム名をつけた状態で作ります。
今回は、通常券と限定券の 2 つのレジェンドに分割しました。
2. Google Mapsの活用
次に、Google Maps JavaScript API を使用して、抽出したデータを地図上にプロットしました。 GoogleのMy Map機能には住所からGocodingしてくれる機能があるので住所から緯度経度情報を取得してプロットしてくれます。
3. 検索機能の実装
ユーザーが現在地から近い店舗を簡単に見つけられるよう、位置情報を利用した検索機能を実装しました。また、業種によるフィルタリング機能も追加し、飲食店のみを表示するなどの絞り込みを可能にしました。
4. 詳細情報の表示
各マーカーをクリックすると、店舗の詳細情報（店舗名、住所、電子商品券・紙商品券の利用可否など）がポップアップで表示されるようにしました。
成果と反響
完成したアプリケーションは、Xで公開したところ、多くの方々から好評をいただきました。特に、現在地からの店舗検索や業種別フィルタリング機能が便利だという声が多く聞かれました。
今後の改善点
-
データの自動更新: 現在は手動でデータを更新していますが、港区の公式サイトから自動的にデータを取得・更新する仕組みを構築したいと考えています。
-
ユーザーレビュー機能: 利用者が店舗の評価やコメントを投稿できる機能を追加することで、より有用な情報プラットフォームになると考えています。
-
モバイルアプリ化: 現在はウェブアプリケーションですが、将来的には iOS や Android のネイティブアプリとして開発することで、プッシュ通知などの機能を追加し、ユーザー体験を向上させたいと思います。
まとめ
このプロジェクトを通じて、オープンデータを活用することで地域の課題解決に貢献できることを実感しました。また、Google Maps のような既存のプラットフォームを利用することで、30 分で実用的なアプリケーションを開発できることも学びました。
今後も、このようなプロジェクトを通じて、技術で地域に貢献していきたいと考えています。皆さんも、身近な課題に目を向けて、技術で解決できることはないか、考えていきます。
