{"id":25830,"date":"2025-01-31T17:42:49","date_gmt":"2025-01-31T08:42:49","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25830"},"modified":"2025-01-31T17:42:50","modified_gmt":"2025-01-31T08:42:50","slug":"automation-studio","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25830","title":{"rendered":"Automation Studio"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    &lt;title>Automation Studio&lt;\/title>\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n    &lt;style>\n        :root {\n            --primary-color: #00c7b7;\n            --secondary-color: #2d3436;\n            --background-color: #f8f9fa;\n            --card-shadow: 0 4px 6px rgba(0,0,0,0.1);\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n            font-family: 'Segoe UI', system-ui;\n        }\n\n        body {\n            background: var(--background-color);\n            color: var(--secondary-color);\n        }\n\n        \/* \u30d8\u30c3\u30c0\u30fc *\/\n        .dashboard-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding: 1.5rem;\n            background: white;\n            box-shadow: var(--card-shadow);\n        }\n\n        .brand {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n        }\n\n        .brand-logo {\n            width: 40px;\n            height: 40px;\n        }\n\n        \/* \u30e1\u30a4\u30f3\u30b3\u30f3\u30c6\u30f3\u30c4 *\/\n        .main-container {\n            max-width: 1200px;\n            margin: 2rem auto;\n            padding: 0 1rem;\n        }\n\n        \/* \u30a2\u30d7\u30ec\u30c3\u30c8\u30ab\u30fc\u30c9 *\/\n        .applet-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n            gap: 1.5rem;\n            margin-top: 2rem;\n        }\n\n        .applet-card {\n            background: white;\n            border-radius: 12px;\n            padding: 1.5rem;\n            box-shadow: var(--card-shadow);\n            transition: transform 0.2s;\n            position: relative;\n        }\n\n        .applet-card:hover {\n            transform: translateY(-5px);\n        }\n\n        .applet-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 1rem;\n        }\n\n        .toggle-switch {\n            position: relative;\n            display: inline-block;\n            width: 48px;\n            height: 24px;\n        }\n\n        .toggle-slider {\n            position: absolute;\n            cursor: pointer;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background-color: #ccc;\n            transition: .4s;\n            border-radius: 34px;\n        }\n\n        .toggle-slider:before {\n            position: absolute;\n            content: \"\";\n            height: 16px;\n            width: 16px;\n            left: 4px;\n            bottom: 4px;\n            background-color: white;\n            transition: .4s;\n            border-radius: 50%;\n        }\n\n        input:checked + .toggle-slider {\n            background-color: var(--primary-color);\n        }\n\n        input:checked + .toggle-slider:before {\n            transform: translateX(24px);\n        }\n\n        .service-flow {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n            margin: 1.5rem 0;\n        }\n\n        .service-icon {\n            width: 48px;\n            height: 48px;\n            border-radius: 12px;\n            padding: 8px;\n            box-shadow: var(--card-shadow);\n        }\n\n        .divider-arrow {\n            flex-grow: 1;\n            border-top: 2px dashed #ddd;\n            position: relative;\n        }\n\n        .divider-arrow::after {\n            content: \"\u2794\";\n            position: absolute;\n            right: -10px;\n            top: -12px;\n            background: white;\n            padding: 0 4px;\n            color: var(--primary-color);\n        }\n\n        \/* \u4f5c\u6210\u30e2\u30fc\u30c0\u30eb *\/\n        .modal-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0,0,0,0.5);\n            display: none;\n            align-items: center;\n            justify-content: center;\n            z-index: 1000;\n        }\n\n        .modal-content {\n            background: white;\n            border-radius: 16px;\n            width: 90%;\n            max-width: 600px;\n            max-height: 90vh;\n            overflow-y: auto;\n            padding: 2rem;\n            animation: modalSlideIn 0.3s ease-out;\n        }\n\n        @keyframes modalSlideIn {\n            from { transform: translateY(20px); opacity: 0; }\n            to { transform: translateY(0); opacity: 1; }\n        }\n\n        .service-picker {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 1rem;\n            margin: 2rem 0;\n        }\n\n        .service-option {\n            text-align: center;\n            padding: 1rem;\n            border: 2px solid #eee;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s;\n        }\n\n        .service-option:hover {\n            border-color: var(--primary-color);\n            background: #f7f7f7;\n        }\n\n        .service-option img {\n            width: 64px;\n            height: 64px;\n            margin-bottom: 0.5rem;\n        }\n\n        \/* \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3 *\/\n        @media (max-width: 768px) {\n            .applet-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .service-picker {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n    &lt;header class=\"dashboard-header\">\n        &lt;div class=\"brand\">\n            &lt;img src=\"https:\/\/img.icons8.com\/color\/96\/automation.png\" class=\"brand-logo\" alt=\"Logo\">\n            &lt;h1>Automation Studio&lt;\/h1>\n        &lt;\/div>\n        &lt;button class=\"create-button\" onclick=\"openModal()\">\n            &lt;i class=\"fas fa-plus\">&lt;\/i> New Automation\n        &lt;\/button>\n    &lt;\/header>\n\n    &lt;div class=\"main-container\">\n        &lt;div class=\"applet-grid\">\n            &lt;!-- \u30a2\u30d7\u30ec\u30c3\u30c8\u304c\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059 -->\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;!-- \u4f5c\u6210\u30e2\u30fc\u30c0\u30eb -->\n    &lt;div class=\"modal-overlay\" id=\"modal\">\n        &lt;div class=\"modal-content\">\n            &lt;h2>Create New Automation&lt;\/h2>\n            &lt;div class=\"service-picker\" id=\"triggerServices\">\n                &lt;!-- \u30c8\u30ea\u30ac\u30fc\u30b5\u30fc\u30d3\u30b9\u304c\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059 -->\n            &lt;\/div>\n            \n            &lt;div class=\"service-picker\" id=\"actionServices\">\n                &lt;!-- \u30a2\u30af\u30b7\u30e7\u30f3\u30b5\u30fc\u30d3\u30b9\u304c\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059 -->\n            &lt;\/div>\n\n            &lt;div class=\"modal-actions\">\n                &lt;button class=\"btn-secondary\" onclick=\"closeModal()\">Cancel&lt;\/button>\n                &lt;button class=\"btn-primary\" onclick=\"createApplet()\">Create&lt;\/button>\n            &lt;\/div>\n        &lt;\/div>\n    &lt;\/div>\n\n    &lt;script>\n        \/\/ \u30c0\u30df\u30fc\u30c7\u30fc\u30bf\n        const services = {\n            triggers: &#91;\n                { id: 'email', name: 'Email', icon: 'https:\/\/img.icons8.com\/color\/96\/new-post.png' },\n                { id: 'calendar', name: 'Calendar', icon: 'https:\/\/img.icons8.com\/color\/96\/google-calendar.png' },\n                { id: 'weather', name: 'Weather', icon: 'https:\/\/img.icons8.com\/color\/96\/partly-cloudy-day.png' }\n            ],\n            actions: &#91;\n                { id: 'slack', name: 'Slack', icon: 'https:\/\/img.icons8.com\/color\/96\/slack.png' },\n                { id: 'drive', name: 'Google Drive', icon: 'https:\/\/img.icons8.com\/color\/96\/google-drive.png' },\n                { id: 'notification', name: 'Notification', icon: 'https:\/\/img.icons8.com\/color\/96\/appointment-reminders.png' }\n            ]\n        };\n\n        \/\/ \u30e2\u30fc\u30c0\u30eb\u5236\u5fa1\n        function openModal() {\n            document.getElementById('modal').style.display = 'flex';\n            populateServices();\n        }\n\n        function closeModal() {\n            document.getElementById('modal').style.display = 'none';\n        }\n\n        \/\/ \u30b5\u30fc\u30d3\u30b9\u306e\u8868\u793a\n        function populateServices() {\n            const triggerContainer = document.getElementById('triggerServices');\n            const actionContainer = document.getElementById('actionServices');\n\n            triggerContainer.innerHTML = services.triggers.map(service => `\n                &lt;div class=\"service-option\" onclick=\"selectTrigger('${service.id}')\">\n                    &lt;img src=\"${service.icon}\" alt=\"${service.name}\">\n                    &lt;div>${service.name}&lt;\/div>\n                &lt;\/div>\n            `).join('');\n\n            actionContainer.innerHTML = services.actions.map(service => `\n                &lt;div class=\"service-option\" onclick=\"selectAction('${service.id}')\">\n                    &lt;img src=\"${service.icon}\" alt=\"${service.name}\">\n                    &lt;div>${service.name}&lt;\/div>\n                &lt;\/div>\n            `).join('');\n        }\n\n        \/\/ \u30a2\u30d7\u30ec\u30c3\u30c8\u4f5c\u6210\n        let selectedTrigger = null;\n        let selectedAction = null;\n\n        function selectTrigger(serviceId) {\n            selectedTrigger = services.triggers.find(s => s.id === serviceId);\n            updateSelections();\n        }\n\n        function selectAction(serviceId) {\n            selectedAction = services.actions.find(s => s.id === serviceId);\n            updateSelections();\n        }\n\n        function updateSelections() {\n            document.querySelectorAll('.service-option').forEach(el => {\n                el.style.borderColor = '#eee';\n            });\n            \n            if (selectedTrigger) {\n                const triggerEl = document.querySelector(`&#91;onclick=\"selectTrigger('${selectedTrigger.id}')\"]`);\n                triggerEl.style.borderColor = 'var(--primary-color)';\n            }\n\n            if (selectedAction) {\n                const actionEl = document.querySelector(`&#91;onclick=\"selectAction('${selectedAction.id}')\"]`);\n                actionEl.style.borderColor = 'var(--primary-color)';\n            }\n        }\n\n        function createApplet() {\n            if (!selectedTrigger || !selectedAction) return;\n\n            const appletGrid = document.querySelector('.applet-grid');\n            const newApplet = document.createElement('div');\n            newApplet.className = 'applet-card';\n            newApplet.innerHTML = `\n                &lt;div class=\"applet-header\">\n                    &lt;h3>${selectedTrigger.name} \u2192 ${selectedAction.name}&lt;\/h3>\n                    &lt;label class=\"toggle-switch\">\n                        &lt;input type=\"checkbox\">\n                        &lt;span class=\"toggle-slider\">&lt;\/span>\n                    &lt;\/label>\n                &lt;\/div>\n                &lt;div class=\"service-flow\">\n                    &lt;img src=\"${selectedTrigger.icon}\" class=\"service-icon\">\n                    &lt;div class=\"divider-arrow\">&lt;\/div>\n                    &lt;img src=\"${selectedAction.icon}\" class=\"service-icon\">\n                &lt;\/div>\n                &lt;p>Last triggered: Never&lt;\/p>\n            `;\n\n            appletGrid.appendChild(newApplet);\n            closeModal();\n            selectedTrigger = null;\n            selectedAction = null;\n        }\n\n        \/\/ \u30e2\u30fc\u30c0\u30eb\u5916\u3092\u30af\u30ea\u30c3\u30af\u3067\u9589\u3058\u308b\n        window.onclick = function(event) {\n            if (event.target.classList.contains('modal-overlay')) {\n                closeModal();\n            }\n        }\n    &lt;\/script>\n&lt;\/body>\n&lt;\/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],"tags":[3],"class_list":["post-25830","post","type-post","status-publish","format-standard","hentry","category-html","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25830","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=25830"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25830\/revisions"}],"predecessor-version":[{"id":25831,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25830\/revisions\/25831"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25830"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}