【Floorp】ブラウザーマネージャーサイドバーを使う方法

2022年12月17日2023年8月26日Floorp

この記事では、Firefoxベースのウェブブラウザ「Floorp（フロープ）」のバージョン10.5.0（2022年9月17日公開）から実装された「ブラウザーマネージャーサイドバー（パネル）」の使い方について書きます。

好きなウェブサイトを登録できます。

「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の場合、メイン垢とサブ垢用といった感じで、分けることができます。同じサービスで、複数アカウントを運用している方に便利です。

ブラウザーマネージャーサイドバーに「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」での解説ですが、コードは一緒です。

【Stylebot】Twitterのプロモーションを非表示にするCSS

この記事では、Twitterのタイムラインに表示される「プロモーションツイート」を非表示にするCSSについ ...

 https://www.naporitansushi.com/twitter-ads-hide/

【Google翻訳】VivaldiやFloorpのサイドバーに最適化するCSS

この記事では、「Google翻訳」をVivaldiやFloorpブラウザのサイドバーに最適化させるCSSについて書きま ...

 https://www.naporitansushi.com/google-translate-sidebar-css/

サイドバーを非表示にする方法

サイドバーを非表示にしたい場合は、現在選択しているパネルアイコンをクリックするか、右上の「×」をクリックするか、キーボードのF2を押します。

無効化したい場合は、ブラウザーマネージャーサイドバーの設定（about:preferences#bSB）→「ブラウザーマネージャーサイドバーを表示する」をオフにします。

サイドバーからパネルを削除する方法

削除したいアイコンを右クリック→「このパネルをサイドバーから削除」をクリックします。設定から削除することも可能です。

感想

以上、Firefoxベースのカスタマイズ性に優れたブラウザ「Floorp（フロープ）」に搭載されているブラウザーマネージャーサイドバーについてでした。

余談ですが、開発者様に関連サービスの読み方を教えていただいたので、メモ代わりに記しておきます。「Ablaze（アブレイズ）」というコミュニティがあり、その中に「Floorp」や「Twitter UI Customizer」といったプロジェクトがあるという構造です。