データベースも使える!!WixCodeを使ってポートフォリオサイトを作ってみた

(画像引用:wix.com公式サイト)

コーディング知識がなくてもドラッグ&ドロップ操作だけで簡単に無料ホームページを作成することができるWix.com。

そのWix.comにデータベース構築&動的ページ作成ができる機能が追加されました。

自分自身、以前webの会社に在籍していたときに「CakePHP」や「Laravel」といったフレームワークを使ってWEBサービスを作っていましたが、動的サイトを作るにはプログラミングだけでなくデータベース周りの専門知識も求められIT初心者の方が簡単に作れるものでは到底ありません。

しかし、今回リリースされたWixCodeを使えば同じようなことがプログラミング知識なしでもできるようになりました。

ということで、さっそくWixCodeを使って試しに簡易的な動的サイトを作ってみたので(驚くほど簡単にできた)、実際の使い方や手順・感想をご紹介したいと思います。

Wix.comはじめての方へ

「Wix.comって何?初めて聞いた。」という方はこちらの記事をざっと読んでいただいて大まかなサービスの内容を理解していただけたらと思います。

Wixのサービス紹介と初心者の方向けに簡単なホームページ作成の手順をわかりやすく解説しています。

【レビュー】無料ホームページ作成ツール「Wix.com」の評判と使い方

2016.03.29

WixCodeの使い方

WixCodeの機能はデフォルトではONになっていないので、利用開始するにあたってエディタ画面上にある「コード」をクリックして「デベロッパーツールを有効にする」をオンにします。

Wixcodeを有効にする

はい、これだけでもうデーターベースを利用する準備ができました。

ではさっそくDBを使ってみましょう。画面左「Database」の下にある「Add new collection」をクリック。今回は「Photos」という名前のデータベースを作成。

データベースを作成

すると下のようなテーブル作成画面が表示されます。

スクリーンショット 2018 06 05 15 39 51

カラムを追加する

今回はちょっとしたポートフォリオサイトにしたいので写真に「タイトル(title)」「撮影日時(date)」「写真(image)」といった情報を加えてみたいと思います。

「Title」というフィールドはすでにあるので「date」と「image」を追加します。

下の画像にあるように「+」ボタンをクリックして「フィールド名」を英語で入力し、「フィールドタイプ」を選択します。

フィールドを追加

「撮影日時」は「Date」と入力しフィールドタイプは「日時」を選択、「写真」は「image」と入力しフィールドタイプは「Image Source」を選択します。

これで「Date」「Image」のフィールドが追加されました。

フィールドが追加された

データを入力する

作成したカラムにデータを入力します。

「Title」は手入力、「Date」は日付を選択し、「Image」はドラッグ&ドロップで画像ファイルをアップロードできます。

試しに3つほどデータを入れてみました。
データ入力

簡単ですね。

ここではデータを手入力しましたが、ファイルから一括インポートすることも簡単にできます。

データを公開する

実はここで追加したデータは「サンドボックスデータ」と呼ばれ、外部からは参照できないようになっています(開発時に使うテストデータみたいなものです)。

なので、このデータを公開するために「サンドボックス」にあるデータを「ライブデータ」にコピーする必要があります。

試しに今の状態で画面上にある「Live」というボタンを押してみてください。

Liveをクリック

このコレクションを Live データベースにコピーするためにはサイトを公開してください」と表示されます。

ということでさっそくサイトを公開してみましょう。サイトを公開するには画面右上にある「公開」ボタンをクリック。

サイトを公開する サイトが公開された

とりあえずはテンプレートそのままですが、サイトが公開されました。

https://hatablog.wixsite.com/mysite-4

そして、もう1ステップ。次にサンドボックスのデータをライブデータにすべてコピーします。

画面上にある「同期」ボタンを押し、表示されるオプションから一つ選んでデータを同期。

データを同期する

これでデータの同期は終了。「Live」ボタンを押すとデータが反映されているのを確認することができます。

Live ボタンでデータの同期確認

動的ページを作成する

さて、ここまででデータを追加する作業は終わりましたが、肝心のデータを閲覧する個別ページがまだありません。

次は動的ページを作っていきましょう。

「Photo」データベースの右アイコン「動的ページを追加」をクリック。

動的ページを追加

今回はアイテムを1つずつ表示する「アイテムページ」を作っていきたいと思います。

アイテムページを作成

エディタ左にPhotos(Title)という新しい項目が作成されました。

新しい項目が作成された

では動的ページを編集していきましょう。

「追加」→「テキスト」→「ヘッディング」をクリックすると画面上に「ヘッディング」と書かれたテキストフィールドが追加されます。

ヘッディングを選択
テキストフィールドが追加された

そしてここに表示されるテキストをデータベースから引っ張ってきます。右上にあるDBのアイコンをクリック。

データベースアイコンをクリック

「接続設定」→「Title(テキスト)」を選択。

DBアイコンが緑色に変わり、接続されたことが確認できます。

データベースアイコンが緑色に

同じ要領で「Date」を表示させるテキストフィールドを作成してDBと連携させてください。

「Image」はちょっとわかりにくいのですが、「追加」→「画像」→「画像をアップロード」を選んでいくとDBに入っている画像一覧が表示されるので適当に1枚選択して「ページに追加」をクリックしてください。

画像を追加 画像を選択

あとは同じようにDBアイコンから画像を連携してください。

画像とDBを連携

これで動的ページにある3つのフィールドとDBにある「タイトル」「日付」「画像」がそれぞれ連携されました。

プレビューで動的ページを確認する

では「プレビュー」ボタンを押して動的ページを確認してみましょう。

プレビュー

はい、これで3つの動的ページを確認することができます。右上のタイトルでページを選択するとそれぞれのページに切り替わります。

動的ページ1 動的ページ2 動的ページ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公式サイト

参考:Wix公式ブログ「Wix Code新登場 」