■[Other Tips] Twitterのハートを寿司にしてコンニャクにしよう!


※Update(2015/12/02) 通知用アイコンのエンコード文字列が誤っていたため修正しました。

■これはなに?

Twitterのハート(Like)を寿司(Sushi)にして蒟蒻(Nubarn)にする方法です。

Twitterで生き生きとしたコンニャクをタイルに叩き付けるごとくいいねを投げましょう!

CVIFcx_UYAAqHPT

Unknown2

「ヌバーン!」ってなんだよと言う方は、Googleさんによるとこういうことだそうです。

私も全く意味が分かりませんが、ぬばーんしたかったのでコレを作りました。

CVHIWH6U4AIQMQY

 

仕組みとしては、「いいね」を「すし」に変更することでおなじみの、like2sushiをベース

に、私家版のコンニャクアイコンに差し替えて表記を「ヌバーン!」にします。

 

が、僕が作ったのはコンニャクアイコンと文言修正だけで、仕組み自体はlike2sushiに

完全に依存しています。よって、これ自体の再配布は問題があると思うので、作成した

コンニャクのアイコンを配布し各自で変更を行うTipsとして公開します。

 

文書量は多いですが、やることは少ないのでじっくり読みながら進めてくださいね。

 

また、like2sushiにも記載がありますが、Twitter社の無慈悲により突然動かなくなる

可能性があります。何かあってもサポートはしませんので各自で対応をお願いします。

 

■準備するもの

  • 「Stylish」アドオンおよび「Stylishに対応したブラウザ」
    • ここではWindows/Chrome版として紹介します。導入しておいてください。
  • like2sushi
    • GitHubで「Download Zip」ボタンでダウンロード、展開してください。
    • 今回のベースとなっているアドオン/CSSです。感謝してもし足りないです。
    • ここにある資料はよく目を通しておいてください。

 

■まずはlike2sushiを導入しよう!

まず、上記リンクのChrome ウェブストアでGoogle Chromeに「Stylish」を追加してください。

アドレスバーの横に「S」というようなボタンが追加されているはずです。これを押します。

 

ポップアップに「インストール済みのスタイルを管理」というリンクがあるので選択します。

左側の「新しいスタイルを作成」ボタンを押し、エディタを開きます。

 

エディタの下の適用先に「個別指定」というボタンがあれば、これを押します。「URL」という

プルダウンメニューになっている場合はそのままでかまいません。

 

「URL」の隣の入力欄に「https://twitter.com」を入力し、「追加」ボタンを押します。

 

次に展開した「like2sushi」から「like2sushi.css」を開き、すべてをコピーしてエディタに

貼り付けます。

 

最後に画面左側の「名前を入力してください」部分に「like2sushi」と入力して「保存」

ボタンを押します。名前はわかりにくかったら何でも良いです。

 

最終的にエディタはこんな感じになっていると思います。

クリップボード02

 

これでTwitterページをリロードすればハートが寿司に変わっているはずです。

 

■寿司からコンニャクへ

では、寿司からコンニャクに変更してみましょう。

作業については次の3つとなります。

 

  • TLの大きな「すし」アイコンを差し替える
  • 通知欄の小さな「すし」アイコンを差し替える
  • テキスト「すし」を「ヌバーン!」に差し替える
    • 半角カナはあまり使いたくないですが、そのままではサイズが収まらない
      ので仕方なく使用しています。本来はCSSで収めるようにすべきです。

 

注意点ですが、ここで使用する画像ファイルはBase64エンコードという仕組みで

CSSファイル内にテキストとして記載されます。よって画像ファイルをOS側では

そのまま見ることが出来ません。「画像が無い!」と混乱しないように願います。

 

まず、「Stylish」を再度開き、「インストール済みのスタイルを管理」を開きます。

ここに先ほど作成した「like2sushi」がありますので「編集」ボタンを押します。

先ほどと同じエディタが開いていると思います。

 

まず、9行目付近にある次の行を探しましょう。

.HeartAnimation, .Icon--heart {
background: url(data:image/png;base64,~ものすごい量のテキスト~

~ものすごい量のテキスト~) !important;
background-size: 2900% !important;
background-position: left !important;
}

上記の「ものすごい量のテキスト」部分から、「url()の中身」を次のテキストの内容

でコピペして変更してください。非常に長いので別ウィンドウで開きます。

 

書き換える内容1(クリックでコピペする内容が開きます)

 

次に、先ほどよりは短い内容ですが同じように122行付近も変更します。書き

換える内容は先ほどと違いますので、改めてコピペしてください。

.Icon--heartBadge:before {
content: "" !important;
background-image: url(data:image/png;base64,~ものすごい量のテキスト~

~ものすごい量のテキスト~) !important;

書き換える内容2(クリックでコピペする内容が開きます)

 

最後に、CSS内の「すし」を「ヌバーン!」(すべて半角)に書き換えます。テキストエディタ

などで一括置換すると良いでしょう。

 

作業が終わったら「保存」を押してStylishを閉じ、Twitterをリロードして正しく反映

されているか確認してみましょう!

 

■正しく表示されないとき

正しく表示されない場合、オリジナルの「like2sushi.css」と見比べて確認しましょう。

括弧が抜けていたり、Base64エンコード部分に余計な改行があるかもしれません。

 

また、最初に述べたようにTwitterの無慈悲な仕様変更が行われているかもしれません。

仕組みとしてはCSSの定義名を置き換えているので、「いいね」でなくなったときは

高確率で動かなくなると思います。

 

like2sushi側がバージョンアップした場合でも、「アイコンさえ変更が無ければ」基本的

には上記の作業で最新版に対応することが出来ると思います。

 

僕からはこれ以上は何とも言えないです。

 

■ヌバーン!

それでは、よいヌバーンを!ぬばーんぬばーん(鳴き声

コメントはまだありません。

コメントする