• 追加された行はこの色です。
• 削除された行はこの色です。
• 自作プラグイン/switch へ行く。
• 自作プラグイン/switch の差分を削除

#author("2025-10-04T03:05:15+09:00","default:kanateko","kanateko")
#author("2025-10-06T00:07:49+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

#ref(switch.webp,center,wrap,500x)

#contentsx

*操作によって表示内容を切り替えるプラグイン [#summary]

#infobox(plugin){{
name = switch
ver = 1.2.0
ver = 1.2.1
pukiwiki = 1.5.4
update = 2025-10-03
update = 2025-10-05
}}

inputのrangeやselectで選択した値に応じ、同じグループに属する他の要素の表示を切り替える。同一ページ内に複数のグループを設置して別々に操作することが可能。

[[selectプラグイン>../select]]の拡張版であり、変則的な[[tabプラグイン>../tab]]とも言える。

#box(label,label-style=full,box-color=blue,title=このプラグインでできること){{
-ユーザーが選択した値に応じ、同じグループに属する他の要素の表示を切り替える。
--操作にはinputのrange、select、numberが使える。
--複数グループを同一ページ内に配置可能。
--インライン型で文中やテーブル内に配置したり、ブロック型で段落丸ごと表示を切り替えたりできる。
---ブロック型ではマルチラインプラグインの入れ子も可能。
}}

#clear

*ダウンロード [#download]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2025-10-05|1.2.1|#ul(numberでminを指定した場合にindexがズレる問題を修正,rangeやnumberに0以下のstepを設定できないように変更)|
|2025-10-03|1.2.0|#ul(新たに数値入力式のnumberを追加,従来のnumber→linearに変更,rangeやlinearで初期表示される数字のフォーマットを改善,range以外もinput-widthで幅を指定できるよう改善)|
|2025-09-15|1.1.2|#ul(numberで負の値のステップに対応,numberで最小値が未指定の場合の処理を追加 (-INF))|
|2025-09-11|1.1.1|#ul(numberで最大値が未指定の場合の処理を追加 (INF),表示する数字を千の位ごとに区切るように調整)|
|~|1.1.0|#ul(numberタイプを追加)|
|2025-09-01|1.0.2|#ul(オプションが空の場合に、表示要素があってもエラーが出る問題を修正)|
|2024-09-09|1.0.1|#ul(マルチライン内のテーブルが正しく変換されない問題を修正)|
|2024-08-25|1.0.0|#ul(初版作成)|

*セットアップ [#setup]
+ダウンロードした「plugin-switch」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。
+pukiwiki.ini.phpを編集してマルチラインプラグインを許可する。

#prism(diff-php diff-highlight){{
- define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 1); // 1 = Disabled
+ define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}

*プラグイン設定 [#setting]
#style(word-break:break-all;,class=table_compact){{{
#tableif(^(int|\d+)$=COLOR(#62bf4b),^string|'$|DIR \.=COLOR(#cb643d),^(bool|true|false)$=COLOR(#463dcb),^(array|\[.+\])$=COLOR(#ec91ed)){{
|~グローバル&br;(PLUGIN_SWITCH_~)|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|CSS|string|SKIN_DIR . 'css/switch.min.css'|CSSのパス|
|JS|string|SKIN_DIR . 'js/switch.min.js'|JSのパス|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~PluginSwitchBaseクラス (インライン)|
|DEFAULT_CLASS|string|'plugin-switch'|デフォルトのクラス名|
|DEFAULT_GROUP|string|'default'|デフォルトのグループ名|
|DEFAULT_HTML_TAG|string|'span'|表示タイプdefaultで使用するHTMLタグ|
|DEFAULT_SEPARATOR|string|':'|デフォルトのセパレータ (表示要素の切り分け)|
|DEFAULT_TYPE|string|'default'|デフォルトの表示タイプ|
|DEFAULT_RANGE_ATTRS|array|[1, 10, 1]|デフォルトのrangeスライダーの属性 (min, max, step)|
|>|>|>|BGCOLOR(--color-key):COLOR(white):~PluginSwitchMLクラス (ブロック)|
|DEFAULT_HTML_TAG|string|'div'|表示タイプdefaultで使用するHTMLタグ|
|DEFAULT_SEPARATOR|string|'#-'|デフォルトのセパレータ (表示要素の切り分け)|
}}
}}}

*使用方法 [#usage]
 &switch([オプション]){ 表示要素1 : 表示要素2 : 表示要素3 : ... };
 
 #switch([オプション]){{
 表示要素1
 #-
 表示要素2
 #-
 表示要素3
 #-
 ︙
 }}

