ww24 · November 7, 2011 14:53 · ww24 · Nov 12, 2011
diff --git a/create.html b/create.html
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="stylesheet" href="style.css" />
 		<title>Image Shortener</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			<h1 class="title">URL短縮サービスを利用したオンラインストレージ</h1>
 			<h2 class="title">- Image Shortener -</h2>
 			<p>
 				画像をBase64エンコードし、p.tlで短縮して短いURLに変換します。<br />
 				保存した画像はp.tlでURLとして保管されます。<br />
 				※URLの生成はChrome, Safari, Firefoxで確認しています。<br />
 				※URLの展開ができるのは現時点で、ChromeとSafariのみです。
 			</p>
 			<strong>これはネタです。<br />※保存した画像は削除できませんのでご注意下さい。</strong>
 			<form action="#" id="form">
 				<input id="file" type="file" /><br />
 			</form>
 		</div>
 		<script type="text/javascript">
 			var _gaq = _gaq || [];
 			_gaq.push(['_setAccount', 'UA-26853616-1']);
 			_gaq.push(['_trackPageview']);
 			(function() {
 				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 			})();
 		</script>
 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 		<script type="text/javascript" src="script.js"></script>
 	</body>
 </html>
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
 		<meta charset="utf-8" />
 		<script type="text/javascript">//<![CDATA[
 			var	hash = location.hash.slice(1);
 			(function () {
 				var	split = hash.split("#"),
 					spLen = split.length,
 					ajax = function (url, callback) {
 						var xhr = /*@cc_on!@*/true ? new XMLHttpRequest() : new XDomainRequest();
 						xhr.timeout = 3000;
 						xhr.ontimeout = function () {
 							alert("XHR timeout");
 						};
 						xhr.onerror = function () {
 							alert("XHR error");
 						};
 						xhr.onload = function () {
 							callback(JSON.parse(xhr.responseText).exp);
 						};
 						xhr.open("GET", "http://ux.nu/hugeurl?format=json&url=" + url, false);
 						xhr.send(null);
 					},
 					ready = function () {
 						if (hash.length > 0) {
 							document.write('<meta http-equiv="refresh" content="0;u'+'rl=' + hash + '">');
 						} else {
 							location.replace("create.html");
 						}
 					};
 				if (spLen > 1) {
 					for (var i = 0; spLen > i; i++) {
 						(function () {
 							var count = i;
 							ajax(split[i], function (hugeURL) {
 								split[count] = hugeURL.slice(20);
 								if (spLen - 1 === count) {
 									hash = split.join("");
 									ready();
 								}
 							});
 						})();
 					}
 				} else {
 					ready();
 				}
 			})();
 		//]]></script>
 		<title>Image Shortener</title>
 	</head>
 	<body>
 	</body>
 </html>
diff --git a/script.js b/script.js
 $(function () {
 	if (/*@cc_on!@*/false) alert("IEでは動きません。");
 	var	data = "",
 		submit = true;
 	$("#file").change(function () {
 		var	file = this.files[0];
 		if (file.type.split("/")[0] === "image") {
 			var fr = new FileReader();
 			fr.onload = function () {
 				data = fr.result;
 				var $data = $("#data");
 				if ($data.size() > 0) {
 					$data.remove();
 				}
 				$("#form").append('<div id="data"><img id="img" src="'+ fr.result +'" alt="image" /><br />'+
 					'<span id="info">Source: '+ file.size +'byte, Base64: '+ data.length +'byte <span>'+
 					'<input id="submit" type="submit" value="保存" /></div>');
 				submit = false;
 				if (file.size > 1000000) alert("画像のサイズが大きすぎるため、ブラウザがクラッシュする場合があります。");
 			};
 			fr.readAsDataURL(file);
 		} else {
 			if ($("#data").size() > 0) {
 				$("#data").remove();
 				submit = true;
 			}
 			$("#file").val("");
 			alert("画像を選択して下さい");
 		}
 	});
 	$("#form").submit(function () {
 		if (submit) return false;
 		submit = true;
 		$("#submit").remove();
 		$("#info").remove();
 		var	$url = $("#data").append('Short URL :<input id="url" value="Now loading..." readonly="readonly" />').find("#url"),
 			size = 32510,
 			ajax = function (uri, callback) {
 				$.ajax({
 					type: "post",
 					url: "http://appcloud.info:8098/p.tl/",
 					data: {
 						q: "http://img.ww24.jp/#" + uri
 					},
 					dataType: "text",
 					error: function () {
 						alert("URL短縮中にネットワークエラーが発生しました。");
 					},
 					success: function (result) {
 						var shortURL = $(result).find("#shorturl").attr("value");
 						callback(shortURL);
 					}
 				});
 			},
 			display = function (uri) {
 				$url.val(uri);
 				$url.focus(function () {
 					$(this).select();
 				}).click(function () {
 					$(this).select();
 				});
 			},
 			split = [];
 		for (var i = 0; data.length > size; i++) {
 			split[i] = data.slice(0, size);
 			data = data.slice(size);
 		}
 		for (var j = 0; i > j; j++) {
 			(function () {
 				var	count = j,
 					uri = split[j];
 				ajax(uri, function (url) {
 					split[count] = url;
 					if (i - 1 === count) {
 						ajax(data, function (url) {
 							split[count + 1] = url;
 							ajax(split.join("#"), function (url) {
 								display(url);
 							});
 						});
 					}
 				});
 			})();
 		}
 		if (i < 1) {
 			ajax(data, function (url) {
 				display(url);
 			});
 		}
 		return false;
 	});
 });
diff --git a/server.js b/server.js
 /**
 * Access-Control-Allow-Origin: *
 * Proxy Server
 * 2011/11/06
 * v0.1.0
 */
 var	http = require('http'),
 	url = require('url'),
 	dns = require('dns'),
 	port = 8098;

 process.on('uncaughtException', function (err) {
 	console.log(err);
 });
 var badRequest = function (res) {
 	var body = '400 Bad Request';
 	res.writeHead(400, {
 		'Content-Type': 'text/plain',
 		'Content-Length': body.length
 	});
 	res.end(body, 'utf8');
 };
 http.createServer(function (req, res) {
 	var	urlParse = url.parse(req.url),
 		host = url.parse('http://' + urlParse.pathname.slice(1)).hostname,
 		contentLength = req.headers['content-length'],
 		cL = (typeof(contentLength) !== "undefined");
 	if (host.indexOf('.') !== -1) {
 		var path = (urlParse.pathname.slice(1) + (urlParse.search ? urlParse.search : '')).slice(host.length),
 			reqHeaders = {
 				'Content-Length': cL ? contentLength : 0
 			};
 			if (cL) reqHeaders['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
 		var	request = http.request({
 				host: host,
 				port: 80,
 				path: path,
 				method: req.method,
 				headers: reqHeaders
 			}, function (response) {
 				var isText = function () {
 					var	contentType = response.headers['content-type'];
 						mime = [
 							'text/',
 							'application/json'
 						],
 						len = mime.length;
 					for (var i = 0; len > i; i++) {
 						if (contentType.indexOf(mime[i]) !== -1) return true;
 					}
 					return false;
 				}();
 				if (isText) {
 					res.setHeader('Access-Control-Allow-Origin', 'http://img.ww24.jp');
 					res.writeHead(response.statusCode, response.headers);
 					response.setEncoding('utf8');
 					response.on('data', function (chunk) {
 						res.write(chunk);
 					});
 					response.once('end', function () {
 						res.end();
 					});
 				} else {
 					badRequest(res);
 				}
 			});
 		req.setEncoding('utf8');
 		req.on('data', function (chunk) {
 			request.write(chunk);
 		});
 		req.once('end', function () {
 			request.end();
 		});
 	} else {
 		badRequest(res);
 	}
 }).listen(port);
 console.log('Access-Control-Allow-Origin Server running at '+ port +' port.');
diff --git a/style.css b/style.css
 strong {
 	color				: red;
 }
 .title {
 	text-align			: center;
 }
 #wrapper {
 	width				: 800px;
 	position			: relative;
 	margin				: 0 auto;
 }
 #form {
 	margin				: 15px 0;
 	text-align			: center;
 }
 #img {
 	max-width			: 400px;
 	max-height			: 400px;
 }
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />
	<title>Image Shortener</title>
	</head>
	<body>
	<div id="wrapper">
	<h1 class="title">URL短縮サービスを利用したオンラインストレージ</h1>
	<h2 class="title">- Image Shortener -</h2>
	<p>
	画像をBase64エンコードし、p.tlで短縮して短いURLに変換します。<br />
	保存した画像はp.tlでURLとして保管されます。<br />
	※URLの生成はChrome, Safari, Firefoxで確認しています。<br />
	※URLの展開ができるのは現時点で、ChromeとSafariのみです。
	</p>
	<strong>これはネタです。<br />※保存した画像は削除できませんのでご注意下さい。</strong>
	<form action="#" id="form">
	<input id="file" type="file" /><br />
	</form>
	</div>
	<script type="text/javascript">
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-26853616-1']);
	_gaq.push(['_trackPageview']);
	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
	</script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</body>
	</html>
	$(function () {
	if (/@cc_on!@/false) alert("IEでは動きません。");
	var data = "",
	submit = true;
	$("#file").change(function () {
	var file = this.files[0];
	if (file.type.split("/")[0] === "image") {
	var fr = new FileReader();
	fr.onload = function () {
	data = fr.result;
	var $data = $("#data");
	if ($data.size() > 0) {
	$data.remove();
	}
	$("#form").append('<div id="data"><img id="img" src="'+ fr.result +'" alt="image" /><br />'+
	'<span id="info">Source: '+ file.size +'byte, Base64: '+ data.length +'byte <span>'+
	'<input id="submit" type="submit" value="保存" /></div>');
	submit = false;
	if (file.size > 1000000) alert("画像のサイズが大きすぎるため、ブラウザがクラッシュする場合があります。");
	};
	fr.readAsDataURL(file);
	} else {
	if ($("#data").size() > 0) {
	$("#data").remove();
	submit = true;
	}
	$("#file").val("");
	alert("画像を選択して下さい");
	}
	});
	$("#form").submit(function () {
	if (submit) return false;
	submit = true;
	$("#submit").remove();
	$("#info").remove();
	var $url = $("#data").append('Short URL :<input id="url" value="Now loading..." readonly="readonly" />').find("#url"),
	size = 32510,
	ajax = function (uri, callback) {
	$.ajax({
	type: "post",
	url: "http://appcloud.info:8098/p.tl/",
	data: {
	q: "http://img.ww24.jp/#" + uri
	},
	dataType: "text",
	error: function () {
	alert("URL短縮中にネットワークエラーが発生しました。");
	},
	success: function (result) {
	var shortURL = $(result).find("#shorturl").attr("value");
	callback(shortURL);
	}
	});
	},
	display = function (uri) {
	$url.val(uri);
	$url.focus(function () {
	$(this).select();
	}).click(function () {
	$(this).select();
	});
	},
	split = [];
	for (var i = 0; data.length > size; i++) {
	split[i] = data.slice(0, size);
	data = data.slice(size);
	}
	for (var j = 0; i > j; j++) {
	(function () {
	var count = j,
	uri = split[j];
	ajax(uri, function (url) {
	split[count] = url;
	if (i - 1 === count) {
	ajax(data, function (url) {
	split[count + 1] = url;
	ajax(split.join("#"), function (url) {
	display(url);
	});
	});
	}
	});
	})();
	}
	if (i < 1) {
	ajax(data, function (url) {
	display(url);
	});
	}
	return false;
	});
	});
	/**
	* Access-Control-Allow-Origin: *
	* Proxy Server
	* 2011/11/06
	* v0.1.0
	*/
	var http = require('http'),
	url = require('url'),
	dns = require('dns'),
	port = 8098;

	process.on('uncaughtException', function (err) {
	console.log(err);
	});
	var badRequest = function (res) {
	var body = '400 Bad Request';
	res.writeHead(400, {
	'Content-Type': 'text/plain',
	'Content-Length': body.length
	});
	res.end(body, 'utf8');
	};
	http.createServer(function (req, res) {
	var urlParse = url.parse(req.url),
	host = url.parse('http://' + urlParse.pathname.slice(1)).hostname,
	contentLength = req.headers['content-length'],
	cL = (typeof(contentLength) !== "undefined");
	if (host.indexOf('.') !== -1) {
	var path = (urlParse.pathname.slice(1) + (urlParse.search ? urlParse.search : '')).slice(host.length),
	reqHeaders = {
	'Content-Length': cL ? contentLength : 0
	};
	if (cL) reqHeaders['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
	var request = http.request({
	host: host,
	port: 80,
	path: path,
	method: req.method,
	headers: reqHeaders
	}, function (response) {
	var isText = function () {
	var contentType = response.headers['content-type'];
	mime = [
	'text/',
	'application/json'
	],
	len = mime.length;
	for (var i = 0; len > i; i++) {
	if (contentType.indexOf(mime[i]) !== -1) return true;
	}
	return false;
	}();
	if (isText) {
	res.setHeader('Access-Control-Allow-Origin', 'http://img.ww24.jp');
	res.writeHead(response.statusCode, response.headers);
	response.setEncoding('utf8');
	response.on('data', function (chunk) {
	res.write(chunk);
	});
	response.once('end', function () {
	res.end();
	});
	} else {
	badRequest(res);
	}
	});
	req.setEncoding('utf8');
	req.on('data', function (chunk) {
	request.write(chunk);
	});
	req.once('end', function () {
	request.end();
	});
	} else {
	badRequest(res);
	}
	}).listen(port);
	console.log('Access-Control-Allow-Origin Server running at '+ port +' port.');
	strong {
	color : red;
	}
	.title {
	text-align : center;
	}
	#wrapper {
	width : 800px;
	position : relative;
	margin : 0 auto;
	}
	#form {
	margin : 15px 0;
	text-align : center;
	}
	#img {
	max-width : 400px;
	max-height : 400px;
	}