ネタ

2008年10月25日

iPhoneユーザーの皆さんこんにちは。みんな大好きおっぱいの時間です。



ぷるんぷるんですね!超ぷるんぷるんですね!

LiquidPics(iTunesが開きます)は取り込んだ画像をすべてぷるんぷるんにするアプリなんですが、ついうっかりおっぱい画像を取り込んでしまいました。ごめんなさい>< 普通に使っても面白いアプリですよ!


参考:
fladdict 開発者のブログ。
いつもポケットにおっぱいを javascriptを使ったおっぱい。



追記:動画削除されてしまいました>< 

hayashi311 at 05:04コメント(2)トラックバック(0) 

2008年07月29日

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) 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