#author("2026-05-06T02:44:55+09:00","default:kanateko","kanateko")
#author("2026-05-06T02:49:27+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
#ref(switch.webp,center,wrap,500x)
#contentsx
*操作によって表示内容を切り替えるプラグイン [#summary]
#infobox(plugin){{
name = switch
ver = 1.3.0
pukiwiki = 1.5.4
update = 2026-05-06
}}
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-switch/releases]]
|~日付|~バージョン|~備考|h
|CENTER:120|CENTER:60|590|c
|2026-05-06|1.3.0|#ul(コードをリファクタリングし、単一のファイルに統合,rangeスライダーにスタイルを適用,exponentialオプション追加,decimalsオプション追加)|
|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.inc.php` をPukiWikiの `plugin` ディレクトリに放り込む。
+ダウンロードした `switch.inc.php` をPukiWikiの `plugin` ディレクトリに放り込む。
+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)){{
|~クラス定数|~型|~初期値|~説明|h
|BOLD:BGCOLOR(--table-header-td-color):180|CENTER:80|220||c
|DEFAULT_GROUP|string|'default'|デフォルトのグループ名|
|DEFAULT_SEPARATOR_INLINE|string|':'|インライン型でのデフォルトのセパレータ (表示要素の切り分け)|
|DEFAULT_SEPARATOR_BLOCK|string|'#-'|ブロック型でのデフォルトのセパレータ|
|DEFAULT_RANGE_ATTRS|array|[1, 10, 1]|デフォルトのrangeスライダーの属性 (min, max, step)|
}}
}}}
*使用方法 [#usage]
&switch([オプション]){ 表示要素1 : 表示要素2 : 表示要素3 : ... };
#switch([オプション]){{
表示要素1
#-
表示要素2
#-
表示要素3
#-
︙
}}
基本的な使い方は上のようになるが、表示形式にrangeやnumber、linear、exponentialを指定した場合のみ表示要素の書き方が異なる。
&switch(range/number/linear/exponential){ [min] : [max] : [step] };
例1:&switch(range){ 1 : 5 : 1 }; // 1から5まで1ずつ進む
例2:&switch(exponential){ 10 : 100 : 1.1 }; // 10から1.1倍ずつ増えていく (最大100)
numberやlinear、exponentialの場合は、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ずつ減算していく (下限なし)
例4:&switch(linear){ : 10 : -5 }; // 10から-5ずつ減算していく (下限なし)
最後の引数に全く何も書かなかった場合は、`::1` (min = -INF, max = INF, step = 1)と指定したのと同じ扱いになる。
stepが正の値 (linear) または1.0以上 (exponential) の場合にはminを、負の値 (linear) または1.0未満 (exponential) の場合にはmaxを初期値の基準にするため、これらを指定しない (無限にする) と正常な計算結果が得られない場合がある。
**オプション [#option]
#box(label,title=共通){{
:group =|グループ名。指定しない場合はデフォルトのグループ名が適用される。また、全てのオプションに当てはなまらない引数もグループ名として認識される。
:type =|表示形式。defaultで通常表示 (span/div) 、numberで通常表示での連番 (input型) 、rangeでスライダー、selectでプルダウン、linearで線形補間計算、exponentialで指数関数計算の結果を表示する。指定しない場合はデフォルト設定が適用される。`type=`なしでも指定できる。
:start = |初期状態で表示する要素の番号。1から始まる。指定する場合はグループ名の指定よりも後で指定し、また同グループで最初のプラグイン内で指定する必要がある。
:decimals =|表示する数値の小数点以下の桁数を指定する。linearやexponentialで使用される。rangeやnumberに指定した場合は、同じグループの他の要素にも適用される。
:separator =|表示要素を切り分けるためのセパレータを変更する。表示要素内に":" (コロン) を使いたい時用。
:label =|rangeとselectの左にラベルを表示する。deufaultやnumberでは無視される。
:class =|追加のクラス名を指定する。現状ラベルやrangeの数字表示には適用されない。
}}
#box(label,title=input要素で有効){{
:input-width / slider-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,exponential){10:1000:10}; ← スライダーの数値に合わせて10^x
&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,exponential){10:1000:10}; ← スライダーの数値に合わせて10^x
&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]
#mcomment