LIFFスターターアプリを試してみる

LIFFについて初めて学ぶとき、LIFFアプリ開発をどうやって始めればよいか分からないかもしれません。このようなときには、LIFFスターターアプリ (opens new window)が役に立ちます。

LIFFスターターアプリは、LIFFアプリ開発に必要な最低限の機能を持ったテンプレートです。LIFFスターターアプリを元にカスタマイズしていくことで、独自のLIFFアプリを開発できます。このページでは、LIFFスターターアプリについて次の手順で説明しています。

• LIFFスターターアプリとは何か
• LIFFスターターアプリの始め方
  • 動作環境
  • ソースコードのダウンロード〜実行
  • サーバーへのデプロイ
  • LIFF IDの取得・設定
• 次のステップ

このページを読むことで、LIFFアプリをサーバー上にデプロイし、LINE上でLIFFアプリを開く体験ができます。LIFFを用いて作りたいアプリがあるときに、どのように作ればよいかをイメージできます。

LIFFスターターアプリを試す前に

• LIFFについては「概要」を参照してください。
• LIFFの機能をオンライン上で試したい場合はLIFFプレイグラウンド (opens new window)をご利用ください。LIFFを用いるとどのようなことができるのかを確認できます。なお、LIFFプレイグラウンドのソースコード (opens new window)はGitHubで公開していますので、開発者は自身のLIFF IDを設定して、独自のLIFFプレイグラウンドをデプロイできます。例えば開発者のLIFF IDをもとにliff.login()やliff.getProfile()といった各クライアントAPIをウェブ上で実行できます。

LIFFスターターアプリとは何か

LIFFスターターアプリは、LIFFアプリのテンプレートです。LIFFアプリはゼロから作ることもできますが、LIFFスターターアプリを使うことで、より早く開発を体験できます。

LIFFスターターアプリは、vanilla JavaScriptの他、Next.jsとNuxtでの実装も提供しています。各リポジトリは次の通りです。

• vanilla JavaScriptによる実装 (opens new window)
• Next.jsによる実装 (opens new window)
• Nuxtによる実装 (opens new window)

各リポジトリのREADMEに従うことで、LIFFアプリの開発を始められます。このページでは、vanilla JavaScriptでLIFFアプリ開発を始める方法を説明します。

LIFFスターターアプリの始め方

このセクションのゴールは、サーバー上にLIFFスターターアプリをデプロイし、LINEのLIFFブラウザで開くことです。手順としては、まずローカル環境でLIFFアプリの動作を確認します。その次にサーバー上にLIFFアプリをデプロイし、最後にLIFF IDという値をサーバー側に設定します。

動作環境

LIFFスターターアプリはNode.jsで動作します。また、パッケージ管理にはYarnを用いています。後述するNetlifyのCLIも含めて、このページの内容は次の各バージョンで動作を確認しています。

名前	バージョン
Node.js (opens new window)	16.13.1
Yarn (opens new window)	1.22.17
Netlify CLI (opens new window)	9.16.3

ソースコードのダウンロード〜実行

1. 初めに、LIFFスターターアプリのソースコードをダウンロードします。ターミナルまたはコマンドラインツール（以下「ターミナル」といいます）を開いてください。任意のディレクトリ上で、次のコマンドを実行します。

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

2. ダウンロードしたソースコード（line-liff-v2-starterディレクトリ）のsrcディレクトリ内に、vanilla JavaScript、Next.js、Nuxtで実装されたLIFFアプリがあります。あなたが使いたい実装のディレクトリに移動してください。ここではvanilla JavaScriptを用います。

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

   Next.jsやNuxtを使いたいときは

   Next.jsを使いたいときはcd line-liff-v2-starter/src/nextjs/、Nuxtを使いたいときはcd line-liff-v2-starter/src/nuxtjs/で、それぞれのディレクトリに移動してください。

3. 次に依存パッケージをインストールし、続いてLIFFアプリを起動します。インストールはyarn installコマンド、LIFFアプリの起動はyarn devコマンドを実行します。コンパイル成功のメッセージ（compiled successfully）が表示されて、ターミナルの画面出力が止まったら、ローカルサーバーでLIFFアプリが起動しています。

   $ yarn install
   $ yarn dev
   

4. ターミナルに表示されたURL（vanilla JavaScriptの場合はhttp://localhost:3000）にブラウザでアクセスすると、次のような画面が表示されます。

   LIFF IDを設定する必要があります

   環境変数としてLIFF IDを設定する必要がありますが、ここではまだ設定していません。LIFF IDの設定は「LIFF IDの取得・設定」で行います。

5. ブラウザでLIFFアプリの起動を確認できたら、Windowsならctrl+c、macOSならcommand+cでローカルサーバーを停止します。

サーバーへのデプロイ

ここまでの手順により、ローカルサーバー上でLIFFスターターアプリを起動できました。次はNetlifyを用いてサーバーにLIFFアプリをデプロイします。

Netlifyのアカウントが必要です

Netlify (opens new window)は静的サイトのためのホスティングサービスです。Netlifyにデプロイする際は、あらかじめアカウントを開設してください。このページの内容はNetlifyの無料プランで実行できます。

