Zenn
🤖

Chrome92からalert,confirmの動作の仕様変更【結局延期】でGASのWEBアプリで困った件

2021/08/02に公開
Google Apps Script
JavaScript
初心者
tech

※この記事はQiitaにも同内容を投稿しています。
※同じ事象でお困りの人がいるかもしれないのでZennにも投稿しました。
※問題がある場合はお知らせ願います。

\textcolor{red}{2021/8/6追記}　※補足にリンクしている「officeの杜」様の記事によるとChrome92でのalert, confirm, promptの仕様変更は\textcolor{red}{延期}された模様です。

最初は延期は２週間と発表されましたが、\textcolor{red}{２０２２年１月以降}に変更されたそうです

０．初めに

私は、非エンジニアのドシロウトです。

私にとっては、けっこう影響大なのですが、騒いでる人が少ないので、需要ない情報かもしれません。

今朝、週に4，5回使う、自作のGoogle Apps ScriptのWEBアプリを触っていて「あれっ？」となりました。

元々、JavaScriptのAlertで「○○します」とダイアログ表示して「OK」を押すと処理されるWEBアプリでしたが、ダイアログが一切表示されませんでした。

ネットでググると、海外の人には、困ってる人もいそうでした。

google chrome - JavaScript dialogs alert(), confirm() and prompt() in cross origin iframe does not work any longer - Stack Overflow
https://stackoverflow.com/questions/68492434/javascript-dialogs-alert-confirm-and-prompt-in-cross-origin-iframe-does-n

一部を機械翻訳すると以下です。

「これは、クロスオリジンiframeのalert（）、confirm（）、prompt（）を削除するというGoogleの不条理で主観的な決定です。そして彼らはそれを「機能」と呼んだ。そして、正当化は非常に貧弱です…コミュニティと開発者は抗議する必要があります！」

ちなみにChromeサイドのこの件に関する発表は以下。

Remove alert(), confirm(), and prompt for cross origin iframes - Chrome Platform Status

この記事を見てもわかる通り、Google Apps Scriptの問題ではなくChromeでJavaScriptを実行した場合に発生する事象になります。

私は、ifreme内でJSのalert,confirmを使うことを、まぁまぁしていたので困った訳です。

そこでQiitaを探すと、1件記事がありました。

安定稼働（放置）していたGASのWebアプリがある日動かないと言われた（長編ポエム）

分かりやすく書いてくれていてありがたかったのですが、confirmで処理を分けていたのをやめる、alertをコメントアウトするという、一時的な回避策の記事になっていました。

もちろんポエムなので、それだけで十分だと思います。

しかし私は、少なくともalert,confirmについては、代替策が必要だったのでいくつか試してうまく行ったことを記事に残そうと思います。

１．toast.js

alertの代替として、ただメッセージをダイアログで表示すれば良い場合は、toast.jsを使いました。

Super Simple JavaScript Message Toaster - toast.js

実際の使い方はこんな感じです。

HTMLサンプル
<script src="https://cdn.jsdelivr.net/gh/mlcheng/js-toast@5e5bb39b9f68938c44663dd2594eddc7434a01b7/toast.js"></script>
JSサンプル
var iqoptions = {
    settings: {
    duration: 2000
    }
};
iqwerty.toast.Toast("なにかメッセージ",iqoptions);

ダイアログ表示の終わりまで処理を待たせたいニーズがなければ、これで十分です。

２．Cute Alert

legant Alert/Confirm/Toast Dialog Box In JavaScript

私はconfirmの代替で使いましたが、alertでも使えます。
ダイアログ表示の終わりまで処理を待たせたいニーズがあれば、こちらでalert表示すれば良いと思います。

HTMLサンプル
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gustavosmanc/cute-alert@master/style.css" />
<script src="https://cdn.jsdelivr.net/gh/gustavosmanc/cute-alert@master/cute-alert.js"></script>
JSサンプル
function delmemo(memonodel){
  cuteAlert({
    type: "question",
    title: "文書の削除",
    message: "メモを削除しますか",
    confirmText: "削除",
    cancelText: "やめる"
  }).then((e)=>{
    if ( e == ("confirm")){
      // 削除処理
      console.log('削除が完了しました');
    } else {
      // やめる
      return false;
    };
  })

}

３．終わりに

上記１、２は、GASのWEBアプリ上のJSで動作確認しました。

おそらく普通のifreme内のJSでも動作すると思いますが、試してません。

私の勝手な想像だと、もっと全然簡単方法があるんじゃないかと…

ドシロウトのいい加減な記事ではない、詳しい方のコメント、別記事をお待ちしてます。

以　上

補足

対応策が書いてあったのでリンク

Chrome92からalertやconfirmが動かなくなりました officeの杜

JSの詳細な記事

Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化 | blog.jxck.io

Discussion