TweetDeck廃止でVivaldiブラウザに移行した話

すでに1ヶ月前から予告されていたTweetDeck廃止だけれども、再起動を控えるなど最大限抵抗したけど本日再起動が必要となってしまい、結果的にTweetDeckにはどうやっても戻れなくなったらしい。

※一部で公開されているものなどを使えば、引き続きTweetDeckが使えるらしいが、アカウントを凍結されたりすると更に困るので、今回はできるだけブラウザでの閲覧でTweetDeckに近い環境を模索する。

※旧称Twitterは公式には「X」に名称変更されたが、面倒くさいので以下では旧称Twitter（tweet）のままとする。

そこでTweetDeck環境を、以前より噂を聞いていたVivaldiブラウザでの「タブタイリング」環境に移行したメモを残しておこうかと思う。

• 2023年8月25日：「コマンドチェインで複数タブを開く」を追記、「マウスホバーでアクティブタブを切り替える」を修正
• 2023年8月25日：「マウスホバーでアクティブタブを切り替える」を追記
• 2023年8月24日：「オートリロード設定の省力化」を追記
• 2023年8月23日：「TweetDeckに近づけるための運用・設定など」、「起動時にロードを繰り返してタブが真っ黒」を追記。CSS指定の対象URLがミスっていたため修正。
• 2023年8月22日：「毎回ログインを要求される」「CSSでの表示調整」を追記
• 2023年8月21日：初稿

目次

ダウンロードなど

基本的にVivaldiのページに行ってダウンロードを押せば64ビット版がダウンロードされるはず。ファイル名を一応確認しておく。※Windows版の場合

初回起動

Vivaldiの初回起動を行うと、最低限の設定を行うチュートリアル的なものが出る。

ここで注意なのは「トラッカー・広告ブロック」の設定で、これを一番右（トラッカーと広告をブロック）してしまうとTwitterのログインすらできなくなる。中央の「トラッカーをブロック」にとどめておく。

設定してしまった場合などは起動後に、Vivaldiのウィンドウ左下にあるギアアイコンから設定を起動し、中央やや下にある「プライバシーとセキュリティ」に移動して「トラッカー・広告ブロック」で設定し直す。

行った設定など

Vivaldiに移行する最大のメリットである「タブのタイリング」の設定などをしていく。

「タブのタイリング」とは、本来複数のタブに分かれているものを無理やり一枚のタブ上に短冊のように並べて表示する機能を呼ぶ。これによりタブ切り替え操作をすることなく関係するタブをひと目で閲覧可能となり、まさに今回のTweetDeck的に使う用途では抜群の相性を発揮する。※昔のiframeタグで複数ソースを表示するようなイメージ

後はピン留めなどした上で、タブごとにオートリロード（自動更新）設定をタブの重要度ごとに設定すれば良い。確かまだ1日のtweet取得件数上限は解除されていないはずなので、もし手動で良いタブ（比較的更新頻度が遅いList）などがあるのならオートリロード設定は最低限にしておいたほうが良いと思われる。

その他：

• 表示サイズ変更：Vivaldiウィンドウの右下に％表示があるので、これですべてのタブを90%表示くらいに落としてやる。「100%」のところをクリックすれば数値入力可能

タブのタイリング方法

「タブのタイリング」は、基本的にタイリングしたいページのタブをShift＋でクリックして選択していった後で、点線で選択されたタブ部分で右クリックしてコントロールメニューを開き、やや下辺りにある「x個のタブをタイリングする」で指定する。

今回私の場合はTwitterでは基本的に非公開Listで管理していた（TweetDeckでListを複数並べて表示していた）ため、そのリストを開いておいてタブタイリングすれば完了した。

※なお一度指定したタブタイリングにタブを追加したり削除したり、タブスタック/解除などをするとまた指定し直しになるようなので注意。

TweetDeckに近づけるための運用・設定など

できればTweetDeckでの使用感に近づけるために、指定のグループのブックマークをタブタイリングで縦並びに開きたいが、どうも1クリックでTweetDeckのような外見を実現する手段は（現時点で軽く調べた限りでは）なさそうに思える。→ 後述「コマンドチェインで一気に開いてタイリングする」を参照

