SQLの窓

2017年11月30日


Gmail で添付できないファイルをエクスプローラで検索する為の文字列

Gmail のヘルプにあります(ブロックされるファイル形式)が、そこに書かれている拡張子を持つファイルがあるかどうかを確認する為、エクスプローラの右上で使用する検索用のワイルドカードの文字列が以下のようになります
*.ade OR *.adp OR *.bat OR *.chm OR *.cmd OR *.com OR *.cpl OR *.exe OR *.hta OR *.ins OR *.isp OR *.jar OR *.js OR *.jse OR *.lib OR *.lnk OR *.mde OR *.msc OR *.msi OR *.msp OR *.mst OR *.nsh OR *.pif OR *.scr OR *.sct OR *.shb OR *.sys OR *.vb OR *.vbe OR *.vbs OR *.vxd OR *.wsc OR *.wsf OR *.wsh NOT json

最後の NOT json は、*.js で .json が対象になってしまうので、さらにフィルタをかけた形になります。

Android Studio のプロジェクトの場合だと以下のようにすれば良いと思います 






posted by lightbox at 2017-11-30 17:33 | Google | このブログの読者になる | 更新情報をチェックする

2016年10月03日


jQuery で既存 table より Firebase Database のデータを作成する

サンプルページ


このページでは実際には更新できませんが、自分のスニペットをコピーして貼り付けて使用すると更新できます。このデータは Wikipedia にあるテーブルをデベロッパーツールでコピーして貼り付けたものです。欲しい行を限定したい場合は、先頭の TD に class="result" を入れておくというスタイルです。

二番目の処理は、TR の中に TD が無いので、JSON の中に jojo0 は作成されますが、値が空のオブジェクトとなるのでデーターベースにデータは作成されません

更新部分のソースコード
<script>

var jojo = { };

$(function(){

	$("#update1").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$(".result").each( function( idx ){
			
				jojo["jojo" + (idx+1) ] = {};
				
				$(this).parent().find("td").each( function( idx2 ){
				
					jojo["jojo" + (idx+1) ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

	$("#update2").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$("tr").each( function( idx ){
			
				jojo["jojo" + idx ] = {};
				
				$(this).find("td").each( function( idx2 ){
				
					jojo["jojo" + idx ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

	$("#update3").on("click",function(){
		
		if ( confirm( config.authDomain + "へ更新しますか? \n(ルールで更新を許す必要があります)" ) ) {

			$("tr").each( function( idx ){
			
				jojo["jojo" + idx ] = {};
				
				$(this).find("td,th").each( function( idx2 ){
				
					jojo["jojo" + idx ]["data" + idx2] = $(this).text();
				
				} );
				
			
			} );
			
			firebase.database().ref("jojo").set(jojo).then(
					function(){
						alert( "更新に成功しました" );
					}
			);

		}
	});

});

</script>
※ データベースルールを書き込み可能にしておく必要があります


タグ:jquery Firebase
posted by lightbox at 2016-10-03 02:17 | Google | このブログの読者になる | 更新情報をチェックする

jQuery + Bootstrap(css) + mmenu : Firebase Database 参照と更新サンプル( 新規登録テンプレートより )

デモ( ログインはハンバーガメニューより選んで下さい )
 
※ 実際の更新はできません



新規登録テンプレートを元に、クラスメンバを修正する2会話のアプリケーションのサンプルです。新規登録と違う所は殆ど無く、データの存在チェックで内容を表示しています。
			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', 
				function(snapshot) {

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

					// 第二会話へ変更
					options.pass2();

					// フォーカス
					if ( !$.isMobile ) {
						$("#row2_fld").focus();
					}

					var user_data = snapshot.val();
		
					$("#row2_fld").val(user_data.name);
					$("#row3_fld").val(user_data.furi);
					$("#row4_fld").val(user_data.kyuyo);
					$("#row5_fld").val(user_data.sex);
					$("#row6_fld").prop( "checked", user_data.kanri );

				},
				function(error){
					$(".result").each(function(){
						$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
					});
					options.error( "Firebase エラーです" );

					console.dir(error);
				}
			);
※ データの更新は、新規も修正も同じです。

左の画像は、toastr.js で表示されたエラーメッセージを表示したところですが、PC の場合は、ページ上部の中央に表示されます。

右の画像は、HTML の pattern 属性によるチェックが行われ、メッセージが表示されています。

データフォーマット



ソースコード

ダウンロードパッケージの中は、php としてテンプレート化されています。メインのコードは、view_main.php で、index.php から読み込まれます。
<?php
// *************************************
// セッション変数
// *************************************
session_start();

// *************************************
// ブラウザに対する指示
// *************************************
header( "Content-Type: text/html; charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "x-ua-compatible: IE=11" );

require_once("view_main.php");
?>


view_main.php
<?php
// *************************************
// 表示コントロール
// *************************************
$GLOBALS['title'] = "2会話・テンプレート(修正)";
$GLOBALS['comment'] = 'ようこそ jQuery + Bootstrap(css) + mmenu + Firebase';

?>
<!DOCTYPE html>
<html lang="ja">
<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><?= $GLOBALS['title'] ?></title>

<?php require_once('../std/libs.php') ?>

<link rel="stylesheet" href="../std/mmenu.css">
<link rel="stylesheet" href="../std/basic.css">

<?php require_once('../std/firebase.php') ?>

<style>
.fields {
	width: 90px;
	font-size: 12px;
	vertical-align: middle!important;
}

legend {
	font-size: 18px;
	padding-left: 6px;
}
</style>

<script>
<?php require_once('../std/js.php') ?>
var options = {
	key : { title :"クラス", css : { width : "100px" }, attr : { pattern : "[0-9]+", type: "tel" } },
	row2 : { title : "氏名"  },
	row3 : { title : "フリガナ"  },
	row4 : { title : "給与", attr : { pattern : "[0-9]+", type: "tel" } },
	row5 : { title : "性別", css : { height : "40px" } },
	row6 : { title : "管理者", label : "部下の有無"  },
	row_last : { title :"メッセージ" },
	erow1 : { title : "code"  },
	erow2 : { title : "message"  },

	curbtn: "",
	pass1 : function(){
		// 第一会話へ変更
		$("#form_head").prop("disabled", false );
		$("#form_body").prop("disabled", true );
	},
	pass2 : function(){
		// 第二会話へ変更
		$("#form_head").prop("disabled", true );
		$("#form_body").prop("disabled", false );
	},
	clear : function(){
		// 全てクリア
		$(".fields").next().find("input[type='text'],input[type='tel']").val("");
		$(".fields").next().find("input[type='checkbox']").prop("checked", false);
		$(".fields").next().find("select").prop("selectedIndex", 0);
	},
	error : function(message){
		$("#row_last").next().text( message );
		toastr.error(message);
	},
	info : function(message){
		$("#row_last").next().text( message );
		toastr.success(message);
	}
};

$(function(){

	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		if ( options[ $(this).prop("id") ] ) {
			$(this).text( options[ $(this).prop("id") ].title );
			// 個別 css
			if ( options[ $(this).prop("id") ].css ) {
				$(this).next().find("input,select").css( options[ $(this).prop("id") ].css );
			}
			// 入力チェック用属性
			if ( options[ $(this).prop("id") ].attr ) {
				$(this).next().find("input,select").attr( options[ $(this).prop("id") ].attr );
			}
			// 行内個別 ラベル
			if ( options[ $(this).prop("id") ].label ) {
				$(this).next().find("label").text( options[ $(this).prop("id") ].label );
			}
		}
		// Bootstrap form
		$(this).next().find("input,select").addClass("form-control");
	});
	// スマホでロード時の処理のチラつき防止用
	$("#wrapper").css("visibility","visible"); 

	// 第一会話
	options.pass1();

	// 初期フォーカス
	setTimeout( function(){$('#key_fld').focus();}, 100 );

	// 確認処理
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 確認ボタン
		if ( options.curbtn == "button_head" ) {

			// **************************************
			// 第一会話入力チェック
			// **************************************
			if ( $("#key_fld").val().trim() == "" ) {
				options.error( options['key'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );
				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', 
				function(snapshot) {

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

					// 第二会話へ変更
					options.pass2();

					// フォーカス
					if ( !$.isMobile ) {
						$("#row2_fld").focus();
					}

					var user_data = snapshot.val();
		
					$("#row2_fld").val(user_data.name);
					$("#row3_fld").val(user_data.furi);
					$("#row4_fld").val(user_data.kyuyo);
					$("#row5_fld").val(user_data.sex);
					$("#row6_fld").prop( "checked", user_data.kanri );

				},
				function(error){
					$(".result").each(function(){
						$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
					});
					options.error( "Firebase エラーです" );

					console.dir(error);
				}
			);

		}

		// 更新ボタン
		if ( options.curbtn == "button_body" ) {

			// **************************************
			// 第ニ会話入力チェック
			// **************************************
			if ( $("#row2_fld").val().trim() == "" ) {
				options.error( options['row2'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );

				alert("第一会話へ移動します");

				// 第一会話へ変更
				options.pass1();

				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', function(snapshot) {

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

					alert("第一会話へ移動します");

					// 第一会話へ変更
					options.pass1();

					return;
				}

				if ( !confirm("更新してよろしいですか?") ) {
					return false;
				}

				// **************************************
				// 更新
				// **************************************
				// 更新用 JSON
				var update_data = {
					"code" : $("#key_fld").val(),
					"name" : $("#row2_fld").val(),
					"furi" : $("#row3_fld").val(),
					"kyuyo" : $("#row4_fld").val(),
					"sex" : $("#row5_fld").val(),
					"kanri" : $("#row6_fld").prop("checked")
				}
				// 更新
				myFirebaseRef.set(update_data).then(
					function(){

						options.info( "更新に成功しました" );

						// 第一会話へ変更
						options.pass1();

						// 全てクリア
						options.clear();

						// フォーカス
						$("#key_fld").focus();

					},
					function(error){
						$(".result").each(function(){
							$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
						});
						options.error( "Firebase エラーです" );

						console.dir(error);
					}
				);

			});

		}

	} );

	// **************************************
	// mmenu
	// **************************************
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});


});

</script>
</head>
<body>

<div id="wrapper">
<script>
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css( "visibility", "hidden" );
</script>

	<div id="head">
		<?php require_once('../std/view_hamburger.php') ?>
		<div id="title"><?= $GLOBALS['title'] ?></div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<fieldset id="form_head">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="key"></td>
						<td>
							<div class="input-group">
								<input type="text" id="key_fld" name="key_fld">
								<button id="button_head" type="submit" class="btn btn-primary btn-sm m-l" onclick="options.curbtn=this.id">確認</button>
							</div>
						</td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset id="form_body">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input type="text" id="row2_fld" name="row2_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row3"></td>
						<td>
							<input type="text" id="row3_fld" name="row3_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row4"></td>
						<td>
							<input type="text" id="row4_fld" name="row4_fld">
						</td>
					</tr>

					<tr>
						<td class="fields" id="row5"></td>
						<td>
							<select name="row5_fld" id="row5_fld">
								<option value="0">男性</option>
								<option value="1">女性</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="fields" id="row6"></td>
						<td>
							<div class="input-group">
								<label for="row6_fld">有り無し</label>
								<input
									type="checkbox"
									id="row6_fld"
									name="row6_fld">
							</div>
						</td>
					</tr>

					<tr>
						<td></td>
						<td>
							<button id="button_body" type="submit" class="btn btn-primary btn-sm" onclick="options.curbtn=this.id">更新</button>
							<button
								type="button"
								class="btn btn-primary btn-warning btn-sm m-l-lg"
								value="キャンセル"
								 onclick='location="index.php"'>キャンセル</button>
						</td>
					</tr>


					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset>
				<legend>Firebase エラー</legend>
				<table class="table table-condensed">

					<tr><td class="fields result error" id="erow1"></td><td></td></tr>
					<tr><td class="fields result error" id="erow2"></td><td></td></tr>

				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	<?= $GLOBALS['comment'] ?>
	</div>

</div>


<?php require_once('unit_menu.php') ?>


</body>
</html>


minimum-scale=1.0 maximum-scale=1.0 user-scalable=no は、スマホで mmenu を表示する場合に必要です。

25行目の width: 90px; で、フィールドのタイトル幅が決定します。

options.curbtn は、submit ボタンが submit 前に click イベントで自身の id をセットし、どのボタンで submit されたか判定する為にあります。(314行 と 371行)

スマホでのロード時のちらつきを、$("#wrapper").css( "visibility", "hidden" ); で、画面表示を消していますが、JavaScript が無効の場合に画面がなくならないように、JS で非表示にしています。元々、addClass("form-control"); を後から jQuery  で設定する為に発生するちらつきですが、画面定義に一様にクラス設定してしまうと汎用性に欠けると思ったのでそうしました。

関連する記事

jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート

jQuery + Bootstrap(css) + mmenu : Firebase 新規登録テンプレート




posted by lightbox at 2016-10-03 00:33 | Google | このブログの読者になる | 更新情報をチェックする

2016年10月02日


jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート

2019/10/02 : テンプレートを変更しました

1) toastr.js を追加し、それに伴ってメッセージ表示をメソッド化して options に追加しました。

2) iPhone5 のサイズに合わせて、入力フィールドのタイトル幅を 90px に変更しました。
2019/10/01 : テンプレートを変更しました

1) HTML のチェックを使用できるように、form の submit イベントで処理した上で、submit しないようにしています。

2) options に、画面コントロール用の共通関数を追加しました

3) スマホ画面でちらつかないように、初期画面を非表示にして画面作成完了後に表示するようにしました

4) JavaScript のモバイルチェックを追加し、スマホで画面が隠れるフォーカス処理はしないようにしました。

5) ソースコードのインデントを減らし、可読性を上げる為に、エラーチェック等ではすぐ脱出するようにして、else をなくすようにしました。
デモページ ※ 0001 のデータが存在しています ▼ 以下のテンプレートのデモページでログインして、更新以外をテストできます jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート このログインユーザは Database のルールで更新できないようにしています。この設定は、コンソールから直接 check ツリーのデータを変更する事によって、更新可能へと変更できます。
{
  "rules": {
      ".read": "root.child('check').hasChild(auth.uid)",
      ".write": "root.child('check').child(auth.uid).child('isAdmin').val() == true"
    }
}



テンプレートの構造と機能の概要を印刷する PDF

ソースコード

<!DOCTYPE html>
<html lang="ja">
<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>2会話・テンプレート(新規)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/css/jquery.mmenu.all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>

<link rel="stylesheet" href="../std/mmenu.css">
<link rel="stylesheet" href="../std/basic.css">

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyD9vub84g_ckSvglTzMdLjXe1TV6WC8LCo",
    authDomain: "lightbox-1c915.firebaseapp.com",
    databaseURL: "https://lightbox-1c915.firebaseio.com",
    storageBucket: "lightbox-1c915.appspot.com",
    messagingSenderId: "694762121907"
  };
  firebase.initializeApp(config);
