【ホームページ作成】Google Chart APIでQRコードを作成する方法

Google Chart APIでの「QRコード」の作り方（続き）

QRコードに、日本語文字や空白文字（などの「URLでそのまま使えない文字」）を含めたい場合には、 「URLエンコード」という方法を使って文字列を変換する必要があります。

例えば、「さくら」という平仮名3文字を含めたい場合には、以下のようにそのまま記述してはいけません。

chl=さくら

この文字列をURLエンコードで変換して、

chl=%E3%81%95%E3%81%8F%E3%82%89

のように記述する必要があります。
上記は、「さ」「く」「ら」の3文字を（UTF-8コードで）URLエンコードしたものです。
※「さ」→ %E3%81%95、「く」→ %E3%81%8F、「ら」→ %E3%82%89

文字列をURLエンコードするには

文字列をURLエンコードする変換フォームを以下に用意しましたので、ご活用下さい。
※変換スクリプトを公開しているサイトはたくさんありますので、それらを利用しても構いません。「URLエンコード」で検索するといろいろ見つかります。

——— 『URLエンコード』 変換フォーム ———

◆元の文字列：

◆変換の結果：

「元の文字列」欄に文字列を入力し、「▼URLエンコード」ボタンをクリックすれば、その下の「変換の結果」欄にURLエンコードされた文字列が表示されます。 それをコピーしてご使用下さい。
※上記の変換フォームは、JavaScriptで動作しています。
※このページの文字コードに関係なく、UTF-8コードでエンコードされます。
※半角英数字や一部の記号は、URLエンコードしても変化しません。（そのまま記述して構わないため）

日本語文字を含むQRコードの作り方（続き）

■QRコードに含める文字列（日本語など）を指定：

日本語の文字列などをQRコードに含めたい場合は、以下のように「chl=」に続いて、（UTF-8コードで）URLエンコードした結果の文字列を記述します。
例えば、「 ウェブサイトは http://example.com/ です。 」という文字列を含めるなら、これをURLエンコードして、以下のように記述します。

http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AF%20http://example.com/%20%E3%81%A7%E3%81%99%E3%80%82

■出力文字コードを指定：

上記では、「出力文字コード」を指定していないため、QRコードに含まれる文字列は「UTF-8コード」で出力されます。 しかし、携帯端末（携帯電話）には、UTF-8コードでは文字化けしてしまう機種がたくさんあります。
そこで、出力文字コードは「SHIFT-JIS」にしておくことをお勧めいたします。
※出力文字コードに何を指定する場合でも、Google Chart APIへ送る際の文字列は「UTF-8コード」でURLエンコードしておく必要があります。

文字コードは、「choe=」に続いて記述します。
SHIFT-JISコードの場合は「choe=Shift_JIS」と指定、UTF-8コードの場合は「choe=UTF-8」と指定します。

QRコードに含まれる文字列の文字コードを「SHIFT-JISコード」にするには、以下のように記述します。

http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AF%20http://example.com/%20%E3%81%A7%E3%81%99%E3%80%82&choe=Shift_JIS

このURLを使って、QRコードをウェブページ上に貼り付けるには、以下のようにHTMLソース（img要素）を記述します。

<img src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&chl=%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AF%20http://example.com/%20%E3%81%A7%E3%81%99%E3%80%82&choe=Shift_JIS" width="150" height="150" alt="QRコード">

上記のHTMLソースを使ってQRコードを表示させると、以下のように見えます。

これを携帯端末のカメラなどを使って読み込むと、

ウェブサイトは http://example.com/ です。

という文章が表示されるはずです。

おわりに

今回は、「Google Chart API」を使ってQRコードを作成する方法をご紹介いたしました。 このAPIでは、他にも様々な図やグラフが簡単に作成・表示できます。詳しくは、Google Chart APIのデベロッパーガイドページをご参照下さい。
また、「Google Chart API」を使って円グラフを簡単に作成する方法を解説した記事「円グラフをウェブ上で簡単に表示させる方法」もぜひご覧下さい。