462文字
2分
編集

QRコードを簡単に生成する

#qrcode #Google Chart API #QR Code API #GitHub Actions

#ライブラリを利用する

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

js
import QRCode from "qrcode";

await QRCode.toDataURL("example");

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

#URL 経由で生成する

#廃止された Google Chart API

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

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

txt
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/

txt
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 経由で生成する方法が適している。

yaml
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 経由で生成する方法が適している。

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