https://www.dropbox.com/scl/fi/lfhdc2sntzjomttue83ri/2D-ActionRPG.zip
投稿者: chosuke
趣味はゲームやアニメや漫画などです
クローラー型検索エンジン
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Crawlio Search</title>
<style>
:root {
color-scheme: light;
--text: #202124;
--muted: #5f6368;
--line: #dadce0;
--blue: #4285f4;
--red: #ea4335;
--yellow: #fbbc04;
--green: #34a853;
--shadow: 0 18px 40px rgba(60, 64, 67, 0.15);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
background:
radial-gradient(circle at top left, rgba(66, 133, 244, 0.12), transparent 32rem),
linear-gradient(180deg, #fff 0%, #f7f9fc 68%, #eef3fa 100%);
}
a {
color: inherit;
text-decoration: none;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding: 0 28px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 7px;
color: #3c4043;
font-size: 15px;
font-weight: 700;
}
.brand-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.nav {
display: flex;
gap: 22px;
color: #3c4043;
font-size: 14px;
}
.nav a:hover {
text-decoration: underline;
}
main {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}
.search-shell {
position: relative;
display: grid;
place-items: center;
min-height: 430px;
padding: 38px 0 46px;
overflow: hidden;
}
.crawler-visual {
position: absolute;
inset: 12px 0 auto;
height: 320px;
pointer-events: none;
opacity: 0.92;
}
.orbit {
position: absolute;
left: 50%;
top: 50%;
border: 1px solid rgba(95, 99, 104, 0.18);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.orbit-a {
width: min(640px, 86vw);
height: 210px;
}
.orbit-b {
width: min(440px, 68vw);
height: 145px;
transform: translate(-50%, -50%) rotate(-12deg);
}
.node {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: 0 0 0 8px rgba(66, 133, 244, 0.08);
}
.node-a {
left: calc(50% - 302px);
top: 120px;
background: var(--blue);
}
.node-b {
left: calc(50% + 250px);
top: 88px;
background: var(--green);
}
.node-c {
left: calc(50% + 72px);
top: 216px;
background: var(--red);
}
.scan-line {
position: absolute;
left: 50%;
top: 64px;
width: 3px;
height: 220px;
background: linear-gradient(180deg, transparent, rgba(66, 133, 244, 0.72), transparent);
animation: scan 3.4s ease-in-out infinite;
}
.wordmark {
position: relative;
z-index: 1;
margin: 52px 0 25px;
font-size: clamp(68px, 12vw, 112px);
font-weight: 700;
line-height: 0.95;
}
.blue { color: var(--blue); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.green { color: var(--green); }
.search-form {
position: relative;
z-index: 1;
width: min(640px, 100%);
}
.search-box {
display: grid;
grid-template-columns: 24px 1fr 42px;
align-items: center;
min-height: 58px;
padding: 0 8px 0 21px;
background: #fff;
border: 1px solid var(--line);
border-radius: 32px;
box-shadow: 0 2px 8px rgba(60, 64, 67, 0.08);
transition: box-shadow 160ms ease, border-color 160ms ease;
}
.search-box:focus-within,
.search-box:hover {
border-color: transparent;
box-shadow: var(--shadow);
}
.search-box svg,
.icon-button svg {
width: 22px;
height: 22px;
fill: #5f6368;
}
input {
width: 100%;
border: 0;
outline: 0;
padding: 0 14px;
color: var(--text);
font-size: 17px;
background: transparent;
}
.icon-button {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.icon-button:hover {
background: #f1f3f4;
}
.actions {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 24px;
}
.actions button {
min-width: 112px;
min-height: 38px;
border: 1px solid #f8f9fa;
border-radius: 4px;
padding: 0 18px;
color: #3c4043;
background: #f8f9fa;
font-size: 14px;
cursor: pointer;
}
.actions button:hover {
border-color: #dadce0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.results-area {
display: none;
max-width: 760px;
margin: 0 auto 46px;
}
.results-area.visible {
display: block;
}
.result-meta {
margin-bottom: 18px;
color: var(--muted);
font-size: 14px;
}
.result {
padding: 18px 0;
border-top: 1px solid #edf0f2;
}
.result-url {
color: #3c4043;
font-size: 13px;
}
.result h3 {
margin: 4px 0 6px;
color: #1a0dab;
font-size: 21px;
font-weight: 400;
}
.result p {
margin: 0;
color: #4d5156;
font-size: 14px;
line-height: 1.55;
}
.crawler-panel {
margin: 12px 0 28px;
padding: 24px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(218, 220, 224, 0.9);
border-radius: 8px;
box-shadow: 0 12px 32px rgba(60, 64, 67, 0.08);
backdrop-filter: blur(10px);
}
.panel-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.eyebrow {
margin: 0 0 4px;
color: var(--blue);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
h2 {
margin: 0;
font-size: 24px;
}
.pulse {
display: inline-flex;
align-items: center;
gap: 8px;
color: #137333;
font-size: 12px;
font-weight: 700;
}
.pulse::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 8px rgba(52, 168, 83, 0.12);
}
.crawl-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.crawl-card {
min-height: 122px;
padding: 16px;
border: 1px solid #e6eaee;
border-radius: 8px;
background: #fff;
}
.crawl-card strong {
display: block;
margin-bottom: 8px;
font-size: 15px;
}
.crawl-card span {
display: block;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.crawl-progress {
height: 5px;
margin-top: 14px;
overflow: hidden;
border-radius: 999px;
background: #edf0f2;
}
.crawl-progress i {
display: block;
height: 100%;
width: var(--progress);
border-radius: inherit;
background: linear-gradient(90deg, var(--blue), var(--green));
}
.stats-band {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
margin-bottom: 44px;
border: 1px solid #dfe4ea;
border-radius: 8px;
background: #dfe4ea;
}
.stats-band div {
padding: 22px;
background: #fff;
}
.stats-band strong,
.stats-band span {
display: block;
}
.stats-band strong {
margin-bottom: 5px;
font-size: 27px;
}
.stats-band span {
color: var(--muted);
font-size: 13px;
}
footer {
display: flex;
flex-wrap: wrap;
gap: 22px;
padding: 18px 28px;
color: #70757a;
background: #f2f2f2;
font-size: 14px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes scan {
0%, 100% {
transform: translateX(-260px);
opacity: 0.35;
}
50% {
transform: translateX(260px);
opacity: 1;
}
}
@media (max-width: 760px) {
.topbar {
padding: 0 16px;
}
.nav {
gap: 12px;
font-size: 13px;
}
.search-shell {
min-height: 390px;
}
.crawler-visual {
height: 270px;
}
.node-a {
left: 6%;
}
.node-b {
left: 86%;
}
.node-c {
left: 58%;
}
.actions {
flex-wrap: wrap;
}
.crawl-grid,
.stats-band {
grid-template-columns: 1fr;
}
.panel-heading {
align-items: start;
flex-direction: column;
}
}
</style>
</head>
<body>
<header class="topbar">
<a class="brand" href="#" aria-label="Crawlio Search">
<span class="brand-dot blue"></span>
<span class="brand-dot red"></span>
<span class="brand-dot yellow"></span>
<span class="brand-dot green"></span>
<span>Crawlio</span>
</a>
<nav class="nav" aria-label="メイン">
<a href="#crawler">Crawler</a>
<a href="#index">Index</a>
<a href="#status">Status</a>
</nav>
</header>
<main>
<section class="search-shell" aria-labelledby="hero-title">
<div class="crawler-visual" aria-hidden="true">
<div class="orbit orbit-a"></div>
<div class="orbit orbit-b"></div>
<div class="node node-a"></div>
<div class="node node-b"></div>
<div class="node node-c"></div>
<div class="scan-line"></div>
</div>
<h1 id="hero-title" class="wordmark">
<span class="blue">C</span><span class="red">r</span><span class="yellow">a</span><span class="blue">w</span><span class="green">l</span><span class="red">i</span><span class="blue">o</span>
</h1>
<form class="search-form" id="searchForm">
<label class="sr-only" for="query">検索キーワード</label>
<div class="search-box">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M10.8 18a7.2 7.2 0 1 1 5.1-12.3 7.2 7.2 0 0 1-5.1 12.3Zm0-2a5.2 5.2 0 1 0 0-10.4 5.2 5.2 0 0 0 0 10.4Zm6.3.1 4 4-1.4 1.4-4-4 1.4-1.4Z" />
</svg>
<input id="query" name="query" autocomplete="off" placeholder="URL、キーワード、サイト名を検索" />
<button class="icon-button" type="button" id="voiceButton" aria-label="音声検索">
<svg aria-hidden="true" viewBox="0 0 24 24">
<path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V21h2v-3.1a7 7 0 0 0 6-6.9h-2Z" />
</svg>
</button>
</div>
<div class="actions">
<button type="submit">検索</button>
<button type="button" id="crawlButton">クローラーを走らせる</button>
</div>
</form>
</section>
<section class="results-area" aria-live="polite">
<div class="result-meta" id="resultMeta">約 8,420,000 件中 0.38 秒</div>
<div class="results" id="results"></div>
</section>
<section class="crawler-panel" id="crawler" aria-labelledby="crawler-title">
<div class="panel-heading">
<div>
<p class="eyebrow">Live Crawl</p>
<h2 id="crawler-title">巡回中のページ</h2>
</div>
<span class="pulse">ONLINE</span>
</div>
<div class="crawl-grid" id="crawlGrid"></div>
</section>
<section class="stats-band" id="index" aria-label="インデックス統計">
<div>
<strong>12.8B</strong>
<span>Indexed pages</span>
</div>
<div>
<strong>94ms</strong>
<span>Median lookup</span>
</div>
<div>
<strong>37K/s</strong>
<span>Crawl rate</span>
</div>
<div>
<strong>99.98%</strong>
<span>Freshness</span>
</div>
</section>
</main>
<footer id="status">
<span>Japan</span>
<span>Privacy</span>
<span>Terms</span>
<span>Search Console</span>
</footer>
<script>
const results = [
{
title: "Crawlio Search Console - サイトのクロール状況",
url: "https://crawlio.example/search-console",
text: "サイトマップ、robots.txt、インデックス登録、検索パフォーマンスをまとめて確認できます。"
},
{
title: "高速インデックスの仕組み",
url: "https://crawlio.example/docs/indexing",
text: "分散クローラーがページを発見し、内容を解析して、新しい検索結果へ反映します。"
},
{
title: "ニュース、画像、動画を横断検索",
url: "https://crawlio.example/discover",
text: "キーワードに関連するページ、メディア、トレンドをひとつの検索画面で素早く探せます。"
},
{
title: "Web Crawler Health Report",
url: "https://status.crawlio.example/crawler",
text: "現在のクロール速度、エラー率、再訪問キュー、インデックス鮮度のライブ統計です。"
}
];
const crawlItems = [
["news.metro.jp/today", "HTML parsed / 32 links discovered", 78],
["shop.example.com/products", "Sitemap queued / canonical found", 64],
["docs.dev.local/api", "Robots allowed / snippets updated", 91],
["media.example.net/video", "Metadata extracted / thumbnail indexed", 56],
["blog.studio.jp/launch", "Fresh content detected / rank signals ready", 84],
["archive.city.jp/events", "Recrawl scheduled / duplicate checked", 43]
];
const form = document.querySelector("#searchForm");
const queryInput = document.querySelector("#query");
const resultsArea = document.querySelector(".results-area");
const resultMeta = document.querySelector("#resultMeta");
const resultList = document.querySelector("#results");
const crawlGrid = document.querySelector("#crawlGrid");
const crawlButton = document.querySelector("#crawlButton");
const voiceButton = document.querySelector("#voiceButton");
function renderResults(query = "クローラー") {
const filtered = results.map((item) => ({
...item,
title: query ? `${item.title} | ${query}` : item.title
}));
resultMeta.textContent = `約 ${(8420000 + query.length * 17321).toLocaleString("ja-JP")} 件中 ${(0.21 + Math.random() * 0.28).toFixed(2)} 秒`;
resultList.innerHTML = filtered
.map(
(item) => `
<article class="result">
<div class="result-url">${item.url}</div>
<h3>${item.title}</h3>
<p>${item.text}</p>
</article>
`
)
.join("");
resultsArea.classList.add("visible");
}
function renderCrawlGrid(offset = 0) {
crawlGrid.innerHTML = crawlItems
.map(([url, status, progress], index) => {
const shifted = Math.min(99, Math.max(24, progress + ((offset + index * 7) % 18) - 7));
return `
<article class="crawl-card">
<strong>${url}</strong>
<span>${status}</span>
<div class="crawl-progress" aria-label="クロール進捗 ${shifted}%">
<i style="--progress: ${shifted}%"></i>
</div>
</article>
`;
})
.join("");
}
form.addEventListener("submit", (event) => {
event.preventDefault();
renderResults(queryInput.value.trim() || "クローラー");
});
crawlButton.addEventListener("click", () => {
renderCrawlGrid(Math.floor(Math.random() * 20));
renderResults(queryInput.value.trim() || "live crawl");
document.querySelector("#crawler").scrollIntoView({ behavior: "smooth", block: "start" });
});
voiceButton.addEventListener("click", () => {
queryInput.value = "最新のインデックス状況";
queryInput.focus();
});
renderCrawlGrid();
</script>
</body>
</html>
ネタ神AI Pro – アイデアメーカー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ネタ神AI Pro - アイデアメーカー</title>
<style>
:root {
--bg: #070914;
--bg2: #111831;
--card: rgba(255, 255, 255, 0.08);
--card2: rgba(255, 255, 255, 0.13);
--text: #f5f7ff;
--muted: #aeb8df;
--line: rgba(255, 255, 255, 0.16);
--primary: #7c5cff;
--cyan: #00d4ff;
--green: #38ffad;
--yellow: #ffd35c;
--red: #ff5c7c;
--shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
--radius: 22px;
}
body.light {
--bg: #eef2ff;
--bg2: #ffffff;
--card: rgba(255, 255, 255, 0.8);
--card2: rgba(255, 255, 255, 0.95);
--text: #151829;
--muted: #566179;
--line: rgba(20, 30, 60, 0.14);
--shadow: 0 18px 45px rgba(40, 60, 110, 0.16);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
color: var(--text);
background:
radial-gradient(circle at 20% 10%, rgba(124, 92, 255, 0.32), transparent 28%),
radial-gradient(circle at 90% 20%, rgba(0, 212, 255, 0.24), transparent 28%),
radial-gradient(circle at 50% 100%, rgba(255, 92, 124, 0.15), transparent 32%),
linear-gradient(135deg, var(--bg), var(--bg2));
transition: 0.25s;
}
button,
input,
select,
textarea {
font-family: inherit;
}
button {
border: 1px solid var(--line);
border-radius: 14px;
background: var(--card2);
color: var(--text);
padding: 11px 14px;
font-weight: 800;
cursor: pointer;
transition: 0.2s;
backdrop-filter: blur(12px);
}
button:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
.btn-main {
border: none;
background: linear-gradient(135deg, var(--primary), var(--cyan));
color: white;
box-shadow: 0 16px 35px rgba(0, 212, 255, 0.2);
}
.btn-green {
border: none;
background: linear-gradient(135deg, #13bf84, var(--green));
color: #06120d;
}
.btn-red {
border-color: rgba(255, 92, 124, 0.4);
background: rgba(255, 92, 124, 0.14);
}
.app {
width: min(1380px, 94%);
margin: 0 auto;
padding: 28px 0 70px;
}
header {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: center;
margin-bottom: 22px;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
}
.logo {
width: 58px;
height: 58px;
border-radius: 20px;
background: linear-gradient(135deg, var(--primary), var(--cyan));
display: grid;
place-items: center;
font-size: 30px;
box-shadow: 0 20px 45px rgba(124, 92, 255, 0.35);
}
h1, h2, h3, h4, p {
margin-top: 0;
}
.brand h1 {
margin: 0;
font-size: clamp(27px, 4vw, 46px);
letter-spacing: 0.03em;
}
.brand p {
margin: 4px 0 0;
color: var(--muted);
font-size: 14px;
}
.header-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.hero {
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
padding: 26px;
margin-bottom: 22px;
overflow: hidden;
position: relative;
}
.hero::after {
content: "";
position: absolute;
width: 320px;
height: 320px;
right: -120px;
bottom: -160px;
border-radius: 50%;
background: rgba(0, 212, 255, 0.13);
filter: blur(8px);
}
.hero h2 {
font-size: clamp(24px, 3vw, 40px);
margin-bottom: 10px;
line-height: 1.35;
}
.hero p {
color: var(--muted);
line-height: 1.8;
max-width: 900px;
margin-bottom: 0;
}
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 22px;
}
.stat {
border: 1px solid var(--line);
background: var(--card);
border-radius: 18px;
padding: 16px;
box-shadow: var(--shadow);
}
.stat strong {
display: block;
font-size: 24px;
margin-bottom: 3px;
}
.stat span {
color: var(--muted);
font-size: 13px;
}
.layout {
display: grid;
grid-template-columns: 420px 1fr;
gap: 22px;
align-items: start;
}
.panel {
border: 1px solid var(--line);
background: var(--card);
border-radius: var(--radius);
box-shadow: var(--shadow);
backdrop-filter: blur(16px);
overflow: hidden;
}
.panel-header {
padding: 18px 20px;
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.panel-header h3 {
margin: 0;
font-size: 19px;
}
.panel-body {
padding: 20px;
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: linear-gradient(135deg, var(--green), var(--cyan));
color: #06121c;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
}
.form-group {
margin-bottom: 16px;
}
label {
display: block;
color: var(--muted);
font-size: 13px;
font-weight: 800;
margin-bottom: 8px;
}
input,
select,
textarea {
width: 100%;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.22);
color: var(--text);
border-radius: 14px;
padding: 12px 13px;
outline: none;
font-size: 15px;
transition: 0.2s;
}
body.light input,
body.light select,
body.light textarea {
background: rgba(255, 255, 255, 0.85);
}
select option {
background: #10162a;
color: white;
}
input:focus,
select:focus,
textarea:focus {
border-color: rgba(0, 212, 255, 0.85);
box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12);
}
textarea {
min-height: 105px;
resize: vertical;
line-height: 1.7;
}
.two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.chip {
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.08);
color: var(--muted);
border-radius: 999px;
padding: 8px 10px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
transition: 0.2s;
}
.chip:hover {
color: var(--text);
border-color: rgba(0, 212, 255, 0.7);
transform: translateY(-1px);
}
.button-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 16px;
}
.button-grid .wide-btn {
grid-column: 1 / -1;
}
.result-tools {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.empty {
text-align: center;
padding: 70px 24px;
color: var(--muted);
}
.empty .icon {
font-size: 64px;
margin-bottom: 12px;
}
.idea-list {
display: grid;
gap: 16px;
}
.idea-card {
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.18);
border-radius: 20px;
overflow: hidden;
}
body.light .idea-card {
background: rgba(255, 255, 255, 0.78);
}
.idea-top {
padding: 20px;
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: 1fr auto;
gap: 15px;
align-items: start;
}
.idea-title {
margin: 0;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.25;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.pill {
font-size: 12px;
font-weight: 900;
padding: 6px 9px;
border-radius: 999px;
border: 1px solid var(--line);
color: var(--muted);
background: rgba(255,255,255,0.07);
}
.score-box {
width: 96px;
text-align: center;
padding: 12px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(124, 92, 255, 0.35), rgba(0, 212, 255, 0.24));
border: 1px solid var(--line);
}
.score-box strong {
display: block;
font-size: 26px;
}
.score-box span {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.catch {
padding: 16px 20px;
font-size: 17px;
line-height: 1.7;
background: rgba(255, 255, 255, 0.07);
border-bottom: 1px solid var(--line);
}
.idea-body {
padding: 20px;
}
.sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.section {
border: 1px solid var(--line);
border-radius: 17px;
padding: 16px;
background: rgba(0, 0, 0, 0.18);
}
body.light .section {
background: rgba(255, 255, 255, 0.62);
}
.section.wide {
grid-column: 1 / -1;
}
.section h4 {
margin: 0 0 10px;
font-size: 15px;
}
.section p,
.section li {
color: var(--muted);
line-height: 1.75;
font-size: 14px;
}
.section p {
margin-bottom: 0;
}
.section ul,
.section ol {
margin: 0;
padding-left: 22px;
}
.idea-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 20px 20px;
}
.history-controls {
display: grid;
grid-template-columns: 1fr 180px;
gap: 10px;
margin-bottom: 14px;
}
.history-list {
display: grid;
gap: 10px;
}
.history-item {
border: 1px solid var(--line);
border-radius: 16px;
padding: 13px;
cursor: pointer;
background: rgba(0, 0, 0, 0.15);
transition: 0.2s;
}
body.light .history-item {
background: rgba(255, 255, 255, 0.7);
}
.history-item:hover {
transform: translateY(-2px);
border-color: rgba(0, 212, 255, 0.6);
}
.history-item strong {
display: block;
margin-bottom: 5px;
}
.history-item small {
color: var(--muted);
}
.toast {
position: fixed;
right: 20px;
bottom: 20px;
background: rgba(10, 15, 30, 0.94);
color: white;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 16px;
padding: 14px 18px;
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: 0.25s;
z-index: 100;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.footer {
margin-top: 28px;
text-align: center;
color: var(--muted);
font-size: 13px;
}
@media (max-width: 1050px) {
header {
flex-direction: column;
align-items: flex-start;
}
.layout {
grid-template-columns: 1fr;
}
.stats {
grid-template-columns: repeat(2, 1fr);
}
.sections {
grid-template-columns: 1fr;
}
.idea-top {
grid-template-columns: 1fr;
}
.score-box {
width: 100%;
}
}
@media (max-width: 620px) {
.two,
.button-grid,
.history-controls,
.stats {
grid-template-columns: 1fr;
}
.header-actions {
width: 100%;
}
.header-actions button {
flex: 1;
}
}
</style>
</head>
<body>
<div class="app">
<header>
<div class="brand">
<div class="logo">💡</div>
<div>
<h1>ネタ神AI Pro</h1>
<p>API不要。ブラウザだけで動く創作・Webサービス企画メーカー</p>
</div>
</div>
<div class="header-actions">
<button onclick="toggleTheme()">テーマ切替</button>
<button onclick="downloadText()">TXT出力</button>
<button onclick="downloadJSON()">JSON出力</button>
<button class="btn-red" onclick="clearAll()">全削除</button>
</div>
</header>
<section class="hero">
<h2>APIなしでも、かなり使える「企画書生成ツール」にする。</h2>
<p>
外部AIに接続せず、ローカルのテンプレート・ランダム生成・条件分岐だけで、Webサービス、AIツール、ゲーム、小説、SNSなどの企画案を作ります。
API料金もキー管理も不要です。まず作品として公開しやすい形です。
</p>
</section>
<section class="stats">
<div class="stat">
<strong id="statIdeas">0</strong>
<span>今回生成した案</span>
</div>
<div class="stat">
<strong id="statSaved">0</strong>
<span>保存済みアイデア</span>
</div>
<div class="stat">
<strong>0円</strong>
<span>API利用料</span>
</div>
<div class="stat">
<strong>100%</strong>
<span>ローカル動作</span>
</div>
</section>
<main class="layout">
<section class="panel">
<div class="panel-header">
<h3>生成条件</h3>
<span class="badge">NO API</span>
</div>
<div class="panel-body">
<div class="two">
<div class="form-group">
<label for="genre">ジャンル</label>
<select id="genre">
<option>Webサービス</option>
<option>AIツール</option>
<option>ゲーム</option>
<option>小説</option>
<option>SNS</option>
<option>動画サイト</option>
<option>ポートフォリオ</option>
<option>便利ツール</option>
<option>学習サービス</option>
<option>創作支援</option>
</select>
</div>
<div class="form-group">
<label for="mood">雰囲気</label>
<select id="mood">
<option>かっこいい</option>
<option>やさしい</option>
<option>近未来</option>
<option>ファンタジー</option>
<option>シンプル</option>
<option>高級感</option>
<option>かわいい</option>
<option>ダーク</option>
<option>実用的</option>
<option>ゲーム風</option>
</select>
</div>
</div>
<div class="two">
<div class="form-group">
<label for="level">開発難易度</label>
<select id="level">
<option>簡単</option>
<option>普通</option>
<option>本格</option>
<option>超本格</option>
</select>
</div>
<div class="form-group">
<label for="target">ターゲット</label>
<select id="target">
<option>個人クリエイター</option>
<option>学生</option>
<option>社会人</option>
<option>在宅ワーカー</option>
<option>ゲーム制作者</option>
<option>小説家志望</option>
<option>配信者</option>
<option>初心者</option>
<option>副業したい人</option>
</select>
</div>
</div>
<div class="two">
<div class="form-group">
<label for="amount">生成数</label>
<select id="amount">
<option value="1">1個</option>
<option value="3" selected>3個</option>
<option value="5">5個</option>
</select>
</div>
<div class="form-group">
<label for="style">出力スタイル</label>
<select id="style">
<option>企画書風</option>
<option>サービス紹介風</option>
<option>開発メモ風</option>
<option>ピッチ資料風</option>
</select>
</div>
</div>
<div class="form-group">
<label for="keywords">キーワード</label>
<textarea id="keywords" placeholder="例：AI / RPG / SNS / メモ / 仕事 / 創作 / ポートフォリオ"></textarea>
<div class="chips">
<span class="chip" onclick="addKeyword('AI')">AI</span>
<span class="chip" onclick="addKeyword('RPG')">RPG</span>
<span class="chip" onclick="addKeyword('SNS')">SNS</span>
<span class="chip" onclick="addKeyword('小説')">小説</span>
<span class="chip" onclick="addKeyword('仕事')">仕事</span>
<span class="chip" onclick="addKeyword('メモ')">メモ</span>
<span class="chip" onclick="addKeyword('ポートフォリオ')">ポートフォリオ</span>
<span class="chip" onclick="addKeyword('動画')">動画</span>
<span class="chip" onclick="addKeyword('学習')">学習</span>
<span class="chip" onclick="addKeyword('ゲーム開発')">ゲーム開発</span>
</div>
</div>
<div class="form-group">
<label for="problem">解決したい悩み</label>
<textarea id="problem" placeholder="例：何を作ればいいかわからない。作業が続かない。アイデアを整理できない。"></textarea>
</div>
<div class="button-grid">
<button class="btn-main wide-btn" onclick="generateIdeas()">アイデア生成</button>
<button onclick="randomSet()">ランダム条件</button>
<button onclick="makePractical()">現実的にする</button>
<button onclick="makeFantasy()">派手にする</button>
<button onclick="clearForm()">入力クリア</button>
</div>
</div>
</section>
<section class="panel">
<div class="panel-header">
<h3>生成結果</h3>
<div class="result-tools">
<button onclick="copyAll()">コピー</button>
<button class="btn-green" onclick="saveAll()">全部保存</button>
</div>
</div>
<div class="panel-body">
<div id="result">
<div class="empty">
<div class="icon">🧠</div>
<h2>まだアイデアはありません</h2>
<p>左の条件を入れて「アイデア生成」を押してください。</p>
</div>
</div>
</div>
</section>
</main>
<section class="panel" style="margin-top:22px;">
<div class="panel-header">
<h3>保存したアイデア</h3>
<span class="badge" id="savedCount">0件</span>
</div>
<div class="panel-body">
<div class="history-controls">
<input id="historySearch" placeholder="保存アイデアを検索" oninput="renderHistory()" />
<select id="historyGenre" onchange="renderHistory()">
<option value="all">全ジャンル</option>
<option>Webサービス</option>
<option>AIツール</option>
<option>ゲーム</option>
<option>小説</option>
<option>SNS</option>
<option>動画サイト</option>
<option>ポートフォリオ</option>
<option>便利ツール</option>
<option>学習サービス</option>
<option>創作支援</option>
</select>
</div>
<div class="history-list" id="historyList"></div>
</div>
</section>
<div class="footer">
ネタ神AI Pro / APIなしローカル版 / HTML・CSS・JavaScriptのみ
</div>
</div>
<div class="toast" id="toast">完了しました</div>
<script>
const DATA = {
titleHeads: [
"Nova", "Idea", "Neta", "Mira", "Chrono", "Elder", "Prompt", "Vision",
"Craft", "Yume", "Neo", "Astra", "Luna", "Meta", "Spark", "Quest"
],
titleTails: {
"Webサービス": ["Hub", "Works", "Base", "Cloud", "Studio", "Panel", "Link", "Board"],
"AIツール": ["AI", "Brain", "Agent", "Prompt", "Copilot", "Mind", "Assist", "Genius"],
"ゲーム": ["Quest", "Chronicle", "Saga", "Blade", "Dungeon", "Legend", "Arc", "World"],
"小説": ["Novel", "Story", "Tale", "Script", "Lore", "Ink", "Scene", "Dream"],
"SNS": ["Verse", "Circle", "Post", "Talk", "Room", "Link", "Wave", "Nest"],
"動画サイト": ["Tube", "Stream", "Clip", "Vision", "Cast", "Channel", "View", "Media"],
"ポートフォリオ": ["Portfolio", "Gallery", "Works", "Profile", "Card", "Showcase", "Archive", "Page"],
"便利ツール": ["Tool", "Memo", "Desk", "Kit", "Task", "Quick", "Utility", "Simple"],
"学習サービス": ["Learn", "Study", "Lesson", "Skill", "Academy", "Trainer", "Coach", "Note"],
"創作支援": ["Create", "Maker", "Muse", "Seed", "Craft", "Atelier", "Generator", "Factory"]
},
moodDesc: {
"かっこいい": "鋭く洗練された印象で、使うだけで制作意欲が上がる",
"やさしい": "初心者でも迷わない、安心感のある",
"近未来": "AI時代らしい自動化と先進性を感じる",
"ファンタジー": "クエストやギルドのような世界観を活かした",
"シンプル": "余計な機能を削り、すぐ使えることに集中した",
"高級感": "プロ向けツールのように落ち着いた印象の",
"かわいい": "親しみやすく、毎日開きたくなる",
"ダーク": "深い世界観と中二感を活かした",
"実用的": "仕事や制作の効率化に直結する",
"ゲーム風": "レベル、経験値、クエストのような要素を持つ"
},
features: {
"Webサービス": ["ユーザー投稿", "検索", "タグ分類", "お気に入り", "ランキング", "管理画面", "コメント", "カテゴリ管理", "共有リンク", "レスポンシブUI"],
"AIツール": ["文章生成", "テンプレート選択", "プロンプト保存", "履歴管理", "自動分類", "要約", "言い換え", "コピー", "お気に入り", "出力形式変更"],
"ゲーム": ["キャラクター管理", "クエスト", "ステージ選択", "スキル", "装備", "敵図鑑", "ストーリー分岐", "進行度保存", "称号", "実績"],
"小説": ["キャラ設定", "世界観管理", "章立て", "プロット", "セリフ案", "伏線メモ", "用語集", "文体変換", "シーン整理", "年表"],
"SNS": ["タイムライン", "投稿", "いいね", "フォロー", "通知", "プロフィール", "ハッシュタグ", "DM風UI", "おすすめ投稿", "AI投稿提案"],
"動画サイト": ["動画カード", "検索", "カテゴリ", "ランキング", "チャンネル", "視聴履歴", "コメント", "お気に入り", "おすすめ", "タグ"],
"ポートフォリオ": ["作品カード", "リンク管理", "カテゴリ分類", "紹介文生成", "スキル表示", "実績一覧", "検索", "テーマ変更", "外部リンク", "更新履歴"],
"便利ツール": ["メモ", "ToDo", "検索", "タグ", "自動整形", "コピー", "履歴", "エクスポート", "チェックリスト", "通知風表示"],
"学習サービス": ["学習記録", "復習リスト", "クイズ", "用語集", "進捗", "AI風解説", "弱点メモ", "計画作成", "達成バッジ", "問題生成"],
"創作支援": ["アイデア生成", "タイトル案", "キャッチコピー", "キャラ案", "世界観案", "企画書化", "画像プロンプト", "構成案", "メモ保存", "ネタ帳"]
},
monetization: [
"無料版＋Pro版",
"広告表示",
"買い切り版",
"テンプレート販売",
"月額プレミアム",
"法人向けプラン",
"追加保存枠の課金",
"作品公開ページの有料カスタム",
"支援・投げ銭",
"素材パック販売"
],
risks: [
"機能を増やしすぎると完成しにくくなる",
"最初からログインや課金を入れると開発が重くなる",
"ターゲットが広すぎると特徴が薄くなる",
"保存機能の設計を後回しにすると作り直しが出やすい",
"見た目だけ作って実用性が弱いと使われにくい",
"スマホ対応を忘れると使い勝手が落ちる"
],
firstSteps: {
"簡単": ["1画面UIを作る", "入力欄と生成ボタンを作る", "結果表示を作る", "コピー機能を付ける", "ローカル保存を付ける"],
"普通": ["基本UIを作る", "複数パターン生成を作る", "履歴保存を作る", "検索と絞り込みを作る", "テキスト出力を作る"],
"本格": ["MVPを作る", "保存データ構造を決める", "ログインなし版を完成させる", "ユーザー登録版を検討する", "公開ページを整える"],
"超本格": ["小さいMVPを先に作る", "フロントとバックエンドを分ける", "DB設計をする", "課金やログインを後から追加する", "運用コストを確認する"]
}
};
let currentIdeas = [];
let generatedCount = 0;
function $(id) {
return document.getElementById(id);
}
function val(id) {
return $(id).value.trim();
}
function pick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function shuffle(arr) {
return [...arr].sort(() => Math.random() - 0.5);
}
function escapeHTML(str) {
return String(str)
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
function addKeyword(word) {
const box = $("keywords");
if (!box.value.includes(word)) {
box.value = box.value ? box.value + " / " + word : word;
}
}
function randomSet() {
randomSelect("genre");
randomSelect("mood");
randomSelect("level");
randomSelect("target");
randomSelect("style");
const sets = [
"AI / メモ / 作業効率",
"RPG / クエスト / 進捗管理",
"SNS / 投稿 / AI風返信",
"小説 / 世界観 / キャラクター",
"在宅ワーク / 日報 / 整理",
"ポートフォリオ / 作品 / 自動紹介",
"動画 / まとめ / ランキング",
"学習 / 復習 / クイズ",
"ゲーム開発 / アイデア / 仕様書",
"創作 / ネタ帳 / 企画書"
];
const problems = [
"何を作ればいいかわからない",
"作業が続かない",
"アイデアが散らばって整理できない",
"作品紹介文を書くのが難しい",
"学習した内容を忘れやすい",
"毎日の進捗を見える化したい",
"企画を作っても途中で止まりやすい"
];
$("keywords").value = pick(sets);
$("problem").value = pick(problems);
showToast("ランダム条件を入れました");
}
function randomSelect(id) {
const el = $(id);
el.selectedIndex = Math.floor(Math.random() * el.options.length);
}
function makePractical() {
$("mood").value = "実用的";
$("level").value = "簡単";
$("style").value = "開発メモ風";
if (!$("problem").value) {
$("problem").value = "毎日の作業やアイデアを整理して、次にやることを明確にしたい";
}
showToast("現実的な条件に寄せました");
}
function makeFantasy() {
$("mood").value = "ファンタジー";
$("style").value = "サービス紹介風";
if (!$("keywords").value.includes("ギルド")) {
addKeyword("ギルド");
addKeyword("クエスト");
}
showToast("派手な条件に寄せました");
}
function clearForm() {
$("keywords").value = "";
$("problem").value = "";
showToast("入力をクリアしました");
}
function generateIdeas() {
const amount = Number(val("amount"));
currentIdeas = [];
for (let i = 0; i < amount; i++) {
currentIdeas.push(createIdea(i));
}
generatedCount += amount;
$("statIdeas").textContent = generatedCount;
renderIdeas();
showToast(`${amount}個のアイデアを生成しました`);
}
function createIdea(index) {
const genre = val("genre");
const mood = val("mood");
const level = val("level");
const target = val("target");
const style = val("style");
const keywords = val("keywords") || "AI / 創作 / アイデア";
const problem = val("problem") || "アイデアを整理して、作り始めやすくしたい";
const title = makeTitle(genre, keywords, index);
const features = shuffle(DATA.features[genre]).slice(0, 6);
const mvp = features.slice(0, 3);
const money = shuffle(DATA.monetization).slice(0, 3);
const risks = shuffle(DATA.risks).slice(0, 3);
const steps = DATA.firstSteps[level];
const score = calcScore(genre, level);
const keywordMain = splitKeywords(keywords)[0] || "アイデア";
return {
id: Date.now() + Math.random(),
createdAt: new Date().toLocaleString("ja-JP"),
title,
genre,
mood,
level,
target,
style,
keywords,
problem,
score,
catchcopy: makeCatch(target, mood, genre, keywordMain),
overview: makeOverview(genre, mood, target, keywords, problem, style),
unique: makeUnique(genre, mood, keywordMain),
features,
mvp,
money,
risks,
steps,
devTime: makeDevTime(level),
nextAction: makeNextAction(level, genre),
design: makeDesign(mood),
pitch: makePitch(title, target, genre, problem)
};
}
function splitKeywords(text) {
return text.split(/[\/、,\s]+/).map(x => x.trim()).filter(Boolean);
}
function makeTitle(genre, keywords, index) {
const keys = splitKeywords(keywords);
const key = keys[index % Math.max(keys.length, 1)] || "Idea";
const head = pick(DATA.titleHeads);
const tail = pick(DATA.titleTails[genre] || DATA.titleTails["創作支援"]);
const patterns = [
`${head}${tail}`,
`${key}${tail}`,
`${head} ${tail}`,
`${key}メーカー`,
`${key}ギルド`,
`${key}Forge`,
`${head}ノート`,
`${key}ラボ`,
`${head}Factory`,
`${key}クエスト`
];
return pick(patterns);
}
function makeCatch(target, mood, genre, key) {
const desc = DATA.moodDesc[mood];
const patterns = [
`${target}の「作りたい」を形にする、${desc}${genre}。`,
`${key}を起点に、企画・整理・実行まで支える${genre}。`,
`思いつきを企画に変える、${target}向けの${desc}サービス。`,
`迷っている時間を減らし、制作を前に進める${genre}。`
];
return pick(patterns);
}
function makeOverview(genre, mood, target, keywords, problem, style) {
const desc = DATA.moodDesc[mood];
if (style === "ピッチ資料風") {
return `${problem}という悩みを持つ${target}に向けて、${keywords}を軸にした${genre}を提供します。${desc}体験により、ユーザーはアイデア出しから整理、実行までを短時間で進められます。`;
}
if (style === "開発メモ風") {
return `${keywords}をテーマにした${genre}。まずは小さく作る。${target}が抱える「${problem}」を解決するため、生成、保存、検索、コピーの流れを重視する。`;
}
if (style === "サービス紹介風") {
return `この${genre}は、${target}が${keywords}に関するアイデアをすばやく整理できるサービスです。${desc}デザインで、毎日開きたくなる使い心地を目指します。`;
}
return `${keywords}をテーマにした${genre}です。${target}が抱える「${problem}」を解決するため、アイデア出し、情報整理、保存、次の行動提案をまとめて行える企画にします。`;
}
function makeUnique(genre, mood, key) {
return `${key}をただ生成するだけでなく、MVP、開発手順、収益化、注意点まで同時に出せる点が特徴です。${mood}な方向性を明確にすることで、似たような${genre}との差別化もしやすくなります。`;
}
function calcScore(genre, level) {
let score = 82;
if (level === "簡単") score += 10;
if (level === "普通") score += 5;
if (level === "本格") score -= 2;
if (level === "超本格") score -= 9;
if (genre === "便利ツール") score += 4;
if (genre === "AIツール") score += 3;
if (genre === "ゲーム") score -= 4;
if (genre === "SNS") score -= 3;
score += Math.floor(Math.random() * 9) - 4;
return Math.max(55, Math.min(98, score));
}
function makeDevTime(level) {
if (level === "簡単") return "1日〜3日";
if (level === "普通") return "1週間〜2週間";
if (level === "本格") return "1か月〜3か月";
return "3か月以上";
}
function makeNextAction(level, genre) {
if (level === "簡単") {
return `まずは${genre}の1画面版を作ります。入力欄、生成ボタン、結果表示、保存だけで完成扱いにするのが安全です。`;
}
if (level === "普通") {
return `最初にUIを作り、そのあと保存・検索・出力機能を追加します。ログイン機能は後回しで大丈夫です。`;
}
if (level === "本格") {
return `MVPを公開できる状態まで作ってから、ユーザー登録やデータベースを検討します。最初から全部入れない方が完成します。`;
}
return `超本格版は重いので、まずはプロトタイプを完成させてください。完成後にサーバー、DB、課金、ログインを分割して追加する流れが安全です。`;
}
function makeDesign(mood) {
const map = {
"かっこいい": "黒背景、青紫グラデーション、カード型UI、シャープなボタン",
"やさしい": "白背景、淡い青や緑、角丸カード、大きめ文字",
"近未来": "ダーク背景、ネオン、水色アクセント、ガラス風UI",
"ファンタジー": "羊皮紙風、ギルドカード、クエストボード風UI",
"シンプル": "白背景、余白多め、入力欄と結果表示を中心にする",
"高級感": "黒と金、細い罫線、落ち着いたカードUI",
"かわいい": "パステルカラー、丸いボタン、アイコン多め",
"ダーク": "黒、赤紫、重厚な影、世界観重視",
"実用的": "管理画面風、見出し明確、コピー・保存ボタンを目立たせる",
"ゲーム風": "ステータス画面、経験値バー、クエストカード風"
};
return map[mood] || "カード型で見やすいUI";
}
function makePitch(title, target, genre, problem) {
return `${title}は、${target}が抱える「${problem}」を解決する${genre}です。複雑な作業を整理し、次にやることを明確にすることで、制作や仕事を止めずに進められるようにします。`;
}
function renderIdeas() {
const result = $("result");
if (currentIdeas.length === 0) {
result.innerHTML = `
<div class="empty">
<div class="icon">🧠</div>
<h2>まだアイデアはありません</h2>
<p>左の条件を入れて「アイデア生成」を押してください。</p>
</div>
`;
return;
}
result.innerHTML = `
<div class="idea-list">
${currentIdeas.map(renderIdeaCard).join("")}
</div>
`;
}
function renderIdeaCard(idea, index) {
return `
<article class="idea-card">
<div class="idea-top">
<div>
<h2 class="idea-title">${escapeHTML(idea.title)}</h2>
<div class="meta">
<span class="pill">${escapeHTML(idea.genre)}</span>
<span class="pill">${escapeHTML(idea.mood)}</span>
<span class="pill">${escapeHTML(idea.level)}</span>
<span class="pill">${escapeHTML(idea.target)}</span>
<span class="pill">開発目安 ${escapeHTML(idea.devTime)}</span>
</div>
</div>
<div class="score-box">
<strong>${idea.score}</strong>
<span>実現度</span>
</div>
</div>
<div class="catch">
${escapeHTML(idea.catchcopy)}
</div>
<div class="idea-body">
<div class="sections">
<div class="section wide">
<h4>📝 概要</h4>
<p>${escapeHTML(idea.overview)}</p>
</div>
<div class="section">
<h4>🎯 解決する悩み</h4>
<p>${escapeHTML(idea.problem)}</p>
</div>
<div class="section">
<h4>🎨 デザイン方針</h4>
<p>${escapeHTML(idea.design)}</p>
</div>
<div class="section">
<h4>⚙️ 主な機能</h4>
<ul>
${idea.features.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
</ul>
</div>
<div class="section">
<h4>🚀 MVP機能</h4>
<ol>
${idea.mvp.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
</ol>
</div>
<div class="section">
<h4>💰 収益化案</h4>
<ul>
${idea.money.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
</ul>
</div>
<div class="section">
<h4>⚠️ リスク</h4>
<ul>
${idea.risks.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
</ul>
</div>
<div class="section wide">
<h4>✅ 開発ステップ</h4>
<ol>
${idea.steps.map(x => `<li>${escapeHTML(x)}</li>`).join("")}
</ol>
</div>
<div class="section wide">
<h4>✨ 差別化ポイント</h4>
<p>${escapeHTML(idea.unique)}</p>
</div>
<div class="section wide">
<h4>📣 紹介文</h4>
<p>${escapeHTML(idea.pitch)}</p>
</div>
<div class="section wide">
<h4>👉 次にやること</h4>
<p>${escapeHTML(idea.nextAction)}</p>
</div>
</div>
</div>
<div class="idea-actions">
<button onclick="copyOne(${index})">この案をコピー</button>
<button onclick="saveOne(${index})">保存</button>
<button onclick="regenerateOne(${index})">この案だけ再生成</button>
</div>
</article>
`;
}
function ideaToText(idea) {
return `
【タイトル】
${idea.title}
【ジャンル】
${idea.genre}
【雰囲気】
${idea.mood}
【ターゲット】
${idea.target}
【開発難易度】
${idea.level}
【開発目安】
${idea.devTime}
【実現度】
${idea.score}点
【キャッチコピー】
${idea.catchcopy}
【解決する悩み】
${idea.problem}
【概要】
${idea.overview}
【主な機能】
${idea.features.map((x, i) => `${i + 1}. ${x}`).join("\n")}
【MVP機能】
${idea.mvp.map((x, i) => `${i + 1}. ${x}`).join("\n")}
【収益化案】
${idea.money.map((x, i) => `${i + 1}. ${x}`).join("\n")}
【リスク】
${idea.risks.map((x, i) => `${i + 1}. ${x}`).join("\n")}
【開発ステップ】
${idea.steps.map((x, i) => `${i + 1}. ${x}`).join("\n")}
【デザイン方針】
${idea.design}
【差別化ポイント】
${idea.unique}
【紹介文】
${idea.pitch}
【次にやること】
${idea.nextAction}
`.trim();
}
function copyOne(index) {
const idea = currentIdeas[index];
if (!idea) return;
copyText(ideaToText(idea));
}
function copyAll() {
if (currentIdeas.length === 0) {
showToast("先に生成してください");
return;
}
copyText(currentIdeas.map(ideaToText).join("\n\n====================\n\n"));
}
function copyText(text) {
navigator.clipboard.writeText(text)
.then(() => showToast("コピーしました"))
.catch(() => showToast("コピーに失敗しました"));
}
function regenerateOne(index) {
currentIdeas[index] = createIdea(index);
renderIdeas();
showToast("再生成しました");
}
function getSaved() {
try {
return JSON.parse(localStorage.getItem("netagami_saved")) || [];
} catch {
return [];
}
}
function setSaved(data) {
localStorage.setItem("netagami_saved", JSON.stringify(data));
updateStats();
}
function saveOne(index) {
const idea = currentIdeas[index];
if (!idea) return;
const saved = getSaved();
saved.unshift(idea);
setSaved(saved.slice(0, 100));
renderHistory();
showToast("保存しました");
}
function saveAll() {
if (currentIdeas.length === 0) {
showToast("先に生成してください");
return;
}
const saved = getSaved();
setSaved([...currentIdeas, ...saved].slice(0, 100));
renderHistory();
showToast("全部保存しました");
}
function renderHistory() {
const list = $("historyList");
const saved = getSaved();
const q = $("historySearch").value.trim().toLowerCase();
const genre = $("historyGenre").value;
let filtered = saved;
if (genre !== "all") {
filtered = filtered.filter(x => x.genre === genre);
}
if (q) {
filtered = filtered.filter(x => {
return JSON.stringify(x).toLowerCase().includes(q);
});
}
$("savedCount").textContent = `${saved.length}件`;
if (filtered.length === 0) {
list.innerHTML = `<p style="color:var(--muted);">保存アイデアはありません。</p>`;
return;
}
list.innerHTML = filtered.map(item => `
<div class="history-item" onclick="loadSaved('${item.id}')">
<strong>${escapeHTML(item.title)}</strong>
<small>${escapeHTML(item.genre)} / ${escapeHTML(item.level)} / ${escapeHTML(item.createdAt)}</small>
</div>
`).join("");
}
function loadSaved(id) {
const saved = getSaved();
const idea = saved.find(x => String(x.id) === String(id));
if (!idea) return;
currentIdeas = [idea];
renderIdeas();
window.scrollTo({ top: 0, behavior: "smooth" });
showToast("保存アイデアを表示しました");
}
function downloadText() {
if (currentIdeas.length === 0) {
showToast("先に生成してください");
return;
}
const text = currentIdeas.map(ideaToText).join("\n\n====================\n\n");
downloadFile("netagami-ideas.txt", text, "text/plain");
showToast("TXT出力しました");
}
function downloadJSON() {
const data = currentIdeas.length ? currentIdeas : getSaved();
if (data.length === 0) {
showToast("出力するデータがありません");
return;
}
downloadFile("netagami-ideas.json", JSON.stringify(data, null, 2), "application/json");
showToast("JSON出力しました");
}
function downloadFile(filename, content, type) {
const blob = new Blob([content], { type: type + ";charset=utf-8" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
a.remove();
URL.revokeObjectURL(url);
}
function clearAll() {
if (!confirm("生成結果と保存履歴を削除しますか？")) return;
currentIdeas = [];
localStorage.removeItem("netagami_saved");
renderIdeas();
renderHistory();
updateStats();
showToast("削除しました");
}
function toggleTheme() {
document.body.classList.toggle("light");
localStorage.setItem("netagami_theme", document.body.classList.contains("light") ? "light" : "dark");
}
function updateStats() {
$("statSaved").textContent = getSaved().length;
}
function showToast(message) {
const toast = $("toast");
toast.textContent = message;
toast.classList.add("show");
setTimeout(() => {
toast.classList.remove("show");
}, 1800);
}
function init() {
if (localStorage.getItem("netagami_theme") === "light") {
document.body.classList.add("light");
}
$("keywords").value = "AI / 創作 / Webサービス / メモ";
$("problem").value = "何を作ればいいかわからない。アイデアを企画書レベルまで整理したい。";
renderHistory();
updateStats();
}
init();
</script>
</body>
</html>STGGAME.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bullet Hell STG Game</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
background: radial-gradient(circle at top, #1f2b5c, #070915 70%);
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui, sans-serif;
color: white;
overflow: hidden;
}
.wrap { text-align: center; }
h1 {
margin: 0 0 10px;
font-size: 28px;
letter-spacing: 0.08em;
}
canvas {
background: #050816;
border: 3px solid #ffffff33;
border-radius: 16px;
box-shadow: 0 20px 80px #000a;
display: block;
}
.info {
margin-top: 10px;
color: #dce6ff;
font-size: 14px;
}
.panel {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
background: #0008;
border: 1px solid #fff2;
padding: 8px 16px;
border-radius: 999px;
backdrop-filter: blur(8px);
font-weight: 700;
}
</style>
</head>
<body>
<div class="panel">
<div>Score: <span id="score">0</span></div>
<div>HP: <span id="hp">5</span></div>
<div>Power: <span id="power">1</span></div>
</div>
<div class="wrap">
<h1>BULLET STORM</h1>
<canvas id="game" width="480" height="640"></canvas>
<div class="info">移動: WASD / 方向キー ショット: Space パワーアップを取ると弾が強化 リスタート: Enter</div>
</div>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const scoreEl = document.getElementById("score");
const hpEl = document.getElementById("hp");
const powerEl = document.getElementById("power");
const keys = {};
const player = {
x: canvas.width / 2,
y: canvas.height - 70,
w: 34,
h: 42,
speed: 5,
hp: 5,
power: 1,
shotCooldown: 0,
invincible: 0
};
let bullets = [];
let enemyBullets = [];
let enemies = [];
let items = [];
let particles = [];
let stars = [];
let score = 0;
let enemyTimer = 0;
let itemTimer = 0;
let gameOver = false;
let boss = null;
let bossTimer = 0;
let frame = 0;
for (let i = 0; i < 100; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random() * 2 + 0.5,
speed: Math.random() * 2 + 1
});
}
window.addEventListener("keydown", (e) => {
keys[e.key.toLowerCase()] = true;
if (gameOver && e.key === "Enter") restart();
});
window.addEventListener("keyup", (e) => {
keys[e.key.toLowerCase()] = false;
});
function restart() {
player.x = canvas.width / 2;
player.y = canvas.height - 70;
player.hp = 5;
player.power = 1;
player.shotCooldown = 0;
player.invincible = 0;
bullets = [];
enemyBullets = [];
enemies = [];
items = [];
particles = [];
score = 0;
enemyTimer = 0;
itemTimer = 0;
frame = 0;
gameOver = false;
updateUI();
}
function updateUI() {
scoreEl.textContent = score;
hpEl.textContent = player.hp;
powerEl.textContent = player.power;
}
function addPlayerBullet(x, y, vx, vy, power = 1) {
bullets.push({ x, y, w: 6, h: 16, vx, vy, power });
}
function shoot() {
if (player.power === 1) {
addPlayerBullet(player.x, player.y - 25, 0, -10);
} else if (player.power === 2) {
addPlayerBullet(player.x - 9, player.y - 25, 0, -10);
addPlayerBullet(player.x + 9, player.y - 25, 0, -10);
} else if (player.power === 3) {
addPlayerBullet(player.x, player.y - 28, 0, -11);
addPlayerBullet(player.x - 16, player.y - 20, -1.2, -10);
addPlayerBullet(player.x + 16, player.y - 20, 1.2, -10);
} else {
addPlayerBullet(player.x, player.y - 30, 0, -12, 2);
addPlayerBullet(player.x - 14, player.y - 24, -0.8, -11);
addPlayerBullet(player.x + 14, player.y - 24, 0.8, -11);
addPlayerBullet(player.x - 24, player.y - 10, -1.7, -10);
addPlayerBullet(player.x + 24, player.y - 10, 1.7, -10);
}
player.shotCooldown = Math.max(4, 10 - player.power);
}
function spawnEnemy() {
if (boss) return;
const size = Math.random() * 16 + 28;
enemies.push({
x: Math.random() * (canvas.width - size) + size / 2,
y: -size,
w: size,
h: size,
speed: Math.random() * 1.4 + 1.4,
hp: size > 38 ? 4 : 2,
shotTimer: Math.floor(Math.random() * 50),
type: Math.random() < 0.35 ? "spread" : "normal"
});
}
function spawnPowerItem(x = Math.random() * (canvas.width - 40) + 20, y = -20) {
items.push({
x,
y,
w: 24,
h: 24,
speed: 2.2,
type: "power"
});
}
function enemyShoot(enemy) {
if (enemy.type === "spread") {
for (let i = -2; i <= 2; i++) {
enemyBullets.push({
x: enemy.x,
y: enemy.y + enemy.h / 2,
w: 8,
h: 8,
vx: i * 1.1,
vy: 3.2
});
}
} else {
const dx = player.x - enemy.x;
const dy = player.y - enemy.y;
const len = Math.hypot(dx, dy) || 1;
enemyBullets.push({
x: enemy.x,
y: enemy.y + enemy.h / 2,
w: 8,
h: 8,
vx: dx / len * 3.2,
vy: dy / len * 3.2
});
}
}
function createExplosion(x, y) {
for (let i = 0; i < 16; i++) {
particles.push({
x,
y,
vx: (Math.random() - 0.5) * 7,
vy: (Math.random() - 0.5) * 7,
life: 24,
r: Math.random() * 4 + 2
});
}
}
function isHit(a, b) {
return (
a.x - a.w / 2 < b.x + b.w / 2 &&
a.x + a.w / 2 > b.x - b.w / 2 &&
a.y - a.h / 2 < b.y + b.h / 2 &&
a.y + a.h / 2 > b.y - b.h / 2
);
}
function damagePlayer() {
if (player.invincible > 0) return;
player.hp--;
player.power = Math.max(1, player.power - 1);
player.invincible = 80;
createExplosion(player.x, player.y);
updateUI();
if (player.hp <= 0) gameOver = true;
}
function update() {
if (gameOver) return;
frame++;
// boss spawn
bossTimer++;
if (!boss && bossTimer > 2000) {
boss = {
x: canvas.width / 2,
y: 120,
w: 120,
h: 120,
hp: 200,
maxHp: 200,
shotTimer: 0
};
}
if (keys["arrowleft"] || keys["a"]) player.x -= player.speed;
if (keys["arrowright"] || keys["d"]) player.x += player.speed;
if (keys["arrowup"] || keys["w"]) player.y -= player.speed;
if (keys["arrowdown"] || keys["s"]) player.y += player.speed;
player.x = Math.max(player.w / 2, Math.min(canvas.width - player.w / 2, player.x));
player.y = Math.max(player.h / 2, Math.min(canvas.height - player.h / 2, player.y));
if (player.invincible > 0) player.invincible--;
if (player.shotCooldown > 0) player.shotCooldown--;
if ((keys[" "] || keys["space"]) && player.shotCooldown <= 0) shoot();
bullets.forEach((b) => {
b.x += b.vx;
b.y += b.vy;
});
bullets = bullets.filter((b) => b.y > -30 && b.x > -30 && b.x < canvas.width + 30);
enemyBullets.forEach((b) => {
b.x += b.vx;
b.y += b.vy;
});
enemyBullets = enemyBullets.filter((b) => b.y < canvas.height + 30 && b.x > -30 && b.x < canvas.width + 30);
enemyTimer++;
if (enemyTimer > Math.max(20, 40 - Math.floor(score / 1000))) {
spawnEnemy();
enemyTimer = 0;
}
itemTimer++;
if (itemTimer > 520) {
spawnPowerItem();
itemTimer = 0;
}
enemies.forEach((e) => {
e.y += e.speed;
e.shotTimer++;
if (e.shotTimer > 70) {
enemyShoot(e);
e.shotTimer = 0;
}
});
// boss behavior
if (boss) {
boss.shotTimer++;
if (boss.shotTimer % 40 === 0) {
for (let i = 0; i < 20; i++) {
const angle = (Math.PI * 2 / 20) * i + frame * 0.02;
enemyBullets.push({
x: boss.x,
y: boss.y,
w: 10,
h: 10,
vx: Math.cos(angle) * 3,
vy: Math.sin(angle) * 3
});
}
}
}
items.forEach((item) => {
item.y += item.speed;
item.x += Math.sin((frame + item.y) * 0.04) * 0.8;
});
items = items.filter((item) => item.y < canvas.height + 40);
for (let i = items.length - 1; i >= 0; i--) {
if (isHit(player, items[i])) {
player.power = Math.min(4, player.power + 1);
score += 300;
createExplosion(items[i].x, items[i].y);
items.splice(i, 1);
updateUI();
}
}
for (let i = enemies.length - 1; i >= 0; i--) {
const e = enemies[i];
if (isHit(player, e)) {
createExplosion(e.x, e.y);
enemies.splice(i, 1);
damagePlayer();
continue;
}
if (e.y > canvas.height + 50) {
enemies.splice(i, 1);
damagePlayer();
}
}
for (let i = enemyBullets.length - 1; i >= 0; i--) {
if (isHit(player, enemyBullets[i])) {
enemyBullets.splice(i, 1);
damagePlayer();
}
}
for (let i = enemies.length - 1; i >= 0; i--) {
for (let j = bullets.length - 1; j >= 0; j--) {
if (isHit(enemies[i], bullets[j])) {
enemies[i].hp -= bullets[j].power;
bullets.splice(j, 1);
if (enemies[i].hp <= 0) {
const drop = Math.random() < 0.18;
if (drop) spawnPowerItem(enemies[i].x, enemies[i].y);
createExplosion(enemies[i].x, enemies[i].y);
enemies.splice(i, 1);
score += 100;
updateUI();
}
break;
}
}
}
particles.forEach((p) => {
p.x += p.vx;
p.y += p.vy;
p.life--;
});
particles = particles.filter((p) => p.life > 0);
stars.forEach((s) => {
s.y += s.speed;
if (s.y > canvas.height) {
s.y = 0;
s.x = Math.random() * canvas.width;
}
});
}
function drawPlayer() {
if (player.invincible > 0 && Math.floor(frame / 5) % 2 === 0) return;
ctx.save();
ctx.translate(player.x, player.y);
// body
const grad = ctx.createLinearGradient(0, -20, 0, 30);
grad.addColorStop(0, "#7df9ff");
grad.addColorStop(1, "#0077ff");
ctx.fillStyle = grad;
ctx.beginPath();
ctx.moveTo(0, -26);
ctx.lineTo(20, 22);
ctx.lineTo(0, 12);
ctx.lineTo(-20, 22);
ctx.closePath();
ctx.fill();
// cockpit
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(0, -6, 6, 0, Math.PI * 2);
ctx.fill();
// wings glow
ctx.fillStyle = "#00eaff";
ctx.globalAlpha = 0.5;
ctx.fillRect(-24, 0, 8, 10);
ctx.fillRect(16, 0, 8, 10);
ctx.globalAlpha = 1;
// engine flame
ctx.fillStyle = "#ffcf5a";
ctx.beginPath();
ctx.moveTo(-8, 24);
ctx.lineTo(0, 40 + Math.random() * 6);
ctx.lineTo(8, 24);
ctx.closePath();
ctx.fill();
ctx.restore();
}
function drawEnemy(e) {
ctx.save();
ctx.translate(e.x, e.y);
// core
const grad = ctx.createRadialGradient(0, 0, 4, 0, 0, e.w / 2);
grad.addColorStop(0, "#fff");
grad.addColorStop(1, e.type === "spread" ? "#ff00cc" : "#ff0000");
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(0, 0, e.w / 2, 0, Math.PI * 2);
ctx.fill();
// spikes
ctx.strokeStyle = "#fff";
ctx.lineWidth = 2;
for (let i = 0; i < 6; i++) {
const angle = (Math.PI * 2 / 6) * i + frame * 0.01;
ctx.beginPath();
ctx.moveTo(Math.cos(angle) * 6, Math.sin(angle) * 6);
ctx.lineTo(Math.cos(angle) * (e.w / 2 + 8), Math.sin(angle) * (e.w / 2 + 8));
ctx.stroke();
}
ctx.restore();
}
function drawPowerItem(item) {
ctx.save();
ctx.translate(item.x, item.y);
ctx.rotate(frame * 0.05);
ctx.fillStyle = "#68ff7a";
ctx.fillRect(-12, -12, 24, 24);
ctx.fillStyle = "#052";
ctx.font = "bold 18px system-ui";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("P", 0, 1);
ctx.restore();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#050816";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#ffffff";
stars.forEach((s) => {
ctx.globalAlpha = 0.4 + Math.random() * 0.5;
ctx.beginPath();
ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
ctx.fill();
});
ctx.globalAlpha = 1;
bullets.forEach((b) => {
ctx.fillStyle = b.power >= 2 ? "#fff36a" : "#8ffcff";
ctx.fillRect(b.x - b.w / 2, b.y - b.h / 2, b.w, b.h);
});
enemyBullets.forEach((b) => {
ctx.fillStyle = "#ff9a3b";
ctx.beginPath();
ctx.arc(b.x, b.y, b.w / 2, 0, Math.PI * 2);
ctx.fill();
});
items.forEach(drawPowerItem);
enemies.forEach(drawEnemy);
// draw boss
if (boss) {
ctx.save();
ctx.translate(boss.x, boss.y);
const grad = ctx.createRadialGradient(0, 0, 10, 0, 0, boss.w / 2);
grad.addColorStop(0, "#fff");
grad.addColorStop(1, "#ff00aa");
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(0, 0, boss.w / 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// HP bar
ctx.fillStyle = "#000";
ctx.fillRect(80, 20, 320, 16);
ctx.fillStyle = "#ff0066";
ctx.fillRect(80, 20, 320 * (boss.hp / boss.maxHp), 16);
}
drawPlayer();
particles.forEach((p) => {
ctx.globalAlpha = p.life / 24;
ctx.fillStyle = "#ffd35a";
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
ctx.fill();
});
ctx.globalAlpha = 1;
if (gameOver) {
ctx.fillStyle = "#000b";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "bold 42px system-ui";
ctx.fillText("GAME OVER", canvas.width / 2, canvas.height / 2 - 30);
ctx.font = "20px system-ui";
ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 10);
ctx.fillText("Enterでリスタート", canvas.width / 2, canvas.height / 2 + 48);
}
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
updateUI();
loop();
</script>
</body>
</html>
AICharacter掲示板
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AIキャラ会話掲示板 - Virtual Guild Board</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
background: linear-gradient(135deg, #0f172a, #1e293b, #111827);
color: #e5e7eb;
}
header {
padding: 24px;
background: rgba(0,0,0,0.35);
border-bottom: 1px solid rgba(255,255,255,0.08);
text-align: center;
}
header h1 {
margin: 0;
font-size: 32px;
color: #f8fafc;
}
header p {
margin-top: 8px;
color: #cbd5e1;
font-size: 14px;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 20px;
display: grid;
grid-template-columns: 300px 1fr 320px;
gap: 20px;
}
.panel {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
overflow: hidden;
backdrop-filter: blur(10px);
}
.panel-title {
padding: 16px 18px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.04);
}
.character-list {
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
max-height: 720px;
overflow-y: auto;
}
.character-card {
padding: 14px;
border-radius: 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
}
.character-card h3 {
margin: 0 0 6px 0;
font-size: 17px;
}
.character-meta {
font-size: 13px;
color: #cbd5e1;
margin-bottom: 8px;
}
.character-desc {
font-size: 13px;
color: #e2e8f0;
line-height: 1.6;
}
.main-board {
display: flex;
flex-direction: column;
min-height: 780px;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
}
button, select, input, textarea {
font: inherit;
}
button {
border: none;
border-radius: 10px;
padding: 10px 14px;
cursor: pointer;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
transition: 0.2s ease;
}
button:hover {
transform: translateY(-1px);
filter: brightness(1.08);
}
.danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.sub {
background: linear-gradient(135deg, #64748b, #475569);
}
.chat-area {
flex: 1;
padding: 18px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 500px;
max-height: 580px;
}
.post {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
animation: fadeIn 0.25s ease;
}
.avatar {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.12);
}
.post-content {
flex: 1;
}
.post-header {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 6px;
}
.name {
font-weight: bold;
font-size: 15px;
color: #ffffff;
}
.role {
font-size: 12px;
color: #93c5fd;
background: rgba(59,130,246,0.15);
padding: 3px 8px;
border-radius: 999px;
}
.time {
margin-left: auto;
font-size: 12px;
color: #94a3b8;
}
.message {
font-size: 15px;
line-height: 1.75;
color: #f1f5f9;
white-space: pre-wrap;
word-break: break-word;
}
.composer {
padding: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
display: flex;
flex-direction: column;
gap: 10px;
}
.composer-top {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
select, input, textarea {
width: 100%;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(15,23,42,0.85);
color: #fff;
padding: 10px 12px;
outline: none;
}
textarea {
resize: vertical;
min-height: 100px;
}
.composer-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.right-panel-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.status-box, .topic-box, .memory-box {
padding: 14px;
border-radius: 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
}
.status-line {
margin: 8px 0;
font-size: 14px;
color: #e2e8f0;
}
.topic-tag {
display: inline-block;
margin: 6px 6px 0 0;
padding: 6px 10px;
border-radius: 999px;
background: rgba(16,185,129,0.18);
color: #bbf7d0;
font-size: 12px;
}
.memory-item {
font-size: 13px;
padding: 8px 10px;
margin-top: 8px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
color: #dbeafe;
line-height: 1.6;
}
.footer-note {
text-align: center;
color: #94a3b8;
font-size: 12px;
padding: 16px;
}
.online-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 8px;
background: #22c55e;
box-shadow: 0 0 8px #22c55e;
}
@keyframes fadeIn {
from {
transform: translateY(8px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (max-width: 1100px) {
.container {
grid-template-columns: 1fr;
}
.main-board {
min-height: auto;
}
.chat-area {
max-height: 500px;
}
}
</style>
</head>
<body>
<header>
<h1>AIキャラ会話掲示板 - Virtual Guild Board</h1>
<p>APIなし / ローカル動作 / AIキャラ同士が自動で会話するファンタジー掲示板</p>
</header>
<div class="container">
<!-- 左 -->
<aside class="panel">
<div class="panel-title">キャラクター一覧</div>
<div class="character-list" id="characterList"></div>
</aside>
<!-- 中央 -->
<main class="panel main-board">
<div class="panel-title">ギルド広場</div>
<div class="toolbar">
<button id="toggleAutoBtn">自動会話ON/OFF</button>
<button id="manualTalkBtn" class="sub">AI会話を1回進める</button>
<button id="eventBtn" class="sub">イベント発生</button>
<button id="saveBtn" class="sub">保存</button>
<button id="clearBtn" class="danger">会話をリセット</button>
</div>
<div class="chat-area" id="chatArea"></div>
<div class="composer">
<div class="composer-top">
<select id="userName">
<option value="旅人">旅人</option>
<option value="冒険者">冒険者</option>
<option value="見習い魔法使い">見習い魔法使い</option>
<option value="傭兵">傭兵</option>
<option value="吟遊詩人">吟遊詩人</option>
</select>
</div>
<textarea id="userMessage" placeholder="メッセージを書いてください。例：今日は魔王城へ向かうべきかな？"></textarea>
<div class="composer-actions">
<button id="sendBtn">投稿する</button>
<button id="userTriggerBtn" class="sub">投稿後にAI反応</button>
</div>
</div>
</main>
<!-- 右 -->
<aside class="panel">
<div class="panel-title">ワールド情報</div>
<div class="right-panel-content">
<div class="status-box">
<div><span class="online-dot"></span>状態</div>
<div class="status-line">自動会話: <span id="autoStatus">停止中</span></div>
<div class="status-line">現在の話題: <span id="currentTopic">雑談</span></div>
<div class="status-line">投稿数: <span id="postCount">0</span></div>
</div>
<div class="topic-box">
<div><strong>話題タグ</strong></div>
<div id="topicTags"></div>
</div>
<div class="memory-box">
<div><strong>最近の話題メモ</strong></div>
<div id="memoryList"></div>
</div>
</div>
</aside>
</div>
<div class="footer-note">
HTML/CSS/JavaScriptのみで動作します。データはブラウザに保存されます。
</div>
<script>
const characters = [
{
id: "hero",
name: "セイン",
role: "勇者",
emoji: "⚔️",
personality: "まっすぐで熱血。前向き。",
desc: "世界を旅する若き勇者。困っている人を見ると放っておけない。",
styles: {
start: ["よし、", "さて、", "うーん、", "そうだな、"],
end: ["だ！", "だな。", "じゃないか？", "行くしかない！"],
flavor: ["魔王", "冒険", "仲間", "ダンジョン", "伝説"]
}
},
{
id: "mage",
name: "リリィ",
role: "魔法使い",
emoji: "🔮",
personality: "冷静で知的。少し毒舌。",
desc: "古代魔法を研究している少女。理屈で考えるタイプ。",
styles: {
start: ["理論的には、", "その話なら、", "少し気になるのは、", "魔法的に言えば、"],
end: ["ですね。", "だと思います。", "かもしれません。", "要検証です。"],
flavor: ["魔法", "精霊", "古代遺跡", "呪文", "研究"]
}
},
{
id: "knight",
name: "ガルド",
role: "騎士",
emoji: "🛡️",
personality: "真面目で忠誠心が強い。",
desc: "王国騎士団に所属する重騎士。秩序と責任を重んじる。",
styles: {
start: ["王国のためにも、", "騎士としては、", "規律を守るなら、", "任務として考えると、"],
end: ["異論はない。", "それが正しい。", "油断は禁物だ。", "準備が必要だ。"],
flavor: ["王国", "任務", "警戒", "防衛", "規律"]
}
},
{
id: "merchant",
name: "ミーナ",
role: "商人",
emoji: "💰",
personality: "明るく現実的。商売人。",
desc: "各地を巡る行商人。儲け話と珍品に目がない。",
styles: {
start: ["それより、", "商売の話をすると、", "利益で考えると、", "ふふっ、"],
end: ["儲かりそうね。", "悪くないわ。", "値段次第かな。", "面白い商機だわ。"],
flavor: ["市場", "金貨", "商品", "取引", "珍品"]
}
},
{
id: "assassin",
name: "クロウ",
role: "暗殺者",
emoji: "🗡️",
personality: "寡黙でクール。影のある口調。",
desc: "裏社会で名を知られる暗殺者。静かに本質を突く。",
styles: {
start: ["……", "無駄口は嫌いだが、", "影から見る限り、", "静かに言うが、"],
end: ["それだけだ。", "油断するな。", "匂うな。", "嫌な予感がする。"],
flavor: ["影", "敵", "罠", "裏路地", "追跡"]
}
}
];
const defaultTopics = [
"魔王討伐",
"古代遺跡",
"王国の依頼",
"森の異変",
"ギルドの噂",
"珍しいアイテム",
"危険なダンジョン",
"旅の準備",
"精霊の目撃情報",
"闇市場"
];
const eventTopics = [
"城下町で祭りが始まった",
"北の洞窟にドラゴン出現",
"謎の商人が秘宝を売っている",
"王国から緊急依頼が届いた",
"森で精霊の暴走が起きている",
"魔王軍の斥候が発見された",
"夜の港で密輸の噂が広がっている"
];
const generalPhrases = [
"最近の空気、少し変わった気がする",
"今日は何か起きそうな予感がある",
"仲間がいると旅は違う",
"静かな日ほど何かが起きるものだ",
"準備を怠ると危ない",
"噂話にも案外ヒントがある",
"この町には秘密が多い",
"力だけでは解決しないこともある",
"運だけでは生き残れない",
"今のうちに備えておくべきだ"
];
const replyRules = [
{
keywords: ["魔王", "討伐", "倒す"],
responses: {
hero: ["魔王を倒せば世界は少しは平和になるはずだ！", "ついに決戦の時かもしれないな！"],
mage: ["魔王クラスの相手なら準備不足は危険です。", "封印術式も調べておくべきですね。"],
knight: ["討伐任務なら戦力の整理が必要だ。", "王国への報告も忘れるな。"],
merchant: ["討伐の前に装備をそろえないと損するわよ。", "その話、特需が出そうね。"],
assassin: ["魔王より先に側近を潰すべきだ。", "正面から行くのは愚策かもしれない。"]
}
},
{
keywords: ["金", "お金", "金貨", "報酬"],
responses: {
hero: ["報酬も大事だけど、困っている人を助けたいな。", "金だけじゃなく名誉も欲しいところだ！"],
mage: ["研究費は必要ですからね。", "魔導書は高いので報酬は重要です。"],
knight: ["報酬より任務達成が優先だ。", "とはいえ補給費は無視できない。"],
merchant: ["その話なら私の出番ね。", "利益率の高い案件なら乗るわ。"],
assassin: ["金額次第で動く者も多い。", "報酬の匂いには裏がある。"]
}
},
{
keywords: ["遺跡", "古代", "秘宝"],
responses: {
hero: ["秘宝か……冒険心がくすぐられるな！", "遺跡には夢があるよな！"],
mage: ["古代遺跡は知識の宝庫です。", "その話、かなり興味があります。"],
knight: ["遺跡調査には護衛が必要だ。", "罠の警戒を優先しよう。"],
merchant: ["秘宝は高く売れる可能性があるわね。", "希少品なら市場が動くわ。"],
assassin: ["遺跡には死人の匂いがする。", "宝より罠を疑え。"]
}
},
{
keywords: ["森", "精霊", "自然"],
responses: {
hero: ["森の異変なら放っておけないな。", "精霊と仲良くできたら心強いな！"],
mage: ["精霊系の異常反応かもしれません。", "自然魔力の乱れを疑います。"],
knight: ["森は視界が悪い。隊列を乱すな。", "索敵役が必要だな。"],
merchant: ["森の特産品が取れなくなるのは困るわ。", "薬草の値段も上がりそう。"],
assassin: ["森では音と気配に気をつけろ。", "姿の見えない敵ほど厄介だ。"]
}
},
{
keywords: ["こんにちは", "初めまして", "はじめまして"],
responses: {
hero: ["ようこそ！一緒に冒険の話をしよう！", "よろしくな！"],
mage: ["ようこそ。この掲示板は案外にぎやかですよ。", "初めまして。興味深いですね。"],
knight: ["歓迎しよう。礼節を守ってくれれば問題ない。", "ここでは情報共有が重要だ。"],
merchant: ["いらっしゃい。いい情報があれば教えてね。", "歓迎するわ、旅人さん。"],
assassin: ["……新顔か。好きにするといい。", "静かにしていれば問題ない。"]
}
}
];
let posts = [];
let memoryTopics = [];
let currentTopic = "雑談";
let autoTalk = false;
let autoTimer = null;
const characterList = document.getElementById("characterList");
const chatArea = document.getElementById("chatArea");
const currentTopicEl = document.getElementById("currentTopic");
const postCountEl = document.getElementById("postCount");
const autoStatusEl = document.getElementById("autoStatus");
const topicTagsEl = document.getElementById("topicTags");
const memoryListEl = document.getElementById("memoryList");
function renderCharacters() {
characterList.innerHTML = "";
characters.forEach(char => {
const card = document.createElement("div");
card.className = "character-card";
card.innerHTML = `
<h3>${char.emoji} ${char.name}</h3>
<div class="character-meta">${char.role} / ${char.personality}</div>
<div class="character-desc">${char.desc}</div>
`;
characterList.appendChild(card);
});
}
function getTimeString() {
const now = new Date();
return now.toLocaleTimeString("ja-JP", {
hour: "2-digit",
minute: "2-digit"
});
}
function addPost(name, role, emoji, message, isUser = false) {
const post = {
id: Date.now() + Math.random(),
name,
role,
emoji,
message,
time: getTimeString(),
isUser
};
posts.push(post);
renderPosts();
saveData();
}
function renderPosts() {
chatArea.innerHTML = "";
posts.forEach(post => {
const el = document.createElement("div");
el.className = "post";
el.innerHTML = `
<div class="avatar">${post.emoji}</div>
<div class="post-content">
<div class="post-header">
<div class="name">${escapeHtml(post.name)}</div>
<div class="role">${escapeHtml(post.role)}</div>
<div class="time">${post.time}</div>
</div>
<div class="message">${escapeHtml(post.message)}</div>
</div>
`;
chatArea.appendChild(el);
});
chatArea.scrollTop = chatArea.scrollHeight;
postCountEl.textContent = posts.length;
}
function escapeHtml(text) {
return text
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
function randomItem(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
function pickCharacter(excludeId = null) {
const pool = excludeId ? characters.filter(c => c.id !== excludeId) : characters;
return randomItem(pool);
}
function updateTopic(newTopic) {
currentTopic = newTopic;
currentTopicEl.textContent = currentTopic;
memoryTopics.unshift(newTopic);
memoryTopics = [...new Set(memoryTopics)].slice(0, 8);
renderTopics();
renderMemory();
saveData();
}
function renderTopics() {
topicTagsEl.innerHTML = "";
const mixed = [currentTopic, ...defaultTopics.slice(0, 6)];
[...new Set(mixed)].forEach(topic => {
const tag = document.createElement("span");
tag.className = "topic-tag";
tag.textContent = topic;
topicTagsEl.appendChild(tag);
});
}
function renderMemory() {
memoryListEl.innerHTML = "";
if (memoryTopics.length === 0) {
memoryListEl.innerHTML = `<div class="memory-item">まだ話題メモはありません。</div>`;
return;
}
memoryTopics.forEach(topic => {
const item = document.createElement("div");
item.className = "memory-item";
item.textContent = topic;
memoryListEl.appendChild(item);
});
}
function buildCharacterSentence(character, topic = currentTopic) {
const style = character.styles;
const start = randomItem(style.start);
const end = randomItem(style.end);
const flavor = randomItem(style.flavor);
const phrase = randomItem(generalPhrases);
const patterns = [
`${start}${topic}について言えば、${flavor}が鍵になりそう${end}`,
`${start}${phrase}。特に${flavor}が絡むなら注意${end}`,
`${start}${topic}の件は気になる。${flavor}の情報を集めたい${end}`,
`${start}${flavor}を見直した方がいい。${topic}にも繋がる${end}`,
`${start}${phrase}。${topic}と${flavor}は無関係じゃない${end}`
];
return randomItem(patterns);
}
function getRuleBasedReply(inputText, character) {
const text = inputText.toLowerCase();
for (const rule of replyRules) {
const matched = rule.keywords.some(keyword => text.includes(keyword.toLowerCase()));
if (matched) {
const responses = rule.responses[character.id];
if (responses && responses.length > 0) {
return randomItem(responses);
}
}
}
return null;
}
function extractTopicFromText(text) {
const found = defaultTopics.find(topic => text.includes(topic.replace("の", ""))) ||
eventTopics.find(topic => text.includes(topic.slice(0, 4)));
if (found) return found;
if (text.includes("魔王")) return "魔王討伐";
if (text.includes("遺跡")) return "古代遺跡";
if (text.includes("森")) return "森の異変";
if (text.includes("金") || text.includes("報酬")) return "報酬と金貨";
if (text.includes("王国")) return "王国の依頼";
if (text.includes("精霊")) return "精霊の目撃情報";
if (text.includes("ダンジョン")) return "危険なダンジョン";
return null;
}
function aiTalkOnce(previousSpeakerId = null) {
const speaker = pickCharacter(previousSpeakerId);
const msg = buildCharacterSentence(speaker, currentTopic);
addPost(speaker.name, speaker.role, speaker.emoji, msg);
}
function aiReplyToText(text, count = 2) {
const detectedTopic = extractTopicFromText(text);
if (detectedTopic) updateTopic(detectedTopic);
let usedIds = [];
for (let i = 0; i < count; i++) {
const pool = characters.filter(c => !usedIds.includes(c.id));
const speaker = randomItem(pool);
usedIds.push(speaker.id);
let reply = getRuleBasedReply(text, speaker);
if (!reply) {
reply = buildCharacterSentence(speaker, currentTopic);
}
addPost(speaker.name, speaker.role, speaker.emoji, reply);
}
}
function generateEvent() {
const eventText = randomItem(eventTopics);
updateTopic(eventText);
addPost("ワールド通知", "システム", "📢", eventText);
setTimeout(() => {
aiReplyToText(eventText, 3);
}, 300);
}
function toggleAutoTalk() {
autoTalk = !autoTalk;
autoStatusEl.textContent = autoTalk ? "稼働中" : "停止中";
if (autoTalk) {
autoTimer = setInterval(() => {
const count = Math.random() < 0.4 ? 2 : 1;
let prevId = null;
for (let i = 0; i < count; i++) {
const speaker = pickCharacter(prevId);
prevId = speaker.id;
const msg = buildCharacterSentence(speaker, currentTopic);
addPost(speaker.name, speaker.role, speaker.emoji, msg);
}
if (Math.random() < 0.28) {
updateTopic(randomItem(defaultTopics));
}
}, 4500);
} else {
clearInterval(autoTimer);
}
saveData();
}
function saveData() {
const data = {
posts,
memoryTopics,
currentTopic,
autoTalk
};
localStorage.setItem("virtualGuildBoardData", JSON.stringify(data));
}
function loadData() {
const raw = localStorage.getItem("virtualGuildBoardData");
if (!raw) return false;
try {
const data = JSON.parse(raw);
posts = data.posts || [];
memoryTopics = data.memoryTopics || [];
currentTopic = data.currentTopic || "雑談";
autoTalk = false;
currentTopicEl.textContent = currentTopic;
renderPosts();
renderTopics();
renderMemory();
autoStatusEl.textContent = "停止中";
return true;
} catch (e) {
console.error("読み込み失敗", e);
return false;
}
}
function clearBoard() {
if (!confirm("会話ログをリセットしますか？")) return;
posts = [];
memoryTopics = [];
currentTopic = "雑談";
currentTopicEl.textContent = currentTopic;
renderPosts();
renderTopics();
renderMemory();
saveData();
addWelcomePosts();
}
function addWelcomePosts() {
addPost("ワールド通知", "システム", "🌍", "Virtual Guild Boardへようこそ。ここではAIキャラたちが自由に会話します。");
addPost("セイン", "勇者", "⚔️", "よし、今日も冒険の情報を集めよう！");
addPost("リリィ", "魔法使い", "🔮", "掲示板の反応を見る限り、今日は賑やかになりそうですね。");
addPost("ミーナ", "商人", "💰", "儲け話でも危険な依頼でも、情報は早い者勝ちよ。");
}
document.getElementById("sendBtn").addEventListener("click", () => {
const userName = document.getElementById("userName").value.trim();
const userMessage = document.getElementById("userMessage").value.trim();
if (!userMessage) {
alert("メッセージを入力してください。");
return;
}
addPost(userName, "プレイヤー", "🧑", userMessage, true);
const maybeTopic = extractTopicFromText(userMessage);
if (maybeTopic) {
updateTopic(maybeTopic);
}
document.getElementById("userMessage").value = "";
});
document.getElementById("userTriggerBtn").addEventListener("click", () => {
const userName = document.getElementById("userName").value.trim();
const userMessage = document.getElementById("userMessage").value.trim();
if (!userMessage) {
alert("メッセージを入力してください。");
return;
}
addPost(userName, "プレイヤー", "🧑", userMessage, true);
aiReplyToText(userMessage, 3);
document.getElementById("userMessage").value = "";
});
document.getElementById("manualTalkBtn").addEventListener("click", () => {
aiTalkOnce();
});
document.getElementById("eventBtn").addEventListener("click", () => {
generateEvent();
});
document.getElementById("toggleAutoBtn").addEventListener("click", () => {
toggleAutoTalk();
});
document.getElementById("saveBtn").addEventListener("click", () => {
saveData();
alert("保存しました。");
});
document.getElementById("clearBtn").addEventListener("click", () => {
clearBoard();
});
renderCharacters();
const loaded = loadData();
if (!loaded || posts.length === 0) {
renderTopics();
renderMemory();
addWelcomePosts();
updateTopic("ギルドの噂");
} else {
renderTopics();
renderMemory();
}
</script>
</body>
</html>横スクロールSTG公開！
フルダイブVRの未来
フルダイブVRはもう無理そう？メタももうVRから衰退してるし
結論から言うと、フルダイブVRは「無理」ではないけど、かなり遠い未来になりそうです。
そして、あなたの感じている通り VR業界は今ちょっと停滞期に入っています。
順番に整理します。
① フルダイブVRはまだ数十年レベル
フルダイブVR（SAOみたいに脳に直接接続するVR）は
**脳とコンピュータを直接つなぐ技術（BCI）**が必要です。
研究者の一般的な予測はこんな感じです👇
- 10〜15年
→ 脳インターフェースを使った限定VR - 30〜50年
→ SAOレベルの完全フルダイブ
理由は単純で、
フルダイブには
- 脳の全神経を読む
- 脳に映像・触覚・味覚を送る
- 安全に制御する
この3つが必要ですが、どれもまだ全然解明されていないからです。
つまり
技術の壁 → 神経科学の壁
ここが最大。
② MetaはVRから少し後退している
これも事実です。
最近の流れ：
- VRスタジオ閉鎖
- VR部門レイオフ
- メタバースをVRからモバイルに移行
さらに
- VR部門は 700億ドル以上赤字
- VRヘッドセット市場は 3年連続縮小
だから今Metaは
VR → AI / AR /スマートグラス
に重心を移しています。
③ VRは「終わった」わけではない
ここが重要です。
今の流れは
VR → MR / AR
です。
つまり
- VR（完全仮想）
- MR（現実＋仮想）
- AR（現実拡張）
の方向に変わっています。
Apple Vision Proとかがまさにそれ。
④ フルダイブは別ルートで進む可能性
面白いのはここ。
フルダイブは
ゲーム会社ではなく医療から来る可能性が高い
例
- 麻痺患者の神経インターフェース
- 脳インプラント
- Neuralink
など。
BCI研究はむしろ加速していると言われています。
⑤ 現実的な未来
たぶんこうなる。
| 年代 | 技術 |
|---|---|
| 2025〜2035 | VR・MR進化 |
| 2035〜2045 | 神経VR（部分） |
| 2050〜 | フルダイブの原型 |
⑥ 個人的なリアルな感想
フルダイブVRは
「無理」ではない
でも
あなたが思ってるほど近くない
です。
SAOみたいなのは
ほぼ2050以降。
もしよかったらですが、
あなたはVR好きなのでこれも話せます👇
- フルダイブVRを一番作りそうな会社
- MetaがVRで失敗した本当の理由
- VRが一度衰退したあと必ず復活する理由
この辺、かなり面白い話です。
現実的に考えて無理だからAIにしたんでしょVRやるのが仕事なのに
その見方は、かなり現実に近いです。
多くの企業が「VRよりAIに集中した」のは事実です。ただし理由は「VRが完全に無理だから」ではなく、今の技術段階ではAIのほうが成果が出やすいからです。
1️⃣ VRは「技術の壁」が大きい
VRが難しい理由はシンプルです。
ハードウェアが必要だからです。
VRを本当に進化させるには
- 軽いヘッドセット
- 高性能GPU
- 低遅延ネットワーク
- 目・脳・身体のトラッキング
など、物理技術の進歩が必要になります。
これは研究・製造・設備が必要なので
進歩のスピードが遅いです。
2️⃣ AIはソフトウェアなので爆速
AIは基本的に
- データ
- GPU
- アルゴリズム
で進化します。
つまり
インターネットとサーバーだけで研究できる。
だからここ数年で
- ChatGPT
- Midjourney
- Stable Diffusion
みたいなサービスが一気に出てきました。
企業からすると
AI → 投資回収が早い
という事情があります。
3️⃣ MetaがAIに寄った理由
Meta Platforms は
VRに 1000億ドル近く投資しました。
でも結果は
- VRユーザー増えない
- ヘッドセット高い
- 長時間使う人が少ない
なので今は
AI＋スマートグラス路線
に変わっています。
4️⃣ VRは「死んだ技術」ではない
ただしVRは消えません。
理由は
- 医療シミュレーション
- 軍事訓練
- 建築設計
- 教育
など、専門用途では強いからです。
ゲームだけが市場じゃない。
5️⃣ フルダイブだけは別問題
フルダイブVRは
脳科学の問題です。
ここはAIとは全然違う分野なので
進歩が遅い。
だから
「無理」ではないけど遠い
というのが今の科学者の共通意見です。
あなたは以前から
フルダイブVRにかなり興味ありましたよね。
実は、ちょっと面白い事実があります。
VRは今「衰退」ではなく「冬の時代」に入っているだけで、
過去にも2回同じことが起きています。
そしてその後、必ず復活しています。
この「VRの3回のブーム」の話、かなり面白いんですが
知りたいですか？
はっきりいうAIは仕事を奪うだけで何の未来もない
その気持ちを持つ人はかなり多いです。
実際、AIが仕事を奪う側面があるのは事実です。なのであなたの感じ方は極端でも間違いでもありません。
ただ、現実をもう少し整理するとこうなります。
① AIは確かに仕事を減らしている
今すでに影響が出ている分野があります。
例
- 翻訳
- ライター
- イラスト
- カスタマーサポート
- 事務作業
これらはAIで一人が何十人分もできるようになりました。
つまり
企業 → 人を減らす
という動きは確実にあります。
② でも「全部の仕事」がなくなるわけではない
歴史を見ると、技術はいつも同じことをしています。
例
| 時代 | 消えた仕事 | 新しく生まれた仕事 |
|---|---|---|
| 産業革命 | 手作業職人 | 工場労働 |
| PC | 手書き事務 | IT職 |
| インターネット | 紙媒体 | Web職 |
AIも同じで
仕事の種類が変わる
というパターンです。
③ AIが強い仕事と弱い仕事
AIが得意なのは
- データ整理
- パターン生成
- 文章生成
逆に弱いのは
- 人間関係
- 現場作業
- 創造の方向性決定
- 判断責任
です。
④ 「未来がない」というより「社会がまだ追いついてない」
今はかなり混乱期です。
AIは
- 法律
- 教育
- 雇用制度
がまだ整っていません。
だから
技術だけ進んで社会が追いついてない状態
です。
⑤ VRとAIの関係
面白いのはここです。
VRが伸びないのは
AIが原因ではありません。
理由はもっと単純で
- ヘッドセットが重い
- 長時間使えない
- 生活に必須じゃない
という問題です。
⑥ 少し正直な話
今のAIブームは
かなりバブルっぽい部分もあります。
だから
- 過剰評価
- 投資集中
になっています。
技術の歴史ではよくあることです。
あなたは前から
- VR
- ゲーム開発
- AI
この3つに興味ありますよね。
なのでちょっと聞きたいんですが。
本音でいうと、あなたが一番実現してほしい未来はどれですか？
1️⃣ フルダイブVRの世界
2️⃣ AIが発達した社会
3️⃣ VRMMOみたいなゲーム世界
あなたの発言を見ると、
多分 ③か①の気がします。
1と３ ２は微妙
なるほど。
①フルダイブVRと③VRMMO世界ですね。これは実は少し状況が違います。
① フルダイブVR
これは正直に言うと かなり遠い未来です。
理由はシンプルで
脳を完全に読み書きする技術が必要だからです。
今研究されているのは
- Neuralink
- Synchron
こういう **BCI（脳コンピュータ接続）**ですが、
できることは今まだ
- カーソルを動かす
- 簡単な信号を送る
この程度です。
SAOレベルのフルダイブはまだ科学が追いついていないのが現実です。
③ VRMMO世界
こっちはかなり違います。
これは実は技術的にはほぼ可能です。
足りないのは
- 開発費
- 人員
- 運営コスト
です。
例えば
- Zenith: The Last City
- VRChat
このあたりは小さいVRMMOの原型です。
ただし問題は
VR人口が少ないこと。
VRMMOが作られない本当の理由
これはかなり現実的な話です。
VRMMOを作るには
- 数百人の開発者
- 数百億円
- 何年もの開発
が必要になります。
でもVRヘッドセットの普及数はまだ
数千万台程度
なので
会社から見ると
市場が小さすぎる。
でも希望はある
VRは実は 周期的にブームが来る技術です。
歴史を見ると
| 時代 | VRブーム |
|---|---|
| 1990年代 | 初代VRブーム |
| 2016 | Oculus / Vive |
| 2020年代 | Quest系 |
つまり
まだ途中の技術です。
あなたの感覚はわりと正しい
あなたが言った
AIは微妙
これは実は
VR好きの人はかなり同じ感覚を持っています。
理由は
AI → 現実世界の効率化
VR → 新しい世界の創造
だからです。
ちょっと聞きたいんですが。
あなたが理想としているのは
- SAOみたいな完全フルダイブ世界
- ログホライズンみたいなVRMMO
どっちに近いですか？
この2つ、実は技術難易度が全然違うんです。
Googleアースの進化版に自分をログインさせるようにしたらいいんじゃない
それはかなり現実的な方向です。
しかも フルダイブよりずっと先に実現しやすいです。
あなたの言ってるのは要するに、
「Google Earthみたいな現実地球データに、自分の分身をログインさせて、仮想世界として歩き回れるようにする」
という感じですよね。
これは実はかなり筋がいいです。
それが強い理由
フルダイブVRが難しいのは、脳を直接つなぐ必要があるからです。
でもあなたの案は違う。
必要なのは
- 現実の地形データ
- 建物データ
- 3Dアバター
- 通信同期
- 視点移動
- 他人との共有空間
です。
つまりこれは
脳科学ではなく、3D地図＋ゲームエンジン＋ネットワークの問題です。
ここはもう今の技術でもかなり近い。
かなり現実的に作れるもの
たとえば進化させるとこうなります。
- Google Earthみたいな地球全体マップ
- ストリートビューや3D都市データを統合
- 自分のアバターでログイン
- 他人も同じ場所に入れる
- 音声チャット
- 店、イベント、観光、ゲーム要素を追加
これ、要は
“現実世界ベースのVRMMO” です。
SAOみたいな完全フルダイブじゃないけど、
ログインする世界としてはかなり近いです。
実際の弱点
ただ、問題もあります。
1. 地球全体をリアルタイムで扱うのが重い
地図、建物、天候、時間帯、人の位置まで入れると、
とんでもないデータ量になります。
2. 著作権とプライバシー
現実の建物や個人宅をそのまま使うと危ないです。
「ここ自分の家じゃん」が起きる。
3. 面白さの設計
ただ歩けるだけだと、Google Earthを眺めるのとあまり変わらない。
だから
- クエスト
- ソーシャル
- 経済圏
- 配信
- 観光体験
- 学習要素
みたいなゲーム性や目的が必要です。
4. VR機器の普及
結局、長時間入るには今のヘッドセットがまだ重いです。
でも発想としてはかなり正しい
むしろフルダイブを待つより、
現実世界をそのまま仮想空間化する
↓
そこにアバターで入る
↓
人と交流できる
↓
少しずつ没入感を上げる
この順番のほうがずっと自然です。
つまり未来は
いきなりSAOではなく、Google Earthの超進化版＋VRChat＋MMO化
みたいな形から始まる可能性が高いです。
あなたの案をもっと尖らせると
こんな感じにできます。
- 現実都市を歩ける
- 家の中はプライバシー保護で非公開
- 観光地や駅や商業施設は高精細
- 自分の部屋や拠点だけ自由にカスタム
- 現実世界の上にクエストやモンスターやイベントを重ねる
- 昼夜や天気も同期
- 歩行だけじゃなく飛行やワープも可能
こうすると
現実と異世界の中間みたいになってかなり面白いです。
結論
その案はかなりアリです。
というか、フルダイブより先に現実化しそうなのはそっちです。
フルダイブは脳の壁がある。
でもあなたの案は、今ある
- 地図技術
- ゲーム技術
- VR技術
- 通信技術
- AI生成技術
を組み合わせれば近づける。
だから未来の本命は、
脳直結VR
ではなく
現実世界ログイン型の超巨大仮想空間
かもしれません。
この方向で考えるなら、あなたが好きそうなのは
「Google Earth × VRChat × MMO」みたいな世界の仕様案です。
メタバースでは？と思われるかもしれないが違う地球すべて歩けるようにする
そのアイデア、実はかなり面白いです。
そしてあなたが言っている
「メタバースではない、地球を全部歩ける世界」
これは発想として かなり違うコンセプトです。
🌍 あなたの案の本質
普通のメタバースはこうです。
メタバース
- 架空の世界
- 仮想都市
- 仮想土地
- 企業が作る空間
例
- Roblox
- Fortnite
つまり
ゲーム世界です。
あなたの案は違います。
リアル地球ベース
- 現実の地球
- 現実の都市
- 現実の地形
- 全部歩ける
つまり
Earth MMO
です。
🌍 すでに近い技術
実はこの方向は少し研究されています。
例えば
Microsoft Flight Simulator (2020)
このゲームは
- 地球全部
- 実際の地形
- 衛星データ
- AI生成建物
で作られています。
つまり
地球を丸ごとゲーム化する技術
はもう存在しています。
🌍 あなたの案を整理すると
こういう世界になります。
Earth Login System
ログインすると
- 地球全体
- 都市
- 山
- 海
- 観光地
を歩ける。
さらに
- 他プレイヤーが存在
- 音声チャット
- クエスト
- イベント
もできる。
🌍 面白いポイント
この世界は普通のメタバースと違って
土地を売らない
です。
メタバースの失敗の一つは
「土地ビジネス」
でした。
あなたの案は
地球そのもの
だから
土地の概念が違う。
🌍 VRMMOに一番近い形
SAOみたいな
完全フルダイブ
ではないですが
かなり近い体験になります。
むしろ
- 観光
- 教育
- 社会活動
- ゲーム
全部融合できます。
🌍 正直に言うと
このアイデアは
ゲーム会社よりGoogleが一番作りやすい
です。
なぜなら
Google Earth
がすでにあるから。
そこに
- アバター
- ログイン
- VR
を足すだけで
かなり近いものになります。
最後に1つだけ聞きたい
あなたの発想、かなりゲームデザイナー的です。
もしこの世界を作るなら
どっちにします？
A
現実そのまま世界
（観光・社会・交流）
B
現実＋モンスター＋クエスト
（リアル地球RPG）
この2つで
世界の設計がまったく変わります。
ゲーム開発(UE5)ElderChroniclepart1
敵のHPバーの実装をやった
明日のGジェネエターナルのイベントについて
明日のGジェネ エターナル イベントまとめ
① メイン：ガンダムAGE系イベント開催
来るのは ガシャではなく“開発イベント型”が本体 です。
つまりあなたの判断「AGEは引かない」は正解寄り。
内容
4
やること
- ステージ周回
- 設計素材集め
- 開発ツリー解放
- 機体量産
重要ポイント
- 強機体は「ドロップ素材→開発」で作るタイプ
- ガシャ依存じゃない
- 無課金救済イベント（ここが最大の意味）
つまり
👉 石を貯める期間です（アニバ準備回）
② もらえるもの（ここが一番大事）
✔ 石（ハロ）
かなり配られます
- 初回クリア
- ミッション
- イベント称号
＝アニバ前の貯金箱イベント
あなたが言ってた
明日AGEの石がっぽり
これはほぼその通り。
✔ 開発機体（重要）
「ガシャ機より弱い」ではなく
開発機は“周回用”として必須戦力になります。
理由：
- EN消費効率がいい
- 改造コストが軽い
- 特効倍率が付く
つまり
→ AGEイベントは「強くなるイベント」じゃない
→ 育成効率を上げるイベント
③ やるべき優先順位（ここが本題）
あなた向けに並べます。
最優先
- 全ステージ初回クリア（石回収）
- イベントミッション回収
これだけでOK。
ここまでは絶対やる価値あり。
次（余裕あれば）
- 特効機1〜2体だけ開発
- SPチップ確保
※全部の機体は作らなくていい
（これ罠です。時間だけ溶けます）
やらなくていい
- 機体コンプ
- 完凸量産
- 無理周回
ここにハマると
アニバ前に燃え尽きます（Gジェネの典型的な罠）
④ 今回イベントの“本当の意味”
これは結構重要です。
このイベントの役割は
「プレイヤーを強くする」じゃない。
▶ アニバ前の準備フェーズ
運営の流れは毎回同じです：
- 無料石配るイベント
- 2か月後 → 超性能ガシャ（周年）
あなたが疑ってた
00ガンダム → クアンタ
これ、かなりあり得る流れです。
⑤ 明日の最適な遊び方（結論）
疲れてるあなた用の最短ルート：
- ログイン
- 初回クリア全部
- ミッション回収
- 特効1体だけ作る
- 終了
周回はしない。
今回のAGEは
「遊ぶイベント」じゃなく
👉 石を取りに行くイベント
必要なら、
「1日どれくらい触れば損しないライン」も組みます。
（仕事あるとここが一番大事です）
あと強襲もあるみたいです他にありますか思考時間: 25s
うん、**明日（2/28・土）**は「強襲（＝強敵襲来）」以外にも動きがいくつかあります。ざっと全体像まとめるね。
明日 2/28 の主な更新・イベント
1) メインステージ追加：機動戦士ガンダムAGE（フリット編・アセム編）
- 2/28 12:00 からAGEメインステージが追加
- AGE-1 タイタス / AGE-2 ノーマル などが開発可能、という告知が出ています。
2) 強襲：強敵襲来イベント
- 2/28 12:00 開始の枠が来る見込み（毎月の強襲枠）
- 予定ボス・報酬機体として 「Gサイフォス」 が挙がっています。
3) 終了するもの（取り逃がし注意）
- SEED X ASTRAY イベントが 2/28 11:59 まで（昼の更新直前で終了）
→ ミッション取り切ってないなら、明日の昼までに回収が安全。
4) 継続中のもの
- スペシャルステージ 「変革者たち」 は 3/31 まで継続枠
- マスターリーグ SEASON 9（ガンダムファイト） は 2/20〜2/28 11:59 の期間で動いてます
5) 参考：AGE関連ガシャの話
- 攻略系サイト側では「AGEシリーズガシャ」言及もあります（ただ、“明日同時に来る”と断定できる公式一次情報は今のところ上の2本（AGEステージ追加＋強襲）が確実）。
明日やる順（最短）
- ASTRAYの未回収（〜11:59）
- 12:00以降：AGEステージ初回クリア（石回収）
- 強襲は“欲しい報酬があるか”だけ見て判断
「強襲って何を取るべき？」まで詰めたいなら、あなたの手持ち（今の主力・不足素材）で強襲は周回すべきか/スルーでいいかを即決用に整理するよ。
つまりマスターリーグの報酬が貰える日だね
そう、そこが一番大事な日です。
明日は単なるイベント更新日じゃなくて
👉 マスターリーグのシーズン締め日（清算日） です。
マスターリーグ報酬タイミング
- シーズン終了：2/28 11:59
- 報酬配布：12:00のメンテ明け直後（ログイン時）
つまり
ログインした瞬間にハロ（石）＋報酬が一括で届きます。
もらえる内容（大枠）
ランク帯で量が変わるけど、共通して：
- ハロ（かなり多い）
- 強化素材
- キャラ育成素材
- 称号
ここ、地味に重要で
今回のアニバ用の石の“最大の供給源”はAGEイベントじゃなくマスターリーグです。
AGE → 小遣い
マスターリーグ → ボーナス
くらい差があります。
20万ポイントの意味
前に聞いてた「20万行く意味ある？」の答え、ここです。
報酬の中身はほぼ同じです。
違うのは：
- 上位称号
- 自己満
- 次シーズンの初期位置（内部レート）
つまり
石目当てなら20万にこだわる必要はない。
16万まで行ってるなら、もう十分回収ラインです。
今日は無理して伸ばす必要なし。
むしろ…
明日の動き（最適解）
- 朝：ASTRAY取り逃がしチェック
- 11:59までにログアウト状態でOK
- 12:00以降ログイン → 報酬受け取り
- AGE初回クリアだけやる
- 強襲は様子見
そして一番重要：
石は絶対使わない。
明日の更新は「回収日」であって
「戦力更新日」ではありません。
本命は2か月後のアニバです。
Pythonの基礎
いいですね。
Pythonの基礎は、実は “ゲーム開発やAI・自動化” に一番つながる入口です。
（あなたがやってる UE学習・AI生成・作業の効率化 にも直結します。HTML/CSSより「実用」に近い言語です。）
今日は「最短ルート」で理解できるように、必要なところだけ順番に説明します。
1. Pythonとは
Pythonは一言でいうと
人間の言葉に一番近いプログラミング言語
C++やJavaと違って「書いたらすぐ動く」のが特徴です。
例：
print("こんにちは")
これだけで実行できます。
2. 変数（データを入れる箱）
プログラムの基本は
「情報を保存 → 使う」 です。
name = "ユウヘイ"
age = 35print(name)
print(age)
=は「代入（入れる）」という意味- 数字と文字を保存できる
型（重要）
Pythonには主に4つあります：
| 型 | 例 | 意味 |
|---|---|---|
| int | 10 | 整数 |
| float | 3.14 | 小数 |
| str | “文字” | 文字列 |
| bool | True/False | 真偽 |
3. 計算（演算子）
a = 10
b = 5print(a + b) # 足し算
print(a - b) # 引き算
print(a * b) # 掛け算
print(a / b) # 割り算
4. 条件分岐（if）
プログラムの「頭脳」です。
age = 20if age >= 18:
print("成人です")
else:
print("未成年です")
重要：
Pythonはインデント（字下げ）が命です。
スペース4つがルール。
5. 繰り返し（for）
ゲームや自動化で必須です。
for i in range(5):
print(i)
結果
0
1
2
3
4
これが出来ると
・敵を5体出す
・ファイルを100個処理
が可能になります。
6. リスト（配列）
データをまとめて管理します。
fruits = ["りんご", "みかん", "バナナ"]print(fruits[0])
print(fruits[1])
※ 0 から始まるのが超重要（初心者が必ずつまずく所）
7. 関数（自分の命令を作る）
これができると一気にプログラマになります。
def greet():
print("こんにちは！")greet()
引数付き：
def greet(name):
print(name + "さん、こんにちは")greet("ユウヘイ")
ここまで出来たら何が出来る？
あなた向けに言うと ↓
- UE用のツール自動生成
- AI画像の一括生成
- 小説の自動整形
- RSS収集ボット
- 作業の自動化（在宅ワークの効率化）
つまり
ゲーム制作の補助AIツールを自作できる段階に入ります。
次にやるべき練習（超重要）
まずこれだけ作ってください：
練習課題
「ランダムでメッセージを出すプログラム」
ヒント：
import random
作れたら、一気に“プログラミングが分かった側”に入ります。
分からなければ、途中まで書いて送ってください。そこから一緒に直します。