Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

ホーム > Chrome > これはすごい!Chromeで最強のコマンド環境を構築する方法「gleeBox+Quix」

これはすごい!Chromeで最強のコマンド環境を構築する方法「gleeBox+Quix」

皆さんはキーボード派ですか?マウス派ですか?

筆者のようにプログラマの方であれば、キーボード派の人が多いと思います。

マウスでグリグリ操作するよりも、ショートカットキーを使いこなす方が何倍も早く操作できることを知っているはずです。

ターミナルをよく開いている人は1日の大半はキーボードだけで生活しているでしょうw

しかし、そんな人でもブラウザの前では、キーボードだけでは効率良く操作できないので、仕方なくマウスで操作するしかありません。

そこで今回ご紹介するのは、Chromeをコマンドで操作できるようにしてくれるキーボード派のためのエクステンション「gleeBox」です。

gleeBox」は、Chrome上に入力ボックスでコマンドを打ち込むだけで様々な操作が可能になるエクステンションです。

何がそんなにスゴイかというと、ほとんどマウスを使わなくても操作ができるように様々なコマンドが用意されているところです。

コマンドラインをこよなく愛する人のために、Chromeで最強のコマンド環境を構築する方法をご紹介します。

マスターすれば、マウスで操作するよりも格段にスピードアップしますよ。

キーボード派の方は、是非参考にしてみてください。

gleeBoxの起動

gleeBoxをChromeウェブストアからインストールします。

ページを開いている時に、キーボードで「g」を押すとコマンドラインが表示されます。

フォーカスが入力ボックスにある場合は、「alt」+「g」キーでコマンドラインを表示できます。(macの場合は、「option」+「g」キー)

「esc」キーでコマンドラインを閉じます。

アンカー検索

コマンドラインでキーワードを入力すると、ページ内のアンカー(Aタグ)からキーワードが含まれているものを検索することができます。

例えば、chromeと入力した場合、ページ内でChromeが含まれたアンカーがハイライトされます。

「tab」キーでフォーカスを移動させ、「enter」キーでリンク先を開きます。(この時に「shift」キーを押しながら「enter」を押すと別タブで開くことができます)

この機能は、普段からよく見るページで効果を発揮します。

よく見るページの場合は、アンカーで使われているワードも把握しているので、すぐにリンク先を開くことができるようになります。

ブックマーク検索

コマンドラインでキーワードを入力すると、ブックマークも同時に検索されます。
しかし、アンカーにも含まれている場合は、そちらが優先されてしまうので、先頭に@を付けて検索するとブックマークだけをヒットさせることが可能です。

例えば、hootsuiteをブックマークに入れている場合、コマンドラインで@hootと入力すると下記のようにアドバイスが表示されます。「enter」キーでブックマークを開きます。

複数ヒットした場合は、「tab」キーで切り替えることができます。(「shift」+「tab」キーで1つ前に戻せます)

Chromeの場合、オムニバー(アドレスバー)からもブックマークを開くことができますが、URLの候補も表示されてしまうので一発で開くことはできません。

gleeBoxなら一発でブックマーク候補が表示されるので、素早く開けます。

要素の検索(?Scraper Commands)

これはプログラマが喜ぶ機能です。
ページ内の要素を素早く検索することができます。

例えば、?h と入力するだけで、H1からH3までの要素を検索することができます。

この機能は、Scraper Commandsと呼ばれています。
デフォルトでは、下記のコマンドが用意されています。

?? 入力ボックス(INPUT/TEXTAREA)を検索
?img リンク付の画像(A > IMG)を検索
?h 見出し(H1からH3)を検索
?a アンカー(A)を検索

gleeBoxの設定画面で、コマンドを簡単に増やすことができます。

例えば、はてなブックマーク数の画像を検索できるようにするには、下記のように追加します。

?htb img[src^='http://b.hatena.ne.jp/entry/image/']

