こちらのサイトを参照しました。
Special thx.
【PowerShell】アップデート方法(Windows)
WindowsのChromeでiPhoneのSafariをデバッグする方法
iOS Safari/webkitをWindowsでデバッグするには
まず、PowerShellのアップデート
PS C:\Users\ysrock> Invoke-Expression "& { $(Invoke-RestMethod https://aka.ms/install-powershell.ps1) } -UseMSI"
PowerShellを起動しなおして、scoopをインストール
PS C:\Program Files\PowerShell\7> Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
権限を与えて起動確認します
PS C:\Program Files\PowerShell\7> Set-ExecutionPolicy RemoteSigned -scope Process PS C:\Program Files\PowerShell\7> Get-ExecutionPolicy RemoteSigned PS C:\Program Files\PowerShell\7> scoop help
gitのインストール
PS C:\Program Files\PowerShell\7> scoop install git
Scoopでインストールできるアプリの拡張
PS C:\Program Files\PowerShell\7> scoop bucket add extras
ios-webkit-debug-proxyのインストール
PS C:\Program Files\PowerShell\7> scoop install ios-webkit-debug-proxy
nodejsのインストール
PS C:\Program Files\PowerShell\7> scoop install nodejs
remotedebug-ios-webkit-adapterのインストール
PS C:\Program Files\PowerShell\7> npm install remotedebug-ios-webkit-adapter -g
なんか色々推奨ではないバージョンのようですが・・・
これでインストール作業は終了です。
iPhoneとWindowsをケーブルでつなぎ、
「このコンピューターを信頼しますか?」の問いに対して
「はい」を選択してください。
Safariの設定 > 詳細 で「Webインスペクタ」をオンにします。
解析したいサイトをSafariで開きます。
remotedebug_ios_webkit_adapter を実行する
PS C:\Program Files\PowerShell\7> remotedebug_ios_webkit_adapter --port=9000
Chromeで次のアドレスを開きます。
chrome://inspect/#devices
「Configure」をクリックして「localhost:9000」を追加します。
iPhoneが認識されたらTargetが表示されるので
「inspect」をクリックすると、見慣れた画面が表示されます。
]]>
このとても便利な機能をJavaScriptで無効にします。
$(ELEMENT).on('touchstart', function(e){ e.preventDefault(); });
ELEMENTにはbodyや最前面にあるエレメントを指定してください。
<こんなケースで使用しました>
ページ内のある要素をクリックする事で、
右から全画面のサブページが表示されるものを作成しました。
表示された後、左からスワイプした場合は、このサブページが右へ消えて行って欲しいのに
デフォルトの機能で1つ前のページに戻ってしまうため処理を無効化しました。
<meta name="apple-mobile-web-app-capable" content="yes">
普通にサファリを開いてアクセスすると今まで通りアドレスバーが表示されるが、
ショートカットをホーム画面に追加したのち、
そこから起動させると全画面になる
※自分で全画面表示したい場合はアドレスバーのAAをタップする事で可能
]]>videoタグにplaysinlineが必要
<video id="hoge" playsinline></video>]]>
-webkit-overflow-scrolling:touch;]]>