メニュー 閉じる

QRコードを自動的に生成するスクリプト


パソコンでインターネットを介して眺めていた情報をスマホやタブレットで持ち出したい時にどうするかということを考えてみた。

  • アドレスバーを凝視してURLを入力してアクセスしてブックマーク
  • ソーシャルブックマークにブックマーク
  • ソーシャルメディアで共有してメモ
  • スマホにメールを送って、スマホでメールを開いてアクセスしてブックマーク

これの中間くらいのことができないかな、と思って使っていたのは、たたみラボのブックマークレット。現在開いているページからこのブックマークレットを起動することで、そのページのURLがそのままQRコードとなって表示される。

これ便利!

QRコード - photopierre.com

【リンク】たたみラボ 今開いているURLをQRコードに変換するブックマークレット http://www.tatamilab.jp/rnd/archives/000192.html

2次元コードの上に乗ってるキイロい帯と文字はフォトPがあとから加工したものです。QRコードはエラー訂正性がかなり良いので汚損や破損といったことがあってもコードの再現性が高いのが特長です。

ページURLのQRコードを提供しておく仕組み

ニンゲンは欲深い動物です。目の前のディスプレイに表示されたページをスマホで共有するためにわざわざQRコードを自ら発行するヒトがいるということは、初めからQRコードを表示しとけばよくね? そう考えるヒトもおられるようで、jquery.MyQRCode.js という便利なスクリプトを紹介します。

  • QRコードを表示したいIDまたはCLASS等
  • 文字コード
  • QRコード化したい文字列
  • サイズ

これらを指定するだけの簡単仕様。

$("#qrcode").MyQRCode({
encoding:"UTF-8",
content: "QRコードにしたい文字列",
size:"150x150"
});
//OR just
$(function(){
$("#qrcode").MyQRCode();
});

サンプルにはこう書いてあるので、「今表示してるページのURLのQRコード」ということなら、こう書けばいい。

$("#qrcode").MyQRCode({
encoding:"UTF-8",
content: location.href,
size:"150x150"
});

  • 出力先のIDが「#qrcode」
  • 文字コードはUTF-8
  • サイズ150×150px

ちなみに、このオプションでよければ jquery.MyQRCode.js 内に既に書かれていることなので、オプション宣言はこれだけでいいということです。

$(function(){
$("#qrcode").MyQRCode();
});

つまり、<head>内にスクリプト読み込みを(jQueryのバージョンやjquery.MyQRCode.jsのパス等は自分の環境にあわせて)。

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.MyQRCode.js"></script>

そして、<html>内のQRコードを表示したい場所に

<div id="qrcode"></div>

これだけだ。#qrcode にはcssで見た目の情報を指定してやればいいでしょう。

意外にもかなり短いコードです

Google Chart Api を使用しているということで、こんなに短くできちゃうのか、と感心した。これだけのことなら Google Chart Api を直接ごにょごにょすればいいじゃん、と思うのでしたらこのプラグインは不要ですよね。
http://www.kfsoft.info/MyQRCode/jquery.MyQRCode.js(アーカイブ)

ホントに役に立つんだろか?

QRコードは、少なくともニッポン国内では意外に利用が多いらしい。ガラケー/スマホ問わず、知らない観光地で観光案内にあれば読み取ってアクセスしてみる、なんていうのはけっこう使われているらしい。

確かに、都会と比べると観光地=辺縁町村では、独自URLじゃなかったり、間にチルダ「~」が入っていたり、役場が提示するURLが無駄に長かったりすることが多い。それを指でぽちぽちやるのはかなり面倒なのだが、QRコードを読み取ればいいとなれば話はまた別だ。

とくに、無味乾燥で機械的なURLになりがちなブログなんかには、こういうスクリプトを埋め込んでおくことが拡散の一助になるように感じます。

【リンク】KFSoft http://www.kfsoft.info/MyQRCode/

iPhoneだからQRコードNGということはない

これだけニッポンでQRコードが普及してしまったのは、ケータイにアプリがあらかじめインストールされていたという罪は大きいと思います。プリインストールされたままのクソブラウザInternet Explorer古くなって使いにくかろうブラウザをいつまでも使いたがるような国民性との相乗効果でしょう。

そのように市場によって内容を変化させない強気の iPhone 等の iOSシリーズには、プリインストールされたバーコードリーダが無いようですが、もちろんセルフインストールすればよいのです。

QRコードリーダー for iPhoneたとえば、QRコードリーダー for iPhone などのアプリをインストールすれば、2次元コードの読み取りができるようになります。アプリによってできることできないことがいろいろあると思います。検索してみて、お気に入りのアプリを見つけてみてください。


Posted in ウェブ関連
3.5 2 評価
Article Rating
ウォッチする
通知
0 Comments
インラインフィードバック数
すべてのコメントを表示

関連してるかもしれない記事