2012-04-30

Windows 7 64bitで、Eclipseを使ってWeb環境を整備する

2012年版

2010年に、「2010-09-18 Windows 7 64bitにEclipseとPDTをインストールする」というエントリを書いたのですが、その記事に色々と追記した記事になります。

1. 1. +

0.今回の目的
前回は、Windows 7 64bitにEclipseをインストールし、PHPの開発環境を整えようというものでしたが、今回は、それに加えてAptanaとZen codingのプラグインをインストールし、htmlの制作環境を整えるようにしています。ですので、ゴリゴリシステムを開発する人というよりは、Dreamweaverの環境をEclipseで構築するというのが、より適切かもしれません。

1.JDKのインストール
さて、まずはEclipseのインストールなのですが、今回は既にJDKがインストールされている状態となっています。ただ未確認ですが、JDKのインストールは同様に作業できるのではないでしょうか。
※以前の記事で、JDKのインストールに言及しています。
http://d.hatena.ne.jp/sasacky/20100918

2.Eclipseのダウンロード
次にEclipseのダウンロードを行います。
http://www.eclipse.org/downloads/

今回は『Eclipse IDE for Java EE Developers』をダウンロードし、インストールを行いました。よくEclipseは重いという意見を聞きますが、サブマシン(Windows Vista、Celeron 2.6GHz Dual Core、メモリ2GB)でも同じ環境を構築して使っているのですが、特に重いというような印象はありません。

3.PDTのインストール
次に、PDTのインストールを行います。

Eclipseを起動させ、Help -> Install New Softwareと移動します。

そうすると、プラグインのインストールウィンドウが表示されます。

そして、Work withのプルダウンの中に「Indigo - http://download.eclipse.org/releases/indigo」という項目があるので、それを選択します。そうすると、下にプラグインの一覧が表示されるので、Programming Languageという項目を探します。

さらに、左端の三角をクリックし、PHP Development Toolsを探し、チェックを入れます。
後は手順に沿ってインストールを行えば、問題なく完了すると思います。

最後に、右上にあるアイコンをクリックし、プラグインのウィンドウを表示させます。恐らく、PHPの項目は無いはずなので、Otherをクリックし別ウィンドウを表示させて、その中にあるPHPアイコンをクリックしPDTを反映させます。

4.Aptanaプラグインのインストール
次に、htmlの開発用として、aptanaをプラグインとしてインストールします。
まず、aptana.comにアクセスし、ダウンロードページに移動します。

http://aptana.com/products/studio3/download

ダウンロードページでは、スタンドアロンバージョンとプラグインバージョンがあるので、「Eclipse Plug-in Version」を選択し、ダウンロードボタンをクリックします。

そうすると、次のページでプラグイン用のURLが表示されるので、それをコピーしておきます。

次にEclipseに戻り、PHPと同様にHelp -> Install New Softwareと移動します。そしてWork withに先ほどのURLをペーストしEnterキーを押すと、Aptanaプラグインが表示されるので、同様にインストールを行います。

また、Aptanaを入れると動作が不安定になるという記事を見ましたが、自分の環境では、そのようなことはありませんでした。

5.Zen coding環境のインストール
最後に、Zen codingをインストールします。

Aptana同様にUpdateのページに進み、「http://zen-coding.ru/eclipse/updates/」というURLをペーストします。
後は、画面の指示に従いインストールを行います。

Zen codingでは、tabキーでタグの生成が行われるので、正しくインストールされた場合

div#header>ul>li*5>a

と入力しtabキーを押すと

<div id="header">
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

と表示されるはずです。