ニコニコ超開発
•
22 recomendaciones•5,170 vistas
1. ニコニコのコメントサーバー 2. ニコニコ動画 for Windows 8 2012/04/29 プロ生勉強会＠ニコニコ超会議 発表時のニコ生タイムシフト http://live.nicovideo.jp/watch/lv90334722#12:50 デザイン担当の VoQn のLTの資料はこちら → http://www.slideshare.net/VoQn/metro-12761898
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (16)
Similar a ニコニコ超開発
Similar a ニコニコ超開発 (20)
Último
Último (11)
ニコニコ超開発
- 1. ニコニコ超開発 1. ニコニコのコメントサーバー 2. ニコニコ動画 for Windows 8 戀塚 昭彦 @koizuka ニコニコ事業本部 第三企画開発部 研究開発セクション 2012-4-29プロ生勉強会@超会議 #pronama
- 2. ニコニコ超開発 ⾃自⼰己紹介 • 戀塚 昭彦 (こいづか あきひこ) • ニコニコ動画開発総指揮 • コメントサーバー • @koizuka • http://www.nicovideo.jp/user/2 • 在宅勤務 • Bio_100%
- 3. ニコニコ超開発 Agenda • Part 1 (2割) • ニコニコ動画のコメントサーバー • Part 2 (8割) • ニコニコ動画 for Windows 8
- 5. ニコニコ動画のコメントサーバー コメントサーバーとは • ニコニコのコメントを司るサーバー • 動画、(元)広場、⽣生放送、実況、アプリ、 ニコ⽣生アラート、静画(電⼦子書籍)、 ニコルソン、 • 内製(C++で記述, 32bit/64bit) • HTTP, XMLSocket, (WebSocket)
- 6. ニコニコ動画のコメントサーバー 使われ⽅方 動画 アラート 生放送 同期 非同期
- 9. ニコニコ動画のコメントサーバー メッセージの属性: vpos • コメントを付けた対象を限定する情報 • 動画の場合、動画の再⽣生時間 • 電⼦子書籍の場合、ページなど
- 10. ニコニコ動画のコメントサーバー コメントの取得(http) • http://msg.nicovideo.jp/10/api/thread? version=20061206&thread=1173108780&r es_from=-10 • version: 20061206 または 20090904 • thread: スレッドID(上記は陰陽師) • res_from: 取得コメント範囲を指定
- 12. Part 2 を 2週間で開発してみた
- 13. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) Windows 8編 • 2012年4⽉月2⽇日(⽉月) coji「Windows8向けのニコニコ動画を 」 coji「今週中に作って欲しい」 coji「そしたらWindows Developer Daysの キーノート※で紹介してくれそう」 ※4⽉月25⽇日 • えっ
- 14. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/5 技術調査(1) • 環境準備 • Windows 8 Consumer Preview • Visual Studio 11 Express Beta • msdnのサイトからサンプルをダウンロード • 動作実験と開発⼿手法を検討
- 15. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/5 技術調査(2) • 技術要素を決める • ⾔言語: C++/CX • 動画: MediaEngine • コメント描画: DirectX • UI記述: XAML • 実験
- 16. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/6(⾦金金) キックオフ • デザイナー @VoQn • 4/20(⾦金金)に動いてること。25(⽔水)が本番 • キックオフ3時間後，MS から 「4/10(⽕火)までに アプリのスクリーンショット送って」
- 17. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) ロードマップ April 2012 6 7 デザインラフ デザイン修正 8 9 10 11 12 13 14 実装組み込み 15 16 17 18 19 20 21 検証・仕上げ 22 23 24 25 26 27 28
- 18. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 要求機能 • 動画が再⽣生できる • コメントが流れる • 再⽣生/⼀一時停⽌止/シークバー/先頭から再⽣生 • コメントが投稿できる ※ただし通信せずローカル動作
- 19. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/10 ラフデザイン • デザイナー(VoQn) • Windows8 の既存アプリを参考に • GUI洗い出し • デモに含まれない部分も含めて検討 • 4/10に提出、レビュー
- 20. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/14 本番デザイン • デザイナー(VoQn) • レビューの指摘を反映 • 数種類デザイン案を検討 • 実際に動く形にしてゆく • パーツ素材を全状態で⽤用意 • 4/12(⽊木) Microsoftの担当者と打ち合わせ
- 21. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) アプリのイメージ(1)
- 22. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) アプリのイメージ(2)
- 23. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) アプリのイメージ(3)
- 24. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) GUI パーツデザイン
- 25. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/14 技術調査 • プログラマー(koizuka) • 4/6 コメントをビットマップにキャッシュして動画の上を流してみた • 4/8 XAMLデザイン実験 • 4/10 開発検証用アプリパッケージの作り方 • 4/11 MediaEngineを操作できるようになった, XAML <-> DirectX を行き来できるようにした, コメント複数 • 4/12 動画選択を実装, タブレット実機で落ちるのに悩む, リモートデバ ッグを開始, ビットマップを作ると MediaEngine-> TransferVideoFrame すると駄目だと分かる, Win8のジェスチャを覚えるｗ • 4/14 Direct2D, Direct3D, DXGI, DirectDrawのインターフェイス関係 見直し • 4/16 XAML Data Bindを活用, JSONファイル読み込み
- 26. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/20 実装組み込み • デザイナー(VoQn) + プログラマー(koizuka) • 4/17 デザイン統合開始, 再⽣生画⾯面から • 4/18 起動画⾯面組み込み • 4/19 別スレッドにイベントを送る⽅方法がやっ と分かった/アプリアイコン統合 • 4/20 シークバー実装
- 27. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 実機で試してみると・・ • 使いにくい！ • 画⾯面の下端操作でツールが出てくる • 画⾯面真ん中タップでコメント欄が出てくる • すごい煩雑 • キーボード出すと動画領域が狭い！ →デザインを考え直すことになった
- 28. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/21 再デザイン • 新デザイン • 操作部を⼀一つに統合 • 細部改善(シーク操作, コメントしたとき, ...) • リハーサル⽤用に提出！
- 29. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) プレーヤー新デザイン
- 30. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) デモ動画は ＠まさたかP 【MV】Through the Window/まさたかP ELECTROCUTICA【Microsoft MMD】
- 31. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) 4/25 仕上げ • リハーサルでOKが出た! • 届いた最終版の動画、サムネイルを統合 • 提出 • 4/25(⽔水) • Microsoft Windows Developer Days 2⽇日⽬目 • デモ実施
- 32. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) アプリデモ やれる範囲でデモしてみます
- 33. ニコニコ動画 for Windows 8 - NicoNicoMetro (仮) おわり 引き続き NicoNicoMetro (仮) 鋭意開発中 続報お楽しみに!! ご清聴ありがとうございました
Notas del editor
- パート 1 。まずはじめに、ニコニコ動画のコメントサーバーというものをちょろっと紹介します。
- コメントサーバーは、文字通りですが、ニコニコの各種サービスのコメント部分を担当しているサーバーです。 利用しているサービスは、動画にはじまって、今でも時報や地震のときにコメントを共有している ( 元 ) 広場、 ニコニコ生放送、ニコニコ実況、ニコニコアプリ、ニコ生アラート、電子書籍の静画、ほかにもニコルソンという関連サービスなんかでも使っています。 (click) このサーバーはすべてオリジナルで、 C++ で記述しています。 32bit から始まり、現在は 64bit になってます。 すべてのサービスで使っているサーバーは同一のコードベースです。ちなみにソースは公開していません。 (click) 対応プロトコルは HTTP, XMLSocket, それに WebSocket も対応準備してます。
- コメントサーバーは、サービスによって大きく二種類の使われ方があります。 一つ目ですが、「同期」。リアルタイムですね。コメントをしたら即座に同じ対象を見ている人達に共有されるものです。 二つ目、「非同期」。これは、過去にされたコメントを、同じ文脈に達したときに再現するというものです。 そして、これらは代表的なサービスではそれぞれこのように利用しています。生放送は放送時が同期、過去ログが非同期ですね。
- さて、いきなりですが、これは動画のコメントの最新 10 件をリクエストする URL です。 叩いて見ると・・ XML が返ってきます。 この URL の api の部分を api.json にすると JSON で返ってくるようにもなってます。
- コメントを取得するプログラムを作ると色々と楽しみ方が広がるので、試してみてください。 ということですごいあっさりしてますがコメントサーバーの話は終わりです！
- 続いてパート 2 、ニコニコ動画の Windows8 版を作ったお話をします。
- さて、今月二日、上司から打診が来ました。 「 Windows8 向けのニコニコ動画を」 今週中に作ってほしい (click) 。 そうしたら、 4 月 24,25 日にある Microsoft Windows Developer Days のキーノートスピーチで紹介して頂ける (click) 、というものでした。 (click) 今週中とな？
- まあさすがに週内に完成は無理だろうというのはありましたが、とりあえず技術調査を始めました。 まず実行環境と開発環境を揃え、 web にあるドキュメントを読み、サンプルコードを入手してどうすれば実現するかを探っていきます。 なお私は Windows アプリの開発は相当久しぶりなのと、 Windows 8 では Windows Runtime という名前で OS のシステムコールが一新されているので新たに勉強する要素がかなり多い状況です。
- とにかく大車輪で情報を探って利用する技術要素を決めていきます。 動画のフレーム更新をチラツキ無く、かつ画面の更新レートにあわせて行うサンプルがあったので、それが利用している技術をベースにすると (click) 言語は C++/CX 、動画のデコードは MediaEngine というシステムコンポーネント それから DirectX を使って画面を更新し、そのときにコメント描画を仕込めそうだと考えました。 また、それ以外のユーザーインターフェイスの記述には (click)Microsoft 指定の XAML というものを使うことにして、 (click) それらの実験を始めました。
- そして 4 月 6 日金曜日、、出社して、アサインされたデザイナーを交えたキックオフミーティングを行います。 まずここでスケジュールが伝えられます (click) 。 4 月 25 日が本番で、そのリハーサルのために 4 月 20 日に動いている物があること。 さらに、そのキックオフミーティングの三時間後に Microsoft さんのほうから (click) 〜送ってほしい、という連絡が来ます。
- これらから定まるロードマップはこんな感じになりました。 (click) ラフデザイン -> 提出 (click) デザイン仕上げ (click) アプリ実装 -> 提出 (click) 仕上げ -> 本番
- 期間が短いので、実装する機能はデモで見せる最低限の内容に絞ります。 重要なのはもちろん、 (click) 動画が再生できること。そしてその上に (click) コメントが流れること。 さらに、動画操作の基本的なユーザーインターフェイスとして (click) 再生、一時停止、シークバー操作、再生位置を先頭に戻すボタン、他にもコメントの表示切り替えボタンなどは実装します。 (click) そしてデモで実演するため、コメントの投稿機能も必要です。 ただし、安定してデモが出来る必要があるということで、一旦通信しないでオフラインで動作するものを作る事になりました。
- 動き出したデザイナー側は、 Windows 8 の Metro UI のガイドラインを読み込んでどのような方向でデザインするかの検討を始めます。 多くの案を出してはそぎ落としていきました。 そして、指定の 4/10( 火曜日 ) に Microsoft さんに提出して Microsoft のエバンジェリストの方からレビューを受けます。
- レビューの結果を受けて、さらに数日かけて動くパーツ素材を用意していきます。
- デザイナーが作ったものの一部はこんなかんじです。これはトップ画面。
- これは動画の詳細画面。
- そして、これが動画の再生画面です。さきほどの絵では外していましたが、実際にはこのように検討用のメモがペタペタと貼り付いていて、配置に関する情報なんかも指示が入っています。
- そしてデザインした再生ページで想定されるパーツ要素を、必要な状態数用意します。
- さて、それまでの間私が何をしていたかというと、実際に実装するにあたって色んな試行錯誤をしていました。
- それぞれの担当分が形になってきたということで、 15 日頃からはデザインとコードを組み合わて動く物にしていきます。 Windows 8 Metro UI アプリに必要なアイコンや起動画面なども準備しつつ、機能性のあるパーツスタイルをプログラマー側が動くようにしていきます。
- さて、一通り動くようになってタブレット PC で実際に試してみたところ。 机上のデザインと実際はやっぱり違って使いにくい (click) ということが判明します。 (click) このときの操作体系は、画面の下端から引き出す操作をすると動画の再生操作に関するアプリバーが引き出され、それ以外の場所のタップでコメント欄がやはり下から出てくるというものでした。 実際にこれを使うと、頻繁に操作領域を切り替える必要があって大変でした。 さらに、コメントを打とうとするとタブレット PC ではソフトウェアキーボードが現れるんですが、それいあわせて動画を縮小すると、パーツ類の専有分もあって動画がものすごく小さくなってしまう点 (click) と相まって、「動画を見ながらコメントをする」という体験がだいぶやりにくいものになっていました。 ということで、リハーサル用の提出日を延ばして貰って、 (click) 実際に使えるものにしていくためにデザインをリテイクすることになります。
- ニコニコ動画においては動画の再生操作とコメント入力は密接に連携するアクションということで、 (click) 新デザインではそれらの操作は一つのパネルに統合しました。 (click) 同時に、シークバーの再生位置表示をなめらかに動かしたり、コメントをしたら上に出ている動画タイトルを消したり、みたいな細かい工夫を混ぜ込んで仕上げて、 (click) 無事リハーサル用バージョンを提出しました。
- 実際のデザインイメージはこんな感じでした。これはデザイナーによる指示画像です。
- さて、開発中はデモで再生する動画も完成前のバージョンがきていたのですが、この頃には完成版が出来てきます。楽曲はエレクトロキューティカさん、 Microsoft 公式の MikuMikuDance モデルを活用して、＠まさたか P が映像を作られたものです。
- そしてリハーサルで OK がでたので、動画、サムネイルを最終版に差し替えて本番用のアプリをビルドして、提出し、無事本番を迎えました。