はじめに

この記事は弊社のAdvent Calender 2019の１日目の記事です。今年のAdvent Calenderの旗振り役は私、@ufoo68が担当します！
たまには弊社に即した内容を書いてみようかなとか思うのですが、この前参加してきたLINE DEVELOPER DAYでLIFF V2関係の記事を書いてみたかったので、またまたLINE記事を書くことにしました。

LIFF v2で新しくなったこと

新機能についての詳しい資料は公式のものがあるのでそちらをメインに見てください。新機能としては以下のものが紹介されました。

scanQR
- QRコードリーダー
login/logout
- isLoggedinを使ってログイン状態を取得できる
shareTargetPicker
- 特定のユーザーにメッセージが送れる機能

あとは、詳細には触れませんでしたがこんなものも追加されたようです。

getFriendship
getDecodedIDToken
getLanguage
isInClient

とはいえ、まだ公開されてないAPIもあったり、用途が不明のものがあったりするみたいですね。今回は太字で書いたloginとQRコードを試してみました。他のAPIの詳しい情報はここにあります。
このAPI思ったより簡単だったのでこのあとの内容のボリュームがかなり少なくなってます。。。

実装してみた

やってみたことは以下です。

ログインボタンをつくる
LINEログインしたときだけQRスキャンを起動できる

Reactでの環境構築については過去の記事を参照してください。
実装したコードは以下です。

App.tsx

import React, { FC, useState, useEffect } from 'react';
import Button from '@material-ui/core/Button';
import './App.scss';

const liff = window.liff

const App: FC = () => {
  const [value, setValue] = useState<string>('')
  const [isLogin, setIsLogin] = useState<boolean>(false)

  useEffect(() => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      setIsLogin(liff.isLoggedIn())
    })
  }, [])

  const login = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      liff.login()
      setIsLogin(liff.isLoggedIn())
    })
  }

  const openQR = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      try {
        liff.scanCode()
          .then(result => setValue(result.value!))
          .catch(() => alert('cannot read QR'))
      } catch {
        alert('cannot open QR camera')
      }
    })
  }

  return (
    <div className="App">
      <div className="qrValue">{value}</div>
      <div className="loginButton">
        <Button variant="contained" color="primary" onClick={() => login()} disabled={isLogin}>
          Login
        </Button>
      </div>
      <div className="qrButton">
        <Button variant="contained" color="secondary" onClick={() => openQR()} disabled={!isLogin}>
          Open QR camera
      </Button>
      </div>
    </div>
  );
}

export default App;

ソースコードはここで公開してます。

結果

どうも失敗に終わりました。。実装は悪くはなかったのですが、LIFF URL（line://appで始まるURL）はそもそも最初からログインした状態だったので、ログインボタンが何も意味をなさないという自体に。
また、このLIFF V2からは外部ブラウザからLIFFアプリを開くことができるようになったのですが、このQRコードスキャンのような特殊なAPIは使えないみたいなので、LINEログインは機能してもQRカメラが起動しないということに。
ちなみにURLは以下のような感じにすると、LINEがある人にはLINEアプリで、持ってない人は適当なブラウザが立ち上がるようになるみたいです。

https://liff.line.me/{liffid}

この{liffid}にline://app/以下で書かれてるやつを入れます。

そして読み取り結果ですが、以下のようなQRを読んでみて（内容は"test"と書かれたstring）

こんな感じでの表示結果となりました。

一応うまく読み取れました。しかしこのscanQRなのですが、liff-typeの定義にまちがいがあったので自分で直しました。~~一応作者さんにPRを出しましたが、まだ反映されてない場合はこっちの方でyarn addしてみてください。~~←マージされたようです。

yarn add -D https://github.com/ufoo68/liff-type.git

さいごに

実はこのLIFFですが、どうやら今後はLINEログインチャネルのみをサポートして、MessagingAPIでのサポートをしなくしようとしている（すぐにではないが）ようです。ここに「今後はMessagingAPIにLIFFを追加しないでくれ」みたいなことが書いてあります。
これについてこの前のLINE DEVELOPER DAYでも議論したのですが、どうやら今後はこのLIFFをLINE botのサブアプリ的な立ち位置から、LINEログイン機能などをサポートした１つのウェブアプリケーションへと独立させようと思っているようですね（憶測かもしれませんが）。
また、今回はliff-typeという非公式のnpmパッケージを使って開発しましたが、LINE公式でもLIFFのType用のnpmパッケージをそのうち公開してくれるみたいです。今後は公式の方もTypeScriptでの開発をサポートしてくれるようなのでかなり期待しております。

とまあ、完全にACCESSと関係ないLINE APIの記事になってしまいましたが、このAdvent Calenderの記事投稿のハードルを下げられたという意味では旗振り役としての役割を果たせたのではないかと思うので良しとしましょうw
ということで１日目の投稿はこんな感じで締めようと思います。次は@irisTa56さんの投稿です。お楽しみに！

ReactでLIFF v2の機能を試してみる

はじめに

LIFF v2で新しくなったこと

実装してみた

結果

さいごに