rurihabachi
Last update: 2013/11/25  
    仮 想 マ シ ン で Fedora サ ー バ       ◇◇◇  お金をかけずに簡単簡潔  ◇◇◇  サーバ構築公開手順 覚書き  ◇◇◇
 
 
サーバ構築メニュー  
     1. はじめに
     2. 構築前の準備
     3. サーバの役割り
  » 4. サーバの計画
  » 5. 仮想マシンの準備
  » 6. Fedoraの準備
  » 7. サーバの基本設定
  » 8. ファイアウォール
  » 9. ウェブサーバ
  « 10. Apache Wicket
       開発環境の作成
       開発の流れ
       ミニサンプル集
  » 11. メールサーバ
  » 12. セキュリティ
     13. サーバの公開


  サーバ構築Top  > 10.Wicketによるウェブサイト開発  > (2)開発の流れ
    10. Apache Wicketによるウェブサイト開発
前ページで開発環境を作成しましたので、続いて Apache Wicketによるウェブアプリケーション開発の流れを具体的にみていきます。

    (2) 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でウェブアプリケーションを作成する準備が整います。 以下、プロジェクトの作成からウェブサーバへの配置までの一連の流れを大まかに追ってみます。


[1]Eclipseの設定

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

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

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

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

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

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

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

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

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


[2]プロジェクトの作成

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

  -  一覧の中から、「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」フォルダ直下に上記4ファイルが追加されているのが確認されます。

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

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

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

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

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


[3]管理用クラスとトップページの作成

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

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

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

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

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

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

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

              -  「OK」を押下します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

              -  「OK」を押下します。

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

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

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

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

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

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


[4]ウェブページの実装

  続いて今作成した3つのファイルと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(任意の文字列)
          を目印として置いて、表示位置だけを確保しておきます。

      -  1例として、ニュース文を1つ表示するページを作成してみましょう。
          下記のように、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コンポーネントの1つ、Labelを使用してみます。
          第1引数にwicket:idを、第2引数に表示文字列をそれぞれ指定します。

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

  public class TopPage extends WebPage {

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

  }



[5]動作テスト

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

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

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

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




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

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

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


[6]ウェブページのURL設定と稼動モードの切り替え

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

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

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

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

  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");

          //ブックマーク可能ページ
          mountBookmarkablePage("/home", TopPage.class);

      }

      @Override
      public String getConfigurationType() {
          return Application.DEPLOYMENT;
      }

  }

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

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

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


[7]ウェブサーバへの配布

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

  [6]で作成したプロジェクトの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を利用したプログラムのサンプルソースを載せています。



前のページへ <    メニューへ戻る    > 次のページへ 

10.Wicketによるウェブサイト開発:
 
   (1)開発環境の作成
  ›(2)Wicketによる開発の流れ
   (3)Wicketミニサンプル集
 
Copyright (C) 2011-2019 rurihabachi. All rights reserved.