Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mercari
October 14, 2023

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/

mercari

October 14, 2023
Tweet

More Decks by mercari

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 点の情報とClosureを受け取る

    View full-size slide

  20. Contextを渡してViewを作成

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. sizeはModifierを使って取得

    View full-size slide

  24. sizeはModifierを使って取得

    View full-size slide

  25. MatrixTransformerは座標↔数値変換

    View full-size slide

  26. あとはContextを使って実装

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide