【パワスロ:Tips】SaveData、LoadDataを使ってローカルキャッシュ保存する

はじめに

先日作成したパチスロアプリで使用しているSaveData、LoadDataを使ったデータの一時保存について、業務アプリでも活用できると思いますので、記事にいたしました。

簡単に説明すると、ブラウザやアプリのローカルキャッシュにデータを保持しそれを使用できる機能です。
通常であればSPOやDataVerseなどのデータソースを使用しますが、それ以外にユーザー単位の一時データを保持、使用するケースで利用します。

Power Apps の SaveData および LoadData、ClearData 関数 – Power Platform | Microsoft Learn

POINTSaveData 関数は、後で名前から使用できるようにコレクションを格納します。
LoadData 関数は、既に SaveData で保存されている名前を使用してコレクションを再読み込みします。 別のソースからコレクションを読み込む場合、この関数は使用できません。
ClearData 関数は、名前が指定されていない場合、特定の名前でストレージをクリアするか、またはアプリに関連付けられているすべてのストレージをクリアするかです。

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

利用用途・注意点について

この機能は検索すると、オフライン機能としての利用（おもにモバイル）の例が多く載っています。
以前はモバイルアプリのみの対応でしたが、1，2年くらい前からWebブラウザでも使用できるようになっています。（プレビュー機能）
個人的にはモバイルアプリのオフライン機能用以外にも、ユーザーごとの一時的なデータ保持が出来るので活用の幅はもっと広いと思います。

1. ギャラリーの検索キーワードやプルダウンの選択値を記憶しておくなど
2. 最後に表示していた画面をアプリ起動時に再度開く
3. データソースがないアプリでのデータ保存機能として

ローカルキャッシュのため、ユーザーが同じでもブラウザやモバイルアプリが異なる場合は別ものとみなされます。またキャッシュがクリアされるとデータは消えてしまいます。

そのため、あくまで消えてしまっても問題がないレベルの個人単位のデータを保持する目的での使用となります。
※保持が必要な場合はこの方法ではなく、ユーザー単位のデータを保持するデータソースを作成して使用しましょう。

今回ゲームアプリ作成では一般公開して使えるようにするため、データソース（SPOリストなど）は使用しない実装としていました。が、それだとゲーム結果などが保存できませんのでまた１から始めることになります。
そこでSaveData、LoadData機能を使って、アプリのキャッシュに保存して起動時に読み込むことで一時保存機能（セーブ機能）を実装しました。この方法であればデータソースなしでデータの保存、再開が可能となります。

業務アプリの場合であれば、上記に挙げたようなユーザーがいつも使う検索キーワードを指定した状態でアプリを開いたり、前回指定した承認者をプルダウンに初期値で指定しておく、などのユーザービリティを考慮した実装で応用が出来ます。このレベルであれば消えても問題ないですし、ユーザーの使い勝手がよくなります。
次からは、作成したスロットアプリをベースに実装を解説していきます。

NOTE以下公式にある通り、いくつかの注意点があります。詳細は公式リファレンスにてご確認ください。
・機密データは暗号化されないため使用しないようにする。
・スマホではある程度のデータを対応できるが、ブラウザ版では１MBまで。いずれにしろデータ量は軽くなるよう考慮する

実装サンプル

スロットアプリに実装した一時保存機能の例です。
・メニューからユーザー操作で一時保存、ゲームデータ（ゲーム数、当たり数、コイン数）を保持
・最後に開いていた画面（PCまたはモバイル）を再起動時に開く

実装

この実装ではデータソースは使用していません。が、ゲームのデータと最後に開いていた画面を記憶して、再度起動した場合にそこから再開できるようになっています。

簡単には以下で実装しています。

1. メニューの一時保存クリックでSaveDataでコレクション（ゲーム履歴、コイン、画面）をローカルキャッシュへ保存
2. アプリ起動時にローカルキャッシュからLoadDataで読み込み各データを復元
3. 前回の画面を判定してNavigate

以下順に解説していきます。まずは機能を有効にします。

WebブラウザでSaveDataを有効にする

最初に設定から以下の機能を有効にする必要があります。
「Webプレーヤーで SaveData、LoadData、ClearDataを有効にします。」

LoadDataのエラーについて

上記で機能は有効になっているのですが、現状の制限でアプリ編集画面では使用できません。また、動作した際にエラーが表示されます。
公開して再生すると想定通り動作してくれるので、編集中はエラーを無視して問題ありません。動作確認はプレビューではなく公開して再生して確認します。

公式リファレンスより抜粋

以下のようなエラーが出るが無視してOK

① SaveData

まず、メニュー画面の処理では一時保存と保存して終了の際にSelect（FunkSave）でFunkSaveボタンの処理を実行しています。※共通的な実装のため別ボタンに処理を書いてます。本筋と関連薄いのでこの辺は割愛

メニューのOnSelect

FunkSaveのOnSelect

