{"id":26111,"date":"2025-07-21T06:23:34","date_gmt":"2025-07-20T21:23:34","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26111"},"modified":"2025-07-21T06:23:36","modified_gmt":"2025-07-20T21:23:36","slug":"verse-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26111","title":{"rendered":"Verse.html"},"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.0\">\n    <title>Verse - \u6b21\u4e16\u4ee3\u30bd\u30fc\u30b7\u30e3\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\">\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/rita\/1.3.63\/rita-full.min.js\"><\/script>\n    <style>\n        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f0f0f0; }\n        header, .footer { background: linear-gradient(45deg, #6a11cb, #2575fc); color: white; text-align: center; padding: 20px; }\n        .nav-container { background: #2575fc; display: flex; justify-content: center; padding: 10px; position: sticky; top: 0; }\n        .nav-menu a { color: white; text-decoration: none; margin: 0 10px; }\n        .content { max-width: 900px; margin: 20px auto; background: white; padding: 20px; border-radius: 8px; }\n        .cta-button { background: #2575fc; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }\n        .profile-icon { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }\n        .dark-mode { background: #1e1e1e; color: #ddd; }\n        .timeline { margin-top: 20px; }\n        .timeline-post { border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin-bottom: 10px; background: #fff; }\n        .post-controls { display: flex; gap: 10px; }\n        .search-box { width: 100%; margin-bottom: 10px; }\n    <\/style>\n    <script>\n        let posts = JSON.parse(localStorage.getItem('posts') || '[]');\n        let feedUrls = JSON.parse(localStorage.getItem('feedUrls') || '[]');\n        let botInterval = null;\n        let feedInterval = null;\n\n        function saveData() {\n            localStorage.setItem('posts', JSON.stringify(posts));\n            localStorage.setItem('feedUrls', JSON.stringify(feedUrls));\n        }\n\n        function createPost(content) {\n            posts.unshift({ content: content, likes: 0 });\n            saveData();\n            renderTimeline();\n        }\n\n        function createUserPost() {\n            const content = document.getElementById('postContent').value.trim();\n            if(content) {\n                createPost(content);\n                document.getElementById('postContent').value = '';\n            }\n        }\n\n        function likePost(index) {\n            posts[index].likes++;\n            saveData();\n            renderTimeline();\n        }\n\n        function deletePost(index) {\n            posts.splice(index, 1);\n            saveData();\n            renderTimeline();\n        }\n\n        function searchPosts() {\n            const query = document.getElementById('searchInput').value.trim().toLowerCase();\n            renderTimeline(query);\n        }\n\n        function renderTimeline(filter = '') {\n            const container = document.getElementById('timeline');\n            container.innerHTML = '';\n            posts.filter(post => post.content.toLowerCase().includes(filter)).forEach((post, index) => {\n                const postDiv = document.createElement('div');\n                postDiv.className = 'timeline-post';\n                postDiv.innerHTML = `\n                    <p>${post.content}<\/p>\n                    <div class='post-controls'>\n                        <button class='btn btn-sm btn-primary' onclick='likePost(${index})'>\u2764\ufe0f \u3044\u3044\u306d (${post.likes})<\/button>\n                        <button class='btn btn-sm btn-danger' onclick='deletePost(${index})'>\ud83d\uddd1\ufe0f \u524a\u9664<\/button>\n                    <\/div>\n                `;\n                container.appendChild(postDiv);\n            });\n        }\n\n        function toggleDarkMode() {\n            document.body.classList.toggle('dark-mode');\n        }\n\n        function uploadProfileIcon(event) {\n            const file = event.target.files[0];\n            if(file) {\n                const reader = new FileReader();\n                reader.onload = function(e) {\n                    document.getElementById('profile-icon').src = e.target.result;\n                    showTimeline();\n                };\n                reader.readAsDataURL(file);\n            }\n        }\n\n        function showTimeline() {\n            document.getElementById('profile-section').style.display = 'none';\n            document.getElementById('post-section').style.display = 'block';\n            document.getElementById('timeline').style.display = 'block';\n        }\n\n        function showProfile() {\n            document.getElementById('profile-section').style.display = 'block';\n            document.getElementById('post-section').style.display = 'none';\n            document.getElementById('timeline').style.display = 'none';\n        }\n\n        function postBotMessage() {\n            const content = document.getElementById('botContent').value.trim();\n            if(content) {\n                createPost(`\ud83e\udd16 BOT: ${content}`);\n                document.getElementById('botContent').value = '';\n            }\n        }\n\n        function generateMarkovText() {\n            const combinedText = posts.map(p => p.content).join(' ');\n            if(combinedText.length < 20) return \"BOT\u306e\u6295\u7a3f\u30c7\u30fc\u30bf\u304c\u4e0d\u8db3\u3057\u3066\u3044\u307e\u3059\u3002\";\n\n            const markov = new RiTa.Markov(3);\n            markov.addText(combinedText);\n            const sentences = markov.generate(1);\n            return sentences[0] ? sentences[0] : \"\u81ea\u7136\u306a\u6587\u7ae0\u306e\u751f\u6210\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\";\n        }\n\n        function postMarkovBot() {\n            const text = generateMarkovText();\n            createPost(`\ud83e\udd16 MarkovBOT: ${text}`);\n        }\n\n        function startBotAutoPost(intervalSec) {\n            if(botInterval) clearInterval(botInterval);\n            botInterval = setInterval(postMarkovBot, intervalSec * 1000);\n            alert(`\u30de\u30eb\u30b3\u30d5\u9023\u9396BOT\u306e\u81ea\u52d5\u6295\u7a3f\u9593\u9694\u3092${intervalSec}\u79d2\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002`);\n        }\n\n        function registerFeedUrl() {\n            const url = document.getElementById('feedUrl').value.trim();\n            if(url) {\n                feedUrls.push(url);\n                saveData();\n                alert('RSS\u30d5\u30a3\u30fc\u30c9URL\u3092\u767b\u9332\u3057\u307e\u3057\u305f\u3002');\n                document.getElementById('feedUrl').value = '';\n            }\n        }\n\n        async function fetchAllFeeds() {\n            for(const url of feedUrls) {\n                try {\n                    const response = await fetch(`https:\/\/api.rss2json.com\/v1\/api.json?rss_url=${encodeURIComponent(url)}`);\n                    const data = await response.json();\n                    data.items.forEach(item => {\n                        createPost(`\ud83d\udce1 FEED: ${item.title} - ${item.link}`);\n                    });\n                } catch (error) {\n                    console.error('RSS\u30d5\u30a3\u30fc\u30c9\u53d6\u5f97\u30a8\u30e9\u30fc:', error);\n                }\n            }\n        }\n\n        function startFeedAutoPost(intervalSec) {\n            if(feedInterval) clearInterval(feedInterval);\n            feedInterval = setInterval(fetchAllFeeds, intervalSec * 1000);\n            alert(`RSS\u30d5\u30a3\u30fc\u30c9\u306e\u81ea\u52d5\u6295\u7a3f\u9593\u9694\u3092${intervalSec}\u79d2\u306b\u8a2d\u5b9a\u3057\u307e\u3057\u305f\u3002`);\n        }\n\n        window.onload = function() {\n            renderTimeline();\n        };\n    <\/script>\n<\/head>\n<body>\n    <header>\n        <h1>Verse<\/h1>\n        <button class=\"cta-button\" onclick=\"toggleDarkMode()\">\ud83c\udf19 \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5207\u66ff<\/button>\n    <\/header>\n\n    <div class=\"nav-container\">\n        <div class=\"nav-menu\">\n            <a href=\"#\" onclick=\"showTimeline()\">\u30db\u30fc\u30e0<\/a>\n            <a href=\"#\" onclick=\"showProfile()\">\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/a>\n        <\/div>\n    <\/div>\n\n    <div class=\"content\">\n        <section id=\"profile-section\" style=\"display:none;\">\n            <h2>\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb<\/h2>\n            <img id=\"profile-icon\" src=\"https:\/\/via.placeholder.com\/80\" alt=\"\u30d7\u30ed\u30d5\u30a3\u30fc\u30eb\u30a2\u30a4\u30b3\u30f3\" class=\"profile-icon\"><br><br>\n            <input type=\"file\" accept=\"image\/*\" onchange=\"uploadProfileIcon(event)\">\n        <\/section>\n\n        <section id=\"post-section\">\n            <h2>\u65b0\u898f\u6295\u7a3f<\/h2>\n            <textarea id=\"postContent\" class=\"form-control\" placeholder=\"\u3044\u307e\u4f55\u3057\u3066\u308b\uff1f\"><\/textarea><br>\n            <button class=\"cta-button\" onclick=\"createUserPost()\">\u6295\u7a3f<\/button>\n\n            <h2>BOT\u6295\u7a3f\u767b\u9332<\/h2>\n            <textarea id=\"botContent\" class=\"form-control\" placeholder=\"BOT\u306b\u6295\u7a3f\u3055\u305b\u305f\u3044\u5185\u5bb9\"><\/textarea><br>\n            <button class=\"cta-button\" onclick=\"postBotMessage()\">BOT\u6295\u7a3f\u767b\u9332<\/button><br><br>\n\n            <input type=\"number\" id=\"botIntervalSec\" placeholder=\"BOT\u306e\u81ea\u52d5\u6295\u7a3f\u9593\u9694(\u79d2)\">\n            <button class=\"cta-button\" onclick=\"startBotAutoPost(parseInt(document.getElementById('botIntervalSec').value))\">\u30de\u30eb\u30b3\u30d5\u9023\u9396 \u81ea\u52d5\u6295\u7a3f\u958b\u59cb<\/button><br><br>\n\n            <h2>RSS\u30d5\u30a3\u30fc\u30c9\u767b\u9332<\/h2>\n            <input type=\"text\" id=\"feedUrl\" class=\"form-control\" placeholder=\"RSS\u30d5\u30a3\u30fc\u30c9\u306eURL\"><br>\n            <button class=\"cta-button\" onclick=\"registerFeedUrl()\">\u30d5\u30a3\u30fc\u30c9\u767b\u9332<\/button><br><br>\n\n            <input type=\"number\" id=\"feedIntervalSec\" placeholder=\"RSS\u81ea\u52d5\u6295\u7a3f\u9593\u9694(\u79d2)\">\n            <button class=\"cta-button\" onclick=\"startFeedAutoPost(parseInt(document.getElementById('feedIntervalSec').value))\">RSS \u81ea\u52d5\u6295\u7a3f\u958b\u59cb<\/button>\n        <\/section>\n\n        <input type=\"text\" id=\"searchInput\" class=\"form-control search-box\" placeholder=\"\u6295\u7a3f\u3092\u691c\u7d22...\" onkeyup=\"searchPosts()\">\n\n        <section id=\"timeline\" class=\"timeline\"><\/section>\n    <\/div>\n\n    <div class=\"footer\">&copy; 2025 Verse - \u65b0\u3057\u3044\u3064\u306a\u304c\u308a\u3092\u5275\u9020\u3059\u308b<\/div>\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":[80,87],"tags":[3],"class_list":["post-26111","post","type-post","status-publish","format-standard","hentry","category-html","category-web","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26111","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=26111"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26111\/revisions"}],"predecessor-version":[{"id":26112,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26111\/revisions\/26112"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26111"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}