« iPod touchが急にインターネット接続できなくなった | トップページ | ココログでニコニコ外部プレイヤー設置を試みた結果 »

2008/07/14

ココログでニコニコ外部プレイヤー設置を試みる

ニコニコ動画で登録されている動画コンテンツを、ニコニコ動画サイトへのログイン無しに特定のサイトから視聴できる、一般的にはブログパーツというのだろうか、Flashアプリについて。公式サイト内でも、ニコニコ外部プレーヤー、外部プレーヤなど名称が統一されていないようだが、本日時点で最新であるニコニコニュースエントリの記述に準拠して、ここでは「ニコニコ外部プレイヤー」で統一した。

 

動機

  • ココログでニコニコ外部プレイヤーを設置できないことを偶然知る(なお、対応サイトは前述リンク先エントリの通り)。
  • 久しぶりにニコニコ動画サイトへ行ったが、このとき再生数が1,000程度であるが個人的に素晴らしいと感じたコンテンツに出会った。

上記の2要素が重ったことと、技術的に全く未知のWebアプリの仕組みについても少し勉強してみよう、ということで検討を行うことにした。

 

結論

表題に記載した、ココログにニコニコ外部プレイヤーを貼り付けるという目的は達成できなかった。niconico_player

ニコニコ外部プレイヤーの初期画面(再生ボタンが表示される画面)の表示までは行えたが、コンテンツの再生はできなかった。

これは、他の人が試して実現できていることと同じようだ。invalid_play_key, thumbPlayKeyといったキーワードで検索を行うと、同様のことを行っている記述を見つけることができる。

 

検討の成果

一方で、今まで全く触れていなかった方面の技術について多く知識を得ることができた。具体的には下記の通り。

  • Firebugの使用方法。Javascriptは全く知らないが、本ツールを使えばWebブラウザ上でステップ実行できるため、ソースコードの意図を理解しやすくなる。
  • WireSharkでのTCPストリームの表示。WireSharkの使用方法についてはまだ詳しく理解していないが、とりあえずWebサーバ=クライアント間でどのようなデータをやり取りしているのかを調べることはできるようになった。
  • Apache2の設定方法。ApacheのバージョンやLinuxディストリビューションの違いによって設定ファイルの記述ポリシが異なり、いまいち理解しないまま放ったままになっていたが、今回Rails向けに設定を考えることでなんとなくポリシが見えてきた気がする。 
  • RailsのControllerの役割や、Controllerがパラメータを解釈する手順。具体的には、書籍「RailsによるアジャイルWebアプリケーション開発第2版」の第20章辺りの記述の理解である。現時点では、Railsについてはまだ書籍のサンプルコードを実行してみる程度しかできていないが、実際に1からRailsアプリを作成してみることで理解が深まった。今回のアプリはこのことを理解するのに最もシンプルな例だった。
  • Railsのデプロイ方法。今まではローカルでWEBrickを使用して動作させていただけだが、今回は外部に公開する必要があったので、Apache+passengerをXubuntu上で動作させた。

 

以下、今回行ったことについて記述する。検証コードはこちらに保存した。

用意したもの

  • Proxomitron May。これは後述のテスト1で使用する。Windowsアプリケーションであるが、用途はrefererの書き換えだけであるため、他のOSでも同等のものは用意できると思われる(Firefoxプラグインにもそのような機能を有するものがあるようだ)。 
  • ローカルのRails実行環境。これは後述のテスト2で使用する。今回、プロキシサーバ的にRailsを利用したが、PerlやPHPの例も2ちゃんねるにあった。おそらくSquidみたいな本物のプロキシサーバでも可能だとは思う。
  • 2個目のIPアドレスとRails実行環境。これは後述のテスト3で使用する。サーバをローカルに立てた場合とリモートに立てた場合での挙動の違いについて確認するために用意した。個人が準備する場合、一般的にこれはレンタルサーバになると思われる。

 

テスト1:ニコニコ外部プレイヤー用Javascriptをローカルで開いてみる

参考:ニコニコ動画がアカウントなしで外部再生が可能になりました。 - 釣堀.net

上記サイトに記載の通り、ニコニコ動画サイトが提供するJavascript(http://www.nicovideo.jp/thumb_watch/[動画ID])を実行することで、ブラウザ上にニコニコ外部プレイヤーが表示される。そこで、まず、このスクリプトを記述したtest1.htmlをブラウザで開いてみる。すると、下記のように表示される。

東方で『三十路岬』
申し訳ございませんが、お使いの環境ではご利用になれません。
リファラの送信を許可するか、ニコニコ動画上でご覧ください。

この記述より、リファラをアクセスコントロールの一手段として用いていることが分かる。そこで、Proxomitronを使用して、リファラの設定を変更して再度試してみる。

設定方法の例は下記の通りである。この設定を行った後、同様にtest1.htmlを開く(再読み込みする)と、ニコニコ外部プレイヤーが表示され、再生可能なことが確認できる。

Proxomitron初期画面のボタン"Headers"を押してHTTP Header Filtersウィンドウを開く。リスト内の設 定"Referer: Hide where we've been (Out)"の編集項目"Header Value Match"を空欄に、"Replacement text"を、前述ニコニコニュースに記載されているニコニコ外部プレイヤー対応サイト(図でははてなを指定)のURLに書き換え、画面を閉じる。

proxomitron

次に、ブラウザの設定変更を行い、Proxomitron経由で接続するように変更する。Firefoxでは、メニューバーから"ツール" > "オプション"でダイアログを開き、"ネットワークタブ"中の"接続設定"で、localhost:8080を指定する。

firefox_proxy

なお、上記の設定変更は、このテストが終わった際に元に戻しておく。

 

テスト2:リファラ設定をクライアントから切り離す

テスト1結果の通り、ローカルの設定を変更すれば再生できることがわかった。しかし、blogにニコニコ外部プレイヤーを設置することを考えた場合、この方法は問題がある。不特定のblog購読者に対して上記のような設定を強要することは不可能だからである。

テスト1を行った結果、HTML中のJavascriptの読み込みについて以下のような経路で行っていると認識した。

図2-1:通常の処理手順

route1

(図中のアイコンはIconArchiveに登録されているものを利用させていただいた;Icons by:FastIcon.com and Icons-Land)

  • (1) ブラウザがWebサーバ(図中ではココログサーバと記載)に対して、表示対象のページ取得要求(HTTP GET)を行う。
  • (2) ココログサーバが応答を返す。
  • (3) ブラウザは、<script>タグを見つけ、外部から取得しなければならないJavascriptがあることを認識する。
  • (4) <script>タグのsrcに書かれている参照先(ニコニコ動画サーバ)にJavascriptの取得要求を行う。
  • (5) ニコニコ動画サーバは、リファラを見て、OK結果を返すかNG結果を返すか判断する。
  • (6) 結果に沿ったJavascriptをPCへ返す。

ここで、(4)の処理を行うのはココログを見ている各ユーザのPCであるため、本節の冒頭で記載した問題が出る。

上記問題の解消方法として、ニコニコ動画サーバへのリクエストを代理で行う代理サーバを立てることを考えた。ココログにアップロードするコンテンツには、この代理サーバへのリンクを貼ればよい。結果として、処理の流れは以下のようになる。

図2-2:代理サーバを経由した処理手順

route2

  • (1) ブラウザがココログサーバに対して、表示対象のページ取得要求を行う。
  • (2) ココログサーバが応答を返す。
  • (3) ブラウザは、<script>タグを見つけ、外部から取得しなければならないJavascriptがあることを認識する。
  • (4) <script>タグのsrcに書かれている参照先(代理サーバ)にJavascriptの取得要求を行う。
  • (4)' 代理サーバはPCからの要求を元に、ニコニコ動画サーバへJavascriptの取得要求を行う。この際、代理サーバはリファラを変更し、ニコニコ動画サーバからNGが返ってこないようにする。
  • (5) ニコニコ動画サーバは、リファラを見て、OK結果を返すかNG結果を返すか判断する。
  • (6)' 結果に沿ったJavascriptを代理サーバへ返す。
  • (6) 代理サーバはニコニコ動画サーバから得た結果をそのままPCへ返す。

下線部は前述の処理と異なる部分、太字はその中でも重要な変更点を示している。

(4)の変更点については、単純に自分がココログへ投稿するエントリ中のリンクを変更すればよいだけなのであまり問題ではない。(6)'及び(6)は単純に要求者へ応答を返すだけである。

問題は、(4)のリクエストを代理サーバにどう処理させれば、ニコニコ動画サーバへ要求を行えるようになるか、ということだと考えた。受け取ったURLを処理に反映させる方法として、私は、最近勉強し始めたRails(のAction Controller)以外に知らなかったため、これを採用することにした。

今回作成したrailsアプリの実装手順は以下の通り。

  1. nicoプロジェクトの作成
    > rails nico
    > cd nico
  2. PCが呼び出すためのControllerとメソッドの作成
    > ruby script/generate controller nicovideo thumb_watch
  3. thumb_watchメソッドの実装
    app/controllers/nicovideo_controller.rbの編集。
    open-uriにリファラを設定してhttpのURLを開くサンプルが載っていたので、これをそのまま使用した。
  4. PCへの返却を実装
    app/views/nicovideo/thumb_watch.rhtmlの編集。
    単純に、(3)の処理でニコニコ動画からもらった文字列を渡すだけとした。

上記の手順で編集した2ファイルについては、冒頭に示した添付ファイルに含めた。

なお、今回はWindowsではRails1.2.6、XubuntuではRails2.0.2という異なるバージョンでそれぞれ実行しているが、上記の手順は1.2.6のものである。2.0.2では以下の点が異なった。

  • Rails2では、Active Recordの使用が前提となっているようであり、デフォルト設定ではDBが存在しないとエラーになる。この対処方法は、config/environment.rbの下記の記述コメントアウトを外し、有効にすればよい。
    config.frameworks -= [ :active_record, :active_resource, :action_mailer ]
  • 上記の手順で記載した自動で作成されるViewファイルthumb_watch.rhtmlの名称がthumb_watch.html.erbに変更になっていた。ただ、名称の変更のみのようで、記述はどちらも同じで問題なかった。

この後、WEBRickを起動しhttp://localhost:3000/nicovideo/thumb_watch/sm3942869にアクセスする。下記のような、Javascriptっぽい長い文字列が表示されることで正常に動作していることが確認できる。

result_js

テスト1で設定したブラウザのプロキシ設定は解除済みであることを確認し、test2.htmlを開く。表示されたニコニコ外部プレイヤーで、相変わらずコンテンツを再生できた。

test2.htmlは、test1.htmlで記載していた<script>タグの参照先を、ニコニコ動画サーバからローカルサーバに変更している。つまり、図2-2の手順で処理していることになる。

 

テスト3:代理サーバの外部化

テスト2は、正確には図2-2の構成とは異なり、図中のPCと代理サーバを同一端末で動作させていた。これは、テスト1と同様、blog購読者が設定を負担することになり現実的ではない。テスト3では、図2-2の通り、PCと代理サーバを別々の端末(=別々のIPアドレス)で動作させてみる。

PCとは別に用意したリモートホストに実行環境を構築する。具体的にはテスト2で実装したRails環境をリモートホストに用意すればよい。

リモートホストでWebサーバを起動した後、test3.htmlを開く。なお、開く前に、test3.html内で src="http://yukihane.dip.jp/rails/nico/nicovideo/thumb_watch/sm3942869" と記載している箇所は、各々の環境に合わせて変更する必要がある。

この結果は、本文章冒頭の「結論」に記載したとおりであり、ニコニコ外部プレイヤーの表示はできるものの、再生はできない、というものであった。

ニコニコ外部プレイヤーをクリックした際の、ニコニコ動画サーバからのレスポンスをWireSharkで見てみると、下記の応答が返ってきていることが分かる。

error=invalid_play_key&done=true

つまり、(実行環境の不備などが原因でなく、)ニコニコ動画サーバが正しく状況を判断しているということになる。

ニコニコ外部プレイヤー表示後の処理の流れを図2-2に追記したものを以下に示す。

図3-1:ニコニコ外部プレイヤー表示・再生手順

route3

  • (7) ユーザがニコニコ外部プレイヤーをクリックし、再生を要求する。
  • (8) Webブラウザはニコニコ動画サーバに対して動画コンテンツの要求を行う。
  • (9) 何らかの判断を行い、動画コンテンツを送り返すか、NGであるか判断する。
  • (10) 結果をWebブラウザに返す。

今回のテストでは、手順(9)の、「何らかの判断」でNGになっているため再生できない。

テスト2とテスト3の違いは、図3-1内の、手順(4)'と手順(8)を行う端末が同一か異なるかであるため、この辺りの条件(要求元IPアドレスとか)で判断しているのではないかと考えられる。

« iPod touchが急にインターネット接続できなくなった | トップページ | ココログでニコニコ外部プレイヤー設置を試みた結果 »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: ココログでニコニコ外部プレイヤー設置を試みる:

» ココログでニコニコ外部プレイヤー設置を試みた結果 [雪羽の発火後忘失]
前回のテスト結果を貼ってみる。 こちらがテスト3の結果となる。再生ボタンを押すまでは通常に動作すると思うが、動画再生は行われないはずである。 次に、テスト1の結果を貼ってみる。 前回、Proxomitronの代わりになるFirefoxアドオンがあったはず、と記載したが、これはRefControlというものだった。 例えば、以下のように設定する。 上記のように、サイト"www.nicovideo.j... [続きを読む]

« iPod touchが急にインターネット接続できなくなった | トップページ | ココログでニコニコ外部プレイヤー設置を試みた結果 »

other sites

  • follow us in feedly
  • github
  • stackoverflow

ソフトウェアエンジニアとして影響を受けた書籍

  • Christain Bauer: HIBERNATE イン アクション

    Christain Bauer: HIBERNATE イン アクション
    理論と実践が双方とも素晴らしい製品であるHibernate。本書はそのプロダクトを書名に冠していますが、Hibernateを使うつもりがなく、ORマッピングの解説書として読むにしても十分な良書です。Second EditionとしてJava Persistence With Hibernateという書籍も出版されていますが、残念ながら現在のところ 和訳はされていません。-インアクションは2.xの、Java Persistence-は3.1の頃のものなので、最新版とはちょっと違うところもあることに注意。 (★★★★★)

  • アンドリュー・S・タネンバウム: 分散システム 原理とパラダイム 第2版

    アンドリュー・S・タネンバウム: 分散システム 原理とパラダイム 第2版
    クライアント/サーバシステムを構築する上で必要となる知識が総論されてます。Web技術者も、フレームワーク部分を開発するのであれば必読。 (★★★★★)

  • Joel Spolsky∥著: ジョエル・オン・ソフトウェア

    Joel Spolsky∥著: ジョエル・オン・ソフトウェア
    前述の書籍「ソフトウエア開発プロフェッショナル」をより砕いたもの、という感じでしょうか。 前書きではプログラマでなくSE向けの本のように書かれているが、プログラマが読んでも面白い本であると思われます。 SEになった新人(あるいはそういう会社に入る/入りたての人)にとっては、これからどういったことが仕事を遂行していく上で起こりえるのか、どのように考えて行なっていけばいいのか決定する助けになると思います。 元は″Joel on Software″というブログの記事で、web上でも一部日本語で読めます。 http://japanese.joelonsoftware.com/ (★★★)

  • ドナルド・C・ゴース,ジェラルド・M・ワインバーグ: ライト、ついてますか

    ドナルド・C・ゴース,ジェラルド・M・ワインバーグ: ライト、ついてますか
    問題解決(一昔前のの流行語で言うところの『ソリューション』)能力は、システムエンジニアのスキルとして備えるべきもののうちのひとつです。しかし、これは難しい。学校で出されるテストと違い、唯一の、(問題提出者が想定している)解を求めるだけが「問題解決」では無いからです。そもそも、何が問題なのか、それは本当に問題なのか、それは本当に解決すべき問題なのか、その問題解決方法は正しいのか、などを解決しなければ、「その解は正しいのか」に辿りつくことができません。この本の最も良いところのひとつは、本があまり厚くないこと。すぐに読めるし、何回も読み返す気になるでしょう。 (★★★★★)

  • スティーブ・マコネル: ソフトウエア開発プロフェッショナル

    スティーブ・マコネル: ソフトウエア開発プロフェッショナル
    コードコンプリートで有名なスティーブマコネルの著書。新人SEに読んで欲しい。個人として業界の中でどうあるべきか、組織としてどうあるべきか、SEのプロ意識とは?SEの心構え概論、といったところでしょうか。また、業界における資格の重要性についても説かれています。この業界では資格が特に軽んじられる傾向がありますが、この傾向はどんな弊害をもたらすのか、将来的にこの業界は資格に対してどのような姿勢で臨んでいくべきなのか。日経BP社では(他の出版社もだが)最近、似たような類いのあまり面白くない書籍が乱出版されていますが、この本は別格だと思うので安心して購入して欲しいと思います。 (★★★★★)

無料ブログはココログ