OpenAIの画像生成APIで、LINE Botをつくってみた ｜ ノーコードのデータ連携ツールを使って

2022年12月現在、OpenAIが開発した対話型チャットボットの「ChatGPT」が話題です。

OpenAIは対話型のチャットボットだけでなく、AIによる画像生成のAPIも公開しています。
今回はこの画像生成APIを使って、LINE Botをつくってみました。

## 完成形

以下が完成したBotの画像です。LINEで友だち登録して使います。
メッセージを送ると、AIが画像生成してくれます。画像生成にかかる時間は5秒くらいです。
![ProgrammingSantaClausPng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/55015b0f-471b-ad46-2206-160a46459320.png)
![Enlightened-Santa-Claus.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/4e201280-02ba-f130-119d-89bbc60c5a8a.png)
![Santa-Claus-spoils-his-reindeer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/715edf0f-1b9f-5f5b-4f98-7e18f759f38f.png)![Santa-Claus-playing-soccer-with-reindeer-on-a-beach-in-Hawaii.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/bdce2f53-0a88-4f12-bfc0-3c34b3d303cc.png)

## 処理の流れ

今回つくったBotの大まかな処理の流れです。
![process-flow-resized.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/f7dfb25f-6101-5713-6e52-4176f73d5342.png)

上図の **ASTERIA Warp** は、ノーコードのデータ連携ツールです。
ASTERIA Warpを使うことで、「AからBへデータを渡す」といった処理をかんたんに実装できます。そのためコードを一行も書かずに、LINE Botをつくることができました。

## 対象読者

今回の記事は、以下のような方を対象にしています。

- ノーコードでLINE Botをつくってみたい
- OpenAIの画像生成APIを使ってみたい
- ASTERIA Warpを使う場合は、企業の方

ASTERIA Warpは企業でないと導入できないようです。費用など詳しくは、公式サイトを確認してください。

