見出し画像

Velo 第８９回　動的ページ（２）

アクトワン Velo開発部

URL slug をカスタマイズして動的カテゴリーページを作成してみましょう。そのためには slugルール を知る必要があります。


動的カテゴリーページ

同じ学年、組のカテゴリーには複数のアイテムがありますのでリピーターが必要になります。
従って動的カテゴリーページの作成はまず動的リストページを作るところから始まります。

学年ページ

先ず新規動的リストページを作ります。
その後ページ設定で URL slug を mycollection-1/{grade} と設定します。mycollection-1 はデフォルトで設定されているかも知れません。
下図をご覧下さい。

学年ページの URL slug

組ページ

同様に新規動的リストページを作ります。
その後ページ設定で URL slug を mycollection-2/{class} と設定します。
mycollection-2 はデフォルトで設定されているかも知れません。
下図をご覧下さい。

組ページの URL slug

slug ルール１

図らずも動的カテゴリーページを作成した折、prefix は mycollection-1、mycollection-2 と異なるものがデフォルトで設定されていました。
その理由は URL slug には設定ルールがあるからです。

URL slug は一般には 「prefix/path」と言う形をしています。
そして prefix にはルーターが置かれています。
ルーターは path に従ってコンテンツをページに送る役目を持っています。

いま２つのカテゴリー、学年(grade)と組(class)がある場合、同じ prefix、例えば mycollection に {grade} と {class} がぶら下がっているとして、学年も組も数字で登録されていれば、URL slug の mycollection/1は１年なのか１組なのか区別が付きません。
ルーターはその役目が果たせなくなります。

つまり URL slugとしてmycollection/{grade} と mycollection/{class} は同時には定義できないと言うことになります。
実際やってみると警告が出され、登録させてくれません。
もともと動的アイテムページの URL slug は mycollection/{title} でしたから、この３つの URL slug は同時に登録できません。

ではどうするかというと、ルーターごとに prefix を分ければ問題ありません。

つまり、学年、組用の prefix を mycollection-1、mycollection-2 の様に分けてしまえばよいことになります。
デフォルトの設定にはそう言う意味があったのです。
つまりURL slug を以下の３通りにカスタマイズすることになります。

  • 動的アイテムページ用は mycollection/{title}

  • 学年の動的カテゴリーページ用は mycollection-1/{grade}

  • 組の動的カテゴリーページ用は mycollection-2/{class}

デフォルト設定でほぼこのカスタマイズがノーコードで済んでいるところは Wix のすごいところです。

slug ルール２

しかし動的リストページと動的アイテムページは prefix が mycollection で共通でした。これはなぜ許されるのでしょうか？

それはpathに使われる変数の個数が違うからです。
つまり動的リストページのURL slug は mycollection/ のみで path の変数がありません。
一方動的アイテムページの URL slug は mycollection/taro など path の変数が１つあります。
従ってこれらの URL は決してバッティングすることはありません。つまりルーターはその役目がちゃんと果たせます。

例えば URL slug として mycollection/{grade} や mycollection/{class} は作れませんが、mycollection/{grade}/{class} は作ることが出来ます。
何故ならこのURL slug の変数の個数は２で他のどれともバッティングしないからです。つまりルーターは区別ができるのです。
下図をご覧下さい。

学年・組ページのURL slug

prefix が mycollection/ になっていますが警告がでていません。
ちゃんと動的カテゴリーページが構成できていることを示しています。
下図の様にカテゴリーページとして機能しています。

ここまでのお話でお気づきの方もいらっしゃると思いますが URL slug の変数はフィルターとして機能しています。
つまり変数の個数はフィルターの個数、変数の並びはフィルトレーション(フィルター列)と思えます。
コーディングをご存じの方は mycollection/{grade}/{class} という URL slug が、

wixData.query('mycollection').eq('grade', xxx).eq('class', yyy).find()

を表していると感じられると思いますが、その通りだと思います。

まとめ

動的ページの仕組みが URL slug によって支えられていることが分かりました。また、slug には以下の様にルールが２つあることも知りました。

ルール１：変数の個数が同じなら prefix は変えなければならない。
ルール２：変数の個数が違うなら prefix は同じでも変えてもよい。

path 部分の変数に、個数の制限はありません。
従って mycollection/{grade}/{class}/{title} の様な深い slug もOKです。
変数はフィルターと思えば当たり前の話ですが、意味があるのかどうかは別の話になりますね。

次回はこれらの動的ページをリンクさせる方法を考えてみたいと思います。

Velo開発のご依頼はこちら


いいなと思ったら応援しよう！