gasのサイドバーでhtmlとjsの分離

前提

スプレッドシートでGASを使用し、サイドバーでhtmlとJavascripを分離したいのですが、
分離したjavascriptが正常に動作しません。（サイドバーは正常に動作します）

「 HtmlService.createHtmlOutputFromFile().getContent();」の動作かと思うのですが、
どこに誤りがあるでしょうか？

該当のソースコード

サイドバー

gas
1function onOpen() {
2  SpreadsheetApp.getUi()
3      .createMenu('test')
4      .addItem('Show sidebar', 'showSidebar')
5      .addToUi();
6}
7
8function showSidebar() {
9  var html = HtmlService.createHtmlOutputFromFile('index')
10  SpreadsheetApp.getUi().showSidebar(html);
11}

index.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <p>テスト</p>
8    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
9  </body>
10</html>
11

js.html

html
1<script>
2  alert('テスト');
3</script>

行動規範の内容に同意します

回答2件

ベストアンサー

本件の場合、サイドバー側では、createHtmlOutputFromFile ではなく、createTemplateFromFile を使う必要があります。
createTemplateFromFile（及び evaluate() ）を使用することで、index.html のスクリプトレット部分がテンプレートの一部と見なされて js.html の内容に置き換えられます。

サイドバーの code.gs

js
1function showSidebar() {
2 var html = HtmlService.createTemplateFromFile('index').evaluate();
3  SpreadsheetApp.getUi().showSidebar(html);
4}

投稿2022/09/21 14:48

編集2022/09/21 14:51

退会済みユーザー

総合スコア0

回答へのコメント

sam

2022/09/22 01:56

有難うございます！

行動規範の内容に同意します

ご指摘頂いた箇所を修正した所、正常に動作しました。
有難うございます。

投稿2022/09/22 01:56

sam

総合スコア19

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.68%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

トップ JavaScriptに関する質問

gasのサイドバーでhtmlとjsの分離

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！