IM-Copilot画像生成アクションの活用：誰でも簡単に使える画像生成画面の構築

このCookBookでは、IM-Copilotの画像生成アクションとIM-BloomMakerを組み合わせて、実用的なAI画像生成画面をローコードで構築する手順を解説します。ユーザーがテキストでプロンプトを入力し、ボタン操作でAIによる画像生成と即時表示ができるアプリケーションを、フロー定義・API連携・画面作成の各ステップに分けて紹介します。

完成イメージ

このレシピが完成すると以下のようなアプリケーションが作成されます。

前提条件

• このレシピは、intra-mart Accel Platform 2025 Spring 以降のバージョンで利用できます。
• IM-Copilot 利用ガイド - セットアップ手順を参照に、「チャットアクション」及び「画像生成アクション」に必要な設定が完了していること。

完成サンプル

「サイトマップ」→「Accel Studio」→「アプリケーション管理」→「アプリケーション一覧」→「インポート」にアクセスし、
Accel Studio インポートデータをインポートすることでサンプルコンテンツをご利用になれます。

レシピ

1. LogicDesignerで画像生成フローを作成します。
2. LogicDesignerで画像ストレージ取得フローを作成します。
3. ロジックフローのルーティング定義を作成します。
4. BloomMakerで画像生成画面を作成します。
5. 画像生成用画面のルーティング定義を作成します。
6. 認可設定を行います。

1. 画像生成フロー定義を作成します。

フロー定義の処理の流れは、以下の通りです。
1. プロンプトの受け取り (「Start」タスク)
2. プロンプトを英語に翻訳する (「Chat」タスク - im_chat1)
3. 画像生成実行 (「Generate Image」タスク - im_generateImage1)
4. ファイル名生成 (「Generate File Name」タスク - im_variableOperation1)
5. セッションストレージ取得 (「Session Storage Acquisition」タスク - im_sessionStorage1)
6. 生成画像のストレージ保存 (「Storage Output (binary)」タスク - im_writeBinaryToStorage1)
7. 処理完了 (「End」タスク)

フロー定義の全体像は、以下の通りです。

定数設定では、以下のように設定してください：

• get_message_index … 1 - チャット応答からメッセージを取得するためのインデックス番号
• get_value_index … 0 - メッセージからcontentを取得するためのインデックス番号
• role … user - チャットアクションのroleをuserに指定
• translate_prompt … 以下の内容を英語に翻訳してください。\n説明文は不要です。\n\n内容：\n - 英語翻訳用のプロンプトテンプレート

入出力設定では、以下のように設定してください：

• 入力
  • prompt … <string> （画像生成用プロンプト）
• 出力
  • fileName … <string> （生成された画像のファイル名）

タスクのマッピング設定を行います。

(1) チャットタスクのマッピングを設定します。（Chat - im_chat1）
入力されたプロンプトを英語翻訳のためのチャット処理に渡すため、以下のようにマッピングしてください。

画像で示されているように、定数設定とinputの値をconcat関数を使用して結合し、チャットタスクに渡します。

• 「 Constant - translate_prompt 」と「 Input - prompt 」をconcat関数で結合→「 im_chat1 - messages[0].content 」
• 「 Constant - role 」→「 im_chat1 - messages[0].role 」

マッピング設定の詳細手順：
1. 左側の「Constant」から「translate_prompt」を選択し、中央のconcat関数に接続します。
2. 左側の「Input」から「prompt」を選択し、同じくconcat関数に接続します。
3. concat関数の出力を右側の「im_chat1」の「messages[0].content」に接続します。
4. 「Constant」の「role」を「im_chat1」の「messages[0].role」に接続します。

concat関数について

concat関数は、複数の文字列を結合するための関数です。
この設定により、翻訳プロンプトテンプレート（translate_prompt）とユーザー入力（prompt）が結合され、
完全な翻訳リクエストとしてチャットAPIに送信されます。

例：

• translate_prompt: "以下の内容を英語に翻訳してください。\n説明文は不要です。\n\n内容：\n"
• input.prompt: "美しい夕日の風景"
• 結合結果: "以下の内容を英語に翻訳してください。\n説明文は不要です。\n\n内容：\n美しい夕日の風景"

(2) 画像生成タスクのマッピングを設定します。（Generate Image - im_generateImage1）
チャット処理で翻訳された英語プロンプトを使用して画像生成を実行するため、以下のようにマッピングしてください。

画像で示されているように、チャット結果から配列操作関数（array get、values、array get）を使用して翻訳されたテキストを取得し、画像生成のプロンプトに設定します。

