SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

【デブサミ2021夏】セッションレポート(AD)

Yahoo!天気アプリ「雨雲レーダー」が大幅アップデート! 完全リモートで取り組んだ開発の舞台裏【デブサミ2021夏】

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

 ヤフーは、2021年5月に「Yahoo! JAPAN」アプリと「Yahoo!天気」アプリにおいて、雨雲レーダーをいつ、どのぐらいの雨が降るのかをわかりやすく表示する大幅アップデートを行った。レガシーコードのリファクタリング、新機能の作り込み、ブラッシュアップ、バグバッシュを、リモートワークという環境下でどう実現させたのか。ヤフーのAndroidアプリの開発を担当する大前良介氏がその取り組みを紹介した。

  • X ポスト
  • このエントリーをはてなブックマークに追加

ヤフー株式会社 メディア統括本部 メディア開発本部 大前良介氏
ヤフー株式会社 メディア統括本部 メディア開発本部 大前良介氏

どの地点にいつ、どのくらいの雨が降るのか、わかりやすくアップデート

 今回大幅アップデートを行った開発経緯は、スマホの大画面化や高性能化でよりリッチな表現が可能となり、快適で使い心地のいいUI表現が可能になってきたことだと大前氏は語る。

 雨雲の情報をマップ上に表示する雨雲レーダーの機能は従来もあったものだが、これまでは雨雲がどこにあるかを地図上に表示し、それをユーザーに読み取ってもらう必要があった。それらの情報を計算によって整理。どの地点にいつ、どのくらいの雨が降るのか、必要な情報をわかりやすく伝えることを心がけたという。

 「1mmの雨が降りますと言われても、具体的にどのぐらいの雨なのかわかりにくい。そこで、『ポツポツ』や『ザーザー』、『しばらく雨が続きます』というように、いつまで雨が続くのかの表現や雨量変化のグラフを表示し、ひと目でわかるようなUIにしました」

雨雲レーダーの新旧比較
雨雲レーダーの新旧比較

リファクタリングすべきは今! リアクティブプログラミングを導入

 この雨雲レーダーはもともと十分に多機能な状態で、凡例表示やモード切り替えボタン、雨雲を表示するマップ、タイムシーク、SNSシェア、APIアクセス、さらに雨雲や雷、雪、台風の状況を表示するレーダーなど、さまざまなモードを持っていた。ほぼ全ての機能が一つのクラスで実装され、機能の全容が見えない巨大オブジェクト状態を、大前氏は「FatActivity」アンチパターンにおける神のオブジェクトと表現した。

 一つのクラスにまとまっているため、機能の密結合が発生する。各機能が複雑に絡み合って、簡単にはがせない。継ぎ足し開発の限界が来ていた。だが大前氏は、このような設計が必ずしも悪かったとは言えないという。

 「最適な設計とは時代背景や、機能の規模によって変わってくるもの。その時代や機能の規模に合わせて、リファクタリングをする必要があります。先延ばしにしてもレガシー構造に引っ張られるだけなので、一時的にスケジュールを遅延させてでも、リファクタリングすべきは今だと決断しました」

 完璧を目指しすぎるとコストは無限に跳ね上がってしまう。大前氏は費用対効果を考え、適切な妥協点を設定することにした。その方針は以下3つとした。

  • 機能ごとにいくつかの単位に分割する
  • リアクティブプログラミングの導入
  • 雨雲レーダーの範囲に限定する

 実際に進めてみると、想像していたよりも容易に分割できた。これは機能的に独立していることに加え、これまでも改善に向けて努力してきた背景があったのではないかと大前氏は語る。分割することで見通しが良くなり、作業効率がアップした。案ずるより産むが易しと、やってよかったと振り返る。

 リアクティブプログラミングはネットワーク周りでは使っていたが、今回は複雑になってしまったUI部分にも導入することにした。コールバックの制御では、モード変更ボタンが押されたらどんな処理を行うかをプログラミングしていく。機能があちこちに分散するという弊害もあるため、モード変更ボタンが押されたときのイベント発行と各モジュールが自律的に動くようにプログラミングすることで、処理がまとまり、見通しがしやすい形でリファクタリングを行った。

 ライブラリはViewModelとLiveDataを採用。ほどよくこなれたモダンな技術で使いやすかったという。最初の1週間はリファクタリングに時間を割いたが、その遅延分は開発ブーストで返済。リファクタリングの結果、レガシーコードに足を引っ張られることなく、新機能の実装やブラッシュアップに集中して時間を使うことができた。

新しい雨雲レーダーの開発にはリアクティブプログラミングを導入
新しい雨雲レーダーの開発にはリアクティブプログラミングを導入

次のページ
新機能は「作ってみたから始まるフィードバック」で開発

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
【デブサミ2021夏】セッションレポート連載記事一覧

もっと読む

この記事の著者

馬場 美由紀(ババ ミユキ)

 エンジニアとテクノロジーが好きな編集・ライター。エンジニア向けキャリアサイト「Tech総研」「CodeIQ MAGAZINE」、Web技術者向けの情報メディア「HTML5 Experts.jp」などでライティング、コンテンツディレクション、イベント企画などを行う。HTML5 開発者コミュニティ「h...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/14683 2021/09/22 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング