変数レッスンのパート 1では、変数がどのように動作するかを非常に単純化したデモで学びました。では、もう一歩進めてみましょう。
必要なもの
このチュートリアルに沿って進めるには、このサンプル Pie をダウンロードして Studio で開いてください:
学べること
このチュートリアルを終えるころには、次のことを学べます:
変数を作成する際の「このシーンのみ」と「すべてのシーン」の違い
思ったとおりに動かないときのトラブルシューティング方法
変数を使う際の制限
完了時間: ≤15 分
別のシーンで変数を使う
ユーザーが Next をクリックしたときに名前を表示する代わりに、次のシーンへジャンプし、その代わりに適切な挨拶を表示してみましょう。最後に保存した進行状況から Pie ファイルを開いてください。
Tap トリガーの動作を変更します。Text レスポンスを削除し（クリックしてキーボードの Delete を押します）、代わりに Jump レスポンスを追加します。
protopie_welcome という名前のシーンを選び、好みのトランジションで Jump を設定します。新しくて素晴らしい Smart Jump トランジションを試してみてはどうでしょうか？（さらに例を見る
。）
シーンパレットで protopie_welcome シーンをクリックして、編集用に開きます。
この画面では、シーン開始時にユーザーを名前で挨拶したいので、Start トリガーを追加します。
Name というレイヤーに Text レスポンスを追加します。Content で Formula を選びます。Formula の下のボックスをクリックして ∫x アイコンを表示し、Formula 入力欄を展開します。
"Hi, " + name + "!"を Formula ボックスに入力します。前のレッスンで学んだのと同じ方法で変数を挿入できます。
ProtoPie が「name」という単語に赤い波線を引いているのがわかりますか？ これは、このシーンで利用可能な「name」という変数を ProtoPie が見つけられないためです。赤い波線は、変数や数式を扱うときにとても役立つツールです。これは、何かを修正する必要がある最初の संकेतです。
すぐにわかるように、問題は別の場所にあります。なので今は OK をクリックして数式を確定してください。ProtoPie は引き続き数式を琥珀色でハイライトし、修正が必要な問題があることを示します。
覚えているかもしれませんが、最初の例では新しい変数を作成し、このシーンのみ を選択しました。
つまり、作成した変数は、作成したシーンでのみ利用可能でした。変数を複数のシーンで再利用したいので、変数を作成したときに すべてのシーン を選ぶべきでした。
では、戻って修正しましょう。
編集するために、Scenes パネルで input シーンをクリックして開きます。次に、左下の Variables パネルで name 変数をクリックします。変数を すべてのシーン 変数に変更する方法がないことに気づくでしょう。このオプションは変数を作成するときにしか選べません。いったん変数を削除して、作り直す必要があります。
+コントロールをクリックして新しい変数を作成します。今回は すべてのシーン を選びます。もう一度、新しく作成した変数の名前を name に変更します。
💡 プロのコツ: 以前とまったく同じ名前を再利用してください。そうしないと、その変数を使っている Triggers と Responses が壊れてしまいます。
右上で、変数を Text タイプに設定します。
これで、この機能を動かすために必要なことはすべてです。もう一度プレビューしてみましょう。名前を入力して Next をタップします。次のシーンで、その名前で挨拶されるはずです。
トラブルシューティング
上のように動作しない場合はどうでしょうか？ 問題の箇所を特定するために、次の手順を試してみてください。
Triggers と Responses にある 琥珀色のハイライト、そして Formula にある 赤い波線 を探してください。これらは、何か修正が必要であることを示す明確な संकेतです。
この場合、変数名をスペルミスしています。ProtoPie がこれに下線を引くのは、nme という名前の変数が見つからないためです。
変数がすべてのシーンで使われる設定になっているか確認してください。変数名の横にあるアイコンは、
all-scene変数では塗りつぶし、this-scene変数ではアウトライン表示になります。また、all-scene変数はすべての Scenes の Variables パネルに表示されますが、this-scene変数は作成された Scene にのみ表示されます。
変数に期待した値が表示されない場合は、デバッグ機能 をオンにできます。Variables パレットで変数にカーソルを合わせると、右側に てんとう虫 アイコンが表示されます。それをクリックすると、シーンに緑のボックスが表示されます（もう一度クリックするとオフになります）。Pie をプレビューすると、変数の現在値が表示されます。
緑のデバッグボックスは、シーン内でドラッグして好きな位置に配置できます。
プレビューすると、入力に応じて変数の値が更新されるのがわかるはずです。
変数が更新されない場合は、最初のシーンの Detect トリガーが Your name テキストレイヤーの text プロパティに設定されているか確認してください。
また、Assign レスポンスが次のように設定されているか確認してください:
上記がすべて機能しているなら、
second sceneに切り替えて、変数を正しく使えているか確認しましょう。次のように設定された Text レスポンスを持つ Start トリガーがあるはずです:
2つのシーンの間でアニメーション付きのトランジションを使っている場合、挨拶が 2 つ目のシーンに反映されるまでごく短い遅れがあることに気づくかもしれません。その場合は、protopie_welcome シーンの Start トリガーを確認してください。複数シーン用オプション が Start After Jump に設定されている場合は、これを Start With Jump に変更してください。こうすると、Start トリガーのレスポンスはトランジションアニメーションが完了した後ではなく、開始したタイミングで実行されます。
変数使用時の制限
変数を使うときには、いくつか注意しておくべき点があります。
すでに 正しいタイプを設定すること について説明しました。保存しようとしている情報とタイプが合っていないと、予期しない結果になります。
変数を 1 つのシーンだけで使う のか、それとも すべてのシーンで使う のかを設定することの重要性についても説明しました。これは後から変更できないため、変数をどう使うかを事前に把握しておくことが大切です。迷ったら「すべてのシーン」を選びましょう。最も柔軟に使えます。
変数名にスペースは使えません。 プログラミング経験があれば当然に思えるかもしれませんが、それ以外の人にとっては重要な点です。無効な名前を付けようとすると、ProtoPie が警告してくれます。
変数名をより説明的にするために複数の単語を使いたい場合は、よく使われる命名規則がいくつかあります。
複数の単語をアンダースコア
-で区切ります。例:first_name,shoe_lace_color。これは snake case または pothole case とも呼ばれます。追加の単語の最初の文字を大文字にします。例:
firstName,shoeLaceColor。これは一般に camel case として知られています。
「type_of_pie があれば Pie はお手のもの！」
これで、Pie の中に少しの情報を保存するために変数を使う方法がわかりました。また、複数のシーンで変数を使う方法や、思ったとおりに動かないときに役立つトラブルシューティングのテクニックも学びました。
リソース
このチュートリアル動画では、$touchX、$touchY など、ProtoPie で利用できる組み込み変数と、それらをプロトタイプでどう使えるかを学びます。
このチュートリアル動画では、あるシーンで変数に情報を保存し、別のシーンでそれを取得して使う方法を学びます。
マスクとチェーンを使って円形スライダーを作成する ノブを操作することで、ユーザーは円形スライダーの値を変更し、それに対応するパーセンテージ値の変化を確認できます。
デスクトップ Web 向けにループするスクロールカルーセルを作成する方法 スクロールトリガー、変数、条件を使って、デスクトップ Web 向けのループするスクロールカルーセルを作成する方法を学びます。
Component を使ってショッピングカートの支払合計額を計算する このレッスンでは、e コマースアプリの支払合計額を計算するためにステッパーコンポーネントを使う方法を学びます。
