● 内容
① おみくじのブログパーツ。（ペーパー フォーチュン）
② 確率の設定などが自由に可能。
③ 設定可能項目
・大吉～凶などの項目の名前の設定
・上記項目に対応した確率。すべて足すと１００になるように設定。（整数指定）
・おみくじ画像と結果画像の設定。
・上記項目に対応した結果メッセージの設定。
・おみくじ実行ボタンとリセットボタンの設定。
● 実例
● 準備作業（画像の準備）
① 大吉～凶の画像
② 初期画像
私の場合は、①の画像をバナー工房 でアニメーション画像にしました。
● 設置方法
① フリープラグインを設定（例）
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>(function(j){j(function(){$=jQuery=j})})($)</script>
<script type='text/javascript' src='https://newblue.googlecode.com/svn/trunk/Paper_fortune.js'></script>
<script type="text/javascript">
// Paper_fortune_set おみくじ
var Paper_fortune_option=[{items:"大吉,中吉,小吉,吉,末吉,凶",items_Probability:"5,10,20,40,20,5",
items_img_FURL:"http://stat.ameba.jp/user_images/20130831/10/new-blue-777/",
items_img_all:"03/7c/g/o0320024012667677784.gif",
items_img:"a1/a6/p/o0320024012667675894.png,cc/d9/p/o0320024012667676126.png,06/51/p/o0320024012667675893.png,a5/ab/p/o0320024012667675891.png,68/58/p/o0320024012667676127.png,d0/2e/p/o0320024012667675892.png",
run_btn_desc:"おみくじ",run_Result_message:"超ラッキー大吉,ラッキー中吉,少しラッキー小吉,吉ですよ,末吉だね,アンラッキー凶",retry_btn_desc:"リセット",test_mode:"OFF"}];
$(document).ready(function() {
$(".Paper_fortune_set_area").Paper_fortune_set();
});
</script>
注意：Paper_fortune_optionは、Paper_fortune.jsの先頭に入れるとフリープラグインの
文字数削減になります。
② ＣＳＳを設定
・ code.google.com
https://newblue.googlecode.com/svn/trunk/Paper_fortune.css
http://code.google.com/p/newblue/source/browse/trunk/Paper_fortune.css
/* ---------------------------------------------- */
/* おみくじ(Paper_fortune) */
/* ---------------------------------------------- */
.Paper_fortune{ /* おみくじ全体 */
width:180px; /* 幅 */
height:200px; /* 高さ */
}
.Paper_fortune img{ /* 画像 */
width:180px; /* 画像幅 */
height:auto; /* 高さ(自動) */
margin:0; /* マージン */
}
.Paper_fortune .Paper_f_msg{/* 結果メッセージ */
color:#ffff00; /* 文字の色 */
font-size:18px; /* 文字の大きさ */
font-weight:bold; /* 文字の大きさ */
}
/* 実行ボタン */
.Paper_fortune input[name="Paper_f_btn"]{
color:#ff0000; /* 文字の色 */
background-color:#444444; /* 文字の大きさ */
border:none; /* 枠 */
}
/* リセットボタン */
.Paper_fortune input[name="Paper_f_btn_r"]{
color:#ff0000; /* 文字の色 */
background-color:#444444; /* 文字の大きさ */
border:none; /* 枠 */
}
/* ボタンにカーソルを乗せた時 */
.Paper_fortune input[name="Paper_f_btn"]:hover,
.Paper_fortune input[name="Paper_f_btn_r"]:hover{
cursor:pointer; /* ポインタカーソル */
}
/* ---------------------------------------------- */
③ 設置したい場所に下記を入れる（記事・メッセージボード・フリースペースなど）
（記事・メッセージボードへはＨＴＭＬモードで入れる）
<div class="Paper_fortune_set_area"></div>
● JavaScript 内容
code.google.com内
https://newblue.googlecode.com/svn/trunk/Paper_fortune.js
http://code.google.com/p/newblue/source/browse/trunk/Paper_fortune.js
// --------------------------------------------------------------------
// おみくじの実行(Execution of Fortune)
// --------------------------------------------------------------------
$.fn.extend({
Paper_fortune_run:function(){
// option set
var Paper_fortune_o = Paper_fortune_option[0];
var items = Paper_fortune_o.items;
var items_Probability = Paper_fortune_o.items_Probability;
var items_img_FURL = Paper_fortune_o.items_img_FURL;
var items_img = Paper_fortune_o.items_img;
var items_img_all = Paper_fortune_o.items_img_all;
var run_Result_message = Paper_fortune_o.run_Result_message;
var test_mode = Paper_fortune_o.test_mode;
// Array set
var items_Array = items.split(","); // 大吉～凶(Excellent luck ...... Misfortune)
var items_Prob_Array = items_Probability.split(","); // 確率(Probability)
var run_items_img_Array= items_img.split(","); // 結果の画像(result image)
var run_Result_m_Array = run_Result_message.split(","); // 結果のメッセージ(result message)
var items_Prob_Range_Array=new Array(), items_Prob_Summ=0;
for(i = 0; i < items_Prob_Array.length; i++){
items_Prob_Range_Array[i]=parseInt(items_Prob_Array[i])+items_Prob_Summ;
items_Prob_Summ=parseInt(items_Prob_Array[i])+items_Prob_Summ;
}
// テストモード(result display test_mode "ON")
if(test_mode=="ON"){
var summary_display="";
for(i = 0; i < items_Prob_Range_Array.length; i++){
if(i!=0){
summary_display+=items_Array[i]+" 範囲="+parseInt(items_Prob_Range_Array[i-1]+1)+"～"+items_Prob_Range_Array[i]+"\n";
}else{
summary_display+=items_Array[i]+" 範囲="+"1"+"～"+items_Prob_Range_Array[i]+"\n";
}
}
}
// 乱数を発生させる(Random number)
var rand_result = Math.floor(Math.random()*100);
var result_index;
for(i = 0; i < items_Prob_Range_Array.length; i++){
if(rand_result<=items_Prob_Range_Array[i]){
result_index=i;break;
}
}
// テストモード(result display test_mode "ON")
if(test_mode=="ON"){
alert(summary_display+" rand_result="+rand_result+" index="+result_index+" items="+items_Array[result_index]);
}
// 結果を表示(Result set)
$("img.Paper_f_img",this).attr("src",items_img_FURL+run_items_img_Array[result_index]);
$(".Paper_f_msg",this).text(run_Result_m_Array[result_index]);
$("input[name='Paper_f_btn']",this).attr("disabled","disabled");
}
});
// --------------------------------------------------------------------
// おみくじを指定場所に表示する(will display in the location fortune)
// --------------------------------------------------------------------
$.fn.extend({
Paper_fortune_set:function(){
var Paper_fortune_o = Paper_fortune_option[0];
var items_img_FURL = Paper_fortune_o.items_img_FURL;
var items_img_all = Paper_fortune_o.items_img_all;
var run_btn_desc = Paper_fortune_o.run_btn_desc
var retry_btn_desc = Paper_fortune_o.retry_btn_desc;
var test_mode = Paper_fortune_o.test_mode;
// $(this)のクラス名を取得(Get the name of the class $(this))
var selectors=$(this).attr("class");
// Array set
$(this).append('<div class="Paper_fortune"><img class="Paper_f_img" src="'+items_img_FURL+items_img_all+'"><br><input type="button" name="Paper_f_btn" value="'+run_btn_desc+'" onClick="$(\'.'+selectors+'\').Paper_fortune_run();"> <input type="button" name="Paper_f_btn_r" value="'+retry_btn_desc+'" onclick="$(\'.'+selectors+'\').Paper_fortune_reset();"><br><span class="Paper_f_msg"></span></div>');
}
});
// --------------------------------------------------------------------
// おみくじ リセット(Fortune reset)
// --------------------------------------------------------------------
$.fn.extend({
Paper_fortune_reset:function(){
var Paper_fortune_o = Paper_fortune_option[0];
var items_img_FURL = Paper_fortune_o.items_img_FURL;
var items_img_all = Paper_fortune_o.items_img_all;
$("img.Paper_f_img",this).attr("src",items_img_FURL+items_img_all);
$(".Paper_f_msg",this).text("");
$("input[name='Paper_f_btn']",this).removeAttr("disabled");
}
});