ということで、現時点では「一度開いたものは開きっぱなし」という運用が楽だと思われる。幸い、Vivaldiは終了時に開いていたタブの記憶と再開も（デフォルトで）やってくれる。

一応オプション関係の設定などのメモ。

• タイリング対象のタブは「タブスタック」としておく（TweetDeck風に1枚のタブ扱いできる）
  • その上で該当タブスタックの（親）タブを「ピン留め」しておく　※下記設定のため
• Vivaldiオプションの「タブ」：
  • タブスタッキング：「アコーディオン型」にする
    ※アコーディオン型だと、他のタブを見ている間は折りたたまれ、対象タブを見ているときだけ元の幅に展開される。　あるいはコンパクト型でもいいが、リロード再設定の時がめんどくさい。コンパクト型だとタブスタック内の個別（子）タブ名称は非表示になる。タブを切り替えれば子タブのURLは表示される
  • タブスタックオプション：「新しいタブをタブスタック内で開く」をオフ
    ※スタック内で開いてしまうとタブタイリングが壊れるため、（_blank属性のAタグを）必ず新しい「タブスタック外の親タブ」に開くようにする
  • ピン留めしたタブ：「ピン留めしたタブを閉じない」をオン
    ※誤動作で既存のタイリングしたタブを閉じてしまう事故を防ぐ
• Vivaldiオプションの「ウェブページ」：
  • ウェブページの既定の拡大率「タブ単位でズーム率を維持する」をオフにする
    ※デフォルトはオンで、このままだと（ドメイン関係なく）タブ単位に記憶するだけであり、（サブ）ドメインごとには記憶しない。Chromeなどと同じサブドメインごとのズーム設定の保存をするにはオフにする。

その他の操作

• 画像を見る：そのツイートを別タブに開き確認する　※相当不便だがデフォルトだと狭くなった列の中でしか表示できないため致し方ない
• リプライ（返信のポスト）/リツイ（リポスト）/引用：そのツイートを別タブに開き作業する　※例えば引用などをしている最中に再描画が入ると、元ツイ情報や書いている途中の文章などが消えてしまうため致し方ない
• リプライを見る/いいね：これだけは単純に左クリックで現在のタブで閲覧できる
• そのツイートのリプライなどを確認する：そのツイートを別タブに開き確認する

要するになにかするときは、元ツイートを別タブに開くしかない状態になっている。なお元ツイートを開くには、そのツイートの”つぶやいた時間”をCtrl＋左クリックが良い（あるいは”つぶやいた時間”を右クリックして「新しいタブでリンクを開く」）。

通常の左クリックでも現在のタブに開くが、結局リロードなどの影響を受けるので操作の邪魔をされるケースが多い。

ここまでしてメリットはあるのかという話もあるが、私の場合は「複数リストの閲覧」がどうしても外せない要件であるため現時点では我慢するほか無い。

タイリングを「縦ならび」に変える

普通にタイリング指定すると、ブラウザの幅にもよるが3列～4列表示すると「田」のような縦横タイリングされてしまう。できればTweetDeckの様に縦列の並びで表示したいのでこれは困る。

この設定は、タイリングしているタブで画面右下あたりに並んでいるアイコンの1つに「ページのタイリング（ページを並べて表示する）」アイコンがあるのでそれをクリックし、「左右に並べて表示」すれば良い。

不要な表示部分のトリミング作業

左右のツイートボタンなどが気になるが、これは拡張管理「Stylus」でCSS設定をすれば消すことができる。

※当然他のCSS管理拡張機能でも良いが、ただし下記が動作するかは試していないので各自でご自由にどうぞ。

普通にChrome拡張機能を探す手順で、まず「Stylus」を探して有効化する。次にStylusアイコンから「スタイルを検索」すると「OLD NEW TWITTER」というユーザー公開のCSS設定が見つかる。とりあえずこれを有効化すると左右の余計な部分は消える。※本来は（TweetDeckに関係なく）ブラウザでのTwitterデフォルト画面をなんとかしようというCSSのため、TweetDeck風画面では色々抜けてるがかなりTweetDeck風にできるので楽ちん。

