2024-10-10-FlutterNinjas Conference: My Participation Experience

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

カラーコントラストの生成手順:

1. テキストを選択
2. VS Code コマンドを選択
3. 選択したテキストに基づきコントラストの最適化を生成

アクセシビリティにおける課題:

• 認識の欠如
• 開発の複雑さ
• テスト不足
• 既存システムとの統合

ワークショップ: 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 でアプリを開き実行

アプリの作成手順:

1. 新規プロジェクトを作成: flutter create new project
2. tvosフォルダを作成
3. 必要なコードをコピーして実行

タッチ操作のサポート:

• デフォルトではタッチ操作が機能しないため、アプリをタッチ対応にする
• リモートコントローラー初期化コードを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 のコンサルティング事業にどう活かせるか

1. より良い状態管理: 高度な技術を使用して、アプリをより効率的かつスケーラブルにし、プロジェクトの品質を向上させます。

2. 高速な開発: CI/CD ツールを使用してビルドやデプロイプロセスを自動化し、時間を節約しながらアプリの品質を確保します。

3. ユーザー体験の向上: 魅力的なアニメーションやインタラクションを追加して、アプリをより魅力的にし、ユーザーの満足度を高めます。

4. アクセシビリティ: アクセシビリティ標準に従うことで、障害を持つ方を含む全ての人が使えるアプリを構築します。

5. 新しいプラットフォーム: Android TV や Apple TV などの新しいプラットフォーム向けのアプリ開発スキルを広げ、クライアントに多様な選択肢を提供します。

6. AI 機能: AI を活用したスマートな機能を追加し、現代のユーザーのニーズに応えます。

7. Dart を使用したフルスタック開発: フロントエンドとバックエンドに同じ言語を使用することで、開発を簡略化し、生産性を向上させます。

まとめ - FlutterNinjas Conference での主な成果

1. Riverpod 3.0 の習得
   Riverpod の開発者である Remi Rousselet 氏から、プロジェクトで効果的に Riverpod を使用するためのベストプラクティスを学びました。

2. Flutter におけるテキスト管理
   Flutter のテキスト処理について深く学び、アプリ内のテキストレンダリングを向上させました。

3. Code Magic による CI/CD
   Code Magic のホワイトラベル CI/CD ソリューションを探索し、アプリ開発のワークフローを効率化しました。

4. Rive を使った高度なアニメーション
   Rive を使った複雑なアニメーションの統合により、ユーザー体験を向上させました。

5. インクルーシブなアプリ開発
   アプリが誰でも利用できるようにするためのアクセシビリティとインクルージョンの具体的な手順を学びました。

6. TV プラットフォーム向け Flutter
   Android TV や Apple TV 向けの Flutter アプリ開発スキルを拡大しました。

7. AI 統合
   Flutter アプリ内で AI を活用した絵文字ジェネレーターのような機能を構築する方法を探求しました。