擬似Deck構築メモ置き場

【Windows用】Vivaldiのタブタイリングを使ってTwitterのWEBページを並べTweetDeck風にする Home,List,User,Searchページの自動更新・既読管理・ページ別NGワードのスクリプトやレイアウトのカスタマイズなどを紹介しています
Vivaldiのタブタイリング機能や各種拡張機能を使って擬似的なTweetDeck環境を構築したメモ

Access [2023/08/26〜] : アクセスカウンター

2024/05/17 Twitter.com → X.com 移行によりTwitter用拡張機能・アドオン類がドメイン変更によってlocalStorageに保存されている設定情報などが読めなくなった場合、 https://x.com/x/migrate から開くことで旧ドメイン環境で動くようです。全てに対応可能かは解りませんしいつまで有効か不明ですが、旧ドメインで開けるうちに設定をエクスポートしたりスクリーンショットを保存しておきましょう。
※キーワードミュート[NGワード・NGアカウント・NGワード+アカウント]機能に対応しました。キーワードはテキスト比較と正規表現マッチングが可能です。共通定義とURL別定義ができます。
※特定アカウントのRTミュート機能に対応しました。定義追加時キーワードに「RT@」を指定します。


スクリプトソースは自由に改変して使用して結構ですが、著作権は放棄していません。再配布や転載の際には出典を明記して下さい。
リンク先のテキストファイルは古い状態が表示される事があるので念のためCTRL+F5でキャッシュ破棄のリロードをして下さい。
いまのところ比較的短いスパンでどんどん更新しているので導入した方はこまめにこの配布ページで更新情報をチェックして手動アップデートして下さい。
カスタムCSSユーザースクリプトは連携している機能が多いため併用が必須です。またTUIC拡張機能の導入も必須となっています。予めご了承下さい。
プレーンテキストをブラウザで表示しようとするとデフォルトがShift-JISなのでSJISになってるけどスクリプト類の基本はUTF8。
ダウンロードしたテキストファイルをそのまま適用するような使い方ではないので関係ないと思うけど念のため。


更新履歴 history.txt  [Shift-Jis]
Ver1.0〜Ver1.7 までの古い履歴 history_old.txt


擬似Deck俺メモ pseudoTweetdeck.txt  [Shift-Jis]
更新履歴については上の更新履歴テキストに記載
LastUpdate [ 2024/01/01 16:00 (Ver1.8) ]


動作仕様・各部ヘルプ pseudoHelp.txt  [Shift-Jis]
更新履歴については上の更新履歴テキストに記載
LastUpdate [ 2024/04/20 02:00 (Ver1.8) ]


カスタムCSS CustomCSS.txt  [Shift-Jis]
更新履歴については上の更新履歴テキストに記載
LastUpdate [ 2024/05/18 01:00 (Ver1.8) ]


ユーザースクリプト UserScript.txt  [Shift-Jis]
更新履歴については上の更新履歴テキストに記載
LastUpdate [ 2024/06/07 17:00 (Ver1.8) ]


コマンドチェインの手動エクスポート CommandChain.txt  [Shift-Jis]
   LastUpdate [ 2024/01/20 22:00 ]


その他のツール類
擬似Deckには直接関係がないが作者が擬似Deck環境を構築しているPC類に組み込んでいる諸々の自作ツールをついでに公開しているものです
GoogleDriveにミラーを用意しましたのでそちらからもダウンロード可能です。※個別のリンクは各ツールの概要開閉ボタンの右にある[ミラー]からどうぞ。


  並べるタブ数が端数になった時用のブランクページ [ BlankPage.zip ]
   LastUpdate [ 2023/08/26 11:00 ] [ミラー]


  Vivaldiを順次アクティブにして更新の滞留を抑止する常駐ツール [ ActivePseudo.zip ]
   LastUpdate [ 2024/06/12 11:00 ] [ミラー]


  FirefoxとVivaldiのアイコンおよび表示exe名を差し替えるツール [ ChangeResource.zip ]
   LastUpdate [ 2024/03/23 18:00 ] [ミラー]


  任意のウィンドウの位置とサイズを定義値に戻す常駐ツール [ ResizeBrowser.zip ]
   LastUpdate [ 2024/03/23 12:30 ] [ミラー]


  任意のウィンドウを最小化や最大化するツール [ MinMaxWindow.zip ]
   LastUpdate [ 2024/03/23 12:30 ] [ミラー]


  任意のウィンドウを移動とサイズ変更するツール [ MoveResizeWindow.zip ]
   LastUpdate [ 2024/05/13 16:00 ] [ミラー]


  任意のウィンドウを終了または強制終了するツール [ CloseWindow.zip ]
   LastUpdate [ 2024/03/23 12:30 ] [ミラー]


  ウィンドウの最大化ボタンを無効にするする常駐ツール [ DisableMaxButton.zip ]
   LastUpdate [ 2024/04/30 21:00 ] [ミラー]


  リモートサーバで動作する独自のスクリーンセーバー [ ScreenSaver.zip ]
   LastUpdate [ 2024/03/31 09:00 ] [ミラー]


  Twitter設定にある「興味関心」のチェックを外すスクリプト [ DeleteInterests.txt ]
   LastUpdate [ 2024/06/10 14:00 ] [Shift-Jis]