[ASTERIA Warp 製品ラインナップ・価格](https://www.asteria.com/jp/warp/lineup/)

## 参考記事

実装にあたって、まず以下の記事を参考にしました。ASTERIA Warpの公式ブログ記事です。

- [ASTERIA WarpがLINEBotに！？～LINE公式アカウントにつないでみた～](https://www.asteria.com/jp/warp/blog/20181205/35386.html)
- [いつものLINEが翻訳アプリに？～LINEで翻訳Botをつくってみた～](https://www.asteria.com/jp/warp/blog/20190204/37406.html)

ASTERIA Warpには、[LINEアダプター](https://www.asteria.com/jp/warp/feature/option/line)というものが用意されています。このアダプターを利用することで、LINE公式アカウントに友だち登録されているLINEユーザーへ簡単にメッセージの送信ができます。

# 実際につくってみる

それでは実際につくっていきます。具体的な手順は以下の通りです。

1. ASTERIA Warpでプロジェクトとフローをつくる
2. フローをブラウザから実行できるようにする
3. ASTERIA WarpサーバーでHTTPS通信をする
4. LINE公式アカウントを開設する
5. LINE Developersコンソールで、Webhookを設定する
6. LINEアダプターを利用する
7. Google CloudのTranslation APIを設定する
8. OpenAIのImage Generation APIを設定する
9. 生成した画像をLINEユーザーへ返信する

## ASTERIA Warpでプロジェクトとフローをつくる

私は今回、[手ぶら de ASTERIA Warp 体験 5日間](https://www.asteria.com/jp/contact/asteria/taiken_cloud/)を利用しました。クラウド上で手軽に試せる5日間の体験版です。リモートデスクトップでサーバーに接続して試せます。

まずこのASTERIA Warpでプロジェクトをつくります。プロジェクトというのは、複数の処理をまとめて管理するためのものです。

詳しくは、公式のチュートリアルガイドなどを参考にしてください。「手ぶら de ASTERIA Warp」を利用すると、リモートデスクトップのデスクトップにチュートリアルガイドが用意されています。

私はこのチュートリアルガイドで、基本的な操作を学びました。基本的な操作を覚えるのにかかった時間は、2時間ほどです。

プロジェクトをつくったら、その中にフロー（フローサービス）をつくります。フローなどASTERIA Warpの概要については、以下の動画が分かりやすいです。

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/2i9Zuk44bR4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## フローをブラウザから実行できるようにする

LINEでWebhookを設定すると、LINEユーザーの送ったメッセージ情報を任意のURLへ送信できます。

今回の実装では、下図②の部分です。
![1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/c69b829d-17c7-9eaa-ad78-eba9947fe417.png)
この②では、LINEのWebhookで設定したURLを、ASTERIA Warpのフローを実行するトリガーにします。これにより、LINEのメッセージ情報をASTERIA Warpで受け取ることができます。

フローの具体的な作成方法については、以下の公式マニュアルが参考になります。

- [ブラウザから実行できるようにするには](https://support.asteria.com/hc/ja/articles/236098287)

このマニュアルにそって、URLトリガーによるHTTP起動の実行設定を定義します。
![ブラウザから実行できるようにするには_–_ASTERIA_Warp_サポートサイト-ADN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/213912c7-32d8-1443-7e2d-e889fb4c9f32.png)
↓
![ブラウザから実行できるようにするには_–_ASTERIA_Warp_サポートサイト-ADN-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/6d9ed669-74b3-2390-48f0-03567fa2ca59.png)
（画像は上記マニュアル https://support.asteria.com/hc/ja/articles/236098287 より引用）

## ASTERIA WarpサーバーでHTTPS通信をする

LINEと連携するためには、HTTPS（SSL/TLS）での通信が求められます。

LINEからASTERIA WarpサーバーへHTTPSで通信するため、[ngrok](https://ngrok.com/)というサービスを利用しました。ローカルPCやプライベートネットワーク上のサーバーと、外部ネットワークをつなぐリバースプロキシです。
![ngrok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/eb52f8d9-4cc3-918b-ff08-853a0a8656db.png)

このngrokを利用することで、かんたんにHTTPS通信で外部サービスと連携できます。先ほど「フローをブラウザから実行できるようにする」で登録したURLトリガーのURL（HTTP）を、ngrok経由でHTTPSとして公開します。

具体的にはASTERIA Warpが稼働しているサーバーのコマンドプロンプトで、以下のようなコマンドを実行します。

```
ngrok http 21380   # 21380ポートのサーバーをngrok経由で公開する
```

もちろんASTERIA Warpを使ったサービスを第三者に公開して運用する場合などは、安全のためngrokからASTERIA Warpへの通信もHTTPS（SSL/TLS）で暗号化した方が良いでしょう。以下の記事が参考になります。記事中の「＜事前準備１＞ASTERIA Warpサーバーの設定」という部分です。

[ASTERIA WarpがLINEBotに！？～LINE公式アカウントにつないでみた～](https://www.asteria.com/jp/warp/blog/20181205/35386.html#serverSetting)

## LINE公式アカウントの開設

LINE公式アカウントを開設します。LINE公式アカウントを利用することで、友だちとして登録されているユーザーへメッセージを自動で送信できます。

アカウントの開設は:point_down:からできます。
[【公式】LINE公式アカウントをはじめましょう｜LINE for Business](https://www.linebiz.com/jp/entry/)

## Webhookの設定

LINE公式アカウントを開設したら、[LINE Developersコンソール](https://developers.line.biz/ja/docs/line-developers-console/)でWebhookの設定をします。この設定により、LINE公式アカウントにメッセージが送信されたとき、WebhookイベントからASTERIA Warpサーバーでメッセージ情報を受信できます。

Webhookの具体的な設定方法については、先ほども紹介した以下のブログ記事が参考になります。記事内の「まずは「LINE公式アカウント」のアカウントを開設しましょう。」という部分です。

[ASTERIA WarpがLINEBotに！？～LINE公式アカウントにつないでみた～](https://www.asteria.com/jp/warp/blog/20181205/35386.html#accountSetting)

上記のブログ記事では、フローのURLトリガーをHTTPSにしています。しかし私は今回、フローのURLトリガーはHTTPにして、先ほどngrokで公開したHTTPSのURLをWebhookのURLとして設定しました。
![LINE_Developers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/dae8db5f-89a9-7f7c-db7a-fe85f72a5a06.png)

## LINEアダプターを利用する

ASTERIA WarpのLINEアダプターを利用することで、LINE公式アカウントの友だちユーザーへ簡単にメッセージの送信ができます。アダプターというのは、LINEやGoogleなどの外部サービスとASTERIA Warpをかんたんに繋ぐためのモジュールのことです。

詳しくは、すでに紹介した以下の記事が参考になります。

1. [ASTERIA WarpがLINEBotに！？～LINE公式アカウントにつないでみた～](https://www.asteria.com/jp/warp/blog/20181205/35386.html)
2. [いつものLINEが翻訳アプリに？～LINEで翻訳Botをつくってみた～](https://www.asteria.com/jp/warp/blog/20190204/37406.html)

この2つ目の記事では、ASTERIA Warpのアダプターを組み合わせてつくる簡単な翻訳Botを紹介されています。またこの記事の最後に、ダウンロードして使えるフローが公開されています。私はこのフローを基に、今回のLINE Botをつくりました。

## Google CloudのTranslation APIを設定する

OpenAIの画像生成APIは、日本語でも画像生成できます。そのため当初は日本語で画像生成して、その画像をLINE Botで返信していました。

しかしすぐ、上手くいかないと気づきました。なぜならOpenAIの画像生成APIは日本語が苦手で、関係ない画像が生成されてしまうからです。
![リンゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/dd950a39-33a6-2de1-5928-5ec53a6b700d.png)
![りんご.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/e6c96749-fffa-fffe-bf05-51dd2cc1552b.png)
![林檎.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/70cdb531-3ffd-1439-696f-a6c60f102b72.png)
上の「林檎」では、「林」という字から木々を連想したようです。どうやらOpenAIの画像生成モデルは、漢字を日本語より中国語として認識しているようです。

ためしに、リンゴを中国語（簡体字）で画像生成してみました。すると完璧なリンゴが生成されました。
![苹果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/fc79092c-8160-2a05-7a3e-7987ea6f17fd.png)

「女性」でも上手く生成できました。これは「女性」の場合、日本語と中国語で漢字が同じだからだと思います。
![女性.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/540a8c4d-fc82-654d-1b26-c41595d925fe.png)

ちなみに「Woman」だと、西洋系の女性になりました。
![woman.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/c12fbf05-2767-ce51-c974-ba1104fe0c81.png)

日本語だと上手くいかないことが分かったので、日本語のメッセージは英語に翻訳してから画像生成することにしました。

そのためGoogle CloudのTranslation APIを利用することにしました。今回の実装では、下図の③の部分です。
![3-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/557b99e1-5d2f-07dc-6bd9-0e2d317e398d.png)

具体的な実装方法については、先に紹介した以下の記事が参考になります。

[いつものLINEが翻訳アプリに？～LINEで翻訳Botをつくってみた～](https://www.asteria.com/jp/warp/blog/20190204/37406.html)

:point_up:の記事では英語から日本語に翻訳しています。しかし今回の実装では、日本語から英語に翻訳します。

## OpenAIのImage Generation APIを設定する

画像生成（Image Generation）APIを利用して、英語に翻訳したメッセージから画像を生成します。下図④の部分ですね。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/71ae0f4e-06f1-6cf2-8530-a8c1f4544cc5.png)

APIへPOSTリクエストするため、ASTERIA Warpのフローでマッパー（Mapperコンポーネント）を使います。マッパーについて詳しくは、以下の公式マニュアルが参考になります。

[データのマッピングを行うには](https://support.asteria.com/hc/ja/articles/236055567)

マッパーを使って、英語に翻訳したメッセージをPOSTリクエストのリクエストボディに挿入します。そのためにEmbed関数を使います。Embed関数については、以下の公式マニュアルが参考になります。マニュアル内の「入力データを文字列に埋め込む(Embed 関数)」という部分です。

[文字列データを加工するには](https://support.asteria.com/hc/ja/articles/115000022368)

Embed関数を使って、以下のようにリクエストボディを作成します。
![embed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/7df75872-cc56-1a71-5be7-944dc143e3c2.png)

```
{
    "prompt": "$input1",
    "n": 1,
    "size": "256x256"
}
```

上記の `$input1` に、英語に翻訳したメッセージが入るようにフローを設定します。

リクエストボディのパラメーターについては、OpenAIの公式ドキュメントを参照してください。

[Image generation - OpenAI API](https://beta.openai.com/docs/guides/images/introduction)

英語に翻訳→画像生成のフローは、以下のようにつくりました。
![subflow2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/6ec0b0fa-3436-b90a-a846-10ef23e9be53.png)

## 生成した画像をLINEユーザーへ返信する

OpenAIの画像生成APIで生成した画像をLINEユーザーへ返信します。下図⑤の部分です。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/2c441ee7-6285-f1c1-7212-e4d6ed825354.png)

ASTERIA Warpのフローは、LINEReplyコンポーネントを使って以下のようにつくりました。
![subflow4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/00dd140b-3fd3-b53d-d556-2cac3af65ef5.png)

このフローで使っている2つのマッパーは、以下のように設定しています。
![mapper2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/662f1894-948b-f1d9-00cc-95b29d3215cf.png)
![mapper1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/c14bf8c6-af4f-6514-6d3c-905d780b5db8.png)
この2つのマッパーにより、OpenAIの画像生成APIから返ってきた画像URLを「プレビュー画像のURL」と「画像のURL」の2か所に設定しています。

LINEユーザーへの返信処理は、LINEReplyコンポーネントがやってくれます。

これで完成です:tada:

![Santa-Claus-praising-programmers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/75fb8596-2abe-1a55-a5f9-8dcd64f6df2e.png)

## まとめ

ASTERIA Warpを使うことで、一行もコードを書かずにLINE Botを作ることができました。以下のようなデータの受け渡し処理を、かんたんに構築できたためです。

LINEのメッセージを翻訳APIに渡す
↓
翻訳結果を画像生成APIに渡す
↓
生成した画像をLINEユーザーへ返信する

ただASTERIA Warpに限らず、ノーコードツールには良いことばかりではありません。以下のようなデメリットもあります。

### ① 慣れないとデバッグが難しい

普通にコードを書く場合、デバッグ方法が確立しています。たとえばJavaScriptなら `console.log` でログを出力したり、`debugger` でブレークポイントを設定するなど。

しかしノーコードツールの場合、ツールの操作方法だけでなく、デバッグ方法も慣れないと分からないことが多いです。私がいろいろ試して学んだASTERIA Warpのデバッグ方法について、後ほど紹介します。

### ② イレギュラーな処理を実装するのが難しい

普通にコードを書く場合、ググればいろいろな情報が出てきます。少し特殊な処理をしたい場合でも、ググれば解決することが多いです。

しかしノーコードツールの場合、メジャーなプログラミング言語に比べると情報が少ないです。なので公式ドキュメントにない処理を実装したい場合などは、独力での解決が難しいです。ただASTERIA Warpの場合はチャットで手軽にサポートを受けられるようなので、あまり困らないと思います。

## ASTERIA Warpのデバッグ方法

ASTERIA Warpのデバッグ方法について、以下の3つを紹介します。

### ① ログを確認する

ASTERIA Warpでログを確認する方法は、3つあります。詳しくは以下の公式ドキュメントが参考になります。

[フローサービスログ](https://support.asteria.com/hc/ja/articles/229445768)

私は「フローサービス管理コンソール」でログを確認しました。管理コンソールにログインして「状態」-「ログ」で確認できます。
![log.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/e83e02ec-7009-a7e7-d0ac-6f1c639f9b40.png)

### ② RESTコンポーネントでテスト実行する

RESTコンポーネントは、ASTERIA Warpで外部のHTTPサーバーと通信するためのコンポーネントです。詳しくは以下の公式ドキュメントが参考になります。

[REST - HTTPサービスの呼び出し](https://help.asteria.com/documentation/warp/ja/4.7/flow/designer/reference/component/REST.html)

このコンポーネントを使うと、HTTPリクエストのテストができます。具体的には、リクエストボディやヘッダーなどを自由に設定して、任意のURLへリクエストを送信できます。リクエストのレスポンスも確認できるので、デバッグに便利です。
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/4557a455-a4e3-9349-2174-c9cf585662cb.png)

類似のコンポーネントとしてHTTPGet、 HTTPPostコンポーネントがあります。しかしこれらのコンポーネントには、テスト実行ができないなどの制限があります。なのでGETやPOSTでリクエストする場合でも、デバッグするならRESTコンポーネントを使うのが良いでしょう。

### ③ Webhookのデバッグサービスを使う

これはASTERIA Warpに限らず使える方法です。[Webhook.site](https://webhook.site/) というサービスを使います。

Webhook.siteにアクセスすると、ユニークかつランダムなURLが発行されます。このURLをWebhookの送信先に設定してリクエストを送信すると、リクエストの詳細を確認できます。
![Webhook_site_-_Test__process_and_transform_emails_and_HTTP_requests.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140258/792d4617-f72a-636c-6d93-4f971f1f2981.png)

以下のまとめが参考になります。

[Webhook.site のまとめ - Zenn](https://zenn.dev/voluntas/scraps/f4c55fb1e46a93)

今回つくったLINE Botの場合、LINE DevelopersコンソールでWebhookのURLを設定しました。このときWebhook.siteで発行されたURLを登録することで、LINEのWebhookイベントで送信されるリクエストの詳細を確認できます。