はじめまして。AbemaTVでAndroidエンジニアをしています、仙波拓です。
Android歴は2年ほどです。
最近はOSSにハマっており、先日Spotlightというライブラリを公開しましたので、いいねと思った方はスターをつけていただけるとうれしいです！
ちなみにCyberAgentにはGithubスターインセンティブという制度があります。
さて、私は17新卒として、今年の四月からAbemaTVに入社しました。 学生時代にも3,4ヶ月ほどインターンをしていたので、合わせて半年ほどになります。
エンジニアと言っても、仕様の調整やデザインの確認、すり合わせなどエンジニアリング以外のこともやります。 最近ではシークプレビューの実装を担当しました。
そこで、今回はシークプレビューの実装をもとに、AbemaTVでどのように仕様書やチケットなどを管理しているのかや、デザインや実装をどのように進めているのかを中心に紹介できればと思います。
目次
はじめに
AbemaTVとはサイバーエージェントとテレビ朝日の出資により設立された、インターネットテレビサービスです。 登録不要かつ無料でテレビが見ることができます。今年はコンテンツをオンデマンド視聴できるAbemaビデオがスタートしました。
AbemaTVには多くのエンジニアが在籍しており、界隈で有名なエンジニアもたくさんいます。 また、Androidチームは9人おり、他のチームも同じくらいの規模感でやっています。
規模的には大きいのではないでしょうか。
Androidのプロジェクトは、もともとJavaで書かれていましたが現在kotlinに移行中で、アーキテクチャはFluxを採用しています。 Fluxの詳しい内容はこちらのスライドが参考になると思います。
また、API通信はProtocolBuffersを使っています。
仕様書とチケット
AbemaTVでは2週間ごとのスプリントで開発を進めています。 ディレクターが、今スプリントで実現したい機能や改修などを洗い出し、画面構成や文言などの仕様を固めてくれます。
この時点で、エンジニアやデザイナー、運用チームなどの認識がずれないように、網羅的に要件をまとめてくれているので、とても開発がしやすいです！
チケットはJIRAで管理されており、自分のタスクはJIRAを通して確認することができます。
また、仕様書はConfluenceに、その他の調査結果や、手順書、議事録はesaにまとめられています。 もし、内部実装的に難しかったり、提案があったりすれば、実装に入る前の段階で、ディレクターと調整しながら進めていきます。
今回の場合は、
- プリビューを表示する画面とそのデザイン、要件
- サーバーからのプリビュー画像取得方法と返却される画像の仕様(画像urlや、urlに付与できるパラメータ)
などがまとめられており、スムーズに実装に入ることができました。
デザイン
AbemaTVではデザイナーがSketchファイルをGoogleDriveで管理しており、エンジニアは各々それらのSketchファイルを開いてデザインを確認することができます。 エンジニア自ら、Sketchで直接確認できるので、全体のデザインはもちろん、ViewとViewの細かいpaddingや位置関係、色のhexや透明度など、具体的な数値を把握した上でデザイン構成していくことができます。
さらに、画像のエクスポートまでもエンジニアが行います。 コマンドで一括エクスポートすることができ、そこに画像圧縮をかけてプロジェクトに取り込んでいます。 このように、エンジニアが画像のエクスポートを行うことで、毎回必要なときにデザイナーにお願いする必要が無く、スピード感を持って実装に取り掛かることができます。
また、今回のシークバープレビューの実装では、シークバーを動かしているときのプリビューの動きや、出現時のアニメーションなどが伴います。その為、ある程度手元で動くようになった段階で、プリビューの出現時のアニメーションに違和感がないか、プリビューの動きがユーザーにストレスを与えていないかなどデザイナーときちんとすり合わせて、最終確認をしてもらいました。
実装
ここでは、実装部分について紹介したいと思います。 AbemaTVではプロジェクトコードをGithubのプライベートリポジトリで管理しており、実装が終わるとAndroidチームではメンバーの誰かにプルリクを見てもらいます。 サイバーエージェントには、新卒に一人トレーナーがつく制度あるため、自分の場合そのトレーナーにプルリクをみてもらうことが多いです。 逆に僕も他の先輩方のプルリクを見ることもあり、新卒でも自分の意見を言ったり、提案をしたりしやすかったりするので、とてものびのびと開発をすることができています。
今回のシークバーの実装では、まずサーバーからプリビュー画像を取得する部分から実装しました。 プリビューは10秒間に一枚用意されていますが、毎回プリビュー画像を取得するのではなく、1枚の画像にプリビュー画像が横10枚×縦6枚の計60枚(600秒分)が合わさった一枚のアトラス画像として取得します。 つまり、55分番組なら10分*6の計6枚を取得します。
今回の実装では、以下の点を工夫しました。
- 端末の抽象解像度によって取得するプリビューの画像の大きさを変更する。(端末ごとに適切な大きさの画像を表示させるため)
- シークバーをユーザーが動かしたタイミングではなく、再生画面に入った時点でGlideにアトラス画像をキャッシュする。(ユーザーがシークバーを激しく動かし場合でも画像を滑らかに表示させるため)
- 万が一画像取得や、画像の切り取りに失敗した場合のエラーハンドリング。
- モデル内に仕様や画像処理などをカプセル化する。
実装に詰まったり、手法AとBどっちで実装した方がいいかなど、わからないことがあればすぐに先輩方に相談するようにしています。新しい切り口で実装が考えれたり、事前に疑問点を共有しておくことでプルリク時に実装の意図が伝わりやすかったりするためです。 その後、実装が終わるとGithub上でプルリクエストを出して、僕の場合はトレーナーにレビューしてもらいます。 毎回レビュー時には様々な気づきがあるのでとても勉強になります。 最後に絵文字を押してもらうとLGTMということになっています。今回の場合だとこんな絵文字をもらいました！
最後に
働いていて思うことはとてもみんな仲がいいです。 毎日androidのみんなでランチに行ったりしていて、とても居心地のいい環境です。 なので渋谷の美味しいランチのお店はたくさん教えてもらいました！
開発局全体や、開発ラインでの飲み会などもあったりして、Androidチーム外との交流も盛んです。
また、Androidチームの特徴として、現在、プロジェクトのkotlin化を進めています。 AbemaTVのAndroidチームにはkotlinを何年もやってましたというような人がいなかったので、各人で疑問点を出し合ったり、どういった構文で書くのがベストなのか、全員で意見を出し合いながら進めています。 自分自身もkotlinを本格的に書き始めたのは4ヶ月ほど前です。 また、CyberAgentには「FRESH!」など既にkotlin書かれているプロジェクトがいくつかあるため、kotlinに精通している社内の方々に意見をもらうこともたくさんありました。
これは様々な事業を展開しているCyberAgentの魅力でもあり、強みだと感じています。
これからもユーザーにAbemaTVの価値を届けていきたいです！