デモンストレーション
JavaScriptでは、あらかじめ0～21番が割り当てられたカードをシャッフルし、
山札として用意します。
カードのシャッフルにはフィッシャー–イェーツ方式というアレゴリズムを用います。
フィッシャー–イェーツ方式
const arr = [0,1,2,3,4,5,6,7,8,9,10,
11,12,13,14,15,16,17,18,19,20,21
]
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
const temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
このプログラムでは、
21⇔21以下のランダムな数字、
20⇔20以下のランダムな数字、
19⇔19以下のランダムな数字…
という風に、置き換えた数を後半の配列に繰り上げていきます。
① 21と3を置換(仮)
1,2,21,4,5,6…20,3
② 20と6を置換(仮)
1,2,21,4,5,20…6,3
この時点で、シャッフルした配列のどの部分を選んでも、
完全にランダムな数字が得られます。
「適当に選ぶ」でカードをランダム選択する時も応用出来ます。
この理論は難しいですが、汎用性がありますので、
特定の集合を並び替えたり、適当なものを選択したりする場合、
なるべくこの原理を応用しましょう。
プログラム機能
途中、占星術的な要素を追加したく思い、結果をセーブし、
経過時間を表すプログラムを考えましたが、最終的には、
占った日時と結果を呼び出す機能にしました。
結果は暗号化されず、テキストファイルでダウンロード(任意)されます。
インポートとエクスポートは全く違うプログラムコード(メソッド)を使う為、
都度、ChatGPTに質問しました。
結果をエクスポート
const text = "Hello, world!";
// 文字列でも配列でもオブジェクトでも
const blob = new Blob([text], { type: "text/plain" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "hello.txt";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(link.href);
blobとは「バイナリ・ラージ・オブジェクト」の略で、
様々な種類のファイルをバイナリ(二進数)に変換します。
blobはダウンロード(インポート)の為に用いますが、ファイルサーバーと違うのは、
ブラウザ(chromeなど)依存の機能である事です。
ファイルサーバーとは違い、JavaScript依存の機能でもある為、
ログイン・パスワードなどのセキュリティは担保されません。
(JavaScriptは、基本的に外から見る事が出来る為。)
const canvas = document.getElementById("myCanvas");
canvas.toBlob(function(blob) {
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "image.png";
link.click();
URL.revokeObjectURL(link.href);
});
blobは文字列やデータのみならず、
canvasという要素に描画した絵をpngファイルとして保存出来ます。
JSON形式でエクスポート
const data = { name: "Alice", age: 25 };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "data.json";
link.click();
URL.revokeObjectURL(link.href);
今回は構造体(オブジェクト{}の中に配列[]があり、
また配列[]の中にオブジェクトがある)をインポート(アップロード)する必要がある為、
dataに入る構造体をJSONに変換する必要があります。
JSONとは、JavaScriptのオブジェクトの表記法を基にしたデータ形式で、
テキストベースのデータ交換用フォーマットです。
JSONはApps ScriptでExcelに入力したデータ→JavaScriptの構造体→JSONに変換し、
構造体としてタロットサイト側のJavaScriptに組み入れる際にも使います。
結果をインポート
const file_input = document.getElementById("file-input");
if(file_input){
const result = tarot.querySelector(".result-2");
file_input.addEventListener("change", (event) => {
const reader = new FileReader();
reader.readAsText(event.target.files[0]);
// FileReader()にテキスト形式として読み込む
reader.onload = (event) => {
const json_data = JSON.parse(event.target.result);
// JSONに変換し、後略
};
});
}
JavaScriptは「高級言語」とされていますが、インポートは手動的です。
ファイルを読み込む為にFileReader()というクラスが使用されますが、
読み込んだファイルを、一旦文字列形式(string)に変換し、
最終的にJSON.parse()メソッドで元の構造体に戻します。
ただし、これでも構造体であれば何でも良いという意味になってしまう為、
設計した構造体の形であるかどうか、例外処理(エラーキャッチ)するという作業が必要です。
これにて、エクスポート&インポートの処理が完成するのです。
