Homepage ダッシュボード構築ガイド｜セルフホストサービスを一元管理

Homepage とは？モダンなセルフホスティングダッシュボードの真価

近年、自宅サーバーやレトロコンソール、NAS などの自作ハードウェアを所有するユーザーが増加しており、これらの機器を管理する「セルフホスティング」が趣味の一つとして定着しています。しかし、個々のサービスにアクセスするための URL をブラウザにお気に入り登録し、それぞれの管理画面でログイン情報を手動入力するのは、時間とセキュリティの観点から非常に非効率です。そこで注目されているのが、「Homepage」というダッシュボードアプリケーションです。

Homepage（公式ドメイン：gethomepage.dev）は、2019 年の公開以来、そのシンプルさと拡張性の高さから世界中の技術者に支持されているオープンソースのホームベースページです。従来の HTML を手書きで記述して作るものとは異なり、設定ファイル（YAML 形式）を記述するだけで動的に画面が生成されるため、初心者でも学習コストを抑えつつ、上級者向けのカスタマイズ性を確保しています。2026 年現在では、React ベースのモダンな UI を採用し、API 連携によるリアルタイムデータの表示が可能で、サーバーのリソース使用状況やダウンロード速度などをウィジェットとして即座に確認できます。

このダッシュボードが優れている最大の理由は、「100 サービス以上」に対応する公式およびコミュニティ製のテンプレートにあります。Proxmox VE の仮想マシン管理画面へのリンクや、Docker コンテナの状態監視、音楽ストリーミングサービスのプレイリスト表示など、単なるブックマーク集ではなく、ライフサイクルを管理するためのポータルとして機能します。また、設定ファイルがバージョン制御（Git）に組み込みやすいため、設定の共有や復元が容易で、チームでの運用や災害時の復旧にも強みを持っています。

事前準備と環境構築：Docker のインストールと設定

Homepage を安定して動作させるためには、基盤となる Docker コンテナ実行環境の構築が不可欠です。2026 年時点では、Ubuntu Server 24.04 LTS または Debian 12 以降の Linux ディストリビューションをサーバー OS として推奨しています。Windows や macOS の WSL2 でも動作しますが、永続的なサーバー運用においては Linux Kernel にネイティブで動作させることを強くお勧めします。まずは SSH を通じてサーバーにログインし、システムパッケージの更新コマンドを実行してセキュリティパッチを適用してください。

sudo apt update && sudo apt upgrade -y この一連のコマンドは、既知の脆弱性を除去し、インストールする Docker の依存関係を最新化するために必須です。続いて Docker Engine の公式リポジトリを追加し、バージョン管理された安定版をインストールします。2026 年時点では Docker Compose がバイナリに統合されているため、別途 plugin を入れる必要はなくなっています。ただし、古いマニュアルに従って docker-compose プラグインを導入している環境もまだ存在するため、ドキュメントの整合性には注意が必要です。

Docker のインストール後、現在のユーザーが docker コマンドを実行できるようにグループ権限を設定する必要があります。これにより、ルートユーザー（root）として Docker を実行するリスクを避け、セキュリティを向上させます。

sudo usermod -aG docker $USER
newgrp docker

この手順で再起動不要に権限が反映されますが、万が一エラーが出る場合は systemctl restart docker でサービス再起行が必要です。また、SELinux（RedHat/CentOS 系）や AppArmor（Debian/Ubuntu 系）の設定を無効化するとセキュリティリスクが高まるため、コンテナのネットワークモードや権限設定で適切に制御することが重要です。

Homepage 本体のインストール：Docker Compose を活用したデプロイ

Homepage の本体インストールには、公式が推奨する Docker Compose アプローチが最適です。まずは配置ディレクトリを作成し、そこへ docker-compose.yml ファイルと config ディレクトリを格納します。2026 年時点のバージョンでは、設定ファイルのパス指定が柔軟になっているため、デフォルトのボリュームマウント設定でも問題なく動作しますが、カスタマイズ用の設定ファイルを外部から読み込めるようにする構成が推奨されます。

version: "3.8"
services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    network_mode: host # 必要に応じて bridge モードに変更可
    restart: unless-stopped
    volumes:
      - ./config:/app/config
      - /var/run/docker.sock:/var/run/docker.sock

