ネットワーク通信状況の確認（iOS）
- 概要
- iOSのMobile Safariでネットワーク通信状況の確認方法
- iOSのネットワーク通信速度をシミュレートする方法
- iOSのネットワーク通信状況を「Instruments」で確認する方法
- iOS端末単体で通信状況を確認する
- iOS端末の「設定」の項目に「デベロッパ」を表示する
概要
iOSのMobile Safariでネットワーク通信状況の確認方法
- iOSのMobile SafariでWebインスペクタを表示する方法はこちらを参照してください。
iOSのネットワーク通信速度をシミュレートする方法
iOSのネットワーク通信状況を「Instruments」で確認する方法
iOSのMobile Safariでネットワーク通信状況の確認方法
Webインスペクタのネットワーク状況を表示
1．「タイムライン」タブを選択
2．左側のメニューで「ネットワーク要求」が選択されていることを確認
ネットワークの通信状況を収録する
ログの取得には次の2つの方法があります
収録ボタンを押す
1．タイムラインの右にあるボタンを選択
- ボタンが灰色のときにカーソルを合わせると「収録を開始」と表示され、ボタンが赤くなる。
2．ボタンが赤くなり「収録中」と表示される
3．再度ボタンを選択すると「収録中」の文字列が消え、収録が終わる
4．1～3の間にスクリプト等がロードされた場合は右側の一覧に表示される
iOS端末でページをロードする
1．iOS端末で任意のページをロードする
2．自動で収録が始まり、ロードされたファイルが一覧に表示される
- 画像ではhifiveのトップページをロードしています
タイムラインの見方
Webインスペクタの右上には、
- ネットワーク要求
- レイアウトとレンダリング
- JavaScriptとイベント
それぞれのタイムラインが表示されます。
右下には初期はネットワーク要求のタイムラインの詳細が表示されます。
ロードしたファイルの詳細を確認する
1．確認したいファイルを選択
2．Webインスペクタ右上のリソースボタンを選択
3．選択したファイルの情報が右側に表示される
ロードしたファイルをフィルタリングする
初期はロードされたファイルが全て表示されます。フィルタリングをすることで、特定のファイルのみを表示させることができます。
1．Webインスペクタの右下のエリアにカーソルを入れる
2．スタイルシート、スクリプトなどの内、表示したい項目を選択
3．選択した項目のみが表示される
選択したファイルを参照する
1．参照したいファイルの行にカーソルを合わせる
2．名前カラムに表示される矢印「→」を選択する
3．リソースタブに切り替わり、選択したファイルが表示される
iOSのネットワーク通信速度をシミュレートする方法
1．iOS端末で「設定」を開く
2．左サイドメニューの「デベロッパ」を選択
3．右サイドメニューの「NETWORK LINK CONDITIONER」のStatusを選択
4．Enableを有効化
5．設定したいプロファイルを選択
6．プロファイルにチェックマークが付き、通信速度がシミュレートされます
- プロファイルの右にある「>」を選択すると、詳細な設定ができます
iOSのネットワーク通信状況を「Instruments」で確認する方法
1．Macで「Instruments」を開く
1．control＋spaceでSpotlightを開く
2．「Instruments」と入力
3．アプリケーション「Instruments」を選択
- 上記以外の起動方法
- Xcodeのメニュー「Xcode」→「Open Developer Tool」→「Instruments」を選択
- Xcodeのメニュー「Xcode」→「Open Developer Tool」→「Instruments」を選択
2．Instrumentsで通信状況を確認する
1．Instrumentsの「Library」ボタンを選択。
2．「Library」の検索欄にチェックしたい項目名を入力。画像では「network」と入力
3．検索結果がリストになって表示される
4．リストから任意の項目を「Instruments」の赤枠部分にドラッグ&ドロップ
- 今回は通信状況を確認するので「Network Activity」を選んでいます
5．「Choose Target」を選択し、チェックする端末を選択
6．「All Processes」を選択し、チェックするプロセスを選択。画像では「All Processes」を選択
7．「Record」ボタンを選択
8．iOS端末でページをロード。Instrumentsにログが表示される
9．「Record」ボタンをもう一度選択するとロギングを終了
10．取得したログの一覧が表示されます
iOS端末単体で通信状況を確認する
1．「設定」を開く
2．左サイドメニューのデベロッパを選択
3．右サイドメニューの「INSTRUMENTS」のLoggingを選択
4．「Networking」を有効化
5．「Start Recording」を選択
6．任意のアプリを操作。今回はネットワーク通信状況のログを見るので、通信を行うアプリを操作します。
7．「Stop Recording」を選択
8．Macで「Instruments」を起動。端末をMacに接続。
9．Libraryを開き、「Network Activity」をInstrumentsにドラッグ&ドロップ
10．「Choose Target」を選択し、ログをチェックしたい端末を選択
11．Instrumentsのメニュー「File」→「import Logged Data from Device」を選択
12．iOS端末が取得した通信状況のログが表示されます
- LibraryからNetwork Activity、Energy Usage以外の項目をドラッグ&ドロップすると、インポートできないことがあります。
iOS端末の「設定」の項目に「デベロッパ」を表示する
1．iOS端末をMacに接続
2．MacでXcodeを起動
3．Xcodeのメニュー「Window」→「Organizer」を選択
4．左サイドバーから接続した端末を選択
5．「Deveices」タブを選択
6．「Use for Development」を選択