CrxMouseの使い方。Chrome用マウスジェスチャー拡張機能

PCでChromeのブラウザを使っているなら絶対に入れておきたいマウスジェスチャーの拡張機能として「CrxMouse」がってのがある。これを使いこなせるようになると、ウェブブラウザでのブラウジングが格段に便利になるので、ぜひともインストールしておくことをお薦めする。

CrxMouseの特徴

マウスをドラッグで様々な機能を実行できる

Chrome用のマウスジェスチャーとは、マウスの右ボタンを押したままドラッグするだけで様々な機能を実行できる便利な拡張機能だ。例えば、ネットサーフィンしていると様々なページにアクセスするが、例えば前のページに戻りたい場合は、ブラウザの戻るボタンをわざわざ押しに行かなくても、マウスの右ボタンを左にドラッグするだけで簡単に前のページに戻れる。

スクリプト機能が最強すぎる

なんと言ってもCrxMouseの最強すぎる理由としてあげられるのがスクリプト機能である。スクリプト機能の例としては、例えばネットサーフィンしてて「iPhoneケース」というキーワードをサイトで見つけてそれをAmazonやメルカリで検索したい場合、そのキーワードをコピーしてAmazonのサイトを開いてキーワードを貼り付けて検索、っての一般的だが、スクリプト機能を予め登録しておけば、キーワードをマウスで選択してそのキーワードをドラッグするだけでAmazonのサイトを開いて検索してくれる、って使い方ができる。

特に、ブログをやっている人やライターさんなんかはには嬉しい機能URLとタイトルをHTMLタグでコピーしてくれる機能が使えたり、さらにはマウスジェスチャーでスクリーンキャプチャを撮ってくれる機能や、画像のURLのコピーやイメージ検索も行える。

CrxMouseのインストール

ここから、インストール。

https://chrome.google.com/webstore/detail/crxmouse/jlgkpaicikihijadgifklkbpdajbkhjo

さすがに全てを網羅することはできないので、気になる部分をピックアップする形でChrome用マウスジェスチャー「CrxMouse」の使い方を見ていこうと思う。

CrxMouseの基本的な使い方

インストールすると、例えばデフォルトで右ドラッグで閲覧中のページの一つ先のページヘ移動し、左ドラッグで一つ前のページに戻れ、右ドラッグで様々な操作ができる。

また、オプション画面を見てもらうと分かるが、下記のような表示がある。

この場合は、「マウスの動き」とあるように右斜め下などの動きはうまく動作しない場合があるので、四角をイメージする感じで動かす。。

オプション画面の日本語化

オプション画面の日本語化については、こちらをチェックしてもらえれば。

Chrome用マウスジェスチャーCrxMouseを日本語化してみた

オプション画面を開くには、このURLをアドレスバーにコピペするか、

Copy
chrome-extension://jlgkpaicikihijadgifklkbpdajbkhjo/options.html

下記の手順で「オプション」を開くことが出来る。

1. Chromeのウインドウの右上のメニューボタンをクリック
2. その他のツール
3. 拡張機能
4. CrxMouseの「オプション」

ちなみに設定のページを開いた状態で「ブックマーク」しておくことで次回から素早く設定画面に移動ができる。

一般設定

一般設定についてはこちらで詳細に解説しているので、これをチェックしてもらえれば。

Chrome用マウスジェスチャーCrxMouseの一般設定の解説

Mouse Gestures設定

ここで通常のマウスジェスチャーの設定ができるが、Gestures for Chromeにはない機能として、ジェスチャー時の軌跡の色などを設定することができる。

Appearance | マウスジェスチャー時のガイド設定

マウスジェスチャー時のガイドを設定することができる。

「Enable」で使用の有無、「Color」で色設定、「Transparency」で透明度、「Width」大きさの変更ができ、実際にこの設定画面で右ボタンをドラッグして動作確認ができる。

More… | その他の設定

Which key for Mouse Gestures | ドラッグ時のボタン設定

マイウスジェスチャーはデフォルトで右ドラッグで操作ができるが、「Middle mouse button」でホイールボタン、「Left mouse button」で左ボタンへの変更も可能だ。

