5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

位置情報アプリに使用できるHEREロケーションサービス利用入門(まとめ記事)

Last updated at Posted at 2023-08-22

はじめに

HEREでエンジニアをしておりますkekishidaと申します。
本記事ではHEREロケーションサービス利用入門ということで、HERE公式のチュートリアルページについて紹介したいと思います。

まずは、拙記事ですが、これまでにいくつかのHEREロケーションサービスに関する記事を投稿しました。例えば、Maps API for Javascript関連では、

REST API (Route Matching API)では、

いくつかの記事について、多くの皆様にご関心を持って頂けたようですが、更にHEREロケーションサービス製品群を理解するために、詳細が記載されているHERE公式のDeveloper guide以外に公式のチュートリアル記事となるものはないか?というニーズがありました。(以下はDeveloper guideのリンクです。)

実は、以下のような公式チュートリアルまとめページが存在します。

こちらは全て英語によるチュートリアルですが、様々なノウハウが散りばめられています。英語に抵抗感がない方は、ぜひ、こちらのチュートリアル群を参考にすることをお勧めしますが、本記事では、HEREロケーションサービス利用の導入部分をお助けすることを目的とし、2つの公式チュートリアルをピックアップし、その解説を行なっていきたいと思います。それでは、本題に入っていきます。

HERE Maps API for Javascript

以下は、日本マーケット向けに記載されたHERE Maps API for Javascriptのチュートリアル記事です。

JSFiddleを使用して、紹介されているコードを試してみたいと思います。まずは、Pre-Reqsに以下のように記載されおてりますが、
image.png
developer.here.comへの登録のみで、日本詳細地図を表示することは可能ですので、ご安心ください。HERE無料アカウント有効化手順については、以下のページが参考になります。

JSFiddleによるテスト

それでは、jsfiddle.netを開きます。

チュートリアルページの最後のコードスニペットをコピーし、jsfiddleのHTMLフィールドにペーストします。
image.png
更に、取得したAPIKEYをこちらの{YOUR_API_KEY}から書き換えます。
image.png
Runボタンを押すことにより右下にチュートリアルの題材の地図が表示されます。非常に簡単に試せますね。
image.png
ちなみに、HEREが提供する日本向けの地図情報について日々進化しています。こちらはこのチュートリアルページ作成時(2020/10/11)の東京駅付近の地図となります。
image.png
現在(執筆時 2023/8/17)ではより詳細でかつ見易い地図へと進化しています。
image.png

REST API

REST APIについても、いくつかチュートリアルページは存在していますが、先ほど紹介しましたチュートリアルまとめページよりも、各プロダクトのDeveloper guide上の"Tutorials"を参考にすることで、より実践的にAPIをトライすることが可能です。
image.png
今回は、ピックアップする"Tutorials"のサンプルとして、HERE Traffic API v7を使用します。

HERE Traffic API v7

以下のチュートリアルは、HERE Traffic API v7のためのものです。HERE Traffic API v7は緯度経度情報をベースに、リアルタイムの渋滞情報などを提供するAPIです。

日本向けの緯度経度情報を使用して、紹介されているコードを試してみたいと思います。まずは"Tutorials"で紹介されているEndpointなのですが、
image.png

こちらに記載されているlocationReferencing=olrではなくlocationReferencing=shapeを使用します。更にAPI_KEY部分については取得しましたAPIKEYに置き換えます。また、緯度経度情報を東京駅(35.68026,139.76744)に置き換えてみましょう。

curl "https://data.traffic.hereapi.com/v7/flow?in=circle:35.68026,139.76744;r=500&locationReferencing=shape&apiKey=$API_KEY"

こちらのリクエストの意味は、東京駅を中心とした半径500mエリアのリアルタイム渋滞情報の取得となり、以下のようなJSONデータが返送されます。

HERE Traffic API v7 Response
{
  "sourceUpdated": "2023-08-17T09:48:40Z",
  "results": [
    {
      "location": {
        "length": 890,
        "shape": {
          "links": [
            {
              "points": [
                {
                  "lat": 35.67403,
                  "lng": 139.76076
                },
                {
                  "lat": 35.67413,
                  "lng": 139.76086
                }
              ],
              "length": 14
            },
            {
              "points": [
                {
                  "lat": 35.67413,
                  "lng": 139.76086
                },
                {
                  "lat": 35.67416,
                  "lng": 139.7609
                },
                {
                  "lat": 35.67423,
                  "lng": 139.76094
                },
                {
                  "lat": 35.67441,
                  "lng": 139.761
                },
                {
                  "lat": 35.67467,
                  "lng": 139.76108
                },
                {
                  "lat": 35.67486,
                  "lng": 139.76114
                }
              ],
              "length": 86
            },
            {
              "points": [
                {
                  "lat": 35.67486,
                  "lng": 139.76114
                },
                {
                  "lat": 35.67529,
                  "lng": 139.76128
                }
              ],
              "length": 50
            },
            {
              "points": [
                {
                  "lat": 35.67529,
                  "lng": 139.76128
                },
                {
                  "lat": 35.6757,
                  "lng": 139.76141
                },
                {
                  "lat": 35.67596,
                  "lng": 139.7615
                },
                {
                  "lat": 35.6761,
                  "lng": 139.76155
                }
              ],
              "length": 93
            },
            {
              "points": [
                {
                  "lat": 35.6761,
                  "lng": 139.76155
                },
                {
                  "lat": 35.67654,
                  "lng": 139.76168
                },
                {
                  "lat": 35.6768,
                  "lng": 139.76176
                },
                {
                  "lat": 35.67698,
                  "lng": 139.76182
                },
                {
                  "lat": 35.67713,
                  "lng": 139.76188
                }
              ],
              "length": 118
            },
            {
              "points": [
                {
                  "lat": 35.67713,
                  "lng": 139.76188
                },
                {
                  "lat": 35.67726,
                  "lng": 139.76193
                },
                {
                  "lat": 35.67746,
                  "lng": 139.762
                },
                {
                  "lat": 35.67772,
                  "lng": 139.76208
                },
                {
                  "lat": 35.67798,
                  "lng": 139.76217
                },
                {
                  "lat": 35.67819,
                  "lng": 139.76224
                }
              ],
              "length": 122
            },
            {
              "points": [
                {
                  "lat": 35.67819,
                  "lng": 139.76224
                },
                {
                  "lat": 35.67831,
                  "lng": 139.76228
                }
              ],
              "length": 15
            },
            {
              "points": [
                {
                  "lat": 35.67831,
                  "lng": 139.76228
                },
                {
                  "lat": 35.67881,
                  "lng": 139.76244
                },
                {
                  "lat": 35.67908,
                  "lng": 139.76253
                },
                {
                  "lat": 35.67934,
                  "lng": 139.76261
                },
                {
                  "lat": 35.67958,
                  "lng": 139.76269
                }
              ],
              "length": 145
            },
            {
              "points": [
                {
                  "lat": 35.67958,
                  "lng": 139.76269
                },
                {
                  "lat": 35.6801,
                  "lng": 139.76286
                },
                {
                  "lat": 35.68036,
                  "lng": 139.76295
                },
                {
                  "lat": 35.68062,
                  "lng": 139.76304
                }
              ],
              "length": 120
            },
            {
              "points": [
                {
                  "lat": 35.68062,
                  "lng": 139.76304
                },
                {
                  "lat": 35.68102,
                  "lng": 139.76317
                },
                {
                  "lat": 35.68115,
                  "lng": 139.76322
                }
              ],
              "length": 62
            },
            {
              "points": [
                {
                  "lat": 35.68115,
                  "lng": 139.76322
                },
                {
                  "lat": 35.68157,
                  "lng": 139.76335
                },
                {
                  "lat": 35.68172,
                  "lng": 139.7634
                }
              ],
              "length": 65
            }
          ]
        }
      },
      "currentFlow": {
        "speed": 3.0555556,
        "speedUncapped": 3.0555556,
        "freeFlow": 5.555556,
        "jamFactor": 8.1,
        "confidence": 0.95,
        "traversability": "open",
        "subSegments": [
          {
            "length": 362,
            "speed": 4.7222223,
            "speedUncapped": 4.7222223,
            "freeFlow": 5.555556,
            "jamFactor": 1.5,
            "confidence": 0.95,
            "traversability": "open"
          },
          {
            "length": 136,
            "speed": 1.388889,
            "speedUncapped": 1.388889,
            "freeFlow": 5.555556,
            "jamFactor": 8.1,
            "confidence": 0.95,
            "traversability": "open"
          },
          {
            "length": 392,
            "speed": 3.0555556,
            "speedUncapped": 3.0555556,
            "freeFlow": 5.555556,
            "jamFactor": 8.1,
            "confidence": 0.95,
            "traversability": "open"
          }
        ]
      }
    },
:
:
:


おまけ

こちらはおまけとなりますが、HERE Traffic API v7の結果を地図上に表記するために、拙記事でも紹介しましたPython Data SDKをベースにJupyter notebookを使用すれば、

以下のように、容易にリアルタイム渋滞情報などを地図上で表現することも可能となります。
image.png

おわりに

いかがでしたでしょうか?以上のような要領でHERE公式のチュートリアルを参照しながら、HEREが提供する様々なロケーションサービスをお試しすることが可能となります。今回、HERE Traffic API v7の解説についてはあっさりした内容となってしまいましたが、こちらについてはまた別の機会に記事として投稿したいと思います。ここまで読んでいただきましてありがとうございました!

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?