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

Index

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

はじめに

今回は、amCharts 5 という描画ライブラリでカスタマイズビューに日本地図を表示し、
「オンラインワークショップにどの地域から何人参加しているか」を可視化します。

amCharts とは

ホームページ: https://www.amcharts.com
amCharts は表や地図を描画する JavaScript ライブラリです。
amCharts は商用ライセンスですが、ロゴが表示される無料版も使用可能です。
詳細は公式サイトをご確認ください。

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

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

フィールドの種類	フィールドコード	備考
文字列（１行）	氏名	※JavaScript内では使用しません
ドロップダウン	都道府県	都道府県名（例：東京都、大阪府、埼玉県、北海道、愛知県 etc.）
ドロップダウン	ワークショップ名	ワークショップ名（例：ワークショップA、ワークショップB、ワークショップC etc.） ※JavaScript内では使用しません

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

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

1. 一覧名を入力します。ここでは"mapView"とします。
2. 表示形式は「カスタマイズ」を選択します。
3. 一覧IDをコピーしておきます。
4. 「ページネーションを表示する」のチェックは外しておきます。
5. HTMLには、<div id="chartdiv"></div>のみ記載します。
   

JavaScriptとCSS

JavaScript

以下をコピーしてJavaScriptファイルとして保存します（ファイル名はsample.jsとします）。
※コード内の{一覧ID}には、カスタマイズビューを作成時に記録した一覧 ID を設定します。

CSS

以下をコピーしてCSSファイルとして保存します（ファイル名はsample.cssとします）。

JavaScript / CSSでカスタマイズ

kintone REST API Client、amCharts 5 のライブラリおよび JavaScript プログラムおよび CSS スタイルシートを設定します。

• PC用のJavaScriptファイル
• https://js.cybozu.com/kintone-rest-api-client/3.2.3/KintoneRestAPIClient.min.js
• https://cdn.amcharts.com/lib/5/index.js
• https://cdn.amcharts.com/lib/5/map.js
• https://cdn.amcharts.com/lib/5/themes/Animated.js
• https://cdn.amcharts.com/lib/5/geodata/japanHigh.js
• sample.js（前述のコードをアップロード）
• PC用のCSSファイル
• sample.css（前述のコードをアップロード）

コードの解説

kintone REST API Client の getAllRecords() メソッドで絞り込み条件に合ったレコードを全件取得します。

取得した records の都道府県フィールドごとの参加人数を計算します。合計値などを計算する時によく使われる reduce() メソッドを使って集計しています。

この処理で都道府県ごとの参加人数(prefCounts)は以下のように計算されます。

地図上にプロットするデータ(geoJSONData)を作ります。

この処理でgeoJSONDataは以下のようになります。

地図のgeoJSONプロパティにgeoJSONDataを入れて、マーカーのサイズや色、ツールチップの設定をします。

ツールチップの{name}や{participants}は、geoJSONDataのproperties内のプロパティです。

動作の確認

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

カスタマイズビュー名「mapView」を選択します。
以下のように日本地図が表示されれば成功です。マーカーにカーソルを合わせると都道府県名および参加者数が表示されます。
ワークショップ名で絞り込むこともできます。

おわりに

今回は、amCharts 5 というグラフ描画ライブラリを使い、都道府県の緯度経度情報とレコードの情報を関連付け、日本地図上に参加者数情報を表示しました。
このように、カスタマイズビューとグラフ描画ライブラリを組み合わせて、kintoneアプリのレコードをいろいろな形で表現できます。
例えば、予算配分を可視化できるカスタマイズを紹介する記事、「amChartsのTreemapを使って、予算配分を可視化してみよう！」もありますので、興味がある方ぜひご確認ください。

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