【05_グラフ表示アプリ】グラフ表示アプリ〔解説編　Vol.2〕図形、テキスト、リンク付き文字をテンプレートに表示させる方法

記事概要

この記事は、GASによる以下のグラフ表示アプリの解説記事になります。前の記事で＜CANVAS＞タグについて触れたのですが、今回は＜CANVAS＞の中に図形やテキストを描く方法を説明します。

今回の記事はGASのテンプレートファイルの内容です。

＜CANVAS＞タグで宣言したCANVASオブジェクトの使い方・・・まず２Dコンテキストを取得する。

前の記事で、図形は＜CANVAS＞タグで宣言したCANVASオブジェクトを使う事を説明しました。このオブジェクトはちょっと変わっていて、具体的な図形描画はHTML文ではなく、＜script＞～＜/script＞タグの中にスクリプトで記載することをお伝えしました。

ここまでの内容をコードで再掲します。

まず以下の様に描画領域とする＜div＞要素を宣言し、その中にCANVAS要素を宣言します。宣言は＜div＞要素の中で＜canvas＞要素を以下の様にid名とサイズを指定して書くだけです。

CANVAS要素の宣言方法

＜div　id=”描画領域” style=”position:relative;white-space: nowrap;margin: 0;padding:0;“＞
　＜canvas id=”キャンバス” width=巾サイズ height=高さサイズ ＞＜/canvas＞
＜/div＞

・

＜DiV＞要素にあるwhite-space: nowrap;margin: 0;padding:0;は、子要素に文字を埋め込んだ場合に、位置がずれないためのおまじないです。

次に＜script＞タグ内で以下の様に宣言したCANVASの中の２Dコンテキストを取り出します。

これは、CANVASオブジェクトを　getElementById(　キャンバスのid名　)　により定義し、さらにこのオブジェクト内にある　getContext　メソッドを使って以下の様に記述します。

２Dコンテキストの取得方法

＜script＞
var Canvasオブジェクト = document.getElementById(‘キャンバス‘);
var ２Dコンテキスト=Canvasオブジェクト.getContext(‘2d‘);
＜/script＞

・

この2Dコンテキストを用いて色々な図形を描画します。

ここで補足ですが、図形の操作に不可欠な座標データなどは、今回のWEBアプリではgoogle.script.run　関数を使用して、スプレッドシートから取得しています。

//—グラフ描画のデータを取得する—–
google.script.run.withSuccessHandler(その後に発動する描画用の関数).スプレッドシートからデータを取得する関数();

・

（スプレッドシートには長方形の座標など一式のデータを掲載しています）

この座標データを使って次にご説明する方法で図形を描くわけです。以下の説明にある図形関係のデータはこの方法で取得しています。

長方形（棒グラフの棒）を描く

以下は棒グラフの本体＝長方形を描くコードの中心部分の抜粋です。

ここでは、グラフを２段表示したり、後述するテキスト埋め込みをするために、既存のグラフ描画ライブラリはあえて使っていません。

描画は、取得した２Dコンテキストに含まれている、メソッドを使って行います。

２Dコンテキスト.lineWidth=1;//線の太さ
２Dコンテキスト.strokeStyle= ‘black‘;//線の色
(中略)
２Dコンテキスト.beginPath();//ペンをセット
２Dコンテキスト.rect(X座標 ,Y座標 ,巾 ,高さ);//長方形を描く
２Dコンテキスト.fillStyle = ‘lightgreen‘;//内部の色をセット
２Dコンテキスト.fill();//塗りつぶす
２Dコンテキスト.stroke();//輪郭の表示

・

１ケの長方形を描くのに、以上のコードを記述しています。これをループを回して必要な回数だけ繰り返しています。（長いですが、図形は、見るのは簡単、コードは複雑、が一般的です！）

ポイントをまとめます。

図形をHTMLで描くには、

①＜DIV＞オブジェクトの中に＜CANVAS＞オブジェクトを宣言、

②＜CANVAS＞オブジェクトの中から２DコンテキストをgetContextメソッドで取得し、

③その２Dコンテキストのメソッドを操作して描く

