著書「スマート化に必要な問題解決の極意」で取り上げている「言葉だけでは誤解が生じる問題」を「リッチピクチャー」で可視化し、解決策を見つけようとするツール（ソースコードのダウンロードリンク付き）

5月 11, 2026

著書「スマート化に必要な問題解決の極意」で取り上げている「言葉だけでは誤解が生じる問題」を「リッチピクチャー」で可視化し、解決策を見つけようとするテーマです。ご高覧頂ければ幸いです。

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

問題の可視化ツール（Google Apps Script Webアプリ）2026.5.13版

1. 操作方法

　■線を引く-始点の図形上でALTキーを押したまま，終点の図形上にマウスを移動し，ALTキーを離す。

　■図形や線の削除-図形や線をクリックして選択し，「削除」ボタンをクリックする。範囲指定も可能。

　■図形へのテキスト入力-ダブルクリックすると窓が開いて入力できる。

　■全体の位置の調整-全てを選択して，ドラク＆ドロップ操作で移動する。

2. appsscript.json（マニフェスト）

左側のメニューから [プロジェクトの設定] (歯車アイコン) をクリックし，『「appsscript.json」マニフェストファイルをエディタで表示する』に✔を入れて，エディタに戻ると appsscript.json が表示されるので、それをクリックして入力する。

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

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
      .setTitle('Advanced Flowchart Editor')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function getProjectFolder() {
  var file = DriveApp.getFileById(ScriptApp.getScriptId());
  var parents = file.getParents();
  return parents.hasNext() ? parents.next() : DriveApp.getRootFolder();
}

/**
 * URLから画像をBase64化。GoogleドライブURLの場合はIDを抽出して取得。
 */
function fetchImageBase64(url) {
  if (!url) return null;
  try {
    var blob;
    // Google Drive URLの判定とID抽出
    if (url.indexOf("drive.google.com") !== -1) {
      var id = "";
      var match = url.match(/\/d\/([a-zA-Z0-9_-]+)/);
      if (match) { id = match[1]; } 
      else {
        var matchId = url.match(/id=([a-zA-Z0-9_-]+)/);
        if (matchId) { id = matchId[1]; }
      }
      if (id) {
        blob = DriveApp.getFileById(id).getBlob();
      }
    }
    
    // 通常のURLまたはDriveで見つからなかった場合
    if (!blob) {
      blob = UrlFetchApp.fetch(url).getBlob();
    }
    
    return "data:" + blob.getContentType() + ";base64," + Utilities.base64Encode(blob.getBytes());
  } catch (e) {
    console.error("Image Fetch Error: " + e.toString());
    return null;
  }
}

/**
 * 保存処理：画像はDriveにファイル保存し、SSにはそのIDを記録
 */
function saveFlowchart(name, jsonData, base64Images) {
  const lock = LockService.getScriptLock();
  lock.waitLock(10000);
  try {
    const folder = getProjectFolder();
    const cleanName = name.trim();
    
    // 画像保存用のサブフォルダを作成・取得
    const imgFolderName = "Flowchart_Assets";
    const imgFolderItr = folder.getFoldersByName(imgFolderName);
    const imgFolder = imgFolderItr.hasNext() ? imgFolderItr.next() : folder.createFolder(imgFolderName);

// 画像Base64をファイルとして保存し、IDのマップを作成
    const imageIdMap = {};
    for (let nodeId in base64Images) {
      const b64Data = base64Images[nodeId];
      if (!b64Data) continue;

// 既存の同じノード用画像があれば削除（更新処理）
      const oldFiles = imgFolder.getFilesByName(`${cleanName}_${nodeId}.png`);
      while (oldFiles.hasNext()) oldFiles.next().setTrashed(true);

// 新規ファイル作成
      const contentType = b64Data.substring(5, b64Data.indexOf(';'));
      const bytes = Utilities.base64Decode(b64Data.split(',')[1]);
      const blob = Utilities.newBlob(bytes, contentType, `${cleanName}_${nodeId}.png`);
      const file = imgFolder.createFile(blob);
      imageIdMap[nodeId] = file.getId(); // スプレッドシートにはこのIDを保存
    }

// スプレッドシートへの書き込み
    const files = folder.getFilesByName("FlowchartData");
    const ss = files.hasNext() ? SpreadsheetApp.openById(files.next().getId()) : SpreadsheetApp.create("FlowchartData");
    if (!files.hasNext()) DriveApp.getFileById(ss.getId()).moveTo(folder);
    
    const sheet = ss.getSheets()[0];
    const data = sheet.getDataRange().getValues();
    // JSONデータと画像IDマップをセットで保存
    const finalPayload = JSON.stringify({ 
      canvasData: jsonData, 
      imageIdMap: imageIdMap 
    });

let updated = false;
    for (let i = 0; i < data.length; i++) {
      if (String(data[i][0]).trim() === cleanName) {
        sheet.getRange(i + 1, 2).setValue(finalPayload);
        updated = true; break;
      }
    }
    if (!updated) sheet.appendRow([cleanName, finalPayload]);

return { success: true, message: "ドライブへ画像を保存し、記録を完了しました。" };
  } catch (e) {
    return { success: false, message: e.toString() };
  } finally {
    lock.releaseLock();
  }
}

/**
 * 読込処理：ファイルIDからBase64を再生成してフロントへ返す
 */
function loadFlowchartData(name) {
  try {
    const folder = getProjectFolder();
    const files = folder.getFilesByName("FlowchartData");
    if (!files.hasNext()) return null;

const ss = SpreadsheetApp.openById(files.next().getId());
    const data = ss.getSheets()[0].getDataRange().getValues();
    
    for (let i = 0; i < data.length; i++) {
      if (String(data[i][0]).trim() === name.trim()) {
        const payload = JSON.parse(data[i][1]);
        const imageIdMap = payload.imageIdMap || {};
        const base64Map = {};

// ドライブ上のファイルIDからBase64を復元
        for (let nodeId in imageIdMap) {
          try {
            const file = DriveApp.getFileById(imageIdMap[nodeId]);
            const blob = file.getBlob();
            base64Map[nodeId] = "data:" + blob.getContentType() + ";base64," + Utilities.base64Encode(blob.getBytes());
          } catch(err) {
            console.error("File missing: " + imageIdMap[nodeId]);
          }
        }

return { 
          canvasData: payload.canvasData, 
          recoveredImages: base64Map 
        };
      }
    }
  } catch (e) {
    return { error: e.toString() };
  }
}

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #e5e5e5; }
    #toolbar { position: absolute; top: 15px; left: 15px; background: rgba(255,255,255,0.95); padding: 12px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; border: 1px solid #ddd; align-items: center; }
    button, select { padding: 8px 14px; border: 1px solid #ccc; border-radius: 6px; background: white; cursor: pointer; font-size: 13px; transition: all 0.2s; }
    button:hover { background: #f0f0f0; border-color: #999; }
    #canvas { display: block; background: #fff; cursor: crosshair; }
    #modalOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 100; justify-content: center; align-items: center; }
    .modal { background: white; padding: 25px; border-radius: 12px; width: 350px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .modal h3 { margin-top: 0; color: #333; }
    .modal textarea, .modal input { width: 100%; box-sizing: border-box; margin: 10px 0; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
    .setting-group { display:flex; gap:15px; margin: 10px 0; align-items: center; }
    .setting-group label { font-size: 13px; display: flex; align-items: center; gap: 5px; }
    
    #toastContainer { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; }
    .toast { background: #333; color: white; padding: 12px 24px; border-radius: 25px; font-size: 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
    #zoomIndicator { position: absolute; bottom: 15px; right: 15px; background: rgba(0,0,0,0.6); color: white; padding: 5px 12px; border-radius: 15px; font-size: 12px; }
    
    .bg-control { display: flex; align-items: center; gap: 4px; font-size: 12px; border-left: 1px solid #ddd; padding-left: 8px; }
    input[type="color"] { width: 28px; height: 28px; border: none; padding: 0; cursor: pointer; background: none; }
  </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="addNode('rect')">■ 四角</button>
    <button onclick="addNode('circle')">● 円</button>
    <button onclick="selectAll()">全選択</button>
    <button onclick="deleteSelected()">削除</button>
    <button onclick="autoLayout()">自動整列</button>
    <button onclick="undo()">Undo</button>
    <button onclick="redo()">Redo</button>
    <button onclick="exportPNG()">PNG保存</button>
    <button onclick="printCanvas()">印刷</button>
    
    <div class="bg-control">
      背景色: <input type="color" id="bgColorPicker" value="#ffffff" onchange="updateBgColor(this.value)">
      画像URL: <input type="text" id="bgImageUrlInput" placeholder="背景URL" onchange="updateBgImage(this.value)" style="width:80px; padding:6px; border-radius:4px; border:1px solid #ccc;">
    </div>

<div id="modalOverlay">
    <div class="modal">
      <h3 id="modalTitle">設定</h3>
      
      <div id="nodeSettings" style="display:none;">
        <p style="font-size:11px; color:#888; margin-bottom:10px;">※複数選択時は一括適用されます</p>
        <textarea id="nodeText" placeholder="テキスト内容"></textarea>
        <div class="setting-group">
          <label>文字サイズ: <input type="number" id="nodeFontSize" style="width:50px;"></label>
          <label>文字色: <input type="color" id="nodeFontColor"></label>
        </div>
        <div class="setting-group">
          <label>枠の色: <input type="color" id="nodeLineColor"></label>
        </div>
        <label style="font-size: 13px;">画像URL:</label>
        <input type="text" id="nodeImage" placeholder="https://example.com/image.png">
      </div>

<div id="edgeSettings" style="display:none;">
        <p style="font-size:11px; color:#888; margin-bottom:10px;">※複数選択時は一括適用されます</p>
        <div class="setting-group">
          <label>線の色: <input type="color" id="edgeColor"></label>
          <label>サイズ(太さ): <input type="number" id="edgeWidth" style="width:50px;"></label>
        </div>
      </div>

<div style="display:flex; gap:10px; justify-content: flex-end; margin-top: 15px;">
        <button onclick="closeModal()">キャンセル</button>
        <button onclick="saveModal()" style="background:#4A90E2; color:white; border:none;">決定</button>
      </div>
    </div>
  </div>
  
  <div id="toastContainer"></div>

let defNodeFS = 14, defNodeFC = '#000000', defNodeLC = '#333333';
    let defEdgeC = '#555555', defEdgeW = 2;

function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); }
    window.addEventListener('resize', resize);
    function genId() { return Math.random().toString(36).substr(2, 9); }

function draw() {
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height);
      if (bgImageObj) ctx.drawImage(bgImageObj, 0, 0, canvas.width, canvas.height);

ctx.setTransform(scale, 0, 0, scale, panX, panY);
      document.getElementById('zoomIndicator').innerText = `Zoom: ${Math.round(scale * 100)}%`;

edges.forEach(e => {
        const n1 = nodes.find(n => n.id === e.source), n2 = nodes.find(n => n.id === e.target);
        if (!n1 || !n2) return;
        const isSel = selectionIds.includes(e.id);
        const dx = n2.x - n1.x, dy = n2.y - n1.y, dist = Math.sqrt(dx*dx + dy*dy) || 1;
        const offset = dist * 0.25;
        const cx = (n1.x + n2.x)/2 + (dy/dist) * offset, cy = (n1.y + n2.y)/2 - (dx/dist) * offset;
        const p1 = getIntersection(cx, cy, n1), p2 = getIntersection(cx, cy, n2);
        const lw = parseFloat(e.width || 2);
        ctx.beginPath();
        ctx.strokeStyle = isSel ? '#4A90E2' : (e.color || '#555');
        ctx.lineWidth = isSel ? (lw + 2) : lw;
        ctx.moveTo(p1.x, p1.y); ctx.quadraticCurveTo(cx, cy, p2.x, p2.y); ctx.stroke();
        const angle = Math.atan2(p2.y - cy, p2.x - cx), hlen = 6 + (lw * 3);
        ctx.beginPath(); ctx.fillStyle = isSel ? '#4A90E2' : (e.color || '#555');
        ctx.moveTo(p2.x, p2.y);
        ctx.lineTo(p2.x - hlen * Math.cos(angle - Math.PI/7), p2.y - hlen * Math.sin(angle - Math.PI/7));
        ctx.lineTo(p2.x - hlen * Math.cos(angle + Math.PI/7), p2.y - hlen * Math.sin(angle + Math.PI/7));
        ctx.fill();
      });

nodes.forEach(n => {
        const isSel = selectionIds.includes(n.id);
        ctx.save();
        ctx.beginPath();
        if (n.type === 'circle') ctx.arc(n.x, n.y, n.w/2, 0, Math.PI*2);
        else ctx.rect(n.x - n.w/2, n.y - n.h/2, n.w, n.h);
        
        ctx.fillStyle = '#fff'; ctx.fill();
        
        // 画像がある場合はクリッピングして描画
        if (imageMap[n.id]) {
          ctx.save();
          ctx.clip();
          ctx.drawImage(imageMap[n.id], n.x - n.w/2, n.y - n.h/2, n.w, n.h);
          ctx.restore();
        }

ctx.strokeStyle = isSel ? '#4A90E2' : (n.lineColor || '#333');
        ctx.lineWidth = isSel ? 3 : 1.5;
        ctx.stroke();
        ctx.restore();

if (n.text) {
          const fs = n.fontSize || 14; ctx.font = `bold ${fs}px sans-serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
          const lines = n.text.split('\n'), lh = fs * 1.3, sy = n.y - (lines.length - 1) * lh / 2;
          lines.forEach((l, i) => {
            ctx.strokeStyle = 'white'; ctx.lineWidth = 3; ctx.strokeText(l, n.x, sy + i*lh);
            ctx.fillStyle = n.fontColor || '#000'; ctx.fillText(l, n.x, sy + i*lh);
          });
        }
      });
    }

function getBezierXY(t, p0, cp, p1) {
      return { x: (1-t)**2 * p0.x + 2*(1-t)*t * cp.x + t**2 * p1.x, y: (1-t)**2 * p0.y + 2*(1-t)*t * cp.y + t**2 * p1.y };
    }

let isDragging = false, isPanning = false, isResizing = false, isLinking = false, activeId = null, lastX, lastY;

canvas.addEventListener('mousedown', e => {
      const mx = (e.clientX - panX) / scale, my = (e.clientY - panY) / scale;
      if (e.button === 1 || (e.shiftKey && e.ctrlKey)) { isPanning = true; lastX = e.clientX; lastY = e.clientY; return; }
      for (let n of nodes) {
        if (selectionIds.includes(n.id) && n.type === 'rect' && Math.abs(mx - (n.x + n.w/2)) < 10 && Math.abs(my - (n.y + n.h/2)) < 10) { isResizing = true; activeId = n.id; return; }
      }
      let hitId = null;
      for (let i = nodes.length - 1; i >= 0; i--) {
        const n = nodes[i];
        if (n.type === 'circle' ? Math.hypot(mx - n.x, my - n.y) < n.w/2 : Math.abs(mx - n.x) < n.w/2 && Math.abs(my - n.y) < n.h/2) { hitId = n.id; break; }
      }
      if (!hitId) {
        for (let e of edges) {
          const n1 = nodes.find(n => n.id === e.source), n2 = nodes.find(n => n.id === e.target);
          if (!n1 || !n2) continue;
          const dx = n2.x - n1.x, dy = n2.y - n1.y, dist = Math.sqrt(dx*dx + dy*dy);
          const cx = (n1.x + n2.x)/2 + (dy/dist) * (dist * 0.25), cy = (n1.y + n2.y)/2 - (dx/dist) * (dist * 0.25);
          for (let t = 0; t <= 1; t += 0.05) { if (Math.hypot(mx - getBezierXY(t, n1, {x:cx, y:cy}, n2).x, my - getBezierXY(t, n1, {x:cx, y:cy}, n2).y) < 15 / scale) { hitId = e.id; break; } }
          if (hitId) break;
        }
      }
      if (e.altKey && hitId && nodes.some(n=>n.id===hitId)) { isLinking = true; activeId = hitId; return; }
      if (hitId) {
        if (!selectionIds.includes(hitId)) { if (!e.shiftKey) selectionIds = []; selectionIds.push(hitId); }
        isDragging = nodes.some(n => n.id === hitId); activeId = hitId; lastX = mx; lastY = my;
      } else { selectionIds = []; }
      draw();
    });

canvas.addEventListener('mousemove', e => {
      const mx = (e.clientX - panX) / scale, my = (e.clientY - panY) / scale;
      if (isPanning) { panX += e.clientX - lastX; panY += e.clientY - lastY; lastX = e.clientX; lastY = e.clientY; draw(); return; }
      if (isResizing) { const n = nodes.find(n => n.id === activeId); n.w = Math.max(40, (mx - n.x) * 2); n.h = Math.max(40, (my - n.y) * 2); draw(); return; }
      if (isDragging) { const dx = mx - lastX, dy = my - lastY; nodes.filter(n => selectionIds.includes(n.id)).forEach(n => { n.x += dx; n.y += dy; }); lastX = mx; lastY = my; draw(); return; }
      if (isLinking) { draw(); const n = nodes.find(x=>x.id===activeId); ctx.beginPath(); ctx.setLineDash([5,5]); ctx.moveTo(n.x, n.y); ctx.lineTo(mx, my); ctx.stroke(); ctx.setLineDash([]); }
    });

canvas.addEventListener('mouseup', e => {
      if (isLinking) {
        const mx = (e.clientX - panX) / scale, my = (e.clientY - panY) / scale, target = nodes.find(n => Math.abs(mx - n.x) < n.w/2 && Math.abs(my - n.y) < n.h/2);
        if (target && target.id !== activeId) { edges.push({ id: genId(), source: activeId, target: target.id, color: defEdgeC, width: defEdgeW }); saveState(); }
      }
      if (isDragging || isResizing || isLinking) saveState();
      isDragging = isPanning = isResizing = isLinking = false; activeId = null; draw();
    });

canvas.addEventListener('dblclick', () => {
      const selNodes = nodes.filter(x => selectionIds.includes(x.id));
      const selEdges = edges.filter(x => selectionIds.includes(x.id));
      if (selNodes.length > 0) {
        document.getElementById('modalTitle').innerText = (selNodes.length > 1) ? `図形の一括設定 (${selNodes.length}件)` : '図形の設定';
        document.getElementById('nodeSettings').style.display = 'block';
        document.getElementById('edgeSettings').style.display = 'none';
        const n = selNodes[0];
        document.getElementById('nodeText').value = selNodes.length === 1 ? n.text : '';
        document.getElementById('nodeFontSize').value = n.fontSize || defNodeFS;
        document.getElementById('nodeFontColor').value = n.fontColor || defNodeFC;
        document.getElementById('nodeLineColor').value = n.lineColor || defNodeLC;
        document.getElementById('nodeImage').value = n.imgUrl || ''; // URLをセット
        document.getElementById('modalOverlay').style.display = 'flex';
      } else if (selEdges.length > 0) {
        document.getElementById('modalTitle').innerText = (selEdges.length > 1) ? `線の一括設定 (${selEdges.length}件)` : '線の設定';
        document.getElementById('nodeSettings').style.display = 'none';
        document.getElementById('edgeSettings').style.display = 'block';
        const e = selEdges[0];
        document.getElementById('edgeColor').value = e.color || defEdgeC;
        document.getElementById('edgeWidth').value = e.width || defEdgeW;
        document.getElementById('modalOverlay').style.display = 'flex';
      }
    });

このブログを検索

問題解決には、抱えている人や解決しようとする人の間で共有するために、まず問題をリッチピクチャーで可視化して、因果ル一プを描きます。その上で、個々の因果ループを増幅・減衰する解決策を見つけていくのです。

著書「スマート化に必要な問題解決の極意」で取り上げている「言葉だけでは誤解が生じる問題」を「リッチピクチャー」で可視化し、解決策を見つけようとするツール（ソースコードのダウンロードリンク付き）