Wix Codeでサイトを一部リニューアルしてわかった、Wixデータベースの良い点・困る点
Wix Codeとは
無料でホームページが作れるオンラインサービス「Wix」に
昨年12月に加わった新機能のこと。
私が個人的に運営しているフランス額装の教室＆情報サイト
「Encadrement-un （アンカードルモン・アン）」も
Wixを使っています。
掲載させていただく教室の数が
少しずつ増えてきてすごくうれしいのだけど
そのため１ページで収まらなくなって
２ページに分けざるを得なくなったり
１ページがやたら長くなってしまったりと
使い勝手がよくないのが気になっていました。
そこで、Wix Codeを使ってデータベースの作成と
データベースとテンプレートを連携させたページ自動生成に
トライしてみました。
ざっくり説明すると、まずこういう感じで
教室のデータベースを作ります。
次に、新しいページを作って
下のように教室ページのデザインを決めます。
クリックすると拡大表示されますので見てみてください。
左上の見出しに当たる部分が「ヘッディング４」となっているように
写真もテキストも内容は全て仮です。
配置や大きさ、文字のフォントや色だけを決めます。
右側のテキスト部分は、５つのブロックになっていて
それぞれデータベースから別の情報を読み込むイメージで作りました。
デザインが完成したら、あとはデータベースと連携させれば
自動的にデータベースから情報を読み込んで
下のようなページが作成されるというわけです。
Wix Codeなかなかやるな、と思ったのは
文字数が違う場合、自動的に配置が調整されるという点。
たとえば、文字数が少ない教室のページはこのようになります。
５つのブロックの間に変に空きができることなく
ページが作られてるのはスゴイ！
そして、これらの教室情報ページに行く前の一覧リストページも
同様にデザインだけを決めてデータベースと連動させれば
いちいち情報を打ち込まなくてもリストが出来上がります。
※追記
リニューアル翌日に、一覧リストページを
一度により多くの情報が見れるように
さらに以下に変更しました。
ただ、Wix Codeはまだベータ版なのでバグもあります。
その１つが、一覧リストの表示順を調整できないこと。
データベースの順番がそのまま表示されてしまうのです。
データベースに「並び順を変更」という項目もあるのですが
変更してもリストにそれが反映されず
データベースを一度閉じてまた開くと
並び順が勝手に元に戻ってしまいます。
これが改善されると、より使い勝手がよくなるんだけどなあ。
改善されるのを待ちたいと思います。
※追記
Wixサポートに確認した結果
一覧リスト表示順を変更する方法がわかりました。
バグではありませんでした。
詳しくは下記記事を参照ください。
「訂正：WixCodeの一覧リストは並び順変更もちゃんとできます！」
Wix Codeの詳しい使い方は、たくさんのブログやサイトで紹介されています。
私がわかりやすいと思って参考にさせてもらったのは以下の記事です。
無料で大規模Webサイトが作れる！Wixの新機能「Wix Code」を紹介 【データベース作成編】
Webデータベースから自動でページ作成！Wixの新機能「Wix Code」を紹介【動的ページ作成編】
仕事の合間や週末にチマチマやったので、少し時間がかかりましたが
これだけに集中できたら
webデザイナーではない私でも２〜３日で完成できる感じ。
思っていたより簡単です。
Wix Codeを使って実際にリニューアルしたページはこちらです。
Encadrement-un 教室情報
それにしてもここまで無料でできるとは
Wix、本当にイケるサービスだと思います。
無料でホームページが作れるオンラインサービス「Wix」に
昨年12月に加わった新機能のこと。
私が個人的に運営しているフランス額装の教室＆情報サイト
「Encadrement-un （アンカードルモン・アン）」も
Wixを使っています。
掲載させていただく教室の数が
少しずつ増えてきてすごくうれしいのだけど
そのため１ページで収まらなくなって
２ページに分けざるを得なくなったり
１ページがやたら長くなってしまったりと
使い勝手がよくないのが気になっていました。
そこで、Wix Codeを使ってデータベースの作成と
データベースとテンプレートを連携させたページ自動生成に
トライしてみました。
ざっくり説明すると、まずこういう感じで
教室のデータベースを作ります。
次に、新しいページを作って
下のように教室ページのデザインを決めます。
クリックすると拡大表示されますので見てみてください。
左上の見出しに当たる部分が「ヘッディング４」となっているように
写真もテキストも内容は全て仮です。
配置や大きさ、文字のフォントや色だけを決めます。
右側のテキスト部分は、５つのブロックになっていて
それぞれデータベースから別の情報を読み込むイメージで作りました。
デザインが完成したら、あとはデータベースと連携させれば
自動的にデータベースから情報を読み込んで
下のようなページが作成されるというわけです。
Wix Codeなかなかやるな、と思ったのは
文字数が違う場合、自動的に配置が調整されるという点。
たとえば、文字数が少ない教室のページはこのようになります。
５つのブロックの間に変に空きができることなく
ページが作られてるのはスゴイ！
そして、これらの教室情報ページに行く前の一覧リストページも
同様にデザインだけを決めてデータベースと連動させれば
いちいち情報を打ち込まなくてもリストが出来上がります。
※追記
リニューアル翌日に、一覧リストページを
一度により多くの情報が見れるように
さらに以下に変更しました。
ただ、Wix Codeはまだベータ版なのでバグもあります。
その１つが、一覧リストの表示順を調整できないこと。
データベースの順番がそのまま表示されてしまうのです。
データベースに「並び順を変更」という項目もあるのですが
変更してもリストにそれが反映されず
データベースを一度閉じてまた開くと
並び順が勝手に元に戻ってしまいます。
これが改善されると、より使い勝手がよくなるんだけどなあ。
改善されるのを待ちたいと思います。
※追記
Wixサポートに確認した結果
一覧リスト表示順を変更する方法がわかりました。
バグではありませんでした。
詳しくは下記記事を参照ください。
「訂正：WixCodeの一覧リストは並び順変更もちゃんとできます！」
Wix Codeの詳しい使い方は、たくさんのブログやサイトで紹介されています。
私がわかりやすいと思って参考にさせてもらったのは以下の記事です。
無料で大規模Webサイトが作れる！Wixの新機能「Wix Code」を紹介 【データベース作成編】
Webデータベースから自動でページ作成！Wixの新機能「Wix Code」を紹介【動的ページ作成編】
仕事の合間や週末にチマチマやったので、少し時間がかかりましたが
これだけに集中できたら
webデザイナーではない私でも２〜３日で完成できる感じ。
思っていたより簡単です。
Wix Codeを使って実際にリニューアルしたページはこちらです。
Encadrement-un 教室情報
それにしてもここまで無料でできるとは
Wix、本当にイケるサービスだと思います。