ついでに各タブ最上部のヘッダー部分なども消したいが、面倒くさいし、そのうち誰かがスタイルを作るだろうからとりあえず今は我慢する。　仕方ないので↓に書きました。

スクロールバーを消す

現在私の環境ではVivaldiは、ほぼほぼ疑似TweetDeckブラウザなのでスクロールバーは要らない。

これはブラウザのオプション設定「vivaldi://flags（chrome://flags/）」で消すことができる。※拡張機能でも消せるがここではブラウザ本体のオプションで対応する

まず「vivaldi://flags」を開き、検索窓に「scroll」などと入れると一番上に「Overlay Scrollbars」というのが表示されるのでこれを「Enabled」に変えて指示通り再起動すれば、画面のスクロールバーが消えてスッキリする。

※要するにスクロール操作中など必要なときにだけスクロールバーが表示される仕様になる。

ヘッダー画像を地味なものに変える

※次の「CSSでの表示調整」を実行するのであればこの操作は不要です。

Listのヘッダーがデフォルトのままの場合、赤や緑の派手な画像が表示されてやや目障りに感じる。

そこで、適当に「twitterheader black」などで検索した”地味で目障りではない画像”を落としてきて（もちろん各自の好きな画像でも良い）、TwitterでListを表示し、ヘッダー部分にあるカメラアイコンからヘッダー画像を差し替えてやると変更できる。

CSSでの表示調整

CSSでできるだけ消していく。拡張管理「Stylus」などで指定します。

/* リスト情報：編集ボタン */
.r-1x0uki6{
display:none;
}

/* リスト上部の空白削除 */
div[data-testid="cellInnerDiv"]:first-child {
display:none!important;
}

/* 個別ツイートのパディング*/
.r-i023vh{
padding-left:0!important;
padding-right:0!important;
}
/* ツイート本文のパディング */
article[aria-labelledby]{
padding-right:0!important;
}

毎回ログインを要求される

私は普段Windows10のスリープ機能を使用しており、TweetDeckのタブも開いたままで運用していました。それと同様にVivaldiで使おうとすると、スリープ解除（復帰）時にセッションが切れているためか再ログインを要求される事になってしまいました。これでログインを繰り返していると、「不審なログインが阻止されました」というメッセージ表示をすることもあります。

これはどうもクッキー設定を弄ったためのようで、「設定」→「プライバシーとセキュリティ」→下の方にある「COOKIE」と進み、「受け入れるCookie」を「すべて」にしておくと要求されなくなる。

※これを「セッションのみ」にしてしまうと毎回要求されるようになるようだ。ホワイトリストでクッキーを保護する拡張機能を入れようかと思ったが、現時点ではTweetDeck専用なのでとりあえずこの設定で使おうと思う。なおサードパーティCookieは「全てブロック」でも問題ない。

起動時にロードを繰り返してタブが真っ黒

上記スリープ解除（復帰）時に、Vivaldiの画面がロードを繰り返してタブが真っ黒になるという事象も発生する。特にオートリロード間隔を1分や2分に設定したタブで起こる。

これはどうもオートリロード設定に原因があるようで、復帰時に一度オートリロードを全タブで無効化し、さらにオートリロードを再設定することで再び閲覧できるようになるということがわかった。どうもVivaldiのスリープ突入時のオートリロードの処理が若干おかしいのではないかと思われる。※オートリロードを設定していないタブでは通常通りTweetが表示されている

復帰時に画面が真っ黒でも、慌てずにオートリロード設定を一度無効化してみると良いかも知れない。

コマンドチェインで一気に開いてタイリングする

色々いじっていると、Vivaldiブラウザの「コマンドチェイン」という仕組みを使うと、一気に開いてタイリングまでできることがわかりました。コマンドチェインとは、Vivaldiのコマンドを並べて自動実行できるマクロのようなものです。

「設定」－「クイックコマンド」と開きコマンドチェインの箇所を見ると、そのものズバリの「リンクを開いてタイリングする」というコマンドチェインのサンプルが登録されています。一度これを試してみましょう。

