ドワンゴのエンジニア魂

第1回 ニコ動/ニコ生 HTML5化への奮闘~ドワンゴ流動画配信サービスのつくりかた~

この記事を読むのに必要な時間:およそ 3 分

アトミックデザインを採用したニコ生のプレーヤ

─⁠─ニコ生のプレーヤの開発で苦労した部分はありましたか。

三須:Flashであれば簡単に表現できたのに,HTMLだと思うようにならないといった部分があり,そこは苦労したところです。ただ,できるだけイレギュラーなコードを書かずに,キレイに実装したいと考えていました。それでHTMLとCSSの両方で構造から考え,どうすれば最適になるのか,あるいは単に見た目だけでなくタグの意味合いなどの観点も踏まえて正しいものを生成するように意識して作っています。今のところ,コードにあいまいなところはないと言い切れるくらい,キレイに作ることができたと考えています図2)⁠

図2 近日リリース予定のニコニコ生放送HTML5プレーヤ開発で使われているCSSの一部。CSS Modulesを利用して可読性の向上とコンポーネント単位での管理を実現した

図2 近日リリース予定のニコニコ生放送HTML5プレーヤ開発で使われているCSSの一部。CSS Modulesを利用して可読性の向上とコンポーネント単位での管理を実現した

─⁠─先ほどアトミックデザインも採り入れたというお話がありました。実際に取り組んでみていかがでしたか。

三須:最初は構造をどうするのか,コンポーネントの粒度分割はどうすべきかなど,いろいろと悩みました。ただ,僕自身がコンポーネント的な思想が好きで,少し前の開発でマイクロサービスに触れていたこともあり,依存関係を整理して分割するという点でアトミックデザインの考え方にも比較的スムーズに慣れることができました。

写真3 三須健太郎氏

写真3 三須健太郎氏

それと今回ポイントになったのはCSS Modulesです。これまでCSSをどう書けばよいのか,世の中的にもこれがベストという形はなかったと思いますが,CSS Modulesを調べたときにこれは使えるんじゃないかと思いました。足りなかった最後のピースを見つけた感覚です。HTML単体で見ても文書構造として最適なものを出力できて,CSSも可読性が高くコンポーネント単位で管理ができる。最終的に,自分としても納得感があるものに仕上がっているので,興味があればぜひHTMLのソースを見ていただきたいですね。

OSSの手法を採り入れて共通ライブラリを開発

─⁠─今回の開発で,何か工夫された点はありましたか。

七田:ニコ動でもニコ生でも,コメントが動画上に表示されることは変わりません。また,弊社のサービスの文化としてコメントアートがあって,それを見てほかの視聴者の方も喜んでくれるんですね。しかし,コメントアートの表示にはコメントをレンダリングするプレーヤ側のロジックが重要な役割を担っているのですが,そのロジックがそれぞれのプレーヤでバラバラに開発されてしまっていたんです図3)⁠そこで,今回のプロジェクトでコメントアートの描画ロジックをライブラリとして開発して複数のチームで統一的に利用することにしました。結果として,複数のチームのノウハウが集まったライブラリができたので,互換性についてはかなり高い状態になっていると思います。まだPC版のプレーヤと埋め込みプレーヤにしか組み込めていないので,今後は,スマートフォン版プレーヤなどにも組み込んでいきたいですね。

図3 Flash版ではChromeとIEでここまで描画の違いが出てくるが,HTML5版だと,ブラウザによる差異がほぼなく表示可能となっている

図3 Flash版ではChromeとIEでここまで描画の違いが出てくるが,HTML5版だと,ブラウザによる差異がほぼなく表示可能となっている

コメントレンダリングだけでなく,配信システムも新旧のバージョンが混在しています。そうすると,各プレーヤは新旧両方の配信システムに対応しなければならなくて,全体で見るとかなりの工数がかかっています。こういった部分をライブラリとして共通化することで,開発効率を高めています。

たとえば何かライブラリを作ったとき,⁠これはウチのチームのもの」って言ってしまうとほかのチームが更新できない。そうではなく,たとえば私のチームで開発したコメントを取得するライブラリがあるんですけれど,それに対して生放送チームの人が「ウチはこの機能が必要だから追加して更新するわ」と言ってコミッタにレビューを投げる。そういった文化が社内で生まれ始めています。

誰も思いつかない,すごいものを作る足固めができた

─⁠─ちなみに,ニコ動やニコ生のサーバはすべてオンプレミスなんですか。

後藤:大半はそうですね。ハードウェアのレイヤまで含めて多くの部分を自社で管理することには,クラウドだけを使ったのでは得られないメリットがあると考えています。ドワンゴとしての独自性を出すための戦略的な理由からオンプレを選択しています。実際,ドワンゴでは普通はやらない,オンプレでしかできないことを検討しているので,そういった部分にもぜひ注目していただきたいですね。

─⁠─最後に,今回のプロジェクトの感想をお願いします。

七田:チームをまたいで成果を上げる取り組みができるようになったことが個人的には大きいと感じています。特にオープンソースの世界で活動されている方は,⁠すごいな。楽しい,やりやすい」と感じていただける状況になっていると思います。まだ一部だけですが,OSS的な開発スタイルが作れたことは大きな成果だと思いますし,それによってコメントアートの文化を守るなど,ユーザーが触れる部分にも寄与できたので,しんどい部分もありましたが,良いプロジェクトでしたね。

三須:アトミックデザインという世の中的にまだ評価が固まっていないしくみを採り入れ,それによって成果物の品質を高められたことが個人的にはうれしかったところです。この流れでさまざまなコンポーネントを作っていけるし,再利用性も高くて開発効率も高められる。そういった意味で今後の足固めになる部分を作れたのは,すごく意義があったと思います。

後藤:ユーザーの方々の目には,フロントエンドばかりが変わっていてバックエンドがどう変わっているのかまだわからないかもしれません。ただ,今まで誰も思いつかなかった,すごいものを作る足固めを今回のプロジェクトで成し遂げたので,今後に期待してもらえればと思います。

ドワンゴでは,各種エンジニアを募集しています。

詳しくは,http://dwango.co.jp/recruit/をご覧ください。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.98

2017年4月22日発売
B5判/152ページ
定価(本体1,480円+税)
ISBN978-4-7741-8920-8

  • 特集1
    [調べ方から身につける]Web開発 基礎の基礎
    開発環境の整備,フレームワークで開発,エラーに対処
  • 特集2
    これからはじめるDocker
    最新インフラ構築の一部始終を体験!
  • 特集3
    AWSコスト削減
    半額だって夢じゃない!
  • 一般記事
    良いPHPコードを保つ技術
    規約と指針を整備し,静的解析ツールを活かす
  • 一般記事
    技術系カンファレンスに行こう!
    参加する方法,発表者になる方法

コメント

コメントの記入