この記事は4246 回閲覧されました。

JavaScriptを使ったアプリケーションの開発はテキストエディタがあれば十分出来ると言えば出来るのですが、テキストエディタでは入力補完してくれるわけでもなく、また、テストも実際に自分がファイルを実行して確認するといった事まで全てが手動です。また、他の言語で開発をするにしても、やはりテキストエディタオンリーというのは、ちょっとしたもの以外では、結構苦痛になって来ます。

そこで利用したいのが、Eclipse。元々はJavaの開発用IDEだったわけですが、現在ではJavaScriptやAndroidアプリ、また、PHPやPythonなど様々な言語に対応しており、機能の追加も非常に楽ちんに出来る優れものです。Eclipse自体がオープンソースな開発環境なので、無償で手に入れる事が出来、Windows, LinuxそしてMac OS Xとクロスプラットフォームで作成されてるのも特徴です。

今回は、OSXにインストールし開発環境を整えて見たいと思います。

目次

ダウンロードとインストール

まずはともあれ、Java Development Kit本体とEclipse自体を入手しインストールします。しかし、EclipseはUIが英語であるため、日本語化も必要です。現在最新版は4.5.2(Mars)となっています。

JDKのインストール

Eclipse自体はJavaで記述されたアプリケーションですので、OSXにJava(JDK)が入っていないとどうにもなりません。Oracleのサイトより最新版のJ2SEのJDKをダウンロードして、以下の作業を行いインストールしておきます。最新版は、JDK 8u74となっています。Servlet開発やサーバサイド開発の場合には、J2EEのJDKをダウンロードしてきましょう。

※Android開発の場合にはJ2SEで十分です。

  1. ダウンロードページで、Accept License Agreementにチェックを入れてから、Mac OS X x64のJDKをダウンロードする。J2SEの場合、230MBほどあります。
  2. ダウンロードしたDMGファイルをダブルクリックします。
  3. 中に入ってるpkgファイルをダブルクリックして、インストール作業を開始。
  4. インストールが完了したら、2.を取り出す。

これで完了です。

screenshot_371

図:JDKのダウンロードページ

Eclipseのダウンロード

Eclipseダウンロードページに行きます。最近ではウェブインストーラが用意されておりますが、今回はクラシックに普通にダウンロードします。いくつかのファイルがアップロードされていますが、通常はEclipse IDE for Java DevelopersでOK。サーバサイド開発などもしたい場合には、Eclipse IDE for Java EE Developersを選択すると良いでしょう。64bitという文字をクリックすると、ダウンロードするMirrorを選ぶ画面になります。

ここでは、どれでも同じファイルがダウンロードできますが、右側のDirect Link to fileをクリックすると直接ダウンロードが始まります。およそ200MB〜300MBほどありますので、暫く待ちます。ウェブインストーラの場合、ダウンロードとインストールまでを一気にやってしまうのでお手軽です。

screenshot_364

図:ウェブインストーラはこんな感じです。

Eclipseのインストール

ダウンロードが完了すると、eclipse-jee-mars-2-macosx-cocoa-x86_64.tarというファイルが出来ています。以下の手順でインストールします。

  1. ダブルクリックして、解凍します。
  2. 出てきたeclipse.appをアプリケーションフォルダに入れます。
  3. ただし、この段階で起動してはいけません。日本語化するまでは。

これだけです。試しに実際に一度実行してみると、ワークスペースの場所を指定しろと言われるので、デフォルトのパスのままOKとし進めます。すると、Eclipseが立ち上がるので、これで完了となります。

screenshot_365

図:ワークスペースを指定するダイアログ

日本語化する – その1

日本語化する為の手段は2つあり、一つは機能追加で日本語化する方法。もう一つがPleiadesをインストールして日本語化する方法です。前者はUIを日本語化するLanquageファイルを追加するだけですが、後者は日本語化するのにちょっと手作業が必要です。この辺は好みになりますね。ここでは、Languageファイルを追加する前者について説明します。

※ただしこの方法は起動しなくなったりするケースがありますのでオススメしません。起動しなくなった場合には、Eclipse.appのパッケージ内にあるeclipseをターミナルから以下のコマンドで直接オプションを渡すと起動出来るようになりますが、エラーは依然として出るので、その2を参照しましょう。

  1. Eclipseを起動し、メニューより「Help」⇒「Install New Software…」を開く
  2. Available Softwareのダイアログにて、Addボタンを押す。
  3. NameとLocationに「http://download.eclipse.org/technology/babel/update-site/R0.13.1/mars」を入力してOKボタンを押す
  4. 暫く待ちます。結構反応が遅いです。
  5. するとリストが出てきますので、「Babel Language Pack for eclipse in Japanese」のみを選び、チェックする。全部入れるとエラーが出るようです。
  6. nextボタンを押す。結構かかります。
  7. Install Detailsと出たら、nextを押し、Licenseの画面になります。
  8. I accept the terms of the license agreementを選択して、Finishボタンを押します。
  9. ダウンロードとインストールが始まります。
  10. 途中、Security Warningというダイアログが出たら、OKボタンを押して進めます。
  11. You will need restart という文字とダイアログが出たら、YESボタンを押します。するとEclipseが再起動します。
  12. これでUIの日本語化は完了です。

screenshot_366

図:Language Packを選択中の画面

screenshot_367

図:日本語パックをインストール中

日本語化する – その2

通常はこちらの方法で日本語化します。プラグイン類も豊富ですので、おすすめです。日本語化はPleiadesというものをダウンロードしてインストールして行います。まずは、Pleiadesをダウンロードし解凍する所から始めます。ただし、このPleiadesはWindows版しか用意されていないので、このファイルの中から必要なものだけをOSXのeclipseに追加する形になります。

※Pleiades All in Oneのほうではありませんので注意。こちらを使うと起動出来ません。

※Mac OS Xではフォルダを上書きすると元々あったフォルダと置き換える事になってしまいます。Windowsの場合マージしてくれますが、OSXの場合これでは不具合が出るのでフォルダ単位でのコピペは止めましょう。

  1. Pleiadesのサイトから中盤くらいにある「安定版」というリンクをクリックします。最新版は1.6.0です。
  2. ダウンロードすると現在の最新版だと、pleiades-1.6.0.zipというファイルが出来ていますので、解凍します。
  3. eclipseを右クリックして、「パッケージの内容を表示する」をクリックして中に入る
  4. Contents -> Eclipseと進むとpluginsとfeaturesというフォルダがあるのを確認できるはずです。
  5. 2.の解凍したフォルダ内のEclipseを開くと同じくpluginsとfeaturesというフォルダがあるのを確認できるはずです。
  6. 5.の解凍したファイル側のpluginsに入ります。
  7. 中に入ってるフォルダをコピーして3.のeclipse側のpluginsフォルダ内に貼り付けます。jp.sourceforge.mergedoc.pleiadesというフォルダがあるはずです。
  8. 次に5.の解凍したファイル側のfeaturesに入ります。
  9. 中に入ってるフォルダをコピーして3.のeclipse側のfeaturesフォルダ内に貼り付けます。
  10. 4.に於いて、eclipse側のフォルダ内にeclipse.iniがあるので、テキストエディタで開きます。自分はCotEditorで開きました。
  11. 最終行に以下の2行を書き加え保存します。

もし、日本語化する前に誤って起動してしまった場合には、ターミナルから以下のコマンドを実行します。

これで無事に起動できるはずです。

screenshot_370

図:pleiadesを解凍した中身

screenshot_369

図:無事に日本語化出来ました。

他の言語等の開発環境を追加する

Servlet開発環境を整える

サーバーサイドJavaアプリケーションを作る為にはいくつか機能の追加をしなければなりません。また、Eclipse IDE for Java EE DevelopersではなくEclipse IDE for Java Developersを使っている場合にはもう一つ追加で機能の追加が必要になります。以下にその手順を記します。

Web Tool Platformのインストール

