#MyTwitterAnniversary にクラッカーの絵文字を取り戻す

2024.04.29

Twitterでアカウント作成記念日になるとツイートできる「#MyTwitterAnniversary」。
今はTwitterがXとなり、このハッシュタグも「#MyXAnniversary」へと置き換わりました(「Xには登録していない!登録したのはTwitterだ!」と今でもこちらのハッシュタグに置き換えて使う人もいます。私は両方書くタイプです)。

「#MyTwitterAnniversary」時代からハッシュタグの後ろにTwitterオリジナルのクラッカーの絵文字「#MyTwitterAnniversary」のクラッカーの絵文字がついており、これはXになっても引き継がれましたが……
「#MyTwitterAnniversary」につかなくなってしまったのです! 今までたくさんのツイートがこのハッシュタグでなされたというのに。

前置きが長くなりましたが、今回はその絵文字を取り戻すユーザーCSSです。

[data-testid="tweetText"] a[href*="/hashtag/MyTwitterAnniversary"][role="link"]::after {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
background-image: url("https://abs.twimg.com/hashflags/MyXAnniversary/MyXAnniversary.png");
background-size: cover;
background-repeat: no-repeat;
margin-left: 2px;
vertical-align: -20%;
margin-right: 0.075em;
}

Twitterの青い鳥を取り戻せ

2023.07.27

7月24日、突如Twitterのロゴと名称が「X」に変更されましたが、長い間慣れ親しんだロゴを変えられても受け入れられません。
ということで拡張機能を使い、元のロゴに戻すことにしましょう。

注意事項

  • PC版のみです。といってもスマホアプリ版は記事執筆時点(7月27日)ではまだ青い鳥に「Twitter」のままです。
  • 拡張機能のインストールが2つ必要となります。

Twitter.com内の「X」を鳥に置き換える

①拡張機能「Stylus」をインストールする(ユーザーCSSが使えるものであればOK)
Chrome/Edge/Vivaldi版:https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
Firefox版:https://addons.mozilla.org/ja/firefox/addon/styl-us/

②「Return Twitter Bird」のインストール
「Return Twitter Bird」のインストール
Return Twitter Bird」にアクセスし、画面下の「Install」ボタンをクリックします。
これでウェブサイト上の「X」が青い鳥に置き換わります。

ファビコンを鳥に置き換える

ファビコンとはブラウザのタブやブックマークリストに表示されるアイコンのことです。
これも「X」になってしまっているので戻します。
①拡張機能「Redirector」のインストール
Chrome/Edge/Vivaldi版:https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd
Firefox版:https://addons.mozilla.org/ja/firefox/addon/redirector/

②新ファビコンから旧ファビコンへの転送設定
「Edit Redirectors」をクリックし、設定画面に入ってください。
「Edit Redirectors」
設定画面にある「Create new redirect」を押すと、新しいリダイレクトを設定する画面が表示されるので、以下のように入力してください。
リダイレクトの設定

  • Description: 名前です。「Twitter Favicon」などお好きなように入力してください。
  • Example URL: https://abs.twimg.com/favicons/twitter-pip.3.ico
  • Include pattern: https://abs.twimg.com/favicons/twitter*.3.ico
  • Redirect to: https://abs.twimg.com/favicons/twitter$1.2.ico

「Show advanced options...」
また、「Show advanced options...」を押して表示されるチェックボックスのすべてをチェックしてください。

これで完了です!TwitterにTwitterが帰ってきました。
ただ、「終わりの始まり」となりつつあるTwitterから、必死に飛び立とうとしている青い鳥に鳥かごを被せて逃げないようにしている……ように思ってしまうのは私だけでしょうか。もう少しだけここにいてね。

TweetDeckのスレッド表示を直す

2023.07.14

最近、TweetDeckのスレッド表示がうまくいかない。うまくいかないTweetDeckのスレッド表示

ということでお決まりのユーザーCSSである。スレッドのときだけclassがつくのでやりやすかった。

このコードをBetter TweetDeckのユーザーCSS欄やMarinDeckのカスタムCSSにコピーしてください。.js-component:empty + .tweet-detail-wrapper .js-tweet.tweet-detail.js-has-replies:not(.margin-l--46),
.js-component:empty + .tweet-detail-wrapper .js-tweet.tweet-detail.js-has-replies:not(.margin-l--46) + .detail-view-inline {
margin-left: 46px;
}
.js-component:empty + .tweet-detail-wrapper .js-tweet.tweet-detail.js-has-replies:not(.margin-l--46) div.margin-b--10 {
margin-left: -46px;
}
.js-component:empty + .tweet-detail-wrapper .js-tweet.tweet-detail.js-has-replies:not(.margin-l--46)::before {
content: "";
position: absolute;
width: 3px;
left: 27px;
border-radius: 3px/7px;
margin-top: 38px;
height: calc(100% - 44px);
background-color: #e1e8ed;
}
html.dark .js-component:empty + .tweet-detail-wrapper .js-tweet.tweet-detail.js-has-replies:not(.margin-l--46)::before {
background-color: #3d5466;
}

これにて修正完了。きちんスレッド表示がなされるようになった。スレッド表示が直った
実はある条件を満たすとうまくいかないのだが、それはまあ……見逃してほしい。

iOS版MarinDeckのスクロールバグを直す

2023.04.05

最近、Twitterのサードパーティークライアントが続々使用不可能となってから、たびたび代替として挙がるMarinDeck
粗削りな部分は多々ありますが、それでも本家より何倍も使いやすいと感じています。

そんなMarinDeckのiOS版には、ある致命的なバグがあります。
それは、「スクロール中にスクロール場所が飛ぶ」というものです。40件ほどさかのぼるとすぐ発生するので、少しでも多くさかのぼろうとすると、見られないツイートが出てしまいます。

しかし、これは厳密にはMarinDeckのバグではなく、Webkitのバグだと考えられています(その証拠に、大元のウェブ版TweetDeckでも発生します)。

解決策

では、解決策はないのでしょうか?幸いなことに、MarinDeckにはカスタムJSを読み込める機能がありますから、それを使いましょう。
今回は、このコードを使います。
この下に、コピー用のコードを設けたので、コピーしてMarinDeckのカスタムJS(設定にあります、CSSではありません)に貼り付けてください。

コピー用コード(元のコードはMITライセンスです)
(function() {
'use strict';
function f() {
var increaseChirpSizes = function (column) {

column.UPWARD_SCROLL_CHIRP_BLOCK_SIZE = 1000; // default: 40
column.INFINITE_SCROLL_CHIRP_BLOCK_SIZE = 40; // default: 20
column.TARGET_COLUMN_CHIRP_LIMIT = 1000; // default: 40
};

var createColumn = window.TD.controller.columnManager.createColumn;
window.TD.controller.columnManager.createColumn = function(e, t) {
var column = createColumn(e, t);
try {
increaseChirpSizes(column);
return column;
} catch (err) {
console.error(err, column);
return column;
}
};

var columns = window.TD.controller.columnManager._aColumnIndex;
for (var index in columns) {
increaseChirpSizes(columns[index]);
}
}

(function g() {
if (window.TD && window.TD.ready) {
f();
} else {
setTimeout(g, 100);
}
})();

})();

// TweetDeck__Triple the amount of loaded tweets
// Copyright (c) 2018 pejuta (https://openuserjs.org/users/pejuta)
// Released under the MIT license
// https://opensource.org/licenses/mit-license.php
// Customized by mmahhi (http://mmahhi.s203.xrea.com/)

ちなみに元のコードとは、17~19行目が以下のように変わっています。上のコピー用コードはすでに変えてあるので、書き換えは不要です。
column.UPWARD_SCROLL_CHIRP_BLOCK_SIZE = 1000; // default: 40
column.INFINITE_SCROLL_CHIRP_BLOCK_SIZE = 40; // default: 20
column.TARGET_COLUMN_CHIRP_LIMIT = 1000; // default: 40

これでスクロールバグが発生しなくなっているはずです。皆さん、よいTwitter・MarinDeckライフをお過ごしください。

なぜこれで直るのか

おそらくですが、TweetDeckはスクロールするときに新しいツイートを読み込むと、その前に表示したものが消えるようになっています。そのタイミングの問題で、Webkitのみが自分のスクロール位置を見失っているのではないかと思います。
そこで、その処理を1000件読み込んだ時までさせないようにすることで、事実上消す処理を無効にし、バグを発生させなくしています。

補足として40件と指定されたコード2行目は、一度に読み込んで描写するツイートの数のようです。ツイートはどんな場合でも40件ずつ読み込まれるようなので、最大限読み込むようにしてあります。

最後に、私の記事が役に立ったという方は、Twitterのフォロー、よろしくお願いします!

関連記事

- CafeLog -