見出し画像

ふや町映画タウンの在庫検索を日常的に使う

ふや町映画タウンのビデオ在庫、すごい
どんな映画でもある……
在庫一覧を眺めてるだけでも楽しいです

下記リンクから在庫検索が可能

他の映画サイトを見ていて
「この映画ってふや町に在庫あるのかな?」と思ったとき、ぱっと検索できたら便利だなぁと思ったのでブックマークレット作りました

※Windows版のChromeで動作確認
その他の環境で動くかわかりません
iPhoneのChromeアプリだと動かないです。Safariだと動作するはず。

★使い方
1.どんなサイトでも良いので、ブラウザの☆マークをクリックして新しいブックマークを作っておく

2.新しく追加したブックマークの「名前」を「ふや町検索」とかに変更

3.新しく追加したブックマークの「URL」に下記のコードを貼り付ける

ふや町映画タウンのフリー検索:映画タイトル

javascript:location='http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=movie&search_string='+encodeURIComponent(window.getSelection().toString())

文字を選択した状態で先程のブックマークをクリックすると、ふや町映画タウンで在庫検索されます(ふや町のサイトにとぶ)

こんな感じ


「監督」や「俳優」で検索したい場合は下記のコード

ふや町映画タウンのフリー検索:監督名

javascript:location='http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=director&search_string='+encodeURIComponent(window.getSelection().toString())

ふや町映画タウンのフリー検索:俳優名

javascript:location='http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=actor&search_string='+encodeURIComponent(window.getSelection().toString())


「映画」「監督」「俳優」その都度切り替えて検索可能なフォームを表示するブックマークレットも作りました

ふや町映画タウンのフリー検索:フォーム表示

javascript:(function(){var sites={"映画":"http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=movie&search_string=","監督":"http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=director&search_string=","俳優":"http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=actor&search_string="};function performSearch(){var siteInput=document.querySelector(%27input[name="site"]:checked%27);if(!siteInput){closeForm();return;}var searchInput=document.getElementById("searchInput").value.trim();if(!searchInput){closeForm();return;}var siteUrl=sites[siteInput.value];var searchUrl=siteUrl+encodeURIComponent(searchInput);window.open(searchUrl,"_blank");closeForm();}function closeForm(){var formContainer=document.getElementById("searchFormContainer");formContainer.parentNode.removeChild(formContainer);}var formContainer=document.createElement("div");formContainer.id="searchFormContainer";formContainer.style.cssText="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(255,255,255,0.9);border:2px solid #000000;padding:20px;border-radius:10px;z-index:9999;";var form=document.createElement("form");var siteLabel=document.createElement("div");siteLabel.textContent="ふや町検索";siteLabel.style.fontSize="12px";form.appendChild(siteLabel);for(var site in sites){if(sites.hasOwnProperty(site)){var siteInput=document.createElement("input");siteInput.type="radio";siteInput.name="site";siteInput.value=site;siteInput.id=site;if(site==="映画"){siteInput.checked=true;}var siteLabel=document.createElement("label");siteLabel.textContent=site;siteLabel.style.cssText="margin-right:10px;font-size:12px;";siteLabel.setAttribute("for",site);form.appendChild(siteInput);form.appendChild(siteLabel);}}var searchLabel=document.createElement("div");searchLabel.textContent="↑検索対象 ↓検索語句";searchLabel.style.fontSize="12px";form.appendChild(searchLabel);var searchInput=document.createElement("input");searchInput.id="searchInput";searchInput.type="text";searchInput.placeholder="入力してください";var selectedText=window.getSelection().toString().trim();if(selectedText){searchInput.value=selectedText;}searchInput.addEventListener("input",function(){document.getElementById("errorMsg").textContent="";});form.appendChild(searchInput);var buttonContainer=document.createElement("div");buttonContainer.style.marginTop="10px";form.appendChild(buttonContainer);var addButton=function(parent,text,handler,styles){var button=document.createElement("button");button.textContent=text;button.addEventListener("click",handler);Object.assign(button.style,styles);return parent.appendChild(button);};addButton(buttonContainer,"検索",performSearch,{marginRight:"10px"});addButton(buttonContainer,"キャンセル",closeForm,{marginLeft:"10px",fontSize:"12px"});document.body.appendChild(formContainer).appendChild(form);formContainer.addEventListener("click",function(e){e.stopPropagation();});document.addEventListener("click",function(e){if(!formContainer.contains(e.target)){closeForm();}});})();

↓こんな感じのフォームがブラウザ上に表示されるので、入力して検索ボタンを押します

サイト上で文字列を選択してブックマークレットを実行すると、入力フォームに選択した文字列が自動で入ります(フォームが表示されてる時、フォーム外やキャンセルボタンをクリックすると、フォームは消えます)

実行結果

SNSとかFilmarksとかで気になるタイトルがあったら
すぐに在庫検索にとべます

Androidスマホのchromeアプリで、ブックマークのURLを「ふや町映画タウンのフリー検索:フォーム表示」のコードに置き換えたものを用意しておく

アドレスバーにブックマークの名前を入力して検索候補から実行

その様子

一番右がその結果


JavaScriptで書きました
コード全文を見やすくしたのがこちら

ふや町映画タウンのフリー検索:フォーム表示(改行とコメント入れたもの)

