Google Apps Scriptで作るWebページにスクリプトの結果を出力して表示してみる

★気に入ったらシェアをお願いします!


call

photo credit: kappuru why won’t you call? via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

初心者向けにGoogle Apps ScriptによるWebアプリケーションの作り方をシリーズでお伝えしています。

前回はその最初の一歩ということで、コチラの記事。

Google Apps ScriptでWebアプリケーションを作る最初の一歩
初心者向けにGoogle Apps ScriptによるWebアプリケーションの作り方を解説していきます。まずは、最初の一歩して静的なWebページを表示するWebアプリケーションを作成していきます。

Google Apps Scriptで静的なWebページを表示する方法をお伝えしました。

今回は、少しだけステップアップをしまして、Google Apps Scriptで作るWebページにスクリプトの結果を出力して表示をさせてみたいと思います。

では、行ってみましょう!

スポンサーリンク

前回のおさらい:静的ページを表示する

まずは前回のおさらいからです。

Google Apps Scriptで静的ページをWebアプリケーションとして公開する際のHTMLファイル「hello.html」とスクリプトファイル「コード.gs」です。

生成されたURLにアクセスがあると、まずスクリプトのdoGet関数が呼び出されます。

doGet関数では「hello.html」をGoogle Apps Scriptとやり取りができるWebページとして生成するという処理をして、それをリターンしています。

スクリプトの実行結果をページに出力する

Google Apps Scriptの結果をWebページに出力したいと思います。

HTMLテンプレートにGoogle Apps Scriptのスクリプトを埋め込みむ場合は、以下のタグで出力内容を挟みます。

<?= … ?>

例えば以下のようにすると、Google Apps ScriptによるDate関数の結果を出力して、現在の日時を表示することができます。

Webページの表示はこちらです。

Google Apps ScriptのWebアプリケーションに日時を出力

現在の日時が表示されています。うまくいきましたね。

関数を呼び出した結果を出力する

もう一つのパターンを見てみましょう。

Webページ内からGoogle Apps Scriptのスクリプトファイルに記述した関数を呼び出して、その結果を出力することもできます。

以下のように、コード.gs内にgetData関数を作りました。

HTMLファイルにはこのように記述します。<?= … ?>タグ内で以下のように関数getDataを呼び出します。

結果はこちら。

Google Apps ScriptのWebアプリケーションに関数の結果を出力する

無事に関数の結果がWebページに反映をされていますね。

まとめ

Google Apps Scriptで作成したWebページにスクリプトの結果を表示をすることができました。

<?= … ?>タグさえ使えば、簡単にGoogle Apps Scriptのスクリプトを埋め込んでその結果を出力できます。

さて、次回ですがGoogle Apps Scriptらしく、スプレッドシートの内容を表示させてみたいと思います。

連載目次:Google Apps ScriptでWebアプリケーションを作る

Google Apps Scriptではスクリプトを埋め込んだWebアプリケーションを作ることもできます。スプレッドシートや外部のAPIを連携するようなWebアプリケーションを、サーバー準備不要、無料で構築し、公開することができます。本シリーズでは初心者向けに、GASでWebアプリケーションを作る方法を順を追ってお伝えします。
  1. Google Apps ScriptでWebアプリケーションを作る最初の一歩
  2. Google Apps Scriptで作るWebページにスクリプトの結果を出力して表示してみる

どうぞお楽しみに!