miibo連携のLINE Botで画像や動画メッセージの送信 - カスタムアクション

生成AIな皆さん、miibo使ってますか



https://x.com/n0bisuke/status/1918590222834471382

## 通常のmiiboでのLINE Bot開発

連携は簡単ですが、テキストメッセージの送信しかできません。

LINE Botを作るLINE Messaging APIの機能的にはユーザーに画像や動画メッセージを送ったり、テンプレートメッセージ

## カスタムアクション

JavaScriptの任意のコードを記述して、任意の処理をAIにさせることができます。

APIリクエスト

## カスタムアクションで画像や動画メッセージの送信の流れ

### 1. 事前準備

`miiboで簡単なLINE Botを作れている状態`までを作っておいてください。以下の3点が必要になります。

- miibo連携されている簡単なLINE Bot

- LINE Botの`チャンネルアクセストークン`と`自身のユーザーID`

<details><summary>ユーザーIDはLINE Botの管理画面から確認できます。</summary>

> ![CleanShot 2025-05-04 at 15.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/1c88cb8f-721a-40d2-8b33-d903e86c2c8e.png)

</details>

- 送信したい画像のURL （特にない場合はこちらをご利用ください。`https://i.gyazo.com/d31b4bcfcdb7dd9333aa01213c9a2811.jpg` ）

> <img src="https://i.gyazo.com/d31b4bcfcdb7dd9333aa01213c9a2811.jpg" width="200px" />
> 
> H2Oの化学式でポケモン風のキャラを画像生成AI（gpt-image-1）に作ってもらった画像

#### miiboのダッシュボードの新画面

以降、miiboのダッシュボードを新画面（2025/5/4時点）で説明するので、新画面に切り替えか読み替えて進めてください。右上から切り替えできます。今はベータって書いてるところからもmiibo側のUI改修のタイミングらしいので随時読み替え推奨。

> 新しい画面
> ![CleanShot 2025-05-04 at 13.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/03f57f41-936d-4da0-b50c-018755006a5f.png)

### 2. Custom Action（カスタムアクション）の作成

左のサイドメニューの`エージェント` > `スキル`から`Custom Action`を選択します。

> <img src="https://i.gyazo.com/3a877d74f21cedd584f4897a8bf90357.png" width="450px" />

`カスタムアクションを追加`を選択します。

> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/d868300c-d1ad-4bba-822b-50713f351a69.png" width="450px" />

以下の内容を入力していきます。

- 名前: `send_image_linemessage` 任意の名前で大丈夫ですが機能の説明として分かりやすいものにしましょう
- JavaScriptコード:

```js
const result = {
    success: false,
    messages: [],
    error: null
};

try {
    // 入力値のバリデーション
    if (!input.imageUrl) {
        throw new Error('Image URL is required');
    }
    if (!input.to) {
        throw new Error('Recipient is required');
    }

    // 環境変数の検証
    if (!env.LINE_CHANNEL_ACCESS_TOKEN) {
        throw new Error('LINE Channel Access Token is not configured');
    }

    // LINEへのリクエスト
    const response = fetch('https://api.line.me/v2/bot/message/push', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${env.LINE_CHANNEL_ACCESS_TOKEN}`
        },
        body: JSON.stringify({
            to: input.to,
            messages: [
                {
                    type: 'image',
                    originalContentUrl: input.imageUrl,
                    previewImageUrl: input.imageUrl
                }
            ]
        })
    });

    if (response.status !== 200) {
        result.to = input.to;
        result.imageUrl = input.imageUrl;
        throw new Error(`LINE API request failed: `);
    }

    result.success = true;
    result.messages = ['Image message sent successfully'];

} catch (err) {
    result.error = err.message;
}

