Slide 1

Slide 1 text

May 23, 2024 TechBrew in 東京 ~モバイルアプリの技術的負債に向き合う~ Safie Viewer for iOS の 技術的負債との付き合い方

Slide 2

Slide 2 text

© Safie Inc.| 本日の発表について ● iOS アプリに関する内容です ● 直近 1 年ほどの話がメインとなります ● こんなことを考えている、実施しているといった紹介になります ● 技術面での深掘りはしません 2

Slide 3

Slide 3 text

© Safie Inc.| 各種紹介 3

Slide 4

Slide 4 text

© Safie Inc.| 自己紹介 鞆 翔太郎 (とも しょうたろう) ● 2023 年 3 月 セーフィー入社 ● iOS テックリード ● 〜前職までモバイル開発メイン ● 最近は WebRTC と戦っています 4 @hugehoge @hugehoge

Slide 5

Slide 5 text

© Safie Inc.| 会社紹介 セーフィー株式会社 (Safie Inc.) ● 事業内容 ○ クラウド録画型映像プラットフォーム「Safie」の開発・運営および関連 サービスの提供 ● 創立年月 ○ 2014 年 10 月 23 日 ● 所在地 ○ 東京都品川区西品川一丁目1-1 住友不動産大崎ガーデンタワー 5

Slide 6

Slide 6 text

© Safie Inc.| Safie のサービス/プロダクト紹介 6

Slide 7

Slide 7 text

© Safie Inc.| Safie のサービス/プロダクト紹介 7

Slide 8

Slide 8 text

© Safie Inc.| Safie Viewer for iOS の紹介 Safie Viewer for iOS ● DAU 25,000前後 ● ストア評価 4.2 ● iOS 15.0+ ○ 直近の 3 バージョンサポート ● 日本語/英語/タイ語/ベトナム語 対応 8

Slide 9

Slide 9 text

© Safie Inc.| Safie Viewer for iOS の歴史/開発体制 ● 2015 年 4 月にストア公開 ● 直近のメジャーアップデートは 2023 年 4 月の ver4.0.0 ○ 動画再生画面のリニューアルがメイン ● 現在の開発体制 ○ 2 週間のスプリント期間 ○ 月に 1 回の頻度で定期リリース ○ iOS 開発チームとしては直接開発に携わるエンジニアが 3 〜 4 名 ■ 最古参でも 2.5 年ほど 9

Slide 10

Slide 10 text

© Safie Inc.| 技術的負債解消への取り組み 10

Slide 11

Slide 11 text

© Safie Inc.| 技術的負債解消への取り組み ● Safie Viewer for iOS は辛いところが多い ○ 10 年近 続いているアプリ × メンバーの社歴が短い ○ 開発者の入れ替わり等も激しい時期があった ● 特に問題に感じるところ ○ ソースコードの可読性 ○ 採用技術のレガシー化 ○ アーキテクチャの薄さ ● 技術的負債が溜まっている状態ではある 11

Slide 12

Slide 12 text

© Safie Inc.| 技術的負債解消への取り組み 最終的にはリアーキテクチャ等で抜本的に改善したい! 12

Slide 13

Slide 13 text

© Safie Inc.| 技術的負債解消への取り組み ● 一方、現状が致命的かと言われるとそうでもない ○ 具体的に大きな問題として顕在化していない ○ 開発速度が落ちている部分はあるが、全社的なスケジュールに影響はない ○ 許容できる範囲 ● 直近 1 年においても比較的活発にリリースはできている 13

Slide 14

Slide 14 text

© Safie Inc.| 直近 1 年での機能リリース ● 動画再生画面のリニューアル ● ストアレビュー依頼ダイアログの表示 ● 英語タイ語ベトナム語対応 ● 動画再生画面のチュートリアル ● iPad の縦画面対応 ● ハイブリッドプラン対応 (新しい WebRTC での接続方式) ● PTZ 操作画面の改善 ● マップビューアー ● 半天球カメラの 3D デワープ対応 ● バックエンドのシステム改修への追従 etc... 14

Slide 15

Slide 15 text

© Safie Inc.| 技術的負債解消への取り組み 「◯ヶ月開発を止めてリファクタリングに専念させて ださい」 15

Slide 16

Slide 16 text

© Safie Inc.| 技術的負債解消への取り組み 「◯ヶ月開発を止めてリファクタリングに専念させて ださい」         とまでは言わな ても良さそう 16

Slide 17

Slide 17 text

© Safie Inc.| 技術的負債解消への取り組み ではどうするか? ● す にできる漸進的な改善 ● 腰を据えての大規模リファクタリング/リアーキテクチャの検討 に分 て考える 17

Slide 18

Slide 18 text

© Safie Inc.| 技術的負債解消への取り組み ● す にできる漸進的な改善 ○ 技術的負債の増加を抑える ○ 機能開発と並行して実施する ● 腰を据えての大規模リファクタリング/リアーキテクチャの検討 ○ 技術的負債の大幅な返済を狙う ○ 短期間での実施は難しい ○ 最適解、ゴールについても不透明な部分がある ○ ひとまずは具体的に「検討」 18

Slide 19

Slide 19 text

© Safie Inc.| すぐにできる漸進的な改善 19

Slide 20

Slide 20 text

