Vite で LIFF アプリ #

目指すゴールはフロントエンドライブラリ React でひとつの Web アプリを作ること。LINE Front-end Framework と Firebase Authentication を合わせアプリ内で LINE 認証を使えるようにします。

LIFF は LINE Front-end Framework の略で LINE 社 が提供する Web アプリのプラットフォームです。このプラットフォームで動作する Web アプリを LIFF アプリと呼びます。

LINE Auth	Signed

なお、実際の成果物は Firebase Hosting にデプロイを済ませており、 Next.js 並びに React on Vite をご確認いただければ幸いです。

執筆済みの教材 #

今回の教材は Zenn book を利用しています。

@preview

3 月 3 日当日の動画は、アーカイヴ化されています。

動画の詳細は こちら よりご確認いただけます。

テスト課題 #

• アイコン画像を表示する
• メッセージを送信する

参照リポジトリ #

https://github.com/jiyuujin/vite-react-liff

また Vite 上で React を動作させる サンプル と合わせ、参考にしていただければ幸いです。

CHANGELOG #

ver.2022.4 branch #

React 18 に対応している。

ver.2022.3.2 branch #

shareTargetPicker を利用して外部ブラウザで LINE にメッセージを送信する。

ver.2022.3.1 branch #

LIFF ブラウザでメッセージを送信する。

ver.2022.2 branch #

LINE ログイン時にアイコン画像を表示している。

ver.2022.1 branch #

LINE Front-end Framework を利用して LINE 認証を実装している。

ver.2021.2 branch #

React Router を v6 に更新している。

ver.2021.1 branch #

Firebase Authentication の Google 認証を実装している。

補足 #

2021 年 12 月の React Conf 2021 で発表された StrictMode が与える影響についても書かせていただいた。

下記の記事も合わせてチェックいただければ幸いです。

• LINE と共に React (Vite) を学ぶ