Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UI設計の共通化で機能差異を埋めるモバイルアプリ開発

CyberAgent
December 15, 2021

 UI設計の共通化で機能差異を埋めるモバイルアプリ開発

ABEMAではAndroid・iOSで同様の機能をモバイルアプリとしてそれぞれで提供しています。

以前はそれぞれでUI設計が異なっており、同様の機能を提供する際に開発期間が乖離することがあり機能差異が生まれやすい状況でした。

これまでは提供時期がずれることを許容してサービス開発を進めていましたが、UI/UX刷新の大規模なプロジェクトを進めるにあたって、AndroidとiOSで大きく提供時期が異なる見積もりになってしまい、そのスケジュールで進めるとコンテンツ訴求などが並行運用しなければならず事業的に許容できないものでした。

そのため、このUI/UX刷新のプロジェクトの中で、このプロジェクトのリリース後でもAndroid・iOSの機能差異が発生しづらい開発基盤を確立するという目標を掲げました。

このセッションでは、Android・iOSそれぞれにおける機能差異に繋がる課題に対してどのような解決を図ったか、またなぜその解決策を取ったのかを将来の展望を交えてご紹介します。

https://developer.abema.io/2021/sessions/rcpdBajCyK/?utm_medium=social&utm_source=slideshare

CyberAgent

December 15, 2021
Tweet

More Decks by CyberAgent

Other Decks in Technology

Transcript

  1. 井原 岳志 • 2018年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • iOSチームのテックリード

    木永 風児 • 2020年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • Androidチームのテックリード
  2. 井原 岳志 • 2018年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • iOSチームのテックリード

    木永 風児 • 2020年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • Androidチームのテックリード
  3. たくさんの施策が同時にリリース • テレビ機能刷新 • テレビプレビュートリミング • ボトムナビゲーション対応 • 特集エリア •

    起動時表示物整理 • 作品プレビュー • チャンネル並べ替え • 1歳刻みのデモグラアンケート • 新聞型番組表 • ホーム最適化画面 • 複数選択ジャンルアンケート • ホームチュートリアル • ランディングチャンネル • Welcome画面 • マイページ画面の導線変更 • 視聴形態ラベル刷新 • タブレット最適化 • プレミアムタブ • ジャンル/ストアトップリデザイン • SLI/SLO計測 • ...
  4. ABEMAにおけるモバイルアプリ • Android / iOSアプリを提供 ◦ 同一なデザインや機能を提供 • 開発言語 ◦

    Android) Kotlin ◦ iOS) Swift • 開発体制 ◦ 2016年) Android / iOSチーム ◦ 2019年) Nativeチームに統合
  5. モバイルアプリの機能差異 • 大小関わらず機能差異がいくつか存在 ◦ タブレットデザインの対応可否 ◦ キャスト機能の対応有無 ◦ プレイヤー再生画面のスワイプアクションの有無 ◦

    参照するデータ元の差異 • 機能差異を埋める取り組み ◦ 各エンジニアのオーナーシップ ◦ 改善Week ※現在は廃止 サブ スク 登録 コイ ン 購入 PPV TVO D 投げ 銭 ブラ ンド サー ベイ スポ ン サー ド 広告 Ch 作品 プレ ビュ ー 購 入 視 聴 マルチ アング ル Mobile App iPhone/ iPad ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ ◯ Android ◯ ◯ ◯ ◯ ◯ ◯ ◯ ☓ ☓ ◯ 施策におけるモバイルアプリ間差異
  6. 共通の改善事例④ Imp発火条件の共通化 • ユーザーが特定の画面に遷移したと判定する条件を再定義 ◦ 画面回転やバックフォア、スリープ状態、画面遷移形式などユーザー操作観点で整理 ◦ Android / iOSのライフサイクル挙動の差異を考慮に含め、実装に落とし込む

    • ユーザーが特定のビューやモジュールを見たと判定する条件を再定義 ◦ Android / iOSで発火・再発火の条件を揃える ◦ 画面固有の対応パターンを極力作らない汎用的なポリシーにする
  7. iOSの改善事例② ミニアプリ • 新設されるホーム画面をミニアプリ化して単体でのアプリ起動を実現 ◦ デザインやアニメーションの検証を高速化 ◦ 本体側にgit submoduleでコード注入して組み込んでビルド可能 ◦

    クラス名やView階層をNativeチーム・デザイナーで議論 • リリース時にはミニアプリ化を止めて本体側に完全移行 ◦ 現状のアーキテクチャでは優先順位が低いため
  8. 井原 岳志 • 2018年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • iOSチームのテックリード

    木永 風児 • 2020年に株式会社サイバーエージェント中途入社 • 株式会社AbemaTV Native Team所属 • Androidチームのテックリード
  9. まとめ • 今後の機能差異を埋める開発フロー・仕組みを検証・導入できた ◦ UIコンポーネントの見直し ◦ 起動シーケンスの見直し ◦ ログ定義 ◦

    ProtopieのInteraction Recipesを活用したアニメーション実装 ◦ 開発時のミニアプリ活用 ◦ NavigationComponent 🤝 SingleActivity • 将来の展望 ◦ マルチプラットフォームの推進 ◦ 宣言的UI化 (SwiftUI / Jetpackcompose)