当サイトは、アフィリエイト・アドセンス広告を掲載しています。広告があるサイトなんだと知っていただければ幸いです。

消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています。もし問題のある表現がありましたら、問い合わせよりご連絡いただければ幸いです。

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

Vivaldiブラウザを使って、TweetDeck風画面を構築してみよう!

2023年8月18日Vivaldi

「Vivaldi」のアイコン

この記事では、高性能・カスタマイズ性に優れたChromiumベースのウェブブラウザ「Vivaldi(ヴィヴァルディ)」の機能を利用して、2023年8月に無課金者が利用できなくなった「TweetDeck」の画面を、通常のTwitter(X)で再現する方法について書きます。

Vivaldiブラウザで疑似TweetDeckを作成した画像

「Vivaldi」ブラウザのタブタイリング機能、タブスタック機能を利用することで、TweetDeck風の画面を再現できます。アドレスバー、ブックマークバー、タブバーなどの表示・非表示も切り替えられます。

CSSを適用できるChrome拡張機能などを利用することで、スクロールバーを細くしたり、一定の横幅サイズ以下で、サイドバーを非表示にしたり、より近づけます。

ただし、あくまで"風"なので、本物のTweetDeckと比べると、機能性や操作性で劣ると思います。全然本家に勝てなくても、僕を責めないでください。

2023年8月から、Google検索などから「TweetDeckhttps://tweetdeck.twitter.com/)」にアクセスしても、「Twitter Blue」の購入ページにリダイレクト(移動)するようになりました。

2023年8月、TweetDeckにアクセスしたけど、「Twitter Blue」の購入ページにリダイレクトされている画像

僕は、TweetDeckに課金したくない!というほどアンチでもないですが、逆に課金するほどのヘビーユーザーでもないので、このまま無料利用しようと思います。メインで使っているVivaldiブラウザだと、TweetDeckに近い画面を、通常のTwitter(X)で再現できそうだなと思ったので、実験の意味を込めて記事にします。

2023年8月18日15時時点では、ぎり裏技(拡張機能や開発者ツールでごにょごにょ)で、TweetDeckを利用できるみたいですが、とりあえず本記事では、面白半分の意味も込めて、Vivaldiで試してみます。裏技の方法だと、いつ使えなくなるか分かりません。

本記事は、既に「Vivaldi」ブラウザを利用している前提で書きます。インストールされていないという方は、以下の記事が参考になるかもしれません。標準搭載のマウスジェスチャー、タイリング、スタック、ワークスペースなど、多機能が売りのブラウザです。

【ポイント】拡張機能の紹介

Twitterのリプライに蔓延る「bnc.lt」などのリンクを貼ったスパムツイートを一掃できる拡張機能「Clean-Spam-Link-Tweet」を開発されている「kawa-nobu」さんが、新しく無課金ユーザーでもTweetDeckにアクセスできるようにする拡張機能「Come-back-deck」を開発されました。

もしどうしてもVivaldiの疑似TweetDeckが耐えられない!という場合は、本拡張機能を使ってみるといいかもしれません。ただし、公式でまだ使える裏技を応用している技術なので、Twitter側が対策するとできなくなると思います。

VivaldiでTweetDeck風画面を構築する手順

見たい分だけタブを複製する

Twitter(X)」にログインします。

VivaldiブラウザでTwitter(X)にログインする手順画像

TweetDeck風にして見たい列数分だけ、タブを複製します。Twitterのタブを右クリック→「タブを複製」をクリックすることで複製できます。

Vivaldiブラウザのタイリング・スタック機能を使って、疑似TweetDeckを作成する手順画像1
【ポイント】最大5個くらいまでかなぁ…。

TweetDeckの場合は、最低限の横幅が維持されていて、カラム列が画面の横幅を超えた場合、水平スクロールバーが表示されて、左右に移動できるようになっています。しかし、Vivaldiのタイリング機能ではそういったものがありません。

よって、タブを沢山開いている状態でタブタイリング(左右に並べて表示)した時に、一つずつの横幅が狭くなり、見にくくなります。僕が試した感じ、10個は多いです。最大でも5個くらいがいいのかなぁと思います。

Vivaldiブラウザで、10個のTwitterタブをタイリングした疑似TweetDeck画像

1つのタブタイリングに対しての話なので、5個以上見たい列がある!という場合、2個目のタブタイリングを作成すればいいかなと思います。

それぞれのタブを見たいページに移動する

それぞれ複製したタブを、見たい情報ページに移動させます。スタックとかタイリングした後でもいいんですが、若干タイリング後の横幅が狭い時は、操作しにくいと思うので、今のうちにやっておくといいかなと思います。

例えば、タブAはホーム、タブBは何かしらの検索結果、タブCは通知ページ…などなどです。

Vivaldiブラウザのタイリング・スタック機能を使って、疑似TweetDeckを作成する手順画像2

タブタイリングで左右に並べて表示する

タブを複数選択します。タイリングしたいTwitterの最初のタブをクリック→Shiftキーを押しながら、最後のタブを選択すると、間にあるタブ全てが、自動的に選択されます。

タイリングしたいタブを複数選択できたら、クイックコマンドを起動します。デフォルトのショートカットキーは、F2だったと思います。クイックコマンド内の検索ボックスに「左右」と入力します。「左右に並べて表示」というコマンドが表示されると思うので、クリックして実行します。

Vivaldiブラウザのタイリング・スタック機能を使って、疑似TweetDeckを作成する手順画像3

タイリング機能は、クイックコマンドからじゃなくても、色々アクセス方法があります。ステータスバー経由、ショートカットキー、マウスジェスチャーなど、自分の好きな方法で「左右に並べて表示」してみてください。

タイリングできたら、その時点で、ある程度「TweetDeck」っぽい画面が構築できます。ただし、この時点ではスクロールバーが太く、どのカラムにもサイドバーがあるせいで、画面が占有されている…など、細々した問題点があります。

Vivaldiブラウザのタイリング・スタック機能を使って、疑似TweetDeckを作成する手順画像4

「これで十分」という場合は、作業を終了してOKです。1つのタブに見えるようで、実際は独立したタブなので、それぞれ個別にスクロールできます。

Vivaldiの設定→一般→「起動時に開くページ」を「最後のセッション」にしている場合は、次回起動時もタイリング状態を維持してくれます。毎回作業する必要はありません。

Vivaldiブラウザの一般設定(起動時に開くページ)の画像

やらなくてもいいけど、スタックでタブをまとめる

タブスタックとは、タブの中にタブを入れて、まとめられる機能です。この作業はやらなくてもいいんですけど、やっておいたほうが、タブをいっぱい開いた時に管理しやすく、見た目もすっきりします。

5個のTwitterを開いているとします。この場合は、4個のタブを複数選択します。残り1個の余っているタブに向かって、複数選択したタブをドラッグ&ドロップします。GIF画像を貼っておきます。

Vivaldiブラウザの水平タブバーで、スタックする手順GIF画像

水平タブバーを使っている場合のコツは、一旦タブを、バーから切り離すかのように、上(あるいは下)にもっていってから、そこから1個のタブにドラッグ&ドロップする点です。水平移動でドラッグ&ドロップしても、タブの並び替え動作になるので注意です。

スタックすると、1個のタブの中に、ドラッグ&ドロップしたタブが収納されます。他のタブを開いた時も、見た目は1個のタブなので、見やすくなります。

Vivaldiブラウザで、Twitter(疑似TweetDeck)をタブスタックした画像

スクロールバーを細くする作戦

スクロールバーは、拡張機能を利用することで細くできます。「細くなくてもいいよ!」という場合は、何もしなくてOKです。

「Modern scrollbar」拡張機能を使う

Modern scrollbar」は、全てのサイト上のスクロールバーを、細く角丸な感じにするChrome拡張機能です。

「Modern scrollbar」Chrome拡張機能をインストールする手順画像

インストールして、一度タイリングした全てのTwitterタブをリロードすると、反映されてスクロールバーが細くなります。

「Modern scrollbar」をインストールしたVivaldiの疑似TweetDeck画像

注意点ですが、本拡張機能はTwitter上だけでなく、全てのウェブサイト上に反映されます。僕は、全てのサイトで細いスクロールバーにしたいので、本拡張機能を利用しています。

「Modern scrollbar」をインストールして、Yahoo!にアクセスした画像

より詳しくは、別で記事を書いているので参考にしてみてください。

CSSを適用できる「Stylebot」拡張機能などを使って、削除する

「そもそもTwitter上では、スクロールバーが不要!」という場合は、ウェブサイト上にCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用することで、Twitter上だけスクロールバーを消せます。

「Stylebot」は、別記事で書いているので、初めての場合は、一度目を通しておくといいかなと思います。

CSSを適用できるChrome拡張機能は、「Stylebot」だけではなく、「Stylus」など色々あるので、自分が好きな拡張機能でOKです。

