Deprecated: Assigning the return value of new by reference is deprecated in /home/users/1/fool.jp-ichi/web/blog/wp-content/plugins/modPukiWiki/plugin/region.inc.php on line 14
以前にDropboxで友人数人とjs共有しようぜ！って話になった時に、イキオイで作ったまんまDropbox内に放置していたもの。
今日、そういえばこういうのも作ったんだよねーと友人に話したところ、折角作ったなら公開しないともったいないよ！と言われたのでそれもそうかと思い公開してみる。
何コレ？
指定したユーザーのtwitterのタイムラインを取得して表示させるjQueryプラグインです。
- さらっと使う分にはtwitterのidと表示件数あたりを指定するだけですぐ簡単に使えるよ！
- post内のURLや@でのreply、#でのハッシュタグを自動でリンクするよ！
- 独自テンプレート形式で表示の方法をカスタマイズも可能。htmlだけわかるくらいでさくっとできるよ！
＃もすこし詳しくは『テンプレート』の項参照
必要なもの
サンプル
http://ichi.fool.jp/test/js/jquery/twitter/twitter.html
使い方
$(function(){
// id="twitter1"タグ内に@kazuyo_kのTLを表示（デフォ5件） */
$('#twitter1').twitter('kazuyo_k');
// id="twitter2"タグ内に@kohmiのTLを最新10件まで表示 */
$('#twitter2').twitter('kohmi', {count:10});
// id="twitter3"タグ内に@tsudaのTLを最新10件まで独自テンプレートでカスタマイズして表示。
$('#twitter3').twitter('tsuda', {
count: 10
, prefix: '<dl>'
, postfix: '</dl>'
, each_line: '<dt><a class="user" href="%user.link%"><img src="%user.profile_image_url%" width="20" height="20" alt="%user.name%" />%user.screen_name%</a> (<a href="%link%">%date%</a>)</dt><dd>%text%<dd>'
});
});
実際の表示動作はサンプルで確認できます。
オプション
- count
- デフォルト値：5
TLの表示件数を指定。 - loading
- デフォルト値：’now loading…‘
ローディング中に表示される内容を指定。（htmlタグ使用OK） - prefix
- デフォルト値：’<ul>‘
TL全体の最初に挿入されるものを指定 - postfix
- デフォルト値：’</ul>‘
TL全体の最後に挿入されるものを指定 - each_line
- デフォルト値：’<li><a class="user" href="%user.link%" target="_blank"><img src="%user.profile_image_url%" width="16" height="16" alt="%user.name%" /></a> %text% <a class="date" href="%link%" target="_blank">%date%</a></li>‘
各postをどのように表示するかの指定。
『テンプレート』の項で詳細説明
テンプレート
オプションの「each_line」内で使える独自タグ(?)。
『%～～%』形式でオプション内に記述、展開時に該当タグ部分がその内容に置換されます。
- %user.name%
- ユーザーの「名前」。（例：勝間和代）
- %user.screen_name%
- ユーザー名。（例：kazuyo_k）
- %user.link%
- ユーザーのプロフィールへのリンク （例：http://twitter.com/kazuyo_k）
- %user.profile_image_url%
- ユーザー画像のURL。
- %text%
- post内容。
- %link%
- postへのパーマリンク。（例：http://twitter.com/kazuyo_k/status/4466616139）
- %date%
- postされた日時。twitterのwebと同じような～分前、～時間前形式。
例としてeach_lineが
<dt><a class="user" href="%user.link%"><img src="%user.profile_image_url%" width="20" height="20" alt="%user.name%" />%user.screen_name%</a> (<a href="%link%">%date%</a>)</dt><dd>%text%<dd>
だった場合
<dt><a class="user" href="http://twitter.com/kazuyo_k"><img src="http://a3.twimg.com/profile_images/371937965/twitter_bigger__1__bigger.jpg" width="20" height="20" alt="勝間和代" />kazuyo_k</a> (<a href="http://twitter.com/kazuyo_k/status/4466616139">約4時間前</a>)</dt><dd>偏光サングラスなので、室内ではすどおしです。<dd>
のような形で各postが整形されて表示されます。
おまけ（linkfy的なやつ）
postの内容を自動でリンクするための関数も入ってるので、そこだけ別用途で使うこともできるよ。
これを使えばhttp://～～みたいなurlを含んだ文字列をurl箇所だけリンクタグで囲った形に整形して出力するよ。
var before = 'あいうえおhttp://www.google.comかきくけこ'; var after = $.makeLink(before); //→ 'あいうえお<a href="http://www.google.com" target="_blank">http://www.google.com</a>かきくけこ'
ソース
 |
