【LINE】既存LIFFアプリにShareTargetPickerを導入する

はじめに

既存のLIFFアプリにShareTargetPickerを導入する方法を説明します。
GitHubはこちら。

ShareTargetPickerとは？

以下が参考になります。
Share Target Pickerがリリースされ、LIFFアプリからのメッセージ送信が大幅に強化されました。

Share Target Pickerとは、LIFFから送信先を選んでメッセージを送信することが出来る機能です。
これにより、
・トークルームやグループから開かれなかった場合でも、メッセージを送信できる
・LIFFアプリをLINE上で開いた場合だけではなく、ブラウザから開いた場合もメッセージを送信できる
・自分以外の友だちや自分が入っていないグループにもメッセージを送信させることができる
といったことが可能になります。

サンプル

https://yagi-eng.github.io/liff-reservation-githubpages/
送信ボタンをクリックするとLINEの友だち選択画面が表示され、テキストの送信先を選択できます。

導入

LINE Developersの変更

シェアターゲットピッカーをオンにします。

実装

以下のQiita記事で作成したLIFFアプリにShareTargetPickerを導入します。
【LIFF入門？】LIFFでLINE Offical Account（旧LINE＠）上に予約フォームを作成する

以下のようにliff.jsを修正します。
gitのdiffは こちら です。
diffの方が何を追記すれば良いかわかりやすいかも。

liff.js

$(document).ready(function () {
    var liffId = "（自分のLiffIdを入力）";
    initializeLiff(liffId);
})

function initializeLiff(liffId) {
    liff
        .init({
            liffId: liffId
        })
        .then(() => {
            if (!liff.isInClient() && !liff.isLoggedIn()) {
                window.alert("LINEアカウントにログインしてください。");
                liff.login();
            }
        })
        .catch((err) => {
            console.log('LIFF Initialization failed ', err);
        });
}

function sendMessage(text) {
    if (liff.isInClient()) {
        sendMessages(text);
    } else {
        shareTargetPicker(text);
    }
}

function sendMessages(text) {
    liff.sendMessages([{
        'type': 'text',
        'text': text
    }]).then(function () {
        liff.closeWindow();
    }).catch(function (error) {
        window.alert('Failed to send message ' + error);
    });
}

function shareTargetPicker(text) {
    liff.shareTargetPicker([{
        'type': 'text',
        'text': text
    }]).catch(function (error) {
        window.alert('Failed to send message ' + error);
    });
}

LINEトークから開いた場合は sendMessages を使ってそのトーク上にメッセージが送信されるように、LINEトーク以外から開いた場合は shareTargetPicker を実行するようにしました。
こうすることで、既存機能に影響なく導入することができます。

感想

LINE上で動作するものを作るの楽しいです。
これで仕事取れるようになるといいな。。