スクロールバーだけでなく、CSSでできる範囲のデザイン変更が可能です。当サイトでも、いくつかカスタマイズ記事を公開しています。

「Stylebot」でスクロールバーを消したい場合、タイリングしたTwitterページを開きます。インストールした「Stylebot」アイコンをクリック→「Stylebotを開く」をクリックします。

Vivaldiのタイリングで作成した疑似TweetDeckで「Stylebot」を使って、スクロールバーを消す手順画像1

初めて開く場合は、「ベーシック」タブになっていると思います。下部にある「コード」をクリックしてスタイルシート画面に切り替えます。

Vivaldiのタイリングで作成した疑似TweetDeckで「Stylebot」を使って、スクロールバーを消す手順画像2

白紙のスタイルシートが表示されます。ここに以下のコードを書き込みます。コピペでOKです。スクロールバー(::-webkit-scrollbar)を「display: none」で削除するという意味です。

/*スクロールバーを消す*/
::-webkit-scrollbar {
    display: none !important;
}
Vivaldiのタイリングで作成した疑似TweetDeckで「Stylebot」を使って、スクロールバーを消す手順画像3

書き込めたら、右上の「×」で終了します。最初はスタイルシートを書き込んだタブのTwitterだけ、反映されると思います。一度ブラウザを再起動するか、タイリングしているTwitterタブ全てをリロードすると、全てに反映されます。

スクロールバーが消えて、多少横幅を有効活用できます。

Vivaldiのタイリングで作成した疑似TweetDeckで「Stylebot」を使って、スクロールバーを消す手順画像4

サイドバーが不要な場合、消してみよう作戦

先ほど紹介したCSSを適用するChrome拡張機能を利用することで、左側サイドバーを、特定の横幅以下の時に消すことができます。先ほど紹介した「スクロールバーを消す」方法と同じ手順で、「Stylebot」のスタイルシートを開きます。

以下のコードを書き込みます。スクロールバーを消すCSSを書き込んでいる場合は、下に追加する形で書き込みます。

/*横幅が〇px以下の時、サイドバー非表示*/
@media screen and (max-width: 370px) {
    header {
        display: none !important;
    }
}
「横幅が〇px以下の時、サイドバー非表示」コードを書き込んだStylebot画像

タイリングしている全てのTwitterタブをリロードすると、左側サイドバーが消えると思います。

Vivaldiのタイリングで作成した疑似TweetDeckで、左側サイドバーを消した画像

もし消えない場合、それはタイリングしているタブの数が、2個とか3個とかだと思います。この場合、上記CSSの「max-width: 370px」の数字部分を改造します。

上記CSSを説明すると、タブの横幅(media screen)が「370px」以下だった場合、Twitterの左側サイドバー(header)を「display: none」で削除するという感じです。

370px」という数字に、意味はありません。僕のモニター環境下で、5個のTwitterタブをタイリングした時、たまたま左側サイドバーが表示される場合と、されない場合のキリがいい数字が、「370px」でした。これを「360px」とかにしてしまうと、サイドバーが表示されました。

何が言いたいかというと、皆さんのPC環境下で、適切な数字は異なると思うので、各自調整してみてください~ということです。人によっては、400pxで消えるかもしれないし、500pxかもしれません。

なぜ僕が、特定の横幅以下の時に動作させようとこだわっているかというと、疑似TweetDeckではなく、普通にTwitterを開いた時は、CSSを適用してほしくないためです。以下のように、普通に左側サイドバーを消すCSSにした場合、通常サイズで開いたTwitter上でも消えてしまいます。

/*サイドバー非表示*/
header {
    display: none !important;
}

タイリングしていない一つの独立タブで開いた場合は、利便性・アクセス性を重視して、左側サイドバーを表示させたいです。タイリングした時、一つずつのタブの横幅が狭くなる仕様を狙って、あえて特定のサイズ以下の時に、左側サイドバーを消すようにしています。

Vivaldiのタイリングで作成した疑似TweetDeckに、サイドバーを消すCSSを適用する注意点画像
誤字ってる!すみません💦

普通、タイリングしていない状態で開いた場合、少なくとも横幅(width)は、1000pxくらいあると思います。よって、「370px」とかのギリギリを狙わなくても、「700px」とかにすれば、タイリングした時だけ、CSSを動作させるようにできるんですが、それだと一番左のタブだけ、あえてサイドバーを表示させる…といった応用技が使えなくなります。

CSSが発動するギリギリを狙うことで、いざという時に素早く左側サイドバーを出現させられるというメリットがあります。GIF画像を貼っておきます。

