Skip to content

Latest commit

 

History

History
262 lines (170 loc) · 15.1 KB

README.ja.md

File metadata and controls

262 lines (170 loc) · 15.1 KB

LIFF v2 starter app

LINE Front-end Framework (LIFF)の基本的な機能を実演する小さなウェブアプリケーションです。

🌎 このREADMEを英語で読みたい場合は、こちらのページを参照してください： English

デプロイ方法

LIFFの使用方法に応じて、デプロイ方法を選択してください。

Herokuボタンを使ってターミナルを使わずにアプリをデプロイする

以下の手順に従うと、HerokuボタンとNode.jsを使ってLIFF v2 starter appを簡単にデプロイできます。

必要なもの

項目 説明
LINEログインチャネル LINEログインが提供する機能をアプリで利用するための通信路。 チャネルは、LINE Developers コンソールで作成できます。
Heroku アカウント（任意） Herokuは、Webアプリをデプロイできるクラウドサービスです。他のサーバープラットフォームを使用する場合は、Herokuのアカウントは必要ありません。

「Deploy to Heroku」ボタンを使ってアプリをデプロイする

Deploy

  1. 上記のDeploy to Heroku ボタンをクリックします。
  2. Herokuの「Create New App」ページで、必要事項を入力します。
  3. Deploy appをクリックします。
  4. Viewをクリックしてアプリのデプロイが成功したことを確認します。「You have not assigned any value for LIFF ID」のメッセージが画面に表示されていたらデプロイができています。
  5. HerokuアプリのURL（https://{Herokuアプリ名}.herokuapp.com）をメモしておいてください。 LIFFにアプリを追加する際に必要になります。

LIFFにスターターアプリを追加する

  1. 「LIFFアプリをチャネルに追加する」の手順に従ってLIFFアプリをチャネルに追加してください。
  2. 次のステップで必要になるので、LIFF IDをメモしておいてください。 LIFF IDはコンソールに表示されるLIFF URLの最後の部分です： https://liff.line.me/{liffId}
  3. Scopeオプションの編集ボタンをクリックします。
  4. すべて表示オプションをクリックして chat_message.write を有効にします。このスコープは LIFFアプリがユーザーに代わってメッセージを送信するために必要です。
  5. チャネルのステータスが「非公開」の場合、「非公開」ボタンをクリックしチャネルを公開します。

環境変数を使用してアプリにLIFF IDを渡す

  1. HerokuのDashboardを開きます。
  2. 作成したアプリを開きます。
  3. Settingsタブで、 Reveal Config Varsをクリックします。
  4. KEYフィールドにMY_LIFF_IDを入力し、VALUEフィールドにLIFF IDを入力します。
  5. Addをクリックして入力した内容を保存します。
  6. エンドポイントURL（https://{Herokuアプリ名}.herokuapp.com）にWebブラウザーからアクセスし、アプリが正しく動作していることを確かめてください。正しく動作していれば、Open External WindowやClose LIFF Appなどのボタンが表示されます。

アプリを試す方法については、「アプリを試す」を参照してください。

ログを確認する

HerokuのGUIやHeroku CLIを使って、アプリのログを確認することができます。

HerokuのGUIを使ってアプリのログを確認する

以下の手順に沿ってHerokuのダッシュボードからログを確認できます。

  1. Herokuのダッシュボードを開きます。
  2. 作成したアプリを開きます。
  3. 画面右上のMoreをクリックします。
  4. View logsをクリックします。

Application Logsの下にログが表示されます。

Heroku CLIを使ってアプリのログを確認する

  1. ターミナルからHerokuにログインします。

    $ heroku login

  2. ログを確認します。

    $ heroku logs --app {Heroku app name} --tail

アプリをカスタマイズしてターミナル経由でHerokuにデプロイする

以下の手順に従うと、HerokuとNode.jsを使用してカスタマイズしたアプリをデプロイできます。

ローカルマシンにアプリをインストールする

  1. 以下のものがインストールされていることを確認してください。

  2. line-liff-v2-starterのGitHubリポジトリをクローンします。

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

  3. line-liff-v2-starterディレクトリにcdします。

  4. Dependencyをインストールします。

    $ npm install

ローカルリポジトリをHerokuに紐づける

  1. ターミナルからHerokuにログインします。

    $ heroku login

  2. 名前付きのHerokuアプリを作成します。

    $ heroku create {Heroku app name}

  3. HerokuアプリのURL（https://{Herokuアプリ名}.herokuapp.com）をメモしておいてください。 LIFFにアプリを追加する際に必要になります。

  4. Herokuのリモートをローカルリポジトリに追加します。

    $ heroku git:remote -a {Heroku app name}

LIFFにスターターアプリを追加する

  1. 「LIFFアプリをチャネルに追加する」の手順に従ってLIFFアプリをチャネルに追加してください。
  2. 次のステップで必要になるので、LIFF IDをメモしておいてください。 LIFF IDはコンソールに表示されるLIFF URLの最後の部分です： https://liff.line.me/{liffId}
  3. Scopeオプションの編集ボタンをクリックします。
  4. すべて表示オプションをクリックして chat_message.writeを有効にします。このスコープは LIFFアプリがユーザーに代わってメッセージを送信するために必要です。
  5. チャネルのステータスが「非公開」の場合、「非公開」ボタンをクリックしチャネルを公開します。

