LINEミニアプリとは

ざっくり言うと、LINE上で実行できるウェブアプリ(LIFFアプリ)です。

LIFF = LINE Front-end Framework

詳細はこちらを参照

LIFFアプリの開発ガイドラインはこちら

アプリの機能

アプリの機能は下記。

1.　過去にスキャンした画像の参照
2.　発行されたレシート一覧
3.　プランとプロフィールの管理

ここでは実際に上記の機能は開発しませんが、開発に必要なID取得までを進めてみます。

基礎準備

チャンネルの作成

まずはアプリ開発にあたり該当おチャンネルを作成します。設定方法はドキュメントに記載がありますので詳細はスキップします。

EndPointの設定

まずは開発するにあたりウェブアプリのURLを指定します。

開発用、レビュー用、本番用と3種類のエンドポイントを用意する必要があります。ここでは開発用のみを使います。

SDKの設定

今回はCDNパスを指定して進めます。

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

詳細はこちらを参照
https://developers.line.biz/ja/docs/liff/developing-liff-apps/#specify-cdn-path

とりあえず走らせてみる

まずは、すごく簡単なコードで動作確認

_layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - wppLineMiniApp</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

</head>
<body>
    <header>
    </header>

    <main role="main">
        @RenderBody()
    </main>

    <footer class="">
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"
            integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div class="">
    THIS IS THE MINI APP.

    OS is
    <span class="" id="os"></span>.  Is that correct?

</div>

@section Scripts{
<script>

        liff.init({
            liffId: 'YOUR-LIFF-ID-HERE',
            withLoginOnExternalBrowser: true,
        }).then(() => {

            $("#os").text(liff.getOS());

        }).catch((err) => {
           alert(err);
        });
</script>
}

ブラウザー上で開発用のLIFF URLをたたくとQRコードが生成されます、そのQRコードを読み込んでテストしてみます。

下記のように許諾画面が表示され、進みます。

許諾したあとにOS情報が正しく表示されていればOKです。

プロフィールを表示する

では次にアプリを使っているユーザーを識別するためにプロフィール情報を表示してみます。実際のアプリでは表示することはありませんが、値の確認も含めて一度表示してみます。

index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<div class="my-2">
    THIS IS THE MINI APP.

    OS is
    <span class="" id="os"></span>.

</div>

<div class="my-2">
    <p>
        Here is the profile information.
    </p>
    <p>
        UserId is: <span id="userId"></span>.
    </p>
    <p>
        Display Nae is: <span id="displayName"></span>.
    </p>
    <p>
        Picture Url is: <span id="pictureUrl"></span>.
    </p>
    <p>
        Status is: <span id="status"></span>.
    </p>

</div>

@section Scripts{
<script>

    liff.init({
        liffId: 'YOUR-LIFF-ID-HERE',
        withLoginOnExternalBrowser: true,
    }).then(() => {

        $("#os").text(liff.getOS());

        liff
        .getProfile()
        .then((profile) => {

            $("#userId").text(profile.userId);
            $("#displayName").text(profile.displayName);
            $("#pictureUrl").text(profile.pictureUrl);
            $("#status").text(profile.statusMessage);

        })
        .catch((err) => {
            console.log("error", err);
        });

    }).catch((err) => {
       alert(err);
    });
</script>
}

下記のようにすべての項目が表示されました。

あとは基本Web Appなので下記の機能を実装するのみとなります。ここに表示されるUserIdは紐づけてるオフィシャルアカウントで取得したものと同じになります。