MySQL(その５ 列に別名をつける、条件を指定してデータを取得する(as,where,演算子))

コメントを残す

その４から続きます

1:列に別名をつける

例)商品一覧のname,priceをそれぞれ日本語で「名前」と「価格」に修正したい！

答え(asは省略できる)

select name as 名前,price as 価格 from products;

select name 名前,price 価格 from products;

2:列の値に対して演算を行う

例：商品一覧に税込価格を追加したい！

続きを読む →

MySQL(その4データを取得)select * from テーブル名

コメントを残す

3から続きます

実際に使って理解を深める(なるべく実務を想定する感じで)

1:ECサイトのユーザー一覧を表示したい！

※ポイント

構文:select 列1,列2・・・ from テーブル名;

すべての列を取得したい時

select * from テーブル名;

2:ECサイトの商品一覧を表示したい！

select * from products;

3:SQLのよくあるエラーについて

続きを読む →

MySQL(その3学習環境構築)

コメントを残す

その２から続きます

1:学習環境構築

homebrewをターミナルからインストールする。以下をターミナルでコマンド

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew –versionでバージョンが確認できる(インストールできているかわかる)
MySQLをインストール

brew install mysql

2:日本語化設定と暗号化プラグインの設定

設定ファイルを開く

vim /usr/local/etc/my.cnf
設定ファイルに以下を記述

character-set-server=utf8 default_authentication_plugin=mysql_native_password
MySQL起動

mysql.server start
セキュリティーの初期設定をする

mysql_secure_installation
パスワードを設定する
パスワードを使ってルートユーザーでログイン

mysql -u root -p
再起動して設定を反映する

mysql.server restart
MySQLを使わないときは停止する

mysql.server stop
MySQLを使う時(ログインしたときなど)

mysql.server start
MySQL Workbenchをインストール
こちらのサイト様を参考にインストール
MySQL Workbenchを起動し「Database」タブの「Connect to Database」
から設定を確認し、OKボタンを押す

続きを読む →

MySQL(その２データ型について）

コメントを残す

1から続きます

1:データ型とは？

データベースでは、テーブルを作成するときに、それぞれの列に指定した形式のデータしか、
入力できないように設定する。

この時指定するデータの形式のことをデータ型という

2:データ型の種類(数値型)

・int型：整数(-2147483648~-2147483647)

・int unsigned:符号無しとすることができる。つまり正の整数だけを扱うことで、扱える値の範囲が増える

・tinyint型：とても小さな整数(-128~127)

・tinyint(1):真偽値true/falseを扱うことができる

内部的にはtrueは数字の1、falseは数字の0で管理されている。

MySQLでは0とnullがfalseで、空文字を含むそれ以外の値はすべてtrueとなる。

null:データが存在しないことを表す値

・float型：小さい浮動小数点数 (-3.402823466E+38〜-1.175494351E-38,0,および、1.175494351E-38〜-3.402823466E+38)Eは10nなので1.175494351E-38は1.175494351×1038

・double型：浮動小数点数(-1.7976931348623157E+308~2.2250738585072014E-308,0および、2.2250738585072014E-308~1.7976931348623157E+308)

実務上整数型はint、整数の中でも、真偽値を扱いたいときや、127以下の数字を扱うときはtinyint、小数を扱うときは、doubleを使うことが多いらしい。

floatは、あまり使われないようです。

続きを読む →

MySQLのまとめ(その１MySQLの概要)

コメントを残す

1:MySQLとは？

オープンソースのリレーショナルデータベースマネジメントシステム（RDBMS)で
データベースを管理するためのもの。

MySQL Community Editionを無料で利用できる

2:データベースとは？

検索や蓄積が容易にできるよう整理された情報の集まり

すべてのシステムがデータを散り扱っている。

データを取り扱う手段として、ほぼすべてのシステムが何かしらのデータベースを使用している。

データベースを管理するシステムのことをデータベースマネジメントシステム(DBMS)と呼ぶ

続きを読む →

Javascript ex2(サイト作成詳細Ver)

コメントを残す

サイトの作成手順などまとめ

いつでも、すぐに作れるように

1:まず初めにindex.htmlを作成する（太字の部分があるのを確認）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
 
</body>
</html>

2：レスポンシブデザインにしたいので、Stylesというフォルダーを作成し、style.scssを作成して以下のような設定をする。(モバイルファースト)

 // スマホ画面の設定
@import "breakpoints/base";

// スマホ横向きのときの設定
@media (min-width: 480px) {
@import "breakpoints/480up";
}

// タブレットのときの設定
@media (min-width: 600px) {
@import "breakpoints/600up";
}

@media (min-width: 960px) {
@import "breakpoints/960up";
}

@media (min-width: 1280px) {
@import "breakpoints/1280up";
}

// Retinaディスプレイで適用
@media (min-resolution: 192dpi)
,(-webkit-min-device-pixel-ratio: 2) {
@import "breakpoints/2x";
}

// 印刷時のみ適用される設定
@media print {
@import "breakpoints/print";
}

