1. 目的 本手順書では、 Angular + Django(BFF) + AWS Cognito + MFA(TOTP) を使用した安全な認証機能を実装する。 本システムでは、 AngularはJWTを保持しない 構成を採用する。 JWTはDjango(BFF)のみが扱う。 2. システム構成 @startuml actor User rectan…

BFF方式：SAM + Cognito + Angular + Django 1. 採用方針 本システムは以下の条件に該当する。 社外公開 機密データあり 管理者操作あり そのため、AngularでJWTを直接扱う方式ではなく、BFF方式を採用する。 BFF方式では、Angularはアクセストークン、IDト…

動作分析システム MFA導入手順書（Cognito + Angular + Django） 1. 目的 本手順書では、既存のRedmine認証を廃止し、AWS Cognito を使用した多要素認証（MFA）へ移行する。 対象システム： フロントエンド：Angular API：Django REST Framework DB：Amazon …

force_authenticate() を使用した認証付きテストの書き方 Django REST Framework（DRF）で API テストを実装する際、 self.client.login() を使用しているのに 401 Unauthorized になって困るケースがあります。 本記事では、DRF の APITestCase と force_au…

【実務で使える】Angular＋NgRx＋Django開発を最速化する「screen.yaml起点」の自動生成戦略 はじめに Webシステム開発では、以下のような課題がよく発生します。 画面とAPIの仕様がズレる 画面間のデータのつながりが不明確 UIレビューで何度も手戻りが発生…

Django REST API を開発していると、こんな問題が起きがちです。 コードレビューに時間がかかる フォーマットや命名の指摘が多い バグがレビュー後に発覚する この記事では、コードを外部にアップロードせずに、ローカルだけで品質を底上げする方法を紹介し…

完成版 eslint.config.js // eslint.config.js // eslint.config.js const js = require('@eslint/js'); const globals = require('globals'); const tseslint = require('typescript-eslint'); const angular = require('angular-eslint'); const eslintCon…

Angularプロジェクトで コードレビューに時間がかかる コーディングルールがバラバラ フォーマットの指摘が多い という問題がある場合、ESLint + Prettier を導入するだけで一気に改善できます。 この記事では、Windows（PowerShell / コマンドプロンプト）…

Django専用 レビュー基準書 文書番号: ENG-CR-BACK-001版数: 1.0作成日: 2026-04-18対象: Django / Python / MySQL適用範囲: API、View、Service、ORM、トランザクション、バリデーション、テスト 1. 目的 本基準書は、Django / Python におけるコードレビュ…

Angular専用 レビュー基準書 文書番号: ENG-CR-FRONT-001版数: 1.0作成日: 2026-04-18対象: Angular / TypeScript適用範囲: 画面、コンポーネント、Service、状態管理、テンプレート、フォーム、テスト 1. 目的 本基準書は、Angular / TypeScript におけるコ…

はじめに Cypressでテストを書いていると、こんな疑問が出てきます。 モックしていないAPIでも cy.wait() できる？ 実通信の完了をどうやって待つの？ cy.wait(1000) ってダメなの？ 結論から言います モックしていなくても wait は可能です。 ただし、必ず…

はじめに Cypress でテストを書くとき、多くの現場でこうなります。 同じような一覧画面が大量にある 毎回テストを手書きしている 書き方がバラバラになる 修正コストが高い 特に業務システムでは、一覧画面・検索・詳細・CRUD が大量に存在します。 結論 …

はじめに Angular で構築された業務アプリに対して Cypress でテストを書く場合、 テストを書くのが遅い APIモックの扱いに悩む 画面変更でテストが壊れやすい といった課題にぶつかることが多いです。 特に一覧画面は数が多く、毎回ゼロからテストを書くの…

Django REST API + pytest + Moto + OpenAPI + Schemathesis 環境構築手順書 1. 目的 本手順書は、以下の構成をローカル環境で動かすためのセットアップ手順をまとめたものです。 Django REST API pytest pytest-django Moto による S3 / SQS モック drf-spe…

1. 前提 以下がインストール済みであること Python 3.11 以上 pip virtualenv（推奨） 2. プロジェクト作成 mkdir myproject cd myproject python -m venv venv source venv/bin/activate # Windows: venv\Scripts\activate 3. 依存関係インストール pip ins…

