LINE BOT(画像スタンプBOT)を作ってみた
皆さん、LINE BOT作ってますか?
SlackでChatOpsしてる身としてはLINE BOTがどんなものか気になっていたので、息抜きにちょっと作ってみました。
せっかくなので LINE BOT AWARDS にもエントリーしてみたりw 良さそうだったらぜひともだち追加お願いします(๑•̀ㅂ•́)و✧
2017/02/16 1:33 追記
Developer TrialのMessaging APIを使っていたところ、ともだちの数の上限が50だったことに気づいたため、アカウントを作り直しました。 いまからBOT作る方はご注意ください><
どんなBOT?
簡単にいうと、「インターネット上の画像をスタンプのように送信する」補助BOTです。
スタンプは買わなきゃいけないけど、ネットで見つけた面白そうな画像ならいくらでも使えるし、もっとコミュニケーションが面白くなるのでは?という発想。
流れ的には
という感じです。
BOTとのトークに切り替えなきゃいけないとこやLINEのメニューを表示するとこなど、ちょっと慣れが必要なのが残念ですが、慣れちゃえばスタンプぐらいの感覚で画像送信できるようになれるかと!
全体アーキテクチャ
お金かかるのも嫌なので、AWSのサーバーレスアーキテクチャ中心にしました。 業務でも使いたいものがあったので、その検証も兼ねて。 利用したのは以下のサービス。
図にするとこんな感じ。
画像一覧取得の流れ
図の左手が画像一覧を取得するためのアーキテクチャです。 役割は以下な感じ。
Lambda実装は、一番ラクに作れそうな aws-serverless-express を利用、LINEとのやりとりは node-line-bot-api を利用しました。
カルーセル表示に画像を利用する場合は、
という条件を満たす必要があるため、Google Custom Search API で取得できるサムネイル画像をそのまま利用しました。 なのでカルーセル表示では画像が荒いかも?その分データ量は軽いので通信量は削減できてると思います。 何より自前で何も用意する必要ないのがありがたいw
画像表示の流れ
図の右手は、カルーセルで<この画像を送信する>を選択した際の、大きいサイズの画像を取得するためのアーキテクチャです。
まずLINE上で画像を<他のトークに送信>するためには、BOTがユーザに対して画像をメッセージ送信する必要があります。 そしてそのためには、画像はカルーセルのサムネイルと同様に、以下の要件を満たす必要があります。
Googleで検索した画像は、当たり前ですがHTTPのものもあれば最大サイズが1024pxを超えているものもあります。 これらを利用するために、以下の役割で画像を配信しています。
感想、まとめ
基本的なと実装のアーキテクチャ構築は土日の夜を使って数時間ぐらいでできました。Lambda楽過ぎる! やりたいことをすでにやってる人も多くて、参考サイトが充実してたのも助かりました。
一番ネックだったのは、Lambdaでリサイズしたデータを画像として配信する流れ。 API GatewayとCloudFrontそれぞれの設定がどうにもうまくいかなくて、そっちの方がむしろ時間かかったかも(;´Д`)
以上、初めてのLINE BOTでした!(๑•̀ㅂ•́)و ちょっとずつ改善はしてくと思うので、要望などありましたらぜひお聞かせくださいませー。
そしてもう一度宣伝w
参考サイト
LINE BOT関連
LINE で画像検索!メッセージから、画像を探してくれるBot【画像検索ボットくん】 | Bot Market
LINE BOT APIを使ってPHPで画像検索BOT作ってみました | rui live note
AWS関連
API Gatewayがバイナリデータをサポートしたので試してみました | Developers.IO
API Gatewayでサーバレスな画像リサイズAPIを作る - Qiita
- 作者: 金城辰一郎
- 出版社/メーカー: ソーテック社
- 発売日: 2016/10/01
- メディア: 単行本
- この商品を含むブログを見る
- 出版社/メーカー: Devil Mountain
- メディア: おもちゃ&ホビー
- この商品を含むブログを見る