Electronでタップモード

Chromeデバッグモードの1機能、タップ

Chromeには検証で開発者ツールを起動すると、その画面の左上付近にToggle Device toolberという名前が出るボタンがあります。

これを使うと、そのWebサイトをiPhone等の解像度で見れる他、カーソルがタップモード？になり、クリックをタップとして扱うことができます。

このモードをElectronでも使いたい場合にどうするかというのが今回の記事です。

以下、レンダー側の内部で使える <webview>タグ は <webview> と表記します。

デバッグコマンド

Chromeにはどうもデバッグコマンド用のインターフェースがあるらしく、それをElectronのメインプロセスで実行します。

const win = new BrowserWindow();
if ( !win.webContents.debugger.isAttached() )
{
    win.webContents.debugger.attach( '1.2' );
}
win.webContents.debugger.sendCommand( 'Emulation.setTouchEmulationEnabled', { enabled: true } );

詳しい説明

Chromeが用意した命令などはこちらで確認可能です。

今回は1.2を使うので、1.2のリンクを張っています。

この BrowserWindow.webContents.debugger はChromeのWebviewに搭載されているので、Electronで使用可能な<webview> でも <webview>.debugger で一応呼び出すことが可能です。
しかし、 debugger.attach を呼び出さなければ debugger.sendCommand で何を送っても無反応で、かつその debugger.attach はレンダープロセスでは実行できないらしいので、今回はメインプロセス側でレンダーのWebviewに対してタップモード？を指定しています。

なお、 true を false に書き換えれば無効化（いつものマウスモードに）できるので、ipc等でレンダー側からメインプロセスにつないであげれば、レンダー側のアクションで切り替え可能です。

その他

レンダー内の <webview> も attach さえできれば使えそうですが、メインプロセス側からどうやって見つけて呼び出すかまだ不明なので、ちゃんと <webview> で可能かどうかは不明です。

また、今回のタップモードで <webview> 内の要素をクリックした時、タップイベントは処理されていそうですが、クリックイベントは処理されていないような挙動だったので、注意が必要です。