本記事は、Claude Code + さくらのAI EngineではじめるAgentic Codingを加筆修正したものです。 いまやAIは仕事に欠かせない存在になりました。数あるAIサービスの中でもプログラミングにおい […]

AIと一緒に仕様書を書く ども！最近AIを使った仕様書作りの検証とかに取り組みだした龍ちゃんです。 「AIと人間の両方で仕様書を効率的に管理するため」にはという課題に取り組んでいた時の内容です。 今回はAIツールを開発に使ってるチームで、仕様書をGitで管理してる人向けの話です。 この記事で話すこと: なぜ仕様書の図はAIに伝わりにくいのか 図解にソースコードを添える設計パターン（3パターン） 実際に試して分かった制約と注意点 まず完成形のイメージを見せます。 <!-- この図のソースコード（AI向

Mermaidの見た目、もうちょっとなんとかならんか ども！Mermaidで図を作るたびに「構造は最高なんだけど、見た目がなぁ…」と思ってた龍ちゃんです。 「 Claude CodeでMermaid図を作成する 」でMermaid図の自動生成について書きました。Mermaidはコードで構造を書けるから、フローチャートやシーケンス図がサクッと作れます。AIに「こういう図作って」って言えば一発で出てくるんですよね。 ただ、デフォルトのデザインがシンプルすぎるんですよね。設計書やブログに貼るにはちょっと素朴。

テキストベースの図、もっと表現力が欲しい ども！ PlantUML × VS Codeの記事 を書いた龍ちゃんです。 Claude Codeを使って爆速でPlantUMLを書けるようになりました。でも！実際に設計書やブログに貼るとなると「もうちょっと見た目をなんとかしたい」ってなるんですよね。図の横に設計ポイントを添えたり、色を揃えて見やすくしたり。 そこで今回は、PlantUMLの図にTailwind CSSの装飾を組み合わせます。1つのHTMLファイルにPlantUML図 + 注釈パネルをまとめて、P

はじめに こんにちは！アプリ開発グループ iOSチームの服部です。 今回、アプリ開発グループでスナップショットテストを導入しました！ UIの見た目が意図せず変わっていないかを自動で検証できる「スナップショットテスト」。便利な仕組みですが、実際にチーム開発で運用するとなると、画像ファイルの管理やCIでの差分検知など、考えることが山積みです。 この記事では、ココナラiOSアプリで swift-snapshot-testing を導入し、本番運用に乗せるまでに行った工夫を紹介します! ⚠️: 本記事では、新規画

ウェブサイトのパフォーマンス問題はよくあることですが、根本原因の特定は困難な作業となります。この投稿では、 Server-Timing ヘッダー の潜在能力を引き出すことで、パフォーマンスに関するトラブルシューティングのプロセスをシンプルにする方法を学びます。 Server-Timing ヘッダーは、バックエンドのコンポーネントがユーザーリクエストへのレスポンスにおいて、タイミングメトリクスやパフォーマンスモニタリングに関するインサイトを伝達できるようにします。 ウェブサイトのアクセスでは、画像変換などの

この記事は、合併前の旧ブログに掲載していた記事（初出：2022年1月19日）を、現在のブログへ移管したものです。内容は初出時点のものです。こんにちは、LINE フロントエンド開発センターの玉田です。突...

こんにちは！SCSKの野口です。 前回の記事では、RAGの全体像（Indexing / Retrieval / Augmentation / Generation）と、「LLMの性能そのものより、前段の設計で品質が決まる」ことを整理しました。 （シリーズ1：RAGの基本情報 / 第1回）RAGとは：全体像、なぜ必要か、基本フローと設計の勘所 RAG（検索拡張生成）の定義、なぜ必要か、基本フロー（Indexing/検索/補強/生成）を整理します。 blog.usize-tech.com 2026.01.27

Figmaの手作業から脱却したい ども！最近は図解の自動化にハマっている龍ちゃんです。 技術ブログの図解、みんなどうしてますか？ 僕は以前、Figmaで人力で図を作ってたんですよね。アーキテクチャ図とかフロー図とか、1つ作るのに結構な時間がかかる。ブログの本数が増えるほど、だんだん図を作るのが億劫になってきて。 で、 SVG図解自動生成 、 HTML図解自動生成 と試行錯誤を重ねてきました。過去記事を読んでなくても今回の記事だけで完結するので、安心してください。 やっていることはシンプルで、Claude

ども！最近 Claude Code に設計レビューを頼んでみている龍ちゃんです。 Claude に「この設計レビューして」と投げると、一般論しか返ってこないんですよね。「スケーラビリティを考慮しましょう」とか「セキュリティに配慮してください」とか。いや、それはそうなんだけど、 見てほしい観点を伝えてないから AIも答えようがない。 「OWASP Top 10 を確認して」とか「このフレームワークの公式ドキュメントと照合して」とか、 具体的な観点を渡せば AI の出力が変わる 。でも毎回それをゼロから調べて

急成長を遂げるメガベンチャー企業の現場では、マイクロサービス化やインフラの複雑化に伴い、「サーバーは正常に稼働しているはずなのに、なぜかユーザーから『使えない』という報告が届く」といった課題に直面することが増えています。 従来の内部リソース（CPUやメモリなど）を対象とした監視だけでは、ネットワーク経路の不備やフロントエンドの描画トラブルといった「ユーザー側の体感品質」までを把握することは困難です。 そこで注目されているのが「シンセティックモニタリング（外形監視）」です。 そこで今回は疑似ユーザーを用いて

こんにちは、NRIネットコム新入社員・ツーシーム投げ代表の池部です。 高校時代から夢中になっていた微生物研究からWebへ転身し、現在はHTML/CSSのコーディングで奮闘中！ 今日も元気に社会人という名のマウンドに立っています。 さて、コーディングをするにあたり、 デザイン通りの見た目にならない 意図していない部分にスタイルが当たる など、もやもやした経験はありませんか？ 特に、私と同じように未経験でIT業界に飛び込んだ方は、このような壁にぶち当たることも多いのではないでしょうか？ 本記事では、未経験から

CLAUDE.md・AGENTS.mdを書いても効かない原因は設計にある。自然とドメイン注入ができる設計思想と、静的・オンデマンド・自律蓄積の3パターンを解説。 はじめに ども！いろんなところでAI関連の話をしている龍ちゃんです。 Claude Code、Cursor、GitHub Copilot…AI駆動開発ツールは急速に広がっています。でも、どのツールを使っても同じ課題にぶつかるんですよね。 「コーディング規約を無視したコードを生成する」 「過去のPR議論を踏まえない提案をしてくる」 「プロジェクト固

GitHub Copilot Agent Skillsとは何か、基本を解説。SKILL.mdの書き方、ディレクトリ構造、Claude Code互換性まで実用例付きで学べる入門ガイド。 はじめに ども！GitHub Copilotのブログを連日お届けしている龍ちゃんです。最近ブログを書きすぎて導入文のスタックがなくなってきちゃいました。 以前「 GitHub Copilot設定5種を網羅！生産性を最大化する使い分け術 」という記事を書きましたが、そこでは補足として軽めに紹介していた「 Agent Skill

Claude CodeのSkillsがCopilotで発火しない・読み込まれない原因は発火メカニズムの違い。description強化、トークン予算、Instructionsルーティングで解決。 はじめに ども！GitHub Copilotが徐々に育ってきて、ニコニコな龍ちゃんです。1月後半から2月にかけてGitHub Copilot関連のブログが多めに出ています。ブログが出ているということは育っている証拠ですね。 今回は、前回紹介していた Agent Skills の話題です。「 網羅5種ブログ 」と「