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
720
結婚式のクイズアプリを自作した話
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
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
350
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.9k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Automating Front-end Workflow
addyosmani
1370
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Applications with DynamoDB
mza
95
6.5k
Adopting Sorbet at Scale
ufuk
77
9.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通話の時代