# LIFFアプリを開発する

LIFFアプリを開発する手順を説明します。

# LIFFアプリを開発する

LIFFアプリは、HTMLやJavaScriptで構成されるウェブアプリです。ここでは、LIFFアプリ特有の処理について説明します。

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LIFF Starter</title>
        <link rel="stylesheet" href="style.css">

# LIFFアプリにLIFF SDKを組み込む

LIFF SDKで提供する機能を利用するには、LIFFアプリのHTMLソースの<script>要素のsrc属性に、LIFF SDKのURL https://static.line-scdn.net/liff/edge/2.1/sdk.jsを指定します。 なお、LIFF SDKはUTF-8で書かれているため、HTMLソースをUTF-8以外の文字コードで作成する場合は、charset="utf-8"をあわせて指定してください。

        <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script src="liff-starter.js"></script>
    </body>
</html>

# LIFF APIを呼び出す

LIFF SDKを組み込むと、以下の操作を実行できます。

# LIFFアプリを初期化する

liff.init()メソッドを実行すると、LIFFアプリからLIFF SDKのほかのメソッドを実行できるようになります。

liffIdに指定するLIFFアプリIDは、LIFFアプリをチャネルに追加すると取得できます。詳しくは、「LIFFアプリをチャネルに追加する」を参照してください。

/**
* Initialize LIFF
* @param {string} myLiffId The LIFF ID of the selected element
*/
function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            // start to use LIFF's api
            initializeApp();
        })
        .catch((err) => {
            document.getElementById("liffAppContent").classList.add('hidden');
            document.getElementById("liffInitErrorMessage").classList.remove('hidden');
        });
}

なお、liff.readyで、LIFFアプリ起動後、liff.init()の実行が初めて終了したときにresolveするPromiseオブジェクトを取得できます。

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

# 外部ブラウザでLINEログインを利用する場合

外部ブラウザでLINEログインを利用する場合は、以下のとおりliff.init()メソッドを2回実行します。

  1. LIFF SDKロード後に、liff.init()メソッドを実行します。

  2. liff.login()メソッドを実行し、認証ページおよび認可画面の処理が終了すると、LIFFアプリ(redirectUri)にリダイレクトされます。そこで、改めてliff.init()メソッドを実行します。

    liff.init()メソッドの処理中にエラーが発生した場合、またはログイン時にユーザーが認可をキャンセルした場合は、errorCallbackが実行されます。

フロー図

# LIFFアプリが動作している環境を取得する

liff.isInClient()メソッドやliff.getOS()メソッドを実行して、LIFFアプリが動作している環境を取得します。

/**
* Display data generated by invoking LIFF methods
*/
function displayLiffData() {
    document.getElementById('browserLanguage').textContent = liff.getLanguage();
    document.getElementById('sdkVersion').textContent = liff.getVersion();
    document.getElementById('isInClient').textContent = liff.isInClient();
    document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();
    document.getElementById('deviceOS').textContent = liff.getOS();
}

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

# LINEログインを行う

liff.login()メソッドを実行して、ウェブアプリ向けのLINEログインの処理(ウェブログイン)を行います。

注意

liff.login()は、LINE内ブラウザでは利用できません。

// login call, only when external browser is used
document.getElementById('liffLoginButton').addEventListener('click', function() {
    if (!liff.isLoggedIn()) {
        // set `redirectUri` to redirect the user to a URL other than the endpoint URL of your LIFF app.
        liff.login();
    }
});

また、liff.logout()メソッドを実行して、ログアウトすることもできます。

// logout call only when external browse
document.getElementById('liffLogoutButton').addEventListener('click', function() {
    if (liff.isLoggedIn()) {
        liff.logout();
        window.location.reload();
    }
});

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

# URLを開く

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

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

// openWindow call
document.getElementById('openWindowButton').addEventListener('click', function() {
    liff.openWindow({
        url: 'https://line.me',
        external: true
    });
});

詳しくは、『LIFF v2 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>

# QRコードリーダーを表示する

liff.scanCode()メソッドを実行して、LINEのQRコードリーダーを起動し、ユーザーが読み取った文字列を取得します。

// scanCode call
document.getElementById('scanQrCodeButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
    	if (liff.scanCode) {
	        liff.scanCode().then(result => {
	            // e.g. result = { value: "Hello LIFF app!" }
	            const stringifiedResult = JSON.stringify(result);
	            document.getElementById('scanQrField').textContent = stringifiedResult;
	            toggleQrCodeReader();
	        }).catch(err => {
	            document.getElementById('scanQrField').textContent = "scanCode failed!";
	        });
    	}
    }
});

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

iOS版LINEバージョン9.19.0以降では使用できません

技術的な問題があり、iOS版LINEバージョン9.19.0以降では、liff.scanCode()undefinedになります。サンプルコードのように、関数の存在を確認してから、使用してください。

注意

liff.scanCode()は、外部ブラウザでは利用できません。

# LIFFアプリが起動された画面を取得する

liff.getContext()メソッドを実行して、LIFFアプリが起動された画面(1対1のトーク、グループ、またはトークルーム)を一意に識別する値を取得します。

