サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
MacBook Neo
dev.classmethod.jp
FigmaのURLを渡すだけで、UI Stackの網羅性や不足コンポーネントなどを自動で洗い出してくれるClaude Codeスキル「UI Coverage Check」を作成しました。使い方と作成の過程を紹介します。 UIデザインは「理想の状態」でつくられることが多いと思いますが、実際にはデータが正しく読み込めない場合や、権限で表示が変わる場合など、さまざまな状態をUIとして表現しておく必要があります。 データが空のときや読み込み中など、よくある・わかりやすい状態であれば、考慮されている場合がほとんどでしょう。しかし、裏側の状態をすべて考慮するのは難しいため、気づかなかった状態がFigmaに存在せずに開発の後半で「これどうするんでしたっけ？」という会話をした結果、手戻りを起こしてしまうといったことはよく聞く話ではないでしょうか？ この問題をClaude Codeで解決できないかと考え、F
はじめに 皆様こんにちは、あかいけです。 S3バケットを作成するとき、「このバケット名もう使われてるのか...っ」となったことはありますか？ 私はあります。何度もあります。 S3のバケット名はグローバルで一意である必要があり、 シンプルな名前をつけようとすると大体すでに誰かに取られている、というのはS3あるあるですよね。 そんな中、アカウントリージョナル名前空間(Account Regional namespace) という機能が追加されました。 今回はこの新機能について、概要からAWS CLI・CloudFormationでの作成方法、IAMポリシーによる強制まで、まとめてみました。 アップデートの概要 まず誤解しやすいポイントを先にお伝えしておきます。 この機能は 「バケット名がグローバルに一意でなくてもよくなった」というわけではありません。 S3のバケット名は引き続きグローバルで一意
はじめに こんにちは、クラスメソッド製造ビジネステクノロジー部の森茂です。 2026 年 3 月 11 日、NVIDIA から Nemotron 3 Super がリリースされました。総パラメータ 120B、アクティブパラメータ 12B のハイブリッドアーキテクチャを採用した、エージェント向けの推論モデルです。アーキテクチャの詳細や Cloudflare Workers AI での試用については大栗さんの記事で紹介しているので、そちらもあわせてご覧ください。 今回はローカル実行に焦点を当てます。以前の記事では同じ Nemotron 3 ファミリーの軽量モデル Nano（30B-A3B）を DGX Spark で動かしました。今回はそこからスケールアップして、120B の Super に挑戦です。Nano との性能差も気になるので、JCommonsenseQA ベンチマークで比較してみました
どうも！オペ部の西村祐二です！ Obsidianのコアプラグイン Bases をご存知でしょうか。2025年8月にv1.9.10で一般公開された機能で、NotionライクなデータベースをObsidianで実現できます。 コードを書く必要がなく、GUIで直感的に操作できるので、Dataviewに挫折した方にもおすすめです。この記事では、Basesの基本から活用事例まで紹介します。 結論 Obsidian Basesを使えば、ノートをデータベースとして扱い、フィルタリング・ソート・ビュー切り替えがGUIだけで実現できます。 Dataviewのようなコードを書く必要がなく、フロントマターの値をその場で直接編集できるのが大きな特徴です。 この記事で分かること: Obsidian Basesの有効化と基本操作 フィルター・ビューの設定方法 タスク管理や書籍管理などの具体的な活用事例 Dataview
Anthropic公式のClaude Code Pluginがあります。以前に見たときから増えていたので、改めて確認してみました。 https://github.com/anthropics/claude-plugins-official 下記でも閲覧できます。適宜、フィルターを設定してください。 https://claude.com/plugins おすすめの方 Anthropic公式のClaude Code Pluginを知りたい方 重要 公式か否かに関わらず、Pluginを利用する前に、信頼できるものであるかを確認してください。リポジトリ、Pluginの中身、など。 Claude Code Plugins の一覧（2026年3月12日時点） UI・フロントエンド フォルダ名 概要
はじめに Google Workspaceには色々なサービスがパッケージされていて、スモールビジネスで導入するにはかなり便利だと感じてます。 今回はGoogle WorkspaceのAdmin（管理者）機能周りをいくつか検証したかったので、自分で一から初期設定をやってみました。 検証環境 Google Workspace（初期14日間無料） Domain（Route53） Google Workspace 初期設定 初期ドメイン認証のCNAMEレコード登録 まずは自分が持っているDomainの認証から始めます。 自分のDomainを入力 Usernameを追加 Domain hostを選択 Domain host（今回はRoute53）にCNAMEレコードを登録 CNAMEの登録をVerify（認証） メールサーバー用MXレコードを登録 次はメールを受信できるようにするための設定です。 P
はじめに 「AWSの構成図を作って」——このひと言で、正しいアイコン・正しい色・正しいレイアウトのDraw.ioファイルが生成されたら便利だと思いませんか？ Claude Codeの スキル（Skills） 機能を使って、AWSアーキテクチャ図を自動生成するaws-architecture-diagramを作りました。 本記事では、なぜスキルという形にしたのか、どんな課題をどう解決したのか、そしてスキル設計の哲学について書きます。 Claude Codeの「スキル」とは Claude Codeには、.claude/skills/ ディレクトリに定義ファイルを配置することで、特定のタスクに対する専門知識をClaudeに持たせるスキル機能があります。 スキルは単なるプロンプトテンプレートではありません。複数の参照ファイルを持てるため、コンテキストウィンドウに収まりきらない大量の参照データを必要
はじめに 皆様こんにちは、あかいけです。 最近は仕事やプライベート問わず、Claude Codeを使わない時間の方が少なくなってきた気がする今日この頃です。 ところで皆様、Claude Codeの処理中に表示されるあのメッセージ、ちゃんと見たことはありますか？ 私は最近じっくり見てみたのですが、結構謎なワードが書いてあるんですよね。 Combobulating...。 「整理する」とか「組み合わせる」みたいな意味の単語らしいですが、なんだか不思議な響きです。 他にも「Photosynthesizing...(光合成中)」、「Pondering...(熟考中)」、「Moonwalking...(ムーンウォーク中)」など、 よく見ると謎ワードがたくさん表示されています。 調べてみると、どうやらこれらはSpinner Verbsと呼ばれるもので、しかもカスタマイズできるらしいです。 というわけで
社内のチームメンバー(クラウド事業本部コンサルティング部)向けに 「 Claude Code Skills (Agent Skills) 勉強会 」を開催しました。 DevelopersIO向けに調整したスライドを掲載します。 スライドの内容:テキスト情報を以降に記載します。参考になれば幸いです。 勉強会の目的 勉強会の背景やゴール、アジェンダを連携します。 背景 Skills がアツいです🔥 Claude Code (AIエージェント)の動きを 自分好みにカスタマイズ できる拡張機能 手軽に作れて、手軽に共有できます この勉強会のゴール 参加者全員が Skills をセットアップ して、基本的な使い方を理解する 普段の業務での活用方法を参加者全員で探索 する 参加者の知見やアウトプットを引き出す 期待する成果 この時間: Skills のセットアップ完了 + 基本的な使い方の理解 今後
Introduction Claude Codeのv2.1.71で/loopコマンドが追加されました。 Added /loop command to run a prompt or slash command on a recurring interval (e.g. /loop 5m check the deploy) これは、cronのような繰り返しタスクをスケジュールできるコマンドです。 例えば、GithubのPR・CI・レビューコメントの定期チェックや対応を ClaudeにバックグラウンドでやってもらったりすることがClaude Codeデフォルトの機能で可能になります。 /loop? 今開いている Claude Code セッションの中でだけ使える、軽量な定期実行・単発リマインド機能です。 「デプロイ完了を10分ごとに確認」や「45分後にテスト結果を確認」などの用途で使います。
コンポーネント内に自由に中身を差し替えられる領域を作成できる、Figmaの新機能「スロット」を実際に触ってみました。 Figmaの新機能である「スロット」（執筆時点でオープンベータ版）が、自分の環境にデプロイされたので使ってみました。 事前の情報通り、モーダルダイアログのヘッダーやアクション部分は固定化できるけど、コンテンツ部分が場合によって変わりすぎるとか、ドロップダウンメニューやタブなど使う場所によって個数が違いすぎて結局個別管理になってしまう…といった課題をまるっと解決できそうな機能ですね。 スロットとは？ ざっくりいうと、“自由に中身を差し替え可能な領域”をつくる機能で、コンポーネントの大枠は維持しつつ、中身を自由に編集できるようになります。 例えばドロップダウンメニューだと、使う最大数のメニュー項目を準備してブーリアンプロパティで表示非表示を制御するやり方か、インスタンススワップ
はじめに 3/5(木) に開催されたZenncafeで、Claude Code活用の足回りについて登壇しました。 AIを活用したコーディングが急速に進化しています。GitHub Copilot、Cursor、Claude Codeなど、さまざまなAIツールが登場し、開発者の働き方を変えつつあります。本イベントでは、AIコーディングツールの最新動向や実践的な活用方法、そして今後の可能性について参加者同士で知見を共有します。 内容 内容はClaude Code活用の足回りの話です！ GIFがSpeakerDeckだと再生できないため、Google Slideも補足としてご利用ください。 25年8月Claude Meetup Tokyo #2で登壇したとき から変わったところについて書きました。 まずはAgent Skillsが急速に一般化して、最近は新しいFWやツールのQuick Startで
こんにちは！クラウド事業本部のおつまみです。 みなさん、Claude Codeは使っていますか？私は毎日使っています。 2026/3/3に Claude Code v2.1.71 がリリースされ、遂に音声モード/voiceが登場しましたね！ 今回は小ネタとして、Claude Codeの/voiceコマンドで日本語を認識させる方法をご紹介します。 3行まとめ Claude Codeに音声入力できる/voiceコマンドが順次展開中（2026/3/3時点） デフォルトでは英語認識のため、日本語で話しても正しく認識されない /configでLanguageをJapaneseに変更するだけで日本語音声入力が使えるようになる voiceコマンドとは Claude Codeには音声でプロンプトを入力できる/voiceコマンドがあります。 このコマンドを有効にしておくと、スペースキーを押している間、リアル
はじめに Unity が公式にリリースした MCP (Model Context Protocol) パッケージ com.unity.ai.assistant を使うと、Claude Code のような AI エージェントから Unity Editor を直接操作できます。本記事では、このパッケージを Claude Code と組み合わせて TPS (Third Person Shooter) テンプレートのシーン改造を AI に任せ、どこまで実用に耐え、どの段階で人手によるレビューが必要になるかを検証しました。 GUI 上で人間がマウスを使って行ってきた作業を、AI にテキストで指示するとどうなるのか。3 つのタスクを通じて、その現在地を確認します。
Brunoを使えばAPIコレクションをプロジェクトフォルダ内にGit管理できます。Postmanからの移行手順とVSCode連携、シークレット管理のパターンを紹介します。 はじめに APIテストツールといえばPostmanが定番ですが、長く使っていると地味にストレスが溜まります。 プロジェクトAのコレクションとプロジェクトBのコレクションがPostmanのUI上に混在する チームメンバーとコレクションを共有するにはPostmanアカウントが必要 エクスポートしたJSONをGitで管理しても、差分が読みにくい 最近 Bruno というオープンソースのAPIクライアントを試してみたところ、これらの問題がきれいに解決できたので、セットアップ手順をまとめます。 Brunoの何が良いのか プロジェクト単位でAPIコレクションが完結する Brunoではコレクションを プロジェクトフォルダ内 に .br
2026年3月7日、JAWS DAYS 2026にて「IPv4とVPCエンドポイント依存からの卒業。AWSの最新アップデートとIPv6サポートを活用した次世代Web配信アーキテクチャ」というタイトルで登壇させていただきました。 スライド公開 スライドは以下で公開しています。 セッション概要 DevelopersIOの本番環境で実践している、ネットワーク固定費を削減したAWS構成についてお話ししました。 コスト削減実績: Before: $303/月（ネットワーク固定費） 現在: $136/月（約55%削減） 将来: $0/月を目指す（IPv6完全移行時） これは「固定費の断捨離」です。トラフィックに応じた従量課金は別途発生します。 背景：なぜこの構成を選んだのか DevelopersIOは専任のシステム担当はおらず、有志が本業の合間に運用しています。そのため、ここ数年は費用対効果がよく、運
どうも！オペ部の西村祐二です！ Claude CodeなどAIで機能を実装したあと、コードレビューはどうしていますか？ 最近はLLMが賢くなってきたので、特別なカスタマイズをしなくても「このコードをレビューして」と頼むだけで十分なフィードバックが返ってくる場面も増えました。とはいえ、Claude Codeでのコードレビューにはいくつかの選択肢があります。 素のLLMの性能を利用する: 「レビューして」とお願いするだけで一番お手軽。個人的に精度も問題ないことが多い 公式 code-review プラグイン: Anthropicが提供。Claude自身が4つの並列エージェントでレビューし、信頼度スコアリングで誤検知をフィルタリングする カスタムスキル（自作）: ~/.claude/skills/にレビュー用のスキルを配置し、言語別チェックリストを育てていくアプローチ CodeRabbit プラ
Claude や ChatGPT の障害に備えて、ローカル LLM (Qwen 3.5-4B) を AWS の GPU インスタンス上にセルフホストしました。Tailscale を使うことで、スマホからも PC からも同じ URL でプライベートにアクセスできます。Terraform のコード全文と、実際に使ってみた所感を紹介します。 はじめに Claude や ChatGPT などのクラウド LLM サービスは、障害が発生すると使えなくなります。LLM を日常的に活用するエンジニアにとって、こういった障害が作業効率に与える影響は大きいです。保険として自前の LLM 環境を持っておきたいと考える方は少なくないのではないでしょうか。 自宅の PC でローカル LLM を動かすこと自体は難しくありません。しかし、常時起動が前提になりますし、外出先からはアクセスできません。 本記事では、オープン
毎回その場で仕事のやり方を考えて使い捨てしてたので、パターン化してくれるように Claude Code にお願いしてみました。 ウィスキー、シガー、パイプをこよなく愛する大栗です。 十八代目 中村勘三郎さんの「型があるから型破り、型がなければ形無し」という言葉があります。私はテクニカルアカウントアドバイザーとして複数のお客様にクラウドの技術支援を行っていますが、開発業務ではなく、技術調査や資料作成が中心の業務です。そのため、以前は生成 AI の活用といえばチャットベースで相談する程度でした。 3ヶ月ほど前から Claude Code を使い始め、調査や資料作成など様々な業務で活用するようになりました。しかし、使い込むほどに見えてきたのは、自分自身が「型破り」どころか「形無し」だったという事実です。 本記事では、Claude Code に組み込んだ「振り返りの仕組み」と「パターン蓄積の仕組み
はじめに 社内ドキュメントをAIで検索・活用したいとき、まず思い浮かぶのがRAG（Retrieval-Augmented Generation）の構築ではないでしょうか。ベクトルDBを用意して、ドキュメントをチャンク分割して、埋め込みを生成して…と、それなりの開発・運用コストがかかります。 しかし、もし社内ドキュメントがGoogle Drive上に集約されているなら、GeminiのGoogle Workspace連携を使うだけで、RAGを構築せずとも同等の体験が得られるかもしれません。 クラスメソッドでは社内ドキュメントをGoogle Driveで管理しています。今回、GeminiのWorkspace連携機能を試してみたところ、セットアップはほぼゼロ、検索精度や回答品質も十分実用的だったので、その設定方法と使用感を紹介します。 前提 Google Workspaceを利用している組織である
はじめに こんにちは。 クラウド事業本部コンサルティング部の渡邉です。 本日朝Xを見ているとタイムラインでGoogle Workspace CLIがリリースされているとのポストを見ましたので、さっそく調査してみました。 Google Workspace CLI（gws）とは Google Workspace CLI（以下、gws）は、Drive、Gmail、Calendar、Sheets、Docs、Chat、Admin等のGoogle Workspace APIをひとつのコマンドラインツールで操作できるCLIツールです。gwsコマンドで実行します。 従来はGoogle WorkspaceのAPIを利用する際に、毎回REST APIのドキュメントを確認し、curlコマンドを利用していた方もいると思います。 Drive、Gmail、Calendar、Sheets、Docs、Chatなどと、Go
Google Workspace CLI（gws）が登場！早速インストールしてClaude Codeから操作してみた こんにちは。サービス開発室の武田です。 Google Workspaceをコマンドラインから操作できるCLIツール「gws」が、Googleの公式Organization（googleworkspace）配下でリリースされました！ これまでGoogle WorkspaceのCLIツールといえば3rd party製のものしか選択肢がありませんでした。ついにgoogleworkspace orgから出たということで、さっそくインストールしてClaude Codeから触ってみました。 注意: READMEには"This is not an officially supported Google product."という免責事項が記載されています。また、本記事執筆時点（2026年3
ラズパイ上で Qwen3-4B を動かす！Raspberry Pi 5 で AI アクセラレーター LLM-8850 を試してみた はじめに ローカル LLM が流行っていますね。 Raspberry Pi 界隈でもいくつかの方法や関連デバイスなどが販売されるようになってきました。私もやっと AI アクセラレーターを入手できたので、その導入と簡単な動作確認までを紹介したいと思います。 利用したデバイス 今回は以下の構成で利用しました。 LLM-8850 Card （AI アクセラレータ） Raspberry Pi 5（8GB） USB メモリ （128 GB） Ubuntu 24.04 LTS LLM-8850 Card 今回利用したのは、M5Stack 社より販売されている 「LLM-8850 Card」 という AI アクセラレーターです。 何社かの販売サイトでは 2026 年 3 月
私を含め受託開発のデザイナーは、要件定義の段階でUIを作り画面フローを整理して開発に入ることが多いと思います。 開発が進むと仕様変更や文言修正が入り、いつの間にか「最新版はFigma？実装？」が曖昧になりがちです。 実装側が最新になっているならその状態をできるだけ正確にFigmaへ戻してデザインデータを最新化させたい……そんな時がありますよね。 Figmaが公開した「Claude Code to Figma」ならコードを正としてFigmaを更新する運用が現実になるかもしれません。 今回は 『Figmaで作ったMaterial 3のUIを、Claude CodeでReact + MUIに実装し、Claude Code to FigmaでFigmaに戻す』 という検証をしました。 狙いは「AIを挟んだ往復でデザインシステム（構造/トークン/余白ルール）はどこまで保持されるのか？」を実務に近い手
はじめに 担当しているプロジェクトのユーザーガイドを運用しています。UI刷新時に200枚以上のスクリーンショットを手動で撮り直す、という苦行を経験しました。さらに追い打ちをかけるように、多言語対応で英語版が追加され、スクリーンショットの枚数は2倍に。 Claude Code のカスタムコマンドと Playwright MCP を使って、スクリーンショットの撮影から画像加工、Markdownへの挿入まで自動化しました。 「スクリーンショットは載せない」という選択肢 そもそも、スクリーンショットを載せないことで解決しているサービスもありますよね。 「UIは頻繁に変わるので、テキストだけで説明します」 「最新の画面はログインして確認してください」 アジャイル開発で頻繁にUIが変わる中、ドキュメントのスクリーンショットをメンテナンスし続けるのは大変です。 でも、ユーザー目線で考えると、スクリーンシ
はじめに こんにちは、クラスメソッド製造ビジネステクノロジー部の森茂です。 DGX Spark の記事ではこれまで LLM の推論やファインチューニングを中心に検証してきましたが、128GB の統合メモリが活きるのは言語モデルだけではありません。今回は画像生成モデル FLUX.1 の Dreambooth LoRA ファインチューニングに挑戦してみました。 FLUX.1 は Black Forest Labs が公開した 12B パラメータの画像生成モデルで、複数の大きなコンポーネントが連携する構成が特徴です。メモリをかなり食うモデルなので、DGX Spark の大容量統合メモリとの相性が気になるところ。 今回は NVIDIA 公式の DGX Spark Playbook を使って、DGX Spark 本体の写真で Dreambooth LoRA を学習し、「DGX Spark がいる風景
次のページ
このページを最初にブックマークしてみませんか？
『Developers.IO』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
