💛 メモ帳

doc = document;
Fid = a => typeof(a) == "object" ? a : doc.getElementById(a);
Ftag = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByTagName(e[e.length - 1]);
Fcn = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByClassName(e[e.length - 1]);

codeOpen = () => {
let o = Fid(`piaPin`).style;
o.display = o.display == `block` ? `none` : `block`;
o = Fid(`piaCssDisp`).style;
o.display = o.display == `block` ? `none` : `block`;
};
entry = () =>{
let css = doc.createElement(`style`);
css.type = `text/css`;
css.innerHTML = Fid(`piaCssDisp`).textContent.
replace(/bg\-c/g, `background-color`).
replace(/\$1/g, `::after { border-bottom:3px solid`);
doc.body.append(css);
createPiano();
Ftag(`back_link`, `a`)[1].focus();
};
piaMouse0 = false;
piaMouse1 = false;
piaMode = [0, 0];
keyPre = "0";
isCode = false;
keyOct = [0, 0];
isSin = true;
piaInis = [0 , 1];
keyWidth = 40;
mainWide = o => {
const cl = doc.body.classList;
cl.toggle(`main-wide`);
setTimeout(() => {
cl.toggle(`menu-out`);
setTimeout(() => {
cl.toggle(`link-out`);
setTimeout(() => {
cl.toggle(`area-in`);
}, 1000);
}, 1000);
}, 500);
};
isAuto = [0,0];
autoPlayDat = [];
autoEnter0 = () => {
if(playDat0.length != 0){
pia(null, playDat0.shift(), 0);
} else {
clearInterval(autoTimer0);
isAuto[0] = false;
}
};
autoEnter1 = () => {
if(playDat1.length != 0){
pia(null, playDat1.shift(), 1);
} else {
clearInterval(autoTimer1);
isAuto[1] = false;
}
};

autoPlay = dp => {
isAuto[dp] = true;
if(dp){
playDat1 = Fid(`area1`).value.replace(/\s+$/, ``).split(` `);
autoTimer1 = setInterval(autoEnter1, 500);
} else {
playDat0 = Fid(`area0`).value.replace(/\s+$/, ``).split(` `);
autoTimer0 = setInterval(autoEnter0, 500);
}
};

parKeys = (dp, dir) => {
const par = Fid(`piaDisp` + dp);
const vol = Fid("ofs" + dp);
const obj = Fid("ofsKey" + (dir == 1 ? "R" : "L") + dp);
let w = Number(vol.textContent);
let cls = "biz";
if(w == 0 && dir == -1 || dir == 1 &&
par.scrollWidth - par.offsetWidth - Math.abs(par.scrollLeft) == 0){
cls = "lim";
} else {
w = !dir ? 0 : w + dir;
vol.textContent = w;
par.scrollLeft = 50 * 7 * w;
}
obj.classList.add(cls);
setTimeout(() => { obj.classList.remove(cls); }, 200);
};

moControl = (obj, dp) => {
dp ? piaMouse1 = !piaMouse1 : piaMouse0 = !piaMouse0;
obj.classList.toggle(`act`);
};
modeControl = (obj, no, dp) => {
Ftag(obj.parentNode, `span`)[piaMode[dp]].classList.remove(`use`);
obj.classList.add(`use`);
piaMode[dp] = no;
};

dualControl = (obj, no) => {
if(no == 0){
Fid(`plays0`).click(); Fid(`plays1`).click();
}
if(no == 2) {
keyPre = keyPre == "0" ? "1" : "0";
doc.body.classList.toggle("key-top");
}
if(no == 3){
let cl = obj.classList;
let ft = cl.contains("list-c0") ? "1" : "0";
cl.remove(`list-c0`, `list-c1`);
cl.add(`list-c${ft}`);
}
};

piaUp = e => {
e.style.backgroundColor = `#fff`;
};
areaEdit = (dp, no) => {
let obj = Fid(`area` + dp);
let val = obj.value;
switch(no){
case 0 : obj.value = ``; break;
case 1 : obj.value = val.replace(/[0-9\,]+ /, ``); break;
}
};

piaExec = no => {
const e = new Audio();
e.src = `http://nancyan.main.jp/music/1s/` + no + `.mp3`;
e.volume = piaVolume;
e.play();
};

areaAdd = (dp, no) => {
const ac = Fid(`area` + dp);
ac.value += no + ` `;
ac.scrollTop = ac.scrollHeight;
};

/* -- キーの処理のメイン -- */
pia = (obj, fg, dp) => {
if(fg == `_`) return;
let dat = [];
if(obj != null){
if(!fg && (dp && !piaMouse1 || !dp && !piaMouse0)) return;
const no = obj.getAttribute(`no`) - 0;
const m = piaMode[dp];
const e = n => n.includes(m);
dat.push(no);
if(m == 1) dat.push(no + 12);
if(m > 1){
dat.push(no + (e([5,10,11,12]) ? 3 : m == 6 ? 2 : m == 13 ? 5 : 4));
dat.push(no + (m == 7 ? 8 : (e([11,12]) ? 6 : 7 )));
}
if(m > 7 || m == 2){ dat.push(no + (m == 12 ? 9 : e([8,9,10,11,13]) ? 10 : 11)); }
areaAdd(dp, dat);
} else dat = fg.split(`,`);
const box = Ftag(`piaDisp` + dp, `span`);
for(let i = 0; i != dat.length; i++){
box[dat[i]].classList.add(`biz`);
piaExec(dat[i]);
setTimeout(() => { box[dat[i]].classList.remove(`biz`); }, 200);
}
};

/* -- PCのキーマップ -- */
doc.onkeydown = e => {
let a = e.keyCode;
if(a > 48 && 53 > a){
Fid(`ofsKey` + (a % 2 ? `L` : `R`) + ( a > 50 ? 1 : 0)).click();
return;
}
if(a == 32){
Fid(`preBtn`).click();
event.preventDefault();
return;
}
let no = { 87:1, 82:4, 84:6, 85:9, 73:11, 79:13, 64:16, 219:18, 65:0, 83:2, 68:3,
70:5, 71:7, 72:8, 74:10, 75:12, 76:14, 59:15, 58:17, 221:19 }[a];
if(no != undefined){
let ofs = Number(Fid("ofs" + keyPre).textContent) * 12;
Ftag(`piaDisp${keyPre}`, `span`)[no + ofs].click();
}
/* else alert(e.keyCode); */
};

piaOpen = () => {
piaCNT = 0;
parKeys(0, 0); parKeys(1, 0);
Fid(`webPia`).scrollIntoView();
setTimeout(() => {
window.scrollBy(0, -20);
setTimeout(() => {
if(piaVolume == 0){
piaVolume = 1;
parKeys(0, 1); parKeys(1, 1); parKeys(0, 1); parKeys(0, 1);
} else {
piaOpenLoop();
}
}, 900);
}, 700);
};
piaOpenLoop = () => {
const obj = Fid(`piaDisp0`);
Ftag(obj, "span")[piaCNT].click();
piaCNT++;
if(piaCNT > 14 ) obj.scrollLeft += 29;
if(piaCNT > 87){
for(let i = 87; i > -1; i--) Ftag(obj, "span")[i].click();
setTimeout(() => {
parKeys(0, 0); parKeys(0, 1); parKeys(0, 1); parKeys(0, 1);
parKeys(1, 0); parKeys(1, 1);
Fid("piaDisp1").scrollLeft = 50 * 7;
piaVolume = 1;
}, 4000);
} else {
setTimeout(() => { piaOpenLoop(); }, 200);
}
};

