前回から、手軽にWebアプリを作って公開できる、Firebaseについて紹介しています。前回は、Firebaseを使って、リアルタイムに更新される掲示板を作ってみました。今回は、Firebaseが提供しているGoogleアカウントを利用したログイン機能を使って、掲示板を改良して実際にWebで公開してみます。

ログイン機能を実装したリアルタイム掲示板を作ります!
ログイン機能を実装したリアルタイム掲示板を作ります!
[画像のクリックで拡大表示]
ログインすると掲示板の読み書きができるようになります
ログインすると掲示板の読み書きができるようになります
[画像のクリックで拡大表示]

Firebaseプロジェクトを作ろう

 前回、Firebaseの基本的な扱い方を紹介しました。今回は、その続きで作業をしていきます。Firebaseへのサインアップや開発コマンドラインツールの準備などは終えたものとして紹介します。

 今回作る掲示板は、誰でも勝手に使えるものではなく、Googleアカウントでログインした上でないと、書き込めないというものにします。そこで、新規プロジェクトを作成します。Firebaseのコンソール画面(https://console.firebase.google.com/)へアクセスし、「新規プロジェクトを作成」ボタンを押して、プロジェクトを作成しましょう。ここでは「test-bbs2」という名前のプロジェクトを作成しました。

 その後、コンソール画面で「WebアプリにFirebaseを追加」のボタンをクリックします。すると、Firebaseにアクセスするための、HTML/JavaScriptのコードが自動的に生成されますので、このスクリプトをコピーして、メモしておきましょう。後で使います。