Merge pull request #1 from shortintern2020-A-labyrinth/init_front_end

Init front end

.vscode/launch.json

@@ -0,0 +1,21 @@
+{
+    // IntelliSense を使用して利用可能な属性を学べます。
+    // 既存の属性の説明をホバーして表示します。
+    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "java",
+            "name": "Debug (Launch) - Current File",
+            "request": "launch",
+            "mainClass": "${file}"
+        },
+        {
+            "type": "java",
+            "name": "Debug (Launch)-DemoApplication<demo>",
+            "request": "launch",
+            "mainClass": "com.example.demo.DemoApplication",
+            "projectName": "demo"
+        }
+    ]
+}

pom.xml

@@ -27,7 +27,11 @@
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
 		</dependency>
-
+		<!-- Spring JDBC を使う -->
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-jdbc</artifactId>
+        </dependency>
 		<dependency>
 			<groupId>com.h2database</groupId>
 			<artifactId>h2</artifactId>

src/main/java/com/example/demo/DemoApplication.java

@@ -2,12 +2,27 @@
 
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.CommandLineRunner;
+import org.springframework.jdbc.core.JdbcTemplate;
 
 @SpringBootApplication
-public class DemoApplication {
+public class DemoApplication implements CommandLineRunner {
 
 	public static void main(String[] args) {
 		SpringApplication.run(DemoApplication.class, args);
 	}
 
+	@Autowired
+    JdbcTemplate jdbcTemplate;
+
+    @Override // アプリ起動時に実行される。
+    public void run(String... strings) throws Exception {
+        jdbcTemplate.execute("CREATE TABLE customers(" +
+                "id SERIAL, first_name VARCHAR(255), last_name VARCHAR(255))");
+
+        jdbcTemplate.update("INSERT INTO customers(first_name, last_name) VALUES ('John','Woo')");
+    }
+
+
 }

src/main/java/com/example/demo/ViewController.java

@@ -1,14 +1,21 @@
 package com.example.demo;
 
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
+//import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.RequestMethod;
 
 @Controller
-@RequestMapping("/")
 public class ViewController {
-    @GetMapping
+
+    @RequestMapping(value = "/", method = RequestMethod.GET)
     public String View(){
         return "view";
     }
+    /*
+    @RequestMapping(value = "/", method = RequestMethod.GET)
+    public String SayHello(Model model) {
+        model.addAttribute("msg", "Hello World!!!");
+        return "view";
+    }*/
 }

src/main/resources/application.properties

@@ -1 +1,8 @@
+spring.datasource.data-source-class-name=org.h2.Driver
+spring.datasource.url=jdbc:h2:mem:emologdb
+spring.datasource.username=dbuser
+spring.datasource.password=dm
 
+spring.h2.console.enabled=true
+spring.h2.console.path=/h2-console
+spring.h2.console.settings.web-allow-others=true

src/main/resources/static/css/style.css

@@ -0,0 +1,177 @@
+@@charset "UTF-8";
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #d3d3d3;
+  color: #000000;
+  font-size: 15x;
+  line-height: 2;
+  overflow: hidden;
+}
+
+p,h1,h2,h3,h4,h5,h6 {
+  margin-top: 0;
+}
+
+img {
+  vertical-align: bottom;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #3583aa;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #788d98;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+header {
+  width: 960px;
+  height: 100px;
+  margin: 0 auto;
+  border: solid 1px #000000;
+}
+
+
+.backbtn {
+  float: left;
+}
+
+.friend-name {
+  text-align: center;
+  padding: 20px 0;
+  font-size: 20px;
+  font-family: 'Bitter',serif;
+  margin-right: 50px;
+}
+
+.global-nav {
+  width: 100%;
+}
+
+.global-nav li{
+  background-color: #f0f8ff;
+  width: 33%;
+  float: left;
+  margin: 5px 1px;
+  text-align: center;
+  font-size: 20px;
+  list-style: none;
+  font-family: 'Bitter',serif;
+}
+
+.global-nav li a{
+  padding: 5px 5%;
+ }
+
+
+.global-nav li a:hover{
+  border-bottom: 2px solid;
+  padding-bottom: 3px;
+  text-decoration: none;
+}
+
+#wrap {
+  clear: both;
+}
+
+.content {
+  width: 960px;
+  margin: 0 auto;
+}
+
+footer {
+ width: 960px;
+ margin: 0 auto;
+ text-align: center;
+ padding: 20px 20px;
+}
+
+header {
+  width: 960px;
+  height: 100px;
+  margin: 0 auto;
+  border: solid 1px #000000;
+}
+
+.emolog {
+  background-color: #f5f5f5;
+  padding: 10px 5px;
+  text-align: center;
+}
+
+.emolog-date {
+  text-align: left;
+  margin: 10px 10px;
+  font-size: 20px;
+  font-family: 'Bitter',serif;
+}
+
+.emoji {
+  margin: 0;
+  padding: 0;
+}
+
+.chat {
+  height: 300px;
+  background-color: #fffacd;
+}
+
+.message {
+  padding: 0;
+  text-align: center;
+}
+.message-box {
+  width: 77%;
+  text-align: left;
+  margin: 0 0;
+  padding: 5px 0;
+}
+
+.message-btn {
+  width: 20%;
+  margin: 0 0;
+}
+
+.message-btn{
+  background-color: #009cd3;
+  color: #ffffff;
+  font-size: 20px;
+  font-family: 'Bitter',serif;
+}
+
+h1 {
+  font-size:100px;
+  line-height: 1;
+  color:#000000;
+  font-family: 'Bitter',serif;
+}
+
+p {
+  font-family: 'Bitter',serif;
+}
+
+/* emologlist.html*/
+.emolog-list {
+  height: 400px;
+  background-color: #f5f5f5;
+  overflow:  auto;
+}
+.emolog-list li {
+  border-bottom: solid 1px #000000;
+  list-style: none;
+  text-align: center;
+}
+
+/* emologlist.html 終わり*/

