GASで作るSPAダッシュボード
GASとHTML Serviceの応用
Google Apps Script（GAS）はスプレッドシートやドキュメントと連携し、業務自動化を実現する強力なツールです。HTML Serviceを組み合わせることで、GASから直接ブラウザ上にカスタムUIを表示できます。例えば、スプレッドシートのデータを取得し、ダイナミックに生成したフォームを表示してユーザーから入力を受け取るといったケースが典型的です。
以下は、GASでHTML Serviceを呼び出し、簡易フォームを表示するサンプルです。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setTitle('GASフォーム')
.setWidth(400)
.setHeight(300);
}
index.html では、google.script.run を使ってサーバー側の関数を呼び出し、データを送受信します。これにより、フロントエンドとバックエンドの連携がスムーズに行えます。
Chart.jsでデータ可視化
Chart.jsは軽量で柔軟なJavaScriptライブラリで、データを美しく可視化できます。GASで取得したスプレッドシートの数値をJSON形式で渡し、Chart.jsでグラフ化することで、リアルタイムに変化するデータを視覚的に把握できます。
サンプルコードは以下の通りです。
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: '売上',
data: [120, 150, 180],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}]
},
options: {}
});
このように、Chart.jsはHTML Service内でも簡単に組み込めるため、GASと組み合わせたダッシュボード構築に最適です。
Vue.jsとReactでSPAリッチUI
フロントエンドのSPA（Single Page Application）は、ユーザー体験を向上させるために不可欠です。Vue.jsとReactはそれぞれ独自のコンポーネントベースの開発手法を提供し、リッチUIを実現します。
Vue.jsでは、Vue.component を使って再利用可能なコンポーネントを作成し、v-bind でデータを双方向にバインドします。Reactでは、関数コンポーネントとフック（useState, useEffect）を組み合わせて状態管理を行います。
以下は、Vue.jsで簡易カードコンポーネントを作る例です。
Vue.component('data-card', {
props: ['title', 'value'],
template: `
{{ title }}
{{ value }}
`
});
Reactの場合は次のように書きます。
function DataCard({ title, value }) {
return (
<div className="card">
<h3>{title}</h3>
<p>{value}</p>
</div>
);
}
SPAのメリットは、ページ遷移が不要で高速なレスポンスを提供できる点です。GASと組み合わせる際は、google.script.run を非同期で呼び出し、データを取得してコンポーネントに渡す設計が一般的です。
管理画面とダッシュボード構築
管理画面は、業務データを一元管理し、操作性を高めるための重要なUIです。GASでデータを取得し、Chart.jsで可視化し、Vue.js/ReactでリッチUIを構築することで、完全なダッシュボードを実現できます。
実装の流れは次の通りです。
- GASでスプレッドシートからデータを取得し、JSONで返却。
- HTML Service内でVue.js/Reactをロードし、コンポーネントを初期化。
- 取得したJSONをコンポーネントに渡し、Chart.jsでグラフを描画。
- ユーザー操作（フィルタ、検索）に応じて再度GASを呼び出し、データを更新。
この構成により、管理者はリアルタイムで業務状況を把握でき、意思決定を迅速に行えます。さらに、SPAの特性を活かすことで、ページ遷移の遅延を排除し、スムーズな操作感を提供します。
コメント
コメントを投稿