Flutter for Web で実際にサンプルプログラムを動かしてみる！

Flutter とは？

Flutter とは、Dart という Google が開発している言語でアプリを開発し、1つのコードで、Android と iOS の両方で動作するネイティブアプリが作成できるという特徴を持っていました。

モバイル向けのクロスプラットフォーム開発ツールとして、「Xamarin」「Cordova」「React Native」 などと比較されることが多いです。

また、2019/5/7「Google I/O 2019」にて Flutter Web が発表されました！

Flutter はさらに野心的に、 Windows、Mac、Fuchsia ( Google が開発中の OS )、Raspberry Pi でも動作するように開発が進められ、さらに今回の発表で Web のサポートも加わりました。

つまり、Flutter はモバイル、Web、組み込み、そしてデスクトップとマルチプラットフォーム対応のUIフレームワークになりつつあります。

ミツオカ

Flutterについてもっと詳しく知りたい方は下の記事をお読みください！

にゃんこ師匠

Flutter(フラッター)の紹介から環境構築まで

Flutter for Webとは？

Flutter for Web は、 HTML、CSS、JavaScript といった標準的なWeb技術を利用して、Flutter をレンダリングする実装です。

Flutter for Web を利用することで、Dart で書かれた既存の Flutter コードを、任意のWebサーバーで配信して、クライアントで実行できます。

Flutter は、現在テクニカルプレビューとして、GitHub リポジトリ (flutter/flutter_web)が提供されています。

Flutter for Webで実現しようとしていること

1. インタラクティブグラフィックのための 60 FPS で動作
2. ほかの Flutter プラットフォームと一貫した動作とビジュアル
3. 既存の開発パターンと統合する高生産性の開発者向けツールの提供
4. すべてのモダンブラウザのコアWeb機能のサポート

Flutter Web のアーキテクチャ

Flutter Web のアーキテクチャは、上の図のようになっています。

緑のエリアが Flutter 、黄色が Web 技術です。

緑の領域は Flutter が受け持っているためモバイルとWebで共有可能となります。

DOM、Canvas、CSS を組み合わせることで Flutter を描画し、高品質・高機能なユーザーエクスペリエンスを実現します。

Flutter for Web を実現するために、コア描画レイヤを Dart で実装されました。

そして、Flutter コアと Flutter のアプリケーションコードが Dart の JavaScript コンパイラによって、JavaScript にコンパイルされます。

生成したJavaScript は minifiled された1つのコードとして提供されます。

あくまでテクニカルプレビュー

Flutter for Web が発表されたとはいえ、あくまでテクニカルプレビューです。

性能評価としては利用可能かもしれませんが、今後も大幅に変更が予想され、本番環境に導入するのは危険が伴うでしょう。

公式からアナウンスされている注意点

1. Flutter for Web は Flutter リポジトリからフォークした状態で開発されています。
2. 順次、web code は Flutter のコアリポジトリに取り込まれつつあります。
3. Flutter widget API はモバイル版と同じですが、パッケージは一時的に分割して提供されます
4. 既存の Flutter アプリケーションを Web プレビュー向けに再パッケージは可能ですが、いくつか注意点があり、GitHub リポジトリで詳細を確認できます。

GitHubで注意書き

1. plugin システムが動作しません
2. Flutter for Web はすべての Flutter API のすべてをまだ実装できていません
3. パフォーマンス調整がまだできてません。速度が遅かったりジャンクコードを生成します。
4. まだデスクトップ UI にはまだ最適化されていないため、Flutter for Web はモバイルアプリの UI のように感じることがあります。
5. 開発ワークフローは現時点では、Chromeと連携するように設計されています。

これを見る限りだと、まだまだ開発途中であることが伺えます。

実際の動作確認

Flutter for Web で作成されたサンプルアプリが以下のサイトで公開されています。

Flutter for web samples

やや動作にカクツキを感じたり、デスクトップで開くとモバイルUIのように感じたりと、まだまだな印象があります。

ですが、モバイル端末で開いたとき、Web サイトでありながらまるでネイティブのモバイルUIのように感じる動作は将来性を感じさせます。

サンプルプログラムを動かしてみる

あくまでテクニカルプレビューであるということを踏まえて、サンプルコードを動かしてみましょう。

サンプルコード

Flutter WEB のサンプルコードは、こちらで公開されています。

flutter/flutter_web

Flutter SDK を導入してください。

Flutter SDK のインストールは別記事で取り上げています。

flutter docktor が実行できるところまで設定できていたら大丈夫です。

1git clone https://github.com/flutter/flutter_web.git

クローンしたら、リポジトリの中に入ります。

実際に動かしてみる

今回は Hello World を表示させます。

1cd flutter_web/examples/hello_world

Flutter Web のビルドツールである webdev パッケージをインストールします。

1flutter pub global activate webdev

実行したら以下のような警告が表示されました。

1Warning: Pub installs executables into $HOME/development/flutter/.pub-cache/bin, which is not on your path.
2You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):
3
4  export PATH="$PATH":"$HOME/development/flutter/.pub-cache/bin"
5
6Activated webdev 2.0.5.

警告にしたがって .bash_profile にパスを追記します。

記述内容は各自の環境にあわせて変更してください。

1export "$PATH":"${Flutter SDKまでのPATH}/flutter/.pub-cache/bin"

追記したら、設定を読み込み有効にします。

1source ~/.bash_profile

次に、examples/hello_world に必要なパッケージをインストールします。

1flutter packages upgrade

そして以下のコマンドを入力して開発サーバーを立ち上げます。

1flutter pub global run webdev serve

しばらくすると、localhost:8080 に開発サーバーが立ち上がるはずです。

Hello World

Flutter for Web では、サーバーへデプロイするためのビルドコマンドが用意されています。

1flutter pub global run webdev build

ビルド結果は build フォルダに出力されます。これをWebサーバーにアップロードするとFlutter WEBアプリケーションとして配信できます。

gallery が楽しい

Flutter のサンプルコードの /example/galleryをビルドすると、どのような Flutter for Web でどのような Widget が用意されているのか確認できます。

Hello World をビルドした手順でぜひビルドして、内容を確認してください。

「ビルドが面倒！」という方は、Flutter web gallery にアクセスするだけで Flutter の Widget を確認できます。

さいごに

新たに発表された Flutter for Web について紹介していきました。

現在、開発中とはいえ、1つのコードでモバイル、デスクトップ、Web とアプリケーション開発が可能になるのは凄く魅力的です。

安定版がリリースされることを見越して、今から Flutter 技術をキャッチアップしておくのも良いでしょう。

こちらの記事もオススメ！

2020.08.14スマホ技術 特集Android開発Android開発をJavaからKotlinへ変えていくためのお勉強DelegatedPropert...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...