はじめに

こんにちは。Akiといいます。

こちらはQiitaのデフエンジニアの会アドベンドカレンダー16日目です。

本記事では、Next.jsで作っていたマップを「どすごいマップ」で作り直した話について紹介します。

去年2022年のアドベントカレンダーで自分が書いた記事について、ありがたいことに評判が良かったらしく、続編(?)を書いて欲しいとの声を頂いたので、今年も頑張って書いてみます。
今年でエンジニアとして4,5年目になりますが、個人開発やプライベートで技術に触れる時間を作るのはなかなかモチベーションがないと続かないですね。
こういった機会を無理やり作ることで、なんとか頑張ろうという気持ちです。

障害者割引マップについて

まず今回作った、「障害者割引マップ」は、去年自分がNext.jsやらPlanetscaleやらの技術を使って開発したアプリの続編といいますか、それを「どすごいマップ」を使って簡単にリメイクしたマップアプリです。

利用方法

URLはこちら

まずアクセスすると、デフォルトでは日本全体が表示されるはずで、位置情報を許可すると、自分自身の位置の近くの施設がピンで表示されているはずです。
右下の位置情報アイコンをクリックすると、現在位置にフォーカスされます。

そして右上のレイヤーのアイコンをクリックすると、地図に使うタイプを変えることができます。（OpenStreetMap以外は正直見づらいので変える必要性はないと思いますが笑）

最後に、左下の検索アイコンをクリックすると、検索条件を指定することができるようになっており、現在は以下の３つでフィルタリングできます。

施設名
施設タイプ(サイト「障害者手帳で行こう」の施設の種類に沿ったもの)
無料かどうか

そして適当な施設のピンをクリックすると、下にその施設のタイトルと施設の種類、住所が表示されます。

その表示された部分をクリックすると、モーダルが立ち上がり、詳細情報が表示されます。

基本的な使い方は以上です。

利点と特徴

前回と自分が作成したアプリと今回のアプリを比較して改善したポイントは以下の２点です。

反応速度
検索ができる or フィルタリングできる

まずは、上記の画像の通り、大きくマップを表示しているときは、集約してエリアに存在する数を表示するようにしています。(どすごいマップの仕様で集約の有無を選べる)
最初は集約なしで表示させようとしたのですが、8千超のデータを最初に表示させるのは厳しいようで、重くなってしまい、操作がもたついてしまいました。
そのため、スケールが大きい表示のときは集約、スケールを小さくしていくとピンで表示されるようになっています

そして検索機能ですが、施設名と施設タイプ、そして無料か否かというフィルタリングの条件を指定できるようになっています。
施設名は言わずもがなですが、施設タイプは「障害者手帳で行こう」というサイトの施設の種類で分かれているので、それを指定できるようになっています。
例えば駐車場であればpublic(公共施設)、美術館や博物館であればleisure(娯楽・レジャー)などで、自分が現在いる場所の周りで割引があるかどうか知りたい施設の種類をしぼることができるようになっています
無料かどうかのフィルタリングは、TrueかFalseのリスト式で、Trueであれば利用料がタダ、あるいは一定の時間は無料になる、といった具合です。

制作背景

去年と同じく、障害者手帳の割引が使える施設をマップで知りたいという気持ちで作ったのですが、やはり使い勝手がよくないなぁというのと、PlanetScaleはしばらくアクセスがないとDBがスリープしてしまうという仕様だったので、人が使いやすいと感じるレベルまでUXを良くしたいと思ったのですが、アプリの開発は面倒なので、もっと簡単なツールがないか、ということで調べて出てきたのがどすごいマップでした。

詳細は省きますが、一言でいうと、スプレッドシートのデータからマップアプリをつくることができる、というものです。
もともとデータは自分で持っていたので、それをスプレッドシートに入れ、データを整形してから、アプリに読み込ませて、集約表示の有無、詳細情報の表示内容などをポチポチするだけで作れます。
当然本格的なマップアプリには叶いませんが、スプレッドシートのデータさえ用意できれば１時間もかからずにできるので、PoCやプロトタイプ、地域の簡単なマップアプリを作るのには向いているのではないでしょうか。

他社製のサービスに乗っかっているだけなので、突如このアプリが使えなくなる可能性もなきにしもあらずですが、このマップアプリであれば、DBもスリープすることはないし、わりと使い勝手が良いので、使ってもらえるのではないかなと思い、今回このアプリを使いました。

将来の展望

どすごいマップはピンの形とかを変えたり、内容によって色を変えたりできるようですが、色を変えられるのは４つまでだったので、施設の種類によって色を変えるのはできませんでした。
本当ならマップの全体図から施設のことがある程度わかるように形を変えたり、施設の種類の色を変えたりしたいところですね。

将来的には、開発者や予算がついた場合には、しっかりとしたマップアプリ、ひいては、マイナンバーカードが障害者手帳の機能を兼ねた時に連携できるような、そんな機能をつくれたら、障害者手帳を持っている人、バリアフリーの情報が欲しい人には便利になるんじゃないかなぁと思っています。
アプリの開発は一人でやるのはしんどいので、仲間がほしいところですね笑

まとめ

今回はアプリ開発を頑張らずに、すでにある便利なサービスを使って、自分の目的を達成しよう、というような趣旨の話でした。

車輪の再発明の話ではないですが、世の中にたくさんツールはあるので、自分で開発するよりも、すでにあるツールを使ってやったほうが速いし、自分のやりたいことはできる、みたいなことはおそらくたくさんあると思うので、勉強のためとかならいざしらず、まずはそういったツールがないかを調べてみると良いのではないでしょうか。

参考資料