すたすた式
Blogger web
Googleのサイト内検索コマンド、
site:検索対象のサイト 検索ワード
を行うブックマークレットです。
Windows版の
で確認しました。
下のリンクになっているテキスト部分をブラウザのブックマークバーにドラッグアンドドロップして使用してください。
SiteSearch
※ブックマークレットの名前は、ドラッグアンドドロップ後ブックマークレットを右クリック「編集」から変更できます。
ブックマークレットをクリックすると、サイト内検索用のダイアログがでます。
ボックスに検索ワードを入力して、OKボタンまたはEnterキーを押すとサイト内検索を実行します。
また、文字を選択した状態でブックマークレットをクリックすると、選択した文字でサイト内検索を実行します。
Firefoxは複数の文字を選択可能なので、and検索ができます。
いずれも検索結果は別タブで開きます。
サイトによってはCSSが効かずダイアログのデザインが崩れる場合があります。
プロパティの追加、または!importantを付けてCSSの優先度を上げてください。
!important
ブックマークレット変換前のコードです。
/*! Copyright:2023 sutajp | Released under the MIT license | https://sutasutashiki.blogspot.com/p/mit-license.html */ (function () { function search(text) { const hostname = location.hostname; const url = "https://www.google.com/search?hl=ja&q=site:" + hostname + "+" + encodeURIComponent(text); window.open(url, "_blank"); } function selectionString() { /** @type {string} */ let text = ""; /** @type {object} */ const selectionString = window.getSelection(); for (let index = 0; index < selectionString.rangeCount; index++) { text += selectionString.getRangeAt([index]).toString() + "+"; } text = text.replace(/\+$/, ""); search(text); } function dialog() { const style = ` <style> .site-search-dialog, .site-search-dialog__form, .site-search-dialog__title, .site-search-dialog__input, .site-search__button { all: revert; } .site-search-dialog__title, .site-search-dialog__input, .site-search__button { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif; } .site-search-dialog__input, .site-search__button { line-height: 1.2; padding: 0.5em var(--padding-x); } .site-search-dialog { border-radius: 10px; text-align: start /*background-color: #f9f9fb; color: #15141a;*/ } .site-search-dialog__input { margin: 0.5em 0; width: 300px; --padding-x: 0.5em; box-sizing: border-box; } .site-search-dialog__input:focus { outline: 0; border: 2px solid #2196f3; } .site-search__button { --padding-x: 1.2em; cursor: pointer; } .site-search__cancel-button { margin-left: 0.5em; } @media (prefers-color-scheme: dark) { .site-search-dialog { background-color: #2b2a33; color: #fbfbfe; } } </style>`; /** ダイアログの要素(テキスト) */ const dialogElm = ` <dialog id="siteSearchDialog" class="site-search-dialog"> ${style} <div class="site-search-dialog__title">サイト内検索</div> <form method="dialog" class="site-search-dialog__form"> <div> <input type="text" id="siteSearchDialogInput" class="site-search-dialog__input" value="" placeholder="検索する文字を入力" autocomplete="off" autofocus /> </div> <div> <button id="siteSearchButton" class="site-search__button" type="submit">OK</button> <button id="siteSearchCancelButton" class="site-search__button site-search__cancel-button" type="button">Cancel</button> </div> </form> </dialog>`; /** ダイアログの要素をHTMLとしてbodyに挿入 */ document.body.insertAdjacentHTML("beforeend", dialogElm); const dialog = document.getElementById("siteSearchDialog"); dialog.showModal(); const cancelBtn = document.getElementById("siteSearchCancelButton"); const searchBtn = document.getElementById("siteSearchButton"); cancelBtn.addEventListener( "click", function () { dialog.close(); }, false ); searchBtn.addEventListener( "click", function () { const text = document.getElementById("siteSearchDialogInput").value; if (!text) { dialog.close(); return; } search(text); dialog.close(); }, false ); dialog.addEventListener("close", function () { dialog.remove(); }); } if (window.getSelection().toString() == "") { dialog(); } else { selectionString(); } })();
ダイアログのCSSやHTMLはテンプレートリテラルで書いたのでカスタマイズしやすいと思います。
ブックマークレットとして使用する際は、ブックマークレット作成サイトなどでプログラムを変換してください。
ブックマークレット作成サイトの一例です。
サイトによってコメントを削除したり、スペースを%20に変換するなどの違いがあります。
%20
ブックマークレット作成
bookmarklet maker
ブックマークレット変換
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