2019 10/11 23:27
Category : メモ帳
{/visUser/}
一息つく
■変な挙動が発生。もしかすると致命的な欠陥なのか？
このページの左側に並ぶヘッダーとメニュー。ときには横に移動してもらいたい時があるよね。その場合は複数対応させる為にクラスに変更を与えるの。そして操作もアンカー要素でjavascriipt:....としているのもあるよね。うん、左下に処理の内容が表示されていて安心なのもあるわ。
上にCSSファイルから関係する箇所を抜粋して記述したので読んで欲しい。うん、bodyかどこか上の要素にクラスを追加すると左に移動するのが分かると思う。
💙クラスの追加 add('menu-out')
💙クラスの除去 remove('menu-out')
さて、今度は上にあるアンカーでbody要素のclassListに対する処理を入れたから試して欲しい。ひとつだけポツンと取り残されたものは#meuや#header内にない要素なのが分かると思う。うん、クリックすると左に行ったり戻ったりするのが分かるよね。
💗toggle('menu-out') → 上の💙と同じ構成 ※fireFox 要注意！
さて、ここが本題です。上のリンクはfireFoxではページがtrueに置き換えられの。ページ変移じゃなく。だからF5でリロードするしかならなくなって致命的です。穴が開くほどみてもミスはない。そもそもミスするほどのものじゃない。
💛toggle('menu-out')
💛toggle('lini-out')
そこでわたしは閃いた。困ったときは即時関数ってこと。そのように変更したものが上のものです。ついでに残ったものを操作するリンクも表示しました。試せば分かる通り上手くゆきます。もしもこれと同じような状態になったとき覚えておけば役に立つと思う。
💛bcToggle関数の組み込み クリックで定義します。
上のコードはリンク（A要素）の中身で実際は改行せずに1行になっています。クリックして定義する前は下にあるリンクは作動しません。リンクの::beforeが💗→💚になると作動します。そして、上のリンクは定義すると必要ないから小さくなって消えます。実際はfont-size:0で小さくなって見えないだけです。
menu-out link-out 両方とも適用
💙システム手帳より --diary.css--
ひとつが分かれば他の領域、本文とクラスの追加で自在に変化させることが出来るよね。今、試しているのはそのルールの適用であって大変なのは構築の方かな。うん、上にCSSファイルを表示するコマンドを付けたシステム手帳へのリンクを表示したから読める人は読んで欲しい。あ、diary.cssはcommon.cssをインポートしているからcommon.cssから読んだ方がいいかも。うーん、どうなんだろう。そんな奇抜な手法は用いていないから読み易いと思うんだけど難しいのかな。
うん、致命的な欠陥と思いましたが回避する方法あるので一安心です。
回避は出来たけれど、add()とremove()が良くてappend()がダメなのは解からない。しかもChromeでは何ともないのに。うん、超久しぶりにクロームで開いてみたんだけれどメニューが変。リストの記号がモノクロになってる。
🟦 🟥 🟫 🟪 🟨 🟦 🟩 🟩
上のようなとってもカラフルな色彩になっている筈なのにモノクロ。きっと、（モノ)クロームだからかも。それはそうと・・・fireFoxとChromeの違いがあり過ぎには驚いた。うん、連結文字の国旗が全く反映していないし。どうなっているのだろう。
💙Chromeで開いたときにメニューのアイコン代わりの絵文字や、本文のタイトルや細かなところが変なことが気になったから調べました。そうしたら太字がいけないみたい。うん、取り敢えず疑似要素では絵文字あるときにはfont-weight:normalで対処しました。うん、上手くいってる。でも、連結文字の国旗がダメみたいです。これも調べたらまだ対応してないみたい。
CPシステムの構築
｜
｜
｜
｜
┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓
└ ┕ ┖ ┗ ┘ ┙ ┚ ┛
├ ┝ ┞ ┟ ┠ ┡ ┢ ┣
┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫
■─┬──
│
├─
│
├─
│
├─
─ ━ ╌ ╍ ┄ ┅ ┈ ┉
│ ┃ ╎ ╏ ┆ ┇ ┊ ┋
┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓
└ ┕ ┖ ┗ ┘ ┙ ┚ ┛
├ ┝ ┞ ┟ ┠ ┡ ┢ ┣
┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫
┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳
┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻
┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋
╭ ╮ ╯ ╰ ╱ ╲ ╳
╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
文字取得：罫線 /home/new-diary/diary/2020/05/1590583723.html?page=25
U+2500 : ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
U+2510 : ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
U+2520 : ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
U+2530 : ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
U+2540 : ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
U+2550 : ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
U+2560 : ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
U+2570 : ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
一息つく
■変な挙動が発生。もしかすると致命的な欠陥なのか？
このページの左側に並ぶヘッダーとメニュー。ときには横に移動してもらいたい時があるよね。その場合は複数対応させる為にクラスに変更を与えるの。そして操作もアンカー要素でjavascriipt:....としているのもあるよね。うん、左下に処理の内容が表示されていて安心なのもあるわ。
#menu, #header { position:fixed; left:0; transition:left .5s; }
.menu-out #menu, .menu-out #header { left:-20vw; }
上にCSSファイルから関係する箇所を抜粋して記述したので読んで欲しい。うん、bodyかどこか上の要素にクラスを追加すると左に移動するのが分かると思う。
💙クラスの追加 add('menu-out')
💙クラスの除去 remove('menu-out')
さて、今度は上にあるアンカーでbody要素のclassListに対する処理を入れたから試して欲しい。ひとつだけポツンと取り残されたものは#meuや#header内にない要素なのが分かると思う。うん、クリックすると左に行ったり戻ったりするのが分かるよね。
💗toggle('menu-out') → 上の💙と同じ構成 ※fireFox 要注意！
document.body.classList.toggle('menu-out')さて、ここが本題です。上のリンクはfireFoxではページがtrueに置き換えられの。ページ変移じゃなく。だからF5でリロードするしかならなくなって致命的です。穴が開くほどみてもミスはない。そもそもミスするほどのものじゃない。
💛toggle('menu-out')
💛toggle('lini-out')
(function(){document.body.classList.toggle('menu-out')})()
(function(){document.body.classList.toggle('link-out')})()そこでわたしは閃いた。困ったときは即時関数ってこと。そのように変更したものが上のものです。ついでに残ったものを操作するリンクも表示しました。試せば分かる通り上手くゆきます。もしもこれと同じような状態になったとき覚えておけば役に立つと思う。
💛bcToggle関数の組み込み クリックで定義します。
class="var-font"
href="bcToggle = function(s){document.body.classList.toggle(s)};
bcToggle('font-min')"上のコードはリンク（A要素）の中身で実際は改行せずに1行になっています。クリックして定義する前は下にあるリンクは作動しません。リンクの::beforeが💗→💚になると作動します。そして、上のリンクは定義すると必要ないから小さくなって消えます。実際はfont-size:0で小さくなって見えないだけです。
menu-out link-out 両方とも適用
💙システム手帳より --diary.css--
ひとつが分かれば他の領域、本文とクラスの追加で自在に変化させることが出来るよね。今、試しているのはそのルールの適用であって大変なのは構築の方かな。うん、上にCSSファイルを表示するコマンドを付けたシステム手帳へのリンクを表示したから読める人は読んで欲しい。あ、diary.cssはcommon.cssをインポートしているからcommon.cssから読んだ方がいいかも。うーん、どうなんだろう。そんな奇抜な手法は用いていないから読み易いと思うんだけど難しいのかな。
うん、致命的な欠陥と思いましたが回避する方法あるので一安心です。回避は出来たけれど、add()とremove()が良くてappend()がダメなのは解からない。しかもChromeでは何ともないのに。うん、超久しぶりにクロームで開いてみたんだけれどメニューが変。リストの記号がモノクロになってる。
🟦 🟥 🟫 🟪 🟨 🟦 🟩 🟩
上のようなとってもカラフルな色彩になっている筈なのにモノクロ。きっと、（モノ)クロームだからかも。それはそうと・・・fireFoxとChromeの違いがあり過ぎには驚いた。うん、連結文字の国旗が全く反映していないし。どうなっているのだろう。
💙Chromeで開いたときにメニューのアイコン代わりの絵文字や、本文のタイトルや細かなところが変なことが気になったから調べました。そうしたら太字がいけないみたい。うん、取り敢えず疑似要素では絵文字あるときにはfont-weight:normalで対処しました。うん、上手くいってる。でも、連結文字の国旗がダメみたいです。これも調べたらまだ対応してないみたい。
CPシステムの構築
｜
｜
｜
｜
┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓
└ ┕ ┖ ┗ ┘ ┙ ┚ ┛
├ ┝ ┞ ┟ ┠ ┡ ┢ ┣
┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫
■─┬──
│
├─
│
├─
│
├─
─ ━ ╌ ╍ ┄ ┅ ┈ ┉
│ ┃ ╎ ╏ ┆ ┇ ┊ ┋
┌ ┍ ┎ ┏ ┐ ┑ ┒ ┓
└ ┕ ┖ ┗ ┘ ┙ ┚ ┛
├ ┝ ┞ ┟ ┠ ┡ ┢ ┣
┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫
┬ ┭ ┮ ┯ ┰ ┱ ┲ ┳
┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻
┼ ┽ ┾ ┿ ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋
╭ ╮ ╯ ╰ ╱ ╲ ╳
╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
文字取得：罫線 /home/new-diary/diary/2020/05/1590583723.html?page=25
U+2500 : ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
U+2510 : ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
U+2520 : ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
U+2530 : ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
U+2540 : ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
U+2550 : ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
U+2560 : ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
U+2570 : ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
更新ページの状況
CSSルールの定義の全てを移植。
CSS-Aをlinks.cssへ。15780/20000(max)
CSS-Bをbbs.cssへ。15837/20000(max)
CSS-Cをbbs_form.cssへ。7225/20000(max)
CSS-Dをmenu.cssへ。8414/20000(max)
echo("cssDisp", cssDefaultRep(keys("ファイル")));
移植ファイルはcssDefaultRepで復元済み。
#217407～#217388の「20ページ」を確保。
CGIで実装分(C253)を取得。
execCode A : #217407
8888文字。残り十分。
短縮エイリアス、extra 拡張の定義、1月分の索引の追加。
短縮エイリアス、extra 拡張の定義、1月分の索引の追加。
execCode B : #217406
14461文字。限界近い。
バインダーの処理、TAB関数、コード文字置換、編集関係。
バインダーの処理、TAB関数、コード文字置換、編集関係。
execCode C : #217405
8195文字。残り十分。
PC情報、サムネイル関係、ファイル表示関係、新着日記関係。
PC情報、サムネイル関係、ファイル表示関係、新着日記関係。
execCode D : #217404
15892文字。限界 仕分けが必要。
コメント関係、ユーザーエントリ、メニューの生成、先読み、表示領域切り替え、リンクのフック、全てのエントリ、その他小物。
※振り分け完了。10817文字になる。コメント関係を転移。
コメント関係、ユーザーエントリ、メニューの生成、先読み、表示領域切り替え、リンクのフック、全てのエントリ、その他小物。
※振り分け完了。10817文字になる。コメント関係を転移。
execCode BOOT : #217403
801文字。残り十分。
設定ファイルを置くので余裕を持たせる。
設定ファイルを置くので余裕を持たせる。
execCode E : #217402
2514文字。新たに新設。
コメント関係を移設。
コメント関係を移設。
docCode A : #217398
12506文字。
cssCode A : #217397
14525文字。
基礎、汎用領域、バインダーシステム、TABシステム、領域切り替え。
💚記事内のCSSの記述でのcontentで拡張文字は\01f49a（左の緑のハート）のようにエスケープする。
基礎、汎用領域、バインダーシステム、TABシステム、領域切り替え。
💚記事内のCSSの記述でのcontentで拡張文字は\01f49a（左の緑のハート）のようにエスケープする。
cssCode B : #217396
14655文字。仕分けが必要。
各領域の項目の見出し、メニュー内、本文内。
※仕分け終了。11687文字へ。汎用領域移設。
各領域の項目の見出し、メニュー内、本文内。
※仕分け終了。11687文字へ。汎用領域移設。
cssCode C : #217395
3377文字。
新着日記関係、コードの装飾、全記事索引、状態別装飾。
新着日記関係、コードの装飾、全記事索引、状態別装飾。
cssCode D : #217394
3048文字。
汎用領域のエントリ、コメント関係。
💚box-par .box-a .box-b
汎用領域のエントリ、コメント関係。
💚box-par .box-a .box-b
メインシステムのフロー (2021 01/18 現在)
・main.htmlの表示
・main.cssの組み込み
・処理 =>
・関数の無効化 : checkFrame eitherOwnerOrGuest
・関数の定義 : fullDec evalDec
・区別の定義 => document.documentElement.id = "extend"
・クラスの初期値 : add("us1","f1","n0","notbar");
・ファビコンの定義 : main.html => favicon1.ico not favicon2.ico
・関数の定義 : xhr key bootEntry
・フレーム以外での処理 : リファラー振り分け
・bootEntry関数 =>
・xhrの実行 => "/cgi-bin/diary.cgi?oid=new-diary;n=20;c=253"
・局所関数の定義 : keys job
・エラーフック付きで実行 => job([A-F])
・bodyの構築 => echo(doc.body, docDefaultRep(keys("DOC-A")))
・CSSの構築 => echo("cssDisp", cssDefaultRep(keys("CSS-[A-D]"))
・起動関数の実行 => job("BOOT")
・job(A) : execCode-A A217407 C253 10990/13918 34関数 3変数
・広域変数の定義 : win doc isMobile
・広域関数の定義 : Fid Ftag Fcn Fce Fap Fcv res enc Fce echo counter echoCounter fs1 dateToOnes pageLogs dispChg dateEntry docDefaultRep cssDefaultRep extraEntry extraRemove yearListEntry yearListCreate yearListAppend cgiCount createCgiCount onesData monthPageRep uDate modeFunc modeOf getLogs userVoid ddCssEntry
・job(B) : execCode-B A217406 C253 10684/13275 40関数 2変数
・広域変数の定義 : codeAjastObj codeAjastTop
・広域関数の定義 : appliEntry mode masEntry cenEntry cenImage dispPrefix headerShow formShow ending cenCtrl dtChange newMonthChange tabsCount tabsDelay tabsEntry dispUp scrollDisp edEntry createLine codeAjast codeAjastExec codeSpc codeSec codeOne codeEnt codeEnd codeCol jsCodeRep cssCodeRep docCodeRep eTabCreate archiveUpdateEntry upDateEntry postEntry formCounter addEntry editEntry getEntry topFixEntry formRows
・job(C) : execCode-C A217405 C253 7447/10074 12関数
・広域関数の定義 : getPcInfo allShow allEntry echoAll cateChg allIndexEntry allLoop allIndexMain parMove loadDataTo transUpdate transLoop
・job(D) : execCode-D A217404 C253 12021/15475 9関数 5変数
・広域変数の定義 : isAll xmlMonth cueDisp cueUser cueComment
・広域関数の定義 : mainShow mainShowEntry axRep echoMain xmlEntry createDiaryMenu viewEntry cueLoop allShow
・job(EXEC) : execCode-BOOT A217402 C253 705/827 13変数
・広域変数の定義 : FxDec msCNT mmCNT msCNTbef mmCNTbef cenCtrlCnt cenCNT m3CNT isCue Cue cMode modeOf
・処理 => isLogin = doc.cookie.indexOf("SID=") != -1;
・処理 => FxDec.visUser window.scrollTo(0,1);
・job(E) : execCode-E A217402 C253 10010/13242 12関数
・広域関数の定義 : commentUpdateEntry newCommentEntry commentTagsRep comeEditCounter commentEditEntry inlineEntry htmlFileRep cssFileRep fileRep fileViewEntry fileShowEntry delayScroll
・job(F) : execCode-F A217401 C253 1727/2122 3関数
・広域関数の定義 : m3ImgEntry createThumbnail thumbUnLoadCheck
・処理 : xmlEntry => cueLoop => mainShowEntry createDiaryMenu allEntry