初心者がEclipseを使おうとしてみた

HTML,CSS,JavaScriptのコーディングで、今までテキストエディタやブラウザ上のエディタを使っていたけど、やっぱり不便だから、そろそろ統合開発環境IDE)を使おうと思います!
で、世の中にはいろいろなIDEがあるわけで…どれがいいんだ?とか思いながらいろいろ調べてみた。

気になったもの
Eclipse
NetBeans IDE

Eclipseのほうがメジャーで情報も多いみたいなので、こっちを使ってみることに。

ダウンロードから使ってみるまでの流れ
↓↓↓

まずはダウンロード
英語苦手なのでPleiades - Eclipse プラグイン日本語化プラグインの最初から日本語化されてるやつで。
よくわからないのでEclipse 3.7.1 Indigo の、これまたよくわからないので推奨と書いてある Full All in One (JRE あり) で。
開発対象言語にあわせてプラグインもセットになっている様子。
悩んだ末、WebやっていくといつかさわるであろうPHP版に決定。(Javaでもよかったかも)

ダウンロードして、解凍して、eclipse.exe を起動してみると…
Eclipse起動
ちゃんと日本語化してる!これで英語読めないボクでも安心!
※画像はすべてクリックで原寸表示します

これ、今よく見てみたら、Windows 32bit ベース って書いてあるけど、うちのは 64bit …動いたからいいのかな…?

とりあえず、字が小さすぎて読みにくいからフォントサイズ変更。
ウィンドウ/設定/一般/外観/色とフォント/基本 から少し大きめに変更。ついでにフォントも変更。


さぁ今度はHTML,CSSのコーディングがすごく楽になると噂の Zen-Codingプラグインとして追加しちゃいます。

やり方は、こちらを参考にさせていただきます。
ぼんずーず : eclipse + zen-coding プラグイン3.6Helios動作確認済み「eclipse-zencoding」

Eclipseの ヘルプ/新規ソフトウェアのインストール から 作業対象に http://zen-coding.ru/eclipse/updates/ を追加します。名前は自分がわかりやすいように zen-coding で。
下に出てきた"カテゴリーなし"にチェックを入れて、次へ、次へと進んで、Zen Coding for Eclipse をインストール。
インストール
インストールが終わると再起動するように言われるので、言われたとおりにします。

これでもう Zen-Coding がつかえるはず!
ためしに

(#header>h1)+#main
と入力して行末でCtrl+E!
zen-coding

こんな感じに変換されます!

<div id="header">
<h1></h1>
</div>
<div id="main"></div>
zen-coding
ほかにも面白い機能がいっぱいあって、使いこなすとすごく楽になるみたい!
こちらに詳しく載っていました。
Zen-Codingで楽々コーディング! + コツ1つ


今日の記事はいつも使ってるブラウザ上のエディタじゃなく、練習のため Eclipseで書いてみた。
早く慣れて使いこなすぞー!