ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料

ニコニコ動画
iPhoneアプリの作り方
dwango
松前健太郎

自己紹介
• 松前健太郎 (id: kenmaz)
• ドワンゴニコニコ事業本部企画開発部
ニコニコiPhone 開発リーダー

• 2010/06 中途入社
• 前職は大手メーカー系SIerで研究開発

こんな人向けに話します
• 動画・音声などマルチメディアコンテン
ツを扱うiPhoneアプリを開発しようと考
えている人

• PC向けのwebサービスをiPhone/スマート
フォン向けに提供しようと考えている人

• ニコ動の裏側が気になる人

Agenda
1. ニコニコ動画・ニコニコ生放送とは

2. ニコニコ動画 iPhoneアプリ

3. ニコニコ生放送 iPhoneアプリ

4. Appleの規約

5. HTTP Live Streaming詳細

6. 実績と今後

(株)ニワンゴが運営する動画共有サービス

最大の特徴：コメント

• みんなでわいわいコメントしながら動
画を見て楽しむ

• “非同期型コミニュケーション”

動画再生処理
• 動画再生プレイヤーはFlashで開発
• 動画再生レイヤー
• コメント描画レイヤー
• UIレイヤー

動画再生処理

わろた
WWWW
これはひどい
キターーーーーーーーー
カオスｗｗｗ
wwwwwww ぱねぇ
作者はネ申

(株)ニワンゴが運営する
動画ライブストリーミングサービス

公式生放送
• 運営が番組制作・配信する生放送

• お笑い、音楽、アニメ、ゲーム、政治、討論、報道、
etc...
• 毎月400∼500番組放送している

ユーザ生放送
• 一般のユーザが生放送を配信

• 放送する人＝「生主」

• 毎日数万番組が放送されている

もちろんコメントも

• ニコ動と同じく、コメントによるコ
ミニュケーションが可能

• ニコ生は同期型コミニュケーション
（ニコ動は非同期型）

ビジネスモデル
• プレミアム会員収入

• 月額525円

• 先日プレミアム会員120万人突破

• 有料番組・有料生放送

• 広告

• etc..

モバイル対応
• ニコニコ動画モバイル（ニコモバ）
• ドコモ・ソフトバンク・AU
• キャリア課金に対応
• プレミアム会員の半数がキャリア課金
iPhone/Andoridは・・？

ニコニコ動画と iPhone

• あらゆるデバイスでニコ動を楽しめるよう
にしたい

• iPhoneでもニコ動を見たい！

• ニコ動、ニコ生ともに、動画再生には
Flashを使っている

• →iPhoneではニコ動を視聴できない！

ニコニコ動画と iPhone

• ということで専用アプリを開発
• 2009/4 ニコニコ動画iPhoneアプリ
• 2010/5 ニコニコ生放送iPhoneアプリ

ニコニコ動画iPhoneアプリ

主な機能
• 動画再生
• コメント表示・投稿
• ランキング表示
• マイリスト表示・編集
• 検索

動画再生

• ２種類の再生モードがある
• 低画質モード
• 高画質モードプレミアム会員
+WiFi接続のみ

低画質モード

• ニコニコ動画モバイルの動画配信シス
テムを使って動画を再生するモード

• 動画データはosec形式

おせち

osec形式？
• ガラケーの動画再生処理にはいろいろ制限がある

• ガラケーでもFlashは再生できるが動画の上にコ
メントを重ねて描画できない

• データ通信量が制限されている

• ニコモバ独自の動画フォーマットが必要

→ osec形式を独自開発

おせち

osec形式？
• パラパラ漫画のようにJPEGを１コマずつ再生して動
画っぽく見せる

• 映像 = JPEG、音声 = ADPCM

• 動画データを１秒 (One-Sec)ごとに分割・パケット化

像画像画像画像画像画像画像画像画像画像画像画像

音声音声音声

１秒分１秒分１秒分

低画質モード
osec
over http

mp4/ﬂv mp4/ﬂv
ニコモバニコ動
配信サーバー動画ストレージ

osec形式変換
1.動画デコード
2.フレーム画像取り出し・縮小・JPEG圧縮
osec
over http 3.音声ADPCM変換
4.パケット化

低画質モード

• ニコモバのインフラを流用すること
で、低コストでiPhoneに対応できた...

• しかし動画としての品質は△
• モーションJPEGではやはりつらい

高画質モード
• mp4/H.264/AACの動画をそのままiPhone
で再生するモード

• ニコ動の動画ストレージから動画を直
接取得・再生

• PCと同等の画質で動画を楽しめる

高画質モード
• mp4/H.264/AACの動画をそのままiPhone
で再生するモード

• ニコ動の動画ストレージから動画を直接
取得・再生

• PCと同等の画質で動画を楽しめる

寄り道：１分で分かる動画形式

• mp4 : コンテナフォーマット
• H.264 : ビデオコーデック
• AAC : オーディオコーデック
mp4
H.264 AAC
ビデオオーディオ

寄り道：１分で分かる動画形式

コンテナ mp4, m4v, ﬂv, f4v, swf, avi, mov, 3gpp,
フォーマット webm

ビデオ H.264 (MPEG4-AVC), H.263,
On2 VP6,VP8, Theora, MPEG-1/2,
コーデック WMV
オーディオ AAC, MP3, ADPCM, Nellymoser,
コーデック Speex, Apple Lossless,Vorbis, WMA

高画質モード

mp4 ニコ動 mp4/ﬂv
動画ストレージ

いくつかの実装上の問題

問題１. 再生可能な動画形式
• iPhoneで再生可能な形式

• 動画コーデック：H.264

• 音声コーデック：mp3/AAC

• ユーザから投稿される動画形式は多種多様 (ﬂv/
mp4/DivX/MPEG1,2/WMV..)
• iPhoneで再生できない可能性がある

投稿された動画はサーバサイドで全てH.264/
AACで再エンコードすることにした

問題２：MPMoviePlayerの仕様
• 一回の動画取得で複数回のHTTPリクエスト
(Rangeリクエスト)が発生する

• 動画ストレージのサーバー負荷増大

• Cookieを自由に制御できない

• ニコ動の動画ストレージはCookieによる
認証を行っている

• 認証に失敗して動画が取得できない
※MPMoviePlayer: iOSが提供する動画再生用クラス

問題２：MPMoviePlayerの仕様

アプリ内部にローカルプロキシを実装
ニコ動
MPMoviePlayer ローカルプロキシ動画ストレージ
動画取得
動画取得

動画取得認証
動画データ返信

動画取得

動画取得

高画質モード
• ニコニコ動画はH.264を積極的にサポート
• ニコニコiPhoneも今後は高画質モードを
中心とする

• 低画質モード（osec形式）は徐々に廃止
していく予定

wwwwwwww キターーーーーー
コメント表示 wwwwww
これはひどいw

• 動画上にコメントを重ねて表示

• コメント＝ニコ動のキモ

• PC版より滑らかな表示！

• PC版：一定間隔でコメント表示位置をずらして描画

• iPhone版：CoreAnimation Frameworkを使ってコメン
ト描画をGPUにおまかせ

• デモ

CoreAnimationでコメント描画をヌルヌル
[comment posX:480.0];
[UIView beginAnimations:@"comment" context:NULL];
[UIView setAnimationDuration:4.0f];
[UIView setAnimationCurve: UIViewAnimationCurveLinear];
[comment posX: -comment.width];
[UIView commitAnimations];

480px
-120.0 0.0 480.0 600.0

wwwww wwwww
４秒
120px

WebAPIによるサービス間連携
• マイリスト、検索、ランキング

• ニコニコ動画の内部WebAPIを用いて実装
している

• ニコニコ動画に関連するサービス間の連携
は基本WebAPI

• →疎結合な設計

WebAPIによるサービス間連携
ニコニコ動画
共通認証API

ニコニコ動画
API
ニコニコiPhone
APIサーバー
ニコニコ
チャンネルAPI

ニコモバ
API

ニコニコ生放送iPhoneアプリ

主な機能
• 視聴機能
• 高画質モードプレミアム会員
+WiFi接続時のみ

• 放送機能
• iPhoneから生放送を配信プレミアム会員
のみ

