新元号がまもなく発表されるので、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で返ってくる値を取得します。こちらの６７行目に書いている処理が該当箇所です。
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/