# BetterTouchToolでHTMLを使った表示を作成できる「Floating WebView」機能
URL: https://webrandum.net/bettertouchtool-floating-webview/
公開日: 2022-10-26
更新日: 2022-10-27
カテゴリー: 作業効率化
タグ: BetterTouchTool
出典: Webrandum（著者: サイトウ マサカズ）
BetterTouchToolにはFloating WebViewというHTMLをウインドウ表示させる機能があります。
用意したHTMLを表示させる以外にも、直接URLを指定してサイトを表示したりもできるので、工夫次第で様々な使い方ができそうです。
- HTMLを用意して独自のUIを実装する
- 1番手前に表示されるYouTubeやNetflix専用のウインドウを作成する
- よく使うウェブサービスをウインドウ化する
今回はこの「Floating WebView」機能についての基本的なことをまとめておきます。
BetterTouchTool本体に関しては、[過去に記事](https://webrandum.net/bettertouchtool/)にしているのでぜひそちらをご覧ください。
[WebrandumBetterTouchToolでトラックパッドやタッチバーにアクションを割り当てるhttps://webrandum.net/bettertouchtoolMacのユーティリティアプリとして有名なものに、BetterTouchToolというものがあります。「トラックパッド」「タッチバー」「キーボード」等をカスタマイズできるアプリです。今回はそんなBetterTouchToolについてと、トラックパッドの設定方法についてまとめておきます。BetterTouchToolのインストールBetterTouchToolは公式サイトからインストールが可能です。ライセンスは2種類存在していて、2年間アップデート保証がある6.5ドル（2年経ってもアップデートができないだけで、使用は可能です）のプランと、無制限でアップデートできる...](https://webrandum.net/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指定する | |
| --- | --- | --- |
| サイズ変更可能 | ドラッグでサイズを変更できるようにしたい場合はチェックする | |
| --- | --- | --- |
| マウスでモニターの中央に配置 | マウスでドラッグして移動できるようにしたい場合はチェックする | |
| --- | --- | --- |
| 位置を指定します。 | ウインドウ位置を固定したい場合はチェックを入れて、 下記の中から起点を選択して、起点からの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を使用したい場合に入力する | |
| --- | --- | --- |
ただHTMLを表示させるだけでなく様々な設定ができるので、どの設定だと使いやすくなるか試行錯誤していくと良さそうです。