Aptanaで始めるJavaScriptライブラリ「jQuery」超入門：jQueryで学ぶ簡単で効果的なAjaxの使い方（1）（2/3 ページ）

» 2009年03月02日 00時00分公開

Aptana Studio 1.2.1のダウンロードとインストール

　本連載では、2009年3月現在で最新版のAptana Studio 1.2.1を使います。Aptana Studioのページで「Download Now」のボタンを押し、遷移先でインストールするAptanaの種類を選択します。ここでは、「Installation Type」で「Standalone」、「Operating System」で「Windows」、「Download Type」で「Full Installer」を選択し、「Download Now」のボタンを押してダウンロードすることにします。

　ちなみにすでにEclipseを使っている人は、「Installation Type」で「Eclipse Plugin」を選択し、「Aptanaプラグイン」としてEclipseに導入するという方法もあります。

　ダウンロードした「Aptana_Studio_Setup.exe」をダブルクリックするとインストーラーが立ち上がるので、指示に従いながら［Next］ボタンで進んで最後に［Install］ボタンを押して、インストールを完了してください。

AptanaでjQueryを使うには？

　実際にjQueryを体験してみましょう。まずAptanaを起動してください。初回起動時には、ワークスペースとして利用するフォルダを選択しますが、特に問題がない限りデフォルトのままで大丈夫でしょう。［Use this as the default and do not ask again］にチェックを入れて［OK］を押しましょう。

図3　Aptanaの起動画面（画像をクリックすると、拡大します）

　無事起動できたでしょうか？「有償版のトライアルは30日……」と出ますが、気にせずに［OK］を押します。

　次に、プロジェクトを作りましょう。メニューの［File］→［New］→［Project］の順に選択してください。

図4　プロジェクト新規作成ウィザード

　そうしたらプロジェクト新規作成ウィザードが出現するので、［Aptana Projects］の中にある［Default Web Project］をクリックして、［Next］を押してください。［Project Name］は、ここでは「jquery」としましょう。［Next］を押すと、次の画面ではさまざまなJavaScriptライブラリを選択できます。

図5　［jQuery 1.2.6］を選択

　ここでは［jQuery 1.2.6］のチェックボックスをクリックして［Next］ボタンを押してください。jQueryのバージョンが今回ダウンロードしたバージョンと異なりますが、動作には問題ありません。この後は、デフォルトの状態のままウィザードを［Next］ボタンで進め、最後に［Finish］ボタンで終了してください。

　次に、これから利用するjQueryをAptanaに組み込みます。左下の［Project］ペインにある先ほど作成したプロジェクトの中に、「lib/jquery」フォルダがあります。そこに先ほどダウンロードした「jquery-x.x.x.min.js」をドラッグ＆ドロップしてください。

図6　「lib/jquery」フォルダにドラッグ＆ドロップ！（画像をクリックすると、拡大します）

　以上でAptanaの準備が完了しました。早速サンプルを作ってみて、jQueryのシンプルさを体感してみましょう！

jQueryのサンプルを作成して体験してみよう

　ここからは、簡単なjQueryを使ったページを作ってみましょう。ボタンを押すと、メッセージを表示したり、メッセージを隠したりするシンプルなページを作ります。

シンプルなjQueryサンプル

　Aptanaのウィンドウからindex.htmlを開いたら、「<html～」以下すべてを以下のコードに上書きします。

<html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <script type="text/javascript" src="/lib/jquery/jquery-1.3.2.min.js">

      </script>

      <script type="text/javascript"><!--

        function hello(){

              $("#target").html("<strong>ようこそ、jQueryの世界へ！</strong>");

            }

              function hide(){

                    $("#target").slideUp();

                  }

                    function show(){

                          $("#target").slideDown();

                        }

                        --></script>

                        </head>

                        <body>

                          <div id="target">idがtargetのdivタグ</div><br>

                            <input type="button" name="btn1" value="Hello!" onclick="hello()">

                            <br><br>

                              <input type="button" name="btn2" value="Hide" onclick="hide()">

                                <input type="button" name="btn3" value="Show" onclick="show()">

                                </body>

                                </html>