新しいページを作ってみる¶

Karesansui に Hello World ページを新しく追加する手順です。

開発環境¶

開発ドキュメントの開発環境を作ってみるを参照し、開発環境を構築します。

新規ページ¶

以下の流れで新規ページを作成します。

• タブの追加
• URL マッピングの追加
• gadget の作成
• テンプレート (part, input) の作成
• スタイルシートの作成
• 権限設定
• 開発 Web サーバーの起動
  
  

タブの追加¶

templates/default/host/host.html ファイルを次のように編集します。
これにより Karesansui のホスト画面に、Hello タブが追加されます。

# cat templates/default/host/host.html | grep -e "<li class" -e "tab-left" -e "</li>" 
                        <li class="top-tab">
                            <a class="tab-left" href="#" id="${ctx.homepath}/host.part"><span class="tab-right">${_('Summary')}</span></a>
                        </li>
                        <li class="top-tab">
                            <a class="tab-left" href="#" id="${ctx.homepath}/user.part"><span class="tab-right">${_('User')}</span></a>
                        </li>
                        <li class="top-tab">
                            <a class="tab-left" href="#" id="${ctx.homepath}/job.part"><span class="tab-right">${_('Job')}</span></a>
                        </li>
                        <li class="top-tab">
                            <a class="tab-left" href="#" id="${ctx.homepath}/tag.part"><span class="tab-right">${_('Tag')}</span></a>
                        </li>
                        <li class="top-tab">
                            <a class="tab-left" href="#" id="${ctx.homepath}/hello.part"><span class="tab-right">${_('Hello')}</span></a>
                        </li>

URL マッピングの追加¶

urls.py ファイルを次のように編集します。これにより、URL マッピングが行われるようになります。

# grep hello /git/karesansui.git/karesansui/urls.py
import karesansui.gadget.hello
       + karesansui.gadget.hello.urls \

gadget の作成¶

gadget/hello.py ファイルを次のように作成します。
Notice: gadget ファイルを変更・作成した場合は、Web サーバーの再起動が必要となります。

# cat << 'EOS' > /git/karesansui.git/karesansui/gadget/hello.py
# -*- coding: utf-8 -*-

from karesansui.lib.rest import Rest, auth

class Hello(Rest):
    @auth
    def _GET(self, *param, **params):
        return True

    @auth
    def _POST(self, *param, **params):
        return True

urls = (
    '/hello/?(\.part)$', Hello,
    )
EOS

テンプレートの作成¶

templates/default/hello/hello.part ファイルを次のように作成します。

# rm -rf /git/karesansui.git/karesansui/templates/default/hello
# mkdir /git/karesansui.git/karesansui/templates/default/hello
# cat << 'EOS' > /git/karesansui.git/karesansui/templates/default/hello/hello.part
<%inherit file="../include/common.part" />
<script type="text/javascript">
<!--
$(document).ready(function(){
    $("#tool_renew").click(function(){
        renew_msg(true);
    });
});
-->
</script>
                    <div id="hello">
                        <div classs="alert"></div>
                        <div id="action" >
                            <div class="left"></div>
                            <div class="right">
                                <a href="#" class="tool-link" >
                                    <div class="tool-mid">
                                        <img src="${ctx.homepath}/static/images/reload.gif" alt="renew" id="tool_renew"/>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <br style="clear: both;"/>
                        <div class="space"/>
                        <div id="view">
                            <div class="hello-contents">
                                <br>
                                <div align="center">Hello World</div>
                                <br>
                            </div>
                        </div>
                        <br style="clear: both;"/>
                    </div>
EOS

スタイルシートの作成¶

static/css/style.css を次のように編集し、static/css/hello.css ファイルを作成します。

# grep hello /git/karesansui.git/karesansui/static/css/style.css
@import url('./hello.css');

# cat << 'EOS' > /git/karesansui.git/karesansui/static/css/hello.css
.hello-contents{
    background-color:#FFFFFF;
    border-color:#BCBCBC;
    border-style:solid;
    border-width:1px 1px 1px;
    color:#000000;
    font-size:12px;
    margin-bottom:15px;
    padding-bottom:5px;
    padding-top:6px;
    width:99.8%;
}
EOS

権限設定¶

今回作成したファイルを、kss グループから読み込みできるように設定します。

# chown root:kss /git/karesansui.git/karesansui/gadget/hello.py
# chown root:kss /git/karesansui.git/karesansui/static/css/hello.css
# chown -R root:kss /git/karesansui.git/karesansui/templates/default/hello

開発 Web サーバーの起動¶

次のコマンドで開発 Web サーバーを起動します。
既に起動している場合は、再起動を行ってください。

# su -s /bin/bash wwwhde -c "KARESANSUI_CONF=/etc/opt/karesansui/application.conf SEARCH_PATH=/opt/karesansui/lib/python:/opt/hde/lib/python:/opt/pysilhouette/lib/python /opt/karesansui/bin/karesansui.fcgi" 

確認¶

開発 Web サーバーに接続し、今回作成した Hello World ページが正常に表示されるかを確認してください。
最後に新しいページを作るにあたって、注意する点としては以下があります。

開発サーバーが ImportError で起動しない¶

今回新しく作成した gadget ファイルを読み込めない場合に発生します。
ファイル属性の確認を行ってください。

新しく作成したページにアクセスできない (500エラーが発生する)¶

今回新しく作成した template ファイルを読み込めない場合に発生します。
ファイル属性の確認を行ってください。