はじめに
この記事では、Veloを使う最初の一歩として、テキスト要素のコンテンツをHello World!に変更する方法と
自分がVeloを使い始めた際に「役に立った」「知りたかったな」という情報、Veloで何ができるのか、何から学べばいいのかを簡単にまとめます。
この記事は、Wixエディターの基本操作は理解しているけど、プログラミングは初心者だよという方を対象とします。
Veloとは？
Veloは、Wixで利用できるWeb開発とカスタマイズを可能にするための開発プラットホームです。
Velo独自のJavaScriptを使用して、フロントエンドのカスタマイズやバックエンド開発、データベースの管理、外部のAPIとの連携などを行うことができる便利なツールです。
簡単に言うと、「WixはノーコードツールだけどJavaScriptを使って動きをつけたり、データを受けとったり渡したり、計算もできるよ！」というものです。
とりあえず動かしてみる
では、さっそく動かしてみましょう！
プログラミングの伝統に倣って、Hello World!をVeloを使って表示してみます。
開発モードを有効にする
まずはVeloを動かすために適当なサイトを用意し、エディタ上部のメニューから開発モードを有効にします。
開発画面
開発モードを有効にするとエディタ画面に開発環境が現れます。
Veloサイドバー
Velo サイドバーには、
- ページコード
- 公開・バックエンドファイル
- コード検索
- コードパッケージ
- データベース
- デベロッパツール
- ヘルプ
など、サイトを構成するすべてのファイルとツール、ヘルプページへのリンクが表示されます。
詳しくはこちら↓
コードパネル
ここでサイトのコードを編集できます。
機能について詳しく知りたい方はこちら↓
プロパティ＆イベントパネル
コードパネルの右側にはプロパティ＆イベントパネルがあります。
IDの変更やクリックしたら、要素にカーソルがホバーしたらなどのイベントハンドラーを追加したり、選択した要素の使い方（リファレンスへのリンク）を確認することができます。
IDを変更
各要素には固有のIDが付与されています。
デフォルトのID名ではわかりづらいので、わかりやすい名前に変更します。
エディタでテキスト要素をクリックして選択、プロパティ＆イベントパネルからIDを'message'に変更しましょう。
要素を取得する
$w()に要素のIDを渡すことで特定の要素を取得することができます。
（IDの前にハッシュタグ'#'が付きます）
例：$w('#elementId')
$wは、WixのVeloコード内で要素やコンポーネントを操作するための特殊なオブジェクトです。
これによりWix内の要素やプロパティやメソッドにアクセスすることができます。
つまり、ID'message'のテキスト要素を取得するには下記のようになります。
$w('#message')
テキストコンテンツを置き換える
要素に対してどのようなプロパティが使えるのかはリファレンスを見ることで確認できます。
textプロパティを設定することで、テキストの内容を変更するできそうです。
リファレンスの使用例を見ると次のコードになります。
$w('#message').text = 'Hello World!';
このコードをデフォルトで表示されている$w.onReadyの中に記述します。
$w.onReadyは、ページが完全にロードされた後に実行される関数です。
最終的なコードはこのようになります。
$w.onReady(function () {
$w('#message').text = 'Hello World!';
});
プレビューで確認
プレビューでテキストが変更できたか確認してみましょう。
テキストコンテンツが'Hello World!'となっていれば完成です！
お疲れさまでした
Veloで何ができるのか
Veloを使うと、テキストを表示するだけでなく、ユーザーがボタンをクリックするとメッセージを表示するようなこともできます。また、データベースに情報を保存したり、他のウェブサービスと連携したりとアイディア次第であらゆるカスタマイズが可能となります。
Veloで作られたシステム例
データベースを検索する機能
郵便番号から住所を自動入力
おすすめの勉強法
最後にVeloを使う上で重要なリンクや勉強法を紹介します。
Velo編
Veloリファレンスのチュートリアル
Veloリファレンスは、Veloの機能や使用例などが書かれた参考書や辞書のようなものです。
英語のリファレンスですが、チュートリアルも載っています。
Wix Learn
Wixが提供するオンライン学習プラットフォームです。
こちらも英語ですが、動画でVeloの使い方を解説してくれます。
個人的にはこちらの動画から入るのがわかりやすかったです。
Wixヘルプセンター
Wixヘルプセンターでは、Wixに関する情報やサポートが提供されています。
Veloの基本情報、始め方、コードガイドなど、実際のコードや使い方まで細かく案内してくれます。
Velo Examples
Veloの実際の使用例やサンプルプロジェクトを閲覧できるページです。
実際のコードが見れるのはもちろん、自分のエディタ上でサンプルサイトを動かすこともできます。
Wix Japanの公式YouTubeチャンネル
Wix Japanの公式YouTubeチャンネルでは、Veloのサンプルコードを動画で解説してくれています。
https://www.youtube.com/playlist?list=PLi-yTrdxNej4ZMXgl78X9ax7L7djt0NoX
JavaScript編
Veloは、JavaScriptがベースとなるので、JavaScriptも併せて学習が必要です。
Progate
環境構築なしにブラウザ上でコーディングを行いながら学習できます。
ドットインストール
短い動画レッスン形式で、基礎的な内容から実践的な内容まで学ぶことができます。
MDN JavaScript リファレンス
JavaScriptをはじめとするウェブ開発の基礎から、より高度なトピックや新しいウェブ技術についての情報まで無料で提供してくれています。
最後に
学習の参考になれば嬉しいです。