ライブラリを利用する

https://www.npmjs.com/package/qrcode

import QRCode from "qrcode";

await QRCode.toDataURL("example");

他にも同様のライブラリは多く存在する。

URL経由で生成する

廃止されたGoogle Chart API

以前はGoogle Chart APIを利用してQRコードを生成することができたが、2024年3月頃に廃止された。

次のような記述でQRコードを生成することができた。

https://chart.googleapis.com/chart?chs=480x480&cht=qr&chl=example

QR Code API

QR Code APIは、Google Chart APIを利用した方法のように、URL経由でQRコードを生成することが出来る。

https://goqr.me/api/

https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=example

ただし、Google Chart APIに比べて動作は若干遅く、Google Chart APIと同様に廃止される可能性もあるため注意が必要。 長期的な利用が必要な場合は、ライブラリを利用することを推奨する。

Github Actionsの実行結果にQRコードを表示する

Deploy PreviewをPRに表示したいケースなどでは、長期に渡り見られるようにする必要がないため、 QR Code APIのようなURL経由で生成する方法が適している。

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy site
        id: deploy
        uses: ./.github/actions/deploy-site

      - name: Find Comment
        if: success() && github.event_name == 'pull_request'
        uses: peter-evans/find-comment@v3
        id: fc
        with:
          issue-number: ${{ github.event.number }}
          comment-author: "github-actions[bot]"
          body-includes: "<!-- DEPLOY_LOG -->"

      - name: Create comment
        if: success() && github.event_name == 'pull_request' && steps.fc.outputs.comment-id == ''
        uses: peter-evans/create-or-update-comment@v4
        with:
          issue-number: ${{ github.event.number }}
          body: |
            <!-- DEPLOY_LOG -->
            ### <span aria-hidden="true">✅</span> Deploy Preview ready!
            |  Name | Link |
            |---------------------------------|------------------------|
            |<span aria-hidden="true">🔨</span> Latest commit | ${{ github.sha }} |
            |<span aria-hidden="true">🔍</span> Latest deploy log | ${{ steps.outputs.deploy.logs }} |
            |<span aria-hidden="true">😎</span> Deploy Preview | ${{ steps.outputs.deploy.deploy_url }} |
            |<span aria-hidden="true">📱</span> Preview on mobile | <details><summary>Toggle QR Code</summary>  ![QR code](https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${{ steps.outputs.deploy.deploy_url }}) </details>|

スプレッドシートでQRコードを表示・生成する

スプレッドシート上で、任意のライブラリを読み込んでQRコードを生成することは難しいため、QR Code APIのようなURL経由で生成する方法が適している。

=image("https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" & A2)