mouseの慣性操作、TrackPadのピンチ操作、TouchScreenの慣性操作、ピンチ操作をどうやら自分で実装しないといけなさそうです ※これ本当ですかね？もし良い情報あったらお教えください #慣性操作の実装(Mouse/TouchScreen) MouseとTouchScreenの慣性動作について実装します。 どこかにライブラリがありそうだけど見つけられず、自分で実装しています。 実装の思想としては、慣性が初速から動摩擦係数で減っていくとすると、 有名なニュートンさんのF=maを一回積分してv(t) = v(0) - at： aは摩擦係数とすると計算できるという単純な中学物理のロジックです。 x, y座標のそれぞれの時間あたりの減衰Speedを計算しています。 async onGraphUp (e) { // 初期速度の計算 this.touchSpeedX = Math.sqrt
jQuery Finger タップ操作とクリックのイベントを統一できるjQueryプラグイン「jQuery Finger」 タップ、ダブルタップ、プレス、フリック、ドラッグ等の操作をスマホ/タブレットとPCで統一できます。 どの端末でも同じように作って動かせるということで便利に使えるかもしれません 同じような動き、にこだわらなくとも、スマホでのページ操作用のライブラリとして便利に使えそうです。 関連エントリ iOS,Android,WindowsPhone等タッチ端末用の軽量＆高速スライダー実装「Swiper」。 レスポンシブでタッチ対応な軽量なスライダー実装jQueryプラグイン「Unslider」 レスポンシブでタッチ端末で使えるオーディオプレイヤ実装jQueryプラグイン「AudioPlayer」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Tou
こんにちは、@yoheiMuneです。 最近スマホでのWebアプリを開発することが多いのですが、タップへの反応速度を上げるこんな方法はどうかなぁと考えたので、ブログに書きたいと思います。 スマホでタップにより速く反応したい スマホ用Webアプリの開発で、ユーザーがタップした際にJSを起動したい（例えばダイアログを表示したいなど）という要件があるとします。 その場合に、タップ対象の要素のonclickにイベントをバインドして処理をすることが多いかと思います。 こんな感じ。 var btn = document.getElementById('someBtn'); btn.addEventListener('click', function() { // タップされた際の処理 }); でもこれだと確かに反応するのですが、ユーザーがタップしてからイベントが発火するまでに時間が空いてしまい、遅いの
スマートフォンコンテンツを制作していくと、何かとタッチイベントが必要となってきます。 一部のAndroid端末で「touchmove」イベントが上手く取得できない。なんてことも多々あります。 そんな時用の為にスマートフォン タッチイベント確認ページを作成しました。 そんな大逸れたものではありませんが、一通り確認出来るかなと思っております。 デモページ http://webcyou.com/demo/js/touch/ 灰色部分をタッチするとそれぞれの情報が取得出来ます。 上段のpageYがY座標となり、左から start：タッチを始めたY座標 move：移動している最中のY座標 end：タッチを終了したY座標 上段のpageXもY座標同様 start：タッチを始めたX座標 move：移動している最中のX座標 end：タッチを終了したX座標 となっています。 その下、 distanceX：X
jQuery Fastbutton モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」 モバイルブラウザのSafari等でfastClickイベントをbindして高速クリックを実現できるそうです。 色々なサイトで、スマホ端末がPCより上回ってきているという話を聞いたりしますが、より快適なスマホブラウジングを実現するためにテストしてみてもよいかもですね 関連エントリ 様々なタイプのスライダーが作れるjQueryスライダープラグイン「Jquery Slider Shock」 ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」
タッチイベントによるホイール スクロール等を可能にするjQuery のプラグイン。ラッチ（ｶﾁｶﾁ感） の無い、慣性ホイールスクロール も実装可能です。ドラッグや フリックなども対応してるみたい。 ラッチの無い慣性ホイールスクロールをタッチデバイスで実装出来る、というスクリプト。タイトルはアレですが、そのほかスワイプなどにも対応しています。 慣性ホイールスクロールを可能にするライブラリ。それ以外のタッチイベントにも対応していますが、特にホイール操作が気持ちよかったです。 以下サンプル。※タッチデバイスのみで動作します。 Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.touchy.js"></scrip
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
jQuery UIをタッチデバイスに対応させる ライブラリ・jQuery UI Touch Punchの ご紹介です。いつか使うかも、と思った ので備忘録。これを見て、そういやスマ フォでjQuery UIを試したことが無いこと に気が付いた次第です・・ jQuery UIのドラッグとかリサイズとかソートとかをiPhoneなどに対応させるためのライブラリです。そういやjQuery UIはタッチデバイスで動くのか試したことありませんでしたが、ドラッグやリサイズはそのままでは使えませんでした。 これは需要あるんじゃないですかね。このライブラリでタッチデバイスに対応させられるのは以下の通り。 Draggable Droppable Resizable Selectable Sortable Accordion Autocomplete Dialog Progressbar Slider 実機でテ
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く