「記録カードをクリックするとその記録の詳細を見ることができる。」の実装についての考察
_done記録の数値表示に適切なフォントを選び抜く。 _doneサーバーサイドで受け取った記録を(1)につなげて、完全に自動生成されることを確認する。 _APIへリクエストを送信する部分について、コードを分離する _GETリクエストでURLに記録IDを露出させられないかparty.icon そうするとSNSで共有しやすくなる
_Twitter,Youtubeの動画表示に対応する。 データ型の定義
このページに遷移する条件
これに対応するIRecord型オブジェクト一つ(以下clickedRecord)が、これから処理をする上での与えられた情報となる。 これらのonclickイベントリスナーはそれぞれfetch関数を実行することが出来る。
記録管理するためにクラスを作ることも考えたけど、今回はページの「状態」はそこまで重要にならないので、つくりをシンプルにするために関数のみで実装することにする。
思えばタグそれぞれにもクリックイベントを追加してやらなくてはならない
表示する情報は何か
記録の詳細情報
この時、サーバーから取り寄せる際に必要となる情報はclickedRecordのidのみでよい。
クリックしたときにサーバーにリクエストを送りたい。 このとき、clickedRecord内のレギュレーション情報(IRegulation型)をそのまま検索条件にしてやったものをデータとして取り寄せる。 万が一当てはまった記録が多すぎた場合のために記録の個数制限を30個(...たぶん。)として設ける必要がある。 二つのリクエストを送る必要がある！
並列してPromise処理が望ましい？(Promise.allとか)
表示するのに必要な要素。
Twitterのwidject.jsを利用した、ツイートウィジェットを表示する。
APIの利用許可が手に入った時には直接動画データを取ってきたい
あるいはYoutubeAPIを利用した、Youtubeの動画欄
これらの実装は旧STASpeedrunのそれが参考になるはず。
ただし、どのようにしてmoduleに収めるかが難しい。ソースコードをダウンロードして、モジュールとして読み込めばちゃんと利用できる？
残念ながら@types/widget.jsは存在しない。
それらの下に引用元となるリンク。
この図中のリンクアイコンをFontAwesomeから探してくる必要あり。
タグ一覧。
最低限の情報を示すタグは既にCSSとして作ってるのでそれを再利用すれば良さそう。
追加しなくてはならないのはユーザーが好き勝手に追加できるタグと走者を示すタグ。
走者ノート
markdownに対応出来たらうれしい
そして下に走者記録が続く。
https://gyazo.com/fa2fc7e2ddae0a720dbfb4c009fafefc