チャット作るよ。1日目

作ってみる

いまどきチャット？って感じだけど。。
まあ、いろいろ遊んでみたいので。


参考にするのはこの本。

10日でおぼえるPerl/CGI入門教室

10日でおぼえるPerl/CGI入門教室

学生の時に購入。第1版。CDはなくした。

とりあえずモック作りから。
frame切るのめんどくさいのでiframeで。いきない本のサンプルを無視する。


まずはログイン前の画面。
iframeの中身にメッセージログを表示する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/chat.css" />
        <title>Chat</title>
    </head>
    <body>
        <div id="header">
            <div class="title">Chat</div>
        </div>
        <div id="content">
            <div id="form">
                <form method="post" action="index2.html">
                    <table>
                        <tr>
                            <th>name</th>
                            <td>
                                <input type="text" name="name" style="width:160px;" />
                            </td>
                        </tr>
                    </table>
                    <input type="submit" value="Login" />
                </form>
            </div>
            <iframe id="log" src="./log.html"></iframe>
        </div>
        <div id="footer">
            <div class="copyright">2010 ushiboy</div>
        </div>
    </body>
</html>

とりあえずのCSS。

body, div {
    margin : 0,
    padding : 0
}

#log {
    width : 100%;
    height : 550px;
}

iframeの中身。30秒ごととかで定期リフレッシュをかける。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Refresh" content="30;URL=./log.html" />
        <link rel="stylesheet" type="text/css" href="./css/chat.css" />
        <title>Chat</title>
    </head>
    <body>
        <div id="members">
            <span>members:</span>
            <span>Hoge</span>
            <span>Hoge</span>
            <span>Hoge</span>
        </div>
        <hr/>
        <div id="archive">
            <p>Hoge : fugafugafugafuga 09/01 00:00:00</p>
            <p>Hoge : fugafugafugafuga 09/01 00:00:00</p>
            <p>Hoge : fugafugafugafuga 09/01 00:00:00</p>
        </div>
    </body>
</html>

ブラウザでみるとこんな感じ。

ログイン後の画面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/chat.css" />
        <title>Chat</title>
    </head>
    <body>
        <div id="header">
            <div class="title">Chat</div>
        </div>
        <div id="content">
            <div id="form">
                <form method="post">
                    <table>
                        <tr>
                            <th>name</th>
                            <td>Bear</td>
                        </tr>
                        <tr>
                            <th>comment</th>
                            <td>
                                <input type="text" name="comment" style="width:400px;" />
                                <input type="submit" value="Send" />
                                <input type="reset" value="Clear" />
                            </td>
                        </tr>
                    </table>
                </form>
                <form method="post" action="index.html">
                    <input type="submit" value="Logout" />
                </form>
            </div>
            <iframe id="log" src="./log.html"></iframe>
        </div>
        <div id="footer">
            <div class="copyright">2010 ushiboy</div>
        </div>
    </body>
</html>

こちらはこんな感じ。


とりあえずこんなもん？何かこの構成だとうまくいかない気がするけど、
そこはその都度修正ということで。


今日はここまで。