GASでHTMLから外部ファイルのCSS・JSを呼び出す方法

スポンサーリンク

よく忘れるのでメモ。

以下のように書く。

    <?!= HtmlService.createHtmlOutputFromFile('ファイル名').getContent(); ?>   


注意点は拡張子をつけずにファイル名だけを指定すること。
例えばhoge.js.html(GASはCSS・JSでも末尾に.htmlがついてしまう)という名前のファイルなら

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

と書く。CSSも同様。

記述場所はheadタグ or bodyタグの中。呼び出すタイミングなどはソースによって変わってくると思いますが。

<!-- headの中に書いてみたり -->
<head>
  <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
</head>
<body>
  <main>
    ...
  </main>
</body>

<!--  bodyの中に書いてみたり  -->
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>   
      <main>
        ...
     </main>
にほんブログ村 IT技術ブログへ
にほんブログ村