SwiftUIでビットコインの価格チャートを改善・再実装した話 / Improving and Re-implementing the Bitcoin Price Chart Using SwiftUI

メルコインiOSチームはメルカリのビットコイン取引機能の開発をしています。メルコインでは大部分をSwiftUIで実装していますが、ビットコイン価格チャートについてはライブラリを使ってUIKitで実装されていました。ですがライブラリの制約もあり、チームとして実現したい表現をすべて実現できていなかったため、最終的にSwiftUIで再実装し、改善サイクルも高速化することができました。
このセッションではSwiftUIでのチャートの実装や改善サイクルを高速化した話などを紹介します。

The Mercoin iOS Team works on development for Mercari’s bitcoin transaction feature. At Mercoin, we implement a large portion of our work using SwiftUI, but we implemented the bitcoin price chart in UIKit using a library. However, because there are limitations imposed on the library and because we were unable to create all of the expressions that we wanted to create as a team, in the end we reimplemented the feature using SwiftUI and sped up the improvement cycle.
In this session, we talk about a number of topics such as the implementation of the chart using SwiftUI and how we improved the cycle to make it high speed.

------
Merpay & Mercoin Tech Fest 2023は3日間のオンライン技術カンファレンスです。
IT企業で働くソフトウェアエンジニアおよびメルペイ・メルコインの技術スタックに興味がある方々を対象に2023年8月22日（火）、23日（水）、24日（木）の3日間、開催します。 Merpay & Mercoin Tech Fest は事業との関わりから技術への興味を深め、プロダクトやサービスを支えるエンジニアリングを知ることができるお祭りです。

今年のテーマは「Unleash Fintech」。 メルペイ・メルコインのこれまでの技術的な取り組みはもちろん、メルカリグループのFintech事業における新たな挑戦をお伝えします。 セッションでは事業を支える組織・技術・課題などへの試行錯誤やアプローチなど多面的にご紹介予定です。

メルペイ・メルコインが今後どのようにUnleash（解放）していくのか、ぜひ見に来てください。

■イベント関連情報
- 公式ウェブサイト：https://events.merpay.com/techfest-2023/
- 申し込みページ：https://mercari.connpass.com/event/286670/
- Twitterハッシュタグ： #MerpayMercoinTechFest
■リンク集
- メルカリ・メルペイイベント一覧：https://mercari.connpass.com/
- メルカリキャリアサイト：https://careers.mercari.com/
- メルカリエンジニアリングブログ：https://engineering.mercari.com/blog/
- メルカリエンジニア向けTwitterアカウント：https://twitter.com/mercaridevjp
- 株式会社メルペイ：https://jp.merpay.com/

Transcript

