随分とフィードの表示としてはまともになって来たかな と感じている2011年4月19日の本ブログ記事 フィードの表示文字数を制限するjavascript関数 ですが、まだ大事なものが欠けていました。 それは時間表示です。
フィードに含まれる時間データをそのまま表示するのも無粋だなと思っていたところ 次の記事を見付けました。 jQuery: JavaScriptでサイトのRSSを読み込み&表示。XML操作。ドメイン内部編。 主にはこれはフィードを扱う内容なんですが、 本ブログでは2011年4月18日 ノープログラミングXMLフィードのJSONP変換方法 で解決したクロスブラウザ問題は扱われていません。 実は提供されているダウンロードファイルに含まれるスクリプトには…
時間の表示をカスタマイズする関数が含まれていました。 この関数では標準時間との時差は勿論、 フォーマットから、指定時間に拠る new! 表示付加迄対応されています。 これをこの記事で想定しているフィードの時間表示のカスタマイズに利用させてもらいました。 それが下の表示で4月19日の本ブログ記事に実装されたものと 比較すると時間表示が追加されているのが分かっていただけるのじゃないでしょうか? 二週間以内のフィードであれば new! 表示もされる様になっています。
スクリプトは少し本ブログ運営者の好みに合わせて 以下の様に変更してあります。
var objDate = new Date(str);
var nowDate = new Date();
//現在の日付との差を計算
myDay = Math.floor((nowDate.getTime()-
objDate.getTime())/ (1000*60*60*24)) + 1;
//もし2週間以内なら"new!"マーク
if (myDay < 15 ){
var newMsg = ' <span style="color:#ff6666;
font-weight:bold;">new!</span>';
} else {
var newMsg = '';
}
var year = objDate.getFullYear();
var month = objDate.getMonth() + 1;
var date = objDate.getDate();
// if ( month < 10 ) { month = "0" + month; }
// if ( date < 10 ) { date = "0" + date; }
str = year + '年' + month + '月' + date + '日';
if(newMsg != ''){
var rtnValue = str + newMsg;
}else{
var rtnValue = str;
}
return rtnValue;
}
赤字の部分が変更部分です。 先ず、日月の表示について二桁フォーマットに揃える部分をスキップしました。(赤字一、二行目) 次に、スラッシュ区切りではなく年月日表示としました。(赤字三行目) 最後、に配列を返すのではなく単一の変数に文字列で返す様にしました。(赤字四行目以下)
Twitterから取得したつぶやき時間表示の日本慣用化
Twitterのつぶやきをブログ内に表示させようと思い立ち、2011年4月6日の記事jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法や、5月1日の記事目的要素の直前に挿入するjQueryメソッドbefore()また、5月6日の記事画像の下への回り込みを解除する方法-Twitter編など、い