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

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

通常のmiiboでのLINE Bot開発

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

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

カスタムアクション

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

APIリクエスト

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

1. 事前準備

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

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

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

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

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

H2Oの化学式でポケモン風のキャラを画像生成AI（gpt-image-1）に作ってもらった画像

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

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

新しい画面

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

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

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

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

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

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;

• 環境変数: （追加ボタンを押して追加）

  • キー: LINE_CHANNEL_ACCESS_TOKEN
  • 値: 自身のLINEのチャンネルアクセストークン

• Input Parameters: （追加ボタンを押して追加）

  • 1つ目
    • キー: to
    • 型: string
    • 必須: チェック
  • 2つ目
    • キー: imageUrl
    • 型: string
    • 必須: チェック

最後に保存を押します。

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

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

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

3. Webhookの設定（Function Calling）

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

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

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

というセットですね。

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

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

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

途中の他の設定は一旦スルーしてスクロールしていき、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を指定することで利用できますが本題ではないので省略します。）

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

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

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

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

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

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

他のプロンプトの最後に書いてあります。"追記プロンプト"に入れても大丈夫です。

5. 試す

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

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

Tips: 上手くいかないとき

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

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で画像メッセージ送信

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

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