Google Apps ScriptでWebアプリを作成する 【3】 GASのfor文でHTMLのリストを生成する方法

Google Apps ScriptでWebアプリケーションを作成する方法第3回です。

前回記事はこちら!!

 

前回はGASでの処理・出力結果をHTML上に反映させる方法をご紹介しました。

HTML上にGAS関数を埋め込んだり、Webアプリを出力する前のHtmlTemplateオブジェクトにプロパティ値としてデータを渡すなどの方法を使うのでしたね。

 

今回は、HTMLファイル上でさらにGASのコードを活用していきます。

GASでのWebアプリケーション開発には必須(?)と言っても過言ではないfor/if文をHTML上で利用する方法をご紹介します。

すべてを説明するととても長い記事になりそうなので、この記事ではまずfor文を実装し、Webアプリ上でリストを生成するところまでを扱います。

 

今回つくるもの

今回は売上データが記録されているGoogle スプレッドシートから売上データをリストで表示するWebアプリケーションを作成してみたいと思います。

また、売上金額が1,000,000円を超えるデータについては、テキストを赤色で表示させるようにしていきます。出力イメージは以下のとおりです。

 

データ量が多くひとつひとつ書いていくのは大変なので、これを実現するためにGASのif/for文も活用したHTMLファイルを作成していきます。

冒頭でも言いましたが、全てを説明するとかなり長くなるので、if文の実装については次回ご紹介していきます。

 

利用するスプレッドシート

今回読み込むデータが記録されているスプレッドシートはこんな感じです。日付、名前、売上額が記入されています。

このシートからすべてのデータを読み込み、Webアプリケーション上でデータを表示させていきます。

 

また、今回はスプレッドシートと連携するスクリプトを記述するので、スプレッドシートからスクリプトファイルを作成したほうがActiveSpreadsheetメソッドなどが利用できてコードを書きやすいです。

「ツール」→「スクリプトエディタ」とクリックしてスクリプトファイルを作成していきましょう。

 

出力するHTMLファイルのイメージ

最終的に出力されるHTMLファイルはこんな感じで出力されるようにしていきます。リスト表示にしていくので<li>タグを大量に使っていく必要がありますね。

 

それでは、このHTMLファイルを出力するためのコードを書いていきましょう。

 

for文でデータ数分のliタグを生成しリストを作成する

 

for文でリスト生成するまでの簡単な処理の流れを下記に記しました。

 

スプレッドシートからデータ取得→HTMLファイルにデータを渡す→受け取ったデータをHTML上でfor文を使いリスト展開

 

HTMLファイル上でリストを生成するにはまずデータがなければ始まりません。そこで、スプレッドシートのデータをリスト表示する第一歩として、まずはスプレッドシートからデータを取得します。

次に、そのデータをHTMLファイルに渡してあげて、最後にそのデータをHTML側で受け取り、HTML上でリスト展開をしていきます。

 

リスト表示させたいスプレッドシートのデータを取得する

スプレッドシートのデータを取得するためにGAS側で以下の関数を用意しました。

売上表の1行目に書いている列名の部分をデータから削除するためのshiftメソッドを利用していることを除いては、特に改めて説明することはないかと思います。

 

戻り値として取得できるvaluesの中身は

[ [Tue Jan 01 2019 00:00:00 GMT+0900 (JST),田中,18666],

[Tue Jan 01 2019 00:00:00 GMT+0900 (JST),田中,720520],

[Tue Jan 01 2019 00:00:00 GMT+0900 (JST),井上,37554],

…….

[Thu Jan 03 2019 00:00:00 GMT+0900 (JST),田中,1296861] ]

というような2次元配列になっているかと思います。

 

取得したデータをHTML側に渡す

前回の内容でHtmlTemplateオブジェクトにプロパティ値を設定する方法を取り上げましたが覚えていますでしょうか?

今回はdatasという名前のプロパティにスプレッドシートから取得したデータを記録し、HTML側にデータを渡します。

 

これで、HTML上でdatasという値を使えばスプレッドシートから取得したデータを展開することができるようになります。

 

受け取ったデータをリストに展開する

さぁ、ここでようやくfor文の出番です。

GASから取得したdatasの中には売上データの2次元配列が記録されています。これをfor文で1つずつ順に取り出して<li>タグで囲って表示させていきます。

では、一旦HTML上で書かなければいけない事情は置いておいて、売上データの2次元配列をfor文で展開するコードをGASファイルで実装するイメージで書いてみましょう。

 

