ふたりのyouTube 1.1

■ソース
[diary:172213]
[beforeExec]
list = function(a){
var b = a.split(",");
return { "file":b[0].replace(/\s/g, ""), "title":b[1].replace(/^\s+|\s+$/, "") };
};
reEntry = function(page, list){
if(album == page && listAct == list){
tubeActRepeat = !tubeActRepeat;
var o = Ftag(Fid("listDisp"), "li")[listAct];
o.className = tubeActRepeat ? "repeat" : "act";
setTimeout("osc(1)", 2000);
return;
}
var o = Ftag(Fid("albumDisp"), "li");
o[album].className = "sleep";
o[page].className = "act";
album = page;
listAct = list;
tubeEntry();
};
onYouTubePlayerReady = function(){
var o = Fid("tube");
tubeActive = true;
o.addEventListener("onStateChange", "osc");
o.addEventListener("onError", "tubeLoadError");
};

tubeEntry = function(){
opa("msgDisp", 0);
var dat = list(tubeData[album][listAct]).file;
listOverOut(dat);
var s1 = "<object id='tube' width='480' height='385' ";
var uri = "http://www.youtube.com/v/" + dat + "&hl=ja&fs=1&autoplay=" +
tubeAutoPlay + "&enablejsapi=1" +
"&loop=0&rel=0&color1=0xe1600f&color2=0xfebd01";
var str = s1 + "type='application/x-shockwave-flash' data='" +
uri + "'><param name='allowScriptAccess' value='always'></param></object>";
if(document.all){
str = s1 + "classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'>" +
"<param name='movie' value='" + uri + "'></param><param name='allowScriptAccess' value='always'></param>" +
"<param name='allowFullScreen' value='true'></param></object>";
}

echo("tubeExDisp",str);
var o = Ftag(Fid("listDisp"), "li");
if(listBef != -1) o[listBef].className = "sleep";
o[listAct].className = tubeActRepeat ? "repeat" : "act";
listBef = listAct;
document.cookie = "tubeAlbum=" + album + "; path=/home/yadokari/; expires=Tue, 31-Dec-2030 23:59:59;";
};
osc = function(no){
if(no == 1){
opa("msgDisp",1);
}
if(no == 0){
nonList = true;
if(tubeActRepeat) tubeEntry();
else {
listAct++;
if(listAct == tubeData[album].length) listAct = 0;
setTimeout("tubeEntry()", 2000);
}
}
};

tubeLoadError = function(no){
var s = "errMsgDisp";
echo(s, echo(s) +
"アルバム:" + tubeAlbum[album] + "の " + list(tubeData[album][listAct]).title + "は" +
(no == 100 ? "ファイルが見つかりませんでした。" : "投稿者が埋め込みを拒否しています。") + "\x3cbr />"
);
osc(0);
};

alEntry = function(n){
echo("albumInfo", "Futari no Album / \x3cspan>" + tubeAlbum[n] + "\x3c/span>");
if(listAct != -1 && album == n){
tubeListRepeat = !tubeListRepeat;
var o = Ftag(Fid("albumDisp"), "li")[n];
o.className = tubeListRepeat ? "repeat" : "act";

}
var str = "",a;
for(var i = 0; i < tubeData[n].length; i++){
a = list(tubeData[n][i]);
str += '<li ';
if(nonList && n == album && i == listAct) str += 'class="act"';
str += '>\x3ca href="javascript:reEntry(' + n + ',' + i + ')" ' +
'onmouseover=listOverOut("' + a.file + '") onmouseout=listOverOut("")>' + a.title + '\x3c/a></li>';
}
e2("listDisp", "<ul>" + str + "</ul>");
};
e2 = function(obj, str){
if(e2.f == null){
e2.o = obj; e2.s = str; e2.f = 1;
}
var o = Fid(e2.o).style;
var a = o.opacity -= e2.f ? .1 : -.1;
o.opacity = a;
if(e2.f && a > 0 || !e2.f && a < 1) setTimeout("e2()", 50);
else {
if(e2.f){
echo(e2.o, e2.s);
e2.f = 0; setTimeout("e2()", 100);
} else e2.f = null;
}
};
keyDec = function(s1,s2){
var s = Fx.dec(key(s1,s2)).replace(/\t/g, "\n");
s = s.replace(/^\s*\n|\n$/g,"").split("\n");
return s;
};
listOverOut = function(s){
var o = Fid("tubeImg"), a = "http://i2.ytimg.com/vi/", b = "/default.jpg";
o.src = s != "" ? a + s + b : listAct == -1 ?
"http://nancyan.net/image/futari/n/nancyan_hazuki_hell3.jpg" : a + list(tubeData[album][listAct]).file + b;
};

