Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. 高度な機能
  3. Wix Blocks
  4. チュートリアル
    5. Wix Blocks チュートリアル：カウントダウンウィジェットを作成する

Wix Blocks チュートリアル：カウントダウンウィジェットを作成する

読了時間：20分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
このチュートリアルでは、特定の日付までカウントダウンするカウントダウンウィジェットの作成方法を説明します。サイト訪問者がイベントに登録し、イベントの前日にメール通知を受信できる登録ウィジェットも含まれています。また、サイトにカウントダウンウィジェットをインストールする方法や、Wix Blocks の主な機能について説明します。
カウントダウンウィジェット

テンプレートに含まれるもの

作業を簡単にするために、すぐに始めることができるテンプレートをご用意しました。

テンプレートに含まれるもの：
  • カウントダウンウィジェット。デザインを完成させ、機能とプロパティをコーディングする必要があります。
  • 完成させ、カウントダウンウィジェットに追加する必要がある登録ウィジェット。
  • ウィジェットの機能を実装するために使用できるパブリックユーティリティ。
  • メール通知の機能を実装するために使用できるバックエンドコード。

ステップ 1 | ウィジェットのデザインを完成させる

このウィジェットをビルドするには、こちらのテンプレートを使用し、ご自身の Wix アカウントで編集してください。ウィジェットに要素を追加する方法を学ぶために、テンプレートは不完全な状態で残されています。
このウィジェットはグリッドを使用してデザインされているため、要素を簡単に配置することができます。

  1. テンプレートを開きます。
  2. 「ウィジェットとデザイン」下の「Countdown（カウントダウン）」をクリックします。
  3. 「要素を追加」Add icon をクリックします。
  4. 「テキスト」を選択します。「48px タイトル」ボックスをウィジェットにドラッグアンドドロップします。
  5. 「テキストを編集」をクリックし、テキストを「SS（秒）」に変更します。
  6. 「要素設定パネル」 を使用して、テキストの色を白に変更し、テキストを中央揃えにします
  7. テキストボックスを選択し、move elements icon を使用して SECONDS ラベルの上にあるグリッドの四角に移動します。
  8. stretch icon を使用してサイズを変更します。

ステップ 2 | ウィジェットの API プロパティを追加・定義する

ウィジェットの API を定義すると、ウィジェットをインストールしたサイト制作者がコードを通じてウィジェットとやりとりできるようになります。API には、プロパティ、イベント、エクスポートされた関数を含めることができます。

このウィジェットは 2つのプロパティを使用します：
  • endDate：カウントダウンがゼロになる終了日を定義します。このプロパティを使用すると、サイト制作者は終了日を変更して、ウィジェットをサイトに合わせてカスタマイズすることができます。
  • emailId：ユーザーが通知に登録した際に送信されるメールメッセージを決定します。

ウィジェット要素に ID をつける

まず、コード内で簡単に参照できるように、ウィジェットの要素に ID をつける必要があります。
  1. テキストボックスをクリックします。
  2. 「プロパティ・イベント」パネル properties icon でテキストボックスに ID をつけます。この例では、ID は「secondsTxt」です。他の要素にはすでに ID が割り当てられていることに注意してください。

「endDate」と「emailId」プロパティを定義する

  1. API パネル properties icon で「新しいプロパティを追加する」をクリックします。
  2. プロパティ名に「endDate」と入力します。
  3. プロパティタイプを選択します。この場合は「日時」（日付は米国の形式 mm/dd/yyyy で表示されます）を選択します。
  4. デフォルト値を選択します（サイト制作者は、エディタにウィジェットをインストールする際に変更できます）。
  5. 「プロパティ」にマウスオーバーし、add icon アイコンをクリックします。
  6. トリガーメール用に別のプロパティを作成し、「emailId」という名前を付けます。これはデフォルト値のない「テキスト」タイプのプロパティです。

ステップ 3 | コードを追加してウィジェットを機能させる


ウィジェットをカウントダウンさせるには、終了日までの残り時間を計算する関数をコード内に作成する必要があります。これを行うために、テンプレートには「公開・バックエンド」メニュー public and backend icon にプリインストールされたユーティリティが付属しています。

Wix Blocks は、新しいグローバル変数 $widget と、ウィジェットに定義したすべてのプロパティを保持する $widget.props というプロパティを使用します。

Wix Blocks は Velo オートコンプリートも使用しているため、より簡単にコードを記述できます。

ユーティリティをインポートする

  1. 「公開・バックエンド」メニュー  をクリックします。
  2. 「公開」下で「dateUtils.js」を選択します。コードパネルでファイルが開きます。

新しい関数を考慮してコードを変更する

カウントダウンウィジェットがカウントを更新するように、関数 updateTime() を作成します。新しい関数は次のようになります：

1$widget.onPropsChanged(function () {
2});
3    function updateTime() {
4    const {days, hours, minutes, seconds} = getRemainingTime (new Date($widget.props.endDate));
5    $w('#daysTxt').text = days.toString();
6    $w('#hoursTxt').text = hours.toString();
7    $w('#minutesTxt').text = minutes.toString();
8    $w('#secondsTxt').text = seconds.toString();
9 }

また、ウィジェットが残り時間を更新する間隔も設定する必要があります。
これを行うには、onReady() 関数内に次のコードを追加します。これにより、ウィジェットは毎秒更新されます。

1$w.onReady(function () {
2    updateTime();
3    if (wixWindow.viewMode !== "Editor") {
4        setInterval(updateTime, 1000);
5    }
6});
時間の条件を編集する
Velo コードは、プレビューをクリックしたとき、またはライブサイトを開いたときにのみ実行されます。Wix Blocks の onReady コードは編集時にも実行されるため、エディタでの作業中に動作を確認できます。上記の条件を使用することで、編集中にカウントダウンウィジェットがカウントダウンしないようにします。

ウィジェットをプレビューして API プロパティをテストする

ウィジェットとその API プロパティをプレビューする準備ができました。

  1. 「プレビュー」をクリックします。ウィジェットは終了日まで毎秒カウントダウンします。
  2. 「API プロパティのテスト」をクリックします。以前に設定したデフォルト値のパネルが表示されます。
  3. 日付を変更して、ウィジェットが応答し、新しい日付までカウントダウンするかどうかを確認します。

ステップ 4 | カスタムパネルを作成・コーディングする

カスタム設定パネルを作成して、サイト制作者がウィジェットをサイトにインストールする際に設定を変更できるようにすることができます。この例では、カスタム設定パネルを使用して、サイト制作者が終了日を変更し、ユーザーが通知を受信する登録を行った際に送信されるメールを決定するメール ID を定義できます。

カスタムパネルを作成する

  1. 「パネル」タブをクリックします。
  2. 「パネルを作成」をクリックします。
  3. パネルに名前を付けます。この例では「My settings」です。
  4. 「パネルを作成」をクリックします。
  5. 「パーツを追加」をクリックします。
  6. 「テキスト入力」を選択します。これは終了日に設定されます。
  7. 「プロパティ・イベント」propeties icon をクリックして、テキスト入力に endDateInput という ID をつけます。
  8. テキスト要素を選択し、「設定」をクリックします。
  9. 「フィールド名」に「終了日」という名前を追加します。
  10. 「デフォルトテキスト」のテキストを削除します。
  11. プレースホルダテキストを「終了日」に設定します。
  12. セクション区切り線を追加します。
  13. 「設定」をクリックします。「セクションタイトル」にタイトルを追加します。この例では「トリガーメール」です。
  14. 別の「テキスト入力」を追加します。テキスト入力に emailIdInput という ID をつけます。
  15. テキスト要素を選択し、「設定」をクリックします。
  16. 「フィールド名」に「メール ID」と入力します。
  17. 「デフォルトテキスト」のテキストを削除します。
  18. プレースホルダテキストを「メール ID」に設定します。
カスタムパネルのデザインが完成しました。次に、コードを追加して実装する必要があります。

カスタムパネルにコードを追加する


カスタムパネルの読み込み時に、現在の終了日とメール ID を表示させたい場合、サイト制作者はパネルを使用してこれらの値を変更します。入力が変更されたときにウィジェットが更新されるように、パネルにコードを追加する必要があります。

パネル要素がウィジェットを操作し、エディタでアクションを実行できるようにするには、コードで Velo wix-widget モジュールを使用します。

ウィジェット API を使用するには、wix-widget モジュールから wixWidget をインポートしてください。

onReady() 関数の前に次のコードを挿入します。

1import wixWidget from 'wix-widget';

値が変更されたときにウィジェットを更新するには、onChange イベントを登録する必要があります。また、いくつかの非同期関数を使用するため、onReady () 関数に async を追加する必要があります。

onReady() 関数は次のようになります：

