Wixの動的コンテンツの制御に関して
Kojiro Tanaka (更新: )
Wixを使ったWebサイト(コーポレートサイト系)を2件消化したところで、良いところと悪い所がだいたい見えてきた。
良い所
- ガッツリ段組み考えなくてもとりあえず素材を当てていけばノーコードで形になる
- ただし、共通CSSのような概念が薄いのでデザインルールを事前に決めるか、ブラッシュアップを一度に行うかしないとデザインの統一が行われずに破綻する。
- モバイルレイアウトを楽に作れる
- コンテンツを共有しつつ、それぞれ別のレイアウトで組めるし相互に独立するので、CSSとタグの成約に縛られず自由に組める
- そこそこ高機能なプラグインがあって、ちゃんと動いて、保守が要らない
悪い所
- ページのローディングが遅い。一番安いWordpressでもこれ100msで返ってくるよ？ってのがレンダリングまで結構待たされる。
- CMS向けに独自でデータ管理テーブルを構築できるものの、それを利用したレンダラーの機能が弱い
- 画像の縦横比を維持した拡大とか、コンテンツの表現に問題がある
- イベント機能がまだ不十分。下書きすら書けないってどうなのよ
- 一度イベントを作成されると問答無用で公開されるも、そのイベントをリストで表示するためのパーツで「近日開催のイベント」をリスト表示しようものなら問答無用でそれに該当するイベントが全て出てしまう ペライチとしてなら高機能すぎるも、CMSとしては機能が不十分。フロントエンドのコーダー不要でとりあえず構築できる……という微妙に使いづらい立ち位置になっている。システム自体は正直に動いてくれるし安いし運用に関する保守コストが低いので、まあ仕事としては使えるのだけれど。
で、今回は顧客の要求としてイベント機能を使いたいという件がありハウツーをまとめたものの、上記の「非公開・下書き機能が存在しない」っていう致命的な欠陥を「仕様です」って言うのがどうしても許せなかったのでCorvidと呼ばれるDev modeを使って解決しました。
- Dev mode
var visible_items = 0;
var visible_items_limit = 10;
export function listRepeater_itemReady($item, itemData, index) {
if(itemData.title.indexOf('非公開') >= 0 ||
visible_items >= visible_items_limit) {
console.log("remove event");
$item('#container').collapse();
} else {
visible_items++;
}
}
export function listRepeater_viewportEnter(event) {
console.log("listRepeater_viewportEnter");
if(visible_items === 0){
$w("#noEventLabel1").text = "開催予定のイベントはありません";
}else{
$w("#noEventLabel1").text = "";
}
}※結局ソースコードには出ちゃうじゃんっていうツッコミは今回無視する
イベント一覧のデフォルトの表示制御がキツい（非表示にしたいスケジュールイベントも問答無用で表示されてしまう）ため、このように「タイトルに特定の文字列が存在する」ことをトリガーとしてリスト要素から削除することは可能。ただしデータセットの件数は固定のため、多めに取ってスクリプト内で上限を越えたら非表示にするような仕組みにしてしまう。
Wixで制作案件を取る時に気をつけたい事
- 動的コンテンツの表示ロジックに関して複雑な動きを与えたい時に、Wixの制約を受ける可能性に注意する
- 顧客の求めるクオリティが高そうな場合は、動的コンテンツの扱いが多い場合にドキュメント作成や細かい動きやデザインのブラッシュアップでコストが発生すること