・操作ボタン説明

 動作仕様のヘルプテキストは文字のみで説明しているので上部の情報表示部兼操作ボタンについて軽く紹介しておきます。機能・動作については前述のヘルプテキストをお読み下さい。ポップアップヘルプメッセージの画像をキャプチャしたものをそれぞれのボタンにリンクしてありますが、一部スクロールの状態やコンフィグ・システムコンフィグの設定によって内容が変化するものがありますし、通知やホームなど他の画面と機能が違うものもありますので、あくまでも一例ということで。

ヘルプボタン 左クリック=ヘルプダイアログの表示
右クリック=既読情報ダイアログの表示
コンフィグボタン左クリック=コンフィグ設定
右クリック=システムコンフィグ設定
短周期処理ボタン左クリック=短周期処理の単発実行
右クリック=短周期タイマ切り替え
更新切替ボタン 左クリック=自動更新OFF切り替え
右クリック=タイマ時間をリセットする
↓↑書込切替ボタン ※ホームのみ
左クリック=ツイート入力欄表示切り替え
右クリック=上部の新着件数表示切り替え
BTN1機能ボタン1 ※システムコンフィグにて機能を割り付け
BTN2機能ボタン2 ※システムコンフィグにて機能を割り付け
BTN3機能ボタン3 ※システムコンフィグにて機能を割り付け
BTN4機能ボタン4 ※システムコンフィグにて機能を割り付け
各アーティクルのタイムスタンプ横に増設されるチェックボックスの割り付け
左クリック=10件を既読マーク(件数はシステムコンフィグ設定による)マーク済みの場合はマークを解除
右クリック=既読マーク背景色の順次切替

 


・導入手順概要

 まず大前提ですが、WindowsPC環境のみ対象としています。作者環境はWindows10pro64bitなので他の環境ではテストできません。多分Windows11でも問題無く動くとは思いますが。 UNIX版やiOS版やAndroid版では一切動作確認していませんし何か不具合があっても対応は出来ません。 画面解像度1920x1080でUI/FONT表示倍率100%の設定にて各種座標やサイズの調整をしています。Vivaldiでのページ表示倍率は90%にしており、その場合Vivaldiに並べるタブは5枚で各タブの横幅は400ピクセル弱となります。 ヘルプダイアログの固定幅を390ピクセルで作っています。

 詳細は メモテキスト動作仕様のヘルプテキスト を熟読頂くことになりますが、おおまかな手順だけざっくり列挙していきます。
 基本的な構築方法はナポリタン寿司さんの記事 Vivaldiブラウザを使って、TweetDeck風画面を構築してみよう! を参照いただくほうが解りやすいと思います。

  • Vivaldi をセットアップします。複数アカウントで運用したり多数のウィンドウを開いて使いたい場合は スタンドアロンインストール を複数のフォルダにして使い分けるのを推奨。複数プロファイルで運用するよりも自由度が高いと思います。(各種ツールで任意のVivaldiウィンドウだけに対して操作をしたい場合など)
  • Stylebot , Tampermonkey , Twitter UI Customizer , Control Panel for Twitter , Tabs to Front V2 , (Open in Firefox) 拡張機能をそれぞれインストールします。
  • Vivaldiを起動しTwitterにログインし、ホームやリストなどのタブを開き、複数のタブを選択して左右に並べたタイリング(Ver6.4以降「縦にタイル」という表現になっています)を行います。
  • タブは左側に表示する設定とし、次回起動時に前回開いていたタブ類を復元する設定にしておきます。
  • Twitter UI Customizer, Control Panel for Twitter拡張機能の設定画面・オプション画面を開いて必要な項目を変更します。(後述)
  • このページからダウンロードできる カスタムCSSテキスト から先頭3行を除いた残り全てをコピーしてStylebotに登録します。2行目のURLのみStylebot登録時の上にある対象URLの項目にペーストします。末尾の**まで忘れずに。このページの下の方にカスタムCSS登録の様子を画面キャプチャしてあるので参考に。
  • このページからダウンロードできる ユーザースクリプトテキスト をTampermonkeyに登録します。このページの下の方にスクリプト登録の様子を画面キャプチャしてあるので参考に。
  • 全てのタブをリロード(もしくはVivaldiを再起動)します。
  • 必要に応じてコンフィグ・システムコンフィグの項目を変更して使いやすいようカスタマイズしていって下さい。

 


・作者環境の拡張機能設定

  VivaldiはChrome系のエンジンを使っていますので、Chrome用の拡張機能をインストールする事が出来ます。
 本カスタムCSSおよびスクリプトは拡張機能の「Twitter UI Customizer (TUIC)」を使用する前提に作っています。作者環境の設定を全部紹介しておきますので、まずは同じ設定にして使ってみて欲しいと思います。
 変えてはいけない項目・変えないといけない項目についてメモを書いておきます。まずは同じ設定で正常に動くことを確認してから好みの設定にカスタマイズしていって下さい。
 出来れば項目の変更は1つずつ行い、動作に影響していないのを確認したら次にというふうにしていくと非常に面倒ですが何かが原因で表示がおかしくなったり機能しないものが出てきても切り分けが出来ます。
 カスタムCSSに関しても好きな物だけ適用していけば良いのが理想ですがスクリプト動作に必須なものがいくつかあります。検索・ユーザー・通知などでページ内の上部にあるタブの一部をを非表示にする必要があるものは適用しないといけません。カスタムCSSのコメントに必須事項に関してはメモを追記していきます。

 


Twitter UI Customizer (TUIC)
 キャプチャ保存時のバージョン[Ver3.8.2]

カスタムCSSとスクリプト動作に影響のありそうな設定変更点についてのメモ:

  • (画像1枚目)フォントは1つ小さい方へ、色は自由、テーマはブラックを基本としているけど一応デフォルトのライトカラーでも動作→当スクリプトのシステムコンフィグでライトカラーにして下さい
  • (画像2枚目)TUICの色設定は変更なし、ツイートの表示設定では引用RT(Quote)を追加して、RT時にメニュー選択させないようにしてある
  • 幅微調整系のCSSは基本的にこのReply, RT, Quote, Fav, Blockの5つが出ているのを前提にしています
  • (画像3枚目)TUICではリンクカードにリンク先を表示する機能はOFFとし、Control Panel for Twitterで有効にし、それを前提の縮小系CSSを調整しています
  • Ver1.6〜 「リンクカードにリンク先を表示する」チェックして下さい。それを前提の縮小系CSSを調整しています
  • アイコンはXに色付けしたものを設定してアカウントを間違えないようにVivaldiのテーマ色と合わせて使い分けています
  • (画像4枚目)色々メニューから使わない物を消してますが幅を細くしたらCSSで非表示になっているので基本的には無関係かと思います。ホームと通知は無いとまずそうかな?
  • (画像5枚目)RT非表示は一括して表示しないのならここで設定、タブ毎に設定したい場合はここでは設定せず当スクリプトのコンフィグで非表示に

Chrome用拡張は更新があがってから公開されるまでそこそこ時間がかかりますので Githubから Twitter_UI_Customizer_Chromium.zip をダウンロードして任意のフォルダに展開し、手動で更新する方法もあります。ストア経由ではない拡張機能の導入方法は GoogleChromeでパッケージ化されていない拡張機能を読み込む方法 などを参考にしてください。※その場合ストア経由でインストールしたほうは無効にしておきます。

 


Control Panel for Twitter
 キャプチャ保存時のバージョン[Ver3.21.2]

