QRコードをGoogle Chart APIで作成して表示する方法

ウェブ上に掲載する2次元コード「QRコード」を簡単に作る方法

携帯端末向けにURLやメールアドレスなどを伝える用途として、右図のようなQRコードがよく利用されています。携帯端末で長いアドレスを入力するのは面倒ですから、QRコードをカメラにかざすだけで文字列を入力できるのは便利です。「今閲覧中のURLを携帯端末に送る」といった目的でウェブページ上に掲載しても便利でしょう。

※QRコードは世界的に使われている2次元コードの一種で、開発したのは日本の会社です。「QRコード」の名称は株式会社デンソーウェーブの登録商標です。使用に対するライセンスは不要で、自由に作成できます。

QRコードには、URLなどのアドレスだけでなく任意の文章を含められます。 例えば右上図のQRコードを読み取ると、「いつも記事をご覧頂き、ありがとうございます。」という日本語の文章が表示されます。QRコードには、漢字などを含む日本語文字だと最大で1,817文字まで、英数字だけだと最大4,296文字まで含められます。

事前にQRコード画像を作成する必要がなく、作成と同時に表示できる

QRコードを無料で作成できるサービスはたくさんありますが、今回は、Googleが提供している「Google Chart API」というAPIを使ってQRコードを作成し、その場でウェブ上に表示する方法をご紹介いたします。

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を作り、
• Step.2 それをimg要素を使ってウェブページに貼り付けるだけ。

■Step.1 Google Chart APIを呼び出すURLを作る
例えば、All Aboutのトップページを示すURL「http://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=http://allabout.co.jp/

■Step.2 それを、img要素を使ってウェブページに貼り付ける
上記で作成したURLをimg要素のsrc属性に指定して、以下のようなHTMLソースを作ります。このソースをウェブページ上の任意の場所に記述すれば、その場所にQRコードが表示されます。

<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=http://allabout.co.jp/" alt="QRコード">

■QRコード表示結果の例
上記のHTMLソースを表示すると、以下のように見えます。

今回は、Google Chart APIのQRコード作成機能を使って簡単にQRコードを作成・表示する方法をご紹介いたします。上記で示した例のように「URLだけを含めたQRコード」を作る場合は、上記でご紹介したソースがほぼすべてです。しかし、QRコード内に日本語文字や空白文字などを含めたい場合には、もう少し作業が必要です。詳しい作成方法は、次のページからご紹介いたします。

それでは、Google Chart APIを使った詳しいQRコードの作り方を見ていきましょう。