これまでのサービスに新しい価値を！LINEからはじめる新たなUI/UX

2020/11/14「LPF REV UP 2020」
https://revup.jp/speakers/lokvy19lk

デモの動画はこちら
https://youtu.be/-kztJoaPLFM

Transcript

1. これまでのサービスに新しい価値を！ LINEから始める新たなUI/UX Koki Miura(@k_miura_io)
2. 自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア @k_miura_io koki.miura05
3. アジェンダ • LINE botとは • Messaging APIについて • LINE botでのUI・UX • デモ • まとめ
4. LINE botについて • LINE上でメッセージ のやり取りを行う bot • 自前でサーバーを 用意してAPIを使っ て開発
5. LINE bot = Chatbot LINE bot = LINE bot
6. LINE bot = LINE bot? • チャットボットでは実現できないことができる • ビーコン、Webアプリとの連携など • コミュニケーションベースのアプリを作れる
7. LINE botでできること(Beacon) • LINE Beaconを使って施設の混み具合 を可視化するシステム • LIFFやリッチメニューも盛り込まれている https://prtimes.jp/main/html/rd/p/000000039.000023122.html?fbclid=IwAR0 A_aG5lA2JKNscJl3zadn_Tt1oMRQ8M8a5rsvV8gfC7lpnGwS4iJXJ7Ic
8. LINE botでできること（コロナ対策） • コロナウィルスの症状を確認して一人一人に 合わせたサポートを行う • botとの会話＆LIFFでのアンケートでユーザー の症状を把握している • 東京、愛知、福岡など各都道府県で提供され ている https://www.pref.aichi.jp/site/covid19-aichi/line-1.html
9. Liny • LINE公式アカウントを運用するためのツール • 顧客情報の取得、分析などを行うことでLINEの配信効果を高める • 顧客を引きつけるbotのUIを作ってくれる https://line-sm.com/index.html
10. 業者に頼まないとでき ないのか…
11. 業者に頼まないとでき ないのか…
12. Messaging API • LINE botを動かすために使うAPI • 基本的に無料 • 各言語に対応したSDKが提供されている いいLINE bot Messaging API を使いこなす
13. - Message(text, image, video, file, location, sticker) - Follow / Unfollow - Join / Leave(botのグループ 参加、退出) - Member Joined / Member Left(ユーザーのグループ参加、 退出) - Post Back - Beacon - Video Play Complete(動画 視聴完了) - Unsend(送信取り消し) - Text - Sticker - Image - Video - Audio - Location - Image Map - Template - Flex Messaging APIのカテゴリ(受信・送信) Webhook Reply Send
14. Image Map • 画像の中に領域を指定してアクションを割り 振ることができる • サイトへのアクセス、メッセージ送信など • 割り振りはJSONで行う
15. Template Message • JSON形式のテンプレートで簡単にUI入りの メッセージを作成できる • 簡単にリッチなメッセージを入れたいときに 便利 • スマホ版のLINEアプリにしか対応していない
16. Flex Message • CSS Flexible Box Layoutを利用したメッセージ • Template Messageよりも自由度の高いUIを 作れる • PC版のLINEでも見れる • レイアウトには多少のHTMLの知識が必要
17. - Create / Delete - Set Image - Set Default - Delete Default - Link Rich Menu to User - Unlink Rich Menu - Download Image - Get List - Get Rich Menu - Get Profile - Group Summary - Get Group Member Profile - Group Member Count Messaging APIのカテゴリ(UI・UX) Rich Menu User Group
18. リッチメニュー • トーク画面の下に表示させることのできるメニュー画面 • LINE公式アカウントマネジャーでもMessaging APIで も設定できる • Messaging APIなら細かい設定ができるがAPIで行う ので、知識が必要
19. Messaging APIを使うと • 表示、非表示の操作はAPIで行う • チャットのやり取りの中でユーザごとにメニューを切り替える機能を実 装することもできる
20. UI作るのつらそう…
21. Bot Designer • Flex messageやリッチメニューのレイアウトをGUIでカスタムができる • できたJSONがAPIのリクエストに使える • botの見栄えを確認できるので、botのUI作成のマストアイテム https://developers.line.biz/ja/services/bot-designer/
22. ユーザー情報を取得 • Messaging APIを使うとユーザーIDや表示名は取れるが、それ以外 は工夫していく必要がある • LIFFでフォームを用意して、ユーザーIDに紐付けた情報を取得すると スマート • 詳しくは https://speakerdeck.com/miura55/liffdeline- botworitutinisuru
23. デモ • IBMのグローバルコンテスト「Call for Code」で作成したサービス 「blooming」 • ボランティアとボランティアを必要としている人たちをマッチングさせる • 近日実証実験 https://callforcode.org/
24. Before(作品提出時) https://youtu.be/uvUb-sqB35Y
25. 実証実験への課題 • 開発の工数が少ない（というか僕一人） • フルスタックで開発するのはツライ（ﾌﾛﾝﾄｴﾝﾄﾞﾆｶﾞﾃ） • 運用コストがよくわからん（エンジニア経験0）
26. LINEだ‼
27. なぜLINE？ • 開発の工数が少ない →一人でも十分に開発できる • フルスタックで開発するのはツライ →サーバーサイドの実装だけなので問題なし • 運用コストがよくわからん →サーバーレスにしてローコスト
28. デモ
29. まとめ • Messaging APIを使いこなすことでLINE botがただのチャットボットに ならない • 基礎的なUIの知識だけでオリジナリティのあるLINE botができる • LIFFを入れるとbotだけでできないこともできて◎ LINE bot = LINE bot
30. END