1. 初めにNetlifyのCLIをインストールします。これはコマンドライン上でNetlifyへのログインやデプロイといった操作を行うためのツールです。

   $ npm install -g netlify-cli
   

2. これでnetlifyコマンドを使えるようになりました。次にnetlify loginコマンドでNetlifyアカウントにログインします。コマンドを実行するとブラウザでNetlifyのログイン画面が開くので、ログインします。

   netlify loginコマンドを実行する前に

   先にNetlify (opens new window)のサイトでアカウントを開設してから、netlify loginコマンドを実行してください。

   $ netlify login
   

3. ログイン後、Netlifyの認可画面が表示されたら、［Authorize］をクリックします。

4. 続いてデプロイするためのファイルを生成します。これはsrc/vanillaディレクトリ下で次のコマンドを実行します。なお、LIFFスターターアプリではwebpack (opens new window)を用いてビルドを行なっています。

   $ yarn build
   

5. これでsrc/vanilla/dist下にHTMLやJavaScriptといったファイルが生成されました。あとはこれらのファイルをNetlifyにデプロイします。

   Netlifyへのデプロイは、リポジトリのルートディレクトリ（line-liff-v2-starter）上でnetlify deployコマンドを実行します。netlify deployコマンドは、オプションをつけなければドラフト状態でデプロイされます。まずはドラフト状態でデプロイを試します。

   $ cd ../../      # リポジトリのルートディレクトリに移動する
   $ netlify deploy # ドラフト状態でデプロイする
   

   netlify deployコマンドの実行後、次のようにデプロイ先のsiteを聞かれた場合は、Create & configure a new siteを選択します。上下のキーで選択肢を移動できます。

   This folder isn't linked to a site yet
   ? What would you like to do?
   Link this directory to an existing site
   ❯ +  Create & configure a new site # 新しいsiteを作って設定する
   

   どのteam配下にsiteを作るかを確認されます。デフォルトのteamのまま進みます。

   ? Team: (Use arrow keys)
   ❯ testlinedevelopers's team # デフォルトのteamのまま進む
   

   Site nameを何にするか聞かれるので、一意の名前を入力します。

   ? Site name (optional): # 一意の名前を入力する
   

   ドラフト状態でのデプロイができました。ターミナルに表示されるWebsite Draft URLにブラウザでアクセスすると、ページを表示できます。

6. ドラフト状態で試した結果、問題がなければnetlify deployコマンドに--prodオプションをつけて本番環境へデプロイします。

   $ netlify deploy --prod # 本番環境にデプロイする
   

以上でLIFFアプリをNetlifyにデプロイできました。デプロイ時にターミナルに表示されるWebsite URLにブラウザでアクセスすると、ページを表示できます。

LIFF IDの取得・設定

ここまででサーバー上にLIFFスターターアプリをデプロイできました。

この時点で、NetlifyのWebsite URLを外部ブラウザやLINE内ブラウザで開けば、デプロイしたLIFFスターターアプリをページとして確認できます。しかしLIFFスターターアプリを、LINEのLIFFブラウザでLIFFアプリとして開くことはできません。

LIFFスターターアプリをLIFFアプリとして開くためには、LIFF IDが必要です。まず「チャネルを作成する」と「LIFFアプリをチャネルに追加する」を読み、LIFF IDを取得してください。

エンドポイントURLを入力する

チャネルにLIFFアプリを追加する際に［エンドポイントURL］を入力する必要があります。ここには、前の手順で本番環境へのデプロイ時に取得したWebsite URLを入力してください。

上記手順でLIFF IDを取得できます。これをサーバー側の環境変数LIFF_IDとして設定します。

1. Netlifyで環境変数を設定するにはnetlify env:setコマンドを用います。つまり、LIFF_IDを設定するには次のコマンドを実行します。

   $ netlify env:set LIFF_ID "Your LIFF ID"
   

2. 環境変数を設定したら、再度Netlifyにデプロイします。この理由として、Netlifyでは環境変数はデプロイ時にセットされるためです。

   $ netlify build
   $ netlify deploy --prod
   

   環境変数の確認方法

   NetlifyのSite settingsで環境変数を確認できます。詳しくは、『Netlify Docs』の「Build environment variables (opens new window)」を参照してください。

3. これでLINEからLIFFアプリを開けるようになりました。LIFFアプリのURLは、LINE Developersコンソールで作成したチャネルの［LIFF］タブにLIFF URLとして表示されます。

   LIFF URLをLINEの任意のトークルームに送信し、トークルーム上のLIFF URLをタップすると、LINEのLIFFブラウザでLIFFアプリが開けます。

LIFF IDを設定せずにLIFFアプリを開いた場合

環境変数のLIFF_IDを設定せずにLIFFアプリを開いた場合、liff.init()によるLIFFアプリの初期化に失敗しますが、LIFFスターターアプリの見た目に変化はありません。

ローカルサーバー上でLIFF_IDを設定するとき

ローカルサーバーを起動するときにLIFF_IDを設定するには、次のようにサーバーを起動します。

$ LIFF_ID="Your LIFF ID" yarn dev

次のステップ

これでLIFFアプリを開発する準備ができました。実際の開発を行う際は、「LIFFアプリを開発する」を参照してください。