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

はじめに

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

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

LIFFとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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