このよんなーハウスのサイトでは、「注意報・警報」情報が以下のような仕組みで取得・表示されています。

システムの全体像から実装まで解説します。

1. システム概要

「注意報・警報」機能は、うるま市における最新の気象警報・注意報情報をほぼリアルタイム(実際には5〜10分ほどのタイムログがあります)で提供するシステムです。この機能により、ユーザーは現在発令されている気象警報や注意報を一目で確認でき、居場所利用の際の判断材料として活用できます。

2. データソースと取得・保存

(1) データの取得

このシステムでは、以下の流れでデータが処理されています

1. 気象庁防災情報XMLフォーマット
2. Azure Functions
3. microCMS
4. Webサイト

(2) Azure Functionsによる自動データ取得

Azure Functionsを使用して、気象庁が提供する防災情報XMLフォーマットから、うるま市の警報・注意報情報を5分ごとに取得しています

(3) microCMSへのデータ保存

Azure Functionsで取得した警報・注意報情報は、microCMSの専用エンドポイントに保存されます

3. 情報処理フロー

(1)サーバーサイドの処理

• CMSからデータの取得
  • サーバーサイドでmicroCMSのAPIを使用してCMSから最新の警報・注意報情報を取得します
  • 取得したデータは以下のような形式です

{
  updated: "2025-03-15T09:30:00.000Z", // 最終更新日時
  warnings: "大雨警報,洪水警報,波浪注意報" // カンマ区切りの警報・注意報リスト
}

• データの整形
  • 「警報・注意報なし」という値が返された場合は、ユーザーフレンドリーな表現「警報・注意報は発表されていません」に変換します
  • 整形されたデータはページデータの一部として返されます

(2) クライアントサイドの処理

• データの分類
  • 受け取った警報・注意報情報をカンマで分割し、配列に変換します
    • 「特別警報」「警報」「注意報」の3つのカテゴリに分類します
  • 表示の分岐処理：
    • 警報・注意報がない場合は「警報・注意報は発表されていません」というメッセージを表示
    • 特別警報、警報、注意報の各カテゴリごとに異なる視覚的表現で表示

(3) ユーザーインターフェース

• 特別警報：黒背景に白文字で表示（最も重要度が高い）
• 警報：赤背景に白文字で表示（重要度が高い）
• 注意報：黄色背景に黒文字で表示（注意が必要）
• 各警報・注意報は横並びのタグ形式で表示され、複数ある場合は折り返して表示

4. GitHub Actionsを使用したSSG（静的サイト生成）

このサイトはSvelteKitを使用したSSG（静的サイト生成）方式で構築されており、GitHub Actionsを使用して、もしCMSに保存された注意報・警報に変更があれば自動的にビルド&デプロイが行われます

SSGのメリットとデメリット

• メリット
  • 高速なページ読み込み（静的ファイルのみを配信）
  • 高いセキュリティ（サーバーサイドの脆弱性リスクが低減）
  • スケーラビリティ（CDNでの配信が容易）
• デメリット
  • ビルドに時間がかかる（このサイトの場合は3分ほど）
  • リアルタイム性の制約（実際の警報・注意報発表から、データ取得間隔5分+ビルド時間3分で約8分のタイムラグがあります）
  • 投稿記事のプレビューには別の仕組みが必要(今回は不要)

情報の信頼性

気象庁の公式データ(気象庁防災情報XMLフォーマット)を直接利用することで、情報の信頼性を確保しています

まとめ

このサイトの「注意報・警報」表示システムは、Azure Functionsを活用して気象庁の防災情報XMLから定期的にデータを取得し、microCMSに保存、そしてSSGによって静的サイトとして配信するという多層構造になっています。

Azure Functionsによる定期実行とGitHub Actionsによる随時ビルドの組み合わせにより、最新の気象情報をセキュアかつ効率的に提供しています。また、警報の種類に応じた視覚的な表現により、ユーザーは重要度を直感的に理解できます。