Google Apps Script でJavaScriptとCSSを外部ファイル化する方法

2018/08/18

Google Apps Script でHTMLファイルを作ってもJavaScriptコードをjsファイルとして外出しはできません。

プロジェクト内に作成できるのはHTMLファイルのみでjsファイルやcssファイルは作成できないです。以下の「スクリプトファイル」というのはGASのgsファイルで（構文は似ていても）クライアントサイドのjsファイルではありません。

なので、JavaScriptを記述する際はHTML内に埋め込むしかないのですが、ちょっとしたテクニックで外部ファイル化できるので紹介します。これはStyleSheetの外部ファイル化も同様に可能です。

[ad#top-1]

まずはGoogle Apps Script プロジェクトの作成

まずはプロジェクトの作成を行い、gsファイルとhtmlファイルを用意します。

やり方は以下のページを参照ください。

非IT企業に勤める中年サラリーマンのIT日記

Google Apps ScriptでWebページが作れる！

Webページを作ろうとすると、Webサーバーを用意しなければなりません。安いところはありますが、それでもお金がかかります。ところが、Google Drive上でGoogle Apps Scriptを使ってWebページを作れます。これにはびっくり。まず、Google Drive上で、「新規作成」から「Google Apps Script」を選択します。プロジェクト名は「WebTest」としました。次に、メニューの「ファイル」から「新規作成」－「HTMLファイル」を選びます。下のようなウィンドウが現れるので、ファイル名を入力します。今回は「index」とし...

コード.gsとindex.htmlファイルを用意しておきます。

まずはgsファイルにdoGet関数を記述します。これによりindex.htmlファイルとを紐付けします。

//コード.gs
function doGet(request) {
  var template = 'index';
  return HtmlService.createTemplateFromFile(template).evaluate();
}

次にindex.htmlファイルです。5行目と9行目に注目ください。ここが外部ファイルとの紐付けとなります。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?><!--注目-->
  </head>
  <body>
    <h1 id="test"></h1>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?><!--注目-->
  </body>
</html>

それでは外部ファイルを作っていきます。

メニューの「ファイル」−「新規作成」−「HTMLファイル」を選んでください。

新しいファイル名として「js」を入力します。

以下のように「js.html」が現れました。

js.htmlに以下のようなJavaScriptコードを書きましょう。

//js.html
<script>
  document.getElementById('test').textContent = 'Hello World!';
</script>

同じ要領で「css.html」ファイルも作り、以下のコードを書きましょう。

<style>
#test{
  color: #00f;
}
</style>

ウェブアプリケーションとして導入を行います。（詳しくは前出のリンクページで）

ご覧の通り外部jsファイルとcssファイルを認識しました。

もしJQueryのような外部CDNを使う場合は以下のようにすればOKです。

//js.html
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  $("#test").html("Hello World!")
</script>

[ad#ad-1]

- Google Apps Script