Google Apps Script でHTMLページを表示するWebアプリケーションを作成する
Google Apps Script でHTMLページを表示するWebアプリケーションを作成する手順を紹介します。
手順
プロジェクトの作成
Googleドライブにアクセスします。
画面左上の[+新規]ボタンをクリックします。ドロップダウンメニューが表示されますので、[その他]メニューの[Google Apps Script]をクリックします。
コード編集画面が表示されます。
[ファイル]メニューの[名前の変更]をクリックします。
[プロジェクト名の編集]ポップアップウィンドウが表示されます。
[新しいプロジェクト名を入力してください]のテキストボックスにプロジェクト名を入力します。今回は "SimpleWebApp" としました。入力後ポップアップウィンドウの[OK]ボタンをクリックします。
プロジェクト名の変更が実行されます。
プロジェクト名の変更が完了しました。
HTMLファイルの追加
続いて[ファイル]メニューの[新規作成]サブメニューの[HTML ファイル]の項目をクリックします。
[ファイルを作成]ポップアップウィンドウが表示されます。[新しいファイル名を入力してください]のテキストボックスに作成するHTMLファイルの名称を入力します。
今回は "index.html" をファイル名とします。入力後、ポップアップウィンドウの[OK]ボタンをクリックします。
HTMLファイルが作成され、作成されたindex.htmlファイルの編集画面が表示されます。
HTMLファイルを編集します。
今回は下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p>Hello Google Apps Script World!</p>
</body>
</html>
上部のツールバーのフロッピーディスクのアイコンのボタン[保存]ボタンをクリックするか、[ファイル]メニューの[保存]をクリックして編集内容を保存します。
Google Apps Scriptファイルの実装
左側のメニュー部の[コード.gs]をクリックします。コード.gs の Google Apps Script編集画面が表示されます。
doGet()メソッドを実装します。
下記のコードを記述します。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index.html');
}
解説
WebアプリケーションのURLにアクセスするとdoGet()関数が実行されます。doGet()関数の戻り値の文字列がクライアントに返されるコンテンツになります。関数内の下記コードの HtmlService.createHtmlOutputFromFile() メソッドにより引数に与えたファイルをHTMLの文字列として返します。
return HtmlService.createHtmlOutputFromFile('index.html');
Webアプリケーションの公開
実装したWebアプリケーションを公開します。コードエディタの[公開]メニューの[ウェブ アプリケーションとして導入]をクリックします。
下図の[ウェブアプリケーションとして導入]のポップアップウィンドウが表示されます。
[プロジェクトバージョン]を "新規作成" [次のユーザーとしてアプリケーションを実行]を"ウェブ アプリケーションにアクセスしているユーザー" に、[アプリケーションにアクセスできるユーザー]を "全員" に設定します。設定ができたら[導入]ボタンをクリックします。
「このプロジェクトをウェブアプリケーションとして導入しました。」のメッセージが表示されます。[現在のウェブ アプリケーションのURL]にウェブアプリケーションのURLが表示されます。
ウェブアプリケーションのURLにブラウザでアクセスします。下図がの面が表示されます。"Hello Google Apps Script World!" の文字が表示されており、index.html の内容がWebアプリケーションの出力として表示されます。
Google Apps Script でHTMLページを表示するWebアプリケーションを作成できました。
著者
iPentecの企画・分析担当。口が悪いのでなるべく寡黙でありたいと思っている。が、ついついしゃべってしまい、毎回墓穴を掘っている。
