📖 使い方ガイド

Staff Manager の全画面・全機能を画像つきで説明します。困ったらまずここを見て、解決しなかったら 📮 お問い合わせ へ。
🏠 ホームへ戻る 🎓 はじめての方へ(3ステップ) 📮 お問い合わせ

📚 目次(クリックでジャンプ)

⏱
タイムカード運用 NEW
出社→業務→日報=退勤
🆕
最新アップデート
2026-05-21 主要変更一覧
🎖
権限ランクの仕組み
LV.MAX / LV.MIDDLE / STANDARD
🔐
ログイン
Google OAuth + デモログイン
🏠
ホーム画面
入口カードから各画面へ
👤
従業員ポータル
8 タブ + 申請
📊
管理ダッシュボード
10 タブ・LV.MIDDLE 以上
👤
マイページ
プロフィール / 連絡先
📒
会計・経理
月別仕訳帳 / 領収書
💬
社内 Q&A
FAQ + isoAi
📩
LINE/メール 連絡
全画面共通
📮
お問い合わせ
バグ報告・機能リクエスト
⚡
グローバル FAB
右下浮遊メニュー
🆘
困ったとき
トラブルシューティング
🔑
API キー取得
Google / LINE / Anthropic
🏢
新規会社登録
マルチ会社運用

⏱ タイムカード運用 — 出社・業務・日報・退勤の 1 日の流れ

2026-05-21 礒貝CEO 指示で新設。Staff Manager はタイムカード兼勤怠管理として動作します。

🌅 朝(業務開始)

  1. Staff Manager の従業員ポータル (employee.html) を開く
  2. 「⏱ 今日の勤務をどうしますか?」モーダルが表示される
  3. 2 つのボタンから選択:
    • ✅ 出社する (今からタイムカードを開始) — 業務開始打刻。緑ボタン
    • 👀 お休み(画面だけ確認します) — 休日だがアプリは見たい場合(打刻されない)
  4. 「出社する」を押すと、ヘッダー右上に「📝 日報を書いて退勤 (出社: HH:MM)」ボタンが現れる

⌛ 業務中(日中)

  1. タイムスケジュールタブで、その日の予定をブロックで管理 (0〜23時のグリッド + 時計プリセット UI)
  2. タスクタブで進行中のタスクを進める(進捗バーをスライドで上げる)
  3. 申請タブで経費・出張・稟議の申請(出張は出発日/帰着日も入力)
  4. 休暇申請タブで休みを申請(2 週間以上先のみ可)

🌇 夕方(業務終了 = 日報書く = 退勤)

⚠️ 重要: 退勤するには 必ず日報を書き終えてから「💾 日報を提出して退勤」ボタンを押してください。日報を書き終えたタイミング = 退勤打刻です。
  1. ヘッダー右上の「📝 日報を書いて退勤」ボタンをタップ → 日報タブに自動ジャンプ
  2. 日報を記入:
    • 勤務開始時刻(出社時に自動入力済) / 勤務終了時刻
    • 今日やったこと / 明日やること / 課題・ブロッカー
    • 今日のコンディション(😣〜😄 の 5 段階)
    • タスクの進捗 — 進捗を上げたタスクには 6 文字以上の進捗メモが必須(どこまで進んだか/どんな状況か)
  3. 「💾 日報を提出して退勤」ボタンを押す → 日報保存 + 退勤打刻が同時実行
  4. 「⏱ 退勤打刻: HH:MM〜HH:MM (お疲れさまでした!)」のメッセージが出れば完了

🛠 管理側 (社長・管理者) の確認

  1. 管理ダッシュボード admin.html → 「⏱ 勤務状況」タブを開く
  2. 本日の出社・退勤・閲覧のみ・未打刻の人数が 4 枚 KPI で一目で確認
  3. 表で各スタッフの出社時刻 / 退勤時刻 / 稼働時間 / ステータス(🟢出社中・✅退勤済・👀閲覧のみ・未打刻) / 本日のタスク進捗 / 日報提出状況を一覧
  4. 表の行をクリックすると、そのスタッフの詳細(連絡先・緊急連絡先・タスク・日報内容)を即確認可能

