はじめに今年はFlutterに注目して、個人的に情報を追っていた1年でした。個人開発のモバイルアプリはFlutterでいいじゃんと思っている私です。2019では昨年末からアナウンスされていたWebサポートが正式発表されました。Previewであったこともあり、本家Flutterとはパッケージが別れていたり、開発環境の構築も若干難があったりしましたね。webにも様々な改善が行われています。今回は、発表当時試してみたけどしばらく追っていなかった方や、これから触ってみたい方に向けて、環境構築からリリースなど一通りの手順を解説してみたいと思います。webとは2019年現在のFlutterは、iOS/Androidアプリを主なターゲットとしたクロスプラットフォームで開発可能なアプリケーションのフレームワークです。複数のプラットフォーム用アプリを単一のコードベースで開発することが出来ます。モダンなUIフレームワークや充実した開発ツールが提供されていて、Firebaseを始めとしたプラグインも充実しているため、比較的容易に開発を始めることが可能です。webは、そんなFlutterをWebブラウザで実行可能にしたものです。Previewの段階にあり、製品向けへの利用は推奨されていません。Webサポートに関する詳細な説明は本記事では割愛しますが、仕組みを知る上では次の公式ドキュメントが助けになるかと思います。Flutter環境構築さっそく公式ガイドを見ながら環境構築を始めます。SDKのダウンロード現在のところ、Webサポートの入ったSDKを利用するには、masterかdevチャンネルを利用する必要があります。SDKを利用していれば、次のコマンドでSDKのチャンネルを切り替えます。参照して、各実行環境のSDKをインストールしましょう。インストール直後は、stableチャンネルに設定されています。Webサポートを利用するため、先に紹介したコマンドでチャンネルを切り替えます。余談ですが、Flutterではこの他にもいくつかのリリースチャンネルが運用されています。私は普段の開発ではbeta環境を使用しています。ある程度の新しい機能と安定性のバランスが取れていることが多いと感じているためです。GitHubWebサポートを有効にするWebサポートを有効にするには、次のコマンドを利用します。—-enable-webこのコマンドは一度しか実行する必要はありません。コマンドを実行すると、~/.flutter_settingsが生成されます。devicesを実行することで接続済みデバイスとして次のような結果が出力されます。doctorを利用することでもWebサポートが有効になっていることが確認できます。categories.IDE上のDeviceリストにもChromeが追加されましたね。既存のプロジェクトにWebサポートを追加するには、プロジェクトのトップディレクトリで次のコマンドを実行するだけです。.Createコマンドは既存のプロジェクトファイルを置き換えることはせず、不足しているファイル群だけを生成します。実際に既存のプロジェクトで実行すると、web/index.htmlが新たに生成されました。type=“application/javascript”></script></body></html>なお、初期生成状態から削除したり、名前を変えてしまったファイルが存在する場合、不要なファイルが生成されることもあるため、gitなどのコード管理ツールとの併用をおすすめします。Webサポートを含めた新規アプリを作成する新規に作成する場合のやり方は、Webサポートがなかった時と変わりません。次のコマンドを実行することでiOS/Android/Webに対応したFlutterプロジェクトが生成されます。myappWebアプリを実行するWebアプリを実行するには、次のコマンドを実行します。chromeホットリスタートするには、rを入力します。合わせてブラウザのリロードを行う場合は、Rを入力します。先程確認したように、IDE上からの実行にも対応しています。VSCodeであれば、モバイルアプリを実行するときと同様に、deviceリストからChromeを選択した上で、F5キーを選択することでデバッグモードでの実行が可能になります。VSCode無事に実行することができれば、次のようにサンプルアプリがChromeで表示されます。Chromeで実行リリースビルドの生成リリースビルドを生成するには、次のコマンドを実行します。Dartが利用されます。chromeでも可能です。build/webに生成されます。このディレクトリをサーバーに配置することで、Webアプリの公開が可能です。Hostingなどの各種ホスティングサービスも利用することができます。Pagesに置いてみました。iframeで埋め込んでも問題なく動いていますね。webを利用したサンプルを見ることができます。samplesサンプルのその後Flutterで開発する準備が一通り揃ったあとは、是非豊富に用意されたFlutterのWidgetとUIフレームワークを試してみましょう。Flutterは、公式のドキュメントやCodelabsが充実しているため、こちらに沿って一通り試してみるだけでも、基本的な開発手法について学んでいくことが可能です。Flutterまた、日本語の記事としては、@monoさんが執筆されている記事が大変充実しています。私も一年を通して大変お世話になりました。Pluginなど本家Flutterと統合されたことで、プラットフォームに依存しないDartパッケージであれば、基本的には利用可能です。既存のモバイル向けPluginに対しても、Webサポートが追加される動きも出てきました。ブラウザでも代替可能な機能については、今後Webサポートも増えていくかもしれませんね。GitHubこのあたりは追いきれていない部分もあるので、引き続き眺めていきたいところです。packagesとしてリストされていてWebからも検索することができます。Previewであることは変わりません。現在の状態でもFlutterの開発体験やドキュメントの充実度をそのままWebアプリケーション開発にも持ち込めるのは非常に魅力的に映ります。2020年もさらに広がっていきそうなFlutterの世界が楽しみです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。