createPiano = () => {
let s0 = `\x3cspan`, s2 = `\x3c/span>`, s3 = `\x3cdiv`, s4 = `\x3c/div>`;
let dts = `${s3} id="piaInfo" onclick="mainWide(this)">${s4}
${s3} id="piaHeader">${s0}
class="box" onclick="dualControl(this, 0)">同時演奏${s2}\x3cinput
type="text" size="5" id="timeVal" value="250" />${s0}
class="box" onclick="dualControl(this, 1)">停　止${s2}${s0}
class="box" id="preBtn" onclick="dualControl(this, 2)">上操作(SP)${s2}
${s4}`;
for(let i = 0; i != 2; i++){
let s1 = `${s0} class="com`;
dts += `${s3} id="piaDispIni${i}" class="com-disp">
${s1}-st box" id="ofsKeyL${i}" onclick="parKeys(${i}, -1)">←(${2*i+1})${s2}
${s1}-tx box" id="ofs${i}">0${s2}
${s1}-st box" id="ofsKeyR${i}" onclick="parKeys(${i}, 1)">(${2*(i+1)})→${s2}
${s1}-st box" id="plays${i}" onclick="autoPlay(${i})">仮演奏${s2}
${s1}-st box" onclick="areaEdit(${i}, 0)">消去${s2}
${s1}-st box" onclick="areaEdit(${i}, 1)">戻す${s2}
${s1}-st box" onclick="moControl(this, ${i})">mo操作${s2}
${s1}-st box" onclick="areaAdd(${i}, '_')">休　符${s2}
${s4}${s3} id="piaDisp${i}" class="key-par">`;
let dt = ``;
let bk = [1,4,6,9,11];
for(let j = 0; j != 88; j++){
dt += `${s0} class="keys`;
if(j % 12 == 0) dt += ` off` + Math.floor(j / 12);
dt += (bk.includes(j % 12) ? ` bk` : ` wk`) + ` gp` + Math.floor((j + 9) / 12) +
`" onclick="pia(this, 1, ${i})"
onmouseover="pia(this, 0, ${i})" no="${j}">${s2}`;
}
dts += dt + `${s4}${s3} class="code-disp">`;
dt = "Def Uni M7 M m 9 aug 6 7 m7 m75 dim sus".split(` `);
for(let j = 0; j != 13; j++){
dts += `${s0}
class="box ${j > 7 ? 'lis1':(j > 2 ? 'lis0':(j > 0 ? 'lin':' use'))}"
onclick="modeControl(this, ${j > 2 ? j + 1 : j}, ${i})">${dt[j]}${s2}`;
if(j == 2){
dts += `${s0}
class="box list-c0" id="coList${i}"
onclick="dualControl(this, 3)">切替${s2}`;
}
}
dts += `${s4}${s4}`;
}
dts += `${s3} id="areaDisp">`;
for(let i = 0; i != 2; i++){
dts += `${s3} class="box-par">${s0}
class="box" onclick="areaEdit(${i}, 0)">消去${s2}${s0}
class="box" onclick="areaEdit(${i}, 1)">戻す${s2}
${s4}
\x3ctextarea id="area${i}" class="area">\x3c/textarea>`;
}
dts += `${s4}${s3} id="piaFooter">　構築に使用したCSSとJavaScriptのソースコードは\x3ca href="javascript:codeOpen()">ここをクリック\x3c/a>すると表示されます・ページのソースは文字参照されていたり改行タグが入っていて読みにくいと思います。${s4}`;
const obj = Fid(`webPia`);
obj.classList.add(`loaded`, `biz`);
obj.innerHTML = dts;
setTimeout(() => {
obj.classList.remove(`biz`);
setTimeout(() => {
Fid("piaInfo").click();
setTimeout(() => { piaOpen(); }, 3000);
}, 2500);
}, 2000);
};
entry();

