Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜

Ajax Webアプリケーション作成にあたり、技術的メモや奮闘内容、未解決問題等を掲載していきます。 もちろん、関西温泉マップはβ版なので無料でご利用いただけます。


私おすすめのレンタルサーバー | ここが便利！レノボWeb広告限定ストア

FirebugでJavaScriptライブラリをちょっと動かしてみる

JavaScriptライブラリをちょっと使ってみるには、HTMLファイルを用意して、ブラウザでロードしてという手順を踏むことになると思います。

このちょっとした面倒を解消するちょっとしたTIPSです。

Firebugのコンソールを使います。
JavaScriptの動作を確認するのに、HTMLファイルは用意しません。

以下、Prototype.jsをちょっと使ってみる場合です。
Prototype.jsをテキストエディタ等で開きます。全選択、全コピーしてから、
Firefoxを起動して、Firebugのコンソールを開きます。
※Firebugのコンソールの使い方は以下を参照。
・Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜 Firebugの導入とコンソールを使ってみる。

Console画面の>>>と表示されている部分に、コピーします。

うまく読み込まれたかどうかは、再度>>>に下記コマンドを入力してバージョンを確認します。
Prototype.Version

この後に続けて試したい処理を実行することができます。

Firebugの導入とコンソールを使ってみる。

Firebugは”導入”というほど大そうな作業ではないですが、以下の手順で行います。
Firefoxブラウザで以下のリンクにアクセス。インストールボタンを押下するだけ。

・Firebug :: Firefox Add-ons

インストールが完了すると、Firefoxの再起動を要求されるので、再起動をすれば導入済みというわけです。

早速使ってみましょう。
Ctrl + Tabキー等でブランクページを開きます。

Firebug起動


ブラウザ右下に緑のチェックがあるのでクリックするとFirebugが起動します。

Firebugコンソール


Console画面の>>>と機銃された部分に、以下を記述して実行すると、下図Firefoxのように実行結果「Hello World!」が表示されます。
document.write("Hello World!")


Firebug Hello World


と、まぁこんな感じでJavaScriptコードがコンソール画面で試せそうですね。

Aptanaの導入と日本語化

以前書いた記事、
・Ajaxアプリケーション向けの統合開発環境Aptana Studio 1.0リリース

で紹介したAptana Studioの導入および日本語化について実際にやってみたのでメモしておきます。ちなみに、AptanaはEclipseベースと書かれていますが、Eclipseのプラグインではなく、単独で実行できるexeファイル形式で配布されています。

【環境】
・Windows XP SP 2
・JRE：1.6.0_03
・Aptana Studio, build： 1.0.2.004822

１．Aptanaを入手します。
　下記サイトより、プロフェッショナルエディションとコミュニティエディションが公開されているので、無償版コミュニティエディションである「Download Community Edition(with optional Pro Plugin Trial)」をクリックします。
　ちなみに、プロ版とコミュニティ版の違いは同ページに掲載されています。
　・Aptana Studio: Compare Versions

※ここではWindows版のzipファイルをダウンロードする手順を書きます。
ダウンロードページでWindows Zip版を選択し、「Download」ボタン押下。

ダウンロードが開始されます。

２．解凍
　ダウンロードが完了したら、適当なフォルダへ解凍します。

３．日本語化
　各ニュースサイトにあるAptanaの紹介文で、「Eclipseベースに作成された・・・」とあるように、構造はEclipseと同じなので、Eclipseと同じような手順で日本語化できます。
　Eclipseのサイトから入手しても構いませんが、筆者が入手場所を忘れたので、下記サイトから入手します。
・Pleiades (Eclipse プラグイン日本語化プラグイン)

上記サイトの Pleiades 本体をダウンロードします。ここでは「安定版」である1.2.0をdダウンロードし、同様にzipファイルを解凍します。
Aptanaを配置しているフォルダに「features」フォルダ「plugins」フォルダがあるので、そこへ解凍できたものを上書き保存してやれば完了です。

Aptana日本語化完了


[2008/02/16追記]
現在のヴァージョンでは、日本語になってくれないので補足。
上記手順で解答したフォルダ内に「AptanaStudio.ini」というファイルがあるので、
そのファイルの一番最後の行に以下を追加する。

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar


これでAptanaを再起動させると日本語化されてます。
若干、起動が遅いですが・・。

