どこまでできる？ 無料ツールでWebサイト作成（4）

JavaScript開発ツールの本命！ FirebugとAptana

株式会社 セカンドファクトリー
新谷剛史
2007/11/16

ついに「Aptana STUDIO」がリリース

　先日、連載第1回と第2回で紹介したAptanaが、2年にわたる開発期間を経て「Aptana STUDIO 1.0」としてリリースされた。

　「Aptana STUDIO 1.0」には、「Community Edition」と呼ばれるフリー版と、「Professional Edition」と呼ばれる製品版が存在し、製品版は1年間の更新と優先的なサポート、最新開発版へのアクセスパスが付いて199ドル（現在はセール中？）で、以降更新のために1年ごとに79ドル、というプランが用意されている。Professional EditionはIE（Internet Explorer）のデバッグサポート、JSONエディタ、SFTP／FTPSサポートなどの機能が用意されるのがCommunity Editionとの違いだ。

図1　Aptanaのサイトがリニューアル

　そこで今回は当初の予定を変更し、前回に続いてFirefoxのプラグインFirebugについて紹介後、新しくなったAptanaについて紹介することとしよう。

JavaScriptの開発環境としてのFirebug

　前回のFirefoxプラグイン「Firebug」の紹介では、主にHTML／CSSに関する機能の紹介を行った。今回はその続きということでJavaScriptの開発の際に役立つ機能を紹介する。（注意：ECMA Script準拠の処理をJavaScriptと呼ぶのが一般的なようだが、ここでは独自の拡張がされたJScriptなどを含めてJavaScriptと呼ぶことにする）

編集部注：JavaScriptとECMAScriptについて詳しく知りたい読者は、「いまさら聞けないJavaScript入門」の「聞くも涙、語るも涙の（？）JavaScript史」をご参照ください。

■ 便利なJavaScript／Ajaxライブラリの広まり

　Ajaxの広まりとともに再度見直されたJavaScriptだが、その背景にはさまざまなライブラリが開発されたことが大きいのではないかと考えている。ライブラリを使うことで、それまでの開発のように、Webブラウザ間での挙動差に常に気を配りながらコーディングを行う、という手間がかなり解消されるからだ。

　ライブラリの種類も多い。Yahooの提供する「YUI（Yahoo! User Interface Library）」やAdobeの「Spry」、Microsoftの「ASP.NET Ajax」、そのほかにも「prototype.js」「Dojo」「jQuery」などなど、さまざまなライブラリがリリースされており、JavaScript／Ajaxの開発はここ数年で非常に楽になったといえるだろう。

編集部注：JavaScript／Ajaxのライブラリについて詳しく知りたい読者は、「Webアプリに使えるAjaxライブラリ8選！」や「Ajaxフレームワーク「Spry」で作る「リンク集2.0」」をご参照ください。

■ では、なぜJavaScript／Ajaxにも開発環境が必要なのか？

　ところが、ライブラリの充実によりJavaScriptのコーディングはほとんど行わなくても良くなっているものの、あくまでもライブラリのため、（当たり前だが）多少のコーディングは必要となってくる。

　また、ユーザーのすべての要求がライブラリで解決されるわけではなく、場合によってはJavaScript／Ajaxのコーディングを行わなければならないということもあるだろう。そんなときに役立つのが、JavaScriptの開発環境だ。

　後ほど紹介するAptanaもJavaScript向けの開発環境だが、WebブラウザベースのFirebugも、JavaScript／Ajaxの開発という意味では魅力的である。それでは、JavaScriptのコーディングをサポートしてくれる機能を紹介していこう。

今回は画像の透過設定をするサンプルで検証

　今回紹介する開発環境でテストしたソースコードはこちらからダウンロードが可能だ。画像に対してスタイルシートで透過の設定を行い、フェードイン・フェードアウトするというものである。

今回のサンプルプログラム（拡大表示はこちら、「サイトトップ」をクリックするとアニメーションが始まります）

■ サンプルの注意点

　サンプルの透過処理は、IE、Safari、Opera、Firefox、Netscapeの各Webブラウザを対象としている。各Webブラウザの正規リリース最新版で動作確認をしているが、今回は開発環境の紹介をメインとしているため、このソースコードに関する動作確認は必要最小限としている。

　また、HTML／CSSも実験的なもので、<div>タグを最小限にするように試みたものを使用している。各Webブラウザの最新版ではフィックスドレイアウトだが、例えばIE 6では意図した表示と異なり、リキットレイアウトのように見える。背景画像の設定によっては、（確認はしていないが）Operaの古いバージョンではハングアップしてしまう可能性もあり得るので、実際の使用の際には注意してほしい。

■ 各Webブラウザの透過に関する設定値とサンプル表示例

　各Webブラウザの透過に関する設定値の情報は下記のとおり。

表　各Webブラウザの透過に関する設定値の情報

Webブラウザ CSSプロパティ 設定値 IE alpha（opacity=設定値） 整数：1〜100 Safari・Opera opacity：設定値 小数：0〜1.0 Firefox・Netscape -moz-opacity：設定値 小数：0〜1.0

　サンプルでは、設定値を変化させて、フェードイン・フェードアウトを実現している。

　なお、Ajaxライブラリの中はフェードイン・フェードアウトを簡単に実現しているものもあるので、興味のある方は調べてみてほしい。

　それでは次のページでは、Firebugのデバッグ／開発で使う「コンソール」と「スクリプト」画面を紹介しよう。

1-2-3

INDEX
どこまでできる？ 無料ツールでWebサイト作成（4） JavaScript開発ツールの本命！ FirebugとAptana
	Page1 ついに「Aptana STUDIO」がリリース JavaScriptの開発環境としてのFirebug 今回は画像の透過設定をするサンプルで検証
	Page2 ぜひとも活用したい「コンソール」と「スクリプト」画面
	Page3 Aptana STUDIOは無償版と製品版の2つ 次回はCSSデザイン用ツールについて

リッチクライアント＆帳票 全記事一覧へ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）