Wix Blocks：Wix Blocks アプリのワークフロー

読了時間：7分

Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。

Wix Blocks を使用すると、Wix サイトで何度でも使用できるアプリを作成することができます。または、Wix App Market でアプリを公開して、何百万人ものユーザーにリーチしましょう！

アプリを計画する

アプリには以下を含めることができます：

ユーザーインターフェース（UI）ウィジェット
コードファイルとフォルダ
データコレクション
ダッシュボードページ

また、以下も計画する必要があります：

アプリを作成する

サイトで作業している際に、「App Market」

から Wix Blocks を開き、新しいアプリを作成することができます。

ヒント：

アプリの作成を選択すると、Wix Blocks が新しいウィンドウで自動的に開きます。アプリを作成したら、ウェブサイトに戻ってアプリをインポートできます。

アプリの種類を選択する

次のオプションから選択します：

白紙テンプレート：アプリに UI ウィジェットを追加します。
コードパッケージ：アプリにコードファイルとフォルダを追加します。
カスタム要素：HTML コードを埋め込みます。
デザイン済みのウィジェット

ウィジェットを追加する

ウィジェットを使用すると、アプリに UI を追加することができます。

「アプリの構造 」メニューの「ウィジェットとデザイン」パネルに移動します。
「＋ウィジェットを追加」をクリックして、最初のウィジェットを追加します。

要素を追加する

デザイン要素は、テキスト要素、ボタン、画像、ユーザー入力フィールドなど、ウィジェットの基本的な構成要素です。Wix Blocks は、最高のユーザーエクスペリエンスを提供するために、閲覧中の画面やデバイスに自動的に調整するアプリを作成するためのレスポンシブなワークスペースです。

Wix Blocks の「要素を追加」パネルには、デザイン要素（UI 要素とも呼ばれます）をウィジェットに追加するためのオプションがたくさんあります。

アプリに要素を追加する方法はこちら

要素にプロパティとイベントを追加する

プロパティを使用して、ウィジェットの要素をカスタマイズすることができます。たとえば、ウィジェットが読み込まれたときに要素を非表示にするかどうかなどです。イベントハンドラでは、要素の操作性を決定できます。たとえば、ボタンがクリックされたときの動作などです。この操作は、要素を選択し、下部の「プロパティ・イベント」アイコン properties and events

をクリックすることで行うことができます。

ウィジェットは最終的に Wix サイトにインストールされるため、サイトのスタイルで定義されているサイトの色やフォントと調和することが重要です。すべての要素をカラースタイルとテキスト（タイポグラフィ）スタイルに接続してください。

Velo コードは、Wix ウェブサイトに追加するのと同様の方法でウィジェットに追加できます（Velo by Wix の詳細はこちら）。ウィジェットにコードを追加するには、「デザイン」タブを開き、下部にあるコードエディタを使用します。

Widget API を使用すると、ウィジェット全体にプロパティ、イベント、関数を追加できます。追加したプロパティ、イベント、または関数は、Wix エディタまたは Editor X でウィジェットを操作しているサイト制作者がアクセスできるようになります。プロパティは、エディタ内のウィジェットのデフォルト「設定」パネルに表示されます。

たとえば、カウンターウィジェットのチュートリアルでは、カウンターの増分（1,2,3,4 や 2,4,6,8 など）を制御する `step` プロパティを定義しています。

ウィジェット API にプロパティ、イベント、関数を追加するには、「ウィジェット公開 API」アイコン widget public api

をクリックします。