モバイルでテストする

簡単な確認にはbuilderのレスポンシブビューポートスイッチャーを使い、モバイル固有の動作に関わる部分は公開して実機でテストしましょう。

Proyectaにおけるモバイルテストには2つの層があります。builder内のレスポンシブプレビューと、公開済みURLを使った実機テストです。

builderでのレスポンシブプレビュー

プレビューパネルのアドレスバーにビューポートスイッチャーが含まれています。

モード	サイズ
Desktop	ウィンドウの最大幅
Tablet	768 × 1024
Mobile	375 × 667

編集中にモードを切り替えることで、レイアウトの問題を早期に発見できます。オーバーフロー、グリッドの崩れ、タップしにくいボタンといったわかりやすいレスポンシブのバグを最も素早く見つける方法です。

実機でテストする

ビューポートスイッチャーはサイズをシミュレートするだけであり、タッチ入力・実際のネットワーク遅延・モバイルブラウザ固有の挙動・プラットフォーム依存の動作はシミュレートされません。タッチ操作・インストールプロンプト・プッシュ通知・カメラ・GPSなど、実際に重要な機能については実機でテストしてください。

1. アプリを公開して *.proyecta.live サブドメインに割り当てる
2. スマートフォンのブラウザでURLを開く
3. PWAサポートを追加している場合は Add to Home Screen を選択し、インストール後の体験をテストする
4. 確認したいフローを一通り操作する

実機でしか確認できないこと

• タップターゲットのサイズ — 指はマウスポインターよりも大きい
• 固定要素（sticky） — モバイルブラウザのUIクロームによってビューポート単位の挙動が異なる
• フォーム入力 — オートフィル・キーボードの種類・オートコンプリート
• iOS Safariの固有の挙動 — 100vh の問題・スクロールのバウンス・fixed配置
• プッシュ通知の許可フロー — HTTPS配信のトップレベルブラウザタブ上の公開オリジンでのみ動作する。builderのプレビューパネル内では（プレビューがすでにHTTPS配信であっても）発火しない。
• 実機（低スペック）でのパフォーマンス

テストのヒント

• スマートフォンのデベロッパーツールを活用する。 macOSのSafariはモバイルSafariに接続してライブデバッグができ、ChromeはAndroid Chromeに接続できます。
• 横向き（ランドスケープ）でもテストする。 多くの開発者は縦向きしかテストせず、横向きのバグを見逃します。
• 省電力モードをオンにしてテストする。 アニメーションやタイマーの挙動が変わります。
• PWAプッシュは実際のiPhoneでテストする。 iOSでのプッシュ通知は、Safari経由でインストールされたPWAからのみ動作します。