Tweet
Tweet

Slide 1

Slide 1 text

Session Title SwiftUIでビットコインの 価格チャートを改善・再実装した話 andooown Mercoin Client MobileApp

Slide 2

Slide 2 text

Yoshikazu Ando / @andooown 2019年から株式会社MIXIでウォレットサービスの iOSアプリの開発を担当。Apple Pay等のドメイン 特有の開発や、アプリ全体の設計など iOSアプリ開 発の幅広い分野を担う。2021年より現職でビットコ イン取引サービスの立ち上げに参画し、引き続き iOSアプリ開発者としてグループ内の連携を含めた 設計や開発を担当。 株式会社メルコイン

Slide 3

Slide 3 text

SwiftUIで ビットコインの価格チャートを 改善・再実装した話

Slide 4

Slide 4 text

メルカリのビットコイン ● 3ヶ月強で50万人突破！ ● メルカリアプリの1機能 ○ SDKとして実装 ○ マイページから利用 ● SwiftUI ○ GroundUp Appについて ● FIDO ○ 今日トークセッションがあります！

Slide 5

Slide 5 text

価格チャート ● トップ画面にある ● BTC価格の推移を表示 ○ 点の間を補間している ● 一定間隔で更新 ● 期間が変更できる

Slide 6

Slide 6 text

価格チャート ● タップできる ○ 価格や時刻が表示される ○ 右側の見た目が変わる ■ 色 ■ 塗りつぶし ○ アニメーション ■ 線の太さ ■ 補間方法

Slide 7

Slide 7 text

初期の実装 ● danielgindi/Chartsを利用 ○ 簡単にチャートを作成可能 ○ Swift Charts: iOS 16~ 󰢃

Slide 8

Slide 8 text

初期の実装 ● danielgindi/Chartsを利用 ○ UIKit製 ■ UIViewRepresentableでラップ ○ 価格表示部分はSwiftUI

Slide 9

Slide 9 text

初期の実装の課題 ● Chartsの制約によりムリヤリ感がある実装 ○ 足りないUIGestureRecognizerを追加 ○ タップされたときに左右で色を変える ■ 2つのViewをCropしてZStackで重ねる ● 後ほどRendererなどを自作

Slide 10

Slide 10 text

初期の実装の課題 ● 複雑なデータフロー ○ StateはSwiftUI側 ○ イベントはUIKit側から発生 ○ 表示のためにUIKit側のイベントから座標をSwiftUI側でも保持 ○ 同期がうまくいかないことによるバグ 😇 ■ 指を離しているのに線が残る

Slide 11

Slide 11 text

初期の実装の課題 ● danielgindi/Charts ○ メンテされてない ■ バグ修正のPRが1年半放置されていたり ● 今は新しいメジャーバージョンがでた

Slide 12

Slide 12 text

初期の実装の課題 ● 制約によってやりたいことができない ○ Designer「こういうのどうでしょう？」 ○ andooown「かなり無理しないと...」 ○ Designer「...。」 ● サービスのトップ画面はこだわりたい ○ PM「チャートはサービスの顔」

Slide 13

Slide 13 text

初期の実装の課題 ● タップできる ○ 価格や時刻が表示される ○ 右側の見た目が変わる ■ 色 ■ 塗りつぶし ○ アニメーション ❌ ■ 線の太さ ❌ ■ 補間方法 ❌

Slide 14

Slide 14 text

初期の実装の課題 ● チームで合意を取ってSwiftUIでフルスクラッチで実装することに ○ チャートのSpecについては最低限のみ決めて、OSごとにでき る表現を突き詰める

Slide 15

Slide 15 text

SwiftUIでRewrite ● 設計方針 ○ 汎用な部分 ■ 座標・数値計算 ○ BTCチャートのドメイン部分 ■ 補間・レイアウト・描画・グラデーション

Slide 16

Slide 16 text

SwiftUIでRewrite ● 設計方針 ○ View・Shapeを使ってSwiftUIでレイアウト ■ 表現の幅を制限しないため ● ↔ Swift ChartsのChartContent ○ パラメータを注入できるように ● 後ほど活きてくる

Slide 17

Slide 17 text

SwiftUIでRewrite 2週間ほどでPoCを作成 ✅

Slide 18

Slide 18 text

SwiftUIでRewrite ● ViewBuilderをつかって通常の Viewと同じ書き方ができる

Slide 19

Slide 19 text

点の情報とClosureを受け取る

Slide 20

Slide 20 text

Contextを渡してViewを作成

Slide 21

Slide 21 text

Contextはチャート作成に必要な情報を持つ

Slide 22

Slide 22 text

sizeはチャート部分の大きさ

Slide 23

Slide 23 text

sizeはModifierを使って取得

Slide 24

Slide 24 text

sizeはModifierを使って取得

Slide 25

Slide 25 text

MatrixTransformerは座標↔数値変換

Slide 26

Slide 26 text

あとはContextを使って実装

Slide 27

Slide 27 text

ここまではSwiftUIでRewriteしただけ

Slide 28

Slide 28 text

改善フェーズ ● 各種パラメータを変更できるようにしたデ モをチームに配布 ○ 線の太さ・数値処理・補間方法・アニ メーションの長さ・etc ● 言語化しにくい「やりたい表現」を共有でき るように ● 最終的にはチームで画面を写しながらパ ラメータを決定

Slide 29

Slide 29 text

改善フェーズ ● SwiftUIの宣言的UI・Single Source of Truthが活きた ○ 命令的なUIではパラメータが多いと適 切にViewを更新するのが難しい

Slide 30

Slide 30 text

改善フェーズ ● Stateに応じたアニメーションも簡単 ○ 改善フェーズの中でアイデアベースで実装した

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

改善フェーズを終えて ● SwiftUIの特徴を活かし、チームでPDCAを回すことができた👏 ○ 工数はかかるが、やはり共通の動くものを見ながらの意思決定 は迅速・認識のズレが少ない ● SwiftUIの理解が深まった👍 ○ 製品レベルで実装すると理解が早い ■ レイアウト・座標の取り扱い ■ アニメーション・Animatable ■ Gesture

Slide 33

Slide 33 text

改善フェーズを終えて ● 一方で汎用な設計をしたものの、どこまで使えるかはわからない ○ YAGNI ○ danielgindi/Chartsにも言えるがUIコンポーネントの汎用化は難 しい ■ 要求はサービスによって十人十色 ● 製品のQualityのために、時間をとらせてくれたチームに感謝 󰢛󰢛󰢛

Slide 34

Slide 34 text

今後は ● パフォーマンスチューニング ○ リリース時点で実機でカクつかないことは確認 ○ 計算量など最適化の余地がある ● 動くものを使った議論 ○ チームではよく見る光景 ○ 継続したい

Slide 35

Slide 35 text

No content