« Tomcatプロジェクトの作成 | メイン | プロパティエディタ プラグインのインストール »

2006年02月21日

●Eclipse HTML Editor プラグインのインストール


EclipseのテキストエディターはWindowsメモ張並のエディターなので、
HTML・JSP等を記述する時はなにかと不便なものです。
そこで、Eclipseにエディタープラグインをインストールします。


いろいろなエディターが公開されているのですが、ここでは
Eclipse HTML Editor を選択します。
公開されているサイトでは、エディタ機能として以下の点が挙げられています。


  • HTML/JSP/XML/CSSのシンタックスハイライト


  • Browserコントロールによるプレビュー


  • HTMLタグ要素、属性名、閉じタグのコンテンツアシスト


  • ウィザードによるHTML/JSP/XMLファイルの作成


  • HTML編集支援機能(選択範囲のタグエスケープ、コメント化)


  • 見出しのアウトライン表示


  • エディタの設定(強調表示の色、タブ/分割形式の切り替え)


  • JSPタグ、カスタムタグの補完


  • XMLのアウトライン表示、DTDベースの補完・バリデーション


  • HTML/JSP/XMLエディタでのフォールディング機能


  • Eclipseのエディタとして動作するWebブラウザ


  • イメージビューア(「ウィンドウ」→「ビューの表示」→「その他」から「HTML/JSP/XMLエディタプラグイン」→「イメージ」を選択)


  • タグパレット(「ウィンドウ」→「ビューの表示」→「その他」から「HTML/JSP/XMLエディタプラグイン」→「パレット」を選択)


  • CSSエディタでの補完、アウトライン表示


  • もともとHTML/JSP/XML/CSSのシンタックスハイライト・コード補完をおこなってくれる上に、tablibの設定がされている場合はtldの情報を読んで、カスタムタグ(strutsタグでも)のハイライト・補完もできてしまうわけです。COOL COOL COOL!


    バージョンは1.6.9が最新です。(06/02/21現在)
    事前にEclipse3.1のインストールがおこなわれている必要があります。。

    まずEclipse HTML Editorを動作させるためにはeclipse.orgから提供されるGEF(Graphical Editing Framework)も必要になるので先にインストールします。すでにGEFがeclipseにインストールされている場合は、この項を読み飛ばしてください。


    GEFのインストールはEclipseの更新サイトからネットワークインストールすることにします。インターネット環境にHTTPでアクセスする際、プロキシサーバーを経由している場合は、ブラウザの設定とは別にEclipseでもプロキシの指定をしなければなりません。(プロキシの無い環境では、この項を読み飛ばしてください)


    [ウィンドウ]-[設定]メニューを選択し、[インストール/更新」を選択します。ここで下段「プロキシー設定」をおこないます。「HTTPプロキシー接続を使用可能にする」チェックをONにし、プロキシサーバーのIPアドレスと、ポート番号を指定してOKボタンを押します。(下画像のIPアドレスはでたらめなので、自身の環境にあわせて読み替えてください)


    Eclipse更新サイトに接続します。メニューの「ヘルプ」-「ソフトウェア更新」-「検索とインストール」を選択します。

    フィーチャーの更新では、「インストールする新規フィーチャーを検索」を選択して次へボタンを押します。


    更新アクセス先サイトでは、「Eclipse.org update site」のチェックをONにして終了ボタンを押します。


    指定サイトに接続されるまで待ちます。


    指定サイトにミラーサイトが用意されている場合、サイトを選択することができます。ここではそのまま「Eclipse.org update site」を選択してOKボタンを押します。(会津大に繋がんなかった…)


    サイトに登録されているフィーチャーがツリー表示されます。「Graphical Editing Framework 3.1.1」のチェックをONにして、次へボタンを押します。


    使用条件の条項に同意して、次へボタンを押します。


    インストールするフィーチャーが表示されるので、終了ボタンを押します。


    フィーチャーにデジタル署名されていない旨の警告が表示されますが、かまわず「すべてインストール」ボタンを押します。

    しばし待ちます。


    インストールが完了すると、ecilpseの再起動確認ダイアログが表示される場合があります。お奨めされているので、はいボタンを押します。

    Eclipseが再起動されます。


    これでGEFのインストールは完了です。


    さて、ここからEclipse HTML Editorのインストールを始めます。


    Project AmaterasサイトのEclipse HTML Editor Pluginのページにアクセスし、上の方「ダウンロード」-「こちらからどうぞ」リンクをクリックします。


    EclipseHTMLEditor欄の一番上が最新バージョンです。」-「tk.eclipse.plugin.htmleditor_1.6.9.zip」リンクをクリックします。


    ダウンロード先を指定して(どこでも)、「 tk.eclipse.plugin.htmleditor_1.6.9.zip」を保存します。


    保存したzipファイルをお手持ちの解凍ツールで解凍します(ディレクトリ付き解凍)。解凍すると、「plugins」といるディレクトリが作成されるので、まるごと<eclipseインストール先> ディレクトリにコピーします。


    プラグインをインストールしたらお約束、Eclipseの再起動をおこないます。


    以上でEclipse HTML Editorのインストールは完了です。では、実際に動作するか見てみましょう。


    プロジェクト内のHTMLファイルをEclipse HTML Editorで開いてみます。ファイルを右クリックして表示されるメニューの「アプリケーションから開く」を選択すると、サブメニュー内に「Amateras HTMLエディタ」が増えています。選択してみましょう。


    タグがハイライト表示されていますね?
    またタグを途中まで入力すると補完リストが表示されます。

    HTMLの他にXML・CSS・JSPファイルなどでも試してみてください。
    「アプリケーションから開く」で選択されたエディタはファイルごとに記憶されているので、次回はダブルクリックのみで最後に指定したエディタ(アプリケーション)で開かれます。


    では、JSPファイルでカスタムタグが指定されている場合はどうなるでしょうか。以下Strutsのカスタムタグの例です。

    補完されるじゃないですか!COOL COOL COOL!
    もちろんtablibが正しく設定されていないと補完されません。おかしいなと思ったらtablibの記述を調べてみてください。