Wix新製品「Wix Code」について(その1:概要)

Wix新製品「Wix Code」について(その1:概要)

Posted at November 2,2017 12:03 AM
Tag:[Wix]

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

1.はじめに

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

Wix Code
Wix Code

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

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

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

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

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

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

2.データベース

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

データベース

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

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

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

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

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

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

3.ダイナミックページ

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

ダイナミックページ

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

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

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

4.ユーザー入力

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

ユーザー入力

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

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

5.カスタムインタラクション

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

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

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

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

6.WixコードAPI

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

WixコードAPI

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

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

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

以上です。

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

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)