#piaPin, #webPia br, .in-code br { display:none; }
.entry_body span { display:inline-block; cursor:pointer; }
.in-code {
white-space:pre-wrap; font-family:"MS-Gothic", monospace;
font-size:110%; font-weight:bold; line-height:1.5em;
}
.box-par { padding:.5em; bg-c:#fff; }

/* -- 汎用ボタン -- */
.box {
color:#000; text-align:center; font-size:90%; line-height:1.8em;
border-color:#ccc; border-style:solid; border-width:1px;
border-radius:4px; box-shadow:3px 3px 3px #ccc;
margin:.2em .35em; bg-c:snow; transition:bg-c .3s, box-shadow .2s;
}
.box:hover {
color:#000; bg-c:#ffc; border-color:#88f;
box-shadow:4px 4px 4px #808080;
}
.box:active { box-shadow:0 0 3px #ccc; }
.box.biz { color:#600; bg-c:#ccf; }
.box.act { color:#fff; bg-c:orange; }
.box.use { color:#fff; bg-c:#00f; }
.box.lim { color:#000; bg-c:#c55; }

/* -- ヘッダーとフッター -- */
#piaHeader, #piaFooter {
padding:20px 1em .5em 60px; padding-top:15px;
margin-bottom:1rem; vertical-align:top;
background:url("/home/default/files/yosei_2.gif") no-repeat;
}
#piaHeader .box { width:7em; line-height:2em; }
#piaHeader input {
vertical-align:middle; font-size:1rem;
line-height:1.8em; box-shadow:2px 2px 2px #ccc inset;
}

/* -- キーボードの上のボタン -- */
.com-disp { margin-bottom:.5em; }
.com {
margin-right:.5em;
border:1px solid #ccc; border-radius:3px;
box-shadow:3px 3px 3px #b8b8b8;
}
.com-bg0 { bg-c:#eee; }
.com-bg1 { bg-c:#eee; }
.box.com-cr { border-radius:50%; width:1.8em; }
.box.com-tx { width:2.4em; box-shadow:2px 2px 2px #ccc inset; }
.box.com-st { padding:0 .5em; }

/* -- キーボード --*/
.key-par {
position:relative; margin-bottom:.5em;
white-space:nowrap; overflow-x:auto;
box-shadow:0 -3px 3px #eee, -3px -3px 3px #eee, 3px -3px 3px #eee;
-ms-overflow-style:none; /* IE, Edge 対応 */
scrollbar-width:none; /* fireFox 対応 */
behavior:smooth; scroll-behavior:smooth;
border-top:3px solid silver;
padding-top:6px;
transition:transform 1s, font-size 1s;
}
.key-par::-webkit-scrollbar { display:none; /* Chrome, Safari 対応 */ }
.key-top #piaDisp1 { border-top:3px solid #00f; }
/* oiaDisp1 { border-top:3px solid #00f; } */
body:not(.key-top) #piaDisp0 { border-top:3px solid orange; }

/* -- 鍵盤 -- */
.keys {
font-size:80%; line-height:1.2em;
border-radius: 0 0 4px 4px;
padding-bottom:.2em; text-align:center;
transition:bg-c .2s, box-shadow .2s, border .3s;
}

/* -- 白鍵 -- */
.wk {
color:#000; bg-c:#fff; padding-top:10em;
width:50px; border:1px solid #b8b8b8;
box-shadow:0px 3px 3px #ccc;
margin-bottom:6px;
}

/* -- 黒鍵 -- */
.bk {
position:absolute; color:#fff; bg-c:#300;
height:7.5em; width:30px;
box-shadow:3px 3px 3px #808080;
transform:translateX(-50%);
}
.wk::after { text-align:center; content:attr(no); }
.wk::after { width:34px; display:inline-block; }
.wk.gp0$1 #666; } .wk.gp1$1 #f00; } .wk.gp2$1 #0f0; } .wk.gp3$1 #00f; } .wk.gp4$1 orange; }
.wk.gp5$1 yellow; } .wk.gp6$1 #888; } .wk.gp7$1 #888; } .wk.gp8$1 #888; }
.keys.wk:hover { bg-c:#ffe; }
.keys.bk:hover { bg-c:#666; }
.keys.wk.biz { bg-c:#ccf; border:1px solid #eee; box-shadow:0px 2px 2px #eee inset; }
.keys.bk.biz { bg-c:#933; box-shadow:1px 1px 1px #333; }
#webPia.loaded #piaDisp { transform:scale(1); }

/* -- キーボードの下のボタン -- */
.code-disp { margin-bottom:2em; }
.code-disp .box {
width:10%; margin:.2em 0;
transform:scale(.95,1);
transition:transform .3s background-color .3s;
}
.list-c0 ~ .box.lis1, .list-c1 ~ .box.lis0 {
display:none;
transform:scale(0);
}

/* -- データエリア -- */
#areaDisp {
position:fixed; top:0; left:0;
width:20vw; height:80vh;
z-index:10; overflow-y:auto;
transform:scale(0); padding:1em;
behavior:smooth; scroll-behavior:smooth;
transition:transform 1s, font-size 1s;
}
body.area-in #areaDisp { transform:scale(1); }
.area {
display:block; padding:0 3px; margin:.5em 0;
line-height:1.4em; width:100%; height:8.4em;
word-break:normal; bg-c:#efefff;
behavior:smooth; scroll-behavior:smooth;
}
#areaDisp .box { padding:0 .5em;
}
/* -- 領域拡大 -- */
body.main-wide #main { margin-right:1.5rem; }
.comment_title { right:-18vw; }
body.link-out .cp-load { right:-18vw; }
body.menu-out #menu, body.menu-out #header { left:-20vw; }
body.link-out #back_link a:not([target]) {
transform:scale(.3) rotate(720deg);
top:-10rem;
}
body.main-wide #back_link a[target] {
top:calc(100vh - 5.5rem);
right:80vw; width:5rem; height:5rem;
}
body.main-wide #back_link a[target]::before { display:none; }
#piaInfo {
position:fixed; top:17vw; right:1rem;
width:15vw; height:15vw;
border:1px solid #ccc; border-radius:50%;
box-shadow:0 0 4px #808080 inset; bg-c:#fff;
background-image:url("/home/default/files/yosei_0.gif");
background-position:center center;
background-repeat:no-repeat; cursor:pointer;
transition:transform .5s, width .5s, height .5s, top .5s, right .5s, bg-c .5s;
}
body.main-wide #piaInfo {
top:calc(100vh - 5.5rem); right:calc(80vw + 5.5rem);
width:5rem; height:5rem;
}
#piaInfo:hover { bg-c:#ffc; transform:rotate(360deg); }