《 前回
何パートかに分けてGoogle Apps Scriptでオンライン人狼ウェブアプリを作ります。
関数「doGet」
function ○○( ) の○○にあたる関数名、ここにdoGetを指定すると、スクリプトの公開URL(後述)を開いたときに自動で実行される関数を作ることができます。Webアプリを作る際は必須の関数です。
HTMLを作る
GASではHTMLを作ることができます。メニューバーの ファイル＞新規作成＞HTMLファイル で作成。ファイル名に拡張子.htmlをつける必要はありません。付けると「index.html.html」みたいなファイル名になってしまいます。
今回はindex.htmlにしておきます。
HTML編集画面が表示されたら、以下のコードを入力してみてください。なんの変哲もない、ただのHello GAS!が表示されるHTMLです。あ、入力したら、保存ボタン押してくださいね。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<span>Hello GAS!</span>
</body>
</html>
<span></span>タグはインライン要素を作るタグです......って、これは大丈夫ですよね？HTMLの書き方はあんまり解説しませんので、ググってください。
HTMLを表示する
doGetで表示
さて、HTMLを表示するには、コード.gsのdoGet関数を利用します。HtmlServiceクラスのメソッド「createHtmlOutputFromFile」を用いて、コード.gsに以下のように入力してください。前回のmyFunctionは消しても消さなくてもどっちでもいいです。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
}
公開
入力したら公開します。メニューバーの 公開＞ウェブアプリケーションとして導入 をクリックします。
変更内容の説明は書いても書かなくても問題ないです。
「次のユーザーとしてアプリケーションを実行」で「自分」を選択すると、公開したWebアプリを誰が実行しても、オーナーのアカウントが実行したことになります。「ウェブアプリケーションにアクセスしているユーザー」にすると、アクセスしているユーザーとして実行されます。
「アプリケーションにアクセスできるユーザー」で、共有範囲を選択できます。今回は練習用のスクリプトなので、「自分だけ」にしています。
これで公開が完了しました。
「最新のコード」をクリックして確認してみましょう。以下のように表示されていれば、見事HTMLが表示できました。
タイトルは...？
ブラウザのタブをよくみてください。タイトル、設定してませんよね。設定しましょう。<head></head>内に<title></title>を追加しようとしたそこのあなた。私もそうなりました。というか普通タイトル付けるとなると<title></title>でしょ！？GASは違うんですよねー...
GASのHTMLにタイトルをつけるには、HtmlServiceクラスのメソッド「setTitle」を使います。以下のように入力してください。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index').setTitle('GAS練習');
}
これでタイトルが付きます。先ほどのURLにもう一度アクセスしてみてください。
タイトル付きましたね。
<meta>も実は...
ちなみに<meta>も利用が制限されています。サポートされている<meta>タグは以下の二つです。
<meta name="google-site-verification" content="..."/>
<meta name="viewport" content="..."/>
これらのタグの詳細は以下で解説しますので、<meta>の挿入方法を説明しておきます。
viewportの場合、コード.gsに以下のように入力します。
function doGet() {
return HtmlService.createHtmlOutputFromFile('index').setTitle('GAS練習').addMetaTag('viewport', 'width=device-width, initial-scale=1, user-scalable=no');
}
.setTitleの後ろのそのまま.addMetaTagをメソッドチェーンで記述できます。
<meta name="google-site-verification" content="..."/>
「サイトの最上位のページにこのタグを挿入すると、Search Console で所有権を確認できます。name 属性と content 属性は、大文字と小文字の区別など、指定されたとおりに記述する必要があります。ただし、XHTML から HTML にタグを変更したり、タグのフォーマットをページのフォーマットと同じにしたりしてもかまいません。詳細情報」
Googleサポートより
<meta name="viewport" content="..."/>
これは一般的なviewportです。一般的に以下のように書きます。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
というわけで、
今回はここまでです。まだTemplateHTMLについて書いてないんですが、それはオンライン人狼もどきを作りながら説明していきます。
次回からオンライン人狼的さむしんぐ、作っていきます。ではまた〜
(最後まで投稿できるかな...高3だし...)