Eclipse IDE for Java EE Developersを使っている場合には初めから同梱されていますので、この作業は必要ありません。ノーマルのEclipseを使っているケースはこの機能を追加しなければなりません。

  1. Eclipseを起動し、ヘルプ -> Install New Softwareを開く
  2. 作業対象の所にhttp://download.eclipse.org/webtools/repository/marsを入力する
  3. Webツール・プラットフォーム(WTP)3.7.2という項目があるのでこれにチェックを入れて次へ進む
  4. ライセンス承諾をしてインストール開始。
  5. 再起動したら完了し、Eclipse IDE for Java EE Developersとなります。

screenshot_380

図:WTPのインストール

Tomcatのインストール

Servlet開発の為には、TomcatというWebアプリケーションサーバが必要です。これ自身はEclipseのプラグインでもなんでもないのですが、Servletを動かす環境として定番になっているもので、Windows版だけはインストーラがあります。OSXの場合には、ちょっと面倒な作業が必要になります。

  1. Apache Tomcatより、Coreのtar.gz形式のファイルをダウンロードしてくる。9MBほどのサイズです。
  2. 解凍します。自分はユーザフォルダの直下にtomcatというフォルダに解凍しました。Windows版と違ってインストーラではありません。
  3. Tomcat Pluginのサイトに行き、Tomcat Plugin V331.zipをダウンロードします。
  4. 3.を解凍し、EclipseのPluginsフォルダにファイルを移動します。OSXなのでeclipseを右クリックして、パッケージの中身を表示でフォルダまで行きます。
  5. Eclipseを起動すると、メニューにTomcatと猫のアイコンが登場しています。Eclipse -> 環境設定に入ります。
  6. Tomcatの項目を開き、バージョン7.xを選択、Tomcatホームは2.で配置したフォルダを指定します。
  7. ここで試しにTomcatを起動してみます。ブラウザで、http://localhost:8080/にアクセスしてみます。
  8. Apache Tomcat/8.0.32なんてページが表示されたら成功です。コンソールに起動と終了の文字列がずらっと出てくるのが確認できます。
  9. 6.と同じ画面でサーバーの設定項目を今度は開きます。
  10. ランタイム環境にて「検索ボタン」を押します。2.のフォルダを指定し、tomcat | Apache Tomcat v8.0が出てきたらOKです。

screenshot_382

図:Tomcat設定項目。ここ重要です。

Android開発環境を整える

OSXでEclipseを使う一番の目的といいますか、使われる理由の1つがAndroidアプリの開発。OSXではiOSアプリが開発できますが、同じマシンでAndroidアプリも作れれば作業が捗りますね。ということで、Androidの開発環境も整えてしまいましょう。以下の手順でAndroid開発環境を整備します。結構手順が多いので、注意してください。

Android SDKのインストール

  1. まずはAndroid SDKをダウンロードします。SDK Tools Onlyという項目が下のほうにあるのでMac OS X用をダウンロードします。100MBほどあります。
  2. ファイルを解凍します。android-sdk-macosxというフォルダの中に入ってるtoolsというフォルダに入ります。
  3. androidというアプリケーションをダブルクリックします。ターミナルが起動し、すぐにGUIのAndroid SDK Managerが立ち上がります。
  4. デフォルトでAndroid6.0用のキットにチェックが入っていますが、他に必要なのがあればチェック(Extras等)を入れて、次に進みます。
  5. パッケージをクリックしてライセンス承諾のチェック(Accept License)を入れて次に進みます。
  6. パッケージがダウンロードされインストールされます。かなり時間がかかります。
  7. ダウンロードが完了したら、android-sdk-macosxにSDK類が格納されてるので、これを自分のユーザフォルダ内の書類フォルダにでも移動させます。
  8. 最後にEclipseのメニューのウィンドウ -> パースペクティブ -> パースペクティブのカスタマイズを開きます。
  9. メニュー可視性を開き、Android SDKマネージャとAndroid仮想デバイスマネージャにチェックを入れます。
  10. Action Set Availabilityに移動し、Android SDKおよびAVDマネージャにチェックを入れます。

screenshot_375

図:Android SDK Managerでキットを選択

screenshot_376

図:Accept LicenseをクリックしてInstall

