AGFA

関心が赴くままに

MacのMySQL操作

f:id:kanekok13:20180526171704p:plain

準備

MySQLサーバーを立ち上げる

$ sudo mysql.server start

エラーが起きた場合

$ sudo mysql.server start

. ERROR! The server quit without updating PID file (/usr/local/var/mysql/xxxxxxxxxxxxx.local.pid).

権限を変えてやる必要がある。

$ sudo chown -R _mysql:_mysql /usr/local/var/mysql

MySQLサーバに接続

~ $ mysql -u root

データベースの一覧を見る

show databases;

データベースの作成

create database [データベース名];

データベースの削除

drop database [データベース名];

操作対象のデータベースを見る

select database();

操作するデータベースの選択

use [データベース名];

※大文字小文字は区別されない。

作業用ユーザーの作成

create user [ユーザー名] identified by '[パスワード]';

権限の設定([データベース名]における全ての権限を与える)

grant all on [データベース名].* to [ユーザー名];

応用編

権限の設定+ユーザー作成

grant all on [データベース名].* to [ユーザー名] identified by '[パスワード]';

ホスト名を確認

show variables like 'hostname';

データベースから退出

\q

MySQLサーバーを停止

$ sudo mysql.server stop

ユーザーを指定してMySQLにログイン

$ mysql -u [ユーザー名] -p [パスワード(省略可)] [データベース名]

テーブルを作る(例文)

~ $ create table users (
id int not null auto_increment primary key,
name varchar(255),
email varchar(255) unique,
password char(32),
score double,
sex enum('male', 'female') default 'male',
memo text,
created datetime,
key score (score)
);

データベースのテーブルを確認

show tables;

Dockerについてまとめ

f:id:kanekok13:20170924122935p:plain

Docker

軽量な仮想化環境 Build once, run anywhere

公式サイト

https://www.docker.com/

今回はUbuntu(Vagrant)上にDockerを作成していく

