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

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

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

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

button

HTMLで用いる<button>タグです。

HTML

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

Q&A

0回答

760閲覧

firebaseにユーザー情報の追加のやり方

steisam

総合スコア2

Firebase

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

button

HTMLで用いる<button>タグです。

HTML

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

0グッド

0クリップ

投稿2020/11/23 04:06

firebaseにユーザー情報の追加のやり方について質問です。ユーザー(メールアドレス)がログインしてる状態で性別の男女ボタンのどちらを押すとfirebase上(添付図のnicknameの下)にgender:「男or女」みたいな感じで割り込ませる実装がしたいです。main.jsのどこが違うかまたは追加する必要があるものありましたらご教示いただきたいです。よろしくお願いします。

Html

<section id="gender" class="view"> <h1 class="animated fadeIn">性別を選択してください</h1> <section class="gender-button"> <button id="man-button" type="button" class="man-button"> 男性 </button> <button id="woman-button" type="button" class="woman-button"> 女性 </button> </section> </section> コード

main.js

const updateNicknameDisplay = (uid) => { const user = dbdata.users[uid]; if (user) { $(`.nickname-${uid}`).text(user.nickname); if (uid === currentUID) { $('#menu-profile-name').text(user.nickname); } } }; // ニックネーム欄の値が変更されたらデータベースに保存する $('#settings-nickname').on('change', (e) => { const newName = $(e.target).val(); if (newName.length === 0) { // 入力されていない場合は何もしない return; } firebase .database() .ref(`users/${currentUID}`) .update({ nickname: newName, updatedAt: firebase.database.ServerValue.TIMESTAMP, }); }); //性別ボタンの動作確認 $('#man-button').on('click', (e) => { console.log('男性'); }); $('#woman-button').on('click', (e) => { console.log('女性'); }); const loadGenderView = () => { dbdata = {};//キャッシュデータを空にする // ユーザ一覧を取得してさらに変更を監視 const usersRef = firebase.database().ref('users'); // 過去に登録したイベントハンドラを削除 usersRef.off('value'); // イベントハンドラを登録 usersRef.on('value', (usersSnapshot) => { // usersに変更があるとこの中が実行される dbdata.users = usersSnapshot.val(); console.log(dbdata); console.log(currentUID); // 自分のユーザデータが存在しない場合は作成 if (dbdata.users === null || !dbdata.users[currentUID]) { const { currentUser } = firebase.auth(); if (currentUser) { console.log('ユーザデータを作成します'); firebase .database() .ref(`users/${currentUID}`) .set({ nickname: currentUser.email, gender: currentUser.gender, createdAt: firebase.database.ServerValue.TIMESTAMP, updatedAt: firebase.database.ServerValue.TIMESTAMP, }); // このコールバック関数が再度呼ばれるのでこれ以上は処理しない return; } } Object.keys(dbdata.users).forEach((uid) => { updateNicknameDisplay(uid); }); }); }; /** * ---------------------- * すべての画面共通で使う関数 * ---------------------- */ // ビュー(画面)を変更する const showView = (id) => { $('.view').hide(); $(`#${id}`).fadeIn(); loadGenderView(); }; コード

イメージ説明
イメージ説明

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問