このブログの目的は、FlutterNinjas Conference で発表されたトピックや技術を紹介することです。すべてのトピックを詳しく説明することはできませんが、最新の技術や情報の概要をお伝えいたします。 少しでも情報を得ることで、自分のプロジェクトに何か応用できる可能性があります。時には、知識を得て初めて応用できることもあります。 そのため、私はただ知識を広めたいと考えております。
FlutterNinjas Conference とは?
FlutterNinjas Conference は、東京で開催される英語話者向けの Flutter カンファレンスです。
日本初の英語向け Flutter イベントです!
詳細:
- 日程: 2024 年 6 月 13 日(木)~ 14 日(金)
- 場所: 東京 ドコモ R&D お台場オープンラボ(定員 200 名)
詳細
FlutterNinjas Conference 参加の理由と学び
FlutterNinjas Conference に参加した理由はいくつかあります。まず、Monstarlab でほぼすべてのモバイルアプリに使用されている Flutter の Riverpod ライブラリについて、もっと深く学びたかったからです。また、Riverpod の創設者である Remi Rousselet に直接会い、専門家から学べるというのも大きな動機でした。
さらに、Flutter の最新ツールや技術に追いつくための良い機会でもあり、アプリ開発をより効率的に進めるための新しい機能を知ることができました。最後に、他の Flutter 開発者とネットワークを広げ、知識を共有することも楽しみにしていました。
まとめると、Flutter のスキル向上と Monstarlab での活用、そして最新技術の習得のために参加しました。
Riverpod 3.0 プレビュー - by Remi Rousselet
- 50 件のバグが修正されました。詳細と変更ログ
- ジェネリックプロバイダが導入されました
mounted
チェックが可能になりました- テストがより簡単に、そして少ないコードで可能に!
プロバイダの初期化なしでリスンが可能になりました。
初期化の手間がなく、非常に簡単です。 - より良い副作用のサポート「Mutations」
POST リクエストがとても簡単に。
ボタンの状態:ローディング、エラー、成功
すべてのロジックが同じ場所に。
複数回クリックを防止。 - 自動リトライ - 指数バックオフを使用
プロバイダ内でのリトライロジックが非常に簡単に。
retry
パラメータを使用。 - オフラインキャッシュ
シリアライズ
アノテーション、古いキーをオフラインストレージから削除するためのdestroy key
使用。
詳細は公式ページをご覧ください
Flutter のテキスト表示に関する問題
日本語テキスト表示の問題 - サイズ
Flutter では、日本語テキストの表示において、iOS と Android 間で高さに違いが生じる問題があります。
開いている問題
この問題は、iOS では正常に表示されるのに対し、Android では日本語の文字が少し下寄りに表示されることが確認されています。

例
例えば、Android で表示された日本語の文字は、iOS と比べて下の方に寄っているように見えます。これは、2 つのプラットフォーム間でフォントのレンダリング方法が異なることに起因しています。この問題は現在も解決されておらず、開いている課題の一つです。