Vagrantに仮想化環境を用意(Ubuntu

$ vagrant box add trusty64 https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box

Vagrantの仮想化準備

$ vagrant init trusty64

Vagrantfileのプライベートネットワークのコメントを外す。

$ vagrant up
$ vagrant ssh

システムを最新の状態へ

$ sudo apt-get update

Dockerのインストール

$ sudo apt-get install docker.io

Dockerを実行できるように設定

$ sudo ln -sf /usr/bin/docker.io /usr/local/bin/docker

Dockerのバージョンを調べる

$ sudo docker --version

Dockerを仮想化環境で作っていく

Dockerのイメージを検索する(centOSの場合)

$ sudo docker search centos | more

Dockerのイメージを引っ張ってくる(centOSの場合)

$ sudo docker pull centos

Dockerのイメージの一覧を見る(引っ張ってこれたか確認)

$ sudo docker images

Dockerのイメージの詳細を見る

$ sudo docker inspect [ID(一意に決まる部分のみで良い) or centos:[TAG名]]

どういう設定になっているか見ることができる。

Dockerイメージの削除

$ sudo docker rmi [ID]

rmi = remove image

コンテナーを作る

$ sudo docker run centos echo "hello world"

前半のsudo docker run centosでコンテナーを作り、
後半はそのコンテナー上でecho "hello world"が実行される。

作られたコンテナーの"実行中"の一覧を見る

$ sudo docker ps

作られたコンテナーの一覧を見る

$ sudo docker ps -a

最新の5個だけ見たいという場合 -n=5をつける。

コンテナー削除

$ sudo docker rm [コンテナーID(一意に決まれば良い)]

コンテナーのメモリの状況を3秒ごと表示させるコマンドをバックグラウンドで走らせる

$ sudo docker run -d [イメージ名] free -s 3

-dバックグラウンド
-s [数字][数字]秒ごとに

実行中のコンテナーのログを見る

$ sudo docker logs [コンテナーID]

タスクをフォアグラウンドに持ってくる

$ sudo docker attach --sig-proxy=false [コンテナーID]

CTRL + Cで抜ける。

タスクをストップさせる

$ sudo docker kill [コンテナーID]

タスクを再開する

$ sudo docker start [コンテナーID]

イメージを作成していく

コンテナーを立ち上げる。インタラクティブモード、ターミナルを立ち上げる。bashシェルを立ち上げる

$ sudo docker run -i -t centos /bin/bash

色々設定。

イメージを作成

sudo docker commit [コンテナーID] [ユーザ名]/[わかりやすい名前]

イメージができたか確認

sudo docker images

Docker Build

イメージからコンテナーを立ち上げて、変更を加えてイメージにするという流れを自動化する。

Dockerfileを作成する

$ vi Dockerfile

下記を記入する。

FROM centos
MAINTAINER [名前] <[メールアドレス]>(決まりではない)
# RUN: buildするときに実行される
RUN echo "now building..."
# CMD: runするときに実行される
CMD ["echo", "now running..."]

buildする。

$ sudo docker build -t [ユーザ名]/[わかりやすい名前]

イメージができたか確認

$ sudo docker images

実際に走らせる

$ sudo docker run [イメージ名]

Webサーバをインストールして、runの時に立ち上げてブラウザで中身を確認する

Dockerfileを書き換える

$ vi Dockerfile

buildの時にWebサーバをインストール

FROM centos
MAINTAINER [名前] <[メールアドレス]>(決まりではない)

RUN yum install -y httpd
ADD ./index.html /var/www/html/
EXPOSE 80
CMD ["/usr/sbin/httpd", "-D", "FOREGROUND"]

index.htmlを作成

$ vi index.html

buildする

$ sudo docker build -t [ユーザ名]/[わかりやすい名前] .

最後の.は忘れないようにすること!

runさせる。(コンテナー側のポート8080を80にリダイレクトさせたい、バックグラウンド)

$ sudo docker run -p 8080:80 -d [イメージ名]

192.168.55.44:8080にアクセスする。

Vagrantの設定〜開発準備まで

f:id:kanekok13:20170924015108p:plain

大まかな流れ

  1. Box(テンプレート)を取得。
  2. 仮想マシンを初期化。
  3. 仮想マシンを起動。

1. Box(テンプレート)を取得。

導入

$ vagrant box add [Box名] [Box URL]

Boxの一覧を見る

$ vagrant box list

vagrant boxesと調べると
boxがまとまったサイトが出てくる。

Boxの削除

$ vagrant box remove [Box名]

2. 仮想マシンを初期化。

仮想マシン初期化

$ vagrant init [Box名]

3. 仮想マシンを起動。

仮想マシンを立ち上げる

$ vagrant up

Vagrantの様々なコマンド

Vagrantの状態を見る

$ vagrant status

スリープさせる

$ vagrant suspend

スリープ状態から復帰させる

$ vagrant resume

終了させる

$ vagrant halt

立ち上げる(既出)

$ vagrant up

仮想マシン自体を削除する

$ vagrant destroy

仮想マシンに設定していたものも消えるので注意すること。
Vagrantfileは残る。

仮想マシンに接続する

$ vagrant ssh

Webページを作ってブラウザで見よう

Webサーバをインストール

$ sudo yum -y install httpd

Webサーバを立ち上げる

$ sudo service httpd start

仮想マシンを再起動してもWebサーバがonになるように設定

$ sudo chkconfig httpd on

ファイアウォールを切る

$ sudo service iptables stop

仮想マシンを再起動してもファイアウォールを切るように設定

$ sudo chkconfig iptables off
カレントディレクトリを見る
$ pwd

htmlファイルを置く

Cent OSでは、以下の場所に作成することが望ましい。
/var/www/html

上記の場所にindex.htmlを作成

$ sudo vi index.html

vimはデフォルトでは入っていない

ファイルの中身の確認

$ cat [ファイル名]

ネットワークの設定をする

仮想マシンから出る

$ exit

Vagrantfileの中にネットワークの設定がある

Vagrantfileを開く

$ vim Vagrantfile

設定変更

下記のプライベートネットワークの設定のコメントを外す。 f:id:kanekok13:20170924011115p:plain ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ f:id:kanekok13:20170924011155p:plain

設定を変更したらリロードする

$ vagrant reload

Macの中と仮想マシンの共有フォルダについて

Vagrantfileがあるフォルダで$ vagrant sshしたら、
仮想マシン上の/vagrantと対応している。

/vagrantフォルダをWebサーバのドキュメントルートに設定する。

今ある内容を削除する

$ sudo rm -rf /var/www/html

シンボリックリンクをはる

sudo ln -fs /vagrant /var/www/html

仮想マシンの接続を切る

$ exit

VagrantfileのあるフォルダがWebサーバのドキュメントルートとなっている。

応用

ローカルIPアドレスではなく、好きなローカルドメインに設定したい

モジュールのインストール

$ vagrant plugin install vagrant-hostsupdater

Vagrantfileの設定を変更

f:id:kanekok13:20170924011155p:plain この部分に下記内容を追加

config.vm.hostname = "[好きなドメイン]"

参考画像 f:id:kanekok13:20170924014450p:plain

最後に

この設定をしておかないと 「このサイトにアクセスできません」と表示されてしまう

$ sudo systemctl stop firewalld

以上です。

Reactの勉強4日目(ステートの更新)

f:id:kanekok13:20170815200150p:plain

本日の課題

テキストエリアに対して、即座に文字数をカウントして出力


解答

<body>

<div id="app"></div>

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
var TextAreaCounter = React.createClass({

  propTypes: {
    text: React.PropTypes.string,
  },

  getDefaultProps: function() {
    return {
      text: '',
    };
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value,
    });
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange,
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {
    text: "あいうえお"
  }),
  document.getElementById("app")
);
</script>
</body>