Ajaxアプリケーション向けの統合開発環境Aptana Studio 1.0リリース

Eclipse IDEをベースに開発されたJavaScript/HTML/CSS向け統合開発環境。

各紙での評判が良いので掲載しておく。
・Aptana Studio: Compare Versions

【各紙の記事】
・Web 2.0統合開発環境、2年の開発を経てついに登場 - Aptana Studio 1.0 | エンタープライズ | マイコミジャーナル
・Web開発者は必見！IDE「Aptana Studio1.0」リリース:ニュース - ZDNet Japan
・CodeZine：「HTML、CSS、JS、PHP、Ruby、AIR」 フリーの開発環境Aptana 1.0リリース（エディタ, ツール）

【使い方など】
・AptanaでWebページ作成はここまでできる！（1/3） − ＠IT
・Aptana.jp | Aptanaの日本語ローカライズを目的としています。

試せばわかる！Ajax開発環境ASP.NET AJAXのまとめリンク

ASP.NETによるAjax開発が紹介されている記事。

・[ThinkIT] 第1回：マイクロソフトキーマンが語る 〜ASP.NET AJAXはこうしてうまれた (1/3)


・[ThinkIT] 第2回：ASP.NET AJAXのインストール (1/4)

・[ThinkIT] 第3回：ASP.NET AJAXを使ってWebページを作成する (1/4)

Webアプリ開発者向けFireFox拡張機能のまとめサイト

・【特集】Webアプリケーション開発者向け Firefox拡張機能 33+1選 (1) FirefoxでWebアプリの開発を支援 (MYCOMジャーナル)

当ブログでも以前、Webアプリ開発者向けの拡張機能を紹介した。
・Selenium：Webアプリのテストを自動化するツール
・Ajax最強のデバッグツールFireBug 1.0

もちろん、これらは定番の為、上記まとめサイトに掲載されていが、
３３＋１ということで合計４４の拡張機能について紹介されていた。

後々、絶対役に立つのでメモメモ。

Selenium IDEをインストールする

・Selenium IDEのダウンロードページ

2007/3/25時点の最新は、
2007/03/21にリリースされたばかりの0.8.7のインストールを紹介する。
上記、ダウンロードページより0.8.7のバージョンをクリックする。
図１参照。

-図１Selenium IDEダウンロードページ-
Selenium IDE download page


図１の手順でダウンロードおよびインストールが終わると図２のように、インストール結果が確認できる。

-図２インストール完了画面-
Selenium IDEインストール後


では、ちょっと遊んでみよう。
図２のように[ツール]-[Selenium IDE]を選択し、下記のダイアログを開く。

Selenium IDEダイアログ


このダイアログは放っておいて、
ブラウザからGoogleを開き、当ブログである「Ajax Webアプリケーション奮闘記」を検索してみる。その検索結果から当ブログをクリックする。

そうすると、先ほど開いたダイアログになにやら記録されていくのがわかる。図３参照。

-図３当ブログを検索したときの記録-
Selenium IDE記録


この状態で、図３の三角の[再生]ボタンをクリックすると、先ほどの検索手順をそのまま実行してくれる。ちょっと面白い。

このようにユーザの観点からテストを自動的に実行することができる。

Selenium：Webアプリのテストを自動化するツール

・OpenQA: Selenium

日本語ではセレニウムと呼ばれている。一見、外人が使ったかのような名称だが、実は製作者は日本人。

・日本が世界に誇れるテストツールSelenium IDE

SeleniumはWebアプリケーションテストを自動化するツール。不具合を修正した際に、該当箇所のテストを実施するだけでなく回帰テスト（リグレッションテスト）として全テストを再実施することが容易に行えるメリットがある。

Seleniumは以下の３つで構成されている。
・Selenium Core
JavaScriptとDHTMLで作られたSeleniumの中心部。

・Selenium IDE
FireFoxの拡張機能として実装。テストを記録・編集・実施を行う。

・Selenium RC
さまざまなプログラミング言語を用いて、任意のHTTPウェブサイトに対するUIテストを主要なJavascript対応ブラウザにて実施することができるテストツール

以前、ご紹介したFireBugが単体テストでデバッグを行うFireFoxエクステンションであるのに対し、Selenium IDEは結合試験や総合試験を行うのに便利な機能である。

・Ajax最強のデバッグツールFireBug 1.0

