コーディング知識がなくてもドラッグ&ドロップ操作だけで簡単に無料ホームページを作成することができるWix.com。
そのWix.comにデータベース構築&動的ページ作成ができる機能が追加されました。
自分自身、以前webの会社に在籍していたときに「CakePHP」や「Laravel」といったフレームワークを使ってWEBサービスを作っていましたが、動的サイトを作るにはプログラミングだけでなくデータベース周りの専門知識も求められIT初心者の方が簡単に作れるものでは到底ありません。
しかし、今回リリースされたWixCodeを使えば同じようなことがプログラミング知識なしでもできるようになりました。
ということで、さっそくWixCodeを使って試しに簡易的な動的サイトを作ってみたので(驚くほど簡単にできた)、実際の使い方や手順・感想をご紹介したいと思います。
目次
Wix.comはじめての方へ
「Wix.comって何？初めて聞いた。」という方はこちらの記事をざっと読んでいただいて大まかなサービスの内容を理解していただけたらと思います。
Wixのサービス紹介と初心者の方向けに簡単なホームページ作成の手順をわかりやすく解説しています。
WixCodeの使い方
WixCodeの機能はデフォルトではONになっていないので、利用開始するにあたってエディタ画面上にある「コード」をクリックして「デベロッパーツールを有効にする」をオンにします。
はい、これだけでもうデーターベースを利用する準備ができました。
ではさっそくDBを使ってみましょう。画面左「Database」の下にある「Add new collection」をクリック。今回は「Photos」という名前のデータベースを作成。
すると下のようなテーブル作成画面が表示されます。
カラムを追加する
今回はちょっとしたポートフォリオサイトにしたいので写真に「タイトル(title)」「撮影日時(date)」「写真(image)」といった情報を加えてみたいと思います。
「Title」というフィールドはすでにあるので「date」と「image」を追加します。
下の画像にあるように「＋」ボタンをクリックして「フィールド名」を英語で入力し、「フィールドタイプ」を選択します。
「撮影日時」は「Date」と入力しフィールドタイプは「日時」を選択、「写真」は「image」と入力しフィールドタイプは「Image Source」を選択します。
これで「Date」「Image」のフィールドが追加されました。
データを入力する
作成したカラムにデータを入力します。
「Title」は手入力、「Date」は日付を選択し、「Image」はドラッグ&ドロップで画像ファイルをアップロードできます。
試しに3つほどデータを入れてみました。
簡単ですね。
ここではデータを手入力しましたが、ファイルから一括インポートすることも簡単にできます。
データを公開する
実はここで追加したデータは「サンドボックスデータ」と呼ばれ、外部からは参照できないようになっています(開発時に使うテストデータみたいなものです)。
なので、このデータを公開するために「サンドボックス」にあるデータを「ライブデータ」にコピーする必要があります。
試しに今の状態で画面上にある「Live」というボタンを押してみてください。
「このコレクションを Live データベースにコピーするためにはサイトを公開してください」と表示されます。
ということでさっそくサイトを公開してみましょう。サイトを公開するには画面右上にある「公開」ボタンをクリック。
とりあえずはテンプレートそのままですが、サイトが公開されました。
https://hatablog.wixsite.com/mysite-4
そして、もう1ステップ。次にサンドボックスのデータをライブデータにすべてコピーします。
画面上にある「同期」ボタンを押し、表示されるオプションから一つ選んでデータを同期。
これでデータの同期は終了。「Live」ボタンを押すとデータが反映されているのを確認することができます。
動的ページを作成する
さて、ここまででデータを追加する作業は終わりましたが、肝心のデータを閲覧する個別ページがまだありません。
次は動的ページを作っていきましょう。
「Photo」データベースの右アイコン「動的ページを追加」をクリック。
今回はアイテムを１つずつ表示する「アイテムページ」を作っていきたいと思います。
エディタ左にPhotos(Title)という新しい項目が作成されました。
では動的ページを編集していきましょう。
「追加」→「テキスト」→「ヘッディング」をクリックすると画面上に「ヘッディング」と書かれたテキストフィールドが追加されます。
そしてここに表示されるテキストをデータベースから引っ張ってきます。右上にあるDBのアイコンをクリック。
「接続設定」→「Title(テキスト)」を選択。
DBアイコンが緑色に変わり、接続されたことが確認できます。
同じ要領で「Date」を表示させるテキストフィールドを作成してDBと連携させてください。
「Image」はちょっとわかりにくいのですが、「追加」→「画像」→「画像をアップロード」を選んでいくとDBに入っている画像一覧が表示されるので適当に1枚選択して「ページに追加」をクリックしてください。
あとは同じようにDBアイコンから画像を連携してください。
これで動的ページにある3つのフィールドとDBにある「タイトル」「日付」「画像」がそれぞれ連携されました。
プレビューで動的ページを確認する
では「プレビュー」ボタンを押して動的ページを確認してみましょう。
はい、これで3つの動的ページを確認することができます。右上のタイトルでページを選択するとそれぞれのページに切り替わります。
ちなみにWixのテンプレートはモバイル完全対応なので自動的にスマホ画面も作成されます。もちろんモバイル画面のプレビューも見れます。
画面右上の「公開」ボタンを押すと3つの動的ページが公開されます。
それぞれのページにも個別のURLが振り分けられています。実際に下のリンクをクリックすると今回作成したサンプルサイトを見ることができます。
https://hatablog.wixsite.com/mysite-4/Photos/クルーズ旅行に出発!!
https://hatablog.wixsite.com/mysite-4/Photos/洋上プール
https://hatablog.wixsite.com/mysite-4/Photos/スイーツも食べ放題
あとはインデックスページを作って個別URLにリンクさえ貼れば立派なポートフォリオサイトの出来上がりです。
今回は3ページしか作りませんでしたが、例えば写真が1000枚あったとしてもこれだけのステップで1000ものページを一瞬にして生成することができます。
あとはカスタマイズ次第でいくらでも見栄えの良いサイトにできます。
WixCodeなら専門知識なしも高度なサイト作成ができる
かなりざっくりでしたが、今回はWixCoddeのデータベース機能を紹介しました。
これを1からやろうと思ったらサーバー契約、データベース・フレームワークインストールなどの環境構築からHTML/CSS/プログラミンの知識が必要となり、とてもじゃないですけどITの素人ができることではありません。
それがWixならプログラミングの知識がなくてもドラッグ&ドロップとボタンをポチポチ押していくだけで勝手にプロ並みの高度なサイトが出来上がるのですからスゴイです。
今回紹介したのはたくさんあるwixのなかのホンのホンの一部です。まだまだ便利な機能が沢山備わっていますから、これからホームページを作成するという方はwixも検討されてはいかがでしょうか。
参考：WixCode公式サイト