コミット: 697ad4f1a1cf226025fe58fb5874fc5fa05905dd - node_sample_minichat (git)

Node.js sample application with Socket.IO

コミットメタ情報

• リビジョン: 697ad4f1a1cf226025fe58fb5874fc5fa05905dd (tree)
• 日時: 2012-10-23 23:28:54
• 作者: hylom <hylom@hylo...>
• コミッター: hylom

ログメッセージ

implement initial html & css

変更サマリ

• modified: app.js
• modified: public/css/style.css
• add: public/js/minichat.js
• modified: routes/index.js
• delete: routes/user.js
• modified: views/index.jade
• modified: views/layout.jade
• add: views/room.jade

差分

--- a/app.js
+++ b/app.js
@@ -5,7 +5,6 @@
 
 var express = require('express')
   , routes = require('./routes')
-  , user = require('./routes/user')
   , http = require('http')
   , path = require('path');
 
@@ -28,7 +27,7 @@ app.configure('development', function(){
 });
 
 app.get('/', routes.index);
-app.get('/users', user.list);
+app.post('/room', routes.room);
 
 http.createServer(app).listen(app.get('port'), function(){
   console.log("Express server listening on port " + app.get('port'));

--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,8 +1,28 @@
 body {
   padding: 50px;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+  color: #333;
 }
 
 a {
   color: #00B7FF;
+}
+
+#messages {
+  margin-top: 60px;
+  background: white;
+  border: 1px solid #bbb;
+}
+
+.message {
+  border-bottom: 1px solid #ddd;
+  line-height: 120%;
+}
+
+.message .postdate {
+  color: #aaa;
+}
+
+.message .author {
+  font-weight: bold;
 }
\ No newline at end of file

--- /dev/null
+++ b/public/js/minichat.js
@@ -0,0 +1,5 @@
+// minichat.js
+
+(function () {
+
+}).apply(this);

--- a/routes/index.js
+++ b/routes/index.js
@@ -4,5 +4,21 @@
  */
 
 exports.index = function(req, res){
-  res.render('index', { title: 'Express' });
-};
\ No newline at end of file
+  res.render('index', { title: 'minichat' });
+};
+
+exports.room = function(req, res){
+  var roomName = req.body.roomName || '';
+  var yourName = req.body.yourName || '';
+  var password = req.body.password || '';
+
+  var params = {
+    title: 'チャットルーム：' + roomName,
+    room: {
+      name: roomName,
+      password: password
+    },
+    user: {name: yourName}
+  };
+  res.render('room', params);
+};

--- a/routes/user.js
+++ /dev/null
@@ -1,8 +0,0 @@
-
-/*
- * GET users listing.
- */
-
-exports.list = function(req, res){
-  res.send("respond with a resource");
-};
\ No newline at end of file

--- a/views/index.jade
+++ b/views/index.jade
@@ -1,5 +1,50 @@
 extends layout
-
 block content
-  h1= title
-  p Welcome to #{title}
\ No newline at end of file
+
+  .container
+    .hero-unit
+      h1= title
+      p node.jsによるシンプルなチャットWebアプリケーション
+
+    .row
+      .span6
+        h2 Create:
+        p チャットルームを新しく作成する
+        form#new.form-horizontal(action='/room/', method='post')
+          .control-group
+            label.control-label(for='new-room-name') 作成するルーム名
+            .controls
+              input#new-room(type='text', name='roomName', placeholder='ルーム名を入力...')
+          .control-group
+            label.control-label(for='new-name') 表示するあなたの名前
+            .controls
+              input#new-name(type='text', name='yourName', placeholder='表示名を入力...')
+          .control-group
+            label.control-label(for='new-password') 認証用パスワード
+            .controls
+              label
+                input#new-password(type='password', name='password', placeholder='パスワードを入力...')
+              button#create(type='submit', class='btn', name='create') チャットルームを作成
+
+      .span6
+        h2 Enter:
+        p 既存のチャットルームに入る
+        form#enter.form-horizontal(action='/enter/', method='post')
+          .control-group
+            label.control-label(for='enter-room') ルーム名
+            .controls
+              input#enter-room(type='text', name='roomName', placeholder='ルーム名を入力...')
+          .control-group
+            label.control-label(for='enter-name') 表示するあなたの名前
+            .controls
+              input#enter-name(type='text', name='yourName', placeholder='表示名を入力...')
+          .control-group
+            label.control-label(for='enter-password') 認証用パスワード
+            .controls
+              label
+                input#enter-password(type='password', name='password', placeholder='パスワードを入力...')
+              button(type='submit', name='enter', class='btn') チャットルームへ入る
+
+  hr
+  footer
+    p minichat 0.0.1
\ No newline at end of file

--- a/views/layout.jade
+++ b/views/layout.jade
@@ -2,8 +2,10 @@ doctype 5
 html
   head
     title= title
-    link(rel='stylesheet', href='/stylesheets/style.css')
-    script(src='js/jquery-1.8.2.min.js')
+    link(rel='stylesheet', href='/css/style.css')
+    link(rel='stylesheet', href='/css/bootstrap.css')
+    script(src='/js/jquery-1.8.2.min.js')
+    script(src='/js/minichat.js')
     script(src='/js/bootstrap.min.js')
   body
     block content
\ No newline at end of file

--- /dev/null
+++ b/views/room.jade
@@ -0,0 +1,30 @@
+extends layout
+block content
+
+  .navbar.navbar-inverse.navbar-fixed-top
+    .navbar-inner
+      .container
+        a.brand(href='/') minichat
+        ul.nav
+          li 
+            a ルーム名：#{room.name}
+          li
+            a(href='/') 退出する
+  .container
+    .row
+      .span4
+        h3
+          span#yourname #{user.name}
+        form(action='#')
+          label
+            textarea#new-message.span4(rows='5', placeholder='メッセージを入力...')
+          button(type='submit', class='btn') メッセージを投稿
+      .span8
+        #messages.well
+          .message
+            p.postdate.pull-right 10/23 12:34
+            p.author システムメッセージ：
+            p.comment チャットルーム「hogehoge」が作成されました。
+  hr
+  footer
+    p minichat 0.0.1
\ No newline at end of file