JavaScript｜VB.NET-TIPS などプログラミングについて

■JavaScript

[2025/01/18] [PR] (No.)
[2021/06/02] JavaScript IndexedDB の使い方３（データ取得） (No.269)
[2021/06/01] JavaScript IndexedDB の使い方２（データ追加） (No.268)
[2021/05/31] JavaScript IndexedDB の使い方１（データベースオープン） (No.267)
[2021/05/27] JavaScript jQueryでAjaxを使いPHPからの画像データをcanvasに表示する方法 (No.266)
[2020/08/20] JavaScript jQueryでQRコードを表示する方法 (No.227)

≪ [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] ≫

- 2025/01/18
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
- CM

2021/06/02

JavaScript IndexedDB の使い方３（データ取得）

今回は「オブジェクトストア」に登録されたデータを取得する方法について説明します。

データを取得する場合でも、データ追加処理と同様にデータベースの「トランザクション」を取得し、「トランザクション」から「オブジェクトストア」オブジェクトを取得します。
その後で「オブジェクトストア」オブジェクトの get メソッドでデータ取得のリクエストを行います。

get メソッドの書式とイベント関数の定義は以下の様になります。

// getメソッド（objectStore：「オブジェクトストア」オブジェクト）
var request = objectStore.get(id);
request.onsuccess = function(event) {
	// 取得が成功した場合の関数宣言（event.target.result にデータが返る）
};
request.onerror = function(event) {
	// 取得エラーの場合の関数宣言
};

<パラメータ>
・id：キー文字列またはキーの範囲指定

<戻り値>
request ：IDBRequest オブジェクト

get メソッドが成功した時には event.target.result にデータが返るので、ここで行いたい処理を記述します。
以下に簡単な get メソッドの利用ソースを示します。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - add - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;
//	データベース名
var	dbName = "TestDB";
//	オブジェクトストア名
var	objStoreName = "Test1";

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open(dbName);
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ取得処理
 */
function getData() {
	//キー値
	var id = $("#id").val();
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readonly');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//一件取得
	var request = objectStore.get(id);
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;
		console.log('データ:', result);
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - add - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	 id:<input type="text" name="id"   id="id" value="" />
	<button id="buttonGet"  onclick="getData()">データ取得</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後 ID のテキストボックスに「01」を入力し「データ取得」ボタンをクリックすると、ブラウザの「ウエブ開発ツール」のコンソールにデータが表示されるのが分かります（下図参照）。

そこで ID のテキストボックスをクリアし「データ取得」ボタンをクリックすると、コンソールに undefined と表示されます。また「111」などのキーが存在しないで「データ取得」ボタンをクリックしても同様に undefined と表示されます。

データが undefined の判定処理を onsuccess イベントに追加して undefined では無い場合にデータ処理を行う様に変更します。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - get - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;
//	データベース名
var	dbName = "TestDB";
//	オブジェクトストア名
var	objStoreName = "Test1";

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open(dbName);
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ取得処理
 */
function getData() {
	//キー値
	var id = $("#id").val();
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readonly');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//一件取得
	var request = objectStore.get(id);
	//取得が成功した場合の関数宣言
	request.onsuccess = function(event) {
		var result = event.target.result;
		if (result !== undefined) {
			console.log('データ:', result);
		} else {
			console.log('データが見つからない!!');
		}
	};
	//取得エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('取得失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - get - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	 id:<input type="text" name="id"   id="id" value="" />
	<button id="buttonGet"  onclick="getData()">データ取得</button>
    <br />
</body>
</html>

メソッド	処理	説明
add	データ追加	新規のデータをオブジェクトストアに追加する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
clear	全データ削除	オブジェクトストアの全データを削除する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
count	データ件数取得	件数検索にキーまたは、キーの範囲指定により件数取得する。キー(範囲)の指定が無ければ、オブジェクトストアの全件数を取得する。戻り値 IDBRequest の onsuccess イベントで件数取得する。
delete	データ指定削除	キーまたは、キーの範囲指定によりデータ削除する。戻り値 IDBRequest の onsuccess , oneerror イベントで処理が必要であれば宣言する。
get	データ取得	キーの指定によりデータ取得する。戻り値 IDBRequest の onsuccess イベントでデータ取得する。
getAll	指定全データ取得	件数検索にキーまたは、キーの範囲指定によりデータ取得する。データ取得はカーソル処理を使って行う。
openCursor	カーソルオープン	件数検索にキーまたは、キーの範囲指定によりカーソルオープンする。戻り値 IDBRequest の onsuccess イベントでカーソル(event.target.result)が返される。カーソルの continue() メソッドで次のカーソルへ処理が移る。

■データ追加処理

IDBObjectStore の add メソッドを使ったデータ追加の例を以下に示します。

データベースオープン処理は、前回の記事とほぼ同じですが、データベース名、オブジェクトストア名は先頭の方で宣言する様にしています。
IDBObjectStore の add メソッドの引数にはデータのオブジェクトを渡しますが、オブジェクトストアの生成で指定した keyPath の要素名は必須です。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - add - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;
//	データベース名
var	dbName = "TestDB";
//	オブジェクトストア名
var	objStoreName = "Test1";

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open(dbName);
	//DBが存在しない場合、またはバージョン引数よりも小さい場合の作成処理
	request.onupgradeneeded = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		db.onerror = function(event) { 	//エラー処理
			console.log('DBの作成に失敗しました。');
		};

		//オブジェクトストア名の確認
		if (!db.objectStoreNames.contains(objStoreName)) {
			//オブジェクトストアが無い場合
			var objStoreKey = { keyPath: 'id' };	//キー設定
			//var objStoreKey = { autoIncrement: true };	//autoIncrementのみ指定
			//オブジェクトストア生成
			var obj = db.createObjectStore(objStoreName, objStoreKey);
			console.log("オブジェクトストア生成");
		}
	};
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ追加処理
 */
function addData() {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//オブジェクトストアに追加のリクエストします。
	var data = {
				 id: '01' , 		//キーデータ
				 data1: 'abcde' , 	//文字列データ
				 data2: 123 ,		//数値データ
				 data3: { data3_1: '001', data3_2: 1000 }	//オブジェクトデータ
			   };
	var request = objectStore.add(data);
	//追加正常の場合の関数宣言
	request.onsuccess = function(event) {
		console.log('保存成功');
	};
	//追加エラーの場合の関数宣言
	request.onerror = function(event) {
		console.log('保存失敗。event:', event);
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - add - 1</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonAdd"  onclick="addData()">データ追加</button>
    <br />
</body>
</html>

「DBオープン」ボタンをクリック後「データ追加」ボタンをクリックすると、データベース「TestDB」の中にオブジェクトストア「Test1」が生成され、その中にデータが１件存在することが分かります。

再度「データ追加」ボタンをクリックするとエラーが発生し、データが追加されません。
オブジェクトストアの生成で指定した keyPath の指定があるので id は重複キーを許可されません。

但し、オブジェクトストア生成の前でコメント行としている autoIncrementのみ指定 に変更すれば、データ項目の中の主キーの指定が無くなります。
そこで、HTMLファイルを変更し再度ブラウザに読込みを行います。この後でブラウザの「ウエブ開発ツール」上でデータベースを削除を行います。

再度「DBオープン」ボタンをクリック後「データ追加」ボタンを複数回クリックすると、同じデータがオブジェクトストアに登録されます。
この場合、オブジェクトストアのなかでは「Key」という項目でデータが付加されその値が順次増加(autoIncrement)していきます。

そこで少しソースを変更し、複数のデータを登録できる様に変更します。「addData」関数をサブ関数として与えられるデータが配列でも処理できる様にします。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - add - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;
//	データベース名
var	dbName = "TestDB";
//	オブジェクトストア名
var	objStoreName = "Test1";

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open(dbName);
	//DBが存在しない場合、またはバージョン引数よりも小さい場合の作成処理
	request.onupgradeneeded = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		db.onerror = function(event) { 	//エラー処理
			console.log('DBの作成に失敗しました。');
		};

		//オブジェクトストア名の確認
		if (!db.objectStoreNames.contains(objStoreName)) {
			//オブジェクトストアが無い場合
			var objStoreKey = { keyPath: 'id' };	//キー設定
			//オブジェクトストア生成
			var obj = db.createObjectStore(objStoreName, objStoreKey);
			console.log("オブジェクトストア生成");
		}
	};
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		console.log("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		console.log("DBオープンエラー");
	};
}
/**
 *  データ追加処理SUB
 */
function _addData(data) {
	//トランザクション
	var transaction = db.transaction(objStoreName, 'readwrite');
	//オブジェクトストアにアクセスします。
	var objectStore = transaction.objectStore(objStoreName);
	//単独データを1件の配列データにする
	var arrData = new Array();
	if (Array.isArray(data) == false) {
		arrData[0] = data;
	} else {
		arrData = data;
	}
	for (var i in arrData) {
		//オブジェクトストアに追加のリクエストします。
		var request = objectStore.add(arrData[i]);
		//追加正常の場合の関数宣言
		request.onsuccess = function(event) {
			console.log('保存成功');
		};
		//追加エラーの場合の関数宣言
		request.onerror = function(event) {
			console.log('保存失敗。event:', event);
		};
	}
}
/**
 *  データ追加処理
 */
function addData() {
	//配列データの例
	var data = [
					{ id: '01' , data1: 'abcde' , data2: 123 , data3: { data3_1: '001', data3_2: 1000 } },
					{ id: '02' , data1: 'a0002' , data2: 200 , data3: { data3_1: '002', data3_2: 2000 } },
					{ id: '03' , data1: 'a0003' , data2: 300 , data3: { data3_1: '003', data3_2: 3000 } },
					{ id: '11' , data1: '11111' , data2: 111 , data3: { data3_1: '101', data3_2: 1111 } },
					{ id: '22' , data1: '2222'  },
					{ id: '33' , data2: 222  }
			   ];

	//単独データの例
	//var data  = { id: '11' , data1: '11111' , data2: 111 , data3: { data3_1: '101', data3_2: 1111 } };
	_addData(data);
}
</script>
</head>
<body>
    <h2>test IndexedDB - add - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
	<button id="buttonAdd"  onclick="addData()">データ追加</button>
    <br />
</body>
</html>

このソースではオブジェクトストアの生成で keyPath の指定があるので id は重複キーを許可されませんので、データの中の「id」はユニークになる様に設定します。

そこで、HTMLファイルを変更し配列データを登録する様にして再度ブラウザに読込み、ブラウザの「ウエブ開発ツール」上でデータベース「TestDB」のオブジェクトストア「Test1」の全データの削除を行います。その後「DBオープン」ボタンさらに「データ追加」ボタンをクリックします。
そうしますと、以下の図の様にオブジェクトストア「Test1」に6件のデータが登録されます。

ここで注意点ですが、データの「id」は必須なのですが、その他のデータは指定されたままの状態で登録されています。登録されるデータの制約は keyPath で指定された要素名が存在すればよく、その他は Javascript のオブジェクトであればOKな様です。

■IndexedDB オープンメソッド

通常のデータベースと同様に IndexedDB のデータベースを使用時には最初にオープン処理が必要です。
オープン処理は open 関数を使いますが書式は以下の通りです。尚、オープン処理と同時に各種のイベント関数を宣言し、オープン処理結果を待ち受けてやります。

// オープン処理
var request = indexedDB.open( dbName [ , verNo ] );

<パラメータ>
・dbName：データベース名を文字列で指定します。
・verNo ：バージョンNOを数値で指定します。

<戻り値>
request ：IDBOpenDBRequest オブジェクト
          このオブジェクトのイベントハンドラにユーザ関数を定義して各処理を行う。

// イベントの関数定義
request.onupgradeneeded = function(event) { 
	// 初回オープン時または、バージョンNOが登録済みより大きい場合に呼ばれる関数宣言
};
request.onsuccess = function(event) {
	// 接続が正常に終了した場合に呼ばれる関数宣言
};
request.onerror = function(event){ 
	// オープン時にエラーが発生した場合に呼ばれる関数宣言
};

■簡単な IndexedDB オープン処理

以下に IndexedDB のオープン処理の簡単な例を示します。
データベース名は「TestDB」としてオープンのリクエストを行い onsuccess , onerror イベントの処理を宣言しています。
onsuccess のイベントの中の request.result は IDBDatabase のインスタンスですので、グローバルな変数に保存します。このインスタンスを使って各種のデータ処理が行える様になります。

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - 1</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open("TestDB");
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		alert("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		alert("DBオープンエラー");
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - 1</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <br />
</body>
</html>

下図はこのHTMLファイルを FireFox で呼出した直後で、「ツール」⇒「ブラウザツール」⇒「ウエブ開発ツール」を開いたところです。
「ストレージ」 の項目を見ると 「Indexed DB」 がありますので、その中の 「http://localhost」 をさらにみるとまだ何も存在しないことが分かります。

ブラウザのサイトの「DBオープン」をクリックして再度 「ストレージ」 の項目の 「Indexed DB」 の 「http://localhost」 をみると 「TestDB」 が作成されていることが分かります。
（これを見る場合には一旦「ウエブ開発ツール」を閉じてから再度開く必要があります）

「TestDB」 は作成されましたが Indexed DB のテーブルの様な「オブジェクトストア」が存在しないので、これを作成してみます。

上記の HTML ファイルのソースに onupgradeneeded イベントを追加し、その中で「オブジェクトストア」を生成する様に変更します。ファイルは以下の様になります。

■オブジェクトストアの生成を伴う IndexedDB オープン処理

<html>
<head>
<meta charset="utf-8">
<title>test IndexedDB - 1 - 2</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//	ブラウザ対応宣言
window.indexedDB      = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange    = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;

//	データベース(IDBDatabase)インスタンス
var	db;

/**
 *  DB接続処理
 */
function openDB() {
	//	データベースオープン:[名称:TestDB]
	var request = indexedDB.open("TestDB");
	//DBが存在しない場合、またはバージョン引数よりも小さい場合の作成処理
	request.onupgradeneeded = function(event) {
		//データベースインスタンス保存
		var db = event.target.result;
		db.onerror = function(event) { 	//エラー処理
			alert("DBの作成に失敗しました。");
		};

		var objStoreName = "Test1";		//オブジェクトストア名
		if (!db.objectStoreNames.contains(objStoreName)) {
			//オブジェクトストアが無い場合
			var objStoreKey = { keyPath: 'id' };	//キー設定
			//オブジェクトストア生成
			var obj = db.createObjectStore(objStoreName, objStoreKey);
		}
	};
	//オープンが正常の場合の関数宣言
	request.onsuccess = function(event) {
		//データベースインスタンス保存
		db = event.target.result;
		alert("DBオープンOK");
	};
	//エラーの場合の関数宣言
	request.onerror = function(event){
		alert("DBオープンエラー");
	};
}
</script>
</head>
<body>
    <h2>test IndexedDB - 1 - 2</h2>
	<button id="buttonOpen" onclick="openDB()">DBオープン</button>
    <br />
</body>
</html>

最初の処理で作成された 「TestDB」 を削除するために、「ツール」⇒「ブラウザツール」⇒「ウエブ開発ツール」を開きます。
「ストレージ」 の項目を見ると 「Indexed DB」 があるのでその中の 「http://localhost」 の 「TestDB」 で右クリックをして「"TestDB(Default)"を削除」メニューを実行します。

さらに、上記の「オブジェクトストア」の生成を含んだHTMLファイルを読み込み「DBオープン」をクリックして再度データベースの生成を行います。
「ストレージ」 の項目の 「Indexed DB」 の 「http://localhost」 をみると 「TestDB」 が作成され、その中に 「Test1」 の「オブジェクトストア」が存在することが分かります。
（これを見る場合には一旦「ウエブ開発ツール」を閉じてから再度開く必要があります）

尚、ここでデータベース「IDBDatabase」の createObjectStore メソッドに付いて説明します。

// 書式
var obj = IDBDatabase.createObjectStore(name [, options] );
<パラメータ>
・name    ：オブジェクトストア名を文字列で指定します。
・options ：オプションパラメーターとなる属性を持つオプションオブジェクト。
            これは次のプロパティを持つ。

//optionsプロパティ
・keyPath      ：オブジェクトストアの主キー（in-line keys）として使用されるデータ内の項目名。
　　　　     　　空や特定されていない場合 Key Path なしで生成されて out-of-line keys が使用される。
・autoIncrement：trueだった場合、オブジェクトストアはkey generatorを持つ。既定値はfalse。


<戻り値>
obj ：IDBObjectStoreオブジェクト

キーパス (keyPath) と キージェネレータ(autoIncrement) の指定方法の違いによる説明は以下の通りです。

キーパス(keyPath)	キージェネレータ(autoIncrement)	説明
指定なし	指定なし	オブジェクトストアは、数値や文字列といったプリミティブ値を含む、どのような種類の値でも保持できます。新たな値の追加を望むたびに、個別のキー引数を供給しなければなりません。
指定あり	指定なし	ブジェクトストアは、JavaScript オブジェクトのみ保持できます。オブジェクトはキーパスと同じ名称のプロパティを持たなければなりません。
指定なし	指定あり	このオブジェクトストアは、どのような種類の値でも保持できます。キーは自動的に生成されます。また、特定のキーを使用したい場合は個別のキー引数を供給できます。
指定あり	指定あり	このオブジェクトストアは、JavaScript オブジェクトのみ保持できます。通常はキーが生成されて、オブジェクトでキーパスと同じ名称を持つプロパティに、生成されたキーの値を保存します。ただしそのようなプロパティがすでに存在している場合は、生成された新たなキーではなく、そのプロパティの値をキーとして使用します。

（MDN Web Doc より）

さて、ここまでで「データベース」と「ブジェクトストア」の生成が終わりましたので、別の記事でデータ処理に付いて説明を行いたいと思います。

keyPath と autoIncrement の指定ですが keyPath を指定あり autoIncrement を指定なしの指定で今後は進めていきます。（主キーを文字列データで与えてデータ登録を行う感じです。）

■Ajaxを使いPHPからの画像データをcanvasに表示

<html>
<head>
<meta charset="utf-8">
<title>test canvas</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    //イメージオブジェクト
    var img1 = new Image();
    //画像ファイル指定でファイル読込開始
    img1.src = imageFile;

    //画像ロード後に画像を描画できる。
    img1.onload = function(){
        //画像の大きさを設定
        width  = img1.width;
        height = img1.height;
        canvas.attr('width' , width);
        canvas.attr('height', height);
        //画像を描画
        ctx.drawImage(img1, 0, 0, width, height);
    }
    return false;
}
// Base64とMIMEタイプからBlobオブジェクト作成
function toBlob(base64, mimetype) {
    var bin = atob(base64.replace(/^.*,/, ''));
    var arr = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        arr[i] = bin.charCodeAt(i);
    }
    // Blobを作成
    try{
        var blob = new Blob([arr.buffer], { type: mimetype });
    }catch (e){
        return false;
    }
    return blob;
}
//ページロード時イベント
$(function() {
    var file = null; // 選択されるファイル

    // データの取得
    $.ajax({
        type: "POST"
      , url:  "./imagedown.php"
      , data: ""
    }).done(function(res){
        // ajaxがOK
		var data = JSON.parse(res);
        // blobデータ生成
        var blob = toBlob(data.img, data.type);

        //FileReader API
        var reader = new FileReader();
        //ファイルロード終了時イベント宣言
        reader.onload = function(e) {
            //画像表示関数コール
            drawImage(e.target.result);
        };
        //Blobデータ読込の開始
        reader.readAsDataURL(blob);

    }).fail(function(XMLHttpRequest, textStatus, error) {
        // 取得エラー
		alert(error);
    }).always(function() {
        // 後処理(処理することが在れば)
    });
});
</script>
</head>
<body>
    <h2>test canvas4</h2>
    <canvas id="canvas" width="100" height="100" style="border: 1px solid #000000;"></canvas>
    <br />
