<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verse - 次世代ソーシャルネットワーク VR対応</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rita/1.3.63/rita-full.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; }
header, .footer { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; text-align: center; padding: 20px; }
.nav-container { background: #2575fc; display: flex; justify-content: center; padding: 10px; position: sticky; top: 0; }
.nav-menu a { color: white; text-decoration: none; margin: 0 10px; }
.content { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; }
.cta-button { background: #2575fc; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
.profile-icon { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.dark-mode { background: #1e1e1e; color: #ddd; }
.timeline { margin-top: 20px; }
.timeline-post { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fff; }
canvas { border: 1px solid #ccc; }
</style>
<script>
let posts = JSON.parse(localStorage.getItem('posts') || '[]');
function saveData() {
localStorage.setItem('posts', JSON.stringify(posts));
}
function createPost(content) {
posts.unshift({ content: content, likes: 0 });
saveData();
renderTimeline();
}
function renderTimeline() {
const container = document.getElementById('timeline');
container.innerHTML = '';
posts.forEach((post, index) => {
container.innerHTML += `<div class='timeline-post'><p>${post.content}</p></div>`;
});
}
function toggleVR() {
if (!navigator.xr) {
alert('WebXRがサポートされていません。');
return;
}
navigator.xr.requestSession('immersive-vr').then(session => {
const vrCanvas = document.createElement('canvas');
vrCanvas.width = window.innerWidth;
vrCanvas.height = window.innerHeight;
vrCanvas.style.width = '100vw';
vrCanvas.style.height = '100vh';
vrCanvas.style.position = 'fixed';
vrCanvas.style.top = 0;
vrCanvas.style.left = 0;
vrCanvas.style.background = 'black';
document.body.appendChild(vrCanvas);
const ctx = vrCanvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('VRモード：仮想空間に没入中', 50, 100);
drawVREnvironment(ctx);
loadUnityAsset(ctx);
loadUnrealAsset(ctx);
session.end().then(() => {
document.body.removeChild(vrCanvas);
});
}).catch(err => {
alert('VRセッションの開始に失敗しました。');
console.error(err);
});
}
function drawVREnvironment(ctx) {
ctx.fillStyle = '#0f0';
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = '#f00';
ctx.fillRect(300, 150, 100, 100);
ctx.fillStyle = 'cyan';
ctx.font = '20px Arial';
ctx.fillText('仮想オブジェクト: 球体と立方体', 50, 300);
}
function loadUnityAsset(ctx) {
ctx.fillStyle = 'yellow';
ctx.font = '20px Arial';
ctx.fillText('Unityアセット読み込み: キャラクター', 50, 350);
}
function loadUnrealAsset(ctx) {
ctx.fillStyle = 'orange';
ctx.font = '20px Arial';
ctx.fillText('Unreal Engineアセット読み込み: シーン', 50, 400);
}
function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
}
window.onload = renderTimeline;
</script>
</head>
<body>
<header>
<h1>Verse VR SNS</h1>
<button class="cta-button" onclick="toggleVR()">🎮 VRモード</button>
<button class="cta-button" onclick="toggleDarkMode()">🌙 ダークモード</button>
</header>
<div class="nav-container">
<div class="nav-menu">
<a href="#" onclick="renderTimeline()">ホーム</a>
</div>
</div>
<div class="content">
<h2>新規投稿</h2>
<textarea id="postContent" class="form-control" placeholder="いま何してる？"></textarea><br>
<button class="cta-button" onclick="createPost(document.getElementById('postContent').value)">投稿</button>
<section id="timeline" class="timeline"></section>
</div>
<div class="footer">© 2025 Verse VR SNS</div>
</body>
</html>
