Greasemonkeyを超えた！ユーザースクリプトを自在に実行できるChromeエクステンション「jsshell」

先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。

リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。

来年あたりから、HTML5の利用が一気に加速していく予感がします。

筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。

HTML5+CSS3+jQuery

この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。

必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。

JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけば問題ないと思います。

しかし、デザイナーやプログラムを始めたばかりの人など、jQueryをあまり知らない人もたくさんいます。

そんな人が作ったサイトを見ていると、

それjQueryでやればもっと楽にできるのに！

と教えてあげたくなりますよね。

そんな時に便利なのが、今回ご紹介するChromeエクステンション「jsshell」です。

「jsshell」は、jQueryとjQuery UIが使える状態のJavaScriptコンソールを表示し、ユーザースクリプトを自由に実行できるエクステンションです。

スクリプトを目の前で書いて、見せてあげるとjQueryでこんなことができるのか！！と驚かすこともできるはずですw

よく似たものにGreasemonkeyがあります。 Greasemonkeyと比較すると「jsshell」の方はデフォルトでjQueryが使える環境を提供してくれていて、コンソールの機能がすごく優秀なので、開発中にも使える万能なユーザースクリプトデバッグツールだと思います。

「jsshell」の使い方をまとめておきますので、是非活用してみてください。

jsshellのオフィシャルサイトでデモムービーも用意されているので、時間がある方はそちらもチェックしてみてください。

jsshellでページ内の要素を操作する

例えば、Yahoo!のページでロゴをドラッグで動かせるようにしてみましょう。

「jsshell」のコンソールを開いて下記のコマンドを入力し、Ctrl+Enterキーで実行します。

$('img').draggable();

これで画像がドラッグできるようになりました。

続いて、画像をアニメーションで大きくしてみましょう。コンソールで次のコマンドを入力して実行します。

$('img').animate({width:200, height:200}, 2000);

jsshellコンソールの特徴

jQueryが使えるとこんなことは朝飯前ですよね。

Chrome Developer Toolsを使えば、同じようなことができるのでは？と思ってしまいそうですが、jQueryがインクルードされていないサイトでは同じ事をしようとすると自分でインクルードしないといけないですし、コンフリクトしないようにラップしたりと面倒です。

それと、Chrome Developer Toolsの場合はワンラインなので、長いコマンドは入力しにくいんですよね。

「jsshell」を使えば、そんな心配はせずに、自由にjQueryを使ったスクリプトが組めるので、デバッグツールとしても有効だと思います。

もちろん、コンソールのウインドウは移動やリサイズもできます。

コードアシスト（入力補完）

jQueryのコマンドの入力補完もついています。コマンドを忘れてもへっちゃらです。候補を選択するには、Tabキーを使います。

さらに、#や.を入力すれば、IDやclassの入力補完もしてくれます。これは地味に便利な機能です。

スクリプトの実行制御

スクリプトを複数行書いても順番に実行してくれます。

alert('hello');
alert('goodbye');

実行したいスクリプトをハイライトさせた状態でCtrl+Enterを押すと、その行だけを実行できます。

「jsshell」そのものを制御するための専用の「jsコマンド」が提供されています。

コマンドリストは、jsshellのコマンドヘルプで確認できます。

js.go('http://www.google.com');

でGoogleのページにジャンプすることができます。

js.call('nostyle');

スタイルシートをクリアして表示します。

データの永続化

「jsshell」内でオブジェクトのデータを保存しておくことができます。

js.data.save('person', {name: 'yamada', age: 40});

このようにキーと値（オブジェクト）をセットして保存しておきます。

読み込む場合は、

var person = js.data.load('person');
alert(person.name);

のようにして使います。データは永続化されているので、ブラウザを閉じても消えません。

データをカウントアップするような場合は、

js.data.edit('person', function(data){
    data.age++;
    alert(data.age);
    return data;
});

のように書くことができます。

js.data.list();

で永続化しているデータの一覧を確認できます。

カスタムコマンドの作成

毎回、同じようなスクリプトを実行したい場合、カスタムコマンドとして登録しておくと便利です。

カスタムコマンド名を「linkred」で登録してみます。

Googleのトップページに移動してから

js.custom.edit('linkred');

を実行します。

カスタムコマンドのウインドウが開きます。

登録するスクリプトを入力します。

$('a').css({color: '#f00'});

コマンドを実行するURLを正規表現で指定できます。 Autorun Commandにチェックすると、自動的にコマンドが実行されます。

ウインドウ右上のチェックボタンでコマンドを保存します。

Googleで検索した結果、linkredコマンドが実行されて、リンクの文字色が赤色に変わりました。

このように、特定のサイトにだけ自動でスクリプトを実行することができます。

これでFirefoxのGreasemonkeyのようなこともできますね。

手動でカスタムコマンドを実行するには、

js.call('linkred');

のように書きます。

js.custom.list();

でカスタムコマンドの一覧を確認できます。

js.custom.remove('linkred');

でカスタムコマンドを削除できます。

まとめ

「jsshell」は、下記のような特徴があります。

jQueryとjQuery UIの読み込み
JavaScriptコンソールウインドウ
コードアシスト（入力補完）
データの永続化サポート
カスタムコマンド（ユーザースクリプト）

最近では、開発者もChromeを使う人が増えてきたので、こういったデバッグにも使える万能ツールを使いこなすと、もっと効率よく開発を進めることができるかもしれません。

個人的には、よく使うスクリプトをカスタムコマンドで登録しておくと、すごく便利だと思います。

もし、困っている人がいて、jQueryでやればもっと楽にできるのに！と思ったら、jsshellでサクっと見せてあげましょう。

そんなときは

「それjsshellで！」

と言いまでしょうねww

それと、筆者が作った、JavaScript製ドキュメントフレームワーク「Invisible.js」も地味に便利なので、是非チェックしてみてください。 Markdown・Textile・Wiki記法をサポートしたJavaScript製ドキュメントフレームワーク「Invisible.js」を公開しました(オープンソース)

【Chromeをメインブラウザとして使っている方へ】 履歴をフィルタリングして見やすくまとめてくれるChrome拡張を見つけましたので、是非チェックしてみてください。これはすごい！Chromeの履歴が見違えるほど使いやすくなるエクステンション「Better History」

【Chromeエクステンションまとめ】 2011年の総決算として、おすすめのChromeエクステンションをまとめてみました。こちらもあわせてチェックしてみてください！ Chromeエクステンション開発者向けベスト20「2011年決定版」本当に使えるものだけを集めました！

【追記】 Youtubeなどの動画をよく見る人にオススメのChromeエクステンションを見つけました！とても便利なのでこちらもあわせてチェックしてみてください。これはすごい！再生中の動画が映画のスクリーンの様に見やすくなるエクステンション「Turn Off the Lights」

【ChromeだけでInstagram風の写真加工ができる】 デジカメで撮った写真をプロのフォトグラファーが撮ったように加工することができるChromeウェブアプリです。こちらもあわせてチェックしてみてください。プロが撮影した写真のように加工できる！45種類のInstagram風フィルターを搭載した写真編集ウェブアプリ「Pixlr Express」

【追記】 臓器１つ１つの詳細な説明や、関連する病気・症状など医学的に必要な知識が学べるChromeウェブアプリでHTML5+WebGLを体験しよう！ HTML5＋WebGLで医学・解剖学が学べる！3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

【キーボード派のプログラマーにオススメ】 コマンドラインをこよなく愛する人のために、Chromeで最強のコマンド環境を構築する方法をまとめたので是非、チェックしてみてください。これはすごい！Chromeで最強のコマンド環境を構築する方法「gleeBox＋Quix」

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

【HTML5製プレゼンテーションツール】 jQueryベースで使いやすいプレゼンテーションライブラリーを見つけました！こちらもあわせてチェックしてみてください。いろんな用途で使える！柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」

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

それでは、また！