SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

編集長インタビュー

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

「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」というプロジェクトにいて、シングルページアプリケーションかつサーバサイドレンダリングを実装した経験があったので、初めてではなかったです。

次のページ
急激なサービス成長を支えるパフォーマンスチューニング

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
編集長インタビュー連載記事一覧
この記事の著者

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

株式会社翔泳社 ProductZine編集長。1978年生まれ。早稲田大学大学院理工学研究科(建築学専門分野)を卒業後、IT入門書系の出版社を経て、2005年に翔泳社へ入社。ソフトウェア開発専門のオンラインメディア「CodeZine(コードジン)」の企画・運営を2005年6月の正式オープン以来担当し、2011年4月から2020年5月までCodeZine編集長を務めた。教育関係メディアの「EdTechZine(エドテックジン)」...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9733 2016/10/18 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング