top of page
製造業ポータルサイト
WIXデータベース開発講座
はじめに
このサイトは、WIXのホームページサイトでホームページを作成しました。
私が初めてホームページ作成をしたのは、今から20年以上前の草創期の頃でした。
Windowsのメモ帳に、HTMLタグを手打ちして、HTMLで保存しサーバーにアップロードするといった正に手作業状態でした。
その後、ホームページビルダー等が発売され、そのソフトのパッケージは8000円くらいと高かったです。
使い勝手は、ローカル作業で手直しする時は、ローカル側で作業してサーバーにアップロードするといったことで、今と比べるととても面倒でした。
今の時代は、クラウド上（ネット上でサービス提供）でホームページが簡単に作成出来るので、とてもタイムリーに面倒無く情報発信が出来ます。
しかもお試しは無料で、サブドメインを貸してくれます。
WordPressを使うかを迷いましたが、WIXは独自ドメインにしない限り永久に無料でいくつもサイトが作れるので、WIXを使うことにしました。
最初は、WIXの速度問題にあたりましたが、キャッシュ機能など設定で今は問題が無いように思います。
WIXはサンプルデザインが豊富に有るので、HP専門業者で無い限り、一般人にはWIXのほうが使いやすい印象です。
最初は無料でWIXを始めて、段々と慣れてきてホームページが出来上がれば、ドメインを取得して有料のサイトに切り替えるのも良いかと思います。
先ずは焦らずに練習を積み重ねて頑張りましょう。
WIXはデータベースがWEB上で無料でも使える。
WIXでは、データベース作成が出来るので、一つの画面を作りデータさえ登録すれば、一つのページでたくさんのデータが動的に見れるようになります。（右図）
最初からあるのは機能が限定されており、WIX CODEを使うことで自身で簡単なプログラムを作成して、いろいろな表現をすることが出来るようになります。
例えば、このサイトにも検索画面がいくつか在りますが、自分でプログラムを作成しました。
WIXは、データを見せるだけなら誰でも簡単に出来ますが、データ検索などは当初搭載の機能が少なく、別にプログラムしないと満足hしないと思います。そこで、右図の「動的ページ」の部分をプログラムすることにより、データベースを活用したページの表現が大きく変わります。
作成方法のリファレンスは、WEB上でいくら探しても難しいAPI開発の説明ばかりで、WIX CODE初心者はゼロから勉強しないと理解しがたいし、まったくのプログラム初心者ではプログラムの基礎勉強も必要です。
特に日本のサイトでは、説明するサイトが有るものの中途半端で分かりにくいものばかりでしたので、私は、実用的なアメリカのサイトを参考にして勉強しました。
私も今回、WIX CODEが初めてのプログラミングのために3日間ほど徹夜して作成しました。
WIXデータベースで、商品やコンテンツなど動的に検索できるようにしたくなると思います。
プログラムとデータベースコネクト作成方法を簡単に公開します。
WEBデータベースの動作の仕組み（右図）
先ず初めにデータベースの仕組みを解説します。
右の図のような仕組みを構築すれば、インターネットが使える環境さえ有れば世界中からデータベースにアクセス出来き携帯電話からも情報が見ることが出来ます。
業務改善など使われるシステムのほとんどがデータベースで構成されてます。
これら仕組みを業務改善に応用する場合はITコンサルタントを活用する方法がお勧めです。
サイトのページやデータベースに参照権限を作れば、特定の人しか見えない仕組みも作れますので、例えばネットショップなどは商品は誰にでも見れて商品が購入は出来るが、購買した結果や個人情報などは、関係者しか見えない、、このような仕組みが出来ます。
これら仕組みを応用して作成すれば、企業様の社内情報交換やEDI（受発注）なども実現しますので、ビジネスの効率化や管理の効率化が実現します。
海外の複数拠点管理も日本本社で出来き、経営者や管理者、社員は出張中でも世界中のデータが見れるようになります。
例えば、海外旅行や国内外に出張された時に、このサイトが24時間見れると思います。
たぶん見たくないかもしれませんが、試してみるなど、すごい時代になりましたね。
右図の「動的ページ」部分はデータベースを表示させる重要な部分で、プログラミング必要ですので、今回は情報の少ないWIXでの簡単なプログラムをコピペで作成出来る方法を公開します。
先ずはデータベースを作成してみましょう。
WIXのデータベースは、一度触ってみると誰にでも簡単に出来るようになってます。
ここでは解説しませんので、他のサイトでデータベース作成方法を勉強してください。
＞＞データベース作成方法
今回のサンプルプログラムを利用する場合、
１、会社名＝title、（TEXT型)
２、区分＝kubun、（TEXT型)
３、地区=chiku、（TEXT型)
４、イメージ=image01、（image型)
５、会社概要=Company_profile、（TEXT型)
以上のデータベースフィールドが有れば、動作します。
上記は、右の図を参考にして、例えば項目名の会社名、フィールドキーはtitleです。
フィールドタイプはテキストに成っていれば大丈夫です。
以上のようなデータベースが有れば、サンプルプログラムが使えます。
データベースの動的システム開発
先ず、サンプルを見てください。
>>検査機能有り
検索機能の前は、登録されている全データが見えますが、検索すると入力した文字を含むデータだけが表示されます。
WIX編集ページの一番上に有る、「Dev Mode」を 有効にしてください。
編集ページの一番下に右の図のようなものが出ると思います。
これが、WIX CODEの編集画面で、いろいろなプログラムを開発することが
出来るようになります。
ここまで進めば、次のお話に進めます。
実際に作成してみる
画面側を編集します。
選択したリピータ全体をクリックすると 左上に「#Repeter1]と確認できると思います。
そして、画像のところをクリックすると「#image1]」とか確認できると思います。
更に、文字のところをクリックすると「#text1]などが確認できると思います。
ここでは、最初に付与された「＃〇〇番号」をそのまま利用します。
次にデータセットを作成します。
編集画面の左に「コンテンツマネージャー」を開き、
「コンテンツ要素を追加」に進み、
「データセット」をクリックすると編集画面に
右図のようなデータセット画面が追加されます。
「#dataset1」などが確認できると思います。
このデータセットから作成したデータベース名を選択します。
＃○○番号」。画面の部品の管理番号です。
なお、Repeater内の設定はデータベースへ接続(コレクションを接続）だけで、各フィールドの設定は必要ありません。
WIX CODEから読み込みます。
ここまで、出来ましたか？
ここまで出来ましたら、あと少しで完成します。
作成したデータベースを選択する
開発プログラムを確認する。
下のサンプルプログラムを確認してください。
先ほどの「#〇〇番号」がところどころで確認できると思います。
最初からあるWIX CODEをすべて削除してから、下のプログラムをコピーして、WIX CODE編集画面に貼りつけて、先ほど設定した画面の中に有る＃Repeaterや#textや#imageや＃datasetを自身で取得した#〇〇番号に書き換えてみましょう。
"#〇〇番号"と itemData.(ご自身のデータベースフィールド名）の部分を自身で編集する。
それ以外は、編集しなくて大丈夫なように解説してますが、伝わりましたか？
先ずは検索画面の無いほうからデータの一覧表を作成してみます。
１ページに表示させたいデータの数
プログラム結果を確認する
設定が終われば、完成しているか確認するために「保存」して「プレビュー」で確認します。
もし、問題が有ればWIX CODE画面にエラーとエラーの行が表示されます。
書き換えるときに細かいところが間違っているかもしれません。
よく確認しましょう。
次に「検索機能」を作ります。
WIX編集画面から「入力BOX」を作ります。
これにも「#○○番号」が振られてますので、上記のサンプルプログラムの検索のところをWIX CODEに書き加えて、自身の＃番号に変更します。
「保存」して、「プレビュー」で動作確認をします。
出来上がりましたか？
仕上げ作業
最後に編集画面で、TOTALデータ数を表示させるテキストBOXとページを変えるパジネーションバーをWIX部品から画面に配置します。
TOTALデータの#〇〇番号をサンプルプログラムを書き換えて、パジネーションバーのデータセットを設定すれば完了します。
後は、画面のレイアウトを調整すれば完成です。
最後に
何事も最初は辛いですが、2～3回ほど練習で作ってみれば、後から 「なあ～んだ」となると思います（笑）
何をするにもチャレンジが重要です。
私は、これを作る目的達成ために3日も徹夜して目的を達成しました(笑)
上手くいけば、達成感が味わえます(笑)
明るい未来は目の前に見えてますので、くじけずに頑張ってください。
bottom of page