LIFF通話をつくろう！

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の始め方
   ２つの選択肢がある
   ● 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