</script>

<style>
.fields {
	width: 90px;
	font-size: 12px;
	vertical-align: middle!important;
}

legend {
	font-size: 18px;
	padding-left: 6px;
}
</style>

<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options={"closeButton":false,"debug":false,"newestOnTop":false,"progressBar":false,"positionClass":"toast-bottom-center","preventDuplicates":false,"onclick":null,"showDuration":"300","hideDuration":"1000","timeOut":"3000","extendedTimeOut":"1000","showEasing":"swing","hideEasing":"linear","showMethod":"fadeIn","hideMethod":"fadeOut"}
if ( !$.isMobile ) {
	toastr.options.positionClass = "toast-top-center";
}
var options = {
	key : { title :"キー項目", css : { width : "80px" }, attr : { pattern : "[0-9]+", type: "tel" } },
	row2 : { title : "明細A"  },
	row3 : { title : "明細B"  },
	row4 : { title : "明細C", attr : { pattern : "[0-9]+", type: "tel" }  },
	row5 : { title : "選択", css : { height : "40px" } },
	row6 : { title : "チェック"  },
	row_last : { title :"メッセージ" },
	erow1 : { title : "code"  },
	erow2 : { title : "message"  },

	curbtn: "",
	pass1 : function(){
		// 第一会話へ変更
		$("#form_head").prop("disabled", false );
		$("#form_body").prop("disabled", true );
	},
	pass2 : function(){
		// 第二会話へ変更
		$("#form_head").prop("disabled", true );
		$("#form_body").prop("disabled", false );
	},
	clear : function(){
		// 全てクリア
		$(".fields").next().find("input[type='text'],input[type='tel']").val("");
		$(".fields").next().find("input[type='checkbox']").prop("checked", false);
		$(".fields").next().find("select").prop("selectedIndex", 0);
	},
	error : function(message){
		$("#row_last").next().text( message );
		toastr.error(message);
	},
	info : function(message){
		$("#row_last").next().text( message );
		toastr.success(message);
	}
};

$(function(){

	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		if ( options[ $(this).prop("id") ] ) {
			$(this).text( options[ $(this).prop("id") ].title );
			// 個別 css
			if ( options[ $(this).prop("id") ].css ) {
				$(this).next().find("input,select").css( options[ $(this).prop("id") ].css );
			}
			// 入力チェック用属性
			if ( options[ $(this).prop("id") ].attr ) {
				$(this).next().find("input,select").attr( options[ $(this).prop("id") ].attr );
			}
		}
		$(this).next().find("input,select").addClass("form-control");
	});
	// スマホでロード時の処理のチラつき防止用
	$("#wrapper").css("visibility","visible"); 

	// 第一会話
	options.pass1();

	// 初期フォーカス
	setTimeout( function(){$('#key_fld').focus();}, 100 );

	// 確認処理
	$("#frm").submit( function(event){
		// 本来の送信処理はキャンセル
		event.preventDefault();

		// エラーメッセージエリアをクリア
		$(".error").next().text( "" );

		// 確認ボタン
		if ( options.curbtn == "button_head" ) {

			// **************************************
			// 第一会話入力チェック
			// **************************************
			if ( $("#key_fld").val().trim() == "" ) {
				options.error( options['key'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );
				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', 
				function(snapshot) {

					if ( snapshot.exists() ) {
						options.error( "データが既に存在します" );
						return;
					}

					// 第二会話へ変更
					options.pass2();

					// フォーカス
					if ( !$.isMobile ) {
						$("#row2_fld").focus();
					}

				},
				function(error){
					$(".result").each(function(){
						$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
					});
					options.error( "Firebase エラーです" );

					console.dir(error);
				}
			);

		}

		// 更新ボタン
		if ( options.curbtn == "button_body" ) {

			// **************************************
			// 第ニ会話入力チェック
			// **************************************
			if ( $("#row2_fld").val().trim() == "" ) {
				options.error( options['row2'].title + " を入力して下さい" );
				return;
			}

			// **************************************
			// Firebase ログインチェック
			// **************************************
			user = firebase.auth().currentUser;
			if ( user == null ) {
				options.error( "ログインされていません" );

				alert("第一会話へ移動します");

				// 第一会話へ変更
				options.pass1();

				return;
			}

			// データベース参照
			var myFirebaseRef = firebase.database().ref('class/' + $("#key_fld").val() );

			// **************************************
			// データ存在チェック
			// **************************************
			myFirebaseRef.once('value', function(snapshot) {

				if ( snapshot.exists() ) {
					options.error( "データが既に存在します" );

					alert("第一会話へ移動します");

					// 第一会話へ変更
					options.pass1();

					return;
				}

				if ( !confirm("更新してよろしいですか?") ) {
					return false;
				}

				// **************************************
				// 更新
				// **************************************
				// 更新用 JSON
				var update_data = {
					"code" : $("#key_fld").val(),
					"name" : $("#row2_fld").val(),
					"furi" : $("#row3_fld").val()
				}
				myFirebaseRef.set(update_data).then(
					function(){

						options.info( "更新に成功しました" );

						// 第一会話へ変更
						options.pass1();

						// 全てクリア
						options.clear();

						// フォーカス
						$("#key_fld").focus();

					},
					function(error){
						$(".result").each(function(){
							$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
						});
						options.error( "Firebase エラーです" );

						console.dir(error);
					}
				);

			});

		}

	} );

	// **************************************
	// mmenu
	// **************************************
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});


});

</script>
</head>
<body>

<div id="wrapper">
<script>
// スマホでロード時の処理のチラつき防止用
$("#wrapper").css( "visibility", "hidden" );
</script>

	<div id="head">
		<a id="hamburger" href="#mmenu_left">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
		<div id="title">2会話・テンプレート(新規)</div>
	</div>

	<div id="body">
		<form id="frm" class="form-inline">

			<fieldset id="form_head">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="key"></td>
						<td>
							<div class="input-group">
								<input type="text" id="key_fld" name="key_fld">
								<button id="button_head" type="submit" class="btn btn-primary btn-sm m-l" onclick="options.curbtn=this.id">確認</button>
							</div>
						</td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset id="form_body">
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input type="text" id="row2_fld" name="row2_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row3"></td>
						<td>
							<input type="text" id="row3_fld" name="row3_fld">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row4"></td>
						<td>
							<input type="text" id="row4_fld" name="row4_fld">
						</td>
					</tr>

					<tr>
						<td class="fields" id="row5"></td>
						<td>
							<select name="row5_fld" id="row5_fld">
								<option value="27">大阪</option>
								<option value="26">京都</option>
								<option value="29">奈良</option>
							</select>
						</td>
					</tr>

					<tr>
						<td class="fields" id="row6"></td>
						<td>
							<div class="input-group">
								<label for="row6_fld">有り無し</label>
								<input
									type="checkbox"
									id="row6_fld"
									name="row6_fld">
							</div>
						</td>
					</tr>

					<tr>
						<td></td>
						<td>
							<button id="button_body" type="submit" class="btn btn-primary btn-sm" onclick="options.curbtn=this.id">更新</button>
							<button
								type="button"
								class="btn btn-primary btn-warning btn-sm m-l-lg"
								value="キャンセル"
								 onclick='location="index.php"'>キャンセル</button>
						</td>
					</tr>


					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>
			
				</table>

			</fieldset>

			<fieldset>
				<legend>Firebase エラー</legend>
				<table class="table table-condensed">

					<tr><td class="fields result error" id="erow1"></td><td></td></tr>
					<tr><td class="fields result error" id="erow2"></td><td></td></tr>

				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	ようこそ jQuery + Bootstrap(css) + mmenu + Firebase	</div>

</div>


<div id="mmenu_left">
<ul>
	<li class="mm_user_title">ページ選択</li>
	<li><a class="mm_link_left" href="#" onclick="location='index.php';void(0)">リセット</a></li>
	<li><a class="mm_link_left" href="https://lightbox.sakura.ne.jp/demo/firebase/static/pass1/index.php">ログイン</a></li>
	<li><a class="mm_link_left" href="#" onclick="firebase.auth().signOut()">ログアウト</a></li>
	<li><a class="mm_link_left" 
			href="http://getbootstrap.com/css/"
			onclick="location='index.php';void(0)"
			target="_blank"
		>Bootstrap(css)</a></li>
	<li><a class="mm_link_left"
			href="http://api.jquery.com/"
			onclick="location='index.php';void(0)"
			target="_blank"
		>jQuery ドキュメント</a></li>
</ul>
</div>


</body>
</html>


関連する記事

jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート



posted by lightbox at 2016-10-02 22:31 | Google | このブログの読者になる | 更新情報をチェックする

2016年10月01日


jQuery + Bootstrap(css) + mmenu : Firebase ログインテンプレート

2016/10/01 : IE 用に 縦スクロールバー用の設定を basic.css に追加しました
デモページ Bootstrap の css 部分のみ使用しています。なので、スマホでそのまま大差無く使用可能です。他ページへの移動や簡単な処理オプションの為、mmenu を使用して、スマホでも動作します。
ログイン情報の保持について Firebase の ログイン情報は localStorage に保存される為、ブラウザを閉じてもログインは保持されます。 テンプレートの mmenu と ハンバーガーアイコン部分 直接の動作とは関係無いので省いても問題はありません ( ソースコードの 13 〜 14 行, 118 〜 129 行, 142 〜 146 行, 220 〜 235 行 ) Firebase 実装部分 自分のコントロールパネルから『ウェブアプリに Firebase を追加』で取得可能な firebase.js と firebase.initializeApp( config ) 部分を該当部分に貼り付け直すだけです。 ( ソースコードの 17 〜 28 行 ) テンプレートの構造と機能の概要を印刷する PDF テンプレートの構造と機能の概要を印刷する PDF(ソースコードレベル) ソースコード

<!DOCTYPE html>
<html lang="ja">
<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>1会話・テンプレート(ログイン)</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link id="link" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/css/jquery.mmenu.all.css">
<link rel="stylesheet" href="std/mmenu.css">
<link rel="stylesheet" href="std/basic.css">

<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyD9vub84g_ckSvglTzMdLjXe1TV6WC8LCo",
    authDomain: "lightbox-1c915.firebaseapp.com",
    databaseURL: "https://lightbox-1c915.firebaseio.com",
    storageBucket: "lightbox-1c915.appspot.com",
    messagingSenderId: "694762121907"
  };
  firebase.initializeApp(config);
</script>

<style>
.fields {
	width: 120px;
	font-size: 12px;
	vertical-align: middle!important;
}

legend {
	font-size: 18px;
	padding-left: 6px;
}
</style>

<script>
var options = {
	row1 : { title : "ユーザ", css: { "background-color": "azure", "font-weight": "bold" }  },
	row2 : { title : "パスワード"  },
	row3 : { title : ""  },
	row_last : { title :"メッセージ" },
	rrow1 : { title : "uid"  },
	rrow2 : { title : "email"  },
	rrow3 : { title : "emailVerified"  },
	rrow4 : { title : "displayName"  },
	rrow5 : { title : "isAnonymous"  },
	erow1 : { title : "code"  },
	erow2 : { title : "message"  }
};
var login_user_info = null;

$(function(){

	// 1) options による行とフィールドの設定
	// 2) Bootstrap 用 form-control クラスの追加
	$(".fields").each(function(){
		$(this).text( options[ $(this).prop("id") ].title );
		if ( options[ $(this).prop("id") ].css ) {
			$(this).next().find("input,select").css( options[ $(this).prop("id") ].css );
		}
		$(this).next().find("input,select").addClass("form-control");
	});


	// 初期フォーカス
	setTimeout( function(){$('#row1_fld').focus();}, 100 );

	// ログイン処理
	$("#login").on("click", function(){

		// 結果の表示エリアを全てクリア
		$(".result").next().text( "" );

		// 入力チェック
		if ( $("#row1_fld").val().trim() == "" ) {
			$("#row_last").next().text("ユーザを入力して下さい");
			return;
		}

		// **************************************
		// Firebase ログイン
		// **************************************
		var auth = firebase.auth();
		auth.signInWithEmailAndPassword($("#row1_fld").val(), $("#row2_fld").val())
		.then(
			// ログイン成功
			function( user ) {
				login_user_info = user;

				$(".result").each(function(){
					$(this).next().text( user[ options[ $(this).prop("id") ].title ] );
				});

				console.dir( user );

			},
			// ログイン失敗
			function( error ) {

				error["メッセージ"] = "ログインに失敗しました";

				$(".error").each(function(){
					$(this).next().text( error[ options[ $(this).prop("id") ].title ] );
				});

				console.dir( error );
			}
		);
	} );

	// **************************************
	// mmenu
	// **************************************
	$("#mmenu_left").mmenu({
		navbar: {
			title: "メニュー"
		},
		offCanvas: {
			position  : "left",
			zposition : "next"
		}
	});


});

</script>
</head>
<body>

<div id="wrapper">

	<div id="head">
		
<a id="hamburger" href="#mmenu_left">
	<span class="top-bar"></span>
	<span class="middle-bar"></span>
	<span class="bottom-bar"></span>
</a>
		<div id="title">1会話・テンプレート(ログイン)</div>
	</div>

	<div id="body">
		<form class="form-inline">

			<fieldset>
				<legend>ログイン</legend>
				<table class="table table-condensed">
			
					<tr>
						<td class="fields" id="row1"></td>
						<td>
							<input type="text" id="row1_fld" name="row1_fld" value="abc@test.jp">
						</td>
					</tr>
					<tr>
						<td class="fields" id="row2"></td>
						<td>
							<input type="text" id="row2_fld" name="row2_fld" value="20160828">
						</td>
					</tr>

					<tr>
						<td class="fields" id="row3"></td>
						<td>
							<input id="login" type="button" class="btn btn-primary btn-sm" value="送信">
						</td>
					</tr>

					<tr>
						<td class="fields error" id="row_last"></td>
						<td></td>
					</tr>

				</table>

			</fieldset>

			<fieldset>
				<legend>結果</legend>
				<table class="table table-condensed">

					<tr><td class="fields result" id="rrow1"></td><td></td></tr>
					<tr><td class="fields result" id="rrow2"></td><td></td></tr>
					<tr><td class="fields result" id="rrow3"></td><td></td></tr>
					<tr><td class="fields result" id="rrow4"></td><td></td></tr>
					<tr><td class="fields result" id="rrow5"></td><td></td></tr>

				</table>

			</fieldset>

			<fieldset>
				<legend>Firebase エラー</legend>
				<table class="table table-condensed">

					<tr><td class="fields result error" id="erow1"></td><td></td></tr>
					<tr><td class="fields result error" id="erow2"></td><td></td></tr>

				</table>

			</fieldset>

		</form>
	</div>

	<div id="comment">
	ようこそ jQuery + Bootstrap(css) + mmenu + Firebase	</div>

</div>


<div id="mmenu_left">
<ul>
	<li class="mm_user_title">ページ選択</li>
	<li><a class="mm_link_left" href="#" onclick="location='index.php';void(0)">リセット</a></li>
	<li><a class="mm_link_left" 
			href="http://getbootstrap.com/css/"
			onclick="location='entry.php';void(0)"
			target="_blank"
		>Bootstrap(css)</a></li>
	<li><a class="mm_link_left"
			href="http://api.jquery.com/"
			onclick="location='entry.php';void(0)"
			target="_blank"
		>jQuery ドキュメント</a></li>
</ul>
</div>


</body>
</html>



mmenu と hamburger アイコン設定
( mmenu.css )
#hamburger {
	vertical-align: bottom;
	border: 1px solid #999;
	display: inline-block;
	width: 50px;
	padding: 5px 10px;
	margin: 0 20px 0 8px;
}
#hamburger span {
	background: #999;
	display: block;
	height: 3px;
	margin: 5px 0;
}

html.mm-opened #hamburger span.top-bar {
	transform: rotate( 45deg );
	top: 8px;
}
html.mm-opened #hamburger span.middle-bar {
	opacity: 0;
	left: -40px;
}
html.mm-opened #hamburger span.bottom-bar {
	transform: rotate( -45deg );
	top: -8px;
}

#hamburger {
	overflow: hidden;
}
#hamburger span {
	position: relative;
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;

	transition: none 0.5s ease;
	transition-property: transform, top, left, opacity;
}


.mm-menu {
	background-color: #DAEEF2;
	color: #444444;
}
.mm-title {
	color: #222222!important;
	font-size: 16px;
	font-weight: bold;
}
.mm_user_title {
	padding: 20px!important;
}


テンプレート用 CSS
( basic.css )
@charset "UTF-8";

* {
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif!important;
}

#head {
	background-color: #404040;
}
#title {
	color: white;
	display: inline-block;
	line-height:40px;
}

#body {
	margin: 20px 0 0 0;
}

td {
	word-break: break-all;
}

.error {
	background-color: #FFE8EC;
}

#comment {
	padding: 20px;
	border: solid 1px #ccc;
	margin: 40px;
	border-radius: 10px;
}

@-ms-viewport {
	width: auto;
}

関連する記事

jQuery + Bootstrap(css) + mmenu : Firebase Database 新規登録テンプレート



posted by lightbox at 2016-10-01 16:38 | Google | このブログの読者になる | 更新情報をチェックする

2016年08月21日


Google ドライブの WEBホスティングが無くなったので、Google の Firebase をとりあえず使う方法

もう、【2016/8/31で廃止】であることは解っていたのですが、Google からメールが届きました。

IMPORTANT: Drive web hosting is shutting down

We announced last year that we're deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.

On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.

As an alternative to web hosting in Drive, we recommend:

Blogger−An easy and free way to host websites.
Firebase Hosting− An alternative if you're using the web-hosting feature to serve static webpages with items on Drive.
で、試してみました。確かに普通に使えます。インターネットの情報はそれなりにありますが、無料プランの説明はちょっと古いものしか見つかりませんでした。結論から言って、『無料プランで独自ドメインが使用できます』 技術者が使用するのであれば、DB や Android でPush 通知などがすぐいろいろ試してみれると思うので、特に問題は無いですが(ドキュメントが英語というのはいつものことですが)、一般の人にはちょっとハードルが高いです。ただ、ホスティングのみをする目的で、Node.js をインストールしてコマンドプロンプトを使ってデプロイするという事は、FTP クライアント使うのとそう違わないのかなぁ・・という気もします。それどころか、ローカルに http://localhost:5000 のウェブサーバを使用して表示を確かめる事ができるので、そんなに悪くも無いのかなぁとも思いました。 インストール等手順 二つのアカウントと、3つのPC から試しました。これでいけると思います。画像がやたらと多くなるので、NAVER のシステムを使ってまとめました。 Firebase の使い方 / Google の 1 GB まで無料のホスティングサービス プロジェクトの作成もコマンドプロンプトからできるようですが、プロジェクトはブラウザから作成したほうがいいでしょう。そして、ブラウザであらかじめログインしておく事になるので、そのブラウザは規定のブラウザである必要があると思います。ログイン時にたぶん、規定のブラウザを使っていると思われるからです。 カスタムドメインは、自分の管理するドメイン側で、二つ TXT レコードを書き込む必要があります。これは、以前から Google が使用していた方法のようです。ただ、説明としてはサブドメインが使えるとあるのですが、自分がゾーン編集できるのはメインのドメインのみなので、試してはいません。 入力したとたん、TXT レコード が表示されて、そのエントリをすぐに削除できませんでした。仕方ないので一晩明けて見に行ったら『削除可能』になっていました。 コマンドプロンプトについて コマンドプロンプトに慣れている人にはいまさらですが、『簡易編集モード』に変更しておくと、コピーペーストが楽になります。ただ、インストール場所をデフォルトの Program Files にした場合、昨今変更できないので、『簡易編集モード』へ変更する為にデスクトップにショートカットを作成してから『簡易編集モード』に変更する事になります。 ▼ Windows10 の設定画面 また、Node.js 用にインストール時に Path 環境変数の先頭に文字列が追加されるので、これも知ってる人はいいですが、知らない場合は後で『あれ?』と思うかもしれません。 デプロイ エラーが出る可能性があるので、その場合はしばらくしてから再度実行が必要です。
posted by lightbox at 2016-08-21 23:01 | Google | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり