【meigen.life】【step1】Slide機能Only

Slide機能だけあるサイトを作る

機能

名言データからランダム順序の名言スライドを作り、1枚1枚捲れる

規律のある美しいレイアウト

コア機能実装について思考

hr.icon

全データをランダムな順序でロードしたい

背景

ユーザーが毎度毎度同じ順序で名言を見てしまうと飽きる。

アクセスするたびにランダム順序でデータを見れるようにすることで飽きを防ぐ。

毎度何かアクセスしたら刺激があるという状態にしたい。

実現可能性：全然ある

前提：

名言のIDは連番で保存される

候補

全データに関するIDリストをクライアント側に持たせさえすれば、あとはクライアントから徐々にデータをfetchできる。

2. サーバー側で10~20個くらいのランダム順序セットを作っておき、ユーザーにはそのうちのどれかを提供する

完全なランダムを提供できないのが痛いところ。これは避けたい。高頻度ユーザーに通用しない。

具体的な方法はそうだな。リクエスト情報は以下のような形になるだろう。

これで、ステートフルっぽくできる。

3. urlにseedとoffsetを混ぜてリクエストする方法

これもありかも。

「1.」との違いは、クライアントはデータ取得に徹することができるってこと。

結論

クライアント側でIDリストを持つ形にするか。つまり「1.」の方法。

閲覧履歴とかをlocalStorageで持たせて、見てない名言を優先的に表示したい場合とかも対応できそうだ。

思考Log

1リクエストで全データを渡すわけにはいかない。相手が4Gとかなら尚更OUTかな？

どうだろう...待てよ。

どれくらいのサイズになるやろ。

asciiエンコードなら。

まず、1000個程度のデータなら、idを連番にしておいて、それをランダム順序にしてクライアントに渡し、クライアントはそのidリストを元に適宜データをloadingすればいい。

10,000個となると少し大きくなる。

こうなるとランダム順序の全データのidリストをクライアントに渡すための方法は考えることになる。

クライアントはhtmlを受け取ったあと、裏側でランダムシードからサーバーが作ったランダム順序のidリストを生成する。

そのidリストを使って、段階的なフェッチができる状態にする。

また、ユーザーがidを作らない連番形式のデータ保管なら、なおのことやりやすい

機能

リクエストを出したら、ランダムなid序列で最初の10個くらいをhtmlにレンダリングした状態で返してる。