交通費計算ウィジェットの開発秘話

この記事は、NAVITIME JAPAN Advent Calendar 2021の 11日目の記事です。

adventar.org

こんにちは、さっくーです。

ナビタイムジャパンのソリューション事業部でAPI開発を担当しています。

今回は、NAVITIME APIで提供しているWeb画面付きのAPI「交通費計算 Widget」についての開発で苦労した点、工夫した点などについてご紹介します。

はじめに

NAVITIME APIとは、地図表示や様々な移動手段のルート検索などの機能をAPI形式でご利用いただける法人向けサービスです。

NAVITIME APIでは、近年コストを抑えた開発が可能なローコード/ノーコード開発が注目されていることから、Web画面付きのAPIを検討しました。

そして、NAVITIME Widget APIの第1弾として9月から提供開始されたものが、交通費計算Widgetとなります。

交通費計算Widget作成の背景、特徴に関しては既に紹介している記事がありますので、こちらを読んでいただけると幸いです。

今回の記事では、開発者目線としての苦労した点、工夫した点を3点ご紹介いたします！

ポイント1. JSON形式でレスポンスが返却される

交通費計算Widgetは、Web画面付きのAPIとあるように、お客様のサイト上でAPIを呼び出すことで、HTML形式の画面が返却されます。

HTMLの画面ではルート検索を行うことができ、各ルート結果の中から一つルートを選択することで、JSON形式のレスポンスを返却することができます。

レスポンス形式さえ把握していれば、容易に組み込みが可能となります。

レスポンス(JSONデータ)取得までの流れ
1. 親画面より、交通費計算Widget(子画面)を呼び出す
2. 小画面でルート検索を行い、ルートを指定する
3. 指定したルートの運賃結果がJSONデータとして親画面に返却される

//親画面に値を挿入
function getFare() {
   if(parantExistanceFlag){
       // 指定した経路の運賃を取得
       const route_no = $('input:radio[name="route-no"]:checked').val();
       // 経路が未選択の場合
       if(!route_no) {
           alert('経路を選択してください')
           return;
       }
       // 指定したルート結果を取得
       const item = routeInfo.items[route_no-1];
       // JSON形式のレスポンスを生成
       let response_data = createResponse(item);

       // 運賃を親画面に返却
       window.opener.postMessage(response_data, host);
   }
   //ウィンドウを閉じる
   window.close();
}

ポイント2. JavaScript, CSSのファイルをAPIで取得

交通費計算Widgetのルート検索画面はHTML、JavaScript、CSSの3つのファイルで構成されています。

ただし、HTMLファイルは静的ファイルとして取得しますが、JavaScriptファイルとCSSファイルは静的ファイルではありません。

Widgetの画面を提供するにあたり、お客様の契約内容によって表示項目を変更する必要があるためです。
例えば、「A社ではバス時刻表利用(オプション)なし」、「B社ではバス時刻表利用(オプション)あり」といったケースが挙げられます。

例) バス時刻表オプション未契約のお客様の場合
・検索画面からバスに関連する記述を非表示
・ルート検索時にバスを利用しない様に設定　　etc...

そこで、JavaScript, CSSをAPIで取得する様に実装し、お客様毎にファイルの内容を変更できる様にしました。

お客様の契約内容はDynamoDBで管理しているため、DynamoDBの内容を元に、表示される内容を決定しています。
そのため、交通費計算Widgetを利用する開発者が契約内容を意識しなくても、契約に合致した出力が得られます！

この仕組みが実現できたことで、余計な情報が出なくなり、ユーザビリティの高いサービスを開発できたと感じます！

ポイント3. ルート結果の見せ方

ルート結果の見せ方については、開発前に色々なパターンを模索しました。

まず、出発地から目的地までのルートを、横表示と縦表示どちらにすべきかという点について検討しました。

お客様目線を意識してどの様な見せ方が最も使いやすいかを念頭に置き、「複数のルート結果を一目で比較できた方が嬉しいのではないか」と考え、横表示を採用しました。

現在の画面では簡易表示と詳細表示ができる様になっていますが、これもできるだけ一覧で確認できる様にしたいという配慮によるものです。

とにかく運賃が最安であれば良いといった要望をお持ちのお客様は、簡易表示のみでも、お使いいただけます。

是非使ってみてフィードバックしてください！

最後に

今回は交通費計算Widgetを開発した際に、工夫した点を紹介しました！

最初は手探りな状態で始まった開発ですが、社内のデザイナーにも協力してもらい、見た目も含め満足いく形で提供できました。

機能面としては、お客様からの一定数のニーズがあるものを中心に、改善・機能追加を続けていく予定です。

また、今回の記事で交通費計算Widgetにご興味をいただいた方は、Web仕様書にサンプルが掲載されておりますので、是非ご覧ください。

交通費計算(トータルナビ) - NAVITIME API 2.0 仕様書