読者です 読者をやめる 読者になる 読者になる

daisuke_nomura の日記

Android プログラマーな鉄道ファンのブログ

コミケ:『niconico Windows 8アプリの通信を見てみよう』

この記事は、2013年夏のコミックマーケットで、@toriimiyukkiApplestで頒布した冊子のデジタル版です。
誤字脱字の修正や、それなりに変更を加えています。

f:id:daisuke_nomula:20130812135843j:plain

第1章 はじめに

 この記事では、niconico Windows 8アプリの通信パケットをキャプチャし、通信内容を解析する手順について取り上げます。まず第1章ではパケットキャプチャの前に、各種紹介をします。

niconico

 niconico(ニコニコ動画)を説明する必要はないでしょう。ニコニコ動画は株式会社ドワンゴが運営する日本最大の動画共有サイトです。

f:id:daisuke_nomula:20140413151513p:plain

niconico
http://www.nicovideo.jp/

 GIGAZINEによると、日本の20代の約9割の人がアカウントを持っているほど普及しています。

20代の約9割がアカウントを持っている巨大動画サービスniconicoのアニメ戦略 - GIGAZINE
http://gigazine.net/news/20130201-niconico-anime-strategy-anime-business-forum-2013/

 ニコニコ動画は、Webサイトだけでなく、スマートフォンのアプリやゲーム機でも視聴できます。2014年4月現在で筆者が把握しているのを挙げると、以下のとおりとなります。

  1. PC向けWebサイト
  2. モバイル向けWebサイト
  3. ニコニコ動画モバイル(docomo/au/softbank)
  4. iOSアプリ
  5. Androidアプリ
  6. Windows 8アプリ
  7. Wii Uアプリ
  8. PS Vitaアプリ
  9. au TV boxアプリ
  10. 光BOX+アプリ
  11. Smart TV Boxアプリ
  12. VIERAシリーズアプリ
  13. BRAVIAシリーズアプリ
  14. 3DSアプリ

 Webサイトでは、Webページを読み込むことで*1動画を再生することになります。iOSAndroidWindows 8アプリなどは、画面のレイアウト自体はアプリが持つため、画面パーツを全てWebサーバから取ってくる必要はありません。そのため、アプリの場合、Web API(Application Programming Interface)に対して通信をし、動画のタイトルや説明文などの画面表示に必要なデータを取得し、動画再生へと遷移します。
 第2章では、Windows 8アプリとWeb API間の通信パケットのキャプチャを行い、通信内容の解析を行います。今回、パケットキャプチャの対象をWindows 8アプリとしたのは、Windows PC*2を用意すればいいためです。

niconico Windows 8アプリ

 niconico Windows 8アプリは、ドワンゴWindows Developer Daysにて発表し、2012/10/20にWindows Storeで公開されたアプリです。Microsoft Design Style*3に則り、Windows 8に最適化された形で、niconico*4を楽しめるアプリです。

f:id:daisuke_nomula:20140412161653p:plain

f:id:daisuke_nomula:20140412161657p:plain

f:id:daisuke_nomula:20140412161701p:plain

Wireshark

 Wiresharkは有名なパケット解析ソフトウェアです。Wiresharkでキャプチャしたパケットは、どのサーバと通信しているのか、どのポートでどのプロトコルを利用しているのか、といった情報を見れます。このアプリケーションは無料で配布されています。
 このWiresharkを使い、Windows 8アプリの通信内容を解析します。

f:id:daisuke_nomula:20140413143151p:plain

 第2章の前に、Windows PCにWiresharkをインストールしてください。
 Wiresharkは英語のソフトウェアでWebサイトも英語ですが、ダウンロードページからOSに合わせたインストーラをダウンロードして実行するだけでOKですので、ハードルは高くありません。

Wireshark · Go Deep.
http://www.wireshark.org/
Wireshark · Download
http://www.wireshark.org/download.html

第2章 Wiresharkでパケットキャプチャ、解析

 本章では、Wiresharkでパケットキャプチャを行い、Web APIの通信内容をログイン後~動画再生前まで、一つ一つ解析します。 なお、ログインと動画の取得方法はについては記載しません。

手順1: Wiresharkを起動

 Wiresharkを起動し、パケットキャプチャを行える状態にします。
 Wireshark起動後左側のメニューから、PCが通信に使用するLANを選択し、Startボタンを押します。
 ここで表示されるLANの数や種類は、Windows PCが持つ通信モジュールによって変化します。

f:id:daisuke_nomula:20140413144917p:plain

手順2: niconico Windows 8アプリを起動

 スタート画面から、niconico Windows 8アプリを起動します。*5

手順3: Wiresharkでパケットキャプチャを確認

 Wiresharkで通信内容が表示されました。
 これはアプリが起動後に通信をして、画面表示に必要な情報をWeb APIから取得しています。

f:id:daisuke_nomula:20140412161706p:plain

 アプリは起動をすると、メニューの表示に必要な情報をWeb APIから取得しています。
 ここでの通信内容は、以下の7項目あります。

  1. ログイン
  2. セッションID取得
  3. 視聴履歴取得
  4. オススメ動画取得
  5. ランキング上位取得
  6. カテゴリ取得
  7. ユーザー情報取得

 ここで、1. ログインだけ暗号化通信が行われます。これはログインのために、アプリ内に保存されたユーザーのメールアドレスとパスワードをWeb APIに送信するためです。
 Wireshark6.カテゴリ取得を見てみましょう。
 Wiresharkで、