(function(){
    // 検索URLの定義
    var sites = {
        "映画": "http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=movie&search_string=",
        "監督": "http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=director&search_string=",
        "俳優": "http://dejan.dyndns.tv/f_eigatown/videosearch/search.php?search=&search_target=actor&search_string="
    };

    // 検索する関数
    function performSearch() {
        // 選択されたサイトを取得
        var siteInput = document.querySelector('input[name="site"]:checked');
        if (!siteInput) {
            // サイトが選択されていない場合はフォームを閉じる
            closeForm();
            return;
        }

        // 検索語を取得
        var searchInput = document.getElementById("searchInput").value.trim();
        if (!searchInput) {
            // 検索語が入力されていない場合はフォームを閉じる
            closeForm();
            return;
        }

        // 検索URLを取得し、検索語をURLの末尾に引っ付ける
        var siteUrl = sites[siteInput.value];
        var searchUrl = siteUrl + encodeURIComponent(searchInput);
        
        // 新しいウィンドウで検索結果を開く
        window.open(searchUrl,"_blank");
        
        // フォームを閉じる
        closeForm();
    }

    // フォームを閉じる関数
    function closeForm() {
        var formContainer = document.getElementById("searchFormContainer");
        formContainer.parentNode.removeChild(formContainer);
    }

    // 検索フォームの作成、追加
    var formContainer = document.createElement("div");
    formContainer.id = "searchFormContainer";
    formContainer.style.cssText = "position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:rgba(255,255,255,0.9);border:2px solid #000000;padding:20px;border-radius:10px;z-index:9999;";

    var form = document.createElement("form");
    var siteLabel = document.createElement("div");
    siteLabel.textContent = "ふや町検索";
    siteLabel.style.fontSize = "12px";
    form.appendChild(siteLabel);

    // サイトの選択ラジオボタンを作成、追加
    for (var site in sites) {
        if (sites.hasOwnProperty(site)) {
            var siteInput = document.createElement("input");
            siteInput.type = "radio";
            siteInput.name = "site";
            siteInput.value = site;
            siteInput.id = site;
            if (site === "映画") {
                siteInput.checked = true;
            }
            var siteLabel = document.createElement("label");
            siteLabel.textContent = site;
            siteLabel.style.cssText = "margin-right:10px;font-size:12px;";
            siteLabel.setAttribute("for", site);
            form.appendChild(siteInput);
            form.appendChild(siteLabel);
        }
    }

    var searchLabel = document.createElement("div");
    searchLabel.textContent = "↑検索対象 ↓検索語句";
    searchLabel.style.fontSize = "12px";
    form.appendChild(searchLabel);

    // 検索語の入力欄を作成、追加
    var searchInput = document.createElement("input");
    searchInput.id = "searchInput";
    searchInput.type = "text";
    searchInput.placeholder = "入力してください";
    var selectedText = window.getSelection().toString().trim();
    if (selectedText) {
        searchInput.value = selectedText;
    }
    searchInput.addEventListener("input", function() {
        document.getElementById("errorMsg").textContent = "";
    });
    form.appendChild(searchInput);

    // 検索ボタンとキャンセルボタンを作成
    var buttonContainer = document.createElement("div");
    buttonContainer.style.marginTop = "10px";
    form.appendChild(buttonContainer);

    var addButton = function(parent, text, handler, styles) {
        var button = document.createElement("button");
        button.textContent = text;
        button.addEventListener("click", handler);
        Object.assign(button.style, styles);
        return parent.appendChild(button);
    };
  
  // 検索ボタンとキャンセルボタンを追加
    addButton(buttonContainer, "検索", performSearch, { marginRight: "10px" });
    addButton(buttonContainer, "キャンセル", closeForm, { marginLeft: "10px", fontSize: "12px" });

    // フォームをページに追加
    document.body.appendChild(formContainer).appendChild(form);

    // フォーム外をクリックしたときにフォームを閉じる
    formContainer.addEventListener("click", function(e) {
        e.stopPropagation();
    });
    document.addEventListener("click", function(e) {
        if (!formContainer.contains(e.target)) {
            closeForm();
        }
    });
})();

ブックマークレットで無理やりフォーム作ってサイトにとばしてるだけです。エラー処理もフォーム閉じるだけ。検索・キャンセルボタン追加はかろうじてまとめた処理になっています

URLの文末に検索ワード引っ付くサイトだったらvar sitesの部分とデフォルトのラジオボタン(if (site === "映画")のところ)を書き換えてやれば使いまわせます

私は普段色んなサイトで検索するときにフィルターとかあいまい検索とかサイトごとに文字入力するのが面倒なので共通のフォームを色々カスタマイズして使ってます。APIがあれば使ったり。AnnictさんとかGraphQL API使えるので最新アニメのデータがサクッと抽出できます。


在庫を眺めて
色んな人がふや町映画タウンを訪れるきっかけになれば良いなと思います。在庫があればお店にGO!

とにかく在庫が豊富なので
サイトを訪れたことがない方に、ふや町映画タウンの在庫検索ふれてみてほしいなと思って作りました。誘導するのが目的

お店の在庫一覧もcsvでダウンロード可能

私もcsvを加工してオリジナルの借りたいものリスト作ってます

ふや町映画タウンずっと続いてほしい

この記事が気に入ったらサポートをしてみませんか?