top of page

Velo by Wix 開発モードの基本

更新日:2月4日



こんにちは!

Wixパートナーレベル最上位 レジェンドと、

Velo Developer certificationを取得しています

合同会社アクトワン代表 和田英也です!


今回はWixの開発機能、Veloについて実際の操作画面を見ながら解説したいと思います!


Veloは本格的な Web アプリケーションの開発プラットフォームで、 JavaScript を組み合わせたコーディングで既存のWixエディタには用意されていないカスタム機能を開発できます!


動画ではVeloの開発モードの基本的な使用方法と、 実際にカンタンなコードを書いてVeloのカスタム機能を実装してみようと思うので、是非やってみてください!


それでは早速始めましょう!


▼ 目次


開発モードについて

開発モード

開発モードをonにするには、開発モードを有効にするをクリックします。


Velo 開発モード ツールバー

すると、サイドにコードにまつわるバーや、最下部にもコードを書き込むための「コードパネル」が現れます。


Velo 開発モード コードパネル

コードパネルは上図の矢印の「開く」で、


Velo 開発モード コードパネル

このように開いた状態になり、コードを書き込むことができます。

最大化、最小化もできます。


イベントハンドラについて

実際にVeloを使ってカスタム機能を構築する際には、コードパネルの他にも「イベントハンドラ」と呼ばれるものがございます。


Velo 開発モード イベントハンドラ

例えば、上図のようにボタンを設置し、選択した状態でコードパネルを開くと、右側ボタンのIDが出てきます。


IDが"button1"となっています。

こちらを管理するためのパネルを「プロパティパネル」といいます。

ページ要素の設置しているパーツのIDや、デフォルト値、要素に応じたイベントハンドラが利用できます。


イベントハンドラは、機能を作っていく上でとても重要になってきます。


例えば今ボタンを選択しています。

この状態で、このボタンがどのような操作をしたときにコードで指示した内容が起動するか、という設定を行うことができます。


こちらのプロパティパネルで設定するイベントは「静的イベントハンドラ」と呼ばれる固定的なイベントハンドラになります。


イベントハンドラにはもう一種類、「動的イベントハンドラ」と呼ばれるものがあり、こちらはコード上で直接ハンドラを書き込みます。


よく使うイベントハンドラとしてonClickというものがあります。


Velo 開発モード イベントハンドラ

こちらをクリックします。


Velo 開発モード イベントハンドラ

するとこのコードパネルの箇所に"export function button1 click(event)"と出てきます。

こちらはbutton1をクリックした時にどのような動作をするかを、コードで表すような書き方をします。


Velo 開発モード イベントハンドラ

(コードパネルにはデフォルトで上図のようなコードに関するアナウンスが入っていますが、こちらは削除して大丈夫です。)


このようにイベントハンドラをonにしておいて様々な機能を持たせることができます。


イベントハンドラにはこの他にも


  • onClick() → 要素がクリック

  • onDblClick() → 要素がダブルクリックされたとき

  • onMouseIn() → 要素上にマウスカーソル入ったとき

  • onMouseOut() → 要素上からマウスカーソルが出たとき

  • onViewportEnter() → 要素が画面に表示されたとき

  • onViewportLeave() → 要素が画面外に消えたとき


といったものがございます。


masterPage.jsについて

コードパネルは通常、現在表示されているページのコードを書くように設定されていますが、全てのページにわたる要素のコードを書く場合は


Velo 開発モード masterPage.js

ヘッダーやフッターを選択したらプロパティパネルに出てくる、上図赤枠のmasterPage.js」というものを使います。


Velo 開発モード masterPage.js

masterPage.jsのタブを選択すると現れるコードパネルに書き込まれたコードは全てのページに適用になります。


IDについて

Velo 開発モード ID

開発モードをオンにすると、上図のように要素を選択したときにIDが選択されます。

赤枠のようにリピーターの時は"repeater1"というIDが表示されます。

こういったIDはコードで指示を与える際に使用します。


Velo 開発モード ID

データセットにも上図のように"dataset1"というIDがついています。


Velo 開発モード コレクションID

コレクションにも"companydata"というIDがついています。


Velo 開発モード フィールドID

コレクション上のプロパティにも、例えばタイトルであれば、"title"といったフィールドIDがございます。


Veloコードの実装

では実際にVeloのコードを書いて、このような仕組みを作っていきましょう。


Velo 開発モード

例えば、表示を押すと、"HELLO"の文字が出て


Velo 開発モード ID

消去を押すと、空白になるというようなボタンによってテキスト内容が切り替わる仕組みを実装してみましょう。


Velo 開発モード ID

まずはボタンのテキストを表示にしておきます。


Velo 開発モード

そしてプロパティパネルでonClickのイベントハンドラをonにしておきます。

button1 clickという表示がでてくるので、Enterを押します。


Velo 開発モード

すると赤枠のようにコードが書き込まれました。

(赤枠以外の薄字の部分は削除して問題ありません。)

続いてもう1つボタンを作成して


Velo 開発モード
Velo 開発モード

こちらのボタンのテキストを消去にしておきます。

こちらのボタンはbutton2と表示されるので、先ほどのbutton1の時と同様にプロパティパネルでonClickのイベントハンドラをonにしてコードを書き込みます。


Velo 開発モード

2つのボタンの上にテキストパーツを設置して、こちらのIDを"text1"にしてコードを書き込みます。


Velo 開発モード

「button1のをクリックした時にtext1のテキストは"HELLO"という文字になる」という内容のコードを書き込み、


Velo 開発モード

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 Tech Salonのバナー

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております!

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!


閲覧数:85回0件のコメント

Comments


bottom of page