Web scratch

Archive for 9月, 2010

最近になってSlideShareではスライドの下部に広告が出るようになったので、それを自動で閉じて非表示にするGreasemonkeyです。

• slideshare ad close for Greasemonkey

広告の閉じるx部分を自動でクリックする事で消しています。
全く興味のない広告をコンテンツを覆うように表示する広告は嫌いです。
UstreamのFlash動画内広告を消す方法 | Web scratchとかでも同じような方式広告が出ていますが、何度もでてきてウイルスみたいだ。
CNETとかマイコミジャーナルとかあの辺の広告も理解できない。

Node.jsで動作しブラウザから使用できるJavaScript IDEである「Cloud9 IDE」 alpha版が公開されました。
ブラウザから使用できるので、クラウドとかありきたりな名前が付いてる気がします。(+Plan9?)
Win/Linux/Macで動作するようです。

インストール方法(Windows)

詳しい使い方はajaxorg’s cloud9 at master – GitHubに書いてあるので読むといいです。
まずはダウンロードですが、githubではzipでソースをダウンロードできますが、それではなくgit cloneしてダウンロードする必要があるみたいです。
というわけで、gitをインストールした状態でコマンドプロンプトから

$ git clone git://github.com/ajaxorg/cloud9.git

するとcloud9のディレクトリができるので、binフォルダに入っているcloud9-win32.batを実行すると必要なファイルをどんどんダウンロードしてくれます。(インストーラーみたいで面白い)
ダウンロードが終わってもう一度cloud9-win32.batを実行すると http://localhost:3000 にアクセスするように促されるので、FirefoxやChromeなどでhttp://localhost:3000にアクセスすればCloud9 IDEが使用できます。(別途にNode.jsをインストールしてなくても動作した)

まだα版なので、ファイル管理とエディタとコンソールぐらいしかありませんが、ブラウザ上でこういうものが動いてるのは面白いです。エディタはBespinとかと同じく日本語入力が残念仕様です。
最近BespinはSkywriterというプロジェクトへと移行したので、そのうちエディタに変化が起きるかも知れませんね。
入力したコードはNode.js上で実行されてるような気がします。JavaScriptを書いてその場で実行やデバッグができるのは普通のIDEとしてはよくありますが、JavaScriptなIDEとしては面白いですね。

通常のソフトウェアとしてのJavaScript IDEを使いたい人はJavaScript対応のIDEをまとめてみた | Web scratchを参照するとよいと思います。(今WebStorm凄いよ状態でいろいろ試しています)

JavaScriptに対応してるIDEのメモまとめ。

• Aptana
  有名どころでEclipseのプラグインとしても使えます。
  IDEらしくちょっと重たいけど、整形やデバッグやスニペットなど大抵の機能が入ってる。
  IDE内でブラウザプレビューができて便利。
  最近のバージョンだとFirefoxのプレビュー機能がデフォルトで入ってないので別途プラグインを入れる必要がある。
  Aptana Studio 2.0.3－Firefoxプレビュータブ – ゆちの備忘録
• WebStorm
  JavaScript EditorにJavaScript関係の対応について書いてある。
  HTMLとかまぜこぜでも補完ができてる。
  追記:ちょっと触ってみたら実は凄かった
  追記2:使い勝手などをまとめて見ました。
  最強のJavaScript IDE 「WebStorm」を使ってみた
• Komodo IDE
  デバッグ系機能がないkomodo Editもある。
  komodo Editはオープンソース版のOpen Komodoもあるらしい。
  XULと親和性が高そうで Komodo Edit が面白い – hogehoge @teramako
• Spket IDE
  以前何か書きましたJavaScript向けIDE「Spket IDE」の導入 | Web scratch
  IDEの中では軽くて、Firefoxの拡張向けの機能もある。
• Visual Studio 2010
  またまたーって感じがするけど意外と凄い子。
  neue cc – JavaScriptエディタとしてのVisual Studioの使い方入門を読みましょう。
  Visual Studio 2010はデフォルトでjQueryをサポートしています。
• NetBeans
  JavaのIDEとして有名。PHPのセット内にJavaScript対応が含まれている。
  Editing JavaScript – NetBeans IDE 6.x TutorialやJavaScript – NetBeans Wikiを参照。
• JSDT – Eclipsepedia
  結構昔からあるEclipseのプラグイン。
• KompoZer – Easy web authoring
  どっちかというとWebページ作成のHTMLエディタ。
  WYSIWYGなHTMLエディタ。
