[postgres] macにインストール

Spring Boot

$ postgres –version
-bash: postgres: command not found
$ brew search postgresql
==> Formulae
postgresql postgresql@11 postgresql@9.4 postgresql@9.6
postgresql@10 postgresql@12 postgresql@9.5
==> Casks
navicat-for-postgresql

最新版をインストールします。
$ brew install postgresql
To have launchd start postgresql now and restart at login:
brew services start postgresql
Or, if you don’t want/need a background service you can just run:
pg_ctl -D /usr/local/var/postgres start

$ postgres –version
postgres (PostgreSQL) 13.1
$ pg_ctl -D /usr/local/var/postgres start

# ユーザ作成
$ createuser -P root
# データベース作成
$ createdb test -O root
$ psql -l
List of databases
Name | Owner | Encoding | Collate | Ctype | Access privileges
———–+——-+———-+———+——-+——————-
postgres | mac | UTF8 | C | C |
template0 | mac | UTF8 | C | C | =c/mac +
| | | | | mac=CTc/mac
template1 | mac | UTF8 | C | C | =c/mac +
| | | | | mac=CTc/mac
test | root | UTF8 | C | C |
(4 rows)

-> “test”が作成された

### psqlログイン
$ psql -U root test
psql (13.1)
Type “help” for help.

test=>

なんか異常にシンプルやなー

[Spring Boot][java] データアクセス

pom.xml

<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>com.h2database</groupId>
			<artifactId>h2</artifactId>
			<scope>runtime</scope>
		</dependency>

jdbcTemplate使用
MessagesController.java

package com.example.demo;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("messages")
public class MessagesController {
	@Autowired
	JdbcTemplate jdbcTemplate;
	
	@RequestMapping(method = RequestMethod.GET)
	public List<Message> getMessages(){
		return jdbcTemplate.query("SELECT text FROM messages ORDER BY id", (rs, i)->{
			Message m = new Message();
			m.setText(rs.getString("text"));
			return m;
		});
	}
	
	@RequestMapping(method = RequestMethod.POST)
	public Message postMessage(@RequestBody Message message) {
		jbdcTemplate.update("INSERT INTO messages(text) VALUES (?)", message.getText());
		
	}
}

spring bootはクラスパス直下にschema.sqlが存在すると、起動時にそのsqlを実行する

CREATE TABLE messages (
	id INT PRIMARY KEY AUTO_INCREMENT,
	text VARCHAR(255)
);

### PostgreSQLを使う方法

		<dependency>
			<groupId>org.postgresql</groupId>
			<artifactId>postgresql</artifactId>
			<scope>runtime</scope>
		</dependency>

application.properties

string.datasource.username=root
string.datasource.password=hoge
spring.datasource.url=jdbc:postgresql://localhost:5432/spring

mysqlを使用する場合は、schema.sqlを用意するのが定石か

[Spring Boot][java] RESTfulのサンプル作成

Message.java

import java.io.Serializable;

public class Message implements Serializable {
	private String text;
	
	public String getText() {
		return text;
	}
	
	public void setText(String text) {
		this.text = text;
	}
}

MessagesController.java

package com.example.demo;

import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("messages")
public class MessagesController {
	final List<Message> messages = new CopyOnWriteArrayList<>();
	
	@RequestMapping(method = RequestMethod.GET)
	
	public List<Message> getMessages(){
		return messages;
	}
	
	@RequestMapping(method = RequestMethod.POST)
	public Message postMessages(@RequestBody Message message) {
		messages.add(message);
		return message;
	}
}

### 画面遷移型アプリケーション
テンプレートエンジンとの連携ライブラリ(Starterプロジェクト、AutoConfigure)が用意
– Tymeleaf, FreeMarker, Groovy templates, Velocity, Mustacheなど

Tymeleafを使用する
pom.xml

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

HelloController.java

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class HelloController {
	@RequestMapping("/hello")
	public String hello(Model model) {
		model.addAttribute("hello", "Hello World!");
		return "hello";
	}
}

/src/main/resources/templates/hello.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title></title>
</head>
<body>
	<p>
		<span th:text="${hello}">Hello!</span>
	</p>
</body>

src/main/resources

[Spring Boot][java] getting started

やっときました。Spring Boot。
まず、Spring Initializrを使います。
dependenciesに「Web」と入力します。

demo.zipをdownloadします。
STSでfile->import->maven->existing maven projects

DemoApplication.java

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

