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.4k
LIFF通話をつくろう!
ufoo68
October 02, 2021
Tweet
Share
More Decks by ufoo68
See All by ufoo68
初めて開発リーダーをやってみた話
ufoo68
0
100
M5Stack用の指紋認証デバイスを試す
ufoo68
0
730
結婚式のクイズアプリを自作した話
ufoo68
0
600
M5Stack Core2とAlexaでインターフォンに自動で対応してくれるIoTデバイスを作りたかった話
ufoo68
0
660
KASHIKOIHAKO
ufoo68
0
560
KASHIKOIHAKO計画その4
ufoo68
0
290
AWS CDKで作るLINE bot
ufoo68
0
370
解説!LINE bot開発
ufoo68
0
290
Udonで始めるVR開発
ufoo68
0
430
Other Decks in Programming
See All in Programming
型で語るカタ
irof
0
750
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
350
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
CDK引数設計道場100本ノック
badmintoncryer
2
520
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
300
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
180
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
180
What's new in AppKit on macOS 26
1024jp
0
160
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Adaptive Systems
keathley
43
2.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Embracing the Ebb and Flow
colly
86
4.8k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Building Applications with DynamoDB
mza
95
6.5k
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通話の時代