2011.06.17 | 

こんばんはムーチョです。
PC用のサイトをスマートフォンで見る時ってありますか?
私はPCが使える環境ならスマートフォンのブラウザを使ってみることはしないんですが、
目の前にパソコンがありながらも携帯でブラウジングって方も中にはいるでしょう。
また、携帯でブラウジングしなきゃならない時、私は快適なブラウジングはできないもんだと
諦めていますが、快適になるならその方がいいでしょう。

携帯にもちょっと対応したページを作ろうとする時に
マウスとタッチインターフェースの差というのがひとつのネックになってきます。
というわけでタッチインターフェース用の分岐処理を実験してみました。
やっつけやっつけサンプルがこちら。ドラッグで左右にスクロール。

キモな部分だけ抜粋するとこんなソース。要jQuery。


// タッチデバイスかを判別
var isTouch = (document.ontouchstart !== undefined)? true : false;

$('#hoge').bind({
	'touchstart mousedown': function(e) {
		preventDefault(e);
		this.pageX = eventX(e);
		this.pageY = eventY(e);
	},
	'touchmove mousemove': function(e) {
		preventDefault(e);
		var pageXold = this.pageX;
		var pageYold = this.pageY;

		this.pageX = eventX(e);
		this.pageY = eventY(e);
	},
	'touchend mouseup': function(e) {
	}
});

// デフォルトの処理を無効にする
var preventDefault = function(e){
  if(e.preventDefault){
    e.preventDefault();
  }
  else if(window.event){
    window.event.returnValue = false;
  }
}

var eventX = function(e){
	return (isTouch)? event.changedTouches[0].pageX : e.pageX;
}
var eventY = function(e){
	return (isTouch)? event.changedTouches[0].pageY : e.pageY;
}

一応、IE6,7,8、FF3.6,4、Chrome、iPhone、Androidで動作確認。
にしてもこう対応ブラウザが増えると、ひとつのギミックを入れるのに、
どんどん工数が増えてそれはそれで問題な気もしないでもない今日この頃。

2011.01.11 | 

問題その1 Ajaxの読み込みは同じドメインからでないとNG(まぁ当たり前)

対処:サーバサイド(phpなど)で別ドメインxmlを読み込んで、それをAjaxで読み込む(まぁ当たり前)
※当たり前なんだけど、サーバと通信が必要な(まさに)Ajaxは偶にしか使わず、
忘れていることが多い。その際に必ず焦る。

問題その2 IE+jQueryでxmlにコメント有りの時に動かない事がある

対処:phpでヘッダにContent-Type: text/xmlを設定しなければなるまい。
やらないで、戻り値を$(data)などとすると、データがプレーンテキストで渡って、
コメントの所でパース失敗するっぽい。(未確認ですが・・・)
タグのみのテキストだと、jQueryが内部でエレメント生成してくれるので、問題が起きない。

追記:
クロスドメインでなくてもだけど、jsonだったら、
Content-Type: application/x-javascript; charset=utf-8
だな。