@AI-Japan-Index(大河瑞岡)『『AI補助金・助成金ファインダー』』政府AI補助金データ（7制度・採択率推移）をWordPressで可視化してみたJavaScriptWordPressd3.jsAI補助金0Posted at 2026-04-20 この記事でできること D3.js v7を使って補助金の補助額比較・採択率推移・政府予算推移を描画する手順を理解できる WordPressにD3.jsを組み込む際の3つの必須対応（CDNタグ禁止・&&禁止・wp:htmlラッパー）が分かる異なる出典のデータを単一チャートに統合するときの設計上の注意点を学べる実際に動作するツールはAI補助金・助成金ファインダー（AI Japan Index）で確認できる環境・前提ブラウザ: Chrome 123+ / Firefox 125+ / Safari 17+ D3.js: v7（CDNからの動的ロード） WordPress: 6.5以降（SWELLテーマ使用環境を想定） JavaScript: ES2020（Vanilla）追加のビルドツールなし（webpack/Vite等不要）完成形政府AI関連予算の推移（2018〜2024年度）、IT導入補助金の採択率推移（2020〜2024年度）、AI補助金7制度の最大補助額比較の3チャートをインタラクティブに表示できる状態になる。動作確認はAI補助金・助成金ファインダーで行える。手順 Step 1: WordPressでD3.jsを動的ロードする（CDNタグは使えない） WordPressのコンテンツ内で OK例（動的ロードで解決）: function loadD3(callback) { if (typeof d3 !== "undefined") { // すでにロード済みなら即コールバック callback(); return; } const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"; script.onload = callback; script.onerror = function() { document.getElementById("subsidy-error").style.display = "block"; }; document.head.appendChild(script); } document.addEventListener("DOMContentLoaded", function() { loadD3(initCharts); }); このコードの意味: typeof d3 でロード済みかを確認し、未ロードなら createElement("script") で動的に追加する。onload で描画初期化関数を呼び出す。 Step 2: && 演算子を三項演算子に置き換える WordPressのコンテンツフィルターは && を && にHTMLエンティティ変換する。これはJSの構文エラーになりスクリプト全体が停止する。 NG例（WordPressで壊れる）: const label = isMobile && showLabel ? data.name : "..."; const margin = { left: isMobile && hasYAxis ? 200 : 20 }; OK例（三項演算子またはネストifで代替）: const label = isMobile ? (showLabel ? data.name : "...") : data.name; const leftMargin = isMobile ? 20 : 200; const margin = { left: leftMargin }; つまずきポイント: この変換はWordPressの管理画面から投稿を保存するタイミングで発生する。ローカルHTMLでは問題なく動作するのに、WordPress投稿後だけ動かない——という現象はこれが原因。 Step 3: データ構造を設計する（出典定義を統一する）補助金データは複数の出典から収集する。同一チャートに混入させる場合、データの「定義・スコープ」が一致しているかを確認する。 // 政府AI予算推移データ（内閣府AI戦略会議定義に統一） // ※SIP/BRIDGE等一部施策分は含まない（内閣府AI戦略会議第5回資料に準拠） const budgetTrend = [ { year: 2018, budget: 575.5 }, { year: 2019, budget: 770.4 }, { year: 2020, budget: 1178.4 }, { year: 2021, budget: 1168.3 }, { year: 2022, budget: 1024.9 }, { year: 2023, budget: 1126.7 }, { year: 2024, budget: 1138.4 } ]; // lastVerified: "2026-03-30" // sourceUrl: "https://www8.cao.go.jp/cstp/ai/ai_senryaku/5kai/shisaku.pdf" // 補助額比較データ（各制度公式要領に基づく最大補助額） const subsidyData = [ { name: "省力化投資補助金（一般型）", maxAmount: 10000, rate: "1/2〜2/3" }, { name: "新事業進出補助金", maxAmount: 9000, rate: "1/2〜2/3" }, { name: "ものづくり補助金", maxAmount: 3500, rate: "1/2〜2/3" }, { name: "省力化投資補助金（カタログ型）", maxAmount: 1500, rate: "1/2" }, { name: "事業承継・M&A補助金", maxAmount: 800, rate: "1/2〜2/3" }, { name: "デジタル化・AI導入補助金", maxAmount: 450, rate: "1/2〜4/5" }, { name: "小規模事業者持続化補助金", maxAmount: 200, rate: "2/3〜3/4" } ]; ポイント: 経産省の「AI・半導体関連予算1兆2,390億円」（2026年度）は定義が内閣府とは異なる広い範囲を含むため、上記の時系列に混入させない。別の参考値として注記付きで表示する。 Step 4: 横棒チャートを描画する（対数スケール対応）補助額の最大値（1億円）と最小値（200万円）の比率が50倍になるため、線形スケールでは小さいバーが潰れる。対数スケールを使う。 function drawSubsidyChart(data) { const isMobile = window.innerWidth <= 767; const margin = { top: 20, right: 80, bottom: 50, left: isMobile ? 15 : 220 }; const width = document.getElementById("subsidy-chart").clientWidth; const height = 320; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; const svg = d3.select("#subsidy-chart") .append("svg") .attr("width", width) .attr("height", height); const g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 対数スケール（最小値を少し下げてバーが0から始まるように見せる） const xScale = d3.scaleLog() .domain([100, 12000]) // 100万円〜12,000万円 .range([0, innerWidth]); const yScale = d3.scaleBand() .domain(data.map(d => d.name)) .range([0, innerHeight]) .padding(0.25); // バーを描画 g.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", 0) .attr("y", d => yScale(d.name)) .attr("width", d => xScale(d.maxAmount)) .attr("height", yScale.bandwidth()); // PCのみY軸ラベルを表示 if (!isMobile) { g.selectAll(".y-label") .data(data) .enter() .append("text") .attr("class", "y-label") .attr("x", -8) .attr("y", d => yScale(d.name) + yScale.bandwidth() / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .text(d => d.name); } } Step 5: スマホ対応のタッチイベント（下部固定パネル）スマホではY軸ラベルを非表示にし、バーをタップしたときに画面下部固定パネルで詳細を表示する。 // 下部パネルのHTML（ツールのHTMLに事前配置） // function showMobilePanel(name, amount, rate) { document.getElementById("panel-content").innerHTML = "" + name + "
" + "最大補助額: " + amount + "
" + "補助率: " + rate; document.getElementById("mobile-panel").style.display = "block"; } // バーへのタッチイベント登録 bars.on("touchstart", function(event, d) { event.preventDefault(); event.stopPropagation(); // ← 省略するとパネルが開いて即閉じる showMobilePanel(d.name, d.maxAmount + "万円", d.rate); }); // パネル外タップで閉じる document.addEventListener("touchstart", function(event) { const panel = document.getElementById("mobile-panel"); if (panel.style.display === "block") { panel.style.display = "none"; } }); document.getElementById("panel-close").addEventListener("click", function() { document.getElementById("mobile-panel").style.display = "none"; }); つまずきポイント: e.stopPropagation() を省略すると「パネルが表示された直後に閉じる」現象が起きる。バーのタッチイベントが document まで伝播し、「パネル外タップ」と誤判定されるためだ。必ずセットで書く。 Step 6: wp:htmlラッパーで全体をまとめる（DOCTYPE禁止） WordPressへの貼り付けはブロックで全体を囲む。やタグから始まるフルHTML構造は使わない（wpautopフィルターがscript内に

タグを挿入してJSを破壊する）。

つまずきポイント: body {} や h1 {} 等のグローバルCSSセレクタを使うとSWELLテーマ全体のスタイルが壊れる。全セレクタを .aji-subsidy-finder-wrap で囲む必要がある。つまずきポイントまとめ D3が動かない（WordPress）:

没有找到文章

📬 Get AI News Delivered

按类别浏览

热门话题

📬 Get AI News Delivered

按类别浏览

热门话题