Zenn
🐷

WixStudioでVeloを使う Step 1 「Veloの始め方」

2023/08/23に公開
JavaScript
Web
wix
velobywix
Wix Studio
tech

はじめに

Velo By WiXが非常に面白い。簡単にウェブサイトを作成出来るWiX。標準機能で十分に素敵なサイトが作成出来る。でも、僕らには欲がある。標準で用意されている機能だけでは満足出来ない。そんなときに役に立つのがVeloByWix。WiXで作成したサイトにJavascriptを組み込むことが出来る。痒いところにも痒くないところにも手が届くようになる。WiXの性能というか価値を何百倍にも引き出すことができるVeloを使ってほしいと思ったので記事にしておくことにした。

この記事では、Veloの使い始め方と共にJavascriptの組み込み方入門的なことをメモする。

また、2023年8月にWiXの新しいプラットフォームとしてWixStudioが登場した。せっかくなのでWixStudioの環境を前提に話をする。

Velo by WiX

単に「Velo(ヴェロ)」って呼んでいる。Javascriptの知識が必要。WiXで作成したウェブサイトにJavascriptを組み込むことができる機能。標準では用意されていない表現が可能になる。また、外部サービスやツールとの連携も可能になる。
例えば、会員サイトを作成し、誕生日の会員様に自動でメールを通知するなどの機能が実現できるようになる。このようなメールサービスを実現するには、サードパーティ製のサービスを連携する必要があったり、会員データから該当者を探し出したりする。さらに毎日自動で処理を実行するようにプログラムする必要がある。
このような機能はVeloを使って実現することができる。絶対に必要なものとは言わないけれど、より良いサイトを実現するためには重要な機能になる。

Veloの使い方

ダッシュボードから新しいサイトを作成する。この記事ではWixStudioで白紙テンプレートで作成している。
Wix Studioサイトの作成方法を選択してください
Wix Studioサイトの作成方法を選択してください

ローディングは見守っておけば良い。
Wix Studioサイトのローディング
Wix Studioサイトのローディング

終われば初期画面が表示される。
Wix Studioサイトの初期画面
Wix Studioサイトの初期画面

注目すべきは左側のサイドバー。「{ }」ボタンを探して押す。案内が表示されるので、読んだら「コーディング開始」ボタンを押す。
Wix StudioサイトのVelo開始確認
Wix StudioサイトのVelo開始確認

エディタが表示されて、javascriptが入力できるようになる。
Wix StudioサイトのVelo開始
Wix StudioサイトのVelo開始

このウィンドウは「{ }」ボタンを押せばいつでも表示される。

コーディングする

簡単なプログラムを書いてみる。
左サイドバーの「{ }」ボタンを押す。ページコードを選択する。エディタが表示される。
エディタ
エディタ

以下のコードを書き込んでみる。
「//」から始まる箇所はコメントアウトなので、消して良い。

ページコード - Home
$w.onReady(function () {
  $w('#text3').text = "first velo by wix"
});

実行の確認はサイトのプレビューで行う。画面右上のプレビューボタン(瞳のボタン)を押す。
プレビューボタン
瞳のボタン、プレビューボタン

サイトのプレビューが表示され、組み込んだJavascriptも実行される。
プレビュー結果
プレビュー結果

実行結果: サイト名に変化を加えた

変わったのはサイト名。サイトの左上部に表示されているサイト名はスクリプト実行前は「Business Name」という文言だった。プレビュー後は「first velo by wix」に変わった。

#text3(before)
スクリプト実行前のサイト名

#text3(after)
スクリプト実行後のサイト名

小さな変化過ぎてごめんなさい。

ID

サイト名を選択すると「テキスト#text3」というラベルが表示される。これはサイト名のテキスト要素にはtext3というIDが割り当てられていることを示している。
#text3(after)
スクリプト実行後のサイト名

このIDを使うことで、スクリプトで画面上の要素を選択出来る。具体的にはスクリプト内に$w(ココに要素のID)を記述する。IDは先頭に#を付加し、クォーテーションかダブルクォーテーションで括る。

ページコード - Home(一部)
  //画面上の要素を指定する時は$w("#ID")を記述する。
$w('#text3').text = "first velo by wix"

プロパティ(属性)

Wixでは画像やテキストやボタンなどの要素が用意されていて、画面に自由に配置することができる。
WiXの要素
WiXの要素
要素にはプロパティという属性(プロパティ)がある。例えば、テキストの色やサイズなどのこと。これは要素の特徴を表している。サイト名を表すテキスト要素(#text3)であれば以下のような具合。

属性名 スクリプト上の属性名 属性値
ID id text3
文字列 text 「Business Name」

Veloを使ったサイトの操作は、スクリプトから要素を選択し、属性値を変化させることが基本的な流れになる。

ページコード - Home(一部)
//画面上の要素を指定する時は$w("#ID")を記述する。
//IDがtext3の要素を選択し、text属性の値を「first velo by wix」にする。
$w('#text3').text = "first velo by wix"

要素によって操作できるプロパティは異なっている点は注意。例えばボタン要素を画面に配置し、スクリプトでプロパティを操作しようとする場合には、ボタン要素に用意されている属性を確認してから操作する必要がある。用意されている属性を確認するには、Veloのサイトを確認する必要がある。

まとめ

Veloを使ってスクリプトを組み込むと、ページに変化を与えることができる。要素とその属性を考えて変化させることになる。

つづき

WixStudioでVeloを使う Step 2

Discussion