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

3,101 views

Published on

古い資料

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,101
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
15
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • \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
  • キャリアに優しいアップル\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
  • ニコニコ動画iPhoneアプリの作り方@スマートフォン2011講演資料

    1. 1. ニコニコ動画iPhoneアプリの作り方 dwango 松前健太郎
    2. 2. 自己紹介• 松前健太郎 (id: kenmaz)• ドワンゴ ニコニコ事業本部 企画開発部 ニコニコiPhone 開発リーダー• 2010/06 中途入社• 前職は大手メーカー系SIerで研究開発
    3. 3. こんな人向けに話します• 動画・音声などマルチメディアコンテン ツを扱うiPhoneアプリを開発しようと考 えている人• PC向けのwebサービスをiPhone/スマート フォン向けに提供しようと考えている人• ニコ動の裏側が気になる人
    4. 4. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    5. 5. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    6. 6. (株)ニワンゴが運営する動画共有サービス
    7. 7. 最大の特徴:コメント
    8. 8. • みんなでわいわいコメントしながら動 画を見て楽しむ• “非同期型コミニュケーション”
    9. 9. 動画再生処理• 動画再生プレイヤーはFlashで開発 • 動画再生レイヤー • コメント描画レイヤー • UIレイヤー
    10. 10. 動画再生処理 わろた            WWWW          これはひどいキターーーーーーーーー        カオスwwwwwwwwww           ぱねぇ      作者はネ申
    11. 11. 動画再生処理 わろた            WWWW          これはひどいキターーーーーーーーー        カオスwwwwwwwwww           ぱねぇ      作者はネ申
    12. 12. (株)ニワンゴが運営する動画ライブストリーミングサービス
    13. 13. 公式生放送• 運営が番組制作・配信する生放送• お笑い、音楽、アニメ、ゲーム、政治、討論、報道、 etc...• 毎月400∼500番組放送している
    14. 14. ユーザ生放送• 一般のユーザが生放送を配信• 放送する人=「生主」• 毎日数万番組が放送されている
    15. 15. もちろんコメントも• ニコ動と同じく、コメントによるコ ミニュケーションが可能• ニコ生は同期型コミニュケーション (ニコ動は非同期型)
    16. 16. ビジネスモデル• プレミアム会員収入 • 月額525円 • 先日プレミアム会員120万人突破• 有料番組・有料生放送• 広告• etc..
    17. 17. モバイル対応• ニコニコ動画モバイル(ニコモバ) • ドコモ・ソフトバンク・AU • キャリア課金に対応 • プレミアム会員の半数がキャリア課金iPhone/Andoridは・・?
    18. 18. ニコニコ動画 と iPhone• あらゆるデバイスでニコ動を楽しめるよう にしたい • iPhoneでもニコ動を見たい! • ニコ動、ニコ生ともに、動画再生には Flashを使っている • →iPhoneではニコ動を視聴できない!
    19. 19. ニコニコ動画 と iPhone• ということで専用アプリを開発 • 2009/4 ニコニコ動画iPhoneアプリ • 2010/5 ニコニコ生放送iPhoneアプリ
    20. 20. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    21. 21. ニコニコ動画iPhoneアプリ
    22. 22. 主な機能• 動画再生• コメント表示・投稿• ランキング表示• マイリスト表示・編集• 検索
    23. 23. 動画再生• 2種類の再生モードがある • 低画質モード • 高画質モード プレミアム会員 +WiFi接続のみ
    24. 24. 低画質モード• ニコニコ動画モバイルの動画配信シス テムを使って動画を再生するモード• 動画データはosec形式
    25. 25. おせち osec形式?• ガラケーの動画再生処理にはいろいろ制限がある • ガラケーでもFlashは再生できるが動画の上にコ メントを重ねて描画できない • データ通信量が制限されている• ニコモバ独自の動画フォーマットが必要 → osec形式を独自開発
    26. 26. おせち osec形式? • パラパラ漫画のようにJPEGを1コマずつ再生して動 画っぽく見せる • 映像 = JPEG、音声 = ADPCM • 動画データを1秒 (One-Sec)ごとに分割・パケット化像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 音声 音声 音声 1秒分 1秒分 1秒分
    27. 27. 低画質モード osecover http mp4/flv mp4/flv ニコモバ ニコ動 配信サーバー 動画ストレージ osec形式変換 1.動画デコード 2.フレーム画像取り出し・縮小・JPEG圧縮 osecover http 3.音声ADPCM変換 4.パケット化
    28. 28. 低画質モード• ニコモバのインフラを流用すること で、低コストでiPhoneに対応できた...• しかし動画としての品質は△• モーションJPEGではやはりつらい
    29. 29. 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直 接取得・再生• PCと同等の画質で動画を楽しめる
    30. 30. 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直接 取得・再生• PCと同等の画質で動画を楽しめる
    31. 31. 寄り道:1分で分かる動画形式 • mp4 : コンテナフォーマット • H.264 : ビデオコーデック • AAC : オーディオコーデック mp4 H.264 AAC ビデオ オーディオ
    32. 32. 寄り道: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
    33. 33. 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直接 取得・再生• PCと同等の画質で動画を楽しめる
    34. 34. 高画質モードmp4 ニコ動 mp4/flv 動画ストレージ いくつかの実装上の問題
    35. 35. 問題1. 再生可能な動画形式• iPhoneで再生可能な形式 • 動画コーデック:H.264 • 音声コーデック:mp3/AAC• ユーザから投稿される動画形式は多種多様 (flv/ mp4/DivX/MPEG1,2/WMV..)• iPhoneで再生できない可能性がある 投稿された動画はサーバサイドで全てH.264/ AACで再エンコードすることにした
    36. 36. 問題2:MPMoviePlayerの仕様• 一回の動画取得で複数回のHTTPリクエスト (Rangeリクエスト)が発生する • 動画ストレージのサーバー負荷増大• Cookieを自由に制御できない • ニコ動の動画ストレージはCookieによる 認証を行っている • 認証に失敗して動画が取得できない ※MPMoviePlayer: iOSが提供する動画再生用クラス
    37. 37. 問題2:MPMoviePlayerの仕様 アプリ内部にローカルプロキシを実装 ニコ動 MPMoviePlayer ローカルプロキシ 動画ストレージ 動画取得 動画取得 動画取得 認証 動画データ返信 動画取得 動画取得
    38. 38. 高画質モード• ニコニコ動画はH.264を積極的にサポート• ニコニコiPhoneも今後は高画質モードを 中心とする• 低画質モード(osec形式)は徐々に廃止 していく予定
    39. 39. 主な機能• 動画再生• コメント表示・投稿• ランキング表示• マイリスト表示・編集• 検索
    40. 40. wwwwwwww キターーーーーー コメント表示 wwwwww これはひどいw • 動画上にコメントを重ねて表示 • コメント=ニコ動のキモ • PC版より滑らかな表示! • PC版:一定間隔でコメント表示位置をずらして描画 • iPhone版:CoreAnimation Frameworkを使ってコメン ト描画をGPUにおまかせ • デモ
    41. 41. 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 4秒 120px
    42. 42. 主な機能• 動画再生• コメント表示・投稿• ランキング表示• マイリスト表示・編集• 検索
    43. 43. WebAPIによるサービス間連携 • マイリスト、検索、ランキング • ニコニコ動画の内部WebAPIを用いて実装 している • ニコニコ動画に関連するサービス間の連携 は基本WebAPI • →疎結合な設計
    44. 44. WebAPIによるサービス間連携 ニコニコ動画 共通認証API ニコニコ動画 API ニコニコiPhone APIサーバー ニコニコ チャンネルAPI ニコモバ API
    45. 45. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    46. 46. ニコニコ生放送iPhoneアプリ
    47. 47. 主な機能• 視聴機能 • 低画質モード • 高画質モード プレミアム会員 +WiFi接続時のみ• 放送機能 • iPhoneから生放送を配信 プレミアム会員 のみ
    48. 48. 主な機能• 視聴機能 • 低画質モード • 高画質モード• 放送機能 • iPhoneから生放送を配信
    49. 49. 視聴機能:低画質モード• ニコモバのインフラを使って生放送を 視聴する機能• 動画アプリと同様osec形式• 映像品質はあまり良くない
    50. 50. 視聴機能:低画質モード ocecover HTTP Flash Media Server ニコモバ生 RTMP ニコ生 RTMP 配信サーバー 配信サーバー RTMP→osec変換 ocecover HTTP
    51. 51. RTMP(Real Time Messaging Protocol) • 動画・音声のライブストリーミングのための プロトコル• Adobeが仕様を策定• Flashプレイヤー等で採用されている• ニコ生(PC)は全面的にRTMPを採用 • iPhone・ガラケーはRTMPの直接再生は不可
    52. 52. 主な機能• 視聴機能 • 低画質モード • 高画質モード• 放送機能 • iPhoneから生放送を配信
    53. 53. 視聴機能:高画質モード• H.264で配信されている生放送を直接 iPhoneで視聴するモード• PCと同等の画質で生放送を視聴できる • 放送元で明示的にH.264で配信する必要がある(デフォルトのコー デックはVP6)。 • ニコ動アプリの高画質モードではすべての動画を再変換しH.264化し ていたが、生放送ではコストが掛り過ぎるため、現在はH.264のみ対 応。
    54. 54. 視聴機能:高画質モード Flash Media Server HLS Wowza RTMP ニコ生 RTMP Media 配信サーバー Server RTMP→HLS変換
    55. 55. HLS(HTTP Live Streaming)• HTTPだけで擬似的にライブストリーミ ングを実現するプロトコル• iPhoneでは動画ライブストリーミングに HLSの使用を推奨している
    56. 56. Wowza Media Server• Wowza Media Systems社が開発する商用 のストリーミングサーバー製品• Flash Media Serverのクローン• RTMP → HLS変換機能
    57. 57. 主な機能• 視聴機能 • 低画質モード • 高画質モード• 放送機能 • iPhoneから生放送を配信
    58. 58. 放送機能• iPhoneから生放送する機能• PCカメラ iPhoneカメラ切り替え機能• 前面・背面カメラ切り替え
    59. 59. 放送機能• どうやって実装するか?
    60. 60. 放送機能の仕組み ニコ生(PC版)では... 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server RTMP ニコ生 配信サーバー Webカメラの PC RTMP映像をキャプチャ
    61. 61. iPhone版プロトタイプ1 クライアントサイド圧縮方式 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server RTMP ニコ生 配信サーバーiPhoneカメラの iPhone RTMP映像をキャプチャ
    62. 62. iPhone版プロトタイプ2 サーバーサイド圧縮方式 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server HTTP RTMP ニコ生 配信サーバーiPhoneカメラの iPhone 中継サーバー RTMP映像をキャプチャ
    63. 63. 2方式の比較• クライアントサイド圧縮方式 • 長所:中継サーバーが不要 • 短所:iPhone内で圧縮するのでCPU負荷高• サーバーサイド圧縮方式 • 長所:iPhoneはカメラ映像をキャプチャし送信 するだけなのでCPU負荷低 • 短所:中継サーバーが必要
    64. 64. サーバーサイド圧縮方式を採用• クライアントサイド圧縮方式 iPhone3GSやiPod Touchなど • 長所:中継サーバーが不要 CPU性能の低い端末でも 使えるようにしたい! • 短所:iPhone内で圧縮するのでCPU負荷高• サーバーサイド圧縮方式 • 長所:iPhoneはカメラ映像をキャプチャし送信 するだけなのでCPU負荷低 • 短所:中継サーバーが必要
    65. 65. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    66. 66. 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
    67. 67. Appleの規約(抜粋)• 3G回線環境下で、10分以上または5分で5MBを 超える動画をストリーミング再生する場合 は、HTTP Live Streamingを使用しなければなら ない。その場合には最低64kbpsの音声のみス トリームを必ず含める必要がある。
    68. 68. アップルの規約が与える影響• 3G回線環境下で、10分以上または5分で5MBを 超える動画をストリーミング再生する場合 は、HTTP Live Streamingを使用しなければなら ない。その場合には最低64kbpsの音声のみス トリームを必ず含める必要がある。 3G回線環境下では事実上HLS対応が必須 WiFi通信時はHLSでなくてもよい
    69. 69. アップルの規約が与える影響 HLSに対応する際は、64kbpsの音声ストリームを• 3G回線環境下で、10分以上または5分で5MBを 別途生成する必要がある → インフラコスト増 超える動画をストリーミング再生する場合 は、HTTP Live Streamingを使用しなければなら ない。その場合には最低64kbpsの音声のみス トリームを必ず含める必要がある。
    70. 70. アップルの規約が与える影響HLSに完全に対応しようとするとコスト高 ↓3G回線では動画再生を一部制限している 今後対応予定
    71. 71. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    72. 72. HTTP Live Streaming 詳細• HTTPだけで擬似的にライブストリーミング を実現するプロトコル• Appleが仕様を策定• IETFのインターネットドラフトとして提出• iPhone,QuickTimeなどで採用• Adobe FMSがHLSをサポートする予定(!)
    73. 73. 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
    74. 74. 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
    75. 75. HLSの特徴• 長時間の動画であっても一度の通信で 取得するのは10秒分の動画データだけ • 帯域を圧迫しない • インフラや通信キャリアには優しい
    76. 76. HLSの特徴• 動画データはHTTPで転送 • Apacheのような普通のwebサーバーだけ で動画ストリーミングが実現できる。 Adobe FMSなどの高価なサーバーは不要 • HTTPなので多くの環境で使用できる (HTTP以外の通信をブロックしている 環境も多い)
    77. 77. HLSの特徴• 帯域幅に応じた画質自動切り替え • 帯域が細くても快適に動画を視聴できる 通信状況が sample_0001.ts sample_0002.ts 高画質動画 良い時 sample_0003.ts 帯域幅に応じて自動切換え 通信状況が sample_0001.ts sample_0002.ts 低画質動画 悪い時 sample_0003.ts
    78. 78. Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
    79. 79. 実績
    80. 80. アプリDL数• 累計100万DL以上
    81. 81. ユニークユーザ数• 4~5万UU/day 震災時NHK サイマル放送
    82. 82. iPhoneから生放送配信• 600番組/day
    83. 83. 今後
    84. 84. 審査コストの低減• 画面レイアウトを少し変更するだけで審査が必要 なのでコストがかかる• アプリの売り上げの30%をアップルに取られる。 グーグルも追従の流れ • アプリは色々つらい! • WebでできることはWebへ • HTML5 !
    85. 85. HTML5対応• HTML5のvideoタグによる動画再生 • Safariだけでニコ動を視聴できる • iPadでは対応済み • アプリが不要! • 審査も不要!
    86. 86. HTML5対応• ただしiPhoneでは • Safariの仕様により動画の上にコメン トを重ねることが不可能なため、現 状では実現不可能 • そこで・・・
    87. 87. アプリUIのweb化• 動画再生処理以外をweb(HTML/CSS/JS)で開発• iPhoneアプリ組み込みのUIWebViewで表示• 動画再生ボタンを押したらアプリネイティ ブの機能を呼び出して動画再生
    88. 88. アプリUIのweb化
    89. 89. アプリUIのweb化 HTML/CSS/JavaScript で実装
    90. 90. アプリUIのweb化 <a href=”nicovideo://play/sm9”>[UIWebView stringByEvaluatingJavaScriptFromString: @"videoList.show();"];
    91. 91. Android対応• UIはweb• 動画再生はFlash
    92. 92. まとめ• ニコ動 / ニコ生iPhoneアプリを支える技術について紹介• 動画や音楽などメディアコンテンツを扱うアプリを開 発する場合は、アップルの規約に注意する必要がある• iPhoneアプリの審査コストを回避するには部分的にweb 化するのが有効• ニコニコ動画でもスマートフォンの重要性は確実に高 まってきている
    93. 93. One more thing...
    94. 94. ドワンゴエンジニア募集中• ドワンゴでは以下のようなエンジニアを募集 しています • ニコニコ動画の開発に関わりたい! • スマートフォンアプリ開発に興味がある! • 大規模webアプリケーションを開発したい! • などなど
    95. 95. ご清聴ありがとうございました

    ×