Archive for 10月, 2010

最強のJavaScript IDE 「WebStorm」を使ってみた

10月 27th, 2010

JavaScript対応のIDEをまとめてみたの続きのようなもので、その中で紹介していたWebStormが素晴らしいので別途紹介。
WebStormはHTML(5)+CSS+JavaScriptに対応してるIDEで、Windows, Mac OS、Linux上で動作します。
有料のソフトウェアですが、オープンソースライセンスがあったり体験版は45日間使えるのでとりあえず試してみましょう。

特徴

とにかく膨大な機能が載ってるので全てを紹介するのは無理があるため、凄いと思ったところを掻い摘んで紹介。
主にJavaScriptを書くエディタとして使っていますが、CSSやHTMLも普通のIDEより書きやすいです。
基本的にWebStormで日本語に関する問題は少なめです。一部IMEの変換候補が出てくる場所がずれたり、プラグインで日本語がダメだったりするものがありますが、殆ど問題ではない程度です。文字コードはShift_JIS(windowsだとwindows-31j)も対応しているので問題にはならないと思います。

優秀なコード補完機能

WebStormはソースコードを自動的にコ－ド解析(静的解析?)してるようで、JavaScriptの構造を認識してコード補完を行えます。
例えば@teramakoさんがKomodo Edit が面白いで言っていたような

var container = {
  init: function() {},
};
container.obj = (function(){
  var privateProp = null;
  var namager = {
    publicMethod: function(){ },
  };
  return namager;
})();

というコードの場合container.obj.pu と書くとちゃんとpublicMethodも補完候補に表示されます。
さらにpublicMethodはメソッドなのでcontainer.obj.publicMethod()という形で補完されて、今は仮引数がないのでカーソルの位置は)の→になります。仮引数があると()の中にカーソルが置かれます。

ネイティブの補完候補もHTML5,ECMA,DOMCoreや結構細かいものも対応していて補完でアレが出てこないって事はかなり少ないです(ブラウザ拡張開発用とかは除いて)
補完候補は開いているディレクトリ以下のファイルを全部解析して表示してくれるので、ファイルをまたいだメソッドなども候補に表示されます。
今まで触ったJavaScriptエディタ、IDEで補完は最も素晴らしいと感じました。

JavaScript以外のHTMLタグやCSSも補完を行え、1つのファイルにHTML、JavaScriptなどが混在していた場合も正しく認識して補完が行える。HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Featuresで特徴がいろいろ紹介されています。

コ－ド解析による良さ


右サイドに警告レベル毎の表示

右サイドに警告レベル毎の表示


上でコ－ド解析してるのでインテリセンスみたいな事が凄くできるよと書きましたが、
他にもCtrl+クリックで関数宣言にジャンプ(Tipsで設定の変更方法が記載してあります)する機能や、リファクタリングで特定の変数名や関数名をリネームする機能(その名前を使ってるもの全部を変えてくれる)、Structureパネルでコードのアウトラインを表示できたりします。

後、文法が間違ってる場合などは警告なども表示できその設定も警告レベルから決められてかなり細かな指定が行えます。(JSLintみたいなもの?)

自動整形機能

個人的にIDEと言ったらコードの自動整形機能です。CodeメニューのReformat codeから実行できます。(ショートカットからもできる)
自動整形のルールはOptionのCode Styleからかなり細かく設定できるので、自分ルールに合わせて整形させる事ができます。


他にもページがあるぐらい多い

他にもページがあるぐらい多い


ショートカットキーはkeymap>Reformat codeで変更できます


E4X対応

Firefoxユーザー向けですが、構文解析がE4Xの記法に対応しています。
普通なら上記の自動整形でE4Xが混じってると崩れてしまって残念になりますが、E4Xもちゃんと扱えるので崩れません。
Firefox向けのコード、Greasemonkeyなどを書く人に使ってもらいたいところ。
(分割代入の記法にはまだ対応してなかったのはちょっぴり残念)

標準でバージョン管理機能がある


Gitのメニュー

Gitのメニュー



Vision Contorolメニューを有効にすると標準でローカルなバージョン管理が行えます。
デフォルトだと差分やrevertがができるLocal Historyが機能しますが、外部のバージョン管理ソフトと連携してSVN、Gitが使用できます。(Mercurialは標準ではなくhg4idea-luciadプラグインによって使用できます)
コミットやpushなどはIDE上からその場でできて、マージや差分表示などもできるので結構便利です。

JavaScriptデバッガー

Local JavaScript debuggingで紹介されてるようにFirefoxアドオンと連携したIDE上で動くデバッガが付いています。
他にもFirebugと連携して機能するプラグインなどもあったりしてFirefoxとの親和性は少し高め。

使い勝手

他の機能紹介はWebStorm Featuresやヘルプなどを見てもらうとして、使った感覚としてはそこまで重くは無いです。
起動はIDEらしくちょっとかかりますが(コード解析もあったりするので)、太ったEmacsの起動を我慢できるなら問題ない。
Aptanaみたいに長いコードだと極端に重くなるとかはないので、大規模なものでも扱えると思います(構造もみやすいし)
ショートカットはEclipse、NetBeans、Emacs、Visual Studio、Mac、GNOME、KDEなどの設定が最初から用意されていて、殆どの操作をカスタマイズできるので、自分好みにする事もできると思います。
Vimのキーバインドは標準ではなくプラグインのIdeaVIMによって使えます。(JetBrainsのIDEなら大体対応してる)
メモリは数十MB～多くても200MBいかないぐらいなので(ステータスバーにメモリ量が表示される)、少し古いPCでも動かせるぐらいです。自分のノートであるCore Duo T2300（1.66GHz）、512MBのPCでも使えるぐらいなので、最近のPCなら問題ないと思います。

UIが完全に英語ですが、設定は検索機能が優秀なので適当な単語からたどり着けることが多いし、表示している項目には全部ヘルプや説明が付いてるぐらいなので、オプションが豊富すぎるぐらいでそこまでつっかかりはないと思います。
(何ができないのかというのが少し分かりにくい感じではある)

Tips

メモみたいな

  • Productivity Tips 動画
    他のソフトだけど大体一緒なので参考になる。主にコード補完系
  • ショートカットキーはkeymapで変更できて、キーだけではなくてマウスクリックなどのショートカットもあります。
  • Ctrl+クリックで関数宣言にジャンプするのは keymap > Go to > declaration で設定変更できる。(デフォルトだとCtrl+B)
  • Find Action (Ctrl+Shift+A)でコマンド検索できる
  • ショートカット一覧(デフォルト)はPDFで配布もしてる WebStorm Resources
  • keymapでcomplete current statement(ctrl+shift+enter)が便利。最後の;が無かったら;を入れてくれて、あったら次の行へ。
    今の行のステートメントを自動的に補完してくれる感じ
  • Editor > Code Folding でコメントがデフォルトでたたまれるのを防止できる
    (Greasemonkeyとかデフォルトだとたたまれちゃうので)
  • File Templeteで${NAME}でファイル名が取れる(大文字区別する)
    適当な変数${test}を書くとファイル作成ダイアログでそれを入力して指定できる。
    例えばGreasemonkeyっぽいテンプレートを書くなら gist: 648943 – WebStormのFile Templete- GitHubみたいな感じ。
  • Editor > Editor Tabsでタブ位置を上下左右に変えられるので、縦置きタブバーも可能
  • JavaScript IntentionPowerPack。if-elseを||にするとか!から始まるifをflipして逆にするとか、リファクタリング関係のものが詰まってる。
  • 変数に下線とかの装飾はEditor > Color & Fonts > JavaScriptあたりから変更できます。
  • 文字コードの変更は画面下にある所をクリックでも変更できる
  • JetBrainsのIDEは大体形が同じ(扱える言語が違う)なので、他の種類のIDEのノウハウが使えることもある。

プラグイン

    から探せる(他にもあると思う)
    手動インストール方法はIntelliJ IDEA Plugin – TeamCity 3.x Documentation – Confluenceに書いてあるように、指定のpluginsフォルダにjarとかプラグインファイルをおいて、設定のpluginsから有効にすればいいみたい。
    けど、他のソフトを対象に書かれたプラグインは動作しない気がする。

  • eSnippet Pro plugin
    スニペットプラグイン。Ctrl+Alt+Spaceで補完のようにスニペットを追加できる。
    スニペットをオンラインに登録して、検索できる
  • CSS-X-Fire
    FirebugのCSSパネルのようにCSSを編集できるプラグイン
  • hg4idea-luciad
    Mercurial統合のプラグイン
    他のバージョン管理はデフォルトで大体ある。
  • デフォルトで入ってるスペルチェッカーは日本語に反応してうるさいので無効にした。

よく分かってないこと

やり方があったら教えて欲しいです。

  • いつでも参照できる補完候補の追加方法→実装されたWebStormのコード補完に新しく候補を追加する方法
  • WebStormを開いてる状態で、もう一回WebStormを開くと複数のウィンドウになるのをタブにまとめる方法→WebStorm-EAP-98.458でタブで開くようになった
  • 分割代入が整形機能で崩れる
  • 配列の最後に,がある時に警告がでるのを消す方法
  • 他のJetBrainsIDEのプラグインの入れ方がよく分からない(対応してないだけ?)

感想

とにかく機能が多くて、まだまだ使いきれない感じでさらにもうすぐ2.0がリリースされるので成長も早いIDEだと思います。
体験版が45日間と長いと思ったけど、1ヶ月使ってもまだ底が見えないので妥当な日数だと分かった。
珍しくタイトルが誇大っぽいけど、(現時点では)最強のJavaScript IDEは「WebStorm」だと言い切れるぐらい圧倒的できの良さ。
周りのJavaScript対応IDEと差がかなり大きいと思うので、後1-2年は追いつけるレベルのものが出てこない予感。
日本でのユーザ数がとっても少ない感じがするので、使ってどんどんブログなどに情報を書いてくれるともっと発展できるソフトウェアだと思うよ。

The best HTML, CSS and JavaScript Editor for Web development :: JetBrains WebStorm
http://www.jetbrains.com/webstorm/
HTML, CSS, JavaScript editing in an intelligent environment :: WebStorm Features
http://www.jetbrains.com/webstorm/features/
WebStorm
Posted in javascript, software | Tags: , , , , , | 2 Comments »

今からRSS購読すべきタグと検索結果

10月 25th, 2010

最近、お勧めブログのRSSを公開するのが流行らしいので少し視点を変えて、検索結果やSBMのRSSを購読すると面白いよという話。
面白いサイトのRSSを読むのは良いのですが、好みが偏ったりするので検索結果のRSSを購読すると新しいものを見つけたりできます。

本題の前に、どのようにRSSを読んでいるかというと、自分はLDRをレート順に並べて読んでいます。
レート読みは読みやすいので購読できるサイトが増やせると思います。

レートの配分は以下のようなルールでやっている。(あんまり明確ではないです)

  • ★5はエゴサーチ、個人的なもの
  • ★4は重要なサイト、検索結果
  • ★3は一般的なサイト(最初は大体ここ)
  • ★2はあんまり興味ないけど、たまにいい感じなサイト
  • ★1はノイズになったりするけど、たまに目を通す
  • ★0は基本的になし、ゴミ箱

自分の場合、タグなどの検索結果RSSは★4あたりにしています。
なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。
又、検索結果のRSSは更新数が安定してなかったりしてあまり本気で読むという感じにならないので、気分が乗らないときは丸ごと飛ばす事が多いのでそういう自分ルールを作ってたりしました(結構後付けです)
★5に個人的なものを固めてるのはPost Now browsing to Twitter for Greasemonkeyとか使ってTwitterへ飛ばしまくってるので、変なミスをしないようにとかそういう意識もあったりしてます。

という訳で本題に戻って、JavaScript関係のSBMのタグや検索結果で購読すると面白いサイトをまとめてみる。
特にJavaScriptに限らず興味あるものを検索して購読すると良いです。
(上に行くほど外れは少なめかも)

この話はJavaScriptというタグに限らず有効だと思うので、Twitter始めてからRSS見なくなったとか言ってる人は受動的だけど新しいものを探索できる検索結果RSSを購読してみてはいかがでしょう。

What are the top web development blogs, communities and aggregators? – Quora
http://www.quora.com/What-are-the-top-web-development-blogs-communities-and-aggregators
[ldr]レート管理のすすめ – suVeneのアレ
Posted in まとめ | Tags: , , , , , , | 2 Comments »

使ってないGreasemonkeyスクリプトを削除・整理するNILScript

10月 21st, 2010

Greasemonkeyはとても便利ですが、使用してないけどアンインストールするのが面倒で使わないスクリプトが貯まっていったりします。使わないスクリプトが貯まると猿アイコンを右クリックしたときに画面いっぱいになったり、管理画面が見づらくなったりしてとても邪魔になります。
そこで、今無効となっているスクリプトを適当なフォルダに移動して、Greasemonkeyスクリプトを整理するNILScriptを書いてみました。
(タイトルが削除とかなってますが、実際は移動させるだけ)

使い方

最初にgm_scriptsをバックアップして下さい(おかしな動作をして失敗しても大丈夫なように)
Firefoxが起動してないときに実行して下さい。

  • ngスクリプト(remove_noused_Greasemonkey.ng)をダウンロード
  • ngスクリプトをエディタで開いて、 var saveDirPath = “C:\\path\\to\\dir\\”; 移動先のディレクトリパスを書き換える
  • ngスクリプトをFirefoxのプロファイルフォルダにあるgm_scriptsフォルダ内に置きます。
  • Firefoxが起動してるならばFirefoxを終了しましょう
  • 必ずgm_scriptsをバックアップしてからngスクリプトを実行しましょう

ngスクリプトの実行方法はNILScriptの使い方と書き方やreadme.txtを見ると良いでしょう。
一応ログっぽいのも表示してるのでダブルクリック実行が手軽でしょう。
完了すると”無効になっているスクリプト m/n を移動しました”というメッセージが出て終わりです。

猿アイコンのコンテキストメニューがスッキリして気持ち軽くなりました(実際に動作が軽くなるかは知りません)
各Greasemonkeyがpref.jsに保存していた情報は消えてないので、完璧に綺麗になったわけではありません。
戻すときはバックアップしていたものを上書きすればもどせると思います。

utilityTools/Greasemonkey at master from azu/NILScript – GitHub
https://github.com/azu/NILScript/tree/master/utilityTools/Greasemonkey
NILScript
http://lukewarm.s151.xrea.com/nilscript.html
var saveDirPath = “C:\\Users\\azu\\Web\\Greasemonkeys\\”;// 移動先のディレクトリパス
Posted in NILScript | Tags: , , | 1 Comment »

Windows Updateの自動再起動を止めさせる方法

10月 17th, 2010

Windows Updateでいきなり再起動されてデータが消えたって話は未だによく聞くので自動的に再起動を防止する方法のメモ

Business以降のグレードならだったらグループポリシーを使えば設定できる
Homeとかpremiumはないのでレジストリを直接変更する必要がある。

レジストリを直接変更するのは面倒だと思うので、Prevent Windows Update from Forcibly Rebooting Your Computer – How-To Geekに置いてあるregまたはオンオフがGUIでできるソフトウェアを使うと楽です。

自動更新のダイアログが出ているときに、そのダイアログを黙らせるだけなら(防止はできない)
誠 Biz.ID：3分LifeHacking：「今すぐ再起動しますか？」のダイアログを“マホトーン”するで紹介されている、
XP にマホトーンをとなえるを使うといい。

もっと汎用的にWindows Update以外のソフトウェアによる再起動を防止したいのならShutdownGuardを利用するとその都度確認を取ってからシャットダウン・再起動・ログオフを行える。
追記:同様の事が「ちょっと待った」でも行える

ソフトウェアのリンクまとめ

 

Posted in software | Tags: , , , | No Comments »

JavaScriptベストプラクティス30選-jsEdu

10月 15th, 2010

#jsEduから適当に選んで日本語にしたものです。
訳とかは全く正確ではなく、as possibleなど表現をかなり省いてるので命令口調になってます。
フィーリング的なものはあんまり入れてないので、興味をもったらTogetter – 「JavaScriptのベストプラクティス大会 jsEdu」を読みましょう。(まとめた奴はこれの10倍くらいありますが、被ってるのや関係無いのもあるので読める程度の量です)
全てを確認したわけではないので、正確性は保証しかねます。

Read the rest of this entry »

Posted in javascript | Tags: , , | 1 Comment »
プロフィール: azu(ｱｽﾞ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
    • azu_re
  • メールアドレス(Twitterの方が確実)
    • info@ドメイン名
リンク

^ ページトップへ | このサイトについて | サイト管理
Copyright © 2009 Web scratch. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.