マッピング設定の詳細手順：
1. 「 im_chat1 - chatMessage 」→「array get」関数に接続
2. 「 Constant - get_message_index 」→「array get」関数のindexに接続
3. 「array get」の出力→「values」関数（object）に接続
4. 「values」の出力→「array get」関数（2番目）に接続
5. 「 Constant - get_value_index 」→「array get」関数（2番目）のindexに接続
6. 最終的な「array get」の出力→「 im_generateImage1 - prompt 」に接続

この処理により、チャット応答の配列から指定されたインデックスのメッセージを取得し、そのテキスト内容を画像生成プロンプトとして使用します。

配列操作関数について

このマッピングでは、チャット結果から翻訳されたテキストを抽出するために、複数の関数を組み合わせています：

1. array get（1番目）: チャット応答配列から指定インデックス（get_message_index=1）のメッセージオブジェクトを取得
2. values: オブジェクトから値の配列を取得（メッセージオブジェクトの各プロパティ値）
3. array get（2番目）: 値配列から指定インデックス（get_value_index=0）の要素（翻訳されたテキスト）を取得

処理例：

• チャット応答: [{role: "user", content: "..."}, {role: "assistant", content: "Beautiful sunset landscape"}]
• get_message_index=1で取得: {role: "assistant", content: "Beautiful sunset landscape"}
• valuesで取得: ["assistant", "Beautiful sunset landscape"]
• get_value_index=0で取得: "Beautiful sunset landscape"（翻訳結果）

(3) ファイル名生成タスクのマッピングを設定します。（Generate File Name - im_variableOperation1）
一意なファイル名を生成するため、以下のようにマッピングしてください。

画像で示されているように、identifier関数を使用して一意の識別子を生成し、それをファイル名として使用します。

マッピング設定の詳細手順：
1. 中央の「Add Function」から「identifier」関数を追加します
2. identifier関数の出力を右側の「Variable」の「fileName」に接続します

この設定により、システムが自動的に一意の識別子を生成し、それがファイル名として設定されます。
生成されるファイル名は重複することがないため、同時に複数の画像生成が実行されても安全です。

(4) セッションストレージ取得タスクのマッピングを設定します。（Session Storage Acquisition - im_sessionStorage1）
生成された画像を保存するためのセッションストレージを取得するため、以下のようにマッピングしてください。

画像で示されているように、入力から直接セッションストレージのパスを指定します。

マッピング設定の詳細手順：
1. 左側の「Input」から「fileName」を選択します
2. 右側の「im_sessionStorage1」に直接接続します

この設定により、入力されたファイル名をベースにしたセッションストレージのパスが動的に設定され、
生成される画像ファイル用の一意な保存領域が確保されます。

※セッションストレージについて
セッションストレージは、セッションごとの一時的なファイル保存領域として使用されます。
入力されたファイル名（fileName）を使用することで、各画像生成リクエストに対して
個別の保存パスが生成され、同時実行時のファイル競合を防ぐことができます。

(5) ストレージ出力タスクのマッピングを設定します。（Storage Output (binary) - im_writeBinaryToStorage1）
生成された画像データをストレージに保存するため、以下のようにマッピングしてください。

画像で示されているように、複数のソースから必要なデータを取得して、ストレージ出力タスクに接続します。

マッピング設定の詳細手順：
1. 「 Input - fileName 」→「 im_writeBinaryToStorage1 - fileName 」に接続
入力から受け取ったファイル名を保存時のファイル名として指定します
2. 「 im_generateImage1 - image 」→「 im_writeBinaryToStorage1 - binary 」に接続
生成された画像のバイナリデータを保存対象として指定します
3. 「 im_sessionStorage1 - storage 」→「 im_writeBinaryToStorage1 - storage 」に接続
前のステップで取得したセッションストレージを保存先として指定します

この設定により、画像生成で作成されたバイナリデータが、入力から受け取ったファイル名でセッションストレージに保存されます。

(6) 終了タスクのマッピングを設定します。（End）
処理結果を出力するため、以下のようにマッピングしてください。

画像で示されているように、入力されたプロンプトと変数に保存されたファイル名の両方を出力に設定します。

マッピング設定の詳細手順：
1. 「 Variable - fileName 」→「 Output - fileName 」に接続します。
Generate File Nameタスクで変数に保存されたファイル名を返すことで、画面側で画像の取得や表示に使用できます。

2. 画像ストレージ取得フロー定義を作成します。

画面から生成された画像を取得・表示するためのフロー定義を作成します。

このフローは、生成された画像のファイル名を受け取り、セッションストレージから画像データを取得して画面に返すために使用します。

