この日はほぼ一日、スマホ特有の不具合と格闘。
パソコンでテストしてると普通に動く。
でもiPhoneやAndroidの実機に持っていくと急に壊れる。
Web開発ってこれがあるんやな🫠
まずiPhoneのSafari。
リワード広告を出すボタンを押しても、画面が処理中のまま進まない。
PCでは出るのにiPhoneでは出ない。
さらにAndroidでは、使ってたテスト用広告タグそのものが期待通り返ってこなくなってて、「広告がありません」みたいな扱いになる。
広告ひとつ出すだけでOSごとに挙動が違う。
そして7/20からずっと付きまとってるThreadsログイン問題も再発。
ブラウザで認証を続けたいのに、ThreadsアプリがURLを拾って勝手に起動する。
アプリが開いたあと、Web側が期待してる戻り方にならずログインが止まる。
Claude Codeと一緒に、リダイレクトのタイミングをずらしたり、ログインURLにブラウザ側で処理させやすい工夫を加えたり、何パターンも試した。
中でも印象に残ったのが「ユーザーが今タップした直後かどうか」で、ブラウザが許可する処理が変わるという話。
ブラウザは勝手に別画面を開く動きを嫌う。
広告やポップアップ詐欺みたいな動きを防ぐためやと思う。
でも本当にユーザーがボタンを押した直後なら、「本人が望んだ操作」として少し許してくれる。
その短い時間内に何をするかで挙動が変わるらしい。
こういうの、自分一人で調べてたらたぶん辿り着かんかった🤔
最終的にはログイン導線をできるだけ単純化。
Androidでは端末側の設定に左右される部分もあるから、「この設定だとアプリに飛びます」という案内も出すようにした。
100点の解決ではない。
Web側ではどうにもできない部分もある。
それでも、ユーザーが何も分からず詰むよりはマシなところまで持っていった。
合間にホームページへ固定コンテンツを3つ追加。
こっちはコードを書けばその通り動くので平和やった😇
スマホブラウザと外部アプリの連携は、コードの世界だけで完結せん。
この日それを嫌というほど学んだ。
※この日出てきた言葉の説明
・実機テスト：パソコン上のシミュレーターではなく、本物のiPhoneやAndroid端末で動作確認すること。
・リダイレクト：あるページから別のURLへ自動的に移動させる処理。
・ディープリンク：WebのURLを押したとき、対応するスマホアプリを直接開く仕組み。
・ユーザー操作（user gesture）：ボタンを押す・タップするなど、本人が直接行った操作。ブラウザはこれを基準にポップアップなどの許可を判断することがある。