ネスケラボ

この記事は、NEXTSCAPE Advent Calendar 2025 の19日目の記事です。 Solution Architect / Chief Technology Office 所属の柳井が担当します。この1年、AIを取り巻く状況は「進化した」という言葉では足りないほど、私たちの仕事の中に深く入り込んできました。単なるツールの追加ではなく、開発の進め方そのもの、さらには業務プロセスの設計思想にまで影響を及ぼし始めています。本記事では、この1年で実際に取り組んできたAI活用を振り返りつつ、これから本格化していく「AIエージェント時代」に、私たちエンジニア／SIerはどう向き合っていくべきかを考えてみたいと思います。1. 模索の1年：AIが「現実解」になるまでちょうど1年前、私はAIを使ったレガシーシステムのモダナイゼーションプラットフォームの検証を行っていました。現行のソースコードやドキュメントをAIに読み込ませ、新しい仕様書とコードを生成する——いわば「既存資産を起点に、次のシステムを組み上げる」試みです。当時は「面白いが、今すぐ実案件で安定して回すにはまだ早い」という結論に至りました。しかし、このとき得た「AIエージェントによるコーディングは、仕様（コンテキスト）を起点にしなければ成立しない」という確信は、今の取り組みの大きな伏線となっています。その後、状況は劇的に変化しました。Cursor をはじめとした開発支援ツールの圧倒的な進化Claude Code のような CLI ベースの強力なツールの登場MCP（Model Context Protocol）サーバーによる外部ツール連携の普及等々これらにより、AIは「精度の高い回答を出す箱」から、「開発フローの中に組み込める実用的なエンジン」へとそのラインを越えたのです。2. 本格的なAI駆動開発への挑戦：コーディングの8割を託す「検証」の段階を終え、私たちは実案件へのAIエージェント投入を決断しました。掲げた目標は、「コーディングの8割をAIエージェントが担う」です。実際に運用してみて改めて浮き彫りになったのは、「仕様の解像度」がAIのパフォーマンスを左右するという事実です。AIエージェント活用の鉄則 仕様が曖昧な場合：AIのアウトプットが安定せず、人間による手戻りが急増する。 仕様が明確な場合：AIは驚異的な速度で安定したコードを生成し、開発のリズムを劇的に加速させる。AIエージェントを継続的に運用するには、場当たり的な指示（プロンプト）ではなく、「仕様を起点とした開発プロセス」への刷新が不可欠であることを痛感しました。3. マインドセットの転換：AIを「チームメンバー」として迎えるAI駆動開発を進める中で、私たちは「AIをツールとして使いこなす」という捉え方そのものを変える必要があると感じるようになりました。いま意識しているのは、AIエージェントを「新しく加わったチームメンバー」として扱い、オンボーディング（受け入れ）を行うという感覚です。■ AIに必要なのは「指示」ではなく「文脈」新しいメンバーがチームに入ったとき、いきなりコードの一部だけを見せて「ここ直しておいて」と丸投げすることはありません。プロジェクトの背景、目指しているゴール、過去の経緯、そして守るべき特有のルール。それらを丁寧に共有して初めて、メンバーは自律的に動けるようになります。AIエージェントも全く同じです。背景と制約の共有： なぜこの実装が必要なのか、どのライブラリを優先し、何を禁止しているのか。情報の整理： 膨大な情報の中から、そのタスクを遂行するために必要なコンテキストを過不足なく提示する。■ 「AIが動ける環境」を整える責任AIは、チームが共有している「暗黙の了解」や「現場の空気」を感じ取ることはできません。だからこそ、こちらが提示するドキュメントやコード、仕様の整理状況が、そのままAIのパフォーマンスの限界値になります。AIエージェントが「何をすべきか」を迷わずに判断し、高い精度でアウトプットを出せる状態をいかに作るか。 それは、指示を出すというよりは、AIが自走できるための「舞台装置」を整えるという、エンジニアとしての新しい設計の仕事に近いものだと感じています。4. 業務プロセスの再構成：エージェントの「専門性」と「アイデンティティ」AIエージェントの真価は、コーディング領域を超え、実業務のプロセスの中に深く入り込んだときに発揮されます。そこで重要になるのは、汎用的なAIを配置することではなく、「特定の業務におけるプロフェッショナル」としての専門性をAIにどう持たせるかという設計です。具体的には、以下の3つの観点から業務プロセスを再構成していく必要があります。■ 特定ドメインに特化した「専門性」の設計AIエージェントに期待するのは、単なる情報の要約や定型処理ではありません。その業務特有の慣習、背景知識、そして専門的な判断基準を反映したアウトプットです。専門知の注入: 汎用モデルに頼るのではなく、業務特有のドキュメントや過去の判断ログを「コンテキスト」として高密度に結合する。自律的なタスク遂行: ルールベースの自動化とは異なり、与えられた専門性の範囲内で「次に何をすべきか」を自ら判断し、情報収集から選択肢の提示までを完結させる。■ 「アイデンティティ（判断軸）」の付与AIエージェントをプロセスに組み込む際、私たちはそのエージェントに「立場」を与えます。これは単なる権限設定ではなく、「アイデンティティ」の設計だと考えています。責任と行動原則: 「何を判断してよいか」「どのリスクを回避すべきか」という、その業務を担う人間と同じレベルの判断軸を明確に持たせる。自律性と安全性の両立: 明確なアイデンティティ（役割・責務）があるからこそ、人は安心してAIに実務を委ね、AIは越権することなく専門性を発揮できます。■ エージェント同士が連携する「エコシステム」先日、Microsoft Ignite 2025 で発表された Agent365 のように、これからは多くの「専門家エージェント」が共存する環境が整っていきます。 一つの巨大なAIを作るのではなく、特定の業務に特化したエージェントを複数配置し、それらが互いに連携しながら一つの大きな業務プロセスを回していく。私たちは、こうした「エージェント間の協調体制」そのものを設計していくことになります。 AIエージェントは、もはや「便利なツール」ではなく、業務知識を実装された「自律的な主体」です。 従来のシステム設計が「データの流れ」を作るものだったとすれば、これからの設計は「専門性と判断の連鎖」を作るものへと変わっていくのではと思います。5. これからのエンジニア、SIerの役割AIエージェントが業務に溶け込む世界において、私たちの価値はどこにあるのでしょうか。それは、単に「システムを構築すること」から、「AIと人が共創する新しい業務プロセスそのものをアーキテクトすること」だと考えています。これまでSIerは、要求された機能をコードに落とし込むことが主な役割でした。しかし、AIエージェントが自律的に動く世界では、私たちの価値は次のような「共創」の領域にシフトしていくと考えています。■ 「機能」の設計から「価値の流動」の設計へこれまでの「ユーザーが入力し、システムが処理する」という固定的なフローを設計する時代は終わります。AIエージェントという新しい主体が、いつ、どこで、どの情報を使い、誰と協働して価値を生むのか。その「価値が流れるプロセス」そのものを設計し、実装することが私たちの主戦場になると考えています。■ AIと人のハイブリッド・オーケストレーションAIエージェントは万能ではありません。だからこそ、AIの得意な「高速な処理や情報集約」と、人間の得意な「意思決定や感性による判断」を、どのタイミングで、どの粒度で融合させるか。その高度なオーケストレーション（調和）が、システムの性能、ひいては企業の競争力を左右してくると思います。■ 「変化し続けるプロセス」を創り続けるAIエージェントを組み込んだ業務プロセスは、一度作って終わりではありません。AIの進化やビジネスの変化に合わせて、プロセスを動的に組み替え、改善し続ける「アジリティ（俊敏性）」をシステムに組み込むこと。この継続的なプロセス開発こそが、これからのSIerが提供すべき価値になってくると考えます。私たちは「作る人」から、「AIとともにビジネスを動かす新しい仕組みの創出者」へ。 すべてを自分で実装するのではなく、AIエージェントが最大限の力を発揮し、人間がより本質的な活動に集中できる「場」を創り出していく。それこそが、これからの時代に求められるエンジニアの姿ではないでしょうか。おわりにAIエージェントを前提とした世界は、まだ始まったばかりです。 だからこそ、ツールのの話にとどまらず、「業務プロセス体制そのもの」をどうリデザインしていくか。より踏み込んだ挑戦をシステム開発の現場で実践していきたいと思います。

AIエージェントと共創する未来：ツールから「チームメンバー」へ、そして業務プロセスの再定義へ

NEXTSCAPE DX推進部 情報システムTeamのKumaです。情シス歴20年の私が、難関資格（CISSP, CCSP）取得のために実践した「勉強の習慣化」の具体的な方法をご紹介します。💡 はじめに：なぜ情シスが資格に取り組むのか情シス歴20年、40代の筆者です。就職以来、一貫して情報システム部門の仕事に携わってきました。5年ほど前、業務の中心であるMicrosoft 365やAzureの知識を深めたいという思いから、本格的に資格取得に取り組み始めました。また、これからの情シス業務にセキュリティの知識は必須だと感じていたため、CISSPやCCSPといった難関資格にも挑戦しました。仕事と並行しての資格勉強は、プライベートの時間を削るため、正直辛いものでした。「早く終わらせたい」という一心で取り組んでいましたが、Microsoftの資格だけでも複数あり、当時の私は「ひとり情シス」として幅広い知識を身につける必要がありました。勉強開始時期の背景: 2020年2月頃、ちょうどコロナ禍が始まり、リモートワークが主流に。これにより、通勤時間や休日の時間を勉強に充てやすい環境になったのは幸いでした。前置きが長くなりましたが、本ブログでは、私がどのようにして難関資格を突破するまでの「勉強を習慣化」したのか、その具体的な方法についてご紹介します。🚀 習慣化の土台を築く：マイクロソフト資格への挑戦最初にマイクロソフトの複数資格に挑戦することで、日々の生活の中に勉強のサイクルを組み込むことを目指しました。1. 最初に「試験日」を確定する取り組みをスタートするにあたり、まずは試験日を決め、目標を明確にすることを徹底しました。これにより、そこから逆算して勉強のスケジュールを立てる土台ができました。2. 脳のゴールデンタイムを活用する私の場合、朝目覚めた直後が最も頭の中が空っぽで、雑念がなく、新しいことを覚えやすいと感じました。朝のルーティン: 毎朝、起きてすぐにコーヒーを淹れ、資格の勉強に取り組むことを「日々のアンカー」としました。3. 隙間時間を徹底活用する出社日や日中も、細切れの時間を逃さず勉強に充てました。通勤時間: 電車の中でテキストを読み込む。昼休み: あえて外で食事を済ませた後、テキストを眺めたり、スマートフォンで問題集を解いたりする。帰宅時: スケジュールに遅れが出ている場合や試験日が近い場合は、帰宅時にも取り組みました。このサイクルを一定期間繰り返すことで、勉強は苦ではなくなり、むしろ合格する喜びから「楽しく」なってくるのを感じました。💼 会社の支援と「不合格」の捉え方なお、当社には資格取得支援制度があり、回数制限はありますが、不合格でも受験料を補助してもらえる制度が整っています。もちろん試験に合格することは目的として重要ですが、たとえ不合格であっても、そこまで試験勉強で学んだことは決して無駄にはなりません。不合格という結果をバネに再勉強することで、知識がより強固に、自分の力として深く身についていくものだと考えています。制度を最大限に活用し、臆せず挑戦できたことも、難関資格への取り組みを続ける上での大きな支えとなりました。🛡️ 難関資格への応用：CISSP・CCSPを乗り越えるコツマイクロソフトの複数試験で勉強が習慣化できた後、いよいよ長期間の取り組みが必要なCISSP試験に挑戦しました。難易度が高く、何度も挫折しそうになりましたが、次のポイントで乗り越えることができました。【補足】 CISSPやCCSPの具体的な学習内容やテクニック、合格体験記は他に数多くありますので、そちらを参考にしていただくのが良いかと思います。ここでは、私が難関資格を継続して学習する上で役立った「習慣化」のコツに絞ってご紹介します。1. 「習慣化アプリ」とゆるいチェック基準習慣化を強力にサポートしてくれたのが、習慣化アプリでした。【習慣化アプリとは】 これは、目標とする行動（この場合は「資格の勉強」）を毎日実行したかどうかを記録するためのアプリです。勉強した日にチェックマークを入れると、その実行記録がカレンダーやグラフで視覚化されます。このアプリを使うことで、「連続記録（ストリーク）を途切れさせたくない」という意識が働き、モチベーションを維持することができました。しかし、最も重要なのは、チェックを入れる条件を厳しくしすぎないことです。継続の鍵: 勉強時間を問わず、「10分しかできなかった日も、1時間できた日も、とにかく勉強をしたらチェックを入れる」とルールを決めました。自己肯定感の醸成: ハードルを上げず、毎日継続することに充実感を得るように意識しました。「昨日は少ししかできなかったから、今日はもう少し取り組もう」という前向きな気持ちが生まれ、結果的に勉強がはかどるようになりました。朝の決まった時間に加えて、できなかった分は隙間時間や夜に取り組むことで、無理なく自分なりの勉強ペースを確立し、難関試験もPASSすることができました。🌟 最後に：習慣は一生の財産マイクロソフトの試験では一発合格とならなかったものもいくつかあり、難関のCISSPやCCSPについても一度では合格できませんでしたが、「勉強を習慣化する」という方法論を確立したことで、最終的に合格を勝ち取ることができました。ここ最近は資格試験の勉強はしていませんが、その時間を別の技術習得や読書の時間にあてています。勉強は一時的なものではなく、一生続くものです。そして、毎日の習慣化に落とし込むことで、それは苦行ではなく、むしろ人生を豊かにする活動へと変わります。この経験が、皆さんのキャリアや目標達成の一助となれば幸いです。

勉強することの習慣化

こんにちは。Device Frontierチームの道下です。普段は業務で XR アプリケーションの開発とマネージャーをやっています。私は毎年その一年で行った中で一番興味があるものを記事にしています。今年はAI の分野では、生成 AI がさらに進化し、ツールとして使う存在から、自律的に動くエージェント へ進化してきました。また、XRデバイスにおいても初のAndroid XR デバイスの登場や Ray-Ban Meta Display の発売など、AI の進化に合わせて人とのインタフェースとなるデバイスも登場しました。こうした流れの中で、今回は Ray-Ban Meta と今月公開されたばかりのMeta Wearables Device Access Toolkit for Android（DAT)を使い、より日常利用を意識したアプリを作り、今後のAI と XR の関わりについて考えてみました。 今回作ったもの今回作ったのは、Ray-Ban Metaからの映像をAIに送って、目の前の食事のカロリーとPFCを教えてくれるものです。音声で料理名と合計カロリー、詳細はスマホ側で表示するようにしました。下記の動画はRay-Ban Metaカメラからの映像をスマートフォンでストリーミングし、ボタンをトリガーとして画像をAIに送ることでカロリー・PCFを判定するものです。 2年前にMeta Quest 3 を使って、AIと会話したり、見ているものの説明を返すアプリを作りました。その際は、Quest 3 のパススルー映像に制約があり、スマートフォンを介した構成を取っていました。blog.nextscape.net今回のアプリも内容は似ていますが、メガネ型デバイスになったことでより体験ハードルが下がりました。 Ray-Ban Metaとはデバイスについて少しだけ説明します。Ray-Ban Meta は、Meta と Ray-Ban が共同で開発したスマートグラスです。普通のメガネに近い見た目ですが、カメラやマイク、スピーカーを内蔵しており、装着したまま撮影や音声操作ができます。日本ではまだ正式に販売されていないため、私はプライベートでイギリスに旅行した際に購入しました。（技適は申請済みです）これまでは一人称視点での撮影や音楽を聴くといった用途が中心でした。しかし今月、DATが公開され、Ray-Ban Meta のカメラ映像をスマートフォンアプリで取得できるようになりました。 実装についてアプリの実装はすべて Claude Codeで行いました。私自身Kotlinは触ったことないので、公式サンプルをベースとして機能追加をするという形で指示をしました。Claude Codeが実装からapkを作るまでやってくれるので、私はスマホをつなげてadb installを打つだけです。アプリフローも非常にシンプルで、Ray-Ban Meta のカメラ入力を取得映像から画像を切り取り、AIにとカロリー・PFCを返すようにリクエストレスポンスから音声とテキストでユーザーにフィードバックとなっています。 XRとAIの関わりを考える今後、グラス型デバイスやその他デバイスがスマートフォンのようにどんな人でも使うようになっていくのは、（価格や日本での展開次第な部分もありますが）近い将来必ず来ると思っています。その時に備えて日常的に使いやすいアプリを実際に作り、今試しておくことには意味があると考えています。今回は料理の情報を表示するアプリでしたが、例えばナビゲーションのように目的地まで案内するものや、行動を補助するような用途など、応用できる場面は多いはずです。個人的には、将来的には「一人につき一つの パーソナライズされたAIアシスタント」が存在する世界になれば楽しそうだなと思っています。またXR デバイスは、音声、空間情報、一人称視点の映像、手や視線といった多様な入力を扱えるため、そうした AI と非常に相性が良いインタフェースだと思っています。 今後の開発について現在はユーザー操作をトリガーにして AI にリクエストを送る形になっていますが、今後は AI 側からフィードバックを返すプッシュ型の機能を追加開発しています。具体的には、Ray-Ban Meta から取得した映像の中に料理が映ったことを検知したタイミングで自動的にリクエストを送り、結果を返します。このように自然に情報が返ってくる体験がAI スマートグラスらしい使い方だと考えています。 おわりに今回は、Ray-Ban Meta と AIを使って、日常利用を意識したアプリを一つ作ってみました。今後もAIとXRの進化を追っていきたいと思います。 最後まで読んでいただきありがとうございました。ネクストスケープでは共に働く仲間を絶賛募集中です。ご興味ある方は下記のURLからお気軽に。recruit.nextscape.net

AIスマートグラスアプリ開発からAIとXRの関わり方を考える

はじめにこんにちは、今年の4月に新卒で入社した山中です。この記事は「NEXTSCAPE - Qiita Advent Calendar 2025 - Qiita」の16日目です。最近では、生成AIによって基礎知識が十分でなくてもある程度の成果物が作れてしまう場面が増えてきたと感じます。とても便利な一方で、自分の理解が追いつかないまま作業だけが進んでしまうこともあると思います。私は新入社員ということもあり、基礎知識がまだ十分でないことも多く、分からないまま進むのは少し不安に感じます。そこで、AIを活用しつつ理解も意識しながら学習をしています。この記事では、その際に私が使用している「基礎理解に使うためのAIプロンプト」をまとめています。IT分野に関わらず、資格勉強などにも使える内容になっていると思いますので参考になれば幸いです。基礎理解に使うAIプロンプトプロンプト一覧この記事で説明するプロンプトを表にまとめています。次の節で解説していきます。No.プロンプト使いどころ1〇〇を日常生活で例えながら教えて抽象的な概念をイメージしやすくしたいとき2△△について段階を踏みながら教えて情報量を整理し、自分のペースで理解したいとき3私の解釈は□□というものだけど、〜〜自分の理解の整理や不足点・相違点の確認をしたいとき4私の意見・質問を要約してから回答して自分の伝えたい内容を整理・確認したいとき5ここまでの私からの質問と回答をまとめて学習内容をまとめたり、振り返りたいときプロンプト詳細１.難しいことを例えてもらう勉強していると、そもそもの概念や考え方が難しくてうまく進まないことがあると思います。そんなときに、抽象的な概念を日常の動きや物事に例えて説明してもらうことで、イメージしやすくなり段階的に理解を深めることができます。例）「クラウドについて日常生活で例えて教えてください」↓※回答のまとめ部分のみ抜粋2. 段階を踏みながら説明してもらうAIからの説明は、想像よりも多くの情報が一度に返ってくることがあります。そのまま受け取ると理解が追いつかないことがあるため、説明を段階ごとに区切ってもらう方法があります。例えば、「まず最初の部分だけ教えてください」「次の内容に進んでください」といった指示を出すことで、説明を細かく分けてもらえます。こちらが「次に移ってください」と伝えるまでは、AIが先の内容に進まないため、自分のペースで理解を深められます。例）「クラウド技術について段階を踏みながら教えてください。まず最初のところから。」↓※回答のまとめ部分のみ抜粋3. 自分の解釈を伝えて確認をするAIに質問していると、つい自分の言葉で考えを伝える機会が少なくなることがあります。そのため質問をするときには、まず「自分はこう解釈している」と伝えるようにしています。こうしてからAIに質問をすることで、自分の考えが整理できる不足している知識を明確にできる理解のズレが見つけやすくなるといった効果があります。また、会話の中で「私はどこが分かっていないように見えますか？」とAIに逆質問したり、「100点満点で採点して」と伝えて、理解度をチェックしてもらうのも有効です。例）「私の解釈では、なんでもクラウドを使ったらいいというものなのですが、この考えは正しいですか？」↓※回答の冒頭のみ抜粋4. 自分の意見・質問を要約してから回答してもらうAIと話していると、自分が何を伝えたいのか、その意図が曖昧になってしまうことがあります。そんなときは、自分の意見や状況をいったんAIに要約してもらってから回答してもらうようにしています。例えば、「私の意見をまとめてから回答してください」「私の質問を要約してから回答してください」といった指示を出すことで、こちらの意図を簡潔に整理してもらえます。AIが要点をまとめてくれることで、自分が伝えたいことを整理できる現状や課題を明確化できるといった利点があり、やりとりをスムーズに進めやすくなります。例）「プログラミング言語は多すぎます、１つで十分だと感じます。私の意見・質問を要約してから回答してください。」↓※回答の冒頭のみ抜粋5. 自分が聞いた内容をまとめてもらうAIとの会話が続くと、話したことや分かったことを振り返るのが大変になることがあります。そんなときは、これまでの会話内容をAIにまとめてもらうようにしています。例えば、「ここまでの会話の内容をまとめてください」「私が質問したことと、その回答をまとめてください」といった指示を出します。これによって、新しく知ったことや分かったことを整理でき、次の勉強につなげられると思います。例）「これまでの私の質問とその回答を表でまとめてください」↓※回答の冒頭のみ抜粋おわりに今回紹介したプロンプトは、どれも私自身が学習の中で試しながら使ってきたものです。 AIを使うことで作業が楽になる場面も多いですが、理解を深めるには「自分で考えて言語化する」ことが必要だと感じています。AIとうまく役割分担をしながら、無理なく学習を進めて理解を深めるきっかけになれば嬉しいです。

新入社員が基礎理解に使うAIプロンプト5選！

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。当社が要件定義のツール、フレームワークとして利用しているものとしてRDRAというものがあります。以前このネスケラボでも私の方で幾つか記事を書かせていただきました。もしお時間許せば先に以下の２つの記事だけでも読んでいただいた方がより興味深く読めるかもしれません。blog.nextscape.netblog.nextscape.netあらためて説明しておきますと、このRDRA、こちらは株式会社バリューソースの代表、神崎善司さんという方が考えたものでして、このフレームワークに従って要件定義を行うことである程度のレベル・粒度で資料を作成することができます。そして神崎さんはこのAIの時代においてRDRAを更にバージョンアップさせる試みを行っております。RDRAはその業務を全く知らない人でもある程度要件定義ができるようになるためのフレームワークなわけですが、お客様とのコミュニケーションを必要とするものであるため、業務知識が全くのゼロベースとなるとお客様にとっても自身にとっても負担が大きいものになります。その部分をAIを使うことで軽減させて、更に進化させることができるのではということで私自身も非常に期待しつつ、神崎さんの発表を毎回楽しみにしておりました。そして先日公開されたのがRDRA Agentと呼ばれるものになります。github.com具体的な内容はこの後説明させていただきますが、こちらはClaude Code上で動作するものになります。そして、別の有志の方がこのRDRA AgentのCursor版を作成してくれました。github.com私自身、Cursorをメインに使っていることもあり、早速こちらを使わせていただきまして、今回この記事でその感想を書かせていただければと思います。使用するにあたっては上記リポジトリからZIPでダウンロードしてもらうか、あるいは以下のリリースページからZIPでダウンロードし、解凍してください。github.comそして解凍したプロジェクトをCursorで開きます。モデルはこれでなければというのは無いのですが、今回はComposer1でいきます。というのも結構時間がかかりますのでまずはお試しで「どういった流れでどういった出力が行われるのか見てみたい」ということであれば高速なモデルがお勧めです。解凍したプロジェクトのファイル構成は以下になります。RDRAAgentCursor/├── .cursor/             # Cursorのコマンドとルールフォルダ├── 0_RDRAZeroOne/       # RDRAZeroOneの出力フォルダ├── 1_RDRA/              # RDRAの出力フォルダ├── 2_RDRASpec/          # RDRASpecの出力フォルダ├── RDRA_Knowledge/      # ナレッジベース├── Samples/             # サンプルプロジェクト├── .gitignore├── 初期要望.txt├── 妥当性検証環境.csv└── README.mdまずはルートディレクトリに初期要望.txtを用意します。お試しで。。ということであれば既に同じ場所にサンプルファイルがありますので、それをそのまま使ってみてください。そのサンプルとしての初期要望.txtでは訪問介護システムとして以下のような記述があります（文字が小さくてスミマセン。ブラウザの拡大機能等で見ていただければ。。）。他にもSamplesフォルダ配下にはいつものRDRAのサンプルとして挙げられている図書館システムと貸し会議室SaaSの初期要望.txtがありますので、自身の考えたシステムで利用する場合の参考にもしていただければと思います。要件定義さて、まずは「要件定義」です。Cursorのプロンプト入力欄で「/」（スラッシュ）を入力するとRDRAAgentのコマンドが出てくるはずです。そこで「/01-ZeroOne/01-フェーズごとの要件定義」または「/01-ZeroOne/01-一括要件定義」を選んでください。お試しの場合、とりあえずは「一括要件定義」でいいと思います。以下のようにフェーズ１からフェーズ５までの作業が実行されます。「0_RDRAZeroOne」フォルダ配下には更にフェーズ毎にフォルダが切られておりまして、各フェーズに応じて必要なファイルが作成されていくのがわかります。フェーズ１から５まで終わった結果が以下になります。アクターや外部システム等、RDRAを知っている方であればおわかりになると思いますが、RDRAで扱う情報が出力されているのがわかります。例えば「1_RDRA アクター.tsv」は以下のようになります。そのシステム、今回は訪問介護システムに関係するアクターが挙げられています。要件定義とはいえ、基本的にはRDRA Agent、つまりAIでアクターや業務、状態モデル等の洗い出しを行ってくれますので、こちらはチェックするのみとなります。とはいえ、足りない部分があれば一旦初期要望.txtに戻り、追記を行って再度要件定義を実施します。RDRAにおけるイテレーションもし、最初の初期要望.txtにあまり情報が無かった場合、例えば私が要件定義を依頼されたもののの、あまり内容が思い浮かばない場合があると思います。今までのRDRAのやり方であればお客様との打合せで直接インタビューを行うのですが、お客様としてもせめて叩き台が無いと話しづらいということもあるかと思います。そういった場合は再度ここまで出力してもらった内容を元にAIに肉付けしてもらうのも手です。例えば図書館のシステムで同様にフェーズ１～５を実行し、それを元に再度初期要望.txtを見直してもらった結果が以下になります（赤い行が削除、緑が追記です）。「背景」も以下の１行だけだったのが、「市内の全図書館を一括で管理するシステム」以下のように色々と肉付けされていますので、これを元に再度ステークホルダーであるお客様と話し合い、どれが合っているか、間違っているかを直していくと更に詳細なものが出来上がります。「市内の全図書館（中央館および分館）を一括で管理するシステムを導入し、蔵書・会員・貸出状況を全館で共有可能とする。現状は館ごとに業務が分断されており、貸出・返却・予約・蔵書棚卸・蔵書補充などの業務が人手に依存しているため、職員の負担が大きくなっている。」つまり、図書館業務に置いてあまり詳しくなくともAIの力を借りることで「とっかかり」ができるわけです。それが合っているかどうかは実はあまり重要ではなく、RDRAは「コミュニケーションツール」でもありますので、このような形で叩き台を作り、それを元にお客様から「インタビュー」を行い、要件をより詳細に詰められるかどうかが重要となります。そしてまたフェーズ１～５を実行し、より詳細な資料を作成していき、この後説明するRDRAGraph等でお客様と認識が合っているかを詰めていきます。インタビューとインサイトここでちょっと横道に逸れますが、上で書いたように当社はお客様と要件定義を行うにあたっての聞き取りを「インタビュー」と呼んでいます。聞き取りであれば「ヒアリング」でもいいじゃないかと思われるかもしれませんが、インタビュー＝Interview、「Inter」は「間」、「View」は見えているもの。つまり、お互いの間で見えているものが違うので、それをRDRAモデルなどで「合ってるよね？」と確認しながら進めていく——そのため「インタビュー」と呼んでいます。そしてもう一つ、インタビューで大切にしていることがあります。それは、お客様の中に融け込み、お客様の目線で物事を見るという姿勢です。皆さんもご経験があるかもしれませんが、要件定義の段階ではお客様はまだ正解を知らず、その要望が明確になっていないことがあります。そのため、インタビューした内容を元に我々から「インサイト」、つまり洞察した結果を描き出し、お客様にお見せする。このとき、お客様の立場に立てていなければ、的外れなインサイトになってしまいます。そのために必要なのが「コミュニケーション」であり、そのためのツールとしてRDRAのような要件定義手法が存在すると思っています。繰り返しになりますが、RDRAやRDRA Agentはあくまでフレームワークやツールであり、重要なのは如何にお客様とコミュニケーションを取り、インタビューを行い、インサイトを提示できるかです。AI自体もそのための補助的な存在であり、プログラミング同様、要件定義を全て任せることはできません。例えば、お客様がプロトタイプを触っていて「なんとなく使いにくい」とおっしゃったとき、その言葉の裏にある本当の課題——業務フローの問題なのか、UIの問題なのか、あるいは組織間の調整の問題なのか——を見抜くには、表情や声のトーン、言葉の裏等、様々な情報を読み取る必要があります。さらに言えば、お客様自身がまだ言語化できていない潜在的なニーズを引き出すには、信頼関係の構築が不可欠となります。こうした「人と人との間でしか生まれない理解」は、現時点のAIでは代替できないと考えています。そういう意味では「EQ（心の知能指数）」というのも重要なファクターだと思っているのですが、これはまた別の機会でお話しできればと思います。RDRAGraphへの取り込みさて話は戻りまして、次にRDRA2.0で考えられたRDRAGraphというツールがありますので、そのツールに合わせて今まで作成されたデータを成形し、RDRAGraphで表示できるようにします。コマンド「/02-RDRA/01-RDRAGraphを表示」を選択し、実行してみてください。内部でデータが生成され、外部ウェブサイトとして用意されたRDRAGraphの画面が立ち上がります。ここでちょっとつまづくかもしれないポイントがありまして、「1_RDRA」フォルダ配下の「関連データ.txt」の内容がこの画面が出た時点でクリップボードに貼り付けられている（コピーされている）必要があります。そうしないと上のスクリーンショットのダイアログにある「クリップボードから読み込み」ボタンを押しても何も表示される「？」状態になってしまいます。一応プロンプトでのやり取りを見ているとコピーのコマンドは実行されているようなのですが、私の環境ではうまくいきませんでした。そういった場合はCursorで「関連データ.txt」を開き、自分でコピーした上で上記ブラウザのダイアログ「クリップボードから読み込み」をクリックしてもらうのが良いと思います。そうすると以下のようにRDRAのコンテキスト図が表示されます。更に上記図の「サービススタッフ管理コンテキスト」をクリックすると別ウィンドウで以下のようにそのコンテキストにおけるユースケースや状態が表示されます。RDRA定義の妥当性の検証もできます。では、更に論理データ構造やUIも検討してもらいましょう。仕様の作成「/03-RDRASpec/01-仕様の作成」を実行します。すると以下のような論理データモデルがMermaidで出力されます。Mermaidビューワーで見れば以下のように論理データ構造がグラフィカルに表示できていることがわかります。あとは「03-画面編集の表示」を実行すると以下のような画面編集というページがローカルサーバーで起動します。これはRDRA1.0の画面モデルと同じものといいますか、正確にはそれを更に進化させたものになります。右側の一覧から例えば「訪問介護計画」ー＞「スケジュール調整」を選択すると「サービススタッフ要望確認画面」の表示内容、行える操作、対象データのCRUDが一目でわかるようになっています。画面モデルはRDRA2.0では使われなくなったものなのですが、個人的にはあった方が良いのではないだろうかと思っていたものでして（最初に挙げた過去記事の「RDRAを使った要件定義その２　RDRA1.0と2.0の違い」でも触れています）、これがWeb画面上でより詳しく、わかりやすく参照できるようになったのは嬉しかったです。終わりに他にも色々と出力されているものについてご紹介したいと思うのですが、RDRAAgentの全てをこの記事だけで紹介することは難しいため、一旦ここまでとさせてください。RDRAは様々な図（モデル）＝視点で要件、仕様を俯瞰し、辻妻が合わなければそこを修正して。。という流れを繰り返し行う必要があるのですが、各モデルにおいて抜け漏れを見つけるたび、あるいは仕様が変わるたびにアップデートする必要があり、それが負担となっていたことがありました。しかしながらRDRAAgentを使うことで、そのイテレーションを素早く行うことができるわけです。そしてAIの力を借りて仕様の抜け漏れやそもそもの業務知識の不足を補うこともできます。是非皆さま使ってみてはいかがでしょうか。最後に、要件定義を経験された方には言わずもがなではございますが、要件定義自体は非常に難しいものであり、RDRAやRDRA Agentが銀の弾丸になるわけではありません。とはいえ、拠り所や手がかりが無ければ要件定義はますます困難なものとなりますので、RDRAやRDRA Agent（AI）がそのとっかかりとなり、今皆様が行っている、あるいは行おうとしている要件定義が少しでも楽なものに、そして少しでも成功に近づいてくれれば嬉しい限りです。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

RDRAAgentで要件定義

こんにちは。プロダクトマネージャー兼エンジニア兼UIUXデザイン推進担当として越境気味に働いている照山です。みなさんは「UI/UX」という言葉を聞いて、反射的に誰の顔を思い浮かべるでしょうか？多くの人は、Figmaを巧みに操るデザイナーの顔を思い浮かべるはずです。「ユーザーインターフェース（UI）」「ユーザーエクスペリエンス（UX）」言葉の響きからして、見た目や使い勝手、感性に関わる領域であることは間違いありません。だからこそ、「それはデザイナーの領分であり、エンジニアやPMが口を出すのは野暮だ」　　開発現場には、そんな空気が漂っていないでしょうか。しかし、エンジニアとして、マネージャとしてサービス・プロダクトづくりに長く関われば関わるほど、ある違和感が湧き上がってきます。「UI/UXは、本当にデザイナーだけの仕事なのか？」もっと言えば、顧客の要件を最初に定義するPMや、システムが動くリアリティ（制約）を誰よりも知っているエンジニアこそ、UI/UXの設計プロセスのど真ん中にいるべきではないのか？この問いは、単なる役割分担や「仲良くやろう」という精神論の話ではありません。生成AIが当たり前に存在する2020年代後半において、プロダクト開発における「価値の作り方」そのものが構造的に変化していることに起因する帰結です。今回は、アドベントカレンダーという機会を借りて、「なぜ今、エンジニアとPMがUI/UXに越境すべきなのか」「AI時代におけるBTC（Business/Technology/Creative）人材とは何か」について、少し解像度を上げて言語化してみたいと思います。「分業」というシステムが、プロダクトを歪めてきた歴史まず、私たちが無意識に受け入れている開発の前提を疑うところから始めましょう。ソフトウェア開発は長らく、高度な「分業」によって支えられてきました。 PM： 「何を作るか（What）」を定義し、進行管理をする デザイナー： 「どう見えるか（How）」を具現化する エンジニア： 「どう動かすか（Implementation）」を実装する マーケター： 「どう売るか（How to sell）」を考えるこの分業システムは、確かに効率的でした。それぞれの専門家が自分の領域に閉じて、深掘りすることで、生産性とクオリティを担保してきたのです。工業化社会のモデルをそのままソフトウェア開発に持ち込んだ成功体験と言えるでしょう。しかし、プロダクトが複雑化し、ユーザーの目が肥えた現在、この分業システムの「負の側面」が無視できないレベルで肥大化しています。その最大の弊害が、職種間の「翻訳コスト」と「情報の劣化」です。PMの頭の中にあった「顧客の課題」が、ドキュメントになる過程で少し削ぎ落とされる。そのドキュメントを読んだデザイナーがUIを作る過程で、PMの意図とは少しズレた解釈が混じる。出来上がったデザインを見たエンジニアは、「この挙動は今のDB設計だとパフォーマンスが出ない」と悩みつつ、納期に追われて無理やり実装する。この伝言ゲームの結果、何が生まれるか。「誰も意図していなかった、顧客にとっての価値を最大化したいという目標からズレてしまったプロダクトやサービス」です。さらに深刻なのは、分業が組織の中に「見えない境界線」を引いてしまうことです。「画面の使い勝手が悪いのは、デザイナーのセンスの問題だ」「要件が決まらないのは、PMの優柔不断のせいだ」「実装が遅いのは、エンジニアの技術力不足だ」こうして、本来は「ユーザーに価値を届ける」という共通のゴールを持っていたはずのチームが、いつの間にか「自分の担当範囲を守る」ことに必死になる。UI/UXは、このセクショナリズムの犠牲に最もなりやすい領域です。なぜなら、UI/UXとは「ビジネス要件（Why）」と「技術的制約（How）」と「表現（Look）」が交差する交差点そのものだからです。本来、職種をまたいで扱われるべき「不可分な領域」を、無理やり分業構造に押し込めたことで、プロダクト開発が歪んでしまうのです。AIが「専門性の壁」を溶解させた「分業の弊害なんて、昔から言われていることじゃないか」そう思われるかもしれません。しかし、ここ数年で状況は一変しました。言うまでもなく、生成AIの登場です。AIは、これまで専門家にしか扱えなかった領域への参入障壁を、劇的に引き下げました。専門性の「独占」が終わったのです。これまでは、エンジニアがデザインの意図を理解しようと思えば、デザインの基礎理論から学ぶ必要がありました。しかし今は、UIのスクリーンショットをAIに投げれば、レイアウト、フォント、配色などの意図を即座に解説してくれます。逆に、デザイナーが実装のリアリティを知ろうとした時、以前ならエンジニアにおそるおそる質問する必要がありました。しかし今は、Figmaで作ったデザインをコードに変換し、「このUIを実現するのに無理がある箇所はあるか？」とAIに問えば、レンダリングコストやデータ構造の矛盾を指摘してくれます。PMやマーケターがSQLを知らなくても自然言語でデータを抽出できるし、手書きのメモからプロトタイプを生成できる。つまり、「特定の領域は、その専門家に丸投げしないと何もできない」という前提が崩れたのです。細かい作業はAIが高速に補助してくれます。その結果、人間が担うべき役割は、「作業」から「判断」へ、そして「前後の工程への関与」へとシフトせざるを得なくなりました。これは、エンジニアにとっては大きなチャンスであり、同時にプレッシャーでもあります。「コードだけ書いていればいい」時代は終わり、「コードによってどんな体験を生み出すか」まで責任範囲が広がったことを意味するからです。デザイナーは、すでに「越境」し始めているこのパラダイムシフトにいち早く気づいているのは、実はデザイナーたちかもしれません。UIUXの現場で最先端を走るデザイナーの話を聞くと、彼らの関心が「ビジュアルのクオリティ」だけに留まっていないことが分かります。AIが単純作業を代替し、例えば基本的なログイン画面などをゼロから制作したり、複雑な画面のレイアウト構造のバリエーション出しなども提案してくれるおかげで、彼らの脳のリソースが空きました。その空いたリソースで、彼らはどこに向かっているか？「ビジネス」と「エンジニアリング」への越境です。「この画面遷移を作ることで、KPIであるCVRはどう変化するのか？」「このリッチなアニメーションは、Reactのコンポーネント設計として再利用可能なのか？」「バックエンドのAPIレスポンスを待つ間、ユーザーの不安を取り除くスケルトンスクリーンはどうあるべきか？」彼らはすでに、ただの「絵作り」の人ではありません。顧客の期待、エンドユーザーの体験価値、ビジネスの数字まで鑑みて、実装のフィジビリティ（実現可能性）を考慮した設計を提案しようとしています。ここで、私たちエンジニアやPMは考えなければなりません。「デザイナーがこちら側に歩み寄っているのに、私たちは彼らの領域に歩み寄らなくていいのか？」と。デザイナーだけが越境し、エンジニアやPMが「それは自分の仕事じゃない」と壁を作ったままであれば、パワーバランスは不均衡になります。何より、プロダクトとしての強度が上がりません。UI/UXは「要件」と「実装」と「価値」の変換装置少し視点を変えて、そもそも「UI/UXデザインとは何か」を再定義してみましょう。優れたプロダクトには、必ず以下の3つの文脈が統合されています。Business（ビジネス）： 顧客の課題は何か？ どうやって収益を上げるか？Technology（テクノロジー）： 技術的に何が可能か？ 運用コストやパフォーマンスは？Creative（クリエイティブ）： ユーザーはどう感じるか？ 使い心地は？この3つは、放っておくと互いに矛盾し合います。ビジネス側は「画面にあらゆる情報を詰め込みたい」と言い、エンジニアは「処理が重くなるからシンプルにしたい」と言い、デザイナーは「余白を活かした情緒的な体験にしたい」と言う。この矛盾を調停し、一つの形としてユーザーに提示するのがUI/UXデザインです。つまり、UI/UXデザインとは、ビジネスの論理とエンジニアリングの論理を、ユーザーが使いやすい・使いたいと思える形に「変換・翻訳」するプロセスです。この変換作業を、デザイナー一人に押し付けるのはあまりに酷ではないでしょうか？ビジネスの深い文脈を把握していないデザイナーに「いい感じの画面にして」と頼んだり、DBの構造を知らないデザイナーに「サクサク動く画面にして」と頼むのは、構造的に無理があります。だからこそ、ビジネスを知るPMと、技術を知るエンジニアが、UI/UXデザインのプロセスに積極的に参画しなければならないのです。BTC人材という「新しい標準」へのアップデートこの構造を説明する上で、「BTC人材」というキーワードに触れておきたいと思います。Business、Technology、Creative。この3つの領域を統合できる人材のことです。誤解してほしくないのは、BTC人材とは「全ての領域のプロフェッショナルになれ」という意味ではないということです。そんなことは物理的に不可能ですし、目指すべきでもありません。「自分のコアとなる専門性（軸足）を持ちながら、隣接する2つの領域の言語を理解し、橋渡しができる人」を指します。エンジニアなら：技術（T）を軸足に持ちつつ、ビジネス（B）の数字の意味を理解し、クリエイティブ（C）の原則を踏まえて実装できる。PMなら：ビジネス（B）を軸足に持ちつつ、技術（T）的な実現可否の勘所を持ち、クリエイティブ（C）のプロトタイプで対話できる。UI/UXは、まさにこのBTCの中心に位置する概念です。もしあなたがエンジニアなら、エラーメッセージ一つとってもUI/UXに関与できます。「System Error: 500」と表示するのは、技術的には正解ですが、UI/UXとしてはNGです。ユーザーが何をしていいかわからない（ビジネス機会の損失）からです。ここで、「通信が不安定です。しばらく待ってから再読み込みしてください」と表示し、リトライボタンを置く。これは、技術（エラーハンドリング）とクリエイティブ（マイクロコピー）とビジネス（離脱防止）を統合した、立派なUI/UXの仕事です。他にも読みやすくデザインガイドラインに従った文字サイズや行間にし、エラーという意味を持たせた色やアイコンで表現するなども考えられます。「UI/UXはデザイナーの仕事」と切り捨ててしまうエンジニアは、このエラーメッセージの価値に気づけません。逆に、ここに関与できるエンジニアは、コードの品質だけでなく、プロダクトの価値そのものを高めることができます。結論：なぜ今、“UI/UXは全員の仕事”になるのかここまでの話を整理すると、UI/UXを「全員で」扱うべき理由は以下の3点に集約されます。分業の限界：従来の分業スタイルはコミュニケーションコストを高め、プロダクトの体験を分断させてしまった。「伝言ゲーム」をやめて、全員が同じテーブルで話せる必要がある。AIによる越境の容易化：専門的なツールや知識の習得コストがAIによって劇的に下がった。「作れないから関わらない」という言い訳は通用しなくなり、誰もがプロトタイピングや検証に関与できるようになった。統合の必要性（BTC）：プロダクトの価値は、ビジネス・技術・クリエイティブの統合地点に生まれる。その統合地点こそがUI/UXであり、誰か一人の手には負えない複雑さを持っている。越境するチームこそ最強最後に、これからのチームのあり方について触れておきたいと思います。AI時代に最も高いパフォーマンスを発揮するのは、個々の領域だけに特化したスーパースターが集まったチームではなく、職種を越えて「つながる力」を持ったチームだと思います。PMが、AIを使ってざっくりとしたワイヤーフレームを描き、要件を視覚的に伝える。エンジニアが、そのワイヤーを見て「この体験を実現するには、今のAPIだとレスポンスが遅くなるから、先にデータをプリフェッチしよう」と、体験ベースで技術選定をする。デザイナーが、技術的な制約を理解した上で、「それなら、読み込み中はこういうアニメーションで見せれば体感速度は落ちない」と提案する。そして、全員でプロトタイプを触りながら、「ここは使いにくい」「ここは気持ちいい」と意見を出す。これらがシームレスに行われたとき、プロダクトは初めて「切れ目のない、一つの体験」としてユーザーに届くのではないでしょうか。「越境」とは、自分の専門性を捨てることではありません。自分の専門性を核にしながら、その価値を最大化するために外側に手を伸ばすことです。そして、エンジニアやPMが手を伸ばす先として、UI/UXは最も効果的で、面白い領域だと思っています。明日からできる、小さな一歩この記事を読んでいただいたエンジニアやPMの方で、もし少しでも「越境してみようかな」と思っていただけたなら、今日からできる小さなアクションがあります。Figmaのリンクを開いてみる：デザイナーからもらった画面デザインを見るときに、なぜそのボタンがそこにあるのか、左右の余白と上下の余白が異なるのはなぜか、レイアウトの必然性？などを考えてみてください。優れたデザイナーは感性ではなく根拠に基づいて画面デザインをしています。普段使っているアプリ画面でも同じように考えることはできます。AIに「なぜ？」と聞いてみる：良いと思ったサービスのスクリーンショットを取って、ChatGPTやGeminiやClaudeに投げてみてください。「なぜこのボタンはここにあるのか？」「画面構成についてUIUXデザイン上の意図を解説して」と聞けば、驚くほど論理的な解説が返ってきます。それをチームの雑談で共有するだけで、UIの視座は上がります。「エラー」を「対話」と捉え直す：例外処理のコードを書くとき、「これはシステムのエラー」ではなく、「ユーザーとの対話が失敗した状態」と捉え直してみてください。ユーザーにどんな言葉をかければ安心するか？ それを考えることは、立派なUXデザインです。UI/UXは、決してデザイナーだけの領域ではありません。私たちエンジニアやPMがそこに踏み込み、AIを相棒にしながら、職種の壁を越えて議論する。そうやって作られたプロダクトやサービスが、これからの時代の「標準」になっていくはずです。ネクストスケープでは、そんな「越境する開発」を楽しんでいければと思っています。

UI/UXはデザイナーだけの仕事じゃない。PMとエンジニアが「越境」すべき理由

こんにちは。SAの鈴木です。今年もアドベントカレンダーに参加する機会をいただいたので、イキナリですが「人間理解」についてエンジニアチックに考えてみたいと思います。qiita.comはじめに：AIの熱気の中でふと思うこと課題：なぜか伝わらない相手伝わらない理由①：自分と相手のレンズの違い伝わらない理由②：自分がデフォルトのまま伝える方法：人間を理解するついでに：プロジェクト推進についても考えてみる顧客との対話で感じることプロマネとしてできることは何かなんだかんだいっても相手を理解するのが大事おわりに：技術も人間も大事 はじめに：AIの熱気の中でふと思うこと最近、生成AIをどう活用するかといった話題をよく耳にします。プロンプトの工夫、生成AIツールの組み合わせなど、エンジニアとして「どう使いこなすか」を考えるのは当然の流れだと思います。もちろん、ネクストスケープでも活発に意見交換をしています。※生成AIについての情報は、弊社ブログにもたくさんの情報がありますので、ぜひご覧ください。そんな毎日を過ごしている中で、最近こっそり思っていることがあります。AIが進化しても、人間同士のやり取りでつまずく人はあまり減ってないような…AIを使いこなすのと同じくらい、人間を理解することもエンジニアリングなのではないか。 課題：なぜか伝わらない相手「理屈は正しいのになぜか伝わらない」エンジニアに限らず、このような思いを一度は経験したことがある方が多いのではないでしょうか。でもそれを「自身のおしゃべりセンスの問題」と片づけるのは、ちょっともったいないですし、ましてや「相手の理解度の問題」と決めつけてしまったら、そこで自分の学びが終わってしまいます。もし、噛み合わない理由が「人間の脳のクセ」にあるのだとしたら…そう考えると、まだ改善の余地がある気がしませんか？ 伝わらない理由①：自分と相手のレンズの違い私たちは、これまでの経験をもとに作られたレンズ越しに世界を見ているのだと思います。もちろん、相手は相手のレンズを通しています。このレンズには、単に「目の前に見えている情報」だけでなく、その人が当たり前としている「前提」や「判断基準」も含まれています。つまり、同じ出来事を見ていても、人によって最初から見える世界が違う。そう考えると、相手に伝わらない理由のひとつはレンズの違いなのかもしれません。視点を変えると、うまく伝わらないのは言葉（相手へのインプット）だけの問題ではないと考えられそうです。プログラムが入力だけでなく、データやロジックでもアウトプットが変わるように人間も言葉（入力）だけでなく、経験・価値観（データ）や思考パターン（ロジック）で結果が変わります。この前提に気づかずにやりとりをしたら、ただ正しいことを言っても（入力が正しくても）想定通りに伝わらない、という現象が起きるのかも。 伝わらない理由②：自分がデフォルトのままところで、自分の「思考パターン」や「伝え方」などは、意外とデフォルト設定（無意識）のままになっていると思いませんか？何をどう考えるのか、どんな言い回しを選ぶのか、どんな情報を重視するか、それらのほとんどが無意識に決まっているように思います。エンジニアなら、デフォルト設定を理解せずに運用する怖さは想像がつくと思います。人間も同じで、自分の設定（クセ）に気づかないまま他人と接すると、思わぬ食い違い（バグ！？）が起きる気がしませんか？自分も相手も全く悪気がなくても、衝突やすれ違いが起きるのは、その設定の違いと考えられるのかも…これも、伝わらない理由のひとつになりそうです。 伝える方法：人間を理解する「人間理解」というと、"コミュ力" や "やさしさ" といった、ふわっとしたものを想像してしまいますが、実際はもっと構造的に考えられるような気がします。相手がどんな前提で考え、どんな情報を処理しているのか調査（観察）自分の言葉が相手にどう解釈されやすいか検証もし齟齬が起きたらデバッグ調査・検証・デバッグみたいなのって、エンジニアの得意分野ではないでしょうか？そう考えると、「人を理解する」ことって案外エンジニアリングに近いのでは、と私は思います。 ついでに：プロジェクト推進についても考えてみるネクストスケープには「顧客と溶ける」というすばらしい文化があります。そして、我々は常日頃から「インタビュー」の大切さを社長から伝えられています。顧客との対話で感じること顧客とお話をしていると、顧客自身が「本当の思い」や「本質的な困りごと」をそのまま言葉にできていることは、実はそれほど多くないのではないかと感じます。「こういう機能が欲しい」と言っていてもそれは "手段" でしかなかったり、「ここに困っている」と言っていてもそれは "症状" だったりして、"根本課題" とは限りません。たとえば「通知機能をつけて欲しい」と言われても、根本にあるのは「情報が埋もれて業務が滞ることへの不安」かもしれません。そうであれば、通知よりも、業務の優先順位が見やすい仕組みの方が喜ばれる可能性もあります。「ダッシュボードを見やすくして欲しい」と言われても、実際は上司に数字を説明することへの心理的負担が背景にある場合もあります。プロマネとしてできることは何かこうした顧客の本音は、相手への興味や理解力があるほど見えてくるものだと感じています。相手の言葉をそのまま表層で処理せず、「脳内でどんなプロセスを経て、その言葉が出てきたのか？」と想像してみる。言い換えると、顧客の言葉の裏にある意図や制約、感情を見るイメージです。こういった力を持つことは、AI時代にプロマネが生き残る術のひとつになるかもと、最近思ったりします。AIが得意なのは「知識の再現」だとしたら、AIが出す答えを「どう扱うか」「どう伝えるか」は今のところ人間が担っていると思うので。なんだかんだいっても相手を理解するのが大事自分がどんなレンズで世界を見ていて、どんな問いを立て、どんな言葉で伝えるのか。同様に、相手にはどんな背景や前提があるのか。それを意識してチューニングできれば、プロジェクト推進ももっとやりやすくなるのではないかと思いました。余談になりますが、チーム内でどれだけAIが使いこなせても、コミュニケーションが機能しなければプロジェクトは前に進みません。むしろ、プロジェクト推進においてAI活用が日常化していくからこそ、その差が縮まった先に、「人間を理解する力」の差が結果に反映される時代が来るのかも。なんて思ったりもします。 おわりに：技術も人間も大事人間は意外と自分の思考のクセを知らない。そのあたりの仕組みを知るだけで、相手の意図をくみ取りやすくなり、結果として対話の中で共創が育まれていくのではないでしょうか。テクノロジーが進化しても、結局は人がどう動くかというのが、今のところはプロジェクトの成否に影響してしまいます。だからこそ、外側の技術を使いこなすように、内なる自分や人間の仕組みを理解することも、大切だと信じたいです。技術はどんどん進化し続けますが、人が何かを理解し、動き、変化していくプロセスはそんなに変わらないので、身につけられれば長く使えそうな気がします。そんなこんなで、「人を理解する」力もエンジニアリングと捉えてもいいのかなと思いました。

人間理解についてエンジニアチックに考えてみる

こんにちは。Design Practice Team の開發(@mamikaihatsu)です。この記事は「NEXTSCAPE Advent Calendar 2025」の2日目です。qiita.com2025年の4月、産休育休から職場に復帰しました。さらに生活面では、保育園からの呼び出しや夜泣きによる睡眠不足など、日々のリズムも安定せず、最初の4月・5月は正直あまり記憶がないほど慌ただしく過ぎていきました。それでも今、「なんとかやれている」だけでなく、「思っていた以上に前向きに働けている」と感じられているのは、生成AIと周囲のサポートがあったからだと思っています。育児とフルタイム開発を両立しながら、どうキャッチアップし、どう仕事を回してきたのかを振り返ってみます。復帰してすぐに感じたギャップ復帰直後は、技術キャッチアップの量がとにかく多く、特に生成AI領域は自分が離れていた期間に一気に進んでいました。実際に働き始めてみると、想定していた以上に子どもの体調不良で保育園からの呼び出しが多く、計画が立てづらい状況でした。そんな中でまず困ったのが、“自分のペースでまとまった学習や調査ができない”ということでした。社内の支えと生成AIへの前向きな空気ありがたかったのは、復帰したタイミングで社内でも生成AI活用が一気に進み、生成AIの共有会が定期的に行われていたことでした。各メンバーが試したツールやプロンプト例、失敗談まで率直に共有する場があり、復帰直後の私には大きな助けになりました。また、ネクストスケープでは、リモート勤務と出社を状況に応じて柔軟に使い分けることができます。普段はリモートが中心ですが、気分転換に出社して社食を楽しんだり、社員と雑談したりする時間も良いリフレッシュになります。この働き方の自由度は、復帰後の両立を支える大きな要素になりました。こうした働き方の柔軟さに加えて、男性社員も育児に積極的に参加している方が多い文化で、保育園の呼び出しや急な休みについても理解が得られやすい環境なのも、復帰後の安心感につながりました。私を支えたAIワークフロー復帰後、様々なプロジェクトで生成AI活用をすることが多く実際にどうAIを業務に組み込んでいったかを、ここからは紹介します。● アイディア出し・思考整理：ChatGPT業務から離れていた期間の技術調査わからない用語や概念のキャッチアップ作業のアイディア出しドキュメントのたたき台作成ChatGPTは、頭が回らない朝に状況整理してもらう時にも助けられました。● 実装：Claude Codeブランチ作成・調査・開発・PR発行まで自動化最初は完成度60%だったところから、ガイドラインを整備しながら80%まで向上MCPサーバや、新しい機能を活用したり、色々と試行錯誤しました。実装がほぼAIが担うようになり、人間は設計方針の判断に集中できる状態になりました。● 調査・評価・改善：Cursor（ほぼGPT-5利用）コードレビュー仕様解析バグ調査 と修正Cursorは「重い調査」を肩代わりしてくれる存在としても機能し、思考リソースを大幅に節約できました。● 仕様駆動：KIRO自動テスト生成が特に効果的完成度90%付近まで安定化KIROが登場してからは、作業効率がさらに跳ね上がり、“AIという仲間と一緒に開発している感覚”が強くなりました。（仕様駆動が自分に合ってると感じ、Claude Codeでも仕様駆動でやってみたりしてます）“AIがなかったら破綻していた”と思う理由復帰直後は、時間のコントロールが難しい日が多く、「まとまった学習時間」や「腰を据えて調査する時間」が取りにくい状況でした。そんな中、調査、アイディア出しなど、AIに任せられるタスクが多かったおかげで、残業ができない中でも業務を遅延させずに進めることができました。正直、AIがなかったらキャッチアップが追いつかず、復帰後の両立は今ほどスムーズにできていなかったかもしれません。以前、女性エンジニア向けイベントに参加した際、今回の復帰ではその不安が現実になるのではと感じていましたが、AIの存在がその壁をグッと下げてくれました。周囲の支えがあって続けられている復帰直後、保育園の呼び出しや発熱による急な休みが多かった時期、もちろん、仕事が遅れないよう最大限努力する姿勢は常に持っていましたが、両立のために削ったもの以前はよく参加していた 夕方以降の社外イベントや勉強会 は、いまの生活ではほぼ参加できていません。その代わり、AIを使って学習効率を上げることで、限られた時間でも必要な情報をキャッチアップできるおわりに：AIと文化に支えられた復帰不安を抱えながらの産休育休からの復帰でしたが、リモートが可能という柔軟な働き方、生成AI活用を歓迎する文化と共有会の存在、周囲の理解とサポート があったことで、今の私の働き方は成り立っています。AIに任せられる部分を任せ、限られた時間で最大限の成果を出すというのは、この記事が、同じように不安を抱えながら復帰に臨む方の参考や励ましになれば嬉しいです。※本文中で使用している画像は、生成AI（ChatGPT Image / DALL·E）を用いて作成しています。

産休育休から復帰した女性エンジニアが、生成AIと仲間に支えられて再スタートを切った話

この記事は株式会社ネクストスケープ2025年アドベントカレンダー第1日目の記事です。DX＆HR本部の和田が初日記事を担当します。 人間に残る”シゴト”　今から15年前の2010年だったと記憶しているが、学習型の組織を創り出すための研究会で、ロボットと人工知能（AI）がどうやって人間と協働するのか？が話題になった。その時の結論は、調べることや計算・作業は機械に任せることで、人間は何かを新しく産み出すことを受け持つだろうという予測だった。改めて創造が論点に上ったことで、その更に15年前に発表されていた日本発の知識創造理論SECIモデルの活用に注目するようになる。SECIの基本構造　会社や組織の中で新しく知識が生まれてくる動的なモデルを表すSECIは、暗黙知と形式知の往復を循環として描いたところが面白いと思う。Socialization（共同化）の段階で人は他人と共に体験し同じ暗黙知を持つようになる。そのうえでExternalization（表出化）の段階でその知に名付けを試み形式知に変える。名付けられた形式知を他の形式知と様々な脈絡でCombination（連結化）を試みる。新たに結合された形式知が、J.シュンペーターの言う「イノベーション」であり、組織はこれを再び暗黙知としてInternalization（内面化）していく。野中郁次郎・竹内弘高両先生の『知識創造企業』で1995年に示され、2020年にはその21世紀版『ワイズカンパニー』で増補解説された"知識創造のお作法”だ。SECIの実践はAIにもできるのか？　このモデルは当然ながら人間同士の働く企業組織を観察して抽出されたのだが、AIエージェントの劇的な進化と職場への浸透を考えると、その可能性についても考える必要が出てきた。ひょっとして、人間じゃなくてもSECIが回せるなら、知識創造さえも人間がやらなくて済む可能性に戦慄したというのが本音だ。そんな折、当社のエンジニアから広木大地著『AIエージェント人類と協働する機械』という本を紹介される。すると、そこには「SECIモデルとAIエージェントの統合」という章があり、既に4つの段階に対応したAIエージェントの事例が示されている。ああ、こんなにも早くその日が来てしまったのか。意味と価値は誰が？　情報取集・構造化エージェントに共同化を任せ、インサイト発見エージェントに表出化を任せ、戦略構築エージェントに連結化を任せ、実践支援・仮説検証エージェントに内面を任せる。確かにこれで知識創造の各段階での作業にAIが活用できそうだと思える。　一方で、毎度頭を擡げるのが記号接地に関する問題だ。例えば共同化では「同じ暗黙知」を持つ、つまり「（それが事実だと）信じる」ことが必要になる。これは記号化・言語化よりも前の段階で行われており、その暗黙知に名付けようとする動機にもなっている。また、連結化では「良さ」の基準、言い換えれば意味と価値については、どうしても人間が見るしかなさそうだ。AIエージェントが知識創造をかなりの部分で助けてくれることは間違いが、暗黙知の共有に必要な「信じる」ことと、「意味と価値を見出す・認める」ことは、どうやら人間の手に残りそうだ。改めて人間に問われるのは　共同化では、いま起きていることや体験していることを暗黙知として信じるためには他の人が必要になる。端折って言えば一緒に働く人と同じものを見て、それを体験して、いま同じものを味わっていると「信じられる能力」が求められるということだろう。更に連結化では、その結合させたものにどんな意味を認めるのか？どんな価値を見出すのか？という「主観を開示する能力」と「相手の主観を理解する能力」が求められる。ネクストスケープはこれからも　この能力の重要性は、AIエージェントが普及する中で更に高まっていくのは確実だ。SECIの実践ハードルが下がり、連結化による新結合のインフレは必至で、その意味を認め価値を見出す「自分と相手の主観の取り扱い方法」を学ばなければならないだろう。ネクストスケープはこの新結合（イノベーション）を、お客様のビジョンに共感した上で提供することになるが、お客様と同じものを味わっていると信じられるように融け合って、2026年も期待を超える感動を約束したい。

SECIがAIと出会う日

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。昨日の記事の続きです。こちらはエンジニア以外の方にとっても使える記事かなと思いますので別記事にしてみました。私の過去の記事ではAIツールを使ってドキュメントの作成を試みたものがあります。blog.nextscape.netblog.nextscape.netAIツールの利用にあたってはドキュメントとしてはMarkdownファイルがメインになるのですが、AIツールを使っていない方であったり、実際の業務におけるお客様とのやり取りにあたってはやっぱりOffice、ExcelやWord、パワーポイントでの資料の作成が必要になりまして、そういった背景もあり上の各記事で試してきたという経緯があります。今回AntigravityではGemini3.0が利用でき、SNSでは既にGemini3.0がすごい的な内容もちらほら見受けられています。なので、プログラミングだけではなく、他の用途でも使えるだろうかということで上記の試みをAntigravityでやってみようというのが今回の記事となります。モデルはGemini3.0 Pro(High)で試した結果になりますのであらかじめご承知おきください。パワーポイント出力まずはパワーポイント。いつものようにあえて雑なプロンプトを投げてみます。「AzureとAWSの違いをメリットデメリット含めてパワーポイントにまとめてもらえますか？」以下のように出力してくれます（見づらかったら申し訳ないです。ブラウザの拡大機能等で見てみてください）。悪くはないのですが、表や図がもうちょい欲しいなと思います。著作権の問題もあるのであまり画像は使わなくてもいいのですが、見た目的に寂しいですし、一番最初に試したPowerPointのCopilotでは表が出力できなかったのでそれができるかどうかも実用的であるかどうかの基準の１つとして考えています。そこで、「もっと表やAzure・AWSのアイコンを加えて、グラフィカルにできます？」と投げてみます。結果が以下。上のプロンプトを見てもらうとわかるように出力場所も書かれています。なかなか良い感じです。テーブルとアイコンを出力してくれてますのであとはプロンプトによって如何ようにでもなると思いますので私的には及第点です。Excelでの出力では、次に上の記事でも試してみたのですが、Excel、といっても普通のExcelではなく他の記事で試したようにExcel方眼を作ってもらおうと思います。プロンプトは以下。「Excel方眼で休暇申請書を作って」開くにあたってセルの結合でちょっとエラーが出たのですが、一旦無視して開きますと以下の通り。ExcelのAgentで作ったときとほぼ同じクオリティでの出力結果です。Wordでの出力Wordでも作ってみました。これも実際の業務で使えそうなレベルで特に問題無さそうです。同じプロンプトでExcelをWordに置き換えただけなのですが、今回は実行計画書を事前に作成してくれて、どういった項目を設けるかが書かれてました。最初の２つではこの実行計画書は作成してくれませんでしたが、あらかじめプロンプトして指定しておけば対応してくれるはずです。トライ＆エラーで何度も作り直すでもよいのですが、Antigravityの機能として計画書に対してコメントで事前にこの項目を追加したい、タイトルはこうしたいといったことを追記でき、作成する前にある程度どういった項目を設けるか、どういったフォーマットにするか等を詰めることもできますのでこれも非常にポイントが高いと思います（前回のAntigravityの記事には書いていなかった内容です。。）。終わりにいかがでしょうか。ドキュメント作成用途でのAntigravity。これであれば開発において出力してきた各種MarkdownファイルのドキュメントをWordやExcelで出力しなおしてお客様に提出。。と言ったこともできると思いますし、エンジニア以外の方、例えば営業の方でもパワーポイントを作成したりと使えるツールになっていると思います。もっとプロンプトを工夫し、フォーマットやフォント等を指定すれば更に良い結果が得られると思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Antigravity＋Gemini3.0で資料作成を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Google が 2025年11月18日（米国時間）に発表した開発プラットフォーム、Google Antigravityについての記事になります。現在無償プレビューとなっており、これも最新モデルであるGemini3.0が無償で利用可能です（2025/11/22現在）「An Agent-First Experience」ということを謳っております。antigravity.googleインストールまずはTOPページ。ここからインストーラーをダウンロードしてインストールします。MacOS、Windows、Linux版がそれぞれ存在しています。インストーラーの詳細流れは割愛しますが、以下のように既存のIDE、VS CodeやCursorから設定をインポートすることもできます（文字が小さくスミマセン）キーバインディングで以下の２つを選べたりします。Normal（標準）Vim一通りインストールが終わったらGoogleへのサインイン。以下がAntigravityの画面となります。モデルはデフォルトでは以下が選択可能。Gemini3.0 ProのHighとLow、そしてSonnet等が選べます。上のスタート画面（と呼ぶのかわかりませんが）では「Open　AgentManager」というボタンがありまして、以下のような画面が「AntiGravityの画面とは別に」開かれます（色が白黒逆になっていますがご容赦を。。）。上記のAgent Managerの文言の直訳を一応以下に挙げておきます。「エージェントマネージャーへようこそエージェントマネージャーでは、深い調査、長期プロジェクト、バックグラウンドタスクなどの作業にエージェントを開始できます。受信トレイで複数のエージェントの進捗状況を監視し、作業完了後にその成果を確認できます。」余談ですが、Cursorでも同じようにAgent管理の画面が別にあるのですが、Cursorはあくまで１つの画面での切り替えとなりまして、個人的にはマルチディスプレイ使いということもあり、こちらの別画面が好印象でした。こちらはまた後で紹介するのでまずはメインの画面の方に戻ります。改修実行メインの画面は以下の通り。インストール時の設定で既に予測できた方もいらっしゃるかもですが、VS CodeのForkとなりまして、VS Code、Cursor使いの方にとっては使い慣れた画面となります。すると処理が進んで以下のような結果が出力されます。仕様書と実装計画書が作成されたとのこと。以下が仕様書。以下が実装計画となります。右上の「Proceed」ボタンを押すと承認されたとみなされ処理を続行します。この後は実装が完了し、他のAIツールであれば起動して終了となります。今回はちょっと違った動きとなりまして、先にAntigravityの大きな特徴の１つであるAntigravity Browser Extenstionについて説明します。こちらはChromeの拡張機能として事前にインストールするように促されます。そしてその状態で作業を進めますと単純に立ち上げて終了とならず、テストまで実施してくれます。ブラウザが自動的に起動し、更には今回のTodoアプリの仕様に従ってテスト（ToDoの作成、削除等）が自動的に行われていきます。テストが終わるとWalkthroughとして実装完了報告が作成されます。以下はそれを開いた画面。実装完了報告書の下にスクリーンショットが見えると思いますが、更にその下にある「ブラウザ操作の録画」をクリックします。すると以下のように別ウィンドウで先ほど実行されたテストの内容が動画として再生されます。その他の機能今までのIDEですとスクリーンショットまではあったのですが、動画の録画まで行ってくれるのは今回が初めてです。この動画での録画は実装の流れとして実施してくれるだけでなく、プロジェクトと関係無くAntigravity Browser Extenstionで別途ブラウザを立ち上げ、「Yahooで～を検索して、その一番最初の検索結果をクリックして」のような指示を出せば別途ブラウザが起動し、その作業を録画してくれます。当然（？）スクリーンショットも取得できますし、動画もスクリーンショットもローカルのPCに保存されています。なので開発だけでなく、ブラウザの操作の共有等にも使えそうですね（マニュアル作成に良さそうというのが同僚の意見でした。なるほど。。）。さて、先ほどの実装後の起動時の流れで画面表示ができますので表示して見ます。以下右側のところに「View」ボタンがあるのでそれを押すと真ん中のウィンドウがスクリーンショットが表示されます。Welcomeの部分をドラッグで囲めるので囲んでみます。すると以下のようにコメントを挿入できますので「ToDoアプリにようこそ」に変更したい、と書いて「Add Comment」ボタンをクリックします。するとプロンプトの入力欄が「Submit」ボタンで押せるようになり、それを押すとまた処理が進んでいきます。そして再度ビルドが行われ、アプリが再起動して。。このように変更が反映されました。。テスト動画にも驚きましたが、これはなかなかすごいですね。Agent Managerでは最後にAgent Managerを。以下がAgent Managerの画面で左側に各プロジェクトとそれに紐づくエージェントが表示されています。コードは表示されないですが、ここで各プロジェクトに対して指示が出せます。上の画面では少々分かりにくいのですが、「WebApplication3」と「WebApplication4」というプロジェクトに対して同時にUIの改善を指示しています。右側の一番上「Inbox」をクリックすると以下のような画面になり、各プロジェクト、エージェントの状況が把握でき、必要に応じて承認を行うこともできます。文字通りエージェントの管理が行えるわけです。最後にと、つらつらと書いてみましたが一旦ここまでにしたいと思います。いかがでしょうか。Antigravity。あのGoogleが満を持して公開したIDEなだけに非常に素晴らしいものだと思います。私自身もIDEなんてここまで進化すればどれも同じでしょと思い始めた中でCursorやVS Codeの一歩前を進んでいるような印象を受けました。今回はスポットライトを当てませんでしたが、Gemini3.0もSNSを見る限り非常に有能なようでして、今まで私もCursorを使っていましたが、乗り換えを考えてもよいかなと思い始めています。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Antigravity、Gemini3.0がすごい

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。Cursor2.0で発表された機能のうち、マルチエージェントとComposerモデルについて先日記事を書きました。blog.nextscape.net今回はCursor2.0でGAとなったAgent用ブラウザについて試した内容を書いてみたいと思います。既に1.7でベータ版として公開されていますので今更感がある方もいらっしゃるかもですがご容赦を。このAgent用ブラウザ、内蔵ブラウザ（Internal Browser）とも表現されていますが、Cursorの中にブラウザがあることで何がいいのか、何ができるのか、これから説明していきたいと思います。自然言語によるブラウザ操作まず、起動方法なのですが、以下のようにCursorの中央の画面において「Open Browser」という項目がありますのでこれをクリックするか、「Ctrl+Shift+B」を押してください。すると以下のようにブラウザ用のウィンドウが開かれ、ウィンドウ上部にはChrome等の他のブラウザと同じように戻る、進む、リロード、そしてURLの入力欄があります。プロンプトの入力欄に「yahoo.co.jpを開いて、「生成AI」で検索し、最初の検索結果をクリックしてください」と入力し、実行してみましょう。そうするとブラウザ画面が指示した通りに動き、最初の検索結果が表示されたところで終了となります。このようにブラウザを自然言語で操作することはPlaywrightのMCP等でも同様のことができるのですが、Playwright等と比べた場合にどうも反応の遅さが気になりました（以下はPlaywrightのMCPサーバーで同様のことを試した時の記事です）。blog.nextscape.netこの内蔵ブラウザがベータ版として公開された時にも同様の感想を社内で聞いたことがあったのですが、その時はまだ私が触っていなかったため、そういうものなのだろうかと今一つピンと来なかったのですが、実際試してみると例えば「検索欄に入力して」という命令についても「まずは検索欄を探してみます」といったわざわざ報告不要なことをこちらに連絡し、検索したその結果を受け、検索欄が見つかったことをこちらに連絡し。。という感じで非常に時間がかかります。Cursor2.0では前回の記事で紹介した爆速のComposerモデルが加わりましたのでこれを使えばもう少しマシに動作します。。が、やはり傍から見た時のやり取りの多さが気になるところです。一旦そこは目をつぶり、もう少し試してみたいと思います。自作のToDoアプリについても同様に操作が行えますのでlocalhostのアドレスを入力し、ToDoの追加のテストとして「今、intermalブラウザでこのアプリを立ち上げてますが、「Aさんにメールを送る」を追加して。」と指示すると、以下のようにその通りに動作します。ちなみにブラウザのメニューとしては以下のようなものがあります。恐らく読んで字のごとしかと思いますので説明は省略しますが、以下の４つが存在します。・Take Screenshot（表示範囲のスクリーンショットを取得））・Take Full Page Screenshot（ページ全体のスクリーンショットを取得）・Hard Reload（ハードリロード）・Copy Current URL（現在のURLをコピー）エレメント選択あとは「エレメントの選択」機能（という名前で合っているのかわかりませんが。。）がちょっと他の同様のツールと一線を画すかと思いますのでこれを説明して終わります。以下「Select element」をクリックしますすると以下のように要素ごとに選択が可能になりまして、タイトル部分の「Ｈ1」と表示された要素をクリックします。するとプロンプトの入力欄にクリックした要素が表示され、これを対象にしたプロンプトが記述できます。例えば「このエレメントの文言を「ToDoアプリケーション」に変更して」と指示すると以下のように。あとはタイトルバー全体のDIVをクリックし、「選択したエレメントの色を明るい緑に変更して」と指示すると以下の通り。「タイトルバー」と指示してしまうと選択結果が正しく反映されているかわからないので上のようなプロンプトで指示してみましたが、正しく動作しました。終わりにエレメントの選択は開発において非常に便利だなと思いました。あとはブラウザの操作時においてもっと反応が早くなってくれれば完全にCursorの中だけでデバッグ等が完結すると思いますのでCursorユーザーとして非常に期待しております。プロンプトによるブラウザ操作については１つ１つ手順や状況を出力してくれるのもAIツールとしては有りだと思うのですが、例えばそういった情報を出力せずにどんどん操作してくれるようなモードがあったりすると嬉しいな。。と。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor2.0のAgent用ブラウザ、エレメント選択機能を試してみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です2025年10月17日にAnthropicがClaude向けの新機能「Skills」を公開しました。www.anthropic.com上記のサイトの説明を読むと「スキルを使用して特定のタスクの実行方法を改善できるようになりました。スキルとは、Claudeが必要に応じて読み込むことができる指示、スクリプト、リソースを含むフォルダです。」とありますが、ちょっとわかりにくいですね。Claude（特にClaude Code）を知っている人向けの表現になってしまいますが、カスタムコマンドとMCPの中間にあたるようなものなのではと思っています。Anthropicsが公式にGitHubでスキルを公開しているので、使えそうなスキルがあればそれをそのまま使ってもらうのがよいかもしれません。github.com上記のGitHub内にはdocument-skillsというスキルもありますが、これはWordやExcel、パワーポイント資料を作成するためのスキルになります。特定のフォーマットでWordファイルを生成したい場合は上記のスキルを参考に他のチームメンバーでも同じフォーマットでWordファイルが作成できるわけです。そういった繰り返し行う作業、特定の知識に基づく作業、特定のフォーマットに従った出力が必要な場合にスキルが使えるのではと思います。上で挙げた既存のスキルをそのまま使うこともできますし、独自に作ることも可能です。まずはSkillsの基本構造を見てみましょう。/skills/[スキル名]/├── SKILL.md                   # メインのスキルドキュメント（必須）├── LICENSE.txt              # ライセンス情報├── scripts/                       # Pythonスクリプトやツール├── references/                # 参考資料・ドキュメント└── [その他のリソース]   # スキル固有のファイルメインのスキルドキュメント、SKILL.mdは各スキルに必ず存在するものであり、そのスキルの内容はこれを見ればわかるようになっています。なので上記Github内の各スキルについても何のスキルなのかを知りたい場合はまずはSKILL.mdを参照ください。また、scriptsフォルダにスクリプトを入れることでスキル内でスクリプトを実行させることも可能です。スキルの特徴の１つと言えるのではないでしょうか。準備では、今回はDDDに基づきレビュー、改修を行うスキルを作ってみましょう（DDDって何？という方向けに簡単に説明しますと「ドメイン駆動設計」の略称でして、ソフトウェア開発における設計手法です）。ただ、実際に上のようなシステム構成を守り、他のスキルを参考に。。スキルを一から作るのはなかなか大変かと思います。そういった方のために上記Githubでは「skill-creator」というスキルが用意されています。これは文字通りスキルを作成するためのスキルでして、これを使って上記のスキルを作成してみましょう。「skill-creatorのスキルを使ってDDDのアーキテクチャをレビューするスキルを作ってください。プロジェクトのディレクトリ構造とコードを見て、以下をチェックしてほしいです：・レイヤー分離ができているか・依存の方向が正しいか（ドメイン層が他に依存していないかなど）・貧血ドメインモデルになっていないか・ドメインロジックがサービス層に漏れていないかスコアと具体的な改善提案を出力してください。」以下のようにスキルが作成され、ファイルがダウンロードできます。必ずしもそのように出力されるかはわからないのですが、私の環境で起きたちょっとした注意点としてスキルのファイルは実際にダウンロードするとddd-architecture-reviewer.skillというファイル名になっています。これはZIPファイルなので拡張子を「.zip」ファイルに変えて解凍しましょう。作られたスキルのフォルダ構造は以下になります。ddd-architecture-reviewer/├── SKILL.md ├── scripts/│       ├── analyze_dependencies.py│       └── analyze_structure.py └── references/         ├── evaluation_criteria.md           └── language_patterns.mdWindowsであれば以下の場所に配置します。C:\Users\(ユーザー名)\.claude\skillsそして、ちゃんと設定されているかどうかを確認する必要があるわけなのですが、これもClaudeに聞いてみればわかります。以下のように「使えるスキルの一覧を出して」とお願いすると現在設定されているスキルを出力してくれて、その中に今回作成したDDDのスキルが入っているがわかります。ちなみにClaudeのデスクトップアプリの場合はもっと設定が簡単でして、以下の設定画面から「機能」をクリックし、「スキル」の欄の「スキルアップロード」ボタンをクリック、画像以下のようなダイアログが表示されるので上記スキル構造のZIPファイルをアップロードすれば自動的に展開してくれます。次に評価対象のプロジェクトを用意しておきます。一応これもDDDに基づいて作成するのですが、今回の作業内容を事前に伝えておき、あまり完璧なものにしないようにしてもらいます。スキル実行ではいよいよスキルを使ってレビューを行いましょう。以下のプロンプトを投げます。「ddd-architecture-reviwerスキルを使って現在のプロジェクトのレビューをしてください」以下のようにレビューが行われます。結果が以下のように出力されます。スキルとしてスコアを出すように設定していたのでちゃんと「総合スコア」として出力されています。100点中18点というのはちょっと残念なスコアなのですが、まあ「あえて」低くした結果ですので。。レポートも出力してもらっています。以下がその内容です。ソースコードのどの部分が。。というところも含めて出力してくれています。では、スコアがどれくらい変わるか改修を行います。プロンプトは以下のような内容で投げます。「ddd-architecture-reviewerスキル及び今回のレポート内容を踏まえて現在のプロジェクトの改修をしてください」※実際にはレポートファイルの場所、ファイル名を指定しています。そして再度レビューを。。結果、以下のように100点中97点と非常に高い結果になりました。レポートも改修前のスコアを比較できるようにしてくれています。配慮が行き届いていて非常に良い感じです。とりあえずはここで終わりでも良いのですが、あまりのスコアの高さ、変わりっぷりに本当に大丈夫なんだろうかと思ったので、今回のスキルを使わない別モデル、Codexにチェックしてもらいます。結果が以下。「全体としてDDDの基本にしっかり従っています。」とのこと。AIの出力である以上、できれば人間が一通りチェックするべきですが、ある程度は担保できそうです。最後にこのようにスキルの作成も手伝ってもらえますので最初に挙げたような繰り返し作業が必要になるもの等、スキルが活かせる作業についてはは是非使って（作って）みてください。ドキュメント生成スキルを拡張して議事録作成スキル、あとは自社SNSへの投稿文についてフォーマットを揃えたい場合に投稿文作成スキルを用意するといったようにプログラミングに限らず様々なスキルが考えられます。余談ですが、今回の件に限らず、AIが生成した結果に対してどのようにチェックするかは今のところAIツールを使って開発している人達が抱える問題だと思います。当然コードが分かる人間が責任を持って把握、確認することができればよいのですが、開発ボリュームによってはそれができない（及ばない）場合があります。そういった場合はこのように別のAIツールを用いてチェックするというのも1つの手かもしれません。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claudeの「スキル」（Skills）機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です10月29日にCursor2.0が発表され、さまざまな新規機能が公開されました。cursor.comそのうちのマルチエージェントとComposerモデルを触ってみましたので早速記事を書いてみました。まず、Composer（正確には「Composer 1」なのですが、今回は「Composer」で書いていきます）。上記URLでの紹介文を抜粋させていただくと、「Composer は、同等の知能レベルのモデル比で4倍高速な最先端モデルです。このモデルは Cursor における低レイテンシのエージェント型コーディング向けに設計されており、ほとんどのターンを30秒未満で完了します。」とあります。実際SNS等でもその速さとその出力内容を高く評価している声が多々見受けられます。もう１つはマルチエージェント、「git worktree やリモートマシンを活用して、相互に干渉させずに多くのエージェントを並列実行できます。」とのこと。マルチエージェントで複数モデルを実行できますので、Composerの速度を他のモデルと比較してみたいと思います。設定・準備まずは設定・準備。プロンプトのモデル選択のプルダウンを開くと以下のようになります。確かにComposerが存在するのがわかります。あとは」「Use Mutiple Models」という設定がありますね。これがマルチエージェントの設定です。Gitに存在するプロジェクトでないとマルチエージェントの設定をONにできないのでご注意ください。ちなみにcheetahという速さを売りにしたモデルがちょっと前にCursorで使えるようになっていたはずなのですが、今回消えていました。cheetah＝Composerなのかは不明です。マルチエージェントでの実行いつものToDoアプリの作成を依頼すると以下のような表示になり、作業が進められていきます。選択したモデルが３つ、上部に表示され、各モデルをクリックするとそれぞれの進捗状況が確認できます。初めて見る動きということもありますが、3つのモデルが次々と処理をこなしていくのはなかなか壮観ですね。。結果としてComposerはやはり速く、1分もかからずに作業が完了しました。次にSonnet4.5が2～3分で、最後にCodexとなりました。順位自体はなんとなく予想はしていましたが、確かにComposerは早いです。ただ、開発の作業ですとモデルによっては承認を必要とする場合もあり、一概には比較が難しいので解析作業のようなものが比較には合っているのかもしれません。Git Worktreeを使うため、各エージェント用に３つのブランチが作成されているのがわかります。これで１つのエージェントで認証機能を、もう１つのエージェントで検索機能を同時実装といったことも可能になります。話はやや外れますが、このマルチエージェント機能によりGit Worktreeの便利さも見直されているようでして、ちょっと面白いなと思いました。。その他・まとめComposerはコーディング関連の作業においては非常に速いのですが、複雑なタスクや深い思考を必要とするような作業は苦手といった感想がチラホラ見受けられます。また、この記事を書いて気づいたのですが、最初のCursorのブログには「コーディングモデル」という表現がされていました。この表現はそういう意味が込められているのかもしれません。私もまだメインでは利用しておらず数回試しただけですが、実装という点ではCodexやSonnet4.5といった他のモデルと比べると細かさや配慮（という表現がAIに対して合っているかはともかく）が若干ではありますが、足りていないようにも思えます。ただ、その辺りは個人的な感覚でして、プロンプトであったり、共有するコンテキスト等で補えると思いますので、あとは他のモデル同様使い方次第かなと思います。ただ、このような高速なレスポンスを誇るモデルであったり、マルチエージェントによって開発が捗るのは確かに嬉しいことでもありますが、それは一定の期間においてAIで出力される内容が他の方法やモデルと比較して２倍、３倍になるということでもあります。個人的な開発であれば確かにそれによって開発効率は上がるかもしれませんが、実際の仕事において開発を行う場合は出力内容において責任を持つために何らかの確認が必要になりますので、マルチエージェントによって単純に開発速度が上がるかというとそこは難しいところではあります。とはいえ、このようにより便利になるのは非常に良いことだと思います。Cursor2.0で使えるようになった機能は他にもあるのですが、まずはこの辺で。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor2.0のマルチエージェントとComposerモデルを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です「GitHub Universe 2025」が日本時間10月29日未明から開催されていました。様々な発表が行われましたが、そのうちのVisual Studio CodeにおけるGitHub Copilotの新機能「Planモード」を触ってみましたので記事を書いてみました。ちなみにCursor、ClaudeCodeにもPlanモードは存在しており、以前に記事を書いています。blog.nextscape.netVS Codeと書きましたが、正確にはVS Code Insiders(2025/11/01時点で1.106が最新バージョン)で利用可能になります。Planモードはどこで設定するかといいますと、プロンプトの入力欄のプルダウンにモード切替があります。今までは「Agent」「Ask」「Edit」となっていたかと思いますが、それに「Plan」が加わりました。実践　Planモードでの動作今回も「ToDoアプリの作成」で試してみようと思いますので事前にVisualStudioでWebサイトの雛形を作成しておきます。まずはPlanモードに切り替えます。そして以下のプロンプトを投げます。「Planモードで」と追加しようと思いましたが既にモードは切り替えており、蛇足かと思いまして止めておきました。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」結果が以下になります。ちょっと文字が小さいかもしれないので、一番の特徴である最後の「Open Questions」の部分を抜き出してみます。1.永続化は「JSONファイルで十分」か、将来的に「SQLite/EF Core」に切替える予定はありますか?2.UIはモーダルでタスクを追加しますか、それともページ内のインラインフォームにしますか?3.認証/ユーザー別ToDoが必要なら、設計をどう分離しますか（現在は未対応）?事前に全体的なプランを立てて、それに従って作業を進めるという意味では以前試したCursorやClaude Codeのものとあまり変わらないのですが、大きく違うと思った点が上のような「都度、幾つか選択肢を提示し、それを選ばせる」というものになります。また、案を挙げられてもそれがどういったものなのか、メリット・デメリット等、わからないことがあればそのタイミングで以下のように問い合わせることで細かく説明してくれます（以下のやり取りは上記の２番の質問に関してメリット・デメリット等を示してくれと依頼した内容になります）。質問に対して回答することでまた以下のようにOpen Questionsが出てきます。上記のやり取りの間に指示するのを忘れたこともあり、以下のような質問を投げてみます。TDDはできますか？すると以下のような回答があり、また選択肢が出てきます。選択肢によっては「（推奨）」と明示してくれるものもありますので判断の助けになるかと思います。はい、TDDで進められます。私はTDDサイクル（Red → Green → Refactor）に従って、テストを先に書き、失敗することを確認してから最小実装を書き、テストを通し、最後にリファクタします。あなたが「SQLite + ASP.NET Core Identity + インラインUI」を選択された前提で、現実的で効果的なTDDフローを提案します。次に私ができること（選んでください）A) 最初のTDDタスクを始めて「最初の失敗テスト」を作成します（例: TodoItem バリデーション）B) テストプロジェクトの雛形（WebApplication1.Tests）を作成し、必要なNuGet参照・初期ファイルを追加しますC) 流れを示した小さなサンプル（テスト + 実装）を1つ作って動作確認します（推奨）全体的なプランについては以下のように表示され、進捗状況が確認できますので、個々の質問に集中しても迷子にはなりません。この流れで実装まで作業が進んでいきます。最後にClaude CodeやCursorの他のプランモードは最初にプランを立ててくれるものの、一旦プランを立ててしまうとその後はこちらに判断を促すことがなく実装を進めていってしまう印象でした。しかしながら今回のPlanモードは都度どうするかこちらに判断を促し、かつ、選択肢も提示してくれます。つまり今まで以上に「インタラクティブ」にやり取りが行え、勝手に作業を進められてしまうということが減ります。是非試してみてはいかがでしょうか。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

GitHub CopilotのPlanモードを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です今となってはもう１カ月以上前の話になりますが、9月10日にClaudeがExcelやWord、Powerpoint 等のファイルを生成できる機能を発表しました。この時はまだMax、Team、Enterpriseの各プランで先行提供されており、Proプランを利用していた私には非常に興味深い機能だったものの触れずにいました。そして最近になり、やっとProプランでもこの機能が使えるようになりましたので早速試してみたいと思います。結構こまめにチェックしていたつもりなのですが、いつから使えるようになっていたのか定かではありません。。Claudeのデスクトップアプリであれば設定画面に移動しまして、「機能」のタブをクリックします。そうすると「実験的」の欄に「Code execution and file creation」という機能があるのでこれをONにします。さて、早速PowerPointファイルの作成を試してみたいと思いますが、以前、Copilot in PowerPointを試した際のスクリプトを使って比較してみます。blog.nextscape.netPowerPoint出力プロンプトは以下。「AzureとAWSの違い、メリット・デメリットをまとめたパワーポイント資料を作ってください」以下のように作成状況を説明しつつ、作業を進めてくれます。直接PowerPointを作成するのではなく、HTMLでスライドを作り、それをPowerPointへ変換するようです。Markdownファイルから始まらないことを除けばMarp CLIと同じような流れですね。出力結果としては以下のような内容となります。Copilotとの違いは表もちゃんと作られているところでしょうか。あとはグラフも作られており、しかもPowerPointから設定が可能です。この点は「おっ」と思わされました。以前の記事で試した時のCopilotはイメージ画像のようなものも生成し、見た目は派手なのですが、つくりとしては表も使われないためよく見るともう少しかなと思われる部分がありました。Claudeによる資料は見た目は落ち着いているものの、内容としては色々と考えられており、上で挙げたページには存在していないですが、AzureとAWSとで色分けをしていたり、コンテンツとしてはこちらの方がちゃんと作られている印象があります。※当然扱う対象やプロンプトであったり事前に共有する情報等で大きく内容が変わることをご了承くださいExcel出力Excelも試してみましょう。ExcelのAgent modeを試した時と同様、休暇申請書を作成してもらいます。blog.nextscape.net結果としては以下の通り。もう少し枠線等を書いた方が見た目としては良いような気がしますが、それでもこれもすぐに会社のフォーマットとして扱えそうなレベルでちゃんと作られていますね。Word出力次にWord出力を試してみましょう。同じく休暇申請書でいきたいと思います。「スキルファイル」とありますが、特にWordファイル作成に関するスキルは設定していないはず。。スキルについてはまた別途記事を書きたいと思います。以下のようにWordのファイルが作成されました。これも非常に良さげです。GoogleDrive連携ちょっと元々のドキュメント出力機能からずれますが、Googleドライブとの連携もできるので試してみます。右上にGoogleドライブのアイコンがあるのでこれをクリックします。もし、元々連携設定されていなかった場合には以下のようなダイアログが出ますのでここで連携設定を行います。そうするとGoogleドライブに作成したファイルが自動的にアップロードされ、今後はこのアイコンをクリックすればGoogleドライブでファイルが開け、編集できます。Googleドライブを普段使いされている方にとっては非常に良い機能ではないでしょうか。最後にということで以上がドキュメント作成機能となります。AIツールではMarkdownファイルを主に扱うことになると思うのですが、やはり会社として扱うファイルとしてはWordやExcel、PowerPointが必要になる場面は多く、SNSでも評判が良いようです。ただ（ここからは個人的な感想になりますが）、対話形式でExcelを作成でき、その完成度の高さという意味ではやはり本家Agent modeには及ばないかなと思います。まだ発表されていないようですが、このAgent modeがPowerPointでも使えるようになった場合、かつ、WordやExcelの場合と同等のレベルで使えるのであれば、やはりPowerPointにおいてもAgent modeの独壇場になりそうな気がしておりまして、元々のClaudeの機能と話がずれてしまいますが、そちらが非常に気になっているところです。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claudeのドキュメント作成機能を試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。タイトルのClaude Code on the Web、ちょうど発表されたばかりなので軽く試した内容を書いてみたいと思います。2025年10月21日現在ではベータ版、かつProまたはMaxユーザーのみの機能となりますのでご注意ください（筆者はProプランを契約しています）。設定ブラウザでClaudeにログインし、いつものプロンプト入力画面において右側メニューに「</>」というアイコンがあると思うのでそれをクリックします。GitHubへのログインを行った後、以下の画面に遷移します。これがClaude Code on the Webの画面です。（コマンドプロンプト版でも出てきますが、右の宇宙人のようなものはなんでしょうね。。）画面を見るにGitHubからプロジェクトを読み込む前提のようですね。右側のウィンドウの「Select repository」をクリックすると以下のような表示が出てきますので「GitHubアプリをインストール」をクリックします。以下のダイアログが表示され。。別画面でGitHubにログインします。そしてログイン後にGitHubの設定画面に遷移し、Claudeにアクセスを許可するために必要な設定を行います。依頼実行これらの作業が一通り終わりましたら、再度ブラウザの再読み込みを行えば先ほどの画面でGitHub内のリポジトリが選択できるはずです。今回はGitHubがベースになるので事前にVisual StudioでWebアプリのサンプルを作成し、GitHubにpushしておきます。その上でいつものToDoアプリへの改修依頼を投げます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると右側にセッション画面が開き、ローカルのClaude Codeと同様ToDoアプリ作成のための作業が進んでいきます。上記プロンプト通り、まずは解析後に仕様書が作成され、それに基づき実装が行われていきます。ちょっと気になったこととしてはClaude Codeに限らず他のツールでも都度レビューといいますか、生成された内容についての確認があったのですが、今回のClaude Code on the Webについては一気に実装まで進んでしまいました。これが今回のプロンプトに限ったものなのかはまだわからずですが、皆さんもご注意ください。実行も一応依頼してみたのですが、そもそも環境上に.NET SDKがインストールされていないため、実行ができないとのこと。他の言語であれば実行できるかどうかはまだ未確認です（ちょっと難しそうな気がしますが。。）。セッション画面の各機能では、もう少し機能を見てみましょう。セッション画面の下側は以下のようになっています。一番下の入力欄はコマンドラインの入力欄とのこと。その上の部分は一番左がブランチ、そして「Create PR」ボタンと、「Open in CLI」ボタンの３つ。「Create PR」ボタンをクリックしてみましょう。すると別画面でGitHubのプルリクエストの画面が表示され、ここでプルリクエストの作成が行えます。もう１つの「Open in CLI」はなんでしょうか。試しにクリックすると以下の文字列がクリップボードにコピーされます。「claude --teleport session_～」※実際の「～」はセッションを表す英数字の羅列ですこれは何かといいますと、ローカルPCで作業する場合にコマンドプロンプトでこの内容をペーストすると直前までのon the Webの作業状態を引き継いで作業が行えるというものです。以下のようにon the Webのセッション画面の内容がそのまま表示されるのですが、これはなかなか興味深い内容でした。あとはせっかくのWeb版ですのでスマホでの表示も見てみます。以下がそれです。PCブラウザのセッションウィンドウが表示される形になりまして、「Create PR」ボタンや「Open in CLI」等、そのままですね。これで電車の中でもClaude Codeが使えるわけです。その他あとはclaude.mdは参照・利用できるようです。「/help」等のClaude Codeのコマンドについては私が試しに「/help」と入れると応答が返ってきませんでした。少なくてもコマンドのサジェスト機能は無さそうです。同じく最近発表されたスキル機能についてはまだ未確認ではあるものの、私が先ほどまで試した限りではうまく動かない雰囲気でした（設定・実行できたらスミマセン。。）。このあたりはon the Webとしての制限・制約があるような気がしておりまして、ローカルPCでのClaude Codeと完全にイコールの使い勝手では無さそうです。ただ、発表されたばかり、ベータ版ということもありまして早々に色々と改善されるのではと予想しております。最後に発表されたばかりということもあり、少々使い勝手において気になる点もあるものの、社内でも評判の高いClaude CodeがWebブラウザで気軽に扱えるというのはユーザーにとっては非常に便利なものではないでしょうか。家でPCで作業をしていて、電車内でもコーディング、そして職場でも状況を引き継いで再度PCでコーディング、そういったシームレスな作業が可能になります。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Claude Code on the Webを触ってみた

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。ここ最近、CursorとClaudeCode、それぞれアップデートがあり、色々と調べているところではありますが、最近公開されたCursorのPlanモード、そして、それに似たものとしてこれも先日公開されたinteractive question toolについて触れてみたいと思います。どちらも出力品質を高めるため、要件に関する確認質問が行われ、それに対して答えていきます。そうすると詳細な計画書が作成されますのでそれをレビューまたは編集し、準備ができたらその計画を元に作業を進めていくというものです。CursorのPlanモードまずはCursorから。複雑なタスクを記述すると、Cursor が自動的に Planモードを提案してくれるそうですが、今回はAgent の入力欄で Shift + Tab を押して意図的にPlanモードに切り替えます。下記赤枠部分はプルダウンになっているので直接切り替えてもOKです。いつもの私の記事ではToDoアプリをベースに試してきてましたので今回も例に漏れず、以下のようなプロンプトを投げてみます。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると上のように質問が出てくるのですが、ちょっと文字が小さくて見づらいという方に以下にその内容を挙げておきます。「ToDoリスト機能の仕様を作成する前に、いくつか確認させてください:1.ToDoリスト機能の実装方法はどれがよろしいでしょうか?　a) 単純なメモリ内保存(再起動で消える)で進める　b) データベース(SQLite等)を使用して永続化する　c) JSON/XMLファイルに保存する2.UIの実装方法はどちらがよろしいでしょうか?　a) 既存のRazor Pagesに追加する　b) Web API + JavaScriptでSPA風にする3.複数ユーザー対応は必要でしょうか?　a) 不要(単一ユーザー向けシンプルなToDoリスト)　b) 必要(ユーザーごとにToDoを管理)」いきなり言われても。。という場合も有ると思いますので、その場合は以下のようにメリット・デメリットを更に聞いてみて深堀します。当然上記の選択肢のいずれも気に入らなければ更に相談して別の選択肢を考えてもらうこともできます。では、実装方法は「b) データベース(SQLite等)を使用して永続化する」、2は「b) Web API + JavaScriptでSPA風にする」、3は「b) 必要(ユーザーごとにToDoを管理)」」で進めてもらうよう指示します。すると以下のように上記の回答に基づいて実装計画が作られますそして、その計画を実施しても良いかを聞かれますので以下の画面で右下の「Build」をクリックします。そしてあとは今までのCursorでの実装と同様、アプリが作られて。。という形になります。仕様駆動開発というほどではないかもしれませんが、作業を行う前に計画の策定・提案をCursorが行ってくれます。ClaudeCodeのinteractive question toolそして、Claude Codeの方ですが、こちらはバージョン2.0.21で実装された「interactive question tool」というものになります。Shift+Tabを２回押すことでPlanモードに移行し、interactive question toolが動作するようですが、Planモードに切り替えなくても質問の内容によって、あるいは明示的に「interactive question toolで」、と依頼することで同様の対応となるはずです。では、同じToDoアプリの作成をこのinteractive question toolで依頼します。すると以下のように大項目とその下の各選択肢が表示され、それぞれを選んでいく形になります。画面だけではわかりづらいかもしれませんのでもう少し文章で説明すると、大項目として機能範囲データベースUIデザイン追加機能とあり、例えば「機能範囲」の選択肢として基本的なCRUDタスクのカテゴリ分類タスクの期限設定タスクの完了状態管理等があり、複数選択できるものはそれぞれにチェックを付けて。。といった形で細かく指定ができます。一応他の大項目ごとの選択肢も挙げておきます。ちなみに上記選択肢に追加したい場合は各大項目内の各選択肢の最後に「Type something」という選択肢があると思います。選択肢に自身の希望のものがなく、何か独自の選択肢を追加したい場合はこの部分にそれを書き込んで選択すれば計画に含めてくれます。いわゆる自由記入欄ですね。所感いかがでしょうか。Claude CodeのPlanモードは元々Cursorのものとほぼ同様の機能だったと思うのですが、interactive question toolでは文字通り、よりインタラクティブになり、選択肢から取捨選択を行うことでClaude Codeとの意思疎通、認識の確認、指示の明確化がしっかり行えるようになった印象です。ちなみにClaudeでは9月末にSonnet4.5が使えるようになり、今回もそれを使っての実装となりました。Claude Codeは比較的触る機会が少なかったのですが、今回ToDoアプリの作成はかなりスムーズに進んだ印象です。今までのAIツールではビルドや実行時にうまくいかないことが１～２回発生しており、それを解消するために更に何らかのプロンプトを実行せざるを得なかったのですが、そういったユーザーの介在を一切必要とすることなく、実装からビルド・起動まで一気にこなしてくれました。当社でもClaude Codeを利用する方は多く、さすがだなという印象です（私は主にCursor＋Codexを使っています）。「どれが一番優れている」ではなく、人間のチーム同様に個性がありますのでそれぞれに相談してみて進めていくといったことが必要なのかもと改めて思った次第です。個人的にはレビュー時やセカンドオピニオンとして別のモデルを使うように意識しているのですが、更に視野を広げて利用した方が良いのかもしれませんね。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Cursor及びClaudeCodeのPlanモードを試す

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。以前、Playwright MCPについての記事を書きまして、非常に使い勝手の良い素晴らしいツールでした。blog.nextscape.netそのPlaywrightにまた動きがありまして、Playwrightエージェント、Playwright Test Agentというものが発表されました。playwright.devエージェントは３種類、Planner、Generator、Healerの３つが用意されていて、この３つを利用することで製品のテストカバレッジが向上するとのことです。それぞれの役割は以下になります。Planner：アプリを探索し、Markdown テスト プランを作成しますGenerater：はMarkdown プランを Playwright テスト ファイルに変換しますHealer：テストスイートを実行し、失敗したテストを自動的に修復しますちょっとこの説明だけではピンと来ないと思いますので実際に試してみたいと思います。まずはアプリケーションを用意しましょう。今回はASP.NET CoreのWebアプリをベースとした以下のスクリーンショットのようなToDoアプリをAWS Kiroに作ってもらいましたのでこれを元に試してみたいと思います。ToDoの作成から編集、削除といったように色々な操作がありますのでそれなりのテストが必要になるはずです。準備まずはPlaywright Test Agentをインストールします。npm install -D @playwright/test次に実行環境なのですが、現時点（2025/10/14）ではClaude CodeとVS Codeで利用可能です。ただし、VS CodeはVS Code Insiders v1.105以上でなければならないようでして、今回はClaude Codeで試してみたいと思います。今回用意したアプリケーションのプロジェクトのルートディレクトリで以下のコマンドを叩きます。npx playwright init-agents --loop=claude以下のようにテストエージェントの実行に必要なファイルが作成されます。次に「claude」と入力し、Claude Codeを起動します。ここまでで準備が完了です。テストプラン作成では、まずは順番通りPlannerでテストプランを作成してもらおうと思います。ただ、その前に@plannerと入力してもらい、以下のようにテストエージェントに関する情報が表示されるかどうか、つまり正しくテストエージェントがインストールされているか確認してください。問題無ければ改めて実行してみましょう。Claude Codeはinitコマンドでまずはコード解析を行うはずなのでそれは不要なのだろうかと思いつつ以下のプロンプトを実行してみます。「@plannerこのプロジェクトのテスト計画を作成してください」すると以下のようにMarkdownファイルでテストプランが作られます。全てを載せるのは冗長ですので幾つか抜き出してお見せします。以上のようにセキュリティテストも含めた（当然ながら）しっかりしたテストプランが作成されています。テスト生成ではこのテストプランに基づき、テストスクリプトを生成してもらいます。次はGenaratorエージェントに対して指示を行います。「@generatorテストプラン.mdからPlaywrightテストを生成してください。」処理が次々と実行され、～.ts形式のスクリプトファイルを作成してくれます。順番が前後しますが、最初に以下のようなToDoリストを作成しそれに基づきテストスクリプトを作成していきます。基本機能テスト（タスクCRUD）のPlaywrightテスト生成フィルタリング機能のテスト生成編集機能のテスト生成セキュリティテスト（XSS対策）の生成以下のようにテストスクリプトが完成すると、どのようにテストを実行すれば良いかも教えてくれますのでそれに従ってテストを実施します。するとPlaywrightによりテストが実施され、最終的に以下のような結果が表示されます。テスト修正175個のテストのうち、117個が失敗しているとのことなので３つのエージェントのうちの最後のエージェント、Healerエージェントに依頼し、修正を行います。「@healerテストが失敗しているようです」修正が実施され、完全に全てが修正されたわけではないですが、再度テストを実施したところ160個はPASSするようになりました。ちなみに以下７つのブラウザごとのテストを実施してくれます。chromium (Desktop Chrome)firefox (Desktop Firefox)webkit (Desktop Safari)Mobile Chrome (Pixel 5)Mobile Safari (iPhone 12)Microsoft EdgeGoogle Chrome最後に有償のテストツールでなくともかなり詳細なレベルでのテストを実行してくれるこのPlaywrightのTest Agent、いかがでしょうか。小規模のToDoアプリでさえ、このレベル（170近くのテスト項目）ですので大規模プロジェクトになると更にすごいボリュームになると思います。そうなるとちょっと取り扱いが難しくなってくるため、テストプランの段階である程度細かく分けてもらい、それに従ってスクリプトの作成、実行という形にした方が良いかもしれません。最初に挙げたPlaywright MCP、もしくはChrome DevTools MCPを使うことで自然言語でPlaywrightのスクリプトが作成できるのですが、自分自身で抜け漏れなくスクリプトを作りこむのは如何に簡単に作れるようになったとはいえ、やはり大変な作業です。しかしながらこのTest Agentを使うことでそれがもっと簡単に実現できるようになります。かなり使える機能だと思いますので皆さんも是非お試しください。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Playwright Test Agentでテストをより簡単に

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚です。「Opal」は、Googleが最近公開した自然言語で強力なAIミニアプリを構築できるツールです。SNSでは１週間前ぐらいから既に話題に挙がっていたのですが日本では利用することができず、10月7日にやっと利用できるようになったので早速試してみました。ログイン直後の画面は以下のような感じです。アプリ作成とりあえず、Your Opal appsの「Create New」をクリックしてみましょう。日本でも公開されているようになったものの、文言は英語です。ちょっとそこに抵抗を感じる人もいるかもですが、操作は非常に簡単なので今回の記事を参考に是非触ってみてください。パッと見たところ、ちょっとどうしたらよいかわからなくなってしまうかもですが、他のAIツールと同様入力欄が画面下部にあり、「Describe you want to build」＝「作りたいものを書いてね」とありますので、とりあえず書いてみましょう。他のAIツールの記事でもBMIを計算するアプリを試しに作ってもらったので、今回も比較のためにそれで行きたいと思います（ちなみに以下の記事がそれです。これもGoogleのサービスですね）。blog.nextscape.netということで以下のプロンプトを入力します。「BMIを計算、出力するアプリを作って」するとあれよあれよという間に以下のような内容が表示されます。他のAIツールに詳しい方には「Dify」っぽい画面と言えばおわかりになりますでしょうか。幾つかの機能を持つコンポーネントを組み合わせ、それがアプリになるというものです。上のスクリーンショットですとちょっと見づらいのでもう少し１つ１つ見てみましょう。各コンポーネント説明まずは身長、体重を入力する。ということでそれぞれのコンポーネントがあります。次にその２つのデータを合わせる形で「BMIを計算する」というコンポーネントが。試しに上のコンポーネントをクリックすると以下のような内容が表示されます。「あなたはpythonの熟練プログラマーです。云々」そして最後に最初に入力した「Height」「Weight」でBMIを計算する旨が書かれています。このように各コンポーネントに役割を与えているのですね。このあたりは他のAIツールにおけるプロンプトと同じような感じかなと。ふたたび各コンポーネントの説明に戻りまして、次は「BMIを解釈する」、つまりは太り気味、痩せ気味といった判定部分。そして「結果ページの出力」です。検証こうしてアプリを作ったはいいものの、どこで試せるの？ということになると思いますが、デバッグ段階であれば画面右側のウィンドウの「Preview」を選択してください。そこにアプリの画面が表示されるはずです。完成している、もしくはある程度動くことがわかっているのであれば、画面上部の「Editor」「App」が並んでいると思いますが「App」を選択することで全画面で確認できます。今回は「App」で動かしてみます。ブラウザ画面上にアプリが表示されます。まずはTOP画面。「Start」で開始します。身長を入力。体重を入力。計算中の表示が入り、BMIの計算結果が表示されます。ちなみにPreviewで実行すると現在動いているコンポーネントの周りが点滅しますので、それによって処理の進行状況が確認できます。Opal自体は英語なのですが、コンポーネント内の記述は日本語にも対応しており、例えば結果出力のコンポーネントにおいて「文章は日本語で」と指示すると以下のようにちゃんと日本語で出力してくれます。改修してみるさて、プロンプトだけで終わりにしてしまうと他のアプリ生成ツールと同じ内容になってしまうのでOpalならではの方法で改修してみたいと思います。エディタ画面で「Generate」をクリックすると新しくGenerateコンポーネントが表示されます。新しいコンポーネントを既存のコンポーネントに結び付け、「アドバイスを生成」というタイトルを設定し、内容としては「計算結果を元にブラウザでBMI結果を元にしたアドバイスを検索し、生成する」とします。さてこれでもう一度試してみましょう。数値は肥満気味にしてみます。すると単純に結果を表示するだけでなく、以下のような健康に関するアドバイスを詳細に表示してくれます。ちなみにコンポーネントの接続ですが、下の画像、赤枠の部分をドラッグ＆ドロップして他のコンポーネントに繋げることで接続できます。接続を削除する場合は接続している線を選択し、右クリックで「Delete selection」をクリックすると削除されます。取り扱えるデータあとは今回その場で入力したデータのみを扱ってみましたが、他にどういったデータを扱えるのかを調べてみました。まず、Add Assetsという機能がありまして、これでGoogleDriveやYouTubeの動画等も扱えるようです。「Upload file」で自身のPCのファイルもアップできるようですが、どんなファイルでも扱えるかというとそういうわけではありません（表示される拡張子がかなりあるので具体的に挙げられず。。スミマセン）。例えばCSVファイルではなくTSVファイルは読み込めないようでした。あとはアプリ内での入力においても入力欄の＋アイコンをクリックすることで以下のようにインプットとして扱えるデータが表示されます。これも自身のPC内のファイルで合ったり、GoogleDriveであったり、動画であったりと色々扱えます。今回は試しませんでしたが、マイクアイコンもあるのでその場で音声入力もできそうですね。試しにCSVファイルを読み込み、画面に表示するアプリも作ってみました。単純なアプリなので当たり前と言えば当たり前ですが正しく動作しています。ちなみにこれでもTSVファイルは駄目でした。データ量も小さいのですが、私だけの問題なのかよくわからず。。最後にいかがでしたでしょうか。AIツールを多少使い慣れた方であればあまり試行錯誤することなく、上のようなアプリがかなり簡単に作成できると思います。よくあるノーコード・ローコードアプリのように「まずは画面の操作から」ではなく「まずはプロンプトから」で始められるという点はユーザーのハードルを更に下げるという意味では非常に大きいと思います。今のところ無料で利用もできますので是非試してみてください。ただ、上で書いた通りインプットも色々と選択肢はあるものの、データベースには接続できず、基本的に初心者向けという印象で自由度としては（かつ類似ツールとしては）Difyの方が上かなと思います。ただ、それが許容できるようでしたらこのOpalで作成した方が学習コストの低さ、手軽さという点では非常におすすめできます。このOpal、まだ発表されたばかりということもあり、更なる進化が期待できます。引き続き注視し、キャッチアップしていこうと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

Google Opalが面白い

はじめに株式会社ネクストスケープ Chief Technology Office所属の小野塚ですここ最近はCursorやClaude、GeminiといったAIツールに関しての記事が多く、ここ最近も色々と発表があり、話題には事欠かないといいますか、むしろキャッチアップするにも一苦労という状況です。今回はAI絡みではありますが、久々にMicrosoftに関する情報、しかもAzureではなくExcelに関する機能について書いてみたいと思います。MicrosoftのAIツールと言えば「Copilot」。Coplilotも色々と進化しているとは聞いておりましたが、なかなか触れずにいました。そんな中、今回9月29日にCopilotのAgent modeが使えるようになったという発表があり、結構面白そうだったので早速試してみたいと思います。Microsoft社曰く「バイブコ―ディング」ならぬ「バイブワーキング」ができるとのこと。設定まずはデスクトップのExcelを開き、「ホーム」ー＞「アドイン」で「Excel labs」を検索し、Excel labsが表示されたら「追加」を選択します。※以下は既に設定されておりますがご容赦を。。Excel Labsのアイコンが表示されるのでクリック。すると以下のようにExcel Labsのウィンドウが開くのですが、「Excel for the web」のみ対応ということでした。。ということでWeb版Excelを開き、再度「Excel Labs」のアイコンをクリックしますと以下のような表示になります。上の画像のように「Agent mode」が表示されていますので「Open」ボタンをクリック。すると、他のAIツールのようにプロンプト入力欄が表示されて、これで準備完了となります。ドキュメント作成それではAgent modeで作業を依頼してみたいと思います。まずは「Excel方眼で休暇申請書を作って」とお願いしてみます。ちょっと話がずれるのですが、Excelで作った仕様書はClaudeで読み込みが可能で、たまに利用することがありました。しかしながらExcel方眼になると（私の持っている資料では）正しく読み込んでくれなかったという経験がありました。他のツールでも読み込み中のまま止まってしまったりと、あまり相性がよろしくない雰囲気がありまして、今回あえてExcel方眼を指定した次第です。プロンプトで依頼してから数分待ちますと以下のような、そのまま会社の正式資料として使えそうな休暇申請書が作成されました（実際のExcel方眼はもっとマスが小さいと思いますが、まあこんなものでしょう。。）プロンプトの入力欄では以下のように出力結果について非常に細かく説明してくれています。さて、ここでふと思ったのですが、「これは通常のCopilotでもできるんじゃないだろうか？」ということ。以前、PowerPointではありますが、以下の記事でCopilotを使って資料を作成し、なかなかの完成度だった経験もありまして、ちょっと試してみることにしました。blog.nextscape.net結果は以下の通り。現在開いているシートに対して処理を行うのではなく、別途Excelファイルを作成し、ダウンロードする形になります。そして、ダウンロードして開いた結果が以下。上記のプロンプトのやり取りを読むとAgent modeと同じ結果になりそうな気がしたのですが、結構違ってしまいました。これはそもそも私のプロンプトが簡単すぎるせいもあると思うのですが、ちょっとこれでは通常の業務では使えなさそうです。Excel操作もう少し試してみたいと思います。次にExcelを使っているとたまに必要になるであろうちょっとした編集作業をやらせてみましょう。以下のように適当に値を各セルに入力し、これを並べ替えてみます。通常であればフィルター機能等を使うわけですが、Agent modeでも以下のように指示すれば並び替えてくれます（スクショは貼り付けるまでもないので割愛。。）。ただ、この作業も依頼して完了するまでに１分程度はかかるのでこういったちょっとした作業、かつ自分で対応方法がわかるのであれば自身でやった方が早いかなと思います。とはいえ、皆さんもExcelを触っていると「これってどうやるんだっけ？」「こういう風にできないだろうか」といったようにExcelの使い方に関してちょっとした疑問が出てくると思うのですが、これもWebで調べたり、もしくはClaudeやChatGPT等の他のツールで調べることなく、Agent modeで自然言語でのやり取りにより対応してくれるわけです。データ集計・インサイトあとはデータ集計やそのインサイトに関する操作を紹介しましょう。まずはサンプルとして仮想コーヒーショップの月次決算書を書いてもらいます。プロンプトは「コーヒーショップの月次決算報告書を作成して」だけです。ちゃんとグラフまで書いてくれてますね。これだけでもすごいのですが、上記が9月分ですので8月分のも作成してもらい、更に「8月と9月の決算内容から判断できることはなんでしょうか。」と投げてみます。すると以下のように8月、9月分の比較結果をまとめてくれます。それだけでなく、以下のように文章でも説明してくれまして、そこに書かれた情報の考察だけでなく、今後のアクション提案として単価維持・向上のための施策としてフード併売率UPをするべき等、ちょっとしたコンサルティングまでしてくれます。Markdownファイル出力Markdownファイルに出力して、とお願いするとチャット欄に以下のように出力してくれます。ファイルそのものを作るのではなく内容のみのなのでコピペで別途ファイルは作る必要があるのですが、これができるとなるとExcelで書いたプログラムの仕様書の内容をMarkdownファイルで出力し、Claude Codeやcursorに読み込んでもらって実装することもできそうです。ちょっと手間ではありますが、Excel、特にExcel方眼の読み込みに対応していないAIツールもありますのでそういったものには使えそうです。まとめということでClaudeやCursorのように対話式でドキュメントを編集してくれるAgent mode、プログラマーだけでなく、Excelを使用する方々全員が利用できる、かなり便利な機能です。ちなみに最初の話に戻りますが、実際に使われているもっとマスの細かいExcel方眼でも正しく内容を読み込んでくれました。さすが本家Microsoftというところでしょうか。更に編集のみに留まらず、ドキュメントの内容に関して上で紹介したようなデータ分析・解析といったコンサルティング的な使い方もできます。そういう意味ではOfficeというソフトにおいて、より「Copilot」、「副操縦士」という名前がふさわしくなってきたのではないでしょうか。以前紹介したCopilot in PowerPointは正直なところ「雛形」作成としては使えるのですが、あくまで「雛形」であるためにメインで作業を進めるのは人間の役割でした。しかしながら今回は主な部分をAIが作成し、あくまで人間はそれの補完やチェックのみとなり、コーディングにおけるClaude CodeやCursor等のようにバイブコ―ディングならぬバイブワーキングを実現してくれています。現在Agent modeが使えるのはExcelとWord、そして近々PowerPointでも利用可能になるそうですので非常に楽しみなところです。Wordも試してみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。recruit.nextscape.net

ExcelのCopilot Agent modeを触ってみる

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です以前、PlaywrightのMCPサーバーを紹介しました。blog.nextscape.netX等を見るとこのPlaywrightのMCPサーバーを使ってE2Eテストが捗った等のコメントが多々見受けられます。上記の記事でも軽く触れましたが、筆者もスマホアプリのテストでAndroidDriver（AndroidにおけるSelemium）を使ったことがあるので普通にテストシナリオを書くことの大変さはよくわかります。さてそんな中、9月23日に Chrome DevTools Model Context Protocol（MCP）サーバーが公開されました。developer.chrome.comGoogleが提供するこのMCP、どんなものか試してみたいと思います。github.com必要なものは以下の３つ。筆者だけかもですが、Node.jsのバージョンにはご注意ください。自身の環境で最新のバージョンが入っていると思い込んでいたのですが、MCPの設定の時点でうまく動かず少しだけハマってしまいました。。Node.js 22.12.0 or newer.Chrome current stable version or newer.npm設定設定ですが、今回は筆者がいつも使っているCursorで試してみます。上記のGitHubのURLにアクセスすると以下のように各ツール毎に設定方法を説明してくれていますので、「Cursor」をクリックしてみます。 そうすると以下のように設定方法が表示されます。Configファイルの書き方も挙げてくれているので、他のMCPサーバー同様手動で設定することも可能ですが、筆者は「Add to Cursor」ボタンを押して、自動的に設定してくれる方を選びました。あっさりと設定完了。さすがGoogle。地味に助かります。いよいよ実行さて、いよいよ本題ということで試してみたいと思います。以下のプロンプトを実行します。「Chrome Dev ToolsでQiitaを開き、先頭の記事を取得してください。更に検索欄に「Playwright」と入力し、その結果のスクショを取得してください。」まずはQiitaのページが開かれて、以下がMCPとのやり取りです。ちょっと文字が薄いですが、実行内容について教えてくれます。検索欄に「Playwright」が自動的に入力され、以下のように最終的な結果をお知らせしてくれます。スクリーンショットもちゃんと取得されています。あとはPlaywright用のテストコード作成もお願いしてみます。ちゃんとpackage.jsonやplaywright.config.js等、一通りのファイルを作成してくれました。更には「Chrome DevTools MCPでyahoo.co.jpのパフォーマンス測定を開始してください」とお願いすることで以下のような結果が得られます。ちなみにPlaywright MCPでもパフォーマンス測定を行ったのですが、同様の結果が得られまして、違いとしてはLCPに関する詳細分析の有無ぐらいでした。あとはアクセシビリティのチェック。私は以前アクセシビリティについても以下のような記事を書いてますが、このアクセシビリティのチェックを個人で実施するのは非常に困難です。このDevtoolsを使えばどこを改善すべきなのかをわかりやすく教えてくれます。blog.nextscape.netMarkdownファイルに書き起こすことも当然可能ですのでまずはこれで洗い出しを行い、更にそれを参照してもらいつつCursor等を使って修正まで一気に行うことができそうです。すばらしいですね。当社サイトでも試してみるPlaywright MCP同様、当社のサイトでも試してみます。「www.nextscape.netをChrome DevTool  MCPで開き、採用情報のページに遷移してください。更に採用情報のページでどういった情報が書かれているか取得してください。」とスクリプトを投げると当社の採用サイトにアクセスし、その情報を取得、更にスクリーンショットまで取得してくれました。おもむろに宣伝のようになってしまいますが、開発に興味がある方、お客様の課題解決にやりがいを感じる方、是非チェックしてください。recruit.nextscape.net ちなみに以下のようなスクリプトを投げることでPage Object Model形式で出力（実装）してもらうこともできます。「Chrome DevTools MCPを使って先ほどと同じ手順をPage Object Modelの形で実装してください。」Playwright MCPと同様、やはりE2Eテストとして以下のような使い方はもちろん、表示周りのテストにおいて非常に強力なツールとなってくれそうです。日本語でテストしたい操作をChrome DevTool  MCPに対して指示その操作内容をPlaywrightで実行するためのスクリプトとして出力Playwrightで都度実行その他の機能あとは以下のリファレンスを見るとChromeのデベロッパーツールで使える機能が使えそうです。github.comそこで以下のような依頼をしてみます。「www.nextscape.netのトップページのネットワークリクエストを一覧表示してほしい」そうすると以下のように上記リファレンス内の「list_network_requests」が実行され、デベロッパーツールと同じような情報が返されます。これは（25/9/28時点で）Playwright MCPでは得られなかった情報になります。最後にまださわりではありますが、このように様々な操作が可能になります。Playwright MCPとの差がまだあまり見出せていないですが、このChrome DevToolsもE2Eテスト等で非常に役に立つと思います。是非皆さんもそれぞれのMCPを試してみてください。どちらも、特にDevToolsは発表されたばかりということもあり、今後の発展・進化も気になるところですので引き続きチェックしていきたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

Chrome DevTools MCPを試す

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。直近でいくつか仕様駆動開発に対応しているAIツールについて試してみた記事を書かせてもらいました。１つはspec-workflow-mcpblog.nextscape.netもう１つはAWS Kiroblog.nextscape.net他にも幾つかあるのですが、今回AWSのKiro同様、有名どころとしてGithubのSpec Kitを触ってみました。github.com私が調べた時点（2025/9/20）ではLinux/macOS (または Windows 上の WSL2)が対象となっていました。ただ、実際触ってみるとWSL2でなくてもWindows＋VSCode上で動作確認できましたのでその前提でお話しします。今回はVS CodeのClaude Code拡張機能を使いますので事前にインストールしておきます。設定まずはPowerShellで対象となるプロジェクトが存在するフォルダに移動し、以下のコマンドのいずれかを実行します。最後のパラメータはプロジェクト名なのですが、省略して--hereでもよいです。ちなみにここで指定したプロジェクト名がフォルダ名としてプロジェクト内部に作成され、仕様書が格納されます。uvx --from git+https://github.com/github/spec-kit.git specify init --hereuvx --from git+https://github.com/github/spec-kit.git specify init <PROJECT_NAME>上記コマンドのうちいずれかを実行しますと以下のようにタイトルがかっこよく表示され、AI アシスタントを選択するように促されます。今回は前述した通りClaude Codeを選びます。上記スクリーンショットは2週間前に取得したものでして、その時はcopilot、claude、geminiの３つだったのですが、2025/9/20の時点では以下のようにcursor、qwen、opencode、windsurfと7つに増えています。やはり進化が凄まじいですね。。2025/9/20の最新版では更に以下のようにスクリプトタイプ、bash/zshか、PowerShellかを選択できます。その後、プロジェクトの初期化が行われます。そしてNext stepsとして３つの指示が出ます。読むとVS Codeを立ち上げろという指示になりますのでそれに従いVS Codeを起動します（最新版ですと「VS Code」とは書かれておらず、AI Agentといった表現になっています）。ちょっと見づらいと思いますが、VSCodeのエディタの右上にClaudeのアイコンがあるのでそれをクリックしてClaude Code拡張機能を立ち上げてください。そうするとClaude Codeが立ち上がります。実装さて、ここからがポイントなのですが、まずはプロンプト入力欄にスラッシュ「/」を入力してみてください。その時に使えるコマンドが表示されるのですが、以下の赤枠部分にあるコマンド、/plan、/specify、/tasks等が表示されていないとSpec Kitは使える状態にありませんので、もう一度環境や設定を見直してみてください。私もそういう症状が出たのですが、一旦VS Codeを終了し、もう一度上の手順を繰り返すことで表示されました。あらためて上記３つのコマンド（＋実装のための「/Implement」コマンド）がSpec Kitのコマンドになりまして、仕様駆動開発ツールである以上、まずは仕様を作成するわけなのですが、そのためのコマンドが上に挙げた３つのうち、/specifyコマンドになります。「/specify」に続けてどういった仕様を作ってもらうかを記述し、指示するわけですが、他のツールとの比較のために前回、前々回の記事に合わせてToDoアプリの作成を依頼します。粒度も今まで同様ざっくりと以下のように指示してみます。「/specify ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください」このコマンドを受けてまずは仕様書の作成を実行します。プロジェクト内に「specs」フォルダが作成され、更にspec.mdというファイルが作成されます。これが仕様書になります。以下のようにspec.mdに色々と書かれていきます。仕様書の作成が終わると以下のようにその旨と「次のフェーズ（実行計画）の準備ができています」と表示されます。ちなみにspec.mdの内容は以下のようになりまして、クリックガイドラインやユーザーシナリオ等が記載されています。次に「/plan」コマンドで実装計画を作成します。先ほどのspecsフォルダにplan.mdファイルが作成され、そこに実装計画が書き込まれます。spec.md同様、その記述内容が表示されます。と、ここまで進んだところで個人的な予想としては次に/tasksでタスクリストの生成、/implementで実装へと進んでToDoアプリができました。めでたしめでたし。。という流れを想像していたのですが、実はそれを超えた動きとなりました。ここから怒涛の仕様書作成が続きます。更にresearch.mdというファイルが作られまして、パフォーマンス目標や技術スタック概要が書かれています。更にapi-endpoints.md。openapi.yaml次にquickstart.md（どれだけ作るのだろうか。。とこの時点で筆者は思いました）CLAUDE.md。これはClaude Code用のファイルですね。改めてplan.mを更新。これでやっと終わりまして、次のコマンド「/tasks」によるタスク生成を促されます。上のスクリーンショットでも見れますが、一応作成されたファイルを以下に挙げておきます。なかなかしっかり作りこんでくれてますね。計画書: C:/git/WebApplication1/specs/001-todo-todo/plan.md研究成果: C:/git/WebApplication1/specs/001-todo-todo/research.mdデータモデル: C:/git/WebApplication1/specs/001-todo-todo/data-model.mdAPIコントラクト: C:/git/WebApplication1/specs/001-todo-todo/contracts/統合テストシナリオ: C:/git/WebApplication1/specs/001-todo-todo/quickstart.mdClaudeコンテキスト: C:/git/WebApplication1/CLAUDE.md今回小規模なToDoアプリということもありもっと大規模なプロジェクトであれば他にもドキュメントを作成してくれるのかもしれません。そして、「/tasks」でタスクリストを作成します。タスクリスト完成。さて、いよいよ実装となります。今回特にこちらからは指定していなかったのですが、以下のスクリーンショットにあるように「TDD原則に従って、まずテストから作成して」くれます。KiroもTDDで進めてくれましたが、これもTDDで進めてくれます。ちなみに今更ではありますが、AIにソースコードを書いてもらうにあたってはその検証は欠かせないものとなり、テストの重要性がより大きなものになると思っています。そのためにこのようにテストコードを書いてもらうことは必要不可欠になるでしょう。AIツールであればテストコードもすぐに作成できますし。ちなみにTDD原則に従って。。という記述は以下のスクリーンショット、一番最後の行に書かれています。さて、実装もどんどん進めてくれまして、最終的にビルド、実行も実施してくれます。ToDoアプリの画面は以下の通り。テストコードもしっかり作ってくれまして、全てちゃんと通ることを確認済みです。ちなみに以下のスクリーンショットはVisual Studio 2022のテストエクスプローラーの画面です。まとめ以上がSpec Kitを使った仕様駆動開発の基本的な流れになるかと思います。いかがでしょうか。spec-workflow-mcpはMCPとして手軽に試せる点（今振り返ると資料も少な目ではありましたが、規模やプロジェクト内容によってはライトな方が良いという場合もあると思います）、Kiroは有料かつAWSならではのしっかりした作り、そしてSpec KitはKiroに負けず劣らずの作りこみですし、Spec Kit自体は無料で利用可能、更に最初に挙げた通り様々なツールに対応。。といったようにそれぞれに特徴があります。是非皆さんも実際に触っていただき、自分にとって、あるいは利用しようと思っているプロジェクトにとってどのツールが合っているかを確認してもらうのが良いのではないでしょうか。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.netnextscape.netnextscape.net（以下当社お問合せフォーム）Microsoft Forms

GitHubのSpec Kitで仕様駆動開発を試す

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。前回仕様駆動開発を試してみようということで、spec-workflow-mcpを触ってみました。blog.nextscape.netそしてAWSのKiroを使えるようになりましたので今回はその感想を。Kiroは以前からWait listに申請していたのですが、恐らく１カ月経ったでしょうか、それでも通知が来ず、結局Proプランを申し込む形となりました。すごい人気なんですね。。kiro.devKiro起動まずはWebサイトで入金を行い、Kiroをインストールして立ち上げます。私はProプランを申し込みました。KiroもVSCodeライクの画面なのですね。まずはプロジェクトを開くように言われますので、今回も比較のためにVisualStudioで簡単な.NETのWebサイトを作成し、それをKiroで開きます。すると以下の画面に切り替わります。ちょっと画面が小さいと思うので一部拡大。以下のように「Vibe」と「Spec」が選択できます。「Vibe」が他のAIツール同様、都度質問してそれに対してAIが作業を行う形、そして「Spec」が仕様駆動開発で進める場合の選択肢となります。今回は当然ながら「Spec」を。要件定義～設計依頼する内容は以下の通り。前回と同じ（ざっくりとした）依頼にすることでそれぞれの挙動を比較してみたいと思います。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。要件から実装タスクまで段階的に作成してください。」すると早速「仕様を作成します」から始まります。画面上部のタブも「Requirements」「Design」「Task list」と、要件定義→設計の流れを表してます。まずは要件定義が作成されます。Markdownファイルで必要によってはMermaidでの図も使って要件をまとめてくれます。問題無ければ右下の入力欄のところにある「Move to design phase」をクリックして設計フェーズへ進みます。そして設計文書の作成。設計文書の内容の一部は以下の通り。エラーハンドリング等も細かく既定されています。そして、「Task list」、いわゆる実装計画になります。これが終わると実装に入るわけですが、上の画面では見づらいと思いますのでKiroからのメッセージを抜粋しておきます。「これで仕様作成のワークフローは完了です。実装を開始するには、tasks.mdファイルを開いて、各タスク項目の横にある「Start task」をクリックして個別のタスクを実行できます。最初のタスクから順番に進めることをお勧めします。」と、このように仕様が問題無いかを確認してきます。いよいよ実装改めてタスクリストを見ると赤枠部分のように「Start task」というボタンといいますか、クリックできるところがありまして、これをクリックすることでその選択したタスクが実行されます。ちなみにタスクリストにはそれに関連する要件も書かれてますのでわかりやすいです。すると以下のように各タスクが実行され、必要に応じてビルドも細かく実行してくれます。前回のspec-workflowは都度ビルドは行ってくれなかったのですが、普通人間が作業を進める場合もこのように手戻りを小さくするために都度ビルドは実施するわけなので非常に丁寧な対応だなと思いました。実は丁寧さはこれだけでなく、各タスクの内容を見ていると「テスト」「test」という単語が出てきます。よく見ると各タスクにおいてちゃんとテストコードを書いてくれていて、更に（当たり前ですが）テストも実行してくれてます。ちなみにTodoアプリのような「比較的」小規模なアプリでもタスク数は１３個ありまして、都度テストを書いて・実行を繰り返しましたので、とにかくどんどん承認だけを繰り返すだけでも30分以上かかりました（1時間近くかかったかもしれません）。テストコードを通すのにエラーやその対処で意外と手間がかかってしまったこともありますが、とにかく丁寧かつ細かく対応してくれます。そして全ての対応が終わりました。結果として以下のようにTodoアプリが完成しました（ちなみに他のツール同様、ビルドだけでなく起動もしてくれます）アイコンや最初に入力する箇所が赤枠で表示されたりと、あれだけ漠然とした依頼にもかかわず、非常に細かい作りになっています。最後にということでKiroを用いた仕様駆動開発を簡単に試してみました。spec-workflow-mcpもちゃんと仕様書が作られ、それに基づいて実装もされていたわけなのですが、１つのIDEの中で要件定義＜－＞設計＜ー＞タスクリスト＜ー＞実装がシームレスに行き来できる点は非常に優れているなと思いました。先ほど書いた通り非常にきめ細かく対応してくれるので、既存のシステムのちょっとした改造ということであれば最初の画面で「Vibe」を選んでくれればよいのかなと思います。spec-workflow-mcp、github/spec-kit、そして今回のKiroと、全て仕様駆動開発というのがベースにあるものの、それぞれ似て非なるものでした。他のツールにも言えることですが、セキュリティの問題もありますので事前に簡単な小規模のアプリ・システムで使ってみて、それぞれの使い勝手や、自分に合っているかどうかを試してみることをお勧めします。実はこの前にもう１つgithub/spec-kitも試してまして、それもまた特徴のある内容だったのですが、別途紹介してみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

AWS Kiroによる仕様駆動開発

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚ですAIツールの普及につれ、「仕様駆動開発」というものの必要性、重要性が高まってきています。AIツールを使われている方であれば言わずもがなとは思いますが、AIには「よしなにお願いします」というのが通用しません。AIが普及し始めの頃に「プロンプトエンジニアリング」という言葉が出てきましたが、今は「コンテキストエンジニアリング」の方が大事だと言われるほど、如何にコンテキストを正しくAIに共有できるかが重要となります。特に新規に開発するシステム、そしてその規模が大きければ大きいほどその重要性は増していくと思います。そこで以下の４項目、Requirements: 何を作るか（ユーザーストーリー、機能要件）Design: どう作るか（アーキテクチャ、API設計）Tasks: 誰が何をするか（実装タスクの分解）Implementation: 実際のコーディング特に実装前のRequirements、Design、Tasks（要件定義、設計）をしっかり行い、それに基づき開発を進めるということが（AIを使う・使わないに限らずですが）必要となります。以前紹介したSerenaも事前にある程度の粒度までしっかり資料を作成し、それに基づき実装を行うという点では仕様駆動開発に近いものがあります。blog.nextscape.netそして、今、仕様駆動開発を行うためのAIツールが注目されておりまして、その１つがAWSのKiroになります。kiro.devただ、筆者の環境ではKiroがまだ試せる状況に無く、先に仕様駆動開発を試してみようということで色々と調べたところ、以下のようなものが見つかりました。gotalab/claude-code-specgithub/spec-kitPimzino/claude-code-spec-workflow2番目のGithub公式の「spec-kit」を最初に試す予定だったのですが、世の中の情報を見る限り世に出たばかりでまだこれから的な印象がありましたので、更に色々と探してみた結果、spec-workflow-mcpなるものを見つけまして、試してみることにしました（spec-kitもこの後記事にしてみたいと思いますし、きっとまた１～2週間後には評価が変わっている可能性大ですが。。）。github.comちなみにこのspec-workflow-mcpはその名の通りMCPとして利用できるものでVSCodeのマーケットプレイスにもあります。設定しつこいようですが、MCPとして利用できますので今回はCursorで試してみることにしたいと思います。まずはいつものようにCursorの設定画面でNew MCP Serverを選択、以下のコードを追加します。パラメータとして「"--AutoStartDashboard"」を追加することでWebのダッシュボードが利用できます。今まで紹介したMCPと異なる点として"/path/to/your/project"には対象とするプロジェクトのパスを設定してください（少なくてもWindows環境では絶対パスを指定しました）。{  "mcpServers": {    "spec-workflow": {      "command": "npx",      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project", "--AutoStartDashboard"]    }  }}作業開始（要件定義、設計）では、VisualStudioで作ったWebサイトのテンプレートをベースに以下の依頼をしてみましょう。ちなみに既に私はいくつかのMCPを設定・利用してますが、今回は他のMCPはOFF・無効にしています。「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。spec-workflowを使って要件から実装タスクまで段階的に作成してください。」すると以下のようにまずは要件定義から進めてくれます（ちょっとスクリーンショットの文字が小さいかもしれませんが、ブラウザの拡大機能等で見ていただければと思います）。一通り完了すると以下のように要件定義の承認を要求されます。プロジェクト内に「.spec-workflow」というフォルダが作られ、そこに要件定義用のファイル「requirements.md」が作られていることがわかります。ではここで、以下のコマンドでダッシュボードを開きます。npx -y @pimzino/spec-workflow-mcp@latest /path/to/your/project --dashboardしつこいようですが、「/path/to/your/project」には対象としたいプロジェクトのパスを設定してください。以下のようにブラウザでダッシュボードが立ち上がります。ちょっと見づらいかもですが、画面上部のタブで「Approvals」をクリックすると先ほどの要件定義の内容を確認、更に承認を行うことができます。このMarkdownファイルに対してダッシュボード上でコメントも記載出来、更にそれに従ってAIがその先の作業を進めてくれます。要件定義作業で出力されたrequirements.mdの内容を改めて載せておきます。以下のように非機能要件も記載されています。では、次に設計へと進みます。Design Documentとして設計書が作成されます。これも先ほどと同様に承認を行います。Cursorから直接承認できるのかもしれないのですが、ちょっと現時点ではやり方がわからず、止む無く都度ダッシュボードに切り替えて承認を行っています。実装へ設計の承認が終われば実装へと進んでいきます。実装は特に都度承認を求めることなく次々と作業が進められていきます。もしかすると指示の仕方によっては都度承認を要求してくれるのかもしれないのですが、今回はこちらの承認を待つことなく、どんどん実装が進められていきました。差分表示は他のツールと同様、わかりやすい表示になっています。いまとなっては当たり前になってきましたが、ビルドや起動も全部行ってくれます。実は途中うまく立ち上がらず、エラーの共有なども行いましたが、それでもすぐに修正を行い、以下のようにToDoリストのアプリケーションが立ち上がりました。検索機能、タスク一覧、未完了・完了の状態による表示切替もあり、設計通りとなります。まとめということで以上がspec-workflow-mcpによる仕様駆動開発の簡単な一例となります。まだこのツール1つしか試していないため比較はできないものの、確かに仕様駆動開発で求められる資料を作成してくれ、それに基づききちんと実装してくれました。ダッシュボードで詳細に状況を確認し、進捗を管理できるのは非常に良いと思います。ただ、一方でCursorとダッシュボード（ブラウザ）の行き来が必要となっていたのでそこが気になる点ではありました。とはいえ、個人的には許容範囲というか、ほんの少し手間を感じる程度で問題はありませんでした。要件定義、設計フェーズにおけるドキュメントの内容も上に挙げたような簡単な指示だったにもかかわらず細かく記載されていました。今回は簡単な実装内容だったのですが、もっと大規模なものになった場合、要件定義、設計におけるAIとのやり取りも多くなりますし、仕様書自体もその分ボリュームが大きくなると思いますので、そうなった場合に最終的な成果物としてのソースコードがうまく作られるか、そしてそれによって動くシステム、アプリケーションが求めていた内容通りに動作するかが興味深いところです。最初に挙げた他のツール、そしてKiroも近々使えると思いますのでまずはこのspec-workflow-mcpを私の中の基準として比較してみたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

spec-workflow-mcpで仕様駆動開発をしてみる

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です今回はPlaywrightのMCPサーバーを触ってみたいと思います。そもそもPlaywrightとは？というところから書いておきますと、2020年1月31日にMicrosoftによってリリース・発表されたWeb UI自動化テストフレームワークです。テストコードを書くだけで、異なるブラウザ環境でのアプリケーションの動作を横断的に検証することが可能になるというもので、人によっては「Seleniumのようなもの」と言えば「ああ！」となる方もいらっしゃるかもです。そのPlaywrightのMCPサーバーが提供されています。と言われてもちょっとピンとこない方もいるかもしれませんので、百聞は一見に。ということで早速紹介してみます。インストールでは設定を。。の前にNode.js（とnpm）がインストールされている必要がありますので、早速試してみたいとなりましたらまずはNode.jsをインストールしておいてください。次にCursorのSetting画面で「MCP&Integrations」を選び、「New MCP Server」をクリック。そうするとmcp.jsonが開きますので以下のようにPlaywrightのMCPサーバーを設定・定義します。{  "mcpServers": {    "playwright-mcp": {      "command": "npx",      "args": ["@playwright/mcp@latest"]    }  }}MCPを色々と使いこなしている方には言わずもがなの内容となりますが、既に他のMCPを利用している場合はmcp.json内にそのMCPの設定が記載済みとなっているはずです。なので、上記の内容をそのままコピペするのではなく、「追記する」形となりますのでご注意ください。念のためバックアップを取っておくのがよいかもしれませんね。更に注意点としてPlaywrightのMCPサーバーはコミュニティ版とMicrosoft公式版があります。公式版の方が色々安心ですし、高性能ですのでMicrosoft公式版を設定した方がよいかもしれません。で、一旦Cursorを再起動しますとplaywright-mcpが追加・表示されているのがわかります。そして、正しく設定されていればアイコン右下のランプ（？）が緑色になります。もしオレンジ色だった場合はもう一度mcp.jsonを見直してください。実行さて、ではPlaywrightの実力を見てみましょう。Cursorのプロンプト入力欄に以下のように入力します。「PlaywrightでQiitaを開き、先頭の記事を取得してください。更に検索欄に「Playwright」と入力し、その結果のスクショを取得してください。」本当は少しずつ試してもいいのですが、出し惜しみしてもアレなので一気にやってしまいましょう。するとおもむろにブラウザが立ち上がり、Qiitaのページが表示されます。途中経過のスクリーンショットは割愛しますが、TOPページの検索欄にPlaywrightを入力して検索を行い、そして以下の検索結果が表示されるところまでを自動的に実行してくれます。プロンプト入力欄の部分にも実行結果が表示されます。最初にプロンプトでお願いした通り、先頭の記事の内容が記載されてます（上記の画像と一致してますね）。更に検索結果の概要もまとめてくれています。スクリーンショットも保存場所が示されているのでそこにアクセスすると全画面で取得されていました。画像で説明していることもありまして、ちょっと面白味が伝わらないかもなのですが、PlaywrightやSeleniumは元々プログラミング言語でないとブラウザ操作ができません。しかしながらMCPサーバーとして動作させることでこのように「自然言語で」ブラウザを操作させることができるわけです。当社のサイトで試してみるさて、もう少し動作を試してみましょう。当社のWebサイトでは以下のように「ニュース」としてそれぞれの年におけるニュースが挙げられています。そこで以下のようなプロンプトを投げてみることにします。「www.nextscape.netをPlaywrightで開き、２０２５年のニュースを取得してください」そうすると、動画で見せられないのがちょっと残念ですが、TOPページから上で挙げたニュースのページに遷移し、更に２０２５年の各ニュースの詳細ページに次々とアクセスしてくれます。そしてその結果として以下のように取得した結果をまとめてくれます。最後に筆者はAndroidアプリ開発を行っていた頃、AndroidDriverというPlaywrightやSeleniumと同じようなUIテストツールを使ってテストを行っていたことがありまして、スクリプトを書く大変さも理解しています。そういった経験もありまして、自然言語で指示した通りにブラウザが自動的に動くのはなかなかに面白いです。今回は単純にブラウザの操作のみで終わりましたが、本来の目的であるテストとしての利用にも非常に役立ちそうです。是非皆さんもお試しください。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

PlaywrightのMCPサーバーでブラウザを操作する

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚ですOpenAIのコーディングエージェントであるCodexが良さげであるとあちこちで言われていながらもなかなか業務に追われて触れず。。といいますか、Cursor＋Claudeで十分事足りていたこともありまして、これで満足していた部分もあったのですが、8/27にCodex IDE 拡張機能が公開されたので試してみることにしました。これはVSCode等からCodexが使えるというものでして、以下のサイトからVSCodeやCursorで利用可能なCodex拡張機能がインストールできます。developers.openai.comインストール私はCursorメインですのでCursorに入れてみることにしましょう。上のサイトからCursor用のリンクをクリックするとCursorが起動すると共に以下のように拡張機能の内容が表示されますのでインストールします。左側のウィンドウにCodexのアイコンが表示されるようにピン止めをしておき、Codexに切り替えてみます。すると以下のようにサインインを促されますので、クリックしますとブラウザでサインインを求められますので自身のアカウントでサインインします。画像以下のようにCodexのチャット画面が表示されます。デフォルトであればCursorにおけるチャット画面というのはモデルに関係無く右側（右端）のウィンドウに表示されるはずなのですが、Cursorは左側となりまして、別々のウィンドウとなります。つまりはCodexは今までの生成AIにおけるチャット用のウィンドウとは別の専用のウィンドウを持ち、１つのCursor内において同時にCodexとClaudeによるプロジェクト管理、タスク実行が可能になるわけでしてこれだけでもちょっと興味深いものがあります（この理由については別途後述します）。画像Codex用のSettingメニューもありまして、それを開くと以下のようにCodex用にMCPも設定できることがわかります。ちなみに今回はMCPに何も設定しない状態での動作となります。解析・改修では、いつも私が試しているようにVisual Studioで.NETの簡単なウェブページを作成し、解析を促します。解析においては都度承認を求められます。以下のように「this time」と「every time」、つまり「今回」と「ずっと」ということでどんどん進められるのは怖いので全て「this time」にしています。解析結果は以下の通り。まあ、あまり他のツール、モデルと違いは無いような気もします。そしてこれもいつも通り「現在のホームページをもっとモダンでレスポンシブなデザインに更新して、Bootstrap5を使って、カードレイアウトやグラデーション背景を追加してください」とお願いしてみます。すると以下のように作業を開始し、変更点は以下のようにわかりやすく表示してくれます。とはいえ、このあたりは他のツール、モデルでも対応してますね。一通り作業が終わると更新内容を説明してくれます。次にビルドを依頼します。Cursor＋Claudeでは可能でしたが、こちらはどうでしょうか。ちなみに、あえて説明するまでもないかもしれないのですが、自身で別のIDE等でビルドを行い、エラーが出ればそのスクショを撮って共有して。。ということもできます。ただ、画像の認証が出来ない場合もあったり、そもそもそのやり取りの手間も結構大きかったりするのでビルドが実行できるというのはAIツールを扱うにおいて個人的には大きなポイントになります。さて、Cursor＋Claudeではチャットのウィンドウ内、もしくはCursor内の別ウィンドウにビルド結果が表示されるのですが、Codexでは以下のように（といってもわかりづらいかもですが）コマンドプロンプトが別に起動し、そこでビルド状況が確認できます。私だけかもしれないのですが、Cursor＋Claudeではビルドやアプリの実行状況が最初に表示されない場合があったり、次に進めてもらうためにリターンキーを押したりしないと反応が無かったりするのでなかなかもどかしさを感じることが多いのですが、Codexでは（少なくても今回試した限りでは）そういったことは無かったです。あとはそもそもCursor内のウィンドウですと、表示領域も小さかったりするのでこのように別ウィンドウで表示してくれると見やすさとしても個人的には非常に良かったです。ただ、ウィンドウの切り替えが必要になりますのでここは好みが分かれるかもしれません。そして何も言わなくても起動まで実施し、その旨を伝えてくれるのですが、URLにアクセスしても表示されなかったため、「起動できていないよ」と伝えます。するとCodex自身が色々と調べてくれて、自己解決してくれます。再度指示されたURLにアクセスすると以下のように画面デザインが更新されていることを確認できました。ちなみに今まで同様の内容を各ツール・モデルに依頼し、文言が日本語になっていたのは今回が初めてです。日本語でのやり取りを元々お願いしていたのでそこに配慮してくれたのかもしれません。だとすると気が利いてますね。Reasoning effortちなみにチャットウィンドウのプロンプト入力欄の下側にも設定箇所があり、例えば以下の「Reasoning effort」、これに関してCodexに聞いた内容をそのまま挙げておきます。簡単に言えばどこまで深く考えてくれるかどうかの設定ができるというのものですね。上で挙げた通り４段階ありまして、今回はデフォルトのMediumで試しています。「概要意味:モデルが内部でどれだけ時間と計算資源を使って考えるかの目安（思考の深さ/丁寧さの設定）。効果:値を上げるほど、曖昧さ解消や代替案検討などが増え、回答の精度や網羅性が上がる一方、レスポンスが遅くなりやすい。非公開思考:内部推論量を増やす設定であり、推論過程そのもの（思考ログ）は開示されません。使い分け:複雑な設計・デバッグ・要件整理には高め、単純作業や素早い確認には低めが適しています。他設定との関係: 生成の「温度」等と独立ですが、併用で出力の幅や安定性に影響します。」改修後には以下のようにファイル一覧をまとめてくれまして、改めて各ファイルの差分が確認できます。これも使い勝手としては良かったです。仕様書の作成依頼では、他のツール・モデルでもお願いしている仕様書の作成を依頼してみます。実はここで他のツール・モデルとの差が出てきました。Codexの場合、一通り書いて終わりではなく、図やスクリーンショット、API仕様を追加するかどうか促してくれました。なのでお願いしてみます。すると。。更にシーケンス図やサイトマップも書きましょうか？と言ってくれます。何も言わずともどんどん深堀してくれますね。遠慮なくお願いしてみます。すると更にユーザーフロー図の追記やサイトナビゲーションの詳細追加を聞いてきます。（良い意味で）終わらない。。これも依頼することにして、一通りやり取りが完了しました。以下がCodexが書いてくれたMarkdownファイルの内容の一部です。提案してくれたサイトマップやシーケンス図がMermaidで記述されています（Obsidianでの表示結果です）。ということで、依頼している内容がそれほど複雑ではないため、あまり違いは無いかなと思いながら試しましたが、他のツール・モデルよりも一歩先に踏み込んだ対応をしている雰囲気がありますね。当然プロジェクトによっても対応の粒度は変わってきますし、同じプロジェクトでもまた違った内容になる可能性はありますが、更に使ってみたいと思わせる結果でした。モード切替あとはCursorの元々のチャットウィンドウにもありますが、モードの切り替えもできます。これもCodexに聞いた内容をそのまま載せておきます。今回はAgentモードでの実行結果となります。「Chat:会話のみ。コマンドやファイル操作は行わない安全モード。Agent:端末コマンドやファイル編集を行う自動化モード（通常はサンドボックス＋承認付き）。Agent (full access):ほぼ制限なしで実行・編集・ネットアクセスまで可能なフル権限モード。■Chat目的: 設計相談、コード解説、手順提案などテキスト応答に特化。実行権限: なし（コマンド実行・ファイル変更・ネットアクセス不可）。リスク: 最小（誤操作の心配なし）。用途: 仕様策定、設計レビュー、軽いQA。■Agent目的: 実際のリポジトリでの編集・ビルド・テスト等を自動化。実行権限: サンドボックス内でのコマンド実行・ワークスペース内のファイル編集が可能。ネットや外部書き込みなどは制限。承認フロー: 必要な場面で都度承認（on-request など）。破壊的操作や外部アクセスは確認を求める。リスク: 中。作業は基本的にワークスペース内に限定される。用途: 既存コードの修正、ページ追加、スタイル調整、ローカルビルド/テストの実行。■Agent (full access)目的: 制限なく素早く一連の作業を完了。依存インストールや外部ツール実行も含む。実行権限: 広範（例: 任意ディレクトリ書込、パッケージインストール、ネットアクセス、プロセス起動/停止など）。承認フロー: 省略または最小。自動で実行される想定。リスク: 高。意図しない変更や環境破壊の可能性があるため、バージョン管理とバックアップ前提。用途: 開発マシン上でのフル自動化、依存環境の整備、長いバッチ処理。」最後にまだ公開されて間もないですが、このCodex IDEの拡張機能、巷でもなかなか評判が良さそうです。私がCursor＋Claudeを使っているというのは最初に書いた通りなのですが、Claudeにとってちょっと難しい質問になると思考がループしてしまう場合がままありました。そういった場合にChatGPT5にその質問だけ依頼するとあまりコンテキストを伝えなくても結構良い結果を返してくれることがあり、GPT5はなかなか良さげだぞという印象がありました。なので、先ほど書いたようなループが発生した場合はセカンドオピニオン的にChatGPT5に質問を行い、「ChatGPTはこう言っていたぞ」とClaudeに返すとまた違った反応が得られて作業が進む場合が多々あったのです。そういった使い方をする場合において今まではChatGPT5はブラウザでClaudeはCursorで。。というように切り替えが必要だったのですが、これがCursor１つで完結することになるわけで個人的にも非常に便利な機能となります。次々と各モデル、ツールにおいて便利な機能がどんどん出てきますね。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

Codex IDE拡張機能レビュー

本記事は、ネクストスケープ社内で開催された「AI活用共有会」の議事録をもとに、AIが記事化した内容です。Yanai: 「お疲れさまです！ 今回もざっくばらんにAIの活用ネタを持ち寄って、情報交換していきましょう。」――こうして始まった第3回AI活用共有会。1. Claude Code 活用のリアル事例Yanai: 「僕のプロジェクトでは Claude.md にプロジェクトの知識やルールをまとめています。Claude Codeに“設計”と“実装”の両方を担当させていて、設計者としての振る舞いと実装者としての振る舞いを切り替えられるようにしてるんです。その中にはAIに取ってほしい共通のふるまいや、プロジェクト固有の共通知識も書き込んでいます。」Yasuda: 「なるほど。AIに役割を与えておくわけですね。」Yanai: 「そうなんです。例えば design コマンドを実行すると“設計者として振る舞い、設計ガイドラインを参照する”。逆に develop コマンドを実行すると“実装者として振る舞い、コーディングガイドラインを読み込む”というように。こうして役割を明確にすることで、指示の精度が上がるんです。」Yasuda: 「それならAIが迷わなくて済みそうですね。人間の開発メンバーを切り替える感覚に近い。」Yanai: 「ええ。そのうえで、Microsoft Docやプロジェクトで使うツールやソリューションが提供しているMCPサーバーを組み合わせて、“必ずこのルールに従って設計・実装せよ”と指定しています。こうすることでAIのアウトプット精度を上げられますし、自己流で暴走するリスクも減らせるんです。」Yasuda: 「なるほど、プロジェクト知識と外部サービスの仕様を両方セットにすることで、“AIをチームメンバー化”してるわけですね。」Yanai: 「そう。この仕組みは数か月前から動いているプロジェクトで実践しています。ただ、今ならさらに進化させて“サブエージェント”を使い、設計、実装、レビュー、ドキュメント作成といった専門分野ごとにAIを細かく分担させる──そんな試みもやってみたいと考えてます。」AI駆動開発はSpec駆動が良いYanai: 「AIにゼロから開発をさせる場合は“Spec駆動”のアプローチが一番効果的だと思います。要件を仕様（スペック）に落とし込んで、その範囲内で設計・実装を任せるんです。」Teruyama: 「つまり、何もない状態から新規開発するなら、Spec駆動でAIを動かすのがベストだと。」Yanai: 「そう。設計ドキュメントやコーディングガイドラインをあらかじめ組み込んでおけば、“人間ならこう書く”という基準に沿った成果物をAIが自動で生成できます。さらに重要なのは、設計ドキュメントを準備することでAIが“考える・実行する範囲”を明確に限定できる点です。この“範囲を限定する”という考え方が非常に強力なんです。」Yasuda: 「ただ、既存システムの改修では事情が違いそうですね。」Yanai: 「その通り。既存の設計書やソースコードがある場合は、Spec駆動に乗せきれないケースもあります。その場合は対話モードで“この範囲だけ修正していい？”と確認しながら進める方が現実的です。」2. AI活用の落とし穴と「コンテキストエンジニアリング」Yasuda: 「でもAIに任せすぎると、思わぬ落とし穴もありますよね。たとえば意図しない修正を加えてしまったり、勝手にスクリプトを作って実行してしまったり。」Yanai: 「そうなんです。だから僕は重要な部分には“重要”タグをつけて注意を促したり、コンテキストを絞り込んで与えるようにしています。」Yanai: 「最近よく言われてるのが“コンテキストエンジニアリング”。必要な情報をいかに整理して渡すかが精度を左右するんですよね。」AIは万能ではなく、入力次第で暴走もします。制御のカギは「コンテキストの設計」にあるようです。3. 新ツール「Serena」と「Codex」の可能性Teruyama: 「そういえば最近“Serena”が注目されていますよね。依存関係を自動で解析して、プロジェクトの構成や技術スタックをドキュメント化してくれるんです。ちょうど先日、ネスケラボの記事でも紹介されていましたよね。」Yanai: 「読みました！ あれを見ると、プロジェクトに必要なベース情報を自動的に整理してくれるのはかなり助かりますね。開発初期にやりがちな“手作業での情報整備”の負担が軽くなりそうです。」Teruyama: 「そうなんです。さらに大規模コード修正ではCodexが活躍します。リポジトリ全体を眺めて修正プランを提案し、Pull Requestまでまとめてくれるので、レビューも楽になります。」新ツールの活用は、AIによる開発支援をさらに現実的なものにしているようです。4. GPT-5 の進化と課題Yanai: 「最近GPT-5を試してますが、Sonnet-4に比べて精度が高いと感じます。」Teruyama: 「僕もそう思います。“Thinkingモード”が追加されて、複雑な問いには強いんですけど、その分応答が遅くなるんですよね。」Yanai: 「それと最近のGPT-5、“頑固”じゃないですか？ 間違いを指摘してもなかなか認めない（笑）」Ibaraki: 「僕もやられました。正しいエビデンスを見せるまで首を縦に振らないんですよ。」Yanai: 「ただ、開発現場では早速モデルを切り替えて実践しているチームも多いですね。評判はかなり良くて、“コーディングでの手戻りが減った”という声も聞いています。」進化したGPT-5は頼もしさが段違い。細かい工夫よりも、まずは“ガンガン使う”。使うほど成果が返ってくる——それが今回の実感でした。5. エージェントモードの現状と展望Yanai: 「ところで、ChatGPTのエージェントモードを実際に使っている人って、どのくらいいるんでしょう？ 社内ツールの操作や経費精算なんかに使えたら便利そうですよね。」Teruyama: 「でも今のところ精度はイマイチです。OKボタンを押せばいいのに迷い続けたり……そういった報告がWebでも散見されますね。」Yanai: 「たしかに。僕も海外のホテル予約をAIに頼もうとしたんですが、SPA構成のサイトでは動作してくれなかったんです。動作しないサイトもまだまだ多そうだと感じました。」Yasuda: 「昔のブラウザ自動操作っぽいですね（笑）。」便利そうで、まだ実用には課題が多いエージェントモード。しかし将来の業務効率化のカギになる可能性も大きいと感じられました。6. アイデア壁打ちと大規模データ活用Yasuda: 「僕は大量データを渡して“使い道を考えてほしい”って頼んでみたいんですけど、難しいんですかね？」Teruyama: 「アイデア壁打ちとしてならAIは結構優秀ですよ。漠然としたテーマを投げても、やり取りするうちに具体的な形になります。」Yanai: 「ただし大規模データをそのまま読ませるのは難しいですね。データの読ませ方には工夫が必要です。」AIはアイデア創出の相棒としては有効。ただしデータ処理の現場では“分割・要約・整理”といった工夫が不可欠です。まとめ今回の共有会では、Claude Code による設計・実装の自動化ノウハウAI駆動開発にはSpec駆動が効果的 という知見コンテキストエンジニアリング の重要性Serena / Codex といった新ツールの活用事例GPT-5 を“まず使い倒す”スタンスで価値を引き出す実感エージェントモード の可能性と課題AIをアイデア壁打ち相手にする活用法といった実践的な知見が共有されました。次回のDevscAIpeLABでは、さらに具体的な事例や新ツールの実運用に関する議論が深まるとよいですね。

【AI活用共有会#4】Claude Code・Serena・GPT-5、進化するAI活用最前線

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚ですChatGPT、Claude のDesktop版、Claude Code、Cursor、そしてBigQuery in Gemini等、色々と触ってきまして、BacklogのMCPサーバーも活用しています。まあ、主要なところは一通り触れただろうかというところでふと見渡してみたところ、SerenaというMCPサーバーが良いという記事を以前もみかけていたのですが、スルーしていたことに気づきました。github.comそこでちょっと試してみたいと思います。MCPサーバーなので当然ながらClaude Code、Cursor等で利用可能です。私がざっとX等で見た限りではClaude Codeとの組み合わせが多かったようなのですが、私は今のところCursorが主に使っているツールとなっておりますので、Cursorで試してみたいと思います。今回の作業を始めるにあたりまして、私はCursorのProプランに加入していることも事前にお知らせしておきます。インストール・起動まずはインストール。最初にPythonパッケージマネージャーuvをインストールするとのこと。なのでPowerShellからpowershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"と実行。次にCursorのmcp.jsonファイルに設定を追加します。今回はグローバル設定で、Cursor Settings > Tools & Integrations > "New MCP Server" をクリックします（既に下のスクリーンショットではSerenaが設定されてますが、ご容赦を。。うまく設定できていればこうなります）。以下の設定を追加します。{  "mcpServers": {    "serena": {      "command": "uvx",      "args": [        "--from",        "git+https://github.com/oraios/serena",        "serena-mcp-server",        "--context",        "ide-assistant"      ]    }  }}Cursorを再起動して、Serenaが正しく動作していれば以下のWebダッシュボードでログ確認等が可能です。http://localhost:24282/dashboard/index.html（08/25追記）社内のメンバーにもSerenaを試して方がいまして、その方は上の流れだけではうまくSerenaが動かず、以下の環境変数が必要だったようです。$env:Path = "C:\Users\{username}\.local\bin;$env:Path"私の場合、Backlog等他のMCPを既に導入していたためにすんなり設定できた可能性があります。ご容赦＆ご注意ください。試してみるで、早速どんなに違うのだろうということで前回、前々回の記事におけるVisual Studioの.NET ウェブアプリのサンプルを元にプロジェクトの解析やTOPページの改修を試したのですが、規模が小さすぎるのかSerenaの有り無しでほぼ反応が変わらず。。blog.nextscape.net様々なサイト等を見るとSerena大規模プロジェクトでより効果を。。ということなのでどうしようかなと思っていました。そこで思い出したのが、Serenaは最初にプロジェクトのスキャンを行うことでプロジェクトの構造を解析し、以下のようなマークダウンファイルがいくつか作られ、それをベースにコード生成等を手伝ってくれるという内容でした。プロジェクト全体の構造図主要なファイルの関係性コードパターンの分析依存関係のマップこれらの初期化処理、準備処理等を実行した上で改めて改修をお願いすることで結果はまた違ってくるのではと思い、早速試すことに。最初に上の機能を知ったのはClaude Codeを使っている方からの情報で、Claude Code上で「/mcp__serena__initial_instructions」というコマンドを叩くことで行われるとのこと。となると、Cursorではどうするのかなと思いつつ、まずはそれすらも聞いてしまえばいいじゃないかということでCursorにお願いしてみます。実際に試した時には上のcheck_onboarding_performedで処理が止まってしまったので、一旦コマンドの実行を強制終了してオンボーディングとは？から聞いてみます。私が上で書いた初期化・準備処理がオンボーディングということですね。そして、何故コマンドが止まってしまったかと言いますと、今回作ったWebアプリが実行中だからということも（聞いていないにも関わらず）教えてくれまして、そこであらためてWebアプリの停止と、オンボーディングの続行をお願いしてみます。上で挙げたようにSerenaのコマンドを知らなくてもどんどん進めてくれます。その結果、プロジェクトのディレクトリ直下に.serenaフォルダが作られ、その配下に上で書いた各種情報がまとめられたMarkdownファイルが作られたことが確認できます。すばらしいですねー。。ちなみに作ってくれたmdファイルは以下の５つ。１つ目はコードスタイルと規約。AIが修正する場合があるということで必要になるわけですね。次に開発ガイドライン。そしてプロジェクト概要。次に開発用コマンド。私は基本Cursor利用時はビルドも全てCursorにお願いしているのですが、（私が利用した場合の）Cursorはちょいちょいそのプロジェクトに応じたビルド方法であったり、Visual Studioのパスを忘れてしまうようなので地味に便利かなと思いました。タスク完了時のチェックリスト。これもいいですね。品質をこれである程度担保できます。というような形で単純なWebアプリにも関わらずかなり細かく情報を記録してくれています。これらはこちらで書き換えることもできますし、ある程度変更が加わったら再度オンボーディングを行うことで常に最新の状態にしておくことができます（大幅な変更が入ると自動的に更新されるという記述もあったのですが、そこはまだ確認できていません）。今までは私の方で意図的にこういったプロジェクト情報をMarkdownファイルで出力してもらっておいて、新しいチャットで会話する場合に都度確認してもらっていたのですが、少なくてもそういった手間が無くなり、更に私が自分でお願いするよりももっとしっかりした資料を作ってくれます。個人的には既にこの時点で高評価でした。そして（今更書くなという感じですが）Serenaを使うことでプロジェクト全体の文脈を完全に理解（セマンティック検索）し、コードを「意味」で理解してくれ、検索や編集がより効率化されるとのこと。あらためて解析ということで、大して変わらないだろうという悲観的な思いも持ちつつ、今回のサンプルプロジェクトの解析を一応試してみます。以下はSerenaでスキャンする前。割愛していますが以下の画面以外にもう１ページ程度情報が出力されています。Serenaの導入前はこれでもまあなかなか詳しく書いてくれてるね、という印象でした。次にスキャン後。２ページ載せてますが、もうプラス３ページ程度の情報が出力されまして、明らかに解像度が上がっています。これにはちょっと驚きました。まとめということで、まだ本格的な利用には至っていないものの、かなり期待できる内容になりました。他のMCPサーバー同様、簡単に利用でき、既存のAIツールを更に賢く便利にしてくれるSerena。まだ大規模プロジェクトでは使っていないものの、かなり期待できそうです。ただ、AIツールと同様、扱う内容等、セキュリティ周りには十分にご注意ください。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

MCPサーバー「Serena」を触ってみた

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です8月8日にChatGPT-5がリリースされ、では早速。。とCursor を開いてみたところ、Cursor CLIが公開されたという通知が来ていました。少し前にClaude Codeも触ったこともあり、比較するならば早い方がよいだろうということで早速試してみました。ちなみにCursor CLIはこの記事を書いている段階ではまだベータ版となります。更に後述しますがWindowsはWSLでの動作であり、また、筆者はCursorのProプランを購入しています。インストール・実行準備まずはcurlコマンドでインストール。特に問題無く完了しました。で、上の画面で指示されているようにパスを通して。。とあるのですが、ここでふと気づいたのが前述の実行環境について。以前のClaude Codeのように現時点（25/08/13）のCursor CLIはWindows上では動かないため、WSLを起動します。以下のようにbashでパスを通して、cursor-agentコマンドでバージョンを確認。無事実行できました。そこでcursor-agentで改めて実行しますと以下のようなタイトルが表示されます（画像だとよくわからないと思いますが、右側はCursorのアイコン画像がぐるぐるアニメーションしています）サインインを促されるのですが、WSL環境のためかうまくいかず、画面に「このURLアクセスしてログインしてね」的な文章が表示されますのでそのURLを叩いてブラウザを起動し、そこからサインインします。以下がCursor CLIのログイン画面。無事ログイン完了しました。そうしてコマンドプロンプトに戻るとClaude Codeと同じようにプロンプトの入力待ちとなります。Claude Codeであれば「/init」コマンドで設定ファイルの作成やプロジェクト解析をしてくれたのですが、パッと見そういったコマンドは無さそうでしたので「現在のプロジェクトを解析してください」とお願いしてみます。すると以下のように色々と詳しく解析してくれました。以下の画面はあくまで一部でして、実際は３ページ分ぐらい情報を出力してくれています。Cursor CLIによる改修では、Claude Codeの時と同じプロンプトで改修を依頼します。「現在のホームページをもっとモダンでレスポンシブなデザインに更新して、Bootstrap5を使って、カードレイアウトやグラデーション背景を追加してください」するとしばらく考えた後に処理が進み、ソースコードの改修差分が以下のように表示されます。コードの内容が省略されている場合は画面に表示されている通り「Ctrl+r」で全て表示されます。このあたりの差分の表示の仕方はClaude Codeと同じです。そして以下のように改修が終わった旨が表示されます。Claude CodeではToDoを最初に示し、都度ユーザーに対してこれで進めてよいかどうかを確認してきたのですが、今回は一気に実装終了まで進めてきました。これがCursor CLIの特性なのかどうかは一概に判断できないのですが、もしこの記事を見てCursor CLIを試そうと思った方はご注意ください。さらにもう１つ「ん？」と思ったところがありまして、Claude Codeであれば確認することなく一気にビルドまで進んでくれました。そこでビルドをお願いしたところ、それでもユーザー側で実施してほしいとのことで手順を示してくれます。もしかするとWSL環境ということも関係しているのかもしれません（Cursor CLI自身がWSLでの手順も提示してくれてますが。。）。とりあえずVisual Studioを立ち上げ、ビルド・実行したところ、以下のようにTOPページが変更されていることを確認できました。仕様書作成さて、Claude Codeの時と同様、改修内容を仕様書にまとめてもらいます。すると以下のようにコマンドプロンプト上に仕様書としての内容が表示されました。Markdownファイルに出力されることを想定していたのですが、言葉が足りなかったようなので改めてMarkdownファイルへの出力依頼を。。そうすると無事プロジェクト直下にMarkdownファイルを出力してくれました。所感１つの環境、ツールにおいてビルド、実行ができる強みというのはやはり非常に大きく、「現時点で」Windows＋C#で開発を行いたい方はまずはClaude Codeで開発した方が良いかもしれません。また、Claude Codeを試した際はファイルの修正に関して１つ１つインタラクティブにやり取りしてくれましたので、「現時点では」Claude Codeが良いのかなというのが個人的な感想になります。Claude Codeは事前にちゃんとToDoを明確にしてくれるところも個人的には高評価でした。ただ、X等でのコメントを眺めているとClaude Codeよりも良さげ、と書かれた内容も多く、言語や環境の違いで評価は大きく変わってきますし、何よりもベータ版ですのでまだまだこれから。。というところかと思います。日進月歩のAI界隈ですので、このCursor CLIも正式版がリリースされ、そしてWindowsに正式対応されたタイミングで改めて触ってみたらCursor  CLIの方が良かったとなる可能性は非常に高いです（上で「現時点で」と強調したのはその意味です）別の記事でも書いてますが、AIツールはプロンプトはもちろん、言語やその規模に応じて同じモデルであっても色々と反応が異なります。皆さんも是非色々試してみてください。ちなみに先ほど調べたところ、Claude Codeが正式リリースされたのは5月中旬頃、そしてWindows版に正式対応したのがその2カ月後の7月半ばですので、Cursor CLIのWindows版もきっとそのくらいのスピードで対応してくれるかもしれません（Cursor CLIは現時点ではベータ版ですのでそこの違いはありますが）。引き続きAIに関する情報をキャッチアップしていきたいと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。 nextscape.net（以下当社お問合せフォーム）Microsoft Forms