V.S.A. III

[Secure-SBM:007] トップページの作成

こんにちは，五十嵐です．アプリケーションを作成していく前に，各ページの統一感を出すために，画面 (View) の設計を行います．

左の画像のような画面を作成します．トップにはバナー，左右にサイドメニューがあり，中央に内容，下部に必要に応じて footer が表示されます．これらをそれぞれ top, left, right, center, bottom と区切ります．

今の状態では，default アクションに Catalyst が表示されるようになっていますので，"http://localhost:3000/" で独自のページが表示されるようにして，存在しないページへアクセスした場合にはエラー画面が出力されるようにします．日本語の問題を解決しなければなりませんので，"Catalyst::Plugin::Charasets::Japanese" を使用して，UTF-8 で入出力するようにします．

Index: securesbm.yml
===================================================================
--- securesbm.yml
+++ securesbm.yml
@@ -7,3 +7,6 @@
     - 'ssbm'
     - 'ssbm'
     -  AutoCommit: 1
+
+Charsets::Japanese:
+  charasets: 'UTF-8'
Index: lib/SecureSBM.pm
===================================================================
--- lib/SecureSBM.pm
+++ lib/SecureSBM.pm
@@ -13,6 +13,7 @@
                -Debug
                ConfigLoader
                Static::Simple
+               Charsets::Japanese
 
                StackTrace
                /;
@@ -56,7 +57,7 @@
     my ( $self, $c ) = @_;
 
     # Hello World
-    $c->response->body( $c->welcome_message );
+    $c->response->body( '要求されたページは存在しません．' );
 }
 
 #

体裁は良くありませんが，とりあえず，何をリクエストしても「要求されたページは存在しません．」と表示されるようになります．これで，Catalyst が使用していた画像などは不要になりますので，削除してしまって構いません．画像は root/static/images/ の下に存在します．

$ ls root/ root/static/images
root/:
favicon.ico  static

root/static/images:
btn_120x50_built.png           btn_88x31_built_shadow.png
btn_120x50_built_shadow.png    btn_88x31_powered.png
btn_120x50_powered.png         btn_88x31_powered_shadow.png
btn_120x50_powered_shadow.png  catalyst_logo.png
btn_88x31_built.png
$ rm root/favicon.ico root/static/images/*.png
$ ls root/ root/static/images
root/:
static

root/static/images:
$

View の作成を行います．securesbm_create.pl を使用して，View を作成します．ヘルパーには TT を使用しました．

$ ./script/securesbm_create.pl view TT TT
 exists "...(省略)/SecureSBM/script/../lib/SecureSBM/View"
 exists "...(省略)/SecureSBM/script/../t/View"
created "...(省略)/SecureSBM/script/../lib/SecureSBM/View/TT.pm"
created "...(省略)/SecureSBM/script/../t/View/TT.t"
$

次にトップページ ('/') を作ります．また，end アクションを追加して，終了処理を行うようにするとともに，"ActionClass('RenderView')" という設定で，デバッグをしやすくします．

lib/SecureSBM/Controller/Root.pm の編集 (index と end の追加)
root/static/images/SSBM-logo.png の設置
root/template/ ディレクトリの作成
root/template/ 下に index.tt を作成．top.tt, bottom.tt, index_left.tt, index_right.tt, index_center.tt を読み込むように設定．top.tt, bottom.tt は全てのページで共通．
root/static/css/ ディレクトリの作成
root/static/css/style.css の作成
securesbm.yml の変更．

securesbm.yml の変更点．

Index: securesbm.yml
===================================================================
--- securesbm.yml
+++ securesbm.yml
@@ -10,3 +10,8 @@
 
 Charsets::Japanese:
   charasets: 'UTF-8'
+
+View::TT:
+  INCLUDE_PATH:
+    - 'root/template'
+  TEMPLATE_EXTENSION: '.tt'

securesbm.yml の変更は，root/template/ 下のファイルをテンプレートとして読み込む設定です．

Root.pm の追加点は以下．

=head2 index

Index of SecureSBM

=cut
sub index : Private { }

=head2 end

Attempt to render a view, if needed.

=cut 

sub end : ActionClass('RenderView') {
    my ( $self, $c ) = @_; 
}

"RenderView" アクションクラスの end を追加したことで，URL の最後に dump_info=1 という引数 (例えば http://localhost:3000/?dump_info=1) を付けることで強制的に環境がダンプされます (左図)．

root/template/index.tt の内容．

[% INCLUDE top.tt %]
<div class="left" id="left">[% INCLUDE index_left.tt %]</div>
<div class="center" id="center">[% INCLUDE index_center.tt %]</div>
<div class="right" id="right">[% INCLUDE index_right.tt %]</div>
[% INCLUDE bottom.tt %]

[%#
This Program is distributed under version 1.0 of the Rinza Public
License Agreement, that is bundled with this package in the file
LICENSE, and is available through the website at the following URL:
http://www.tyzoh.jp/rinza/licenses/LICENSE-1.0.txt.

This is the Original Program.
The Initial Developer of the Original Program is Nihon Unisys, Ltd.
The Original Program is copyrighted (C) 2006-2007 by Nihon Unisys, Ltd. with
all rights reserved.
There is NO WARRANTY OF ANY KIND by the Initial Developer of the
Original Program.
%]

スタイルシートやテンプレートの説明は省きますが，これで，一応トップページが表示されるようになりました．左右のメニュー部分の設計は，全体の画面設計を行って，決めていくことにします．しばらくはこの状態で進めることにします．

次回は，管理処理の作成を行います．

参考：