Flutter for Webが発表されたので、早速動かしてみた!! #Flutter

前置き

2019年2月からLIFE PEPPERにエンジニアとして転職しました。
その影響で、現在は機械学習ではなく、Web/iOS/Androidのフロント・バックエンドを担当しています。(基本的にはフロントかな)
Flutter歴は1ヶ月ほど。モバイルアプリの経験はSwiftかじったり、React Nativeでアプリをリリースした経験がある程度です。

経緯

弊社では、4月から新規事業のiOS/Androidを Flutter + Go で開発しています。
技術選定の際にすでにFlutterでWebアプリを開発することができるHummingbirdの存在は知っていて、楽しみにしていたところ、
今回のGoogle I/O 2019で興味深い発表があったので、シェアします。

Flutter for Webが発表されたよ

今回の発表ではFlutter for Webがテクニカルプレビューとして発表されました。
Flutterは昨年の12月にバージョン1.0が正式リリースされ、その際に先に述べたHummingbirdやWindows/Mac/Linuxのデスクトップアプリケーションを開発できるFlutter Desktop Embeddingも同時に発表されています。

今回の発表では、Flutter for Webが試用版として一般利用できるようになったので、早速試してみたいと思います。

環境

Macbook Pro 16GB Mojave 10.14.4
Flutter 1.5.4
Dart 2.3.0
Visual Studio Code 1.33.1

やってみよう

flutter_web はFlutter SDK 1.5.4 以上を要件としています。

// Flutter を Upgrade
$ flutter upgrade 

// flutter_webをクローン
$ git clone https://github.com/flutter/flutter_web.git

// flutter_web用のpackageをインストール
$ flutter packages pub global activate webdev
$ export PATH="$PATH":"$HOME/flutter/.pub-cache/bin"

./bash_profile

// webdevコマンドを使うためにPATHを通す
$ export PATH=/Users/your-flutter-path/flutter/.pub_cache/bin

// PATHを有効化
$ source ~/.bash_profile

// クローンしたレポジトリのexampleを実行していく
$ cd flutter_web/examples/hello_world

$ flutter packages upgrade
! flutter_web 0.0.0 from path ../../packages/flutter_web                
! flutter_web_ui 0.0.0 from path ../../packages/flutter_web_ui          
Running "flutter packages upgrade" in hello_world...               18.6s

// web serverを立ち上げる
$ webdev serve

何もなかったらこれで実行できるようですが、自分はうまく行かなかったので以下のようにして実行を行いました。

ハマりどころ

１ webdebコマンドが効かない

// web serverを立ち上げるとdartコマンドがないと言われる
$ webdev serve
/Users/username/flutter/.pub-cache/bin/webdev: line 7: dart: command not found

@Nkzn さんのFlutter Webを動かしたときにつまづいたことでもあるように、dartコマンドのPATHが通っていないことで起こっているようなので、PATHを通してみます。

./bash_profile

export PATH="$PATH":"$HOME/flutter/.pub-cache/bin" 
export PATH="$PATH":"$HOME/flutter/cache/dart-sdk/bin" // 追加

// それでもコマンドはない
$ dart
-bash: dart: command not found

２　そもそもDart SDK入れていなかった。

Flutter SDKをインストール際に勝手にDartも入っていたので、あるものだと思っていましたが、自身の環境自体にDart SDKはインストールされていませんでした。初歩的ですが、一瞬戸惑いましたのでついでのDart SDKもインストールしましょう。

// Dart SDKをインストールする
$ brew tap dart-lang/dart
$ brew install dart
$ brew update
$ brew upgrade dart
$ brew cleanup dart

参照：初心者のためのDart 2入門

これでdartおよびwebdevコマンドは無事に使えるようになりました。

３それでもエラーは出る

webdevコマンドが使えるようになったので早速実行してみます。

// pub getが必要ということを指摘される
$ webdev serve
webdev could not run for this project.
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" again.

// 実行してみる
$ pub get
Downloading ...

// 再度実行する
$ webdev serve
[INFO] Serving `web` on http://localhost:8080
[INFO] Running build completed, took 14.2s
[INFO] Caching finalized dependency graph completed, took 144ms
[INFO] Succeeded after 14.4s with 548 outputs (3169 actions)

行けました！
これで http://localhost:8080 にアクセスするとHello Worldできるようになります。

せっかくなのでexamplesを全部動かしてみよう

examplesにはhello_worldの他に3つサンプルがあります。これを一つ一つ実行していきます。

注：　自分だけかもしれないのですが、他のサンプルを実行する際に$ webdev serve を実行すると必ず $ pub get するように求められます。ここに関しては調査中です。

custom_fonts

gallery

spinning_square

感想

今回は試用版ですので、まだ製品として利用はできないようですが、Flutterが今後本当にマルチプラットフォーム開発を行える可能を大いに感じる、非常な有意義な時間でした。
公式でもすでに60fpsをサポートしている(?)ので、アニメーションはぬるぬる動きます。
今年には製品版作れるくらいになるのかな？ともあれクロスプラットフォーム開発は楽しいですので、皆さんも是非お時間あれば取り組んでみてください！

Flutter for Webが発表されたので、早速動かしてみた!!

前置き

経緯