🐥
ReactとFirebaseを使ってチャットアプリにアイコン画像を追加する方法
はじめに
名前とメッセージのみ表示されるチャットアプリに、アイコン画像を追加したいと思ったところ、意外と躓いたので私なりの方法を紹介します。
手順は以下の通りです。
- <input type="file" />を使いフォームで画像を送信する
- FirebaseのStorageで画像を参照、アップロードする
- Storageからダウンロードし、Authenticationのユーザー情報を更新する
- Firestoreのコレクションにユーザー情報の画像を追加する
- Firestoreからデータを取得する
- データを画面上にレンダリングする
前提：追加前のコード
アイコン画像追加前の処理は以下のようになっています。
SignUp.jsにてサインアップフォームにて入力したメールアドレスとパスワードを元に、
SignUp
firebase.auth().createUserWithEmailAndPassword(email, password)
Authenticationにユーザーを作成。
その処理が成功後、
user.updateProfile({displayName: name});
ユーザー名を更新し、history.push("/");でチャットルームへ遷移。
AuthService.jsでAuthenticationからユーザー情報を取得。
AuthService
useEffect(() => {
firebase.auth().onAuthStateChanged(function (user) {
setUser(user);
});
}, []);
Room.jsにて
Room
firebase.firestore().collection("messages").add({
content: value,
user: user.displayName,
time: firebase.firestore.FieldValue.serverTimestamp(),
});
Firestoreのメッセージコレションに、
- フォームで入力したチャットメッセージの内容
- ユーザー名
- 投稿時間
を追加。
Room
firebase
.firestore()
.collection("messages")
.orderBy("time")
.onSnapshot((snapshot) => {
const messages = snapshot.docs.map((doc) => {
return doc.data();
});
setMessages(messages);
変数messageにfirestoreのメッセージコレクションの内容を配列として生成し、リアルタイムアップデート。
なおその際に、orderBy("time")を用いて、前述の変数timeの順番にソートしています。
map関数で<ul></ul>内にリストとして各コンポーネントにmessageを画面上にレンダリング。
以上です。
以下は全体のコードになります。
App
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { Login } from "./pages/Login";
import { SignUp } from "./pages/SignUp";
import { Room } from "./pages/Room";
import { AuthProvider } from "./AuthServise";
import { LoggedInRoute } from "./LoggedInRoute";
export const App = () => {
return (
<AuthProvider>
<BrowserRouter>
<Switch>
<LoggedInRoute exact path="/" component={Room} />
<Route exact path="/login" component={Login} />
<Route exact path="/signup" component={SignUp} />
</Switch>
</BrowserRouter>
</AuthProvider>
);
};
SignUp
import React, { useState } from "react";
import firebase from "../config/firebase";
export const SignUp = ({ history }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(({ user }) => {
user.updateProfile({
displayName: name,
});
history.push("/");
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<h1>Sign Up</h1>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">E-mail</label>
<input
type="email"
name="email"
id="email"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
id="password"
value={password}
placeholder="password"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="name">Name</label>
<input
type="name"
name="name"
id="name"
value={name}
placeholder="name"
onChange={(e) => setName(e.target.value)}
/>
</div>
<button type="submit">Sign Up</button>
</form>
</>
);
};
AuthService
import React, { useEffect, useState } from "react";
import firebase from "./config/firebase";
const AuthContext = React.createContext();
const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
firebase.auth().onAuthStateChanged(function (user) {
setUser(user);
});
}, []);
return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};
export { AuthContext, AuthProvider };
Room
import React, { useContext, useEffect, useState } from "react";
import { AuthContext } from "../AuthServise";
import firebase from "../config/firebase";
import { Item } from "./Item";
export const Room = () => {
const [value, setValue] = useState("");
const [messages, setMessages] = useState(null);
useEffect(() => {
firebase
.firestore()
.collection("messages")
.orderBy("time")
.onSnapshot((snapshot) => {
const messages = snapshot.docs.map((doc) => {
return doc.data();
});
setMessages(messages);
});
}, []);
const user = useContext(AuthContext);
const handleSubmit = (e) => {
e.preventDefault();
firebase.firestore().collection("messages").add({
content: value,
user: user.displayName,
time: firebase.firestore.FieldValue.serverTimestamp(),
avatar: user.photoURL,
});
setValue("");
};
return (
<>
<h1>Room</h1>
<ul>
{messages &&
messages.map((message, index) => {
return (
<Item
key={index}
user={message.user}
content={message.content}
/>
);
})}
</ul>
<form onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<button type="submit">送信</button>
</form>
<button onClick={() => firebase.auth().signOut()}>Logout</button>
</>
);
};
Item
export const Item = ({ user, content }) => {
return (
<li>
{user} : {content}
</li>
);
};
チャットルームの表示は以下になっています。
アイコン画像追加処理
本題のアイコン画像追加の処理を行っていきます。
<input type="file" />を使いフォームで画像を送信する
SignUp.jsに画像送信用のinputを追加します。
SignUp
const [avatar, setAvatar] = useState(null);
...
<div>
<label htmlFor="avatar">ユーザー画像</label>
<input
type="file"
name="avatar"
id="avatar"
onChange={(e) => setAvatar(e.target.files[0])}
/>
</div>
Email,Password,Nameではvalue属性を用いてStateを更新していましたが、こちらはファイルへのパスを表す文字列となってしまうため、今回はfiles属性を使います。
files属性では選択されたfilelistが配列として入っています。
今回はファイルを1つだけ選択する仕様にしているため、インデックス番号[0]のファイルをavatarのState更新に使用しています。
FirebaseのStorageで画像を参照、アップロードする
Authenticationには画像を直接追加することは出来ないため、storageにアップロードし、そのURLをプロフィールに追加します。
まずstorageへのアップロードからです。
SignUp
const iconRef = firebase
.storage()
.ref()
.child("user-image/" + avatar.name);
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(({ user }) => {
iconRef.put(avatar).then(() => {
iconRef.getDownloadURL().then((url) => {
user.updateProfile({
displayName: name,
photoURL: url,
});
history.push("/");
});
});
})
.catch((err) => {
console.log(err);
});
行った処理を説明します。
SignUp
firebase.storage().ref().child("user-image/" + avatar.name);
storageのuser-imageフォルダにavatar画像へのパスを参照します。
createUserWithEmailAndPassword(email, password)の処理が成功したら、putメソッドでstorageにアップロードします。
SignUp
.createUserWithEmailAndPassword(email, password)
.then(({ user }) => {
iconRef.put(avatar).then(() => {
Storageからダウンロードし、Authenticationのユーザー情報を更新する
アップロードが成功したら、getDownloadURL()で、そのダウンロードURLを取得する処理を行います。
SignUp
iconRef.put(avatar).then(() => {
iconRef.getDownloadURL().then((url) => {
URLを取得したら、Authenticationのユーザープロフィール内photoURL(プロフィール写真のURL)に取得したURLを追加します。
SignUp
iconRef.getDownloadURL().then((url) => {
user.updateProfile({
displayName: name,
photoURL: url,
});
これでユーザープロフィールに画像が更新されました。
Firestoreのコレクションにユーザー情報の画像を追加する
チャットルームで画像を表示するため、Firestoreのメッセージコレクションにプロフィール写真を追加します。
Room.jsのhandleSubmit内、メッセージコレクションへの追加要素にavatar: user.photoURLを加えます。
このuserはAuthService.js内でAuthenticationから取得したユーザー情報です。
Room
const handleSubmit = (e) => {
e.preventDefault();
firebase.firestore().collection("messages").add({
content: value,
user: user.displayName,
time: firebase.firestore.FieldValue.serverTimestamp(),
avatar: user.photoURL,
});
setValue("");
};
Firestoreからデータを取得する
先程のメッセージコレクションからデータを取得します。
この処理に画像追加処理前との変更点はありません。
Room
firebase
.firestore()
.collection("messages")
.orderBy("time")
.onSnapshot((snapshot) => {
const messages = snapshot.docs.map((doc) => {
return doc.data();
});
setMessages(messages);
データを画面上にレンダリングする
Room.jsの<ul></ul>内でItemコンポーネントにメッセージコレクションのavatarをオブジェクトとして渡し、
Itemコンポーネントの<li></li>内に
<img style={{ width: "100px" }} src={avatar} alt="" />
を追加。
これでアイコン画像をチャットルームに表示することが出来ました。
変更後のコード
変更後はこのようなコードになります。
SignUp
import React, { useState } from "react";
import firebase from "../config/firebase";
export const SignUp = ({ history }) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [name, setName] = useState("");
const [avatar, setAvatar] = useState(null);
const handleSubmit = (e) => {
e.preventDefault();
const iconRef = firebase
.storage()
.ref()
.child("user-image/" + avatar.name);
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(({ user }) => {
iconRef.put(avatar).then(() => {
iconRef.getDownloadURL().then((url) => {
user.updateProfile({
displayName: name,
photoURL: url,
});
history.push("/");
});
});
})
.catch((err) => {
console.log(err);
});
};
return (
<>
<h1>Sign Up</h1>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="email">E-mail</label>
<input
type="email"
name="email"
id="email"
value={email}
placeholder="Email"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
type="password"
name="password"
id="password"
value={password}
placeholder="password"
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div>
<label htmlFor="name">Name</label>
<input
type="name"
name="name"
id="name"
value={name}
placeholder="name"
onChange={(e) => setName(e.target.value)}
/>
</div>
<div>
<label htmlFor="avatar">ユーザー画像</label>
<input
type="file"
name="avatar"
id="avatar"
onChange={(e) => setAvatar(e.target.files[0])}
/>
</div>
<button type="submit">Sign Up</button>
</form>
</>
);
};
Room
import React, { useContext, useEffect, useState } from "react";
import { AuthContext } from "../AuthServise";
import firebase from "../config/firebase";
import { Item } from "./Item";
export const Room = () => {
const [value, setValue] = useState("");
const [messages, setMessages] = useState(null);
useEffect(() => {
firebase
.firestore()
.collection("messages")
.orderBy("time")
.onSnapshot((snapshot) => {
const messages = snapshot.docs.map((doc) => {
return doc.data();
});
setMessages(messages);
});
}, []);
const user = useContext(AuthContext);
const handleSubmit = (e) => {
e.preventDefault();
firebase.firestore().collection("messages").add({
content: value,
user: user.displayName,
time: firebase.firestore.FieldValue.serverTimestamp(),
avatar: user.photoURL,
});
setValue("");
};
return (
<>
<h1>Room</h1>
<ul>
{messages &&
messages.map((message, index) => {
return (
<Item
key={index}
user={message.user}
content={message.content}
avatar={message.avatar}
/>
);
})}
</ul>
<form onSubmit={handleSubmit}>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<button type="submit">送信</button>
</form>
<button onClick={() => firebase.auth().signOut()}>Logout</button>
</>
);
};
Item
export const Item = ({ user, content, avatar }) => {
return (
<li>
<img style={{ width: "100px" }} src={avatar} alt="" />
<br />
{user} : {content}
</li>
);
};
Discussion