Google Apps ScriptでWebアプリケーションにスプレッドシートの値を出力する


embed-letter

photo credit: Dai Lygad E via photopin (license)

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

初心者向けGoogle Apps Script(GAS)によるWebアプリケーションの作り方シリーズです。

前回の記事はコチラでした。

Google Apps Scriptで作るWebページにスクリプトの結果を出力して表示してみる
初心者向けにGoogle Apps ScriptによるWebアプリケーションの作り方をシリーズでお伝えしています。今回はWebページにスクリプトの結果を出力して表示をさせてみたいと思います。

GASの結果による出力をWebページ埋め込む方法についてお伝えしました。

と言っても、日付とか「Hello!」とかその程度ですけどね。

前回はGASの結果を出力したのですが、今回はWebページにGASのスクリプト自体の埋め込む方法についてお伝えをします。

GASっぽく、スプレッドシートのデータを取り扱ってみたいと思います。

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

スポンサーリンク

今回のお題

まず、今回のお題を確認していきましょう。

以下のようなスプレッドシートがあります。

Webページに出力するスプレッドシートのデータ

A1~A20セルの値を、Webページ上にリスト表示していきたいと思います。

簡単そうですか?

はい、まあまあ簡単です。

Google Apps ScriptをWebページに埋め込む

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

<? … ?>

なんか前回のと似てますが、今回のは「=」がありません。これをスタンダードスクリプトレットタグといいます。

そうです、前回お伝えしたのは、GASの結果を表示するというものでしたが、その場合に使うタグは出力スクリプトレットタグ

<?= … ?>

でしたね。

「結果」を埋め込むときは出力スクリプトレットタグ、「スクリプト自体」を埋め込むときはスタンダードスクリプトレットタグ、という使い分けになりますよ。

スプレッドシートの値をWebページにリストする

では、早速作っていきましょう。

まず、URLのアクセス時に最初に呼び出されるdoGetを「コード.gs」に書きます。

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

これはシンプルですね。

HTMLファイル「hello.html」は先ほどのスクリプトを埋め込むタグを使ってこのように書きます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <ul>
      <?
        var myData = SpreadsheetApp.getActiveSheet().getDataRange().getValues();
        for(var i=0;i<myData.length;i++){
          output.append('<li>' + myData[i][0] + '</li>');
        }
      ?>
    </ul>
</body>
</html>

8行目~13行目が埋め込んだスクリプトになります。

  • 9行目:スプレッドシートの使用しているデータ範囲のデータを配列として取込
  • 10行目:配列の要素数だけ繰り返し
  • 11行目:配列の要素を成形してWebページに出力

という流れです。

それ以外は単純なHTMLですね。

output.appendメソッドでHTMLテンプレートに出力

前述のとおり、<? … ?>はスクリプトの埋め込みですから、スクリプトに「何かしらを出力する」という命令がなければ、Webページ上に何の変化も起きません。

そこでoutput.appendメソッドの登場です。

output.appendメソッドはHTMLテンプレートに文字列を出力するメソッドです。

output.append(文字列)

基本的には文字列は何らかのHTMLタグをセットで指定することが多いと思います。

出力スクリプトレットタグ「<?= … ?>」とは状況に応じての使い分けですね。

公開されたWebページ

このWebアプリケーションを公開すると、最初はスプレッドシートへのアクセス承認を求められると思います。

承認をして、ページを確認すると、このような画面になるはずです。

スプレッドシートのデータをWebページに出力

たとえ、リストが100でも簡単に表示できますよ。

まとめ

WebページにGoogle Apps Scriptスクリプト自体を埋め込む方法についてお伝えしました。

二種類のスクリプトレットタグの使い分けと、output.appendメソッドが基本になります。

これらを使えば、あとはHTML、CSS、JavaScriptそしてGASの組み合わせで様々なアプリケーションが実現できるというわけですね。

次回はCSSによるスタイルを試していきたいと思います。

Google Apps ScriptのWebアプリケーションにCSSでスタイル設定をする
Google Apps ScriptでWebアプリケーションを作る方法についてお伝えしています。今回GASのWebアプリケーションにCSSでスタイル設定をする方法です。CSSを別ファイルにする方法もありますよ。

どうぞお楽しみに!

連載目次: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でスタイル設定をする

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