フロー定義の処理の流れは、以下の通りです。
1. ファイル名の受け取り（「Start」タスク）
2. セッションストレージ取得（「Session Storage Acquisition」タスク）
3. 結果を返却（「End」タスク）

フロー定義の全体像は、以下の通りです。

入出力設定は以下の通りです。

• 入力
  • fileName … <string>（取得する画像のファイル名）
• 出力
  • body … <storage>（画像データをBinary形式で出力します）

タスクのマッピング設定を行います。

(1) セッションストレージ取得タスクのマッピングを設定します（Session Storage Acquisition - im_sessionStorage1）。
指定されたファイル名に対応するセッションストレージを取得するため、以下のようにマッピングします。

• 「 Input - fileName 」→「 im_sessionStorage1 」

(2) 終了タスクのマッピングを設定します（End）。
取得したセッションストレージオブジェクトを出力するため、以下のようにマッピングします。

• 「 im_sessionStorage1 - storage 」→「 Output - body 」

この設定により、画面から指定されたファイル名に基づいて画像のデータ（Binary）が取得され、
画面側で画像の表示に使用できるようになります。

3. ロジックフローのルーティング定義を作成します。

作成したフロー定義を画面から呼び出すために、ルーティング定義を設定します。
「サイトマップ」→「LogicDesigner」→「ルーティング定義一覧」→「新規作成」をクリックします。

対象ロジックフロー定義情報

• 対象フロー: 作成した画像生成フロー定義を選択します。
  • フロー定義ID: im_cookbook_263516_flow_image_generation
  • フロー定義名: 【CookBook】Image Generation Flow
• バージョン番号: 「最新バージョンを利用する」を選択します。

ロジックフロールーティング定義情報

• ルーティング: /imart/logic/api/im_cookbook/263516_image_generation
  • アプリケーションからフローを呼び出すためのAPIパスです。
• メソッド: POST を選択します。
• 認証方法: IMAuthentication を選択します。
• 認可URI: im-logic-rest://im_cookbook/263516_image_generation
• レスポンス種別: JSONに変換して返却 を選択します。

設定が完了したら「登録」ボタンをクリックして、ルーティング定義を登録します。

同様に、画像ストレージ取得フローのルーティング定義も作成します。

対象ロジックフロー定義情報

• 対象フロー: 作成した画像ストレージ取得フロー定義を選択します。
  • フロー定義ID: im_cookbook_263516_flow_image_generation_get_storage
  • フロー定義名: 【CookBook】画像ストレージ取得フロー
• バージョン番号: 「最新バージョンを利用する」を選択します。

ロジックフロールーティング定義情報

• ルーティング: /imart/logic/api/im_cookbook/263516_get_storage
  • アプリケーションからフローを呼び出すためのAPIパスです。
• メソッド: GET を選択します。
• 認証方法: IMAuthentication を選択します。
• 認可URI: im-logic-rest://im_cookbook/263516_get_storage
• レスポンス種別: ファイルをバイナリで返却 を選択します。

設定が完了したら「登録」ボタンをクリックして、ルーティング定義を登録します。

4. BloomMakerで画像生成用画面を作成します。

ユーザーが画像生成を実行するための画面をBloomMakerで作成します。

1. 「サイトマップ」→「BloomMaker」→「コンテンツ一覧」→「コンテンツ新規作成」をクリックします。
2. 以下の画面構成でコンポーネントを配置します。

Container: Page
  └── Container (Headline Level 1: Image Generation)
      ├── Container (Box 1)
      │   ├── Paragraph
      │   └── Field
      │       └── Field Content
      │           └── Text Area Element  // テキストエリア：プロンプト入力
      ├── Paragraph
      ├── Field
      │   └── Field Content
      │       └── Button // ボタン：画像生成アクション実行
      │           └── Button Element
      └── 画像埋め込み // 画像埋め込み：画像生成結果格納

変数の設定

「変数」→「変数」→「JSON形式で編集」で以下のように設定します。

{
  "request": {
    "prompt": ""
  },
  "response": {
    "fileName": ""
  },
  "imageUrl": ""
}

JSON設定の詳細

• request.prompt: プロンプト入力フィールドの値をLogicDesignerフローに送信します。
  • Text Areaコンポーネントの値を変数として設定します。
  • ユーザーが入力した画像生成プロンプトがAPI呼び出し時に渡されます。
• response.fileName: LogicDesignerフローからの戻り値を受け取ります。
  • 画像生成完了後に返されるファイル名を格納します。
  • この値を使用して画像表示機能を実装します。

定数の設定

「変数」→「定数」→「JSON形式で編集」で以下のように設定します。

{
  "GET_IMAGE_STORAGE_API_URL": "logic/api/im_cookbook/263516_get_storage"
}

定数設定の詳細

• GET_IMAGE_STORAGE_API_URL: 画像取得フロー用のAPIパスです。
  • 生成された画像をセッションストレージから取得するためのエンドポイントです。
  • ファイル名をパラメータとして渡すことで、対応する画像データを取得します。
  • 画像埋め込みコンポーネントのソースURLとして使用します。

Actionの設定

Action 1: Call Image Generation API
画像生成フローを呼び出すためのアクション設定です。

• アクションアイテム: IM-LogicDesigner フロールーティングにリクエストを送信する
• ルーティング: im_cookbook/263516_image_generation
• リクエストパラメータ: $variable.request
• レスポンスデータ: $variable.response

Action 2: Generate Image File URL
画像表示用のURLを生成するためのカスタムスクリプトです。

• アクションアイテム: カスタムスクリプトを実行する
• カスタムスクリプト:

$variable.imageUrl =
  $constant.GET_IMAGE_STORAGE_API_URL +
  "?" +
  "filename=" +
  $variable.response.fileName;

アクションの実行順序
1. 最初に画像生成APIを呼び出し、プロンプトを送信してファイル名を取得します。
2. 取得したファイル名を使用して画像表示用のURLを動的に生成します。
3. 生成されたURLをEmbedded Imageコンポーネントで使用して画像を表示します。

コンポーネントの詳細設定

各コンポーネントのプロパティ設定を詳しく説明します。

テキストエリアの設定

• エレメント固有:
  • value: 変数値 $variable.request.prompt

ボタンの設定

• イベント:
  • クリック時: Generate Imageアクションを実行します。

画像埋め込みの設定

• エレメント固有:
  • src: 変数値 $variable.imageUrl

設定ポイント
- テキストエリアのvalueプロパティを$variable.request.promptに設定することで、入力内容が自動的に変数に格納されます。
- 画像埋め込みのsrcプロパティを$variable.imageUrlに設定することで、動的に生成されたURLから画像を表示できます。

以上で画像生成画面の作成が完了です。画面左上の保存ボタンをクリックし、変更を保存してください。

5. 画像生成用画面のルーティング定義を作成します。

作成したBloomMakerコンテンツを実際にアクセス可能にするため、ルーティング定義を作成します。
「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」→「新規作成」をクリックします。

以下の設定でルーティング定義を作成します。

カテゴリ
- カテゴリID: im_cookbook_routing
- カテゴリ名: ルーティング定義カテゴリ CookBook

コンテンツ
- ルーティングID: im_cookbook_263516_screen_image_generation
- コンテンツID: im_cookbook_263516_screen_image_generation
- コンテンツ名: 【CookBook】画像生成画面

コンテンツバージョン番号
- 最新バージョンを利用する: 選択します。

メソッド
- GET: 選択します（画面表示のため）。

URL
- im_cookbook/263516_image_generation

認証URI
- im-bloommaker-content://contents/route/im_cookbook_263516_screen_image_generation

ルーティング名
- 標準: 【CookBook】画像生成画面

設定が完了したら「登録」ボタンをクリックして、ルーティング定義を登録します。

6. 認可設定を行います。

テナント管理者操作ガイド - 認可を設定するを参考に、下記の認可リソースに対して適切な認可設定を行ってください。

画像生成フロー用リソース定義
- リソースURI: im-logic-rest://im_cookbook/263516_image_generation

画像ストレージ取得フロー用リソース定義
- リソースURI: im-logic-rest://im_cookbook/263516_get_storage

画像生成画面用リソース定義
- リソースURI: im-bloommaker-content://contents/route/im_cookbook_263516_screen_image_generation

画像を生成してみます。

ここまでの手順で作成した画面を使い、実際に画像生成を体験してみましょう。

1. 作成した画面を開きます。
   • URL例: {base-url}/im_cookbook/263516_image_generation
   • {base-url}はご利用中のintra-mart Accel Platformの実際のBase URLに置き換えてください。
2. プロンプト入力フィールドに、生成したい画像の内容を入力します。
   • 例: 「青い空に白い雲が浮かんでいる美しい風景」
3. 「画像を生成する」ボタンをクリックします。
   
4. しばらく待つと、生成された画像が画面に表示されます。

このように、IM-Copilotの画像生成アクションとBloomMakerを組み合わせることで、ユーザーフレンドリーなAI画像生成システムをローコードで構築できます。
ぜひお試しください。