10/23

なろらんサーチを作ってみる

はい、ということでやっとメイン機能ですね。今回はランキングの検索部分を作っていきます。

作業としては以下です。

- レイアウトを決める

- 作品を並べる

- 並べ替えする

- 検索させる

- 期間、ジャンルの拡張

--- レイアウト ---

まずは小説表示レイアウトを決めましょう。

これは色々なサイトを参考にしてから決めたいと思うので、色々なサイトのランキング画面を見ていきましょうか。

なお、基本的にスマホでの見え方を参考にしています。作品は適当に各小説投稿サイトでのランキングから取得したものを載せています。

小説家になろう

カクヨム

エブリスタ

アルファポリス

ハーメルン

ノベルアップ+

他にも色々と調べたけど割愛。

色々なレイアウトがありますが、大体共通項目はありますね。

並べてみて思ったのは、派手な色使いとか大きさはちょっとみにくいかなって思いました。色数もあんまり多いとどれを見たらいいかわからない感じ。文字サイズはタイトル以外はそこまで大きくなくていいかもしんない。

上位のサイト見る限りシンプルにするのが良さそうです。とりあえずカクヨム、なろう、ハーメルン、あたりを真似してみます。

あとAmazonみたいなレビュー★数あると面白そうなので入れてみます。

こんな感じのブロックに分けて表示させます

みたくないブロックは消せるようにもしておきます。

ということでこんな感じのレイアウトかな。

あらすじは正直1000文字まで表示しても読まないので、150文字くらいに削ります。興味があれば小説ページへ行ってって感じ。

情報たっぷり詰め込みました。

--- 並べる ---

あとは、これをリスト化させるわけですが、これも便利なライブラリがあるので使います

List.js

https://listjs.com/

並べ替えや検索もしてくれる優れもの。ページネーションも付けられます。

NovelList = new List('js-cont', options, json_calc);

指定した要素のところにjson形式のデータをoptionとともに放り込むだけで自動でリスト化してくれます。

超便利！

--- 並べ替え ---

では並べ終わったので、次はソートできるようにしていきます。

ソート項目を用意します。

<option value="js-rank_rev" selected>ランキング順</option>

<option value="tl">タイトル文字数の多い順</option>

<option value="tl_rev">タイトル文字数の少ない順</option>

<option value="u">ユーザーIDが新しい順</option>

<option value="u_rev">ユーザーIDが古い順</option>

<option value="l">文字数の多い順</option>

<option value="l_rev">文字数の少ない順</option>

<option value="js-ka">会話率の高い順</option>

<option value="js-ka_rev">会話率の低い順</option>

<option value="js-ahp">平均★数の高い順</option>

<option value="js-ahp_rev">平均★数の低い順</option>

<option value="al">1話の平均文字数の多い順</option>

<option value="al_rev">1話の平均文字数の少ない順</option>

<option value="js-gf">投稿日が新しい順</option>

<option value="js-gf_rev">投稿日が古い順</option>

<option value="js-gl">更新日が新しい順</option>

<option value="js-gl_rev">更新日が古い順</option>

<option value="ga">話数の多い順</option>

<option value="ga_rev">話数の少ない順</option>

<option value="imp">感想数の多い順</option>

<option value="imp_rev">感想数の少ない順</option>

<option value="r">レビュー数の多い順</option>

<option value="r_rev">レビュー数の少ない順</option>

<option value="ap">累計ポイントの多い順</option>

<option value="ap_rev">累計ポイントの少ない順</option>

<option value="f">ブクマの多い順</option>

<option value="f_rev">ブクマの少ない順</option>

<option value="a">評価ポイントの多い順</option>

<option value="a_rev">評価ポイントの少ない順</option>

<option value="ah">評価者数の多い順</option>

<option value="ah_rev">評価者数の少ない順</option>

<option value="dp">日間ポイントの多い順</option>

<option value="dp_rev">日間ポイントの少ない順</option>

<option value="wp">週間ポイントの多い順</option>

<option value="wp_rev">週間ポイントの少ない順</option>

<option value="mp">月間ポイントの多い順</option>

<option value="mp_rev">月間ポイントの少ない順</option>

<option value="qp">4半期ポイントの多い順</option>

<option value="qp_rev">4半期ポイントの少ない順</option>

<option value="yp">年間ポイントの多い順</option>

<option value="yp_rev">年間ポイントの少ない順</option>

</select>

まぁとりあえず並べ替えできそうなものを並べてみました。

まぁ確実に使わない項目もあるだろうけどいいかな。なんかすげー、感が大事。

それを動かしたら、js内のやつを並べ替えるようにします。

if(sortDesc.indexOf('rev') !== -1){

NovelList.sort(sortDesc.replace('_rev', ''), {order: 'asc'});

}else{

NovelList.sort(sortDesc, {order: 'desc'});

}

昇順と降順はvalのrevで判定させてます。

--- 検索 ---

次、検索部を作ります。

検索は色々とできますが、必要そうな項目だけ抜き出します。

- キーワード

- 種別

- 文字数

- タイトル

- ユーザー

- 投稿

- 更新

- ポイント

こんな感じかな。他にも感想とかレビューとかもあるけど基本的にポイントと相関あるので割愛。

とりあえずこれで様子見ましょう。

検索フォームを作ってOKです。

--- 期間、ジャンル拡張 ---

あとはジャンルと期間別も用意しましょう。

</select>

<option value="101">異世界恋愛</option>

<option value="102">現実世界恋愛</option>

<option value="201">ハイファンタジー</option>

<option value="202">ローファンタジー</option>

<option value="302">ヒューマンドラマ</option>

<option value="306">アクション</option>

<option value="307">コメディー</option>

<option value="401">VRゲーム</option>

<option value="9801">ノンジャンル</option>

</select>

地味に累計ジャンルはなろうさんだとランキングに用意されていないので確認したい時に便利かもと思いました。

あと、リプレイとかノンジャンルランキングもないよね。知らない作品いっぱい出てきて面白かったです。

はいということでこれで検索部完了です！

次はガチャを作ります。

んー、気になるのはスマホで一画面に収まらないことなんですよね。

もしかしたら数値ブロックをさらに分割してデフォルト非表示にするのもありかなとも思う。