データベースから自動でページ作成!Wixの新機能「Wix Code」を紹介【動的ページ作成編】

当ページのリンクには一部広告が含まれています。
  • URLをコピーしました!
目次

サンドボックスデータをライブデータと同期

データベースのデータは、すぐにサイト上で使えるわけではありません。出来上がったデータベースの上部を見てみると「Sandbox」「Live」というふたつの項目があります。

Wixでサンドボックスデータをライブデータと同期

Sandboxは「サンドボックスデータ」といい、公開する前のテストデータのようなものです。サイト上で使えるデータとして反映させるには、「Live(ライブデータ)」にコピーしてあげる必要があります。以下の通り、まだライブデータは使えません。

Wixでサンドボックスデータをライブデータと同期

ライブデータにデータベースが反映させるには、画面右上の「公開」をクリックします。

Wixでサンドボックスデータをライブデータと同期

「Live」に切り替えると、何やらデータベースが反映されていますが、「サンドボックスのデータを同期してください」というダイアログが出ています。

サイト上でデータベースが使えるようになりましたが、このままではまだデータベースの中身は同期されていないようです。

Wixでサンドボックスデータをライブデータと同期

データを同期させるためにはデータベースの上の「Sync」をクリックします。

Wixでサンドボックスデータをライブデータと同期

すると、選択項目が表示されるので、「Copy all items to Live」を選び、「Sync」をクリック。

Wixでサンドボックスデータをライブデータと同期

もう一度「Live」に切り替えると、今度はデータベースの中身もきちんと同期されています!

Wixでサンドボックスデータをライブデータと同期

動的ページの作成

URLを決める

いよいよ、データベースの情報を使って動的ページを作成します!まずは左サイドバーから「Database」という項目を探しましょう。作成したデータベースの右側にあるアイコンをクリックし、「Add a Dynamic Page」を選択。

Wixで動的ページの作成

動的ページのタイプを選択します。各データごとの単一ページ(Item Page)を作成するか、カテゴリーごとに分けられたページ(Category Page)を作成するかが選べます。今回は「Item Page」を選択。

Wixで動的ページの作成

動的ページのURLを作成することができます。デフォルトでは「/データベース名/データの名前/」となっていますが、この末尾の部分はデータベースの他の項目に変更することができます。

「Add Field」をクリックすると項目一覧が表示されます。

Wixで動的ページの作成

今回は「データの名前(滝の名前)」のままにしましたが、現実的に運用することを考えたら同じ名前の滝が複数あったりするので、そういった場合はURLの末尾は「ID」などにしたほうがいいのかもしれませんね。

Wixで動的ページの作成

また、URLは直接編集することもできますよ。URLが決まったら、右下の「Create Page」をクリック。

Wixで動的ページの作成

動的ページとデータベースを連携させる

動的ページが作成できると、以下のような編集画面になります。

Wixで動的ページの作成

左サイドバーに動的ページの項目が生成されていますね。

Wixで動的ページの作成

さっそく編集画面で動的ページのデザインを作っていきましょう。まずはタイトルを配置します。

画面左側のメニューアイコンの中から「追加」をクリックし、「テキスト」の中から好きなデザインのタイトルを選んで画面上にドラッグ&ドロッグ。

Wixで動的ページの作成

タイトルを適当な場所に配置できたら、右上の「データに接続」アイコンをクリックします。

すると、「テキストを接続」というダイアログが表示されます。「Connect Dataset」はデータベースをひとつしか作っていなければひとつしか選べませんので、そのままでOK。

Wixで動的ページの作成

「テキストの接続先」をクリックすると、データベースの項目一覧が表示されます。タイトルにはデータベースの「滝名」と連携させたいので、「Waterfall Name」を選択。

Wixで動的ページの作成

連携が完了すると、アイコンの色が緑色に変わります!

Wixで動的ページの作成

果たしてちゃんと表示されるでしょうか…!画面右上の「プレビュー」をクリックし、確認してみましょう。

Wixで動的ページの作成

ちゃんと滝名が表示されていますね!これでデータベースとの連携ができました。簡単ですね!

Wixで動的ページの作成

この調子で編集画面でデザインを作りつつ、画像やボタンなど他の要素にもデータベースと連携させていきましょう。

Wixで動的ページの作成

できあがった動的ページがこちらです!文章や画像など、ひとつひとつの要素がデータベースからデータを読み込んで表示されています。

Wixで動的ページの作成

別の動的ページを表示させるには画面右上のページャーをクリックします。

Wixで動的ページの作成

画面右上の「公開」をクリックして動的ページを公開しましょう。作ったものをサイト上に反映させるにはいつでもこの作業が必要です。

Wixで動的ページの作成

以上で動的ページが作成できました!

Wixで動的ページの作成
公開されたページのURLは、ちゃんと先ほど設定した「/データベース名」/データの名前/」になっていますね。

Wixで動的ページの作成

ここまで作った動的ページのサンプルはこちらです。

動的ページサンプル

動的ページへの誘導リンク(リスト)を作成

動的ページはできましたが、この状態では動的ページへの誘導リンクがないため直接URLを入力しないと見ることができません。というわけで、誘導リンクとなる「滝リスト」を作ってみます!

画面左上の「ページ:サイト名」をクリックし、1番下の「ページを管理」を選択します。

Wixで動的ページへの誘導リンク(リスト)を作成

「サイトメニュー」に移動。ここで新しいページを作ったり、削除したり、または非表示にしたりなどのページの管理ができます。

今回は新しいページを作るので、「ページを追加」を選択。他のテンプレートをコピーしたければ各メニューの右側のアイコン(…)をクリックし、「複製」でもOKです。

Wixで動的ページへの誘導リンク(リスト)を作成

ページに任意の名前をつけます。

Wixで動的ページへの誘導リンク(リスト)を作成

すると、新しいページが作成されました。ちゃんと先ほど付けた名前でリンクも生成されています。ここからまた先ほどのようにデザインを作っていきますよ。

Wixで動的ページへの誘導リンク(リスト)を作成

とりあえずページタイトルを変更。

Wixで動的ページへの誘導リンク(リスト)を作成

次に、リストの作成です。左側のアイコンから「追加」をクリックし、「リスト&グリッド」を選択します。これはコンテンツを繰り返し同じレイアウトで表示できるパーツで、色々なデザインが用意されています。

パーツが決まったら画面上にドラッグ&ドロップ。

Wixで動的ページへの誘導リンク(リスト)を作成

今回はこちらのパーツを元にしてデザインを作ります!

Wixで動的ページへの誘導リンク(リスト)を作成

まずは動的ページと同じようにタイトルを変更し、滝の名前を表示させてみます。データベースのアイコンをクリックしましょう。

Wixで動的ページへの誘導リンク(リスト)を作成

「データセットを作成」をクリックし、連携させたいデータベースを選択。

Wixで動的ページへの誘導リンク(リスト)を作成

「テキストの接続先」に、表示させたい項目を選びます。今回は滝の名前なので「Waterfall Name」と。

Wixで動的ページへの誘導リンク(リスト)を作成

連携できたらアイコンが緑色になります。さっきと同じですね!

Wixで動的ページへの誘導リンク(リスト)を作成

さて、画面右上の「プレビュー」をクリックして、表示を確認してみましょう。

alt="Wixで動的ページへの誘導リンク(リスト)を作成"

タイトルのところだけ滝の名前になっているのがわかりますね!

Wixで動的ページへの誘導リンク(リスト)を作成

この調子で動的ページの時と同じように、他の要素にもデータベースと連携させながらデザインを作っていきましょう!

Wixで動的ページへの誘導リンク(リスト)を作成

出来上がったリストがこちらです!元のデザインよりシンプルになりました。

Wixで動的ページへの誘導リンク(リスト)を作成

仕上げに画面右上の「公開」をクリックしたら、完成です。

alt="Wixで動的ページへの誘導リンク(リスト)を作成"

これで動的ページへの誘導リンクができました!

Wixで動的ページへの誘導リンク(リスト)を作成

出来上がった誘導リンクのサンプルは以下となります。参考にどうぞ!

誘導リンクサンプル

さいごに

いかがでしたか?データベースとの連携や、誘導リンクの設置は自分でやるとデータベースに接続して、変数に格納して…とかなり面倒ですが、Wix Codeを使えばクリックの作業だけで出来てしまうので楽ちんですね。

以上、彩がお送りしました!

その他のWix関連の記事

この記事が気に入ったら
いいね または フォローしてね!

この記事をシェアする!
  • URLをコピーしました!

この記事を書いた人

彩のアバター UIデザイナー

自社メディアサイトのUIデザイナーを経てフリーランスとして活動しています。デザイン・コーディングからサイト運営・改善、バナー作成など色々やってました。

4歳の娘がいます。ゴッホとコーヒーとスナフキンが大好き。

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次