Pythonデータ活用の投稿<\/a>で作った「output_unpivotted.csv」をインポートしつつ、シート名を適当に「data」などと書き換えておきます。（※なおインポートは、左上メニューの「ファイル」から実行できます。）<\/p>![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_11.jpg\")
<\/p>
<\/p>
そして、スプレッドシートのアドレスバーに表示されたURLの反転させた部分がスプレッドシートのIDで、これがデータ連携に必要なのでコピーします。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_12.jpg\")
<\/p>
<\/p>
Google Apps Scriptに戻り、スプレッドシートと連携するために「SpreadsheetApp」オブジェクトを使っていい感じにコードを書きます。<\/p>
細かい話は割愛しますが、何をやっているかというと、シート上のデータを全て配列として取得して、上から順にHTMLのテーブルとして書き直している感じです。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_13.jpg\")
<\/p>
<\/p>
実際のコードはこんな感じです。<\/p>
\/\/アクセス時に実行する関数\r\nfunction doGet(e) {\r\n var html = getHtml(e);\r\n return HtmlService.createHtmlOutput(html);\r\n}\r\n\r\n\/\/画面に表示するHTMLを生成して返す関数\r\nfunction getHtml(e){\r\n \r\n \/\/スプレッドシートからデータを取得\r\n var spreadsheetId = '1fUtwY6MQ7ZKkzh8OYnnZIv0R3PWiUubzpjzkds4P9r8';\r\n var sheetName = 'data';\r\n var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);\r\n var data = sheet.getDataRange().getValues();\r\n \r\n \/\/HTMLを生成して返す\r\n var html = '';\r\n for (var iRow = 1; iRow < data.length; iRow++){\r\n html += '<tr><td>' + data[iRow].join('<\/td><td>') + '<\/td><\/tr>';\r\n }\r\n return '<table><tbody>' + html + '<\/tbody><\/table>';\r\n \r\n}<\/pre> <\/p>
さて、コードは書けたのですが、スプレッドシートと連携をするために承認処理を行う必要があります。上段の関数選択プルダウンから適当に「getHtml」などと選んで実行しようとすると「承認が必要です。」と出るので、「許可を確認」を選んで処理を進めます。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_14.jpg\")
<\/p>
<\/p>
「アカウントの選択」を促されるので、今回のGoogleアカウントを選びます。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_15.jpg\")
<\/p>
<\/p>
「このアプリは確認されていません」とな。。気にせずポップアップ左下の「詳細」を押します。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_16.jpg\")
<\/p>
<\/p>
気にせずスクロールして、一番下にある「安全ではないページに移動」を押します。（このあたり妙にセキュリティ厳しめです。<\/del>）<\/p>![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_17.jpg\")
<\/p>
<\/p>
「Googleアカウントへのアクセスをリクエストしています」と表示されるので、内容を確認しつつ、そのままスクロールします。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_18.jpg\")
<\/p>
<\/p>
スクロール先の右下に「許可」ボタンがあるので、押します。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_19.jpg\")
<\/p>
<\/p>
ようやく連携が完了したので、もう一度Webアプリの方にアクセスすると、スプレッドシートに取り込んでいたデータがそのまま画面に表示されました。これにてスプレッドシートとのデータ連携は成功です。（※いろいろと面倒なので、これ以降は開発環境の方にアクセスします。）<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_20.jpg\")
<\/p>
<\/p>
<\/span>3.Chart.jsでグラフを書く<\/span><\/h4>とうとう本番です。Chart.jsを使ってこのデータをグラフ化するために、もっとコードを書きます。一気にコードが増えます。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_21.jpg\")
<\/p>
<\/p>
実際のコードはこんな感じです。簡単にだけ書くと、取得したデータを連想配列に変えて、ハードコーディングした項目の順序に応じたデータ配列に変換し、Chart.jsに入れ込むパラメータを生成してJSON変換してJavaScriptとHTMLとを一緒に放り込む感じです。<\/p>
\/\/アクセス時に実行する関数\r\nfunction doGet(e) {\r\n var html = getHtml(e);\r\n return HtmlService.createHtmlOutput(html);\r\n}\r\n\r\n\/\/画面に表示するHTMLを生成して返す関数\r\nfunction getHtml(e){\r\n \r\n \/\/スプレッドシートからデータを取得して連想配列へ\r\n var spreadsheetId = '1fUtwY6MQ7ZKkzh8OYnnZIv0R3PWiUubzpjzkds4P9r8';\r\n var sheetName = 'data';\r\n var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName(sheetName);\r\n var recordList = sheet.getDataRange().getValues();\r\n var recordMap = {};\r\n for (var i = 1; i < recordList.length; i++){\r\n recordMap[recordList[i][0] + '_' + recordList[i][1] + '_' + recordList[i][2]] = recordList[i][3];\r\n }\r\n \r\n \/\/データの項目名を順序付きで定義\r\n var columnList = [\r\n '0~4歳','5~9歳','10~14歳','15~19歳','20~24歳','25~29歳','30~34歳','35~39歳',\r\n '40~44歳','45~49歳','50~54歳','55~59歳','60~64歳','65~69歳','70~74歳','75~79歳',\r\n '80~84歳','85~89歳','90~94歳','95~99歳','100歳以上'\r\n ];\r\n var dataSeriesList = [\r\n 'male','female'\r\n ];\r\n var colorList = [\r\n 'rgba(0,0,255,0.4)','rgba(255,0,0,0.4)'\r\n ];\r\n var yyyymm = e.parameter.yyyymm ? e.parameter.yyyymm : '201905';\r\n \r\n \/\/チャートの値を生成\r\n var data = {};\r\n data['labels'] = columnList;\r\n data['datasets'] = [];\r\n for (var iDataSeries in dataSeriesList){\r\n var dataList = [];\r\n for (var iColumn in columnList){\r\n dataList.push(recordMap[columnList[iColumn] + '_' + dataSeriesList[iDataSeries] + '_' + yyyymm]);\r\n }\r\n data['datasets'].push({\r\n 'label':dataSeriesList[iDataSeries],\r\n 'data':dataList,\r\n 'backgroundColor':colorList[iDataSeries],\r\n 'borderColor':colorList[iDataSeries],\r\n 'fill':'false',\r\n });\r\n }\r\n \r\n \/\/ライブラリに放り込むパラメータとして作成\r\n var parameters = {};\r\n parameters['type'] = 'line';\r\n parameters['data'] = data;\r\n \r\n \/\/css部分を作る\r\n var headerHtml = '<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.8.0\/Chart.min.css\" rel=\"stylesheet\">';\r\n \r\n \/\/body部分を作る\r\n var bodyHtml = '<p>Term=' + yyyymm + '<\/p>';\r\n bodyHtml += '<div style=\"width:1000px; height:800px;\"><canvas id=\"chart\"><\/canvas><\/div>';\r\n bodyHtml = '<body>' + bodyHtml + '<\/body>'\r\n \r\n \/\/JavaScript部分を作る\r\n var footerHtml = '<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/2.8.0\/Chart.min.js\"><\/script>';\r\n footerHtml += '<script>';\r\n footerHtml += 'var element = document.getElementById(\"chart\");';\r\n footerHtml += 'window.onload = function() {'\r\n footerHtml += 'var chart = new Chart(element,' + JSON.stringify(parameters) + ');';\r\n footerHtml += '};'\r\n footerHtml += '<\/script>';\r\n \r\n \/\/HTMLを返して終了\r\n return headerHtml + bodyHtml + footerHtml;\r\n \r\n}<\/pre> <\/p>
Webアプリにアクセスすると、こんな感じに表示されます。いい感じです。さらに、<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_22.jpg\")
<\/p>
<\/p>
しれっとURLにパラメータを設定しているので、URLの末尾に「?yyyymm=201812」なんてつけると、2018年12月のデータに切り替えることもできます。コード上でのパラメータの受け渡しは「e.parameter.パラメータ名」にて簡単にできるので、Google Apps ScriptのURLによる画面切り分け手段として有効ですね。<\/p>
![\"\"](\"http:\/\/takuminasuno.com\/wp-content\/uploads\/2019\/06\/gas_23.jpg\")
<\/p>
<\/p>
<\/span>4.まとめ<\/span><\/h4>ということで、「スプレッドシートのデータをGoogle Apps Scriptで読み込んで、HtmlService × Chart.jsでグラフを表示してみる」ということで、実例を踏まえつつ、ダイジェストにてお伝えしてみました。<\/p>
ダッシュボード的な観点で言うと、複数のデータソースをもとにして複数のチャートやテーブルを並べたり、jQueryを使ってプルダウンデザインのフィルター機能を実装したり、パラメータ指定で集計条件をコントロールできるようにしたり、場合によっては「google.<\/wbr>script.run.withSuccessHandler」を使ってサーバー側で集計した結果を非同期でクライアント側に戻して描画したり等、一通りのことは可能です。<\/p>まあ、Google Apps Script自体は一度の関数実行時間に制約があったりするのであんまり重負荷な処理を強いると返答なく反応が無くなる点に注意は必要ですが、普通に使っている分にはあまり問題にならないというのが実態です。<\/p>
そういったところも踏まえて、うまく現場発の業務改善プロトタイピングツールとして使ってみる分にはGoogle Apps Scriptは良いものだと思います、という言葉をもって今回は筆をおきたいと思います。<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
今回はキーワード盛り沢山なӟ […]<\/p>\n","protected":false},"author":1,"featured_media":12236,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[252],"tags":[],"class_list":["post-12239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business_ja"],"_links":{"self":[{"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/posts\/12239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/comments?post=12239"}],"version-history":[{"count":13,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/posts\/12239\/revisions"}],"predecessor-version":[{"id":12253,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/posts\/12239\/revisions\/12253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/media\/12236"}],"wp:attachment":[{"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/media?parent=12239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/categories?post=12239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takuminasuno.com\/ja\/wp-json\/wp\/v2\/tags?post=12239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}