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

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

©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!天気アプリ担当

• https://github.com/ohmae

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

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

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

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

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

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

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

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

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

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

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

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

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

©2021 Yahoo Japan Corporation All rights reserved. FatActivity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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