ステータスページ構築 ＆ 設計ガイド
B-Beacon のステータスページ機能を使えば、サービスの稼働状況や障害履歴、計画メンテナンスを美しいデザインでユーザーや関係者に公開できます。サービスとコンポーネントの構造設計からバッジの埋め込みまで、網羅的に解説します。
概要と公開URL
ステータスページは、チームごとに自動生成される高可用性な公開ページです。死活監視モニターの状態をリアルタイムに集約し、サービスの健全性を外部に可視化します。
1. 全体ステータスページ
チーム配下のすべてのサービスとコンポーネントを一覧表示するメインURLです。
https://getbbeacon.com/status/{チームスラッグ}
2. サービス別専用ステータスページ (Business / Scale プラン)
特定のサービス（例: モバイルアプリ専用、API専用）だけを切り出して公開できる専用URLです。
https://getbbeacon.com/status/{チームスラッグ}/{サービススラッグ}
B-Beacon の3階層アーキテクチャ（構造設計のベストプラクティス）
B-Beacon は、インフラの依存関係を正確にステータスページに反映するために、以下の 3ステップ階層構造 を採用しています。
| 階層 | 役割 | 設定例 |
|---|---|---|
| 1. サービス (Product) | ユーザーに提供している事業・プロダクトの単位。個別のステータスURLやバッジを持てます。 | メインWebサービス, iOS/Androidアプリ, 開発者向けAPI |
| 2. コンポーネント (Subsystem) | サービスを構成する具体的な機能・基盤要素。ステータスページ上で個別に稼働状態が表示されます。 | フロントエンドWeb, 認証API, 決済ゲートウェイ, データベース |
| 3. 監視モニター (Sensors) | コンポーネントの生死を巡回チェックする自動センサー。異常を検知するとコンポーネントのステータスを自動更新します。 | HTTP Ping (https://api.example.com/health), SSL証明書監視, MySQLポート監視 |
コンポーネントの設定項目
「コンポーネント」画面から追加・編集できます。
| 項目 | 説明 |
|---|---|
| 名前 | ステータスページに表示される名称（例: Webフロントエンド） |
| 説明 | 機能の簡単な補足説明（任意。例: ユーザー向け管理画面およびLP） |
| 所属サービス | このコンポーネントが属する親サービス |
| 公開状態 | 公開（ステータスページに掲示）または非公開（社内監視専用） |
| 表示順 | ステータスページ上での並び順（数値が小さいほど上位） |
ステータスバッジの埋め込み (SVG Badge)
B-Beacon は、GitHub README、自社サイトのフッター、Notion ドキュメントなどに埋め込めるリアルタイム SVG バッジを自動生成します。
1. GitHub README への埋め込み (Markdown)
[](https://getbbeacon.com/status/{チームスラッグ})2. 自社 Web サイトへの埋め込み (HTML)
<a href="https://getbbeacon.com/status/{チームスラッグ}" target="_blank" rel="noopener noreferrer">
<img src="https://getbbeacon.com/status/{チームスラッグ}/badge.svg" alt="System Status" />
</a>3. バッジのカスタマイズパラメータ
クエリパラメータを付与することで、バッジのデザインをカスタマイズできます。
?style=flat- 標準のフラットスタイル（デフォルト）?style=flat-square- 角丸のないシャープな角型スタイル?style=plastic- 光沢感のあるクラシックスタイル
ステータスと自動連動の仕組み
コンポーネントの状態は、紐づけられた監視モニターの最新結果によって自動計算されます。
| ステータス | バッジ色 | 判定条件 |
|---|---|---|
| OPERATIONAL (稼働中) | 緑色 | 配下の全監視モニターが正常稼働（UP） |
| DEGRADED (一部障害 / パフォーマンス低下) | 黄色 | 一部のモニターが警告閾値を超過、または一部モニターのみ異常 |
| OUTAGE (重大な障害) | 赤色 | 主要なモニターがダウン（DOWN） |
独自ステータスページの構築 ＆ 自社サイト組み込み (Headless API)
B-Beacon でホストされるステータスページを利用するだけでなく、自社のコーポレートサイト、Webアプリの設定画面、モバイルアプリ内にステータスを直接埋め込んだり、自前でデザインした完全独自のステータスページを構築することができます。
https://getbbeacon.com/api/v1/status/{teamSlug} を呼び出すことで、総合ステータス、サービス・コンポーネントごとの稼働率、発生中のインシデント一覧を JSON で取得できます（CORS対応・認証不要）。
詳しいエンドポイント仕様、60秒キャッシュおよびレートリミット（IPあたり毎分60回）の防御仕様、React / Next.js / JavaScript での実装サンプルコードについては、API リファレンス（Headless Status API）↗ をご確認ください。
インシデント ＆ 計画メンテナンス
障害時のリアルタイム報告や事前メンテナンスのアナウンス手順については、インシデント対応 ＆ 計画メンテナンスガイド をご覧ください。