ステータス管理 - 実装編
前回の記事でステータス管理についてどんなものか簡単にご説明しました。
説明を読んで直感的に理解できない部分もあると思いますので、今回は実際に簡単なステータス管理を実装して理解します。
実装するもの
ユーザーが選択したボタンの番号によって、次の画面で番号の英表記を表示するプロトタイプ
1. 2つのシーンを用意する
お好きなデバイスサイズでシーンを2つ用意します。
1つは、ユーザーが選択するボタンを配置します。
2つ目にはユーザーが選択したボタンに対する結果を表示します。
2. シーン1にボタンを配置する
どんなボタンでも構いません。シェイプとテキストで 1 から 3 までの番号が書かれたボタンを用意します。
3. 新しい変数を追加する
↑ 左メニュー下部の「＋」から新しい変数「select」を追加します。
4. TriggerとResponseを設定する
↑ それぞれのボタンに、TriggerをTapに設定します。
↑ 次にResponseをAssignに設定します。
Assignの詳細設定で変数 select を選択し、Formulaには 1 を記載します。
ここでやっていること：
ボタン1をTapしたとき、変数selectに 1 を保存する
↑ もう1つ、Responseにjumpを設定し、最初に用意したシーン2に遷移するように設定します。
5. シーン2に結果を表示するテキストエリアを用意する
ここからシーン2に移動します。
↑ 選択されたボタンに応じて、表示するテキストを変更したいので、テキストツールを使って、任意のテキストを用意します。テキストの中身は変数によって上書きされるので、ここでは空でもどんなテキストでも構いません。
6. シーン2に結果を表示する
今回は画面遷移と同時に結果を表示したいので、TriggerのStartを使用します。Startは画面が表示されたときに自動でResponseを実行してくれる便利なTriggerです。
↑ 画面が表示されたと同時にResponseを実行したいときは Start With Jumpを選択します。完全に画面の読み込みが終わった後Responseを実行したいときはStart After Jumpを選びます。
今回は画面が表示されたと同時にテキストが表示されていてほしいので、Start With Jump を選択します。Start After Jump を選択してしまうと、一瞬テキストが表示されない時間が発生してしまうため注意。
↑ 次にResponse一覧の一番下にあるConditionを選択します。
このConditionがプログラミングでいう if 文に相当します。変数を用いるときは必ずセットで使用することが多くなりますので、覚えておきましょう。
↑ Conditionの設定をしていきます。ここで設定しているのは、「もし変数selectの値が1のとき」という条件文です（if文）
//やっていること
if select == 1:演算子は他にもあるので、様々な条件に対応できます。
↑ 次に変数selectの値が1のときのResponseを設定していきます。
変数selectの値が1のとき、テキストは「one」と表示したいので、書き換える対象のテキストエリアを選択して、Response/Textを設定、ContentはTextに設定。Inputエリアがあるので、そこに結果として表示したいテキスト「one」を記入する。
↑ ボタンは3つなので、これらの操作を3つ分設定する
やっていること：
変数selectの値が1のときテキスト「one」を表示する
変数selectの値が2のときテキスト「two」を表示する
変数selectの値が3のときテキスト「three」を表示する
//やっていること
if select == 1:
print("one")
if select == 2:
print("two")
if select == 3:
print("three")7. プレビュー
右上のプレビューボタンを押して、設定したCondition通りに正しく動くか確認しましょう。
Sample File
まとめ
Conditionを使うことで、変数を使うメリットを最大化できる
ステータス管理とは