保育関連ニュースHub
保育ニュースHub – 機能説明書
保育ニュースHubは、保育・子育て関連の最新ニュースを自動取得し、PC、タブレット、スマートフォンで快適に閲覧できるWebアプリケーションです。
主要機能
1. ニュース自動取得システム
ニュース自動取得
- 保育関連ニュースをリアルタイムで取得
- 検索キーワードに基づいて関連ニュースを自動フィルタリング
- 日本語ニュース(
hl=ja&gl=JP&ceid=JP:ja)に最適化
2段階フォールバック機能
ネットワーク環境に左右されず、確実にニュースを表示するための冗長化設計:
| 優先順位 | 方式 | 説明 |
|---|---|---|
| 第1段階 | rss2json.com API | RSSをJSONに変換して取得(高速・安定) |
| 第2段階 | AllOrigins プロキシ | 直接XMLをパースして取得(バックアップ) |
自動更新
- 5分間隔で自動的に最新ニュースを取得
- 手動更新ボタン(🔄)でいつでも即座に更新可能
2. キーワードフィルタリング
画面上部のタブで、表示するニュースのカテゴリを切り替え可能:
| タブ | 検索キーワード | 内容 |
|---|---|---|
| ✨ すべて | 保育 | 保育全般のニュース |
| 🏫 保育園 | 保育園 | 保育園に関するニュース |
| 👩🏫 保育士 | 保育士 | 保育士の処遇・資格等 |
| 👶 待機児童 | 待機児童 | 待機児童問題関連 |
| 👨👩👧 子育て支援 | 子育て支援 | 支援制度・政策関連 |
| 🎒 幼稚園 | 幼稚園 | 幼稚園に関するニュース |
3. ニュース表示機能
注目ニュース(Featured Card)
- 最新の1件を大きく目立つカードで表示
- グラデーション背景で視認性向上
- ニュースソース・投稿日時を表示
ニュースリスト
- 最大15件のニュースをカード形式で表示
- 各カードに以下の情報を表示:
- ニュースソース名
- 投稿日時(相対表示:「3時間前」「2日前」など)
- NEWバッジ(24時間以内の記事)
- 記事タイトル
- 記事概要(最大2行)
外部リンク
- 「記事を読む →」ボタンで元記事サイトへ遷移
- 新しいタブで開く(
target="_blank") - セキュリティ対策済み(
rel="noopener")
4. 共有機能
Web Share API対応
- スマートフォンの共有機能に対応
- LINE、Twitter、メールなど各種アプリへ直接共有可能
クリップボードコピー
- Web Share API非対応環境ではURLをクリップボードにコピー
- コピー完了時にトースト通知で確認
5. UI/UX機能
ステータスバー
- 取得したニュース件数をリアルタイム表示
- 最終更新時刻を表示
- LIVEバッジでリアルタイム更新を視覚化
ローディング表示
- ニュース取得中はスピナーアニメーションを表示
- ユーザーに処理状況を明確に伝達
エラーハンドリング
- ネットワークエラー時は分かりやすいメッセージを表示
- 再読み込みボタンで簡単にリトライ可能
トースト通知
- 操作完了時に画面下部に通知を表示
- 2.5秒後に自動的に消去
6. レスポンシブデザイン
モバイル最適化
- スマートフォンでの操作に最適化
- タッチ操作しやすいボタンサイズ(44px以上)
- 横スクロール可能なタブUI
ダークモード対応
- システム設定に応じて自動切り替え
- 目に優しい配色で夜間の閲覧も快適
データ取得
| 項目 | 技術 |
|---|---|
| RSSソース | Google News RSS |
| API | rss2json.com (JSON変換) |
| プロキシ | AllOrigins (CORS回避) |
| パーサー | DOMParser (XML解析) |
対応環境
ブラウザ
- Google Chrome (推奨)
- Safari
- Firefox
- Microsoft Edge
デバイス
- iPhone / iPad
- Android スマートフォン / タブレット
- PC / Mac
使用方法
- ページを開く – ブラウザでHTMLファイルを開く
- ニュース取得 – 自動的に最新ニュースを取得
- カテゴリ選択 – 上部タブで興味のあるカテゴリを選択
- 記事を読む – 「記事を読む →」ボタンで元記事へ
- 共有する – 📤ボタンで記事をSNS等へ共有
- 更新する – 🔄ボタンで最新情報を再取得
