BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能
BetterTouchToolにはFloating WebViewというHTMLをウインドウ表示させる機能があります。
用意したHTMLを表示させる以外にも、直接URLを指定してサイトを表示したりもできるので、工夫次第で様々な使い方ができそうです。
- HTMLを用意して独自のUIを実装する
- 1番手前に表示されるYouTubeやNetflix専用のウインドウを作成する
- よく使うウェブサービスをウインドウ化する
今回はこの「Floating WebView」機能についての基本的なことをまとめておきます。
BetterTouchTool本体に関しては、過去に記事にしているのでぜひそちらをご覧ください。
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指定する | |
| サイズ変更可能 | ドラッグでサイズを変更できるようにしたい場合はチェックする | |
| マウスでモニターの中央に配置 | マウスでドラッグして移動できるようにしたい場合はチェックする | |
| 位置を指定します。 | ウインドウ位置を固定したい場合はチェックを入れて、
| チェックを入れると「マウスでモニターの中央に配置」は 非活性になる |
| 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 | 複数回実行した場合の処理を下記の中から選択する
|
高度
［高度］タブではさらに細かい設定が可能です。
| 項目 | 内容 | 備考 |
|---|---|---|
| バックグラウンドでコンテンツを アクティブにしない | メモリ使用量を削減するために、 バックグラウンドではアクティブにしないようにする | メモリ使用量削減の代わりに 表示に時間がかかるようになる |
| カスタムユーザーエージェント | 独自のユーザーエージェントを付与する | |
| システムブラウザでプレフィックス付きの URLを開く | リンクをデフォルトブラウザで開く場合に、 プレフィックス付きのURLを開く | |
| システムブラウザでリンクを開いた後に閉じる | ブラウザでリンクを開いたあとに、 Floating WebViewのウインドウは閉じる | |
| コンテンツをドラッグしてウィンドウを移動 | タイトルバー部分だけでなく、 コンテンツ部分もドラッグで移動できるようにする | |
| CMDを押している間だけ ウィンドウを移動させる | commandを押しながらコンテンツをドラッグで ウインドウを移動できるようにする | 「コンテンツをドラッグしてウィンドウを移動」に チェックを入れている必要がある |
| スクリプティングのためのパスコード | 外部サイトを読み込むために使用するパスコードの設定 | |
| ユーザースクリプト | JavaScriptを使用したい場合に入力する |
ただHTMLを表示させるだけでなく様々な設定ができるので、どの設定だと使いやすくなるか試行錯誤していくと良さそうです。
