【GIGA端末対応】コピペで5秒！自然言語処理(NLP)とネットリテラシーを同時に学ぶ「対話型HTMLシミュレーター」無料公開【授業・家庭用】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIGA 対応: メディアリテラシー&問いの学習シミュレーター(NLP 版)</title>
<style>
:root {
 --bg-color: #f8f9fa ;
 --card-bg: #ffffff ;
 --text-color: #212529 ;
 --accent-color: #0d6efd ;
 --border-color: #dee2e6 ;
 --success-color: #198754 ;
 --alert-color: #dc3545 ;
}
body {
 font-family: 'Helvetica Neue', Arial, sans-serif;
 background-color: var(--bg-color);
 color: var(--text-color);
 margin: 0;
 padding: 20px;
 display: flex;
 flex-direction: column;
 align-items: center;
 line-height: 1.6;
}
.container { max-width: 800px; width: 100%; }
header {
 text-align: center;
 margin-bottom: 30px;
 border-bottom: 2px solid var(--border-color);
 padding-bottom: 20px;
}
h1 { color: var(--accent-color); margin-bottom: 5px; font-size: 1.8rem; }
.subtitle { font-size: 0.9rem; color: #6c757d ; }
.card {
 background-color: var(--card-bg);
 border: 1px solid var(--border-color);
 border-radius: 8px;
 padding: 20px;
 margin-bottom: 20px;
 box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.media-box {
 background: #fff3cd ;
 padding: 15px;
 border-radius: 6px;
 margin-bottom: 15px;
 border-left: 5px solid #ffc107 ;
 font-size: 0.95rem;
}
label { display: block; margin-bottom: 8px; font-weight: bold; }
textarea {
 width: 100%; height: 90px; background-color: #fff ;
 border: 1px solid var(--border-color); color: var(--text-color);
 border-radius: 6px; padding: 10px; box-sizing: border-box;
 resize: none; margin-bottom: 15px; font-size: 0.95rem;
}
button {
 background-color: var(--accent-color); color: white; border: none;
 padding: 12px 24px; border-radius: 6px; cursor: pointer;
 font-weight: bold; font-size: 0.95rem;
}
button:hover { opacity: 0.9; }
.timeline { margin-top: 30px; }
.post { border-bottom: 1px solid var(--border-color); padding: 20px 0; }
.post:last-child { border-bottom: none; }
.badge {
 background-color: #e9ecef ; color: var(--accent-color);
 padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold;
}
.status-msg { 
 color: #6c757d ; font-size: 0.8rem; margin-top: 8px; 
 display: flex; gap: 15px; align-items: center;
}
.vote-btn {
 background-color: #e2e3e5 ; color: #383d41 ; padding: 4px 12px;
 border-radius: 4px; font-size: 0.8rem; cursor: pointer;
 border: none; font-weight: normal;
}
.vote-btn:hover { background-color: #d6d8db ; }
.sponsor-alert {
 background-color: #d1e7dd ; border: 1px solid #badbcc ; color: #0f5132 ;
 padding: 15px; border-radius: 6px; margin-top: 15px;
 display: none; font-size: 0.9rem;
}
.nlp-label {
 display: inline-block;
 background-color: #fff3cd ;
 color: #856404 ;
 font-size: 0.75rem;
 padding: 2px 6px;
 border-radius: 4px;
 margin-left: 10px;
 border: 1px solid #ffeeba ;
}
</style>
</head>
<body>
<div class="container">
 <header>
 <h1>対話型・「問い」のパブリッシュシミュレーター</h1>
 <div class="subtitle">【プログラミング×リテラシー教育用】 NLP(自然言語処理)搭載版</div>
 </header>

 <!-- クエストカード -->
 <div class="card">
 <h3 style="margin-top:0;">今週のワークショップお題 (事例検証)</h3>
 <div class="media-box">
 <strong>【事例 (テレビやネットの慣習)】 </strong><br>
 「ある人気コンテンツで、出演者の失敗や外見を激しく笑いものにする『いじり演出』
が大バズりしています。周囲の大人は『昔からの定番だから』 『視聴率が取れるから』と
現状維持を続けていますが、一部からハラスメントではないかと疑問の声が上がっていま
す。」
 </div>
 
 <label for="rawInput">この事例に対する、あなたの「生の違和感や疑問(肉声)」を入力してください: </label>
 <textarea id="rawInput" placeholder="例: いじめみたいで見てて嫌。なんで昔のルールをそのまま続けて大人は怒らないの?"></textarea>
 <button onclick="publishQuest()">意図を解析して「問い」に変換 (Publish)</button>
 
 <div id="sponsorBox" class="sponsor-alert">
 <strong>【システム通知】 クリーン企業 (ESG 投資家) からメッセージ受信:</strong><br>
 「あなたの洗練された『問い』は、組織のコンプライアンスリスクを的確に捉えています。当社のブランド倫理基準に合致するため、あなたの探究活動 (トークン) をサポートします。」
 </div>
 </div>
 
 <!-- タイムライン -->
 <div class="card timeline">
 <h3 style="margin-top:0;">検閲・削除のない分散型タイムライン(シミュレーション)</h3>
 <div id="timelineContainer">
 <!-- 投稿がここに追加されます -->
 </div>
 </div>
</div>

<script>
// ==========================================
// 1. 簡易 NLP エンジン (意図解析と翻訳アルゴリズム)
// ==========================================
function analyzeAndTranslate(rawText) {
 const categories = [
 {
 id: "ethics",
 name: "人権・ダイバーシティ視点",
 keywords: ["いじめ", "嫌", "かわいそう", "ひどい", "傷", "悲しい", "不快", "ハラスメント", "倫理", "モラル", "最低", "むかつく"],
 template: `「${rawText}」という声は、立場の弱い者を犠牲にするエンターテインメント構造への正当な異議申し立てである。これを「昔からの定番」として看過することは、多様性（ダイバーシティ）や人権を重んじる現代市場において、ブランド価値の致命的な低下に直結する。構造的なハラスメントを許容しないシステムを直ちに構築する必要がある。`
 },
 {
 id: "structure",
 name: "ガバナンス・現状維持バイアス視点",
 keywords: ["大人", "昔から", "ルール", "怒らない", "おかしい", "なんで", "みんな", "当たり前", "常識", "そのまま", "ずるい", "圧力"],
 template: `「${rawText}」という違和感の本質は、既存の慣習が「他者への敬意」という社会的資本を毀損しているにも関わらず見過ごされている構造にある。前例踏襲の「現状維持バイアス」に陥るのではなく、このやり方が未来の組織の信頼性（ガバナンス）にどのような長期的リスクを与えるかを、フラットな軸から客観的に検証すべきではないか。`
 },
 {
 id: "economy",
 name: "経済エコシステム・ESG 視点",
 keywords: ["視聴率", "お金", "バズ", "人気", "数字", "ビジネス", "儲か", "利益", "売上", "テレビ", "ネット", "再生数"],
 template: `「${rawText}」という純粋な疑問は、メディア産業のエコシステム自体が抱える倫理적負債を突いている。視聴率（アテンション）という単一の KPI に依存し個人の尊厳をコストにするのではなく、持続可能な（サステナブルな）制作プロセスへと KPI を再定義し、心理的安全性に配慮した新しい評価マトリクスを設計する時期に来ている。`
 }
 ];
 let maxScore = 0;
 let bestCategory = categories[1]; 
 categories.forEach(category => {
 let score = 0;
 category.keywords.forEach(keyword => {
 const regex = new RegExp(keyword, 'gi');
 const matches = rawText.match(regex);
 if (matches) {
 score += matches.length;
 }
 });
 if (score > maxScore) {
 maxScore = score;
 bestCategory = category;
 }
 });
 return {
 translatedText: bestCategory.template,
 categoryName: bestCategory.name,
 score: maxScore
 };
}

// ==========================================
// 2. メイン処理 (UI との連携)
// ==========================================
function publishQuest() {
 const rawText = document.getElementById('rawInput').value.trim();
 
 if (!rawText) {
 alert('まずはあなたの生の疑問・違和感を入力してください!');
 return;
 }
 const nlpResult = analyzeAndTranslate(rawText);
 const container = document.getElementById('timelineContainer');
 const newPost = document.createElement('div');
 newPost.className = 'post';
 const randomId = Math.floor(1000 + Math.random() * 9000);
 
 newPost.innerHTML = `
 <span class="badge">匿名アバター #${randomId}</span>
 <span class="nlp-label">NLP 判定: ${nlpResult.categoryName}</span>
 <p style="margin: 10px 0 5px 0;"><strong>[ ア サ ー テ ィ ブ 翻 訳 済 ]</strong> ${nlpResult.translatedText}</p>
 <div class="status-msg">
 <span>分散記録済(前例による削除不可) </span>
 <button class="vote-btn" onclick="addVote(this)"> エ シ カ ル 投 票 (<span class="vc">1</span>)</button>
 <span style="color:var(--success-color);">+<span class="pt-value">10</span>pt</span>
 </div>
 `;
 
 container.insertBefore(newPost, container.firstChild);
 document.getElementById('rawInput').value = '';

 setTimeout(() => {
 document.getElementById('sponsorBox').style.display = 'block';
 }, 1200);
 
 console.log(`[System] 入力 : "${rawText}" -> スコア : ${nlpResult.score} -> 判定 : ${nlpResult.categoryName}`);
}

function addVote(btn) {
 const countSpan = btn.querySelector('.vc');
 let currentCount = parseInt(countSpan.textContent);
 countSpan.textContent = currentCount + 1;
 
 const ptSpan = btn.nextElementSibling.querySelector('.pt-value');
 let currentPt = parseInt(ptSpan.textContent);
 ptSpan.textContent = currentPt + 10;
}
</script>
</body>
</html>