ブラウザ操作を録画して、AIにPlaywrightテストを書いてもらう
概要 こんにちは、booostのバックエンドエンジニアのma_meです。 今回はこちらの記事から着想を得て、個人開発で AI、DevTools Recorder、playwright-cli の３ツールを組み合わせてe2eテストを書いてみたところ、作成とメンテナンスが楽になる手応えを感じましたので、その方法を紹介します。 全体の流れ ① ブラウザで操作を録画（Chrome DevTools Recorder） ↓ ② 録画JSONをCodexないしClaude Codeに渡す ↓ ③ AIがJSONを読み取り、Playwrightテストコードに変換 ↓ ④ 必要に応じてplaywright-cliで画面のスナップショットを取り、セレクタを補正させる ↓ ⑤ テストファイルが完成 では実際にやっていきましょう。 Step 1: ブラウザ操作を録画する Chrome DevToolsの「Rec
DESIGN.mdを日本語UIで本当に使える形へ｜hirokaji
jp-ui-contracts を公開しましたAIでUIを作る流れが強くなるほど、逆に目立ってくるものがあります。 それは、日本語の詰めの甘さです。 色はそれらしく見える。 余白もそれっぽく整う。 カードやボタンの形も、かなり上手に出てくる。 でも最後に崩れるのが、日本語です。 見出しの折り返しが苦しい。 本文の行間が浅い。 英語のサービス名が混ざると急に浮く。 フォームだけ窮屈になる。 表の密度が本文のルールを引きずって読みにくくなる。 この違和感は、単に「AIの精度が足りない」から起きているわけではありません。 もっと手前の問題です。 日本語UIの設計契約が、まだ十分に書かれていない。 そこで作ったのが、jp-ui-contracts です。 また、以下の記事が “DESIGN.md とは何か” を定義する総論で、今回の記事は “それを日本語UIでどう実装資産にするか” を示す各論です
Claude Codeの「ソースコード流出」をどう見るのか
3月31日の朝、Xのタイムラインが騒がしくなっていました。Claude Codeのソースコードが流出したというのです。調べてみると、npmパッケージ（v2.1.88）にデバッグ用のsource mapファイル（cli.js.map）が含まれた状態でリリースされていました。source mapのsourcesContentフィールドに元のTypeScriptソースコード全体がそのまま埋め込まれており、発見者の投稿は数千万ビューを記録。GitHubにミラーリングされ数万フォークされる事態になりました。 Claude code source code has been leaked via a map file in their npm registry! Code: https://t.co/jBiMoOzt8G pic.twitter.com/rYo5hbvEj8 — Chaofan Sho
Claude Code のベストプラクティス - Claude Code Docs
環境設定から並列セッションでのスケーリングまで、Claude Code を最大限に活用するためのヒントとパターン。 Claude Code は agentic coding 環境です。質問に答えて待つチャットボットとは異なり、Claude Code はファイルを読み取り、コマンドを実行し、変更を加え、あなたが見守ったり、方向を変えたり、完全に任せたりしながら、自律的に問題を解決できます。 これはあなたの作業方法を変えます。自分でコードを書いて Claude にレビューしてもらう代わりに、やりたいことを説明すると Claude がそれをどのように構築するかを考え出します。Claude は探索し、計画し、実装します。 しかし、この自律性にも学習曲線があります。Claude は理解する必要がある特定の制約の中で動作します。 このガイドでは、Anthropic の内部チームと、様々なコードベース、
【Claude Code】Agentに入れるべきSkills 20選｜skills.sh活用ガイド - Qiita
最近、Claude CodeやCopilot Agentを触り始めたんだけど、正直な感想として「素のAgent、思ったより微妙じゃない？」って思ったんですよね。 チャットはできる。コードも生成してくれる。でも、なんか…プロダクションレベルじゃない。 例えばこんな感じ： コードは書けるけど、設計パターンがめちゃくちゃ 質問には答えてくれるけど、実務のベストプラクティスを知らない UIは生成できるけど、どう見てもデザイン素人が作った感じ 要するに、スマホを買ったけどアプリを何もインストールしてない状態。OSはあるのに、使い道がない。 Skillsって何？ Skillsはプラグインとはちょっと違います。Agentに業界のベストプラクティス、実プロジェクトの経験値、エンジニアリングの制約ルール、構造化された思考フレームワークを注入するものです。 つまり、「Agent の地頭」を底上げする仕組みです
生成AIはじめの一歩～生成AIの入門的な使い方と注意点～ | 安心・安全なインターネット利用ガイド | 総務省
生成AIはさまざまな場面・目的で利用可能な便利なツールです。 本ページでは、今後の生活の中で生成AIに触れうる国民の方（初心者）向けに、 ① 生成AIの基礎知識 ② 生成AIの活用場面や入門的な使い方 ③ 生成AI活用時の注意点 をご紹介する教材を掲載しています。 生成AIをご自身で利活用できるリテラシーを身に付けるために、ぜひご活用ください。 本教材を活用して講座を開催される方向けに、PPTXのデータのノート欄に、各スライドで話す内容の参考となるメモを記載していますので、必要に応じてご活用ください。また、講座の実施時間や進め方などに応じて内容を編集していただけます。その他、技術やサービスの進展などに伴い、必要に応じて、本教材の更新を行う場合があります。 ＜本教材に関する問合せ先＞ 総務省 情報流通行政局 情報流通振興課 電話：03-5253-5748（直通） e-mail：joryu-k
CLAUDE.md や AGENTS.md のベストプラクティスな書き方 - izanami
CLAUDE.md は LLM にコードベースを理解させる最重要ファイル。WHY/WHAT/HOW の3要素を300行以内で簡潔に書き、指示は最小限に。段階的開示で詳細は別ファイルに分離し、リンターや自動生成には頼らないのがベストプラクティス Claude Code を使っていて、なんか思い通りに動かんなって感じたことない？指示を書いてるはずなのに無視される、毎回同じことを説明し直さなあかん、コードスタイルがバラバラになる こういう問題の多くは、実は CLAUDE .md の書き方に原因があったりするんよね X で 毎日 AI 情報を配信してるコムテです。Agentic AI / AI 駆動開発などを中心に情報を配信しています この記事は HumanLayer のブログ記事「Writing a good CLAUDE .md」をベースに、Anthropic の公式ドキュメントと最新の学術研
世界最大の Nano Banana Pro 無料プロンプトライブラリ、継続的に更新 - YouMind
入力変数：[製品名] 言語：[言語] システム指示： プレミアムなリキッドガラスの弁当グリッド製品インフォグラフィックを作成してください。8つのモジュール（カード2〜8はテキストタイトルのみを表示）で構成されます。 1) 製品分析： → 製品の主要な自然な色を特定 → 「ヒーローカラー」 → カテゴリを特定：FOOD / MEDICINE / TECH 2) カラーパレット（ヒーローカラーから派生）： → 製品 + アクセント：ヒーローカラーをフル彩度で使用 → アイコン、境界線：ミュートされたヒーローカラー（彩度30〜40%、黒は使用しない） 3) 視覚スタイル： → ヒーロー製品：実写写真（本物、プレミアム）、3Dガラスバージョン [どちらかを選択] → カード：Apple リキッドガラス（透明度85〜90%）に極細の境界線と、浮遊感と背景色を反射させるための微妙なドロップシャドウ →
Geminiの「Gem」機能のTips集(1/3)：基本編｜榎本大貴 / LITALICO研究所所長
この記事はLITALICO Advent Calendar 2025として書こうと思っていたのですが、まんまと遅延してしまい、さすがに2025年中には出さないといけないと思ってなんとか書き上げたものです。 書いていくうちに10,000文字を超えてしまい、さすがに１記事にするのは微妙かと思って分割しました。 ▼LITALICO Advent Calendar 2025はこちら では、早速どうぞ。 はじめにGoogleの生成AIであるGeminiには「Gems」という機能があります。 これは、プロンプトを保存・再利用・共有できる便利な機能なんですが、実は効果的に使うにはいくつかのコツがあるんですよね。僕自身、試行錯誤しながら使っていく中で「あ、これ便利だな」と思ったTipsをまとめてみました。 記事の全体像は、下記の通りです。 前提（今回の記事） 基本編（今回の記事） 応用編（２記事目） 実践
初心者が爆速で Claude Code を習得する 10 のステップ
その②：通知をONにする モデルが強化されるにつれて、長時間の作業を自律的に行えるようになっています。その間、人間がずっと見ている必要はないため、作業が終わったら通知で連絡をもらうように設定しましょう。 個人的に参考になったブログはこちらです。 その③：音声入力を活用する 音声入力なら、タイピングの 3 〜 4 倍の情報量を、背景や意図を含めて自然に伝えられます。入力の負担が減って思考に集中できます。 個人的に参考になった動画はこちらです。 2. CLAUDE.md を作成し、育てる CLAUDE.md とは？ CLAUDE.md は、Claude にプロジェクトの背景知識（コンテキスト）を持たせるための設定ファイルです。通常、AI は会話のたびにプロジェクトの構成やルール（コーディング規約など）を忘れてしまうため、毎回説明する必要があります。しかし、プロジェクトのルートディレクトリに C
Claude Code on the webを触ってみた
びーぐるです🐶 2025年10月21日、Anthropic社が提供するAIモデルClaudeを利用したAIコーディングエージェントClaude Code on the webがリサーチプレビューとして公開されました。 このサービスはクラウド型AIコーディングエージェントと呼ばれるもので、ブラウザやiOSのアプリから直接アクセスできる手軽さが特徴です。 現時点ではAndroidアプリ版からは利用できないようです…残念。 本記事では、Claude Code on the webを実際にセットアップし、試してみます。 本当にただ触っただけの記事になりますが、ご了承ください。 後日の記事ではAnthropic社の参入で一層注目されつつあるクラウド型AIコーディングエージェントについて考察したいと思います。 更新情報 2025/10/31 投稿しました 2025/11/09 Hit and Blo
真の無料ChatGPT。ローカルLLM｢gpt-oss-20b｣の動かし方を徹底解説
真の無料ChatGPT。ローカルLLM｢gpt-oss-20b｣の動かし方を徹底解説2025.10.19 08:0063,005 かみやまたくみ 2025年8月にOpenAIが公開したオープンウェイト言語モデル（≒ローカルLLM）｢gpt-oss-20b｣。優秀で利用価値が高いAIモデルのひとつなのですが、動かすまでがけっこう難しい。 本稿では、どうやれば同モデルを自分のパソコンで動かせるかを紹介します。 gpt-oss-20bって？わりと真面目に｢無料版ChatGPT｣です。ChatGPTの開発元であるOpenAIが開発・無料で公開している大規模言語モデル（LLM）で、｢o3-mini｣（かつてChatGPTに使われていたモデル）と同等のベンチマーク結果を出しています。 表を積極的に用いる癖があり、回答はとても見やすい。Photo: かみやまたくみ完全なChatGPTのクローンではなく、
AI コーディングエージェントの管理を行う Vibe Kanban を試してみた
Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。 AI コーディングエージェントが登場して以来、開発者の仕事はコードの生成からコードのレビューや設計、AI エージェントの管理へとシフトしつつあります。AI コーディングエージェントは大量のコードを高速に生成できる一方で、生成されたコードが正しいか、セキュリティ上の問題がないか、プロジェクトのスタイルガイドに準拠しているかを確認する必要があります。また、AI エージェントに適切なプロンプトを与え、タスクを分割して効率的に作業を進めるための管理も重要です。 Vibe Kanba
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【西川和久の不定期コラム】 ブラウザだけで即ローカルLLM。WebGPUでGemma-4やQwen 3.5を試す
§2.7 Ollamaで Llama 3.1 Swallow 8B を動かす
Improve your AI code output with AGENTS.md (+ my best tips)
Codex vs Claude Code: which is the better AI coding agent?
Writing a good CLAUDE.md
Cursor Learn
【西川和久の不定期コラム】 これは事件だ。“賢い家庭内LLMの夢”を叶える「gpt-oss-120b」、動かし方を教えます