tube_ini = function(data){
album = unescape(document.cookie).match(/tubeAlbum=(\d+)/) ? RegExp.$1 -0 : 0;
tubeData = [];
tubeAlbum = [];
var dat = keyDec(data, "youTubeData");
var no = -1,a,b = 0,max = 0;
for(var i = 0; i < dat.length; i++){
a = dat[i];
if(a.match(/^\s*$/)) continue;
if(a.match(/\s*\[(.+)\]/)){
no++;
tubeAlbum[no] = RegExp.$1;
tubeData[no] = [];
b = 0; continue;
}
tubeData[no][b] = a;
b++; max++;
}
max = "現在 : \x3cspan>" + tubeAlbum.length + "\x3c/span>アルバム / \x3cspan>" + max + "\x3c/span>曲";
echo("upDateMsg", max);
echo("al2TubeInfo", max);

var str = "", str2 = "",s;
for(var i = 0; i < tubeAlbum.length; i++){
s = "<li>\x3ca href='javascript:alEntry(" + i + ")'>\x3cspan> " + tubeData[i].length + "\x3c/span> : " + tubeAlbum[i] + "</li>";
if(i < 17) str += s; else str2 += s;
}
echo("albumList", "<ul>" + str + "</ul>");
echo("albumList2", "<ul>" + str2 + "</ul>");

listAct = -1;
listBef = -1;
nonList = true;
alEntry(album);
};

al2 = function(no){
var fg = Fid("albumDisp").style.display == "block";
opa("albumDisp", fg ? 1 : 0);
};

opa = function(obj, act){
Fid("tubeSc").className = "sleep";
var o1 = Fid("msgDisp").style;
var o2 = Fid("albumDisp").style;
if(act){
if(obj == "msgDisp") o2.display = "none";
else o1.display = "none";
} else {
if(obj == "msgDisp") o2.diplay = "none";
Fid(obj).style.display = "block";
}
Fid(obj).style.opacity = act ? 1.0 : 0;
opaA(obj,act);
};

opaA = function(obj, fg){
var o = Fid(obj).style;
var a = o.opacity -= fg ? 0.05 : -0.05;
o.opacity = a;
if(fg && a > 0 || !fg && a < 1) setTimeout("opaA('" + obj + "'," + fg + ")", 50);
else {
if(fg){
o.display = "none";
Fid("tubeSc").className = "act";
}
}
};
Lo.entry = function(data){
tubeAutoPlay = 1;
tubeActRepeat = false;
tubeListRepeat = false;
tubeActive = false;
tube_ini(data);
};
[/beforeExec]
[cssText]
a { text-decoration:none; }
a:link { color:steelblue; }
a:visited { color:#ff9; }
a:hover { color:#fff; }
a:active { color:magenta; }

html {
background:#000 url(http://nancyan.main.jp/image/futari/r/ringnote_black.jpg) repeat-y fixed -28px top;
color:#ccc; padding-left:34px;
}
html.new_page {
background:#000 url(http://nancyan.main.jp/image/futari/r/ringnote_black.jpg) repeat-y fixed -6px top;
padding-left:104px;
}
#headerDisp { margin:14px .5em 0px 1em; height:24px; }
#hederDisp a {
font:130%/1.0 "Times New Roman";
}
#albumInfo { font-size:90%; }
#showDisp { width:480px; float:left; }
#menuDisp { margin-left:480px; }
.new_page #menuDisp { margin-left:520px; }
#tubeDisp { width:480px; height:385px; overflow:hidden; }
#tubeSc, #msgDisp, #albumDisp {
position:absolute; top:38px; left:40px;
width:480px; height:360px; overflow:hidden;
background-color:#000;
}
.new_page #tubeSc, .new_page #msgDisp, .new_page #albumDisp {
left:110px;
}
#tubeSc.act { height:0px; }
#tubeSc.sleep { height:360px; }

#albumDisp { display:none; }
#albumDisp li span { display:inline-block; width:1em; text-align:right; }

ul { font-size:80%; color:#808080; line-height:1.4em; margin-top:6px; }
li { border-bottom:1px solid #000; border-top:1px solid #000; }
li:hover { color:gold; }
li a { color:steelblue; font-famly:"Times New Roman"; outline:none;
}
li.act {
list-style-image:url(files/listitem2.png);
color:gold; border-bottom:1px solid #808080; border-top:1px solid #808080;
background-color:#333;
}
li.act a, li.repeat a { color:yellow; }

li.repeat {
list-style-image:url(files/listitem.png);
border-bottom:1px solid #808080; border-top:1px solid #808080;
background-color:#333;
}
li.act a:hover, li.repeat a:hover { color:#fff; }
li.sleep { list-style-type:disc; }
li.sleep a:visited { color:#ff9 !important; }

.clear_left { clear:left;}
#upDateMsg { text-align:center; color:#ccc; font:90%/1.2 "Times New Roman"; margin-top:1.5em; }
#upDateMsg span, #al2TubeInfo span { color:yellow; }
#footerDisp { color:#808080; margin-top:2em; }
#footerDisp a { color:steelblue; }
#footerDisp a:hover { color:#ccc; }
#msgTop { margin-top:1em; color:#ccc; text-align:center; font-size:90%; }
#msgTop a { color:#ccc; }
#msgTop a:hover { color:#ff9; }
#errMsgDisp {
margin-top:2em; margin-bottom:3em; font-size:80%; line-height:1.5em;
}
a.al_2 { margin-left:12em; color:#ff9 !important; outline:none; font-family:"Times New Roman"; }
a.al_2 span { color:#fff; }
a.al_2:hover { color:#fff !important; }
a.al_2:active { color:gold !important; }
#tubeImg { width:120px; height:90px;border:2px solid #808080; }
#logoId { margin-right:1em; }
[/cssText]
[body]
<$$div id="headerDisp">
<$$a href="main.html?diary=172213" id="logoId">ふたりの youTube 1.2<$$/a>
<$$a href="main.html?diary=172231&page=174155">update<$$/a>
<$$a id="albumInfo" href="javascript:al2(-1)" class="al_2" title="アルバムの開閉をします">Futari no Album<$$/a>
<$$/div>

<$$div id="showDisp">
<$$div id="tubeDisp">
<$$div id="tubeExDisp"><$$/div>
<$$/div>
<$$/div>

<$$div id="menuDisp">
<$$div id="listDisp"><$$/div>
<$$/div>
<$$div class="clear_left"><$$/div>
<$$div id="errMsgDisp"><$$/div>

<$$div id="tubeSc"><$$/div>
<$$div id="msgDisp">
<$$div id="msgTop">正式版です。作業版は<$$a href="main.html?diary=172229">こちら<$$/a>です。<$$/div>
<$$div style="text-align:center; padding-top:1em; font-size:90%; line-height:1.3em; color:#ccc;">
<$$img src="http://nancyan.main.jp/image/futari/n/nancyan_hazuki_kuma2.jpg" alt="ふたり" /><$$br ><$$br /><$$br />
ふたりのお気に入りの動画を載せています。<$$br />
なんちゃんの環境(1024x600)に合わせて小さめにしました。
<$$/div>
<$$div id="upDateMsg"><$$/div>
<$$/div>

<$$div id="albumDisp" style="display:none">
<$$div id="albumList" style="width:50%; float:right;"><$$/div>
<$$div style="margin-right:50%; ">
<$$div style="text-align:center; margin-top:1em; margin-bottom:1em;">
<$$img id="tubeImg" src="MIHO/eclat/nancyan_hazuki_kuma2.jpg" alt="" /><$$br >
<$$div id="al2TubeInfo" style="margin-top:.5em; font-size:80%;"><$$/div>
<$$/div>
<$$div id="albumList2"><$$/div>
<$$/div>

<$$/div>
[/body]
[exec]
if(top == self) Ftag(document, "html")[0].className = "new_page";
document.title = "ふたりのyouTube 1.2";
if(Fx.codeNo == 172229){
echo("msgTop", "作業版です。正式版は\x3ca href='main.html?diary=172213'>こちら\x3c/a>です\x3ca href='main.html?diary=172225'>。\x3c/a>");
Fid("logoId").href = "main.html?diary=172229";
document.title = "更新作業版";
}
Fx.e("diary/2010/07/1279897207.html");
[/exec]
[/diary:172213]

■仕様書 2010 03/27 21:42 Wrote