🆕 最新アップデート (2026-05-21 リリース)

この日リリースされた主な機能変更一覧。社員全員のブラウザに自動反映されています。

⏱ タイムカード機能

朝のログイン時に「出社/休み」モーダル → 業務終了時は日報書く = 退勤打刻。詳細は上記タイムカード運用セクション。

📊 勤務状況タブ (管理側)

admin.html に新タブ。全スタッフの本日の出社/退勤/稼働時間/タスク進捗/日報提出状況を 1 画面で確認。

🚨 緊急連絡先 4 項目化

マイページの緊急連絡先を「氏名 / 続柄 / 電話 / 住所」の 4 欄に分割。すべて入力必須。

🏖 休暇申請 2 週間前ルール

「基本的に休日はない」前提で、休暇申請は必ず 2 週間以上先のみ受付。種類に「固定休日」追加。

📅 出張に日程入力

申請タブで「出張」種別を選ぶと、出発日と帰着日の入力欄が出ます。日帰りは同日。

📝 日報の進捗メモ必須化

タスクの進捗を上げる時、「どこまで進んだか / どんな状況だったか」を 6 文字以上で入力しないと日報を提出できません。

🕐 時計プリセット UI

タイムブロック追加モーダルに時(0〜23)+分(0/15/30/45)のボタンパッド。タップだけで時刻入力。

🗓 日付入力でカレンダー自動表示

全ての日付欄をタップしただけでカレンダー、時刻欄は時計 picker が即座に開きます。

🎯 採用機能の連絡先 5 項目 + 削除

候補者にメール/電話/LINE/SNS/住所を登録、行/カード/モーダルから削除可能、明細表示も可。

💬 Q&A は会社別

新会社設立時、Q&A はゼロから開始。Q&A 担当者(管理者)が「+ FAQ 追加」で自社向けに登録。

📒 会計経理も会社別

新会社設立時、会計データもゼロから開始。会社間のデータ混在なし。

🏢 新規会社設立は社長専用

LV.MAX 社長のみ「🆕 新規会社を追加」ボタンが見える。管理者は新規設立不可。

📨 管理者も招待発行可

LV.MIDDLE 管理者も新メンバー招待コードを発行可能。社長の作業負荷を軽減。

🔄 権限変更が他端末に即同期

社長がマイページで権限を変更すると、Supabase に同期 → 全社員の端末で次回画面表示時に反映。

🔐 セキュリティ強化

会社別セッション分離・別タブ干渉防止・STAFF[0]フォールバック撤廃・5重ガード(legacy/mismatch/staff_not_found/staff_not_in_company/STAFF[0]禁止)。

🔗 直リンク発行 (オーナー専用)

master.html で各スタッフ向けの「24時間有効ログインURL」を発行。LINE で送れば 1 タップで参加完了。

🎖 1. 権限ランクの仕組み

この仕組みを理解すると、誰が何を見られるかが明確になります。
LV.MAX 社長(礒貝CEO)
  • 全社員の個人情報を閲覧・編集可
  • 権限ランク変更権あり(他者を昇格/降格)
  • 全タスク・全申請を承認可能
  • サポートチケットの全件管理権限
LV.MIDDLE 管理者(役員等)
  • 全社員の業務情報を閲覧可(個人情報も可)
  • 管理ダッシュボードへアクセス可
  • 担当範囲のタスク依頼・承認可能
  • 権限変更は不可(社長のみ)
STANDARD 一般(社員)
  • 自分の情報・業務のみ閲覧・編集
  • 他人の電話・住所・緊急連絡先は非表示
  • 管理ダッシュボードはアクセス不可
  • マイページから自分のサポート起票可
💡 表示ヒント: 画面右上のユーザーピルに LV.MAX / LV.MIDDLE / STANDARD のバッジが付きます。

🔐 2. ログイン画面 login.html

