ナウでヤングな若者にバカウケの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とかで企画としてやったりしても楽しそう…！
僕なら前者は確実に心が折れますけど！
とりあえず他力本願なかんじでテンプレート置いておきますね！