上記の docker-compose.yml は、Homepage をホストネットワークで起動し、設定ファイルをローカルディレクトリとマッピングする標準的な構成です。/var/run/docker.sock のマウントは、Homepage から Docker コマンドを実行してコンテナの状態を取得するために必須ですが、これによりセキュリティリスクが発生します。本番環境では、HTTPS 化されたリバースプロキシ（例：Nginx Proxy Manager や Traefik）を介してアクセスし、外部から直接ポート 3000 を開かないように設定するのが鉄則です。

インストールが完了したら、ブラウザでサーバーの IP アドレスまたはドメイン名にアクセスします。初回起動時はコンテナ内で初期化プロセスが走りますが、通常は数秒で Web UI が表示されます。ここで重要なのは、ログの確認です。docker logs -f homepage とすることで、エラーが発生している場合の原因を特定できます。例えば、ポート競合や権限不足によりコンテナが再起動する「ループ」状態を防ぐためにも、最初の起動時は詳細なログ出力を確認してください。

コア設定ファイルの解剖：services.yaml の書き方と構造

Homepage の全ての機能は config/services.yaml ファイルによって定義されます。この YAML 形式の設定ファイルは、キーと値の関係で構成されており、インデント（空白）の数が構文エラーの原因となるため厳密に記述する必要があります。初心者にとって最もわかりやすいのは、「グループ」ごとにサービスを分類し、それぞれのカードとして配置することです。各サービスには、タイトル、アイコン、URL、ステータスチェックの有無などを設定できます。

- title: 自宅サーバー管理
  icon: server
  description: ホームページへのリンクとサーバー監視ツール
  items:
    - title: Docker 管理
      logo: https://avatars.githubusercontent.com/u/47326098?s=200&v=4
      url: http://192.168.1.10:9000
      description: Portainer を使用してコンテナを管理します
      status: true # 設定がある場合、API でステータス取得を試みます

    - title: プロキシ設定
      icon: link
      url: https://proxym.home.local/admin
      description: HTTPS 化と SSL 証明書管理用

この例では、「自宅サーバー管理」というグループを作成し、その中に「Docker 管理」と「プロキシ設定」の 2 つのサービスを追加しています。status: true を指定すると、Homepage は定義された URL に対して HTTP HEAD リクエストを送信し、応答コードが正常（通常は 200）であれば緑色で表示されます。これは、サーバーがダウンしている場合に即座に気づける重要な機能です。

また、各項目には独自のカスタムパラメータを設定できるため、特定のサービス固有の情報を取得することも可能です。例えば、qBittorrent の場合、rpcUrl などのパラメータを指定することで、ダウンロード中のファイル数やトラフィック速度などをダッシュボード上に表示できます。YAML はコメント行に # を入れることで注釈を追加できるため、複雑な設定を行う際はメモを残す習慣をつけましょう。

機能拡張ウィジェットの設定：stats、weather、system などを活用する

Homepage の真価は、単なるリンク集を超えた「ステータス表示」にあります。これを実現するのがウィジェット機能です。2026 年現在では widgets ディレクトリ内で定義された設定ファイルを読み込むことが可能で、CPU 使用率、メモリ使用量、ディスク容量などのシステム情報をリアルタイムにグラフ化して表示できます。これはサーバーの負荷を可視化するだけでなく、スケーリングの判断やトラブルシューティングの手がかりとなります。

# config/widgets/stats.yaml
- system:
    - cpu: true
    - memory: true
    - disk: true
- network:
    - download: true
    - upload: true

この設定により、ダッシュボードのヘッダー部分に CPU 使用率やメモリ残量が表示されます。また、network セクションを設定することで、サーバーの上下行ネットワークトラフィックを可視化できます。これは、ダウンロードサービス（例：qBittorrent）が動作している際に、ネットワーク帯域を圧迫していないかを確認する際に非常に役立ちます。ただし、これらのデータ取得にはコンテナ内の docker.sock アクセス権限が必要であるため、セキュリティ設定と併せて確認してください。

気象情報ウィジェットも人気の機能の一つです。Open-Meteo などの無料 API を利用して、現在地や指定した都市の天気予報を表示できます。

