{"id":26158,"date":"2025-09-02T21:11:22","date_gmt":"2025-09-02T12:11:22","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26158"},"modified":"2025-09-02T21:11:24","modified_gmt":"2025-09-02T12:11:24","slug":"%e3%83%9f%e3%83%8b%e7%99%be%e7%a7%91-html","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26158","title":{"rendered":"\u30df\u30cb\u767e\u79d1.html"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\" class=\"scroll-smooth\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n  <title>\u30df\u30cb\u767e\u79d1 \u2013 \u30b7\u30f3\u30b0\u30eb\u30d5\u30a1\u30a4\u30eb\u7248<\/title>\n  <meta name=\"description\" content=\"\u691c\u7d22\u30fb\u30ab\u30c6\u30b4\u30ea\u30fb\u30bf\u30b0\u30fb\u30d6\u30c3\u30af\u30de\u30fc\u30af\u5bfe\u5fdc\u306e\u30b7\u30f3\u30b0\u30eb\u30d5\u30a1\u30a4\u30eb\u767e\u79d1\u4e8b\u5178\u3002\" \/>\n  <link rel=\"preconnect\" href=\"https:\/\/cdn.jsdelivr.net\" \/>\n  <!-- TailwindCSS (CDN) -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <!-- Font Awesome (icons) -->\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" integrity=\"sha512-5I0VnK5tQhJ0eZ5Ck1gC3b6h9fJ3k6l9FeI3K6J0q9JtO1Yw1l2Y7N5M6d2xQf8Q2F6mZ8l2s3A=\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n  <!-- Favicon (inline SVG) -->\n  <link rel=\"icon\" href=\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%234f46e5' d='M32 56c0-13.3 10.7-24 24-24h144c13.3 0 24 10.7 24 24v144c0 13.3-10.7 24-24 24H56c-13.3 0-24-10.7-24-24z'\/%3E%3Cpath fill='white' d='M72 80h112v16H72zM72 112h80v16H72zM72 144h112v16H72zM72 176h96v16H72z'\/%3E%3C\/svg%3E\" \/>\n  <style>\n    \/* \u8ffd\u52a0\u306e\u7d30\u304b\u306a\u30b9\u30bf\u30a4\u30eb *\/\n    .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}\n    .prose h2{scroll-margin-top:6rem}\n    .toc a{display:block;padding:.25rem .5rem;border-radius:.5rem}\n    .toc a.active{background:rgba(99,102,241,.12)}\n  <\/style>\n  <script>\n    \/\/ \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u521d\u671f\u5316\n    (function(){\n      const theme=localStorage.getItem('theme');\n      if(theme==='dark'||(!theme&&window.matchMedia('(prefers-color-scheme: dark)').matches)){\n        document.documentElement.classList.add('dark');\n      }\n    })();\n  <\/script>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100 min-h-screen\">\n  <!-- Skip link -->\n  <a href=\"#main\" class=\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:bg-indigo-600 focus:text-white focus:px-3 focus:py-2 focus:rounded\">\u672c\u6587\u3078\u30b9\u30ad\u30c3\u30d7<\/a>\n\n  <!-- Header -->\n  <header class=\"sticky top-0 z-40 backdrop-blur border-b border-slate-200\/60 dark:border-slate-700\/60 bg-white\/70 dark:bg-slate-900\/70\">\n    <div class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-3 flex items-center gap-3\">\n      <button id=\"btnHome\" class=\"shrink-0 px-2 py-1 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900\/40\" title=\"\u30db\u30fc\u30e0\">\n        <i class=\"fa-solid fa-book-open text-indigo-600\"><\/i>\n      <\/button>\n      <h1 class=\"text-lg sm:text-2xl font-bold tracking-tight\">\u30df\u30cb\u767e\u79d1 <span class=\"text-indigo-600\">Mini Encyclopedia<\/span><\/h1>\n      <div class=\"ms-auto flex items-center gap-2\">\n        <button id=\"btnRandom\" class=\"px-3 py-2 rounded-xl bg-indigo-600 text-white text-sm hover:opacity-90\"><i class=\"fa-solid fa-shuffle me-1\"><\/i>\u30e9\u30f3\u30c0\u30e0<\/button>\n        <button id=\"btnBookmarks\" class=\"px-3 py-2 rounded-xl bg-amber-500 text-white text-sm hover:opacity-90\"><i class=\"fa-solid fa-star me-1\"><\/i>\u30d6\u30c3\u30af\u30de\u30fc\u30af<\/button>\n        <button id=\"btnDark\" class=\"px-3 py-2 rounded-xl bg-slate-800 text-white text-sm dark:bg-slate-700 hover:opacity-90\" title=\"\u30c0\u30fc\u30af\/\u30e9\u30a4\u30c8\u5207\u66ff\"><i class=\"fa-solid fa-moon\"><\/i><\/button>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <!-- Toolbar -->\n  <section class=\"border-b border-slate-200\/60 dark:border-slate-700\/60 bg-white\/60 dark:bg-slate-900\/60\">\n    <div class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 grid gap-3 sm:grid-cols-12 items-end\">\n      <div class=\"sm:col-span-6\">\n        <label for=\"search\" class=\"block text-sm text-slate-600 dark:text-slate-300 mb-1\">\u8a18\u4e8b\u691c\u7d22<\/label>\n        <div class=\"relative\">\n          <input id=\"search\" type=\"search\" placeholder=\"\u30ad\u30fc\u30ef\u30fc\u30c9\uff08\u4f8b: \u5bcc\u58eb\u5c71 \/ \u6050\u7adc \/ \u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\uff09\" class=\"w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white\/80 dark:bg-slate-800\/80 px-4 py-2 pe-10 outline-none focus:ring-2 focus:ring-indigo-500\" \/>\n          <i class=\"fa-solid fa-magnifying-glass absolute right-3 top-1\/2 -translate-y-1\/2 text-slate-400\"><\/i>\n        <\/div>\n      <\/div>\n      <div class=\"sm:col-span-3\">\n        <label for=\"category\" class=\"block text-sm text-slate-600 dark:text-slate-300 mb-1\">\u30ab\u30c6\u30b4\u30ea<\/label>\n        <select id=\"category\" class=\"w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white\/80 dark:bg-slate-800\/80 px-4 py-2 outline-none focus:ring-2 focus:ring-indigo-500\">\n          <option value=\"\">\u3059\u3079\u3066<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"sm:col-span-3\">\n        <label for=\"sort\" class=\"block text-sm text-slate-600 dark:text-slate-300 mb-1\">\u4e26\u3073\u66ff\u3048<\/label>\n        <select id=\"sort\" class=\"w-full rounded-2xl border border-slate-300 dark:border-slate-700 bg-white\/80 dark:bg-slate-800\/80 px-4 py-2 outline-none focus:ring-2 focus:ring-indigo-500\">\n          <option value=\"recent\">\u66f4\u65b0\u304c\u65b0\u3057\u3044\u9806<\/option>\n          <option value=\"title\">\u30bf\u30a4\u30c8\u30eb\u9806<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"sm:col-span-12\" id=\"tagBar\" aria-label=\"\u30bf\u30b0\u30d5\u30a3\u30eb\u30bf\" class=\"flex flex-wrap gap-2\"><\/div>\n    <\/div>\n  <\/section>\n\n  <main id=\"main\" class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6\">\n    <!-- Home \/ List View -->\n    <section id=\"view-home\" class=\"grid gap-6\">\n      <div class=\"flex items-center justify-between\">\n        <h2 class=\"text-xl sm:text-2xl font-semibold\">\u8a18\u4e8b\u4e00\u89a7<\/h2>\n        <div class=\"text-sm text-slate-500\"><span id=\"resultCount\">0<\/span> \u4ef6<\/div>\n      <\/div>\n      <div id=\"cards\" class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        <!-- cards injected -->\n      <\/div>\n      <div class=\"flex items-center justify-center gap-2 pt-2\" id=\"pager\"><\/div>\n    <\/section>\n\n    <!-- Article View -->\n    <section id=\"view-article\" class=\"hidden lg:grid lg:grid-cols-12 gap-8\">\n      <aside class=\"lg:col-span-3 order-last lg:order-first\">\n        <div class=\"sticky top-[6.5rem] border border-slate-200 dark:border-slate-700 rounded-2xl p-4\">\n          <h3 class=\"font-semibold mb-2\">\u76ee\u6b21<\/h3>\n          <nav id=\"toc\" class=\"toc text-sm space-y-1\"><\/nav>\n        <\/div>\n      <\/aside>\n      <article class=\"lg:col-span-9\">\n        <nav class=\"text-sm text-slate-500 mb-3\" id=\"breadcrumb\"><\/nav>\n        <header class=\"mb-4\">\n          <h1 id=\"articleTitle\" class=\"text-2xl sm:text-3xl font-bold tracking-tight\"><\/h1>\n          <div class=\"mt-2 flex flex-wrap items-center gap-2 text-sm text-slate-500\" id=\"articleMeta\"><\/div>\n          <div class=\"mt-3 flex items-center gap-2\">\n            <button id=\"btnCopyLink\" class=\"px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800\"><i class=\"fa-solid fa-link me-1\"><\/i>\u30ea\u30f3\u30af\u3092\u30b3\u30d4\u30fc<\/button>\n            <button id=\"btnToggleBookmark\" class=\"px-3 py-2 rounded-xl border border-amber-400 text-amber-600 hover:bg-amber-50\"><i class=\"fa-regular fa-star me-1\"><\/i>\u30d6\u30c3\u30af\u30de\u30fc\u30af<\/button>\n          <\/div>\n        <\/header>\n        <div id=\"articleContent\" class=\"prose prose-slate dark:prose-invert max-w-none\"><\/div>\n        <section class=\"mt-8\">\n          <h3 class=\"font-semibold mb-2\">\u95a2\u9023\u30bf\u30b0<\/h3>\n          <div id=\"articleTags\" class=\"flex flex-wrap gap-2\"><\/div>\n        <\/section>\n      <\/article>\n    <\/section>\n  <\/main>\n\n  <footer class=\"border-t border-slate-200 dark:border-slate-700 py-8\">\n    <div class=\"max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 text-sm text-slate-500 flex flex-wrap items-center gap-2\">\n      <span>\u00a9 <span id=\"year\"><\/span> \u30df\u30cb\u767e\u79d1<\/span>\n      <span class=\"mx-1\">\u2022<\/span>\n      <button id=\"btnExport\" class=\"underline underline-offset-4\">\u30c7\u30fc\u30bf\u3092\u66f8\u304d\u51fa\u3059(JSON)<\/button>\n      <span class=\"mx-1\">\u2022<\/span>\n      <label class=\"cursor-pointer\">JSON\u8aad\u307f\u8fbc\u307f <input id=\"fileImport\" type=\"file\" accept=\"application\/json\" class=\"hidden\" \/><\/label>\n    <\/div>\n  <\/footer>\n\n  <!-- Structured data placeholder (updated on article view) -->\n  <script id=\"ldjson\" type=\"application\/ld+json\">{}<\/script>\n\n  <script>\n  \/\/ ======================\n  \/\/  \u30b5\u30f3\u30d7\u30eb\u8a18\u4e8b\u30c7\u30fc\u30bf\n  \/\/ ======================\n  \/**\n   * \u8a18\u4e8b\u30b9\u30ad\u30fc\u30de:\n   * id, slug, title, category, tags[], summary, updated(ISO), author, content(HTML)\n   *\/\n  const ARTICLES = [\n    {\n      id: 1,\n      slug: 'fuji-san',\n      title: '\u5bcc\u58eb\u5c71',\n      category: '\u5730\u7406',\n      tags: ['\u65e5\u672c','\u5c71','\u4e16\u754c\u6587\u5316\u907a\u7523'],\n      summary: '\u65e5\u672c\u306e\u8c61\u5fb4\u3068\u3082\u3044\u308f\u308c\u308b\u6210\u5c64\u706b\u5c71\u3002\u6a19\u9ad83,776m\u3067\u65e5\u672c\u6700\u9ad8\u5cf0\u3002',\n      updated: '2025-08-15',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u5bcc\u58eb\u5c71\u306f\u672c\u5dde\u4e2d\u90e8\u306b\u4f4d\u7f6e\u3059\u308b<span>\u6210\u5c64\u706b\u5c71<\/span>\u3067\u3001\u6a19\u9ad8\u306f3,776m\u30022013\u5e74\u306b\u4e16\u754c\u6587\u5316\u907a\u7523\u306b\u767b\u9332\u3055\u308c\u307e\u3057\u305f\u3002\u53e4\u6765\u3088\u308a\u4fe1\u4ef0\u306e\u5bfe\u8c61\u3067\u3042\u308a\u3001\u82b8\u8853\u3084\u6587\u5b66\u306b\u3082\u591a\u304f\u767b\u5834\u3057\u307e\u3059\u3002<\/p>\n        <h2 id=\"geo\">\u5730\u5f62\u3068\u5730\u8cea<\/h2>\n        <p>\u5bcc\u58eb\u5c71\u306f\u4f55\u5ea6\u3082\u306e\u5674\u706b\u6d3b\u52d5\u3092\u7d4c\u3066\u73fe\u5728\u306e\u7f8e\u3057\u3044\u5186\u9310\u5f62\u3092\u5f62\u6210\u3057\u307e\u3057\u305f\u3002\u706b\u53e3\u306f\u5c71\u9802\u90e8\u306b\u3042\u308a\u3001\u5916\u8f2a\u3068\u3057\u3066\u304a\u9262\u5de1\u308a\u304c\u77e5\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n        <h2 id=\"climb\">\u767b\u5c71\u3068\u4fdd\u5168<\/h2>\n        <p>\u4e00\u822c\u7684\u306a\u767b\u5c71\u30b7\u30fc\u30ba\u30f3\u306f\u590f\u3002\u767b\u5c71\u9053\u306e\u6df7\u96d1\u3084\u30b4\u30df\u554f\u984c\u3001\u4f4e\u6e29\u30fb\u9ad8\u5c71\u75c5\u306a\u3069\u306e\u30ea\u30b9\u30af\u5bfe\u7b56\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n        <h2 id=\"culture\">\u6587\u5316\u7684\u610f\u7fa9<\/h2>\n        <p>\u845b\u98fe\u5317\u658e\u306e\u300e\u5bcc\u5dbd\u4e09\u5341\u516d\u666f\u300f\u3092\u306f\u3058\u3081\u3001\u7d75\u753b\u3084\u548c\u6b4c\u306b\u983b\u7e41\u306b\u8a60\u307e\u308c\u3001\u65e5\u672c\u306e\u8c61\u5fb4\u3068\u3057\u3066\u56fd\u969b\u7684\u306b\u3082\u5e83\u304f\u77e5\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 2,\n      slug: 'internet-basics',\n      title: '\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u306e\u57fa\u790e',\n      category: '\u30c6\u30af\u30ce\u30ed\u30b8\u30fc',\n      tags: ['\u30cd\u30c3\u30c8\u30ef\u30fc\u30af','Web','\u901a\u4fe1'],\n      summary: '\u4e16\u754c\u4e2d\u306e\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u3092\u76f8\u4e92\u63a5\u7d9a\u3059\u308b\u60c5\u5831\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306e\u7dcf\u79f0\u3002',\n      updated: '2025-07-01',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u306f\u6a19\u6e96\u5316\u3055\u308c\u305f<span>TCP\/IP<\/span>\u306b\u3088\u308a\u6a5f\u5668\u540c\u58eb\u304c\u901a\u4fe1\u3059\u308b\u5de8\u5927\u306a\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u3067\u3059\u3002Web\u3001\u30e1\u30fc\u30eb\u3001\u52d5\u753b\u914d\u4fe1\u306a\u3069\u591a\u69d8\u306a\u30b5\u30fc\u30d3\u30b9\u306e\u571f\u53f0\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n        <h2 id=\"protocols\">\u4e3b\u8981\u30d7\u30ed\u30c8\u30b3\u30eb<\/h2>\n        <p>HTTP\/HTTPS\u3001DNS\u3001SMTP\u3001FTP\u306a\u3069\u304c\u4ee3\u8868\u7684\u3002\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u78ba\u4fdd\u306b\u306f\u6697\u53f7\u5316\u3084\u8a8d\u8a3c\u304c\u91cd\u8981\u3067\u3059\u3002<\/p>\n        <h2 id=\"web\">Web\u306e\u4ed5\u7d44\u307f<\/h2>\n        <p>\u30d6\u30e9\u30a6\u30b6\u304cURL\u3092\u89e3\u6c7a\u3057\u3001\u30b5\u30fc\u30d0\u304b\u3089HTML\/CSS\/JS\u7b49\u306e\u30ea\u30bd\u30fc\u30b9\u3092\u53d6\u5f97\u30fb\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n        <h2 id=\"safety\">\u5b89\u5168\u306a\u5229\u7528<\/h2>\n        <p>\u4e8c\u8981\u7d20\u8a8d\u8a3c\u3001\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u66f4\u65b0\u3001\u30d5\u30a3\u30c3\u30b7\u30f3\u30b0\u5bfe\u7b56\u3001\u5f37\u529b\u306a\u30d1\u30b9\u30ef\u30fc\u30c9\u7ba1\u7406\u304c\u57fa\u672c\u3067\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 3,\n      slug: 'dinosaurs',\n      title: '\u6050\u7adc',\n      category: '\u751f\u7269',\n      tags: ['\u53e4\u751f\u7269\u5b66','\u767d\u4e9c\u7d00','\u5316\u77f3'],\n      summary: '\u4e2d\u751f\u4ee3\u306b\u6804\u3048\u305f\u722c\u866b\u985e\u306e\u30b0\u30eb\u30fc\u30d7\u3002\u9ce5\u985e\u306f\u6050\u7adc\u306e\u7cfb\u7d71\u306b\u542b\u307e\u308c\u308b\u3068\u8003\u3048\u3089\u308c\u3066\u3044\u308b\u3002',\n      updated: '2025-05-28',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u6050\u7adc\u306f\u7d042\u51043000\u4e07\u5e74\u524d\u306b\u51fa\u73fe\u3057\u3001\u4e2d\u751f\u4ee3\u306b\u591a\u69d8\u5316\u3057\u307e\u3057\u305f\u3002<span>\u9ce5\u985e<\/span>\u306f\u6050\u7adc\u306e\u4e00\u7cfb\u7d71\u3068\u307f\u306a\u3055\u308c\u307e\u3059\u3002<\/p>\n        <h2 id=\"era\">\u6642\u4ee3\u533a\u5206<\/h2>\n        <p>\u4e09\u7573\u7d00\u30fb\u30b8\u30e5\u30e9\u7d00\u30fb\u767d\u4e9c\u7d00\u306b\u533a\u5206\u3055\u308c\u3001\u5404\u6642\u4ee3\u3067\u7279\u5fb4\u7684\u306a\u7a2e\u304c\u7e41\u6804\u3057\u307e\u3057\u305f\u3002<\/p>\n        <h2 id=\"extinction\">\u5927\u91cf\u7d76\u6ec5<\/h2>\n        <p>\u7d046600\u4e07\u5e74\u524d\u306e\u5927\u91cf\u7d76\u6ec5\u3067\u591a\u304f\u304c\u6d88\u6ec5\u3002\u9695\u77f3\u885d\u7a81\u3084\u706b\u5c71\u6d3b\u52d5\u306a\u3069\u304c\u8981\u56e0\u3068\u8003\u3048\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 4,\n      slug: 'ww2-overview',\n      title: '\u7b2c\u4e8c\u6b21\u4e16\u754c\u5927\u6226\uff08\u6982\u8aac\uff09',\n      category: '\u6b74\u53f2',\n      tags: ['20\u4e16\u7d00','\u6226\u4e89','\u56fd\u969b\u95a2\u4fc2'],\n      summary: '1939\u5e74\u304b\u30891945\u5e74\u306b\u304b\u3051\u3066\u884c\u308f\u308c\u305f\u4e16\u754c\u898f\u6a21\u306e\u6226\u4e89\u3002',\n      updated: '2025-03-10',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u7b2c\u4e8c\u6b21\u4e16\u754c\u5927\u6226\u306f\u591a\u6570\u306e\u56fd\u304c\u53c2\u6226\u3057\u305f\u4e16\u754c\u898f\u6a21\u306e\u6226\u4e89\u3067\u3001\u653f\u6cbb\u30fb\u7d4c\u6e08\u30fb\u79d1\u5b66\u6280\u8853\u30fb\u793e\u4f1a\u306b\u9577\u671f\u306e\u5f71\u97ff\u3092\u4e0e\u3048\u307e\u3057\u305f\u3002<\/p>\n        <h2 id=\"fronts\">\u4e3b\u8981\u6226\u7dda<\/h2>\n        <p>\u30e8\u30fc\u30ed\u30c3\u30d1\u3001\u592a\u5e73\u6d0b\u3001\u5317\u30a2\u30d5\u30ea\u30ab\u3001\u6771\u90e8\u6226\u7dda\u306a\u3069\u591a\u304f\u306e\u6226\u57df\u306b\u5206\u304b\u308c\u307e\u3057\u305f\u3002<\/p>\n        <h2 id=\"aftermath\">\u6226\u5f8c\u306e\u4e16\u754c<\/h2>\n        <p>\u56fd\u969b\u9023\u5408\u306e\u8a2d\u7acb\u3001\u51b7\u6226\u69cb\u9020\u306e\u5f62\u6210\u3001\u56fd\u969b\u79e9\u5e8f\u306e\u518d\u7de8\u306a\u3069\u306b\u3064\u306a\u304c\u308a\u307e\u3057\u305f\u3002<\/p>\n      `\n    },\n    {\n      id: 5,\n      slug: 'ai-basics',\n      title: '\u4eba\u5de5\u77e5\u80fd\u306e\u57fa\u790e',\n      category: '\u30c6\u30af\u30ce\u30ed\u30b8\u30fc',\n      tags: ['AI','\u6a5f\u68b0\u5b66\u7fd2','\u6df1\u5c64\u5b66\u7fd2'],\n      summary: '\u77e5\u7684\u306a\u51e6\u7406\u3092\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u3067\u5b9f\u73fe\u3059\u308b\u7814\u7a76\u5206\u91ce\u3068\u6280\u8853\u7fa4\u3002',\n      updated: '2025-06-12',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u4eba\u5de5\u77e5\u80fd\u306f\u63a2\u7d22\u30fb\u63a8\u8ad6\u304b\u3089\u6a5f\u68b0\u5b66\u7fd2\u30fb\u6df1\u5c64\u5b66\u7fd2\u307e\u3067\u591a\u69d8\u306a\u624b\u6cd5\u3092\u542b\u307f\u307e\u3059\u3002\u73fe\u4ee3\u3067\u306f\u5927\u91cf\u30c7\u30fc\u30bf\u3068\u8a08\u7b97\u8cc7\u6e90\u306b\u3088\u308a\u5b9f\u4e16\u754c\u5fdc\u7528\u304c\u62e1\u5927\u3002<\/p>\n        <h2 id=\"ml\">\u6a5f\u68b0\u5b66\u7fd2<\/h2>\n        <p>\u6559\u5e2b\u3042\u308a\u30fb\u6559\u5e2b\u306a\u3057\u30fb\u5f37\u5316\u5b66\u7fd2\u306a\u3069\u306e\u67a0\u7d44\u307f\u304c\u3042\u308a\u3001\u4e88\u6e2c\u3084\u5206\u985e\u306b\u7528\u3044\u3089\u308c\u307e\u3059\u3002<\/p>\n        <h2 id=\"dl\">\u6df1\u5c64\u5b66\u7fd2<\/h2>\n        <p>\u591a\u5c64\u30cb\u30e5\u30fc\u30e9\u30eb\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u306b\u3088\u308a\u753b\u50cf\u30fb\u97f3\u58f0\u30fb\u81ea\u7136\u8a00\u8a9e\u51e6\u7406\u3067\u9ad8\u7cbe\u5ea6\u3092\u5b9f\u73fe\u3002<\/p>\n      `\n    },\n    {\n      id: 6,\n      slug: 'sakura',\n      title: '\u30b5\u30af\u30e9\uff08\u685c\uff09',\n      category: '\u6587\u5316',\n      tags: ['\u65e5\u672c\u6587\u5316','\u690d\u7269','\u5b63\u7bc0'],\n      summary: '\u65e5\u672c\u306e\u6625\u3092\u8c61\u5fb4\u3059\u308b\u82b1\u3002\u82b1\u898b\u306f\u53e4\u304f\u304b\u3089\u306e\u5b63\u7bc0\u884c\u4e8b\u3002',\n      updated: '2025-04-02',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u685c\u306f\u30d0\u30e9\u79d1\u30b5\u30af\u30e9\u5c5e\u306e\u7dcf\u79f0\u3002\u54c1\u7a2e\u304c\u591a\u304f\u3001\u82b1\u671f\u306f\u77ed\u3044\u3082\u306e\u306e\u89b3\u8cde\u4fa1\u5024\u304c\u9ad8\u3044\u3053\u3068\u3067\u77e5\u3089\u308c\u307e\u3059\u3002<\/p>\n        <h2 id=\"hanami\">\u82b1\u898b\u306e\u6b74\u53f2<\/h2>\n        <p>\u8cb4\u65cf\u6587\u5316\u304b\u3089\u5eb6\u6c11\u306b\u5e83\u304c\u308a\u3001\u73fe\u5728\u3067\u306f\u5730\u57df\u306e\u796d\u308a\u3084\u89b3\u5149\u8cc7\u6e90\u306b\u3082\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 7,\n      slug: 'japan-history-outline',\n      title: '\u65e5\u672c\u53f2\uff08\u6982\u8aac\uff09',\n      category: '\u6b74\u53f2',\n      tags: ['\u53e4\u4ee3','\u4e2d\u4e16','\u8fd1\u4ee3'],\n      summary: '\u53e4\u4ee3\u304b\u3089\u73fe\u4ee3\u307e\u3067\u306e\u65e5\u672c\u306e\u6b74\u53f2\u3092\u5927\u307e\u304b\u306b\u6982\u89b3\u3059\u308b\u3002',\n      updated: '2025-01-20',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u65e5\u672c\u53f2\u306f\u7e04\u6587\u30fb\u5f25\u751f\u30fb\u53e4\u58b3\u306a\u3069\u306e\u53e4\u4ee3\u304b\u3089\u3001\u4e2d\u4e16\u30fb\u8fd1\u4e16\u3001\u660e\u6cbb\u4ee5\u964d\u306e\u8fd1\u4ee3\u30fb\u73fe\u4ee3\u306b\u81f3\u308b\u307e\u3067\u9023\u7d9a\u3059\u308b\u591a\u69d8\u306a\u5909\u5316\u306e\u6b74\u53f2\u3067\u3059\u3002<\/p>\n        <h2 id=\"ancient\">\u53e4\u4ee3<\/h2>\n        <p>\u7a32\u4f5c\u306e\u666e\u53ca\u3001\u53e4\u4ee3\u56fd\u5bb6\u306e\u5f62\u6210\u3001\u5f8b\u4ee4\u5236\u306e\u78ba\u7acb\u306a\u3069\u3002<\/p>\n        <h2 id=\"modern\">\u8fd1\u4ee3\u30fb\u73fe\u4ee3<\/h2>\n        <p>\u8fd1\u4ee3\u5316\u3001\u6226\u5f8c\u5fa9\u8208\u3001\u9ad8\u5ea6\u7d4c\u6e08\u6210\u9577\u3001\u5c11\u5b50\u9ad8\u9f62\u5316\u3068\u65b0\u305f\u306a\u8ab2\u984c\u3002<\/p>\n      `\n    },\n    {\n      id: 8,\n      slug: 'programming-intro',\n      title: '\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5165\u9580',\n      category: '\u30c6\u30af\u30ce\u30ed\u30b8\u30fc',\n      tags: ['\u30b3\u30fc\u30c9','\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0','\u5b66\u7fd2'],\n      summary: '\u30b3\u30f3\u30d4\u30e5\u30fc\u30bf\u306b\u624b\u9806\u3092\u4f1d\u3048\u308b\u305f\u3081\u306e\u6280\u8853\u3068\u8003\u3048\u65b9\u306e\u7dcf\u79f0\u3002',\n      updated: '2025-07-22',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u306f\u554f\u984c\u3092\u5206\u89e3\u3057\u3001\u518d\u5229\u7528\u53ef\u80fd\u306a\u624b\u9806\u3068\u3057\u3066\u8868\u73fe\u3059\u308b\u4f5c\u696d\u3067\u3059\u3002\u5909\u6570\u3001\u6761\u4ef6\u5206\u5c90\u3001\u53cd\u5fa9\u3001\u95a2\u6570\u306a\u3069\u306e\u57fa\u672c\u3092\u5b66\u3076\u3068\u5fdc\u7528\u304c\u5e83\u304c\u308a\u307e\u3059\u3002<\/p>\n        <h2 id=\"lang\">\u4e3b\u306a\u8a00\u8a9e<\/h2>\n        <p>Python\u3001JavaScript\u3001C#\u3001C++ \u306a\u3069\u7528\u9014\u306b\u5fdc\u3058\u3066\u9078\u629e\u3055\u308c\u307e\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 9,\n      slug: 'tea-ceremony',\n      title: '\u8336\u9053',\n      category: '\u6587\u5316',\n      tags: ['\u65e5\u672c\u6587\u5316','\u793c\u6cd5','\u82b8\u9053'],\n      summary: '\u6e6f\u3092\u6cb8\u304b\u3057\u8336\u3092\u70b9\u3066\u3001\u5ba2\u3092\u3082\u3066\u306a\u3059\u7dcf\u5408\u82b8\u8853\u3002',\n      updated: '2025-05-03',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u8336\u9053\u306f\u9053\u5177\u3001\u4f5c\u6cd5\u3001\u7a7a\u9593\u3001\u5b63\u7bc0\u611f\u306a\u3069\u304c\u4e00\u4f53\u3068\u306a\u308b\u7dcf\u5408\u82b8\u8853\u3067\u3059\u3002<span>\u548c\u656c\u6e05\u5bc2<\/span>\u306e\u7cbe\u795e\u304c\u91cd\u8996\u3055\u308c\u307e\u3059\u3002<\/p>\n        <h2 id=\"tools\">\u9053\u5177<\/h2>\n        <p>\u8336\u7897\u3001\u8336\u7b45\u3001\u8336\u6753\u3001\u91dc\u3001\u67c4\u6753\u306a\u3069\u3002\u53d6\u308a\u6271\u3044\u306b\u306f\u6240\u4f5c\u3068\u914d\u616e\u304c\u6c42\u3081\u3089\u308c\u307e\u3059\u3002<\/p>\n      `\n    },\n    {\n      id: 10,\n      slug: 'solar-system',\n      title: '\u592a\u967d\u7cfb',\n      category: '\u5929\u6587\u5b66',\n      tags: ['\u60d1\u661f','\u885b\u661f','\u5b87\u5b99'],\n      summary: '\u592a\u967d\u3068\u305d\u306e\u5468\u56f2\u3092\u516c\u8ee2\u3059\u308b\u5929\u4f53\u306e\u96c6\u307e\u308a\u3002',\n      updated: '2025-06-30',\n      author: '\u30df\u30cb\u767e\u79d1\u7de8\u96c6\u90e8',\n      content: `\n        <p>\u592a\u967d\u7cfb\u306f\u592a\u967d\u3092\u4e2d\u5fc3\u306b\u30018\u3064\u306e\u60d1\u661f\u3001\u6e96\u60d1\u661f\u3001\u5c0f\u60d1\u661f\u3001\u5f57\u661f\u3001\u5875\u3084\u30ac\u30b9\u304c\u91cd\u529b\u3067\u7d50\u3073\u3064\u304f\u30b7\u30b9\u30c6\u30e0\u3067\u3059\u3002<\/p>\n        <h2 id=\"planets\">\u60d1\u661f<\/h2>\n        <p>\u6c34\u661f\u30fb\u91d1\u661f\u30fb\u5730\u7403\u30fb\u706b\u661f\u30fb\u6728\u661f\u30fb\u571f\u661f\u30fb\u5929\u738b\u661f\u30fb\u6d77\u738b\u661f\u3002\u5404\u60d1\u661f\u306f\u56fa\u6709\u306e\u7279\u5fb4\u3092\u6301\u3061\u307e\u3059\u3002<\/p>\n      `\n    }\n  ];\n\n  \/\/ ================\n  \/\/ \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\n  \/\/ ================\n  const $ = (sel, root=document) => root.querySelector(sel);\n  const $$ = (sel, root=document) => Array.from(root.querySelectorAll(sel));\n  const fmtDate = iso => new Date(iso).toLocaleDateString('ja-JP', {year:'numeric', month:'short', day:'numeric'});\n  const unique = arr => [...new Set(arr)];\n  const slugToArticle = slug => ARTICLES.find(a=>a.slug===slug);\n  const STORAGE = {\n    bookmarks: 'mini_ency_bookmarks',\n    history: 'mini_ency_history'\n  };\n\n  function getBookmarks(){\n    try{return JSON.parse(localStorage.getItem(STORAGE.bookmarks)||'[]');}catch{ return []; }\n  }\n  function setBookmarks(list){ localStorage.setItem(STORAGE.bookmarks, JSON.stringify(unique(list))); }\n  function isBookmarked(slug){ return getBookmarks().includes(slug); }\n  function toggleBookmark(slug){\n    const list=getBookmarks();\n    if(list.includes(slug)) setBookmarks(list.filter(s=>s!==slug));\n    else setBookmarks([...list, slug]);\n  }\n  function pushHistory(slug){\n    try{\n      const now = Date.now();\n      const hist = JSON.parse(localStorage.getItem(STORAGE.history)||'[]');\n      const filtered = hist.filter(h=>h.slug!==slug);\n      filtered.unshift({slug, t: now});\n      localStorage.setItem(STORAGE.history, JSON.stringify(filtered.slice(0,50)));\n    }catch{}\n  }\n\n  \/\/ ================\n  \/\/ \u691c\u7d22\u30fb\u30d5\u30a3\u30eb\u30bf\n  \/\/ ================\n  let state = {\n    q: '',\n    category: '',\n    tag: '',\n    sort: 'recent',\n    page: 1,\n    perPage: 9\n  };\n\n  function normalize(str){ return (str||'').toString().toLowerCase(); }\n\n  function filterArticles(){\n    let list = ARTICLES.slice();\n    if(state.q){\n      const q = normalize(state.q);\n      list = list.filter(a => normalize(a.title+\" \"+a.summary+\" \"+a.tags.join(' ')+\" \"+a.content.replace(\/<[^>]+>\/g,'')).includes(q));\n    }\n    if(state.category){ list = list.filter(a => a.category===state.category); }\n    if(state.tag){ list = list.filter(a => a.tags.includes(state.tag)); }\n    if(state.sort==='recent'){ list.sort((a,b)=> new Date(b.updated)-new Date(a.updated)); }\n    if(state.sort==='title'){ list.sort((a,b)=> a.title.localeCompare(b.title,'ja')); }\n    return list;\n  }\n\n  \/\/ =============\n  \/\/  \u4e00\u89a7\u63cf\u753b\n  \/\/ =============\n  function renderCategories(){\n    const select = $('#category');\n    const cats = unique(ARTICLES.map(a=>a.category)).sort((a,b)=>a.localeCompare(b,'ja'));\n    select.innerHTML = '<option value=\"\">\u3059\u3079\u3066<\/option>' + cats.map(c=>`<option value=\"${c}\">${c}<\/option>`).join('');\n  }\n\n  function renderTagsBar(){\n    const bar = $('#tagBar');\n    const tags = unique(ARTICLES.flatMap(a=>a.tags)).sort((a,b)=>a.localeCompare(b,'ja'));\n    bar.innerHTML = '<div class=\"flex flex-wrap gap-2\">' + tags.map(t=>\n      `<button data-tag=\"${t}\" class=\"tag-btn px-3 py-1 rounded-full border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 ${state.tag===t?'bg-indigo-600 text-white border-indigo-600':''}\">#${t}<\/button>`\n    ).join('') + '<\/div>';\n    $$('.tag-btn').forEach(b=> b.addEventListener('click',()=>{ state.tag = (state.tag===b.dataset.tag? '' : b.dataset.tag); state.page=1; syncList(); }));\n  }\n\n  function createCard(a){\n    const bookmarked = isBookmarked(a.slug);\n    return `\n      <article class=\"border border-slate-200 dark:border-slate-700 rounded-2xl p-4 bg-white\/70 dark:bg-slate-800\/70 hover:shadow transition\">\n        <header class=\"flex items-start justify-between gap-3\">\n          <h3 class=\"text-lg font-semibold leading-tight\">${a.title}<\/h3>\n          <button class=\"bookmark inline-flex items-center justify-center w-9 h-9 rounded-full ${bookmarked?'text-amber-500':'text-slate-400'}\" title=\"\u30d6\u30c3\u30af\u30de\u30fc\u30af\" data-slug=\"${a.slug}\">\n            <i class=\"${bookmarked?'fa-solid':'fa-regular'} fa-star\"><\/i>\n          <\/button>\n        <\/header>\n        <div class=\"mt-1 text-sm text-slate-500\">${a.category}\u30fb\u66f4\u65b0 ${fmtDate(a.updated)}<\/div>\n        <p class=\"mt-2 text-sm line-clamp-3\">${a.summary}<\/p>\n        <div class=\"mt-3 flex flex-wrap gap-2 text-xs\">${a.tags.map(t=>`<span class='px-2 py-1 rounded-full bg-slate-100 dark:bg-slate-700'>#${t}<\/span>`).join('')}<\/div>\n        <div class=\"mt-4 flex gap-2\">\n          <a href=\"#\/a\/${a.slug}\" class=\"inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-indigo-600 text-white text-sm hover:opacity-90\"><i class=\"fa-solid fa-circle-info\"><\/i> \u8a73\u7d30<\/a>\n          <button class=\"copy-link inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800\" data-link=\"${location.origin+location.pathname}#\/a\/${a.slug}\"><i class=\"fa-solid fa-link\"><\/i>\u30ea\u30f3\u30af<\/button>\n        <\/div>\n      <\/article>\n    `;\n  }\n\n  function renderPager(total){\n    const pager = $('#pager');\n    const pages = Math.max(1, Math.ceil(total\/state.perPage));\n    state.page = Math.min(state.page, pages);\n    let html='';\n    for(let i=1;i<=pages;i++){\n      html += `<button class=\"px-3 py-1 rounded-lg border ${i===state.page?'bg-indigo-600 text-white border-indigo-600':'border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800'}\" data-page=\"${i}\">${i}<\/button>`;\n    }\n    pager.innerHTML = html;\n    $$('#pager button').forEach(b=> b.addEventListener('click',()=>{ state.page=Number(b.dataset.page); syncList(false); }));\n  }\n\n  function syncList(scrollTop=true){\n    const list = filterArticles();\n    $('#resultCount').textContent = list.length;\n    renderPager(list.length);\n\n    const start=(state.page-1)*state.perPage;\n    const pageItems=list.slice(start, start+state.perPage);\n    $('#cards').innerHTML = pageItems.map(createCard).join('');\n\n    \/\/ events\n    $$('.bookmark').forEach(b=> b.addEventListener('click',()=>{ toggleBookmark(b.dataset.slug); syncList(false); }));\n    $$('.copy-link').forEach(b=> b.addEventListener('click',()=> copyText(b.dataset.link)));\n\n    if(scrollTop) window.scrollTo({top:0, behavior:'smooth'});\n  }\n\n  \/\/ =================\n  \/\/ \u8a18\u4e8b\u30da\u30fc\u30b8\u63cf\u753b\n  \/\/ =================\n  function renderArticle(slug){\n    const a = slugToArticle(slug);\n    if(!a){ location.hash = ''; return; }\n\n    \/\/ breadcrumb\n    $('#breadcrumb').innerHTML = `<a class=\"underline\" href=\"#\">\u30db\u30fc\u30e0<\/a> \/ <span class=\"text-slate-600\">${a.category}<\/span>`;\n\n    \/\/ title & meta\n    $('#articleTitle').textContent = a.title;\n    $('#articleMeta').innerHTML = `\n      <span><i class=\"fa-regular fa-calendar\"><\/i> \u66f4\u65b0 ${fmtDate(a.updated)}<\/span>\n      <span class=\"mx-1\">\u2022<\/span>\n      <span><i class=\"fa-regular fa-user\"><\/i> ${a.author}<\/span>\n      <span class=\"mx-1\">\u2022<\/span>\n      <span><i class=\"fa-solid fa-folder\"><\/i> ${a.category}<\/span>\n    `;\n\n    \/\/ content\n    const container = $('#articleContent');\n    container.innerHTML = a.content;\n\n    \/\/ tags\n    $('#articleTags').innerHTML = a.tags.map(t=>`<a href=\"#\" data-tag=\"${t}\" class=\"px-3 py-1 rounded-full border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800\">#${t}<\/a>`).join('');\n    $$('#articleTags a').forEach(el=> el.addEventListener('click',(e)=>{ e.preventDefault(); state.tag=el.dataset.tag; location.hash=''; }));\n\n    \/\/ bookmark button\n    const btnBM = $('#btnToggleBookmark');\n    const setBM = ()=>{\n      const marked = isBookmarked(a.slug);\n      btnBM.innerHTML = `<i class=\"${marked?'fa-solid':'fa-regular'} fa-star me-1\"><\/i>${marked?'\u4fdd\u5b58\u6e08\u307f':'\u30d6\u30c3\u30af\u30de\u30fc\u30af'}`;\n    };\n    btnBM.onclick = ()=>{ toggleBookmark(a.slug); setBM(); };\n    setBM();\n\n    \/\/ copy link\n    $('#btnCopyLink').onclick = ()=> copyText(location.href);\n\n    \/\/ TOC\n    buildTOC();\n\n    \/\/ JSON-LD\n    updateLDJSON(a);\n\n    \/\/ history\n    pushHistory(a.slug);\n  }\n\n  function buildTOC(){\n    const toc = $('#toc');\n    const headings = $$('#articleContent h2, #articleContent h3');\n    if(headings.length===0){ toc.innerHTML = '<div class=\"text-slate-500 text-sm\">\u898b\u51fa\u3057\u304c\u3042\u308a\u307e\u305b\u3093<\/div>'; return; }\n    let html='';\n    headings.forEach(h=>{\n      if(!h.id) h.id = h.textContent.trim().toLowerCase().replace(\/[^a-z0-9\u4e00-\u9fa5\u3041-\u3093\u30a1-\u30f6\u30fc]+\/g,'-');\n      const indent = h.tagName==='H3' ? 'ms-4' : '';\n      html += `<a href=\"#${h.id}\" class=\"${indent} hover:text-indigo-600\">${h.textContent}<\/a>`;\n    });\n    toc.innerHTML = html;\n\n    const observer = new IntersectionObserver((entries)=>{\n      entries.forEach(e=>{\n        if(e.isIntersecting){\n          $$('#toc a').forEach(a=>a.classList.remove('active'));\n          const a = $(`#toc a[href=\"#${e.target.id}\"]`);\n          if(a) a.classList.add('active');\n        }\n      });\n    }, {rootMargin: '0px 0px -70% 0px'});\n    headings.forEach(h=> observer.observe(h));\n  }\n\n  function updateLDJSON(a){\n    const obj = {\n      '@context':'https:\/\/schema.org',\n      '@type':'Article',\n      headline: a.title,\n      dateModified: a.updated,\n      author: { '@type':'Organization', name: a.author },\n      keywords: a.tags.join(','),\n      articleSection: a.category,\n      url: location.href\n    };\n    $('#ldjson').textContent = JSON.stringify(obj);\n  }\n\n  \/\/ ============\n  \/\/  \u30eb\u30fc\u30bf\u30fc\n  \/\/ ============\n  function route(){\n    const hash = location.hash.slice(1);\n    if(hash.startsWith('\/a\/')){\n      const slug = hash.split('\/')[2];\n      $('#view-home').classList.add('hidden');\n      $('#view-article').classList.remove('hidden');\n      renderArticle(slug);\n      window.scrollTo({top:0, behavior:'instant'});\n    }else{\n      $('#view-article').classList.add('hidden');\n      $('#view-home').classList.remove('hidden');\n      syncList();\n    }\n  }\n\n  window.addEventListener('hashchange', route);\n\n  \/\/ ============\n  \/\/  \u4fbf\u5229\u6a5f\u80fd\n  \/\/ ============\n  function copyText(text){\n    navigator.clipboard.writeText(text).then(()=>{\n      toast('\u30ea\u30f3\u30af\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f');\n    }, ()=>{\n      prompt('\u30b3\u30d4\u30fc\u3067\u304d\u306a\u3044\u5834\u5408\u306f\u624b\u52d5\u3067\u9078\u629e\u3057\u3066\u30b3\u30d4\u30fc\u3057\u3066\u304f\u3060\u3055\u3044:', text);\n    });\n  }\n\n  function toast(msg){\n    const t = document.createElement('div');\n    t.textContent = msg;\n    t.className = 'fixed left-1\/2 -translate-x-1\/2 bottom-6 z-50 bg-black\/80 text-white px-4 py-2 rounded-xl text-sm';\n    document.body.appendChild(t);\n    setTimeout(()=>{ t.remove(); }, 1600);\n  }\n\n  function randomArticle(){\n    const a = ARTICLES[Math.floor(Math.random()*ARTICLES.length)];\n    location.hash = `#\/a\/${a.slug}`;\n  }\n\n  \/\/ ==============\n  \/\/  I\/O (JSON)\n  \/\/ ==============\n  function exportJSON(){\n    const blob = new Blob([JSON.stringify(ARTICLES, null, 2)], {type:'application\/json'});\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url; a.download = 'mini-encyclopedia.json'; a.click();\n    URL.revokeObjectURL(url);\n  }\n\n  function importJSON(file){\n    const reader = new FileReader();\n    reader.onload = (e)=>{\n      try{\n        const data = JSON.parse(e.target.result);\n        if(Array.isArray(data)){\n          \/\/ \u5f62\u5f0f\u304c\u6b63\u3057\u3051\u308c\u3070\u5dee\u3057\u66ff\u3048\n          if(data.every(x=>x.slug && x.title && x.content)){\n            ARTICLES.length = 0; \/\/ \u7834\u58ca\u7684\u66f4\u65b0\n            data.forEach(x=> ARTICLES.push(x));\n            init();\n            toast('JSON\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3057\u305f');\n          }else{\n            alert('\u30b9\u30ad\u30fc\u30de\u304c\u4e0d\u6b63\u3067\u3059\u3002slug\/title\/content \u306f\u5fc5\u9808\u3067\u3059\u3002');\n          }\n        }else{\n          alert('\u914d\u5217\u5f62\u5f0f\u306eJSON\u304c\u5fc5\u8981\u3067\u3059');\n        }\n      }catch(err){\n        alert('JSON\u306e\u89e3\u6790\u306b\u5931\u6557\u3057\u307e\u3057\u305f: '+err.message);\n      }\n    };\n    reader.readAsText(file);\n  }\n\n  \/\/ ============\n  \/\/  \u521d\u671f\u5316\n  \/\/ ============\n  function init(){\n    \/\/ \u5e74\n    $('#year').textContent = new Date().getFullYear();\n\n    \/\/ \u30ab\u30c6\u30b4\u30ea\u30fb\u30bf\u30b0\u30d0\u30fc\n    renderCategories();\n    renderTagsBar();\n\n    \/\/ \u30a4\u30d9\u30f3\u30c8\n    $('#search').addEventListener('input', (e)=>{ state.q = e.target.value.trim(); state.page=1; syncList(); });\n    $('#category').addEventListener('change', (e)=>{ state.category = e.target.value; state.page=1; syncList(); });\n    $('#sort').addEventListener('change', (e)=>{ state.sort = e.target.value; state.page=1; syncList(); });\n    $('#btnRandom').addEventListener('click', randomArticle);\n    $('#btnBookmarks').addEventListener('click', ()=>{\n      const bms = getBookmarks();\n      if(bms.length===0){ toast('\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306f\u307e\u3060\u3042\u308a\u307e\u305b\u3093'); return; }\n      const first = slugToArticle(bms[0]);\n      if(first) location.hash = `#\/a\/${first.slug}`;\n    });\n    $('#btnHome').addEventListener('click', ()=>{ location.hash=''; });\n\n    \/\/ \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\u5207\u66ff\n    $('#btnDark').addEventListener('click', ()=>{\n      const root = document.documentElement;\n      const isDark = root.classList.toggle('dark');\n      localStorage.setItem('theme', isDark? 'dark':'light');\n    });\n\n    \/\/ JSON I\/O\n    $('#btnExport').addEventListener('click', exportJSON);\n    $('#fileImport').addEventListener('change', (e)=>{ const f=e.target.files?.[0]; if(f) importJSON(f); e.target.value=''; });\n\n    \/\/ \u521d\u56de\u63cf\u753b\n    route();\n  }\n\n  document.addEventListener('DOMContentLoaded', init);\n  <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[81,80,78,4,6,87],"tags":[3],"class_list":{"0":"post-26158","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-css","7":"category-html","8":"category-javascript","9":"category-programming","10":"category-web","12":"tag-programming"},"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26158"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26158\/revisions"}],"predecessor-version":[{"id":26159,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26158\/revisions\/26159"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26158"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}