LIFFとLINEBOTを連携させてつくる飲食店検索アプリ

LIFFとLINEBOTを連携させてつくる飲食店検索アプリ @yagi_eng 2020/7/27

正確には… 飲食店検索＆お気に入り登録できる LIFFアプリとLINEBOTの2つをつくりましたデータを共用しているという点で連携しています 2

こんなのつくりました 3

こちらのQRコードを LINEで読み取るとお手元の端末でお試し頂けます 4 LIFF版

5 LINEBOT版指名検索位置情報検索

アジェンダ • こんなのつくりました（済） • かんたんに自己紹介 • LIFFってなに？ • 全体構成 •
LIFFとLINEBOTの連携方法 • LIFFとLINEBOTを連携させる意義 • まとめ 6

かんたんに自己紹介・名前やぎぬ（Kohei Yaginuma）・経歴大手SIerでクラウドエンジニア⇒フリーWebエンジニア・最近興味があること個人サービス開発、 LINEミニアプリ、Go、Nuxt.js、マネジメント、もくもく会・趣味
海外旅行、水泳、ミュージカル鑑賞、ゲーム、なんか面白そうなこと、etc… 7

LIFFってなに？ 8

公式HPより引用 LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリをLIFFアプリと呼びます。 LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。公式HP：https://developers.line.biz/ja/docs/liff/overview/
9

つまり LINEと簡単に連携できてブラウザやLINE上で動作するアプリを作れるやつ 10

全体構成 11

12 LINE BOT ビジネスロジック LIFFアプリ or ユーザ API Nuxt Go
こんなかんじ

詳しくはQiitaで！ ▪GoとNuxtで飲食店検索ができるLINE BOTとLINEミニアプリ(LIFF)を作ってみた https://qiita.com/yagi_eng/items/8490f189d1be82c433e2 ⇒今回のLTはこちらの記事をベースにしています ▪Goとクリーンアーキテクチャで飲食店検索ができるLINE BOT作ってみた https://qiita.com/yagi_eng/items/983a7cd36b63a2f0ffac ⇒Goとクリーンアーキテクチャ厚めです ⇒デイリー5位にランクインしました！
13

LIFFとLINEBOTの連携方法 16

なにを連携したの？ユーザごとの飲食店のお気に入り情報にLIFFからもLINEBOTからもアクセスできるようにしました簡単に言えば、同じDBを使っているだけです 17 LINE BOT LIFFアプリ DB

どうやってユーザを判別するの？ 18 LINE BOT Aさん「おにやんま」をお気に入り登録 Aさん LIFFアプリお気に入り一覧みせて違うアプリだけど
どうやって共通的に Aさんからのリクエストだと判定するか？

今回の肝 LINEユーザ情報を活用するという、LIFFの機能を使いました LINEユーザは一意のユーザIDを持っていますこのIDはLIFFでもLINEBOTでも同じなので、このIDをもとにお気に入りの取得/追加/削除を実施するようにしました 19

LIFFとLINEBOTを連携させる意義 20

それぞれの長所 / 短所 LIFFとLINEBOTとでそれぞれ長所 / 短所があるので、それを互いに補える 21 長所短所 LIFF
HTML/JSの世界なので基本的になんでもできる LINEBOTに比べてフルスクラッチ的な開発が必要（実装するものによるが） LINEBOT 対話式でやり取りを進めることができるまとまった情報を表示することには不向き

ユーザとコミュニケーションが必要なところは LINEBOTで実装して、他はLIFFで実装すると良さそう個人的な意見 22

ヤマト運輸もやってる 23 ここに記載はありませんが、 LIFFも活用していましたヤマト運輸：http://www.kuronekoyamato.co.jp/ytc/campaign/renkei/LINE/

まとめ 24

可能性を感じた 25 LIFFとLINEBOTを連携させれば面白いものが作れそう興味を持った方はぜひチャレンジしてみてください！

おまけ 26

【再掲】詳しくはQiitaで！ ▪GoとNuxtで飲食店検索ができるLINE BOTとLINEミニアプリ(LIFF)を作ってみた https://qiita.com/yagi_eng/items/8490f189d1be82c433e2 ⇒今回のLTはこちらの記事をベースにしています ▪Goとクリーンアーキテクチャで飲食店検索ができるLINE BOT作ってみた https://qiita.com/yagi_eng/items/983a7cd36b63a2f0ffac ⇒Goとクリーンアーキテクチャ厚めです ⇒デイリー5位にランクインしました！
27

各アカウント・Twitter https://twitter.com/yagi_eng ・Qiita https://qiita.com/yagi_eng ・Wantedly https://www.wantedly.com/users/135658076 ・Instagram https://www.instagram.com/yaginu_travels_around/ だいだい
yagi_eng のアカウント名でやってます 28

LIFFとLINEBOTを連携させてつくる飲食店検索アプリ

LIFFとLINEBOTを連携させてつくる飲食店検索アプリ

yagi_eng

More Decks by yagi_eng

Other Decks in Programming

Featured

Transcript