お父さんがTitaniumでサクサクアプリつくって、愛娘に媚び売ろう （リハビリ編）
Titanium™ Advent Calendar 2013 - Adventarの20日目。
昨日はdasa_101さんの「Titanium MobileでTwitter Application-only authenticationを試す :: zerosp.blog」でした。
ブログを書く事どころか、業務でコードに触らない期間が長い事になってきて赤信号なエンジニアではございますが、ここで一念発起。
日頃周りに薦めているTitanium Mobileの拙記事投稿を試みている次第です。
Titaniumってプロトタイピングのスピードに適しているよねという仮説の実証の為、
「お父さんがTitaniumでサクサクアプリつくって、愛娘に媚び売ろう」
プラクティスを本日より始めようと思います。
つーわけで早速！
といったところで、何のネタにしようか？
長い長い事Ti触ってないどころかに、コードも書いてない、溜めたTipsもネタのストックもない・・・
もはや自称エンジニアと化したには題材なんておいそれと浮かぶ訳もなく、予定調和の現実逃避。
iPhoneで今年に入り完全に波に乗ったGunosyさんを冷やかしたり、その他のアプリで遊んだりで・・・
たまった起動タスクをそろそろ落とそうか・・・ホームボタンを2度押しして、タスクを消していきながら・・・
しゅっ、しゅっ、しゅっ・・・
あ、これかと。
そう、最近いろいろなアプリで実装されているあれです。
タップして上下左右にスワイプして「しゅっ」と操作するUI!
つうーわけで早速！！
今回は「流行り（？）のしゅっとするUI 」をなんとかしてみたいと思います。
「え、そんなんggrばいっぱいあるじゃん」なんてご意見も然りではありますが、そこはそこ。
今回は、おっさんのリハビリも兼ねてスクラッチでおこしてみます。
かつ1時間の時間内でどこまでリハビリ出来るかチャレンジ。
じゃ、さっそく今回の実装にあたり、処理を整理。
- Swipeイベントを検知して処理開始
- 移動するオブジェクトの座標、変位を都度チェック
- 変位がしきい値を超えたらスライドイベントで画面からアウト
こんなもん。
都合60分弱で久々にいろいろ試行錯誤してみたコードがこちらになります。
var counter = 1;
var startX = null;
var defaultX = null;
var displacement = null;
var limitAcceleration = 100;
var limitPositionX = Titanium.Platform.displayCaps.platformWidth/2 - $.imageView.width/2;
//タップイベント開始
$.imageView.addEventListener('touchstart', function(e){
startX = e.x;
});
//スワイプ中
$.imageView.addEventListener('touchmove', function(e){
displacement = (e.x - startX) + $.imageView.animatedCenter.x;
animateImage(displacement-$.imageView.width/2, 20);
});
// タップイベント終了
$.imageView.addEventListener('touchend', function(e){
if (displacement < limitPositionX) {
alert("aa "+ displacement + " "+ limitPositionX);
if (displacement >= 0 ) {
animateImage(startX - $.imageView.width/2, 50);
}else {
animateImage(startX + $.imageView.width/2, 50);
}
} else {
animateImage(Titanium.Platform.displayCaps.platformWidth/2, 80);
}
});
//画像のアニメーション
function animateImage(x, duration){
$.imageView.animate({
left:x,
duration: duration
});
}
$.index.open();
で、実行してみると・・・
一応、画像はとんでったけど、右しかいかない。
なんかすごい動きがカクカクしているし、こんな単純なものでも怪しい部分が多いので
まったくもって改善しなければ・・・
せっかくなので、ここまでの感想をポジティブに。
・期間があいても実装しやすいTiっていいなぁ。
・ライトに実装しやすい事この上無し。
・Alloyらくちん。
久々のTitanium超たのしい！
コード書くの楽しいなと調子に乗ったので、後日諸々に作り込んで追記していきます。
（真面目に書いている皆様、雑な結果になり、誠にすいません。。。）
というわけで明日は、
uk1124さんの「これからプログラミングを始める方にTitaniumを勧める理由」になります。
ご期待下さい。
