2021.05.18

Salesforce上で、LINEのWebアプリを作成してみよう

H.M

はじめに

はじめまして、こんにちは。
テラスカイの宮崎と申します。

今まで、このブログの中でも、LINE公式アカウントの機能や活用方法などについての記事が
投稿されていますが、今回は「LIFF」という、LINEのプラットフォームを利用して、LINEと連動したWebページの作成手順について、記載します。

LIFFとは？

LIFF（LINE Front-end Framework）とは、LINEのユーザ情報 (IDやアイコン、表示名など) をWebサイト上で取得できる仕組みです。
あらかじめ、LINEの公式アカウント側に設定が必要ですが、Webサイトのスクリプトから専用のSDK経由で、LINEのユーザプロフィールを取得できます。

利用例としては、
LINEのIDを用いて本人特定を行い、店舗の会員証を表示する
収集したLINEのIDを対象に、プッシュ通知を行う
アイコンと名前を使って、イベント出欠ページなどを作る
など、これまでモバイルアプリで実現してきた機能が、Webサイト上で実現できるようになります。

Salesforce上で、LIFFアプリを作成してみよう

ここからは、Salesforceのサイト機能を使って、実際にLIFFアプリを作成する手順を紹介します。
あらかじめ、LINEの公式アカウントを作成しておく必要がありますので、「【初心者向け】LINE公式アカウントの機能や注意点、活用方法まとめ」の記事を参考に、アカウントを作成しておいてください。

1. プロバイダーとチャネルの作成

LIFFなど、公式アカウントと連携したサービス開発を行うには、チャネルとプロバイダーの作成が必要です。
チャネルは、公式アカウントと連携するための通信路を指します。
プロバイダーは、チャネルを管理する組織情報です。

下図のように、公式アカウントの管理画面から「設定」⇒「Messaging API」⇒「Messaging APIを利用する」のボタンを押下します。

プロバイダー選択画面が表示されますので、新規でプロバイダーを作成するか、既存のプロバイダーを選択します。

プロバイダーと、チャネル(Messaging APIチャネル)が作成されます。
以降は、LINE Developer Console にログインして操作します。
LINE Developer Console上で、LIFFを呼び出すためのチャネルを作成します。
チャネルには、いくつか種類がありますが、LIFFを呼び出すには、「ログインチャネル」を作成します。

入力画面に従って、チャネル情報を入力します。
「アプリタイプ」を選択する欄では、「ウェブアプリ」を選択してください。
チャネルを作成したら、次にLIFFアプリの登録を行います。
チャネルのメニューから「LIFF」を選択して、「追加」ボタンを押します。

入力画面に沿って、LIFFアプリの情報を入力します。

サイズ：
LINEからLIFFアプリを開くときのサイズです。　こちらを参考にしてください。

エンドポイントURL：
LIFFアプリとして呼び出すサイトのURLです。現時点では、まだサイトは作成していないので、httpsで始まる任意のURLを入力してください。(後で変更します)

スコープ：
LIFFで参照するLINEの情報を指定します。LINEのプロフィール画像や、名前などを取得する場合は「profile」を選択してください。

ボットリンク機能：
はじめてLIFFを開くときに、「LINE公式アカウントを友だち追加するオプションを表示するか」を選択します。よくわからない場合は、On(Normal)を選択してください。
LIFFを登録すると、"123456-abcd" のような、LIFFのIDが発行されます。
このIDは、LIFFのSDK利用時 (後述) に必要なので、メモしておきます。

2. LIFFアプリとなるVisualforceページの作成とサイトでの公開

いったん、LINEのコンソールから離れて、今度はLIFFアプリの本体となるVisualforceページを作成します。
Visualforceページを作成したら、LIFFのSDKを、header部分でCDN指定して読み込みます。
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
XXX.page
liff.init() で、LIFFの初期化を行います。
初期化が完了したら、liff.getProfile() で、LINEのプロフィール情報が取得できます。

📌ポイント
liff.init() を実行する際に、LIFFのIDが必要です。カスタムラベルなどに定義しておくのがよいと思います。
LIFFのAPIは、こちらを参照してください

 let userId= null;
 let displayName= null;
 let pictureUrl = null;
 let statusMessage = null;

 window.onload = function () {
                liff
                    .init({
                        liffId: "{!$Label.LiffID}" 
                    })
                    .then(() => {
                        getProfile();
                    })
                    .catch((err) => {
                        alert("liff init error : " + err);
                    });
            }

            getProfile = function () {
                liff.getProfile()
                    .then(profile => {
                        userId= profile.userId;
                        displayName= profile.displayName;
                        pictureUrl = profile.pictureUrl;
                        statusMessage = profile.statusMessage;                   
                    })
                    .catch((err) => {
                        alert("liff getProfile error : " + err);
                    });
            }
