【Angular4】タップなどのジェスチャーの設定を変更する方法

Ionic3でアプリを作成していて、

「タップの反応をもっとよくして」 「素早くタップしないと反応しないんだけど、どうにかならない？」

という具合に、操作感の改善を求められることがあるかと思います。

Angularでは、Tap, pressup, swipe などのジェスチャーは、HammerJSが使用されています。

HammerJSの設定を上書きするための仕組みがAngularから提供されているので、それを使うことでジェスチャーのデフォルト設定を上書きすることができます。

// app.module.ts

// ↓追加 HammerGestureConfig, HAMMER_GESTURE_CONFIG
import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// HammerJSのジェスチャー設定を上書き
export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any> {
      'tap': { threshold: 50 } // 指の動きを許容する閾値 (default: 2)
  }
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    // ↓追加
    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}
  ]
})
export class AppModule {}

設定できる項目は、tap, swipe, rotate, press, pinch, pan があります。

詳しくはリファレンスを参照してください。

http://hammerjs.github.io/getting-started/

Angularアプリケーションプログラミング

山田 祥寛

Angularによる動的Webアプリケーション開発に必要となる知識が、この1冊で身に付きます!

Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉

榊原 昌彦

Ionicの最大の特徴は、UIデザインの良さです。海外には多くのユーザがいますが、その多くは「UIデザインがいいからIonicにした」と答えています。