Google Apps Script でHTMLファイルを作って表示。

こちらの記事は
[GASとVueでサーバレス社内チーム向け工数管理](https://qiita.com/taromorimotohf/items/711d01557c7b08b842f1)

の詳細記事その①です。

##Google Apps Script でHTMLファイルを作って表示。

### gsファイルを新規作成
まずはGoogleドライブから 新規を押すと 画像のようなモーダルが出るので、「その他」にカーソルをもっていくと下記のように表示されるので「Google Apps Script」をクリック。

<img width="648" alt="スクリーンショット 2018-08-06 13.06.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/9660caf5-ed32-b682-493f-4564f3ff3a8d.png">



その後ページ遷移されて以下の画面になります。（2018.8月現在）
マイコードgsに関してはデフォルトで表示されるので、特に今は気にしなくて大丈夫です。
後ほどこちらのgsファイルに実装コードを記載します。
ファイル名は「CODE.gs」としておきます。（なんでもOKです。）

<img width="885" alt="スクリーンショット 2018-08-06 13.09.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/31cb6230-eb82-814d-4c20-ba7afb2c63b6.png">



### HTMLファイルを新規作成
「ファイル」から「新規作成」を選んで「HTMLファイル」を選んでクリック。その後にファイル名の入力を求められるのでファイル名（拡張子なし）を入力して「OK」を選びましょう。ここでは「index」と入力したとします。
<img width="553" alt="スクリーンショット 2018-08-06 14.57.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/ae5081ab-3524-f03e-b9d4-c0c0e9fd349b.png">



「OK」を押した後にhtmlファイルが出来上がっています。
<img width="360" alt="スクリーンショット 2018-08-06 16.29.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/c76c8233-f63e-e61e-57aa-f51eb048690e.png">
あとでこのページを公開させる作業をするので、適当にテキストでも入れておきましょう。


### GASでHTMLを表示させる実装
[HTML Service: Best Practices](https://developers.google.com/apps-script/guides/html/best-practices)

上記記述方法に乗っ取って「CODE.gs」にコピペします。

```
function doGet() {
  var template = 'index';
  return HtmlService.createTemplateFromFile(template).evaluate();
}
```

その後、「公開」から「ウェブアプリケーションの導入」をクリックで
<img width="453" alt="スクリーンショット 2018-08-06 15.54.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/4cd2c38e-bf92-7d41-c3ac-f89f52587cb0.png">

変更内容の説明の入力は空白でも問題ないです。
「次のユーザーとしてアプリケーションを実行」は自分の場合は自分のGoogleアカウントで実行したことになります。
「ウェブアプリケーションにアクセスしているユーザー」は、アクセスしているユーザーとして実行されます。
「アプリケーションにアクセスできるユーザー」で、共有範囲を選択できます。


「導入」ボタンを押すと
<img width="441" alt="スクリーンショット 2018-08-06 16.52.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/0644ce83-4f4b-b79e-057f-c425ed7f10fd.png">
固有のIDが付いたURLが表示されます。
下の「最新コード」が開発環境のURLになります。

##URLにアクセス
こんな感じでページが表示されればOKです。
<img width="605" alt="スクリーンショット 2018-08-06 16.54.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/332f71fd-b17a-e0ee-9c21-bbfe89a61d48.png">

##CSS,JSを外部ファイル化
cssやjsファイルをGASで作成できません。（2018.8月現在）
できませんが、[HTML Service: Best Practices](https://developers.google.com/apps-script/guides/html/best-practices)でも説明している通りにすれば外部ファイルをインクルード出来るようになります。
「CODE.gs」にincludeという関数が使えるように以下の記述を追加します。

```
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
```

「CODE.gs」は以下の２つの記述になりました。
<img width="566" alt="スクリーンショット 2018-08-08 11.18.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/53f157c4-c73b-b310-1dff-5d84887781c8.png">

まずは、「index.html」を作った時と同様に「css.html」「js.html」を作ります。
それを
```
<?!= include('css'); ?>
```
というように記述すれば外部ファイルを取り込めます。
<img width="463" alt="スクリーンショット 2018-08-06 16.59.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/a20b84ad-8dda-4c89-b90b-b2c2ef6a17e8.png">

####css.html
<img width="282" alt="スクリーンショット 2018-08-06 16.01.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/f4a09255-c1e1-4a6c-a53e-bcb4dee7795d.png">

####js.html
<img width="316" alt="スクリーンショット 2018-08-06 16.01.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/95dcd4b8-7684-9e9c-a8f6-beda3a863292.png">

という感じでインライン記述で記述します。

##版を管理する
GASにはバージョン管理があり、一度ウェブアプリケーションに導入されると最新状態のバージョン（版）を管理して保存しないと公開されたページに反映されません。
※開発環境では反映されます。
公開URLは末尾が`exec`と記載があります。
開発環境URLは末尾が`dev`と記載があります。

今回のCSSとJSの記述を追加したバージョンを保存します。
ファイルから「版を管理...」を選択。
<img width="339" alt="スクリーンショット 2018-08-06 15.56.28 1.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/efe273aa-daad-6315-93ba-67c9ccbb1b53.png">

コメントを記入して「新しいバージョンを保存」ボタンをクリック
<img width="693" alt="スクリーンショット 2018-08-06 17.09.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/63ad3594-7441-2710-6ccf-cb565a43ab7f.png">

「公開」から「ウェブアプリケーションの導入」をクリックでプロジェクトバージョンを選んで「更新」ボタンをクリック
<img width="433" alt="スクリーンショット 2018-08-06 17.11.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/291de659-9271-b8d7-fc56-c772d9910f4e.png">
公開URLを更新するとこんな感じでCSSとJSが反映されていればOKです。
<img width="1286" alt="スクリーンショット 2018-08-06 17.12.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/212582/bb35dd67-df7c-d8fd-119f-a9750ba831b2.png">


以上です。お疲れ様でした。

[お次はこちらです](https://qiita.com/taromorimotohf/items/82a02bdeb21b1d74c5e8)