3/3 QRコードをGoogle Chart APIで作成して表示する方法 [ホームページ作成] All About

Google Chart APIで、日本語文字などを含むQRコードを作る方法

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

例えば、ひらがな3文字「さくら」をQRコードに含めたい場合は、以下のようにそのまま記述してはいけません。

chl=さくら

その際は、この文字列をURLエンコードして、以下のように変換しておく必要があります。

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

上記は、「さ」「く」「ら」の3文字をURLエンコードしたものです。「さ」が「%E3%81%95」、「く」が「%E3%81%8F」、「ら」が「%E3%82%89」になります(※文字コードがUTF-8の場合)。

任意の文字列をURLエンコードする方法

文字列をURLエンコードする方法はいろいろありますが、下記に変換フォームを用意しましたのでご活用下さい。

――― URLエンコードフォーム ―――

◆元の文字列：

◆変換の結果：

■使い方：
「元の文字列」欄に望みの文字列を入力してボタンをクリックすれば、その下の「変換の結果」欄にURLエンコードされた文字列が表示されます。それをコピーしてご使用下さい。

※上記の変換フォームはJavaScriptで動作しています。本記事をAll Aboutのウェブサイト外で読んでいる場合は動かないかもしれません。
※このページの文字コードに関係なく、UTF-8コードでエンコードされます。
※半角英数字や一部の記号は、URLエンコードしても変化しません(そのまま記述して構わないため)。

テキストエディタにはURLエンコード機能が内蔵されているものもありますし、変換スクリプトを公開しているサイトもたくさんあります。どれを使っても構いません。「URLエンコード」で検索すればいろいろ見つかるでしょう。

URLエンコードした結果を含むQRコードの作り方

QRコードに含めたい文字列をURLエンコードできれば、あとは前ページでご紹介した方法と同じです。以下のように「chl=」に続いて、URLエンコードした結果の文字列を記述するだけです。

■日本語文章とURLが混ざった文字列をQRコードにする例：
例えば、「ウェブサイトは http://example.com/ です。」という文字列を含めるなら、これをURLエンコードして、以下のように記述します。

https://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にするには、以下のように記述します。

https://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="https://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" alt="QRコード">

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

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

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

という文章が表示されるはずです。実機で試してみて文字化けする場合には、文字コードの指定を変えてみて下さい。

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

今回は、Google Chart APIを使って任意の文章を含むQRコードを作って掲載する方法をご紹介いたしました。フリーソフトなどを使って事前にQRコード画像を作る場合とは異なり、画像加工の手間やアップロードの手間が省けます。また、HTMLソースを修正するだけでQRコード自体も修正されるため、更新作業も簡単です。ぜひ、活用してみて下さい。

【関連記事】