WIXのVeloを使って動的なページを実装してみる

2025年7月31日

#Velo
#WIX

WIXはいわゆるノーコードツールと呼ばれるもので、ドラッグ＆ドロップの直感的な操作でWebサイトを制作することができます。

一方WIXには、JavaScriptベースの開発プラットフォームであるVeloという機能もあります。

この記事ではVeloを活用して、データに応じて自動的にページの中身が変わる「動的ページ」を実装していきたいと思います。

Veloとはなにか？

Veloは、ノーコードWeb制作ツールWIXに搭載された開発機能のことです。JavaScriptをベースとしており、Webページの機能をつくったり動きを加えたりすることができます。

サーバーを用意しなくてよいので、WIXエディタ上からすぐに使えるのもVeloの利点です。

動的ページ自体はVeloを使わなくてもWIXのCMS機能を使って実装することができます。ただ「もっとこうしたい」「この部分をちょっと変えたい」がもしエディタ内の通常機能だけで解決できなければ、Veloの活用を検討するとよいかもしれません。

今回はCMSとリピーターを使った店舗リストページを、Veloによってより管理しやすくカスタマイズしてみたいと思います。

Veloの使いどころ

以前こちらの記事でWIXのCMSコレクションをリピーターに接続して、動的な店舗リストページを作成する方法をご紹介しました。

WIXのCMSを活用して店舗リストやブログ一覧などを実装する

これでおおむね問題ないのですが、お店のカテゴリ別にリピーターを分けたい場合、CMSコレクション自体をカテゴリ別に分けて作成する必要がありました。

そこで、ひとつのコレクションから自動的にカテゴリごとに振り分けてくれるようVeloを使ってカスタマイズしていきます。

Veloはこのように、WIXのもともとある機能や要素にもうひと工夫加えたいというときに便利です。

Velo（開発モード）の使い方

ではVeloを使っていきましょう。

WIXエディターを開いたら、画面上メニューから「開発モード」を選び「開発モードを有効にする」をクリックします。

すると、下の画像のように通常のエディタ画面に加えて、左側と下側にVelo 開発用のスペースが現れます。

Velo 開発モードのごく基本的な使い方を以下でご紹介します。

各要素のIDを変更する

Velo 開発モードでは、各要素のIDを変更することができます。

ID名を変えたいときは、開発モード画面下側のID欄から、直接打ち替えて編集します。

コードを書き込んでカスタマイズする

Velo 開発モードにはコードパネルと呼ばれるエリアがあります。

そこにJavaScriptを書くことで、サイトに動きや仕組みを追加します。

またWIXには専用のVelo APIやSDKが用意されており、WIX内のデータやシステムと連携した動きや仕組みを実装することもできます。（API/SDKについてはまだまだ勉強不足なのでいつか改めて記事にまとめたいです…）

実演：動的な店舗リストページの実装

では実際にVeloを使って店舗リストページをつくってみたいと思います。

①Velo開発モードを使う準備

まずページの構成を決めます。今回はこのように見出し（お店のカテゴリ名）とリピーター（店舗の情報）を並べてシンプルに配置しました。

また、CMSのコレクションに店舗情報の一覧（カテゴリ名を含む）を追加して、コレクション名を「stores」としておきます。

②ID名を適当なものに変更する

この例ではカテゴリ名（restaurant / beauty / medical / others）に合わせて各要素にID名を付け直しました。

小見出し：#headingRestaurant / #headingBeauty / #headingMedical / #headingOthers
リピーター：#repeaterRestaurant / #repeaterBeauty / #repeaterMedical / #repeaterOthers
リピーター内の店舗名：#titleRestaurant / #titleBeauty / #titleMedical / #titleOthers
リピーター内の住所：#addressRestaurant / #addressBeauty / #addressMedical / #addressOthers

③コードパネルへコードを記入する

ここまで下準備ができたら、いよいよコードを書いていきます。

今回は以下のようなコードを使いました。

import wixData from 'wix-data';

$w.onReady(async function () {
  const result = await wixData.query("stores").limit(1000).find();
  const items = result.items;

  // カテゴリ別フィルタリング
  const restaurantItems = items.filter(item => item.category === "飲食");
  const beautyItems     = items.filter(item => item.category === "美容・ファッション");
  const medicalItems    = items.filter(item => item.category === "医療");
  const othersItems     = items.filter(item => item.category === "その他小売");

  // カテゴリ見出しにCMSのカテゴリ名を表示
  if (restaurantItems.length > 0) {
    $w('#headingRestaurant').text = restaurantItems[0].category;
  }

  if (beautyItems.length > 0) {
    $w('#headingBeauty').text = beautyItems[0].category;
  }

  if (medicalItems.length > 0) {
    $w('#headingMedical').text = medicalItems[0].category;
  }

  if (othersItems.length > 0) {
    $w('#headingOthers').text = othersItems[0].category;
  }

  // 各リピーターにデータをバインド
  $w('#repeaterRestaurant').data = restaurantItems;
  $w('#repeaterRestaurant').onItemReady(($item, itemData) => {
    $item('#titleRest').text = itemData.title;
    $item('#addressRest').text = itemData.address;
  });

  $w('#repeaterBeauty').data = beautyItems;
  $w('#repeaterBeauty').onItemReady(($item, itemData) => {
    $item('#titleBeauty').text = itemData.title;
    $item('#addressBeauty').text = itemData.address;
  });

  $w('#repeaterMedical').data = medicalItems;
  $w('#repeaterMedical').onItemReady(($item, itemData) => {
    $item('#titleMedical').text = itemData.title;
    $item('#addressMedical').text = itemData.address;
  });

  $w('#repeaterOthers').data = othersItems;
  $w('#repeaterOthers').onItemReady(($item, itemData) => {
    $item('#titleOthers').text = itemData.title;
    $item('#addressOthers').text = itemData.address;
  });
});

import wixData from 'wix-data';

$w.onReady(async function () {
  const result = await wixData.query("stores").limit(1000).find();
  const items = result.items;

  // カテゴリ別フィルタリング
  const restaurantItems = items.filter(item => item.category === "飲食");
  const beautyItems     = items.filter(item => item.category === "美容・ファッション");
  const medicalItems    = items.filter(item => item.category === "医療");
  const othersItems     = items.filter(item => item.category === "その他小売");

  // カテゴリ見出しにCMSのカテゴリ名を表示
  if (restaurantItems.length > 0) {
    $w('#headingRestaurant').text = restaurantItems[0].category;
  }

  if (beautyItems.length > 0) {
    $w('#headingBeauty').text = beautyItems[0].category;
  }

  if (medicalItems.length > 0) {
    $w('#headingMedical').text = medicalItems[0].category;
  }

  if (othersItems.length > 0) {
    $w('#headingOthers').text = othersItems[0].category;
  }

  // 各リピーターにデータをバインド
  $w('#repeaterRestaurant').data = restaurantItems;
  $w('#repeaterRestaurant').onItemReady(($item, itemData) => {
    $item('#titleRest').text = itemData.title;
    $item('#addressRest').text = itemData.address;
  });

  $w('#repeaterBeauty').data = beautyItems;
  $w('#repeaterBeauty').onItemReady(($item, itemData) => {
    $item('#titleBeauty').text = itemData.title;
    $item('#addressBeauty').text = itemData.address;
  });

  $w('#repeaterMedical').data = medicalItems;
  $w('#repeaterMedical').onItemReady(($item, itemData) => {
    $item('#titleMedical').text = itemData.title;
    $item('#addressMedical').text = itemData.address;
  });

  $w('#repeaterOthers').data = othersItems;
  $w('#repeaterOthers').onItemReady(($item, itemData) => {
    $item('#titleOthers').text = itemData.title;
    $item('#addressOthers').text = itemData.address;
  });
});

JavaScript

JavaScriptをベースとしていますが、中にはVelo特有の記載もあります。

例えば1行目のimport wixData from 'wix-data';もVelo独自の書き方です。これを書くことでWIXのData APIを使ってサイト内のCMSコレクションにアクセスすることができます。

またページの読み込みが完了したときに関数を実行するonReady()や、IDまたはタイプを指定して要素を取得する$w('#ID名')などもVelo専用APIです。

以下にVelo独自の書き方である3つのポイントをご紹介します。

WixDataQuery

wixData.query("stores").limit(1000).find()の部分では、WixDataQuery関数を使ってクエリを実行しています。

query("stores")の「stores」はCMSコレクション名を指しています。

limit(1000)は、クエリが返すアイテム数の設定です。

query(“コレクション名“)でどのCMSコレクションにアクセスするかを決め、find()でそのコレクション内からデータを探して取得する、というイメージです。

ちなみにCMSコレクションの名前は、下の画像の場所で確認できます。

Velo 開発モード画面の左端にあるメニューから「データベース」を選択し、「あなたのコレクション」内の「”」でくくられた部分がコレクション名です。

textプロパティ

例えば$w('#headingRestaurant').text = restaurantItems[0].category;の部分では、headingRestaurantというID名の要素に.text（textプロパティ）を使うことで、テキストの表示を=以降で指定した内容に変えています。

リピーター内の店舗名や住所の表示にも同じくtextプロパティが使われていますね。