Firebase HostingでLIFFクイックスタート

LIFF(LINE Front-end Framework)とは？

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

LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

ざっくりいうと、LINEアプリからLINEのユーザー情報などのデータを受け渡して色々できるようにしたウェブアプリってイメージ。

【参考】
https://developers.line.biz/ja/docs/liff/overview/

作業の手順

1. プロバイダーとチャンネルの追加(LINE Developersコンソール)
2. ソースコードの取得(LIFFスターターアプリ)
3. サーバーへのデプロイ
4. LIFF IDの取得・設定

基本的にLINE Developersのドキュメントに書かれている内容に沿って進めていく。ドキュメントではNetlifyを用いてサーバーにLIFFアプリをログインしているが、今回はFirebase Hostingを代わりに用いてデプロイする。

【参考】
https://developers.line.biz/ja/docs/liff/getting-started/
https://developers.line.biz/ja/docs/liff/trying-liff-app/

1.プロバイダーとチャンネルの追加

1.1.プロバイダーの追加

LINE Developersコンソール > プロバイダーからプロバイダーを作成

1.2.チャンネルの追加

先ほど作成したプロバイダーを選択し、必要情報を入力してチャンネルの作成を行う。

チャンネルの種類は[LINEログイン]を選択。

※アプリタイプは[ウェブアプリ]を選択。

必須項目の入力が完了したら[作成]を実行する。

作成が完了するとチャンネルが表示される。

2.ソースコードの取得

LIFFアプリはゼロから作ることも可能だが、今回はLIFFスターターアプリというLIFFアプリのテンプレート

LIFFスターターアプリは以下の言語・フレームワークで実装可能になっている。

• vanilla JavaScript
• Next.js
• Nuxt

2.1.LIFFスターターアプリのソースコードをダウンロード

$ git clone https://github.com/line/line-liff-v2-starter.git

2.2.使いたい実装のディレクトリに移動

$ cd line-liff-v2-starter/src/nuxtjs 

今回はNuxtを用いる。

2.3.パッケージのインストール、LIFFアプリの起動

$ yarn install
$ yarn dev

ターミナルに表示されたURL（Nuxtの場合はhttp://localhost:9000）にブラウザでアクセスすると、以下のような画面が表示される。

3.サーバーへのデプロイ

3.1.プロジェクトの作成

3.2.Firebase CLIの追加

$ npm install -g firebase-tools
$ firebase -V

インストール後にバージョンを確認できたら成功。

3.3.Firebaseにログイン

$ firebase login

3.4.Firebaseプロジェクトの初期設定

$ firebase init

スペースキーで[Hosting]を選択。

先ほど作成したプロジェクトを選択。

$ yarn run generateで事前に静的ファイルを出力している場合はpublicディレクトリをdistにして、dist/index.htmlの書き換えをNoにして実行完了。

3.5.デプロイを実行

$ firebase deploy --only hosting

デプロイに成功して表示されたURL(今回はhttps://liff-stater-project.web.app)をブラウザで確認するとローカルで確認していた画面が出てくる。

4.LIFF IDの取得・設定

LIFFスターターアプリをLIFFアプリとして開くためには、LIFF IDの取得が必要なので設定する。

4.1.LIFFアプリの追加

1.2.で作成したチャンネルにはLIFFアプリが登録されていないので基本情報を入力して追加する。

4.2.LIFFアプリの基本情報を入力

[エンドポイントURL]には3.5.の実行で作成されたURL(今回はhttps://liff-stater-project.web.app)を入力する。

入力が完了したら[追加]を実行する。

4.3.LIFF IDの発行

LIFFアプリの追加が完了したらLIFF ID(2000317249-n0W7q58y)が発行される。

4.4.LINEブラウザで確認

LINEのブラウザでも表示されていることがわかる。

4.5.LIFFスターターアプリにLINE IDを設定

既にLIFF_IDが設定されているので、4.3.で発行したLINE IDをenvファイルに追加する。

nuxt.config.js

...
env: {
  LIFF_ID: process.env.LIFF_ID,
},
...

.env

LIFF_ID="2000317249-n0W7q58y"

これでファイルの編集後にデプロイを実行するとLINEアプリの更新が確認できる。

$ firebase deploy --only hosting

参考

• LIFFドキュメント
• Firebaseドキュメント