こんな感じですね。変数iをインデックス値として設定し、i < datas.length…つまりデータの件数の範囲内で繰り返し処理を行うことで配列datasの中身を順番に表示させていきます。

<li>タグを出力する部分は現段階ではとりあえずイメージがわかればどんな記述方法でもOKです。

 

では、このfor文をHTML上に埋め込みます。GASコードを埋め込むと以下のようになります。

 

for文で繰り返される数だけ<li>タグとその中に記載のあるdatas[i]の値が出力されていきます。for文やdatas[i]など本来HTMLでは記述のできないコードにのみ、<?= ….. ?>のGAS用のタグで囲っています。

 

さて、よく見てみると、前回の記事でも取り上げた<?= ….. ?>だけでなく<? ….. ?>という新しいタグ表記も出てきました。この違いについて解説していきますね。

 

<?= ….. ?>と<? ….. ?>との違い

両者のタグの違いは「=」の有無です。これによって何が変わってくるのかと言いますと…

 

<?= ….. ?>最終的にWebアプリ上に出力をさせたい結果を示すGASコードを組み込むために利用するタグで、

<? ….. ?>Webアプリ上に出力する必要はないけど、スクリプト処理のみを組み込むために利用するタグです。

 

for文の中で変数iの定義、i < datas.lengthによる繰り返しのルール定義などはリストを生成するために必要なGASスクリプトではありますが、Webアプリ上では見えてはいけない内容ですので<? ….. ?>タグで囲んでいます。

<li>タグの中に記述しているdatas[i]はWebアプリ上で表示させたいデータになるので<?= ….. ?>タグで囲んでいます。

 

Webアプリケーションを実行して確認してみましょう。問題なく実行されるのはもちろんですが、<?= ….. ?>で囲ったデータの部分は表示され、<? ….. ?>で囲った処理の部分については表示がされていないことがわかるかと思います。

 

以上でGAS製Webアプリへのfor文実装は完了です。次回はif文を使って売上金額に応じてテキスト色を変更していきましょう。

 

【補足】記述方法について

実は、他のGAS紹介ブログなどにおいては、ちょっと違う書き方でfor文を実装しているところも多いみたいです。その書き方に習って書いたものがこちら。

 

この書き方の特徴として、<li>タグと出力データとをoutput.appendを使って出力しているところです。output.appendを使うことで上記のような記述方法でリスト生成をすることが可能です。

また、スプレッドシートからデータを取得するためのコードをHTML上で書いてしまおう、という人はこういう書き方をします。

 

この書き方をした場合には、HtmlTemplateにスプレッドシートの売上データのプロパティ値を設定する必要がありません。

 

どちらの記述方法が望ましいか、という文献が私の知る限りでは見当たらない(※もしあれば教えていただきたいですm(_ _)m)のでどちらでも良いかと思いますが、私の個人的意見としては

  • HTMLにコードを埋め込む方法がPHPと似ているので書きやすいと思うため
  • 役割分担を明確にすべく、HTMLファイル上ではなるべくGASコードを記述しないほうが良いと思うため(※HTML、CSS、JSファイルはそれぞれ明確に分けるべき、というよく聞く考え方がありますよね)

という考えがあるため、これまでご紹介したやり方を推奨いたします。HTMLファイル上にあれもこれも書いてしまうとコード量が増えてきたときに苦労すると思います。

 

ですが、人の好みや他のコードとの兼ね合いなどもあるので、絶対にこうすべきというものはないかと思いますので、好みやケースに合わせた書き方で実装してみてください。

 

おわりに

今回はHTMLファイルにfor文を組み込んで、スプレッドシートのデータをWebアプリケーション上にリスト表示させる方法をご紹介しました。

GASによるWebアプリケーション開発においてスプレッドシートを活用することは多いと思いますので、きっとfor文を利用する機会も多いと思います。

GmailのメールボックスデータをWebアプリケーション上にリスト表示するという場合でも利用できそうですね。(どんなアプリケーションとして利用するかはあまりイメージできませんが笑)

といった感じで、利用機会の多いテクニックなので何度も利用して使いこなせるようにしておくと良いでしょう。

 

次回は完成したコードにさらにif文を追加して、売上金に応じてテキストを着色する仕組みを実装します。if文もWebアプリケーション実装で活躍するものなのでぜひとも身につけてほしい内容です。お楽しみに

yoshi

JavaScript、Google Apps Scriptがメイン。Pythonもちょっとだけ。Google Apps Script開発、Pythonスクレイピングなどをする機会が多いです。ご依頼なども承っております。 記事内容についてのご意見・ご指摘などいただけますと幸いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


コメントする