LoginSignup
6
7

More than 5 years have passed since last update.

@1roh(ichiroh satake)

RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる１（準備編）

Last updated at Posted at 2015-12-29

ここのところ、昔な技術を使ったプロジェクトばかりなので、今風な技術を使って物を作れるようになるために、子供の家庭学習用のWebアプリを作ってみることにしました。

概要

  • アカウントIDとパスワードでログインすると、前回間違えた問題の一覧が表示される。
  • 開始ボタンで問題と回答欄を表示し、採点ボタンで回答を履歴に保存して、結果を一覧で表示する。
  • ユーザとか問題の登録は余裕ができた時に作るとして、とりあえずは問題を解く側の機能のみを実装する。

ダウンロード

IDEは使い慣れたeclipseを使用することにしました。
いろいろプラグイン入れたりするのはめんどくさいのでPleiades - Eclipse プラグイン日本語化プラグインから Eclipse 4.5 Mars - Java - 64bit - Full Edition を落としてきます。
ドライブルートにdevelopディレクトリを作成して、そこに解凍しました。

コンテナは最近JBossを使う機会があったので、wildflyにします。
ダウンロードページから 9.0.2.Final - Java EE7 Full & Web Distribution を落としてきます。
特に意味はないけど、pleiades の tomcat の構成に倣って、pleiades/wildfly を作成してから、そこに解凍してみました。

DBはとりあえずMySQLにします。
なるべくPCをきれいにしておきたいので、XAMPPのダウンロードページからポータブル版（xampp-portable-win32-5.6.15-1-VC11.7z）を落としてきます。
（/develop に）解凍したら xampp/setup_xampp.bat を実行します。

事前準備

mavenのディレクトリ変更

デフォルトだと、${user.home}.m2 下にダウンロードされるので、特定の場所に変更します。
（これは個人的な好みというか開発用セットを作ったりするときの癖です）

  • /develop 下に maven_repo ディレクトリを作成します。
  • /develop/maven_repo にローカルリポジトリを指定した setting.xml を作成します。
setting.xml
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                        http://maven.apache.org/xsd/settings-1.0.0.xsd">
    <localRepository>
        E:/develop/maven_repo
    </localRepository>
</settings>
  • eclipseで「ウインドウ」－「設定」－「Maven」－「ユーザー設定」 の「ユーザー設定」欄に上記ファイルを指定して、「設定の更新」ボタンをクリックします。

MySQL の文字コード設定

/develop/xampp/mysql/bin/my.ini のコメントを外します。

my.ini
..........
## UTF 8 Settings
#init-connect=\'SET NAMES utf8\'
collation_server=utf8_unicode_ci
character_set_server=utf8
skip-character-set-client-handshake
character_sets-dir="/develop/xampp/mysql/share/charsets"
..........

データベースの作成

  • xampp/xampp-control.exe を実行し、MySQLの行の「Start」ボタンをクリックして、MySQLを起動します。
  • 使い慣れているデータベースクライアント（僕はA5:SQL）で root で接続（パスワードなし）し、ユーザとデータベースを作成します。
init.sql
-- ユーザの作成
CREATE USER db_user@localhost IDENTIFIED BY 'db_pass';
-- データベースの作成
CREATE DATABASE homework DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
-- 作成したユーザへの権限の付与
GRANT ALL PRIVILEGES ON homework.* TO db_user@localhost IDENTIFIED BY 'db_pass';
-- 単体テスト用のデータベースもついでに作成しておく
CREATE DATABASE homework_ut DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
GRANT ALL PRIVILEGES ON homework_ut.* TO db_user@localhost IDENTIFIED BY 'db_pass';

wildflyのランタイム環境を用意する

  • eclipseで「ウインドウ」－「設定」－「サーバー」－「ランタイム環境」で「追加」をクリックします。
  • 「新規サーバー・ランタイム環境」画面で右上の「Show additional server adapter」リンクをクリックします。
  • 「新規拡張のインストール」画面で「JBoss AS, Wildfly & EAP Server Tools」をクリックします。
  • 依存関係の解決などで待たされた後、「次へ」ボタンのクリック、「使用条件の条項に同意します」を選択して、「完了」ボタンをクリックします。
  • メッセージ表示後「OK」ボタンのクリックでインストールが開始します。途中で「セキュリティ警告」のメッセージが表示されるので「OK」ボタンをクリックします。
  • インストール完了後に、再起動を促すダイアログが表示されるので「はい」ボタンをクリックして再起動します。
  • 再起動したら、改めて「ウインドウ」－「設定」－「サーバー」－「ランタイム環境」で「追加」をクリックします。
  • JBoss コミュニティーから「Wildfly 9.x Runtime」を選択し、「次へ」ボタンをクリックします。
  • 「ホームディレクトリ」解凍したwildflyのルートを指定（E:\develop\pleiades\wildfly\wildfly-9.0.2.Final）し、「完了」ボタンをクリックします。

