{"id":5668,"date":"2026-04-09T14:54:20","date_gmt":"2026-04-09T05:54:20","guid":{"rendered":"https:\/\/iiouti.com\/sdp\/?page_id=5668"},"modified":"2026-04-09T15:35:36","modified_gmt":"2026-04-09T06:35:36","slug":"customer-review","status":"publish","type":"page","link":"https:\/\/iiouti.com\/sdp\/customer-review","title":{"rendered":"\u304a\u5ba2\u69d8\u306e\u58f0"},"content":{"rendered":"\n<div id=\"testimonial-final-list\" class=\"testimonial-container\">\n    <p class=\"loading-state\">\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;<\/p>\n<\/div>\n\n<div id=\"pagination-area\" style=\"text-align:center; padding: 20px 0;\">\n    <button id=\"prev-btn\" class=\"page-btn\" onclick=\"movePage(-1)\" style=\"display:none;\">\u2190 \u524d\u3078<\/button>\n    <button id=\"next-btn\" class=\"page-btn\" onclick=\"movePage(1)\" style=\"display:none;\">\u6b21\u3078 \u2192<\/button>\n<\/div>\n\n<style>\n  .testimonial-container { \n    max-width: 900px; \n    margin: 0 auto; \n    font-family: sans-serif;\n    color: #ffffff;\n    min-height: 200px;\n  }\n  \n  .testimonial-post {\n    display: flex; \n    gap: 35px; \n    border-bottom: 1px solid rgba(255,255,255,0.2); \n    padding: 50px 0;\n    align-items: flex-start;\n  }\n\n  \/* \u30a2\u30a4\u30b3\u30f3\u753b\u50cf\u306e\u8a2d\u5b9a *\/\n  .testimonial-left {\n    flex: 0 0 160px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .testimonial-img-wrapper {\n    width: 130px; \/* PC\u30b5\u30a4\u30ba *\/\n    height: 130px;\n    overflow: hidden;\n    border-radius: 50%;\n    border: 2px solid rgba(255,255,255,0.6);\n    margin-bottom: 15px;\n  }\n  .testimonial-img-wrapper img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .profile-name { font-weight: bold; font-size: 16px; margin-bottom: 4px; }\n  .profile-address { font-size: 13px; opacity: 0.8; text-align: center; }\n\n  .testimonial-right { flex: 1; }\n  .testimonial-main-title { font-size: 22px; margin: 0 0 15px 0; font-weight: bold; line-height: 1.4; }\n  .testimonial-content { font-size: 15px; line-height: 1.8; }\n  \n  .read-more-btn {\n    display: inline-block; \n    margin-top: 15px; \n    cursor: pointer; \n    font-size: 14px; \n    text-decoration: underline;\n    opacity: 0.7;\n  }\n\n  .page-btn {\n    background: transparent;\n    color: #ffffff;\n    border: 1px solid #ffffff;\n    padding: 8px 20px;\n    margin: 0 5px;\n    cursor: pointer;\n  }\n\n  \/* \u2605\u30b9\u30de\u30db\u7528\u306e\u8abf\u6574\uff1a\u753b\u50cf\u3092\u5c0f\u3055\u304f\u3001\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u7e26\u306b *\/\n  @media (max-width: 650px) {\n    .testimonial-post { flex-direction: column; align-items: center; text-align: center; padding: 30px 0; }\n    .testimonial-left { flex: 0 0 auto; margin-bottom: 15px; }\n    \n    \/* \u30b9\u30de\u30db\u3067\u30a2\u30a4\u30b3\u30f3\u3092\u5c0f\u3055\u304f\uff08130px \u2192 90px\uff09 *\/\n    .testimonial-img-wrapper {\n      width: 90px;\n      height: 90px;\n    }\n    .testimonial-main-title { font-size: 18px; }\n  }\n<\/style>\n\n<script>\n(function() {\n    let current_page = 1;\n    const per_page = 5;\n    const category_slug = 'reviews';\n\n    \/\/ \u30b5\u30a4\u30c8\u306eURL\u3092\u81ea\u52d5\u53d6\u5f97\uff08\/sdp \u304c\u3042\u3063\u3066\u3082\u306a\u304f\u3066\u3082\u5bfe\u5fdc\uff09\n    const getBaseUrl = () => {\n        const path = window.location.pathname;\n        if (path.includes('\/sdp\/')) return window.location.origin + '\/sdp';\n        return window.location.origin;\n    };\n\n    const render = async (page) => {\n        const container = document.getElementById('testimonial-final-list');\n        const site_url = getBaseUrl();\n        \n        container.innerHTML = '<p style=\"text-align:center;\">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p>';\n\n        try {\n            \/\/ 1. \u30ab\u30c6\u30b4\u30ea\u30fcID\u3092\u53d6\u5f97\n            const catRes = await fetch(`${site_url}\/wp-json\/wp\/v2\/categories?slug=${category_slug}`);\n            const cats = await catRes.json();\n            \n            if (!cats.length) {\n                container.innerHTML = `<p>\u30ab\u30c6\u30b4\u30ea\u30fc\u300c${category_slug}\u300d\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3002\u30b9\u30e9\u30c3\u30b0\u540d\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>`;\n                return;\n            }\n            const catId = cats[0].id;\n\n            \/\/ 2. \u8a18\u4e8b\u3092\u53d6\u5f97\n            const postRes = await fetch(`${site_url}\/wp-json\/wp\/v2\/posts?categories=${catId}&per_page=${per_page}&page=${page}`);\n            const totalPages = parseInt(postRes.headers.get('X-WP-TotalPages')) || 1;\n            const posts = await postRes.json();\n\n            if (!posts.length) {\n                container.innerHTML = '<p>\u6295\u7a3f\u304c\u3042\u308a\u307e\u305b\u3093\u3002<\/p>';\n                return;\n            }\n\n            \/\/ 3. HTML\u69cb\u7bc9\n            container.innerHTML = posts.map((p, i) => {\n                const temp = document.createElement('div');\n                temp.innerHTML = p.content.rendered;\n\n                \/\/ \u753b\u50cf\u51e6\u7406\n                const imgs = temp.querySelectorAll('img');\n                const src = imgs.length ? imgs[imgs.length - 1].src : 'https:\/\/via.placeholder.com\/150';\n                imgs.forEach(img => img.remove());\n\n                \/\/ \u540d\u524d\u30fb\u4f4f\u6240\u306e\u62bd\u51fa\n                const nodes = Array.from(temp.querySelectorAll('p, div')).filter(n => n.innerText.trim() !== \"\");\n                let name = \"\u304a\u5ba2\u69d8\", addr = \"\";\n                if (nodes.length >= 2) {\n                    addr = nodes[nodes.length - 1].innerText;\n                    name = nodes[nodes.length - 2].innerText;\n                    nodes[nodes.length - 1].remove();\n                    nodes[nodes.length - 2].remove();\n                }\n\n                return `\n                    <article class=\"testimonial-post\">\n                        <div class=\"testimonial-left\">\n                            <div class=\"testimonial-img-wrapper\"><img decoding=\"async\" src=\"${src}\"><\/div>\n                            <div class=\"testimonial-profile\">\n                                <div class=\"profile-name\">${name}<\/div>\n                                <div class=\"profile-address\">${addr}<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"testimonial-right\">\n                            <h2 class=\"testimonial-main-title\">${p.title.rendered}<\/h2>\n                            <div id=\"content-${i}\" class=\"testimonial-content\">\n                                <div class=\"excerpt-text\">${p.excerpt.rendered}<\/div>\n                                <div class=\"full-text\" style=\"display:none;\">${temp.innerHTML}<\/div>\n                            <\/div>\n                            <span class=\"read-more-btn\" onclick=\"toggleText(${i}, this)\">\u7d9a\u304d\u3092\u8aad\u3080<\/span>\n                        <\/div>\n                    <\/article>\n                `;\n            }).join('');\n\n            \/\/ \u30dc\u30bf\u30f3\u5236\u5fa1\n            document.getElementById('prev-btn').style.display = (page > 1) ? 'inline-block' : 'none';\n            document.getElementById('next-btn').style.display = (page < totalPages) ? 'inline-block' : 'none';\n\n        } catch (e) {\n            container.innerHTML = '<p>\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u7ba1\u7406\u753b\u9762\u3067\u300c\u30d1\u30fc\u30de\u30ea\u30f3\u30af\u8a2d\u5b9a\u300d\u3092\u4e00\u5ea6\u4fdd\u5b58\u3057\u76f4\u3059\u3068\u89e3\u6c7a\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002<\/p>';\n            console.error(e);\n        }\n    };\n\n    window.movePage = (step) => { current_page += step; render(current_page); window.scrollTo({top: 0, behavior: 'smooth'}); };\n    window.toggleText = (i, btn) => {\n        const c = document.getElementById(`content-${i}`);\n        const ex = c.querySelector('.excerpt-text'), fu = c.querySelector('.full-text');\n        if (fu.style.display === 'none') { fu.style.display = 'block'; ex.style.display = 'none'; btn.innerText = '\u9589\u3058\u308b'; }\n        else { fu.style.display = 'none'; ex.style.display = 'block'; btn.innerText = '\u7d9a\u304d\u3092\u8aad\u3080'; }\n    };\n\n    render(current_page);\n})();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8aad\u307f\u8fbc\u307f\u4e2d&#8230; \u2190 \u524d\u3078 \u6b21\u3078 \u2192<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5668","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/pages\/5668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/comments?post=5668"}],"version-history":[{"count":13,"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/pages\/5668\/revisions"}],"predecessor-version":[{"id":5719,"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/pages\/5668\/revisions\/5719"}],"wp:attachment":[{"href":"https:\/\/iiouti.com\/sdp\/wp-json\/wp\/v2\/media?parent=5668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}