Wix Blocks:Wix Blocks アプリのダッシュボードページを作成・管理する
読了時間:6分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
Wix Blocks では、作成したアプリにダッシュボードページを追加することができます。追加したダッシュボードページでは、サイト制作者がアプリのデータや設定を管理することができます。以下は、Wix ポートフォリオアプリのダッシュボードページの一例です。
![Wix Blocks アプリのダッシュボードページの一例。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/20/b2843d54-1241-43f8-bc99-001065af4f9a/05ba17ee-c5c0-485c-ac76-18b17b20ca97.png)
サイト制作者が Wix Blocks アプリをサイトにインストールすると、サイトダッシュボードにアプリの名前が付いたダッシュボードページが表示されます。
![サイトダッシュボードに、Wix Blocks アプリのダッシュボードページが表示されている様子。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/19/b8530b66-229d-4e4f-b455-41320fbf8f91/cfd806e2-b9f8-494e-99b9-fee37ab5f076.png)
ダッシュボードページを作成する
「アプリの構造」メニュー
の「アプリのダッシュボード」
から、Wix Blocks アプリにダッシュボードページを追加します。
![app structure menu](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/19/19804e24-ce2b-4adc-9acc-a76737f9cbd0/0cfc3d7d-82b8-4632-a24c-9ca2c647a4c2.jpg)
![dashboard icon](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/19/92fc42f1-0eaf-4730-8633-f576a35a456b/bf2f2247-ff2b-4df8-9d2e-fa751280fc17.png)
ダッシュボードページには以下が含まれます:
- レイアウトツール、ボタン、テキスト入力欄などの要素を追加できるキャンバス。Wix Blocks には、ダッシュボードで一般的に使用されるユーザーインターフェース(UI)のテンプレートが用意されています。もちろん、このテンプレートはカスタマイズ可能で、Wix Blocks でウィジェットをデザインするのと同じように、ダッシュボードページをデザインすることができます。
- ダッシュボードにコードを追加するためのコードセクション。
重要:
現在、Wix Blocks アプリのダッシュボードページは、1つのみ作成することができます。
ダッシュボードページでマルチステートボックスを使用する
アクションボタンにダッシュボードページを割り当てる
ダッシュボードページを開くには、ウィジェット内にあるいずれかの要素のメインアクションのボタンを使用するのが最も一般的な方法です。これを行うには:
- 「設定」タブに移動します。
- 設定したいウィジェットまたは要素をクリックします。
- 「アクションバーを編集」をクリックします。
- 左側にあるメインアクションのボタンにマウスオーバーします。
- 「アクションボタンの設定」をクリックします。
![「アクションボタンの設定」が表示されている様子。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/19/9d436458-6241-4cda-866c-3ba1c1be8f72/301fc3fb-b4ba-4d6a-9cf2-239744a00f36.png)
- 「ダッシュボード」を選択します。
- ダッシュボードページを選択します。
![「メインアクションの設定」パネルが表示されている様子。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/19/91c9d423-a3ec-4c53-8502-28db90236197/1bbc0ae6-8174-498d-9301-065da17c20df.png)
カスタムパネルからダッシュボードページを開く
Wix Blocks パネルビルダーでカスタムパネルを作成すると、そのパネルからダッシュボードページを開くことができるようになります。(パネルについての詳細はこちら)これを行うには:
まず、ダッシュボードの URL を取得します。
- 「アプリのダッシュボード」メニュー
に移動します。
- ダッシュボードページの名前にマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「リンクをコピー」をクリックします。
次に、パネルコードでこの URL を使用します。
- 「パネル」タブに移動します。
- 「マイパネル」メニューからパネルを選択します。
- パネルのコードセクションに移動します(コードセクションが表示されない場合は「最大化」アイコン
をクリックします)。
- wix-editor モジュールをインポートします:
1import wixEditor from 'wix-editor';
- パネルからダッシュボードページを開くことができるよう、以下を参考にして openDashboardPanel() 関数のパラメータに、先ほどコピーしたダッシュボードの URL をペーストします。
1wixEditor.openDashboardPanel('app/771680a8-ad76-4a3c-8bfc-4e2873de96c9');
ダッシュボードページにコードを追加する
ダッシュボードページのコードセクションを使用して、ダッシュボードページにコードを追加します。コードには以下を含めることができます:
- ウィジェットと類似したビジネスロジック(ウィジェットコードについての詳細はこちら)(英語)
- アプリのコレクションに保存されているデータの操作(Wix Blocks のコレクションについての詳細はこちら)
- ダッシュボードページ固有のアクション(wix-dashboard 関数についての詳細はこちら)(英語)
ダッシュボードページにコードを追加する方法:
- 「アプリのダッシュボード」メニュー
からダッシュボードを開きます。
- ダッシュボードのコードセクションに移動します(コードセクションが表示されない場合は「最大化」アイコン
をクリックします)。
ダッシュボードページと Wix デベロッパーセンター
Wix Blocks で作成されたダッシュボードページは、Wix デベロッパーセンターの My Apps の「コンポーネント」ページにも表示されます。(英語)これは、Blocks Dashboard という名前のコンポーネントとして表示されます。
重要:
Wix デベロッパーセンターからは、Wix Blocks アプリのダッシュボードページを編集しないようにしてください。
![デベロッパーセンターのコンポーネント](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/20/20514103-1436-4138-9da9-c482ec0a1dfc/f701ece0-ffbb-4b6d-9dbf-daa253868e8b.png)
Wix デベロッパーセンターからも Wix Blocks アプリのダッシュボードページを作成することはできますが、その場合 Wix Blocks で作成するものとは異なり、ページが iFrame の URL で構成されます。(英語)そのため、この記事で紹介したすべての機能を利用することはできなくなるためご注意ください。なお、Wix デベロッパーセンターでは、これは Dashboard という名前のコンポーネントとして表示されます。
![デベロッパーセンターのコンポーネント](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/378fd532-728d-473b-8f03-30140bda59af/2023/04/20/9d5b98cd-ece2-4468-97af-0c7a33b4eb26/b1171fa8-505c-4ea5-a88d-e23a6965e6ea.png)
アプリをサイトにインストールすると、サイトダッシュボードに両方の種類のページが表示されます。
お役に立ちましたか?
|