{"id":8691,"date":"2025-08-27T13:28:02","date_gmt":"2025-08-27T04:28:02","guid":{"rendered":"https:\/\/code-plus.jp\/gp\/?p=8691"},"modified":"2026-01-08T11:13:18","modified_gmt":"2026-01-08T02:13:18","slug":"link-openmodal-js-8691","status":"publish","type":"post","link":"https:\/\/code-plus.jp\/gp\/link-openmodal-js-8691\/","title":{"rendered":"\u5185\u90e8\u30ea\u30f3\u30af\u5148\u306e\u30da\u30fc\u30b8\u3092\u3001\u30e2\u30fc\u30c0\u30eb\u3067\u958b\u304fJavaScript"},"content":{"rendered":"<p>Web\u30b5\u30a4\u30c8\u3067\u5185\u90e8\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u969b\u3001\u65b0\u3057\u3044\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30e2\u30fc\u30c0\u30eb\uff08\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30a6\u30a3\u30f3\u30c9\u30a6\uff09\u3067\u8868\u793a\u3059\u308b\u4ed5\u7d44\u307f\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002WordPress\u306eContent Views\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3069\u3001\u8a18\u4e8b\u4e00\u89a7\u304b\u3089\u306e\u8a73\u7d30\u8868\u793a\u306b\u7279\u306b\u6709\u52b9\u3067\u3059\u3002<\/p>\r\n\r\n\r\n <!-- \u2605\u76ee\u6b21\u30ea\u30b9\u30c8 -->\r\n<nav class=\"toc-container mt-2r\">\r\n  <ul class=\"toc-list\" data-toc-id=\"js-tocBWGD\"><\/ul>\r\n<\/nav>\r\n\r\n<script src=\"https:\/\/www.code-plus.jp\/cdn\/js\/_gimmicks\/inppend-toc.js\"><\/script>\r\n\r\n\r\n\r\n\r\n<h2 class=\"fz-xl\">\u4f7f\u7528\u4f8b\u30fb\u60f3\u5b9a\u3055\u308c\u308b\u7528\u9014<\/h2>\r\n\r\n<h3 class=\"fz-lg\">1. \u30dd\u30fc\u30c8\u30d5\u30a9\u30ea\u30aa\u30b5\u30a4\u30c8\u3067\u306e\u4f5c\u54c1\u8a73\u7d30\u8868\u793a<\/h3>\r\n<pre><code class=\"language-html\">&lt;div class=&quot;pt-cv-view target-modal&quot; data-modal-width=&quot;800&quot; data-modal-height=&quot;500&quot;&gt;\r\n  &lt;a href=&quot;\/works\/post-001\/&quot; class=&quot;_self&quot;&gt;\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u8a73\u7d30\u3092\u898b\u308b&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">2. \u30d6\u30ed\u30b0\u8a18\u4e8b\u306e\u6982\u8981\u304b\u3089\u306e\u8a73\u7d30\u8868\u793a<\/h3>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u8a18\u4e8b\u4e00\u89a7\u30da\u30fc\u30b8\u3067\u6982\u8981\u3092\u8868\u793a<\/li>\r\n  <li>\u300c\u7d9a\u304d\u3092\u8aad\u3080\u300d\u30ea\u30f3\u30af\u3092\u30e2\u30fc\u30c0\u30eb\u3067\u958b\u304f<\/li>\r\n  <li>\u30e6\u30fc\u30b6\u30fc\u306f\u5143\u306e\u30da\u30fc\u30b8\u3092\u96e2\u308c\u308b\u3053\u3068\u306a\u304f\u8a73\u7d30\u3092\u78ba\u8a8d\u53ef\u80fd<\/li>\r\n<\/ul>\r\n\r\n<h3 class=\"fz-lg\">3. \u5546\u54c1\u30ab\u30bf\u30ed\u30b0\u3067\u306e\u5546\u54c1\u8a73\u7d30<\/h3>\r\n<ul style=\"list-style-type:bullet;\">\r\n  <li>\u5546\u54c1\u4e00\u89a7\u304b\u3089\u306e\u8a73\u7d30\u60c5\u5831\u8868\u793a<\/li>\r\n  <li>\u30b9\u30da\u30c3\u30af\u8868\u3084\u8a73\u7d30\u753b\u50cf\u3092\u30e2\u30fc\u30c0\u30eb\u3067\u8868\u793a<\/li>\r\n  <li>\u30ab\u30bf\u30ed\u30b0\u95b2\u89a7\u306e\u6d41\u308c\u3092\u4e2d\u65ad\u3057\u306a\u3044<\/li>\r\n<\/ul>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u4ed5\u7d44\u307f\u306e\u6982\u8981<\/h2>\r\n<p>\u3053\u306e\u30b7\u30b9\u30c6\u30e0\u306f2\u3064\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3067\u69cb\u6210\u3055\u308c\u3066\u3044\u307e\u3059\uff1a<\/p>\r\n<ol style=\"list-style-type:decimal;\">\r\n  <li><b class=\"bold\">\u30ea\u30f3\u30af\u5c5e\u6027\u5909\u63db\u30b9\u30af\u30ea\u30d7\u30c8<\/b>\uff1a<code>_self<\/code>\u30af\u30e9\u30b9\u3092\u6301\u3064\u30ea\u30f3\u30af\u3092\u81ea\u52d5\u3067\u30e2\u30fc\u30c0\u30eb\u5bfe\u5fdc\u306b\u5909\u63db<\/li>\r\n  <li><b class=\"bold\">\u30e2\u30fc\u30c0\u30eb\u8868\u793a\u30b9\u30af\u30ea\u30d7\u30c8<\/b>\uff1a<code>target=&quot;_modal&quot;<\/code>\u306e\u30ea\u30f3\u30af\u3092\u30e2\u30fc\u30c0\u30eb\u8868\u793a<\/li>\r\n<\/ol>\r\n\r\n<h3 class=\"fz-lg\">1. \u30ea\u30f3\u30af\u5c5e\u6027\u5909\u63db\u30b9\u30af\u30ea\u30d7\u30c8<\/h3>\r\n<pre><code class=\"language-javascript\">\/\/DOMContentLoaded\u5f8c\u306b\u5b9f\u884c\r\ndocument.addEventListener(&#39;DOMContentLoaded&#39;, function () {\r\n  \/\/\u8a2d\u5b9a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\r\n  const config = {\r\n    \/\/\u5bfe\u8c61\u3068\u306a\u308b\u30b3\u30f3\u30c6\u30ca\u30bb\u30ec\u30af\u30bf\r\n    containerSelector: &#39;.pt-cv-view.target-modal&#39;,\r\n    \r\n    \/\/\u5bfe\u8c61\u30ea\u30f3\u30af\u306e\u30bb\u30ec\u30af\u30bf\u30d1\u30bf\u30fc\u30f3\uff08\u30af\u30e9\u30b9\u540d\u30d9\u30fc\u30b9\uff09\r\n    linkSelector: &#39;a[href][class*=&quot;_self&quot;]&#39;,\r\n    \r\n    \/\/\u30c7\u30d5\u30a9\u30eb\u30c8\u306e\u30e2\u30fc\u30c0\u30eb\u30b5\u30a4\u30ba\r\n    defaultWidth: &#39;800&#39;,\r\n    defaultHeight: &#39;500&#39;,\r\n    \r\n    \/\/\u30b3\u30f3\u30c6\u30ca\u5225\u306e\u500b\u5225\u8a2d\u5b9a\uff08data\u5c5e\u6027\u3067\u4e0a\u66f8\u304d\u53ef\u80fd\uff09\r\n    \/\/data-modal-width, data-modal-height \u3067\u30b3\u30f3\u30c6\u30ca\u3054\u3068\u306b\u8a2d\u5b9a\u53ef\u80fd\r\n    containerSpecificSettings: true\r\n  };\r\n\r\n  \/\/.pt-cv-view.target-modal \u5185\u306e\u51e6\u7406\r\n  const targetModalViews = document.querySelectorAll(config.containerSelector);\r\n  \r\n  targetModalViews.forEach(function(view) {\r\n    \/\/\u30b3\u30f3\u30c6\u30ca\u56fa\u6709\u306e\u8a2d\u5b9a\u3092\u53d6\u5f97\r\n    const containerWidth = view.getAttribute(&#39;data-modal-width&#39;) || config.defaultWidth;\r\n    const containerHeight = view.getAttribute(&#39;data-modal-height&#39;) || config.defaultHeight;\r\n    \r\n    \/\/\u5bfe\u8c61\u30ea\u30f3\u30af\u3092\u691c\u7d22\uff08\u30af\u30e9\u30b9\u540d\u30d9\u30fc\u30b9\uff09\r\n    const targetLinks = view.querySelectorAll(config.linkSelector);\r\n    \r\n    targetLinks.forEach(function(link) {\r\n      const href = link.getAttribute(&#39;href&#39;);\r\n      \r\n      \/\/href\u304c\u5b58\u5728\u3057\u3001_self\u30af\u30e9\u30b9\u3092\u6301\u3064\u30ea\u30f3\u30af\u3092\u5bfe\u8c61\r\n      if (href &amp;&amp; link.classList.contains(&#39;_self&#39;)) {\r\n        \/\/\u65e2\u306btarget=&quot;_modal&quot;\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306e\u307f\u51e6\u7406\r\n        if (link.getAttribute(&#39;target&#39;) !== &#39;_modal&#39;) {\r\n          \/\/target=&quot;_modal&quot; \u3092\u8ffd\u52a0\r\n          link.setAttribute(&#39;target&#39;, &#39;_modal&#39;);\r\n          \r\n          \/\/\u30e2\u30fc\u30c0\u30eb\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\r\n          link.setAttribute(&#39;data-popwidth&#39;, containerWidth);\r\n          link.setAttribute(&#39;data-popheight&#39;, containerHeight);\r\n          \r\n          \/\/\u30c7\u30d0\u30c3\u30b0\u7528\u30ed\u30b0\r\n          console.log(&#39;Modal attributes added:&#39;, {\r\n            url: href,\r\n            width: containerWidth,\r\n            height: containerHeight,\r\n            className: link.className\r\n          });\r\n        }\r\n      }\r\n    });\r\n    \r\n    console.log(`Processed ${view.querySelectorAll(&#39;a[target=&quot;_modal&quot;]&#39;).length} modal links in container`);\r\n  });\r\n});\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">2. \u30e2\u30fc\u30c0\u30eb\u8868\u793a\u30b9\u30af\u30ea\u30d7\u30c8<\/h3>\r\n<pre><code class=\"language-javascript\">\/\/DOMContentLoaded\u5f8c\u306b\u5b9f\u884c\r\ndocument.addEventListener(&#39;DOMContentLoaded&#39;, function () {\r\n\/\/_link-openModal.js\r\nconst arrModalLinks = Array.prototype.slice.call(document.querySelectorAll(&#39;[href][target=&quot;_modal&quot;]:not([href*=&quot;#&quot;])&#39;));\r\n\r\n\/\/\u30e2\u30fc\u30c0\u30eb\u7528\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u52d5\u7684\u306b\u8ffd\u52a0\r\nconst modalStyle = document.createElement(&#39;style&#39;);\r\nmodalStyle.textContent = `\r\n\/* linkModal\uff1aCSS\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u0f1a\u0f36\u22b0\u27e1\u22b1\u0f36\u0f1a\u0f3a *\/\r\n.linkModal.linkModal-container {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  \/* inset: \u4e0a  \u53f3  \u4e0b  \u5de6 \uff08\u30d8\u30c3\u30c0\u30fc\u5206\u8abf\u6574\uff09 *\/\r\n  inset: calc(var(--\u215dfem) * 5) 0 0 0;\r\n  margin: auto;\r\n  \/* Grid *\/\r\n  display: grid;\r\n  place-content: center;\r\n  place-items: center;\r\n  transition: opacity 0.3s ease-in;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  opacity: 0;\r\n}\r\n\r\n\/* \u30aa\u30fc\u30d0\u30fc\u30ec\u30a4 *\/\r\n.linkModal.is-opened::before {\r\n  content: &quot;&quot;;\r\n  position: fixed;\r\n  z-index: -1;\r\n  display: block;\r\n  top: 0px;\r\n  bottom: 0px;\r\n  left: 0px;\r\n  right: 0px;\r\n  margin: auto;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: hsla(0, 0%, 0%, 0.7);\r\n}\r\n\r\n.linkModal.linkModal-container.is-opened {\r\n  opacity: 1;\r\n  pointer-events: auto;\r\n}\r\n\r\n.linkModal .linkModal-wrapper {\r\n  position: relative;\r\n  overflow: hidden;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: var(--c-base, hsl(223, 6%, 100%));\r\n  border-radius: 8px;\r\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n  overflow: hidden;\r\n}\r\n\r\n.linkModal-header {\r\n  position: relative;\r\n  z-index: 10;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 1rem 1.5rem;\r\n  border-bottom: 1px solid #eee;\r\n  background: #f8f9fa;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.linkModal .linkModal-title {\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  font-size: 1.125rem;\r\n  font-weight: 600;\r\n  color: var(--c-text-300, hsl(223, 6%, 75%));\r\n}\r\n\r\n.linkModal-content {\r\n  padding: 1.5rem;\r\n  overflow-y: auto;\r\n  flex: 1;\r\n  min-height: 0;\r\n  position: relative;\r\n}\r\n\r\n\/* \u30e2\u30fc\u30c0\u30eb\u5185\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u57fa\u672c\u30b9\u30bf\u30a4\u30eb *\/\r\n.linkModal-content * {\r\n  max-width: 100% !important;\r\n  box-sizing: border-box !important;\r\n}\r\n\r\n.linkModal-content img {\r\n  width: auto !important;\r\n  height: auto !important;\r\n  max-width: 100% !important;\r\n  display: block !important;\r\n  margin: 0 auto !important;\r\n}\r\n\r\n.linkModal-content p,\r\n.linkModal-content div {\r\n  line-height: 1.6 !important;\r\n  margin-bottom: 1rem !important;\r\n}\r\n\r\n.linkModal-loading {\r\n  text-align: center;\r\n  padding: 3rem 2rem;\r\n  color: #666;\r\n  font-size: 1rem;\r\n}\r\n\r\n.linkModal-error {\r\n  text-align: center;\r\n  padding: 3rem 2rem;\r\n  color: #dc3545;\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n}\r\n\r\n\/* \u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u30dc\u30bf\u30f3 *\/\r\n.linkModal.is-opened .linkModal-closer {\r\n  position: absolute;\r\n  top: -0.3em;\r\n  right: 0.3em;\r\n  margin: auto;\r\n  display: inline-flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 0;\r\n  height: 0;\r\n  font-size: 2pc;\r\n  color: #FFF;\r\n}\r\n\r\n.linkModal.is-opened .linkModal-closer::before {\r\n  position: relative;\r\n  top: 0px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 0;\r\n  height: 0;\r\n  font-size: 100%;\r\n  \/* Material Symbols *\/\r\n  font-family: &#39;Material Symbols Sharp&#39;;\r\n  font-variation-settings:\r\n    &#39;FILL&#39; 0,\r\n    &#39;wght&#39; 200;\r\n  content: &quot;\\\\e5cd&quot;;\r\n}\r\n\r\nbody.is-dialoged {\r\n  overflow: hidden;\r\n}\r\n`;\r\ndocument.head.appendChild(modalStyle);\r\n\r\n  \/\/\u65e2\u5b58\u306e\u30e2\u30fc\u30c0\u30eb\u3092\u524a\u9664\u3059\u308b\u95a2\u6570\r\n  function removeExistingModal() {\r\n    const existingModal = document.querySelector(&#39;.linkModal-container&#39;);\r\n    if (existingModal) {\r\n      existingModal.remove();\r\n    }\r\n  }\r\n\r\n  \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u4f5c\u6210\u3059\u308b\u95a2\u6570\r\n  function createModal(width, height, title) {\r\n    const modalHTML = `\r\n    &lt;div class=&quot;linkModal linkModal-container&quot; style=&quot;width:${width}px; height:${height}px;&quot;&gt;\r\n      &lt;div class=&quot;linkModal-wrapper&quot;&gt;\r\n        &lt;div class=&quot;linkModal-header&quot;&gt;\r\n          &lt;h3 class=&quot;linkModal-title&quot;&gt;${title}&lt;\/h3&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=&quot;linkModal-content&quot;&gt;\r\n          &lt;div class=&quot;linkModal-loading&quot;&gt;\u8aad\u307f\u8fbc\u307f\u4e2d...&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n      &lt;\/div&gt;\r\n      &lt;button class=&quot;linkModal-closer&quot; aria-label=&quot;\u9589\u3058\u308b&quot;&gt;&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n    `;\r\n    \r\n    document.body.insertAdjacentHTML(&#39;beforeend&#39;, modalHTML);\r\n    return document.querySelector(&#39;.linkModal-container:last-child&#39;);\r\n  }\r\n\r\n  \/\/HTML\u304b\u3089body\u306e\u5185\u5bb9\u3068\u30bf\u30a4\u30c8\u30eb\u3092\u62bd\u51fa\u3059\u308b\u95a2\u6570\uff08\u6539\u826f\u7248\uff09\r\n  function extractContent(html) {\r\n    console.log(&#39;Original HTML length:&#39;, html.length);\r\n    \r\n    const parser = new DOMParser();\r\n    const doc = parser.parseFromString(html, &#39;text\/html&#39;);\r\n    \r\n    \/\/\u30bf\u30a4\u30c8\u30eb\u3092\u53d6\u5f97\u3057\u3066\u30b5\u30a4\u30c8\u540d\u3092\u30c8\u30ea\u30e0\r\n    let cleanTitle = &#39;&#39;;\r\n    const titleElement = doc.querySelector(&#39;title&#39;);\r\n    if (titleElement) {\r\n      const fullTitle = titleElement.textContent.trim();\r\n      console.log(&#39;Original title:&#39;, fullTitle);\r\n\r\n      const siteName = &#39;- [\u30b5\u30a4\u30c8\u540d.jp]&#39;;\r\n      cleanTitle = fullTitle.replace(siteName, &#39;&#39;).trim();\r\n      \r\n      console.log(&#39;Clean title:&#39;, cleanTitle);\r\n    }\r\n    \r\n    \/\/body\u306e\u5185\u5bb9\u3092\u53d6\u5f97\r\n    const bodyContent = doc.body;\r\n    let bodyHTML = &#39;&#39;;\r\n    \r\n    if (bodyContent) {\r\n      \/\/\u4e0d\u8981\u306a\u8981\u7d20\u3092\u524a\u9664\r\n      const elementsToRemove = [\r\n        &#39;script&#39;,\r\n        &#39;noscript&#39;, \r\n        &#39;style&#39;,\r\n        &#39;#wpadminbar&#39;,\r\n        &#39;.header&#39;,\r\n        &#39;.trunker .flanker&#39;,\r\n        &#39;.footer&#39;,\r\n        &#39;.breadcrumb&#39;,\r\n        &#39;.post-edit-link&#39;,\r\n        &#39;.prxtPost&#39;,\r\n        &#39;.veu_contentAddSection&#39;,\r\n        &#39;.pageBtn-group&#39;\r\n      ];\r\n      \r\n      elementsToRemove.forEach(selector =&gt; {\r\n        const elements = bodyContent.querySelectorAll(selector);\r\n        elements.forEach(el =&gt; {\r\n          console.log(&#39;Removing element:&#39;, el.tagName, el.className);\r\n          el.remove();\r\n        });\r\n      });\r\n      \r\n      bodyHTML = bodyContent.innerHTML;\r\n      console.log(&#39;Processed content length:&#39;, bodyHTML.length);\r\n      console.log(&#39;Content preview:&#39;, bodyHTML.substring(0, 500));\r\n    }\r\n    \r\n    return {\r\n      title: cleanTitle,\r\n      content: bodyHTML || html\r\n    };\r\n  }\r\n\r\n  \/\/\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8aad\u307f\u8fbc\u3080\u95a2\u6570\uff08\u6539\u826f\u7248\uff09\r\n  async function loadContent(url) {\r\n    console.log(&#39;Loading content from:&#39;, url);\r\n    \r\n    try {\r\n      const response = await fetch(url, {\r\n        method: &#39;GET&#39;,\r\n        headers: {\r\n          &#39;Accept&#39;: &#39;text\/html,application\/xhtml+xml,application\/xml;q=0.9,*\/*;q=0.8&#39;,\r\n        }\r\n      });\r\n      \r\n      if (!response.ok) {\r\n        throw new Error(`HTTP ${response.status}: ${response.statusText}`);\r\n      }\r\n      \r\n      const text = await response.text();\r\n      console.log(&#39;Response received, length:&#39;, text.length);\r\n      \r\n      const extracted = extractContent(text);\r\n      \r\n      \/\/\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u7a7a\u306e\u5834\u5408\u306e\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\r\n      if (!extracted.content || extracted.content.trim().length === 0) {\r\n        console.log(&#39;Content is empty, using fallback&#39;);\r\n        return {\r\n          title: extracted.title,\r\n          content: `\r\n            &lt;div style=&quot;padding: 2rem; text-align: center;&quot;&gt;\r\n              &lt;p&gt;\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8868\u793a\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002&lt;\/p&gt;\r\n              &lt;a href=&quot;${url}&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;\u65b0\u3057\u3044\u30bf\u30d6\u3067\u958b\u304f&lt;\/a&gt;\r\n            &lt;\/div&gt;\r\n          `\r\n        };\r\n      }\r\n      \r\n      return extracted;\r\n    } catch (error) {\r\n      console.error(&#39;Content loading error:&#39;, error);\r\n      return {\r\n        title: &#39;\u30a8\u30e9\u30fc&#39;,\r\n        content: `\r\n          &lt;div class=&quot;linkModal-error&quot;&gt;\r\n            &lt;strong&gt;\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f&lt;\/strong&gt;&lt;br&gt;\r\n            \u30a8\u30e9\u30fc: ${error.message}&lt;br&gt;&lt;br&gt;\r\n            &lt;a href=&quot;${url}&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;\u65b0\u3057\u3044\u30bf\u30d6\u3067\u958b\u304f&lt;\/a&gt;\r\n          &lt;\/div&gt;\r\n        `\r\n      };\r\n    }\r\n  }\r\n\r\n  \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u9589\u3058\u308b\u95a2\u6570\r\n  function closeModal(modal) {\r\n    modal.classList.remove(&#39;is-opened&#39;);\r\n    document.body.classList.remove(&#39;is-dialoged&#39;);\r\n    \r\n    setTimeout(() =&gt; {\r\n      modal.remove();\r\n    }, 300);\r\n  }\r\n\r\n  \/\/\u5404\u30ea\u30f3\u30af\u306b\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\u3092\u8ffd\u52a0\r\n  arrModalLinks.forEach(function (modalLink) {\r\n    modalLink.addEventListener(&#39;click&#39;, async function (e) {\r\n      e.preventDefault();\r\n      \r\n      console.log(&#39;Modal link clicked:&#39;, this.href);\r\n\r\n      \/\/\u65e2\u5b58\u306e\u30e2\u30fc\u30c0\u30eb\u3092\u524a\u9664\r\n      removeExistingModal();\r\n\r\n      \/\/data\u5c5e\u6027\u304b\u3089\u30b5\u30a4\u30ba\u3092\u53d6\u5f97\uff08\u306a\u3051\u308c\u3070\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\uff09\r\n      const popWidth = parseInt(modalLink.getAttribute(&#39;data-popwidth&#39;)) || 800;\r\n      const popHeight = parseInt(modalLink.getAttribute(&#39;data-popheight&#39;)) || 600;\r\n      \r\n      \/\/\u4eee\u306e\u30bf\u30a4\u30c8\u30eb\u3067\u30e2\u30fc\u30c0\u30eb\u3092\u4f5c\u6210\r\n      const tempTitle = &#39;&#39;;\r\n      console.log(&#39;Creating modal:&#39;, { width: popWidth, height: popHeight, title: tempTitle });\r\n\r\n      \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u4f5c\u6210\r\n      const modal = createModal(popWidth, popHeight, tempTitle);\r\n      const contentContainer = modal.querySelector(&#39;.linkModal-content&#39;);\r\n      \r\n      \/\/\u30e2\u30fc\u30c0\u30eb\u3092\u8868\u793a\r\n      document.body.classList.add(&#39;is-dialoged&#39;);\r\n      setTimeout(() =&gt; {\r\n        modal.classList.add(&#39;is-opened&#39;);\r\n      }, 10);\r\n\r\n      \/\/\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u975e\u540c\u671f\u3067\u8aad\u307f\u8fbc\u307f\r\n      try {\r\n        const result = await loadContent(this.href);\r\n        console.log(&#39;Setting content to modal&#39;);\r\n        contentContainer.innerHTML = result.content;\r\n        \r\n        \/\/\u30ea\u30f3\u30af\u5148\u306e\u30bf\u30a4\u30c8\u30eb\u3067\u30e2\u30fc\u30c0\u30eb\u30bf\u30a4\u30c8\u30eb\u3092\u66f4\u65b0\r\n        const modalTitleElement = modal.querySelector(&#39;.linkModal-title&#39;);\r\n        if (modalTitleElement &amp;&amp; result.title) {\r\n          modalTitleElement.textContent = result.title;\r\n          console.log(&#39;Updated modal title to:&#39;, result.title);\r\n        }\r\n\r\n        \/\/\u8aad\u307f\u8fbc\u307f\u5b8c\u4e86\u5f8c\u306b\u753b\u50cf\u306e\u9045\u5ef6\u8aad\u307f\u8fbc\u307f\u3092\u7121\u52b9\u5316\r\n        const lazyImages = contentContainer.querySelectorAll(&#39;img[loading=&quot;lazy&quot;]&#39;);\r\n        lazyImages.forEach(img =&gt; {\r\n          img.removeAttribute(&#39;loading&#39;);\r\n        });\r\n        \r\n        console.log(&#39;Content loaded successfully&#39;);\r\n      } catch (error) {\r\n        console.error(&#39;Error loading content:&#39;, error);\r\n        contentContainer.innerHTML = `\r\n          &lt;div class=&quot;linkModal-error&quot;&gt;\r\n            &lt;strong&gt;\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f&lt;\/strong&gt;&lt;br&gt;\r\n            \u30a8\u30e9\u30fc: ${error.message}&lt;br&gt;&lt;br&gt;\r\n            &lt;a href=&quot;${this.href}&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;\u65b0\u3057\u3044\u30bf\u30d6\u3067\u958b\u304f&lt;\/a&gt;\r\n          &lt;\/div&gt;\r\n        `;\r\n      }\r\n\r\n      \/\/\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306e\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\r\n      const closeBtn = modal.querySelector(&#39;.linkModal-closer&#39;);\r\n      closeBtn.addEventListener(&#39;click&#39;, () =&gt; {\r\n        closeModal(modal);\r\n      });\r\n\r\n      \/\/\u80cc\u666f\u30af\u30ea\u30c3\u30af\u3067\u9589\u3058\u308b\r\n      modal.addEventListener(&#39;click&#39;, function (e) {\r\n        if (e.target === modal) {\r\n          closeModal(modal);\r\n        }\r\n      });\r\n\r\n      \/\/ESC\u30ad\u30fc\u3067\u9589\u3058\u308b\r\n      const escHandler = function (e) {\r\n        if (e.key === &#39;Escape&#39;) {\r\n          closeModal(modal);\r\n          document.removeEventListener(&#39;keydown&#39;, escHandler);\r\n        }\r\n      };\r\n      document.addEventListener(&#39;keydown&#39;, escHandler);\r\n    });\r\n  });\r\n\r\n  console.log(`_link-openModal.js: ${arrModalLinks.length} modal links initialized`);\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n<h2 class=\"fz-xl\">\u30b3\u30fc\u30c9\u306e\u8a73\u7d30\u89e3\u8aac<\/h2>\r\n\r\n<h3 class=\"fz-lg\">1. \u5bfe\u8c61\u30ea\u30f3\u30af\u306e\u81ea\u52d5\u691c\u51fa\u3068\u5909\u63db<\/h3>\r\n<pre><code class=\"language-javascript\">const config = {\r\n  containerSelector: &#39;.pt-cv-view.target-modal&#39;,\r\n  linkSelector: &#39;a[href][class*=&quot;_self&quot;]&#39;,\r\n  defaultWidth: &#39;800&#39;,\r\n  defaultHeight: &#39;500&#39;\r\n};\r\n<\/code><\/pre>\r\n<p>\u8a2d\u5b9a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u5bfe\u8c61\u7bc4\u56f2\u3068\u30c7\u30d5\u30a9\u30eb\u30c8\u30b5\u30a4\u30ba\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002<code>.target-modal<\/code>\u30af\u30e9\u30b9\u3092\u6301\u3064\u30b3\u30f3\u30c6\u30ca\u5185\u306e<code>_self<\/code>\u30af\u30e9\u30b9\u4ed8\u304d\u30ea\u30f3\u30af\u304c\u5bfe\u8c61\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">targetLinks.forEach(function(link) {\r\n  if (href &amp;&amp; link.classList.contains(&#39;_self&#39;)) {\r\n    link.setAttribute(&#39;target&#39;, &#39;_modal&#39;);\r\n    link.setAttribute(&#39;data-popwidth&#39;, containerWidth);\r\n    link.setAttribute(&#39;data-popheight&#39;, containerHeight);\r\n  }\r\n});\r\n<\/code><\/pre>\r\n<p>\u5bfe\u8c61\u30ea\u30f3\u30af\u306b<code>target=&quot;_modal&quot;<\/code>\u5c5e\u6027\u3068\u30b5\u30a4\u30ba\u60c5\u5831\u3092\u81ea\u52d5\u4ed8\u4e0e\u3057\u307e\u3059\u3002<\/p>\r\n\r\n<h3 class=\"fz-lg\">2. \u30e2\u30fc\u30c0\u30eb\u306e\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0<\/h3>\r\n<pre><code class=\"language-javascript\">const modalStyle = document.createElement(&#39;style&#39;);\r\nmodalStyle.textContent = `\r\n.linkModal.linkModal-container {\r\n  position: fixed;\r\n  z-index: 9999;\r\n  inset: calc(var(--\u215dfem) * 5) 0 0 0;\r\n  \/* ... *\/\r\n}\r\n`;\r\ndocument.head.appendChild(modalStyle);\r\n<\/code><\/pre>\r\n<p>CSS-in-JS\u3067\u30e2\u30fc\u30c0\u30eb\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u52d5\u7684\u306b\u8ffd\u52a0\u3002\u5916\u90e8CSS\u30d5\u30a1\u30a4\u30eb\u4e0d\u8981\u3067\u5b8c\u5168\u306b\u81ea\u5df1\u5b8c\u7d50\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\r\n\r\n<h3 class=\"fz-lg\">3. \u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u53d6\u5f97\u3068\u51e6\u7406<\/h3>\r\n<pre><code class=\"language-javascript\">async function loadContent(url) {\r\n  const response = await fetch(url);\r\n  const text = await response.text();\r\n  const extracted = extractContent(text);\r\n  return extracted;\r\n}\r\n<\/code><\/pre>\r\n<p><code>fetch()<\/code>API\u3067\u30ea\u30f3\u30af\u5148\u306eHTML\u3092\u975e\u540c\u671f\u53d6\u5f97\u3057\u307e\u3059\u3002<\/p>\r\n<pre><code class=\"language-javascript\">function extractContent(html) {\r\n  const parser = new DOMParser();\r\n  const doc = parser.parseFromString(html, &#39;text\/html&#39;);\r\n  \r\n  \/\/ \u30bf\u30a4\u30c8\u30eb\u62bd\u51fa\u3068\u30b5\u30a4\u30c8\u540d\u30c8\u30ea\u30e0\r\n  const titleElement = doc.querySelector(&#39;title&#39;);\r\n  const siteName = &#39;- [\u30b5\u30a4\u30c8\u540d.jp]&#39;;\r\n  cleanTitle = fullTitle.replace(siteName, &#39;&#39;).trim();\r\n  \r\n  \/\/ \u4e0d\u8981\u8981\u7d20\u306e\u524a\u9664\r\n  const elementsToRemove = [\r\n    &#39;#wpadminbar&#39;, &#39;.header&#39;, &#39;.footer&#39;, &#39;.breadcrumb&#39;\r\n  ];\r\n}\r\n<\/code><\/pre>\r\n<p>HTML\u3092\u30d1\u30fc\u30b9\u3057\u3001\u30bf\u30a4\u30c8\u30eb\u304b\u3089\u30b5\u30a4\u30c8\u540d\u3092\u9664\u53bb\u3001\u4e0d\u8981\u306a\u8981\u7d20\uff08\u30d8\u30c3\u30c0\u30fc\u3001\u30d5\u30c3\u30bf\u30fc\u7b49\uff09\u3092\u81ea\u52d5\u524a\u9664\u3057\u3066\u30b3\u30f3\u30c6\u30f3\u30c4\u306e\u307f\u3092\u62bd\u51fa\u3057\u307e\u3059\u3002<\/p>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u65b9\u6cd5<\/h2>\r\n\r\n<h3 class=\"fz-lg\">1. \u30c7\u30b6\u30a4\u30f3\u306e\u5909\u66f4<\/h3>\r\n<p>\u30b9\u30bf\u30a4\u30eb\u90e8\u5206\u3092\u4fee\u6b63\u3057\u3066\u30c7\u30b6\u30a4\u30f3\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3067\u304d\u307e\u3059\uff1a<\/p>\r\n<pre><code class=\"language-javascript\">modalStyle.textContent = `\r\n.linkModal-wrapper {\r\n  background: #f0f0f0;                  \/* \u80cc\u666f\u8272\u5909\u66f4 *\/\r\n  border-radius: 12px;                      \/* \u89d2\u4e38\u8abf\u6574 *\/\r\n  box-shadow: 0 8px 32px rgba(0,0,0,0.3); \/* \u5f71\u306e\u8abf\u6574 *\/\r\n}\r\n\r\n.linkModal-header {\r\n  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%); \/* \u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3 *\/\r\n  color: white;\r\n}\r\n`;\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">2. \u30b5\u30a4\u30c8\u540d\u306e\u5909\u66f4<\/h3>\r\n<p>\u30bf\u30a4\u30c8\u30eb\u51e6\u7406\u90e8\u5206\u3067\u30b5\u30a4\u30c8\u540d\u3092\u5909\u66f4\uff1a<\/p>\r\n<pre><code class=\"language-javascript\">const siteName = &#39;- [\u30b5\u30a4\u30c8\u540d.jp]&#39;; \/\/ \u3053\u3053\u3092\u5909\u66f4\r\ncleanTitle = fullTitle.replace(siteName, &#39;&#39;).trim();\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">3. \u4e0d\u8981\u8981\u7d20\u306e\u8ffd\u52a0\u524a\u9664<\/h3>\r\n<p>\u524a\u9664\u5bfe\u8c61\u8981\u7d20\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\uff1a<\/p>\r\n<pre><code class=\"language-javascript\">const elementsToRemove = [\r\n  &#39;#wpadminbar&#39;,\r\n  &#39;.header&#39;,\r\n  &#39;.footer&#39;, \r\n  &#39;.sidebar&#39;,        \/\/ \u30b5\u30a4\u30c9\u30d0\u30fc\u8ffd\u52a0\r\n  &#39;.comments&#39;,       \/\/ \u30b3\u30e1\u30f3\u30c8\u6b04\u8ffd\u52a0\r\n  &#39;.related-posts&#39;   \/\/ \u95a2\u9023\u8a18\u4e8b\u8ffd\u52a0\r\n];\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">4. \u5bfe\u8c61\u30ea\u30f3\u30af\u306e\u6761\u4ef6\u5909\u66f4<\/h3>\r\n<p>\u30af\u30e9\u30b9\u540d\u30d9\u30fc\u30b9\u3067\u306f\u306a\u304f\u3001URL \u30d1\u30bf\u30fc\u30f3\u3067\u5224\u5b9a\u3057\u305f\u3044\u5834\u5408\uff1a<\/p>\r\n<pre><code class=\"language-javascript\">\/\/ \u73fe\u5728\u306e\u65b9\u5f0f\uff08\u30af\u30e9\u30b9\u540d\u30d9\u30fc\u30b9\uff09\r\nlinkSelector: &#39;a[href][class*=&quot;_self&quot;]&#39;,\r\n\r\n\/\/ URL \u30d1\u30bf\u30fc\u30f3\u30d9\u30fc\u30b9\u306b\u5909\u66f4\r\nconst urlPattern = \/\\\/post-\\d+\\\/$\/;\r\nif (href &amp;&amp; urlPattern.test(href)) {\r\n  \/\/ \u51e6\u7406\r\n}\r\n<\/code><\/pre>\r\n\r\n<h3 class=\"fz-lg\">5. \u30e2\u30fc\u30c0\u30eb\u30b5\u30a4\u30ba\u306e\u500b\u5225\u8a2d\u5b9a<\/h3>\r\n<p>\u30b3\u30f3\u30c6\u30ca\u3054\u3068\u306b\u7570\u306a\u308b\u30b5\u30a4\u30ba\u3092\u8a2d\u5b9a\uff1a<\/p>\r\n<pre><code class=\"language-html\">&lt;!-- \u5927\u304d\u306a\u30e2\u30fc\u30c0\u30eb --&gt;\r\n&lt;div class=&quot;pt-cv-view target-modal&quot; data-modal-width=&quot;1200&quot; data-modal-height=&quot;800&quot;&gt;\r\n  &lt;!-- \u30ea\u30f3\u30af\u3053\u3053 --&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;!-- \u5c0f\u3055\u306a\u30e2\u30fc\u30c0\u30eb --&gt;\r\n&lt;div class=&quot;pt-cv-view target-modal&quot; data-modal-width=&quot;600&quot; data-modal-height=&quot;400&quot;&gt;\r\n  &lt;!-- \u30ea\u30f3\u30af\u3053\u3053 --&gt;\r\n&lt;\/div&gt;\r\n<\/code><\/pre>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u5b9f\u88c5\u6642\u306e\u6ce8\u610f\u70b9<\/h2>\r\n\r\n<h3 class=\"fz-lg\">\u540c\u4e00\u30aa\u30ea\u30b8\u30f3\u5236\u9650<\/h3>\r\n<p>\u3053\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306f\u540c\u4e00\u30c9\u30e1\u30a4\u30f3\u5185\u306e\u30da\u30fc\u30b8\u306b\u306e\u307f\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002\u5916\u90e8\u30b5\u30a4\u30c8\u3092\u8868\u793a\u3057\u305f\u3044\u5834\u5408\u306f<code>&lt;iframe&gt;<\/code>\u3092\u4f7f\u7528\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\r\n\r\n\r\n<h2 class=\"fz-xl\">\u307e\u3068\u3081<\/h2>\r\n<p>\u3053\u306e\u5b9f\u88c5\u306b\u3088\u308a\u3001WordPress\u30b5\u30a4\u30c8\u3084\u9759\u7684\u30b5\u30a4\u30c8\u3067\u7c21\u5358\u306b\u30e2\u30fc\u30c0\u30eb\u8868\u793a\u6a5f\u80fd\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002\u307e\u305f\u3001Content Views\u30d7\u30e9\u30b0\u30a4\u30f3\u7b49\u3067\u306e\u8a18\u4e8b\u4e00\u89a7\u304b\u3089\u3067\u3082\u30e2\u30fc\u30c0\u30eb\u8868\u793a\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\r\n<p>\u30b3\u30fc\u30c9\u306f\u5b8c\u5168\u306b\u81ea\u5df1\u5b8c\u7d50\u3057\u3066\u304a\u308a\u3001\u5916\u90e8\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u4f9d\u5b58\u3057\u306a\u3044\u305f\u3081\u3001\u8efd\u91cf\u3067\u5c0e\u5165\u3082\u7c21\u5358\u3067\u3059\u3002\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6027\u3082\u9ad8\u304f\u3001\u69d8\u3005\u306a\u30b5\u30a4\u30c8\u306e\u30c7\u30b6\u30a4\u30f3\u306b\u5408\u308f\u305b\u3066\u8abf\u6574\u53ef\u80fd\u3067\u3059\u3002<\/p>","protected":false},"excerpt":{"rendered":"Web\u30b5\u30a4\u30c8\u3067\u5185\u90e8\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u969b\u3001\u65b0\u3057\u3044\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3059\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u30e2\u30fc\u30c0\u30eb\uff08\u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u30a6\u30a3\u30f3\u30c9\u30a6\uff09\u3067\u8868\u793a\u3059\u308b\u4ed5\u7d44\u307f\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002WordPress\u306eContent Views\u30d7\u30e9\u30b0\u30a4\u30f3\u306a\u3069\u3001\u8a18\u4e8b\u4e00[...]","protected":false},"author":1,"featured_media":8703,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","footnotes":"","vk-ltc-link":"","vk-ltc-target":"0"},"categories":[12],"tags":[119,113,117,114,118,102,115,116],"class_list":["post-8691","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","tag-119","tag-javascript","tag-css-in-js","tag-114","tag-ux","tag-wordpress","tag-dom","tag-fetch-api"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/8691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/comments?post=8691"}],"version-history":[{"count":0,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/posts\/8691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media\/8703"}],"wp:attachment":[{"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/media?parent=8691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/categories?post=8691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-plus.jp\/gp\/wp-json\/wp\/v2\/tags?post=8691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}