📖 ユーザーマニュアル - 初めての方へ
💡 このシステムについて
在席確認表は、チームメンバーの在席状況をリアルタイムで共有するシステムです。
入力した内容は自動的に保存され、他の人のPCやスマートフォンにも即座に反映されます。
🔐 1. 初回ログイン（管理者からパスワードを受け取ってください）
- 拠点を選択：ドロップダウンから所属する拠点（営業所）を選びます
- パスワードを入力：管理者から教えてもらったパスワードを入力します
- 「ログイン」ボタンをクリック
- ✅ ログイン成功すると、在席確認表が表示されます
※ログイン状態は1時間保持され、自動的に延長されます。ブラウザを閉じた場合は再ログインが必要です。
👁️ 2. 画面の見方
- 画面上部（ヘッダー）：
- 📍 タイトル：拠点名が表示されます（クリックするとグループ一覧メニューが開きます）
- 🔍 氏名検索：特定の人を探すときに使います
- 🎯 ステータス絞り込み：「外出中の人だけ」など、条件で絞り込めます
- 📢 お知らせ：お知らせがある場合に表示。クリックで折りたたみ/展開を切り替えます
- ⚙️ 管理：管理者のみ表示されます
- 🚪 ログオフ：ログアウトします
- 📖 マニュアル：このマニュアルを表示します
- メイン画面：
- チーム（グループ）ごとに表が表示されます
- 各行がメンバー1人の情報です
- スマートフォンでは自動的にカード表示に切り替わります
✍️ 3. 基本操作 - 自分の状態を更新する
📝 業務時間の入力
- 自分の行の「業務時間」欄をクリック
- 直接入力するか、表示される候補リストから選択（例：
09:00-17:30）
- ✅ 入力が完了すると、約1秒後に自動保存されます（保存ボタンは不要です）
🎨 ステータスの選択（色分けされます）
| ステータス |
色 |
戻り時間 |
使用例 |
| 在席 |
無色（白） |
不要 |
デスクにいるとき |
| 外出 |
🟠 オレンジ |
必須 |
銀行、郵便局など |
| 在宅勤務 |
🟣 紫 |
不要 |
テレワーク中 |
| 出張 |
🔵 水色 |
必須 |
他拠点や客先へ |
| 研修 |
🟢 緑 |
必須 |
研修・セミナー参加 |
| 健康診断 |
🩷 ピンク |
必須 |
健康診断受診中 |
| ドック |
💜 薄紫 |
必須 |
ドック受診中 |
| 帰宅 |
⚪ 灰色 |
不要 |
退社済み |
| 休み |
🔴 赤 |
不要 |
休暇・欠勤 |
⏰ 戻り時間の入力（外出、出張、研修などの場合）
- ステータスで「外出」「出張」「研修」「健康診断」「ドック」を選ぶと、戻り時間が必須になります
- 「戻り時間」のドロップダウンをクリックして選択（07:00〜22:00、30分刻み）
- ⚠️ 未入力の場合は赤枠で表示されます（必ず入力してください）
💡 ヒント：「在席」「在宅勤務」「帰宅」「休み」を選ぶと、戻り時間と備考が自動的にクリアされます
📌 備考の入力（任意）
- 「備考」欄をクリックして、自由に入力できます
- 候補から選ぶこともできます：直出、直帰、直出・直帰
- 空白にしたい場合は「（空白）」を選択してください
📅 4. イベントの表示
イベント機能とは
- GW、年末年始、夏季休暇など、複数日にわたる休暇を簡単に管理できます
- 管理者が休暇期間とメンバーを事前に設定しておくことで、休暇中のメンバーがわかりやすくなります
- イベントが登録されている場合のみ、ヘッダーに「イベント」ボタンが表示されます
イベントの表示方法
- ヘッダーの「イベント」ボタンをクリック
- 登録されているイベントの一覧が表示されます（例：「GW期間休暇」「年末年始休暇」）
- 表示したいイベントをクリックして選択
- ガントチャート（カレンダー形式の表）が表示され、どのメンバーがいつ休暇なのかを確認できます
- 「表示」ボタンをクリック → メイン画面で該当メンバーの行がハイライト表示されます
表示される内容
- 休暇中のメンバーの行が色付きでハイライトされます
- ステータス欄にイベントのタイトル（例：「GW期間休暇」）が表示されます
- 画面上部に「イベント表示中」のバナーが表示されます
表示を解除する
- イベントモーダルで「表示クリア」ボタンをクリックすると、ハイライトが解除されます
- 別のイベントを選択すると、表示が切り替わります
💡 ヒント
- イベントの登録・編集・削除は管理者のみが行えます
- イベントを設定したい場合は、管理者に問い合わせてください
- イベントボタンが表示されない場合は、現在登録されているイベントがありません
🔍 5. 他の人の状況を確認する
氏名検索の使い方
- 画面上部の検索ボックスに名前を入力（例：「田中」）
- 入力すると同時に、該当する人だけが表示されます
- 検索を解除するには、入力内容を削除してください
ステータスで絞り込み
- 画面上部の「ステータス絞り込み」ドロップダウンをクリック
- 見たいステータスを選択（例：「外出中の人だけ見る」→「外出」を選択）
- 全員表示に戻すには「全て」を選択してください
グループジャンプ（画面が長い場合）
- 画面上部の拠点名（タイトル）をクリック
- グループ一覧メニューが表示されます
- 行きたいグループをクリックすると、その位置にスクロールします
📢 5. お知らせ機能の使い方
お知らせエリアとは
- 管理者が登録した重要なお知らせが、ヘッダーとメイン画面の間に表示されます
- システムメンテナンス、業務連絡、注意事項などが掲載されます
- お知らせがない場合は、お知らせエリアとボタンは表示されません
折りたたみ/展開の切り替え
- 初期状態（ログイン直後）：お知らせは展開された状態で表示されます
- 折りたたみ：ヘッダーの「お知らせ」ボタンをクリック → 最初のお知らせのタイトルと件数のみ表示されます
例：「システムメンテナンスのお知らせ (他2件)」
- 展開：もう一度「お知らせ」ボタンをクリック → すべてのお知らせが表示されます
お知らせの更新頻度
- 管理者が追加・編集・削除したお知らせは、約30秒ごとに自動的に反映されます
- すぐに確認したい場合は、ページを再読み込み（F5キー）してください
🔄 6. 自動更新について（重要）
⚡ リアルタイム同期
- ✅ あなたが入力した内容は、約1秒後に自動的に保存されます
- ✅ 他の人が入力した在席状況は、約10秒ごとに自動的にあなたの画面に反映されます
- ✅ お知らせや設定の変更は、約30秒ごとに自動的に反映されます
- ✅ 保存ボタンや更新ボタンは不要です
- ⚠️ 入力中や変換中は、他の人の更新が一時的に保留されます（入力の邪魔になりません）
❓ よくある質問
Q. 保存ボタンはどこですか？
A. 保存ボタンはありません。入力すると自動的に約1秒後に保存されます。
Q. お知らせボタンが表示されません
A. お知らせがない場合、お知らせボタンとお知らせエリアは表示されません。管理者がお知らせを登録すると自動的に表示されます（約30秒以内に反映）。
Q. お知らせが邪魔で画面が見づらい
A. ヘッダーの「お知らせ」ボタンをクリックすると、お知らせエリアを折りたたむことができます。折りたたむと1行のサマリー表示になります。
Q. 戻り時間が選択できません
A. ステータスが「在席」「在宅勤務」「帰宅」「休み」の場合、戻り時間は不要なため選択できません。「外出」「出張」などに変更してください。
Q. スマートフォンでも使えますか？
A. はい、スマートフォンのブラウザでも利用できます。画面が自動的にカード表示に切り替わります。
Q. 間違えて入力してしまいました
A. すぐに正しい内容に入力し直してください。約2秒後に自動保存されます。
📚 さらに詳しく知りたい方へ
より詳細な情報は 詳細マニュアル（USER_MANUAL.md） をご覧ください。
⚙️ 管理者マニュアル
🔐 管理者ログインについて
管理パネルを表示するには、管理者パスワードでログインしてください。
一般ユーザーパスワードではログインできても「管理」ボタンは表示されません。
📂 1. CSVエクスポート - データのバックアップ
用途：現在の名簿と在席データをExcelで編集できる形式でダウンロードします
- 画面上部の「管理」ボタンをクリック
- 管理パネルが開きます
- 「CSVエクスポート」セクションの「ダウンロード」ボタンをクリック
- ✅ ファイル
presence_<拠点ID>.csv がダウンロードされます
⚠️ 重要：CSVインポート前に必ずエクスポートでバックアップを取ってください！
📥 2. CSVインポート - 名簿の一括登録・更新
用途：Excelで編集した名簿を一括で取り込みます（名簿全体が置き換わります）
対応しているCSV形式
-
最新形式（推奨）：
1行目: 在席管理CSV / 2行目: グループ番号,グループ名,表示順,id,氏名,内線,携帯番号,Email,業務時間,ステータス,戻り時間,備考
- 標準形式：
グループ番号,グループ名,表示順,id,氏名,内線,業務時間,ステータス,戻り時間,備考（携帯番号・Email列なし、タイトル行なし）
- 旧形式：
グループ番号,グループ名,表示順,id,氏名,内線,ステータス,戻り時間,備考（業務時間列なし。既存データから引き継ぎます）
操作手順
- 【重要】まずエクスポートでバックアップを取る
- ダウンロードしたCSVファイルをExcelで開いて編集
- 管理パネルの「CSVインポート」セクションで「ファイルを選択」をクリック
- 編集したCSVファイルを選択
- 「取り込み」ボタンをクリック
- ✅「インポート完了」と表示されたら成功です
⚠️ 注意事項
- インポートすると名簿全体が置き換わります（部分更新はできません）
- CSVに含まれないメンバーは削除されます
- 元に戻すにはバックアップのCSVを再インポートしてください
- 最新形式では1行目がタイトル行、2行目がヘッダー行です（標準・旧形式は1行目がヘッダー行）
🏢 3. 拠点名の変更
- 管理パネルの「拠点名の変更」セクションに新しい拠点名を入力
- 「変更」ボタンをクリック
- ✅ 画面タイトルとログイン画面の拠点名が変更されます
🔑 4. パスワード変更
2種類のパスワードを個別に変更できます：
- 新パスワード：一般ユーザーがログインするときのパスワード
- 新管理者PW：管理者権限でログインするときのパスワード
- 変更したいパスワード欄に新しいパスワードを入力（両方でも片方でもOK）
- 「更新」ボタンをクリック
- ✅「パスワードを更新しました」と表示されたら成功です
💡 パスワードは平文で保存されます。強固なパスワードを使用してください。
📢 5. お知らせ管理
用途：拠点のメンバー全員に重要な情報を掲示します
✨ 自動読み込み機能
管理パネルを開くと、現在のお知らせが自動的に表示されます。
「現在のお知らせを読み込み」ボタンを押す必要はありません。
お知らせの追加
- 管理パネルを開く（現在のお知らせが自動表示されます）
- 「➕ お知らせを追加」ボタンをクリック → 入力欄が追加されます
- タイトル（最大200文字）と内容（最大2000文字）を入力
- 「保存」ボタンをクリック
- ✅ お知らせが即座に保存され、約30秒以内に全ユーザーの画面に表示されます
お知らせの編集
- 編集したいお知らせの「編集」ボタンをクリック
- 入力欄に内容が表示されるので、修正します
- 「保存」ボタンをクリック
お知らせの削除
- 削除したいお知らせの「削除」ボタンをクリック
- 確認ダイアログで「OK」をクリック
💡 お知らせ機能のポイント
- お知らせは拠点ごとに独立して管理されます
- 1拠点あたり最大20件まで登録できます
- お知らせは追加した順（古い順）に表示されます
- HTML/スクリプトは自動的に無効化されます（セキュリティ対策）
- 全ユーザーの画面に約30秒以内に自動反映されます
お知らせの用途例
- 🔧 システムメンテナンスの予定
- 📅 全体会議やイベントの案内
- ⚠️ 業務上の注意事項
- 🎉 新機能の案内
- 📢 重要な連絡事項
📅 5. イベント管理
用途：GW、年末年始、夏季休暇など、複数日にわたる休暇を事前に登録・管理します
✨ イベント機能の特長
- ガントチャート形式で休暇期間とメンバーを視覚的に管理できます
- 対象メンバーの在席状況が自動的にハイライト表示されます
- ユーザーは登録されたイベントを選択して表示できます
- 表示/非表示の切り替えで、公開するイベントをコントロールできます
イベントの作成
- 管理パネルを開き、「📅 イベント管理」タブをクリック
- 対象拠点を選択（スーパー管理者の場合）
- タイトルを入力（例：「GW期間休暇」「年末年始休暇」）
- 開始日と終了日を入力（カレンダーから選択可能）
- 備考（任意）を入力（社内共有用のメモなど）
- 「表示する」チェックボックスをONにすると、ユーザーがイベントボタンから選択できるようになります
- ガントチャート（日付×メンバーの表）で、休暇対象のメンバーと日付のセルをクリック/ドラッグしてONにします
- 「💾 作成/更新」ボタンをクリック
- ✅「イベントを保存しました」と表示されたら成功です
イベントの編集
- 管理パネルの「登録済みのイベント」一覧から、編集したい項目の「編集」ボタンをクリック
- 入力欄に現在の設定が表示されます
- 必要な項目を修正します
- 「💾 作成/更新」ボタンをクリック
イベントの削除
- 編集したいイベントを選択（編集ボタンをクリック）
- 「🗑️ 削除」ボタンをクリック
- 確認ダイアログで「OK」をクリック
ガントチャートの操作方法
- セルをクリック：休暇のON/OFFを切り替え
- ドラッグ：連続した日付やメンバーを一度に設定
- スマートフォン：タップで操作可能
- グループジャンプ：メンバーが多い場合、グループ選択で素早く移動できます
- 色分け：土日・祝日は自動的に色付けされます
イベントの並び替え
「登録済みのイベント」一覧では、複数のイベントの表示順序を変更できます。
- 一覧の「並び」列にある「↑」「↓」ボタンをクリックすると、イベントの順序が入れ替わります
- 上にあるイベントほど優先度が高く、ユーザーが選択する際のリストの上位に表示されます
- 並び替え後、自動的に保存されます（保存ボタンを押す必要はありません）
💡 ヒント：現在進行中のイベント（例：GW、年末年始）を上位に配置すると、ユーザーが選択しやすくなります。
休暇種別（休暇固定）の設定
各イベントに対して、ステータスとして表示される「休暇種別」を設定できます。
- 設定場所：「登録済みのイベント」一覧の「休暇固定（種別）」列
- 操作方法：該当の列をクリックすると、ドロップダウンから種別を選択できます
- 選択肢：「休み」「休暇」「特休」「有給」「代休」などから選択可能
- 自動保存：選択すると即座に保存され、ユーザーの画面に反映されます
使用例
- 「GW期間休暇」→ 種別：「休暇」（通常の長期休暇）
- 「年末年始休暇」→ 種別：「休み」（会社休業日）
- 「夏季休暇」→ 種別：「有給」（有給休暇推奨期間）
- 「創立記念日」→ 種別：「特休」（特別休暇）
色/カテゴリーの設定
イベントに色を設定することで、視覚的に区別しやすくなります。
- 設定場所：イベント作成/更新フォームの「色/カテゴリー」ドロップダウン
- 選択肢：
- 🟡 サニー（amber）：明るい黄色系（夏季休暇など）
- 🔵 ブルー（blue）：青系（通常の休暇）
- 🟢 グリーン（green）：緑系（有給推奨期間など）
- 🩷 ピンク（pink）：ピンク系（特別イベント）
- 🟣 パープル（purple）：紫系（記念日など）
- 🟦 ティール（teal）：青緑系（研修期間など）
- ⚫ グレー（gray）：灰色系（非アクティブなイベント）
- 効果：一覧表示やカレンダー表示時に、設定した色でイベントが識別されます
管理者によるユーザー休暇日の編集
管理者は、イベント作成時のガントチャートで全ユーザーの休暇日を一括設定できます。
- イベント作成/更新フォームで開始日と終了日を入力すると、ガントチャートが表示されます
- ガントチャート上で、各メンバーの休暇日をクリック/ドラッグしてON（青色）に設定します
- 複数のメンバーを一度に設定する場合は、ドラッグ操作が便利です
- 設定後、「💾 作成/更新」ボタンをクリックすると保存されます
- ✅ ユーザーがそのイベントを選択すると、設定した日が自動的に「休み」ステータスになります
⚠️ 重要：イベントカレンダーでユーザー自身が変更した休暇日は、ユーザー個人のデータとして保存されます。
管理者が後からガントチャートを編集しても、既にユーザーが保存した個人設定は上書きされません。
表示/非表示の切り替え
- 「登録済みのイベント」一覧の「表示」チェックボックスで切り替えられます
- チェックON：ユーザーがイベントボタンから選択できます
- チェックOFF：管理者のみ閲覧可能（ユーザーには表示されません）
- 複数のイベントを同時に「表示」にできますが、ユーザーが選択できるのは1つだけです
💡 イベント機能のポイント
- イベントは拠点ごとに独立して管理されます
- ユーザーがイベントを選択すると、該当メンバーの行がハイライト表示されます
- ステータス欄にイベントのタイトルが表示され、内部的には「休み」として扱われます
- イベント表示を解除するまで、該当メンバーのステータスは編集できません
- 休暇期間が終了しても自動的には解除されません（手動で非表示にしてください）
イベントの用途例
- 🎌 GW（ゴールデンウィーク）：5月の連休期間
- 🎆 夏季休暇：8月のお盆休み期間
- 🎄 年末年始休暇：12月末〜1月初旬
- 🏢 会社全体休業日：創立記念日など
- 📅 特定チームの一斉休暇：部署単位の休暇計画
📋 運用上の注意事項
- 💾 バックアップは必須：重要な操作の前に必ずCSVエクスポートでバックアップを取ってください
- 👥 複数管理者の同時操作は避ける：競合してデータが失われる可能性があります
- 🔄 定期バックアップ：週1回程度、定期的にCSVエクスポートすることを推奨します
- 🔒 パスワード管理：パスワードは平文保存のため、強固なものを使い、関係者以外に漏らさないでください
❓ よくある質問（管理者向け）
Q. CSVインポートで「CSVヘッダが不正です」と出る
A. ヘッダー行（最新形式では2行目）が正しい形式か確認してください。エクスポートしたCSVのヘッダー行をそのまま使うのが確実です。
Q. 誤ってメンバーを削除してしまった
A. 削除前のバックアップCSVを再インポートしてください。バックアップがない場合は手動でCSVを作成する必要があります。
Q. メニュー設定のJSONが正しいか不安
A.
オンラインのJSONバリデーター（例：jsonlint.com）で確認できます。保存時にエラーが出た場合は「現在の設定を読み込み」で元に戻してください。
Q. イベントのガントチャートが表示されません
A. 開始日と終了日を入力してから、ガントチャートが生成されます。日付を入力していることを確認してください。
Q. イベントを保存したのにユーザーに表示されない
A. 「表示する」チェックボックスがONになっているか確認してください。チェックOFFの場合、管理者のみ閲覧可能でユーザーには表示されません。
Q. イベントの表示をやめたい
A. イベント管理で該当する休暇の「表示」チェックボックスをOFFにしてください。または、休暇を削除することもできます。
Q. イベントの並び順を変更したい
A. 「登録済みのイベント」一覧の「並び」列にある↑↓ボタンをクリックすると順序を変更できます。変更は自動保存されます。
Q. 休暇種別（休暇固定）を変更したい
A.
「登録済みのイベント」一覧の「休暇固定（種別）」列をクリックすると、ドロップダウンから種別（休み、休暇、特休、有給、代休など）を選択できます。選択すると即座に保存されます。
Q. イベントの色を変更したい
A. イベント編集画面の「色/カテゴリー」ドロップダウンから、サニー、ブルー、グリーン、ピンク、パープル、ティール、グレーの中から選択できます。
Q. 複数のイベントを同時に表示できますか？
A.
管理者は複数のイベントを「表示する」に設定できますが、ユーザーが実際に選択できるのは1つだけです。ユーザーはイベントボタンから選択して切り替えることができます。
Q. ユーザーが個別に変更した休暇日を管理者が確認できますか？
A.
ユーザーが長期休暇カレンダーで変更した内容は、そのユーザーの「メンバーの休暇指定ビット（membersBits）」として保存されています。管理者はCSVエクスポートで確認できますが、直接編集する機能は現在ありません。各ユーザーが自分で長期休暇カレンダーから変更してください。
Q. ガントチャートで設定した休暇日が反映されない
A. ガントチャートでセルをクリック/ドラッグした後、必ず「💾
作成/更新」ボタンをクリックして保存してください。また、ユーザー側で該当イベントを選択していない場合は、休暇日として反映されません。
Q. イベントの対象拠点を変更したい
A. イベント編集画面の「対象拠点」ドロップダウンから変更できます（スーパー管理者のみ）。変更後「💾 作成/更新」ボタンで保存してください。
📚 さらに詳しく知りたい方へ
より詳細な情報は 管理者向け詳細マニュアル（ADMIN_MANUAL.md）
をご覧ください。
