子どもたちに読解力を身につけてもらうために「文章の可視化(□→□）」能力育成ツールをGeminiに相談してGAS Webアプリにしました。

詳しくは，著書「スマート化に必要な問題解決の極意」をご高覧願います。

また，アプリを作る部分については，著書「毎日無料のGeminiに相談するだけで作るGoogle Apps Script Webアプリ 3.1 Pro対応版」をご高覧願います。

単純形

1. 事前準備（APIキーの設定）

GASのエディタ画面で「設定（歯車アイコン）」＞「スクリプトプロパティ」を開き、以下のプロパティを追加してください。

プロパティ名: GEMINI_API_KEY

値: あなたのGemini APIキー

2. Code.gs（サーバーサイド）

/**
 * Webアプリにアクセスした際の処理
 */
function doGet(イベント) {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('文章構造の比較可視化アプリ')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * 2つの文章をGemini APIで並列解析する関数
 * @param {string} 文章１ - 1つ目の入力文章
 * @param {string} 文章２ - 2つ目の入力文章
 * @return {Array<string>} Mermaid記法の文字列を格納した配列
 */
function 並列文章解析を実行(文章１, 文章２) {
  const スクリプトプロパティ = PropertiesService.getScriptProperties();
  const ＡＰＩキー = スクリプトプロパティ.getProperty('GEMINI_API_KEY');
  
  if (!ＡＰＩキー) {
    throw new Error('スクリプトプロパティに GEMINI_API_KEY が設定されていません。');
  }

const エンドポイントＵＲＬ = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${ＡＰＩキー}`;

const プロンプトを作成 = (対象の文章) => `
以下の文章を解析し、名詞と動詞の関係を抽出してMermaid記法（graph LR）のみを出力してください。

【厳守するルール】
1. 形状: 名詞は「四角形（ノード）」、動詞は「線上のラベル（エッジ）」として表現すること。
2. 配置: 「主語（動作主・受け手）」は必ず左側、「対象（目的語・動作主）」は必ず右側に配置すること。
3. 能動態の場合:
   矢印は「左（主語）」から「右（対象）」へ向けること（例: 主語[主語] -->|動詞| 対象[対象]）。
   動詞ラベルはそのまま表示すること。
4. 受動態の場合:
   矢印は「右（動作主）」から「左（主語）」へ向けること。
   動詞ラベルは「能動態（受動態）」の形式に変換して表示すること（例：「命じられた」→「命じる（命じられた）」）。
   ※Mermaidの仕様上、左側の位置を維持しつつ右から左へ矢印を引くため、必ず以下の構文を使用すること：
   主語[主語] ~~~ 動作主[動作主]
   動作主[動作主] -->|能動態（受動態）| 主語[主語]
5. Mermaidのコードブロック修飾（\`\`\`mermaid など）は一切含めず、純粋なテキストのみ出力すること。
6. 先頭に「graph LR」を必ず記述すること。

対象の文章：
${対象の文章}
  `;

const リクエストデータを作成 = (文章) => ({
    url: エンドポイントＵＲＬ,
    method: 'post',
    contentType: 'application/json',
    payload: JSON.stringify({
      contents: [{
        parts: [{ text: プロンプトを作成(文章) }]
      }]
    }),
    muteHttpExceptions: true
  });

const リクエスト配列 = [
    リクエストデータを作成(文章１),
    リクエストデータを作成(文章２)
  ];

// Promise.allに相当するGASの並列フェッチ処理
  const レスポンス配列 = UrlFetchApp.fetchAll(リクエスト配列);

const 解析結果を取得 = (レスポンス) => {
    const ステータスコード = レスポンス.getResponseCode();
    const 応答テキスト = レスポンス.getContentText();
    
    if (ステータスコード !== 200) {
      throw new Error(`APIエラー: ${ステータスコード} - ${応答テキスト}`);
    }
    
    const ＪＳＯＮデータ = JSON.parse(応答テキスト);
    return ＪＳＯＮデータ.candidates[0].content.parts[0].text.trim();
  };

return [
    解析結果を取得(レスポンス配列[0]),
    解析結果を取得(レスポンス配列[1])
  ];
}

3. index.html（フロントエンド）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文章構造の比較可視化</title>
  <style>
    /* 全体・レイアウト設定 */
    body {
      font-family: sans-serif;
      margin: 20px;
      color: #333;
    }
    .左右並列コンテナ {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      width: 100%;
    }
    .要素ブロック {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    
    /* 入力エリア設定 */
    .テキスト入力欄 {
      width: 100%;
      height: 100px;
      padding: 10px;
      box-sizing: border-box;
      resize: vertical;
    }
    
    /* 図解エリア設定（横スクロール、最小幅担保） */
    .図解パネル {
      border: 1px solid #ccc;
      padding: 15px;
      background-color: #fafafa;
      overflow-x: auto;
      min-width: 300px; /* CSSでの最小幅担保 */
      min-height: 200px;
    }

/* ボタン・ステータス設定 */
    .操作ボタン {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #4285f4;
      color: white;
      border: none;
      border-radius: 4px;
    }
    .操作ボタン:disabled {
      background-color: #aaa;
    }
    .処理状態テキスト {
      margin-left: 15px;
      color: #d93025;
      font-weight: bold;
    }
  </style>
  
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body>

<h2>文章構造の比較可視化アプリ</h2>

<div class="左右並列コンテナ">
    <div class="要素ブロック">
      <label for="文章入力欄１">文章 1</label>
      <textarea id="文章入力欄１" class="テキスト入力欄" placeholder="例：上司が部下に仕事を追加で命じた。"></textarea>
    </div>
    <div class="要素ブロック">
      <label for="文章入力欄２">文章 2</label>
      <textarea id="文章入力欄２" class="テキスト入力欄" placeholder="例：部下は上司から仕事を追加で命じられた。"></textarea>
    </div>
  </div>

<div>


<button id="解析実行ボタン" class="操作ボタン">解析・比較を実行</button>
    <span id="処理ステータス表示" class="処理状態テキスト"></span>
  </div>

<hr>

<div class="左右並列コンテナ">
    <div class="要素ブロック">
      <h4>文章 1 の図解</h4>
      <div id="図解表示領域１" class="図解パネル"></div>
    </div>
    <div class="要素ブロック">
      <h4>文章 2 の図解</h4>
      <div id="図解表示領域２" class="図解パネル"></div>
    </div>
  </div>

/**
     * ボタン押下時に実行されるメイン処理
     */
    function 比較処理を開始() {
      const 文章１ = document.getElementById('文章入力欄１').value.trim();
      const 文章２ = document.getElementById('文章入力欄２').value.trim();

if (!文章１ || !文章２) {
        alert('両方の文章を入力してください。');
        return;
      }

// UIの状態を処理中に変更
      document.getElementById('解析実行ボタン').disabled = true;
      document.getElementById('処理ステータス表示').textContent = '解析中...（Gemini APIで並列処理を実行しています）';
      document.getElementById('図解表示領域１').innerHTML = '';
      document.getElementById('図解表示領域２').innerHTML = '';

// GAS側の関数を呼び出し
      google.script.run
        .withSuccessHandler(解析成功時の処理)
        .withFailureHandler(解析失敗時の処理)
        .並列文章解析を実行(文章１, 文章２);
    }

/**
     * GASからの処理が成功した場合のコールバック
     * @param {Array<string>} 解析結果配列 
     */
    async function 解析成功時の処理(解析結果配列) {
      document.getElementById('処理ステータス表示').textContent = '';
      document.getElementById('解析実行ボタン').disabled = false;

const マーメイド記述１ = 解析結果配列[0];
      const マーメイド記述２ = 解析結果配列[1];

await 図解を描画('図解表示領域１', マーメイド記述１, 'graph1');
      await 図解を描画('図解表示領域２', マーメイド記述２, 'graph2');
    }

/**
     * GASからの処理が失敗した場合のコールバック
     * @param {Error} エラー 
     */
    function 解析失敗時の処理(エラー) {
      document.getElementById('処理ステータス表示').textContent = 'エラーが発生しました: ' + エラー.message;
      document.getElementById('解析実行ボタン').disabled = false;
    }

/**
     * Mermaid記法をSVGに変換して対象要素に描画する関数
     * @param {string} 要素ＩＤ 
     * @param {string} マーメイドテキスト 
     * @param {string} ＳＶＧＩＤ 
     */
    async function 図解を描画(要素ＩＤ, マーメイドテキスト, ＳＶＧＩＤ) {
      const 対象要素 = document.getElementById(要素ＩＤ);
      try {
        // 余分な改行やフォーマット崩れを防ぐ
        const 整形済みテキスト = マーメイドテキスト.replace(/```mermaid/g, '').replace(/```/g, '').trim();
        const { svg } = await mermaid.render(ＳＶＧＩＤ, 整形済みテキスト);
        対象要素.innerHTML = svg;
      } catch (エラー) {
        対象要素.innerHTML = `<span style="color:red">図解の生成に失敗しました。<br>${エラー.message}</span>`;
        console.error(エラー);
      }
    }
// ...既存の関数の後に追加...

/**
 * ページ読み込み完了時の処理
 */
window.addEventListener('DOMContentLoaded', () => {
  // ボタンにクリックイベントを登録
  const 実行ボタン要素 = document.getElementById('解析実行ボタン');
  if (実行ボタン要素) {
    実行ボタン要素.addEventListener('click', 比較処理を開始);
  }
});
  </script>
</body>
</html>

複雑形

1. 事前準備（APIキーの設定）

GASのエディタ画面で「設定（歯車アイコン）」＞「スクリプトプロパティ」を開き、以下のプロパティを追加してください。

プロパティ名: GEMINI_API_KEY

値: あなたのGemini APIキー

2. Code.gs（サーバーサイド）

/**
 * Webアプリの表示
 */
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('文章構造・左右比較ツール')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

/**
 * Gemini APIを使用して文章構造を解析する
 * @param {string} 解析テキスト
 * @return {Object} 解析結果
 */
function 文章構造解析(解析テキスト) {
  const スクリプトプロパティ = PropertiesService.getScriptProperties();
  const APIキー = スクリプトプロパティ.getProperty('GEMINI_API_KEY');
  const モデル = "gemini-3-flash-preview";
  const エンドポイント = `https://generativelanguage.googleapis.com/v1beta/models/${モデル}:generateContent?key=${APIキー}`;

const プロンプト = `
    以下の日本語テキストを解析し、JSON形式で出力してください。
    「主語」を左側に、「相手（目的語/動作主）」を右側に配置する構造を生成します。

【ルール】
    1. 能動態（例：AがBを褒めた）
       - 左要素: "A", 右要素: "B", ラベル: "褒めた", 態: "能動"
    2. 受動態（例：AがBに褒められた）
       - 左要素: "A", 右要素: "B", ラベル: "褒める（褒められた）", 態: "受動"
       ※受動態の動詞は「能動形（受動形）」に書き換えてください。

【出力形式】
    {
      "要素リスト": [
        {"左要素": "名詞", "右要素": "名詞", "ラベル": "動詞", "態": "能動|受動"}
      ]
    }

【対象テキスト】
    ${解析テキスト}
  `;

const オプション = {
    method: "post",
    contentType: "application/json",
    payload: JSON.stringify({
      contents: [{ parts: [{ text: プロンプト }] }],
      generationConfig: { responseMimeType: "application/json" }
    }),
    muteHttpExceptions: true
  };

const 応答 = UrlFetchApp.fetch(エンドポイント, オプション);
  const 応答データ = JSON.parse(応答.getContentText());
  
  return JSON.parse(応答データ.candidates[0].content.parts[0].text);
}

3. index.html（フロントエンド）

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <style>
    body { font-family: 'Hiragino Kaku Gothic ProN', sans-serif; background-color: #f0f4f8; padding: 20px; }
    .メインコンテナ { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    
    .入力エリア { display: flex; gap: 20px; margin-bottom: 20px; }
    .入力単位 { flex: 1; }
    textarea { width: 100%; height: 80px; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 15px; resize: none; }
    
    .ボタン配置 { text-align: center; margin-bottom: 30px; }
    #解析ボタン { background-color: #2d3436; color: white; border: none; padding: 12px 50px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; }
    #解析ボタン:disabled { background-color: #b2bec3; }

/* 左右比較用パネル */
    .比較コンテナ { display: flex; gap: 20px; align-items: stretch; }
    .図解パネル { 
      flex: 1; 
      border: 2px solid #e9ecef; 
      border-radius: 8px; 
      padding: 15px; 
      background: #ffffff;
      overflow-x: auto; /* 図が大きい場合はスクロール */
      min-height: 450px;
    }
    .ラベル { text-align: center; font-weight: bold; margin-bottom: 15px; color: #636e72; border-bottom: 1px solid #eee; padding-bottom: 5px; }

/* 図が小さくならないための設定 */
    .mermaid {
      min-width: 500px; 
      margin: 0 auto;
    }
    .読み込み中 { text-align: center; display: none; color: #0984e3; margin-top: 10px; }
  </style>
</head>
<body>

<div class="メインコンテナ">
  <h2 style="text-align:center;">文章構造 比較可視化</h2>
  
  <div class="入力エリア">
    <div class="入力単位">
      <div class="ラベル">文章 1 (左図)</div>
      <textarea id="入力1" placeholder="例：課長が私にプロジェクトを命じた。"></textarea>
    </div>
    <div class="入力単位">
      <div class="ラベル">文章 2 (右図)</div>
      <textarea id="入力2" placeholder="例：私が課長にプロジェクトを命じられた。"></textarea>
    </div>
  </div>

<div class="ボタン配置">
    <button id="解析ボタン" onclick="比較実行()">図を生成して比較</button>
    <p id="処理メッセージ" class="読み込み中">解析中...</p>
  </div>

async function 比較実行() {
    const 文1 = document.getElementById('入力1').value;
    const 文2 = document.getElementById('入力2').value;
    const ボタン = document.getElementById('解析ボタン');
    const メッセージ = document.getElementById('処理メッセージ');

if (!文1 || !文2) {
      alert("両方の文章を入力してください。");
      return;
    }

ボタン.disabled = true;
    メッセージ.style.display = 'block';

try {
      // 2つの文章を並列解析
      const [データ1, データ2] = await Promise.all([
        解析リクエスト(文1),
        解析リクエスト(文2)
      ]);

描画('描画1', データ1);
      描画('描画2', データ2);

} catch (エラー) {
      alert("エラーが発生しました: " + エラー);
    } finally {
      ボタン.disabled = false;
      メッセージ.style.display = 'none';
    }
  }

function 解析リクエスト(テキスト) {
    return new Promise((resolve, reject) => {
      google.script.run
        .withSuccessHandler(resolve)
        .withFailureHandler(reject)
        .文章構造解析(テキスト);
    });
  }

function 描画(要素ID, 解析データ) {
    let 記法 = "graph LR\n"; 
    
    解析データ.要素リスト.forEach((項目, index) => {
      const 左 = `L${要素ID}${index}`;
      const 右 = `R${要素ID}${index}`;
      
      記法 += `  ${左}["${項目.左要素}"]\n`;
      記法 += `  ${右}["${項目.右要素}"]\n`;

if (項目.態 === "能動") {
        // 左(主語) から 右(対象)
        記法 += `  ${左} -- "${項目.ラベル}" --> ${右}\n`;
      } else {
        // 右(動作主) から 左(主語)
        記法 += `  ${右} -- "${項目.ラベル}" --> ${左}\n`;
      }
    });

const コンテナ = document.getElementById(要素ID);
    コンテナ.removeAttribute('data-processed');
    コンテナ.textContent = 記法;
    
    mermaid.run({ nodes: [コンテナ] });
  }
</script>

</body>
</html>

このブログを検索

子どもたちに読解力を身につけてもらうことは，問題解決のために問題を誤解なく共有するための可視化（リッチピクチャー化）手法を使って，頭の中に主語や述語の関係を図式化（□→□を描く）能力を育成するのが近道

子どもたちに読解力を身につけてもらうために「文章の可視化(□→□）」能力育成ツールをGeminiに相談してGAS Webアプリにしました。

単純形

複雑形