はてなブックマーク

【検証】 AIへの「アクセシビリティ指示」で デザインシステムの 実装品質はどう変わるか こんにちは。虎の穴ラボ株式会社のKTです。 最近はClaude Codeを使って個人的に欲しいなと思うWEBアプリを細々と開発しています。 開発しているとき、画面にデザインを適用すると一段とモチベーションが上がりませんか？（私は上がります💪） 私自身はデザインの素養はないのですが、Claude Codeの公式プラグイン「frontend-design」や自作のSkillsを使って試行錯誤しながらデザインを適用しています。 手探りでデザインシステムを作る中でふと思ったのが 「トレンドのデザインとアクセシビリティの両方を考慮したスタイルが一気に適用できたらいいのに」ということでした。 アクセシビリティをどう言語化したら良いのか、どのように指示すればデザインと両立できるのか、コツを掴みたいと思ったのです。

「Linuxカーネル2.6解読室」（以降、旧版）出版後、Linuxには多くの機能が追加され、エンタープライズ領域をはじめとする様々な場所で使われるようになりました。 それに伴いコードが肥大かつ複雑化し、多くのエンジニアにとって解読不能なブラックボックスとなっています。 世界中のトップエンジニア達の傑作であるLinuxカーネルにメスを入れ、ブラックボックスをこじ開けて、時に好奇心の赴くままにカーネルの世界を解読する「新Linuxカーネル解読室」プロジェクト。 本稿では、Netlinkについてカーネルv6.14のコードをベースに解説します。 はじめに Netlinkとは 通信モデル メッセージフォーマット アドレスフォーマット カーネル内部 カーネル内のNetlink主要データ構造等 netlink_table netlink_sock 初期化 rtnetlink Do (ip route a

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Preview 機能を使用する まずは Claude Code のデスクトップアプリをインストールしましょう。Claude Code のドキュメント からお使いの OS に対応したインストーラーをダウンロードして、インストールを完了

こんにちは、ホワイトプラスでエンジニアリングマネージャーをしている仲見川です。 今回は、Claude Codeのスキルをチーム別に管理・配布する仕組みを構築した話を紹介します。 Claude Codeのスキルとは スキルは、Claude Codeの能力を拡張する仕組みです。SKILL.md ファイルに指示を記述すると、Claudeがそれを自身のツールキットに追加します。Claudeは会話の内容に応じてスキルを自動的に利用するほか、/skill-name で直接呼び出すこともできます。 たとえば「DDD構成要素の実装規約」「テストコードのパターン」といったプロジェクト固有のルールをスキルとして定義しておくと、Claude Codeがコード実装時に自動でそのルールに従って動作してくれます。 スキルは .claude/skills/ 配下にディレクトリを作り、その中にエントリーポイントとなる S

Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。 Figma MCP サーバー に新しいツールがリリースされ、ブラウザ上の UI からコードを Figma デザインに変換できるようになりました。これにより、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。この記事では実際のコードから Figma デザインを生成する方法を試してみます。 Figma MC

こんにちは、ペパボで技術部部長をしているkenchanです。「閃光のハサウェイ」3作目が公開されるまで健康でいるために、運動を再開しました。 この記事では、ペパボ技術部の2026年方針「Agent Ready」について紹介します。私たちがこの方針に至った背景と、具体的に何をやろうとしているのかをお伝えできればと思います。 技術部は、GMOペパボの全事業部門にわたるインフラ・データ基盤・情報システム（コーポレートエンジニアリング）の3つを横断的に担う部門です。ロリポップ！やムームードメインといったホスティングサービス、カラーミーショップ・minne・SUZURIなどのEC・ハンドメイドプラットフォームのインフラ運用から、全社のデータ基盤の整備、社内ITの整備・運用まで、各事業部がプロダクト開発に集中できるよう技術的な土台を支えています。 はじめに: なぜ今、私たちは「前提」を書き換えるのか

こんにちは！プロダクトエンジニアのkazzhiraです。 私たちのチームでは、2025年の夏ごろから「AI活用による開発生産性の向上」に取り組んできました。しかし、当初の取り組みは抽象的なガードレールの提示や個々人の実践にとどまり、チームとして大きな成果には結びつきませんでした。 その後、SDD（仕様駆動開発）というアプローチに出会い、オープンソースの cc-sdd フレームワークをベースに試行錯誤を重ねてきました。 本記事では、AI開発標準の策定に失敗した経験から何を学び、どのように仕様駆動開発に辿り着いたのか、そして、実践を通じて得た成果と学びをご紹介します。 チームのAI導入でうまくいかなかった話 AI活用の個人最適化 当初、チームでは Cursor、Claude Code、Devin、GitHub Copilot、Gemini などの AI ツールを個々人の判断で利用できる状態でし

目次 目次 はじめに この記事の対象読者 背景・課題 背景 課題 AI駆動開発ワークフローの概要 AIサービスごとの役割 Devin Playbook ユーザー起動のPlaybook（Slack → Devin） !ai_task（単一タスク実装） !ai_tasks（タスク分割＆並列実装） !human_review（人間承認フロー） 人間レビューが必要なケース ワークフロー自動呼び出しのPlaybook !fix_ci_failure（CI失敗時の自動修正） !fix_review_comments（レビュー指摘の自動修正） !context_curation（AIコンテキストの週次更新） 使用技術 機能一覧 アーキテクチャ SlackからPR承認までの完全フロー 2つのワークフローの役割 フロー別の使い分け 実装 設定ファイル AI Task Implementation：Issue

はじめに こんにちは、検索基盤部の朝原です。ZOZOTOWNの検索改善を担当しています。 日々の分析業務では、ユーザーの行動ログを集計するSQLクエリを頻繁に作成します。クエリ作成には定型的なパターンも多く、作業時間を短縮する手段として生成AIの活用を検討しました。しかし、社内固有のログ構造や前提条件が多く、生成AIを利用しても期待どおりにクエリを作成できないという課題がありました。 本記事では、Claude CodeのSkills機能やサブエージェント機能を活用してこの課題を解決した方法を紹介します。 目次 はじめに 目次 なぜ生成AIでログ分析のSQLを書くのが難しいのか 1. 社内固有のログ構造を参照できない 2. チームのSQL規約に準拠した出力が担保できない 3. 暗黙的に共有されているナレッジを生成AIが持っていない 解決策の全体像 技術的アプローチ 1. Claude Cod

こんにちは、クラウドサインで CRE（Customer Reliability Engineer）をしている藤谷です。 過去の記事では、Slack ワークフローに AI を組み込んで問い合わせの課題整理を自動化した事例を紹介しました。あの時点では、AI は問い合わせフローの「一部」を支援するものでした。 その後 CRE チームでは MCP（Model Context Protocol）を使った自動化基盤を構築しました。しかし MCP だけでは「どう使うか」までチームに共有できず、活用が広がらないという壁にぶつかりました。この課題を解決するため、CRE チームでは Agent Skills（AI エージェントに手順・知識・スクリプトを配布できる仕組み）へ全面移行しています。 スキル移行によって、 AI の支援は「一部」から「全工程」へ広がりました。調査・回答案の作成・レビューまでが AI エ

こんにちは！開発組織のエンゲージメント向上をミッションとしている Developer Engagement Group (以下、DEG) の滝口(@ytakiguche)です。普段は「ぐるなびウエディング」の開発を担当するかたわら、開発組織全体の働きやすさ向上に取り組んでいます。 DEG に関しては以下の記事もぜひご覧ください。 ぐるなびの開発部門をアップデートする分科会活動｜DEG編 開発組織において、ナレッジ共有を「仕組み」として定着させるのは、想像以上に骨が折れる仕事です。「勉強会を立ち上げたはいいものの、次第にネタが枯渇する」「参加者が固定化して形骸化する」「結局、目の前の案件が忙しくて後回しになる」……。そんな理想と現実のギャップに直面したことがある方は多いのではないでしょうか。 私たちの組織では、毎週金曜日に「ナレッジ共有会」を開催しており、足掛け3年ほどこの習慣を継続していま

お久しぶりです。基盤本部/プラットフォーム部/hacomono・共通基盤グループのまこたすです。 はじめに バッチという言葉はまとめて処理することを表すと思うのですが、バッチシステムという観点だとCronのような時間で発火する仕組みだったり、非同期で別プロセスのワーカーに依頼してまとめて処理させたりする仕組みだったりと様々あると思います。もちろん弊社のhacomonoというプロダクトにおいてもバッチ処理は存在し、毎日稼働しています。最近これらのバッチ処理においてやや扱いが大変な場面も増えてきました。今回は弊社のバッチシステムの紹介とバッチという仕組みがよく起こす課題と、その対応について考えます。 本記事の想定対象読者 アプリケーションコード側でバッチとして動かすシステムに興味関心がある人 バッチとして稼働させるためのインフラに興味関心がある人 hacomonoのバッチシステムについて 弊社

PLEXJOB開発チームの awageki です。 今回の記事は「当たり前を当たり前に説明する」シリーズの第二弾です！ 第一弾の記事に「続くかどうかは後続のエンジニア次第です（笑）」と書かれていますが、もちろん続けます。 第二弾では、Rails のアソシエーションにおける「更新処理のタイミング」について、その仕様を深掘りしたいと思います！主に has_many :through を例に説明しますが、他の関連付けについても触れていきます。 第一弾の記事はこちら。 product.plex.co.jp collection=(objects) の保存タイミング 永続化済みレコードと新規レコードの違い collection=(objects) 使用時の注意点 即時保存されるかどうかの判定方法 他のアソシエーションではどうか 最後に collection=(objects) の保存タイミング 以下

kichijojipm.connpass.com 今年も設計ナイトを開催します タイムテーブルは現時点で以下の通りです 18:30〜19:00 開場 19:00〜19:10 オープニング 19:10〜19:30 nwiizo「アーキテクチャモダナイゼーションとは何か-技術・事業・組織で大事なこと」 19:30〜19:50 moznion 19:50〜20:00 休憩 20:00〜20:20 soudai1025「制約を設計する - 非決定性との境界線」 20:20〜20:30 ナカミチ「感情を設計する」 20:30〜20:40 polidog 20:40〜20:50 LT 2本(公募) 20:50〜21:00 クロージング 「設計ナイト」、その名の通り、「設計」に関することを喋る会、という建て付けですが、毎回色々な視点での「設計」の話が聞ける、ということで好評いただいています。 昨年の「設

Intro コロナ禍が明け、カンファレンス文化も再開し、コロナ前かそれ以上の頻度で多くのカンファレンスが企画されるようになりました。 しかし、コロナ中の断絶によってノウハウの継承が途絶えた部分もあり、後発のイベントが既知の失敗を重ねている場面も見られます。 そこで、カンファレンス主催者の有志が集まり、それぞれのノウハウを持ち寄ってまとめた「カンファレンス開催ノウハウ」を作成しました。 📔 カンファレンス開催ノウハウ - Google ドキュメント 複数人で書いたため、この公開は同時に複数の有志によりブログなどで告知されます。 カンファレンス開催の勃興 特に Web フロントエンド界隈では、「フロントエンドカンファレンス」が各地域で同時多発的に発生したりと、新しいカンファレンスも増えています。中には、初めてカンファレンスを主催する主催者も多く、手探りで始めることも増えました。 コロナ前は、

はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。2月9日（月）～2月15日（日）〔2026年2月第3週〕のトップ30です*1。 順位 タイトル 1位 0から分かる Claude Code 完全ガイド 2位 「太る原因は、油か？ 砂糖か？」の生物学｜東大名誉教授の生物学講義 3位 リーダー経験から逃げ続けた人が、30代以降で直面する残酷な現実【無気力なリーダー論 #8】｜無気力なPM 4位 また病院がVPN経由でやられたわけだがVPNは悪だね｜ロードバランスすだちくん（仮） 5位 【都道府県別】特殊な住所・住居表示 - estie inside blog 6位 「憲法九条は日本を守っている」と言えるのはなぜか - 達而録 7位 太田光、高市首相への“責任”質問が賛否両論に「世間がオレを嫌うのもわかる」 ラジオで改めて真意を明かす | オリコンニュ

はじめに ROXXプロダクト開発部でエンジニアリングマネージャーをしている梅本です。 2025年に、Zキャリア AI面接官の技術的な裏側をまとめた記事を書きました。 techblog.roxx.co.jp 前回はシステム構成やリアルタイム対話、評価の自動化など、技術の話が中心でした。 今回は少し視点を変えて、サービスを作り続けるチームの話をします。 AIだからこそ生み出せる体験や価値がある——日々の開発の中で、そう感じる場面は少なくありません。ただ同時に、その不確実性をコントロールする難しさも感じています。ビジネスの変化が速い中ではなおさらです。 それでも、不確実性と向き合いながら手応えのある価値を届けられたとき、これまでにない体験を生み出せると感じています。選考体験はまさにそういう題材だと思っています。候補者にとっての「安心して話せる場」と、企業にとっての「運用できる品質」——この両立に

株式会社ヘンリーでソフトウェアエンジニアをしているwarabiです。 ヘンリーは医療業界向けのプロダクトを開発しており、開発メンバーにも難解なドメイン知識が求められます。そのため普段からドメインの理解や深堀りに時間をかけたいところですが、実際は開発業務も進めなければならないため、時間の使い方に悩んでいました。 この課題に向き合うために、普段開発で使っているClaude Code（Anthropic社が提供するCLIベースのAIコーディングアシスタント）をもっとうまく活用し、実装にかける時間を減らして学習に充てる時間を増やせないかと考えました。 それまでのClaudeCodeの使い方と課題 それまでの私のClaude Codeの使い方は、一言で表すとAIとのペアプロです。 AIによるコードの変更をリアルタイムに確認しながらその場で質問もできるため、設計やサービスの理解には役立ちます。 ただ、

はじめに こんにちは。Developer Engagementブロック（略称DevEngブロック）の@wirohaです。ZOZO TECH BLOGの運営や、開発者向けイベントの企画・運営などを担当しています。 TECH BLOGの運営において、レビューには一定の工数がかかるため、効率化を進めています。その一環として、Claude CodeのAgent Skills（以下、スキル）を用いたレビュー支援の仕組みを整備しました。Claude Code上で記事のレビューを依頼すると、定義したルールに基づくレビュー結果を得られます。 以下は、スキルによるレビュー結果の抜粋です。 本記事では、このスキルを用いたTECH BLOGレビューの取り組みについて紹介します。 目次 はじめに 目次 背景・課題 解決の方針 スキルの設計 SKILL.md rules.md スキルの使用方法 実行例 導入効果 運

はじめに こんにちは、ZOZOTOWN開発2部Androidブロックの大江です。普段はZOZOTOWN Androidの開発を担当しています。 UIのリグレッション防止を目的として、2024年からVisual Regression Testing（VRT）の導入に取り組んできました。その第1弾として共通UIコンポーネントのモジュールに対してJetpack ComposeのPreviewを使ったVRTを運用しています。 本記事では、VRT導入について、VRTをCI/CDツール上で実行するための工夫を中心に紹介します。 目次 はじめに 目次 ZOZOTOWN Androidの課題 VRTとは VRTの冗長な処理を防ぐための工夫 画像生成 画像比較 結果出力 まとめ ZOZOTOWN Androidの課題 ZOZOTOWN Androidは画面の数が多く、長年の開発によってモジュールの依存関係や