開発日誌

JavaScriptを使ってサイトにQRコードを貼ってみる

PCサイトからモバイル向けサイトへ誘導したい事がよくありますが、そんな時はやはりQRコードが利便性が高いですね。
(※QRコードは(株)デンソーウェーブの登録商標です)


今回はQRコードのAPIをJavaScriptを使って使用する方法を紹介します。
今回作ったものはこちらからダウンロードできます。

サンプルダウンロード:sample5.zip


普通QRコードをサイトに貼りたい時、「QRコード作成サイト」などでQRコード画像を作成してサイトに貼りますが、ページ数が多いととても面倒です。
そんな面倒なことはJavaScriptにやらせてしまいましょう!!


QRコードのAPIは Google Chart Tools を使用します。(Google Chart Toolsの詳しい使い方
このAPIはgoogleのAPIサーバーにリクエストをおこなうとQRコード画像を作成してくれる仕組みになっています。
動的にQRコードを生成するには タグのsrcにAPIリクエストをを設置して使います。


それでは試しに「WebシステムのツボURL」のQRコードを生成してみましょう。
APIリクエストの変数chl に"Webシステムのツボ"のURL(http://lab.gpol.co.jp/tsubo/)を設定してみます。

<img src="https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://lab.gpol.co.jp/tsubo/" width="150" height="150" />

 ↓ このHTMLは下のように表示されます



ケータイのQRリーダー機能で確認してみましょう。

うまく表示されました!


それではこのchl の部分をJavaScriptを使って、自動で現在のURL になるように変更します。

<script type="text/javascript">
//<![CDATA[
(function(text, width, height)
	{
		document.write('<img src="https://chart.googleapis.com/chart?cht=qr&amp;chs=' + width + 'x' + height + '&amp;chl=' + text.split('&').join('%26') + '" width="' + width + '" height="' + height + '" alt="QR" />');
	})(document.URL, 150, 150);
//]]>
</script>


実際にこのコードを使用してみました。 ↓

これでモバイル向けサイトへのリンクが簡単におこなえますね。

(teruhisa)

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive