Firebase Authenticationを利用する【Javascript、Vue.js】 - Qiita
Firebaseとは Firebaseは、Googleが提供するバックエンドサービスです。いわゆる、BaaS(Backend as a Service)です。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 Firebaseには、以下のような様々な機能が提供されています。 Firebase Authentication アカウント機能を提供します。メールアドレスとパスワードを使用した一般的な認証の他に、電話番号、匿名認証、TwitterやGoogleアカウント、FacebookなどのSNS認証を使用できます。 Re
FirebaseUIを使用してexport 'default' (imported as 'firebase') was not found in 'firebase/app' と表示された時の対処 - Qiita
warning in ./node_modules/firebaseui/dist/esm.js "export 'default' (imported as 'firebase') was not found in 'firebase/app' Firebaseは2021年8月25日にv8→v9に正式にアップデートされ、npm install --save firebaseとすると自動的にv9がインストールされます。 ですが2021年9月8日現在、Firebase UIはFirebase JS SDK v9に対応していません。 そのため上記のようなエラーが発生します。 FirebaseUIを使う際は後述のcompat(互換)ライブラリを使用してv8以前のように書く必要があります。 compatライブラリ Firebase JS SDK v9以前のコードを使えるようにする一時的な措置として
GitHub - yukinaga/flutter_ai_app: YouTubeライブの講義「【Flutter+Firebase+MLKit】人工知能（AI）を搭載したiOS、Androidアプリを作ろう」、およびUdemyコース「【Flutter+Firebase+MLKit】人工知能（AI）を搭載したiOS、Androidアプリを作ろう」で使用する教材です。
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
株式会社 バベル CTO 兼 Firebase Japan User Group 創設者が語る Google Cloud の魅力とは | Google Cloud 公式ブログ
株式会社 バベル CTO 兼 Firebase Japan User Group 創設者が語る Google Cloud の魅力とは 編集者注: Google Cloud を利用する企業のリーダーの皆様にお話を伺い、想いを語っていただく Google Cloud Leader’s Story。連載 1 回目となる本記事では、株式会社バベル (以下、バベル) の CTO であり、Firebase Japan User Group の創設者である久保田量大氏に話を伺いました。 「世界中の人々の役に立つ事業を創り続ける」をミッションに、AI（人工知能）及び ML（機械学習）を活用し、仕事の生産性を飛躍的に向上させるグローバル事業を創ることを目指すバベル。事業の中でも、AI を用いて商談の解析を行うプロダクトである ailead （エーアイリード）の開発をメインで行っています。今回は、バベルの
Firebase Cloud Functionsのセットアップから実行、テストまで、開発で利用するにあたって必要な一通りの知識をチュートリアル形式で詳しく解説します。
firebaseでファイルをストレージに送ってもらう＋送信されたらsmtp.jsをつかってメールを送信して通知する - Qiita
Email.send({ Host : "smtp.gmail.com", Username : "Gmailアカウント", Password : "Gmailパスワード", To : '送りたいアドレス', From : "Gmailならアカウントのアドレス", Subject : "件名", Body : "本文" }).then( message => alert(message) ); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>docs portal</title> <script defer src="/__/firebase/5.3.1/firebase-app.j
Firebase Cloud Functionsで関数をモジュール分割しつつ、Cold Start対策も行う
Firebase Cloud Functionsで関数をモジュール分割しつつ、Cold Start対策も行うSunday, July 12, 2020 FirebaseのCloud Functionsを使って開発する上で、関数をモジュール分割して管理する方法やCold Start対策の方法を見たことがある/実践している方が多いかなと思います。 一方で、この2つを組み合わせて導入しようとするととても大変で、重複したコードが大量発生したり、今後新しい関数を追加する毎に記述コストが高くなったりする可能性がでてきます。 今回はそれぞれのテクニックの簡単な紹介と、その2つを組み合わせつつ、できる限りコードをクリーンに保つ方法を紹介します。 関数をモジュール分割して管理する 何も考えずにエントリーポイントになるindex.tsに多量の関数を定義すると管理するのが大変になります。 Cloud Funct
[Firebase] Cloud Functionsの実行結果をCDNにキャッシュする - ねこの足跡R
Firebaseで動的に情報を出力する場合にCloudFunctionsを利用するわけですが、頻繁に情報が変化しない場合など実行結果を一定時間キャッシュしたくなりますよね。Firebaseでは非常に手軽に実装できます。 結論から言うと以下のようにCache-Controlヘッダを出力するだけ。以下で30秒間Firebaseが用意するCDNに実行結果がキャッシュされます。publicのつけ忘れにご注意を。 res .set("Cache-Control", "public, max-age=30") .send("キャッシュされるよ"); 最初これを知らずにCDNを別途用意して、Firebase側をオリジンに設定しようとしていましたｗ 危ない危ないｗ サンプル 実行例 コード Cache-Controlヘッダ public max-ageとs-maxage 注意点 GET/HEAD以外はキャ
![[Firebase] Cloud Functionsの実行結果をCDNにキャッシュする - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/fca7858710a0a1be859617a5d8d93bdaf7b6ac33/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061406590%2F1701343612)
RubyでFirestoreからデータを取得したり追加したり 今回は、RubyでFirestoreからデータを取得する際のクエリ発行してくれるコードやデータを追加するコードに関してまとめます。 Firestoreとは Firebaseが用意しているNo SQLのクラウドデータベースです。 用語 Firestoreにおける用語はとりあえず、下記の３つを知っておけば大丈夫だと思います。 Cloud Firestore データモデル コレクション データ（ドキュメント）を格納する大枠。FirebaseコンソールのサイドバーにあるCloud Firestoreをクリックすると、画面の1番左にあるのがコレクションになる。1つのコレクションに、それに関するデータ（ドキュメント）が保存されていく。 ドキュメント コレクションに格納されていくデータ。データは一意のドキュメントIDというもので管理されており
FlutterアプリでSentryとFirebase Crashlyticsにエラーレポートを送りアプリの品質改善に役立てる | wapa5pow blog
FlutterアプリでSentryとFirebase Crashlyticsにエラーレポートを送りアプリの品質改善に役立てる Flutterアプリとしてエラーは大きく2種類あります。 Flutter/Dart側で起きるエラー ネイティブ(Android/iOS)側で起きるエラー 今回は、1をSentryで、2をFirebase Crashlyticsで収集します。本当はどちらともFirebase Crashlyticsで収集したかったのですが、Crashlyticsのほうは、iOSで同じエラーでも以下のように別々のエラーとして扱われてしまったのでSentryとCrashlyticsを使っています。同じように扱える場合は、Crashlyticsで統一したいですね（ここ解決する方法しっていたら教えてください）。 Sentryの導入 まずあらかじめSentryでアカウントを作っておきます。Sen
Google Sign-In & Firebase Authentication Using Flutter | Codemagic Blog
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. In this article, I will show how to set up a Flutter app and implement Google Sign-In using Firebase authentication. NOTE: This
[Firebase][iOS] Firebase Crashlytics を導入してみよう | DevelopersIO
はじめに CX事業本部の中安です。 「Firebaseを触ってみるシリーズ」の続きになります。 ここまでは Firebase Authentication で会員機能を作ってみよう Firebase Cloud Firestore でプロフィール機能を作ってみよう Firebase Hosting でキャンペーンページを作ってみよう というお題で書かせていただきましたが、 今回はFabricから移行されてきた Firebase Crashlyticsを開発中のアプリに取り込んでみたので、その流れをご紹介できればと思います。 またもウダウダと書きますが、何かのお役に立てば幸いです。 Firebase Crashlytics Firebase Crashlytics は軽量なリアルタイムのクラッシュ レポートツールで、アプリの品質を低下させる安定性の問題を追跡し、優先順位を付け、修正するのに役
![[Firebase][iOS] Firebase Crashlytics を導入してみよう | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/eea80a2a9825f5cf21f4553e6714856a365a2bc7/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F02%2Ffirebase-eyecatch.png)
【React Native】ExpoでFirebase AuthenticationのSNS認証を利用する方法 - Qiita
まえがき CRNA(create-react-native-app)で作成したアプリケーションで、Firebase AuthenticationのSNS認証を行う方法をまとめます。 →こちらで紹介しているGoogleの認証方法はExpo側で廃止予定なようです。。。 ※GoogleアカウントとFacebookアカウントでのSNS認証を解説します。 準備 npm install create-react-native-app -g create-react-native-app firebaseAuthSample cd firebaseAuthSample npm install firebase --save Facebook認証 Facebook - Expo Documentationに実装の仕方が書かれています。 流れとして、Expo Client AppでFacebook認証を利用
Cypress で Firebase つかったログインをテストする 結論: jest-puppeteer で我慢できるならそっちのほうがいい https://github.com/cypress-io/cypress/issues/408 を見てくださいで終わってしまう話なのだが、 Cypress はサードパーティーの cookie をクリアすることが出来ない。これは典型的にどういうときに問題になるかというと、 Firebase のような外部の認証プロバイダーを用いてアプリにログインしているとき、テストの実行事にログインセッションがクリアされない。 これが大きな問題であることは明らかで、↑のとおり Cypress の創業者もこれを改善する意思を示しているのだが、実際これを実装する難しさは issue で説明されてる通りで 3 年間放置されている。 https://github.com/cy
Recoil Atom Effects で Firebase Authentication の認証状態を管理【前編】
はじめに Recoil のAtom Effectsという機能を使えば Firebase Authentication の認証状態をシンプルに管理することができます。 この記事ではまずAtom Effectsについて解説してから、後編で具体的な実装を説明します。 この記事【前編】 Atom Effects とは？ Atom Effects の詳細 Atom Effects の使用例 Atom Effects 使用における注意点 次回の記事【後編】 Firebase Authentication との使用例 Recoil とは？atom とは？ Recoil は React の状態管理ライブラリです。 atomは Recoil の中で状態を保持する単位です。 この記事では Recoil 自体の解説はしません。 Atom Effects とは？ atomにとっての Atom Effects は
firebaseのAPI keyを公開して良い理由
Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。
Firebase ML Visionを使ってリアルタイムにバーコードをスキャンする機能を自作した - Qiita
概要 FlutterではQRスキャン機能を持ったパッケージが複数あるが、スキャン部分がネイティブで書かれていたりして微妙に使い辛い。 また、Flutterのグレードアップに伴って利用できなくなるケースも多々ある。（本業では苦しめられた） 苦しめられたくないので、Google公式のパッケージであるcameraとFirebaseMLを組み合わせてスキャン機能を自作した。 これを応用することで、リアルタイム顔認識機能やOCR機能をアプリに組み込むことも可能。 Flutterを実運用し始めてから約1年強、パッケージの依存関係には散々苦しめられたので、できる限り自作していこう（自戒）。 実際の挙動はこちら。 実装 FirebaseをFlutterに組み込む方法や、FirebaseMLの環境設定などは公式ドキュメントに載っているので割愛する。 今回必要なパッケージはcameraとfirebase_ml
【BigQuery】Firebase AnalyticsのDAU, WAU, MAUを取得するクエリ(新スキーマ) - Qiita
【BigQuery】Firebase AnalyticsのDAU, WAU, MAUを取得するクエリ(新スキーマ)BigQueryFirebase SELECT date, SUM(CASE WHEN period = 1 THEN users END) as days_01, SUM(CASE WHEN period = 7 THEN users END) as days_07, SUM(CASE WHEN period = 30 THEN users END) as days_30 FROM ( SELECT dates.date as date, periods.period as period, COUNT(DISTINCT user_pseudo_id) as users FROM `firebase_project_table.app_events_*` CROSS JOIN
Firebase JavaScript SDK v9 + Authentication で認証を実装する - Qiita
Firebase JavaScript SDK が、v9で大きく変わりました。 バージョンアップに伴い、Authenticationの実装の仕方もかなり変わったため、メモを残しておきます。 Firebase JavaScript SDK v9 の仕様 v9では、SDKの中から必要なモジュールだけを読み込んで利用する「Tree Shaking」という手法を採用しています。webpackなどで採用されている手法です。 JavaScript SDK v9 を利用した認証の実装 今回の変更を踏まえて、Firebase Authenticationの認証を実装してみました。 ディレクトリ構成 今回のサンプルはこんな構成で作成しました。 ├── dist │ ├── bundle.js │ └── index.html ├── firebase.json ├── node_modules ├─
【CRMに必須】LINEミニアプリ / LIFFでLINEのUIDを取得して保存。認証・DBはFirebaseで試してみた
どもー、BULB加藤です。 LINEミニアプリやLIFFの開発をするのであれば、CRMのためにLINEのUIDを取得して活用しなければ効果半減です。 これまでLIFFの立ち上げやAPI動作確認をしてきましたが、実用を見据えてUID取得とDB保存を試してみます。 前提 ReactでLIFFが動かせる状態を前提とします。できていないときはとりあえずこちら。 ローカルで手軽に試すための設定はこちら Firebaseで認証とデータベースを準備 とりあえずお手軽に。認証はFirebase Authentication、DBはCloud Firestoreを使います。 Firebase Authentication : メール認証を有効化 とりあえず最低限の設定ということで、メール認証だけ有効化します。いくつかテスト用のデータを入れた状態。 Cloud Firestore : collectionを作
Handling user authentication with Firebase in your React apps - LogRocket Blog
Editor’s Note: This blog post was reviewed and rewritten 6 August 2021 by Atharva Deosthale to include the newest features of Firebase and clarify the original tutorial’s instructions. It was updated again 10 January 2022 to address breaking changes with the release of Firebase v9. Nowadays, security is very important on websites and apps. That’s mainly to ensure that private data is not leaked to
Serverless連載4: Firebase CrashlyticsでAndroidアプリのエラーログをさくっと収集する | フューチャー技術ブログ
Serverless連載4: Firebase CrashlyticsでAndroidアプリのエラーログをさくっと収集する はじめにこんにちは、Android Developerの佐藤です。 サーバーレス連載の4回目を担当します！ モバイルアプリ品質強化の強い味方となってくれるFirebase Crashlyticsを紹介したいと思います！ そもそもFirebaseとはFirebaseとは、AndroidやiOSなどのモバイルアプリのバックエンド機能を提供してくれるサービスです。 提供されているサービスは、利用状況の解析、クラッシュの検知、認証、通知、ホスティングなど多種多様です。 これらのサービスを利用する上で、サーバーの管理が不要なのはもちろん、導入する上で追加のコーディングはほぼ必要ありません。 Firebase SDKをアプリのソースコードに組み込むだけで、Firebaseの機能を
FirebaseはGoogleが提供するサービスの一つでモバイルアプリやWebアプリケーション開発で用いられる人気プラットフォームです。BaaS（Backend as a Service）と呼ばれるクラウドサービスの一種に分類されます。Firebaseに関して詳しく知りたい方は以下記事を参照してみてください。 今日、インターネットを使用したWebシステムは必要不可欠なものとなっていますが、その始まりはCERN（欧州原子核研究機構）のティム・バーナーズ＝リー博士が、「研究者間で膨大なデータの交換や閲覧をスムーズにするシステムを作る」という目的で開発… この記事ではFirebaseが持つ機能の一つFirebase Hostingを用いてHTML、CSS、JavaScript、画像ファイルなどを短時間で静的ホスティングする方法を紹介します。 Firebase でプロジェクトを作成するFireba
Firebase AuthenticationとVuexの合わせ技バグでハマった - kuntalog
TL;DR Vuexのstoreにobjectを渡すときは気を付けよう。 Vuexのstoreにはできるだけ即値（って呼び方でいいのか？）を入れる。 内容 Firebase authenticationとVuexを使ってこういうのを書いてた。 export default { // ... created() { firebase.auth().onAuthStateChanged((user) => { this.$store.commit('setCurrentUser', { user }); }); }, // ... }; するとChromeのdevtoolが真っ赤になった。 Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate
突然ですがこれを読んでいる皆さんはログイン機能を作ったことはありますでしょうか？筆者はFirebase Authenticationに触れるまで、ログイン機能というものを作ったことがありませんでした。何となく、ログイン機能を作るのは難しいという認識を皆さんも持っているのではないでしょうか。 ログイン機能とは、「ユーザの認証」と「システムにログインできること」という認可をおこなうことの組み合わせです。 認証と認可の違い 認証はユーザーが誰かを確認することです。認可は確認したユーザーがリソースに対するアクセス権限を持っているかを確認し、権限を持っている場合はリソースへの読み書きを許可します。 近年はOAuthやOpenID等の認証方法が登場し、それぞれの認証方法に対応したアプリケーションコードを毎回書くのは大変です。そこに登場したのがFirebase Authenticationです。Fire
[検証]SvelteKitで作成したサイトをCloud RunにデプロイしてFirebase Hostingで配信してみた
はじめに 先日プレビュー版としてリリースされた Firebase Hostingを使ったCloud Runの動的コンテンツの配信 をSvelteKitを使って実践した記録です。 ※ Cloud SDKの設定は完了して gcloud コマンドが使える前提です ※ SvelteKitの作成部分は割愛しています -> こちらを利用しています https://kit.svelte.jp/docs/creating-a-project やってみてどうだったか？ Cloud SQLなど使ったCloud Runで構築したサイトを気軽にカスタムドメインとCDNを使って配信できるようになる 今までなら、Cloud Load Balancerを経由してやらないとできなかった点ができるようになった Cloud Run自体のドメインマッピングもあるが、これはGAになるのだろうか。 コスト的な面でも、Firebas
![[検証]SvelteKitで作成したサイトをCloud RunにデプロイしてFirebase Hostingで配信してみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7b2ad5969b727cfd0db54e1831098f356e015fd/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--nCWZHzj8--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B%2525E6%2525A4%25259C%2525E8%2525A8%2525BC%25255DSvelteKit%2525E3%252581%2525A7%2525E4%2525BD%25259C%2525E6%252588%252590%2525E3%252581%252597%2525E3%252581%25259F%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592Cloud%252520Run%2525E3%252581%2525AB%2525E3%252583%252587%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525A4%2525E3%252581%252597%2525E3%252581%2525A6Firebase%252520Hosting%2525E3%252581%2525A7%2525E9%252585%25258D%2525E4%2525BF%2525A1...%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYamato%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2llSURCdEhndThmS3BtMWFNejlZYTByMHBmSDVpejdMVnN6Sm5oPXMyNTAtYw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
といった感じで利用できるようになります。 多くの場合管理者とユーザーの区別等に利用されますが、もちろんadminというキーワード以外も利用できます。 Custom Claimの制限 Custom Claimにはいくつかの制限というか条件があります。 admin権限でしか利用できないので実運用ではfunctionsと組み合わせて利用することになるでしょう。 admin権限じゃないと付与・管理できない（クライアントライブラリからは操作できない） 1000バイト以下 Custom Claimの設定 では実際に設定してみます。 ここではuid直設定していますが、実際はプログラム中で取得することになるでしょう。 functionを作ればuidを引数で受けとるとか。 const admin = require('firebase-admin'); const serviceAccount = requ
Firebase Authenticationを用いた「やってはいけない」システム設計の話 - Xtone Design & Tech Talk
エクストーンの豊田です。先日、エクストーン社内で技術勉強会があり、そちらでFirebase Authenticationを利用してWebサービスを設計・運用した際に困った話をさせていただいたので、こちらでも紹介させていただきたいと思います。 Firebase Authentication FirebaseはGoogleが提供しているモバイル・Webアプリケーション向けのプラットフォームで、認証やストレージ、関数実行等の機能を提供します。今回はFirebaseが提供する認証サービスであるAuthenticationについてお話しします。 Firebase Authenticationはユーザーの管理や認証を行うサービスで、メールアドレス・パスワードによる認証の他に、同じユーザーに対してGoogleアカウントやApple IDを利用した認証を紐づける等が可能です。ユーザーの管理自体をFireb
2021/03/04PostgreSQLが使えるFirebase！？噂のSupabaseを使ってみた感想 英語で読みたい方はこちら My first impression of Supabase - The better version of Firebase!? - DEV Community 👩💻👨💻 Supabaseとは ウェブサイトでは以下の様に書いてあります。 The Open Source Firebase Alternative つまり オープンソースなFirebase代替プロダクト といったところでしょうか。 The Open Source Alternative to Firebase. | The Open Source Firebase Alternative | Supabase Firebaseと同じように認証、データベース、ストレージ（Coming
Firebase Hostingで独自ドメインからHello World出すまで(2019/04版) - Qiita
TL;DR (長い3行で) Firebase HostingにHello World出すHTMLをデプロイ ドメインはムームードメイン等で適当に取得 ブラウザ等から独自ドメインにアクセスしてHello WorldのHTMLを表示させる Firebase Hostingのセットアップ ↓ のFirebaseのConsoleから適当なProjectを作成しておきます． https://console.firebase.google.com Firebase CLI Install コマンドラインからFirebaseを制御するためのTool. # Install, あらかじめNodeのInstallが必要 $ npm install -g firebase-tools # Firebase Consoleから作ったProjectと同じアカウントでLogin $ firebase login 自U
GitHub - TheAlphamerc/flutter_twitter_clone: Fully functional Twitter clone built in flutter framework using Firebase realtime database and storage
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Over the last weeks we have successfully moved more than 6 million user accounts from Auth0 to Firebase. Silently. Without anyone noticing. Without logging anyone out. Take a look at the following chart, which shows the activity on our platform during the transition. In this post I talk about how we achieved this and what challenges we had to face. Including the timeline of the rollout and some te
00. 初めに 本記事は、Firebaseでアプリをデプロイする手順をまとめたものです。 自己学習の一環でアプリを作ったのですが、折角なのでデプロイすることに。その際にFirebaseを利用したので、手順を備忘録にしてみました。 Firebase使ったことないけど、気になっている、使ってみたい . . . そんなあなたのお役に立てれば幸いです。 そもそもFirebaseとは何か、という説明のほかの記事1に譲り、ここでは手順のみを紹介したいと思います。 尚、適切でない表現や誤字・脱字などありましたら、ご指摘いただけると嬉しいです。 01. ツールをインストールしよう 以下の環境で期待通り動作することを確認しています。(2019/11現在) OS : Windows10 Home Node : v11.13.0 npm : v6.11.3 Nodeのインストールはこちらから(Nodeを入れる段
この記事はQiitaのトレンドランキングで1位を獲得しました この記事で伝えられること 「WEBサービスってどうやってつくるの？」への回答例 新人WEBエンジニアの方が素早く・簡単にWEBサービスを開発できる技術アセット・開発例 WEBサービスの開発・公開までに必要そうな一連の手順例 ※ この記事は、実務経験の乏しいWEB開発未経験者〜新人WEBエンジニアに向けて書かれています。 ※ ソースコードレベルの話はほぼ出てきません。 ※ 個人開発のWEBサービスの公開までに必要な手順例として、4日間でやったことを紹介しています。 1. つくったもの ワンクリックで位置を共有できるWEBサービス。その名も「いまここ」。 https://imakoko.tokyo https://twitter.com/imakoko17 ごくちいさいサーバーレスSPAです。 着手から公開までを約4日間（人日換算）
はじめに オウンドメディアをJAMStack構成（Gatsby.js + microCMS + Firebase Hosting）で作成しました。 microCMSで記事を投稿・更新・削除した際に、GitHub ActionsへのWebhook通知を用いて、自動でデプロイするように設定したので、その忘備録としてまとめました。 間違えている部分や「こうした方がいいよ！」とかあればコメント頂けると幸いです。 今回参考にした記事は以下の2つの記事です。ありがとうございました。 GitHub ActionsへのWebhook通知に対応しました Nuxt × Firebase アプリケーションを GitHub Actions で自動デプロイ microCMS側の設定 microCMSとGitHub Actionsでの連携をするには、microCMSの管理画面から、API設定の「Webhook」を開き
Today, Google I/O 2022 kicks off and we’re thrilled to share the updates we’ve made to Firebase. The past couple of years have proven that apps are an indispensable part of our lives because they not only simplify daily tasks, they keep us informed, entertained, and connected to each other. That’s why we’re committed to providing you with the tools and resources you need to build and grow apps peo
base='https://osaka5-default-rtdb.asia-southeast1.firebasedatabase.app' Realtime Databaseを開き、赤枠内をbase変数に設定 Firebaseプロジェクト作成(80秒) Firebaseは無料で利用できます。クレカは登録してはいけません データを追加 curl
Firebase Cloud Messaging でウェブプッシュ通知するFirebase Cloud Messaging(FCM) でウェブプッシュ通知の送受信をします。プッシュサービスを含むプッシュ通知を取り巻く全体像を広く浅く解説します。通知メッセージのクリック処理や、ユーザートークンの削除についても触れています。 はじめにFirebase Cloud Messaging (通称 FCM) はクロスプラットフォームにメッセージ送信する仕組みです。 これを使うことで、Web プッシュプロトコル を考えることなく、プッシュ通知を実装できます。 FCM は無料で利用できるので、ユーザーエンゲージメントを高める手段として有効です。 今回は、FCM をウェブアプリで使う方法を紹介します。 FCM と利用制限FCM は 多くの Web API を利用します。具体的には、Window スコープでは
先日、はじめてFirebaseを使ったSlackアプリをつくったのですが、そのときに開発環境と本番環境を分けたくてFirebaseだとどうやってやるんだろう？と思い調べてみました。これ書いてて気づいたのですが、ぶっちゃけこのくらいの規模であればエミュレーター使ってローカルで確認でも良かったかもしれない😂 前提 この記事では、環境を分けたい場合の手順を中心としたいため、Firebaseのプロジェクトを作成する手順について詳細は触れません 公式ドキュメントのこちらやこちらなどを参考にしていただければさいわいです！ 手順 Firebaseプロジェクトを環境ごとに作成 Firebase CLIでプロジェクトを確認する 環境ごとのプロジェクトを設定する 使用したい環境のプロジェクトをアクティブにする 1. Firebaseプロジェクトを環境ごとに作成 公式ドキュメント等を参考にFirebaseコン
本書では、クラウド画像管理アプリの開発を通じて、Flutter・Firebaseを使ったアプリ開発に必要な知識・技術を広く獲得することを目指します。 プログラミングを学ぶのではなく、アプリ開発を学ぶことをテーマとしています。ですので、プログラミング言語・ライブラリなどの細かい使い方の説明は行っていません。一方で、仕事や個人でアプリ開発をする際に必要となってくる、設計・アーキテクチャ・状態管理といった内容を盛り込んでいます。 また、本書ではプログラミング言語の文法や開発環境の構築方法など、基礎知識を習得している方を対象としています。FlutterとFirebaseを使ったアプリ開発に全く触れたことのない方は、著者が運営している「Flutterで始めるアプリ開発」を事前に終了することをおすすめします。 【Flutterで始めるアプリ開発】 ・https://www.flutter-study.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Firebase】Cloud Functions チュートリアル
RubyでFirebaseのFirestoreからデータ取得と追加する方法 - Qiita
Cypress で Firebase つかったログインをテストする - Diary
Firebase Hosting を使った静的サイトのホスティング方法
面倒なログイン機能の実装はFirebase Authenticationに丸投げしよう
FirebaseのCustom Claimを利用する - Qiita
PostgreSQLが使えるFirebase！？噂のSupabaseを使ってみた感想 - バンクーバーで考え中
How we moved 6 Million Users from Auth0 to Firebase
Firebaseでデプロイしよう！ - Qiita
【Vue.js×Firebase】3日で位置共有WEBサービスを作った話【個人開発】 - Qiita
microCMSからGitHub ActionsへWebhook通知し、Firebaseにデプロイする。 - Qiita
What's new from Firebase at Google I/O 2022
Firebase Database NoSDK - Qiita
Firebase Cloud Messaging でウェブプッシュ通知する | miyauci.me
Firebaseで開発環境と本番環境を分けたい
作って学ぶ、FlutterとFirebaseを使ったアプリ開発