こんにちは!!
先日、とあるプロジェクトの一環でQRコード需要がありました。その時に見つけた便利なAPIの紹介と活用Tipsをサクッとご紹介します。
APIの名を「QR code API」!
名前ままのシンプルWebAPIです。
以下のように、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に好きなファイル名を入れれば画像にその名前を付けられるので、適切な名前を付ければ画像が増えても混乱しづらくなるでしょう。
おわりに
いかがでしたか?
QRコード、なんだかんだ欲しくなる場面ってありますし、知っておいて損はないと思います。他にもいくらか機能もあるので、ぜひ公式ドキュメントも参考にしつつ、QRコード生成してみてください。
では!