駐車違反をしないための新機能「駐車禁止・駐停車禁止表示」開発までの道のり
こんにちは、『配達NAVITIME』のアプリ開発担当のきゅうり と 地図フレームワークの研究開発担当の広葉樹です。
今回は、配達専用の業務管理／カーナビアプリ『配達NAVITIME』にてリリースした｢駐車禁止・駐停車禁止表示｣機能の紹介と、その開発経緯をお話します。
「駐車禁止・駐停車禁止表示」機能とは？
今回追加したのは、地図上にどこが駐車禁止・駐停車禁止エリアなのかを、線を用いてひと目でわかるよう表示する機能です。またナビゲーション中は、走行している道路が駐停車禁止区間の場合、画面左下に標識アイコンが表示されます。
※利用される際には、実際の標識に従い駐停車を行ってください。
なお、本機能の詳細はプレスリリースをぜひご覧ください。
開発着手までの経緯
軽貨物運送をする配達員は、路上に駐車をし、車両から離れて配達先に向かう必要があるので、自家用車を運転するドライバーと比べ駐車禁止・駐停禁止違反のリスクが高い傾向にあります。そこで、軽貨物運送の配達員向けのサービスである『配達NAVITIME』から、リスクに対する注意喚起を配達員に向けて行うことで駐車禁止・駐停車禁止違反回避の一助となるのでないか、と考え開発がスタートしました。
本機能に至るまでの道のり
ナビタイムジャパンでは、駐車禁止・駐停車禁止エリアなど各種データを地図に表示可能な形式に変換し地図上に描画できるようにする地図フレームワーク開発者🗺️ と、それを取り込みUIを含めた機能開発するアプリ開発者📱 がいます。本節では、両者がどのように考え開発が進行していたのかを紹介します。
🗺️： 「駐停車禁止エリア」をデータ化する
ここからは「駐停車禁止エリア」を地図上で表示するまでをお話します。
文字として表示するにしても、地図上に表示するにしても、まずはデータを作成し配信する必要があります。幸いなことに、オープンデータとして駐停車禁止エリアを含む道路規制情報が存在していたので、このデータを加工していくことにしました。
また、オープンデータには駐停車禁止エリアの場所以外にも、様々な関連情報が格納されています。そこで、現時点でどのような画面を想定し、どのような情報を表示したいのかを『配達NAVITIME』の開発者からヒアリングして、元データから必要なデータだけを抜き出し、新しいデータ要素も追加しています。
このような手順でフォーマットされたデータを、当社のサーバに配置すれば、データの開発は完了です。
[左]csvオープンデータの一部抜粋、[右]GeoJson配信データの内容
さて、こうしてデータの作成・配信が完了し、地図上に駐停車禁止エリアを描く準備ができました。ちなみにこの時点で、『配達NAVITIME』アプリ上でどのようにデータを見せるか、8割ほど決まっている状態でした。
そのため、仕様通りの表現ができるように、地図フレームワークを開発していきます。しかし、まずはAndroidOS対応のみ、かつ駐停車禁止データのある場所にシンプルな線を表示しただけの状態で、『配達NAVITIME』の開発者に一度見た目を確認してもらうことにします。
というのも、実際に画面上でデータを見てみたら、多くの場合は「なんか思ってたイメージと違う...」「この表現は変えたほうが良いな...」となりがちです。特に、設計に大きな変更を加えるような変更が必要になった場合は、手戻りのコスト等を考えると非効率的です。
📱： アプリ開発側での情報の見せ方検討
地図フレームワークを受け取り次第、どのように情報を表示するか検討していきます。とはいえ、すでに方針はデータと地図フレームワークを待たずして以下のことが決まっていました。
・地図上に規制該当箇所を線で表示させること
・規制日時・時間の情報は、線をタップして表示させること
ですので、このターンでは線をどのように表現するかにフォーカスします。
初期検討では、「点線」「ぼかし」「透過」がありました。それは、既存機能で渋滞情報や道路規制情報、道路幅員情報などを線で表現しており、それらの情報と混同しないような考慮が必要なためです。
では、地図フレームワークを実機に取り込んで確認していきます。下の画像は実際の画面キャプチャです。
*開発途中の画面です
第一印象として、駐車禁止エリアの多さに驚かされました。これだけ情報が多いと存在感が増し、他の情報と混同してしまうことは目に見えました。そこで本機能は存在感を抑えた「ぼかし」「透過」のいずれかで表現する方針としました。そうと決まれば、その方針が実現可能なのか、地図フレームワーク開発側に相談です。
🗺️： 地図フレームワーク開発側での検討と実装
前節の通り、『配達NAVITIME』の開発者から、現状の見た目に関する課題点や、より見やすくするための要望を受け取りました。これらの要望は、少しの改善によって解決するものがほとんどでしたが、一部の問題は解決に時間を要しました。例えば、線の形状を透過する処理は、そのまま実装すると線が交差する場所で色の濃淡や色そのものが混在してしまう問題がありました。
そこで、本問題を解決するために、オフスクリーンレンダリングを使用することにしました。オフスクリーンレンダリングとは、簡潔に説明すると、アプリの画面上ではない内部メモリ上で一度描画を行うことをいいます。画面の裏側で駐停車禁止エリアの描画内容だけを一枚の画像として表現し、この画像全体に対して不透明度をかけることで、色の重なりを気にすることなく、全体的な透過処理が可能になりました。
なお、「オフスクリーンレンダリング」についての詳細な説明については、過去に投稿した以下の記事も併せて参照ください。
また、フレームワーク開発における工夫点として、AndroidOSのみを先行対応した点があります。先にAndroidOSで完成形を作ってしまうことで、iOSではただ同じものを作ればいいだけという状況にすることで、開発の工程を可能な限り効率化することができます。
さて、『配達NAVITIME』における駐停車禁止線の表現課題については、無事解決することが出来ました。ここから、『配達NAVITIME』のアプリ上でUIの調整を行います。
📱： 地図フレームワーク開発側の実装を踏まえてUIの調整
要望を実装いていただいた地図フレームワークを実機に取り込んで、ぼかし表現と透過表現の比較・検討を行っていきます。
比較の際に重要とした点は、パッと見たときに判断しやすい見た目であることでした。ぼかし表現を用いた場合、駐車・駐停車禁止エリアとそうでないエリアとの境界が曖昧になってしまうことや地図色を夜モードにした時に道路の色と同化してしまうなどの問題がありました。それらのデメリットをクリア出来ているのが透過表現でした。
結果、透過表現へと着地しました。その後は細かい挙動の修正や色味調整などを行い、「駐車禁止・駐停車禁止表示」機能が完成しました。
おわりに
今回は「駐車禁止・駐停車禁止表示」機能についてと機能実現するまでの道のりについて紹介しました。本機能に関わらず、地図フレームワーク開発者とアプリ開発者で密にコミュニケーションを取りながら、今後も様々な配達車両を利用するすべての配達員が効率よく安全に配達業務を行えるような機能を世の中に送り出すよう取り組んでまいります。
最後までお読みいただき、誠にありがとうございました。