こんにちは！株式会社ZENSHINです。 この度、ZENSHINのホームページを Astro で構築し直しました。 今回は、なぜ数あるフレームワークの中からAstroを選んだのか、その選定の経緯と実際に使ってみた感想をエンジニア視点でお届けします。 なぜ Astro を選んだのか以前からAstroの存在は知っていましたが、改めてホームページに必要な要件を整理したところ、Astroが提供する機能がまさに「過不足なく」揃っていることが決め手となりました。 主な採用理由： SEO対応が標準で強力： サイトマップ生成、メタタグ管理、構造化データなどの仕組みが揃っている Cloudflare Pagesとの親和性： デプロイが非常にスムーズ コンテンツ管理の容易さ： マークダウンで管理する仕組みが組み込まれている シンプルな要件に最適： ログイン機能のような複雑な状態管理が必要なかった サーバー処理

2026/04/16 に「技育CAMPアカデミア」で話したスライドです。2025 年のはてなインターンの講義資料 (https://speakerdeck.com/hatena/internship-2025-frontend) に手を加えたものになってます。 https://talent.sup…

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

社内のチームメンバー(クラウド事業本部コンサルティング部)向けに 「 Claude Code Skills (Agent Skills) 勉強会 」を開催しました。 DevelopersIO向けに調整したスライドを掲載します。 スライドの内容:テキスト情報を以降に記載します。参考になれば幸いです。 勉強会の目的 勉強会の背景やゴール、アジェンダを連携します。 背景 Skills がアツいです🔥 Claude Code (AIエージェント)の動きを 自分好みにカスタマイズ できる拡張機能 手軽に作れて、手軽に共有できます この勉強会のゴール 参加者全員が Skills をセットアップ して、基本的な使い方を理解する 普段の業務での活用方法を参加者全員で探索 する 参加者の知見やアウトプットを引き出す 期待する成果 この時間: Skills のセットアップ完了 + 基本的な使い方の理解 今後

Today we're introducing Code Review, which dispatches a team of agents on every PR to catch the bugs that skims miss, built for depth, not speed. It's the system we run on nearly every PR at Anthropic. Now in research preview for Team and Enterprise. Managing the review bottleneckCode output per Anthropic engineer has grown 200% in the last year. Code review has become a bottleneck, and we hear th

はじめに こんにちは。GMO Flatt Securityのセキュリティエンジニアの松井（@ryotaromosao）とチョン（Eui Chul Chung）です。 皆さんは、「署名付きURLにおけるパストラバーサル」の脆弱性をご存知でしょうか？ Webアプリケーションで署名付きURLを実装する際、AWS公式のSDKを用いることが多いかと思います。過去にはその公式SDK自体にパストラバーサルの脆弱性が見つかった事例がありました。また一方で、公式SDK側では正しい対策がされているものの、アプリケーション開発者の実装ミスによってパストラバーサルが引き起こされてしまうケースも存在します。 本記事では、実際にAWS SDKで見つかった脆弱性の事例を交えながら、コードベースで署名付きURLにおけるパストラバーサルの脆弱性を深掘りしていきたいと思います。また、後半では、SDKを利用するアプリケーション

GitHub Copilot のエージェントモードで複数タスクを並列に進めたい。でも、セッションの切り替えが面倒だったり、今どのタスクが何の状態なのか把握しづらかったりして、結局１つずつ片付けていた。 2026年1月の VS Code アップデート (v1.109) で追加されたエージェントセッション管理UIが、この問題をかなり解決してくれた。この記事では、実際の利用画面とともにこの機能について紹介する。 参考：VS Code v1.109 Release Notes - Agent Session Management 目次 何が変わったのか：エージェントセッション管理UIの全貌 並列タスクの実践ワークフロー 並列開発をうまく回すコツ 現時点での制約：マルチルートワークスペース VS Code + GitHub Copilot で並列開発は十分できる まとめ 1. 何が変わったのか：エー

はじめに 「Skillを自作したいけど、毎回ゼロからSKILL.mdを設計して詰む」 Claude Codeを使っている方なら、一度はこの壁にぶつかったことがあるのではないでしょうか。 Anthropicが公開している skill-creator は、まさにこの問題を解決するための「Skillsを作れるSkills」です。自然言語で対話しながら、Claudeが自動でSkillのフォルダ構成・SKILL.mdファイル・必要なスクリプトを生成してくれます。 この記事では、skill-creatorの導入から実際の使い方、そして活用時の注意点までを体系的に解説します。 この記事で解決できる課題 SKILL.mdの書き方がわからない Skillのディレクトリ構成で毎回迷う 作ったSkillがバリデーションエラーで動かない Progressive Disclosure（段階的開示）の設計原則が理解で

はじめに この記事では、現場でよく見る「読みにくいExcelやCSVの表」がなぜ広く定着したのかを、業務慣行、組織文化、評価軸の観点から整理します。 最初に、論点を次の2層に分けて扱います。 技術的・構造的な層: 読みにくいCSVは、どこがデータ構造として壊れているのか 文化的・運用的な層: なぜExcel中心の運用が続き、壊れた構造が再生産されるのか CSVは本来データ交換形式であり、人間が直接読む前提の形式ではありません。 問題はCSVそのものより、CSVを人間に読ませる運用と、帳票都合をデータ構造に持ち込む運用です。 あわせて、列を圧縮して見栄えを優先してしまう理由と、そこから抜けるための実務的な改善策を扱います。 以下のようなCSVは、公的データや実務データでも実際に見かけます。 見た目はそれらしくても、分析や連携の段階で扱いづらくなるのが問題です。 この記事でいう「ダメなCSV」

はじめに 業務でWebサイトリニューアルをやっています。 テキスト量の多い静的ページを、Figmaデザインからモック（HTML/CSS）→ Laravel組み込み（3言語対応）まで実装する作業がありました。 最初は手作業で1ページ8時間かかっていました。 Figma MCP + Claude Codeを導入したら、1ページ20分になりました。 この記事はその経験の所感です。 前提：必要なもの この方法を実現するには以下が必要です： Figma 有料プラン（Dev Modeが使えるプラン） Figma MCP は Dev Mode 経由でデザインデータにアクセスするため、開発者モードが有効なプランが必須 Figma側でAuto Layoutがきちんと活用されていること Figma MCPが返すレイアウト情報（gap, padding, flex direction等）はAuto Layout

「AIに指示を出す側」のつもりが、自分がボトルネックだった Claude Codeを使い始めて半年、自分は「AIを使いこなしている側」だと思っていました。プロンプトを書いて、コードを生成させて、レビューして、マージする。効率は確かに上がっていた。 でも、ある日気づいたんです。毎回同じレビュー指摘を口頭で伝えている自分がいることに。AIに「レビューして」と頼んでも、観点がブレる。テストを書かせても、戦略がない。結局、自分がすべての判断を下していて、AIは「ちょっと賢いコード生成機」止まりだった。 そこで試したのが、Agent TeamsとSkillsを組み合わせた運用です。1週間実務に投入した結論から言うと、変わったのはツールじゃなくて、自分の仕事の定義でした。 Agent Teamsとは？ Agent Teamsは、複数のClaude Codeインスタンスが1つのチームとして協調動作する仕

ちゃんと人間が書いています。 Claude Codeをこれから使い始める初学者の方から、 すでに使っているけれど もっと活用したい上級者の方まで、 幅広く対象にしています。 2026/02/18時点のAnthropic公式のベストプラクティスと、私の開発の知見を元にまとめています。 上から順に読んでいけば、誰でもプロになれるように書きました。

筆者の実体験をもとに Claude Code を活用して整理しました。公式ドキュメントと挙動が異なる場合は公式を優先してください。 2026-02-11 更新: @karaage0703 さんに教えていただき、Claude Code v2.1.3 で Slash Commands が Skills に統合された件を反映しました。YAML frontmatter のフィールド一覧も公式ドキュメント準拠に更新しています。 Claude Code の拡張機能（Slash Commands, Skills, Agents, Plugins）の違いがわかりにくかったので、実際に触りながら整理したメモです。 拡張機能の全体像 Plugin（配布パッケージ） ├── Skills（コマンドの上位互換） ├── Agents（カスタムエージェント） ├── Hooks（ライフサイクルフック） └── MC

「Claude Code」は、CLI上で動くLLMによるAIエージェントツールです。本連載は12月5日に発売された『Claude CodeによるAI駆動開発入門』に書ききれなかった応用的な内容や最新のアップデートについて解説します。書籍をあわせて読むとさらに理解が深まることでしょう。 今回は知っているようで知らない、Claude Codeの「CLAUDE.md」について深掘っていきます。 CLAUDE.mdとは記憶である 前提としてClaude Codeは、立ち上げた際、つまりセッション間で、そのコードベースやユーザーとの過去のやり取りを基本的に覚えていません。しかしセッションを立ち上げるたびに、膨大なコードベースを毎回走査して理解していくのも現実的ではありません。 そのため、コードやルールなどを理解する起点として存在しているのがCLAUDE.mdです。 これはエンジニアにとってのREAD

結論 「テストして」って言っただけなのに、AIが自分でバグ見つけて、自分で直して、「違反は切腹」ってルールを自分で追加してきた。 人間、何もしてない。 何を作ったか Claude Code × tmux でホワイトカラー向けマルチタスクツールを作った。 名前は multi-agent-shogun。 戦国時代の軍制をモチーフに、将軍1名・家老1名・足軽8名の階層構造でAIエージェントを統制する。 上様（人間） ↓ 「やれ」 将軍（Claude Code） ↓ 「家老、タスクを分解せよ」 家老（Claude Code） ↓ 「足軽ども、並列で実行せよ」 ┌──┬──┬──┬──┬──┬──┬──┬──┐ │1 │2 │3 │4 │5 │6 │7 │8 │ ← 8人同時に動く └──┴──┴──┴──┴──┴──┴──┴──┘ 足軽（Claude Code × 8） とにかくshogunにぶち

自分が読む用にMarpでまとめたものを、読後に調整して公開しました。

概要 まるで新入社員に業務マニュアルを渡す感覚で、Claude Codeに「このルールで動作して」「この作業は専用のツールや手順に任せて」といった指示を与えられます。プログラミング経験がなくても、用意された設定ファイルを適用するだけで、実務に耐える開発環境を簡単に整えられる便利なテンプレート集です。 このプロジェクトは、Anthropic社のCLIツール「Claude Code」を最大限活用するための設定ファイル集です。 プロジェクト構成 everything-claude-code/ ├── agents/ # 専門エージェント定義 ├── commands/ # スラッシュコマンド ├── contexts/ # コンテキスト切り替え設定 ├── examples/ # 設定ファイルのサンプル ├── hooks/ # イベントトリガー自動化 ├── mcp-configs/ # MC

はじめに Claude Codeを触り始めると、「Skills」「Custom Commands」「Hooks」「サブエージェント」「MCP Servers」...と、似たような機能がいくつも出てきて混乱しませんか？ それらを使わなくても開発効率は使っていない時よりもかなり上がっているので、私は自腹で月300ドル払っていましたが、半年ほどあまり活用していませんでした。しかし活用したところかなり便利だったので一度まとめてみます。 この記事では、各機能の使い方だけでなく、「なぜその機能が存在するのか」「どういう問題を解決するのか」という思想から説明していきます。思想を理解すれば、新しい場面に遭遇しても自分で判断できるようになりますし、「この機能、こういう使い方もできるんじゃないか」というアイデアも浮かびやすくなるのかなと思います。 Claude Codeの考え方を理解する なぜこんなに多くの拡

2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