MB-Support

パソコン初心者のサポートページ

ページ毎に異なる
QRコードを設置しました


当サイトはケータイに対応していませんが、スマートフォンではPC用のWEBサイトが閲覧可能みたいなので、各ページにQRコードを設置してみました。設置場所は、左メニューの中程で、JavaScriptが利用できる環境のみ表示されます。QRコードはマトリックス型二次元コードで、デンソーウェーブの登録商標です。カメラ内蔵のケータイやスマートフォンで読み込めます。

トップページのアドレスを埋め込んだQRコードを全ページに設置するのも構いませんが、今回は「Google Chart API(グーグルが提供しているグラフ作成サービス)」を使って、各ページのアドレスを埋め込んだQRコードを自動で表示させます。Google Chart APIでQRコードを作成するには、chs(画像サイズ)、choe(文字コード)、Chi(テキスト)を、次のアドレスに指定します。

<img src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl=アドレス" />

例えば、上のソースでは、QRコードのサイズが150px×150px、エンコードが多くのケータイで使われているShift_JIS、chlにQRコードに埋め込みたいアドレスを入力します。ドコモのケータイだけは、ブックマーク機能のQRコードが使えるらしく、chlに次の形式で埋め込みます。

<img src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl=MEBKM:TITLE:タイトル;URL:アドレス;;" />

しかし、ドコモ以外のケータイでは利用できないので、単純にアドレスをテキストとして埋め込んだ方が良いでしょう。例えば、当サイトのトップページ(http://mbsupport.dip.jp/)のQRコードを作成するならば、以下のようになります。

<img src="http://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl=http://mbsupport.dip.jp/" />

これをjQueryとPHPを使って表示します。なぜならば、全てのページに異なるアドレスを入力するは面倒だからです。必要なファイルはqr.js、qr.phpの二つです。



qr.js

function qt(url) {
 var address = "http://ドメイン/qr.php?url="+url+"";
 $(document).ready(function(){ $("#qr").load(address); });
}


qr.php

<?php
if (isset($_GET[url])) {
 $url = $_GET[url];
 $item = <<<EOD
<img src="http://chart.apis.google.com/chart?cht=qr&chs=120x120&choe=Shift_JIS&chl={$url}" />
EOD;
 print ("$item");
}
?>

全てのページのQRコードを表示したい場所に<span id="qr"></span>を記入して、</body>の上にjavascriptを記入します。


qr_test.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
<script type="text/javascript" src="qr.js"></script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<span id="qr"></span> <//-- ここにqr.phpのQRコードが読み込まれる -->
<script type="text/javascript" language="javascript">
<!--
qr(''+encodeURIComponent(location.href)+''); //アドレスを取得
//-->
</script>
</body>
</html>
サンプルページ


さて、実際に作成されたQRコードが正しいかどうか確認するために、ケータイやスマートフォンを利用しても構いませんが、Windows 上でQRコードを読み取れるフリーソフト「QR Code Editor Psytec」があります(QRコードの作成はもちろん)。圧縮フォルダー(zip形式)をダウンロードしてデスクトップで展開すると、「PsQREdit」フォルダーが作成されるので、この中の「PsQREdit.exe」をダブルクリックして起動します。なお、Windowsインストール初期状態では拡張子.exeは表示されません。しかし、今回の動作に支障はありません。

QR Code Editor - ベクターソフト


「QR Code Editor」が起動したら、「ファイル(F)」をクリックして、さらに「スクリーン画像読み取り(D)」をクリックします。



デスクトップ全体がライトブルーになるので、マウスでドラッグ&ドロップしてQRコードの場所を白くします。



「QR Code Editor」がQRコードを認識して、埋め込まれたテキストを表示してくれます。今回は当サイトのトップページで実験したので、トップページのアドレスが読み取れました。意図した動作をしている事を確認できます。このツールを使った確認方法は、スクリーンキャプチャーしたので、以下のビデオを参照して下さい。






ベイカー街 221B 間取り

ホームズの冒険 Bly-Ray

“シャーロック・ホームズ”が活躍する、アーサー・コナン・ドイル原作による名作探偵TVドラマの BOX。腕利きの名探偵、シャーロック・ホームズとその相棒、ジョン・H・ワトスン博士の華麗な推理劇を描く。全 41 話を収録。12 枚組。特製ブックレット封入。

ベイカー街の地図

グラナダTV版ホームズの冒険テレビシリーズに登場する『BAKER STREET』のセットは、1890 年代を想定してマンチェスターのキャッスルフィールドに建設されました。郵便局、家具店、果物屋、ワイン店、仕立屋、本屋、宝石店、床屋、不動産屋、葬儀屋などが作られ、突き当たりのリージェント・パークは、立地的に高い建物が映り込むのを防ぐ苦肉の策です。最初のラフスケッチからセット完成まで、1982 年の 1 月から 5 月とあります。いくつかのセットは屋内も作られており、221B、床屋、本屋、家具屋、煙草屋は、室内での撮影もあります。

ベイカーストリートの地図:グラナダTV『シャーロック・ホームズの冒険

Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項