~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月26日土曜日

これは凄い!!Google Chartを使用してURLからQRコードを作成できる


スポンサーリンク

URLなどをQRコードに変換する場合、Web上のQRコード変換サービスなどを使用して、QRコードの画像を作成し、その画像をブログなどに張り付ける利用方法が主だと思っていました。

しかし!! Google Chartの機能を利用すると、<img>タグのsrc属性にQRコードに変換したいURLを含むGoogle Chartへのリクエストを指定するだけで、目的のQRコードを作ることができるようです。




これは凄い!!
事前に URL を QR コードの画像に返還しておく必要はありません。
そして、JavaScriptなどでブラウザ側で QR コードを作成しているわけでは無いので、クライアント側の負荷もありません。


早速試してみます。
基本的なGoogle Chartを使用したURLからの QR コード生成のコードは次のようになっています。

<img src="http://chart.apis.google.com/chart?chs=[幅]x[高さ]&cht=qr&chl=[URL]" width="[幅]" height="[高さ]" alt="QR Code" />


[幅], [高さ], [URL] に目的の値を指定します。
例えば、このブログのトップページのURL(http://upa-pc.blogspot.jp/)のQRコードを幅150ピクセル、高さ150ピクセルで作成するには次にように指定します。

<img src="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=http://upa-pc.blogspot.jp/" width="150" height="150" alt="QR Code" />


実際に上記のコードで生成された QR コードは次のようになります。

QR Code

物凄く手軽に QRコードを作成できました!!
今回はURLを固定の文字列としてソースコードに埋め込みましたが、一歩進んだ使い方をすれば、JavaScriptなどで動的に URL を変更して動的に QRコードを生成する使い方も出来そうです。

いろいろと面白い使い方が出来そうです!


参考文献

Google Chart APIでQRコードを作成する方法 [ホームページ作成] All About
http://allabout.co.jp/gm/gc/24013/




スポンサーリンク

コメントを投稿

コメント投稿機能について