@nifty天気予報：フルリニューアルの挑戦 - NIFTY Tech Talk #22

イベント
Next.js/Go/GraphQLで生まれ変わった@nifty天気予報 開発のウラ側
https://nifty.connpass.com/event/328943/

登壇者
ニフティ株式会社
渡邊 大介

Transcript

1. Copyright © NIFTY Corporation All Rights Reserved.
 @nifty天気予報：フルリニューアルの挑戦 渡邊　大介 会員システムグループ 第一開発チーム
2. Copyright © NIFTY Corporation All Rights Reserved.
 渡邊　大介
 
 入社： 2019年4月
 
 担当業務： 自社WEBサービスの運用開発
 
 最近ハマっていること ： ドライブ、夜散歩
 自己紹介

3. Copyright © NIFTY Corporation All Rights Reserved.
 3
 フルリニューアルプロジェクトについて
4. Copyright © NIFTY Corporation All Rights Reserved.
 多くの天気に関するコンテンツを提供 • 今日明日の天気 • 3時間毎の天気 • 地震情報 • 台風情報 • 警報注意報 • 生活指数 など @nifty天気予報とは 

5. Copyright © NIFTY Corporation All Rights Reserved.
 NIFTY Serve NIFTY WEATHER INFO 1997年 リニューアル 2008年 ニフクラ移行 （現：FJcloud-V） 2013年 AWS移行 2020年 フルリニューアル 2024年 @nifty天気予報の歴史 

6. Copyright © NIFTY Corporation All Rights Reserved.
 フルリニューアルの背景 
 旧システムは運用コストの増大、ユーザー体験の劣化など多くの課題を抱えていた • 自社製CMSに依存した作りの ため、拡張が行えない • 更新作業が複雑なため、デー タ更新に時間がかかる • 天気情報反映にラグがある • 目的のページにたどり着けない • PCページで使える機能がスマホ ページにはない 運用コストの増加 ユーザー体験の低下
7. Copyright © NIFTY Corporation All Rights Reserved.
 フルリニューアルの目標とコンセプト 
 • 必要最低限の保守で安定した サービス運営をできるように する • 自社製CMSからの完全脱却 • 直感的に操作しやすいデザイン • PC,スマホで変わらない機能を提 供する • レスポンシブデザインの採用 運用保守の最適化 ユーザー体験の改善 • 近年の突発的な災害情報に対応 する • 重要視される情報をいち早く ユーザーに届ける仕組みの構築 災害・防災情報の強化
8. Copyright © NIFTY Corporation All Rights Reserved.
 移行戦略の概要 
 • 必要最低限の運用にするため、 AWSが提供するフルマネージド サービスを積極的に採用 • 一部旧システムへのアクセスがあるた め、新システムと並行稼働できる状態で の移行を行う サーバレスのフル活用 パラレル方式によるシステムリプレイス 旧システムは維持しつつ、0からの構築
9. Copyright © NIFTY Corporation All Rights Reserved.
 チーム体制と役割 
 • エンジニア：8人 ◦ サービス担当：2名 ◦ SRE：3名 ◦ OJT中の新人：2名 ◦ テックリード：1名 • 企画：1名 • デザイン：2名 • ユーザー分析 • 要件定義 • 画面設計 • インフラ設計 • システム設計 • データベース設計 • インフラ実装 • バックエンド実装 • フロントエンド実装 etc... チーム体制 エンジニアの役割 分析、デザイン領域からリリースまでのすべてにエンジニアが関わっている
10. Copyright © NIFTY Corporation All Rights Reserved.
 10
 採用したアーキテクチャと技術
