home > 投稿 > HTML5 : TouchController
2010/05/24

HTML5 : TouchController


mouse 系のイベントを touch にバイパスさせれば、スマートフォン用コンテンツもPCブラウザでプレビューできます。

以下の TouchController クラス(書いている内容は mouse のドラッグ&ドロップ操作)を継承させて ViewController を作れば簡単なものはすぐ作れます。
しっかり書けば iPhone, Android から PC ともに互換するコンテンツなんかも作れそうな気がします。

サンプル

画像をクリック

Canvas 版サンプル

画像をクリック


// IE 使わないならこの分岐いらない
if (true && document.all && document.attachEvent) {
	function eventPreventDefault(){
		event.returnValue = false;
	}
	//http://yupotan.sppd.ne.jp/web/dom2-msie.html
	document.addEventListener=function(key,func,b) {
		this.attachEvent("on"+key, function(){
			return func({
				target			:event.srcElement,
				cancelBubble	:event.cancelBubble,
				pageX			:event.clientX,
				pageY			:event.clientY,
	 			preventDefault	:eventPreventDefault
			});
		});
	}
	document.removeEventListener=function(key,func,b) {
		this.detachEvent("on"+key, func);
	}
}

$class('TouchController',{
	initTouch:function(){
		if( navigator.userAgent.search(/(iPhone|Android)/) != -1 ){
			document.addEventListener("touchstart",	this.touchesBegan.bind(this), false);
			document.addEventListener("touchmove",	this.touchesMoved.bind(this), false);
			document.addEventListener("touchend",	this.touchesEnded.bind(this), false);		
		}else{
			$('body').style.cursor = "pointer";
			this.initMouse();
		}
	},
	initMouse:function(){
		document.addEventListener('mousedown',	function(e){
			this.isDragging	= true;
			e.touches = [e];
			this.touchesBegan(e);
		}.bind(this), false);
		document.addEventListener('mousemove',	function(e){
			if (this.isDragging) {
				e.touches = [e];
				this.touchesMoved(e);
			}
		}.bind(this), false);
		document.addEventListener('mouseup',	function(e){
			if (this.isDragging) {
				this.isDragging = false;
				e.touches = [e];
				this.touchesEnded(e)
			}
		}.bind(this), false);
	},
	touchesBegan:function(){},
	touchesMoved:function(){},
	touchesEnded:function(){}

});

トラックバックURL

http://faces2.bascule.co.jp/mt/mt-tb.cgi/604

コメントを投稿

(コメントには承認が必要になることがあります。承認されるまではコメントは表示されません。)