しずかなインターネットの技術構成
こんなWebサービスをリリースしたので、技術的な話をまとめておこうと思います。 元々このサービスは、趣味の延長線のような感じで開発を始めました。競合にあたるnoteやはてなブログなどのサービスが確固たる地位を築いているということもあり、「お金にはならないだろうけど、自分の趣味を詰め込んだものにしよう」というゆるい気持ちで開発を続けています（楽しい）。 選定の方針 趣味と言っても文章投稿サービスなので、ユーザーが少数であったとしても長期間運営しなければなりません。そのため、ユーザー数が少なければランニングコストが数千円/月以下、ユーザー数が増えたときは段階的にコストが上がるように選定を行いました。 アプリケーション フルスタックNext.jsアプリケーションをCloud Runにデプロイしています。各APIエンドポイントはNext.jsのAPI Routesで生やしています。 Next.js
Webフロントエンド入門
まずはじめに HTML、CSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ
個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
ポエム特化のZenn2との噂の「しずかなインターネット」を使いはじめたので、ユーザーとしてどんな技術が使われているのかを確認していく。 sizu.me おもむろにbuiltwith.comにかけてみる。 builtwith.com ここで分かる情報はブラウザのDevTools眺めてても得られるのであまり収穫はない。 前段にCloudflareのCDNサーバーがいて Next.jsで生成されたレスポンスを返している ことがわかる。 この時点ではキャッシュのみCloudflareなのか、Pages/WorkersでNext.jsのSSRごと動かしているのかは判断できない。 認証 Set-Cookie: __Secure-next-auth.session-token=が含まれているのでNextAuth.jsを使っているのが分かる。 next-auth.js.org Emailでサインアップする
JADEファウンダーの長山です。 いよいよ Universal Analytics (以下UA) の死が近づく中、Google Analytics 4 (以下GA4) が使いづらい、という声を聞くことが増えてきました。特に広告運用者にとってはまだまだ使いづらいことが多い、という点は、すでに弊社ブログでも小西が書いた通りです。しかし、どうしてこうなっているのか、について考察した記事は今まであまり無かったように思います。 少し歴史を振り返ってみましょう。現在のUAは Google が一から開発したものではありません。Urchin Software という会社が開発したアナリティクスサービスを Google が 2005 年に買収したものです。Urchin は買収時点ですでに10年近い歴史を持つソフトウェアで、Web におけるユーザー訪問の分析に特化する形でプロダクト開発が続けられていました。現
症状検索エンジン「ユビー」 では、ローンチ当初から Firebase Auth (GCP Identity Platform) を使っていましたが、OIDCに準拠した内製の認証認可基盤に移行しました。 認証認可基盤そのものは m_mizutani と nerocrux と toshi0607(退職済) が作ってくれたため、僕は移行のみを担当しました。 結果として、強制ログアウトなし・無停止でビジネス影響を出さずに、年間1000万円以上のコスト削減に成功しました[1]。その移行プロセスについて紹介します。認証認可基盤そのものの紹介はあまりしません。 移行した理由 大量の匿名アカウント ユビーでは、アクセスした全ユーザーに対して自動的に匿名アカウントを発行しています。これにより、ユーザーがアカウント登録しているかどうかに関わらず、同じID体系で透過的に履歴情報等を扱うことができます。アカウント
はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの梅内(@Sz4rny)です。 本稿では、弊社がこれまでに実施してきたFirebase診断の事例や筆者独自の調査をもとに、Firebaseを活用して開発されたサービスにおいて発生しやすい脆弱性の概要やそれにより引き起こされるリスクおよびその対策を深刻度や発生頻度の評価を踏まえつつお伝えします。本稿を通じて、Firebaseを活用したサービスにおいて発生しやすい脆弱性にはどのようなものがあるのか、また、そのような脆弱性を埋め込むことなくセキュアなサービス実装を実現するためにはどのような観点に気をつければよいのかについて理解を深めていただけますと幸いです。 なお、本稿では「Firebase活用時に限って発生しうる脆弱性(例:Firestoreのセキュリティルールにおけるバリデーション不備)」と「Firebaseを活
オープンソースによるFirebase代替を名乗るBaaS（Backend as a Service）「Supabase」が正式サービス化を発表しました。 Supabaseはこれまで約4年間ベータ版としてサービスを提供してきました。現在は100万以上のデータベースをホストし、新規データベースも1日あたり2500以上増加しており、モバイルアプリケーションからエンタープライズ用途まで十分な機能と安定性、スケーラビリティが実証されたとしています。 Supabaseの主な機能はデータベースや認証、ファイルストレージなど SupabaseはBaaSとして主に以下のマネージドサービス群から構成されています。 PostgreSQLによるデータベースサービス 認証サービス ファイルストレージ エッジロケーションにおけるNode.jsDenoベースのサーバレス基盤 マルチプレイヤーゲームなどに対応するリアルタ
Firebaseのセキュリティルールの設定を誤っていることが原因で数百のサイトが平文パスワードや機密情報を含む合計1億2500万件のレコードを公開してしまっているとセキュリティエンジニアの「Logykk」「mrbruh」「xyzeva」という3人がブログに投稿しました。 900 Sites, 125 million accounts, 1 vulnerability - env.fail https://env.fail/posts/firewreck-1/ セキュリティエンジニアの3人はChattr.aiというサービスでFirebaseの設定が間違っていることを発見しました。Chatter.aiではウェブサイト上の正規ルートで登録するとアカウントの権利が適切に制限されるものの、FirebaseのAPIを直接使用してアカウントを作成するとFirebase上のデータベース全てに対する権限が取
Firebase Authのリダイレクトログインを使っている人は今年の6月までに対応しないと大変ですよという注意喚起
公式ドキュメントに書いてあり、Firebaseからもメールなどで通知されていることではあるのですが、意外と見落としたままになっているかもしれない情報なので、啓蒙の意味も込めて記事にします。 結論 Firebase AuthのJavaScript SDKを使っている場合、今年6月までに以下のドキュメントに従った対応をしないとChrome/Edgeでリダイレクトログインが動かなくなります。 サードパーティのストレージ アクセスをブロックするブラウザで signInWithRedirect を使用する場合のベスト プラクティス 必要な対応 公式ドキュメントにある対応選択肢を、補足や注意点も含めた形で以下に焼き直してみます。 ポップアップ形式のログインでもいい場合 同一タブ内でリダイレクトしてログインする形式から、ポップアップウインドウを開いてログインする形式に切り替えましょう。 （公式ドキュメン
この記事でできるもの デモ https://react-pokemon-app-c3d8a.firebaseapp.com/ ※画像は非表示にしています ソースコード https://github.com/hato-taka/pokemon-app はじめに この記事の目的は React開発の楽しさを伝えることです！ 詳しい内部のロジックには触れていません。 楽しく学んでもらうために、PokeAPIというポケモンデータを集めたAPIを使用します。 https://pokeapi.co/ この記事を作成するにあたり下記２つの動画を参照しました。 【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座 Build Pokemon App Using React Js |Pokemon Api |2022 記事の対象者 Reactの
個人開発のWebサービス構成（2021年）
/ kyokomi note / blog個人開発のWebサービス構成（2021年）January 10, 2021 [Go | Web | 個人開発]※2021/1/5時点の構成次回変更時に振り返ることができるようにしておきたいと思ったので、変更点をまとめておくことにした。 Next.jsを使うようになった流行りの？Client側とSSRでハイブリットな感じにした。SPA特有の面倒くささがなくなったの一番の感動。 もともとは React + Redux-Toolkit でSPAして、FirebaseFunction でogp対応的な感じだった。 モチベーションAPIサーバー（Go）も自分で書くため、swaggerを元に生成したtypeをReduxのStoreとして再定義して管理みたいな感じになっており、面倒だな〜と思いつつやってたが、静的なページは getStaticProps や ge
はじめに こんにちは！！@Sicut_studyです！ クラウド破産しかけました！ギリギリ払えるくらいやばかったです！！ 普段サービスを Firbese でデプロイしているのですが、この度自分でサービスをリリースした時に破産しそうになった話を共有していきます。 自分が使うためのサービスとみんなに利用してもらうためのサービスではこの点が大きく違うんだなとしみじみ感じたので、自分以外が使うサービスをリリースする方には参考になるかと思います 0. アラートは突然に とあるメールが自分のもとに届きました !?!??!??!??!?!!!?? やばいまだ11月始まって6日なのに予算の半分を使ってしまっただと！？！ とくにリリースなどは行っていなかったのでなぜか今月になって請求額があがるようになっていました 仕事中にメールが来たのですが、気になりすぎてまったく集中できませんでした😅😅😅😅 1.
オウンドメディア担当者が知っておきたい GA4 × BigQuery 後編（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 今回は、全2回で Google アナリティクス4（以下「GA4」) × BigQuery に関して紹介をしていきます。 後編となる第2回は、BigQueryとGA４の連携方法や、GA4のデータをより活用するための方法についてご紹介していきます。GA4 × BigQuery を活用することで、オウンドメディアの分析や効果の可視化に大きく役立つと思いますので、ぜひ参考にしてみてください。 なお、BigQuery内でGA4データがどのように保存されているかなど、データ構造に関しては本記事で詳しく触れませんのでご理解いただければ幸いです。 BigQueryとGA4の連携方法 BigQueryのセットアップ Google Cloudのアカウントを作成 BigQueryのプロジェクトを作成する GA4からBigQueryにデ
フィードバックを送信 Dynamic Links の非推奨に関するよくある質問 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Google は 7 年以上前に、URL の機能を改良する Firebase Dynamic Links をリリースしました。これにより、実行時の条件に基づいてリンク先を動的に変更するなどの操作が可能になります。 ウェブとモバイルのエコシステムは長年にわたり、アプリリンク、Google Play Instant、ユニバーサル リンク、アプリクリップなどのテクノロジーとともに進化を遂げ、アプリとウェブにおけるユーザー ジャーニーのシームレス化とアプリユーザーの予測可能化を実現してきました。Google は、これらのテクノロジーを直接導入してエコシステムを継続的に進化させることで、デベロッパーとユーザーが受けるメリットも増大すると考え
はじめに 下の画像を見てください。これはとあるアプリの Firebase Console の App Check の Cloud Firestore のモニタリング画面です。この画面で 不正リクエストがどのくらいあるかが確認できます。 え？小さくてよくわかりませんか？もう少し拡大してみましょう。 ↓拡大してみました。不正リクエストは 2% ありました。30日間で不正リクエストは57万回あったということです！ さらに Authentication は 18% も不正リクエストがありました！ これは、どうにかしないといけない。。。ということで、最近 Firebase App Check を個人開発した Flutter アプリに導入したので、導入手順について紹介します！ コードの修正は簡単ですが、Firebase 側の設定がなかなか難解ですし、公式サイト は手順がひとつにまとまっていなくてわかり
この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │ ├── component
こんにちは。virapture株式会社でCEOしながらラグナロク株式会社でもCKOとして働いている@mogmetです。 最近Subwayのフォトコンテストに参加するためにたくさんSubway食ってます。痩せそうです。 本日はGoogle I/O 2023で発表されたFirebaseの新機能について紹介致します！ Cloud Functions for Firebase 第２世代のCloud Functions for Firebaseを昨年リリースしました。 第２世代を使うと、単一のインスタンスが最大1000のリクエストを処理できるようになったことで、コールドスタートが減ってレスポンスを早くすることができます。 先月、第２世代のCloud FunctionsでFirestoreトリガーのプレビュー版が導入されました。 また、本日より第２世代Cloud FunctionsがGAになりました。
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など、主要な
Flutterアプリから送信したFirebase AnalyticsのデータをBigQueryにエクスポートして解析する
はじめに こんにちは！Altive株式会社のFlutterアプリ開発者の小林遼太（@naipaka）です🦙 みなさんはアプリの利用状況を把握するためにどのような方法を使っていますか？ これまでFlutterでアプリを開発していて、Firebase Analyticsを使ってアプリの利用状況を確認することはあったのですが、 それだけだとアプリの利用状況の詳細を把握するのに不十分で、クライアントの要望に応えることができないことがありました。 Firebase Analyticsへ送信したデータをBigQueryにエクスポートして解析できるようにしたことでアプリの利用状況をより詳細に把握することができるようになったので、 今回はFlutterアプリから送信したFirebase AnalyticsのデータをBigQueryにエクスポートして解析するまでの手順をまとめました。 イベント送信 送信す
2022年夏、 我々はアプリケーションのバックエンドとして利用していたFirebaseをやめる決断をした。それは事業とソフトウェアの成長に伴いユースケースが合わなくなってきたことが主な理由だ。 これはFirebase、特にNoSQLドキュメントデータベースであるFirestoreから自分たちでRDBを使ったREST APIを開発し移行する物語。 何を考え、何を行うか、RDBとは異なるデータ構造のFirestoreのデータをどのように再設計/開発/移行するかについて愚直に語ります。 同じような悩み、課題もつ皆さんになんらかのきっかけを与える45分に。 スピーカー： 西谷 圭介 氏 (CTO, Singular Perturbations Inc） セッションに関する情報： ・想定聴講者の役割/開発対象：Web バックエンド / サーバーサイド開発 ・セッションのトピック：Web バックエ
FirebaseとSupabase FlutterFlowでどっちを使うか問題 2023年版｜ノーコードで事業開発 / SUNUP合同会社
FlutterFlowを最近使い始めた人によく聞かれる質問なので、ここで改めてプロコンを比較して個人的な推しをお伝えできればと思います。 結論：いろいろ考えたらSupabaseいいよね SUNUP合同会社はい、結論から言ってしまいました。 ご存知の通り FlutterflowではSupabaseがFirebaseと共に公式サポートされており、プラットフォーム上で統合されています。 どちらも同じBaaS（Backend as a Service）であり、Fireabaseは特にモバイルに特化しているのでmBaaS（mはmobileのM）と言われたりもしています。 なので、この記事では同じBaaSである両者をFlutterFlowを活用する前提で基本的に知っておくべき共通点と違いを比較していきたいと思います。 基本情報Firebase：2011年創業 Supabase：2020年創業 そもそも
Just Build It. Skeet はオープンソースのTypeScript製サーバーレスフレームワークです。フルスタックから小規模タスクまで、あらゆるアプリ開発に対応しています。
これはなに？ こんにちは、エンジニアの冨永です！ モバイルアプリを開発していると、コード量や処理が増えることで徐々に起動時間が遅くなることがありますよね。SNKRDUNK でも一時期起動時間が遅くなっていて改善をしたことがあります。 この記事では、その改善をするために取り組んだことをまとめました。 Firebase Performance Monitoring の導入 Firebase Performance Monitoring とは Firebase Performance Monitoring サービスを使用すると、Apple アプリ、Android アプリ、ウェブアプリのパフォーマンス特性を把握できます。 Performance Monitoring SDK を使用してアプリからパフォーマンス データを収集し、Firebase コンソールでデータのレビューと分析を行います。これによ
[検証]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)
Firebase Authenticationを用いた「やってはいけない」システム設計の話 - Xtone Design & Tech Talk
エクストーンの豊田です。先日、エクストーン社内で技術勉強会があり、そちらでFirebase Authenticationを利用してWebサービスを設計・運用した際に困った話をさせていただいたので、こちらでも紹介させていただきたいと思います。 Firebase Authentication FirebaseはGoogleが提供しているモバイル・Webアプリケーション向けのプラットフォームで、認証やストレージ、関数実行等の機能を提供します。今回はFirebaseが提供する認証サービスであるAuthenticationについてお話しします。 Firebase Authenticationはユーザーの管理や認証を行うサービスで、メールアドレス・パスワードによる認証の他に、同じユーザーに対してGoogleアカウントやApple IDを利用した認証を紐づける等が可能です。ユーザーの管理自体をFireb
Firebase Auth のトークン解説
こんにちは、Cloud Support の Rnrn です。今日は Firebase Authentication (以下 Firebase Auth) で登場する「トークン」について掘り下げてみたいと思います。一口にトークンといっても Firebase Auth にはいくつか種類の異なるトークンがあるため、整理しておくと Auth フローがよりわかりやすくなりますよ！ ※ 本記事は公式ドキュメントを読み込むための足がかりのような立ち位置を想定し、厳密な正確さよりもわかりやすさに重点を置いています。 Firebase Auth でサポートされている認証方法は大きく分けて 3 種類あります。1 つがメールアドレス/パスワードや電話番号などを使う Firebase サービスによる認証、もう 1 つが Google や Facebook などのフェデレーション ID プロバイダによる認証、そして
概要 Firebase AuthenticationとGoogle Workspaceからのメール送信が必要なシステムで、SPFレコードを以下のように登録していた。 v=spf1 include:_spf.firebasemail.com include:_spf.google.com ~all mxtoolbox でSPFの構成をチェックしたところ、以下のような警告を発見。 Too many included lookups (11) Too many DNS Lookups? Solve this problem with SPF Flattening SPFにおけるDNSルックアップの最大回数は10回までという制限がある。 疑問 FirebaseはGoogleのサービスだからSPFのアドレスも重複しているのでは? 調査 redditにも同じような投稿があった。 It looks li
What's new at Google I/O 2023
Introducing the Extensions publishing experience If you’re a developer with an idea for a new extension - or if you want to help people get started with your business’ API - you can now use the Extensions publishing experience to build, publish, and share your own extensions with millions of Firebase and Google Cloud developers across the world. This is the first step towards building a thriving e
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「しずかなインターネット」の技術スタックを調べる - laiso
GA4はなぜこんなに「使いづらい」のか - ブログ - 株式会社JADE
Firebase Authから内製認証基盤に無停止移行して年間1000万円以上削減した
Firebase利用時に発生しやすい脆弱性とその対策10選 - Flatt Security Blog
オープンソースによるFirebase代替を名乗るBaaS「Supabase」が正式サービスとして提供開始
数百サイトがFirebaseのセキュリティルール設定を誤って合計1億2500万件の機密情報が公開されてしまっていた
【初学者歓迎🔰】 Reactでつくるポケモン図鑑📖 - Qiita
Next.jsをFirebaseにデプロイしたら高額請求がきて貯金がなくなりかけた話 - Qiita
Dynamic Links の非推奨に関するよくある質問 | Firebase
【Flutter】App Check を導入して Firebase を守ろう！【2023年9月】
Next.jsとFirestoreを用いたmicroCMS記事の「いいね」機能の設計と実装
Google I/O 2023で発表されたFirebaseの新機能まとめ - Qiita
FirebaseでPush通知を実現しよう！ Firebase Cloud Messagingを用いた通知システム
脱 Firebase. 我々はどう生きるか | AWS Dev Day 2022 Japan #AWSDevDay
トップページ | Skeet - TypeScript サーバーレスフレームワーク
モバイルアプリの起動時間の監視・改善するためにやったこと
FirebaseのSPFレコードを登録してる場合はGoogleのSPFは不要という話 - Qiita