リニューアル版アプリ(Coincheck 4.0)のご紹介

はじめに

プロダクト開発運用部モバイルグループの深澤です。モバイルグループはコインチェックのiOS / Androidアプリの開発を担当している部門となります。

今回は、本日クローズドβテストを開始したリニューアル版のコインチェックアプリ(以下Coincheck 4.0)について紹介したいと思います。

Coincheck 4.0の概要について 

まずは、ユーザー視点で見た変更点を紹介したいと思います。

主な変更点は以下となり、特にAndroidユーザーの方にとっては、見た目が大きく変わったことに気付かれると思います。

  1. 現行のiOS版(Coincheck 3.x)をベースにiOS / Androidアプリのデザインと機能を統一
  2. ダークモードに対応

f:id:cc-fukazawa:20210409104936p:plain

これらの変更を行なった背景としては、現行のiOS版(Coincheck 3.x)とAndroid版(Coincheck 2.x)のデザインには大きな差分があり、改善サイクルを回していく上で2個分のアプリのデザインを検討しなければならないという余分なコストが発生していたため、デザインを統一することで効率化を行いたかったという意図があります。

また、デザインと機能を統一することで、テスト仕様書の統一化ができたり、カスタマーサポートのオペレーション負荷も下げられるなどといったメリットもあり、良いことづくめです。

もちろん、iOS 14ウィジェットなど各OS特有の機能の細かい差分はありますが、こちらについては各OSで最適化した形で搭載しています。

アプリのバージョンについても、デザインと機能を統一したことからiOS / Androidともに4.0で統一しました。

Coincheck 4.0の内部設計について

ここでは、開発視点で見た変更点を紹介したいと思います。

主な変更点は以下となり、アプリの中身を全て作り直しました。

  1. モダンアーキテクチャーを使用して0から全コードを再設計

現行のアプリはiOS / Androidで設計思想が大きく異なっており、またこれまで様々なエンジニアがコードを改修していたことから、メンテナンスの観点で限界を迎えていたため、iOS / Androidのコードを全て作り直す判断をしました。

再設計は以下のポリシーで検討しました。

  1. iOS / Androidのアーキテクチャーを揃える
  2. iOS / Androidのインターフェースとアルゴリズムを可能な限り揃える
  3. テスト可能にする

1.と2.については、iOS / Androidで設計を揃えておくことで、片方のOSで実装を先行し、もう片方のOSはそれを手本に効率的に実装したいという意図がありました。

現状、コインチェックのモバイルグループは4名(iOS2名+Android2名)と少人数体制で、現行のアプリの改善と並行しながらCoincheck 4.0の開発も進める必要があったことから、開発効率化は必須でした。

また、3.については、レイヤー単位でテスト可能な設計にすることでアプリの品質を上げたいという意図がありました。

なお、React Native / Flutterなどのクロスプラットフォームのフレームワークについても検討は行ったものの、弊社アプリはビットコイン アプリダウンロード数No.1*と多くのお客様にご利用いただいており、それぞれのOSに最適化された形で実装を行うことで引き続き高品質なアプリを提供したかったことから、ネイティブアプリで開発を行うことにしました。

*2020年01月~2020年12月(データ協力:AppAnnie)

上記のポリシーを元に検討した結果、以下の設計を採用しました。

  1. MVVMとVIPERを組み合わせたアーキテクチャーを採用する
  2. iOS / AndroidでViewModel以下のレイヤーのインターフェースとアルゴリズムを可能な限り揃える
  3. ViewModel以下のレイヤーは全てインターフェース(Protocol / Interface)を定義しそれに準拠した形で実装する

ストリームライブラリについては、iOSのCombineフレームワークやAndroidのLiveDataはOS間でアルゴリズムが統一できない懸念があったことから敢えて採用せず、ほぼ同一のオペレーターで実装可能なRxSwift / RxJava(RxKotlin)を採用しました。

github.com

github.com

また、Androidに関しては新しい試みも行っており、Activity / Fragmentの複雑なスタック管理を簡素化するために、Navigationをフル活用してSingle Activity構成で設計しました。

developer.android.com

MVVMとVIPERを組み合わせたアーキテクチャーについて

VIPERをベースに、PresenterをViewModelに入れ替えたアーキテクチャーです。

f:id:cc-fukazawa:20210409134939j:plain

VIPERについては、以下の記事を参考にしてください。

cheesecakelabs.com

モバイルアプリ開発のトレンドとしてはMVVMが主流になりつつありますが、MVVMはModel分割や画面遷移の手法が定義されておらず(ある程度パターン化されつつも)エンジニアによって異なることから、VIPERに準拠する方針としました。

私たちは、これをMVVM+VIPERアーキテクチャーと呼んでいます。

ViewModelについては、ReactiveXが公開しているサンプルコードのGitHubSignup(UsingDriver)をベースにしたInput-Outputパターンを採用しました。

github.com

VIPERはiOSアプリの設計で生まれたアーキテクチャーであるため、Viewの生成方法がiOSと異なるAndroidでは、ViewインスタンスをActivity / FragmentからRouterに注入するなど工夫が必要な箇所がありましたが、試行錯誤を重ねて概ね同じ形で実装できるようになりました。

アーキテクチャーをiOS / Androidで揃えることができ、ストリームライブラリをRxで揃えたことで、iOS版の開発を先行し、Android版の開発工数はiOS版の2/3程度に抑えることができました。

さいごに

設計に関してはまだまだ書き足りず、iOS / Androidアプリの同時開発プロジェクトで開発効率を上げる取り組みについても、いずれどこかでお話できればと思っています。

Coincheck 4.0は正式リリースに向けて更なるブラッシュアップを行っている真っ只中で、βテスターに選ばれた方はぜひアプリの[アカウント]→[アンケート]からフィードバックをいただけると嬉しいです。

また、Coincheck 4.0の正式リリース後も、快適なアプリ体験を提供できるように様々な仕込みを行っていますので、お楽しみにいただければと思います!

一緒にコインチェックを盛り上げてくれるメンバーを募集しています!

様々なポジションを募集しておりますので、ぜひご興味ある方はご応募ください。まずは話を聞いてみたいという方も大歓迎です。

corporate.coincheck.com