動的5週間表示アプリ
WEBアプリとして表示するものとして、文字だけでなく図表も表示できると便利です。GoogleスプレッドシートとGoogles Appps Script (GAS) を使ったWEBアプリの作成例ではテキストの表示に関するものが殆どですが、図を扱う事も可能です。
ここでご紹介するのは、HTMLのCANVAS要素を用いて家計簿アプリの日別支出額を棒グラフとして表示させるアプリです。単なる図の表示だけでなく、リンク文字を埋め込んで該当する日別明細が判る様にしてみました。
以下が表示の例ですが、このアプリでは日別の家計簿の支出合計を、”今日”を起点として現時点を含む２週間分棒グラフ表示させます。
各グラフの日付にはリンクが設定されており、クリックすると明細が表示されます。
ここからデータを編集する事も可能で、編集結果は、WEBアプリを再度読み込むことでグラフにも反映されます。
目次
「テーブル形式フォーム」を応用して、「動的５週間表示アプリ」を作ろう。
以下の記事を順に追っていただくと、GoogleスクリプトとGoogleスプレッドシートを使用して、グラフ表示アプリを作る方法が分かります。
今回ご紹介するアプリを通して、「CANVAS要素での図形の描画方法」、「ネイティブの文字やリンク要素を埋め込む方法」「クエリーパラメータ付きのURLを用いてアプリを起動する方法」を学べます。また、Googleスプレッドシートの表計算としての機能を活用することで、GASのコーディングが簡単になることも判ります。
ひな型となるGoogleスプレッドシートもダウンロードできる様に用意しましたので、プログラムのコードと併せてご利用ください。
- 「グラフ表示アプリ」の機能ご紹介です。グラフと日別の明細の表示例を示しています。記事では、グラフ描画に必要なデータをGoogleスプレッドシートに記載しておくと便利である事も説明しています。
- 図形を表示させる要素である<CANVAS>タグと、その利用方法を簡単に解説しています。
- <CANVAS>タグに図形を描画する方法について解説しています。また、<SPAN>要素を埋め込んで文字を、<A>要素を埋め込んでリンク文字を表示させる方法も解説しています。
- <CANVAS>プロジェクトをもう一つ追加し、クエリーパラメータ付きURLを用いて、該当日の支出明細を表示する方法を解説しています。
- グラフ表示のためにデータを再配置したスプレッドシートをご紹介します。Googleスプレッドシートを利用すると、コード中に多数のパラメータを記述するよりも数値を分かり易く管理できます。
- ひな型となるスプレッドシートおよびGASのコードのご紹介です。インポートしてデータベースとして使用するスプレッドシートのひな型、および２つのプロジェクトのコードを記載しています。
