このエントリーが役に立ったらシェアをお願いします!

QR code APIでQRコードを生成してみた!

このエントリーが役に立ったらシェアをお願いします!

今回はQRコード生成APIでQRコードを表示する方法をご紹介します。
最近、NFCや音声入力などユーザの入力の手間を削減する技術は大きく進歩しています。ですがQRコードも手軽に扱えて認知度も高いのでまだまだ活用できます。
とはいえいざQRコードを生成しようとすると、生成サービスが殆ど無かったりPHPなどの実装が重かったりするので、それを一発で解決するAPIをご紹介していきます。

スポンサーリンク

QRコード生成する方法

QRコードを生成する方法として有名なのはGoogle Chart APIですが、現在では非推奨となっているのでなるべく利用は避けたいです。その為今回は海外にて無料で公開されているAPIをご紹介します。

QR code APIでQRコードを生成する

では実際にQRコードを生成してみます。公式ページは以下。

使い方は非常に簡単で、imgタグのsrc属性にQR code APIのURLを入力しておくことで自動的に表示することができます。

<img src="https://api.qrserver.com/v1/create-qr-code/?data=イケてないコード&size=100x100" alt="QRコード" />

このコードは以下のように表示されます。
QRコード
APIに対してパラメータを設定するだけで自動的にQRコードを作成してくれます。

QR code APIでQRコードをカスタマイズする

実際にQRコードを生成してみましたが、APIのパラメータを変更することでカスタマイズをすることも可能です。パラメータの詳細については以下のとおりです。

data

QRコードに含めるデータ。任意のテキストを渡します。

size

QRコードの縦横サイズを定義します。✕ではなくx(エックス)なので注意。

format

png,jpg,gif,svgなどの拡張子を指定します。

bgcolor

QRコードの背景色を指定します。fffや255-255-0、556B2Fなどの指定が可能。

color

QRコードの色を指定します。fffや255-255-0、556B2Fなどの指定が可能。

上記のパラメータを実際に使用してみると以下のようになります。

<img src="https://api.qrserver.com/v1/create-qr-code/?data=イケてないコード&size=100x100&format=svg&color=1d417a&bgcolor=f7f6eb" alt="QRコード"/>

QRコード

最後に

いかがでしたでしょうか。QR code APIを使うことで簡単にQRコードを表示させることができました。パラメータに応じてカスタマイズも可能なので、サイトの雰囲気に合わせることもできます!
ポータルサイトや検索系のサイトなどで店の情報などをQRに埋め込んでおく、といった使い方もできるかと思います。頻繁に使うものではありませんが、覚えておくと便利なAPIなのでおすすめです!

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

QR code APIでQRコードを生成してみた!
イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!

コメント

  1. きく より:

    これって商用利用は可能なんでしょうか?

    • ShoheiTai より:

      コメントありがとうございます!

      以下のような記述がありますので、おそらく問題ないと思います。

      QR codes created on goQR.me are completely free of charge (commercial and print usage allowed, including advertising)
      goqr.me