IDpoem
1 s1poem index

「4＞6:即時関数への想い;
＞10:くじけそうになったとき;
＞14:関数式に見えない関数式;
＞18:時にはシンプル・イズ・ベスト;
＞22:文字の復元;
＞26:A;
＞30:関数に名前;
＞34:A;
＞38:A;
＞42:A;
＞46:ポエムの部屋;
＞50:A;
＞54:部屋の拘り;
＞58:A;
＞62:深い想い入れ;
＞66:A;
＞70:働き者のボタン;
＞74:A;
＞78:処理の過程;
＞82:A;
＞86:A;
＞90:A;
＞94:文字数制限;
＞98:A;
＞102:ソースの分かる人;-」
1 s1リンク一覧

「4＞7:処理の始まりは即時関数;
＞11:新しい仕様;
＞15:アロー関数;
＞19:遅延処理;
＞23:テンプレートリテラル;
＞27:クラスの統一と効率向上;
＞31:フレームに跨った背景画像;
＞35:テスト;
＞39:設定;
＞43:エントリーの考察;
＞47:ページの入り口;
＞51:足跡・訪問記録;
＞55:プロフィール;
＞59:アニメーションの考察;
＞63:文字数制限が近くて;
＞67:A;
＞71:A;
＞75:A;
＞79:コーティングの違い;
＞83:A;
＞87:A;
＞91:A;
＞95:改行問題を考える;
＞99:A;
＞189:nth-childとnth-of-type;

<a href="/home/poem/?noframe" target="_blank">poem@noframe</a>
<a href="/home/poem/menu.css" target="_blank">menu.css</a>
<a href="/cgi-bin/bbs.cgi?oid=poem;n=100" target="main_poem">bbs..cgi</a>
-」
1表示モード

「4＞8:サイト構築のフロー;
＞12:文字置換詳細;
＞16:toMove関数の考察;
＞20:topsコマンド一覧;
＞24:リンク;
＞28:表示に関するメモ;
＞32:カテゴリ表示と戻るボタン;
＞36:imgDec（画像短縮）の定義;
＞40:全画面ボタンの考察;
＞44:A;
＞48:A;
＞52:toMoveScrollの戻る・進むボタン;
＞56:A;
＞60:A;
＞64:A;
＞68:topsコマンドの考察;
＞72:A;
＞76:A;
＞80:A;
＞84:A;
＞88:A;
＞92:A;
＞96:A;
＞100:ポエムの日記帳 1;
＞104:ポエムの日記帳 2;
＞108:ポエムの日記帳 3;
＞112:A;
＞116:A;
＞120:A;
＞124:A;
＞128:A;
＞132:A;
＞136:A;
＞140:A;
＞144:A;
＞148:A;
＞152:A;
＞156:A;
＞160:A;
＞164:A;
＞168:A;
＞172:A;
＞176:A;
＞180:A;
＞184:A;
＞188:A;
＞192:A;-」
1 9関数一覧

「4＞13:Fid, Ftag, Fce, Fap, Fev, res, enc, isMobile, Fw, fullDec, evalDec, xhr;
＞17:echo;
＞21:counter, echoCounter, funcEntry;
＞25:即時関数, menu.html, main.html;
＞29:viewPortSet, createFavico;
＞33:ctEntry, meEntry;
＞37:onlyOneEntry, createMenuContent;
＞41:vChange, v1Chang, menuMaskEntry, frmCtrlEntry, moveScrollTo;
＞45:toMove, buttonCreate;
＞49:toMoveScroll.e;
＞53:indexDec, topIni, pageEntry;
＞57:textDec, imgDec;
＞61:jsRep, sourceDec;
＞65:getCounter, tops, ones;
＞69:profileEntry;
＞73:topDispCreate, profileEntry_toMove;
＞77:profileEditorEntry, trRows, profileEditor_size, profileEditor_move, profileEditor_cnt;
＞81:profileEditor_rep;
＞85:createMenu_cDisp, createMenu_defButton;
＞89:createCode, codeColorRep;
＞93:Fgl, Fco;
＞97:toMoveScroll.ef;
＞101:createStyleRule;
＞105:profileMainContent;
＞109:.sub-cs;
＞113:bbsEntry;
＞117:footprintEntry, fpRep;
＞121:moveDec;
＞125:getLog, logs, userSource, usView;
＞129:fpMenuCreate;
＞133:userDat1;
＞137:userDat2;
＞141:daysRep;
＞145:A;
＞149:A;
＞153:addCSS;
＞157:formEditEntry;
＞161:A;
＞165:linksEditEntry;
＞169:A;
＞173:mainEntry;
＞177:A;
＞181:loginEntry;
＞185:A;
＞189:nth-childとnth-of-type;-」
2即時関数への想い

「-0さようなら即時関数　もう使わない記念に
どんどん functionという言葉が消えてゆく
数年もコードを弄っていないなら　なぁにこれ？
だって　とても関数と思えないんだもの

*

フレームは悪いことばかりじゃないわ
いくらでも使い易く出来るもの
変更できなかった編集ページも出来るもの
入力フォームが可愛いと嬉しくなるじゃない
そうすると幾らでも作れるものなの

*

ファビコンもそうね
いつものアイコンが出ていると
あ、改造されているって安心する
そう、気持ちが大切なんだよね

*

エントリの自動振り分けは簡単よ
知恵を絞れば何でもできるんだから
それにしても　新しい仕様が増えてきて
嬉しくて　悲鳴があがりそう

-」
3処理の始まりは即時関数

＞{w.tops(7,11)}(コラムの最初の２件)

「2img(6)(1)　フレームを使わないサイトと、フレームを使わなきゃならないサイトは趣が異なるよね。もうフレームセットなんて時代遅れなんだけど、まだまだ幾らでも奥深いの。ここのポエムの部屋は普通にフレーム表示させてる。そして全てメニューフレームからコントロールさせてるの。

　フックの取り付け先は「top.frams[1]」ではいけないの。参照先は同じにはなるけれどあくまで要素に対しての処理だから。-」

「0img(0)(1)　ファビコンはエクラでの共通アイコンがいいわね。これがあるとエラーが出ていないと直ぐにわかるのよ。それとね、更新はバックアップを持たない一発勝負だから、プログラムミスで全てが消える要素もあるのよ。だからコードの変更時にはサイトをもう一つ表示して万が一の復旧に備えてるわ。ファビコンの色が変わるから区別出来て便利なの。

　コードの方へ目を向けると、これ、サイトを開いたときに一番最初に実行されるものなの。それも一回だけなの。だから関数名を付けない（無名関数）で実行させているわ。
　フレームセットは属性にframeborderやborderがあるけれど、これ、CSSで何とかしようとしても無理なの。ここはJavaScriptで変更しているわ。そして属性のcolsを同じ値に指定してリフレッシュさせて反映させてる。こうすればフレームの間の僅かな隙間が無くなるはずよ。

　同じようにフレームの横幅が可変になっているからそれも固定させてる。値の変更は関数で出来るからいいのよ。

-」

「0　この関数を実行すると、メインフレームに読み込まれたページの全てをコントロール出来るわ。それが処理の横取りなの。そして全てのページは最初にpageEntryという関数を実行するのよ。でも、その関数はまだ定義されていないからプロフィールのページから取得するの。

　top.isProのフラグで処理を振り分けてるの。メニューページがリロードされたときの処理もあるわ。リロードされるとtopのフレームに定義されたイベント先の関数が消滅するから、この位置で定義しているのね。

-」
　追記：システムに関わる変数を追加しました。＞53:profileEntry;で処理の振り分けに用いています。
『 top.isReload = true;』
4サイト構築のフロー

「Step:1 サイトへのアクセス」

＞img:/home/default/files/yukikko2b.gif(0)
＞:/home/poem/?no=8 このアドレス

＞{w.Fgl(0, 'poem-ani')}
上のコードはトップのクラスを入れ替えるものだけど、<i>w.Fgl(0, "poem-ani")</i>のようにダブルクォートじゃ上手くいかないの。それは、<i>href="javascript:</i>と既に使っているから必ずシングルにする必要があるわ。
1 5関数のページ内移動リンク

※基本関数・エコバージョン
「＞13:Fid, Ftag, Fce, Fap, Fev, res, enc, isMobile, Fw;
＞13:fullDec, evalDec, xhr;
＞17:echo; ＞21:counter, echoCounter, funcEntry;
＞25:即時関数, menu.html:即時関数, main.html:即時関数;」

「＞29:viewPortSet;
＞29:createFavicon;」

※インクルード関数
■ページのエントリ関数
「＞69:profileEntry;
＞77:profileEditorEntry;
＞73:profileEntry_toMove;
＞157:formEditEntry; ＞165:linksEditEntry; ＞173:mainEntry; ＞181:loginEntry;
＞113:bbsEntry; ＞117:footprintEntry;」

■文字置換関数
「＞121:moveDec;
＞57:textDec;
＞61:sourceDec;
＞61:jsRep;
＞25:indexDec;」

■ボタンエントリ関数
「＞41:vChange, menuMaskEnry, frmCtrlEntry, moveScrollTo;
＞37:onlyOneEntry;
＞33:ctEntry, meEntry;
＞77:trRows, profileEditor_size;
＞77:profileEditor_move, profileEditor_cnt;」

■要素生成
「＞65:tops;
＞37:createMenuContent;
＞45:buttonCreate;
＞73:topDispCreate;
＞85:createMenu_cDisp, createMenu_defButton;
＞81:profileEditor_rep;」

■領域スクロール関数
「＞45:toMove; ＞49:toMoveScroll, toMoveScroll.e;
＞53:pageEntry;」

■エイリアス関数
「＞93:Fgl;」

■装飾関係関数
「＞89:createCode, codeColorRep;
＞65:getCounter;」

※適用保留
「＞101:createStyleRule;
＞153:addCSS;」
2くじけそうになったとき

「0辛いとき　悲しいとき　行き詰ったとき
もっと辛かった時のこと　思い出そう
その思い出の　ひとつひとつが　財産なんだ
なんだって乗り切れるよ　そう思いながら

*

目が掠れて見えないの　小さな文字は辛いの
身体が重いし　肩も凝ってる　辛いね
でも　明日の朝は治ってる　そう思いながら
今日の一日を　終えることにしよう

」
3新しい仕様
「0img(0)(1)このポエムの部屋は基本関数から構築し直しているの。勿論、今まで作ってきた関数をベースにしているけれど、新しい仕様も試したくなったのよ。古い関数が嫌いなわけじゃない、でも、新しい関数も使わなきゃ時代に取り残されちゃう。

　まずは、「let」と「const」。別に「var」が嫌いになった訳じゃないの。これ、仕様が異なるのよ。今まではローカルとグローバルのような関係で関数スコープだったの、変数などは。そこには{}のブロック単位なんて存在しなかったのよ。それが新しいのは、そのブロック単位なのよ。

　だからね、グローバルの位置にコードを書いても{}で括ると、そこの変数はグローバルにならないのよ。その位置の内側だけ有効なの。最初に一度しか実行しないルーチンでも変数がグローバルにならないようにする為だけに「(function(){})()とか(function(){}())」のようにしていたわ。

　もう括弧はどちらに付けるのが良いかなんて有り得なくなるわ。だから、ありがとう即時関数、さようなら即時関数と言いたい。それと「var」も新しく作るコードには使わない。全て「let」と「const」を割り当てる。でも、今までのコードはそのままの「var」にして置くわ。消えると寂しいもの。
-」
＞13 ※Fid, Ftag, Fce, Fap, Fw関数へ。
＞37 ※funcEntry関数へ
＞45 ※pageEntry関数へ。
4文字置換詳細

「2img(6)(1)文字置換を施しているからタグは使えます。
でも、参照文字は文字数を多く使うし芸がないよね。
『1■キャッシュ更新-』
＞:links.css ＞:menu.css ＞:profile.css
自由に置換できるから纏めてみました。
かなり便利です。
-」
『1文字列置換ルーチン参照一覧-』 ＞57:textDec; menu.css
「0『1■レイアウト装飾 word-n div要素-』
【0】２列マルチカラム 枠影あり -0:枠影なし
【1】簡易ソースの表示（レベル１）
【2】左上に「雪っ子」回り込み
【3】左に「右向き天使」 文字小さ目
【4】３列マルチカラム 枠影あり -4:枠影なし
【5】
【6】
【7】
【8】
【9】
『1■文字装飾 word-s span要素-』
【0】赤色のアンダーライン
【1】太字
【2】
【3】
【4】
【5】
【6】
【7】
【8】
【9】-」

「3・「数値......ハイフン」と『数値......ハイフン』で形式が同じで対象文字が異なる。
・ブラウザのサイズで1000px以上のみマルチカラム。
-」

＞69:プロフィールエントリ;
＞73:拡張部分のエントリ;
5 17// system function
Fid = a => typeof(a) == "object" ? a : doc.getElementById(a);
Ftag = (...e) => (e.length > 1 ? Fid(e[0]) : doc).getElementsByTagName(e[e.length - 1]);
Fce = a => doc.createElement(a);
Fap = (a,b) => Fid(a).appendChild(b);
Fev = (o,a,b) => o.addEventListener(a,b,false);

res = o => o.responseText.replace(/\r?\n/g, "\t");
enc = s => encodeURIComponent(s);
isMobile = navigator.userAgent.includes("Mobile");

Fw = fg => {
if(top.isNoframe) fg = 0;
win = fg ? (fg == -1 ? top.window : top["main_poem"]) : window;
doc = win.document;
};