XXX.page
プロフィールから取得できる情報は、下記のものです。

ユーザID(userId)
LINEのアプリで表示されるIDとは異なります。プロバイダーごとに発行されるUで始まる33桁の文字列です。
このIDを用いて、LINEのAPI経由でメッセージを送ることができます。

表示名(displayName)
LINEアプリ利用時に表示されるユーザ名です。

画像URL(pictureUrl)
LINEアプリ利用時に表示されるアイコン画像のURLです。

ステータスメッセージ(statusMessage)
LINEアプリ利用時に表示されるステータスメッセージです

今回は、取得したプロフィール情報を、画面に出すところまで、とします。
最終的なVisualforceのソースコードは、下記のようになります。
<apex:page cache="false" showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
    <head lang="ja">
        <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
        <style>
            .info{
                font-size : 32px;
            }
        </style>
    </head>
    <body>
        <p class="info">UserId：<span id="userId"></span></p>
        <p class="info">DisplayName：<span id="displayName"></span></p>
        <p class="info">StatusMessage：<span id="statusMessage"></span></p>        
        <img src="" id="picture" width="200" height="200"></img>
        <script>
 let userId= null;
 let displayName= null;
 let pictureUrl = null;
 let statusMessage = null;

 window.onload = function () {
                liff
                    .init({
                        liffId: "{!$Label.LiffID}" 
                    })
                    .then(() => {
                        getProfile();
                    })
                    .catch((err) => {
                        alert("liff init error : " + err);
                    });
            }

            getProfile = function () {
                liff.getProfile()
                    .then(profile => {
                        userId= profile.userId;
                        displayName= profile.displayName;
                        pictureUrl = profile.pictureUrl;
                        statusMessage = profile.statusMessage;
                        
                        document.getElementById("userId").innerHTML = userId;
                        document.getElementById("displayName").innerHTML = displayName;
                        document.getElementById("statusMessage").innerHTML = statusMessage;
                        document.getElementById("picture").src = pictureUrl;
                    })
                    .catch((err) => {
                        alert("liff getProfile error : " + err);
                    });
            }        
        </script>    
    </body>
</apex:page>
XXX.page
Visualforceのページを作成したら、サイトに登録します。

サイトに登録したら、「LINE Developer Console」⇒「ログインチャネル」⇒「LIFFの設定画面」に戻りサイトURLをLIFFのエンドポイントURLに指定します。

📌ポイント
LIFFのエンドポイントに指定するURLは、httpsで登録する必要があります。サイトURLを転記する際には、httpsで登録しましょう。

LIFFを呼び出すためには、LINEログインチャネルを「公開」する必要があります。
忘れがちなので、注意が必要です。

3. LIFFアプリの呼び出し

では、作成したLIFFアプリを呼び出してみましょう。
LINEのアプリから、LIFFアプリのURLを開くのですが、ここではリッチメニューから呼び出してみます。
公式アカウントの管理画面のメニューから「ホーム」⇒「リッチメニュー」を選択します。

リッチメニューの設定を入力していきます。タイトルや表示期間などを入力したら、「コンテンツ作成」の「テンプレートを選択」ボタンを押し、リッチメニューのテンプレートを選択します。

テンプレートを選択した後、メニューに表示する画像を設定します。
通常は、メニュー用に作成した画像をアップロードして設定しますが、テキスト入力も可能です。
今回は「LIFF起動」というテキストを指定しようと思うので、画像設定画面の「T」を選択して、テキストを入力してください。

「アクション」欄に、LIFFのURLを指定して、リッチメニューの完成です。

4. 動作確認

LINE公式アカウントのトークルームに、リッチメニューが追加されていますので、そこからLIFFを呼び出します。
下図のように、「ID」「表示名」「ステータスメッセージ」「アイコン画像」が表示されていればOKです。

おわりに

簡単ではありますが、LIFFの開発方法について、まとめてみました。
LIFFを使えば、LINEと連携したユーザ認証や、メッセージのpush通知など、これまでモバイルアプリで行っていたことが、Webアプリでできるようになります。

LINE公式アカウントの利用とともに、これからLIFFの活用も広がってくると思いますので、この記事を参考に、LIFFに触れてみてください。
52 件
    　
  • banner
  • banner

関連する記事

関連するキーワード