私の検索ツール(ブックマークレット)も見てくれたら嬉しいな

公開日:2018-12-17
最終更新:2019-01-20

はじめに

俺の最強検索ツール(ブックマークレット)を見てくれ!!という記事に触発されて。

検索対象のサイトが多い←わかる!!!

自分は

  • 普通の検索は『Ecosia』で、
  • 検索演算子を用いた高度な検索は『Google』で、
  • YouTubeの動画は『YouTube』で、
  • ニコニコ動画の動画は『ニコニコ動画』で、
  • 商品は『Amazon』で、
  • Web開発の技術は『MDN』で、
  • 実践的な技術は『Qiita』で、

調べています。

Chromeへの検索エンジン登録めんどい!!!

とてもめんどくさい。

  1. 『追加』ボタンをクリック
  2. 名前・キーワード・クエリURLを入力
  3. 『追加』ボタンをクリックで確定

…耐えられない。

私はカスタム検索エンジン機能を、この記事で述べたように、ニックネーム付きブックマークとしても使っています。

…流石に耐えられない。
普段遣いはしないとはいえ、流石に堪えられない。

で? 何作ったの?

登録したページを開いたり、登録した検索エンジンで検索したりすることのできるキャラクターベースのブックマークレットになります。

ブックマーク登録し必要なときにクリックする、または、検索エンジン登録し必要なときにアドレスバーにキーワードを入力し起動する、ことで使うことができます。

ただ、作っている上で少し問題があって少しクセが強くなってしまって…。

問題: GUIめんどくさい

ブックマークレットでHTMLをいじろうとすると、WebページのCSSとぶつかってとてもめんどくさい。
iframe作ってその中(contentDocument)に押し込むという方法もあるけれど、それもそれでめんどくさい。

というわけで、マウス操作は断念。
ユーザによるテキスト入力で検索エンジンを選ぶことにしました。
そのため、検索エンジンにニックネームをつけるようにしました。

しかしそうなると問題になってくるのが、ユーザの入力をどう受けるか。
簡単な方法…。

!
検索エンジンの機能、%sを使えばいいじゃないか!

問題: カスタム検索エンジン機能の謎挙動

ブックマークレットxカスタム検索エンジンという記事で書いた方法です。
簡単にいうと、

検索エンジンとしてブックマークレットのURIを指定することができる

ブックマークレット内で検索エンジンの機能の%s使えるんじゃね?

使えた!!!

という記事。

ただ、開発中、謎な挙動に遭遇。
(%s内のデータが勝手に置き換えられている!?)

結果的に、%sを用いるのは断念しました…。
(Google Chromeでのカスタム検索エンジン機能の謎挙動という記事にまとめたので興味があれば)。

で? どうしたの?

素直にprompt()使いました…。

使い方

まず下のスクリプトみてください。

javascript:((def, engines) => {  
  const searchTerms = prompt('検索語句を入力してください…');  

  switch (searchTerms) {  
    case null:  
      break;  
    case ':help':  
      if (confirm('ヘルプへようこそ!\n詳しい解説を聞きますか?')) {  
        const  
          category = {  
            'engine': {  
              'description': '検索エンジンについて',  
              'explanation': '<table>' + Object.entries(engines).map(v => `<tr>  
                <td>${v[0]}</td>  
                <td>${v[1].description}</td>  
                <td>${v[1].url}</td>  
              </tr>`).join('') + '</table>',  
            },  
          },  
          selectedCategory = category[prompt(  
            Object.entries(category).map(v => `${v[0]} - ${v[1].description}`).join('\n'),  
            'カテゴリをお選びください…'  
          )]  
          ;  

        if (selectedCategory.explanation) {  
          const helpWindow = open();  
          helpWindow.title = `ヘルプ - ${selectedCategory.description}`;  
          helpWindow.document.body.innerHTML = `<h1>ヘルプ - ${selectedCategory.description}</h1>${selectedCategory.explanation}`;  
        } else {  
          alert('説明がありません');  
        }  
      }  
      break;  
    default:  
      const select = prompt('検索するサイトをニックネームでお呼び出しください…').trim() || def;  
      select  
        .split(/\s/)  
        .map(v => engines[v] || '')  
        .filter(v => v)  
        .map(v => v.url.replace('{}', encodeURIComponent(searchTerms.trim())))  
        .forEach(v => { open(v, '_blank') })  
        ;  
      break;  
  }  
})(  
  ':ec',  
  {  
    'gg': {  
      'url': 'https://www.google.com/',  
      'description': 'Google',  
    },  
    'yt': {  
      'url': 'https://www.youtube.com/feed/subscriptions',  
      'description': 'YouTube',  
    },  
    'nv': {  
      'url': 'https://www.nicovideo.jp/my/top/all',  
      'description': 'ニコニコ動画',  
    },  
    'am': {  
      'url': 'https://www.amazon.co.jp/',  
      'description': 'Amazon',  
    },  
    'wk': {  
      'url': 'https://ja.wikipedia.org/wiki/',  
      'description': 'Wikipedia',  
    },  

    ':gg': {  
      'url': 'https://www.google.com/search?q={}',  
      'description': 'Google検索',  
    },  
    ':ec': {  
      'url': 'https://www.ecosia.org/search?q={}',  
      'description': 'Ecosia検索',  
    },  
    ':yt': {  
      'url': 'https://www.youtube.com/results?search_query={}',  
      'description': 'YouTube検索',  
    },  
    ':nv': {  
      'url': 'https://www.nicovideo.jp/search/{}',  
      'description': 'ニコニコ動画検索',  
    },  
    ':am': {  
      'url': 'https://www.amazon.co.jp/s/ref=nb_sb_noss?field-keywords={}',  
      'description': 'Amazon検索',  
    },  
    ':tw': {  
      'url': 'https://twitter.com/search?f=tweets&q={}',  
      'description': 'Twitter検索',  
    },  
    ':wk': {  
      'url': 'https://ja.wikipedia.org/w/index.php?search={}',  
      'description': 'Wikipedia検索',  
    },  
    ':mdn': {  
      'url': 'https://developer.mozilla.org/ja/search?q={}',  
      'description': 'MDN検索',  
    },  
  }  
)

