SQLの窓 イラストAC フリー素材

2019年08月21日

一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする

PHP における標準的なテスト用アップロードのテンプレート に対してアップロードしています。

ファイルのアップロードの PHP 側のインターフェイスに合わせてデータを用意して実行します。
PHP では、エラーの場合ページに文字列が出力されるたけなので、その文字列を検索して結果を判断します。

FileReader を使用して、選択したファイルが画像の場合は img 要素で表示し、それ以外ならば FileReader 由来のファイル名と MIME を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>

<script>

$(function(){

	// ***************************
	// form 送信イベント
	// ***************************
	$("#frm").on("submit", function(event){

		// 本来の処理をキャンセル
		event.preventDefault();

		// 新規送信用オブジェクト
		var formData = new FormData();

		// テストの為、約100K の制限
		formData.append("MAX_FILE_SIZE", 1048576);

		// ファイル
		var uploadData = $("#target").get(0);

		formData.append("target", uploadData.files[0]);

		// オリジナルファイル名
		console.log( uploadData.files[0].name );

		// **************************************
		// サーバ呼び出し
		// **************************************
		$.ajax({
			url: "http://localhost/php/upload/php-upload-basic.php",
			type: "POST",
			data: formData,
			processData: false,  // jQuery がデータを処理しないよう指定
			contentType: false   // jQuery が contentType を設定しないよう指定
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );

			// ajax 対応のページでは無いので、ページ上の文字列を検索して判断する
			if ( data.search(/失敗/) != -1 ) {
				alert("アップロードに失敗しました");
			}

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "code:" + jqXHR.status );
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );

			// エラーメッセージを表示
			alert("システムエラーです");

		})
		.always(function() {
		})
		;

	});

	// *************************************
	// ファイル選択 <input type="file">
	// *************************************
	$("#target").on("change", function(){

		$("#extend").html("");

		var reader = new FileReader();

		reader.name = this.files[0].name;
		reader.type = this.files[0].type;
		
		console.dir(reader);

		reader.refid = "image";

		// FileReader に画像が読み込まれた時のイベント
		$(reader).on("load", function () {
		
			if ( this.type.indexOf("image/") == 0 ) {
				$("<img>").appendTo("#extend")
					.prop( {"src": this.result, "title": this.name, "id": this.refid } )	// title にはオリジナルファイル名
					.css( {"width": "100px", "margin": "10px" } );
			}
			else {
				$("<div>").appendTo("#extend")
					.html( this.name + "<br>" + this.type );
			}
			
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (this.files[0]) {
			reader.readAsDataURL(this.files[0]);
		}

	});
	

});

</script>

</head>
<body>
	<div id="head">
		<form
			id="frm">
		
			<div>
				<input id="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="/php/upload/php-upload-basic.php">GET 再読み込み</a>
			</div>
		 
		</form>
	</div>

	<div id="extend">

	</div>

</body>
</html>





【jQueryの最新記事】
posted by at 2019-08-21 20:00 | jQuery | このブログの読者になる | 更新情報をチェックする

PHP における標準的なテスト用アップロードのテンプレート

1) 一度にアップロードできるファイルは一つです。
2) PHP とおなじ場所にファイルをアップロードします( 本来は場所を変えるべきです )
3) アップロードできる最大サイズは 1048576 バイトです
4) アップロードするファイル名の日本語対応をしないので、uniqid() 関数でファイル名を作成しています
5) 拡張子は、アップロードされたファイルとおなじものを使用しています
6) PHP が $_FILE にセットする MIME が画像の場合は、HTML で画像を表示します
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<title>単純ファイルアップロード</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<style>
#extend {
	white-space: pre;
}
</style>
</head>
<body>
	<div id="head">
		<form 
			enctype="multipart/form-data"
			method="POST">
		
			<div>
				<input name="target" type="file" class="ml-4 btn btn-outline-primary">
				<input type="submit" name="send" value="アップロード" class="ml-4 btn btn-outline-primary">
				<a class="ml-4 btn btn-info" href="<?= $_SERVER["PHP_SELF"] ?>">GET 再読み込み</a>

				<input type="hidden" name="MAX_FILE_SIZE" value="1048576">
			</div>
		 
		</form>
	</div>

	<div id="extend">

<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {

	// 拡張子を得る為に pathinfo
	$path_parts = pathinfo($_FILES['target']['name']);
	$file_name = uniqid() . ".{$path_parts['extension']}";

	// アップロード先の パス
	$upload = realpath("./");
	$upload .= DIRECTORY_SEPARATOR . $file_name;

	// アップロード先の パス の表示
	print "$upload\n";

	// PHP のアップロード処理( 一時ファイルを移動 )
	if ( move_uploaded_file($_FILES['target']['tmp_name'], $upload ) ) {
		print "<p>アップロードに成功しました</p>\n";
	}
	else {
		print "<p>アップロードに失敗しました</p>\n";
	}

	// アップロード情報の表示
	print_r( $_FILES );

	// 画像の場合は HTML で表示
	if ( stristr($_FILES['target']['type'],'image' ) != false  ) {
		print "<img src='{$file_name}'>";
	}
}

