matsukaz's blog

Agile, node.js, ruby, AWS, cocos2d-xなどなどいろいろやってます

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です。

f:id:matsukaz:20170215012621p:plain

スタンプは買わなきゃいけないけど、ネットで見つけた面白そうな画像ならいくらでも使えるし、もっとコミュニケーションが面白くなるのでは?という発想。

流れ的には

  1. BOTに対してキーワードを入力すると、
  2. 画像一覧(最大5件、ページング対応)が表示され、
  3. 好きな画像を選択したら、
  4. LINEのメニューから「他のトーク送信

という感じです。

f:id:matsukaz:20170215014243p:plain f:id:matsukaz:20170215004759p:plain

BOTとのトークに切り替えなきゃいけないとこやLINEのメニューを表示するとこなど、ちょっと慣れが必要なのが残念ですが、慣れちゃえばスタンプぐらいの感覚で画像送信できるようになれるかと!

全体アーキテクチャ

お金かかるのも嫌なので、AWSのサーバーレスアーキテクチャ中心にしました。 業務でも使いたいものがあったので、その検証も兼ねて。 利用したのは以下のサービス。

図にするとこんな感じ。

f:id:matsukaz:20170215012507p:plain

画像一覧取得の流れ

図の左手が画像一覧を取得するためのアーキテクチャです。 役割は以下な感じ。

  • API Gateway
    • ユーザからBOTに対して送信したメッセージのWebHook
  • Lambda
    • Google Cusom Search APIを利用してキーワードを条件に画像検索
    • 取得した画像一覧をカルーセル表示メッセージでユーザに返信

Lambda実装は、一番ラクに作れそうな aws-serverless-express を利用、LINEとのやりとりは node-line-bot-api を利用しました。

ルーセル表示に画像を利用する場合は、

という条件を満たす必要があるため、Google Custom Search API で取得できるサムネイル画像をそのまま利用しました。 なのでカルーセル表示では画像が荒いかも?その分データ量は軽いので通信量は削減できてると思います。 何より自前で何も用意する必要ないのがありがたいw

画像表示の流れ

図の右手は、カルーセルで<この画像を送信する>を選択した際の、大きいサイズの画像を取得するためのアーキテクチャです。

まずLINE上で画像を<他のトーク送信>するためには、BOTがユーザに対して画像をメッセージ送信する必要があります。 そしてそのためには、画像はカルーセルのサムネイルと同様に、以下の要件を満たす必要があります。

Googleで検索した画像は、当たり前ですがHTTPのものもあれば最大サイズが1024pxを超えているものもあります。 これらを利用するために、以下の役割で画像を配信しています。

  • Lambda
    • オリジナル画像URLを受取り、1024px以上の場合はリサイズしてbase64で返信
  • API Gateway
    • Lambdaから返ってきたbase64化した画像データを、API Gatewayのバイナリデータのサポートを利用してバイナリデータで返信
  • CloudFront
    • API Gatewayのバイナリデータのサポートを利用するためには、リクエストヘッダにAcceptとContent-Typeが必要なんですが、LINEからのリクエストにはこれらのヘッダが含まれていないため、CloudFrontのカスタムヘッダオプションでヘッダ情報を強制的に付与してAPI Gateway呼び出すことで画像としてユーザに配信

これでBOTからユーザに画像を送信することができました。

感想、まとめ

基本的なと実装のアーキテクチャ構築は土日の夜を使って数時間ぐらいでできました。Lambda楽過ぎる! やりたいことをすでにやってる人も多くて、参考サイトが充実してたのも助かりました。

一番ネックだったのは、Lambdaでリサイズしたデータを画像として配信する流れ。 API GatewayとCloudFrontそれぞれの設定がどうにもうまくいかなくて、そっちの方がむしろ時間かかったかも(;´Д`)

以上、初めてのLINE BOTでした!(๑•̀ㅂ•́)و ちょっとずつ改善はしてくと思うので、要望などありましたらぜひお聞かせくださいませー。

そしてもう一度宣伝w

友だち追加

参考サイト

LINE BOT関連

LINE で画像検索!メッセージから、画像を探してくれるBot【画像検索ボットくん】 | Bot Market

LINE BOT APIを使ってPHPで画像検索BOT作ってみました | rui live note

AWS関連

AWS 謹製 aws-serverless-express を使って APIGateway + Lambda + Node + Express で RESTful サービスの雛形を最速で作る - Qiita

API Gatewayがバイナリデータをサポートしたので試してみました | Developers.IO

API Gatewayでサーバレスな画像リサイズAPIを作る - Qiita

チャットボット AIとロボットの進化が変革する未来

チャットボット AIとロボットの進化が変革する未来

ABCロボ アルファボット 26個セットBOX

ABCロボ アルファボット 26個セットBOX