スマートフォン2011 講演資料
Upcoming SlideShare
Loading in...5
×
 

スマートフォン2011 講演資料

on

  • 2,112 views

古い資料

古い資料

Statistics

Views

Total Views
2,112
Views on SlideShare
2,112
Embed Views
0

Actions

Likes
5
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

スマートフォン2011 講演資料 スマートフォン2011 講演資料 Presentation Transcript

  • ニコニコ動画iPhoneアプリの作り方 dwango 松前健太郎
  • 自己紹介• 松前健太郎 (id: kenmaz)• ドワンゴ ニコニコ事業本部 企画開発部 ニコニコiPhone 開発リーダー• 2010/06 中途入社• 前職は大手メーカー系SIerで研究開発
  • こんな人向けに話します• 動画・音声などマルチメディアコンテン ツを扱うiPhoneアプリを開発しようと考 えている人• PC向けのwebサービスをiPhone/スマート フォン向けに提供しようと考えている人• ニコ動の裏側が気になる人
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • (株)ニワンゴが運営する動画共有サービス
  • 最大の特徴:コメント
  • • みんなでわいわいコメントしながら動 画を見て楽しむ• “非同期型コミニュケーション”
  • 動画再生処理• 動画再生プレイヤーはFlashで開発 • 動画再生レイヤー • コメント描画レイヤー • UIレイヤー
  • 動画再生処理 わろた            WWWW          これはひどいキターーーーーーーーー        カオスwwwwwwwwww           ぱねぇ      作者はネ申
  • 動画再生処理 わろた            WWWW          これはひどいキターーーーーーーーー        カオスwwwwwwwwww           ぱねぇ      作者はネ申
  • (株)ニワンゴが運営する動画ライブストリーミングサービス
  • 公式生放送• 運営が番組制作・配信する生放送• お笑い、音楽、アニメ、ゲーム、政治、討論、報道、 etc...• 毎月400∼500番組放送している
  • ユーザ生放送• 一般のユーザが生放送を配信• 放送する人=「生主」• 毎日数万番組が放送されている
  • もちろんコメントも• ニコ動と同じく、コメントによるコ ミニュケーションが可能• ニコ生は同期型コミニュケーション (ニコ動は非同期型)
  • ビジネスモデル• プレミアム会員収入 • 月額525円 • 先日プレミアム会員120万人突破• 有料番組・有料生放送• 広告• etc..
  • モバイル対応• ニコニコ動画モバイル(ニコモバ) • ドコモ・ソフトバンク・AU • キャリア課金に対応 • プレミアム会員の半数がキャリア課金iPhone/Andoridは・・?
  • ニコニコ動画 と iPhone• あらゆるデバイスでニコ動を楽しめるよう にしたい • iPhoneでもニコ動を見たい! • ニコ動、ニコ生ともに、動画再生には Flashを使っている • →iPhoneではニコ動を視聴できない!
  • ニコニコ動画 と iPhone• ということで専用アプリを開発 • 2009/4 ニコニコ動画iPhoneアプリ • 2010/5 ニコニコ生放送iPhoneアプリ
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • ニコニコ動画iPhoneアプリ
  • 主な機能• 動画再生• コメント表示・投稿• ランキング表示• マイリスト表示・編集• 検索
  • 動画再生• 2種類の再生モードがある • 低画質モード • 高画質モード プレミアム会員 +WiFi接続のみ
  • 低画質モード• ニコニコ動画モバイルの動画配信シス テムを使って動画を再生するモード• 動画データはosec形式
  • おせち osec形式?• ガラケーの動画再生処理にはいろいろ制限がある • ガラケーでもFlashは再生できるが動画の上にコ メントを重ねて描画できない • データ通信量が制限されている• ニコモバ独自の動画フォーマットが必要 → osec形式を独自開発
  • おせち osec形式? • パラパラ漫画のようにJPEGを1コマずつ再生して動 画っぽく見せる • 映像 = JPEG、音声 = ADPCM • 動画データを1秒 (One-Sec)ごとに分割・パケット化像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 画像 音声 音声 音声 1秒分 1秒分 1秒分
  • 低画質モード osecover http mp4/flv mp4/flv ニコモバ ニコ動 配信サーバー 動画ストレージ osec形式変換 1.動画デコード 2.フレーム画像取り出し・縮小・JPEG圧縮 osecover http 3.音声ADPCM変換 4.パケット化
  • 低画質モード• ニコモバのインフラを流用すること で、低コストでiPhoneに対応できた...• しかし動画としての品質は△• モーションJPEGではやはりつらい
  • 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直 接取得・再生• PCと同等の画質で動画を楽しめる
  • 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直接 取得・再生• PCと同等の画質で動画を楽しめる
  • 寄り道:1分で分かる動画形式 • mp4 : コンテナフォーマット • H.264 : ビデオコーデック • AAC : オーディオコーデック mp4 H.264 AAC ビデオ オーディオ
  • 寄り道: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
  • 高画質モード• mp4/H.264/AACの動画をそのままiPhone で再生するモード• ニコ動の動画ストレージから動画を直接 取得・再生• PCと同等の画質で動画を楽しめる
  • 高画質モードmp4 ニコ動 mp4/flv 動画ストレージ いくつかの実装上の問題
  • 問題1. 再生可能な動画形式• iPhoneで再生可能な形式 • 動画コーデック:H.264 • 音声コーデック:mp3/AAC• ユーザから投稿される動画形式は多種多様 (flv/ mp4/DivX/MPEG1,2/WMV..)• iPhoneで再生できない可能性がある 投稿された動画はサーバサイドで全てH.264/ AACで再エンコードすることにした
  • 問題2:MPMoviePlayerの仕様• 一回の動画取得で複数回のHTTPリクエスト (Rangeリクエスト)が発生する • 動画ストレージのサーバー負荷増大• Cookieを自由に制御できない • ニコ動の動画ストレージはCookieによる 認証を行っている • 認証に失敗して動画が取得できない ※MPMoviePlayer: iOSが提供する動画再生用クラス
  • 問題2: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 4秒 120px
  • 主な機能• 動画再生• コメント表示・投稿• ランキング表示• マイリスト表示・編集• 検索
  • WebAPIによるサービス間連携 • マイリスト、検索、ランキング • ニコニコ動画の内部WebAPIを用いて実装 している • ニコニコ動画に関連するサービス間の連携 は基本WebAPI • →疎結合な設計
  • WebAPIによるサービス間連携 ニコニコ動画 共通認証API ニコニコ動画 API ニコニコiPhone APIサーバー ニコニコ チャンネルAPI ニコモバ API
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • ニコニコ生放送iPhoneアプリ
  • 主な機能• 視聴機能 • 低画質モード • 高画質モード プレミアム会員 +WiFi接続時のみ• 放送機能 • iPhoneから生放送を配信 プレミアム会員 のみ
  • 主な機能• 視聴機能 • 低画質モード • 高画質モード• 放送機能 • iPhoneから生放送を配信
  • 視聴機能:低画質モード• ニコモバのインフラを使って生放送を 視聴する機能• 動画アプリと同様osec形式• 映像品質はあまり良くない
  • 視聴機能:低画質モード ocecover HTTP Flash Media Server ニコモバ生 RTMP ニコ生 RTMP 配信サーバー 配信サーバー RTMP→osec変換 ocecover HTTP
  • RTMP(Real Time Messaging Protocol) • 動画・音声のライブストリーミングのための プロトコル• Adobeが仕様を策定• Flashプレイヤー等で採用されている• ニコ生(PC)は全面的にRTMPを採用 • iPhone・ガラケーはRTMPの直接再生は不可
  • 主な機能• 視聴機能 • 低画質モード • 高画質モード• 放送機能 • iPhoneから生放送を配信
  • 視聴機能:高画質モード• 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から生放送を配信
  • 放送機能• iPhoneから生放送する機能• PCカメラ iPhoneカメラ切り替え機能• 前面・背面カメラ切り替え
  • 放送機能• どうやって実装するか?
  • 放送機能の仕組み ニコ生(PC版)では... 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server RTMP ニコ生 配信サーバー Webカメラの PC RTMP映像をキャプチャ
  • iPhone版プロトタイプ1 クライアントサイド圧縮方式 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server RTMP ニコ生 配信サーバーiPhoneカメラの iPhone RTMP映像をキャプチャ
  • iPhone版プロトタイプ2 サーバーサイド圧縮方式 動画圧縮 (エンコード) Flash Media フレーム画像 動画データ Server HTTP RTMP ニコ生 配信サーバーiPhoneカメラの iPhone 中継サーバー RTMP映像をキャプチャ
  • 2方式の比較• クライアントサイド圧縮方式 • 長所:中継サーバーが不要 • 短所:iPhone内で圧縮するのでCPU負荷高• サーバーサイド圧縮方式 • 長所:iPhoneはカメラ映像をキャプチャし送信 するだけなのでCPU負荷低 • 短所:中継サーバーが必要
  • サーバーサイド圧縮方式を採用• クライアントサイド圧縮方式 iPhone3GSやiPod Touchなど • 長所:中継サーバーが不要 CPU性能の低い端末でも 使えるようにしたい! • 短所:iPhone内で圧縮するのでCPU負荷高• サーバーサイド圧縮方式 • 長所:iPhoneはカメラ映像をキャプチャし送信 するだけなのでCPU負荷低 • 短所:中継サーバーが必要
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • 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回線環境下で、10分以上または5分で5MBを 超える動画をストリーミング再生する場合 は、HTTP Live Streamingを使用しなければなら ない。その場合には最低64kbpsの音声のみス トリームを必ず含める必要がある。 3G回線環境下では事実上HLS対応が必須 WiFi通信時はHLSでなくてもよい
  • アップルの規約が与える影響 HLSに対応する際は、64kbpsの音声ストリームを• 3G回線環境下で、10分以上または5分で5MBを 別途生成する必要がある → インフラコスト増 超える動画をストリーミング再生する場合 は、HTTP Live Streamingを使用しなければなら ない。その場合には最低64kbpsの音声のみス トリームを必ず含める必要がある。
  • アップルの規約が与える影響HLSに完全に対応しようとするとコスト高 ↓3G回線では動画再生を一部制限している 今後対応予定
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • 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 #EXTINF:10, sample_0002.ts #EXTINF:10, sample_0003.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 が動的に更新される #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
  • 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
  • Agenda1. ニコニコ動画・ニコニコ生放送とは2. ニコニコ動画 iPhoneアプリ3. ニコニコ生放送 iPhoneアプリ4. Appleの規約5. HTTP Live Streaming詳細6. 実績と今後
  • 実績
  • アプリ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で表示• 動画再生ボタンを押したらアプリネイティ ブの機能を呼び出して動画再生
  • アプリUIのweb化
  • アプリUIのweb化 HTML/CSS/JavaScript で実装
  • アプリUIのweb化 <a href=”nicovideo://play/sm9”>[UIWebView stringByEvaluatingJavaScriptFromString: @"videoList.show();"];
  • Android対応• UIはweb• 動画再生はFlash
  • まとめ• ニコ動 / ニコ生iPhoneアプリを支える技術について紹介• 動画や音楽などメディアコンテンツを扱うアプリを開 発する場合は、アップルの規約に注意する必要がある• iPhoneアプリの審査コストを回避するには部分的にweb 化するのが有効• ニコニコ動画でもスマートフォンの重要性は確実に高 まってきている
  • One more thing...
  • ドワンゴエンジニア募集中• ドワンゴでは以下のようなエンジニアを募集 しています • ニコニコ動画の開発に関わりたい! • スマートフォンアプリ開発に興味がある! • 大規模webアプリケーションを開発したい! • などなど
  • ご清聴ありがとうございました