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