</body>
</html>

■PHPの画像データダウンロード処理

PHP のプログラムの手順は以下の通りです

file_get_contents 関数でファイルを読込
読込データを base64_encode 関数でBASE64にエンコード
エンコード済みBASE64データと画像タイプを Ajax 用のデータとして準備
json_encode 関数で Ajax に送信

<?php
// ファイル
$file_name = './img1.jpg';  //仮に同一フォルダに「img1.jpg」の画像ファイルを置く
$type = 'image/jpeg';

// base64エンコード
$img = base64_encode(file_get_contents($file_name));
// Ajax応答データ
$list = array("img" => $img, "type" => $type);
// JSONデータを出力
echo json_encode($list);
exit();
?>

今回は HTML のページ読み込み時のタイミングで Ajax で画像を表示する処理を行いました。
手順としては回りくどい処理になっていますが、この方法を使えば別のタイミング、例えばあるボタンやリンクをクリックした時に画像を変更する場合には使えるのではと思います。

単にページに画像を表示するだけならば IMG タグで画像を指定すればできます。
以下にBASE64にエンコードしたデータを直接表示する場合を示します。

■PHPで画像データをBASE64にエンコードしたデータを直接表示

<?php
//ファイル
$file_name = './img1.jpg';
$type = 'image/jpeg';
// base64エンコード
$img = base64_encode(file_get_contents($file_name));
?>
<html>
<head>
<meta charset="utf-8">
<title>test image</title>
</head>
<body>
    <h2>test image</h2>
    <img width="100" src="data:<?php echo $type; ?>;base64,<?php echo $img; ?>" />
    <img width="100" src="<?php echo $file_name; ?>" />
</body>
</html>

VB.NET-TIPS などプログラミングについて

関連する記事

■データ追加処理

関連する記事

■IndexedDB オープンメソッド

■簡単な IndexedDB オープン処理

■オブジェクトストアの生成を伴う IndexedDB オープン処理

関連する記事

■Ajaxを使いPHPからの画像データをcanvasに表示

■PHPの画像データダウンロード処理

■PHPで画像データをBASE64にエンコードしたデータを直接表示

関連する記事

■Google Chart Tools を使い QRコードを表示するHTMLファイル

■ qrcode.js ライブラリのダウンロード

■ qrcode.js ライブラリの使用例

関連する記事

■データ追加処理

関連する記事

■IndexedDB オープンメソッド

■簡単な IndexedDB オープン処理

■オブジェクトストアの生成を伴う IndexedDB オープン処理

関連する記事

■Ajaxを使いPHPからの画像データをcanvasに表示

■PHPの画像データダウンロード処理

■PHPで画像データをBASE64にエンコードしたデータを直接表示

関連する記事

■Google Chart Tools を使い QRコード を表示するHTMLファイル

■ qrcode.js ライブラリのダウンロード

■ qrcode.js ライブラリの使用例

■Google Chart Tools を使い QRコードを表示するHTMLファイル