「Google Charts」でQRコード生成

以前、jQueryのプラグインでQRコードを生成した記事を書きました。

関連：JavaScriptでQRコード生成

生成されるQRコードはcanvasタグが使われていますが、どうもスマートフォンで閲覧すると上手く生成されていないようです。

ということで、改めてスマートフォンでもQRコードを表示できるようなスクリプトを探してみました。

こちらもjQueryのプラグインで、canvasタグではなく画像として出力してくれるようです。

早速、ダウンロードして使ってみようとしたらminファイルが無く、中身もやたら短いです。

覗いてみると、どうやらGoogle Chatsを使って画像出力をしているようです。

Google Chartsといえば、以前グラフなどを作成したりしてみました。

関連：JavaScriptで簡単にグラフが作成できる「Google Charts」

使い方も簡単そうで、imgタグのsrcにGoogle Chartsを通じて出力したい文字列を渡すだけ。

https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello%20world

https://chart.googleapis.com/chartというURLにパラメータを渡すことで画像として返却してくれるみたいです。

chsで画像の大きさを、chtで画像の形式を、chlで出力する内容を指定するようですね。

他にも数式などを出力することが可能です。実は以前に使ったことがありました。

関連：32-16÷2は？

これならスマートフォンで訪問したユーザに対してもQRコードを出力することができそうです。

試しに当ブログのURLを示すQRコードを描いてみました。