ウェブ上に掲載する2次元コード「QRコード」を簡単に作る方法
※QRコードは世界的に使われている2次元コードの一種で、開発したのは株式会社デンソーウェーブという日本の会社です。「QRコード」の名称は同社の登録商標で、QRコードに関する複数の特許を同社が保有していますが、使用に対するライセンスは不要との方針なので自由に作成して使えます。
QRコードには、URLなどのアドレスだけでなく任意の文章を含められます。 例えば上図のQRコードを読み取ると「いつも記事をご覧頂き、ありがとうございます。」という日本語の文章が表示されます。QRコードには漢字などを含む日本語文字だと最大で1,817文字まで、英数字だけだと最大4,296文字まで含められます。
事前にQRコード画像を作成しておく必要がなく、動的に生成されて表示
様々なグラフを作成できるGoogle Chart APIには、QRコードを生成するAPI もある
Google Chart APIを使えば、記事「円グラフをウェブ上で簡単に表示させる方法」でご紹介したように様々なグラフが簡単に作成できます。その機能の中には、QRコードを作成するAPIも含まれています。
フリーソフトなどを使って事前にQRコード画像を作成する場合とは異なり、下記のようなメリットがあります。
- 事前にQRコード画像を作成しておく手間がない。
→HTMLソース内からAPIを呼び出すことで、QRコード画像は動的に生成されるため。 - QRコード画像をウェブサーバにアップロードする必要がない。
→APIがその都度画像を生成するので、そもそも画像ファイルの形では存在しないため。 - QRコードに含める内容の修正が楽。
→HTMLソースを修正するだけでQRコードの内容を更新できるため。
Google Chart APIのQRコード作成機能の使い方は簡単
Google Chart APIを使ってQRコードを作成する方法はとても簡単です。下記に示す2ステップだけで作成と表示が完了します。■Step.1 Google Chart APIを呼び出すURLを作る
例えば、All Aboutのトップページを示すURL「https://allabout.co.jp/」をQRコードにしたい場合は、以下のような「Google Chart APIを呼び出すURL」を作成します。APIの場所を示す「chart.apis.google.com/chart」に続いて、パラメータを3つ付加しています(詳細は後述)。
http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=https://allabout.co.jp/
■Step.2 それを、img要素を使ってウェブページに貼り付ける
上記で作成したURLをimg要素のsrc属性に指定して、以下のようなHTMLソースを作ります。このソースをウェブページ上の任意の場所に記述すれば、その場所にQRコードが表示されます。
<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=https://allabout.co.jp/" alt="QRコード">
■QRコード表示結果の例
上記のHTMLソースを表示すると、以下のようにQRコードが見えます。
 |
それでは、Google Chart APIを使った詳しいQRコードの作り方を見ていきましょう。
