はじめに
今回は、amCharts 5 という描画ライブラリでカスタマイズビューに日本地図を表示し、
「オンラインワークショップにどの地域から何人参加しているか」を可視化します。
amCharts とは
ホームページ: https://www.amcharts.com
amCharts は表や地図を描画する JavaScript ライブラリです。
amCharts は商用ライセンスですが、ロゴが表示される無料版も使用可能です。
詳細は公式サイトをご確認ください。
ワークショップアンケートアプリの作成
以下の画像とフィールドの設定情報を参考に kintone でアプリを作成します。
フィールドの種類 | フィールドコード | 備考 |
---|---|---|
文字列(1行) | 氏名 | ※JavaScript内では使用しません |
ドロップダウン | 都道府県 | 都道府県名(例:東京都、大阪府、埼玉県、北海道、愛知県 etc.) |
ドロップダウン | ワークショップ名 | ワークショップ名(例:ワークショップA、ワークショップB、ワークショップC etc.) ※JavaScript内では使用しません |
カスタマイズビューの作成
以下の画像を参考にカスタマイズビューを設定します。
- 一覧名を入力します。ここでは"mapView"とします。
- 表示形式は「カスタマイズ」を選択します。
- 一覧IDをコピーしておきます。
- 「ページネーションを表示する」のチェックは外しておきます。
- 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で確認したものになります。
記事に関するフィードバック
記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。