CRM Analyticsにてカスタム地図機能の活用


画像を活用してデータフィルタリングを行う際、Salesforce CRM Analytics（CRMA）のカスタムマップ機能は最適なソリューションです。 CRMAのカスタムマップ機能を使えば、マップを活動することができるだけでなく、さまざまな画像を利用してデータを視覚化することも可能です。

ここで紹介するいくつかの例をご覧ください：

1. スタジアム座席管理ダッシュボード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/2edeb2d5-11ff-caea-a2bb-fd268e1def78.png)
2. 自動車製品生産管理ダッシュボード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/157e0f6f-8cab-0bf6-7e07-e7bb2b48c1c3.png)



これらの例は、CRMAのカスタムマップ機能がどのようにしてビジネスの特定のニーズに合わせてカスタマイズ可能であるかを示しています。画像を利用することで、データをより直感的に理解し、意思決定を迅速に行うための洞察を提供することができます。

---

このブログでは、このようなダッシュボードを作成する方法を説明します。

#### 主なステップは以下の通りです：
* 画像のgeoJSONファイルの準備
    + まずは、画像からDXFファイルを生成
    + その後GeoJSONファイルに変換するプロセスを行い
    + 変換が完了したら、GeoJSONファイルの属性を編集して、CRMAにインポートする準備

* geoJSONファイルをアップロードしてマップを作成する

    * 準備したgeoJSONファイルをSalesforce CRMAにアップロードし、カスタムマップを作成


## 具体的な作成手順：
### 1. 画像のgeoJSONファイルの準備
※GeoJSONファイルの作成方法を既にご存じの場合は、このセクションをスキップしてください。

#### 1.1 画像からDXFファイルの作成
+ **ツール**：Inkscape
+ **手順**：
    1.1.1. 画像ファイルを開く
    1.1.2. 画像をトレースしてエッジを抽出（「trace bitmap」機能を使用）
         ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/b52a426a-ca43-1b52-17ec-0195c49e1fd2.png)
     1.1.3. [Apply]を押した後、元の画像レイヤーを削除し、エッジレイヤーのみを保持
             ![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/a32624f8-df47-8849-c413-e26d082459f0.png)
            ![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/4ec79b7a-7a0c-0216-9267-19041c2ffbc0.png)
     1.1.4. DXFファイルとして保存
     [file]の「Save as」をクリックし、DXFファイルとして保存します。
     ![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/6f412a85-807b-a2fb-ee9e-537c0b79ab81.png)


#### 1.2 DXFからGeoJSONへの変換
+ **ツール**：QGIS
+ **手順**：
1.2.1. DXFファイルを開く（ベクターレイヤー<Vector>として）
。![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/30ecf622-f05e-f441-cab6-25812b6ad9bf.png)
1.2.2. 地理空間データから、エクスポートしたい線のレイヤーを選択します
1.2.3. GeoJSONとしてをエクスポート
![Screenshot 2024-03-11 at 11.36.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/19d8101b-6c26-ced3-33d4-d24c30ec9ee1.png)



#### 1.3 MapshaperでGeoJSONファイルの属性編集

+ **ツール**：Mapshaper（https://mapshaper.org ）
+ **手順**：
※手順を参考になる動画は[YouTube](https://www.youtube.com/watch?v=U7SwnjYm1mQ) で、05:51のタイムスタンプからご覧いただけます。
    1.3.1. Mapshaperにアクセスし、GeoJSONファイルを読み込む;[Console]をクリックします。 
 ![Screenshot 2024-03-11 at 11.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/076b404d-c58d-b6be-4970-77681626d3f9.png)
 1.3.2.［Console］で以下のコマンドを実行 
必要な部分のidを編集し終えた後、dissolve field=id を使用して、同じ id を持つフィーチャを一つに統合します。
 
 ![image (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/b91e4636-4449-8f43-b7d0-fbb6fb62f912.png)

①ポリゴンの生成
polygonsコマンドを使用して、線がつながっている場合に直接ポリゴンを生成します。これにより、地図上の特定の領域を表現するポリゴンが形成されます。

②ID属性の追加
each id=idコマンドを実行して、各ポリゴンに一意のIDを割り当てます。これは、後のステップで特定のポリゴンを簡単に識別し、操作するために必要です。右側の矢印をクリックし、「属性の編集」を選択して、必要な属性を追加します。

③データの統合
dissolve field=idコマンドを使って、同じIDを持つ図形を一つの図形にまとめます。これにより、重複や不要なデータを削除し、地図上での表示をより清潔かつ整理されたものにします。

④名前属性の追加

each name=nameコマンドにより、新たにnameの属性を生成し、各ポリゴンに名前を割り当てます。このステップでは、各地域やオブジェクトに対応する名前を入力し、地図上での識別を容易にします。

**注意**：必ず name を使用してください。それ以外の書き方では CRMA が認識できません。また、name 自体も正しく認識されません。

※すべてのデータにname属性を適用することが重要です。一部のデータにのみ適用すると、地図上に表示されないデータが発生する可能性があります。このため、each name=nameを使用するか、またはすべてのデータに適用するオプションを選択する必要があります。

例：
この例では7つのIDを作成し、名前を付けています。各ポリゴンの名前はCRMAのデータセットと同じにします。
![Screenshot 2024-03-11 at 11.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/d9280c0b-ea8f-116b-bb7a-f45a231d9766.png)

### 2. geoJSONファイルをアップロードしてマップを作成する
2.1 グラフの種別から地図を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/296e8dd4-a06f-d23f-98ee-b6b5237b92b4.png)
2.2 フォーマッティングの地図のセクションで「+」をクリックし、geoJSONファイルをアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/6e40e8fe-8c0f-f1af-0c3e-09deba90c3cd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/1b521321-15b8-ad90-a2e3-42160f609713.png)
2.3　「場所」を手順1.3.2で作成したGeoJSONの属性列として選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/a6b732e9-7d17-5b76-6557-2828b3070e01.png)


ダッシュボードの他のグラフを作成します。

完成図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672646/9b032375-4137-1275-165f-c4c8ec48ce31.png)



**参考資料**
+ Trailhead: [Create a custom map for CRM Analytics Charts](https://trailhead.salesforce.com/content/learn/projects/wave_charts_custom_map)
+ Youtube: [Custom Map Shapes](https://www.youtube.com/watch?v=U7SwnjYm1mQ)