Assign a key to disable Mouse Gestures | ホットキーの設定

マウスジェスチャー時にキーボードの「Ctl」キーなどと併用して使用することができ、その設定。

New | 新規マウスジェスチャーの追加

ここで新規マウスジェスチャーの追加の説明だが、一番使いたい機能として「URLとタイトルをHTMLタグでコピー」なので、それの設定手順を紹介するが他のジェスチャー追加についても参考にしてもらえれば。

まずは、Newの横にある①「Add New」をクリックすると下記画面になるので、②のようにマウスをドラッグして、③「Save」で一旦保存する。

Gsetures for Chromeみたいに同じジェスチャーに設定した場合に上書きしてくれないので、予め使いたいジェスチャーが設定されている場合は削除か再設定しておこう。

ジェスチャーを保存したら、④「copy the title and URL with custom format」を探して選択し、⑤には自分で分かる名前、⑥には下記のタグを設定して、⑦で保存して完了。

Copy
%title

Edit gestures | ジェスチャーの編集

設定したジェスチャーをここで編集することができるが、デフォルトで設定されている「下にドラッグ」でAction「Scroll down」のページスクロールは、結構気持ちがいい。

Action / Scrennshot | 画面キャプチャ機能

冒頭でも述べたが、マウスジェスチャーで画面キャプチャが撮れる機能が付いているので、作業効率があがる。

設定は、⑧のActionの「Screenshot」を選択すればOKだ。

実際似の動作は、新しいタブに画像が生成されるので、それを保存するなり、コピーすればOK。

Action / Run script… | …のスクリプトを実行

④Actionの「Run script…」でブックマークレットやJavaScriptのスクリプトを設定して様々な操作ができるようになる。

いくつかサンプルを紹介。

■はてなブックマーク登録

Copy
javascript:(function(){var d=(new Date);var s=document.createElement('script');s.charset='UTF-8';s.src='http://b.hatena.ne.jp/js/Hatena/Bookmark/let.js?'+d.getFullYear()+d.getMonth()+d.getDate();(document.getElementsByTagName('head')[0]||document.body).appendChild(s);})();

■Googleページ翻訳

以下は、表示している英語のページをまるごと日本語にページ翻訳してくれる。

Copy
javascript:var pageLoc=location.href;window.open(location.href='http://translate.google.co.jp/translate?sl=en&tl=ja&js=n&prev=_t&hl=ja&ie=UTF-8&eotf=1&u='+pageLoc);

以下は選択したテキストを右ドラッグで検索してくれるスクリプトとなっていて、⑬にコピペだ。

■Google検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://www.google.com/search?q='+encStr);

■Google翻訳(英語→日本語)

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://translate.google.com/translate_t?hl=ja&langpair=en|ja&text='+encStr);

■Yahoo検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://search.yahoo.co.jp/search?p='+encStr);

■Yahoo辞書

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://dic.search.yahoo.co.jp/search?p='+encStr);

■Amazon検索

Copy
javascript:var selectStr = document.getSelection();window.open('https://www.amazon.co.jp/s/ref=nb_sb_noss_2?field-keywords='+selectStr+'&tag=amzs01-22&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A');

■Amazonで90%OFF検索

Copy
javascript:var selectStr = document.getSelection();window.open('https://www.amazon.co.jp/s/ref=nb_sb_noss_2?field-keywords='+selectStr+'&pct-off=90-&tag=amzs01-22&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A');

■Amazonで50%～80%OFF検索

Copy
javascript:var selectStr = document.getSelection();window.open('https://www.amazon.co.jp/s/ref=nb_sb_noss_2?field-keywords='+selectStr+'&pct-off=50-80&tag=amzs01-22&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A');

■メルカリ検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('https://www.mercari.com/jp/search/?keyword='+encStr);

■ヤフオク検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('https://auctions.yahoo.co.jp/search/search?auccat=&tab_ex=commerce&ei=utf-8&aq=-1&oq=&sc_i=&fr=auc_top&p='+encStr+'&x=0&y=0&fixed=0=');

■YouTube検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('https://www.youtube.com/results?search_query='+encStr);

■wikipedia

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://ja.wikipedia.org/wiki/'+encStr);

■Weblio辞書

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://ejje.weblio.jp/content/'+encStr);

iPhone系のブロガー向けだが、iPhone検索は選択したキーワードと「iPhone」のキーワードを追加して検索してくれるので、ポチレバのブックマークレットと組み合わせれば、かなり最強。

■iPhone検索

Copy
javascript:var selectStr = document.getSelection();var encStr = encodeURIComponent(selectStr);window.open('http://www.google.com/search?q='+encStr+' iphone');

Super Drag設定

スーパードラッグは、通常のマウスジェスチャーとは違い、選択したテキストやリンク、画像に対してマウスジェスチャーで簡単に検索エンジンで検索やリンクをコピーできたりするようになる。

■スーパードラッグのマウスジェスチャーの追加の仕方

「NEW」のところにある「Text」や「Link」、「Image」をクリックするとサンプルのテキストやリンクなどが表示されるので、それをマウスの左ボタンで選択してドラッグすることでジェスチャーが追加できる。

■Drag-Text

テキストを選択してドラッグすることでコピーしたり、それを検索することができる。

Custom Search… | テキストをドラッグしてカスタム検索

⑫のActionで「Custom Search…」を選択、⑬に下記のようなテキストを入力することで、ブラウザで選択したテキストをドラッグするだけで簡単に予め用意された検索エンジンで検索してくれる。

なおテキストをドラッグして検索やカスタム検索では、「＆」の半角記号のエンコード処理が行われていないためか、「A ＆ B」とテキストを選択した場合、Bが検索対象に含まれないので、上記の「Run script…」でのテキスト選択して検索して使うことをお薦めする。

以下は、それでも選択したテキストを右ドラッグではなく左ドラッグで検索したい人向け。

■Yahoo!Japan

Copy
http://search.yahoo.co.jp/search?p=%s

■amazon.co.jp

Copy
https://www.amazon.co.jp/gp/search?field-keywords=%s&index=blended&tag=amzs01-22&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A

■Yahoo辞書

Copy
http://dic.search.yahoo.co.jp/search?p=%s&r_dtype=all&aq=-1&oq=&ei=UTF-8

■wikipedia

Copy
http://ja.wikipedia.org/wiki/%s

■Google翻訳(英語→日本語)

Copy
http://translate.google.com/translate_t?hl=ja&langpair=en|ja&text=%s

■YouTube検索

Copy
https://www.youtube.com/results?search_query=%s

■Weblio辞書

Copy
http://ejje.weblio.jp/content/%s

■Drag-Link

リンクをドラッグでコピーしたり、ブックマークに登録できる。

copy the title and website with a custom format | リンクをHTMLタグでコピー

⑭を「copy the title and website with a custom format」で選択し、⑮に下記のような「タグ」を設定することで、リンクをドラッグするとURLとタイトルをHTMLでコピーしてくれる。

Copy
//URLをHTMLタグでコピー
%url

//URLとタイトルをHTMLタグでコピー
%title 

■Drag-Image

画像をドラッグして画像のURLをコピーしたり、イメージ検索ができる。

Search the Image | 画像ドラッグでイメージ検索

⑯を「Search the Image 」で設定すると、画像をドラッグでイメージ検索ができる。

Advanced Settings設定

Advanced Settingsでは設定のインポートやエクスポートができ、最下部の「Sync configuration」でGoogleアカウントと接続すれば他のPCとでも同期ができるみたいだ。

Chrome拡張機能関連記事

• Chromeでエクセルなどを開くOfficeファイル編集拡張機能ドキュメント…
• Chrome用マウスジェスチャーCrxMouseを日本語化してみた
• 大量のChromeタブを一つにまとめてくれるOne Tabが超絶便利
• 画面を録画できるChromeの拡張機能Screencastify
• CrxMouseの使い方。Chrome用マウスジェスチャー拡張機能
• Chrome用マウスジェスチャーCrxMouseの一般設定の解説
• Chromeのタブを保存、復元する「タブクラウド」が凄く便利！
• ポモドーロ・テクニックのタイマー用Chrome拡張機能Strict Pomodoro