時間ベースのUIはUXデザイン戦略で見落とされがちですが、ストップウォッチ風のタイマーは、運動、料理、生産性向上アプリでよく使われる機能です。タスクに時間的な要素を含む、普段使っているアプリを思い浮かべ、設計中のアプリプロトタイプにストップウォッチタイマーをどのように組み込めるか考えてみましょう。
ProtoPie を使うと、デザイナーはフォーミュラ、Detect関数、変数を使って、実際に動作するストップウォッチタイマーを作成できます。これらの強力なツールにより、ProtoPieはデータの変化を読み取り、反応できます。難しく思えるかもしれませんが、これらのスキルを探求することで、ProtoPieがデータ（そして時間）志向のデザインにとって強力なツールであることが分かるでしょう！
学習内容
変数を使って1/100秒を自動化する
DetectとConditionを使って秒を増やす
DetectとConditionを使って分を増やす
ストップウォッチを停止してリセットする
最終的には、このようなものが作れるようになります！
プロトタイピングを始める前に
アセット内では、start/stopボタンのインタラクションはすでに作成されています。これは Condition 機能で作られています。Condition を使ったボタンの作り方を学びたい場合は、Conditionでトグルボタンを作る方法をご確認ください。
手順
1. 変数を使って1/100秒を自動化する
1. 最後の2桁（1/100秒）から作業を始め、ボタンで開始と停止ができるようにします。新しい 変数 を作成し、centisecond と名付けます。変数のデフォルト設定はそのままにして、数値のまま、初期値は zero にします。デバッガーをプレビュー画面にドラッグして、作業をテストできるようにします。
2. start 条件の下に、centisecond variable にリンクされた Assign を追加します。式は centisecond+1 です。繰り返しをオンにし、Infinite Repeat もオンにします。interval は 0.01 です。
3. Stop 条件の下に、centisecond 変数に対する Stop レスポンスを追加します。プレビューで start/stop ボタンをテストすると、数字が連続して増え、ボタンで停止することが分かります。
4. 1/100秒は 2 桁しかないので、99 で reset する必要があります。これを行うには、新しいトリガーを追加し、centisecond 変数にリンクされた Detect を選択します。
5. centisecond ≥ 99 のときに反応する条件を作成します。次に、Reset を追加します。duration を 0 に、start delay を 0.01 に変更します。この遅延は見分けにくいですが、後で重要になります。デバッガーを使うと、値が99まで進んでから0に再開するのが確認できます。
6. 次に、この値をテキストに反映します。Detect トリガーの下に Text レスポンスを追加し、centisecond にリンクして、式 lpad(centisecond,2,"0") を入力します。この式は、1桁の数字に 0 を前置して、1/100秒を2桁で表示するようにします。
💡 lpad(): テキストの左側に別のテキストを追加して、指定した長さにします。
lpad(source:TEXT,length:NUMBER,pad:TEXT)→ TEXT
2. 1/100秒に基づいて秒を増やす
1. 1/100秒が99に達したら、秒を1増やしたいです。これを行うには、変数を追加して second に名前を変更します。デフォルトはそのままにして、数値のまま、初期値は zero にします。デバッガーをプレビューシーンにドラッグします。
2. Detect トリガーの下で、今作成した Condition の下に Assign を追加し、second 変数にリンクします。式に second+1 と入力して、1/100秒が 99 になるたびに秒が1増えるようにします。start delay を 0.01 に変更します。繰り返しは設定しないでください。
3. 「second」 テキストにリンクされた Text レスポンスを追加して、変数をテキストに反映します。前と同様に式は lpad(second,2,"0") で、1桁の数字には 0 を追加します。
4. start delay を 0.01 に変更し、second 変数の Text レスポンスが Assign レスポンスの後になるようにしてください。インタラクション要素の順序も重要です。Assign レスポンスが Text レスポンスより上にあることを確認してください。これは、ProtoPie に Assign レスポンスを先に、then Text レスポンスをトリガーさせたいからです。
3. 秒に基づいて分を増やす
1. second 変数にリンクされた Detect トリガーを追加します。次に、second 変数にリンクされた condition を追加し、second variable ≥ 59 のときに反応するようにします。
2. この条件の下に、second にリンクされた Reset レスポンスを作成し、start delay 1 にします。
つまり、秒が59に達すると、0に戻る前に1秒遅延します。
3. 変数のリセットに加えて、テキストもリセットする必要があります。second テキストにリンクされた別の Reset を追加し、start delay を 1 に変更します。
4. minute 変数をテキストにリンクするには、変数を作成して "minute" に名前を変更します。最後の Reset レスポンスの下に Assign レスポンスを追加し、先ほど作成した minute 変数にリンクします。式は minute+1 です。start delay は 1 になります。
5. assign の下に Text レスポンスを作成し、minute text にリンクして、式 lpad(minute,2,"0") を使用します。start delay を 1 に変更します。
6. プレビューウィンドウでは、秒が 59 に達すると分が 1 増え、秒は 0 にリセットされるはずです。
4. リセットボタンを機能させる
1. reset ボタン用の Tap トリガーを作成します。centisecond 変数にリンクされた Stop レスポンスを作成します。
2. 次に、すべての変数（centisecond、second、minute）をリセットし、その後でそれぞれに対応するテキストもリセットする必要があります。これら3つの変数にそれぞれリンクされた reset レスポンスを3つ作成します。これら3つの変数のテキストにそれぞれリンクされた reset レスポンスを3つ作成します。
3. start/stopボタンも元の状態に戻す必要があります。Stop レイヤーを選択して reset レスポンスを作成します。次に、Start レイヤーと Base レイヤーに対する reset レスポンスを作成します。
4. 参考として下の画像をご覧ください。
おめでとうございます！ストップウォッチタイマーの完成です
このチュートリアルでは、Formulas、Detect、Variables を使うなど、多くの高度なテクニックを学びました！これらのテクニックを習得した今、あなた独自のデザインに合わせたストップウォッチタイマーを作るために、ほかの手法をどのように取り入れられるか考えてみてください！
アイデアを形にする準備はできましたか？今すぐ ProtoPie をダウンロードして次のプロトタイプ作成を始めましょう。さらに、あなたの素晴らしい作品を #MadeWithProtoPie を付けて LinkedIn、X、Instagram で共有するのを忘れないでください。あなたが何を作るのか楽しみにしています！
