ApacheWicketでHelloWorld! | キャスレーコンサルティング株式会社

みなさん、こんにちは！
キャスレーコンサルティング、システムデザイン部のI.Sです。

はじめに

Javaで開発を行なうに当たり、様々なフレームワークを使用する機会があると思います。
私自身、今まで主にseasar2での開発経験のみのため、
他のフレームワークには、どのような特徴があるのかと疑問に思い調べ初めました。

そんな中で、特に興味を持った「Apache Wicket」（以降Wicketと表現します。）について、
実際に開発環境を作成しましたので、ご紹介します。

※環境設定はMac OSにて作成しておりますが、windowsでも手順は同様です。

特徴

設定ファイルやアノテーションによってコーディング量を減らすことを
目的とするフレームワークが多い中、Wicketは逆の発想で、
Webの開発において全てをJavaで書くことが、
Javaエンジニアにとっては楽だという発想のフレームワークです。

「フロントサイドのプログラミングが、得意ではない自分にもできるかも？！」
と思ったのは私だけではないはず・・・。

そんな理由から、Wicketに触れてみたいと思いました。

Wicketの入手

下記よりダウンロードします。
https://wicket.apache.org/

・・・どこかのアーティストのサイトかと思いました。

Wicketには2017年8月現在、4つのバージョンが用意されています。

「Wicket 8.x」に関しては絶賛開発中ということなので、

正式にリリースされている最新バージョン「Wicket 7.8.0」をダウンロードしました。

Mavenのインストール

WicketはMavenベースの開発を行なう為、https://maven.apache.org/ よりMavenをダウンロードし、
インストールしておきます。

※今回はapache-maven-3.5.0-bin.tar.gzをダウンロードしました。

アプリケーションの作成

下記のWebサイトにアクセスします。
https://wicket.apache.org/start/quickstart.html

下記を設定します。
Group ID：パッケージ。今回は「com.test.wiket」としました。
Artifact ID：アプリケーション名。今回は「testapp」としました。
Wicket Version：バージョン。今回は「7.8.0」です。
Server to deploy on：デプロイサーバーの指定。デフォルトのまま変更していません。

generated command line：上記を設定するとMavenのコマンドが自動生成されます。

続いて、コマンドプロンプトにて、cdコマンドでアプリケーションを作成する場所に移動します。

cd usr/local/wicketTest

※こちらのフォルダは任意の名前で作成しました。（mkdir /usr/local/wicketTest）

先ほどの自動生成された（generated command lineに記載されている）コマンドを実施します。

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket -Da rchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=7.8.0 -DgroupId=com.test.wicket -DartifactId=testapp -DarchetypeRepository=https://repository.apache.org/ -DinteractiveMode=false

「BUILD SUCCESS」と表示されれば成功です。

動作する、雛形のアプリケーションが作成されているので、作成されたフォルダに移動します。

cd testapp

※testappの部分は artifactIdで設定したアプリケーション名となります。
実行します。

mvn jetty:run

コンソールに「Started Jetty Server」と表示されれば起動完了です。

下記URLにアクセスします。
http://localhost:8080

下記画面が表示されれば起動成功です！

Eclipseから開くには

下記コマンドを実行します。

mvn -DdownloadSources=true -DdownloadJavadocs=true eclipse:eclipse

※「mvn jetty:run」を実行した時と同じフォルダで実行します。
「BUILD SUCCESS」と表示されれば成功です。

以降はEclipseでの作業となります。
Eclipseを任意のワークスペースで起動します。

先ほどEclipse用に変換したプロジェクトをインポートします。
「パッケージ・エクスプローラ」上で右クリック→「インポート」を選択します。
次に、「一般」タブの「既存プロジェクトをワークスペースへ」を選択します。

「ルート・ディレクトリーの選択」の「参照…」から、mvnコマンドにて変換したフォルダを選択します。
「プロジェクトをワークスペースにコピー」にチェックをつけ、「完了」ボタンをクリックします。

インポートされました。

プロジェクトの設定

インポートされたプロジェクト（今回はtestapp）を右クリックし、
「構成」－「Maven プロジェクトへ変換」を選択します。

実行方法

scr/test/java com.test.wicketに配置してある「Start.java」を右クリックし、
「実行」－「Javaアプリケーション」を選択します。

実際の利用

wicketを使用してWebアプリケーションを開発するにあたって編集するファイルは、
scr/main/java に配置されています。

WicketApplication.java：アプリケーション全体に関する処理が用意されるクラスファイル。
HomePage.java：サンプルで用意されている、デフォルトで表示されるページに関する処理を行う為のクラスファイル。
HomePage.html：デフォルトで表示されるページのテンプレート。

「アプリケーションのクラス」はアプリケーションに対して１つだけです。
「Webページのクラス」と「Webページのテンプレート」はセットで複数用意できます。

では実際に、用意されてールソースコードを書き換えて、基本的な機能を試してみます。
（いわゆるHelloWorldです。）

HomePage.java

デフォルトで作成されたファイルは上記のようになっています。
TODO部分を書き換えます。

add(new Label("message", "これはWicketのサンプルページです"));

この「add」メソッドは、Wicket用コンポーネントをページに追加するものです。
WicketはHTML内にWicket用のタグを記述しておき、そこにコンポーネントを埋め込んでページを構築しています。
今回は、デフォルトで記載されている、バージョン表示用のLabelコンポーネントの下に、メッセージ表示用のLabelコンポーネントを追加しました。

HomePage.html

<!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <head>
 <meta charset="utf-8" />
 <title>Apache Wicket Quickstart</title>
 <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold' rel='stylesheet' type='text/css' />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Stylesheet" />
 </head>
 <body>
  <div id="hd">
   <div id="logo">
    <img src="logo.png" width="50px" height="50px" alt="Wicket Logo" />
     <h1>Apache Wicket</h1>
   </div>
  </div>
  <div id="bd">
   <p> Please mention the correct Wicket version: <wicket:container wicket:id="ver">1.5-SNAPSHOT</wicket:container>. 
   </p>
   <p> <wicket:container wicket:id="message">ここにメッセージが表示されます。</wicket:container>
   </p>
  </div>
  <div id="ft">
  </div>
 </body>
</html>

デフォルトで作成されているHTMLを上記のように編集し、バージョンが表示されるタグの下に、
メッセージ表示用のタグを追記しました。

先ほど、HomePage.javaにて、addメソッドに「message」という名前を指定しましたが、
HTML側で、wicket:idに指定することで、java側で指定したメッセージが設定されます。
実行すると下記のようになります。

ここまで作成してみて・・・

Web上からパッケージ名等を指定し、コマンドを実行すると自動的に開発に必要なフォルダ構成を作成してくれる。（とても便利！）
設定ファイルはWeb.xmlのみで複雑な設定を行なわなくて良い。（私のようなWicket初心者でも簡単に実行環境を作成することが出来る！）
画面の作成も、HTMLファイルとJavaだけで、wicketIdを指定することで、画面側でコンポーネントの内容を設定できる。（Javaユーザーにとっては使い易い！）

最後に

プロジェクトでは触っていないフレームワークについて、調べることで、
Javaの歴史や流行、未来の話までたくさんの情報を得ることが出来ました。

自分が便利に使用することが出来るのは、作ってくれた誰かがいることを再認識したり、自分が開発を行なう際も、
生産性やメンテナンスのしやすさを考えたコーディングを心がけようと、思い直す良い機会となりました。

インストールから環境設定までは少々複雑に感じましたが、ページの表示に関しては簡単だったので、
引き続き開発を進めて行きたいです。

最後までご覧いただきまして、ありがとうございました。

参考文献：EclipseではじめるJavaフレームワーク入門第5版Maven/Gradle対応

Apache WicketでHelloWorld!