こんにちは！
Wixパートナーレベル最上位 レジェンドと、
Velo Developer certificationを取得しています
合同会社アクトワン代表 和田英也です！
今回はWixの開発機能、Veloについて実際の操作画面を見ながら解説したいと思います！
Veloは本格的な Web アプリケーションの開発プラットフォームで、 JavaScript を組み合わせたコーディングで既存のWixエディタには用意されていないカスタム機能を開発できます！
動画ではVeloの開発モードの基本的な使用方法と、 実際にカンタンなコードを書いてVeloのカスタム機能を実装してみようと思うので、是非やってみてください！
それでは早速始めましょう！
▼ 目次
開発モードについて
開発モードをonにするには、開発モードを有効にするをクリックします。
すると、サイドにコードにまつわるバーや、最下部にもコードを書き込むための「コードパネル」が現れます。
コードパネルは上図の矢印の「開く」で、
このように開いた状態になり、コードを書き込むことができます。
最大化、最小化もできます。
イベントハンドラについて
実際にVeloを使ってカスタム機能を構築する際には、コードパネルの他にも「イベントハンドラ」と呼ばれるものがございます。
例えば、上図のようにボタンを設置し、選択した状態でコードパネルを開くと、右側ボタンのIDが出てきます。
IDが"button1"となっています。
こちらを管理するためのパネルを「プロパティパネル」といいます。
ページ要素の設置しているパーツのIDや、デフォルト値、要素に応じたイベントハンドラが利用できます。
イベントハンドラは、機能を作っていく上でとても重要になってきます。
例えば今ボタンを選択しています。
この状態で、このボタンがどのような操作をしたときにコードで指示した内容が起動するか、という設定を行うことができます。
こちらのプロパティパネルで設定するイベントは「静的イベントハンドラ」と呼ばれる固定的なイベントハンドラになります。
イベントハンドラにはもう一種類、「動的イベントハンドラ」と呼ばれるものがあり、こちらはコード上で直接ハンドラを書き込みます。
よく使うイベントハンドラとしてonClickというものがあります。
こちらをクリックします。
するとこのコードパネルの箇所に"export function button1 click(event)"と出てきます。
こちらはbutton1をクリックした時にどのような動作をするかを、コードで表すような書き方をします。
(コードパネルにはデフォルトで上図のようなコードに関するアナウンスが入っていますが、こちらは削除して大丈夫です。)
このようにイベントハンドラをonにしておいて様々な機能を持たせることができます。
イベントハンドラにはこの他にも
onClick() → 要素がクリック
onDblClick() → 要素がダブルクリックされたとき
onMouseIn() → 要素上にマウスカーソル入ったとき
onMouseOut() → 要素上からマウスカーソルが出たとき
onViewportEnter() → 要素が画面に表示されたとき
onViewportLeave() → 要素が画面外に消えたとき
といったものがございます。
masterPage.jsについて
コードパネルは通常、現在表示されているページのコードを書くように設定されていますが、全てのページにわたる要素のコードを書く場合は
ヘッダーやフッターを選択したらプロパティパネルに出てくる、上図赤枠の「masterPage.js」というものを使います。
masterPage.jsのタブを選択すると現れるコードパネルに書き込まれたコードは全てのページに適用になります。
IDについて
開発モードをオンにすると、上図のように要素を選択したときにIDが選択されます。
赤枠のようにリピーターの時は"repeater1"というIDが表示されます。
こういったIDはコードで指示を与える際に使用します。
データセットにも上図のように"dataset1"というIDがついています。
コレクションにも"companydata"というIDがついています。
コレクション上のプロパティにも、例えばタイトルであれば、"title"といったフィールドIDがございます。
Veloコードの実装
では実際にVeloのコードを書いて、このような仕組みを作っていきましょう。
例えば、表示を押すと、"HELLO"の文字が出て
消去を押すと、空白になるというようなボタンによってテキスト内容が切り替わる仕組みを実装してみましょう。
まずはボタンのテキストを表示にしておきます。
そしてプロパティパネルでonClickのイベントハンドラをonにしておきます。
button1 clickという表示がでてくるので、Enterを押します。
すると赤枠のようにコードが書き込まれました。
(赤枠以外の薄字の部分は削除して問題ありません。)
続いてもう1つボタンを作成して
こちらのボタンのテキストを消去にしておきます。
こちらのボタンはbutton2と表示されるので、先ほどのbutton1の時と同様にプロパティパネルでonClickのイベントハンドラをonにしてコードを書き込みます。
2つのボタンの上にテキストパーツを設置して、こちらのIDを"text1"にしてコードを書き込みます。
「button1のをクリックした時にtext1のテキストは"HELLO"という文字になる」という内容のコードを書き込み、
button2(サイト上では消去に設定したボタン)には、こちらをクリックすると「テキスト1のHELLOが消去になる」という内容のコードを書き込みます。
ページ要素を置いて、イベントハンドラを設定して、コードを書いて、サイト上で動作をつける。
これだけで、先ほどのようなボタンによってテキスト内容が切り替わる仕組みを実装することができます。
今回使用したコード
export function button1_click(event) {
$w("#text1").text = "HELLO"
}
export function button2_click(event) {
$w("#text1").text = ""
}また、今回紹介したもの以外にも弊社の運営するnoteアカウントでコードの例を紹介しておりますので、よろしかったらそちらもチェックしてみてください！
動画解説版はコチラ
チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!