Build Get to market quickly and securely with products that can scale globally
Build Get to market quickly and securely with products that can scale globally
iOS Simulatorで起動したFlutterアプリから送信されるFirebase AnalyticsのイベントログをDebug Viewでリアルタイムに確認する こんにちは、CX事業本部 IoT事業部の若槻です。 Firebase AnalyticsではDebug Viewを使用することにより、アプリから送信されるイベントログをリアルタイムでコンソールから確認することができます。 今回は、iOS Simulatorで起動したFlutterアプリから送信されるFirebase AnalyticsのイベントログをDebug Viewでリアルタイムに確認してみました。 やってみた デバッグするアプリおよび環境は、以前のエントリで作成したものを使用します。 main.dartのコードは次のようになります。 lib/main.dart import 'package:flutter/mater
本記事はNRIネットコム Advent Calendar 2021 21日目の記事です。 🎄 20日目 ▶▶ 本記事 ▶▶ 22日目 🎅 はじめまして、廣岡です! 入社後4年程モバイルアプリの開発案件に携わり、現在はGoogle アナリティクスを中心としたGoogle マーケティング プラットフォーム(GMP)の導入、活用におけるテクニカルサポートを行っています。 Google アナリティクス 4(以下、GA4)の登場で、ウェブサイトとFirebaseで計測されたモバイルアプリの計測データを同じレポート上で見ることができるようになったこともあり、アプリ計測に関するご相談をいただくことが多くなったように思います。 本記事では、Firebaseでアプリを計測するための計測設計を実施させていただく際に、必ずお客様にお伝えしていることについてお話していきます。 はじめに 前提として、GA4のレ
Build Get to market quickly and securely with products that can scale globally
For Google I/O, we teamed up with the Flutter team to reimagine a classic pinball game built using Flutter and Firebase. Here’s how we brought I/O Pinball to life on the web with the help of the Flame game engine. Game development essentialsThe Flutter framework is a great choice for building games driven by user interaction, such as puzzles and word games. When it comes to games that use a game l
📦 作ったもの GitHub Trendingに掲載されたリポジトリを定期的につぶやく Twitter Bot を作りました。 全体のトレンドをつぶやく@gh_trending_と、JavaScript・TypeScript のトレンドをつぶやく@gh_trending_jsの 2 種類があります。 @gh_trending_ @gh_trending_js 仕様はこちらです。 30 分から 1 時間おきに GitHub Trending に掲載されているリポジトリをツイート 一度ツイートたリポジトリは再度掲載されていても 1 週間はつぶやかない 投稿内容はリポジトリ名、URL、スター数、作者の Twitter アカウント、言語、概要 技術スタックは Firebase Cloud Functions と Firebase Firestore です。 実装コードは全て以下リポジトリで公開し
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
業務の方で認証基盤のリプレイスを行っていて、その際に行ったサービス選定のメモです。 自身が身を置いている会社のサービスでの認証基盤は、パスワードをDBで管理している状態で危殆化リスクがあったり、強固な認証(MFAなど)を入れづらい状態にありました。 今では様々なプロダクトが、認証の処理は他のサービスに任せる傾向にあると認識しております。そもそもセキュリティの分野は奥が深い(自身もほとんど理解できていない)ですし、プロダクトの成長にフォーカスしたいのに、セキュリティの分野に時間を割くのは悪手でしょう。 自社のプロダクトも例にもれず、プロダクトの開発自体にフォーカスするために認証サービスを導入しようという運びになりました。 サービス候補選び 調べてみると想像より多くのサービスが存在することがわかりました。 Amazon Cognito AWS Amplify Authentication Au
IoTと設備制御を現実的にやろうとするときに直面するのは、実際に客先に納入したときの【使い勝手】をどこまで実現できるかというところ。 自分が研究・開発レベルでやるのであれば、Node-REDのInjectionノードでも十分ですが、それでは納品物としていけてません。 一方、最近ではPHPのフレームワークであるLaravelとVue.jsを使って、システムの裏側もユーザーが操作する表側も、かなりいけてるものをつくることができます。 また、Googleの提供しているFirebaseというサービスは、現場で利用されている設備制御のゲートウェイとクラウド側とをVPNを使うことなく、シームレスにつかうことができます。 一方、このFirebaseはLaravelでもつかう情報がWEB上でいろいろ見つけることができます。 今回、Firebaseを仲介として、バックエンドとフロントエンドで使いやすいLar
Nuxt.js + microCMS + Firebase + GitHub Actions で JAMstack なブログに移行した 長く取り組んでいたブログ移行がようやく終わったのでその一発目の記事です。 Nuxt.js + microCMS の JAMstack なブログを TypeScript で書いて GitHub Actions で Firebase に自動デプロイできるようにしました(なんかラノベのタイトルみたい)。 ここ1年くらいでよく見かけるようになった構成でしょうか。これまで Wordpress + レンタルサーバ構成でしたがほぼほぼ JavaScript で完結するのでだいぶスッキリしました。 Nuxt.js は v2.14.0、TypeScript で書きました。 ブログを Markdown で書く WordPressのpタグ自動挿入も便利なのですが、今後記事リソー
思い立ったらサクッとSPAサイトが作れたらいいなぁと思っていたのですが、Reactはちょっとしたサイトを作るにも大掛かりになってしまうので諦めていました。 しかし、最近ReactのRecoilを触り始めたのですが、Recoilを使うと、Reactも随分シンプルに書けるようになっていました。 フロントエンドの手軽さはReact+Recoilで解決できそうなので、後はバックエンドをサクッと作れれば夢が叶いそうです。 そこで、モバイルアプリのバックエンドをサクッと作れる方法として、「Google Firebase」と「AWS Amplify」をよく聞くので試してみました。 ここでは、それぞれを使ってみた感想を書こうと思います。 FirebaseとAmplifyがやってくれること Firebase、Amplify共に、バックエンドで面倒な、下記のような作業をやってくれます。 リソースの提供 ホステ
この記事は Goodpatch Advent Calendar の18日目の記事です。 はじめに Goodpatch で自社プロダクトを開発している石井です。 今回は Goodpatch が提供しているオンラインホワイトボード「Strap」のボード複製機能について、 Firebase を利用してどのように実現したのか記載しています。 StrapのバックエンドにFirebaseを選定した理由に関しては、弊チームのバックエンドエンジニアである、やっはーさんの記事を御覧ください。 ボード複製機能の要件と実現方法 Strap では無限に広がるボードにエレメントと呼ばれる図形やテキスト、画像などを配置・編集する使い方が基本的です。そのため Firestore 上ではboards の subcollection に elements がくる構造をしています。 ボード複製の機能要件としては下記がありまし
Use this extension to index your Cloud Firestore data to Algolia and keep it synced. The extension is applied and configured on a Firestore collection. This extension listens for changes on the specified collection. If you add a document, the extension indexes it as a record in Algolia. The extension only indexes the fields defined in the extension configuration and uses the document Id as the Alg
前置き 本格的なTODOリストを作っていきます! すっごく簡単なTODOリストは以前やりましたが、 一時的な物なのでリロードしたら消えます💥😲 https://qiita.com/aLiz/items/7d9e907850c15cc546a6 今回はfirebaseとVuexで 本格的TODOリストを作成します✨🎈 ・firebaseでデータ管理 ・Vuexで状態を保持 内容が濃いのでお知らせした通り、 有料記事になりました💰 https://note.com/aliz/n/n8411db2c9a20 まずは基本のTODOリスト、 次回以降のカスタマイズとして ・ログイン機能の追加 ・リストに画像機能の追加 も公開していきますよ! CSSも追加したりして 自分好みのリストにしてみてください💕🥤☺️ Stepについて いつも通り超簡単なところから だんだんと肉付けをしていきます。
はじめに 無償版のモバイルアプリ向けGoogle Analytics(以下、「モバイルアプリ向けGA」)の提供が今年1月31日で終了し、約3ヶ月が経過しました。 現在は管理画面は疎か、データにアクセスすることすらできなくなっています。この機能を利用していた多くの企業は、既に何らかのアプリ計測ツールへの移行が済んでいることと思います。 考え得る代表的な移行先のツールの一つとして、モバイルアプリ向けGAを提供していたGoogle社が移行先としてアナウンスしていたFirebase Analyticsがあります。Firebase Analyticsは、FirebaseというモバイルおよびWEBアプリケーション向けmBaas型の開発プラットフォームの中に含まれる一部の機能です。 2020年にリリースされたGoogle Analytics4(以下、「GA4」)は、FirebaseのUIを採用しています
はじめに Firebaseでベクトル検索ができるようになったとのことなので、試してみました! そもそもベクトル検索って何ってところからGPTに質問しながらなんとかできた感じなので、解釈が間違っていたり説明が不十分な箇所もあるかと思いますが、こんなことができるんだという参考になれば幸いです。 今回やりたいこと ベクトル検索ができると聞き、真っ先に思い浮かんだのが去年開発したポケモン対戦記録アプリの類似対戦検索機能です。 「過去の対戦から今回の対戦相手のパーティと相手のパーティが似ている順にソートして取得する」です。 理由は説明すると長いので、興味のある人だけ読んでみてください。 なぜ似ている順にソートして取得したいか ポケモン対戦において最もよく遊ばれているルールの1つに相手と自分のパーティ6匹を見せ合って、実際に戦闘に繰り出す3匹を決めて3vs3で戦う6→3というルールがあります。 この時
新規アプリのプロジェクトが立ち上がったので、いつもどおりFirebaseを使ってStorageを使おうと思ったら、Storageの画面で設定できないことに気づきました。 現在は無料のSparkプランです。 上記のような画面になっており、Storageをすぐに使うことができません。 Storageを使用するには、プロジェクトの料金プランをアップグレードしてください というメッセージと「プロジェクトをアップグレード」というボタンが用意されています。 他のStorageを使用しているプロジェクトを見に行くと、従来どおり問題なくStorageが使えています。 新規のプロジェクトにおいてだけ、こうなってしまうことに気付きました。 Firebaseのプロジェクトの設定画面の設定がおかしいのかと思い、従来のプロジェクトと見比べていましたが、特に気になった点はありません。 「Google Cloud」の「
2024年は Remix SPA モードで React フロントエンドを作るのが最適。 習作として「しずかなインターネット」の真似っこサイトを Firebaseで作ってみました。 clientLoader / clientAction で state ほぼ不要でシンプルに実装できるのでオススメです。 利用スタック フレームワーク: Remix SPA Mode remix-flat-routes の Hybrid Routesも使っています。 remix-routes を使って型安全にルーティングしています。 zodix を使って loader / action のパラメータバリデーションを簡単にしています。 ビルド環境: Remix Vite UIコンポーネント/スタイリング: shadcn-ui / tailwindcss フォーム: conform DB: firestore 認証:
はじめに Next.js 13から利用可能になったappディレクトリでは、コンポーネント単位でSSRができるのでよりUXを向上させる実装が可能になりました。 個人開発者の強い味方であるFirebaseと合わせて利用するために、NextAuthとFirebase Authenticationを利用して、サーバサイドでも認証情報を参照できるようにするやり方の紹介です。 今回はEメール&パスワードを用いた認証を利用しますが、基本的にFirebase Authenticationが用意しているどの認証方法でも利用可能です。 前提条件 今回の記事で利用しているライブラリのバージョンは下記のとおりです。 { "name": "auth-test-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "bui
先月から更新が少ない当ブログですが、実は 1 月末からとある Web サービスを作るお仕事を頂いており、そっちにかなり時間を割いていました。 内容としてはフリーランサー向けの案件照会サービスで、よくあるタイプのサービスです。 ただ今回頂いた案件は、デザイン・フロント・サーバー・インフラ、その他全て一任されるという結構重めかつ責任重大なものでして。 以前より仲良くさせてもらっている方からの依頼ということもあり、頑張って作ってみました。 デザイン~フロント周りについてはかなり詳しい自負がある一方、サーバー~インフラ側は決して強くない自分です。 今回 Web サービスを作るにあたり、そこまで大きいサービスでもなく費用もそこまでかけられないということで、とにかく無難 of 簡単な構成で素早く組んでみました。 ということで今回使用したものは以下のとおりです。 Next.js Vercel Fireb
Works with Cloud Firestore Version 0.1.56 | Source code License Apache-2.0 Publisher FirebaseReportBugAbuse Use this extension to export the documents in a Cloud Firestore collection to BigQuery. Exports are realtime and incremental, so the data in BigQuery is a mirror of your content in Cloud Firestore. The extension creates and updates a dataset containing the following two BigQuery resources: A
Vue.js+Firebase Authenticationで認証画面を爆速実装! アプリケーションに認証機能を実装する場合、認証サーバーを用意したりユーザー情報を安全に管理したりと認証を行う為にはかなりの手間がかかると思います。 Firebaseには、このように手間のかかる認証機能を簡単に実装する事ができる「Firebase Authentication」という機能があります。 今回は、Vue.jsで作成したWebアプリに「Firebase Authentication」で認証機能を実装したいと思います。 こんにちは。 モバイルソリューショングループのyamasaki.sです。 Firebase Authenticationとは Firebaseが提供する認証に関する機能です。 メールアドレスとパスワードを使った認証の他に、GitHub や TwitterなどのSNSを利用したOAuth
Google Analytics for FirebaseのBigQuery 連携をすると、BigQuery にAnalyticsで収集されるイベントデータが溜まっていくが、全部1テーブルに詰め込む関係でeventのparameterはevent_paramsにkeyと各型ごとのカラムに詰め込まれている。 集計や分析を行うとき、まずは利用したいパラメーターを抽出してから加工を行うのが基本なのでGoogle Analyticsでやる場合どうすればいいかのメモ 例として firebase_screen_class の場合は String型なので event_params.value.string_value に入っています。 この場合はselectとunnestを利用して次のような形で取得します。 (select value.string_value from unnest(event_par
FastAPIは便利ですね。APIサーバを簡単に構築できるフレームワークとして個人的に愛用しています。今回はFastAPIに認証機能を追加します。 注意 :FastAPI, Firebase のインストールなどセットアップは前提としてここでは触れません。 Bearer認証 サーバにリクエストしてきたユーザの識別・認証を行い、要求されたリソースへ適切な許可を制御したい需要は多々あると思います。ここではHTTPヘッダに追加するだけで簡単に実装できるBearer認証を実装します。 [Qiita] "Bearer認証について" HTTPのAuthorizationヘッダにスキームとして指定でき, Authorization: Bearer <token> のようにして指定する. トークンの形式はtoken68の形式で指定することが定められている. token の発行や検証など自分で実装するのは大変
What's new from Firebase graphic After taking a hiatus in 2020, Google I/O is back and we’re excited to take part in this revamped, digital event to share the updates we’ve made to Firebase. Over the past year, apps helped us adapt and thrive in our new circumstances, and apps will no doubt continue to play an important role for many years to come. Our mission is to empower developers like you to
クロスプラットフォームに対応した、Googleが提供するmBaaS「Firebase」。無料で使い始めることができ、アプリ開発者の工数を大幅削減できるサービスです。本記事では、Firebaseの魅力と、Firebaseが提供する機能のうち、特におすすめなものについて紹介します。 Firebaseとは何か Firebase(ファイアベース)は、Google社(旧Firebase社)製のサービスです。バックエンドの大半をFirebaseに任せることにより、アプリ開発者の工数を大幅削減できる、いわゆるmBaaS(mobile backend as a Service)で、大変便利なサービスです。 何ができるかを簡易にまとめると Firebaseは、とても多機能なサービスです。AWSとまではいきませんが、その名称の中にたくさんの機能を包括しています。 あえてどのようなツールかをなるべく簡潔にまとめ
はじめに Firebaseの機能を私が調べた範囲で紹介します。 Googleはドキュメントが充実しているため、本記事と並行して公式の一次ソースを確認することをオススメします。 注意 2020/10/02現在でベータ版の機能は紹介していません。 Cloud Firestore NoSQLのDB https://firebase.google.com/products/firestore?hl=ja 使いどころ サーバーレスでNoSQLのDBを使いたいとき 実装例 iOSアプリ (Swift) UhooiPicBook/MonstersRepository.swift at master · uhooi/UhooiPicBook Androidアプリ (Kotlin) UhooiPicBook-Android/MonstersFirestoreClient.kt at master · uho
つい最近, 学生に見られてしまった42歳*1(外資コンサル企業マネージャー)です. 今, プライベート(いわゆる個人開発)でWebサービスを開発しようとしているのですが, Webサービスの性質上, 何らかの認証機能が必須 ↑が必須なのはわかるけど, 自分で開発(コードを書く)のは正直つらい(かつ自前で書くほどの要件でも無さそう) クラウド(今回はGoogle Cloud)で運用するのは決まってるので, 既存のクラウドサービスでどうにかならないか? といういい感じにサボる効率的なソリューションを探した結果, ワイ「どうやらCloud EndpointsとFirebaseでどうにかなるらしい🤔」 とわかり, 実際にどうにかなりそうなものができたので, 自分が忘れないように(&似たような状況の方のお役にたてるように)メモとして残したいと思います. TL;DR Google Cloudでサクッと
ウェブ版 CloudFirestoreのクエリ備忘録 日本語版公式ドキュメントに載っていないものがいくつかあったので、まとめてみた。 ※コレクショングループについては書いていません。 更新情報 2023/5/13 ORクエリについて追記しました 2022/2/10 日本語版公式ドキュメントに追記されていました。 Firebase SDK v9の記法を追記しました。 // コレクション users: { // ドキュメント "000": { // フィールド address: { prefecture: "沖縄", region: "沖縄", }, age: 20, createdAt: 2020年11月10日 15:00:00 UTC+9, friends: ["003"], userName: "山田太郎", }, "001": { address: { prefecture: "北海道
フィードバックを送信 Firebase Auth REST API コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 API 使用量 REST API を使用して Firebase Auth バックエンドにクエリを実行できます。このパラメータは、 新しいユーザーの作成、既存ユーザーのログイン、これらのユーザーの編集や削除などが可能です。 このドキュメント全体を通して、API_KEY はウェブ API キー、 これは プロジェクト設定 できます。 <ph type="x-smartling-placeholder"> カスタム トークンを ID および更新トークンと交換 HTTP POST リクエストを Auth verifyCustomToken エンドポイントに発行することで、カスタム Auth トークンを、ID および更新トークンと交換できます。 メソッ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Firebaseとは Firebaseは、Googleが提供するバックエンドサービスです。いわゆる、BaaS(Backend as a Service)です。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 Firebaseには、以下のような様々な機能が提供され
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
Firebaseで動的に情報を出力する場合にCloudFunctionsを利用するわけですが、頻繁に情報が変化しない場合など実行結果を一定時間キャッシュしたくなりますよね。Firebaseでは非常に手軽に実装できます。 結論から言うと以下のようにCache-Controlヘッダを出力するだけ。以下で30秒間Firebaseが用意するCDNに実行結果がキャッシュされます。publicのつけ忘れにご注意を。 res .set("Cache-Control", "public, max-age=30") .send("キャッシュされるよ"); 最初これを知らずにCDNを別途用意して、Firebase側をオリジンに設定しようとしていましたw 危ない危ないw サンプル 実行例 コード Cache-Controlヘッダ public max-ageとs-maxage 注意点 GET/HEAD以外はキャ
RubyでFirestoreからデータを取得したり追加したり 今回は、RubyでFirestoreからデータを取得する際のクエリ発行してくれるコードやデータを追加するコードに関してまとめます。 Firestoreとは Firebaseが用意しているNo SQLのクラウドデータベースです。 用語 Firestoreにおける用語はとりあえず、下記の3つを知っておけば大丈夫だと思います。 Cloud Firestore データモデル コレクション データ(ドキュメント)を格納する大枠。FirebaseコンソールのサイドバーにあるCloud Firestoreをクリックすると、画面の1番左にあるのがコレクションになる。1つのコレクションに、それに関するデータ(ドキュメント)が保存されていく。 ドキュメント コレクションに格納されていくデータ。データは一意のドキュメントIDというもので管理されており
はじめに 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 は
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く