古い資料

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

2. 自己紹介
• 松前健太郎 (id: kenmaz)
• ドワンゴ ニコニコ事業本部 企画開発部
ニコニコiPhone 開発リーダー
• 2010/06 中途入社
• 前職は大手メーカー系SIerで研究開発

3. こんな人向けに話します
• 動画・音声などマルチメディアコンテン
ツを扱うiPhoneアプリを開発しようと考
えている人
• PC向けのwebサービスをiPhone/スマート
フォン向けに提供しようと考えている人
• ニコ動の裏側が気になる人

4. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

5. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

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

8. 最大の特徴：コメント

9. • みんなでわいわいコメントしながら動
画を見て楽しむ
• “非同期型コミニュケーション”

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

11. 動画再生処理
わろた
WWWW
これはひどい
キターーーーーーーーー
カオスｗｗｗ
wwwwwww ぱねぇ
作者はネ申

12. 動画再生処理
わろた
WWWW
これはひどい
キターーーーーーーーー
カオスｗｗｗ
wwwwwww ぱねぇ
作者はネ申

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

15. 公式生放送
• 運営が番組制作・配信する生放送
• お笑い、音楽、アニメ、ゲーム、政治、討論、報道、
etc...
• 毎月400∼500番組放送している

16. ユーザ生放送
• 一般のユーザが生放送を配信
• 放送する人＝「生主」
• 毎日数万番組が放送されている

17. もちろんコメントも
• ニコ動と同じく、コメントによるコ
ミニュケーションが可能
• ニコ生は同期型コミニュケーション
（ニコ動は非同期型）

18. ビジネスモデル
• プレミアム会員収入
• 月額525円
• 先日プレミアム会員120万人突破
• 有料番組・有料生放送
• 広告
• etc..

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

20. ニコニコ動画 と iPhone
• あらゆるデバイスでニコ動を楽しめるよう
にしたい
• iPhoneでもニコ動を見たい！
• ニコ動、ニコ生ともに、動画再生には
Flashを使っている
• →iPhoneではニコ動を視聴できない！

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

22. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

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

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

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

28. 低画質モード
• ニコニコ動画モバイルの動画配信シス
テムを使って動画を再生するモード
• 動画データはosec形式

29. おせち
osec形式？
• ガラケーの動画再生処理にはいろいろ制限がある
• ガラケーでもFlashは再生できるが動画の上にコ
メントを重ねて描画できない
• データ通信量が制限されている
• ニコモバ独自の動画フォーマットが必要
→ osec形式を独自開発

30. おせち
osec形式？
• パラパラ漫画のようにJPEGを１コマずつ再生して動
画っぽく見せる
• 映像 = JPEG、音声 = ADPCM
• 動画データを１秒 (One-Sec)ごとに分割・パケット化
像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像
音声 音声 音声
１秒分 １秒分 １秒分

31. 低画質モード
osec
over http
mp4/flv mp4/flv
ニコモバ ニコ動
配信サーバー 動画ストレージ
osec形式変換
1.動画デコード
2.フレーム画像取り出し・縮小・JPEG圧縮
osec
over http 3.音声ADPCM変換
4.パケット化

32. 低画質モード
• ニコモバのインフラを流用すること
で、低コストでiPhoneに対応できた...
• しかし動画としての品質は△
• モーションJPEGではやはりつらい

33. 高画質モード
• mp4/H.264/AACの動画をそのままiPhone
で再生するモード
• ニコ動の動画ストレージから動画を直
接取得・再生
• PCと同等の画質で動画を楽しめる

34. 高画質モード
• mp4/H.264/AACの動画をそのままiPhone
で再生するモード
• ニコ動の動画ストレージから動画を直接
取得・再生
• PCと同等の画質で動画を楽しめる

35. 寄り道：１分で分かる動画形式
• mp4 : コンテナフォーマット
• H.264 : ビデオコーデック
• AAC : オーディオコーデック
mp4
H.264 AAC
ビデオ オーディオ

36. 寄り道：１分で分かる動画形式
コンテナ 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

37. 高画質モード
• mp4/H.264/AACの動画をそのままiPhone
で再生するモード
• ニコ動の動画ストレージから動画を直接
取得・再生
• PCと同等の画質で動画を楽しめる

38. 高画質モード
mp4 ニコ動 mp4/flv
動画ストレージ
いくつかの実装上の問題

39. 問題１. 再生可能な動画形式
• iPhoneで再生可能な形式
• 動画コーデック：H.264
• 音声コーデック：mp3/AAC
• ユーザから投稿される動画形式は多種多様 (flv/
mp4/DivX/MPEG1,2/WMV..)
• iPhoneで再生できない可能性がある
投稿された動画はサーバサイドで全てH.264/
AACで再エンコードすることにした

40. 問題２：MPMoviePlayerの仕様
• 一回の動画取得で複数回のHTTPリクエスト
(Rangeリクエスト)が発生する
• 動画ストレージのサーバー負荷増大
• Cookieを自由に制御できない
• ニコ動の動画ストレージはCookieによる
認証を行っている
• 認証に失敗して動画が取得できない
※MPMoviePlayer: iOSが提供する動画再生用クラス

41. 問題２：MPMoviePlayerの仕様
アプリ内部にローカルプロキシを実装
ニコ動
MPMoviePlayer ローカルプロキシ 動画ストレージ
動画取得
動画取得
動画取得 認証
動画データ返信
動画取得
動画取得

42. 高画質モード
• ニコニコ動画はH.264を積極的にサポート
• ニコニコiPhoneも今後は高画質モードを
中心とする
• 低画質モード（osec形式）は徐々に廃止
していく予定

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

44. wwwwwwww キターーーーーー
コメント表示 wwwwww
これはひどいw
• 動画上にコメントを重ねて表示
• コメント＝ニコ動のキモ
• PC版より滑らかな表示！
• PC版：一定間隔でコメント表示位置をずらして描画
• iPhone版：CoreAnimation Frameworkを使ってコメン
ト描画をGPUにおまかせ
• デモ

45. 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

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

47. WebAPIによるサービス間連携
• マイリスト、検索、ランキング
• ニコニコ動画の内部WebAPIを用いて実装
している
• ニコニコ動画に関連するサービス間の連携
は基本WebAPI
• →疎結合な設計

48. WebAPIによるサービス間連携
ニコニコ動画
共通認証API
ニコニコ動画
API
ニコニコiPhone
APIサーバー
ニコニコ
チャンネルAPI
ニコモバ
API

49. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

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

51. 主な機能
• 視聴機能
• 低画質モード
• 高画質モード プレミアム会員
+WiFi接続時のみ
• 放送機能
• iPhoneから生放送を配信 プレミアム会員
のみ

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

53. 視聴機能：低画質モード
• ニコモバのインフラを使って生放送を
視聴する機能
• 動画アプリと同様osec形式
• 映像品質はあまり良くない

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変換

59. HLS
(HTTP Live Streaming)
• HTTPだけで擬似的にライブストリーミ
ングを実現するプロトコル
• iPhoneでは動画ライブストリーミングに
HLSの使用を推奨している

60. Wowza Media Server
• Wowza Media Systems社が開発する商用
のストリーミングサーバー製品
• Flash Media Serverのクローン
• RTMP → HLS変換機能

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

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

64. 放送機能
• どうやって実装するか？

65. 放送機能の仕組み
ニコ生(PC版)では...
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
RTMP ニコ生
配信サーバー
Webカメラの
PC RTMP
映像をキャプチャ

66. iPhone版プロトタイプ１
クライアントサイド圧縮方式
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
RTMP ニコ生
配信サーバー
iPhoneカメラの
iPhone RTMP
映像をキャプチャ

67. iPhone版プロトタイプ２
サーバーサイド圧縮方式
動画圧縮
(エンコード)
Flash Media
フレーム画像 動画データ Server
HTTP RTMP ニコ生
配信サーバー
iPhoneカメラの
iPhone 中継サーバー RTMP
映像をキャプチャ

68. ２方式の比較
• クライアントサイド圧縮方式
• 長所：中継サーバーが不要
• 短所：iPhone内で圧縮するのでCPU負荷高
• サーバーサイド圧縮方式
• 長所：iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低
• 短所：中継サーバーが必要

69. サーバーサイド圧縮方式を採用
• クライアントサイド圧縮方式
iPhone3GSやiPod Touchなど
• 長所：中継サーバーが不要
CPU性能の低い端末でも
使えるようにしたい！
• 短所：iPhone内で圧縮するのでCPU負荷高
• サーバーサイド圧縮方式
• 長所：iPhoneはカメラ映像をキャプチャし送信
するだけなのでCPU負荷低
• 短所：中継サーバーが必要

70. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

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でなくてもよい

74. アップルの規約が与える影響
HLSに対応する際は、64kbpsの音声ストリームを
• 3G回線環境下で、10分以上または5分で5MBを
別途生成する必要がある → インフラコスト増
超える動画をストリーミング再生する場合
は、HTTP Live Streamingを使用しなければなら
ない。その場合には最低64kbpsの音声のみス
トリームを必ず含める必要がある。

75. アップルの規約が与える影響
HLSに完全に対応しようとするとコスト高
↓
3G回線では動画再生を一部制限している
今後対応予定

76. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

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

80. HLSの特徴
• 長時間の動画であっても一度の通信で
取得するのは10秒分の動画データだけ
• 帯域を圧迫しない
• インフラや通信キャリアには優しい

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

83. Agenda
1. ニコニコ動画・ニコニコ生放送とは
2. ニコニコ動画 iPhoneアプリ
3. ニコニコ生放送 iPhoneアプリ
4. Appleの規約
5. HTTP Live Streaming詳細
6. 実績と今後

84. 実績

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

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

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

88. 今後

89. 審査コストの低減
• 画面レイアウトを少し変更するだけで審査が必要
なのでコストがかかる
• アプリの売り上げの30%をアップルに取られる。
グーグルも追従の流れ
• アプリは色々つらい！
• WebでできることはWebへ
• HTML5 !

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

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

92. アプリUIのweb化
• 動画再生処理以外をweb(HTML/CSS/JS)で開発
• iPhoneアプリ組み込みのUIWebViewで表示
• 動画再生ボタンを押したらアプリネイティ
ブの機能を呼び出して動画再生

93. アプリUIのweb化

94. アプリUIのweb化
HTML/CSS/JavaScript
で実装

95. アプリUIのweb化
<a href=”nicovideo://play/sm9”>
[UIWebView stringByEvaluatingJavaScriptFromString:
@"videoList.show();"];

96. Android対応
• UIはweb
• 動画再生はFlash

97. まとめ
• ニコ動 / ニコ生iPhoneアプリを支える技術について紹介
• 動画や音楽などメディアコンテンツを扱うアプリを開
発する場合は、アップルの規約に注意する必要がある
• iPhoneアプリの審査コストを回避するには部分的にweb
化するのが有効
• ニコニコ動画でもスマートフォンの重要性は確実に高
まってきている

98. One more thing...

99. ドワンゴエンジニア募集中
• ドワンゴでは以下のようなエンジニアを募集
しています
• ニコニコ動画の開発に関わりたい！
• スマートフォンアプリ開発に興味がある！
• 大規模webアプリケーションを開発したい！
• などなど

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