LIFF通話をつくろう！

by ufoo68

Slide 1

Slide 1 text

LIFF通話をつくろう！ LINE通話の垣根を超えた通話アプリを考えた

Slide 2

Slide 2 text

自己紹介 ● 本名 ○ 松永勇太 ● Twitterでの名前 ○ ufoo68（@ufoo_yuta） ● 好きなこと ○ シンプルなものづくり

Slide 3

Slide 3 text

LIFFとはなにか

Slide 4

Slide 4 text

LINE製、フロントエンド開発プラットフォーム https://developers.line.biz LINE Frontend Framework、略してLIFF。LINEプラットフォームを用いた通常のウェブアプリとは違ったアプリの開発が実現できる。例えばLINEユーザーを使ったログイン、ユーザー情報の取得、特定のユーザーへのメッセージ送信などの機能の実装など ...

Slide 5

Slide 5 text

事例：ボイスアップラボ https://playroom.voiceapp-lab.com/

Slide 6

Slide 6 text

事例：タッチアンドゴーコーヒー https://note.com/misuzu_neccos/n/nbae92b0e5b9a

Slide 7

Slide 7 text

LIFFの始め方２つの選択肢がある ● LINEログイン ○ 手軽に試したい場合はこっち ● LINEミニアプリ ○ LINEへのエントリーが必要

Slide 8

Slide 8 text

ミニアプリとは LINEアプリ上で動くアプリのこと。できることは基本LIFFと同じ。 https://developers.line.biz/ja/docs/line-mini-app/discover/introduction/

Slide 9

Slide 9 text

今回はLINEログインでチャネル作成

Slide 10

Slide 10 text

チャネル設定でLIFFを追加

Slide 11

Slide 11 text

発行されるLIFF IDを使用

Slide 12

Slide 12 text

ちなみに、V1は使わないようにしよう

Slide 13

Slide 13 text

今回の本題

Slide 14

Slide 14 text

つくりたいもの：LIFF通話 LINEメッセージを介した通話アプリ通話アプリのリンク DEMO

Slide 15

Slide 15 text

使い方（ざっくり）通話をかける人

Slide 16

Slide 16 text

使い方（ざっくり）通話をかけられる人

Slide 17

Slide 17 text

LINE通話との違い ● LINEアプリの通話機能ではなくブラウザの通話機能（WebRTC）を使った通話アプリであること ● LINEアプリを立ち上げずに通話が可能である ● LINEアプリを持っていない人とも通話ができる「普通にLINE通話でええやん」とか野暮なことはいわないこと

Slide 18

Slide 18 text

使用技術 ● UI機能 ○ LIFF ○ React ● 通話機能 ○ Skyway ● アプリ配信 ○ Vercel

Slide 19

Slide 19 text

ReactでLIFF開発をする @line/liffを使うと快適！！ https://www.npmjs.com/package/@line/liff

Slide 20

Slide 20 text

アプリ配信はVercelで簡単に！ GitHubと連携してデプロイ設定が簡単に実現可能「GitHubにソースコードをPush後に、Vercelでデプロイ＋アプリ配信」ができる連携設定を Vercelにアカウント連携するだけで自動構築してくれる！

Slide 21

Slide 21 text

各機能の実装方法

Slide 22

Slide 22 text

LINEへのメッセージ送信 shareTargetPicker()を使う https://engineering.linecorp.com/ja/blog/liff-share-target-picker/ グループまたは友だちを選択する画面で選択した相手に特定のメッセージを送信させることができる機能。今回はLIFF通話のリンクを送るために使用。

Slide 23

Slide 23 text

通話の実装 SkyWayというSDKを用いてP2P（Peer to Peer）の通信をする Peer Peer ● Peer ID ● メディアストリーム

Slide 24

Slide 24 text

通信のやりとり 1. 通信をかけたい側（Caller）がPeer IDを生成 2. Peer IDをクエリストリング用いて通信をかけられる側（Callee）にURLを共有 3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリーム（カメラ映像と音声）を送信する 4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り返す URL?id={Peer ID}

Slide 25

Slide 25 text

Peer IDの共有方法 LIFFのShareTargetPicker機能を用いてLINEの友達に送信する Caller Callee liﬀ.shareTargetPicker([ { type: ‘text’, text: `https://xxx?id=${myid}` } ])

Slide 26

Slide 26 text

ライブデモ

Slide 27

Slide 27 text

QR再掲

Slide 28

Slide 28 text

さいごに

Slide 29

Slide 29 text

今回のまとめ ● LIFFとはLINEプラットフォームを活用したウェブアプリを開発させるためのフレームワーク ● LIFFを使うことでLINEボットだけでは実現できなかったリッチなUIの実現が可能になった ● LIFF、Skyway、Vercelなど既存のライブラリやサービスを組み合わせることで簡単に多様な機能が実現できる ● LINE通話はもう古い！これからはLIFF通話の時代