[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる 続き : nogunogu
こんにちは。のぐちです。 前回はフリック操作を判定してみるところまでを実装しました。 では、CSSアニメーションをつけてフリックに合わせて画面を動かしてみよう、 と思ったのですが、Javascriptを見直していたらちょっと時間がなくなってしまったので、 今回はスクリプトの改良のみです。 ■ クロージャを使って書き直す ■ フリック感を高める ■ ちょっとだけアニメーションっぽく 以上の改良をしてみます。 ■ クロージャを使って書き直す まず、前回「余談」と書いてしまったクロージャですが、それを利用して書きなおします。 動作そのものは変わっていませんが、クロージャを使ってグローバル変数を使わない形にしました。 <script type="text/javascript"> $(function() { var box = $("#box")[0]; var touchHandl
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる : nogunogu
とあるWebアプリをiPhone対応させようと思っています。 iPhone対応なんて、レイアウトをちょっといじる程度かと思って調べていたら、 なんとiPhone搭載のモバイルSafariはタッチ関連のイベントをJavascriptで扱えるというじゃないですか。 “iPhone Human Interface Guidelines for Web Applications” を見てみると、 ユーザーの操作として上げられている中に「Flick」があります。 ということは、フリックイベントを設定できて、ページをめくる的な操作がササッと作れるはず。 などと思って調べたところ、どうやらタッチ・ジェスチャー関連のイベントは下記の7つみたいです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gesturee
iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu
こんにちは。のぐちです。 先日、このブログの存在が社内に告知されました。 開始からしばらくはひっそりと生きようということで特に教えていなかったのです。 で、早速というか何というか、社内の開発者からの応援メッセージ（ツッコミ）が届きました。 そのひとつが 「何故jQueryを使ってるのに、addEventListener してるのか？」 でした。 確かにわざわざ次のように書きました。 box.addEventListener(“touchmove”, touchHandler, false); 僕も最初はjQueryを使って $(“#box”).bind(“touchstart”, touchHandler); なんて書いたのですが、タッチしても全然反応がないので、 「ああ、touch系のイベントはjQueryが対応してないんだろうな」 と思い込んでいました。 が、このツッコミを機
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
