放流作業

ネットの海に放流するのでいつか戻ってきてほしい

Flutter Web で最速Modern Web App公開

Flutter Webが本体に帰ってきた

Flutterは今までAndroid, iOSに両対応したMobile Appが作れるフレームワークとしていましたが、Flutter1.9から別に開発されてきていた「Flutter for Web(Hummingbird)」が統合され、晴れてFlutter Webとなりました!

これでAndroid, iOSと同列でWebアプリにも同一コードで対応できるようになったわけです。(まだテクニカルプレビューなので注意)

早速やっていく

まずはflutter 1.9以上が必要なのでアップデートしましょう。

(私の環境が変なのはあしからず)

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, v1.12.5-pre.21, on Microsoft Windows [Version 10.0.18362.476], locale ja-JP)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 3.5)
[√] VS Code (version 1.40.2)
[√] Connected device (2 available)

• No issues found!

そうしたら File > New > New Flutter Project... から新しいプロジェクトを作ります。

f:id:Nageler:20191129172120p:plain
new flutter project

BMIを計算するアプリを作ります

f:id:Nageler:20191129172636p:plain:h500

Projectが作成されると、ディレクトリにWebが追加されているのが分かると思います。

f:id:Nageler:20191129172852p:plain:w300

適当にコードを変更して、Chromeからデバッグしてみましょう。

コマンドラインから、

>flutter run -d chrome

でできます。

f:id:Nageler:20191129175134p:plain:h500

できました。ここまでWeb向けのコードは一切書く/書き換えていません。HotReloadも使えます。

公開してみる

Flutter WebはコードをJSにトランスパイルしてWebページの作成を実現しています。要は静的ページです。と、いうことは、

GitHub Pagesで無料で公開できる!

というわけです。やっていきましょう。

>flutter build web

でトランスパイルします。すると build > web にファイルが生成されます。

f:id:Nageler:20191129175807p:plain:h500

そうしたらGitHubで適当にRepositoryを作り、Webの階層からpushしましょう(rebuildしたら消えるので別に移動した方が良い)。

f:id:Nageler:20191129180241p:plain:h500

Pushが完了したら、GitHubのページに行き、Settings > GitHub Pages でmasterブランチを選びます。

f:id:Nageler:20191129180500p:plain:h500

1分も待てば公開されます。当然独自ドメインも使えますよ。

https://organic-nailer.github.io/calc_bmi_web_app/

今回作ったのがこれです。記事書きながらでも1時間かかりませんでした。

...わかりますかこの速度感!!これはやばいですよ(アプリ開発者の感想)

まとめ

いかがでしたか?

まだテクニカルプレビューですが触る限り大きなバグは見られず、試用程度なら十分に使えると思いました。Stableになるのが非常に楽しみです。

ちなみにFlutter Webでいくつかアプリを作っているので、よければ遊んでみてください

この2つは1日で作成

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

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

Android版から移植

クラタン https://clatan.fastriver.dev/#/

今回作ったアプリのコードはGitHubに転がしておきます。参考にどうぞ

github.com