ホームページ作成ツール「Wix」でJavascriptが実装可能なWix Codeが新登場！

2017/12/17

ウェブブラウザのみで誰でも簡単に本格的なホームページ作成ツール「Wix」は、Javascriptが実装可能な「WixCode（ベータ版）」を新たにリリースしています。

これまでも、豊富なテンプレートから簡単な操作で個性的なホームページ作成ができるツールとして、当サイトでも紹介しましたが、WixCodeを使うことで、より表現力が豊かなホームページ作成ができるようになりそうです。

今回、実際にWixCodeを使ってみましたので、使用開始までのフローを紹介し、その使い勝手を検証してみましたので紹介します。

目次

WixCodeとは？

WixCodeとは、ウェブサイトのみでホームページ作成ツールを提供している「Wix」が提供している、Javascriptを実装可能なツールです。

Wixを使ってホームページを作成する場合、ウェブブラウザ上で「Wixエディタ」と呼ばれる、編集ツールによりホームページの作成が可能ですが、ウェブブラウザを使用する関係上、さまざまな制限がありましたが、WixCodeではこれらの制限を取り除き、拡張性を高くして表現力豊かなホームページの作成と自由なWebアプリケーションの作成などが可能になり、よりリッチなホームページを作成することができるようになります。

WixCodeを利用することで、動的なページを作成したり、サイト訪問者の情報を収集しその情報に基づいたページの作成、外部のAPIと連動するといったことができます。WixCodeを利用する場合でも、専門的なコーディングの知識や、専用のツールを用意するといった手間も不要で始められますので、初心者でも簡単に作業ができます。

表現力が豊かなホームページの作成に加え、サイト訪問者の情報や動向に合わせたページ作成ができるなど、訪問者の好みに応じたプロモーションが出来るようになるなど、ホームページの収益向上にも期待できると言えそうです。

WixCodeでできること

WixCodeでは、データベースの作成や動的ページの作成、入力フォームの作成といった様々な機能をホームページに追加することがd系ます。

1.データベースの作成

データベースを作成して会員情報などを管理することができます。

2.動的ページの作成

データベースの情報より毎回異なる情報を自動で表示することができます。

3.入力フォームの作成

サービスの申し込みやアンケート調査など独自の入力フォームの作成ができます。

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

ボタンをクリックするなど指定した動作を行った場合、動作毎にアニメーションを追加することが可能です。

5.APIの追加

APIを使うことで、外部サービスとの連携が可能になります。

WixCodeの始め方

WixCodeは、2017年12月時点ではベータ版として公開されています。そのため、あらかじめ、WixCodeのベータ版プログラムの申し込みが必要となりますので、「Wix Codeのベータ版プログラム申し込みぺージ」より手続きを行います。

ベータ版の申し込みが完了後、ご自身のIDとパスワードでWixにログイン後、「こちらからスタート」をクリックして開始します。

次のページで、ご自身が作成したいホームページのジャンルを選択します。

作成したいホームページのテンプレートを選択します。テンプレートにカーソルを当て「編集」ボタンをクリックするとWixエディタが起動します。

Wixエディタより「ツール」→「デベロッパーツール」にチェックを入れることで、WixCodeが利用可能になります。

実際にWixCodeを使ってみる

実際にWixCodeを始める場合も、難しい作業は不要でWixエディタの左メニューの「追加」ボタンより、実際に行いたい作業を選ぶだけで始めることができます。

データベースの作成

データベースを作成して会員情報を管理したい場合や、データベースの情報に基づいて動的なページを作成したいという場合は、「追加」より「Database」より、データベースコレクションより、データベースを作成できます。

入力フォームの作成

独自の入力フォームを作成したい場合も、「追加」より「ユーザー入力」を選択することで、テキストボックスなど配置したいパーツを選んで入力フォームの作成が可能です。

カスタムインタラクティブの追加

カスタムインタラクティブを追加する場合は、左メニューの「追加』→「インタラクティブ」より、好みのインタラクティブを追加します。

コードの追加・編集

実際に任意のコードを追加・編集したい場合は、Wixエディタ下部のホームページコードより、任意のコードを追加、編集が可能です。

Wixでは用途に応じた「サンプルコード」を幾つか用意していますので、参考にしてみるのもよいでしょう。