くらげになりたい。

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

Firebase

キャッシュしたくないときは、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翻訳で翻訳した(´ω`) 翻訳精度すごい。。 ちょっと整理した記…

いまさらFirebaseのCloud Firestoreに入門してみた

以前RealTimeDatabaseで簡単なアプリを作ったことがあるけど、 Firestoreにそろそろ入門せねばと、公式ドキュメントの内容を整理してみた。 とりあえず、チートシート的に使うために、公式ドキュメントのまとめだけ。 概要 まずは、公式の「Cloud Firestore…

Nuxtで開発するときによくみるリンク集

Nuxt/Vue関連はドキュメントが充実しているのでよく見るけど、 毎回ググっているのがめんどくさくなってきたので、まとめてみた。 Nuxtのガイド/APIリファレンス ルーティング - Nuxt.js ビュー - Nuxt.js 非同期なデータ - Nuxt.js Vuex ストア - Nuxt.js A…

Nuxt.jsをCircleCIでビルドしたけど、distが作成されないときにやったこと(build.quiet: falseを設定する)

CircleCIでSPAなNuxt.jsをFirebaseへ自動デプロイしようとしたときに、はまったのでその備忘録。。 npm run buildしても、distディレクトリが。。 作られてない。。 npm run buildの中身は、rm -rf public && nuxt build && cp -R dist public CircleCIのロ…

Nuxt.jsではじめるときのやることリスト(SSRも国際化も自動デプロイも)

Nuxt.jsでプロジェクトをはじめるときにいつもやることが整理してみた。 モジュールが多いので、いろいろ設定が必要だけど、ヌケモレあったりするので。。 Nuxt.jsのバージョンは、2.5.1です。 いつもやることの概要 作成したいプロジェクトは以下な感じ Typ…

Nuxt2.5でFirebaseでSSRするCloud Functionsの書き方

Nuxt2.5でTypeScriptサポートが強化されました!! でも、Nuxtクラスが少し変わったので、SSR時にCloud Funtctionsも少し変更が必要に。。その時の備忘録 [IMPORTANT] Migration Guide Programmatic API / Middleware If not already done, please explicitl…

CircleCIでFirebaseへ自動デプロイ(Hosting+Funcsions)

Nuxt.jsでアプリをSSRなアプリを作っているけど、 Gitでmasterにpushしたら、CircleCIで自動でデプロイしてほしいので、いろいろ調べたときの備忘録 Hostingだけの設定はあるけど、HostingとCloud Functionsを同時にする記事がなかったので、結構ハマった。…