LIFFアプリを試してみる

LIFFスターターアプリはJavaScriptで書かれたサンプルウェブアプリで、LIFFアプリの開発方法の理解に役立ちます。ここでは、アプリをHerokuにデプロイし、ログを確認し、アプリを修正する方法について説明します。

始める前に

以下の作業が完了していることを確認します。

スターターアプリをデプロイする

  1. GitHubでline-liff-starterリポジトリのページを開きます。
  2. READMEファイルに含まれる[Deploy to Heroku]ボタンを選択します。
  3. Herokuの[Create New App]ページに必要な情報を入力します。
  4. [Deploy app]を選択し、アプリが正常にデプロイされたことを確認します。
  5. アプリのURL(https://{Heroku app name}.herokuapp.com)を記録しておきます。LIFFにアプリを追加するとき、このURLを指定します。

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

LIFFにアプリを追加します。詳しくは、「LIFFアプリを追加する」を参照してください。

スターターアプリの機能を試す

LINEアプリ内でLIFFアプリを開くには、以下の手順に従います。

  1. LINEアプリのトーク画面でline://app/{liffId}をタップします。{liffId}はLIFFにアプリを追加するAPIリクエストに返されるLIFFアプリIDです。
  2. LIFFアプリに必要な権限を与えることに同意します。
  3. LIFFアプリを開くと、以下の4つのボタンおよび受信した情報の内容が表示されます。
    • Open Window:LINEアプリ内ブラウザでhttps://line.meを開きます。
    • Close Window:LIFFアプリを閉じます。
    • Get Profile:現在のユーザーのプロフィールを取得します。
    • Send Messages:LIFFアプリをトーク画面で開いている場合は、ユーザーの代わりにサンプルメッセージを送信します。
    各ボタンに関連づけられているAPIについては「LIFF APIを呼び出す」を、受信情報については「LIFFアプリを初期化する」を参照してください。

ログを確認する

詳細情報を取得するには、Heroku CLIを使用してアプリのログを確認します。

  1. コマンドラインからHerokuにログインします。
    $ heroku login
    
  2. ログを確認します。
    $ heroku logs --app {Heroku app name} --tail
    

スターターアプリをダウンロードして修正する

スターターアプリをローカルマシンにダウンロードして、テストしたり修正したりできます。その後で、任意のウェブサーバーにアプリをデプロイできます。ここでは、前の手順で作成したHerokuアプリに変更を加えてデプロイする方法について説明します。

  1. 以下のコンポーネントをインストール済みであることを確認します。
  2. GitHubからline-liff-starterリポジトリをクローンします。
    git clone https://github.com/line/line-liff-starter.git
    
  3. cdコマンドを実行して、Git用ディレクトリに移動します。
  4. Heroku用リモートをローカルリポジトリに追加します。
    $ heroku git:remote -a {Heroku app name}
    
  5. 変更を加えてコミットします(任意)。
    $ git add .
    $ git commit -m "First commit"
    
  6. 変更をHerokuのmasterブランチにプッシュします。
    $ git push heroku master
    

次のステップ

ここまで、サンプルアプリのデプロイと使い方について説明しました。ご自分で開発したウェブアプリをLIFFアプリとして展開する手順については、以下のトピックを参照してください。