ターミナル経由でアプリをカスタマイズしてデプロイする

  1. 環境変数を使用してアプリにLIFF IDを渡します

    heroku config:set MY_LIFF_ID={liffId}

  2. ローカル環境でのテスト用に環境変数を.envファイルにコピーします。

    Herokuでは、ローカル環境で環境変数を使用するために.envファイルを設定することが推奨されています。

    $ heroku config:get MY_LIFF_ID -s  >> .env

    注: .envファイルを GitHub にコミットしないようにしましょう。除外するには、.envファイルを .gitignoreに追加してください。

  3. アプリをカスタマイズします。利用可能なLIFFメソッドの詳細については、APIリファレンスを参照してください。

  4. ローカルでアプリを実行して、変更内容をプレビューします。

    heroku local

    localhost:5000にアクセスしてアプリの表示を確認できます。

  5. 変更内容に問題がなければ、ステージ、コミット、デプロイを行います。

    $ git add .
$ git commit -m "My first commit"
$ git push heroku master

  6. エンドポイントURL（https://{Herokuアプリ名}.herokuapp.com）にWebブラウザーからアクセスし、アプリが正しく動作していることを確かめてください。正しく動作していれば、Open External WindowやClose LIFF Appなどのボタンが表示されます。

  7. 最後に、チャネルのステータスが公開済みであることを確認してください。

アプリを試す方法について詳しくは、「アプリを試す」を参照してください。

Herokuログを確認する

HerokuのGUIやHeroku CLIを使って、アプリのログを確認することができます。 詳しくは「ログを確認する」を参照してください。

他のサーバープラットフォームを使用する

以下の手順に従うと、Heroku以外のサーバープラットフォームを使用してアプリをデプロイできます。

必要なもの

Item Description
LINEログインチャネル LINEログインが提供する機能をアプリで利用するための通信路。 チャネルは、LINE Developers コンソールで作成できます。

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

  1. line-liff-v2-starterリポジトリをクローンします。

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

  2. line-liff-v2-starterディレクトリにcdします。

アプリとサーバーの準備をする

  1. public/liff-starter.jsで変数 useNodeJSをfalseに設定する。

    const useNodeJS = false;

  2. レポジトリからHerokuとNode.js固有のファイル（app.json、index.js、package.json、Procfile）を削除します。

  3. ファイルをウェブサーバーにホストします。

LIFFにスターターアプリを追加する

  1. 「LIFFアプリをチャネルに追加する」の手順に従ってLIFFアプリをチャネルに追加してください。

  2. 次のステップで必要になるので、LIFF IDをメモしておいてください。 LIFF IDはコンソールに表示されるLIFF URLの最後の部分です： https://liff.line.me/{liffId}

  3. LIFF IDを public/liff-starter.jsの変数defaultLiffId に設定します。

    const defaultLiffId = "{liffId}";

アプリを試す

LINEでアプリを試す

チャットから簡単なリンクを作成することで、LINEでLIFFアプリを開くことができます。

  1. LINEのチャットを開き、LIFF URL（https://liff.line.me/{liffId}） をメッセージとして送信します。 例えば、LIFF IDが123456789の場合、https://liff.line.me/123456789というメッセージを送信します。
  2. ステップ１で送ったLIFF URLをタップします。
  3. LIFFアプリに必要な許可を与えることに同意します。

ブラウザでアプリを試す

エンドポイントURLをWebブラウザに入力します。例：https://{Herokuアプリ名}.herokuapp.com

アプリの機能

スターターアプリには以下のボタンがあります。

ℹ️ 一部のボタンは、LINEのアプリ内ブラウザか通常のブラウザでしか利用できません。詳しくはAPIリファレンスを参照してください。

ボタン 説明 LIFFブラウザ 外部ブラウザ
Open External Window LINEのアプリ内ブラウザでhttps://line.meを開く。 ✅ ✅
Close LIFF App LIFF アプリを閉じます。 ✅ ❌
Send Message チャット画面でLIFFアプリを開いている場合、ユーザーに代わってサンプルメッセージを送信します。Send Messageを使用するには、LINE Developersコンソールでchat_message.writeを有効にする必要があります。詳しくは「liff.sendMessages()」を参照してください。 ✅ ❌
Get Access Token 現在のユーザのアクセストークンを取得します。 ✅ ✅
Get Profile 現在のユーザのプロフィールを取得します。 ✅ ✅
Open Share Target Picker ターゲットピッカー（グループやフレンドを選択する画面）を表示し、選択したターゲットにサンプルメッセージを送信します。シェアターゲットピッカーを使用するには、LINE Developersコンソールでシェアターゲットピッカーを有効にする必要があります。詳しくは「シェアターゲットピッカーを利用するには」を参照してください。 ✅ ❌
Log In WebアプリのLINEログインを実行します。ユーザーが認証・承認されると、LIFFアプリはアクセストークンやユーザープロファイルなどの情報を取得できるようになります。 ❌ ✅
Log Out ユーザーをログアウトします。 ❌ ✅

ボタンに関連するAPIの呼び出しについては、「LIFF APIを呼び出す」を参照してください。