GASのhtmlにJavaScriptやcssのファイルを読み込む方法

htmlファイル作るとき、javaScriptやcssファイルを別ファイルにすることがある。
JavaScriptやcssのファイルがhtmlと同じドメインにあり、それらをhtmlファイルに読み込む時は、↓のようにそれらのファイル名を指定する。

<script src=“/script/jsCode.js" ></script>
<link rel="stylesheet" href=“/css/cssFile.css" type="text/css" media="all">

が、GASでは外部ファイルを同じドメイン内でのファイルを指定できない。
では、どうすれば良いか。↓こんなふうにファイルを指定する。

<?!= HtmlService.createHtmlOutputFromFile('fileName').getContent(); ?>

fileNameにはjsCodeやcssFileを記入する。.htmlは記入しない。

ファイル指定を入れる場所

ファイル指定を記述すると、↓このようになる。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    ...
    <?!= HtmlService.createHtmlOutputFromFile('cssFile').getContent(); ?>
    ...
  </head>
  <body>
  ＊＊＊ページの内容＊＊＊
  <?!= HtmlService.createHtmlOutputFromFile('jsCode').getContent(); ?>
  </body>
</html>

cssファイルを指定する場所

cssファイルの指定は<base target=”_top”>と</head>との間に入れる。

JavaScriptファイルを指定する場所

JavaScriptの指定は</body>の直前に入れる。一般的なhtmlファイルのように<head>と</head>との間に記述しても内容が反映されないことがある。

cssファイルやJavaScriptファイルのファイルの追加方法

cssやJavaScriptのファイルの追加方法はhtmlファイルの追加方法同じである。

cssファイルとして使うときは、そのファイルの先頭に<style>を、最後に</style>を記述しておく。また、JavaScriptファイルのときは、そのファイルの先頭に<script>を、最後に</script>を記述しておく。

もう少しスッキリとした書き方

<?!= HtmlService.createHtmlOutputFromFile('jsCode').getContent(); ?>

↑この書き方だとちと長い。もう少し簡潔な書き方があった。

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

このようにGASの関数を作っておけば、

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

と書ける。