ikr7/index.html

## index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>写真から商品判別するくん</title>
		<style>

table, th, td {
	border: 1px solid black;
}

		</style>
	</head>
	<body>
		<h1>写真から商品判別するくん パワードバイ ドコモのAPI</h1>
		<a href="./sp.html">スマホ版</a>
		<form>
			<p>
				<label for="file-select">商品の写真を撮るぞ</label>
				<input type="button" id="camera-start" value="カメラ起動">
				<input type="button" id="camera-shutter" value="撮影">
				<div id="camera">
					<video autoplay id="video"></video>
					<canvas id="canvas"></canvas>
				</div>
			</p>
			<p>
				<label for="recog">物体の種類を選んでくれると精度が上がるぞ</label>
				<select id="recog">
					<option value="product-all">なんでも認識(精度下がるかも)</option>
					<option value="book">本</option>
					<option value="cd">CD</option>
					<option value="dvd">DVD</option>
					<option value="game">ゲームソフト</option>
					<option value="software">パソコンソフト</option>
					<option value="food">食品(キャベツとかサバとかじゃなくてパッケージ画像な)</option>
				</select>
			</p>
			<p>
				<input type="submit" id="submit">
			</p>
		</form>
		<div id="output"></div>
		<script>

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
URL = URL || webkitURL;

var APIKEY = '39706536463169714d774331654c44362f33626c6f79576c627958476e304f414c6a4648352f4259487a37';
var numOfCandidates = 10;

var output = document.querySelector('#output');

var photoWidth = 256;
var photoHeight = (photoWidth * (2 / 3)) | 0;

var camera = document.querySelector('#camera');

var video = document.querySelector('#video');
video.width = photoWidth;
video.height = photoHeight;

var canvas = document.querySelector('#canvas');
canvas.width = photoWidth;
canvas.height = photoHeight;

var context = canvas.getContext('2d');

var dataURL2Blob = function(dataURL, type){
	var bin = atob(dataURL.split('base64,')[1]);
	var barr = new Uint8Array(bin.length);
	var i = 0;
	while (i < bin.length){
		barr[i] = bin.charCodeAt(i);
		i++;
	}
	return new Blob([barr], {
		'type': type
	});
};

document.querySelector('#camera-start').addEventListener('click', function(){
	navigator.getUserMedia({
		'video': true,
		'audio': false
	}, function(mediaStream){
		video.src = URL.createObjectURL(mediaStream);
	}, function(err){
		console.log(err);
	});
}, false);

document.querySelector('#camera-shutter').addEventListener('click', function(){
	context.drawImage(video, 0, 0, photoWidth, photoHeight);
}, false);

document.querySelector('#submit').addEventListener('click', function(e){

	e.preventDefault();
	output.innerHTML = '';

	var image = dataURL2Blob(canvas.toDataURL('image/jpeg'), 'image/jpeg');
	var xhr = new XMLHttpRequest();

	xhr.addEventListener('load', function(){

		alert('やったぜ。');

		var data;

		try{
			data = JSON.parse(xhr.responseText);
		}catch(e){
			alert('JSONがパースできなかったぞい！');
			return;
		}

		console.log(data);

		output.innerHTML += '<p>recognitionId: ' + data.recognitionId + '</p>';

		if(!data.candidates || data.candidates === []){
			alert('なんにもみつかんなかったはｗ');
			return;
		}

		var table = document.createElement('table');
		var thdr = document.createElement('tr');

		thdr.innerHTML =
			'<th>score(スコア)</th>' +
			'<th>itemId(ID)</th>' +
			'<th>category(カテゴリ)</th>' +
			'<th>画像</th>' +
			'<th>detail.itemName(商品の名称)</th>' +
			'<th>detail.releaseDate(商品の発売日)</th>' +
			'<th>detail.ageRequirement(年齢制限)</th>' +
			'<th>リンク(Amazonである確率が高い)</th>';

		table.appendChild(thdr);

		data.candidates.forEach(function(candidate){
			var tr = document.createElement('tr');
			tr.innerHTML =
				'<td>' + (candidate.score || 'わからん') + '</td>' +
				'<td>' + (candidate.itemId || 'わからん') + '</td>' +
				'<td>' + (candidate.category || 'わからん') + '</td>' +
				'<td>' + '<img src=\"' + candidate.imageUrl + '\" width=\"128\">' + '</td>' +
				'<td>' + (candidate.detail.itemName || 'わからん') + '</td>' +
				'<td>' + (candidate.detail.releaseDate || 'わからん') + '</td>' +
				'<td>' + (candidate.detail.ageRequirement || 'わからん') + '</td>' +
				'<td>' + '<a href=\"' + (candidate.sites[0].url || '#') + '\">' + (candidate.sites[0].title || 'リンク') + '</a>' + '</td>';
			table.appendChild(tr);
		});

		output.appendChild(table);

	}, false);

	xhr.addEventListener('error', function(){
		alert('ダメだった');
	}, false);

	var url =
		'https://api.apigw.smt.docomo.ne.jp/imageRecognition/v1/recognize?' +
		'recog=' + document.querySelector('#recog').value + '&' +
		'numOfCandidates=' + numOfCandidates + '&' +
		'APIKEY=' + APIKEY;

	xhr.open('POST', url, false);
	xhr.send(image);

}, false);

		</script>
	</body>
