GoogleのModern Web Guidanceに学ぶ、モダンCSSのDos / Don'ts大全
Googleがリリースした「Modern Web Guidance」スキルを使うと、AIエージェントが最新のWeb機能でコードを書けるようになります。 https://zenn.dev/ubie_dev/articles/modern-web-guidance スキルが参照するガイドラインはMarkdownで書かれており、Googleが推奨するWeb開発のDos / Don'ts、つまり「やるべきこと・やってはいけないこと」がまとまっています。Googleお墨付きの、モダンなフロントエンド開発の知見が詰まっています。AIエージェントを使う・使わないにかかわらず、ウェブ技術の勉強に使った...
- CSS
- フロントエンド
- Web開発
GoogleのModern Web Guidanceスキル登場。AIが古いCSS・JSを書く問題を解決する
AIにフロントエンドのコードを書かせると、一昔前の書き方をされて困ることがよくあります。 私のAIの使い方が悪いというのは前提にありつつ、最新の書き方を選んでくれないことが何度もあります。たとえばCSSではSubgridを使ってほしい場面でわざわざ古いGridのネストを書いてくる。JavaScriptではObject.groupByで済むグループ化をreduceで書いてくる。さらに当たり前品質として押さえるべきアクセシビリティが漏れたり、最新のセキュリティ対策が抜けたコードを書いてくることもあります。これはサービスの品質低下に直結します。 5/19にGoogle公式がGoogle I/O...
- CSS
- JavaScript
- 生成AI
Slack上でインフラのトラブルシューティングができるAgentの設計と実装
はじめに Ubieでプラットフォームエンジニア兼SREをしているonoteruです。 今回は、Slackからメンションするだけでインフラの調査や問い合わせ対応を自律的にこなしてくれるBot「Infra Agent」について紹介します。本記事ではInfra Agentの仕組みに加えて、自律駆動するエージェントの挙動をネットワークレベルで安全に制御する1つのアプローチを紹介します。 背景 Ubieインフラの運用課題 Infra Agentを作った背景として、まずUbieのインフラ運用で日常的に発生していた課題について触れておきます。UbieのSREチームには、調査や問い合わせ対...
- Slack
- GCP
- セキュリティ
- エージェント
gh skillが登場。GitHub公式のスキル管理ツールにnpx skillsから乗り換えた
AIエージェント向けのスキル（Agent Skills）、みなさんはどう管理していますか？ 2026/04/16、GitHub公式CLIのghに、スキルをパッケージ管理する新しいサブコマンドgh skillが追加されました。GitHubのリポジトリに公開されているスキルをgh経由でインストール・アップデート・公開できます。私はこれまでnpx skillsでスキルをインストール・管理してきましたが、gh skillの方が安全面でよさそうなので乗り換えることにしました。 本記事では、メリットや実際の動作を紹介します。 https://github.blog/changelog/2026-04...
- GitHub
- AI
- CLI
AIに「やっちゃダメ」と言っても無駄だった──n8nにおけるハーネスエンジニアリング実践記
こんにちは。Ubie の syucream です。最近は組織開発とか生成AI社内活用とかやってます。 前回の記事では、Claude Code と n8n を使って「自然言語でワークフローを自動生成する」体験を紹介しました。 今回は、あの華やかなデモの裏側の話となります。AIに「ワークフロー作って」と頼めばシュッとできる。それは事実。でも、その AI が Slack に100回投稿したり、他のエージェントの作業を消し去ったり、本番のワークフローを壊してしまう──そういうことも普通に起きます。 これに対して自分がこの数ヶ月やっていたのは、振り返ってみるとまさに「ハーネスエンジニアリング」だっ...
- 生成AI
- n8n
- 自動化
セキュリティ分析AIエージェント実装にみるハーネスエンジニアリング
先日、zennの記事にて紹介したセキュリティアラートに関する分析を担うAIエージェント Warren のハーネスエンジニアリングについて社内で共有したところ、思いの外盛り上がったので記事にしてみました。一般的な生成AIエージェントの話だけでなくセキュリティ分析に特化した話も織り交ぜていますが、何かのご参考になれば幸いです。 今回対象となるWarrenは各サービス・監視装置から受け取ったアラートを分析するための生成AIエージェントになります 前提：ハーネスエンジニアリングとは 一般的な定義 ハーネスエンジニアリングという言葉は、2026年2月のMitchell Hashimoto...
- 生成AI
- AIエージェント
- セキュリティ
- BigQuery
- LLM
データプロダクトマネジメント始めました。SWEの原則でAI時代のデータ品質に向き合う
はじめに こんにちは、@glassmonekey です。Ubie 株式会社でソフトウェアエンジニア（SWE）をしています。 https://x.com/glassmonekey 最近、テックリードとしての活動に加えて、データプロダクトマネージャーという役割に踏み込み始めました。同じようにキャリアの方向性を考えているエンジニアの方に、参考になればと思って書きます。 AI時代にエンジニアが向き合うキャリアの問い みなさんは最近、AIがコードを書く時代に自分のエンジニアとしての価値はどこにあるのだろう、と考えたことはないでしょうか？ 私も例に漏れず、コードを書くこと自体が目的になってい...
- キャリア
- データマネジメント
- データ基盤
- プラットフォームエンジニアリング
Ubieにおける一年間のセキュリティ分析AIエージェントの運用
Ubie社内でセキュリティ分析に利用できる生成AIエージェントを開発・運用をはじめておよそ1年が経ちました。よい区切りではあるので、セキュリティ分析における生成AI利用について得られた知見などをまとめたいと思います。 前提：「セキュリティ分析」とは？ まず、セキュリティアラートとはEDR、WAF、クラウドセキュリティサービス、脆弱性スキャナーなどが発見したセキュリティ上問題になりそうな事象などの報告を指します。これは本当に影響のあるアラートもあれば誤検知も含まれます。組織のセキュリティ担当者はこれが本当に影響あるものなのかを調査して必要なら対応方針を考える、という一連の作業を「セキュ...
- 生成AI
- LLM
- セキュリティ
- SRE
NFCタグの使い方とWeb NFC API
NFC（Near Field Communication）タグを触る機会がありました。 NFCは数センチの距離で通信する近距離無線通信の規格です。NFCという技術自体はスマホ決済などで日常的に使われていると思いますが、自分でタグを書き込んで使ったことがある人は少ないのではないかと思います。この記事では、NFCタグの基本的な仕組みと使い方をまとめつつ、ウェブブラウザからNFCを直接読み書きできる Web NFC API のサンプルを紹介します。 シールタイプのNFCタグ (wikimedia) NFCタグの使いどころ 「かざすだけ」で何ができるのか、具体的な活用例をいくつか見ていきま...
- NFC
- JavaScript
- Android
- IoT
Claude Codeを加速させる私の推しスキル・ツール・設定（Findyイベント登壇資料）
本記事は、Findyイベント「鹿野さんに聞く！Claude Codeをさらに加速させる私の推しツール」の登壇資料です。 https://findy.connpass.com/event/384179/ Claude Codeの開発を加速させるための推しスキル・ツール・設定を紹介しています。 Claude Codeのためにターミナルを素早く起動したい Raycastショートカット + スニペットを使う Raycastとは、様々な機能を呼び出せるランチャーアプリ Alfredやspotlightみたいなもの Raycastを使い、hotkeyキー1発でアプリを起動できるようにする...
- Claude Code
- AI
- Raycast
- GitHub
- CLI
Claude Code Remote Controlが登場。ソファでも移動中でも、ローカルセッションをスマホから動かす
2026/03/06に全プランで解禁されました！ 旅行中にふと暇になった時間、子どもが寝静まるのを待っている時間、電車に乗っている時間。その隙間時間に、「ん゛あ゛あ゛あ゛あ゛！゛開゛発゛が゛し゛た゛く゛て゛た゛ま゛ら゛な゛い゛よ゛お゛お゛お゛！゛！゛！゛」と悶々とする時間がありませんか？ 私は、ありまぁす！ 本日登場したClaude CodeのRemote Control機能を使えば、ローカルのパソコンで動いているClaude Codeのセッションを、スマホから確認したり、追加指示を出したりできるようになります。 概要 Remote Controlは、ローカルPCで動いているCl...
- Claude
- 生成AI
"世界変わる"——非エンジニアでもできる、 Claude Code による n8n ワークフロー開発
こんにちは。 Ubie の syucream です。最近は組織開発とか生成AI社内活用とかやってます。 「業務を一番よく知っている人が、自分で自動化できる。」 この状態を、AI の力でどう実現するか。本記事では、 Ubie が Claude Code と n8n を用いたワークフロー開発効率化・民主化による業務効率化の実例を紹介します。 「一番無理な仕事かも」 社内の業務自動化ツール n8n について、あるメンバーがこうコメントしました。 n8n は、さまざまなサービスを「つなぐ」ことで業務を自動化する AI ワークフローシステムです。しかしそのワークフローを正しく組み上げるのは一...
- n8n
- Claude
- 生成AI
- GitHub Actions
クラウド型コーディングエージェントの時代がまた来る
Ubie CTO の @yukukotani です。 2025年は、Claude Codeのようなターミナル型やCursorのようなエディタ統合型など、ローカルで動作するコーディングエージェントが急速に普及した年でした。一方で、Devinのようなクラウド型のエージェントは、登場時の熱狂と比べるとやや落ち着いた印象を受けた方も多いのではないでしょうか。 個人的には、今の道具では生産性改善の天井が見えてきたように感じます。認知負荷が限界を迎えているからです。そしてその救世主として、クラウド型コーディングエージェントが再び主役に躍り出ると考えています。 本記事では、なぜ今までクラウド型が主流に...
- 生成AI
- クラウド
- SaaS
- 開発環境
Anchor Positioningが全対応。HTML・CSSだけのポップオーバーが完全体に
2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説...
生成AIとオブザーバビリティ基盤をつないで事象分析を加速しよう
https://adventar.org/calendars/12070 本記事は、Ubie Tech Advent Calendar 2025 23日目の記事です。 はじめに はじめまして、11月にUbieにSREとして入社したumiyosh(海野嘉和)といいます。40代後半での転職になりますが、変化の激しさや実現しようとしている世界観に毎日ワクワクしながら過ごしています。何歳になっても新しい世界に飛び込むのは楽しいものです。 現在はオンボーディングをうけつつSRE業務をやりつつシステムの全体像を理解しようとしています。 オンボーディングを手厚くやってもらえたというのもあり、システ...
Slack Workflow × AIパートナー× Devinで作る「AIマイクロチーム」 — 問い合わせ対応から実装までを自律化
はじめに：その「機能要望」はいつ消化されますか？ こんにちは。Ubieでプロダクト開発エンジニア兼、社内入稿システムのProduct Ownerをしている、えんぴつと申します。 システム運用において、こんな悩みは 「あるある」 ではないでしょうか。 「日々の社内外からの問い合わせ対応に追われて、本来の業務に集中できない…」 「ちょっとした改善依頼や機能要望が、なかなか解決されずに溜まっていく…」 開発チームには、常にジレンマがあります。 Slackで飛んでくる「システムの仕様がわからない」「管理画面にボタンを一つ追加してほしい」といったメンション。これらは重要な仕事ですが、メインの開...
Lightdash導入から2年経って感じてること
ユビーがLightdashを導入したのが2023年10月で、そこから2年ほど経過しました。 導入当時に書いた記事や1年経って導入して効果のあった事例をこれまで紹介してきました。 https://zenn.dev/ubie_dev/articles/e66a5cace3c5a6 https://zenn.dev/ubie_dev/articles/1708c83af16ff4 これらの記事を書いてから更に1年運用してみて、2年前の導入時から考えると改めて導入しておいてよかったことだったり、学びをを振り返ってみたいと思います。 感じたこと1: BIロジックの単一レポジトリ集約の効果の大き...
Prismaを用いた定期バッチ処理を独自upsertで最適化した
! この記事は Ubie Tech Advent Calendar 2025 の 21 日目の記事です。 こんにちは、Ubieの bosshi/ぼっしー です。 普段はSoftware Engineerとして医師監修メディア「ユビー 病気のQ&A」の開発をしています。 今回はPrismaを用いた定期バッチ処理の改善について紹介します。 背景 PrismaとはNode.js/TypeScript向けのORM(Object-Relational Mapping)[1]です。 hokacchaが過去に書いた記事「Node.jsで作るモジュラモノリスの設計と技術選定」でも紹介されて...
PR単位で動作確認がしたい！
始めに Ubieでプラットフォームエンジニア兼SREをしているonoteruです。 今回は、Ubieで運用しているpreview環境と呼ばれる仕組みについて紹介します。preview環境は、プルリクエストごとに動作確認ができる環境を提供する仕組みです。この環境により、開発者の動作確認のボトルネックを解消し、開発効率の向上を実現しています。 なお、本記事はUbie Tech Advent Calendar 2025 20日目の記事となります。 背景と課題 近年、AIエージェントを活用したコーディング支援ツールが普及し、コードを書くこと自体のハードルは大きく下がってきました。しかし、...
LLM-as-a-Judge とルーブリック評価
この記事について 本記事は Ubie Tech Advent Calendar 2025 19 日目の記事です！ https://adventar.org/calendars/12070 LLM を活用したプロダクト開発において、「生成結果の品質をどう評価するか」は常に大きな課題です。 モデルの更新、プロンプトの改善、RAG の検索精度の向上など、あらゆる改善活動において、信頼できる「評価指標（メトリクス）」がなければ、それが改善なのか改悪なのかを判断できません。 Ubie では、LLM を活用したプロダクトの開発・運用を行っています。医療・健康というドメインの特性上、正確性や安全性...