gas
vue.js

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

こちらの記事は
GASとVueでサーバレス社内チーム向け工数管理

の詳細記事その①です。

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

gsファイルを新規作成

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

スクリーンショット 2018-08-06 13.06.42.png

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

スクリーンショット 2018-08-06 13.09.29.png

HTMLファイルを新規作成

「ファイル」から「新規作成」を選んで「HTMLファイル」を選んでクリック。その後にファイル名の入力を求められるのでファイル名(拡張子なし)を入力して「OK」を選びましょう。ここでは「index」と入力したとします。
スクリーンショット 2018-08-06 14.57.13.png

「OK」を押した後にhtmlファイルが出来上がっています。
スクリーンショット 2018-08-06 16.29.02.png
あとでこのページを公開させる作業をするので、適当にテキストでも入れておきましょう。

GASでHTMLを表示させる実装

HTML Service: Best Practices

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

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

その後、「公開」から「ウェブアプリケーションの導入」をクリックで
スクリーンショット 2018-08-06 15.54.37.png

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

「導入」ボタンを押すと
スクリーンショット 2018-08-06 16.52.25.png
固有のIDが付いたURLが表示されます。
下の「最新コード」が開発環境のURLになります。

URLにアクセス

こんな感じでページが表示されればOKです。
スクリーンショット 2018-08-06 16.54.34.png

CSS,JSを外部ファイル化

cssやjsファイルをGASで作成できません。(2018.8月現在)
できませんが、HTML Service: Best Practicesでも説明している通りにすれば外部ファイルをインクルード出来るようになります。
「CODE.gs」にincludeという関数が使えるように以下の記述を追加します。

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

「CODE.gs」は以下の2つの記述になりました。
スクリーンショット 2018-08-08 11.18.34.png

まずは、「index.html」を作った時と同様に「css.html」「js.html」を作ります。
それを

<?!= include('css'); ?>

というように記述すれば外部ファイルを取り込めます。
スクリーンショット 2018-08-06 16.59.33.png

css.html

スクリーンショット 2018-08-06 16.01.37.png

js.html

スクリーンショット 2018-08-06 16.01.43.png

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

版を管理する

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

今回のCSSとJSの記述を追加したバージョンを保存します。
ファイルから「版を管理...」を選択。
スクリーンショット 2018-08-06 15.56.28 1.png

コメントを記入して「新しいバージョンを保存」ボタンをクリック
スクリーンショット 2018-08-06 17.09.23.png

「公開」から「ウェブアプリケーションの導入」をクリックでプロジェクトバージョンを選んで「更新」ボタンをクリック
スクリーンショット 2018-08-06 17.11.18.png
公開URLを更新するとこんな感じでCSSとJSが反映されていればOKです。
スクリーンショット 2018-08-06 17.12.45.png

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

お次はこちらです