CodeClearCollect(UserData,{Hit:HitGal,Coin:Coins,MobileMode:MobileMode});
SaveData(UserData,”userLocalData”);
If(GalleryMenu.Selected.ID =3,Exit());

・UserData　→ローカルキャッシュに入れる用のコレクションを作成します。中身は以下
　・HtiGal（ゲーム履歴：コレクション）
　・Coins (コイン：数値)
　・MobileMode （PC画面かモバイル画面：TRUE/FALSE）

・SaveData　→上記コレクションを指定した名前のローカルキャッシュに保存します。

※最後の部分は一時保存か保存して終了するかの違いです。

TIPSSaveDataはコレクションしか入りませんので事前にコレクションを作っています。
今回は複数の項目をひとつに含めたかったのでオブジェクト形式にしたコレクションを作っています。
詳細は以下公式の構文を参照ください。

② LoadData

次にLoadDataで読み込む部分です。
AppのOnStartに記載してもいいのですが、画面Navigateの実装などもあるため、今回は起動時用の専用画面を用意して、そのOnVisibleに処理を実装しています。

起動用画面のOnVisible

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))
　　)
　);
);

・LoadData　→SaveDataで指定したローカルキャッシュから値を取得してコレクション（受け取り用に生成）へ格納します。
　この際に、第3引数のtrueは値がない場合にエラーにしない設定です。falseにすると値なしの場合にエラーが発生します。

　コレクション（UserData）が空でない場合は最初の1件を取得してUserDataと名付けてます。
　　※今回は1レコード分のデータを格納しているため。Withを使って簡潔に記載
　　※ローカルキャッシュデータがない場合は何もせず通常の起動となる

　そしてそれぞれアプリで使用しているコレクションや変数にデータを格納します。
　・HtiGal（ゲーム履歴：コレクション）
　・Coins (コイン：数値)
　・MobileMode （PC画面かモバイル画面：TRUE/FALSE）

ゲームデータ、コインについては上記でデータが復元されるので完了です。次に画面遷移の部分を解説します。

③ 画面の遷移

NOTEOnVisible内ではNavigate関数が使えません。
使おうとすると以下のようにアラートが表示されます。

TIPSその回避方法として、非表示のボタンを作成（FunkNaviボタン）、そのボタンをSelectすることで処理を実行しています。こうすることでOnVisibleでの画面遷移が可能となります。

Code起動用画面のOnVisibleの最後
Select(FunkNavi);
FunkNaviボタンのOnSelect If(MobileMode,Navigate(ScreenMobile,ScreenTransition.Fade),Navigate(ScreenPC,ScreenTransition.Fade))

シンプルにローカルキャッシュから取得したPCモバイルのTrueFalseでそれぞれの画面へ遷移しています。

NOTEただし上記の方法をとると、この画面を開く際に自動で別画面に遷移するため、
編集画面上でもこの画面が触れなくなってしまうというデメリットがあります。
→この回避方法は別途記事に使用とも思いますが簡単には、
サイドリンクの検索・置換を使ってこの画面の”Navigate”を”//Navigate”や”Navigate2 “などに一時的に置換して実行させないようにすれば開けるようになります。編集後に元に戻します。

④ ClearData

最後にClearDataは指定したローカルキャッシュをクリアする関数です。<br />名前を指定せず空で実施した場合は、アプリで使っている全ローカルキャッシュがクリアされます。

スロットアプリではゲームデータクリアボタンで表示する確認ダイアログに実装しています。
ゲームデータ初期化と合わせてローカルキャッシュをクリア

おまけ

SaveDataで使うデータ量を減らすためにゲームデータ（HitGal）の中身は画像を含めないようにしてます。
・HitGal（コレクション）　→表示しているイメージ3つはそれぞれ数値（画像IDを指定）
・ギャラリーにはHtiGalをItemsに指定
・Image１～３は画像を直接指定せず、画像を定義した別のコレクションから画像IDでLookupして表示する。
→SaveDataで使うローカルキャッシュでは画像を含めず、数値にしているのでデータ量が抑えられる。

・ギャラリーには画像表示されるが、使っているコレクションでは画像データは保持せずにIDで別コレクションからLookupして表示

・以下画像定義のコレクションに画像データを保持

おわりに

今回はスロットアプリで使用しているSaveData、LoadDataについて解説いたしました。
本格的にデータを保持する場合はデータソースを使用しますが、今回は配布用ゲームでしたので、ローカルキャッシュを利用することでセーブ機能が実装できました。
業務アプリの場合でも、毎回最初の画面から操作するのではなく、検索キーワードを残しておいてすぐに結果を表示したい。や、前回選択した承認者を記憶しておいてDefaultで指定したい。などの要件に応用できると思います。
ユーザーごとの情報リストを用意して都度保持しておけば可能ですが、そこまでせずとも一時データとして保持できるので有用かと思います。
ゲーム作成では業務アプリでも応用できる実装が学べたりしますので、ご興味あればぜひゲーム作成にもチャレンジください。それでは。