CI/CD における「ホワイトラベリング」
こちらでは、CI/CD における「ホワイトラベリング」について説明いたします。ホワイトラベリングとは、アプリを異なる顧客向けに再ブランド化し、そのプロセスを自動化することを指します。これにより、コアアプリをカスタマイズし、複数の顧客向けに簡単にビルドして、ストアやその他の配信チャネルに公開することが可能になります。
詳細については、Code Magic のホワイトラベルドキュメントをご参照ください。
CodeMagic ホワイトラベルアプリの概要
Rive と Flutter でのアニメーション
なぜ Rive を使うのか?
Rive を使うことで、コードでアニメーションをコントロールできます。また、複雑なデザイナーと開発者のハンドオフが不要になり、デザイナーがインタラクティブでリッチなアニメーションを作成することで開発時間を短縮できます。
特徴
- 全てのプラットフォームで動作可能(iOS、Android、Web、モバイル)
- 開発者向けライブラリ: Rive ライブラリ
- 2 行のコードでアセットを追加して読み込むことが可能
- キャッシング機能もあり
- コントローラーで再生、停止、一時停止などが可能
- onStart や onStop のコールバック
- 状態マシンコードを使用することで、さらに多くのことが可能
状態マシンドキュメント
ユースケース
- オンボーディング画面のアニメーション
- アイコンなどのマイクロアニメーション
デザイナー向け
- 使用ツール: Rive エディター
.riv
ファイルのデザイン
アクセシビリティを後回しにしないために: インクルーシブなアプリを作るための具体的なステップ
使用状況:
- 世界の約 16%の障害を持つ方々がアクセシビリティ機能を活用しています。
対応分野:
- モバイル
- デスクトップ
- ウェブ
セマンティクス:
- ウィジェット:
Semantics(label)
を使用し、テキストの読み上げ順序を指定可能。 - 複数のウィジェットを統合して一緒に読み上げさせることができ、セマンティクスを除外することも可能です。
テスト:
WidgetTester
を使用してアクセシビリティのテストを実行。- デバッグ用セマンティックツリー。
- アクセシビリティ向けの生成 AI も利用可能です。
- AI ツール: Gemini, ChatGPT, Copilot
カラーコントラストの生成手順:
- テキストを選択
- VS Code コマンドを選択
- 選択したテキストに基づきコントラストの最適化を生成
アクセシビリティにおける課題:
- 認識の欠如
- 開発の複雑さ
- テスト不足
- 既存システムとの統合
ワークショップ: Android TV と Apple TV での Flutter 開発
Google Developers Expert について
Google Developers Expert(GDE)は、ウェブ技術や Google 製品に関して卓越した専門知識を持つと認められた人物です。
対応プラットフォーム:
- モバイル: iOS, Android, Mac OS, Windows OS, Linux
- TV プラットフォーム対応
機能と手順:
- Vertix APIを使用して AI を Firebase に統合
- TV でのライブコーディング
- スクリプト作成:
Run_apple_tv.sh
- iOS ビルド作成
- TV 用に追加設定
- Android Studio や VS Code では TV 上で直接実行できないため、Xcode でアプリを開き実行
アプリの作成手順:
- 新規プロジェクトを作成:
flutter create new project
tvos
フォルダを作成- 必要なコードをコピーして実行
タッチ操作のサポート:
- デフォルトではタッチ操作が機能しないため、アプリをタッチ対応にする
- リモートコントローラー初期化コードを
main.dart
に追加 - 必要なフレームワークをコピー
- タッチを制御するカスタムコードを追加
再度実行:
最後に、上記の手順を完了した後、デモが行われ、実際に TV 上でアプリが動作する様子が確認されました。
Vision OS サポートを Flutter で追加する挑戦
何をしたか?
Apple の Google スタイルのデバイスである Vision OS に対応させる挑戦を行いました。
2024 年 6 月 28 日に日本でリリース予定の Vision OS は、空間コンピューティング技術を採用しています。
iPhone や iPad のアプリも利用可能です。
詳細はこちら: Vision OS
デモ
Flutter での Vision OS アプリは、デフォルトではアスペクト比を変更できません。
現在、Vision OS のサポートについてはこちらの Issueがオープンされています。
課題
- アイ・トラッキング: どこで変更すべきか?(Embedder の問題)
- Vision OS の基盤: Darwin ベースのシステム
- 問題点:
- Vision OS アプリとして実行するのが難しい
- アスペクト比が固定されている
- Flutter の強みを活かせていない
- Vision OS で Flutter アプリを実行するにはまだ課題が残っています
Flutter - Add-to-App の良い点、悪い点、そして難点
ナビゲーション
- 複数の Flutter 環境を使用する場合、Flutter Engine Groupを使うことで、パスの問題を回避できます。
コミュニケーション
- Pigeonは、Flutter とホストプラットフォーム間の通信を型安全に、簡単に、そして高速にするコード生成ツールです。
アセット管理
- iOS の場合は、ios_platform_imagesを使用。
- Android では、Issue #43548がオープンされています。
- Flutter ネイティブビューは同じ画面で一緒に実行可能。
ネットワーキング
- Native API ClientとFlutter API Clientの両方を使用可能。
- Flutter Engineの詳細はこちら: Flutter Engine API
- 複数の Flutter 環境で作業する場合は、Flutter Engine Groupを活用。

その他
- Android とネイティブライブラリの両方を簡単に含めることができます。
- ネイティブ API クライアントの場合、認証などの追加の処理は不要です。
Dart クライアント
✅ Flutter ネイティブの通信に余計なオーバーヘッドは発生しません。
✅ Flutter 開発者にとって完全なコントロールが可能です。
❌ エンドポイントやモデルを再度書き直す必要がある(コード生成が可能でない限り)。
❌ 状態の同期(トークン、クッキー、ヘッダーの管理)やトークン更新の処理が難しいことがあります。

注意点
- 各プロジェクトは異なるため、Flutter モジュールをできるだけ分離し、UI で Flutter の強みを活かすようにしましょう。
- Add-to-App では、単独の Flutter アプリでは現れない問題が発生する可能性があります。
- 組織の構造、技術的負債、ドキュメント不足といった他の要因も考慮する必要があります。
Flutter で Gemini AI 搭載の絵文字機能を構築
Flutter Gemini
生成 AI モデルの主な機能:
- テキストのみの入力
- テキストと画像の入力 (マルチモーダル)
- 複数回の会話を構築 (チャット)
- 高速なやり取りのためのストリーミングを使用
- 複数回の会話を構築 (チャット)
Gemini 1.0 プロモーダル
- 最新バージョン: 1.5-pro
- たった 15 分でチャットアプリが完成、チャット履歴なども含む。

安全設定 (Gemini)
- ハラスメント: アイデンティティや保護された属性に対するネガティブまたは有害なコメント。
- ヘイトスピーチ: 失礼、無礼、または不敬な内容。
- 性的な内容: 性的行為に関する言及やわいせつな内容。
- 危険な内容: 有害な行為を促進、助長、または奨励するもの。

