仮想マシンでFedoraサーバ - Apache Wicketによるウェブサイト開発（２）

まずはWicketを利用したプログラム開発が行えるようにするため、Wicketのライブラリをダウンロードします。

  http://wicket.apache.org/learn/examples/helloworld.html

上記のサイトの画面左側で"Releases"という欄を探します。この中からWicketの最新バージョンを選び、遷移先からZIPファイルをダウンロードします。
ファイル名はapache-wicket-1.4.17.zipなどです。

ダウンロードしたファイルを、任意の場所に解凍します。（例えばEclipseと同じ場所に解凍した場合、C:¥Program Files¥EclipseWork¥apache-wicket-1.4.17¥ など）

以上でWicketでウェブアプリケーションを作成する準備が整います。以下、プロジェクトの作成からウェブサーバへの配置までの一連の流れを大まかに追ってみます。

［１］Eclipseの設定

  最初にEclipseの設定をいくつか確認しておきます。

  -  Eclipseを起動します。上部メニューから、「ウィンドウ」－「設定」を選択します。

  -  開いた設定ダイアログの左側の一覧から、「一般」－「ワークスペース」を選択します。

      -  ダイアログ右側の「テキスト・ファイルのエンコード」で「その他」を選択します。

      -  文字コードとして、「UTF-8」を選択します。

  -  次にダイアログの左側の一覧から、「Java」－「インストール済みのJRE」を選択します。

      -  ダイアログ右側の一覧へ、前ページでインストールしたJDKを追加します。

      -  追加したJDKの行頭にチェックをつけて、デフォルトで使用する設定にします。

  -  「OK」を押下してダイアログを閉じます。

［２］プロジェクトの作成

  -  上部メニューから、「ファイル」－「新規」－「プロジェクト」を選択します。

  -  一覧の中から、「Web」－「動的Webプロジェクト」を選択し、「次へ」ボタンを押下します。

      -  開いたウィザード画面で、任意のプロジェクト名を入力します。（例えば"WicketTest"など）

      -  また、ターゲットランタイムとしてTomcat6を選択します。

      -  「完了」を押下してプロジェクトを作成します。

  -  Eclipse画面左側、プロジェクト・エクスプローラーに新規作成したプロジェクトが追加されます。

      -  「WebContent」－「WEB-INF」とフォルダを開きます。

      -  「lib」フォルダを右クリックして「インポート」を選択します。

      -  「リモート・システム」－「リモート・ファイル・システム」を選択して「次へ」進みます。

      -  先ほどWicketのライブラリを解凍した場所から、次のファイルを選択します。
          （以下はバージョン1.4.17の場合）

          -  "lib"フォルダより、

              -  wicket-1.4.17.jar

          -  "lib/wicket-examples-1.4.17/WEB-INF/lib"フォルダより、

              -  log4j-1.2.14.jar
              -  slf4j-api-1.5.8.jar
              -  slf4j-log4j12-1.5.8.jar

      -  「完了」を押下して上記のファイルをインポートします。
          「lib」フォルダ直下に上記４ファイルが追加されているのが確認されます。

  -  新規作成したプロジェクトに新しいパッケージを追加します。

      -  "src"フォルダを右クリックして「新規」－「パッケージ」を選択します。

      -  パッケージ名を入力して「完了」を押下します。

            （注）パッケージ名は一般的に全て小文字で、ドメイン名を逆にしたものを頭につけます。
                例：com.rurihabachi.function1.subfunction1など

  これでソースファイルを作成する準備ができました。

