Flutter for Web で実際にサンプルプログラムを動かしてみる！
2021.12.20
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 for Webとは？
Flutter for Web は、 HTML、CSS、JavaScript といった標準的なWeb技術を利用して、Flutter をレンダリングする実装です。
Flutter for Web を利用することで、Dart で書かれた既存の Flutter コードを、任意のWebサーバーで配信して、クライアントで実行できます。
Flutter は、現在テクニカルプレビューとして、GitHub リポジトリ (flutter/flutter_web)が提供されています。
Flutter for Webで実現しようとしていること
- インタラクティブグラフィックのための 60 FPS で動作
- ほかの Flutter プラットフォームと一貫した動作とビジュアル
- 既存の開発パターンと統合する高生産性の開発者向けツールの提供
- すべてのモダンブラウザのコア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 が発表されたとはいえ、あくまでテクニカルプレビューです。
性能評価としては利用可能かもしれませんが、今後も大幅に変更が予想され、本番環境に導入するのは危険が伴うでしょう。
公式からアナウンスされている注意点
- Flutter for Web は Flutter リポジトリからフォークした状態で開発されています。
- 順次、web code は Flutter のコアリポジトリに取り込まれつつあります。
- Flutter widget API はモバイル版と同じですが、パッケージは一時的に分割して提供されます
- 既存の Flutter アプリケーションを Web プレビュー向けに再パッケージは可能ですが、いくつか注意点があり、GitHub リポジトリで詳細を確認できます。
GitHubで注意書き
- plugin システムが動作しません
- Flutter for Web はすべての Flutter API のすべてをまだ実装できていません
- パフォーマンス調整がまだできてません。速度が遅かったりジャンクコードを生成します。
- まだデスクトップ UI にはまだ最適化されていないため、Flutter for Web はモバイルアプリの UI のように感じることがあります。
- 開発ワークフローは現時点では、Chromeと連携するように設計されています。
これを見る限りだと、まだまだ開発途中であることが伺えます。
実際の動作確認
Flutter for Web で作成されたサンプルアプリが以下のサイトで公開されています。
やや動作にカクツキを感じたり、デスクトップで開くとモバイルUIのように感じたりと、まだまだな印象があります。
ですが、モバイル端末で開いたとき、Web サイトでありながらまるでネイティブのモバイルUIのように感じる動作は将来性を感じさせます。
サンプルプログラムを動かしてみる
あくまでテクニカルプレビューであるということを踏まえて、サンプルコードを動かしてみましょう。
サンプルコード
Flutter WEB のサンプルコードは、こちらで公開されています。
Flutter SDK を導入してください。
Flutter SDK のインストールは別記事で取り上げています。
flutter docktor が実行できるところまで設定できていたら大丈夫です。
1 | git clone https://github.com/flutter/flutter_web.git |
クローンしたら、リポジトリの中に入ります。
実際に動かしてみる
今回は Hello World を表示させます。
1 | cd flutter_web/examples/hello_world |
Flutter Web のビルドツールである webdev パッケージをインストールします。
1 | flutter pub global activate webdev |
実行したら以下のような警告が表示されました。
1 2 3 4 5 6 | Warning: Pub installs executables into $HOME/development/flutter/.pub-cache/bin, which is not on your path. You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.): export PATH="$PATH":"$HOME/development/flutter/.pub-cache/bin" Activated webdev 2.0.5. |
警告にしたがって .bash_profile にパスを追記します。
記述内容は各自の環境にあわせて変更してください。
1 | export "$PATH":"${Flutter SDKまでのPATH}/flutter/.pub-cache/bin" |
追記したら、設定を読み込み有効にします。
1 | source ~/.bash_profile |
次に、examples/hello_world に必要なパッケージをインストールします。
1 | flutter packages upgrade |
そして以下のコマンドを入力して開発サーバーを立ち上げます。
1 | flutter pub global run webdev serve |
しばらくすると、localhost:8080 に開発サーバーが立ち上がるはずです。
Hello World
Flutter for Web では、サーバーへデプロイするためのビルドコマンドが用意されています。
1 | flutter 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 技術をキャッチアップしておくのも良いでしょう。
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
