Flutter: モバイル、ウェブ、組み込み、そしてデスクトップのポータブル UI フレームワーク

この記事は Flutter チーム による Google Developers Blog の記事 "Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


投稿者: Flutter チーム


本日は、Flutter フレームワークにとって重要なマイルストーンとなる日です。これまではモバイルに重点を置いていましたが、今後はさまざまな端末やプラットフォームに展開することになるからです。I/O では、ウェブ用 Flutterの最初のテクニカル プレビューをリリースし、Flutter が Google Home Hub を含む Google のスマート ディスプレイ プラットフォームで利用されていること、Chrome OS でデスクトップクラスのアプリのサポートに向けた最初の一歩を踏み出したことを発表します。

モバイルからマルチプラットフォームへ

長い間、Flutter チームのミッションは、iOS と Android でモバイルアプリを開発するためのより良いフレームワークを作ることでした。現在、デベロッパーは、2 つのプラットフォームで同じアプリを 2 回開発するか、妥協してクロスプラットフォーム フレームワークを使うかの選択を迫られます。そのため、私たちはモバイル開発の改善が求められているときだと感じています。Flutter を使うと、1 つのコードベースで、高速でカスタマイズも可能な機能を提供できるだけでなく、デベロッパーは両方のプラットフォームで高い生産性を実現できます。私たちの初期の努力が、特に人気のあるオープンソース プロジェクトの 1 つとして花咲く姿を目にして、とてもうれしく思っています。


昨年の 1.0 リリースに狙いを定めたとき、Flutter を他のプラットフォームにも拡大する実験を始めました。そのきっかけは、Google 内部のチームで Flutter の採用がますます増加し、ポータブルな機能を提供できる Dart プラットフォームの潜在的能力が明らかになってきたことです。特筆すべき点は、既に内部用に Dart 向けウェブ フレームワークを作っていた小さなチームが、標準ベースのウェブをサポートするように Flutter エンジンを移植した場合の技術的なメリットを評価するため、実験的プロジェクト（コードネーム「Hummingbird」）を開始したことです。


このプロジェクトの結果はめざましいものでした。その大部分は、Chrome、Firefox、Safari などのウェブブラウザの急速な進展によって、ハードウェア アクセラレーションによるグラフィック、アニメーション、テキストが提供され、JavaScript の高速実行が広く普及したおかげだと言えます。プロジェクトの最初の数か月でコア Flutter フレームワークのプリミティブが動作するようになり、その後まもなく、モバイルとデスクトップのブラウザでデモを行えるようになりました。Dart では、コンパイルしてウェブで動作させるということが長い間行われてきましたが、それと合わせて、Flutter のフレームワークとアプリをウェブで実行できることも証明できました。


これと並行して、コア Flutter プロジェクトもデスクトップクラスのアプリを実現するための進化を果たしてきました。具体的には、キーボードやマウスなどの入力パラダイム、ウィンドウのリサイズ、Chrome OS アプリ開発用のツールなどに対応しました。Windows、Mac、Linux で実行するデスクトップクラスのアプリに Flutter を埋め込むという実験的な試みも、コア Flutter エンジンに組み込まれることになりました。

あらゆる画面に対応したポータブル UI フレームワーク

この高パフォーマンスなポータブル UI フレームワークは、1 つのコードベースで、多様なフォーム ファクタに対して、美しくカスタマイズ可能な機能を提供できます。そのビジネス上の可能性は、少し立ち止まって考えてみるだけの価値があります。


スタートアップ企業は、同じアプリでモバイル、ウェブ、デスクトップからユーザーにアプローチできることで、技術的な要因による制限に阻まれることなく、初めからすべての端末を対象にすることができます。また、特に大企業では、1 つのコードベースですべてのユーザーに同じ機能を提供できることで、複雑さや開発費用を削減でき、機能の質の改善に集中することができます。


モバイル、デスクトップ、ウェブのアプリをサポートすることで、私たちのミッションも広がります。私たちが願っているのは、あらゆる 画面に対応した美しい機能を開発するための最高のフレームワークを作ることです。

ウェブの Flutter

今週、ウェブ用 Flutter の最初のテクニカル プレビューをリリースしています。このテクノロジーはまだ開発途上ですが、先行ユーザーに試していただき、フィードバックを受け取る準備はできています。ウェブの Flutter がまず目指すのは、HTML が最も得意とするドキュメント構造を汎用的に置き換えることではありません。そうではなく、Flutter はインタラクティブ性が高く、グラフィックスを多用したコンテンツを構築する優れた方法になると考えています。そのようなコンテンツでこそ、洗練された UI フレームワークのメリットが強く感じられるはずです。


ウェブ用 Flutter の紹介として、New York Times と協力してデモを作成しています。New York Times は、世界屈指のニュース取材に加え、クロスワードなどのパズルゲームでも有名です。熱心なファンは、どんな端末を使っているときでもパズルを解きたがります。そのため開発チームは、そのニーズに対する潜在的なソリューションとして Flutter に魅力を感じていました。ウェブでも同じコードが使えるとわかったことは、非常に大きなメリットでした。今週の Google I/O では、刷新された KENKEN パズルゲームを少しだけお見せします。Android、iOS、ウェブ、Mac、Chrome OS で同じコードを動かしています。


New York Times のパズル担当エグゼクティブ ディレクター Eric von Coelln 氏は、Flutter について次のように述べています。

「40 万人以上が New York Times のクロスワードを単独で購読しており、愛好家にとってこのパズルは日々欠かせないものになっています。また、クロスワードに加えてデジタルパズルのレパートリーも増やしており、毎月 200 万人以上がパズルに挑戦しています。

魅力的で高品質なモバイル体験を短時間で開発するというのは、難しい問題です。この問題を解決できる潜在的なソリューションとして、Flutter を試し始めていました。ウェブ版を公開できる機能が加わったことで、すべてのユーザー プラットフォームにすばやく機能を提供できる方法として、Flutter はますます魅力的な選択肢になっています。今年は古い Flash ベースの KenKen ゲームをアップデートしてさまざまなプラットフォームで楽しめるようにして、パズル愛好家の皆さんに提供できたことをうれしく思います」


ウェブ用の Flutter については、まだまだお伝えしたいことがありますが、とても紙面が足りません。そのため、詳しくは Flutter ブログのウェブ用 Flutter についての記事をご覧ください。


現在の初期段階では、ウェブ用 Flutter をどのように使いたいかについてのフィードバックをお願いしたいと思っています。特にパフォーマンスに関する部分や、他の Flutter プロジェクトのコードベースとの同期によって、コードはすぐに進化するものと思われます。

モバイル端末の Flutter

今週はコア Flutter フレームワークのアップグレードも行われており、安定版チャンネルで早速 Flutter 1.5 が利用できます。Flutter 1.5には、デベロッパーの皆さんからのフィードバックに基づいて数百項目の変更が行われています。たとえば、App Store の新しい iOS SDK 要件に対応するアップデート、iOS および Material ウィジェットのアップデート、新しい端末タイプのエンジン サポート、コードで UI を記述する新しい言語機能を搭載した Dart 2.3 などです。


フレームワーク自身の成熟と合わせて、それをサポートするエコシステムの発展にも注力しています。Flutter のアーキテクチャ モデルは、充実したパッケージ コミュニティに支えられた小さなコア フレームワークという姿を常に目指しています。ここ数か月で、Google はウェブビュー、Google マップ、Firebase ML Vision の本番環境品質のパッケージを準備してきました。そして今週は、アプリ内課金の初期サポートも追加しています。2,000 以上のオープンソース パッケージが利用できる Flutter は、ほとんどのシナリオに対応できる選択肢を持っています。


今週 I/O でお知らせした特におもしろいプロジェクトが、ML Kit のカスタム イメージ分類です。Flutter と Firebase を使って構築されているこの機能は、使いやすいアプリベースのワークフローでカスタム イメージ分類モデルを作成する機能を提供します。これを使うと、同じアプリの中で、スマートフォンのカメラを使ってトレーニング データを収集したり、データセットに貢献してくれる人を招待したり、モデルのトレーニングを起動したり、トレーニング済みのモデルを使ったりすることができます。

Flutter の人気と採用数は増え続けています。eBay、Sonos、Square、Capital One、Alibaba、Tencent など、要求の厳しいユーザーが Flutter でアプリを開発するケースが増えています。そして、この皆さんは楽しんでいます。eBay のシニア デベロッパー Larry McKenzie 氏は、Flutter について次のように述べています。

「Flutter は高速です！かつては実装に何日もかかっていた機能が、1 日で完成します。多くの時間を費やしていたたくさんの問題に悩まされることは、もうありません。私たちのチームは、洗練されたユーザー エクスペリエンスを作って機能を提供することに集中できます。Flutter のおかげで、期待以上のことができるようになっています！」

また、LinkedIn が先日行った調査によれば、直近 12 か月のメンバーのプロフィールにおいて、Flutter は ソフトウェア エンジニアの中で最も早く広まっているスキルです。また、最新の 2019 年 StackOverflow デベロッパー アンケートでは、Flutter が特に好まれているデベロッパー フレームワークの 1 つにあげられています。

デスクトップの Flutter

Flutter はデスクトップでも使われています。ここ数か月間で、私たちは実験的プロジェクトとしてデスクトップ対応を行ってきました。しかし、現在その段階は終了し、成果は Flutter エンジンのメインライン リポジトリに直接組み込まれています。まだ本番環境向けではありませんが、Mac、Windows、Linux で Flutter アプリを動かすための開発手順の初期版を公開しています。


急拡大しているもう 1 つの Flutter プラットフォームが Chrome OS です。Chromebook は毎年数百万台が販売されており、特に教育分野で人気です。Chrome OS は Android アプリと Linux アプリの両方の実行をサポートしているので、Flutter アプリの実行用としても、デベロッパー プラットフォームとしても、Flutter に理想的な環境です。Chrome OS では、Visual Studio Code か Android Studio を使って Flutter アプリを開発し、エミュレータを使わずに同じ端末のローカルでテストしたり動作させたりすることができます。Chrome OS 用の Flutter アプリを Play ストアで公開することもできます。そうすることで、たくさんの方が皆さんの作品を活用できるようになります。

組み込み端末の Flutter

Flutter のポータビリティを表す最後の例として、その他の端末に組み込んで使う Flutter も提供しています。先日、Raspberry Pi などの小規模端末で直接 Flutter を実行するサンプルを公開しました。家庭や自動車などのシナリオで利用できる Flutter 用の組み込み APIも提供しています。


ひょっとすると、既に Flutter を実行している組み込みプラットフォームで最も普及しているのは、Google Home Hub などを動かしているスマート ディスプレイのオペレーティング システムかもしれません。

スマート ディスプレイ プラットフォーム用に Google が開発した機能の中には、現在の Flutter が使われているものがあります。また、アシスタント チームは、今後数か月間、Flutter で構築した機能群をスマート ディスプレイ用に展開する作業を続ける予定です。今年の目標は、Flutter を活用してシステム全体の UI を進化させることです。

その他のリソース

私たちがデベロッパーの皆さんによく聞かれるのは、どうやって Flutter を始めたらよいかということです。うれしいことに、本日は Flutter の新しいトレーニング コースをお知らせします。このコースは、Udemy で最も評価の高い iOS トレーニング コースの作者である The App Breweryが制作しました。この新しいコースには、動画、デモ、ラボなど、Flutter 向けの 30 時間以上のコンテンツが含まれています。そして、Google のサポートにより、期間限定でこのコースを通常価格の 199 ドルからなんと 10 ドルという割引価格で提供することも発表されています。


多くのデベロッパーが Flutter で画期的なアプリを作っています。Google I/O に向けて、Flutter Create というコンテストを開催しました。これは、5 KB 以内の Dart コードと Flutter を使ってできることを競うものです。このコンテストには、世界中から 750 件を超えるエントリーがあり、中にはこんな小さなサイズでここまでできるのかと驚かされるものもありました。


本日、flutter.dev/createで入賞作品を発表しています。優勝者の Zebiao Hu さんには、1 万ドル以上の価値があるフル装備の iMac Pro が贈られます。おめでとうございます！
もう Flutter はモバイル フレームワークではありません。どんなところにいるユーザーにでも使ってもらえるマルチプラットフォーム フレームワークです。ウェブ、デスクトップ、モバイルなどで、皆さんが Flutter を使って作るものを見るのが待ちきれません！


Reviewed by Takuo Suzuki - Developer Relations Team