90秒で理解するiPhone JavaScript（ジェスチャー編）
    このエントリをはてなブックマークに登録

2008/7/30 水曜日 matsui Posted in iPhone 1 Comment »

先日のマルチタッチ編に続き、今回はジェスチャー編になります。

対象を拡大縮小したり、回転させたりするには、座標を取得して自分でガリガリ計算しないといけないと思っていたのですが、どうやら「gestureXXX」イベントを使えばそんな必要がないということを知りました。　→　参考 [iphone.wikiwiki.jp]

というわけで、今回はgestureイベントの使い方をまとめてみます。

 

ジェスチャーのイベントには次の3つがあるようです。

  • gesturestart
  • gesturechange
  • gestureend

それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。
使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「onClick」のような感じで「onGestureStart」属性を追加します。

 

拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。

  1. 「event.scale」で、拡大・縮小用の倍率を取得
  2. 「event.rotation」で、回転の角度を取得

下記のサンプルでは、赤いdivタグの拡大縮小・回転を行うためのサンプルです。
width（幅）, height（高さ）, rotation（角度）をグローバル変数に格納し、ジェスチャーイベントから取得した数値に合わせ、styleを変更しています。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
<script type="text/javascript" charset="utf-8">
<!--
var width = 120;
var height = 120;
var rotation = 0;

function init() {
	document.addEventListener("touchmove", touchHandler, false);
	document.addEventListener("gesturechange", gestureHandler, false);
	document.addEventListener("gestureend", saveStyle, false);
}

function touchHandler(event) {
	// スクロール機能の停止
	event.preventDefault();
}

function gestureHandler(event) {
	// リサイズと回転
	var rect1 = document.getElementById('rect1');
	rect1.style.width = (width * event.scale) + "px";
	rect1.style.height = (height * event.scale) + "px";
	rect1.style.webkitTransform = "rotate(" + ((rotation + event.rotation) % 360) + "deg)";
}

function saveStyle(event) {
	// 変数に保存
	width *= event.scale;
	height *= event.scale;
	rotation = (rotation + event.rotation) % 360;
}
// -->
</script>
</head>

<body onLoad="init();">
<div id="rect1" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:120px;"></div>

</body>
</html>

 

静止画なのでわかりにくいかもしれませんが、ダブルタッチでdivタグの拡大縮小・回転が行えます。

iPhone / iPodTouchをお持ちの方はこちらからお試しください。
http://ke-tai.org/test/gesture/gesture.html

 

関連：

タグ: , , ,



iPhone用JavaScriptデータベースプログラミング入門(JavaScript++かも日記)
    このエントリをはてなブックマークに登録

2008/7/29 火曜日 matsui Posted in iPhone No Comments »

昨日に続きiPhone＋JavaScriptネタです。
ネットを巡回していて、興味深い記事を見つけましたのでご紹介させていただきます。

なんと、iPhone用のSafariにはSQLiteが組み込まれており、JavaScriptからそれを利用できるようです。

JavaScript++かも日記さんのところで、「iPhone用 JavaScriptデータベースプログラミング入門」というエントリーが連載されており、詳しく解説されています。

→　JavaScript++かも日記　iPhone用 JavaScriptデータベースプログラミング入門(目次) [jsgt.org]

 

JavaScriptで次の一文を実行することで、データベースが自動で生成されるようです。

db = openDatabase("[DB名]");


普段は何も表示されていません。


データベースを作成すると「Database」という項目が追加されます。


ドメイン名とDB名の一覧が表示されます。


ＤＢ名をタップすると、サイズなどの詳細情報が表示されます。

DBの最大サイズは5Mとのことなので、あまり多くのデータを入れることはできませんが、DBは複数個作成できるようなので、そちらでカバーできるかもしれません。

機能的には「Google Gears」に近い感じでしょうか。
うまく使えば、ローカルにデータをキャッシュして、電波の届かないところではそれを表示するといった、モバイルに適したアプリケーションが作れるはずです。

 

関連：

タグ: , , ,



90秒で理解するiPhone JavaScript（マルチタッチ編）
    このエントリをはてなブックマークに登録

2008/7/28 月曜日 matsui Posted in iPhone 10 Comments »

仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。

まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。
ここまでわかったことをメモ代わりに記載したいと思います。

今回はひとまず座標の取得までです。
ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。

 

マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。

  1. Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難
  2. タッチのイベントは、リスナーまたは「onTouchXXX」から取得
  3. タッチ数は「event.touches.length」で取得
  4. 座標は「event.touches[i].pageX (or pageY)」で取得

 

1. Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難

マルチタッチを行う前の下準備として、Safari自体のスクロールや拡大・縮小を、動作しないようにしておいた方が無難です。

対象をドラッグしようとしているのか、画面をスクロールしようとしているのか、プログラム側で判断するのは難しいためです。
今回は次のように調整しました。

<meta name=”viewport” content=”width=480, user-scalable=no, maximum-scale=0.6667″ />

横スクロールと拡大・縮小を禁止しています。　→　参考エントリ