fullDec = s => s.replace(/\x26quot;/g, "\"").
replace(/\x26amp;/g, "\x26").replace(/\x26lt;/g, "<").
replace(/\x26gt;/g, ">").replace(/\x26#39;/g, "'");

evalDec = s => fullDec(s).replace(/>>\d+:?/g, "").
replace(/>>([a-z])/g, "$1").replace(/\x3cbr\s?\/?>/gi, "\n");

xhr = (d1,d2,d3) => {
let a = new XMLHttpRequest();
a.onreadystatechange = () => {
if(a.readyState == 4 && a.status == 200){
d3(a.responseText.replace(/\r?\n/g, "\t"));
}
};
let mode = d1.match(/^[a-z0-9_]+$/) ? "post" : "get";
a.open(mode, mode == "get" ? d1.replace(/#.*$/, "") : "/cgi-bin/" + d1 + ".cgi", true);
a.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
a.send(d2);
};
2関数式に見えない関数式

「-0functionの言葉がない関数なんて
気が抜けたビールみたい
returnの言葉がない戻りあり関数なんて
味付けを忘れた野菜炒めみたい

引数がひとつの場合は括弧が要らないとか
一行で済むコードは｛｝が要らないとか
どんどんソースコードが短くなるわ
嬉しくて涙が出るくらい　かも

-」
3アロー関数

「0＞img:/home/default/files/yosei_1.gif(1)　このサイトで初めて使い始めたの、その『0アロー関数-』って。もう、慣れの問題だわ。慣れればきっと違和感なく使っているわ。それとね、コードが短くなるのってとても良いわ。

　これらの関数を見ただけで分かるけど、『0document.getElementById-』や『0getElementsByTagName-』がコードの中に出ただけで身構えするのに、一行に複数あったり、ルーチンの中に幾つもあったら、きっと見るのも嫌になるわ。

　だから、その関数が出た頃（18年前？）、その頃は『0document.all-』が当たり前の頃で短く済んでいたのね。『0tags-』というメソッドもあったし。そう、その頃から既にこれらの関数を使っていたわ。
　この部屋での定義は他の部屋での定義と異なるの。関数呼び出しの引数の数が異なるから注意が必要ね。

　そこは、『0Fw-』という関数で処理の対象を振り分けているの。新たな試みよ。タイマーを使った遅延処理や非同期処理で、フレームを跨って同時操作しない限り大丈夫だから。

-」
4toMove関数の考察

「2img(6)(1)　移動関数の仕様を決めます。



-」
5 13 21// system function
echo = (...a) => {
let n = a.length;
let o = typeof(a[0]) == "string" ? Fid(a[0]) : a[0];
if(o.tagName == "SELECT"){
if(n == 1) return o.options[o.selectedIndex].value;
else {
if(typeof(a[1]) == "string"){
if(a[1] != ""){
for(let i = o.options.length - 1; i >= 0; i--){
if(o.options[i].value == a[1]) break;
}
o.selectedIndex = i > 0 ? i : 0;
} else o.selectedIndex = 0;
} else o.selectedIndex = a[1];
}
} else {
type = o.tagName == "TEXTAREA" || o.tagName == "INPUT" ? "value" : "innerHTML";
if(n == 1) return o[type];
else {
if(n == 2){
let s = a[1];
if(typeof(s) == "object") s = s.join("");
o[type] = (s + "").replace(/\t/g, "\n");
} else {
let s = o[type];
if(a[2] == "add") o[type] = s + a[1];
if(a[2] == "math") o[type] = Number(s) + a[1];
}
}
}
return o;
};
2時にはシンプル・イズ・ベスト

「-0関数を作ってゆくと　機能が増えてゆく
あれもいいなぁ　とか　これも捨てがたい
結局　使わない機能が満載になるの
余計な飾りは要らない　あれば便利なだけだから

関数のルーチンで引数の置換は便利
でも　それに頼ると引数側が怠ける
偶に使うものなんて　コールするときに呼んで
便利な分だけ使わない処理が一杯あるのよ

-」
3遅延処理

普通に関数実行は駄目で遅延処理を通すと大丈夫。
「0＞101:profileEditorEntry関数;の中の話。
「1win.toMoveScroll.e(pageObj, 700, trRows);
setTimeout(function(){win.toMoveScroll.e(pageObj, 1000, trRows);}, 1500);1」
　上のページ内移動リンクをクリックすると101番の位置にスクロールすると思うし、その位置からまたここへ戻るにはページの右側に並んでいるボタンの「戻る」の方をクリックすれば出来るの。でもね、ページ構築中の関数呼び出しは注意が必要なの。

　リンクをクリックして移動させる場合は、「既にページの構築が完了」した状態なの。そこでは要素の位置が確定するからちゃんと移動するわけ。でも、ページを読み込んだ後でCSSファイルを読み込むし、ほとんどの要素が置換されるから高さや幅が確定する前に移動関数を呼び出しても辛いの。

　CSSファイルはprofile.cssだからキャッシュを読み込むから、その完了のイベントを待つことをしなくともよいです。でも、置換などの処理の直後に移動関数の処理はきつい。かなりきつい。今は1500という数値で実行させているわ。つまり1.5秒の余裕を持たせているの。この値、少しずつ変化させてみたら720以下だと「移動位置」が正確にならないことが分かったの。

　730だとちゃんと指定の位置まで移動するの。これパソコンのスペックに依存するわ。私のぼろノートタブレットの値だから。他の環境も考えて1500にしてる。これだと大丈夫だと思う。

　ページの表示が、素の表示→CSSの適用→置換処理→移動処理→指定のテキストエリアのサイズ拡大とパラパラ漫画を見るように進んでいくから、「あ、ちゃんと関数が処理されている」って安心する。急ぐことが一番いいとはいえないよね。少し時間に余裕を持つのもいいわ。

-」
　
4topsコマンド一覧

「2img(6)(1)　topsコマンドを纏めます。

■トピックスコマンド ＞65:tops;
＞{w.tops(29,30,31,32)}(最初は29番メニューの即時関数と読み込みJSの即時関数)
＞{w.tops(69,70,71,72)}(プロフィール・エントリの考察)
＞{w.tops(57,58,59,60)}(moveDecとtextDecの文字列置換の考察)
＞{w.tops(65,66,67,68)}(新たなコマンド・選択表示 tops)
＞{w.tops(33,34,35,36)}(ボタンエントリの考察)
＞{w.tops(49,50,51,52)}(ページ内スクロール関数toMoveScrollの考察)
-」
5 17 25// system function
counter = s => {
return s.replace(/\r?\n/g, " ").replace(/"/g, " ").
replace(/'/g, " ").replace(/<|>/g, " ").
replace(/\x26;/g, " ").length
};

echoCounter = s => {
s = s.replace(/\x3cbr ?\/?>/gi, " ");
return counter(fullDec(s));
};

funcEntry = () => {
Fw(1);
let a = Ftag("td");
let msg = ["","","",""], c, dat, i, no;
for(i = 0; i < a.length; i++){
dat = echo(a[i]);
c = "";
no = i + 1;
if(dat.includes("include\x20function")){
try { eval(evalDec(dat)); }
catch(e) { c = " class=\"err\""; }
}
if(c == ""){
if(dat == "*") c = " class=\"unused\"";
else {
let n = Math.floor(echoCounter(dat) / 100);
c = " class=\"used-" + (n != 19 ? Math.floor(n / 6) : 4) + "\"";
}
}

msg[i % 4] += `\x3ca href=\"javascript:toMove(${no})\" ${c}>${no}\x3c/a>`;
}
// createStyleRule();
Fw(-1); viewPortSet(1);
Fw(1); viewPortSet(1);
createFavicon();
if(isMobile){
frmCtrlEntry();
Fgl(0, "mobile");
}
createMenuContent(msg);
pageEntry();
};
2文字の復元

「-0掲示板やプロフィールのページってタグが使えない
何故って・・・文字が置換されているもの
じゃ、文字を復元させれば元通りになるの？
それってとっても簡単じゃないの

ページに表示されているコードも同じ
実行に支障ある文字列を取り除けば
素直に定義してくれるわ
コードは短くとも働き者なんだ

-」
3テンプレートリテラル

「0　文字置換ってほんの短いルーチンだけど働きは大きいわ。その置換処理ってほとんど「replace」という関数で処理するんだけど問題は正規表現だと思う。ここでは単体置換でとっても簡単だけど込み入った事をするには正規表現を完璧にマスターする必要があるわ。

　その正規表現もバッククォート（クォートの反対の向きの意味での名前で正式名は「バックティック」と呼ぶらしい）を用いた「テンプレートリテラル」とか何かと小難しい事が簡単に出来るようになるみたい。

　試しに＞57:moveDec;で使ってみたのよ。そうしたら格段にコーティングが楽になったの。こんな感じにとっても簡単に出来るのよ。下に一部を掲げます。

「1replace(/＞(\d+)(<| |$)/g, `${s1}'>$1\x3c/a>$2`).1」
　話を戻して文字置換のこと。evalDecは「＞」が置換対象になっているの。つまり、それがある意味コマンドとして置換されているってこと。上の方に移動リンクが出ているからそこで続きを話すわ。
-」
4リンク

「2img(6)(1)
<a href="/home/poem/?no=100" target="_blank">新規複製</a>

■検証リンク
　※<a href="/cgi-bin/bbs.cgi?oid=poem">掲示板</a>
　※<a href="/cgi-bin/footprint.cgi?oid=poem">足跡</a>
　※<a href="/home/poem/diary/">日記帳</a>
　※<a href="/home/poem/profile.html">プロフィール</a>
-」
5// system function
{
Fw(-1);
win.isReload = false;
let frm = Ftag("frame");
if(!win.isLoaded){
let obj = doc.body;
obj.setAttribute("frameborder", "0");
obj.border = "0"; obj.cols = "20%, *";

frm[0].noResize = true;
frm[1].noResize = true;
win.isLoaded = true;
}
frm[1].addEventListener("load", () =>
window.pageEntry ? pageEntry() : funcEntry(), false);

Fw(1);
if(top.isPro){
top.isReload = true;
win.location.reload();
} else win.location.replace("profile.html");
}


// menu.html
{
let js = document.createElement("script");
js.type = "text/javascript";
js.src = "links.css";
document.head.append(js);
}

//main.html
{
let ref = document.referrer;
if(self == top && ref != ""){
document.cookie = "ref=" + escape(ref) + "; path=/";
}
let c = "";
if(ref.includes("footprint")) c = "?no=51";
if(ref.includes("profile")) c = "?no=55";
if(self == top) location.replace("/home/poem/" + c);
}
2*
3 クラスの統一と効率向上

「0＞img:/home/default/files/yosei_1.gif(1)　仕様が曖昧なまま進めると色々なクラスが出来てしまう。きっと、進むたびに便利な方法を見出したりするからだろうね。でも、基本はシンプルにしなきゃ行き詰まってしまう。そうならないように「決め事」を箇条書きにしよう。



・ #header span.ct0 ～ span.ct3
・ #cDisp span.ct0 ～ span.ct3
・ table tr.c0 ～ tr.c3
・ #reDisp a.c0 ～ a.c3
・ body.ct0 tr:not(.c0)
・ body.ct0 tr:first-child
・ #menu.ct0 a:not(.c0)

-」
4*「表示に関するメモ」

メニューの直下に#vDispという領域があって中には３つのボタンがある。
それはfull,cate,oneという名前のもので順にv0,v1,v2のクラスを有する。
そらはvChange(n)というクリックイベントを持っていて0-2の引数を有する。
その値はtop.viewTypeの変数で保持する。

top.viewTypeと同じ引数のイベントは何もしない。
また、メニュのcDispとreDispにも影響を与えない。

full -> cateに変化した場合。
bodyのclassListにc0-c3の中でアクティブなものを与える。
(1) bodyのoffsetTopが変化するのでtop.numを履歴移動なしでtoMoveする。

full -> oneに変化した場合。
bodyのclassListにc4を与える。(1) の処理。

cate -> oneに変化した場合。
bodyのclassListでc0-c3を削除してc4を追加。(1) の処理。

cate -> fullに変化した場合。
bodyのclassListのc0-c3を削除。(1) の処理。

one -> fullに変化した場合。
bodyのclassListのc4を削除。(1) の処理。

one -> cateに変化した場合。
bodyのclassListのc4を削除(1) の処理。

これを見ると
let obj = body.classList;
for(let i = 0; i < 4; i++) obj.remove("c" + i);
このように一括して削除して、
typeは、0, 1, 2 なのだから、
if(type) obj.add("c" + (type - 1) ? 4 : top.num % 4));
toMove(top.num);

これでいいはず。

「Fw関数を用いらないで変数で参照する場合の考察」

テーブルがある領域のbody要素はbodyという変数。
これはFw(1) body = doc.bodyとして参照ポインタを保持してる。
menuのところはFid("menu")で求めればいいのか。
そこのところは
#vDisp, #cDisp, #reDispの三つの領域がある。
コレクションでないから参照変数にしておくのもいいかも。
5// include function
viewPortSet = fg => {
let a = Fid("viewPort");
let str = "width=" + (fg ? "device-width" : "980") + ", initial-scale=1";
if(!a){
let o = Fce("meta");
o.name = "viewport";
o.id = "viewPort";
o.content = str;
Fap(doc.head, o);
} else a.setAttribute("content", str);
};

createFavicon = () => {
Fw(-1);
win.isBackup = doc.referrer.includes("/poem/profile.html");
let ico = Fce("link"); ico.rel = "shortcut icon";
ico.href = `http://nancyan.main.jp/image/icon/favicon${ win.isBackup ? "1" : "2" }.ico`;
ico.type = "image/vnd.microsoft.icon";
doc.head.append(ico);
viewPortSet(1);
};

Ful = no => {
if(no == 0){
let obj = top.document;
let o = obj.documentElement;
if(!obj.fullscreenElement){
o.requestFullscreen();
} else {
if(obj.exitFullscreen) obj.exitFullscreen();
}
} else {
menu.requestFullscreen();

}
};
2関数に名前
「-0関数に名前を付けるときに








-」
3フレームに跨った背景画像

「0img(0)(1)　左上のところに「frameset」って斜めの青い帯があるよね。この状態は標準の「20%,80%」のフレームセットになっているの。それでね、左側の下には飛行機の画像があるのですが何か気が付きませんか？そう、その画像はメニューのページのじゃないの。

＞{w.Fgl(0, 'ani-fly', this)}(A11)＞{w.Fgl(1, 'main-fly', this)}(A21)＞{w.Fgl(2, 'main-fly', this)}(A31)

　上のボタンはその背景画像を移動するだけ（拡大縮小も）のとっても簡単なものです。トグルで動作するから違いが分かると思う。左の方はトップの「html要素」に対して行っているの。それ以外はフレームの「body要素」なのね。

＞{w.Fgl(0, 'poem-ani', this)}(B11)＞{w.Fgl(1, 'poem-ani', this)}(B21)＞{w.Fgl(2, 'poem-ani', this)}(B31)

　上のボタンは試せば分かるけれど「::beforeと::after」の疑似要素を用いているのよ。それぞれ2つサークルがでるけど「z-index」を変えています。

＞{w.frmCtrlEntry()}(C-1)　左のボタンは「PC上でスマホのチェック」のようなものを試したものなの。右側の無効なフレームセット内の領域は不可視になるわ。でもトップの疑似要素でその部分を穴埋めできそうね。

　アニメーションを手掛けたら奥行きは無限にあるわ。少しずつこの領域を増強しようと思う。-」

※参照関数はこちら ＞93:Fgl; ＞41:frmCtrlEntry; ＞121:moveDec;
※関数マイナーアップ ＞57:textDec;
「1 replace(/＞\{([^\}]+)\}\((.+?)(\-?\d?)\)/g,
'\x3cspan onclick="$1" class="cmd$3">$2\x3c/span>')-」
※コマンドボタンの回り込み指定を「ハイフン指定」で可能にする。
※ボタン一つじゃ右の余白が勿体ないもの。

「3トップ（フレーム定義ページ）のスタイルシートは自動的にメニューページと同じ「menu.css」が取り込まれます。これ、気が付いている人は少ないです。そこで「html」が衝突するので「html:not([lang])」と区別します。なお、モバイル仕様ではメニューフレームを非表示にしています。あまりにも無理があるから。-」
＞{w.Fgl(0, 'entry-ani', this)}(D11)
※B1の変化形。超単純化。領域の表示切替の変化に最適かも。

「0img(0)(1)　メニューのアニメーションの考察

＞{w.Fgl(1, 'd0', this)}(E11)＞{w.Fgl(1, 'd1', this)}(E21)
reDispを移動してみる。
-」

※＞35:続きはこちらへ;
4カテゴリ表示と戻るボタン

全カテゴリ表示でもカテゴリ表示でもページ右下には「Top」ボタンがある。
別にトップページへ戻るじゃなくて単なるページの最上部に移動するだけ。
そして、ここで履歴をリセットして初期値に戻してる。

カテゴリ表示とそうでないときには処理を振り分けた方がいいのか。
カテゴリ表示の時と全表示の時のメニューを変えなきゃ。

1 2 3 4 ・・・と連番でボタンを作る。
classNameに i % 4 と Math.floor(i / 48) を入れれば・・・
c0 p3, c2 p1 で振り分け出来る。

カテゴリの時にはメニューに c1 をセット。..c1 span.c1 で display:inline
全の時は c[n]を取り除いて、p1をセット .p1 .p1で表示
5 28 37 65// include function
ctEntry = (no, obj) => {
if(obj){
let o = body.classList;
if(no == top.ct){
o.remove("ct" + no);
top.ct = -1;
} else {
if(top.ct != -1) o.remove("ct" + top.ct);
o.add("ct" + no);
top.ct = no;
}
} else {
menu.classList.remove("ct" + top.cate);
menu.classList.add("ct" + no);
top.cate = no;
}
};

meEntry = no => {
switch (no) {
case 0 : body.classList.toggle("ones");

break;

case 1 :
let pos = top.topsPos;
top.topsPos = html.scrollTop || body.scrollTop;
body.classList.toggle("tops");
setTimeout(() => win.scrollTo({top:pos, behavior:"smooth"}), 700);
break;
case 2 : break;
}
};
2*
3テスト

＞:/home/default/?main.html?no=10,480,0,1;user=poem の「menu」から抜粋
「1/* --------- 最上位の背景画像 ----------- */

html:not([lang]) {
background: url("files/fly.jpg") no-repeat fixed left bottom,
url("files/fly_m.jpg") no-repeat fixed right top;
}
-」
「0　上のリンク（ESV3.0）を開いてもURIコマンドに不備があるみたいです。poemに指定しているけれどeclat-ioのままです。左のセレクタから選ぶといいわ。
　<a href="/home/default/main.html?no=10,480,0,1;user=poem" target="_blank">ここはESCシステムでメインページのみのもの</a>。これはどうだろう。ああ、これも同じです。適用されていないわね。うん、修正箇所が数か所ありそうです。

　前のバージョン(ESV2.0）はどうかな？<a href="/home/default/?main.html?no=2,118,3,336,0,1;user=poem;target=menu" target="_blank">/home/default/?main.html?no=2,118,3,336,0,1;user=poem;target=menu</a>うんこれはフレーム仕様のものね。

　上手くいっているけれどバージョンが古いから「poem」のセレクタが無いわ。それと、<a href="/home/default/main.html?no=2,118,3,336,0,1;user=poem;target=menu" target="_blank">ESCのみのもの</a>はどう？うん。いいみたい。

　話を戻して・・・跨った画像のこと。この画像、普通はフレーム間のところに少しの白い線が入るのですけれど気になるよね。そこで次のようしているの。
-」
＞25:bootFrameset関数より抜粋;
「1 let frm = Ftag("frame");
if(!win.isLoaded){
let obj = doc.body;
obj.setAttribute("frameborder", "0");
obj.border = "0"; obj.cols = "20%, *";

frm[0].noResize = true;
frm[1].noResize = true;
-」
4 69imgDec（画像短縮）の定義

「3　＞13:fullDec;という文字置換を施しているから「タグ」は使えます。でも画像のようによく使うものになると参照文字だらけになってしまいます。それで補う機能を設けました。たまに使う画像は通常の短縮指定。（ ＞57:textDec;）そして、頻繁に使うものは数値指定できる「短縮(B ＞57:imgDec;)」を定義しました。-」
※数値A：画像番号 0 ～ 追加指定は全て「poem」のスペースになります。
※数値B：レイアウト指定 0:標準 1:左回り込み 2:右回り込み

※短縮(A) 書式：img:画像のアドレス(数値B)
※短縮(B) 書式：img(数値A)(数値B)

「0img(0)(0) img(1)(0) img(2)(0) img(3)(0) img(4)(0) img(5)(0)
　　画像番号：0 - 5 妖精シリーズ 全てdefault

img(6)(0)
　　画像番号：6 default

img(7)(0)
　　画像番号：7 poem

img(8)(0)
　　画像番号：8 poem

img(9)(0)
　　画像番号：9 poem



-」
5 53 85// include function
onlyOneEntry = o => {
top.isOnlyOne = !top.isOnlyOne;
o.classList.toggle("only-one");
Fw(1); doc.body.classList.toggle("body-only-one");
};

createMenuContent = msg => {
Fw(0);

let o, obj = Fid("menu");
obj.classList.add("ct0");
/*
echo("menuLogo", !top.isExpand ? "frameset" : top.isInline ? "inline" : "noframe");
*/
/*
o = Fce("span"); o.id = "menuChange"; Fap(obj, o);
o = Fce("div"); o.id = "vDisp";
echo(o, "\x3cspan onclick=\"v1Change()\" class=\"v1\">種\x3c/span>" +
"\x3cspan onclick=\"vChange(2)\" class=\"v2\">単\x3c/span>" +
"\x3cspan class=\"col-used\" title=\"未使用\"" +
" onclick=\"Fgl(2, 'mask-used')\">未\x3c/span>"
);
Fap(obj, o);

*/
echo("reDisp", msg);
// createMenu_defButton(obj);

Fw(1);
};
2*
3設定

＞{w.Fgl(2, 'mask-used', this)}(A-1)未使用のレコードの非表示を切り替え
同時にメニュー欄の対応するボタンを色分け

＞{w.menuMaskEntry()}(B-1)メニューの#menu領域を表示・非表示


＞{w.frmCtrlEntry()}(C-1)フレームセットの操作
メニュー領域非表示・全体の領域を縮小

■スマホのキャッシュ更新
＞:/home/poem/profile.html
＞:/home/poem/menu.css
＞:/home/poem/profile.css
＞:/home/poem/footprint.css
＞:/home/poem/common.css
4 29全画面ボタンの考察

＞{w.Ful(0)}(A-1)
全フレームの全画面モード・トグル

＞{w.Ful(1)}(B-1)
メニューフレームの全画面モード・トグル
5// include function
vChange = key => {
return;
let i;
let a = menu.classList;
for(i = 0; i < 3; i++) i == key ? a.add("vc" + i) : a.remove("vc" + i);
let obj = body.classList;
for(i = 0; i < 5; i++) obj.remove("c" + i);
top.viewType = key;
if(key) obj.add("c" + ((key - 1) ? 4 : top.num % 4));
// toMove(top.num);
};

v1Change = () => {
// menu.classList.toggle("cate");
};

menuMaskEntry = () => {
menu.classList.toggle("hide");
};

frmCtrlEntry = () => {
let o = top.document.body;
o.cols = o.cols.includes("2") ? "0,980,*" : "20%,*";
};

moveScrollTo = no => {
switch (no) {
case 0 : isToTop = true;
if(!toMoveScroll.rect) toMoveScroll.e(0, 700, ""); break;
case 1 : if(!hisBackArray.length || toMoveScroll.rect) return;
isHisBack = true;
toMoveScroll.e(hisBackArray.pop(), 700, ""); break;
case 2 : if(!hisForArray.length || toMoveScroll.rect) return;
toMoveScroll.e(hisForArray.pop(), 700, ""); break;
}

};
2*
3エントリーの考察

※＞:/home/poem/profile.html
「2img(6)(1)　普通にサイトを開けばメインフレームにはメインページが表示されているよね。でも、このサイトは最初に必ずプロフィールのページを表示します。だって、そのページの記事の中身から関数を定義しているのですから。
　それでね、ここのプロフィールのページは生半可なものじゃないのです。全て表示するのには無理があるの。

『1スクロールして全てを読むと見るのも嫌になる-』
＞:/home/poem/?no=43

＞:/home/log2/main.html?job=bbs;user=nancyan;p=1;po=80
なんちゃんのエクラの研究室の掲示板の始まり WUBより
＞:/home/default/?ioView=800
美々の小部屋のなんちゃんの連絡帳 in 日記帳 1.0

＞:/home/js/?uri=/cgi-bin/bbs.cgi?oid=js;n=1;s=0

＞:/home/eclat-io/
-」
4*
5 33// include function
toMove = function(n){
if(body.classList.contains("tops")){
tops(n);
return;
}
let a = document.getElementById("reDisp").childNodes;
a[n - 1].classList.add("act");
a[top.num].classList.remove("act");

let num = n - 1;
let bef = top.num;
let obj = Ftag('tr');
let o = obj[num];
obj[bef].classList.remove("c4");
o.classList.add("c4");
top.num = num;
top.cNum[num % 4] = num;
if(!toMoveScroll.rect) toMoveScroll.e(o, 700, '');
};

buttonCreate = () => {
let btn = (a1,a2,a3) => {
let o = Fce("a"); o.id = a1; o.className = "def-button";
o.href = `javascript:${a3}`; echo(o, `\x3cspan>${a2}\x3c/span>`);
Fap(body, o);
};

btn("me1", "tops", "w.tops(null)");
btn("me2", "0", "document.body.classList.toggle('add');void(0)");

btn("toTop", "Top", "w.moveScrollTo(0)");
btn("hisBack", "0", "w.moveScrollTo(1)");
btn("hisFor", "0", "w.moveScrollTo(2)");
};
2ポエムの部屋
「0
機能満載の親のクッキー研究室
集まり過ぎて　まるで要塞
ポエムの部屋は綺麗に纏めるわ
シンプル・イズ・ベスト　そんな作りにしたい
でも　きっと　機能豊富になるのね

*

ああ　なんなのこの長さ
プロフィールの限度を超えてるわ
そう　超えてる　かなり　超えてる
きっと　自分でも収拾が出来ないくらい
広げすぎるかも　それが怖い

*

このサイトが　初めての訪問なら
思うことあっても　何も言わないで
ここ以外のものを　探し当てて
読んでからにして　出来るだけ読んで
そうすれば　何も言えなくなるから




-」
3ページの入り口
「0　この関数はメインフレームに表示される全てのページのエントリになるの。そう、最初に実行される処理のことよ。ここではグローバル変数の定義と初期化が行われるわ。ページが新しくなるもの当然必要よね。ここでは必要最小限に抑えてる。

　コードの中ほどに３つの関数が実行されているけれど、実際はこの関数のルーチンの一部で、コードが長くなると見通しが悪くなるからサブルーチンとしているの。その処理は、＞53; ＞61; ＞69; で個別に解説しているから省くけど便利なものよ。

　最後の処理はページ毎のエントリへの分岐処理ね。ここからはかなり広がるわ。

次は、関数内のサブルーチンの一つ、＞53 に進みます。

-」
4*
5 50 97// include function
toMoveScroll = new Object();
toMoveScroll.rect = false;
toMoveScroll.cnt = 0;
toMoveScroll.e = (move, time, call) => {
if(toMoveScroll.rect) return;

toMoveScroll.rect = true;
if(isToTop){
hisBackArray = []; hisForArray = [];
} else {
(isHisBack ? hisForArray : hisBackArray).push(html.scrollTop || body.scrollTop);
}
echo(Fid("hisBack").firstChild, hisBackArray.length);
echo(Fid("hisFor").firstChild, hisForArray.length);
isHisBack = false; isToTop = false;
let begin = new Date() - 0;
let maxMove = html.offsetHeight - html.clientHeight;
if(typeof(move) !== "number"){
let o = Fid(move);
move = o ? o.offsetTop + moveOffset: maxMove;
}
if(maxMove < move) move = maxMove;
let moveSize = Math.floor(win.pageYOffset - move);
if(Math.abs(moveSize) < 1000) time = 200;
if(Math.abs(moveSize) > 4000) time = 1000;
if(moveSize == 0){
body.classList.toggle("move" + (toMoveScroll.cnt % 2));
toMoveScroll.cnt += 1;
toMoveScroll.rect = false;
return;
}
body.classList.add("moves");
let timer = setInterval(function(){
let c = new Date() - begin;
if(c > time){
clearInterval(timer);
c = time;
}
win.scrollTo(0, move + moveSize * (1 - c / time));
if(c == time){
body.classList.remove("moves");
if(call != ""){
typeof(call) == "function" ? call() : toMoveScroll[call]();
}
toMoveScroll.rect = false;
}
}, 10);
};
2 49 51toMoveScrollの思い
「0自作の関数で想い入れのあるもの
このtoMoveScrollは五本の指に入るわ
私の手持ちの他にも、この関数がある
中身はバージョンがあるから少しずつ違うの

拡張ポイントが２か所あるから便利な筈よ
コードはそんなに難しいところはない筈よ
解らない人は何処が解らないか分からないかも
古い関数　偶には使ってあげなきゃ　可哀そう

-」
3足跡・訪問記録

「2img(9)(1)■このサイト足跡「ログ」のページ
　→ ＞::/cgi-bin/footprint.cgi?oid=poem

※普通の足跡のリンクです。
※足跡のページ内では「Ajax」を用いて領域が変化します。
※またこのページに戻るときには「戻る」を行ってください。
※この状態に「普通」に戻ります。-」

「0img(0)(1)　サイトを開いてすぐにこの「足跡・訪問記録」にスクロールしてきた方は、ほかのサイトの足跡のページでのリンクで訪問されているの。だから、改めて「いらっしゃいませ」。

　初めての訪問の方は＞40:ここ;でサイトの拘りを読んでほしい。読めばきっと何かを感じることが出来ると思う。

■「poem」の足跡からの検証
(A) ＞:/cgi-bin/footprint.cgi?oid=poem
※単独表示はほんの「一部」しか表示されません。唯一のリンクボタンから進むと、またここの領域に戻ってきます。
■足跡「poem」からのリンクの検証
(B) ＞:/cgi-bin/footprint.cgi?oid=default
(C) ＞:/cgi-bin/footprint.cgi?oid=yadokari
(D) ＞:/cgi-bin/footprint.cgi?oid=nancyan
-」

足跡のページの思い
「0img(5)(1)

-」
4 49toMoveScrollの戻る・進むボタン

現在、Ａの位置。
Ｂへのリンクを押す。
　toMoveScroll.eでの挙動。
　　Ａの位置を算出。hisBackArrayにpush。
　　hisBackの表示を更新。配列個数。
　Ｂへ移動。

hisBackのボタンを押す。現在の表示 1。
　isHisBackのフラグを立てる。
　hisBackArray.pop()の値でtoMoveScroll.eをコール。Ａの位置。
　toMoveScroll.eでの挙動。
　　コールされた位置を算出。hisForArrayにpush。
　　isHisBackのフラグをfalse。
　　Ａの位置に戻る。
　　両方のボタンの数値を更新。現在、back:0 for:1（Ｂの近くの位置）。

この状態で、hisForのボタンを押す。
　hisForAray.pop()で関数をコール。Ｂの近く。
　現在の位置、Ａの近くをhisBackArrayにpush。
　　Ｂの近くに移動。
　　最初の状態に戻る。
5 37 69// include function
indexDec = s => {
s = s.replace(/「(.+?)」/gm, '\x3cdiv class="box">$1\x3c/div>');

return s;
};

topIni = () => {
top.viewType = 0;
top.cate = 0;
top.ct = -1;
top.nType = 0;
top.num = 0;
top.cNum = [5,6,3,4];
top.topsAct = [];
top.topsClass = [];
top.topsPos = 0;
top.topsObj = [];
top.isMenuOne = true;
top.isOnlyOne = false;
top.onlyOneNum = 0;
};

pageEntry = () => {
Fw(0);
menu = Fid("menu");
Fw(1);
win.w = top.frames[0];
html = doc.documentElement;
body = doc.body;
if(isMobile){
body.classList.add("isMobile");
top.window.scrollTo(0,10);
}
hisBackArray = [];
hisForArray = [];
isHisBack = false;
isToTop = false;
moveOffset = 0;
pageNum = 0;
pageObj = null;

if(doc.URL.replace(/_([a-z])/g, function(e0,e1){
return e1.toUpperCase()}).match(/([a-zA-Z]+)\.(html|cgi)/)){
let func = RegExp.$1 + "Entry";
if(window[func]){
top.isPro = func == "profileEntry";
Fgl(2, "frame");
if(isMobile) Fgl(2, "mobile");
window[func]();
} else {
win.location.replace("profile.html");
}
}

buttonCreate();
};
2部屋の拘り

「0ポエムの部屋はGaiaXの移行サイト
1970/01/01の日記を引き継いでいる
有り得ない日付なの　でも事実なの
とっても思い入れがあるのよ

*

ここは更新するつもりはなかった
でも放置は可哀そう
どうするのって自分の心に聞いてみた
誰にも作れないものを作ろうって

*

日記は今ある領域を纏めることになるわ
サイトのメインはプロフィールにするわ
default@eclatの更新技術は使わない
ここだけの、唯一無二の更新をしよう




-」
3プロフィール

少しは綴っておきましょうか
「0img(5)(1)このサイトの「ID」は「poem」。そしてハンドルも「ポエム」。それなのにポエムを書かないポエムの小部屋なんて落ち着かないの。でも、どこに書けばいいの？日記はあれだし、掲示板はもっと無理。それでね、そうだ！このプロフィールのページに書こうって決めたの。

　このページ、自己紹介だけじゃすぐに飽きるし限界があるわ。でも、その中にポエムを混ぜたらきっと長続きすると思うの。それにねコラムも少しは書きたくなるじゃない。いろんなジャンルを取り混ぜた方が賑やかになるわ。

　うん、プロフィールのページって簡単だけど、ある意味使いにくいし、レイアウトが単純だけれどスタイルシートで何とかなるし、中々一言じゃ言い表すことが難しい感じです。それでね、ページ全てを自己紹介にするなんてすぐに終わって、あと何を綴ればいいんだろうって悩んじゃう。かといって、数行ずつ唯々長くするなんていつかは飽きるし読むのも苦痛になりそう。

　編集のページもそう、項目ごとの編集じゃなくて一気に出来て、最後には一番下の送信ボタンをポチのスタイルなんだもの、ページをスクロールするのが苦痛になりそうな感じ。そもそも、この編集ページはレイアウトの変更が出来ない仕様だもの。だから出来ないものは全て実現しよう。不便なところは快適になるように改造しよう。これを目標にします。

-」

今までの主なプロフィール
「0「3(A) ＞:/home/nancyan/profile.html
エクラの研究室時代のもの

(B) ＞:/home/yadokari/profile.html
ヤドカリの部屋時代のもの

(C) ＞:/home/default/profile.html
クッキー研究室時代のもの3」
　これらの「新規で開く指定」でのリンク。まだ読んだことが無い方は是非読んで欲しいの。読めば必ず何かを感じるから。うん、(C)のものはフレーム内でJavaScriptで構築しているから少し違うわ。いや、かなり違うわ。やはりこれらのものはちゃんとフレーム内で読んだ方がいいわ。

　うん、単独に表示されないとは限りないから対処も必要なの。それでプロフィールのページでも同じことをやっているわ。そうね、下にリンクを設けるから、そこのページの中のリンクから進めてみて。ここに戻ってくるから。仕組みは＞25:main.html;ここね。

(D) ＞:/home/poem/profile.html

　この各ページにある「メインページに戻る」っていうリンクからメインページに移行するよね。そうすると、そこでは「出来る限り意味のある表示」をしようとするの。フレームの場合でのトップのリファラーが取れない場合のリンクは、その前のメインページで「クッキー」でリファラーを保持しているわ。そこからサイトに移行して、トップからここに移動するの。

　それらの場合はフレーム定義ページ（トップページ）のファイル名にサーチが追加されている筈よ。ついでに最上部のリファラのところに、ここへの移動リンクがあるの。これって便利なのよ。

　今ではリファラーでの振り分けは移動だけだけど、処理も含めたらかなり濃密なことが出来そう。。そんな予感。
-」
4*
5 58// include function
textDec = s => {
s = s.replace(/「(\-?\d)(.+?)\1(」)/gm, '\x3cdiv class="word-n$1">$2\x3c/div>');
s = s.replace(/「(\-?\d)(.+?)\-(」)/gm, '\x3cdiv class="word-n$1">$2\x3c/div>');
s = s.replace(/『\-?(\d)(.+?)\-(』)/gm, "\x3cspan class=\"word-s$1\">$2\x3c/span>");

s = s.replace(/＞::([^\s\x3c]+)/g, '\x3ca href="$1" class="me">$1\x3c/a>').
replace(/＞:([^\s\x3c]+)/g,
'\x3ca href="$1" target="_blank">$1\x3csup>new\x3c/sup>\x3c/a>').
replace(/＞\{([^\}]+)\}\((.+?)(\-?\d?)\)/g,
'\x3cspan onclick="$1" class="cmd$3">$2\x3c/span>').
replace(/＞\{([^\}]+)\}/g, '\x3ca href="javascript:$1" class="cmd">$1\x3c/a>');
s = imgDec(s);
s = s.replace(/＞img:([a-zA-Z0-9_\.\/]+)\((\d)\)/g,
(e0,e1,e2) => '\x3cimg src="' + e1 + '" class="img-f' + e2 + '" />');
return s;
};

imgDec = s => {
let uri = ["yosei_0.gif", "yosei_1.gif", "yosei_2.gif", "yosei_2r.gif", "yosei_3.gif", "angel.gif", "yukikko2b.gif", "fly2_s.jpg", "yubin_02.jpg", "mouse_s.jpg"];
let dir = ["default", "poem"];
s = s.replace(/img\((\d+)\)(\(\d\))/g, (e, e1, e2) => {
return "＞img" + ":/home/" +
dir[Number(e1) > 6 ? 1 : 0] + "/files/" + uri[e1] + e2;
});
return s;
};
2 57 59moveDecとtextDecの文字列置換の思い
3 57 60トップのフレーム定義ページで動かすアニメーションの考察

＞{w.Fgl(0,'poem-ani')}(ani)

。
4 57*
5 89// include function
jsRep = s => {
s = s.replace(/\t([^\t]*)/g, "\x3cdiv class='js'>$1\x3c/div>").
replace(/("js">)([a-zA-Z0-9_\-]+)/g, "$1\x3cspan class='func'>$2\x3c/span>");

s = s.replace(/(\x3cdiv class='js)('>)(\/\*.*?\*\/)(\x3c\/div>)/g,
(e0,e1,e2,e3,e4) => {
let multi = e3.match(/\x3c\/div>/);
return e1 + (multi ? " multi" : "") + e2 + (multi ?
e3.replace(/class='js'/g, "class='js multi'") :
"\x3cspan class='com'>" + e3 + "\x3c/span>") + e4;});

s = s.replace(/ (\/\*.*?\*\/)/g, " \x3cspan class='com-s'>$1\x3c/span>").
replace(/(\x3cdiv class='js'>)(\/\*.*?\*\/)(\x3c\/div>)/g,(e0,e1,e2,e3) => {
return e2.match(/\x3c\/div>/) ? e0.replace(/'js'/g, "'js multi'") :
e1 + "\x3cspan class='com'>" + e2 + "\x3c\/span>" + e3;});

s = s.replace(/(class='js'>)(.*?)(\/\/ .*?)(\x3c\/div>)/g, (e0,e1,e2,e3,e4) => {
return e1 + e2 + "\x3cspan class='com" +
(e2 != "" ? "-s" : "") + "'>" + e3 + "\x3c/span>" + e4;});

return codeColorRep(s);
};

sourceDec = s => {
s = s.replace(/(\x2f\x2f\x20)(next|before|system|include)(\x20function)/g,
"\x3cdiv class=\"func-title\">$1$2$3\x3c/div>");
return s;
};
2深い想い入れ

「0自作の関数で想い入れのあるものはなあに
色々あるけれど　toMoveScrollは五本の指
私の手持ちの他にも　この関数を取り入れている
中身はバージョンがあるから少しずつ違うの

拡張ポイントが２か所あるから便利な筈よ
コードはそんなに難しいところはない筈よ
解らない人は何処が解らないか分からないかも
古い関数　偶には使ってあげなきゃ　可哀そう
-」
3文字数制限が近くて

「0　この関数を一言で表すと、「指定の時間を費やして所定の位置へ移動する」になるわね。うん、移動には scrollIntoView() という関数があるけれど瞬間に移動するわ。でもこれは滑らかにスクロールするのよ。移動には移動量を軸にするのと時間経過を軸にするのと二通りあるの。

　よくあるじゃない、2pxとかずつ増加させて指定な値になったらループを抜ける場合。これはね、移動量を win.scrollTo(0, move + moveSize * (1 - current / time)); こんな風に算出してるわ。

　移動の「戻る・進む」ボタンも備えてる。カウンタが入っているから便利な筈よ。

-」
4*
5 33// include function
getCounter = () => {
let s = echo(Ftag("textarea")[0]);
echo("count", s.length);
};

tops = (...key) => {
let obj = body.classList;
let isTops = key[0] != null;
let neTops = isTops && obj.contains("tops");
let pos = isTops ? 0 : top.topsPos;
if(!neTops) top.topsPos = html.scrollTop || body.scrollTop;
if(isTops){
let str = "", tr = Ftag("tr");
let main = Fid("mainDisp");
key.forEach(num => {
let a = tr[num - 1];
str += `\x3cdiv class="tops-disp ${a.className}">
${echo(a.lastChild).replace(/\x3c\/div>/,
e => echo(a.firstChild) +
'\x3cspan class="cls" onclick="w.topsClose(this)">x\x3c/span>' + e
)}
\x3c/div>`;
});
if(obj.contains("add")){
echo(main, str);
} else {
echo(main, str, "add");
pos = main.lastChild.offsetTop;
}
let o = main.querySelectorAll(".txt-st");
echo(Fid("me2").firstChild, o.length);
let s1 = [];
o.forEach(a => s1.push(echo(a)));
top.topsObj = s1;
}
if(!neTops) obj.toggle("tops");
setTimeout(() => win.scrollTo({top:pos, behavior:"smooth"}), 500);
};

ones = obj => {
if(body.classList.contains("tops")){
let main = Fid("mainDisp");
main.removeChild(obj.parentNode.parentNode);
echo(Fid("me2").firstChild, main.childNodes.length);
} else {
body.classList.toggle("ones");
obj.parentNode.parentNode.parentNode.classList.toggle("c4");
}
};
2*
3*
4 65topsコマンドの考察

■最初の処理
初期の状態 全表示 → R4 メモ帳のトップへスクロール
tops(65,66,67,68)の実行
現在のスクロール位置を取り出し → 保持
　top.topsPosにpush 配列がいい
　同時にbody.classNameを保持 → そうすると配列渡しがいい
　top.topsPos.push([html.scrollTop || body.scrollTop, body.className]);

bodyにme1を取り付け
trのact1を取り除く
top.topsObj.forEach(o => tr[o - 1].classList.remove("act1"));

trの65,66,67,68にact1を取り付け→上へスクロール


■その状態で元に戻るには
右側の選択ボタンをクリック → ＞33:me1Entry;へ
　if(!body.classList.contains("me1")) return;
　body.classList.remove("me1");
　toMoveScroll.e(top.topsPos, 700, "");

■その状態で次の場所を移動するには
＞{w.tops(69,70)}(プロフィールのエントリ２件)
最初と同じ処理を行うのだから配列渡し。
w.topsObj.forEachではダメなんだ。w.topsObj.pull.forEachじゃなければいけない。
pageEntryで直さないと。
5 105 45 61 73// include function
profileEntry = () => {
let s = echo(body).length;
pageClass(0);
profileMainContent();
topDispCreate();
profileEntry_toMove();
Fw(0); echo("sizeDisp", s + " / " + echo(body).length + " " + fn); Fw(1);
};

pageClass = no => {
Fgl(1, "+d" + no);
Fgl(0, "+d" + no);
win.addEventListener("unload", () => {
Fgl(1, "-d" + no);
Fgl(0, "-d" + no);
}, false
);
};
2働き者のボタン

「0短いコードの関数　だけど十分な働き
戻る・進む　トップへのコール
関数を使い易くする別名定義
拡張するところ満載の　ルーチンなの





-」
3*
4*
5 69// include function
topDispCreate = () => {
let ref = Fco(""); if(ref != "") ref = "ref-referrer : " + ref + "\x3cbr />";
Fco(null);
echo("topInfo", `${ref}
\x3cspan class="cmd2" onclick="w.ones(this)">1\x3c/span> lastModified :
${doc.lastModified.replace(/(\d\d\/\d\d)\/(\d{4})/, "$2 $1")}
`);

let dt = ["js", "po", "co", "tx"], s = "";
for(let i = 0; i < 4; i++){
s += '\x3cspan class="cmd2 ct' + i +
'" onclick="w.ctEntry(' + i + ',1)">' + dt[i] + '\x3c/span>';
}
let o = Fce("div"); o.id = "header";
echo(o, '\x3cspan class="logo">Profile of poem\x3c/span>' + s +
' \x3ca href="/home/poem/" target="_blank">home\x3c/a> ' + moveDec("＞39:A;")
);
body.insertBefore(o, body.firstChild);
let a = Fid("back_link");
o = Fce("div"); o.id = "mainDisp"; body.insertBefore(o, a);
echo(a, "............. ok 2");
};

profileEntry_toMove = () => {
if(!top.isReload && doc.referrer.match(/mode=load&page=(\d+)/) ||
doc.URL.match(/no=(\d+)/)){
setTimeout(() => toMove(RegExp.$1 - 0 + 1), 1000);
} else {
if(top.document.URL.match(/no=(\d+)/)){
setTimeout(() => toMove(RegExp.$1), 800);
} else {
if(top.document.referrer.includes("footprint")){
setTimeout(() => toMove(51), 800);
}
}
}
if(doc.URL.match(/mode=profile/)) body.classList.add("profile");
top.isReload = false;
};
2*
3*
4*
5 45 81// include function
profileEditorEntry = () => {
pageClass(0);
html.className = "profile-form";
moveOffset = 110;
if(menu.classList.contains("masked")) body.classList.add("mask-used");
Ftag("link")[0].href = "/home/poem/profile.css";
let dt = ["js", "po", "co", "tx"], s = "";
for(let i = 0; i < 4; i++){
s += '\x3cspan class="cmd2 ct' + i +
'" onclick="w.ctEntry(' + i + ',1)">' + dt[i] + '\x3c/span>';
}
let o = Fce("div"); o.id = "header";
echo(o, '\x3cspan class="logo">Editor of poem\x3c/span> ' + s);
body.insertBefore(o, body.firstChild);

let cssDat = "";
let tr = Ftag("tr"); tr[0].remove();
profileEditor_rep(tr);

if(doc.URL.match(/page=(\d+)/)){
pageNum = RegExp.$1 - 0;
pageObj = tr[pageNum];
}
if(pageNum){
setTimeout(() => { toMoveScroll.e(pageObj, 1000, trRows)}, 2000);
}
};

trRows = () => Ftag("tr")[pageNum].classList.add("rows-up");
profileEditor_size =
e => (e.target || e).parentNode.parentNode.parentNode.classList.toggle("rows-up");
profileEditor_move = (obj, no) => {
obj[no].classList.toggle("rows-up");
toMove(no);
};

profileEditor_cnt = e => {
let txt = e.target || e, o = txt.previousSibling.childNodes[2];
echo(o, counter(txt.value));
};
2処理の過程

「-0処理は幾通りの方法があるわ
新しい仕様のメソッドもあるわ
それを知らなくて使えないのと
知っているけど使わないのでは
全然違うんだから

結果は同じでも過程が違うの
その色々な過程こそが楽しいの
動けばそれでいいんじゃないわ
コードの中は拘りの塊なのよ

-」
3コーティングの違い

「0　appendとappendChildの違いは、「前者は複数の引数が持てる」と「戻りがundefindになる」があるわ。関数呼び出しが３つあるから最後に纏めてbodyにappendしたいなら、サブの関数の前に、let a = [];って箱を作って、それにa.pushで入れて、サブを抜けた後にbody.append(...a);とスプレット演算子で配列を展開させて入れれば良いの。

　echo関数で一括指定が嫌ならば、let sp = Fce("span"); sp.append(a2); o.append(sp);でいいの。どっちも同じ処理だから気持ち次第でどちらかになるわ。そもそもappendChildを拡張したFap関数があるし、その場の雰囲気で使い分けると思う。どちらが良いか悪いかじゃないから。どっちも良いものなんだから使ってあげなきゃ可哀そう。

-」
4*
5 77// include function
profileEditor_rep = function(tr){
let i, th, td, txt, o, dt, css = "", tx, s = ["js","po","co","tx"];
for(i = 1; i < tr.length; i++){
let n = i % 4;
th = tr[i].firstChild;
td = th.nextSibling;
txt = td.firstChild;
tr[i].className = "c" + n + (txt.value == "*" ? " unused" : "");
tx = echo(th);
dt = " " + echo(th.firstChild);
echo(th, moveDec(
dt.replace(/s\d+/, e => {css += " " + e; return `\x3cspan class="cs">${e}\x3c/span>`}).
replace(/\s(\d+)/g, " ＞$1")
));
o = Fce("div"); o.className = "td-top";
echo(o, `${tx}\x3ca class="db txt-${s[n]}" href="javascript:w.ctEntry(${n},1)">${s[n]}\x3c/a>\x3cspan class="db txt-cnt">${counter(txt.value)}\x3c/span>\x3cspan class="db btn-ed" onclick="w.profileEditor_size(this)">${i + 1}\x3c/span>`);
td.insertBefore(o, txt);

Fev(txt, "mousedown", profileEditor_cnt);
Fev(txt, "keypress", profileEditor_cnt);
}
};
2*
3*
4*
5// include function


createMenu_defButton = obj => {
let o;
if(!top.isExpand){
o = Fce("a");
o.className = "def-button";
o.id = "rBtn0";
o.href = "javascript:location.reload()";
o.append("0");
obj.append(o);

o = Fce("a");
o.className = "def-button";
o.id = "rBtn1";
o.href = "javascript:top.isReload = true; top.frames[1].location.reload()";
o.append("1");
obj.append(o);
}
};
2*
3*
4*
5 61// include function
createCode = s => {
if(!s.includes("function")) return s;
return s.replace(/\x3cbr ?\/?>/g, "\t").
replace(/\t[\w\{].*?\t\};?/g,
e => `\x3ccode class="js">${jsRep(e)}\x3c/code>`);
};

codeColorRep = s => {
return s.replace(/"(|.*?[^\\])"/g,
"\x3cb>\x22\x3c/b>\x3ci class='quote'>$1\x3c/i>\x3cb>\x22\x3c/b>").
replace(/( F[a-z]+|return|replace|let|for)/g,
"\x3cspan class='key'>$1\x3c/span>").
replace(/('js'>)([\w\d_]+)/g, "$1\x3cspan class='func'>$2\x3c/span>");
};
2あなたに

「-0言葉にすると　想いが募る　だから静かにしてる
過程は道しるべ　長い道のり　辿れば行き着くの
結果よりも過程が大切なの　全ては言葉で返るわ
ボタン一つで出来上がる作品は　なんて空しい

*




-」
3*
4*
5 69// include function
Fgl = (...e) => {
let o = [top.document.getElementsByTagName("html")[0],
document.body, body][e[0]];
let key = e[1], css = key.substring(1);
switch (key.substring(0,1)){
case "-" : o.classList.remove(css); break;
case "+" : o.classList.add(css); break;
default : o.classList.toggle(key);
}
if(e.length > 2) e[2].classList.toggle("act");
if(e[1] == "mask-used") menu.classList.toggle("masked");
};

Fco = e => {
if(e != ""){
document.cookie = "ref=" + escape(e) + "; path=/" +
(e == null ? "; expires=Tue, 31-Dec-2000 23:59:59;" : "");
} else return document.cookie.match(/ref=([^;]+)/) ? unescape(RegExp.$1) : "";
};
2文字数制限

「-0文字数の制限は各々のフォームで異なるわ
掲示板の投稿は4000字だし日記は16000字
CSSは20000字でメインとメニューは10000字
プロフィールの項目は20字で本文2000字
限りある文字数なんていつも使い切っちゃう

５種類の文字は参照文字にされている
それはどのページでも同じなんだけど
ここのプロフィールは改行が特殊なの
普通は１字なのに６字も費やすなんて
何故？と声を大にして呟きたい

-」
3改行問題を考える

「0　文字数カウンターの問題の個所は「s.replace(/\r?\n/g, "６つの空白");」なの。上のコードの３行目よ。これに気が付いたのは随分経ってからのことでした。>>61toMoveScroll関数の更新の時に、残り文字数が十分あるのに「文字数が多すぎる」ってエラーでが戻るのです。これは変ねと、改行なしの２０００字の投稿（これは大丈夫）から一文字ずつ変化させて挙動を見ました。

　そうすると「項目と同じく６字の消費」になることが分かったの。既に項目、つまり「th」の方はその文字数になることは分かっていたから、ああ、一緒だねということになったの。他のページでは確かに１字しか費やしていません。どうしてでしょうね。

　文字数カウンターのバージョンは幾つかあるの。つまり新たな知識でそれなりに成長しているのよ。最初の頃のカウンタは次のリストの通りちょっと変な作りでした。でも、ちゃんと同じ数値を返します。（あたりまえだけど）下にリンクとソースを掲げてみます。
-」

<a href="/home/default/?/cgi-bin/bbs.cgi?oid=default;n=0;s=1&uri=eclat-io;n=1;s=35" target="_blank">エクラの汎用掲示板/105 Ver5.0の#35より抜粋。</a>
『 counter = function(obj){
var s = echo(obj);
var len = s.length;
var str = s.replace(/\r?\n/g, " ");
var cnt = str.length;
cnt +=
(cnt - str.replace(/<|>/g, "").length) * 3 +
(cnt - str.replace(/"/g, "").length) * 5 +
(cnt - str.replace(/\x26|'/g, "").length) * 4;
echo("eCNT", len + " ( " + cnt + " ) / 4000 (max)");
if(postDefault != s) Fid("eCNT").className = "submit-lady";
};』
　このコードはかなり古いです。それぞれの文字が何文字か求めて、対応する文字数を掛けて、足して・・・これはこれで頑張ったの。今のコードを見ると違いが分かるわ。新しいコードは見ただけで分かるよね。単に文字を増やしてあげて最後に文字数を求めてる。
4*
5 49//include function
toMoveScroll.ef = (move, time, call) => {
if(typeof(move) !== "number"){
let o = Fid(move);
let num = o ? o.offsetTop : 0;
win.scrollTo({top:num, behavior:"smooth" });
}
};
2*
3*
4 104ポエムの日記帳 1

■2018 10/28 20:55 (日)
ポエムの小部屋の仕様がまだまだ固まらない。
それでいてコンテンツが増えていくと悩むね。
うん、基本に戻ろう。

行き詰ったときは原点に戻るのがいい。
更新は楽しみながらじゃなきゃ長続きしないんだもの。

カテゴリのtxの一部を日記の領域にしよう。
画像も取り入れたいし文字置換は今までと同じようにしようか。

ここは新潟県の南魚沼市にあるとある民宿の一室の中。
６畳の和室で一人部屋。
もう数週間近く出張で来てる。
休みがない。身体が辛い。
画像はどうかな？<img src="/home/poem/files/fly2_s.jpg" alt="" />

タグが使えるから短縮エイリアスを使わなくともいいのか。
暫くはこのままで進めよう。

日付の処に曜日を入れて気が付いた。
今日は日曜日だったんだね。


■2018 10/29 20:40 (月)


■2019 12/31 20:23（火）
見事な三日坊主ぶりです。前回のは日付を書いたままで放置していました。
今回はひとまず全体のコードを確認して気になったことを見出しました。
そして変更点は次の通り。

・ここの「cate4」の入力フォームでの文字が小さいのを修正。
・カテゴリ別のページ内リンクへの装飾。
・トップの領域の挨拶の変更。
・リロードボタンのイベントの追加。
・記事の「first-line」の装飾。

これくらいかな？
まだコンテンツが１割程度しか進んでいないから少しでも纏めようと思う。


■2020 01/01 23:38（水）
正月の特別番組の「相棒」を見ていました。でも、何とか元旦に綴れそうです。
昨日、久しぶりにここの日記を綴って少し肩の荷が降りた気がする。
<img src="/home/default/files/yukikko2b.gif" alt="" />
箇条書きでもいいから少しずつ・・・慣れるために日記を書こう。

今日は昼過ぎから妻と二人で街に出かけました。
ラーメンを食べて喫茶店に行って珈琲を飲んで寛ぎました。
そのあと、ちょっとだけパチンコ屋に寄ったのよ。
夕方だから長居するつもりはなかったのだけど・・・
でも、「氷の取りこぼしが無ければリーチ目」なる花火が落ちていたの。
上段に「暖簾・七・七」ってなっていた。
もちろん風鈴と氷のダブル聴牌なのにどうしてなの？って感じ。
最後のプレイでもちゃんと見なきゃ・・というより初歩の初歩なのに。

貯メダルがあるからすぐに揃えました。バケでした。
でも、ボーナスの消化を終えて２ゲーム目で特殊リプレイが入ったの。
暖簾枠上の中段リプレイだからレギュラー濃厚だけど・・・
一枚掛けで逆押しでドンちゃんが止まった時は嬉しかったわ。

右隣の席は客がいてプレイ中だから空席であった左隣に妻が座っていたの。
その台は「Re:ゼロ」で前任者がチャンスゾーン（白鯨戦）失敗で即やめの台。
それでね、タダで貰ったみたいなコインだから隣の台の下皿へ半分くらい移したの。
嬉しさを隠し切れないで意気揚々とプレイする妻・・・。

リゼロの風鈴、いやベルは15枚の払い出しだから大きいよね。
必死になって目押しで揃えようとしていた。
そんなの「AT機」だから無理なのに、押し順なのに。

私の花火がビックの消化を終えてまたすぐにリーチ目が来た。
コブナの取りこぼし濃厚な目降臨で赤七ビックです。
下皿に出てくるコインを隣へコツコツと移動です。

ああ、文字数が限界です。続きは＞104:こちらで:
5// include function

createStyleRule = () => {
let box = (name, css) => {
let dt = ".btn-" + name + ", .col-" + name + " { box-shadow:";


let c = ["2px 2px", "2px -2px", "-2px 2px", "-2px -2px"];
for(let i = 0; i < 4; i++){
dt += c[i] + " 15px rgba(" + css + ", .7) inset";
dt += i != 3 ? ", " : ";}";
}
return dt;
};
/*
let dat = box("js", "34, 68, 255");
addCSS(dat);


addCSS(".btn-js, .col-js { box-shadow: 2px 2px 15px rgba(34, 68, 255, .7) inset, 2px -2px 15px rgba(34, 68, 255, .7) inset," +
" -2px 2px 15px rgba(34, 68, 255, .7) inset, -2px -2px 15px rgba(34, 68, 255, .7) inset; }");
*/


addCSS(box("js", "34, 68, 255"));
// addCSS(box("po", "255, 119, 255"));
// addCSS(box("co", "255, 119, 51"));
// addCSS(box("tx", "68, 170, 51"));

};
2ソースの分かる人
「-0プロフィールのページと編集ページ
レイアウトがテーブルで似ているの
そこでね見分けるために最初の要素にクラスを付けるの
同じスタイルシートが使えるでしょ

編集ページは変えどころが満載なの
最初のレコードは必要ないわ
新規追加のレコードが５つあるけれど
ポエムのところは８つがひとつでセットなの
だから３つ複製して追加させてる

イベントの追加や要素の置換もあるわ
こうすれば見出しが複数行に出来るの
誰か分かる人出てこないかな・・・
うん、ソースが分かる人が






-」
**
4 100 108ポエムの日記帳 2

■2020 01/02 00:45（木）
＞100:前;の続き。日記帳が変わったから日付も変えよう。日付は書き始めた時間です。

花火は遅れとかのチャンスは熱くなれるね。それと滑りかな。
それなのに隣のリゼロに妻は熱くなっているのです。
「ちゃんす」とか「chance」とか赤文字とか・・・。
まあ、それが楽しいのだろう。激熱はまだしもチャンスはごく普通なのに。

チャンスゾーンのチャンスなんて嫌です。
データカウンターのビックはチャンスゾーンなのに。
子役を貯めて増やすカウンターが1000になれば何かが起きるよって言って。
当たったー当たったーて喜んで貰う「撃破率UPアイコン」
初めて打つ妻の姿に少し悲しかった・・・。それ当たりじゃないもの。

私曰く。
「どう？今やめれば次の人が当たりやすく直ぐに来るだけ」なんだって。
そう、止めるに止めにくい状況になるのね。

そして私のコインを食い潰して500ゲーム位で当たったの。
ビックとは名ばかりの白鯨戦と名乗るチャンスゾーンに。
これを三戦とも勝って初めてスタート台に上がるのよ。
５８％じゃ無理みたいです。２戦目で負けました。
私の花火はあれからはまっていたし、夕食の準備もあるから先に帰しました。

それから花火は駄々っ子になりました。
無くならないけれど増えない・・・・。
あと数枚でコインが無くなるときに限ってビックを引くの。
中段にチェリーが落ちてくる特殊リプレイ。
遅れで逆押し１確がなんども。
まあ、負けたけど遊べました。楽しいね花火。

<img src="/home/default/files/yukikko2b.gif" alt="" />
それから家へ帰ってからサイトの更新しようとしたの。
いや、誰かの日記へのコメントをしようか掲示板にカキコしようか迷っていたの。
もう随分と影で見守るくらいで慣れ切ってしまっているけれど・・・。
話がしたいな・・・。

<a href="/home/log2/main.html?job=bbs;user=kakei;p=4;po=77" target="_blank">/home/log2/main.html?job=bbs;user=kakei;p=4;po=77</a>
あぁ、アドレスで名前が分かってしまう。もう20年経ったのね。
<a href="/home/default/main.html?uri=site:all;c=33;n=10" target="_blank">/home/default/main.html?uri=site:all;c=33;n=10</a>
あぁ、カテゴリ番号で分かってしまう。

上の拡張新着日記を開けばわかると思うけれど・・。

二年数か月ぶりに公開した意味が知りたいの。
新年の挨拶がしたいの本音は。でも、いつまでも影のままで居なきゃ。

<a href="/home/default/?main.html?uri=bg=gaiax&archive=nakayoshi_bbs_5.html" target="_blank">/home/default/?main.html?uri=bg=gaiax&archive=nakayoshi_bbs_5.html</a>
こんな感じに。

プロフィールの項目の文字数制限は２０００字だからあっという間に費やしてしまう。
しかもね、改行が6字分を消費するからなおさらです。
残り100字程度は余力を残しておかないと辛いから改ページしましょう。

＞108:次はこちらへ;
5 69// include function
profileMainContent = () => {
let a = Ftag("td"), th, dt, o, css, s = ["js","po","co","tx"];
for(let i = 0; i < a.length; i++){
let obj = a[i], dt = echo(obj), n = i % 4;
css = "c" + n + (dt == "*" ? " unused" : "");
dt = i > 0 ? `
\x3cdiv class="td-top">
\x3cspan class="db cmd2 ct${n}" onclick="w.ctEntry(${n},1)">${s[n]}\x3c/span>\x3cspan class="db cmd2 num" onclick="w.ones(this)">${i + 1}\x3c/span>\x3cspan class="db cnt cmd2">${echoCounter(dt)}\x3c/span>\x3ca class="db cmd2" href="/cgi-bin/profile_editor.cgi?oid=poem&mode=load&page=${i}">up\x3c/a>
\x3c/div>\x3cdiv class="td-doc">${dt}\x3c/div>` : `
ID : poem
\x3cdiv class="">
file : ${top.document.URL.replace(/(no=)(\d+)/, "$1$2 ＞$2:A;")} \x3cbr />
top-referrer : ${top.document.referrer}
\x3c/div>
\x3cdiv id="topInfo">\x3c/div>`;
dt = sourceDec(moveDec(fullDec(dt)));
if(!n && i > 9) dt = createCode(dt);
if(n || !i || i == 4) dt = textDec(dt);
if(i < 5 || i == 8) dt = indexDec(dt);
echo(obj, dt);
th = obj.previousSibling;
dt = i != 0 ? " " + echo(th) : ` 2 3 4 5 9`;
echo(th, moveDec( dt.replace(/s\d+/,
e => { css += " " + e; return `\x3cspan class="cs">${e}\x3c/span>`}).
replace(/(\*)/, `\x3cspan class="btn-new">$1\x3c/span>`).
replace(/\s(\d+)/g, " ＞$1")
));
obj.parentNode.className = css;
}
};
**
**
4 104 112ポエムの日記帳 3
＞104:前はこちら;

■2020 01/01 01:30（金）
*/* include stylesheet */
.sub-cs {
font-size:100%;
line-height:3rem;
display:inline-block;
width:3rem;
height:3rem;
border-radius:50%;
border:1px solid #808080;
background-color:#ffc;
box-shadow:3px 3px 3px #808080;
}
**
**
**
5// include function
bbsEntry = () => {



};
**
**
**
5 125 129 133 141// include function
footprintEntry = () => {
pageClass(1);
fpMenuCreate();
fpUser = "poem";
let o = Fce("div"); o.id = "fpDisp";
let u = "main menu common main menu profile bbs bbs-form diary friends links footprint".split(" ");
let s = "";
for(let i = 0; i < u.length; i++){
s += "\x3ca href=\"javascript:w.userSource(" + i + ")\">" + u[i] + "\x3c/a>";
s += i != 1 ? " | " : "\x3cbr />";
}
echo(o, `\x3cdiv class="fpHeader">
\x3cspan id="fpUserDisp">\x3c/span> \x3ca href='javascript:w.Fgl(2, "cls")'>cls\x3c/a>
\x3c/div>
\x3cdiv id="fpCom">${s}\x3c/div>
\x3cdiv id="sourceDisp">\x3c/div>`);
body.insertBefore(o, body.firstChild);
fpRep();
daysRep();
};

fpRep = () => {
echo("fpUserDisp", fpUser);
echo("sourceDisp", "");
let o = Ftag("messages", "tr");
let dn,dt,u,obj,no,a,i,j,len = o.length, user = [];
for(i = len - 1; i >= 0; i--){
a = Ftag(o[i], "td");
dt = a[a.length - 2]; dn = dt.firstChild;
u = echo(dn);
dn.target = "_self";
dn.href = "javascript:w.getLog('" + u + "')";
if(user[u]){ no = user[u] + 1; user[u] += 1;}
else { no = 1; user[u] = 1;}
obj = Fce("span"); echo(obj, "(" + no + ")"); dt.append(obj);
}
}
**
**
**
5// include function
moveDec = s => {
const s1 = "\x3ca href='javascript:w.toMove($1)' class='cate$1 move";
const s2 = "'>$2\x3csup>$1\x3c/sup>\x3c/a>";
return s.replace(/(＞)([a-zA-Z][a-zA-Z0-9_\.]+)/g,
(e0,e1,e2) => e2 != "img" ? "\x3cspan class='func'>$1\x3c/span>" : e1 + e2).
replace(/＞(\d+)(<| |$)/g, `${s1}'>$1\x3c/a>$2`).
replace(/＞(\d+)([a-zA-Z][a-zA-Z0-9_\.]+)/g, `${s1}-in${s2}`).
replace(/＞(\d+);/g, `${s1}-in'>$1\x3c/a>`).
replace(/＞(\d+):([^;]+);/g, `${s1}-in${s2}`).
replace(/＞(\d+):([^<]+)/g, `${s1}-in${s2}`).
replace(/(class='cate)(\d+)/g, (e0,e1,e2) => e1 + ((e2 - 1) % 4));
};
**
**
**
5 117 129 133 137// include function
getLog = user => {
fpUser = user;
xhr("/cgi-bin/footprint.cgi?oid=" + user, "", logs);
};

logs = s => {
let dat = s.match(/\x3cbody[^>]+>(.+)\x3c\/body>/) ? RegExp.$1 : "";
echo("counter", dat.match(/id="counter">(.+?)\x3c\/div>/) ? RegExp.$1 : "");
echo("messages", dat.match(/id="messages">(.+?)\x3c\/table>/) ? RegExp.$1 : "");
echo("days", dat.match(/id="days">(.+?)\x3c\/table>/) ? RegExp.$1 : "");
echo("hours", dat.match(/id="hours">(.+?)\x3c\/table>/) ? RegExp.$1 : "");
echo("wdays", dat.match(/id="wdays">(.+?)\x3c\/table>/) ? RegExp.$1 : "");
fpRep();
moveScrollTo(0);
};

userSource = no => {
let u = "main menu common main menu profile bbs bbs-form diary friends links footprint".split(" ");
let file = "/home/" + fpUser + "/" + u[no] + "." + (no < 2 ? "html" : "css");
xhr(file, "", usView);
};

usView = s => {
s = s.replace(/.+\x3cbody[^>]+>/, "").replace(/\x3c\/body>.+/, "");
s = s.replace(/\x3c/g, "\x26lt;").replace(/>/g, "\x26gt;");
s = s.replace(/^\t+|\t+$/g, "");
echo("sourceDisp", "\x3ccode>" + s + "\x3c/code>");

};
**
**
**
5 117 125 133 137// include function
fpMenuCreate = () => {
let user = userDat1() + "," + userDat2();
let a = ["A:100件","B:99件 - 51件","C:50件 - 31件","3D:0件","E:29件 - 1件"];
user = user.split(",");
let i,j,u,dat = "";
for(i = 0; i < user.length; i++){
u = user[i].split(" ");
dat += "\x3cdiv class=\"fp-user\">" + a[i] + "\x3cspan>" + u.length + "\x3c/span>\x3c/div>\n\x3cul>\n";
for(j = 0; j < u.length; j++){
dat += "\x3cli>\x3ca href=\"javascript:getLog('" + u[j] + "')\">" + u[j] + "\x3c/a>\x3c/li>\n";
}
dat += "\x3c/ul>\n";
}
Fw(0);
echo("exDisp", dat);
Fw(1);
};
**
**
**
5 117 125 129 137// include function
userDat1 = () => "kadoma1428 log2 144fm iichan ecx78 aotaro11 yama0008 log3 nancyan css-2 kakei everything1234567 yamayan1955 satake11 object-not-found itsuki css-1 enmedia happylifespaces yadokari poem lady hana227 midnight everything kou-oxana-allen js enmasama3 youchan1951 js1 default,aiyoyoshida38481 arty-crafty hokuto894yu ukiukiuzuz alexa-google-clova packman-jun nori-pee coming-documentary-viewers coming-entame-viewers coming-drama-viewers coming-music-viewers pencafe coming-education-viewers coming-movie-viewers coming-news-viewers jet00 coming-sports-viewers teruka3 shimo majyoneko nighty9 variety-g wowow1 tv-life120 abedetv m-room 720esnet motozosenya kumachan misonoen e-pclife tabitetsu-channel katukatu ensan5 firefly01 music-ensemble1 nagatanosakura noren noripee823,noripee823 namikaze77 tajimayoitoko asuka uncle-elvis hanano55renge saikourin3 pearl08 enmasama3i kangeki artlife1 w-beauty walk-to-remember barchetta eve24 nagatano zero03 enmedia2cwm douja-douga-channe kitahotaru portal-study yozo1124 princess-eri samphot love-skyblue easy-jazzy-life-room gontango ontai75 freehand2007 nekomilk3 june sasaken21 zuiun shumijin-masa 4k8kfan cosumo8733 m-d-user pick-up-music white-moon shaw kyonkk homes-2 juke-box-19 design-s kokoro227 akkishonan local-chasitu siden-kai mikiharb sengoku izayoi";
**
**
**
5 117 125 129 133// include function
userDat2 = () => "cherry-garden vioret-sky green-sky sirayuki m-234 black-sky akemu xxx-love fuji-san fugaty 3rd-world since woodyham yama1046 webkyoto yuki-kitahara g-movie satomi dream-angels utasuki torum kingin akicyann masamim nature6000 kizuna france7 bookreadings coming-anime-viewers miti1935-2 responsive group-news-7 funabin2ikoo okuaizuibento colors george2 baby-box-01 happyporon photo-up tv-record fighter-for-tounyou m-old-box-33 hibari-neko marineblue-bluesky darkorange earth-pan p-photo-up fight-for-tounyou e-books-center-life botanical-e arinko3 conan cosmos-club kou-rou-mu historyhoihoi child-box-32 tablet-fan-2074 black-pink ayabun-happy-cottage tengoku fuga golden-rabbit aizu-no-atorie-27 wienerwalz karuikoneko katukatu0911 boonyan luck7 kasiwazin1 kotetti saeba-room ai-love casablanca azz7cafe labyrinth justice a1vvv-0 okuaizuhakubutu mimimi s231203 m-kikaku-jyouhou ahojuku francetei tuntun ter27 omomukiarty-crafty-7ipods fansports-info skater enfas-special michibell-zg erste917 komakusa sky-wind 2amazonfan entamefree iina banksiaelutea mimi nagomi2 yattyan althjp dancyu m-syokoukai cinema-info xhinax ensan100 nana418 suamahime angels-egg-07 my-healthy net-works moon923jp life-style-3 shiro funabinikoo abasan snow himawari2010 piko28 dewberry model tukinomiya27 hanami aoe tranquilizer karen-kika black66 pchan kita-hotaru shinamon kasiwazin owo pink-sky androider-ace59 eclat-io sakamoto takuro-tada1123 forever midori11941 inaget ensan-f-s-world kuretake1 yukiusagi898 yellow-room-kibou kuretake001 tanpopo meeranz purple-sky miya38 samuasura fujit1123 jin8t hanshin-torakiti,jazz-house kazu syoumei rukalove sakkun-my-life love-true spirits maria-monika0827 naka-27 ryus-cafe";
**
**
**
3 117// include function
daysRep = () => {
let o = Ftag("days", "tbody")[0];
let a = Fce("tbody"); Fap("days", a);
Fap(a, Ftag(o, "tr")[0]);

};
**
**
**
**
**
**
4*
js 3*
**
**
**
3// include function
addCSS = dt => {
Fw(1);
let o = doc.styleSheets[0];
let css = evalDec(dt).replace(/\n/g, " ").
replace(/(\/\*.+\*\/)/g, "");
css.replace(/.+?\{.+?\}/g,
function(e){
o.insertRule(e, o.cssRules.length); return "";
}
);
};
**
**
**
3 37 165// include function
formEditEntry = function(){
html.className = "diary-form";
Ftag("link")[0].href = "/home/poem/common.css";

let c = Fce("span"); c.className = "count";
echo(c, "<span id=\"count\">0</span> / 16000");
Fap(Ftag("div")[2], c);

c = Ftag("textarea")[0];
c.addEventListener("mousedown", getCounter, false);
c.addEventListener("keypress", getCounter, false);

getCounter();
};
**
**
**
**
**
**
**
3 45 173// include function
linksEditEntry = function(){
Ftag("link")[0].href = "/home/poem/friends.css";

};
**
**
**
**
**
**
**
3 45 181// include function
mainEntry = function(){


};
**
**
**
**
**
**
**
3 45 189// include function
loginEntry = function(){
Ftag("link")[0].href = "/home/poem/common.css";
let a = Fce("div"); a.className = "login-info";
let cooRep = function(obj){
let s = "\x3cdiv class='ref'>" + doc.referrer + "\x3c/div>" +
"\x3ctable>\x3ctbody>\x3ctr>\x3cth>" +
obj.cookie.replace(/=/g, "\x3c/th>\x3ctd>").replace(/; /g, "\x3c/td>\x3c/tr>\x3ctr>\x3cth>") +
"\x3c/tr>\x3c/tbody>\x3c/table>";
return s;
};
echo(a, "\x3cdiv class='cap'>/cgi-bin/\x3c/div>" + cooRep(doc) +
"\x3cdiv class='cap'>/home/poem/\x3c/div>" + cooRep(document) +
"\x3cdiv>\x3ca href='/home/poem/profile.html?no=32'>porfile 32\x3c/a>\x3c/div>"
);
Fap(body, a);
};
**
**
**
**
**
**
**
*nth-childとnth-of-type

□■□■□■□■□■ :nth-child(even) :nth-child(2n)
■□■□■□■□■□ :nth-child(odd) :nth-child(2n+1)
□□□□■■■■■■ :nth-child(n+5)
■■■■□□□□□□ :nth-child(-n+4)
□□□□■□□■□□ :nth-child(3n+5)
□□□■■■■□□□ :nth-child(n+4):nth-last-child(n+4)

.nth-sample {
padding:.5em;
border:1px solid #808080;
text-align:center;
background-color:#ffc;
border-radius:4px;
}
.nth-sample * {
display:inline-block;
font-size:90%;
padding: 3px;
border:1px solid #808080;
background-color:snow;
width:9%;
text-align:center;
border-radius:3px;
margin:4px 0;
}
.nth-sample em {
color:#00f;
font-weight:bold;
}
.nth-sample a {
color:#f00;
font-weight:bold;
}
.nth-sample:nth-of-type(1) :nth-child(2n+1){
background-color:orange;
}
.nth-sample:nth-of-type(2) :nth-of-type(2n+1){
background-color:orange;
}
2 s1２つのnth

nth-childとnth-of-typeの違いはなあに？
一言で表すと、「全ての兄弟の集まりと要素の種類毎の集まり」になるわね
だから兄弟が全て同じ場合は同じ働きをするの
li要素とかtr要素がそれに当てはまるの

:nth-の前にはタグ名やクラスネームが付けられるの
適用範囲の絞り込みに必須よね
何も付けない場合はアスタリスク＊が付いていると同じ
span.type-1.type-2:nth-:nth-のように細かい指定も出来るわ

親要素を絞り込むのが大切なのよ
今、ここの下は、tr:nth-child(23) :nth-child(2)よね
その中に二つのdiv要素が入ってる
それには.nth-sampleというclassNameを付けてる

上からの順番ではコンテンツの挿入で順番がずれるもの
上と下、良く見比べれば違いが分かるはずよ
4.nthの検証

nth-sample:nth-of-type(1) :nth-child(2n+1)
<div class="nth-sample"><span>span</span> <span>span</span> <em>em</em> <em>em</em> <em>em</em> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <a>a</a> <em>em</em> <span>span</span> <em>em</em> <span>span</span> <span>span</span> <a>a</a> <span>span</span> <em>em</em> <span>span</span> <span>span</span> <a>a</a> <span>span</span> <span>span</span> <em>em</em></div>
.nth-sample:nth-of-type(2) :nth-of-type(2n+1)
<div class="nth-sample"><span>span</span> <span>span</span> <em>em</em> <em>em</em> <em>em</em> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <span>span</span> <a>a</a> <em>em</em> <span>span</span> <em>em</em> <span>span</span> <span>span</span> <a>a</a> <span>span</span> <em>em</em> <span>span</span> <span>span</span> <a>a</a> <span>span</span> <span>span</span> <em>em</em></div>

　擬似クラスも通常のクラスと同様に適用範囲を指定します。そんなに難しいものでもないのね。
**