こんにちは、WEBデザイナー兼
趣味で社会人バンドを
しているエミリです＊
Wixで、どのようなサイト作成が可能なのか？
っということを検証中です。
そんな中、今回は以下の様な内容の
お悩みを見つけました。
WixではMySQLやPHPを利用できないのでしょうか？
via.知恵袋
お店や会社のホームページ作成中の方で、
MySQL等に商品データを格納しておき
データベースから条件を指定して
表示させたいという方は多いのでは？
しかし、Wixのヘルプで調べてみたところ、
WixではPHPの埋め込みに対応していないようです。
現在、Wix は HTML アプリを介して埋め込む HTML コードのみをサポートしていますサイトに、PHP コードを追加することはできません。
JavaScript を使用する Wix Code は HTML パーツを使用する際に Java Script ライブラリの使用を可能にします。
Via.Wixヘルプ
上記の通り、残念ながらPHPは
使用できません。
しかし、WixではJavaScriptの
埋め込みは可能だそうです。
エミリは、MySQLにPHPでしか
アクセスしたことないですが、
調べてみたところJavaScriptでも
MySQLへのアクセスは可能なんだそうです。
しかし、ブラウザに依存したりなどの
問題もあるようですし、
プログラミング知識がない方は、
セキュリティーの観点からいっても
辞めておいた方が無難です。
ここは一つWixで用意されている
データベースを使用されたほうが
良いかもしれません。
そこで、「Wix Code」となるものを
利用してみたので、
ご紹介したいと思います。
Wixでデータベースを使用したいけど、
方法が分からないという方は、
ぜひ、参考にされてみてください。
Wix Codeって何？
まずは、Wixから公開されている
動画をチェックしてみてください！
なにやら、かっこいい動画ですが、
「どんなことができるのか？」という、
イメージがわきましたか？
ちょっと、この動画では具体的には
分かりにくいですよね・・・
冒頭のお悩みにあったように、
膨大な量の情報をデータベースを
使用してコンテンツにしたい！
という方にはWix Codeを使用すれば、
プログラミングが分からない人でも
簡単に作成できますよというものです。
また、データベースを使用するメリットは、
いくつもページやコンテンツを作成しなくても
レイアウトさえ作成してしまえば、
用途に合わせてそのレイアウト内に
データベース上の情報を呼び出して
条件表示させることができるところです。
Wix Codeには他にも機能はありますが、
今回はデータベースの登録方法と
ページへの呼び出し方法を
簡単に解説していきたいと思います。
Wix Codeを使えるように設定しよう！
通常は、Wix Codeを
使えるようになっていません。
まずは、Wix Codeを使用する
設定をしましょう。
①ヘッダー部分の「コード」をクリック
②「デベロッパーツールを有効にする」をクリック
すると、以下のように
フッター部分にJavaScriptなどを
使用できるメニューが追加されます。
左下の矢印部分「＞」をクリック
して早速データベースを
登録していきましょう！
Wixのデータベースを登録する方法
左下の矢印部分「＞」をクリックすると、
以下の様にサイドメニューが表示されます。
①「Database」をクリック
②「＋」マークをクリックし、「NewCollection」をクリック
すると、以下の様なポップが表示されます。
それでは、分かりやすい
データベース名を
決めて入力しましょう。
①データベース名は半角英数字で、入力しましょう。
②データベースのコレクションの目的を選択しましょう。
次の画面で、データベースを
登録する画面が表示されます。
mysqlなどを使用したことがあれば、
とても扱いやすいということが
一目見てお分かりいただけると思います。
今回、エミリはスタッフ紹介用の
テーブルを作成しデータベースを
読み込むように設定しようと思います。
「Title」と表示されている欄は、
スタッフ名を入れていきます。
下の「＋」でどんどん追加して
スタッフ名を入力していきます。
今回は、テストで行っているので、
すみませんが６人分の情報で
テストさせてください笑
スタッフ名の登録が完了したので、
今度はスタッフの年齢や画像などを
追加していきたいと思います。
以下の画像のように横の「＋」が、
項目の追加となります。
項目の追加では、
テキストなのか画像なのか等を
選んで追加していきます。
登録が完了したら「同期」をして、
サイト自体を「公開」します。
登録した情報が「Live」に、
反映されていれば同期成功です！
データベースでの作業は、
以上です。
あとはテンプレート編集に戻り、
データベースを表示させる
設定をしていきましょう！
Wixのデータベースをページに表示させる方法
データベースを使用したページを
作成する方法は検索すれば
ちらほら出てきたのですが、
現在あるページにコンテンツとして
表示させる方法をあまり見かけなかったので、
今回はその方法を解説していきます。
まず、テンプレート編集で
データベース情報を
表示させたい場所を調整しましょう。
「追加」ボタンより、
「リスト＆グリッド」を選択します。
あなたの好きなテンプレを
選択しましょう。
エミリは、今回以下の様な
テーブルを選択しました。
色味などは後で変更できるので、
あまり考えず大まかなイメージで
選択して大丈夫です。
それでは、
先ほど作成したデータベースを
表示させていきます。
①テーブルを選択すると、メニューが表示されるので「データベース」のアイコンをクリック
②「データセットを作成」をクリック
③先ほど作成したデータベース名を選択
すると、以下の様にデータベース名の
入ったアイコンが表示されれば、
無事に情報がセットされたということです。
あとは、テーブルデザインや
項目名などを微調整すれば完了です！
エミリの検証サイトにて、
データベース反映を確認することが
できますのでチェックしてみてください。
※DB内画像はWixの素材を使わせてもらいました！
まとめ
今回、Wixのデータベースを
使用してみてメリットデメリットを
以下にまとめてみました。
＜メリット＞
・プログラミングができない人でも、簡単にデータベースを作成し表示させることができる
・Wix内のテーブル等を使用すれば、データベースとの連携が簡単にできる
＜デメリット＞
・Wix内のテーブル等を使用する場合、スマホで見た時にテーブルサイズを変更できないため見ずらく分かりずらい
※以下キャプチャのように、横半分はスライドしなければ確認できない。
Wixのデータベースは、
膨大な量の情報を扱うサイトにとっては、
とても使えるものだとは思いますが、
Wixのテーブルのスマホ表示だけは、
イマイチだなと感じました。
簡単ではありますが、
使い方を解説させて頂きました。
また、初心者さん向けに
代行サポート＆指導サービスも始めました！
お手頃価格となっておりますので
お困りの方は、ぜひご利用いただければと思います★
まずは、無料相談でお悩みをお聞かせください！
【あなたにおすすめの記事】
■Wix codeのデータベースでフィルターをかける方法！
-
-
wixcodeデータベースで訪問者がソートやフィルターをかけれる？
こんにちは、WEBデザイナー兼 趣味で社会人バンドを しているエミリです＊ 今回は、久々Wi ...
■ページ作成のポイントについて
-
-
ホームページをwixやjimdoで自作する上で気を付けたいこと
こんにちは、webデザイナー兼 バンドマンやアーティストの 応援をしているエミリです＊ 今回 ...
■wixカスタマイズまとめ
wixでツイッターを連動させたい！コンタクトフォームはどう設定するの？といったことを以下でまとめています。これからもどんどん追加していきます。リクエストも受け付けています！
-
-
Wixテンプレートのカスタマイズ方法まとめ
このページでは、Wixで作成したホームページのカスタマイズ方法をまとめました。 随時更新しますので、ホームページ作成を検 ...
