Slide 1

Slide 1 text

これまでのサービスに新しい価値を! LINEから始める新たなUI/UX Koki Miura(@k_miura_io)

Slide 2

Slide 2 text

自己紹介 • 三浦 耕生(こうき) • 名古屋のゲーム会社 のサーバーエンジニア @k_miura_io koki.miura05

Slide 3

Slide 3 text

アジェンダ • LINE botとは • Messaging APIについて • LINE botでのUI・UX • デモ • まとめ

Slide 4

Slide 4 text

LINE botについて • LINE上でメッセージ のやり取りを行う bot • 自前でサーバーを 用意してAPIを使っ て開発

Slide 5

Slide 5 text

LINE bot = Chatbot LINE bot = LINE bot

Slide 6

Slide 6 text

LINE bot = LINE bot? • チャットボットでは実現できないことができる • ビーコン、Webアプリとの連携など • コミュニケーションベースのアプリを作れる

Slide 7

Slide 7 text

LINE botでできること(Beacon) • LINE Beaconを使って施設の混み具合 を可視化するシステム • LIFFやリッチメニューも盛り込まれている https://prtimes.jp/main/html/rd/p/000000039.000023122.html?fbclid=IwAR0 A_aG5lA2JKNscJl3zadn_Tt1oMRQ8M8a5rsvV8gfC7lpnGwS4iJXJ7Ic

Slide 8

Slide 8 text

LINE botでできること(コロナ対策) • コロナウィルスの症状を確認して一人一人に 合わせたサポートを行う • botとの会話&LIFFでのアンケートでユーザー の症状を把握している • 東京、愛知、福岡など各都道府県で提供され ている https://www.pref.aichi.jp/site/covid19-aichi/line-1.html

Slide 9

Slide 9 text

Liny • LINE公式アカウントを運用するためのツール • 顧客情報の取得、分析などを行うことでLINEの配信効果を高める • 顧客を引きつけるbotのUIを作ってくれる https://line-sm.com/index.html

Slide 10

Slide 10 text

業者に頼まないとでき ないのか…

Slide 11

Slide 11 text

業者に頼まないとでき ないのか…

Slide 12

Slide 12 text

Messaging API • LINE botを動かすために使うAPI • 基本的に無料 • 各言語に対応したSDKが提供されている いいLINE bot Messaging API を使いこなす

Slide 13

Slide 13 text

- 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

Slide 14

Slide 14 text

Image Map • 画像の中に領域を指定してアクションを割り 振ることができる • サイトへのアクセス、メッセージ送信など • 割り振りはJSONで行う

Slide 15

Slide 15 text

Template Message • JSON形式のテンプレートで簡単にUI入りの メッセージを作成できる • 簡単にリッチなメッセージを入れたいときに 便利 • スマホ版のLINEアプリにしか対応していない

Slide 16

Slide 16 text

Flex Message • CSS Flexible Box Layoutを利用したメッセージ • Template Messageよりも自由度の高いUIを 作れる • PC版のLINEでも見れる • レイアウトには多少のHTMLの知識が必要

Slide 17

Slide 17 text

- 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

Slide 18

Slide 18 text

リッチメニュー • トーク画面の下に表示させることのできるメニュー画面 • LINE公式アカウントマネジャーでもMessaging APIで も設定できる • Messaging APIなら細かい設定ができるがAPIで行う ので、知識が必要

Slide 19

Slide 19 text

Messaging APIを使うと • 表示、非表示の操作はAPIで行う • チャットのやり取りの中でユーザごとにメニューを切り替える機能を実 装することもできる

Slide 20

Slide 20 text

UI作るのつらそう…

Slide 21

Slide 21 text

Bot Designer • Flex messageやリッチメニューのレイアウトをGUIでカスタムができる • できたJSONがAPIのリクエストに使える • botの見栄えを確認できるので、botのUI作成のマストアイテム https://developers.line.biz/ja/services/bot-designer/

Slide 22

Slide 22 text

ユーザー情報を取得 • Messaging APIを使うとユーザーIDや表示名は取れるが、それ以外 は工夫していく必要がある • LIFFでフォームを用意して、ユーザーIDに紐付けた情報を取得すると スマート • 詳しくは https://speakerdeck.com/miura55/liffdeline- botworitutinisuru

Slide 23

Slide 23 text

デモ • IBMのグローバルコンテスト「Call for Code」で作成したサービス 「blooming」 • ボランティアとボランティアを必要としている人たちをマッチングさせる • 近日実証実験 https://callforcode.org/

Slide 24

Slide 24 text

Before(作品提出時) https://youtu.be/uvUb-sqB35Y

Slide 25

Slide 25 text

実証実験への課題 • 開発の工数が少ない(というか僕一人) • フルスタックで開発するのはツライ(フロントエンドニガテ) • 運用コストがよくわからん(エンジニア経験0)

Slide 26

Slide 26 text

LINEだ‼

Slide 27

Slide 27 text

なぜLINE? • 開発の工数が少ない →一人でも十分に開発できる • フルスタックで開発するのはツライ →サーバーサイドの実装だけなので問題なし • 運用コストがよくわからん →サーバーレスにしてローコスト

Slide 28

Slide 28 text

デモ

Slide 29

Slide 29 text

まとめ • Messaging APIを使いこなすことでLINE botがただのチャットボットに ならない • 基礎的なUIの知識だけでオリジナリティのあるLINE botができる • LIFFを入れるとbotだけでできないこともできて◎ LINE bot = LINE bot

Slide 30

Slide 30 text

END