【綱】フロントからのアクションはどんなものがあるのか。どんなルーティングが必要なのかリスト化する

[ymzk-jp]

一覧画面

- [ ] プロダクトの画像を押されたときにプロダクトの詳細ページへ移動

• 残りの投票回数
• 一覧画面を読み込んだときにプロダクトの画像のパス、リーダーの名前、学科、学年を表示
• プロダクトごとのリーダーの画像のパス
• プロダクトごとのライクの数

詳細画面

• お気に入り登録ボタン（お気に入りしているときはお気に入り解除）

  • お気に入りが押されているのか判断も必要？

• お気に入りの数

• プロダクトの画像のパス

• 残りの投票数

• プロダクトのコンセプト

• プロダクトメンバー全員のプロフィール画像のパス

• プロダクトメンバー

• 全員のコメント
  - [ ] プロダクトの一つ前と後に移動するボタン
  - [ ] 投票ページへ移動するボタン

• プロダクトのサブ写真（下にある５枚ほどの小さい画像）

投票画面

• ファッションとビューティーごとの残り投票回数
• ファッションとビューティーに投票したプロダクトのリーダーの学科、名前、学年、作品コンセプト
  - [ ] 投票したプロダクトの詳細ページへ移動
• 残りの投票回数

[fumihumi]

Q & A

1. インセンティブありならユーザーを特定する必要がある。特定するために恐らく固有の番号をなんらかの方法でユーザーに入力してもらう必要がある。投票権が5つあったら5回入力してもらうのは負担が大きいので一度にまとめたい。
   1-1. 投票を取り消す場合は5票とも取り消す必要がある？
   1-2. まとめて投票する場合、お気に入りではなく投票候補のように投票が済んでいないことを暗示する表記の方が親切ではないのか

ユーザに入力してもらう場合だと実装コストも含めユーザ側も管理も大変になってしまうので

• 初回投票時にサーバー側でランダムな文字列を生成してResponseに含める
• それを投票完了時にモーダルでひょうじする
• 2回目以降はそれを送るようにする�
• 投票一覧ページにて↑のハッシュを確認可能にする

はどうでしょうか

• 取り消しに関しては１つずつ取り消してもらいます。
• まとめて投票するってのは現状の考慮できてないですね、。。。ありがとうございます！

---

2. ファッションで５票、ビューティで3票で間違いないか

• 今の所それです！
• ただ先方と相談って形になるかと！

---

3. ファッション5つ、ビューティ3つ集めた後まとめて投票する場合、投票アクションは何回行われるのか。一度なのか二度なのか、それ以上なのか
   3-2. 合計８票はなかなかつらいのでは？

MAX8回ですね。ただ任意数なので0回の可能性もあります。

---

4. 投票権が5つだった場合、それ未満の数を選択した投票は可能なのか。例えば4票だけ投票したいなど

３に被りますが可能です。

---

5. 全員のコメントを貰う予定なのか
   もらえるならもらいます！。（使うかどうかはその量によって変動する可能性もあると思ってます。）

---

6. ライクは無制限押し放題プランでよろしかったのか
   押し放題プランでいいと思ってます！
   ただ、お気に入り一覧ページがない状態でこのまま進むか悩みます。

---

7. 「投票したプロダクトの詳細ページへ移動」とあるが、どういう意味なのか。投票済みだけを集めたページが存在するのか
   王冠をおすと投票済みページへ飛びます。

---

8. プロフィールの画像はメンバー全員分用意できるのか
   してもらう予定。。無理だったらTwitterのデフォアイコンみたいなので代用するかぁ。。w

---

9. お気に入り画面が上のリストにない
   お気に入りした一覧が抜けてますね。
   機能としてつけるのかどうかも含めて再検討します。

[ymzk-jp]

トップページ

/

react側の処理

1. topページ（/）を読み込む
2. reactがhtml,css,jsを読み込む
3. jsがexpressにget通信

express側の処理

