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

LIFF通話をつくろう!

ufoo68
October 02, 2021

 LIFF通話をつくろう!

ufoo68

October 02, 2021
Tweet

More Decks by ufoo68

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    ● 本名
    ○ 松永勇太
    ● Twitterでの名前
    ○ ufoo68(@ufoo_yuta)
    ● 好きなこと
    ○ シンプルなものづくり

    View Slide

  3. LIFFとはなにか

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. 今回の本題

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. 使用技術
    ● UI機能
    ○ LIFF
    ○ React
    ● 通話機能
    ○ Skyway
    ● アプリ配信
    ○ Vercel

    View Slide

  19. ReactでLIFF開発をする
    @line/liffを使うと快適!!
    https://www.npmjs.com/package/@line/liff

    View Slide

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

    View Slide

  21. 各機能の実装方法

    View Slide

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

    View Slide

  23. 通話の実装
    SkyWayというSDKを用いてP2P(Peer to Peer)の通信をする
    Peer Peer
    ● Peer ID
    ● メディアストリーム

    View Slide

  24. 通信のやりとり
    1. 通信をかけたい側(Caller)がPeer IDを生成
    2. Peer IDをクエリストリング用いて通信をかけられる側(Callee)にURLを共有
    3. CalleeはURLを開いて共有されたPeer IDとコネクションを行って、メディアストリー
    ム(カメラ映像と音声)を送信する
    4. Callerはメディアストリームを受け取ったらCalleeに自分のメディアストリームを送り
    返す
    URL?id={Peer ID}

    View Slide

  25. Peer IDの共有方法
    LIFFのShareTargetPicker機能を用いてLINEの友達に送信する
    Caller Callee
    liff.shareTargetPicker([
    {
    type: ‘text’,
    text: `https://xxx?id=${myid}`
    }
    ])

    View Slide

  26. ライブデモ

    View Slide

  27. QR再掲

    View Slide

  28. さいごに

    View Slide

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

    View Slide