フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

trailing slash(URL末尾の"/")と相対URL

何を作った?

小説家になろうでの小説検索が不便なので、
1日ちょっとでGitHub Pagesを使って「小説家になろう」の年間ランキングを無限スクロール表示するサイトを作りました。(雑なのでバグがあったら教えてください)
×ボタンで一度見た小説を非表示にすることで効率的に検索できます!

o-posting.github.io/syosetu-infinite-yearly-ranking/

データは事前にスクレイピングしてsyosetu_data.jsに入れてあり、htmlを開くたびにデータを送受信するわけではありません。ランキングに載るのはほぼすべての15万字以上の小説です。文字数が少ないほど小説数が爆発的に増えるため、比較的大きな小説のみを集めました。

スクレイピングは(一応)サーバへの影響を考慮して、5秒に検索1回のペースで行いました。

細かい使い方

Google Chrome, Firefox, Edge, IE の各最新版で動作確認しています。ただ、IEだとCSSが完全じゃないです。
o-posting.github.io/syosetu-infinite-yearly-ranking/ にアクセスすると使えます。
URLの後ろに o-posting.github.io/syosetu-infinite-yearly-ranking/#100 のように#を使って数字をつけると、その順位のところまでジャンプします。 右下にあるボタンを押せば、一度に大きくスクロールできます。

制作時のこと

  • 最初スクロールが通信もしていないのに遅すぎて、いろいろ変えたらinnerHTMLinsertAdjacentHTMLにして解決した。
  • スクレイピングにはnode.jsでcheerio-httpcliを使った。サンプルコードをちょっと変えたらすぐ出来て簡単。
  • babelに掛ければes6でも大丈夫かと思っていたら、IEでjavascriptのSetが動かなかった
  • Edgeでbox-shadowが表示されず、drop-shadowにしてみてもIEで表示されない…
[紹介元] HTMLタグが付けられた新着投稿 – Qiita trailing slash(URL末尾の"/")と相対URL

コメント

記事に戻る

コメントを残す