スマホで管理画面が見やすくなっているはずだった。
@media (max-width: 600px) を追加した。テーブルの横スクロールを調整した。フォントサイズを大きくした。GASを再デプロイした。オーナーに確認してもらうと、変わっていないと言われた。
自分のブラウザで開くと変わっている。オーナーのスマホでも確認してもらうと、変わっていない。
問題の切り分け
普通のスマホブラウザ（Safari・Chrome）で開いてもらうと反映されていた。LINEの通知メッセージからリンクをタップして開いたときだけ、古いスタイルのままだった。
LINEアプリには内蔵ブラウザがある。タップしたURLはLINEのWebViewで開く。このブラウザが持つキャッシュが古いページを保持していた。
GASのWebアプリのURLは https://script.google.com/macros/s/.../exec という固定URLだ。再デプロイしてもURLは変わらない。LINEブラウザは同じURLに対して同じキャッシュを返し続ける。
解決策
通知メッセージに載せる管理画面URLに、タイムスタンプを付加した。
const adminUrl = 'https://script.google.com/macros/s/' + DEPLOYMENT_ID + '/exec?t=' + new Date().getTime();new Date().getTime() は現在時刻をミリ秒単位の整数で返す。1749430000000 のような値だ。注文が入るたびに値が変わる。
LINEブラウザはURLが異なれば別のページとして扱う。?t=1749430000000 がついたURLと ?t=1749431000000 がついたURLは別物だ。キャッシュは効かない。毎回最新のCSSが読み込まれる。
GAS側の変更は不要
GAS側でクエリパラメータ t を受け取って何か処理する必要はない。完全に無視していい。
管理画面の doGet は e.parameter.t が来ても何もしないままで正常に動く。パラメータは単なるキャッシュ破壊のためのノイズだ。
注文のたびに新しいURLが生まれる
副作用として、管理画面のURLが毎回変わることになった。オーナーがそのURLをブックマークしても次回は違うURLが来る。ブックマークは役に立たない。
ただし、焼き菓子店の管理画面をブックマークして使う運用は想定していない。注文通知が来るたびにリンクを踏む。そのフローに乗ればキャッシュは問題にならない。
仕様として整理されたというより、問題を回避した結果として成立している設計だ。
*シンプルシステム株式会社 代表 伊藤勝彦*