文字（SPAN要素）の埋め込み

棒グラフの上には金額をテキストで表示しています。

CANVAS内には文字を表示する２Dコンテキストがあるのですが、この文字は「絵」でありリンクを貼ったりする事ができません。そこでここでは、ネイティブのテキスト要素のままで埋め込んでみましょう。

ただし、CANVAS要素にネイティブのテキストを直接埋め込むことは仕様上できませんので、CANVASの親要素である＜Div＞要素に埋め込む事にします。

それには以下の様に記述しています。

☆まず、＜span＞要素を、createElementメソッド　で宣言（ここでは”テキスト要素”とします）します。

☆次にこれを、＜CANVAS＞要素の親要素となっている＜Div＞要素（ここでは”描画領域”という名前とします）にappendChild　メソッドで埋め込みます。

☆埋め込んだあと＜span＞要素にある　styleプロパティ　を使って座標などを指定します。

☆最後に　createTextNodeメソッド　で文字本体を作成し、これを＜span＞要素に　appendChild　メソッドで埋め込みます。

コードにすると以下の様になります。

//テキスト要素を設定する
var　テキスト要素= document.createElement(“span”);（中略）

//これを描画範囲の子要素として埋め込む
描画領域.appendChild(テキスト要素);

//テキスト要素のスタイルを設定する｜座標や文字はres（配列）からインデックスを指定して取り出す
テキスト要素.style.position = “absolute”;
テキスト要素.style.left = X座標+”px”;
テキスト要素.style.top = Y座標+”px”;
テキスト要素.style.fontFamily = “Arial”;//フォント
テキスト要素.style.fontSize = “12px”;//文字サイズ
//テキストノードを追加
テキスト要素.appendChild(document.createTextNode(文字));

・

混乱しそうなのは、テキスト要素.styleプロパティで設定できるのは空の文字要素の情報までであり、文字列そのものは更にその子要素のテキストノードとして以下の様に設定しなければならない事です。

テキスト要素.appendChild(document.createTextNode(文字));

再掲になりますがポイントをまとめます。

文字を図形に埋め込むには、

①＜CANVAS＞オブジェクトの親である＜DIV＞オブジェクトの中にSPAN要素を埋め込む、

②具体的には＜DIV＞オブジェクトにSPAN要素を設定し、

③そのstyleプロパティを設定するようにする、

④文字そのものはsapn要素の子要素としてテキストノードを設定することで定義する

文字を「絵」として埋め込む場合はもっと簡単な方法があります。

リンク付き文字（A要素）の埋め込み

今度はリンク要素（＜A＞要素）の描き方です。（このアプリでは、リンク要素は棒グラフの下側に設定しており、クリックすると明細フォームが開くようにしています）

それには以下の様にします。

//リンク付きテキスト要素を設定する
var　リンク要素= document.createElement(“A”);//これを描画範囲の子要素として埋め込む
描画領域.appendChild(リンク要素);//リンク要素のスタイルを設定する
リンク要素.style.position = “absolute”;
リンク要素.style.left = X座標+”px”;
リンク要素.style.top = Y座標+”px”;
リンク要素.style.fontFamily = “Arial”;//フォント
リンク要素.style.fontSize = “12px”;//文字サイズ
リンク要素.href = URL;//テキストノードを追加
リンク要素.appendChild(document.createTextNode(文字));
・・・

・・
<SPAN>要素と殆ど同じなので細かい説明は不要と思います。違いは、要素種類が＜Ａ＞であること、属性にhref（リンク先）がある事ぐらいです。

CANVAS要素に文字を図形として埋め込む方法ではリンク文字は扱えません。この記事の様にテキストを独立した子要素として埋め込むメリットはこの点にあります。この方法の欠点として、図形との座標値を合わせるため、文字の位置も図形とは別にコードで表記する必要がある事、ディスプレイによってはずれが生じる場合がある事が挙げられます。

以上、GASのテンプレートで図形と文字を合わせて表示させる方法でした。なおこの方法は通常のHTMLでも使える方法です。

次回は、リンク要素をクリックすると明細フォームが開く仕組みをご紹介します。