Flutter 1.0: Google のポータブル UI ツールキット
Flutter 1.0: Google のポータブル UI ツールキット: この記事は Flutter グループ プロダクト マネージャー、Tim Sneath による Google Developers Blog の記事 "Flutter 1.0: Google’s Portable UI Toolkit" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
本日の Flutter Live では、Google の UI ツールキットの最初の安定版リリースとなる Flutter 1.0 についてお知らせしています。Flutter を使うと、1 つのコードベースから iOS と Android の両方で美しいネイティブ エクスペリエンスを作成することができます。
現在のクロスプラットフォーム モバイル開発は、妥協だらけです。デベロッパーは、複数のオペレーティング システムで複数回同じアプリを構築するか、ネイティブのスピードや移植の正確さを犠牲にして最低限の共通項となるソリューションを受け入れるかのどちらかを選ばざるをえません。Flutter を使うと、両方の良い部分を兼ね備えたソリューションを実現できるはずです。つまり、人気のモバイル オペレーティング システムをどちらも対象にして、ネイティブ ARM コードとハードウェア アクセラレーションを活用したグラフィックや UI を利用できます。
私たちは、Flutter の特徴を 4 つの側面から考えています。
当初より、Flutter は Google のさまざまなプロダクトに利用されています。Google 広告の iOS および Android アプリは、既に Flutter への切り替えが完了しています。1.0 がリリースされる前から、Abbey Road Studios、Alibaba、Capital One、Groupon、Hamilton、JD.com、Philips Hue、Reflectly、Tencent をはじめとする世界中のさまざまなお客様が Flutter でアプリを開発または提供しています。
Capital One チームのエンジニアリング上級ディレクター、Michael Jones 氏は、Flutter の利用について次のように述べています。
Collins Family Orchards アプリのデベロッパーである Dean Papastrat 氏は、その経験について次のように述べています。
Flare で作成したアニメーションは、ウィジェットとして既存の Flutter アプリに埋め込み、完全なコンポジタの一部として追加したり、別のテキストやグラフィック レイヤー、または UI ウィジェットなどと重ね合わせることができます。このような形でアプリに組み込むことで、アニメーションが他のアーキテクチャによる「ブラック ボックス」的な制限を受けることがなくなり、アプリが完成する瞬間までデザイナーとデベロッパーが連携できるようになります。このように Flutter と Flare は緊密に統合されているので、洗練されたモバイル エクスペリエンスを作成したいと考えているデジタル デザイナーやアニメーターには、非常に魅力的で他にはない選択肢となります。
Flutter に期待を寄せているもう 1 つのパートナーが Nevercode です。Nevercode は、モバイルアプリ用の継続的インテグレーションおよびデリバリ（CI/CD）ツールのプロバイダとして、急成長を遂げています。同社は Flutter Live で Codemagic を発表しました。これは Flutter 専用に設計された新ツールで、Android と iOS の両方で 1 つの自動操作から簡単に、Flutter アプリのビルドおよびパッケージ化プロセスを自動化できます。本日は、Codemagic のベータ版が公開されています。Flutter プロジェクトを含む GitHub リポジトリを選択すると、わずか数クリックで、テストを実行してバイナリ アプリバンドルを生成する継続的ビルドフローを作成できます。このバンドルは、Apple や Google Play のストアにアップロードできます。
デベロッパーがベータ版以降の Flutter を使って開発したさまざまなアプリをまとめて紹介する、短い動画を作成しました。
Flutter には、最新バージョンとなる Dart プラットフォーム 2.1 も含まれています。Dart 2 へのアップデートでは、コードサイズの縮小、型チェックの高速化、型エラーに関するユーザビリティの向上が提供されます。Dart 2.1 には新たな言語機能も追加されており、ユーザー エクスペリエンスを構築する際の生産性が向上します。既に Dart 2.1 を採用しているデベロッパーからは、最新のエンジンに切り替えるだけで大幅にスピードが向上したという声が寄せられています。
1.0 リリースではバグの修正と安定化を主眼としていますが、2 つの主要なデベロッパー向け新機能のプレビューも追加しています。これは、2019 年 2 月に予定している次の四半期のリリースに含まれる機能を、プレビュー モードで試していただくためのものです。具体的には、 アプリに追加 と プラットフォーム ビューの 2 つです。
すべての Flutter アプリにはホスト Android および iOS コンテナが含まれているので、Flutter のアーキテクチャはこのモデルをうまくサポートできます。しかしもっと簡単に、少しずつ Flutter を採用できるように、テンプレートやツール、既存アプリ向けのガイドを更新しています。Flutter とホストコードとの間でアセットを簡単に共有できるようにする対応も行いました。また、ツールを手直しして、デバッガやアプリケーションを起動しなくても既存の Flutter プロセスに簡単に接続できるようにしています。
今後も、操作性を向上させるための作業を継続します。アプリに Flutter を追加するためのガイドは、既にたくさんの方に活用していただいていますが、サンプルを追加し、複雑なシナリオのサポートを強化する作業は現在も続いています。当面の間、既存アプリに Flutter を追加する手順は Wiki に掲載します。その他の作業の状況は、GitHub プロジェクト ボードで確認できます。
そこで、プラットフォーム ビュー ウィジェット（
他のコンポーネントと同じく、プラットフォーム ビュー ウィジェットもコンポジション モデルの一部になっています。つまり、このウィジェットも他の Flutter コンテンツと統合することができます。たとえば、上のスクリーンショットの右下隅にあるフローティング アクション ボタンは、背景色のアルファが 50% になっている Flutter ウィジェットです。ここから、Flutter 独自のアーキテクチャのメリットがよくわかるでしょう。
この機能はデベロッパーに試していただける状態になっていますが、パフォーマンスや端末の互換性を改善する作業が続いているので、PlatformView を使うアプリをデプロイする際は十分注意してください。プラットフォーム ビューの最適化作業を積極的に続けており、次の四半期アップデートで製品版として利用できるようになる見込みです。
この作業の一部は、既に公開されています。Flutter Desktop Embedding は、Flutter を Windows、MacOS、Linux などのデスクトップ オペレーティング システムで動作させるための初期段階プロジェクトです。さらに先日、完全なデスクトップ環境を含まない小規模端末に対する Flutter の埋め込みサポートのデモとして、Flutter を Raspberry Pi で使うための非公式詳細情報を公開しました。
今週の Flutter Live では、Flutter が動作する場所を飛躍的に拡大させる現在実験中の試験運用版プロジェクトについても、ほんの少しだけ紹介しました。
Hummingbird は、ウェブベースの Flutter ランタイム実装で、ネイティブ ARM コードへのコンパイルだけでなく、JavaScript にもコンパイルできるという Dart プラットフォームの機能を活用しています。これにより、何の変更も加えることなく、Flutter コードを標準ベースのウェブで実行できるようになります。
Hummingbird の実装の詳細を含む技術情報は、Medium の別のブログ記事に記載しています。2019 年の Google I/O では、Hummingbird についてもっと詳しくお伝えする予定です。どうぞお楽しみに！
もちろん、現在はモバイルが最優先であることは間違いありません。今後数か月間で、中核であるモバイル シナリオへの大きな注力の成果をご覧いただけるはずです。
Flutter 1.0 は、ウェブサイト https://flutter.io からダウンロードできます。このサイトには、他のフレームワークから移行するデベロッパー向けのドキュメントや、コードラボ、一般的なサンプルを取り上げたクックブック、技術解説動画も掲載されています。
これまで共に歩み、フィードバックの提供、問題の特定、コンテンツの作成、汎用プロダクトの検討などの際に助力してくださった先行ユーザーの皆さんには、とても感謝しています。Flutter コミュニティは、私たちにとってプロジェクトとして最高の資産の 1 つであり、このオープンソース プロジェクトについて気にかけ、献身的に奉仕し、あたたかく、多様で、有能な皆さんのおかげで成り立っています。本当にありがとうございます！
ぜひ Flutter をご利用ください。皆さんは何を作りますか？
Reviewed by Takuo Suzuki - Developer Relations Team
本日の Flutter Live では、Google の UI ツールキットの最初の安定版リリースとなる Flutter 1.0 についてお知らせしています。Flutter を使うと、1 つのコードベースから iOS と Android の両方で美しいネイティブ エクスペリエンスを作成することができます。
現在のクロスプラットフォーム モバイル開発は、妥協だらけです。デベロッパーは、複数のオペレーティング システムで複数回同じアプリを構築するか、ネイティブのスピードや移植の正確さを犠牲にして最低限の共通項となるソリューションを受け入れるかのどちらかを選ばざるをえません。Flutter を使うと、両方の良い部分を兼ね備えたソリューションを実現できるはずです。つまり、人気のモバイル オペレーティング システムをどちらも対象にして、ネイティブ ARM コードとハードウェア アクセラレーションを活用したグラフィックや UI を利用できます。
Flutter の概要
Flutter は、従来の Apple や Android のモバイルアプリ構築モデルを置き換わるものではありません。Flutter はアプリエンジンで、既存のアプリに埋め込むことも、まったく新しいアプリを作成する際に使うこともできます。私たちは、Flutter の特徴を 4 つの側面から考えています。
- Flutter を使うと、美しいアプリを構築できます。私たちは、基盤となるフレームワークの制限に縛られることなく、デザイナーが最大限に創造性を発揮できるようにしたいと考えています。Flutter は、画面上のすべてのピクセルまで制御でき、グラフィック、動画、テキスト、コントロールを何の制約もなく重ねたりアニメーションさせたりできる強力な描画機能を備えています。Flutter にはフルセットのウィジェットが含まれており、iOS と Android の両方でピクセルパーフェクトなエクスペリエンスを提供できます。さらに、Google のデジタル エクスペリエンス向けオープン デザイン システムであるマテリアル デザインを最大限に実現しています。
- Flutter は高速です。Chrome や Android と同じく、ハードウェア アクセラレーションに対応した Skia 2D グラフィック エンジンを活用できます。Flutter は、乱れることのないグラフィックを端末のネイティブ スピードで提供できるように設計されています。Flutter のコードには、世界トップクラスの Dart プラットフォームが使われています。Dart は、iOS および Android 向けに 32 ビットおよび 64 ビットのネイティブ ARM コードにコンパイルできます。
- Flutter は、高い生産性を誇ります。Flutter には、 ステートフル ホット リロードが導入されています。これは、モバイルのデベロッパーやデザイナーにとって革命的な新機能で、アプリに対して繰り返し行う作業がリアルタイムで反映されます。ステートフル ホット リロードを使うと、アプリのコードを変更した結果を即座に確認できます。アプリを再起動する必要はなく、状態が失われることもありません。ステートフル ホット リロードは、デベロッパーのアプリ開発方法を変革します。ユーザーへのアンケートによると、デベロッパーの開発サイクルの生産性は 3 倍以上向上しています。
- 最後に、Flutter はオープンです。Flutter は、BSD スタイルのライセンスによるオープンソース プロジェクトで、世界中の数百人に及ぶデベロッパーの貢献によって支えられています。さらに、たくさんのプラグインが提供されている活発なエコシステムが存在します。すべての Flutter アプリは、標準の Android および iOS のビルドツールを使うネイティブ アプリです。そのため、Android では Kotlin や Java、iOS では Swift や Objective-C で書かれたコードや UI を含め、基盤となるオペレーティング システムの機能をすべて利用できます。
Flutter の拡大と勢い
Flutter の最初のベータ版についてお知らせしたのは、10 か月前の Mobile World Congress でした。大変うれしいことに、Flutter はあっという間に広くコミュニティに受け入れられました。その証拠に、1.0 のリリース前にもかかわらず、Apple や Google Play のストアには既にたくさんの Flutter アプリが並んでいます。デベロッパーが UI 開発への新しいアプローチを待ちわびているのは明らかです。当初より、Flutter は Google のさまざまなプロダクトに利用されています。Google 広告の iOS および Android アプリは、既に Flutter への切り替えが完了しています。1.0 がリリースされる前から、Abbey Road Studios、Alibaba、Capital One、Groupon、Hamilton、JD.com、Philips Hue、Reflectly、Tencent をはじめとする世界中のさまざまなお客様が Flutter でアプリを開発または提供しています。
Capital One チームのエンジニアリング上級ディレクター、Michael Jones 氏は、Flutter の利用について次のように述べています。
「Flutter の高パフォーマンスなクロスプラットフォーム開発という独自の機能は、本当にすばらしいです。当社のエンジニアは迅速に開発できるという確約とホット リロード機能を高く評価しており、この 1 年間でネイティブ統合を中心にフレームワークが大きな飛躍を遂げたことも見てきました。本日の Flutter Live イベントでは、人気の決済サービスの Square が Flutter で簡単に商品やサービスを決済できる 2 つの新しい Flutter SDK を発表しました。対面で Square の支払いリーダーを使うことも、モバイルアプリ内で支払いを受けることもできます。Square は、果物を育てて太平洋岸北西部の農産物直売所で販売している家族農場 Collins Family Orchards のアプリを使い、支払い SDK のサンプルのデモを行いました。
Capital One は Flutter を使うことで、機能を「iOS ファーストか Android ファーストか」ではなく、真のモバイル ファースト モデルで考えられるようになりました。Flutter 1.0 の登場をうれしく思うとともに、進化のペースやエンジニアリング コミュニティの期待の大きさに驚いています」
Collins Family Orchards アプリのデベロッパーである Dean Papastrat 氏は、その経験について次のように述べています。
「本番ビルドのアニメーションや画面遷移のスピードに驚かされました。ウェブ デベロッパーなら、簡単に Flutter に移行できます。たった 1 週間で支払いを受け取ることができる完全なアプリを作れたなんて、とても信じられません」さらに Flutter Live では 2Dimensions が、デザイナー向けの画期的な新ツール Flare のリリースを発表しました。このツールを使えば、直接 Flutter アプリに埋め込んでコードで操作可能なベクター アニメーションを作成できます。Flare を使うと、あるアプリでデザインして、別のアプリでアニメーションさせ、それを端末固有のアセットやコードに変換するという作業を省略できます。
Flare で作成したアニメーションは、ウィジェットとして既存の Flutter アプリに埋め込み、完全なコンポジタの一部として追加したり、別のテキストやグラフィック レイヤー、または UI ウィジェットなどと重ね合わせることができます。このような形でアプリに組み込むことで、アニメーションが他のアーキテクチャによる「ブラック ボックス」的な制限を受けることがなくなり、アプリが完成する瞬間までデザイナーとデベロッパーが連携できるようになります。このように Flutter と Flare は緊密に統合されているので、洗練されたモバイル エクスペリエンスを作成したいと考えているデジタル デザイナーやアニメーターには、非常に魅力的で他にはない選択肢となります。
Flutter に期待を寄せているもう 1 つのパートナーが Nevercode です。Nevercode は、モバイルアプリ用の継続的インテグレーションおよびデリバリ（CI/CD）ツールのプロバイダとして、急成長を遂げています。同社は Flutter Live で Codemagic を発表しました。これは Flutter 専用に設計された新ツールで、Android と iOS の両方で 1 つの自動操作から簡単に、Flutter アプリのビルドおよびパッケージ化プロセスを自動化できます。本日は、Codemagic のベータ版が公開されています。Flutter プロジェクトを含む GitHub リポジトリを選択すると、わずか数クリックで、テストを実行してバイナリ アプリバンドルを生成する継続的ビルドフローを作成できます。このバンドルは、Apple や Google Play のストアにアップロードできます。
デベロッパーがベータ版以降の Flutter を使って開発したさまざまなアプリをまとめて紹介する、短い動画を作成しました。
Flutter 1.0 の新機能
私たちは最初のベータ版以降、Flutter の機能追加や品質向上に取り組んできました。特に、新しいウィジェットによるピクセルパーフェクト iOS アプリのサポートを完成させ、20 ほどの Firebase サービスのサポートを追加し、Flutter アプリのパフォーマンス向上とサイズの縮小に対応しました。さらに、コミュニティからのフィードバックに基づき、数千に及ぶ問題を解決しました。Flutter には、最新バージョンとなる Dart プラットフォーム 2.1 も含まれています。Dart 2 へのアップデートでは、コードサイズの縮小、型チェックの高速化、型エラーに関するユーザビリティの向上が提供されます。Dart 2.1 には新たな言語機能も追加されており、ユーザー エクスペリエンスを構築する際の生産性が向上します。既に Dart 2.1 を採用しているデベロッパーからは、最新のエンジンに切り替えるだけで大幅にスピードが向上したという声が寄せられています。
1.0 リリースではバグの修正と安定化を主眼としていますが、2 つの主要なデベロッパー向け新機能のプレビューも追加しています。これは、2019 年 2 月に予定している次の四半期のリリースに含まれる機能を、プレビュー モードで試していただくためのものです。具体的には、 アプリに追加 と プラットフォーム ビューの 2 つです。
アプリに追加
私たちが最初に Flutter を開発したとき、ゼロから新しいアプリを作るシナリオでの生産性に重点を置いていました。しかしもちろん、誰もが何もない状態からスタートできるわけではありません。多数のお客様との会話を通して、既存アプリのユーザーを対象とした新機能に Flutter を使ったり、既存アプリを徐々に Flutter に変換するという用途があることが明らかになりました。すべての Flutter アプリにはホスト Android および iOS コンテナが含まれているので、Flutter のアーキテクチャはこのモデルをうまくサポートできます。しかしもっと簡単に、少しずつ Flutter を採用できるように、テンプレートやツール、既存アプリ向けのガイドを更新しています。Flutter とホストコードとの間でアセットを簡単に共有できるようにする対応も行いました。また、ツールを手直しして、デバッガやアプリケーションを起動しなくても既存の Flutter プロセスに簡単に接続できるようにしています。
今後も、操作性を向上させるための作業を継続します。アプリに Flutter を追加するためのガイドは、既にたくさんの方に活用していただいていますが、サンプルを追加し、複雑なシナリオのサポートを強化する作業は現在も続いています。当面の間、既存アプリに Flutter を追加する手順は Wiki に掲載します。その他の作業の状況は、GitHub プロジェクト ボードで確認できます。
プラットフォーム ビュー
アプリに追加機能は、既存アプリに少しずつ Flutter を導入する方法としては便利ですが、逆に Android または iPhone プラットフォームのコントロールを Flutter アプリに埋め込むと便利な場合もあります。そこで、プラットフォーム ビュー ウィジェット（
AndroidView と UiKitView）を導入しました。この機能を使うと、各プラットフォームにこの種のコンテンツを埋め込むことができます。これまで数か月にわたって Android サポートのプレビューを行ってきましたが、そのサポートを iOS にも拡大し、この機能を活用できる Google マップや WebView などのプラグインを追加できるようにします。 
他のコンポーネントと同じく、プラットフォーム ビュー ウィジェットもコンポジション モデルの一部になっています。つまり、このウィジェットも他の Flutter コンテンツと統合することができます。たとえば、上のスクリーンショットの右下隅にあるフローティング アクション ボタンは、背景色のアルファが 50% になっている Flutter ウィジェットです。ここから、Flutter 独自のアーキテクチャのメリットがよくわかるでしょう。
この機能はデベロッパーに試していただける状態になっていますが、パフォーマンスや端末の互換性を改善する作業が続いているので、PlatformView を使うアプリをデプロイする際は十分注意してください。プラットフォーム ビューの最適化作業を積極的に続けており、次の四半期アップデートで製品版として利用できるようになる見込みです。
モバイル以外の Flutter
今まで、Flutter の主なターゲットは iOS と Android でした。しかし、私たちは、モバイル以外にも幅広いプラットフォームに Flutter を展開したいと考えています。実は、Flutter は元来、ピクセルが描画できるところならどこにでも対応できる柔軟性を持ったポータブル UI ツールキットとして設計されています。この作業の一部は、既に公開されています。Flutter Desktop Embedding は、Flutter を Windows、MacOS、Linux などのデスクトップ オペレーティング システムで動作させるための初期段階プロジェクトです。さらに先日、完全なデスクトップ環境を含まない小規模端末に対する Flutter の埋め込みサポートのデモとして、Flutter を Raspberry Pi で使うための非公式詳細情報を公開しました。
今週の Flutter Live では、Flutter が動作する場所を飛躍的に拡大させる現在実験中の試験運用版プロジェクトについても、ほんの少しだけ紹介しました。
Hummingbird は、ウェブベースの Flutter ランタイム実装で、ネイティブ ARM コードへのコンパイルだけでなく、JavaScript にもコンパイルできるという Dart プラットフォームの機能を活用しています。これにより、何の変更も加えることなく、Flutter コードを標準ベースのウェブで実行できるようになります。
Hummingbird の実装の詳細を含む技術情報は、Medium の別のブログ記事に記載しています。2019 年の Google I/O では、Hummingbird についてもっと詳しくお伝えする予定です。どうぞお楽しみに！
もちろん、現在はモバイルが最優先であることは間違いありません。今後数か月間で、中核であるモバイル シナリオへの大きな注力の成果をご覧いただけるはずです。
まとめ
Flutter 1.0 のリリースと合わせて、既存のベータ版、開発版、マスター版の各チャンネルに加え、新たに「安定版」チャンネルを作成しました。安定版チャンネルの更新頻度は他のチャンネルよりも少なくなりますが、このチャンネルのビルドは他のチャンネルによって吟味されているため、品質の高さは確実です。安定版チャンネルは、四半期ごとに一番実績のあるビルドでアップデートする予定です。Flutter 1.0 は、ウェブサイト https://flutter.io からダウンロードできます。このサイトには、他のフレームワークから移行するデベロッパー向けのドキュメントや、コードラボ、一般的なサンプルを取り上げたクックブック、技術解説動画も掲載されています。
これまで共に歩み、フィードバックの提供、問題の特定、コンテンツの作成、汎用プロダクトの検討などの際に助力してくださった先行ユーザーの皆さんには、とても感謝しています。Flutter コミュニティは、私たちにとってプロジェクトとして最高の資産の 1 つであり、このオープンソース プロジェクトについて気にかけ、献身的に奉仕し、あたたかく、多様で、有能な皆さんのおかげで成り立っています。本当にありがとうございます！
ぜひ Flutter をご利用ください。皆さんは何を作りますか？
Reviewed by Takuo Suzuki - Developer Relations Team
コメント
コメントを投稿