Androidで作成したセブン銀行ATMのモックアプリをWebアプリでリニューアルした話
こんにちわ。株式会社フィノバレーでモバイルアプリチームのリーダーを担当している照井です。
数年前ですが、2020年8月に以下の「セブン銀行ATM対応のモックアプリをFlutterで作成した話」という記事を書きました。
【セブン銀行ATM対応のモックアプリをFlutterで作成した話】
https://finnovalley.hatenablog.com/entry/2020/08/04/161743
このモックアプリ作成から4年ほど経過した2024年現在では、Webアプリとして再構築しており社内でエンジニア以外にも利用されるようになりました。
当時の記事も古くなっていたので改めて現状を書こうかなと思います。
背景
もともとこのモックアプリ（旧モックアプリとします）はサーバーチームがセブン銀行ATM機能を開発する上で、外部サービスとの電文のやり取りをシミュレートするために作ったアプリです。
電文のやり取りをしながらサーバー処理を修正できるよう、細かいデバッグや電文項目の修正ができるよう設計していました。また、暗号処理の関係でAndroidアプリのみ提供しました。
その後、無事にセブン銀行ATM機能をリリースし安定稼働に入った後「MoneyEasyでセブン銀行ATMチャージをテストしたい」
という要望が社内で出てきました。その時はリソースが不足していたこともあり旧モックアプリなら要望を満たせるので使ってもらっていました。
その後、しばらくしてエンジニアだけではなく色々なチームからこの要望を受けるようになってきました。
色々なメンバーが使うとなると、旧モックアプリは専門用語や設定項目が多いという課題が無視できなくなるためなんとかしようと考えました。
作り替える or 新規で作る
迷ったのは「旧モックアプリを作り替える」か「旧モックアプリを残したまま新規アプリを作るか」でした。
リリース以降、数年が経過していましたがデバッグ用途として旧モックアプリを要望されたことは1度もありませんでした。そもそもセブン銀行ATMというシステム自体が安定しており仕様変更もほぼ発生しません。加えて、弊社のリソースも当時に比べ充実してきていました。
この時点で旧モックアプリはメンテナンスされておらず、2つメンテするのは辛いので幅広く利用される想定で「旧モックアプリを作り替える」のが最も良いと考えました。最初に考えた検討事項は主に2つです。
検討事項
操作が難しく余計な入力項目が多くてわかりづらい
モックアプリ実行用のAndroid端末＋MoneyEasyを動かすスマホ端末、の計2台スマホが必要になってしまうのをどうにかしたい
Webアプリ化へ
検討事項の1つ目はデバッグ用途機能を全削除して入力項目を最小限にし、操作を簡略化することで解決できるので問題ありませんでした。
検討事項の2つ目は問題で、これを解消するにはデスクトップアプリかWebアプリで作る必要がありました。弊社は入社時にMacかWindows端末を選べるので、どちらのOSでも使える方法を考慮するとWebアプリ一択になりました。
使用する技術スタックですが、丁度FlutterでWebが成熟されつつあったので、旧モックアプリと同様Flutterを使用したままWeb化することにしました。
技術的な取り組み
Web化に当たって細かい取り組みはたくさんありましたが、ダラダラ書くだけになってしまうので本記事では3つポイントを記載します。
暗号処理周りがWeb対応のライブラリで実現できるか？
真っ先に調べたのがこの項目で、サポートされている暗号に対応できなければWeb化そのものを改める必要があったためです。
調査の結果、FlutterのencryptやpointycastleといったライブラリがWeb対応していたため暗号処理周りのコードは問題なく実装することができました。
Flutterとライブラリのバージョンアップ
旧モックアプリを作成したのは2020年初頭で、この時のFlutterはバージョン1系でした。つまりNull Saftyが入る以前のバージョンとなります。
Flutterをver1からver3へアップデートする対応はほとんどNull Safety対応と言ってもよくエラーをひたすら除去していく作業でした。
UIは全て作り直す想定であったため付随していたProviderも全部削除し、Riverpodで状態管理周りの処理を書き直しました。
RiverpodはWidgetと分離していてDIにも使えるので、自前でコンストラクタインジェクションしていたRepositoryレイヤーやUseCaseレイヤーは全部RiverpodでDIするように修正しました。
旧モックアプリでは土台のアーキテクチャをそれなりにしっかり作っていたことが幸いして、コードを全部捨てる覚悟だったのですがModelクラスやRepositoryはほぼそのまま使い回すことができました。
UIの全面刷新
旧モックアプリはMVVMを採用しておりViewModelはほぼ全てChangeNotifierProviderで実装していました。
当時はパフォーマンスを意識した実装もあまりできておらず、Widgetツリーがリビルドされるとどうなるか考えずFunctional Widgetで全部作っていました。
このコードを読みながら修正が必要な部分だけ書き換えていく・・という作業をやっていたら日が暮れてしまいそうですが、今回はWeb化に当たってUIを全削除して作り替える方針にしたので既存のUIコードはほとんど読む必要がありませんでした。UIは最終的に以下の通り変更しました。
まとめ
今回の取り組みでは非エンジニアでも使えるシンプルなモックアプリをWebで実現することができ、より使いやすいアプリケーションに作り替えられたのではと思っています。
本当はWeb化にあたってVPNや認証の話もあったのですが、モックアプリというよりデプロイ先や利用サービスの話がメインになってしまうので割愛しました。
最近あまりこういった脇の活動ができていないのですが、引き続き社内用の便利なツール開発や改善を続けていきたいなと考えています。
この記事が気に入ったらサポートをしてみませんか？