{"id":25991,"date":"2025-05-07T08:00:25","date_gmt":"2025-05-06T23:00:25","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25991"},"modified":"2025-05-07T08:00:27","modified_gmt":"2025-05-06T23:00:27","slug":"z","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25991","title":{"rendered":"Z"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<title>Z \u2013 \u6b21\u4e16\u4ee3\u30bd\u30fc\u30b7\u30e3\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af<\/title>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/aframe\/1.5.0\/aframe.min.js\"><\/script>\n<style>\n:root{\n  --primary:#1DA1F2;--background:#fff;--text:#000;--border:#E1E8ED;--card:#F7F9F9;--danger:#E0245E;\n}\n[data-theme=\"dark\"]{--background:#15202B;--text:#fff;--border:#38444D;--card:#192734}\n*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}\nbody{background:var(--background);color:var(--text);min-height:100vh;transition:.3s}\n.hidden{display:none}\n.wrapper{max-width:640px;margin-inline:auto;padding:20px}\n.timeline{margin-top:2rem}\n.timeline-item{background:var(--card);border-radius:12px;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 6px rgba(0,0,0,.05)}\n.timeline-item h3{margin:0 0 .5rem;font-size:1.1rem}\n.timeline-item p{margin:0;white-space:pre-wrap;line-height:1.4}\n.timeline-item small{display:block;margin-top:.5rem;font-size:.75rem;color:var(--border)}\n.auth-box{background:var(--card);border-radius:12px;padding:1.5rem;margin-bottom:2rem}\n.auth-box input{padding:.75rem;border:1px solid var(--border);border-radius:8px;width:100%;margin-bottom:.5rem}\n.auth-box button{background:var(--primary);color:white;border:none;border-radius:8px;padding:.75rem;margin-top:.5rem;width:100%;cursor:pointer;font-weight:bold}\n.profile-edit{background:var(--card);padding:1rem;border-radius:12px;margin-bottom:2rem}\n.profile-edit h3{margin-bottom:.75rem}\n.profile-edit input{width:100%;margin:.5rem 0;padding:.5rem;border:1px solid var(--border);border-radius:8px}\n.follow-btn{background:#ccc;padding:.3rem .8rem;border-radius:8px;border:none;cursor:pointer;font-size:.85rem;margin-top:.5rem}\nimg.upload-preview{max-width:100px;border-radius:8px;margin-top:.5rem}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrapper\">\n  <div id=\"authBox\" class=\"auth-box\">\n    <h2>\u30ed\u30b0\u30a4\u30f3 \/ \u767b\u9332<\/h2>\n    <input type=\"email\" id=\"email\" placeholder=\"\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\">\n    <input type=\"tel\" id=\"phone\" placeholder=\"\u96fb\u8a71\u756a\u53f7\">\n    <input type=\"password\" id=\"password\" placeholder=\"\u30d1\u30b9\u30ef\u30fc\u30c9\">\n    <input type=\"text\" id=\"username\" placeholder=\"\u30e6\u30fc\u30b6\u30fc\u540d\">\n    <button onclick=\"loginOrRegister()\">\u30ed\u30b0\u30a4\u30f3 \/ \u767b\u9332<\/button>\n  <\/div>\n  <div id=\"mainBox\" class=\"hidden\">\n    <h1 style=\"font-size:1.5rem;margin-bottom:1rem\">Z\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3<\/h1>\n    <div style=\"margin-bottom:1rem\">\u3088\u3046\u3053\u305d\u3001<span id=\"userEmail\"><\/span> \u3055\u3093\uff01<\/div>\n    <div class=\"profile-edit\">\n      <h3>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u7de8\u96c6<\/h3>\n      <input type=\"text\" id=\"editName\" placeholder=\"\u8868\u793a\u540d\u3092\u7de8\u96c6\">\n      <input type=\"text\" id=\"editBio\" placeholder=\"\u81ea\u5df1\u7d39\u4ecb\u3092\u7de8\u96c6\">\n      <button onclick=\"saveProfile()\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u4fdd\u5b58<\/button>\n    <\/div>\n    <form id=\"timelineForm\" style=\"display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem\">\n      <input id=\"timelineTitle\" type=\"text\" placeholder=\"\u30bf\u30a4\u30c8\u30eb\" required>\n      <textarea id=\"timelineContent\" placeholder=\"\u6295\u7a3f\u5185\u5bb9\" required style=\"min-height:100px\"><\/textarea>\n      <input type=\"file\" id=\"imageUpload\" accept=\"image\/*\">\n      <img id=\"preview\" class=\"upload-preview hidden\">\n      <button type=\"submit\">\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3\u306b\u6295\u7a3f<\/button>\n    <\/form>\n    <section id=\"timelineList\" class=\"timeline\"><\/section>\n    <button onclick=\"logout()\">\u30ed\u30b0\u30a2\u30a6\u30c8<\/button>\n  <\/div>\n<\/div>\n<div id=\"vrScene\" class=\"hidden\" style=\"position:fixed;inset:0;z-index:9999\"><\/div>\n<button id=\"vrBtn\" style=\"position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:1.3rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)\" onclick=\"enterVR()\"><i class=\"fa-brands fa-vr-cardboard\"><\/i><\/button>\n<script>\nlet timeline = JSON.parse(localStorage.getItem('z_timeline')||'[]');\nlet feeds = JSON.parse(localStorage.getItem('z_feeds')||'[]');\nlet currentUser = JSON.parse(localStorage.getItem('z_user')||'null');\nconst authBox = document.getElementById('authBox');\nconst mainBox = document.getElementById('mainBox');\nconst timelineForm = document.getElementById('timelineForm');\nconst timelineList = document.getElementById('timelineList');\nconst userEmailSpan = document.getElementById('userEmail');\nconst previewImg = document.getElementById('preview');\nconst imageUpload = document.getElementById('imageUpload');\nfunction loginOrRegister(){\n  const email = document.getElementById('email').value.trim();\n  const phone = document.getElementById('phone').value.trim();\n  const pass = document.getElementById('password').value;\n  const name = document.getElementById('username').value.trim();\n  if(!email || !pass || !name){ alert('\u30e1\u30fc\u30eb\u3001\u30d1\u30b9\u30ef\u30fc\u30c9\u3001\u30e6\u30fc\u30b6\u30fc\u540d\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044'); return; }\n  currentUser = {email, phone, name, bio:\"\", followers:[], following:[]};\n  localStorage.setItem('z_user', JSON.stringify(currentUser));\n  authBox.classList.add('hidden');\n  mainBox.classList.remove('hidden');\n  userEmailSpan.textContent = email;\n  renderTimeline();\n}\nfunction logout(){ localStorage.removeItem('z_user'); location.reload(); }\nfunction saveProfile(){\n  const name = document.getElementById('editName').value;\n  const bio = document.getElementById('editBio').value;\n  if(name) currentUser.name = name;\n  if(bio) currentUser.bio = bio;\n  localStorage.setItem('z_user', JSON.stringify(currentUser));\n  alert('\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u3092\u4fdd\u5b58\u3057\u307e\u3057\u305f');\n}\nfunction renderTimeline(){\n  if(!timeline.length){ timelineList.innerHTML = '<p style=\"color:var(--border)\">\u6295\u7a3f\u304c\u307e\u3060\u3042\u308a\u307e\u305b\u3093<\/p>'; return; }\n  timelineList.innerHTML = timeline.map((t, index)=>{\n    return `<div class=\"timeline-item\">\n      <h3>${t.title}<\/h3>\n      <p>${t.content}<\/p>\n      ${t.image ? `<img src=\"${t.image}\" style=\"max-width:100%;margin-top:.5rem;border-radius:8px\">` : ''}\n      <small>${new Date(t.created).toLocaleString()}<\/small>\n      <button onclick=\"followUser('${t.email}')\" class=\"follow-btn\">\u30d5\u30a9\u30ed\u30fc<\/button>\n      <button onclick=\"deletePost(${index})\" style=\"margin-top:.5rem;padding:.3rem .6rem;border:none;background:#eee;border-radius:6px;font-size:.8rem;cursor:pointer\">\u524a\u9664<\/button>\n    <\/div>`;\n  }).join('');\n}\nfunction followUser(email){\n  if(!currentUser.following.includes(email)){\n    currentUser.following.push(email);\n    localStorage.setItem('z_user', JSON.stringify(currentUser));\n    alert(`${email} \u3092\u30d5\u30a9\u30ed\u30fc\u3057\u307e\u3057\u305f`);\n  }\n}\nfunction deletePost(index){\n  if(confirm('\u3053\u306e\u6295\u7a3f\u3092\u524a\u9664\u3057\u307e\u3059\u304b\uff1f')){\n    timeline.splice(index,1);\n    localStorage.setItem('z_timeline', JSON.stringify(timeline));\n    renderTimeline();\n  }\n}\ntimelineForm.addEventListener('submit',e=>{\n  e.preventDefault();\n  const title = document.getElementById('timelineTitle').value.trim();\n  const content = document.getElementById('timelineContent').value.trim();\n  const file = imageUpload.files[0];\n  if(!title || !content) return;\n  const newPost = {title, content, image:null, created:new Date().toISOString(), email: currentUser.email};\n  if(file){\n    const reader = new FileReader();\n    reader.onload = ()=>{\n      newPost.image = reader.result;\n      timeline.unshift(newPost);\n      localStorage.setItem('z_timeline', JSON.stringify(timeline));\n      renderTimeline();\n    };\n    reader.readAsDataURL(file);\n  } else {\n    timeline.unshift(newPost);\n    localStorage.setItem('z_timeline', JSON.stringify(timeline));\n    renderTimeline();\n  }\n  timelineForm.reset();\n  previewImg.classList.add('hidden');\n});\nimageUpload.addEventListener('change',()=>{\n  const file = imageUpload.files[0];\n  if(file){\n    const reader = new FileReader();\n    reader.onload = ()=>{\n      previewImg.src = reader.result;\n      previewImg.classList.remove('hidden');\n    };\n    reader.readAsDataURL(file);\n  }\n});\nfunction botAutoPost(){\n  const phrases = ['\u3053\u3093\u306b\u3061\u306f\uff01', '\u4eca\u65e5\u3082\u9811\u5f35\u308d\u3046\uff01', 'Z\u3078\u3088\u3046\u3053\u305d\uff01'];\n  const msg = phrases[Math.floor(Math.random()*phrases.length)];\n  timeline.unshift({title:'BOT\u6295\u7a3f', content:msg, image:null, created:new Date().toISOString(), email:'bot@z.jp'});\n  localStorage.setItem('z_timeline', JSON.stringify(timeline));\n  renderTimeline();\n}\nsetInterval(botAutoPost, 60000);\nfunction fetchFeed(url){\n  fetch(`https:\/\/api.rss2json.com\/v1\/api.json?rss_url=${encodeURIComponent(url)}`)\n    .then(res=>res.json())\n    .then(data=>{\n      if(!data.items) return;\n      data.items.slice(0,3).forEach(item=>{\n        timeline.unshift({title:item.title, content:item.link, image:null, created:new Date().toISOString(), email:data.feed.title});\n      });\n      localStorage.setItem('z_timeline', JSON.stringify(timeline));\n      renderTimeline();\n    }).catch(e=>console.error('feed error',e));\n}\nfeeds.forEach(fetchFeed);\nfunction enterVR(){\n  document.getElementById('vrScene').innerHTML = `\n    <a-scene embedded>\n      <a-sky color=\"#ECECEC\"><\/a-sky>\n      ${timeline.slice(0,10).map((p,i)=>`<a-entity text=\"value:${p.title}: ${p.content.replace(\/\\n\/g,' ')};wrapCount:30\" position=\"0 ${3-i*1.5} -3\"><\/a-entity>`).join('')}\n      <a-camera position=\"0 1.6 0\"><\/a-camera>\n    <\/a-scene>`;\n  document.getElementById('vrScene').classList.remove('hidden');\n  document.getElementById('vrBtn').classList.add('hidden');\n}\ndocument.addEventListener('keydown',e=>{\n  if(e.key==='Escape' && !document.getElementById('vrScene').classList.contains('hidden')){\n    document.getElementById('vrScene').classList.add('hidden');\n    document.getElementById('vrBtn').classList.remove('hidden');\n    document.getElementById('vrScene').innerHTML='';\n  }\n});\nif(currentUser){\n  authBox.classList.add('hidden');\n  mainBox.classList.remove('hidden');\n  userEmailSpan.textContent = currentUser.email;\n  renderTimeline();\n}\n<\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[4,6,87],"tags":[3],"class_list":{"0":"post-25991","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-programming","7":"category-web","9":"tag-programming"},"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25991","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25991"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25991\/revisions"}],"predecessor-version":[{"id":25992,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25991\/revisions\/25992"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25991"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}