LIFFアプリの構築
続いて、リッチメニューから起動されるLIFFアプリの作成をしていきます。作成するLIFFアプリは、図7のようなできることを簡単に確認するための、ごくシンプルなアプリとしています。
LIFFアプリの登録
まずWebアプリをLIFFアプリとして動作させるためにはLINE DevelopersコンソールからURLを登録します。LIFFアプリは[Messaging API]チャネルから起動しますが、登録は[LINEログイン]チャネルから行います（図8）。
この画面では表2のような項目について設定を行います。
| 項目 | 説明 |
| LIFFアプリ名 | LIFFアプリの管理名称。 |
| サイズ | Full/Tall/Compactのように表示するブラウザの縦サイズを指定します。 |
| エンドポイントURL | 作成したWebアプリのURLを指定します。 |
| Scope | 利用するLIFF APIの機能でのスコープを指定します。今回のサンプルではprofileとchat_messge.writeを利用します。 |
| ボットリンク機能 | LIFFアプリを初めて利用する際に表示される同意画面において[ともだち登録]への追加オプション方法を指定します。 |
| Scan QR | LIFF APIでQRコードリーダー機能の利用可否を指定します。 |
また、登録が完了すると、図9のようなLIFFアプリの登録一覧が表示されます。
ここで表示される（1）LIFF IDはLIFFアプリ内で利用されるLIFF APIを利用する際に使われる情報です。そして、（2）のURLが前述したリッチメニューなどからLIFFアプリを起動する際に利用するURLになります。このURLを指定することで、指定したサイズでLIFFアプリが起動します。
LIFF SDKの組込み
LIFFアプリ上でAPIを使うためにLIFF SDKを組み込むには、CDN上で公開されているJavaScriptファイルを組み込むかnpmパッケージを使った方法がサポートされています。
本サンプルでは、CDNで公開されているJavaScriptファイルを組み込む方法を紹介します。npmを使った開発の場合にはリファレンスを参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
: (省略)
初期化処理
LIFF APIを利用するには、あらかじめリスト2のように初期化処理を済ませておく必要があります。
LIFF APIの初期化処理（js/main.jsの抜粋）
liff.init({
// (1) LIFF IDを設定
liffId: '1657861391-xxxxxxxx',
// withLoginOnExternalBrowser: true,
}).then(() => {
// (2) ここに成功の処理を記述
: (省略)
}).catch((err) => {
// (3) ここに失敗の処理を記述
: (省略)
});
初期化処理はliff.initメソッドで行い、（1）のように、LIFFアプリを登録したときに発行されたLIFF IDを指定します。
withLoginOnExternalBrowserオプションを有効にすることで、LIFFアプリとして起動したブラウザではなく、外部ブラウザとして起動する際に自動的にログイン処理まで実行されます。筆者は開発時にPCでのブラウザを使って動作を確認する際などに、よくこのオプション指定を利用しています。
また、メソッドは非同期に実行され、Promiseのthenで（2）のように成功処理を記述し、失敗した場合の処理は（3）のようにcatchで記述します。SPAアプリで構築している場合で、起動後にURLを書き換える場合には、この初期化処理が正常に終了したあとで行うようにしてください。つまり、利用しているJavaScriptフレームワークの初期化処理なども、（2）の箇所で行うべきです。
プロフィール情報を取得する
LINEログインと同様に利用者のプロフィール情報を取得するには、リスト3のようにliff.getProfileメソッドを利用します。
liff.getProfile().then((profile) => {
app.profile = profile;
});
このメソッドで取得できるプロパティには表3があります。
| プロパティ | 説明 |
| userId | ユーザID |
| displayName | 表示名 |
| pictureUrl | 利用者のプロフィールアイコンのURL |
| statusMessage | 利用者が設定しているステータスメッセージ |
メッセージを送信する
LIFFアプリからメッセージを送信するAPIにはsendMessagesとshareTargetPickerという2つのAPIがあります。この2つのAPIは使い方こそ似ていますが、送り先と用途がまったく異なります。その違いを示したのが図10です。
sendMessagesは、指定したメッセージをチャネルに対して送信します。つまり、サービスを運営している側や、Messaging APIなどを使っている場合には受信サーバに対してメッセージを送信します。
一方、shareTargetPickerは、友だち登録しているチャネル利用者を通じて、その利用者の友だちリスト上にいるユーザに対してメッセージを送信します。
例えば、友だち紹介キャンペーンなどを行い、紹介した人に対してポイントを付与したい場合があります。その場合、まだ、友だち登録していないユーザーに対してメッセージの送信はできません。そこで、友だち登録している利用者を通じて、メッセージを転送してもらうイメージです。この際、紹介した利用者を把握するため、紹介コードなどを埋め込んだメッセージやURLなどの情報を送るなどの利用が可能です。
sendMessagesを利用するにはscopeにてchat_message.writeを有効になっている必要があり、shareTargetPickerを利用するには、LIFFアプリ一覧に表示されている［シェアターゲットピッカー］のスイッチをONにする必要があります。また、これらを有効にしていても外部ブラウザ上でアプリを動作させている場合には、利用できないので注意してください。
// (1) メッセージを送信する
liff.sendMessages([{
type: "text",
text: "こんにちは",
}]).then(() => {
that.message = 'メッセージ送信に成功しました';
// : 省略
}).catch((err) => {
that.message = 'メッセージ送信に失敗しました(' + err.toString() + ')';
}).finally(() => {
// : 省略
});
// (2) 他のユーザへの送信
liff.shareTargetPicker([{
type: "text",
text: "こんにちは",
}]).then(() => {
that.message = 'メッセージ送信に成功しました';
// : 省略
}).catch((err) => {
that.message = 'メッセージ送信に失敗しました(' + err.toString() + ')';
}).finally(() => {
// : 省略
});
（1）でメッセージをチャネルへ指定したメッセージを送信します。
（2）では、実行するとLIFFアプリからLINEの友だち選択画面が表示されるので、そこで宛先を利用者が指定します。受信したユーザからは、利用者が送信したように表示されますので、知り合いからのメッセージという見え方になります。
アプリを閉じる
一連の操作が終わり、自動的にアプリを閉じたい場合があります。特に前述したメッセージ送信APIなどを使っている場合には、画面を閉じないと利用者には何をしたのかがわかりにくいことがあります。そのような場合に、APIを通じてアプリを閉じる場合のコード例がリスト5です。
liff.closeWindow();
最後に
これまで4回の連載を通じて駆け足な内容でしたが、LINEアプリの作り方について紹介してきました。筆者はLINE開発を始めた当初はLINEアプリの全体像がつかめず、リファレンスの説明を読んでもその内容がよくイメージできませんでした。そこで、細かい説明などは省き、できるだけ、LINEアプリを構築する際の雰囲気や流れについて感じてもらえたらと思い記述してきました。
LINEアプリの良し悪しは、送受信するメッセージをどれだけ工夫し、また、使いこなせるかという点が大きいと思いますが、本連載ではその部分は紹介していません。足りない部分は、リファレンスなどを参照しながら、いろいろと試行錯誤しつつ、組み込んでいってもらえればと思います。