基本的な使い方は上のようになるが、表示形式にrangeやnumber、linearを指定した場合のみ表示要素の書き方が異なる。

 &switch(range/number){ [min] : [max] : [step] };
 
 例：&switch(range){ 1 : 5 : 1 }; // 1から5まで1ずつ進む

numberやlinearの場合は、stepに負の値を指定したり、minやmaxを指定しない (= 無限) ことも可能。

 例1：&switch(number){ 1 : : 2 }; // 1から2ずつ加算していく (上限なし)
 例2：&switch(number){ 1 : }; // 1から1ずつ加算していく (上限なし)
 例3：&switch(linear){ 1 : 10 : -2}; // 10から1まで2ずつ減算していく (下限なし)
 例3：&switch(linaer){ : 10 : -5 }; // 10から-5ずつ減算していく (下限なし)

最後の引数に全く何も書かなかった場合は、`::1` (min = -INF, max = INF, step = 1)と指定したのと同じ扱いになる。

stepが正の値の場合にはminを、負の値の場合にはmaxを初期値の基準にするため、指定しないと正常な結果は得られない。

**オプション [#option]
#box(label,title=共通){{
:group =|グループ名。指定しない場合はデフォルトのグループ名が適用される。また、全てのオプションに当てはなまらない引数もグループ名として認識される。
:type =|表示形式。defaultで通常表示 (span/div) 、numberで通常表示での連番、rangeでスライダー、selectでプルダウンになる。指定しない場合はデフォルト設定が適用される。`type=`なしでも指定できる。
:start = |初期状態で表示する要素の番号。1から始まる。指定する場合はグループ名の指定よりも後で指定し、また同グループで最初のプラグイン内で指定する必要がある。
:separator =|表示要素を切り分けるためのセパレータを変更する。表示要素内に":" (コロン) を使いたい時用。
:label =|rangeとselectの左にラベルを表示する。deufaultやnumberでは無視される。
:class =|追加のクラス名を指定する。現状ラベルやrangeの数字表示には適用されない。
}}

#box(label,title=input要素で有効){{
:input-width =|input要素 (number, range, select) の幅 (長さ) を数字で指定する。単位がない場合はpx扱い。
}}

#box(label,title=selectで有効){{
:transparent|プルダウンの枠や背景を透明にする。
:rtl|プルダウン内のテキスト表示を右から開始させる。どうしてもテキスト (主に数字) を右寄せにしたい時用。
:disable|プルダウンを操作不能にする。
}}


*使用例 [#example]
#tab{{{{
#:表示
&switch(test,range,start=2,label=スライダー：){1:3};
&switch(test,number,start=2,label=数値入力：){2:6:2}; ← スライダーの数値x2
&switch(test,linear){3::3}; ← スライダーの数値 x3
&switch(test,select,separator=|,label=プルダウン){選択肢1|選択肢2|選択肢3};
&switch(test){''インライン表示1'':&color(red){インライン表示2};:インライン表示3};

ブロック表示
#switch(test){{{
#flex(gap=12,left){{
&ref(../swiper/1.webp,360x);
#-
&ref(../swiper/1.webp,360x);
}}
#-
&ref(../swiper/2.webp,360x);
#-
&ref(../swiper/3.webp,360x);
}}}

#:ソース
 &switch(test,range,start=2,label=スライダー：){1:3};
 &switch(test,number,start=2,label=数値入力：){2:6:2}; ← スライダーの数値x2
 &switch(test,linear){3::3}; ← スライダーの数値 x3
 &switch(test,select,separator=|,label=プルダウン){選択肢1|選択肢2|選択肢3};
 &switch(test){''インライン表示1'':&color(red){インライン表示2};:インライン表示3};
 
 ブロック表示
 #switch(test){{{
 #flex(gap=12,left){{
 &ref(../swiper/1.webp,360x);
 #-
 &ref(../swiper/1.webp,360x);
 }}
 #-
 &ref(../swiper/2.webp,360x);
 #-
 &ref(../swiper/3.webp,360x);
 }}}

}}}}

*備考 [#notes]
-select用のオプションはselectプラグインとの互換用で実際あまり使う機会はないと思われる。互換とは言っても表示要素を書く位置が違うので結局そまま置き換えることはできないが。
-デフォルトのセパレータをselectプラグインから変えたのは、"|"だとテーブル内で記述できなかったため。
-グループ内で表示要素の数が合っていなくても特にエラーは出ないが、基本的に推奨はしない。
-linearに何も考えずnumberの名称を使ってしまったのは完全にミスだった。傷の浅いうちに軌道修正を...

*コメント [#comment]
#pcomment(reply)