AODC2019でElixirでHERE API超入門した話 #Elixir

こんにちは。

今日、Asia Open Data Challenge 2019で出会った
HERE API( =HERE社が提供する地図API)に入門しました

Asia OpenData Challenge2019について知りたいかたは↓↓を参照くださいませmm

賞金 $3,500 - 4ヶ国で競うアジアのハック

アジアのハックということで海外の地図。
今回はタイのバンコクエリアで、使っていきたいと思います

入門の流れ

アカウントを登録
- Here社のdeveloper向けサイトはこちら
どんなAPIがあるのか確認
- HEREのドキュメント(こちら)を確認
- 提供されているAPIからいくつかピックアップして使ってみます
実際に使ってみる & 動かしてみる

まずは Hereのdeveloperアカウントを登録します。

任意のブラウザで Hereのdeveloeperサイトの開きます
- Hereのページがページが表示されます

右上のGET STARTED FOR FREE のボタンを押します。
- ↓↓ようなアカウント登録の画面が表示されます

アカウント登録画面に情報を入力します
- First Name(名) / Last Name(氏) / EMailに自身の情報を入力
- Passwordには、強固なパスワードを入力
- Country/regionは、適切な国を選択
- 私は日本国籍・日本在住なので Japan を選択しています
- Security Checkは画面に表示された文字列を適切に入力
一番下の Register for a HERE account ボタンを押すとアカウント登録されます
- ボタンを押す前に、Service Terms / Privacy Policyをちゃんと読みます
一番下の Register for a HERE account を押すとアカウント登録されます
EMail欄で入力したメールアドレス宛てに、 HEREからVeritifactionメールが届くのでCOnfirm、
- Welcome to HERE という件名でした

どんなAPIがあるのか確認してみる

HEREのドキュメントを確認する
大きく分けると以下の種類のAPIが紹介されています
- MAPS - Highly accurate maps, available worldwide
- SEARCH AND GEOCODING - Use latitude and longitude to search for addresses and POIs
- ROUTING AND NAVIGATION - From voice-guided pedestrian routing, to intermodal routing, to optimized truck routing
- FLEET TELEMATICS - Advanced location algorithms for complex fleet management use cases
- MORE APIS AND SDKS - More and more

実際に使ってみる & 動かしてみる

APIたくさんありますね。
まずは基本。ということで、一番基本に近そうな上から２つ↓↓を使ってみたいと思います
- MAPS
  - タイバンコク付近のインタラクティブな地図を表示
- SEARCH AND GEOCODING
  - タイバンコク近辺のランドマークを検索

これらのサンプルコードをひらすら写経

苦節すること2時間

無事入門できました！

地図上には、目標物のアイコンを表示しています。クリックすると(タイ語で目標物のラベルが表示される)

まとめ

無料で使えて素晴らしいHERE API。
途中様々苦戦したですが、なんとか、使うことができました
- INTERACTIVE MAPS - サンプルの通りにやったが地図が出ない
  - 翌日試したら表示されました！
- SEARCH AND GEOCODING - バンコク中心で検索すると、目標物のラベルもタイ語
  - 現地語以外にも対応しているのか..
残りのAPIに HERE の持ち味が隠されていそうなので、引き続き残りの部分も使ってみます！
- ROUTING AND NAVIGATION
- FLEET TELEMATICS

補足 (ジオコーディングの REST APIを叩くところだけ、構造が複雑だったので、コードの断片を残します)

SEARCH AND GEOCODING の reverse-geocode-landmarks のサンプルと合わせて参照
reverse-geocode-landmarks を呼び出すコード
- ElixirのHTTPoisonで実装しています-m

envs = Application.get_env(:iam_here, IamHere.Endpoint)

# HERE の reverse geocoder REST APIにリクエストを送信
http_response = HTTPoison.get!(
  "https://reverse.geocoder.api.here.com/6.2/reversegeocode.json", 
  "?app_id=" <> envs[:here_api_app_id] <> 
  "&app_code=" <> envs[:here_api_app_code] <> 
  "&mode=retrieveLandmarks" <>
  "&prox=13.72564,100.54106,1000")

# HERE の reverse geocoder REST APIのレスポンスをデコード
response_json = case http_response do
  %HTTPoison.Response{body: body, status_code: 200} ->  body | HTTPoison.decode!
  %HTTPoison.Error{reason: reason} -> raise "Oops, #{reason}"
end

landmarks = response_json |> Map.fetch!("Response") |> Map.fetch!("View") |> Enum.at(0) |> Map.fetch!("Result")

landmarksの中に、以下のような構造のデータ(Map型のリスト)が入った状態になるので、これを表示します

[
  {
  "Relevance": 1,
  "Distance": 55.9,
  "MatchLevel": "landmark",
  "MatchQuality": {
    "Country": 1,
    "County": 1,
    "City": 1,
    "District": 1,
    "Subdistrict": 1,
    "PostalCode": 1,
    "Name": 1
  },
  "Location": {
    "LocationId": "NT_EfXFH4vWxnBKXMwx7Ogo.D",
    "LocationType": "canalWaterChannel",
    "Name": "คลองสาทร",
    "DisplayPosition": {
      "Latitude": 13.72391,
      "Longitude": 100.53719
    },
    "MapView": {
      "TopLeft": {
        "Latitude": 13.72595,
        "Longitude": 100.53034
      },
      "BottomRight": {
        "Latitude": 13.72187,
        "Longitude": 100.54398
      }
    },
    "Address": {
      "Label": "ทุ่งมหาเมฆ, สาทร, กรุงเทพมหานคร 10120, ประเทศไทย",
      "Country": "THA",
      "County": "กรุงเทพมหานคร",
      "City": "กรุงเทพมหานคร",
      "District": "สาทร",
      "Subdistrict": "ทุ่งมหาเมฆ",
      "PostalCode": "10120",
      "AdditionalData": [
        {
          "value": "ประเทศไทย",
          "key": "CountryName"
        },
        {
          "value": "กรุงเทพมหานคร",
          "key": "CountyName"
        }
      ]
    },
    "MapReference": {
      "CountryId": "22888206",
      "CountyId": "22883206",
      "CityId": "22883206",
      "DistrictId": "22887252",
      "PlaceId": "1436108393"
    }
  }
}
]

AODC2019でElixirでHERE API超入門した話

入門の流れ

まずは Hereのdeveloperアカウントを登録します。

どんなAPIがあるのか確認してみる

実際に使ってみる & 動かしてみる

まとめ

補足 (ジオコーディング の REST APIを叩くところだけ、構造が複雑だったので、コードの断片を残します)

補足 (ジオコーディングの REST APIを叩くところだけ、構造が複雑だったので、コードの断片を残します)