GASでオンライン人狼的な何かを作る #2

[《 前回](http://qiita.com/TakumaKawashiro/items/fcc7dc6ac0e919dbf813)
　何パートかに分けてGoogle Apps Scriptでオンライン人狼ウェブアプリを作ります。

# 関数「doGet」
　function ○○( ) の○○にあたる関数名、ここにdoGetを指定すると、スクリプトの公開URL(後述)を開いたときに自動で実行される関数を作ることができます。Webアプリを作る際は必須の関数です。

# HTMLを作る
　GASではHTMLを作ることができます。メニューバーの ファイル＞新規作成＞HTMLファイル で作成。ファイル名に拡張子.htmlをつける必要はありません。付けると「index.html.html」みたいなファイル名になってしまいます。
![makeNewFile](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/makeNewFile.png)

　今回はindex.htmlにしておきます。
　HTML編集画面が表示されたら、以下のコードを入力してみてください。なんの変哲もない、ただのHello GAS!が表示されるHTMLです。あ、入力したら、保存ボタン押してくださいね。

```lang:index.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は消しても消さなくてもどっちでもいいです。

```lang:コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
}
```

## 公開
　入力したら公開します。メニューバーの 公開＞ウェブアプリケーションとして導入 をクリックします。
![publish](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/publish.png)

　変更内容の説明は書いても書かなくても問題ないです。
　「次のユーザーとしてアプリケーションを実行」で「自分」を選択すると、公開したWebアプリを誰が実行しても、オーナーのアカウントが実行したことになります。「ウェブアプリケーションにアクセスしているユーザー」にすると、アクセスしているユーザーとして実行されます。
「アプリケーションにアクセスできるユーザー」で、共有範囲を選択できます。今回は練習用のスクリプトなので、「自分だけ」にしています。
![property](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/property.png)　
これで公開が完了しました。


![published](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/publushed.png)
　「最新のコード」をクリックして確認してみましょう。以下のように表示されていれば、見事HTMLが表示できました。
![hello_gas](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/hello_gas.png)

## タイトルは...？
　ブラウザのタブをよくみてください。タイトル、設定してませんよね。設定しましょう。`<head></head>`内に`<title></title>`を追加しようとしたそこのあなた。私もそうなりました。というか普通タイトル付けるとなると`<title></title>`でしょ！？GASは違うんですよねー...
　GASのHTMLにタイトルをつけるには、HtmlServiceクラスのメソッド「setTitle」を使います。以下のように入力してください。

```lang:コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index').setTitle('GAS練習');
}
```
　これでタイトルが付きます。先ほどのURLにもう一度アクセスしてみてください。
![hello_gas_withTitle](https://98234cd82ec58ffed0b982e5fd3862b173cc95a2.googledrive.com/host/0B3kxjwKeIe_3bXFCRktpUE56Tm8/hello_gas_withTitle.png)

　タイトル付きましたね。

## `<meta>`も実は...
　ちなみに`<meta>`も利用が制限されています。サポートされている`<meta>`タグは以下の二つです。
`<meta name="google-site-verification" content="..."/>`
`<meta name="viewport" content="..."/>`
これらのタグの詳細は以下で解説しますので、`<meta>`の挿入方法を説明しておきます。
　viewportの場合、コード.gsに以下のように入力します。

```lang:コード.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 にタグを変更したり、タグのフォーマットをページのフォーマットと同じにしたりしてもかまいません。[詳細情報](https://support.google.com/webmasters/answer/35659)」
[Googleサポート](https://support.google.com/webmasters/answer/79812?hl=ja)より

### `<meta name="viewport" content="..."/>`
　これは一般的なviewportです。一般的に以下のように書きます。
`<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">`



# というわけで、
　今回はここまでです。まだTemplateHTMLについて書いてないんですが、それはオンライン人狼もどきを作りながら説明していきます。
　次回からオンライン人狼的さむしんぐ、作っていきます。ではまた〜

(最後まで投稿できるかな...高3だし...)