プロジェクト&アプリ作成Firebase早速Firebaseでアプリ作っていきます。作りながら困ったら調べることにします(^_^;https://console.firebase.google.com/?hl=jaのページから「新規作成」をクリック!「まずプロジェクトに名前をつけろ」とのこと。「議事slack(仮)」とか呼んでましたがさすがにそのままだとアレなので、名前を考えます。slackの堅苦しい版、ということで「tight」に決定(テキトー)。プロジェクトIDはデフォルトを編集します。6文字以上必要なのでtight-devにしました。プロジェクトですよね。Engineのアプリ開発だと1つのアプリに対して開発環境、ステージング環境、本番環境など複数のプロジェクトを用意するのが常套手段でしたが、Firebaseではどうなのだろうか。アナリティクスの構成を行います。便利そうな機能がたくさんありますね。同意して先に進みます。プロジェクト作成完了\(^o^)/アプリ作成ダッシュボードが表示されます。サイドメニューいろんな機能が見られますがそこに目もくれず、「開始するにはアプリを追加してください」というメッセージに従います。今回作成するのはWEBアプリなので「WEB」アイコンをクリック。アプリ登録画面が表示されます。アプリ名は「tight」としておきます。Hosting設定チェックボックスがあります。ドキュメントによるとウェブアプリ、静的コンテンツと動的コンテンツ、マイクロサービス向けの高速で安全性の高いホスティングを提供します。今回WEBアプリ(htmlやJS)をホスティングすることになるのでチェックして先に進みます。Hostingを初期化すると勝手にタグが埋め込まれていたのでここではスキップして先に進みます。CLIをインストールします。'http2'というエラーが出ましたが、nodeとnpmを最新にしたらなおりました(^^)いよいよデプロイです。loginブラウザでGoogle認証&認可画面が立ち上がるのでログイン、許可します。次にFirebase初期設定を行います。init何の設定を行うかのオプションが表示されます。後から一つずつやり直すこともできるみたいですが、とりあえず必要そうなもの全て選択しておきます。プロジェクトを指定するオプションが表示されます。project」を選択し、「tight-dev」を選択します。ここでエラーが起きました。https://firebase.google.com/docs/projects/locationsどうも先に設定対象のFirestoreやStorageを設定してロケーション(GCPリージョン)を指定しておく必要ありそうです。コンソールに戻り、メニューから「Database」を選択し、「データベースの作成」をクリックします。「データベースの作成」画面が表示されます。本番環境かテストモードが選べます。テストモードだと直近30日間はセキュリティルール(これが何かまだよくわかってないが後で調べる)が適用されないとのこと。テストモードにしておきます。ロケーション選択画面が表示されます。東京(asia-northeast1)を選択します。同様にStorageも初期化します。initを再開します。先ほどのエラーは出なくなりました。Setupはとりあえずデフォルト値で。SetupでJavaScriptかTypeScriptの選択を迫られます。́・ω・`)とりあえずJavascript選択して先に進めます。SetupでSPA設定にするか聞かれます。今回その予定なのでYesを選択します。SDKのタグが全て埋め込まれていました。Setupはデフォルト値で。Emulatorは必要そうなものを全て選択、設定しておきます。初期化Done\(^o^)/いよいよデプロイします。deployあっさりDone\(^o^)/ブラウザで指定されているURL(https://tight-dev.firebaseapp.com/)を開きます。デプロイできました!!!🎉🎉🎉まとめ本日はFirebaseプロジェクト作成とアプリ作成を行いました。ひっかかりましたが、画面に出てくる指示に素直にしたがってサクサク進めることが出来ました。メッセージの登録と一覧取得を行います。(2)月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログPro参加グループプログラミングテクノロジーはてなブログをはじめよう!knightsoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。