Flutter on the web の 2019年末時点での現状まとめ🎄
Flutterは、元々はAndroid/iOS(+Fuchsia)のモバイルアプリ向けをメインに開発が進められていましたが、最近はWeb・デスクトップ対応も進んできています。そのあたりの変遷は以下でも触れました。
Web対応のざっくりとした変遷は次のようになっています。
- 2019年5月(Google I/O): テクニカルプレビュー版公開
- 2019年12月: ベータ版リリース(beta channelでも使えるようになった、という方が正確かも)
このペースを見ると、2020年のGoogle I/Oにリリースプレビュー、同年12月に開催されるであろうFlutterイベントで正式リリース、などの流れもあり得そうですが、そういうバージョン表記はマーケティング的意味合いも大きいと思っていて、実際の対応ベースで評価する方が適切だとも思います。
(とはいえ、そういう表記が正式版に近づくと現場でプロダクション利用が認められたりすることもあるはずなので、現実的には大事といえば大事ですが。)
本記事では、2019年末現時点でのFlutterのWeb対応の実情を、公式アナウンスをなぞりながら、普段Web周りもよく触っている自分ならではの視点も入れつつ紹介していきます。
ちなみに、どこのchannelでどの機能が有効化されている(使える)かは、 https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/features.dart で管理されています。今回betaリリースされたv1.12.13+hotfix.6にてbeta channelに対してWeb上での実行を有効化できる対応がコミットされています。
普段stable channel使っている場合、Webを試したい時に一々切り替えるのは非効率なので、そういう場面がちょくちょくありそうなら別途用意しておいてサクッと切り替えられるようにしておくと捗ります。
Flutter on the webの現状を整理
Flutter InteractイベントでWeb対応について色々語られていましたが、記事としてもまとめられているので、こちらの方が手短に情報追いやすいかもしれません(実際のプレゼンの様子観るのも大事ですが)。
というわけで、まずはこの記事から抜粋しつつ日本語で紹介していきます。
Webのベータ対応の意味するところとは？
まず冒頭で述べられていますが、今回ベータ版となったことは、安定化へのスタートラインに立って、先駆者的な開発者がある程度の要件で使える段階に達した、ということを意味するとのことです。
事例
「Flutter Webは実際どんな感じ？」という疑問については、自分で試したり、それで組まれたアプリを触ってみるのが一番だと思います。記事で紹介されている事例は以下です。
事例1: Journey
Journey というiOS/Android版リリース済みのアプリがWebアプリも提供しているとのことです。
Web版はこちらです: https://app.startyourjourney.io
僕が試したところ、Web版での登録は失敗しましたが、iOSアプリ版で登録してからWeb版でログインしたら使えました。Web版はまあまあ動くとはいえ、諸々の最適化もされてなかったり各所に怪しいところが見受けられます。それらは、Flutterフレームワークの問題に起因するところもあれば、アプリ側のケアが不十分なところもありそうです。
とはいえ、シングルコードベースであまり追加の手間なくWeb対応して現時点でそれなりに動いているのは充分評価できることだと思います。
事例2: AEI Studio’s showcase
通常のWebサイトにFlutterのミニアプリを載せている事例として、AEI Studio’s showcaseが紹介されています。リンクを開いて触った方がイメージが沸くと思います。
Flutter Gallery
この記事では触れられなかったので補足しますが、Webで動くUIサンプルとしてはまず、公式が提供されているFlutter Galleryを触るのをお勧めします。今回リニューアルされたこともあり、きれいで概ねスムーズな動作で、さらにレスポンシブ対応などもされていて、Flutter Webをきちんと使いこなせばUIとしてはこのくらいのものができる、という良い目安になるはずです。
ソースはこちらです:
簡易版アプリ
Flutterは現状やはりAndroid/iOSでの動作はかなり高品質な一方、Webはまだまだなところも多いということで、Webを簡単に試せる簡易版として利用してフルのしっかりとしたものはAndroid/iOS版インストールに促す、というやり方も勧められています。
同じフレームワークでコードもかなり流用できるでしょうし、Android/iOS版インストールの障壁を下げられそうで、現時点での良い活用法だと思います。
管理アプリなどへの利用
例えば、通常のAndroid/iOSアプリをFlutterで作って、その管理アプリなどをFlutter Webで組む、という提案です。
これも同じく、コードを共通利用できるところも多そうで、また現状のWebゆえの細かい問題も妥協しやすそうですし、良い活用法ですね。
プラグインのWeb対応
話は変わって、プラグインについてです。Flutter Webは、全体的にまだWebサイト/アプリとしての動作に改善の余地が色々ありますが、さらに対応プラグインがまだ少なめという課題もあります。
Web対応のプラグイン自作
まず、Android/iOSのネイティブ機能を呼び出すプラグインと同じく、Web用のも手間さえかければ自作可能です。
詳しい書き方はこちらに載っています:
公式ドキュメントの Specifying a plugin’s supported platforms でも多少触れられていて、pubspec.yamlでのweb向けの記述方法込みで例が載っています。
別途ネイティブ言語(Kotlin・Swiftなど)知識が必要だったり別プロジェクトとして開く必要もあるAndroid/iOS向けと違って、Webプラグインはdart:htmlなどをimportしたDartファイルで済むので書きやすいはずです。Dartが元々Web向けの言語であったことがここにきて活きてきて素晴らしいです👍
公式対応も着々と進んでいる
一方、まだ充分ではないものの、公式プラグインのWeb対応も着々と進んでいて、現時点では以下が対応済みで、さらに今後どんどん増えていくはずです。
このように、プラグインのページに WEB の記載があれば対応済みということです。
さらに、https://pub.dev/flutter/packages?platform=web から次のようにFlutter Web対応のパッケージに絞って検索もできます。すでにけっこう数がありますが、これはネイティブ機能の絡まないUI系など特に対応しなくてもWebでそのまま動いてしまうものが多く含まれているためで、Web対応されたネイティブパッケージは、公式・非公式問わずまだ多くないです。
公式プラグインWeb対応の進捗については、以下のボードで管理されています。
2019/12/25時点でこれを追うと、FirestoreパッケージのWeb対応がバッチリ進行中であることなど把握できます👀
Firebaseプラグインに関しては、元々Android/iOS向けだったFlutterFireがWeb両対応となって、その内部実装としてこれまでWeb向けとして使われていたfirebaseパッケージがラップされて利用されています。
ちなみに個人的には、firestore_ref というパッケージで簡単にラップしてアプリ側からは1ソースでiOS/Android/WebでFirestoreを使えるようにはしていました。このパッケージでちょっと面倒なことをしているのが不要になるので嬉しいです。
(元々近いうちに公式対応されるかもと思いつつ、その間の繋ぎの簡易対応していただけなので、無駄骨などとは思ってないです。)
公式プラグインについては、このようにWeb両対応が進んでいるので、基本的には自作せずにその対応を待つか、あるいはどうしても今必要なら簡単に済ませてしのぐか、あるいはやる気があるなら公式プラグインのWeb対応にプルリクするなどして貢献すると良さそうです。
(公式プラグインへのプルリクは、小さなバグ修正でさえ取り込まれるのに数ヶ月かかったりするので、あまり期待せずダメ元覚悟でやった方が良いと思いますが)
正式リリースに向けて
プラグインの話が長くなりましたが、最後に正式リリースに向けた取り組みについて述べられています。
パフォーマンス改善
Designing for the Web with Flutterで触れられていましたが、パフォーマンス周りは次のようなステータスとのことです。
- 現状アプリサイズは現状300KBで、削減対応中
- 動作速度の向上も対応中
アクセサビリティ対応
モバイルブラウザ上で、AndroidのTalkBack・iOSのVoiceOverにも対応していて、さらにデスクトップWebブラウザでのスクリーンリーダー機能にも対応予定とのことです👍
ブラウザーサポート
Flutterは元々、モバイル向けのみではなくデスクトップサイズもカバーできる設計になっていて、つまりデスクトップWebブラウザーへの対応もその規定路線の範疇とのことです。
また、以下のブラウザに対応すると明記されています。
- Chrome
- Edge
- Firefox
- Safari(Desktop/Mobile)
テストカバレッジ
Flutter本体・Flutter web engineともにテストカバレッジを向上していて、さらに今はChromeでの自動テスト・Safariでの手動テストも行っている、とのことです。まだ途中であって、これからもそれらの対応改善を続けて、リグレッションも減らしていくようです。
確かに、master/dev channel最新でこれまでWeb対応していた時、やはりAndroid/iOSに比べるとけっこう高い頻度でデグレに遭遇して手間取ることがあったので、きちんとそれを認識・改善しているようで安心しました🐶
以上で、記事の流れに沿ってFlutter Webの現状を追いました。
自身のFlutter Webとの関わり
僕は最近、(無謀にも)仕事でFlutter Webを使ってちょっとしたアプリを組んでいました。
テクニカルプレビュー版でそういう用途に使うのは厳しい気もしつつ、検証した結果その要件ならまあ普通に使えそうと思って対応したら、実際それなりになんとかなっています。
一応、検証していた際のpublicリポジトリは以下ですが、いくつかの懸念点について自分なりに試して手応え掴めてからはあまり弄ってないので、今参考にするものとしては、特に前者はちょっと微妙です。
- https://github.com/mono0926/flutter_web_experiment (画像が低解像なせいでHeroアニメーションが変なのをなんとかしたい)
- https://github.com/mono0926/flutter_firestore_ref のexample
検証の結果、FlutterアプリのWeb対応は思ったよりすんなりできる印象は受けたものの、細かい対応をしようとすると、どうしても手間が増えていくなという印象も同時に受けました。iPhoneアプリのiPad対応(Universalアプリ対応)が面倒なのと似たような感覚かもしれません。
キーボード・マウスカーソル対応などが手間
キーボード・マウスカーソル対応なども、きちんとしたWeb対応するなら手間かかることが実感できました。場合によっては現時点ではあえて省いて手抜きしてしまうのも賢明かもしれません。そのあたりのベターなやり方が提供されたりノウハウも世に出てきそうですし。
URLの扱い・ルーティング対応も手間
Android/iOSアプリだと、ある程度お行儀よくNavigator周りのコード書くだけでわりと済む印象ですが、Flutter WebでまともなWebサイトっぽく画面とURLを一対一対応させようとすると、特に実際の処理的には画面遷移を伴わない時に一工夫必要でこれも手間かかったりコードが複雑になってしまったりで、悩ましいなと思いました🤔
テキスト選択・入力周りが怪しい
ただでさえややこしいテキストの扱いですが、Flutterのような独自描画方式だとさらに問題になりやすいです。元々Android/iOS上でも怪しかったのが最近は改善されて個人的には問題無いように感じていますが、Web/デスクトップではまだまだ怪しいところがあります。現状、日本語入力でもSafari/Chromeともに概ね動くものの、ちょっとチラついたり変換候補の出る位置がおかしかったり、ちょっと不安を覚える動きがたまに気になります。
また、特に一般のWebページではテキストを選択・コピーできるのが当たり前な感覚ですが、それに対応するためにはSelectableTextを使う必要があります。それが問題なく機能するならこれまでText使っていた箇所を原則それに置き換える癖を付けるだけで済みそうですが、Web上での動作としては数ヶ月前から何かしら問題があってまともに機能しない状態が続いています。
Flutter Webの現状評価
自分が色々触った感触など踏まえて、Flutter Webの現状をまとめると、次のような感じです。
- 表面的なUI表現としてはFlutter Galleryサイトのクオリティのものを1ソースでWeb含めたクロスプラットフォーム向けに組むことは可能
- Web対応のプラグインが未成熟な現状でも、自前対応の手間さえかければ大抵の要件は満たせる
- HTML/JSで書かれた標準のWebサイトと全く同じ体験をFlutter Webで実現しようとすると、現状では自分でがんばって細かいケアをする必要があり、そしてその手間は今後どんどん減っていくとは思うがそもそも体験的に100%同じものを提供するのは難しそう(iOSネイティブアプリの体験をFlutterで100%再現するのは困難なことと同様の感覚)
FlutterをAndroid/iOS向けにある程度(数ヶ月くらい)触って慣れた状態ならWebに手を出してもそれなりに実利用可能なのではと思います。
終わりに
Android/iOSアプリを1ソースでできてしまうだけでもかなり嬉しいのに、さらにWebまでカバーできるとすごくありがたいですね。これらをそれぞれ別技術で組もうとすると、3重の手間がかかるのはもちろん、把握するべき知識量的にも1人だとかなり難しいと思っていましたが、Flutterなら1人(〜ごく少人数)でも高品質なクロスプラットフォームアプリ/サービスを作れてしまう状態になりつつあります。
そして個人的には、Flutterのそういう魅力を最大限引き出せるエンジニアになりたいなとイメージしてます🐶
ちなみに、タイトルの”Flutter on the web”は、Flutter Interactイベントのセッション内でそう表記してたり、意味的にもしっくり来るので、僕は丁寧に表記するときは今のところその表現を使っています(普段は、”Flutter Web”など意味が伝わるであろう簡単な呼び方で良い思って本文でもそれで済ませています)。
関連情報
公式サイトにはFlutter Webの現状が記されていて、随時更新されているので、たまにチェックすると良いです:
こちらもFlutter Webに関する最近の日本語記事でお勧めです:
