DialogflowとLINE Botで元号ジェネレーターを作ってみた
新元号がまもなく発表されるので、LINE Botで元号ジェネレーターを作ってみました。
LINE Botに「元号作って」と言うと今までに使われた元号の漢字からランダムで画像を生成します。
完成動画
元号ジェネレーターをLINE Botで作ってみた#LINEBot#元号ジェネレーター pic.twitter.com/2DMs7XCca5
— がおまる@スマートスピーカーアプリ開発入門発売中! (@gaomar) March 13, 2019
LINE Bot
こちらから友だちになると元号ジェネレーターを試すことができます。
QRコードはこちら
1. AWS Lambdaで関数を作成しよう
AWSにBotの処理を記述します。Lambdaページへ行って関数を新規で作成しましょう。
LambdaのロールはS3のフルアクセス権限とCloudWatchのフルアクセス権限を付与しています。
1-1. プログラムをアップする
Lambdaにプログラムをアップします。こちらに完成したファイルがあるので、参考にしてください。
https://github.com/gaomar/gengo-generator-bot/raw/master/lambda.zip
Lambdaの環境変数にS3のバケット名を指定します。最後に右上の[保存]ボタンをクリックします。
プログラムの中身は特に解説しません。興味ある方はこちらから確認してみてください。
https://github.com/gaomar/gengo-generator-bot/blob/master/index.js
1-2. Lambda Layerをアップする
Lambda Layerという便利な機能があります。これを使えばLambdaに全部圧縮して上げなくても良くなります。
JimpというJavascriptで画像編集できるライブラリがあるので、これをLambda Layerにアップします。
Lambda Layerのフォルダ構成が決まっているので、その通りに作成します。
ローカルPCで規定のフォルダに保存します。
$ mkdir nodejs
$ cd nodejs
$ npm init
$ npm install --save jimp
$ cd ..
$ zip -r nodejs.zip nodejs
左メニューからLayers
をクリックして、[レイヤーの作成]ボタンをクリックします。
これで生成されたnodejs.zip
ファイルをLambda Layerにアップします。
Layersをクリックして、[レイヤーの追加]ボタンをクリックします。
先程作成したLambda Layerを選択します。最後に右上の[保存]ボタンを押せばLayerが追加されます。
1-3. API Gatewayを適用する
左メニューからAPI Gatewayを選択します。
新規APIの作成を選択して、セキュリティはオープン
を選択します。
最後に[追加]ボタンをクリックします。
右上の[保存]ボタンを押せば、アクセスURLが発行されます。これは後ほど使うのでメモしておきましょう。
1-4. タイムアウト時間を伸ばしておく
画像の合成に時間がかかって、デフォルトの3秒だとタイムアウトしてしまいます。
少しタイムアウト時間を伸ばしておきます。
2. Messaging APIでLINE Botを作成する
LINE DevelopersのサイトにアクセスしてMessagin APIのチャネルを作成します。
https://developers.line.biz/console/
3. Dialogflowでプロジェクトを作成する
LINE Botとの連携のためDialogflowで新規エージェントを作成します。
3-1. API GatewayのアクセスURLを指定する
Fulfillment部分をクリックして、API GatewayのアクセスURLを指定します。
3-2. MainIntentを作成
Botが反応する言葉を登録します。Intentの右にある[+]ボタンをクリックします。
Intent名にMainIntent
と入力します。その下にあるTraining phrasesにBotが反応する言葉をたくさん登録します。
3-3. EndIntentを作成
Lambdaから返ってくる値を受けとるIntentを作成します。
左メニューのIntentsにある[+]をクリックして新規Intentを作成します。
Intent名はEndIntent
と入力します。Events部分にFINISH
と入力します。
Actions and parameters部分にパラメータ値を入力します。
PARAMETER NAME | ENTITY | VALUE |
---|---|---|
myURL | @sys.url | #FINISH.myURL |
myMessage | @sys.any | #FINISH.message |
このパラメータはLambdaで返ってくる値を取得します。こちらの67行目に書いている処理が該当箇所です。
https://github.com/gaomar/gengo-generator-bot/blob/master/index.js
3-4. Botにレスポンスを返す
Botに表示するレスポンスを指定します。
DEFAULT
タブをクリックして、Text responseに$myMessage
を指定します。
これで、Lambdaから返ってくるメッセージを表示することができます。
3-5. LINE用のレスポンスを返す
生成された画像のURLを渡して、Botに画像を表示させるようにします。
$myURL
に画像のアクセスURLが返ってきます。
※システムの仕様でhttps://
がついているとエラーになったので、Lambdaで返す際に除外しています。
②を有効にするのは、3-4のレスポンス文言を表示してから画像が表示されるようにしているためです。
4. LINE Botと連携する
Botと連携する設定を行います。左メニューからIntegrations
をクリックします。
その中にあるLINEをクリックします。
LINE Botのチャネル基本情報にかかれているChannel ID
Channel Secret
Channel Access Token
をそれぞれコピペします。
Webhook URL
はLINE DevelopersにあるWebhook URLへコピペします。
右下のSTART
ボタンを押せばBotが動き出します。
まとめ
Dialogflowと連携すれば画像合成してBot上に表示できるものが簡単に作れます。
アイデア次第で面白いBotができるので、ぜひチャレンジしてみてはいかがでしょうか?
システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/
Author And Source
この問題について(DialogflowとLINE Botで元号ジェネレーターを作ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/h-takauma/items/c97031e2135da3766aa5著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .