Newマーク
Updated! 1/15 checkNew()に日付を設定しておく際、08とか09が八進数と見られ、警告が出るのを修正。'08'や'09'というようにアポストロフィーを付けた。
Updated! 1/12 Newマークを付けておく期間を指定できるようにした
各エントリに「New!」マークを付けたいと思いませんか? MTの場合、記事の投稿時に静的HTMLが作成されるので、ダイナミックに判断させるのはなかなか難しい。 とはいえ、JavaScriptを使えばできるかなと。 方針は以下の通り。
Updated! 1/12 Newマークを付けておく期間を指定できるようにした
各エントリに「New!」マークを付けたいと思いませんか? MTの場合、記事の投稿時に静的HTMLが作成されるので、ダイナミックに判断させるのはなかなか難しい。 とはいえ、JavaScriptを使えばできるかなと。 方針は以下の通り。
・ファイルの投稿時刻(MTEntryDate)よりも最終更新時刻がいい。 ・サーバに負荷を掛けたくない。これに従うと、(MTインストール時に付いて来る?)MTLastModifiedを使うと良さそうだ。 この値をHTMLビルド時に保持し、JavaScriptがダイナミックに参照して、最終更新時刻から現在まで指定された日日間未満なら更新マーク(New!とか★)を付ける。
最終的に出来たのは、以下の通り。
これは、与えられた年月日時分(最終更新時刻)と現時刻を比較して、指定された日日間未満なら予め指定されている≶span id=UC〜 style="display:none;〜">のスタイルdisplay要素をinlineとして表示する。48時間以上経過していたらnoneとして表示しない。
[quote]
<script language="javascript" type="text/javascript">
<!--
function checkNew(id, y, m, d, hh, mm, duration){
var spid = id;
if( document.getElementById ) {
if( document.getElementById(spid).style.display ) {
var fileDate = new Date(y,m-1,d,hh,mm, 0);
var nowDate = new Date();
var days = Math.floor((nowDate.getTime() - fileDate.getTime())/(1000*24*60*60));
if (days < duration) {
document.getElementById(spid).style.display = "inline";
} else {
document.getElementById(spid).style.display = "none";
}
}
}
}
//-->
</script>
[/quote]
さて、上のJavaScriptを呼び出す方は以下のようにする。
[quote]
<span id="UC<$MTEntryID$>" style="display:none;color:#f00;">★</span>
<script language="JavaScript" type="text/javascript"><!--
checkNew("UC<$MTEntryID$>",<$MTLastModified format="'%Y','%m','%e','%k','%M'"$>,2);//-->
</script>
[/quote]
<span>のidはユニークにするため、UC+エントリIDとしている。後は、checkNewの呼び出しパラメータとして、予めこのエントリの最終更新時刻を設定しておく。これはエントリの追加、更新をすれば固定になる。最後の2は二日間を表す。
これで、現時刻が最終更新時刻から二日(48時間)未満の項目には★マークが付きます。
お試しを!
[2004/10/4追記]
時間単位にしたいという場合。(例えば、12時間)
[quote]
<script language="javascript" type="text/javascript">
<!--
function checkNew(id, y, m, d, hh, mm, duration){
var spid = id;
if( document.getElementById ) {
if( document.getElementById(spid).style.display ) {
var fileDate = new Date(y,m-1,d,hh,mm, 0);
var nowDate = new Date();
var days = Math.floor((nowDate.getTime() - fileDate.getTime())/(1000*60*60));
if (days < duration) {
document.getElementById(spid).style.display = "inline";
} else {
document.getElementById(spid).style.display = "none";
}
}
}
}
//-->
</script>
[/quote]
[quote]
<span id="UC<$MTEntryID$>" style="display:none;color:#f00;">★</span>
<script language="JavaScript" type="text/javascript"><!--
checkNew("UC<$MTEntryID$>",<$MTLastModified format="'%Y','%m','%e','%k','%M'"$>,12);//-->
</script>
[/quote]
コメント
ども。これ、頂きます:-)
あと、「続けて読む」をCSS使って隠すの、まえからこうしたいとおもっていたんですが、ブラウザのコンパチビリティが心配でしてないんですけど、このあたりについて情報お持ちですか？
投稿者: shigeya | 2004年1月 9日 14:39
shigeyaさん、ども。
「隠す」のは、ブラウザはWin IE/M/N, Mac S/M、Linux Mで問題なく動作しているようです。
投稿者: miya | 2004年1月 9日 16:48
情報ありがとうございます。いけそうですね。試してみます。
投稿者: shigeya | 2004年1月10日 00:00
「最近のコメント」にも適用してみました。なかなかいい。
今は48時間(2日間)の間「新しい」としてますが、これは可変の方がいいですね。checkNewのパラメータにそれを一つ加える方がいい。
投稿者: miya | 2004年1月12日 10:53
javascriptって、0で始まっている数字は8進数と見なされるのですね。初めて知りました。
投稿者: miya | 2004年1月15日 08:42
∑(￣[]￣；)おお～っ！！
す、すみません。
アタシが我侭な独り言をつぶやいたばっかりに、お礼を言うより先に更新してくださったのですね。
ありがとうございます!!今早速試してみたら、バッチリです!!
トラックバックまで返していただいて、ありがとうございました。
今後ともよろしくお願いいたします。
投稿者: km | 2004年10月 4日 20:16