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

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

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

※QRコードは世界的に使われている2次元コードの一種で、開発したのは株式会社デンソーウェーブという日本の会社です。「QRコード」の名称は同社の登録商標で、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「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コード生成機能を使って、簡単にQRコードを作って自サイトに掲載する方法をご紹介いたします。上記で示した例のように「URLだけを含めたQRコード」を作る場合は、上記でご紹介したソースがほぼすべてです。しかし、QRコード内に日本語文字や空白文字などを含めたい場合には、もう少し作業が必要です。詳しい作成方法は、次のページからご紹介いたします。

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