Wix Blocks:Wix Blocks アプリのワークフロー
読了時間:7分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
Wix Blocks を使用すると、Wix サイトで何度でも使用できるアプリを作成することができます。または、Wix App Market でアプリを公開して、何百万人ものユーザーにリーチしましょう!
アプリを計画する
アプリを作成する
サイトで作業している際に、「App Market」
から Wix Blocks を開き、新しいアプリを作成することができます。
![app market](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2022/09/05/a3a3f7b0-5e35-4f1e-b020-67bac14185bb/e9197460-8f57-43e1-8f07-d4d5208e9858.png)
ヒント:
アプリの作成を選択すると、Wix Blocks が新しいウィンドウで自動的に開きます。アプリを作成したら、ウェブサイトに戻ってアプリをインポートできます。
アプリの種類を選択する
次のオプションから選択します:
- 白紙テンプレート:アプリに UI ウィジェットを追加します。
- コードパッケージ:アプリにコードファイルとフォルダを追加します。
- カスタム要素:HTML コードを埋め込みます。
- デザイン済みのウィジェット
![「新規アプリを作成」画面](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/05/d134354f-b07d-4493-8f8a-c83a9a0d93f8/51de8492-6405-4d11-ac26-bc09213902bb.png)
ウィジェットを追加する
ウィジェットを使用すると、アプリに UI を追加することができます。
- 「アプリの構造 」メニューの「ウィジェットとデザイン」パネル
に移動します。
- 「+ウィジェットを追加」をクリックして、最初のウィジェットを追加します。
要素を追加する
デザイン要素は、テキスト要素、ボタン、画像、ユーザー入力フィールドなど、ウィジェットの基本的な構成要素です。Wix Blocks は、最高のユーザーエクスペリエンスを提供するために、閲覧中の画面やデバイスに自動的に調整するアプリを作成するためのレスポンシブなワークスペースです。
Wix Blocks の「要素を追加」パネルには、デザイン要素(UI 要素とも呼ばれます)をウィジェットに追加するためのオプションがたくさんあります。
![要素を追加する](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/1a940d51-28f0-4103-bd73-a6a9613d00c8/1a8c8134-f020-4289-9d2b-5a9650e7cd60.png)
要素にプロパティとイベントを追加する
ウィジェット要素をサイトスタイルに接続する
ウィジェットは最終的に Wix サイトにインストールされるため、サイトのスタイルで定義されているサイトの色やフォントと調和することが重要です。すべての要素をカラースタイルとテキスト(タイポグラフィ)スタイルに接続してください。
![サイトスタイルに接続する](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/524d30ca-da9b-49d3-8453-306b0e3b78e7/b6bc04f8-bb18-45e8-85c6-c611b504ce75.png)
ウィジェットに Velo コードを追加する
Velo コードは、Wix ウェブサイトに追加するのと同様の方法でウィジェットに追加できます(Velo by Wix の詳細はこちら)。ウィジェットにコードを追加するには、「デザイン」タブを開き、下部にあるコードエディタを使用します。
![公開・バックエンドパネル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/17dbd6ec-dbcf-4f5e-bc72-b49140b9764e/5b48a2c0-a76f-4ff6-8904-ef33fed49a3b.png)
ウィジェット API を定義する
Widget API を使用すると、ウィジェット全体にプロパティ、イベント、関数を追加できます。追加したプロパティ、イベント、または関数は、Wix エディタまたは Editor X でウィジェットを操作しているサイト制作者がアクセスできるようになります。プロパティは、エディタ内のウィジェットのデフォルト「設定」パネルに表示されます。
たとえば、カウンターウィジェットのチュートリアルでは、カウンターの増分(1,2,3,4 や 2,4,6,8 など)を制御する `step` プロパティを定義しています。
ウィジェット API にプロパティ、イベント、関数を追加するには、「ウィジェット公開 API」アイコン
をクリックします。
![widget public api](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2021/07/28/6929511d-cd6e-4ce6-b08c-ba7728b9091a/fac31b38-ee6f-4bad-b8a6-27298991a79d.jpg)
![ウィジェット公開 API](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/ea90d39a-0669-4b5c-a0c0-f9225fccb321/b5222da9-9789-48d3-aa1a-3197e124cc30.png)
ウィジェットをプレビュー・テストする
ウィジェットを設定してカスタムパネルを作成する
「設定」タブでは、サイトにインストールした際のウィジェットとその要素の外観と動作を定義できます。表示名を変更したり、アクションバーにボタンを追加・削除したり、ボタン設定を変更したりできます。また、要素を選択、複製、削除できるかどうかを決定することもできます。
![設定タブ](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/8137ffb1-6994-4262-a11d-9e6b2dd8f80d/96d2c686-4cde-4cc9-b6ed-dcfb10e85069.png)
「パネル」タブでは、サイト制作者がエディタでウィジェットを編集した際に、ウィジェットのデフォルトパネル(「設定」や「デザイン」など)の代わりに開くカスタムパネルを作成できます。
![パネルタブ](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/e449967d-24c8-4fab-af97-5b98b77519d6/14bce80a-66e9-422c-919a-0f3ba34a4cdb.png)
デザインプリセットを作成する
デザインプリセットを使用して、ウィジェットに複数のレイアウトとスタイルを作成できます。デザインプリセットを作成すると、ウィジェットは同じ要素と機能を保持しますが、色やレイアウトなどを変更することができます。
「デザインプリセット」は、「ウィジェットとデザイン」パネルにあります。「デザイン」タブで作業している場合は、「アプリの構造 」アイコン
をクリックし、「ウィジェットとデザイン」アイコン
を選択してください。
![app structure](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2021/07/28/26744ef8-963f-44d2-8ef9-b2f88e303936/87c10065-c306-419e-a9b4-6cd8d8d7d706.jpg)
![widgets and design icon](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/05/16/b9ad9859-d4d5-47ec-9e9b-6d733f5d53fb/0cd7f093-b5ab-4b02-94e3-36f33db156a3.png)
![デザインプリセットを追加する](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/165a9f76-8824-4694-8247-d8f50bc09cc5/b1e3b948-dcbf-490b-bfe0-ff9d2ddd5b29.png)
アプリにウィジェットを追加する
「アプリの構造」
を開いてアプリにウィジェットを追加し、「ウィジェットとデザイン」
を選択して「+ウィジェットを追加」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2021/07/28/26744ef8-963f-44d2-8ef9-b2f88e303936/87c10065-c306-419e-a9b4-6cd8d8d7d706.jpg)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/05/16/b9ad9859-d4d5-47ec-9e9b-6d733f5d53fb/0cd7f093-b5ab-4b02-94e3-36f33db156a3.png)
「デザイン」タブを表示していることを確認します。
![ウィジェットを追加する](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/08/30/12ac4e71-db0f-4048-96ed-7c03a6b74dd3/9878744f-e2a2-4c0b-9b41-6392546d4622.png)
アプリにコードファイルを追加する
アプリにコードファイルを追加するには、「アプリの構造」メニュー
の「公開・バックエンド」パネル
に移動してくだい。次に、追加するコードの種類を選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/05/16/3323c2e0-9f8d-409c-8893-78bff1296917/d3e15c7a-f8c8-4062-90dc-96f9b9a43294.jpg)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/6b5c7381-912e-4754-99e2-d23157db088c/2022/05/16/ae6caaee-a6a3-4e81-a9cd-ec610c11ca9e/f4621268-d68f-44b0-9ac6-49c9d3e18809.jpg)
アプリに機能を追加する
アプリには、次のような機能を追加することができます:
お役に立ちましたか?
|