Run As -> Java ApplicationでTomcatが起動する

2021-01-28 22:00:38.906 INFO 6756 — [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2021-01-28 22:00:38.906 INFO 6756 — [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1111 ms
2021-01-28 22:00:39.057 INFO 6756 — [ main] o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService ‘applicationTaskExecutor’
2021-01-28 22:00:39.219 INFO 6756 — [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ”

controllerの機能を実装する

package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@SpringBootApplication
@RestController
public class DemoApplication {

	@RequestMapping("/")
	String hello() {
		return "Hello World";
	}
	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}

Web server failed to start. Port 8080 was already in use.

$ lsof -i:8080
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
java 6756 mac 41u IPv6 * 0t0 TCP *:http-alt (LISTEN)

src/main/resources/application.properties

server.port=8090

やべ、ちょっと感動した。
– MVC自動設定、Tomcat自動設定、CharacterEncodingFilter自動設定、Logback自動設定、Bean Validation自動設定

Amazon, 楽天, Yahooのショッピングカートの送料のアルゴリズム

Amazon, 楽天, Yahooのショッピングカートの送料のアルゴリズムを確認したい。

### Amazon
商品ごとに送料が計算され、合計金額で合計の送料が計算される

### 楽天
商品ごとに送料計算

### Yahoo Shopping
商品ごとに送料があり、注文手続きの際に、合計金額と合計送料を計算

なるほど、送料は基本商品ごとに持っていて、単純に合計するのね。
同じ会社の商品の場合の計算方法がよくわからん。例えば、A社から送料300円の商品Bと商品Cを購入した時って、送料600円にならないよね。。

うーむ。つまり、商品ごとに送料を持っていて、同じ会社から複数商品を買った場合は、計算処理してるってことね。

[WordPress][vagrant] オリジナルテーマ作成手順5

固定ページ(page.php)をコピーしてsingle.phpを作ります。

single.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
	<?php if(have_posts()):
		while(have_posts()): the_post();?>
 <section id="content">
	<div class="main">
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
	</div>
 </section>
<?php endwhile;
	endif;?>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

### 日付別表示
date.php -> archive.php -> index.php

archive.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
      <?php 
      if ( have_posts() ) :
          while ( have_posts() ) : the_post();
      ?>
          <h2>
            <a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <section>
            <p>作成日時：<?php the_time('Y年n月j日'); ?></p>
            <a href="<?php echo get_permalink(); ?>"><?php the_excerpt(); ?></a>
          </section>
          <hr>
      <?php 
          endwhile;
      endif;
      ?>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

固定ページやニュースの更新の作り方がなんとなくわかった。
ちょっとノウハウ入りそうだけど、自由にメンテナンスできるのは良いね。

[WordPress][vagrant] オリジナルテーマ作成手順4

作成手順3の続きです。
テンプレートには「優先順位」があり、優先度の高いテンプレートが優先的に使われる。
front-page.php->home.php->index.php

固定ページ
カスタムテンプレート -> page-{スラッグ名}.php -> page-{ID}.php -> page.php -> index.php

投稿ページ
single-{post-type}.php -> single.php -> index.php

### 固定ページの作り方
page.phpを作ります。

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
	<h1></h1>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

classic editorをinstallして昔のエディタに直します。

管理画面の内容が反映されるように、page.phpを回収

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 <section id="content">
	<div class="main">
	<h1><?php the_title(); ?></h1>
	<?php the_content(); ?>
	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

管理画面で設定した内容が簡単に反映されるようになる。

続いて、投稿ページを作成していきたい。

[WordPress][vagrant] オリジナルテーマ作成手順3

作成手順2からの続きです。
css, imgが読み取れてないので、パスにget_template_directory_uri();を追加します。

index.php

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
// 省略
<img src="<?php echo get_template_directory_uri(); ?>/butterfly.jpg">

wp_headとwp_footerの追加

<?php wp_head(); ?>
<?php wp_footer(); ?>

ヘッダ上部に管理バーが表示されるようになる。

テンプレートは、header, footer, sidebar, indexなどに分割して、get_header();、get_footer();、get_sidebar();で呼び出すことができる。

header.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>

footer.php

	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>
<!-- 上記が追記するコード -->
 
 <section id="content">
	<div class="main">
	<img src="<?php echo get_template_directory_uri(); ?>/butterfly.jpg">
	<h1>Butterfly</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
 </section>
 <!-- 下記が追記するコード -->
<?php get_footer(); ?>

テーマを作って、共通化するところまではきました。ここまでは特にそんなにWordPressの恩恵はありません。
固定ページ、投稿ページを作っていきたい。

[WordPress][vagrant] オリジナルテーマ作成手順2

作成手順1からの続きです。
続いて、テーマに使用するHTMLファイルを用意します。
ここでは単純にHTML1枚と、CSS、jpgにします。

wp-content/themesのフォルダ配下にテーマのフォルダを作ります。
ここではhpscriptにしておきましょう。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
<div class="wrapper">
	<header>
		<h1 class="headline">
			<a href="">Sample</a>
		</h1>
		<ul class="nav-list">
			<li class="nav-list-item"><a href="">Home</a></li>
			<li class="nav-list-item"><a href="">About</a></li>
			<li class="nav-list-item"><a href="">Topic</a></li>
		</ul>
	</header>
	<div class="main">
	<img src="butterfly.jpg">
	<h1>Butterfly</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	</div>
	<footer>
		<ul class="footer-menu">
			<li>home |</li>
			<li>about |</li>
			<li>service |</li>
			<li>Contact Us</li>
		</ul>
		<p>&copy; All rights reserved by Sample</p>
	</footer>
</div>
</body>
</html>

style.css ※layout.cssだと都合が悪そうなので、style.cssに変更します。
L テーマの名前の入力が必須のため、hpscriptと書いておく。Theme Name(必須)の他、Theme URL、Description、Versionなどがある。

/*
Theme Name : Hpscript
*/
* {
	margin:0; padding:0;
}
.wrapper {
	min-height: 100vh;
	position:relative;
	padding-bottom: 120px;
	box-sizing: border-box;
}
header {
	height: 100px;
	width: 100%;
	padding: 15px 0;
	background-color: #337079;
	color: white;
	margin-top: 0px;
	position: fixed;
}
header .headline {
	line-height: 100px;
	float: left;
	font-size: 30px;
	margin-left: 100px;
}
.nav-list {
	line-height: 100px;
	float: left;
	margin-left: 30px;
	list-style:none;
}
.nav-list-item {
	list-style: none;
	display: inline-block;
	margin: 0 20px;
}
.main {
	width: 80vw;
	padding-top: 170px;
	margin: 0px auto;
}
footer {
	width: 100%;
	height: 100px;
	background-color: #cab64a;
	color: #fff;
	text-align: center;
	position: absolute;
	bottom:0;
}
ul.footer-menu li {
	display: inline;
}

index.htmlをindex.phpに変更する

screenshot.pngという画像をテーマのフォルダ内におくと、サムネイルで表示できる。

準備ができました。
adminのテーマの画面を表示します。
http://192.168.33.10:8000/wp-admin/themes.php

おおおおおおおお、こんな簡単だったけ？
前にやった時はもっと面倒だった印象があるが。。

テーマを有効化して、トップページを表示します。
あれ？　CSSやimgのパスが繋がってないですね。

続けてやっていきます。

[WordPress][vagrant] オリジナルテーマ作成手順1

ワードプレスのオリジナルテーマを作る方法を学習したい。
さくらなど、レンタルサーバーですぐにWordPressを作成できるが、開発環境としてはレンタルサーバーだとやりにくいので、vagrant(amazon linux2)で開発する。

### 1.公式サイトよりダウンロード
まず、公式サイトのWORDPRESS.ORGよりダウンロードします。
https://ja.wordpress.org/download/
ダウンロードしたファイルを配置します。

### フォルダ構成
wp-content: テーマ、プラグイン、画像データなど
wp-admin: 管理画面用フォルダ
wp-includes: システム全般
wp-config.php: WPの設定ファイル
wp-login.php: ログイン画面
wp-load.php: 動作に必要なファイル
index.php: 最初に読み込まれるファイル

テーマの格納場所
wp-content/temes/

### 2.WPのインストール
事前準備として、Wordpress用のデータベースを作成します。mysql8.0.21を使います。
mysql> create database wordpress;

ダウンロードしたフォルダのディレクトリでサーバを起動します。
$ php -S 192.168.33.10:8000

初期ページが表示されます。

DBの設定画面が表示されるので、作成したDBを設定します。

続いて、インストール画面が表示されます。

各種入力すると、ローカル環境でインストールができました。

続いて、wp-contentフォルダの配下にテーマを作っていきます。