© Safie Inc.| Xcode / iOS SDK の早期アップデート ● 毎年 9 月に Xcode のメジャーアップデート ● AppStore の制限によって、翌年 4 月までのアップデート対応が必須 ● Safie Viewer for iOS では... ○ Xcode 13 → 14 ■ 2023 年 4 月に対応版アプリをリリース ■ リリースまで約 7 ヶ月 ○ Xcode 14 → 15 ■ 2023 年 11 月に対応版アプリをリリース ■ リリースまで約 2 ヶ月 20

Slide 21

Slide 21 text

© Safie Inc.| Xcode / iOS SDK の早期アップデート ● なぜ早期にアップデートしたいのか ○ Swift バージョン更新、新 API の登場で従来のコードが古 なる ● 具体例 ○ ViewBuilder.buildBlock(_:) ■ Swift UI での子 View を並べる処理 ■ Xcode 15.0 (Swift 5.9) にて 10 個までしか並べられない制限が消えた ○ if 式/switch 式 ■ Swift 5.9 にて if/switch を式として扱えるようになった ■ 条件に応じて初期値が変わる場合の変数宣言がよりリーダブルに 21

Slide 22

Slide 22 text

© Safie Inc.| Xcode / iOS SDK の早期アップデート 22 新 Xcode 旧 Xcode 9月 4月 新 Xcode 旧 Xcode 約半年

Slide 23

Slide 23 text

© Safie Inc.| Danger による自動レビュー ● Safie Viewer for iOS のソースコードは可読性が低い ○ 規律のないコードスタイル ○ 1 行に際限な 詰め込まれる文字 ○ 放置されるデッドコード ○ etc... ● SwiftLint を導入しているが、あまり効果的ではなかった ○ ローカルでの Warning 表示 ○ 開発者が気づかない場合、そのままメインブランチに取り込まれてしまう 23

Slide 24

Slide 24 text

© Safie Inc.| Danger による自動レビュー ● Danger の導入 ○ CI プロセスへの組み込みを想定 されたタスクランナー ○ GitHub と連携可能 ● Danger による自動レビュー ○ danger-swiftlint プラグインを利用 ○ SwiftLint の Warning をインラ インでコメント 24 https://danger.systems/ruby/

Slide 25

Slide 25 text

© Safie Inc.| Danger による自動レビュー 25

Slide 26

Slide 26 text

© Safie Inc.| 大規模リファクタリング/ リアーキテクチャの検討 27

Slide 27

Slide 27 text

© Safie Inc.| 大規模リファクタリング/リアーキテクチャの検討 ● 現在の Safie Viewer for iOS の作りは MVC / MVP ○ 古 から存在する画面では ViewController + Model ○ 1 年ほど前に ViewModel を導入 ■ 実態としては Presenter に近い ■ ViewModel の変更に対して View を更新する処理を手続き的に記述している ● 非同期処理に関してもクロージャベースでの実装 ○ ネストが深 、実行スレッドの制御に難あり ○ completion handler の呼び出し漏れ等も発生 ● レイアウトは UIKit ベース 28

Slide 28

Slide 28 text

© Safie Inc.| 大規模リファクタリング/リアーキテクチャの検討 ● この状態から大規模なリファクタリング/リアーキテクチャを実施する のはリスキー ○ 対象となるコードベースの量 ○ そもそもどういったアーキテクチャを選定すべきか ○ チームの新アーキテクチャの習熟 ● 新規の機能開発に合わせてこれらを進めてい ○ 機能開発タイミングでリアーキテクチャで利用できそうな要素技術を採 用、評価してい ○ チームとしての習熟度を高める 29

Slide 29

Slide 29 text

© Safie Inc.| 言語設定画面の作成 ● 簡単な画面だが最低限の要素が 詰まっている ○ リスト表示 ○ API を利用してのデータ取得と 更新 ○ エラーハンドリング ● 新しい技術を採用してもリスク が少な 評価もしやすい 30

Slide 30

Slide 30 text

© Safie Inc.| 言語設定画面の作成 ● 既存の UIKit ベースのナビゲーションは維持 ● 以下の要素技術を採用、検証 ○ Swift UI による画面レイアウト ○ リアクティブな処理が可能な ViewModel ○ API 呼び出しについて Swift Concurrency 化 31

Slide 31

Slide 31 text

© Safie Inc.| 言語設定画面の作成 32

Slide 32

Slide 32 text

© Safie Inc.| 大規模リファクタリング/リアーキテクチャの検討 ● まずは手札を揃える ● 具体的なスケジュールも検討する必要はある ● ゲームチェンジャーとなりそうな要素技術 ○ Observation ■ iOS 17.0+ ■ 直近 3 バージョンサポートとすると、 iOS 19 リリースで本格的に利用できる ○ Typed throws ■ Swift 6.0 ? ● 来年あたりが勝負となりそう 33

Slide 33

Slide 33 text

© Safie Inc.| まとめ ● す にできる漸進的な改善 ● 腰を据えての大規模リファクタリング/リアーキテクチャの検討 の 2 パターンで技術的負債の解消に向 て動いてます! 34

Slide 34

Slide 34 text

セーフィーは日本中、世界中のカメラの映像をクラウド化し 
 自分のため、社会のために誰もが活用できる映像プラットフォームを提供します。