［３］管理用クラスとトップページの作成

  上で作成したパッケージの中に、３つのファイルを新規作成します。

  -  １つめ・・・アプリケーション全体を管理するためのクラス

      -  パッケージを右クリックして「新規」－「クラス」を選択します。

          -  クラス名を入力します。（例えば"WicketApplication"とします）

          -  「スーパークラス」の欄で「参照」をクリックします。

              -  「型」の欄に"WebApplication"と入力します。

              -  一覧から"WebApplication-org.apache.wicket.protocol.http"を選択します。

              -  「OK」を押下します。

          -  「完了」を押下します。

      -  "WicketApplication.java"というファイルが追加されました。

  -  ２つめ・・・トップページのhtmlファイル

      -  パッケージを右クリックして「新規」－「HTMLファイル」を選択します。

          -  画面上部でファイルを追加するパッケージ（フォルダを展開）を選択します。

          -  ファイル名を入力します。（例えば"TopPage"とします）

          -  「完了」を押下します。

      -  "TopPage.html"というファイルが追加されました。

  -  ３つめ・・・トップページの動的ウェブページクラス

      -  パッケージを右クリックして「新規」－「クラス」を選択します。

          -  クラス名を入力します。（"TopPage"）　名前は必ず上記htmlファイルと同じにします。

          -  「スーパークラス」の欄で「参照」をクリックします。

              -  「型」の欄に"WebPage"と入力します。

              -  一覧から"WebPage-org.apache.wicket.markup.html"を選択します。

              -  「OK」を押下します。

          -  「完了」を押下します。

      -  "TopPage.java"というファイルが追加されました。

  今作成したファイルのうち、

  -  WicketApplication.javaはアプリケーション全体に１つ必要なものです。

  -  TopPage.htmlとTopPage.javaは、２つセットでひとつのウェブページを構成します。

      -  ページのレイアウトやデザインなどは主にhtmlファイルで、
      -  動的なコンテンツはjavaクラスで設定します。

［４］ウェブページの実装

  続いて今作成した３つのファイルとweb.xmlを編集していきます。

  -  web.xml

      -  "WebContent"-"WEB-INF"とフォルダを展開してweb.xmlを開きます。

      -  ファイルの中身をまるごと下記のように書き換えて保存します。

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE web-app
        PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd">

  <web-app>
    <display-name>（表題）</display-name>
    <filter>
        <filter-name>（プロジェクト名）</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
            <param-name>applicationClassName</param-name>
            <param-value>（パッケージ名＋WebApplicationクラスのファイル名）</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>（プロジェクト名）</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
  </web-app>

例：

  <?xml version="1.0" encoding="UTF-8"?>
  <!DOCTYPE web-app
        PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
        "http://java.sun.com/dtd/web-app_2_3.dtd">

  <web-app>
    <display-name>Wicket Webpage Test</display-name>
    <filter>
        <filter-name>WicketTest</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
            <param-name>applicationClassName</param-name>
            <param-value>com.rurihabachi.testwebpage.WicketApplication</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>WicketTest</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
  </web-app>

  -  WicketApplication.java

      -  getHomePageメソッドで、はじめに表示するウェブページ（ホームページ）を指定します。

      -  また、日本語のウェブアプリケーションを作成する場合はエンコーディングの設定を行います。

  package test.testdomain.testpackage;

  import org.apache.wicket.Page;
  import org.apache.wicket.protocol.http.WebApplication;

  public class WicketApplication extends WebApplication {

      @Override
      public Class<? extends Page> getHomePage() {
          //最初に表示されるページを設定
          return TopPage.class;
      }

      @Override
      protected void init() {
          //エンコーディングの設定
          getMarkupSettings().setDefaultMarkupEncoding("UTF-8");
          getRequestCycleSettings().setResponseRequestEncoding("UTF-8");
      }

  }

  -  TopPage.html

      -  htmlファイルには通常のホームページ作成時と同様にコンテンツを追加していきます。
          ただし、動的に内容が変わる部分は、内容を表示するところにwicket：id（任意の文字列）
          を目印として置いて、表示位置だけを確保しておきます。

      -  １例として、ニュース文を１つ表示するページを作成してみましょう。
          下記のように、spanタグを使ってwicket：idを指定しておきます。

  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Wicket Test</title>
  </head>
  <body>

  <span wicket:id="news1">news</span>

  </body>
  </html>

  -  TopPage.java

      -  ウェブページクラスの中からは、htmlファイルに置いたwicket：idの位置に表示する内容
          を指定します。

      -  ここでの例ではWicketコンポーネントの１つ、Labelを使用してみます。
          第１引数にwicket：idを、第２引数に表示文字列をそれぞれ指定します。

  import org.apache.wicket.markup.html.basic.Label;

  public class TopPage extends WebPage {

      public TopPage() {
          add(new Label("news1", "今日は午後からお天気も回復して暖かくなるでしょう。"));
      }

  }

