Chrome DevTools MCPの新機能
どうも、AI駆動開発ラボ大森です。今回は、Chrome DevToolsという新しい技術が最近できたんですけど、それがめちゃくちゃ凄いんですよというお話をします。
このChrome DevToolsはですね、9月の26日に出ました。Chromeというのはあれですね、Googleが出しているブラウザです。
パソコンで、最近は一番使われているのは、僕も使っているんですが、Chromeのツール、拡張的なツールなんですけど、
MCPというものの中に、このChrome DevToolsというのが新しく増えました。
まずこのMCPって何だって話を簡単に軽くだけするとですね、モデルコンテキストプロトコルの頭を取って、
MCPというものがあります。これ自体はですね、去年の11月ぐらいにちょっとずつ出てきたんですけど、どういうものかというと、
AIがですね、Chat GPTとかが、この何かサービスとかを操作したり見たりすることがより簡単にできるよっていうようなやつです。
ちょっとまだどういうことかイメージつかないと思うので、もうちょっとだけ説明するとですね、
例えばAI駆動開発ですね、AIにプログラミングをさせるときに、
例えば、ウェブサイトを作ろうとしていて、ウェブサイトのデザインがあります。デザインツールでデザインしているものがあります。
今までだったら、それのスクショをとってですね、スクショをとったり画像にして、それをそのAI駆動開発のAIに渡すみたいなことが限界だったんですけど、
このMCPっていうツールを使うと、そのAI駆動開発ツールがデザインソフトを自分で見たり操作したりすることができるっていうようなものです。
AI駆動開発ツールが実際にサービスとかソフトを操作したり閲覧したりすることができるその架け橋というか、USBケーブルみたいなことをMCPと言います。
これによってですね、さっきのウェブサイトのデザインの話で言うと、ここの長さが何ピクセルなんですねっていうのがわかったから、
駆動開発ツールはもうそのままそれをするみたいな、つまり人間がいろいろ橋渡ししたりですね、しなくてもすげー詳細にわかるみたいなことがあります。
これのMCPはですね、徐々に徐々に対応ツールっていうのが増えてきていて、ウェブデザインとかだけじゃなく、例えばデータベースも実際にAI駆動開発が見れるとかですね、いろいろ対応するサービスが増えてきて、
で、Chromeがですね、このMCPに対応したぞっていうのが、9月の26日に発表されたChrome DevTools MCPというようなものです。
AIによるウェブサイト操作
で、このChrome DevTools MCPがあると何がすごいのかっていう話なんですけど、
さっきのデザインソフトの例で言うと、そのままAI駆動開発ツールがChromeを操作できるようになる、Chrome DevToolsを操作できるようになるというようなものです。
で、ウェブサイトとかを作るときに、Chromeに開発者しか使わない機能があって、検証っていう機能があります。
これその右クリックするとですね、いろいろ戻るとか再読み込みとかする出ると思うんですけど、そこに検証って出てると思うんですけど、それを押してもらうとですね、このウェブサイトがどういうプログラムで成り立っているかとか、どういう通信をしているかとか、いろいろ見れるんですね。
みたいなことがですね、今までは人間がですね、ここに何かちょっとエラー出てるなとか、ここなんか速度遅いなとかを見てですね、いろいろ開発をしないといけなかったんですけど、この辺をAI駆動開発ツールが見れるようになるから、例えば自分のウェブサイトとかを見てくださいみたいな、Chrome DevToolsで言って、AI駆動のツールに言うとですね、ここ見に行ってその検証を開いてですね、
実際に速度ここがこうですねとか、ここがボトルネックになっているんだとか、あとここの画像がでかすぎるものを配信されているなみたいなことを、AI駆動開発ツール自体が見てくれるから、特に自分自身の分析力とかそういう知識がなくてもできるようになる。これってめちゃめちゃ革命的だよねみたいな感じになっています。
ウェブサイトを一枚一枚スクショして見せるんじゃなくて、AIがそのサイト内を回遊してですね、リンクをたどっていっていろいろページを見たりみたいなこともAIがしてくれるっていう、本当にもうなんかAIがいるというか、現実世界に行ってパソコンを操作しているみたいな状態になります。
ここまでだけ聞くとですね、ウェブサイトとか作る人用なんだなって思うかもしれないんですけど、さらにすごいと呼ばれているものが、要は単純にウェブを回遊できると。
ウェブサイトがあります。自分が作ったやつじゃなくてもいいんですけど、ウェブサイトがあるときにですね、そこを閲覧操作できちゃうっていうことですね。
例えばですけど、ブラウザを使った自動化ですね。YouTubeのアップしている動画それぞれにタグをちょっとつけてくださいとかの操作もできるだとか、これ便利だよねってXとかで言われているのが、
いろいろ会社とかウェブサイト、フォーマル系のところってその決算のデータをPDF化して置いているよみたいなものがあると思うんですよ。
つまりそういうのを集計したりしたいときにしたいんだけど、集計しやすい形じゃないまま置いておかれているもの、PDFとかをですね、
Chrome DevTools経由でAIが見て文字データとして認識して、文字データとして処理をしてくれる。今までは人間が頑張ってやるかしかなかったのかな、そういうPDFとかになっていると。
みたいな感じで、開発者だけじゃなくて単純に業務効率化、もっと副業の種を見つけるとか、そういう意味、単純にブラウザーをAIが操作しやすくなったよ、めちゃめちゃ操作しやすくなったよっていう意味で、このChrome DevToolsはめちゃめちゃすげーよねっていうふうに言われています。
テストの効率化
これまだまだ未開拓というか、みんな何ができるんだ、どんなことに活用できるんだって言って、Xジョーとかでですね、みんなが言っている状態なのでですね、今多分実はみんな世間が思いついてないすげー使い方みたいなことも多分きっとある、まだ見つかってないとかあるということでですね、とにかくこのChrome DevToolsっていうのが可能性の塊すぎだぞ、みたいな感じで言われています。
開発の、AI駆動開発の目線でもですね、ウェブサイトの作りとかですね、操作感とかね、バグがどこにあるとかっていうのを、本当に知識とか経験とか実はなくても、AIにいっぱい任せられるようになるっていう、すごくAI駆動開発としてもですね、一個ぐんとハードルが下がったようなものになっています。
はい、テストっていうその概念があるんですけど、実際に作ったものがちゃんと動くかテストしようねっていうのがあってですね、いろいろテストの仕方があると、一番原始的なのは人間が目視でするみたいなことがあるんですけど、今までそういうのをプログラムで書いてやらせてたんですよ。
何とかっていうページを開くっていうふうにコマンド書いて、開いて何とかの要素を押すみたいな、そこで何とかフォームを入力して送信をしてみるみたいなことを書いてですね、エラーが出なかったらテスト成功です、みたいなことを書くということがあって、でもただ書けばいいだけじゃなくてちょっとまためんどくさいんですね、いろいろ考えないといけないこととか書き方とかがめんどくさくて、
僕その何回かそのE2Eテスト、Eのアルファベットお文字E2、数字の2でもう一度E2Eテストって言うんですけど、エンドツーエンドテストかなって言うんですけど、それ何回か僕もチャレンジしてみようとしたことがあったんですけど、結果あんま難しくてうまくできなかったっていう挫折していったんですけど、
それがChromeで物理でできるようになった、ここを押してみたいなことをプログラムに書かなくても雑にAIにそこのページまで行ってフォームに何か入力して送信してみて、エラーが出たら教えてといえばできるようになったと、これも革命ですね、僕もそのE2Eテストを自分でプログラムを書く、ダメだみたいなことを半年前ぐらいにしてて、いやでもこれ多分AIできるようになるよなと思って、
つけを置いてたら本当にできるようになったぜみたいなやったぜ、未来予測あったぜみたいな感じなんですけど、みたいな感じですね、可能性無限大めちゃめちゃできること広がってハードル下がったぜみたいなものですんで、まあ良ければ今エア駆動開発ちょっとやってみている方はぜひこのMCPを入れてほしいし、したことない方もですね、
なるほど、どんどんどんどん簡単になっているんだっていうことだけでもちょっとわかってもらってですね、何かじゃあエア駆動開発始めてみようかなと思うきっかけの一つになったら嬉しいなと思っています。
ということでですね、今回はChrome DevToolsというエア駆動開発のみならず、もっと効率化自動化ができるぞっていう革命的なツールのお話をしました。
この放送エア駆動開発ラボではですね、エア駆動開発つまりAIを使って何かを開発する、その何かというのはウェブサイト、ウェブアプリケーション、スマホアプリ、ゲーム、何でもなんですけど、っていうのをですね、めっちゃすげーよ、めっちゃ楽しいんだよ、みんなやろうぜっていうことを僕がお伝えしたい、発信したいと思ってやっているような活動でございます。
これはですね、僕自身がプログラミング全然できねえと、何回もチャレンジしたけどできなかった、難しい、俺にはダメだと思ってたんですけど、AI使ったらちょっとできるかもと思ってですね、半年、1年半前くらいからかな、エア駆動開発という言葉がまだできる前からですね、試行錯誤いろいろしてきてですね、ようやく何でも、ウェブサイト、ウェブアプリケーション、スマホアプリ、ゲーム、何でもござれ、1週間あったら何でも作れるぜみたいな感じになったと。
っていう経験があるのでですね、それの体験を生かして、プログラミングとか全くやったことないよという人でも、分かるように、伝わるように、楽しい、ワクワクして、じゃあやってみようってなるように、分かりやすくお話ししようと思ってやっている活動でございます。
なのでですね、エア駆動開発という言葉、ないしは、俺も何か作ってみたいなと思う方はですね、良ければこの放送をね、いろいろ聞いていただけると、こういう最新のすげえ予測法とか、僕こういうふうにやりましたよとか、エア駆動開発では実際にこういうの作りましたよとかですね、学びになる、きっかけになる、始めるきっかけになるようなことをいろいろお話ししていくので、良ければ今後ともチェックしてみてください。
あと、告知的な話なんですけど、大体2週間後かな、10月の16日、木曜日、平日ですね。平日の夜7時半からオンラインで、Google Meetでですね、オンラインワークショップのようなことを開きます。
絶賛予約受付中です。どういうことをするかというとですね、実際にエア駆動開発で自分のウェブサイトを作ってみようぜっていうことをみんなでやってみようというようなことをしようと思っています。
その時に使うのがですね、Google AI Studioっていう、Googleが出しているAIのツールなんですけど、無料なんですね。完全に無料なんですけど、みんな全然知らなくて、めちゃくちゃすごいんですよ。めちゃくちゃすごくて、こういうサイトを作ってくださいって言うと、数分でポンって出てくるんですけど、それをみんなで使ってみて、自分の各々がですね、各々のウェブサイトを作ってみようぜっていうことをワークショップ的にやりたいなと思っています。
AI駆動開発すげーんだよと、こうやったらいいんだよということをいろいろ言っててもですね、やっぱりやったことないことをやるってめちゃくちゃハードル高いと思うんですよ。
なんでそれをですね、ワークショップ形式でちょっとやってみようぜっていうような企画になっております。
これをするとですね、多分、AI駆動開発めちゃ簡単じゃねーと、Google AI Studioめちゃすごく簡単じゃねーって多分なると思っていて、
でもなっちゃえば、作ったウェブサイトを回収しようが、機能追加していこうが、更新しようが、もっと別に自分のブログ作ろうが、ウェブアプリケーション作ろうが、ゲームも作れんじゃんと、
AIツールとワークショップ
実装する力一人でいろいろAI駆動開発する力がもう本当につくと思っているので、ぜひぜひよかったら参加してみてください。
このワークショップではですね、ウェブサイト作ってみただけじゃなくてですね、実際にURL付きでウェブに公開するよということまでやります。
GitHubっていうサービスとBarcellっていうサービスがあって、どっちも無料で使えるんですね。
無料で使えると。
どっちもエンジニアが今絶賛使っているようなものをですね、最新のものを僕も使ってますっていうものでですね、
作ったプログラムっていうのを保存して、保存したところからウェブに公開するみたいなところまでアカウントを作るところからですね、
みんなでやってみて、みんなで出来上がったものをみんなで見てみると、こういうふうにしてる人もいるんだみたいな。
かわいいねこれとか。
なったらいいんじゃねえかなと思っているので、よかったらチェックしてみてください。
スタンドFMでこれを聞かれている方はスタンドFMの投稿に載っけてます。
YouTubeで聞かれている方はですね、YouTubeのコミュニティのところに投稿しています。
で、あとはそのX大盛章号本名でやってますので、Xの固定のツイートにしていたりですね、しますので、よかったらぜひぜひ見てみてください。
1週間、国会1週間はですね、早割りということで、通常2000円なんですけど1000円で受けれますので、よかったらめちゃめちゃコスパいいと思うんで、よかったら参加しますよボタン押してみてください。
はい、ということでちょっと今回長くなっちゃったんですけど、ここまでご清聴いただきどうもありがとうございました。
今回の放送がですね、面白いな、いいなと思いましたら、ぜひいいねとか高評価とか、これわかんねえぞとかありましたらね、コメントいただけたら色々答えようと思います。
いくつかね、いただいた質問に答えるぜみたいな放送もしていますので、放送内でしっかりとお答えできるかもしれませんので、お気軽にコメントいただければすげえ嬉しいです。
はい、ということで、ここまでご清聴いただきどうもありがとうございました。
AI駆動開発ラボ大森でした。
それではまた次の放送でお会いしましょう。
