VSCode & Azure でLIFF スターターアプリを始める

はじめに

個人的に最近気になっていた LIFF を始めるために LIFF v2 starter app を試してみました。
本投稿ではいつも使い慣れているVSCodeとAzureで環境を構築していきます。

の「Deploy the app using any other server platform」セクションを参考にしたいと思います。

前提条件としては

• LINEのアカウントを持っている
• VSCodeとGitが使える
• AzureでAppServiceを作成できる
• PCのOSはなんでもOK

です。

早速ドキュメントにしたがってやっていきます。

VSCodeでの準備

リポジトリをクローンする

VSCodeのターミナルでクローンしたいディレクトリに移動して

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

VSCodeの拡張機能 Azure Tools をインストールする

VSCodeの拡張機能検索でAzure Toolsを検索してインストールします。

Azureの準備

AppServiceを準備します。
ランタイムスタックは Node10 LTSを選択します。
AppServiceプランはフリー(無料)でOKです。

また、ここで作成したAppSerivceのURLをコピーします。
後にチャネルを追加する際に利用します。

LINEアカウントの準備

プロバイダーを作成する

にLINEのアカウントでログインします。
初回ログイン時は開発者情報の入力画面が表示されます。開発者名とメールアドレスを入力して、LINE Developersコンソールの開発者アカウントを作成します。

ログインをしたら適当なプロバイダーを作成してください。
プロバイダーってなんぞ？等の疑問は公式サイトで確認出来ます。

プロバイダーにチャネルを追加する

作成したプロバイダーに LINEログイン のチャネルを追加します。

チャネルにLIFFアプリを追加する

作成したチャネルに LIFFアプリを追加します。
LIFFアプリを追加する際はLIFFアプリをデプロイするサーバのエンドポイントを入力する必要があるので上記でコピーしたAppSerivceのURLを入力します。

LIFFアプリを追加すると下記のようにLIFFIDとLIFFURLがわかるのでこの二つをコピーします。

アプリとサーバの準備

デプロイの準備

公式ドキュメントではHeroku以外にデプロイする時はapp.json ,index.js,package.json,Procfileファイルを削除することになっていますが、今回Azure AppServiceもNodeのランタイムを使うのでpublic/liff-starter.jsを下記の通りに変更します。

public/liff-starter.js

    const useNodeJS = false;
    const defaultLiffId = "{上記で取得したLIFFID}";

Azure AppServiceへのデプロイ

VSCodeでAzureの拡張機能を開きます。(確かどこかのタイミングでAzureへのログイン情報の入力を求められるので入力します。)すると下記のように自分が管理しているAzureのサブスクリプションとそのなかで作成されたAppSerivceの一覧が出てきます。

上記で新しく作ったAppサービスで右クリックしDeploy To WebApp → line-liff-v2-starterフォルダを選択してデプロイします。

LIFFアプリを確認する

上記で取得したLIURLをLINEのアプリや一般的なブラウザでアクセスすると簡易的な動作を確認できます。
また、こちらからそれぞれの動作の違いを確認できます。

さいごに

取り急ぎ今回はLIFF v2 starter appの環境構築までとします。
今後は具体的な使い方や技術的な詳しい部分を探っていければと思います。