11. Copyright © NIFTY Corporation All Rights Reserved.
 採用した技術 
 • アプリケーション、バッチはすべてコ ンテナで稼働 • 環境の一貫性を確保 • 迅速なデプロイメントとスケーリング コンテナ活用 GraphQLによる天気API Next.js＆TypeScript • 社内で初採用！ • 柔軟なデータ取得 • オーバーフェッチを削減 • 強力な型システム • SSRによるパフォーマンス向上 • 静的型付けによるバグの早期発見 Go言語によるバッチ処理 • 高速な実行処理 • 保守性の高さ • クリーンアーキテクチャベースの ディレクトリ構成
12. Copyright © NIFTY Corporation All Rights Reserved.
 12
 アーキテクチャ（アプリケーション） 
 • ECS（Fargate） • ECR • ALB • CloudFront インフラ ビルド＆デプロイ • AWSリソースはすべてTerraformで管理 • ecspressoをGitHub Actionsに組み込み、 ブランチ戦略に則って自動的にデプロイす るワークフローを構築
13. Copyright © NIFTY Corporation All Rights Reserved.
 13
 アーキテクチャ（GraphQL） 
 • AppSync • Aurora Serverless v2（PostgreSQL） インフラ デプロイ • Terraform サーバレスでGraphQLを使えるAppSyncを採用
14. Copyright © NIFTY Corporation All Rights Reserved.
 14
 アーキテクチャ（バッチ処理） 
 • Lambda • ECR • Step Functions • EventBridge • Secrets Manager • S3 • Aurora Serverless v2 インフラ デプロイ • AWSリソースはTerraform • バッチ本体は、Github Actions上で イメージにビルドし、ECRに自動的 にpushするワークフローを構築 • RIEを使ってローカルでも検証できる 環境を構築 フルマネージドサービスを活用し、安価かつ高速処理を実現
15. Copyright © NIFTY Corporation All Rights Reserved.
 15
 モニタリング 
 • ログ • アラート • モニタリングダッシュボード • SLO • X-Ray CloudWatch CloudWatch RUM • 社内初採用！ • ウェブアプリのパフォーマンス、利用状況監視 SREチームによって充実したモニタリング環境を実現 OpenTelemetry • 社内初採用！ • アプリケーションのオブザーバビリティを実 現するためのツール • トレースを収集し、X-Rayで可視化
16. Copyright © NIFTY Corporation All Rights Reserved.
 16
 デザインシステム 
 • デザインの一貫性が欠如し、各プロジェクトで個別にUIが 作成されていた • フルリニューアルのため、大量のアイコン、画面レイアウ トの管理に困っていた 課題 社内初となるデザインシステムを導入 • 今回は全社員がアクセスできるnotionでデザインシステム を作成 • データベースを活用し、ファイル管理とみやすさの両立を 実現 実現方法
17. Copyright © NIFTY Corporation All Rights Reserved.
 17
 サービス紹介
18. Copyright © NIFTY Corporation All Rights Reserved.
 18
 トップページ 
 シンプルなデザインに変更
19. Copyright © NIFTY Corporation All Rights Reserved.
 19
 MY天気
 お好きな地点を最大3つまで設定可能
20. Copyright © NIFTY Corporation All Rights Reserved.
 20
 警報注意報 
 全国地図からどの都道府県で災害が起きているか人目で理解できるように
21. Copyright © NIFTY Corporation All Rights Reserved.
 21
 行楽地天気 
 全国の行楽地天気を地名と画像で直感的に
22. Copyright © NIFTY Corporation All Rights Reserved.
 22
 フルリニューアル後の数値変化（※リリースして間もないためブレはあります） 
 離脱率 • 旧環境と比較して55％のコスト削減 インフラコスト • 旧環境と比較して約20%減少 地震情報表示 • 15分近くかかっていたデータ反映 を最短1分に短縮 天気情報 • 最大5分かかっていたデータ反映 を最短1分に短縮
23. Copyright © NIFTY Corporation All Rights Reserved.
 まとめ
 • 社内で事例のない技術や方法を取り入れながらフルリニューアルを実施 • 今後もより良いサービスにしていくため、機能を追加する予定
24. Copyright © NIFTY Corporation All Rights Reserved.