【APLI】TeamLog –
目次
TeamLog – PWA報告共有アプリ
🧭 Team Progress Log(チーム進捗管理アプリ)
目的:チーム進捗を可視化し、行動をサポートするツール
使用技術:PHP / MySQL / JavaScript / CSS
成果:タスク共有時間を約50%短縮(UI再設計)
ポイント:CSRFトークン・CRUD実装・モバイル最適化
\ ブラウザで開くにはコチラ /
※管理者用ページはパスワード設定あり
他のアプリは \ コチラ / から
PWAアプリのインストール方法は \ コチラ /
TeamLog
– チームの進捗管理をシンプルに。ー
TeamLogは、毎日の「報告・共有・承認」をひとつにまとめた日報管理アプリです。
スマホやパソコンから使用でき、アプリの様に使えます。(PWA対応)。
メンバーは作業内容を入力して送信、上司はその場で確認・承認できます。
コメントの全体共有で報告のやり取りもフォローもスムーズ。
オフラインでも記入でき、ネットにつながれば自動で同期。データはすべて安全にサーバーで管理され、セキュリティも安心。小さなチームから会社全体まで、誰でもすぐに使えるシンプルな設計です。
毎日の報告を「簡単・確実・見える化」することで、チームの生産性を高めます。
使用機材:MacbookPro M4,Chatgpt
このアプリは、私自身が中間管理職として働いていた時の経験から生まれました。
日々の業務報告をメールやチャットでやり取りしていた頃、情報が分散して確認に時間がかかり、チームの状況を正確に把握するのが難しいと感じていました。
また、部下の日報提出忘れや、指示の遅れなど、ちょっとした手間が積み重なってストレスになっていました。
そこで、「もっと簡単に報告出来て、すぐに確認でき、他のメンバーでもフォローに入れる仕組みを作りたい」と思い、TeamLogの開発を始めました。このアプリのタスクと進捗ページをオフィスのディスプレイに表示させておけば、チームメンバーの動きが把握でき私がいなくても周りのメンバーがフォローしやすくなるよう設計しました。
開発では、セキュリティや使いやすさ、スマホ対応などに特に苦労しました。
専門知識が必要な部分も多く、試行錯誤しながら少しずつ形にしていきました。
最終的に、現場目線で“本当に使いやすい”進捗日報管理アプリを目指して完成したのが、このTeamLogです。
【 アプリ構成 】
teamlog/
├─ public/
│ ├─ index.html
│ ├─ manifest.json
│ ├─ sw.js
│ └─ assets/ (css, img, icons)
├─ js/
│ ├─ app.js (SPAルーター/UI初期化)
│ ├─ apiClient.js (fetchラッパ・CSRFヘッダ付与)
│ ├─ store.js (状態管理: user, team, offlineキュー)
│ ├─ views/ (画面モジュール)
│ └─ components/ (UI部品)
├─ api/
│ ├─ auth.php
│ ├─ users.php
│ ├─ teams.php
│ ├─ reports.php
│ ├─ comments.php
│ ├─ files.php
│ ├─ notifications.php
│ └─ csrf.php
├─ src/
│ ├─ db.php (PDO接続)
│ ├─ services/ (AuthService, ReportService…)
│ ├─ repositories/ (UserRepo, ReportRepo…)
│ ├─ validators/ (入力検証)
│ └─ security/ (Csrf, Sanitizer)
├─ admin/
│ ├─ index.php
│ └─ users.php
├─ config/
│ └─ config.php
└─ sql/
└─ schema.sql
【 セキュリティ設計 】
• XSS対策:
• 受信時:文字列はサーバ側で長さ・禁止タグ検証
• 出力時:HTMLエスケープ(PHP htmlspecialchars)、許可リスト方式
• CSRF:
• GET /api/csrfでトークン発行(DBのcsrf_tokensに保存、有効期限例:2時間)
• 変更系リクエストは X-CSRF-Token 必須+セッション照合
• 認証/セッション:
• sessionsテーブルにIP/UA/最終アクセスを記録し、固定化対策にローテーション
• パスワードは password_hash()(PASSWORD_DEFAULT)
• アカウントロック(連続失敗n回/15分)
• 権限:
• role(サイト全体)+team_members.role_in_team(チーム内)
• Report参照権:本人/同チームのmanager/admin
• ファイル保存先は/storage/reports/{reportId}/、拡張子・MIME検証、サイズ制限
• 直リンク不可(PHP経由で認可チェック後に送出)
• 監査ログ:ログイン、日報の提出・承認・差戻し等をaudit_logsへ