Flutter for Web で実際にサンプルプログラムを動かしてみる!
IT技術
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 が実行できるところまで設定できていたら大丈夫です。
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ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の(株)ライトコードです! ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎! また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です! インターンや新卒採用も行っております。 以下よりご応募をお待ちしております! https://rightcode.co.jp/recruit