システム開発現場の道具箱

株式会社モノクレアが運営するIT技術系のブログです。システム開発の現場で役に立つ情報を掲載しています。

React入門ハンズオン

create-react-appを使ったReactアプリケーションの作成方法を紹介します。アプリケーションを作成するのに必要な機能を扱っています。実際にアプリケーションを作って動かしながら試してみてください。

  • 準備
    • Node.jsのインストール
    • create-react-appのインストール
    • プロジェクトの作成、開発環境の確認
  • 本編
    • コンポーネントの作成
    • 入力フォームの作成
    • REST APIサーバーとREST API呼び出しの作成
    • 画面遷移の作成
    • マテリアルデザインの適用
    • 配布資材の生成

この記事の内容は2017/7/23のSI-Toolkitユーザーグループ React.js入門ハンズオン勉強会で使用したものです。

準備

Node.jsのインストール

https://nodejs.org/ja/からインストーラーをダウンロードして実行します。

create-react-appのインストール

以下のコマンドを実行し、create-react-appをインストールします。

npm install -g create-react-app

プロジェクトの作成、開発環境の確認

以下のコマンドを実行し、Reactアプリケーションのプロジェクトを作成して実行します。 ブラウザが起動し、Reactアプリケーションが表示されます。

create-react-app react-app-1
cd react-app-1
npm start

srcディレクトリのファイル:App.jsを以下の様に編集します。 ファイルを保存すると、変更は即座にブラウザで表示中のアプリケーションに反映されます。 編集内容にエラーがある場合はnpm startを実行しているウィンドウに表示されます。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        Empty!
      </div>
    );
  }
}

export default App;

本編

コンポーネントの作成

srcディレクトリにファイル:NumberCmp.jsを作成し、以下の様に実装します。

import React, { Component } from 'react';

class NumberCmp extends Component {

  render() {
    return (
      <div>number : {this.props.number}</div>
    )
  }
}

export default NumberCmp;

src/App.jsでNumberCmpを使用する様に実装します。

import React, { Component } from 'react';
import NumberCmp from './NumberCmp';

class App extends Component {

  render() {
    return (
        <div>
          <NumberCmp number="1"/>
        </div>
    )
  }
}

export default App;

ブラウザに「number : 1」が表示されることを確認します。

参考

入力フォームの作成

srcディレクトリにファイル:FormCmp.jsを作成し、以下の様に実装します。

import React, { Component } from 'react';

class FormCmp extends Component {

  constructor(props) {
    super(props);

    this.state = {in : ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  handleChange(event) {
    this.setState({in : event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();

    alert(this.state.in);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="in" value={this.state.in} onChange={this.handleChange}/>
          <input type="submit"/>
        </form>
      </div>
    )
  }
}

export default FormCmp;

NumberCmpと同様にFormCmpをAppで使用する様に実装します。

ブラウザにテキストボックスと送信ボタンが表示されること、また送信ボタンをクリックするとテキストボックスに入力した文字列がアラートで表示されることを確認します。

参考

REST APIサーバーとREST API呼び出しの作成

REST APIサーバーの作成

以下のコマンドを実行し、自動再起動機能を持った開発用Nodeサーバーをインストールします。

npm install -g node-dev

REST APIサーバー用のプロジェクトをreact-app-1とは別のディレクトリに作成します。

mkdir rest-api-server
cd rest-api-server
npm init
npm install express --save

rest-api-serverディレクトリにファイル;app.jsを作成し、以下の様に実装します。

var express = require('express');
var app = express();

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/', function (req, res) {
  res.json({key:'value'});
});

var server = app.listen(3010, function () {
  console.log('app listening on port ' + server.address().port);
});

以下のコマンドを実行し、REST APIサーバーを起動します。

node-dev app.js

http://localhost:3010/ をブラウザで開くと「{“key”:“value”}」が表示されることを確認します。

REST API呼び出し

srcディレクトリにファイル:FetchCmp.jsを作成し、次の通り実装します。

import React, { Component } from 'react';

class FetchCmp extends Component {

  constructor(props) {
    super(props);

    this.state = {key : ''};
  }

  componentDidMount() {
    fetch('http://localhost:3010/')
    .then(res => res.json())
    .then(res => this.setState(res));
  }

  render() {
    return (
      <div>Fetch {JSON.stringify(this.state)}</div>
    )
  }
}

export default FetchCmp;

ブラウザに「Fetch {“key”:“value”}」が表示されることを確認します。

参考

画面遷移の作成

react-routerを使用して画面遷移を実装します。

次のコマンドを実行し、必要なライブラリをインストールします。

npm install --save react-router react-router-dom

src/index.jsを次の様に編集します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router } from 'react-router-dom' // add

// add Router element
ReactDOM.render(
    <Router>
        <App />
    </Router>,
document.getElementById('root'));
registerServiceWorker();

src/App.jsを次の様に編集します。

import React, { Component } from 'react';

import { Route, Link, withRouter } from 'react-router-dom'

import NumberCmp from './NumberCmp';
import FormCmp from './FormCmp';
import FetchCmp from './FetchCmp';


class App extends Component {

  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.props.history.push('/fetch')
  }

  render() {
    return (
      <div>
        <ol>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/number">Number</Link></li>
          <li><Link to="/form">Form</Link></li>
          <li><button onClick={this.handleClick}>Fetch</button></li>
        </ol>
        <Route path="/number" component={NumberCmp} number={2} />
        <Route path="/form" component={FormCmp} />
        <Route path="/fetch" component={FetchCmp} />
      </div>
    )
  }
}

export default withRouter(App);

参考

マテリアルデザインの適用

マテリアルデザインを適用するためのライブラリはいくつもありますが、ここではMaterial UIを使用します。 以下のコマンドを実行しMaterial UIとそれが依存するライブラリをインストールします。