1$w.onReady(async function () {
2    const { endDate, emailId } = await wixWidget.getProps();
3    $w('#endDateInput').value = endDate;
4    $w('#emailIdInput').value = emailId;
5
6    $w('#endDateInput').onChange(e => {
7        wixWidget.setProps({ endDate: e.target.value });
8    });
9
10    $w('#emailIdInput').onChange(e => {
11        wixWidget.setProps({ emailId: e.target.value });
12    });
13});
「run icon 実行」または「プレビュー」をクリックしてコードを確認します。

ステップ 5 | ウィジェットを設定する

パネルのデザインとコーディングが完了したら、パネルがウィジェットのアクションバーボタンのいずれかに接続されるようにウィジェットを設定する必要があります。

「設定」タブでは、サイト制作者がサイトにウィジェットをインストールしてカスタマイズする際のウィジェットの動作を制御できます。ウィジェットとその要素に表示名を付けることで、ウィジェットの機能がサイト制作者に明確になります。また、サイト作成者がウィジェット内の要素を選択したときにエディタに表示されるフローティングアクションバーに変更を加えることもできます。

ウィジェットのフローティングアクションバーにカスタムパネルを追加する

  1. トップバーで「設定」をクリックします。
  2. カウントダウンウィジェットを選択します。フローティングアクションバーが表示されます。
  3. 「設定」をクリックします。
  4. 「アクションボタンの設定」settings icon をクリックすると「メインアクション設定」パネルが表示されます。
  5. ドロップダウンリストから「My Settings」を選択して、カスタムパネルを選択します。

ステップ 6 | 2つ目の（内部）ウィジェットを追加して登録ロジックを実装する

テンプレートには、「Registration（登録）」と呼ばれる 2つ目のウィジェットが付属しています。これは「ウィジェットとデザイン」下にあります。

「レイヤー 」をクリックすると、3つのステートを持つマルチステートボックスとして作成されていることがわかります。「Register（登録）」ボタンがあり、サイト訪問者がクリックすると「Submit（送信）」ボタンに変わります。また、サイト訪問者がメールアドレスを追加できるボックスもあります。サイト訪問者が登録すると、サンキューメッセージが表示されます。

このウィジェットには、モバイル表示に使用できるデザインプリセットも付属しています。

登録ウィジェットをカウントダウンウィジェットに追加する

これで、登録ウィジェットを最初のウィジェットであるカウントダウンウィジェットに追加する準備ができました。Wix Blocks では、さまざまなウィジェットを作成し、他のウィジェットに追加できます。

  1. 「デザイン」タブで、カウントダウンウィジェットを選択します。
  2. 「その他のアクション」more options をクリックして「ウィジェットを追加」を選択します。
  3. 「Registration（登録）」を選択します。内部ウィジェットは、カウントダウンウィジェットの中央に表示されます。
  4. カウントダウンウィジェットの下部に合わせて、内部ウィジェットをドラッグして引き延ばします。
  5. 「プロパティ・イベント」propeties icon で ID を registration に変更します。
ウィジェットを追加する別の方法
「要素を追加」メニュー add button をクリックして、内部ウィジェットを追加することもできます。「マイウィジェット」を選択し、追加したいウィジェットを最初のウィジェットにドラッグアンドドロップします。

メインウィジェットのコードに登録ロジックを実装する

プリインストールされたユーティリティである contactUtils.js を使用して、メイン（カウントダウン）ウィジェットにユーザー登録用のコードを実装します。wix-crm API を使用して連絡先をコレクションに接続します。

このコードは、情報をコレクションに転送します。後でコレクションを作成するときに使うユーティリティを使用します。コードには getSubscriptionsCollectionName() が表示されます。

  1. 新しい非同期関数を作成します。
  2. onSubmitと呼びます。create contact ユーティリティを使用します。

コードは次のようになります：

1 async function onSubmit({ email }) {
2   const contact = await createContact(email);
3   wixData.insert(getSubscriptionsCollectionName(), {
4       endDate: new Date($widget.props.endDate),
5       emailId: $widget.props.emailId,
6       contactId: contact.contactId
7   });
8 }
9

onSubmit イベントに登録する

onReady() で、updateTime() 関数の後に、次のコードを追加します：

1$w('#registration').onSubmit(onSubmit);
バックエンドコードはすでに含まれています
バックエンドコードは Wix Blocks のテンプレートにすでに実装されています。これには、プリインストールされたユーティリティを使用するエクスポート関数 notify() が含まれています。残り時間を確認し、準備ができたらメールをトリガーし、コレクションを更新します。以下のステップ 10 で説明されている通り、エディタでこれを呼び出す必要があります。

