GASでWEBページを作りたいが、上手く表示されない

前提・実現したいこと

初めてteratailで質問させていただきますGASの初心者です。最近GASの勉強を始め、用語もしっかりと理解できていない部分もありますが、何卒宜しくお願い致します。このたび、GASでWEBページを表示させようとスクリプトを書きましたが、
SyntaxError: Unexpected token '='
というエラーメッセージが出てきてしまいました。

私は
https://tonari-it.com/gas-button-event-javascript/
このページを見て日々勉強しているのですが、このサイトに載っているコードを丸々コピペしても、上記のようなエラーメッセージが出てきてしまいます。

どうしてこのようなエラーメッセージが出てきてしまうのか、教えて頂けますと、幸いです。

発生している問題・エラーメッセージ

SyntaxError: Unexpected token '='

該当のソースコード

Google
1// 以下、gsファイルになります。
2function doGet() {
3  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
4  htmlOutput
5    .setTitle('GAS+Vue.js')
6    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
7  return htmlOutput;
8}
9
10
11
12// 以下、htmlファイルになります。
13<!DOCTYPE html>
14<html>
15  <head>
16    <base target="_top">
17    <?! = HtmlService.createTemplateFromFile('css').getContent(); ?>
18  </head>
19  <body>
20    <p id = "hello">Hello GAS</p>
21    <button onclick = "changeMessage()">テキスト変更！</button>
22    <?! = HtmlService.createTemplateFromFile('js').getContent(); ?>
23  </body>
24</html>
25
26
27
28// 以下、jsファイルになります。
29<sctipt>
30function changeMessage() {
31  document.getElementById('hello').textContent = 'Hello JavaScript';
32}
33</script>
34
35
36// cssファイルはまだ何も記入しておらず、空のファイルになります。

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

回答2件

ベストアンサー

細かい間違いがいくつかあります。

<?!= ...?> は = の前にスペースがあってはいけません。
外部ファイルをそのまま読み込むなら、createTemplateFromFileじゃなくて、createHtmlOutputFromFile使いましょう。
<sctipt>じゃなくて、<script>です。

Diff
1 // 以下、gsファイルになります。
2 function doGet() {
3   const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
4   htmlOutput
5     .setTitle('GAS+Vue.js')
6     .addMetaTag('viewport', 'width=device-width, initial-scale=1')
7   return htmlOutput;
8 }
9 
10 // 以下、htmlファイルになります。
11 <!DOCTYPE html>
12 <html>
13   <head>
14     <base target="_top">
15-    <?! = HtmlService.createTemplateFromFile('css').getContent(); ?>
16+    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
17   </head>
18   <body>
19     <p id = "hello">Hello GAS</p>
20     <button onclick = "changeMessage()">テキスト変更！</button>
21-    <?! = HtmlService.createTemplateFromFile('js').getContent(); ?>
22+    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
23   </body>
24 </html>
25
26 // 以下、jsファイルになります。
27-<sctipt>
28+<script>
29 function changeMessage() {
30   document.getElementById('hello').textContent = 'Hello JavaScript';
31 }
32 </script>
33 
34 // cssファイルはまだ何も記入しておらず、空のファイルになります。

投稿2020/10/21 15:10

draq

総合スコア2577

tttkkk

2020/10/22 12:46

ご指摘ありがとうございます！無事にWEBページを表示することができました！もし差し障り無ければ教えて頂きたいのですが、 createTemplateFromFile　と　createHtmlOutputFromFile の使い分けはどのような基準で使い分けていくのでしょうか。

draq

2020/10/22 12:59 編集

createTemplateFromFile は名前の通り HtmlTemplate を返し、evaluate() を呼んだタイミングで <? ... ?> 等の埋め込みコードが実行/評価された結果の HtmlOutput を作成します。対して、createHtmlOutputFromFile は直接ファイルから HtmlOutput を作成するので、埋め込みコードはHTML 内のテキストとして処理されます。 HtmlService.createTemplateFromFile("index").evaluate(); を HtmlService.createHtmlOutputFromFile ("index"); に変えてみて動作の違いを確認するといいです。

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

document.getElementById('hello').textContent = 'Hello JavaScript';

の部分の=は半角で記述されていますでしょうか？全角とかで書かれていたりしないでしょうか？

投稿2020/10/21 14:07

sachiko-kame

総合スコア334

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

GASでWEBページを作りたいが、上手く表示されない

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

関連した質問