【JavaScript】3D Touchに対応させられるというPressure.jsを試してみた

はいー、6月は結局一度も更新できずもうあっという間に7月…ご無沙汰更新となってしまいました。。

さて、今回はJavaScriptに関する投稿となります！この記事タイトルの通りなのですが…「Web上で3D Touchに対応」を実現させてくれるPressure.jsというスクリプトがあるようなのです。

Pressure.js

このスクリプトを実際に動かしてサンプルを作ってみたく、今回更新しました。

Pressure.jsについての概要

3D Touchというのは、iPhoneの機能の一つですね。画面を強く押し込むことによって、また違った動作を得られるというものです。
※非対応端末の場合、画面を押している長さで判定できるようです

Pressure.jsを使用することにより、画面が押されている間0～1まで段階的に変化される数値を取得できるようになります。
その数値をアレコレして、ゴニョゴニョするわけですね。笑

またjQueryライクで使用することが出来たり、他にもオプションなどがあるようです。詳しくは公式ドキュメントを参照してください。
Pressure.js – Documentation

コンテンツ一覧へ戻る

コードサンプル

まずは肝心のスクリプト本体を読み込んでおきましょう。

<script src="js/lib/pressure.min.js"></script>

基本的な使用方法のコード雛形は、次のような形になります。

Pressure.set( '#hoge', {
  start: function( event ){
    // this is called on force start
  },
  end: function(){
    // this is called on force end
  },
  startDeepPress: function( event ){
    // this is called on "force click" / "deep press", aka once the force is greater than 0.5
  },
  endDeepPress: function(){
    // this is called when the "force click" / "deep press" end
  },
  change: function( force, event ){
    // this is called every time there is a change in pressure
    // 'force' is a value ranging from 0 to 1
  },
  unsupported: function(){
    // NOTE: this is only called if the polyfill option is disabled!
    // this is called once there is a touch on the element and the device or browser does not support Force or 3D touch
  }
} );

ざっくりですが、次のような感じでしょうか。

start	画面が押されたときの処理。
end	画面から離されたときの処理。
startDeepPress	段階的に変化される数値が0.5を越えたときの処理。
endDeepPress	DeepPressが終わったときの処理。
change	数値が変化されている間の処理（一番使う）。
unsupported	非対応端末の場合の処理。

肝となるのがchangeですね。

例えば、ある要素が押されている間、最大360°まで回転させたいとしましょう。次のようなコードになります。

Pressure.set( '#hoge', {
  change: function( force, event ){
    this.style.transform = 'rotate('+force * 360+'deg)';
  }
} );

今回は要素を拡大縮小・角丸調整・回転させるサンプルを作ってみました！

サンプルを確認する

併せて確認してみてください。

コンテンツ一覧へ戻る

この記事を書いている最中にも、何度か公式ドキュメントを見返していたのですが、なんかもっと色々自由を効かせることが出来そうです。。

近々またサンプルでも作ってみたいと思います！

近々…。。