1. Session Title SwiftUIでビットコインの 価格チャートを改善・再実装した話 andooown Mercoin Client MobileApp
2. Yoshikazu Ando / @andooown 2019年から株式会社MIXIでウォレットサービスの iOSアプリの開発を担当。Apple Pay等のドメイン 特有の開発や、アプリ全体の設計など iOSアプリ開 発の幅広い分野を担う。2021年より現職でビットコ イン取引サービスの立ち上げに参画し、引き続き iOSアプリ開発者としてグループ内の連携を含めた 設計や開発を担当。 株式会社メルコイン
3. SwiftUIで ビットコインの価格チャートを 改善・再実装した話
4. メルカリのビットコイン • 3ヶ月強で50万人突破！ • メルカリアプリの1機能 ◦ SDKとして実装 ◦ マイページから利用 • SwiftUI ◦ GroundUp Appについて • FIDO ◦ 今日トークセッションがあります！
5. 価格チャート • トップ画面にある • BTC価格の推移を表示 ◦ 点の間を補間している • 一定間隔で更新 • 期間が変更できる
6. 価格チャート • タップできる ◦ 価格や時刻が表示される ◦ 右側の見た目が変わる ▪ 色 ▪ 塗りつぶし ◦ アニメーション ▪ 線の太さ ▪ 補間方法
7. 初期の実装 • danielgindi/Chartsを利用 ◦ 簡単にチャートを作成可能 ◦ Swift Charts: iOS 16~ 󰢃
8. 初期の実装 • danielgindi/Chartsを利用 ◦ UIKit製 ▪ UIViewRepresentableでラップ ◦ 価格表示部分はSwiftUI
9. 初期の実装の課題 • Chartsの制約によりムリヤリ感がある実装 ◦ 足りないUIGestureRecognizerを追加 ◦ タップされたときに左右で色を変える ▪ 2つのViewをCropしてZStackで重ねる • 後ほどRendererなどを自作
10. 初期の実装の課題 • 複雑なデータフロー ◦ StateはSwiftUI側 ◦ イベントはUIKit側から発生 ◦ 表示のためにUIKit側のイベントから座標をSwiftUI側でも保持 ◦ 同期がうまくいかないことによるバグ 😇 ▪ 指を離しているのに線が残る
11. 初期の実装の課題 • danielgindi/Charts ◦ メンテされてない ▪ バグ修正のPRが1年半放置されていたり • 今は新しいメジャーバージョンがでた
12. 初期の実装の課題 • 制約によってやりたいことができない ◦ Designer「こういうのどうでしょう？」 ◦ andooown「かなり無理しないと...」 ◦ Designer「...。」 • サービスのトップ画面はこだわりたい ◦ PM「チャートはサービスの顔」
13. 初期の実装の課題 • タップできる ◦ 価格や時刻が表示される ◦ 右側の見た目が変わる ▪ 色 ▪ 塗りつぶし ◦ アニメーション ❌ ▪ 線の太さ ❌ ▪ 補間方法 ❌
14. 初期の実装の課題 • チームで合意を取ってSwiftUIでフルスクラッチで実装することに ◦ チャートのSpecについては最低限のみ決めて、OSごとにでき る表現を突き詰める
15. SwiftUIでRewrite • 設計方針 ◦ 汎用な部分 ▪ 座標・数値計算 ◦ BTCチャートのドメイン部分 ▪ 補間・レイアウト・描画・グラデーション
16. SwiftUIでRewrite • 設計方針 ◦ View・Shapeを使ってSwiftUIでレイアウト ▪ 表現の幅を制限しないため • ↔ Swift ChartsのChartContent ◦ パラメータを注入できるように • 後ほど活きてくる
17. SwiftUIでRewrite 2週間ほどでPoCを作成 ✅
18. SwiftUIでRewrite • ViewBuilderをつかって通常の Viewと同じ書き方ができる
19. 点の情報とClosureを受け取る
20. Contextを渡してViewを作成
21. Contextはチャート作成に必要な情報を持つ
22. sizeはチャート部分の大きさ
23. sizeはModifierを使って取得
24. sizeはModifierを使って取得
25. MatrixTransformerは座標↔数値変換
26. あとはContextを使って実装
27. ここまではSwiftUIでRewriteしただけ
28. 改善フェーズ • 各種パラメータを変更できるようにしたデ モをチームに配布 ◦ 線の太さ・数値処理・補間方法・アニ メーションの長さ・etc • 言語化しにくい「やりたい表現」を共有でき るように • 最終的にはチームで画面を写しながらパ ラメータを決定
29. 改善フェーズ • SwiftUIの宣言的UI・Single Source of Truthが活きた ◦ 命令的なUIではパラメータが多いと適 切にViewを更新するのが難しい
30. 改善フェーズ • Stateに応じたアニメーションも簡単 ◦ 改善フェーズの中でアイデアベースで実装した
32. 改善フェーズを終えて • SwiftUIの特徴を活かし、チームでPDCAを回すことができた👏 ◦ 工数はかかるが、やはり共通の動くものを見ながらの意思決定 は迅速・認識のズレが少ない • SwiftUIの理解が深まった👍 ◦ 製品レベルで実装すると理解が早い ▪ レイアウト・座標の取り扱い ▪ アニメーション・Animatable ▪ Gesture
33. 改善フェーズを終えて • 一方で汎用な設計をしたものの、どこまで使えるかはわからない ◦ YAGNI ◦ danielgindi/Chartsにも言えるがUIコンポーネントの汎用化は難 しい ▪ 要求はサービスによって十人十色 • 製品のQualityのために、時間をとらせてくれたチームに感謝 󰢛󰢛󰢛
34. 今後は • パフォーマンスチューニング ◦ リリース時点で実機でカクつかないことは確認 ◦ 計算量など最適化の余地がある • 動くものを使った議論 ◦ チームではよく見る光景 ◦ 継続したい