CSSセレクターで指定して登録することができるので、よく調べる要素はScraper Commandsに登録しておくと便利です。

jQueryセレクター(*jQuery Commands)

jQueryのセレクターを使った要素検索も可能です。

例えば、リンク先がhttpsのものを調べたい場合、*a[href^="https"] で探すことができます。

jQueryがインクルードされているサイトの場合は、Chrome Developer Toolsのコンソールで調べることもできますが、gleeBoxだとjQueryを使っていないサイトでも要素をハイライトしてくれるので便利です。

ページコマンド(!Page Commands)

gleeBoxでは、表示しているページを簡単にシェアしたり、Google Readerに登録したり、スナップショットを撮ったりすることができます。

例えば、!tweet のコマンドでTwitterで表示しているページをシェアすることができます。

ページコマンドの中から使えそうなものをリストアップしておきます。
その他のコマンドは、gleeBoxのユーザーマニュアルを参照してください。

!tweet Twitterでシェアする
!rss RSSフィードをGoogle Readerに登録する
!help gleeBoxのヘルプを開く
!options gleeBoxの設定画面を開く
!ext Chromeの拡張機能画面を開く
!down Chromeのダウンロード画面を開く
!plugin Chromeのプラグイン画面を開く
!snap スナップショットを撮る
!share AddThisに登録されているサービスを使ってシェアする
!share m (メールでシェア)
!share g (Gmailでシェア)
!share fb (Facebookでシェア)
!share deli (deliciousでシェア)
!share hatena (はてなブックマークでシェア)

コマンドサービスと連携(:YubNub/Quix Commands)

gleeBoxでは、YubNubQuixのコマンドと連携させることができます。

どちらのコマンドエンジンを使うかは設定画面で指定します。

筆者は、Quixを使うようにしています。

Quixの場合、簡単にカスタマイズコマンドを登録して使用することが可能です。

DropboxのPublicフォルダーにカスタマイズコマンドの設定したテキストファイル(quix.txt)を設置しておくだけでオリジナルのコマンドが使えるようになります。

Quixの詳しい情報は、下記のサイトが参考になります。

標準のものだと、GoogleやAmazonの検索が英語になっているので日本語に切り替えたり、よく使うサイトを登録しておくと便利です。

筆者が使っているquix.txtはここからダウンロードできるので参考にしてください。

※使う時は、自分のサーバーもしくはDropBoxに設置して使ってくださいね

gleeBoxからQuixのコマンドを呼び出すには、先頭に:をつけます。

Quixの標準のコマンドとカスタマイズで追加したコマンドによって下記のことができるようにしました。

:g Google検索
:a Amazon検索
:y Yahoo検索
:map Google Map検索
:img Google画像検索
:gmail Gmail検索
:gcal Googleカレンダー検索
:gbks Googleブックマーク検索
:tr 現在のページをGoogle翻訳
:trans Google翻訳
:plus Google+検索
:bing Bing検索
:wl Weblio検索
:w Wikipedia検索
:s Twitter検索
:t Twitterユーザー検索
:tabe 食べログ検索
:r 楽天検索
:k 価格.com検索
:f Flickr検索
:fc Flickr(クリエイティブコモンズ)検索
:yt Youtube検索
:gs Googleでサイト内検索
:gc Googleキャッシュページ
:gi Googleインサイト検索
:php PHP関数検索
:db Deliciousでブックマーク
:fb Facebookでシェア
:gb Googleブックマークに追加
:tn Twitterでシェア
:tumblr Tumblrでシェア
:csstoggle CSSのON/OFF
:firebug Firebug Lite
:help Quixコマンドヘルプ
:googl Goo.glで短縮URL
:evernote Evernoteでクリップ
:az Amazonアフィリエイトリンク作成
:hb はてなブックマーク
:url Get URL Info
:print Print What YouLike(印刷用最適化)
:sh Share HTML

ページ毎のデフォルトセレクター(ESP Visions)

