AbemaTVアプリ開発の裏側──若手エンジニアを磨き上げる「改善志向型エンジニア文化」とは?

「若手エンジニア、どんな活躍してますか?」の第8回目は、話題のインターネットテレビ局、「AbemaTV」のアプリを手がけるエンジニアの登場です。精鋭揃いのAbemaTVチームでは、どのような研鑽があるのでしょうか。

AbemaTVアプリ開発の裏側──若手エンジニアを磨き上げる「改善志向型エンジニア文化」とは?

サービスの会社──。
サイバーエージェントという企業に、こんな印象を持つ人は多いでしょう。アメーバブログやAWA、そしてAbemaTVといった、センセーショナルでポップなサービスを次々と展開しているから、こう感じるのかもしれません。

言うまでもなく、こうしたサービスの裏側には、エンジニアたちの奮闘があります。つまり、「サービスの会社」とは、「エンジニアリングの会社」と言い換えることもできるのです。事実、現在サイバーエージェント社の全社員の3割強がエンジニア職にあるといいます。そして、エンジニアの会社には、えてして固有のエンジニアカルチャーが息づいてます。サイバーエージェントのカルチャーは、若きエンジニアにどのような影響を与え、錬磨しているのでしょうか。

テレビ朝日とタッグを組み立ち上げた、インターネットテレビ「AbemaTV」のiOSチームのリーダーである波戸勇二(はと・ゆうじ/@dekatotoroさん。そして、刺激的な環境を求め他チームから異動してきた鈴木大貴(すずき・たいき/@marty_suzukiさんにお話を聞きました。

サーバーサイドからiOSの世界に自ら飛び込む

──自己紹介をお願いします。

波戸 iOSチームのリーダーをしています。前職はSI企業で、Javaでコテコテのエンタープライズ開発をしていました。2011年にサイバーエージェントに転職し、1年間ほどサーバーサイド開発者として仕事をしていたのですが、後にスマートフォンのネイティブアプリ開発に移りました。最初はAndroid開発でしたが、その後iOS開発のチームに。自分の周囲ではiOSが使われていることが多かったので、このOS上のアプリを開発したいと思ったんです。

1

波戸勇二さん

鈴木 大学時代にプログラミングを始め、アルバイトでiOSアプリ開発に取り組んでいました。2014年に新卒でサイバーエージェントに入社し、最初はサーバーサイドの開発を担当していましたが、会社としてスマホに注力していく方針が打ち出されたことで、もともと担当していたiOS開発の仕事に移ったんです。

2

鈴木大貴さん

──お2人とも自ら進んでネイティブアプリ開発のチームに参加した形なのですね。波戸さんがネイティブアプリの取り組みを始めた頃は、どんな状況だったのですか?

波戸 当時はネイティブアプリのエンジニアがあまり社内にいなかったんです。私もそうですが、サーバーサイドやフロントエンドから転向してネイティブアプリに挑戦する人がいる、という状況でした。当時作っていたアプリも、表示に(ブラウザ機能のコンポーネントの)WebViewを使うような素朴な作りのものが多かったですね。

最初に取り組んだネイティブアプリは、アメーバブログのアプリです。歴史が古いアプリなのでレガシーコードも多く、ちょっと直すとちょっと壊れることもあり(笑)、かなり苦労しました。

──AWAのアプリ開発にも関わっていたと伺っていますが。

波戸 リリースの3~4カ月前から参加しました。AWAは音楽ストリーミングのサービスですが、私も音楽が好きだったので希望を出して移ったんです。

AWAでは、アニメーションの表現や使い勝手、触り心地を、そうとう作り込みました。いろいろなアプリを研究して、「ここは触り心地が変じゃないか」と話し合ったり。デザイナーとも話し合い、「これは気持ちいい動きか」「物理的な世界ではおかしく感じる動きではないか」など議論を重ねて作り込みました。「ここまで作り込まないと世に出せない」と言っちゃうような、プロダクトのクオリティにこだわるストイックなチームでした。あそこまでやっているアプリは他にないという自負はあります。

──スマートフォンアプリは手触りも大事なのですね。鈴木さんが最初に作ったiOSアプリはなんだったのですか?

鈴木 「ごーしちご」という俳句の投稿サービスです。最初はサーバーサイドエンジニアとして、ブラウザ版を作り、その後に「ネイティブアプリが欲しい」ということで、私はiOS版アプリを担当したんです。当時はフルネイティブではなく、ハイブリッドアプリとして、どれだけ早くリリースできるかという開発手法で、自分にとっては挑戦でしたね。

その次のプロジェクトではiOS開発に使うSwiftに取り組み、ファッションECのアプリを作りました。

──お2人が一緒に仕事をするようになったのはいつからですか?

鈴木 一緒に仕事をするようになったのは、2017年3月に私がAbemaTVのチームに入ってからです。ただ、その前から顔を合わせる機会は結構ありましたね。社内にiOSネイティブアプリ開発者が情報を共有する会があって、そこで話したり。

波戸 社外の勉強会でもたまに顔を合わせたりしますね。

※現在はサービスを終了

AbemaTVでは、既存コードのリファクタリングにも挑戦

3

──波戸さんはAbemaTVのチームにはどのような形で参加したのですか?

波戸 AbemaTVリリース後1カ月というタイミングでチームに参加しました。「一緒にやらないか?」と以前から誘われていたので。AWAをリリースして1年ほど経って、落ち着いたタイミングだったので引き受けたんです。AbemaTVチームに参加した当初は、細かな機能の改善が多かったですね。大きな機能開発としては(動画をChromecastのような外部デバイスに送る)Google Cast対応やApple TV対応などです。

──AbemaTVは動画サービスなので、ChromecastやApple TVのようなテレビ向けデバイスの対応は重要ですよね。鈴木さんはどうでしたか?

鈴木 AbemaTVチームに参加する前は、別のチームでiOS開発のリーダーをしていて、後輩もいたんです。当時思っていたことは、入社3年目の私が(コードを書いて)Pull Requestを出しても、後輩の「いいね!」というコメントがついてマージされてしまう(笑)。職制上、自分の技術の進歩が感じにくかったんです。仕事は滞りなく進んでいましたが、20代半ばで必要なスキルが身についているかどうか、迷いがありました。そこで、もっと吸収できる現場を求めて、異動の希望を出したんです。

──成長する機会を求めて、あえてチームを移った形なのですね。AbemaTVのチームに参加して、まずどんな仕事をしましたか?

鈴木 2017年4月にリリースした(タイムシフト視聴できる)新機能の「Abemaビデオ」のリスト表示と検索画面を担当しました。従来の番組表検索機能と共通点はありますが、実はデータ構造が少し違うんです。そこで呼び出すAPIデータを変えるだけで共通になるよう、既存機能やAPI周りのリファクタリングをしながら進めました。当初の見積もりより、依存関係の切り離しが難しかったですね。

波戸 これで、作りがだいぶ変わりました。

──新機能を付け加えるだけでなく、既存コードのリファクタリングも進めて、今後の改善をしやすいようにした、というわけですね。

ハイスピードに醸成される、サイバーエージェントのエンジニア文化

4

お2人の座席位置は向かい合わせ。こうした会話の様子は日頃からよく見られるという

──鈴木さんが新卒で入社されて、どんなサポート体制があったのですか。

鈴木 1年目はトレーナーとして先輩が付いてくれて、一緒にやっていく形でした。学生時代にアルバイトをしていた頃は1人で開発することが多かったので新鮮な体験でしたね。自分が好きなように書いていたのですが、自分の仕事をちゃんと見てもらえるのは良かったですね。変数名など名前を適切に付ける、といった基本的なことを学べたのは大きいです。最初のうちは“Value1”、“Value2”みたいなネーミングをしてしまっていたこともあったので(笑)。

──そのあたりは社内でルールが設定されているのですか?

波戸 がっちりしたコーディングルールを設定しているわけではありません。Pull Requestのレビューの際に「この書き方はよくないよね」といった議論をする形で進めています。

──そうしたエンジニア文化は、そもそもサイバーエージェント社内にあったのでしょうか?

波戸 私が入社した2011年頃とは大きく変わり、エンジニアの存在感は増してきていますね。2012年頃からエンジニアの人数が大幅に増え、それ以前と比べて、ものづくり文化が社内に深く浸透してきたように感じます。

サイバーエージェントでは、エンジニア職にある社員をサポートする「ENERGY(エナジー)」制度を実施している。会議セッティングといった開発以外の業務を代行するコンシェルジュを配置するなど、エンジニアの業務をサポートし、またモチベーションアップを図るのが狙いだ。同制度に関してはこちらに詳しい。

──エンジニアの増加とともに急速に文化が醸成されてきた、と。ところで、AbemaTVはFluxアーキテクチャを使っているということですが。

波戸 AbemaTVのネイティブアプリはFluxアーキテクチャを採用しています。AbemaTVは動画をリアルタイムに処理する場合が多いので、Fluxアーキテクチャを用いて、データの流れをシンプルにしています。こうすることで、アプリの作りが複雑化せず、整理された形でアプリを構成できます。

Fluxアーキテクチャは、もともとFacebookが提唱したWebクライアント向けの技術で、リアクティブプログラミングと相性がいい。ネイティブアプリでも、リアクティブは流行っていて、AbemaTVでもRxSwiftというリアクティブプログラミング向けのライブラリを使っています。

ただし、機能によってはFluxのアーキテクチャが合わないので、MVVM(Model-View-ViewModel)という別の設計で作っています。そのあたりは柔軟にやっています。

MVVMとFluxに関しては、鈴木さんが発表した資料に詳細がある

鈴木 Fluxでいいなと感じたのは、例えばリモート通知との相性がよさそうなところです。通知から画面遷移するルーティングを、Fluxアーキテクチャを使うことでうまく構成できました。3D touchで遷移したり、ユニバーサルリンクでSafariからクリックしてアプリを起動したり、汎用的な画面遷移に応用できます。

新技術を貪欲に取り入れる、エンジニア文化

エンジニアHubに会員登録すると
続きをお読みいただけます(無料)。
登録のメリット
  • すべての過去記事を読める
  • 過去のウェビナー動画を
    視聴できる
  • 企業やエージェントから
    スカウトが届く