Wix Blocks チュートリアル：カウンターウィジェットを作成する
読了時間：12分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
このチュートリアルでは、数値の増減ができるカウンターウィジェットの作成方法を説明します。このシンプルなウィジェットを通して、Wix Blocks でできることをすべてご紹介します。
このウィジェットはゼロから作成することをおすすめしますが、問題が発生した場合は、ご自身の Wix アカウントから Wix Blocks でウィジェットのテンプレートを確認・編集することができます。
ステップ 1 | Wix Blocks で新しいウィジェットを作成する
- 空の Wix Blocks アプリを作成します。
- アプリがデフォルトのウィジェットで作成されていない場合は、アプリにウィジェットを追加します。
スクリーンショットを表示
ステップ 2 | レイアウターを追加する
レイアウターはレスポンシブなコンテナです。これにより、他の要素が整理されます。
レイアウターを追加する方法：
レイアウターを追加する方法：
- メニューで「要素を追加」アイコン
をクリックします。 - 「レイアウト」＞「フレックスボックス」＞「レイアウター」の順にクリックします。
- 縦型 3セクションのレイアウターをクリックします。
スクリーンショットを表示
ステップ 3 | ウィジェット要素を追加する
ボタンを追加する
- メニューで「要素を追加」アイコン
をクリックします。 - 「ボタン」をクリックします。
- レイアウターの右側のセクションにボタンをドラッグアンドドロップします。
スクリーンショットを表示
4.「テキスト・アイコンの変更」をクリックします。
5. ドロップダウンリストから「テキストのみ」を選択します。
6. テキストを「＋」に変更します。
7.「要素設定パネル」
の「デザイン」アイコン 
をクリックして、「テキスト」を選択します。
の「デザイン」アイコン をクリックして、「テキスト」を選択します。8.「スタイル」をクリックし、ドロップダウンリストから「見出し h6」を選択します。
9. 別の四角いボタンを左側のセクションにドラッグアンドドロップします。
10. テキストを「ー」に変更します。
スクリーンショットを表示
中央の数字を追加する
- 「要素を追加」アイコン をクリックし、「テキスト」を選択します。
- 「32px タイトル」をレイアウターの中央のセクションにドラッグアンドドロップします。
- テキストを「0」に編集し、中央揃えにします。
スクリーンショットを表示
ID を変更する
- 画面右下の「プロパティ・イベント」アイコン
をクリックします。 - インクリメント（増加）ボタンの ID を incBtn に変更します。
- デクリメント（減少）ボタンの ID を decBtn に変更します。
- テキスト要素の ID を countTxt に変更します。
スクリーンショットを表示
ステップ 4 | 要素にコードを追加する
次に、ウィジェットに本来の動作、つまりボタンがクリックされたときのカウントアップとカウントダウンを実行させます。
1.「コード」タブをクリックするか、画面の下部に移動して、ウィジェットにコードを追加します。
スクリーンショットを表示
2. onReady() 関数の前に次のコードを追加します。
1//Set the count to 0
2let count = 0;
3
4//Assign the count to your text element
5function render() {
6 $w('#countTxt').text = count.toString();
7}
8
9//Add a certain amount to the count and fire an event in the widget API
10function addToCount(amount) {
11 count += amount;
12 render();
13}3. onReady() 関数の中に次のコードを追加します。
1 $w('#incBtn').onClick(() => {
2 addToCount(1);
3 });
4
5 $w('#decBtn').onClick(() => {
6 addToCount(-1);
7 });
8
9 render();4.「プレビュー」ボタンをクリックして、ウィジェットの動作を確認します。
ステップ 5 | ウィジェット API を使用してウィジェットをカスタマイズ可能にする
ウィジェット API を定義すると、ユーザー（ウィジェットをインストールしたサイト所有者）がニーズに合わせてウィジェットをカスタマイズできるようになります。API には、プロパティ、イベント、エクスポートされた関数を含めることができます。
サイト所有者がカウントの「ステップ（目盛）」を決定できるようにするとします。ステップを 2 にすると、カウントが 0、2、4、6 などになります。
ウィジェット API で「step」という名前のプロパティを定義し、ユーザーがカスタマイズできるようにすることができます。
「step」プロパティを定義する
- 「ウィジェット API」アイコン
をクリックして、ウィジェット API パネルを開きます。 - 「プロパティ」セクションで「新しいプロパティを追加する」をクリックします（または、セクションにマウスオーバーして
アイコンをクリックします）。
スクリーンショットを表示
3. プロパティに「step」という名前を付け、タイプを「数値」、デフォルト値を「1」にします。
スクリーンショットを表示
新しいプロパティを考慮してコードを変更する
ボタンがクリックされたときに、デフォルト値の 1 ではなく、プロパティの step で addToCount が呼び出されるようにコードを変更します。
$widget.props を使用してプロパティにアクセスします（オートコンプリート Velo の提案に注意してください）。
1$w.onReady(function () {
2 $w('#incBtn').onClick(() => {
3 addToCount($widget.props.step);
4 });
5 $w('#decBtn').onClick(() => {
6 addToCount(-$widget.props.step);
7 });
8
9 render();
10});プレビューモードでプロパティをテストする
- 「プレビュー」をクリックしてプレビューモードに切り替えます。
- 「API プロパティのテスト」をクリックします。
スクリーンショットを表示
3. step を別の数値に変更し、ウィジェットの動作を確認します。
スクリーンショットを表示
ウィジェット API にパブリックイベントを追加する
ウィジェット API を使用すると、決めたタイミングで発生するイベントを追加できます。
「count」変数が変更されたときに発生するイベントを追加します：
- 「ウィジェット API」アイコン をクリックして、ウィジェット API パネルを開きます。
- 「イベント」セクションで「新しいパブリックイベントを追加する」をクリックします（または、セクションにマウスオーバーして
アイコンをクリックします）。 - イベントに名前をつけて説明します。
スクリーンショットを表示
4. 次の行を addToCount() 関数に追加して、カウントが変更されたときにイベントを発生させます。
1$widget.fireEvent('change', count);5. これで、addToCount() 関数は次のようになります：
1function addToCount(amount) {
2 count += amount;
3 render();
4 $widget.fireEvent('change', count);
5}エディタでイベントをキャッチする
ウェブサイトにウィジェットをインストールしたら、エディタでイベントをキャッチする必要があります（ステップ 8 で説明します）。
ウィジェット API に public 関数を追加する
サイト所有者が簡単にカウントを 0 に設定できるように、reset() 関数を作成してエクスポートします。
- 「ウィジェット API」アイコン をクリックして、ウィジェット API パネルを開きます。
- 「関数」セクションで「新しい public 関数を追加」をクリックします（または、セクションにマウスオーバーして アイコンをクリックします）。
- デフォルト名が foo() の新しい空の関数が作成され、サイトであなたの関数を使用するすべての人が読むことができる JSDoc（コメントブロック）が指定されます。
スクリーンショットを表示
4. 関数の既定のコードの代わりに、次のコードを貼り付けます：
1export function reset(){
2 //This function is part of my public API
3 count = 0;
4 render();
5}5. JSDoc を更新します。注意：関数の注釈はこの形式にする必要があります。
1/**
2*@function
3*@description Sets count to 0 and renders.
4*@returns nothing
5*/ヒント：
また、その逆も可能です。エクスポートされた関数の上に適切な JSDoc が表示されている場合は、右側の「ウィジェット API」パネルに表示されます。そのため、「新しいパブリック関数を追加する」をクリックしてテンプレートを受け取る代わりに、直接コードを記述することができます。
ステップ 6 |（オプション）ウィジェットの編集時の動作を設定する
「設定」タブでは、サイト所有者がエディタで編集した際のウィジェットとその要素の動作を決定できます。「設定」タブでいくつかのオプションを試してみてください。
スクリーンショットを表示
ウィジェット要素の表示名を設定します：
- デクリメントボタンを選択します。
- 要素設定パネル
の「パーツ名」下の表示名を「My Decrement」に変更します。
スクリーンショットを表示
エディタでテキスト要素が選択できないようにします：
- カウントを表すテキスト要素を選択します。
- 「要素設定パネル」
の「動作」セクションで「選択可能」オプションをクリックして青いチェックマークを削除します。
スクリーンショットを表示
ステップ 7 |（オプション）さらにデザインプリセットを作成する
Wix Blocks では、デザインプリセットを使用して、ウィジェットのデザインやレイアウトにさまざまなバリエーションを作成することができます。
別のデザインプリセットを作成する方法：
別のデザインプリセットを作成する方法：
- メニューの「デザイン」タブをクリックします。
- 「アプリの構造」
下にある「デザイン」パネルの「デザインプリセット」セクションで「＋デザインプリセットを追加」をクリックします。 - 「その他のアクション」アイコン
をクリックして、プリセットの名前を変更します（複製または削除もできます）。
スクリーンショットを表示
4. 中央のセクションの色を変更するなど、ウィジェットに視覚的な変更を加えます。
スクリーンショットを表示
プリセット間を移動して、違いを確認します。
プリセットごとの変更とグローバルな変更について：
デザインとレイアウトの変更には、現在のプリセットにのみ影響するものもあれば、すべてに影響するものもあります。詳細はこちら
ステップ 8 | サイトエディタでイベントをキャッチする
重要：
このステップは、Wix Blocks ではなく、Wix エディタまたは Wix Studio エディタで行います。
サイトエディタに移動して、アプリからイベントをキャッチします。まず、change イベントのイベントハンドラを登録する必要があります：
- ウィジェットアプリをインストールします。
- 「開発モード」を有効にします。
- 「プロパティ・イベント」アイコン をクリックします。
- ウィジェットの ID を「counter1」などに変更します。
- 「イベントハンドラ」下の「onChange( )」をクリックします。
- ボックスで「counter1_change」を選択します。
スクリーンショットを表示
次に、関数を記述します。パラメータとして「count」を取得し、指定した数値（この例では 30）に達するとカウントをリセットします。関数は次のようになります：
1export function counter1_change({data: count}) {
2 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
3 // Add your code for this event here:
4 if (count > 30) {
5 $w('#counter1').reset();}
6}プレビューまたは公開して、サイトの動作を確認します。
お役に立ちましたか？
|