Vivaldiブラウザを使って、TweetDeck風画面を構築してみよう！
「Vivaldi」ブラウザのタブタイリング機能、タブスタック機能を利用することで、「TweetDeck」風の画面を再現できます。アドレスバー、ブックマークバー、タブバーなどの表示・非表示も切り替えられます。
CSSを適用できるChrome拡張機能などを利用することで、スクロールバーを細くしたり、一定の横幅サイズ以下で、サイドバーを非表示にしたり、より近づけます。
ただし、あくまで"風"なので、本物の「TweetDeck」と比べると、機能性や操作性で劣ると思います。全然本家に勝てなくても、僕を責めないでください。
本記事のことを、全部実行する必要はありません。参考になりそうな知識を適当に羅列しているだけなので、皆さんがいいなと思うものだけを、取捨選択して取り入れるといいかなと思います。
2023年8月から、Google検索などから「TweetDeck（https://tweetdeck.twitter.com/）」にアクセスしても、「Twitter Blue」の購入ページにリダイレクト（移動）するようになりました。
僕は、「TweetDeckに課金したくない！」というほどアンチでもないですが、逆に課金するほどのヘビーユーザーでもないので、このまま無料利用しようと思います。
メインで使っている「Vivaldi」ブラウザだと、「TweetDeck」に近い画面を、通常の「Twitter（X）」で再現できそうだなと思ったので、実験の意味を込めて記事にします。
本記事は、既に「Vivaldi」ブラウザを利用している前提で書きます。インストールされていないという方は、以下の記事が参考になるかもしれません。標準搭載のマウスジェスチャー、タイリング、スタック、ワークスペースなど、多機能が売りのブラウザです。
https://www.naporitansushi.com/vivaldi/【余談】「Open-Deck」拡張機能の紹介
本題に入る前にちょっと拡張機能の紹介です。
「X（旧Twitter）」上のリプライに湧いているインプレゾンビ、スパムユーザー、アラビア文字・ユーザーなどを非表示にできる拡張機能「Clean-Spam-Link-Tweet」を開発されている作者さんが、2024年03月06日に「Open-Deck」という拡張機能を正式リリースされました。
開発されていることは把握していました。ついに正式版として登場したか～という印象です。
僕はまだ使っていないのですが、ざっくりいうと、「TweetDeck」っぽいカラム表示の画面を再現できるようです。単純な真似ではなく、独自機能なども盛り込んでいるようです。
もしかしたら「Vivaldi」を使って無理やり実装するよりも、拡張機能のほうが動作的に安定しているかもしれません。まぁまだまだ登場したばかりなので、不具合などもあるかと思います。という情報提供でした。
https://chromewebstore.google.com/detail/open-deck/gmkadaeib...VivaldiでTweetDeck風画面を構築する手順
Vivaldiをインストールする
そもそもPCに「Vivaldi」ブラウザをインストールしていない方は、インストールします。
https://vivaldi.com/ja/初めてインストールする場合は、ダウンロードしたセットアップファイルを起動して、「ユーザー別にインストール」にして、保存場所は特に変更せず、そのままインストールで良いかなと思います。
もしインストールではなく、ポータブル版としてダウンロードしたい場合は、「スタンドアローンインストール」にして、好きな保存場所を指定します。個人的には、特にこだわりがない場合、通常インストールのほうがいい気はします。
詳しい導入方法などは、こちらの記事を参考にしてみてください。
インストールできたら、初期チュートリアル画面が表示されます。（vivaldi://welcome/）画面の指示に従って、ポチポチ押していけば、1分～2分程度で終わると思います。
チュートリアルの途中で、広告ブロッカーを選択する画面になります。Vivaldiブラウザには標準で広告ブロッカーが搭載されています。
「トラッカーと広告をブロック」にすれば、Twitter上のプロモーションが消えてくれるかもしれませんが、ブロックの関係上、画像が表示されなかったり、ログインがうまくできないなど、別の不具合が発生する可能性もあります。頭に入れておきましょう。
慣れ親しんだ広告ブロック拡張機能（例：uBlock Origin）がある場合、Vivaldiのブロッカーは、「ブロックなし」にして、あとから拡張機能を入れる…というのもいいかなと思います。
さらにチュートリアルを進めると、メールやカレンダー機能を有効にするかどうかの選択画面になります。Vivaldiブラウザには、内蔵メール・フィード・カレンダークライアントを備えています。ブラウザ一つで、メール内容を確認・送信できます。
「もうTwitter専用ブラウザにする予定だから、余計な機能いらない！」という場合は、「ウェブブラウザ」を選択しましょう。
Windowsで「Vivaldi」ブラウザを使っていると、「Windowsセキュリティの重要な警告」の「このアプリの機能のいくつかがWindows Defenderファイアウォールでブロックされています」ウィンドウが表示される時があります。
もし表示された場合は、元々チェックが入っている下の「パブリックネットワーク（空港、喫茶店など）（非推奨）」のチェックを外して、「プライベートネットワーク（ホームネットワークや社内ネットワークなど）」にチェックを入れて、「アクセスを許可する」でいいと思います。
見たい分だけタブを複製する
「Vivaldi」をインストールできたら、「Twitter（X）」を開いて、ログインします。ベースはChromiumで、Chromeブラウザと一緒なので、特に問題なく、操作できると思います。
「TweetDeck」風にして見たい列数分だけ、タブを複製します。「X（旧Twitter）」のタブを右クリック→「タブを複製」をクリックすることで複製できます。
「TweetDeck」の場合は、最低限の横幅が維持されていて、カラム列が画面の横幅を超えた場合、水平スクロールバーが表示されて、左右に移動できるようになっています。しかし、「Vivaldi」のタイリング機能ではそういったものがありません。
よって、タブを沢山開いている状態でタブタイリング（左右に並べて表示）した時に、一つずつの横幅が狭くなり、見にくくなります。僕が試した感じ、10個は多いです。最大でも5個くらいがいいのかなぁと思います。モニターのサイズにもよると思います。
1つのタブタイリングに対しての話なので、5個以上見たい列がある！という場合、2個目のタブタイリングを作成すればいいかなと思います。
それぞれのタブを見たいページに移動する
それぞれ複製したタブを、見たい情報ページに移動させます。スタックとかタイリングした後でもいいんですが、若干タイリング後の横幅が狭い時は、操作しにくいと思うので、今のうちにやっておくといいかなと思います。
例えば、タブAはホーム、タブBは何かしらの検索結果、タブCは通知ページ…などなどです。
タブタイリングで左右に並べて表示する
「Vivaldi」には、タイリングと呼ばれる複数ページを1つのタブ（ページ内）に並べられる機能を搭載しています。本機能を使って、複数の「X（旧Twitter）」ページを、1つのページ内に縦並びで表示しようという魂胆です。
タブを複数選択します。タイリングしたい「X（旧Twitter）」の最初のタブをクリック→Shiftキーを押しながら、最後のタブを選択すると、間にあるタブ全てが、自動的に選択されます。
タイリングしたいタブを複数選択できたら、クイックコマンドを起動します。クイックコマンドとは、ブラウザ内で使える辞書的なツールです。何かしたい操作を検索して、すぐに実行できます。
クイックコマンドのデフォルトショートカットキーは、確か、F2だったと思います。クイックコマンド内の検索ボックスに「左右」と入力します。「左右に並べて表示」というコマンドが表示されると思うので、クリックして実行します。
タイリング機能は、クイックコマンドからじゃなくても、色々アクセス方法があります。ステータスバー経由、ショートカットキー、マウスジェスチャーなど、自分の好きな方法で「左右に並べて表示」してみてください。
タイリングできたら、その時点で、ある程度「TweetDeck」っぽい画面が構築できます。ただし、この時点ではスクロールバーが太く、どのカラムにもサイドバーがあるせいで、画面が占有されている…など、細々した問題点があります。
「これで十分」という場合は、作業を終了してOKです。1つのタブに見えるようで、実際は独立したタブなので、それぞれ個別にスクロールできます。
「Vivaldi」の設定（Ctrl+F12）→一般→「起動時に開くページ」を「最後のセッション」にしている場合は、次回起動時もタイリング状態を維持してくれます。毎回作業する必要はありません。
やらなくてもいいけど、スタックでタブをまとめる
タブスタックとは、タブの中にタブを入れて、まとめられる機能です。この作業はやらなくてもいいんですけど、やっておいたほうが、タブをいっぱい開いた時に管理しやすく、見た目もすっきりします。
5個の「X（旧Twitter）」を開いているとします。この場合は、4個のタブを複数選択します。残り1個の余っているタブに向かって、複数選択したタブをドラッグ&ドロップします。GIF画像を貼っておきます。
水平タブバーを使っている場合のコツは、一旦タブを、バーから切り離すかのように、上（あるいは下）にもっていってから、そこから1個のタブにドラッグ&ドロップする点です。水平移動でドラッグ&ドロップしても、タブの並び替え動作になるので注意です。
スタックすると、1個のタブの中に、ドラッグ&ドロップしたタブが収納されます。他のタブを開いた時も、見た目は1個のタブなので、見やすくなります。
リンクをスタック外で開くように設定
デフォルトでは、「X（旧Twitter）」内で開いた記事や画像リンクは、タブスタックの中で開くようになっています。スタック内で開かれることにより、タイリングに巻き込まれて表示されてしまいます。
上記のような状態が嫌な場合は、スタック内で開かないように設定変更します。
「Vivaldi」の設定（Ctrl+F12）を開きます。左側の「タブ」→「タブスタックのオプション」項目にある「新しいタブをタブスタック内で開く」のチェックを外します。
「X（旧Twitter）」内で開いたリンク先のページが、タブスタック・タイリングに巻き込まれず、新規タブとして開かれます。タイリングした狭い画面ではなく、通常のタブ状態で、記事やリンク先ページを閲覧できます。
画像を開く時のワンポイントアドバイス
試しに、こちらのツイートの画像を開いてみます。
通常だと、タブタイリング・スタック内で開かれてしまい、狭くて見にくいです。漫画だと余計見にくいです。ページの拡大縮小を使うと、他の「X（旧Twitter）」タブにも反映されてしまい、思わぬ表示崩れが発生するリスクがあります。
上記の現象で困っている場合、「リンクをスタック外で開くように設定」で解説したように、「Vivaldi」の設定から、リンク先をスタックの外で開くように設定します。
設定した状態で、ツイートをCtrl+左クリック、あるいはマウスのホイールでクリックします。
バッググラウンドタブで、そのツイートの詳細ページが開かれます。スタックの外で開くようにしているので、タイリングタブに影響せず、広い画面で閲覧できます。あとは画像をクリックして、そのタブ内で閲覧できます。
開いたタブを次回起動時も維持する方法
デフォルトでどういった設定になっていたか忘れましたが、「Vivaldi」ブラウザには、終了時に開いていたタブを、次回起動時も表示するオプションがあります。
設定→一般→「起動時に開くページ」を「最後のセッション」にします。疑似「TweetDeck」を構築した後、タブを閉じずに、そのままブラウザ右上の「×」を押します。再起動させると、開いていたタブ・スタックが、そのまま開かれます。
2つ以上のウィンドウを開いていて、閉じる順番を間違えると、思ったタブが復元しなかったり、不具合やクラッシュで、タブが吹き飛ぶこともあるので、過度な期待はしない方がいいかなと思います。
怖い方は、標準搭載されているセッション機能を使って、タブ情報を保存するといいかなと思います。ゲームのセーブみたいにブラウザのタブを保存できる機能です。「Vivaldi セッション」とかでGoogle検索すると、方法が出てくると思います。
コマンドチェイン機能で、すぐに開けるよう設定
「Vivaldi」には、コマンドチェインと呼ばれる複数の操作を一つにまとめて、任意のタイミングで発動できる機能を搭載しています。言い換えると、マクロとか自動化…になると思います。
この機能を使って、任意のタイミングで、複数の「X（旧Twitter）」を開いて、左右に並べて表示…といったこれまで紹介した手順を自動化できます。
「Vivaldi」ブラウザを「TweetDeck」専用機にするのであれば、設定→一般→「起動時に開くページ」を「最後のセッション」にしておけば、勝手に次回起動時も、タブの状態を維持してくれるので、コマンドチェインを作成しなくてもいいのかなと思います。
ただし、「最後のセッション」は、最後に閉じたウィンドウを復元する…という意味なので、複数ウィンドウを開いていて、先に閉じたウィンドウのほうに、「TweetDeck」画面を構築していた場合、復元されなくなります。閉じたタブを開く機能を使うことで、さくっと元に戻せますが、心配な方は、いつでも再現できるコマンドチェインとして作成しておくといいかなと思います。
詳しくは、下記記事を参考にしてみてください。
スクロールバーを消す作戦
いくつか方法があると思いますが、本記事では、以下の2つを紹介します。「消したくないよ！」という場合は、何もしなくてOKです。
Chrome拡張機能「Hide Scrollbar」を利用する
恐らく、類似の拡張機能は沢山あると思いますが、本記事では、過去ナポリタン寿司が書いていた「Hide Scrollbar」拡張機能の紹介記事を貼っておきます。インストールして、ページをリロードすることでスクロールバーが消えます。
注意点ですが、「X（旧Twitter）」に限らず、全てのウェブサイト（一部特殊ページ除く）で消えます。「TweetDeck」専用機にするなら、まぁいいのかなと思います。
CSSを適用できる「Stylebot」拡張機能などを利用する
ウェブサイト上にCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用することで、「X（旧Twitter）」上だけスクロールバーを消せます。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Stylebot」は、別記事で書いているので、初めての場合は、一度目を通しておくといいかなと思います。
CSSを適用できるChrome拡張機能は、「Stylebot」だけではなく、「Stylus」など色々あるので、自分が好きな拡張機能でOKです。
スクロールバーだけでなく、CSSでできる範囲のデザイン変更が可能です。当サイトでも、いくつかカスタマイズ記事を公開しています。
- 【Twitter】ツイート下の「プロモーションする」を非表示にするCSS
- 【Stylebot】Twitterのプロモーションを非表示にするCSS
- 【Stylebot】Twitterの右側のサイドバーを非表示にするCSS
- 【Twitter】タイムラインの横幅を広げるCSS。画面を有効活用！
- 【Twitter】DMの入力欄の高さ制限を撤廃するCSS
「Stylebot」でスクロールバーを消したい場合、タイリングした「X（旧Twitter）」ページを開きます。インストールした「Stylebot」アイコンを左クリック→「Stylebotを開く」をクリックします。
初めて開く場合は、「ベーシック」タブになっていると思います。下部にある「コード」をクリックしてスタイルシート画面に切り替えます。
白紙のスタイルシートが表示されます。ここに以下のコードを書き込みます。コピペでOKです。スクロールバー（::-webkit-scrollbar）を「display: none」で削除するという意味です。
/*スクロールバーを消す*/
::-webkit-scrollbar {
display: none !important;
}
書き込めたら、右上の「×」で終了します。最初はスタイルシートを書き込んだタブの「X（旧Twitter）」だけ、反映されると思います。一度ブラウザを再起動するか、タイリングしているTwitterタブ全てをリロードすると、全てに反映されます。
スクロールバーが消えて、多少横幅を有効活用できます。
スクロールバーを細くする作戦
拡張機能を利用することで細くできます。「細くなくてもいいよ！」という場合は、何もしなくてOKです。
類似の拡張機能は色々あると思いますが、本記事では「Modern scrollbar」を挙げます。全てのサイト上のスクロールバーを、細く角丸な感じにするChrome拡張機能です。
https://chromewebstore.google.com/detail/modern-scrollbar/bg...
インストールして、一度タイリングした全ての「X（旧Twitter）」タブをリロードすると、反映されてスクロールバーが細くなります。
注意点ですが、本拡張機能は「X（旧Twitter）」上だけでなく、全てのウェブサイト上に反映されます。僕は、全てのサイトで細いスクロールバーにしたいので、本拡張機能を利用しています。
より詳しくは、別で記事を書いているので参考にしてみてください。
サイドバーが不要な場合、消してみよう作戦
こちらで紹介したCSSを適用するChrome拡張機能を利用することで、左側サイドバーを、特定の横幅以下の時に消すことができます。先ほど紹介した「スクロールバーを消す」方法と同じ手順で、「Stylebot」のスタイルシートを開きます。
以下のコードを書き込みます。スクロールバーを消すCSSを書き込んでいる場合は、下に追加する形で書き込みます。
/*横幅が〇px以下の時、サイドバー非表示*/
@media screen and (max-width: 370px) {
header {
display: none !important;
}
}
タイリングしている全ての「X（旧Twitter）」タブをリロードすると、左側サイドバーが消えると思います。
もし消えない場合、それはタイリングしているタブの数が、2個とか3個とかだと思います。この場合、上記CSSの「max-width: 370px」の数字部分を改造します。
上記CSSを説明すると、タブの横幅（media screen）が「370px」以下だった場合、「X（旧Twitter）」の左側サイドバー（header）を「display: none」で削除するという感じです。
「370px」という数字に、意味はありません。僕のモニター環境下で、5個の「X（旧Twitter）」タブをタイリングした時、たまたま左側サイドバーが表示される場合と、されない場合の境界線に近い数字が、「370px」でした。これを「360px」とかにしてしまうと、サイドバーが表示されました。
何が言いたいかというと、皆さんのPC環境下で、適切な数字は異なると思うので、各自調整してみてください～ということです。人によっては、400pxで消えるかもしれないし、500pxかもしれません。
なぜ僕が、特定の横幅以下の時に動作させようとこだわっているかというと、疑似「TweetDeck」ではなく、普通に「X（旧Twitter）」を開いた時は、CSSを適用してほしくないためです。以下のように、普通に左側サイドバーを消すCSSにした場合、通常サイズで開いた「X（旧Twitter）」上でも消えてしまいます。
/*サイドバー非表示*/
header {
display: none !important;
}タイリングしていない一つの独立タブで開いた場合は、利便性・アクセス性を重視して、左側サイドバーを表示させたいです。タイリングした時、一つずつのタブの横幅が狭くなる仕様を狙って、あえて特定のサイズ以下の時に、左側サイドバーを消すようにしています。
普通、タイリングしていない状態で開いた場合、少なくとも横幅（width）は、1000pxくらいあると思います。よって、「370px」とかのギリギリを狙わなくても、「700px」とかにすれば、タイリングした時だけ、CSSを動作させるようにできるんですが、それだと一番左のタブだけ、あえてサイドバーを表示させる…といった応用技が使えなくなります。
CSSが発動するギリギリを狙うことで、いざという時に素早く左側サイドバーを出現させられるというメリットがあります。GIF画像を貼っておきます。
タイリングしたタブ同士は、境界線をマウスで引っ張ることで、比率を変えられます。この特性を生かして、サイドバーを表示させたい時は、書き込んだCSSの値以上に横幅を広げます。CSSが発動しない横幅になった瞬間、サイドバーが出現します。
上部の検索ボックスやリストタブの高さを縮めよう作戦
上部の検索ボックスやリストタブが高さを占有しすぎていると思った場合、以下の記事が役に立つかもしれません。
タイムラインを自動更新する方法
Vivaldi標準の自動リロード機能を使う方法
「Vivaldi」ブラウザは、標準でタブの自動リロード機能を搭載しています。特に拡張機能を導入しなくても、ささっとできます。
自動リロード設定することで、わざわざページを一番上までスクロールしなくても、最新のタイムラインに更新されるというメリットがあるようです。
自動リロードしたい「X（旧Twitter）」のタブを選択します。一つでも、CtrlやShiftを使った複数選択でも、OKです。右クリックして、「自動リロード」→好きな更新間隔を選択します。
チェックを入れたら、タブの下に、左へ減っていくプログレスバーが表示されます。このバーが一番左までいった時、自動リロードされます。
ただこの方法は、タイリングしたタブ全てで毎回個別リロードするため、すぐにAPI制限になる…という声をちらほら聞きます。僕は、あくまで本記事執筆のために試しているだけで、普段から使っているわけではありません。そのため、実際どのくらい使ったら、制限をくらうのか不明です。
恐らく、リロードの回数によって制限を食らうのであれば、「Vivaldi」の自動リロード機能に関わらず、拡張機能系でも同様に発生すると思います。
他にも、こちら側で、瞬間的に一時オフといった操作ができないので、新しくツイート文章書いている途中で自動リロードされてしまい、書いていた内容が～～。という問題もあるようです。
自動リロードを無効化するには、同様にタブを右クリックして、自動リロード→「無効にする」を押します。選択タブ以外の全タブで無効化したい場合は、「全て無効にする」を押します。
「TwitterTimelineLoader」拡張機能を利用する方法
「TwitterTimelineLoader」拡張機能を利用することで、タイムライン上部にスクロールしてある場合、一定間隔ごとに「〇件のポストを表示」を押して、タイムラインを更新してくれます。
「Vivaldi」標準の自動リロードは、ページ全体が更新されるので、ラグがありますが、本拡張機能は、ページ自体はリロードせず、「〇件のポストを表示」をクリックして、「X（旧Twitter）」内で更新するだけなので、少しは動作が安定しているかもしれません。詳しくは、下記記事を参考にしてみてください。
よりヘビーにカスタマイズしたい方へ（他サイト様の記事紹介）
以下のサイト様が、非常に詳しく書かれています。カスタムCSSや、Tampermonkeyを使ったJavaScript（スクリプト）など、かなりヘビーに使いたい方向けの内容となっています。
http://coltpythonkingcobra.g1.xrea.com/pseudoTweetdeck/知っておくと便利な小技
スタック内のタブはCtrl+ダブクリで全選択
CSSなどのカスタマイズをしている場合、タイリングしている「X（旧Twitter）」タブ全てを、一気にリロードしたい時があるかと思います。その場合、タブスタックでタブを1つにまとめていると、素早く実行できます。
タブスタックした「X（旧Twitter）」タブのどれでもいいので開きます。開いたタブ上で、Ctrlキーを押しながら、マウスの左でダブルクリック
スタック内のタブが全選択されます。Shiftキーを使って、最初と最後のタブ選択～といった作業をしなくても、ささっと選択できます。選択できたら、そのままタブ上で右クリック→「〇個のタブを再読み込み」を押すことで、同時にリロードできます。
慣れている方は、クイックコマンド（F2）→「スタック」と入力→「タブスタックを再度読み込む」を実行してもOKです。こっちの場合、タブをわざわざ選択しなくても、勝手にスタック内のタブ全てを再読み込みしてくれます。
ツールバー上にボタンとして配置することも可能です。「Vivaldi」は、ほんと多機能です。
タブの並び替えは、カラム列の並び替え
タブを並び替えることで、タイリングしたページを入れ替えられます。GIF画像を貼っておきます。タブだけ入れ替わるのではなく、一緒に中身の部分も変わっています。
新規プロファイルとかスタンドアローンで分ける
「X（旧Twitter）」ガチ勢の方は、いっそのこと新規プロファイルやスタンドアローン（ポータブル版）を活用して、「X（旧Twitter）」専用の環境を用意するといいかもしれません。
理由は、「普段使いには必要なんだけど、疑似TweetDeck（Twitter）を見る時には不要！」というブラウザの要素（UI）を、個々に調整できないためです。同一プロファイル内や別ウィンドウだと、タブとかパネルのUIが連動します。「X（旧Twitter）」を見ている時だけ、タブバーやブックマークバー、パネルを消す…ということはできません。
タブバーやブックマークバーなどの表示・非表示を、一気に実行できるコマンドチェイン機能を使って、ささっと切り替えることも可能ですが、融通が中々利かないと思います。
完全「X（旧Twitter）」用の新規プロファイルを作成するのもアリかもしれません。プロファイルの作成方法などは、インターネットに方法があるので、調べてみるといいかなと思います。
別のブラウザとして用意することで、タブバー、ブックマークバー、パネル、ステータスバー、はたまたアドレスバーなどの表示を消しても、メインのプロファイルには影響しません。
プロファイルのショートカットを作成する方法
以下の記事を参考にしてみてください。Vivaldiの設定→アドレスバー→「プロファイルを管理」からアクセスできます。
プロファイルのショートカットを作成することで、タスクバーなどにピン留めできるようになります。すぐにTwitterをタイリングした疑似「TweetDeck」を起動できます。
感想
以上、高性能・カスタマイズ性に優れたChromiumベースのウェブブラウザ「Vivaldi（ヴィヴァルディ）」の機能を利用して、2023年8月に無課金者が締め出された「TweetDeck」の画面を、通常の「Twitter（X）」で再現する方法でした。
今後、「Twitter（X）」はどうなるのでしょうかね～。