ネスケラボ

はじめに株式会社ネクストスケープ 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

Windows環境でCursor CLIを試してみる

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です前回の私の記事から約1カ月半経ちました。AI界隈も１カ月半も経つとまた更に色々と動きがありまして、私個人としてはコードを書く時はCursor＋Claude、コードに関係無いこともClaude for Desktopで。。というですっかりClaudeばかり使う毎日でした。社内では私に限らずあらゆる部署でAIによる開発が行われており、Claude以外にも様々なAIツールが利用されておりまして、共有会等も開かれております（以下の記事、第２弾もありますので是非）。blog.nextscape.netClaudeが普段使いとなっていた私もClaude Codeはまだ触っていなかったため、キャッチアップしなくてはという思いもありまして、やや今更感はあるものの、Claude Codeのインストールから始まり、色々と試した結果を書いてみたいと思います。今まではLinux、Macでしか動かせなかったということも食指が動かない理由だったのですが、早くも先月7月半ばにはWindowsで動かせるようになったということも今回のきっかけの１つではあります。ちなみに私はClaudeのProプランを購入しておりますのでその前提で書かせていただきます。Claude CodeインストールまずはnpmでClaude Codeをインストールします。インストールは上記のスクショ通りあっさり終わりました。さて、次はClaude Codeの起動なのですが、その前に今回Claude Codeの対象とするのはVisual Studio2022で作成した.NETのWebサイトのプロジェクトになります。とりあえず何も手を入れず、サンプルとして作られた直後の状態から始めます。コマンドプロンプトでプロジェクトが存在するディレクトリに移動し、Claude Codeを起動します。すると以下の通り画面表示についての選択画面になります。今回は先頭のDark modeで。すると以下のようにWelcome画面が表示されて、１と２の選択肢、いずれかを選ぶように促されます。この選択肢ですが、１番目は「Claude account with subscription」、つまり、一般ユーザー向けのClaude.aiのアカウントでProプランなどの月額サブスクリプションを購入している方はこちらを選ぶ形になります。もう１つのAnthropic Console accountはAPI開発者向けのアカウントで、プログラムからClaudeにアクセスするためのAPI利用する人向けです。もう少し言い換えると自分でアプリケーションを開発してClaudeのAPIを組み込む開発者が使うものになりますので、今回は１を選びます。すると、以下のようにブラウザが開きますのでログインを行います。ログインが成功すると以下の表示が。。 そして、また選択肢が出てきます。これはClaude Codeのセキュリティに関する注意事項画面となりまして「Claudeは間違いを犯す可能性がある」「信頼できるコードでのみ使用すること」等の注意事項が表示されてます。Claude Codeは強力なツールですが、AIが生成するコードをそのまま実行するのは潜在的なリスクがあるため、このような警告が表示されています。Enterキーを押すと次に進めますが、まずはこれらの注意点を理解してからご利用ください。特に、Claudeが提案するコードは必ず内容を確認してから実行することが重要です。更にClaude Codeが特定のフォルダへのアクセス許可を求める確認画面が表示され、以下のいずれかを選びます。１．Yes, proceed - 許可して続行２．No, exit - 許可せずに終了今回のプロジェクトの中身のファイルが信頼できるものであれば「1」を選択して続行します。もし不明なファイルが含まれている可能性があるなら、先にフォルダの内容を確認してから判断することをお勧めします。その結果、以下のようにClaude Codeが正常に起動し、メイン画面（というのもちょっとおかしいですかね。メインの文章？）が表示されます。Claude Codeによるコード改修では、いよいよコード改修を試みてみましょう。現時点でのコマンドプロンプトの表示内容を見ると、現在のディレクトリ「C:\git\WebApplication1」が表示され、利用開始のヒントが表示されてます。日本語に訳すと以下の通り。１．/initを実行してCLAUDE.mdファイルを作成（Claude向けの説明書）２．ファイル分析、編集、bash/gitコマンドなどでClaudeを活用３．他のエンジニアと同じように具体的な指示を出すと良い結果が得られる下部のプロンプト（Try "refactor <filepath>"）で、Claudeに自然言語でプログラミングタスクを依頼できます。例えば「このファイルをリファクタリングして」「新しい機能を追加して」などと指示できるわけです。ここまで来ると他のAIツールと同じですね。まずは指示通りrun /initで初期化を行いましょう。すると、 ClaudeがWebApplication1フォルダの中身を調べ、ASP.NET Coreのウェブアプリケーションだと認識し、複数の設定ファイル（.csproj、appsettings.jsonなど）を発見します。次に初期化の提案、つまり、Claudeがdotnet restoreコマンドの実行を提案してくれます。.NETを使われている方には言わずもがなですが、このコマンドはNuGetパッケージを復元するコマンドであり、プロジェクトのビルドに必要な依存関係をダウンロードしてくれます。このサンプルプロジェクトを作った時点でビルドとデバッグ起動も行っていますので、このコマンドも正直不要ではあるのですが、今回はアドバイスに従ってみましょう。すると、dotnet restoreが実行し、更にビルド及び実行を促されますので、それにも従って進めていきます。サラッと書きましたが、これらの作業は本来Visual StudioやそのSDKで自分たちでやらなければならない作業でした。今回は全てClaude Codeがやってくれます。更に実行もしてくれて、https://localhost/xxxxにアクセスしてね。と言われたので、言われるがままにURLを叩くと以下の画面が表示されます。Claude for DesktopやClaudeのWeb版しか使っていない方ですとプロジェクト全体に対してコード実装・改修を行う経験が無いかもしれませんのでこれだけでも便利さを痛感するかもしれませんね。では、いよいよコードの改修を行っていきましょう。以下のように「現在のホームページをもっとモダンでレスポンシブなデザインに更新して、Bootstrap5を使って、カードレイアウトやグラデーション背景を追加してください」とざっくり指示を出してみます。すると以下のように自らTodoを挙げてくれて、その通りに作業を進めていってくれます。ソースコードを変更した場合は以下のように差分を表示し、更新して良いかどうか聞いてくれます。以下も同様で、改修に対して確認を取ってくれます。結果、以下のように完了した旨を連絡してくれました。エラーの文字が見受けられたので念のため聞いてみます。dotnet runコマンドのタイムアウトで問題無いとのこと。そこで表示されたURLにアクセスすると先ほどの殺風景な画面から以下のような画面へと変わっていることが確認できます。仕様書作成Claude Codeでできることがコード改修だけではないことを確認するため、ここまでの改修内容について仕様書の作成を依頼します。すると以下のようにMarkdown形式で仕様書を作成します。「ホームページ改修仕様書.md」というファイルを作ってくれたようなのですが、どこに作成したかわからないので作成場所を確認します。すると以下のような回答が。。実際にエクスプローラーで確認しますと確かに存在しますね。以下が上記のファイルをVS Codeで開いた結果です。CLAUDE.mdファイル設定最初のやり取りは英語で回答していましたが、今後は全て日本語でやり取りしてもらいたいと思います。その場合はCLAUDE.mdファイルを作成することで設定できるのですが、それも自分で作るのではなくお願いしてしまいましょう。すると、以下のようなお約束事を設定してCLAUDE.mdファイルを作ってくれます。プロジェクト概要も書いてくれてますね。すべての説明とコメントは日本語で記述してくださいユーザーとのやり取りは日本語で行ってくださいコード内のコメントも日本語で書いてくださいClaude Code for VS CodeコマンドプロンプトではUI・UX的に物足りないという方にはVS CodeでClaude Codeを使えるようにすることもできます。Claudeを提供しているAnthropic社が以下のように公式の拡張機能を用意してくれてますのでそれをインストールします。marketplace.visualstudio.comもしくはVS CodeのTERMINALでインストールすることもできますが、いずれにしても無事インストールが終わると最初に紹介したようなClaude Codeのメイン画面が表示され、VS CodeでClaude Codeが使えるようになるわけです。ファイル共有ここまで見てきて、ある程度色々とAIツールを触った方であれば画像等のファイル共有はできるだろうかと思った方もいらっしゃるかもしれません。実際、Claude for DesktopやCursorで入力エリアに画像を貼り付けて共有し、その画像に関して質問するといったことをしている方もいらっしゃるかと思います。試してみた結果としてはこれも可能でした。例えばWindowsにおいてコマンドプロンプト上でClaude Codeを利用している場合、テキストファイルや画像ファイルを共有したい場合にはそのコマンドプロンプトにドラッグ＆ドロップしてみてください。先ほど紹介したClaude Code for VS Codeのサイトのスクリーンショットをpngファイルで保存し、コマンドプロンプトにドラッグ＆ドロップしますと以下のように[Image #1]と表示されます。そこで更に以下のように質問します。すると以下のように説明してくれます。合ってますね。テキストファイルもドラッグ＆ドロップというよりはパス指定になりますが同じように読み取ってくれます。Excelファイルも試してみたところ、こちらは駄目でした。Claude for DesktopであればExcelファイルも読み取ってくれますので扱えるファイルに違いや制限があるようです。最後に最初に書いた通り、今まではCursor＋Claudeでも間に合ってはいたのですが、当社の共有会でも話題に出ているようにAIツールは同じモデルを使っていてもそれぞれに強みであったり、得手不得手があり、色々と使ってみることも非常に大事ではありますので、Claude Codeももう少し試してみたいと思います。社内でも非常に評判が良いのでもしかするとこちらがメインになるかも。。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

WindowsでClaude Codeを触ってみた

