Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その２：LIFF編）

LIFFを使用したアプリケーションを何か作ってみたかったので、勤怠連絡のBOTを作ってみました。
ちょっと長くなりそうなので、全3回でまとめます。

- [Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その１：Vue編）](https://qiita.com/korsmic/items/0009a020cc18e20c7406)
- [Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その２：LIFF編）](https://qiita.com/korsmic/items/5e9c5e65f3023fe806f1)
- [Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その３：GAS編）](https://qiita.com/korsmic/items/3615e3a59cb87c6e620d)

[githubはこちら](https://github.com/korsmic/vue-liff-bot)

## BOTの設定

### 参考
LIFFの設定は以下の記事が大変参考になります。

- [LINE の LIFF 開発超入門 : LIFF SDK を使った Web アプリの開発](https://qiita.com/kenakamu/items/44cba247ab51b6c5ed51)
- [LINE Bot : LINE Front-end Framework を liff npm パッケージで操作](https://qiita.com/kenakamu/items/5a9cbdc32c4575e53c59)


### 設定

[https://developers.line.me/ja/docs/liff/getting-started/](https://developers.line.me/ja/docs/liff/getting-started/)を参考にして進めます。

- `アクセストークン`を作成してコピーしておく
- 一番下の`Your user ID`もコピーしておく
- `Channel Secret`も後ほど利用するので生成してコピーしておく
- `Webhook送信`は後ほど設定するので、`利用する`に設定
- `BOTのグループトーク参加`→`利用する`に設定
- `自動応答メッセージ`→`利用しない`
- `友だち追加時あいさつ`→`利用しない`

`LINEアプリへのQRコード`がありますので、LINEアプリより追加してください。

## LIFFを設定

以下記事で作成したものの続きになります。

- [Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その１：Vue編）](https://qiita.com/korsmic/items/0009a020cc18e20c7406)

### コードの追加
まずは、コードを追加します。

※Vueに組み込みたかったのですが、うまく動作させることができず、外部ファイルで対応しました･･･。

`public/index.html`のheadに以下を追加します。

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

続いて、`send.js`を新規作成します。場所は、`public/send.js`です。

```javascript:public/send.js
window.onload = function(e) {
  // sendにclickイベントを追加
  document.getElementById('send').addEventListener('click', function() {
    // messageの中身を取得し、sendMessagesのtextに入れる
    var ms = document.getElementById('message').value;
    liff
      .sendMessages([
        {
          type: 'text',
          text: ms
        }
      ])
      .then(function() {
        window.alert('送信完了');
        // aleartでOKを押すと、自動でLIFFウィンドウが閉じる
        liff.closeWindow();
      })
      .catch(function(error) {
        window.alert('Error sending message: ' + error);
      });
  });
};
```

`liff.sendMessage`で送信します。


### 公開

`LIFF`は`https`が必要なため、わざわざサーバーを用意する必要のない`GitHub Pages`で公開します。

まずは、`build`します。

```
yarn run build
```

続いて

- `.gitignore`から`dist`を外す
- `github`にリポジトリを作成

```
git init
git add .
git commit -m 'init'
git remote add origin https://github.com/xxxxxxx/xxxxxx.git
git push -u origin master
```

- `git`に`push`した後は、`Settings`をクリック
- `GitHub Pages`の`Source`を`master branch`にして`save`

これで、`GitHub Pages`に公開されます。

公開されたURLは、

`https://<ユーザー名>.github.io/<リポジトリ名>/dist/`

になります。


### LIFFの設定

まずは LIFF npm パッケージをインストールします。

```
npm install -g liff
```

`liff init`で初期化します。上記で取得したチャネルのアクセストークンを入れます。

```
liff init <アクセストークン>
```

LIFF アプリケーションの登録します。今回は`tall`を指定します。

```
liff add https://<ユーザー名>.github.io/<リポジトリ名>/dist/ tall
```

戻り値から LIFF ID および Accessible URL をコピーしておきます。

```
[LIFF ID] xxxxxxxxxxxxxxx created
accessible uri : line://app/xxxxxxxxxxxxxxxx
```

`liff send` コマンドでリンクを送付します。LINE アプリよりリンクをクリックしてテスト。上記で取得した`LIFF ID`と`Your user ID`を入れます。

```
liff send <LIFF ID> <Your user ID>
```

BOTより送られたリンクを確認して、フォームから送信を押してメッセージが表示されれば完了です！

## ブラッシュアップ

リンクのクリックから起動させるのではなく、BOTのリッチメニューかLIFFを起動させると、より良いでしょう。

リッチメニューの実装は以下を参考にしてください。

[https://developers.line.me/ja/docs/messaging-api/using-rich-menus/](https://developers.line.me/ja/docs/messaging-api/using-rich-menus/)

- [LINE@マネージャー](https://admin-official.line.me/)からログインして作成したBOTを選択します。

- リッチメニューより、メニューを作成します。
- `コンテンツ設定`の`リンク`を上記で取得した`Accessible URL`に設定します。

これでメニューからLIFFを起動させることができます。

![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/83008/c1d84e83-80ef-771e-e324-164ce545cb4a.jpeg)

![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/83008/8f6febaa-dcda-378b-facc-6d18ccbaf0c9.jpeg)


## まとめ

LIFFが起動すると結構感動しますね（笑）

Vue内部でLIFFの設定を行いたかったのですが、なかなかうまくできず断念しました。
[@line/bot-sdk](https://www.npmjs.com/package/@line/bot-sdk)を利用すればできたのかもしれません･･･。

次はバックエンドのGAS(Google Apps Script)の設定になります。

- [Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた（その３：GAS編）](https://qiita.com/korsmic/items/3615e3a59cb87c6e620d)