カスタムCSSとスクリプト動作に影響のありそうな設定変更点についてのメモ:

  • (画像1枚目)常にタイムラインを「フォロー中」にするのは必須、「おすすめ」は非表示にするのも必須、「フォロー中」はスクリプトにより「HomeTL」文字列に置き換えられます
  • RT/Quoteの非表示を一括でしたいのならここでチェック、タブ毎に設定したい場合は本スクリプトのコンフィグにて
  • (画像2枚目)メディアカード全幅表示はチェック無しを前提にCSSを書いています
  • 外部リンクの下に見出しを復元にチェックしているのを前提にCSSの縮小処理や回り込みなどの処理をしています
  • (画像3枚目以降)メニューやツイート下アイコンなどは基本的にTUICで行っています
  • 23/10/26 ホームの見出しを非表示にする処理が Ver3.21.3で削除されました。代替処理としてカスタムCSSで非表示にするよう変更。
  • Ver1.6からこの拡張機能を入れなくても動作するようにカスタムCSSとユーザースクリプトを対応しました。 まずは無効にして動作を確認して下さい。Control Panel for Twitter固有の機能を使いたい場合は必要に応じて設定を変更して下さい。 「外部リンクの下に見出しを復元」のチェックは外し、Twitter UI Customizer にて「リンクカードにリンク先を表示する」をチェックして下さい。

 


Stylebot

カスタムCSSを動作させるための拡張機能。インストール後に何か変更する設定項目はありません。当サイトのカスタムCSSを登録して使います。
導入方法や使い方についてはナポリタン寿司さんの説明記事を参考にすると良いと思います。
【Stylebot】サイトにCSSを適用できる拡張機能の使い方

 


Tampermonkey

ユーザースクリプトを動作させるための拡張機能。インストール後に何か変更する設定項目はありません。当サイトのスクリプトを登録して使います。
導入方法や使い方についてはナポリタン寿司さんの説明記事を参考にすると良いと思います。
【Tampermonkey】ウェブサイトにJavaScriptを適用できる拡張機能

 


Tabs to Front V2

特に設定変更などは不要です。インストールするだけで機能します。画像サムネイルをクリックで別タブに大きく表示する機能を使う際に必要と思います。
新しいタブでリンク先を開く時に自動的にその新しいタブにフォーカスを移動してくれます。

 


Open in Firefox

 キャプチャ保存時のバージョン[Ver0.43]

Firefoxの任意のリビジョンのパスを指定しておくことでアカウント別にログインしているFirefoxを1つ選んでリンクを開けます。複数アカウント間での中継用などに。
最後に Save Options ボタンを押すのを忘れずに。設定項目は下記。
Enabled=ON, Combination=Shift, Open multiple links at once =ON, Show "Extract and Open Text Links in Firefox" in right-click context menu=ON, Show "Open Link in Firefox" in right-click context menu=ON, Open FAQs page on updates=ON, Path to the executableにFirefoxのフルパス(両端に "" は入れちゃダメ)

 


・[おまけ] Vivaldiの設定例(変更してない項目はキャプチャ省略)

設定変更点についてのメモ:

  • (一般)ホームページをTwitterの設定画面にしておくとそこから左メニューで各ページに遷移できるので構築時に便利です
  • (一般)最後のセッションを表示で構築したタブが再開、タブを開くときに遅延させるようにしておくと起動時に重くなりません
  • (外観)各メニュー項目を好きなように入れ替えます、タブバーで直接左右に並べてタイリング出来るようにしておくのを推奨
  • アドレスバーを非表示にしているのでAlt+Aで表示切り替えが出来るようにしてあります
  • Vivaldiはタブ毎に表示倍率を変更できますがTwitterの各ページは拡大率90%で表示しています
  • ほか色々デフォルトから変更している項目がありますが、それほど重要な項目は無いかな???

 


・各種参考用画面キャプチャ

画面例 1 (9/2Ver) 画面例 2 (9/2Ver) 画面例 3 (9/2Ver) 画面例 4 (9/3Ver)
画面例 5 (9/5Ver) 画面例 6 (9/6Ver) 画面例 7 (9/7Ver) 画面例 8 (9/7Ver)
画面例 9 (9/7Ver) 画面例10 (9/8Ver) 画面例11 (9/9Ver) 画面例12(9/16Ver)
画面例13(10/2Ver) 画面例14(10/4Ver) 画面例15(10/4Ver) 画面例16(10/4Ver)
画面例17(12/25Ver)
カスタムCSSの登録1 カスタムCSSの登録2 スクリプトの登録1 スクリプトの登録2
タスクビュー OpenWith 1 OpenWith 2 拡張機能
左上メニュー ページメニュー リンクニュー 1 リンクニュー 2
タブメニュー タブバーメニュー Vivaldi自身の解析1 Vivaldi自身の解析2
検証ツール ヘルプ・コンフィグ Vivaldi名物「鳥」 複数行の置換
コマンドチェイン チェイン該当部1 チェイン該当部2 チェイン該当部3
スタンドアローン