naari3 / otomad-search Goto Github PK

View Code? Open in Web Editor NEW

10.0 3.0 0.0 350 KB

音MADを検索するぞ

Home Page: https://otomad-search.vercel.app/

CSS 12.44% TypeScript 80.83% JavaScript 4.68% SCSS 2.04%

nextjs react otomad ytpmv nicovideo niconico

otomad-search's Introduction

otomad-search

https://otomad-search.vercel.app/

概要

音 MAD を検索するためのサービスです。

評価基準になりそうなものをフィルターとして設定できます。

裏で niconico コンテンツ検索 API を呼び出しています。

またその仕様上、17 ページ(1700 件目)以降を確認することは出来ません。

パラメータの説明

以上、以下の両方を選択できる項目は、いずれか片方のみの検索にも対応しています。

並び替え

ソート順を選択出来ます。

人気順ソートは出来ません。

マイリスト数

指定されたマイリスト数の範囲で検索します。

再生時間

指定された再生時間の範囲で検索します。

日付指定

指定された日付の範囲で検索します。

Development

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Credit

@naari3 develop, maintenance
tw @readybug_ logo design
@stysmmaker Introduce to i18n, English translation

otomad-search's People

Contributors

Stargazers

Watchers

otomad-search's Issues

ogpに対応する

lint

https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js

コンテンツ検索APIなくなる

a

https://blog.nicovideo.jp/niconews/143630.html

代替APIとしてスナップショット検索API v2を提示されているが、こちらに乗り換える時に懸念しなければならないことをまとめる

このサービスへの影響

APIを変更する必要がある

https://site.nicovideo.jp/search-api-docs/snapshot

動画のAPIとして見たときのパラメータやレスポンスはおおよそ同じだが細かい部分で違う箇所がある

userIdのフィールドがない

つまりuserIdによる絞り込み、userIdの取得は出来ない

_offsetの最大数がめちゃでかい

以下の通り。こんなに必要かどうかはちょっと疑問ではある

コンテンツ検索API: 1600
スナップショット検索API: 100000

キーワード無し検索ができる

このサービスは音MADが固定値なのであまり意味なし

threadIdがない

このサービスでは使ってない

lastResBodyがある

最新コメントが取れるらしい　多分検索結果に出てくる一行程度のコメントの集まり

使えるかも

channelIdがない

このサービスでは使ってない

lockTagsExactがない

ロックされたタグが取れなくなる

使ってないが、使いたかったので残念

リアルタイム性が損なわれる

1日1回のみマスターデータが更新されるようになる

キャッシュが作りやすくなる?

https://api.search.nicovideo.jp/api/v2/snapshot/version

ここを見るにおおよそ7~8時に更新されるらしく、それまでは同一パラメータに対して同じ結果しか返さない

ISRの機運？大量のパラメータの組み合わせに対してページ生成出来るのかどうかは要検証

indexページの説明をmarkdownで書けるようにしたい

スマホ

開始/終了日時を入れると400

https://otomad-search.vercel.app/search?_sort=-startTime&q=&viewCounterGte=1000000&startTimeLte=2013-01-01T00%3A00&page=1&per=100
時刻をクエリに追加する際に受け入れるフォーマットが変わったのではないか？

倒す気力のないエラー

パッと見でなんなのかまったくわからなかったのでスルーしている

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at div
    at div
    at div
    at form
    at div
    at SearchBar (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1605943310586:845:95)
    at div
    at header
    at Header (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1605943310586:346:93)
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1605943310586:602:27)
    at Search (http://localhost:3000/_next/static/chunks/pages/search.js:319335:21)
    at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1605943310586:10704:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:781:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:885:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:12909:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13386:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13502:25)

?page=999999とするとバグる

Thumbnailで発生している怒られについて

画像のLazyLoadと画面内にあるタグだけリンクを更新するようにしているため react-on-screen を使用している

TrackVisibility というReactコンポーネントをに任意のFCを渡すことで、そのコンポーネントが画面内にあるかどうかを検知できる

現在の実装ではTrackVisibilityに即席の関数(FCですらない)を渡しており、そこでsetStateを呼び出すような実装になっており、ここで怒られが発生している(下記エラーログ参照)

筋としてはTrackVisibilityにまともなFCを渡せば良さそう(useEffect を使う必要がありそう)だが、自分のローカル環境だと明らかに反応が鈍く(???)なってしまったのと、現状動いているのでそのままにしている

えらーろぐ

Warning: Cannot update a component (`Thumbnail`) while rendering a different component (`TrackVisibility`). To locate the bad setState() call inside `TrackVisibility`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at TrackVisibility (http://localhost:3000/_next/static/chunks/pages/search.js:275091:28)
    at Thumbnail (http://localhost:3000/_next/static/chunks/pages/search.js:2138:27)
    at a
    at div
    at div
    at div
    at div
    at _c (http://localhost:3000/_next/static/chunks/pages/search.js:3079:20)
    at div
    at _c (http://localhost:3000/_next/static/chunks/pages/search.js:2511:20)
    at li
    at ul
    at http://localhost:3000/_next/static/chunks/pages/search.js:2927:21
    at div
    at main
    at div
    at Layout (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1605943310586:602:27)
    at Search (http://localhost:3000/_next/static/chunks/pages/search.js:319335:21)
    at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1605943310586:10704:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:781:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:885:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:12909:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13386:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1605943310586:13502:25)