1. app.get("/",
2. dbからファッションのプロダクトの[ヘッドショットのpath（photos.の1番目）、代表者名、代表者学科、~~代表者学年（全員２年だろうからいらない）~~、代表者顔写真のpath（students.profile_photo_url）プロダクトごとのいいねの累計値、プロダクト番号、ジャンル、作品タイトル]を探す
3. 2の作業をプロダクトの数だけ行う
4. 全てをjsonに固める
5. application/jsonでreactに返す

react側の処理

1. reactはjsonを受け取る	
2.受け取った情報を元にレンダリングを始める
3. 画像pathを加工してS3に画像を要求する
4. 受け取った画像を適切な大きさにして配置する

諸事項

→終了後、redisやcloud frontなどを使ってキャッシュさせる
→express側との通信は10件ずつ行った方がいいのか
→一番ユーザーの不快度を下げる方法が望ましい
→beauty側の情報はbeatyタグに繊維した時なのか、/にアクセスした時なのか（fashionが優先される）
→jsonで渡す予定なのはS3の画像パスなので適宜ドメインを付けてリクエストしてほしい
→顔写真などは予め加工しておいても良さそう
→よく使う情報、画像は予めwebpackしておくほうがいいのでは？

[ymzk-jp]

詳細画面

/products/:id

react側の処理

1. topページ（/products/:id）を読み込む
2. reactがhtml,css,jsを読み込む
3. バンドルされたhtml,css,jsをレンダリングする
4. 一部のjsがexpressにget通信

express側の処理

1. app.get("/products/:id)を受け取る
2. idを解釈する（このidはproducts.id）である
3. プロダクトの情報をDBから取得する（プロダクトid、タイトル、コンセプト、ジャンル、代表者名、代表者学科、作品メッセージ、プロダクト写真のpath全てが入った配列、いいねの数、メンバー全員の名前、メンバー全員のメッセージ、メンバー全員の顔写真のpathが入った配列）
4. jsonに固める
5. aplication/jsonでreactに返す

react側

1. reactはjsonを受け取る
2. 受け取った情報を元にレンダリングを始める
3. 画像pathを加工してS3に画像を要求する
4. 受け取った画像を適切な大きさにして配置する

諸事項

→→終了後、redisやcloud frontなどを使ってキャッシュさせる
→画像のサムネイルは必要か？
→例えばそのプロダクトの画像の合計が5枚である場合、大きな画像1枚サムネイル5枚を返しスライダーを動かすたびに大きな画像を取得する実装なのか、一度に大きな画像5枚送るのか（サムネイルなどは大きな画像を縮尺表示させる）

[ymzk-jp]

いいねを受け取った時

/products/:id/like

react側

1. いいねボタンが押される
2. jsがexpressにpost通信

express側

1. app.post("/products/:id/like"を受け取る
2. idを解析する
3. いいね蓄積テーブルにproduct_idを挿入する

• 最低限のインクリメント処理は上記の通りである

もしインクリメントした値を返す場合は下記に続く

4. いいね集計テーブルからプロダクトidに紐づく最新のレコード1件を取得する
5. プロダクトid,累計いいね数をjsonにする
6. application/jsonにして返す

react側

1. 値を受け取る
2. 累計いいね数を画面に反映させる

諸事項

→いいねは無限に押せる
→いいねは取り消すことができない
→いいねの値が更新されるタイミングは未定義である。しかし概ね以下の３種類であることが予想できる

1. いいねが押されてサーバーから処理が返って来た時
1. 定期的にサーバーに問い合わせた時
1. 画面遷移した時の３首里）

→個人的には、いいねが押された時はフロント側で即時インクリメントされた様に見せかける（サーバー側の値は待たない）。画面を開いている間サーバーに定期通信を行い値を更新する。画面遷移があった時全ての値を取得する。がよいと思っている
→定期的に送る場合、別途ルーティングを用意した方がいい。全プロダクトのいいねをそれぞれ返す