追記
2019/08/11 現在、下記の方法ではうまくいかないようです。
iOS のバージョンアップなども影響しているのかもしれません。
Stopped Working after iOS v 12.2 upgrade · Issue #138 · RemoteDebug/remotedebug-ios-webkit-adapter · GitHub
Work around できたら本記事も編集します。
目的
本記事の目的は iOS でアプリのように TweetDeck を使えるようにすることです。
詳細は以下の記事を参照ください。
iPad で TweetDeck をネイティブアプリのように使う
Safari から「ホーム画面に追加」するだけでは開く度にログインが必要で、とても使う気になりません。
Safari の Cookie を編集してログイン状態が継続するようにします。
上の記事では Mac からデバッグする方法が紹介されていますので、本記事では Windows からデバッグする方法を紹介します。
背景
元記事冒頭のリンク先で Windows から iOS Safari をデバッグするために iOS WebKit Debug Proxy Win32 が使用されていますが、こちらはもうメンテナンスされていないようです。
本家の iOS WebKit Debug Proxy を Chrome DevTools と共に使う場合、RemoteDebug iOS WebKit Adapter を使うことが推奨されています。
しかし、これを配布されているまま実行すると iOS 11 以降のデバイスではうまくいかないようです。
そのため Windows から iPad Safari をデバッグする部分は、下記コメントの手順を参考に実行しました。
Windows not able to inspect iOS 11 · Issue #79 · RemoteDebug/remotedebug-ios-webkit-adapter · GitHub
手順
私の環境は Window 10、iPad (iOS 12.1) でした。
RemoteDebug iOS WebKit Adapter の準備
- Windows PC で Node.js をインストール。
-
Poweshell で RemoteDebug iOS WebKit Adapter をインストール。(コマンドプロンプトでは試していません。)
npm install remotedebug-ios-webkit-adapter -g
iOS WebKit Debug Proxy の Windows 用 zip をダウンロード。(私は v1.8.3 を使用しました。)
-
下記フォルダを作って上記 zip の中身をその中にコピー。
C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8.3-win64-bin
-
下記ファイルを編集する。
C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js
132 行目を以下のように編集して、先程コピーした方の
ios_webkit_debug_proxy.exe
を使用するようにする。//const proxy = path.resolve(__dirname, process.env.USERPROFILE + '/scoop/apps/ios_webkit_debug_proxy/current/ios_webkit_debug_proxy.exe'); const proxy = path.resolve(__dirname, process.env.USERPROFILE + '/APPDATA/Roaming/npm/node_modules/vs-libimobile/ios-webkit-debug-proxy-1.8.3-win64-bin/ios_webkit_debug_proxy.exe');
iTunes、Chrome の準備
- Windows PC で iTunes、Chrome をインストール。
- Chrome で
chrome://inspect/#devices
を開く。 - Devices -> Discover network targets にチェックが入っていることを確認する -> Configure... ->
localhost:9000
を追加。
設定手順
iPad の設定で Web インスペクタ を ON にする。
設定アプリ -> Safari -> 詳細 -> Web インスペクタ ONiPad の Safari で TweetDeck を開いてログイン。
-
Windows PC の Powershell で下記を実行。
remotedebug_ios_webkit_adapter --port=9000
下記のように表示されます。
(エラーも出ますが目的の動作には支障ありません。解消法は後述。)... iosAdapter.getTargets error.iosAdapter.getTargets.getDeviceVersion.failed.fallback, device=[object Object] iosAdapter.getTargets error.iosAdapter.getTargets.getDeviceVersion.failed.fallback, device=[object Object] iosAdapter.getTargets error.iosAdapter.getTargets.getDeviceVersion.failed.fallback, device=[object Object] ...
Windows PC と iPad を接続し、iPad のロックを解除。
iPad、iTunes で Windows PC を信頼。
Chrome で
chrome://inspect/#devices
を再度開く。Remote Target 下に TweetDeck が表示されるのでそれを inspect。
後は元記事の「Cookie の取得」以降と同じです。開いた DevTools 画面の Application タブから Cookies にアクセスできます。
(optional) エラーの解消
設定手順の 3. でエラーが発生します。
(今のところ)エラーによって問題は起こっていませんが、これを解消する方法も別コメントで紹介されていました。
これを参考に実行した手順が以下です。
- iMobileDevice の zip をダウンロード。(私は 1.2.1 (r223) を使用しました。)
-
下記フォルダを作って上記 zip の中身をその中にコピー。
C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\vs-libimobile\imobiledevice-x64-1.2.1-r223
-
下記ファイルを再度編集する。
C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\remotedebug-ios-webkit-adapter\out\adapters\iosAdapter.js
159 行目を以下のように編集して、先程コピーした方の
ideviceinfo.exe
を使用するようにする。//const proxy = path.resolve(__dirname, process.env.USERPROFILE + '/APPDATA/Roaming/npm/node_modules/vs-libimobile/lib/ideviceinfo.exe'); const proxy = path.resolve(__dirname, process.env.USERPROFILE + '/APPDATA/Roaming/npm/node_modules/vs-libimobile/imobiledevice-x64-1.2.1-r223/ideviceinfo.exe');
これでエラーが発生しなくなるはずです。