{"id":3505,"date":"2022-10-24T13:59:50","date_gmt":"2022-10-24T04:59:50","guid":{"rendered":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/?page_id=3505"},"modified":"2025-11-10T15:44:23","modified_gmt":"2025-11-10T06:44:23","slug":"%e9%a3%9f%e7%89%a9%e3%82%a2%e3%83%ac%e3%83%ab%e3%82%ae%e3%83%bc%e3%81%ae%e6%ad%a3%e3%81%97%e3%81%84%e7%9f%a5%e8%ad%98%e3%81%a8%e6%b2%bb%e7%99%82%e3%81%ae%e8%a9%b1","status":"publish","type":"page","link":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/%e9%a3%9f%e7%89%a9%e3%82%a2%e3%83%ac%e3%83%ab%e3%82%ae%e3%83%bc%e3%81%ae%e6%ad%a3%e3%81%97%e3%81%84%e7%9f%a5%e8%ad%98%e3%81%a8%e6%b2%bb%e7%99%82%e3%81%ae%e8%a9%b1","title":{"rendered":"\u98df\u7269\u30a2\u30ec\u30eb\u30ae\u30fc\u306e\u6b63\u3057\u3044\u77e5\u8b58\u3068\u6cbb\u7642\u306e\u8a71"},"content":{"rendered":"\n\n\n<div id=\"app1\"><\/div>\n\n    <div id=\"app2\"><\/div>\n\n    <div id=\"video_screen\"><\/div>\n\n    <div id=\"backscreen\"><\/div>\n\n    <style>\n        h1, section {\n            display: inline;\n        }\n\n        .page_title {\n            font-size: xx-large;\n            text-align: center;\n            margin: 20px 0;\n        }\n\n        .article_title {\n        }\n\n        #backscreen {\n            background-color: gray;\n            opacity: 0.5;\n            visibility: hidden;\n            width: 100%;\n            height: auto;\n            position: fixed;\n            left: 0;\n            top: 0;\n            z-index: 10;\n        }\n\n        .menu_container {\n            margin-bottom: 30px;\n        }\n\n        .menu_item_panel {\n            text-align: center;\n            display: inline-block;\n            padding: 15px;\n            margin: 10px;\n            background-color: antiquewhite;\n            width: 90%;\n            cursor: pointer;\n            border-radius: 10px;\n            font-size: 18px;\n        }\n\n        .menu_item_frame {\n            text-align: center;\n            display: inline-block;\n            padding-bottom: 10px;\n            margin-right: 20px;\n            width: 100%;\n        }\n\n        #video_player {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 640px;\n            height: 480px;\n            z-index: 20;\n        }\n    <\/style>\n\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2\/dist\/vue.js\"><\/script>\n\n    <script>\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n        \/\/ \u95a2\u6570\u5b9a\u7fa9\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n        \/\/ \u52d5\u753b\u80cc\u666f\u3092\u30ea\u30b5\u30a4\u30ba\u3059\u308b\n        function resizeBackscreen () {\n            let el = document.getElementById(\"backscreen\");\n\n            if (el.style.visibility == \"visible\") {\n                el.style.width = document.documentElement.clientWidth + \"px\";\n                el.style.height = document.documentElement.clientHeight + \"px\";\n                \/\/el.innerHTML = el.style.width + \"<br>\" + el.style.height;\n            }\n        }\n\n        \/\/ \u52d5\u753b\u3092\u753b\u9762\u4e2d\u592e\u306b\u914d\u7f6e\u3055\u305b\u308b\n        function centeringVideo() {\n            let bs = document.getElementById(\"backscreen\");\n            let vp = document.getElementById(\"video_player\");\n            vp.style.left = (bs.clientWidth \/ 2) - (vp.clientWidth \/ 2) + \"px\";\n            vp.style.top = (bs.clientHeight \/ 2) - (vp.clientHeight \/2) + window.pageYOffset + \"px\";\n        }\n\n        \/\/ \u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u30ea\u30b5\u30a4\u30ba\u3055\u308c\u305f\u3068\u304d\u306e\u30a4\u30d9\u30f3\u30c8\n        window.addEventListener(\"resize\", function () {\n            \/\/ \u80cc\u666f\u306e\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3057\u3001\n            resizeBackscreen();\n            \/\/ \u753b\u9762\u4e2d\u592e\u306b\u52d5\u753b\u3092\u914d\u7f6e\u3055\u305b\u308b\u3002\n            centeringVideo();\n        })\n\n        window.addEventListener(\"scroll\", function () {\n            centeringVideo();\n        });\n\n        \/\/ \u52d5\u753b\u80cc\u666f\u304cvisible\u306b\u306a\u3063\u305f\u3068\u304d\u306e\u51e6\u7406\n        function visibleBackscreen() {\n            let el = document.getElementById(\"backscreen\");\n            el.style.width = document.documentElement.clientWidth + \"px\";\n            el.style.height = document.documentElement.clientHeight + \"px\";\n            el.style.visibility = \"visible\";\n\n            centeringVideo();\n\n            \/\/ \u7070\u8272\u306e\u80cc\u666f\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3089\u3001\u52d5\u753b\u3092\u505c\u6b62\u3055\u305b\u3001\u80cc\u666f\u3068\u52d5\u753b\u3092\u975e\u8868\u793a\u306b\u3059\u308b\n            el.addEventListener(\"click\", function() {\n                hiddenBackscreen();\n\n                videoPlayer.hidden();\n                videoPlayer.pause();\n            })\n        }\n\n        \/\/ \u52d5\u753b\u80cc\u666f\u3092\u96a0\u3059\n        function hiddenBackscreen() {\n            let el = document.getElementById(\"backscreen\");\n            el.style.visibility = \"hidden\";\n        }\n\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n        \/\/ Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5b9a\u7fa9\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n        \/\/ \u30d3\u30c7\u30aa\u5236\u5fa1\u7528\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n        const videoPlayer = new Vue({\n            data: {\n                video_name: \"\",     \/\/ \u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u540d\n            },\n            mounted: function() {\n                \/\/ \u30de\u30a6\u30f3\u30c8\u3057\u305f\u3089\u753b\u9762\u4e2d\u592e\u306b\u52d5\u753b\u3092\u914d\u7f6e\n                let el = document.getElementById(\"video_player\");\n                el.addEventListener(\"loadedmetadata\", function() {\n                    centeringVideo();\n                });\n\n                el.style.width = \"640px\";\n                el.style.height = \"480px\";\n                el.style.visibility = \"hidden\";\n            },\n            methods: {\n                setVideoName: function(name) { this.video_name =  \"..\/video\/\" + name; },\n                getVideoName: function() { return this.video_name; },\n\n                visible: function() {\n                    let el = document.getElementById(\"video_player\");\n                    el.style.visibility = \"visible\";\n                },\n                hidden: function() {\n                    let el = document.getElementById(\"video_player\");\n                    el.style.visibility = \"hidden\";\n                },\n\n                play: function(tm) {\n                    if (!this.video_name.length) { return; }\n\n                    el = document.getElementById(\"video_player\");\n\n                    el.src = this.getVideoName();\n                    el.style.height = \"640px\";\n                    \/\/el.currentTime = tm;\n\n                    el.play();\n                },\n                pause: function () {\n                    el = document.getElementById(\"video_player\");\n                    el.pause();\n                }\n            },\n            template: '<div><video id=\"video_player\" oncontextmenu=\"return false;\" disablePictureInPicture controls><source id=\"source_video\" :src=\"video_name\" type=\"video\/mp4\"><\/video><\/div>',\n        }).$mount('#video_screen');\n\n        \/\/ \u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n        const MenuItem = {\n            name: 'menu_item',\n            props: ['item'],\n            methods: {\n                \/\/ \u30e1\u30cb\u30e5\u30fc\u9805\u76ee\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\n                click: function (event) {\n                    \/\/ \u80cc\u666f\u3092\u7070\u8272\u306b\u3059\u308b\n                    visibleBackscreen();\n\n                    \/\/ \u52d5\u753b\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u8a2d\u5b9a\u3057\u3001\u518d\u751f\n                    videoPlayer.setVideoName(this.item.value);\n                    videoPlayer.visible();\n                    videoPlayer.play(0);\n\n                    console.log(this.item.value);\n                },\n            },\n            template: '<div class=\"menu_item_frame\"><div class=\"menu_item_panel\" v-on:click=\"click\" :style=\"item.styleObj\"><section v-html=\"item.title\"><\/section><\/div><div v-html=\"item.index\"><\/div><\/div>'\n        };\n        Vue.component('menu_item', MenuItem);\n\n        \/\/ \u30e1\u30cb\u30e5\u30fc\u30b3\u30f3\u30c6\u30ca\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n        const MenuContainer = {\n            name: 'menu_container',\n            props: ['menu_items', 'title'],\n            template: '<div><span class=\"article_title\"><h2>{{ title }}<\/h2><\/span><article class=\"menu_container\"><menu_item v-for=\"item in menu_items\" :item=\"item\" :key=\"item.value\"><\/menu_item><\/article><\/div>'\n        };\n        Vue.component('menu_container', MenuContainer);\n\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n        \/\/ Vue\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5b9a\u7fa9\n        \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n        const app1 = new Vue({\n            data: {\n                title: \"\u8cb4\u9054 \u4fca\u5fb3\u5148\u751f\",\n                items: [\n                    {\n                        'title': '<span style=\"font-size: small;\">\uff08\u60a3\u8005\u69d8\u5411\u3051\uff09<\/span><br>\u98df\u7269\u30a2\u30ec\u30eb\u30ae\u30fc\u306e\u57fa\u790e\u77e5\u8b58',\n                        'value': 'kitatsu_3_20221025.mp4',\n                        'styleObj': {border: '#3aabd2 3px solid', backgroundColor: '#f3fafa'}, 'index': ''\n                    },\n                    {\n                        'title': '<span style=\"font-size: small;\">\uff08\u4fdd\u80b2\u5712\u30fb\u5e7c\u7a1a\u5712\u30fb\u5b66\u6821\u95a2\u4fc2\u8005\u5411\u3051\uff09<\/span><br>\u5b66\u6821\u3066\u3099\u306e\u98df\u7269\u30a2\u30ec\u30eb\u30ad\u3099\u30fc\u306e\u7ba1\u7406\u3068\u7dca\u6025\u5bfe\u5fdc',\n                        'value': 'kitatsu_1_20221025.mp4',\n                        'styleObj': {border: '#3aabd2 3px solid', backgroundColor: '#f3fafa'}, 'index': ''\n                    },\n                    {\n                        'title': '<span style=\"font-size: small;\">\uff08\u533b\u7642\u8005\u5411\u3051\uff09<\/span><br>\u98df\u7269\u7d4c\u53e3\u8ca0\u8377\u8a66\u9a13\u306b\u57fa\u3064\u3099\u3044\u305f\u98df\u7269\u30a2\u30ec\u30eb\u30ad\u3099\u30fc\u8a3a\u7642',\n                        'value': 'kitatsu_2_20221025.mp4',\n                        'styleObj': {border: '#3aabd2 3px solid', backgroundColor: '#f3fafa'}, 'index': ''\n                    },\n                ],\n            },\n            template: '<menu_container :menu_items=\"items\" :title=\"title\"><\/menu_container>',\n        }).$mount('#app1');\n\n        const app2 = new Vue({\n            data: {\n                title: \"\u68ee\u5c71 \u7406\u6075\u5148\u751f\",\n                items: [\n                    {\n                        'title': '<span style=\"font-size: small;\">\uff08\u60a3\u8005\u69d8\u5411\u3051\uff09<\/span><br>\u98df\u7269\u7d4c\u53e3\u8ca0\u8377\u8a66\u9a13\u5f8c\u306e\u81ea\u5b85\u3067\u306e\u98df\u3079\u65b9',\n                        'value': 'moriyama_1_20221025.mp4',\n                        'styleObj': {border: '#3aabd2 3px solid', backgroundColor: '#f3fafa'}\n                    },\n                    {\n                        'title': '<span style=\"font-size: small;\">\uff08\u4fdd\u80b2\u5712\u30fb\u5e7c\u7a1a\u5712\u30fb\u5b66\u6821\u95a2\u4fc2\u8005\u5411\u3051\uff09<\/span><br>\u7d66\u98df\u306b\u304a\u3051\u308b\u98df\u7269\u30a2\u30ec\u30eb\u30ae\u30fc\u5bfe\u5fdc',\n                        'value': 'moriyama_2_20221031.mp4',\n                        'styleObj': {border: '#3aabd2 3px solid', backgroundColor: '#f3fafa'}\n                    },\n                ]\n            },\n            template: '<menu_container :menu_items=\"items\" :title=\"title\"><\/menu_container>',\n        }).$mount('#app2');\n\n    <\/script>\n\n\n\n<style>\n  .access_counter img {\n    display: block !important;\n    width: 90px !important;\n    height: 20px !important;\n    margin: 0 auto;\n    visibility: hidden;\n  }\n<\/style>\n\n\n\n<figure class=\"wp-block-image is-resized size-small access_counter\"><img decoding=\"async\" src=\"http:\/\/www.ibaraki-kodomo.com\/freecgi\/AccessCounter\/index.cgi?df=ichCounter&amp;dd=A\" alt=\"\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"footnotes":""},"class_list":["post-3505","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/pages\/3505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/comments?post=3505"}],"version-history":[{"count":51,"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/pages\/3505\/revisions"}],"predecessor-version":[{"id":6755,"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/pages\/3505\/revisions\/6755"}],"wp:attachment":[{"href":"https:\/\/www.ibaraki-kodomo.com\/test20211201\/wp-json\/wp\/v2\/media?parent=3505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}