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」です。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>こんにちは!</h1>
  </body>
</html>
function doGet() {
  return HtmlService.createTemplateFromFile("hello").evaluate();
}

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

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

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

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

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

<?= … ?>

このタグを出力スクリプトレットタグと言います。

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

<!DOCTYPE html>
<html>
  <head>
  <base target="_top">
  </head>
  <body>
  今日の日付は<?= new Date(); ?>
  </body>
</html>

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

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

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

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

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

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

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

function doGet() {
  var html = HtmlService.createTemplateFromFile("hello");   
  return html.evaluate();
}

function getData(alg){
  if(alg == "title"){
    return "Hello!";
  }else if(alg == "body"){
    return "これはHTMLページの本文に表示するテキストです";
  }
}

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

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title><?= getData("title"); ?></title>
  </head>
  <body>
    <h1><?= getData("title"); ?></h1>
    <?= getData("body"); ?>
  </body>
</html>

結果はこちら。

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

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

まとめ

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

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

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

Google Apps ScriptでWebアプリケーションにスプレッドシートの値を出力する
初心者向けGoogle Apps ScriptによるWebアプリケーションの作り方シリーズです。今回はWebページにGASのスクリプト自体の埋め込む方法についてです。二種のスクリプトレットタグを使います。

どうぞお楽しみに!

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

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

コメント

  1. Okazaki より:

    はじめまして、Okazakiです。

    記事を参考にソースを動かしてみたのですが「関数を呼び出した結果を出力する」所がうまく動きませんでした。
    何かヒントが無いかと、出版されている書籍を購入して見たのですが解決できませんでした。
    よろしければご教授いただけると嬉しいです。
    詳細は下記に投稿しております。
    ●詳細
    https://qiita.com/wwnokazaki/items/b04ceef687d2bf65ef7e

    • Okazakiさん

      おそらくdoGet関数の作り方に問題があると思います。

      function doGet() {
        return HtmlService.createHtmlOutputFromFile('index');
      }
      

      ではなくて

      function doGet() {
        var html = HtmlService.createTemplateFromFile("hello");   
        return html.evaluate();
      }
      

      を使ってみてください。

  2. Okazaki より:

    タカハシさん、コメントありがとうございます。
    無事に解決しました!

タイトルとURLをコピーしました