result;
```

> ![CleanShot 2025-05-04 at 13.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/972e32b9-6f4f-4812-a996-aca01c3a51a5.png)


- 環境変数: （追加ボタンを押して追加）
    - キー: `LINE_CHANNEL_ACCESS_TOKEN`
    - 値: `自身のLINEのチャンネルアクセストークン`

- Input Parameters: （追加ボタンを押して追加）
    - 1つ目
        - キー: `to`
        - 型: `string`
        - 必須: チェック
    - 2つ目
        - キー: `imageUrl`
        - 型: `string`
        - 必須: チェック

> ![CleanShot 2025-05-04 at 13.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/03f603a2-f1a5-4473-b8c1-5dbf319bacd6.png)

最後に`保存`を押します。

これでカスタムアクションが作成されました。

#### 補足:  カスタムアクションのコードはmiiboのAIに作ってもらった 読み飛ばしてOK

JavaScriptコードは未経験者からすると難しそうに見えますが、miiboのチャットで聞いて作ってもらっています。

https://x.com/n0bisuke/status/1918887109852582157

### 3. Webhookの設定（Function Calling）

カスタムアクションは作っただけだといつどのタイミングでその処理を実行するのか？が定義されません。
miiboの会話型AIでWebhookの設定から任意のタイミングでカスタムアクションを呼び出す連携処理を行います。

ChatGPTなどに付加されているFunction Callingという機能を使うのがベターだと思います。

- カスタムアクションは関数（Function）の作成
- Webhook設定で関数の呼び出し

というセットですね。


> ![CleanShot 2025-05-04 at 13.45.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b4782e19-f248-4cc3-8322-384ab299e437.png)

先ほど同様に`エージェント > スキル`から`Webhooks`を選択します。

> ![CleanShot 2025-05-04 at 13.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/1cdacfca-0ec3-41b9-b320-93bd3d257969.png)

以下を設定していきます。

- 連携タイプ: Custom Actionと連携
- Webhook名: `send_image_linemessage`など任意の名前
- Custom Actionを選択: 先ほど作成したカスタムアクションを選択（`send_image_linemessage`などの名前）

> ![CleanShot 2025-05-04 at 13.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/d0a1df43-f4fc-486b-8019-c0ab9ab96cfa.png)

途中の他の設定は一旦スルーしてスクロールしていき、**`AIにタイミングを判断させる (Function Calling)`にチェック**をしれます。

- Function Name: send_image_linemesasge （ここも任意で良いですがCustom Action名とあわせておきます）
- Function Description: 以下のように記述しましょう

> 画像をユーザーに送信します。toに指定がない場合はUdxxxxxxxxxxxxxxxxxxx を、imageUrlに指定がない場合はhttps://i.gyazo.com/d31b4bcfcdb7dd9333aa01213c9a2811.jpg を利用すること。

ここでこのようにデフォルトの値を決めておくことでエラーが起きにくいです。toに指定がない場合〜のUdから始まっているIDにLINEのユーザーIDを指定し、imageUrlには送信したい画像URLを指定します。
（toにmiiboのステート機能からLINEのIDを指定することで利用できますが本題ではないので省略します。）

> ![CleanShot 2025-05-04 at 15.21.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/74630eae-fef5-4cbe-b224-d74816ef41a6.png)


他の項目は特に触らず、一番下の`保存`で保存します。

最後に公開状態の設定を忘れないようにしましょう。

> ![CleanShot 2025-05-04 at 14.13.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/1bf3945d-2161-4f9a-8ff9-19827e04499a.png)

### 4. 念押しでAIに機能を教えるプロンプトを入れる

これはなくても大丈夫な場合もあるのですが、作っているAIがそんな機能使えません！と言ってくる場合があるので、AIのプロンプトにあなたはこんな機能が使えるよと書いておくと挙動が安定するので入れておきましょう。

```
# 機能
あなたはLINE連携でカスタムアクションが使えます。

## 画像送信機能
ユーザーに画像を送信してください。
```

> 他のプロンプトの最後に書いてあります。"追記プロンプト"に入れても大丈夫です。
> ![CleanShot 2025-05-04 at 15.14.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/57e97a6d-2a2e-4026-9770-499a80200871.png)

### 5. 試す

ユーザーに画像を送信して！などとLINEでBotに話かけてみましょう。

>  ![CleanShot 2025-05-04 at 15.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/e932295c-2515-4b69-abcf-32b52f8bf431.png)

無事にLINEの画像メッセージを送信できました。

## Tips: 上手くいかないとき

分析レポートから上手くWebhookが機能しているかを確認しましょう。

> ![CleanShot 2025-05-04 at 15.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/5a0307c1-64d9-4720-b7bd-b625e7b76979.png)


## Tips: カスタムアクションを書く時の注意

ダッシュボードに書いてますが以下のようにNode.js環境のように見えるけどちょっと特殊だったりします。

```
実行時の注意点
- 同期実行： コードは同期的に実行されます
    - Promise、async/await は使用できません
    - fetch は同期的に動作します
- 実行コンテキスト： ブラウザ/Node.js環境とは異なります
    - window、document オブジェクトは利用できません
    - setTimeout/setInterval は利用できません
    - グローバルスコープでの this は undefined です
```

ChatGPTなどでそのままのAI生成コードだと上手く動かない可能性が高いですね。

## 応用すると画像生成との組み合わせも

カスタムアクションは普通にプログラムを書いてるので、ユーザーからのチャットを元に画像を生成して送ってくれるLINE Botも作れます。

- OpenAIの`gpt-image-1`で画像生成
- imgBBに画像アップロード
- LINE Messaging APIで画像メッセージ送信

をカスタムアクションで書くとこんなこともできました。

https://x.com/n0bisuke/status/1918590222834471382

クセ強いけど任意のAPIなどと連携できるのは可能性が広がりますね。