3:フォルダーbreakpointsを作成してその中に各画面サイズ用の設定のためのscssを作成する(中身は後で作成します)。

4：ヒーロースライダーの機能の実装+Googlefontの利用とbootstrap-reboot.cssの準備)

index.htmlを以下のように記述して、googlefontsとbootstrap-reboot.css(中身は後で配置)を利用する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Flower Garden</title>
<meta name="description" content="This site is a my site.">
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

↓の画像を参考に各ファイルを配置する

  1. フォルダーscriptsを作成してその直下にlibsのフォルダーを作成してヒーロスライダーのjsファイルを記述する。
  2. フォルダーscriptsの直下にvendorsのフォルダーを作成してswiper.min.jsを配置
  3. scriptsの直下にmain.jsを配置
  4. stylesの直下にフォルダーbreakpointsを作成して各scssファイルを作成する。
  5. stylesの直下にフォルダーmodulesを作成して各scssファイルを作成する。
  6. stylesの直下にフォルダーvendorsを作成してswiper.min.cssを配置する。
  7. stylesの直下にstyle.scssを配置する。

↑の詳細

1：hero-slider.jsの詳細

class HeroSlider {
constructor(el) {
this.el = el;
this.swiper = this._initSwiper();
}

_initSwiper() {
// returnでインスタンスに返す
return new Swiper(this.el, {
// オプション詳しくはSwiperで
// direction: 'vertical',
loop: true,
// effect: 'fade',
grabCursor: true,
effect: "coverflow",
// スライダーを中央揃えにする
centeredSlides: true,
// 1枚だけ表示する
slidesPerView: 1,
speed: 1000,
breakpoints: {
// 1024px以上は2枚表示する
1024: {
slidesPerView: 2,
},
},
});
}
// 空のオブジェクトを作る
start(options = {}) {
options = Object.assign(
{
delay: 4000,
// マウスで変更したあとでも4秒後、またオートでトランジション開始する
disableOnInteraction: false,
},
options
);

this.swiper.params.autoplay = options;
this.swiper.autoplay.start();
}
stop() {
this.swiper.autoplay.stop();
}
}

3の詳細：main.js

document.addEventListener('DOMContentLoaded', function () {
// newでインスタンス化
const hero = new HeroSlider('.swiper-container');
hero.start();
});

5の詳細：_mixin.scss

@mixin animation(
$name,
$duration: 1s,
$timing-function: ease,
$delay: 0s,
$iteration-count: 1,
$direction: normal,
$fill-mode: forwards
) {
animation: {
name: $name;
duration: $duration;
timing-function: $timing-function;
delay: $delay;
iteration-count: $iteration-count;
direction: $direction;
fill-mode: $fill-mode;
}
}
_hero-slider.scss



.swiper-container {
overflow: visible !important;
}

.swiper-slide {
height: 500px;
// 拡大してはみ出た部分を表示しない
overflow: hidden;

& > img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
// 拡大する
transform: scale(1.3);
transition: transform 1.9s ease;
}

&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 61, 125, 0.1);
}

&-active {
& > img {
transform: none;
}

& .hero__title {
// 透明度を解除
opacity: 1;
transform: translate(-50%, -50%);
}
}
}

.hero {
&__title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 20px));
color: $cWhite;
font-size: 25px;
// 文字が最前面にくるようにする
z-index: 2;
opacity: 0;
transition: opacity 0.3s ease 1s, transform 0.3s ease 1s;
}

&__footer {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
z-index: 2;
height: 68px;
width: 32px;
// アニメーションで上下に動いているように見えなくする
overflow: hidden;
}

&__downarrow {
position: absolute;
left: 0;
bottom: 0;
width: 6px;
// アニメーションを付けるために必要
@include animation(
$name: kf-arrow-anime,
$iteration-count: infinite,
$duration: 2s,
$timing-function: linear
);
}

&__scrolltext {
position: absolute;
// 90度回転
transform: rotate(90deg);
color: rgba(255, 255, 255, 0.7);
left: -8px;
top: 15px;
font-size: 1.2em;
}
}

@keyframes kf-arrow-anime {
0%,
50%,
100% {
transform: translateY(-10%);
}
30% {
transform: none;
}
}

5：ノーマライズする。

vendors直下にbootstrap-reboot.cssを配置する。(ここからget)

6:共通クラスを作って複数回同じことを書かないようにする

_base.scssに以下のように記述