主な機能
• 視聴機能
• 高画質モード
• 放送機能
• iPhoneから生放送を配信

視聴機能：低画質モード
• ニコモバのインフラを使って生放送を
視聴する機能

• 動画アプリと同様osec形式
• 映像品質はあまり良くない

視聴機能：低画質モード
ocec
over HTTP
Flash Media
Server

ニコモバ生 RTMP ニコ生 RTMP

配信サーバー配信サーバー

RTMP→osec変換

ocec
over HTTP

RTMP
(Real Time Messaging Protocol)
• 動画・音声のライブストリーミングのための
プロトコル

• Adobeが仕様を策定

• Flashプレイヤー等で採用されている

• ニコ生(PC)は全面的にRTMPを採用

• iPhone・ガラケーはRTMPの直接再生は不可

視聴機能：高画質モード
• H.264で配信されている生放送を直接
iPhoneで視聴するモード

• PCと同等の画質で生放送を視聴できる
• 放送元で明示的にH.264で配信する必要がある（デフォルトのコー
デックはVP6）。

• ニコ動アプリの高画質モードではすべての動画を再変換しH.264化し
ていたが、生放送ではコストが掛り過ぎるため、現在はH.264のみ対
応。

視聴機能：高画質モード

Flash Media
Server

HLS Wowza RTMP ニコ生 RTMP
Media
配信サーバー
Server

RTMP→HLS変換

HLS
(HTTP Live Streaming)

• HTTPだけで擬似的にライブストリーミ
ングを実現するプロトコル

• iPhoneでは動画ライブストリーミングに
HLSの使用を推奨している

Wowza Media Server

• Wowza Media Systems社が開発する商用
のストリーミングサーバー製品

• Flash Media Serverのクローン
• RTMP → HLS変換機能

放送機能

• iPhoneから生放送する機能
• PCカメラ iPhoneカメラ切り替え機能
• 前面・背面カメラ切り替え

放送機能

• どうやって実装するか？

放送機能の仕組み
ニコ生(PC版)では...
動画圧縮
(エンコード)

Flash Media
フレーム画像動画データ Server

RTMP ニコ生
配信サーバー

Webカメラの
PC RTMP
映像をキャプチャ

iPhone版プロトタイプ１
クライアントサイド圧縮方式
動画圧縮
(エンコード)

Flash Media

RTMP ニコ生
配信サーバー

iPhoneカメラの
iPhone RTMP

iPhone版プロトタイプ２
サーバーサイド圧縮方式
動画圧縮
(エンコード)

Flash Media

HTTP RTMP ニコ生
配信サーバー

iPhoneカメラの
iPhone 中継サーバー RTMP

２方式の比較
• クライアントサイド圧縮方式

• 長所：中継サーバーが不要

• 短所：iPhone内で圧縮するのでCPU負荷高

• サーバーサイド圧縮方式

• 長所：iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低

• 短所：中継サーバーが必要

サーバーサイド圧縮方式を採用
• クライアントサイド圧縮方式
iPhone3GSやiPod Touchなど

• 長所：中継サーバーが不要
CPU性能の低い端末でも
使えるようにしたい！
• 短所：iPhone内で圧縮するのでCPU負荷高

• サーバーサイド圧縮方式

• 長所：iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低

• 短所：中継サーバーが必要

Appleの規約

• iOSアプリを開発する上でAppleの規約
を守ることは必須

• App Store Review Guidelines (※1)
• HTTP Live Streaming Overview (※2)
※1 ) http://developer.apple.com/appstore/resources/approval/guidelines.html
※2 ) http://developer.apple.com/library/ios/#documentation/NetworkingInternet/
Conceptual/StreamingMediaGuide/Introduction/Introduction.html

Appleの規約（抜粋）

• 3G回線環境下で、10分以上または5分で5MBを
超える動画をストリーミング再生する場合
は、HTTP Live Streamingを使用しなければなら
ない。その場合には最低64kbpsの音声のみス
トリームを必ず含める必要がある。

アップルの規約が与える影響

3G回線環境下では事実上HLS対応が必須
WiFi通信時はHLSでなくてもよい