ステップ 7 | アプリをビルドして名前空間を設定する

これで、アプリを初めてビルドする準備が整いました。最初のビルドがメジャービルドになります。後でアプリを開発する際に、マイナービルドまたはメジャービルドを選択できます。マイナーバージョンは、それが表示されるすべてのサイトで自動的に更新されます。ページを再読み込みするだけです。メジャービルドを行うと、サイト制作者はアプリを手動で更新する必要があります。エディタの「追加済みアプリ」パネルでは、アプリ名の横にドットが表示されるため、サイト作成者は新しいバージョンが利用可能であることを確認できます。


初めてビルドをクリックすると、アプリに名前空間をつけるように求められます。この名前空間は、エディタの Velo コードと Wix Blocks のアプリコードでコレクションを参照するために使用されます。


最初のビルド

  1. 「作成」をクリックします。
  2. アプリの名前空間を入力し、「次へ」をクリックします。
  3. 「メジャーバージョン」を選択し、「作成」をクリックします。
  4. 「バージョン 1.0 が作成されました」というメッセージが表示されます。「閉じる」をクリックして、アプリの作成を続行します。

ステップ 8 | ウィジェットにコレクションを追加する

次に、すべてのサブスクリプションを保存するコレクションを作成する必要があります。Wix Blocks のコレクションは、Wix Blocks でデザインする空のプレースホルダで、アプリがサイトにインストールされるとデータが入力されます。Wix Blocks のコレクションに関する詳細はこちら

テンプレートには、「公開・バックエンド」下の「collectionUtils.js」に、getSubscriptionsCollectionName() というユーティリティがプリインストールされています。これは、コレクションの完全な名前を構築するため、コードで参照するたびに完全なアプリの名前空間を追加する必要はありません。

コレクションユーティリティを設定する

  1. 「公開・バックエンド」下で「collectionUtils.js」をクリックします。
  2. アプリの名前空間を追加します。
独自の名前空間を持つコードは次のようになります。
1
2const NAMESPACE = '@mywixaccount/my-app-namespace';
3
4export function getSubscriptionsCollectionName() {
5    return `${NAMESPACE}/subscriptions`;
6}

コレクションを作成する

  1. 「データベース」をクリックします。
  2. 「＋コレクションを作成」をクリックします。
  3. コレクションにわかりやすい名前を付けます。この例では、「Subscriptions」とします。
  4. 「作成」をクリックします。

コレクションにフィールドを追加する

  1. add button をクリックして、コレクションにフィールドを追加します。
  2. 「フィールドタイプ」ドロップダウンメニューから「日付」を選択します。
  3. 「フィールド名」に「endDate」と入力します。これが、ユーザーが登録できる最後の日付になります。
  4. 「保存」をクリックします。
  5. 次に、「テキスト」フィールドタイプを追加し、トリガーメール用に「emailId」という名前を付けます。
  6. さらに別の「テキスト」フィールドタイプを追加し、「contactId」という名前を付けます。登録済みユーザーの連絡先情報が保存されます。
  7. 次に、「ブーリアン型」フィールドタイプを作成し、「notified」という名前を付けます。これにより、購読者に一度だけ通知が送信されます。

コレクションの権限を設定する

サイト訪問者が購読することで、コレクションにコンテンツを追加できるようにします。

  1. 「データベース」メニューで、コレクションの「その他のアクション」more options icon をクリックします。
  2. 「権限・プライバシー」を選択します。
  3. 「はコンテンツの追加が可能」ドロップダウンを選択します。
  4. 「すべてのユーザー」を選択します。
  5. 「保存」をクリックします。

ステップ 9 | Wix エディタでサイトにアプリをインストールする

ウィジェットはどのエディタにもインストールできます。次の例では、Wix エディタを使用します。アプリをインストールする前に、もう一度アプリをビルドする必要があります。コレクションを作成したので、これはメジャービルドになります。
  1. アプリをビルドしたら、ウェブサイトを開きます。
  2. 「アプリ」add apps icon をクリックします。
  3. 「カスタムアプリ」をクリックします。すべてのアプリの一覧が表示されます。
  4. 「利用可能なアプリ」リストからアプリを選択します。
  5. 「アプリをインストール」をクリックします。
  6. 「追加」add elements icon をクリックします。
  7. 「マイウィジェット」を選択します。
  8. ウィジェットをダブルクリックしてサイトに追加します。

