Nablarchを使ったWebアプリケーションの作成

# はじめに
こんばんわ、きりです。
本記事は[Nablarchを使ってみよう](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17)のサブ記事として作成しております。

今回はNablarchのメイン機能であるWebプリケーションの作成を行います。
テンプレートとなるプロジェクトが用意されているためまずはテンプレートのダウンロードと実行を行ってみたいと思います。

本記事以外のコンテンツは[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から閲覧可能です。

なるべく、初心者目線で作成するつもりですが、分かりづらい部分ありましたら、コメント頂きたいです。

# 動作環境
|種類|バージョン|
|---|---|
|OS|Windows Professional 20H2|
|Eclipse|2022 Full Edition|

※Eclipseのダウンロードについては、[こちら](https://qiita.com/kirin1218/items/02bfeb333335842c56ae)の記事をご確認ください。

# Webアプリケーションとは
Webアプリケーションとは、正確にはインターネット上で動作するアプリケーションを指しますが、今回作成するWebアプリケーションは会社のホームページやクレジットカードの会員ページなどのWebサイトを指します。

厳密にはNablarcｈのテンプレートだけで生成できるのは、Warファイルと呼ばれるJavaのクラスファイルなどをZip化したファイルとなりますが、Tomcatなどのソフトウェアを利用することでWebサイトとして動作することができます。

Warファイルを作る　>>> Tomcatの特定のフォルダにWarファイルを配置する　>> ブラウザで画面が表示できる

といったイメージで一旦OKです。

# 作業内容
1. Webアプリケーションのテンプレートプロジェクトをダウンロードする
2. テンプレートプロジェクトの動作確認を行う

# Webアプリケーションのテンプレートプロジェクトをダウンロードする
## テンプレートプロジェクトのダウンロード
Webアプリケーションのブランクプロジェクトをダウンロードします。

ダウンロードは[こちら](https://nablarch.github.io/docs/LATEST/doc/application_framework/application_framework/blank_project/setup_blankProject/setup_Web.html)のドキュメントを参考に行います。

### Eclipseからテンプレートをダウンロードする
テンプレートはmvnからダウンロードします。
一般的にはコマンドプロンプトやターミナルからmvnのコマンドを実行するのですが、今回はEclipseからmvnを実行します。

メニュー>実行>実行構成 をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/e81d58fc-025c-f4c3-2c31-fbc242f3f76b.png)

実行構成ダイアログにて、Mavenビルドを選択し、新規の起動構成ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/ec959548-2efb-ff3d-480f-07f9dae49f74.png)

以下の情報を入力します。
|キー|値|例|
|---|---|---|
|名前|任意の値|mvn-download-nablarchweb|
|基底ディレクトリー|${workspace_loc}||
|ゴール|org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DinteractiveMode=false -DarchetypeGroupId=com.nablarch.archetype -DarchetypeArtifactId=nablarch-web-archetype -DarchetypeVersion="5u21"  -DgroupId=com.example -DartifactId=myapp-web -Dversion=0.1.0 -Dpackage=com.example||

※archetypeVersion,groupId,artifactId,version,package名は変更可能です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/56edf508-747f-b0d3-f72f-3072d6a1c8b7.png)

適用後、実行ボタンをクリックします。
ダウンロードが開始され、コンソールビューで以下のようにBUILD SUCCESSが表示されれば成功です。
ワークスペース直下に、「myapp-web」フォルダが作成されているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/60637513-fd26-d892-e38c-466b2cc6a5cc.png)

## テンプレートプロジェクトの読み込み
メニュー>ファイル>ファイル・システムからプロジェクトを開く　をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/e700078b-48bc-4346-338e-29a7a7fdb3f5.png)

ファイル・システムまたはアーカイブからプロジェクトをインポートダイアログでディレクトーボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/dcc886e5-f936-1a96-ec3c-88f39a09cb55.png)

[Eclipseからテンプレートをダウンロードする](##Eclipseからテンプレートをダウンロードする)にてダウンロードした「myapp-web」を選択して、「フォルダーの選択」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/31ede43a-5438-b480-ea87-d1bfe1efc60c.png)


「myapp-web」にチェックがついていることを確認して、完了ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/33f55dfe-5809-e543-be25-86b063f40170.png)

プロジェクトが追加されました。

# プロジェクトの設定を実行環境のJavaバージョンに合わせる
ダウンロードしたテンプレートはJava8での動作を想定した構成となっています。

