{"id":43,"date":"2026-10-10T14:26:53","date_gmt":"2026-10-10T14:26:53","guid":{"rendered":"https:\/\/bsolution.me\/ja\/blog\/"},"modified":"2026-10-10T14:49:57","modified_gmt":"2026-10-10T14:49:57","slug":"blog","status":"publish","type":"page","link":"https:\/\/bsolution.me\/ja\/blog\/","title":{"rendered":"\u8a18\u4e8b"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"display: flex; justify-content: center; width: 100%;\">\n\n<div style=\"width: 100%; max-width: 1100px; margin: 0 auto;\">\n<!-- ===================================================\n   Bsolution Posts Directory \u2014 WPCode-Ready Snippet\n   \u05de\u05e6\u05d9\u05d2 \u05d0\u05ea \u05db\u05dc \u05d4\u05de\u05d0\u05de\u05e8\u05d9\u05dd (post type=post) \u05de\u05d4-REST API\n   \u05d1\u05e2\u05d9\u05e6\u05d5\u05d1 Gold Standard: \u05d7\u05d9\u05e4\u05d5\u05e9 + \u05e4\u05d9\u05dc\u05d8\u05e8 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea + Pagination\n   =================================================== -->\n<style>\n#bso-posts {\n  font-family: 'Heebo', system-ui, sans-serif;\n  direction: ltr;\n  --accent:      #4361ee;\n  --accent-soft: rgba(67,97,238,0.09);\n  --border:      rgba(17,24,39,0.09);\n  --card:        #fff;\n  --bg:          #f8fafc;\n  --muted:       #64748b;\n  --text:        #111827;\n  --shadow:      0 4px 16px rgba(0,0,0,0.07);\n  --radius:      16px;\n  color: var(--text);\n  padding: 12px 24px 48px;\n  max-width: 1100px;\n  margin: 0 auto;\n  box-sizing: border-box;\n}\n@media (max-width: 600px) {\n  #bso-posts { padding: 8px 14px 32px; }\n}\nhtml.dark-theme #bso-posts,\n[data-theme=\"dark\"] #bso-posts {\n  --border: rgba(255,255,255,0.10);\n  --card:   rgba(28,28,30,0.9);\n  --bg:     rgba(17,24,39,0.6);\n  --muted:  #9ca3af;\n  --text:   #f5f5f7;\n  --shadow: 0 4px 16px rgba(0,0,0,0.35);\n}\n\n\/* \u2500\u2500 Hero \u2500\u2500 *\/\n#bso-posts .p-hero {\n  text-align: center;\n  padding: 40px 20px 36px;\n  background: linear-gradient(135deg, var(--accent-soft), transparent 70%);\n  border: 1px solid var(--border);\n  border-radius: 24px;\n  margin-bottom: 28px;\n}\n#bso-posts .p-hero h2 {\n  font-size: clamp(1.7rem, 4vw, 2.4rem);\n  font-weight: 800;\n  margin: 0 0 10px;\n  letter-spacing: -.02em;\n  color: var(--text);\n}\n#bso-posts .p-hero p {\n  color: var(--muted);\n  font-size: 1rem;\n  margin: 0 auto 18px;\n  max-width: 560px;\n  line-height: 1.7;\n}\n#bso-posts .p-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  background: var(--accent);\n  color: #fff;\n  padding: 7px 18px;\n  border-radius: 999px;\n  font-size: .85rem;\n  font-weight: 700;\n}\n\n\/* \u2500\u2500 Controls bar (search + category filter) \u2500\u2500 *\/\n#bso-posts .p-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 28px;\n  align-items: center;\n}\n#bso-posts .p-search-wrap {\n  position: relative;\n  flex: 1 1 240px;\n}\n#bso-posts #pSearch {\n  width: 100%;\n  padding: 12px 42px 12px 16px;\n  border-radius: 12px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--text);\n  font-family: inherit;\n  font-size: .97rem;\n  box-sizing: border-box;\n  outline: none;\n  box-shadow: var(--shadow);\n  transition: border-color .2s, box-shadow .2s;\n}\n#bso-posts #pSearch:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px rgba(67,97,238,0.13);\n}\n#bso-posts .p-search-icon {\n  position: absolute;\n  left: 13px;\n  top: 50%;\n  transform: translateY(-50%);\n  opacity: .38;\n  pointer-events: none;\n  font-size: 1rem;\n}\n\n\/* Category chips *\/\n#bso-posts .p-cats {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  flex: 0 0 auto;\n}\n#bso-posts .p-cat-chip {\n  padding: 7px 15px;\n  border-radius: 999px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--muted);\n  font-size: .83rem;\n  font-weight: 700;\n  cursor: pointer;\n  transition: background .18s, color .18s, border-color .18s;\n  font-family: inherit;\n}\n#bso-posts .p-cat-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: rgba(67,97,238,.25); }\n#bso-posts .p-cat-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }\n\n\/* \u2500\u2500 Skeleton \u2500\u2500 *\/\n#bso-posts .p-skeleton { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: 20px; }\n#bso-posts .p-skel-card {\n  height: 320px;\n  border-radius: var(--radius);\n  background: linear-gradient(90deg, var(--bg) 25%, var(--border) 50%, var(--bg) 75%);\n  background-size: 200% 100%;\n  animation: bsoPShimmer 1.3s infinite;\n  border: 1px solid var(--border);\n}\n@keyframes bsoPShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }\n\n\/* \u2500\u2500 Grid \u2500\u2500 *\/\n#bso-posts .p-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 20px;\n  margin-bottom: 40px;\n}\n\n\/* \u2500\u2500 Card \u2500\u2500 *\/\n#bso-posts .p-card {\n  display: flex;\n  flex-direction: column;\n  background: var(--card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow);\n  text-decoration: none !important;\n  color: var(--text) !important;\n  overflow: hidden;\n  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n}\n#bso-posts .p-card:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 16px 32px rgba(0,0,0,0.11);\n  border-color: rgba(67,97,238,0.3);\n}\n#bso-posts .p-card-img {\n  width: 100%;\n  aspect-ratio: 16\/9;\n  overflow: hidden;\n  background: var(--bg);\n  position: relative;\n}\n#bso-posts .p-card-img img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform .45s ease;\n  display: block;\n}\n#bso-posts .p-card:hover .p-card-img img { transform: scale(1.06); }\n\n\/* placeholder when no image *\/\n#bso-posts .p-card-img-placeholder {\n  width: 100%;\n  aspect-ratio: 16\/9;\n  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg) 100%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 2.8rem;\n  flex-shrink: 0;\n}\n\n#bso-posts .p-card-body {\n  padding: 18px 18px 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n#bso-posts .p-card-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n#bso-posts .p-cat-label {\n  font-size: .76rem;\n  font-weight: 700;\n  color: var(--accent);\n  background: var(--accent-soft);\n  padding: 3px 10px;\n  border-radius: 999px;\n}\n\n#bso-posts .p-card-title {\n  font-size: 1.05rem;\n  font-weight: 800;\n  margin: 0;\n  line-height: 1.4;\n  color: var(--text);\n  transition: color .18s;\n}\n#bso-posts .p-card:hover .p-card-title { color: var(--accent); }\n#bso-posts .p-card-excerpt {\n  font-size: .87rem;\n  line-height: 1.65;\n  color: var(--muted);\n  margin: 0;\n  flex: 1;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n#bso-posts .p-card-foot {\n  padding: 12px 18px 14px;\n  border-top: 1px solid var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: .82rem;\n  color: var(--muted);\n  margin-top: auto;\n}\n#bso-posts .p-read-more {\n  font-weight: 700;\n  color: var(--accent) !important;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  transition: gap .15s;\n}\n#bso-posts .p-card:hover .p-read-more { gap: 9px; }\n\n\/* \u2500\u2500 Pagination \u2500\u2500 *\/\n#bso-posts .p-pagination {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 8px;\n}\n#bso-posts .p-page-btn {\n  min-width: 42px;\n  height: 42px;\n  padding: 0 12px;\n  border-radius: 10px;\n  border: 1.5px solid var(--border);\n  background: var(--card);\n  color: var(--text);\n  font-family: inherit;\n  font-size: .92rem;\n  font-weight: 700;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background .17s, border-color .17s, transform .17s;\n  text-decoration: none !important;\n}\n#bso-posts .p-page-btn:hover { background: var(--accent-soft); border-color: rgba(67,97,238,.3); transform: translateY(-2px); }\n#bso-posts .p-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }\n#bso-posts .p-page-btn:disabled { opacity: .35; cursor: default; transform: none; }\n\n\/* \u2500\u2500 No results \u2500\u2500 *\/\n#bso-posts .p-no-res {\n  display: none;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--muted);\n  border: 1px dashed var(--border);\n  border-radius: var(--radius);\n  background: var(--bg);\n}\n#bso-posts .p-no-res.show { display: block; }\n\n\/* \u2500\u2500 Error \u2500\u2500 *\/\n#bso-posts .p-error { text-align: center; padding: 50px; color: var(--muted); }\n\n\/* \u2500\u2500 Responsive \u2500\u2500 *\/\n@media (max-width: 700px) {\n  #bso-posts .p-grid { grid-template-columns: 1fr; gap: 16px; }\n  #bso-posts .p-skeleton { grid-template-columns: 1fr; }\n  #bso-posts .p-controls { flex-direction: column; }\n  #bso-posts .p-search-wrap { width: 100%; }\n}\n<\/style>\n\n<div id=\"bso-posts\">\n\n  <!-- Hero -->\n  <div class=\"p-hero\">\n    <h2>\ud83d\udcf0 \u3059\u3079\u3066\u306e\u8a18\u4e8b<\/h2>\n    <p>\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002<\/p>\n    <div class=\"p-badge\" id=\"pCount\">\u23f3 \u8aad\u307f\u8fbc\u307f\u4e2d&#8230;<\/div>\n  <\/div>\n\n  <!-- Controls: Search + Category Filter -->\n  <div class=\"p-controls\">\n    <div class=\"p-search-wrap\">\n      <input type=\"search\" id=\"pSearch\" placeholder=\"\u8a18\u4e8b\u3092\u691c\u7d22... (\u4f8b\uff1a\u30de\u30fc\u30b1\u30c6\u30a3\u30f3\u30b0\u3001SEO\u3001\u81ea\u52d5\u5316)\" aria-label=\"\u05d7\u05d9\u05e4\u05d5\u05e9 \u4ef6\u306e\u8a18\u4e8b\" \/>\n      <span class=\"p-search-icon\">\ud83d\udd0d<\/span>\n    <\/div>\n    <div class=\"p-cats\" id=\"pCats\">\n      <!-- chips injected by JS -->\n    <\/div>\n  <\/div>\n\n  <!-- No results -->\n  <div class=\"p-no-res\" id=\"pNoRes\">\n    <p style=\"font-size:2rem;margin:0 0 10px\">\ud83d\udd0d<\/p>\n    <p style=\"font-weight:800;margin:0 0 6px\">\u4e00\u81f4\u3059\u308b\u8a18\u4e8b\u306f\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f<\/p>\n    <p style=\"margin:0\">\u4ed6\u306e\u691c\u7d22\u8a9e\u3092\u8a66\u3059\u304b\u3001\u5225\u306e\u30ab\u30c6\u30b4\u30ea\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n  <\/div>\n\n  <!-- Skeleton loader -->\n  <div id=\"pSkeleton\" class=\"p-skeleton\">\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n    <div class=\"p-skel-card\"><\/div><div class=\"p-skel-card\"><\/div>\n  <\/div>\n\n  <!-- Posts grid -->\n  <div id=\"pGrid\" class=\"p-grid\" style=\"display:none;\"><\/div>\n\n  <!-- Pagination -->\n  <div class=\"p-pagination\" id=\"pPagination\"><\/div>\n\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* \u2500\u2500 \u05e7\u05d5\u05e0\u05e4\u05d9\u05d2\u05d5\u05e8\u05e6\u05d9\u05d4 \u2500\u2500 *\/\n  var API_BASE      = 'https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/posts';\n  var API_CATS      = 'https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/categories';\n  var PER_PAGE      = 9;   \/* \u05db\u05e8\u05d8\u05d9\u05e1\u05d9\u05d5\u05ea \u05dc\u05e2\u05de\u05d5\u05d3 *\/\n  var FETCH_BATCH   = 100; \/* \u05db\u05de\u05d5\u05ea \u05e9\u05dc\u05d9\u05e4\u05d4 \u05de-API *\/\n\n  \/* \u2500\u2500 State \u2500\u2500 *\/\n  var allPosts      = [];  \/* \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd \u05dc\u05d0\u05d7\u05e8 \u05e9\u05d0\u05d9\u05dc\u05ea\u05d4 *\/\n  var filteredPosts = [];  \/* \u05dc\u05d0\u05d7\u05e8 \u05e1\u05d9\u05e0\u05d5\u05df *\/\n  var catMap        = {};  \/* id \u2192 name *\/\n  var currentPage   = 1;\n  var activeCat     = 0;   \/* 0 = \u3059\u3079\u3066 *\/\n  var searchQuery   = '';\n\n  \/* \u2500\u2500 \u05d0\u05dc\u05de\u05e0\u05d8\u05d9\u05dd \u2500\u2500 *\/\n  var $count      = document.getElementById('pCount');\n  var $skeleton   = document.getElementById('pSkeleton');\n  var $grid       = document.getElementById('pGrid');\n  var $noRes      = document.getElementById('pNoRes');\n  var $pagination = document.getElementById('pPagination');\n  var $catsWrap   = document.getElementById('pCats');\n  var $search     = document.getElementById('pSearch');\n\n  \/* \u2500\u2500 \u05e2\u05d6\u05e8\u05d9\u05dd \u2500\u2500 *\/\n  function esc(s) {\n    return String(s)\n      .replace(\/&\/g,'&amp;').replace(\/\"\/g,'&quot;')\n      .replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;');\n  }\n\n  function formatDate(iso) {\n    var d = new Date(iso);\n    return d.toLocaleDateString('ja-JP', { year:'numeric', month:'long', day:'numeric' });\n  }\n\n  function readingTime(content) {\n    var words = (content || '').replace(\/<[^>]+>\/g,'').split(\/\\s+\/).length;\n    return Math.max(1, Math.ceil(words \/ 200));\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dc\u05d9\u05e4\u05ea \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u2500\u2500 *\/\n  function fetchCategories() {\n    return fetch(API_CATS + '?per_page=100&_fields=id,name', { cache: 'no-store' })\n      .then(function (r) { return r.json(); })\n      .then(function (cats) {\n        cats.forEach(function (c) { catMap[c.id] = c.name; });\n      })\n      .catch(function () {}); \/* \u05dc\u05d0 \u05e7\u05e8\u05d9\u05d8\u05d9 *\/\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dc\u05d9\u05e4\u05ea \u05db\u05dc \u05d4\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd (pagination) \u2500\u2500 *\/\n  function fetchAllPosts() {\n    var url = API_BASE + '?status=publish&per_page=' + FETCH_BATCH +\n              '&page=1&_fields=id,title,link,excerpt,date,categories,featured_media,_links';\n    return fetch(url, { cache: 'no-store' })\n      .then(function (r) {\n        var totalPages = parseInt(r.headers.get('X-WP-TotalPages') || '1', 10);\n        return r.json().then(function (first) {\n          if (totalPages <= 1) return first;\n          var reqs = [];\n          for (var p = 2; p <= totalPages; p++) {\n            reqs.push(\n              fetch(API_BASE + '?status=publish&#038;per_page=' + FETCH_BATCH +\n                    '&#038;page=' + p + '&#038;_fields=id,title,link,excerpt,date,categories,featured_media,_links')\n              .then(function (r2) { return r2.json(); })\n            );\n          }\n          return Promise.all(reqs).then(function (rest) {\n            return first.concat([].concat.apply([], rest));\n          });\n        });\n      });\n  }\n\n  \/* \u2500\u2500 \u05e7\u05d1\u05dc\u05ea \u05ea\u05de\u05d5\u05e0\u05d4 \u05de\u05d9\u05d5\u05e6\u05d2\u05ea \u2500\u2500 *\/\n  function getThumb(post) {\n    \/* \u05e0\u05e1\u05d4 \u05d1-_embedded \u05d0\u05dd \u05e7\u05d9\u05d9\u05dd, \u05d0\u05d7\u05e8\u05ea \u05d4\u05d7\u05d6\u05e8 \u05e8\u05d9\u05e7 *\/\n    try {\n      var media = post._embedded &#038;&#038; post._embedded['wp:featuredmedia'];\n      if (media &#038;&#038; media[0] &#038;&#038; media[0].source_url) return media[0].source_url;\n    } catch(e) {}\n    return '';\n  }\n\n  \/* \u2500\u2500 \u05e9\u05dd \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 \u05e8\u05d0\u05e9\u05d5\u05e0\u05d4 \u2500\u2500 *\/\n  function getCatName(post) {\n    if (post.categories &#038;&#038; post.categories.length) {\n      return catMap[post.categories[0]] || '';\n    }\n    return '';\n  }\n\n  \/* \u2500\u2500 \u05d1\u05e0\u05d9\u05d9\u05ea \u05db\u05e8\u05d8\u05d9\u05e1\u05d9\u05d9\u05d4 \u2500\u2500 *\/\n  function buildCard(post) {\n    var title   = (post.title &#038;&#038; post.title.rendered ? post.title.rendered : '').replace(\/<[^>]+>\/g,'');\n    var excerpt = (post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '').replace(\/<[^>]+>\/g,'').trim();\n    var date    = formatDate(post.date);\n    var cat     = getCatName(post);\n    var thumb   = getThumb(post);\n    var rt      = readingTime(post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '');\n    var url     = post.link || '#';\n\n    var imgHtml;\n    if (thumb) {\n      imgHtml = '<div class=\"p-card-img\"><img decoding=\"async\" src=\"' + esc(thumb) + '\" alt=\"' + esc(title) + '\" loading=\"lazy\"><\/div>';\n    } else {\n      imgHtml = '<div class=\"p-card-img-placeholder\">\ud83d\udcf0<\/div>';\n    }\n\n    return '<a class=\"p-card\" href=\"' + esc(url) + '\" aria-label=\"' + esc(title) + '\"' +\n      ' data-title=\"' + esc(title.toLowerCase()) + '\"' +\n      ' data-excerpt=\"' + esc(excerpt.toLowerCase()) + '\"' +\n      ' data-cat=\"' + esc(post.categories ? post.categories[0] : 0) + '\">' +\n      imgHtml +\n      '<div class=\"p-card-body\">' +\n        '<div class=\"p-card-meta\">' +\n          (cat ? '<span class=\"p-cat-label\">' + esc(cat) + '<\/span>' : '') +\n\n        '<\/div>' +\n        '<h3 class=\"p-card-title\">' + esc(title) + '<\/h3>' +\n        (excerpt ? '<p class=\"p-card-excerpt\">' + esc(excerpt) + '<\/p>' : '') +\n      '<\/div>' +\n      '<div class=\"p-card-foot\">' +\n        '<span>' + rt + ' \u5206\u306e\u95b2\u89a7<\/span>' +\n        '<span class=\"p-read-more\">\u7d9a\u304d\u3092\u8aad\u3080 \u2192<\/span>' +\n      '<\/div>' +\n    '<\/a>';\n  }\n\n  \/* \u2500\u2500 render \u05e2\u05de\u05d5\u05d3 \u05e0\u05d5\u05db\u05d7\u05d9 \u2500\u2500 *\/\n  function renderPage() {\n    var start = (currentPage - 1) * PER_PAGE;\n    var slice = filteredPosts.slice(start, start + PER_PAGE);\n\n    if (!slice.length) {\n      $grid.style.display = 'none';\n      $noRes.classList.add('show');\n      $pagination.innerHTML = '';\n      return;\n    }\n\n    $noRes.classList.remove('show');\n    $grid.innerHTML = slice.map(buildCard).join('');\n    $grid.style.display = 'grid';\n    renderPagination();\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n\n  \/* \u2500\u2500 render pagination \u2500\u2500 *\/\n  function renderPagination() {\n    var totalPages = Math.ceil(filteredPosts.length \/ PER_PAGE);\n    if (totalPages <= 1) { $pagination.innerHTML = ''; return; }\n\n    var html = '';\n    html += '<button class=\"p-page-btn\" id=\"pPrev\" aria-label=\"\u524d\u306e\u30da\u30fc\u30b8\"' +\n            (currentPage === 1 ? ' disabled' : '') + '>\u2192<\/button>';\n\n    \/* \u05de\u05e1\u05e4\u05e8\u05d9\u05dd: \u05ea\u05de\u05d9\u05d3 \u05e8\u05d0\u05e9\u05d5\u05df, \u05d0\u05d7\u05e8\u05d5\u05df, \u00b12 \u05e1\u05d1\u05d9\u05d1 \u05d4\u05e0\u05d5\u05db\u05d7\u05d9 *\/\n    var pages = [];\n    for (var i = 1; i <= totalPages; i++) {\n      if (i === 1 || i === totalPages || Math.abs(i - currentPage) <= 2) {\n        pages.push(i);\n      }\n    }\n    var prev = 0;\n    pages.forEach(function (n) {\n      if (prev &#038;&#038; n - prev > 1) html += '<span class=\"p-page-btn\" style=\"pointer-events:none;opacity:.4\">\u2026<\/span>';\n      html += '<button class=\"p-page-btn' + (n === currentPage ? ' active' : '') +\n              '\" data-page=\"' + n + '\">' + n + '<\/button>';\n      prev = n;\n    });\n\n    html += '<button class=\"p-page-btn\" id=\"pNext\" aria-label=\"\u6b21\u306e\u30da\u30fc\u30b8\"' +\n            (currentPage === totalPages ? ' disabled' : '') + '>\u2190<\/button>';\n    $pagination.innerHTML = html;\n\n    \/* Events *\/\n    $pagination.querySelectorAll('[data-page]').forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        currentPage = parseInt(this.dataset.page, 10);\n        renderPage();\n      });\n    });\n    var prev_btn = document.getElementById('pPrev');\n    var next_btn = document.getElementById('pNext');\n    if (prev_btn) prev_btn.addEventListener('click', function () {\n      if (currentPage > 1) { currentPage--; renderPage(); }\n    });\n    if (next_btn) next_btn.addEventListener('click', function () {\n      var total = Math.ceil(filteredPosts.length \/ PER_PAGE);\n      if (currentPage < total) { currentPage++; renderPage(); }\n    });\n  }\n\n  \/* \u2500\u2500 \u05e1\u05d9\u05e0\u05d5\u05df \u2500\u2500 *\/\n  function applyFilters() {\n    var q = searchQuery.trim().toLowerCase();\n    filteredPosts = allPosts.filter(function (post) {\n      var catMatch = !activeCat || (post.categories &#038;&#038; post.categories.indexOf(activeCat) !== -1);\n      if (!catMatch) return false;\n      if (!q) return true;\n      var t = (post.title &#038;&#038; post.title.rendered ? post.title.rendered : '').replace(\/<[^>]+>\/g,'').toLowerCase();\n      var e = (post.excerpt && post.excerpt.rendered ? post.excerpt.rendered : '').replace(\/<[^>]+>\/g,'').toLowerCase();\n      return t.includes(q) || e.includes(q);\n    });\n    currentPage = 1;\n    renderPage();\n  }\n\n  \/* \u2500\u2500 Category chips \u2500\u2500 *\/\n  function buildCatChips() {\n    \/* \u05de\u05d5\u05e6\u05d0 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d5\u05ea \u05e9\u05de\u05d5\u05e4\u05d9\u05e2\u05d5\u05ea \u05d1\u05e4\u05d5\u05e2\u05dc \u05d1\u05e4\u05d5\u05e1\u05d8\u05d9\u05dd *\/\n    var usedCats = {};\n    allPosts.forEach(function (p) {\n      (p.categories || []).forEach(function (cid) {\n        if (catMap[cid]) usedCats[cid] = catMap[cid];\n      });\n    });\n\n    var ids = Object.keys(usedCats);\n    if (!ids.length) return;\n\n    var html = '<button class=\"p-cat-chip active\" data-cat=\"0\">\u3059\u3079\u3066<\/button>';\n    ids.forEach(function (id) {\n      html += '<button class=\"p-cat-chip\" data-cat=\"' + id + '\">' + esc(usedCats[id]) + '<\/button>';\n    });\n    $catsWrap.innerHTML = html;\n\n    $catsWrap.querySelectorAll('.p-cat-chip').forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        $catsWrap.querySelectorAll('.p-cat-chip').forEach(function (b) { b.classList.remove('active'); });\n        this.classList.add('active');\n        activeCat = parseInt(this.dataset.cat, 10);\n        applyFilters();\n      });\n    });\n  }\n\n  \/* \u2500\u2500 Search \u2500\u2500 *\/\n  $search.addEventListener('input', function () {\n    searchQuery = this.value;\n    applyFilters();\n  });\n\n  \/* \u2500\u2500 Init \u2500\u2500 *\/\n  Promise.all([fetchCategories(), fetchAllPosts()])\n    .then(function (results) {\n      allPosts = results[1];\n      filteredPosts = allPosts.slice();\n\n      $skeleton.style.display = 'none';\n\n      $count.textContent = '\u2705 ' + allPosts.length + ' \u4ef6\u306e\u8a18\u4e8b';\n      buildCatChips();\n      renderPage();\n    })\n    .catch(function (err) {\n      $skeleton.style.display = 'none';\n      $grid.innerHTML = '<div class=\"p-error\"><p>\u26a0\ufe0f \u8a18\u4e8b\u306e\u8aad\u307f\u8fbc\u307f\u30a8\u30e9\u30fc\u3002<br><small>' + esc(err.message) + '<\/small><\/p><\/div>';\n      $grid.style.display = 'block';\n      console.error('bso-posts:', err);\n    });\n\n})();\n<\/script>\n\n\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_title":"\u8a18\u4e8b - Bsolution","_yoast_wpseo_metadesc":"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002","footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u8a18\u4e8b - Bsolution<\/title>\n<meta name=\"description\" content=\"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bsolution.me\/ja\/blog\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u8a18\u4e8b - Bsolution\" \/>\n<meta property=\"og:description\" content=\"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bsolution.me\/ja\/blog\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7121\u6599\u306e\u30d3\u30b8\u30cd\u30b9\u30c4\u30fc\u30eb\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-10T14:49:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/blog\\\/\",\"url\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/blog\\\/\",\"name\":\"\u8a18\u4e8b - Bsolution\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/#website\"},\"datePublished\":\"2026-10-10T14:26:53+00:00\",\"dateModified\":\"2026-10-10T14:49:57+00:00\",\"description\":\"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/blog\\\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bsolution.me\\\/ja\\\/blog\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/blog\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u8a18\u4e8b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/#website\",\"url\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/\",\"name\":\"\u7121\u6599\u306e\u30d3\u30b8\u30cd\u30b9\u30c4\u30fc\u30eb\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/bsolution.me\\\/ja\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u8a18\u4e8b - Bsolution","description":"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bsolution.me\/ja\/blog\/","og_locale":"ja_JP","og_type":"article","og_title":"\u8a18\u4e8b - Bsolution","og_description":"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002","og_url":"https:\/\/bsolution.me\/ja\/blog\/","og_site_name":"\u7121\u6599\u306e\u30d3\u30b8\u30cd\u30b9\u30c4\u30fc\u30eb","article_modified_time":"2026-10-10T14:49:57+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bsolution.me\/ja\/blog\/","url":"https:\/\/bsolution.me\/ja\/blog\/","name":"\u8a18\u4e8b - Bsolution","isPartOf":{"@id":"https:\/\/bsolution.me\/ja\/#website"},"datePublished":"2026-10-10T14:26:53+00:00","dateModified":"2026-10-10T14:49:57+00:00","description":"\u4f01\u696d\u5411\u3051\u306e\u30ac\u30a4\u30c9\u3001\u30d2\u30f3\u30c8\u3001\u6d1e\u5bdf \u2014 \u3059\u3079\u3066\u306e\u30c8\u30d4\u30c3\u30af\u30921\u304b\u6240\u3067\u3002","breadcrumb":{"@id":"https:\/\/bsolution.me\/ja\/blog\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bsolution.me\/ja\/blog\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bsolution.me\/ja\/blog\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bsolution.me\/ja\/"},{"@type":"ListItem","position":2,"name":"\u8a18\u4e8b"}]},{"@type":"WebSite","@id":"https:\/\/bsolution.me\/ja\/#website","url":"https:\/\/bsolution.me\/ja\/","name":"\u7121\u6599\u306e\u30d3\u30b8\u30cd\u30b9\u30c4\u30fc\u30eb","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bsolution.me\/ja\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"}]}},"_links":{"self":[{"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/comments?post=43"}],"version-history":[{"count":2,"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/pages\/43\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/bsolution.me\/ja\/wp-json\/wp\/v2\/media?parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}