Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LIFF通話をつくろう!
Search
ufoo68
October 02, 2021
Programming
0
1.5k
LIFF通話をつくろう!
ufoo68
October 02, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
今更ながら、開発現場での生成AI活用について
ufoo68
0
34
28歳独身エンジニア 婚活してみた
ufoo68
0
3
OpenAIでクッキー型を作る
ufoo68
1
40
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
770
結婚式のクイズアプリを自作した話
ufoo68
0
630
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
680
KASHIKOIHAKO
ufoo68
0
580
KASHIKOIHAKO計画その4
ufoo68
0
300
Other Decks in Programming
See All in Programming
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
品質ワークショップをやってみた
nealle
0
640
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.4k
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Introduce Hono CLI
yusukebe
6
3.1k
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
CSC509 Lecture 06
javiergs
PRO
0
270
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A Tale of Four Properties
chriscoyier
161
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Building a Scalable Design System with Sketch
lauravandoore
463
33k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
The Language of Interfaces
destraynor
162
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
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の始め方 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 Callee liff.shareTargetPicker([ { type: ‘text’, text:
`https://xxx?id=${myid}` } ])
ライブデモ
QR再掲
さいごに
今回のまとめ • LIFFとはLINEプラットフォームを活用したウェブアプリを開発させるためのフレーム ワーク • LIFFを使うことでLINEボットだけでは実現できなかったリッチなUIの実現が可能に なった • LIFF、Skyway、Vercelなど既存のライブラリやサービスを組み合わせることで簡単 に多様な機能が実現できる
• LINE通話はもう古い!これからはLIFF通話の時代