リクエスト分散バッチ処理【シンプル版】 | ReqBatchSmp.js

Demo

HTML


	<script src="ReqBatchSmp.js"></script>
	<script src="req_batch_smp.js"></script>
	～ 略 ～

JavaScript(req_batch_smp.js)


	var reqBatch; // ReqBatch.js | リクエスト分散バッチ処理【シンプル版】
	
	$(()=>{
		reqBatch = new ReqBatchSmp();
		var param = {
			div_xid:'req_batch_div',
			interval:300,
			fail_limit:5,
			ajax_url:'req_batch_smp.php',
			data:{
				index:0,
				name:'catdog',
			}
		}
		var callbacks = {
				thread_cb:thread1,
				complete_cb:allEnd,
		}
		reqBatch.init(param, callbacks)
		
	});
	
	
	function thread1(param){
		var data = param.data;
		console.log(param.main_index);
		jQuery('#res').append(data.name + '<br>');
		
		if(param.main_index == 10){
			reqBatch.stopThread();
		}
		
		return param;
	}
	
	
	function allEnd(param){
		jQuery('#res').append("<div class='text-success'>処理が終わった</div>");
		
	}

リクエスト分散バッチ処理

Demo

HTML 

	<script src="ReqBatch.js"></script>
	<script src="batch_processing.js"></script>
	～略～
	<input id="req_batch_start_btn" type="button" value="start" onclick="start()" class="btn btn-success" />

	<!-- リクエスト型バッチ処理・ReqBatch.js -->
	<div id="req_batch_div"></div>
JavaScript | batch_processing.js 

var reqBatch; // ReqBatch.js | リクエストを1件ずつ、実行するバッチ処理

$(()=>{
	reqBatch = new ReqBatch();
	reqBatch.init({
		div_xid:'req_batch_div',
		interval:300,
		fail_limit:5,
		ajax_url:'ajax_req_batch_exe.php',
		asyn_res_cb:response1,
		complete_cb:allEnd
	})
	
});

function start(){
	
	var data = _getSampleData(); // サンプルデータを取得する
	
	// バッチ処理開始
	reqBatch.start(data);
}

function _getSampleData(){
	var data = []
	for(var i=0;i<40;i++){
		var ent = {id:i+1};
		data.push(ent);
	}
	return data;
}

function response1(param){
	jQuery('#res').append(param.name + '<br>');
}

function allEnd(){
	jQuery('#res').append("<div class='text-success'>処理が終わった</div>");
	
}

画面間におけるローカルストレージの値共有を検証する

ローカルストレージはキーが同じなら複数画面で共有される。
複数ページで共有したくない場合、URLをキーすると良い。 参考：ローカルストレージのキーにURLを用いる
Demo

HTML 

	<input id="text1" type="text"  /><br>
	<input type="button" value="ローカルストレージに保存" onclick="save()" class="btn btn-success btn-xs" />
	<input type="button" value="ローカルストレージから読取" onclick="read()" class="btn btn-primary btn-xs" />
	<div id="res" class="text-success"></div>
	<a href="page2.html">ページ2へ（値共有の確認）</a><br>
	<br>
JavaScript 

	function save(){
		var text = $('#text1').val();
		localStorage.setItem("key1", text);
		$('#res').append('ローカルストレージに保存しました。<br>');
	}
	
	function read(){
		var text = localStorage.getItem("key1");
		$('#text1').val(text);
		$('#res').append('ローカルストレージから読み取りました。<br>');
	}

ローカルストレージのキーにURLを用いる

