位置情報を保存・復帰したい
UIの移動はできることがわかったけど、アプリを開くたびに、初期位置にもどってしまうのは、なんとも使いづらいと思った。
Geminiに状態を保存したり、読みだす手段をきいてみたら、以下の方法を教えてもらった。
JSON形式の文字列を、
・ダウンロードやアップロードする。
・ブラウザ内部の記憶領域へ保存する。
さらに、ブラウザ内部の記憶領域へ保存する場合、
・クッキーへ保存する。
・IndexedDBへ保存する。
※これ以外は「揮発性」らしくブラウザを閉じると消えてしまうとのこと。実際には試していません。
IndexedDBへ保存することにし、これを実現してくれるパッケージとして「JsStore」というのを教えてもらった。
簡単にいうと、IndexedDBをSQLライクに扱えるパッケージで、少なからずSQLの知識が必要になるが、その知識は既にある前提で話を進める。
保存した結果のイメージ
ブラウザの開発者モード（DevTools）を開いて「Application」タブをクリックし、左横のサイドバーから「IndexedDB」を選ぶと、既に作成してあればDBが表示される。
※初期状態ではDBはないはず。
■IndexedDBの表示例
JsStore 初期設定
JsStoreを扱う手順は以下のURL（以降、本家と記載します）を参考にした。
https://jsstore.net/docs/installation/
ただし、私が試した環境下ではうまく動かなった。理由は明快で「CORS問題」が立ちはだかるから。
なので、いろいろ試行錯誤を強いられた。
ローカル環境へのパッケージインストール
これは本家のインストール手順通りに実施した。
npm install jsstore
インストールした結果、プロジェクトの「node_modules」フォルダに「jsstore」フォルダが作成された。
「jsstore」フォルダを確認すると「dist」フォルダがある。
「dist」フォルダに入っているファイルのうち、以下のファイルが必要になる。
・jsstore.min.js
・jsstore.worker.min.js
これら２ファイルを、実行するフォルダ（例えば「./プロジェクト/jsstore_dist」）へコピーする。
ここまで来ると、index.htmlの「head」タグへ以下を追加する。
<script src="./jsstore_dist/jsstore.min.js"></script>
これでやっと使えるようになった。
Connectionを作成する
JsStoreを使うには、「Connection」を作成する必要があるとのことで、以下を最初に実行する。
declare const JsStore: any
const lib = (window as any).JsStore
const workerFile = `./jsstore_dist/jsstore.worker.min.js`
const connection = new lib.Connection(new Worker(workerFile))
※たまに「Connection」作成が失敗します。そんなときはリトライ処理を入れてください。
DB（記憶領域）とテーブルを作成する
本家のサンプルにあるように、DBとテーブルを作成する必要がある。
https://jsstore.net/docs/database/
https://jsstore.net/docs/database/column
https://jsstore.net/docs/database/data-type
まずは、DBの定義を作成してみた。
//テーブル
tblNameSettings = `Settings`
tblSettings = {
name: tblNameSettings,
columns: {
key: { dataType: 'string', primaryKey: true },
value: { dataType: 'string' },
}
}
//DB
dbName = `EvonaDB`
db = {
name: dbName,
tables: [tblSettings]
}
続いて、DBの初期化。
const res = await connection.initDb(db)
if (res) {
console.log('Db Created & connection is opened')
}
else {
console.log('Db connection is opened')
}
これでDBが作成された。
データアクセス
ようやくデータアクセスが可能になったので、テーブルへの「レコード」の追加・検索を実行する。
https://jsstore.net/docs/insert/
https://jsstore.net/docs/select/
レコード追加はこんな感じ。
await connection.insert({
into: tblNameSettings,
values: [{
key: key,
value: value,
}],
upsert: true
})
レコード検索はこんな感じ。
try {
var results = await connection.select({
from: tblNameSettings,
where: {
key: key
}
});
//results will be array of objects.
//console.log(results);
} catch (error) {
console.error("JsStore Select Error:", error);
}
次回は「MessageBox」を作ってみる。
普通の便利なパッケージを使ったアプリなら、いわゆるMessageBoxなんて標準で使えると思う。でも、それ自体作ってみることには意義があるはず。
ということで、MessageBoxを作っていこうと思う。