npm install react-tap-event-plugin material-ui

src/index.jsを以下の様に変更します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter as Router } from 'react-router-dom' 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';   // add
import injectTapEventPlugin from 'react-tap-event-plugin';   // add

injectTapEventPlugin();  // add


// add MuiThemeProvider element
ReactDOM.render(
    <Router>
       <MuiThemeProvider>
        <App />
       </MuiThemeProvider>
    </Router>,
document.getElementById('root'));
registerServiceWorker();

src/FormCmp.jsを以下の様に変更します。

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';   // add
import TextField from 'material-ui/TextField';   // add

class FormCmp extends Component {

 :

  render() {
    // <input type="text"  =>  <TextField
    // <input type="submit"  =>  <RaisedButton 
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <TextField hintText="hint" floatingLabelText="floatingLabel" name="in" value={this.state.in} onChange={this.handleChange}/>
          <RaisedButton type="submit" label="送信" primary={true}/>
        </form>
      </div>
    )
  }

ブラウザでテキストボックスと送信ボタンにマテリアルデザインが適用されていることを確認します。

参考

配布資材の生成

以下のコマンドを実行し、Reactアプリケーションの配布可能な資材を生成します。

npm run build

buildディレクトリ以下に配布可能な資材が生成されます。

独習Maven 《応用編》 マルチモジュール

今回の独習Mavenは、マルチモジュール編です。

Mavenはプロジェクトに親子関係を持たせることができます。 そして、親プロジェクトに複数の子プロジェクトが紐付く構成をマルチモジュールと呼びます。

今回は以下の実行を通して、プロジェクトの親子関係について理解を深めたいと思います。

  • 親pomの作成
  • 子プロジェクトの作成
  • コンパイル・テスト実行

親pomの作成

まず始めに、親pomの作成を行いましょう。 parentディレクトリを作成し、配下にpom.xmlを作成します。

parent
    pom.xml

pom.xmlを開き、以下の内容を貼り付けます。 親pomには、dependencyにcommons-langを設定しています。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>a.b.c</groupId>
  <artifactId>parent</artifactId>
  <packaging>pom</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>parent</name>
  <dependencies>
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.4</version>
    </dependency>
  </dependencies>
</project>

子プロジェクトの作成

parentディレクトリにchildプロジェクトを作成しましょう。 コンソールを開き、以下のコマンドを実行します。

cd parent
mvn archetype:generate -DarchetypeArtifactId=maven-archetype-quickstart

プロジェクト作成中に、プロジェクトのパラメーターについて入力を促されます。 ここではパラメーターの値を以下のとおり指定します。

パラメータ名
groupId a.b.c
artifactId child
version 1.0-SNAPSHOT (default)
package a.b.c (default)

また、パラメーターは以下のように対話式で指定します。 [Enter]キーをタイプすることで、次の項目に進みます。

Define value for property 'groupId': : a.b.c[Enter]
Define value for property 'artifactId': : child[Enter]
Define value for property 'version':  1.0-SNAPSHOT: :[Enter]
Define value for property 'package':  a.b.c: :[Enter]
Confirm properties configuration:
groupId: a.b.c
artifactId: child
version: 1.0-SNAPSHOT
package: a.b.c
 Y: :[Enter]

コマンド実行後、以下のディレクトリ構成でchildプロジェクトが作成されます。

parent
|   pom.xml
|
\---child
    |   pom.xml
    |
    \---src
        |
        \---main
        |   \---java
        |       \---a
        |           \---b
        |               \---c
        |                   \---App.java
        \---test
            \---java
                \---a
                    \---b
                        \---c
                            \---AppTest.java

プロジェクトが作成されたら、先ほど作成した親pomを開き、内容を確認しましょう。pom.xmlのファイルパスは以下の通りです。

parent/pom.xml

pom.xmlには、以下のとおり子モジュール定義が追加されています。

  :
  <modules>
    <module>child</module>
  </modules>
</project>

今度は、作成したchildプロジェクトのpom.xmlを開き、内容を確認しましょう。pom.xmlのファイルパスは以下の通りです。

parent/child/pom.xml

childプロジェクトのpom.xmlには、以下のとおりparentが定義されています。

<?xml version="1.0"?>
<project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>a.b.c</groupId>
    <artifactId>parent</artifactId>
    <version>1.0-SNAPSHOT</version>
  </parent>
  <groupId>a.b.c</groupId>
  <artifactId>child</artifactId>
  <version>1.0-SNAPSHOT</version>
  <name>child</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
</project>

次に、childプロジェクトのAppTest.javaを編集しましょう。 AppTest.javaのファイルパスは以下の通りです。

parent/child/src/test/java/a/b/c/AppTest.java

AppTest.javaを開き、testAppメソッドにcommons-langのメソッド呼び出しを追加します。

package a.b.c;

  :

public class AppTest 
    extends TestCase
{
    :

    public void testApp()
    {
        System.out.println(org.apache.commons.lang3.StringUtils.join("Hello", " ", "World!"));
        assertTrue( true );
    }
}

コンパイル・テスト実行

コンソールを開き、以下のコマンドを実行します。

cd parent
mvn test

「BUILD SUCCESS」が表示された後、以下のとおり「Hello World!」のメッセージが表示されれば成功です。

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
Running a.b.c.AppTest
Hello World!

マルチモジュールでは、親pomの設定を子pomに継承することができます。
今回のケースでは、親pomのdependency設定が子pomに継承され、commons-langをchildプロジェクトで使用することができました。このように、複数のプロジェクトで共通の設定を親pomに集約することで、子pomでの設定を簡略化することが可能です。

マルチモジュール編は以上です。

EclipseでSIT−WTのソースをデバッグする

SIT-WTのテスト実行中にEclipseでSIT-WTのソースをデバッグする方法を紹介します。

