{"id":146,"date":"2026-07-03T10:21:11","date_gmt":"2026-07-03T01:21:11","guid":{"rendered":"https:\/\/www.itclub.pia-lab.com\/?page_id=146"},"modified":"2026-07-14T16:22:32","modified_gmt":"2026-07-14T07:22:32","slug":"146-2","status":"publish","type":"page","link":"https:\/\/www.itclub.pia-lab.com\/?page_id=146","title":{"rendered":"\u304a\u308c\u4f5c\u6210"},"content":{"rendered":"\n<div class=\"five-battle-mobile-notice\">\n  \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u306f\u6a2a\u5411\u304d\u8868\u793a\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002<br>\n  \u753b\u9762\u304c\u5c0f\u3055\u3044\u5834\u5408\u306f\u300c\u5225\u753b\u9762\u3067\u958b\u304f\u300d\u304b\u3089\u904a\u3093\u3067\u304f\u3060\u3055\u3044\u3002\n<\/div>\n\n<div class=\"five-battle-actions\">\n  <a\n    href=\"\/wp-content\/uploads\/2026\/07\/five_by_five_piece_battle_v196_device_responsive_fit.html\"\n    target=\"_blank\"\n    rel=\"noopener noreferrer\"\n    class=\"five-battle-direct-link\">\n    \u5225\u753b\u9762\u3067\u958b\u304f\n  <\/a>\n\n  <button\n    type=\"button\"\n    class=\"five-battle-fullscreen-button\"\n    id=\"fiveBattleFullscreenButton\">\n    \u5168\u753b\u9762\u3067\u904a\u3076\n  <\/button>\n<\/div>\n\n<div class=\"five-battle-viewport\" id=\"fiveBattleViewport\">\n  <iframe\n    src=\"\/wp-content\/uploads\/2026\/07\/five_by_five_piece_battle_v196_device_responsive_fit.html\"\n    class=\"five-battle-frame\"\n    id=\"fiveBattleFrame\"\n    title=\"5\u00d75\u30d4\u30fc\u30b9\u30d0\u30c8\u30eb\"\n    frameborder=\"0\"\n    scrolling=\"no\"\n    allow=\"fullscreen; autoplay\"\n    allowfullscreen\n    webkitallowfullscreen\n    mozallowfullscreen>\n  <\/iframe>\n<\/div>\n\n<style>\n.five-battle-mobile-notice {\n  display: none;\n}\n\n.five-battle-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n\n  width: 100%;\n  margin: 0 auto 14px;\n  padding: 0;\n\n  box-sizing: border-box;\n}\n\n.five-battle-direct-link,\n.five-battle-fullscreen-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 140px;\n  min-height: 44px;\n  padding: 10px 18px;\n\n  border: 1px solid #333;\n  border-radius: 8px;\n\n  box-sizing: border-box;\n  background: #222;\n  color: #fff;\n\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: bold;\n  line-height: 1.4;\n  text-align: center;\n  text-decoration: none;\n\n  cursor: pointer;\n}\n\n.five-battle-direct-link:hover,\n.five-battle-fullscreen-button:hover {\n  background: #444;\n  color: #fff;\n  text-decoration: none;\n}\n\n.five-battle-viewport {\n  position: relative;\n  display: block;\n\n  width: 100%;\n  max-width: 100%;\n  min-height: 500px;\n\n  margin: 0 auto;\n  padding: 0;\n\n  overflow: hidden;\n  box-sizing: border-box;\n  background: #000;\n}\n\n.five-battle-frame {\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  display: block;\n\n  width: 1280px;\n  height: 900px;\n  max-width: none !important;\n\n  margin: 0;\n  padding: 0;\n  border: 0;\n\n  transform-origin: top left;\n  background: #000;\n}\n\n\/* \u5168\u753b\u9762\u8868\u793a *\/\n.five-battle-viewport:fullscreen,\n.five-battle-viewport:-webkit-full-screen,\n.five-battle-viewport:-moz-full-screen {\n  width: 100vw;\n  max-width: none;\n  height: 100vh;\n  height: 100dvh;\n  min-height: 0;\n\n  margin: 0;\n  padding: 0;\n  background: #000;\n}\n\n\/* \u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u30fb\u30bf\u30d6\u30ec\u30c3\u30c8 *\/\n@media screen and (max-width: 900px),\n       screen and (hover: none) and (pointer: coarse) {\n\n  .five-battle-mobile-notice {\n    display: block;\n\n    width: 100%;\n    margin: 0 auto 12px;\n    padding: 12px 14px;\n\n    box-sizing: border-box;\n    border-radius: 8px;\n\n    background: #f2f5f8;\n    color: #333;\n\n    font-size: 14px;\n    line-height: 1.7;\n    text-align: center;\n  }\n\n  .five-battle-fullscreen-button {\n    display: none !important;\n  }\n\n  .five-battle-actions {\n    margin-bottom: 12px;\n  }\n\n  .five-battle-direct-link {\n    width: min(100%, 260px);\n  }\n\n  .five-battle-viewport {\n    width: 100%;\n    min-height: 260px;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const viewport = document.getElementById(\"fiveBattleViewport\");\n  const frame = document.getElementById(\"fiveBattleFrame\");\n  const fullscreenButton = document.getElementById(\n    \"fiveBattleFullscreenButton\"\n  );\n\n  if (!viewport || !frame) {\n    return;\n  }\n\n  \/*\n   * \u30b2\u30fc\u30e0\u3092\u6700\u521d\u306b\u8aad\u307f\u8fbc\u3080\u57fa\u6e96\u30b5\u30a4\u30ba\u3067\u3059\u3002\n   * \u30b2\u30fc\u30e0\u672c\u4f53\u306eHTML\u306f\u5909\u66f4\u305b\u305a\u3001iframe\u5168\u4f53\u3092\u7e2e\u5c0f\u3057\u307e\u3059\u3002\n   *\/\n  const fallbackWidth = 1280;\n  const fallbackHeight = 900;\n\n  let gameWidth = fallbackWidth;\n  let gameHeight = fallbackHeight;\n  let resizeTimer = null;\n  let iframeResizeObserver = null;\n\n  function isFullscreen() {\n    return (\n      document.fullscreenElement === viewport ||\n      document.webkitFullscreenElement === viewport ||\n      document.mozFullScreenElement === viewport\n    );\n  }\n\n  function readGameSize() {\n    try {\n      const frameDocument =\n        frame.contentDocument ||\n        frame.contentWindow.document;\n\n      if (!frameDocument) {\n        return;\n      }\n\n      const html = frameDocument.documentElement;\n      const body = frameDocument.body;\n\n      if (!html || !body) {\n        return;\n      }\n\n      \/*\n       * iframe\u5185\u90e8\u306e\u5fc5\u8981\u306a\u6a2a\u5e45\u3068\u9ad8\u3055\u3092\u53d6\u5f97\u3057\u307e\u3059\u3002\n       * \u540c\u4e00\u30b5\u30a4\u30c8\u306e\u76f8\u5bfeURL\u306b\u3057\u3066\u3044\u308b\u305f\u3081\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002\n       *\/\n      const measuredWidth = Math.max(\n        html.scrollWidth || 0,\n        html.offsetWidth || 0,\n        body.scrollWidth || 0,\n        body.offsetWidth || 0,\n        fallbackWidth\n      );\n\n      const measuredHeight = Math.max(\n        html.scrollHeight || 0,\n        html.offsetHeight || 0,\n        body.scrollHeight || 0,\n        body.offsetHeight || 0,\n        fallbackHeight\n      );\n\n      gameWidth = measuredWidth;\n      gameHeight = measuredHeight;\n\n      frame.style.width = gameWidth + \"px\";\n      frame.style.height = gameHeight + \"px\";\n\n      if (\n        typeof ResizeObserver !== \"undefined\" &&\n        !iframeResizeObserver\n      ) {\n        iframeResizeObserver = new ResizeObserver(function () {\n          scheduleFit();\n        });\n\n        iframeResizeObserver.observe(html);\n        iframeResizeObserver.observe(body);\n      }\n    } catch (error) {\n      \/*\n       * \u30b5\u30a4\u30ba\u53d6\u5f97\u304c\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u57fa\u6e96\u30b5\u30a4\u30ba\u3092\u4f7f\u3044\u307e\u3059\u3002\n       *\/\n      gameWidth = fallbackWidth;\n      gameHeight = fallbackHeight;\n\n      frame.style.width = gameWidth + \"px\";\n      frame.style.height = gameHeight + \"px\";\n    }\n  }\n\n  function fitGame() {\n    const availableWidth = Math.max(\n      viewport.clientWidth,\n      1\n    );\n\n    let availableHeight;\n    let scale;\n    let left;\n    let top;\n\n    if (isFullscreen()) {\n      availableHeight = Math.max(\n        viewport.clientHeight,\n        window.innerHeight,\n        1\n      );\n\n      \/*\n       * \u5168\u753b\u9762\u6642\u306f\u4e0a\u4e0b\u5de6\u53f3\u306e\u3059\u3079\u3066\u304c\u753b\u9762\u5185\u306b\u5165\u308b\u500d\u7387\u306b\u3057\u307e\u3059\u3002\n       *\/\n      scale = Math.min(\n        availableWidth \/ gameWidth,\n        availableHeight \/ gameHeight\n      );\n\n      const scaledWidth = gameWidth * scale;\n      const scaledHeight = gameHeight * scale;\n\n      left = Math.max(\n        0,\n        (availableWidth - scaledWidth) \/ 2\n      );\n\n      top = Math.max(\n        0,\n        (availableHeight - scaledHeight) \/ 2\n      );\n\n      viewport.style.height = \"100dvh\";\n    } else {\n      \/*\n       * \u901a\u5e38\u8868\u793a\u306f\u6a2a\u5e45\u306b\u5408\u308f\u305b\u3066\u7e2e\u5c0f\u3057\u307e\u3059\u3002\n       * \u30b2\u30fc\u30e0\u304c\u63b2\u8f09\u67a0\u3088\u308a\u5c0f\u3055\u3044\u5834\u5408\u306f\u62e1\u5927\u3057\u307e\u305b\u3093\u3002\n       *\/\n      scale = Math.min(\n        availableWidth \/ gameWidth,\n        1\n      );\n\n      const scaledWidth = gameWidth * scale;\n      const scaledHeight = gameHeight * scale;\n\n      left = Math.max(\n        0,\n        (availableWidth - scaledWidth) \/ 2\n      );\n\n      top = 0;\n\n      \/*\n       * iframe\u5168\u4f53\u306e\u7e2e\u5c0f\u5f8c\u306e\u9ad8\u3055\u3092\u63b2\u8f09\u67a0\u306b\u8a2d\u5b9a\u3059\u308b\u305f\u3081\u3001\n       * \u4e0b\u5074\u3082\u5207\u308c\u305a\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\n       *\/\n      viewport.style.height =\n        Math.ceil(scaledHeight) + \"px\";\n    }\n\n    frame.style.left = left + \"px\";\n    frame.style.top = top + \"px\";\n    frame.style.transform =\n      \"scale(\" + scale + \")\";\n  }\n\n  function updateGame() {\n    readGameSize();\n    fitGame();\n  }\n\n  function scheduleFit() {\n    clearTimeout(resizeTimer);\n\n    resizeTimer = setTimeout(function () {\n      updateGame();\n    }, 100);\n  }\n\n  frame.addEventListener(\"load\", function () {\n    updateGame();\n\n    \/*\n     * \u30d5\u30a9\u30f3\u30c8\u3084\u753b\u50cf\u306e\u8aad\u307f\u8fbc\u307f\u5f8c\u306b\u3082\u518d\u8abf\u6574\u3057\u307e\u3059\u3002\n     *\/\n    setTimeout(updateGame, 300);\n    setTimeout(updateGame, 1000);\n    setTimeout(updateGame, 2000);\n  });\n\n  if (fullscreenButton) {\n    fullscreenButton.addEventListener(\"click\", function () {\n      const requestFullscreen =\n        viewport.requestFullscreen ||\n        viewport.webkitRequestFullscreen ||\n        viewport.mozRequestFullScreen ||\n        viewport.msRequestFullscreen;\n\n      if (requestFullscreen) {\n        const result = requestFullscreen.call(viewport);\n\n        if (result && typeof result.catch === \"function\") {\n          result.catch(function () {\n            \/* \u5168\u753b\u9762\u975e\u5bfe\u5fdc\u306e\u5834\u5408\u306f\u4f55\u3082\u3057\u307e\u305b\u3093 *\/\n          });\n        }\n      }\n    });\n  }\n\n  window.addEventListener(\"resize\", scheduleFit);\n  window.addEventListener(\"orientationchange\", function () {\n    setTimeout(updateGame, 300);\n  });\n\n  document.addEventListener(\n    \"fullscreenchange\",\n    function () {\n      setTimeout(updateGame, 100);\n    }\n  );\n\n  document.addEventListener(\n    \"webkitfullscreenchange\",\n    function () {\n      setTimeout(updateGame, 100);\n    }\n  );\n\n  updateGame();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3067\u306f\u6a2a\u5411\u304d\u8868\u793a\u304c\u304a\u3059\u3059\u3081\u3067\u3059\u3002 \u753b\u9762\u304c\u5c0f\u3055\u3044\u5834\u5408\u306f\u300c\u5225\u753b\u9762\u3067\u958b\u304f\u300d\u304b\u3089\u904a\u3093\u3067\u304f\u3060\u3055\u3044\u3002 \u5225\u753b\u9762\u3067\u958b\u304f \u5168\u753b\u9762\u3067\u904a\u3076<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_sitemap":"","_veu_custom_css":"","veu_display_promotion_alert":"","_exclude_from_list_pages":"","vkexunit_cta_each_option":"","vkExUnit_childPageIndex":"","vkExUnit_pageList_ancestor":"","vkExUnit_contact_enable":"","_lightning_design_setting":{"site_body_padding":"true","hide_site_header":"true","hide_page_header":"true","layout":"default","hide_mobile_fix_nav":"true","hide_breadcrumb":"true","hide_mobile_menu_btn":"true","hide_site_footer":"true"},"header_top_description":"","vk_page_header_image":0,"vk_page_header_image_sp":0,"vk_page_header_subtext":"","footnotes":""},"class_list":["post-146","page","type-page","status-publish","hentry"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/pages\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=146"}],"version-history":[{"count":16,"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=\/wp\/v2\/pages\/146\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/www.itclub.pia-lab.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}