環境 ・MacOS BigSur（11.5.2） ・VScode（1.59.1） ・Node.js (16.1.1） ・Firebase （9.0.0）←New! ・yarn (1.22.11) ・TypeScript(4.4.2) 対象 ・これからFirebaseでプロジェクトを始めようとする人 ✍️8月25日以前に出された教材やチュートリアル、記事、そして現時点での日本語の公式ドキュメントを参考にしようとしている人は特に！ ・教材や記事、ハンズオン通りにFirebaseでプロジェクトを始めたのに原因不明のエラーぶつかった人 ・8月25日以前にFirebaseプロジェクト作っている人 ※この記事は2021年9月1日時点の情報です ※情報ソースはFirebaseの公式ドキュメント及び公式に発表されているリリースノートとブログを参考にしています はじめに 早速本題に入りますが、つい先日（20
モバイル向けNoSQL「Firestore」で件数を数える「count()関数」、期限付きデータ「Time To Live」など新機能。Firebase Summit 2022
モバイル向けNoSQL「Firestore」で件数を数える「count()関数」、期限付きデータ「Time To Live」など新機能。Firebase Summit 2022 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催し、モバイル向けのNoSQLデータベースFirebaseの新機能として、件数を数える「count()」関数や期限が来たら自動的にデータが消去される「Time To Live」などを発表しました。 クエリ結果の件数を返してくれるcount()関数 これまでFirebaseでクエリの結果何件のデータがマッチしたのかを数えるには、プログラマが検索処理の後になんらかの手法で件数を数える処理を記述する必要がありました。 件数を数えることは比較的ニーズの高
Firebaseを利用して、リアルタイムHasuraアプリに認証と承認を追加するチュートリアル | Graat（グラーツ）-グロース・アーキテクチャ＆チームス株式会社
GraphQLを利用したアプリ開発を、素早く簡単に行える方法について、海外にとても良い記事がありましたので、ご紹介します。
はじめに iOSやAndroidアプリの利用状況把握のツールとして、Firebase Analyticsがあります。導入方法は、以前の記事で書きましたが、この方法のような通常の利用だと、Firebaseの公式ページによるとアプリによってロギングされるイベントは、約１時間の周期でバッチ処理され、まとめてアップロードされます。 通常は、これで十分です。しかし、デバッグ時には、1時間待たないと結果が出ないのは、効率的ではありません。この記事では、デバッグ時に有効なログの出し方を書いていきます。 アプリコンソールにログを出す方法 Xcodeのコンソールに、Firebase Analyticsのログをリアルタイムに出力する方法です。-FIRAnalyticsDebugEnabledを追加してアプリを起動すると、Firebase Analyticsのログがリアルタイムで出力されます。 具体的には、以下
[Xamarin] Firebaseプロジェクトを開発用と本番用で使い分けてみた | DevelopersIO
Firebase Analytics等を使うとき、アプリの環境（開発用と本番用）でFirebaseプロジェクトを変更したくなりました。 開発用アプリ： 開発用のFirebaseプロジェクト 本番用アプリ： 本番用のFirebaseプロジェクト そこで、開発用アプリと本番用アプリで、google-services.jsonとGoogleService-Info.plistの使い分けを試してみました。 目次 環境 Firebase プロジェクトの作成（開発用 & 本番用） Android アプリの対応 ライブラリの追加 google-services.json の取得 google-services.json の追加 .gitignoreの修正 ビルド条件の対応 初期化コードの追加 Firebase プロジェクトで接続確認 開発用 本番用 動作確認 iOS アプリの対応 ライブラリの追加 Go
![[Xamarin] Firebaseプロジェクトを開発用と本番用で使い分けてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f74df18be894aecd328c6d4f980dfe6189934ffe/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F07%2Feyecatch_xamarin_2.png)
現状のアプリはアルファ版に位置し、まだバグが残っている可能性が高いです。それを許容できる方に公開し使ってもらいながら要望をいただき改良することで、さらに使いやすいものにしていければと計画しています。 https://chkarxiv.org 前置き最近arXivで論文をチェックするのが大変になっているように思えませんか？ 下の図は2014年から2019年のarXivのAI関係の投稿数を月ごとにプロットしたものです。2014年には月に約500本だった投稿数が、2019年には約3000本と6倍に増えています。AIの分野を広く追う場合に、日に17本だった投稿数が100本になったというとより大変さが伝わるでしょうか？ そんな中、皆さん普段はどのように論文をチェックされていますか。 私はarXivが提供しているRSSフィードをFeedlyで管理してみていましたが、アブストを確認するためいちいち開く煩
自己紹介 プログラマーのAkasaと申します。 夢を実現するために頑張ってる人を応援するサービスを模索しています！ 今回、Vue.js, Firebase (Hosting, Functions, Storage)でOGP画像生成形サービスを爆速で作りました！ （サービスは現在停止しています） 作ったサービス Wishlist Share Amazonのほしい物リストを画像付きでツイートできるサービス。 開発環境 firebase : ^7.6.0 vue": ^2.6.6 参考にした記事 Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう Nuxt.js + FirebaseでOGPの仕組みを完全に理解した 〜俳句をSVGで描画するサービスをリリースした話〜 SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみた
Google Cloud Functions / Cloud Functions for Firebaseの微妙な使い勝手 – marketechlabo
Google Cloud Functions / Cloud Functions for Firebaseの微妙な使い勝手 Google Cloud FunctionsとCloud Functions for Firebaseの関係 Cloud Functions for FirebaseはGoogle Cloud Functionsを簡素化してFirebaseで使えるようにしたもの Node.jsのバージョン8のみ Google Cloud Functionsは独自ドメインが使えないが、Cloud Functions for Firebaseでは使える（独自ドメインSSLのWeb APIが可能）。 複数のFunctionsを使う構造になっていない（index.jsのみ）→工夫が必要 管理画面からのデプロイができない Cloud Functions for Firebaseで登録した関数は
Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ - takeda_san’s blog
目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
Firebase Cloud Messagingとは Firebase Cloud Messaging（以下FCM）は、Push通知の実装やコンバージョン取得等、運用をサポートする便利なツールです。簡易的なモック開発を行う際はもちろん、通常リリースするAndroid／iOSのアプリに共通の通知機能があるものを開発する際に非常に有効活用でき、モバイルアプリ開発では「なくてはならないもの」となっています。 今回はそんな便利なFCMのPush通知の機能について記述させていただきます。 （2023年8月時点でのFirebase管理画面上では、”Messaging”として今回の主題となる「通知（Push通知）」以外に「In-App Messaging」の2つの機能がまとめられています） FCMが対応するプラットフォーム FCMはiOS、Android、さらにはブラウザへのWeb Pushなど、主要な
【2021年】フロントエンドの学習に使用した教材一覧（React, TypeScript, NEXT.js, Firebase）
今回は、僕がフロントエンドを独学する際に使用した教材を紹介していきたいと思います。 最近のフロントエンドは技術の移り変わりが激しくて大変ですよね。 特に初学者の方はどの教材を選べばいいか分からないですよね。 （僕は分かりませんでした😇） 少しでも参考になれば幸いです。 前半に「使用した教材一覧」 後半に「おすすめの教材」を紹介します。 使用した教材一覧 本 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ.React基礎編】 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ.React応用編】 りあクト！ Firebaseで始めるサーバーレスReact開発 YouTube動画 しまぶーさんの動画（JavaScript入門、モダ
Firebase Authenticationを利用する認証でメールアドレス＆パスワード、メールリンク、Google、Twitter…と一通り実装してみたなかではメールアドレス＆パスワード認証が一番面倒臭かった。 この記事はその面倒くさいメアド認証にまつわる各種手順を脳内整理がてらメモったものです。 殆どはFirebaseの公式ドキュメントに書いてあることなので、主要な関数名などにはドキュメントへのリンクを貼ってあります。 メールアドレス＆パスワードで新規登録 Firebaseだとメールアドレスを使う認証では「メールアドレス＆パスワード」と「メールリンク」が選択できる。 メールアドレス＆パスワードを利用した場合、確認メール送信までがフェーズ１という感じ。 メールアドレス・パスワード入力 登録の確認（auth().fetchSignInMethodsForEmail） ユーザーアカウント作成
![[JS] Firebaseの覚書 ① メールアドレス認証](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Vue.jsフレームワーク”Nuxt”を用いたリアルタイムチャット開発！チャット機能を通してリアルタイムなデータのやり取りや、Vuexでのチャットデータの管理について学ぶ。さらに、Firebaseを使ったデプロイなどサーバーレスアプリケーション開発に必要なスキルも学ぶ。
[iOS]Firebase Crashlyticsを使って致命的でないとして回避したイベントを記録する | DevelopersIO
アプリケーションのエラー設計で、アプリ側のクラッシュは極力避ける方針でコードを実装する場合があります。それでも開発中はクラッシュさせたい場合にassertなどを使うことがあると思います。本番環境でユーザーがアプリを触る時にエラーを踏んで操作は継続するもののエラーを踏んで回避したいことを知りたい場合にCrashlyticsのnon-fatalが便利です。 Swiftのエラー分類 SwiftにはErrorHandlingRationale.rstというエラーハンドリングに関するドキュメントがあります。そこでは、Simple domain errors、Recoverbable errors、Universal errors、Logic failuresという四つのエラー分類があります。 このタイプのエラーはこれらのどれに分類される、といったような分類の仕方ではなく、どのようにエラーを扱いたいか
![[iOS]Firebase Crashlyticsを使って致命的でないとして回避したイベントを記録する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf1fba053b10ac0f0ec1e4798fc6d0cc36462bba/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F04%2Ffirebase-eyecatch.png)
Firebase In-App Messaging を使って特定のユーザーにメッセージを通知する | DevelopersIO
クラスメソッド福岡オフィスでiOSアプリエンジニアとして働いている田辺です。先日業務で Firebase の In-App Messaging に触れる機会がありました。今回は特定の属性をもつユーザーに対して通知を行うところまでをやってみたので、基本的なところから説明しながら記事にしていきます。 In-App Messagingとは アクティブなユーザーへのメッセージの表示を行うことができるサービスです。Firebase コンソールからメッセージのデザインをカスタマイズできます。タイトルやボディ、テキストや色などが設定できます。 ルーティング先のURLを設定することでボタンが押下されたときに遷移処理を行えます。 The Firebase Blog: Introducing Firebase In-App Messagingによると、アプリ内メッセージングで送信されるメッセージの主な目的は、
Next.jsのアプリをFirebase Hostingでいい感じに連携する - Lento con forza
最近Next.jsとFirebaseばかりやっています。って書きましたが、本当はこの一ヶ月どうぶつの森しかやってませんでした。どうぶつの森のプレイ時間は200時間を超えました。 そろそろエンジニアとしても生活したくなってきたのでエンジニアっぽい話をします。Next.jsで作ったアプリをデプロイする先の選択肢として、Verselを使うと便利です。 SSRが必要なく、静的ファイルをデプロイすれば良い場合はFirebase Hostingなども選択肢に入ります。Firestoreなどと組み合わせて使っている時は、設定を工夫することで便利に使うことができます。今回の記事ではNext.jsで作ったアプリをFirebaseと組み合わせて使う方法を紹介します。 Firebase HostingにNext.jsの静的生成機能を使ってデプロイする まずは、npm initから始めます。 npm init n
google-github-actions/auth を使った GitHub Actions で Firebase へのセキュアデプロイ - Mobile Factory Tech Blog
こんにちは、エンジニアの夕凪です。 最近、 GitHub Actions が OIDC を正式サポートし、 AWS や GCP へのセキュアなデプロイが可能になりました。 そのうちの GCP の公式実装である google-github-actions/auth を使って、 Firebase へデプロイを行ってみたので、この記事ではそのやり方を解説します。 前提条件 この記事は以下の環境を前提としています。 google-github-actions/auth v0.4.3 Google Cloud SDK 370.0.0 (gcloud --version) Google Cloud Platform へのアクセス権限があること GCP 側でやること まずは GCP 側でサービスアカウントの準備などが必要なので、それらを作成していきましょう。 以下ちょっと特殊ですが、 fish shel
はじめに Firebase Local Emulator Suiteはローカル環境でFirestoreやCloud FunctionsといったFirebaseプロジェクトのコンポーネントをエミュレートできる環境です。 https://firebase.google.com/docs/emulator-suite?hl=ja 本記事ではDocker及びDocker Composeを利用して上記の環境を構築したいと思います。 開発環境 macOS Catalina 10.15.6 Docker Desktop stable 2.3.0.4 なお、本記事で使用したコードはこちらです。 実際に作ってみる。 はじめにFirebaseのプロジェクトを作成しておきましょう。 https://console.firebase.google.com/ 後述するEmulator Suite UI（GUI上でエ
Googleが提供しているFirebaseは、スマートフォンアプリやWebアプリケーションにおける「バックエンド開発」において、スピードの向上とコスト削減を可能にするプラットフォームです。Firebaseには、バックエンドを含め、アプリ開発に役立つ機能が数多く用意されています。 この記事では、Firebaseの概要や特徴、導入のメリット、さらに機能の一覧をわかりやすく解説します。アプリの開発でFirebaseを検討している人は、ぜひ参考にしてください。 Googleが提供するFirebaseとは？ Firebaseは、iOS/AndroidアプリやWebアプリケーションの開発に活用できるプラットフォームです。mBaaS（エムバース）の一つであり、2011年にFirebase社がサービスを開始しました。2014年には、Google社に買収されたことで、知名度が上がりました。 Firebase
AWS DevDay Japan 2022 に「脱Firebase. 我々はどう生きるか 」というタイトルで登壇してきた - Sweet Escape
このブログはクラメソの方がこういうの書いていたので試しに書いてみた感じです。 AWS DevDay Japan 2022 に「AWS CDKでECS on FargateのCI/CDを実現する際の理想と現実 」というタイトルで登壇しました #AWSDevDay | DevelopersIO 資料 speakerdeck.com 発表理由とか AWSのDevDayはCFPを募集していることから応募した結果、無事に採択されて昨年に引き続きセッションをする機会をいただきました。実は2個出したんだけどもう一方はダメでした。 FirebaseのCloud FirestoreをやめてAWS上で構築したAPIへ移行するという話なんですが実は以前にも検討段階でこのブログで書いた内容です。今回はタイミング的に実際に移行した後ということで前回のブログの内容をアップデートするような内容となっています。 以前のブ
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
Firebaseを用いたERPのセキュリティ診断を実施。今後はSaaS開発に沿った継続的なコンサルも | Flatt Security
株式会社クラウディオは2019年に設立。主軸事業は、ITコンサルティング事業とSaaSの提供。2020年11月より、バックオフィス業務の効率化を支援する「Claudio ERP Plus」をリリースしました。 Claudio ERP Plus ※現在βリリース中。2022年正式リリース予定 https://www.claudio-erp-plus.com/ 今回Flatt Securityは「Claudio ERP Plus」のFirebase診断とWebアプリケーション診断を実施しました。Firebase診断を実施した感想をクラウディオデジタルオフィスCTOの押野泰平さんに聞きました。 新サービスをローンチするにあたり、Firebaseの脆弱性が懸念に 「Claudio ERP Plus」サービスサイト※開発中 ーーどのような経緯で、Firebase診断が必要になったのでしょうか。 押野
[Xamarin.Forms] Firebase Analyticsを導入してみたので、手順をまとめた！ (Android & iOS) | DevelopersIO
[Xamarin.Forms] Firebase Analyticsを導入してみたので、手順をまとめた！ (Android & iOS) XamarinプロジェクトでFirebase Analyticsを導入してみたので、手順をまとめました。 Xamarin.Forms側からも呼んでみました！ 2019年10月31日に「AndroidとiOS向けのGoogle Analytics」のサポートが終了します。 Google アナリティクス開発者サービス SDK の終了 というわけで、移行する前準備として、XamarinでFirebase Analyticsを試してみました。 Q：なぜXamarin？ A：趣味です！ Firebase Analyticsのイベントについては、下記をどうぞ！ Firebase Analyticsのイベント送信について調べた | Developers.IO 目次 環
HugoプロジェクトをFirebase Hostingに自動デプロイするGitHub Actionsを設定してみた | DevelopersIO
$git pushをトリガにHugoプロジェクトをビルドしてFirebase Hostingにデプロイするまでを自動化するGitHub Actionsワークフローを設定してみました。 Hugoのサンプルプロジェクトを作成する手順も記述していますが、必要なければスキップしてください。 作成したもの サンプルプロジェクトを作成（Optional） rootディレクトリ下にサブディレクトリを作成し、新規Hugoプロジェクトを作成します。 mkdir develop cd develop/ hugo new site sampleWeb Congratulations! Your new Hugo site is created in /develop/sampleWeb. Just a few more steps and you're ready to go: 1. Download a th
FirebaseのバックエンドをGoogle Cloud SQLと接続「Firebase Data Connect」発表。AI用のベクトルサーチも可能に
FirebaseのバックエンドをGoogle Cloud SQLと接続「Firebase Data Connect」発表。AI用のベクトルサーチも可能に Googleは日本時間5月15日と16日に開催したイベント「Google I/O 2024」で、モバイルアプリケーション向けプラットフォーム「Firebase」の新機能として、バックエンドデータベースをGoogle Cloud SQLと接続する「Firebase Data Connect」を発表しました。 Firebaseが提供するバックエンドデータベースはNoSQLデータベースですが、Firebase Data Connectを利用することでFirebaseのバックエンドを通じて、Google Cloudが提供するCloud SQL Postgresデータベースサービスに接続できるようになります。 これによりクライアントアプリケーション
この記事は Firebas Advent Calendar 2020 18 日目の記事です。 SSG や SPA サイトを構築する際に迷うのがお問い合わせフォームの実装です。 今回は Firebase Trigger Email を使って手軽に実装する方法を解説します。 何を作る？ こんな感じのお問い合わせフォームを作ります。 フォームを入力し送信ボタンを押下すると、管理者とフォーム記載のメールアドレス宛に以下メールが送られます。 （CodeSandbox はサンプルです。送信ボタンを押してもメールは送信されません） 管理者側 お問い合わせ実行ユーザー側 技術スタック及び構成は以下の通りです。 これから解説するコードは全てこちらのリポジトリにあります。 Firebase Trigger Email とは？ Firebase Trigger Email は Firebase Extensio
Starter Architecture for Flutter & Firebase Apps using Riverpod
In this tutorial I give a detailed overview of a production-ready architecture that I've fine-tuned over the last two years. You can use the included starter project as the foundation for your Flutter & Firebase apps. Update August 2021: the starter project was originally written using Provider, and later updated to use Riverpod. This tutorial is now up to date and also covers Riverpod. Motivation
はじめに Flutter と Firebase を使って個人でアプリ開発をするときのロードマップを紹介します。 本記事を一通り読めばアプリを公開するまでにやるべきことの大枠をイメージできるようにしました。 広く浅く紹介しているので、もし気になる内容があれば、個別に深掘りしてみてください。 個人開発にフォーカスした記事になっているとはいえ、いくつかの Flutter のお仕事を請けた私自身の経験も反映しているため、お仕事でも活用できる内容も含まれていると思います。 本記事は、ざっくり次の流れになっています。 アプリの構想と具体化 実装に入る前の準備 基本機能の実装 よりよい実装にするための Tips 開発フロー アプリの公開 収益化の話 想定読者 Flutter × Firebase を使って個人開発をしようとしているひと または、既に個人開発をしているひと Flutter を導入するか悩ん
はじめに NextAuth.js は Next.js のために作られた OSS の認証ライブラリです。 このライブラリは主に OAuth もしくは Email で認証したユーザーの情報やセッションを連携したデータベースで自動管理できるのが売りです。他の認証システムで既に認証済みのユーザーを管理する方法もありはするのですが、OAuth や Email 認証に比べるとあまり分かりやすいサンプルコードがありません。防備録も兼ねて、ここで知見を共有したいと思います。 なお、NextAuth ではログイン中のユーザーの情報は firebase.auth.User を React Context で保持するようなことはできず、あくまでユーザー ID など JSON にシリアライズして（JWT のペイロードに含めて）管理できるものだけが対象となります。この記事では Firebase Authentica
サーバーレス(Firebase)で夫婦で共有できる買い物リストを作った - プログラミング素人のはてなブログ
うちは共働きなので、買い物は帰りが早いほうが買い出しをすることが多いですが、例えば洗面所周りは、モノの消費を妻のほうが把握していることが多いのでこれらを共有する仕組みを作りたかった、というところから始まりました。 Firebaseなら無料で作れそうなので、FirebaseとJavaScriptを合わせて勉強しながら作ってみました。 完成イメージ。 完成イメージ 要件定義・夫婦で共有できること。 ・無料で使えること。 ・Androidでもiphoneでも使えること。 ・入手済みのものを保存できること。 上の3つはFirebaseを使う時点で成立します。 4つ目は「欲しいものリスト」と「入手済みリスト」を作ることで実現しました。 htmlhtmlの本文はタイトル、入力ボックス、ボタンなどとリストulです。リストは名前を付けるために、 form name="form1”で囲みます。 <body>
Firebaseで実現するiOSサブスクリプション
個人開発しているアプリ でサブスクリプションによる有料プランを提供しており、そのバックエンドにはFirebase(Authentication, Firestore, Cloud Functions)を使っています。 運用が難しそうな課金周りのバックエンドも、Firebaseで実現することでサーバー管理など不要で、個人開発でも安定してサービス提供できます。 今回はその大まかな実現方法とともに、個人開発でも意外と容易にサブスクリプション導入できることを紹介します。 尚、この記事は典型的な、有料プラン１種類のみ提供することを前提に書かれています。異なる種類・期間のプランを複数提供する場合は、アップグレード・ダウングレード・クロスグレードを考慮する必要があり、より複雑なものになります。 また、iOS以外の、WebやAndroidなどのプラットフォームで並行してサービスを提供する場合も、課金状態の
やりたいこと 下記のような感じ。 ログイン必要ページと不要ページを作成し、ログイン必要ページへのアクセスにはチェックを入れる。 かつ、それをreact-router-domで、わかりやすくきれいに書きたい。 完成イメージ 各ファイルの画面イメージ（画面のあるもの）は下記ような感じ。 準備 雛形の作成とモジュールのインストール create-react-appを利用します。 作業フォルダ作成後、必要なモジュールをインストールします。 create-react-app auth-test cd auth-test yarn add react-router-dom firebase bootstrap reactstrap react-loading-overlay formik yup 各モジュールの役割はおおよそ下記のような感じ。 react-router-dom : 言わずとしれたルーテ
Send feedback Firebase security checklist Stay organized with collections Save and categorize content based on your preferences. To keep your Firebase resources and your users' data secure, follow these guidelines. Not every item will necessarily apply to your requirements, but keep them in mind as you develop your app. Avoid abusive traffic Set up monitoring and alerting for backend services To d
Firebase has kept a stable JavaScript interface for around 5 years now. If you wrote the following line of code 5 years ago, it would still work today. import firebase from 'firebase/app'; import 'firebase/auth'; firebase.initializeApp({ /* config */ }); const auth = firebase.auth(); auth.onAuthStateChanged(user => { // Check for user status }); No one wants to rewrite code for the sake of rewriti
【React Native × Expo × Firebase】個人開発でGoogleMap × InstagramのようなSNSアプリを個人開発している話 - Qiita
はじめに 記事をご覧いただきありがとうございます。 先日GoogleMap×InstagramのようなSNSアプリ「Stoma」を個人で開発し、Apple Storeにて公開したので、 Expoでのリリースまでの流れと所感をできるだけわかりやすくかけたらと思います。 プロフィールと開発歴 国立大学の経済学部に通っている大学3年です。 周りが就職活動をしている中、一人で家に引きこもりアプリ開発に勤しんでいました。 エンジニア歴は2年半ほどです。 1年ほどは海外のWebベンチャーにてインターンにてプログラミングを勉強。 その後Web系のスタートアップで2社合計1年ほどインターンをしていました。 PHPを半年、 Railsを約2年、 React(Native)を約1年ぐらいです。 リリースしたアプリ Stomaという、 GoogleMap×Instagram のようなアプリを開発しました。 友人
こんにちは。freee APIチームでエンジニアをしているkotegawaです。 去年のAdvent CalendarではAPIのスキーマ駆動開発についての記事を書いて、APIの基盤を整える話をしました。 おかげさまでfreeeの公開APIも当時からendpoint数が40個以上増え、今では freee アプリストア というfreee APIを使ったアプリのプラットフォームに60以上のアプリが並ぶほどの盛況ぶりになっています。 今回はそんなfreeeのAPIを使ってAPIチームがFirebaseを使って自らアプリを作ってみた話をしてみます。 freee アプリストアに掲載しているfreee製アプリ「外貨建取引管理アプリ」の例 この記事はfreee Developers Advent Calendar 2019の21日目の記事です。 会計のWebアプリを作った背景 そもそも本体のアプリを作ろ
Sign in with Apple with Firebase AuthenticationとDelegateをRx化する話 - ペンギン村 Tech Blog
はじめに お疲れ様です。かむいです。 この記事はiOS Advent Calendar 2019の17日目の投稿となります。 前回は@codelynxさんの名前付き UIView と後付けストアドプロパティもどきでした。 先月Firebase AuthenticationでSign in with Appleが利用できるとの発表がありました。 firebase.googleblog.com それまでは@fromkkさんが書かれていたようなCloud Functionsを利用したやり方でも近い仕組みを実現できていましたが、やはりFirebase Authentication単体で処理が実現できるのは嬉しい限りです。 qiita.com 今回はこのFirebase Authを利用した実装の紹介だけでなく、実装の中で登場するDelegateメソッドをRx化し、RxSwiftを利用しているケースを
前提知識 React：インタラクティブな Web フロントエンド（クライアント上で稼働する Javascript）を実装するためのライブラリーで、状態変数の値の変化を自動的に画面に反映する機能があります。 Firebase：モバイルアプリのバックエンドを Google Cloud で提供するサービスで、ユーザー認証やユーザー管理などの機能を専用のライブラリで簡単に実装できます。 Cloud Run：アプリケーションのコンテナイメージを Google Cloud 上にデプロイして実行するサーバーレスタイプのサービスで、オートスケールなどの機能が簡単に利用できます。 なんの話かというと 上記の3つの技術（サービス）を組み合わせて、 エンドユーザーは、Google アカウントで Web アプリケーションにログインする Web アプリケーションから Cloud Run で稼働するバックエンド AP
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース
Firebase Analyticsのリアルタイムデバッグ方法(iOS) - Qiita
arXivをチェックするwebアプリをReact+Firebase+FaunaDBで作った｜mygle｜note
Vue.js + Firebase + OGP画像生成 本当に爆速で作れた！ - Qiita
FirebaseでPush通知を実現しよう！ Firebase Cloud Messagingを用いた通知システム
[JS] Firebaseの覚書 ① メールアドレス認証
Nuxt(Vue.js) × Firebaseでリアルタイムチャットアプリを作ってみよう！ | Techpit
DockerでFirebase Local Emulator Suiteを起動する。 - Qiita
Firebaseとは？Google社の強みを活かしたメリットや機能をご紹介｜Udemy メディア
Firebaseのカレンダー | Advent Calendar 2019 - Qiita
Firebase Trigger Email で作る SPA サイトのお問い合わせフォーム
Flutter × Firebase ではじめる個人開発
NextAuth.js と Firebase Authentication の連携
ReactでFirebase Authenticationを使う - Qiita
Firebase security checklist
Deep dive into the new Firebase JS SDK design
はじめに｜Firebase Cloud Firestore Security Rules Essentials
Firebaseで作るお手軽業務アプリ - freee Developers Hub
React と Firebase と Cloud Run を連携するサンプル実装 - めもめも