GASによるWebAppについて"もっと"入門向けに書いてみる

Google Apps Script (以下GAS) はスプレッドシートの値を読み書きしたり、Gmailやカレンダーと連携したツールを実現することが出来ますが、ブラウザでURLを入力してHTMLを表示するWebアプリケーションを作ることも出来ます。


## どんな人に読んでほしいか
- GASを書いたことがある
- HTML, JavaScript を書いたことがある
- 自由なHTMLを書こうとしたが、Googleサイトでは挫折した
- 無料のインフラで手軽にWebアプリを作りたい
- すぐに忘れる （著者）

## この記事のゴール
- 純粋なHTMLのHelloWorld を作る

## 今後のゴール
今後の記事で下記についてもテクニックを紹介します。

- HTML, JavaScript, CSS を活用したページを作る
- 外部ライブラリ `jQuery`, `Bootstrap` を使う
- ページ遷移やスプレッドシートと連携する
- ToDoアプリを作る


# 純粋なHTMLのHelloWorld を作る
それでは本章に入ります。
ここでは最低限の構成でWebアプリ(Webページ)を表示することを実現します。
まずは、GoogleDriveから スプレッドシート もしくは GoogleAppsScript を作成します。
![スクリーンショット 2017-12-18 2.14.28.png](https://qiita-image-store.s3.amazonaws.com/0/973/5b61bf67-6365-a5ae-c3e9-85ae6e972e8e.png)

スプレッドシートの方は、 `ツール > スクリプトエディタ` と進みましょう。 なお、私は事前にファイル名を変更する習慣をつけています。
![スクリーンショット 2017-12-18 2.20.04.png](https://qiita-image-store.s3.amazonaws.com/0/973/60a21813-85d9-171b-8d74-43d33bfb6190.png)

スクリプトエディタが立ち上がりました。こちらも最初に名前をつけておきます。
![スクリーンショット 2017-12-18 2.23.16.png](https://qiita-image-store.s3.amazonaws.com/0/973/c3631d89-1ac7-c2ba-89eb-247e58ce7775.png)

続いて、 `ファイル > 新規作成 > HTML ファイル` を選択しましょう。ファイル名は `hello.html` とします。
![スクリーンショット 2017-12-18 2.26.29.png](https://qiita-image-store.s3.amazonaws.com/0/973/f111b91d-b3cd-7cbe-e781-d056e2523681.png)
![スクリーンショット 2017-12-18 2.29.19.png](https://qiita-image-store.s3.amazonaws.com/0/973/415c35a3-8fb2-781e-87a5-8d9506e61312.png)

HTMLファイルが作成されました。GASの中での複数ファイル切り替えは、画面左側で行います。
![スクリーンショット 2017-12-18 2.30.12.png](https://qiita-image-store.s3.amazonaws.com/0/973/a61be16e-ed1d-23cb-23d0-d540d93f28ea.png)

ではHTMLファイルを編集しましょう。 無心にコピペできるように今回はHTML全文を記載します。

```html:hello.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>HelloWorld</h1>
  </body>
</html>
```

続いて、 `コード.gs` を編集します。 こちらも下記コードをコピペしましょう。その際、 最初からある `myFunction` は使わないので削除しておきます。

```js:コード.gs
function doGet() {
  var template = HtmlService.createTemplateFromFile('hello.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
```

下図のようになっていると思います。
![スクリーンショット 2017-12-18 2.42.43.png](https://qiita-image-store.s3.amazonaws.com/0/973/aef2e0aa-3703-7601-4cef-87351e74d7ec.png)

ソースコードの編集は以上です。 次にWebアプリとして表示するための準備を進めます。
`公開 > ウェブアプリケーションとして導入...` を選択します。 
![スクリーンショット 2017-12-18 2.47.04.png](https://qiita-image-store.s3.amazonaws.com/0/973/6d5b19f2-8370-7401-8fe4-f8b7aecf027f.png)

そのまま `導入` ボタンを押します。
![スクリーンショット 2017-12-18 2.48.40.png](https://qiita-image-store.s3.amazonaws.com/0/973/89f05f9c-326a-7960-2284-66931b82379b.png)

下図のようになります。 入力ボックスに表示されているURLをコピーしましょう。
![スクリーンショット 2017-12-18 2.49.39.png](https://qiita-image-store.s3.amazonaws.com/0/973/47768b4b-cd88-254c-17bb-2b6efce2a7b6.png)

コピーしたURLを新規タブに貼り付けます。
![スクリーンショット 2017-12-18 2.50.51.png](https://qiita-image-store.s3.amazonaws.com/0/973/7e163238-ae97-df72-d294-8f5de285ffd5.png)

おや… `現在、ファイルを開くことが出来ません` とエラーが発生しました。これは想定外です。 現時点でのGoogleのバグでしょう。よくあることです。
![スクリーンショット 2017-12-18 2.55.36.png](https://qiita-image-store.s3.amazonaws.com/0/973/8c33003a-f24c-3828-662b-49d2592e055d.png)

表示されているURLに不具合があるようです。G Suite環境下だけかもしれません。URLを少し加工します。

```text:編集前
https://script.google.com/macros/u/0/s/AKfycbzTpXISHiP94a4mAPYBUbMIwqLyI-W-BXB7Xb0zFA-O1H99TrE/exec
```

```text:編集後(u/0/を削除)
https://script.google.com/macros/s/AKfycbzTpXISHiP94a4mAPYBUbMIwqLyI-W-BXB7Xb0zFA-O1H99TrE/exec
```

無事表示できました。
![スクリーンショット 2017-12-18 3.03.01.png](https://qiita-image-store.s3.amazonaws.com/0/973/8905dc79-e5f4-8404-0cc6-0fbafd41158d.png)

これで純粋なHTMLを表示することが出来ました。

次の話に進む前に、少し表示する文字を変更してみましょう。
HTMLの `HelloWorld` の文字を `HelloGASWorld` に変更してみましょう。変更したら忘れずに上書き保存です。
![貼り付けた画像_2017_12_18_3_07.png](https://qiita-image-store.s3.amazonaws.com/0/973/d5e2d433-6874-4926-9d67-084a80a4c9f8.png)

もう一度先程のURLを開いて更新します。
どうでしょう？ `HelloGASWorld` と表示されていますか？ 変更が反映されず `HelloWorld` と表示されていると思います。
Webアプリで変更を反映させるためには `プロジェクトバージョン` を更新する必要があります。
`公開 > ウェブアプリケーションとして導入...` へ進み、プロジェクトバージョンを `新規作成` にします。
<img width="229" alt="_GAS__HelloWorld_WebApp.png" src="https://qiita-image-store.s3.amazonaws.com/0/973/c518c72e-b9d7-ff09-ca87-0a17d25fd5ec.png">

続いて `更新` ボタンを押します。 この際、前回と同じURLが再度表示されます。
先ほど開いていたページを改めて更新してみましょう。今度は変更が反映されていると思います。
![スクリーンショット 2017-12-18 3.16.49.png](https://qiita-image-store.s3.amazonaws.com/0/973/8bdd7b1a-c632-b6f0-b904-525953d3daa6.png)

### 開発中の確認作業を短縮するテクニック
ここで開発中の確認作業を短縮するテクニックを紹介します。開発中に自身が確認する場合はプロジェクトバージョンの更新の手間を省くことが出来ます。

`公開 > ウェブアプリケーションとして導入...` へ進み、 `最新のコードをテストします` を開きます。
ここで先ほどと同様の `現在、ファイルを開くことが出来ません` エラーが出てしまいました。 `u/0/` を削除して再挑戦します。
いかがでしょう、 `HelloGASWorld` が表示されたでしょうか。

試しにHTMLを編集してみましょう。 `HelloGASWorld` を `YahooGASWorld` に変更してみます。上書き保存を忘れずに。

今回は、ウェブアプリケーションとして導入 には進まず、 `最新のコード` で開いたタブをページ更新しましょう。 更新が反映されていました。
![スクリーンショット 2017-12-18 3.30.12.png](https://qiita-image-store.s3.amazonaws.com/0/973/9ae0d1b6-635c-f1a8-4e92-29c4a7bc15ef.png)

以下は私個人がよくやる作業なのですが、開発中テスト用のURLと展開用のURL(ウェブアプリケーションとして導入のURL) をソースコード冒頭にコメントとしてメモしています。
![スクリーンショット 2017-12-18 3.38.52.png](https://qiita-image-store.s3.amazonaws.com/0/973/8e6345bb-d52f-d3b1-52bb-fbaf8eb67dff.png)

それぞれURLの末尾を見ると区別がつきます。

- `/exec`
  - 展開用URL
  - ウェブアプリケーションとして導入した際に設定した閲覧範囲がこのURLで表示できます。
- `/dev`
  - 開発中テストURL
  - 原則、開発者しか表示できません。他者はこのURLを開くと スプレッドシート or GoogleAppsScriptの権限リクエストする画面が表示されます。

## まとめ
この記事ではGASでのWebアプリの "もっと"入門として、純粋なHTMLを表示することを紹介しました。
少しの開発中の作業効率化についても紹介しました。

著者も記述中に想定しないエラーもありました。悲しくもGASでは __あるある__ だと思っています。とても難しいですが工夫を利かせて乗り切っていきましょう。

### 参考文献
1. [Google Apps ScriptでWebアプリケーションを作る最初の一歩 - いつも隣にITのお仕事](https://tonari-it.com/gas-web-application-beginner/)
  - GASでのWebアプリを作り始める際、同僚に共有する際によく閲覧しています。