</html>

## sp.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>写真から商品判別するくん</title>
		<style>

table, th, td {
	border: 1px solid black;
}

		</style>
	</head>
	<body>
		<h1>写真から商品判別するくん パワードバイ ドコモのAPI スマホ版</h1>
		<a href="./">PC版</a>
		<form>
			<p>
				<label for="file-select">商品の写真を選べ</label>
				<input type="file" id="file-select" accept="image/*">
			</p>
			<p>
				<label for="recog">物体の種類を選んでくれると精度が上がるぞ</label>
				<select id="recog">
					<option value="product-all">なんでも認識(精度下がるかも)</option>
					<option value="book">本</option>
					<option value="cd">CD</option>
					<option value="dvd">DVD</option>
					<option value="game">ゲームソフト</option>
					<option value="software">パソコンソフト</option>
					<option value="food">食品(キャベツとかサバとかじゃなくてパッケージ画像な)</option>
				</select>
			</p>
			<p>
				<input type="submit" id="submit">
			</p>
		</form>
		<div id="state"></div>
		<div id="output"></div>
		<script>

var APIKEY = '39706536463169714d774331654c44362f33626c6f79576c627958476e304f414c6a4648352f4259487a37';
var numOfCandidates = 10;
var state = document.querySelector('#state');
var output = document.querySelector('#output');

