くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Firebase

StripeのFirebase Extensionsを使ってみた - その5 運用前に読んだほうが良いドキュメント編 -

前回の続き。いよいよ最終回。 www.memory-lovers.blog とりあえず、使えるようになってきたので、 公開前に読んだほうがいいドキュメントをまとめてみた。 Stripeの製品 と、その前に、 なんとなく使っていたけど、Stripeの各製品をおさらい。 ・Stripeのす…

StripeのFirebase Extensionsを使ってみた - その4 Nuxtアプリで試してみる編 -

前回の続き。 www.memory-lovers.blog とりあえず、なんとなくの動きがわかったので、 もう少しコードを書いて試してみる。 試してみたサンプルのソースコードはこちら。 ・memory-lovers/example-stripe-extensions サンプルでできること 簡単なサンプルな…

StripeのFirebase Extensionsを使ってみた - その3 拡張機能のソース読んでみた編 -

前回の続き。 www.memory-lovers.blog ドキュメントを読み進めて、使い方はわかったけど、 Stripe側でどんな処理しているのかもやもや。 とりあえず、拡張機能インストール時に追加された 関数の中身を見てWebhookまわりとかを理解していく。 拡張機能のソー…

StripeのFirebase Extensionsを使ってみた - その2 拡張機能の使い方を見てみる -

前回の続き。 www.memory-lovers.blog インストールしてサンプルが動かせたけど、 どうなってるかわからないので、もうすこしドキュメント見てみる。 とりあえず、FirebaseコンソールのExtensionsにある 「この拡張機能の動作」を見ていく。 前回までで「Con…

StripeのFirebase Extensionsを使ってみた -その1 サンプルを試す編-

Firebase ExtensionsにStripeでのサブスク支払い機能が登場! ずっと便利そうだなぁと思ってたけど、やっとさわれたのでその時の備忘録。 Run Subscription Payments with Stripeの拡張機能は、有料プラン(Blaze plan)じゃないと使えないので注意。 公式のデ…

Firebase Emulator Suiteを使ってみた

Firebase Local Emulator Suiteを使ってみたときの備忘録。 初期設定 # バージョンの確認。CLIがv8.14.0以降じゃないと使えない。 $ firebase --version # Firebase自体の初期設定 $ firebase init # Emulator Suiteの初期設定 $ firebase init emulators コ…

GitHub ActionsでNuxtアプリをHostingとFunctionsにデプロイする

GitHub ActionsでFirebase Hostingへデプロイできるようになったので、 試してみたときの備忘録。 HostingへデプロイするGitHub Actionsはいろいろある 以下の2つがあるっぽい。 GitHub Action for Firebase GitHub Actionでfirebase-toolsが利用できるやつ …

Firebase Functionsで環境変数を使ってみる(functions:config)

FirebaseのCloud Functionsで環境変数を利用するときの備忘録。 functions:configはデプロイ時に反映されるので注意が必要。 Firebase Local Emulator Suiteを使う場合は、.runtimeconfig.jsonというファイルを用意する。 環境変数を設定 firebase-toolsを使…

複数のアカウントでFirebase CLIを使えるようにする(firebase-multi)

Firebaseをよく使うようにあり、複数のGoogleアカウントでログインするようになった。 一回ログアウトしてログインするか、--reauthつけてログインすれば、切り替えできるけど、 毎回切り替えるのがめんどくさいので、いろいろ調べてみたときの備忘録。 いつ…

Firebase Authでカスタムトークン認証を試してみる

GoogleアカウントやTwitterなど以外でもFirebase Authを使いたいなと思い、 カスタムトークン認証を試してみるを試してみたときの備忘録 認証の流れ 全体の流れはこんな感じ。 外部の認証でUIDを取得する サーバ側: firebase-adminのcreateCustomToken()でカ…

FirestoreのonSnapshotでリアルタイム同期する

firestore便利だけど、getしか使ったことなかった。。 onSnapshotを使うと、変更されたデータを受け取れるので、試してみたときの備忘録。 ドキュメントはこれをみた。 ・Cloud Firestore でリアルタイム アップデートを入手する | Firebase 使い方 こんな感…

Firebase Admin Authでよくつかうものまとめ(ユーザ一覧など)

管理系のスクリプトを書くときに、firebase-adminで操作をするけど、よく調べ直すのでまとめてみた。 元情報は、以下辺り。 Firebase Guid: Manage Users | Firebase API Reference: Auth | Admin Node.js SDK | Firebase ユーザの一覧を取得 import * as ad…

Cloud Storage for Firebaseのよく使うのまとめ(クライアント/Admin)

FirebaseのCloud Storage、とても便利だけど、 Web上で使うfirebaseとCloud Function上で使うfirebase-adminで若干操作が違う。。 よく調べなおすけど、毎回辿り着くのが大変なので、備忘用。 Webクライアント(firebase) クライアント側での操作はこんな感じ…

Cloud Functionでサブコレクションまで再帰的に削除する(firebase-tools)

Firebaseの公式ドキュメントを見ていたら、こんな記事を見つけた。 試してみたので、そのときの備忘録。 コレクションとサブコレクションを削除する | Firebase Functionのソースはこんな感じ // index.ts import * as functions from "firebase-functions";…

Cloud Functionsの高速化をTypeScriptで試してみた

以下の記事を読んで、実行される関数ごとにファイルを分けて、 呼び出されたときに関数名から必要なファイルだけを読み込むのがいいらしい。 JavaScriptの記事だったので、TypeScriptで試してみた。 ディレクトリ構成 ディレクトリ構成はこんな感じ。 fireba…