HLSに対応する際は、64kbpsの音声ストリームを
別途生成する必要がある → インフラコスト増


HLSに完全に対応しようとするとコスト高
↓
3G回線では動画再生を一部制限している
今後対応予定

HTTP Live Streaming 詳細
• HTTPだけで擬似的にライブストリーミング
を実現するプロトコル

• Appleが仕様を策定

• IETFのインターネットドラフトとして提出

• iPhone,QuickTimeなどで採用

• Adobe FMSがHLSをサポートする予定(!)

HTTP Live Streaming の仕組み
HTTPサーバー (Apacheなど)

#EXTM3U プレイリスト(m3u8)
#EXT-X-TARGETDURATION:10 を生成
#EXTINF:10, sample_0001.ts
H.264
動画ファイル

sample_0001.ts
動画ファイルを
プレイリストどおりに sample_0002.ts
10秒ごとに分割
連続再生
sample_0003.ts

HTTP Live Streaming の仕組み
HTTPサーバー (Apacheなど)

#EXTM3U プレイリスト(m3u8)
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE: 0 が動的に更新される

sample_0001.ts
映像データを
プレイリストどおりに sample_0002.ts
10秒ごとに分割
連続再生
sample_0003.ts

HLSの特徴
• 長時間の動画であっても一度の通信で
取得するのは10秒分の動画データだけ

• 帯域を圧迫しない
• インフラや通信キャリアには優しい

HLSの特徴
• 動画データはHTTPで転送

• Apacheのような普通のwebサーバーだけ
で動画ストリーミングが実現できる。
Adobe FMSなどの高価なサーバーは不要

• HTTPなので多くの環境で使用できる
（HTTP以外の通信をブロックしている
環境も多い）

HLSの特徴
• 帯域幅に応じた画質自動切り替え

• 帯域が細くても快適に動画を視聴できる

通信状況が sample_0001.ts
sample_0002.ts 高画質動画
良い時 sample_0003.ts

帯域幅に応じて自動切換え
通信状況が
sample_0001.ts
sample_0002.ts 低画質動画
悪い時 sample_0003.ts

アプリDL数
• 累計100万DL以上

ユニークユーザ数
• 4~5万UU/day 震災時NHK
サイマル放送

iPhoneから生放送配信
• 600番組/day

審査コストの低減
• 画面レイアウトを少し変更するだけで審査が必要
なのでコストがかかる

• アプリの売り上げの30%をアップルに取られる。
グーグルも追従の流れ

• アプリは色々つらい！

• WebでできることはWebへ

• HTML5 !

HTML5対応
• HTML5のvideoタグによる動画再生
• Safariだけでニコ動を視聴できる
• iPadでは対応済み
• アプリが不要！
• 審査も不要！

HTML5対応
• ただしiPhoneでは
• Safariの仕様により動画の上にコメン
トを重ねることが不可能なため、現
状では実現不可能

• そこで・・・

アプリUIのweb化
• 動画再生処理以外をweb(HTML/CSS/JS)で開発

• iPhoneアプリ組み込みのUIWebViewで表示

• 動画再生ボタンを押したらアプリネイティ
ブの機能を呼び出して動画再生


HTML/CSS/JavaScript
で実装

<a href=”nicovideo://play/sm9”>

[UIWebView stringByEvaluatingJavaScriptFromString:
@"videoList.show();"];

Android対応

• UIはweb
• 動画再生はFlash

まとめ
• ニコ動 / ニコ生iPhoneアプリを支える技術について紹介

• 動画や音楽などメディアコンテンツを扱うアプリを開
発する場合は、アップルの規約に注意する必要がある

• iPhoneアプリの審査コストを回避するには部分的にweb
化するのが有効

• ニコニコ動画でもスマートフォンの重要性は確実に高
まってきている

ドワンゴエンジニア募集中

• ドワンゴでは以下のようなエンジニアを募集
しています

• ニコニコ動画の開発に関わりたい！

• スマートフォンアプリ開発に興味がある！

• 大規模webアプリケーションを開発したい！

• などなど

ご清聴ありがとうございました

ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料

More Related Content

What's hot

Viewers also liked

Similar to ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料

Recently uploaded

ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料

Editor's Notes