OpenAI Agents SDK で「人類はもう生成AIに勝てないと痛感したDeep Researchの使い方」を自動化してみた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに @zazen_inu さんの記事「人類はもう生成AIに勝てないと痛感したDeep Researchの使い方」が凄いので OpenAI Agents SDK で自動化してみました。 目的 @zazen_inu さんのメソッドを楽に実行したい OpenAI Agents SDK で実装してみてフレームワークのクセとか使い方を理解したい 方法 愚直に実装します。 処理フロー それぞれの Agent の背後にはテキスト生成モデルがいます。用途によってモデルの種類を決めます。賢さ、インターネットの情報の調査能力、コストなどを意識します。
MCPツールを使う汎用的なStreamlitチャットアプリを作って、いろんなMCPツールを使ってみた。 - Qiita
MCPがあれば何でもできる。 MCPとStreamlitを使って汎用的なチャットアプリを作ってみました。 今回は「LangChain MCP Adapters」を使用します。 「LangChain MCP Adapters」のREADMEをChatGPTにREADMEを要約してもらいました。 LangChain MCP Adapters は、Anthropic Model Context Protocol (MCP) のツールを LangChain や LangGraph で使えるようにする軽量なラッパーです MCP ツールを LangChain のツールとして変換し、複数の MCP サーバーと接続できるクライアント実装を提供します 簡単なインストールとセットアップで、MCP ツールを LangGraph エージェントに統合できます やってみよう！ まずはただのチャットを作る ライブラリー
【Gemini】GPU不要！超軽量TTSとLLMを使ったチャットWebサービスの構築 ～ UTAU収録音声を用いたTTS ～
はじめに エイプリルフールネタとして、「蒼月ハヤテ」という歌声合成音声ツール用の素材キャラクターを作りました。 その際に配布サイトも自作したのですが、折角キャラクターと歌声生成用の自分の声データがあったので、それらを組み合わせてLLM=>TTS(text-to-speech)を繋げたら、まるで自分のクローンが喋っているようになると思ったので、隠し機能としてTTSでのお試しと会話機能をWebに展開しました。 今回は備忘も込めて、各種技術の紹介をしようと思います。 できあがりイメージ ざっくり使用技術 Typescript arwes (frontend design) Next.js Gemini API (LLM) tone.js (sound) render.com (deploy) upstash (security) 要件の整理と技術選定 元々は「UTAU」という合成音声用の素材配布
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HttpClientを上手に扱えていますか？ .NET アプリケーションを開発していると、外部のAPIと通信するためにHTTPリクエストを送る必要が生じます。 .NETでHTTPリクエストを送信する簡単な方法は、HttpClientを使うことです。 しかし、HttpClientは誤って使われやすいクラスでもあります。 よくある問題としては、ポートの枯渇やDNSの挙動に関するものがあります。 以下がHttpClientを使ううえで知っておくべきことです。 HttpClient利用のNG例 IHttpClientFactoryを使って設定を
こんにちは。 ファインディ株式会社 で Tech Lead をやらせてもらってる戸田です。 現在のソフトウェア開発の世界は、生成AIの登場により大きな転換点を迎えています。 GitHub Copilotやチャットベースの開発支援ツールなど、生成AIを活用した開発支援ツールが次々と登場し、開発者の日常的なワークフローに組み込まれつつあります。 そのような状況の中で、「プロンプトの書き方がわからない」「プロンプトが思った動作をしてくれない」といった声をよく耳にします。 そこで今回は、生成AIに対するプロンプトの書き方のコツを紹介します。プロンプトの書き方のコツを知るだけで、生成AIの精度は驚くほど向上します。 それでは見ていきましょう！ 長い文章よりも、簡潔な階層構造 記述の順序 対象と実行内容を絞る まとめ 参考文献 長い文章よりも、簡潔な階層構造 長文のプロンプトよりも、マークダウン記法な
Vercel AI SDK で MCP クライアントをツールとして利用する MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。 MCP（Model Context Protocol）は、LLM（大規模言語モデル）に追加のコンテキストや機能を提供するための標準化されたプロトコルであり、AI アプリケーション開発において注目を集めています。MCP を利用することで、LLM は外部ツールやデータソースと連携し、より高度なタスクを実行できるようになります。 MCP サーバーの例としては、以下のようなものが
Django のアプリケーションログを structlog で構造化し、ログの検索性を向上させる - Nealle Developer's Blog
こんにちは。SREチームの高 (@nogtk)です。ゼノブレイドXリメイクで惑星ミラの探索に勤しんでいる今日この頃です。 直近行った取り組みとして、アプリケーションログの構造化を行い、ログの検索性の向上を行いました。この記事では実際の実装も交えつつ実施した内容についてご紹介したいと思います。 構造化ロギングによって解決したい課題 Park Direct のバックエンドアプリケーションは Django で作られ、ログの出力先としては Datadog Logs を利用しています。このアプリケーションログは、長らくデフォルトである非構造化形式でログが出力されており、以下のような課題を抱えていました。 タイムスタンプやログレベル、トレースバックなどの各要素について、Grokパーサなどを駆使し Datadog のログパイプライン処理で抽出を行なっていたが、パターン網羅に限界があり、うまくパースできて
Taming distributed systems with DST.
初めに 色々話題になっているMCPですが皆さん使っていますか？ コーディングや開発周りでも既に色々なところで採用事例が紹介されており、かくいう私も採用前後で開発体験や実装スピードに顕著な変化を感じています。 とはいえ、日々の仕事においては幸か不幸か”開発”以外のタスクが多いのも事実であり、特に現職では情報が 日々のやりとり => Slack 社内の規定や情報 => Kibela プロジェクトや一般的な資料 => GoogleDrive チケット管理 asana or Jira のようになっており、ブックマークや拡張機能などを駆使しながらも必要な情報を探すのに一苦労という状況になっていました。 ここで「あ、全部1つのインターフェースからアクセスできれば楽じゃね？」と閃きました。 MCP自体の説明などは公式サイトのドキュメントに譲ることにし、早速作っていきたいと思います 作っていく（成果物）
先月執筆した 「Next.js App Router で実装！フリマっぽいサンプルアプリ」 という記事に続き、たまたま機会があったので Next.js App Router で実装シリーズの第二弾として、技術スタック共有サイトっぽいサンプルアプリを作ってみました。 前回の記事では、ディレクトリ構成やレンダリングモデルなどの基本的なところを手探りで書いていました。今回の記事では、ディレクトリ構成など踏襲しつつ下記の部分をアップデートとして取り組んでみました。 ORM を用いた DB アクセス 簡易的なテスト Next.js 特有のモーダル実装 認証認可 OpenTelemetry による計装 今回は「Next.js でフルスタックに実装する際の技術スタックは何を使う？」というのをテーマに実装してみました。一ヶ月間の隙間時間で実装したにしては色々な要素を詰め込めて、自分なりに最低限こういった周
TL;DR Cline の Memory Bank は複数ファイルの読み込みが必要で、毎チャット5回程度のチャットのラリーが発生する MCP で簡単なツールを作り、一回のやり取りで前ファイルの読み込みが可能になった。 MCP は一種の Custom Instructions のようにも使える 課題 Cline で Memory Bank という、Cline にプロジェクトの知識を外部化して持たせるプラクティスがあるが、これをやっていると毎回チャットの初めにファイルの読み込みためのラリーが発生してしまいます。 これは Cline が使える read_file というツールが単一のファイル読み込みで、かつ、Cline は一回のチャットのラリーで一つのツールを一回しか使えないからです。 解決策 そこで今回は MCP で Memory Bank の一括読み込み用のツールを作ることで、このやりとりが
![[Cline] Memory Bank を一括読み込みする MCP を作ってみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/3425c6445d9d0b0d98c2ecd13c056b45b0fc6050/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--YQ4CU58T--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCline%25255D%252520Memory%252520Bank%252520%2525E3%252582%252592%2525E4%2525B8%252580%2525E6%25258B%2525AC%2525E8%2525AA%2525AD%2525E3%252581%2525BF%2525E8%2525BE%2525BC%2525E3%252581%2525BF%2525E3%252581%252599%2525E3%252582%25258B%252520MCP%252520%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%2525BF%2525E3%252581%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252583%252598%2525E3%252583%252596%2525E3%252583%2525B3%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhmNDMxNmYwYzcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
以下のサンプルコードの使い方をまとめました。 ・openai/openai-agents-python/examples/research_bot 1. Research Bot「OpenAI Agents SDK」でシンプルな「Deep Research」クローンを実装します。処理の流れは、次のとおりです。 (1) ユーザーが 研究テーマ を入力 (2) planner_agent でWeb検索のプランを作成。 プランは検索クエリのリストです。 (3) search_agent で検索クエリを実行。 Web検索ツールを使用して検索して結果を要約します。これらは並行して実行されます。 (4) writer_agent でレポートを作成。 ファイル構成は、次のとおりです。 ・research_bot ・main.py ・manager.py ・printer.py ・agents ・plan
We hacked Google’s A.I Gemini and leaked its source code (at least some part) - Lupin & Holmes
We hacked Google’s A.I Gemini and leaked its source code (at least some part) Mar 27, 2025 RONI CARTA | LUPIN gemini, llm, google, source code, leak, bug bounty, hack Back to Vegas, and This Time, We Brought Home the MVH Award ! In 2024 we released the blog post We Hacked Google A.I. for $50,000, where we traveled in 2023 to Las Vegas with Joseph "rez0" Thacker, Justin "Rhynorater" Gardner, and my
WebKit Features in Safari 18.4
Safari 18.4 is here! It includes 84 new features, including a completely new declarative mechanism for sending Web Push notifications, lots of CSS including a brand-new shape() function, P3 & translucency for the HTML color picker, media formats with more robust support for recording, new Web APIs including modern popover manipulation, new JavaScript features like Iterators, a faster way to jump t
Join the conversation on X: https://x.com/documenso/status/1907019629652058196 When we started building Documenso, choosing Next.js was a no-brainer. We wanted SSR (server-side rendering), easy routing, and the vibrant community that came with it. It helped us ship fast, iterate quickly, and provided all the essentials in one neat package. For a while, it was exactly what we needed. Early Adoption
こんにちは。ビデオリサーチのキクチです。 今回はタイトルの通り、とある低予算プロジェクトで手探りながらAI駆動UI開発を導入してみた話を書いてみたいと思います。 はじめに なぜ tldraw.makereal を選定したのか ローカルで実行可能 Tailwind CSS でデザインされるため実装移行がスムーズ 簡単なインタラクションの実装も可能 その他のメリット ローカル環境構築のステップ リポジトリのクローン 必要なパッケージのインストール サーバーの起動 postgres周りの設定 ローカル用postgresの構築 スキーマ作成用スクリプトの作成 スキーマの投入 envの作成 pgドライバーのインストール ソースの修正 使用出来るAIプロバイダとモデルについて OpenAI Anthropic デザインの生成 生成されたデザイン Tips まとめ はじめに 昨年末にとある Web アプ
In JavaScript, code has color: It is either synchronous or asynchronous. In this blog post, we explore: The problems caused by that How to fix them via synchronous await The two downsides that prevent synchronous await from being practical The problems of asynchronous code being different from synchronous code # The key problem is that synchronous code can’t call asynchronous code. On one hand th
RailsアプリケーションをWebAssembly化してブラウザ内で実行する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Ruby on Rails on WebAssembly: a guide to full-stack in‑browser action—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2025/02/18 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術記事編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita ブラウザだけで完全なブログ機能を実行できるとしたらどうなるか、想像してみてください。フロント
Why Is This Site Built With C Created at: 2024-08-26 I've been writing about things on a personal website since 2017. Most of what I have written features in the category of notes-to-self. Mostly on how to do A or B. Only recently I've started polishing notes together and forming posts on specific topics. One thing I realised was preventing me of writing more frequently wasn't the lack of ideas (o
Why F#?
If someone had told me a few months ago I’d be playing with .NET again after a 15+ years hiatus I probably would have laughed at this.1 Early on in my career I played with .NET and Java, and even though .NET had done some things better than Java (as it had the opportunity to learn from some early Java mistakes), I quickly settled on Java as it was a truly portable environment. I guess everyone who
注意: この記事内にある Model Context Protocol の C# SDK のサイトからコピーしてきたコードは、単一の接続しか受け入れられないように実装されています。複数のクライアントからの接続があった場合は後に接続したもののみ動作する実装になっています。 リポジトリ側のコードも、記事を書いてから数日のうちに更新されていて以下の Pull Request で、ちゃんと接続を管理するようになっているコードが追加されています。ModelContextProtocol.AspNetCore NuGet パッケージを追加して MapMcp メソッドを呼び出すことでちゃんと接続を管理する機能のついた /sse と /message のエンドポイントが追加されるようになります。 Add ModelContextProtocol.AspNetCore #160 本文 ここ最近、色々なところ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事では、Skip FrameworkとConvexという2つのリアクティブバックエンド技術について、機能やできること、開発のやりやすさなどの観点から比較します。対象読者はバックエンド開発経験者や中級フロントエンド開発者を想定しています。 Skip Frameworkとは何か Skip Framework（以下 Skip）は、Meta社（旧Facebook）で開発されたオープンソースのリアクティブバックエンドフレームワークです (GitHub - SkipLabs/skip: Skip is a framework for build
Mastering Error Handling for React in 2025: Best Practices and Examples 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 エラーハンドリングはあらゆるReactアプリケーションの重要な側面であり、問題が発生した場合でもスムーズなユーザー体験を確保します。この記事では、フォーム、サーバーデータフェッチングなど、様々なタイプのコンポーネントでのエラー処理について、2025年に備えて実践的な例を用いて説明します。まず、適切なエラーハンドリングがアプリケーションにもたらす利点を理解しましょう。 エラーハンドリングが重要な理由 Reactアプリケーションにおけるエラーの種類 UIレンダリングエラーに対するエラー境界 コード例：エラー境界 使用方法 フォームでのエラー処理 コード例
【Adobe Fireflyの使い方】Pixabay・Unsplash・Shutter Stock等で見つからない画像を生成する方法 - このは屋
`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else
今回はWSL2上のUbuntu 24.04LTSに、Composerと呼ばれるPHP用のパッケージマネージャーをインストールしてみます。Laravelの様なフレームワークと呼ばれる仕組みを使用する場合などに必要になります。Windows用のインストーラーもありますので、MAMPなどでも使用可能と思われます。Windowsへのインストール方法はこちらの記事等をご参照ください。 Composerをインストールします こちらのサイト様等を参考にインストールを行っていきます。Ubuntuのパッケージマネージャーを更新して、インストールに必要なUbuntuのパッケージをインストールします。今回はユーザー権限で実行しています。 cd ~ sudo apt update sudo apt install curl unzip php php-curl 以下のコマンドを入力して、Composerをダウンロ
はじめに 第8章でアプリをデプロイしました。今回は、パフォーマンスを最適化し、検索機能を追加してユーザー体験を向上させます。Reactとバックエンドの両方を改良します。 目標 Reactのパフォーマンスを最適化する 商品検索機能を追加する エラーハンドリングを強化する Reactのパフォーマンス最適化 1. Lazy Loadingの導入 ProductListを遅延ロードします。App.tsxを更新： import React, { Suspense } from 'react'; import './App.css'; import { ProductProvider } from './ProductContext'; import { AuthProvider } from './AuthContext'; const ProductList = React.lazy(() =>
ローディング状態の制御などの非同期処理では処理中であることを示す、try...catchを使います。 さらにfinallyを併用することで、ローディングのような「必ず実行したい処理」を確実に実行することができたので、今回備忘録としてまとめます。 前提条件 Reactを使ったコンポーネント内で状態管理をしている SupabaseなどのAPIから非同期でデータを取得・送信するケースを扱っている ローディング状態（loading）はuseStateで管理されている 関数にはasyncが使われており、非同期処理の完了をawaitで待っている try...catch...finallyとは try...catch 非同期処理やエラーが起こりうる処理をtryブロックに書きます。そこでエラーが発生すると、処理は中断され、catchブロックに移ります。
`; $el.appendChild(tooltipEl); } $el.querySelector('.tooltip').style.display = 'inline-block'; } }, hideTooltip($el) { if($el.querySelector('.tooltip')) { $el.querySelector('.tooltip').style.display = 'none'; } }, toggleTooltip($el) { if($el.querySelector('.tooltip')) { if($el.querySelector('.tooltip').style.display === 'none') { $el.querySelector('.tooltip').style.display = 'inline-block'; } else
皆さん、こんにちは！ Svelte Japanは、SvelteやSvelteKitの公式ドキュメントを日本語に翻訳し、Svelteに関するイベントを開催する、日本最大のSvelteコミュニティです。これから新たに、Svelteに関する最新情報や機能アップデート、コミュニティイベント、役立つリソースなどを定期的にお届けするニュースレターを始めます。 このニュースレターを通じて、皆さんがSvelteを使った開発をより楽しく、そして効率的に行えるようサポートしていきます！ それではさっそく、今月のトピックスを見ていきましょう！ Svelteの新機能 新しいidPrefixオプション: renderに新たに追加されたこのオプションにより、クライアントサイドのID生成がより信頼性の高いものになりました。これは、ページ上に複数のSvelteランタイムが存在する場合でも安心してID生成が行えるようにする
JavaScriptにおける非同期処理設計パターン：Promiseチェーン / async-await / 並列・直列・条件分岐処理の構造設計 - Qiita
概要 非同期処理とは「async/awaitで書くこと」ではない。 それは**“処理の流れ・構造・失敗・依存を意図通りに制御し、読みやすさと再利用性を両立させるための構造設計”**である。 JavaScriptにおける非同期処理は、Promise、async/await、thenチェーン、並列実行、順次処理、条件付き非同期など多様なパターンが存在する。 それらを目的に応じて設計・選択しなければ、見通しの悪いコードやバグの温床となる。 1. 非同期制御の基本形：Promise vs async/await // Promiseチェーン doA() .then(doB) .then(doC) .catch(handleError); // async/await async function execute() { try { const a = await doA(); const b =
私からのメッセージは Syphon (Spout) はいいぞ！ / Tauri最高!! 以上になります。 今日はこれだけ覚えて帰ってください。 ここ数年、歌詞と楽曲をリアルタイムで同期再生するアプリケーションの制作に取り組んでいます。 今回は Tauriで構築した音楽プレイヤーアプリケーションと、TouchDesigner を連携させてみました。 ちなみに上記のサンプル楽曲・歌詞は私がSuno AIで作成したものになります。 （こういったサンプル作成時に気兼ねなく楽曲を利用できるのでSunoは重宝しています） OSC（Open Sound Control）プロトコルを介して TouchDesigner に値を入力して演出描画処理を行わせ、Touch Deisgner からは Syphon を用いてレイテンシー無しにGPUメモリから直接動画フレームを取り出すことで（ほぼ）リアルタイムに連携す
CloudFront KeyValueStore で複数組のユーザー名/パスワードを管理して、CloudFront Functions により構成したベーシック認証で使ってみた | DevelopersIO
CloudFront KeyValueStore で複数組のユーザー名/パスワードを管理して、CloudFront Functions により構成したベーシック認証で使ってみた こんにちは、CX 事業本部 Delivery 部の若槻です。 re:Invent 2023 を数日前に控える中で、Amazon CloudFront が稼働するエッジロケーションでデータ領域を使用可能とする「Amazon CloudFront KeyValueStore」が発表され、界隈はにわかにざわつきました。 以前まではコンテンツへのリクエストに応じたデータの処理を行いたい場合は、CloudFront Functions のコード内にデータを埋め込む必要がありましたが、今後は簡単なキーバリューペアのデータであれば CloudFront KeyValueStore に格納して、コードと独立して管理することが可能と
【UniTask】Addressableのロードキャンセル時に起こりがちなメモリリークをautoReleaseWhenCanceledで自動解放して防ぐ - LIGHT11
UniTaskでAddressableのロードキャンセル時に起こりがちなメモリリークをautoReleaseWhenCanceledで自動解放して防ぐ方法についてまとめました。 キャンセル時にはアンロードが必要 挙動を確認する 実行結果 関連 キャンセル時にはアンロードが必要 いま、Addressable アセットシステムでアセットをロードする際に、途中で処理をキャンセルすることを考えます。 しかし Addressables のロードメソッドの引数にはそもそも CancellationToken が用意されていないので、自身で以下のようなメソッドを用意する必要があります。 using System.Threading; using Cysharp.Threading.Tasks; using UnityEngine; using UnityEngine.AddressableAssets;
JavaScriptにおける非同期設計戦略：Promise / async-await の原則、並列制御、キャンセル設計とエラーフロー - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに VOICEVOXという「無料で使える中品質なテキスト読み上げ・歌声合成ソフトウェア」があります。これで「中品質かー」と思うくらいよくできていて、ちょっと自作アプリに組み込んだり、Web 上で喋らせたり、コマンドラインから起動できたら楽しそうです。 配布するのもライセンス的にかなり緩いので問題ないのですが、環境(CPU/OS)やファイルサイズ(合計 1GB くらいある)的に苦労するところがあります。ちょっと遊びに使いたいだけなんだけどなー、というときにはやはり Lambda みたいなところで WebAPI として使えると便利です。 そこでこの VOICEVOX(Core) を Lambda で動くようにした https://github.com/mokemokechicken/lambda-vvcore というのを作ったので共有します。 作ったもの 何ができるのか Lambda と
Ollamaで実装する無料 MCP Agent
ローカル MCP Agent の作成 今回は Ollama を経由してローカル LLM で、MCP Agent を動作させます。API は OpenAI 互換のものを使っています。この構成なら開発時には電気代以外の費用がかからないというメリットがあります。 今回のサンプルコードと動作画面 カスタム Transport を作って、McpServer を直接 McpClient に接続する MCP のやり取りで@modelcontextprotocol/sdkを使った場合、McpServer を McpClient で扱うには、標準だと stdio,websocket,http を経由する Transport しか用意されていません。別プロセスにしたり、WebServer を立ち上げたりすると開発が面倒になるので、カスタムの Transport を作成して、直接やりとりをガッチンコさせます。
AWS Lambda PowerToolsで実現する効率的な運用監視 - 構造化ロギングからトレーシングまで - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに サーバーレスアプリケーションの普及に伴い、その運用監視の重要性が増しています。特に、マイクロサービスアーキテクチャでは、複数のLambda関数が連携して動作するため、問題の特定や性能のボトルネック分析が複雑化しています。 AWS Lambda PowerToolsは、このような課題に対する包括的なソリューションを提供します。本記事では、PowerToolsの実践的な活用方法について、実装の詳細と運用のベストプラクティスを共有します。 特に以下の点について深く掘り下げていきます： ・構造化ロギングによる効率的なトラブルシューティ
<!DOCTYPE html> <html> <head> <title>MUFG</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p
import '../globals.css'; import Link from 'next/link'; export const metadata = { title: 'Next.js 2025ブログ', description: '2025年の最新技術で作られたブログサイト', }; export default function RootLayout({ children }) { return ( <html lang="ja"> <body className="font-sans antialiased"> <header className="bg-blue-800 text-white p-4"> <nav className="max-w-4xl mx-auto flex flex-col sm:flex-row justify-between items-cent
はじめに 第4章でReactとバックエンドを連携しました。今回は、アプリが複雑になるにつれて必要となる「状態管理」を強化します。具体的には、Context APIを使って商品リストをグローバルに管理する方法を学びます。 目標 Context APIの基本を理解する グローバルな状態を管理する 商品追加機能を追加する Context APIとは Context APIは、Reactでコンポーネント間でデータを簡単に共有するための仕組みです。Propsを何層も渡す必要がなくなり、コードがシンプルになります。 Contextの作成 frontend/srcにProductContext.tsxを作成し、以下を追加： import React, { createContext, useState, useContext } from 'react'; const ProductContext =
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【.NET】HttpClientの正しい使い方 - Qiita
Findyの爆速開発を支える生成AI活用 ~プロンプトの書き方編~ - Findy Tech Blog
Vercel AI SDK で MCP クライアントをツールとして利用する
Deterministic simulation testing for async Rust
MCPサーバー入門＆社内サービス連携で日常業務を圧縮する
Next.js App Router で実装！技術スタック共有っぽいサンプルアプリ
[Cline] Memory Bank を一括読み込みする MCP を作ってみた
OpenAI Agents SDK で シンプルなDeep Researchクローンを実装する｜npaka
Why We Moved off Next.js - Documenso
低予算プロジェクトで手探りでAI駆動UI開発を導入してみた - ビデオリサーチ公式テックブログ
Could JavaScript have synchronous `await`?
Why Is This Site Built With C
.NET で MCP サーバー・クライアントを試してみよう
Skip FrameworkとConvexの比較 - Qiita
【2025年版】Reactのエラーハンドリングを完全攻略！バグとの戦いに今日で終止符を打つ最強テクニック集 - コハム
UbuntuにComposerをインストールする方法 | ミムラソフト
Reactとバックエンドで作る！実践Web開発入門 | 第9章: パフォーマンス最適化と機能追加 - Qiita
ローディングでのエラー処理をtry-catch-finallyでまとめた【非同期処理】 - Qiita
【DeepSeekの使い方】プロンプトを活用して、メルマガ原稿の叩き台を生成する方法 - このは屋
Svelte Japanニュースレター : 2025年4月
OSCとSyphon を使った Tauri x TouchDesignerの（ほぼ）リアルタイム連携
VOICEVOX(Core)をAWSLambdaで動かす - Qiita
三菱UFJ銀行のサンプルAPIを試してみた - Qiita
Next.jsをモバイルファーストデザインに最適化してみよう - Qiita
Reactとバックエンドで作る！実践Web開発入門 | 第5章: Reactの状態管理を強化 - Qiita