まず新規タブが開いた状態で、「F2」を押してクイックコマンドメニューを起動し、一番下近くまで移動して「リンクを開いてタイリングする」を選択します。するとVivaldi関連のページが3つ開いて、すぐにタブ選択を行ってスタック化、左右に並べてタイリングまでしてくれます。便利ですね。

これをそのまま使えば、TweetDeckに非常に近いものが1コマンドで実現できることがわかるかと思います。私の場合、自動リロードも設定したかったため下記のような設定をしてみました。

これで、対象のURLを全部開き、さらに自動リロードの設定も行った上でスタック化、左右並べてタイリングまでを一気に行うようになりました。自動リロードは要らないやという場合はほぼサンプルのURL書き換えだけで大丈夫だと思います。

「チェインの名前」は呼び出し時に使います。今回は名前を英語でつけたため、起動手順は「F2」－「twe…」などと打ち込んで絞り込みした上で実行すると、後は勝手にTweetDeckと同様の見た目でタブを開いてくれるようになります。

わかってしまえばこんなにも簡単な手順でTweetDeck化することが出来ました。

オートリロード設定の省力化

オートリロード（自動リロード）設定をスリープ解除（復帰）時に繰り返す必要があり、いちいちタブのコンテキストメニューから設定するのはやや煩瑣です。これを省力化する手順を考えました。

マウスホバーでアクティブタブを切り替える（VivaldiでのMod導入手順）

元々Centブラウザを使っていたため、Vivaldiブラウザがマウスホバーによるアクティブタブ切り替えに対応していないことが苦痛でしたが、どうもModという仕組みを使うことで実現できることがわかりました。

調べた所、どうもその追加手順などの日本語リソースがあまり無いようでしたので、改めて手順をまとめました。

今回の場合は、「activate-tab-on-hover.js」というファイルを追加する作業となります。

1. 対象のファイルをダウンロードする
   ※今回の場合は「activate-tab-on-hover.js」をvivaldi_modding/activate-tab-on-hover.js at master · luetage/vivaldi_modding · GitHubから手動でダウンロードしてくる
2. ファイルを所定の位置に格納する
   ※Vivaldiのフォルダ構造はなぜかバージョン含むようになっているため、各自でバラバラとなるようです。最近Vivaldiに移行した方の場合は、「%USERPROFILE%\AppData\Local\Vivaldi\Application\6.1.3035.302\resources\vivaldi」になるようです。「6.1.3035.302」の部分が導入バージョンにより変化すると思われます。
   ※2023年8月30日にバージョンアップがあり、フォルダが「6.2.3105.43」に変更され、さらにModファイル自体が消されていました。どうやらVivaldiのバージョンアップではそういう挙動をするようです。
3. 念のために同じフォルダのbrowser.htmlをコピーしてバックアップを取っておく
   ※結局これが管理するファイルなので、いじって何が問題がでた場合は、すぐさまこれを戻せば問題自体は消える。
4. browser.htmlをエディタで開き、 <body>の下に「<script src=”activate-tab-on-hover.js”></script>」の1行を追加する
   ※Windows標準の「メモ帳」アプリなどではファイル管理の都合上、支障が出る可能性があります。あくまでテキストエディタを使うようにしましょう。
5. ファイルを閉じてVivaldiブラウザを再起動する

Vivaldiブラウザのタブ部分にマウスカーソルをホバーさせると、それだけでアクティブタブが切り替わっていれば完了です。思うように動作しない場合は、フォルダの位置や記述内容を確認してみてください。

しかし、これでTweetDeck化がもう一弾進むかと思ったのですが、どうもブラウザのタブ部分だけが判定対象となっているため、これだけでは（タブではない）コンテンツ表示部分にホバーするだけではアクティブタブの切り替えは不可能でした。これはこれで便利なのですが、今後さらに調査したいと思います。

参考情報

複数アカウントの切り替え

ができるというChrome拡張機能もある。売り文句は「ワンクリックでTwitterアカウントを切り替える」というもの。試してないので使い勝手はわからない。

複数のTwitterアカウントスイッチャー – Chrome ウェブストア