ニコニコ超開発

Editor's Notes

1. パート 1 。まずはじめに、ニコニコ動画のコメントサーバーというものをちょろっと紹介します。
2. コメントサーバーは、文字通りですが、ニコニコの各種サービスのコメント部分を担当しているサーバーです。 利用しているサービスは、動画にはじまって、今でも時報や地震のときにコメントを共有している ( 元 ) 広場、 ニコニコ生放送、ニコニコ実況、ニコニコアプリ、ニコ生アラート、電子書籍の静画、ほかにもニコルソンという関連サービスなんかでも使っています。 (click) このサーバーはすべてオリジナルで、 C++ で記述しています。 32bit から始まり、現在は 64bit になってます。 すべてのサービスで使っているサーバーは同一のコードベースです。ちなみにソースは公開していません。 (click) 対応プロトコルは HTTP, XMLSocket, それに WebSocket も対応準備してます。
3. コメントサーバーは、サービスによって大きく二種類の使われ方があります。 一つ目ですが、「同期」。リアルタイムですね。コメントをしたら即座に同じ対象を見ている人達に共有されるものです。 二つ目、「非同期」。これは、過去にされたコメントを、同じ文脈に達したときに再現するというものです。 そして、これらは代表的なサービスではそれぞれこのように利用しています。生放送は放送時が同期、過去ログが非同期ですね。
4. さて、いきなりですが、これは動画のコメントの最新 10 件をリクエストする URL です。 叩いて見ると・・ XML が返ってきます。 この URL の api の部分を api.json にすると JSON で返ってくるようにもなってます。
5. コメントを取得するプログラムを作ると色々と楽しみ方が広がるので、試してみてください。 ということですごいあっさりしてますがコメントサーバーの話は終わりです！
6. 続いてパート 2 、ニコニコ動画の Windows8 版を作ったお話をします。
7. さて、今月二日、上司から打診が来ました。 「 Windows8 向けのニコニコ動画を」 今週中に作ってほしい (click) 。 そうしたら、 4 月 24,25 日にある Microsoft Windows Developer Days のキーノートスピーチで紹介して頂ける (click) 、というものでした。 (click) 今週中とな？
8. まあさすがに週内に完成は無理だろうというのはありましたが、とりあえず技術調査を始めました。 まず実行環境と開発環境を揃え、 web にあるドキュメントを読み、サンプルコードを入手してどうすれば実現するかを探っていきます。 なお私は Windows アプリの開発は相当久しぶりなのと、 Windows 8 では Windows Runtime という名前で OS のシステムコールが一新されているので新たに勉強する要素がかなり多い状況です。
9. とにかく大車輪で情報を探って利用する技術要素を決めていきます。 動画のフレーム更新をチラツキ無く、かつ画面の更新レートにあわせて行うサンプルがあったので、それが利用している技術をベースにすると (click) 言語は C++/CX 、動画のデコードは MediaEngine というシステムコンポーネント それから DirectX を使って画面を更新し、そのときにコメント描画を仕込めそうだと考えました。 また、それ以外のユーザーインターフェイスの記述には (click)Microsoft 指定の XAML というものを使うことにして、 (click) それらの実験を始めました。
10. そして 4 月 6 日金曜日、、出社して、アサインされたデザイナーを交えたキックオフミーティングを行います。 まずここでスケジュールが伝えられます (click) 。 4 月 25 日が本番で、そのリハーサルのために 4 月 20 日に動いている物があること。 さらに、そのキックオフミーティングの三時間後に Microsoft さんのほうから (click) 〜送ってほしい、という連絡が来ます。
11. これらから定まるロードマップはこんな感じになりました。 (click) ラフデザイン -> 提出 (click) デザイン仕上げ (click) アプリ実装 -> 提出 (click) 仕上げ -> 本番
12. 期間が短いので、実装する機能はデモで見せる最低限の内容に絞ります。 重要なのはもちろん、 (click) 動画が再生できること。そしてその上に (click) コメントが流れること。 さらに、動画操作の基本的なユーザーインターフェイスとして (click) 再生、一時停止、シークバー操作、再生位置を先頭に戻すボタン、他にもコメントの表示切り替えボタンなどは実装します。 (click) そしてデモで実演するため、コメントの投稿機能も必要です。 ただし、安定してデモが出来る必要があるということで、一旦通信しないでオフラインで動作するものを作る事になりました。
13. 動き出したデザイナー側は、 Windows 8 の Metro UI のガイドラインを読み込んでどのような方向でデザインするかの検討を始めます。 多くの案を出してはそぎ落としていきました。 そして、指定の 4/10( 火曜日 ) に Microsoft さんに提出して Microsoft のエバンジェリストの方からレビューを受けます。
14. レビューの結果を受けて、さらに数日かけて動くパーツ素材を用意していきます。
15. デザイナーが作ったものの一部はこんなかんじです。これはトップ画面。
16. これは動画の詳細画面。
17. そして、これが動画の再生画面です。さきほどの絵では外していましたが、実際にはこのように検討用のメモがペタペタと貼り付いていて、配置に関する情報なんかも指示が入っています。
18. そしてデザインした再生ページで想定されるパーツ要素を、必要な状態数用意します。
19. さて、それまでの間私が何をしていたかというと、実際に実装するにあたって色んな試行錯誤をしていました。
20. それぞれの担当分が形になってきたということで、 15 日頃からはデザインとコードを組み合わて動く物にしていきます。 Windows 8 Metro UI アプリに必要なアイコンや起動画面なども準備しつつ、機能性のあるパーツスタイルをプログラマー側が動くようにしていきます。
21. さて、一通り動くようになってタブレット PC で実際に試してみたところ。 机上のデザインと実際はやっぱり違って使いにくい (click) ということが判明します。 (click) このときの操作体系は、画面の下端から引き出す操作をすると動画の再生操作に関するアプリバーが引き出され、それ以外の場所のタップでコメント欄がやはり下から出てくるというものでした。 実際にこれを使うと、頻繁に操作領域を切り替える必要があって大変でした。 さらに、コメントを打とうとするとタブレット PC ではソフトウェアキーボードが現れるんですが、それいあわせて動画を縮小すると、パーツ類の専有分もあって動画がものすごく小さくなってしまう点 (click) と相まって、「動画を見ながらコメントをする」という体験がだいぶやりにくいものになっていました。 ということで、リハーサル用の提出日を延ばして貰って、 (click) 実際に使えるものにしていくためにデザインをリテイクすることになります。
22. ニコニコ動画においては動画の再生操作とコメント入力は密接に連携するアクションということで、 (click) 新デザインではそれらの操作は一つのパネルに統合しました。 (click) 同時に、シークバーの再生位置表示をなめらかに動かしたり、コメントをしたら上に出ている動画タイトルを消したり、みたいな細かい工夫を混ぜ込んで仕上げて、 (click) 無事リハーサル用バージョンを提出しました。
23. 実際のデザインイメージはこんな感じでした。これはデザイナーによる指示画像です。
24. さて、開発中はデモで再生する動画も完成前のバージョンがきていたのですが、この頃には完成版が出来てきます。楽曲はエレクトロキューティカさん、 Microsoft 公式の MikuMikuDance モデルを活用して、＠まさたか P が映像を作られたものです。
25. そしてリハーサルで OK がでたので、動画、サムネイルを最終版に差し替えて本番用のアプリをビルドして、提出し、無事本番を迎えました。