// Stylesheet: ベーススタイル(スマホ用の設定)
body {
  font-family: "Kameron", "Noto Sans JP", sans-serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
.font-sm {
  font-size: 14px;
}
.font-md {
  font-size: 17px;
}
.font-lr {
  font-size: 17px;
}
.font-lg {
  font-size: 25px;
}
.mb-sm {
  margin-bottom: 16px !important;
}
.mb-lg {
  margin-bottom: 80px !important;
}
.pb-sm {
  padding-bottom: 16px !important;
}
.pb-lg {
  padding-bottom: 80px !important;
}
.content-width {
  width: 90%;
  margin: 0 auto;
  max-width: $contentMaxWidth;
}

ある程度よく使うもの(フォントのサイズやマージンやパディング)を共通化する。

7:ヒーロースライダー用の画像をimagesフォルダの中に配置する。

なんでもOK

8：テキストアニメーションの追加(流れで後で記述を追加する)

↓の画像を参考に各ファイルを配置する。(中身は後述)

  1. フォルダーlibsの直下にscroll.jsファイルを作成する。

  2. vendorsの直下にscroll-polyfill.jsを配置

  3. vendorsの直下にtext-animation.jsを配置

  4. vendorsの直下にTweenMax.min.jsを配置

  5. main.jsの記述を変更

  6. modulesの直下にtext-animation.scssを配置する。

  7. style.scssやindex.htmlに読み込むための記述をする。

貼り付けたmain.js内の以下を切り取り

scripts/main.jsにこのように貼り付け

index.htmlの中身<body>から

<body>
<div id="global-container">
<div id="container">
<div id="content">
<div class="hero">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__title">Magnificence</div>
<image src="images/Dahlia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Solidarity</div>
<image src="images/Gaillardia.jpg" alt=""></image>
</div>
<div class="swiper-slide">
<div class="hero__title">Gentility</div>
<image src="images/Geranium.jpg" alt=""></image>
</div>
</div>
<div class="hero__footer">
<img class="hero__downarrow" src="images/arrow.svg" />
<span class="hero__scrolltext">scroll</span>
</div>
</div>
</div>
</div>
</div>
<div class= animate-title>text-animation</div>
<div class= "tween-animate-title">Tween-text-animation</div>
<script src="scripts/vendors/swiper.min.js"></script>
<script src="scripts/vendors/TweenMax.min.js"></script>
<script src="scripts/vendors/scroll-polyfill.js"></script>
<script src="scripts/libs/scroll.js"></script>
<script src="scripts/libs/text-animation.js"></script>
<script src="scripts/libs/hero-slider.js"></script>
<script src="scripts/libs/mobile-menu.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>

_button.scssと_image-slide.scssをmodules直下に作成する。(記述は後ほど)

9：ローダーの追加

vendors直下にpace.jsを配置する。

htmlの<head>タグ内に読み込むよう記述(太字部分)

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Flower Garden</title>
<link rel="icon" href="images/favicon.png">
<link rel="stylesheet" href="styles/loader.css">
<script src="scripts/vendors/pace.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Kameron:wght@400;700&family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/vendors/bootstrap-reboot.css" />
<link rel="stylesheet" href="styles/vendors/swiper.min.css" />
<link rel="stylesheet" href="styles/style.css" />
</head>

styles直下にloader.scssを配置する

続きます

Javascript ex1(Javascriptの構文)

コメントを残す

Javascriptの基本構文とその出力結果をまとめてみた。

1:変数の定義var,let,const

// var, let, const
// varは上書きできる
var name = 'Tom';
console.log('hello' + name);

// letも上書きできるよ
let name2 = 'anna';
name2 = 'Pon'
console.log('hello' + name);

// データ型は Number, String, Boolean, Undefined, Null, Symbol

let variable = 'str';
variable = 12;
variable = undefined;
variable = null;
variable = false;

// 実際に確認するには？
console.log(typeof variable);
// ポイント上書き禁止はconstで定義しよう！

// あとから上書きできないのでエラーになるよ
const nam = 'Yan';
nam = 'Tim';

出力結果

続きを読む →

JavaScript14(知見まとめ)

コメントを残す

サイト作成から得られた知見をまとめてみる

index.htmlで得た知見(ざっとで)

headタグ

headタグの中でサイトのタイトル、説明、ロゴが設定できる

スタイルシートの読み込みもできて読み込む順番が重要である

pace.jsもここで読み込み

Googleフォントもここで読み込める

<body>から

global-containerはローダーの設定やモバイルメニューで必要。

<divclass="mobile-menu__cover"></div>

<divclass="nav-trigger"></div>

この2つはスクロール監視とモバイルメニューのカバーのためにある

基本的に親要素__innerをつくり@extend.flex;など使うことによってレスポンシブ対応する

<h2 class="main-title tween-animate-title">Pick up</h2>

上のようにtween-animate-titleを付けてテキストアニメーションの準備をしている

&copy;でコピーライトのマークが作れる

&nbsp;を使うことでスペースを表現できる

スクリプトを読み込むときmain.jsは最下段が良い

続きを読む →

JavaScriptのチートシート

コメントを残す

JavaScriptのチートシート

0:JavaScriptの基本構文とその出力結果について調べたいとき

Javascript ex1(Javascriptの構文)

1:var,let,constと引数、戻り値、プロパティとメソッドについて調べたいとき

JavaScript学習のまとめ0(変数､関数､メソッドとプロパティー)

2:Array,オブジェクト、for、for in、for ofについて調べたいとき

https://suzutukiblog.com/index.php/2021/03/02/javascript1/

続きを読む →