LINE Botで読書管理アプリを作る

2020/12/10に公開

※2021/04/10追記
※現在は停止しています

LINE Botで読書管理できるアプリをリリースしたので、そこで使われているLINE Bot(Messaging API)の機能を紹介します。
基本的な機能のみなので、初心者向けとなっています。
こんな事ができるんだ、こんな風に使えるんだというの知ってもらえればと思います。
LINE Developers Community によるLPF REV UP 2020のLTで話した内容になります。

Bot紹介


https://lin.ee/OA9xhCo

LINE Bot処理の基本的な流れ

ユーザーがLINEでメッセージを送信したりアクションをすると、まずはLINEサーバーへリクエストが飛びます。
その後、LINEサーバーからこちら側が用意したサーバーにリクエストが送信されます。

こちら側は以下のような感じでパラメータを受け取る事ができます。(今回はRuby)

 {"events"=>[
   {
     "type"=>"message",
     "replyToken"=>"b55dbb48zzzzzz7fzzzzzz",
     "source"=>{"userId"=>"Uc7zzzzzzzzzzzzzzzz", "type"=>"user"},
     "timestamp"=>1602378060070,
     "mode"=>"active",
     "message"=>{"type"=>"text", "id"=>"112345677", "text"=>":読んだ本"}
   }
 ],
}

どのユーザーがどんなアクションを行なったのかを知る事ができます。
Botの処理の基本的な流れとして以下になるかと思います。

  1. 受け取ったパラメータを判別し
  2. 処理を行ない
  3. ユーザーに返信する、
message_hash = {
 type: 'text',
 text: "追加しました"
}
@client.reply_message(reply_token, message_hash)

返信含め、諸々の処理は公式が用意してくれているSDKを使うことになるかと思います。
https://github.com/line/line-bot-sdk-ruby

リッチメニュー

トーク画面の下に表示させることができるメニューのことです。
タップすると設定しておいたテキストをトークに送信させたり、リンクへ遷移させることができます。
画像では「:読んだ本」「:グラフ」というメッセージを送信させるようにしています。

設定は管理画面(LINE Official Account Manager)でかんたんにできます。

こんな感じでタップされたときのアクションを設定できます。
ボタン自体のデザインも今回みたいにシンプルに文字だけなら管理画面上だけで作ることができるし、画像を用意し当てはめることもできます。

テンプレートメッセージ


MessagingAPIを使ってユーザーに送ることのできるメッセージの一つです。
https://developers.line.biz/ja/reference/messaging-api/#template-messages
(テキスト、スタンプ、画像、動画、音声、イメージマップ、テンプレート、Flexの8種類)

テンプレートは決められたレイアウトに沿ってテキストや画像、ボタンなどを送信できます。
レイアウトは4種(ボタン、確認、カルーセル、画像)あって今回使っているのはカルーセルテンプレートです。
画像を見てもらえればなんとなくわかると思いますが、上からサムネ画像、テキスト、アクションを設定しています。
(ちなみにPC版からは使えないので見えません)

ポストバックアクション

ユーザーがタップしたときに起こすことのできるアクションの一つです。
https://developers.line.biz/ja/reference/messaging-api/#postback-action
ポストバック、メッセージ、URI、日時、カメラ、位置情報の6種類あります。
画像でいうとテンプレートメッセージにポストバックアクションを仕込んでいて、タップするとPOSTリクエストをサーバー側で受け取ることができます。

あらかじめテンプレートメッセージを送信するときにアクションを仕込みます。

以下はテンプレートメッセージを作成している処理の一部。

# 省略
 actions: [
   {
      type: "postback",
      label: "読んだ",
      data: "action=read&book_id=#{book.id}"
   },
   {
      type: "uri",
      label: "楽天リンク",
      uri: book.book_links.first.url
   }
# 省略

「読んだ」ボタンにはポストバックアクションが仕込まれていて、こちらのサーバー側でPOSTリクエストを受け取ったときのパラメータにdataの部分が文字列で含まれているので、それを判別し、「この本の読んだを押したんだな」というのがわかるようになっています。

ちなみに楽天リンクの方はURIアクションとなっていてuriに設定したURLに遷移させることができます。

感想

以上、読書管理Botで使ったMessagingAPIの機能の簡単な紹介を行いました。
ここで上げたものはMessagingAPIのごく一部です。
ここからリファレンスを見れるので、どんな機能があるんだろうと眺めてみると、なにかアイデアが浮かぶかもしれませんね。
https://developers.line.biz/ja/reference/messaging-api/
LINE Botに関しては、自分が今までWebのものしか作ってこなかったので、Webの知識でネイティブっぽいアプリが作れるのは便利だなと思いました。
今後LINEがスーパーアプリとなっていくのか、そしてミニアプリが流行りその流れが個人開発者にも来るのかどうか。楽しみですね。

Discussion