WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

弊社では、構造化データをCursorを使ってhtmlファイル内に埋め込ませることがほとんどです。

（WordPressのサイトであれば、プラグインを使うか、functions.phpに記述します。）

1. ディレクターが用意した構造化データの項目がかかれたスプレッドシートを用意
2. その項目をコピー、もしくはCursorのチャットのところにファイルごとドラッグして読み込ませる
3. 予め用意しておいた構造化データ生成用のプロンプトも同時に読み込ませて実行

これだけでheadタグ内に構造化データを埋め込んでくれます。手直しも必要ないことが多いです。

プラグインを使わない場合の構造化データの生成はこれがベストプラクティスかなと思っています。

ネックな点があるとするならば、Cursorの有料プランに入っていないとちゃんと生成して埋め込ませるまでを対応してくれないという事。決して軽い作業ではないので無料版でやろうとなるとやや心許ないです。

何とか無料でやれる方法はないか調べたり考えたりしましたが、パッと良いものは思い浮かばず・・・。

ただ、有料のやり方ではあるのですが、Geminiの有料版を使ってCursorを使わずに、スプレッドシート内の構造化データの項目を自分のデスクトップ内にあるhtmlファイルのheadタグ内に入れ込む方法があり、実際にやってみたら成功しました。

前述したCursorを用いたやり方と比べれば少し手間ではあるのですが、このやり方を応用して構造化データの生成以外にも便利な活用方法が絶対にある、と思えました。

Geminiを介して、デスクトップ内のフォルダ内を整理させる・フォルダ内の文書をまとめて、1つのファイルにするなど。

応用版はまた思いつき次第試してみるとして、今回はGeminiを介して自分のデスクトップ内のhtmlファイルのheadタグ内に構造化データを埋め込む方法を紹介します。

（※Geminiを使うとはいえ、ターミナルやCursor上からGeminiとチャットして生成するような流れになります。そのため、Cursorのようなエディタソフトはご用意いただいた方が良いかもしれません。難しいことはないはずなので、エンジニアでない方でも手順通りにやっていただければ問題なく実装できます。）

STEP01 Node.js をインストールする

エンジニアでない方は聞き馴染みがないかもしれませんが、必要です。インストールしてください。

下記URLよりインストールできます。流れに沿っていけばインストールも難しくないです。

https://nodejs.org

インストール後、

1. Cursorを開く
2. ターミナル→新しいターミナルを開く
3. ターミナル内でnode --versionと入力。

↓の画像の通り、バージョンが20以上になっていればOK。私もバージョンが古かったので今回を機にアップデートをしています。（※画像の内のnpmのバージョンも記載されていますが無視でOKです。）

STEP02 Gemini CLI をインストールする

Gemini CLIとはターミナルで動かす版のGeminiのことです。Cursorのチャット内でClaudeやChat GPTのモデルが使えるのと似たような感じでしょうか。

先程Node.jsのバージョンを確認したのと同じ要領でターミナルを駆使しながら下記を入力してインストールしてください。

npm install -g @google/gemini-cli

↑を入力すると警告文がいっぱい出てくるかと思いますが、気にしなくてOKです。エラーが文が出ていなければ成功です。

STEP03 Gemini CLIを起動してGoogle アカウントでログイン

gemini

とターミナルに入力します。すると、

こんな感じでGEMINIと表示されていればOK。私はこれを見ただけで感動してしまいました。

読みづらくて申し訳ございません。上手くいくと画像の下の方にある通り、

『DO you want to connect Cursor to gemini CLI？（CursorをGemini CLIと連携させますか？）』と聞かれます。

Yes、Noなどの三択があるかと思いますが、一番上のYesをエンターキーを押して選べばOK。

この先も三択くらいで聞かれることが何度かありますが、基本的にはエンターキーを押しておけば問題ありません。

早速３択がでてきました。

こちらもエンターキーを押して、Googleにログインしましょう。

こんな感じのやや物騒な注意文が出てきますが、気にせずログインしましょう。

するとこんな画面に飛ぶはずです↓これならば成功です。ブラウザも閉じて大丈夫です。

ターミナルに戻ってCtrl + Cを押して一度Gemini CLI を終了してください。再起動みたいなイメージですね。

STEP04 Google Apps Script（GAS）で MCP サーバーを作る

4-1. GAS プロジェクトを新規作成

MCPとはAIと外部データを繋ぐための共通規格のことです。

今回でいえば、Gemini CLIとスプレッドシートを繋ぐためのもの。

Gemini CLIがスプレッドシートを読み書きできるようにするための中継役がMCPサーバーです。

それをこのステップで用意していきます。

①ブラウザでGoogle Apps Scriptを開く

②左上の 「新しいプロジェクト」 をクリック

③左上の「無題のプロジェクト」をクリックして、名前を任意のものに変更

因みに、私はMCP_SERVERという名前にしました。

4-2. MCPApp ライブラリを追加

①ライブラリの＋マークをクリック

②下記のスクリプトIDを入力して『検索』をクリック

1TlX_L9COAriBlAYvrMLiRFQ5WVf1n0jChB6zHamq2TNwuSbVlI5sBUzh

③MCPAppが表示されるので最新のバージョンのものを選択して『追加』をクリック

4-3. ToolsForMCPServer ライブラリを追加

同じ手順でライブラリをもう一つ追加します。

次に貼り付けるのはこちらです↓

1lnE7UL1jQgPDbTB9yjhiwZM0SaS9MObhzvWUWb_t8FisO6A3bLepvM2j

こちらも同じく最新のものを選択して追加します。

4-4. スクリプトを記述

