LIFFとは何者なのか。秒でできる（かも）チュートリアル。

# LIFFとは何者なのか

こんなやつ！！MessagingAPIと自作のWEBアプリを合体できるやつ！！
普通にブラウザを開くんじゃなくて、LINEアプリ上でWEB画面を表示できます。

<img width="521" alt="IMG_7115A141A0D2-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/195882/47915fbb-50f1-4593-590b-d68c45bb126d.jpeg">


# LIFFを使うメリット

LIFFを使うメリットはいくつかあって、個人的に大きいなと思うものを紹介します。

||メリット||
|---|---|---|
|1|UXの向上|LINEアプリを移動することがないので、ユーザー的に幸せ♬|
|2|パーソナライズ|LINEのプロフィール情報をWEB上で取得できる。例えば、トプ画やプロフィール名をLIFF上で表示したりも簡単にできる|

他にもメリットはありますが。。。
まあ、つまりはLIFFを使うと今までのMessagingAPIよりも良いサービスを提供できるってことですね。

# LIFFを使うデメリット

デメリットっていうか、LIFFを使ってみるのを以下の理由で渋ってました。

1. 学習コスト（SDKとかを使うのでわざわざ勉強するの面倒）
2. サーバーを設置するの面倒

「1」は使ってみるとわかるのですが、結構簡単でした。SDKの部分は本当にシンプルでそこまで学習コストはかかりません。
「2」はぶっちゃけLIFFじゃなくてもWEBアプリなら必要なのでしょうがないですね。でもSDK自体がサーバー側で動かすものではなくてクライアント側で動かすもの。つまりAWS S3にHTMLファイルをポンっと置くだけで作れちゃいます。
***つまり、これといったデメリットはありません！！試してみましょう!!***

# 開発の流れ

それでは、超ざっくりLIFFを使う手順を紹介します。

1. MessagingAPIでチャンネルを作成
2. LIFFで使うWEBサイト(HTMLファイル）を設置します。
3. 作成したチャンネルからLIFFを作成し、「2」で作成したWEBサイトと紐付けします。
4. 終わり

ちなみに、「2」で作成したサイトでは[LINE社公式のLIFF用のSDK](https://github.com/line/line-liff-starter)を使用します。

# SDKの使い方とできること

簡単にSDKの使い方とできることを書いていきましょう。
使い方は簡単で、インストールとかは必要ないです。HTMLファイルに以下の1行を追加するだけで使うことができます。sdnってやつですね。

```html
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
```

そして、SDKでできること。

|できること|メソッド|
|---|---|
|LINEのプロフィール取得をできる。プロフィール名とかトプ画とか|`liff.getProfile()`|
|他のURLを開く。LINE内でも外部ブラウザでも可能|`liff.openWindow()`|
|ユーザーの代わりにメッセをBotに送る|`liff.sendMessages()`|
|LIFFページを閉じる|`liff.closeWindow()`|

一番使えそうなのは最初のプロフィール取得かな〜なんて思ってます。もっと知りたい方は[公式のドキュメント](https://developers.line.biz/ja/reference/liff/)をどうぞ

# LIFFを体験してみる

公式のドキュメントだとHerokuを使ってるんだけど、わざわざサーバたてるものなあって渋ってたら閃きました。
AWSのS3でいけるんじゃん！！！
てことで、S3を使ってLIFFを開発していきたいと思います。
とはいえ、別にS3じゃなくてもファイルを置けてURLでアクセスできるとこならなんでも大丈夫です。
***MessagingAPIをある程度使ったことがある方向けです。なので、チャンネル作成のやり方などの説明はしません。***

## コードをインストールしてS3に

ほぼ公式のをパクりましたが、私オリジナルで作成しました。cloneして使います。

```
$ git clone https://github.com/imajoriri/imajo-liff-starter.git
```

使うのは以下の3つのファイルです

```
index.html
index.js
style.css
```

これを同じフォルダのS3にあげて、公開します。
***ちゃんと3つ公開してあげてね！！***

## MessagingAPIでLIFFを追加

適当にMessagingAPIのチャンネルを作成し、メニューのLIFFから`LIFFアプリを作成`します。

<img width="1138" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/0c97f385-de3e-7b2e-7769-dc7481747578.png">

すると設定画面がでてくるので入力します。

* 名前: LIFFテスト
* サイズ: Tall
* エンドポイント: S3にあげた`index.html`のURLを入力
* BLE feature: OFF

<img width="827" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/1321571d-f434-0b94-7bd0-f1b33d8f2951.png">

すると`LIFF URL`というものが作成されるのでメモします。
このURLをLINEアプリ上でクリックするだけでLIFFを開くことができます。

<img width="1137" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/116ed279-0a38-3865-ad9b-6f3447594d71.png">

## 試してみる

では、Bot上で試してみましょう。
今、メモしたURLを***スマホ***のLINEアプリで入力してクリックします。

<img width="959" alt="IMG_7C3557A84AB7-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/195882/a1307b3c-2b3e-f626-a57d-0391dedd47be.jpeg">

すると、自分のトプ画と名前が表示されたLIFFが出現すると思います。
さらに他にボタンが3つあり、それぞれ以下の機能があります。試してみてください。

* ブラウザを開く
* LIFFを閉じる
* BOTにメッセージを送る

<img width="966" alt="IMG_9A1EBA58C141-1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/195882/862e7cca-9d62-c6f0-ea25-4578b7515ac3.jpeg">


# 参考

https://developers.line.biz/ja/docs/liff/getting-started/
https://developers.line.biz/ja/reference/liff/