🏁 Next.jsでQRコードを生成、ダウンロードできるようにする

2024-01-10(水) 15:00

🏁 Next.jsでQRコードを生成、ダウンロードできるようにする

Next.jsQRCode

Next.jsでQRコードを生成し、それをダウンロードできるようにするための実装方法を解説します。

前提と注意事項

以下が前提と注意事項になります。

Next.js のバージョンは 14.0.5
Tailwind を使用しています。
QR コード生成のためにqrcode.reactというパッケージを使用します。以下がqrcode.reactの公式リポジトリです。
qrcode.react
A React component to generate QR codes for rendering to the DOM.
github.com

なお、もし Next.js で QR コードを読み取る機能を実装したい場合は、以下に別途まとめていますので必要な方は見てみてください。

🔍 Next.jsでQRコードリーダーを実装する

Next.jsでQRコードをカメラ経由で読み取ってその内容を表示するための実装方法を解説します。

ritaiz.com

この記事のゴール

以下の画像のように、Next.js で QR コードを生成し、それをダウンロードできるようにします。

qrcode.react をインストールする

npmかyarnを使って qrcode.react のパッケージをインストールします。

my-project

$ npm install qrcode.react
# or
$ yarn add qrcode.react

以上でqrcode.reactのインストールは完了です。

QR コードを生成するコンポーネントを作成する

以下のように、適当な場所に QR コードを生成して表示するためのコンポーネントを作成します。

app/components/Qrcode/Generator.tsx

'use client';
import { QRCodeCanvas } from 'qrcode.react';
 
export default function Generator({ content }: { content: string }) {
  const getQRCodeImage = async () => {
    const canvas = document.querySelector('canvas');
    if (canvas) {
      const dataURL = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.download = 'QRCode.png';
      link.href = dataURL;
      link.click();
    }
  };
 
  return (
    <div className='p-8'>
      <QRCodeCanvas
        value={content}
        size={256}
        bgColor={'#FFFFFF'}
        fgColor={'#000000'}
        level={'L'}
        includeMargin={false}
      />
      <button
        className='bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2 rounded my-2'
        onClick={() => getQRCodeImage()}
      >
        QRコードダウンロード
      </button>
    </div>
  );
}

上記は、QR コードに含める文字列をcontentとして受け取って、それを元に QR コードを生成して表示するコンポーネントです。また、表示した QR コードの下にはダウンロードボタンを設置しています。 qrcode.reactで設定できるオプションは色々ありますが、今回は以下のように設定しています。

value: QR コードに含める文字列
size: QR コードのサイズ
bgColor: QR コードの背景色
fgColor: QR コード部分の色
level: QR コードの誤り訂正レベル。L, M, Q, Hのいずれかを指定できます。左から右に行くほど誤り訂正レベルが高くなります。
includeMargin: QR コードの周りに余白を設けるかどうか。このオプションは廃止予定で、代わりにmarginSizeが使えるようになります。ただし、marginSizeが使用できる v4.0 は記事公開時点ではまだリリースされていません。

QR コードに画像を含める

以下のようにimageSettingsを指定することで QR コードの中央に画像を含めることができます。

app/components/Qrcode/Generator.tsx

<QRCodeCanvas
  value={content}
  size={256}
  bgColor={'#FFFFFF'}
  fgColor={'#000000'}
  level={'L'}
  includeMargin={false}
  imageSettings={{
    src: '/next.svg',
    x: 20,
    y: 50,
    height: 48,
    width: 48,
    excavate: true,
  }}
/>

上記で設定しているimageSettingsの各オプションは以下の通りです。

src: QR コードに含める画像のパス
x: 画像を配置する x 座標。デフォルトでは中央。
y: 画像を配置する y 座標。デフォルトでは中央。
height: 画像の高さ。
width: 画像の幅
excavate: 画像を最前面にするかどうか

v4.0 ではimageSettingsでopacityを設定でき、透過率の指定もできるようです。

上記の設定だと以下のように表示されます。

動作確認

あとは以下のように適当なページにて、前節で作成したコンポーネントGeneratorを使用して動作確認を行います。

app/page.tsx

// import先は適宜置き換えてください。
import Generator from './components/Qrcode/Generator';
 
export default function Home() {
  return (
    <main>
      <div>
        <Generator content={'test'} />
      </div>
    </main>
  );
}

上記のページにアクセスすると、冒頭に載せたイメージ画像が表示され、ダウンロードボタンを押すと、QR コードをダウンロードできます。

まとめ

任意の文字列を使って QR コードを生成し、それをダウンロードできるようにする方法を解説しました。これによって例えば QR コードを使って、イベントの出欠用の QR コードをお客さん毎に発行してメールに含めて送信したり、従業員用の QR コードを生成して QR コードリーダーで読み取って退勤管理するなど色々な用途に使用できます。

2024-01-10(水) 15:00