Demo


	function save2(){
		var text = $('#text1').val();
		var url = location.href; // 現在ページのURLを取得
		var url = url.split(/[?#]/)[0]; // クエリ部分を除去
		localStorage.setItem(url, text);
		$('#res').append('ローカルストレージに保存しました。【検証2】<br>');
	}
	
	function read2(){
		var url = location.href; // 現在ページのURLを取得
		var url = url.split(/[?#]/)[0]; // クエリ部分を除去
		var text = localStorage.getItem(url);
		$('#text1').val(text);
		$('#res').append('ローカルストレージから読み取りました。【検証2】<br>');
	}

全角を半角に変換する


	/**
	 * 全角を半角に変換する
	 * @param string str 全角文字
	 * @return string 半角文字
	 */
	_toHalfWidth(str) {
		return str.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, (s) => {
			return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		});
	}

手入力数値の数値化および入力チェック | 全角数値を半角数値に変換

Demo


		/**
	 * 手入力数値の数値化および入力チェック | 全角数値を半角数値に変換
	 * 
	 * @note
	 * 負数にも対応するが全角ハイフン「－」には対応しない。半角ハイフンのみ。
	 * 小数値にも対応。
	 * 
	 * @param mixed num_text 数値テキスト
	 * @param bool req 必須チェックフラグ true(デフォ）:必須
	 * @return int 数値 or エラー文字列
	 */
	function _numericizeAndCheck(num_text, req){
		
		if(req==null) req = true; // 必須チェックフラグ
		
		// 空文字判定
		if(num_text == null || num_text === '' || num_text === false){
			if(req == true){
				return "必須入力です。";
			}else{
				return 0;
			}
		}
	
		num_text += ''; // 文字列扱いにする
		
		// 全角を半角にする
		num_text = num_text.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, (s) => {
			return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
		});
		
		num_text = num_text.trim();
		
		// 整形後の空文字判定
		if(num_text === ''){
			if(req == true){
				return "必須入力です。";
			}else{
				return 0;
			}
		}

		if(isNaN(num_text)){
			return "数値を入力してください。";
			return;
		}
		
		num_text = num_text * 1; // 数値化する
		
		return num_text;
	}

移動範囲を要素内に限定したドラッグ | jQuery UI Draggable

Demo

HTML 

	<div id="test1" style="width:640px;height:480px;background-color:#BECDA9">
		<div id="test2" style="width:64px;height:48px;background-color:#DC8490">Drag</div>
	</div>

JavaScript 

	jQuery( ()=> {
		jQuery( '#test2' ).draggable( {
			containment: '#test1',
			scroll: false,
		} );
	} );

小数点以下の桁数を固定する | n.toFixed(4)

「n.toFixed(x)」で取得される値は文字列になるので注意すること。
	let n = 123.456;
	let str = n.toFixed(4); // →123.4560
	
	let n2 = 123;
	let str2 = n2.toFixed(4); //→ 123.0000
	
	let n3 = 123.456789;
	let str3 = n3.toFixed(4); //→ 123.4568 (四捨五入で丸められる)

金額3桁カンマ区切り | Number(value).toLocaleString();


	let value = 1000;
	value = Number(value).toLocaleString(); // 1,000

QRコード作成 | jQuery.qrcode.js

「jQuery.qrcode.js」ライブラリによりQRコードの作成が可能。
GitHub⇒jQuery.qrcode.jsの入手先

ソースコード

HTML 

		<div id="output"></div>
JavaScript 

	jQuery('#output').qrcode({
			width:100,
			height:100,
			text: "http://amaraimusi.sakura.ne.jp/",
	});
Demo

Div要素内のコンテンツを画像化する | html2canvas.js

Demo 公式

html2canvas.jsはDIV要素のコンテンツをキャプチャーして画像化することができる。

2020年の8月のバージョンでは、ブラウザのスクロールによってキャプチャー範囲がずれこむという問題がある。
なのでスクロールをリセットしたり、scrollX,scrollYで細かな位置調整を施す必要がある。

HTML 
		<script src="html2canvas.min.js"></script>
		～ 略 ～
		
		<input type="botton" value="TEST0" class="btn btn-success" onclick="test0()"/>
		<input type="botton" value="画像化する" class="btn btn-success" onclick="test1()"/>
		
		<div id="div1" style="display:block;border:1px solid #19a15f;width:600px;" >
			<p>サンプルDiv要素</p><br>
			<img src="imori.jpg" alt="" style="width:550px"/>
			<div style="padding:20px;">
			では，当時生み出していたのはどんな実でしたか。
			皆さんが今では恥じている事柄です。それらの行き着く先は死です。 
			しかし，今や皆さんは罪から自由にされて神の奴隷になったので，神聖な生き方という実を生み出しています。
			行き着く先は永遠の命です。 23 罪の代償は死ですが，神が与える贈り物は，私たちの主であるキリスト･イエスによる永遠の命なのです。
			</div>
		
			<br><time>2020-1-1</time>
		</div>
		
		<div style="padding:20px;background-color:#e2e1e0">
			画像<br>
			<img id="img1"  />
		</div>

JavaScript 

// 検証0
function test0(){
	window.scrollTo(0, 0); // スクロールをリセット
	html2canvas(document.querySelector("#div1")).then(canvas => {
		document.body.appendChild(canvas)
	});
	
}

// 検証1
function test1(){
	window.scrollTo(0, 0); // スクロールをリセットする必要がある。
	let targetElm = jQuery("#div1");
	let w = targetElm.outerWidth();
	let h =  targetElm.outerHeight();
	
	html2canvas(targetElm[0],{width:w,height:h,scrollX:-8.5,scrollY:0}).then(canvas => {
		
		let imgElm = jQuery('#img1');
		imgElm.width(w);
		imgElm.height(h);
		imgElm[0].src = canvas.toDataURL("image/png");
		
	});

}

  1. ホーム
  2. プログラミングの覚書
  3. JavaScriptの覚書
  4. JavaScriptの覚書