【パワスロ:Tips】OnVisibleでのNavigateで画面切り分け とその対処法

はじめに

パチスロアプリでも使用している、スタート画面のOnVisible、条件に応じてNavigateで画面遷移する方法と、その際のネックの事象（編集できなくなる）の対処法の部分を記事にしました。
以前の記事はこちら

パワスロシリーズの記事はこちらから

画面切り替え処理についてのあれこれ

アプリ起動時に条件に応じてどの画面を表示するかを切り替えたいケースがよくあります。
以前はOnStartの中で条件判定してNavigate関数で指定することが主でしたが、2年くらい前からはOnStartでのNavigateは推奨されず現在廃止予定の機能となってます。

そこでStartScreenでの画面切り替えを推奨されてます。こちらはParam関数の値やUser関数の値は使えるのですが、グローバル変数は使えないので、起動時の処理で条件判定し変数に詰めてそれをもとに画面切り分けしたいケースでは使えません。

NOTE少し試したところ、プレビュー機能のApp.Formulasの値は使えるようでした。
ここにOnStartで判定した結果の変数を指定したら使えるのかもしれません。（ちゃんと結果を待ってくれるのかが試せてない）また今度時間あるときに確認してみようかと思います。

また、OnStart自体も一時はデフォルトでオフにされており（今は既定でオン）、なるべく別の方法で切り分けることが良いとされているようです。

★所感ではOnStartで最初にいろいろ整理したうえで各画面へ飛ばしたいというケースの方が多いと思うのですが、OnStartで起動が遅くなるから。。の一点張りで使わない方針にされているのが解せません。よっぽど大掛かりなことしてなけりゃ大して遅くないし！最初にOnStartで色々整理させてーというケースの方が絶対多いと思う（個人の感想）

実装概要

前置きが長くなりましたが、今回実装した内容でいつくかTipsがあるのでそのご紹介と、
やった場合に起きる事象の対処法を解説していきます。スロットアプリで実装した概要は以下の感じです。
今回はOnStartは使わずに初期標示用画面を用意して使う実装です。

1. 初期表示用の画面を用意する（最初の画面のOnVisibleに初期処理を実装）
2. OnVisible内で初期処理を実装（ローカルキャッシュでモバイルモードかどうか）
3. OnVisibleから別ボタンの処理を実行してNavigateする

① 初期表示用の画面を用意する

最初に表示する画面を用意します。※最初の1回だけ動作する用の画面
今回は簡単にローディング画像を表示（表示しっぱなし）しているのみです。
処理はOnVisibleと非表示で追加したFunkNaviボタンのみに書いてます。

TIPS普通に使う画面のOnVisibleに処理を書くと、別画面からこの画面に遷移するたびにOnVisibleが走ってしまうので最初の1回だけ動作する用の画面を用意 。
※初期画面作らない場合は変数用意して最初の一回だけやるようにしておくなどの対応も可

② OnVisible内で処理処理を実装

OnVisibleに初期処理を書きます（コレクション作成など）
後半にローカルキャッシュからデータを読み込み、データの復元と、前回画面がPCかモバイルかの判定をし、
モバイルかどうかの結果（TRUE/FALSE）を変数MobileModeに詰めてます。
※この辺りの詳細は前回記事で紹介してます。

Code// ローカルキャッシュ保存読み出し ※編集画面ではエラー通知がでるが問題なくWeb版でも使える
LoadData(UserData,”userLocalData”,true);
If(!IsEmpty(UserData), With({userData:First(UserData)},
Concurrent(ClearCollect(HitGal,userData.Hit), Set(Coins,Value(userData.Coin)), Set(MobileMode,Boolean(userData.MobileMode)))
);
);

★ここでのポイントはOnVisible内ではNavigate関数は使えない！という点です。
実装すると以下のようなエラーが表示されます。

エラー内容このスクリーンからは必ず自動的に移動するため、ここでは移動は使用できません。

たしかに、、「困っちゃうだろうから使えないようにしてるよー。」という意図は理解できますが、
OnStartで画面遷移の実装が出来ないからこっちでやろうとしたのにこれでは八方ふさがり、、
と思われるのですが、以下の技でNavigate関数の実行が可能です。

③ OnVisibleから別ボタンの処理を実行してNavigate

そのままOnVisibleに処理を書くと怒られますが、別のボタンのOnSelectの実行はできます。
そのため、処理用のボタンを用意してそれをSelectすれば実行可能となります。
ボタンを追加して非表示し、OnSelectに以下の処理を実装します。

CodeIf(MobileMode,Navigate(ScreenMobile,ScreenTransition.Fade),Navigate(ScreenPC,ScreenTransition.Fade))

Onvisible側では以下のコードを追加してこのボタンをSelectします。

CodeSelect(FunkNavi);

これでエラーは出ずに、無事にOnVisibleの処理で判定しての画面遷移が可能となります。

TIPSこの処理用のボタンを使うテクニックは他でもよく使われます。
・同じ処理なので一つに統合したい　→これを使って共通で呼び出す。
・コントロールの深いところにあるボタンの処理なので探しづらい　→これを上部に持ってきて保守性アップ
※Select後にその結果を待って次の処理をやるわけではない（そのまま次に行く）ので、その点は注意です。続けての処理を書きたい場合はSelectしたボタン側に書く必要があります。

画面が編集できない事象と対処法

これで、初期表示用画面を使っての画面遷移の切り分けが実装できました。
さて、編集を続けるかーと触っていると、あれ？この画面開こうとすると、開けないんだけども。。。
と、いう困った事象が起きます！

以下のScreenLoadingをクリックしても、Navigateが動いてScreenPCに行ってしまう。。

アラート出して使えなくしている意図が沁みますね。Navigateを止めようにも画面が開けないので、これだと二度とこの画面を触れなくなってしまいます。。

ぴーたくん

安心してください！はいてますよ！

そ、その声は！！？　
関係なかったですが、シンプルな方法で対応できます。

置換で対処する

Navigateを止めたいけど画面が触れない。のであれば、別のところからNavigateを止めればOKです

検索/置換機能を使います。

編集画面の左ペインに🔎アイコンがあります。これで検索と置換が出来ます。
タブで置換にして「Navigate」と打ちましょう。そうするとNavigateを使っている箇所がツリー表示されます。
この状態で書き換え先（置換後の文字）に、「Navigate２」や「//Navigate」などと入れます。
そして置換対象のチェックは開かない画面のコントロールのみにチェックします。※他の画面まで変わらないように注意
そうすると、エラーが出るORNavigateが動作しない状態にできます！

これでこの画面を触れるようになったので、必要な編集を行って、終わったら置換した部分を元に戻しましょう。
※置換機能を使ってもいいし、そのまま書き換えてもよい

NOTE検索と置換機能は1年くらい前？から使えるようになった機能なので、前はこの方法さえ取れなかったんですね。どんどん機能が追加され使いやすく進化していくのはうれしい限りですね。

おわりに

今回は画面遷移の際のやり方と困ったときの対処法を書きました。
この画面を遷移したいんだけども、どうやるの？という点と、画面が二度と開かなくなっちゃったよーという嘆きはお仕事やコミュニティでもよく目にしました。そういった方のお助けや事前知識となればと思います。それでは。