f:id:kanekok13:20170820131431j:plain

テキストエリアに入力すると、
f:id:kanekok13:20170820131436j:plain

注意点

getInitialState()メソッドを追加して、初期値を返して、
データに変更(テキストエリアの内容に変更)があった際に、
this.setState()によって更新していく!
_textChange()はイベントリスナー

this.setState()

_textChange: function(ev) {
  this.setState({
    text: ev.target.value,
  });
},

render()メソッドの方では、
this.propsではなく、this.stateから値を取得するように変更
onChangeはキャメルケース。※clickの場合もonclickではなく、onClick

render: function() {
  return React.DOM.div(null,
    React.DOM.textarea({
      value: this.state.text,
      onChange: this._textChange,
    }),
    React.DOM.h3(null, this.state.text.length)
  );
}



勉強になりました。

Reactの勉強3日目(コンポーネントを組み立てる)

f:id:kanekok13:20170815200150p:plain

本日の課題

以下のDOM構成を自分でコンポーネントを組み立てて表示する

<div id="app">
  <div class="test">
    <span class="first">テスト1</span>
    <span>テスト2</span>
    <span class="last">テスト3</span>
  </div>
</div>

解答

<body>

<div id="app"></div>

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
var Component = React.createClass({
  render: function() {
    return React.DOM.div(
      {
        className: "test"
      },
      React.DOM.span(
        {
          className: "first"
        },
        "テスト1"
      ),
      React.DOM.span(null, "テスト2"),
      React.DOM.span(
        {
          className: "last"
        },
        "テスト3"
      ),
    )
  }
});

ReactDOM.render(
  React.createElement(Component),
  document.getElementById("app")
);
</script>
</body>

これ、あっているのかな、、、^ ^;

注意点

var Component = React.createClass({
  render: function() {
 }
});

render()必須のメソッド
その他、任意指定のメソッドプロパティ

プロパティ

<script>
var Component = React.createClass({
  render: function() {
    return React.DOM.span(
      {
        className: "test"
      },
      "これは" + this.props.name + "です"
    )
  }
});

ReactDOM.render(
  React.createElement(Component, {
    name: "テスト"
  }),
  document.getElementById("app")
);
</script>

f:id:kanekok13:20170819210040p:plain

プロパティへのアクセスはthis.propsを経由


propTypes

プロパティの名前、型の宣言!


コンポーネント

var Component = React.createClass({
  propTypes: {
    name: React.PropTypes.string.isRequired,
  },
  render: function() {
    return React.DOM.span(
      {
        className: "test"
      },
      "これは" + this.props.name + "です"
    )
  }
});

name: React.PropTypes.string.isRequiredこの指定によって
nameは必ず文字列で指定してあげなければなりません。

値を省略すると

ReactDOM.render(
  React.createElement(Component, {
    // name: "テスト"
  }),
  document.getElementById("app")
);

f:id:kanekok13:20170819210506p:plainf:id:kanekok13:20170819210514p:plain

できる限り宣言することで、
長いソースコードを追いかけやすくする、
チェックしやすくすることを意識しましょう!


勉強になりました。


次回予定

テキストエリアに対して、即座に文字数をカウントして出力

Vue.jsの勉強1日目

f:id:kanekok13:20170816142016p:plain

Vue.js初心者の僕が、
Vue.jsを使いこなせるようになるまで
地道に頑張ります。
このブログはメモ的に使っていきますので、
よろしくお願いします。

※毎日更新ではありません。 1日1個とも限りません

本日の課題 ①

最初はいつもの「Hello Vue!」の表示、でいきましょう。(spanタグで囲う)


①の解答

<body>
<div id="app">
  <span>
    {{ message }}
  </span>
</div>

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>

f:id:kanekok13:20170816212026p:plain


el:で対象となるHTML要素を取得!

ここでは、<div id="app">が対象。

data:はバインドする値!

ここでは、{{ message }}messageと紐づけられた。

バインド (bind)とは
あっちとこっちを紐付ける、関連付ける、割り当てることです。 http://wa3.i-3-i.info/word12448.html


本日の課題②

spanタグにクラス属性testをつける


②の解答

<body>
<div id="app">
  <span v-bind:class="className">
    {{ message }}
  </span>
</div>

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app span',
  data: {
    message: 'Hello Vue!',
    className: 'test'
  }
})
</script>
</body>

f:id:kanekok13:20170816215205j:plain


el:のHTML要素取得にはCSS的な要素の指定でOK!

この部分el: '#app span',

data:の中には様々な指定ができる!

<span v-bind:class="className">className: 'test'が結びついている。

スタイルも当てられる!

<div id="app">
  <span v-bind:style="style" v-bind:class="className">
    {{ message }}
  </span>
</div>

<script src="vue/vue.min.js"></script>
<script>
var ap = new Vue({
  el: '#app span',
  data: {
    message: 'Hello Vue!',
    className: 'test',
    style: "color: red"
  }
})
</script>

f:id:kanekok13:20170816215517j:plain


勉強になりました。

次回予定

ループと条件分岐について

具体的には次回考えます。

Reactの勉強2日目(DOMの作成)

f:id:kanekok13:20170815200150p:plain

本日の課題

以下のDOMをReactで作成

<div id="app">
  <div class="test">
    <span class="first">テスト1</span>
    <span>テスト2</span>
    <span class="last">テスト3</span>
  </div>
</div>

解答

<body>

<div id="app"></div>

<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script>
ReactDOM.render(
  React.DOM.div(
    {
      className: "test"
    },
    React.DOM.span(
      {
        className: "first"
      },
      "テスト1"
    ),
    React.DOM.span(null, "テスト2"),
    React.DOM.span(
      {
        className: "last"
      },
      "テスト3"
    ),
  ),
  document.getElementById("app")
);
</script>
</body>

注意点

class属性を指定する際、
React.DOM. * のパラメーターには気をつけないといけない。

ReactDOM.render(
  React.DOM.div(
    {
      class: "test"
    },
    React.DOM.span(
      {
        class: "first"
      },
      "テスト1"
    ),
    React.DOM.span(null, "テスト2"),
    React.DOM.span(
      {
        class: "last"
      },
      "テスト3"
    ),
  ),
  document.getElementById("app")
);

class: "test"としてしまうと。。。

f:id:kanekok13:20170815220846p:plain

コンソールエラーが出てしまう。

正しくは、className: "test"

勉強になりました。


次回予定

以下のDOM構成を自分でコンポーネントを組み立てて表示する

<div id="app">
  <div class="test">
    <span class="first">テスト1</span>
    <span>テスト2</span>
    <span class="last">テスト3</span>
  </div>
</div>