2008年07月29日

よろしい、ならばiPhoneでくぱぁだ

iPhoneユーザーの皆さんこんにちは!くぱぁ(i)をリリースしました!


くぱぁ(i)はiPhone/touchで直感的にくぱぁできるWebサービスです。

DEMO
http://hayashi311.googlepages.com/cupha.html


くぱぁってなります。心の目で見てください!まさにiPhoneの正しい使い方って感じですよね!


iPhone/touchを持ってない人はよく分からないと思いますが、こんな風になってます。



マルチタッチとcanvas要素の練習に作ってみました。


追記:

画像を挿入できるようにしました!



コード

window.addEventListener("load", loaded, false);
window.onorientationchange = hideURLbar;
var stpx = 0;
var movpx = 0;

function loaded() {
setTimeout(hideURLbar, 100);
draw();
document.addEventListener("touchstart", tStart, false);
document.addEventListener("touchmove", tMove, false);
document.addEventListener("touchend", tEnd, false);
}

function tStart(event) {
event.preventDefault();
if (event.touches.length == 2) {
stpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX);
}
touchHandler(event);
}
function tMove(event) {
event.preventDefault();
touchHandler(event);
}
function tEnd(event) {
event.preventDefault();
if (event.touches.length < 2) {
stpx = 0;
movpx = 0;
}
draw();
}

function touchHandler(event) {
if (event.touches.length == 2) {
movpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX) - stpx;
if (movpx < 0) {
movpx = 0;
}
} else if (event.touches.length > 2) {}
draw();
}
function draw() {
var canvas = $('cupha');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 320, 380);
if (canvas.getContext) {
ctx.beginPath();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 - movpx / 2, 250, 160, 380);
ctx.stroke();
ctx.moveTo(160, 45);
ctx.quadraticCurveTo(160 + movpx / 2, 250, 160, 380);
ctx.stroke();
}
}
function hideURLbar() {
window.scrollTo(0, 1);
}
function $(id) {
return document.getElementById(id);
}




マルチタッチ

iPhoneは超ハイテクなのでマルチタッチが可能です!

前回もリンク張りましたがここが分かりやすい。

90秒で理解するiPhone JavaScript(マルチタッチ編)

タッチのイベントは
* onTouchStart
* onTouchMove
* onTouchEnd
* onTouchCancel
の四つ。今回は上3つを使います。ほとんどonMouse関連のイベントと一緒です。

気をつけなければいけないのは、マルチタッチという点です。

普通のマウスだとカーソルが一つしかないので

onMouseDown

onMouseMove
  ↓
onMouseUp

この流れが間違いなく保証されているんですが、マルチタッチはそうはいきません。マルチタッチだとこんな感じ。

onTouchStart
  ↓
onTouchStart
  ↓
onTouchMove
  ↓
onTouchEnd
  ↓
onTouchMove
  ↓
onTouchStart
  ↓
onTouchEnd
  ↓
onTouchEnd

 結局原因を突き止める前に解決したんですが、マウスと同じ感覚で設計したらonTouchMoveを取得できなかったりしました。うまく説明できなくて申し訳ないのですが、気をつけてください!


最終的にこんな流れにしました。

2点をタッチした時点で2点間の距離を取得
  ↓
どっちが動いてるのかわからないけどonTouchMoveで今の2点間の距離を取得。
  ↓
どっちかが離れた時点でピンチ終了

あれ?書くと超普通ですね…何を悩んでたんだろう…



長くなったので次に続きます>>



**

hayashi311 at 10:02コメント(1)トラックバック(7) 

トラックバックURL

トラックバック一覧

1. iPhone/iPod touchのSafariだけで出来る「くぱぁ」  [ MACお宝鑑定団 blog ]   2008年07月31日 04:16
iPhone向けサイトを考えるのエントリー「よろしい、ならばiPhoneでくぱぁだ」で、iPhone/touchで直感的にくぱぁできるWebサービス「くぱぁ(i)」を紹介してました。 パソコンのブラウザ上で見ても何もおきませんので、ぜひ、iPhone/iPod touch上のSafariからみて見て下さい...
2. くぱぁ(i)に好きな画像を挿入できるようになりました  [ iPhone向けサイトを考える ]   2008年07月31日 10:24
iPhoneユーザーのみなさんこんにちは!直感的にくぱぁできるWebサービス『くぱぁ(i)』に新しいバージョンが登場しました! 新しいくぱぁ(i)は3種類の画像からこんなくぱぁを作れます。 DEMO(foriPhone/touch):http://hayashi311.googlepages.com/cupha2.html ...
3. くぱぁ。  [ atr4440「よしじまあたるの徒然なる日常とか」 ]   2008年08月01日 10:05
朝から、作業中にFinderが落ちると(まぁ復帰するけど)、軽く凹むというか…色々いっぱいいっぱいなのかなぁ?(汗)とか思ってショボーンとなります。 うーん。 さて、やはり日本人はバカだ(褒めてる)。w 『「よろしい、ならばiPhoneでくぱぁだ」がむちゃくちゃ面白...
4. くぱぁ。  [ atr4440「よしじまあたるの徒然なる日常とか」 ]   2008年08月01日 10:05
朝から、作業中にFinderが落ちると(まぁ復帰するけど)、軽く凹むというか…色々いっぱいいっぱいなのかなぁ?(汗)とか思ってショボーンとなります。 うーん。 さて、やはり日本人はバカだ(褒めてる)。w 『「よろしい、ならばiPhoneでくぱぁだ」がむちゃくちゃ面白...
5. re:よろしい、ならばiPhoneでくぱぁだ  [ だぶだぶノート ]   2008年08月01日 12:13
ネタがネタだが、iPhoneの指2本で動かせるのはいいなぁ。 ウチのトップページも、マウス2個で開くように、、、って、無理か。 むしろゲーム的な物にしないと、使いにくくなりそうだ。 ...
6. ないなら作ればいいじゃないPSPタッチパネル  [ むぅにぃの駄文戯れ言 ]   2008年08月14日 09:26
PSPにタッチスクリーンを追加するPSPzプロジェクト Engadget Japanese これでPSP唯一の致命的欠陥も解決するので安心してアイマス発売を待てるねw
7. [話題]オタク界隈におけるエロ表現のカジュアル化とは?  [ ビジネスから1000000光年 ]   2009年06月19日 11:43
 たぶん昨日の続き。  昨日の記事を上げる前、ぼくはNaokiTakahashi氏が引用している佐藤亜紀氏のブログ記事にこういうブックマークコメントを付けた。 擁護側の発言を読んでいて呆れるのは、俺たちは不当な差別に曝されていると主張する人の多さです。最初は冗談だと思っ

コメント一覧

1. Posted by はやるこころおさえきれず   2008年08月01日 18:16
iPod touch v1.1.4のSafariから DEMOへアクセスしても
くぱぁできないのですが、なにか修行が必要でしょうか?

直感的にくぱぁしてみたくて、指の皮が悲鳴をあげるほど
ためしてるのですが、一向にくぱぁとなってくれません。

画面全体がすこしスライドするだけです。

画像版もできないのです。
アクセスしたら既に開いたあとの画像まで一緒に見えています。

iPod touch Safariの設定は全部ONになってます。

コメントする

名前
URL
 
  絵文字
 
 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