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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3192閲覧

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

tttkkk

総合スコア38

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/21 12:42

前提・実現したいこと

初めて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ファイルはまだ何も記入しておらず、空のファイルになります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

  1. <?!= ...?>= の前にスペースがあってはいけません。
  2. 外部ファイルをそのまま読み込むなら、createTemplateFromFileじゃなくて、createHtmlOutputFromFile使いましょう。
  3. <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

総合スコア2573

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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"); に変えてみて動作の違いを確認するといいです。
guest

0

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

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

投稿2020/10/21 14:07

sachiko-kame

総合スコア334

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問