今回はJava17で実行できるように、各設定を変更します。
詳細については[Java17で使用する場合のセットアップ方法](https://nablarch.github.io/docs/LATEST/doc/application_framework/application_framework/blank_project/setup_blankProject/setup_Java17.html#java17)をご確認ください。

## pom.xmlの変更
以下のように既存のpom.xmlを編集し、依存関係を追加します。

```pom.xml
<dependencies>
  <!-- 中略 -->
  <!-- 以下を追加する。 -->
  <dependency>
    <groupId>com.sun.activation</groupId>
    <artifactId>javax.activation</artifactId>
    <version>1.2.0</version>
  </dependency>
  <dependency>
    <groupId>com.sun.xml.bind</groupId>
    <artifactId>jaxb-core</artifactId>
    <version>2.3.0</version>
  </dependency>
  <dependency>
    <groupId>com.sun.xml.bind</groupId>
    <artifactId>jaxb-impl</artifactId>
    <version>2.3.5</version>
  </dependency>
  <dependency>
    <groupId>javax.annotation</groupId>
    <artifactId>javax.annotation-api</artifactId>
    <version>1.3.2</version>
  </dependency>
</dependencies>
```
変更後に、プロジェクト名を右クリック>Maven>プロジェクトの更新をクリックし必要な依存関係をダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/92d2c1dc-4b32-a6dd-622e-56a6671807f5.png)

## jettyのモジュールを変更する
pom.xmlとunit-test.xmlを以下のように編集します。
jetty6をjetty9に変更します。

* pom.xml
```pom.xml
<!-- nablarch-testing-jetty6の箇所を以下のように変更する -->
<dependency>
  <groupId>com.nablarch.framework</groupId>
  <artifactId>nablarch-testing-jetty9</artifactId>
  <scope>test</scope>
</dependency>
```
* src/test/resources/unit-test.xml
```unit-test.xml
!-- HttpServerFactoryJetty6の箇所を以下のように変更する -->
<component name="httpServerFactory" class="nablarch.fw.web.httpserver.HttpServerFactoryJetty9"/>
```

## コンパイラーと実行環境を変更
### JREの設定
プロジェクト作成時にビルド・パス設定に追加される、Java実行環境　のバージョンを指定します。

プロジェクト作成後もビルド・パス設定にて、変更ができます。
1. メニュー>ウィンドウ>設定 をクリック
2. サイドメニュー>Java>インストール済みのJRE を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/defaa241-4166-4efa-f07f-e81a21ba718c.png)
3. java17をチェック(画像だとJava17がデフォルトとなっている)
4. 「適用して閉じる」ボタン をクリック

### コンパイラーの設定
ビルド時に使用するJDKバージョンを指定します。
1. メニュー>ウィンドウ>設定 をクリック
2. サイドメニュー>Java>コンパイラー を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/d507d14d-54b4-105f-edf7-e2d1df087e73.png)
3. コンパイラー準拠レベルを17に変更します
4. 「適用して閉じる」ボタン をクリック

# テストの実行
既にテストが用意されているので以下の手順でテストを実行します。

上記の[テンプレートプロジェクトのダウンロード](##テンプレートプロジェクトのダウンロード)と同じように、実行構成を作成して実行ボタンをクリックします。

|キー|値|例|
|---|---|---|
|名前|任意の値|mvn-test-web|
|基底ディレクトリー|${project_loc:myapp-web}||
|ゴール|test||

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/87a625e1-8a64-a097-79b9-b8f5558e6af8.png)

成功した場合は以下の画像のようにBUILD SUCCESSとなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/65497a57-93c1-6d1e-96de-ac83957f5111.png)

失敗した場合は、[#プロジェクトの設定を実行環境のJavaバージョンに合わせる](#プロジェクトの設定を実行環境のJavaバージョンに合わせる)の設定が行えているかを確認してください。

# ブラウザで画面を表示する
本記事で何度か行っている方法で「mvn waitt:run」を実行します。

|キー|値|例|
|---|---|---|
|名前|任意の値|mvn-waitt|
|基底ディレクトリー|${project_loc:myapp-web}||
|ゴール|waitt:run||

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/3a41d58b-000a-9d6d-f339-8a93b62a1ba2.png)

ブラウザが起動し、以下の画面が表示されれば成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/ceb9ed9c-123b-e70f-42e0-6a60e67ba160.png)

# 最後に
今回はNablarchのWebアプリケーションのテンプレートのダウンロードから実行までを行いました。
まだ、言われたままにやっただけといった印象かと思いますので、次回以降の記事でテンプレートの内容について整理していきたいと思います。


他の記事については[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から御覧ください。