ProtoPie で利用できる最も強力な機能の一つは、プロトタイプで変数を使えることです。このレッスンでは、変数とは何か、使い方、そして使う際に知っておくべきいくつかの注意点について説明します。
必要なもの
このチュートリアルを進めるには、このサンプル pie をダウンロードして Studio で開いてください:
学べること
このチュートリアルを終えるころには、次のことを学べます:
変数とは何か、そしてなぜ「変数」と呼ばれるのか
ProtoPie で変数に使えるデータの種類
所要時間: 10分以内
変数とは？
variable という言葉は、プログラミング用語です。名前や数字、色の値など、ちょっとした情報を保存するための方法にすぎません。変数に保存する内容は、プロトタイプの必要に応じて変わることがあります。これが「変数」と呼ばれる理由です。たとえば、体験の最初では「name」という変数に「Leah」という名前を保存し、あとから「Bern」に変更するといったことができます。ProtoPie では、いつでも変数に保存されている内容を変更できます。
変数の種類
ProtoPie で変数を作成するときは、その変数にどの 種類 の情報を含めるかを指定する必要があります。ProtoPie では次の 3 種類を使用できます:
Number - 整数または小数。例:
25、-403、3.14Text - 英数字の並び。例:
Jeff、40 Bay Street、auston@mapleleafs.comColor - 16進数の色の値。例:
#FF0000
選ぶ種類は重要です。Number 型の変数には数値データしか設定または更新できません。同様に、Text 型にはテキストベースの情報しか設定または更新できません。たとえば、Jeff という値を Number 型の変数に設定することはできません。Jeff は数字ではないからです。したがって、変数を作成するときは、どのような情報を保存したいのかを意識する必要があります。
💡 Pro-tip: 計算やカウントをしたい場合は、Number 型が最適です。名前、住所、メールアドレスなど、テキストベースのものには Text 型の変数を使いましょう。デザインシステムのカラーパレットなど、色の値を保存したい場合は、Color 型の変数を使います。
Pie には、必要な数だけ変数を作成できます。たとえば、数値を保存する変数が必要で、さらにテキストを保存する変数も必要なら、それぞれ別々の変数を作成できます。
簡単な例
サンプルの Pie を見てみましょう。最初のシーンには、ユーザーに名前の入力を求めるフォームがあります。また、Simple greeting. という空のテキストレイヤーもあります。ここでは、ユーザーが Your name レイヤーに入力した内容を保存する変数を作成し、ユーザーが Next をタップしたときに、その変数の値を Simple greeting テキストレイヤーに表示します。
Studio のインターフェース左下にある Variables パネルを探してください。たいていは最初、折りたたまれています。1 回クリックしてパネルを展開します。
+アイコンをクリックして新しい変数を作成します。すると、次の 2 つの選択肢が表示されます:For All Scenes
For This Scene
この 2 つの違いは、すぐに説明します。
とりあえず、ここでは For This Scene を選びましょう。
ProtoPie は
variable1という名前の変数を作成します。この名前は、今回の用途を表すにはあまり意味がありません。なので、もっと分かりやすい名前にしましょう。ユーザーの名前を保存するために使うので、この変数を 「name」 と呼ぶことにします。variable1をダブルクリックして、name. に名前を変更してください。
では、この変数を使ってみましょう。ユーザーが Your name テキストボックスに入力した内容を検出し、name 変数の値を入力された内容に設定したいと思います。
Your name テキストレイヤーに対して Detect Trigger を作成します。
監視するプロパティとして Text を選択します。
Assign レスポンスを追加します。変数を更新する、つまり新しい値を assign したいときは、常に Assign レスポンスを使います。
Select Variable のドロップダウンで、先ほど作成した name. という変数を選びます。
変数に新しい値を設定するときは、Formula を使う必要があります。Formula ボックスに指定した内容が、そのまま変数に assigned されます。Formula とは何か分からない場合は、前のレッスンの 高度な機能 - Formula の基本。 を確認してください。Formula ボックスをクリックして **∫x ** アイコンを表示します。
Formula の入力欄で ⊕ アイコンをクリックし、Your name というレイヤーを選択します。
.を入力して、そのレイヤーのすべてのプロパティを表示します。下にスクロールして Text を選びます。OK. をクリックします。
このプロセスの最後のステップは、ユーザーが Next をタップしたときに name 変数の値を表示することです。
Next button レイヤーに Tap トリガーを作成します。
Simple greeting レイヤーに Text レスポンスを追加します。
Content では、Formula を選択します。
Formula の下にあるボックスをクリックして ∫x アイコンを表示し、Formula の入力欄を広げます。入力欄に
nameと入力し、OK. をクリックします。
プレビューしてみましょう。ボックスに自分の名前を入力して、Next. をタップします。
どうなりましたか？ Next ボタンの下に名前が表示されましたか？ それとも "0" が表示されましたか？
上の手順では、意図的に 1 ステップ省略していました。変数の種類が正しく設定されていないとどうなるかを示したかったからです。この問題を修正しましょう。
Variables パネルで name 変数をクリックします。
次に、右上に注目してください。ここで変数の種類を設定できます。
デフォルトでは、新しい変数を作成すると ProtoPie は Number を選択します。Your name テキストボックスに名前を入力すると、入力しているのはテキストであり、Number 型とは互換性がありません。種類を Text. に変更してください。
このコントロールでは初期値も設定できます。今回の目的では初期値は不要なので、空のままにしておきましょう。ただし、今後の作業では、体験の開始時に変数に特定の値を持たせたい場合もあるでしょう。その場合は、このボックスで設定します。
もう一度プレビューしてみましょう。
これで、体験は正しく動作するはずです。次のレッスン でもう一歩進めましょう。では、また！
