Google Apps ScriptでWebアプリを作成する 【2】 GASの処理をWebアプリに反映させる方法

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

前回記事はこちら!!

 

前回はGoogle Apps Scriptエディタ上でHTMLファイルを作成し、とりあえずWebに公開してみるところまでをご説明しました。

 

今回はGoogle Apps Scriptでの処理をWebアプリケーションに反映させる方法をご紹介します。

Webサービスを通じてGASによる操作・処理をすることができるようになり、ようやくGASでWebサービスを制作するメリットを得られるようになります。

 

今回つくるもの

今回も「Hello World!!」を表示させるWebアプリケーションを作成していきます。

しかし、今回は「Hello World!!」の文字列をHTMLファイル側ではなくGASファイル側に書きます。

そして、「Hello World!!」のテキストデータをGASファイルからHTMLファイルに渡すことで表示させられるようにしていきます。

 

前回のindex.htmlからHello World!!の文字列を抜きました。さて、どのようにしてGASからHello World!!を引き出していくのか…ご紹介していきます。

 

GAS関数を埋め込んで反映させる方法

まずご紹介するのはGAS側で定義した関数をHTMLファイルに埋め込んで出力させる方法です。

GAS側で「Hello World!!」を戻り値として返す関数を作成し、その関数をHTMLファイルに埋め込むことでWebアプリケーションで「Hello World!!」を表示させることができます。

 

Hello World!!を返すGAS関数を作成する

まず、「Hello World!!」を返すGAS関数を作成しましょう。今回はsayHelloメソッドとして以下のように定義しました。

 

returnで「Hello World!!」の文字列を返すだけのとてもシンプルな関数です。

この関数定義の段階では特に特殊なコードを記述する必要があるわけではありません。

もし、Google スプレッドシート上のセルの値やGmailのメッセージをWebアプリケーションに表示させたいという場合でも、これと同じように表示させたい値をreturnで戻り値として取得できる関数を定義したらOKです。

 

GAS関数をHTMLファイルに埋め込む

さて、このsayHelloメソッドをHTMLファイルに埋め込みましょう。どのようにして埋め込めばよいのでしょうか?

当然、下記のように記述すると、「Hello World!!」ではなく「sayHello()」が表示されます。

 

実は、HTML上でGASコードを記述するために必要なタグがあります。GASコードをそのタグで囲って記述してあげることでHTML上でGASコードが正常に処理されます。

そのタグとは

 

<?= …GASコード… ?>

 

です。このタグも埋め込んだHTMLファイルが下記になります。

 

では、このHTMLファイルを保存してWebアプリケーションを実行してみましょう!!

 

Hello World!!が表示されました!これで目的は達成できました。思ったよりも簡単に表示させることができましたね。

 

GAS関数をHTMLに埋め込む方法の課題

さて、HTMLファイルにGAS関数を埋め込むことでGAS側の処理をWebアプリケーションに反映させることができました。

 

しかし、この方法には問題も多いです。

今回の「Hello World!!」のように表示させるデータがひとつだけの場合であれば、関数を埋め込む方法で問題なく、一番簡単に実現できます。

しかし、例えばこのWebアプリケーションに「Thank you」や「See you」などの言葉も同時に表示させたいとした場合、関数を埋め込む方法を用いると以下のようなコードになります。

 

sayThankYou()は「Thank You」を、saySeeYou()は「See You」を返すメソッドです。

このように、関数を埋め込んでデータを表示させる方法を利用していると、表示させたいデータの項目数だけ埋め込む関数を用意しなければならなくなります。こんな感じに…

 

これだと、Webアプリケーションの内容が大きくなるともっと関数が増えて大変になりそうじゃないですか?

Google スプレッドシートに記録したデータを参照して出力・処理するWebアプリケーションとかだと考えただけでも大変そうですよね。

 

そこで、関数埋め込みによる方法よりももっとすっきりとデータを用意・出力することができるオススメの方法が次にご紹介するHtmlTemplateオブジェクトにプロパティ値としてデータを追加する方法です。

 

