WixStudioでVeloを使う Step 39 「マルチステートボックス」
はじめに
マルチステートボックスもおもしろい。WixStudioには魅力的なパーツが十分に揃っている。これらのパーツを必要なところに自由に配置できるから、コードが書けなくても魅力的なサイトを仕上げることができる。しかし、以前にも触れたことがあるがパーツの中にはコードと組み合わせなければ使えないパーツが存在する。今回触れていくのはそんなコード必須要素の一つである「マルチステートボックス」。使えれば非常に便利だけどノーコードツールとしてWixStudioを利用しているウチはその魅力を知ることが出来ない。それは勿体ない。だから、今回はマルチステートボックスに触れてみる。
マルチステートボックスはコードが必須
準備
新しくサイトを作成しておく。コードも有効にしVeloを有効にしておく。
マルチステートボックスを配置する
ページにマルチステートボックスを配置する。
マルチステートボックスを配置
マルチステートボックスはVelo(コード)での操作が必要になるので、要素のIDも設定しておいた方が良い。
| 要素 | ID |
|---|---|
| マルチステートボックス | myFirstMultiStateBox |
マルチステートボックスについて
マルチステートボックスについて簡単に説明しておく。マルチステートボックスはマルチステートであることを除けば、単なる コンテナ要素 と変わらない。Box要素は他の要素を、その内側に複数配置することができたり、背景やレイアウト調整には欠かせない要素。
コンテナ要素
マルチステートボックスもコンテナ要素と同様に画像やテキストなどの要素をその内側に複数配置することができる。
複数の要素をその内側に配置することができる
もちろんコンテナ要素とマルチステートボックスでは利用目的が異なるため、レイアウト調整の面でいえばコンテナ要素の方が細かい調整が容易。マルチステートボックスが活きるのは別の場面になる。
マルチステートである
マルチステートとは 複数の状態 ということで、マルチステートボックスは 複数の状態を持つ事ができるボックス要素 ということになる。コンテナ要素が複数の状態を持つとどうなるか考える。
例えば、画像とテキストが配置されたコンテナ要素があったとする。
テキスト要素と画像要素が配置されたコンテナ要素
コンテナ内配置された要素は基本的には固定的。要素が増えたり減ったり、画像が差し替わったり、テキストの内容が変化することはない。
マルチステートボックスは、この固定的な状態を 変化させる ことが出来る。
…う～ん…。この表現もやや怪しい気がする。
改めまして、
マルチステートボックスは複数の状態を保持し、切り替えて使うことができる要素。の方が…しっくり…かな。
ステートの管理
マルチステートボックスは複数の状態を保持する 。状態(以下、マルチステートボックスの状態を「ステート」と呼ぶ)は「ステートの管理」から制御する。
マルチステートボックスのステートの管理
標準でいくつかの状態が用意されている。状態は自由に増やしたり減らしたりすることができる。マルチステートボックスを利用するときにはステートの管理が必要になる。
ステートをまずは整理する。標準ではbox1やbox2が用意されている。
ステートは、IDの変更、削除、複製ができる
不要なステートは削除し、IDを変更しておく。今回は既に要素が配置されているbox2をstep1とし、他のステートは削除した。
IDはstep1として、他は削除した
次に、マルチステートボックスに新しいステートを作成してみる。新規にステートを追加する事も出来るが、複製する方が使い勝手がいい。ステートの管理からstep1を選択し、ステートを複製を押す。新しいステートが用意されるのでIDを変更しておく。IDはstep2とした。
step1を複製して、step2を作成
ステートの管理で step2 を選択し、マルチステートボックスに配置された要素に変化を加えてみる。
step2を選択し、要素を手を加える
極力、変更前の面影はすっかりなくしてみた。
ここで、ステートの管理からstep1を選択してみると変更前の状態が確認出来る。
step1を選択すると、変更前の状態が確認出来る
このように、ステートの管理から既存ステートを複製したり、新規追加することができるのがマルチステートボックスの特徴。マルチステートボックス内のレイアウトをステート毎に変化させ、ステートを切り替えることで場面に応じた内容を表示させることができるという便利な要素！これがマルチステートボックス。
重大な欠点
このマルチステートボックスは重大な欠点がある。それはプレビューかサイトを公開すればわかるが ステートを変更する機能を持っていない という点。
どういうことかというと。マルチステートボックスを配置してステート毎のレイアウトを調整したとして。いつどのタイミングでどのステートに切り替えるのか を設定する機能は有していないということ。ステートを切り替える制御にはVelo(コード)を使うことが求められている。
だからノーコードでWixStudioを使う限りはマルチステートボックスを十分に活かすことが出来ないということになる。
Velo(Script)を書く
マルチステートボックスのステート制御にはVeloが必須になるので、これを試す。
準備
まず、ステートを切り替える制御について以下の点を整理しておく。
- どんなタイミングでステートを切り替える？
- どのステートに切り替える？
今回はドロップボックスを利用することにする。ドロップボックスが変更されたら(どんなタイミングでステートを切り替える？)、ドロップダウンの値に応じて(どのステートに切り替える？)ステートを切り替えることにする。
ドロップダウンを追加する
ドロップダウンの設定は以下の通り。
まず要素のIDはselectStateDropdown。
| 要素 | ID |
|---|---|
| ドロップダウン | selectStateDropdown |
選択肢は2つstep1とstep2の二つ。
| ラベル | 値 |
|---|---|
| Step1 | step1 |
| Step2 | step2 |
IDと値はコードに影響するため注意。他の設定はこだわらないので自由。
ドロップダウンが完成
コード
$w.onReady(function () {
$w('#selectStateDropdown').onChange( event => {
const selected = event.target.value;
$w('#myFirstMultiStateBox').changeState(selected);
});
});
コードはそれほど難しくない。
ポイントとなるところは$w('#myFirstMultiStateBox').changeState(selected);。$w('#myFirstMultiStateBox')はページに配置されたマルチステートボックス(ID:myFistMultiStateBox)を指している。続く.changeState(selected);はマルチステートボックスのステートを変更する記述。changeState()の引数に変更したいステートIDをしていすれば、ステートが切り替わる。マルチステートボックス(ID:myFistMultiStateBox)にはstep1とstep2の二つのステートが用意されているので、そのいずれかを指定すればいい。step1に切り替えたければchangeState('step1')という具合。
コードでは.changeState(selected);としているが、selectedにはstep1とstep2のいずれかが入る。直前のconst selected = event.target.value;でselectedの値が確定する。ドロップダウンが変更された際に、そのドロップダウンの値(event.target.value)が設定される。もしわかりづらければconst selected = $w('#selectStateDropdown').value;と書き直しても良い。
最後にこれらの処理はドロップダウン(ID:selectStateDropdown)が変更された時に動作すれば良いので$w('#selectStateDropdown').onChange( event => { .... });の記述で囲えばスクリプトが完成する。
動作確認
実装したページは以下のURLから確認出来る。
ドロップダウンを切り替えるとマルチステートボックスの内容が切り替わる様子が確認出来る。
ドロップダウンでStep1を選択
ドロップダウンでStep2を選択
まとめ
WixStudioには素敵なパーツが用意されている。正直、マルチステートボックスのような手間がかかるパーツを敢えて使う必要はない。他の要素を使って別の表現を実現してもいいと思う。しかし、手間はかかるけどマルチステートボックスのような要素が使えるようになれば表現の幅は拡がる。出来ないと思っていたことが、簡単なコードで実現出来るならやっぱりしておいて損はないと思う。お客さまからの要望を断らなくて済む。
今回はドロップダウンを使った切り替えを試した。これは基本的な実装方法の提示にすぎない。切り替えを別の要素による操作で実現してもいい。ドロップダウンではなくボタンやラジオボタン。時間や日付によっても制御出来る。特定の操作によってのみ提示される隠し要素にしてゲーム性を高めてみるのも面白い。紙芝居的なコンテンツもできる。
まずは触れておけば、マルチステートボックスの活かしどころに出会えるはず。
そして、WixStudioにはマルチステートボックス以外にもコードとの組み合わせが必要な要素がある。これらについても積極的に触れておきたい。
つづき
Discussion