昨日行われた『CSS Nite LP, Disk 17「HTML5による電子書籍」 』にご来場くださった皆様、そして関係者の皆様、ありがとうございました。私のセッションで使ったスライドや補足事項については、主催者からのフォローアップメールでご確認いただくとして、セッション中に紹介した「Charles」についての質問を多くいただいておりますので、取り急ぎその件だけフォローアップさせていただきます。
「Charlesを使えば何ができるか」についての解説は、当日イベントに参加いただいた皆様の特典ということにして、Charlesを使ったアレでソレするための方法を簡単ですがまとめておきます。
Charles のインストールと設定
公式サイトからファイルをダウンロードし、解凍後インストールします。
起動するとこのような画面が現れますので、Proxyの設定をおこないましょう。
MacもWindowsもおそらく同じメニュー構成になっていると思います。
まずは、「Proxy → Proxy Settings…」を選択して、動かすプロキシサーバの設定をおこないます。
「Proxies」タブを選択して、「Port」の欄にプロキシサーバが使用するポート番号を入力します。たとえば、ここでは「8888」が入力されていますが、これは「1024」以降の番号で空いているネットワークのポートで構いません。よくあるプロキシサーバのポートは、1080（Socks）、8080、10080とかですね。
念のため「Enable transparent HTTP Proxy」にもチェックを。
Macの場合は「Mac OS X」のタブで「Enable Mac OS X Proxy」にチェックをして、「Use HTTP Proxy」にもチェックを入れましょう。Windowsの方も同じようなメニューがあると思います。ちなみにこの項目はProxyメニューからもアクセスできます。
これでメインウィンドウの上段にある日の丸みたいな「Start / Stop」ボタンがオンになります。これらには、Proxyメニューからも直接アクセスできますので、なんかあったらそのメニューを開きましょう。チェックが入ってる項目が現在有効になっている機能です。
これでiPadやiPhoneから接続するための準備が整いました。
Charlesを使ったネットワークアクセスについて
あとは、iPadやiPhoneなどのネットワーク設定を変更して、Charles 経由でインターネットに接続するだけですが、その前に簡単ですがネットワーク接続の様子を図式化してみました（図はクリックで拡大します）。
通常、iPadとPCはそれぞれがWi-Fiでルーターに接続されています。そのままでは、ネットワーク全体を流れるデータをキャプチャでもしない限りは他のデバイスでやりとりされるデータまでは拾えません。
CharlesのProxyを有効にした場合は、iPadやiPhoneのようなデバイスにCharlesを動かしているPCのIPとポート番号を指定することで、そのマシンを経由してインターネットに接続している、と。だから、デバイスでやりとりされるデータを拾い集められるのです。
iPadやiPhone、その他のデバイスのネットワーク設定
このような仕組みなので、Charlesの設定が終わったらiPadやiPhoneなど使いたいデバイスのネットワーク設定を変更します。
iPadやiPhoneの場合は、初期設定のネットワークで接続しているWi-Fiを指定して接続設定を変更します（リストに並んでいる名前の右矢印をタップ）。一番下に「HTTP Proxy」の項目があるので「マニュアル」を選んで、Charlesの動くマシンのIPアドレスと指定したポート番号を入力します。
たとえば、IPアドレスが「192.168.0.6」CharlesのHTTP Proxyを動かしているポート番号が「8888」だったらこのように入力しましょう。認証部分はオフのままで大丈夫です。
で、あとはCharlesのHTTP Proxyをオンにして日の丸ボタンをクリックして記録をスタートさせて、iPadとかからSafariなどを起動して接続すればオッケイ。
このように左側に接続中のホスト名が出てきますから、みたいものをクリックして内容を確認してみましょう。HTML、CSS、JSはもちろんのこと、画像なんかもそのまま表示できます。
Charlesを使った回線シミュレーションのやり方
セッション中にも触れましたが、Charlesは回線のシミュレーションも可能です。
回線のシミュレーションは「Throttling」という機能を有効にします。回線速度などの設定は「Proxy → Throttling Setting…」にあります。
「Enable Throttling」にチェックを入れれば機能が有効になります。設定画面には、今時あまり使うこともないモデム並の速度や3Gなどのプリセットが複数用意されています。回線速度がない場合は、ダイアログ内に任意の数値をいれて設定しても良いでしょう。
終わったら、Proxyメニューを見るとThrottlingが有効になっているのが確認できます。このオンオフもメニューから切り替えられます。
というわけで
今回のセッションは、HTML5による電子書籍ということでしたので、直接それに関係の無いCharlesはおまけ程度に紹介するつもりでした。知っておくと便利なツールであることは間違いないですからね。でも、予想以上の反響でｗ
Firefoxの「LiveHTTP header」とかSafariやChromeのWebインスペクタ、そのようなHTTPプロトコルを流れるデータのやりとりをチェックするツールはあります。しかし、それはあくまでもブラウザに流れてくるデータだけです。
今回セッション中でふれた使い方はもちろん、回線速度シミュレーションもできるソフトは限られています。実はこのCharles、9月26日発売予定の「スマートフォン制作の教科書」にも、簡単ですが必携ツールのひとつとして紹介しています。その他、内容も盛りだくさんなのでこちらもよろしくお願いします（笑）。
追記
OS Xをお使いの皆さんは、こちらもどうでしょうか。
→ MacでWebデザイン、あると便利なアプリ48＋2