# config/widgets/weather.yaml
- weather:
    - location: "Tokyo,JP"
      units: metric # celsius or fahrenheit
      apiKey: "" # Open-Meteo はキー不要の場合が多い

API キーを必要としないフリープランの API を利用することで、登録手続きの手間を省きつつ、美しいアイコン付きの天気表示を実現できます。また、システムログやイベント履歴を表示するウィジェットも存在し、特定のサービスが起動した時や停止した時の通知を受け取ることができます。

リンク集の管理：bookmarks.yaml による整理整頓

セルフホスティング環境を運用していると、管理すべき URL は数十件にも及びます。これを単一ファイルにまとめるのではなく、config/bookmarks.yaml で階層構造を持たせることで、見栄えを整えつつ検索効率を高めます。Homepage のブックマーク機能は、単なるリストではなく、カテゴリごとにアイコン付きで表示されるため、視認性が非常に高いです。

- title: メディアサーバー
  icon: tv
  items:
    - title: Plex Media Server
      logo: https://assets.plex.tv/assets/icons/plex-logo.png
      url: http://192.168.1.10:32400/web
      description: メディアライブラリ

    - title: Jellyfin
      logo: https://jellyfin.org/static/img/logo.svg
      url: http://192.168.1.10:8096
      description: オープンソースのメディアサーバー

このように、カテゴリごとに title と icon を定義し、その下にリンクを配置します。アイコンには FontAwesome や RemixIcon の名前、あるいは外部 URL 上の SVG/PNG を指定できます。2026 年時点では、SVG アイコンを直接埋め込むパフォーマンスが向上しているため、高解像度での表示も問題ありません。また、各ブックマーク項目に status: true を付与することで、リンク先のサーバーが応答するかどうかを即座に確認できます。

さらに、検索機能との連携も可能です。Homepage の設定ファイル内や外部ツールと組み合わせることで、ブラウザのアドレスバーから直接ダッシュボードを検索させることもできます。ただし、Homepage 自体はシンプルな検索エンジン機能しか持たないため、大量のブックマークを管理する場合は、カテゴリ分けを細かく行うか、外部の検索サイト（例：Google Custom Search Engine）との連携を検討する必要があります。

システム全体の見た目変更：settings.yaml とカスタム CSS

設定ファイルの config/settings.yaml を編集することで、ダッシュボードのテーマや基本動作を変更できます。2026 年時点では、ダークモードとライトモードの自動切り替え機能が標準実装されており、OS の設定に合わせて自動的に表示が切り替わるようになります。また、フォントサイズやアイコンの配置など、細かなレイアウト調整も可能です。

# config/settings.yaml
theme: dark
title: My Home Dashboard
favicon: /assets/favicon.ico
language: ja-JP
header_height: 100px

theme に dark または light を指定することで、全体のカラーパレットを固定できます。ただし、自動切り替えの方がユーザーの眼睛への負担が少ないため、基本設定では暗黙的な自動切り替えを推奨します。favicon を指定することで、ブラウザタブに表示されるアイコンを変更でき、ブラウザのお気に入り登録時の視認性を向上させます。

より高度なカスタマイズには、カスタム CSS の注入が可能です。settings.yaml 内に customCssUrl を設定し、外部ホスティングされた CSS ファイルやローカルファイルへのパスを指定します。

customCss: |
  .service-card {
    border-radius: 12px;
    background-color: #1a1a1a;
  }

このように CSS を記述して、各カードの角丸や背景色を変更できます。ただし、アップデート時に設定がリセットされるリスクがあるため、外部ファイルとして別管理するか、バックアップを定期的に行うことが必須です。また、モバイル端末での表示崩れを防ぐために、レスポンシブデザインを意識した CSS 記述が求められる場合があります。

API キー取得と連携：外部サービスとの安全な通信

Homepage が持つ強力なステータス監視機能には、多くの場合、各サービスの API キーが必要です。例えば、Plex や Sonarr、Radarr はそれぞれ独自の API トークンを持っており、これを利用することで「ダウンロード中」「完了済み」などのステータスを Homepage で取得できます。しかし、API キーの扱いには十分な注意が必要で、適切に管理しないとサーバー全体のセキュリティが脅かされます。

