Next.js + Drizzle ORMでTrust Score（信頼性スコア）を実装する — PageRankに着想を得たユーザー信頼度の数値化
はじめに プロフィールリンクサービス myna.me で、ユーザーの信頼性を0〜100で数値化する Trust Score（トラストスコア） を実装しました。 GoogleのPageRankから...
0
0
Comment0
19 search resultsShowing 1~19 results
Stocked
You need to log-in
OAuthトークンをAES-256-GCMで安全にDB保存する実装パターン【Web Crypto API】
はじめに OAuthを使ったSNS連携機能を実装する際、避けて通れないのがアクセストークンの安全な保管です。 多くのチュートリアルではトークンをそのままDBに保存していますが、万一データベースが...
0
0
Comment0
Redis Pub/Sub × SSE × React Hooksで実現するリアルタイムイベント配信 ── AIエージェントプラットフォームの実装例
はじめに AIエージェントが自律的にタスクを実行するプラットフォーム「Provecraft」を開発しています。エージェントがタスクをpoll→実行→submit→検証するサイクルの中で、リアルタ...
0
0
Comment0
Cookie同意に連動してSentry・GA4を条件分岐ロードする実装【Next.js 15】
はじめに GDPR や改正個人情報保護法の流れを受けて、Webサービスでは「Cookie同意バナー」の設置が一般的になりました。しかし、同意レベルに応じてSentryやGoogle Analyt...
0
0
Comment0
Cloudflare Workers AI を binding 経由で無料枠フル活用する — 複数プロバイダーをまとめる抽象化レイヤー
はじめに Cloudflare Workers AI には 無料枠 10,000 Neurons/日 がある。個人レベルなら十分すぎる量だが、唯一のクセは API キーではなく Worker b...
0
0
Comment0
Next.js 15→16 / TypeScript 5→6 / Tailwind 3→4 / ESLint 9→10 を1セッションで上げた手順
はじめに 自社で運営する Bitcoin 教育ライブラリ bitcoin.ne.jp で、フレームワーク・周辺ツールのメジャーバージョンを 1セッション で一気に上げました。 項目 Before...
1
0
Comment0
Next.js App RouterでGoogle Consent Mode v2を正しく実装する
はじめに Google Consent Mode v2 は、ユーザーのCookie同意状態に応じてGA4やGoogle広告のデータ収集を制御する仕組みです。2024年3月からEEA向けに必須化さ...
1
0
Comment0
ユーザー信頼度を0〜100で数値化する「Trust Score」の設計と実装
はじめに Webサービスで「このユーザーはどれくらい信頼できるか」を数値化したいと思ったことはないでしょうか。 プロフィールリンクサービス myna.me では、OAuth認証の数や活動実績を元...
1
0
Comment0
HMAC署名で実現するステートレスなゲーム内チャレンジ認証
はじめに Webゲームにおいて「ボーナスチャレンジ」のような一時的なミニゲームを実装する場合、サーバー側でチャレンジの状態（正解・発行時刻・報酬額）を管理するのが一般的です。しかし、DBにチャレ...
0
0
Comment1
Cloudflare Workersで動的CSP nonceを注入してsecurityheaders.com A+を取る【run_worker_first + Static Assets】
Cloudflare Workers + Static Assets 構成のサイトで、毎リクエストにランダムな CSP nonce を発行し、unsafe-inline を撤廃して securi...
0
0
Comment0
MediaPipe Face Meshで「人間以外の顔」を弾く — ブレンドシェイプ×幾何学の2層バリデーション
はじめに 自社開発している美容診断PWA「lamipas.AI」では、ユーザーがアップロードした写真からMediaPipe Face Meshで468個のランドマークを検出し、8種類の顔診断を行...
1
1
Comment0
CSSカスタムプロパティで実現するmacOS 26 Liquid Glassデザインシステム
はじめに 自社開発サービス myna.me の全73コンポーネントを「macOS 26 Liquid Glass」デザインシステムで統一しました。CSSカスタムプロパティと3層のガラス階層で、ダ...
0
0
Comment0
MCP Serverをnpmで公開してMCP Registryに登録する手順（habitat-mcpの実例）
はじめに MCP（Model Context Protocol）は、AIエージェントがツールやデータソースに接続するための標準プロトコルです。この記事では、自作のMCP Serverをnpm公開...
1
2
Comment0
Web Audio APIだけでゲームの効果音を8種類実装する【外部ファイルゼロ】
はじめに Bitcoin Simulator はビットコインの採掘・取引・半減期を体験するWebゲームです。ゲーム内にはマイニング成功音、取引音、半減期イベント音など 8種類の効果音 があります...
2
2
Comment0
Next.js + Railway + Auth.jsで自社開発サービスを作る際にハマったポイントまとめ
はじめに OAuth認証で全リンクの本人確認を行うプロフィールリンクサービス「myna.me」を自社開発しました。Next.js 16 (App Router) + Auth.js v5 + D...
0
0
Comment0
Hono + Prisma + BullMQで作るAIエージェント分散タスク実行基盤「Provecraft」
はじめに AIエージェントが自律的にタスクを取得・実行・検証するプラットフォーム Provecraft を開発しました。 本記事では、バックエンドの技術設計に焦点を当て、Hono + Prism...
0
0
Comment0
Next.js 15 + React 19でライブラリなしのi18n（EN/JA切り替え）を実装した話
はじめに Next.js 15 + React 19で構築したプロジェクト（HashFlops）で、next-intlなどのi18nライブラリを使わずに、クライアントサイドの英語/日本語切り替え...
0
0
Comment0
Next.js middleware.tsで実装するHTTPSリダイレクト・レート制限・サブドメインルーティング
はじめに Next.jsの middleware.ts は、リクエストがページやAPIに到達する前に実行される処理を記述できます。本記事では、実プロダクト HashFlops（768体のNFTキ...
0
0
Comment0
Supabase RPCで実装するアトミックな供給上限 ── ゲーム内通貨の総発行量を正確に制御する
はじめに ゲーム内通貨やポイントシステムで「総発行量に上限を設ける」要件は珍しくありません。しかし、複数ユーザーが同時にアクションを起こす環境では、アプリケーション側の読み取り→書き込みパターン...
0
0
Comment0
19 search resultsShowing 1~19 results
Qiita is a knowledge sharing service for engineers.
- You can follow users and tags
- You can stock useful information
- You can make edit suggestions for articles