はじめに

Cordova iOS アプリで長押し(ロングタップ, ロングプレス)によるコンテキストメニューを無効化する方法。

TL;DR

  • テキスト選択、3Dタッチを無効化する場合は config.xml を設定
    • SuppressesLongPressGesture, Suppresses3DTouchGesture を true
  • 画像などの長押しを無効化する場合は CSS で設定
  • 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. テキスト選択を無効化
    2. 画像などの長押しを無効化
  5. まとめ
  6. 参考文献

環境・条件

iOS Simulator 上で確認。

  • Xcode Version 12.3 (12C33)
  • iPhone 11 Pro (iOS 14.3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69

$ node -v
v12.7.0

$ npm -v
6.14.5

$ cordova -v
10.0.0

$ cordova platforms
6.0.0
Installed platforms:
  ios 6.1.1

詳細

テキスト選択を無効化

参考: Config.xml - Apache Cordova

config.xml で設定可能。

  • SuppressesLongPressGesture を true に設定
  • 3Dタッチを無効化するなら Suppresses3DTouchGesture も true に設定
    • Suppresses3DTouchGesture = true にすると、連動して SuppressesLongPressGesture = true になる模様
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version='1.0' encoding='utf-8'?>
<widget
    id="com.example.app"
    version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
    <name>ExampleApp</name>
    <!-- 略 -->
    <platform name="ios">
        <!-- 長押しでの動作を無効化 -->
        <preference name="SuppressesLongPressGesture" value="true" />  <!-- *** これ *** -->
        <preference name="Suppresses3DTouchGesture" value="true" />  <!-- *** これ *** -->
    </platform>
</widget>

公式ドキュメントの抜粋と DeepL による翻訳。

Suppresses3DTouchGesture(boolean)
Default: false
Set to true to avoid 3D Touch capable iOS devices rendering a magnifying glass widget when the user applies force while longpressing the webview. Test your app thoroughly since this disables onclick handlers, but plays nice with ontouchend. If this setting is true, SuppressesLongPressGesture will effectively be true as well.

SuppressesLongPressGesture(boolean)
Default: false
Set to true to avoid iOS9+ rendering a magnifying glass widget when the user longpresses the webview. Test your app thoroughly since this may interfere with text > selection capabilities.
Config.xml - Apache Cordova より引用

==========================================
Suppresses3DTouchGesture(boolean)
デフォルト: false
true に設定すると、3D Touch 対応の iOS デバイスが、ユーザーがウェブビューを長押しししている間に力を加えたときに虫眼鏡ウィジェットをレンダリングしないようにします。この設定は onclick ハンドラを無効にしますが、ontouchend との連携は良好なので、アプリを十分にテストしてください。この設定がtrueの場合、SuppressesLongPressGestureも事実上trueになります。

SuppressesLongPressGesture(boolean)
デフォルト: false
trueに設定すると、ユーザーがウェブビューを長押しししたときにiOS9+が虫眼鏡ウィジェットをレンダリングしないようになります。これはテキスト選択機能に干渉する可能性があるため、アプリを十分にテストしてください。

画像などの長押しを無効化

参考:

CSS で設定。画像の例のみあげているが、おそらくリンク(a タグ)でも同じはず(未検証)。

1
2
3
4
5
6
7
8
9
10
11
12
img {
  -webkit-touch-callout: none; /* Disables long-touch menu */
  -webkit-user-select: none; /* Disable text selection (for Webkit) */
  user-select: none; /* Disable text selection (standard syntax) */
}

/* 特定画像のみに適用したい場合は適当に class を定義して使用する */
.not-selectable {
  -webkit-touch-callout: none; /* Disables long-touch menu */
  -webkit-user-select: none; /* Disable text selection (for Webkit) */
  user-select: none; /* Disable text selection (standard syntax) */
}

まとめ

  • テキスト選択、3Dタッチを無効化する場合は config.xml を設定
    • SuppressesLongPressGesture, Suppresses3DTouchGesture を true
  • 画像などの長押しを無効化する場合は CSS で設定
  • 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list