なろらんタグ流しを作ってみる
今回はタグ流しを作ってみます。
もうガチャすらしたくない気分もあると思います。疲れが限界になると小説を読む気分じゃないときだってあります。
そんな時のリフレッシュ用の機能として用意してみます。(需要はあるのか？)
いや、ネットから離れろよという声もあるかもしれませんが、まぁ活字中毒者のサガと言いますか、何かしら文字を眺めたいという欲求があると思います。（え？ ないですか？）
---
それがタグ流し機能なわけですが、タグ流しとは何ぞや。
みなさんは、Word Cascadeっていうサイトがあるのご存知？
Word Cascade
https://river.tango-gacha.com/
こんな感じに単語をひたすら流すというものです。
これがすごく面白かったのでそれを真似して作ってみます。それがタグ流しです。
--- 実装 ---
とりあえず取得したデータリストからキーワードを分解して、重複を削除します。
novels_data.forEach(obj => {
Array.prototype.push.apply(tags, obj['k'].split(' '));
})
const counts = {}; //重複排除してそれぞれをカウント
tags.forEach(tag=>{
counts[tag] = (counts[tag])? counts[tag] + 1 : 1 ;
})
これでタグリストができました。
このタグリストをランダムに表示させて、移動させようと思います。
どうやら本家はCanvasで画像化しているようですが、こちらではCSSアニメーションで実装します。
.tag-word{
font-family: serif;
position: absolute;
top: -20px;
line-height: 1;
z-index: 2;
animation-name: tagAnime;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: 34s;
opacity: 0.95;
}
@keyframes tagAnime{
from{
transform:translateY(0);
}
to{
transform:translateY(calc(100vh + 30px));
}
}
こんな感じの設定にすれば上から下へ移動させることができます。translateXにすると横に流せます。ニコニコ動画っぽい感じにもできます。
function flowTags(){
//タグの放流
drawTag(tagList[Math.floor(Math.random() * tagList.length)], Math.floor(Math.random() * tagView.clientWidth - 50))
}
function drawTag(tag, left){
const el = document.createElement('div');
el.textContent = tag;
el.className = 'tag-word';
el.style.left = left+ 'px';
el.style.fontSize = '18px';
el.style.animationDuration = Math.floor(34 + (Math.random() -0.5) * 34)+ 's'
el.addEventListener('animationend', () => { //アニメ終わったら削除
el.parentNode.removeChild(el);
});
tagView.append(el);
}
重複を削除したタグリストを一定期間ごとに画面に追加していけば自動的に流れてくれます。
ただ、このままだと要素が無限に増えるので、負荷がものすごく高くなります。なのでアニメーションが終わったら削除するようにもしています。animationendイベントをそれぞれのタグに追加しています。
落ちるスピードもランダムに調整しています。文字サイズも最初はランダムにしてましたが、スマホで小さすぎたり大きすぎたりして見にくかったのでやめました。そのあたりは調整必要です。
---
ということでこんな感じ。
もう少しロジックを改良して、密度とかスピードとか変えて、みやすくしたりもできそうですが、ひとまずこれで完了としておきます。
個人的に、暗い部屋でホラージャンルのタグをずっと流すとすごい狂気だなって思いました。
かな？かな？ タグ流しかな？
krkrkrkrkrkrkrkrkrkrっkrkL5+
--- 閑話休題 にぱ～☆
さて、あとは流したタグも一覧で見れるようにしましょう。
リストでずらっと並べます。重複カウントもあるのでそれでソートしておきます。
こんな感じ。
それぞれの文字にリンクを貼って、小説家になろうの検索ページに飛ぶようにしておきます。
気になったタグがあればすぐみられるようにしました。
---
ということでこれで主要3つの機能が完了です。
・やる気のある時 -> なろらんサーチで検索
・疲れた時 -> ガチャを回して
・読みたくなくなった時 -> タグを眺めてリフレッシュ！
って流れです。
なんかタグ眺めていると落ち着きますね。
さて、なんだかいい感じできてきましたね。
次はロゴとかOGPを作ります。
ニコニコ動画みたいに横に流れるのでもよかったかも。
ただ、横に流れると大衆向け、縦だとなんだかおしゃれに見えたので上下にしました。横だとゴシック体、縦だと明朝体が似合いますね。
横だとどうしてもニコニコ動画のイメージがあるのでそう感じるだけかな？どうなんでしょ。
まぁ、将来的には選べるようにしても楽しいかな？
