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
970
LIFF通話をつくろう!
ufoo68
October 02, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
26
M5Stack用の指紋認証デバイスを試す
ufoo68
0
360
結婚式のクイズアプリを自作した話
ufoo68
0
370
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
490
KASHIKOIHAKO
ufoo68
0
400
KASHIKOIHAKO計画その4
ufoo68
0
220
AWS CDKで作るLINE bot
ufoo68
0
310
解説!LINE bot開発
ufoo68
0
210
Udonで始めるVR開発
ufoo68
0
360
Other Decks in Programming
See All in Programming
Amazon Aurora Serverless v2が意外と高かった話と、AWS Database Migration Serviceの話
satoshi256kbyte
1
110
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
4.5k
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
630
Sheets API使ってみた
toshi0383
2
180
Productivity is Messing Around and Having Fun
hollycummins
1
180
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
酒飲んでたらテックリードになった話
spbaya0141
0
210
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
740
Documentation testsの恩恵 / Documentation testing benefits
ssssota
1
560
RubyGems on ruby.wasm
kateinoigakukun
0
120
Featured
See All Featured
RailsConf 2023
tenderlove
9
580
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
Docker and Python
trallard
35
2.7k
A better future with KSS
kneath
231
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Navigating Team Friction
lara
179
13k
What the flash - Photography Introduction
edds
64
11k
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通話の時代