サポート > Wagby Developer Network > 見栄えのカスタマイズ > フッタ部

フッタ部の構造


図1 フッタ
（クリックすると拡大画像が表示されます）

$(DEVHOME)\env\template\jspc\footer.jsp は次のようになっています。 

<%@ page pageEncoding="UTF-8"%>
<%@ include file="/footer.html" %>

このように footer.jsp は内部で footer.html を取り込んでいます。 （<%@ include > タグは、ファイルを取り込むという意味です。）

footer.html は $(DEVHOME)\env\work\srcgen\webpage フォルダに自動生成されます。 その内容は、次のように空になっています。 

<%@ page pageEncoding="UTF-8"%>

カスタマイズ方法

フッタ部のカスタマイズを行う場合は、次の方法があります。

プログラムコードが不要の場合

自動生成される footer.html を上書きしてください。 具体的な手順を以下に示します。

  1. Wagby ビルダによって構築された Web アプリケーションを起動します。
  2. wagbyapp\webapps\$(APPNAME) フォルダに用意された footer.html を探します。

    図2 footer.html ファイル
    ファイルエクスプローラによるフォルダの位置の拡大図を示します。

    図3 フォルダの位置
  3. footer.html を編集します。保存する文字エンコーディングは UTF-8 としてください。

    図4 テキストエディタで編集する
    編集中に Web ブラウザをリロードすると、その段階の画面を確認できます。 ここで、納得いくまで編集を行うことができます。
  4. 編集後の footer.html を $(DEVHOE)\customize\webpage に保存します。
  5. 起動中の Web アプリケーションを停止します。
  6. Wagby ビルダを用いて、再びビルド処理を行ないます。構築された Web アプリケーションを起動すると、フッタの表示が変更されていることがわかります。

プログラムコードを記述する場合

template\jspc\footer.jsp を直接、編集します。このファイルは拡張子が JSP なので、プログラムコードを記述することができます。

画像ファイルを扱う場合は、$(DEVHOME)\env\webpage\img フォルダにあらかじめ保存しておいてください。 footer.html では、<img src="img/sample.gif"/> といった表記を用います。（sample.gif の部分は実際にご利用になる画像ファイルに置き換えてください。）

このページ

見栄えのカスタマイズ