ガイド
Capacitor で Text Interaction を使う方法
Capacitor iOSアプリでテキスト選択と拡大鏡を無効化
@capgo/capacitor-textinteraction iOSのCapacitor WebViewにおけるテキストインタラクションのオン/オフを、たった1回の呼び出しで切り替えられます。オフにすると、テキストの長押しによる選択、コピーメニューの表示、iOS 15から再導入された拡大鏡の表示が行われなくなります。これにより、Webアプリがネイティブシェル内のWebページのように感じられるのを防ぎます。
内部的には、このプラグインは以下を設定します： WKPreferences.isTextInteractionEnabled アプリの WKWebView。それ以外の箇所には影響を与えません。
ユースケース
- ゲーム、キオスク端末、描画アプリ 長押しやドラッグ操作でテキストを選択させたくない場合。
- カスタム長押しメニュー ネイティブの選択ハンドルやメニューと干渉してしまう場合。
- メディアプレーヤー、マップ、カルーセル ゆっくりとしたスワイプで誤って拡大鏡が起動してしまう場合。
- ブランド感のあるアプリ風UI 選択可能なラベルやボタンがネイティブ感を損なう場所で。
ユーザーが長いコンテンツをコピーしたり、フォームを入力したりする画面では、テキスト操作を有効にしてください。
インストール
bun add @capgo/capacitor-textinteraction
bunx cap sync
いいえ Info.plist キー、権限、または capacitor.config.ts 入力が必要な場合。
| プラグインのバージョン | Capacitor のバージョン | メンテナンス済み |
|---|---|---|
| v8.x | v8.x | はい |
| v7.x | v7.x | オンデマンド |
| v6.x 以下 | v6.x 以下 | いいえ |
アプリ起動時にテキスト操作を無効化
import { Capacitor } from '@capacitor/core';
import { TextInteraction } from '@capgo/capacitor-textinteraction';
if (Capacitor.getPlatform() === 'ios') {
const { success } = await TextInteraction.toggle({ enabled: false });
if (!success) console.warn('Text interaction could not be changed on this device');
}
常に明示的に enabled 値を渡してください。ネイティブ側では、値がない場合は false.
ユーザーが入力する前に再度有効化
テキスト操作が無効な間、 <input>, <textarea> と contenteditable 要素は入力を受け付けなくなります。フォームがある画面では再度有効にし、ユーザーが離れるときにまた無効にしてください。
import { Capacitor } from '@capacitor/core';
import { TextInteraction } from '@capgo/capacitor-textinteraction';
const isIos = Capacitor.getPlatform() === 'ios';
export async function setTextInteraction(enabled: boolean) {
if (!isIos) return false;
const { success } = await TextInteraction.toggle({ enabled });
return success;
}
// Entering a login, search or checkout screen
await setTextInteraction(true);
// Leaving it
await setTextInteraction(false);
ルーターを使う場合は、 setTextInteraction(true) 入力があるルートの enter フック内で呼び出します（例：Vue Router beforeEnter、React useEffect、または Angular ionViewWillEnter）、離れるときは setTextInteraction(false) 同様に呼び出します。
プラグイン vs CSS
CSS でほとんどの選択を非表示にできます：
body {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
input,
textarea,
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
CSS は要素ごとに適用されるため、設定を忘れた要素は選択可能なままになり、WebView 自体の長押しの挙動も変わりません。一方、プラグインは WebView レベルで動作するので、拡大レンズを含むすべての画面を一度の呼び出しでカバーできます。多くのアプリでは、アプリらしい画面にはプラグインを、テキスト操作を残す画面内の細かい制御には CSS を、という形で両方を併用しています。
API リファレンス
toggle(options)
toggle(options: { enabled: boolean }): Promise<{ success: boolean }>
Capacitor WebView のテキストインタラクションを有効または無効にします。
enabled:true選択、コールアウト、拡大鏡を復元します。falseこれらを無効にします。success:true変更が適用された時点（WebView が利用可能な iOS 14.5 以降）。falseAndroid の場合と、WebView が利用できない場合。
getPluginVersion()
getPluginVersion(): Promise<{ version: string }>
ネイティブプラグインのバージョンを返します。返り値は web ブラウザでは。
プラットフォームの動作
| プラットフォーム | 動作 |
|---|---|
| iOS 14.5以上 | 設定します isTextInteractionEnabled の WKWebView再度切り替えるまで、すべてのページに適用されます。 |
| Android | No-op。解決します { success: false }選択範囲を制限したい場合は、CSSを使用してください。 |
| Web | toggle 未実装のエラーをスローします。Guard calls with Capacitor.getPlatform(). |
トラブルシューティング
- 入力が機能しなくなりました。 Text interaction is still disabled. Call
toggle({ enabled: true })フォームが表示される前に。 - Androidでは何も変更されません。 想定どおりです。このプラグインはiOSのみ対応しています。
TextInteraction.toggle is not available on web. 呼び出しがブラウザ、またはデスクトップブラウザでの開発中に実行されました。プラットフォームチェックで囲んでください。- アプリを再起動すると選択が戻ります。 起動のたびにテキスト操作が有効な新しいWebViewが作成されます。呼び出しは
toggle({ enabled: false })起動時に行ってください。
関連プラグイン
- プライバシー画面 iOSのアプリスイッチャーでアプリの内容を隠し、Androidではスクリーンショットをブロックします。
- ホームインジケーター 没入型画面向けにiOSのホームインジケーターを非表示にします。
- 画面の向き 画面の向きを固定・取得します。
- すべて見る Capgo による Capacitor プラグイン.
App Store の審査なしで変更をリリース
テキストインタラクションの切り替えは JavaScript で行います。プラグインを Native Build に組み込んだ後は、実行場所とタイミングを次の方法で変更できます Capgo live update App Store の審査を待つ代わりに。