7月26日のWixブログで告知された、Wixの新機能「Wix Code」。何やら高度なことができるようになったのはわかるけれども、実際のところ、何ができるのか？簡単に言うと以下の4点になります。ベータ版を使って、これらの点について検証しました。
データベースを使ってコンテンツを管理できる
データベースと連携して動的ページを生成できる
入力フォームを自由に作成できる
コンテンツに新しい動作を追加できる
1. データベースを使ってコンテンツを管理できるメリットとは？
同じようなページを何ページも作成する場合、ページを複製して文章や画像などのコンテンツを編集することが多いと思います。そしてその後、各ページの管理をする場合も、エディタでいちいち開かなくてはいけませんでした。
ところが、データベースでコンテンツを管理できると、エディタで各ページを開かなくても、一覧表の上で複数のページの文章を一度に編集したり、画像を入れ替えたりすることができます。
データベースの行の順番は、Sortで変えることができます。できれば、1行だけ順番を入れ替えたい場合に、簡単な操作で動かせたらいいなと思いました。
2. データベースと連携して動的ページを生成するってどういうこと？
たとえば、Webページが100ページあるとします。今までは、複製あるいは新規作成するなどして、一枚一枚ページを作成する必要がありました。
そうではなく、データベースの一覧表に格納されている100ページ分の情報を、一枚の雛形となるページ上に反映し、表示させます。これが動的ページの生成ということになります。
これにより、デザインするページは1枚ですみますから、ページ作成の手間を大幅に削減できますし、1.にも書いたように、データベースの一覧表を開けば、複数のコンテンツを一度に編集・管理することができます。
また、これは推測ですが、ページの表示速度も早くなるかもしれません。
従来、Wixは、100ページを超えるようなボリュームのあるホームページは、表示速度が遅くなることがあると言われていました。しかし、今回のWix Codeの資料動画では、100ページもの新しいページを作成できるという説明があります。
もしかすると、Wix Codeによる動的ページの生成が実現したことで、100ページを超えるホームページでも楽々表示できる、つまり表示速度が早くなったのかもしれません。
3. 入力フォームを自由に作成できると、何ができるのか
単にメッセージを受け取るだけなら、従来のコンタクトツールで十分です。しかし、もっとフォームの項目を増やしたい、またはチェックボックスなどを使って、より効率的に情報取集したい場合、「123 Form Builder」などのアプリを追加する必要がありました。
ところが、Wix Codeをオンにすると、ラジオボタン・ドロップダウン・チェックボックス・テキストボックス・アップロードボタン・日付ピッカーが使えるようになり、お問い合わせフォームとしてだけでなく、アンケートや見積り依頼フォームなど幅広いニーズに対応できるようになります。
また、Table（テーブル）と呼ばれる「表」も簡単に追加できるようになりました。今までなら「Table Master」というアプリを追加する必要があり、カスタマイズも限定されているため少し不自由な思いをしましたが、Wix Codeでは、悩みの種だった一覧表の作成も行えるようになります。
ただし、列の幅を指定すると、モバイル表示ではみ出してしまいます。まだベータ版なので仕方ないのですが、列の幅を指定する欄をpx（ピクセル）ではなく%（パーセント）で設定できるようになると嬉しいです。
4. コンテンツに追加できる新しい動作とは？
たとえば、画像バナーにマウスポインタを乗せた際、画像が変わったり動いたり（ロールオーバー）など、何らかの動作が欲しいと思っても、従来のWixではそれができませんでした。
しかし、Wix Codeではこれが可能です。画像をクリックし、開いた「プロパティパネル」で onMouseIn や onClick などのイベントをクリックすると、Code Panelが開きますから、ここにJavaScriptを記述することで、画像のロールオーバーができるようになります。
Wix Codeにより、今まで「あともうひといき」だったWixの機能が大きく進歩しました。
特に、動的ページ作成が実現したことで、同じレイアウトで多くのページを作成する場合に、コンテンツの管理がしやすくなったのは、大きなメリットかもしれません。
ベータ版を使いたい場合は、以下のリンクから申し込み、自分のアカウントに適用させてご利用ください。英語のみですが、Wix Codeを使う手順の動画が、Wix.comから公開されています。
Wix.com 公式動画
Wix Codeでデータベースを作成する手順
Wix Codeで動的ページを作成する手順
Wix Codeでカスタムフォームを作成してデータベースに連携する手順
Wix CodeでJavaScriptを使いコンテンツに動きをつける手順