.png)
Wixデータベースとは？ページ表示とデータ管理の方法
- 2023年12月20日
- 読了時間: 10分
こんにちは！
今回はデータベースについてご紹介していきます。
「データベース」ってコーディングをするときによく聞く言葉ですよね、
Wixはノーコードで有名。誰でも簡単に使えるというのが謳い文句なのですが、さてデータベースとはなんなのでしょうか？
ノーコードでも十分使用できる Wixでのデータベースについてご紹介していきますので最後までご覧ください。
Wixとは何か？
Wixのご紹介
Wix（ウィックス）とは、2006年にイスラエルで生まれ、2010年に日本語版がリリースされ、現在全世界で 2.3億人以上の登録ユーザーを有する人気ホームページ作成ツールです。
CMでこのキャッチフレーズを見たことがある方も多いのではないでしょうか。
「1.2秒に1人が Wixを使ってHPを作っています」
直感的にHPを作成・ドラッグ&ドロップにて変更が簡単にできる為、幅広いユーザーから支持を受けています。
Wixのデータベースとは？
Wixのデータベースとは、「Wix Code」機能の１つであり、コーディングスキルを持たなくても簡単にホームページを作成することができます。
データベースは特定のフォーマットで構築されている内容になっており、大量のWebページを作成する際に便利です。情報をデータベースに登録すると、異なる内容のWebページでも同じフォーマットで表示されるため、ユーザーに適切に情報を提供することができます。
このようにWixのデータベース機能はWebページを作成したい人なら誰にでも気軽に使用できる機能となっているのです。
Wixデータベースの基本機能解説
データベースとは簡単言いますと、エクセルやスプレッドシートの表の一覧のようなのをウェブサイトに紐付けて、ページを一括作成できる機能と考えると分かり易いかもしれません。
例えば、スポーツ大会をウェブ上で告知したい場合、アーティスト自らウェブ上で競技種目やその内容に関する詳細を登録してもらえば、Wixのエディタ内でページ上に反映する設定をするだけで、登録された展示物がページ上で表示されるようなものです。
データベースの作成と設定方法
データベースを使うためには、まず「Dev Mode」を有効にする必要があります。
「Dev Mode」→「開発モードを有効にする」をクリックします。
「開発モードを有効にする」をクリックすると、先ほどのエディタに「コンテンツマネージャー」の項目が表示されます。
この時「コンテンツマネージャー」の項目はWixページ編集サイトの一番左端に出てくるバー内にあります。
「コンテンツマネージャー」→「コレクションを作成」をクリックし、次は表を作成しましょう。
コレクションの作成とデータの紐付け方法
1.コレクションの作成
まず「データーベース」配下にある「コレクション」タグにカーソルを持ってきて右側に出てくる青い＋マークをクリックします。
＋マークを押すと「コレクションを作成」という小さなタブが出てくるためそこを選択します。
「コレクションを作成」タブ内には「コレクションの名前」と「コードで使用するコレクションIDを設定」、「コレクションのアイテム数」の設定欄が開きます。
「コレクションの名前」には自分が書きたい内容に関する題名を記入するようにします。
例えば、今回私は「スポーツ」に関して様々な種目のスポーツを紹介するページを制作しようと考えたため、「コレクションの名前」には「スポーツ」という題名を付けました。
そして、「コードで使用するコレクションIDを設定」の部分ではID設定であるためアルファベットを用いて「Sports」と記入しています。
そして、「コレクションのアイテム数」の選択に関しては自分が作成したいページに合わせて複数アイテム、又は単独アイテムを選択するようにして下さい。
ここまで記入し終わり作成を押すことによって、ダッシュボードが表示されます。
ここのダッシュボードで項目を追加してコレクションを作成します。
スプレッドシートやエクセルで表を作成する時に、項目を作ってまとめていくような手順と同じように、ここで表を作っていきます。
「Title」の中に必要な項目、例えば写真や説明文、時間、アドバイスなどを「Title」欄横にある「＋」で項目を追加しながら入力していきます。
※タイトルは必須の項目なので削除できない項目になります。
※別ファイルにすでにリスト表があればインポートできます。
「＋」をクリックることにより、3つの項目の記入欄が表示されるので、記載してきます。
フィールドタイプ：リッチテキストや画像を選択（オーディオ・住所・時間・URL・ドキュメントetc..）
フィールド名：項目名を入力
フィールドキー：項目名をアルファベットで入力
ここでは項目にどのような内容を入力するかにもよりますが、文字だけであればテキスト、自由に文字の形式や太さを変えたい場合は、リッチテキストがおすすめです。
「＋」追加で同じ作業を繰り返し、必要な項目を全て入力します。
項目の入力が終われば、実際に項目に沿って内容を入力していきます。
ここでは、スポーツを元にスポーツの競技種目・人数・内容・写真などを追加していきます。
そして、同じ作業を繰り返して、レシピをどんどん表にまとめていきます。
追加した後に、項目を並び替えたりしたい場合は、簡単にドラッグ＆ドロップで操作ができます。
ここでコレクション（表）作成が完成すれば、次はデータをページに紐付ける設定をしていきます。
※別ファイルからインポートする方法
別ファイルがありそこからインポートしたい方は、右上の「・・・」マークの「アイテムをインポート」から操作ができます。
インポートとエクスポート両方ができます。
2.データの紐付け方法
次の工程では、詳細情報を記載する個別ページを作成します。
左メニューから個別ページを立ち上げましょう。
個別ページのコンテンツとデータベースを紐づけていきます。
コンテンツを選択して「接続設定を編集」を選択、その後は反映させたいフィールドを選択しましょう。
個別ページにデータが反映されれば個別ページの完成です。
個人ページの作成まで完成すればもう完成まで間近です。
最後にプレビューにて動的ページ確認してみましょう。
問題なく反映されていれば、ページの完成です。
Wixデータベースの動的ページについて
Wixのデータベースを利用するにあたり、動的ページについて紹介します。
各ページのメリットやデメリットを理解した上で、自社コンテンツが動的ページに向いているか判断した上で、Wixのデータベースを導入しましょう。
動的ページのメリットとデメリット
・メリット
動的ページは、データベースを活用してリアルタイムな情報を生成するので、いつでも最新の情報を表示することができます。
例えば、ホテル予約サイトにおいてはユーザーの予約状況によって空室情報を反映させる必要があります。
こういった場合は、動的ページが向いています。
・デメリット
動的ページは、Webページの表示速度が遅いデメリットがあります。
動的ページは、プログラムがWebサーバー上で実行されるため、CPUに負担がかかるためです。
また、ユーザーがアクセスする度にWebページを生成するのでサーバーダウンが起きやすいのもデメリットです。
動的ページ作成の流れ
Wixのデータベースで動的ページを作成する方法を紹介します。
基本となる作成方法は「データベースの作成と設定方法」と変わりませんが、動的ページを作成する場合の流れはは下記内容となっており、4の手順が増えてきます。
Wix開発者ツールをオンにする
コレクション作成 フィールド（項目）を作成する
データ入力
動的ページ（一覧ページ）を追加
個別ページの作成
プレビューで確認
動的ページの作成方法
1~3の工程が完成したら、動的ページ（一覧ページ）を追加します。
ホームページの管理画面に戻り、開発ツールの「Databases」→「作成したコレクション」を選択してください。
「作成したコレクション」から「動的リストページを追加」を選択します。
※「動的アイテムページを追加」を選択した場合は画像だけが表示され、テキストは表示されない形式のページが制作されます。
先ほど作成したデータベースの動的ページがホームページに反映されているか確認します。
上記の画像のように反映されていないデータがある場合は、データベースの連携ができていないのが原因です。
コンテンツを選択して「データを接続」を選択します。
反映させたい接続先（フィード）をプルダウンから選択して下さい。
コンテンツが反映されれば完了です。
Wixデータベースの静的ページについて
先程の段落に引き続き、静的ページについて紹介します。
静的ページはWixの通常版ページですが動的ページと同じく各ページのメリットやデメリットを理解し自社コンテンツが静的ページに向いているか判断した上で、Wixのデータベースを導入しましょう。
静的なページのメリットとデメリット
・メリット
静的ページは、いつでも同じ内容が表示されるHTMLファイルで作成されたWebページです。
そのため、動的ページよりも「サーバーに負担がかからない」「表示速度が早い」といったメリットがあります。
・デメリット
静的ページは動的ページのようにリアルタイムの情報反映や、ユーザーごとにことなる情報を表示することができません。
誰が見ても同じ情報しか提供できないのが静的ページのデメリットです。
Wixデータベースの注意点
最後に、Wixのデータベースを利用する上での注意点を紹介します。
・フィールドを事前にまとめておく
Wixのデータベースを利用する前には、フィールドを事前にまとめておきましょう。
コレクションにフィードを追加していく工程は、データ量が多いと時間がかかります。
事前に追加する内容をExcelなどにまとめておけば、スムーズに作業を進めることができます。
コレクションの管理画面からCSVファイルをダウンロードできるので、こちらにフィールドを追加して、最後にまとめてCSV形式ファイルをインポートする方法がおすすめです。
・データ制限に注意する
Wixデータベースを利用するときには、データ制限に注意してください。
Wixデータベースのデータ容量制限は、Wixのプランに紐づいています。
仮に無料プランでデータベースを作成するとなると、５００MBの容量しかありません。
本格的に動的ページを作成する場合は、Wixの有料プランへの加入をおすすめします。
Wixデータベースを活用した効果的なコンテンツ戦略の例
Wixのデータベースで作成されたホームページ事例を紹介します。
今回紹介するのは株式会社こはくが運営する金沢の名産品通販・情報サイト『イチバのハコ』です。こちらのホームページは主に高度なウェブ制作ができる開発プラットフォーム「Velo by Wix」や、サイトの流入施策に役立つ豊富なマーケティング機能をフル活用して制作されているホームページです。
今回説明してきたWixデータベースでのページの作り方ですが、「イチバのハコ」では主に「よみもの」タブの中で使用されています。
データベースに接続された一覧ページは「画像」「題名」のみとシンプルなフィールドで作成されています。また、それぞれのフィードごとに区切り線が入っているところは見やすくなるポイントです。
イメージを保ったまま簡単に更新作業ができる点はWixのデータベースでページを作る上でとても大きな利点となってきます。
ページを作成するときは、是非参考にしてみましょう。
まとめ
データベースの活用方法のイメージ沸きましたか？
本日は Wixのデータベース機能を使用して手間をかけずに簡単にページを一括作成したり、コンテンツを追加していってサイトを充実させる方法についてご紹介していきました。
Wixの機能は大量のコンテンツをサイトに反映したい方には、とてもおすすめな機能となっていますのでこの記事を参考にどんどん活用してみて下さい。
弊社では制作面でのお困りごと・貴社のHPをプロの目線で現行サイトを分析して、アドバイスさせて頂く「無料相談会」を実施しております。
ご興味がある方は下記のボタンより、弊社「株式会社ラジャ」までお問い合わせください。