showroom コメントログビューア「しょころ（仮）」

通信内容の解析と聞くと真っ先に思いつくのがWiresharkでパケットキャプチャー。
これは手軽でいいのですが、showroomの通信はhttps。暗号化されているのです。
wiresharkでも暗号化を解除できますが、秘密鍵を持っている場合に限ります。
秘密鍵は、サイトのサーバ内にしかなくて一般のひとは入手することは不可能なものなのです。
じゃあなんで「しゅころ（仮）」ではブラウザの通信方法を代行して通信できているのか。
同じようなツール作ってみたいと思ってあきらめた方もいらっしゃるのではないかと思います。
最近のブラウザには「ディベロッパーツール」なるものが用意されていて、ブラウザの通信内容を記録することができるようになっているのです。
ここでは、その足掛かりになる程度のご紹介をさせていただきます。

google chromeを使います。ほかのブラウザでもできると思います。
バージョン 45.0.2454.93 mで説明します。
メニューの「その他ツール」⇒「ディベロッパー ツール」を選びます。


すると、なにやら出てきたと思います。
丸で囲んだ部分をクリックすると、縦横どちらにするか選べます。見やすい方を使うといいです。


そして、お目当てのサイトにつないでみます。

どばーっと出てくると思います。
これはつないだタイミングの最初からのブラウザが通信した内容が時系列に並べられたものです。
ＤＴＭとか、動画編集されている方は見たことがあるような画面じゃないでしょうか。
この１行１行がブラウザがサーバに対して送信したリクエストと、レスポンスになります。
では、一番最初に行ってみます。
１つ目をクリックすると、画面がわかれて詳細が表示されるようになります。
この内容をプログラムで再現することで「しょころ（仮）」は動いています。

Requestというのは、ブラウザからこのＵＲＬのページをちょうだい！っていう命令です。
Responsはサーバからの回答、ＨＴＭＬのテキストの情報だったり、画像、動画、音声のデータだったりします。

リクエストには、ブラウザ側の情報を一緒に送ることで、ほしい情報をどういう感じでほしいのかサーバーに伝えたり、ログインが済んでいるのかという情報を知らせることができます。
そういう情報がリクエストヘッダーに込めてられています。

詳細をみるにはView sorceをクリックします。


見るだけじゃなくテキストとして取り出したい場合は一覧の部分で右クリックして「Copy request headers」というのを選ぶとクリップボードにコピーされるのでメモ帳かなんかに張り付けることで見ることができます。

これはリクエストした結果になります。
説明は上とかぶるので割愛しますね。

以上です。
うん、これくらい知っていればＯＫです。
あとは各画面でボタンを押したときにどういうリクエストが飛ぶのかじっと見ているだけです。

202204仕様変更後