const context = liff.getContext();
console.log(context);
// {"type": "utou", "utouId": "UU29e6eb36812f484fd275d41b5af4e760926c516d8c9faa35…b1e8de8fbb6ecb263ee8724e48118565e3368d39778fe648d", "userId": "U70e153189a29f1188b045366285346bc", "viewType": "full", "accessTokenHash": "ArIXhlwQMAZyW7SDHm7L2g"}

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

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

liff.getAccessToken()メソッドを実行して、現在のユーザーのアクセストークンを取得します。このアクセストークンは、任意のサーバーからSocial APIを利用するために必要です。

// get access token
document.getElementById('getAccessToken').addEventListener('click', function() {
    if (!liff.isLoggedIn() && !liff.isInClient()) {
        alert('To get an access token, you need to be logged in. Please tap the "login" button below and try again.');
    } else {
        const accessToken = liff.getAccessToken();
        document.getElementById('accessTokenField').textContent = accessToken;
        toggleAccessToken();
    }
});

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

アクセストークンの有効性

ユーザーがLIFFアプリを閉じると、アクセストークンは無効化されます。

# アクセストークンを利用する

LIFFアプリで取得したアクセストークンを利用する方法は、以下のとおりです。

  1. LIFFアプリで取得したアクセストークンを、LIFFアプリから任意のサーバーに送信します。

  2. 任意のサーバーでアクセストークンを検証後、ユーザーの情報を取得します。

    詳しくは、以下のページを参照してください。

ユーザーの情報をLIFFアプリだけで取得する

LIFFアプリ以外のREST APIを使わなくても、ユーザーの情報を取得できます。ユーザーの情報をLIFFアプリで取得するには、liff.getDecodedIDToken()メソッドを利用します。

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

liff.getDecodedIDToken()メソッドを実行して、現在のユーザーのプロフィール情報およびメールアドレスを取得します。

liff.init(() => {
    const idToken = liff.getDecodedIDToken();
    console.log(idToken) // print decoded idToken object
});

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

# ユーザーとLINE公式アカウントの友だち関係を取得する

ユーザーと、LIFFアプリが追加されているLINEログインのチャネルにリンクされているLINE公式アカウントの友だち関係を取得します。

LINEログインのチャネルにLINE公式アカウントをリンクする方法については、『LINEログインドキュメント』の「LINE公式アカウントをLINEログインのチャネルにリンクする」を参照してください。

liff.getFriendship().then(data => {
  if (data.friendFlag) {
    // something you want to do
  }
)

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

# 現在のトーク画面にメッセージを送信する

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

以下のコードは、LIFFアプリが表示されているトーク画面に、ユーザーのメッセージとして「Hello, World!」を送信します。

// sendMessages call
document.getElementById('sendMessageButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
        liff.sendMessages([{
            'type': 'text',
            'text': "You've successfully sent a message! Hooray!"
        }]).then(function() {
            window.alert('Message sent');
        }).catch(function(error) {
            window.alert('Error sending message: ' + error);
        });
    }
});

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

注意

liff.sendMessages()は、外部ブラウザでは利用できません。

# ユーザーの友だちにメッセージを送信する(シェアターゲットピッカー)

liff.shareTargetPicker()メソッドを実行して、ターゲットピッカー(グループまたは友だちを選択する画面)を表示し、ターゲットピッカーで選択した相手に、開発者が作成したメッセージを送信します。このメッセージは、ユーザーが送信したかのように、グループまたは友だちに表示されます。

target picker

以下のコードは、ターゲットピッカーを表示し、選択したグループまたは友だちに、ユーザーのメッセージとして「Hello, World!」を送信します。 あらかじめ、liff.isApiAvailable()メソッドを実行すると、LIFFアプリを起動した環境でターゲットピッカーが使用可能であることを確認できます。

if (liff.isApiAvailable('shareTargetPicker')) {
  liff.shareTargetPicker([
    {
      type: "text",
      text: "Hello, World!"
    }
  ])
}

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

注意
  • ターゲットピッカーを表示するには、コンソールでシェアターゲットピッカーをオンにしてください。詳しくは、「シェアターゲットピッカーを利用するには」を参照してください。
  • 外部ブラウザで利用する場合は、liff.login()を呼び出して、LINEログインの処理(ウェブログイン)を行ってから、liff.shareTargetPicker()を呼び出します。
ターゲットピッカーの動作環境について
  • ターゲットピッカーは、iOS版とAndroid版のLINE 10.3.0以降でサポートされます。
  • liff.shareTargetPicker()を実行する前に、liff.isApiAvailable()を実行すると、LIFFアプリを起動した環境でターゲットピッカーが使用可能であることを確認できます。

# LIFFアプリを閉じる

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

// closeWindow call
document.getElementById('closeWindowButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
        liff.closeWindow();
    }
});

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

注意

liff.closeWindow()は、外部ブラウザでは利用できません。

# LIFFアプリを任意のサーバーにデプロイする

LIFFアプリを開発したら、任意のサーバーにデプロイしてください。

# 次のステップ

LIFFアプリを任意のサーバーにデプロイしたら、以下の操作を行います。

  1. LIFFアプリをチャネルに追加する
  2. LIFFアプリを開く