位置情報を含むテレメトリーデータを地図上で俯瞰してみる

# TL;DR
オブザーバビリティプラットフォームであるNew Relicは、デジタルサービスから収集したテレメトリーデータを可視化・分析する提供することにより、サービスの信頼性向上やトラブル対応の迅速化を可能にしていますが、データの可視化の手段の一つに地図とシステムの位置情報を使って物理的な側面からシステムの状況を把握できる<strong>Map Widget</strong>というダッシュボード部品があります。

例えば、店舗内のシステムや店舗と連携したサービスを提供するシステム、モビリティサービスなど、物理的な位置も加味したり俯瞰してシステムの状況を把握することが場合によって必要となるシステムに有効なものなのでご紹介します。

# Map Widgetで何ができるの？
Map Widgetを使うとどんなことができるのかを端的に説明すると、下の画像のようなものを簡単に作ることができます。

![1_all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/31187233-4b7c-5493-046a-fdae50dfdb52.png)

もちろん日本の地図も出ます！
![japan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/776bd748-7c6f-1e4f-a07c-83e6c58076a1.png)


つまりは、データの位置情報に基づいて、その地点のステータスに応じたアイコンや補足情報を地図にマッピングするようなものです。

これにより、全体俯瞰しながら問題箇所を即座に把握することで、全地域に影響している問題が発生しているか、特定地点だけで発生しているのかを把握することができます。

例えば、店舗を持っているようなサービスの場合、特定店舗のPOSシステムだけに問題が生じているのか、POSシステムのバックエンドに障害が起きて全店舗に影響が起きているのか、そんなことを簡単に知ることができるでしょう。


# 試してみよう
### Map Widgetの有効化
New Relicでは様々なタイプのチャートをビルトインで提供していますが、今回説明するMap Widgetはデフォルトのチャートにはなく、「Custom Visualization」というアドオンのモジュールとして提供されるので、まずは有効化する必要があります。

まず、左メニュー「+ Add Data」で「Labs Widget Pack」を検索してアカウントで利用できるように有効にします。なお、有効にするために追加ライセンスを新たに購入する必要はありません。

![2_Labs Widget Pack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/6dd86a9a-48bd-5d38-e537-d342f83bd48b.png)


### Mapを作ってみよう
Map Widgetを有効化したのでMapに情報を出してみましょう。
まず、左メニュー「Apps」（Appsがメニューになければ「All Capabilities」からAppsを選択）を開き、Custom visualizationsを選びます。

![3_Custom viz.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/d0b2de43-969f-322b-97a8-1bed4c1af9db.png)



ダッシュボードで使えるカスタムのWidgetが多く出てきますので、「Map Widget」を選択します。

![4_Map Widget.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/57eb0439-afce-7472-12de-8a2bd0c5e923.png)


### Mapに情報を足してみよう
いよいよMapに情報を出していきます。仕組みをかいつまんで説明するとポイントは2つです。
- [NRQL（New Relic Query Language）](https://docs.newrelic.com/jp/docs/nrql/get-started/introduction-nrql-new-relics-query-language/)で表示したいデータの情報を取得。この情報には位置情報（経度、緯度）、および表示対象データ（例えば、アクセス数や応答時間、エラー率など）が含まれている必要があります。
- 表示対象データを位置情報を元に単に地図にマッピングするだけではなく、状態に応じて色やアイコンを変えたい場合に、変える条件（閾値）や色を指定します。例えば、特定店舗でエラー率が5%を超えたら赤くする、そんなイメージです。

では、実際の設定をみていきましょう。今回は最低限必要な部分のみ解説します。設定に関しては、かなり簡潔ですがリポジトリのドキュメントに解説があります。

:::note info
[Map Widgetの解説はこちら](https://github.com/newrelic/nr-labs-widget-pack/tree/main?tab=readme-ov-file#map-widget)
:::


![5_config_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/dc181f3f-fc69-f4a1-4a85-772d24e403c6.png)


1つ目、地図の可視化に利用するライブラリ/サービスの選択です（Map System）。デフォルトはLeafletになっていますので今回はこれを利用します。もう一つ、Map Boxも選ぶことができますが、これを利用する場合はMap Boxのアカウント作成とAccess Tokenの取得・設定が必要になります。


2つ目は、次にアカウントの選択です (Account ID)。これはデータが登録されているアカウントを選択してください。

3つ目は、最も重要なものでクエリ（NRQL）です (NRQL Queries)。位置情報や表示データを取得するためのクエリになります。

フォーマットの例は以下の通りです。

```sql:クエリのフォーマット (例)
FROM ① SELECT latest(②) as ‘name:③’, average(④) FACET ⑤ as 'lat', ⑥ as 'lng'
```
①: データが格納されたイベント名やMetric（例：PageView）
②: 地図上に表示するデータのラベルに対応した属性（例: city、カスタム属性で入れた店舗名など）。なお、latestで最新のものをとっていますがそれに限る必要はありません。
③: 表示上のラベルタイトル
④: 表示したり、閾値等によって色を変えたいデータに対応した属性（例：duration）
⑤: 緯度のデータが入っている属性（例：asnLatitude）
⑥: 経度のデータが入っている属性（例：asnLongitude）


これを踏まえると例えば以下のようなクエリがかけます。
これはRUM（ブラウザ監視）の機能が収集するPageViewイベントというデータを利用しています。PageViewイベントは、ユーザーによるページ表示の際の初期ページロードタイムなどが入っているものです。

```sql:クエリの例
FROM PageView SELECT latest(city) as 'name:City', max(duration) as 'duration' FACET string(asnLatitude, precision: 5) as 'lat', string(asnLongitude, precision: 5) as 'lng'
```

New Relicのブラウザエージェントが収集するPageViewイベントには、サイトにアクセスされた際のASNの緯度（asnLatitude）、経度（asnLongitude）の他に、都市の情報（city）やページロードタイム（duration）などがデータとして入っているので、都市ごとにその都市からサイトにアクセスした際のページロードを地図上に表示し、ページロードが遅い地域をハイライトする、そういうことができるクエリになっています。

なお、asnLatitudeやasnLongitudeには、小数で位置情報が入っていますが、そのままFACET句に指定すると整数になるので、string(asnLatitude, precision: 5)というように小数第5位まで取るようにしています。NRQLのstring関数については[公式ドキュメント](https://docs.newrelic.com/jp/docs/nrql/nrql-syntax-clauses-functions/#func-string)を参照してください。


また、今回利用しているPageViewイベントが持つ属性情報は、[公式ドキュメント](https://docs.newrelic.com/jp/attribute-dictionary/?event=PageView)に記載されていますのでこちらも参照してください。なお、今回は例としてブラウザエージェントが取得しているPageViewイベントを使っていますが、それに限る必要はなく、位置情報を持っていれば他のデータでも問題ありません。



さて、クエリが正しく書かれると、地図にデータがマッピングされます。下の図がその例です。データに入っている位置情報に基づいてアイコンが表示されているのがわかります。

![6_map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/be792319-02f0-3ac3-5d39-2565754c759b.png)



### Mapのアイコンを条件によって変えてみよう
次に条件（データの値）に応じてアイコンや色を変えてみます。

![7_config_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/b2283a32-d367-6c95-b1dc-94caabe6bdde.png)


大事なのは3つです。
１つ目は、どの属性の値を条件にするかです。この例では、ページロードタイムを表すdurationを指定しています。

2つ目は、色やアイコンを変える際の条件です。今回は、最大ページロードタイムが1.5secの時に色を変えてみます。

3つめは色です。今回は問題が起きていることがわかりやすいように赤くしてみます。色を変えるのではなくアイコンを変えたり、アイコンをクリックした時にジャンプするページを買えたりもできます。

条件が正しく設定されると、地図に反映されます。これで、どの地域で異常な問題が発生しているかがわかるようになります。例えば、特定店舗で問題が起きているかなどわかるようになります。


![8_map_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/48f58b69-d2e8-77b0-ad5d-b48fe1bcfc28.png)



### ダッシュボードに追加してみよう
完成したらダッシュボードに貼るだけです。「Add to a dashboard」ボタンをクリックし、新しいダッシュボードかもしくは既存のダッシュボードに貼って他の情報と一緒に見ることができるようになります。

![9_add_to_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/b2326fb0-2be2-4156-75bf-b1a983f9feb2.png)


違う種類のチャートと組み合わせて情報を捕捉したりすると、より状況の把握しやすいダッシュボードにすることができますね。

![10_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535230/be0d7fe8-dd7d-6453-b07b-8614eed2c73d.png)


# まとめ
今回は、位置情報を持つデータを地図にマップすることで全体俯瞰しながら問題となっている地域や店舗、もしくは移動体を把握できるMap Widgetを試してみました。実店舗を持つ小売や物流、モビリティサービスなどで活用できるのではないかと思います。


:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::



なお、今回ご紹介したMap Widgetを含む「Labs Widget Pack」という可視化モジュールは「[New Relic One Catalog](https://opensource.newrelic.com/oss-category/#new-relic-one-catalog-project)」というオープンソースのプロジェクトとして管理されており、コミュニティによってメンテナンスされています。不具合のレポートなどはサポートチケットではなく、GithubのIssueとして登録する必要がある点ご了承ください。

また、本Map Widgetは執筆時点（2024年5月）のスペックを元に記載しています。今後スペックが変わりうることご了承ください。