このチュートリアルでは、電話のようなナンバーパッドを作成する方法について説明します。

https://youtu.be/nJ7EhZDc-uE

→このチュートリアルで使用されているサンプルのダウンロードはこちらより

モックアップの作成 - ステップ１

1. まず、数字を表示するための入力フィールドが必要です。キャンバスの左にあるQuickToolから**Form（フォーム）**アイコンをクリックし、キャンバス上に長方形を描きます。入力欄にNumber box.と名前を付けます。Fill（塗りつぶし）を0％に設定しましたが、お好きな色をお選びください。
2. 次に、Boxを使って、数字キーパッドを作成します。**Quick Tools（クイックツール）**からBoxを選択するか、キーボードの b を押してください。
3. 最初のキーを描き、それをコピー＆ペーストして残りの9桁を作成します。
4. キーパッド内をダブルクリックして、1～9の各数字と、以下の0を例に従って入力します。

sf1_smaller.mp4

インタラクションを追加する - 番号ボックスの配置

これでキーパッドの形が出来上がりましたので、次はインタラクションを追加します。まず、番号の「１」番から追加します。右のプロパティパネルにある Interactions + をクリックします。

1. Triggerで Click（Tap）を選択します。
2. このインタラクションでは、Conditions（条件）は使いません。
3. ActionでMoreをクリックし、Set Content（コンテンツの設定）を選択します。
4. Elementで、作成したナンバーボックスの入力フィールドを選択します。
5. Set content（コンテンツの設定）で Expression（式）を選択します。入力フィールドに次のように入力します： concat('number box', ‘1’) と入力します。
6. Add（追加）をクリックして、インタラクションを保存します。

キーパッドの各番号について、上記の手順を繰り返します。

例えば、2番の場合での入力フィールドではconcat('number box', ‘2’)、3番の場合はconcat('number box', ‘3’)など、キーに応じてステップ5の数字を変更する必要があります。また、インタラクションをコピー＆ペーストすれば、それに応じて数字も変化します。