読者です 読者をやめる 読者になる 読者になる

「Google Charts」でQRコード生成

service

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

関連:JavaScriptでQRコード生成

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

 

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

Official Demo page for MyQRCode jquery plugin

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

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

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

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

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

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

Getting Started with Infographics - Infographics (Deprecated) — Google Developers

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コードを描いてみました。