デバッグにはEclipse 4.5以上が必要です。

また、SIT-WTのMavenプロジェクトがEclipseプロジェクト化されていることが前提です。 この手順についてはこちらを参照してください。

EclipseでSIT−WTのソースをデバッグするための設定 - システム開発現場の道具箱

sit-wt-runtime.jarのソースをダウンロード

Eclipseでsit-wt-runtime.jarのソースをダウンロードします。 手順は以下の通りです。

  1. プロジェクト・エクスプローラー」ビュー、または「パッケージ・エクスプローラー」ビューで プロジェクト内の「Maven依存関係」を開きます。
  2. Maven依存関係」内にある「sit-wt-runtime-xxx.jar」を右クリック>「Maven」>「ソースのダウンロード」をクリックします。
    f:id:mrno27:20160807184141p:plain

SIT-WTのソースにブレークポイントを設定

SIT-WTの任意のソースを開き、ブレークポイントを設定します。

  1. Eclipse上で下記ショートカットをタイプし、「型を開く」ダイアログを表示します。 (「ナビゲート」メニュー>「型を開く」をクリックでもOKです。)
    • Windowsの場合 : Ctrl + Shift + T
    • Macの場合 : Command + Shift + T
  2. 型を開く」ダイアログ上でブレークポイントを設定したいクラスを検索し、「OK」ボタンをクリックします。 ここでは例として「org.sitoolkit.wt.domain.tester.SitTesterTestBase」を開きます。
    f:id:mrno27:20160805202314p:plain

  3. ソースが開いたら、ブレークポイントを設定します。
    f:id:tkdy0115:20160424200228p:plain

SIT-WTのテストを、failsafe pluginをデバッグモードにして実行する

  1. プロジェクト・エクスプローラー」ビュー、または「パッケージ・エクスプローラー」ビューでプロジェクトを選択し、 右クリック>「実行」>「実行の構成」をクリックします。
  2. 実行構成ダイアログにて下記を入力し、「実行」ボタンをクリックします。
    • ゴール: clean verify -Dmaven.failsafe.debug=true
      f:id:mrno27:20160805112629p:plain
  3. コンソールに以下のメッセージが表示された時点でテスト実行が停止します。
    f:id:mrno27:20160805202654p:plain

Eclipseのリモートデバッグ機能でMavenプロセスにアタッチする

  1. プロジェクト・エクスプローラー」ビュー、または「パッケージ・エクスプローラー」ビューでプロジェクトを選択し、 右クリック>「デバッグ」>「実行の構成」をクリックします。
  2. デバッグ構成ダイアログ「リモートJavaアプリケーション」を選択し、右クリック>「新規」を選択します。
  3. 下記を入力し、「デバッグ」ボタンをクリックします。
    • プロジェクト: SIT-WTのMavenプロジェクト名
    • ポート:5005
      f:id:mrno27:20160805203923p:plain
  4. 設定したブレークポイントでテスト実行が停止し、デバッグが可能になります。
    f:id:tkdy0115:20160424211340p:plain

【補足】デバッグ実行ができる仕組み

SIT-WTのテストは、SIT−WTが内部的に生成したJUnitテストクラスを「maven-failsafe-plugin」に実行させることで動作します。 このときテストはMavenが動作しているJavaプロセスとは別のJavaプロセスで実行されます。 「maven.failsafe.debug」プロパティを有効にすると、テストを実行しているJavaプロセスは開始時点で自動的に停止しデバッグポート(デフォルトでは5005番)でデバッガのアタッチを待機します。よって、Eclipseのリモートデバッグ機能でデバッグ実行できるようになります。

maven.failsafe.debug」プロパティの詳細については、以下のリンク先を参照してください。

Maven Failsafe Plugin – Debugging Tests

参考

デバッグの実行開始後、Firefoxが起動したままテストが開始されない場合の対応方法

Seleniumのバージョンを、使用するブラウザとそのバージョンに合わせる必要があります。 対応については以下のリンク先を参照してください。

SIT WTが使うSeleniumのバージョンを変更する方法 · sitoolkit/sit-wt-all Wiki · GitHub

テスト実行の一時停止について

本記事の手順に沿ってデバッグを実行すると、各テストケース終了後にコンソール上で「テストスクリプトの実行を一時停止します。」と表示され、テストの実行が一時停止されます。

   :
