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

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

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

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

Q&A

解決済

1回答

1136閲覧

Google Apps Scriptで作成したHTMLからGASが実行できない

python_heroku

総合スコア23

Google Apps Script

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

0グッド

1クリップ

投稿2024/03/25 15:22

実現したいこと

GASで作成したHTMLの実行ボタンを押すとGASで作成したJSが起動してLINEにメッセージを送付するようにしたい。

発生している問題・分からないこと

HTMLで作成したボタンからJSが実行できず、処理が動作しない。
JS側について、単体では動作確認問題なし。

根本的にこの実装であっているかやや疑問。特にURLでGASのJSを実行させる、という部分がよく理解できない。JSの関数名をボタンクリック時のJS関数として埋め込む、とかの方がイメージ湧くんだけど、ChatGPTでこの方法を推薦したので採用したが、よくわかってないです。

JS

1function notify() { 2 var message = 'Hello'; 3 var token = 'LINE TOKEN'; // LINE Notifyのアクセストークンに変更する 4 5 // LINEに送付 6 UrlFetchApp.fetch('https://notify-api.line.me/api/notify', { 7 method: 'post', 8 headers: {'Authorization': 'Bearer ' + token}, 9 payload: {'message': message} 10 }); 11}

HTML

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<title>LINEへの通知実行ボタン 7</title> 8</head> 9<body> 10 <h1>LINEへの通知実行ボタン</h1> 11 <p>以下のボタンより実行します。</p> 12 <button id="myButton">ここをクリック</button> 13 14 <script> 15 // ボタンがクリックされたときに実行される関数 16 function executeFunction() { 17 // Google Apps Script関数を実行するためのURL 18 var url = "URL"; 19 20 // Google Apps Script関数を実行するためのHTTPリクエストを送信 21 var xhr = new XMLHttpRequest(); 22 xhr.open("GET", url); 23 xhr.send(); 24 } 25 26 // ページが読み込まれたときに実行される関数 27 window.onload = function() { 28 // ボタンに関数を関連付ける 29 var button = document.getElementById("myButton"); 30 button.onclick = executeFunction; 31 }; 32 </script> 33</body> 34</html>

エラーメッセージ

error

1F12で最後まで処理が通っており、以下のエラーは出ていたのを確認しているが、やはり根本的に実装についてやや疑問 2 3Access to XMLHttpRequest at 'https://script.google.com/macros/s/スクリプトID/exec' from origin 'URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 4 5 6VM26:13 7 8GET https://script.google.com/macros/s/スクリプトID/exec net::ERR_FAILED 302 (Found)

該当のソースコード

HTML

1問題の箇所に記載したため略

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

全然違う方法で実装しているような気がしたが、解読できず。
参考
https://qiita.com/fujino-fpu/items/4a63cbde8e75e3fba9f4

https://uncle-gas.com/gas-html-order-form/

補足

特になし

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

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

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

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

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

guest

回答1

0

ベストアンサー

「GASで作成したHTML」と書かれているので、.gs側にdoGetがあるという前提です。(質問内のコードでは故意に省略されているようですが)
「GASで作成したHTML」内のコードの「ボタンがクリックされたときに実行される関数」を下記のように変更して保存し、デプロイし直してください。

function executeFunction() { // Google Apps Script関数を実行するためのURL google.script.run.notify(); }

投稿2024/03/26 11:07

編集2024/03/26 11:41
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

python_heroku

2024/03/26 15:01

回答ありがとうございます。 このようにしてGAS内の関数実行させるんですね。 おっしゃる通りで、doGetに関する記述が漏れており失礼しました。無事意図通り動作しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.31%

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

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

質問する

関連した質問