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

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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

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

 

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

広告

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

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

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

コード.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>
 

 

 

ガジェット系ブログもよろしく

すまたすログ

ガジェット系ブログです。主にChromebookの情報やMyマシンのASUS Flip C434TAのレビューなどを書いています。その他IT機器のアプリのレビュー、たまに100円ショップなど。


スポンサーリンク

 - Google Apps Script