Here API を贅沢な使い方してみた。w

本日は、ASIA OPEN DATA Hack a Thon! 2019　から参戦！

縁あって、東京ですけど、fukuoka.ex でElixirパターンマッチ！と叫んでるYOSUKENAKAO.meです。

最近は、日本ゲーミフィケーション協会を立ち上げたりと、プログラミング教育を楽しくする仕掛けづくりをしています。仲間募集中なので、是非、今の日本に一石を投じたい方はDMください。

また、fukuoka.exのpiacereさんが書かれたElixirのチュートリアルExcelから関数型言語マスター1回目：データ行の”並べ替え”と”絞り込み”
は非常に入りやすい教材なのでお勧めです。第７回まであるので、まだやっていない方は是非トライしてみてください。

---

ASIA OPEN DATA Hack a Thon!

Here APIを触ってみた！と言いたいだけの為の苦肉の策

さて、今回はASIA OPEN DATA Hack a Thon!にてメンターとして参加させて頂きました。
その際にスポンサーであるHereのAPIを利用すると賞金$1500が狙える！という事もあり、早速使いたい！

という参加者の声にお答えしてAPIを見ると、凄い沢山のAPIが揃っているので、期待大！

という事で触ってみたものの、なんと！日本の地図はまだ未対応！
でも日本市場を重視しだしたようなのでその辺は今後に期待することとして、簡単に使えそうなもので何か作って見ることにしました。

---

作ったもの

Destination Weather API

を利用して、地図に天気のアイコンを表示する。

---

　備忘録

せっかくなので、備忘録として雑コードを乗せておきます。

プロジェクトは、mix phx.new here　で作りました。
apiを呼び出すのに、smallexモジュールを追加
この辺りは、省略します。

まずは、環境変数にhere idとhere codeを入れておく

export HERE_API_id="xxxxxxx"
export HERE_API_code="xxxxxxx"

grepして確かめ

export -p | grep HERE

config.exに環境変数から取得するコードを記述

config.ex

# Import API
config :here, HereWeb.Endpoint,
hereid: System.get_env("HERE_API_id"),
herecode: System.get_env("HERE_API_code")

here.exに環境変数から取得したidとcodeを連結して、Json.get(domain,path)に利用する為のpathを
生成する

lib/here.ex

defp get_id do
    Application.get_env(:here,HereWeb.Endpoint)[:hereid]
  end

  defp get_code do
    Application.get_env(:here,HereWeb.Endpoint)[:herecode]
  end

  def get_here(location) do
    Enum.join(["/weather/1.0/report.json?product=observation&name=",location,"&app_id=", get_id(),"&app_code=",get_code()])
  end

index.html.eexで、leaflet.jsで日本地図を表示して、here APIから取得した天気情報を表示しました。

index.html.eex

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<%
domain = "https://weather.cit.api.here.com"
weather = Json.get(domain,Here.get_here("Tokyo"))
local = Map.get(weather,"observations")
[head | tail] = Map.get(local,"location")
city = Map.get(head, "city")
lat = Map.get(head, "latitude")
lng = Map.get(head, "longitude")
[ obs ] = Map.get(head,"observation")

url = Map.get(obs,"iconLink")
%>

<div id="map"></div>
<style>
  div#map{
    width: 100%;
    height: 500px;
  }
</style>

<script>
var t_std = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});

var map = L.map('map',{
  center: [<%= lat %>, <%= lng %>],
  zoom: 13,
  layers: [t_std]
});

var weatherIcon = L.icon({
    iconUrl: '<%= url %>',
    iconRetinaUrl: '<%= url %>',
    iconSize: [100, 100],
    iconAnchor: [25, 50],
    popupAnchor: [0, -50],
});

var mapMarker = L.marker([<%= lat %>, <%= lng %>], { icon: weatherIcon }).addTo(map);
var comment = '<%= city %>';
mapMarker.bindPopup(comment).openPopup();
</script>

---

　感想

here APIの数が多いので、色々と使ってみたい
早く、日本地図対応してくれないかなw