Firestore

Vue3 + TypeScript プロジェクト から Firestore に接続する サンプル

by

Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。 vue: 3.2.33 firebase: 9.6.11 firebase-admin: 10.1.0 準備 Firestore に作成済みの データ Firestore には 以下のようなデータを作成してあります。 この データ を Vue プロジェクト で読み出して 画面に表示する アプリケーション を作っていきます。 プロジェクト作成 (Vue3 + TypeScript) まずは、Vue3 + Typescript でプロジェクトを作成します。 Vue3 プロジェクト に Firebase SDK を インストール 以下の コマンド で Firebase SDK を インストール していきます。 Firebase 接続設定情報 を Vite 環境変数に登録 Firebase に接続するためには API Key などの接続設定情報が必要になります。 これらの取得方法については 公式サイト を参照してください。この 接続設定情報 を Firebase SDK に渡すことで、Vue プロジェクト から Firebase に アクセス することができるようになります。 このように Firebase への アクセス は簡単に実現できるのですが、 逆に言うと、これらの接続設定情報 を悪用されてしまうと、第三者が簡単にあなたの課金設定済みアカウントを用いることもできてしまいます。そういった事態を避けるためにも、 Firebase 接続設定情報 は git に登録しないことが望ましいケースが多いと思います。 ここでは … Read more

Google Cloud Functions (Python) から Cloud Firestore の データを 読み出す – Cloud SDK を使う方法 と Firebase Admin SDK を使う方法 –

by

Cloud Firestore を Python で作成した Cloud Functions から利用するには 活用する SDK 別に以下の2つがあります。 Cloud SDK を使う方法 Firebase Admin SDK を使う方法 両者に特に メリット / デメリット があるわけではなさそうですが、少し紛らわしい部分もありますので、 簡単なサンプルコード を用いて整理していきたいと思います。 前提 本記事は以下を前提としてすすめていきます。 Cloud SDK インストール 済み Firebase Admin SDK インストール 済み Cloud Firestore データベース作成 済み これらについては、以下の記事も参考にしてください。 Cloud Firestore の内容を Read する データ 登録済みの Cloud Firestore のデータを Python で作成した Cloud Functions で読み出してみます。 Read する Cloud Firestore データ の内容 今回読み出してみる Firestore のデータを GCP Console からみてみます。名前 フィールド のみを持つ シンプル な データ 構造となっています。 ちなみに Firebase Console からみてみても、同じ データ を確認することができます。 ベース となる 関数の準備 次に、 ベース となる 最小構成の Python 関数を作成していきます。 この関数を以下の コマンド で Functions Framework を用いて ローカル 環境で実行してみます。 http://localhost:5000 にアクセスしてみると、以下の結果が表示されます。 Python Client for Google Cloud Firestore の インストール Cloud SDK を用いる方法を進める前に … Read more

[ Vue3 ] Vue CLI から Firestore データベースにアクセスする方法 と サンプルアプリ

by

Vue3 として作成した Vue CLI プロジェクトにおいて、 Firestore データベースに接続する方法を、簡単なサンプルアプリの実装を通じて紹介していきます。 macOS: Big Sur 11.4 Firebase SDK: 9.0.1 node: v14.17.0 npm: 7.19.1 作成するサンプルアプリ 今回は 「 Firestore に手動で登録された複数のデータ（名前の一覧）を、 Vue.js の コンポーネントに読み込み、そのまま表示する」というサンプルアプリを作成していきいます。 Firestore 準備 Firestore データベースの作成 Firestore データベースは こちらの記事 の内容で作成します。 Firebase, GCP 双方からアクセス可能なデータベースとして作成していますが、 Firebase からアクセスできれば本記事で紹介するサンプルアプリは動作すると思います。 Firestore データベース ルールの設定 Firestore データベースを作成した際に忘れずに実施しておく必要があるのが データベースルールの設定 です。以下の URL をクリックして、 Firestore コンソール を開き、 対象のプロジェクトを選択します。 https://console.firebase.google.com/ メニュー から 「 Firestore Database 」をクリックし、表示されたタブから 「 ルール 」 をクリックして、ルールを表示させます。 初期状態のルールは以下の様になっているかと思いますが、これは、「このデータベースに対して read も write も許可しない」という内容になっています。 今回は、 read だけできればよいサンプルアプリを作っていきますので、「 read であれば、特に制限なくすべて許可する設定」としていきます。 このあたりは、以下の参考サイトにより詳しい説明がありましたので、必要な方は参考にしてみてください。 参考：Qiita：Firestore Security Rules の書き方と守るべき原則 なお、ルールを初期状態のままにしておくと、以下のようなエラーが出力され、データを取得することができません。 Vue CLI プロジェクト 準備 Firestore 側の準備ができたところで、 Web アプリ側である Vue CLI プロジェクトを作成していきます。 Vue CLI プロジェクト作成 今回は、適当なディレクトリに “vue3-cli” という名前でプロジェクトを Vue 3 Preview として作成していきます。 Firebase SDK のインストール Vue CLI プロジェクト作成に引き続き、 Firebase を利用可能にすべく、 Firebase SDK をインストールしていきます。Firebase … Read more

[ GCP / Firebase ] GCP からも Firebase からも利用可能な Firestore データベース の 作成方法

by

Google が提供する NoSQL クラウド データベース である Firestore をWeb アプリや モバイルアプリで利用可能な状態の 作成方法 を紹介します。Firestore は GCP プロジェクトとして利用する方法、 Firebase プロジェクトとして利用する方法がありますが、今回は GCP / Firebase 両方のプロジェクトでデータを共有するようなデータベースの 作成方法 を紹介していきます。 Cloud Firestore は、Firebase と Google Cloud からのモバイル、ウェブ、サーバー開発に対応した、柔軟でスケーラブルなデータベースです。 https://firebase.google.com/docs/firestore Firestore は 以下のような 作成方法 があります。 Firebase プロジェクトとして作成し、 Firebase で利用する方法 GCP プロジェクトとして作成し、 GCP で利用する方法 GCP プロジェクトとして作成し、 GCP, Firebase 双方で利用する方法 Firebase で利用することで、モバイルアプリとの連携が容易になり、 GCP で利用することで、 機械学習などの各種 Google Cloud プロダクトとの統合が可能になります。 今回は、その両方を可能にする3番目の 作成方法 を紹介します。 関連記事： 作業の流れ 作業の流れは大まかに以下の 2 ステップになります。 GCP 側作業：接続先となる Firestore データベースの作成 Firebase 側作業：GCP プロジェクトとの紐付け GCP で Firestore データベースを作成 最初に、接続先となる Firestore を作成していきます。以下の URL をクリックして、 Cloud Console を開きます。 https://console.cloud.google.com/firestore/ 今回は “sample-for-blog” という名称の GCP プロジェクトを用いて進めていきます。 Firestore の作成 （ モード選択 ） Firestore を作成するにあたって、モードを選択する必要があります。 注意書きがあるように、ここでの選択は後で変更できないため、注意深く選択することが重要です。 ざっくりいってしまうと、モバイルアプリからのアクセスをする可能性がある場合は「ネイティブモード」を選択する、という感じでしょうか。逆に、App Engine で Python 2.7 や PHP 5.5 といった 少し古い環境 で用いる場合は「 Datastore … Read more

[ GCP / Firebase ] Cloud Functions における、GCP と Firebase の関係性や違い

by

例えば、 モバイルアプリ 開発に興味があれば、 Firebase を使ってみようと思うことがあるかと思います。それに加えてサーバレスコンピューティングを絡めたアプリ開発をしてみようと思ったときに、” Cloud Functions ”を活用すればよいことは分かると思います。ただし、すぐに” GCP のCloud Functions “と” Firebase の Cloud Functions “という 2 つの類似サービスがあることに気づくと思います。あるいは、この 2 つの存在に気づけなかったために混乱してしまう局面もあるかと思います。 そこで、まずは GCP と Firebase そのものの関係性や違いを整理し、次にこの 2 つの Cloud Functions　を比較したうえで、どのようなユースケースでどちらを選択すべきかを整理してみました。 GCP と Firebase ” GCP の Cloud Functions “と” Firebase の　Cloud Functions “は、 Cloud Functions サービス 単体で考える場合、それぞれ以下の異なる サブドメイン　で運用されていることからも分かる通り、基本的に 別物 と考えたほうがよさそうです。それぞれのサービスにアクセスするためのコンソールも別々になっています。 サービスドメイン https://cloud.google.com/ https://firebase.google.com/ コンソール https://console.cloud.google.com/ https://console.firebase.google.com/ 開発したいアプリ（ Webアプリ, スマホアプリ 等 ）が、 GCP のサービス群だけで構成可能であれば、 GCP の Cloud Functions を選択すればよさそうですし、 Firebase のサービス群だけで構成可能であれば、 Firebase の Cloud Functions を選択すればよさそうです。 Firebase の成り立ち Firebase は、 Google とは 別会社 で開発されたサービスを Google が買収することで、 Google がもともと進めていた GCP サービス に追加された サービス です。 Firebase(ファイアベース)は、2011年にFirebase, Inc.が開発したモバイル・Webアプリケーション開発プラットフォームで、その後2014年にGoogleに買収された https://ja.wikipedia.org/wiki/Firebase 買収というと、システム統合を思い起こしてしまいますが、GCP と Firebase は統合されているのではなく、一部の サービスを共有している状態 といえます。 GCP と Firebase の 共有部分 Firebase and Google Cloud … Read more