Webアプリケーション開発とHtml Service (4/7)
作成:2012-07-04 09:42
更新:2012-07-04 09:42
更新:2012-07-04 09:42
■HTMLファイルを作成する
Webアプリケーションとしての公開の手順がわかったところで、今度はHTMLファイルを作成して表示させることにしましょう。
スクリプトエディタで、＜新規＞メニューの＜新規作成＞から＜HTMLファイル＞サブメニューを選びます。現れたダイアログでファイル名を記入してください。ここでは「index」と記入しましょう（index.htmlではなく、indexだけでOKです）。これで、index.htmlというファイルが作成されます。
作成したHTMLファイルに、適当にHTMLのコードを記述します（サンプルを下のリスト欄に掲載しておきます）。後は、先ほどの公開アドレスにアクセスしたら、このHTMLファイルをロードして表示すればいいわけです。
では、スクリプトを修正しましょう。下のリスト欄に掲載したように、doGet関数を書き換えてください。これでindex.htmlが表示されるようになります。
再びバージョン管理で最新の状態を保存し、そのバージョンを指定してWebアプリケーション公開を行いましょう。アクセスすると、作成したindex.htmlの内容が一瞬遅れて表示されます。「一瞬遅れて」というのは、つまりこの表示が、単純にindex.htmlをロードしているのではなく、Ajaxによってロードされているためです。
●HtmlServiceについて
ここでは、doGet関数で「HtmlService」というオブジェクトを利用しています。これはHTMLファイルの利用に関する機能をまとめたものです。今回は、この中の「createHtmlOutputFromFile」というメソッドを呼び出しています。
スクリプトエディタで、＜新規＞メニューの＜新規作成＞から＜HTMLファイル＞サブメニューを選びます。現れたダイアログでファイル名を記入してください。ここでは「index」と記入しましょう（index.htmlではなく、indexだけでOKです）。これで、index.htmlというファイルが作成されます。
作成したHTMLファイルに、適当にHTMLのコードを記述します（サンプルを下のリスト欄に掲載しておきます）。後は、先ほどの公開アドレスにアクセスしたら、このHTMLファイルをロードして表示すればいいわけです。
では、スクリプトを修正しましょう。下のリスト欄に掲載したように、doGet関数を書き換えてください。これでindex.htmlが表示されるようになります。
再びバージョン管理で最新の状態を保存し、そのバージョンを指定してWebアプリケーション公開を行いましょう。アクセスすると、作成したindex.htmlの内容が一瞬遅れて表示されます。「一瞬遅れて」というのは、つまりこの表示が、単純にindex.htmlをロードしているのではなく、Ajaxによってロードされているためです。
●HtmlServiceについて
ここでは、doGet関数で「HtmlService」というオブジェクトを利用しています。これはHTMLファイルの利用に関する機能をまとめたものです。今回は、この中の「createHtmlOutputFromFile」というメソッドを呼び出しています。
変数 = HtmlService.createHtmlOutputFromFile( HTMLファイル名 );このように、引数にHTMLファイル名（.htmlの拡張子をのぞいたもの）を指定します。返り値は、「HtmlOutput」というオブジェクトになります。これはHtmlの出力を管理するオブジェクトで、これをそのままreturnで返すことにより、指定したHTMLを出力させることができます。このHtmlService.createHtmlOutputFromFileは、HTML出力の基本として覚えておきましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※index.htmlの例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample jsp</title>
<style>
h1 {font-size:16pt; background:#AAFFAA;padding:5px;}
p {margin:10px;}
</style>
</head>
<body>
<h1>Sample jsp page</h1>
<p>これはサンプルで用意したページです。</p>
</body>
</html>
※スクリプト
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('index');
return output;
}
※関連コンテンツ
「Google Apps Scriptプログラミング [中級編]」に戻る