まず、各アプリケーションの設定画面から API キーを生成・取得します。Plex の場合、「設定」>「ネットワーク」>「API 認証キー」の項目からコピーできます。Sonarr や Radarr では、同じく設定内の「一般」タブにある API Key が該当します。取得したキーは、services.yaml または widgets.yaml の api セクションに記述します。

- title: Media Management
  status: true
  api:
    url: http://192.168.1.10:8989/status
    method: GET
    headers:
      X-Api-Key: "YOUR_API_KEY_HERE"

このように headers に API キーを埋め込むことで、非同期通信でステータス取得を行います。ただし、キーが公開された URL に含まれると危険なため、可能な限りリバースプロキシ（Nginx Proxy Manager 等）の認証機能を利用し、Homepage の外部から直接アクセスさせない構成が推奨されます。

また、2026 年時点ではセキュリティベストプラクティスとして、API キーはハードコードするのではなく、環境変数やシークレット管理ツール（例：Vault、Docker Secrets）から読み込むことが望ましいとされています。しかし、Homepage の設定ファイル形式上、直接記述するケースが多いのが実情です。そのため、サーバーの OS 権限を厳格に制御し、他のユーザーが設定ファイルを閲覧できないように chmod 600 で権限を設定することが重要です。

人気サービスの具体的な設定例：Proxmox から qBittorrent まで

ここでは、特に複雑な設定が必要なサービスについて具体的な YAML コピー＆ペースト可能な構成例を提示します。Proxmox VE の仮想マシン管理画面への統合や、ダウンロードクライアントのステータス表示は、セルフホスト環境において頻出するニーズです。それぞれに固有のパラメータがあり、正しく設定することでダッシュボードが真価を発揮します。

Proxmox VE の場合：

- title: Proxmox 仮想マシン管理
  url: https://192.168.1.50/api2/json/lxc/status?storage=local
  icon: server
  description: LXC コンテナのステータス確認用
  status: true
  api:
    method: GET
    headers:
      Authorization: "PVEAPIToken=root@pam!homepage-token"

Proxmox は REST API が標準装備されており、これを Homepage から叩いて VM の稼働状態を取得できます。ただし、認証トークンの形式が独特であるため、API ドキュメントを必ず確認してください。また、HTTPS 接続のため SSL 証明書エラーが出ないよう、CA ファイルのパス指定が必要な場合もあります。

qBittorrent の場合：

- title: qBittorrent ダウンロード
  url: http://192.168.1.50:8080
  status: true
  api:
    method: GET
    path: /rest/transfer/info
    parameters:
      sort_column: ratio

qBittorrent は RPC API を提供しており、これを利用することで「ダウンロード速度」や「残りの容量」を可視化できます。ただし、API 認証を有効にしている場合、パスワードの暗号化された形式を指定する必要があります。

Radarr / Sonarr の場合：

- title: Radarr (映画)
  url: http://192.168.1.50:7878
  status: true
  api:
    method: GET
    path: "/api/v3/movie"
    headers:
      X-Api-Key: "YOUR_RADARR_KEY"

これらのサービスは、API を使用して「追加された映画」や「ダウンロード済み数」を返すため、Homepage のステータス表示と連携することで、メディアコレクションの健全性を管理できます。

他ダッシュボードとの比較：Organizr、Dashy、Heimdall を検討する

Homepage の他にも、セルフホスティングダッシュボードには多数の選択肢が存在します。各ツールには得意分野があり、ユーザーのスキルレベルや求める機能によって最適な選択が異なります。ここでは、主要な代替案である Organizr、Dashy、Heimdall と Homepage を比較し、それぞれのメリット・デメリットを分析します。

比較表 1：基本機能と技術スタック

比較表 2：サービス連携と API 対応能力

比較表 3：学習コストと拡張性

比較表 4：パフォーマンスとリソース消費

これらの比較から、Homepage は設定の柔軟性とパフォーマンスにおいて非常にバランスが良く、技術的な知識があるユーザーには最適です。一方、Web UI で直感的に操作したい場合は Heimdall や Dashy が向いています。特に Docker コマンドを実行して管理する必要がある場合、Homepage の docker.sock 連携機能は他のツールよりも強力です。

よくある質問（FAQ）

FAQ1: Homepage のインストール時に「Permission denied」エラーが出ます。どうすればよいですか？

結論： Docker グループへのユーザー追加と、ボリュームマウント権限の確認が必要です。 インストール時やコンテナ起動時に Permission denied エラーが発生する場合、現在の Linux ユーザーが Docker グループに正しく所属していない可能性があります。usermod -aG docker $USER コマンドを実行し、ユーザーを Docker グループへ追加してください。その後、セッションを更新するために再起動するか、newgrp docker を実行します。また、設定ファイルの保存ディレクトリ（例：/opt/homepage/config）に対して、Docker コンテナが読み取り・書き込み権限を持てるように chown -R $USER:$USER config とコマンドを実行して権限を付与してください。これにより、設定ファイルの読み込みやコンテナ状態の取得が可能になります。

FAQ2: API キーを公開しても安全ですか？

結論： 外部からの直接アクセスは禁止し、リバースプロキシ経由でのみ利用すべきです。 Homepage で API キーを設定する際、キー自体が設定ファイル内に平文で記述されるため、セキュリティリスクがあります。したがって、必ず Nginx Proxy Manager や Traefik などのリバースプロキシを介してアクセスし、外部から直接ポートを開かないようにしてください。また、設定ファイルの権限を 600 に制限し、他のユーザーが閲覧できないようにすることも必須です。2026 年時点では、環境変数やシークレット管理ツールを利用してキーを管理するのがベストプラクティスですが、Homepage の仕様上、直接記述するケースが多い場合は特に厳重なファイル権限設定が必要です。

FAQ3: Docker Compose が古いバージョンで動作しません。どうすればよいですか？

結論： 最新バージョンの Docker Engine および Compose プラグインをインストールしてください。 2026 年時点で Docker Compose v1 はサポートが終了しているため、v2 のバイナリ統合版を使用する必要があります。docker compose version で確認し、古いバージョンが表示される場合は公式ドキュメントに従って最新へ更新します。特に Ubuntu Server では apt リポジトリの更新忘れによるバージョン固定が多いため、sudo apt update && sudo apt upgrade docker.io docker-compose-plugin を実行してください。また、Docker Compose の構文が v2 以降で一部変更されている箇所があるため、古いマニュアルにある YAML 設定を見直す必要があります。

FAQ4: カスタム CSS で画面が崩れてしまいます。どう直しませんか？

結論： 外部ファイルとして CSS を管理し、ブラウザのコンソールでエラーを確認してください。 Homepage のカスタム CSS は、settings.yaml に直接記述するか、外部 URL から読み込むことができますが、ブラウザのキャッシュや競合により表示崩れが発生することがあります。まず、F12 キーを押してデベロッパーツールを開き、CSS ファイルのエラーログを確認してください。また、Homepage のアップデート時に設定がリセットされないよう、カスタム CSS ファイルはローカルに保存し、customCssUrl を指定せずに直接記述するのではなく、別ファイルとして管理することを検討してください。レスポンシブデザイン対応には @media クエリの使用も有効です。

FAQ5: ステータス監視が常に失敗します（赤色表示）。どうすればよいか？

結論： API キーの期限確認と URL 設定、SSL 証明書の検証を確認してください。 ステータスが常に表示されない場合、指定した API URL が正しくないか、認証情報が期限切れである可能性があります。まず、URL の末尾にスラッシュ（/）があるかないかで挙動が変わるサービスがあるため、正確なドキュメントを参照して URL を修正します。また、API キーは一定期間で有効期限が切れる場合があり、設定ファイル内のキーを更新する必要があります。さらに、HTTPS 接続時に SSL 証明書エラーが出る場合は、証明書の信頼チェーンを確認するか、コンテナ内で curl -k のような無視オプションを指定できる設定があるか確認してください。

FAQ6: 他のダッシュボード（Dashy など）に移行したいです。データは引き継げますか？

結論： 設定ファイル形式が異なるため、手動での再設定が必要です。 Homepage と Dashy、Heimdall などのダッシュボードアプリでは、設定ファイルのフォーマット（YAML vs JSON vs PHP）が全く異なります。したがって、設定データを自動で移行するツールは存在しません。各サービスの URL やアイコン、グループ分けなどを再度定義し直す必要があります。ただし、ブックマークやリンク情報は CSV エクスポート機能がある場合も多いため、一度エクスポートしてテキストとして保存しておき、新しいアプリのテンプレートにコピー＆ペーストすることで、作業時間を短縮できます。

FAQ7: プロキシなしで直接アクセスできますか？

結論： 設定は可能ですが、SSL/TLS 化と認証機能がないため非推奨です。 Homepage の Docker コンテナをホストネットワークモードで起動し、ポート 3000 を公開すればプロキシなしでもアクセス可能です。しかし、これには大きなリスクがあります。まず、通信が暗号化されないため、ブラウザ入力時のパスワードや API キーが盗聴される恐れがあります。また、認証機能がないため、誰でもダッシュボードにアクセスできてしまいます。したがって、必ず Nginx Proxy Manager や Traefik などのリバースプロキシを介し、SSL 化と基本認証を行うことを強くお勧めします。

FAQ8: Docker.sock へのアクセス権限は安全ですか？

結論： 高い特権を付与するため、コンテナの分離設定に注意が必要です。 Homepage が Docker のステータスやリソース情報を取得するためには、/var/run/docker.sock へのマウントが必要ですが、これは事実上「Docker デーモンへのフルアクセス権」を意味します。もしHomepage がハッキングされた場合、サーバー上の他のコンテナも削除・制御されるリスクがあります。このため、Homepage コンテナには必要最小限の権限（例：--cap-drop ALL --cap-add NET_BIND_SERVICE）のみを与え、ネットワーク隔离やユーザー名空間の設定を行うことでセキュリティを強化してください。

FAQ9: 複数台のサーバーを一元管理したいです。可能ですか？

結論： 1 つの Homepage インスタンスで複数サーバーを監視する構成が推奨されます。 異なる物理サーバー上の Docker コンテナの状態を 1 つのダッシュボードで表示するには、各サーバーに API ゲートウェイや SSH トンネルを設定し、Homepage の docker.sock に接続します。ただし、セキュリティリスクが高まるため、VPN を経由してアクセスする構成が最適です。あるいは、複数の Homepage インスタンスを構築し、それぞれが特定のサブセットの情報を表示させ、親ダッシュボードからリンクで遷移させる方法もあります。

FAQ10: ホームページに日本語フォントが適用されません。

結論： customCss でフォントファミリーを指定し、外部 Web フォントを利用します。 Homepage のデフォルト設定では英語用フォント（Roboto など）が優先されるため、日本語文字化けや表示崩れが発生することがあります。これを解決するには、settings.yaml 内の customCss に Google Fonts やローカルフォントへのパスを指定し、Web フォントとして読み込む設定を行います。また、サーバーの OS に日本語フォント（例：Noto Sans JP）がインストールされていることを確認し、CSS で font-family: "Noto Sans JP", sans-serif; と記述することで、ローカルフォントの優先度を上げることができます。

まとめ

本記事では、「Homepage ダッシュボード構築ガイド｜セルフホスティングサービスを一元管理」というテーマのもと、 Homepage の基本から高度な設定までを網羅的に解説しました。

記事の要点まとめ：

• Homepage の特徴： YAML 設定、モダン UI、100+ サービス対応、高パフォーマンスが魅力。
• インストール方法： Docker Compose を使用し、/var/run/docker.sock のマウントに注意が必要。
• 設定ファイル構成： services.yaml でサービス定義、bookmarks.yaml でリンク管理、settings.yaml で UI 調整。
• ウィジェット活用： CPU/RAM 監視、天気予報、ネットワークトラフィックを可視化可能。
• セキュリティ対策： API キーの適切な扱い、リバースプロキシの導入、ファイル権限設定が必須。
• 代替案比較： Dashy や Heimdall などとも比較し、用途に応じて最適なツールを選択可能。

Homepage を活用することで、サーバー管理画面を美しく整理し、効率的な運用を実現できます。また、Git によるバージョン管理と共有機能は、チームでの運用や災害復旧においても強力な味方となります。2026 年現在でも進化を続ける Homepage の可能性を活かし、ぜひセルフホスティング環境の最適化にご活用ください。