読者です 読者をやめる 読者になる 読者になる

Feel on!の画像を差し替えて自分仕様にする!

Greasemonkey WebService

ナウでヤングな若者にバカウケのFeel on!が待望のブラウザ対応しましたね!
Feel on!


アプリのリリースを見たときこのアルゴリズムだけ拝借して画像差し替えられたらいいなー。
色んなパターン用意してtwitterライフ充実するなー。全部眼鏡さんにしちゃうなー。とか思ってたんですが、いかんせんアプリなんで諦めてました。
しかし!ついに!ブラウザ対応!
ということで早速HTML構造がどうなってるのか見に行きました。


どうやらJSで取得してきて以下のような感じで画像URLを生成してるみたい。

UserRecentTimelineController.prototype.getIllustrationPath = function(fileName) {
	return FeelonConfig.contextPath + "/img/emotion/254/" + fileName;
}

実際に生成されたHTMLは以下。

<img class="tweetpic" src="/img/emotion/410/083.png" alt="emotion picture">

つまり…!
srcの先頭に自分で用意したURLを付与して同じ名前でファイルを配置すれば自分仕様のFeel on!が完成するわけです…!
なにそれたのしい…!


早速やってみます。
とりあえずテンプレート作って横幅410の画像を自作します。
ただ全種類作るとか死んじゃうので一旦テストで1枚つくりました。

サーバに「/img/emotion/410/」ディレクトリを作成して、こいつをそこにぶちこんで前準備は完了です。
結果hoge.pngが一致してればいいので同一ディレクトリ作る必要は無いんですけど、JSらくちんなので。


srcの先頭にURLを付与するのはグリモンのユーザースクリプトでやってみます。

// ==UserScript==
// @name           more feelon
// @namespace      http://d.hatena.ne.jp/tm8r/
// @include        http://www.feel-on.com/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
// ==/UserScript==
(function(){
var path = "http://a-lude.com/";
$(function(){
	setInterval(function(){
		$(".tweetpic").each(function(){
			var imgTag = this;
			var src = imgTag.getAttribute("src");
			if(src.indexOf(path,0) == -1){
				imgTag.setAttribute("src",path+src);
			}
			
		});
	},1000);
});
})();

JSとかろくに書いたことないので多分イケてない上にページング非対応ですがとりあえず…!
相変わらずイケてませんがページングもいけるかんじに直しました。
実行…!



きた…!!


あとは存在する分だけ画像を用意すれば!こっちのもの!つらい!
なんかそういうサービスか機能あるといいですね。すてきですね。ていうかAPIがあればもっといいですね。
自分で徐々に追加していって存在するものだけ置換していっても楽しいし、pixivとかで企画としてやったりしても楽しそう…!
僕なら前者は確実に心が折れますけど!


とりあえず他力本願なかんじでテンプレート置いておきますね!

スポンサーリンク