2026-05-25 SCALE Base スマホ最適化大整理（v1.206 → v1.211 / 5バージョン）

10:20 - /handoff 実行

対象システム

SCALE Base (scale-base) — スマホ対応強化と PWA 化のターン。本セッションで v1.206 → v1.211 まで一気に投入。

セッション背景

大串 FB:「SCALE Base の品質は良い感じになってきた。今一番の課題はスマホでの使いづらさ。動いているメンバーは仕事しながら/合間作業/PC触っていない時の作業もあり、ちゃんと計測できていない。アプリリリースもしたい」

→ PWA化 + スマホ操作性 + 認証永続化 + ver更新導線をスマホ対応 を一気に投入。PC-スマホデータ同期は別 ce 案件として設計提案を Vault に記録。

完了タスク（詳細）

ce-2026-05-25-01 PWA化（ホーム画面追加でアプリ風起動）+ スマホ操作性 第一段階 (v1.206→v1.207)
- public/manifest.json 新規（name/short_name=SCALE Base / start_url=/home/ / display=standalone / theme_color / icons 192/180/512 maskable / shortcuts 作業中/朝日報/作業開始）
- public/sw.js 新規（PWA インストール要件を満たす最小 SW・network のみ pass●●●●●●）
- components/ServiceWorkerRegister.tsx 新規（client component で本番のみ register・localhost スキップ）
- app/layout.tsx: Viewport 型 import / metadata.manifest + appleWebApp (capable + statusBarStyle black-translucent) + formatDetection / export const viewport (viewportFit=cover, themeColor=#0f1115 等) / body 内に
- ActiveBoard ステータストグルを 44x44 ヒットエリア + アイコン size 20→22 + active 押下フィードバック
- ActiveBoard 作業停止/終了 / 一括選択フローティングを safe-area-inset-bottom 対応
- WorkLogDock も safe-area 対応（iPhone ホームインジケーター被り解消）
- ビルド 1回失敗: return ( {/* */} <div>...</div> ); は JSX 構文エラー（return内は1要素のみ）→ コメント位置修正で再デプロイ成功

ce-2026-05-25-02 絵文字矢印置換 + verバッジタップ拡大 + PC-スマホ連動 設計提案 (v1.207→v1.208)
- tasks/work-log/page.tsx 386行「→ 作業を始める」→ <ChevronRight /> + スマホで補足非表示
- design/manual/page.tsx 301行「詳しく見る →」→ ChevronRight
- AppVersionBadge.tsx: タップターゲット min-h-[32px] + p-1 -m-1 でヒットエリア拡張 / ピル text 9→10 / padding 増 / active 押下フィードバック
- PC-スマホ連動 設計提案ノート Vault作成: 31_システム開発部/SCALE_Base/2026-05-25_設計提案_作業報告_PC-スマホ連動

ce-2026-05-25-03 スマホ毎回ログインバグ根治 (v1.208→v1.209)
- 真因: lib/auth-context.tsx が認証情報を sessionStorage に保存していた → タブ閉じ/アプリ強制終了で消失 → スマホで顕在化
- 修正: useEffect 読み取り / login 書き込み / logout 削除 を全部 sessionStorage → localStorage に置換
- マイグレーション: 既存ユーザー再ログイン不要なよう、起動時に旧 sessionStorage(SESSION_KEY) と legacy localStorage(scale-base-user) を新 localStorage(SESSION_KEY) に自動コピー

ce-2026-05-25-04 スマホ Header にverバッジ常時表示 (v1.209→v1.210)
- 修正: div を flex flex-col items-end leading-tight で常時表示。ユーザー名のみ hidden lg:block

ce-2026-05-25-05 Header 上部混雑解消 + ActiveBoard 右切れ修正 (v1.210→v1.211)
- AppVersionBadge の version テキストを hidden md:inline → スマホはピルだけ
- ステータス3ボタンセットを hidden md:flex → スマホは丸トグル（cycleStatus 循環）で操作

編集ファイル

• public/manifest.json 新規
• public/sw.js 新規
• components/ServiceWorkerRegister.tsx 新規
• app/layout.tsx - PWA メタ + viewport export + SW register
• components/layout/Header.tsx - verバッジ常時表示
• components/layout/AppVersionBadge.tsx - タップ拡大 + スマホでverテキスト省略
• components/layout/WorkLogDock.tsx - safe-area 対応
• components/tasks/work-log/ActiveBoard.tsx - 計測ボタン拡大 + safe-area + ステータス3ボタンスマホ非表示
• app/(dashboard)/tasks/work-log/page.tsx - 絵文字矢印→ChevronRight
• app/(dashboard)/design/manual/page.tsx - 絵文字矢印→ChevronRight
• lib/auth-context.tsx - sessionStorage → localStorage 完全置換 + マイグレーション
• lib/changelog.ts - 5件追記
• CLAUDE.md - 最新スタンプ更新

デプロイ・バックアップ

• 本日デプロイ回数: 6回（ce-2026-05-25-01 ビルド失敗 1回含む）
• 最終デプロイ: 2026-05-25 10:17 (v1.211)
• 本番URL: https://base.scale-group.co.jp/home/ (HTTP 200 確認)
• 最終 baseline: scale-base_2026-05-25_101754_post-deploy.tar.gz

試したこと・学び

JSX 構文の罠（再記録）
- return ( {/* コメント */} <div>...</div> ); は無効（return 内は 1要素のみ・コメントと並列不可）

ストレージ寿命の罠（決定版）
- sessionStorage: タブ閉じ/アプリ強制終了で消失
- localStorage: タブ閉じても残る。iOS Safari ITP で 7日アクセスなしで消える可能性
- PWA standalone モード: ITP の影響を受けない（最強の永続性）
- → 認証情報は localStorage + PWA 推奨の組合せが最良

スマホレスポンシブ設計の罠
- shrink-0 で固定幅のボタンを横並び → スマホで右切れ → hidden md:flex + 代替操作提供

ユーザーFB（重要なやつ全部）

• 「スマホでの使いづらさが今一番の課題」
• 「アプリリリースしたい」→ PWA で 95% 解決
• 「スマホだと毎回ログイン求められる」→ sessionStorage → localStorage で根治
• 「スマホでver更新どこから？」→ Header verバッジ常時表示
• 「画面上部にメニューありすぎ / 右側切れてる」→ Header コンパクト化 + ステータス3ボタン非表示
• 「絵文字矢印やだ」→ ChevronRight アイコン置換

注意ポイント・退化リスク

• PC-スマホ連動 (work-log データ KV 同期) は 未実装。設計提案ノートに沿って次の ce で着手予定
• 既存ユーザーは v1.209 切替時に 1度だけ再ログイン必要
• スマホ ActiveBoard のステータス変更は丸トグル（cycleStatus 循環）が唯一の操作
• 退化禁止リスト: ChangelogModal Portal化 / AppVersionBadge ピル切替 / dangling timer 修正 / 朝日報 Enter モーダル / TaskDetailModal 中身空対策

次のセッションで取り得る選択肢

1. PC-スマホ連動 実装（最優先） — 4点回答受領後着手（4営業日見積もり）
2. スマホ input UX 改善 — 朝日報/作業開始/作業終了
3. スマホ見切れ網羅対応 — スクショもらって個別修正

関連

• 31_システム開発部/SCALE_Base/2026-05-25_設計提案_作業報告_PC-スマホ連動
• 31_システム開発部/SCALE_Base/_README
• 31_システム開発部/_SCALE_Base_最新基準点