LoginSignup
7

More than 1 year has passed since last update.

[LINE]ミニアプリの開発 1

Last updated at Posted at 2022-09-07

一度開発申請したのですが、却下されてしまいシクシクしていたところですが。事前審査なしになったとのことで、再度トライしてみます。

今回はこちらの電子レシート経費処理サービスをLINEミニアプリ上に実装してみます。

LINEミニアプリとは

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

LIFF = LINE Front-end Framework

詳細はこちらを参照

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

アプリの機能

アプリの機能は下記。

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

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

基礎準備

チャンネルの作成

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

EndPointの設定

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

image.png

開発用、レビュー用、本番用と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コードを読み込んでテストしてみます。

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

image.png

許諾したあとに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>
}

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

image.png

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

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

今回取得したuserIdはそのままサーバーに送れないのでTokenを使った方法を紹介します。

開発仲間募集中

フルリモート、副業OK、開発パートナー募集しています。ホームページからお問合せくださいませ。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7