[関連リンク]
・Selenium 0.7利用手順書（前編）
・CodeZine：Selenium 0.7利用手順書（後編）（テスト, Webアプリケーション, Selenium）
・CodeZine：Selenium 0.7 TipsとExcelによるDB初期化（テスト, Webアプリケーション, Selenium）
・これはすごい! Web案件必須 Selenium - 人気急上昇中自動テストツール

JSEclipse:"ウィザードを開始するときに問題が発生しました。"という不具合

以前紹介した、JSEclipseプラグインで不具合発生。
2006-12-14にリリースされているJSEclipse - version 1.5.3は、まだプレリリースということもありバグが存在するようだ。

[再現方法]
Eclipseを起動し、
[ファイル]-[新規]-[その他]をクリックし、
図１のJSClassを選択し、次へボタンを押下する。

-図１新規ウィザード選択画面-
eclipse新規ウィザード


すると、図２のような不具合が発生する。

-図２ウィザードを開始するときに問題が発生しました-
JSEclipse不具合画面

「選択状態したウィザードは開始できませんでした。
プラグイン com.interaktonline.jseclipse はクラス com.interaktonline.jseclipse.ui.newwizard.JSClass をロードできませんでした。」と表示される。


この現象はAdobe Labsのフォーラムでも質問が上がっており、不具合として報告されている。
・http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=629&threadid=1224131&enterthread=y


上記フォーラムでは、次期リリースで改善予定とのこと。
それまでの対処方法として、以下に記す。

[現時点での対処方法]
Eclipseの[ファイル]-[新規]-[プロジェクト]を選択
図３のように一般のプロジェクトを選択し、次へボタンを押下する。

-図３新規プロジェクト-
eclipseプロジェクト新規作成


次に適当なプロジェクト名を入力して、終了ボタンを押下する。（プロジェクト作成完了）
図４参照。

-図４プロジェクト名入力-
Eclipseプロジェクト名入力


そして、プロジェクトを作成したパスにプロジェクト名のフォルダが追加されているので、そこにJavaSciptファイルを置くか、新規でJavaScriptファイルを作成する。
Eclipseの[ファイル]-[新規]-[ファイル]を選択。適当なファイル名と拡張子に”.js”と付け、終了ボタンを押下する。
図５参照。

-図５新規ファイル作成-
JSEclipseファイルの新規作成


これで、作成したプロジェクトにJSファイルが追加されている。
図６参照。

-図６JSファイル追加-
追加されたJSファイル

JSEclipseプラグインを導入してみる。

先日紹介した、Eclipse の JavaScript 開発用のプラグインを導入してみる。
現在、プレリリース版ということで、バグなどの報告もあるようだ。
・JSEclipse：Eclipse の JavaScript 開発用のプラグイン

JSEclipse - version 1.5.3 of 2006-12-14
[動作環境]
Eclipse SDK 3.1以上
Java(JRE)：バージョン1.5以上
空き容量:2MB以上


Eclipseを起動し、[ヘルプ]-[ソフトウェア更新]-[検索およびインストール]を選択する。図１参照

-図１ 検索およびインストール-
検索およびインストール


次にインストール／更新画面が表示されるので、
インストールする新規フィーチャーを選択し、次へボタンを押下する。
図２参照。

-図２ インストール／更新画面-
インストール／更新画面


インストール画面が表示されるので「新規リモート・サイト」をクリックする。図３参照。

-図３インストール画面-
インストール画面


次に新規更新サイトが表示されるので、以下の情報を入力し、ＯＫボタンをクリックする。名前の欄はわかりやすい名前をつける。図４参照。
URL：http://download.macromedia.com/pub/labs/jseclipse/autoinstall

-図４新規更新サイト-
新規更新サイト


終了ボタンを押下すると、更新の検索結果が表示される。図５のように表示されていれば次へのボタンを押下する。すると、インストールが開始される。

-図５更新の検索結果-
更新検索結果


インストールが完了していれば、[ウィンドウ]-[設定]で、
図６のように確認できる。

-図６JSEclipseプラグイン導入完了-
JSEclipse導入完了

JSEclipse：Eclipse の JavaScript 開発用のプラグイン

・Adobe Labs - JSEclipse

JSEclipseはその名の通り、EclipseのJavaScript用開発プラグイン。
JavaScriptのコーディング補助などを行ってくれる。
Eclipseのプラグインということで導入すれば、補完機能などが便利だ。

[参考サイト]
・【ハウツー】JavaScriptの開発の決定版!? AdobeからJSEclipse (1) JSEclipseとは (MYCOMジャーナル)

Eclipseのダウンロードと日本語化

2007/03/17現在、Eclipse最新バージョンは3.2.2
このバージョンについてダウンロード手順をメモ。
まず、下記サイトにアクセス。

・Eclipse.org home

図１のようにダウンロードページへ移る。

- 図１ Eclipseホームページ -
edホームページ


クリックすると最新バージョンがダウロードできるページへと移る。図２のリンクをクリックする。

-図２ 最新バージョンダウンロードページ-
sdkダウンロードページ


最新バージョンを選択するとどこのサーバからダウンロードするか選択できる。特に指定がなければ、図３に示すところでよいが、リリース情報が出た直後などは混雑するので、下のミラーサイトからダウンロードをオススメする。


-図３ダウンロード先-
ed日本語化ダウンロード先


ダウンロードしたファイルを解凍すると、図４のようにファイルが展開される。この段階で、eclipse.exeをクリックすればEclipseが起動がする。

-図４ 解凍完了-
edsdk解凍


しかし、図５のようにEclipseは英語表記だ。
コレを日本語化する手順を以降に解説する。

-図５ Eclipse初期起動-
ed初期起動


再び、先ほどのページへと戻る。図６参照。
All versionsというリンクをクリックする。

-図６ All versions-
edlp日本語化


図７のようにLangage Packをクリックすると日本語化用のファイルがダウンロードされる。

-図７ Langage Pack-
ed日本語化ダウンロード先


ダウンロードできたら、解凍し、図８のように既に展開しているeclipseフォルダ配下にコピーする。

-図８ 上書きコピー-
edコピー


これで起動すると、図９のように日本語化されて使えるようになる。

-図９ 日本語化成功-
ed日本語化成功

Eclipse、Ajaxやスクリプト言語向けのプロジェクトを発表

C-NET Japaの記事によれば、

・Eclipse、Ajaxやスクリプト言語向けのプロジェクトを発表

Eclipse FoundationはAjax関連のプロジェクトを３つ発表した。
そのプロジェクトは、

Ajaxアプリケーションの作成に用いられるJavaScriptや、そのほかのスクリプト言語向けのツールを充実させることを目的としたもの



以下にその３つ掲載する。
��Eclipse Rich Ajax Pratform
Ajaxアプリ開発において再利用可能なソフトウェアをあらかじめ用意することを目指すプロジェクト

��Eclipse Ajax Toolkit Framework
Eclipse Ajax Toolkit FrameworkがMac OS Xに対応。

��Eclipse Dynamic Languages Toolkit Project
Eclipseを用いた、Python、Ruby、Tclでの開発作業を用意にすることを目的としたプロジェクト。

テーマ:JavaScript - ジャンル:コンピュータ

Ajax最強のデバッグツールFireBug 1.0

このFireBug 1.0というツールは、FireFoxエクステンション機能の一つ。

Firefoxで閲覧しているページの内容を分析し、編集、デバック、モニタリングなどを実施することができる。

この記事を発見したばかりなので、
・これは凄い! Ajax最強のデバッグツール"FireBug 1.0"リリース
どれだけスゴいのか？まだこの目で確かめていないが、
FirebugがあるからFirefoxを使っていると言われるくらいのスゴいエクステンション機能のようだ。

上記記事には、インストール方法および使い方まで記述されている。

このリリースされた1.0版はCSSの内容をリアルタイムに編集できたりHTTP/XMLHttpRequestにおいてやりとりされている内容も簡単に解析できる。
JavaScriptの処理に関してログをとるためのconsole.logも用意されて．．．かなりありがたいエクステンションだ。

僕はこのご時世にOperaブラウザを使っている。
かれこれ３〜４年は使っているが、Ctrl+マウススクロールでWebページをスムーズに拡大縮小してくれる機能や、タブをサイドに表示させたりお気に入りのスキンがあるため、メインはOperaだ。

しかし、これだけFireFoxの活躍が目覚しいとメインブラウザをFireFoxに・・・と思ってしまう。
一応、会社ではFireFoxがメインブラウザだが。

無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て