F-WEB-007 受講証明書発行フロー - ワイヤーフレーム

入力

確認

発行完了

📝

感想・振り返りを入力してください

⚠️ 入力内容は受講証明書PDFに印字されます。発行後の内容変更はできません。記入の上、確認画面でご確認ください。
※ 本フローは暫定案です。確定仕様はクライアント確認事項（docs/client/F-WEB-007_受講証明書発行フロー.md）に依存します。

感想・気づき ※必須

0 / 推奨200文字以上

受講後の学びや発見を自由に記述してください。証明書に印字されます。

これから取り組みたいこと ※必須

0 / 推奨100文字以上

具体的なアクションプランを記入すると、学びの振り返りに役立ちます。

※ 両フィールドの入力が必須です

🔍

入力内容の確認

📄 証明書に印字される内容

感想・気づき

認知症ケアにおいてパーソンセンタードケアの視点が重要だと改めて理解しました。特にBPSDへの対応では、利用者の方の行動の背景にある感情や欲求を読み解くことが大切であると学びました。また、ご家族への情報共有と支援の在り方についても、より丁寧に行う必要があると感じています。

これから取り組みたいこと

利用者の方の「その人らしさ」を大切にしたケアプランの見直しに取り組みます。具体的には、個別ケア記録に感情・反応の観察を追記し、チームで共有する仕組みを提案したいと考えています。

📋 発行情報

証明書番号（仮） CERT-00000428 発行日 2026年10月20日受講者名山田太郎所属事業所 ◯◯デイサービス法人名社会福祉法人◯◯会講座名認知症ケアの基礎と実践的アプローチ受講時間 30分

✅

受講証明書が発行されました

📄

受講証明書の発行が完了しました

PDFをダウンロードして保管してください。発行済み証明書はマイページからいつでも再ダウンロードできます。

📥

受講証明書_認知症ケアの基礎と実践的アプローチ_山田太郎_20261020.pdf

PDF ｜約 180KB ｜ 2026年10月20日発行

発行内容のサマリー

証明書番号

CERT-00000428

講座名

認知症ケアの基礎と実践的アプローチ

受講者

山田太郎

発行日

2026年10月20日

再ダウンロード

マイページ › 受講証明書一覧より可能

📝 実装注記

1. 画面構成

フォーム・作成型テンプレートに準拠した3ステートウィザード形式（入力→確認→発行完了）。全ステートを1ファイルに内包し、ステッパーUI（`.stepper`）と`.flow-state`のJS切替で状態を管理する。上部に固定のステッパーを配置し、現在のステップを`.active`・`.done`クラスで視覚的に表現。本フローは暫定案であり、確定仕様はクライアント確認事項（`docs/client/F-WEB-007_受講証明書発行フロー.md`）に依存する。F-WEB-003（Web講義ページ）の「受講証明書を発行」ボタンからページ遷移して本画面に入る想定。

2. 権限制御

本画面は受講済み（「受講しました！」フラグが立っている）の個人アカウント・事業所アカウントのみアクセス可能。未受講状態でURLを直接入力した場合はF-WEB-003（講義ページ）にリダイレクト。法人管理者・事業所管理者が他メンバーの証明書を代理発行する機能はPh1では対象外。発行済みの証明書に対して再度本フローを踏むことは不可（マイページから再ダウンロードへ誘導）。権限チェックはREST APIハンドラ（`/wp-json/lms/v1/certificates`）のcapabilityで担保する。

3. データ表示

入力フォームのダミーデータ（受講者名・事業所名・受講日）は`wp_get_current_user()`および`lms_user_meta`テーブルから自動取得。確認画面の「証明書番号」は仮番号で、実発行時に`lms_certificates`テーブルへの挿入と同時に採番する。発行完了画面のPDFファイル名はシステムが自動生成（講座ID・受講者ID・発行日を結合）。「これから取り組みたいこと」「感想・気づき」のテキストは`lms_certificates`テーブルの`reflection_text`・`action_plan_text`カラムに保存し、PDF生成にも使用する。

4. インタラクション

ステッパー切替: `goToConfirm()`・`goToInput()`・`goToComplete()`関数で`.flow-state`の`active`クラスと`.step-circle`・`.step-label`・`.step-connector`の状態クラスをトグル。「入力に戻る」クリック時は入力フォームの値を保持する（DOM上に値が残るため対応不要）。「← 講義ページに戻る」は`history.back()`またはF-WEB-003のURLに遷移。「受講証明書を発行する」クリック後はサーバーへのPOSTリクエスト（実装時）でPDFを生成し、ダウンロードURLを受け取る。ワイヤー上はJS状態切替でステート3に遷移する。

5. レスポンシブ

PC表示（1200px幅）を基準設計。タブレット（768px以下）ではステッパーのコネクター幅を60pxに縮小し、ステップラベルを非表示にする。フォームの入力エリアは100%幅を維持。発行完了画面の`.complete-dl-box`はパディングを縮小し、ボタンを縦積みに変更。スマホ（480px以下）ではカードの左右パディングを16pxに縮小する。

6. パフォーマンス・セキュリティ

受講証明書の発行リクエストにはCSRF保護（`wp_nonce`）を適用。発行APIエンドポイント（`POST /wp-json/lms/v1/certificates`）では認証チェック・受講済みチェック・重複発行チェックをサーバーサイドで行い、二重発行を防止する。PDF生成はサーバーサイドで実行（mpdf / TCPDF等）し、生成済みPDFは`/wp-content/uploads/lms/certificates/`に保存してユーザーIDで名前空間を分離する。PDFへの直接URLアクセスはWordPressの認証チェックを挟んで制御（.htaccessまたはPHP proxy）。感想テキストのXSS対策として`wp_kses_post()`でサニタイズを実施。テキスト入力の文字数上限はサーバーサイドでもバリデーションする（推奨: 感想2,000文字・取り組み1,000文字）。本フローは暫定案。確定仕様はクライアント確認事項に依存するため、実装前に必ず確認事項ドキュメントを参照すること。

💡 本ワイヤーフレームはPC表示（1200px幅）を基準としています。タブレット・スマホ表示は別途レスポンシブ設計が必要です。