洋菓子店の管理画面はスマホから使うことを想定していなかった。
設計当初、管理者はPCで注文を確認するものだと思っていた。実際にはオーナーはスマホで通知を受け取り、LINEブラウザでそのまま管理画面を開いて確認・確定する。
PCで作った画面をスマホで開くとテーブルが横にはみ出す。ボタンが小さすぎてタップしにくい。入力欄が密集している。
メディアクエリを追加した
CSSに @media (max-width: 600px) ブロックを追加した。
@media (max-width: 600px) {
.orders-table { font-size: 0.8rem; }
.orders-table th, .orders-table td {
padding: 6px 4px;
word-break: break-all;
}
.tab-btn { font-size: 0.75rem; padding: 6px 10px; }
.order-card { padding: 12px; }
h1 { font-size: 1.2rem; }
.btn { padding: 10px 16px; font-size: 0.85rem; min-height: 44px; }
}min-height: 44px はAppleのHuman Interface Guidelinesで推奨されるタップターゲットの最小サイズだ。それ以下のボタンは指の腹で正確にタップするのが難しい。
テーブルのオーバーフロー対策
横幅が固定されたテーブルはスマホで必ずはみ出す。コンテナに overflow-x: auto を設定した。
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}-webkit-overflow-scrolling: touch はiOSでの慣性スクロールを有効にする。指を離してもスムーズに止まる動きになる。
GASのHTMLサービスでCSSを確認する方法
GASのHTMLサービスはHTMLファイルとして管理される。ブラウザの開発者ツールでリアルタイムにスタイルを確認できる。
ただし、GAS Web AppのURLをブラウザで開くのと、LINEブラウザで開くのでは挙動が異なる場合がある。特にキャッシュとダイアログ系は実機確認が必要だ。
メディアクエリのCSSが適用されているかどうかは、ChromeのDevToolsでデバイスモードに切り替えることで確認した。実機と完全に同じではないが、大きな崩れは事前に発見できる。
変更後にキャッシュをバイパスした
CSSを修正してGASを再デプロイした。Flex Messageのボタンに設定した管理画面URLにはタイムスタンプが付いている。次の注文通知からキャッシュなしで最新のスタイルが反映される。
オーナーがすでに持っているURLからアクセスした場合はキャッシュが当たる可能性がある。新しい通知を受け取るまで待つか、URLに手動でパラメータを追加するかのどちらかだ。
根本的には、LINEブラウザのキャッシュはタイムスタンプ付きURLでしか確実に回避できない。
*シンプルシステム株式会社 代表 伊藤勝彦*