반응 + 유형 스크립트を使ってLIFFを作る

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

옥전본 / liff 샘플

이 항목은 Create React App 에서 안내합니다.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

사선 시작

개발 모드로 응용 프로그램을 실행하다.
브라우저에서 보기http://localhost:3000를 엽니다.
편집할 경우 페이지가 다시 로드됩니다.
컨트롤러에서 lint 오류를 볼 수 있습니다.

사선 테스트

대화식 보기 모드에서 테스트 실행 프로그램을 시작합니다.
자세한 내용은 running tests 섹션을 참조하십시오.

사선 성형

프로덕션에 사용되는 응용 프로그램을 build 폴더로 생성합니다.
그것은 생산 모델에서 정확하게 반응하고 구축을 최적화하여 최상의 성능을 얻는다.
구축이 축소되었습니다. 파일 이름은 해시를 포함합니다.
당신의 응용 프로그램은 이미 배치할 준비가 되어 있습니다!
자세한 내용은 deployment 섹션을 참조하십시오.

사선이 튀어나오다

주의: 이것은 단방향 조작입니다.일단 너eject, 너는 돌아갈 수 없어!
구축 도구와 설정에 만족하지 않으면...
View on GitHub

LIFFとは

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

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

React 애플리케이션をつくる

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

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

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

cd liff-sample
yarn start

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

LIFFのセットアップ

チャネルの準備

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


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

LIFFの準備

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

LIFFアプリを追加のページになったら必要な情報を入力します.ローカル環境でLIFFを試すときは 한국などを駆使します.
https://ngrok.com/
범위は必要なほうを選択します.(행ログインをがっつり使うとかなければ 윤곽のみでよいと思います)
LIFFからメッセージを送信する必要があるときは すべてを表示 をクリックして展開して 소식쓰다にもチェックを付けます.

LIFFを作成したら LIFF IDをLIFF 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の編集し再度アクセスすると以下のようになるはずです.

개인용 컴퓨터ブラウザではLIFFではないのでボタンをクリックしてもなにも反応がないはずです.(エラーにはなります)
liffの詳しい미국 석유 학회リファレンスは생산라인公式のものを参照してください.
https://developers.line.biz/ja/reference/liff/

생산라인上でLIFFを試す。

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

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


ここまでできたら、あとはいろいろ미국 석유 학회を試してみたりするだけです.