Yahoo!天気アプリ 雨雲レーダー大幅アップデート 開発の取り組み #devsumi summer-B-7

209 Views

August 05, 21

スライド概要

Developers Summit 2021 Summerのスライドです。

profile-image

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

©2021 Yahoo Japan Corporation All rights reserved. Yahoo!天気アプリ 雨雲レーダー大幅アップデート 開発の取り組み ヤフー株式会社 大前 良介

2.

©2021 Yahoo Japan Corporation All rights reserved. 自己紹介 大前良介(OHMAE Ryosuke) n https://github.com/ohmae n Twitter: ryo̲mm2d n Qiita: ryo̲mm2d ヤフー株式会社 @大阪 n Androidアプリエンジニア n Yahoo!天気アプリ担当

3.

©2021 Yahoo Japan Corporation All rights reserved. Yahoo!天気アプリ (PR) ぜひインストールをお願いします! Android版 iOS版

4.

©2021 Yahoo Japan Corporation All rights reserved. 雨雲レーダーを大幅アップデート

5.

©2021 Yahoo Japan Corporation All rights reserved. 新旧比較 旧 新

6.

©2021 Yahoo Japan Corporation All rights reserved. 開発の経緯 スマホの大画面化・高性能化 n よりリッチな表現が可能に n 快適で使い心地の良いUI 知りたい情報をわかりやすく n どの地点にいつ、どのぐらいの雨が降るか n 計算によって情報を整理 n 必要な情報をわかりやすく便利に

7.

©2021 Yahoo Japan Corporation All rights reserved. 本日のお話 Androidアプリエンジニア視点での開発取り組み n 弊社のアプリ開発の現場の様子を知っていただく 出てこない話 n 具体的なソースコード n サーバーサイド n ビジネス的な話

8.

©2021 Yahoo Japan Corporation All rights reserved. 開発体制

9.

©2021 Yahoo Japan Corporation All rights reserved. 4つのアプリを開発 Yahoo!天気 Android Yahoo! JAPAN iOS iOS Android

10.

©2021 Yahoo Japan Corporation All rights reserved. チーム構成 Yahoo!天気 Yahoo! JAPAN Android Android iOS iOS

11.

©2021 Yahoo Japan Corporation All rights reserved. チーム構成 Yahoo!天気 Yahoo! JAPAN Android Android iOS iOS

12.

©2021 Yahoo Japan Corporation All rights reserved. 開発体制 4つのアプリを開発 n 1アプリあたりのエンジニア数で見ると少人数 テレワークでの開発 n 全員が直接顔をあわせない環境 n Slack / Zoom / etcでのコミュニケーション

13.

©2021 Yahoo Japan Corporation All rights reserved. 直面した問題

14.

©2021 Yahoo Japan Corporation All rights reserved. 多機能な雨雲レーダー SNSシェア 凡例 モード切替 Map表示 現在地 タイムシーク Map操作 ズーム 各APIアクセス

15.

©2021 Yahoo Japan Corporation All rights reserved. 多機能な雨雲レーダー 様々なモード

16.

©2021 Yahoo Japan Corporation All rights reserved. FatActivity

17.

©2021 Yahoo Japan Corporation All rights reserved. FatActivty ほぼ全ての機能を一つのクラスで実装 n 神のオブジェクト n 巨大すぎて機能の全容が見えない 機能の密結合 n 各機能が複雑に絡み合い、かんたんには引き剥がせない

18.

©2021 Yahoo Japan Corporation All rights reserved. 継ぎ足し開発は限界

19.

©2021 Yahoo Japan Corporation All rights reserved. レガシーコードとの戦い 秘伝のタレ n 継ぎ足し継ぎ足し受け継がれてきた…… n ソフトウェア業界ではネガティブなワード 戦わなきゃ n 最適な設計は時代背景や機能の規模などによって変わってくる n 時代や機能の規模にあわせて変化が必要

20.

©2021 Yahoo Japan Corporation All rights reserved. リファクタリングすべきは今 先延ばしにして良いことはまず無い n 開発スピードの低下、バグの温床 n 時間が無いので、後回しで……破滅フラグ n リファクタリングの必要性は共通認識、評価面でも後押し 大規模改修、チャンスは今しかない! n 一時的にスケジュールを遅延させてでもリファクタリング!

21.

©2021 Yahoo Japan Corporation All rights reserved. 開発スケジュールとの戦い 完璧を目指す必要はない n 理想を求めすぎるとコストが無限に跳ね上げる n 費用対効果を考え、適切な妥協点を設定 方針 n 機能ごとにいくつかの単位に分割する n リアクティブプログラミングの導入 n 雨雲レーダーの範囲に限定

22.

©2021 Yahoo Japan Corporation All rights reserved. 実際に進めてみる

23.

