2024年1月25日に、金沢工業大学 情報フロンティア学部 メディア情報学科の「モバイルアプリケーション」授業の最終発表会を見学しました。地域課題を解決するためのオリジナルアプリケーションの開発という課題での発表が行われ、Mapboxの技術を活用した作品も複数ありました。
本記事では、Mapboxを活用した作品を抜粋してご紹介します。
発表内容
カラオケ探知アプリ
このグループは、カラオケ店を地図上に可視化するアプリを作成しました。コロナが収まり、学生が外出して遊ぶ機会が増えたことから、代表的な遊び場としてカラオケの場所を知りたいと考えたそうです。カラオケ店にピンを立て、かつ現在地から最も近い店舗を強調表示させており、現在地からの距離と最短経路も表示しています。技術的には、Geolocation APIで現在地を取得、各店舗に対してそこからの距離を計算、Mapbox GL JSを使用してピンを作成・表示し、クリック時に店舗名も表示させています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f0213abd6642ffaa4d6_zPCacQeK_1H94eDP5eM8RZkVD2rM9Cq3-qZnl2_zn24gzBIm0C8PZzHwlFD3cZaBbZxp9vxHQO7tKMiJ_K7iJ0UzwVNwPvH_tNtdNhmBQ1DqrzRvHPl7aFCeQSSQQZGP3OPKDc8s9OBRXi-6J3VHM7k.jpeg)
Mapboxを使用した地域紹介アプリ~金沢、野々市市~
このグループは、外国人観光客が増えた背景から、観光客向けに目的地までの距離とおすすめスポットの候補を同時に表示できるアプリを作成しました。おすすめスポットのボタンを押すと、現在地から目的地までの経路が表示されます。Mapboxを利用して、地図の表示、経路探索、位置情報の取得を行っており、その他、セレクタAPIとイベントも活用されています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f0252814dbe9a681d56_RMTOh5Ro50PhC8hraERJ6ngTySIk0ECz9q97NIH0pv_uS1EV3vkblEwWwxk0A7lO_lMfL7zr81ObyvSqXBuCmvgUs-77XwopSxrA963xXbwH5CgoJKdlzd_97zYMFgGO4os4-PWbMS7gT7xy0w3QcyU.jpeg)
自販機マップ
このグループは、金沢工業大学内および周辺の自動販売機の場所を可視化しました。Mapboxを活用し、現在地の取得、アイコンの追加・消去、ポップアップ(Mapbox-popup-control)、ラジオボタン、マップの表示をしています。また、電子マネーの使用可否を記載したり、飲料自販機 / 食品自販機でアイコンを区別するなどの工夫がありました。自販機の位置情報はご自身で調査されたそうです。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f023e4e8742bb1a31a1_Fuup2y8ssstpCaFh0YS-s5x1TMxw92nRm7E_vv1NfBPPegGmENmNlkZC434jOeI1NkRNAPVWmcyz7aLdMW6zJepY1vpe-_QhgndwEKsJzNUc5D00LB9Nyyd--vaFzRhJwfe4FR6B3Xv9xBohyPIO98Q.jpeg)
のってぃfinder
このグループでは、石川県野々市市を走るコミュニティバス「のっティ」の走行位置を地図上に反映するアプリを作りました。バスの時刻表から推測してバスの位置を設定しています。バスの現在地は30秒ごとに少しずつ動くように設定していますが、遅延や運休には対応していないため、リアルタイムで反映できるように工夫をしたいと話していました。バス停やバスのアイコン画像も自作しています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f023e4e8742bb1a3129_shgeyPyzS_O0T2aDqQ4or6tuaxsW3XFmfh2keVQuVzfEXXzIXqKjFcej4X_AA2YTyC2UNAB8lQMnugHS0VH4hFmj5DfwIkyxPCb64TApm9hNiOTZG1qGzzz0gCcgwKl10dCoBmH-5YPZ5HMO1er4aGM.jpeg)
喫茶店検索アプリ Café Map
このグループは、地域貢献のために喫茶店を簡単に検索できるアプリを作りました。ルート検索や移動手段に合わせた時間表示、お店の公式ページもリンク付けして表示しています。店舗の情報を調べ、緯度経度を入力して地図上に落とし込みました。Mapbox Directionsプラグインを使用してルート案内機能を地図に追加しています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f02376dfc8de63f8f4e_jMfGGlFKJL4e63cBg4w1k_S-TDiXKfrMq0EpdKiIdFjdWoJPsgRqEQ0wGDf5PLwtMjZnXko0CWqFwqzD0boyjr05bgEPb_mK_QloDDYM-ooqio4gX1twCWX6T1km7FV6AkOraa0ITSqrGrYB_x_Et-E.jpeg)
公園マップ
このグループでは、小さい子どもと遊ぶ保護者向けに公園を検索できるアプリを作成しました。Mapbox GL JS、Geolocation API、イベントリスナーを使用しています。青いマーカーで各公園の位置が可視化されており、左側では、公園の紹介文や設備有無の情報に加え、現在地からの距離、推定歩行時間が記載されています。遊具の有無や広さ等でフィルターをかけて公園の絞り込みができるようになっています。
![](https://cdn.prod.website-files.com/5f8ddf03fc2e2a37e95f7124/65c83f0254bbc6ff0129ed2a_b3qCro7melORGL-FQ49qOvgBF3FYX-z2N0XvcPOyw3Klrk0QrqWL5phcsuHye9_IGTyLD_bs9Ym0ByNWnI-_QeNWdkOhafagrE0VR8o6jGqCXDssPoo0NNOtaEDeoPsV5zkDftfp3XJBbt5ebHlSG68.jpeg)
発表の後には授業のお時間をいただき、学生の皆さんにMapbox Japanの紹介も行いました。金沢工業大学の皆さん、Mapboxの使い方を勉強してご活用いただき、ありがとうございました!
Mapboxは、教育でのMapboxの活用を支援しています。教育支援を通して「デジタル “マップ” ネイティブ」の誕生に寄与することで、デジタルマップの利活用促進や業界の発展のみならず、地図を通したグローバル人材の育成に貢献したいと考えています。
授業での活用やワークショップを行いたい場合は、ぜひお問い合わせください。