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

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

エディタ

プログラム

！インデント構文
/*
 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変換してラベル作成

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