Skip to content
This repository has been archived by the owner on Oct 9, 2021. It is now read-only.

Latest commit

 

History

History
148 lines (100 loc) · 7.14 KB

README.ja.md

File metadata and controls

148 lines (100 loc) · 7.14 KB
Raw

Nogizaka Lib

README: English, 日本語

Nogizaka Lib は乃木坂 46の情報をわかりやすく提示する React ベースのウェブアプリである。

本アプリのリンク: https://shawnrivers.github.io/nogizaka-lib/

開発環境構築

必要なパッケージをインストールする：

npm install

アプリを起動する：

npm start

技術

  • SPA フレームワーク: React
  • ステート管理: Redux
  • JavaScript: TypeScript
  • CSS: Sass, CSS modules
  • バンドラー: Webpack
  • コンパイラー: Babel
  • リンター: ESLint
  • テスト: jest, enzyme
  • アニメーション: react-transition-group
  • 他: react-lazyload

機能

  • CD リストページ
  • CD ページ
  • 楽曲ページ
  • メンバーリストページ
  • メンバーページ
  • 検索ページ（TBD）

CD リストページ

Cd List Page 1 Cd List Page 2

CD リストページ は CD カードのグリッドを表示する。任意の CD カードをタップ・クリックすると、それと対応する CD ページ に遷移できる。

CD ページ

Cd Page 1 Cd Page 2

CD ページ は CD の詳細情報を表示する。

画面上部のジャケット写真（以下「ジャケ写」と略す）の部分がスワイプ可能になっており、スワイプすることで CD の各タイプのジャケ写が見られる。

収録曲のカードのリストがジャケ写の下に表示される。任意の収録曲カードをタップ・クリックすると、それと対応する 楽曲ページ に遷移できる。

楽曲ページ

Song Page 1 Song Page 2

楽曲ページ は楽曲の詳細情報を表示する。

画面上部のジャケ写部分では、この楽曲が収録されている CD のジャケ写が表示される。

ジャケ写の次には、楽曲の種類や収録されている CD、作詞や MV 監督などのクリエイターの情報が表示される。

さらに、楽曲のパフォーマンスに参加したメンバー及びそのフォーメーションもこの画面に表示される。任意のメンバーカードをタップ・クリックすると、それと対応する メンバーページ に遷移できる。

メンバーリストページ

Member List Page 1 Member List Page 2

メンバーリストページは、メンバーカードのグリッドを表示する（1 期生から 4 期生、卒業生）。任意のメンバーカードをタップ・クリックすると、それと対応する メンバーページ に遷移できる。

メンバーページ

Member Page 1 Member Page 2

メンバーページ はメンバーの詳細情報を表示する。

プロフィール写真の後ろにあるグラデーションは、メンバーのサイリウムカラーを表す。

プロフィール写真の下には名前・サイト・SNS アカウント・誕生日・出身地などのプロフィール情報が表示される。

写真集/Photo Books の部分にはメンバーの写真集とフォトブックの情報が表示される。

Position History では、今までのシングルの立ち位置が表示される。

  • C: Center（センター）
  • F: Fukujin（福神）
  • S: Selected（選抜）
  • U: Under（アンダー）

Position Counter では、上記のそれぞれの立ち位置にいた回数かがカウントされて表示されている。

  • 注： 実際では、「センター」 は 「福神」 と 「選抜」 両方にカウントすべきで、「福神」 は 「選抜」 にカウントすべきだが、ここでは表記の都合上、 「福神」 を 「センター」 の回数を除き、「選抜」 を 「福神」 の回数を除いた結果を表示している。つまり、厳密な 「福神」 の回数は表記の C + F の結果であり（ここでは、4 + 7 = 11）、「選抜」 の回数は C + F + S である（ここでは、4 + 7 + 5 = 16）。

Gallery では、メンバーの今までのプロフィール写真が表示される。

ファイル構造

コンポーネント構造は Atomic Design を参考にしている。

src/

アプリケーション

  • apis/
    • API クライアント
    • API リスポンスの型定義
    • API からのリスポンスをクライアントが必要な形に変換する
  • components/
    • atoms/
      • 一番小さいコンポーネント単位、単純な HTML 要素が多い
      • e.g. ボタン
    • molecules/
      • 一個の機能を持つ比較的に簡単な UI コンポーネントの集まり
      • e.g. CD カード、ナビゲーションバー
    • organisms/
      • molecule か atom からなるより複雑な UI コンポーネント
      • e.g. CD カードリスト
    • templates/
      • ページ単位
  • containers/
    • template がグローバルステートとつないだもの
    • 機能単位で分割を行っている
      • /Cds
      • /Members
      • /Songs
    • それぞれの機能の reducers 、actions と selectors
  • stores/
    • ストアの初期設定
  • utils/
    • アプリ横断で使われている関数
  • models/
    • グローバルステートの型定義
  • styles/
    • Sass の変数やテンプレート

Data

このアプリで使われているデータが全て Nogizaka-lib Data のリポジトリーにホスティングされている。

Profile images and CD artworks © 乃木坂 LLC.