iOSでCharlesを導入する | try! Swift Tokyo 2018 Day2-6

twitter.com

我々が開発するアプリの多くが、インターネット経由でAPIにアクセスします。macOS上で実行されるCharles Proxyは、iOSからの HTTP と HTTPSトラフィックをキャプチャできるため、障害をデバッグしたり、パフォーマンスを測定することができます。try!Swift Tokyoでは、Charles Proxy の作者である Karl が Charles for iOS という新しく強力なアプローチを発表します。これにより、あなたのiOSバイストラフィックを直接キャプチャすることが可能となります。

www.youtube.com

追記 (2018/03/28)

トークの際には審査中だったCharles Proxy for iOS がリリースされました

Charles Proxy

Charles Proxy

  • XK72
  • ユーティリティ
  • ¥1,080

iOSでCharlesを導入する

f:id:niwatako:20180302120601j:plain

ニュージーランド出身です。5年間日本語勉強しましたが、殆ど覚えていません。ここかあらは同時通訳です。

1985年から勉強しました。かわいいロボットがたくさん出てきました。デバッグも学びました。

f:id:niwatako:20180302120636j:plain

デバッグコンセプトは3ページ目に現れます。 デバッガはなかった、マルチタスクに対応していなかったので、別コンソールで表示するようなことはできない。

自分のコードがどうなっているか簡単にはみられなかった。直感でやる必要があった

f:id:niwatako:20180302120732j:plain

オークランド大学で働くようになって

f:id:niwatako:20180302120736j:plain

Webmediaと言う会社で働いた

スティーブ・ジョブズにとどめを刺されたFlashで開発していました。

アニメーションを作れた素晴らしいツールでした。でも開発者にとっては大変でした。マウスでプログラミングをし、メニューからコマンドを選んだが、デバッギングができない。

何を作ったか

f:id:niwatako:20180302120834j:plain

まずフラッシュをインストールしなきゃ、、冗談です

f:id:niwatako:20180302120842j:plain

f:id:niwatako:20180302120850j:plain

今も動きます。3Dがでてきます。

これらはすべてシンプルなHTTPリクエストをフラッシュの中で使っていました。

ネットワーク関係のことがうまくいかなかった時、何が行けないのか、コードが悪いのか、なにかリクエストが間違っているのか。あるいはサーバー側がリクエストハンドリングに失敗したのか、分からない。それか予期せぬ物が返ってきてハンドリングできないのか。よくわからなかったわけです。

f:id:niwatako:20180302121023j:plain

リクエストで問題が起きるポイントはたくさんあります。探すのは苦労します。

一つ一つ問題を潰していく

ソフトウェア開発者なら同じ苦労をしたと思います。

そこで、この間の送受信されるデータの中身をみられるHTTPプロキシーサーバーを作ろうと思ったわけです。

このような形でCharlesが登場しました

f:id:niwatako:20180302121126j:plain

早速何時間も節約できました。

このロゴのために撮った写真がこれです。

18年たちました

f:id:niwatako:20180302121157j:plain

目的は今も同じです。問題を調査し、トラフィックを有効なものにする

先程のサイトに戻りましょう

f:id:niwatako:20180302121218j:plain

表示されないものがあります

Charlesで通信を覗きます

f:id:niwatako:20180302121239j:plain

f:id:niwatako:20180302121254j:plain

lengthが0です。表示できるものを返していないわけです

レスポンスを返したか?がNoだということがわかります

f:id:niwatako:20180302121316j:plain

こういう形でCharlesは機能します。

Flashのプロジェクトのために作りました

f:id:niwatako:20180302121340j:plain

いまはライセンスを販売しています。WebでAjaxが使われるようになってみなさんCharlesを使い始めるようになりました。

2008年にはアプリの時代になりました。我々のアプリの多くはAPIを使っています。何がサーバーと送受信されたか 見る必要が出てきた。デバッギングに欠かせないわけです。

しかし現在のプロセスはちょっとめんどくさいです。PCで実行し、Wi-Fiネットワーク設定を行いプロキシとして使うようにします。

でもこれはちょっとめんどくさいです。

f:id:niwatako:20180302121511j:plain

f:id:niwatako:20180302121515j:plain

プロキシ設定したのを忘れて通信できなくなったり

f:id:niwatako:20180302121528j:plain

iOS上でCharlesを実行したかった。

CHARLIEです。

f:id:niwatako:20180302121556j:plain

Javaで書かれていて移植が必要。

f:id:niwatako:20180302121614j:plain

そしてObjective-Cで書いていたので初のSwiftプロジェクトにしました

f:id:niwatako:20180302121633j:plain

Swiftt2から初めて何度もマイグレートしてきました。

f:id:niwatako:20180302121651j:plain

大変だけどこの問題を解決して、Swiftが大好きなんです。

f:id:niwatako:20180302121743j:plain

取得したものをデスクトップに送ることができます。

シンプルですが、より機能を追加していきたいと思っています。

NetworkExtensionFrameworkを使っていてVPNコネクションを作る

f:id:niwatako:20180302121838j:plain

f:id:niwatako:20180302121841j:plain

本体はデバイスのバックグランドで動いている。プライバシーの問題はありません。

アプリを操作します

f:id:niwatako:20180302121928j:plain

f:id:niwatako:20180302121940j:plain

Charlesに戻るとリクエスト、レスポンスを確認することができます。

f:id:niwatako:20180302122001j:plain

JSONも覗けます

バイスで簡単にデコードできるしPCに共有することもできるExtensionを使って簡単に共有できる

f:id:niwatako:20180302122057j:plain

f:id:niwatako:20180302122120j:plain

バグをデバイス上で検証できる。どこでもレポーティングを送ることができる。パフォーマンスの計測もできる。

CharlesはWi-Fiでしか計測できませんでしたが、デバイスで動くようになったことでモバイル環境の様子を観測することができるようになりました。

f:id:niwatako:20180302122225j:plain

f:id:niwatako:20180302122231j:plain

通常のLatency50程度よりかなり遅延していることがわかります。

f:id:niwatako:20180302122313j:plain

f:id:niwatako:20180302122324j:plain

150msがニュージーランドとUtaのサーバー間で起きていることがわかります。

Charlesをディスクトップで表示し、タイムラインで見ることができます。

どこで時間がかかっているか分かる、並列化できるところが分かる。

f:id:niwatako:20180302122405j:plain

前のリクエストに依存して残りが実行されていることが分かる

f:id:niwatako:20180302122427j:plain

順不同で呼び出せるようにするか呼び出しを早くするかなどを検討できる。

サーバー距離と関係無く遅延は発生する。計測可視化診断することはこうしたデータがなければ困難。

https通信はTLS暗号化されているのでそのままではプロキシーを通して内容を覗くことは出来ません。

Charles Proxyの証明書をインストールし、それを信頼することで、https通信のデータも覗けるようになります。

f:id:niwatako:20180302122529j:plain

f:id:niwatako:20180302122619j:plain

f:id:niwatako:20180302122627j:plain f:id:niwatako:20180302122718j:plain

f:id:niwatako:20180302122707j:plain

Storeに出せることを祈っています

f:id:niwatako:20180302122736j:plain

[広告]面白かったら、ためになったら

  • はてなブックマークSwift タグをつけてブックマーク!
  • 「インターネットで生活を楽しく豊かにしたい」仲間を募集しています
  • Bitcoin: 3KGqXtR1ZaGVdkvcw8CCNrkDxDhdbZBYHL