Velo 第４６回 Wix Learn (Coding with Velo: Repeaters[前半])
多才なジョシュア氏のレッスンを是非実際にご覧下さい。
WixLearn 第４回の Coding with Velo: Repeaters は７回のレッスンに分かれています。
長いので前半、後半に分けます。
以下はその前半のダイジェストです。
lesson1: Get started with repeaters(03:13)
複数のアイテムをページ上にきれいに並べて表示したい場合にリピーターは役立つ。
ここではある職場の従業員の一覧を表示している。この画面には人物が同じデザイン、同じフォントで並んでいる。
新しいボタンを左のアイテムに追加すると他のアイテムにも追加される。
また左のアイテムのコンテナの大きさを変えると他のアイテムのものも変化する。
リピーターにデータを追加するにはいくつかの方法がある。
プログラムで指定することも、データセットとコンテンツマネジャーを使うこともできる。
このレッスンではコードを中心にして説明を進める。
リピーターはページにドラッグ＆ドロップして追加できるページ要素であると同時に、この中に多数のページ要素を含んでいる。
リピーターに追加できるイベントハンドラーが幾つかある。
onItemReady、onItemRemoved、onMouseIn、onMouseOut である。
このコースではonItemReady と onItemRemoved を扱う。
これらがリピーターにデータを表示するための主な機能だからである。
lesson2: Populate with static data(08:16)
このレッスンでは静的データをリピーターに追加する。
そのためには表示するアイテムのリストを作成する。
図のオリビア・ウォーカーが一つのアイテムである。
ここに並んでいるアイテムにデータを設定する。
コードを見てリピーターが何をデータとして受け付けているを理解する必要がある。
ページコードにはアイテムオブジェクトの配列がありこれがリピーターに格納したいデータである。
一つずつのアイテムオブジェクトを見てゆく。
先ず '_id' がある。
リピーターの全てのアイテムにはそれぞれの '_id' が必要である。
ここでは id1、id2 のように形式をそろえている。
'_id' のすぐ後にはname と image がある。
各アイテムには同じ名前を用い一貫性を持たせる必要がある。
このリストは太陽系の惑星のリストを配列に格納したものである。
次にonReady( ) 関数を見る。
この中でユーザーに表示するデータをリピーターに読み込む。このリピーターの ID は planetRepeater である。
ページコードを見ると onItemReady( ) 関数がある。
この関数はリピーターが各アイテムデータを使用できるように設定する関数である。
$item は各アイテムに含まれるページ要素を指定する関数、itemData はアイテムオブジェクト、index はデータ配列におけるアイテムオブジェクトのインデックスである。
これらが onItemReady( ) のコールバックに渡される。
その上で、$item('#planetImage').src = itemData.image でオブジェクトの image キーのURL を使い画像ソースを指定する。
同様に、$item('#name').text = itemData.name で惑星の名前を指定している。
この様に設定した後、$w('#planetRepeater').data = repeaterDate でリピーターにデータを付加する。
プレビューすると惑星のリストが表示されている。
lesson3: Populate with dynamic data(14:10)
ここでは一歩進んでWix Data API を使ってリピーターに動的にデータを追加するためにコレクションに接続する。
動的とは、コレクションデータが時間経過とともに変化し、リピーターの表示もそれに伴い変化することだ。
アイテムとリピーターをコードで関連づけるのはコレクションのフィールドキーである。
このリピーターに接続する Galaxy コレクションには planet、image というフィールドキーがある。
ページコードの冒頭で wixData をインポートする。
コレクションで検索した内容はプロミスで返されるため、onReady( ) 関数のコールバックは非同期にする。
そのため async function 非同期関数宣言をする。その非同期関数の中で、前のレッスンと同じくonItemReady( ) 関数でリピーター内で表示するものをコレクションのフィールドキーを使って指定する。
$item('#planetImage').src = itemData.image で 画像ソースを指定する。
同様に、$item('#name').text = itemData.planet で惑星の名前を指定する。
リピータに接続するデータは、プロミスの解決を待つために await 演算子を使って新しい変数 planets に配列を代入する。
ここでは分割代入を使って、
const {items: planets} = await wixData.query('Galaxy').find( ); とする。
そして $w('#planetRepeater').data = planets でリピーターにコレクションデータを付加する。
データ取得時に並べ替えやフィルタリング、.eq、.contains などの関数を使うこともできるが、ここではコレクションの全データをリピーターに追加した。
プレビューすると惑星の一覧が表示される。
例えばフォームのコレクションをリピーターに接続すると、サイト訪問者にデータを次々と追加してもらうことでコード上のデータを編集しなくて済む。
サイトの API を公開してウェッブ上の他のサービスからこのコレクションにデータを追加してもらうこともできる。
データの追加をできる限り動的にすることによって、長期にわたっての大量のデータ保守から解放される。
lesson4: Populate with third-party data(03:13)
コレクションには登録されていないデータにアクセスできるAPIが公開されている場合がある。
このレッスンでは私が Velo by Wix で開発したサードパーティーAPIを使う。
サイドバー/公開・バックエンドに行くと planet.jsw ファイルがある。
このファイルで私が作成したAPIを使ってデータを取得する。
バックエンドを使用しているのは一つは安全のため、もう一つはフロントエンドにエクスポートできるためだ。
コードを詳しく見る。冒頭で fetch( ) 関数をインポートする。getPlanet( ) 非同期関数を宣言し、GETリクエスト、受け入れデータをJSONとする。
try ブロックで惑星の情報をとりデータとする。
play ボタンで実行すると１０個のアイテムが取得できている。
これをリピータのデータに付加する。
今度はフロントエンド側を見る。
ここではユーザーからもらった「いいね」の数の順にデータを表示する。
コードを詳しく見る。
冒頭で getPlanets( ) 関数をインポートする。
onReady( ) 関数の中で、getPlanets( ) 関数を呼び出し、プロミス解決を待って.then( ) のコールバックで受け取った配列 planetInfo のコピーを silce( )で作り、「いいね」の順にソートしたものを変数 sortedInput に代入する。
次にリピーターに表示データを指定し、リピーターに sortedInput をデータとして付加する。
プレビューすると「いいね」順に惑星の一覧が表示される。
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか？