{"id":5,"date":"2021-10-23T02:02:05","date_gmt":"2021-10-22T17:02:05","guid":{"rendered":"https:\/\/remotecall.hikaku.cc\/?page_id=5"},"modified":"2021-10-23T03:08:13","modified_gmt":"2021-10-22T18:08:13","slug":"%e3%83%86%e3%82%b9%e3%83%88","status":"publish","type":"page","link":"https:\/\/remotecall.hikaku.cc\/","title":{"rendered":"\u30c6\u30b9\u30c8"},"content":{"rendered":"\n    <section class=\"gallery\">\n      <div class=\"container\">\n        <input type=\"radio\" id=\"All\" name=\"categories\" value=\"All\" checked>\n        <input type=\"radio\" id=\"cat-a\" name=\"categories\" value=\"cat-a\">\n        <input type=\"radio\" id=\"cat-b\" name=\"categories\" value=\"cat-b\">\n        <input type=\"radio\" id=\"cat-c\" name=\"categories\" value=\"cat-c\">\n        <input type=\"radio\" id=\"cat-d\" name=\"categories\" value=\"cat-d\">\n        <input type=\"radio\" id=\"cat-e\" name=\"categories\" value=\"cat-e\">\n        <input type=\"radio\" id=\"cat-f\" name=\"categories\" value=\"cat-f\">\n        <ol class=\"filters\">\n          <li><label for=\"All\">All<\/label><\/li>\n          <li><label for=\"cat-a\">\u30ab\u30c6\u30b4\u30eaA<\/label><\/li>\n          <li><label for=\"cat-b\">\u30ab\u30c6\u30b4\u30eaB<\/label><\/li>\n          <li><label for=\"cat-c\">\u30ab\u30c6\u30b4\u30eaC<\/label><\/li>\n          <li><label for=\"cat-d\">\u30ab\u30c6\u30b4\u30eaD<\/label><\/li>\n          <li><label for=\"cat-e\">\u30ab\u30c6\u30b4\u30eaE<\/label><\/li>\n          <li><label for=\"cat-f\">\u30ab\u30c6\u30b4\u30eaF<\/label><\/li>\n        <\/ol>\n        <ol class=\"targets\">\n          <li class=\"target\" data-category=\"cat-a cat-b\">\n            <figure> <a href=\"#\"> <img src=\"images\/001.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 1<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaA<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaB<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f31<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-a cat-c\">\n            <figure> <a href=\"#\"> <img src=\"images\/002.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 2<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaA<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaC<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f32<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-d cat-f\">\n            <figure> <a href=\"#\"> <img src=\"images\/003.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 3<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaD<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaF<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f33<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-c cat-e\">\n            <figure> <a href=\"#\"> <img src=\"images\/004.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 4<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaC<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaE<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f34<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-b cat-d\">\n            <figure> <a href=\"#\"> <img src=\"images\/005.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 5<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaB<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaD<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f35<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-d\">\n            <figure> <a href=\"#\"> <img src=\"images\/006.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 6<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaD<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f36<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-a cat-b cat-c\">\n            <figure> <a href=\"#\"> <img src=\"images\/007.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 7<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaA<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaB<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaC<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f37<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-e cat-f\">\n            <figure> <a href=\"#\"> <img src=\"images\/008.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 8<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaE<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaF<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f38<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-a\">\n            <figure> <a href=\"#\"> <img src=\"images\/009.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 9<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaA<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f39<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-d cat-f\">\n            <figure> <a href=\"#\"> <img src=\"images\/010.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 10<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaD<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaF<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f310<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-c\">\n            <figure> <a href=\"#\"> <img src=\"images\/011.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 11<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30ea<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30ea<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f311<\/figcaption>\n            <\/figure>\n          <\/li>\n          <li class=\"target\" data-category=\"cat-e cat-a\">\n            <figure> <a href=\"#\"> <img src=\"images\/012.jpg\" alt=\"\"> <\/a>\n              <h2 class=\"target-title\"> <a href=\"#\">Title 12<\/a> <\/h2>\n              <ol class=\"target-categories\">\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaE<\/a> <\/li>\n                <li> <a href=\"#\">\u30ab\u30c6\u30b4\u30eaA<\/a> <\/li>\n              <\/ol>\n              <figcaption>\u30ad\u30e3\u30d7\u30b7\u30e7\u30f312<\/figcaption>\n            <\/figure>\n          <\/li>\n        <\/ol>\n      <\/div>\n    <\/section>\n\n\n\n<script>\n    \n\n    window.addEventListener('DOMContentLoaded', function(){\n      \/\/name \u5c5e\u6027\u304c categories \u306e input \u8981\u7d20\uff08\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\uff09\u3092\u53d6\u5f97\n      const input_categories = document.querySelectorAll(\"input[name=categories]\");\n      \/\/\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e value \u306e\u5024\uff08\u30ab\u30c6\u30b4\u30ea\u540d\uff09\u3092\u683c\u7d0d\u3059\u308b\u914d\u5217\n      const category_array = [];\n      for(let input_category of input_categories) {\n        input_category.addEventListener('change',function(){\n          const targets = document.querySelectorAll(\".target\");\n          for(let target of targets) {\n            target.style.setProperty('display', 'block');\n          }\n          if( this.checked ) {\n            if(this.value !== 'All') {\n              const not_checked_categories = document.querySelectorAll('.target:not([data-category~=' + '\"' + this.value + '\"])');\n              for(let not_checked_category of not_checked_categories) {\n                not_checked_category.style.setProperty('display', 'none');\n              }\n            }\n          }\n        });\n        \/\/\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e value \u306e\u5024\u3092\u914d\u5217\uff08category_array\uff09\u306b\u8ffd\u52a0\n        category_array.push(input_category.getAttribute('value'));\n      } \n      \n      \/\/\u30ab\u30c6\u30b4\u30ea\u540d\uff08\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e value \u306e\u5024\uff09\u3092\u30ad\u30fc\u3068\u3059\u308b\u9023\u60f3\u914d\u5217\uff08\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\uff09\u306e\u521d\u671f\u5316\n      const category_vars = {};\n      \/\/\u30ab\u30c6\u30b4\u30ea\u540d\u3092\u30ad\u30fc\u3068\u3059\u308b\u9023\u60f3\u914d\u5217\u306e\u8981\u7d20\u3092\u751f\u6210\u3057\u5024\uff08\u30ab\u30a6\u30f3\u30c8\u6570\uff09\u306b\u521d\u671f\u5024 0 \u3092\u8a2d\u5b9a\n      for(let cat of category_array){\n         category_vars[cat] = 0;\n      }\n      \n      \/\/[data-category] \u5c5e\u6027\u3092\u6301\u3064\u8981\u7d20\u3092\u53d6\u5f97\n      const data_categories = document.querySelectorAll(\"[data-category]\");\n      \/\/\u305d\u308c\u305e\u308c\u306e\u8981\u7d20\u306e data-category \u306e\u5024\u3092\u53d6\u5f97\u3057\u3001\u305d\u308c\u305e\u308c\u306e\u5024\u3092\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\n      for(let data_categoriy of data_categories){\n        \/\/data-category \u306e\u5024\u3092\u53d6\u5f97\n        let category_values = data_categoriy.getAttribute('data-category');\n        \/\/data-category \u306e\u5024\u3092\u534a\u89d2\u30b9\u30da\u30fc\u30b9\uff08\u7a7a\u767d\u6587\u5b57\u306e\u6b63\u898f\u8868\u73fe\uff09\u3067\u5206\u5272\n        let category_values_array = category_values.split(\/\\s\/);\n        \/\/\u5206\u5272\u3055\u308c\u305f data-category \u306e\u5024\u3092\u30ad\u30fc\u3068\u3057\u305f\u9023\u60f3\u914d\u5217\u306e\u5024\u3092\u30ab\u30a6\u30f3\u30c8\u30a2\u30c3\u30d7\n        for(let category_value of category_values_array) {\n          category_vars[category_value] ++;\n        }\n      }\n      \n      \/\/\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e value \u306e\u5024\uff08\u30ab\u30c6\u30b4\u30ea\u540d\uff09\u304b\u3089 label \u8981\u7d20\u3092\u53d6\u5f97\u3057\u3066\u30ab\u30a6\u30f3\u30c8\u6570\u3092\u8868\u793a\n      for(let input_category of input_categories) {\n        let input_value = input_category.getAttribute('value');\n        \/\/for \u5c5e\u6027\u304c value \u306e\u5024\u306b\u4e00\u81f4\u3059\u308b\u8981\u7d20\uff08label \u8981\u7d20\uff09\n        let label = document.querySelector('[for=\"'+ input_value + '\"]');\n        \/\/label \u8981\u7d20\u306e\u30c6\u30ad\u30b9\u30c8\uff08\u30e9\u30d9\u30eb\uff09\n        let label_text = label.textContent;\n        if(input_value === 'All') {\n          \/\/All \u306e\u5834\u5408\u306b\u8868\u793a\u3059\u308b\u5024\u306f .target \u306e\u7dcf\u6570\n          label.textContent = label_text + ' (' + document.querySelectorAll(\".target\").length +  ')';\n        }else{\n          \/\/All\u4ee5\u5916\u306e\u5834\u5408\u306f value \u306e\u5024\uff08\u30ab\u30c6\u30b4\u30ea\u540d\uff09\u3092\u30ad\u30fc\u306b\u6301\u3064\u9023\u60f3\u914d\u5217\u306e\u5024\uff08\u30ab\u30c6\u30b4\u30ea\u306e\u30ab\u30a6\u30f3\u30c8\u6570\uff09\n          label.textContent = label_text + ' (' + category_vars[input_value] +  ')';\n        }\n      }\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>All \u30ab\u30c6\u30b4\u30eaA \u30ab\u30c6\u30b4\u30eaB \u30ab\u30c6\u30b4\u30eaC \u30ab\u30c6\u30b4\u30eaD \u30ab\u30c6\u30b4\u30eaE \u30ab\u30c6\u30b4\u30eaF Title 1 \u30ab\u30c6\u30b4\u30eaA \u30ab\u30c6\u30b4\u30eaB \u30ad\u30e3\u30d7\u30b7\u30e7\u30f31 Title 2 \u30ab\u30c6\u30b4\u30eaA \u30ab\u30c6\u30b4\u30eaC \u30ad\u30e3\u30d7\u30b7\u30e7\u30f32 Title 3 \u30ab\u30c6\u30b4\u30eaD &hellip; <a class=\"more-link\" href=\"https:\/\/remotecall.hikaku.cc\/\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">\u30c6\u30b9\u30c8<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/pages\/5"}],"collection":[{"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":3,"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/pages\/5\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/remotecall.hikaku.cc\/index.php\/wp-json\/wp\/v2\/media?parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}