ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

もはやモバイルとは切っても切れない関係となっているQRコードですが、JavaScriptを使ってQRコードを作れるjQueryプラグイン「jQuery.qrcode」というものがあるようです。

ダウンロードはこちらのgithubのサイトから行えます。

→　github　jeromeetienne / jquery-qrcode [github.com]

簡単な解説はこちらです。

→　jquery.qrcode.js – Jerome Etienne [jeromeetienne.github.com]

このQRコードは実際に「jQuery.qrcode」を使って表示しています。
ブログ上からでも普通に使えていますね。
（※canvas非対応ブラウザの場合は表示されません）

HTMLはこんな感じです。

<div id="qrcode" align="center"></div>
<script type="text/javascript" src="/blog/wp-content/uploads/2011/04/jquery-1.5.2.min_.js"></script>
<script type="text/javascript" src="/blog/wp-content/uploads/2011/04/jquery.qrcode.min_.js"></script>
<script type="text/javascript">
jQuery('#qrcode').qrcode("http://ke-tai.org/");
</script>

従来はサーバサイドでライブラリを使って画像を生成し表示するなど、大がかりな対応をしなくてはなりませんでしたが、このようにJSで表示できるのは便利ですね。

軽く調べてみた感じでは今のところ表示サイズの変更などは出来なさそうなのと、canvasで描画を行っているのでIEなど（IE9は除く）非対応なブラウザがあることが課題になりそうです。

関連：

• JavaScriptでリアルタイムにQRコードを生成してくれるサイト「QR CODE.biz」
• 村上隆とヴィトンのコラボQRコードがすごい件
• 画像や文字入りのQRコードが作成できる「シーマン QRコード(二次元バーコード）作成」