2020/07/27 LT用資料 元記事のQiitaのURLはこちら↓ ■GoとNuxtで飲食店検索ができるLINE BOTとLINEミニアプリ(LIFF)を作ってみた https://qiita.com/yagi_eng/items/8490f189d1be82c433e2 ■Goとクリーンアーキテクチャで飲食店検索ができるLINE BOT作ってみた https://qiita.com/yagi_eng/items/983a7cd36b63a2f0ffac

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

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

3. こんなのつくりました
3

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

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

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

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

8. LIFFってなに？
8

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

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

11. 全体構成
11

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

13. 詳しくは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

14. LIFFとLINEBOTの連携方法
16

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

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

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

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

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

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

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

22. まとめ
24

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

24. おまけ
26

25. 【再掲】詳しくは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

26. 各アカウント
・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