Build AI-Powered AppsBring your favorite APIs from OpenAI, Replicate, Pinecone and others through actions & jobs.
今作ってるAPIでは初めてNest.jsを使ってるんだけど、認可処理をどうしようかと考えたのでそのメモ。 ちなみにこの投稿では簡単な定義として認証(Authentication)とは利用者の本人確認、つまり通信の相手が誰であるかの確認とする。一方、認可(Authorization)とは利用者がシステム内、サービス内で実行できる操作の権限とする。 前提 TypeScript Nest.js Prisma Firebase Authentication 認証自体はFirebase Authenticationを使っているので、認可をどうするかが話の主眼。 なお、前提として認証はクライアントサイドでFirebase Authenticationが認証時に発行するJWTのトークンを取得してAuthorizationヘッダにBearerトークンとして渡すよくあるやつで対応しますが、ここに関しては本投
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして (特性やスキルセット的に)RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
はじめに 個人・法人に関わらずアプリ開発で必ず通る道が、 Google / Apple のアプリ審査です。 アプリを初めてリリースするときやバージョンアップ毎にアプリ審査が行われますが、審査には少し時間がかかります。 去年の話ですが、コロナの影響でAndroidの審査が1週間以上かかることが話題になっていました。 Androidアプリの公開用レビューもCOVID-19の影響で遅れがちに 審査は数年前に比べれば早くなりましたが、緊急の不具合修正で即リリースして反映したい時など問題になってきます(iOSは「App Reviewの優先処理(特急審査)」というものもありますが、審査はなくならないので待ち時間は多少あります) そこで今回は、アプリ審査なしでアプリに変更を加える方法や、そもそもどういうことができるのかを調べてみました。 注意 本記事が原因で生じたいかなる損害において責任を負いませんので
Reactプロジェクトの作成 macOS上でReactプロジェクトを作成するためにNode.jsのインストールが必要となります。Node.jsインストールを行ってからReactプロジェクトの作成を行ってください。 npx create-react-appコマンドを利用してReactプロジェクトを作成します。コマンドの後ろにはプロジェクト名を指定します。プロジェクト名には任意の名前をつけてください。ここではreact-fierebase-authとしています。 % npx create-react-app react-firebase-auth Firebaseの初期設定 FirebaseのAuthenticationの機能を利用するためにはFirebaseでユーザアカウント登録を行う必要があります。もしアカウントを持っていない場合は、Firabaseのページでユーザ登録を行なってください。
以前開発したときは、APNs証明書だけだったのに知らぬうちに2つの方法ができていたので備忘録です。 そもそもAPNsとは? Apple Push Notification Service(以下、APNs)は、iOSやtvOS、MacOS上で実行されているアプリケーションに対して開発者側から通知を送るためのAppleによるサービスのことを指します。 誤解されがちなのは、Firebase Cloud Messaging(以下、FCM)などの通知を行えるサービスと各アプリケーションが1対1で繋がっているようにとらわれがちですが、Appleデバイスを対象に通知を送付する際は必ずAPNsを介して送付されています。 当たり前ですが、APNsに対してどんなリクエストでも送れてしまったら意図しない通知がユーザーの手元に届いてしまいますので、サーバー側とAPNs間のセキュアな通信を担保するために証明書または
はじめに 先日公開したアプリでは定期購入を実装しています。いわゆるサブスクです。 Flutter(iOS/Android)でサブスクの実装例は少なく、苦労した点もあるので知見を公開します。定期購入の仕様について丁寧に解説するというよりは、実際に私がどのような実装をしているかについて書いています。 注意事項 本記事は公式ドキュメント、技術記事投稿サイト、個人ブログなどの情報を自分なりに解釈して実装した内容です。 課金周りはアップデートが多いため、常に最新情報の確認を推奨します。特に英語版公式ドキュメントは最も信頼できると思います。 本番環境で動作していることを確認済みですが、サブスクユーザーは現状数名です。サブスクユーザーが多数の場合による影響は未検証です。 その他、十分に検証できていない内容があります。何かお気づきの点があればご指摘いただけると助かります。 環境 本記事執筆時の環境です。
firestore の SDK に withConverter というメソッドがあるのですが、その宣伝です。 型が欲しいってどういうこと? たとえば firestore 上のあるドキュメントが name と age というフィールドを持っているとして、それをクライアントが取得したときそのデータに name と age が存在する保証はあるのでしょうか。 db.collection("user") .withConverter(converter) .get() .then(result => { const data = result.docs.map(d => ({ // 本当にnameがある? name: d.data().name, // 本当にageがある? age: d.data().age, })) setState(data) }) d.data() はクライアントバリデーシ
開発担当役員(CDO)の小笠原(@yamitzky)です。 11月1日に予定されている「大阪都構想」の住民投票*1についての特設サイトを、先日、ABCテレビと共同リリースしました。JX独自開発のオートコール電話情勢調査システムを活用し、週一ペースでの情勢調査を発表するなど、今までにない取り組みを行っています。 www.asahi.co.jp より詳細なデータは、ニュース速報アプリ「NewsDigest」でも配信しています。 なんだか宣伝っぽい導入になってしまいましたが、今回は NewsDigest の「大阪都構想」特設ページの技術的な舞台裏をご紹介します。 インフラ全体像 まず、特設サイトのインフラ概略図は次のようになってます。 インフラ全体 サイト全体としては、Next.js という React のフレームワークを使っています。特徴的なのは、 Next.js を Lambda@Edge
(2022年6月追記) 2022年6月現在、この記事にあるアプリよりも、ほぼ同じコンセプトのReact+NextJS製webサービス「みんなで作業場」に滞在していることが多いです。 是非お越しください! アプリ 先日、個人開発アプリをリリースしました!やったね!!! 審査も通りまして、現在App StoreとPlay Storeで配信されております。 App Store Play Store せっかくなので、利用した技術のメリットと注意点をまとめておこうと思います。 作ったアプリ これです。 広報用ページも作ってみたのでリンクを貼っておきます。 広報用ページはスマホで見る用にレイアウトしてます。 監視し合う会 〜お互いサボらないようにみんなで作業しよう〜 英語名: Procrastinators Watch Mutually 解決したい課題 やらなきゃいけないことがあるのに、なかなか取り組
はじめに 去年(2018)春ごろから、Firebase x React x TypeScriptでアプリケーションを作成する機会が多くなり、 自分の中である程度書き方が固まってきたので、その内容をまとめることにしました。 フロントエンドの実装を想定した説明をしますが、サーバーサイドも似たような構造で筆者は書きます。 Firebase、TypeScriptを使ったことがないかたは、少し難しいかもしれません。 「俺はこのような書き方してるよ〜」などあれば、コメントで教えて欲しいです! アーキテクチャについて 筆者はFirebaseプロジェクトでの設計では、レポジトリパターンを使って設計することが多いです。 ※厳密にレポジトリパターンになっているかといわれると、なっていないかも... 下記がフォルダ構造です。
Static webhosting benchmark: AWS, Google, Firebase, Netlify, GitHub & Cloudflare Static websites are still a hot topic. They are fast, and they're incredibly secure because there isn't a CMS to hack. Once you build a static website, however, the question becomes: Where do I host? In other words: what is the fastest static website hosting provider in 2020? Well, let's find out! I did a similar test
はじめに Flutter と Firebase を使って個人でアプリ開発をするときのロードマップを紹介します。 本記事を一通り読めばアプリを公開するまでにやるべきことの大枠をイメージできるようにしました。 広く浅く紹介しているので、もし気になる内容があれば、個別に深掘りしてみてください。 個人開発にフォーカスした記事になっているとはいえ、いくつかの Flutter のお仕事を請けた私自身の経験も反映しているため、お仕事でも活用できる内容も含まれていると思います。 本記事は、ざっくり次の流れになっています。 アプリの構想と具体化 実装に入る前の準備 基本機能の実装 よりよい実装にするための Tips 開発フロー アプリの公開 収益化の話 想定読者 Flutter × Firebase を使って個人開発をしようとしているひと または、既に個人開発をしているひと Flutter を導入するか悩ん
はじめに ※この記事はfreee APIで業務を楽しく便利にハックしよう!アドベントカレンダー2021の6日目の記事として投稿しています。 はじめまして。今年の1月からプログラミングの勉強をしているものです。 今回は、ネットで知り合った仲間とともに(顔もフルネームも知らないもの同士で)半年間、開発を行い、農家の3代目の困りごとを解決するアプリを作った話をしたいと思います。 きっかけ 私は技術力を身につけたいと思い、今年の1月〜4月ごろまで独学で勉強を進めていました。しかし次第に写経に飽き、このままUdemyなどで写経をして学習するより実際になにか動くものを作るほうが楽しいだろうなと思うようになりました。 また、せっかくなら1人でやるより誰かと一緒に開発する方がもっと楽しいだろうなと思い、勇気を出してネットで仲間を募り、アプリのチーム開発を始めてみることにしました。 募集したメンバーのうちの
Google アナリティクス for Firebase (以下GA4F)は、GA360と同様、サンプリングされていない生データを無料でBigQueryへエクスポートできます。 BigQueryへエクスポートしたデータを利用すると、GA4FやGoogle アナリティクス 4 プロパティ (以下GA4)のレポート画面では難しいカスタム分析やアプリ以外の外部データと組み合わせた分析が可能になります。 さらに、BigQueryへエクスポートしたデータはデータポータルなどのBIツールと連携すればカスタムレポートの作成も可能となります。 今回はGA4Fのデータ活用をテーマに、次の内容を紹介します。 BigQueryエクスポートの設定手順データポータルのBigQuery接続方法・レポートの作成方法 BigQueryエクスポートの設定手順GA4FのデータをBigQueryへエクスポートする方法は2種類あり
TAG : Advent Calendar | Firebase | Firestore | React | Refeed | Tech & Science | TypeScript | トチカチ | フロントエンド AUTHOR : ギックス POSTED : 2020.12.16 08:22 この記事は GiXo アドベントカレンダー の 16 日目の記事です。 昨日は、TableauのLOD表現で注意すべきことでした。 MLOps Div. の堀越です。突然ですがみなさん Firestore は好きですか?私は好きです。ときどき「安定してない」、「パフォーマンスにムラがある」、「モジュールでかすぎ」といった苦言も見かけますが、弊社のように少人数で開発を行うチームにとってフルマネージドの Firestore はサービス開発に欠かせない存在となっています。なお、先日のMLOps D
サーバ管理なしでWebサービス公開 -Firebase(Authentication, Hosting, Firestore) + GAEで『LogCrow(ログ情報共有サービス)』開発-GAEVue.jsFirebase個人開発algolia FirebaseとGoogle App Engineを中心に活用し、Webサービスをローンチしたのでそのアーキテクチャ & サービス概要を紹介します。 LogCrow(ログ情報共有サービス) 背景・動機 私は日頃業務で、システムの保守・運用の効率化・改善について検討しており、いろんな運用者の知見が共有できている状態が作れると運用者が幸せになれるのではないかと考えています。 そんな中で、特に保守・運用時にキーポイントとなるログ情報についてフォーカスし、こういうログが出たときには「原因」として何が考えられ、どういった「対処」が必要となるのかといった情報
はじめに Flutterで新規にアプリを作る時にテンプレ的に大体同じような事をやっているが、いつも忘れるので備忘録としてまとめ。 Flutterは絶賛開発中なので、本稿の内容は当時これでうまくいっていたぐらいに留めていただけると幸いです。 また、本稿は個人的なメモの意味合いが強いため、割愛している説明が多々あります。 本稿の変更を適用したサンプルリポジトリはこちら 記事もテンプレ自体も随時更新予定 旧バージョンの記事はこちら:Flutterで新規アプリ作る時にやることまとめ - Qiita この記事でできること要約 大体アプリ作るときにやるであろう手順の備忘録 dart-defineを用いて開発環境、ステージング環境、本番環境のフレーバーを切り替え、別々のアプリとして独立させる方法 フレーバーに応じて利用するFirebaseプロジェクトを切り替える方法 コードカバレッジ計測のTips 環境
はじめに最近 IoT の文脈であらゆるものがインターネットに接続され、位置情報 (緯度・経度からなる情報) が含まれたデータを扱う例も増えてきているように思います。また、位置情報を使ったゲームなんかも増えてきていますね。 本記事では以下のようなワークロードを仮定して、これを GCP で実現するにはどうしたら良いかを考えていきたいと思います。 複数種類の移動オブジェクト (車、トラック、バイク、歩行者、タクシー) から、毎秒数十万レコードに及ぶ位置情報を含むデータが生成される生成されるデータはそれぞれタイムスタンプを持っているこれらのデータをリアルタイムに永続化しつつ、可能な限り低いレイテンシ (~1sec) で時間と位置情報を条件にしたクエリに応答する必要がある今回は大量に発生したデータを高スループットで書き込みつつ、低レイテンシで読み出せる Cloud Bigtable を使って位置情報
大阪オフィスのフロントエンド勉強会で使用したAngular+Firebaseハンズオンの資料を公開します。勉強用のサンプルアプリケーションとして活用していただければ幸いです。 どうも!大阪オフィスの西村祐二です。 大阪オフィスではフロントエンド勉強会を隔週で行っており、そこでAngular+Firebaseで作るTODOアプリケーションのハンズオン行ったのでその資料を公開します。 勉強のためのサンプルアプリケーションとしてお役に立てれば幸いです。 ゴール 下記のようなTODOアプリケーションを実装します。 主な機能として下記になります。 TODOの追加削除 Drag And DropでTODOを移動させてデータを更新 Googleアカウントでログイン・ログアウト TODO追加入力フォームのバリデーション バックエンドはFirebaseを利用しています。 利用するツール Angular An
表題通りの記事です。 これからnode.jsを10->12に更新する方の助けになれば幸いです。 確認環境 Ubuntu: 18.04.3 LTS node.js: 10.16.0、12.14.1 ビルドツール: gulp (後述しますが4系へのアップデートが必須でした) やったこと(全体像) n をつかってローカル環境のnode.jsを10->12に更新 (参考: nodeとnpmのバージョン更新方法) npm ciして、出てきたエラーを潰す firebaseの更新 node-sassの更新 npm run buildして、出てきたエラーを潰す gulpを3系->4系へ移行 エラー1 (firebaseの更新により解消) 最初はイージーケースから。 事象 npm ciしたところ、大量(体感3分)のログが出力され、最後に以下のエラーが吐かれました。 # これ以前にも大量のエラーログが出る c
メグリでプランニングを担当している篠キチです。個人的に別のアカウントでnoteを書いたりもしているんですが、MGReのサービスに関わることはこっちのnoteに書くことにしました。 今回はMGReを使っていただいているお客様からも問い合わせや質問が多い、GA4を使ったアプリ計測に関するお話です アプリのGA4に関するウェビナーをしました いきなり宣伝くさいスタートですが、2022年9月末にアユダンテの藤田さんをゲストにお迎えして、アプリのGA4に関するウェビナーをやりました。 当日はMGReを使っていただいているお客様も含め、多くの方に視聴いただきまして、アプリのGA4に対する関心の高さをあらためて感じることができました ウェビナーの内容はアユダンテさんのYouTubeチャンネルで公開されているのでお時間あればご覧いただきたいんですが、ウェビナーの最後で行った質疑応答やその後にお受けしたご質
iOS14からユーザートラッキングに用いられている端末の広告識別子IDFA取得のオプトイン/オプトアウトの選択をユーザーに求めることが必須になります。アプリが取得するプライバシーポリシーの提出必須化と同じく大きな変更ですが、開発中のアプリが該当するか調べる時にFirebase AnalyticsとFirebase Crashlyticsのみを使っていて広告系のSDKも利用していない場合何の対応も必要ないかが心配になったので調べていました。 App Tracking Transparency | Apple Developer Documentation iOS14で必要になるユーザートラッキングについての対応 AppleからUser Privacy and Data Use というドキュメントが公開されました。ユーザーがアプリのプライバシーポリシーをダウンロード前に確認して、アプリが収集す
Web Push通知の受信を、Firebase Cloud Messaging(FCM)+Service Worker +Notificationで受信側でコントロールしてみた
2022年2月追記 Firebase SDK v9では、実装方法が大きく変わりました。 v9を利用した認証の実装については、以下をご覧ください。 Authenticationを利用した実装 前回 に続き、 Firebase の備忘録を書いていきます。 今回はFirebase Authenticationを利用した認証システムの実装についてメモを残しておきます。 Firebase Authentication の設定 認証は、Firebase プロジェクトのコンソールから「Auhentication」を選んで設定していきます。 公式ドキュメントは以下。 ここでは、サンプルアプリで利用したGoogle 認証に絞って記述します。 Google 認証の設定 Authentication → Sign-in methodを選び、設定を「有効」に変更→保存で、終了。 Google認証の実装 Fireb
SendGrid の送信ログを無料で7日間以上見られるように、BigQuery にリアルタイムで保存する これはなに? イマチケというAmazon Payでサクッと買える有料ネットライブのチケット販売サービスを開発・運営しています。 そこでは、SendGridを使って購入確認メールを送っているのですが、携帯キャリア系メールアドレスの迷惑メールブロックやら RFC違反のメールアドレスでやらで購入確認メールが送れないことがままあり、お客様からの問い合わせが来たときに調査が必要でした。 調査のために SendGrid のメールアクティビティを確認しますが、とりあえず無料のプランではじめているため、管理UI上で確認できるメール送信ログが7日間しか残りません。しかし、お客様からの問い合わせはチケットを買ってから、2週間後のライブ配信直前などに来ることがあり、調べるころには履歴が残っておらず、メールが
エラー内容 firebase initコマンドを実行し、Hostingを選択してエンターしたら、以下のようなエラーが出ました。。。 Error: HTTP Error: 401, Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. firebase loginまでは全く問題なく進んでいたのになぜ??となっておりました。 解決方法 firebase login に、--reauth --no-localhost というオプションをつ
環境 ・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 Googleは10月18日に米ニューヨークでモバイル向けのバックエンドサービスであるFirebaseにフォーカスしたイベント「Firebase Summit 2022」を開催し、モバイル向けのNoSQLデータベースFirebaseの新機能として、件数を数える「count()」関数や期限が来たら自動的にデータが消去される「Time To Live」などを発表しました。 クエリ結果の件数を返してくれるcount()関数 これまでFirebaseでクエリの結果何件のデータがマッチしたのかを数えるには、プログラマが検索処理の後になんらかの手法で件数を数える処理を記述する必要がありました。 件数を数えることは比較的ニーズの高
こんにちは、MA基盤チームの田島です。ZOZOTOWNでは、ユーザコミュニケーションの手段としてLINE、MAIL、アプリへのPUSH通知を利用しユーザへのお知らせを実現しています。 その中でも、現在ユーザへのコミュニケーション強化の一環としてアプリPUSH通知(以降、PUSH通知)の強化をしようと考えています。ZOZOTOWNのPUSH通知は今まで、とある外部SaaS(本記事で出てくるSaaSはすべてこの外部SaaSを表します)を利用していました。しかし、PUSH通知チャネルの強化をする上で、利用していたSaaSでは要件を満たせない部分がありました。そこでPUSH通知のためのツールとしてFirebase Cloud Messaging(FCM)に移行しました。 本記事ではPUSH配信基盤の紹介並びに、移行時に行ったことを紹介します。PUSH配信基盤の構成や、PUSH配信ツール移行時の参考
はじめに iOSやAndroidアプリの利用状況把握のツールとして、Firebase Analyticsがあります。導入方法は、以前の記事で書きましたが、この方法のような通常の利用だと、Firebaseの公式ページによるとアプリによってロギングされるイベントは、約1時間の周期でバッチ処理され、まとめてアップロードされます。 通常は、これで十分です。しかし、デバッグ時には、1時間待たないと結果が出ないのは、効率的ではありません。この記事では、デバッグ時に有効なログの出し方を書いていきます。 アプリコンソールにログを出す方法 Xcodeのコンソールに、Firebase Analyticsのログをリアルタイムに出力する方法です。-FIRAnalyticsDebugEnabledを追加してアプリを起動すると、Firebase Analyticsのログがリアルタイムで出力されます。 具体的には、以下
自己紹介 プログラマーの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画像の動的生成をやってみた
ジャンプTOON アプリチームの吉田航己(@koki8442)です。 5 月にサービスを開始した 「ジャンプTOON」 では、モバイルアプリを Flutter で開発し、通信には GraphQL を用いています。 本記事では GraphQL の解説、Flutter アプリで GraphQL を活用する際の工夫点や開発の知見を紹介していきます。 目次 GraphQL の概要 ジャンプTOON アプリでの GraphQL の使用 Flutter で GraphQL を使うメリット Flutter × GraphQL 開発の工夫 おわりに 参考文献 GraphQL の概要 GraphQL は Meta 社が REST の問題点を解決するために開発した API クエリ言語およびランタイムです。その概念は特定の言語やデータベースなどに依存するものではなく、ビジネスドメインのデータを Node と E
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など、主要な
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く