More Related Content
Similar to ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料
Similar to ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料 (20)
ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料
- 2. 自己紹介
• 松前健太郎 (id: kenmaz)
• ドワンゴ ニコニコ事業本部 企画開発部
ニコニコiPhone 開発リーダー
• 2010/06 中途入社
• 前職は大手メーカー系SIerで研究開発
- 11. 動画再生処理
わろた
WWWW
これはひどい
キターーーーーーーーー
カオスwww
wwwwwww ぱねぇ
作者はネ申
- 12. 動画再生処理
わろた
WWWW
これはひどい
キターーーーーーーーー
カオスwww
wwwwwww ぱねぇ
作者はネ申
- 15. 公式生放送
• 運営が番組制作・配信する生放送
• お笑い、音楽、アニメ、ゲーム、政治、討論、報道、
etc...
• 毎月400∼500番組放送している
- 16. ユーザ生放送
• 一般のユーザが生放送を配信
• 放送する人=「生主」
• 毎日数万番組が放送されている
- 18. ビジネスモデル
• プレミアム会員収入
• 月額525円
• 先日プレミアム会員120万人突破
• 有料番組・有料生放送
• 広告
• etc..
- 20. ニコニコ動画 と iPhone
• あらゆるデバイスでニコ動を楽しめるよう
にしたい
• iPhoneでもニコ動を見たい!
• ニコ動、ニコ生ともに、動画再生には
Flashを使っている
• →iPhoneではニコ動を視聴できない!
- 21. ニコニコ動画 と iPhone
• ということで専用アプリを開発
• 2009/4 ニコニコ動画iPhoneアプリ
• 2010/5 ニコニコ生放送iPhoneアプリ
- 29. おせち
osec形式?
• ガラケーの動画再生処理にはいろいろ制限がある
• ガラケーでもFlashは再生できるが動画の上にコ
メントを重ねて描画できない
• データ通信量が制限されている
• ニコモバ独自の動画フォーマットが必要
→ osec形式を独自開発
- 30. おせち
osec形式?
• パラパラ漫画のようにJPEGを1コマずつ再生して動
画っぽく見せる
• 映像 = JPEG、音声 = ADPCM
• 動画データを1秒 (One-Sec)ごとに分割・パケット化
像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像
音声 音声 音声
1秒分 1秒分 1秒分
- 31. 低画質モード
osec
over http
mp4/flv mp4/flv
ニコモバ ニコ動
配信サーバー 動画ストレージ
osec形式変換
1.動画デコード
2.フレーム画像取り出し・縮小・JPEG圧縮
osec
over http 3.音声ADPCM変換
4.パケット化
- 36. 寄り道:1分で分かる動画形式
コンテナ mp4, m4v, flv, 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
- 39. 問題1. 再生可能な動画形式
• iPhoneで再生可能な形式
• 動画コーデック:H.264
• 音声コーデック:mp3/AAC
• ユーザから投稿される動画形式は多種多様 (flv/
mp4/DivX/MPEG1,2/WMV..)
• iPhoneで再生できない可能性がある
投稿された動画はサーバサイドで全てH.264/
AACで再エンコードすることにした
- 40. 問題2:MPMoviePlayerの仕様
• 一回の動画取得で複数回のHTTPリクエスト
(Rangeリクエスト)が発生する
• 動画ストレージのサーバー負荷増大
• Cookieを自由に制御できない
• ニコ動の動画ストレージはCookieによる
認証を行っている
• 認証に失敗して動画が取得できない
※MPMoviePlayer: iOSが提供する動画再生用クラス
- 44. wwwwwwww キターーーーーー
コメント表示 wwwwww
これはひどいw
• 動画上にコメントを重ねて表示
• コメント=ニコ動のキモ
• PC版より滑らかな表示!
• PC版:一定間隔でコメント表示位置をずらして描画
• iPhone版:CoreAnimation Frameworkを使ってコメン
ト描画をGPUにおまかせ
• デモ
- 47. WebAPIによるサービス間連携
• マイリスト、検索、ランキング
• ニコニコ動画の内部WebAPIを用いて実装
している
• ニコニコ動画に関連するサービス間の連携
は基本WebAPI
• →疎結合な設計
- 48. WebAPIによるサービス間連携
ニコニコ動画
共通認証API
ニコニコ動画
API
ニコニコiPhone
APIサーバー
ニコニコ
チャンネルAPI
ニコモバ
API
- 51. 主な機能
• 視聴機能
• 低画質モード
• 高画質モード プレミアム会員
+WiFi接続時のみ
• 放送機能
• iPhoneから生放送を配信 プレミアム会員
のみ
- 52. 主な機能
• 視聴機能
• 低画質モード
• 高画質モード
• 放送機能
• iPhoneから生放送を配信
- 54. 視聴機能:低画質モード
ocec
over HTTP
Flash Media
Server
ニコモバ生 RTMP ニコ生 RTMP
配信サーバー 配信サーバー
RTMP→osec変換
ocec
over HTTP
- 55. RTMP
(Real Time Messaging Protocol)
• 動画・音声のライブストリーミングのための
プロトコル
• Adobeが仕様を策定
• Flashプレイヤー等で採用されている
• ニコ生(PC)は全面的にRTMPを採用
• iPhone・ガラケーはRTMPの直接再生は不可
- 56. 主な機能
• 視聴機能
• 低画質モード
• 高画質モード
• 放送機能
• iPhoneから生放送を配信
- 57. 視聴機能:高画質モード
• H.264で配信されている生放送を直接
iPhoneで視聴するモード
• PCと同等の画質で生放送を視聴できる
• 放送元で明示的にH.264で配信する必要がある(デフォルトのコー
デックはVP6)。
• ニコ動アプリの高画質モードではすべての動画を再変換しH.264化し
ていたが、生放送ではコストが掛り過ぎるため、現在はH.264のみ対
応。
- 58. 視聴機能:高画質モード
Flash Media
Server
HLS Wowza RTMP ニコ生 RTMP
Media
配信サーバー
Server
RTMP→HLS変換
- 60. Wowza Media Server
• Wowza Media Systems社が開発する商用
のストリーミングサーバー製品
• Flash Media Serverのクローン
• RTMP → HLS変換機能
- 61. 主な機能
• 視聴機能
• 低画質モード
• 高画質モード
• 放送機能
• iPhoneから生放送を配信
- 65. 放送機能の仕組み
ニコ生(PC版)では...
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
RTMP ニコ生
配信サーバー
Webカメラの
PC RTMP
映像をキャプチャ
- 66. iPhone版プロトタイプ1
クライアントサイド圧縮方式
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
RTMP ニコ生
配信サーバー
iPhoneカメラの
iPhone RTMP
映像をキャプチャ
- 67. iPhone版プロトタイプ2
サーバーサイド圧縮方式
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
HTTP RTMP ニコ生
配信サーバー
iPhoneカメラの
iPhone 中継サーバー RTMP
映像をキャプチャ
- 68. 2方式の比較
• クライアントサイド圧縮方式
• 長所:中継サーバーが不要
• 短所:iPhone内で圧縮するのでCPU負荷高
• サーバーサイド圧縮方式
• 長所:iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低
• 短所:中継サーバーが必要
- 69. サーバーサイド圧縮方式を採用
• クライアントサイド圧縮方式
iPhone3GSやiPod Touchなど
• 長所:中継サーバーが不要
CPU性能の低い端末でも
使えるようにしたい!
• 短所:iPhone内で圧縮するのでCPU負荷高
• サーバーサイド圧縮方式
• 長所:iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低
• 短所:中継サーバーが必要
- 71. 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
- 72. Appleの規約(抜粋)
• 3G回線環境下で、10分以上または5分で5MBを
超える動画をストリーミング再生する場合
は、HTTP Live Streamingを使用しなければなら
ない。その場合には最低64kbpsの音声のみス
トリームを必ず含める必要がある。
- 73. アップルの規約が与える影響
• 3G回線環境下で、10分以上または5分で5MBを
超える動画をストリーミング再生する場合
は、HTTP Live Streamingを使用しなければなら
ない。その場合には最低64kbpsの音声のみス
トリームを必ず含める必要がある。
3G回線環境下では事実上HLS対応が必須
WiFi通信時はHLSでなくてもよい
- 77. HTTP Live Streaming 詳細
• HTTPだけで擬似的にライブストリーミング
を実現するプロトコル
• Appleが仕様を策定
• IETFのインターネットドラフトとして提出
• iPhone,QuickTimeなどで採用
• Adobe FMSがHLSをサポートする予定(!)
- 78. HTTP Live Streaming の仕組み
HTTPサーバー (Apacheなど)
#EXTM3U プレイリスト(m3u8)
#EXT-X-TARGETDURATION:10 を生成
#EXTINF:10, sample_0001.ts
#EXTINF:10, sample_0002.ts
#EXTINF:10, sample_0003.ts
H.264
動画ファイル
sample_0001.ts
動画ファイルを
プレイリストどおりに sample_0002.ts
10秒ごとに分割
連続再生
sample_0003.ts
- 79. HTTP Live Streaming の仕組み
HTTPサーバー (Apacheなど)
#EXTM3U プレイリスト(m3u8)
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE: 0 が動的に更新される
#EXTINF:10, sample_0001.ts
#EXTINF:10, sample_0002.ts
#EXTINF:10, sample_0003.ts
sample_0001.ts
映像データを
プレイリストどおりに sample_0002.ts
10秒ごとに分割
連続再生
sample_0003.ts
- 81. HLSの特徴
• 動画データはHTTPで転送
• Apacheのような普通のwebサーバーだけ
で動画ストリーミングが実現できる。
Adobe FMSなどの高価なサーバーは不要
• HTTPなので多くの環境で使用できる
(HTTP以外の通信をブロックしている
環境も多い)
- 82. HLSの特徴
• 帯域幅に応じた画質自動切り替え
• 帯域が細くても快適に動画を視聴できる
通信状況が sample_0001.ts
sample_0002.ts 高画質動画
良い時 sample_0003.ts
帯域幅に応じて自動切換え
通信状況が
sample_0001.ts
sample_0002.ts 低画質動画
悪い時 sample_0003.ts
- 89. 審査コストの低減
• 画面レイアウトを少し変更するだけで審査が必要
なのでコストがかかる
• アプリの売り上げの30%をアップルに取られる。
グーグルも追従の流れ
• アプリは色々つらい!
• WebでできることはWebへ
• HTML5 !
- 92. アプリUIのweb化
• 動画再生処理以外をweb(HTML/CSS/JS)で開発
• iPhoneアプリ組み込みのUIWebViewで表示
• 動画再生ボタンを押したらアプリネイティ
ブの機能を呼び出して動画再生
- 95. アプリUIのweb化
<a href=”nicovideo://play/sm9”>
[UIWebView stringByEvaluatingJavaScriptFromString:
@"videoList.show();"];
- 97. まとめ
• ニコ動 / ニコ生iPhoneアプリを支える技術について紹介
• 動画や音楽などメディアコンテンツを扱うアプリを開
発する場合は、アップルの規約に注意する必要がある
• iPhoneアプリの審査コストを回避するには部分的にweb
化するのが有効
• ニコニコ動画でもスマートフォンの重要性は確実に高
まってきている
- 99. ドワンゴエンジニア募集中
• ドワンゴでは以下のようなエンジニアを募集
しています
• ニコニコ動画の開発に関わりたい!
• スマートフォンアプリ開発に興味がある!
• 大規模webアプリケーションを開発したい!
• などなど
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- &#x30AD;&#x30E3;&#x30EA;&#x30A2;&#x306B;&#x512A;&#x3057;&#x3044;&#x30A2;&#x30C3;&#x30D7;&#x30EB;\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n