photo credit: kappuru why won’t you call? via photopin (license)
みなさん、こんにちは！
タカハシ(@ntakahashi0505)です。
初心者向けにGoogle Apps Scriptによる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ページの表示はこちらです。
現在の日時が表示されています。うまくいきましたね。
関数を呼び出した結果を出力する
もう一つのパターンを見てみましょう。
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>
結果はこちら。
無事に関数の結果がWebページに反映をされていますね。
まとめ
Google Apps Scriptで作成したWebページにスクリプトの結果を表示をすることができました。
<?= … ?>タグさえ使えば、簡単にGoogle Apps Scriptのスクリプトを埋め込んでその結果を出力できます。
さて、次回ですがGoogle Apps Scriptらしく、スプレッドシートの内容を表示させてみたいと思います。
どうぞお楽しみに！
コメント
はじめまして、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(); }を使ってみてください。
タカハシさん、コメントありがとうございます。
無事に解決しました！
Okazakiさん
無事に解決されてよかったです！