LIFF通話をつくろう！

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

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

LIFFとはなにか

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

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

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

LIFFの始め方２つの選択肢がある • 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 Callee liﬀ.shareTargetPicker([ { type: ‘text’, text:
`https://xxx?id=${myid}` } ])

ライブデモ

QR再掲

さいごに

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

LIFF通話をつくろう！

LIFF通話をつくろう！

ufoo68

More Decks by ufoo68

Other Decks in Programming

Featured

Transcript