割烹エディター裏メニュー　タグ集計

こんにちは。

久々に割烹エディター裏メニューを作ってみようと思います。
作ったものはリリースしてしばらくしたら午後の月の方にも取り入れる予定です。

作るもの

タグ集計

機能的には”のべらん”のタグ流しの流し部分を除いたものと大体同じですね。

自分が投稿した小説のタグを集計して並べるといったものになります。画面上でなろうの検索へのリンク付けて割烹への貼り付けも容易にしたいかなぁとも思います。

仕様

• 投稿した小説のタグをカウントする。

• 多い順に並べる。

• なろう検索欄へのリンク作成する

実装

URLを追加します。

    path('narou/tags/', views.NarouTags.as_view(), name='narou_tags'),

Viewは単になろうレコードを返すだけですので省略。

splitTags(record);
//map関数で必要なデータを演算
function splitTags(json){
    const novels_data = json
    const tags = [];

    novels_data.forEach(obj => {
        Array.prototype.push.apply(tags, obj['keyword'].split(' '));
    })
    const counts = {}; //重複排除してそれぞれをカウント
    tags.forEach(tag=>{
      counts[tag] = (counts[tag])? counts[tag] + 1 : 1 ;
    })

    //キーを含んだ配列に変換 オブジェクト⇒配列
    tagList = Object.keys(counts).map((k)=>({ 'key': k, 'value': counts[k], 'js-link':`https://yomou.syosetu.com/search.php?word=${k}&keyword=1` }));
    tagList.sort((a, b) => b.value -a.value);

    console.log(tagList)

    NovelList = new List('tag-list-container', options, tagList);
}

返ってきたデータのキーワードの項目を分解して重複削除、そのあと配列に変換。それを指定した要素に入れるだけです。

あとはCSSで並べてみます。

.list {
  display: flex;
    flex-wrap: wrap;
    font-size: 16px;
    gap: 16px;
    justify-content: space-around;
    list-style: none;
    padding: 1em 0;
}

flexにして均等に並べます。

恒例のタグ貼り付けboxも用意しました。

ただ、全部にリンクを貼ると文字数オーバーになるので文字だけです。残念。

ということで裏メニューへの追加も完了です。