Flutter Webはいいぞ

これはKCS AdventCalendar2019 16日目の記事です

←15日目 | 17日目→

こんにちは、日吉代表に決まった直後から舐められているFastriver(@fastriver_org)です。5日目の記事もよろしくお願いします。

Flutter Webはいいぞ

表題のとおりです。いいです。とてもいいです。三田祭期間中ずっと感動していました。

まあまずはFlutterについておさらいしていきましょう。

Flutterとは?

fluter

FlutterはGoogleが開発を主導しているオープンソースのクロスプラットフォームUIフレームワークです。

2015年に発表され、2018年12月にAndroid・iOS向けの1.0がリリースされました。

特徴

Dart lang

FlutterはDartを使用してアプリケーションを記述します。DartはGoogleが開発した言語で、元々はWebにおけるJavaScriptの代替として開発されていましたが、あまり広まらず(DartVMを載せられなかった)、TypeScriptと同様なAltJSとして落ち着きました。その後Googleの標準がTSになるなど消えそうな感じでしたが、Flutterが開始したことで息を吹き返し、現在は活発に開発が続いている言語です(2.7で拡張関数追加されたのがウレシイ)。TypeScriptよりもJava寄りな記法で書けます(主観)。

ネイティブコード

Xamarinと違ってVMを介さずネイティブコードにコンパイルするため、クロスプラットフォームにしては動作が速いです。サイズも普通になります。

Widget


Flutterは画面を構成するのに”Widget”を使います。ButtonやTextだけでなく、LayoutやPaddingなどもWidgetで、それらをツリーにして画面を作ります。この辺りはこのスライドが一番わかりやすかったので共有しておきましょう。またWidgetの便利たる所以は、元からモダンなデザインが用意されているということです。脳死UIでもそれっぽい感じにアプリができてしまいます(逆に言えば凝ったデザインはやりにくい？)(僕はMaterial Design信者なので問題ない)。

HotReload

アプリ開発者なら分かると思うのですが、「画面のボタンのデザインをちょっと弄りたい」「eventを差し替えたい」とかいったときにはアプリをリビルドするのに数十秒ほど待たねばなりません。UIの微妙な調節などでこんなことをやっていると非常に時間がかかってしまいます(そのためにUIはビルドしなくてもプレビューできることが多い)。しかしFlutterではHotReloadが使えます。コードを変更後リビルドしなくても、HotReloadの数秒(もっと短い？)で挙動を確認することができます。この開発体験は尋常じゃないですよ。

AndroidStudio

勿論Google謹製のサービスなのでJetBrains社の世界最強IDEを使って開発できます。素晴らしいね！(VSCodeで開発もありあり)

Flutter Web とは

Hummingbird

さて、ここまではモバイルのお話でした。しかし時は2018年12月(モバイル版の正式版と同じだね！)にWeb向けのFlutter、”Hummingbird”が発表されました。そして

・2019年5月: “Flutter for Web” テクニカルプレビュー開始(本体と名前空間は別)

・2019年9月: Flutter 1.9にて本体に統合(名前空間も同じに)

・2019年12月: Flutter 1.12にてベータ版に ←New!

はい、遂に先日Betaになりました。

特徴(Alphaの知識で語る)

 

静的ページ

ビルドするとHTMLとJSファイルが吐き出されます。Dartで書いたものをJSに変換してくれます。それだけなので(少なくともフロント側には)サーバーサイドが要りません。静的ページなので、コードを公開してもいいならGitHub Pagesで無料でURLがもらえます。開発中にローカルサーバーを立てる必要もないです。

コードの共通化

UIの部分含めほぼ全てコード共通化ができます。できないのはプラットフォーム固有の機能などくらいです。

サクサク

思った以上にサクサク動きます。アニメーションにもたつきを感じることはありません。また開発スピードも先のHotReloadが使える(割と死にやすいが)のでサックサクです。

超高速開発！！！

 

この記事を参照だ！！

この２つは三田祭期間中に開発しました(GitHubにコードもあるよ)。

動物将棋 https://doubutsu.fastriver.dev/#/

ルーレット https://roulette.fastriver.dev/#/

超便利な単語帳アプリの「クラタン」 も、数日でアプリ版からWebに移植しました。

https://clatan.fastriver.dev/#/

Web版が素早くできたおかげで 💩林檎💩に金(1万円/年)を貢ぐことなく [^1][^2]全ユーザにサービスを届けられるように[^3]なりました。感謝

現状問題点(Alphaの知識)

 

まだ正式版じゃないですが割と安定しています。しかし、未だかゆいところに手が届かない感じです。また僕はアプリの畑の人間なので他のWebとの差異はよくわかりません。

URL…

一応画面遷移時にURLをつけられるのですが、DeepLinkのように直接Linkにアクセスするなどは現状難しいです。なので普通のWebPageでなくSPAを作るのが適切だと考えたほうが良いと思います

パッケージ互換

モバイル版はもう1年近く正式版をやっているのでプラグインが割と豊富です。しかしWeb版には対応していないものも多く(公式含む)、プラグイン頼りのプロジェクトは移行に少し手間がかかりがちです。またWebでしか叩け無いライブラリ(dart:htmlとか)もあるのでややこしいです。

文字

未だに日本語の完全なサポートがされていません(本体もしてない)。デフォルトで漢字を使うと中華フォントになってしまい違和感がすごいので工夫する必要があります。またChromeだと調子いいことが多いのですが、Safariで開くと日本語含む諸々が崩れがちです。プラグインとか色々入れると対策はできます。あとキーボードの読み取り内容がブラウザに依存するらしく、KeyEventを拾おうとしてもあまりうまくいきません(つらい)。

情報の錯綜

まだ存在が発表されてから1年弱で、alpha -> betaと進んでいてしかも本体と統合したりしているので破壊的な変更が今年だけでも多いです。なので古い(半年以上前とか)サイトの内容も信用ならなかったりします。統合前のものを「Flutter for Web」統合後を「Flutter web」と言い分けているような風潮もありますが、ググって解決策が出てきても使えなかったりしてつらいです。最新のIssueとかを頑張って追いかけましょう。もう既にBetaになったので来年は落ち着いてくると思います。古い情報を抹消するためにもコミュニティ活性化していきましょう。

まとめ

いかがでしたか？

 

百聞は一見に如かず、どの畑の人もちょっと試してみてください。環境構築もWebやるならFlutter SDKをインストールするだけ(最最低限)です。

初心者向けの説明で良さげなやつ:

https://medium.com/flutter-jp/first-step-9b7f2c74fb08

RTA:(超高速開発のとこのURLと同じ)

http://nageler.hatenablog.com/entry/2019/11/29/181315

 

興味のある人が多ければ、軽くHands-On会でも開こうと思うんですがどうですか？何かしら反応してくれると嬉しいです(つよつよはお呼びでない)。

 

[^1]: AppleのDeveloperには99ドルの年貢が課される。Googleは永年で25ドルだよ？Microsoft Storeは永年たった19ドルだよ？皆でUWP Developerにならないか？
[^2]: 実際のところとしてはAppleのDeveloper登録が未成年(20歳未満)だと自分のアカウントが作れないため躊躇っているということがある。18からでもよくないか？Googleで年齢聞かれたこと無いぞ？
[^3]: 世の中世知辛いので学生向けだとiOS対応しないと誰も使ってくれない。つらい。いい加減滅びないかな。

←15日目 | 17日目→

Posted on: 2019年12月16日, by :