下の方に、こんな感じのデータがあります。

{  
    ':mdn': {    
        'url': 'https://developer.mozilla.org/ja/search?q={}',    
        'description': 'MDN検索',    
    },  
}

この場合、:mdnがニックネームで、そのオブジェクトのurlが検索語句を{}に置換したURLです。
descriptionは説明です。なくてもいいですが、ヘルプ見るときのためにあったほうがいいです。

検索する

ブックマークレットを起動したら、まず、検索語句を入力します。
このとき、:qを入力したら終了します(我ながらめんどくさい)。
改良しました。Escキーを押すと終了します。

次に、検索エンジンのニックネームを入力します。
デフォルトではどのニックネームも:から始まっています。
複数の検索エンジンを空白で区切って入力することもできます。その場合、複数のタブが開きます。
このとき、何も入力しないと、デフォルト(defの中身、この場合は:ec)として扱われます。

すると、検索結果ページが新しいタブで開かれます。
Webブラウザのポップアップブロック機能はオフにしておく必要があります。

ただブックマークを開くだけ

ブックマークレットを起動後、検索語句は無視し、次に進みます。
(何かを入力していても無視されます)。

検索時同様にニックネーム入力が促されるので、ブックマークのニックネームを入力します。
(:で始まらないもの)。

すると、ブックマークが新しいタブで開かれます。

問題点

  • 複雑な処理ができない
    • 検索するサイトによって新たに入力を求めたりはできない
    • 基本的にはURIを開くことしかできない
  • :qがめんどくさい
    • ブックマークのニックネームを行う上で、空欄を許さなければならないため仕方ない
    • 改良しました
  • コード長くね?
    • :help削れば減る
    • せっかく作ったので消したくないですが…

おわりに

キーボードだけで使えるのはいいとは思いますが、あんまり納得いきません。

なんというか。

もうChrome使わずにFirefoxだけで生活しましょうかね…。
いくらWebブラウザオタクといっても、こんなに使いづらいと…。

設定が簡単なカスタム検索エンジンがあって、ブックマークのニックネームもデフォルトで対応してくれている、そんなFirefoxが便利すぎて…。
みんな使おうよ…。

シンプル版

出来栄えに納得行かなかったので。

javascript:((def, engines) => {  
  const searchTerms = prompt('検索語句を入力してください…');  

  if (searchTerms !== null) {  
    const select = prompt('検索するサイトをニックネームでお呼びください…').trim() || def;  
    select  
      .split(/\s/)  
      .map(v => engines[v] || '')  
      .filter(v => v)  
      .map(v => v.replace('{}', encodeURIComponent(searchTerms.trim())))  
      .forEach(v => { open(v, '_blank') })  
      ;  
  }  
})(  
  ':gg',  
  {  
    'gg': 'https://www.google.com/',  

    ':gg': 'https://www.google.com/search?q={}',  
  }  
)
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする