質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3412閲覧

Firebaseでデータベースの書き込みができない

daikitakaya

総合スコア229

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/09/24 13:34

編集2017/09/24 13:56

###前提・実現したいこと
Firebase + html + Javascript(jQuery)でお問い合わせページを作ろうとしています。
htmlのフォームの送信ボタンを押した時にonclickfirebase.database().ref().set()を呼び出すような仕様にしています。

流れのまとめ

  1. index.htmlにアクセスした際にログインしていなければgoogleログイン画面に遷移。この際、ユーザーデータをセット。(グローバル変数に入れていますが、のちに修正しようとしています。)

js

1firebase.auth().onAuthStateChanged(function (user) { 2 if (user) { 3 currentName = user.displayName; 4 currentUID = user.uid; // グローバル変数 5 currentEmail = user.email; // グローバル変数 6 setUserData(); 7 } else { 8 GoogleAuth(); 9 } 10 });
  1. <button class="btn btn-primary" id="submit" onclick="addContact()">送信</button>を押すとmain.jsaddContact関数を呼ぶ。(alert()などを仕込んでonclickで関数が呼び出されているのは確認済みです)
  2. addContact関数のfirebase().database関数を実行。

問題

addContactという関数が呼ばれているのは確認済みなのですが、データベースへの書き込みができていないです。

js

1firebase.database().ref('test').set('hello');

などの簡単なものも書き込みができていないです。

ただ、

js

1$(function () { 2 firebase.database().ref('test').set('hello'); 3});

のようにページ読み込み直後に書き込もうとすると、書き込みができている状況です。

ボタンを押して関数を呼ぶことでデータの書き込みをしたいのですが、うまくいっていません。
jsの読み込みか、もっとjsの基本的なところでミスをしている可能性が高いのですが、うまく解決できていません。

該当コード

javascript

1function setUserData () { 2 $('p#name').text(currentName); 3 $('p#email').text(currentEmail); 4} 5 6function GoogleAuth (){ 7 alert('ログインしていません'); 8 let provider = new firebase.auth.GoogleAuthProvider(); 9 firebase.auth().signInWithRedirect(provider); 10} 11 12function addContact () { 13 const content = $("#content").val(); 14 firebase.database().ref('contacts' + currentUID).set({ name: currentName, email: currentEmail, content: content }).then(function () { 15 location.href = 'thanks.html'; 16 }); 17} 18 19function validate (contact) { 20 if (contact == '') { 21 alert('必須項目です'); 22 } 23 24} 25 26$('#logout').click(() => { 27 firebase.auth().signOut().then(() => { 28 alert('ログアウトしました'); 29 }); 30}); 31

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>お問い合わせフォーム</title> 6</head> 7<body> 8 9<nav class="navbar navbar-inverse"> 10 <div class="container"> 11 <div class="navbar-header"> 12 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 13 <span class="icon-bar"></span> 14 <span class="icon-bar"></span> 15 <span class="icon-bar"></span> 16 </button> 17 <a class="navbar-brand" href="#">sg-contacts</a> 18 </div> 19 <div class="collapse navbar-collapse" id="myNavbar"> 20 <ul class="nav navbar-nav"> 21 <li class="active"><a href="#">Home</a></li> 22 </ul> 23 <ul class="nav navbar-nav navbar-right"> 24 <li><a href="#"><span class="glyphicon glyphicon-log-out" id="logout"></span> Logout</a></li> 25 </ul> 26 </div> 27 </div> 28</nav> 29 30<div class="container text-center"> 31 <div class="row content"> 32 <div class="col-sm-8 text-left"> 33 <h2>お問い合わせフォーム</h2> 34 <div class="container"> 35 <form> 36 <div class="form-group col-md-8"> 37 <label>お名前</label> 38 <div class="row"> 39 <p id="name"></p> 40 </div> 41 </div> 42 <div class="form-group col-md-8"> 43 <label>Email</label> 44 <div class="row"> 45 <p id="email"></p> 46 </div> 47 </div> 48 <div class="form-group col-md-8"> 49 <label>お問い合わせ内容</label> 50 <div class="row"> 51 <textarea class="form-control" id="content" style="height: 300px"></textarea> 52 </div> 53 </div> 54 <div class="form-group col-md-8"> 55 <div class="row"> 56 <button class="btn btn-primary" id="submit" onclick="addContact()">送信</button> 57 </div> 58 </div> 59 </form> 60 </div> 61 </div> 62 </div> 63</div> 64 65 66<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script> 67<script> 68 // Initialize Firebase 69 const config = { 70 // firebaseのapiキーが書いてある 71 }; 72 firebase.initializeApp(config); 73 74 firebase.auth().onAuthStateChanged(function (user) { 75 if (user) { 76 currentName = user.displayName; 77 currentUID = user.uid; // グローバル変数 78 currentEmail = user.email; // グローバル変数 79 setUserData(); 80 } else { 81 GoogleAuth(); 82 } 83 }); 84</script> 85<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 86<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 87<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 88<script src="main.js"></script> 89</body> 90</html> 91

エラーメッセージ等

デバックがうまくできていないのはchromeのコンソールに何もエラーが出ていないので困っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

無事解決しました。

html

1<form> 2<textarea name="text_area" class="form-control" id="content" style="height: 300px"></textarea> 3</form>

というようにtextareaformタグで囲っていたため、firebaseの処理を走らせる前にデータ送信をしようとして、更新処理が走っていました。

テキストエリア内の値をバインドして、firebase.database()を使うので、formタグは不要でした。

投稿2017/09/25 11:33

daikitakaya

総合スコア229

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

データベースの権限は書き込み可能になっていますか?

サンプルルール

投稿2017/09/25 00:20

satena

総合スコア109

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

daikitakaya

2017/09/25 01:43

はい、確認しています。 ``` { "rules": { ".read": "auth != null", ".write": "auth != null" } } ``` の状態で、ページ読み込み時に書き込みできていることが確認できていますが、``onclick``で呼ぶとうまくいかないという状態が続いています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問