携帯サイト連動用にQRコードと、URL送信フォーム設置

2009-06-10［Webサイト構築│運営サイト］

当サイトではアフィリエイト広告を利用しています。

折角パソコンと携帯両方で見られるブログを作ったので、パソコンから携帯にURLを渡せる仕組みとして「QRコード」と「URL送信フォーム」の２つを設置してみました。

設置したのは「監督「三池崇史」の作品を観る」

QRコード

QRコードとは２次元バーコードの一種で、カメラ付き携帯のカメラで認識させることで任意の情報を携帯に転送することができます。

実際に掲載したQRコード

ちなみに、QRコードは特別なソフトがなくてもWeb上で簡単（もちろん無料）に生成することが可能です。

今回は「QRのススメ」というサイトで作成しましたが、掲載したQRコードの他にもサイズや色があり、自由に選ぶことができるため、サイトの雰囲気を損なわず設置ができます。

QRコードの読み取りはほとんどの携帯電話で可能なため、携帯と連動させれる定番となっていますね。

URL送信フォーム

QRコードだけでも良かったのですが、QRコードは情報を入力して生成するため、個別ページに使うには手間がかかり過ぎるという欠点があります。

そこで用意したのが、URL送信フォームです。

実際に掲載したURL送信フォーム

これを使うと現在閲覧しているページのURLを任意のアドレス（おもに携帯が対象）にワンクリックで送信することができます。

送信フォームにはlike pigs in cloverで配布している「携帯対応簡易フォームメール」を使用させてもらいました、like pigs in cloverさんありがとうございます。

URL送信フォーム設置のポイント

携帯対応簡易フォームメールを使ってURLを送信するには少しだけ工夫が必要だったので、箇条書きでまとめておきます。

＜Wordpress側＞
・表示用フォームを設置（フォームに元々あるものは使用しない）
・送信URLは「」で取得し、valueに入れる

※どうも、URLを取得する「」がフォーム内だとうまく持ってこれないようなので、外側にだしています。

実際に導入した表示用フォームはこれ

<form action='スクリプトURL' method="post" onSubmit="return submitChk()">

<dl style="margin: 10px 0 0 0 ;">

<dt><span class="tags">携帯へURLを送信</span></dt>

<dd>

<p>メールアドレスを入力して送信してくだい。</p>

<p class="input"><label for="email">E-Mail</label>：<input type=text name=mail size=30><br>

<label for="body">送信URL</label>：<input type=text name=body size=50 value="<?php the_permalink() ?>">

<input type="submit" class="submit" value="送信"><input type=hidden name=go value=true>

</p>

<p class="attention">※ドメイン指定受信を設定されている方は「@junkword.net」を受信できるよう指定して下さい。</p>

</dd>

</dl>

</form>

＜スクリプト側＞
・入力者へメールを送信するように設定
・送信メールの文言を調整

※入力したアドレスにURLを送るので当然の処理ですが、副作用として管理用メールアドレスにも同じ内容が届くため、どのページが送信されたかわかるようになります。

＜注意＞
この処理はWordpress専用になるので、Movable Typeだとちょっと違ってくると思いますが、個別ページのURLが表示できて、フォームメール（使ったのはPHP版）が動かせれば同じことは可能だと思います。

ちなみに、Movable Typeで個別ページのURLを表示させるには「<$MTEntryPermalink$>」を使えばOKなはず。

＜追記＞
テストしたところ、Movable Typeは「<?php the_permalink() ?>」を「<$MTEntryPermalink$>」に書き換えればOKでした。
Movable Typeを使っている人は書き換えて使用してください。

＜追記２＞

Movable Typeの携帯対応をWeb2.0 Laboの「MT4keitai」で行う場合、PCと携帯ではURLが変わってしまうので上記の方法では正しい携帯用のURLを送信することはできません。

したがって、正しい携帯用のURLを表示させるには、MT4keitaiで設定したマッピングの情報を持ってくる必要があります。

MT4keitaiの使用方法では、個別ページのマッピングは「m/<$MTEntryID$>.html」となっているので、「<?php the_permalink() ?>」の所に「<$MTBlogURL$>m/<$MTEntryID$>.html」と入力すればOKです。

※実際にテストをしていないので、ちゃんと動くかは保証できません
※マッピングを変更している人はそれに合わせて書き換えてください