Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF通話をつくろう!

Cb88f765dd38cd942c39aacb5abbea06?s=47 ufoo68
October 02, 2021

 LIFF通話をつくろう!

Cb88f765dd38cd942c39aacb5abbea06?s=128

ufoo68

October 02, 2021
Tweet

Transcript

  1. LIFF通話をつくろう! LINE通話の垣根を超えた通話アプリを考えた

  2. 自己紹介 • 本名 ◦ 松永勇太 • Twitterでの名前 ◦ ufoo68(@ufoo_yuta) •

    好きなこと ◦ シンプルなものづくり
  3. LIFFとはなにか

  4. LINE製、フロントエンド開発プラットフォーム https://developers.line.biz LINE Frontend Framework、略してLIFF。LINEプラットフォー ムを用いた通常のウェブアプリとは違ったアプリの開発が実現 できる。 例えばLINEユーザーを使ったログイン、ユーザー情報の取得、 特定のユーザーへのメッセージ送信などの機能の実装など ...

  5. 事例:ボイスアップラボ https://playroom.voiceapp-lab.com/

  6. 事例:タッチアンドゴーコーヒー https://note.com/misuzu_neccos/n/nbae92b0e5b9a

  7. LIFFの始め方 2つの選択肢がある • LINEログイン ◦ 手軽に試したい場合はこっち • LINEミニアプリ ◦ LINEへのエントリーが必要

  8. ミニアプリとは LINEアプリ上で動くアプリのこと。できることは基本LIFFと同じ。 https://developers.line.biz/ja/docs/line-mini-app/discover/introduction/

  9. 今回はLINEログインでチャネル作成

  10. チャネル設定でLIFFを追加

  11. 発行されるLIFF IDを使用

  12. ちなみに、V1は使わないようにしよう

  13. 今回の本題

  14. つくりたいもの:LIFF通話 LINEメッセージを介した通話アプリ 通話アプリのリンク DEMO

  15. 使い方(ざっくり) 通話をかける人

  16. 使い方(ざっくり) 通話をかけられる人

  17. LINE通話との違い • LINEアプリの通話機能ではなくブラウザの通話機能 (WebRTC)を使った通話アプリであること • LINEアプリを立ち上げずに通話が可能である • LINEアプリを持っていない人とも通話ができる 「普通にLINE通話でええやん」とか野暮なことはいわないこと

  18. 使用技術 • UI機能 ◦ LIFF ◦ React • 通話機能 ◦

    Skyway • アプリ配信 ◦ Vercel
  19. ReactでLIFF開発をする @line/liffを使うと快適!! https://www.npmjs.com/package/@line/liff

  20. アプリ配信はVercelで簡単に! GitHubと連携してデプロイ設定が簡単に実現可能 「GitHubにソースコードをPush後に、Vercelで デプロイ+アプリ配信」ができる連携設定を Vercelにアカウント連携するだけで自動構築し てくれる!

  21. 各機能の実装方法

  22. LINEへのメッセージ送信 shareTargetPicker()を使う https://engineering.linecorp.com/ja/blog/liff-share-target-picker/ グループまたは友だちを選択する画面で選択した相手に特 定のメッセージを送信させることができる機能。 今回はLIFF通話のリンクを送るために使用。

  23. 通話の実装 SkyWayというSDKを用いてP2P(Peer to Peer)の通信をする Peer Peer • Peer ID •

    メディアストリーム
  24. 通信のやりとり 1. 通信をかけたい側(Caller)がPeer IDを生成 2. Peer IDをクエリストリング用いて通信をかけられる側(Callee)にURLを共有 3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリー

    ム(カメラ映像と音声)を送信する 4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り 返す URL?id={Peer ID}
  25. Peer IDの共有方法 LIFFのShareTargetPicker機能を用いてLINEの友達に送信する Caller Callee liff.shareTargetPicker([ { type: ‘text’, text:

    `https://xxx?id=${myid}` } ])
  26. ライブデモ

  27. QR再掲

  28. さいごに

  29. 今回のまとめ • LIFFとはLINEプラットフォームを活用したウェブアプリを開発させるためのフレーム ワーク • LIFFを使うことでLINEボットだけでは実現できなかったリッチなUIの実現が可能に なった • LIFF、Skyway、Vercelなど既存のライブラリやサービスを組み合わせることで簡単 に多様な機能が実現できる

    • LINE通話はもう古い!これからはLIFF通話の時代