Firebase UIで匿名認証を使ってみる

匿名認証を使えるといいなと思ったので、いろいろ調べてみたときの備忘録。 Firebase UIを使うと簡単にできた。 匿名アカウントでログインする こんな感じ。signInAnonymously()を呼べばOK。 // 初期化済みのfirebaseインスタンス。詳細は略 import firebase…

SPAなNuxtアプリでFirebase Authのredirectでも、認証後に来たベージに戻りたい(Firebase UI)

開発している積読ハウマッチで、Googleアカウントでのログインに対応した際、 Firebase Authの認証フローをポップアップからリダイレクトに変えてみた。 ポップアップだと、どこでもログインできたけど、 ログイン画面だと元のページに戻りたく、いろいろ考…

SPAなNuxtアプリをFirebase HostingからNetlifyに移行してみた

Netlifyがいいと聞いて、Firebase Hostingから移行してみたときの備忘録。 NetfilyのプレレンダリングがあるのでOGP芸が楽。 昔、こんな記事を書いたけど、Functionsで頑張らなくてもよくなった。 使ってみてよかったので、移行したときにやったことをまとめ…

Nuxt+Firebaseでセッション管理: PWA(Service Worker)編

FirebaseとSSRなNuxt.jsでアプリを作っていて、 クライアント側で認証チェックするとFirebaseの初期化などでラグが... サーバ側で認証情報とかを取得してもう少しなんとかできないかなと。 まだベータっぽい?けど、公式の以下の内容を試してみたときの備忘録…

NuxtでFirebase AuthのトークンをCookieに入れたり出したりする

NuxtのSSRで認証したいなと思ったら、こんな記事を見つけたので、試してみたときの備忘録。 SSRモードのNuxtでのFirebase認証 - Qiita 結果、UIDは取得できるけど、firebase-adminで検証が必要っぽい... インストール cookieを扱うライブラリはいろいろある…

TypeScriptでFirebase Admin SDKで認証ファイルを使うときは、スネークケースをキャメルケースに変換する

前の記事でも書いているけど、Firebase Adminで色々するので、 そろそろTypeScript化したくなり。。 www.memory-lovers.blog いざやってみると、すんなりできなかったのでその時の備忘録。 こんな感じ jsonファイルはスネークケースだけど、 型(admin.Servic…

キャッシュしたくないときは、Cache-Controlに"private, no-store, no-cache, must-revalidate"とかをつけみる

積読ハウマッチのOGP画像、Cloud FunctionsでSEO用のHTMLを返しているけど、 Twitterでシェアすると、更新されないことが... なんか、キャッシュされてるっぽい。。 Cache-Controlを設定すると良いっぽいので、設定してみた。 Cache-Control: private, no-st…

Nuxt(SPA)+Firebaseでsitemapを生成してみる

積読ハウマッチをNuxt.jsのSPAで作ってみたけど、 静的ページじゃないので、NuxtのSitemap Moduleだと微妙... なので、CloudFunction for Firebaseを使って、 サイトマップを自動生成するようにしてみたときの備忘録。 sitemap.xmlのサンプル sitemapの形式…

Nuxt(SPA)+FirebaseでSEO!OGP!: 特定のパスだけheadだけ返すやつ

最近つくった積読ハウマッチをNuxtのSPAで作成しているけど、 シェアされたときにいい感じに画像とかを表示してほしいのでやってみた。 N番煎じ感がつよいけれど、自分の整理用〜 全体の流れ 該当のURLにアクセスがあったらリライトでFunctionを呼び出す(Hos…

ローカルPCからfirebase-adminを使ってFirestoreを操作する(管理ツール)

Firestore、便利だけど一括取得とか一括実行をGUIでやるのがつらい。。 スクリプトでできないかなと思っていたら、できるっぽいので調べてみたときの備忘録。 テストデータ生成とか不要データの削除とかいろいろ使えそう(´ω`) ディレクトリ構成 my-admin/ -…

Firebase Dynamic Linksで短縮URL(TwitterのURLバン対策)

もぎゃさんのCrieit記事を見て、TwitterでシェアするとURLバンされるらしい。。 crieit.net URLを短縮すると回避できるらしく、Firebase Dynamic Linksを使ってURLを短縮してみたときの備忘録 Firebaseのダイナミックリンクとは 公式ドキュメントより Fireba…

Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする

OGP画像を生成したいな〜と思い、ImageMagickが使えるようなので、いろいろ調べたときの備忘録。 ImageMagickとは 画像を操作したり表示するためのソフトウェアスイート。 コマンドラインでも使えて、バッチ処理とかで一括処理するときに使ったりするやつ。 …

SSRなNuxtで認証情報をセッションに保存する

SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存…

AngularFirebaseのNoSQL設計パターンをER図で書いてみた

前回の記事と同様に以下の記事の内容を整理した。 Advanced Data Modeling With Firestore by Example | AngularFirebase 出てくる例ごとにER図を書いてみると、なんとなくNoSQLわかってきたかも。 基本的な考え方 複製 複数のDocumentを作成しないよう、あ…

NoSQLのテクニックが書いてある「Advanced Data Modeling With Firestore by Example」を翻訳してみた

オリジナルの記事は、こちら。 Advanced Data Modeling With Firestore by Example | AngularFirebase NoSQLのデータ構造や設計について、いろんな事例が書いてあってすてきだったので、 Google翻訳で翻訳した(´ω`) 翻訳精度すごい。。 ちょっと整理した記…