クエリに画像を添付する

Gemini in Android Studio のクエリに画像を添付すると、アプリのアーキテクチャをより深く理解し、UI 開発プロセスを加速できます。

プロンプトに画像を添付するには、[Attach Image File](画像ファイルを添付) 画像ファイルを添付アイコン をクリックして画像をアップロードします。

Gemini を使って画像を操作する方法をいくつかご紹介します。

  • 希望する UI のモックアップがある場合は、Gemini がその UI を作成するコードを提供します。たとえば、Gemini に Now in Android アプリのスクリーンショットを提供すると、そのアプリを作成するための Compose コードが提供されます。この例は、アプリのフィード(左)と、その UI 用に Gemini が生成した Jetpack Compose コード(右)のスクリーンショットを示しています。詳しくは、画像添付ファイルを使用して UI を生成するをご覧ください。

    「Now in Android」アプリ。タイトル、トピック、ブックマーク アイコンを含む記事のフィードが表示されています。 Gemini のコード レスポンス。Jetpack Compose コードが表示され、「Now in Android」のスクリーンショットから UI が再作成されています。
    Gemini が Now in Android アプリの UI スクリーンショットから Jetpack Compose コードを生成する。
  • アプリの構成について知りたい場合は、Gemini に UI の仕組みをコンポーネント パーツの観点から説明してもらうことができます。たとえば、別の Now in Android のスクリーンショットの背後にあるコンポーザブルとデータフローを説明するよう Gemini にリクエストできます。左側の画像はニュース アイテムを含む詳細画面を示し、右側の画像は、その画面の Compose 構造とデータフローに関する Gemini の説明を示しています。

    「Now in Android」アプリの 1 つのニュース記事の詳細。タイトル、著者、説明が表示されています。 ニュース記事の詳細画面の Jetpack Compose コンポーザブルとデータフローに関する Gemini の説明。
    Gemini が特定のアプリ画面の UI 構成とデータフローを説明します。
  • アプリのアーキテクチャ図がある場合、Gemini はその図に基づいてアプリを作成するコードを提案し、フルスタック開発アシスタントとして機能します。Gemini は、図を文書化したり、アプリの構造を説明したりするのにも役立ちます。これは、チームメンバーがレビューする設計ドキュメントを作成する際に役立ちます。たとえば、次の図は、UI、ViewModel、リポジトリ、データソースなどのさまざまなアプリ コンポーネント間のデータフローを示す簡略化されたアーキテクチャ図です。

    UI、ViewModel、リポジトリ、データソースの各コンポーネントと、データフローを示す矢印が描かれた、簡略化されたアプリ アーキテクチャ図。
    Gemini は、アプリのアーキテクチャ図からコードとドキュメントを生成できます。
  • UI のバグを見つけたら、スクリーンショットを撮って Gemini に解決策のブレインストーミングを依頼します。エラーのある部分を丸で囲むことで、問題点を指摘できます。次の例は、モバイルアプリのスクリーンショットを示しています。赤い円で、位置がずれている UI 要素がハイライト表示されています。

    テキスト要素が重なっているか、位置がずれている UI バグを示すモバイルアプリのスクリーンショット。赤い円でハイライト表示されています。
    Gemini は、スクリーンショットから UI バグの解決策をブレインストーミングするのに役立ちます。