HTTP 526 GET /nicoapi/v1/genre.list?dummy=1374388765 HTTP/1.1

と表示されている行の上で右クリックをし、Follow TCP Streamを選択してください。
 これで6.カテゴリ取得の一連の通信内容を見れます。これを見ると、HTTPで通信していることが分かります。

f:id:daisuke_nomula:20140412161709p:plain

niconico win8 cap1

 6.カテゴリ取得のHTTPリクエストでは、ヘッダに1. ログインで取得したnicosidという認証情報をセットしています。
 それに対するHTTPレスポンスでも、Nicosidという値で認証情報をセットしてきます。HTTPレスポンスでは、ボディに各カテゴリの情報が載っています。このパラメータは以下のフォーマットになっています。

niconico win8 cap2

 <tag></tag>に囲まれた箇所が......となっているのは、この箇所が日本語になっており、Wiresharkで表示できないためです。Web APIからUTF-8で送られてきているので、自作プログラムから参照する場合は正しく日本語で受け取ることができます。
 niconicoは通信の多くの部分がXML形式かJSON形式、あるいは後述するgetflv APIのような&で連結されたURL形式で送られてきます。

手順4: niconicoアプリで動画再生

 次にniconicoアプリで適当な動画を選択して、再生します。

手順5: 動画再生時の通信内容をキャプチャ

 動画の再生時は、以下の通信が行われます。

  1. 動画の詳細情報取得
  2. 動画投稿者情報の取得
  3. オススメ動画の取得
  4. コメントの取得
  5. 動画の取得

 1.動画の詳細情報取得を見てみましょう。
 動画の詳細情報取得は、getflvというAPIにアクセスします。niconicoをWebサイトで視聴した際でもこのAPIにアクセスします。
 Wiresharkで、

HTTP 523 GET /api/getflv?device=metro&eco=1&v=sm9 HTTP/1.1

と表示された行を右クリックして、Follow TCP Streamを選択します。

f:id:daisuke_nomula:20140412161713p:plain

niconico win8 cap3

 getflv APIは他のAPIと異なり、&で連結されたURL形式でレスポンスしてきます。各値はURLエンコードがされているので、URLデコードが必要です。この形式はXMLJSONと異なり見やすくありませんが、このgetflv APIniconico初期から使用されて以来、この形式でレスポンスしてきました。

f:id:daisuke_nomula:20140412161716p:plain

 getflvのレスポンスには、以下の情報が入っています。

  1. thread_id
  2. l
  3. url
  4. link
  5. ms
  6. ms_sub
  7. user_id
  8. is_premium
  9. nickname
  10. time
  11. done
  12. ng_rv
  13. hms
  14. hmsp
  15. hmst
  16. hmstk

 この内、メッセージサーバに対するコメントの取得で1. thread_id5. ms7. user_idを使用し、3. urlの値を使用して動画サーバに対して動画の取得を行います。
 次に、メッセージサーバへのアクセスを見てみましょう。
 Wiresharkで、

HTTP/XML 342 POST /10/api/ HTTP/1.1

と書かれた行を右クリックして、Follow TCP Streamで見ます。

f:id:daisuke_nomula:20140412161720p:plain

niconico win8 cap4

 これの一つ前までの通信では、GET形式でHTTP通信が行われていましたが、メッセージサーバへの通信はPOST形式で行われます。

niconico win8 cap5

 ここの部分がPOST形式で、niconicoアプリからメッセージサーバへ送られているデータです。この通信はXML形式で行われます。
 大雑把に見ると、リクエストはgetflvで取得した5. msに対して、1. thread_id...(1) 7. user_id...(2)を使い、リクエストは

niconico win8 cap6

レスポンスは、

niconico win8 cap7

という形式で行われています。

 レスポンスの<chat></chat>に囲まれた...........................の部分がコメントです。vposが画面に表示するタイミング(10ミリ秒単位)を表します。この辺りは、niconicoのWebサイトの通信内容と大差ありません。

通信内容の解析おわり

 前述のとおり、動画の取得時の通信内容については記載しません。動画の取得も、getflv APIで取得した情報を元に行っており、Wiresharkに表示されています。
 ご自身で、どの通信が動画の取得なのかを確認してみてください。*6

第3章 さいごに

 第2章の通り、Wiresharkを使うことでWeb APIへの通信内容を解析するのは容易にできます。
 アプリの通信を見ることで、Web APIを設計する際の参考にしたり、そのWeb APIを使用するアプリを自作できます。

 今回の記事ではniconicoのログインと、動画の取得は記載しませんでした。動画の取得の通信内容は容易に判別できますが、どうやったら暗号化された通信を見れるのか、といった探求をしてみてください。

*1:HTML形式で文書構造を知りCSSで装飾をし、JavaScriptで動的にし、Flash

*2:もちろんWindows 8

*3:旧Metro Style

*4:ニコニコ動画のみ

*5:事前に一度起動し、アカウント設定を済ませておいてください

*6:上に書いたし、すぐ分かる