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

yamada

6年 ago

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

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

目次／このページでわかること

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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を見つけましたら紹介致します。それでは。