65
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

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

お次はこちらです

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
65
Help us understand the problem. What are the problem?