Zenn
🔨

Lightning Web Component で hammer.js を使ってみる

2022/12/26に公開
JavaScript
Salesforce
LWC
hammerjs
tech

はじめに

Lightning Web Component（以降：LWC）の開発では時に"Salesforce Mobile App"に対応するためのコンポーネントを作成するときがあると思います。そうするとスワイプやタップ操作に対応する必要があります。

そんな時に便利なのがHammer.jsです。ですが「LWCでHammer.jsを使う」という記事は日本語でも英語でも見つかりません（そもそもあまりやられていない？？）。そこで今回はLWCでHamme.jsを使う方法をご紹介します。

手順

今回は下記のboxに対してスワイプ操作した時にイベント検知できるようにします。

実装にあたって大きく分けて３つのstepで実施することができます（HTMLやCSSの具体的な手順や解説はございません）。

  1. 静的リソースへのHammer.jsファイルアップロード
  2. LWCで静的リソースを読み込む
  3. スワイプイベントを検知したい要素に対してイベント検知をさせる

1.静的リソースへHammer.jsライブラリをアップロードする

https://hammerjs.github.io/ からライブラリをダウンロードします。
Hammer.min.jsをクリック

するとこのようなページが表示されるので「名前をつけて保存」します。

次はSalesforceにこの保存したファイルを静的リソースとして保存します。

「設定」->「静的リソース」で「新規」をクリック

名前をつけて先ほど保存したファイルを添付します。キャッシュコントロールは「公開」に設定します。

保存すれば静的リソースの作成については完了です！

2.LWCで静的リソースを読み込む

次にLWCにて静的リソースを読み込みます。
今回はdemoComponentというコンポーネントを作成して進めます。

静的リソースは下記のように読み込みます。

import { LightningElement,api } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import hammer from '@salesforce/resourceUrl/hammer_min_js';

export default class DemoComponent extends LightningElement {}

以上で読み込みは完了です！最後にboxでイベントが検知できるようにしていきます。

3.スワイプイベントを検知したい要素に対してイベント検知をさせる

今回のboxのHTMLとCSSは下記のようになっています。

<template>
  <div class="box">
    <p>box：{eventType}</p>
  </div>
</template>

swipeイベント名を表示できるようにしています。

.box {
  display: table;
  margin: 100px auto 0;
  width: 200px;
  height: 200px;
  background-color:aquamarine;
}
p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

CSSは最低限しか用意していません。

このdiv要素に対してHammer.jswを当てていきます。

Javascriptの全体像

全体のコードは次のようになっています。

import { LightningElement, api } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import hammer from '@salesforce/resourceUrl/hammer_min_js';

export default class DemoComponent extends LightningElement {
  eventType = '';
  initialized = false;
  
  renderedCallback() {
    if(this.initialized) {
      return;
    }
    Promise.all([
      loadScript(this, hammer),
    ]).then(() => {
      this.initialized = true;
      const selectedScaleElement = new Hammer(this.template.querySelector('.box'));
      selectedScaleElement.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
      selectedScaleElement.on("swipedown swipeup swipeleft swiperight", (e) => { 
        this.eventType = e.type;
      });
    }).catch(error => {
      console.error(error);
    });
  }
}

するとこのようにスワイプ方向を検知していることが確認できます！

最後に

以上がLWCでHammer.jsを使う方法のご紹介でした！

モバイルやタブレット対応をした際にはクライアントから実装したいと言われそうな機能なので、ぜひこうしたアクション対応を検討する方はHammer.jsを使ってみてください！

Discussion