ウェブ学のすすめ

Study of Web Design & Programing

QRコード作成サイト（jQueryMobile版）

jQueryMobile API

jQueryMobileでQRコード作成サイトを作ってみました。大きさ、色を変更できるようになっています。

プレビュー

QRコード作成サイト

↓QRコード（ちなみに今回作成したサイトで作成したQRコードです）

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格：無料

コード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>QRコード作成サイト</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style>
.ui-content {
	text-align:center;
}
</style>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>QRコード作成</h1> 
</div>
<div data-role="content">
<p>QRコードにしたい文字を入力してください</p>
<form action="qrcod.php" method="get">
<div data-role="fieldcontain">
<label for="keyword">キーワード</label>
<input type="text" id="keyword" name="keyword">
</div>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    	<legend>大きさ</legend>
        <input type="radio" name="size" id="size1" value="120x120" checked="checked">
        <label for="size1">120x120</label>
        <input type="radio" name="size" id="size2" value="150x150">
        <label for="size2">150x150</label>
        <input type="radio" name="size" id="size3" value="180x180">
        <label for="size3">180x180</label>
    </fieldset>
</div>    

<div data-role="fieldcontain">
	<label for="select" class="select">セルカラー</label>
	<select name="cell" id="select" data-native-menu="false">
		<option value="ffffff">ホワイト</option>
		<option value="000000" selected>ブラック</option>
		<option value="ff6600">オレンジ</option>
		<option value="2D89F0">ブルー</option>
                <option value="01A31C">グリーン</option>
                <option value="BC1C48">レッド</option>
	</select>
</div>  

<div data-role="fieldcontain">
	<label for="select" class="select">背景カラー</label>
	<select name="background" id="select" data-native-menu="false">
		<option value="ffffff" selected>ホワイト</option>
		<option value="000000">ブラック</option>
                <option value="ff6600">オレンジ</option>
		<option value="2D89F0">ブルー</option>
                <option value="01A31C">グリーン</option>
                <option value="BC1C48">レッド</option>
	</select>
</div>  
<div data-role="fieldcontain">
<input type="submit" value="QRコード生成" data-theme="b" data-icon="arrow-r">
</div>  
</form>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton </h4>
</div>
</div>
</body>
</html>

qrcod.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>QRコード作成サイト</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style>
.ui-content {
	text-align:center;
}
</style>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>QRコード作成</h1>
<a href="index.html" data-icon="back">戻る</a>
</div>
<div data-role="content">
<p>生成されたQRコード</p>
<?php
$keyword = $_GET["keyword"];
$keywordurl = urlencode($keyword);
$size = $_GET["size"];
$cell = $_GET["cell"];
$background = $_GET["background"];

$url = "http://chart.apis.google.com/chart?chs=$size&cht=qr&chco=$cell,$background&chl=$keywordurl";

echo "<img src=\"$url\">";
echo "<p>$url</p>";
?>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton </h4>
</div>
</div>
</body>
</html>