カスタマイズビューで amCharts 4 を使って日本地図を表示してみよう！

（Author : Fuji Business International Mamoru Fujinoki）

Index

• はじめに
• amChartsとは
• ワークショップアンケートアプリの作成
• カスタマイズビューの作成
• サンプルコードの作成
• 動作の確認
• コードの解説
• 参照サイト
• おわりに

はじめに

今回は、一覧画面のカスタマイズビュー（カスタマイズ形式の一覧）で amCharts 4 という描画ライブラリを利用して日本地図を表示します。
例えば、オンラインワークショップを行っているチームで kintoneの「アンケートアプリ」でアンケートを取った時に、参加者がどの地域から参加しているかを把握したい場合はありませんか？
amCharts 4 の Map で日本地図を描画して可視化することで、どの地域からどういった評価を得ているかをわかりやすく管理することが可能になります。

amCharts とは

ホームページ: https://www.amcharts.com
amCharts はチャートやマップの描画によってデータを可視化する JavaScript ライブラリです。
本記事では amCharts 4 を利用していますが、最新版は amCharts 5 です。
amCharts は商用ライセンスのため、ご購入のうえご利用ください。チャートの隅にロゴが表示される制限付きで無料版を使用することも可能です。
詳細は公式サイトをご確認ください。

ワークショップアンケートアプリの作成

以下の画像とフィールドの設定情報を参考に kintone でアプリを作成します。

フィールドの種類	フィールド名	フィールドコード	項目
文字列（１行）	名前	name
ドロップダウン	どこから参加している？	city	都道府県名（例：東京都、大阪府、埼玉県、北海道、愛知県 etc.）
ドロップダウン	参加ワークショップ	workshop_name	ワークショップ名（例：ワークショップA、ワークショップB、ワークショップC etc.）

カスタマイズビューの作成

アプリの設定の一覧タブより、一覧を追加します。

以下の画像を参考にカスタマイズビューを設定します。

1. 適当な一覧名を入力します。
2. 表示形式は、「カスタマイズ」を選択します。
3. この画面で、一覧IDがアサインされますので、記録しておきます。
4. 「ページネーションを表示する」のチェックは外しておきます。
5. HTMLには、<div id="mapdiv"></div>のみ記載し、地図を表示するコンテナーのみ設定します。

以上の設定を保存すれば、完了です。

サンプルコードの作成

以下を参考にサンプルコードを作成します。11 行目の{一覧ID}には、カスタマイズビューを作成時に記録した一覧 ID を設定します。

また、地図を適正に表示するため、以下の CSS スタイルシートを設定します。

動作の確認

まず、以下の画像を参考にサンプルデータを追加してください。

次に以下の画像を参考に amCharts 4 のライブラリおよび先ほど作成した JavaScript プログラムおよび CSS スタイルシートを設定します。
以下が amCharts 4 ライブラリの CDN の URL です。

• https://cdn.amcharts.com/lib/4/core.js
• https://cdn.amcharts.com/lib/4/charts.js
• https://cdn.amcharts.com/lib/4/maps.js
• https://cdn.amcharts.com/lib/4/geodata/japanLow.js

設定を保存後、アプリを更新し、一覧で上記で作成したカスタマイズビュー名「Map View」を選択します。
以下のように日本地図が表示されれば成功です。マーカーにカーソルを合わせると都道府県名および参加者数が表示されます。

コードの解説

レコード一覧イベントで一覧の View ID をチェックしています。作成したカスタマイズビュー以外では処理をスキップしています。

こちらでは、カスタマイズビューの「mapdiv」の要素に Map Chart (地図)を表示するよう指定しています。

ここで、日本地図のポリゴンデータを設定しています。

日本地図の投影方法にミラー式を指定します。

地図の描画に座標データを用います。また、地図をクリックすると拡大する関数を呼んでいます。

地図内に描画するマーカーを定義しています。

マーカー用テンプレートの経度緯度とマーカーデータの配列の関連付けをしています。

kintone ワークショップアプリのレコードを取得し、マーカーの配列に都道府県の中心地の値(Geocode)および、都道府県名、参加者数を設定しています。
全てのレコードのマーカーの配列の設定が完了したら、マーカー用のインスタンスに配列データを割り当てます。

都道府県の中心のデータ（Geocode）は、 以下を利用しています。

参照サイト

• amCharts 5 Demo

おわりに

今回は、amCharts 4 というグラフ描画ライブラリを使って、日本地図を表示してみました。
amCharts のライブラリを利用すると様々なグラフやチャートを表示できるようになります。
kintone のカスタマイズビューで利用し、いろいろな業務アプリを可視化して、データをわかりやすく分析することが可能になります。

この Tips は、2022 年 3 月版 kintone で確認したものになります。