Vivaldiのタイリングで作成した疑似TweetDeckの横幅を変えているGIF画像

タイリングしたタブ同士は、境界線をマウスで引っ張ることで、比率を変えられます。この特性を生かして、サイドバーを表示させたい時は、書き込んだCSSの値以上に横幅を広げます。CSSが発動しない横幅になった瞬間、サイドバーが出現します。

Vivaldiのタイリングで作成した疑似TweetDeckの横幅を変えている画像

上部の検索ボックスやリストタブの高さを縮めよう作戦

詳しくは、下記記事を参考にしてみてください。

Vivaldiで構築した疑似TweetDeckの検索ボックスの高さをCSSで調整した画像

知っておくと便利な小技

スタック内のタブはCtrl+ダブクリで全選択

CSSなどのカスタマイズをしている場合、タイリングしているTwitterタブ全てを、一気にリロードしたい時があるかと思います。その場合、タブスタックでタブを1つにまとめていると、素早く実行できます。

タブスタックしたTwitterタブのどれでもいいので開きます。開いたタブ上で、Ctrlキーを押しながら、マウスの左でダブルクリック

Vivaldiのタブスタック内のタブを全選択する手順画像1

スタック内のタブが全選択されます。Shiftキーを使って、最初と最後のタブ選択~といった作業をしなくても、ささっと選択できます。選択できたら、そのままタブ上で右クリック→「〇個のタブを再読み込み」を押すことで、同時にリロードできます。

Vivaldiのタブスタック内のタブを全選択する手順画像2

慣れている方は、クイックコマンド(F2)→「スタック」と入力→「タブスタックを再度読み込む」を実行してもOKです。こっちの場合、タブをわざわざ選択しなくても、勝手にスタック内のタブ全てを再読み込みしてくれます。

Vivaldiのタブスタック内にある全タブをクイックコマンドから、再読み込みする手順画像

ツールバー上にボタンとして配置することも可能です。Vivaldiは、ほんと多機能です。

タブの並び替えは、カラム列の並び替え

タブを並び替えることで、タイリングしたページを入れ替えられます。GIF画像を貼っておきます。タブだけ入れ替わるのではなく、一緒に中身の部分も変わっています。

Vivaldiのタブスタック内のタブを並び替えているGIF画像

新規プロファイルとかスタンドアローンで分ける

Twitterガチ勢の方は、いっそのこと新規プロファイルやスタンドアローン(ポータブル版)を活用して、Twitter専用の環境を用意するといいかもしれません。

理由は、「普段使いには必要なんだけど、疑似TweetDeck(Twitter)を見る時には不要!」というブラウザの要素(UI)を、個々に調整できないためです。同一プロファイル内や別ウィンドウだと、タブとかパネルのUIが連動します。Twitterを見ている時だけ、タブバーやブックマークバー、パネルを消す…ということはできません。

Vivaldiのタイリングで作成した疑似TweetDeckで、タブバーが邪魔になっている画像

タブバーやブックマークバーなどの表示・非表示を、一気に実行できるコマンドチェイン機能を使って、ささっと切り替えることも可能ですが、融通が中々利かないと思います。

Vivaldiで、タブバーやパネル、アドレスバーの表示を切り替えるコマンドチェイン画像

完全Twitter用の新規プロファイルを作成するのもアリかもしれません。プロファイルの作成方法などは、インターネットに方法があるので、調べてみるといいかなと思います。

別のブラウザとして用意することで、タブバー、ブックマークバー、パネル、ステータスバー、はたまたアドレスバーなどの表示を消しても、メインのプロファイルには影響しません。

Vivaldiのタイリングで作成した疑似TweetDeckで、不要なブラウザの要素を消した画像

プロファイルのショートカットを作成する方法

以下の記事を参考にしてみてください。Vivaldiの設定→アドレスバー→「プロファイルを管理」からアクセスできます。

プロファイルのショートカットを作成することで、タスクバーなどにピン留めできるようになります。すぐにTwitterをタイリングした疑似TweetDeckを起動できます。

Vivaldiのタイリングで作成した疑似TweetDeck専用プロファイルのショートカットアイコンを作成した画像

感想

以上、高性能・カスタマイズ性に優れたChromiumベースのウェブブラウザ「Vivaldi(ヴィヴァルディ)」の機能を利用して、2023年8月に無課金者が締め出された「TweetDeck」の画面を、通常のTwitter(X)で再現する方法でした。

今後、Twitter(X)はどうなるのでしょうかね~。

2023年8月18日Vivaldi