描画認知機能テストアプリ 開発作業報告書

プロジェクト名: drawing-cognitive-test

作業場所: C:\Users\kawag\work\drawing-cognitive-test

作成日: 2026年1月22日

技術スタック: React 18, TypeScript, Vite, Cloudflare Workers, D1 Database

1. プロジェクト概要

Kobayashi et al. (2022) の論文「Automated Early Detection of Alzheimer's Disease by Capturing Impairments in Multiple Cognitive Domains with Multiple Drawing Tasks」に基づき、 5つの描画タスクを用いた認知機能スクリーニングアプリを開発しました。

論文の主要知見

2. 基本機能（コア実装）

2.1 描画タスク

タスク 内容 評価対象
Sentence（文章書き） 自由な文章を書く 言語機能、運動機能
Pentagon（五角形模写） 重なった五角形を模写 視空間認知、構成能力
TMT-A 1→25の数字を順番につなぐ 注意機能、処理速度
TMT-B 1→A→2→B...と交互につなぐ 実行機能、認知的柔軟性
CDT（時計描画） 10時10分の時計を描く 視空間認知、実行機能

2.2 描画特徴量（22種）

運動関連：速度/加速度（6種）

speedMean, speedCv, speedExtremaPerMm, accelMean, accelCv, accelExtremaPerMm

運動関連：ペン圧（5種）

pressureMean, pressureCv, pressureExtremaPerMm, pressureChangeMean, pressureChangeSd

運動関連：ペン姿勢（6種）

tiltXSd, tiltYSd, tiltXChangeMedian, tiltXChangeSd, tiltYChangeMedian, tiltYChangeSd

休止関連（5種）

pauseMeanMs, pauseTotalPerMm, pauseDrawingRatio, totalDurationPerMm, drawingMotionsPerMm

3. 補足機能（追加実装）

機能 説明 ファイル
完了 PDFレポート出力 テスト結果をPDFで出力。受診者情報、スコア、特徴量を1ページにまとめる src/utils/pdfReport.ts
完了 経時変化トラッキング 過去50件の履歴保存、前回比較、推移グラフ表示 src/utils/storage.ts
src/pages/ProfilePage.tsx
完了 年齢別正規化スコア 論文Table 2の基準値を使用。60-69歳/70-79歳/80歳以上で正規化 src/utils/ageNormalization.ts
完了 練習モード 本番前に3タスクを体験。結果は保存されない src/pages/PracticePage.tsx
完了 詳細分析画面 ストローク再生、速度ヒートマップ、休止位置マーキング src/pages/AnalysisPage.tsx
完了 PWA対応 オフライン対応、ホーム画面追加可能 public/manifest.json
public/sw.js

4. ファイル構成

drawing-cognitive-test/ ├── package.json ├── wrangler.toml ├── index.html ├── setup.bat ├── dev.bat ├── db/ │ ├── schema.sql # D1スキーマ │ └── seed.sql # 基準値データ ├── public/ │ ├── manifest.json # PWAマニフェスト │ ├── sw.js # Service Worker │ └── icons/ │ └── icon.svg └── src/ ├── main.tsx ├── App.tsx ├── index.css ├── types/ │ └── index.ts # 型定義 ├── utils/ │ ├── featureExtractor.ts # 22特徴量抽出 │ ├── pdfReport.ts # PDF生成 │ ├── storage.ts # ローカル保存 │ └── ageNormalization.ts # 年齢別正規化 ├── components/ │ ├── DrawingCanvas.tsx # 描画キャンバス │ └── tasks/ │ ├── SentenceTask.tsx │ ├── PentagonTask.tsx │ ├── TMTATask.tsx │ ├── TMTBTask.tsx │ └── CDTTask.tsx ├── pages/ │ ├── HomePage.tsx │ ├── TestPage.tsx │ ├── ResultPage.tsx │ ├── PracticePage.tsx │ ├── ProfilePage.tsx │ └── AnalysisPage.tsx └── worker/ └── index.ts # Cloudflare Workers API

5. ページ構成

パス 画面名 機能
/ ホーム テスト開始、練習モード、履歴サマリー表示
/practice 練習モード 3タスク体験（結果は保存されない）
/test 本番テスト 5タスクを順番に実施
/result 結果表示 スコア、年齢別評価、PDF出力
/profile プロファイル 基本情報、履歴一覧、推移グラフ
/analysis 詳細分析 軌跡再生、ヒートマップ、休止表示

6. 使用方法

6.1 初回セットアップ

  1. setup.bat をダブルクリック
  2. 依存関係のインストールとD1データベースの初期化が実行される

6.2 開発サーバー起動

  1. dev.bat をダブルクリック
  2. ブラウザで http://localhost:8787 を開く

6.3 本番ビルド

npm run build
npm run deploy  # Cloudflareへデプロイ

7. 技術的な注意点

8. 参考文献

Kobayashi M, Yamada Y, Shinkawa K, et al. (2022). Automated Early Detection of Alzheimer's Disease by Capturing Impairments in Multiple Cognitive Domains with Multiple Drawing Tasks. Journal of Alzheimer's Disease, 88(3), 1075-1089.