［５］動作テスト

  上記で作成した動的ウェブページを動かしてみましょう。

  -  プロジェクトを右クリックして、「実行」－「サーバで実行」または「実行の構成」を選択します。
      使用するサーバとしてローカルホストのTomcat6.0を指定して実行します。

  正常に実行されると、下記のようなウェブサイトが開きます。

今日は午後からお天気も回復して暖かくなるでしょう。

  もしうまくいかない場合は、ここまでの設定をもう一度見直します。

  -  web.xmlや各ソースファイルの設定は正しいか
  -  WebContent/WEB-INF/lib直下に必要なライブラリがインポートされているか　など

  ウェブページは随時追加していくことができます。
  ページを追加する場合は、必ず同じ名前のhtmlファイルとjavaクラスの２つをセットで追加します。

［６］ウェブページのURL設定と稼動モードの切り替え

  Wicketを利用してウェブページを開発すると、各ページのURLはとても複雑になってしまいます。
  またそのURLは一時的に割り当てられるものなので、お気に入りに入れておいて後からアクセスしても
  同じページを再度表示することはできません。

  そこで、固定のURLを割り当てたほうがよいページ（ブックマーク可能ページ）に関しては、
  WebApplicationクラス（WicketApplication.java）の中であらかじめURLを設定します。
  例えば下記のソースの青字部分のように設定すると、TopPageはいつでも
  "http://（ウェブサーバ名)/(WARファイル名)/home"でアクセスできるようになります。

  また、Wicketには稼動モードとして「開発モード」と「配備モード」があります。
  ここまでの作業中、稼動モードは開発モード（DEVELOPMENT）に設定されていますが、開発した
  ウェブアプリケーションをサーバで動作させるときは、これを配備モード（DEPLOYMENT）に変える
  必要があります。

  稼動モードを変更するときは、WebApplicationクラス（WicketApplication.java）に下記のソース
  の赤字部分を追加します。

  上記の設定が終わりましたら、作成したウェブアプリケーションをウェブサーバへ配布するための準備
  をします。下記の手順でWARファイル（ウェブアプリケーションのアーカイブ）を作成しましょう。

  -  プロジェクトを右クリックして「エクスポート」－「WARファイル」を選択します。

  -  宛先（出力先）のディレクトリとファイル名を指定してWARファイルを作成します。

［７］ウェブサーバへの配布

  最後に、作成したウェブアプリケーションをサーバにアップします。

  ［６］で作成したプロジェクトのWARファイルを、ウェブサーバのアプリケーションフォルダへ
  （Tomcatの場合は/usr/tomcat/apache-tomcat-6.0.xx/webapps/内へ）コピーします。

  WARファイルは自動的に展開されてアプリケーションを動作させることができる状態になります。
  ウェブサーバ上でhttp://localhost:8080/WicketTest/にアクセスしてみましょう。
  （"WicketTest"の部分はWARファイル名です。）
  トップページが無事表示されればOKです。

  なお、9(3) Tomcatのインストール・Apacheとの連携にあるように、ウェブアプリケーションを
  新規追加した場合は必要に応じてhttpd.confを編集する必要があります。
  設定を変えた後はApacheの再起動も忘れずにしましょう。

以上が、Wicketによるウェブアプリケーション開発のおおまかな手順になります。

　◇　　　　　◇　　　　　◇

次ページでは、Wicketを利用したプログラムのサンプルソースを載せています。