📷 ログイン画面のスクショ
(リロードで開発者が後ほど更新)
⚠ OAuth 未設定の場合: 「📥 自動取得」ボタンが表示されます。詳しくは 招待・参加フロー を参照
↗ 実際の画面を開く

🏠 3. ホーム画面 index.html

📷 ホーム画面のスクショ
↗ 実際の画面を開く

👤 4. 従業員ポータル employee.html

8 タブで個人業務を管理。全員
📷 従業員ポータルのスクショ

タブ構成

💡 緊急度カラー: 🔵→🟢→🟡→🟠→🔴→🔴点滅 (期限が近いほど赤くなり、超過 3 日で点滅)
↗ 実際の画面を開く

📊 5. 管理ダッシュボード admin.html

LV.MAXLV.MIDDLE のみアクセス可。STANDARD はマイページにリダイレクト。
📷 管理ダッシュボードのスクショ

KPI(クリックで詳細モーダル)

10 タブ構成

💡 クイック連絡: 各メンバーカードに 💬 ボタン → ワンクリックで LINE 進捗確認ダイアログ起動
↗ 実際の画面を開く

👤 6. マイページ mypage.html

6 タブ構成。全員 アクセス可。
📷 マイページのスクショ
↗ 実際の画面を開く

📒 7. 会計・経理 accounting.html

📷 会計画面のスクショ
↗ 実際の画面を開く

💬 8. 社内 Q&A chatbot.html

📷 Q&A 画面のスクショ
↗ 実際の画面を開く

📩 9. LINE/メール 連絡(全画面共通)

2026-05-11 追加。全画面から相手にすぐ連絡できる仕組み。全員
📷 連絡ダイアログのスクショ

4 つの送信チャネル

起動できる場所

💡 LINE グループ送信: 管理ダッシュボード → 設定タブ → 「👥 LINE グループ管理」から招待 URL を登録すると、そのグループへ直接送信可能になります

📮 10. お問い合わせ・バグ報告 support.html

📷 お問い合わせ画面のスクショ

フォームの項目

送信後の流れ

  1. 礒貝CEO に LINE/メールで自動通知ダイアログが起動
  2. 礒貝CEO がステータスを「🔄 対応中」に変更 → コメントとともにあなたに通知
  3. 修正・実装 → 「✅ 解決」に変更 → 完了通知
⚠ STANDARD 一般社員も自由に起票可能。あなたの起票は「📋 自分の履歴」タブで進捗確認できます。
↗ お問い合わせを起票

⚡ 11. グローバル FAB(右下浮遊メニュー)

全画面の右下に常駐する金/藍グラデーションボタン。役職別に表示メニューが変わります。
💡 STANDARD ユーザーは管理機能が自動的に隠され、9 項目に絞られます

🆘 12. 困ったときは

🔑 API キー取得手順(本格運用前に設定)

本格運用に向けて 3 つの API キーを設定すると、Google ログイン・LINE 連携・AI 機能が動作します。
すべて 管理ダッシュボード → ⚙ 設定 → 🔌 連携 + API キー設定 から登録可能。

🟢 Google OAuth Client ID(Google ログイン + カレンダー連携)

  1. Google Cloud Console にアクセス → ログイン
  2. プロジェクト作成 → 「API とサービス」→「OAuth 同意画面」 → 外部 / 必要事項入力
  3. 「認証情報」→「+ 認証情報を作成」→「OAuth クライアント ID」
  4. アプリケーションタイプ: 「ウェブアプリケーション」
  5. 承認済みの JavaScript 生成元に本番 URL を追加(例: https://staff-manager.bcdc-ai.com / 開発時は http://127.0.0.1:4321)
  6. 承認済みのリダイレクト URIも同じ URL を追加
  7. 「作成」→ Client ID(xxxx.apps.googleusercontent.com)をコピー
  8. 本アプリの 管理ダッシュボード → ⚙ 設定 で「🟢 Google OAuth」欄に貼付 → 💾 保存
💡 「📥 自動取得」ボタンを押すと、クリップボードにコピー済みの Client ID をワンクリックで貼付できます。

🤖 Anthropic API Key(isoAi / Claude API)

  1. console.anthropic.com にアクセス → ログイン
  2. 左メニュー 「API Keys」 → 「Create Key」
  3. キー名を入力(例: ganecci-staff-manager)→ Create
  4. 表示された sk-ant-... をコピー(この画面でしか見れません)
  5. 本アプリの 管理ダッシュボード → ⚙ 設定 で「🤖 Anthropic API」欄に貼付 → 💾 保存
⚠ 料金: 入力 1M tokens = $15、出力 1M tokens = $75(Opus 4.7)。日報要約 10 名 × 30 日 で月数百円程度の見込み。
使用上限を設定して暴走を防ぐのを推奨。

💬 LINE Login Channel(Phase 2 で有効化)

LINE で OAuth ログインさせる仕組み。Phase 2(Supabase 移行後)で実装。今は事前準備として Channel を取得 → 設定欄に保存してください。
  1. LINE Developers Console にアクセス → ログイン
  2. 「新規プロバイダー作成」(or 既存を選択)→ プロバイダー名入力
  3. プロバイダー詳細画面 → 「新規チャネル作成」→「LINE Login」
  4. アプリ名・説明・アイコン・地域・メールアドレスを入力
  5. 作成後、「チャネル基本設定」 タブ:
    • Channel ID(数字 10 桁前後)をコピー
    • Channel Secret(英数 32 桁)をコピー
  6. 「LINE Login 設定」 タブ → Callback URL に https://staff-manager.bcdc-ai.com/auth/line/callback を追加
  7. 本アプリの 管理ダッシュボード → ⚙ 設定 で「💬 LINE Login」の Channel ID + Secret を保存
⚠ Phase 2 で実装:Supabase Auth に LINE Provider を追加 → コールバック URL を本番ドメインに合わせて再設定する必要があります。

⚡ LIFF — LINE 実認証(Phase 1 で動く・推奨)

LIFF (LINE Front-end Framework) は LINE Login の派生で、サーバ不要・クライアントサイド完結で本物の LINE 認証ができます。LIFF ID 1 つを設定するだけで、login.html とマイページの「💬 LINE 連携」が実認証に切り替わります。
  1. LINE Developers Console にログイン → 上記の「💬 LINE Login Channel」手順 1〜5 でチャネルを作成
  2. そのチャネルの 「LIFF」 タブを開く → 「追加」
  3. LIFF アプリ設定:
    • LIFF アプリ名: Staff Manager
    • サイズ: Tall(中央表示)
    • エンドポイント URL: 本番 https URL(例: https://staff-manager.bcdc-ai.com/login.html)
    • Scope: profile + openid をチェック
    • Bot 連携: On (Aggressive)(LINE 公式アカウントを連動させる場合)
  4. 作成後、表示される LIFF ID(例: 1234567890-AbCdEfGh)をコピー
  5. 本アプリの 管理ダッシュボード → ⚙ 設定 → 🔌 連携 → 💬 LINE 実認証 (LIFF) 欄に貼付して保存
  6. これで login.html の「💬 LINE でサインイン」と マイページの「⚡ LIFF で自動連携」が本物の LINE 認証になります
⚠ LIFF は HTTPS 必須。http://127.0.0.1:4321 のローカル環境では liff.init がエラーになります。Vercel / Netlify / Cloudflare Pages 等にデプロイして本番 URL で動作確認してください。
💡 1 度の LIFF ログインで「LINE userId + 表示名 + プロフィール画像」が自動取得され、自動的にスタッフ連携情報として保存されます。マイページからの手動入力は不要になります。

📩 LINE Notify トークン(個人/全社通知)

タスク依頼・期限切れ・承認結果などを LINE で通知する仕組み。個人別(マイページ)と全社共通(管理画面)の 2 種類があります。
  1. notify-bot.line.me/my/ にアクセス → LINE アカウントでログイン
  2. 下にスクロール → 「トークンを発行する」
  3. トークン名を入力(例: Staff Manager)
  4. 通知先トークルームを選択:
    • 1:1 で LINE Notify から通知を受け取る(個人通知用)
    • または グループを選択(全社通知用)— その場合は事前に LINE Notify を該当グループに招待
  5. 「発行する」 → 表示された英数トークンをコピー(この画面でしか見れません)
  6. 個人用 → マイページ → 🔐 アカウント → 🔗 LINE 連携 → Notify トークン に貼付
  7. 全社用 → 管理ダッシュボード → ⚙ 設定 → 🔌 連携 の「📩 LINE Notify」欄に貼付
💡 LINE Notify は無料で 1 トークンあたり 1,000通/時間まで送信可能。GANECCI 規模なら十分。

☁️ AWS デプロイ(S3 + CloudFront)

LocalStorage で動くまま AWS に上げて HTTPS 公開。LIFF と Google OAuth が本物動作するようになります。詳細手順は aws/README.md 参照。

構成(Phase 1.5)

5 ステップでデプロイ

  1. AWS CLI v2 インストール:curl https://awscli.amazonaws.com/AWSCLIV2.pkg -o /tmp/aws.pkg && sudo installer -pkg /tmp/aws.pkg -target /
  2. AWS アカウント + IAM ユーザ:ganecci-deployer 作成、ポリシー 4 つ付与(S3FullAccess / CloudFrontFullAccess / CloudFormationFullAccess / IAMReadOnlyAccess)
  3. Credentials 設定:aws configure(リージョン = ap-northeast-1)
  4. デプロイ実行:./aws/deploy.sh(初回 5〜10 分)
  5. 本番 URL を LIFF と Google OAuth に登録(承認済み生成元 / エンドポイント URL)

日常運用

💰 概算コスト:GANECCI 規模(10 名)なら 月額 ¥100 前後。初年度無料利用枠で実質ゼロ円。
⚠ 必ず本番 URL を取得した後に LIFF アプリの「Endpoint URL」と Google Cloud Console の「承認済み JS 生成元」を更新してください。ローカル http URL のままでは LIFF が 400 invalid_request を返します。

🏢 新規会社登録(マルチ会社運用)

数十社経営する CEO 向けの機能。1 端末で複数の会社プロファイルを保持し、ワンクリックで切替できます。

登録手順(4 ステップ)

  1. ホーム画面 または FAB から「🏢 新規会社を登録」を開く
  2. Step 1: 会社名・代表者・ドメイン・ブランドカラー・ロゴを入力
  3. Step 2: 社員情報を入力(👔 役員 7 名テンプレ / 📋 CSV 一括貼付 / ➕ 個別追加 が選べる)
  4. Step 3: プロジェクトを登録(✨ 汎用セット使用可、空でも OK)
  5. Step 4: 内容確認 → 🚀 会社を登録 + 切替 をクリック → 即運用開始

登録後の切替

💡 Phase 2 で予定: Supabase の Row Level Security(RLS)で完全分離 → クラウド同期 + 複数端末でも切替維持。

📸 スクリーンショットの追加方法 (礒貝CEO 向け)

このページの「📷 スクショ準備中」プレースホルダーは、staff-manager/screenshots/ フォルダに JPG/PNG を置くだけで自動で実画像に差し替わります。
  1. 各画面を開く → ⌘+Shift+4(Mac) or PrtScr(Windows) でスクショ
  2. ファイル名を以下のいずれかにリネーム:
    screenshots/login.jpg
    screenshots/index.jpg
    screenshots/employee.jpg
    screenshots/admin.jpg
    screenshots/mypage.jpg
    screenshots/accounting.jpg
    screenshots/chatbot.jpg
    screenshots/contact-dialog.jpg
    screenshots/support.jpg
  3. staff-manager/screenshots/ フォルダに保存(無ければ作成)
  4. このガイドを再読み込み(Cmd+R) → 自動で画像が表示
💡 推奨サイズ: 横幅 900〜1200px、JPEG 品質 70 程度(1 枚 50〜100KB)。読み込み速度のため大きすぎないように。
🚀 これで使い方は完璧です
不明点や改善要望があれば、いつでも 📮 お問い合わせ へ。