はじめに
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ファイルをつくって、プロジェクトのルートディレクトリ直下に置きます。
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が使えることがわかったので、これから色々と機能を試してみようかと思います。