はじめに
この記事は、 Flutter #2 Advent Calendar 2020 - Qiita の2日目の記事である。 Flutterのアドベントカレンダーには Flutter #1 もあるので、こちらもぜひ。
gifteeのネイティブアプリをFlutterでリニューアルした
筆者は株式会社ギフティにエンジニアとして勤めており、つい昨日のことだが、約1年ほどかかって、2020年12月01日にネイティブアプリのリニューアル版をリリースすることができた。Flutterで開発されている。gifteeとは？という人はぜひ、下記リンクからサービスを知っていただきたい。
gifteeサービス紹介 | カジュアルギフトのgiftee(ギフティ)
giftee(ギフティ)はオンラインで手軽にギフトを贈れるサービス。日頃のありがとうを伝える時など、思い立ったらすぐに贈れるカジュアルギフトを取り揃えています。メールやLINE、TwitterなどのSNSで贈れるので、住所を知らない相手にも便利です。
giftee.com
各ストアのリンクは下記。
【Apple Store】 https://apps.apple.com/jp/app/id508754185
【Google Play】 https://play.google.com/store/apps/details?id=co.giftee.app
元々SwiftとKotlinで開発されていたのだが、ネイティブアプリ専任のエンジニアが不在の中、なかなかアップデートが難しい状況だったので、新たにアプリチームが結成され、開発効率の高さやメンバーのスキルセットなどを鑑みてFlutterを採用し、リニューアルに取り組んだ。この辺の技術選定や体制については、会社の技術ブログの方でアーキテクチャの解説などと共に詳細を発信していけると良いと思っているので乞うご期待。
個人開発でもFlutterでの開発を始めたので、Flutterを開発していく中で得られた知見に関しては、個人ブログの方でもカジュアルに発信していけると良いなと思い、キーボードを叩いている。今年に入ってからアプリチームに異動し、Flutterでの開発を始めたので、Flutter歴は1年弱である。今回のリリースで、国内企業でFlutterを採用している事例を増やすことができて良かった。他社でFlutterを採用する際にいくぶんかの力になれると嬉しい。リニューアルに関しては大変なことも多く、アプリ自体もまだまだ改善点は多いが、何より世の中に出て、実際に使ってもらえている喜びが大きい。良ければぜひ触ってみて欲しい。
WebViewについて
ということで、今回はFlutterにおけるWebViewをテーマに取り上げたい。WebViewはアプリの要件として入ってくることも多く、Flutter公式プラグインの webview_flutter が Androidで日本語キーボードが出なかった ことで、別のWebViewのプラグインを使用したり、Flutterの採用自体を見送った人もいるのではないだろうか。我々も日本語入力が必要なWebViewだけ3rdパーティ製の flutter_inappwebview を使用したりしながら、開発を進めていたのだが、2020年10月にwebview_flutter の 1.0.0 がリリースされ、この課題は解消され、今では、webview_flutter に統一して開発を進めている。最近になって状況も変わり、プロダクションで使っても大丈夫なようになってきたので、この辺りの情報をアップデートできるればと思い、今回記事にした。
WebViewとの付き合い方
1年開発してきた経験から結論を述べると、下記の通りだ。
- なるべくWebViewを使わない
- WebViewを使う場合は
webview_flutterを使う - ファイル選択がある場合は
url_launcherを使う
なるべくWebViewを使わない
こう言ってしまうと元も子もないが、なるべくWebViewを使わないようにしたい。Webサービスとして既にローンチされており、後からネイティブアプリを作るパターンだと、特定の機能をWebViewで実現するケースなども多い。しかし、こういったケースでも、APIを生やしてなるべくネイティブに寄せていった方がが良いように思う。FlutterはUIを作ることに優れているので、慣れてくると工数もそこまでかからないし、パフォーマンスの観点でもメリットがある。WebViewで表示する画面数が増えると、要件が増えるので、問題は少なくなってきたものの、WebView特有のバグを踏む可能性が高くなる。工数との兼ね合いなどもあるとは思うが、まずはネイティブで実現できないかを検討してみると良さそう。
WebViewを使う場合は webview_flutter を使う
とはいえ、WebViewを使うケースは発生するかと思うので、その際は、webview_flutter を使用すると良い。公式プラグインということで、今後のFlutterやDartのバージョンアップなどにも追従して保守されていくことを期待できるし、安心感がある。バグも着実に減ってきて、特別な要件がない限り、大体 webview_flutter でカバーできるのではないかと感じている。他にもできることはたくさんあるが、我々の実際のユースケースに基づいてできること、注意点を記述する。
できること
- Webページを表示することができる
- お知らせの詳細を表示したりするために使用した
- AppBarやBottomNavigationBarをカスタマイズできる
- タイトルの変更や特定の機能のためのボタンを配置したりするために使用した
- UAをカスタマイズできる
- Web側でアプリからのアクセスかを判定して特定のコンテンツをトルツメしたりするために使用した
- URLの遷移をフックしてアクションを起こすことができる
- 特定のURLを踏んだ際にネイティブの別画面に遷移させたりするために使用した
注意点
- Androidでパフォーマンスに課題がある点
- ファイル選択で課題がある点
Androidでパフォーマンスに課題がある点
Androidで日本語キーボードが出るようするためにHybrid Compositionを有効にすると、トレードオフでAndroid 9以下でパフォーマンスに課題があるとプラグインの README 内に記述されている。我々の要件的には日本語キーボードを出すことの方が優先度が高かったため、Hybrid Compositionを有効にし、社内にあったAndroid 9からAndroid 6の検証端末で検証を行ったが、我々のアプリで表示するページに関しては、特別にカクついたり、アプリが止まることなどはなく問題はなかった。もちろん、表示する内容などにも寄るところはあるとは思うし、保証できる訳でもないが、一般的に問題ないレベルなのではないかと思う。
ファイル選択で課題がある点
[webview_flutter] not working choose file (input type file) · Issue #27924 · flutter/flutter
どうやらネイティブレベルの課題のようで、<input type="file"> が反応しない。長らく議論がなされており、修正のためのPR も出されていたりと、将来的に解決される可能性もありそうだが、現在もファイル選択は上手く行っていない模様。
ファイル選択がある場合は url_launcher を使う
ということで、このユースケースにおいては、大人しくurl_launcherを使ってOS標準のブラウザに飛ばすのが良さそう。我々のアプリの方でも、画像アップロードがあるページに関しては、ログイン状態を維持させた上で、OS標準のブラウザに飛ばすようにした。
おわりに
改めて、自分なりの現状でのWebViewとの付き合い方は、下記の通り。
- なるべくWebViewを使わない
- WebViewを使う場合は
webview_flutterを使う - ファイル選択がある場合は
url_launcherを使う
技術選定やFlutterの採用のための足しになればと思い、FlutterにおけるWebView周りの現在の状況をまとめた。うちではこうしているという事例があれば、ぜひ教えて欲しい。
