LIFFアプリを開発する

ここでは、LIFFアプリとしてデプロイするウェブアプリに必要な、LIFF特有の処理について説明します。

LIFFアプリのタイトルを設定する

ウェブアプリのHTMLソースの<title>要素に、LIFFアプリの名前を指定します。この名前はLIFFアプリのタイトルバーに表示されます。

<title>My LIFF app</title>

LIFF SDKを組み込む

LIFF SDKは主に以下の機能を提供します。

  • LIFFアプリの初期化。
  • LINEとのインターフェイス。SDKに組み込まれたクライアントAPIを使って、LINE内のブラウザや外部ブラウザで任意の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ポリフィルが追加されます。

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 APIリファレンス』の「liff.init()」を参照してください。

URLを開く

liff.openWindow()メソッドを実行して、指定したURLをLINE内ブラウザまたは外部ブラウザで開きます。

以下のコードはhttps://example.comを外部ブラウザで開きます。

liff.openWindow({
  url:'https://example.com',
  external:true
});

詳しくは、『LIFF APIリファレンス』の「liff.openWindow()」を参照してください。

ユーザーのアクセストークンを取得する

liff.getAccessToken()メソッドを実行して、現在のユーザーのアクセストークンを取得します。

const accessToken = liff.getAccessToken();

アクセストークンを使ってSocial APIにリクエストを送信できます。まず、アクセストークンをヘッダーに含めたHTTP POSTリクエストをLIFFアプリのサーバーに送信して、LIFFアプリのサーバーでアクセストークンを利用できるようにします。その後は、以下のリクエストを送信できます。

  • GET https://api.line.me/oauth2/v2.1/verify:アクセストークンのチャネルIDを返します。このチャネルIDを確認して、有効なLIFFアプリからアクセストークンが送信されたことを検証できます。詳しくは、『Social APIリファレンス』の「アクセストークンを検証する」を参照してください。

  • GET https://api.line.me/v2/profile:ユーザーID、表示名、プロフィール画像、およびステータスメッセージを返します。詳しくは、『Social APIリファレンス』の「ユーザープロフィールを取得する」を参照してください。同様の操作をLIFFアプリから実行するには、LIFF SDKのliff.getProfile()メソッドを呼び出します。

liff.getAccessToken()メソッドについて詳しくは、『LIFF APIリファレンス』の「liff.getAccessToken()」を参照してください。

ユーザーのプロフィールを取得する

liff.getProfile()メソッドを実行して、現在のユーザーのプロフィールを取得します。

liff.getProfile()
.then(profile => {
  const name = profile.displayName
})
.catch((err) => {
  console.log('error', err);
});

詳しくは、『LIFF APIリファレンス』の「liff.getProfile()」を参照してください。

ユーザーの代わりにメッセージを送信する

liff.sendMessages()メソッドを実行して、ユーザーの代わりに、LIFFアプリが開かれているトーク画面にメッセージを送信します。1つのリクエストでメッセージオブジェクトを最大5つまで送ることができます。

LIFFアプリからはMessaging APIの以下のタイプのメッセージを送信できます。

メッセージタイプについて詳しくは、『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 APIリファレンス』の「liff.sendMessages()」を参照してください。

LIFFアプリを閉じる

liff.closeWindow()メソッドを実行して、開いているLIFFアプリを閉じます。

liff.closeWindow();

詳しくは、『LIFF APIリファレンス』の「liff.closeWindow()」を参照してください。

次のステップ

ここまで、LIFFアプリとしてデプロイするウェブアプリに必要な、LIFF特有の処理について説明しました。LIFFにアプリを追加してLINE内で開けるようにするには、以下のトピックを参照してください。

{{ $t("form.question.helpful") }}

{{ $t("form.question.detail") }}

{{ $t("form.question.improve") }}

{{ $t("form.info.start") }}{{ $t("form.info.link") }}{{ $t("form.info.end") }}


{{ $t("form.result.success") }}
{{ $t("form.result.error") }}
{{ $t("form.result.errorLink") }}