[Vuetify]スワイプされた方向をVuetifyの機能を使って検知する方法[v-touch]

[Vuetify]スワイプされた方向をVuetifyの機能を使って検知する方法[v-touch]

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。

対象の記事Vuetify3 Betaをインストールしてみた件

Vue.jsを使って制作をしているなら、
ぜひおすすめのUIフレームワーク、Vuetify。

当サイトでは、これまでVuetifyに関する記事を複数書いてきましたが、
今回は、スワイプされた方向を、Vuetifyの機能を使って検知する方法についての記事です。

スワイプされた方向を検知できるv-touch

このセクションのタイトルの通り、v-touch を使うと、
付与した要素に対してのスワイプ操作を検知することができます。

具体的には、次の様に使います。

[html]

<div style="margin: 0 0; padding: 2rem;">
  <v-card 
    v-touch="{
      up: function(){swipeObserve('上方向')},
      right: function(){swipeObserve('右方向')},
      down: function(){swipeObserve('下方向')},
      left: function(){swipeObserve('左方向')}
    }"
    height="200"
    width="200"
    elevation="3"
  >
    スワイプの向き:{{direction}}
  </v-card>
</div>

↑3〜8行目に注目してください。
v-touch を付与すると、そのオプションとして
up, right, down, left の4方向のスワイプ操作が行われた時に実行される
関数を指定することができます。
ちなみにサンプルとしてv-cardに付与していますが、普通のdiv要素に付与してももちろん動きます。

実行される関数は、たとえば次の様に指定しておけば良いです。

[JavaScript]

methods: {
  swipeObserve(e) {
    this.direction = e;
  },
},
// ...(省略)...

↑スワイプ操作が行われた時に実行される関数を定義。
実行されると、引数として指定した文言が帰って来るので、
それをそのままdirectionというdata(名前はなんでも良いです)に格納。
冒頭のテンプレート側の13行目に書いたように
スワイプの向き:{{direction}}
↑この様にマスタッシュ構文( {{}} )で展開して表示している、というわけです。

dataは、単純に次の様に用意しておけば良いです。

[JavaScript]

data: () => ({
  direction: '',
  // ...(他のdata)...
}),
// ...(computed, mounted 等が続く)...

上記の例では、単純に返ってきた値を表示しているだけですが、
それぞれのスワイプの結果として実行される関数内に
他の処理を割り当てておけば、任意の方向にスワイプされた時に
自由な処理を実行させることが可能です。

また、上記の例では上下左右すべて同じ関数を実行させていますが、
それぞれ別の関数を割り当てることももちろんできます。いろいろ使い道がありそうですね。

検知できる端末、環境

この v-touch ですが、スワイプ操作を検知するためのものですので、
スマートフォンやタブレット等の「スワイプ操作を受け付けるデバイス」で正常に動作します。

どうしてもPC上で動作確認してみたい場合は、Chrome等のブラウザのエミュレーターを使うと、
擬似的にスワイプが検知されていることを確認することができます。

v-touchの公式解説ページ

スワイプされた方向を検知することができる、
v-touch のVuetify公式ページは次になります。

Touch directive — Vuetify

上のセクションでは、

v-touch=”{
up: function(){swipeObserve(‘上方向’)},
right: function(){swipeObserve(‘右方向’)},
…(省略)…

↑この様に

function(){関数名(値)}

という書き方でご紹介しましたが、公式解説ページではアロー関数

() =>

を使った書き方も紹介されています。一読すると、理解が深まるかと思います。

この記事のまとめ

今回は、Vuetifyが備える数々の機能の中から、
付与した要素に対するスワイプ操作を検知することができる v-touch について、記事を書きました。
(※「機能」というか、v-touchは、正確には「ディレクティブ」という概念)

この v-touch 、例えば
特定の方向にスワイプした時にヒントメッセージを表示して
ユーザー操作の補助となる情報を出したり、いろいろな使い方が想定できそうです。

また記事の中段でも書きましたが、ただメッセージを表示するだけではなく、
スワイプの方向に応じて他の処理を指定する事ももちろん可能ですので、
アイデア次第で自由度高く使えそうですね。

当サイトでは、今後もVue.js、Vuetifyに関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。