👌

WixStudioでVeloを使う Step 27 「Datasetに注目する」

2024/04/04に公開

JavaScript

はじめに

Wixでコンテンツを管理するとき、リピータやコレクション(CMS)は外せない。これらは強力なツールでVeloなんて使わなくても素敵な結果を創り出してくれる。今までの記事でもリピータやコレクションをテーマとして扱ったことは何度もある。だた、注目していなかったアイツ…「データセット」。これに注目する。

反省

プログラムが書けるが故にデータセット(wix-dataset)を軽視していたことを反省します。データセットは機能が豊富でした。

目標

データセットを使ってコレクションとリピータを接続し、データセットをVeloで操作すれば記述量も減るし分かりやすいコードになるはず。テキスト入力要素を使ってキーワード検索を実装する。

準備

コレクションとリピータを使う。Veloも使うので有効にしておく。

コレクションを用意する

特にコレクションの構造にはこだわり無し。今回はSamplesコレクションを用意した。

Title(EN)列を追加

データはなるべく多い方が良い。適当に40件分のデータを用意した。
40件ほどデータを用意した
Title(EN)列を追加

リピータを用意する

コレクションを表示するためのリピータを配置。IDはsamplesRepeaterとしておく。

リピータ要素(#samplesRepeater)

リピータにはテキストを配置しておく。IDはtitleTextとしておく。

テキスト要素(#titleText)

要素の種類	要素のID	備考
リピータ	`#samplesRepeater`
テキスト	`#titleText`	リピータに配置したテキスト要素

コレクションとリピータは接続しておく

コレクションとリピータを接続する際に使うのがデータセット。今回の主役。

データセットを作成

データセットにもIDを設定しておく。IDはsamplesDatasetとしておく。

データセットのIDはsamplesDataset

リピータに配置したテキスト要素(#titleText)にはSamplesコレクションのTitle列を接続しておく。

テキスト要素(#titleText)

テキスト入力を用意する

検索用のキーワードを入力するためのテキスト入力要素を配置する。IDはkeywordInputとしておく。

キーワード入力(#keywordInput)

これで下準備完了。

スクリプトを書く

テキスト入力要素(#keywordInput)にテキストが入力されたら、入力された文字が含まれるデータが絞り込まれていくような仕組みを作成する。以下、コード。

Homeのページコード

import wixData from  'wix-data'
$w.onReady(function () {
  //POINT1
    $w('#keywordInput').onChange( event => {
        const keyword = event.target.value
        setFilter(keyword)
    })
});

//POINT2
function setFilter(keyword){
    let filter = wixData.filter()
    if(keyword){
        filter = filter.contains('title',keyword)
    }
    $w('#samplesDataset').setFilter(filter)
}

これでコレクションからキーワード検索するための仕組みは完成。ポイントは2つ。
1つめのポイントはキーワード入力のイベント定義。 入力内容に変化が生じたとき をきっかけに処理をはじめる。onChange()を使う。入力内容に変化が生じたら、入力値を元に検索を実施したい。入力値はconst keyword = event.target.valueで取得。setFilter(keyword)で絞り込みを実施することになる。このsetFilter(keyword)が2つめのポイントになる。

2つめのポイントsetFilter(keyword)はコードの下方で定義している独自の関数。引数keywordには絞り込みに使う文字列を受けとる想定。この関数の目的は2つ。

引数で受けとった文字列を使ってフィルタを作成する。
データセット(#sampleDataset)に作成したフィルタをセットする。

let filter = wixData.filter()でフィルタを用意し、
filter = filter.contains('title',keyword)で引数で渡されたキーワード使ったフィルタを作成している。
filter.contains('title',keyword)には2つの引数を与える。この関数は指定した列の値に特定の文字列が含まれているかどうかチェックし、含まれているデータに絞り込んでくれる。1つめの引数で列名(文字列)、2つめの引数で値(文字列)を指定する。今回はSamplesコレクションのTitle列(列のIDはtitle)を対象に絞り込みを実施する。

最後に$w('#samplesDataset').setFilter(filter)。作成したフィルタをデータセット(#samplesDataset)にセットする記述。フィルタをセットすれば、後はデータセットが処理してくれる。

動作確認

動作確認する。試しにキーワードとして「02」を指定する。

キーワードとして「02」を指定

絞り込みできた。うん、できた。
動作確認をするまで気づかなかった。サンプルデータをもう少し考えればよかった。この絞り込みは…面白くない。なんなんだ…「Data000」から「Data039」って。

急遽、疑似人名データを作成。500件分。※実在する誰かのことを指したデータではないです。

擬似人名データを再登録

キーワードとして「新」を指定してみる。

キーワードとして「新」を指定

面白いかどうは別として、絞り込みは出来た。

まとめ

データセットにはコレクションを操作するための仕組みが予め用意されている。その中でも今回はフィルタに注目した。

データセットのフィルタ

Veloが書けるならWixDataQueryを使って1から書いたって別に良い。でも、GUIで出来ることはGUIでやればいいと思う。足らないところだけVeloを使ってあげればそれで十分。全部Veloで操作してしまうと、Veloが分かる人しか触れなくなってしまうので。

あとがき

プログラムが書けてしまうと、うっかりプログラムで全て解決しようとしてしまう。用意されている機能とか調べることもせずに。コレクションやリピータをVeloで操作することを先に憶えてしまったために、触れていたはずのデータセットを通り過ぎていました。改めてデータセットを調べて見ると、Veloで書かなくても実現出来ることは結構多い。これを無視するとWixStudioのいいところを活かせずに、プログラマは結局ゴリゴリとコードを書くことになってしまいそうな気がしました。