©2021 Yahoo Japan Corporation All rights reserved. 機能の分割 n Toolbar n Map n UI n モード n Web n ボトムシート n グラフ n シークバーetc

24.

©2021 Yahoo Japan Corporation All rights reserved. 機能の分割 一つ一つの機能は独立している n 想像していたよりは容易に分割できた n 継ぎ足しの開発でも、改善に向けて動いていた n 案ずるより産むが易し n 大枠で分割すると、見通しが良くなり、作業効率UP

25.

©2021 Yahoo Japan Corporation All rights reserved. リアクティブプログラミングの導入 コールバック モード変更ボタンが押された →レイヤーの情報を変更する →タイトルを変更する →ボタンの色を変える →etc リアクティブ モード変更ボタンが押された →モード変更 レイヤー ・モード変化で更新 タイトル ・モード変化で更新 ボタン ・モード変化で更新

26.

©2021 Yahoo Japan Corporation All rights reserved. リアクティブプログラミングの導入 ViewModel + LiveData n ノウハウの蓄積もあり程よく枯れたモダンな技術 ViewModel n ライフサイクルを意識したUI関連データ管理クラス LiveData n ライフサイクルを意識したReactive Streams 機能ごとに分割され見通しの良いコードへ

27.

©2021 Yahoo Japan Corporation All rights reserved. リファクタリングの結果 開発速度のブースト n 新機能の実装、ブラッシュアップに集中 スケジュール n 約1週間はリファクタリングのみ n 枠組みとざっくりとした構造づくり n 遅延分は開発速度のブーストで返済 n 全体的なスケジュールのマイナスインパクトなし

28.

©2021 Yahoo Japan Corporation All rights reserved. 新機能の開発

29.

©2021 Yahoo Japan Corporation All rights reserved. 作ってみたから始まるフィードバック 百聞は一見にしかず、百見は一触にしかず n 触ってみて初めて分かることも多い n まずは一部でも動くものを作って関係者で触ってみる Slackで飛び交う意見 n パッケージの共有 n スクリーンショットを貼り付けてのフィードバック n 完全オンラインでも支障なく

30.

©2021 Yahoo Japan Corporation All rights reserved. 触ってみてわかること グラフ部分はどう操作をすべき? n シートの移動? n シークバー操作? どっちもできなければ n 縦方向ならシートの移動 n 横方向ならシークバー操作 n 2つの操作は排他

31.

©2021 Yahoo Japan Corporation All rights reserved. 触ってみてわかること 操作中に指を離したら? n 座標の近い位置に移動? n 操作方向に移動? n サイズは3種類、中央に戻せるか? 加速度を加味した慣性操作

32.

©2021 Yahoo Japan Corporation All rights reserved. 4つのアプリを作るということ

33.

©2021 Yahoo Japan Corporation All rights reserved. 良い競争関係 Yahoo!天気 Yahoo! JAPAN Android Android iOS iOS 完全に同じではなく、それぞれがより良いものを目指す n アプリごとに目的が違う n OSごとに適切な表現方法が違う

34.

©2021 Yahoo Japan Corporation All rights reserved. 相互に刺激し合う開発 お?これいいね。うちもやろう n 相互にレビューしてフィードバック n おかしなところは指摘し、良い部分は取り込む Githubのリポジトリは相互に参照可能 n こんな実装方法があったのか n こうやって計算すればいいのだな

35.

©2021 Yahoo Japan Corporation All rights reserved. こだわりの機能

36.

©2021 Yahoo Japan Corporation All rights reserved. それぞれの状態をどうつなぐか

37.

©2021 Yahoo Japan Corporation All rights reserved. こだわりのアニメーション

38.

©2021 Yahoo Japan Corporation All rights reserved. こだわりのアニメーション

39.

©2021 Yahoo Japan Corporation All rights reserved. こだわりのアニメーション 使いやすい 使うのが心地よい 機能

40.

©2021 Yahoo Japan Corporation All rights reserved. 開発を通して

41.

©2021 Yahoo Japan Corporation All rights reserved. 2種類のフィードバック Slackでのフィードバック募集 n 業務の合間にそれぞれの環境でのフィードバック n たくさんの改善案 Zoomで集中バグバッシュ n 一つ見つかるとそれをきっかけとして別のバグも見つかる n 次々見つかるバグ! n 一気に完成度をアップ!

42.

©2021 Yahoo Japan Corporation All rights reserved. 今後の展望

43.

©2021 Yahoo Japan Corporation All rights reserved. 今後の展望 表現の磨き込み n よりわかりやすく、認識の齟齬のないものへ パフォーマンス改善 n 低スペックの端末でも快適に利用できるように わかりやすくより便利なアプリを目指して n まだまだ改善の余地はある

44.

©2021 Yahoo Japan Corporation All rights reserved. ご清聴ありがとうございました