「AIがコードを書く時代」と言われる昨今、本当に“人間は手を動かさなくてもいい”ところまで来ているのか？第2回となるAI活用共有会では、そんな問いに真正面から挑んだ実践例が共有されました。照山さんは、ノーコードAI開発環境「Cursor」を活用し、Webアプリケーションをほぼ“コードを書かずに”構築。AIとの対話を通じて、ゼロからサービスが生まれていく過程は、まるでエンジニアがAIとペアプロをしているような感覚。だがその裏には、AIならではの落とし穴や“壊されるリスク”も潜んでいました。本記事では、Cursor体験と参加メンバーとのリアルな議論から、「AIと協働する開発」の現実を掘り下げていきます。イントロダクション：AIとの「協働開発」はどこまで進んだ？「AIがコードを書く時代」——そんな言葉を聞いたことがある人も多いはず。でも実際のところ、AIは“どこまで”開発の役に立つのか？そして“どうやって”活用するのか？第2回AI活用共有会では、照山さんが自身の体験をもとに、AI開発環境「Cursor」を使ったノーコード開発のリアルを共有してくれました。彼が掲げたのは「AIと協働して、コードを書かずにWebアプリを開発できるか？」というチャレンジ。その実例を通じて、AI開発の可能性と落とし穴が浮かび上がりました。開発テーマ：ビジネス向けトラッキングソリューションの構想発表の冒頭で紹介されたのは、AlterLockデバイスを活用した「ビジネス向けトラッキングソリューション」。もともとコンシューマー向け製品として展開していた技術をベースに、より汎用的なアセット管理・位置情報管理システムを目指したものです。アセット（管理したいモノ）にデバイスを紐付け、ジオフェンスやバッテリー通知なども含めて一括管理する仕組み。マルチテナント構成、ユーザー管理、組織管理といった機能まで含まれた本格的なWebアプリを、Cursorを使って短期間で実装しました。Cursorでの開発体験：1行もコードを書かずにアプリができる？「私はこの開発で、一行もコードを書いていません」VS CodeベースのCursor上で、チャット形式で指示を出しながらプロジェクトを一から構築。まずはユーザー管理機能を、次に二段階認証、そして資産情報の管理やマップ表示まで。驚くべきは、それらを“ペアプロ”のようにAIとやり取りする中で完成させていったという点です。画面のスタイル修正やタイトル変更など、ほんのわずかな微調整を人の手で行ったのみだったそうです。便利さの裏側にある注意点：勝手に壊すAIの一面とはいえ、良いことばかりではありませんでした。Cursorに大量のコード生成を任せた結果、「知らないうちに他の画面に影響が出ていた」「スタイルが破壊された」「DBテーブルが重複してできていた」といったトラブルが頻発。「全体の構造を把握しているわけではなく、コンテクストが限定的」と照山さん。特定のファイルや機能だけを操作させるように明示的に制御しないと、意図しない修正が生じるケースも多かったと語ります。Claudeとの比較活用：やさしい？丁寧？それとも壊し屋？この日、参加者からも活用事例が共有されました。開發さんはCursorとClaudeを併用し、Cursor上でClaude Codeの出力も活用していたとのこと。「Claudeは丁寧だけど、文脈を見ずに壊すことも多い」とのコメントがあり、結局のところ“人間の目でレビューする必要がある”という点は一致した見解に。便利であるがゆえに、少しの油断でシステム全体が破綻しかねない。これはAI開発ツール共通の課題といえるでしょう。セキュリティとパフォーマンスは人間が守るセキュリティの観点でも注意が必要でした。管理者専用機能の制御が効いていなかったり、SQLがループで数百回実行されるような非効率な実装があったりと、放置できない問題も。そのたびに指示を変えて、修正を重ねていく必要がありました。「AIは実装してくれるけど、セキュリティやパフォーマンスの意図までは汲み取らない」ことが明確になったといいます。Cursor＋Codex＋ChatGPT：AI三刀流開発術照山さんはCursor以外にも、CodexやChatGPTと併用することで、AIを「分担」して使う工夫をしていました。外出先で機能追加をしたいときにはCodexで指示しておき、帰宅後にマージして検証、といったワークフローも可能になったといいます。また、実装方式から調査して、どの技術を採用するか検討する場面では普段から使い慣れているChatGPTを使っていました。まさに“AI三刀流”。それぞれの強みを活かして使い分けることで、より柔軟で効率的な開発が実現できるのです。対話形式が鍵：「一緒に作る感覚」が生む開発体験の変化今回の取り組みで印象的だったのは、「AIと一緒に作っている感覚」のリアリティでした。「要件を全部書いて渡すのではなく、チャットで段階的に指示を出しながら一緒に組み立てる」という手法は、従来の受託開発やウォーターフォール型開発とは全く異なる体験です。参加者からも「対話しながら進めると自分も理解が深まる」といった声がありました。まとめ：AIを開発パートナーにするために大切なことCursorは、確かに“コードを書かずに開発ができる”夢のようなツールかもしれません。しかし、それを実現するには「限定的なコンテクストでの指示」「レビューと修正」「目的意識のあるドキュメント整理」など、人間の戦略的な介入が不可欠です。AIは開発者の“補助”ではなく、いまや“協働者”になりつつあります。この共有会が示したのは、AIと人間が信頼関係を築きながら共にものづくりをする、新しい開発のかたちでした。次回の共有会では、どんな“協働”が生まれるのか。ますます楽しみです。第1回の記事はこちら。blog.nextscape.net

【AI活用共有会#2】Cursorで挑むノーコード開発！AIと“ペアプロ”してみたら分かったこと

「AI使ってる？」を聞ける場所、つくりました2025年、AIは「一部の先進ユーザーのもの」ではなく、「みんなが使って当たり前」な存在になりつつあります。でも、使っている人が多いからこそ、こんな疑問も生まれます。「他の人はどう使ってるの？」「あのツールって実際、現場で役に立ってるの？」ネクストスケープ社内の有志によるAI推進プロジェクト「DevscAIpeLab」では、そんな声に応える場として、ゆるく情報共有できる「AI活用共有会」を定期開催することにしました。第1回は「MCP（Model Context Protocol）と生成AIのリアル活用」がテーマ。実務で活用しているメンバーが次々と登壇し、熱のこもった活用ノウハウを共有しました。この記事ではその様子を、対話形式で臨場感たっぷりにお届けします。 Claude × Microsoft Docsで"即答力"を強化するYanai（司会）では、早速ですが「最近こんなAI活用してるよ」という方、いらっしゃいますか？Uchijima（登壇者）はい、自分からいきますね。プロジェクトでClaude Desktopを使っていて、特に「Microsoft Docs MCPサーバー」が便利です。YanaiAzure DevOpsの設定確認とか？Uchijimaそうです。ビルドアドミニストレーターやエンドポイントクリエイターといった権限が何を意味してるか、ぱっと見て思い出せないことがあるんですよね。そんなときにClaudeに質問すると、MCP経由で公式ドキュメントを参照して、適切な説明をしてくれる。地味だけど、すごく実務的な時短になります。Yasudaその使い方、すごく共感します。昔は公式ページ探してコピペしてましたよ…。Uchijima設定は簡単で、Claudeに「Microsoft Docs MCP Server」をコネクタとして追加しておくだけ。URIを指定するだけで、Claudeがその知識を元に応答してくれるようになります。 DevOpsのチケット作成も、AIに"お願い"でOKUchijimaさらに便利なのが、「Azure DevOps MCPサーバー」との連携です。チケット発行の自動化がめちゃくちゃ効きます。Yanaiそれ、秘書がついた感ありますね。Uchijima例えば、会議設定の依頼を出すと、AIがWikiを参照して、必要事項を埋めてチケットを自動作成してくれます。手作業でやっていたときの手間と抜け漏れを考えると、相当な改善です。Yasudaチケット作成から実行までAIがやってくれるのはすごい。Copilotともまた違った、実行型のアプローチですね。IwayaMCPって、AIと外部ツールをつなぐ"通訳"みたいな存在ですよね。中にはファイル操作など、シンプルな命令だけを受け付けるMCPもありますが、今はかなり多機能化していますね。 BacklogにもMCPで"つながるAI"を構築！YanaiちなみにBacklogをMCPでつなげてる方、いますか？Uchijimaはい、私もやってます。チケット参照だけでなく、作成やWiki編集まで、MCP経由で指示可能です。すでに社内では、AIがBacklogから過去チケットを参照して回答の素案まで作る活用も進んでいます。Sakamoto最初は「便利なチャットボット」って感じでAIを見てましたが、MCPがあると"指示したらやってくれるツール"になりますよね。例えば「この内容でチケット書いて」と言うだけで、Backlogに投稿される。Yanaiまさに"実行するAI"ですね。 Slack × GitHub連携AI「Devin」の破壊力SakamotoSlackに「Devin」というAIを組み込んで、GitHubのコード解析に使ってます。例えば「この処理は何をしてる？」と聞くと、該当コードとその意味を画像付きで返してくれます。Yanai画像付きは熱いですね。Claude CodeやCursorでも近いことはできますが、Slackとの統合は便利。Sakamoto「アプリのバージョンを変えるにはどこを直せばいい？」みたいな質問にも、具体的な場所と変更方法を示してくれる。ちょっとした変更でも効率が段違いです。 「AIがやってくれる」が当たり前になる未来Teruyama実は私も、最近AIコーディングを始めました。Copilotから始めて、Codex、今はCursorで試しています。徐々に"補助型"から"自律型"にシフトしているのを感じますね。Yanai次回はそのあたり、ぜひLTで聞かせてください！Teruyama初心者目線での学びやつまずきポイントなど、共有できると思います！ まとめ：MCPが切り拓く、AI実行型の世界「調べてくれるAI」から「動いてくれるAI」へ。その進化のカギを握るのがMCPです。Claudeで公式ドキュメントを参照DevOpsやBacklogのチケットを作成GitHubコードの解析と改善提案Slack上から直接AIに指示こうした"実務に入り込むAI"は、もはや一部のツールに限られた話ではありません。APIさえあれば、多くの業務ツールにMCP経由でつなぐことが可能です。AIはもはや「助言者」ではなく「アシスタント」——そう実感させられる共有会でした。 次回予告：自律型AIによる開発支援を深掘り！次回は、CopilotやCodex、Cursorといったツールを使った「AIによるコーディング支援」がテーマ。エンジニアがどのようにAIと"共同作業"しているのかを掘り下げていきます。 参考リンク：Claude DesktopMCP (Model Context Protocol)Microsoft Docs MCPサーバーAzure DevOps MCPサーバーBacklog MCPサーバー

【AI活用共有会#1】ClaudeもDevOpsもBacklogも！MCPで始まる"実行するAI"の時代

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です今回はDifyというAIツールを触ってみましたのでその紹介記事となります。DifyはLangGenius, Inc.（米国デラウェア州）という会社が開発した、正確にはオープンソースのAI開発プラットフォーム となります。調べてみると去年のこの頃、AIブームとともに爆発的に利用者も増えたようで、既に様々な会社で利用されているツールとなります。これに関する記事も既に色々と書かれてはおりますが、2025年6月の最新の状況かつ、初めて知る方に向けて。。ということで書いてみたいと思います。早速ですが、まずはTOPページから。海外のツールではありますが、既にこのように日本語で書かれたページがあります。ちなみに前回のGammaと異なりサイトの言語としては日本語、中国、英語の３言語から選べます。作成開始～事前準備早速ですが、TOP画面右上の「始める」をクリックして試してみましょう。ログイン画面が表示されますのでそこからサインイン・ログインを行うと以下の画面になりまして、ここでアプリを作成していきます。先に価格についてお知らせしておきますと、Difyには以下の３つのプランがあります(2025年6月15日時点の情報です)。これはあくまで「Dify」の利用だけの料金となりますのでご注意ください。実際には使用したいAIのAPIキーを設定・利用することになりますので上記の料金プラン＋使用したいAIの料金が必要になります。が、APIキーが用意されている方は無料で利用が可能になりますので興味のある方は是非お試しください。改めてDifyについてですが、今までのプログラミングやデザイン開発、そしてプレゼン資料の作成サポートといったものとはまた別ものとなりまして、最初に「AI開発プラットフォーム」と書いた通り、AIアプリを作るためのツールになります。更にはノーコード・ローコードツールであるため、エンジニアだけでなく、ビジネスユーザーまでを対象とした、誰でもAIアプリが作れるというのが特徴になります。今回は、仮想の会社・製品についての資料、会社案内・製品仕様書・FAQの3つの資料をナレッジベースとしたRAGシステムをDifyで構築してみましょう。まずはログイン後の画面において以下の「アプリを作成する」から「最初から作成」を選びます。すると以下のような画面に遷移します。画面左側の「アプリタイプを選択」において「チャットフロー」を選び、更にアプリの名前、説明を入力して「作成する」を押下します。「チャットフロー」は今回作成するアプリのような会話専用のワークフローでして、「ワークフロー」は汎用的な処理フロー、例えば文書の自動処理としてPDFをアップして、テキスト抽出、要約、翻訳してメールを送信するといった一連の流れを行うためのものになります。チャットフローを選択し、その他の必要事項を入力すると以下の画面に遷移します。ノーコード・ローコードツールであるため、GUIベースで「ノード」と呼ばれる各機能単位・処理単位を組み合わせてアプリを構築していきます。AIモデル設定では、まずは「LLM」ノードをクリックすると右側に以下のようなウィンドウが表示されます。「AIモデル」に「！」マークがあるのでパッと見で気付いた方もいらっしゃるかもしれませんが、事前準備としてAIモデルの設定が必要となります。ですので、ちょっと順番が前後しますが、先にAIモデルの設定を行い、その後再度この画面に戻って構築を進めていきましょう。Difyの設定画面から「モデルプロバイダー」を選ぶと以下のような画面になります。ここでそのAIモデルを使用するか、そしてのそのAIモデルのAPIキー等を設定します。様々なモデルが利用できることがわかるかと思います。当然ながらこの設定前には各AIモデルのAPIキーを利用できるようにしてください。今回はGeminiを使いたいと思います。「プラグイン」という表現になっていますが、ここでモデルを選び（インストール）、APIキーを設定します。正しく設定できると以下のようになりまして、「API-KEY」右側のランプがオレンジから緑色になります（注意書きも出てますがそこは気になさらず。。）。では、先ほどのアプリ構築の画面に戻って、「開始」と「LLM」の線にマウスを移動すると以下のように「＋」のアイコンが表示されますのでこれをクリックします。すると以下のようなウィンドウが表示されるので実行したい言処理を選びます。今回はRAGを実現したいので「知識検索」を選びます。すると以下のように「知識検索」のノードが追加されます。ナレッジベース作成次に画面上部の「ナレッジ」をクリックします。以下のように「ナレッジベースを作成」の画面へと遷移しますので、「ナレッジベースを作成」の「＋」をクリックします。するとデータソースの選択を促されますので今回は「テキストファイルから。。」を選択します。少々文字が小さくて見づらいかもですが、「TXT」ファイル以外にWork、Excel、PDF等、テキストファイルといっても様々なファイルに対応しています。次にアップロードしたファイルに対して「チャンク設定」、つまり長い文書を、AIが理解しやすい小さな単位に分割する設定を行います。見切れていますが、画面下部の「保存して処理」ボタンをクリックすると「CloudSync Pro」という仮想のソフトウェア製品のナレッジベースが作成されますので、同様にこの製品のFAQの資料やこの製品を扱う会社の案内資料もアップしていきます。各種ノード設定次に再度アプリ構築の画面に戻り、「知識検索」で先ほど作成したナレッジベースを設定します。更に最初に選択した「LLM」をもう一度クリックし、AIモデルや「SYSTEM」「USER」等を設定します。「SYSTEM」と「USER」ですが、いわゆる「AIとの会話における役割設定」でして、具体的にはSYSTEM: 「AIの性格・役割・ルールを決める指示書」例：「あなたは親切なカスタマーサポート担当者です」USER: 「ユーザーが実際に入力する質問や内容」例：「商品の返品方法を教えて」といったものになります。つまり、SYSTEMでAIの「キャラクター設定」、つまりはAI行動指針を決め、USERで「実際の質問」を入力する仕組みです。上の画面が実際に設定した内容になりますが、ここをちゃんと設定しておかないと望んだ回答が得られませんでしたので（会社情報なのに製品情報のような回答をされてしまったり。。等）、今回のようなアプリ、構成で作成する場合には一番注意が必要になる部分ではないかと思いました。単に私のプロンプト等がよろしくなかったのかもしれませんが、できる限りAIが正しい方向に進めるようにしておくことにこしたことはないかと。「プレビュー」機能そして、画面右上の「プレビュー」ボタンを押下すると以下のようなウィンドウが開きますので、ここでテストが行えます。以下が製品についての問合せ結果。以下が会社に関する問合せ結果となります。終わりにこうして作成したアプリについてはAPI経由で利用できるようになりますが、今回は割愛いたします。このように非常に簡単な例ではありますが、このようにGUIベースで簡単にAIアプリを作成することができます。実際には精度を上げるために更に調整、設定が必要になりますが、それでもこのようにエンジニアでない方々でもプログラミングの知識を必要とせず、アプリを作成できるのは非常に魅力的だと思います。実はこのDify以外に似たようなノーコード・ローコードのAIアプリ作成ツールとしてFlowiseというツールも試していたのですが、GUIのわかりやすさ、扱いやすさという点においてはこちらのDifyの方が個人的には良さげでした。ただ、Flowiseも「エンジニア寄りの」ノーコード・ローコードツールと呼ばれ、Difyよりも高い自由度を持っており、人によってはDifyよりも高い評価を得ているようなので改めて本ブログに書ければと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

AI開発プラットフォーム Difyを触ってみた

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です最近はエンジニアよりのツール紹介が続いていたため、そうでない方々向け、例えばということでプレゼン資料作成のツールを探してみたところ、Gammaというツールが良さげでしたのでこれを使ってプレゼン資料を作成してみたいと思います。こちらはアメリカ、サンフランシスコのGamma Tech.Inc.という会社が提供しているツール、サービスとなります。https://gamma.app/ja上がHOME画面となりまして、海外のサービスということなので英語での表示を予想していたのですが、既に日本語のページもありました。ちなみに約40か国語に対応しているようでして、これだけでも急速に普及していることが伺えます。まずはサインアップしてみます。以下のようなアンケートがありますが、「まだ決めてない」という項目もあるので、その後の操作には影響しないようです。生成依頼サインアップが終了すると以下の画面になります。何を元に作成するかの選択画面になります。以前、PowerPointでCopilotを試したときも簡単な文章から作成してもらいましたので比較の意味も含め「生成」を選択します。「生成」選択時の画面が以下になります。「作りたいものを説明してください」と書かれた入力欄に以下の内容を入力してみたいと思いますが、「AzureとAWS、それぞれの特徴や、メリット・デメリットを説明してください。必要に応じて表形式での説明もお願いします。」その前に画面上の設定で皆さんも気になっているであろう部分があると思うのでそちらを説明しておきますと、「日本語(です/ます体)」をクリックすると言語が選べます。日本語も「だ/である体」と先ほどの「です/ます体」を選べるのは非常に配慮が細かくてよいなと思いました。自分で書くと統一し忘れていることもありますので。あとは「8枚のカード」と表示されている箇所、こちらは以下の画面の通り「カード」＝「スライドもしくはページ」でして、今回の依頼内容を「何枚で」表現するかもここで指定できます。「PLUS」「PRO」とありますが、これは料金プランとなります。今回は無料プランで試しているため最大10ページ作成可能です。では、改めて本題に戻って先ほどのAWSとAzureの違いで依頼すると以下のようなアウトラインが出力されます。ここでは各項目の内容を直接書き換えることもできますし、並び替えや項目自体の削除も可能です。このあたりはPowerPointのCopilotと似ていますね。更に下にスクロールすると「テーマ」の設定やテキストの量、画像の使用有無を指定できます。最初は以下の内容のまま、全てデフォルトで行きたいと思います。生成結果直前の画面の「生成」をクリックしてしばらくするとプレゼン資料が出力されます。以下のように表も出力されています。何故「表」について確認したかといいますと、以前同様のプロンプトでPowerPointのCopilotで出力してもらったことがありました。その時は表までは出力してもらえず、今回のGammaを試した後にもう一度PowerPoint上のCopilotで「表も使用して」という指示も含めて試してみたのですが、残念ながら出力してくれませんでした。もっと正しいプロンプトがあるのかもしれませんが。。さて、メニューからエクスポートを選択すると以下の画面が表示されまして、パワーポイントはもちろん、PDFやGoogleスライド、PNGへのエクスポートが可能です。このようにパワーポイントでも出力でき、編集も可能になります。ただ、例えば以下のような箇条書きの羅列の場合のように、人間であればまとめてテキストボックスとして記述するであろう箇所も1行ずつ個別のテキストボックス内に書かれていますので、改めて手作業で追記・編集・修正を行う場合はやや手間がかかるかもしれません。まあ、所詮プレゼン資料なのでそれほどの手間ではないと思いますが。。その他の機能別の機能を試すにあたって、もう１枚別ページ、性能比較のページを見せておきます。ちょっと情報量、文字数の少なさが気になったので最初のプロンプト入力画面においてテキストの量を「詳しく」にした結果が以下です。なかなか良い感じではないでしょうか？ちなみにレイアウトが全く違っていますが、これはテキストの量の設定に限らず、出力されるたびにランダムで変わります。プロンプトの指定によってある程度制御できるかもしれません。あとは画像について。恐らく仕事で、特に社外の他のお客さまに向けて作成する際は自社のテンプレートや、あるいはお客様の会社のイメージカラーに合わせてテーマを別途設定すると思います。そうなると先に上のような形で色々と画像が設定されてしまっていると逆に扱いにくくなってしまいます。そこで画像を無しにして再出力してみました。その結果が以下になります。いかがでしょうか。最小限のアイコンのみとなりまして個人的にはこの方が良さげに思えます。あとはこれに自社のデザインテンプレート（デザインテーマ）を適用する等、必要なデザイン設定をしていただければいいのではないかと思います。色々機能はありますが、あともう１つだけ。グラフや図表の挿入も当然ながら可能です。例えば以下のように「縦棒グラフ」を選択するとこのようにグラフが表示され、更にグラフを選択して表示されたメニューから「グラフデータを編集」を選択すると以下のようにグラフの編集画面へ遷移します。ここで細かいデータの追加・編集、見た目の変更が可能です。パワーポイントでも同様のことは可能なのですが、以下のように見た目と値の設定が別ウィンドウとなりますのでそういう意味では上のように一画面で収まる形が使いやすいかもしれません。単純に「プロンプトを指定して、出力」だけに留まらず、色々と設定が可能で、かなり使える、便利なツールでした。NoteやQiita、X等で頻繁に目にしていましたが、納得の使い勝手です。ただ、AIツール全てに言えることとしまして、出力結果には誤りを含む場合があります。重要な情報は必ず確認・検証を行ってください。また、機密情報や個人情報など、外部に共有すべきでないデータの入力については注意・確認の上ご利用いただければと思います。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

プレゼンテーション作成ツール Gammaを触ってみた

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。ここ最近の記事ではAIツールについて色々とご紹介してきました。特に最近についてはNotebookLM、Firebase Studio、Julesと、Googleのサービスについてフォーカスを当ててきた形となります。今回は同じくGoogleのGemini、正確にはGemini in BigQueryについてご紹介させていただきたいと思います。サンプルデータ選択ということで早速試してみましょう。まずは以下がBigQueryのTOP画面になります。そもそもBigQueryはDWHですのでデータが無いと使えません。BigQueryではサンプルデータが用意されているのでまずはそれで試してみたいと思います。上記のTOP画面の赤枠部分、「Add data」をクリックすると右側から以下のような画面が表示されます（各スクリーンショットについては文字が小さく見えづらい部分もあると思いますのでブラウザの拡大機能等ご利用ください）。そして赤枠の「Star a project by name」をクリックし、以下のダイアログが表示されるので「bigquery-public-data」と入力して「Star」をクリックします。すると以下のように左側の「Explorer」のツリー部分に上記で追加したデータ（データセット）が追加されます。このデータセットの中には以下のような名前のデータがありまして、Eコマース（ECサイト）におけるGoogleAnalyticsのGA4のデータ、ECサイトの各ページにおけるPV数等が入っています。・bigquery-public-data.ga4_obfuscated_sample_ecommerceこれを元にBigQueryにおけるGemini絡みの機能を見てみたいと思います。Cloud Assistの利用まずは画面右側のCloud AssistでGeminiとのチャットを開始します。すると以下のようにプロンプトの入力が可能になります。このCloud Assistはエンジニア向けのSQLを書くための支援ツールとなりますので、以下のようなプロンプトを投げてみます。「【要件】・ページビュー数が多いページを上位10件表示したい・ページのURLまたはタイトルでランキングを作りたい・初心者にもわかるように、クエリの各部分を説明してくださいGA4のデータ構造についても簡単に教えてもらえると助かります。」すると、以下の画面右側にクエリが表示されます。左側赤枠部分でクエリを実行できますのでそこで今回の出力されたクエリを試してみると、要望通りPV数をTOP10を抽出できました。正しく出力されない場合もあるのですが、そこもこのCloud Assistに問い合わせることで修正してくれます。Cloud Assistは基本的にSQLの記述支援になりますので基本的にはSQLの提示のみになるのですが、プロンプトの書き方を工夫することでクエリ自体の説明はもちろん、以下のように今回対象としているGA4のデータ構造についても教えてくれます。ちなみに画面右側のスペースが狭くて見づらい場合は以下のように３点リーダーから「Full page」をクリックすると。。以下のように別タブでチャット部分が広く表示されるようになります。もう少しだけ横道にそれますと、クエリ結果のところの「Chart」。ここをクリックすると。。以下のようにその結果のグラフ表示ができます。BIツールであるLooker Studioでもいいのですが、簡易的でよければこのようにBigQueryだけで完結出来ます。独自データ及びデータキャンバスの利用さて、次は別のGeminiを使った機能を試してみたいと思います。上記のECサイトのデータですと自分の作ったサイトではないこともあり、あまり馴染みのないデータであるため、もう少しわかりやすいデータにしてみたいと思います。そこで、仮想の（カレーに特化した）食品メーカーとレトルトカレーの製品に関するアンケート結果のデータを作ってみます。辛さとレビュー、値段（今回は定価とします）も加えます。このデータ（currysurverという名前にしています）をBigQueryに追加し、「データキャンバス」という機能で取り込みます。では、「最も人気の商品を教えて」と聞いてみます。すると自動的にその結果を求めるためのクエリを作成・実行し。。。グラフも含め結果を出してくれます（人気＝アンケートの結果が多いという判断です）。ちなみに結果についての説明が英語で書かれてますが、「日本語で」とお願いすると日本語で出力してくれます。では別の質問で日本語での回答を求めてみましょう。「結果を日本語で説明してください。どの辛さレベルが最も人気ですか？」と聞いてみます。するとちゃんとアンケート結果を元に回答してくれます。一番人気だけでなく、その辛さが何件あって。。ということもちゃんと教えてくれます。素晴らしい。そもそも取り込んだデータについて実はよくわかってなくて。。という場合でも以下のように質問すると説明してくれました。カラム名や製品名からの推測だと思いますが、教えたことが無いにも関わらず適格に説明してくれます。ちなみにデータキャンバスは最初は何もない状態ですが、Geminiとやり取りをしていくと、以下のように複数のパネルが紐づけられていきます。これはデータや解析作業の関連状況を表していまして、従来のBIツールでは結果のみ出力されているため、どうやって作ったかは作った人間にしかわからないのですが、BigQueryではこのデータキャンバスによってどのようにデータが処理されているか、なぜこの結果になったのかを追跡することができます。最後にこのようにデータキャンバスは簡単なプロンプトにもかかわらず、色々と配慮した形で情報を出力してくれます。今回データについても急ぎ準備・出力したものなので、データ量はもちろんのこと製品に関する情報としては欠けている部分が多々ありました。例えば購入日時等もデータの一項目として追加すれば（存在していれば）、月毎もしくは季節に応じた売り上げの違い、傾向等も出てくるはずなのでそういったものもGeminiが自動的に解析を行い、アドバイスをしてくれるのではと思います。つまり実際のデータで、かつその量や質がしっかりしたものであればあるほど、それに応じた情報・解析結果を出力してくれます。今までCursor等コーディング支援のツールを中心に触ってきまして、ある程度AIを使うことに対する「慣れ」も多少ながら出てきたのですが、今回DWHにおけるビッグデータを対象にしたAIツールということで、改めて「おっ」と思わされる内容でした。今までのどれともまた違った魅力を持ったツールです。是非使ってみてはいかがでしょうか。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

Gemini in BigQueryを触ってみた

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。先日5月20日にGoogleからコーディングエージェント「Jules」が発表されました。もともとは昨年12月にGemini2.0と共に発表され、この5月20日にパブリックベータという形で公開されました。今回はこのJulesを触ってみた感想となります。現在このJulesはベータ版で、無料で利用可能です。また、モデルについては当初のGemini2.0から進化し、2.5 Proを搭載しており、公式サイトに書かれている機能としては以下になります。・テスト作成・バグの修正・新機能の構築・音声による変更ログの提供・ライブラリのバージョンを上げる今回はバグの修正というところでJulesを使ってみたいと思います。ログイン及び設定Julesにログインしてみましょう。https://jules.google.com/以下がログイン画面になります。昔懐かしい感じの画面になりまして、タコのような宇宙人？＝エージェントがコードを修正しているといったところでしょうか。Googleのサービスなので当然ながらGoogleアカウントが必要になります。右上の「Try Jules」をクリックします。プライバシーに関するお知らせのダイアログが表示されますので確認の上、次へ進んでください。次にGitHubに接続します。なので、GitHubアカウント及びリポジトリも必要となりますので併せてご注意ください。JulesはGitHubリポジトリがベースになります。Firebase StudioやCursorは何もないレベルからソースコードを書いたりできるのですが、JulesはGitHubリポジトリが必要であり、それを元にやり取りを行い、変更・修正を行います。次にJulesに対する権限設定、そして参照するリポジトリを設定します。全てのリポジトリでもよいですし、特定のリポジトリのみでもよいです。リポジトリはPublic、Private、両方ともに対応可能のようでして今回はPrivateにしました。無事、設定及びGitHubへの接続が終わると以下のようにチャット欄のところに接続したGitHubのリポジトリとブランチが表示・変更できます。余談なのですが、筆者はテスト用にGitHub上で何もリポジトリが無い状態から先にJulesでGitHubに接続し、「その後に」リポジトリを作成したのですが、何故かJulesでリポジトリやブランチが表示されず、一旦接続情報を削除したりと少々てこずりました。結果、時間の経過で自然に直ったようなのですが、もしかするとベータ版というところも影響しているのかもしれません。事前準備（対象リポジトリの準備）更に事前準備を進めます。JulesはGitHubベースで動きますのでGitHubリポジトリが必要となります。そこでリポジトリにはNode.jsでWebベースの簡単なToDoアプリを作ってPushしておきました。更に意図的に構文エラー、論理エラーを仕込んでおきます。まずは以下の赤枠部分、セミコロンを削除しておきます。Node.jsではエラーにはならないのですが、今回行末には全てセミコロンを設定してありますので、見た目の統一のために追加するのでは。。と思った次第です。次に以下のコードの34行目の記述を丸々消します。つまり、必要な括弧閉じが書かれていない状態であり、明らかな構文エラーです。次に以下の新しいToDoを追加する処理においてToDoの数をインクリメントするところを削除します。そして試しに実行し、エラーが出て起動しないことも確認しておき、これをPushします。Julesへの依頼～プルリクエストまでではいよいよここからが本番です。元々の画面では全て英語だったのですが、試しに日本語で指示してみます。しかも相変わらずざっくりレベルで。するとJulesがリポジトリをチェックし、以下のようなメッセージが表示されます。このメッセージはJulesが立てた実行プランとなりまして、直訳しますと「public/script.jsでファイルの切り捨てによる構文エラーと、routes/api.jsで新しいTodo IDが生成される方法に潜在的なバグがあることを確認しました。これらの問題を修正する計画を立てました：public/script.jsの構文エラーを修正する： 標準的なTodoリストの機能を想定して、ファイルを完成させる。routes/api.jsのTodo ID生成の改善：より安全なID生成ストラテジーを実装する。APIの基本テストを追加： Todoの追加に関する修正を検証する。変更を確定する。フィードバックがあれば教えてください。そうでなければ、承認してください。」というものになります。どうやら仕込んだバグをちゃんと見つけられたようです。そこでJulesが立てたこの計画を承認しますとJulesが次々と作業を進めていきます。まずはscript.jsの修正。。修正が終わるとウィンドウが2分割され、右側にその内容が表示されます。括弧を削除したところも修正されています。インクリメントの部分も元々初期化がなされていなかったようで、初期化処理と、インクリメントも修正されています。プランの中にテストの追加も書かれてましたが、ちゃんと「test」フォルダを作成し、テストコードも書いてくれています。ただ、セミコロンを削除した部分だけはそのままとなっていました。プロンプトが雑すぎたことも影響しているかもしれず、記述の統一等も依頼すれば修正されたかもしれません。Julesは仮想マシンを内部に持っているそうで、そこでテストコードも実行してくれます。そしてFixブランチに対してのプルリクエストを提案します。上記の表示内容において「Publish branch」をクリックするとFixブランチに対してPushを行ってくれます。。。と、このように自律型エージェントとしてプルリクエストまで実行してくれました。スクリプトをもっと丁寧な内容にすれば更に期待以上の結果をもたらしてくれるのではと思います。この後も色々触ってみたのですが、恐らくはベータ版ということもあり、Jules側で次のアクションまでにかなり時間がかかったり、途中でリポジトリを見失ったりもしていまして、少なくても私の環境においては若干の不安定さもありました。ただ、ここ最近のAI界隈の進化を考えるとこのあたりもすぐに改善してくれると思いますし、日本語での回答も近々に対応してくれるかもしれません。同じタイミングに発表されたGitHub Copilot Coding Agent、そしてOpenAIのCodex等、コーディングエージェントが次々と出てきており、AIツールの覇権争いはますます激化しそうですね。。当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

自律型エージェント Google Julesを触ってみる

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。今回はGoogleのノートアプリ、NotebookLMについて触ってみた感想を書いてみたいと思います。https://notebooklm.google.com/このNotebookLM、2023年の夏ごろからベータ版としてアメリカ限定で公開されており、そこから生成AIの普及に伴い各国への展開、そして対象とするデータの範囲も広がり、日本語にも対応して今に至ります。早速アクセスしてみると以下のようなダイアログが表示されまして、個人データがトレーニングに使用されないということが明記されています（文字が小さくて見づらい方はブラウザの機能で拡大してください）。ただ、他のAIサービスにも言えることですが、NotebookLMは外部のクラウドサービスですのでデータに関しても慎重な扱いが求められます。その点ご注意ください。さて、上記ダイアログを確認した後は以下の画面へ遷移します。ちょっと見づらいかもですが、「サンプルのノートブックを試す」と「ノートブックを新規作成」の２つの選択肢があります。準備・ソースの追加普通であれば「サンプルの～」が良さそうな気がするのですが、実際に触ってみた感想としては正直なところNotebookLMのサンプルだけですとソースが英語であるためNotebookLMがどういったものなのかというのがちょっとわかりづらかったです。そこで今回は「ノートブックを新規作成」で進めていくことにします。「ノートブックを新規作成」をクリックしますと、以下のような「ソースを追加」ダイアログが表示されます。NotebookLMはソースを元にチャットでやり取りを行い、ユーザーに情報・データを提供していきますのでまずはソースが必要となります。以下のダイアログはそのソースを指定（追加）するためのものになります。対象となるソースは以下になります（2025年5月19日時点）。PDFテキストファイル音声ファイル（*.avi、*.mp3等）GoogleドライブGoogleドキュメントGoogleスライドリンク（URL）ウェブサイトYoutube テキスト本記事ではまずはリンク→Youtubeを試してみましょう。上記ダイアログで「Youtube」を選択するとURLを貼り付けるダイアログが表示されるのでそこに対象としたいYoutubeのURLを貼り付けて「挿入」ボタンを押します。今回はNotebookLM繋がりということでGoogleの提供している動画、Lookerに関する動画のアドレスを設定してみます。URLの入力ダイアログで「挿入」ボタンを押してしばらくすると以下のような画面に切り替わります。これがNotebookLMのメイン画面で、ここにソースに対してGeminiとやり取りを行い、得られた情報をメモ・整理していく形になります。大きく3つのペインに分かれ、左側がソース一覧となります。現在ソースは先ほど追加したYoutubeのURLのみですが、１つに限らず更に追加することも可能です。後でこの部分についてもう一度触れますので一旦次に行きます。次に真ん中の「チャット」画面がありまして、ここでGeminiとのやり取りを行います。初期段階ではソースに対する概要、つまり指定したYoutubeの概要が書かれています。これだけでも結構役立つのではないでしょうか。概要をざっと眺めてみまして動画の内容について理解はできたのですが、おもむろに「OpenX」という筆者の知らない単語が出てきたので「OpenX」って何？と聞いてみると以下のような回答が返ってきました。あくまで「ソースによると～」ということなので、別途検索してみるとそれらしきサイトがあったので更に聞いてみます。これも「ソースによると。。」という言葉から始まります。（NotebookLMを知っている方には今更だと思いますが）つまりNotebookLMは提供したソースに基づき回答を行っており、それ以外のところから自主的にデータを取りに行くということをしません。そのため、Geminiから得られる内容をより充実させていくためにはソースを増やしていく必要があるのですが、それについては後述するということで一旦他の機能について言及させてください。音声概要次にチャットの下に「音声概要」というのがあるのでこれをクリックします。すると少々時間がかかった後（動画によると思いますが、私が試した1時間程度の動画であれば４～５分でしょうか）、右側のペインに以下のような内容が表示されます。実は個人的にこれが一番面白かったです。以下の画面を見ると何か音声を再生できるような雰囲気なのですが、実際の動画よりも短い再生時間となっていまして、いったい何が聞けるのか恐る恐る聞いてみたところ、おもむろに男性と女性の2人が「ラジオ番組のように」今回ソースに設定した動画の説明をしていました。「ラジオ番組のように」とはどういうことかと言いますと、機械的に概要を読み上げるわけではなく本当に会話形式で、かつ、時々「えーと」とか、「そうですね」といったあいづちも含まれていまして、本当にリアルタイムでその２人がそこにいて、その動画について語っているかのようでした。少々不真面目な感想になってしまいますが、まさかこういった情報が出力されるとは思わず、少し笑ってしまいました。。ただ、単に面白いというだけなく、2人より会話の掛け合いによって動画の内容が非常にうまく説明されていると思いました。皆さんも是非これだけでも試してみてもらえればと思います。マインドマップ次に同じくチャットの部分に表示されている「マインドマップ」をクリックすると右側に以下の内容が表示されますので、それをクリックします。※同じ文章が並んでますが、間違えて２回押してしまったためですするとマインドマップという名前通りではありますが、今回のソースである動画の内容をマインドマップで整理した結果が表示されます。これも非常に興味深い機能なのですが、動画が外国語の場合は日本語での出力が行われないようです。チャットで色々と試してみたのですが（私の場合は）駄目でした。音声概要含め様々な機能が日本語対応されていますので、このマインドマップの部分も是非近いうちに日本語に対応してくれることを期待します。より実践的な使い方さて、ここまで幾つか機能を紹介したところでもう少し「どう使えば？」レベルに踏み込んでみたいと思います。今度はウェブサイトのURLを設定してみます。当社のサイトURLを設定してみましょう。メイン画面は以下。チャット部分にサイトに基づく企業概要がまとめられています。マインドマップは以下の通り。サイト（だけ）をソースにするとサイトマップとほぼイコールになるように思われますので、それはそれで使い道の１つとして良いかもしれません。仮に私が当社のコンサルとしてWebサイトの改善を検討しているとしましょう。そこでソースの部分の「検索」をクリックし、「今後のSIに求められるものとしてどういったものが考えられるでしょうか。」と入力してみます。※ちなみに弊社の「SI」は「シリアルイノベーター」の略になります。詳しくは弊社サイトをご覧ください企業情報 | 株式会社ネクストスケープするとNotebookLM（Gemini）がその言葉を元に色々なソースを取得してくれますので、ソース元に設定したいものを選んで「インポート」します。今回はとりあえず全て設定してみましょう。すると以下のように「ソース」に情報が追加されますので、チャットで「ネクストスケープのサイトで改善すべき点を教えてください」と質問すると上記ソースに基づいた回答が得られます。出力結果・内容については割愛させていただきますが、単純に出力内容の行数だけで比較しても当社のURLのみをソースとした場合は30行、上の画像のようにソースを追加した後は60行近く出力されており、（その内容の良し悪しはともかくとして）ソースの追加による影響は明らかです。メモのソース化そして、出力された内容については以下のように「メモに保存」というボタンがあり、それをクリックすると右側の「メモ」に追加されます。このメモはNotebookLMによって出力された内容も対象になりますが、その名の通り自身でメモした結果も保存することができます。そして、各メモをクリックすると以下のように「ソースに変換」というボタンがありまして、これをクリックするとこのメモが「ソース」に追加されます。つまり、今までのやり取りで得られた結果を更にソースにすることで情報を追加し、精度を上げ、階層的・構造的により良いものにしていくことができるわけです。その他雑感このようにNotebookLMは１つの事柄について理解し、深堀するために必要な様々な機能が盛り込まれています。Xで他の方の利用方法を見ると膨大なPDFの資料を要約してもらい、更にCursorで整理するといったように複数のAIツールを組み合わせた使い方も紹介されています。また、このNotebookLM、ソースとしてGoogleドライブ、Youtubeの２つが指定できるというのが強みではないでしょうか。特にYoutubeの解析・要約は他のAIツールでもできるのではと思ったのですが、私がChatGPTやClaudeで実際試した限りでは動画内容を読み込むことができませんでした。同じGoogleのサービスだから可能なのかもしれませんが、Youtubeの学習系の動画というのは視聴するのにそれなりの時間を要しますので非常に助かります。また、最初の方で書いた通り、GoogleのサービスであるためにGoogleドライブをソースとすることができます。会社によってはGoogleドライブに資料を集約しているところも多いかと思います。そういった方々にはNotebookLMであればすぐに活用できると思いますので是非使ってみてはいかがでしょうか。NotebookLMは、「Web全体の情報から答えるAI」ではなく、「自分が読み込ませたソースに特化したAI」というコンセプトなので、個人の研究、ビジネス文書、会議記録などに集中させ、他のAIサービスのように余計な知識を挟まないようにさせることができるというのが大きなメリットとなります。つまり、信頼できるソースを厳選することでハルシネーションの発生を抑えることができます。ただ、これも他のAIサービス同様絶対に抑えられるわけでありませんので、ソース含め出力された内容については各自確認した上で利用してもらえればと思います。料金もGoogleアカウントを持っているユーザーであれば誰でも公式ページからログインしてすぐに使い始めることができます。興味のある方は是非ご利用ください。最後に当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

生成AIノートアプリNotebookLMの紹介

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。ここ最近の当社ブログではGithub CopilotやCursor、Firebase Studio等々、生成AIに関する記事を書いてきました。blog.nextscape.netblog.nextscape.net今回は「Vercel v0」（以下v0）を触ってみましたのでこれについて記事を書いてみたいと思います。Vercel v0概要このv0、Next.jsの開発元であるVercel Inc.が開発した生成AIツールになりまして、AI関連のXの投稿を見るとちょいちょい見かけていたため非常に気になっておりました。v0のサイトでは「生成UIツール」とあり、「UI生成」「プロトタイピング」「ペアプログラマー」といったことに役立つと書かれています。プログラミング言語に関してはVercelが作成しただけあってReact、Next.jsといったように主にUI周りに強みを持つツールのようです。現時点（2025/05/04）での最新の料金プランは以下。Freeプランもありまして今回はFreeで試してみたいと思います。Webアプリ作成新規登録、ログインを行うと以下のような画面に遷移し、他の生成AIを用いたツール同様、チャットで依頼する形になります。今回は以下のようなプロンプトでWebアプリの作成を依頼してみます。今回は今までの私の記事のような雑な依頼ではなく、プロンプトにそれなりの粒度で依頼内容を記載してみます。プロジェクト名: 「学習トラッカー」概要:ユーザーが自分の学習状況を管理し、進捗を追跡できるWebアプリを作成してください。ユーザーは学習目標を設定し、達成度を確認できます。機能要件:・学習目標設定: ユーザーが学習目標を設定し、達成期限を指定できる機能。・進捗管理: ユーザーが学習の進捗を記録し、達成度を確認できる機能。・学習履歴: 過去の学習履歴を表示し、どの目標が達成されたかを確認できる機能。・通知機能: 学習目標の期限が近づいた際に通知を送る機能。・ユーザー登録: ユーザーがアカウントを作成し、学習状況を保存できる機能。デザイン要件:ユーザーフレンドリーなインターフェースレスポンシブデザイン（モバイル対応）と、以上の内容を依頼してみます。すると数分経過して以下のような画面が表示されます。左側がチャットでのやり取り、右側が生成された結果となりまして、今回依頼した「学習トラッカー」の画面が表示されています。タイトルの「学習トラッカー」の隣にあるリンゴのアイコンが何か微妙な印象を与えますが、全体的にシンプルでありながらあまり安っぽくもない今どきのレイアウトのように思われます。後ほどお見せしますが、ログイン画面や新規登録画面もありまして、ログインすると以下のような画面になります。既にサンプルデータが入っています。プログラミングの学習用に使っているというイメージですね。進捗率もグラフィカルに表示されて機能要件が一通り満たされている印象です。ここまでのチャットのやり取りは以下のようになります（文字が小さい方はブラウザの拡大機能でご確認ください）。（続き）もう少し画面をお見せしますと新規アカウント登録は以下のようになります。追加改修・変更ただ、あくまでモック、プロトタイプとなりまして、例えば以下の赤枠部分「詳細を見る」ボタンを押すとソースコードが表示され、まだ実装されていませんでした。そこでもう少し頑張ってもらいます。（続き）最初の依頼と打って変わって雑な依頼にもかかわらず、かなり詳しく考えてくれています。そして実際にもう一度詳細画面へ遷移するボタンをクリックした結果が以下。サンプルデータがちゃんと書かれていることもありますが、学習カテゴリや残り日数等、UIが非常によく、細かいところがしっかり作りこまれているイメージです。新しい学習目標を作る画面は以下のようになります。では、白黒では寂しいので以下のように依頼してみます。「もう少し色を付けたいです。但し学習用アプリなのであまり派手になりすぎないように」と依頼した結果が以下になります。進捗が赤と緑で表され、より分かりやすいものになりました。では改めてコードを見てみましょう。左上の「</>Code」をクリックします。するとファイルツリーとエディターが表示され、以下のようにNest.jsで書かれていることがわかります。フォルダで区別する形なのか、あくまでとりあえず作成したという意味なのか、ファイル名が全て同じでいまいちですが、コードの内容自体は適度にコメントが日本語で入力されており、Nest.js初心者の私から見てもわかりやすく書かれています。テストコード生成テストコードも依頼してみます。依頼した直後のやり取りが以下。テストコードの実行方法も手とり足とりという感じで教えてくれます。「テストコードは一部でいいので」と依頼したためなのかはわかりませんが、拡張方法までちゃんと書いてくれます。実際にエディタ画面で見てみると、Next.jsでは「__tests__」というフォルダ配下にテストコードのファイルを配置するのがセオリーなのですが、今回もちゃんとそのようになっています。プレゼン資料生成さて、プロトタイピングだけでは前回のFirebaseと変わりませんのでもう少し色々試してみましょう。Xの投稿を見ると「v0でプレゼン資料を。。」といったつぶやきがあったのでこれも試してみます。以下のように依頼してみます。するとHTMLをゴリゴリ書き始め、「プレゼンテーション」と「全スライド」のタブと共にプレゼンテーション資料が作成されました。こういうタブが用意されるということはv0の使い方として想定しているのですかね。。？以前、パワーポイントのCopilotで同様の内容を試した時は表形式での出力が行われなかったのでそこにやや不満を感じていたのですが、今回はちゃんと表も書かれています。ちなみにVS CodeのCopilotで同じ内容を依頼すると以下のようにMarkdown形式で書いてくれます。これはこれでいいのですが、「プレゼン資料」ではないですね。他のツールとの比較ここまで試してみてUI周りに非常に優れている印象が強まってきたので、バカの一つ覚えのBMI計算ツールを作成してもらいました。以前Firebase Studioで投げたプロンプトと同様「BMIを計算するWebアプリを作成して」というレベルのざっくり指示です。その結果が以下。今までと違ってアプリの説明がタイトルの下に書かれているのと、単位をキロとポンドで切り替えられるようになっています。更に「計算」と「BMIについて」というタブがあるので「BMIについて」をクリックします。すると。。おお。。以下のようにBMIの説明の画面が別途用意されています。注意点までちゃんと書いています。しかも文字の色もうまく使い分けられていて非常にわかりやすいです。素晴らしいですね。画面遷移図ここまで来てこれだけ色々出力できるのであれば「アレ」ができるのでは。。とふと思いまして先ほど作成した「学習トラッカーの画面遷移図を作成して」とお願いしてみました。以下がその結果です。と、このように画面遷移図を書いてくれました。ここでダウンロードできるファイルはMermaid形式で作成されていまして（MermaidとはMarkdownライクな記法でダイアログが書けるJavaスクリプトライブラリです）、以下のようにMermaidに対応したビューワーで開けます。いかがでしょうか。非常にわかりやすく図示されています。これを手を動かすことなくあっという間に生成できるのです。最後にUIに強みを持つこのv0、FirebaseやCopilot、Cursorとはまた違った良さを持っています。出力される文章の内容についてもまださわりでしかないものの、他のツールと比べてもかなり詳しく、丁寧な印象を受けました。Firebase Studioと比べた場合に依頼に対して確認することなくどんどん作業を進めてしまい、インタラクティブなものではありませんでしたのでそこがもう少し。。ではあったものの、それを補って余りある便利さ・魅力を感じました。このようにFreeプランでも色々使えますので是非皆さまもお試しください。当社ネクストスケープは新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms

生成UIツール Vercel v0の感想

はじめに株式会社ネクストスケープ エンタープライズサービス部の小野塚です。前回の記事では弊社の椎がCursorを紹介してくれまして、社内の人間としても興味深く読ませてもらいました。blog.nextscape.net今回はその流れ？でGoogleの「Firebase Studio」を触ってみたので記事を書いてみました。このFirebase Studio、こちらは今月４月９日に公開されたサービスでまだプレビュー版となります。まずは「Firebase Studio」ではない「Firebase」についてなのですが、スマホアプリ開発に携わった方であればこのサービスを聞いた、もしくは使ったことがある方は多いかと思います。ご存じの方には釈迦に説法となりますが、FirebaseはGoogleがアプリケーションの開発者向けに提供している、モバイル・Webアプリケーションのプラットフォームです。いわゆるMBaaS（Mobile Backend as a Service）と呼ばれるもので、もバイアルアプリ開発に必要な様々な便利機能が提供されています。NoSQLやクラウドストレージ、認証システム構築機能といった様々な機能を持っており、このFirebaseを利用することで開発コストの大幅な低減が可能になりました。Firebase Studioとは今回発表・公開された「Firebase Studio」は「～ Studio」というネーミングから伺い知れるように生成AIを取り入れた統合開発型のプラットフォームになります。FirebaseやGoogle Cloudといったサービスとシームレスに統合されています。Geminiを利用できることに加え、アプリの作成、テスト、公開といった流れ全てがブラウザベースで一気通貫で利用できるのが大きな特徴でしょうか。具体的にはプロトタイプ作成、エミュレータ、開発環境の提供等の機能を持っているとのことで、今回はプロトタイピング機能を触ってみたいと思います。早速TOPページから「Try Firebase Studio」で試してみましょう。ちなみに無料で３つのワークスペースが使用できるそうです（Firebaseの機能を利用する場合はFirebaseの料金体系に準じます）。firebase.google.com以下がTOPページです。「Try Firebase Studio」押下で以下のような画面に遷移します。テキストボックスの上に「Prototype an app with AI」と書かれています。「AIでアプリケーションのプロトタイピングが行えます」ということですね。筆者は元々モバイルアプリの開発を行っていたのですが、その時に始めて作ったアプリはBMIを計算するものでした。なので今回はBMI計算アプリを作ってもらいましょう。日本語で「BMIを計算して表示するアプリを作って欲しい」と書いてみます。身長、体重の入力等もあるわけですが、一旦そのあたりは割愛し、上のようなざっくりした指定でお願いしてみましょう（本当はちゃんとしたプロンプトを書くのが望ましく、あまり情報を割愛すべきではないですが。。）。「Prototype with AI」というボタンが表示されるのでクリックしてみます。すると５～１０秒ほどで以下の表示が。「App Blueprint」つまり「アプリの設計図」ということで「Features」、機能を色々考えてくれました。身長・体重の入力やBMIの計算、表示等、必要な機能は揃っているようです。「STYLE GUIDELINES」では色合いやレイアウト等が記載されています。最低限の内容は揃っているようなのでとりあえず「Prototype this App」で次に進んでみましょう。するとゴリゴリ自動的にコードが書かれていきます。最終的に以下の画面が表示されました。これがプロトタイプのようですね。身長・体重の入力欄もあります。では早速操作してみましょう。試しに適当な身長・体重を入れて（筆者の身長・体重ではありません。。）、「Calculate BMI」をクリックします。BMI値と「Normal」と表示されました。標準ということですね。100kgだと「Obese」、いわゆる肥満と表示されました。作られたファイルが右下に表示されています。「～.tsx」と「～.css」というファイル、そして設計書としての「blueprint.md」が存在しているようです。そこで青いボタン「Edit the Code」をクリックしてみましょう。すると以下のようなVS Codeチック（というかほぼVS Code？）なエディタの画面が表示されます。これもCursorのようにVS Codeをフォークして作られたものなのでしょうか。左側のツリー表示を見ると他にも色々ファイルが生成されており、１つのプロジェクトとしてプロトタイプを作成してくれました。直接コードも書き換えられるようですが、せっかくのAIですのでアプリの変更を再度Geminiに依頼してみましょう。ボタンの色を変えてみたいと思います。先ほどの画面上のボタンは緑でしたので「ボタンの色を赤にして」と入力してみます。上のようなインタラクティブなやり取りの結果、ファイルが変更されたようです。「Review Changes」を押してみます。すると以下のように変更点の差分が表示されています。そして「Update File」を押すとコード上に変更が反映されます。本当に反映されたのか試してみたいですよね。右上の小さいアイコン、「Switch to Prototyper」をクリックしてみましょう。すると先ほどの画面に戻ってボタンが赤になっていることが確認できます。生成AIではハルシネーションが起きうるということで検証を行う必要があります。そこで「テストコードを書いて」とお願いしてみます（ことごとく雑なプロンプトでスミマセン。。）すると上のような表示があり、ファイルの変更・作成があったことがわかります。一覧の一番下にある「src/tests/page.test.tsx」をクリックすると、確かにテストコードを書いてくれています。身長と体重に応じたBMI値と肥満、普通等の文字列による結果とが一致するかを検証してますね。まとめさて、とりあえずAIによるプロトタイピングを試してみましたが、この部分に関して言えば前回の記事で紹介されたCursorや他の生成AIを利用したサービスでも同じことができます。ただ、Firebase Studioでは先ほどお見せしたように作業の中でインタラクティブなやり取りがあり、まずはBlueprintを作成してユーザーに確認させたり、変更する場合でも差分を一旦ユーザーに見せるといった「ユーザーとの対話」がそこには存在しています言い方が悪いかもですが、Cursorで上と同じことをやるとユーザーの確認を待たずにどんどん作成・変更を行ってしまうため、あくまで個人的な感覚ではありますが、よりユーザーに寄り添った印象を受けます（どちらが良い悪いでは無くCursorも素晴らしいツールだと思います）。そして何よりも全てブラウザベースで完結しているため、CursorやVS Code等のエディタ自体のインストールや実行・テスト環境の準備も必要ありません。CursorでNode.jsのコードを書いて実行する場合、実行・テスト環境の準備もAIが手伝ってはくれますがその構築自体の作業・手間は必要になりますし、ローカルPCに色々な設定が必要となるため、PCの環境も汚れてしまいます。Firebase Studioであればブラウザベースなのでそういった煩わしさから全て解放されます。また、何もよりもここでは紹介できなかったものの、既存のFirebaseの各種機能も利用できるというのが一番の強みではないでしょうか。もう少し触ってみまして興味深い機能等を見つけましたらこのブログで紹介できればと思います。当社ネクストスケープは新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net （以下当社お問合せフォーム）Microsoft Forms

Firebase Studioでプロトタイピングをしてみた

Cursorを使ってみる

はじめに株式会社ネクストスケープ ソリューションビジネス部の小野塚です。RDRAに関する締めくくりの記事としてLLM（大規模言語モデル）によるRDRAを紹介したいと思います。直前の記事は以下になります。blog.nextscape.net今までの当社のRDRAに関する記事の流れをお話ししますとRDRA1.0ー＞RDRA2.0ー＞スプレッドシートを用いたRDRA。。という流れでRDRAは進化をしてきまして、それぞれの内容について私の理解も交えて説明させていただきました。そしてここ近年のAIの発展や各社・各ツールのAI導入に伴い、私が把握する限りでは2023年の6月頃から既に神崎さんもRDRA＋AIの組み合わせを使って色々取り組まれていました。私も神崎さんのオンラインセミナーを拝見して、どこかでキャッチアップできればと思っておりました。その神崎さんの成果が「RDRAZeroOne」というツールになりまして、以下のサイトで公開されています。vsa.co.jp今回はこのRDRAZeroOneの使い方・注意点等についてご紹介したいと思います。RDRAZeroOneの立ち位置、使い方そもそもRDRAの利点として、要件定義に多少不慣れな方でもRDRAのフレームワークに従えば、ある程度要件定義が可能となります。ただ、要件定義の対象となるのが「全く知らない業種・業務」になりますと、それに対する自身の勉強・キャッチアップと同時にステークホルダーの方々との打合せにおけるファシリテーションやインタビュー等でいっぱいいっぱいになり、RDRAのようなフレームワークがあったとしても、要件定義は非常に困難を極めることは容易に想像がつくと思います。もっと具体的に言えば、知識ゼロの状態ですのでステークホルダーの方々にこと細かく聞き取りをしなければならず、そうなるとお互いにストレスが溜まっていってしまいます。そこでAIの出番となります。AIを使うことで知らない業種・業務であってもある程度概要・内容を（内容の正否・精度はともかくとして）把握することができますので、それをベースにRDRAを進めていこうというものになります。ただ、ここからが注意点です。AIとそのツールも色々と進化してきまして、要件定義をサポートしてくれるものも出てきました。しかしながら今までAIを使われてきた皆様もご存じの通り、その出力内容は一般的なものであったり、内容が浅かったり、どこかしら間違っていたりしますので、そのまま受け入れることはできません。神崎さんご自身でもセミナー等で触れている通り、あくまでRDRAZeroOneは・自身の理解のための壁打ち・ステークホルダーとの打合せのための叩き台といった目的のために使用するものであることに注意が必要です。そういう意味ではRDRAは1.0より様々な進化をしてきましたが、その根本にある「要件定義のためのコミュニケーションツール」であるという考えはRDRAZeroOneでも変わっていません。RDRAZeroOneで出力された内容を元にコミュニケーションを取り、「いや、そこは違う。うちの会社にはこういう条件が存在する」「実はうちの業務ではこういうアクターが存在し、こういった作業を行う」といったその会社と求めるシステムにおける情報を取り入れ、更にRDRAを使って繰り返し内容を詰めていく。。というものになります。従ってプロンプトもこういうシステムを作りたいから要件定義を。。と丸投げするのではなく、RDRAの進め方に基づいた形でプロンプトを投げます。要件定義を丸投げするのでなく、「人がRDRAを使って要件定義を行うためのサポートをしてもらう」のが重要であり、人が考えることを放棄してはいけません。他のAIを使ったツールにも言えることですが、「AIに使われるのではなく、AIを使いこなす」ようにならないと要件定義もうまくいかないと思います。神崎さんがRDRAZeroOneのページの最初に挙げている「あなたはLLMが出力した要件定義に責任をもてますか？」というのはそういう意味だと思っています。RDRAZeroOneのサンプルではそれなりの出力内容となっていますが、実際に試してみた結果、もっともらしいことが書かれていながら全然違うということもあります。あくまで「叩き台」なので、そのあたりをちゃんとステークホルダーからヒアリングを行い、内容を見直す必要があります。これも重要なポイントです。RDRAZeroOneの使い方、作業の流れでは、RDRAZeroOneの使い方、作業の流れについて軽く説明します。まず、準備としてOpenAIもしくはGeminiのAPIキーを取得してください。以下のダイアログが表示されますので、取得したAPIを登録します。以上が準備作業で、ここからがRDRAZeroOneを使った作業です。このRDRAZeroOneですが、以下の4つの段階に分けてRDRAに必要な情報を洗い出していきます。１．文脈理解２．ビジネスアイディア３．ビジネスデザイン４．システム化検討まずは「文脈理解」ですが、ビジネスの背景、概要を入力してください。これがAIに渡すプロンプトになりますので、できればRDRAZeroOneで提供されるサンプルを参考にして書いてみてください。いつもの図書館システムになると以下のように結構色々と書かれていますが、AIモデルの進歩のおかげもあり、それほどに情報量が無くてもなかなかの出力をしてくれるようです。一通り書けましたら右端の「RUN LLM」ボタンをクリックします。すると以下のようにダイアログが表示され、そこにLLMから得られた情報が出力されます。同時に裏側のRDRAZeroOneの画面にも同じ内容が書き込まれます。そして以下のようにまずは「アクター」「外部システム」を洗い出し。。といったようにいつものRDRAの手順と同じ流れで解析を行ってくれます。残りの３つの段階においても同様に「RUN LLM」により出力が行われ、以下のようにユースケースまで出力が行われます。ちなみにRDRAZeroOneの紹介ページでも同様の注意書きがありますが、RDRA独自の言語ではLLMが理解できないため、「業務」はBUC、つまりビジネスユースケース、「仕事」はアクティビティ、「分類」は業務orコンテキストと読みかえてください。RDRAでいうところの「状態」や「情報」も出力してくれますので、ハルシネーションに気を付けさえすればRDRAの学習にも役立つかもしれません。最初に文脈理解でそれほど情報が無くてもかなりの情報が得られると書きましたが、「それなり」といえば「それなり」なのも確かです。その場合は得られた結果を元に再度文脈理解に戻ってビジネスの背景や概要を追記すればそれに応じて再度出力結果が詳細化し、解像度が上がります。これも今までのRDRAと同様「繰り返し」が肝となります。ちょっと横道にそれますが、RDRAZeroOneにおいてOpenAIとGeminiで使用しているモデルは以下になります。　OpenAIのModel：”gpt-4o-mini”　Gemini：”gemini-2.0-flash-latest”私はOpenAIで実行してみまして、4段階それぞれにRUN LLMを実行した結果、APIの呼び出しにかかった料金は0.02ドル、円レート150円とした場合3円となりました（2025年3月22日現在の情報です）。当然実際にRDRAZeroOneで叩き台レベルまで持っていくためには4回では済まず、何度も繰り返す必要はありますが、それでも十分安く実施できるのではないでしょうか。ツールとしての使い勝手の向上「LLMによって叩き台が得られる」というのはRDRAZeroOneの大きなポイントですが、もう１つ、「ツールとしての使い勝手」も非常に良いものとなっています。前回の記事で紹介した通り、スプレッドシートによるRDRAツールやRDRAGraphにより、図示が非常に楽になりました。しかしながら人間の欲には際限が無く、スプレッドシートによるRDRAももっと簡単に書けたらなと。。思った方もいらっしゃるかもしれません。RDRAZeroOneはその点も改善されています。上部メニューの「TO RDRA」をクリックします。そうするとダイアログが出た後にRDRA用スプレッドシートが開きますので、「ファイル」ー＞「コピーを作成」を選択し、新しい「書き込み可能な」スプレッドシートを開きます。そして、スプレッドシート内の「ZeroOne」シート移動し、一番右上のA1セルで貼り付けを行い、「Import」をクリックします。そうするとスプレッドシート内の他のシートにRDRAZeroOneの内容が出力されます。便利ですねー。。次に今までであればスプレッドシートの内容を元にRDRA Graphで図を出力していたのですが、今回はそれもRDRAZeroOneから１クリックで可能です。RDRAZeroOneの上部メニューから今度は「TO GRAPH」をクリックします。そうするとRDRAZeroOne内のデータを一発でRDRA Graphに出力できるのです。これでRDRAZeroOneー＞スプレッドシートー＞RDRAGraphの行き来が非常に素早く簡単にできるようになりました。神崎さんが元々RDRAに求めていた「高速にRDRAを回していく」ということがこれで更にやりやすくなったわけです。また、AIが出力した文章だけですと出力した本人でも理解しづらい場合があるため（自分が書いているわけではないので）、これをRDRA Graphで図示することにより理解が進むというメリットもあります。先にお話しした通り、AI及びAIを使ったツールを「使いこなす」ことによって時間に余裕ができ、その時間を使ってより良いものを生み出す。RDRAZeroOneを使って生まれた余裕・時間を有効活用し、ステークホルダーの方々ともっとコミュニケーションを取ったり、思考する時間に費やすべきです。当社に限らず皆さんにおいてもRDRAのフレームワークやツールを用いることで、よりベターな要件定義ができればと思います。最後に繰り返しになってしまいますが、RDRAZeroOneによって作られた内容はあくまで叩き台となります。これによって得られたユースケース等は実際の業務・システムに完全に合致しているわけでありませんので、ステークホルダーの方々とRDRAを使って要件定義を進めていくことになります。RDRAZeroOneを使ってその名の通り０から１へ、更にRDRAを使って１から１００へと近づけていくというのが私の理解です。色々と偉そうなことを語ってしまいましたが、私の記事は私の考えに基づく部分が大きいこともあり、RDRAについて詳しく知りたい方は神崎さんの書籍『RDRA2.0 ハンドブック: 軽く柔軟で精度の高い要件定義のモデリング手法』や、神崎さんのセミナー等を受けてみてください。https://vsa.co.jp/img/service.pdf(↑神崎さんの会社、バリューソースのサービス一覧)vsa.co.jp神崎さんもXでこれまでの当社のRDRAに関する記事をツイートいただきました。この場でお礼を申し上げます。当社ネクストスケープは新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。nextscape.net（以下当社お問合せフォーム）Microsoft Forms