フロントエンドの開発

[nona-takahara]

データベース構造が決まれば（ See: #8 ）APIが確定します。少し先回りしてフロントエンドを進めていきましょう。

必要そうなページ

• ポータルトップページA（JoinとLoginとwhat is kstm?の2-3ボタン程度でよいはず。非ログイン状態で閲覧するページで、部外者も見る可能性があります）
• ポータルトップページB（NEW! 部内向けお知らせなどのページがあるとよさそうという指摘を受けて追加。ログインしていないと見れません）
• マイページA（名刺ページ。ログイン者本人のみ表示できて、本人確認を行う際に提示する目的で使用したい。設計によってはメンバーページと同じ内容になるかも）
• マイページB（各種情報の設定ページ。ログイン者本人のみ閲覧する）
• メンバーページ（ログイン者本人以外の人のプロフィールページ。このページを名刺などに掲載して、他人にアクセスしてもらう目的で設定しているため、ログイン不要でアクセスできることが望ましい（簡易ポートフォリオとしての機能を担わせたい）。誤った本人確認を行わないように、マイページAと一目で区別できる仕掛けが必須）

くらいでしょうか？

マイページA（仮称）・メンバーページ（仮称）はスマホ優先のレイアウトが望ましいと思います。ほかにアイデアがあればコメントお願いします。

[Holoscopecheck]

マイページAの見た目部分の提案

[nona-takahara]

表示「内容」について

• 大学の方の所属は表示しなくていいと思います
  • 所属についても、kstmロゴがあれば十分という認識
• 実名も表示せず、nicknameとidの方針
• 緑色の丸は何を意図したものですか？
• Homeは何を意図していますか？（ホームページ等へのリンクが欲しいのであれば、別途 データベースの設計 #8 でリクエストしてください）
• Bioの表示欄が欲しいです

表示方法について

• Home, GitHub, Mailが微妙に中央寄せになっていると思いますが以下のように変えたほうが見栄えがすると思います
  • 画面幅全体に対して中央寄せ
  • アイコンの右端から少し間隔をおいたところを基準に左寄せ

[Holoscopecheck]

ありがとうございます。

表示内容について

• 大学名は削除します
• nickname & id で行きます
• 緑色の丸も使う予定ないので消します
• Homeはトップページへの遷移を意図しているのでリクエストします
• Bioの表示欄追加します

表示方法について

• 了解です

[nona-takahara]

Homeはトップページへの遷移を意図しているのでリクエストします

トップページとは何のトップページですか？　リンクの置かれる位置的に、member-portalのトップページなら別の動線の方が良いと思います。（その場所はユーザーに関するリンクが集約されているイメージです）

[Cyndaquil1999]

マイページをトップページ扱いするって事でしょうか？

[Holoscopecheck]

@Cyndaquil1999
はい
URLを踏む=>ログイン画面=>マイページのような流れを想定しています

[Cyndaquil1999]

@Holoscopecheck
その運用であれば、マイページにHOMEを付けると以下のようになるので、冗長だと思います。
HOMEではなくてログアウトボタンをやるなどすれば良さそうです！

1. HOMEを押す
2. マイページに遷移する（リロード扱い？になる）

[Holoscopecheck]

@Cyndaquil1999
ありがとうございます。
HOMEボタンは挙動を考えると必要ないので消そうと思います

[Nlkomaru]

個人的にはポータルトップページには、今後作成されるであろうサークル内製サービスへのリンクや、お知らせの表示などのほうが良いと思います

[Holoscopecheck]

@Nlkomaru
そのお知らせというのは、部員向けのものを想定していますか？
もし外部に向けたものであれば、私は既存のホームページにお知らせ等を載せるのがいいかと思います

[Holoscopecheck]

修正しました、確認お願いします。

提案
・名前の右横にステータスアイコン（上画像は適当な画像）を追加

[Nlkomaru]

@Nlkomaru そのお知らせというのは、部員向けのものを想定していますか？ もし外部に向けたものであれば、私は既存のホームページにお知らせ等を載せるのがいいかと思います

部員向けを想定しています

[Holoscopecheck]

@Nlkomaru
連絡遅くなって申し訳ないです
部員向けの情報載せるの賛成です。デザイン作ります

[Holoscopecheck]

トップページのデザイン案です。

• 真ん中の黄土色のフレームにお知らせのサムネイルを入れる予定です
• フレームの左右の黒三角ボタンで見るお知らせを変更する予定です

[nona-takahara]

以前口頭でお話した内容を再掲します

• ページごとにだれが見るかを意識してデザインしてください（この後、Issueの最初の投稿に「誰が見るか」を明記します）
• ある程度まとまってきたタイミングで画面遷移に関する図が欲しいです。どのボタンを押したらどの画面に遷移するかがわかりやすいものを希望します

[Holoscopecheck]

@Nlkomaru
一点質問なのですが、フロント側は現状すべてのページにおいて
{
"sub": "kstm_user",
"nickname": "かすたむ",
"picture": "https://example.com/user/kstm_user/picture",
"email": "[email protected]"
}
このデータだけGETできるという認識であってますか？

[Nlkomaru]

現状、そのデータのみ取得できるという認識であっています。
必要な情報があれば以下のデータについては保管されているので追加はできますが、OIDCによってほかのサービスにもわたることを考慮する必要があります。
#8

[Holoscopecheck]

ありがとうございます。

[Holoscopecheck]

フローはこのようになります。