Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

開局6か月/900万DL突破の「AbemaTV」、急成長するウェブサービスを支えるフロントエンドエンジニアの舞台裏

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/10/18 14:00

 開局6か月弱で、900万ダウンロードを達成したインターネットテレビ局の「AbemaTV(アベマティーヴィー)」。ユーザー数の多さはもちろん、動画サービスの特性上、「長時間ユーザーと接する」「処理が重たい」「実用系と異なりエンターテイメント系では、ユーザーがすぐに他サービスに移行してしまう」といった課題を抱えるジャンルにおいて、UI/UXを受け持つフロントエンドの技術にかかる期待や責務は大きい。「Web Initiative Center」という専門部署を立ち上げ、サービスの品質改善を力強くドライブするサイバーエージェントの佐藤歩氏、泉水翔吾氏に、その開発舞台裏を伺った。

目次
株式会社サイバーエージェント 佐藤歩氏(左)、泉水 翔吾氏(右)
株式会社サイバーエージェント 佐藤歩氏(左)、泉水 翔吾氏(右)

「AbemaTV」「FRESH! by AbemaTV」を支えるフロントエンドアーキテクチャと導入背景

――お二人が所属されている開発チームの規模や構成を教えてください。

泉水:私が所属しているWeb Initiative Centerは4人で、佐藤もメンバーの一人です。

佐藤:「AbemaTV」のウェブのフロントエンドを専業で実装しているメンバーは6人ですね。僕とか泉水を入れると8人です。その他には、ネイティブエンジニアやサーバサイドエンジニア、デザイナー、ディレクターがいます。全部で30名くらいでしょうか。

「AbemaTV」:サイバーエージェントとテレビ朝日が共同で、無料で楽しめる
「AbemaTV」:サイバーエージェントとテレビ朝日が共同で、
無料で楽しめる"インターネットテレビ局"として展開する、新たな動画サービス

――AbemaTVのフロントエンドの構成技術は?

佐藤:使っている主なライブラリとしてはReactで、Fluxを採用しています。最近のトレンドとして支持されているものを中心に構成していて、Reactive Extensionsの「RxJS」や、補助的にImmutable.jsなども使用しています。

 「FRESH!」はサーバサイドレンダリングもやっていて、Node.jsサーバを立てて、クライアントサーバ間でReactコンポーネントのJavaScriptを共通実行させる取り組みをしています。「AbemaTV」はサーバサイドはAPIサーバがあるだけで、完全にクライアントサイドだけで構成されたシングルページアプリケーションのアーキテクチャになっています。

 「AbemaTV」と「FRESH!」は別々に開発していたので、どちらもReactを使っているしFluxだけど、かたや「FRESH!」はいわゆるIsomorphicアーキテクチャでサーバサイドレンダリングとシングルページアプリケーションの両立に挑戦しており、「AbemaTV」のほうはRxJSをFluxに組み込むチャレンジをしています。

泉水:Reactが流行り始めたのは今年に限った話じゃなく、2~3年ぐらい前から徐々に伸びてきたワードなので、ある程度ナレッジも溜まってきた段階だと思いますが、FRESH!でやっているようなシングルページアプリケーションかつサーバサイドレンダリングという構成は、かなり攻めてるほうかと思います。AbemaTVについてもRxJSをFluxの実装部分に取り入れていますが、珍しいのではないでしょうか。

佐藤:Reactっていう単語は技術者界隈の、特にエッジな人たちの中では以前から知られていましたが、実業務でやったことがあるメンバーがほぼいないチームばかりでした。今のタイミングでチームを作ったら違うとは思うんですけど、その辺で結構不慣れなところはありました。

 少なくとも導入を決めたリーダー格のエンジニアはもちろん触っていたし、ある程度感触を得てから採用を決めているという形なんですけども。

泉水:自分の場合は、AbemaTVの改善をする前にSNSサービスの「755」というプロジェクトにいて、シングルページアプリケーションかつサーバサイドレンダリングを実装した経験があったので、初めてではなかったです。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 斉木 崇(編集部)(サイキ タカシ)

    CodeZine編集部 編集長。1978年生まれ。早稲田大学大学院理工学研究科(建築学専門分野)を卒業後、IT入門書系の出版社を経て、2005年に翔泳社へ入社。2005年6月の正式オープン以来、ソフトウェア開発専門のオンラインメディア『CodeZine(コードジン)』の企画・運営を担当している。20...

バックナンバー

連載:編集長インタビュー
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5