【Floorp】ブラウザーマネージャーサイドバーを使う方法
「Floorp（フロープ）」ブラウザは、「バージョン10.5.0（2022年9月17日公開）」から、ブラウザーマネージャーサイドバー機能を実装しました。
「Firefox」にも、履歴とブックマークのサイドバーはありますが、「Floorp」の場合、それに加えて、好きなウェブサイトを配置できます。以下の感じで利用できます。
- YouTubeを登録してサイドバーで音楽を流す
- 作業しつつ、サイドバーでTwitterをちょこっと見る
- 文字数カウンターを登録して、いつでも文字数計測
- 「DeepL翻訳」や「Google翻訳」を登録して、原文を見つつ、部分翻訳
- ブラウザゲームをしつつ、サイドバーで攻略情報を確認する
タブとは別で、お気に入りのウェブサイトを開けます。調べものをしている時や、作業している時に、ちょこっとサイドバーを表示して、別のページを閲覧できます。ウェブサイトの上限はありません。無限に登録できます。ドラッグ&ドロップで、順番を並び替えられます。
ウェブサイト上で右クリック→「このページをウェブパネルに追加」から登録できます。あるいは、サイドバーの「+」ボタンから追加できます。
「Cookie（クッキー）」を分離して、同じウェブサイトを別アカウントで登録することも可能です。Twitterを2つ登録して、片方をAのアカウント、もう片方をBのアカウントでログインできます。
左右どちらかに表示できます。ウェブパネルの幅は、マウスで引っ張ることで変更できます。個別にパネルの横幅を記憶する機能もあります。
下記動画は、少し古い時に撮影したものですが、いちお貼っておきます。動画内では最大10個まで登録できると書いていますが、現在（10.8.0）では、上限撤廃されています。
ブラウザーマネージャーサイドバーの開き方
デフォルトで有効になっていると思います。もし無効化されている場合は、設定から有効にできます。
「Floorp」の設定（about:preferences#bSB）→左側の「ブラウザーマネージャーサイドバー」→「ブラウザーマネージャーサイドバーを表示する」をオンにします。
キーボードショートカットキーのF2で、表示を切り替えられます。もし左側に表示させたい場合は、「サイドバーを右側に表示する」をオフにします。
ブラウザーマネージャーサイドバーに表示されている各アイコンをクリックすることで、ページを表示します。デフォルトでは、ブックマーク、履歴、ダウンロード、Google翻訳、Misskey.ioなどが登録されています。
ブラウザーマネージャーサイドバーに新しく登録する方法
いくつか方法があります。
ウェブサイトの右クリックから登録する
ブラウザーマネージャーサイドバーに登録したいウェブサイトを開きます。例えば、「Twitter」を登録してみます。開いたら、空いている部分を右クリック→「このページをウェブパネルに追加」をクリックします。
編集プロンプトが表示されます。「変更を保存」をクリックします。
「Cookie)を分離できる機能です。例えば、Twitterの場合、メイン垢とサブ垢用といった感じで、分けることができます。同じサービスで、複数アカウントを運用している方に便利です。
ブラウザーマネージャーサイドバーに「X（旧Twitter）」が登録されます。
リンク先の右クリックから登録する
リンク先の右クリックにある「リンク先をウェブパネルに追加」からでも登録できます。現在のサイトではなく、リンク先がパネルに登録されます。
ブラウザーマネージャーサイドバーの「+」ボタンから追加
サイドバーの一番下に、「+」アイコンがあります。ここをクリックします。
編集プロンプトが表示されます。右クリックと違って、「+」ボタンから追加した場合、URL欄が未入力になっています。登録したいウェブサイトを入力して、「変更を保存」をクリックします。
設定から登録・管理する
Floorpの設定（about:preferences#bSB）→「ブラウザーマネージャーサイドバー」から、管理・追加・削除できます。現在登録しているパネルが一覧表示されます。
「ブラウザーマネージャーサイドバーのウェブパネルを追加する」ボタンを押すことで、新しく登録できます。
ブラウザーマネージャーサイドバーの使い方
横幅を変更する方法
サイドバーは、ウェブサイトとの境界線をマウスで掴んで、ドラッグ&ドロップすることでサイズ変更できます。
サイドバーごとに横幅を記憶する方法
Twitterパネルでは狭い横幅、Google翻訳パネルでは広い横幅にするといったことが可能です。
サイドバーを開いて、覚えさせたい横幅に調整します。サイドバー内ヘッダーにある
ボタンをクリックします。これで指定した横幅を維持してくれます。
項目間の並び替え
アイコンをドラッグ&ドロップすることで、配置を変更できます。
サイドバーの設定（about:preferences#bSB）からでも、並び替えられます。
アドオンについて
パネル内では、一部アドオンが動作します。広告ブロッカーの「uBlock Origin」は動作しません。YouTubeをカスタマイズできる「Enhancer for YouTube」や、ウェブサイトにCSSを適用する「Stylus」などの拡張機能は動作します。「Enhancer for YouTube」を使うことで、YouTubeの広告も削除できるようです。
「Stylus」を使うことで、Twitterの広告を削除できます。下記記事は、別の拡張機能「Stylebot」での解説ですが、コードは一緒です。
https://www.naporitansushi.com/twitter-ads-hide/
サイドバーを非表示にする方法
サイドバーを非表示にしたい場合は、現在選択しているパネルアイコンをクリックするか、右上の「×」をクリックするか、キーボードのF2を押します。
無効化したい場合は、ブラウザーマネージャーサイドバーの設定（about:preferences#bSB）→「ブラウザーマネージャーサイドバーを表示する」をオフにします。
サイドバーからパネルを削除する方法
削除したいアイコンを右クリック→「このパネルをサイドバーから削除」をクリックします。設定から削除することも可能です。
感想
以上、Firefoxベースのカスタマイズ性に優れたブラウザ「Floorp（フロープ）」に搭載されているブラウザーマネージャーサイドバーについてでした。
余談ですが、開発者様に関連サービスの読み方を教えていただいたので、メモ代わりに記しておきます。「Ablaze（アブレイズ）」というコミュニティがあり、その中に「Floorp」や「Twitter UI Customizer」といったプロジェクトがあるという構造です。
| Floorp | フロープ |
| Ablaze | アブレイズ |
| Twitter UI Customizer | ツイッター・ユーアイ・カスタマイザー |
| Proton | プロトン |
| Photon | フォトン |
| Lepton | レプトン |
| Fluent | フルーエント |
| Fluerial | フルーエリアル |