はじめてのLIFF #LINE_API

チャットボット特集

#LIFF

#LINE Bot

#LINE

にゃー

2019.01.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、中村です。すっかりご無沙汰でしたがLINE関連のブログです。昨年数多くのアップデートがLINE API周りでありましたが、中でもLIFFは大きい部類に入るのではないでしょうか。今回は、入門編としてLINE Front-end Framework（LIFF）を使ってみたいと思います。

はじめに

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

LIFFを実装してみる

LIFFを利用するためには、LIFFアプリを作成しチャネルに登録します。

登録したいチャネルのLIFFタブでLIFFアプリを作成をクリック。

名前・サイズ・エンドポイントURL・BLE featureを入力し保存するをクリック。（今回は、エンドポイントURLをCloudfront+S3で構築しました。）

成功すると一覧に表示されます。LIFF URLと呼ばれるURLが生成されています。このURLをユーザーがタップすることでLIFFにアクセスできます。

登録はこれで終了です。あとは、LIFFの実装をしていきましょう。

        <p id="id"></p>
        <p>メッセージを送信する</p>
        <button id="message">Hello, world!</button>
        <p>プロフィールを取得する</p>
        <button id="profile">プロフィールを取得する</button>
        <p id="userId"></p>
        <p id="displayName"></p>
        <p id="pictureUrl"></p>
        <p id="statusMessage"></p>
        <p>URLを開く</p>
        <button id="open">クラスメソッドを開く</button>
        <p>LIFFアプリを閉じる</p>
        <button id="close">閉じる</button>

        <script src="https://d.line-scdn.net/liff/1.0/sdk.js" type="text/javascript"></script>
        <script　type="text/javascript">
            const idSPace = document.getElementById('id');
            const errorSpace = document.getElementById('error');

            //liff init
            liff.init(
                data => {
                    const userId = data.context.userId;
                    idSPace.innerText = userId;
                },
                err => {
                    console.log('error', err);
                }
            );

            document.getElementById('profile').addEventListener('click', function () {
                liff.getProfile()
                .then(profile => {
                    const userIdSpace = document.getElementById('userId');
                    const displayNameSpace = document.getElementById('displayName');
                    const pictureUrlSpace = document.getElementById('pictureUrl');
                    const statusMessageSpace = document.getElementById('statusMessage');

                    userIdSpace.innerText = profile.userId;
                    displayNameSpace.innerHTML = profile.displayName;
                    pictureUrlSpace.innerHTML = profile.pictureUrl;
                    statusMessageSpace.innerHTML = profile.statusMessage;

                })
                .catch((err) => {
                    console.log('error', err);
                });
            });

            document.getElementById('open').addEventListener('click', function () {
                liff.openWindow({
                    url: 'https://classmethod.jp/'
                });
            });

            document.getElementById('close').addEventListener('click', function () {
                liff.closeWindow();
            });

            document.getElementById('message').addEventListener('click', function () {
                liff.sendMessages([
                    {
                        type:'text',
                        text:'Hello, World!'
                    }
                ])
                .then(() => {
                    console.log('message sent');
                })
                .catch((err) => {
                    console.log('error', err);
                });
            });
        </script>