本日は、ネタがありませんバナー自動化(JS)

概要

• e-flick.net　「本日は、ネタがありません」バナーのガイドライン

サイトの更新ネタがない時の気休めにバナーを表示するという企画(?)です。

今回自サイトにバナーを設置するに当たってJavaScriptによる自動判別スクリプトを組みました。ただしJavaScriptでは更新履歴をダイレクトに取得できないので、このプログラムの場合ソースコード中に更新日を記入するかなりローテクなタイプです。

同じJavaScriptを使ったものとしてはBlog 一番星 「本日は、ネタがありますよ/ありません」バナーについてにもありますが、ここのものとはデータの取得方法が違います(具体的にはブログ内の最新情報の日付をDOMで取得する方式)。

ソースコード

2005/10/12-2006/06/05

<script type="text/javascript">
<!--
var up = new Date("Jul 15, 2005 01:30:00");
//最終更新日設定("月 日, 年 時:分:秒")
/*
Jan...1　Feb...2　Mar...3　Apr...4
May...5　Jun...6　Jul...7　Aug...8
Sep...9　Oct..10　Nov..11　Dec..12
*/

//設定
var neta3 = 10; //何日後にヤバイくらいにネタが無い時のバナーに移行するか
var isbusy = false;  //忙しいか(時間ねぇーバナーにするかどうか) true : false
var neta_data = new Array(5);
neta_data[0] = ["natanasshi0.png","コンニチハ！今日はネタがありますよ？","http://www.e-flick.info/neta.html"];
neta_data[1] = ["natanasshi1.png","スイマセンが、本日はネタがありません","http://www.e-flick.info/neta.html"];
neta_data[2] = ["natanasshi2.png","スイマセンが、本日もネタがありません","http://www.e-flick.info/neta.html"];
neta_data[3] = ["natanasshi3.png","え！？これ以上ネタが無かったら私が脱ぐんですか！？","http://www.e-flick.info/neta.html"];
neta_data[4] = ["busy_banner.png","時間ねぇー！","http://happybusy.googlepages.com/"];

var now = new Date();
var time_sa =now.getTime()-up.getTime();
var bana_type = 3;
if(time_sa < neta3*24*3600*1000)bana_type = 2;
if(time_sa < 2*24*3600*1000)bana_type = 1;
if(time_sa < 24*3600*1000)bana_type = 0;
if( isbusy )bana_type = 4;
document.write('<a href="'+neta_data[bana_type][2]+'"><img src="'+neta_data[bana_type][0]+'" width="200" height="40" alt="'+neta_data[bana_type][1]+'">');
//-->
</script>

バナー表示させたい所に上のソースを貼り付ける。画像は以下の通り。

• natanasshi0.gif//ネタ有
• natanasshi1.gif//ネタ無2日以内
• natanasshi2.gif//ネタ無n日以内
• natanasshi3.gif//ネタ無n日以上

長期間脱がされちゃかわいそうだし、自分の更新ペースに合わせて設定すべし(何

• 時間のないサイト運営者リング
• e-flick.net　「本日は、ネタがありません」バナーのガイドライン

更新日自動取得版

2006/06/05

document.lastModifiedを使って更新日時を自動取得するタイプ。ただしレンタルサーバーによっては正確な更新日を吐かないことがあり、そういうところでは使用不可能。またブラウザによっても動作しない場合あり。

<script type="text/javascript">
<!--
var up = new Date(document.lastModified);

//設定
var neta3 = 10; //何日後にヤバイくらいにネタが無い時のバナーに移行するか
var isbusy = false;  //忙しいか(時間ねぇーバナーにするかどうか) true : false
var neta_data = new Array(5);
neta_data[0] = ["natanasshi0.png","コンニチハ！今日はネタがありますよ？","http://www.e-flick.info/neta.html"];
neta_data[1] = ["natanasshi1.png","スイマセンが、本日はネタがありません","http://www.e-flick.info/neta.html"];
neta_data[2] = ["natanasshi2.png","スイマセンが、本日もネタがありません","http://www.e-flick.info/neta.html"];
neta_data[3] = ["natanasshi3.png","え！？これ以上ネタが無かったら私が脱ぐんですか！？","http://www.e-flick.info/neta.html"];
neta_data[4] = ["busy_banner.png","時間ねぇー！","http://happybusy.googlepages.com/"];

var now = new Date();
var time_sa =now.getTime()-up.getTime();
var bana_type = 3;
if(time_sa < neta3*24*3600*1000)bana_type = 2;
if(time_sa < 2*24*3600*1000)bana_type = 1;
if(time_sa < 24*3600*1000)bana_type = 0;
if( isbusy )bana_type = 4;
document.write('<a href="'+neta_data[bana_type][2]+'"><img src="'+neta_data[bana_type][0]+'" width="200" height="40" alt="'+neta_data[bana_type][1]+'">');
//-->
</script>

更新日を手動で書く必要がない点を除き同じ。

旧ソースコード

古いタイプも残しておく。分かりづらければこっちでも可。

<script type="text/javascript">
<!--
var update = new Array(2005,7,15,1,30,0);
//最終更新日設定(西暦,月,日,時,分,秒)

//個人設定
var neta3 = 10; //何日後にヤバイくらいにネタが無い時のバナーに移行するか

var now = new Date();
var up = new Date();
if(update[0]>=2000){up.setYear(update[0]);}else{up.setYear((update[0]-1900));}
up.setMonth((update[1]-1));
up.setDate(update[2]);
up.setHours(update[3]);
up.setMinutes(update[4]);
up.setSeconds(update[5]);
var time_sa =now.getTime()-up.getTime();
var bana = 3;
if(time_sa < neta3*24*3600*1000)bana = 2;
if(time_sa < 2*24*3600*1000)bana = 1;
if(time_sa < 24*3600*1000)bana = 0;

var Write = '<img src="natanasshi'+bana+'.gif" width="200" height="40" alt="ネタ">'; //書き出す内容
document.write(Write);
//-->
</script>