cybozu developer network

カテゴリー内の他の記事

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

Index

はじめに

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

mceclip0.png

amCharts とは

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

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

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

mceclip0-1.png

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

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

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

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

mceclip1.png

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(前述のコードをアップロード)

mceclipjscss.png

コードの解説

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

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

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

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

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

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

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

動作の確認

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

mceclip2.png

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

mceclip4.png

おわりに

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

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。