JavaScriptだけでWebサイト開発

node.js + Express + mongodb系 + React でサービスを作るメモ

node.js+React CMS を設計する(外部仕様)

nexpress(CMS名称)画面構成 f:id:ichi-bit:20171114122033p:plain

1. サイト画面構成

SSR(Server Side Rendering)にする

  1. トップページ
  2. 記事リストページ
    1. カテゴリ(サブカテゴリ)
    2. 検索結果
    3. タグ検索
    4. ランキング
    5. 新着
    6. その他条件リスト
  3. 記事本文ページ
  4. (ユーザープロフィールや固定ページ)

2. 管理画面構成

SPA(Single Page Application)にする

  1. Adminトップページ
  2. ユーザー登録
  3. ログイン
  4. ダッシュボード
  5. サイト管理
  6. デザイン管理
  7. ユーザー管理
  8. カテゴリ管理
  9. タグ管理
  10. 記事管理
  11. 編集
  12. プレビュー

3. 外部仕様

全画面共通

  • PC,tablet向け、SP向け(HTML,AMP)に表示できるようにする
  • PC,SPを分けるかレスポンシブにするか選択可能にする

サイト

  • 全ページ共通
    • ヘッダー
    • フッター
    • 広告のタグ類
    • その他全ページ共通表示要素
  • トップページ
    • 新着記事など様々な条件で抽出したリストを複数表示。指定した順にに表示される
    • 記事リストには記事のアイキャッチとタイトル、本文の一部、カテゴリ名が表示される
    • その他誘導するためのリンクを表示
  • 記事本文
    • 本文には以下の要素を含を含む
      • 見出し
      • 小見出し
      • 画像、画像キャプション、Youtube、Markdown、画像スライド、記事引用、リンク
    • 本文をページ分け
    • 記事のPVをカウントする
    • その他記事への誘導
    • SNSへの連携
  • 新着、ランキング、カテゴリ、検索、タグ検索記事リスト用途のページ
    • 各条件で抽出した記事リストを表示する

つづく

©ichi-bit