HtmlTemplateオブジェクトにプロパティ値を設定して反映させる方法

まずは前回もご紹介した下記のコードを見てください。

 

この記述があるおかげでGASエディタからWebアプリケーションを生成できるのでしたね。

 

また、このコードの中のこの部分でindex.htmlファイルからHtmlTemplateオブジェクトを生成しているのでしたね。

 

変数templateにHtmlTemplateオブジェクトを挿入したものをevaluateメソッドでWebアプリケーションへ…というのが前回の内容でした。

実は、evaluateメソッドでWebアプリケーション出力する前のHtmlTemplateオブジェクトに追加情報を設定することができるのです、それが前述したプロパティ値です。

 

プロパティ値とは

プロパティという言葉はパソコンで右クリックすると見かけたりするなどなんとなく目にする言葉ですよね。

用語辞典などで調べると多くはプロパティとは物体の特性・特質を意味する言葉と説明されています。うーん。

 

わかりやすく人を例にしてみると、その人の状態や情報を表すもの…例えば年齢、住所、経歴などがその人のプロパティ情報です。

 

つまり、この後やろうとしているHtmlTemplateオブジェクトにプロパティ値を設定する、ということは、そのオブジェクトに追加情報を設定するということです。

そして、今回は「Hello World!!」という追加情報をHtmlTemplateオブジェクトに追加します。

 

HtmlTemplateオブジェクトにプロパティ値を設定する

言葉で説明してもあまりイメージできないと思いますので、実際にプロパティ値を設定するコードをお見せしてご紹介します。

今回は「Hello World!!」を表示させるWebアプリケーションを作成する…ということで、Hello World!!の値をプロパティ値として設定するコードを書きます。書いたものが下記のコードです。

 

変数templateに「 . 」でhelloをつなげたものに対して「Hello World!!」を代入している…というような記述ですね。

これにより、helloという名前のプロパティを設定し、その中身として「Hello World!!」を設定しています。

人に例えると、helloは年齢や住所といった情報名、「Hello World!!」は25歳、東京都千代田区といった具体的なデータにあたります。

 

これだけでHTMLファイルに「Hello World!!」のデータを渡すことができます。

 

HTMLファイルにプロパティ名を埋め込む

では、HTMLファイルでこの値を出力するためにどのような記述が必要かというと…

 

<?= hello ?>

このように、プロパティ名を記述するだけでOKです。HTML上でGASの変数を使うような感覚なのでとても使いやすいです。

これで、問題なく「Hello World!!」を表示させることができるか試してみましょう。

 

問題なしですね!!

 

では、この方法でThank YouやSee Youも表示させてみましょうか。GAS側ではこのように書いて…

 

HTMLファイル側ではこう書きます。

 

出力結果は…問題ありませんね!!

 

どうでしょうか?関数を埋め込む方法よりもコードがスッキリしたと思いませんか?

データ出力のためのスクリプトはdoGet内で処理(別途関数を用意してdoGet内で呼び出して処理してもよいですね)して、HTML上では出力したいデータの名前(=プロパティ名)を記述するだけです。

 

おわりに

さて、今回はGASの処理をWebアプリケーション上で反映させる方法として、GAS関数を埋め込む方法HtmlTemplateオブジェクトにプロパティ値を設定する方法の2つをご紹介しました。

開発したいWebアプリケーションの内容に応じて2つの方法をうまく使い分けてください。

 

さて、次回はHTMLコードの生成にGASコードを活用する方法をご紹介していきます。

例えば、Google スプレッドシートのデータをHTML上でリスト表示したい、と思ったときに、イチからHTMLでリストを記述するよりも、GASのfor文の仕組みを使えたらかなり少ないコード量で記述ができそうです。

他にも、ある条件が満たされる場合のみ表示する…といった表示設定を組み込みたい場合はGASのif文を使いたくなりますね。

それらGASのコードをWebアプリケーション開発に活かす方法をご紹介していきます、お楽しみに〜

yoshi

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

シェアする

コメントを残す

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

CAPTCHA


コメントする