世界の皆さまこんにちは。改めましてツクリンクにてモバイルアプリのエンジニアをしておりますイノウエです。
世間はすっかり年末の様相で、こんな雰囲気はとても好きです。年末年始も健康で、何卒ご安全にお過ごしくださいませ。
と、結びの言葉っぽく始まってしまいましたが本題に。
現在ツクリンクのアプリはWebViewベースのアプリをFlutterへリプレイスすべくああだこうだやっております。
まだまだ道半ばのFlutter化計画ですが、現状や展望などをざっくりお話ししていきたいと思います。
それぞれ細かく記事化していく予定なのでざっくりです。
WebView → Flutter化への経緯
まず、弊社のサービスであるツクリンクは約11歳（参照）であり、大部分がRuby on Railsでできています。 それを初めてWebViewアプリとして公開したのが2015年頃のようです。
2015年には世になかったが今日では活発になり、限られたリソースで両プラットフォームの開発ができるFlutterの採用が決まったわけです。
私イノウエが入社したのも、まさにそのFlutter化を担うためでした。
これまでのツクリンクアプリ
2015年にver1.0.1がリリースされていたためアプリ自体の歴史は長いです。
構成
AndroidがJava, iOSがSwift製のWebView
通知はAWS SNS
ログイン処理や、SNSへ登録するトークンの処理はそれぞれAPIが用意されていました
新しいツクリンクアプリ
はじめの一歩
まずはFlutter製のWebViewにすることから始めました。
基本的な構成は同じで、WebViewだけを載せ替えるようなイメージです。
いったんFlutterのWebViewに載せ替えたのは、プラットフォームごとに分かれていたアプリを一つに統合し、そこからWebView⇔Flutterを行き来できるようにするためです。
採用したpub
重要だったやつらを一部
-
flutter_inappwebview
核となるWebView部分です。選定理由としては、欲しい機能が一通り揃っていたこと。またpub採用時点で6系まできていることやLIKE数からも、しばらくはメンテナンスされ続けて安心して使っていけそうと思えたこと。ドキュメントもしっかりしていることなどの理由からです。とはいえドキュメントに記載がなく探りながらやる必要があったりもするので、ここで得た知見は別途記事にしたいと思います📔 -
native_shared_preferences
これは名前の通りNativeのローカルストレージを参照するためのものです。Java, Swift製のWebViewアプリに保存されていたトークンを参照し、FlutterのWebViewに切り替わる際にもログイン情報を引き継ぐために必要でした。ここも別途記事にしたい候。 -
version_migration
これもその名の通り、バージョン◯◯以上・以下などでマイグレーションの処理を実行するかどうかの分岐で使いました。
その他pub一部抜粋
# WebView表示
flutter_inappwebview:
# Webリンクを開く
url_launcher:
#UserAgent取得
fk_user_agent:
# ローカルストレージ(マイグレーション用)
native_shared_preferences:
# アプリバージョンによるマイグレーション管理
version_migration:
# ローカルストレージ
shared_preferences:
# http通信
http:
http_parser:
# State管理、DI
hooks_riverpod:
flutter_hooks:
freezed_annotation:
# Firebase
firebase_core:
firebase_analytics:
firebase_crashlytics:
firebase_messaging:
firebase_remote_config:
# ローカル通知
flutter_local_notifications:
# バッジ管理
flutter_app_badger:
その先
Flutter製のWebViewに載せ替えてからもしばらく経ち、目立ったバグやクリティカルな問題は今のところ見られていません。
しかし実はここからが本番であり、これから機能ごとにFlutterへ差し替えていくことになります。
WebViewとFlutter共存もこれから公開されていく予定なので、また得た気づきや知見などあれば記事化したいと思います。もしご興味あれば高評価とチャンネル登録よろしくお願いします（？）
WebViewとFlutterの共存とこれから
今回のリプレイスに際して過去事例を洗ってはみたのですが、WebView＆Flutter共存の事例はあまり発見できず探り探りのところも多かったです。（単に探し方が良くないだけの可能性多分にあるのでどこかに良い事例があれば教えてくださいまし）
根幹はユーザー体験をより良いものにするためのリプレイスなので、WebViewとFlutterの画面をシームレスに行き来できるような工夫など考えることも多いですが、得られるものも大きいです。
これからはもっとWebView様と仲良くしていきたいと思っております👯
最後に
めっちゃ書いたなと思っていたのですが、書きたいことが多すぎてまだまだ銀河の一つ星というか、道半ばというか、前略道の上よりからというか、前略プロフって感じなのでまた小分けにして投稿していきたいと思います。
ではでは皆さま、メリークリスマース良いお年をメルシィ🎄🎍🇫🇷
Discussion