BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能

BetterTouchToolにはFloating WebViewというHTMLをウインドウ表示させる機能があります。

用意したHTMLを表示させる以外にも、直接URLを指定してサイトを表示したりもできるので、工夫次第で様々な使い方ができそうです。

HTMLを用意して独自のUIを実装する
1番手前に表示されるYouTubeやNetflix専用のウインドウを作成する
よく使うウェブサービスをウインドウ化する

今回はこの「Floating WebView」機能についての基本的なことをまとめておきます。

BetterTouchTool本体に関しては、過去に記事にしているのでぜひそちらをご覧ください。

Webrandum

BetterTouchToolでトラックパッドやタッチバーにアクションを割り当てる

https://webrandum.net/bettertouchtool

Macのユーティリティアプリとして有名なものに、BetterTouchToolというものがあります。「トラックパッド」「タッチバー」「キーボード」等をカスタマイズできるアプリです。今回はそんなBetterTouchToolについてと、トラックパッドの設定方法についてまとめておきます。BetterTouchToolのインストールBetterTouchToolは公式サイトからインストールが可能です。ライセンスは2種類存在していて、2年間アップデート保証がある6.5ドル（2年経ってもアップデートができないだけで、使用は可能です）のプランと、無制限でアップデートできる...

Floating WebViewの使い方

アクションの追加時に「フローティングWeb ビュー / HTMLメニューを表示」を選択します。

アクションを発火すると、ウインドウが開いてHTMLの内容が表示されます。

HTML/Content

［HTML/Content］タブで表示するHTMLを指定できるのですが、URLやパスを指定する方法と、直接HTMLを記述する方法の2種類があります。

「フローティングWeb ビューに表示する Web URLまたはローカルHTMLファイルへのパス。」にURLやパスを指定するだけです。
ローカルファイルだけでなく、公開されているサイトのURLを貼り付けて表示もできます。

HTMLを直接指定したい場合は「URLまたはファイルパスの代わりにHTMLを直接提供することができます（両方が設定されている場合は推奨されます）。」の下にあるテキストエリアにHTMLを入力します。

ただ、テキストエリアは小さいですし、シンタックスハイライトもされないので、別のテキストエディタで入力してコピペになります。

構成

［構成］タブでは、表示するウインドウの細かい設定ができます。

項目	内容	備考
Titlebar Style	ウインドウタイトルの表示を下記の中から選択する
幅	ウインドウの幅をpx指定する
高さ	ウインドウの高さをpx指定する
サイズ変更可能	ドラッグでサイズを変更できるようにしたい場合はチェックする
マウスでモニターの中央に配置	マウスでドラッグして移動できるようにしたい場合はチェックする
位置を指定します。	ウインドウ位置を固定したい場合はチェックを入れて、下記の中から起点を選択して、起点からのX軸とY軸の距離をpx指定するメインモニタの左下隅を基準にマウスの位置を基準にしてウェブビューの中心とマウスでの画面の相対的な位置関係ウェブビューの左上とマウスを使った画面ウェブビューの右上とマウスでの画面ウェブビューの左下とマウスでの画面ウェブビューの右下とマウスでの画面	チェックを入れると「マウスでモニターの中央に配置」は非活性になる
Update above position & size settings after manually moving or resizing.	手動でウインドウ移動やサイズを変更すると、上記で設定した内容を更新するようにしたい場合はチェックする
白い背景を使用（デフォルトは透明）	HTMLの背景に白色（#fff）を使用したい場合はチェックする
Ignore mouse events / click through	マウスイベントを無視したい場合はチェックする
外側をクリックすると閉じる	ウインドウ外をクリックするとウインドウを閉じるようにする
Show BTT Dock Icon while open	ウインドウを開いている間はDockにBetterTouchToolアイコンを表示する
Z-Index	ウインドウを常に手前に表示させるなどの設定を、下記の中から選択する他のすべての窓の上に浮いているデスクトップに固執する – 他のすべてのウィンドウの後ろにウィンドウレベルを手動で指定する（詳細）
When run multiple times	複数回実行した場合の処理を下記の中から選択する Toggle between visible and hidden（表示・非表示を切り替える） Keep visible & refresh content（表示したまま再読込する）

高度

［高度］タブではさらに細かい設定が可能です。

項目	内容	備考
バックグラウンドでコンテンツをアクティブにしない	メモリ使用量を削減するために、バックグラウンドではアクティブにしないようにする	メモリ使用量削減の代わりに表示に時間がかかるようになる
カスタムユーザーエージェント	独自のユーザーエージェントを付与する
システムブラウザでプレフィックス付きの URLを開く	リンクをデフォルトブラウザで開く場合に、プレフィックス付きのURLを開く
システムブラウザでリンクを開いた後に閉じる	ブラウザでリンクを開いたあとに、 Floating WebViewのウインドウは閉じる
コンテンツをドラッグしてウィンドウを移動	タイトルバー部分だけでなく、コンテンツ部分もドラッグで移動できるようにする
CMDを押している間だけウィンドウを移動させる	commandを押しながらコンテンツをドラッグでウインドウを移動できるようにする	「コンテンツをドラッグしてウィンドウを移動」にチェックを入れている必要がある
スクリプティングのためのパスコード	外部サイトを読み込むために使用するパスコードの設定
ユーザースクリプト	JavaScriptを使用したい場合に入力する