【GAS】直近2週間の支出がリンク付き棒グラフで自動表示される家計簿アプリ・・・クリックすると日別の帳票が開いて便利！(解説編1）テンプレートでCANVAS要素を使って図形を表示する

Particlemethod

2024年1月28日 06:47

Googleスプレッドシートは、Googleが無料で提供しているクラウド上の表計算アプリです。

エクセルなどスタンドアロンで稼働するアプリと違い、WEBベースのため、どこからでもアクセスでき、グループでの共同作業も容易です。

また、Googleスプレッドシートに、Google Apps Scriptを上手く組み合わせる、簡易なWEBアプリとして利用できると点も大きなメリットです。

WEBアプリは、ブラウザさえあればスマートフォンなど自由な端末から利用できるので、これがアマチュアでも自作できることは非常に重要な点かと思います。

ーーーーー

GASで作るWEBアプリは、「テンプレート」と呼ばれるモジュールに、WEBページ用の装飾付き文書であるHTMLテキストと、ブラウザ用のマクロ言語であるJavaScriptを記載し、これをブラウザで表示させるというものです。

通常のWEBページと異なり、GASのテンプレートには、スプレッドシートなど、Googleドライブ上のデータと連携できるのが大きな特長です。

ところで、HTMLテキストというと、地味なテキストベースのWEBページしか作成できない印象がありますが、＜CANVAS＞要素を使うと、図形を扱うことができます。

そこで、GASで作ったWEBアプリに、さらに日別の集計結果を棒グラフで表示させるWEBアプリの例をご紹介しました。

長い名前ですが「直近2週間グラフ目次付き　家計簿アプリ」と題することにしました。

今回の記事では、テンプレート内のHTMLテキストで、上記のグラフを実装する手順についてご説明します。

HTML文書における図形の表現

HTML文書は、ブラウザ上で文書を表示させる為の、いくつかの装飾情報を加えたテキスト文書であり、基本的には文字情報を表現するための仕組みです。

たとえば、あるテキストを「＜B＞」と「＜/B＞」で挟んでおくと、このテキストは太字（ボールド）としてブラウザ上で表示されます。こうして、見栄えの良いWEBページを作るためのテキストが、HTML文書です。

では、HTML文書で図形は表示できるのでしょうか？

実は、HTML文書には＜CANVAS＞（キャンバス）要素というものが用意されていて、これを使うと、WEBページに図形を表現することが可能です。

そして、このコードをテンプレートに表記すれば、GASで作ったWEBアプリで図形を扱うことも可能です。

HTML文書内で図形を扱うには、公開されているJSライブラリを利用する方法もあります。こうしたライブラリを用いると、もっと簡単に図形を扱えます。

ただし、既成のライブラリには無い表現をしたいときのために、HTMLコードの基本機能を利用した方法も知っておいて損はないかと思います。

ちょっと変わった＜CANVAS＞要素・・・JavaScriptとの組み合わせが前提

HTML文書では、テキストを書いて、これをタグ（ブラウザへの指示を含んだカッコ「＜　＞」付きのテキスト）で挟むことで、WEBページ上に、さまざまな要素（テキスト、リンク文字、表、リスト、ボタンなど）を表現します。

例えば、こんな感じです。
　<button >ボタン要素です</button>

ところが、図形要素を表現する＜CANVAS＞要素はちょっと変わっていて、HTML文書中では表現範囲を示す指示しかできません。

こんな感じです。

通常は、他の要素がラップしない様に、独立した領域を表す＜DIV＞タグで挟んで使います。

肝心の図形描画はどうするのかというと、これはJavaScriptで記述します。

JavaScriptはブラウザのマクロ言語であり、通常は出来上がった要素の色を変えたり、動きを付けたりする補助的な目的で使いますが、図形描画の場合は、要素の作成の中心的な役割を担っており、描画内容は＜Script＞セクションを置いて、その中で記述します。

図形描画のおよその手順

図形描画のおよその手順は、以下のようになります。

①HTMLソースのどこかに、＜Script＞セクションを置きます。そしてここにJavaScriptで以降の内容を記述します。

②JavaScriptで、2D図形を描くCANVAS要素を指定します。

③2D図形を描くペンを用意します。

④図形を生成します。

⑤塗りつぶしなどをします。

①～③は準備段階、④⑤が具体的な描画指示です。

準備段階のコード

上記の準備段階を示すコードは以下の様になります。（説明のために変数名などは改変しています）

まず、キャンバス要素の定義をHTMLコードで記述します。

<div  id=”描画エリア” >
　<canvas id=”キャンバス要素” width= 巾 height=高さ></canvas>
</div>

次に、この要素への図形描画を、JavaScript内に定義した適当な関数で記述します。

<Script type="text/javascript">  

・・・・
function 関数(){
・・・・

//<CANVAS>要素を取得
  var キャンバス = document.getElementById('キャンバス要素');
   
  //2D描画要素を描画するためのハンドルを取得
  var 2Dペン = キャンバス.getContext('2d');
   
  //2D描画要素を描画するためのペンを初期化
  2Dペン.save();  // 定型処理
  2Dペン.beginPath();


  //2D描画要素の線太さと色を設定
  2Dペン.lineWidth=1;
  2Dペン.strokeStyle = 'black';

・・・・
｝
・・・・
</Script>

ここまでは、ほぼお定まりのコードとなります。

このコードは、適当なユーザ関数を設定してその中に記述しますので、HTML文やJavaScriptセクションのどこかで、この関数を作動させる記述をする必要があります。

なお、コードの最後で設定している線の太さや色ですが、デバイスの画面によって見える印象が変わる可能性がありますので、細かい使い分けなどはしない方が無難です。

図形の描画

続いて、図形の描画のコードを示します。この記事では、棒グラフの表示を目指していますので、これを描くために長方形の描画例を示します。

//長方形で棒グラフを描画する
  2D図形.beginPath();
  2D図形.rect(X座標、Y座標、巾、高さ);

  //長方形を塗りつぶし
  2D図形.fillStyle = 'ライトグリーン';
  2D図形.fill();
  2D図形.stroke();
・・・
  //描画要素の後処理
  2D図形.restore();  // 定型処理

上記のコードで、長方形が一つ表示される様になります。

テンプレートに記述する時の工夫点～スプレッドシートのデータと連携させる～

WEB文書を表現するためのHTML／JavaScriptのソースは、基本的にはGASのテンプレートにそのまま記述できます。

これらをテンプレートに記載し、Googleスクリプトでレスポンスさせれば、立派なWEBページとして表示されます。

ただ、GASの中で記述するので、せっかくならスプレッドシートのデータと連携させたいですね。

GASには、スプレッドシートなどGoogleドライブ内のデータと、生成WEBページの内容を連携させるための仕組みがいくつかあり、今回の家計簿アプリでは、以下の仕組みを使います。

スクリプトレットタグ（HTMLコード内）

GASのテンプレートには、<?=　～　？>　という特殊なタグが用意されています。このタグはスクリプトレットとよばれるもので、～　部分に変数名を入れておくと、その内容に応じてWEBページが生成されます。

たとえば、以下の様にHTMLコード中に記載しておけば、<DIV>の置かれた領域に、「変数」という文字ではなく、その内容がWEBページに表示されます。
<DIV>
　<?=　変数　？>
</DIV>

GASのテンプレート内でだけ有効なタグですので、一般のHTMLコードで使わない様に注意しましょう。

この変数に、スプレッドシートのデータを代入するには、Googleスクリプトに以下の様に記述しておきます。

以下はスクリプトのコードなので、注意ください。変数名は説明のため改変しています。

  //HTMLファイルのテンプレートをファイル名を指定して取得
  var ウェブページ = HtmlService.createTemplateFromFile('テンプレート名');
  
  //★★テンプレートに埋め込む変数値を指定する★★  
  ウェブページ.変数 = スプレッドシート.セル範囲.getValue();

最後の行の、以下のコードによって、変数にスプレッドシートのセルの値を埋め込むことができます。

ウェブページ.変数 = スプレッドシート.セル範囲.getValue()

そして、テンプレート内では、ここで定義した変数を、宣言なしに使うことができます。

テンプレートとスプレッドシートの連携についての詳しい内容は、この記事の最後に参考の拙書を挙げておきます。

今回のアプリでは、＜CANVAS要素＞のサイズの指定は、上記の仕組みを使って、スプレッドシートに書いた数値を使っています。

Script.run関数（JavaScriptコード内）

上記の仕組みは、HTMLコード内でしか使えないので、JavaScriptコード内でGoogleスプレッドシート上のデータを利用するには、別の方法を取ります。

それが、JavaScriptコード内で使える、Script.run関数　です。

スクリプトレットタグと同様、こちらも、GASの中でだけ使える関数なので、一般のWEBページのソース内では使えません。

この関数は、Googleスクリプトの中の特定の関数を実行させ、その返り値を取得できる関数です。以下の様に使います。

<script type="text/javascript">

・・・

  //---グラフ 、図中の文字の描画のデータをスプレッドシートから取得する-----
  google.script.run.withSuccessHandler(返り値の利用).スクリプト内の関数();
 
 
  //返り値を得たら実行する
  function 返り値の利用(res){
  ・・・  

  }
・・・
</script>

一方、スクリプト内には以下の様な記述をしておきます。

function スクリプト内の関数()
{
  ・・・  
return セルの値;

 }

この様にすることで、JavaScriptコード内でも、スプレッドシートの値の利用が可能です。

今回の記事ではあらましだけのご説明ですが、以上の仕組みを使って、スプレッドシート上のデータに応じた長方形を描くことで、棒グラフの表示をさせています。

長くなりましたので、一旦切ります。以下の様な、文字やリンク文字をグラフ内にどう埋め込んでいるかについては、次回の記事でご説明します。

←前の記事はこちら

次の記事はこちら⇒

今や誰でもスマートフォンを使う様になりました。

このスマートフォンで動くアプリを自作できたら、日常生活が便利になると思いませんか。スマートフォンで動くアプリには、専用の環境で動くネイティブアプリもありますが、ブラウザ上で動くWEBアプリが、機種を問わず使えるので便利です。

WEBアプリは、アマチュアが手がけるには、サーバの準備など前準備が長くて敷居が高いものですが、Google Apps Script（GAS）を使うと、アマチュアでも比較的容易にWEBアプリを作成できます。

そして、工夫することで、Googleスプレッドシートとの連携も可能です。スプレッドシートに蓄積したデータはエクセルなどでも利用できますので、さまざまな活用方法がありうるでしょう。

そんなWEBアプリの作り方をKindle本にしました。GASで作るWEBアプリについてご興味の方は参考にしてみてください。（手間代程度の値段です。Amazon読み放題でなら無料で読めると思います）

WEBページ（テンプレート）　⇔　スプレッドシート、スプレッドシート　の双方向の通信をどう実装するか、簡単な帳票アプリを例にとった説明です。

コードの解説編です。

以下は、GASで作ったWEBアプリの事例です。ご興味がありましたらどうぞ。

スケジュール調整アプリの様な、アンケート用のWEB上の書き込み板も作ることができます。表形式で一覧できるので、小人数ならGoogleフォームの様な単票方式よりも便利と思います。

JSライブラリを活用することで、まるでエクセルの様なインターフェースをWEBページに表示させて、スプレッドシート入力のポータルサイトを作ることもできます。

WEB画面から入力する簡単な家計簿で、スプレッドシートに、日ごとに帳票シートを足していく方式です。スプレッドシートというマルチシートのアプリの特性を上手く（？）利用したWEBアプリの実装例です。

この記事が気に入ったらサポートをしてみませんか？