FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

課金しているかどうかが一目で分かる「課金なうプラグイン」を作ってみた

375.jpg

こんばんは。開発部第2弾です。(20130402:更新)

数日前からブログ右側に設置してますが
ゲームに課金している状態かどうかが一目で分かる
「課金なうプラグイン」を作ってみました。

機能としてはプラグインのソース内に課金の期限の年月日を設定し
課金中または休止中を表示します。

課金の期限が過ぎるとステータスが課金中から勝手に休止中に変化します。

このプラグインを設定することによりブログ訪問者に対して
ブログの主が今現在ゲームの課金を行なっているのかどうかを
無駄にアピールすることができます。

興味のある方は使ってみてください。
改変&改変したものの配布は自由です。
********** FC2ブログへの設置方法 **********

1.管理画面の「プラグインの設定」をクリック
012.jpg

2.PC用「公式プラグイン追加」を選択
013.jpg

3.拡張プラグイン、フリーエリアの「追加」を選択
014.jpg

4.「フリーエリア内容の変更」の欄に以下のソースをそのままコピペします。

「課金なうプラグイン」v0.5b 20130402
<script type="text/javascript" charset="euc-jp">
<!--

//*** 設定ここから ***
//課金有効期限日付(ありえない日付だとエラー表示されます)
var year = 2013; //年
var month = 1; //月
var day = 1; //日

var pict_url = "http://blog-imgs-43.fc2.com/o/r/a/orangedome/red.jpg"; //画像URL
var comment = "コメント記入";
//*** 設定ここまで ***

var dt = new Date(year, month - 1, day);
var now = new Date();

(function() {
day_comp();
})()

function checkDate(year, month, day) {
var dt = new Date(year, month - 1, day);
if(dt.getFullYear() != year)
dt.setFullYear(year);
if(dt == null || dt.getFullYear() != year || dt.getMonth() + 1 != month || dt.getDate() != day) {
return false;
}
return true;
}

function compareDate(year1, month1, day1, year2, month2, day2) {
var dt1 = new Date(year1, month1, day1);
var dt2 = new Date(year2, month2, day2);
var diff = dt1 - dt2;

//今日の日付よりも設定の日付が未来なら正の日数に1を足して返す
//設定日と日付が同じ場合、残り1日と表示するため
if(diff<=0)
return (diff / -86400000) + 1;
else
return 0;
}

//日付比較
function day_comp(){
//日付エラーチェック
if( checkDate(year, month, day) == false ){
document.write("year,month,day error");
return 0;
}

var data="";
var url,fcolor,bgcolor,fsize,tx_color,tx_width,tx_height,status,dif_color;
var dif=0;

if ( dif = compareDate( now.getFullYear(),now.getMonth(),now.getDate(),
dt.getFullYear(),dt.getMonth(),dt.getDate() ) ){
//課金中の表示 背景:緑 文字:濃緑
bgcolor = "#00bb00"; fsize = "20px"; tx_color = "#006400"; tx_width = "70px"; tx_height = "24px";
status = "   課金中   ";
if ( dif<4 ){ //残り日数が4日より少なくなれば黄色に変更
fcolor = dif_fcolor = "#ff7500";
}else{
fcolor = dif_fcolor = "#109610";
}
}else{
//休止中の表示 背景:青 文字:濃青
bgcolor = "#4592ef"; fsize = "20px"; tx_color = "#0f56ac"; tx_width = "70px"; tx_height = "24px";
status = "   休止中   "; fcolor = "#ff4200"; //文字:赤
dif_fcolor = "#ff4200"; //残り日数が0の場合は赤
}

 //以下、表示制御部分
//表示しない場合は該当の行の先頭に//をつけてください

//画像表示
// data += ( "<img src=\""+pict_url+"\"/><br>" );

//ステータス表示
data += ( "<b style=\"background-color:"+bgcolor+"; font-size:"+fsize+"; color:"+tx_color+"; width :"+tx_width +"; height:"+tx_height+";\">"+status+"</b><br>" );

//課金有効期限表示
data += ( "課金有効期限:<font color=\""+fcolor+"\"><b>"+year+"."+month+"."+day+"</b></font><br>" );

//Today表示
data += ( "Today:<b>"+now.getFullYear()+"."+(now.getMonth()+1)+"."+now.getDate()+"</b><br>" );

//残り日数表示
data += ( "残り:<font color=\""+dif_fcolor+"\"><b>"+dif+"</b></font>日<br>" );

//コメント表示
// data += ( comment );

document.write(data);
}

-->
</script>



5.ソース上部にある設定項目で課金有効期限を設定します。
課金有効期限日付が例えば2013年5月20日だとしたら次のように設定します。

var year = 2013; //年
var month = 5; //月
var day = 20; //日

注意点として例えば2013年5月40日といったような
実際の暦に存在しない日付を設定するときっとエラーがでます。


6.画像を表示をする場合はFC2ブログに画像をアップロードした後に
ソース上部にある設定で画像URLを指定してください。

例えば画像のURLが"http://blog-imgs-43.fc2.com/o/r/a/orangedome/hogehoge001.jpg"なら

var pict_url = "http://blog-imgs-43.fc2.com/o/r/a/orangedome/hogehoge001.jpg"; //画像URL

に変えます。

画像なしの方が画像の読み込みがないので表示はもちろん早いのですが
素敵な画像を用意すれば見た目が素敵になれる可能性があるかもしれません。


7.コメントを表示する場合はソース上部で設定します。
例えば"投票日は4月1日"と表示したい場合は次のように設定してください。

var comment = "投票日は4月1日";


8.必要に応じて各機能の表示のON、OFFを制御できます。
備えてる表示は以下の通りです。

・画像表示
・課金中or休止中のステータス表示
・課金有効期限表示
・Today表示(本日の日付)
・残り日数表示
・コメント表示

表示のON、OFFはソース下部の制御部分で行います。
OFFにする場合は該当の行の先頭に//をつけるとその行が無効になります。
ONにする場合は//を付けないでください。

例えばコメントの表示をしたい場合には

//コメント表示
data += ( comment );

とし、表示したくなければ

//コメント表示
// data += ( comment );

と行の先頭に//を付けてください。


以下、メモ

*** 20130115 v0.1 ***
・新規作成

*** 20130118 v0.2 ***
・日付チェック機能追加
・リンク&画像の2つのモード追加
・コメント機能追加
・細部修正

*** 20130119 v0.3 ***
・デザイン修正
・リンク&ウインドウ生成廃止
・細部修正
・公開

*** 20130119 v0.4c ***
・コメントを1つに削減
・ソース修正

*** 20130205 v0.4d ***
・画像によるステータス表示を廃止
・画像表示+ステータス表示(文字)に変更

*** 20130226 v0.5 ***
・課金の残り日数を表示
・残り日数に応じて表示色を変更する機能を追加
・細部修正

*** 20130401 v0.5a ***
・日付の比較が正しくできない場合があった不具合を修正

*** 20130402 v0.5b ***
・ステータス表示の幅を変更
・画像を使うかどうかのフラグを撤去
・表示制御できるように分かりやすく修正
スポンサーサイト

コメント


管理者のみに表示

トラックバック

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。