…
(function($){//BEGIN $ = jQuery
$.makeLink = $.makeLink || function(str, options){
options = $.extend({
target: '_blank'
}, options);
return str.replace(/[A-Za-z]+?:\/\/[A-Za-z0-9_-]+\.[A-Za-z0-9:%&\?\/.=~_-]+/g, function(m){
return [
'<a href="'
, m
, options.target ? '" target="' + options.target + '">' : ''
, m
, '</a>'
].join('');
});
};
$.twitter = {
make_user_link: function(str){
return str.replace(/@(\w+)/g, function(m, user){
return [
'@<a href="'
, 'http://twitter.com/'
, user
, '" target="_blank">'
, user
, '</a>'
].join('');
});
}
, make_hash_link: function(str){
return str.replace(/#(\w+)/g, function(m, hashtag){
return [
'#<a href="'
, 'http://search.twitter.com/search?q='
, encodeURIComponent(m)
, '" target="_blank">'
, hashtag
, '</a>'
].join('');
});
}
, related_time: function(created_at, options){
options = $.extend({
sec: function(c, d, diff){
return [(Math.floor(diff / 5) + 1) * 5, '秒以内前'].join('');
}
, min: function(c, d, diff){
var m = Math.floor(diff / 60);
return m < 45 ? [m, '分前'].join('') : '約1時間前';
}
, hour: function(c, d, diff){
var h = Math.floor(diff / 60 / 60) + 1;
return h < 24 ? ['約', h, '時間前'].join('') : options.other(c, d, diff);
}
, other: function(c, d, diff){
var dd = new Date(c);
var m = dd.getMonth() + 1;
var d = dd.getDate();
var h = dd.getHours();
var i = dd.getMinutes();
return [
[
dd.getFullYear() || dd.getYear()
, m < 10 ? ['0', m].join('') : m
, d < 10 ? ['0', d].join('') : d
].join('/')
, [
h < 10 ? ['0', h].join('') : h
, i < 10 ? ['0', i].join('') : i
].join(':')
].join(' ');
}
}, options);
var d = new Date().getTime();
var c = Date.parse(created_at) || (function(at){
var c = new Date([at[1], at[2], at[5], at[3]].join(' '));
c.setTime(c.getTime() - (!(at[4] - 0) ? c.getTimezoneOffset() * 60 * 1000 : 0));
return c.getTime();
})(created_at.split(' '));
var diff = (d - c) / 1000;
if(diff < 60){
return options.sec(c, d, diff);
}else if(diff < 60 * 60){
return options.min(c, d, diff);
}else if(diff < 60 * 60 * 24){
return options.hour(c, d, diff);
}
return options.other(c, d, diff);
}
};
$.twitter.convert_link = function(str){
var $tw = $.twitter;
return $tw.make_user_link($tw.make_hash_link($.makeLink(str)));
};
$.fn.twitter = function(username, options){
if(!username || typeof arguments[0] != 'string') throw 'requires a username';
var $this = this;
var default_count = 5;
options = $.extend({
method: 'status/user_timeline'
, count: default_count
, loading: 'now loading...'
, prefix: '<ul>'
, postfix: '</ul>'
, each_line: '<li><a class="user" href="%user.link%" target="_blank"><img src="%user.profile_image_url%" width="16" height="16" alt="%user.name%" /></a> %text% <a class="date" href="%link%" target="_blank">%date%</a></li>'
, success: function(json){
var ret = [options.prefix];
$.each(json, function(i, item){
var screen_name = item.user.screen_name;
item.link = ['http://twitter.com', screen_name, 'status', item.id].join('/');
item.text = $.twitter.convert_link(item.text);
item.date = $.twitter.related_time(item.created_at);
item.user.link = ['http://twitter.com/', screen_name].join('');
var each_line = options.each_line
.replace(/%(.*?)%/g, function(m, obj){
var mm = obj.match(/(.+?)\.(.+)/);
return mm ? item[mm[1]][mm[2]] : item[obj];
})
ret.push(each_line);
});
ret.push(options.postfix);
$this.html(ret.join(''));
}
, error: function(XMLHttpRequest, textStatus, errorThrown){
console && console.log && console.log(XMLHttpRequest, textStatus, errorThrown);
$this.html('error...');
}
, params : {}
}, options);
$this.html(options.loading);
var Tw_API_URI = ['http://twitter.com/', options.method, '/', username, '.json'].join('');
var params = $.extend({
count: options.count
}, options.params);
if(!params.count || params.count > 200) params.count = default_count;
params = $.param(params);
var uri = [Tw_API_URI, params].join('?');
$.ajax({
url: uri
, dataType: 'jsonp'
, success: options.success
, error: options.error
});
return this;
};
})(jQuery);//END $ = jQuery
|
念のため名前は伏せた！
15:30 (_3*******) http://hatimaki.blog110.fc2.com/blog-entry-1399.html
15:31 (mo*******) はちま起稿 - 「ドリームクラブ」が割とマジでエロゲの領域に踏み込んでいる件 [text/html]
15:31 (_3*******) 買おうかな
15:34 (K********) でもそれ全部かわされてるじゃないか
15:36 (_3*******) それがいいんだろ！
15:36 (mi*******) なんか
15:36 (mi*******) エロゲーって物足りないじゃん
15:36 (mi*******) でもセックスできないと
15:37 (mi*******) クソだと思う
15:37 (mi*******) ここをうまく
15:37 (mi*******) うまいこと
15:37 (mi*******) やってほしいよね
15:37 (mi*******) 俺はドリームクラブの子とセックスしたい
15:37 (ka*******) DLC:○○とセックス(JPY:10,000)
15:37 (mi*******) セックスモード解禁が8000円でも払う！
15:37 (mi*******) そう！
15:37 (mi*******) そういうこと！
15:37 (ka*******) まあ
15:37 (os*******) 次世代の売春や
15:37 (ka*******) 個人的にはアリだと思いますw
15:38 (ka*******) で、ピュアな人のために
15:38 (ic*******) エロゲなら気楽に出来るけどギャルゲは逆に手出しづらい。
15:38 (ka*******) 他人がセックスするのを妨害する権利をDLCで10000円で売る
15:38 (K********) ｗ
15:38 (os*******) エロゲなら気楽に出来るけどギャルゲは逆に手出しづらい。
15:38 (os*******) まさにそう
15:38 (ic*******) さらにその妨害を突破する権利をDLCで・・・
15:39 (K********) なんかそれ、モンスターメーカーとか、マンチキンみたい
15:39 (mi*******) そこですよ
15:39 (mi*******) 一日一人としか
15:39 (mi*******) セックスできない
15:39 (K********) 人のキャラに、樽属性とかつけるのか
15:39 (mi*******) で、セックスは競売
15:39 (mi*******) クローズドオークション
15:39 (mi*******) もうかるで！
15:39 (mn*******) 修羅場どころじゃねえぞ・・・
15:40 (K********) 確実にリアルで事件がおきるな
15:40 (mi*******) ぽろっとブログにかいちゃう馬鹿が
15:40 (mi*******) 教われる
15:40 (mi*******) 52300円でセックスできたよー＼(＾o＾)／
15:40 (mi*******) みたいな
15:40 (_3*******) ロマンを求めてる奴用に
15:40 (ic*******) ヤフオクで「○○ちゃんとの権利獲得済みHD」とか売られるんですね
15:40 (_3*******) 誰にもセックスさせない権利も
15:40 (_3*******) オークションだしたほうがいい
15:41 (mn*******) ｗｗ
15:41 (_3*******) 層的に
15:41 (_3*******) そっちのほうが高くつくかもしれないとすら
15:41 (_3*******) 思う
15:41 (mi*******) たしかに
15:41 (mi*******) なんで本気で本気のゲームメーカーに
15:41 (mi*******) エロゲーつくってもらいたいよね
15:41 (_3*******) コナミさん
15:41 (ka*******) ネットワークエロゲー!!!!!!？
15:41 (_3*******) おねがいします！
15:42 (ka*******) あたらしい
15:42 (ic*******) キミキスとアマガミがR18になったら迷わず買う
15:42 (mi*******) だよね
15:42 (ka*******) w
15:42 (ka*******) なんかこうMMO RPGのノリで
15:42 (mi*******) ヒント：ときメモオンライン
15:42 (ka*******) ネットワーク上で複数のプレーヤーがNPCの女の子(ここ重要)を攻略するゲームとかって
15:42 (ka*******) 出ないのかなー
15:43 (mi*******) そこ重要！
15:43 (ka*******) 攻略対象はあくまで1人
15:43 (mi*******) 場所ゲーで
15:43 (mi*******) ２３区を舞台にした
15:43 (mi*******) ２３人を
15:43 (mi*******) 口説くゲーム
15:43 (h********) 1人にたいして何万人がおしよせるわけですね
15:43 (mi*******) つくりたいんですよ
15:43 (mi*******) 板橋さんとかいて
15:43 (mi*******) 板橋区にいかないと
15:43 (mi*******) メールできないし、出会えないんです
15:43 (os*******) 三鷹市のおれ涙目
15:43 (ic*******) それメイン購買層な人種が不利になりませんか
15:43 (mi*******) 秋葉子ちゃん
15:43 (mn*******) 都道府県さんにすれば
15:44 (mi*******) ヤリマンですよ
15:44 (ic*******) 東京すげー倍率高いなｗ
15:44 (h********) 区じゃなくていいんだｗ
15:44 (os*******) 北区あたりは貞淑
15:44 (mi*******) 千代田子ちゃん
15:44 (ic*******) 三鷹市は天然ちゃん
15:44 (mi*******) っていうのを
15:44 (mi*******) 今度の冬コミで
15:44 (mi*******) 出 さ な い か
15:44 (ic*******) もう申込み終わってるんだぜ・・・
15:44 (h********) 三鷹市ちゃんはアニメにつよそうだよね
15:44 (mi*******) 夏 コ ミ で い い
15:45 (ic*******) 市町村攻略恋愛SLG！
15:45 (h********) 23区を擬人化するってありそうでまだないっぽいな
15:45 (_3*******) へー
15:45 (_3*******) もう申し込みおわってんだ
15:45 (mi*******) GPSだからさ
15:45 (ys*******) セックスの話の時が
15:45 (_3*******) すごいなコミケ
15:45 (mi*******) いくらでも増やせるよ女の子
15:45 (ys*******) おれたち一番輝いてるよな
15:45 (ka*******) 金剛番長？ってあれは擬人化じゃないかw
15:45 (ic*******) http://www.ryunryuntei.com/punicolor/character.html
15:45 (mo*******) ぷにカラー２３ キャラクター紹介 [text/html]
15:46 (_3*******) 23区の擬人化みたことある気するぞ
15:46 (ic*******) みなとくビッチだな
15:46 (mi*******) チングラですよ、古くは
15:46 (h********) あったｗ
15:46 (mi*******) 女に会いに行く為に通うっていうのを
15:46 (mi*******) この時代に敢えてやらせたい
15:46 (mi*******) わざわざ三鷹からきてくれたんだ☆（点数アップ）
15:46 (mi*******) みたいなロジック
15:46 (h********) 主人公は埼玉県に住んでそう
15:47 (mn*******) 青梅子ちゃん遠い
15:47 (mi*******) その日一番ポイントが高い男が
15:47 (mi*******) 抱ける
15:47 (mi*******) すげえなそれ
15:47 (mi*******) つき合える、くらいにしておこう
15:48 (mi*******) つき合うと、毎晩だける
15:48 (ic*******) グレードアップしとる
15:48 (h********) 毎晩だけるはチート扱いされそう
15:48 (mi*******) しかしだよ
15:48 (mi*******) 抱けずに
15:48 (mi*******) 次の男と
15:48 (mi*******) つき合うこともあるっていう
15:48 (mi*******) ことなんですよ
15:48 (mi*******) 20時くらいにつきあって
15:48 (mi*******) 24時くらいに振られる
15:48 (mi*******) みたいなリアルさ
15:49 (h********) その４時間で何があったんだｗ
15:49 (mi*******) ぼくじっさいに
15:49 (mi*******) あったことなんだよ
15:49 (h********) ﾘｱﾙｗ
15:49 (ys*******) 同志よ
15:50 (K********) ｗｗ
15:50 (h********) 話し合うんだｗ
15:50 (K********) うちは現在アレの続編すら通らない状況なので
15:50 (K********) ラブプラスでお楽しみください
15:50 (ys*******) 付き合って、彼女の家にいって、ケーキ食って、「やっぱ違うかも」
15:51 (ys*******) （実話）
15:51 (h********) ケーキ食ったら冷静になっちゃったんですね
15:51 (os*******) ラブプラスは
15:51 (K********) GoW2のアジア版机にはいってたこれ
15:51 (os*******) どのレベルでタッチできるんですか
15:51 (ys*******) ねじこめますか
15:51 (K********) DSウェアにかける金額で、レベルが変わります
15:51 (os*******) ラブプラスがセックスできるなら
15:52 (os*******) 全力疾走で買いに行きます
15:52 (ka*******) ラブプラスって
15:52 (ic*******) 凛子を抱けると聞いちゃぁだまってらんねえ
15:52 (ka*******) 告白成立後も延々といちゃいちゃ出来るゲームでしたっけ
15:52 (K********) 冬 コ ミ を ま て
15:52 (K********) 告白前後で違うゲーム
15:52 (ka*******) wktk
15:53 (_3*******) はーん
15:53 (K********) 300万人のラブプラユーザーがなんとかしてくれるハズ
15:53 (_3*******) コミケの存在意義が
15:53 (_3*******) 一気に理解できた気がした
15:53 (_3*******) そういうことなのか
15:54 (ic*******) 冬コミはラブプラ島を探そう
15:54 (os*******) os*******がなかまになりたそうにこっちをみている
15:54 (ic*******) ｒァ 仲間にする
15:54 (os*******) 年末の予定はあけておこう
15:55 (h********) ラブプラはむしろ
15:55 (mi*******) ラブプラすげえな
ラブプラス買うぜー！！
jQuery1.3.2から「:visible」と「:hidden」セレクタの仕様が変わって、cssでvisibility:hiddenしただけの要素は「:visible」として扱われるようになった。
jQuery1.3.1以前
要素のCSSを見て、"display"が"none"ではなく、"visibility"が"hidden"ではなく、input要素であればtype属性が"hidden"でないことjQuery1.3.2以降
ブラウザがoffsetWidthおよびoffsetHeightにゼロより大きい値を返すことこの変更により、対象要素のdisplayが"none"の場合はもちろん、親要素のdisplayが"none"であったり、要素のwidthやheightがゼロであった場合なども、":hidden"として検出されるようになりました。
でもこの仕様だと「visibility:hiddenだって見えないのにhiddenじゃねーのかよ」という違和感があるので、visibility:hidden時にはhidden判定される用のセレクタを用意してみた。
＃既存の「:visible」「:hidden」は、それはそれで使う場合もあるだろうから書き換えではなく追加。
参考：JavaScript++かも日記: 【jQuery】自作セレクタの追加
$.extend($.expr[':'], {
_visible: function(elem){
if($.expr[':'].hidden(elem)) return false;
if($.curCSS(elem, 'visibility') == 'hidden') return false;
return true;
}
, _hidden: function(elem){
if($.expr[':'].hidden(elem)) return true;
if($.curCSS(elem, 'visibility') == 'hidden') return true;
return false;
}
});
これで以下のようなコードで使えるように。
$('p:_visible') //表示されているpタグ。
$('p:_hidden') //表示されていないpタグ。
