Flutter for Web で実際にサンプルプログラムを動かしてみる！
2019.05.28
目次
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 技術をキャッチアップしておくのも良いでしょう。
参考
ライトコードよりお知らせ
にゃんこ師匠ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
