はじめに
カウンター（iOS デザインではステッパーとも呼ばれます）は、最もよく使われる UI 要素の 1 つです。ステッパーは通常、EC サイトでショッピングカートの数量を更新するために使われます。ユーザーが商品をカートに追加すると、カウンターを使ってカート内の数量をいつでも増減できます。商品数は、ユーザーが支払う合計金額を反映します。このレッスンでは、カウンターを使って最終的な支払額を更新する方法を解説します。
ProtoPie では、ステッパーコンポーネントと send/receive 機能、変数、数式を使ってこれを実現します。
学べること
インタラクションをコンポーネントに変換する
コンポーネントの値をシーンに送る
シーン内のコンポーネントから値を受け取り、変数に代入する
数式を使って合計支払額を計算する
最終的に、このようなものを作れるようになります！
[開始用 Pie ファイル] [完成済み Pie ファイル]
始める前に
上のリンクから、Input Stepper の作成方法についてさらに学べます。
チュートリアルを始める前に、カウンターの数値と合計支払額が 編集可能なテキスト レイヤーに変換されていることを確認してください（Figma/Sketch から取り込んだ場合）。合計支払額の計算には 変数 と 算術式 を使います。詳しくは手順で説明します。
手順
1. インタラクションをコンポーネントに変換する
Stepper を選択し、ツールバーの Component アイコンをクリックして、作成したインタラクションをコンポーネントに変換します。
Components は、インタラクションを含むレイヤーの集合で、プロトタイプ全体で再利用できます。これにより、不要な繰り返し作業を避け、時間を節約できます。この例では、ステッパーコンポーネントを作成し、そのインスタンスをカートページに複製できます。
その後、メインシーン上で Stepper components を各商品に対応する適切な位置へ複製します。
オブジェクトを複製するには Alt/Option + ドラッグします。
2. コンポーネントの値をメインコンポーネントに送る
Detect は、検出された値が変更されたときにレスポンスを発生させるために使います。
ここではテキストが変更されるたびにレスポンスを発生させたいので、Number レイヤーに Detect トリガーを追加します。プロパティで、パネルが Text プロパティを検出するように設定します。
この場合、Text が変更されるたびにレスポンスが発生するようにします。
何かを変化させたときに別の処理を動かしたい場合、「Detect」が便利です。
2. Detect トリガーの中に Send レスポンスを追加します。テキストが変わるたびに、Send がトリガーされます。
チャンネル欄で Send to Parent を選び、メッセージに名前を付けます。
メインシーンには異なる値を扱う Stepper コンポーネントのインスタンスがあるため、Send to Parent を使い、どのコンポーネントからメッセージを受け取っているかを指定して、そのコンポーネントインスタンスに対応する金額を計算します。
💡 チャンネルの説明（Send to の「相手」）
Send to Parent: コンポーネントから親コンポーネント、または親コンポーネントがない場合はシーンへメッセージを送ります。
Send to Child Component: コンポーネントから子コンポーネントへメッセージを送ります。
Send to Current Scene: コンポーネントが使用されているシーンへメッセージを送ります。
Send to Current Component: このチャンネルでは、コンポーネント内にとどまるメッセージを送れます。
同じ値を持つコンポーネントを扱う場合や、シーン内にコンポーネントが 1 つだけある場合は、代わりに Send to Current Scene を使えます。その場合、コンポーネントを指定する必要はなく、メッセージはシーン全体に送信されます。
3. Send value together をオンにして、メッセージと一緒に値を送信します。値の取得には数式を使います。ここで使う数式は number('Number'.text) です。この数式は、Number オブジェクトのテキストを数値に変換でき、これは後で必要になります。
「Send」では、値を送るかどうかは任意です。今回は送るようにします。
4. メインシーンに戻って変数を作成します。プロパティパネルで変数の初期値を 1 に設定し、変数の数値 と テキストの数値 が一致するようにします。
💡 新しい変数を作成する際、For all scenes または For this scene として作成できます。この例ではどちらでも構いません。ただし、別のシーンでもこれらの変数を使いたい場合は、For all scenes を使ってください。
この変数は、1 つ目のステッパーの数を表します。
5. バグアイコン をオンにすると、プレビューウィンドウに変数を表示できます。これにより、変数が正しい値を保存していることを確認できます。
変数を扱うとき、バグアイコンはとても便利です。
6. Receive レスポンスを追加します。プロパティパネルで Receive from Component を選び、ドロップダウンメニューで Stepper 1 を選択します。
バグアイコンをオンにすると、プレビューウィンドウに変数を表示できます。
7. Assign to Variable をオンにし、代入先の変数を選択します。これにより variable1 がステッパーの数値と連動します。
8. メインシーンのステッパーを操作すると、インタラクションに合わせて変数が変化します。
メインシーンのステッパーを操作すると、インタラクションに合わせて変数が変化します。
9. 同じ方法で、すべてのコンポーネントの値をそれぞれ個別の変数に保存できるようになります。これを行うために、さらに 2 つの変数を作成します。
変数名を変更したい場合は、ダブルクリックします。
3. 数式を使って合計金額を計算する
Total payment テキストレイヤーを選択し、各 Receive トリガーの下にテキストレスポンスを追加します。
これで、すべてのコンポーネントの値をそれぞれ個別の変数に保存できます
2. コンテンツセクションで Formula を選択します。
ここで使う数式は: "$" + stepper1*60 + stepper2*23 + stepper3*12.99
この数式は合計支払額を計算し、値の前に $ 記号も付けます。
数式では、文字列を囲むために引用符を使います。
3. 各トリガーに同じレスポンスを追加します
同様の機能を持つ複数のオブジェクトを作成する場合は、send & receive を使ったコンポーネントを活用しましょう！
おめでとうございます！
これで完了です。コンポーネントを使って EC アプリのショッピングカートを更新する方法が分かりました。
このユースケースチュートリアルは役に立ちましたか？ 教育コンテンツ改善のため、この 1 分アンケート にご協力ください。
