React+LIFFなミニアプリを作ろう
public.icon
https://gyazo.com/c7a93313a73a8d8958b93f06c205ae03
筆者inoue2002.icon
最近開発したもの
目的の前提
LINEAPIの全体像を知る
LIFFを用いたLINEログインを実装する
GitHubとVercelを用いた自動デプロイ
(応用)LIFFの関数を使いこなす
(Scrapboxはいいぞ)
(時間があれば ChatGPTAPIの組み込み)
React
今後の応用例
DBと連携する(ex: React+Firebase)
認証基盤と連携する(ex: LIFF(React) + Firebase Auth , LIFF + AmazonCognito)
https://gyazo.com/973629277b2bc021f2edfedec6357310
APIと連携する(ex: React + Web API)
まずは世の中にあるLINEサービスを触ってみよう
LIFFの活用事例
ログインせずにつかう
コールバックURLのみを指定する⇨LIFFウィンドウで開ける
ユーザー情報などは保持せず、その場限りで利用する
ユーザー情報を保持し、様々な機能を利用する
ベースソースとしてLINE社が提供しているcreate-liff-appを利用する
LIFFの作成
LIFFIDの発行
テンプレートからソースコードを作成する
npx @line/create-liff-app hands-on --typescript --npm --template react
上記の例ではreact,ts,npmを指定している
https://gyazo.com/a8f3adbfd2aeb7d91342b6a3889bbdb4
ソースコードの起動
cd hands-on
npm run dev
https://gyazo.com/592266472bb226f4bd3768155bcbaff3
GitHubにてリポジトリの作成
https://gyazo.com/ed11e68f345f33191f49aea2060a287e
https://gyazo.com/3d7a65334ea5e81af11011d4dd56408d
https://gyazo.com/406999383e3c4bc3a412626d33d7237a
ソースコードを作成したリポジトリにpushする
https://gyazo.com/e3c1a92e51a427a99a53c5541a85f050
https://gyazo.com/e2c4b6615436026014445a014291e1bc
git remote add origin https://github.com/inoue2002/hands-on-liff.git (適宜変更)
git branch -M main
git add *
git commit -m "initial commit"
https://gyazo.com/8212be8d785e86e038e1cbf6807dd684
git push
ホスティングの設定
vercelにログイン
https://gyazo.com/f8c08f67a63cc47485ed3d799fd88aa4
https://gyazo.com/b63f8849bc8141dcfafb4b2bb0d3fa7e
環境変数にVITE_LIFF_IDを追加する
https://gyazo.com/d80a23678749ffb3582d1f6f3999edd0
https://gyazo.com/7aa727d5121e958f07c2c49cb8dc71ef
ホスティングされたURLをLIFFのコールバックURLに入れる
https://gyazo.com/28a43da7c59d2e8ffb9d4ab5fb571120
LIFFURLをLINEのトーク上で開いてみる
ログインユーザーの名前を表示させる
code:App.tsx
useEffect(() => {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID,
})
.then(async () => {
const profile = await liff.getProfile();
setMessage(Hello, ${profile.displayName}!);
})
.catch((e: Error) => {
setMessage('LIFF init failed.');
setError(${e});
});
});
この時LINE以外のブラウザで開いた時にエラーが出る
⇨デフォルトではliff.initにはline上で開かれた時はline.loginが含まれているが、外部ブラウザで開かれた場合は含まれないため、withLoginOnExternalBrowser: trueを追加してあげるとブラウザでも動くようになる
https://gyazo.com/c90ac41efdc1a96030605e7031fe6aad
code:App.tsx
useEffect(() => {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID,
withLoginOnExternalBrowser: true,
})
.then(async () => {
const profile = await liff.getProfile();
setMessage(Hello, ${profile.displayName}!);
})
.catch((e: Error) => {
setMessage('LIFF init failed.');
setError(${e});
});
});
ログインできるようになる
ソースコードの解説
LIFFをCDN/NPMを用いて使う
LIFFの様々な関数を試す
table:様々なLIFFプロパティの所感(詳しくは公式ドキュメントへ)
liff.id
liff.ready
liff.init() 必ず使うやつ
liff.getOS()
liff.getLanguage()
liff.getVersion() QRCodeスキャンなどでバージョンがややこしい時に使う
liff.getLineVersion() 〃
liff.getContext() どこでLIFFが開かれているのかを取得する
liff.isInClient()
liff.isLoggedIn() LINEログインが終わってないユーザーにコンテンツを表示しないようにする
liff.isApiAvailable()
liff.login() liff.initの中でloginできないようなアプリケーション構成の時に使う
liff.logout() あまり使わない
liff.getAccessToken() LIFF上のリクエストからAPIを処理する時の認証に使う
liff.getIDToken()
liff.getDecodedIDToken()
liff.permission.query() この辺はミニアプリなのであまり関係ない
liff.permission.requestAll() 〃
liff.getProfile() ログインしているユーザー情報を取得する、めっちゃ使う
liff.getFriendship() 特定の公式アカウントと友達になっていないと使えないようなLIFFが作れる
liff.openWindow()
liff.closeWindow() LIFFを任意でcloseさせる時に使う、便利、たまに使う
liff.sendMessages() LIFFを開いているトークにメッセージを送信する時に使う
liff.shareTargetPicker() LIFFから友達にメッセージを送信させる時に使う。便利
liff.scanCodeV2() QRコードを読み取る機能を実装する時に使う。制限があって使いにくい。
liff.permanentLink.createUrlBy()
liff.use() プラグインを導入する時に使う
liff.i18n.setLang() 多言語対応
npm install @line/liff-mock
code:App.tsx
import liff from '@line/liff';
import { LiffMockPlugin } from '@line/liff-mock';
import { useEffect, useState } from 'react';
import './App.css';
function App() {
useEffect(() => {
// LIFFMockのインストール
const isDev = process.env.NODE_ENV === 'development'
liff.use(new LiffMockPlugin());
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID,
//@ts-ignore
mock: isDev,
withLoginOnExternalBrowser: true,
})
.then(async () => {
if (!liff.isInClient()) liff.login();
const profile = await liff.getProfile();
setMessage(Hello, ${profile.displayName}!);
})
.catch((e: Error) => {
setMessage('LIFF init failed.');
setError(${e});
});
});
return (
<div className="App">
<h1>create-liff-app</h1>
{message && <p>{message}</p>}
{error && (
<p>
<code>{error}</code>
</p>
)}
LIFF Documentation
</a>
<button onClick={() => liff.closeWindow()}>Close LIFF</button>
</div>
);
}
export default App;
初回を実施しての所感
未解決
そのため、windowsユーザーへの対応に戸惑った、かなり時間を使ってしまった とりあえずの解決策として、node.jsを公式サイトからインストールして使ってもらった
gitの初期化が終わっていない人の解決にも時間がかかった ただ、みんな新しいことを楽しそうにやってもらえたのですごくよかった。