この記事を読む前に知っておいて欲しい.......これ間違えてしまった記事だと言う事を。
確かにこの記事通りにやる事が無理では無いが、これはファーストステップでは無い。本当に一から始めたい方は次の記事へ。
それではデータベースを作り始める。
前にも言ったけど、使う物はFirebase。オンラインでFreeなので、先にログインしておいて。Firebase。さらに、new projectを作っておく。
まず重要なのは参考に成りそうな物を見つける事。その点Firebaseは最高。YoutubeにFirebaseというアカウントではFirebaseに関するほぼ全てのやり方を教えてくれる。Firebase。
今回参考にしているのは、こちらのビデオ。
このビデオではウェブサイトのサインアップコーディングを教えてくれる。
ビデオで注目すべきはこの先生の丁寧さ。ステップバイステップで教えてくれるのだけど、少し喋るのが早い。まあその位は、目を瞑るべきだろう。
最初に教えてくれるのはサインアップの為のキーワード、
auth.createUserWithEmailAndPassword(email, pass);
これが中々重要。何だってこれを書く事によってデータベースに新たなユーザーを作る事が出来るのだから。これの問題点は名前を入れる事が出来ない事だが、まあ、直ぐにどうこうする必要もないだろう。
少しビデオが進むと先生の書いたコーディングが見れる。これはさすがプロフェッショナルと言いたくなる程美しいhtml。これを参考にサインアップページを書くのもいいと思う。
もし動画を見ているなら分かると思うけど、ウェブサイトのhtmlの下
<script src="app.js"></script>
と書いてある。これはapp.jpと言うファイルがここにあります、と言う意味。
app.jpは違うファイル内に書いてあり、内容はFirebaseへのアクセスコード。アクセスコードはFirebaseのプロジェクト内のoverviewの"Add Firebase to your web app"という所で入手可能。何故それを直接書かないかと言うと長いから。それだけ。ちなみに、このapp.jpと言うのは単なる名前なので変更可能。app.jsの中には"Add Firebase to your web app"のapiKey: "AIzaSyBuFosWv74acGDhuE__dqpg0b3Rn5vPbk4"
から
firebase.initializeApp(config);
の間。そして少し書き込む。
これが、Firebaseへのアクセスコード。全部を理解する必要は今はないと思う。さらにビデオを進めると4:06で"Get element"用のコーディングを書いている。これは何かと言うと、”このelementを取得しますよ”という事。だからこの場合、email, password, Login, Signup, Logoutを取得しますという意味。
4:28で先生はLoginのボタンを押せるようにするコードを書き始める。下のが完成品。データベースにすでにあるユーザー情報とあっている物かどうかを確かめ、実在するものならログインさせる。これがこのコーディングの意味。これでもうLoginボタンは動くのだが、当然これだけでは何の意味も無い。何だって、まだユーザーが一人もいない状態なのだから。それどころか今の状態ではユーザー登録すら出来ない。何故ならFirebaseが受け付けられる状態に無いから。
なので一度Firebaseのプロジェクト内の"Authentication"の項目へ行き、"sign in method"をクリックする。すると六つの項目があるが、そのうちの"Email/Password" をクリック。Disabledに成っているのをEnabledにすると、FirebaseがEmailとPasswordを受け付ける用に成る。
ここまで来ると、後はユーザー登録するだけ。またapp.jsに戻り、ユーザー登録を行える様にする。
上が完成品。Loginと対して変わらないのだが、一番の違いは "createUserWithEmailAndPassword" これが一番重要だと思う。これはユーザーを作る為のキーワード。それ以外は一緒。この後に少し付け足していく。ユーザーのアカウントがあった場合、Loginを成立させ、無い場合は"not logged in"と言うメッセージを残す様にコーディングを加える。
Loginは出来たのdeはログアウト。
それはさておき、肝心のFirebaseは何処なのか？<head>と</head>の間にある。動画中では縮小されているので見えないが。もし、見たければ3:26へとばせば見れる。まあ、僕は理解できなかったけど。