[front coding guideline]一応作っておく

一個作っておいて、追加/加筆することで、ノウハウを蓄積していく。

## 目次
– 方針
– マークアップ(HTML)
– スタイルシート
– 画像スライス
– SP対応
– フォーム
– その他
– 表示速度の改善
– その他

### 作っていく中で気になった点
ID・Class名
L 原則としてBEM+FLOCSSのルールに従って命名

CSS プロパティの順序

box-sizing
margin、padding
width、min-width、max-width
height、min-height、max-height
background、background-color、background-image、background-repoeat、background-position、background-size
border、border-width、border-style、border-color、border-radius
outline、outline-width、outline-style、outline-color
table-layout、border-collapse、border-spacing、empty-cells、caption-side
box-shadow
list-style、list-style-type、list-style-image、list-style-position
overflow
opacity、visibility
display、box-flex
float、clear
position、top、right、bottom、left、z-index
color
font-size、font-weight、font-style、line-height、letter-spacing
text-align、text-decoration、text-shadow
vertical-align
content
zoom
その他

フォント周りの単位指定
L font-size:remで指定

PNG-32(24)
L 透過色がある画像に使用

画像ファイルの圧縮
L compressor.ioを使う

ちょっとずつクオリティを上げていきたいですね。JSの最新版の書き方もやっておかないといけないな。
よし、次行こう。Next:テストコードの書き方

Djangoで販売管理システムを開発していくロードマップ

– 今回はDjangoを学習するのが目的の一つでもあるため、設計書はざっくりと作る
– 販売管理システムは財務会計システムとの連携(ERP化)を見据えて作る
– できればRPA、機械学習、Docker、レジシステム連携、ECサイトのAPI連携、ラズパイ/Arduino連携を盛り込みたい
———–
1.全体
 1-1. 何故、販売管理システムを導入するか?
 1-2. 販売管理システムで出来る事(後から作る)
2. システム要求
 2-1. 機能要求
 2-2. 競合のシステムとの差別化
 2-3. 財務会計との連携(後から作る)
3. 基本設計
 3-1. 業務フロー
 3-2. ユースケース
 3-3. 機能詳細
4. 外部設計
4-1 システム概要図
 4-2 インフラ構成図
 4-3 ハードウェア構成図
 4-4 ミドルウェア構成図
5. UI設計
 5-1. URL一覧
 5-2. 画面遷移図
 5-3. 画面定義(別紙)
 5-4. メール設計
 5-5. バリデーション
6. 詳細設計
 6-1. MVC構成図
 6-2. シーケンス図
 6-3. コントローラ処理
 6-4. バッチ処理
 6-5. その他

設計書はサクッと作ろうと思ったけど、最低限の事はちゃんとやろうと思うとそこそこのボリューム感になってしまうな。

要件定義書、外部設計、内部設計

■要件定義書
– システム概要(何をするシステムなのか、どうしてそのシステムが必要なのか、そのシステムの目的は何か)
– システム構成図(システム概念図、業務フロー、ユースケース図)
– 機能要件(システムの機能一覧、各機能の詳細)
– 入出力要件(入力データ一覧、各入力データの詳細、出力データ一覧、各出力データ詳細)
– 非機能要件(セキュリティ要求、品質・性能要求)
– その他(概略スケジュール、ステークホルダー相関図)
■外部設計
– システム概要
  — シナリオ
  — ビジネスロジック
– システムの構成
 — システム構成図
— 業務フロー・アクティビティ図
 — ハードウェア・ソフトウェア構成図
 — ネットワーク構成図
– 機能一覧表
– データベース仕様
— ER図
— テーブル定義書
– UI設計
— 画面遷移図
— 画面レイアウト設計図
– その他
— 開発体制
— 開発スケジュール
— プロジェクト管理ツール
■内部設計
– 機能分割説明
— クラス図
– データフロー
— DFD図
– モジュール詳細
— モジュール名
— 役割
— 引数・戻り値
— 処理概要
— 備考

なんか、げっそりするな、見ただけで。

Think about development quotation

development quotation
– Implementation
– Additional man-day or man-hour
– Unit Test
– Source Review
– Combined Test
– Release man-day
– Procedure preparation

Difference between external design and internal design
– external design
— system function, performance, condition
– internal design
— operation, function, physical data inside the system

Development process detail

How to put together development process. Here is a sample of document to create.

– Request definition
– Business flow
– Screen transition diagram
– DFL
– Screen design
– Screen definition
– ER diagram
– DB table definition

If there is batch processing, also add batch processing. Let’s see the details.

This is so called Excel Engineer.