GASでのdoPost()での完了表示(HTML)がエラーになってしまう。問題箇所がわからない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,370

hiroshi0240

score 444

doGet(e)にパラメータとして特定のスプレッドシートのIDを渡し
⇒doGetからコメント入力用シート(HTML)を表示させる⇒doPost(e)で先のIDとコメントをパラメータで受け取って処理⇒HTMLで完了表示
をさせたいのですが、最後の「HTMLで完了表示」部分で「script.google.com で接続が拒否されました。」となり、表示がさせられません。

[対象のプロジェクトのWEBアドレス?ssid=+スプレッドシートID]で以下のdoGetを実行

function doGet(e){
  var ID = e.parameter.ssid;
  var html =  HtmlService.createHtmlOutputFromFile("コメント入力シート");
  var content = html.getContent().replace(/%ID%/,  ID );
  return HtmlService.createHtmlOutput(content);
}


「コメント入力シート」

<!DOCTYPE html>
<html>
  <body>  
   <form method="post"  action="対象のプロジェクトのWEBアドレス">
  <div>
    <label for="msg">コメント入力BOX</label>
    <textarea id="msg" name="coment"></textarea>
    <input type="hidden" name="id" value=%ID%>
  </div>
    <div class="button">
    <button type="submit">送信する</button>
    </div>
   </form>
  </body>
</html>
function doPost(e) {
  var coment = e.parameter.coment;
  var ID = e.parameter.id;
 input(coment,ID);
  return HtmlService.createTemplateFromFile("完了表示").evaluate();
}
function input(coment,ID){
  var ss = SpreadsheetApp.openById(ID);
  var S1 = ss.getSheetByName('回覧情報'); 
  S1.getRange(1,1).setValue(coment);
}


「完了表示」

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1><font color="#ff0000">実行完了</font></h1>
    <br>
    テキストの入力を完了しました。<br>   
  </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • papinianus

    2018/11/21 16:53

    権限だと思うのですが、webアプリの実行権限はどうなっていますか?

    キャンセル

  • hiroshi0240

    2018/11/21 17:16

    連絡ありがとうございます。実行権限はフルでついています。というか開発者本人が実行してもエラーになります。

    キャンセル

  • hiroshi0240

    2018/11/21 17:26

    ちなみに、doPost以降を別のプロジェクトファイルで作成してみると、うまく表示されましたが、これだとコメント入力シートの入力後にもまたGoogleの「Permission」画面がポップアップされてしまうので、避けたいのです。

    キャンセル

回答 1

checkベストアンサー

+2

再現させてみました。sameoriginじゃないからでしたね
(エラーのときは、ブラウザの開発者ツールを開いてください)

この問題は、gasを使ってページ表示する限りは回避できないと思うので↓こうすることを提案します

 コード.gs

  • doPost廃止
  • 完了表示.html廃止
  • inputがリターンする
function doGet(e){
  var ID = e.parameter.ssid;
  var html =  HtmlService.createHtmlOutputFromFile("コメント入力シート");
  var content = html.getContent().replace(/%ID%/,  ID );
  return HtmlService.createHtmlOutput(content);
}
function input(coment,ID){ //リターンを持つ。try catchしてこいつがちゃんと判断する
  try{
    var ss = SpreadsheetApp.openById(ID);
    var S1 = ss.getSheetByName('回覧情報'); 
    S1.getRange(1,1).setValue(coment);
  }
  catch(e) {
    return "失敗";
    }
  return "完了"
}

 コメント入力シート.html

  • actionなし
  • divを足す(response)→まあこの辺はお好みで。
  • hiddenのやつは、id="id"にする(name="id"じゃなく)
  • 非同期でサーバスクリプトを実行させる仕組みを使う
    →成功時のコールバックで、同じページにメッセージを出す
<!DOCTYPE html>
<html>
  <script>
    function posting() {
      const id = document.getElementById("id").value;
      const msg = document.getElementById("msg").value;
      google.script.run.withSuccessHandler(writeResult).input(msg, id);

    }
    function writeResult(message) {
      document.getElementById("response").innerText = message;
    }
  </script>
  <body>  
   <form method="post"  action="#">
  <div>
    <label for="msg">コメント入力BOX</label>
    <textarea id="msg" name="coment"></textarea>
    <input type="hidden" id="id" value=%ID%>
  </div>
    <div class="button">
    <button type="button" onclick="posting()">送信する</button>
    </div>
   </form>
   <div id="response">
   </div>
  </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/22 19:35

    再現までしていただきありがとうございます。
    やっとsameoriginの意味がわかりました。

    教えて頂いたHTML内でスクリプトを実行させる方法で対応進めようと思いますが、最終的には送信ボタン押下後は画面を変遷(送信ボタンと、コメント入力欄を消して、完了通知を表示)させる必要があるため、追加でコードを検討いたします。

    キャンセル

  • 2018/11/22 22:17

    適切なgetパラメータを付与して、location.hrefを変え、doGetでページを切り替えれば、できそうな気がします

    キャンセル

  • 2018/11/24 22:19

    知識不足ですみません。
    Html上のスクリプトでdoget
    が使えるという事ですか?だとすると、その場合のアドレスはどの様に指定すれば良いのでしょうか?恥ずかしついでに、お教えいただけると嬉しいです。

    キャンセル

  • 2018/11/26 16:58

    本件、HTML上のスクリプトで、document.getElementById("form").innerHTML =で内容を書き換えて表示させることで、解決いたしました。ご教示ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる