SONUB
JA English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

通知を有効にする方法

このブラウザーまたはアドレスでは通知を利用できません。対応ブラウザーで安全な接続のSONUBサイトを開いてください。

通知がブロックされている場合は、ブラウザーの設定で許可してください。

  1. アドレスバー横のサイト設定、またはブラウザーのサイト設定を開き、このサイトの通知を許可に変更してください。
  2. 端末の設定でブラウザーの通知を許可し、おやすみモードや集中モードを確認してください。
  3. SONUBに戻ってページを再読み込みし、ベルから通知を有効にしてください。

iPhoneやiPadではSONUBをホーム画面に追加し、そこから開いて通知を許可してください。

ログイン ログアウト 表示テーマ 標準テーマ ダークテーマ ピンクテーマ チャット 1:1 チャット グループチャット 掲示板 お知らせ ニュース掲示板 ご意見掲示板 メインメニュー
を外のツールにつなぐ標準

MCP(Model Context Protocol)

できあいの をにつないで使います。エージェントがウェブで働く3つの方法 — WebMCP・ MCP・Playwright MCP — の違いと安全のルールを見ます。

エージェントに MCP サーバーをつなぐ

は、につないではじめて使えます。つなぐ(・codex add)と範囲・確かめ方はごとに違うので、それぞれのツールの画面の MCP の単元に1回ずつ書いてあります。

WebMCP vs Chrome DevTools MCP vs Playwright MCP

3つとも、エージェントがウェブで働けるようにします。違うのは、だれが準備するかと、エージェントがどう働くかです。WebMCP はウェブサイトの側が「私のサイトではこんな機能が使えます」と宣言するブラウザーの で、残りの2つはエージェントの側にインストールして、どのサイトでもブラウザーを直接操作する MCP サーバーです。

ブラウザーで働く3つの方法の比較
項目 WebMCP Chrome DevTools MCP Playwright MCP
何か ウェブサイトが使うブラウザーの API — まだ提案段階のウェブ標準(Web コミュニティグループの草案) エージェントの側にインストールする MCP サーバー(Google チーム) エージェントの側にインストールする MCP サーバー(Microsoft)
だれが準備するか ウェブサイトの開発者 — 自分のサイトのに registerTool() を入れてツールを登録します エージェントを使う人 — 自分のエージェントにを加えます エージェントを使う人 — 自分のエージェントにサーバーを加えます
エージェントの働き方 サイトが登録したツールを名前で呼びます。画面を読んで推測する必要がありません。 本物の Chrome を で操作してのぞき込みます — クリック・入力・。 ページのアクセシビリティツリー(画面の構造)を読んでクリック・入力します — 絵ではなく構造を見ます。
得意なこと そのサイトの機能を正確に速く、ログインした自分ののまま使います — パフォーマンスの記録、のリクエスト、 ・テスト — ・・WebKit の複数のブラウザー
限界 サイトがツールを登録した所でしか使えません。新しい標準なので、対応するブラウザー・サイトはまだ少ないです。 Chrome(と Chrome for )向けに作られています。画面が変わると、探し直す必要があります。 画面の構造が変わると、探し直す必要があります。サイトが決めた機能ではなく、ボタン1つ1つで働きます。

はじめのコード

WebMCP · shop.js
// WebMCP: the website registers its own feature as a tool
// (first explainer / Chrome preview: navigator.modelContext,
//  spec draft 2026-10-27: document.modelContext)
const modelContext = document.modelContext ?? navigator.modelContext;

modelContext.registerTool({
  name: "search-products",
  description: "Search this shop's products by keyword",
  inputSchema: {
    type: "object",
    properties: { query: { type: "string" } },
    required: ["query"],
  },
  async execute({ query }) {
    const response = await fetch("/api/products?q=" + encodeURIComponent(query));
    return await response.json();   // the agent gets this result
  },
});
Chrome DevTools MCP · Terminal
# Chrome DevTools MCP: add the server to your agent (Claude Code)
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
Playwright MCP · Terminal
# Playwright MCP: add the server to your agent (Claude Code)
claude mcp add playwright -- npx @playwright/mcp@latest

WebMCP はサイトの に、残りの2つは自分のコンピューターのに書きます。WebMCP の最初の説明と Chrome のプレビューは navigator.modelContext を、2026-10-27 の草案は document.modelContext を使います — 仕様はまだ変わっている途中です。

たとえで見る — メニューを掲げた店とおつかいロボット

WebMCP = 店が掲げた注文窓口とメニュー

  • 店(ウェブサイト)が入り口に「ご注文はこの窓口へ」というメニューを前もって掲げます。
  • メニューには注文できるもの(ツールの名前)と注文書の書き方(入力)が書いてあります。
  • ロボット(エージェント)はメニューを読んで、窓口に注文書を出すだけです — 店の中を歩き回りません。
  • ただし、窓口を作ってある店でしか、このように注文できません。

Chrome DevTools MCP・Playwright MCP = お客さんが送ったおつかいロボット

  • お客さん(エージェントを使う人)がおつかいロボットを店に送ります。店は何も準備しなくてかまいません。
  • ロボットは店の中を自分で見て回り、棚を読み、品物を手に取り、レジのボタンを押します。
  • どの店にも入れますが、陳列が変わると探し直すので、遅くなったり迷ったりすることがあります。
  • Chrome DevTools MCP のロボットは、店の配線やメーターまで見る点検の技術者です(パフォーマンス・ネットワーク・コンソール)。
  • Playwright MCP のロボットは、決められた買い物の順番を複数の店(ブラウザー)でまったく同じにくり返す買い物ロボットです。

まとめると、窓口のある店では窓口で注文するのが速くて正確です。窓口のない店では、ロボットが自分で見て回るしかありません。だから3つはおたがいの代わりにはならず、いっしょに使います。

MCP の安全のルール

安全: ツールはあなたので動くコードです。また、信頼できるサーバーでなければ、ツールの説明も信用できません。仕様は、ホストがツールを呼ぶ前にユーザーの同意を得るよう求めています。自分で読んだか信頼できるサーバーだけをインストールし、サーバーには必要最小限のアクセスだけをわたし、はコードではなく環境変数に置き、に気をつけましょう — ツールが読むWebページやファイルに、をねらった指示が入っていることがあります。

出典

AIコースでもいっしょに学ぶ

AIコースの MCP チャプター — 目標・課題・進み具合

ガイドライン

人工知能

エージェントツール

バイブコーディング

AI活用

AI資格

AI授業

IT基礎

チャット

掲示板

制作

コミュニティ

その他

用語辞典

知らない言葉を選んでみましょう。やさしい説明と関連用語が見られます。

その用語はまだありません。

用語を選ぶと説明が表示されます。