WITHMIA v1.0.6 — 完璧なトランジション
ログイン後の二重読み込みを廃止し、インラインのオーバーレイによる洗練された画面遷移へ。オンボーディングのダークモード完全対応と、認証のリダイレクトループの根本修正もお届けします。
WITHMIAチーム
WITHMIA
v1.0.5では、テスト、CI/CD、請求まわりを固めて基盤を安定させました。v1.0.6が向き合うのは、実際に目に見え、肌で感じる部分です。途切れず、白い一瞬のちらつきもなく、再読み込みも見えないログイン体験。アプリケーションの読み込みを丸ごとひとつ減らし、なめらかな画面遷移に置き換えるアーキテクチャの変更です。
問題:ログインのたびに二度読み込まれていた
v1.0.5までのGoogle認証は、次のように動いていました。
- ユーザーが「Googleでログイン」をクリックする
- Googleが認証し、
/auth/googleへ戻す - サーバーが
auth-loading.blade.phpを表示する(トランジション動画を映す中間ページ) - そのページがiframeの中でReactアプリを読み込み、トークンを保存する
- その後
top.location.replace()でダッシュボードへ移動する - ブラウザがアプリ全体を二度目に読み込む
結果として、遷移からダッシュボードに移る瞬間に白いちらつきが見えていました。ログインのたびにアプリが二回読み込まれていたのです。
解決策:直接リダイレクト + インラインオーバーレイ
v1.0.6ではauth-loading.blade.phpを完全に廃止し、読み込み一回で完結する設計に置き換えました。
新しい流れ
- ユーザーが「Googleでログイン」をクリックする
- Googleが認証し、
/auth/googleへ戻す - サーバーが
?transition=1&auth_token=...を付けて、ダッシュボードへ**redirect()**で直行する app.blade.phpが?transition=1を検知し、<div id="app">の上にトランジション用オーバーレイをインラインで描画する- Reactはオーバーレイの下でマウントされる
- Reactの準備が整うと、オーバーレイがなめらかにフェードアウトする(最低1.5秒表示 + 0.6秒のアニメーション)
ページの読み込みは一回だけ。白いちらつきはゼロ。洗練された画面遷移です。
技術的に変わったこと
| コンポーネント | 以前(v1.0.5) | 現在(v1.0.6) |
|---|---|---|
| GoogleAuthController | return view('auth-loading', ...) | return redirect($url . '&transition=1') |
| OnboardingController | return view('auth-loading', ...) | return redirect($url . '&transition=1') |
| routes/web.php | auth-loadingをビューとして描画 | ?transition=1付きの直接リダイレクト |
| オーバーレイ | 独立したページ(auth-loading.blade.php) | app.blade.php内にCSSでインライン |
| ページ読み込み回数 | 2回(iframe + replace) | 1回(直接リダイレクト) |
オンボーディングのダークモード完全対応
オンボーディングの画面が、OSのダークモードを完全に尊重するようになりました。
- 自動検知 — OSの
prefers-color-scheme: darkを読み取ります - 設定の保持 — localStorageに保存された好みがあれば、そちらを優先します
- 背景と文字 — オンボーディング画面全体が適応します。背景は
#0F0F0F、文字は明るく、入力欄の枠線は控えめに - 白いちらつきなし — Reactが描画する前に、
<html>へdata-theme="dark"を付与します
認証のリダイレクトループを修正
一部のユーザーで発生していたリダイレクトループについて、複数の原因を特定して修正しました。
特定・修正した原因
- HandleInertiaRequestsの遅延クロージャ — 未認証のときにも評価されてしまい、エラーがリダイレクトを誘発していました
- 302を返すAuthenticationException — Inertiaが処理できないレスポンスではなく、素直なリダイレクトを返すように変更しました
- auth.cleanミドルウェアの削除 — Railwayのトークン処理と干渉していました
- APIルートのRailway認証 — API側のユーザールートに
railway.authを追加し、トークンが正しく機能するようにしました - URL内のauth_tokenを保持 — URLから
auth_tokenを早すぎるタイミングで消すのをやめ、アプリが確実に受け取れるようにしました
トランジションのオーバーレイ:仕上がりにこだわる
app.blade.phpのインラインオーバーレイは、以前のauth-loadingのデザインをそのまま再現しています。
- 背景動画 — 同じコーポレートMP4を、muted + autoplay + loopで
- 適応するグラデーション — ライトとダークで切り替わる
linear-gradient - 「WITH YOU, WITHMIA」の一文 — 広めの字間、セミボールド、不透明度のグラデーション付き
- 賢いタイミング制御 — 最低1.5秒の表示(
window.__loadingStartが計測する時間)、そして0.6秒のフェードアウト。pointer-events: noneで操作を妨げません - URLの後片付け — マウント後に
history.replaceState()でtransitionとauth_tokenをURLから取り除きます
オーバーレイのダークモード対応
/* Light mode */
background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7ff 100%);
/* Dark mode (prefers-color-scheme: dark または data-theme="dark") */
background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
color: white;修正:テーマの「正解」をひとつに
<html>のdarkクラスをめぐって、2つのテーマ管理が競合していたことが分かりました。
- WITHMIA ThemeContext — localStorageの
withmia_theme_modeを読む(データベースと同期している本来の仕組み) - Laravel starter kit(
initializeTheme)— localStorageのappearanceを読む。既定値は'system'
WITHMIAのテーマがlightでも、OSがダークモードなら、オーバーレイがライトで描画された後にinitializeTheme()が<html>へdarkクラスを付けてしまう。結果として明るい画面の上に暗い色が一瞬走るわけです。
解決策
initializeTheme()はwithmia_theme_modeを第一の判断基準として読み、次にappearance、最後に'light'へフォールバックするようになりました。handleSystemThemeChangeのハンドラも同様に更新しています。
// 以前
const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
// 現在
const savedAppearance = (localStorage.getItem('withmia_theme_mode') as Appearance)
|| (localStorage.getItem('appearance') as Appearance)
|| 'light';整理:auth-loadingを削除
auth-loading.blade.php(216行)をコードベースから削除しました。もはやどのコントローラー、ルート、ビューからも参照されていません。
/auth-loadingのルートは互換性のためのリダイレクトとして残しています。URLをキャッシュしている人がいても、&transition=1を付けて目的地へ送るだけです。
技術まとめ
| 変更 | ファイル | 効果 |
|---|---|---|
| 二重読み込みの廃止 | GoogleAuthController、OnboardingController、routes/web.php | view() → redirect() |
| インラインオーバーレイ | app.blade.php | ?transition=1の検知、動画付きCSSオーバーレイ |
| Reactでのフェードアウト | app.tsx | 最低1.5秒 + 0.6秒のアニメーション、URLの後片付け |
| オンボーディングのダークモード | onboarding.tsx | prefers-color-schemeとlocalStorageを尊重 |
| リダイレクトループの修正 | HandleInertiaRequests、routes/web.php、GoogleAuthController | 独立した5件の修正 |
| 戻り値の型 | GoogleAuthController、OnboardingController | 戻り値の型をRedirectResponseに |
| テーマの判断基準 | use-appearance.tsx | withmia_theme_modeを第一の基準に |
| 整理 | auth-loading.blade.php | ファイル削除(-216行) |
この先の予定
ログイン体験を磨き終えたので、私たちの視点はふたたびプロダクトの機能へ戻ります。
- PWA / モバイルアプリ — モバイル中心のラテンアメリカに向けた最優先事項
- CSATアンケート — 会話の中に組み込まれた顧客満足度調査
- AI resolution analytics — AIによる解決率の指標
- WhatsAppのブロードキャスト — 一斉配信キャンペーン
WITHMIA v1.0.6は、体験の最初の3秒を完璧にするバージョンです。ログインは一度、読み込みも一度、中断はゼロ。
ラベル
コメント
敬意をもってご記入ください。メールアドレスは公開されません。