はじめに 企業におけるサイバーセキュリティ対策は、単なる技術課題ではなく「経営課題」です。 しかし現場では、以下のような課題がよく見られます。 脆弱性の件数だけを報告している 経営判断につながる指標が不足している リスクの全体像が見えない 本記…

クラス図とシーケンス図で理解するSPAドキュメント はじめに Angularで一覧画面を作ると、画面表示そのものは比較的すぐに作れても、少し機能が増えた瞬間に構造が複雑になりがちです。 たとえば、一覧画面では次のような処理がよく登場します。 初期表示で…

かつて XSS 対策として利用されていた X-XSS-Protection ヘッダ。 しかし現在の主要ブラウザではサポートが終了しており、むしろ 設定しない方が良いケースもある ことをご存じでしょうか？ 本記事では、現代のWebアプリにおいて推奨される実践的なXSS対策 …

AWS SES で HTML メールを送信する際、画像を どこから・どうやって配信するか は、以下に直結します。 メールの表示率 スパム判定リスク セキュリティ 運用のしやすさ 本記事では、既存の S3 バケットを流用しながら、 S3 を 非公開のまま CloudFront の Or…

HTMLメールを AWS SES で送信する際、画像をどのように配信するかは、表示率・到達率・セキュリティに大きく影響します。 本記事では、 既存の S3 バケットを流用 S3 は非公開のまま CloudFront + HTTPS で画像配信 Python + Lambda で SES 送信 という、実…

CodeStar Connections とは何か GitLab と AWS CI/CD を安全につなぐ仕組みを整理する はじめに AWS で CI/CD を構築する際、GitHub や GitLab といった 外部 Git サービスとの連携は避けて通れません。 以前は、 Personal Access Token を発行して CodeBuil…

複数リポジトリをブランチ指定で Build → ECR Push する構成（IaC対応） はじめに 複数のアプリケーションを Docker 化して運用していると、 リポジトリごとにビルド条件が違う ブランチを指定してビルドしたい 環境ごとに ECR の push 先を切り替えたい と…

リスク分析システムER図を読み解く ― なぜこの構造でなければならないのか ― 本記事では、**リスク分析システムのDB設計を表現したER図（PlantUML）**をもとに、 なぜこのテーブル構成になっているのか 各エンティティがどんな役割を持つのか どうやって「説…

まず最初に、本システムで必要となる画面を 役割別に一覧化します。この一覧を見ることで、 どのような画面が存在するのか 各画面が何のためにあるのか を一目で把握できます。 画面一覧（役割別） 画面区分 画面名 主な目的・役割 共通・入口 ログイン／認…

【結論】CVSSだけでは足りない。 「損害・脅威・攻撃」の3層で考えると、リスクは“説明できる”ようになる 脆弱性対応において、 CVSSが高い＝危険 という説明だけでは、開発チームや非セキュリティ担当にはなぜ優先すべきかが伝わりません。 そこで有効なの…

はじめに OSS を利用した Web アプリ開発では、**「どのリポジトリに、どんな脆弱性・ライセンス問題があるのか」**を開発者やセキュリティ担当が GUI で即座に把握できることが重要です。 本記事では、以下の前提で FOSSA の分析結果を GUI に表示するため…

0. 何を“自動化”するのか（目的を明確化） E2Eテスト作成には3種類の作業があります。 要素の特定（Selectors） 画面操作（Actions） 検証（Assertions） 量産を阻むボトルネックは主に①②です。だから自動化の本命は： ①②を“ページごとに土台として自動生成”…

フロントエンド開発において、「TODOアプリ」×「E2Eテスト」 は学習・実務の両面で非常に相性が良い題材です。 この記事では Cypress を使った TODO LIST のE2Eテストコードの実例を、実務でそのまま使える形で紹介します。 前提 Cypress が導入済みであるこ…

フロントエンドのE2Eテストを簡単に導入できる Cypress の最小構成・npm限定の導入手順をまとめます。 Angular / React / Vue いずれのプロジェクトでも共通で使えます。 前提条件 Node.js がインストール済み（LTS 推奨） npm が使用可能 プロジェクトのル…

テレワーク、クラウド、SaaSの普及により、「社内ネットワーク＝安全」という前提はすでに崩れています。 その流れの中で注目されているのが ゼロトラスト というセキュリティの考え方です。 この記事では、情報処理推進機構（IPA）が公開しているゼロトラス…