てっく煮ブログ

2007年11月01日

Adobe MAX リアルタイムレポート：ニコニコ動画とFlash

ドワンゴ 戀塚さん。

まとめのクオリティよりもリアルタイム性を重視したメモ。たぶん後で資料公開されるので、正確な情報はそちらにて。

(追記)公開されたようです

ニュースサイトにも記事が出たようです。

ニコニコ動画とは

2.1 参加方法

  1. 動画投稿
    • 意見を問いながら投稿できる
    • コメントをもらえてモチベーションが高まる
    • 既存動画を加工する。２次３次加工が容認されている
  2. マイリスト登録
    • いわゆるお気に入り
    • ランキングに反映される
  3. タグ付け
    • 勝手につけられる。
      • 同義語はボランティアがまとめてくれる
      • 荒らしも発生する。
    • 整理タグ
      • 「ニコニコ動画講座」「歌ってみた」
    • ネタタグ
      • 「孔明の罠」「吹いたら負け」
  4. ニコニコ市場
    • ネタ商品やコメントからの紹介
  5. ネタ商品の購入
  6. コメント
    • 感想、字幕、ツッコミ、指摘・解説、合唱(=弾幕)、演出(コメントアート・職人)、空耳
    • コメントを投稿しやすいようなUIにしている

2.2 適度な匿名性

  • 匿名のメリット
    • すぐに参加できる
      • いまいる人に溶け込む努力が不要
      • 色眼鏡がつかずに受け止めてくれる

2.3 ニコニコシリーズ

  • SMILEVIDEO
  • ニコニコ動画モバイル
    • DoCoMo, au で利用できる
  • ニコニコ市場

まとめ

  • 動画を核として盛り上げる
  • 視聴者の力が大きい

コンセプト

  • 設計
    • 命題：動画アノテーションを普及させる
    • アイデア：コメントが飛ぶ
      • コメントがコンテンツである
  • 画面サイズ
    • Flashのプレーヤー全体：952x540
    • 動画：512x384

コメント入力

  • 動画下にコメント欄
  • コマンドは分かる人のみ分かるように、あえてとっつきにくく

変遷

  • 仮→β→γ→RC→RC2

仮

  • 当初は当たるかどうかは不明なので、おそるおそるスモールスタート
    • 動画は外部サイトに頼る（マッシュアップ）
    • 手がかかってないように見えるが、みためがきれいな Web2.0 への反感をこめてシンプルにしている
  • UIの根幹（コメント機能）は既に完成されている
    • 複数行入力に対応していた (AA)

β

  • いけるぞ、となって手を入れた
    • 手書き風フォントはここから
    • 見た目の再構成

γ

  • SMILEVIDEO
  • 複数行入力の禁止（告知はせずに×印をつけた）

RC

  • 有料会員制度
  • バナーを入れたら非難ごうごうだったので、ニュース置き場にした
  • 下のレイアウトをシンプルに （名前欄の廃止）
  • 過去ログ機能 （有料会員専用）

RC2

  • プレーヤーを刷新
  • 右側に機能を追加 （荒らし対策、投稿者コメント）

プレーヤーの中身

プレイヤーは AS2

  • YouTube 対応や Wii への対応を考えて、AS2
  • ファイルフォーマットは FLV

動画/スレッドの概念

  • 代表スレッド1つ、と、スレッドが複数
  • スレッドID
    • 10進数10桁
  • 動画ID
    • smXXXXX
    • 代表スレッドが選ばれる

コメントのレイアウト

  • 設計のポイント
    • 読みやすい
  • 分かりやすい
    • 書き込んでもらいやすいように
  • 適度に刺激的な情報量
    • 読むのに集中しなければならない程度
    • 前のシーンのコメントが残っていると興ざめ
  • 再現性
    • 表示位置が他の人でも同じである必要がある
    • コメントアートの発達など

衝突判定

  • 長いコメントほど早く流れる（コメントは３秒間滞在）
    • 表示中のすべての時間において衝突しないように計算を行う。
      • （例）短いメッセージに長いメッセージが追いつく
  • 収まりきらないときは乱数で配置 → 弾幕
      • あえてばらばら感を演出して、臨場感をだす。
      • 再現性には違反するが、どちみち読めない。
  • 色、大きさ
  • 古いコメントは透明に
  • コメント数は最大30（経験則）
    • 超えた場合は、先に消える位置にあるものを消す
  • 終端の調整
    • ３秒を確保できない
    • 一律に３秒前にずらしている (３秒前に密度が上がってしまう問題はある)

AS2 での開発

  • Flash では #include "hoge.as" だけ
  • １フレームだけ

まとめ

  • 意外に苦労してるでしょ

コメントの通信

  • リアルタイム通信の必要なし
    • リアルタイム感は動画の時間軸で再現できる
  • XmlSocket HTTP/1.1

パケット定義

  • Exel からジェネレート

メッセージサーバー

  • C++, Linux デーモン
  • crossdomain.xml/GZIP

メッセージサーバー

  • CSV
  • カタログ機能だけDBにまかせる

特徴

  • 通信を最小限
  • ステートレス
  • Cookieも使わない
    • ボトルネックとなりやすい場所なのでシンプルに

開発体制

  • Subversionのリポジトリで管理
  • 共同の所有権
  • ドキュメントは Wiki
  • 同期ツール
    • メーリングリストに流す

今後の展望

  • 随時改良
  • AS3 に移行？
  • H.264対応？

Web+DB 42 に技術資料が出るらしい！