Firebase javascript でやる初めの一歩 Windows10

私はFirebaseをアプリへのPush通知では使ったことはあるけれども、Webの方では使ったことはないので、ちょっとやってみたという感じです。

環境はWindows10です。

早い話が、下記の動画を見ればすぐわかります(笑)。

全部英語ですが、まぁソースコード見てると大体わかりますし、どうしても英語聞きたいときは0.5倍ぐらいで聞くとなんとか聞けたりします。

わかりにくいところだけ補足します。

①apikeyとかなんなのかわからない。

const firebaseConfig = {
    apiKey:これ
};

ですよね~。

これは、Firebaseの方で先にアカウントを作っておいて、「アプリを登録」ということをする必要があります。

下記のFirebaseのサイトにアクセスして、プロジェクトを作ります。

https://console.firebase.google.com/u/0/?hl=ja

その後、作ったプロジェクトに「アプリを追加」します。

Firebaseの画面 左上の「プロジェクトの概要」をクリックするとこれになります。

アプリを</>というマークがJavascriptですので、Javascriptで登録します。

すると、このapiKeyとかprojectIdとかをコピペすればすむ画面が出てきます。

②ブラウザから動作させてみる

動画の通り、index.jsとindex.htmlを作ります。

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-analytics.js';;

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
    apiKey: "置き換えてね",
    authDomain: "置き換えてね",
    projectId: "置き換えてね",
    storageBucket: "置き換えてね",
    messagingSenderId: "置き換えてね",
    appId: "置き換えてね",
    measurementId: "置き換えてね"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
console.log(analytics);
console.log("にゃー");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="index.js"></script>
</head>
<body>
ウキー
</body>
</html>

動画内では

serve

というコマンドがさらっと使われております。

これ、Node.jsのコマンドなんですね。事前に

$ npm install -g serve

とやって、serveをnpmでインストールしておきます。

(この動画の冒頭でもnpm使っているので、npmが入っていないということはないと思いますが、npmが入っていなければnpmを先に入れましょう。)

はい、それではindex.jsとindex.htmlがおいてあるディレクトリ(ここではC:\study\firebase)で

serve src

とやります。

http://localhost:5000/

へアクセスします。

ちゃんとブラウザのコンソールにAnalyticsのオブジェクトが表示されましたね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です