投稿者 tel | 2014年2月2日

Twitterでアイコンがボケる

いつの間にかTwitterをブラウザで見るとアイコンがボケて見えるようになってた。
どうやら今まで48×48の画像だったところに73×73の画像を48×48の大きさで出しているみたい。

ドット絵のアイコンを使っている人たちにとってはボケるのは許せない事態だと思うのでユーザースクリプトで書き換えることにした。

https://gist.github.com/sapphire-al2o3/8755588

これをChromeの拡張機能に入れておけばボケない。

userscript_ss

ユーザースクリプトをつくた時のメモ

初めてユーザースクリプトを作っていろいろハマったのでメモ。

ヘッダを書く

こんな風にファイルの先頭にコメントを書いておく。

// ==UserScript==
// @description Twitterのbiggerアイコンをnormalアイコンに書き換えます。
// @include http*://twitter.com/*
// ==/UserScript==

DOMの変更を検出する

Twitterのサイトはリンクとかをクリックするとページが実際に遷移するわけじゃなくてajaxで取ってきたデータをhistory.pushStateでurl変えてページ移動してるように見せているみたい。

つまり画像を置き換える処理はロード時だけではダメでajaxで取ってきたデータを挿入するたびにやらないといけない。で、DOMの変更を検出するにはMutationObserverオブジェクトを使う。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

bodyに対してsubtree: trueにしておくとTwitterのページでは画像の置き換えは大丈夫だった。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。