①最初から少しコードの記述があるかと思いますが消してOK

②↓のコードを貼り付けて下さい。

const apiKey = "###";

const doPost = (e) => main(e);

function main(eventObject) {
  const m = ToolsForMCPServer;
  m.apiKey = apiKey;
  const object = {
    eventObject,
    items: m.getServer()
  };
  return new MCPApp.mcpApp({ accessKey: "ここに好きなパスワードを設定" })
    .setServices({ lock: LockService.getScriptLock() })
    .server(object);
}

一行目の###の部分は後ほど変更するので現状はこのままでOK。

『ここに好きなパスワードを設定』に任意のパスワードを設定してください。※$ # などの記号を入れるとエラーになるので避けてください。

入力後には、Ctrl + Sで保存するのを忘れずに。

4-5. Google Sheets API と Google Drive API を有効化

①画面左側の『サービス』の＋をクリック

②↓のようなポップが出るかと思うので、一覧から「Google Sheets API」 を選択 → 「追加」

③同じ要領で一覧から 「Google Drive API」 を選択 → 「追加」

4-6. Web App としてデプロイ

①画面の右側にある『デプロイ』→『新しいデプロイ』を選択

②『ウェブアプリ』を選択するとポップアップが出てくるので必要な情報を入力

• 説明→任意のものを入力
• 次のユーザーとして実行→自分
• アクセスできるユーザー→全員

③『デプロイ』をクリックするとアクセス許可を求められるはず。『Select all』にチェックを入れて、Continueボタンを押せばOK。

④新しいデプロイという題名のポップが出るので、その中に記載のIDとURLがあるのでメモ帳などに保存する。後に必要になるのでなくさないこと！！

STEP05 Gemini API キーを取得する

①ブラウザでhttps://aistudio.google.com/を開く

②画面左下の『Get API Key』をクリック

③『新しいプロジェクトを作成』をクリック

④表示された API キーをコピーする

⑤GASに戻り、”###”の部分をコピーしたAPIキーに置き換える

⑥再デプロイ

1. 「デプロイ」 → 「デプロイを管理」
2. 鉛筆アイコン（編集）をクリック
3. バージョンを「新バージョン」に変更
4. 「デプロイ」をクリック

STEP06 Gemini CLI に MCP サーバーを登録する

6-1. 環境変数を設定する

Cursorのターミナルで1つずつ入力していってください。

①APIキーの設定

[System.Environment]::SetEnvironmentVariable('GEMINI_API_KEY', 'ここにAPIキーを貼り付けてください', 'User')

②MCP サーバー URL の設定：

[System.Environment]::SetEnvironmentVariable('MCP_WEB_APPS_URL', 'ここにWeb AppのURL?accessKey=ここにaccessKey', 'User')


//↓みたいになるはずです
[System.Environment]::SetEnvironmentVariable('MCP_WEB_APPS_URL', 'https://script.google.com/macros/s/AKfycbz.../exec?accessKey=myCompany2026secretKey', 'User')

③、④現在のターミナルにも反映

$env:GEMINI_API_KEY = 'ここにAPIキーを貼り付け'

$env:MCP_WEB_APPS_URL = 'ここにWeb AppのURL?accessKey=ここにaccessKey'

↑を入れるとそれぞれ設定した値が表示されます。その状態になったら成功です。

6-2. 拡張機能をインストール

gemini extensions install https://github.com/tanaikech/ToolsForMCPServer-extension

成功していれば画像の最後の行の『Exension〜』が表示されます。

STEP07 動作確認

再びgeminiとだけ入力します。またどでかい表記が出てきます。

その次は、

/mcp

とだけ入力。これでMCPサーバーの接続状態を確認します。

🟢 tools-for-mcp-server-extension - Ready (160 tools, 3 prompts)

のような表示があれば成功です。

するとターミナルに黒背景のいかにもここでGeminiとチャットして！っていう見た目の入力画面があるのでそちらにお願いしたいことを入力していきます。

今回の主題はスプレッドシート内の構造化データを読み取って、<head>内に埋め込んでもらう事でした。

そこで、まずはちゃんとスプレッドシートと上手く連携されているか確認しましょう。

↓のようにお願いしてみました。

チャット入力欄の赤背景のところにスプレッドシートのIDをいれています。

因みにスプレッドシートのIDは↓です。

https://docs.google.com/spreadsheets/d/【ここがID名です】/edit

因みに私がスプレッドシート内に記載したダミーの構造化データの項目がこちらです↑

果たして正確に読みこんでくれたのでしょうか？

結果はこちらです↓

完璧に読み取ってくれました。凄いですね。

最後に目的の場所に埋め込みます。

こんな感じのプロンプトでお願いしてみました。

結果↓

完璧ですね。素晴らしい。とても驚いています。

まとめ

Cursorに直接お願いするやり方と比べると結構回りくどいやり方ですが、正確にやってくれました。

凄いですね・・・、とても便利。

Cursorの有料版を使っていないけど、Geminiの有料版には加入しているという人がいればこのやり方はとても良いかもしれませんね。

• デスクトップ内のあのフォルダ内を整理して
• デスクトップ内のあのフォルダ内にある画像すべてを4/3の比率でトリミングして
• デスクトップ内のあのフォルダ内のある書類をすべて読み込んだうえでまとめになるような文書を作成して

今思いつくだけでも↑のようなものが思いつきました。

一度連携してしまえば『gemini』とターミナル内で入力するだけでチャットすることができます。今回のやり方を応用してどんどん仕事の効率化を図っていきたいと思います。

また新しいアイデアが思いついたらご紹介していきます！