LIFF（LINE Front-end Framework ）v2 を使ってPleasanterのレコード更新をLINEのトーク画面に通知する #LINE

はじめに

本記事は　Pleasanter Advent Calendar 2019 23日目の投稿です。

今回はLIFF（LINE Front-end Framework ）v2 を使ったPleasanterとLINEとの連携についてお話します。

Pleasanterとは

プリザンターは、国産オープンソースのWebデータベースです。株式会社インプリムが独自に開発しております。
業務アプリに特化した汎用プラットフォームなので、顧客管理・生産管理・資産管理・ナレッジ共有など、様々な業務アプリをマウス操作だけで素早く作成できるので開発工数を大幅に削減できます。

無料なのにユーザ数制限無し機能制限無し使用期間制限無しで、ずっと自由に使える！

簡単なマウス操作だけで欲しかった業務アプリが作れる！

エクセルを使った業務の不便さをWebアプリ化することで解消！

簡単に使えるだけでなくスクリプトやスタイルに対応しているので拡張性も抜群！

LIFFとは

LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。
LIFFアプリを使うと、LINEのユーザーIDなどをLINEプラットフォームから取得できます。LIFFアプリではこれらを利用して、ユーザー情報を活用した機能を提供したり、ユーザーの代わりにメッセージを送信したりできます。

LINE Front-end Framework: LINE Developers

作ったもの

Pleasanterのレコード更新をLINEのトーク画面に通知する機能を、LIFFのメッセージ送信機能を使って実現してみました。

元々、Pleasanterには標準でレコードの作成・更新を通知する機能があり、LINEへの通知にも対応はしていました。ただ、これは送信件数に制限のあるLINE Messaging APIのプッシュメッセージを利用するもので、利用する際の設定も面倒なものでした。

Pleasanterには任意のページに対しJavaScriptのコードを追加できる「スクリプト」の機能があります。これを利用して特定のページにLIFFを組み込みんで、更新通知のようなものが作れないか？という試みです。

タスク管理テーブル

まず、サンプルとしてPleasanterで、以下の項目を持つ簡単なタスク管理テーブルを作成します。

タイトル
内容
担当者
期限 (年月日)
状況 (未着手、準備、実施中、レビュー、完了、保留)

タスク管理テーブルのLIFFアプリ化

タスク管理テーブルのページをLIFFアプリとして動作するように「スクリプト」を設定します。
スクリプトでは、以下のタイミングで更新内容をLINEのトーク画面に送信するようにします。

新規作成画面でレコードが「作成」されたタイミング
編集画面でレコードが「更新」されたタイミング

このLIFFアプリをLINEのグループで開き、レコードの更新することでグループのメンバー全員に更新の通知できるようになります。

設定手順

1. タスク管理テーブルの作成

Pleasanterでタスク管理テーブルを作成します。

2. タスク管理テーブルの一覧画面をLIFFアプリとして登録

LIFFアプリ用チャネルを作成

LINE Developers　でLIFF用のチャネルを作成します。（LINE Loginのチャネルを作成）

チャネルの作成方法は以下を参照してください。

作成したチャネルにLIFFを登録

作成したチャネルの設定画面の「LIFF」タブでLIFFを作成します。
その際、Pleasanterで作成したタスク管理テーブルの一覧画面のURLを「エンドポイントURL」に設定します。

※ 実際にLIFFでメッセージを送信するのは「新規作成」画面と「編集」画面なのですが、「編集」画面はレコード毎にURLが変わってしまうのでLIFFのエンドポイントとしては使えません。ですので一旦「一覧」画面でLIFFを初期化後、各画面に遷移する方式とします。

3. スクリプトの作成

一覧画面のスクリプト

LIFFのエンドポイントに設定した一覧画面のスクリプトを作成します。

ここでは、LIFFの初期化処理のみ行います。

(function () {
    var script = document.createElement('script');
    script.src = 'https://static.line-scdn.net/liff/edge/2.1/sdk.js';
    document.body.appendChild(script);
    script.onload = function () {
        liff.init({ liffId: '1653673218-gzZXNLBZ' });
    };
})();

Html Body にLIFF SDKのURLを指定したscriptタグを埋め込みます
スクリプトのonloadイベントでliff.init()を実行し、LIFFの初期化を行います
liff.init()の引数liffIdにはLIFF URL（line://app/xxxxxxxx）のxxxxxxxxの部分を指定します

「新規作成」「編集」画面のスクリプト

「新規作成」と「編集」の画面用のスクリプトは共通のものを使用します

(function () {
    var script = document.createElement('script');
    script.src = 'https://static.line-scdn.net/liff/edge/2.1/sdk.js';
    document.body.appendChild(script);
    script.onload = function () {
        liff
            .init({ liffId: '1653673218-gzZXNLBZ' })
            .then(() => {
                $p.events.after_set_Update = function(){
                    sendToLINE('更新');
                }
                $p.events.before_send_Create = function(){
                    sendToLINE('作成');
                }
            });
    };

    //メッセージ送信処理
    function sendToLINE(type){
        //LINEアプリ内からの起動したときのみ実施
        if(liff===undefined || !liff.isInClient() || !liff.isLoggedIn()){
            return;
        }
        //画面のFormコントロールから設定値を取得し、メッセージを作成
        const title = $p.getControl('タイトル').val();
        const content = $p.getControl('内容').val();
        const limit = $p.getControl('期限').val();
        const assigned = $('#Issues_Owner option:selected').text();
        const status = $('#Issues_Status option:selected').text();

        const message =`タスク「${title}」が${type}されました。
- 状況: ${status}
- 期限: ${limit}
- 担当者: ${assigned}
【内容】
${content}

line://app/1653673218-gzZXNLBZ`;

        //LINEトーク画面にメッセージを送信
        liff.sendMessages([
            {
                'type':'text',
                'text': message
            }
        ]).catch(function(error){ window.alert('Error sending message:' + error)});
    }
})();

「一覧」画面と同様にLIFFの初期化処理を行います
「作成」または「更新」時のFormの内容をLINEのトーク画面に送信する処理（sendToLine()関数）を実装します
「作成」または「更新」時にsendToLine()関数が実行されるようにイベントハンドラを設定します
「作成」または「更新」時のイベントは、Pleasanter独自のイベントオブジェクト $p.events で登録を行います。
（※「更新」時は、サーバ側から更新完了のレスポンスを受け取った後で発生するイベント$p.events.after_set_Update を使用していますが、
「作成」時は、サーバー側でレコード作成実施後は別画面（作成したレコードの編集画面）へリダイレクトされてしまうため、リクエスト送信前のイベント$p.events.before_send_Create　を使用しています。）