ウィジェットはフルード（流動的）であり、要素を選択して、ウィジェットをサイトに合わせてカスタマイズすることができます。設定パネルを開いてデフォルトの終了日を変更することもできます。

メール ID を設定する

ユーザーはメール通知に登録することができます。ウィジェット API が送信する必要があるメールを識別できるように、メールを作成し、その ID を取得する必要があります。
  1. トップバーの「サイト」メニューから「ダッシュボード」を開きます。
  2. 「デベロッパツール」の「トリガーメール」に移動します。
  3. 「今すぐはじめる」をクリックします。
  4. 件名を入力します。
  5. エディタツールを使用してメールをデザインします。
  6. 「保存して公開」をクリックします。
  7. 送信者の詳細（「送信者名」、「返信先アドレス」）を追加し、「保存」をクリックします。
  8. 「閉じる」をクリックします。
  9. もう一度「保存して公開」をクリックします。登録した人に送信されるようにデザインしたメールにリンクする識別コードを受け取ります。
  10. このコードをカスタムパネルの「メール ID」に入力します。

Wix エディタのバックエンドコードを使用して購読者に通知する

バックエンドコードは Wix Blocks のアプリに含まれていますが、エディタで通知を呼び出す必要があります。

通知関数を呼び出す

  1. Wix エディタの「公開・バックエンド」の「バックエンド」下で「＋Web モジュールを追加」をクリックします。
  2. これに backend.jsw と名前を付けます。
  3. サイトのコードセクション「backend.jsw」下にバックエンド関数をインポートします。

コードは次のようになります：

1import { notify } 'myWixId/my-application-name-backend';

次に、サイトのコードセクション内の「backend.jsw」に invokeNotify エクスポート関数を作成します。

コードは次のようになります：

1export function invokeNotify() {
2     return notify ();
3}
次に、スケジュールされたジョブを作成する必要があります。

  1. 「バックエンド」で「追加」add icon をクリックします。
  2. 「スケジュール済みジョブ」settings icon をクリックします。サイトのコードセクションの「jobs.config」下に次のコードを追加します。この例では、通知関数は毎時10分に呼び出されます。

コードは次のようになります：
1{
2   "jobs": [{
3       "functionLocation": "/backend.jsw",
4       "functionName": "invokeNotify",
5       "description": "",
6       "executionConfig": {
7           "cronExpression": "10 * * * *"
8       }
9   }]
10}

ステップ 10 | アプリをテストする

これで、アプリをテストする準備ができました。

  1. サイトを公開します。
  2. 登録してメール通知を受信します。
  3. エディタに戻り、コレクションを確認します。
  4. 新規購読者がいることを確認できます。通知メールが送信されると、「notified」フィールドにもチェックマークが表示されます。
トリガーメールを確認する
ダッシュボードの「デベロッパツール」下の「トリガーメール」で、メールが送信されたかどうかを確認することもできます。

お役に立ちましたか？

|

この記事では下記を説明します：

  • テンプレートに含まれるもの
  • ステップ 1 | ウィジェットのデザインを完成させる
  • ステップ 2 | ウィジェットの API プロパティを追加・定義する
  • ウィジェット要素に ID をつける
  • 「endDate」と「emailId」プロパティを定義する
  • ステップ 3 | コードを追加してウィジェットを機能させる
  • ユーティリティをインポートする
  • 新しい関数を考慮してコードを変更する
  • ウィジェットをプレビューして API プロパティをテストする
  • ステップ 4 | カスタムパネルを作成・コーディングする
  • カスタムパネルを作成する
  • カスタムパネルにコードを追加する
  • ステップ 5 | ウィジェットを設定する
  • ウィジェットのフローティングアクションバーにカスタムパネルを追加する
  • ステップ 6 | 2つ目の（内部）ウィジェットを追加して登録ロジックを実装する
  • 登録ウィジェットをカウントダウンウィジェットに追加する
  • メインウィジェットのコードに登録ロジックを実装する
  • onSubmit イベントに登録する
  • ステップ 7 | アプリをビルドして名前空間を設定する
  • 最初のビルド
  • ステップ 8 | ウィジェットにコレクションを追加する
  • コレクションユーティリティを設定する
  • コレクションを作成する
  • コレクションにフィールドを追加する
  • コレクションの権限を設定する
  • ステップ 9 | Wix エディタでサイトにアプリをインストールする
  • メール ID を設定する
  • Wix エディタのバックエンドコードを使用して購読者に通知する
  • 通知関数を呼び出す
  • ステップ 10 | アプリをテストする