@custom-media でメディアクエリのプリセットを定義する
同じメディアクエリを複数の CSS ファイルに書くと、ブレークポイントを変えるときにすべての箇所を書き換える必要があります。@custom-media はメディアクエリに --md のような名前を付ける at-rule で、入力方式やブレークポイントをプリセットとして 1 か所で管理できます。この記事では、@custom-media の構文と仕様上の挙動について説明します。
最新記事
AI エージェントがデスクトップアプリを操作する CLI agent-desktop
agent-desktop は Vercel Labs が公開している、AI エージェント向けの Computer Use CLI です。スクリーンショットとピクセル座標ではなく OS のアクセシビリティツリーを読み取り、スナップショットごとに発行される ref を指定してデスクトップアプリを操作します。この記事では agent-desktop の基本的な使い方を確認したうえで、SwiftUI で作った架空の経費アプリの動作確認を Claude Code に任せ、バグの発見から修正までを実行させます。
streamAppendHTML() で AI の回答を HTML のままストリーミング描画する
LLM の回答を逐次描画するとき、届いた文字列全体を毎回パースして DOM を置き換える実装では、要素が作り直され続けてテキストの選択状態が失われたりします。streamAppendHTML() は WritableStream を返し、届いた HTML を要素の末尾へ順にパースします。この記事では streamAppendHTML() の使い方とサニタイズの挙動について紹介します。
Feature
@custom-media でメディアクエリのプリセットを定義する
同じメディアクエリを複数の CSS ファイルに書くと、ブレークポイントを変えるときにすべての箇所を書き換える必要があります。@custom-media はメディアクエリに --md のような名前を付ける at-rule で、入力方式やブレークポイントをプリセットとして 1 か所で管理できます。この記事では、@custom-media の構文と仕様上の挙動について説明します。
AI エージェントがデスクトップアプリを操作する CLI agent-desktop
agent-desktop は Vercel Labs が公開している、AI エージェント向けの Computer Use CLI です。スクリーンショットとピクセル座標ではなく OS のアクセシビリティツリーを読み取り、スナップショットごとに発行される ref を指定してデスクトップアプリを操作します。この記事では agent-desktop の基本的な使い方を確認したうえで、SwiftUI で作った架空の経費アプリの動作確認を Claude Code に任せ、バグの発見から修正までを実行させます。
streamAppendHTML() で AI の回答を HTML のままストリーミング描画する
LLM の回答を逐次描画するとき、届いた文字列全体を毎回パースして DOM を置き換える実装では、要素が作り直され続けてテキストの選択状態が失われたりします。streamAppendHTML() は WritableStream を返し、届いた HTML を要素の末尾へ順にパースします。この記事では streamAppendHTML() の使い方とサニタイズの挙動について紹介します。
人気記事
- streamAppendHTML() で AI の回答を HTML のままストリーミング描画する
- AI エージェントがデスクトップアプリを操作する CLI agent-desktop
- エージェントスキル集 pstack の開発原則と使い方
- Claude Code で MCP Tasks と Elicitation を試す
- 最近の AI コーディングで実践している、設計を中心とした開発の進め方
- Void でフルスタックアプリを構築して Cloudflare にデプロイする
- Claude Code の Mods で Claude Code 自身に機能を追加する
- Canvas 内に直接 HTML を描画できる HTML in Canvas API について
- GitHub Actions の依存関係を lockfile で固定する
- Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc
ショート
azukiazusa
Codex のネットワークアクセス設定
azukiazusa
Codex Hooks で終了時に通知を出す
azukiazusa
Codex の smart_approvals で承認の負担を軽減する
azukiazusa
browserslist で Baseline を設定できるようになった
登壇資料
2026
-
リファクタリングのためのトークン節約術
エージェントがより効率よくタスクを達成できるように、日常のタスクの中で徐々にメモリやスキルを改善していこうという話です。
-
フロントエンドカンファレンス名古屋 2026
フロントエンドの相手が変わった - AIが加わったWebの新しいインターフェース設計
フロントエンドエンジニアがこれまで向き合ってきた相手は人間でしたが、AIの登場によってその前提が変わりつつあります。AIがWebの出力者になる（ストリーミングUI、MCP Apps）ことと、AIがWebの消費者になる（Markdown配信、WebMCP）という2つの変化を軸に、AI時代のWebインターフェース設計を考察します。
-
React Tokyo Fes 2025
コーディングエージェントにフロントエンドを書かせるとき、フィードバックはどのように与えるか？
LLMベースのコーディングエージェント(Claude Code、Codexなど)が普及しているが、LLMの反復改善プロセスにおいて、コード実行結果のフィードバックがなぜ不可欠です。バックエンド開発では実行結果やテストを通じて即座にフィードバックを得られる一方、フロントエンド開発では独特の課題が存在します。本発表では、コーディングエージェントがフロントエンドコードを生成する際の「フィードバックループの問題」に焦点を当て、実践的な解決策とそのトレードオフについて議論します。