コマンドラインでアンカーを検索したり要素を検索することは可能なのですが、いつも同じ要素をセレクトしたい場合にESP Visionsという機能を使うと便利です。

例えば、www.google.comでコマンドラインを表示すると、検索結果のアンカーだけがハイライトされます。

「tab」キーでフォーカスを移動させて、リンク先をすぐに開くことができます。

この機能は、gleeBoxの設定画面で、どのサイトを表示した時に、デフォルトでハイライトする要素をセレクターで指定しておくと使えます。

筆者は、Amazon や Facebookのサイトに対してもESP Visionsを指定しています。

また、わざわざ設定しなくてもサイト側でも、ESP Visionに対応させることができます。

metaタグで、下記のようにセレクターを指定しておくと、gleeBoxでコマンドラインを開くだけで指定された要素がハイライトされるようになります。

<meta name="gleebox-default-selector" content="a.page_title" />

ちなみに、Chrome Lifeのトップページアーカイブページにもmetaをセットしておいたので試してみてください。

タブマネージャー

複数のタブを開いている場合、gleeBoxのタブマネージャーが便利です。

「.」キーを押すと、タブマネージャーが開きます。(フォーカスが入力ボックスにある場合は、「alt」+「.」キー)

「tab」キーで選択して、「enter」でタブを切り替えます。

まとめ

gleeBox」を使えば、キーボードだけで下記の操作が可能になります。

  • アンカー検索
  • ブックマーク検索
  • 要素の検索(?Scraper Commands)
  • jQueryセレクター(*jQuery Commands)
  • コマンドサービスと連携(:YubNub/Quix Commands)
  • ページ毎のデフォルトセレクター(ESP Visions)
  • タブマネージャー

コマンドは、自由に追加することが可能なので

自分の使いやすい環境

を作ることができます。

特にQuixとの連携は素晴らしいと思います。

デモムービーを見ると動きが確認できます。

YouTube Preview Image

慣れるまでは少し戸惑う部分がありますが、身につけると格段に操作スピードがアップするはずです。

コマンドラインをこよなく愛するプログラマーの方は、是非チェックしてみてください。

筆者は、ブラウザを見たらついつい「g」キーを押すクセがついてしまいましたよw

それでは、また!

PS:ちなみに、筆者が5年前に開発したコマンドサービス「StartCommand」を今までずっと使い続けてきたのですが、gleeBoxの素晴らしさに魅了されて、現在乗り換え中ですよ。

【単機能だけど便利なエクステンション】
マウスのホイールで一生懸命上までスクロールさせる必要がなくなるエクステンションです。こちらも是非チェックしてみてください。
iPhoneのようにいつでもページの一番上にスクロールできるChromeエクステンション「Scroll to Top Bar」

【誰でも簡単にChromeテーマが作れちゃう!】
Chromeウェブストアに公開しなくても手軽にテーマが作れるアプリケーションです。こちらもあわせてチェックしてみてください。
これはすごい!思い出の写真からChromeオリジナルテーマが作成できる「My Chrome Theme」

【マウスで銀はがしを体験できるプラグイン】
こちらはユニークはjQueryプラインです。用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうですよw
スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」

【デモやプレゼンでブラウザからSSH接続したい時に使える!】
ChromeからSSHサーバーにセキュアな接続ができるエクステンションです。内部的にはネイティブクライアントを使っているので安心して使えそうなので、こちらもチェックしてみてください。
これはすごい!ChromeがSSHクライアントになるエクステンション「Secure Shell」

【iGoogleのようなスタートページを探している方へ】
iGoogleのサービス終了後、代替サービスとして良いものが見つからない方に朗報です。26種類のHDテーマ、17種類のウィジェット、複数タブ機能、音声検索の対応などスタートページとして十分な機能が備わったものを見つけました。こちらも合わせてチェックしてみてください。
待望のiGoogle代替サービスが登場!クールで高度なカスタマイズが可能なスタートページ「iChrome」

タグ: , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。