【WEBアプリ】6号機ジャグラーのぶどう確率逆算ツール&設定判別ツール
お世話になっております、スログラミングです。
ちょっとJavaScriptで実装してみたい機能があり、今更ながら6号機ジャグラーのぶどう確率逆算ツールと設定判別ツールを作ってみました。
小役確率等の数値はそれらしい値をネットで調べて設定したつもりですが、間違っていたらすみません。
(一応、SアイムジャグラーEX-TP、Sファンキージャグラー2、SマイジャグラーV、SハッピージャグラーVⅢに対応していますが、ベル・ピエロは無視しているのでハッピーはあんまり役に立たないかもしれません。)
2023/9/12:Sゴーゴージャグラー3を追加しました。それに合わせて各機種の数値も見直しました。
※ご使用は自己責任でお願いいたします。
-
~項目一覧(クリックで飛べます。)~
- 差枚数からのぶどう確率逆算ツールと設定判別ツール
- WebStorage(ウェブストレージ) とは?
2. WebStorage(ウェブストレージ) とは?
最近ちょこちょこWEBアプリを作ってますが、自分でも使っている中で不便だなと思っているところがありました。
それが、「毎回最初から入力するの面倒くさい」です。
(他にも色々あるとは思いますが・・・。)
まず、「毎回最初から入力するの面倒くさい」に関して、もうちょっとちゃんと改善したい点を説明すると、これまで作ったWEBアプリではページを再読み込み(リロード)したり、一回閉じたりすると入力していたデータが消えてしまいます。
つまり、「あれ、この台の判別予想ってどうだったっけ?」と思ってもう一度確認したいとき、スマホのブラウザがリロードとかしちゃうとさっき入れた値が消えてしまうんですね。
そんなときに便利な機能が,WebStorage(ウェブストレージ)です。
その名のとおり、WEBのストレージなわけですが、WebStorageではcookie等と同様に皆様のブラウザにデータを保存することができます。
例えば、ユーザーに入力されたゲーム数やBB回数等のデータを保存しておいて、ページを再読み込みしたときにそのデータを読み込むといったことができるわけです。
そんなWebStorageには、SessionStorage(セッションストレージ)とLocalStorage(ローカルストレージ)の2種類がありますが、これらの違いはデータの保存期間です。
SessionStorageはブラウザを閉じるとデータが消えますが、LocalStorageではブラウザを閉じてもデータが保持されます。
LocalStorageでは、ユーザやサイトの作成者がデータを削除したりしない限り、基本的には半永久的にデータを保持する仕組みになっていますが、最近ではブラウザ側で一定期間を過ぎたLocalStorageのデータを自動的に削除するような機能が搭載されていっています。
(気になる方は、Intelligent Tracking Preventionとかで検索してみてください。)
前置きが長くなりましたが、今回の用途だとLocalStorageが良さそうなので、そちらを使用しています。
使い方は簡単で、データの保存には「localStorage.setItem」、データの取得には「localStorage.getItem」、データの削除には「localStorage.removeItem」を使います。
以下、簡単に使い方を説明していきます。
・LocalStorageにデータを保存
データの保存には「localStorage.setItem」を使います。
具体的には、以下のように「キー」と「値」をセットで入力していきます。
localStorage.setItem('キー', '値');
ここで一点、キーの名前について、注意する点があります。
それは、「同じドメイン内ではキー名称が共有される」ということです。
例えば、同じブログ内の別のページで、それぞれ「ゲーム数」というキーの名前を使用したとします。
その場合、あるページでゲーム数を保存した後、別のページでゲーム数を保存すると、元の値が上書きされてしまうといったことになります。
(逆に言えば、同じブログ内の別のページ間でLocalStorageの値を共有できるというメリットにもなります。)
元の値が上書きされてしまうことを避けるには、ユニークなキーの名前にすればOKです。
例えば、「key1」のように番号を振ってみたり、「key_20230401」のように日付を入れておくような方法があります。
・LocalStorageのデータを取得
データの取得には「localStorage.getItem」を使います。
具体的には、以下のように取得したい「キー」を指定すれば、保存された値を取得することができます。
localStorage.getItem('キー');
・LocalStorageのデータを削除
データの削除には「localStorage.removeItem」を使います。
具体的には、以下のように削除したい「キー」を指定すれば、その保存された値だけでなく、キー名称ごと削除することができます。
localStorage.removeItem('キー');
・まとめ
保存・取得・削除ともに1行だけで済む簡単なものなので、わかりやすいですね。
せっかくなので簡単な例で実際に使ってみましょう。
例えば、以下のように入力フォームと保存・削除ボタンを作成してみます。
(保存・削除ボタンを押すと、LocalStorageの値がポップアップ表示されます。)
htmlにJavaScriptを直書きしたコードは、以下のようになります。
<div>
<label>ゲーム数:<input type="number" value="0" id="testnum"></label>
<input type="button" value="保存" onclick="settest()">
<input type="button" value="削除" onclick="removetest()">
</div>
<script type="text/javascript">
function settest(){
localStorage.setItem('20230401_testnum', document.getElementById('testnum').value);
alert('LocalStorageの値は' + localStorage.getItem('20230401_testnum') + 'です');
}
function removetest(){
localStorage.removeItem('20230401_testnum');
alert('LocalStorageの値は' + localStorage.getItem('20230401_testnum') + 'です');
}
</script>
まず、「保存」ボタンをクリックすると、JavaScriptで作ったsettest()関数が呼び出されます。
settest()関数では、先程説明したlocalStorage.setItemによって、入力フォームの値がLocalStorageに保存されます。
保存された値は、alert()関数によってポップアップウィンドウに表示されます。
「削除」ボタンも同様に、removetest()が呼び出された後、localStorage.removeItemによってLocalStorageに保存された値が削除されます。そして、削除後の値はalert()関数によってポップアップウィンドウに表示されます。
このように、LocalStorageを使うことで必要なデータを保存しながらより便利なツールを作成することができるようになります。
ちなみに今回、これもあったら便利かなと思ってカウンターもつけてみました。
(+1とか+10のボタン)
本当は、このカウンターの作り方も説明したかったのですが、LocalStorageの説明で思いのほか疲れてしまったので、また今度にします。
コメント
コメントを投稿