この記事は、GASによる以下のグラフ表示アプリの解説記事になります。今回は表示された棒グラフの下のリンク要素にクリックすると、グラフの日付に応じた明細がテーブル形式のフォームで表示される仕組みについて説明します。
目次
棒グラフの下のリンク文字をクリックすると明細が参照できる
今回のWebアプリでは、棒グラフの下にあるリンク文字をクリックすると、その明細がテーブル形式フォームで参照できる様になっています。
例えば、以下の真ん中のグラフの日付（０１／１９（火））をクリックすると・・・
その日付 ０１／１９（火） の明細を記したシート（D20210119_火）がテーブル形式フォームで参照できます。
このテーブルは編集する事ができ、結果は直ちにグラフに反映されます。
例えば、本立ての値段を３０００円から２０００円に修正してみます。
フォームの下にある「書込み」ボタンをクリックします。
その後、ページを再度読み込むと、グラフの数字が１０００円安くなり、高さも低くなりました！
GASではこうしたインタラクティブなWebアプリを作成する事が容易です。以下ではリンクをクリックして明細フォームを呼び出す方法をご説明します。
GASへのアクセスURLに 「クエリーパラメータ（？～”）」を追加すると、doGet（）関数に引数を渡すことができる
まず、リンク文字にあるアンカー（リンク先のURL）の説明です。
以下のリンク文字（アンダーラインがある文字）のアンカーは、スプレッドシートに記載しているデータから取得しています。
字が小さくて申し訳ないのですが、リンク文字用のテキストデータは以下の様なスプレッドシートから取得しています。（日付文字の直下なのですが小さくて見えていません。）
１つ拡大表示させてみます。例えば、上記中央部のリンク文字用のテキストデータとしては、以下の様な文字が記入されています。（☆スプレッドシートのID☆ の部分は各ユーザーのスプレッドシートIDが入ります）
・
URLは、GASのプログラムにアクセスするためのURLです。そして後ろにある？から後の部分はクエリーパラメータといいます。（色んなサイトのリンクで、？ や ＆ が入った URL を見たことがありませんか？ これと同じです）
クエリーパラメータはアクセス先のアプリに情報を渡すための仕掛けで、以下の様な形式をしています。
・
今回の場合のURLは、以下のテーブル形式フォーム表示プログラムの修正版にアクセスするのですが、その際にクエリーパラメータで該当日のシート名を渡しています。
アクセス先で日別のテーブル形式フォーム（明細）を表示させるGASプログラムの内容ご紹介
ここからのGASプログラムは、グラフ表示とは別の新しいプロジェクトを作成して、そこに記述するようにします。
それは、GASの仕様上、１つのURLに紐づけできるのは １つのプロジェクトだけ だからです。
今回は明細のテーブル形式フォームを専用のURLからアクセスするので、グラフ表示のプロジェクトとは別のプロジェクトの用意が必要です。
さて、GASプログラムではURLからアクセスすると、goGet（e）関数が自動実行されますが、クエリーパラメータは goGet（e）関数の中の e として引き渡されます。（カッコ内の引数名は何でもいいのですが、ｅがよく使われます。多分イベント Event の意味）
具体的には、クエリーパラメータの値は以下の形式で取り出す事ができます。
・
実装するコードは以下の様になります。（ＵＲＬでは、末尾に ？SheetName＝シート名 を付け加えるものとします）
//アプリケーションを取得｜スプレッドシートのIDは各自のものを記入（中略）//★★★対象シートをプロジェクトのURLから指定して取得★★★var シート名 = e.parameter.SheetName)
・
委細は省きますが、こうして得られたシート名をもとに表示させたいシートを指定し、テーブル形式フォームとしてＷＥＢ表示させるという訳です。
今回の記事はここまでになります。次回はグラフの各種データを記したスプレッドシートの中身を説明する予定です。
