24日目にLINEミニアプリが完成する初心者 ―― Day20. 二次元コードリーダーを表示する


# はじめに

前回は「24 日目に LINE ミニアプリが完成する初心者 ―― Day19. LIFF アプリを初期化する」と題して、`liff.init()`の仕様を学習し実装に問題が無いかを確認してきました。

https://qiita.com/non_watanabe/items/10cea3007df865700f1d

<br/>
今回は二次元コードリーダーの機能を学習して行きたいと思います。

# `liff.scanCodeV2()`

二次元コードリーダーは LIFF SDK の`liff.scanCodeV2()`を使うことで実装ができます。

機能としては二次元コードリーダーを起動し、読み取った文字列を取得することができます。

:::note warn
利用の際は LINE Developers コンソールで **[Scan QR]** の機能をオンにする必要があるので注意しましよう。
:::

## 実装方法

公式サイトにあるサンプルコードは以下です。

初期化と同様に`then`で読み取り後の実装を記述する仕様のようです。

```js
liff
  .scanCodeV2()
  .then((result) => {
    // result = { value: "" }
  })
  .catch((error) => {
    console.log("error", error);
  });
```

# 二次元コードリーダーを動かしてみる

試しに自身のコードで二次元コードリーダーを使ってみたいと思います。

現在スターターキットの情報が表示されるトップ画面が使われていないため、今回はそこを使って実装を行いたいと思います。

はじめにファイル名を`index.js`から`index.tsx`に変えて、不要なコードを削除しておきます。

```tsx:src/nextjs/pages/index.tsx
import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>Mahalo Living</title>
      </Head>
      <div className="home">
        <h1 className="home__title">Mahalo Living</h1>
      </div>
    </div>
  );
}
```

ここにボタンを配置して先ほどの`liff.scanCodeV2()`を追加してみます。

useState を使って読み込まれたテキストが表示されるように追加しました。

```tsx:src/nextjs/pages/index.tsx
import { useState } from "react";
import Head from "next/head";
import liff from "@line/liff";
import { Button } from "@/components/ui";

export default function Home() {
  const [text, setText] = useState("ここにテキストが表示されます");
  const handleClick = () => {
    liff
      .scanCodeV2()
      .then((result) => {
        setText(result.value);
      })
      .catch((error) => {
        console.log("error", error);
      });
  };

  return (
    <div>
      <Head>
        <title>Mahalo Living</title>
      </Head>
      <div className="home">
        <h1 className="home__title">Mahalo Living</h1>
      </div>
      <div className="text-center">
        <Button
          label="二次元コードリーダー"
          onClick={() => handleClick()}
          width="w-1/2"
        />
        <h1 className="text-3xl font-medium text-center p-12">{text}</h1>
      </div>
    </div>
  );
}
```

これで動作確認を行ってみたいと思います。

# デプロイ

いつも通り以下のコマンドを`line-liff-v2-starter`配下で実行しデプロイを行います。

```
$ netlify deploy --build --prod
```

# Scan QR をオンにする

二次元コードリーダーを使うためには Scan QR をオンにする必要があります。

LINE Developers コンソールにログインして LINE ログインを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/91565f68-ea5f-319d-b02e-00834a595d72.png)

<br/>
LIFF のタブから今回二次元コードリーダーを使う LIFF アプリを選択します。

私の場合はトップ画面で実装を行ったためそのページを開いて行きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/bc8475ff-48c1-01d0-cbf3-1ffe5b885de6.png)

<br/>
ページ一番下のオプションにある「Scan QR」をオンにすれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/01feb85e-e917-685e-dfd1-7ea578c1ff75.png)

# QR コード生成

動作確認を行うためテキストから QR コードを生成しておきます。

どのサイトでも構いませんが、私は検索で見つけた以下のサイトを使いました。

https://qr.quel.jp/text.php

これでテキストから二次元コードを生成することができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/6d81150f-bbd0-0e40-475e-8403de11f71f.png)

# 動作確認

LINE から URL を開いてページにアクセスします。

ボタンが表示されましたので押してみます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/773804c1-048d-4a2b-169a-7bd0c561a752.jpeg" width="50%" />

<br/>
<br/>

アクセス許可の画面が表示されたので「今回のみ許可する」を選択して行きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/7ea87ec8-2c1a-8e6d-c13c-6499d51a7add.jpeg" width="50%" />

<br/>
<br/>

これで先ほどの QR コードを読み取ってみます。

すると「テスト二次元コード」というテキストが表示されました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/ddb0b8e0-86ab-768e-0a02-3f759301dece.jpeg" width="50%" />

# まとめ

ここまでで 二次元コードリーダーについて学習してきました。

次回は、この二次元コードリーダーを使ってサイト内でクーポンを表示する機能を作ってみたいと思います。

残りは 4 日！
気になる方は是非フォローやカレンダー購読をお願いします:star: