24日目にLINEミニアプリが完成する初心者 ―― Day21. クーポン表示機能を実装


前回は「24 日目に LINE ミニアプリが完成する初心者 ―― Day20. 二次元コードリーダーを表示する」と題して、二次元コードリーダーについて学習していました。

https://qiita.com/non_watanabe/items/89550d68801ab1f28afe

<br/>
今回は二次元コードリーダーの実践編として、クーポンを表示してみたいと思います。

# クーポンを作成

今回は二次元コードリーダーで`"HONOLULU_COOKIES"`という文字列を読み取った時だけ、ホノルルクッキープレゼントのクーポンを表示する実装にして行きたいと思います。

## コンポーネントの作成

はじめにクーポン用のコンポーネントを作成して行きます。

クーポンを使うボタンを下に表示しています。

```tsx:src/nextjs/components/ui/Coupon/Coupon.tsx
import {
  Card,
  CardContent,
  CardHeader,
  CardMedia,
  Typography,
} from "@mui/material";
import Button from "../Button/Button";

export default function Coupon() {
  return (
    <Card className="w-11/12 bg-red-100 p-8">
      <CardHeader title="ホノルルクッキープレゼント！" />
      <CardMedia
        component="img"
        height="194"
        image="/honolulu_cookies.png"
        alt="Paella dish"
      />
      <CardContent>
        <Typography>
          本クーポン提示で、ホノルルクッキーを
          <br />
          プレゼントさせていただきます。
          <br />
          （お一人様一回限り）
        </Typography>
      </CardContent>
      <Button label="クーポン使う" />
    </Card>
  );
}
```

<br/>
作ったコンポーネントはこのようになりました。

<br/>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/a0fa8d6a-db07-3d56-7f26-4440913b49ef.png" />

## モーダルの追加

作ったコンポーネントをモーダルとして表示できるように追加して行きます。

モーダルは`useState`を使って管理します。

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

export default function Home() {
  const [text, setText] = useState("ここにテキストが表示されます");
  const [open, setOpen] = useState<boolean>(true);

  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>
        <Modal
          open={open}
          onClose={() => setOpen(false)}
          className="flex items-center"
        >
          <div className="flex justify-center">
            <Coupon onClose={setOpen} />
          </div>
        </Modal>
      </div>
    </div>
  );
}
```

上記のコードでは`Coupon`に`setOpen`を渡していますが、まだ`Coupon`側で受け取る設定が設定ができていないため、以下の通り追加を行って行きます。

```tsx:src/nextjs/components/ui/Coupon/Coupon.tsx
export default function Coupon({ onClose }: {onClose: Dispatch<SetStateAction<boolean>>}) {
  return (
    <Card className="w-11/12 bg-red-100 p-8">

      {/* 中略 */}

      <Button label="クーポン使う" onClick={() => onClose(false)} />
    </Card>
  );
}
```

## クーポンコードの判定ロジック追加

ここまでの実装ではクーポンコードに応じたモーダルオープンが実装出来ていないため追加を行って行きます。

`handleClick`の`then`にロジックを追加します。

```tsx:src/nextjs/pages/index.tsx
  const handleClick = () => {
    liff
      .scanCodeV2()
      .then((result) => {
        if (result.value === "HONOLULU_COOKIES") {
          setText("クーポンを取得しました");
          setOpen(true);
        } else {
          setText("クーポンが取得できませんでした");
        }
      })
      .catch((error) => {
        console.log("error", error);
      });
  };
```

これで実装は完了です！

# デプロイ

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

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

#　動作確認

LINE から動作確認を行って行きます。

QR コードは前回同様以下のサイトで作成しています。

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

初めは`HONOLULU_COOKIES`という文言で QR コードを作成して読み取りを行います。

すると以下の通りクーポンが表示されました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/7401b272-a6cd-ceab-4a7c-1b32342f4236.jpeg" width="50%" />

<br/>
<br/>

「クーポンを使う」をタッチすると「クーポンを取得しました」というメッセージが表示されました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/e26cba4a-7f32-da5c-855e-d1f29a5b2def.jpeg" width="50%" />

<br/>
<br/>

次に別の文字列で作成した QR コードを読み込んでみます。

すると今度はクーポンは表示されず、「クーポンが取得できませんでした」という文字列が表示されました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743174/66f95b95-e186-301a-e317-2b77d9d76492.jpeg" width="50%" />

# まとめ

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

次回は、詳しく触れていなかった部分として Messaging API について学習して行きたいと思います。

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