見出し画像

ローコードで交通費計算機能が実装できるWeb画面付きAPIを開発した話

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

今回は、カンタンに交通費計算ができるWeb画面「交通費計算 Widget」を、NAVITIME APIとして提供した話をご紹介します。

NAVITIME APIとは

NAVITIME APIは、様々な移動手段のルート検索、地図表示、スポット検索など、ヒト・モノの移動に関わる機能をワンストップでAPI形式で提供するサービスです。

下記のようにAWSのAPI GatewayやLambdaを駆使し、ルート情報やスポット情報などの様々な情報をJSON形式で返却しています。

画像4

・AWS WAF:アクセス制限 / 脆弱性対策など
・API Gateway:クライアント毎にレートリミットを設定
・Lambda:バリデーションチェック / コアテクノロジーへのアクセス
・DynamoDB:クライアント情報の格納

すでに70種類以上のAPIを提供しており、多くのお客様に様々なシーンでご活用いただいていますが、一方で「開発コストがかかってしまう」「導入まで時間がかかってしまう」といったお声もいただいていました。

Widget APIの誕生

そこで生まれたのが、NAVITIME Widget API です。
近年はコストを抑えた開発が可能なローコード/ノーコード開発が注目されていることもあり、Web画面付きのAPIを提供することに決めました。

また「交通費計算機能を手軽に自社システムに組み込みたい!」といったお客様からのご要望を多くいただいていたため、まずは交通費計算 Widgetを開発することにしました。

APIの仕組みは至ってシンプルですが、いくつか工夫したポイントをご紹介します。

ポイント1 最小限の開発コストで導入が可能

従来のJSON形式ではなく、HTML形式のルート検索画面をレスポンスとして返却し、ルート検索の操作及び検索結果の取得ができるようにしています。
NAVITIME APIの内部(Python)では、下記のようにレスポンス用のクラスを定義しており、様々な形式のレスポンス返却を想定して設計していたため、柔軟に対応することができました。

# JSON用のレスポンスクラス
class JsonResponse:
   def __init__(self, content):
       self.content = content
       self.headers = {
           'Content-Type': 'application/json'
       }

   def create_body(self):
       return json.dumps(self.content, cls=DecimalEncoder, ensure_ascii=False)

# PNG用のレスポンスクラス     
class ImagePngResponse:
   def __init__(self, content):
       self.content = content
       self.headers = {
           'Content-Type': 'image/png'
       }

   def create_body(self):
       return base64.b64encode(self.content).decode('utf-8')

# HTML用のレスポンスクラス 
class TextHTMLResponse:
   def __init__(self, content):
       self.content = content
       self.headers = {
           'Content-Type': 'text/html'
       }

   def create_body(self):
       return self.content

また、ルート検索の結果をお客様側の呼び出し元画面に返却できるようになっているため、ルート検索画面で任意のルートを検索し「結果を取得」をクリックすることで、お客様側のサイトにルート検索の結果を取り込むことができます。

お客様側のサイトに対して少しつなぎ込みを行うだけで、カンタンに交通費計算機能の導入ができるようになりました。

画像3

ポイント2 Web画面の背景/パーツの色を変更可能

お客様側のサイトでルート検索画面を表示していただく想定のため、ルート検索画面のデザインを変更したいといったニーズが考えられます。
そこで、Widget APIをリクエストする際にカラーコードを指定し、画面の背景やパーツの色を自由に変更できる仕組みを実現しました。

画像2

ポイント3 豊富な検索パターン

ルート検索の際に出発地や目的地を設定する必要がありますが、駅やバス停だけでなく、住所や緯度経度の設定も可能です。
「自宅から会社」「会社から訪問先住所」など、様々な利用シーンに合ったルート検索が可能です。

画像3

その他、検索結果の表示順序として所要時間/乗換回数/運賃を指定できたり、新幹線や有料列車などの使用路線を選択することができ、利用シーンに合わせて機能を最適化することができます。

今後の取り組みについて

今回は交通費計算機能に焦点を当てて開発を行いましたが、他にも従来のAPIだけでは実装コストが高い機能を対象に、Web画面付きのAPI提供を進めていく予定です。

NAVITIME APIのWeb仕様書に、当APIを利用したサンプル実装を掲載しておりますので、ご興味がある方はぜひそちらもご覧ください!