パネル部品他のプラグイン 📖

パネル部品と関連する命令群

プログラム: (→大)
！インデント構文 /* 2026年01月02日ver　ベータ版と中身に変更なし　プラグイン名を「panel」にした 以下の命令が含まれます #----------------------------------------------------------------------- ※親部品・キャンバスのスタック命令ほか #----------------------------------------------------------------------- ●部品作成先変更(domに) ●部品作成先取得 ●部品作成先保存 ●部品作成先一時変更(domに) ●部品作成先戻す #----------------------------------------------------------------------- ●描画先一時変更(domに) ●描画先保存 ●描画先戻す ●描画状態保存 ●描画状態戻す ●キャンバスサイズ変更(domをwhに) #----------------------------------------------------------------------- ※前後の部品参照命令 #----------------------------------------------------------------------- ●前部品(domのnだけ|n) ●後部品(domのnだけ|n) ●直前部品(domの) ●直後部品(domの) #----------------------------------------------------------------------- ※パネルとパネル内配置命令 #----------------------------------------------------------------------- ●パネル作成(whの) ●パネル内配置(domをsizeへ|sizeに) ●右側(domの) ●下側(domの) ●DOMサイズ取得(domを|domの|domから) ●縦長レイアウト(domを) ●横長レイアウト(domを) ●全体レイアウト(domを) #----------------------------------------------------------------------- ※移行命令(transition-) #----------------------------------------------------------------------- ●移行時間変更(domをvに) ●移行タイミング関数変更(domをvに) ●移行ディレイ変更(domをvに) #----------------------------------------------------------------------- */ #----------------------------------------------------------------------- ※親部品・キャンバスのスタック命令ほか #----------------------------------------------------------------------- //「部品作成先戻す」で以前の親部品に戻します 部品作成先スタック=[] //「DOM親部品設定」の言いかえ ●部品作成先変更(domに) 　domにDOM親部品設定 //domを返します ●部品作成先取得 　DOM親要素を戻す //現在の親部品を記憶します。「部品作成先戻す」で戻します ●部品作成先保存 　部品作成先スタックにDOM親要素を配列プッシュ //親部品を一時的に変更します。「部品作成先戻す」で戻せます ●部品作成先一時変更(domに) 　部品作成先保存 　domにDOM親部品設定 　domを戻す ●部品作成先戻す 　部品作成先スタックから配列ポップ 　それにDOM親部品設定 　それを戻す #----------------------------------------------------------------------- //描画中キャンバスの一時変更と戻す 描画先スタック=[] ●描画先一時変更(domに) 　描画先スタックに描画中キャンバスを配列プッシュ 　domへ描画開始 ●描画先保存 　描画先スタックに描画中キャンバスを配列プッシュ ●描画先戻す 　描画先スタックから配列ポップ 　それへ描画開始 //言いかえ ●描画状態保存 　キャンバス状態保存 ●描画状態戻す 　キャンバス状態復元 //キャンバスの見た目と中身のサイズを変更します ●キャンバスサイズ変更(domをwhに) 　dom.幅 = wh[0] 　dom.高 = wh[1] 　dom.幅属性 = wh[0] 　dom.高属性 = wh[1] 　domを戻す 　 #----------------------------------------------------------------------- ※前後の部品参照命令 #----------------------------------------------------------------------- //domのn個前の部品を返す //「|n」で「domのn前部品」を定義するメリット：「domの2つ前部品」と書ける。単位「つ」が省略されるため ●前部品(domのnだけ|n) 　変数　target=dom 　もしnが数列判定でなければ、n=1 　n回 　　　target = target["previousElementSibling"] 　targetを戻す //domのn個後ろの部品を返す ●後部品(domのnだけ|n) 　変数　target=dom 　もしnが数列判定でなければ、n=1 　n回 　　　target = target["nextElementSibling"] 　targetを戻す //domの一つ前の部品を返す ●直前部品(domの) 　前部品(dom,1) //domの一つ後の部品を返す ●直後部品(domの) 　後部品(dom,1) #----------------------------------------------------------------------- ※パネルとパネル内配置命令 #----------------------------------------------------------------------- //[幅,高さ]のパネル(divタグ)を作成します。 //パネルのサイズを超えた部品があるとスクロールバーが出ます //（スタイルが"position": "relative"、"overflow":"auto"で[w,h]の大きさのdivタグを作成します） ●パネル作成(whの) 　変数　w = wh[0] 　変数　h = wh[1] 　もしwが数列判定ならば、w = w & "px" 　もしhが数列判定ならば、h = h & "px" 　変数　dom=「div」のDOM部品作成 　domに{ 　　"幅": w 　　"高": h 　　"position": "relative"　//内側に"position": "absolute"を配置する 　　"overflow": "auto"　//はみ出した場合　auto:スクロールバーがでる　visible:はみ出して表示(初期値)　hidden:表示しない 　}をDOMスタイル一括設定 　domを戻す //パネル内のdom部品を位置[x,y]に配置します //（domを"position": "absolute"にしてtopとleftを変更します） //引数について　省略・[x,y]・[x,y,w,h]の3通りを想定 //　座標の省略：　domをパネル内配置 //　座標　　　：　domを[x,y]へパネル内配置 //　サイズ　　：　domを[x,y,w,h]へパネル内配置 ●パネル内配置(domをsizeへ|sizeに) 　domに{ 　　　"position": "absolute" 　}をDOMスタイル一括設定 　 　//[x,y]または[x,y,w,h]を指定した場合 　もしsizeの要素数が2以上ならば 　　変数　x = size[0] 　　変数　y = size[1] 　　もしxが数列判定ならば、x = x & "px" 　　もしyが数列判定ならば、y = y & "px" 　　domに{ 　　　"左": x 　　　"上": y 　　}をDOMスタイル一括設定 　 　//[x,y,w,h]を指定した場合 　もしsizeの要素数が4以上ならば 　　　変数　w = size[2] 　　　変数　h = size[3] 　　　もしwが数列判定ならば、w = w & "px" 　　　もしhが数列判定ならば、h = h & "px" 　　　dom.幅=w 　　　dom.高さ=h 　 　domを戻す //domの右側の座標[x,y]を返します //使用例：それをdomの右側にパネル内配置 ●右側(domの) 　[dom.offsetLeft + dom.offsetWidth, dom.offsetTop]を戻す　//[x+w, y] //domの下側の座標[x,y]を返します ●下側(domの) 　[dom.offsetLeft, dom.offsetTop + dom.offsetHeight]を戻す　//[x, y+h] //domの[x,y,w,h]を返します ●DOMサイズ取得(domを|domの|domから) 　[dom.offsetLeft, dom.offsetTop, dom.offsetWidth,dom.offsetHeight]を戻す //・レイアウト命令 //パネル内の部品を座標の位置から縦幅いっぱいに広げる //なでしこv1ほど柔軟ではない（可変でない）ので注意 ●縦長レイアウト(domを) 　domに{"height": "calc(100% - {dom.上})"}をDOMスタイル一括設定 　domを戻す //パネル内の部品を座標の位置から横幅いっぱいに広げる ●横長レイアウト(domを) 　domに{"width": "calc(100% - {dom.左})"}をDOMスタイル一括設定 　domを戻す //パネル内の部品を座標の位置から右下いっぱいまで広げる ●全体レイアウト(domを) 　縦長レイアウト(dom) 　横長レイアウト(dom) 　domを戻す #----------------------------------------------------------------------- ※移行命令(transition-) #----------------------------------------------------------------------- //移行にかかる時間を変更します(単位:秒)"transition-duration" ●移行時間変更(domをvに) 　もしvが数列判定ならば、v="{v}s" 　domに{"transition-duration": v}をDOMスタイル一括設定 　domを戻す //移行スピードに関する緩急の関数を0～4(または"ease"などのテキスト)で指定します // 0 : linear　　直線的　　 // 1 : ease　　　緩急緩　　一般的な曲線　　 // 2 : ease-in　　緩急　　最後がはやい　　 // 3 : ease-out　　急緩　　初速がはやい　　 // 4 : ease-in-out　急緩急　途中がおそい　　 //移行時間変更した部品にのみ有効です ●移行タイミング関数変更(domをvに) 　もしvが数列判定ならば 　　　v = ["linear","ease","ease-in","ease-out","ease-in-out"][CLAMP(v,0,4)] 　domに{"transition-timing-function": v}をDOMスタイル一括設定 　domを戻す //移行開始するまでの時間を変更します(単位:秒) ●移行ディレイ変更(domをvに) 　もしvが数列判定ならば、v="{v}s" 　domに{"transition-delay": v}をDOMスタイル一括設定 　domを戻す #----------------------------------------------------------------------- もしプラグイン名が「メイン」ならば 　　『使用時のサンプルは[https://n3s.nadesi.com/id.php?3149](https://n3s.nadesi.com/id.php?3149)』をマークダウンHTML変換してラベル作成