2012年春の開発環境のまとめ

開発にテストは必須です。直しては試す、という試行錯誤の（連続の）工程を楽にしてくれるのが、今回ご紹介する以下のツールです。

中規模以上で、チームを組んでの開発では、EclipseやNetBeansなどの統合開発環(IDE)境やバージョン管理ツールを使う必要も出てくるのでしょうが、個人プレーの個人事業主ならこんなところかも。IDEよりエディタの方が速いですし。ちなみに、エディタはnotepad++を使っています。

[Firefox開発ツールまとめ]

Firebug
HTMLとCSSのデバッグツールとして定番。JavaScriptで動的に変化させてもソースをリアルタイムで確認できるすぐれもの。確認したいところを右クリックすれば即閲覧。動的に編集して、画面上で確認できるのでデザインの確認にも使えます。

Cookies Manager+
クッキーマネージャ。状態の保存・読込・編集が可能。
[保存時]→　保存するクッキーを「選択してから」、メニュー「File」→　「Save to file」
[読込時]→　メニュー「File」→　「Backup/Restore」より「Restore ALL」で復帰。
これを使うと、裏技でアップローダーサイトの有料プランを使うことができるみたいですね。セキュリティについて考えてしまいます。

urlparams
GET・POSTの確認と編集が可能。FireFox公式のアドオン紹介ページでは、最新バージョンにインストールできない。すごく便利なので、残念。UrlParams公式ページからはインストール可能です。

Selenium IDE
フォームへの入力値を保存できる。ステップごとに入力も可能。

Web Developer
ツールバーからたくさんの便利なツールが使えます。ブロック要素やイメージ、あるいはタグを指定して枠で囲む機能をよく使います。W3Cのエラーチェックページへ一発で移動できるのも便利。

（まとめ）
これらのアドオンを使うと、ふだんは見ることもできないクッキー、GET、POSTの値を編集したり、保存してすぐ復旧できるのは大助かりです。昔はフォームに何度も入力したり、スクリプトに確認用（出力用）のコードを書いて作っていました。もう二度と手放せません。
[ソースコードエラーチェック]
HTMLとCSSのコードチェックはW3Cを使っています。
勉強のために、より厳密な文法チェックを行うといわれる「Another HTML-lint gateway」を使うこともありますが、文法が100点=SEOで最高、なわけではないので、普段はW3Cどまりです。

・HTML/XHTML
http://validator.w3.org/

・CSS
http://jigsaw.w3.org/css-validator/

JavaScriptはここ数年、頻繁に使っている割にブラウザチェックのみで、恥ずかしながらデバッガは使っていませんでした。
Firebugで充分いけるようなので、以下メモです。

・JavaScriptのデバッグ→　 Firebugを使用。
[スクリプト]メニューより。
・読み込まれたJSファイルをリストから選択できる。
・行番号をクリックするとブレークポイント（赤い丸）が付く。
・ブレークポイントを付けた状態で読み込むと各オブジェクトの値が右側のフレームに表示される。
・ブレークポイントには条件を指定することが出来る。
・特定の変数/オブジェクトを監視するには、右フレームの「新しい監視点」をクリックし、監視したい変数名を入力する。

（まとめ）
HTMLやCSSは多少のエラーがあっても動くところが良くもあり、悪くもあり。JavaScriptも同様で、あとから動かなくなったというケースも多いようです。やっぱりどんな開発もテスト抜きでは失格ということですね。これからはJavaScriptもツールを使っていきます。

[ソースコード圧縮]
ここでいうソースコードの圧縮とは、読みやすく、管理しやすいようにつけた、コメントやインデント、改行をコードからとりのぞくものです。圧縮ツールを使うと、結果的に1行になります。コードの容量が減減ることで、ページが軽くなり、ユーザーの待ち時間を減らすことにつながります。

・CSS
最近は「Less」記法で書いて、AIRアプリ「Less Praser」で展開、自動圧縮しています。

・JavaScript
ウェブのツールを使用。　http://dean.edwards.name/packer/

（まとめ）
Lessは、プログラムの要領でスタイルシートが書けるようになる記法です。使い方には二通りあるようです。Lessで書いて、ブラウザにスタイルシートとして読ませるための専用のJavaScriptと併用で使う手法。もうひとつは、Lessで書いたコードから通常のCSSを出力し、圧縮も兼ねる手法。JavaScriptが使えない環境では前者の方法が使えないで、私はもっぱら後者の手法で制作しています。後者は専用のソフトウェアが必要ですが、展開・圧縮を自動で行ってくれるので楽ちんです。

[開発エディタ]
・notepad+++
海外では人気のエディタ。最新のポータブル版と、必要に応じて、日本語EUC対応版と2つ使い分けています。PHP、HTML、CSSの入力支援機能、矩形選択、セッション管理、スニペット、フォルダ検索など。開発に必要な機能が盛りだくさんですが、エディタなので動作が軽いです。プラグインで好みの機能を増やすことができますが、海外製のものばかりなので、日本での知名度はいまいちですが、最近マイコミでもとりあげられたり、じわじわとその良さが伝わっているようです。

・クリップNOTE
Windowsのフリーソフト。シェア版もあり。
スニペットを手早く入力できるツールとして重宝しています。ここでいうスニペットとはよく使うコードのことです。notepad+++にも同様のプラグインがありますが、エディタを問わず、ブラウザでもなんでも使えるので重宝しています。

(まとめ)
この他にも、TeraPad、Cassava Editor、Uneditor、行頭・行末なんでも追加・削除くん、NewLinesといったエディターを使い分けています。自分の制作環境にあったツールを探すのが大事だと思います。エディター大好きです。

[開発環境]
XAMPP
PHPとMySQLをメインに使っているので、一括でインストールしてくれるXAMPPがあれば充分です。USB Lite版をポータブルHDDに入れています。

（総合まとめ）
いかにして効率よく作業ができるかが開発の肝です。スピードだけではなく、バグをいかに速やかにつぶしていけるかを常に考えて道具を進化させていかなければなりません。特にウェブは常に新しいものが出てくる世界。現状に満足していてはいけません。CSSのLESS記法を知った時は驚きましたが、今はこの方法以外で書こうとは思いません。