【GAS】スプレッドシート上の数値をマップチャートにしてWEBページに表示してみよう(2)～実装編～
Google Apps Script (GAS)を使ったちょっとしたTips（ヒント集）の一つとして、「Plotly.js」というJavaScript用ライブラリを利用した、マップチャートの作成方法を、以下の記事でご紹介しました。
今回は上記内容を実装するためのコードの紹介です。
本記事では実装コードをご紹介していますが、様々な理由により、この説明通りにいかない場合がしばしばあります。申し訳ありませんが、自己責任・自己解決でお進めくださるよう、お願いいたします。
GASによるプログラムはの内容は、小規模なグループ内での利用を想定しており、規模の大きな調理や商用での利用は想定しておりませんのでご注意下さい。
使用したGoogleスプレッドシート
以下がグラフ表示用のシートです。
何という事もない、デモ用の数値です。
マップチャートでマーカー表示をする場合、必要なデータは、
・国記号
・マーカーサイズ
・色の濃さ
の3つのデータのセットですが、それを表示しています。
例は何でも良かったのですが、ヨーロッパ各国の戦車保有台数・・・というちょっと物騒なデータを例にしてみました。
こちらから参照しています。
シート名は「データ」です。簡単なシートですが、以下のエクセルシートをスプレッドシートにインポートしてご利用頂けます。
利用の仕方ですが、まずPCにダウンロードしておきます。
そして、Googleドライブ上で、新規作成 ⇒ Googleスプレッドシート にてスプレッドシートを一旦新規作成しまず。名前は適当でかまいません。
このスプレッドシートにを開いて、ファイルメニューからダウンロードしておいたファイルを取り込むのが簡単かと思います。
スプレッドシートに取り込んだら、シート名が「データ」となっている事を確認の上、更にブラウザのヘッドラインから、スプレッドシートIDを確認しておいて下さい。
グラフを表示させるGASのコード
次に、上記の数値からグラフを表示させるコードのご紹介です。
Googleドライブで、新規作成 ⇒ その他 ⇒ google Apps Script を選択して、新しいプロジェクトを作っておきます。名前は適当でかまいません。
ここにコードを記入します。
スクリプトのコード
プロジェクトを開いたら、デフォルトで「コード.js」というスクリプトがあります。
この中身を、以下のコードにそっくり書き換えてください。
//---著作：particlemethod------------
//---無断複製・転載・配布を禁じます----
//---作成日：2022/07/01------------
//★★★★doGet関数はURLから呼び出された時に実行する関数｜１つだけ定義できます★★★★
function doGet(e) {
//アプリケーションを取得｜★スプレッドシートのID★は各自のものを記入
var myApp = SpreadsheetApp.openById('★スプレッドシートのID★');
//対象シートが無ければコピー
var mySheet = myApp.getSheetByName('データ');
//データ記録範囲として、行数と列数を記載
var nRow=mySheet.getLastRow();
var nCol=mySheet.getLastColumn();
//データ記録範囲を指定して範囲を取得
var myCells = mySheet.getRange(1,1,nRow,nCol);
//HTMLファイルのテンプレートをファイル名を指定して取得
var myHTML = HtmlService.createTemplateFromFile('INDEX');
//★★テンプレートに埋め込む変数値を指定する★★
myHTML.myCells = myCells.getValues();
myHTML.myRows = nRow;
myHTML.myCols = nCol;
//HTMLファイルをホスティング｜メタタグを指定してスマホ表示に対応
return myHTML.evaluate().addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}
★スプレッドシートのID★とある部分は、先に作成した各自のスプレッドシートのものに打ち替えて下さい。
テンプレートのコード
次に、先のスクリプトで表示させる「テンプレート」を作成します。
テンプレートは、プロジェクトの上の方にある「＋」マークをクリックして「HTML」を選択すると、作成できます。
名前は「INDEX．HTML」とします。
（スクリプトから呼び出すので、この名前は変でないで下さい）
このテンプレートに、GAS独自のHTMLコードを記載すると、これがWEBページとして参照できる様になります。
以下のコードをここに記載します。
<!-- ---著作：particlemethod------------
//---無断複製・転載・配布を禁じます----
//---作成日：2022/07/01------------->
<!DOCTYPE html>
<html>
<head>
<!-- Plotly.js のライブラリ-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- ★スプレッドシートのID★は各自のものを記入-->
<p>原本のデータは<a href= "https://docs.google.com/spreadsheets/d/★スプレッドシートのID★/edit?usp=sharing" >こちら</a></p>
<!---- テーブルタグとID名称宣言---ダミーのテーブル-->
<table id="TableBody" style="display:none">
<!---- テーブル作成 JavaScriptのインライン記述-【↓ここから】---->
<?
// GsValuesの各行 iRow に対して実行。myCellsはGASから渡される。
for(var iRow in myCells) {
// 各行を Row に代入
var Row = myCells[iRow];
// 行頭タグ 「tr」｜タグは ？＞・・・＜？で挟む
?><tr><?
// カレント行の 各列 iCol に対して実行
for(var iCol in Row) {
// 該当行の 各列 iCol をCellに代入
var Cell = Row[iCol];
?><td><?=Cell ?></td><?
}
?></tr><?
}
?>
<!---- JavaScriptのインライン記述-【↑ここまで】---->
</table>
<!-- グラフを表示させる要素 -->
<div id="myPlot"></div>
<!---- テーブルの値の抽出--【↓ここから】---->
<script>
//テーブルの取得
var myTable = document.getElementById('TableBody');
//テーブルの行数、列数の宣言
var nRow = myTable.rows.length;
var nCol = myTable.rows[0].cells.length;
//テーブルの行数だけ要素のある配列を宣言
var myData = new Array(nRow);
//テーブルの列数だけ子要素を宣言
for (var iRow = 0; iRow < nRow; iRow++){
myData[iRow] = new Array(nCol);
}
//テーブルのrowsコレクションで行数を取得| 各行でループ
for (var iRow = 0 ; iRow < myTable.rows.length; iRow++) {
//iRow行のcellsコレクションで列数を取得| 各列でループ
for (var iCol=0 ; iCol < myTable.rows[iRow].cells.length; iCol++) {
//iRow行目のiCol列目のセルのテキスト値を取得
myData[iRow][iCol] =myTable.rows[iRow].cells[iCol].textContent;
}
}
//<!---- テーブルの値の抽出--【↑ここまで】---->
//国記号の配列：表の1列目
var myNation=[myData[1][0], myData[2][0], myData[3][0], myData[4][0]];
//サイズの数値の配列：表の2列目
var mySize=[+myData[1][1], +myData[2][1], +myData[3][1], +myData[4][1]];
//色の数値の配列：表の3列目
var myColor=[+myData[1][2], +myData[2][2], +myData[3][2], +myData[4][2]];
//グラフの定義
var trace = {
type: 'scattergeo',
mode: 'markers',
//マーカーを置く位置
locations: myNation,
marker: {
//マーカーのサイズ
size: mySize,
//マーカーの色
color: myColor,
cmin: 0,
cmax: 50,
colorscale: 'Greens',
//マーカーの色の凡例
colorbar: {
title: 'Some rate',
ticksuffix: '%',
showticksuffix: 'last'
},
//マーカーの輪郭線
line: {
color: 'black'
}
},
name: 'europe data'
};
var data = [trace];
// レイアウトの定義
var layout = {
// 地図の定義
'geo': {
'scope': 'europe',
'resolution': 25
}
};
// グラフの描画
Plotly.newPlot('myPlot', data, layout);
</script>
</body>
</html>
★スプレッドシートのID★とある部分は、先に作成した各自のスプレッドシートのものに打ち替えて下さい。
デプロイしてアクセスしてみよう
GASのコードを記載したら保存し、デプロイしてアクセスしてみてください。
こんなグラフが表示されましたでしょうか。（地図のサイズは、著者のスキル不足でまだ設定方法が良く分かっていません。本当はもっと大きくしたいのですが、ご容赦ください）
GASは、サーバの準備や、データベースの用意などをしなくても、手軽にデータと連動した動的なWEBページが作成できる、アマチュアに優しいプラットフォームです。
ささやかな利用例ですが、ご参考にして頂けましたら幸いです。
Google Apps Script(GAS)は、エクセルのVBAマクロの様なものですが、 動的なWEBページをできる作成できる点が、大きなメリットです。
この仕組みを利用すると、スプレッドシートをデータベースとみなしたWEBアプリを手軽に作成できます。
WEBアプリが作れると、どこからでも、どんな端末からでも書き込みできる帳簿や、掲示番などを自作できる様になります。
この便利な仕組みをご紹介するため、初心者のアマチュア向けに、スプレッドシートをデータベースとして利用した、GASによるWEBアプリについて、基本的な考え方や、実装手順について、初学者向けにまとめた書籍を作りました。
ごく基本的な内容だけ表していますが、WEB画面から、スプレッドシートをデータベースにして双方向で読み書きできるWEBアプリを作る事に絞ってまとめた資料は少ないと思います。ご興味の方はどうぞ。
書籍の内容については、以下の記事をご覧ください。目次などが記載されています。