【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷

どこまでできる? 無料ツールでWebサイト作成(4)

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


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

2007/11/16

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

- PR -

 先日、連載第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のサイトがリニューアル
図1 Aptanaのサイトがリニューアル

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

JavaScriptの開発環境としてのFirebug

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

編集部注:JavaScriptECMAScriptについて詳しく知りたい読者は、「いまさら聞けない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デザイン用ツールについて



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


ホワイトペーパーTechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

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

RSSフィード

スキルアップ/キャリアアップ(JOB@IT)

お勧め求人情報

キャリアアップ 〜JOB@IT
@IT Special -PR-
  TomcatやJBossなどAPサーバ環境に関する
情報を集約! “業務”用APサーバ大百科

New!
  一気に解説! 最新のクラスタストレージ
「RAIDを超えたストレージ基準」……など

New!
  クラウド的ユーザー体験の変化は脅威か?
仮想化技術を使いこなす運用管理術を紹介

New!

  上司や部下、部署内メンバーとの情報共有
を“ガラッ”と変えるコラボツールとは?

New!
  おばかアプリ選手権、第4弾開催中!!
ムダにカッコよくてくだらない作品求ム!

  社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介

  Twitterのアカウントはなぜ突破された?
メールによる新手の攻撃手法とその対策

  もう仮想化のお試しフェイズは終わりだ!
Hyper-V 2.0が基幹システムも仮想化

  美人!? まあまあ? 気になる いやし系!!
PV急増で「美人時計」がとった手段とは?

  クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

  .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は?

  業務効率と情報セキュリティ対策を両立!
手間なく確実に機密情報を守る方法とは?

  進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か

  運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは?

  【CTC事例】約30の基幹システムを統合!
膨大なバッジジョブを制御した方法は?

  仮想化すればコストは削減できるか?
仮想化に必要な「3つの視点」を解説する

  その数、なんと400台以上! グループ内
サーバの「統合管理」によるメリットは?