?>
	</div>

</body>
</html>





posted by at 2019-08-21 18:22 | PHP | このブログの読者になる | 更新情報をチェックする

IE11 : JScript : Excel.Application で既存の Book を開いてその中のテンプレートシートをコピーして名前を付けて保存する

IE11 の画面上の情報を決められた書式を使用して転送して新たにブックを作成する処理です。

印刷は、Excel を Windows から開いて実行します。

印刷内容は随時変更して自由度の高い業務作業を実現する事ができます。
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>ブックを開いてシートをコピーして使用する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// ****************************
// Excel.Application 用
// ****************************
var Excel = null;
var Book = null;
var Worksheet = null;
var WshShell = new ActiveXObject("WScript.Shell");

$(function(){

	$("#action").on("click", function(){
	
		if ( Excel == null ) {
			// ****************************
			// 基本オブジェクトを作成
			// ****************************
			Excel = new ActiveXObject("Excel.Application");
		}

		// ****************************
		// 表示( テストの時は表示 )
		// ****************************
		Excel.Visible = true;

		// ****************************
		// 警告を出さないようにする
		// 使用すると上書きの警告が
		// 出なくなります
		// ****************************
		Excel.DisplayAlerts = false;

		// ****************************
		// 対象
		// ****************************
		var filePath = "c:\\temp\\test.xlsx";
		var filePath2 = "c:\\temp\\test2.xlsx";

		// ****************************
		// ブックを開く
		// ****************************
		Book = Excel.Workbooks.Open(filePath);

		// ****************************
		// シート名で直前にコピー
		// ****************************
		Book.Sheets("新しい情報").Copy( Book.Sheets("新しい情報") );
		Book.ActiveSheet.Name = "コピーしたシート";
		Book.Worksheets("コピーしたシート").Select();		// 無くても OK
		Worksheet = Book.ActiveSheet;

		// ****************************
		// シート内のセルをコピー
		// ****************************
	    Worksheet.Range("A1:K5").Select();
	    Excel.Selection.Copy();
	    Worksheet.Range("A6").Select();
	    Excel.ActiveSheet.Paste();

		try {
			Book.SaveAs(filePath2);
			Book.Close();
		}
		catch (e) {
			alert("Book.Save でエラーが発生しました");

			console.dir(e);
			ExcelQuit();
			return;
		}

		ExcelQuit();

		// ****************************
		// 終了確認
		// ****************************
		alert("処理が終了しました \n\n 保存したブックを開きます");

		// ****************************
		// Windows からの Excel 起動
		// ****************************
		WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + filePath2 );

	});

});

// ****************************
// 終了処理
// ****************************
function ExcelQuit() {
	Excel.Quit();
	Excel = null;
	idTmr = window.setTimeout("Cleanup();",1);
}
function Cleanup() {
	CollectGarbage();
}
</script>
</head>
<body>
	<div id="head">
		<input id="action" type="button" value="ブックを開いて処理を実行" class="btn btn-primary">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>実行手順概要</th><th>テンプレートシートを使って新しいシートを作成して、新しいブックとして結果を保存</th></tr>
			
			<tr><td>1</td><td>開く</td></tr>
			<tr><td>2</td><td>テンプレートシート名で直前にコピー</td></tr>
			<tr><td>3</td><td>新しいシート名セット</td></tr>
			<tr><td>4</td><td>シート内のセルをクリップボードでコピー</td></tr>
			<tr><td>5</td><td>名前を付けて保存</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>





posted by at 2019-08-21 16:16 | IE | このブログの読者になる | 更新情報をチェックする

IE11 : JScript : Excel.Application で新しい Excel の Book を作成する

Excel.Application は、常にメモリ上に置くのは問題が出ると困るので、実行毎に開放します。

ここで実行している機能は
1) ブックを追加
2) デフォルトシートの名称変更
3) シートを前のシートの後ろにもう一つ追加
4) 列の表示形式の設定
5) ブラウザ上のデータを jQuery で セルに転送
6) セルの表示幅を自動調整
7) 保存
8) Excel の終了と解放
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>新しい Excel の Book を作成する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// ****************************
// Excel.Application 用
// ****************************
var Excel = null;
var Book = null;
var Worksheet = null;
var WshShell = new ActiveXObject("WScript.Shell");

$(function(){

	$("#action").on("click", function(){
	
		if ( Excel == null ) {
			// ****************************
			// 基本オブジェクトを作成
			// ****************************
			Excel = new ActiveXObject("Excel.Application");
		}

		// ****************************
		// 表示( テストの時は表示 )
		// ****************************
		Excel.Visible = true;

		// ****************************
		// 警告を出さないようにする
		// 使用すると上書きの警告が
		// 出なくなります
		// ****************************
		Excel.DisplayAlerts = false;

		// ****************************
		// ブック追加
		// ****************************
		Excel.Workbooks.Add();

		// ****************************
		// 追加したブックを取得
		// ※ 新規なのて 1 番目
		// ****************************
		Book = Excel.Workbooks( Excel.Workbooks.Count );

		// ****************************
		// 先頭シートを選択する
		// ****************************
		Worksheet = Book.Worksheets( 1 );

		// ****************************
		// シート名設定
		// ( アクティブなので直接 )
		// ****************************
		Worksheet.Name = "新しい情報";

		// ****************************
		// Add では 第二引数に指定した
		// オブジェクトのシートの直後に、
		// 新しいシートを追加します。
		// ****************************
		Book.Worksheets.Add(null,Worksheet);

		// ****************************
		// シート名設定
		// ( 2番目のシート )
		// ****************************
		Book.Worksheets(2).Name = "予備情報";

		// ****************************
		// 新しい情報 シートを選択
		// ****************************
		Book.Worksheets("新しい情報").Select();

		// ****************************
		// コード列を文字列に設定
		// ****************************
		Worksheet.Columns("A:A").Select();
	    Excel.Selection.NumberFormatLocal = "@";
		Worksheet.Columns("D:D").Select();
		Excel.Selection.NumberFormatLocal = "@";
		Worksheet.Columns("J:J").Select();
		Excel.Selection.NumberFormatLocal = "@";

		// ****************************
		// セルへセット
		// ****************************
		// タイトル部分の参照
		$("#tbl th").each(function(idx){
			Worksheet.Cells(1, idx+1) = $(this).text();
		});

		// 行一覧の参照
		$("#tbl tr").each(function(row){
			$(this).find("td").each(function(idx){
				Worksheet.Cells(row, idx+1) = $(this).text();
			});
		});

		// ****************************
		// セルをデータに合わせて
		// 整理して左上を選択
		// ****************************
		Worksheet.Columns("A:K").Select();
		Worksheet.Columns("A:K").EntireColumn.AutoFit();
		Worksheet.Range("A1").Select();

		// ****************************
		// 保存
		// 拡張子を .xls で保存するには
		// Call ExcelBook.SaveAs( FilePath, 56 ) とします
		// ****************************
		var filePath = "c:\\temp\\test.xlsx";

		try {
			Book.SaveAs( filePath );
			Book.Close();
		}
		catch (e) {
			alert("Book.SaveAs でエラーが発生しました");

			console.dir(e);
			ExcelQuit();
			return;
		}

		ExcelQuit();

		// ****************************
		// 終了確認
		// ****************************
		alert("処理が終了しました \n\n 保存したブックを開きます");

		// ****************************
		// Windows からの Excel 起動
		// ****************************
		WshShell.Run( "RunDLL32.EXE shell32.dll,ShellExec_RunDLL " + filePath );

	});

});

// ****************************
// 終了処理
// ****************************
function ExcelQuit() {
	Excel.Quit();
	Excel = null;
	idTmr = window.setTimeout("Cleanup();",1);
}
function Cleanup() {
	CollectGarbage();
}
</script>
</head>
<body>
	<div id="head">
		<input id="action" type="button" value="Excel.Application の実行" class="btn btn-primary">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">
			<tr><th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th></tr>
			
			<tr><td>0001</td><td>山田 太郎</td><td>ウラオカ トモヤ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-28</td><td>400000</td><td>9000</td><td>0001</td><td>2012/03/21</td></tr>
			<tr><td>0002</td><td>山村 洋代</td><td>ヤマムラ ヒロヨ</td><td>0003</td><td>1</td><td>2005-06-17</td><td>2005-09-18</td><td>300000</td><td></td><td>0001</td><td>2001/01/02</td></tr>
			<tr><td>0003</td><td>多岡 冬行</td><td>タオカ フユユキ</td><td>0002</td><td>0</td><td>2005-08-14</td><td>2005-11-14</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0004</td><td>高田 冬美</td><td>タカタ フユミ</td><td>0003</td><td>1</td><td>2005-06-13</td><td>2005-10-05</td><td>250000</td><td></td><td>0001</td><td>2001/01/01</td></tr>
			<tr><td>0005</td><td>内高 友之</td><td>ウチタカ トモユキ</td><td>0003</td><td>0</td><td>2005-09-12</td><td>2005-11-10</td><td>150000</td><td></td><td></td><td>2001/01/01</td></tr>

		</tbody>
		</table>

	</div>

</body>
</html>


IE11 のバグの対処方法( 英文 )

BUG: Excel Does Not Shut Down After Calling the Quit Method When Automating from JScript

IE11 の設定








posted by at 2019-08-21 14:16 | IE | このブログの読者になる | 更新情報をチェックする

2019年08月20日

Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する

Firebase の Realtime Database の JSON は、access-control-allow-origin: * を出力するので、どこからでも利用できます。


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		$.ajax({
			url: "https://プロジェクト名-xxxxx.firebaseio.com/syain.json",
			cache: false,
			data: { "name" : $("#sname").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			console.log( "data:" + JSON.stringify(data, null, "    ") );

			// tabble 作成
			loadData( data );

		})
		// 失敗
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );
			console.log( "errorThrown:" + errorThrown );
		})
		// 常に実行
		.always(function() {

		})
		;
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// JSON => table
// **************************************
function loadData( data ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	// 行のループ  ( <tr></tr> )
	$.each(data, function( key, syain ) {

		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}

		var re = new RegExp($("#sname").val());
		if ( syain.name.search(re) != -1  ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );
	
			$("<td></td>").appendTo( row_data ).text( syain.code );
			$("<td></td>").appendTo( row_data ).text( syain.name );
			$("<td></td>").appendTo( row_data ).text( syain.furi );
			$("<td></td>").appendTo( row_data ).text( syain.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (syain.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( syain.kanri );
			$("<td></td>").appendTo( row_data ).text( syain.birthday );
		
		}

		// キーの数
		index++;
	
	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

</body>
</html>




posted by at 2019-08-20 17:52 | JavaScript | このブログの読者になる | 更新情報をチェックする

Firebase に定義した Realtime Database の API を使用して TABLE を作成する

このアプリは問い合わせとして TABLE で 一覧を作成しますが、API を使用すると容易に更新も実行する事が可能です



参考にするべきドキュメント

ウェブ上でデータリストを操作する

Firebase を JavaScript プロジェクトに追加する

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">
<script src="https://lightbox.sakura.ne.jp/demo/number-format.js"></script>

<script>

$(function(){

	// **************************************
	// ボタン
	// **************************************
	$("#load_json").on( "click", function(){

		// データベース参照
		var myFirebaseRef;

		myFirebaseRef = firebase.database().ref('syain');

		myFirebaseRef.once('value', 
			function(snapshot) {

				if ( !snapshot.exists() ) {
					alert( "データが存在しません" );
					return;
				}

				loadData( snapshot );

			},
			function(error){
				console.dir(error);
			}
		);
	
	});

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});

// **************************************
// firebase => table
// **************************************
function loadData( snapshot ) {

	$("#tbl").html("");

	// データ用
	var row_data;

	var index = 0;

	snapshot.forEach(function(data){

		var obj = data.val();
		
		// 初回はタイトル作成
		if ( index == 0 ) {
			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<th></th>").appendTo( row_data ).text( "社員コード" );
			$("<th></th>").appendTo( row_data ).text( "氏名" );
			$("<th></th>").appendTo( row_data ).text( "フリガナ" );
			$("<th></th>").appendTo( row_data ).text( "給与" );
			$("<th></th>").appendTo( row_data ).text( "性別" );
			$("<th></th>").appendTo( row_data ).text( "管理者" );
			$("<th></th>").appendTo( row_data ).text( "生年月日" );

		}
		

		var re = new RegExp($("#sname").val());
		if ( obj.name.search(re) != -1  ) {

			// テーブルに行を追加	
			row_data = $("<tr></tr>").appendTo( "#tbl" );

			$("<td></td>").appendTo( row_data ).text( obj.code );
			$("<td></td>").appendTo( row_data ).text( obj.name );
			$("<td></td>").appendTo( row_data ).text( obj.furi );
			$("<td></td>").appendTo( row_data ).text( obj.kyuyo );
			$("<td></td>").appendTo( row_data ).text( (obj.sex == 0 ? "男性" : "女性"  ) );
			$("<td></td>").appendTo( row_data ).text( obj.kanri );
			$("<td></td>").appendTo( row_data ).text( obj.birthday );

		}
		
		index++;

	});

}
</script>
</head>
<body>
	<div id="head">
		<input type="text" id="sname" name="sname">
		<input type="button" id="load_json" value="検索">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>

<!-- https://firebase.google.com/docs/web/setup?authuser=0#add-sdks_CDN -->

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-database.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#config-web-app -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
// *****************************************
// Firebase より取得した WEB 用 API情報
// *****************************************
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

</body>
</html>

強調部分が Firebase より取得する部分ですが、firebase-database.js の行は追加になります



posted by at 2019-08-20 17:28 | JavaScript | このブログの読者になる | 更新情報をチェックする