簡単! WebサイトにQRコード設置! Google Chart APIを使用してQRコードを生成しよう!

今回はGoogle Chart APIを使用して、QRコードの生成からWebサイトへのQRコード設置までをやってみようと思います。
当記事の対象者としましては以下のとおりです。

• QRコードを簡単に生成したい
• QRコードを自動生成して画像アップロードすることなくWebサイトに設置したい

どうぞ最後までよろしくお願いいたします。

QRコードの生成にGoogle Chart APIを使用する

Google Chart APIとは、Googleが提供しているグラフ生成サービスです。APIのURLにパラメータを指定するだけでグラフの画像を生成してくれるため、WEBサイトへのグラフ掲載が容易となっております。

様々なグラフに対応しておりますが、グラフとはあまり関係なさそうなQRコードにも対応をしております。今回はAPIを使用しQRコードを生成し、WEBサイトへの掲載方法までを紹介します。

前提知識 : QRコードとは

その前に、まずは前提知識としてQRコードとは何者なのかを調査してみました。

スーパーやコンビニで売っているラーメンやお菓子などの商品にはバーコードが付いていると思いますが、みなさんが見ているバーコードは一次元バーコードと言われるバーコードになるようです。

QRコードは二次元バーコードと言われており、一次元バーコードより大容量の情報を持つことができ非常に優れており、様々な場面に使用されているそうです。

また、QRコードは株式会社デンソーウェブが開発して特許や商標登録がなされておりますが、使用に関するライセンスは不要となっておりますので、自由に作成したり掲載したりすることができるようです。

予備知識 : QRコードが使用される様々な場面

QRコードはスマートフォンのカメラ機能などを使用して読み取ることができるため、様々な場面で使用されるようになり、国内外で普及しました。

• PCサイトからSPサイトへ誘導させるためにQRコードをWEBサイトに掲載する
• ポスターの片隅にQRコードが掲載してWEBサイトへ誘導する
• 製品のSKUや保管場所を管理をする
• 仮想通貨などのウォレットアドレス情報を持たせウォレット取引所間の正確な送金や店頭決済に使用する

などなど…様々な場面で使用されております。

QRコードを生成してみる

前提知識と予備知識でQRコードへの理解が高まったと思いますので、それでは早速、QRコードの生成方法を紹介致します。

以下のリンクはGoogle Chart APIのURLになります。そのURLにパラメータを加えてみました。試しにクリックしてみてください。

https://chart.apis.google.com/chart?cht=qr&chs=300×300&chl=https://www.genius-web.co.jp/

以下のようなQRコードの画像が表示されたと思います。

簡単ですよね。Google Chart APIのURLにQRコードの設定情報をパラメータに加えるだけでQRコードの画像が生成されました。

では次に、Google Chart APIのURLに指定するパラメータについての解説を致します。

APIのベースとなるURLは https://chart.apis.google.com/chart となり、そのURLの後ろにクエリパラメータを設定します。

cht

グラフの種類設定になります。今回はQRコードを表示させたいので qr と指定します。

chs

QRコードの画像の横縦の幅設定になります。 300×300 と指定しますと、横300px縦300pxのQRコードが生成されます。

chl

QRコードの内容設定になります。例では弊社のURLを指定したため、WEBサイトへの誘導に使用できるQRコードが生成できました。

よく使用する設定のパラメータは以上になります。この3パラメータだけでQRコードが生成できるのは便利ですよね。

QRコードをWEBサイトへ掲載する

QRコードの生成方法はわかりました。ではWEBサイトへ掲載してみましょう。

生成されたQRコードの画像をダウンロードして…WEBサイトのサーバへアップロードして…タグをWEBサイトへ貼り付けて…

そんな作業は不要です!

Google Chart APIのURLをそのまま img タグの src に指定してWEBサイトに貼るだけで良いのです!

以下のURLを…

https://chart.apis.google.com/chart?cht=qr&chs=300×300&chl=https://www.genius-web.co.jp/

このように img タグの src に指定するだけで…

<img src="https://chart.apis.google.com/chart?cht=qr&chs=300x300&chl=https://www.genius-web.co.jp/" />

簡単ですよね…!

さいごに

いかがでしたでしょうか。Google Chart APIを使用して、QRコードの生成からWebサイトへのQRコード設置まではとても簡単でしたよね。

また面白いAPIを見つけましたら紹介致します。それでは。