AngularJS Routing 〜画面遷移ができた、そして〜

今回は、「$http」オブジェクトを使用してphpへの非同期リクエストを送信したいと思います。
ちなみに、前回はngRouteを指定して画面遷移に関して記載しいました。

作成中のページはこちらです。(AngularJS + BootStrap)

httpを使う

参考サイトによると、大雑把に下のようなコードでリクエストをサーバー側に送るようです。

  $http({
    method: 'GET',
    url: 'phpへのURL',
    params: { name: $scope.name }
  })
  // 2成功時の処理(ページにあいさつメッセージを反映)
  .success(function(data, status, headers, config){
    $scope.result = data;
  })
  // 3失敗時の処理(ページにエラーメッセージを反映)
  .error(function(data, status, headers, config){
    $scope.result = '通信失敗!';
  }

なので、非同期通信用(リクエストに対してJSONを返却するPHP)を作成する必要があります。
今回は、サイトマップの画面を作成しようと思いますので、WPのカテゴリ一覧を JSONで返却する処理を作成したいと思います。

PHP処理を作成する

こちらのサイトによると下のようなコードで行けるようです。

<?php
  $category = get_the_category();
  $cat_id   = $category[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  $cat_slug = $category[0]->category_nicename;
?>

シンプルに引数なしの一覧を返すようです。
しかしこれに、URLも欲しいのでもう1つ処理を呼び出します。PHPドキュメント参照

<?php
    // 指定したカテゴリーの ID を取得
    $category_id = get_cat_ID( 'カテゴリー名' );

    // このカテゴリーの URL を取得
    $category_link = get_category_link( $category_id );
?>

<!-- このカテゴリーへのリンクを出力 -->
<a href="<?php echo esc_url( $category_link ); ?>" title="カテゴリー名">カテゴリー名</a>

そして、複数のカテゴリ一覧を取得するにはget_categoriesを使用するみたいです。
まとめると下のようなコードで良いことになります。

$categies = get_categories();
  $cat_id   = $categies[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  // このカテゴリーの URL を取得
  $category_link = get_category_link( $cat_id );
  // JSON文字列を出力
  echo json_encode($category_link);
  

しかし、カテゴリ一覧なので、ループ処理を入れてやる必要があります。
PHPのループ処理を入れてやればうまく動きそうです。
実装の部分は後日にします。

でわでわ。。。

AngularJS + WordPress 〜WebAPIを作る〜

タイトルに「WebAPI」と格好良いことを記載しましたが、つまるところはリクエストを飛ばしてその返り値にJSONを渡してやる。。。それだけです。

AngularからWPを呼ぶ

今回は、AngularJSからのリクエストなので「$http」オブジェクトを使用します。そして、リクエスト先は自作のphpファイルです。なので「httpls://zenryokuservice.com/XXX/」
というようなURLへのリクエストを飛ばします。

PHPの処理

PHP(WP)側はカテゴリの一覧を取得してJSONにして返却する。これだけです。

実装(PHP)

このサイトを参考にして関数の使い方を見ながら作成します。

作成したコードは下のようなコードです。(PHP)

/** エンコード */
header("Content-Type: text/html; charset=UTF-8");
/** 日付の設定 */
date_default_timezone_set('Asia/Tokyo');
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-includes/pluggable.php' );

try {
    // カテゴリの全取得ようパラメータ
    $paramArr = array('type' => 'post', 'orderby' => 'name', 'order' => 'ASC', 'taxonomy' => 'category');
    // 引数
    $categories = get_categories($paramArr);
    $cnt = 0;

    $jsonArr = array();
    foreach($categories as $cat){
        $catLink = get_category_link($cat->term_id);
        $catName = $cat->name;
        $jsonArr = array_merge($jsonArr, array('name' => $catName, 'url' => $catLink));
    }
    echo json_encode($jsonArr);
} catch($e) {
    echo $e;
}

しかし、動きません。try-catchで囲んでもエラーの内容が見れません。。。

PHPは〜。。。もどかしいですが、一行ずつ実行していきますか。。。

そんなわけで、word-pressの関数が怪しいと思い、WPのインクルード方法を探します。。。

WordPress関数ロード

結局は/wp/wp-load.phpをロードすれば良いというところでした。

動かない原因

catch($e)の部分が間違っていました。catch(Exception $e)でした。このページを見るとtry-cathの書き方が書いてありました。
JSと混同していたようです。。。

結局は。。。

下のようなコードで動きました。JSサイドはまだ実装していないのであれですが。。。

/** エンコード */
header("Content-Type: text/html; charset=UTF-8");
/** 日付の設定 */
date_default_timezone_set('Asia/Tokyo');
require( '/wp/wp-load.php' );
try {
    // カテゴリの全取得ようパラメータ
    $paramArr = array('type' => 'post', 'orderby' => 'name', 'order' => 'ASC', 'taxonomy' => 'category');
    // 引数
    $categories = get_categories($paramArr);
    $cnt = 0;

    $jsonArr = array();
    foreach($categories as $cat){
        $catLink = get_category_link($cat->term_id);
        $catName = $cat->name;
        $jsonArr = array_merge($jsonArr, array('name' => $catName, 'url' => $catLink));
    }
    echo json_encode($jsonArr);
} catch(Exception $e) {
    echo $e;
}

これでサーバーサイドの処理ができたと思われるので、JSの方の実装を行います。

ただ、デバックしたときにデータが1つしか取れていないような?一抹の不安を残して今日は寝ます。

でわでわ。。。



Java IoT 開発準備〜BlueJの使い方+Eclipseインストール(RPi)〜

IoTをJavaでやる

JavaでのIoT開発をやるのに、色々と考え、試しましたが、結局はPC上に仮想マシンを立てて実行、テスト、デプロイの順でやるのがやりやすいといところに至りました。

BlueJを使う

VMBoxにインストールしたRPiにデフォルトでインストールされているJavaのIDE(開発ツール)としてBlueJというものがあります。

ちょっと動かしてみました。

Eclipseを使う

参考サイトをみてセットアップを行い開発を進めるのも1つの手段です。

インストール手順

  1. ラズパイでターミナルを開き、以下のコマンドで「dhcpcd5パッケージ」を削除する(互換性がないため)
    sudo apt-get purge dhcpcd5

  2. そして、ラズパイでのネットワーク設定はこちらを参照してやってみる

  3. gdebiコマンドラインツールをインストールします。
    sudo apt-get update
    sudo apt-get install gdebi-core

  4. Java 8がインストールされていることを確認してください。ターミナルを起動してから下のコマンドを叩きます。
    java -version

Javaのバージョンが11なので8をインストールします。
sudo apt-get install openjdk-8-jre-headless

ラズパイのネットワーク

そして、いよいよEclipseをダウンロードしようと思いますが、自分の環境ではネットワークが繋がらない事件が起きてしまい。。。
ネットワークの設定をサイド行いました。が結局繋がらなかったので、実物をダウンロードしてインストールする方向に切り替えました。。。こちらのサイトから落とします

ダウンロードしている最中に、(終わるかは別)VMBoxの共有フォルダを作成します。
VMBoxの設定を開き、共有フォルダを選択します。

緑色のプラスボタンを押下して下のように入力しました。

そして、ゲストOS(ラズパイ)を起動して共有フォルダを探してもありませんでした。。。

VBoxAdditionインストール

結論から言うとアプリが足りないのです。。。
と言うわけで、VBoxAddtion〜をインストールします。
VBoxのメニューから「Device」を選択します。VMBoxからゲストOSを起動した状態で行うのでキャプチャが取れませんでした。。。
「Insert Guest Additions CD image」と言う文字が見えるのでそれをクリックします。
するとゲストOS上にCDが見えるようになりますので、それを確認します。さらに以下の手順を行います、

Guest Additions〜のインストール

ターミナルを起動して以下のコマンドを叩き、CDをマウントします、これをやらないとファイルを起動できません。

  1. ディレクトリの移動
    cd /mnt
  2. CD用のディレクトリの作成と
    mkdir cdrom
  3. CDをマウント
    mount -r /media/cdrom /mnt/cdrom/
    ちなみに、CDは/media/cdromにありました。
  4. そしてインストールを行います。
    sudo sh /mnt/cdrom/VBoxLinuxAdditions.run
  5. 共有フォルダをマウント、ファイルパーミッションの変更します。
    sudo mount -t vboxsf 共有フォルダの名前 /mnt/マウントするフォルダ名
    自分の場合は下のようなコマンドになりました。
    sudo mount -t vboxsf VMBox_Fld /mnt/vmbox_fld

そして、パーミッションの変更(誰でもアクセスできるようにします)以下のコマンドを叩きます。
chomod 777 マウントしたフォルダ
自分の場合は、以下のコマンドを叩きました。
sudo chomod 777 /mnt/vmbox_fld

パーミッションの詳細に関しては、こちらを参考にしました。さらに、グループ権限の登録も行います。
sudo gpasswd --add pi vboxsf

しかし、うまくいかず。。。他の人はこれでだいたいうまくいっているようです。

Macのやり方があるようだ

こちらのサイトを見ると<VMBox.app/XXX>のファイルを何かしら、しないといけないようです。

でわでわ。。。



MacにNode.js サーバーを立てる

今回は、自分のPC上でAngularJSの開発環境を作成します。今までは、単純にレンタルサーバーで色々やっていたのですが、でバックに時間がかかりそうなので、ローカルで開発するようにしようと考えた次第です。

Node.jsインストール

こちらのサイトを参考にしました、ぶっちゃけ以下の手順でいけます。Macの場合です。

  1. このサイトからNode.jsをインストール
  2. npmコマンドが使えるかどうか npm -v コマンドを叩いて確認(バージョン情報が表示されること)
  3. npm install -g http-serverとコマンドを叩いてインストール
  4. ウェブ・サーバーのルートディレクトリに移動してhttp-serverとコマンドを叩くと起動する
    アクセスするURLはhttp://localhost:8080/表示するhtmlファイルのようにブラウザに入力します。
    自分の場合は下のように入力しました。
    http://localhost:8080/bootstrapTheme.html

ちょっと簡単でしたが、こんな感じです。
詳細はGitに書いてありました。起動したときに、デフォルトでキャッシュするようになっているので改修など行ったときに変更が反映されません。
こんなときはhttp-server -c-1で起動してやるとキャッシュしないようにできるようです。
しかし、自分のローカルサーバーではうまくいかず。。。シークレットウィンドウを立ち上げてやっています。。。

ローカルサーバーの意義

レンタルサーバーなどでAgularJSなどを使用する場合は、デバックなどに時間が取られるので公開できる状態にするためにはテストなどが必要なので、ローカル(自分のPC)でテスト(起動確認)を行うたいときがあります。

AngularJSの場合

このフレームワークを使用すると楽なのですが、画面遷移などを行うときにはURLでファイルにアクセスするのでChromeなどのブラウザではセキュリティが働きファイルに直接アクセスできません。

URLとファイルパスの違い

URLはディレクトリと結びついていますが、必ずしもディレクトリ構造をそのまま表示しなくても良いのです。
具体的には以下のようになります。
<サーバーのドキュメントルート>
レンタルサーバーなどで自分がアクセスできる初めのディレクトリ(フォルダ)のことを言います。
上のhttp-serverコマンドで起動した時はこのディレクトリがコマンドを実行したディレクトリになります。

うんちく的な。。。

サーバーディレクトリ構造

例えば自分の使用するディレクトリ構成は下のようになっています。

今回表示したHTMLが「bootstrapTheme.html」なのでターミナルを開き、このディレクトリに移動してからhttp-serverコマンドを叩きます。
するとhttp://localhost:8080/bootstrapTheme.htmlとブラウザのURL部分に入力した場合は上のような画面が表示されます。そしてprojectフォルダ以下にあるファイルを参照したい場合は下のようになります。
http://localhost:8080/project/XXXX.html
そして、AngularJSの設定モジュールでlondon.htmファイルを下のように指定していますので、projectフォルダの下にlondon.htmファイルがないと表示できません。
しかし、.when("/it"), の部分で指定しているURLが来たときにはtemplateUrlで指定しているファイルを参照するというような指定方法が可能になります。
→ウェブサーバーが動いて、ファイルを表示しているのでウェブサーバーに下のように指定してやると、そのように動く、機構が「AngularJS」にはあるということです。
このようなところは使用するフレームワーク(自作のものでもできます)に依存するので「こーなんです!」と言い切ることができません。。。

エラー解消できず

しかし、ローカルサーバーを立てても自分の場合は解決しなかったので。こちらのサイトを参考にコマンドからChromeを起動するようにしました。。。。

でわでわ。。。



app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "

Template Test

" // templateUrl : "main.htm" }) .when("./london", { templateUrl : "./project/london.htm", controller : "londonCtrl" }) .when("/paris", { templateUrl : "./pages/paris.htm", controller : "parisCtrl" }); });

AngularJS Routing 〜画面遷移を行う〜

前回ログイン画面を作成しようと考えていましたが、その前にAngularJSでのページ遷移あたりが、わかっていないのでそこを学習し始めようと思います。

参考サイトにある、画面遷移のサンプルをこのページに埋め込み動かしてみようという試みです、しかし本物のファイルへのURLを表示するのはセキュリティ的にアウトなので、画面に表示するところまでは行きませんでした。
しかし、URLを指定すれば表示できルはずです、
注意点としてはURLと参照先ファイルへのパスが混同しないようにするところです。

画面遷移

参考サイトはこちらです。W3 schoolsのサイトです。
ここのページでは、英語表示なので日本語に翻訳して読みます。そして、サンプルとしてこのリンク先に試しにコードと実行結果をいじれるページがありました。

つまり

appモジュールを作る時にngRouteも追加して、routeプロバイイダーでURLを指定してやれば良いという認識を持ちました。

 let app = angular.module('モジュール名(XXApp)', ['ngRoute']);
app.controller('コントローラ名', function($scope) {
  // 処理
} 

つまづいたところ

ルーティングをやるのに設定をするところ

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/pages/london.htm", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});


移動する場所を指定、取得するのに自分のPCでテストする場合はローカルサーバーを立てないとブラウザのセキュリティで弾かれるのでテストが面倒というところ、Node.jsなどでWebサーバーを起動してやるとローカルでテスト(実験)しやすいです。

Routingしてみる

参考サイトにあるように「ロンドン」「パリ」のHTMファイルをロードするように実装して見ます。

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});

app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

エラーの対応

そして、実行(表示)してみると
下のようなエラーが出ました。ちなみに無限ループしてちょっと面倒でした。

angular.js:12845 Access to XMLHttpRequest at 'file:///london' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ angular.js:12845
angular.js:12845 Access to XMLHttpRequest at 'file:///paris' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

これの原因はHTMLに定義しているメソッドで以下のような記述がダメでした。
ng-click="headerClick({{categ.url}})
そして、HTMLはこんな感じです。

<div ng-repeat="categ in techCategories" >{{categ.categName}}</div>

色々と試した結果、ng-clickには「{{」がいらない「}}」

という答えが出ました。

結果下のようなコードになりました。

<div class="scrollmenu" style="display:{{leftSideBar_disp}}">
  <a ng-repeat="categ in techCategories" href="{{categ.url}}">{{categ.categName}}</a>
  </div>

一応はこれで表示ができました。

追伸

うまくいかなかった、画面遷移が動きました。

でわでわ。。。



AngularJS WebSite作成 〜BootStrapThemeから作成する〜

JavaMEとWebsiteの作成を並行して進めていくので記事がJavaだったり。。。Angularだったりしますが、両方やります。

AngularJSでウェブサイトを作る

今回のウェブサイト作成に関しては、自分のレンタルサーバーでイマドキのウェブサイトを作成して行こうという企画です。
そもそもは、このようなものを作成したかったのですが、詳細部分が決まらずに、ここまで伸びできた次第です。。。

BootStrapテーマから作る

AngularJS + BootStrap + WebAPI(PHP使用)の形で作成したいと思います。
<必要な環境>

  1. AngularJS(HTMLで読み込む)
  2. BootStrap(HTMLで読み込む)
  3. レンタルサーバー上のPHP
  4. レンタルサーバーのDB

とりあえずは、テンプレートをコピーしてきます。
そして、今回はヘッダーと。。。下のようなテンプレートをコピーしてきました。

そして、左側のサイドバーに下のようなCSSを適用してスライド式のメニューバーを作成しました。以前に技術ポータルを作成しようとして作ったものです。しかし、「役に立つのか?」と疑問に思い却下したアイディアでした。。。

    /* for horizonal menu */
    div.scrollmenu {
      background-color: #333;
      overflow: auto;
      white-space: nowrap;
    }

    div.scrollmenu a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px;
      text-decoration: none;
    }

    div.scrollmenu a:hover {
      background-color: #777;
    }

作成中のサイト(ページ)は現状の出来はこちらのリンクにあります。(随時増築していきます。)

設計から入ります

今回の作成するもののイメージを大雑把に申し上げると以下のようになります。

  1. GoogoleMapにイベント情報を掲載
  2. GoogleMapへの登録にはログインが必要
  3. イベント情報は、「メールを受信したら」 or 「ログイン後の画面上で登録」
  4. ログインしない人は登録されているイベント情報(イベント場所、時間、日付)を閲覧することができます。

このような要件を満たすように実装を進めて行こうと考えていますが、まずは表示するべき情報を登録する仕組みから作成しなくてはならないので、ログインの実装から入ろうと思います。
ちなみにGoogleMapへの表示は確認済みです

下の画面の「Login」を押下した時に、ログイン情報入力用のダイアログを表示することから始めて行こうと思います。

大まかな計画は以下の通りです。

実装計画(手順)

  1. Loginをクリックしたときにダイヤログを開く
  2. 開いたダイアログにログイン情報を入力
  3. ユーザー認証を行う
  4. ログイン画面で、新規ユーザー登録も行える
  5. 新規登録の場合は入力項目が増える
  6. ユーザー画面を開く
    6-1. ユーザー画面は考え中
    6-2. 画面からイベント情報の登録ができる
    6-3. イベントの開催場所を(ブックマーク的な)登録できる

とりあえずは上記のような機能を実装する予定です。

ちょっと実装したものをゆっくりと眺める必要があります。
でわでわ。。。



JavaME 開発方法 〜JavaMEの開発環境構築 仮想OSにRPiをインストール〜

表題の通りに、前回作成した仮想マシン(VM Box使用)にRPiをインストールします。ラズパイを起動してみると下のように動きました。参考にしたサイトはこちらです。

そして、ロケール(Locale)を日本に指定します。

初期設定を、終えたら再起動するように促されるので、その通りにします、

そして、再起動したまた同じような画面が出る場合があるのでそれは無視してウィンドウを閉じます。

とりあえずはここまでがインストールの手順になります。
ここからターミナルを使用して(コマンドで)OSのアップデートなどを行います。

注意

ダウンロードしてくるファイル(ISO)のx86, x64 などを確認して、VMBoxで作成する仮想マシンのビット数を間違えないようにする。

ここでダウンロードしたのは32ビットのOSイメージでした。

うまくホストマシンとの接続ができなかったので、再インストールしているときに気がつきました。。。

でわでわ。。。



JavaME 開発方法 〜JavaMEの開発環境構築 仮想OSを使う〜

表題にある通りJavaでIoTをやるために仮想マシンを使用してやってみようと考えました。

今回はラズパイのOS(ラズビアン)をMAC上で起動、開発の準備を進めたいと思います。
参考にするサイトはこちらです。
英語サイトなので翻訳して読みました。

VM Boxインストール

MacPCでラズパイのOS(ラズビアン)を起動するためにVM Boxをインストールしようと思います。ダウンロードするサイトはだいたい英語になっていますが、とてもわかりやすい表示でした。

自分はMacOSを使用しているので真ん中をクリックしました。


こんな感じでサクッとインストールできました。

Virtual Boxを起動


上のような画面が表示されますので、このページからダウンロードしたRaspbianのイメージ(ISO)を用意しておきます。

Virtual BoxでRaspbianをインストール

上の画面で「新規」をクリックすると下のような画面が出るのでそこに下のように入力します。

この後に、仮想マシンの設定を行うウィンドウが出てきます。これらは全て、初期値で次の画面へ移動して問題ありません。

これで作成した、仮想マシン(ラズパイ)へOSをインストールします。

Debianのインストール

仮想マシン(Debianマシン)が作成し終わると上のような画面が見れます。
この仮想マシンにラズパイ(RPi)をインストールします。
ここで「設定」とあるアイコンをクリックすると下のような画面が見れます。

そして、「ストレージ」をクリックします。

さらにマークをクリックすると下のように選択領域が見れますので。。。「〜を選択」というところをクリックしてください。

先ほどダウンロードしたRPiのISOイメージを選択します。

これで、MacPC上でRPiが動きます。

でわでわ。。。



JavaME 開発方法 〜JavaMEの開発環境構築〜

前回(JavaME SDK)、前々回(Codename one)とJavaMEでの開発環境構築に失敗していますが、今回はうまくいくであろうと思っています。(やって見ないとわからないのが世の常。。。)

目的

Microbit〜ラズパイ〜MIDI音源と通信をしてMicrobitから音を鳴らそうというものです。

EclipseME

このプラグインを試してみたいと思います。
しかし、古い情報しか見当たらず。。。断念

NetBeansを使用する

Net Beansを見ると行けそうな感じがしました。
細かい説明のあるページも見つけました。が、NetBeansでやるのは嫌なので他を探すことにします。

開発方法を見直す

本当は、PC上でソースコードを書いて、テスト実行して、ラズパイにデプロイ。。。というように作業をしたかったのですが、色々探しても、適当なものが見つからないので諦めることにしました。

PCでコーディング→ラズパイでテスト

諦めて上のような実装方法にしようと思います。
ポイントは以下のようになります。

  1. JDKのバージョンをPCとラズパイで揃える(Java1.8で後に続く_XXX-XX)というのは無視
  2. Eclipseで通常通りに実装、PC上(のコンパイラ)で実行およびテスト
  3. ラズパイで作成したコードをGit経由でダウンロード、ビルドして実行(テスト)

このようにやって行こうと思います。
色々調べたけれど、結局はこの方法に落ち着きました。。。

というわけで、PC上でJavaMEを実行することを考えて環境構築を行います。

色々と調べて、Eclpse Kuraを使用するとか、あるのですがいまいちしっくりきていないのでもう少し調査します。

今回は、ここまでにしておきます。。。



Eclipse Codename one〜クロス開発環境の構築(Eclipseでは動かなかった)〜

IoTの開発をJavaでやりたいと思い色々と調べています。元々はMicrobit〜ラズパイ〜MIDI音源と音を鳴らすための仕組みを作ることにあるのですが、J2ME(Bluetooth)のテストを行うのに色々と不都合があり、Code name oneを使うことにしました。エミュレータでテストを行えばいちいち実機を動かしたりしなくて良いので便利です。
そういう意味であれば、VirtualBoxとか便利なんでしょうね。。。

初めに、Code name oneでJavaMEの開発環境を作ろうとしましたが、自分の想定通りにいかないので(スマホ用のプラグインのようなので、)やめることにしました。

今回の記載内容

インストールおよびセットアップは下のようになります。
しかし、NetBeansでないと動かないという記事も見つけたので、今回はインストール方法のみを記載しました。
他の方法を模索しようと思います。

Codename one plugin イントール

早速、Eclipseへのインストールと設定などを行い開発の準備を進めたいと思います。参照するURLはこちらです
そのままEclipseMarket Placeでインストールできます。

そして、細かい設定、手順などはこちらにありました。

なのでここのページを参照して行きます。

eclipse.ini

初めに設定ファイル(eclipse.ini)に関して以下のような記述がありました。ちなみに自分の環境ではCode name oneをインストールしただけでは動きませんでした。

JAVA_HOME環境変数がJDK 8を指していること、およびJDK 8 binディレクトリへのパスがPATHステートメントの最初にあることを確認してください。他のすべてが失敗した場合は、eclipse.iniファイルを編集してEclipseにJDK 8インストールを強制的に使用させます。

なるほど、そこらへんの設定が必要なのね。。。

まずは、eclipse.iniの確認を行います。これに関しても説明ページがありました
Macなので以下のように対象ファイルを開きます。

  1. 起動しているEclipseのアイコンを右クリックします。
  2. finderでパッケージを開き
  3. eclipse.iniを参照します。

    下のような内容が記載されています。

    -startup
    ../Eclipse/plugins/org.eclipse.equinox.launcher_1.4.0.v20161219-1356.jar
    --launcher.library
    ../../../../../.p2/pool/plugins/org.eclipse.equinox.launcher.cocoa.macosx.x86_64_1.1.551.v20171108-1834
    -product
    org.eclipse.epp.package.java.product
    -showsplash
    org.eclipse.epp.package.common
    --launcher.defaultAction
    openFile
    --launcher.appendVmargs
    -vm
    /Library/Java/JavaVirtualMachines/jdk1.8.0_144.jdk/Contents/Home/bin
    -install
    /Users/takk/eclipse/java-oxygen/Eclipse.app/Contents/Eclipse/../MacOS
    -configuration
    ../Eclipse/configuration
    -vmargs
    -Dosgi.requiredJavaVersion=1.8
    -Dosgi.instance.area.default=@user.home/eclipse-workspace
    -XX:+UseG1GC
    -XX:+UseStringDeduplication
    --add-modules=ALL-SYSTEM
    -XstartOnFirstThread
    -Dorg.eclipse.swt.internal.carbon.smallFonts
    -Dosgi.requiredJavaVersion=1.8
    -Xms256m
    -Xmx1024m
    --add-modules=ALL-SYSTEM
    -Xdock:icon=../Resources/Eclipse.icns
    -XstartOnFirstThread
    -Dorg.eclipse.swt.internal.carbon.smallFonts
    -Declipse.p2.max.threads=10
    -Doomph.update.url=http://download.eclipse.org/oomph/updates/milestone/latest
    -Doomph.redirection.index.redirection=index:/->http://git.eclipse.org/c/oomph/org.eclipse.oomph.git/plain/setups/
    

    ポイント

  4. JVMの指定がない
  5. JAVA_HOMEの指定がない

なので、ここの部分をeclipse.iniに追記します。

JVMの確認と記述

ターミナルを立ち上げて確認します。ちなみにCodename oneではJava8(JDK1.8)を使用するようです。

java -version

と入力してエンターキーを押すとJavaのバージョンを確認できます。

そして、Mac OSXの場合は/usr/binにコマンドがインストールされているのでeclipse.iniには以下のように追記します。

-vm
/usr/bin

もし、java -verisonで1.8でない場合は下のように直接VM(JDKのjavaコマンド)を指定すると良いです。

-vm
/Library/Java/JavaVirtualMachines/jdk1.8.0_51.jdk/Contents/Home/bin
-vm
/Library/Java/JavaVirtualMachines/jdk1.8.0_51.jdk/Contents/Home/bin/java

JAVA_HOME

Javaの環境構築で初めにやったきりになりがちなのが「環境変数」です、毎度毎度やっていると覚えるので、慌てて覚える必要はありません。
<Mac, Linux>
$JAVA_HOME: jdk/binが参照されてればよし上のように/usr/binはMacの場合です。
<Windows>
コントロールパネル→システム設定→環境変数の一覧の中にJAVA_HOMEがあり、PATHの中にJAVA_HOMEがあること
確認するときは、コマンドプロンプトでpathと入力する、pathコマンドは環境変数を設定するコマンドなのでpath以外に入力しないようにしてください。path /?でヘルプが見れます。
ちなみにJAVA_HOMEの確認は下のようにecho $JAVA_HOMEで見れます。

Windowsの場合はecho %JAVA_HOME%でけます。