ZOZOTOWNのマーケティングプラットフォームでのフロントエンドの取り組み - ZOZO TECH BLOG
はじめに こんにちは、MA部の林（@hayash__p）です。 私達のチームでは、メール、LINE、Push通知、サイト内お知らせなどでユーザにZOZOTOWNのセールや新着商品を紹介するといった、マーケティングに関わるシステムを開発しています。これまで、配信チャネルや配信内容ごとに個別最適化したシステムを開発していましたが、それらを一新したマーケティングプラットフォームを作ることになりました。新しいマーケティングプラットフォームであるZOZO Marketing Platform（以下、ZMP）の概要については以下のテックブログをご覧ください。 techblog.zozo.com 本記事では、マーケティングプラットフォームのリプレイスにあたり、フロントエンドエンジニアとして取り組んだことを紹介します。 目次 はじめに 目次 背景 ZMPの管理画面モジュール MPマネージャー 技術選定 M
I've found that one of the best ways to understand a new concept is to start from the very beginning. Start from a place where it doesn't exist yet and recreate it yourself, learning in the process not just how it works, but why it was designed the way it was. This isn't a practical guide to async, but hopefully some of the background knowledge it covers will help you think about asynchronous prob
AnthropicAI Tool で Retrieval-Augmented Generation を実装してみた
LangChain なんか使わなくてもシュッと作れたので記事にしておく。 RAG とは 生成AIに検索能力をもたせるやつ。 要は検索機能をこちらで提供してやって、AIにそれを読ませる。 AnthropicAI Tool OpenAI でいう Function Calling JSONSchema で関数シグネチャを与えると、それを使うDSLを生成する。実際の関数は自分で実装して、AI が生成した引数(JSONSchema に従う)を渡す。 TypeScript の Mapped Types でツールの実装部分に型をつける簡単なラッパーを書いた。 RAG の CLI を作る Google検索をするAPIを実装 Google Custom Engine API を使った 本文要約をするAPIを実装 Mozilla の実装を使った 与えられた URL を fetch して、その本文部分を抽出する
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
Rust の hyper は何が嬉しいか
Rust でWebサーバーを書く時の技術選定をするときに調べていると hyper に必ず出会うと思う。これは黎明期から存在しているライブラリで、Webサーバーにしては珍しく version 1 まで到達している老舗だ(1に到達してたら安心って考え方が正しいかはさておき...)。このライブラリは actix-web や axum のような他のライブラリとは毛色が違い、かなり primitive だ。そのため axum のベースに使われてもいて、hyper はそのまま使わないライブラリなのかもしれない。 サンプルコードから存在意義がわかりにくい さて、そんな hyper だが公式の example はこのようになっている。 #[tokio::main] async fn main() -> Result<(), Box<dyn std::error::Error + Send + Sync>>
Today we’re excited to announce the release of TypeScript 5.2! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
多言語対応している Web アプリで、あらかじめファイルに書き出しておいた画像 (アセット) が言語別にあって、それをページに埋め込むにはどうするか、という話題です。基本は言語ごとに別々の画像を出すことないと思いますが、たまーにあるんですよね。例えばGoogle Play のバッジが言語ごとに違うので、これを言語ごとに出し分けたいとか。 Google Play バッジ – Google 色々方法があるので、それをいくつか紹介します。 方法1. import 文を言語の数だけ書く シンプルにやるなら、言語の数だけ import 文を書いて、next/image の <Image> コンポーネントで読み込むコードを書くかと思います。 // pages/index.ts import Image from 'next/image'; import GooglePlayJaJP from '../
OpenAI が公開した Function Calling の API を使用すれば、定義した関数の情報を渡すことで、自然言語からどの関数を使用すべきかどうかを判定し、引数も json スキーマに従ってレスポンスしてくれます。 この情報を使って API クエリを実行し、レスポンスを元に UI を動的にレンダリングすれば、自然言語から UI が描画され面白いのではないかと思い実践してみました。 この例では、Function として OpenWeatherMapと REST Countriesを定義しています。 その他にも世界銀行の人口データからチャートを表示したりと、自然言語とコンピューター言語の融合がますます進みそうでかなりワクワクしました。 やりかた 今回は Next.js (App Router) と Vercel AI SDK を使用しました。全体的な実装は GitHub に載せてい
なぜ cloudflare-workers: 運用が楽 なぜ claude3: GPT-4 より体感性能がいい 動いてるもの /claude <prompt> で claude 3 が答えてくれるチャットボットで、 cloudflare-workers 上で動く。 ただし、AI は自分のことを FF7 のクラウドだと思い込んでいるミッドガル在住の中年男性という設定になっており、時折魔晄中毒で幻覚を見始める。 (アイコンは bing で生成させた) (最近 FF7リバースをクリアしたので...) 自分の課金で claude3 の APIキーを使って動かしてるので、一般公開はしない。代わりにソースコードは公開している。 claude3 を動かす 以下の記事を参考にした。 とりあえず課金してAPIキーを手に入れる。この課金登録フローが少々面倒だったが、調べれば出てくるのでこの記事では割愛。 トー
unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。
Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
Next.js 14まとめ
基本的には以下のNext.js 14のブログを翻訳してまとめたものになります。 TL;DR Turbopack: App & Pagesルーター向けの5000のテストをパス ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 サーバーアクションの安定版: 進歩的に強化されたミューテーション キャッシュと再検証の統合 シンプルな関数呼び出し、またはフォームとネイティブに連動 部分的プリレンダリングのプレビュー版: 高速な初期の静的レスポンス+ストリーミングの動的コンテンツ Next.js Learnの新規追加: Appルーターや認証、データベースなどを教える無料のコース アップデート詳細 Next.jsコンパイラ Next.js 13以降、Next.jsではPagesとAppルーターの両方でローカル開発のパフォーマンスを向上させるように取り組んでき
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog
GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し替えたい バックエンドの resolver 実装を待たずにフロントエンド側の開発を始めるために、ダミーレスポンスに差し替えたい 一般には GraphQL Client にモックするための機能が実装されてるので、そうしたものを使うことが多いと思います。 zenn.dev また最近は Client よりも外側のレイヤーでリクエストを interrupt してモックする「msw」を使うケースも増えてきてます *1。 blog.engineer.adways.n
はじめに 下記の素晴らしいGLSLを使ったシェーダーアートのチュートリアル動画の内容をWebGPUでやってみたのでその覚書です。WebGLは以前少しだけ齧ったことがありましたがWebGPUについては完全に知識ゼロなので入門のお題としてやってみた感じです。チュートリアル動画ではShadertoyを使っておりフラグメントシェーダーに記述する部分のみの解説なので、そもそもフラグメントシェーダーを使ってブラウザで描画させるまでの工程も含めてWebGPUで再現してみるという感じです。自分も完全に理解できているわけではないのでおかしい部分があるかもしれませんがご容赦ください。またWebGPUはまだWorking Draft（草案）段階なので今後いろいろと変更される可能性があることにも注意が必要です。 実際に作ったもの リポジトリ codesandbox 実装について ざっくりとした全体の作りとしては四
Apple・Google・Microsoft・Mozillaが協力して開発するベンチマークツール「Speedometer 3.0」が登場
Apple、Google、Microsoft、Mozillaといったテクノロジー大手が協力して開発するベンチマークツール「Speedometer 3.0」が発表されました。 BrowserBench.org — Announcements https://browserbench.org/announcements/speedometer3/ Improving Performance in Firefox and Across the Web with Speedometer 3 - Mozilla Hacks - the Web developer blog https://hacks.mozilla.org/2024/03/improving-performance-in-firefox-and-across-the-web-with-speedometer-3/ Speedomet
export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the user is authenticated // But we need to check for it anyway for TypeScript. return redirect('/login'); } else if (error) { return <p>Error: An err
技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？
Ruby methods are colorless
👋🏼 This is part of series on concurrency, parallelism and asynchronous programming in Ruby. It’s a deep dive, so it’s divided into 10 main parts: Your Ruby programs are always multi-threaded: Part 1 Your Ruby programs are always multi-threaded: Part 2 Consistent, request-local state Ruby methods are colorless Concurrent, colorless Ruby: Part 1, Threads Concurrent, colorless Ruby: Part 2, Fiber a
We've added JavaScript-native RPC to Cloudflare Workers
We've added JavaScript-native RPC to Cloudflare Workers04/05/2024 Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system enabling seamless Worker-to-Worker and Worker-to-Durable Object communication, with almost no boilerplate. You just define a class: export class MyService extends WorkerEntrypoint { sum(a, b) { return a + b; } } And then you call it: let three = await env.
Piccolo - A Stackless Lua Interpreter 2024-05-01 History of piccolo A "Stackless" Interpreter Design Benefits of Stackless Cancellation Pre-emptive Concurrency Fuel, Pacing, and Custom Scheduling "Symmetric" Coroutines and coroutine.yieldto The "Big Lie" Rust Coroutines, Lua Coroutines, and Snarfing Zooming Out piccolo is an interpreter for the Lua language written in pure, mostly safe Rust with a
【2023年版】数あるSwiftの非同期処理の実現方法をきちんと理解した上で使い分けよう - machio Development Diary
これは Qiita iOS Advent Calendar 2023 の13日目の記事です。 概観 背景 こんな人へ向けた記事 この記事で扱う非同期処理の実現方法 GCDを用いた非同期処理 GCDとは DispatchQueue DispatchQueueへのタスク引き渡し DispatchQueueの優先度 DispatchQueueの分類 (Private Dispatch Queue) GCDの使い方 Operation、OperationQueueクラスを用いた非同期処理 Operation、OperationQueueクラスとは Operation、OperationQueueクラスの使い方 タスクの定義とキューへの追加 タスク間の依存関係の設定 タスクのキャンセル GCDとの比較 余談：Operationクラスは単体でも実行できる Threadクラスを用いた非同期処理 Thre
Transformers高速化ライブラリvLLMのAsyncLLMEngineを利用した非同期高速文章生成 - 端の知識の備忘録
概要 先日までKaggleのAIMOコンペ(数学の問題をLLMに解かせて正答率を競う)に参戦していました。結果は初のチーム参加でメンバーに助けられつつ運もあり、なんとか銀メダルを取れました！これでMasterにリーチがかかりましたが、金メダルは未だ取れる気がしないので遠い道のりです……。 www.kaggle.com このコンペについて、近い内に同様のコンペが開催予定なこともあり上位解法があまり出ていない状態なので、どのような手法が良かったのかまだわかっていないのですが、とりあえず公開されている情報を元にすると、 LLMとしてはほぼほぼ全員が数学問題に特化したLLMであるDeepseek-Math-7Bを利用している LLMが出力したPythonコードを実行するインタープリターを実装することで、LLMのハルシネーションによる計算ミスを防ぐパイプラインが有力であった LLMの出力を比較的高い
この記事では、Cloudflare Workers を使用してウェブサイトのメンテナンスモードを実現する方法を解説しています。また、作業中のユーザーにはオリジンサイトを、一般ユーザーにはメンテナンスページを表示させる方法を説明しています。 こんにちは。Classmethod Europe でフロントエンドエンジニアをしている watsuyo です。 ベルリンに来てから 1 ヶ月半が経過し、肌寒く、そして日照時間の短い冬の気配が感じられる季節になりました。 さて、ウェブサイトに大規模な変更を加える際、サイトの一時的な利用停止が必要な場面があります。Cloudflare で管理されているウェブサイトの場合、Waiting Room を使用することで、コードの編集を行わずに一時的なメンテナンスページを表示できます。 しかし、Cloudflare の契約プランによっては、Waiting Room
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.3.3?bundle&target=esnext"; import {minify_sync} from "https://esm.sh/terser@5.27.0?bundle&target=esnext"; for(const {type, textContent} of document.getElementsByTagName("script")){ if(type !== "text/typescript" || !textContent){ continue; } const js = transpile(tex
こんにちは、UPSIDERで日々モバイルアプリ開発をしているふっくです。 UPSIDERでは今後、よりアプリ開発に注力し決済プラットフォームの中核的な役割を果たすことを目指しています。 今回は、今後の開発・運用を目指して考えたFlutterアプリ向けのアーキテクチャを紹介します。 ネイティブアプリの世界で触れてきた色々なアーキテクチャ・フレームワークを参考に、開発の後半でも順調にスケールさせることができるように、工夫を凝らしました。 本アーキテクチャで作ったサンプルアプリもあるので、ぜひ以下のリンクから見てみてください。 https://github.com/upsidr/flutter_architecture_blueprint デモはこちら https://upsidr.github.io/flutter_architecture_blueprint/ 対象読者 目指すところ 参考に
Storybook is the industry standard workshop for building, documenting, and testing UI components. It’s used by leading development teams at organizations like Shopify, Gov.UK, and NASA. One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “story”—is a UI test. And if you want to test data fetching and user interactions, Storybook
Rust.Tokyo 2023参加記
こんにちは。Zennでは初めまして。cordx56です。 今回は、先日開催されたRust.Tokyo 2023の参加記を書きたいと思います。よろしくお願いします。 Rust.Tokyoとは？ Rust.Tokyoとは、プログラミング言語であるRustのカンファレンスです（念の為）。そこまで多くの情報は載っていませんが、公式サイトもあります。 なぜ参加したの？ 私は今回のRust.Tokyo 2023がRust.Tokyoの初参加でした。今回はRust.Tokyoのしばらくぶりのオフライン開催だったようです。 私自身、最近何かを作る際にはRustを用いることが多くなったこと、そして今のインターン先がRust.Tokyo 2023のスポンサー企業であったこともあり、現地で参加してきました。 オフライン会場は六本木のメルカリさんのところで、とてもいい会場でした。また現地では知り合いに会うこともで
Back to BlogMonday, October 23rd 2023 How to Think About Security in Next.jsPosted by React Server Components (RSC) in App Router is a novel paradigm that eliminates much of the redundancy and potential risks linked with conventional methods. Given the newness, developers and subsequently security teams may find it challenging to align their existing security protocols with this model. This docume
Bun は WinterCG meetings に参加せず、標準から外れた拡張を利便性のために結構取り入れている。またエコシステムとして合意の取れていない実装をすることもある。これら API を使ってしまうと Node.js や Deno、Cloudflare Workers などで扱えず相互運用性の問題となる。知らず知らずのうちに使ってしまわないようにまとめておく。 Jarred Sumner @jarredsumner 2024/02/18 02:45 JS runtimes obsess about web standards but web standards orgs are incentivized to only care about browsers Luca Casonato 🏳️🌈 @lcasdev 2024/02/18 05:48 @jarredsumner J
なお、middleware.ts でリクエストログを出力してDatadogに構造化してもらうデモコードはこんな感じ。console.logでオブジェクトを文字列として出力している（そうすると1レコードにまとめてくれる）。 import { type NextRequest, NextResponse, userAgent } from "next/server"; import { getSession, withMiddlewareAuthRequired, } from "@auth0/nextjs-auth0/edge"; export default async function middleware( request: NextRequest, event: NextFetchEvent, ) { const response = NextResponse.next(); con
PlaywrightをGitHubActions実行したときの初期処理についての試行錯誤 | フューチャー技術ブログ
Playwright連載5日目です。 近年PlaywrightやCypressを用いたE2Eテスト（エンドツーエンドテスト）が行われるようになってきました。 E2Eテストとはソフトウェアやシステムの全体的な動作や機能をテストする手法で、ユーザーが実際に行う操作を模倣したテストを行い、アプリケーションが予想通りに機能するかどうかを確認していきます。 具体的な操作手順をテストケースとして作成し、予期される結果との整合性を確認していくわけです。バグの早期発見のためにも、E2Eテストの自動化を行い、さらにはCIに組み込み定期的に実行していきたい。そしていざ組み込んでみると、CIの実行時間が気になってきます。 テスト自体の実行時間も短縮を行っていきたいですが、テストが始まるまでのイニシャライズ、初期処理の時間もそこそこ掛かってしまうもの。 今回はどのように設定していけば処理時間が短くなるか。試行錯誤
脆弱性の修復コマンドをGitHubのIssueから実行するAction作ってみた - LIVESENSE ENGINEER BLOG
はじめに イメージ 実行 フローチャート しんどいポイント VS インタラクティブな操作 APIからstdoutが取れるが、途中で切れる sudoでコマンド叩こうとするとttyがなくてエラーになったが… 実装 Issueへのコメントを実行トリガーにする 実行トリガーのコメントにリアクションでいいねをつける Issue本文からコマンドと対象インスタンスを取得する サンプルIssue本文 コマンドの取得 インスタンスIDの取得 OIDCでAWSへの操作権限を安全に取得する 【参考】IAMロールの権限 OIDCで権限の取得 コマンドの実行 実行結果の取得 実行結果をissueにコメントで貼り付ける debugに役にたつ結果をissueにコメントで貼り付ける 作ってみて はじめに インフラGの鈴木です。先日高知競馬で負けた後、朝5時に起き、エクストリーム出勤してこの記事を書いています。 ところで、
Private Browsing 2.0
When we invented Private Browsing back in 2005, our aim was to provide users with an easy way to keep their browsing private from anyone who shared the same device. We created a mode where users do not leave any local, persistent traces of their browsing. Eventually all other browsers shipped the same feature. At times, this is called “ephemeral browsing.” We baked in cross-site tracking preventio
自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the use
Task/ValueTask を直接返せる場合でも原則非同期メソッド (async/await) にしたほうが良い
ユーザーコードでは Task/ValueTask (ジェネリック版含む) を直接返すことが可能の場合でも原則として非同期メソッドにして await することをおすすめします。 原則として、というのはこの記事で紹介するようなポイントを理解した上で最適化のために行うのは良いのですが、ユーザーコードでは落とし穴にハマるのを避けるためにほとんどのケースで素直に非同期メソッドにした方がよい、という話です。 Task/ValueTask を直接返す、返さないとは そもそも Task/ValueTask をそのまま返すコードというのはどういうものかというと、次のようなコードです。 public async Task Main() => await NantokaAsync(); public ValueTask NantokaAsync() { // 非同期を必要としない WriteAsync を呼び出
はじめに Unity には Microphone というクラスがあり、これを通じてマイクの情報や入力を取得できます。しかしながら Microphone は WebGL では利用することが出来ません。 docs.unity3d.com Unity では FMOD をオーディオ周りとして利用しているようで、基本的にスレッド上で動くためスレッドが（部分的にしか）利用できない WebGL とは相性がよくなく、結果的に Web Audio API をベースに自前で実装する、という選択をしたようです。その上で多くのオーディオ系 API は再実装されたものの、幾つか Web Audio API との相性が良くないものは利用不可、となっているようです。そして Microphone はごっそり「不対応」となったようですね。 私は uLipSync というリップシンクのためのライブラリを作っていまして、この中
React Server Component のテストと Container / Presentation Separation
Photo by Jon Tyson from unsplashはじめに先日 @takepepe さんと フロントエンドのテストについてパネルディスカッションする機会 があり、その際に一瞬だけ Next.js App Router のテストの話題になりました。 僕自身、最近 Next.js App Router と格闘する日々を送っておりタイムリーな話題であったのですが、イベントの場では時間の都合もありほとんど語らず仕舞いとなってしまいました。 そこで、今回の記事は App Router、特に React Server Component のテストについて、最近考えていたことを吐き出していこうと思います。 要旨この記事では「2023 年 8 月現在で利用可能なツール群で、どのように React Server Component (以下 RSC) をテストしていくのが妥当か」を書いていきます
次の記事の 2023 年版です。 tl;dr 次のコードを "deno.enable": true にしない(Node環境のまま)Node＋Deno両方の型チェックが通る vscode 環境にする。 // .ts 拡張子を許可 import { dep } from "./dep.ts"; // node_modules から npm module を解決 import ts from "typescript"; // deno/node 共用で Deno に型をつける const Deno: typeof import("@deno/shim-deno").Deno = (globalThis as any).Deno ?? (await import("@deno/shim-deno")).Deno; const source = ts.createSourceFile("test.t
フルスクラッチして理解するOpenID Connect (2) トークンエンドポイント編 - エムスリーテックブログ
こんにちは。デジカルチームの末永(asmsuechan)です。この記事は「フルスクラッチして理解するOpenID Connect」の2記事目です。前回はこちら。 www.m3tech.blog 7. トークンエンドポイントの実装(POST /openid-connect/token) 7.1 アクセストークン 例 7.2 ID トークン 例 7.3 IDトークンを返す部分を作る 7.4 アクセストークンを返す 7.5 パラメーターの検証 7.6 認可コードの検証 7.7 クライアント認証 8 イントロスペクションエンドポイントを作る(POST /openid-connect/introspect) まとめ We're hiring 今回は全4回中の第2回目です。 (1) 認可エンドポイント編 (2) トークンエンドポイント編 (3) JWT編 (4) stateとnonce編 7. トーク
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learning Async Rust With Entirely Too Many Web Servers
Vuex から Pinia への移行を行いました - every Tech Blog
Announcing TypeScript 5.2 - TypeScript
Next.js で言語ごとに異なるアセット画像を埋め込む - mizdra's blog
ChatGPTのFunction CallingでUIを動的レンダリングしたら楽しかった
cloudflare-workers で動く claude3 の discord-bot を作ってみた
WebGPUでシェーダーアートをやってみる（Vite、TypeScript）
Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
kyju.org - Piccolo - A Stackless Lua Interpreter
Cloudflare Workersでメンテナンスモードを実装する | DevelopersIO
HTMLにTypeScriptを書いてブラウザで直接実行できるって知ってた？ - Qiita
UPSIDERのこれからを担うFlutterアプリのアーキテクチャ - UPSIDER Techblog
Portable stories for Playwright Component Tests
How to Think About Security in Next.js
Bun の非互換な拡張 API - moriken's project
Next.js AppRouterのエラートラッキング・ロギング手法で悩む
Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Unity の WebGL ビルドでマイク入力を扱えるライブラリを作ってみた - 凹みTips
Deno/Node を vscode ワークスペースで共存させたい