{"id":2,"date":"2026-06-13T15:15:33","date_gmt":"2026-06-13T15:15:33","guid":{"rendered":"https:\/\/yashio-city.com\/portal\/?page_id=2"},"modified":"2026-06-18T09:47:30","modified_gmt":"2026-06-18T09:47:30","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/yashio-city.com\/portal\/","title":{"rendered":"\u30b5\u30a4\u30c8\u5185\u691c\u7d22"},"content":{"rendered":"\n<div id=\"fast-search-app\" style=\"padding: 20px; background: #f8fafc; border-radius: 8px;\">\n    \n    <label for=\"select-area\">\u3010\u5730\u57df\u3092\u9078\u629e\u3011<\/label><br>\n    <select id=\"select-area\" style=\"width: 100%; padding: 10px; margin-bottom: 15px;\">\n        <option value=\"\">\u5168\u3066\u306e\u5730\u57df\uff08\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;\uff09<\/option>\n    <\/select>\n\n    <label for=\"select-genre\">\u3010\u30b8\u30e3\u30f3\u30eb\u3092\u9078\u629e\u3011<\/label><br>\n    <select id=\"select-genre\" style=\"width: 100%; padding: 10px; margin-bottom: 15px;\">\n        <option value=\"\">\u5168\u3066\u306e\u30b8\u30e3\u30f3\u30eb\uff08\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;\uff09<\/option>\n    <\/select>\n\n    <hr style=\"margin: 20px 0; border: 0; border-top: 1px solid #e2e8f0;\">\n\n    <h3>\ud83d\udd0d \u8a72\u5f53\u3059\u308b\u5730\u57df\u60c5\u5831<\/h3>\n    <div id=\"search-results-area\">\n        <p style=\"color: #64748b;\">\u5730\u57df\u3068\u30b8\u30e3\u30f3\u30eb\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002<\/p>\n    <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    \/\/ \u9234\u6728\u3055\u3093\u306e\u30dd\u30fc\u30bf\u30ebURL\uff08\u672b\u5c3e\u306e\u30b9\u30e9\u30c3\u30b7\u30e5\u306f\u7121\u3057\uff09\n    const API_BASE_URL = 'https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2';\n\n    \/\/ HTML\u306e\u30d1\u30fc\u30c4\u3092JavaScript\u5074\u3067\u6355\u307e\u3048\u308b\uff08\u5909\u6570\u306b\u4ee3\u5165\uff09\n    const areaSelect = document.getElementById('select-area');\n    const genreSelect = document.getElementById('select-genre');\n    const resultsDiv = document.getElementById('search-results-area');\n\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    \/\/ \u3010\u6a5f\u80fd1\u3011\u30b5\u30a4\u30c8\u3092\u958b\u3044\u305f\u77ac\u9593\u306b\u3001\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u306e\u9078\u629e\u80a2\u3092\u81ea\u52d5\u751f\u6210\u3059\u308b\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async function initSearchBox() {\n        try {\n            \/\/ 1. \u307e\u305a\u306f\u666e\u901a\u306b\u304a\u4f7f\u3044\u3092\u51fa\u3059\n            const areaResponse = await fetch(`${API_BASE_URL}\/area`);\n            \n            \/\/ 2. \u8fd4\u3063\u3066\u304d\u305f\u4e2d\u8eab\u3092\u3001\u30c7\u30fc\u30bf\u3067\u306f\u306a\u304f\u3042\u3048\u3066\u300c\u305f\u3060\u306e\u30c6\u30ad\u30b9\u30c8\uff08\u6587\u5b57\u5217\uff09\u300d\u3068\u3057\u3066\u8aad\u307f\u8fbc\u3080\n            const rawText = await areaResponse.text();\n\n            \/\/ 3. \u3082\u3057\u5148\u982d\u304c\u300c<\u300d\u3060\u3063\u305f\u3089\u3001HTML\u304c\u8fd4\u3063\u3066\u304d\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u753b\u9762\u306b\u5f15\u3063\u5f35\u308a\u51fa\u3059\n            if (rawText.trim().startsWith('<')) {\n                \/\/ HTML\u306e\u4e2d\u304b\u3089 <title>\u301c<\/title> \u306e\u4e2d\u8eab\u3092\u629c\u304d\u51fa\u3059\u30ed\u30b8\u30c3\u30af\n                const match = rawText.match(\/<title>([\\s\\S]*?)<\\\/title>\/i);\n                const pageTitle = match ? match[1] : '\u30bf\u30a4\u30c8\u30eb\u4e0d\u660e\u306eHTML';\n                \n                resultsDiv.innerHTML = `\n                    <p style=\"color:red;\">\n                        \u3010\u30c7\u30d0\u30c3\u30b0\u6210\u529f\u3011\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30c7\u30fc\u30bf\u3067\u306f\u306a\u304f\u3001\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u304c\u8fd4\u3063\u3066\u304d\u307e\u3057\u305f\u3002<br>\n                        <strong>\u8fd4\u3063\u3066\u304d\u305f\u30da\u30fc\u30b8\u306e\u30bf\u30a4\u30c8\u30eb: \u300e ${pageTitle} \u300f<\/strong><br>\n                        <span style=\"color:#64748b; font-size:12px;\">\u203b\u3053\u308c\u304c404\u306a\u3089URL\u306e\u5fae\u4fee\u6b63\u3001403\u306a\u3089\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8abf\u6574\u304c\u5fc5\u8981\u3067\u3059\u3002<\/span>\n                    <\/p>`;\n                return;\n            }\n\n            \/\/ \u2500\u2500\u2500 \u4ee5\u4e0b\u3001\u6b63\u5e38\u306bJSON\u304c\u8fd4\u3063\u3066\u304d\u305f\u5834\u5408\u306e\u51e6\u7406 \u2500\u2500\u2500\n            const genreResponse = await fetch(`${API_BASE_URL}\/genre`);\n            const areas = JSON.parse(rawText); \/\/ \u30c6\u30ad\u30b9\u30c8\u3092JSON\u306b\u5909\u63db\n            const genres = await genreResponse.json();\n\n            \/\/ \u5730\u57df\u306e\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u751f\u6210\uff08\u89aa\u30ab\u30c6\u30b4\u30ea\u9664\u5916\u30ed\u30b8\u30c3\u30af\u3092\u8ffd\u52a0\uff09\n            areaSelect.innerHTML = '<option value=\"\">\u5168\u3066\u306e\u5730\u57df<\/option>';\n            areas.forEach(item => { \n                \/\/ \u3082\u3057\u89aaID\uff08parent\uff09\u304c 0 \uff08\uff1d\u4e0a\u306b\u89aa\u304c\u3044\u306a\u3044\u4e00\u756a\u30c8\u30c3\u30d7\u306e\u968e\u5c64\uff09\u306a\u3089\u3001\u9078\u629e\u80a2\u306b\u8ffd\u52a0\u305b\u305a\u30b9\u30ad\u30c3\u30d7\u3059\u308b\n                if (item.parent === 0) return;\n                \n                areaSelect.innerHTML += `<option value=\"${item.id}\">${item.name}<\/option>`; \n            });\n\n            genreSelect.innerHTML = '<option value=\"\">\u5168\u3066\u306e\u30b8\u30e3\u30f3\u30eb<\/option>';\n            genres.forEach(item => { genreSelect.innerHTML += `<option value=\"${item.id}\">${item.name}<\/option>`; });\n\n        } catch (error) {\n            console.error('\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n            resultsDiv.innerHTML = `<p style=\"color:red;\">\u30a8\u30e9\u30fc: ${error.message}<\/p>`;\n        }\n    }\n\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    \/\/ \u3010\u6a5f\u80fd2\u3011\u30e6\u30fc\u30b6\u30fc\u304c\u30dd\u30c1\u30c3\u3068\u9078\u629e\u3092\u5909\u3048\u305f\u77ac\u9593\u306b\u3001\u8a18\u4e8b\u3092\u691c\u7d22\u3059\u308b\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async function fetchFilteredPosts() {\n        const selectedAreaId = areaSelect.value;\n        const selectedGenreId = genreSelect.value;\n\n        \/\/ \u691c\u7d22\u4e2d\u306e\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u8868\u793a\n        resultsDiv.innerHTML = '<p style=\"color: #3b82f6;\">\u691c\u7d22\u4e2d...<\/p>';\n\n        \/\/ 1. API\u306eURL\u3092\u7d44\u307f\u7acb\u3066\u308b\uff08\u2605\u6700\u5927\u8868\u793a\u4ef6\u6570\u3092100\u4ef6\u306b\u62e1\u5f35\uff09\n        let queryUrl = `${API_BASE_URL}\/posts?_fields=title,link&per_page=100`; \n        if (selectedAreaId) queryUrl += `&area=${selectedAreaId}`;\n        if (selectedGenreId) queryUrl += `&genre=${selectedGenreId}`;\n\n        try {\n            \/\/ 2. \u7d44\u307f\u7acb\u3066\u305fURL\u3067\u8a18\u4e8b\u30c7\u30fc\u30bf\u3092\u79d2\u901f\u3067\u5f15\u3063\u5f35\u3063\u3066\u304f\u308b\n            const response = await fetch(queryUrl);\n            const posts = await response.json();\n\n            \/\/ 3. \u753b\u9762\u306e\u66f8\u304d\u63db\u3048\uff08\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff09\n            if (posts.length === 0) {\n                resultsDiv.innerHTML = '<p style=\"color: #94a3b8;\">\u8a72\u5f53\u3059\u308b\u60c5\u5831\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u5225\u306e\u6761\u4ef6\u3092\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002<\/p>';\n                return;\n            }\n\n            \/\/ \u8a18\u4e8b\u304c\u3042\u3063\u305f\u3089\u30011\u30bf\u30c3\u30d7\u3067\u98db\u3079\u308b\u5927\u304d\u306a\u30ab\u30fc\u30c9\uff08\u30ea\u30f3\u30af\uff09\u3092\u305d\u306e\u5834\u306b\u751f\u6210\n            let htmlOutput = '<ul style=\"list-style: none; padding: 0; margin: 0;\">';\n            posts.forEach(post => {\n                htmlOutput += `\n                    <li style=\"margin-bottom: 12px;\">\n                        <a href=\"${post.link}\" style=\"display: block; padding: 15px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; color: #0f172a; text-decoration: none; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.05);\">\n                            \ud83d\udcc4 ${post.title.rendered}\n                        <\/a>\n                    <\/li>`;\n            });\n            htmlOutput += '<\/ul>';\n\n            \/\/ \u753b\u9762\u3092\u30ea\u30ed\u30fc\u30c9\u305b\u305a\u306b\u3001\u4e2d\u8eab\u3092\u3054\u305d\u3063\u3068\u5165\u308c\u66ff\u3048\u308b\n            resultsDiv.innerHTML = htmlOutput;\n\n        } catch (error) {\n            console.error('\u8a18\u4e8b\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error);\n            resultsDiv.innerHTML = '<p style=\"color:red;\">\u60c5\u5831\u306e\u53d6\u5f97\u4e2d\u306b\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002<\/p>';\n        }\n    }\n\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    \/\/ \u8d77\u52d5\u30b9\u30a4\u30c3\u30c1\uff08\u30a4\u30d9\u30f3\u30c8\u30ea\u30b9\u30ca\u30fc\uff09\u306e\u30bb\u30c3\u30c8\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    initSearchBox();\n    areaSelect.addEventListener('change', fetchFilteredPosts);\n    genreSelect.addEventListener('change', fetchFilteredPosts);\n});\n<\/script>\n\n<p style=\"margin-top: 20px; line-height: 1.75; color: #0f172a;\">\u9762\u5012\u306a\u5f79\u6240\u306e\u8abf\u3079\u7269\u3092\u6700\u901f\u3067\u7d42\u308f\u3089\u305b\u308b\u3001\u30b9\u30de\u30db\u7279\u5316\u578b\u306e\u884c\u653f\u30b7\u30e7\u30fc\u30c8\u30ab\u30c3\u30c8\u30c4\u30fc\u30eb\u3002\u5404\u81ea\u6cbb\u4f53\u306e\u4fdd\u6d3b\u60c5\u5831\u3084\u8907\u96d1\u306a\u624b\u7d9a\u304d\u3092\u300c30\u79d2\u300d\u306b\u8981\u7d04\u3057\u3001\u5fc5\u8981\u66f8\u985e\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u30da\u30fc\u30b8\u306a\u3069\u516c\u5f0fURL\u3078\u6848\u5185\u3057\u307e\u3059\u3002\u30bf\u30a4\u30d1\u91cd\u8996\u306e\u3042\u306a\u305f\u306e\u4ee3\u308f\u308a\u306b\u8abf\u3079\u305f\u6700\u901f\u76f4\u884c\u30eb\u30fc\u30c8\u3002<\/p>\n\n<details style=\"margin-top: 15px; font-size: 14px; color: #64748b; cursor: pointer;\">\n    <summary style=\"font-weight: bold; color: #0f172a; outline: none; user-select: none;\">\ud83d\udca1 \u30b9\u30de\u30db\u306e\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u3057\u3066\u30a2\u30d7\u30ea\u3068\u3057\u3066\u4f7f\u3046<\/summary>\n    <div style=\"margin-top: 10px; padding: 12px; background: #f8fafc; border-left: 3px solid #10b981; border-radius: 0 4px 4px 0; line-height: 1.75;\">\n        <p style=\"margin: 0 0 8px 0; color: #334155;\"><strong>iPhone\uff08Safari\uff09\u306e\u65b9\uff1a<\/strong><br>\u753b\u9762\u4e0b\u90e8\u306b\u3042\u308b\u300c\u5171\u6709\u30dc\u30bf\u30f3\uff08\u89d2\u4e38\u56db\u89d2\u304b\u3089\u4e0a\u77e2\u5370\u304c\u98db\u3073\u51fa\u3057\u3066\u3044\u308b\u30a2\u30a4\u30b3\u30f3\uff09\u300d\u3092\u30bf\u30c3\u30d7\u3057\u3001\u30e1\u30cb\u30e5\u30fc\u5185\u306e\u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n        <p style=\"margin: 0; color: #334155;\"><strong>Android\uff08Chrome\uff09\u306e\u65b9\uff1a<\/strong><br>\u753b\u9762\u306b\u81ea\u52d5\u8868\u793a\u3055\u308c\u308b\u300c\u30a2\u30d7\u30ea\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u300d\u306e\u6848\u5185\u3092\u30bf\u30c3\u30d7\u3059\u308b\u304b\u3001\u30d6\u30e9\u30a6\u30b6\u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\uff08\u7e26\u306e3\u70b9\u30ea\u30fc\u30c0\u30fc\uff09\u304b\u3089\u300c\u30db\u30fc\u30e0\u753b\u9762\u306b\u8ffd\u52a0\u300d\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n    <\/div>\n<\/details>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3010\u5730\u57df\u3092\u9078\u629e\u3011 \u5168\u3066\u306e\u5730\u57df\uff08\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;\uff09 \u3010\u30b8\u30e3\u30f3\u30eb\u3092\u9078\u629e\u3011 \u5168\u3066\u306e\u30b8\u30e3\u30f3\u30eb\uff08\u8aad\u307f\u8fbc\u307f\u4e2d&#8230;\uff09 \ud83d\udd0d \u8a72\u5f53\u3059\u308b\u5730\u57df\u60c5\u5831 \u5730\u57df\u3068\u30b8\u30e3\u30f3\u30eb\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\u3002 \u9762\u5012\u306a\u5f79\u6240\u306e\u8abf\u3079\u7269\u3092\u6700\u901f\u3067\u7d42\u308f\u3089\u305b\u308b\u3001\u30b9\u30de\u30db &#8230; <a title=\"\u30b5\u30a4\u30c8\u5185\u691c\u7d22\" class=\"read-more\" href=\"https:\/\/yashio-city.com\/portal\/\" aria-label=\"\u30b5\u30a4\u30c8\u5185\u691c\u7d22 \u306b\u3064\u3044\u3066\u3055\u3089\u306b\u8aad\u3080\">\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":13,"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":225,"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/pages\/2\/revisions\/225"}],"wp:attachment":[{"href":"https:\/\/yashio-city.com\/portal\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}