Flutter Interact ’19 での発表に触れながら Flutter/Dart の最新動向を追う
日本時間2019年12月12日深夜〜早朝にFlutter Interactというイベントが開催されました。
去年は日本時間で12月5日に同様のイベントがFlutter Liveという名前で開催されたので、今後毎年12月に同様のイベントが恒例化する可能性が高いと思います。
ちなみに、Google I/Oが毎年5月のGW明けくらいに開催されるのも恒例ですが、ここでもFlutterの大きめの発表がなされることが恒例化しつつあり、つまり約半年置きにFlutterの大きな発表で盛り上がる、という良い感じのペースが続きそうです👀
どんな発表があったか
次の2分20秒とコンパクトにまとめられた動画をまず観ることをお勧めします。
- Flutter 1.12リリース (Webがベータ版に)
- DarPad.dev にてFlutter正式サポート
- Supernova
- Rive(旧Flare)
- Adobe XD to Flutter プラグイン
もう少し長い10分のまとめもおすすめです。
全体的なまとめ記事としては以下にとてもよくまとまっています。
動画でとりあえず大事なポイントを一通り観たい場合はまずこの2本は必見です。
残りは Flutter Inteact ‘19全体のYouTubeプレイリスト から興味に応じてつまみ食い程度でも良いかなと思います(僕は一通り目を通しましたが)。
ちなみに去年のFlutter Liveは？
去年も同様に2分半にコンパクトにまとめられた動画があり、Flutter Liveのまとめ動画はこちらです。
去年のトピックは以下あたりですね。
- Flutter 1.0(正式版)リリース
- Square SDK
- 2Dimensions Flare(現Rive)
- Codemagic
- Hummingbird(現Flutter on the web)
11分ともう少し長めのまとめ動画もあります。
Flutterデスクトップ対応の発表もあり、実は発表スライドもFlutter製というサプライズがあったことも印象的でした。
去年〜今年の1年を眺めると、ざっくり次の印象を受けています。
- Flutter本体は順調に進化を続けている
- Web/デスクトップ対応も進んでいる
- FlareはRiveと名前を変えながらもFlutterでリッチなアニメーションを組みたいときの定番ツールとなってきた
- Flutterの持つ高いポテンシャルを活かせるデザイン・コードの架け橋となるようなツールの開発が盛り上がってきている
それでは、以下、今年の発表内容をざっくり紹介しながら自分の感想など述べていきます。
Flutter 1.12リリース
以下の公式ブログ記事によくまとまっていて必読です。
ざっくり抜粋すると次のようになります。
- iOS ダークモード対応
- Cupertino Widgetの拡充・改善(CupertinoContextMenu ・CupertinoSlidingSegmentedControlなど)
- Add-to-App(既存ネイティブアプリ上でFlutterを部分導入)の正式サポート
- Dart 2.7へアップデート
- AndroidXがデフォルトに
- Google Fonts パッケージ登場
- Flutter Galleryがリニューアル
- Webサポートがベータ版に
- デスクトップのうちmacOSサポートがアルファ版に
- Hot UI
- Layout Explorer
- 複数デバイス同時デバッグ(VS Codeのみ)
- Flutter Favorite プログラムが開始
より詳細は以下のリリースノートに大量に載っています。うっかり便利Widgetを見逃して意図せず車輪の再発明などしないようにできる限りチェックしておきましょう✅
ボリュームは過去最大です👀
ちなみに、リリースノートは以前はGitHubのwikiで管理されていましたが、今回のリリースから公式ドキュメントに移って過去のも引っ越しされています。
大体次のような線引きで棲み分けされているように感じます。
- 一般向け: 公式サイト
- よりコアな情報・安定版になる前の情報: GitHubのwiki
[コラム] Flutterのバージョン番号について
マイナーバージョンが 12 となっていて、今月の12月と一緒でちょっと覚えやすい気がしますが、これはあまり偶然でもないのです。
Flutterでは次のchannelが用意されていて、開発者がメリット・デメリットを自分なりに判断して好みのchannleを選ぶ方式になっています(僕はdev推しです)。
- master: 最新・不安定
- dev: テスト済みの最新バージョンが出来次第流れてくる
- beta: 毎月devから最良の状態のものへ追従(Bad-Builds が流れてこないようにケアされている)
- stable: 四半期ごと目安くらいに安定版がリリースされる(致命的な不具合についてはhotfixリリースも追加でされます)
セットアップ直後のデフォルトは最も無難な stable で、またこれが正式リリースとしてアナウンスされます。今回1.12としてアナウンスされたのも、すでに開発済みの過去の対応から良さそうなコミットを見つけてさらに必要に応じて重要度の高い問題対応を hotfix として限定的にcherry pickするなどして仕上げられたものです。
beta は上述の通り、毎月リリースで、これに応じてマイナーバージョンが上がっていくため、1年前の1.0から12個の積み重ねがあって1.12となりました(多少のズレはちょくちょくありますが、1.x系はどれも概ねx月にタグ付けされてきました)。
そのため、 stable 以外のchannelで開発していて日々改善・追加機能などを追っている場合、今回のFlutter自体の発表は当然目新しいものはないです。Flutterは完全OSSなので、サプライズなどのためによほど無理して隠されたりしない限りはIssue・プルリク・コミットなど読めば全て把握可能です。
ちなみに、 stable 以外での開発はそこまで危険(高リスク)なことでもないと思っていて、例えばGroupon・Alibaba・EyeEmなどこれまで大手サービスが採用していたAdd-to-Appは、これまではstable では使えない機能で、つまりこれらのサービスはおそらく dev か beta チャンネルを採用していたことになります。
ちなみに、このAdd-to-appに関しては、前述の通り今回のv1.12 にて stable でも使えるようになりました。
Flutterの各種アップデートから個人的に注目したものを取り上げて紹介
以下、今回アナウンスされた内容から特に興味深いなと思った点について取り上げていきます。
Google Fontsパッケージ
https://youtu.be/NfNdXgJZfFo?t=770 あたりから紹介されています。
HTTP通信でフォントを取得してローカルにキャッシュする仕組みなために扱いがとても簡単(別途アプリに同梱する記述が不要)ですが、初回起動時にシステムフォントがチラ見することだけは多少意識した方が良いかもしれません。
こちらの記事も参考になります:
Hot UI
https://youtu.be/ukLBCRBlIkk?t=1835 あたりからデモが観られます。
レイアウトのプレビューを確認できたりGUIからプロパティの変更を行えるなど便利そうで、以前から注目していた機能ですが、一般向けの発信として初お披露目になりました。
ただ、まだ当初計画していたような機能提供はされおらず、引き続き今後に期待という感じです。ただ、開発が着々と進んでいる様子が窺えて良かったです。
Layout Explorer
https://youtu.be/ukLBCRBlIkk?t=2045 あたりからデモが観られます。
こっそり対応していたようで、flutter/devtools リポジトリを検索すると、発表直前のIssue・PRが確認できます👀
特にFlutterのレイアウトシステムに慣れてないフェーズで苦労するレイアウトエラーとの格闘が、このツールサポートのおかげでかなり楽になるのではと思います。
リニューアルされたFlutter Gallery 2.0
Flutterの豊富なWidgetの公式サンプルとして、ソースコードの参考としても実際のUIの参考としても重宝されていたGalleryサンプルですが、それが2.0としてリニューアルされました。
ソースコードは以下で管理されています。
- https://github.com/flutter/flutter/tree/master/examples/flutter_gallery: 以前からあって、リニューアル前のUI
- https://github.com/flutter/samples/tree/master/gallery: 今回リニューアルされたバージョン
後者はビルド済みのアプリも配布されていて、そちらに収束するのかな？と思いつつ、前者も更新されていて位置付けがよく分からないです🤔
Flutter開発チーム内部で実験的に開発中のGUIツール
https://youtu.be/NfNdXgJZfFo?t=1000 からのデモの様子を見るのが良いと思います。まだまだ開発初期段階のようですが、これが良い感じに実るとGUIでFlutterのデザインを調整したりレスポンシブ対応ができるようになるかもしれません。なんとなく1年以上のタイムスパンで気長に捉えて忘れた頃に朗報が来るのを期待する程度が良いかなと思いました🍵
Dartの進化
Flutter同梱のDartが2.7になりました。
拡張メソッド対応が書かれていますが、2.6でプレビュー対応されてそれがほとんどそのまま2.7で正式対応扱いに昇格しただけのはずなので、拡張メソッド対応は2.6のイメージを持っている人が多いと思います。待ち望んでいる人が多かったであろう機能なので、このタイミングで改めてアピールしているという側面もあると思います。
以前地味にリリースされているのを見つけて個人的に喜んでた characters パッケージ ですが、それも拡張メソッドの活用事例ということもあり紹介されています。
さらにNull安全がプレビュー版としてリリースされていて、それ用のPlaygroundまであります。ただ、これは2.6でプレビュー対応されてほとんど間を置かずに正式リリースされた拡張メソッドとは違い、正式対応には今後数ヶ月はかかるとのことです。
DartのNull安全導入状況 (NNBD) - Qiita
NNBDは純粋にDartの機能ですが、そのDartの最近の人気は一重にFlutterの人気によるものです。また、Dart…
qiita.com
analysis_options.yaml に以下の指定をすると試せますが、今やってもいろいろ煩わしさが増えるだけで実用は厳しそうな気がします。
analyzer:
enable-experiment:
- non-nullableまた、pub.dev にて、パッケージに「いいね」を付けられるようになったことが紹介されていて、それ以外にもいろいろ表示改善がされて使いやすくなっています。
今年のDartは更新が活発だったので、この機会にそれらもざっとおさらいしましょう
Dart 2.3 (2019年5月)
... (スプレッド演算子)などの追加でUIコードが書きやすくなった(Flutterを意識した対応)。
Dart 2.5 (2019年9月)
- ML Complete プレビュー版
dart:ffi(当時プレビュー版で2.6ではベータ版)
Dart 2.6 (2019年11月)
Dart 2.6からは今回Flutter stable リリースされたFlutter 1.12とセットのリリースとなります。 stable 版を使っている人がけっこう多いのか、このタイミングで2.6でプレビュー対応(2.7で正式対応)された拡張メソッドが話題になっている様子がちらほら見えました。
また、dart2nativeで単独で高速実行できるバイナリを生成できるようになって、今後のDart普及の後押しになりそうな期待を持てます。
DartPadのFlutterサポート
Flutter Interactの数日前にDartPadのFlutter正式サポートがアナウンスされました。それまでもベータ対応みたいな感じはされてたり各所で有効活用されてましたが、晴れて正式サポートになりました。
基本的なキーボードショートカットも対応していて、ちょっと遅いですが補完入力にも対応しているので、いざとなったら簡単なアプリならChromeブラウザ上で書けちゃいそうですね。
Webページのiframe埋め込みも可能で、詳しいやり方はEmbedding Guide · dart-lang/dart-pad Wikiに載ってます。
Dartは https://medium.com/dartlang/latest に過不足なくまとまっているので、リリース済みの新機能について知りたい場合はとりあえずこれをしっかり読めば抜け漏れないという安心感があります。もう少し詳しく網羅したい場合は CHANGELOG を読みましょう。
FlutterのWeb・デスクトップサポート
Flutter on the web ベータ版
Flutterのweb対応は以下のように進められてきました。
- ちょうど1年前(2018年12月)のFlutter Liveにてお披露目: Hummingbird時代
- 5月のGoogle I/O 2019にてテクニカルプレビュー版として公開: Flutter for web時代
- その後本体リポジトリへの統合(unfork)が進められ、9月のstableリリース(v1.9.1)あたりで完了
そして、今回晴れてベータ扱いに昇格しました🎉 「Webはもうけっこう使えるよ(意訳)」とのことです🐶
元々のコードネームっぽいHummingbirdからFlutter for webとなって、その後統合されたので”for web”はおかしいけどなんと呼ぶのが正しいのかもやもやしていましたが、セッションでは”Flutter on the web”と呼んでたのでそれが正解な気がしてします🤔
デスクトップ対応
デスクトップ対応としては、イベントの前日にこんな呟きをしていたmacOS版のみが一足先にアルファ版扱いになりました。
実際どんなもんなのかは実際にビルドしてみるのが良いですが、Flutter Gallery 2.0 からダウンロードして試すこともできます。Windows/Linux版のビルド済みアプリも配布されています。
Desktop shells(wiki)・Desktop support for Flutter に書いてますが、flutter config --enable-macos-desktop などするとmacOS向けにFlutterプロジェクトをビルド・実行できるようになります。ネイティブ周りが絡まないプロジェクトならわりとすんなり実行できて問題なく動くことが多いはずです。またネイティブが絡む部分についても、プラグイン対応が進行中なのでどんどん解決されていくことでしょう。
また、このあたりについては次の記事がお勧めです。
様々なデザインツールの登場
Flutterの開発状況を追うだけではなかなか掴みきれず、今回のイベントでなんとなく空気感が掴めた気がするのが、Flutterのデザインツール競争が盛り上がっていて公式もそれを後押ししている様子です。
まず、リッチなアニメーションツールとしてはもう2年連続で紹介されたRive(旧Flare)一強となった認識です。
Supernova
一方、「デザインツールでFlutterアプリを組む」というアプローチのアプリが以前からありましたが、今回公式イベントでSupernovaが大きく取り上げられたことによって今後注目かなと思いました。
https://youtu.be/ukLBCRBlIkk?t=2675 あたりからデモがあるので、それを見たりアプリを試用してみるとどんなツールかイメージつくと思います。
以前から聞いたことはあるもののスルーしていて、今回初めて触ってみた第一印象としてはツールとしてはかなりがんばっている感じはするものの、エンジニアとしてこれを使って嬉しくなる感じは今のところ期待できない気がしました🤔デザイナーとの協業観点では、例えばこれで組んだ画面コードを渡されてもあまり嬉しくない気がしますが、例えばややこしい一部コンポーネントをこういうので作ってもらってそれを渡されたら嬉しい場面もあるかも？と思いました。ただ、FlutterでコードでUI組むのがサクサクできて特に足を引っ張っている部分でもないのでこういうツール補助の恩恵はかなり限定的な気がしてしまいます🤔(特に非エンジニア)がプロトタイピングで雑に組むのに割り切って使う、とかならありかもしれません🤔
もちろん開発が効率化されるに越したことないので、今の僕の期待を良い意味で裏切った素晴らしいツールに育ってくれると良いなとは思っています。
Adobe XD to Flutter Plugin
Adobe XDもFlutterプラグインをリリースしさらにOSSであることをアナウンスしていました。これはアーリーアクセスの申し込みフォームがあるだけで現時点では試すことができません。
https://youtu.be/ukLBCRBlIkk?t=3743 あたりからデモが観られます。デザインツールでは現状、Sketch・Adobe XD・Figmaが三強として凌ぎを削っていますが、そういう普段デザイナーが慣れているツールのうちの1つであるAdobe XD公式サポートの上でそれで組んだものがそのままFlutterコード化できる点は良いと思いましたが、全体的にはSupernovaと同じような印象を抱いています。
とりあえず来年このあたりが盛り上がりそうなので、注目していきたいです👀
以上、Flutter/Dartの最新動向をざっとなぞれた気がします。総括するとこんな感じかなと思います。
- モバイルアプリ対応の完成度は元々高かったがさらに日々進化中
- Dartの言語機能が手厚くなってきてNNBD(null安全)の正式対応が楽しみ
- ツールのサポートも進化中で、元々良かった開発体験がさらに向上中
- Web・デスクトップ(特にmacOS)対応も順調で来年Webから順次正式版に昇格しそうな勢いで、Flutterだけでまともなあらゆるクロスプラットフォームをカバーできてしまう世界が現実的に見えてきた
- デザインツール界隈がホット
その他のセッション
いくつか掻い摘んでざっと紹介します。
Material Theming with Flutter
- 近日公開予定のType Scale Generatorが便利そう(Google Fontsの活用事例でもある): https://youtu.be/stoJpMeS5aY?t=711
- タイトル通り、Material DesignのThemingとFlutterでのその扱い方が分かる内容だった
Designing for the Web with Flutter
- 現状アプリサイズは現状300KB〜だが削減予定
- 動作速度も向上予定
- プラグインのWeb対応も進行中
Use Rive and Flutter for dynamic, interactive, & animated experiences
Rive(旧Flare)がかなり成熟してきて、Flutterにおけるリッチなアニメーションツールとしてもう死角無いなと改めて思いました。しかし、ここまで高い表現力を実際の現場で使いこなせるのだろうかとも思いました🤔
以上、今年も盛りだくさんな12月のFlutterイベントのまとめ + 感想でした。Flutterの盛り上がりを感じる毎日ですが、今後さらにその流れが加速することを確信できた気がします🎯
