小粋空間  -  a cheap joke and a play on words site

Wix新製品「Wix Code」について（その1：概要）

Wix新製品「Wix Code」について紹介致します。

１．はじめに

以前、「Wixブログの作り方」という記事を書きましたが、無料ホームページサービスのWix.comより、開発者向けの新プロダクト「Wix Code」がローンチされました。

Wix Code

「Wix Code」を使用することで、サーバレスでデータベースやデータベースコレクションの設定、コンテンツリッチWebサイトの作成、カスタムフォームの追加によるWebサイトを簡単に構築することができます。

すべての操作は、Wix Editorのビジュアルコンポーネントからアクセスできます。

ということで、数回に分けてWix新製品「Wix Code」について紹介したいと思います。

Wix Codeでできることは大きく次の5つの機能に分けられます。

• データベース
• ダイナミックページ
• ユーザー入力
• カスタムインタラクション
• WixコードAPI

以下、それぞれの機能について簡単に説明します。

２．データベース

サイトに表示するコンテンツをデータベースで管理することができます。データ量の制限はありません。

データベースを利用するには「コレクション」を作成します。

作成したコレクションに任意の型のカラム（フィールド）を追加することができます。

作成したデータベースに各レコードを保存することができます。

サイト上でどのようにデータベースを使用するかを選択し、ユーザによって追加・編集・表示の権限を制御することもできます。

サイトのコンテンツをデータベースに保存することで、サイトのデザインと別に管理することが可能になります。

ユーザは、ルック・アンド・フィールに影響を与えることなく、データベース内のすべてのテキストとイメージを追加および編集することができます。

３．ダイナミックページ

データベースに保存したデータから、それぞれがカスタムURLと固有のコンテンツを持つページを動的に作成することができます。

データベースのコンテンツを更新することで動的ページに反映されます。

また動的ページはカテゴリ別に整理することができ、項目のグループを表示することができます。

ダイナミックページでは、アイテム（＝データベースの1レコード）単位に表示する「ダイナミックアイテムページ」とカテゴリ別に分けられた「ダイナミックカテゴリページ」、そしてダイナミックアイテムページへのリンクを表示するための「インデックスページ」を作成することができます。

４．ユーザー入力

入力フォームを作成することで、ユーザーはサイトからフォーム経由でデータベースの入力が可能になります。

フォームは、ページに各要素をドラッグ＆ドロップすることで簡単に作成することができます。

フォームで送信されたデータは自動的にデータベースに保存されます。

５．カスタムインタラクション

ページ要素にJavaScriptコードを追加して、ページの動作をカスタマイズすることができます。

たとえば、ボタンをクリックすることによる要素の表示・非表示や要素の折りたたみ、マウスポイントによるふきだしや画像のハイライト表示など、ユーザー操作によるインタラクションを作成します。

JavaScriptが分からなくても設定することができます。

６．WixコードAPI

Wix Code APIを使用すれば、サイトの機能を制御することができ、ページ要素・サイトのデータベースコンテンツ・外部サービスと対話することができます。

例えば下記のものを操作することが可能です。

• サイトのコンポーネント
• サイトのデータベースコレクション
• データセットを通じてサイトのデータベースコレクション
• サードパーティのリソース取得

サードパーティのリソース取得でAPIキーを公開できないなど、セキュリティ上問題がある場合は、バックエンドWebモジュールからサービスを呼び出すことができます。

以上です。

次回はデータベースコレクションの作成について具体的な手順を紹介する予定です。