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

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

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

https://qiita.com/kekishida/items/c49df325fe4e32c9aac0

**REST API** (Route Matching API)では、

https://qiita.com/kekishida/items/e261f3c4c076b0425e0a

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

https://developer.here.com/documentation

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

https://developer.here.com/tutorials

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

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

https://developer.here.com/tutorials/js-map-for-japan/

JSFiddleを使用して、紹介されているコードを試してみたいと思います。まずは、Pre-Reqsに以下のように記載されおてりますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/bc41eccc-05f5-2779-e947-2cbe001d1e50.png)
developer.here.comへの登録のみで、日本詳細地図を表示することは可能ですので、ご安心ください。HERE無料アカウント有効化手順については、以下のページが参考になります。

https://qiita.com/kekomat/items/d2e29bac84a27c1ec521

## JSFiddleによるテスト
それでは、jsfiddle.netを開きます。

https://jsfiddle.net

チュートリアルページの最後のコードスニペットをコピーし、jsfiddleのHTMLフィールドにペーストします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/68a4b368-976a-30d1-6a44-eaa25a716d0d.png)
更に、取得したAPIKEYをこちらの`{YOUR_API_KEY}`から書き換えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/1102f32f-f05f-b5fc-605a-4d551661b458.png)
Runボタンを押すことにより右下にチュートリアルの題材の地図が表示されます。非常に簡単に試せますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/1b9e3f1b-d33e-7e20-7c69-50951bf268ed.png)
ちなみに、HEREが提供する日本向けの地図情報について日々進化しています。こちらはこのチュートリアルページ作成時(2020/10/11)の東京駅付近の地図となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/573d2212-5bb4-7931-c120-e40d07b55459.png)
現在（執筆時 2023/8/17)ではより詳細でかつ見易い地図へと進化しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/0513c023-237f-3fda-60f0-cdecf3dc656c.png)

# REST API
REST APIについても、いくつかチュートリアルページは存在していますが、先ほど紹介しましたチュートリアルまとめページよりも、各プロダクトのDeveloper guide上の"Tutorials"を参考にすることで、より実践的にAPIをトライすることが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/435eb1df-c60a-0a69-f387-f08ac0be1e4b.png)
今回は、ピックアップする"Tutorials"のサンプルとして、HERE Traffic API v7を使用します。

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

https://developer.here.com/documentation/traffic-api/dev_guide/topics/use-cases/flow.html

日本向けの緯度経度情報を使用して、紹介されているコードを試してみたいと思います。まずは"Tutorials"で紹介されているEndpointなのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/3c592500-9a36-0a87-6b75-037659a5f775.png)

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

```bash
curl "https://data.traffic.hereapi.com/v7/flow?in=circle:35.68026,139.76744;r=500&locationReferencing=shape&apiKey=$API_KEY"
```
こちらのリクエストの意味は、東京駅を中心とした半径500mエリアのリアルタイム渋滞情報の取得となり、以下のようなJSONデータが返送されます。
```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を使用すれば、

https://qiita.com/kekishida/items/872a95079503ff36b544

以下のように、容易にリアルタイム渋滞情報などを地図上で表現することも可能となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3104985/f39aaeef-0aff-a9ef-6728-29c425c29cd5.png)

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