confirmが返すのは常にfalse——LINEブラウザで動かないダイアログをカスタムモーダルに置き換えた

「確定ボタンを押しても何も起きない」という連絡が来た。

管理画面で注文を確定しようとすると、確認ダイアログが出るはずだった。「この注文を確定しますか？」と聞いて、OKを押すと処理が走る。それがオーナーのスマホでは動かない。

手元のPCのブラウザで試すと動く。普通のスマホブラウザで試しても動く。LINEブラウザで開いたときだけ動かない。

confirm() は LINEブラウザでは使えない

ブラウザのネイティブダイアログ関数 confirm() は、LINEのWebViewでは常に false を返す。

仕様としてLINEが制限している。セキュリティ上の理由と説明されている。

コードの中に if (!confirm('注文を確定しますか？')) return; という行があった。LINEブラウザで confirm() を呼ぶと false が返る。!false は true になる。return が実行される。処理が終わる。何も起きないように見える。

バグではなく、仕様通りに動いていた。

カスタムモーダルに置き換えた

ネイティブダイアログを使わず、HTMLとCSSでモーダルを自作した。

function showConfirm(msg, onOk) {
  document.getElementById('confirmMsg').textContent = msg;
  document.getElementById('confirmOverlay').style.display = 'flex';
  document.getElementById('confirmOk').onclick = function() {
    closeConfirm();
    onOk();
  };
}

function closeConfirm() {
  document.getElementById('confirmOverlay').style.display = 'none';
}

確認が必要な処理では confirm() の代わりに showConfirm(メッセージ, 処理関数) を呼ぶ。コールバック方式なので、OKを押したときだけ処理が走る。

alertも同様に置き換えた

alert() も LINEブラウザでは動かない。バリデーションエラーのメッセージに使っていた箇所がいくつかあった。

trooストを代わりに使った。画面下部に数秒表示されて消えるUIだ。

function showToast(msg) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), 2500);
}

LINEブラウザを想定するなら、confirm() と alert() をコードから完全に排除することが前提条件になる。

管理画面のどこにも残っていないことを確認した

修正後、管理画面のHTMLファイル全体を検索した。confirm( と alert( で検索して、0件になるまで修正した。

「たぶん全部直した」では不十分だ。数が出なくなるまで探すことで、見落としがなくなる。

*シンプルシステム株式会社 代表　伊藤勝彦*