反応+タイプスクリプトを使ってリフを作る

Reactjs +タイプスクリプトでリフアプリを試したときのメモです.
コードは以下のリポジトリにあります.

湯田本 / リフサンプル

このプロジェクトはブートしたCreate React App .

利用可能なスクリプト

プロジェクトディレクトリで実行できます.

糸開始

開発モードでアプリケーションを実行します.
オープンhttp://localhost:3000 ブラウザで表示するには.
あなたが編集をするならば、ページは再ロードされます.
コンソール内のlintエラーも表示されます.

糸試験

インタラクティブウォッチモードでテストランナーを起動します.
詳しくはrunning tests を参照してください.

糸造り

生産のためのアプリケーションをビルドしますbuild フォルダ.
それは正しく束が生産モードで反応し、最適なパフォーマンスのためのビルドを最適化します.
ビルドはミニ化され、ファイル名はハッシュを含みます.
あなたのアプリケーションを展開する準備が整いました!
詳しくはdeployment を参照してください.

糸抜き

注意:これは一方向操作です.一度eject , あなたは戻って行くことはできません!
ビルドツールや設定に満足していない場合.
View on GitHub

リフとは

https://developers.line.biz/ja/docs/liff/overview/

LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

環境

node: v14.5.0
npx: 6.4.1
npm: 6.14.6
yarn: 1.22.4

バージョンを揃えなくとも動くと思います.

反応アプリをつくる

https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment
https://create-react-app.dev/docs/adding-typescript/
リアクターズのチュートリアルにあるとおりReactAppを生成するコマンドを実行する
今回はタイプスクリプトを使用するのでオプションに追加しておきます.

npx create-react-app liff-sample --template typescript

一通り生成できたら動作するかどうかを確認します.

cd liff-sample
yarn start

http://localhost:3000 にアクセスして以下のようなページが表示されたらよろしい.

リフのセットアップ

チャネルの準備

https://developers.line.biz/console/ にアクセスします.
プロバイダーがなければ、新規でプロバイダーを作成します. LINE DEV の記事を確認しながら進めてください.
プロバイダーができたらそれを選択し、新規チャネルを作成します.このときのチャネルの種類は LINEログイン を選択します.


選択したら必須項目を入力する.アプリタイプは ウェブアプリ を選択します.

リフの準備

チャネルを作成し終えたらリフのページから追加をクリックしてリフを作成します.

リフアプリを追加のページになったら必要な情報を入力します.ローカル環境でリフを試すときは 農業技術研究機構などを駆使します.
https://ngrok.com/
スコープは必要なほうを選択します.(LINEログインをがっつり使うとかなければ プロフィールのみでよいと思います)
リフからメッセージを送信する必要があるときは すべてを表示 をクリックして展開して メッセージ.執筆にもチェックを付けます.

リフを作成したら リフIDをリフURLが生成されたのを確認します.
このIDやURLはあとで使用します.

ReactAppに埋め込む

ライブラリインストール

ライン公式の国立天文台パッケージがあるので追加しておきます.
https://www.npmjs.com/package/@line/liff

yarn add @line/liff

コードの編集

App.tsx を編集します.

import React from 'react';
import liff from '@line/liff'; // 追加
import logo from './logo.svg';
import './App.css';

function App() {
  /* 追加: メッセージ送信 */
  const sendMessage = () => {
    liff.init({liffId: process.env.REACT_APP_LIFF_ID as string}) // LIFF IDをセットする
      .then(() => {
        if (!liff.isLoggedIn()) {
          liff.login({}) // ログインしていなければ最初にログインする
        } else if (liff.isInClient()) { // LIFFので動いているのであれば
          liff.sendMessages([{ // メッセージを送信する
            'type': 'text',
            'text': "You've successfully sent a message! Hooray!"
          }]).then(function() {
            window.alert('Message sent');
          }).catch(function(error) {
            window.alert('Error sending message: ' + error);
          });
        }
      })
  }

  /* 追加: UserProfileをAlertで表示 */
  const getUserInfo = () => {
    liff.init({liffId: process.env.REACT_APP_LIFF_ID as string})
      .then(() => {
        if (!liff.isLoggedIn()) {
          liff.login({}) // ログインしていなければ最初にログインする
        } else if (liff.isInClient()) {
          liff.getProfile()  // ユーザ情報を取得する
            .then(profile => {
              const userId: string = profile.userId
              const displayName: string = profile.displayName
              alert(`Name: ${displayName}, userId: ${userId}`)
            }).catch(function(error) {
              window.alert('Error sending message: ' + error);
            });
        }
      })

  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <button className="button" onClick={sendMessage}>send message</button> // 追加
        <button className="button" onClick={getUserInfo}>show user info</button> // 追加
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

上記のコード編集とCSSの編集し再度アクセスすると以下のようになるはずです.

パソコンブラウザではリフではないのでボタンをクリックしてもなにも反応がないはずです.(エラーにはなります)
リフの詳しいAPIリファレンスはライン公式のものを参照してください.
https://developers.line.biz/ja/reference/liff/

ライン上でリフを試す。

ローカルの農業技術研究機構で試す場合は環境変数(上記コードで言う REACT_APP_LIFF_ID )に値をセットします.
どこかのサーバにデプロイするときであっても同様です.
ベセルを使用するとかなり手軽にデプロイできて試せます.
https://vercel.com
環境変数などがセット完了し、サーバデプロイなどが終わったら リフURLをてきとーなトークルームに送信します.ひとりだけのトークルームを使うと誰にも迷惑をかけずに試せます.

このリンクをタップしたらリフが立ち上がるはずです.
send message をタップすると、最初にもろもろ許可してOKかどうかのページが表示されます.
許可したあとにもう一度 send message をタップすると、そのトークルームにメッセージが送信されます.show user info をタップすると、自身のユーザ名とユーザIDが表示されます.


ここまでできたら、あとはいろいろAPIを試してみたりするだけです.