ZAPAブログ2.0

1.ニコニコ動画でストリーミング配信されていた動画について

2.YouTubeのAPIを使って動画情報を取得

3.YouTubeのFLVファイルのぶっこ抜き方

4.では、Ameba VisionのAPIは？

5.Ameba VisionのFLVファイルのぶっこ抜き方

6.ニコニコ動画や字幕.inの仕様を想像してみる

7.実際にFlashでニコニコ動画みたいなものを作ってみる

8.まとめ

1.ニコニコ動画でストリーミング配信されていた動画について

通常、YouTubeで動画を見る場合は、以下のようなURLになります。

https://www.youtube.com/watch?v=6Zwr8Txqh1U

このページの中に、Flashで表示するためのEmbed用URLも表示されています。

<object width="425" height="350"><param name="movie" value="https://www.youtube.com/v/6Zwr8Txqh1U"></param><param name="wmode" value="transparent"></param><embed src="https://www.youtube.com/v/6Zwr8Txqh1U" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

このURL中の、「https://www.youtube.com/v/6Zwr8Txqh1U」にアクセスしてみると、直接FlashでSWFファイルが表示されます。
Youtubeのプレイヤーの中に投稿された動画が表示されています。

ですが、ニコニコ動画ではYouTubeのプレイヤーは表示されていませんでした。
ということは、ニコニコ動画ではYouTubeのSWFではなく投稿されたFLVファイルを直接扱って編集していたと考えられます。

2.YouTubeのAPIを使って動画情報を取得

次に、YouTubeのFLVファイルを扱うために、YouTubeのAPIを使うことにします。
YouTubeのアカウントを取得して、YouTube - Developer APIsのページでAPI情報を学びます。
youtube.videos.list_popularというAPIを使うと人気の動画情報を得ることができることがわかりました。
実際にこのAPIを使って、動画情報を取得してみます。
RESTで取得する場合のURLは以下のようになります。

https://www.youtube.com/api2_rest?method=youtube.videos.list_popular&dev_id=dev_id&time_range=time_range

返ってきたXMLはこのようになりました。

<?xml version="1.0" encoding="utf-8" ?>
- <ut_response status="ok">
- <video_list>
<total>25</total>
- <video>
<author>judsonlaipply</author>
<id>dMH0bHeiRNg</id>
<title>Evolution of Dance</title>
<length_seconds>360</length_seconds>
<rating_avg>4.68</rating_avg>
<rating_count>89493</rating_count>
<description>The funniest 6 minutes you will ever see! Remember how many of these you have done! Judson Laipply is dancing - www.evolutionofdance.com - for more info including song list!</description>
<view_count>42993490</view_count>
<upload_time>1144359053</upload_time>
<comment_count>23415</comment_count>
<tags>Dancing comedy</tags>
<url>https://www.youtube.com/?v=dMH0bHeiRNg</url>
<thumbnail_url>https://sjc-static6.sjc.youtube.com/vi/dMH0bHeiRNg/2.jpg</thumbnail_url>
</video>
- <video>
以下続く

XMLから得られた動画情報は、id、タイトル、長さ、レーティング、動画表示URL（YouTubeサイト内）、サムネイルURLなどです。

FLVファイルの情報はどこにもありません！

ここで、疑問が湧いてきます。
ニコニコ動画(β)がサービス終了、真相を担当者に聞くによると

Q　YouTube側からアナウンスはあったか？
A　特にない。こちらでアクセスが遮断されているのに気づいた。

Q　YouTubeの動画をAPIで呼び出す際の約款上、何か問題はなかったか？
A　それはなかったと認識している。

APIを利用して、問題もないと書かれていますが、通常のAPI利用ではFLVファイルのURLがわかりません。
FLVファイルのURLがわからないということは、YouTubeプレイヤーを外して独自にコメントを追加した動画表示もできないはずです。
ということは、YouTubeの規約違反であるということが考えられます。
では、一体どうやってFLVファイルを再生したのでしょうか？

3.YouTubeのFLVファイルのぶっこ抜き方

YouTubeのFLVファイルのぶっこ抜き方を考えてみます。

https://www.youtube.com/watch?v=6Zwr8Txqh1U

にアクセスして、HTMLファイルの内容を調べてみます。

<!-- begin main presentation code -->

の何行か下に

