日本語

# 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()」を参照してください。

PDFを開く

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回のリクエストでメッセージオブジェクトを最大5つまで送信できます。トーク画面以外でLIFFアプリが開かれた場合は、メッセージは送信できません。

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

# LIFFアプリを閉じる

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

liff.closeWindow();

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