<!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>２会話・テンプレート(新規)</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">２会話・テンプレート(新規)</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>
ArrayList として取得 users を パスとして与えて取得すると、その下は配列なので ArrayList として取得する事ができます。また、users/0 のパスで取得するデータは クラス(User)を作成して、User.class を使用して Userクラスのインスタンスに直接セットする事ができます。そして、users を パス とした場合は ArrayList<User> としても取得する事ができます。
結局付けても付けなくても直接の動作には影響ありません。ただ、付けない場合はログにワーニングが表示され、付けるとワーニングは表示されません。 これは、開発中に Database 側にあって、クラス側に無いデータをクラスを使って読み込んだ時に確認できる内容になると思います。 Firebase ドキュメント : Update your Java model objects @Exclude アノテーションについて 上のリンク先では、@Exclude についても記述されています。これを使用すると、意図的にそのフィールドを排除できます。サンプルでは、public なフィールドに設定されていますが、setter/getter に対して指定できます。 補足 : JSON データを直接使用する データベースのルールが ".read": true になっている場合は、Firebase のプロジェクトの Database の URL で直接 JSON 文字列を使用できます。ルートは https://プロジェクトid.firebaseio.com/.json で取得でき、他のパスは、.json を拡張子として付加すると取得できます。 ※ ?print=pretty というパラメータを指定できます(整形します) ▼ 公開サンプル https://json-sample-b69b7.firebaseio.com/.json?print=pretty https://json-sample-b69b7.firebaseio.com/users/0.json ▼ JSONLint にて整形 http://jsonlint.com/?json=https://json-sample-b69b7.firebaseio.com/.json また、このアクセスは、Access-Control-Allow-Origin:* を返すので、jQuery で簡単に利用可能です。(ルールが要ログインの場合は、アクセストークンが必要になり、Android だけで利用するのは結構面倒になります) 関連する記事 Firebase API + Android Studio : Database にデータを保存は単純で、DatabaseReference の setValue メソッドを使用します Firebase API + Android Studio : Database 処理の基本設定 Android Studio 2.2 で新規プロジェクトを作成すると『Could not reserve enough space for 1572864KB object heap』というエラーが出る場合の対処方法
ソースコード
ダウンロードパッケージの中は、php としてテンプレート化されています。メインのコードは、view_main.php で、index.php から読み込まれます。
ログイン情報の保持について
Firebase の ログイン情報は localStorage に保存される為、ブラウザを閉じてもログインは保持されます。
テンプレートの mmenu と ハンバーガーアイコン部分
直接の動作とは関係無いので省いても問題はありません
( ソースコードの 13 〜 14 行, 118 〜 129 行, 142 〜 146 行, 220 〜 235 行 )
Firebase 実装部分
自分のコントロールパネルから『ウェブアプリに Firebase を追加』で取得可能な firebase.js と firebase.initializeApp( config ) 部分を該当部分に貼り付け直すだけです。
( ソースコードの 17 〜 28 行 )
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
