Hello, World!

難しいことは書けません

初めてのHTML

==2019/5/22=========
以下の記事はものすごく雑で、いくつかプログラムに誤りもあるのでいつかもうちょっと丁寧に書き直したい


web制作でのメモ(ものすごい基礎)

HTMLとは

HTMLは、ページの要素や構造を指定するための言語
ホームページでいう文字みたいな

CSSとは

CSSはHTMLで作った要素を装飾するスタイルを指定する言語
ホームページのデザインは基本的にCSSでかける

HTMLにデザイン書き込んでもいいけど、文字とデザイン別々でやった方が整理しやすい

とりあえず先輩に教えてもらったHPを作ってみる
見た目はこんな感じ
f:id:eeko-amaryllis:20160829144337j:plain:w250 f:id:eeko-amaryllis:20160829144344j:plain:w300
大きさはこれくらい
f:id:eeko-amaryllis:20160829144327j:plain:w250

まずはじめにhtmlの骨組み

<!DOCTYPE html>
<html lang="ja"> 
  <head>
    <meta charset="utf8">
    <meta name="description" content="sample">
    <link rel="stylesheet" type="text/css" href="sample.css"> 
    <title>sample html</title>
  </head> 
  <body>
  </body>
</html>
html lang="ja"

<html>~</html>の直下には<head>と <body>がそれぞれ一つづつ必要でlang属性で言語を指定することができ、日本語ならja、英語ならen
<head>~</head>の間には、文書のタイトル等のヘッダ情報を記述
<body>~<body>には、実際にブラウザに表示される文書の本体を記述

link rel="stylesheet" type="text/css" href="sample.css"

rel="" stylesheet
type="" text/css , CSSMIMEタイプを指定
href="" URI , 読み込むスタイルシートファイルを指定

ここでheader,side,main,footerをbodyの中にかいていく

sample.html
<!DOCTYPE html>
<html lang="ja"> 
  <head>
    <meta charset="utf8">
    <meta name="description" content="sample">
    <link rel="stylesheet" type="text/css" href="ss.css"> 
    <title>sample html</title>
  </head> 
  <body>
    <div class="wrap">
      <div class="header">
        <font size="5" color="#ffffff">heder</font>
      </div>
      <div class="side">
        <font size="5" color="#ffffff">side</font>
      </div>
      <div class="main">
        <font size="5" color="#ffffff">main</font>
      </div>
      <div class="footter">
        <font size="5" color="#ffffff">footter</font>
      </div>
    </div>
  </body>
</html>

同じくcss

sample.css
.wrap{
  width: 960px; /*横幅定義*/
  margin: 0 auto; /*カラムを中央に寄せる*/
}

.header {
  height: 200px;
  width: 960px;
  background-color:#ff0000
}

.side {
  height: 300px;
  width: 320px;
  float: left;
  background-color:#00ff00
}

.main {
  height: 400px;
  width: 640px;
  float: left;
  background-color:#0000ff
}

.footter {
  height: 200px;
  width: 960px;
  clear: both;
  background-color:#000000
}

float: left;でsideとmainを横並びにすることができる、この時clear: both;も忘れずに
.wrapで幅を定義することでカラム落ちを防ぐことができる

こんな感じのHPになる
f:id:eeko-amaryllis:20160901161945p:plain


次にheaderのところにタイトルが来るので文字の中央寄せ下にずらし、heder,side,main,footterの区別をするべく空白と線を引いていく

sample.css
.wrap{
  width: 960px;
  margin: 0 auto;
}

.header {
  height: 70px;
  width: 960px;
  text-align: center; /*文字を中央に移動する*/
  margin-bottom: 50px; /*空白*/
  border-bottom: solid 10px #dddddd; /*hederの下に線*/
  background-color:#ff0000
}

.side {
  height: 300px;
  width: 320px;
  float: left;
  margin: 0px 0px 0px 30px;
  background-color:#00ff00
}

.main {
  height: 400px;
  width: 540px;
  float: left;
  margin: 0px 30px 30px 0px;
  border-left: solid 10px #dddddd; /*左側に縦線*/
  background-color:#0000ff
  }

.footter {
  height: 200px;
  width: 960px;
  clear: both;
  border-top: solid 10px #dddddd; /*上のに線*/
  background-color:#000000
  }

幾つか幅や高さの値も変えつつ、こんな感じ
f:id:eeko-amaryllis:20160901193747p:plain


次にsideとmainの内容とかいろいろ付け加えてみよう
今更ながらhtmlのところにフォントとかの設定してるからcssにまとめると(雑)
f:id:eeko-amaryllis:20160901232542p:plain

tensorflowのMNISTを実行

tensorflowがうまくいかなくて友達に教えてもらってのをメモ
ところどころ怪しいとこある
ここInstalling TensorFlow  |  TensorFlowみながらやったんだけどうまくいかなかった!

pythonのバージョン確認

$ python
Python 2.7.10 (default, Oct 23 2015, 19:19:21) 
[GCC 4.2.1 Compatible Apple LLVM 7.0.0 (clang-700.0.59.5)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 

pythonのバージョンの切り替え

今回はpython3を使いたいけどもともとmacにpython2.7.10が設定されているからそれをいじると怒られるので、pyenvとvirtualenvを使ってバージョンを切り替える

pyenvとは

pyenvは、標準とは違う環境のpython環境を作成できる(バージョン切り替え)

virtualenvとは

システムに普通にPythonをインストールすると複数のバージョンが共存できなくなる
そこで、独立したPython環境をを指定した時のみ使えるものが virtualenvらしい

# pyenvのインストール
$ brew install pyenv

# pyenv-virtualenvのインストール
$ brew install pyenv-virtualenv

下記のサイト参考に
GitHub - pyenv/pyenv: Simple Python version management
pyenvとvirtualenvで環境構築 - Qiita
.zshrcに以下を書き込む

export PYENV_ROOT="$HOME/.pyenv"                                             
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
eval "$(pyenv virtualenv-init -)"

設定を反映させるためにターミナルを再起動させるか,下記コマンドを打つ

$ exec zsh -l

きちんと変更されているか確認

$ python
Python 3.5.1 (default, Aug  6 2016, 14:58:12) 
[GCC 4.2.1 Compatible Apple LLVM 7.3.0 (clang-703.0.31)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 

ちゃんとバーションが3.5.1に変わっているのでOK

pyenv-virtualenvによる仮想環境構築

#環境を構築したいディレクトリ下で下記コマンドを実行
$ pyenv virtualenv 3.5.1 tensor_3.5.1
Ignoring indexes: https://pypi.python.org/simple
Requirement already satisfied (use --upgrade to upgrade): setuptools in /Users/e145722/.pyenv/versions/3.5.1/envs/tensor_3.5.1/lib/python3.5/site-packages
Requirement already satisfied (use --upgrade to upgrade): pip in /Users/e145722/.pyenv/versions/3.5.1/envs/tensor_3.5.1/lib/python3.5/site-packages

#構築したtensor_3.5.1があるか確認
$ pyenv versions     
* system (set by /Users/e145722/.pyenv/version)
  3.5.1
  3.5.1/envs/tensor_3.5.1
  tensor_3.5.1

#切り替え
$ pyenv global tensor_3.5.1
(tensor_3.5.1) $ pyenv versions           
  system
  3.5.1
  3.5.1/envs/tensor_3.5.1
* tensor_3.5.1 (set by /Users/e145722/.pyenv/version)

構築、バージョン変更できた

pip

(tensor_3.5.1) $ pip install --upgrade pip
(tensor_3.5.1) $ pip3 install --upgrade https://storage.googleapis.com/tensorflow/mac/tensorflow-0.8.0-py3-none-any.whl

MNIST実行

下記のサイトからコードをもってくる
MNIST For ML Beginners  |  TensorFlow

あとinput_data.pyももってくる
tensorflow/input_data.py at r0.8 · tensorflow/tensorflow · GitHub

(tensor_3.5.1) $ wget --no-check-certificate "https://raw.githubusercontent.com/tensorflow/tensorflow/r0.8/tensorflow/examples/tutorials/mnist/input_data.py"
(tensor_3.5.1) $ python mnist.py                   
Successfully downloaded train-images-idx3-ubyte.gz 9912422 bytes.
~~~

あとtensorboardのコード
tensorflow/mnist_with_summaries.py at master · tensorflow/tensorflow · GitHub
たぶんここから?

MySQL ERROR! The server quit without updating PID file

mysql使おうとしたら以下のようなコードがでてきた、前まで使えたのに・・・・・

$  mysql.server start  
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/ayako.local.pid).

PIDファイルがない!!!!!

$  mysql [master] ls
auto.cnf           ib_buffer_pool     private_key.pem
ayako.local.err    ib_logfile0        public_key.pem
ca-key.pem         ib_logfile1        server-cert.pem
ca.pem             ibdata1            server-key.pem
client-cert.pem    mysql              sys
client-key.pem     performance_schema

参考に以下のサイトみたけど起動してくれなかった(T.T ) ( T.T)
mysql起動で「The server quit without updating PID file」 - Qiita
MySql server startup error 'The server quit without updating PID file ' - Stack Overflow
MySQLが起動しないエラー(The server quit without updating PID file) | EasyRamble
"Starting MySQL . ERROR! The server quit without updating PID file (/usr/local/var/mysql/**.local.pid)." エラーの対処 - プログラミングの詰まりどころを、懇切丁寧に

とりあえず権限は変えた.
mysqlの所の権限が_mysqlになってたのでそこをusernameにかえる

$  var [master] ls -la
total 0
drwxrwxr-x   7 [username] admin   238  7 27 09:50 .
drwxr-xr-x  27 [username] admin   918  7 31 23:05 ..
drwxr-xr-x   3 [username]  admin   102  4 22 17:00 cache
drwxr-xr-x   3 [username]  admin   102  7  5  2015 games
drwxr-xr-x   3 [username] admin   102  3  7 02:04 log
drwxr-xr-x  20 _mysql   _mysql  680  8  3 09:31 mysql
drwxr-xr-x   2 [username] admin    68  3  2 14:45 run
$  var [master] sudo chown -R [username]:admin /usr/local/var/mysql
$  var [master] ls -la
total 0
drwxrwxr-x   7 [username]  admin  238  7 27 09:50 .
drwxr-xr-x  27 [username]  admin  918  7 31 23:05 ..
drwxr-xr-x   3 [username]  admin  102  4 22 17:00 cache
drwxr-xr-x   3 [username]  admin  102  7  5  2015 games
drwxr-xr-x   3 [username]  admin  102  3  7 02:04 log
drwxr-xr-x  20 [username]  admin  680  8  3 09:31 mysql
drwxr-xr-x   2 [username]  admin   68  3  2 14:45 run


次のサイトでmy.cnfいじったらいけた!
mysql - How to enable explicit_defaults_for_timestamp? - Stack Overflow

my.cnfのなかをいじるらしい
f:id:eeko-amaryllis:20160803132554j:plain:w500

これのmysqldのところを

explicit_defaults_for_timestamp = 1

にする

$  /etc  ls -la my.cnf 
-rw-r--r--  1 root  wheel  88  7 20 14:19 my.cnf
$  /etc  sudo chmod o-r my.cnf
Password:
$  /etc  ls -la my.cnf 
-rw-r-----  1 root  wheel  88  7 20 14:19 my.cnf
$  /etc  vim my.cnf 
$  /etc  mysql.server start
Starting MySQL
 SUCCESS! 

わーい、できた!
でもmy.cnfの中身消えた!
まぁ動くからいいか

libpng16.16.dylibのやつ

tesseractとgnuplotを使おうとしたらエラー出た

$ gnuplot
dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: /usr/local/opt/gd/lib/libgd.3.dylib
  Reason: Incompatible library version: libgd.3.dylib requires version 40.0.0 or later, but libpng16.16.dylib provides version 38.0.0
[1]    75455 trace trap  gnuplot

$ tesseract
dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: /usr/local/opt/leptonica/lib/liblept.5.dylib
  Reason: Incompatible library version: liblept.5.dylib requires version 40.0.0 or later, but libpng16.16.dylib provides version 38.0.0
[1]    76230 trace trap  tesseract

以下のサイトのやつやったらできた!!
stackoverflow.com

oh-my-zsh

oh-my-zshってのを教えてもらったのでメモ
まずここらかインストール
github.com

ayako % sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"
ayako % ls .oh-my-zsh/themes
ayako % vim ~/.zshrc 
ayako % source .zshrc 

これから好きなの選んで付け加えていくのもいいかもね

適当なコマンドメモ

授業でmatlabで出力した画像をリモートからローカルに持ってきたい場合scpコマンドを使うらしい

scpコマンド
書式:scp [オプション] コピー元 コピー先

参考URL
scpコマンドでサーバー上のファイルorディレクトリをローカルに落としてくる - Qiita

tarコマンド

複数のファイルを1つのアーカイブファイルにまとめたり、逆に展開したりするコマンド。オプション -z を使えば、gzip での圧縮または解凍も同時に行う。
tarでのアーカイブファイルの拡張子にはよく .tar が使われる。 -z オプションを付けてgzipでの圧縮も行う場合は .tar.gz や .tgz が使われる。

  • f

アーカイブファイル名をパラメータで指定する。これを指定しないと標準入力 または標準出力が使われる

  • x

アーカイブファイルを展開する。たぶんextractの意味

  • z

gzipで圧縮または展開を同時に行う

書式:tar [オプション] アーカイブ
使用例:tar xzf hogehoge.tar.gz

Aeを使った時のメモ

企画で動画を作ることになってその時に参考にしたAeのサイトや動画をメモしとく
以下作った動画(改良の余地あり)
www.youtube.com

webサイト

イージングの設定方法(速度の細かい変更)

イージングの設定方法 After Effects CC の使い方 - カフィネット

静止画書き出ししたら、画像サイズが小さかったときの対応

バカ・アフター 雑記 After Effects初心者にありがちなこと

CC Mr.Mercuryのエフェクト設定

After Effects上達への道: ・CC Mr.Mercury