https://labs.cybozu.co.jp/blog/akky/tags/%E8%87%AA%E5%8B%95%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB/ Recent content in 自動スクロール on akky@サイボウズラボ・ブログ Hugo ja Fri, 04 Sep 2020 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/ Fri, 04 Sep 2020 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/ <p><a href="https://scrolller.com/">scrolller</a> (lが3つ)は、いくつかのカテゴリーの画像や動画をひたすらランダムに表示するというサービスです。</p> <p><a href="http://scrolller.com/animals">animals(動物)</a>ページを開くと、いろいろな動物の写真や動画が表示されます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-animal.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-animal_hu_c330933ad2b7b48e.webp 480w, https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-animal_hu_216758d2b765ea9e.webp 768w, https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-animal_hu_f469152fb2b60079.webp 890w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-animal.png" width="890" height="881" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>右上の設定から、動画/画像のどちらかのみを表示するか、カテゴリー情報の表示、動画の自動再生、自動スクロール表示、などのカスタマイズをすることができます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-nature.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-nature_hu_8335a600f014c7f4.webp 480w, https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-nature_hu_f80bf6a2c65e657f.webp 768w, https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-nature_hu_5eb2823eeee29c57.webp 1163w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2020/09/scrolller-shows-random-images-from-reddit/scrolller-nature.png" width="1163" height="881" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>こちらは <a href="https://scrolller.com/nature">nature (自然)</a>のページ</p> <h3 id="仕組み">仕組み</h3> <p>画像や動画の参照先は、巨大掲示板 reddit です。reddit には利用者の興味に合わせて膨大な数のグループ、subreddit がありますが、scrolller はこの subreddits に投稿された画像/動画を取得して表示しています。</p> <p>Animals や Nature といったカテゴリーは、info を見ればわかりますがそういったジャンルの画像が投稿されるような subreddit を複数指しているのですね。</p> <p>Animals には現時点で 147 個のsubreddits掲示板が登録されていて、それらはさらにサブカテゴリーに分かれています。動物全般の画像だけではなく、「<a href="https://scrolller.com/dogs">犬</a>」「猫」「動物の赤ちゃん」といったカテゴリーを辿れ、それだけの画像を表示するページがあります。</p> <p>各subreddit掲示板では、世界中から多くの人が綺麗な画像、すごい動画を投稿してくるわけで、単にスクロールで流しておくだけでも見ごたえがあるものが作れるのですね。</p> <p><a href="http://localhost:8099/2020/08/nsfw-filter-browser-extension/">NSFW Filter – 職場で見てはいけないNSFW画像をブロックするブラウザ拡張</a>を紹介した際に、NSFW Filter の動作説明をするREADME の中でこのサイトを知りました。ということは、選べるカテゴリの中には NSFW というページもあります。これは直接リンクがはばかられるので興味のある人はトップから辿ってください。</p>