本日の居場所が表示される仕組み

2025年06月27日

このよんなーハウスのサイトでは、「本日の居場所」情報が以下のような仕組みで表示されています。

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

1. システム概要

「本日の居場所」機能は、訪問者に対して本日開催される居場所や開催時間を提供するシステムです。

この機能により、ユーザーは開催される居場所や時間を事前に確認してから訪問することができます。

2. データソースとファイル構造

カレンダーファイルの仕組み

サイトは月別のカレンダーファイルを使用しており、これらは以下の命名規則で保存されています。

例えば、2025年3月のカレンダーファイルは cal-2025-3.txt となります。

カレンダーファイルのフォーマット

カレンダーファイルは、各行が1日分の情報を表す単純なテキスト形式で構成されています。

日付(曜日),居場所名,開始時間,終了時間,追加情報(オプション)

実際の例

1日(土),コミュニティハウス,13,17
3日(月),ITサークルMakaniAizu,13,15,もくもく会
6日(木),本日はお休みです

1行目：1日(土)に、コミュニティハウスで13時から17時まで活動
2行目：3日(月)に、ITサークルMakaniAizuで13時から15時まで「もくもく会」を開催
3行目：6日(木)は休業日

休業日の場合は、時間情報を省略し「本日はお休みです」という文字列のみを指定します。

3. 情報処理フロー

サーバーサイドの処理

日付の取得：
- サーバーは現在の日本時間（UTC+9）を取得します年、月、日の情報を抽出します
カレンダーファイルの読み込み：
- 現在の年月に対応するカレンダーファイル（例：calendar-2025-3.txt）をサーバーが読み込みます
- ファイルが存在しない場合は適切なエラーハンドリングを行います
当日の情報抽出：
- 正規表現を使用して、現在の日付に対応する行を特定します
- その行から場所名、開始時間、終了時間、追加情報（ある場合）を抽出します
- 「本日はお休みです」という文字列が含まれている場合は休業日と判断します
データの構造化： --抽出した情報を整形し、フロントエンドで表示しやすい形式のオブジェクトに変換します

{
  date: "3月1日",
  title: "コミュニティハウス",
  start: "13",
  end: "17",
  subtitle: undefined  // 追加情報がある場合はここに入ります
}

クライアントサイドの表示処理

データの受け取り：
- サーバーから処理済みの居場所情報を受け取ります
表示の分岐処理：
- 休業日かどうかを判断し、表示スタイルを変更します（休業日は赤色、営業日は青色で表示）
- 時間情報や追加情報の有無に応じて、表示する内容を調整します
ユーザーインターフェース：
- 日付と「居場所」というタイトル
- 開催居場所の名称（例：「コミュニティハウス」）
- 開始・終了時間（例：「13時〜17時」）
- 追加情報（例：「もくもく会」）がある場合は表示

4. 管理者向け：カレンダーファイルの準備方法

カレンダーファイルを準備する際の手順：
- ファイル名の設定：
  - calendar-YYYY-MM.txt の形式で、対象年月のファイルを作成します
  - 例：2025年4月のカレンダーは calendar-2025-4.txt
- 内容の記述：
  - 各行は「日付(曜日),居場所名,開始時間,終了時間,追加情報」の形式で記述
  - 休業日は「日付(曜日),本日はお休みです」と記述
  - 時間は24時間形式で、小数点なしの整数で記述（例：13時は「13」）
- ファイルの配置：
  - 作成したファイルをサーバーに配置します(git pushする)
  - 月が変わる前に次月のファイルを用意することで、月初のエラーを防止できます

6. カレンダーファイルの自動生成

開催居場所や時間が規則的なパターンで決まっている場合（例：毎月第2水曜日は13時から17時まで「コミュニティハウス」で開催など）、JavaScript と Node.js を使用して自動的にカレンダーファイルを生成することが可能です。

自動生成のメリット

効率化：毎月手動でファイルを作成する手間が省けます
一貫性：パターン化されたスケジュールを正確に反映できます
柔軟性：特定の日付だけ例外的なスケジュールを設定することも可能です
先行準備：数ヶ月分のカレンダーを一度に生成できます

まとめ

このシステムは、シンプルながらも効果的に「本日の居場所」情報を提供しています。テキストファイルベースの管理方法により、技術的な知識がなくても簡単に情報を更新できる点が特徴です。また、サーバーサイドでの処理により、セキュリティを確保しながら必要な情報のみをユーザーに提供しています。さらに、JavaScript と Node.js を活用することで、定期的なスケジュールパターンに基づいたカレンダーファイルの自動生成も可能となり、管理の手間を大幅に削減できます。

ブログ