プロジェクトの作成

  • パッケージエクスプローラーで右クリックし、「新規」－「プロジェクト」をクリックします。
  • 「ウィザードを選択」画面で「Maven」－「Mavenプロジェクト」を選択し、「次へ」ボタンをクリックします。
  • 「プロジェクト名およびロケーションの選択」画面ではデフォルトのまま「次へ」ボタンをクリックします。
  • 「アーキタイプの選択」画面ではアーティファクトIDが「maven-archetype-webapp」を選択し、「次へ」ボタンをクリックします。
  • グループIDとアーティファクトIDはどちらも「homework」にして「完了」ボタンをクリックします。
  • エクスプローラーで src ディレクトリの下に main/java, test/java, test/resources を作成します。
  • eclipse でプロジェクトをリフレッシュします。
  • 「homework」プロジェクトを選択、右クリックし、「新規」－「ソース・フォルダー」を選択します。
  • 「フォルダー名」に src/test/resources を入力し、「完了」ボタンをクリックします。
  • 「homework」プロジェクトを選択、右クリックし、プロパティを選択します。
  • 「Javaのビルド・パス」を選択し、「ライブラリ」タブを選択します。
  • 「ライブラリーの追加」ボタンをクリックし、「サーバー・ランタイム」を選択して、「次へ」ボタンをクリックします。
  • 「Wildfly 9.x Runtime」を選択し、「完了」ボタンをクリックします。
  • 「ターゲット・ランタイム」を選択し、「Wildfly 9.x Runtime」をチェックして、「OK」ボタンをクリックします。
  • 「homework」プロジェクトを選択、右クリックし、「構成」－「JPAプロジェクトへ変換」を選択します。
  • 「プロジェクト・ファセット」画面で、「Java」のバージョンを 1.5 から 1.8 に変更します。
  • また、「JAX-RS(REST Web サービス)」にチェックを追加し、「次へ」ボタンをクリックします。
  • 「JPA実装」が「ターゲット・ランタイムが提供するライブラリー」になっていることを確認して「完了」ボタンをクリックします。

依存するライブラリを指定する

  • pom.xml の dependencies 編集して利用するライブラリを取得する。
pom.xml
    <dependencies>
        <!-- いろいろ便利なので -->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.0</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.2</version>
        </dependency>
        <!-- Base64使いたかったので -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.10</version>
        </dependency>
        <!-- メール送信するので -->
        <dependency>
            <groupId>javax.mail</groupId>
            <artifactId>javax.mail-api</artifactId>
            <version>1.5.5</version>
        </dependency>

        <!-- JDBC ドライバ -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.24</version>
            <scope>runtime</scope>
        </dependency>
        <!-- SQLのログ出力用 -->
        <dependency>
            <groupId>org.bgee.log4jdbc-log4j2</groupId>
            <artifactId>log4jdbc-log4j2-jdbc4.1</artifactId>
            <version>1.16</version>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.13</version>
            <scope>runtime</scope>
        </dependency>

        <!-- エクセル読み込みツール用 -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi</artifactId>
            <version>3.13</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>3.13</version>
            <scope>test</scope>
        </dependency>

        <!-- 単体テスト -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
            <scope>test</scope>
        </dependency>

        <!-- JPA単体テスト実行用 -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-entitymanager</artifactId>
            <version>5.0.5.Final</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.fasterxml</groupId>
            <artifactId>classmate</artifactId>
            <version>1.3.1</version>
            <scope>test</scope>
        </dependency>
    </dependencies>

WEB-INF/lib にライブラリが配置されるように設定

そのままだと src/main/webapp/WEB-INF/lib にライブラリが配置されないみたいなので、以下の設定を行います。

  • プロジェクトを右クリック－「プロパティ」を選択します。
  • 「デプロイメント・アセンブリー」を選択し、右画面で「追加」ボタンをクリックします。
  • 「ディレクティブ・タイプの選択」画面で「Javaビルド・パス・エントリー」を選択し、「次へ」ボタンをクリックします。
  • 「Javaビルド・パス・エントリー」画面で「Maven依存関係」を選択し「完了」ボタンをクリックします。
  • 画面の一覧に「Maven依存関係」の「デプロイ・パス」が「WEB-INF/lib」となればOKです。

とりあえず、こんな感じで実装に取り掛かる準備はできたかと思います。

RESTEasyとJPAとAngularJSを使ってWebアプリを作ってみる２（エンティティの作成へ

実装したものを GitHub に上げました。
テストとか超ザルだけど…。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7