あぷつう.com

弱ニートだから楽しいことだけやっていく

*

初心者が自分ルールWebアプリケーションをGoogleAppsScript(GAS)で作成する手順(2)

   

前回に引き続き、自分ルールのWebアプリケーションを作成するための準備を進めていきます。

今回はスプレッドシートに入ったデータをHTMLで表示する手順をお伝えしていきたいと思います。

スプレッドシートのデータをHTML生成

スプレッドシートをデータベースに見立てて、データをHTMLで表示する手順について学んでいきます。

これを学ぶとデータが追加されたとき、いちいちとHTMLに記入しなくてもWebで表示することができます。
前回では、コード.gsで記入されたタイトルをHTMLに値を受け渡す方法を学びましたが、今回はさらに突っ込んで、複数のデータをHTMLに受け渡す方法をお伝えしていきます。

このままではわからないので例を挙げていきます。

HTML生成方法を学ぶ

通常、HTML生成の方法に2つのパターンがある。
アクセスされた際にHTMLを作りWebで表示される動的生成。
元々作成されたHTMLをWebで表示される静的生成。

どちらもメリット・デメリットがあるが、静的生成のデメリットは以下のことになります。
例えば、以下の作成したHTMLでタスクを追加したい場合

HTMLに直に書いてタスクを追加することになります。今回は「掃除をする」を追加しました。

これは、タスクが追加される度にいちいち自身で追加の作業を行う必要があります。
1個2個であれば、そこまで手間ではありませんが、100個200個タスクの作成をする場合は、ものすごい手間です。

せっかく、Webで便利にできるのにわざわざその手間を踏むのは意味がありません。
そのためこのタスクを動的に生成する基本的なことを学んでいきます。

例えば、フォームで入力されたデータをすぐにWebで結果表示するようにするためには、動的生成を学ばないといけません。

HTML動的生成する

動的に生成するためには、HTMLで生成するための元データが必要になります。

今回は、データの置き場所をグーグルスプレッドシートにします。

早速スプレッドシートを作成していきましょう。
前回のスクリプトエディタを開いたスプレッドシートを開きます。

スプレッドシート名は「ALL」にでもしておきましょうか。
Webアプリケーション014

データは以下のものをコピペして使ってください。

ID Input Date Task Point Category
0 2019/03/22 0:00:00 なし 0 貯蓄
1 2019/03/22 0:00:00 なし 0 消費
2 2019/04/25 22:33:04 勉強 60 消費
3 2019/04/25 22:33:36 遊ぶ 120 消費
4 2019/04/25 22:41:21 掃除をする 50 貯蓄
5 2019/04/25 22:41:21 本を読む 60 貯蓄

ここまでが元データの作成手順になります。

さて、ここからグーグルスプレッドシートのデータをHTMLに生成する方法についてお伝えします。
まず、グーグルスプレッドシートのデータを取得することから始めていきます。コード.gsには以下のコードを入れてください。

今回はgetDataDisplayという関数を作成しています。関数に関しては以下を確認してください。

JavaScript関数

まあ、簡単に言うと処理の内容を部品として作成したものと考えてもらうといいかも。何回も使いたい処理内容は関数として定義しておくと再利用可能になり、わかりやすくなる。

さて、index.htmlでは以下のように入力してみてください。

HMTLには、for文を利用して取得したデータをループ処理させています。ループ処理については以下で確認しておいてください。

JavaScriptでfor文を使ってループ処理する方法【初心者向け】

簡単に言えば、0123456・・・と数字を繰り返しさせてそのセル番号にあるデータをHTMLで生成させているだけです。
もし、自身でHTML作成しようとすると、コードが先程書いたのよりも間違いなく長くなりますし、後々メンテナンスをするときも大変な思いをすることになります。

そして、これが上手くいくと、このように表示されます。
Webアプリケーション015

このままでも大丈夫ですが、グーグルスプレッドシートで「ALL」のシートにデータを追加した時に、HTMLでもデータが表示されるか確認してみてください。
自分が入力したデータが表示されるようだと問題なくデータの取得ができているということになります。

もし、データが更新されていなかったり、別の端末で確認したときには以下の手順を踏んでください。

Webアプリケーション005

プロジェクトバージョンをNewに変更をする。
Webアプリケーション016

別端末で確認するときは、この手順を踏まないとバージョンが更新されたものに変更されていなかったので、スマホなどで確認したい場合はこの手順を踏むようにしてください。

以上がスプレッドシートに入ったデータをHTMLで表示する手順についてになります。次回はフォームに入力されたデータをスプレッドシートに追加する方法についてお伝えしようと思います。

 - program ,