tech-creative-club / disaster-platform

災害時情報収集Platform

https://main.info-relay.pages.dev/

MIT License

16 stars 6 forks source link

フロントエンド案・モックアップ #7

Open suguru-toyohara opened 9 months ago

suguru-toyohara commented 9 months ago

概要

フロントエンドの案を作って欲しい
3 を基に考えて欲しい

考えたこと

Next.jsとかって、SSRのフレームワークだけどそれって必要？
クライアントサイドで動く静的なSPAファイルを作って仕舞えばそれで良くないですか

考えて欲しいこと

フロントエンドとしてベストな選択はどこ？
「災害用」という観点でどうなの？
「スパイク耐性」という観点でどうなのか
「バックエンド切り離し」という観点でどうなのか

やって欲しいこと

ReactかNext.jsかどっちにするかは有識者が決めてほしい
ガンガンUI作って欲しい
今のボーナスタイム中に好きなように作ってもらった方が良いかも。

suguru-toyohara commented 9 months ago

管理者用UIについて

基本的に、管理者用、投票用、閲覧用のUIがある
管理者用だけスパイクしないので、ログイン機能はあって当然良い
また、管理者用UIだけはスパイクしないことから、Next.jsがおすすめかもです。

TKomi commented 9 months ago

Discord名: とまとです

フレームワークの検討

選択肢

SPA(React, Vueなど)
- 実行時にサーバーへの負荷はかからない→スパイク耐性○
- JavaScriptががっつり動作する環境が必要なので比較的新しいスマホ・タブレット・PCが必要となる古い端末や特殊な端末(ゲーム機とか)はちゃんと動くか疑問
- クライアントにアプリをダウンロードしたら以降はバックエンドとの通信はデータのみ
SSR(Next.js, Nuxt.jsなど)
- 実行時にサーバーへの負荷がかかる→スパイク耐性△
- 予め成形されたHTMLを吐き出すので古い端末でも動きそうでもマップをぐりぐり動かすとかやるなら結局JavaScript動く必要あり
ネイティブアプリ
- 要件でWebベースとあるので選択肢から外す

フレームワーク関連その他

管理者用・投票者用・閲覧者用の3つのUIがあるが、フレームワークと言語は1つに統一するのがよさそう
- バラバラだと使いこなすのが大変で、メンテする人員の確保がしづらいため

言語の検討

TypeScript

モダンでかっこいい印象あるけどできる人はJSの方が多そう

業務要件が複雑なら型の制約があるとうれしいが、今回はそんなに複雑でもなさそう
JavaScript

TSより入門しやすくコーディングできる人が多いので自分の意見ではこちらで十分だと思います

TKomi commented 9 months ago

地図ライブラリの検討

Google Maps
- ぐりぐり動かせるやつと、静的マップがある
- ピンの配置などは可能
  - ピンが密集しているところはクラスタとして表示できる
  - カスタムマーカーも使える
- お金がかかる
  - 利用量に応じてお金が変わるので、平時はあまりかからず、有事は結構かかる
  - 公共性の高い利用者には、料金が割り引かれる制度がある
- 個人的な意見では、(利用者目線で多くの人が)使い慣れているためこちらがおすすめ
OpenStreetMap
- 無料
- FourSquareなど有名なプロダクトでの利用実績も普通にある
- ピンの配置は可能
  - カスタムマーカー使えるか不明(FourSquareで実現できているし使えるかも)
- ドキュメントはGoogleMapよりは少ない(外部のブログ記事など含め)

suguru-toyohara commented 9 months ago

@TKomi とまとさんありがとうございます！情報助かります。

5 でも話しているんですが、投票はSSGで、閲覧はSSRが良いのではという意見になっています。