document.querySelector('#submit').addEventListener('click', function(e){

	e.preventDefault();
	output.innerHTML = '';
	state.innerHTML = 'ちょっと待て';

	var files = document.querySelector('#file-select').files;
	var reader = new FileReader();

	reader.addEventListener('load', function(e){

		var buf = e.target.result;

		var xhr = new XMLHttpRequest();

		xhr.addEventListener('load', function(){

			state.innerHTML = '';
			alert('やったぜ。');

			var data;

			try{
				data = JSON.parse(xhr.responseText);
			}catch(e){
				alert('JSONがパースできなかったぞい！');
				return;
			}

			console.log(data);

			output.innerHTML += '<p>recognitionId: ' + data.recognitionId + '</p>';

			if(!data.candidates){
				output.innderHTML += '<p>なんにもみつかんなかったはｗ</p>';
				return;
			}

			var table = document.createElement('table');
			var thdr = document.createElement('tr');

			thdr.innerHTML =
				'<th>score(スコア)</th>' +
				'<th>itemId(ID)</th>' +
				'<th>category(カテゴリ)</th>' +
				'<th>画像</th>' +
				'<th>detail.itemName(商品の名称)</th>' +
				'<th>detail.releaseDate(商品の発売日)</th>' +
				'<th>リンク(Amazonである確率が高い)</th>';

			table.appendChild(thdr);

			data.candidates.forEach(function(candidate){
				var tr = document.createElement('tr');
				tr.innerHTML =
					'<td>' + (candidate.score || 'わからん') + '</td>' +
					'<td>' + (candidate.itemId || 'わからん') + '</td>' +
					'<td>' + (candidate.category || 'わからん') + '</td>' +
					'<td>' + '<img src=\"' + candidate.imageUrl + '\" width=\"128\">' + '</td>' +
					'<td>' + (candidate.detail.itemName || 'わからん') + '</td>' +
					'<td>' + (candidate.detail.releaseDate || 'わからん') + '</td>' +
					'<td>' + '<a href=\"' + (candidate.sites[0].url || '#') + '\">' + (candidate.sites[0].title || 'リンク') + '</a>' + '</td>';
				table.appendChild(tr);
			});

			output.appendChild(table);

		}, false);

		xhr.addEventListener('error', function(){
			state.innerHTML = 'ダメだった';
			alert('なにかがおかしいよ');
		}, false);

		var url =
			'https://api.apigw.smt.docomo.ne.jp/imageRecognition/v1/recognize?' +
			'recog=' + document.querySelector('#recog').value + '&' +
			'numOfCandidates=' + numOfCandidates + '&' +
			'APIKEY=' + APIKEY;

		xhr.open('POST', url, false);
		xhr.send(buf);

	}, false);

	if(!files[0]){
		alert('ファイル選べやコラ');
		return;
	}

	reader.readAsArrayBuffer(files[0]);

}, false);

		</script>
	</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>写真から商品判別するくん</title>
	<style>

	table, th, td {
	border: 1px solid black;
	}

	</style>
	</head>
	<body>
	<h1>写真から商品判別するくんパワードバイドコモのAPI</h1>
	<a href="./sp.html">スマホ版</a>
	<form>
	<p>
	<label for="file-select">商品の写真を撮るぞ</label>
	<input type="button" id="camera-start" value="カメラ起動">
	<input type="button" id="camera-shutter" value="撮影">
	<div id="camera">
	<video autoplay id="video"></video>
	<canvas id="canvas"></canvas>
	</div>
	</p>
	<p>
	<label for="recog">物体の種類を選んでくれると精度が上がるぞ</label>
	<select id="recog">
	<option value="product-all">なんでも認識(精度下がるかも)</option>
	<option value="book">本</option>
	<option value="cd">CD</option>
	<option value="dvd">DVD</option>
	<option value="game">ゲームソフト</option>
	<option value="software">パソコンソフト</option>
	<option value="food">食品(キャベツとかサバとかじゃなくてパッケージ画像な)</option>
	</select>
	</p>
	<p>
	<input type="submit" id="submit">
	</p>
	</form>
	<div id="output"></div>
	<script>

	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;
	URL = URL \|\| webkitURL;

	var APIKEY = '39706536463169714d774331654c44362f33626c6f79576c627958476e304f414c6a4648352f4259487a37';
	var numOfCandidates = 10;

	var output = document.querySelector('#output');

	var photoWidth = 256;
	var photoHeight = (photoWidth * (2 / 3)) \| 0;

	var camera = document.querySelector('#camera');

	var video = document.querySelector('#video');
	video.width = photoWidth;
	video.height = photoHeight;

	var canvas = document.querySelector('#canvas');
	canvas.width = photoWidth;
	canvas.height = photoHeight;

	var context = canvas.getContext('2d');

	var dataURL2Blob = function(dataURL, type){
	var bin = atob(dataURL.split('base64,')[1]);
	var barr = new Uint8Array(bin.length);
	var i = 0;
	while (i < bin.length){
	barr[i] = bin.charCodeAt(i);
	i++;
	}
	return new Blob([barr], {
	'type': type
	});
	};

	document.querySelector('#camera-start').addEventListener('click', function(){
	navigator.getUserMedia({
	'video': true,
	'audio': false
	}, function(mediaStream){
	video.src = URL.createObjectURL(mediaStream);
	}, function(err){
	console.log(err);
	});
	}, false);

	document.querySelector('#camera-shutter').addEventListener('click', function(){
	context.drawImage(video, 0, 0, photoWidth, photoHeight);
	}, false);

	document.querySelector('#submit').addEventListener('click', function(e){

	e.preventDefault();
	output.innerHTML = '';

	var image = dataURL2Blob(canvas.toDataURL('image/jpeg'), 'image/jpeg');
	var xhr = new XMLHttpRequest();

	xhr.addEventListener('load', function(){

	alert('やったぜ。');

	var data;

	try{
	data = JSON.parse(xhr.responseText);
	}catch(e){
	alert('JSONがパースできなかったぞい！');
	return;
	}

	console.log(data);

	output.innerHTML += '<p>recognitionId: ' + data.recognitionId + '</p>';

	if(!data.candidates \|\| data.candidates === []){
	alert('なんにもみつかんなかったはｗ');
	return;
	}

	var table = document.createElement('table');
	var thdr = document.createElement('tr');

	thdr.innerHTML =
	'<th>score(スコア)</th>' +
	'<th>itemId(ID)</th>' +
	'<th>category(カテゴリ)</th>' +
	'<th>画像</th>' +
	'<th>detail.itemName(商品の名称)</th>' +
	'<th>detail.releaseDate(商品の発売日)</th>' +
	'<th>detail.ageRequirement(年齢制限)</th>' +
	'<th>リンク(Amazonである確率が高い)</th>';

	table.appendChild(thdr);

	data.candidates.forEach(function(candidate){
	var tr = document.createElement('tr');
	tr.innerHTML =
	'<td>' + (candidate.score \|\| 'わからん') + '</td>' +
	'<td>' + (candidate.itemId \|\| 'わからん') + '</td>' +
	'<td>' + (candidate.category \|\| 'わからん') + '</td>' +
	'<td>' + '<img src=\"' + candidate.imageUrl + '\" width=\"128\">' + '</td>' +
	'<td>' + (candidate.detail.itemName \|\| 'わからん') + '</td>' +
	'<td>' + (candidate.detail.releaseDate \|\| 'わからん') + '</td>' +
	'<td>' + (candidate.detail.ageRequirement \|\| 'わからん') + '</td>' +
	'<td>' + '<a href=\"' + (candidate.sites[0].url \|\| '#') + '\">' + (candidate.sites[0].title \|\| 'リンク') + '</a>' + '</td>';
	table.appendChild(tr);
	});

	output.appendChild(table);

	}, false);

	xhr.addEventListener('error', function(){
	alert('ダメだった');
	}, false);

	var url =
	'https://api.apigw.smt.docomo.ne.jp/imageRecognition/v1/recognize?' +
	'recog=' + document.querySelector('#recog').value + '&' +
	'numOfCandidates=' + numOfCandidates + '&' +
	'APIKEY=' + APIKEY;

	xhr.open('POST', url, false);
	xhr.send(image);

	}, false);

	</script>
	</body>
	</html>