スクリーンショットを取得しました C:\Users\Yu\git\quick01\target\evidence_20160501163739\img\ExcelTestScript.xlsx_001_18_名前_BEFORE_OPERATION.png
名前(xpath=//*[@id="confirm"]/tbody/tr[1]/td)の値が期待値[試験太郎]に一致することを確認します。
ブレークポイントが設定されています。
テストスクリプトの実行を一時停止します。ブラウザの操作は可能です。操作方法を表示するにはEnterキーをタイプしてください。

これはSIT-WTが提供しているデバッグ機能によるものです。 SIT-WTのデバッグ機能については以下の記事を参照ください。

SIToolkit デバッグしながらテストスクリプトを編集する - システム開発現場の道具箱

ハンズオンオンライン勉強会の参加方法

SI-Toolkitユーザーグループでは勉強会をオンラインでも開催します。

https://sitoolkit.doorkeeper.jp/

ここではそのオンライン勉強会の参加方法を説明します。 以降の内容はDoorkeeper SI-Toolkitユーザーグループに参加していることが前提となります。

勉強会で使用するツール

ハンズオンオンライン勉強会ではコミュニケーションツールとして join.meSlackを使用します。

  • join.me
    資料の投影やデモに使用します。また講師や他の参加者との音声による会話も行います。
  • Slack
    講師や他の参加者とのコミュニケーション(テキストチャット、音声チャット)に使用します。

勉強会に参加するまでの流れ

  • 前日まで
    • Doorkeeperでイベントに参加登録をします。
    • Slack Teamに参加します。
  • 当日
    • join.meで勉強会に参加します。

Doorkeeperでイベントに参加登録する

勉強会の告知はDoorkeeperで行っています。

https://sitoolkit.doorkeeper.jp/

告知を受け取ったり勉強会に参加したい方はDoorkeeperのアカウントを作成し、「SI-Toolkitユーザーグループ」に参加してください。 SI-Toolkitユーザーグループは誰でも無料で参加できます。 勉強会は月に1、2回のペースで開催しています。 イベント名に「オンライン勉強会」と書かれたものが、ここで説明するオンライン形式の勉強会です。

Slack Teamに参加する

SI-ToolkitのSlack Teamに参加します。 勉強会の前日時点でDoorkeeperのイベントに参加登録している方には、Doorkeeperアカウントのメールアドレス宛にSlackのInvitationが届きます。 Invitationに従いTeamに参加してください。

join.meで勉強会に参加する

勉強会当日になると、Doorkeeperから勉強会参加者にjoin.meのミーティングリンクのURLがメールで送られてきます。 ミーティングリンクをクリックするとブラウザ、またはアプリが起動してミーティングに参加できます。

[※] ハンズオンではウィンドウを複数起動することになるため、join.meはハンズオンを行うPCとは別のPCや大きめのスマートフォン、タブレットで使用することをお勧めします。 スマートフォン、タブレットで使用する場合は以下のリンク先の"Mobile"からアプリを入手できます。

https://www.join.me/apps

[※] ハウリング防止のためにできるだけイヤホンの使用をお願いします。

勉強会でのツールの使い方

join.me

join.meは資料の投影やデモに使用します。 また講師や他の参加者との音声による会話も行います。

  • ミーティングに参加する
  • ミーティングを退出する

ミーティングに参加する

Doorkeeperから送られるメールにあるミーティングリンクをクリックするか、join.meアプリを起動し、meeting codeを入力します。 meeting codeはミーティングリンク末尾のハイフン区切りの数字9桁です。

https://join.me/000-000-000

f:id:monocrea:20160709154215p:plain:w250

join.meのミーティングに参加すると、講師のデスクトップが表示されています。

f:id:monocrea:20160709154344p:plain

画面上部のツールバーは画面を一度タップすると表示されます。 講師の説明を聞くにはツールバーのf:id:monocrea:20160709154432p:plain:w20アイコンをタップし「Connect」ボタンをタップします。

f:id:monocrea:20160709154524p:plain

お願い 質問する以外の時はツールバーのミュートアイコンf:id:monocrea:20160709154645p:plain:w20をタップしてマイクをミュートにしておいてください。 これは、雑音が入ったりハウリングしたりするのを防ぐためです。ご協力をお願いします。

ミーティングを退出する

ツールバーのf:id:monocrea:20160709154746p:plain:w20アイコンをタップし、表示されるダイアログで「Leave meeting」ボタンをタップします。

f:id:monocrea:20160709154816p:plain

Slack

Slackは講師や他の参加者とのコミュニケーション(テキストチャット、音声チャット)に使用します。

  • 勉強会のCHANNEL
  • ハンズオンの進み具合を共有する

勉強会のCHANNEL

勉強会当日のやりとりは「[日付]_workshop」という名前のCHANNELで行います。 後述の進み具合を共有するために使用したり、ハンズオンを進めていて問題が発生した場合に投稿してください。

f:id:monocrea:20160709154851p:plain

CHANNELはページ左上の「CHANNELS」の先のCHANNEL検索ページから探してJoinしてください。

f:id:monocrea:20160709154921p:plain

ハンズオンの進み具合を共有する

勉強会では説明とハンズオンを交互に行います。 ハンズオンの進み具合は当日の勉強会のCHANNEL内の「checkpoint:」から始まるメッセージにf:id:monocrea:20160709155006p:plain:w20でreactionして共有してください。

f:id:monocrea:20160709155026p:plain

checkpointメッセージにはpinが付けられています。 pinが付けられたメッセージはSlackのページ右上のf:id:monocrea:20160709155051p:plain:w20アイコンから「Pinned Item」で確認できます。

f:id:monocrea:20160709155112p:plain

Jenkins2でPipelineジョブのサンプルを実行する

Jenkins2.Xをインストールし、PipelineジョブでJenkins同梱のサンプルを実行する手順です。 作業のおおまかな流れは、以下の通りです。

  • Jenkinsの入手、インストール、起動
  • Jenkinsの初期設定
  • プラグインのインストール
  • Jenkinsで使用するMavenの設定追加
  • Pipelineジョブの登録、実行

準備

事前準備として、JDKとMavenをインストールします。下記リンク先の「実行環境」を参照し、実施してください。

クイックスタート · sitoolkit/sit-wt-all Wiki · GitHub

Jenkinsの入手、インストール、起動

Jenkinsの入手、インストール、起動手順です。

Windows

  1. 下記URLからインストーラを入手します。
  2. Downloads」メニュー>「2.X.war」ボタン>「Windows」を選択し、インストーラをダウンロードします。 f:id:tkdy0115:20160520212130p:plain
  3. ダウンロードしたインストーラを実行し、ウィザードに従ってインストールを実施します。インストールフォルダはデフォルトのままでOKです。

Jenkinsの起動については作業不要です。 インストール時にWindowsサービス化され、自動で起動された状態になります。

MacOS

1.ターミナルで下記コマンドを実行し、Jenkinsをインストールします。

brew install jenkins

2.続けて以下のコマンドを実行し、Jenkinsを起動します。

jenkins

Jenkinsの初期設定

Jenkinsの初期設定を実施します。初期設定の内容は下記3点です。

  • Jenkinsの解除
  • Jenkinsのカスタマイズ
  • 管理者ユーザの登録

Jenkinsの解除

1.ブラウザを開き「http://localhost:8080」へアクセスします。自動的にJenkinsの解除画面へ遷移します。 f:id:tkdy0115:20160521001429p:plain

2.Jenkinsの解除画面に表示されているパスワードファイル「initialAdminPassword」をテキストエディタで開き、ファイルに記載されているパスワードをコピーします。 ファイルの中身をコマンドプロンプト、またはターミナルで確認する際は、以下のコマンドを実行します。

Windows(コマンドプロンプト)
type "C:\Program Files (x86)\Jenkins\secrets\initialAdminPassword"
MacOS(ターミナル)
cat /usr/<Your Account>/.jenkins/secrets/initialAdminPassword

3.コピーしたパスワードを「Administrator password」欄に貼り付け、「Continue」ボタンをクリックします。

Jenkinsの初期設定

  1. Install suggested plugins」ボタンをクリックします。 f:id:tkdy0115:20160521001447p:plain
  2. プラグインのインストールが開始するので、完了を待ちます。 f:id:tkdy0115:20160521001506p:plain

管理者ユーザの登録

以下の項目を任意に入力し、「Save and Finish」ボタンをクリックします。

  • ユーザー名
  • パスワード
  • パスワードの確認
  • フルネーム
  • メールアドレス

f:id:tkdy0115:20160521001545p:plain

ここまでで初期設定完了です。「Start using Jenkins」ボタンをクリックすると、ログイン済みの状態でJenkinsのダッシュボードが開きます。
f:id:tkdy0115:20160521001609p:plain

f:id:tkdy0115:20160520214222p:plain

Jenkinsで使用するMavenの設定追加

Jenkinsの実行で使用するMavenの設定を追加します。

  1. Jenkinsの管理画面を開き「Global Tool Configuration」リンクをクリックします。 f:id:tkdy0115:20160520224349p:plain
  2. Global Tool Configuration画面下部の「Maven追加」ボタンをクリックします。 f:id:tkdy0115:20160520224524p:plain
  3. 以下の通り入力し、「Save」ボタンをクリックします。
    • 名前:M3
    • 自動インストール:チェックなし
    • MAVEN_HOME:Mavenのインストールパス
      ※「MAVEN_HOME」は「自動インストール」のチェックをはずすと表示されます。
      f:id:tkdy0115:20160520224541p:plain

ジョブの登録

ジョブの登録を実施します。

1.Jenkinsのダッシュボードを開き、「新規ジョブ作成」メニューをクリックします。 f:id:tkdy0115:20160520230637p:plain

2.「Enter an item name」に任意のジョブ名を入力して「Pipeline」を選択し、「OK」ボタンをクリックします。 f:id:tkdy0115:20160520230823p:plain

3.「Pipeline」タブをクリックし、Pipelineの設定箇所へスクロールします。 f:id:tkdy0115:20160520234830p:plain

4.「try sample Pipeline...」プルダウン>「GitHub + Maven」をクリックします。クリックと同時に、「Script」にサンプルのスクリプトが追加されます。
f:id:tkdy0115:20160520231925p:plain

5.Windowsの場合は「Script」内のmvnコマンド行を、以下の通り修正します。※MacOSの場合は修正不要です。

修正前

   sh "${mvnHome}/bin/mvn clean install"

修正後

   bat "${mvnHome}\\bin\\mvn clean install"

6.「保存」ボタンをクリックするとジョブが保存され、ジョブ画面へ遷移します。

ジョブの実行、結果確認

  1. ジョブ画面左側のメニューにある「ビルド実行」をクリックします。 f:id:tkdy0115:20160520232756p:plain
  2. ビルドが開始され、Stage Viewに、script内で定義したステージごとの結果が表示されます。 f:id:tkdy0115:20160520232919p:plain
  3. ビルド履歴欄で確認したい番号のリンクをクリックし、該当のビルド履歴画面へ遷移します。 f:id:tkdy0115:20160520235324p:plain
  4. コンソール出力」メニューをクリックすると、ビルド実行時のログ、ビルド結果が確認できます。 f:id:tkdy0115:20160520233312p:plain

サンプルで使用するプロジェクト「simple-maven-project-with-tests」のテストクラスの実装(詳細は下記補足参照)により、Mavenビルドの成否はランダムで決まりますが、 ここではMavenビルドの「test」フェーズによるテスト実行と、Pipelineの完了が確認できればOKです。

ユーザーAdmin Userが実行
[Pipeline] node
Running on master in C:\Program Files (x86)\Jenkins\workspace\sample
[Pipeline] {
[Pipeline] stage (Checkout)
Entering stage Checkout
Proceeding
[Pipeline] git
Cloning the remote Git repository
Cloning repository https://github.com/jglick/simple-maven-project-with-tests.git
       :
[INFO] --- maven-surefire-plugin:2.18.1:test (default-test) @ simple-maven-project-with-tests ---
[INFO] Surefire report directory: C:\Program Files (x86)\Jenkins\workspace\sample\target\surefire-reports

-------------------------------------------------------
 T E S T S
-------------------------------------------------------
Running test.OtherTest
Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0 sec - in test.OtherTest
Running test.SomeTest
Tests run: 6, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0 sec - in test.SomeTest
       :
[INFO] --- maven-install-plugin:2.4:install (default-install) @ simple-maven-project-with-tests ---
[INFO] Installing C:\Program Files (x86)\Jenkins\workspace\sample\target\simple-maven-project-with-tests-1.0-SNAPSHOT.jar to C:\WINDOWS\system32\config\systemprofile\.m2\repository\test\simple-maven-project-with-tests\1.0-SNAPSHOT\simple-maven-project-with-tests-1.0-SNAPSHOT.jar
[INFO] Installing C:\Program Files (x86)\Jenkins\workspace\sample\pom.xml to C:\WINDOWS\system32\config\systemprofile\.m2\repository\test\simple-maven-project-with-tests\1.0-SNAPSHOT\simple-maven-project-with-tests-1.0-SNAPSHOT.pom
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 8.768 s
[INFO] Finished at: 2016-05-19T18:31:45+09:00
[INFO] Final Memory: 15M/90M
[INFO] ------------------------------------------------------------------------
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
Finished: SUCCESS
【補足】Mavenビルドの成否がランダムに決まる仕組み

プロジェクト「simple-maven-project-with-tests」に含まれるテストクラス「Base.java」のrun()メソッドは、取得した乱数が0.1より小さい場合にテストを失敗させる実装になっています。 また、テストクラス「OtherTest.java」、「SomeTest.java」は、いずれも「Base.java」を継承しており、それぞれのテストケースでrun()メソッドを呼び出しています。 Mavenビルドの「test」フェーズではこれらのテストクラス「OtherTest.java」、「SomeTest.java」のテストケースが実行されるため、ビルドの成否がランダムに決まります。

Base.java(抜粋)

class Base {

    protected void run() {
        double r = Math.random();
        if (r < 0.1) {
            fail("oops");
        } else if (r < 0.2) {
            throw new AssumptionViolatedException("skipping");
        }
    }

}

OtherTest.java(抜粋)

public class OtherTest extends Base {

    @Test public void mytest() {
        run();
    }

}

SomeTest.java(抜粋)

public class SomeTest extends Base {

    @Test public void test1() {
        run();
    }
       :
    @Test public void test6() {
        run();
    }

}
【補足】ビルドがNoSuchMethodErrorで失敗する場合

環境によっては、作成したサンプルプロジェクトのビルドが失敗し、以下のように、 「java.lang.NoSuchMethodError」エラーがコンソール出力される場合があります。その場合は、Jenkinsを再起動することでビルドを通すことが出来るようになります。

ユーザーAdmin Userが実行
[Pipeline] node
Running on master in C:\Program Files\Jenkins\workspace\sample
[Pipeline] {
[Pipeline] stage (Checkout)
Entering stage Checkout
Proceeding
[Pipeline] }
[Pipeline] // node
[Pipeline] End of Pipeline
java.lang.NoSuchMethodError: No such DSL method 'git' found among [archive, bat, build, catchError, checkout, deleteDir, dir, echo, emailext, error, fileExists, input, isUnix, load, mail, node, parallel, properties, pwd, readFile, retry, sh, sleep, stage, stash, step, svn, timeout, timestamps, tool, unarchive, unstash, waitUntil, withCredentials, withEnv, wrap, writeFile, ws]
    at org.jenkinsci.plugins.workflow.cps.DSL.invokeMethod(DSL.java:108)
    at org.jenkinsci.plugins.workflow.cps.CpsScript.invokeMethod(CpsScript.java:113)
    at groovy.lang.GroovyObject$invokeMethod.call(Unknown Source)
    at org.codehaus.groovy.runtime.callsite.CallSiteArray.defaultCall(CallSiteArray.java:48)
    at org.codehaus.groovy.runtime.callsite.AbstractCallSite.call(AbstractCallSite.java:113)
    at org.kohsuke.groovy.sandbox.impl.Checker$1.call(Checker.java:151)
    at org.kohsuke.groovy.sandbox.GroovyInterceptor.onMethodCall(GroovyInterceptor.java:21)
    at org.jenkinsci.plugins.scriptsecurity.sandbox.groovy.SandboxInterceptor.onMethodCall(SandboxInterceptor.java:115)
    at org.kohsuke.groovy.sandbox.impl.Checker$1.call(Checker.java:149)
    at org.kohsuke.groovy.sandbox.impl.Checker.checkedCall(Checker.java:146)
    at org.kohsuke.groovy.sandbox.impl.Checker.checkedCall(Checker.java:123)
    at com.cloudbees.groovy.cps.sandbox.SandboxInvoker.methodCall(SandboxInvoker.java:15)
    at WorkflowScript.run(WorkflowScript:6)
        ...
Finished: FAILURE

Jenkinsの再起動は、タスクマネージャーの「サービス」タブから実行します。 f:id:moriyamajr:20160601174522j:plain

【補足】Jenkinsのポートを変更する

[Windowsサービスとしてインストールした場合] Jenkinsのインストールディレクトリ直下にあるjenkins.xmlを開き、argumentsに「--httpPort=変更したいポート番号」を指定する。

  <arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -jar "%BASE%\jenkins.war" --httpPort=8180</arguments>

[OS X Homebrewでインストールした場合] /usr/local/bin/jenkinsをテキストエディタで開き、コマンドに「--httpPort=変更したいポート番号」を追加する。

exec java -jar /usr/local/Cellar/jenkins/<i>version</i>/libexec/jenkins.war --httpPort=8180 "$@"

独習Maven 《応用編》 プラグイン

今回は《応用編》 プラグイン編と題して、 以下を目的にMavenを実行し、ビルドプラグインへの理解を深めたいと思います。

  • ライフサイクルを指定する
  • ゴールを指定する
  • ライフサイクルにプライグインを統合する

ライフサイクルを指定する

ライフサイクルを指定し、Mavenを実行してみましょう。 前回の「独習Maven 《基本編》」で行ったように、 「compile」や「test」などライフサイクル中のフェーズを指定し実行します。

myprojectディレクトリに以下の構成でjavaファイルを作成します。

myproject
|   pom.xml
|
\---src
    \---main
        \---java
                A.java

A.javaファイルには以下のソースを記述します。

public class A {

    public static void main(String[] args) {
        System.out.println("Hello Maven!");
    }

}

最後にコンソールを開き、myprojectディレクトリで以下のコマンドを実行します。

mvn clean package
java -cp target/myproject-0.1-SNAPSHOT.jar A

コンソール上に以下の様なログが表示され、javaコマンド実行後「Hello Maven!」が表示されれば成功です。

[INFO] ------------------------------------------------------------------------
[INFO] Building myproject 0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] :
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ myproject ---
[INFO] :
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ myproject ---
[INFO] :
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ myproject ---
[INFO] :
[INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ myproject ---
[INFO] :
[INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ myproject ---
[INFO] :
[INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ myproject ---
[INFO] :
[INFO] --- maven-jar-plugin:2.4:jar (default-jar) @ myproject ---
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.191 s
[INFO] Finished at: 2016-XX-XXTXX:XX:XX+09:00
[INFO] Final Memory: 15M/165M
[INFO] ------------------------------------------------------------------------

mvnコマンド実行後のディレクトリ階層は以下の様になります。

myproject
|   pom.xml
|
\---src
|   \---main
|       \---java
|               A.java
|
\---target
    |   myproject-0.1-SNAPSHOT.jar
    |
    \---classes
             A.class

ゴールを指定する

次にゴールを指定し、Mavenコマンドを実行してみましょう。

mvn clean jar:jar
java -cp target/myproject-0.1-SNAPSHOT.jar A

javaコマンドを実行後、以下のメッセージが表示されると思います。

エラー: メイン・クラスAが見つからなかったかロードできませんでした

Mavenコマンド実行時のログを先ほどのログと比較すると、実行されているプラグインが違うことがわかります。

[INFO] ------------------------------------------------------------------------
[INFO] Building myproject 0.1-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO] :
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ myproject ---
[INFO] :
[INFO] --- maven-jar-plugin:2.4:jar (default-cli) @ myproject ---
[WARNING] JAR will be empty - no content was marked for inclusion!
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1.096 s
[INFO] Finished at: 2016-XX-XXTXX:XX:XX+09:00
[INFO] Final Memory: 7M/155M
[INFO] ------------------------------------------------------------------------

今回、実行したmvnコマンド実行後のディレクトリ階層は以下の様になります。
同じく先ほどのディレクトリ階層と比較するとclasses以下が出力されていません。 実行されているプラグインにより、target以下に出力されるファイルが異なることがわかります。

myproject
|   pom.xml
|
\---src
|   \---main
|       \---java
|               A.java
|
\---target
        myproject-0.1-SNAPSHOT.jar

ライフサイクル実行は、指定したフェーズまでのライフサイクル中のフェーズを順に実行します。
また、フェーズにはそれぞれプラグインのゴールがバインドされています。
例えば、先ほど実行した「package」フェーズには「jar:jar」ゴールが標準でバインドされています。 各フェーズにバインドされているゴールについては、以下を参考にしてください。

参考 https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html#Built-in_Lifecycle_Bindings

ライフサイクルにプライグインを統合する

続いてライフサイクルにプラグインを統合してみましょう。 今回は例として、dependency-maven-pluginを追加します。 myproject配下のpom.xmlを開き以下の内容を貼り付けます。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>a.b.c</groupId>
  <artifactId>myproject</artifactId>
  <version>0.1-SNAPSHOT</version>
  <packaging>jar</packaging>
  <dependencies>
    <dependency>
      <groupId>org.apache.commons</groupId>
      <artifactId>commons-lang3</artifactId>
      <version>3.4</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <properties>
    <maven.compiler.target>1.8</maven.compiler.target>
    <maven.compiler.source>1.8</maven.compiler.source>
  </properties>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-dependency-plugin</artifactId>
        <version>2.10</version>
        <configuration>
          <includeScope>runtime</includeScope>
        </configuration>
        <executions>
          <execution>
            <id>copy-dependencies</id>
            <phase>package</phase>
            <goals>
              <goal>copy-dependencies</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>

</project>

次に以下のMavenコマンドを実行してみましょう。

mvn package

コンソール上に「BUILD SUCCESS」が表示されれば成功です。 mvnコマンド実行後のディレクトリ構造は以下になります。

myproject
|   pom.xml
|
\---src
|   \---main
|       \---java
|               A.java
|
\---target
    |   myproject-0.1-SNAPSHOT.jar
    |
    \---dependency
            commons-lang3-3.4.jar

maven-dependency-pluginのdependency:copy-dependenciesが実行され、target/dependencyにcommons-lang3-3.4.jarが出力されたことがわかります。

《応用編》① プラグイン編は以上です。
次回は《応用編》②としてリソースについて触れたいと思います。

EclipseでSIT−WTのソースをデバッグするための設定

EclipseでSIT-WTのソースをデバッグするための設定です。下記関連記事の事前作業として実施します。

EclipseでSIT−WTのソースをデバッグする - システム開発現場の道具箱

なお、ここでは作業前の状態として下記①~④を想定しています。

  • ① SIT-WTを初めて使用する
  • ② SIT-WTのクイックスタート実施済みMavenプロジェクトがある
  • ③ SIT-ADのクイックスタート実施済みEclipse Mavenプロジェクトがある
  • ④ SIT-WT設定済みのEclipse Mavenプロジェクトがある

①~④の詳細および当記事内で実施する作業は、以下の通りです。 自身の環境に合わせて、作業を実施してください。 「」は当記事内の見出し、『』は関連記事のタイトルです。

① SIT-WTを初めて使用する
 → 「Mavenプロジェクトの作成」を参照

SIT-WTを初めて利用する、プロジェクト未作成の状態です。SIT-WTのテストを実行するための環境を構築します。 テスト対象アプリとして、サンプルWebページの取得も実施します。

② SIT-WTのクイックスタート実施済みMavenプロジェクトがある
 → 「Mavenプロジェクトのインポート」を参照

テスト対象アプリと別に、SIT-WTのクイックスタートを実施したテストプロジェクトが存在する環境です。

app-project  <- Eclipseプロジェクト
  .git
  src/main   <- テスト対象アプリのソースコード
    java
    webapp
  pom.xml    <- テスト対象アプリの設定


test-project <- Mavenプロジェクト(非Eclipseプロジェクト)
  .git
  testscript
    Xxx.xlsx
    Yyy.xlsx
  pom.xml    <- クイックスタートで取得したもの

SIT-WTのクイックスタートで作成したテストプロジェクト(上記の例では「test-project」) を、Eclipseにインポートします。

③ SIT-ADのクイックスタート実施済みEclipse Mavenプロジェクトがある
 → 「Mavenプロファイルの設定追加」を参照

SIT-ADのクイックスタートを実施したプロジェクトが存在する状態です。

project      <- Eclipseプロジェクト
  .git
  src/main   <- テスト対象アプリのソースコード
    java
    resources
    webapp
  testscript
    Xxx.xlsx
    Yyy.xlsx
  tools
  pom.xml    <- テスト対象アプリの設定とSIT-ADの設定

Mavenプロファイルに関する設定を2点追加します。

  • Mavenプロファイル「it」の有効化
  • Mavenプロファイル「debug」の追加

④ SIT-WT設定済みのEclipse Mavenプロジェクトがある
→ 関連記事『EclipseでSIT-WTのソースをデバッグする』を参照

テスト対象アプリのプロジェクトにSIT-WTが設定済みである状態です。

project      <- Eclipseプロジェクト
  .git
  src/main   <- テスト対象アプリのソースコード
    java
    webapp
  testscript
    Xxx.xlsx
    Yyy.xlsx
  pom.xml    <- テスト対象アプリの設定とSIT-WTの設定

デバッグに必要な環境が揃っているため、当記事内では作業不要です。 上記関連記事を参照してください。

Mavenプロジェクトの作成

Mavenプロジェクトの作成

アーキタイプを使用しないシンプルなMavenプロジェクトを作成します。

  1. ファイル」メニュー>「新規」>「その他」を選択します。
    f:id:tkdy0115:20160424173344p:plain

  2. Mavenプロジェクト」を選択し「次へ」ボタンをクリックします。
    f:id:tkdy0115:20160424173345p:plain

  3. シンプルなプロジェクトの作成(アーキタイプ選択のスキップ)」にチェックを入れ、「次へ」ボタンをクリックします。
    f:id:tkdy0115:20160424173347p:plain

  4. グループId」、「アーティファクトId」を入力し、「完了」ボタンをクリックします。
    f:id:tkdy0115:20160424173346p:plain

pom.xmlの置き換え

プロジェクト作成時に生成されたpom.xmlをSIT-WTのクイックスタートで取得するものに置き換え、デバッグに必要な設定が追加された状態にします。

下記リンクのpom.xmlをダウンロードし、プロジェクト直下のpom.xmlに上書きコピーします。

https://raw.githubusercontent.com/sitoolkit/sit-wt-all/master/distribution/pom.xml

サンプルWebページ、テストスクリプトの取得

サンプルWebページ、テストスクリプトを取得します。 なお当作業は、SIT-WTによるテスト実行が可能な環境を作ることが目的であり、デバッグのための作業ではありません。

  1. プロジェクト・エクスプローラー」ビュー、または「パッケージ・エクスプローラー」ビューでプロジェクトを選択し、 右クリック>「実行」>「実行の構成」をクリックします。
  2. 実行構成」ダイアログにて、ゴールに「sit-wt:sample」を入力し、「実行」ボタンをクリックします。
    f:id:tkdy0115:20160424200231p:plain

→ 関連記事『EclipseでSIT−WTのソースをデバッグする』へ進む。

Mavenプロジェクトのインポート

  1. ファイル」メニュー>「インポート」をクリックします。
  2. 既存Mavenプロジェクト」を選択クリックし、「次へ」ボタンをクリックします。
    f:id:tkdy0115:20160430152516p:plain
  3. Import Maven Projects」ウィンドウにて「参照」ボタンをクリックします。
    f:id:tkdy0115:20160430152551p:plain
  4. テストプロジェクトのpom.xmlがあるフォルダを指定し、「OK」ボタンをクリックします。
    f:id:tkdy0115:20160430152705p:plain
  5. プロジェクト」ペインにて該当のpom.xmlにチェックが入っていることを確認し、「完了」ボタンをクリックします。
    f:id:tkdy0115:20160430152641p:plain

→ 関連記事『EclipseでSIT−WTのソースをデバッグする』へ進む。

Mavenプロファイルの設定追加

Mavenプロファイル「it」の有効化
  1. プロジェクト・エクスプローラー」ビュー、または「パッケージ・エクスプローラー」ビューでプロジェクトを選択し、 右クリック>「Maven」>「Mavenプロファイルの選択」をクリックします。 f:id:tkdy0115:20160430151328p:plain
  2. it」にチェックをいれ、「OK」ボタンをクリックします。 f:id:tkdy0115:20160430152739p:plain
Mavenプロファイル「debug」の追加

プロジェクト直下のpom.xmlに、SIT-WTのクイックスタートのpom.xmlに含まれる「debug」プロファイルをコピーします。 クイックスタートのpom.xmlは下記URLから取得します。

https://raw.githubusercontent.com/sitoolkit/sit-wt-all/master/distribution/pom.xml

  <profiles>
       :
    <profile>
      <id>debug</id>
      <build>
        <plugins>
          <plugin>
            <artifactId>maven-failsafe-plugin</artifactId>
            <configuration>
              <forkCount>0</forkCount>
              <systemPropertyVariables>
                <sitwt.debug>true</sitwt.debug>
              </systemPropertyVariables>
            </configuration>
          </plugin>
        </plugins>
      </build>
    </profile>
       :
  </profiles>

→ 関連記事『EclipseでSIT−WTのソースをデバッグする』へ進む。