はじめに

LIFF v2が新しく発表されたりしたわけですが、これをReactとTypeScriptでできないかと色々と試してみたのでそれを記事にしてみました。今回は導入方法に重点を置いたので、v2の機能は試さずにSendMessageができるかどうかをやってみました。
つくったコードはこちらに置いてます。

まずはテンプレート作成

こちらを参考にcreate-react-appをしました。まずはプロジェクトを作成します。

yarn create react-app react-liff --typescript

次にTypeScriptやら諸々を入れます

yarn add typescript @types/node @types/react @types/react-dom @types/jest

liff-typeを入れる

このliff-typeを入れることで、TypeScriptでもエラーを吐くことなくLIFFのライブラリをコンパイルすることができます。まずはyarn addします。

yarn add -D liff-type

そして次に.tsconfigに以下のものを足します。

{
    "compilerOptions": {
        "types": ["liff-type"]
    }
}

これで、window.liffと入力してもエラー表示しなくなり、LIFFの予測変換が使えます。

あとは、HTMLファイルの中に以下のタグも入れるのを忘れずに。

<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>

SendMessageをしてみる

まずは、line-message-builderを入れます。

yarn add line-message-builder

また、v2ではliff.init()のときにLIFF-IDが必要みたいです。今回は.envで環境変数を作ります。どうやらcreate-react-appはdotenvなしで環境変数が呼びだせるみたいです。条件として、先頭にREACT_APPをつける必要があります。以下のような感じで.envファイルをつくって、プロジェクトのルートディレクトリ直下に置きます。

.env

REACT_APP_LIFF_ID="LIFF-ID"

そして、App.tsxを以下のように書き換えます。

import React from 'react'
import './App.css'
import { buildReplyText } from 'line-message-builder'

const App: React.FC = () => {
  const sendMessage = () => {
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID as string }).then(() => {
      if (!liff.isLoggedIn()) {
        liff.login({})
      }
      liff.sendMessages(buildReplyText(['Send Message']))
    })
  }
  return (
    <div className="App">
      <button className="button" onClick={sendMessage}>
        Send Message
      </button>
    </div>
  )
}

export default App

公開する

LIFFでウェブページを取り込むには、何かしらの方法で公開してURL化をする必要があります。今回はこの方法を使ってGitHub Pagesで公開しようと思います。

準備としてcreate-react-appでのプロジェクト名と同じ名前のGitHubレポジトリを作成して、remoteで接続できる形にします。また、package.jsonに以下の要素を足します。

{
    "homepage":"https://yourusername.github.io/repository-name"
}

homepageのURLは自分のつくったレポジトリのGitHub PagesのURLに合わせます。次にgh-pagesをインストールします。

yarn add gh-pages

インストールできたらpackage.jsonのscriptsに以下のものを足します。

{
    "scripts":{
        "predeploy": "yarn build",
        "deploy": "gh-pages -d build",
    }
}

あとはそのまま以下のコマンドでデプロイします。

yarn deploy

あとは、LIFFの設定ページで公開したURLを紐付ければ完了です。

デモ

こんな感じで「Send Message」と表示されれば成功です。

さいごに

liff-typeを使えば自分の慣れ親しんでるReactとTypeScriptでLIFFが使えることがわかったので、これから色々と機能を試してみようかと思います。

React＋TypeScriptでもLIFFしたい