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
OpenAIでクッキー型を作る
ufoo68
1
36
初めて開発リーダーをやってみた話
ufoo68
0
110
M5Stack用の指紋認証デバイスを試す
ufoo68
0
760
結婚式のクイズアプリを自作した話
ufoo68
0
620
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
670
KASHIKOIHAKO
ufoo68
0
570
KASHIKOIHAKO計画その4
ufoo68
0
300
AWS CDKで作るLINE bot
ufoo68
0
380
解説!LINE bot開発
ufoo68
0
300
Other Decks in Programming
See All in Programming
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
2
600
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
150
CSC509 Lecture 06
javiergs
PRO
0
240
CSC509 Lecture 05
javiergs
PRO
0
290
XP, Testing and ninja testing ZOZ5
m_seki
2
280
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
950
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
230
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
Serena MCPのすすめ
wadakatu
4
900
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Become a Pro
speakerdeck
PRO
29
5.5k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Unsuck your backbone
ammeep
671
58k
BBQ
matthewcrist
89
9.8k
The Invisible Side of Design
smashingmag
301
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How GitHub (no longer) Works
holman
315
140k
GitHub's CSS Performance
jonrohan
1032
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
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通話の時代