hp-archive: Xポストの分類フィルタと技術的な補足を整理

- Xポスト一覧を KodairaNews コンポーネントに移し、分類で絞り込めるようにした
- Xの新着と掲載漏れを追加（計41件）
- 使い方の記述を分野別ページに合わせて修正
- 技術的な補足を控えめな注記に変更し、暫定版ノートとの重複を解消
- 市の案内ページの表記を「臨時案内ページ（暫定ページ）」に統一

1 files changed, 407 insertions, 0 deletions

diff --git a/src/components/KodairaNews.astro b/src/components/KodairaNews.astro
new file mode 100644
index 0000000..ffe1b89
--- /dev/null
+++ b/src/components/KodairaNews.astro
@@ -0,0 +1,407 @@
+---
+// 小平市公式X（@kodaira_tokyo）の主なポスト（ホームページ停止後）。
+// 分類（ラジオボタン）での絞り込みは利用者の端末で実行する。
+type CatId = "status" | "procedure" | "meeting" | "event" | "other";
+
+type Post = {
+  date: string;
+  cat: CatId;
+  note?: string;
+  links: { text: string; url: string }[];
+};
+
+const CATS: { id: CatId | "all"; label: string }[] = [
+  { id: "all", label: "すべて" },
+  { id: "status", label: "障害・復旧" },
+  { id: "procedure", label: "手続き・申請" },
+  { id: "meeting", label: "審議会・議会" },
+  { id: "event", label: "イベント・募集" },
+  { id: "other", label: "その他" },
+];
+
+const X = (id: string) => `https://twitter.com/kodaira_tokyo/status/${id}`;
+
+const posts: Post[] = [
+  {
+    date: "10月16日",
+    cat: "other",
+    note: "西部市民センターでの回収は10月29日で終了",
+    links: [{ text: "小川パレット4階に資源物回収ボックスを設置（11月4日から）", url: X("2110974023261683919") }],
+  },
+  {
+    date: "10月16日",
+    cat: "meeting",
+    links: [{ text: "審議会などの日程（社会教育委員の会議、10月22日）", url: X("2110890970531479837") }],
+  },
+  {
+    date: "10月16日",
+    cat: "meeting",
+    links: [{ text: "福祉のまちづくり推進協議会（10月29日）", url: X("2110883424890499458") }],
+  },
+  {
+    date: "10月15日",
+    cat: "status",
+    links: [{ text: "ホームページの障害状況について", url: X("2110644150542672090") }],
+  },
+  {
+    date: "10月15日",
+    cat: "status",
+    note: "10月7日からの障害の調査状況",
+    links: [{ text: "市ホームページのシステム障害に関する調査状況について", url: X("2110542852698890478") }],
+  },
+  {
+    date: "10月15日",
+    cat: "event",
+    note: "会場周辺で交通規制",
+    links: [{ text: "小平市民まつり（10月18日開催）", url: X("2110536132467229078") }],
+  },
+  {
+    date: "10月15日",
+    cat: "event",
+    links: [{ text: "小平市民まつり 姉妹都市・北海道小平町の物産販売", url: X("2110543681245900869") }],
+  },
+  {
+    date: "10月15日",
+    cat: "event",
+    note: "申込みは電話またはメールで、10月21日まで",
+    links: [
+      { text: "パークレンジャーと行く 秋のこだいら生きもの調査隊（10月24日）", url: X("2110535182407393475") },
+    ],
+  },
+  {
+    date: "10月15日",
+    cat: "event",
+    note: "申込み期限を10月21日に延長",
+    links: [{ text: "秋の生きもの調査イベント（10月24日）", url: X("2110521034357031149") }],
+  },
+  {
+    date: "10月14日",
+    cat: "status",
+    note: "10月7日からの障害の状況",
+    links: [{ text: "ホームページの障害状況について", url: X("2110279448344019045") }],
+  },
+  {
+    date: "10月14日",
+    cat: "status",
+    links: [{ text: "消防団指令システム等への不正アクセスについて", url: X("2110256791045152934") }],
+  },
+  {
+    date: "10月14日",
+    cat: "event",
+    links: [
+      { text: "都市計画マスタープラン（素案）のパブリックコメント", url: X("2110203942923608538") },
+    ],
+  },
+  {
+    date: "10月14日",
+    cat: "meeting",
+    links: [{ text: "広聴広報特別委員会（10月20日）の中継", url: X("2110188846684004405") }],
+  },
+  {
+    date: "10月14日",
+    cat: "meeting",
+    note: "定員10名、当日受付",
+    links: [{ text: "第4回地域自立支援協議会全体会（10月27日）", url: X("2110173751912579398") }],
+  },
+  {
+    date: "10月14日",
+    cat: "procedure",
+    links: [{ text: "不動産公売のお知らせ", url: X("2110158645304422537") }],
+  },
+  {
+    date: "10月13日",
+    cat: "status",
+    note: "10月10日から12日にも同じ内容のポスト",
+    links: [{ text: "ホームページの障害状況について", url: X("2109917062839877729") }],
+  },
+  {
+    date: "10月13日",
+    cat: "procedure",
+    note: "申込み先の案内",
+    links: [{ text: "検診・予防接種などの申込み方法", url: X("2109834007407923444") }],
+  },
+  {
+    date: "10月13日",
+    cat: "procedure",
+    note: "市ホームページが閲覧できないため、申請先の案内",
+    links: [
+      { text: "産後ケア事業", url: X("2109818905875062866") },
+      { text: "転入された妊婦の方へ", url: X("2109818906185793879") },
+      { text: "家事育児サポーター・多胎児サポート", url: X("2109818908290994548") },
+    ],
+  },
+  {
+    date: "10月13日",
+    cat: "procedure",
+    note: "様式のダウンロード",
+    links: [{ text: "令和9年度学童クラブ申込み関係様式", url: X("2109811363392704948") }],
+  },
+  {
+    date: "10月13日",
+    cat: "procedure",
+    note: "申請書のダウンロード",
+    links: [{ text: "税に関係する主要な申請書", url: X("2109803806875701532") }],
+  },
+  {
+    date: "10月9日",
+    cat: "status",
+    links: [{ text: "ホームページの障害状況について", url: X("2108489987809595738") }],
+  },
+  {
+    date: "10月9日",
+    cat: "meeting",
+    note: "傍聴できます",
+    links: [{ text: "多文化共生推進基本方針検討委員会（10月21日）", url: X("2108492666874769624") }],
+  },
+  {
+    date: "10月9日",
+    cat: "meeting",
+    note: "傍聴できます",
+    links: [{ text: "第4回小平市障がい者計画等検討委員会（10月19日）", url: X("2108490154092483060") }],
+  },
+  {
+    date: "10月9日",
+    cat: "other",
+    links: [{ text: "小平市防災マップアプリのご紹介", url: X("2108477174449836108") }],
+  },
+  {
+    date: "10月9日",
+    cat: "other",
+    links: [
+      { text: "障がい者虐待に関する通報・相談", url: X("2108471275308106185") },
+      { text: "障がい者の緊急時受入れの相談", url: X("2108471275744113133") },
+    ],
+  },
+  {
+    date: "10月9日",
+    cat: "other",
+    links: [{ text: "休日歯科応急診療（10月11日・12日）", url: X("2108459951199055997") }],
+  },
+  {
+    date: "10月9日",
+    cat: "status",
+    links: [{ text: "システム障害に伴う臨時案内ページ（暫定ページ）の開設", url: X("2108444851142340669") }],
+  },
+  {
+    date: "10月9日",
+    cat: "procedure",
+    links: [
+      { text: "国立・都立・私立の小・中学校に通学する場合の手続き（区域外就学届）", url: X("2108429751731835342") },
+    ],
+  },
+  {
+    date: "10月9日",
+    cat: "meeting",
+    note: "傍聴できます",
+    links: [
+      {
+        text: "小平市立中学校部活動地域連携・地域移行推進委員会（10月29日）",
+        url: X("2108439818292371964"),
+      },
+    ],
+  },
+  {
+    date: "10月9日",
+    cat: "meeting",
+    links: [{ text: "決算特別委員会（10月13日から16日）の中継", url: X("2108424718566994015") }],
+  },
+  {
+    date: "10月9日",
+    cat: "other",
+    links: [{ text: "小平ごみ分別アプリのご紹介", url: X("2108422203159220651") }],
+  },
+  {
+    date: "10月9日",
+    cat: "procedure",
+    note: "市ホームページが閲覧できないため、予約先の案内",
+    links: [
+      { text: "妊娠届・母子健康手帳の交付・マタニティサポート面談", url: X("2108361803965329485") },
+    ],
+  },
+  {
+    date: "10月9日",
+    cat: "procedure",
+    note: "様式のダウンロード",
+    links: [{ text: "令和9年度保育園等入園申込み関係様式", url: X("2108354256675721622") }],
+  },
+  {
+    date: "10月9日",
+    cat: "event",
+    note: "締切を延長",
+    links: [{ text: "令和9年4月採用 常勤職員募集", url: X("2108346706509042051") }],
+  },
+  {
+    date: "10月8日",
+    cat: "procedure",
+    links: [{ text: "粗大ごみ収集のインターネットでの申込み", url: X("2108074917950521598") }],
+  },
+  {
+    date: "10月8日",
+    cat: "event",
+    links: [{ text: "居住支援セミナー（10月23日）", url: X("2107999416145817791") }],
+  },
+  {
+    date: "10月8日",
+    cat: "status",
+    links: [{ text: "ホームページの障害に関するお詫び", url: X("2107976770385224041") }],
+  },
+  {
+    date: "10月7日",
+    cat: "event",
+    links: [{ text: "民生委員の活動と役割の説明会（10月22日）", url: X("2107712532588962007") }],
+  },
+  {
+    date: "10月7日",
+    cat: "procedure",
+    links: [{ text: "粗大ごみの申込み（電話での受付）", url: X("2107702037605748761") }],
+  },
+  {
+    date: "10月7日",
+    cat: "meeting",
+    links: [{ text: "都市計画マスタープラン全体構想特別委員会の中継", url: X("2107635373212115134") }],
+  },
+  {
+    date: "10月7日",
+    cat: "status",
+    links: [{ text: "市ホームページ閲覧障害のお知らせ", url: X("2107618767085896063") }],
+  },
+];
+
+const countOf = (id: CatId | "all") =>
+  id === "all" ? posts.length : posts.filter((p) => p.cat === id).length;
+---
+
+<div class="kd-news" data-kodaira-news>
+  <fieldset class="kd-news-filter">
+    <legend class="kd-news-legend">分類で絞る</legend>
+    {
+      CATS.map((c) => (
+        <label class="kd-news-chip">
+          <input type="radio" name="kd-news-cat" value={c.id} checked={c.id === "all"} />
+          <span>
+            {c.label}
+            <span class="kd-news-count">{countOf(c.id)}</span>
+          </span>
+        </label>
+      ))
+    }
+  </fieldset>
+
+  <p class="kd-news-hint">枠内はスクロールできます。分類を選ぶと、その分類のポストだけを表示します。</p>
+
+  <div class="kd-news-scroll">
+    <ul class="kd-news-list">
+      {
+        posts.map((p) => (
+          <li data-cat={p.cat}>
+            {p.date}{" "}
+            {p.links.map((l, i) => (
+              <>
+                {i > 0 && "／"}
+                <a href={l.url}>{l.text}</a>
+              </>
+            ))}
+            {p.note && `（${p.note}）`}
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+
+  <p class="kd-news-none" data-kd-news-none hidden>該当するポストはありません。</p>
+</div>
+
+<style>
+  .kd-news-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem 1rem;
+    align-items: center;
+    margin: 0 0 0.5rem;
+    padding: 0.5rem 0.8rem;
+    border: 1px solid var(--sl-color-hairline, #ccc);
+    border-radius: 8px;
+  }
+  .kd-news-legend {
+    padding: 0 0.2rem;
+    font-size: 0.8em;
+    opacity: 0.7;
+  }
+  .kd-news-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+  .kd-news-chip input {
+    margin: 0;
+  }
+  .kd-news-chip:has(input:checked) {
+    font-weight: 700;
+  }
+  .kd-news-count {
+    margin-left: 0.25rem;
+    font-size: 0.75em;
+    opacity: 0.7;
+  }
+  .kd-news-hint {
+    margin: 0 0 0.4rem;
+    font-size: 0.8rem;
+    opacity: 0.75;
+  }
+  .kd-news-scroll {
+    max-height: 22rem;
+    overflow-y: auto;
+    padding: 0.7rem 1rem;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 8px;
+    background: var(--sl-color-bg-sidebar);
+    overscroll-behavior: contain;
+  }
+  .kd-news-list {
+    margin: 0;
+    padding-inline-start: 1.3rem;
+  }
+  .kd-news-list li {
+    margin-bottom: 0.35rem;
+    line-height: 1.6;
+  }
+  .kd-news-list li:last-child {
+    margin-bottom: 0;
+  }
+  .kd-news-list li.is-hidden {
+    display: none;
+  }
+  .kd-news-none {
+    margin: 0.5rem 0 0;
+    font-size: 0.85rem;
+    opacity: 0.75;
+  }
+</style>
+
+<script>
+  document.querySelectorAll("[data-kodaira-news]").forEach((root) => {
+    const radios = Array.from(
+      root.querySelectorAll<HTMLInputElement>('input[name="kd-news-cat"]'),
+    );
+    const items = Array.from(root.querySelectorAll<HTMLLIElement>("[data-cat]"));
+    const none = root.querySelector("[data-kd-news-none]");
+
+    const apply = () => {
+      const value = radios.find((r) => r.checked)?.value ?? "all";
+      let shown = 0;
+      items.forEach((li) => {
+        const ok = value === "all" || li.dataset.cat === value;
+        li.classList.toggle("is-hidden", !ok);
+        if (ok) shown += 1;
+      });
+      if (none) {
+        none.hidden = shown !== 0;
+      }
+    };
+
+    radios.forEach((r) => r.addEventListener("change", apply));
+    apply();
+  });
+</script>