LIFF通話をつくろう!LINE通話の垣根を超えた通話アプリを考えた
View Slide
自己紹介● 本名○ 松永勇太● Twitterでの名前○ ufoo68(@ufoo_yuta)● 好きなこと○ シンプルなものづくり
LIFFとはなにか
LINE製、フロントエンド開発プラットフォームhttps://developers.line.bizLINE Frontend Framework、略してLIFF。LINEプラットフォームを用いた通常のウェブアプリとは違ったアプリの開発が実現できる。例えばLINEユーザーを使ったログイン、ユーザー情報の取得、特定のユーザーへのメッセージ送信などの機能の実装など ...
事例:ボイスアップラボhttps://playroom.voiceapp-lab.com/
事例:タッチアンドゴーコーヒーhttps://note.com/misuzu_neccos/n/nbae92b0e5b9a
LIFFの始め方2つの選択肢がある● LINEログイン○ 手軽に試したい場合はこっち● LINEミニアプリ○ LINEへのエントリーが必要
ミニアプリとはLINEアプリ上で動くアプリのこと。できることは基本LIFFと同じ。https://developers.line.biz/ja/docs/line-mini-app/discover/introduction/
今回はLINEログインでチャネル作成
チャネル設定でLIFFを追加
発行されるLIFF IDを使用
ちなみに、V1は使わないようにしよう
今回の本題
つくりたいもの:LIFF通話LINEメッセージを介した通話アプリ通話アプリのリンクDEMO
使い方(ざっくり)通話をかける人
使い方(ざっくり)通話をかけられる人
LINE通話との違い● LINEアプリの通話機能ではなくブラウザの通話機能(WebRTC)を使った通話アプリであること● LINEアプリを立ち上げずに通話が可能である● LINEアプリを持っていない人とも通話ができる「普通にLINE通話でええやん」とか野暮なことはいわないこと
使用技術● UI機能○ LIFF○ React● 通話機能○ Skyway● アプリ配信○ Vercel
ReactでLIFF開発をする@line/liffを使うと快適!!https://www.npmjs.com/package/@line/liff
アプリ配信はVercelで簡単に!GitHubと連携してデプロイ設定が簡単に実現可能「GitHubにソースコードをPush後に、Vercelでデプロイ+アプリ配信」ができる連携設定をVercelにアカウント連携するだけで自動構築してくれる!
各機能の実装方法
LINEへのメッセージ送信shareTargetPicker()を使うhttps://engineering.linecorp.com/ja/blog/liff-share-target-picker/グループまたは友だちを選択する画面で選択した相手に特定のメッセージを送信させることができる機能。今回はLIFF通話のリンクを送るために使用。
通話の実装SkyWayというSDKを用いてP2P(Peer to Peer)の通信をするPeer Peer● Peer ID● メディアストリーム
通信のやりとり1. 通信をかけたい側(Caller)がPeer IDを生成2. Peer IDをクエリストリング用いて通信をかけられる側(Callee)にURLを共有3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリーム(カメラ映像と音声)を送信する4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り返すURL?id={Peer ID}
Peer IDの共有方法LIFFのShareTargetPicker機能を用いてLINEの友達に送信するCaller Calleeliff.shareTargetPicker([{type: ‘text’,text: `https://xxx?id=${myid}`}])
ライブデモ
QR再掲
さいごに
今回のまとめ● LIFFとはLINEプラットフォームを活用したウェブアプリを開発させるためのフレームワーク● LIFFを使うことでLINEボットだけでは実現できなかったリッチなUIの実現が可能になった● LIFF、Skyway、Vercelなど既存のライブラリやサービスを組み合わせることで簡単に多様な機能が実現できる● LINE通話はもう古い!これからはLIFF通話の時代