# LIFFアプリを開発する(v1)
LIFF v1をお使いの場合は、必ずLIFF v2への移行を行なってください。 LIFF v2への移行について詳しくは、2021年4月5日のニュースの「LIFF v2に移行する」を参照してください。
また、2021年10月1日以降、LIFF v1に関連するドキュメントは予告なく削除され、アクセスできなくなります。
ここでは、LIFFアプリとしてデプロイするウェブアプリに必要な、LIFF特有の処理について説明します。
チャネルにLIFFアプリを追加する操作や、LIFFアプリの開きかたは、LIFF v2の場合と同様です。
# LIFFアプリのタイトルを設定する
ウェブアプリのHTMLソースの<title>
要素に、LIFFアプリの名前を指定します。この名前はLIFFアプリのタイトルバーに表示されます。
<title>My LIFF app</title>
# LIFF SDKを組み込む
LIFF SDKは主に以下の機能を提供します。
- LIFFアプリの初期化。
- LINEとのインターフェイス。SDKに組み込まれたクライアントAPIを使って、LIFFブラウザや外部ブラウザで任意のURLを開いたり、LIFFアプリを閉じたりできます。
詳しくは、「LIFF APIを呼び出す」を参照してください。
ウェブアプリのHTMLソースの<script>
要素に、LIFF SDKのURL https://d.line-scdn.net/liff/1.0/sdk.js
を指定します。
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
Promiseポリフィルをウェブアプリに手動で追加する必要はありません。Promiseをサポートしない環境には、LIFF SDKによって自動的にcore-jsのPromiseポリフィル (opens new window)が追加されます。
# LIFF APIを呼び出す
LIFFアプリでは、LIFF SDKを介して以下の操作を実行できます。
# LIFFアプリを初期化する
liff.init()
メソッドを実行して、LIFFアプリで各種APIを呼び出すために必要な情報を取得します。
liff.init(
data => {
// Now you can call LIFF API
const userId = data.context.userId;
},
err => {
// LIFF initialization failed
}
);
詳しくは、『LIFF v1 APIリファレンス』の「liff.init()」を参照してください。
# URLを開く
liff.openWindow()
メソッドを実行して、指定したURLをLINE内ブラウザまたは外部ブラウザで開きます。
以下のコードはhttps://example.com
を外部ブラウザで開きます。
liff.openWindow({
url:'https://example.com',
external:true
});
詳しくは、『LIFF v1 APIリファレンス』の「liff.openWindow()」を参照してください。
LIFFアプリからPDFを開くには、LIFFアプリのHTMLソースに<a>
要素を追加し、href
属性に対象のPDFのパスを指定します。
<a href="/path/to/your.pdf">Open a PDF</a>
リンクをクリックすると、LINE内ブラウザまたは外部ブラウザで対象のPDFが開きます。
別タブで表示する場合は、target="_blank"
を追加します。
<a href="/path/to/your.pdf" target="_blank">Open a PDF in another tab</a>
# ユーザーのプロフィールを取得する
LIFFアプリでユーザーのプロフィールを取得する方法は2つあります。 目的に合わせて正しく使い分けてください。
# サーバーに送信するために取得する
LIFFアプリからサーバーにユーザー情報を送信する場合は、以下の方法で取得したアクセストークンを送信します。 サーバーでユーザー情報を使用する方法について詳しくは、「アクセストークンを送信してユーザー情報を取得する」を参照してください。
liff.getAccessToken()
メソッドを実行して、現在のユーザーのアクセストークンを取得します。
const accessToken = liff.getAccessToken();
詳しくは、『LIFF v1 APIリファレンス』の「liff.getAccessToken()」を参照してください。
# LIFFアプリで使用するために取得する
liff.getProfile()
メソッドを実行して、現在のユーザーのプロフィールを取得します。
liff.getProfile()
で取得したユーザー情報をサーバーに送信しないでください。
代わりに、liff.getAccessToken()
で取得したアクセストークンを送信します。
liff.getProfile()
.then(profile => {
const name = profile.displayName
})
.catch((err) => {
console.log('error', err);
});
詳しくは、『LIFF v1 APIリファレンス』の「liff.getProfile()」を参照してください。
# 現在のトーク画面にメッセージを送信する
liff.sendMessages()
メソッドを実行して、ユーザーの代わりに、LIFFアプリが開かれているトーク画面にメッセージを送信します。この機能は1対1のトークルームから起動したLIFFアプリでのみ利用できます。1回のリクエストでメッセージオブジェクトを最大5つまで送信できます。
LIFFアプリからはMessaging APIの以下のタイプのメッセージを送信できます。
- テキストメッセージ
- 画像メッセージ
- 動画メッセージ
- 音声メッセージ
- 位置情報メッセージ
- テンプレートメッセージ。ただし、設定できるアクションはURIアクションのみです。
- Flex Message。ただし、設定できるアクションはURIアクションのみです。
メッセージタイプについて詳しくは、『Messaging APIリファレンス』の「メッセージオブジェクト」を参照してください。
LINE公式アカウント(ボット)が参加しているトークルームでメッセージが送信されると、LINEプラットフォームからボットサーバーにWebhookイベントが送信されます。liff.sendMessages()
メソッドで画像、動画、および音声のメッセージが送信されると、その際に送信されるWebhookイベントのcontentProvider.type
プロパティの値はexternal
になります。詳しくは、『Messaging APIリファレンス』の「メッセージイベント」を参照してください。
以下のコードは、LIFFアプリが表示されているトーク画面に、ユーザーのメッセージとして「Hello, World!」を送信します。
liff.sendMessages([
{
type:'text',
text:'Hello, World!'
}
])
.then(() => {
console.log('message sent');
})
.catch((err) => {
console.log('error', err);
});
詳しくは、『LIFF v1 APIリファレンス』の「liff.sendMessages()」を参照してください。
# LIFFアプリを閉じる
liff.closeWindow()
メソッドを実行して、開いているLIFFアプリを閉じます。
liff.closeWindow();
詳しくは、『LIFF v1 APIリファレンス』の「liff.closeWindow()」を参照してください。