QRコードを簡単生成してくれるWebAPIを伝えたい

なんだかんだQRコードってやっぱり便利ですよね。後学のためにこの記事を読んでおきましょう。

こんにちは！！

先日、とあるプロジェクトの一環でQRコード需要がありました。その時に見つけた便利なAPIの紹介と活用Tipsをサクッとご紹介します。

APIの名を「QR code API」!

名前ままのシンプルWebAPIです。

https://api.qrserver.com/v1/create-qr-code

以下のように、APIのパラメータとしてテキストを渡すとそこからQRコードを生成するだけ。本当にとてもシンプルですね。

https://api.qrserver.com/v1/create-qr-code/?data=<テキスト>

例えば、https://example.com というURLリンクをQRコードにしたければ、

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

として、アクセスすると↓のQRコードが手に入るわけですね。

しかも、以下のようにHTMLでの記述にも対応しており、サイト上に画像として簡単に埋め込むこともできます。

<img src="https://api.qrserver.com/v1/create-qr-code/?data=https://example.com"  />

これだけでも、すでにとても便利なことがわかります。

加えて、ほかにも便利な機能があります！続けてそちらもご紹介します。

他にも存在する便利な機能たち

先ほど、QRコード生成のための基本的なURL形式を紹介しましたが、ほかにもパラメータとして追加することで実現可能なことがたくさんあります。

画像サイズ・色・拡張子を設定できる。

パラメータの設定をすれば、以下のようにQR画像のサイズや見た目について変更できます。

これらは併用できるので、例えば、「緑色で縦横320pxのSVG形式でのQRコードが欲しい」となれば、

https://api.qrserver.com/v1/create-qr-code/?data=https://example.com&size=320x320&color=00ff00&format=svg

とすればよいわけです。

WebAPIから直接画像ダウンロードできる。

さらに、URLアクセスした瞬間に対象のQRコードをダウンロードする機能もあり、download=1のパラメータを付与することで機能します。

https://api.qrserver.com/v1/create-qr-code/?data=https://example.com&download=1

URL先に飛んでいちいちダウンロードする必要がなくて便利ですよね。

ただ、ダウンロードに関してはファイル名が「qrcode」で固定されてしまうこともあり、大量にQRコードを取得する場合、後でどれがどのQRコードかわからなくなってしまって不便かもしれません。

そこで、JavaScriptを組み合わせてWeb上でこの問題を解決する方法も一緒にお教えします！

JavaScriptでQRダウンロードを快適化

実は先ほど紹介したダウンロード機能とJavaScriptを組み合わせることで快適にダウンロードができます。具体的には、以下のようなJavaScriptのコードで実現できます。

const origin = 'QR化したいURL・テキスト';
const fileName = '好きなファイル名';

// APIから画像データを取得
const response = await fetch(`https://api.qrserver.com/v1/create-qr-code/?data=${origin}&download=1`);
if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
}
const blob = await response.blob();
const url = URL.createObjectURL(blob);

// アンカーリンクを生成して画像ダウンロードを行う
const a = document.createElement("a");
a.href = url;
a.download = fileName; 
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

簡単に解説すると、APIサーバのURLから画像をとってきて、JavaScript上でダウンロードを代行しています。fileNameに好きなファイル名を入れれば画像にその名前を付けられるので、適切な名前を付ければ画像が増えても混乱しづらくなるでしょう。