この記事は 驚異のFANZA女優検索 Advent Calendar 2021 の 18 日目の記事です。
#パンくずリスト
パンくずリストを作ろうと思った。理由の一つはTwitterのツイートで作品ページに直接飛ぶという導線が出来たため。最初作ったときは作品ページから始まる前提がなかったため戻るボタン以外の移動を考えていなかった。ナビゲーションバーを使えばTOPや検索も使えはするが、女優ページに戻す導線はない。そこでパンくずリストを作れば作品ページから女優ページに移動することが出来るようになると思って作った。
#パンくずリストは見た目が階層表現
パンくずリストを作るにあたって、見た目が気になった。パンくずリストは、フォルダのように階層構造になっているように見える表現だ。
トップ / 女優 / 作品
しかし実際にデータは階層構造にはなっていない。もちろんデータとビューが同じである必要は必ずしもないが、これを機に見直してみた。
#URLも階層に
URLは女優と作品は兄弟つまり同じ階層表現になっていた。actressとproductは同じ階層。
[Route("/home/actress")] //女優のページ
[Route("/home/product")] //作品のページ
そこでルーティングを以下にした。
[Route("/actress/{id}")] //女優のページ
[Route("/actress/{actressId}/product/{id}")] //作品のページ
これでURLも階層になった。つまり作品のページのURLからproduct/{id}の部分を削れば女優ページに上がれるようになった。エクスプローラーでも上の階層に上がりたいときに手動でパスを切るのはよくやることだと思う。それが可能になった。
#ルーティングを変えた場合のリダイレクト
URLのルーティングを変えたので、以前のURLをリダイレクトするにはどうすれば良いかちょっと悩んだ。結論から言えば両方のルーティングを書いておくだけで良い。つまり以下のようにしておくだけで、以前のURLが来ても新しいURLが来ても結局同じページが表示される。特にリダイレクトする必要もない。このページの中でリンクなどから他のページに遷移する時は既に新しいページのリンクになっているはずなので、これで問題ないと思う。
[Route("/home/actress")] //女優のページ
[Route("/actress/{id}")]
public async Task<IActionResult> Actress(int id, int page = 0, string count = "")
#データも階層に
データベースのデータは女優と作品は親子関係にはなっておらず兄弟関係だ。もしデータが親子関係ならば例えば1本の作品に3人の女優が出演している場合、それぞれ女優ごとに作品データを作る必要がある。その場合まったく同じ内容なのにデータ量が3倍になってしまう。そこで親女優と子作品のIDだけのデータを作って、そこをみるようにした。これで実データは1個だけど、階層とすることができる。
#データは最低限で、URLは最大限、ページの差異はパンくずリストのみとなる
具体的には女優3人で同じ作品に出ている場合パンくずリストは以下になる。
トップ / 女優A / 作品X
トップ / 女優B / 作品X
トップ / 女優C / 作品X
データとしては女優3人分で作品は1作品分。3作品のページの差異はパンくずリストの女優の所だけであとは一緒。これで実際の作品数は大体20万だが、URLは50万以上になった。データが増えるとパフォーマンスなどにデメリットがあるが、URLが増えることにはあまりデメリットはないし、そのサービスの情報量の多さに繋がるので、むしろメリットだと思う。
#ページ移動を立体的にできるように
パンくずリストを作って階層を上がれるようにしたが、パンくずリストはあまり大きくしてしまうと邪魔だと感じたので小さくしてある。そうするとそもそも気づかない人もいる。そこで、さらに作品の画面下部に、その女優の前の作品と次の作品と女優のページにも飛べるリンクを作った。導線として親に上がることも兄弟に飛ぶことも出来るようになった。ページが点だと、兄弟に飛べれば線、親に飛べれば面になる。この立体的にページを飛べるような仕組みは結構重要だと思ったのでさらに広げていきたい。