2024/03/13

音源用検索条件プリセットツール

自分用に作って、これはすごーく便利なんじゃないかと思い、例によってChatGPTをしごき倒した末に汎用化できたので公開。
ページはこちら。
https://nfd.inurokuon.com/dighelper/

クイックスタート

計5つの中古音源販売サイト用の検索条件を、Assignで選んだ番号に保存!ブラウザに未来永劫保存され、次から入力の手間が省けます!

もう少しちゃんとした概要

大手オンライン中古音源ショップで探している音源があったり、いいのが出ないか定期パトロールしたいときに、いちいち検索条件を入力しなくてもこのページに最大20までプリセットしておけるというもの。ディスクユニオン、amazon.co.jp、HMV(中古)、Record City、ブックオフオンラインに対応した。

ユニオンとその他4つとで検索システムのつくりが大きく異なり、まずユニオンは検索結果を直接開けないので、「マニアック検索」画面を検索条件セット済みの状態で開く。そこから更に検索ボタンを押して進む必要があるけど、折りたたみを開いてサブジャンルのチェックをちまちまつけたり外していた人は、その手間を減らせることになる。
他の4サイトは、検索結果画面そのものを開く。検索条件をひとつ入力したら、それを使い回して次々検索できるのが便利な点。

くわしい使い方

※3/18 仕様を大幅変更

1. 画面構成

左右に分かれていて、左上の目立つボタン「DU」と「AHRB」でディスクユニオンか、その他4つかを切り替える。右側は検索条件設定用のフォームになっている。

そういえばスマートフォンだと、PC画面で左右に並んでいるものが縦積みになるので、左側→上のほう、右側→入力フォームが始まるあたり以降として読み替えていただきたい。
ついでにいちばん下には、皆様の暇つぶし用に当サイトの新着記事スライダーも置かせてもらいました。

2. 「DU」タブ:ディスクユニオン

左側

「New」「Wantlist」は、ただのお役立ちリンク(死語!)として。利用するにはディスクユニオンの会員アカウントを持っていて、かつ利用中のブラウザでログインしている必要あり。

  • 「New」はウォントリストに入れた商品に該当する新着アイテムがあったときにお知らせが出るページ。私はここを一日に最低3回見る。
  • 「Wantlist」はそのままウォントリストのページ。

これはおまけで本題はその下から。右側のフォームを使ってショートカットを作成すると、上記2つのリンクの下にボタンが追加されていく。

右側

初期状態では、ユニオンHPにある「マニアック検索」のコンパクト版。しかし「Show all fields」にチェックを入れると、本家同様の項目がフルで表示される。(簡易表示時のジャンルがメタル・プログレ・ジャズになってるのはここがscsidnikufesinだから)
まずは本家サイトと同じように任意の条件を入力していき、最後にその条件を保持したショートカットボタンを作る。

  • 「Assign」は検索条件の保存先番号。1~20の番号つきの保存用スロットのどこかに検索条件をしまうイメージで、最大20件以内でやりくりするシステムになっている。
  • 「Shortcut Name」には任意の覚えやすい名前を決めて入力する(「メタル輸入盤LP」など)。
  • 「Set」ボタンをクリックすると、設定した条件を一発で呼び出すショートカットボタンが左側に現れる。
  • 「Remove」は作成したショートカットのクリア。セット時と同じく「Assign」で番号を指定する。
  • 「Clear」はフォームの入力値リセット。新しいプリセットボタンを作るときに直前の入力内容を全部消したいときに使う(プリセットには何も影響しない)。ただし「発売国」「結果表示順」はリセット対象外とした。
  • 「Search Now」はショートカットを登録せず(ゆえに「Assign」「Shortcut Name」は無視)、条件をそのままマニアック検索画面に引き継ぐだけのボタン。本家ページで同じことをするよりページ遷移が1つ増えるというほぼ無駄なボタンながら、あれこれ立て続けに検索していると、このボタンが欲しくなる瞬間が確かにあったので、いちおう設置。

生成されたショートカットボタンをクリックして本家ページに進んだら、何かしらのフォーム要素を操作するまで検索ボタンがクリックできない仕様っぽいので、DigHelperではデフォルトでチェック済みにしてある「お買得のみ」をオフにして、検索ボタンを有効化してから検索結果に進む。(なのでショートカット作成時に全選択肢を表示する場合も、ここのチェックは外さないほうがよい)

3.「AHRB」タブ:amazon.co.jp / HMV(中古)/ Record City / ブックオフオンライン

左側

含まれる要素は以下の3つ。

  1. 検索条件のプレビューエリア(条件未設定時は何も表示されない)
  2. どのサイトで検索するかを選ぶボタン
    「AMZN」=amazon.co.jp、「HMV」=HMV中古、「RCJP」=Record City、「BO」=ブックオフオンライン
  3. 検索条件のショートカットボタン(未登録の場合は何も表示されない)

まっさらな初期状態だと1・3は非表示のため、2だけが見えているはず。

ユニオンと同じく、右側のフォームを使って作成したショートカットボタンが下に追加されていくのだけど、4サイトをひとつの画面で兼ねているため、挙動が異なる。

  1. ショートカットボタンをクリックすると、いったんプレビューエリアに検索条件が表示される。
  2. その状態で任意のサイトのボタンをクリックすると、表示中の検索条件が適用された状態で検索結果ページが直接開く。

ちなみに、一度のクリックで4つのページを開くのは、ブラウザのセキュリティ対策上できないようになっているらしい。

右側

検索条件入力用のフォーム。ユニオンよりは項目が少なくシンプル。リンク先のショップによって、反映されない項目がある点に留意されたし。

  • Amazonでは「Artist」「Title」「Label」が区別されず、空白区切りのキーワードとして検索される。
  • ブックオフオンラインでは「Format」が無効。

ショートカットまわりは、「Shortcut Name」と「Search Now」がないことを除いてユニオンと同じ要領。
検索条件の設定項目がさほど多くないため、作成されるショートカットボタンの名称は、各項目の値をつなぎあわせて自動生成されるようにした。

ちなみに、フォームの入力内容は左側プレビューエリアに即時反映されていくので、ショートカットを登録せずにショップのボタンをクリックし、検索結果をさっさと表示するという使い方もできる。

原理と注意点など

ショートカットボタンについて「1~20のスロット」とざっくり書いたのは、正確には「ローカルストレージ」と呼ばれるもの。何らかのプログラムみたいな大仰なものではなく、このページで使っているのは単に変数名とその値だけ。
これはブラウザが記憶するもので、同一端末内の違うブラウザを使ってアクセスしたり、そもそも違う端末でアクセスすると、プリセットはまっさらになっているはず。
自分の作ったプリセットをどこかに保持させて自由に呼び出せるというような仕組みまでは作れないので、普段よくオンライン物色をする環境で仕込んでおいていただけたらと思う。

ちなみにローカルストレージは、ブラウザを閉じようが、端末をシャットダウンしようが、キャッシュをクリアしようが残る。
完全に消し去りたい場合はクリアボタンで逐一やってもらう必要があるけど、JavaScriptの変数がただ保存される以外に何もしないため、そのまま放置しても特に問題なし。

また、ユニオンではURLパラメータから検索条件を読み込ませるだけ、その他の4つも普通にその条件で検索した場合のURLを直接呼び出しているだけで、「これってハッキングなの」「サーバダウンさせて訴えられたりしないの」といったご心配も無用。


キャプチャをとるのが面倒なので説明をこまごま書いてしまったけど、適当に触っていればすぐ分かるのではと思う。
以上、パトロールのお供にお役立てをば。