実現したいこと
- WindowsかAndroidいずれかの環境で、Safari(iOS/macOS)特有のCSSやjsの挙動を検証したいです
前提
Next + Vite で動いているWebアプリケーションの開発をWindowsパソコンで行っています。作っているのがWebアプリゆえに、モバイルでの検証も行いたいです。
- Android 実機を所持しているため Android の Chrome/Firefox での動作検証はできます
- 当方iPhoneやMacの実機を所有しておらず、Safariでの動作確認ができません。現状、知人に頼んでiPhoneの実機で表示確認をしてもらっていますが、手間がかかります。
発生している問題・エラーメッセージ
- 特定のフォントが適用されない
- 一部のCSSプロパティで --webkit プレフィックスが必要になる
- ボタンなどのデフォルトのスタイリングが他のブラウザと異なるので、レイアウトが崩れてしまう
修正のたびに知人に確認を依頼する必要があり、困っています。
試したこと
- AWS Device Farm
- 実機をリモートで使える点は良いのですが、プロジェクトで機密情報を扱うことがあり、操作が録画される点があまり好ましくありません。
- 操作の遅延が大きく、devサーバを立ち上げてCSS挙動を見るのには不向きでした。
- Playwright の WebKit (Windows向けのビルド)
- 手軽に試せましたが、実際のSafariとはフォントなどのレンダリングが異なる部分がありました。
- また、Web inspector が真っ白な画面しか表示せず利用できませんでした。
補足情報(FW/ツールのバージョンなど)
- PCとしてWindows機、Linux機、実機としてAndroidのスマートフォンとタブレットは持っています。Appleの提供するものは持っていません...
- プロジェクト自体は Next.js + Vite を使っています。Storybook でコンポーネントごとに挙動を確認するケースもあります
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。