サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
インタビュー
zenn.dev/ubie_dev
はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosukeとともに、Ubie UI というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie UI」というデザインシステムに則って UI 開発を行って
zenn.dev/acntechjp
はじめに 2025年4月2日、Gensparkより画期的な汎用AIエージェント「Genspark Super Agent」が発表されました。 本記事では、その概要と特徴をまとめ、実際にどのようなタスクを自動化・高速処理できるのかの解説と実際に触ってみた感想をお伝えします。 Genspark Super Agent とは Genspark Super Agentは、日常的なタスクを真に自律的に考え、計画し、実行し、ツールを利用して処理できる、高速かつ信頼性の高い汎用çです。 さまざまなツールを自動的に使用するオールインワンのスーパーエージェントとして設計されており、ユーザーの代わりに複雑なタスクを処理できます。 主なテーマと重要なアイデア 日常タスクの自動化 旅行計画・予約 レストラン予約 動画コンテンツの要約 市場調査とレポート作成 コンテンツ制作(動画、ポスター、ウェブサイト) プログラ
はじめに 今回は、現代のWBE開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何?という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
zenn.dev/maya_honey
やらかしてしまいました。今回は業務における失敗談をお話しようと思います。 何をやらかしたか バッチの実装を誤った結果多数のユーザーにメールを重複送信してしまい、ユーザーはもちろん社内のカスタマーサクセスチーム、開発チームにもご迷惑をおかけしてしまいました。 技術スタック typescript Prisma Mysql バッチの要件 特定のステータスを持つユーザーに対して、以下の処理を行うバッチです ステータスの更新 ※更新すること次のバッチの対象から外れる その他の処理 ※本題から逸れるので省きます メール送信を行う どんな実装をしたか 流れとしてはこんな感じ バッチの対象ユーザーを取得 ユーザーに対して、updateMany等で一括更新処理 処理が終わったら対象ユーザーにメール送信 export async function sample() { // 対象ユーザーを取得 const t
zenn.dev/karaage0703
ふと、マインドマップを作りたくなったので調べてみました。なるべく長く使えそうな汎用的な手法を書いておきます。 Markmapを使う ChatGPTをはじめとして、大体のLLMで使えると思います。プロンプトは以下のような感じ。 # からあげの作り方 ## 材料 - 鶏もも肉(約500g) - 醤油(大さじ2) - 酒(大さじ2) - みりん(大さじ1) - すりおろしにんにく(1片) - すりおろししょうが(1片) - 片栗粉(適量) - 小麦粉(適量) - 揚げ油(適量) ## 下ごしらえ - 鶏肉を一口大に切る - 調味料を混ぜる - 醤油 - 酒 - みりん - にんにく - しょうが - 鶏肉を調味料に漬ける(30分〜1時間) ## 衣をつける - 漬けた鶏肉の水気を軽く切る - 片栗粉と小麦粉を混ぜてまぶす - サクサクにしたい場合:片栗粉多め ## 揚げる - 油を170〜180
zenn.dev/kandai
Xで「Chrome 135からCSSだけでカルーセルを実装できる」という投稿を見かけたので実際に試してみました。 Chrome for DevelopersでもCSS を使用したカルーセルとして紹介されていました。 この記事によるとCSS Overflow Module Level 5の機能として、スクロールを操作するボタンやマーカーが実装できるようになったとのこと。これを使えばJavaScriptなしのCSSだけでカルーセルが実装できるみたいです。 完成形 最初に最終的に作成したカルーセルを置いておきます。すべてJavaScriptなしで実装されています。(Google Chromeの135以降で確認してください) Xで動画も投稿しているので、動きだけだったらこちらでも確認できます。 基本的な実装 元記事ではリッチなサンプルが紹介されていますが、実装が紹介されているのは基本的な部分だった
zenn.dev/erukiti
コーディングエージェント(ClineやCursorなど)を使っている人は、うまくいくときは少ないプロンプトでさくっとやってくれるのに、あるタスクではそうじゃないという経験をしたことがあると思います。 「高速目grep」は、コーディングエージェントの途中経過を目で確認して、「待て、それはあかん!」って止めた上で、指示を出したり、作業をなかったことにしたりするものです。 これが必要になるケースを分類すると、筆者の理解では次の通りです: 使うべきじゃないテクニックを使ってしまう 使うべきじゃないライブラリなどを使ってしまう 場当たりなことをやらかす 設計ミスをやらかす 現行世代のLLMは、コーディングエージェントでは圧倒的にノウハウが確立された3.5/3.7-sonnetや、世界最高峰の頭脳であるGemini 2.5 Proですら、こういう「やらかし」は日常茶飯事です。 やらかしに対処するために
zenn.dev/smartround_dev
こんにちは、スマートラウンドの開発の渡邊です。 最近MCPサーバーという単語を聞くことが増えたので、自社サービスのデータをMCPサーバー経由で取得した場合の挙動を検証したくなり、PoCの実装をしました。 この記事では、似たような状況の方(自分のようなMCP初心者)を対象に、以下のような目的でMCPサーバーを実装するための知見を共有します。 何らかのWebアプリケーションのデータをMCPサーバー経由で取得してLLMとの連携を検証したい PoCレベルのクオリティで良い(ローカル起動の開発サーバーなどの本番環境以外でのお試し) この記事ではMCPサーバーやプロトコルの詳細な説明はしません。MCPサーバーを実装してお試しで動かすことのみに焦点を当てます。 やることとしては、基本的には公式のQuickstartと似た内容を段階的に実装します。 ただし、実装内容を簡素にすることで、最初の一歩としてなる
zenn.dev/cloud_ace
はじめに こんにちは。クラウドエース株式会社 第一開発部の前山です。 アプリケーション開発を中心に取り組みつつ、Google Cloud 公式認定トレーナーとしても活動しています。 今回は、タイトルの通り、案件でご一緒しているメンバーの皆さんに、自分ができる範囲でガッツリとしたフィードバックをしてみた取り組みについてお話しします。 結論から言うと、質の良いフィードバックは需要があるし、すごく喜ばれるから、頑張る価値がありますよです。 それではいきましょう。 対象読者 フィードバックという取り組みに関わるすべての人 前提 フィードバックの話に入る前に、色々前提となる部分について説明させてください。 そもそもの状況 自分はとあるシステム開発案件のプロジェクトリーダーをしています。 プロジェクトリーダーは複数名いるのですが、自分はアプリチームというバックエンドの技術領域をメインに行うチームのプロ
zenn.dev/delisit
はじめに 皆さん、AIエージェントを使ったコーディングしていますか? 私もここ半年ほどいくつかのツールを使って生成AIと共にコードを書くことを試してきましたが、2025年3月時点ではCline + OpenRouter(主にClaude 3.7 Sonnet API)の組み合わせが一番信頼が高く快適にコードを書けると感じています。しかしClaude 3.7 Sonnet APIは料金が比較的高く、思う存分使いこなせないという課題を抱え始めるようになってきました。 このAPI利用に加えて個人でClaude Proもサブスクリプション契約しており、これだけですでに月額$20(約3,000円)を支払っています。 そこで、より効率的な料金プランを模索していたところ、興味深い解決策に出会いました。 より効率的な選択肢:ClaudeのLLMを月額固定料金で使用する方法 一方2025年3月頃から、「Cl
zenn.dev/gmomedia
Vibe Codingを体験してみた - AIエージェントと一緒にウェブアプリを作ろう GMOメディアでSREを担当している安保です。 今回はDeepLearning.AIが提供する「Vibe Coding 101 with Replit」というコースを受講し、実際にAIエージェントと一緒にサンプルアプリを作ってみた体験をシェアしたいと思います。 Vibe Codingとは? 「Vibe Coding」とは、AIコーディングエージェントに大部分のコーディング作業を任せながら、自分はアプリケーションのアーキテクチャや機能の設計に集中するという新しいコーディングスタイルです。単に一度プロンプトを投げて全ての提案を受け入れるだけではなく、作業を構造化し、プロンプトを洗練させ、より効率的なコードにつなげるフレームワークを使用するプロセスが含まれています。 コースの概要 このコースはReplit(オ
zenn.dev/shunsuke_suzuki
先日起きた tj-actions や reviewdog のセキュリティインシデントのレポートを読みました。 その内容を個人的な検証結果や感想を挟みつつかいつまんで書きたいと思います。 詳細は原文を読んでください。 なお、侵害された repository 及び tag は全て修正され、盗まれた Personal Access Token (PAT) も revoke されているはずです。 攻撃の流れ tj-actions/changed-files が侵害されるまでに複数の PAT の流出及びリポジトリの侵害が連鎖的に起こっています。 つまり tj-actions/changed-files が直接的にいきなり侵害されたというより、複数のリポジトリをいわば踏み台のようにして侵害したという感じでしょうか。 攻撃者は PAT が盗まれたりした GitHub Account とは別に複数の Gi
uvが良さそうという噂を聞いたので、MiniForgeからuvに移行することを決意しました。 直接のきっかけは以下のUdemy講座の受講です。eikichi先生ありがとうございます! Python初学者でもOK!UV×VSCode×GitHub×Vast aiを活用したデータ分析・AI開発環境構築術 MiniForgeはインストールしてないよって人は、最初のMiniForgeの削除を読み飛ばせばuvのセットアップ記事として読めます! MiniForgeの削除 MiniForgeを断固たる決意で削除します。以下記事の最後にちゃんとアンインストールの方法が書いてあります。 uvのセットアップ 公式ガイドを参考にセットアップします。 インストールは以下コマンドです。
zenn.dev/sun_asterisk
これは何? 最近業務でやってたプロジェクトのキリがよくなったので、少しでも開発プロセスの知見を残そうと思って書いた記事です。 弊社は基本アジャイル開発で案件を進めてるんですが、具体的な開発プロセス事例の紹介って案外アウトプットされないんですよね。 直近の案件の中で、長らくお世話になっている敏腕PMの方(以下Mさんとします)がいるんですが、直近の案件での事例を記事にしていいかと聞いたら快諾してくれたので、実際にやっていたことを書いていこうと思います。 はじめに アジャイル開発について語る際に、最も重要なのは 正解は一つではない ということです。 アジャイル開発の成功は、それぞれのチームの特性や状況に合わせて、柔軟にプラクティスを調整していくことにかかっています。この記事で紹介する内容は、あくまでも一例として捉えていただき、自分たちのチームに合った形を探る際の参考程度にしていただければと思いま
zenn.dev/kimuson
Claude Desktop をベースに自律的なコーディングエージェントを実現するためのツールセット「Claude Crew」を開発したので、ツールと開発で得た知見を紹介します。 リポジトリ: Claude Desktop で動かす OpenHands をイメージして作っています。 このツールはModel Context Protocol (MCP)とカスタムインストラクションを最大限に活用し、Claude Desktop のコーディング能力を向上させます。 TL;DR Claude Desktop で OpenHands のような自律型のコーディングエージェントを実現する Crew Crew を作ったよ RAG 機能やプロジェクトに最適化された MCP を提供するよ Claude Desktop ベースのエージェントとは 昨今では、LLM のコーディングへの活用が浸透してきて、Cline
zenn.dev/microsoft
はじめに 今まで Model Context Protocol (MCP) の C# SDK を調べて記事を書いてきました。 .NET で MCP サーバー・クライアントを試してみよう .NET で MCP サーバー・クライアントを試してみよう その 2 .NET で MCP サーバー・クライアントを試してみよう その 3 今回は MCP サーバーを自作して Visual Studio Code の GitHub Copilot の Agent から使ってもらおうと思います。 プロジェクトの作成と下準備 ASP.NET Core の Web API のプロジェクト(Minimal API) を作成して、そこに以下のパッケージを追加します。 ModelContextProtocol.AspNetCore v0.1.0-preview.4 余談ですが 2 日前にはこのパッケージは無くて Mod
zenn.dev/aldagram_tech
こんにちは、アルダグラムでSREを担当している okenak です。 今回は、2024年末に実施した KANNA の AWS インフラ基盤の全面リプレースについてご紹介します。 このプロジェクトは、昨年下期に実施した大規模な基盤移行であり、構成の見直しから段階的な切り替え、本番移行に至るまで、多くの検討と労力が求められました。 本記事では、移行に至った背景、当時直面していた課題、具体的な取り組み内容、そして移行を通じて得られた学びについてまとめています。どこか一部でもご参考になれば幸いです。 ▶️ KANNAのサービス紹介ページはこちら 🏗️ なぜ今、インフラ基盤のリプレースが必要だったのか? 急速に成長を続けるSaaSサービスに対し、初期に構築したインフラでは、柔軟性・拡張性・運用効率の面で徐々に限界が見え始めていました。 さらに、弊社自身もグロース期に差し掛かり、将来的なスケーラビリ
zenn.dev/team_soda
こんにちは! 最近Zennで本を出版しました! 🚀🚀🚀 アニメーションを始めとした、ユーザー体験をこだわりたいと思って書いた本です! ただ、ごめんなさい、有料にしちゃってるので、まずこの記事読んでもらって面白いと思ったら、ぜひ本を購入を検討してくれると嬉しいです! では本編です!! はじめに。 素晴らしい見た目のアプリでも、アニメーションがダサいと急にアプリのクオリティが低く見えてしまいます。 アニメーションは「なんかカッコイイ」を表現するだけではなく、ユーザーにとっての使いやすさにも影響してきます。 この記事では、 アニメーションをどんな時に使うのか アニメーションの種類と使い所 について深掘りしていきます。 アニメーションはぱらぱら漫画 アニメーションとは、実は一枚絵が高速で動いているだけなのです。 いわゆるパラパラ漫画のような原理です。 Flutterでアニメーションする仕組み
zenn.dev/apstndb
私は「Spanner でも他の RDBMS で当たり前に行われているのと同程度には実行計画を理解する」ことをテーマに情報の公開や社内での啓蒙・トラブルシューティングなどの活動を行ってきました。 Cloud Spanner as a SQL System Cloud Spanner の実行計画の活用に関する取り組み Cloud Spanner Unofficial Hacks 私見として、 2017年の Spanner のリリースから8年経った今も実行計画の最適化についての世の中の情報は多くありません。 実行方法が自明ではない SQL をどう現実的に実行可能な程度に最適化するかというような話はまだあまり増えていないと感じています。 この文書は私が株式会社メルペイを退職する前から社外に公開するという約束で書いていたものですが、一年半以上放置してこのまま墓場まで持っていくことになる可能性が出てき
zenn.dev/mkj
1. はじめに はじめまして、株式会社松尾研究所にてインターンをしております、yutohubと申します。 松尾研究所で開催されたAIハッカソンで発表した「論文調査くん」というツールについて、実際にデプロイを行い社内で公開しました。この経緯や、AIワークフローの実際の導入事例と活用方法という観点からまとめたいと考えています。 「論文調査くん」は、経験豊富なデータサイエンティストが行う論文調査や技術調査をツール化することで、経験の浅いインターンでも同等の調査が行えるようにすることを目的として開発されました。当時は「deep research」という概念は存在しませんでしたが、特定の情報源に絞った調査が可能である点や、カスタマイズ性に優れている点が特徴です。 2. シンプルなAIワークフローで解決 まずは背景知識として、AIワークフローとAIエージェントの違いについて簡単に触れておきます。 「B
zenn.dev/kameoncloud
このシリーズ記事ではREST API を設計するときの指針をまとめていきます。記念すべき第一回目は認証・認可編です。認証と認可 まずはよく概念がごちゃごちゃになってしまう認証と認可の違いについてから。この2つの違いはとても簡単です。ただクラウドを使った場合色んな機能が抽象化され一回のリクエストで同時にその2つが処理されるケースもあるため変わりづらいケースもあります。 認証:リクエスタ(APIを呼び出す側)が誰であるか?APIを呼び出す権限を有しているのか?を判断します。 認可:認証通過後、つまりAPIを呼び出せるリクエスタであると判断された後、どういう操作を許可するか?を定義します。例えば管理者はすべてのデータ操作が可能ですが、一般的な閲覧者は書き込みは許可されず、読み込みのみが許可されます。複数ユーザーが存在しているサイトであれば、リクエスタは自分の権限範囲においてのみデータ読み書きが許
過去2回の記事でREST API 設計指針をまとめてきました。 REST API 設計指針・認証認可編 REST API 設計指針・通信、パラメーター編 今日は第三回かつ最終回のセキュリティ編です。セキュリティは非常に幅広い概念であり、考慮すべきことは山盛りですが、まずは基本的な考え方から。 加害者と被害者の逆転現象 悪意のある第三者からの攻撃などにより何某かのインシデントが発生して、サービスが停止したり、情報漏洩が起きてしまった場合、サービス事業者はステークホルダーにお詫び、時には直接的な金額による賠償を行うことになります。本来システムを攻撃された被害者側ですが、加害者であるかのような扱いをされるケースがあります。一方インシデントの種別によっては世の中が同情的になるケースもあります。この違いについてですが、一般的によく用いられる対策をとっていたかどうかが大きな分岐点となります。 攻撃され
はじめに 業務で携わっているサービスで無限スクロールを実装しました。 無限スクロールはライブラリを使って実装している記事が多いですが、今回はライブラリを使わずに実装してみました。 IntersectionObserverやscrollイベントなどで知らないことが多かったので自身の脳内整理のために書いていこうと思います。 使用した技術 React TypeScript Apollo Client: GraphQLクエリの実行 IntersectionObserver API: スクロールの検出 カスタムUIコンポーネント: Atomic Designに基づいたコンポーネント IntersectionObserverとは IntersectionObserverやスクロールそのものについての知識がなかったので調べてみました。 IntersectionObserverは、ページ上の特定の要素が別
こんにちは。松尾研究所で広報を担当している白石です。 松尾研究所では各ポジションで積極採用中ですが、「松尾研の名前は良く聞くけれど、採用もしていたんですね!?」と言っていただくことも多く(伸びしろ!)、採用チームと現場メンバーが一丸となって様々な施策を打ちながら、組織づくりに取り組んでいます。 こうした二人三脚の取り組みが実を結び、毎月新しいメンバーがジョインし、活動が急拡大しています。 ▼参考:三度の飯よりデータサイエンス!な人に会うために、松尾研究所のデータサイエンティストたちで今年取り組んだこと(2024年12月記事) 今回はこうした取り組みの一つである、松尾研meetupのイベントを取り上げます。 松尾研メンバーのバッググラウンドの多様性を活かし、コンサル経験者向け・製造業経験者向けのイベントを開催しました。本記事ではコンサル経験者向けイベントでご紹介した内容の一部をお届けし、当日
zenn.dev/chips0711
はじめに:この記事について この記事はModel Context Protocol (MCP)という、2024年11月にAnthropicが発表した新しいAIエージェント接続プロトコルについて、その基本概念から実践的な活用方法まで包括的に解説します。特にMicrosoftのAzure AI Foundryとの連携を中心に、具体的なハンズオン手順を通じてMCPの可能性と実用性を探ります。 また、本記事は2部構成となっております。 Part2は以下です。 この記事で学べること MCPの基本概念とアーキテクチャを理解できる クラウドとローカル環境の両方でMCPを実装する方法を学べる Azure AI Foundryとの連携手順を通じて実践的なスキルを身につけられる エンタープライズ環境でのMCP活用におけるセキュリティ考察を理解できる MCP登場から約4ヶ月の2025年3月現在、MCPは急速に業
注意: この記事内にある Model Context Protocol の C# SDK のサイトからコピーしてきたコードは、単一の接続しか受け入れられないように実装されています。複数のクライアントからの接続があった場合は後に接続したもののみ動作する実装になっています。 リポジトリ側のコードも、記事を書いてから数日のうちに更新されていて以下の Pull Request で、ちゃんと接続を管理するようになっているコードが追加されています。ModelContextProtocol.AspNetCore NuGet パッケージを追加して MapMcp メソッドを呼び出すことでちゃんと接続を管理する機能のついた /sse と /message のエンドポイントが追加されるようになります。 Add ModelContextProtocol.AspNetCore #160 本文 ここ最近、色々なところ
zenn.dev/knowledgesense
導入 こんにちは、株式会社ナレッジセンスの須藤英寿です。 今回は、AIエージェントが陥る考えすぎ(過剰推論)を防いで、精度を向上させる手法ReaRAGについて紹介します。 サマリー 2025年はAIエージェント元年と呼ばれるように、Web検索やコード生成の分野でAIエージェントの活躍の舞台は広がっています。しかし、AIエージェントの抱える問題の一つ「過剰推論」によって回答にたどり着けなくなる問題があります。ReaRAGはこの「過剰推論」をファインチューニングで防ぐことに成功しています。 ポイントは、ツール(Web検索など)そのものと少ない手数で回答にたどり着くパターンを学習するという点です。ツールの使用方法を学習することは多いですが、利用するツールそのものとそのツールを少ない手数で利用する様子も学習に含めることで、ツール利用の精度が大幅に向上します。 エージェントの過剰推論問題 過剰推論に
zenn.dev/saldra
はじめに エイプリルフールネタとして、「蒼月ハヤテ」という歌声合成音声ツール用の素材キャラクターを作りました。 その際に配布サイトも自作したのですが、折角キャラクターと歌声生成用の自分の声データがあったので、それらを組み合わせて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」という合成音声用の素材配布
zenn.dev/nakasyou
今日で中学生を名乗れるのが最後なので、名乗りたいと思います。 LLM を活用したサービスを使ったり作ったりするとき、どの LLM を使うか迷ったことはありませんか? 選定するには、各モデルの比較が必要です。その比較をするプラットフォームを作成したので、紹介します。 LLM の情報収集、大変じゃない? コンテキストウィンドウや速度など、各 LLM の特徴を示すもの、いくつ思い浮かびますか? 公開日、料金、ベンチマークでわかる性能、最大出力長、マルチモーダルかどうか、Reasoning できるかどうか... など、大量にありますよね。それらを総合的に比較してモデルを選んでいくわけですが、そもそもそれらの情報収集が大変です。 例えば、Gemini 2.0 Flash と Command A を比較したいとします。そのための情報源をまとめました: title Gemini 2.0 Flash Co
次のページ
このページを最初にブックマークしてみませんか?
『Zenn|エンジニアのための情報共有コミュニティ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く