はじめに
この記事では、FlutterFlowのAIアシスタント機能「AI Gen」の概要と使い方をまとめています。
AI Genは、FlutterFlowで自然言語の説明や要求にもとづきページ・コンポーネント・カラーテーマ・スキーマ・Custom Functionを生成できるAIアシスタント機能です。
FlutterFlowはプログラミング未経験者でもアプリやMVPを開発できるローコードサービスですが、AI Genを活用することでより簡単・スピーディーにアプリ開発を進められるようになります。
AI Gen概要
2023/7/14に公開された、FlutterFlowのAIアシスタント機能群（α版）です。下記の5つの機能で構成されています。自然言語のプロンプト（説明や要求）を入力すると、FlutterFlowで構築中のプロジェクトにそのまま挿入できる形で生成してくれます。
AI Genは無料プランユーザーでも利用できますが、生成できるページやコンポーネント数には1アカウントにつき1日に生成できる上限があります（2023/8/4時点。有料プランユーザーは上限なし）。
AI Gen機能群
-
AI Gen Page
…プロンプトを入力してページを生成します。また、生成したページのコードの確認・コピーが可能です。日本語のプロンプトに対応しています。1アカウントにつき生成上限は5ページ／1日です。
-
AI Gen Component
…プロンプトを入力してコンポーネントを生成します。ドロップダウンメニュー、ナビゲーションメニュー、ボトムシートやカードなど様々なコンポーネントを生成できます。こちらも生成したコンポーネントのコードの確認・コピーが可能です。日本語のプロンプトに対応しています。1アカウントにつき挿入上限は3コンポーネント／1日です。
-
AI Generated Theme Colors
…プロンプトを入力してカラーテーマの配色パレットを生成します。生成された配色パレットをそのままはもちろん、各カラーを微調整してから適用することもできます。日本語のプロンプトに対応しています。生成上限はありません。
-
AI Gen Schema
…プロンプトを入力してFirebaseスキーマを生成します。一度のプロンプト入力で複数のコレクション作成も可能です（例：moviesとmoviesに紐づくreviewsなど）。日本語のプロンプトに対応しています。生成上限はありません。
-
Code Copilot
…プロンプトを入力して生成したコードでCustom Fuctionを作成できます。GPT-3.5 Turbo（GPT-3.5ファミリーの中で最も能力が高く、費用対効果の高いモデル）を使用しています。日本語のプロンプトには対応していません。
ちなみに、Code Copilot公開前に提供されていた「OpenAI Codex」は、GPT-3で構築された汎用プログラミングモデルを利用できるAI機能でした。構築に使用されているモデルはGPT-3とGPT-3.5で異なりますが、使い方は同じなので本記事では詳細は割愛させていただきます。詳しい使い方は当ブログの記事「FlutterFlow：OpenAI Codexを使ったCustom Functionの作成」をご覧ください。
AI Genの使い方
それでは、ここからAI Genの使い方を機能ごとにご紹介していきます。
機能1. AI Gen Page
機能2. AI Gen Component
機能3. AI Generated Theme Colors
機能4. AI Gen Schema
機能5. Code Copilot
機能1.AI Gen Page
ページを生成する「AI Gen Page」の使い方をご紹介します。
ナビゲーションメニュー「Page Selector」を開き、「New Page」をクリックします。
Create Pageのテンプレートなどを選択する画面で、「Generate」をクリックします。
プロンプト入力画面が表示されるので、今回は下記のプロンプトを入力します。
- プロンプト…
収支管理アプリのダッシュボードページを生成せよ。。
※AI Gen Pageは日本語に対応しています。日本語のプロンプトを入力すると、生成されるページで使用される言語も日本語になることが多くなります（英語になる場合もあります）。
Enterキーを押すと、少しの時間待機画面が表示され生成されたページが表示されます。
今回は、プロンプトの「収支管理」を個人の家計としてではなく営業として認識されてしまったようで、項目名に少し違和感があります。しかし一般的なダッシュボードに必要な項目で構成されているので、表示項目名等を修正すればレイアウトはそのまま使えそうですね。
生成後の画面の要素を紹介します。
| No. | 名前 | できること |
|---|---|---|
| 1 | プロンプトの表示・入力部 | 先ほど入力したプロンプトが表示されます。ここで修正して右上の「Regenerate」から再生成することもできます。 |
| 2 | Light/Darkモード切り替えボタン | モードを切り替えてデザインの確認ができます。 |
| 3 | テーマの選択部 | 生成したページのテーマを選択できます。複数のテーマで確認することができます。 |
| 4 | AI Generated Theme Colors呼び出しボタン | AI Generated Theme Colorsのプロンプト入力画面を表示します。 |
| 5 | 生成ページの表示部 | 生成したページを表示します。 |
| 6 | 本日の残り生成可能ページ数表示部 | 本日生成できる残りのページ数が表示されます。この画像では3/5となっているので、残り3ページ生成できます。 |
| 7 | Regenerateボタン | ページを再生成します。プロンプトの表示・入力部でプロンプトを修正してから再生成するのがおすすめです。 |
| 8 | コード表示ボタン | 生成したページのコードを表示したりコピーすることができます。 |
| 9 | 画像の更新ボタン | ページに挿入されている画像を再生成できます。 |
| 10 | 感想選択部 | 生成結果に対する感想を絵文字で送信できます。 |
| 11 | Insert Pageボタン | 生成したページを現在のプロジェクトに挿入します。 |
ちなみに、生成されたページのコードは8番をクリックしてこのように確認できます。右上のクリップボードアイコンをクリックしてコードをコピーすることができます。
生成されたページを挿入する場合は、右下の「Insert Page」をクリックします。
ページ名の設定ポップアップが表示されるので入力して「Create Page」をクリックします。
「Page selector」ページでページの一覧に表示されていますね。
ちなみに、AI Gen Pageはナビゲーションメニュー「UI Builder」・「Widget Tree」・「Page Selector」>「AI Generated Page」ボタンから呼び出すこともできます。
おまけ：AI Gen Pageのプロンプトと生成結果の例
ここで、ご参考までにAI Gen Pageのプロンプトと生成結果の例をご紹介します。
機能2.AI Gen Component
次に、コンポーネントを生成する「AI Gen Component」の使い方をご紹介します。
ナビゲーションメニュー「Page Selector」>を開き、「New Component」をクリックします。
Create Componentのテンプレートなどを選択する画面で、「Generate」をクリックします。
プロンプト入力画面が表示されるので、下記のプロンプトを入力します。
- プロンプト…
Design a bottom sheet displaying movie detail for movie review app.
プロンプトを入力してEnterキーを押すと、少しの時間待機画面が表示されコンポーネントが生成されます。
プロンプトの「movie review app」から、「Watch Trailer」や「Write Review」というボタンを作成してくれたようですね。
生成後の画面の要素を紹介します。構成はAI Gen Pageの生成結果画面とほぼ同じ構成です。
| No. | 名前 | できること |
|---|---|---|
| 1 | プロンプトの表示・入力部 | 先ほど入力したプロンプトが表示されます。ここで修正してEnterキーを押して再生成することもできます。 |
| 2 | Light/Darkモード切り替えボタン | モードを切り替えてデザインの確認ができます。 |
| 3 | テーマの選択部 | 生成したコンポーネントのテーマを選択できます。複数のテーマで確認することができます。 |
| 4 | AI Generated Theme Colors呼び出しボタン | AI Generated Theme Colorsのプロンプト入力画面を表示します。 |
| 5 | 生成コンポーネントの表示部 | プロンプトから生成したコンポーネントを表示します。 |
| 6 | 本日の残り挿入可能コンポーネント数表示部 | 本日挿入できる残りのコンポーネント数が表示されます。この画像では3/3となっているので、残り3コンポーネント挿入できます。AI Gen Pageと異なり、上限値は挿入数に設定されています。 |
| 7 | コード表示ボタン | 生成したコンポーネントのコードを表示したりコピーすることができます。 |
| 8 | 感想選択部 | 生成結果に対する感想を絵文字で送信できます。 |
| 9 | Insert Componentボタン | 生成したコンポーネントを現在のプロジェクトに挿入します。 |
ちなみに、生成されたコンポーネントのコードは7番をクリックしてこのように確認できます。右上のクリップボードアイコンをクリックしてコードをコピーすることができます。
右下の「Insert Component」をクリックして、生成結果をプロジェクトに挿入します。
コンポーネントの名前を設定するポップアップが表示されるので、設定して「Create Component」をクリックします。
生成したコンポーネントが「Page selector」を開くとコンポーネントとして表示されていますね！
※AI Gen Componentは挿入数の上限が設定されているはずですが、生成してプロジェクトに挿入し、さらにページやアクション使用してもカウントされないので無限に生成・挿入できるのが現状です（2023/8/4時点）。
おまけ：AI Gen Componentのプロンプトと生成結果の例
ここで、ご参考までにAI Gen Componentのプロンプトと生成結果の例をご紹介します。
機能3.AI Generated Theme Colors
次に、プロジェクトのテーマカラーの配色パレットを生成する「AI Generated Theme Colors」の使い方を紹介します。
ナビゲーションメニュー「Theme Settings」> 「Colors」を開き、「Generate with AI」をクリックします。
プロンプトを入力する画面が表示されるので下記のプロンプトを入力します。
- プロンプト…
A chic color theme that evokes a sense of adult serenity.
Enterキーを押すとカラーテーマが生成されました。
生成後の画面の要素を紹介します。
【Edit画面】
| No. | 名前 | できること |
|---|---|---|
| 1 | ページの選択部 | ページを選択して、生成したカラーテーマを適用させた状態を確認できます。 |
| 2 | ページ例の表示部 | 「ページの選択部」で選択したページでカラーテーマを適用した状態を確認できます。 |
| 3 | Edit/Explore切り替えボタン | Edit画面とExplore画面を切り替えできます。上記の画像はEdit画面で、各カラーをクリックして微調整することができます。 |
| 4 | Light/Darkモード切り替えボタン | カラーテーマは、LightモードとDarkモードの2種類が作成されます。2つのモードで微妙にカラーが違う場合があるので両者を切り替えて確認します。 |
| 5 | Reset to Original Themeボタン | クリックすると生成直後のカラーに戻ります。自分でカラーを調整した後に使えます。 |
| 6 | カラーの一覧 | 生成されたカラーテーマのカラーが表示されます。各カラーをクリックして調整することができます。 |
| 7 | Save Changesボタン | 生成・調整したカラーテーマを保存・適用します。 |
【Explore画面】
| No. | 名前 | できること |
|---|---|---|
| 8 | テーマ一覧・選択部 | 現在のテーマやFlutterFlowデフォルトのテーマを確認して、ページ例の表示部で表示しているページに適用して確認することができます。各テーマの右上のチェックボックスをチェックするとそのテーマが適用されます。 |
「Save Changes」ボタンをクリックすると、カラーテーマが適用されます。
おまけ：AI Generated Theme Colorsのプロンプトと生成結果の例
ここで、ご参考までにAI Generated Theme Colorsのプロンプトと生成結果の例をご紹介します。
機能4.AI Gen Schema
次に、スキーマを作成する「AI Gen Schema」の使い方をご紹介します。
ナビゲーションメニュー「Firestore」を開き、「Add new Collection」から新規コレクションを作成します。コレクション名はmoviesとしました。
moviesコレクションを作成すると、「Generate with AI」ボタンが表示されるのでクリックします。
プロンプトの入力ボックスが表示されます。今回は、下記のプロンプトを入力しました。
- プロンプト…
Generate a collection for movies, its reviews and its viewing historys.Each review and viewing history has user field to store their creater.
※Each review.....はなくてもコレクションを作成できますが、user fieldが生成されなかったり生成されてもusers collectionと連携できないことや、親子関係にならないことが多いので明確にしています。
プロンプトを入力してEnterキーを押すと、生成されたスキーマが表示されます。
今回は下記のようなコレクションが作成されました。各コレクションでuser Fieldも作成できていますね。
生成後の画面の要素を紹介します。
| No. | 名前 | できること |
|---|---|---|
| 1 | 生成スキーマの表示部 | プロンプトから生成したスキーマを表示します。 |
| 2 | Actionボタン | ゴミ箱アイコンをクリックするとそのFieldを削除することができます。 |
| 3 | Insertボタン | 生成したスキーマを挿入します。 |
なお、AI Gen Schemaの生成結果のField NameやData Typeは編集できません。
右下の「Insert」をクリックして、生成されたスキーマを適用します。Firebaseタブに生成されたスキーマが表示されていますね。
おまけ：AI Gen Schemaのプロンプトと生成結果の例
ここで、ご参考までにAI Gen Schemaのプロンプトと生成結果の例をご紹介します。
ご覧の通り、本当は親子関係で構成したいコレクション同士が親子関係になっていません。AI Gen Schemaでは詳細なプロンプトを入力するのがよさそうです。
機能5.Code Copilot
次に、「Code Copilot」の使い方を簡単にご紹介します。
ナビゲーションメニュー「Custom Code」を開き、左上の「Add」>「Function」をクリックします。
新規Functionの画面で「Code Copilot」タブを開くと、AI Code Assistantのプロンプト入力画面が表示されます。
使い方はOpenAI Codexと同じになります。「FlutterFlow：OpenAI Codexを使ったCustom Functionの作成」で詳しくご紹介しておりますのでご覧ください。
まとめ
FlutterFlowはMVP制作にも向いているローコードツールですが、AI Genを使うことでアプリ開発を加速できそうですね。
また、AI Gen Page/Component、AI Generated Theme colorsは、簡単なプロンプトを入力するだけで生成結果からデザインのインスピレーションを得られるので、デザイナーなしでアプリを制作している方は特にデザイン向上にも活用できそうですね。
生成したいものが明確に決まっているときほど詳細なプロンプトを入力するのがおすすめです。
参考
- AI Gen公開の公式リリース
Discussion