生成プロセスをコントロールするための生成設定
- 同じ入力に対して毎回異なる応答が得られる場合があります。
- 適切に設定するためには、構成を正しく設定する必要があります。
- プロパティ JSON 形式のレスポンスを使用して設定。


AI Studio の安全設定のスクリーンショット

Firebase サーバーサイド開発のためのフルスタック Dart 探求
Cloud Run について
Cloud Run は、Google のスケーラブルなインフラ上で、コンテナを直接実行できるマネージドコンピュートプラットフォームです。もし、任意のプログラミング言語で書かれたコードをコンテナイメージにすることができれば、Cloud Run にデプロイできますよ。

Functions_framework について
Functions Framework は、Google Dart と Cloud Functions のチームが提供する、ポータブルな Dart 関数を書くためのオープンソースの FaaS(Function as a Service)フレームワークです。Functions Framework を使うことで、さまざまな環境で動作する軽量な関数を書くことができます。例えば:
- ローカル開発環境
- Google Cloud Run(Cloud Run クイックスタートを参照してください)
- Google App Engine
- Knative ベースの環境
import 'package:functions_framework/functions_framework.dart';
import 'package:shelf/shelf.dart';
@CloudFunction()
Response function(Request request) => Response.ok('Hello, World!');
Cloud Run にデプロイした後、次のコマンドで関数をテストできます:
curl https://<your-app-url>
# 出力: Hello, World!
Google Console
Google Console では HTTP 関数の実行状況を確認できますよ。

パッケージ
Firebase Admin SDK for Dartはとても便利なパッケージです。以下の機能があります:
- 認証
- 認証されたユーザーのリストの取得
- プッシュ通知の送信
ウィジェットツリーの力を最大限に活用する
- ウィジェットはウィジェットツリーから構成されます
- すべてがウィジェットです
- 状態はデフォルトでツリー上に管理されます
- 再構築もツリー上で管理されます
- レイアウトはツリーに基づいて計算されます
- すべてがウィジェットツリーの下にあります
エレメントツリー
Element / BuildContext
Element
- Element はウィジェットのインスタンス化です
- すべてのウィジェットは
createElement()
によって関連する Element を作成します - Element は親要素への参照と、子要素を訪問するためのロジックを保持しています
- 実際に、Element がツリーを形成します
BuildContext
- BuildContext は、ツリーに基づいて Element の機能を提供するためのインターフェースです
- Element クラスの定義は以下の通りです:
abstract class Element extends DiagnosticableTree implements BuildContext {
// Elementに関連するロジック
}
FlutterNinjas Conference で学んだことを ML モバイルチームや Monstarlab のコンサルティング事業にどう活かせるか
-
より良い状態管理: 高度な技術を使用して、アプリをより効率的かつスケーラブルにし、プロジェクトの品質を向上させます。
-
高速な開発: CI/CD ツールを使用してビルドやデプロイプロセスを自動化し、時間を節約しながらアプリの品質を確保します。
-
ユーザー体験の向上: 魅力的なアニメーションやインタラクションを追加して、アプリをより魅力的にし、ユーザーの満足度を高めます。
-
アクセシビリティ: アクセシビリティ標準に従うことで、障害を持つ方を含む全ての人が使えるアプリを構築します。
-
新しいプラットフォーム: Android TV や Apple TV などの新しいプラットフォーム向けのアプリ開発スキルを広げ、クライアントに多様な選択肢を提供します。
-
AI 機能: AI を活用したスマートな機能を追加し、現代のユーザーのニーズに応えます。
-
Dart を使用したフルスタック開発: フロントエンドとバックエンドに同じ言語を使用することで、開発を簡略化し、生産性を向上させます。
まとめ - FlutterNinjas Conference での主な成果
-
Riverpod 3.0 の習得
Riverpod の開発者である Remi Rousselet 氏から、プロジェクトで効果的に Riverpod を使用するためのベストプラクティスを学びました。 -
Flutter におけるテキスト管理
Flutter のテキスト処理について深く学び、アプリ内のテキストレンダリングを向上させました。 -
Code Magic による CI/CD
Code Magic のホワイトラベル CI/CD ソリューションを探索し、アプリ開発のワークフローを効率化しました。 -
Rive を使った高度なアニメーション
Rive を使った複雑なアニメーションの統合により、ユーザー体験を向上させました。 -
インクルーシブなアプリ開発
アプリが誰でも利用できるようにするためのアクセシビリティとインクルージョンの具体的な手順を学びました。 -
TV プラットフォーム向け Flutter
Android TV や Apple TV 向けの Flutter アプリ開発スキルを拡大しました。 -
AI 統合
Flutter アプリ内で AI を活用した絵文字ジェネレーターのような機能を構築する方法を探求しました。
Author

Dinakar Maurya
Mobile Tech Lead