LINEブラウザでconfirmとalertが動かない——カスタムモーダルとトーストに全置換した

洋菓子店の管理画面の不具合を直す前に、焼き菓子店で同じ問題に遭遇していた。

LINEアプリ内のブラウザ（WebView）では confirm() が常に false を返す。alert() は呼んでも何も表示されない。これはLINEの仕様だ。

焼き菓子店で確認したことを洋菓子店に適用する作業になった。技術的な課題は同じで、デザインだけ洋菓子店に合わせた。

修正対象を洗い出す

管理画面のHTMLを開き、confirm( と alert( で検索した。

確定ボタンの confirm()、キャンセル処理の confirm()、バリデーションエラーの alert()、通信失敗の alert()。合計で複数箇所あった。

「たぶん全部直す」のではなく、検索結果の件数がゼロになるまで修正する。それが安全な置き換え方法だ。

カスタムモーダルを追加した

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';
}

OKボタンには onOk コールバックを仕込む。確認が取れたときだけ処理が走る構造は confirm() と同じだ。

洋菓子店のカラーをモーダルに反映した

OKボタンの色に #b5838d を使った。焼き菓子店とデザインは異なるが、コードの構造は同じだ。

#confirmOk {
  background: #b5838d;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-weight: 700;
  cursor: pointer;
}

管理画面を誰が使うかといえばオーナーだけだ。ただ、オーナーがじっと見る画面のボタンが、洋菓子店の色であることは重要だ。「自分の店のシステム」という感覚はそういうところで作られる。

トーストはもとから実装されていた

洋菓子店の管理画面には、すでに showToast() が実装されていた。もともと正常完了の通知に使っていた。

エラーメッセージに使っていた alert() を showToast() に置き換えた。コードを追加するよりも整理する作業になった。

GASを再デプロイして完了

clasp push --force でコードをアップロードし、clasp deploy -i でデプロイメントIDを指定して新バージョンに上書きした。

LINEブラウザから管理画面を開いて確認した。ボタンを押すとモーダルが出た。OKを押すと処理が走った。confirm() があった場所はすべて動くようになった。

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