Help us understand the problem. What is going on with this article?

Windows から iPad Safari をデバッグして TweetDeck をアプリのように使う

追記

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 の準備

  1. Windows PC で Node.js をインストール。
  2. Poweshell で RemoteDebug iOS WebKit Adapter をインストール。(コマンドプロンプトでは試していません。)

    npm install remotedebug-ios-webkit-adapter -g
    
  3. iOS WebKit Debug Proxy の Windows 用 zip をダウンロード。(私は v1.8.3 を使用しました。)

  4. 下記フォルダを作って上記 zip の中身をその中にコピー。

    C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\vs-libimobile\ios-webkit-debug-proxy-1.8.3-win64-bin
    
  5. 下記ファイルを編集する。

    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 の準備

  1. Windows PC で iTunes、Chrome をインストール。
  2. Chrome で chrome://inspect/#devices を開く。
  3. Devices -> Discover network targets にチェックが入っていることを確認する -> Configure... -> localhost:9000 を追加。

設定手順

  1. iPad の設定で Web インスペクタ を ON にする。
    設定アプリ -> Safari -> 詳細 -> Web インスペクタ ON

  2. iPad の Safari で TweetDeck を開いてログイン。

  3. 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]
    ...
    
  4. Windows PC と iPad を接続し、iPad のロックを解除。

  5. iPad、iTunes で Windows PC を信頼。

  6. Chrome で chrome://inspect/#devices を再度開く。

  7. Remote Target 下に TweetDeck が表示されるのでそれを inspect。

  8. 後は元記事の「Cookie の取得」以降と同じです。開いた DevTools 画面の Application タブから Cookies にアクセスできます。

(optional) エラーの解消

設定手順の 3. でエラーが発生します。
(今のところ)エラーによって問題は起こっていませんが、これを解消する方法も別コメントで紹介されていました。
これを参考に実行した手順が以下です。

  1. iMobileDevice の zip をダウンロード。(私は 1.2.1 (r223) を使用しました。)
  2. 下記フォルダを作って上記 zip の中身をその中にコピー。

    C:\Users\(ユーザー名)\AppData\Roaming\npm\node_modules\vs-libimobile\imobiledevice-x64-1.2.1-r223
    
  3. 下記ファイルを再度編集する。

    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');
    

    これでエラーが発生しなくなるはずです。

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away