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

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

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

githubはこちら

BOTの設定

参考

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

• LINE の LIFF 開発超入門 : LIFF SDK を使った Web アプリの開発
• LINE Bot : LINE Front-end Framework を liff npm パッケージで操作

設定

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編）

コードの追加

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

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

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

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です。

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/

• LINE@マネージャーからログインして作成したBOTを選択します。

• リッチメニューより、メニューを作成します。

• コンテンツ設定のリンクを上記で取得したAccessible URLに設定します。

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

まとめ

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

Vue内部でLIFFの設定を行いたかったのですが、なかなかうまくできず断念しました。
@line/bot-sdkを利用すればできたのかもしれません･･･。

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

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