src/main/resources/templates/view.html

@@ -1 +1,44 @@
-Hello World!!
+<!DOCTYPE html>
+<html lang="jp">
+<head>
+  <meta charset="UTF-8">
+  <title>チャットページ</title>
+  <link href="https://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet">
+  <link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
+</head>
+
+<body id="chatpage">
+  <!-- 戻るボタンと名前の表示-->
+    <header>
+      <div class="backbtn">
+          <a href="emologlist.html"> <img th:src="@{images/arrow_left_24.png}" alt="backbutton"></a>
+      </div> 
+      <div class="friend-name">
+        <p>hogeさん</p>
+      </div>
+    </header>
+    <div id="wrap"><!-- メインコンテンツ-->
+      <div class="content">
+         <!-- エモログの表示-->
+         <div class="emolog">
+           <p class="emolog-date">8/18</p>
+           <!--自分のエモログの表示-->
+           <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
+           <p>朝 <img th:src="@{images/arrow.png}" alt="emolog_arrow"> 夜</p>
+           <!--相手のエモログの表示-->
+           <p class="emoji">&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;&#x1f349;</p>
+          </div>
+         <!-- チャットの表示-->
+         <div class="chat">
+
+         </div>
+         <!-- 入力ボックス、送信ボタンの表示-->
+         <div class="message">
+           <input type="text" name="name" class="message-box">
+           <input type="submit" value="送信" class="message-btn">
+         </div>
+       </div>
+    </div>
+
+</body>
+</html>

target/classes/application.properties

@@ -1 +1,8 @@
+spring.datasource.data-source-class-name=org.h2.Driver
+spring.datasource.url=jdbc:h2:mem:emologdb
+spring.datasource.username=dbuser
+spring.datasource.password=dm
 
+spring.h2.console.enabled=true
+spring.h2.console.path=/h2-console
+spring.h2.console.settings.web-allow-others=true