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を指定します。

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

外部ブラウザで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ログインの処理(ウェブログイン)を行います。

note 注意

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

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

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

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

note 注意

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

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

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

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

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

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

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

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

tip ユーザーの情報を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()」を参照してください。

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

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

note 注意

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

LIFFアプリを閉じる

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

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

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

note 注意

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

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

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

次のステップ

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

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

{{ $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") }}