仕事でiPad用のウェブサービス作っているのですが、仕様書を見ると『ダブルクリックで拡大』なんて項目がありました(注：ダブルクリックとはダブルタップのことです)。調べてみると、JavaScriptでダブルクリック用のイベントを実装してもiPadではダブルクリック≠ダブルタップのようで、ダブルタップを実装したい場合は独自に実装しなきゃいけないということが発覚(参考：iPhone/iPadでダブルタップをJavaScriptで実装する – to-R)。
そこで、何かいいライブラリがないだろうかと探してみたらHammer.jsというタッチ対応ライブラリを見つけたのでさっそく使ってみました(参考：スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」: 小粋空間)。
Hammer.js – A javascript library for multi-touch gestures
jQueryプラグインがどこにあるか分からず少し探したので、jQueryで使う場合のjquery.hammer.jsのインストールページも下記にリンクしておきます。
EightMedia/jquery.hammer.js · GitHub
まず、headタグ内にjQuery、Hammer.js、Hammer.jsのjQueryライブラリという順番に読み込む。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/hammer.min.js"></script> <script src="js/jquery.hammer.min.js"></script>
参考に、JavaScript内にはliタグをダブルタップすると、そのliの要素のHTML(innerHTML)をbodyの最後に挿入するようという動作を実現するコードは以下。
$('li').hammer().on('doubletap', function(event){
$('body').append($(this).html() + '<br>');
});
ただし、これだとダブルタップした時にその部分を拡大表示してしまうという動きになってしまうという問題があります。この解決方法として、metaタグのviewportのcontent属性に”user-scalable=no”とすれば拡大しなくなります。が、これだとピンチインやピンチアウトでも拡大縮小しなくなります。やりたいことはあくまで、対象の要素にダブルタップした時に拡大しないようにしたいだけなので、下記のように書きなおすことに。
$('li').on('touchend', function(e){
e.preventDefault();
}).hammer().on('doubletap', function(event){
$('body').append($(this).html() + '<br>');
});
タッチがはずれた時の標準イベントをe.preventDefault()で止めています。これで、拡大しないようになりました。
以下、実行サンプル
hammer.js テスト
数値をダブルタップすると、ページ下にダブルタップした位置の数値とダブルタップした位置のドキュメント内相対座標とウィンドウ内の座標を書くようにしています。また、親要素のulタグをクリックした場合には”ul”と書くようにもしています。標準イベント(拡大)については、奇数の数値のみ($(‘li:odd’)のみ)ストップするようにしています。つまり、0の箇所をダブルタップすると拡大しますが、1のところをダブルタップしても拡大しません。
iPod touchのSafariで試してみましたが、奇数の文字をダブルタップしても拡大されませんでした。偶数の文字をダブルタップすると拡大するのですが、なぜか”ul”が表示されません(PC版Chromeでは表示されました)。左側のulのpadding部分をタップしてみると”ul”と表示されたのでulタグをタップすると”ul”と表示されるのですが・・・。
まあとにかく、Hammer.jsは便利そうです。ホールドも実装できるので、いろいろと面白いUIも実現できそうですね。ただ、指定できるオプションについてはほとんど分かっていない状態なので、活用していくにはまだ勉強が必要そうです。
コメント