おかしなエラーが出た時

Android SDKをインストールし、Eclipseでそれを指定すると、変なエラーが出る事があります。エラー内容は、「要素’d:skin’で始まる無効なコンテンツが見つかりました。ここでは子要素を使用できません。」といった内容で、2つほど出ています。Android SDK Managerで以下の2つの項目をアンインストールすると直ります。

  1. Android Wear ARM EABI v7a System Image
  2. Android Wear Intel x86 Atom System Image

Eclipse自体のバグという事のようです。

screenshot_381

図:この2つをアンインストールしましょう

Android Developer Toolsをインストール

  1. 次にEclipseを起動し、次項にもあるGoogle謹製のPluginを導入します。「ヘルプ」 -> 「Install New Software」を開く
  2. addボタンを押して、Locationとして「https://dl.google.com/eclipse/plugin/4.4」を入力
  3. 【開発ツール】というものが出てくるので、これを全て選択しNextボタンを押します。(ADTというものです)
  4. 使用許諾に同意をして進めるとインストール開始。
  5. 途中セキュリティ警告が出たらOKして先に進みます。
  6. そして最後に再起動してインストール完了です。
  7. 再起動すると7.の場所を指定しろというダイアログが出るので、設定を開き、フォルダを指定します。適用ボタンを押すと中身が表示されます。

screenshot_377

図:Android Developer ToolsをInstall

screenshot_378

図:SDKの場所を指定してる様子

Android Virtual Deviceの作成

以下の手順で、仮想デバイスを作成します。この作業をもって、開発環境は整います。

  1. Eclipseのメニューよりウィンドウ -> Android 仮想デバイスマネージャを開きます。
  2. 作成ボタンを押します
  3. 作成対象となるAndroidデバイスのおおまかなセッティングを登録していき、OKボタンを押す。
  4. プラグインとして、Intel HAXMを入れていないとエラーになります。Android SDKから追加しておきましょう。

screenshot_379

図:仮想デバイス作成中の様子

Google系の開発環境を整える

EclipseでGoogle Apps ScriptやGoogle App Engineの開発を行うことが出来ます。そのためのプラグインがリリースされており、追加する事で対応が可能です。現時点では4.4版向けまでが最新で、4.5のMars系は出ていませんが使えると思います。以下の手順でインストールします。

  1. Eclipseを起動し、「ヘルプ」⇒「Install New Software」を開く
  2. addボタンを押して、Locationとして「https://dl.google.com/eclipse/plugin/4.4」を入力
  3. Google Plugin for EclipseだけあればGASの開発が可能です。
  4. nextボタンを押して、進み、使用許諾に同意をして進めるとインストール開始。
  5. 途中セキュリティ警告が出たらOKして先に進みます。
  6. そして最後に再起動してインストール完了です。
  7. Android SDK云々問われる事がありますが、ここでは無視して結構です。

※ただしこれで開発できるGoogle Apps Scriptは単体のスクリプトのみで、スプレッドシート等に入れてあるスクリプトの開発や編集は出来ません。また、インポートとエクスポートのみで、新規にプロジェクトの作成が出来ないようです。

screenshot_372

図:Google公式プラグインの数々

実際にプラグインを使ってみる

実際にGoogle Plugin for Eclipseを使って、既存のプロジェクトをインポートしてみます。

  1. Eclipseのメニューより「ファイル」⇒「インポート」を実行
  2. 出てきた項目で、Googleを開き、Apps Script Projectを開く
  3. 一度、Googleアカウントの認証作業があるので、ログインして認証を進める
  4. My Driveが出てきます。単体スクリプトが列挙されますので選んで開きます。
  5. プロジェクトエクスプローラを見ると、プロジェクトが登録されています。
  6. gsファイルやhtmlファイルがworkspaceに作成されており、Eclipseで見ると、きちんとメソッドの入力補完も効いています。

screenshot_373

図:Apps Script Projectをインポートしてる様子

plugins

図:入力補完中の様子

関連リンク

Pocket
このエントリーをはてなブックマークに追加
Bookmark this on Yahoo Bookmark
Pocket