• Adobe Dreamweaver
  AdobeのWebページ作成ツールなのであんまりJavaScript向けとは言えないけど、Webページエディタとしてはかなり優秀だと思います。
  CS5ではJavaScriptのコード補完やその場でプレビューして実行もできます。(ちょっと補完は中途半端)
  ちなみにDreamweaver CS5で使われてるレンダリングエンジンはWebkitです。
  CSSのインスペクタなど表示確認としての機能はかなり優れているので、Webページの一部としてJavaScript書くならありな選択肢だと思います。
  参考 【レビュー】「Adobe Dreamweaver CS5」新機能徹底レビュー(中編) | クリエイティブ | マイコミジャーナル
  またDreamweaverはAdobe製品なのでJavaScriptを使って拡張することができます。(ちょっと語弊あるけど)
  APIのリファレンスはAdobe Dreamweaver * Adobe Dreamweaver CS4 API リファレンスに書いてあります。またDreamweaver DOMというものが存在し深いとこまでカスタマイズできそうな感じがします。
  Dreamweaverの拡張機能まとめ | Archを読むとどんな拡張があるかが分かると思います。
• Eclipse HTML Editor Plugin
  名前の通りEclipse系のプラグイン。
  作者が日本人で、最近のバージョンではJavaScript機能の強化がいろいろ入ってきています。
  AmaterasIDE_2_0_7 – Amateras Wikiや作者のブログを読みましょう。
  手軽に試すなら、AmaterasIDEInstallerをインストールして、Eclipse HTML Editorを最新のものに置き換えればいいと思います。
• CodeLobster
  エビ。PHPメインでプラグインでjQueryとかの対応があるのでオマケ程度

全部試したわけではないですが、個人的にはAptanaやDreamweaverなど有名な所のできは悪くないです。
Aptanaは無料で使えて機能も充実してるので、重くなければもっと使われてる気がします。(JavaScriptだけなら通常のエディタでも十分通用するので好みによりますが)
IDE全般としては、クロスプラットフォームに対応しているのが殆どだったりします。
エディタとIDE、どちらが優れているとかではなくどっちも優れている部分を持っているので使い分けるのが良いと思います。

いろいろ巡った感想としてjQueryをサポートしてますって書いてるものが多いなーと思った。
IxEditとか見てると、JavaScript言語とは別にjQuery言語があるって思われる日がやってきそう。

元ネタ

Good JavaScript IDE with jQuery support – Stack Overflow

http://stackoverflow.com/questions/209126/good-javascript-ide-with-jquery-support

最近使ってたりするJavaScript関係のツールまとめてみた。
主にWebサービスです。

• Global is the new private
  JavaScriptライブラリの名前空間汚染をチェックするツール。
  元々載ってるもの以外でもAnalyze your own scripts!から調査したいライブラリを追加できる。
• jsFiddle
  ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。
  Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。
  エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。
  HTML5のコードを使うにはInfoからDTDを変更してから使う。
  類似:MooShell
• Gist – GitHub
  gistです。コードスニペット共有サービスです。
  Greasemonkey貼るときgist fill in fileName automatically for Greasemonkeyを使うと楽です。
• jsPerf
  benchmark.jsを使った比較ツール。JavaScriptのスニペットを登録して処理時間を比較できる。
  実行結果がサイトに記録されるので、他人がやった結果がどんどん貯まるのも良い点。
• HiFi Regex Tester
  JavaScriptの正規表現を確認できるツール。
  類似:RegExpChecker.js
  正規表現関係で、正規表現をオートマトン的に図示してくれるstrfriendも便利です。
• Pretty Diff
  JavaScript、CSS、CSV、HTMLのコードを整形、圧縮、Diffなどができる。
  いろんなものを詰め込んだ感じのツール
  JavaScriptの整形自体はJS Beautifierが好き(Pretty Diffでも使ってる)
• Experimentation Harness
  DOMイベントの調査ツール。
  DOMイベントが網羅的に載ってるので確認に使ったりする。
• Keycode library test
  キーボードのキーコード調査ツール。
  修飾キーとの組み合わせにも対応してます。(各ブラウザのキーコード表[JavaScript])
• Online JSON Viewer
  JSONビューアー。ツリー表示や整形機能。
  Firebugとかでみたりもするけど、UIが好き。
• エンコードマニアックス – 各種エンコードやハッシュを一発作成
  エンコード/デコード結果がまとめて見られるので結構使います。
  汎用的に使えます。
• Unicode code converter [ishida >> utilities]
  同じくエンコード。数値文字参照とかJavaScriptのエスケープ。
  少し特殊っぽいの多め
• XPath検索バー (for Mozilla/Firefox) | 東京嫉妬
  XPathのチェックブックマークレット
  ちょっとだけいじった気がするバージョン : XPath Tester
  Firefoxの拡張だとxpath finderがシンプルで使いやすいチェックツール。
• XPathGenerator – Hatena::Let
  インスペクタからクリックで要素のXpathを生成するブックマークレット

2010.8月末にTwitterのBASIC認証が終わったので、今までのまたニコぐりもんは動かなくなっていると思います。
なのでOAuth認証に対応してるまたニコニコ見てるを作ってみました。(作ったのは結構前だけどね)

• mataniconicomiteru for Greasemonkey

使用方法

まずはニコニコ動画の動画ページでステータスバーのGreasemonkeyアイコンを右クリック→ユーザースクリプトコマンドからOAuth認証をする必要があります。

コマンドを実行するとOAuth認証のパネルが出てくるので、ボタンからTwitterへ行きOAuth認証してPINコードをコピーしてテキストエリアに入力すると準備完了です。

認証済みだったら動画タイトル部分にまたニコのボタンが出るので、それをクリックしてコメントを入力してまたボタンを押せばTwitterへ投稿できます。(nico.msのURLを使って投稿します。

オリジナルの機能としてはコメント入力欄の右側に文字数のカウンターが付いてるぐらいです。

mataniconicomiteru for Greasemonkey

http://userscripts.org/scripts/show/83795

Jetpack SDKでcfx xpiによってxpiファイルを生成して、そのアドオンをインストールするとpackage.jsonのnameに書かれていた名前がアドオンの名前になります。
しかし、package.jsonのnameはパッケージの名前なので大文字やマルチバイト文字やスペースなどが使えず自由に名前をつけようとするとエラーになります。
名前を自由につけるにはpackage.jsonにfullNameというキーを追加して、そこにスペースや大文字(マルチバイトをつけるとエラーになった…)を使った名前をつけることで、cfx xpiによって生成されたアドオンの名前に反映されます。

{
 "id": "jid0-xxxxxxxxx",
 "version": "0.1",
 "description": "test",
 "name": "test-package",
 "fullName" : "THIS is TEST package",
 "author": "azu"
}

実際の生成の流れとしてはpackage.jsonにfullNameがなかったら、nameの中身がfullNameとして扱われるようになっているみたいです。
fullNameに日本語入れる方法はよく分かりませんでした。ユニコードエスケープしてもエラーになる。
生成されるxpiファイル自体のファイル名はnameの中身が使われるようです。

Google Web Historyに見たページを自動記録するアドオン(Jetpack SDK) | Web scratch

http://efcl.info/2010/0809/res1872/

Labs/Jetpack/JEP/31 – MozillaWiki

https://wiki.mozilla.org/Labs/Jetpack/JEP/31#Packages

GoogleではJavaScriptは特定のコーディングスタイルで統一されるようにClosure Linterという専用のスクリプトを使用しているそうです。
Google JavaScript Style Guide(Google JavaScript Style Guide 和訳)という規則に従ってjsのコードは書かれていて、その規則に沿っているかを確認するgjslintとその規則に合うように修正するfixjsstyleからなるスクリプトです。

インストール方法

How to Use Closure Linter – Closure Linter – Google Code
pythonで書かれているのでeasy_installを使ってインストールします。
まずはPythonをインストールしてなかったらインストールして、次にeasy_installコマンドを使うためにsetuptoolsを自分のPythonにあったものをインストールします。
WindowsならC:\Python26\Scriptsに環境パスを通せば、コマンドプロンプトからeasy_installが使えるようになるので、

> easy_install http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

と打ってたらインストールできます。(パス通してないならC:\Python26\Scriptseasy_install でも大丈夫)

*注意 (修正済み)
現在配布されるやつはfixjsstyleがTypeError: ‘NoneType’ object is unsubscriptableのようになって動かないので、

easy_install -Z http://closure-linter.googlecode.com/files/closure_linter-latest.tar.gz

という感じでファイルを展開するオプションをつけてインストールしてから、/python2.6/site-packages/closure_linter-2.2.1-py2.6.egg/
closure_linter/fixjsstyle.py の36行目にargfとなってるtypoがあるのでそれをargvにすれば動きます。

使い方

使い方は単純でHow to Use Closure Linter – Closure Linter – Google Codeを見ると分かりますが、

gjslint path/to/my/file.js
fixjsstyle path/to/file1.js path/to/file2.js

のようにファイルやディレクトリを指定して実行するだけです。
–strictオプションやディレクトリに対してまとめてやる再帰オプションもあります。またGoogleのコーディングスタイルではJsDocを使う事になってるので、それを無視するオプションもあります。

fixjsstyleはE4Xとか特殊なものは認識してないっぽいので無理に書けると構文エラーを出すようになったりしますが、
Googleのコーディングスタイルはそこまで特殊ではないので、ちょっとした確認に使えたりして便利です。
JavaScriptの整形にはOnline javascript beautifier(これ自体がJavaScriptで書かれているのでEmeditorやNILScriptで動かせるgist: 453042 – クリップボードのJavaScriptコードを整形してクリップボードに返すNILScript – GitHub)とかと併用すると面白いかも。

Introducing Closure Linter – Closure Tools Blog

http://closuretools.blogspot.com/2010/08/introducing-closure-linter.html