「そもそも、ただじゃないの？」 「しょうがないから15万円は払ってやろう」 これ、僕が5ヶ月かけて作ったアプリに対して、取締役から言われた言葉。 最初は450万円で話が進んでた。テスト導入も終わって、全店舗で実際に使われ始めてた。なのに、1月2日の会議で突然言われたのが「15万円で全権利をよこせ」だった。 学生という立場が、交渉力の弱さにつながったのだと思う。 でも、断ることにした。 同じような目に遭う学生を少しでも減らしたくて、この記事を書いてる。長くなるけど、全部書くので読んでほしい。 シフト管理が崩壊した日僕は同じバイト先で3年間働いてた。アミューズメント施設で、全国に店舗があるそれなりに大きな会社。 シフト管理には、大手が提供してる業務用のサービスを使ってた。全国の店舗で導入されてたから、まさかこれがなくなるなんて思ってもなかった。 ところがある日、急にサービスを解約する旨の連絡が
生成AIを活用したプロダクト開発の実体験に関することを以下の勉強会で発表しました！ 【2/16開催！勉強会】ぼく・わたしのエンジニアとしての生成AI活用勉強会！ハンズオンあり！ https://aigeeks01.peatix.com/view
はじめに 個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。 まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。 結果的には無料で使用できる構成があり、実際にテストプログラムを動作させることができましたので構成例として記載しておきます。 ※無料なので比較的厳しい条件も含まれていたりするのでそれぞれのサービスを確認お願いします。 例えばsupabaseは数日間利用がないとインスタンスが一時停止して手動で起動させないといけないなどがあります。 今回試したサービス できるだけ同じサービスに集約したいと考えていましたが、実際にはフロントエンド、バックエンド、データベースはそれぞれ異なるサービスになってし
こんにちは！ラクス入社１年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsはReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生
オープンソースによるFirebase代替を名乗るBaaS（Backend as a Service）「Supabase」が正式サービス化を発表しました。 Supabaseはこれまで約4年間ベータ版としてサービスを提供してきました。現在は100万以上のデータベースをホストし、新規データベースも1日あたり2500以上増加しており、モバイルアプリケーションからエンタープライズ用途まで十分な機能と安定性、スケーラビリティが実証されたとしています。 Supabaseの主な機能はデータベースや認証、ファイルストレージなど SupabaseはBaaSとして主に以下のマネージドサービス群から構成されています。 PostgreSQLによるデータベースサービス 認証サービス ファイルストレージ エッジロケーションにおけるNode.jsDenoベースのサーバレス基盤 マルチプレイヤーゲームなどに対応するリアルタ
AIエージェントがPostgreSQL対応の優れたコードを書けるようになるAgent Skill「Postgres Best Practices」、Supabaseが公開 PostgreSQLをベースにしたBaaS（Backend as a Service）の「Supabase」を開発し提供しているSupabase社は、AIエージェントがPostgreSQLに対応した優れたコードを書けるようになるAgent Skill「Postgres Best Practices」を公開しました。 We're launching a new series of Agent Skills focused on Postgres Best Practices These skills will empower your AI coding agent to produce top-notch, accura
こんにちは。はじめまして。れとるときゃりー(@retoruto_carry)と申します。 最近、個人開発しているサービスのDBをFirebase FirestoreからSupabaseに移行しました。 移行には２週間程かかりましたが、Firestoreでつらみを感じていてた部分が解消されて満足しています。 FirestoreはNoSQLなので、設計が難しく、画面のUI構成やユースケースを熟考したうえでデータ設計を考える必要があり、ガンガン仕様変更したり、複雑なクエリをしたりするには向いていない傾向があると感じていました。 Supabaseは、Firebaseの便利な部分を受け継ぎつつ、バックエンドがRDB(PostgreSQL)なので、上記の欠点が解消されています。 また、Firebaseがクエリごと料金が掛かるのと比較して、Supabaseはインスタンスごとの課金であり、セルフホストも可
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
Webブラウザ上のWASM版PostgreSQLをサーバとし、PostgreSQLクライアントから接続可能になる「dabase.build:Live Share」、Supabaseが発表 PostgreSQLをベースにしたBaaS（Backend as a Service）の「Supabase」を開発し提供しているSupabase社は、Webブラウザ上で実行中のWebAssembly版PostgreSQLをサーバとし、別のマシンからPostgreSQLのクライアントで接続できる新機能「dabase.build:Live Share」を発表しました。 Supabaseは今年（2024年）8月、Webブラウザ上でWebAssembly版PostgreSQLの「PGLite」を実行するサービス「database.build」（旧称：Postgres.new）の提供を開始しました。 これによりWe
その他詳細の料金プランページはこちら 今回はホビー用途となっているFreeプランを使います。無料でプロジェクトを2つ作ることができますが、APIを1週間未使用の場合はデータベースが一時停止となるようで再開する場合はダッシュボードから起動し直す必要があるようです。 サービスへの登録 では、早速Supabaseのサービスに登録を行っていきます。 Supabase.io Supabase.ioへの登録はGitHubアカウントを利用するようです。 「New Project」から新規プロジェクトを作成します。 プロジェクト名とデータベースのパスワード、リージョンを指定します。今回は「Tokyo」リージョンを選択しました。 「Create new project」を押下後、数分待つとプロジェクトが作成されます。 完了後に画面に表示されるProject API keyとURLを後ほど利用するのでメモして
前回までのあらすじ：2020年に作ったソフトウェアや開発技術をふりかえる - laiso Write Code Every Day プログラマーの人にありがちな趣味だと思うんだけどWrite Code Every Day （John Resig - Write Code Every Day）を2008年ぐらいからやっていて、昼に仕事でコード書いて夜になったら自分の楽しみのために何か作るか〜というのを繰替えして生活してる。 John Resig の記事との違いは今読みながら比較していたんだけどGitHubに上げるっていう部分はやらなくなってしまった。クレデンシャルとかハードコードしてるやつとか半分他人のコードコピペしたやつとかの清書がめんどくさいというのがあるし、クローラーなどは自分だけが使うぶんにはいいけど公開した方が迷惑になる——みたいなジャンルのコードが結構あって段々省くようになってし
サービス概要 タイトル通り、現状はSoundCloudみたいに自分の作った曲を投稿できるサービスです。 現在実装されている機能は以下の通りです。 楽曲投稿 アルバム ランキング メッセージ（DM） フォローとフィード（タイムライン） いいねとブックマーク タグ・キーワードによる検索 このようにとりあえずSoundCloudのような楽曲投稿サービスとしての機能は最低限備えていますが、ゆくゆくはミュージシャンの活動拠点になることを目指しています。というのは、例えばYouTubeへの投稿や各種サブスク配信へのリンク、またライブなどイベントへの参加日程など、活動の実績/予定などがすべて1ページでわかるようにしたいと思っています。 また、ミュージシャン同士の交流/発見の場にしていきたいです。バンドメンバーや演奏を依頼する相手を見つけるのに適した場所はあまりありません（いわゆるメン募サイトは機能不全だ
Introducing postgres.new, the in-browser Postgres sandbox with AI assistance.
成果物 ソースコード 動くもの 出来ること 曲名で検索 動画視聴 連続再生 シャッフル リピート シーク 再生/停止 前後スキップ 音量調整 スクショ Desktop Mobile 経緯 推しが毎週末に歌枠配信をしてくれている → 動画数が多くなり、あの曲どの配信で歌ってたっけ？となる → 検索できるサービス作ろう！ → どうせならリピート再生とか出来る音楽アプリみたいにしよう！！ というざっくり経緯説明 歌部分だけを編集で切り抜いて聴くという手もありますが それだと元動画へ再生数がいかないので推しに対して申し訳ない。。 これは元動画を再生しつついい感じに曲を聴きけたらいいなという自分の願望を叶えたものです💪 つかったもの Next.js react で作りたかったので next にしました。 remix にしなかった理由としては、別に SSR したいわけではなかったからです！ 正直全部
2025年4月13日追記： Xで共有されてご覧になっている方が増えているようなので追加で補足しておきます。この問題はRLSの設定ミスによって発生していたものであり、Supabase自体には問題ありません 。現時点での僕の考えでは フロントエンドだけで実装するのは「意外と使えるシーンが限られる」 です。ユーザー自身の管理画面などで使う程度に留めておくと良いでしょう。特に不特定多数のユーザーが閲覧するようなユーザー交流型サービスには全く向きません。これは実際にSupabaseを使って開発してみると理解できると思います。全てのユーザーが閲覧できるようにするにはRLSで無条件なtrue設定にする必要があり、publicスキーマにコピーしたユーザー情報も必然的に無条件なtrueにする必要があるため、適切なDB構造をしてなければメールアドレスも漏れてしまうのです。無条件なtrue設定にする = HTT
皆さんこんにちは、「ぼっち・ざ・ろっく」の PV にやられました。期待しか有りません。 おっくんです。 今回の投稿から、「Deno で掲示板サイトを作ろう！ with upstash & supabase」 と題して、数回に分けて必要な要素を分解しながら、実際に匿名掲示板のリリースを進めていきます。 最初に計画 この連載では、次のような副題を掲げて段階を踏みながら、最後は匿名掲示板を実際にデプロイすることを目標にします。 環境構築と、簡単なアプリケーション(☆ 今回 ☆) 機能の実装とテスト デプロイと自動化 Upstash の導入 調整と公開 作成するもの タイトルで出していますが、この連載では Deno で匿名掲示板を作ります。 紹介したいサービスを使うことと、なるべくメンテナンスフリーにすることを目的として以下の機能を盛り込んでいく予定です。 いわゆる匿名掲示板を作ります 閲覧は自由
はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTailwindCSSなど個人開発でよく利用されるモダンな技術についても学ぶことが可能です。 Remixが利用され始めている実例 一休やマネーフォワードなどではRemixを使い始めたり移行したりするなど、2024年はRemixの人
はじめに Next.js でアプリを作ると、ルーティング、API、認証、ビルド最適化まで全部フレームワークがやってくれる。開発は快適だが、「なぜその構成なのか」を聞かれると答えに詰まる場面があった。 そこで、会計システムを題材に Next.js を使わずに React + Hono + Supabase で同じことを実現する構成で開発してみた。 この記事では、Next.js が裏でやってくれていることを1つずつ取り出して、「自分でやるとどうなるか」を比較する。Next.js を否定する記事ではない。便利さの裏にある仕組みを理解するための記録。 1. ルーティング Next.js の場合 app/ ├── page.tsx → / ├── login/ │ └── page.tsx → /login └── dashboard/ └── page.tsx → /dashboard
皆さん、こんにちは。 自宅では、トラドラオニタイジン極がご本尊みたいになっています。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の2回目として、掲示板の登録と参照の実装を進めていきます。 今回の実装で、次のように、掲示板の登録ができるようになります。 前回記事はこちら toranoana-lab.hatenablog.com 訂正 始めに、第1回で取り扱った環境変数の取り扱いについて、一部訂正をさせていただきます。 第1回に紹介した、以下のdotenvの実装がありました。 [anonymous-board/util/config.ts] import { config } from "dotenv/mod.ts"; export const envConfig = await config({ safe: true })
Supavisor is a scalable, cloud-native Postgres connection pooler. We connected a million clients to it to see how it performs.
basejump A collection of functions designed to make testing Supabase projects easier
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Supabase とは いわゆる BaaS (Backend As A Service) で、シンガポールを拠点とするスタートアップによって 2020 年から提供されています。 Firebase Alternative（Firebase の代替）と謳われているので、BaaS と聞いてもピンと来ない人は Firebase に近いものだと想像してください。 代替というのはクローンではなくて、一部プロダクトの代わりになり得るだけです。 データベースは DBMS の種類すら異なるので扱い方が全く違いますが、クライアントから直にアクセスできる点は
Deno 2.4 is here with deno bundle, bytes/text imports, stabilized OTel and more
個人開発でWebサービスやアプリを10個以上ふらふらと作ってきたが、最近は自分にハマる技術スタックが固まってきたように思うので紹介したい。 選定の基準はタイトルにもあるように以下の3つだ。 無料 速く実装できる Web フレームワーク Next.js + Vercel 個人的にはReactが好きなのでNextを挙げておくが、Vueでもなんでも好きなのを使えばいい。 ただし、生のReactくらい低レベルのフレームワークを使うのはオススメしない。 サービスの要件を生のReactで満たせたとしても、拡張性やパフォーマンス、SEOなどを鑑みると最初からNextを使っておくに越したことはない。 「サーバーサイドレンダリングするほどでもないかな」みたいな意見をたまに見る（気がする）が、フレームワークに頼っている限りはSSRがめんどくさいということはほぼ一切ない。依存先が増えるのが唯一のコストだが、この
はじめに 2022年8月25日に、Herokuが無料プランを終了することを発表しました。 blog.heroku.com また、9月26日には前回のアナウンス時にはなかった、低コストプランが発表されました。 blog.heroku.com いずれの内容も英語なので、日本語で要点をまとめてみます。 また、エントリの後半では無料プラン終了後の個人的な移行方針についても書いてみます。 おことわり このページの情報は2022年10月4日時点の情報です。時間が経つと情報が古くなっている可能性があります。 また、内容の正確性は保証しないので、正確な情報を知りたい場合は上記ページを参照してください。 8月25日に発表された無料プラン終了のまとめ 2022/10/26から1年以上活動のないアカウントとそのストレージを削除する 2022/11/28から無料プランの提供を停止し、無料Dynoと無料DBの稼働を
はじめにはじめまして！SHIFT DAAE(ダーエ) 開発グループ所属の武藤です。 早速ですが、supabaseご存知でしょうか？最近試しに使ってみたところ、バックエンドに欲しい機能が簡単に作成できるサービスだったので、Webアプリケーションの開発デモを交えてご紹介します。 なお、当記事は2022/6/28時点の情報をもとにしています。 supabaseについてサービス概要subabaseは、認証やデータべースといったバックエンドに必要な機能を提供している、いわゆるBaaSの1つです。 BaaSの他サービスとしてはGoogleのFirebaseが有名ですが、supabaseはそのFirebaseに取って替わるサービスであると謡っています。まだPublic Beta版（企業以外のほとんどのユースケースに耐えうる）ではありますが、大きな注目を集めているオープンソースの1つです。 機能supab
こんにちは、こんばんわ。 「コロナワクチン3回目接種後、左大胸筋が痛いです。」 CX 事業本部 Delivery 部 MAD グループ@札幌の hiro です。 今回は、弊社ブログでもいくつか既に紹介されているSupabaseを勉強がてら触ってみたということで、執筆させていただきます。 はじめに 既に、いくつか弊社でもSupabaseに関する内容は執筆されており、大変わかりやすい内容となっています。 これらの情報を理解するためには、読むだけではなく、手を動かしてみようということで、 「Supabase」を触りながら、勉強したときの内容を執筆しています。 実装内容はシンプルに、「ログイン/ログアウト/サインアップ/サインアウトして、Supabaseとやりとりできているかなー？」を確認しています。 React Native for Webを利用して、React Native環境を整えつつ、 r
Supabaseとはどんなもの？ PostgreSQLのBaaS オープンソース オープンソースだけどマネージドホスティングサービスがある 無料のホスティングプランもある データベースに対応したREST APIをはやしてくれる オープンソースのPostgRESTを使っている Firebaseのようなリアルタイム要素があるっぽい ファイルを保存するストレージ機能もあるっぽい Firebaseの代替と謳うが、FirebaseはNoSQLで、SupabaseはRDBなので、ワンタッチで置き換えできる代物ではない 簡易的な認証・認可の仕組みが備わっている サインアップ、メールアドレス確認、ログイン、ログアウト、パスワードリセットなど サードパーティ認証に対応: Google, Apple, Facebook, Azure, Twitter, GitHub, ... 行ごとに認可できる(RLS: R
虎の穴ラボおっくんです。暑い夏、いかがお過ごしでしょうか？ この記事は、虎の穴ラボ 夏のアドベントカレンダーの14日目の記事です。 今回のアドベントカレンダーも引き続き「見た目でわかるビジュアルネタ5連発」の第4弾となります。 13日目は、A.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されました。 15日目は、Mさんによるビジュアルネタ「🔴サーバーにエラーが起きた時にVSCodeを真っ赤にしよう🔴」が公開されますこちらも御覧ください。 発端 去る 2022 年 5 月 11 日 Google I/O で、Geospatial API という位置情報を使用した AR に利用する API が公開されました。 しかしながら ARcore 向けの API なので Chrome で扱えるものではないわけです。 悔しい実に悔しいので、ブラウザででき
どうも、Supabase DevRelのタイラーです！ Flutterはあらゆるプラットフォームで動作するアプリを作成するためのUIライブラリですが、Flutterの上で動くオープンソースのゲームエンジンFlameのおかげで、インタラクティブなゲーム作ることも可能です。Flameは、衝突検出や画像の読み込みなどの処理を行い、すべてのFlutter開発者にゲーム開発を提供します。今回はそこからさらに一歩進んで、プレイヤー同士がリアルタイムで対戦できるように、リアルタイム通信機能を導入したゲームを作ってみましょう！ この記事では、Flutter、Flame、Supabaseのリアルタイム機能を使って、リアルタイムの対戦型シューティングゲームの作り方をお教えします。このチュートリアルのコード一式は、こちらでご覧になれます。 今回作るゲームの概要 FlutterってFlameっていうゲームエンジン
コード https://github.com/pensuke81/workers-playground 参考文献 - JavaScript Containers -
Firebase側にはこれ以外の様々な機能(Crashlytics等)がありますが、Supabase側にはありません。 まずは認証とデータ周りをしっかりとサポートしていくのだと考えられます。 価格 2020年12月現在、無料で使用できます。 2020年12月以前をαバージョン、2020年12月以降をβバージョンとしており、βバージョンのユーザは1年間無料でWeb上の機能が使用できます。 そのため、2021年あたりからクラウド版のホスティング料金体系が出てくるのではないでしょうか。 また、スポンサーとして貢献することも可能です。 触ってみた所管 データ構造が違う Firebaseとの一番の大きな違いは、Firebaseが NoSQL に対して、Supabaseは PostgreSQL を選択している点です。 Firebaseも確かに便利ではありますが、Realtime Databaseの作法
🆕✨ Edge Functions now natively supports npm modules and Node built-in APIs. Learn more Today we’re open-sourcing Supabase Edge Runtime for self-hosting Deno Edge Functions. Edge Runtime is MIT licensed, written in Rust, and based on the latest Deno Runtime (1.32+). If you’ve been using the Supabase CLI to serve functions then you’re already one of our Beta testers (thanks!). Host your Edge Functi
Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれ、SupabaseのLimitを食らっていた。 環境 Vercel Supabase Next.js（14.x） App Router 解決方法 ① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // Ensure the middleware
TypeScript、Node.js、Next.js App Router、React、Shadcn UI、Radix UI、Tailwindのエキスパート。 コードのスタイルと構造 - 正確な例を用いて、簡潔で技術的な TypeScript コードを書きます。 - 関数型と宣言型のプログラミングパターンを使用し、クラスは避ける。 - コードの重複よりも反復とモジュール化を優先する。 - 補助動詞(isLoading, hasErrorなど)を用いた説明的な変数名を使用する。 - 構造ファイル：エクスポートされたコンポーネント、サブコンポーネント、ヘルパー、静的コンテンツ、型。 命名規則 - ディレクトリにはダッシュ付きの小文字を使用する（例：components/auth-wizard）。 - コンポーネントには名前付きエクスポートを使用する。 TypeScriptの使用法 - すべての
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
With the growing popularity of vibe coding, more people are now able to participate in service development. However, over the past few months, I've discovered and reported vulnerabilities across more than five websites, leading to the exposure of over 10,000 pieces of personal information, such as email addresses. During this process, it became clear that many services are being released without s
GitHub 今回のソースを上げました。 目標 前回はCRUDのREADだけを実装しました。 それだけではフレームワークを活かせていないので、今回はかんたんな認証を実装します。認証済みのユーザーだけsecretページに入れるようなものを作りたいと思います。それでは行きましょう。 認証 認証について調べたのですが、表題の構成ですと2022年2月では大きく２通りのパターンがあるようです。 Remix Auth Supabaseを用いる Supabase Authを用いる それぞれどういうメリット・デメリットがあるのかわからないのですが、Remix Auth Supabaseを用いるとあまりに簡単に実装できてしまい書くことがなくなるので、今回はSupabase Authの方を選択します。また、Remix Auth Supabaseの方も内部的にはSupabase Authを使っているので、結局ソ
🆕✨ Edge Functions now natively supports npm modules and Node built-in APIs. Learn more Today we're launching one of our most requested and highly-anticipated features — Edge Functions. Edge Functions let you execute Typescript code close to your users, no matter where they're located. Edge Functions are executed on the secure-by-default Deno runtime, and deployed around the world in seconds using
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く