Chrome Life

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

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

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

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

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

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

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

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

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

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

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

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

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

gleeBoxの起動

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

ページを開いている時に、キーボードで「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の詳しい情報は、下記のサイトが参考になります。

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

筆者が使っている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の設定画面で、どのサイトを表示した時に、デフォルトでハイライトする要素をセレクターで指定しておくと使えます。

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

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

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

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

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

タブマネージャー

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

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

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

まとめ

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

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

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

自分の使いやすい環境

を作ることができます。

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

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


What’s new in gleeBox 1.0

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

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

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

それでは、また!