Docker MCP Gatewayがすんばらしい👌 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Azure使う？使わない？ ～Azureサポート編～ - Qiita
一般的にサービスの良い面は語られがちですが、残念な面について語られることは少ないですよね。 そこで本記事ではAzureサポートの残念な点をあえて挙げることで、Azureの利用を検討している方々にとっての判断材料となることを目的としています。 Azureのサポートプラン Azureサポートには主に以下4種類のサポートプランがあります。 本記事や他の情報も踏まえた上で読者の皆さんがAzureを使用するという結論に至った場合、サポートプランは Developerプラン を推奨します。 Developerプランでは事足りず上位のプランで要求を満たせるユースケースというのは非常に限られていると感じます。 この記事を読んでいただければ理解いただけると思います。 重大度はユーザ側が問い合わせ時に選択します。 事業へ大きく影響する問題は重大度A、事業へそれなりに影響する問題は重大度B、事業への影響が小さい
Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita
はじめに Playwright MCP を使って、自然言語から E2E テストを実行できるかどうかを試してみました。今回は、デスクトップ版の Claude を利用して、プロンプトを入力してテストを実行してみます。テスト対象のアプリケーションは、ブラウザベースで操作可能な TODO を管理するサンプルアプリを対象としました。 Playwright MCP の詳細については、公式のドキュメントを確認してください。 実行環境 Claude for Mac: 0.9.1 Claude Pro プラン（Free プランでも制限内で、実行はできます） @playwright/mcp: 0.0.9 テスト対象のサンプルアプリについて テストを実行するサンプルアプリケーションは TODO タスクを CRUD できるようなシンプルな WEB アプリです。以下のような機能があります。 タスクを新規作成、編集、
Playwright MCP を使ってAIにUXを評価してもらう - Qiita
はじめに 乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。 今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思い付きを試してみました。 1. MCPとは？ MCPは、Model Context Protocolの略称です。 Protocolとある通り、「AI」と「サービスやリソース」を繋ぐ、共通規格です。 従来の悩み 従来は、AIと他サービスやリソースを連携させる際、それぞれの接続先ごとに個別の実装が必要となり、開発者に大きな負担がかかっていました。 下記ではAIエージェントが利用できるように「ブラウザ操作」「画像生成」など個別に実装する必要があります。 MCPが解決すること 「AI」と「サービスやリソース」を繋ぐ部分を共通規格化することで、開発の負担が減り、手軽にAIとサービス・リソースを接続できるよ
Cursorが市場を席巻している理由をちょっと考えてみる - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに どうも。鳩胸になりたい文鳥です。 Cusorが市場を席巻している ブッチギリでの世界最速ARR $100Mに加えて先日時価総額が1兆円を超えたそうです。間違いなく売れているし今後の成長を期待される企業であるのは間違いないでしょう。 Cursorはソフトウェアエンジニア向けにAI機能を搭載したソースコード編集ソフトを提供している会社です。 上記のブログに記載したがCursorは 12人の社員 Microsoft製のVisual Studio Codeをフォークして作ったラッパーアプリ AIのモデルは開発せず、ChatGPTやCl
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
24GB RAM + 4CPU + 200GBストレージのLinuxサーバーを無料で手にいれる方法 - Qiita
概要 エンジニアであれば誰もが、無料で利用できるサーバを求めていると思います。 この記事では、OCI(Oracle Cloud Infrastructure)を使用して24GB RAM + 4CPU + 200GBストレージのUbuntuサーバを手にいれる方法を詳しく解説していきます。 無料で利用できるパブリッククラウドとしてAWS, GCPも存在しますが、どちらも無料枠は1年間限定で、期限が切れると有料プランに移行してしまいます。しかしOCIについては期限の制限なしに無料枠を提供してくれています。 Oracle Cloud のAlways Freeクラウド・サービスとは？ 期間の制限なくOCIのサービスを使用できるもの。 ✅ ARMベースの4CPU + 24GB RAMのVMインスタンスを1か月あたり3,000 OCPU時間と18,000GB時間で使用可能。例えば、4CPU + 24GB
(Cline) お前とペアプロをする前に 言っておきたいことがある - Qiita
# レポートについて これからやろうとしていること、やったことなど、あなたの発言は日本語でしてほしい。 # 開発の進め方 君と僕は一緒に開発を進めていくことになる。 そこで、足並みを揃えて、お互いにコードの方針を理解しながらプログラミングをしたいと思っている。 具体的には、ある程度小さい単位で私にコードレビューを依頼してほしい。 君は頭が良いが、ややコードが複雑になりすぎるので、私がそうならないように補助したい。 例えば、１ファイル変更が終わった時点で私にコードレビューを依頼してほしい。 その時点では、プログラムがエラーで停止したりしていても問題ない。 私はその内容をレビューして次の指示を出すからね。 ただ、１ファイル内で修正できる警告や、エラーは修正してほしい。 # 注意すべき点 君がコードを読む際に、大きめのコストがかかる。 これは、君に問題があるのではなく、ファイル読み込みの仕組みに
web開発素人だけど、Claude 3.7 Sonnetを使ったら半日でアプリ開発&リリースできた記念記事 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは。 今回はClaude 3.7 sonnetの助けを借りて個人用ミニwebアプリを開発してみました。 普段はサービスデザイナーをしている開発素人の私がClaudeとともにアプリづくりを進めた過程や感想をつづります。 プロンプトやClaudeからの応答を抜粋して載せていますので、初心者のAI駆動な開発プロセスを追体験いただけたら嬉しいです！ プロローグ 「Hey Claude, 俺一人でwebアプリ開発できる確率は？」 『…6%です』 「……ま、そんなところか」 『…あなた一人なら』 「？」 『…あなたは一人ではありません』 「
顧客の解約やキャンセルを分析する4つの方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? SaaSをはじめとするサブスクリプションサービスのような購読型ビジネスでは、顧客の解約やキャンセルが収益に大きな影響を与えるため、その分析や対策は非常に重要なテーマです。 しかし、顧客の解約やキャンセルはあらゆるビジネスにとって重要な課題と言えます。 例えば、従量課金型のサービスの解約、不動産業界における成約辞退、結婚式場における予約のキャンセルなど、購読型でないビジネスにおいても、顧客の解約やキャンセルはビジネスの機会損失につながります。 そこで、こちらの記事では顧客のキャンセルを分析する4つの方法を紹介いたします。 1. 相関分析：
ふりかえり手法「象、死んだ魚、嘔吐」でチームの闇と向き合おう - Qiita
ふりかえり手法にはKPT、Fun Done Learnなど様々な手法が知られています。 今回はその中でもチームの課題と向き合う手法「象、死んだ魚、嘔吐」について説明します。 また自分達が実際に実践するにあたって行った工夫を紹介します。 ふりかえり手法「象、死んだ魚、嘔吐」とは？ 2024.1.17追記 「象死んだ魚嘔吐のうた」を制作し、Reginal Scrum Gathering Tokyo 2024にて発表しました。 ↑使用したオリジナルの背景画像です。お好きなツールの背景としてどうぞ。 「象、死んだ魚、嘔吐」とは、Airbnbの共同創業者ジョー・ゲビアが提唱した手法です。 カリスマ性があり完璧主義のジョー・ゲビアが率いるチームでは、雰囲気が重苦しく、メンバーはゲビアを恐れ、自分の考えていることを発言できなくなっており、チームは崩壊寸前でした。 そのような状態で考案されたふりかえり手法
個人的技術書大賞2024 - Qiita
O'Reillyサブスクリプションで読むことができる今年発行された書籍の中から、これは良いんじゃないかな、と感じたものを紹介します。 Balancing Coupling in Software Design 『[ドメイン駆動設計をはじめよう』原著者のVlad Khononovさんの最新作で、ソフトウェアにおいて結合とは何かを一冊まるまる使って掘り下げた本です。 ソフトウェアにおける結合というと、その指標として50年以上前に提唱された構造化設計時代の結合強度が用いられがちです。本書ではこれについて解説をしつつも、新たな現代における結合強度の基準を提案しています。(元ネタはMichael NygardのUncouplingを統合したものでもあるのですが…) それから開発の辛みは結合強度だけでなく、「距離」「変動性」も影響してくるため、これらのバランスをとるのが重要であるといい、以下公式を導き
Clineを使用した次世代AIコーディング。もうCursorは要らない？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? AI コーディングとは ChatGPT や Claude, Perplexity など の AI にコードを生成してもらうことは既に一般化しているかと思います。各サービスの Web サイトにチャット形式でやり取りしてコードを生成し、それをエディターなどにコピーアンドペーストして実行できて便利です。 しかし、直接 VSCode で AI とやり取りできたらもっと便利ではないでしょうか？ブラウザとエディタを何度も行き来し、コピーアンドペーストを繰り返す必要がなくなり、差分だけ提示されたのをどうマージすればいいのか考える必要もなくなります。
Webアプリでの長押し機能の実装は意外と難しい - Qiita
const counter = document.getElementById('counter'); const incrementBtn = document.getElementById('incrementBtn'); incrementBtn.addEventListener('click', () => { counter.textContent = Number(counter.textContent) + 1; }); これは、多くのブラウザやWebアプリケーションは、キーボードアクセシビリティを重視しているためです。 ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。 すべての機能がキーボードを用いて実現できる場合、キーボードの利用者、(キーボード入力を生成する) 音声入力、(オンスクリーンキーボードを使用する) マウス、及
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
提案のレベルを上げる #QiitaConference
ギャルとのペアプロが想像以上に楽しかった（VSCodeのカスタム指示） - Qiita
HTML 仕様のメールアドレス正規表現に最小限の修正を加える - Qiita
browser-use やばいです - Qiita
Function calling の延長線上で MCP を考察 - Qiita
