LIFF思ってたより簡単にできた ~入門編~

4932 ワード
LIFF Line Line テキストリンク

この記事はエイチーム引越し侍 / エイチームコネクトの社員による、Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020 22日目の記事です。

はじめに

引越し侍でもLINEを利用するシステムが増えてきて、
次に何かできないかなと思ったのをきっかけに触ってみました。

色々とやることがありそうで、大変そうだと思っていましたが、
実際にやってみると簡単に試すことができたので、手順を書いていきます。

LIFFとは

LIFF（LINE Front-end Framework）とは、LINEのアプリ上で動くWebアプリのプラットフォームで、
LINE上にフォームを設置して入力情報をシステムと連携させるといったようなことができるようになります。

例えば、ヤマト運輸さんだと受取日時の変更や再配達依頼などのサービスを提供されていますね

準備

今回は以下のサービスを使って実装していくので、アカウント作成とインストールをしてください。

実際にやってみる

1. LINEのプロバイダーとチャネル作成

以下のサイトを参考に、プロバイダーとチャネルを作成してください。
チャネルを作成する

2. Herokuのプロジェクト作成

Herokuにログインし、「Create New App」からプロジェクトを作成してください。

3. LIFFアプリプロジェクトを入手

LINEが公式でサンプルプロジェクトを提供してくれているので、今回はこちらを使って進めていきます。
公式サンプル

以下のコマンドを実行してサンプルを取得
git clone https://github.com/line/line-liff-starter.git

4. HerokuにDeploy

以下コマンドを実行し、Deployしていきます。

$ heroku login
$ cd line-liff-starter/
$ git init
$ heroku git:remote -a 手順2で入力したAppName
$ git push heroku master

5. アプリをLIFFに追加する

作成しておいたチャネルのLIFFに追加をしていきます。
チャネルを選択し、 [LIFF]メニュー → [Add]

こちらのページを参考にしてください。
LIFFアプリをチャネルに追加する
とりあえず試すなら、EndPointURL以外は適当で良さそうです。

6. LIFFアプリを開く

手順5でアプリをLIFFに追加するとURLが発行されるので、試しにLINEのアプリ上で開いてみてください。

URLは手順5と同じ[LIFF]メニューで確認できます。

URLを開くとこんな感じでLIFFが起動します。

7. LINE公式アカウントとLIFFアプリの起動を紐付ける

LINE公式アカウントマネージャーを開き、リッチメニューを作成します。
LINE公式アカウントマネージャー

今回はお試しということで、見た目は適当で。
ポイントは、タイプに「リンク」を選択し、URLに手順6のLIFFのURLを入力します。

保存をすると、メニューが表示されるようになり、

クリックすると、作成したLIFFが起動します。

最後に

今回はお試しということで基本的なことしかしていませんが、
色々と触ってみて、面白い発見があったら応用編も書いてみようと思います！

次回

明日は@namiitaの記事になります！
お楽しみに！！