二つのコレクションのデータを同じ場所に表示したい タイトルが、SNSぽい設計と書きましたが、実際のところは実験で作ったので、それぽいものではないですね。 今回やること 二つのコレクションのデータを取得して、同じカードの中に表示. 一つのコレクションに全てのデータを保存しないので、正規化している. Firestoreは、非正規化するものですけど、分けないと必要ないデータをuserコレクションは持ってしまう. 🥏こんな設計にした userコレクションIDは、nameフィールドしか今回ありません。画像も欲しいですが、今回は省きます。ダミーのデータを作成するときは、userコレクションもtaskコレクションもドキュメントIDは同じものを使用してください。 簡単ですけど、DBの設計図です。 userコレクションIDは、String型のnameフィールド１個だけです。 taskコレクションIDは、t
はじめに こんにちは、最近 SRE（Site Reliability Engineering）領域に興味のある cobo です。 今回はモバイルアプリ開発向けの SRE を意識したテーマで記事を執筆させていただきます。 説明すること トイルの撲滅 Cloud Build で Firebase プロジェクトの Terraform を自動実行する方法 Cloud Build の基本的な使い方 Cloud Build の構築フロー 説明しないこと 複数環境（development, staging, production）に対応した管理方法 ※ 本記事の応用版となるため、別記事にて紹介させていただきます。 Terraform の使用方法 ※ Terraform の基本的な使い方 および Firebase プロジェクトを管理する方法に関しては、私が過去に執筆した Terraform で Fireb
import type { FirebaseApp } from "firebase/app"; import type { Auth as FirebaseAuth } from "firebase/auth"; import { getApps, initializeApp } from "firebase/app"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; /** * @description Firebaseの管理画面から取得したAPIオブジェクト * @note 環境変数は`.env.local`ファイルに定義しています */ export const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KE
最近作った Slack Bot が好評だったのでまとめてみました！ どこの Slack ワークスペースでも導入できるように詳細に設定方法も記載しています。 🛠 作ったもの tell-me-bot（社内では tell-me-paccho）という、社内用語辞典をいい感じに管理してくれる Slack Bot を作りました。 社内ではもともと Spreadsheet で社内用語を管理していたのですが、メンテナンスする人が限られ、あまり積極的には利用されていない状況でした。 そんな時に@しかじろうさんのこちらの記事を発見して、これはおもしろいアイデアだと思い、Firebase + Bolt（TypeScript）にて作ってみました（アイデアをくれた@しかじろうさんに感謝🙏）。元記事の機能を参考に+αの機能も色々実装しています。 構成 Cloud Functions for Firebase で
タイトルの通り。なんとなく自分のサイトを自分で運用したいと思っている。それはWebエンジニアとしてのポートフォリオ的な側面もあるし、それに加えて、自分の書いた文章を自分の管理下におきたい欲求があるのだと思う。 サブブログを、はてなブログに持っていますが(https://blog.song.mu)、これもまた、コンテンツはblogsync を使って管理しています。 このサイトはもともとVPS上のNginxから静的配信されており、 VPS上のgit bareリポジトリに直接push post-receive Hook で riji を呼び出してサイト再構築 という結構カッコいいフローを組んでいて 、これがなかなか気に入っていた。以下のような点が良かった。 国内のVPSへのgitリポジトリへのpushはかなり早い GitHubへのpushに少し引っかかりを感じるレベル とはいえコンマ数秒程度の違
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
Discordの有料読み上げBotを運営している高校3年生です。公開2年目で月に12kほど利益が出ています。 最大4つのボイスチャットで読み上げ可能 可用性99% Webダッシュボード などの機能があります。Discordを使っている方がいれば、ぜひ導入していただけるとうれしいです。 コミュニティの宣伝 未踏ジュニアに採択された採択者で、未踏ジュニアに挑戦したい方向けのコミュニティを始めました！約12人の採択者と話をしたり、質問できます！ぜひ共有していただけると幸いです🙏 なぜ作ることにしたのか？ 昔（4年前）頃から無料のDiscordの読み上げBotは存在していましたが、どれも使う人数が多すぎて制限があったり、読み上げが遅くなったりするという問題がありました。そこで、有料の読み上げBotを運営することにしました。 料金体系 一律で月500円/20万文字のサブスクリプションにしました。g
自己紹介 現在、株式会社MG-DXにて、Webフロントエンドエンジニアをやっている植木といいます。一つ前のプロジェクトはOPENRECでiOSエンジニア、その前は、ピグでUnityのエンジニアをしていました。ネイティブアプリを作るのが好きです。MG-DXでは薬急便というオンライン診療・服薬指導がWebだけで行えるサービスを提供しています。新たにアプリをインストールしなくても、SafariやChromeだけで気軽に使えます。 開発の経緯 薬急便は、患者向け、医療機関向けに展開しています。患者から予約が入った場合に、医療機関にはメールやFAXが通知されるようになっています。FAXでは、受信するまでの時間や画質の低下が気になり、コストもかかるので、代替手段で、Webから印刷機能を提供する話が出てきました。 キオスクモードでの印刷や常駐アプリとWebで連携して印刷する海外のアプリもありましたが一長
実質無料で使える Hosting Service の比較や使い分けの紹介 2021 (Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun)2021-10-04 ホスティングサービスに何を使えばいいのか分からないという話はよく目にしますし、僕もたまに思います。 そこでこれまで自分が使ったサービスの特徴や for me, not for me な点を紹介します。 静的ページ、および NextJS を前提としたサービス選定で、Firebase Hosting, Cloudflare Pages, Vercel, Netlify, GitHub Pages, Amplify, CloudRun を紹介します。 また、それらはフリープラン前提の話であり、not for me な点は課
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Flutter が本格的に流行ってきたので、勉強のため、架空のショッピングアプリの開発を Flutter を用いて開発してみました。 そこで得られた知見をまとめたいと思います。 開発したアプリの概要 開発するアプリとして架空の飲食店または小売店での注文アプリを作成しました。 この手のアプリの中ではマクドナルドのオーダーアプリがかなりよくできていたので、それを参考にして作成しました。 Flutter の勉強が主な目的ですが、相性の良い Firebase の機能も試してみたかったので、店舗情報、商品情報、注文履歴などのデータはアプ
📕書籍化お知らせ📕 本書が翔泳社様から「動かして学ぶ!Flutter開発入門」として出版されることになりました!! https://www.shoeisha.co.jp/book/detail/9784798177731 書籍化できましたのは、読者の皆様のご高評のおかげです。いつもご利用本当にありがとうございます！ 書籍の内容は、2023年4月15日の内容と概ね同じになっています。 ただし、書籍の方は、イラスト/手順の項番/キャプションなどが非常にわかりやすくなっており、プロジェクト形式でのサンプルソースコードも提供されます。 🚨有料化のお知らせ🚨 書籍化に伴う諸般の都合により、出版された部分の削除や非公開などはしないのですが、出版日に有料化をさせて頂く予定です。 今まで2年以上無料で公開をさせて頂いた状況もあり心苦しいのですが、ご理解頂けますと幸いです ⚠️⚠️⚠️翔泳社様の書籍
概要 私はGCPを積極的に利用していますが、安く簡単にサービスを作ろうと思うと、Cloud run+Firebaseが良いのかなと思い、まとめました。メンテナンス性についても、Cloud runとCloud Functionsを比べると、Cloud runの方が良いと思います。 開発環境一覧 Source Repositry Cloud build Cloud run Firebase(hosting) はじめに 始めに上記の環境においてはサービスを有効状態にしてください。 また、gcloudでは最低限必要なIAMは以下の通り。 Firebase 管理者 Cloud run 管理者 今回はCloud buildを使用するため、IAMにおける「~~@cloudbuild.gserviceaccount.com」に以下の権限を付与する。 Cloud Run 管理者 Cloud Run サービス
はじめに 個人開発でアプリ作成中なんですが、バックエンドをrailsで作っていました。 そんなある日。。。 こんな記事を見ました。 Firebaseでバックエンドエンジニア不在のアプリ開発 クックパッドが体感した、メリットと課題 Firebaseならバックエンドエンジニアを必要としない開発ができる ( ﾟдﾟ) ... マジカ これに感化されてCloud Functionでバックエンドを作ってました。 が ある理由でそれは辞めました。 なぜ、Cloud Functionを採用しなかったか 今回マイクロサービスをアーキテクチャとして採用し、さらに各機能を自分が作るのは嫌なので、BaaSをサービスと定義して自分はBFFだけ作ってやろうという腹でした。 それだったら、BaaS単位で共通のライブラリファイル作ったほうが、他のプロジェクトを立ち上げる時に楽だよね？となり、クラウドファンクションにそう
Firebaseについて、事前知識 Firebaseとは、以下のような機能群を「Serverless」の文脈でバンドルしたものである。「Serverless」として、これらの統合管理コンソールの出来栄えが秀逸。 - Firestore ... Document-oriented KVS - Cloud Functions ... AWSのLambda - Cloud Storage ... AWSのS3 - Hosting ... Web Assetsのデプロイ先の提供、CDN展開サポート - Authentication ... ユーザー管理・統合認証サービスの提供 - Cloud Messaging ... iOS/Android/Web(JS)クライアントアプリへの統合プッシュ通知サービス - その他 いうまでもなく「Serverless」とは「サーバー運用・管理レス」の意味。まさに
テスト駆動で学ぶ Firestoreセキュリティルール の書き方（認証、スキーマ検証、バリデーション）FirebaseJestFirestoreCloudFirestoreTypeScirpt 今までセキュリティルールをあまり書かずセキュリティ的にアレなものを量産していたので、 その反省からFirestoreのセキュリティルールについて学んだことを記します。 2020/12/01 追記 この記事は、以下バージョン時点の情報です。 node: 10.15.3 @firebase/testing: 0.12.3 内容案内 本記事では以下について記載しています。 Firestore セキュリティールールのテスト環境構築方法（TypeScirpt & Jest) ユーザー認証のルール記載方法、テスト方法 スキーマ検証のルール記載方法、テスト方法 値のバリデーションのルール記載方法、テスト方法 コー
こんにちは。年末年始はずっとFirebaseを触っていました @ykhirao です。たぶん3年くらい遅れて流行に乗り始めています。Typescriptお正月にはじめました。 今日は、仕事がお休みなのでスマホぽちぽちしていたらすごく参考になる記事を見かけましたのですが、こちらの記事 Firebaseで作る！リアルタイム画像変換CDN【Firebase Hosting + Cloud Functions】 - AppBrew Tech Blog で書かれている アップロードされた画像をそのまま表示する時代は平成とともに終わりを告げたわけですが[※要出典] という文言を見てくすっと笑ってしまい、少し前に 君はまだ平成のアーキテクチャを使ってるのか？僕はFirebaseと令和の時代に行くぞ。 という記事がたくさんの方に読まれていたこととか、Twitterの擬人化された #令和ちゃん を思い出した
AppBrew新規事業部の開発責任者をしています吉野です． 前回記事を書いてから書きたくないと駄々をこねていたら歳月が経ち その間に猫を飼い始め配偶するなど様々なライフステージの変化がありました． ところで，アップロードされた画像をそのまま表示する時代は平成とともに終わりを告げたわけですが[※要出典]皆さんいかがお過ごしでしょうか． 今回の記事では，まずはじめにFirebase Consoleポチポチだけで出来る「Cloud Functionsのみを利用する例」を解説した後に，そこで生じた問題点を解決した「Cloud Functions + Firebase Hosting を利用する例」を順に説明していきます． これからFirebaseを作ってアプリを作る方，Firebaseを利用していていくつかのサイズの画像を柔軟に扱いたい方などの参考になればと思います． 記事後半の「Cloud Fu
認証付きGraphQL APIサーバーを爆速で立てる。 Hasura + Firebase AuthenticationFirebaseGraphQLcloudfunctionsFirebaseAuthenticationHasura HasuraはPostgreSQLからGraphQL APIサーバーを爆速で構築できるものの、認証については外部の認証基盤を使う必要があります。 今回は、認証基盤としてFirebase AuthenticationのJWT認証を使った例を紹介します。 Hasuraの認証について Hasuraの認証はWebhook方式と、JWT方式があり、今回はJWT方式を使います。 JWTは属性情報をJSONデータ構造で表現したトークンを使い認証を行う方法で、Firebase Authenticationにて採用されています。 Hasuraの認証でFirebase Auth
こんなサービス作りました 【#拡散希望】 🙌🎉🎊サービス開始🎊🎉🙌 ボケをツイートして 「いいね❤️」「リツイート🔁」 の数でランキング！ Twitter連動型 大喜利サイト 「ついぎり」 サービス開始しました‼️#ついぎりhttps://t.co/bkXfzHyVSs — ついぎり@公式アカウント (@twigiri_app) August 14, 2019 Twitterで大喜利するサービスです。 ８月中頃にローンチしたのですが、有難いことに半月で約2.5万PVいきました。 開発に至ったポエム記事はCrieitに投稿しています。 なぜ大喜利サービスを作ったのか この記事について やっぱり公開直後は怖かったです。 そう、クラウド破産。 Firebaseの設定を間違えて72時間で300万円以上請求されてしまったウェブサービス BigQueryで150万円溶かした人の顔 上記以
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
