Code」という新機能が追加されました。Codeの多彩な機能を複数回にわたって解説します。今回は機能のひとつ「データベースコレクション」について紹介。Codeとは簡単操作で手軽にWebサイトが公開できる「Wix」ですが、今までは手動でコンテンツを流し込むだけの「静的」なWebサイトしか作成できませんでした。それゆえに、今までWixを使って作れるものは「必要最低限のホームページ」だったと言えます。Code」を使えば、より充実したコンテンツを扱う「動的」なWebサイトを作れるようになります。Code」を使えばデータベースとして一元管理することができます。データベースとテンプレートを連携させることで全商品の情報ページを自動で生成できるようになるため、多くの情報を取り扱う大規模なWebサイトも作成可能です。Code」には大きく分けて5つの機能があります。データベースコレクションサイトのコンテンツをデータベースとして管理できる機能。テンプレートと連携し、データベース上の情報を好きな場所に表示することができる。データ量の制限はなし。動的ページデータベース上の情報を呼び出し、コンテンツページを動的に作成することができる機能。作成されたページは個別のURLを持ち、SEOにも対応している。カスタム入力フォームドラッグ&ドロップで簡単に入力フォームを作成でき、ユーザーが入力した情報をデータベースに保存することができる機能。チェックボックスのオン・オフに応じて動作を変えたり、入力漏れがある場合はエラーを表示させるなど入力フォームの機能を充実化させることも可能。カスタムインタラクションホバーやクリックなどのユーザーの動作に応じて、ページにスライドやトグルなどの動きや表示の変化を加えられる機能。Javascriptが分からなくてもワンクリックで設定できる。API自分でコンソール画面にJavaScriptコードを記入してページに動きを加えたり、外部APIと接続できる機能。この機能のみ使用にコーディングの知識が必要となるが、例えば天気予報を取得してサイトに表示させたりなど様々なことができるようになる。Code」には多くの機能があります。詳しくは以下の公式サイトやブログ記事が参考になります。Codeの機能のひとつ「データベースコレクション」についてご紹介したいと思います。Girl」を使い、滝のデータベースを作ってみます。Codeはデフォルトでは「機能オフ」の状態になっているため、まずは機能をオンにしてみましょう。Wixの編集画面トップにあるメニューバーから、「ツール」を選択するとポップアップメニューが表示されます。その中の「デベロッパーツール」という項目にチェック。Codeの機能が使えるようになりました!データベースを作成デベロッパーツールをオンにすると、画面左に「サイト構成」というメニューが表示されるので、この中から「Database」という項目を選択します。collection」をクリックしてみましょう。「作成をはじめる」をクリック。ここで、データベースの名前を決めます。私は滝のデータベースを作るため、名前を「Waterfall」にしました。Content」とはデータベースのアクセス権限のこと。閲覧:誰でも」ということになります。閲覧:誰でも)」など、アクセス権限には様々なパターンがあるので、用途に応じて最適な権限を設定しましょう。アクセス権限は後からでも変更可能です。英語ですが、以下のページにアクセス権限の表が掲載されているので、詳しく知りたい方はこちらをご参照ください。Wix.comデータベースの項目を設定データベースの設定ができると、以下のような画面が表示されます。なんだかExcelの表みたいですね。ここで、データベースを作成していきますよ。「Title」というカラムがデフォルトで設定されています。これはデータベースの項目のことです。データベースを作成する時には、どの項目が必要かあらかじめ書き出しておくとスムーズに作成できます。落差というわけで、項目の名前を私のデータベースで言うところの「滝名」に変えてみます。「Title」にカーソルを合わせると右側にアイコンが表示されるので、そのあたりをクリック。Properties」を選択します。項目の名前を変えましょう。名前が決まったら「Update」をクリックします。データベースの記念すべき1カラム目が作成できました!この調子で他の項目も作成していきましょう。項目を追加するにはカラムの右横の「+」をクリックします。データの型についてここで、データの「型」について触れておきます。先ほど作成した項目は、データの型は「Text(テキスト)」となっています。これはデータの中身がテキストデータ(文字情報)であるということです。データベースを取り扱う際には、データの中身が何なのかをあらかじめ設定しておく必要があります。デフォルトでは「Text(テキスト)」となっていますが、中にはそうでないものもあります。Source(画像)」や「Number(数値)」となるので、そのように項目を設定する必要があります。Type」をクリックします。Source」を、数値の場合は「Number」を選択します。※型は後からでも変更できます。データの入力ひととおり項目が作成できたら、いよいよデータを入力していきましょう。データはカラムをダブルクリックで入力することができます。データの型が画像の場合は、入力時にカラム中央に「+」が表示されます。クリックすると、画像の選択画面が表示されます。私の場合はすでに画像を何枚かアップロード済みでしたが、新たに画像をアップロードすることも可能です。データベースに入力したい画像を選択しましょう。カラムに画像が表示されました。カーソルを合わせると画像の詳細を見ることができます。一行全ての情報を入力できました。ひとつ新しい行を追加するにはレコード下の「+」をクリックしましょう。完成したデータベースがこちらです。基本的にUIが英語なので少々とっつきにくいですが、操作はExcelのようにわかりやすいため、行の追加だけでなく削除や挿入、ソートなども簡単にできますよ。Codeでデータベースを作れば楽になるのではないでしょうか。先述したようにデータ量の制限がないため、本格的なデータベースを作ることもできそうですね。次回は、作成したデータベースの情報を新しいページに表示させる「動的ページ」について紹介していきたいと思います。Color0件のコメントもし何かコメントをいただければ幸いです。ご指摘等も大歓迎です。