<script type="text/javascript">
  // <![CDATA[
  var fo = new SWFObject("/player2.swf?video_id=6Zwr8Txqh1U&l=64&t=OEgsToPDskL3QyZ9sw7UrzKLrE9FSlzd&s=BF298FA41D8BB8A0:8A51374783A7BCE6", "movie_player", "450", "370", 7, "#FFFFFF");
  fo.write("playerDiv");
  // ]]>
</script>

が見つかります。
SWFObject内の

/player2.swf?video_id=6Zwr8Txqh1U&l=64&t=OEgsToPDskL3QyZ9sw7UrzKLrE9FSlzd&s=BF298FA41D8BB8A0:8A51374783A7BCE6

の部分からFLVファイルを求めることができます。
video_idとtから、以下のFLVファイルの置き場所がわかります。

https://youtube.com/get_video.php?video_id=6Zwr8Txqh1U&l&t=OEgsToPDskL3QyZ9sw7UrzKLrE9FSlzd

実際に、このURLにアクセスすると、今度は別のサーバーに転送されます。

https://sjl-v125.sjl.youtube.com/get_video?video_id=6Zwr8Txqh1U

これが本当のFLVファイルの置き場所です。

このFLVファイルを使えば、YouTubeのプレイヤーを外して、自由に動画を再編集できるようになります。

例えば、PHPを使ったプログラムの流れとしては、

1.file_get_contents関数を使って、YouTubeサイト内の動画表示ページを取得

2.正規表現を使って、取得したHTMLから「/player2.swf?video_id=」の部分を抜き出す

3.video_idとtを使って、FLVファイルの置き場所を特定する

4.FLVファイルをストリーミング再生しながら、Flashでいろいろ表示する

このような流れになると思います。

ただし、この方法には大きな問題点が潜んでいて、

そもそも、YouTubeのAPIの正式利用方法ではない

FLVファイルを勝手にぶっこ抜いていいのか？

YouTubeの動画を勝手に再編集していいのか？

という問題点・疑問点があります。
YouTubeのAPIの正式利用ではない点で、すでにYouTubeからアクセス拒否される危険性があります。
FLVファイルぶっこ抜きが著作権上の問題となる可能性があります。
YouTubeに動画を投稿する際に再編集を許可しているかどうかも気になります。

他のAPI、例えばAmazonならAPIの利用は1秒間に1回までのコールに限定され、Yahoo!のAPIも一日のコール回数が制限されています。
またAmazonや楽天の画像を勝手に使って良いと勘違いしている人もいますが、あの画像は規約上Amazonや楽天の商品を販売するためにのみ使って良かったはずです。（アマゾンの商品画像リンク作成は→[Z]ZAPAnetサーチ2.0で）
YouTubeのFLVファイルぶっこ抜きはかなり危険な使い方だと思われます。

例えば、自分のブログのRSSの内容を表示されても怒る人はあまりいないと思いますが、ブログの本文内容まるまる勝手に表示されて、そのうえ再編集されてしまったら、怒る人は多いですよね？
ニコニコ動画はそれくらいのことをやっていたとも考えられます。

4.では、Ameba VisionのAPIは？

ニコニコ動画 開発者ブログ：AmebaVisionの動画が視聴しづらい件及びサムネイル画像の表示が遅い件によると、Amebaでは「AmebaVision←→ニコニコ動画専用回線」を作るとまで書かれていました。
ということは、
「Ameba VisionではFLVファイルが公開されているのでは？」
と思い、Ameba Vision APIを確認してみました。
動画詳細情報APIによると、

<?xml version="1.0" encoding="utf-8" ?> 
<data> 
<title> AmebaVision 動画情報</title>  
<link> https://vision.ameba.jp/</link> 
<description /> 
<item> 
<title> 【公式番組】渋谷ではたらく社長の会食（前編）</title>  
<link> https://vision.ameba.jp/watch.do?movie=12855</link>  
<tagId> 12855</tagId>  
<description> AmebaVision【公式番組】サイバーエージェントの社長である藤田晋の会食風景です。
今回のゲストは元ライブドア広報の乙部綾子さん。藤田社長から堀江さんをCTOに・・・!?
 番組はこちら https://ameblo.jp/fujitasbar/ *8/16〜後編アップします（夕方頃）
 「堀江さんは不正をするような人とは思えない」と語る乙部さん
 その驚愕エピソードを赤裸々に語ります!!</description>  
<amebaId> fujitasbar</amebaId> 
<ratingGood> 819</ratingGood> 
<ratingBad> 549</ratingBad> 
<playTimeSecond> 00:16</playTimeSecond> 
<viewCount> 21499</viewCount> 
<commentCount>25</commentCount> 
<imageUrlLarge> https://visionmovie.ameba.jp/jpg/200608/08/
c4a53e5f_4.jpg</imageUrlLarge>  
<imageUrlMedium> https://visionmovie.ameba.jp/jpg/200608/08/
c4a53e5f_3.jpg</imageUrlMedium>  
<imageUrlSmall> https://visionmovie.ameba.jp/jpg/200608/08/
c4a53e5f_2.jpg</imageUrlSmall> 
<ragistDatetime> Tue, 08 Aug 2006 11:29:13 +0900</ragistDatetime>
<elapsedTime> 25日前</elapsedTime>
<player> 
<script language="JavaScript" type="text/JavaScript"
src="https://visionmovie.ameba.jp/mcj.php?id=bYs52pA7/
x:bZhgVX:gd:BiX4BbnPAc_0YAfXXS7mIIWG:RNgbbi
:x.:YBt5x5hWaff/CimSan" /> 
</player> 
</item> 
</data> 

このようなXMLが返されます。
残念ながら、YouTubeと同様FLVファイルのありかはわかりませんでした。

5.Ameba VisionのFLVファイルのぶっこ抜き方

では、Ameba VisionのFLVファイルのぶっこ抜き方を考えてみます。

https://vision.ameba.jp/watch.do?movie=156407

にアクセスして、HTMLファイルの内容を調べてみます。

<!--viewer-->

の何行か下に

<script language="JavaScript" type="text/JavaScript" src="https://visionmovie.ameba.jp/mcj.php?id=das_GJNa5hMU:jaVWNi:di:ycExnL31ak/JpHQS8fZg">

が見つかります。
srcの

https://visionmovie.ameba.jp/mcj.php?id=das_GJNa5hMU:jaVWNi:di:ycExnL31ak/JpHQS8fZg

にアクセスしてみると、Javaスクリプトが表示されます。
さらにこのスクリプトのEmbed内の

https://visionmovie.ameba.jp/mcs.swf?id=das_GJNa5hMU:jaVWNi:di:ycExnL31ak/JpHQS8fZg

にアクセスしてみると…
FLVファイルではなく、SWFファイルが表示されます。
つまり、アメーバのプレーヤーの中にFLVファイルの動画が表示されていることになります。

ではどうやってFLVファイルを求めるかというと…
idを使います。

das_GJNa5hMU:jaVWNi:di:ycExnL31ak/JpHQS8fZg

このidをゴニョゴニョとデコードするとFLVファイルの置き場所がわかります。
実際に、ゴニョゴニョと解析したURLは以下のようになります。

https://visionmovie.ameba.jp/flv/200702/28/1a30c504.flv

これが本当のFLVファイルの置き場所です。
ですが、解析方法が怪しいので、今回はAmeba Visionには触れないことにします。
Ameba Visionがニコニコ動画に協力していることから、専用の裏APIなどが用意されている可能性もありますが、詳しいことはわかりません。

6.ニコニコ動画や字幕.inの仕様を想像してみる

YouTubeのAPIやAmeba VisionのAPIから直接FLVファイルをぶっこ抜けないことがわかりました。
ここで、なぜ「ぶっこ抜き」という言葉を使っているかというと、たまにネットランナーで使われている言葉だからです。
怪しげにファイルをダウンロードするから、「ぶっこ抜き」という言葉を使ってみました。
（余談ですが、このブログもネットランナーに載ったことがあります→ネットランナー6月号、ソフトバンクPから怪しい小包が！、このブログが雑誌に掲載されます、ネットランナー1月号に…）

FLVファイルの在りかを求めるのにけっこう時間を費やしてしまいましたが、次からはようやくFlashファイルの作成です。
Flash9からは、Adobe公式のコンパイラが無料で手に入るようになったので、それを使うことにします。
詳しくは、

はじめてのActionScript3.0プログラミング

に書いてあります。

ニコニコ動画みたいなものを作ってみるには、まずニコニコ動画や字幕.inの仕様を考えてみます。
「YouTubeなどからぶっこ抜いたFLVファイルのURLからストリーミングで表示させつつ、自前のサーバーからコメントファイルをXMLファイルか何かで書き出し、それをFlashで読み込ませて、動画の上からかぶせて表示する」
ような仕様だと想像してみます。

一応、この方向で試しに作ってみることにします。

7.実際にFlashでニコニコ動画みたいなものを作ってみる

Flash作成の知識がほとんどないので、FlashVarsの取り扱いなどに手こずりましたが、数時間かけて何とか「ニコニコ動画みたいなもの」を完成させてみました。

ニコニコ動画みたいなものを作ってみるテスト

再生には、Adobe - Adobe Flash Player9が必要です。
上記ページのフォームにYouTubeのvideo_idを入力してボタンを押すと、YouTubeのFLVファイルをストリーミングで表示しつつ、自分でテスト用に作ってみたコメントやエフェクトが表示されます。
ここでポイントなのは、自分で作ったFlashのSWFファイルがたった3KBしかないこと。
YouTubeのFLVファイルは数MBありますから、転送量負担の差が浮き彫りになります。

8.まとめ

最初に、「一体、どのくらい難しい技術なんだろう？」と思いましたが、Flashにあまり詳しくない自分でも数時間でできました。
あとは、オリジナルのプレーヤーとしてデザイン・インターフェースを格好良くしたり、コメントを投稿する機能を付ければほぼ完成です。
コメントに関しては、データベースに「動画ID、時間、コメント内容、文字の大きさ、色」などを登録して、あとでXMLなどに書き出してFlashで読み込むだけで表示させることができます。

意外と難しい技術ではありませんでした

ニコニコ動画の本当に難しいところは、転送量やFlash作成技術ではなく、アクセス増加によるデータベース負荷とコメント内容のモラル問題です。
大量にコメントが寄せられればそれだけ負荷が上がってしまい、全員のコメント内容を監視できないシステムに問題を多く抱えています。
一方、字幕.inの方は動画字幕作成者は一人のため、一つの動画に対するコメント数が膨大に増えることもなく、モラルに関してもコントロールしやすいシステムになっていると言えます。

もう少し根本的なところに戻って考えるなら、

FLVファイルを勝手にぶっこ抜いていいの？

投稿された動画を勝手に再編集していいの？

という問題点に関しては、一切クリアできていないような気がします。
この記事で取り上げた方法はあくまでも「想像」の範囲内なので、実際に同じような方法でやっていたかどうかまではわかりません。
やるのであれば、事前に動画共有サービス元の会社と交渉をしておくのが確実だと思われます。（断られるかもしれませんが）


ついでに、サンプルとしてYouTubeのAPIを利用して規約通りのページも作ってみました。
比較用のサンプルとして30分で作り上げたものです。（追記3月2日：機能、デザインを改善してもう少し便利なサイトにしました）

動画最新情報

APIで人気動画を取得してTOP10を表示しています。
PHPのPEARのCache_Liteを使っているため、YouTubeのAPIにアクセスするのは一定時間に一回だけです。（Cache_Liteの使い方については→ゲーム最新情報参照）
このように規約通りYouTubeのプレーヤーを表示してそのまま再生しているのであれば、何の問題もありません。

ニコニコ動画のマッシュアップを初めて見たときに、
「これは素晴らしいマッシュアップだ。今まで誰も気がつかなかったのだろうな」
と思ったのですが、もしかすると動画サイトの規約面などを考慮して作らなかった人が多かったからなのかもしれません。
今後、これらの問題点にどう対処していくのかが楽しみです。

公開APIを利用したサンプルサイトを作っていくよでは、これからもいろいろとサンプルサイトを作っていきたいと思います。
今回Flash作成時に苦労したFlashVarsの取り扱いなどの話は次回に続きます。


追記：ActionScript3.0についてまとめてみました。

Flex2,ActionScript3.0が優れている9の理由とAjaxとの差

ActionScript3.0の速さを体感してみよう！

はじめてのActionScript3.0プログラミング

参考リンク

Mind Clip ニコニコ動画がYouTubeに嫌われた本当の理由。

Mind Clip 「ニコニコ動画がYoutube嫌われた本当の理由」の補足

最速インターフェース研究会 :: 「ニコニコ動画はYouTubeにとって脅威になったのでアクセス拒否された」みたいな論調に話を持って行きたがる人たちについて

メルルーの秘宝とニコニコ動画と四畳半社長: ニコニコ動画とYoutubeとWeb2.0時代の終焉

メルルーの秘宝とニコニコ動画と四畳半社長: ニコニコ動画と長尾研究室と僕

ニコニコ動画(β)がサービス終了、真相を担当者に聞く

ニコニコ動画(β)終了に見るWeb2.0マッシュアップ時代への警鐘

日本で一番成功しているマッシュアップ「ニコニコ動画」

YouTube Downloader

google videoやyoutubeとかの動画を落として保存。

→その他のコンピュータTIPSの話はこちら。