この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
スマートフォンを使って瞬時に情報を取得することが出来る便利さがうけて、QRコードはどんどん広まっています。QRコードのおかげで小さな電話のブラウザにコツコツと長文のURLを入力する必要もなくなり、QRスキャナーでスキャンすれば自動的に電話発信までしてくれます。
ディベロッパーとして、QRコードジェネレータの構築方法を考えたことがありますか？Google Chart APIを使えば、思ったより簡単にQRコードジェネレータを作ることが出来ますよ。それでは早速始めてみましょうか！
まずその前に・・・
このチュートリアルを読めば、以下のようなQRコードジェネレータを作り上げることが出来ます。
準備段階として・・・
まずはindex.phpとgen.phpという2つのPHPファイルを作りましょう。
- index.php： こちらはユーザーが作成したQRコードイメージのサイズやエンコード、エラー修正を行うフロントページです。
- gen.php： こちらはGoogle Chart APIからデータを要求し、iframeを使って上記のindex.phpから呼び出されます。
index.phpファイル
<html>
<head></head>
<body>
<div id="container">
<h1>QR code generator</h1>
<div id="generator">
<form target="qrcode-frame" action="gen.php" method="post">
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" value="150x150" checked>150x150<br>
<input type="radio" name="size" value="200x200">200x200<br>
<input type="radio" name="size" value="250x250">250x250<br>
<input type="radio" name="size" value="300x300">300x300<br>
</fieldset>
<fieldset>
<legend>Encoding:</legend>
<input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
<input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
<input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
</fieldset>
<fieldset>
<legend>Content:</legend>
<textarea name="content"></textarea>
</fieldset>
<fieldset>
<legend>Error correction:</legend>
<select name="correction">
<option value="L" selected>L</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H">H</option>
</select>
</fieldset>
<input type="submit" value="Generate"></input>
</form>
</div>
<div id="result">
<iframe name="qrcode-frame" frameborder="0" id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
</div>
</div>
</body>
</html>
コードの最初の部分は、QRコードイメージを作成する為に必要な情報を集める為のHTMLフォームです。フォームのターゲット属性の値が「qrcode-frame」になっていることに注目してください。これでiframe経由で送信するようフォームに指示しています。
<div id="generator">
<form target="qrcode-frame" action="gen.php" method="post">
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" value="150x150" checked>150x150<br>
<input type="radio" name="size" value="200x200">200x200<br>
<input type="radio" name="size" value="250x250">250x250<br>
<input type="radio" name="size" value="300x300">300x300<br>
</fieldset>
<fieldset>
<legend>Encoding:</legend>
<input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
<input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
<input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
</fieldset>
<fieldset>
<legend>Content:</legend>
<textarea name="content"></textarea>
</fieldset>
<fieldset>
<legend>Error correction:</legend>
<select name="correction">
<option value="L" selected>L</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H">H</option>
</select>
</fieldset>
<input type="submit" value="Generate"></input>
</form>
</div>
コードの2つ目の部分はフォームを送信する為に用いられるiframeです。ここでは、ユーザーがページをリフレッシュせずとも継続してQRコードを作れるようにする為にiframeを使用しています。
<div id="result">
<iframe name="qrcode-frame" frameborder="0" id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
</div>
それではブラウザでindex.phpを開いてみてください。以下のような感じになっているかと思います。
このシンプルなCSSスタイルのままでは面白くないので、少しスタイルも加えていきましょう。このチュートリアルではPHPの方に焦点を置きたいので、CSSスタイルの詳しい説明は省略しますね。
<html>
<head>
<style>
body{
width:100%;
margin:0px;
padding:0px;
}
#container{
font-family: Arial, serif;
font-size:12px;
padding-top:20px;
width:700px;
margin: auto;
}
form{
width:300px;
padding: 0px;
margin: 0px;
}
form textarea{
font-family: Arial, serif;
font-size:12px;
width:270px;
margin:5px;
height:40px;
overflow: hidden;
}
iframe{
border:1px solid #DDD;
}
#generator{
width: 300px;
float:left;
}
#generator fieldset{
border:1px solid #DDD;
}
#result{
padding-top:7px;
margin-left:340px;
width: 350px;
}
</style>
</head>
<body>
<div id="container">
<h1>QR code generator</h1>
<div id="generator">
<form target="qrcode-frame" action="gen.php" method="post">
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" value="150x150" checked>150x150<br>
<input type="radio" name="size" value="200x200">200x200<br>
<input type="radio" name="size" value="250x250">250x250<br>
<input type="radio" name="size" value="300x300">300x300<br>
</fieldset>
<fieldset>
<legend>Encoding:</legend>
<input type="radio" name="encoding" value="UTF-8" checked>UTF-8<br>
<input type="radio" name="encoding" value="Shift_JIS">Shift_JIS<br>
<input type="radio" name="encoding" value="ISO-8859-1">ISO-8859-1<br>
</fieldset>
<fieldset>
<legend>Content:</legend>
<textarea name="content"></textarea>
</fieldset>
<fieldset>
<legend>Error correction:</legend>
<select name="correction">
<option value="L" selected>L</option>
<option value="M">M</option>
<option value="Q">Q</option>
<option value="H">H</option>
</select>
</fieldset>
<input type="submit" value="Generate"></input>
</form>
</div>
<div id="result">
<iframe name="qrcode-frame" frameborder="0" id="qrcode" src="gen.php" height="315px;" width="350px"></iframe>
</div>
</div>
</body>
</html>
ではもう一度index.phpを開いてみましょうか。今度はこんな感じになっているかと思います。
gen.phpファイル
下記のコードをgen.phpファイルにコピペしてください。
<?php
//1
if(isset($_REQUEST['content'])){
//2
$size = $_REQUEST['size'];
$content = $_REQUEST['content'];
$correction = strtoupper($_REQUEST['correction']);
$encoding = $_REQUEST['encoding'];
//3
$rootUrl = "https://chart.googleapis.com/chart?cht=qr&chs=$size&chl=$content&choe=$encoding&chld=$correction";
//4
echo '<img src="'.$rootUrl.'">';
}
?>
- ページにポストされたデータがある場合に限り、リクエストを実行してください。
- $_REQUESTを使ってデータをキャプチャし、別の変数に格納してください。
- Google Chart APIでURLを構築し、上記でキャプチャしたデータをURLに追加してください。
- Google Chart APIが作成したデータと同じ内容を含むimgタグを出力してください。
早速オリジナルQRコードを生成してみましょう！
これでもう完成です！自作のQRコードジェネレータはうまく動いてくれるはずですよ。ブラウザからindex.phpをナビゲートして、必要情報を入力し、「Generate」ボタンを押してみてください。
即座にQRコードが作成されるのを確認出来るかと思いますよ。