縦スクロールは、「event.preventDefault();」で抑止できるようです。
（後述のサンプルプログラム内でご確認ください）

 

2. タッチのイベントは、リスナーまたはonTouchXXXから取得

タッチ関連のイベントには

  • onTouchStart
  • onTouchMove
  • onTouchEnd
  • onTouchCancel

の4つがあり、それぞれonClick()などと同じような形で、イベントを取得できます。

またリスナー方式の場合は、

document.addEventListener("touchstart", touchHandler, false);
document.addEventListener("touchmove", touchHandler, false);
document.addEventListener("touchend", touchHandler, false);
document.addEventListener("touchcancel", touchHandler, false);

のような形で利用します。
touchcancelはどのようなケースで使われるのかは不明です。
もしご存じの方がいましたら教えてください。

 

3. タッチ数は「event.touches.length」で取得

これは簡単です。
タッチ情報は「event.touches」に配列の形で格納されますので、その数を見ればOKです。
（event変数が何かについては、後述のサンプルプログラムでご確認ください）

 

4. 座標は「event.touches[i].pageX (or pageY)」で取得

タッチ座標は「event.touches[i].pageX」のような形で取得します。
シングルタッチの場合は「event.touches[0].pageX」。
ダブルタッチの場合は、上記に加え「event.touches[1].pageX」にも値がセットされます。
最大5個（touches[4]）まで機能するようです。

 

サンプルプログラムは下記の通りです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" />
<script type="text/javascript" charset="utf-8">
<!--
// 初期化
function init() {
	document.addEventListener("touchstart", touchHandler, false);
	document.addEventListener("touchmove", touchHandler, false);
	document.addEventListener("touchend", touchHandler, false);
}

function touchHandler(event) {
	// タッチ数を取得
	document.getElementById("touchnum").innerHTML = event.touches.length;
	
	// タッチ位置を取得
	for (var i = 0; i < 5; i++) {
		if (event.touches[i]) {
			// 座標をセット
			document.getElementById("loc" + i + "_x").innerHTML = event.touches[i].pageX;
			document.getElementById("loc" + i + "_y").innerHTML = event.touches[i].pageY;
		} else {
			document.getElementById("loc" + i + "_x").innerHTML = '';
			document.getElementById("loc" + i + "_y").innerHTML = '';
		}
	}
	
	event.preventDefault();
}
// -->
</script>
</head>

<body onLoad="init();">

タッチ数: <span id="touchnum"></span><br />
タッチ0: X:<span id="loc0_x"></span>, Y:<span id="loc0_y"></span><br />
タッチ1: X:<span id="loc1_x"></span>, Y:<span id="loc1_y"></span><br />
タッチ2: X:<span id="loc2_x"></span>, Y:<span id="loc2_y"></span><br />
タッチ3: X:<span id="loc3_x"></span>, Y:<span id="loc3_y"></span><br />
タッチ4: X:<span id="loc4_x"></span>, Y:<span id="loc4_y"></span><br />

</body>
</html>

 


このような感じで座標が取得できます　（クリックで拡大）

実際にiPhone/iPodTouchをお持ちの方はこちらかお試しください。
http://ke-tai.org/test/multitouch/multitouch.html

座標が取得できてしまえば、線を引くのも、画像を回転させるのも自由自在ですね。

とりあえず動作はしていますが、アップルの公式ドキュメントを読んで作ったわけではないので、もし間違っていたらご指摘をお願いします。

なお、今回のエントリー名にはホッテントリメーカーを利用させていただきました。
もし90秒で理解できなかったら（というか難しいですよね・・・）ご勘弁ください。

 

関連：

タグ: , , , , ,



CSSの変更だけでPCサイトをiPhoneに対応させる方法
    このエントリをはてなブックマークに登録

2008/7/15 火曜日 matsui Posted in iPhone, 記事紹介・リンク No Comments »

旬のiPhoneネタをご紹介します。

CSSを変更するだけで、既存のPCサイトを「iPhone」「iPod touch」に対応させる方法が、スライドで公開されています。
7/4にアップルストア銀座で行われたイベントで使われたスライド資料のようです。

→　SwapSkills公式サイト　7月4日　アップルストア銀座無料イベント！開催テーマ『誰でも出来るiPhoneのウェブサイト』 [swapskills-allweb.blogspot.com]

おそらくこの資料のベースとなったスライドで、内容はやや異なっていますが、スライド内で紹介されているタグを抜き出して解説していますので、こちらのページの方がわかりやすいかもしれません。

→　Kawa.netブログ　 PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法 [kawa.at.webry.info]

 

iPhoneからのアクセスかどうかを判定するには、ユーザエージェントから判断するのではなく、linkタグのmedia属性でCSSを切り替えるのが良いようです。

他にも画面幅を調整する方法や、指タッチでも使いやすくするコツなどが紹介されています。

言葉での解説ありきの資料のため、ややわかりづらいところがありますが、iPhone対応サイトを作ろうと考えている方には役に立つと思います。

どこかに発表時の音声やムービーは公開されていないのでしょうか？
ご存じの方がいましたら教えてください。

 

関連：

タグ: , , ,



Next Entries »