OmniAICreator/Qiita-1.07M huggingface dataset:
簡易Markdown記法チートシート

さくっとMarkdown記法まとめ

## 見出し

```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
```

># 見出し1
>## 見出し2
>### 見出し3
>#### 見出し4


## リスト

```
- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
```

>- リスト1
>    - ネスト リスト1_1
>        - ネスト リスト1_1_1
>        - ネスト リスト1_1_2
>    - ネスト リスト1_2

## 番号付きリスト


```
 1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
 1. 番号付きリスト2
```

> 1. 番号付きリスト1
>    1. 番号付きリスト1_1
>    1. 番号付きリスト1_2
> 1. 番号付きリスト2


## 引用

```
> お世話になります。yyyです。
> 
> ご連絡いただいたバグの件ですが、仕様です。
>
>> お世話になります。 xxxです。
>> 
>> あの新機能バグがありませんか。
```

>> お世話になります。yyyです。
>> 
>> ご連絡いただいたバグの件ですが、仕様です。
>>
>>> お世話になります。 xxxです。
>>>
>>> あの新機能バグがありませんか。


## コード

```

　```ruby:hello.rb
 
　puts "hello"
 
　``` 
 
```


>
> ```ruby:hello.rb
> puts "hello"
> ``` 
>


```
 `puts "hello"`とか
```

> `puts "hello"`とか

## リンク

```
[google](http://google.com)

```

> [google](http://google.com)


## 強調など

```
_italic_ __bold__ ___italic bold___ ~~strikethrough~~
*italic* **bold** ***italic bold***
```

> _italic_ __bold__ ___italic bold___ ~~strikethrough~~
> *italic* **bold** ***italic bold***


## 表

```
|header1|header2|header3|
|:--|--:|:--:|
|align left|align right|align center|
|a|b|c|
```

>|header1|header2|header3|
>|:--|--:|:--:|
>|align left|align right|align center|
>|a|b|c|


## チェックボックス

```
- [ ] タスク1
- [x] タスク2
```

>- [ ] タスク1
>- [x] タスク2


## 水平線

```
___
```

>
>___
>
[RDBMS][SQL]トランザクション分離レベルについて極力分かりやすく解説

技術系の記事色んなところで書いてたけど、ここにまとめることにした。昔書いてたやつは綺麗バッサリ消そうかと思ったんだけど、やたらView数が多いやつが何個かあったので気が向いた時に乗り換えしつつ（予定）今の知識で更新。

# 概要

以下の3つの不都合な読み込み現象がある。この意味に関しては後ほど解説。とりあえずはどれもRDBMSのACID特性のI（Isolation-隔離性）から外れたものと思ってくれればいい。

* ダーティリード
* ファジーリード（非再現リード,ノンリピータブルリード）
* ファントムリード

で、本題のトランザクション分離レベルは4つのレベルがある。

* READ UNCOMMITTED
* READ COMMITTED
* REPEATABLE READ
* SERIALIZABLE

下に行くほど高レベルで上に行くほど低レベル。
高レベルになればなるほど、先ほどの不都合な読み込み現象が発生しなくなる。が、代わりにパフォーマンスが落ちる。

つまり、**「パフォーマンスを上げるためにある程度の読み込み不都合を妥協するか、パフォーマンスを落としてもいいから不都合を発生しないようにするか」**という設定のレベルのことを言う。


# 読み込みの不都合

先述した3種類の読み込み不都合に関して説明。
まずこれ知らないと分離レベルの話できない。

### ダーティリード

**別のトランザクションでコミットされてないデータが読み取れる現象。**

1. トランザクションAでレコードを①から②にUPDATE（未コミット）
1. トランザクションBでレコードをSELECTする
1. トランザクションAをロールバックする
1. トランザクションBで取得したデータは②となっている。

一番低いレベルでないと発生しない。これを許容するシステムをまだ見たことがない・・・


### ファジーリード（非再現リード,ノンリピータブルリード）

**別のトランザクションで更新されたデータを読むことにより、一貫性がなくなる現象。**

1. トランザクションAでレコードをSELECTする。①となっている。
1. トランザクションBでレコードを①から②にUPDATEし、COMMITする。
1. トランザクションAで同じレコードを再度SELECTする。②となっている。

トランザクション分離レベル知る前はそういうもんじゃんとか思っていたんだけど、
2つのトランザクションが隔離されてないので使ってる側で気にしないといけない。
その時点で隔離性から離れてるんだよね。


### ファントムリード

**別のトランザクションで挿入されたデータが見えることにより、一貫性がなくなる現象。**

1. トランザクションAでレコードをSELECTする。該当レコードがない。
1. トランザクションBでレコードをINSERTし、COMMITする。
1. トランザクションAでレコードをSELECTする。2でINSERTとしたレコードが取得できる。

ファジーリードとよく似ているがINSERTとUPDATEという点が違う。
また、以下もファントムリードとなる。

1. トランザクションAでレコードをCOUNTする。X件取得できた。
1. トランザクションBでレコードをINSERTし、COMMITする。
1. トランザクションAでレコードをCOUNTする。X+1件取得できた。


以上が読み込みにおける3種類の不都合の簡単な説明となる。


# トランザクション分離レベルと読み込みの不都合の関係

簡潔に以下のような関係性となる。

| |ダーティリード|ファジーリード|ファントムリード|
|:---|:---:|:---:|:---:|
|**READ UNCOMMITTED**| 発生する            |  発生する            |  発生する              |
|**READ COMMITTED**  |           | 発生する            |  発生する              |
|**REPEATABLE READ** |            |            | 発生する              |
|**SERIALIZABLE**    |            |            |              |

こうしてみると隔離性の高いSERIALIZABLEをいつも選択がいいのではないかと思ってしまうが、隔離性の高さ故の問題もある。が、今回は極力分かりやすくというコンセプトなので説明では省略


# 幾つか補足

* あくまで「発生しないことが保証されている」というもので、レベル低いからと言って発生するようになっているかと言えばそうとは限らない。その辺りの実装はRDBMSによって大きく違い、例えばMySQLではREPEATABLE READであってもファントムリードは発生しない。
    （が、代わりに別の問題があるのだけど今回はスルー）
* 標準SQLで「発生しないことが保証されている」というものなので、発生しない為にどういう方法を取るかというのはRDBMS毎に違う。発生する状況になったらエラーになる、トランザクション完了を待つ等。
* RDBMSによってデフォルトのトランザクション分離レベルが違う。対応している分離レベルの種類も違う。

#### デフォルトのトランザクション分離レベル

* MySQL(InnoDB) … REPEATABLE READ
* PostgreSQL  … READ COMMITTED
* Oracle … READ COMMITTED
* SQL Server … READ COMMITTED

# どうでもいい話

元記事書いたの4年前だった。
Xamarin.FormsでHitAndBlowを作成してみた。

特に珍しいことはしていないが、
基本的なことを実践するにはちょうどよかった。

まぁほぼコピペですけど...

GitHubにおいてあるので見てみて下さい。
https://github.com/fujisawa369/HitAndBlow
オフラインリアルタイムどう書くF07の問題


オフラインでリアルタイムに「どう書く」をやるイベント( https://yhpg.doorkeeper.jp/events/65904 )を行っています。

問題は「マス目を歩く」という名前で、詳細は
http://nabetani.sakura.ne.jp/hena/ordf07walk/
です。

出題者の気分としては、問題を読み始めてから解けるまで30分あればなんとかなると思ってますが、ひとそれぞれで。

実装ができた方はこちらのコメント欄からリンクを張っていただくと見つけやすくて助かります。

似たような問題をもっと解きたいという方は、
https://nabetani.hatenadiary.com/entry/yhpg_list
に過去問リンク集がありますので、そちらをご覧になると良いと思います。
VMware Fusion10でRazer製品（キーボード、マウス、etc）を認識させる方法

個人的メモ

HID（ヒューマンインターフェースデバイス）はデフォルトで仮想マシンへの接続が不可に設定されています。
なので、これを許可に変更することで仮想マシン（ゲストOS）でキーボード、マウスが接続可能になり、VMware設定USBとBluetooth画面に一覧で表示されるようになります。

設定方法はVirtual machinesフォルダの各.vmwarevmを開いた直下にある.vmxファイルを編集し、
usb.generic.allowHID = "TRUE"
usb.generic.allowLastHID = "TRUE"
を追加するだけ。


以下に詳しくあります。
https://kb.vmware.com/selfservice/search.do?cmd=displayKC&docType=kc&docTypeID=DT_KB_1_1&externalId=2110392
AWS認定ソリューションアーキテクト-プロフェッショナル試験　小手先テクニック

AWS認定ソリューションアーキテクト-プロフェッショナル試験は問題文も回答の選択肢も(試験時間の割に)長い。その上、選択肢がなかなか判断に迷うものが多く、ちょっと回答に迷うとあっという間に時間がなくなる。
そんなプロフェッショナル試験で選択肢を絞り込むのにちょっとだけ役立つ小手先テクニック。
**※試験の本旨とは逸れますが「AWSの試験はこういう理解を求めてるよ」程度に思ってください。加えて、当然ですが個人的な見解です。**

# 問題文のキーワードと選択肢の選別
プロフェッショナル試験では問題文の中にその問題で求められている設計上のキーワードが散らばっている。そうしたキーワードからざっくり回答の選択肢を取捨選択する。

- スケーラブル  
RDS, DynamoDB, S3を使う選択肢があったらRDSはNG。「スケーラブル」と言われたら「DynamoDBかS3だな」くらいに考える。
- コスト効率の良い or 費用を抑える  
RDSでマルチAZ構成の選択肢があったらそれはNG。マルチAZはシングル構成と比べて費用が2倍以上になるので高コスト。「本番DBがシングル構成とかダメでしょ」などと余計な配慮は不要。ただし、「高可用性」などの別のキーワードが一緒にある場合はマルチAZもあり得る。
- RTOが数分～2時間(およそ)  
Glacierを使う選択肢はNG。Glacierからのデータ取り出しは数時間～1日程度かかるため、短時間のRTOが求められる場合にGlacierは向かない。

つまるところ、同種のサービス間の特徴をきちんと理解し、問題で聞かれていることだけ回答することが肝要。
MacにSourcetreeをダウンロードするまで

#MacでSourcetreeをダウンロードしてみた
##経緯
**2017年10月25日現在**
現場で使用しているPCをMacに統一することになり
今までwindowsユーザーだった自分がPCの乗換えをすることに。

##宣伝
アプリ作るまでのお話を書きました。
読んでいただけると嬉しです☺️
[【3日で実装・公開】エモいアートな画像生成アプリ開発 - Qiita](https://qiita.com/rantaro/items/fdb7bbd55a57c68db834)

##作業の流れ
###1.[公式サイト](https://ja.atlassian.com/software/sourcetree)にアクセス
![img_1.png](https://qiita-image-store.s3.amazonaws.com/0/199085/6e9897da-f051-05f8-4bea-a7361d790c86.png)

###2.Mac OS X 向けをダウンロード
![img_2.png](https://qiita-image-store.s3.amazonaws.com/0/199085/fb9b9c56-ed75-e9db-d397-52f817f3d3d0.png)

###3.ダウンロードが完了したら開く
![img_3.png](https://qiita-image-store.s3.amazonaws.com/0/199085/63263b70-b6d7-66d6-9208-0b890cfc545b.png)

![img_4.png](https://qiita-image-store.s3.amazonaws.com/0/199085/8c201671-e7c4-41bd-382c-3cf65223a1bb.png)

![img_5.png](https://qiita-image-store.s3.amazonaws.com/0/199085/961842c0-2f99-756d-439d-b87b97af3e08.png)


###4.設定をします
![img_6.png](https://qiita-image-store.s3.amazonaws.com/0/199085/81685ae9-cabc-509a-a454-6b5a34dd9dc0.png)

ここからはSourcetreeの設定になります。
設定は個人個人で違ってくると思うので今回はここまでとします。

ポップアップの通りに進めばあっという間でした！

##まとめ
今回はダウンロードのみでしたので簡単でした。

時間があればwindowsからMacへの引継ぎに関しても書きたいと思います。

##宣伝
アプリ作るまでのお話を書きました。
読んでいただけると嬉しです☺️
[【3日で実装・公開】エモいアートな画像生成アプリ開発 - Qiita](https://qiita.com/rantaro/items/fdb7bbd55a57c68db834)
gitレポジトリの場所をうつしたい

#概要
まだgit使い始めだった頃にアホな場所にgit initしてしまい、それが今になって不便になったので「gitレポジトリの場所を移したい！」ってなって色々調べたけど結局時間の無駄だったというお話。

##移す前

```
java/
├── .git
├── .gitignore
├── cat.java
└── ls.java
```
##望んでいた結果

```
src/
├── .git
├── .gitignore
├── main
│   ├── java
│   │   ├── cat.java
│   │   └── ls.java
│   ├── resources
│   └── test
│       └── file
└── test
    └── java
        └── lsTest.java
```

##解決策
srcディレクトリにcdした後、.gitと.gitignoreをmvして持ってくる

```
$ mv main/java/.git main/java/.gitignore .
```
そんでadd, commit & pushするだけ！！
超簡単。

##解決への経緯
stack overflowの[このページ](https://stackoverflow.com/questions/5408475/moving-a-git-repository-up-one-hierarchy-level)を主に参考にしながら格闘していたが、全然うまくいかない。
他にもそれらしいことが書いてあるページを読んでみても全然できない！
やけになって「.gitうつしたる！」っていざやってみたらなんかうまく行ってしまった。
.
.
.

(´・ω・｀)
【zsh】tmuxでキーボード操作でコピペする方法【コピーモード】

itermやターミナルで複数窓を開いてて、隣の窓のとある部分をコピーしてこっちに貼り付けたい。
ということは結構あります。
しかしその度マウスやトラックパッドまで手を伸ばしてコピーするのは少々煩わしいです。

そう思っていたらtmuxにはコピーモードというものがあることを知ったので早速使ってみたのです。


## 環境
* Mac
* iterm
* zsh
* tmux　(version2.5)


と、書きましたが要はtmuxさえ動く環境であればなんでもいいはずです。
ただ、brewでとあるものをインストールしているのでこの手順はmac前提です。なにをいっているんでしょうかね僕は。

## 手順

`brew install reattach-to-user-namespace`

でreattach-to-user-namespaceをインストールします。
これはtmuxのコピーモードでコピーした内容をmacのクリップボードに移すために必要なパッケージです。

次に~/.tmux.confを作成し以下を記述します。

```
set-option -g default-command "exec reattach-to-user-namespace -l $SHELL"
setw -g mode-keys vi
bind-key    -T copy-mode-vi v     send-keys -X begin-selection
bind-key    -T copy-mode-vi y     send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
bind-key    -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
```

※tmux2.4以前では、vi-copyだったのですが、以降はcopy-modeという項目に変わっているので注意。
古い記事にはvi-copyと書かれていることが多いのでここでハマってしまわないように。まあ僕ですが。

上記のconfを作成したら、tmuxを再起動させます。

`tmux source ~/.tmux.conf`
上記コマンドで反映されます。（tmuxから抜ける必要はありません）


これで、

control + b 押してから、　[
を押すとコピーモードに移り、

v or space でコピー開始
カーソルを動かして範囲を選択
y or enter でクリップボードに保存

ができます。

地味にコピーモード中に、
control + v
で矩形選択できるものもうれしいです。

もちろんshift + vで行選択もいけます。

そんな感じです。

※ちなみに僕はこれに加えて、BetterTouchToolsを使って、
【controlキーを素早く２回押す】の動作を【control + b】に割り当ているため、
【controlキーを素早く２回押す】→【[】
でコピーモードに移れるようにしています。
パケットキャプチャ取得

### パケットキャプチャ取得

1 tcpdumpインストール
yum -y install tcpdump

2 tcpdumpコマンド
資本：SSHポート（22）以外のパケットを全て記録しファイルに保存する。
tcpdump -w tvserver-2017-10-25-10:00:00.pcap -s 0 -i eth0 port not 22

応用：1時間ごとにキャプチャファイルを分割し、分割後にファイルをgzip圧縮する。
tcpdump -w tvserver-%F-%T.pcap -G 3600 -z gzip -s 0 -i eth0 port not 22

参考：https://qiita.com/tsunolab/items/fedbd7e915f5a6b53782
Docker,Supervisord,Puma,Railsで作った環境にpryを使えるようにする方法



Docker環境でpryを使えるための手順を紹介します。

まず自分の環境です。

```
alpine 3.6にrailsを入れてる
supervisord経由でrailsプロセスを起動してる
rack serverはpumaを使ってる
railsバージョン5.1.3、rubyバージョン2.4.2
```




#pryが使えるようにするための手順

```yaml:docker-compose.yaml
 ports:
   - 3000:3000
   #pry用port
   - 3005:3005
```

※通常のrailsポート以外でpry専用のポートを開けておきます。

```
alias ccc="docker exec -i  `docker ps | grep container_name | awk '{print $1}'` bash -lc 'cat tmp/pids/server.pid | xargs kill -9 ; bundle exec rails s -b 0.0.0.0 -p 3005'"
```

※container_nameは自分の環境に合わせてコンテナーが識別できる名前に変更してください。


```
ccc実行
```

aliasで指定したコマンドを実行して
http://localhost:3005 にアクセスするとpryが使えると思います。


#stdin_openを利用してpryを使える方法




https://qiita.com/kosukeKK/items/f7111247f22050aeedad
の記事を見ると

```yaml:docker-compose.yaml
web:
  tty: true
  stdin_open: true
```

にする方法もあるそうですが、今回は以下の理由で採用しませんでした。

1. pumaで起動すると標準出力でログが出てなくてまともに動きませんでした。
(webrickだと正常に動きました。)

2. docker-compose up -> pryモードに入り ctrl + cとかで抜けた時、操作ミスでdocker-composeまで抜けてしまう場合があった
FFmpegを使ってOPENREC（ライブ）を録画する方法

ffmpeg を使えばOPENRECライブ（生配信）をmp4ファイルに録画することができる

- この記事はmacOS想定
- ffmpegさえ利用可能にすればWindowsやLinuxでも使えるのでは

# Homebrew のインストール
必須ではないが便利

```:macOS
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

# ffmpeg のインストール

```:macOS
brew instal ffmpeg
```

## インストールできたかの確認

```:macOS
ffmpeg -version
```

```
ffmpeg version N.N Copyright (c) 2000-YYYY the FFmpeg developers
```


# 録画したファイルを置く専用フォルダを用意して移動

```:macOS
$ cd Desktop
$ mkdir video
$ cd video
```

# OPENRECを録画する

## デベロッパーツールを開き、Networkタブへ移動する
表示 > 開発 / 管理 > デベロッパー ツール
"Network"タブを表示する

## 録画したいOPENRECをChromeブラウザで開く

```
https://www.openrec.tv/live/hogehoge
```

## playlist.m3u8の情報を取得する

### Networkコンソールにm3u8を表示する
フィルターに``` m3u8 ```を指定すると便利

### playlist.m3u8を右クリックしてcURLを取得する
Copy > Copy as cURL

<img width="907" alt="fig_2017-10-25_17_05_25.png" src="https://qiita-image-store.s3.amazonaws.com/0/207089/993aa21e-c351-784b-1f15-957d5eec715c.png">

- playlist.m3u8 が良い


### ffmpeg コマンドラインの構築に必要な情報を抽出する
コピーしたcURLは以下のようになる

```
curl 'https://stationhoge.openrec.tv/live1/ngrp:hogehogehogehogehogehogehogehogehogehogehoge_normal/playlist.m3u8' -H 'origin: https://www.openrec.tv' -H 'accept-encoding: gzip, deflate, br' -H 'accept-language: ja,en-US;q=0.8,en;q=0.6' -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36' -H 'accept: text/plain, */*; q=0.01' -H 'referer: https://www.openrec.tv/live/hogehoge' -H 'authority: stationhoge.openrec.tv' --compressed
```

### ffmpeg コマンドラインを構築する
上記の情報を以下のように再構築する

```
ffmpeg \
-headers 'Origin: https://www.openrec.tv' \
-headers 'Accept-Encoding: gzip, deflate, br' \
-headers 'Accept-Language: ja,en-US;q=0.8,en;q=0.6' \
-user_agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36" \
-headers 'Accept: text/plain, */*; q=0.01' \
-headers 'Referer: https://www.openrec.tv/live/hogehoge' \
-headers 'Authority: stationhoge.openrec.tv' \
-i "https://stationhoge.openrec.tv/live1/ngrp:hogehogehogehogehogehogehogehogehogehogehoge_normal/playlist.m3u8" \
-codec copy \
-bsf:a aac_adtstoasc \
-movflags faststart \
video.mp4
```

実際は各々の環境で異なる箇所のみ変更すれば良い。具体的には
- user_agent
- Referer
- Authority
- m3u8のURL


## 録画する
macOSのターミナルを開き、上記コマンドを実行する。
停止するには ```q``` を押す

# 確認する
フォルダ内を覗くと
``` video.mp4 ```
ができているはず

# 高度な操作
[ffmpeg Documentation] (https://ffmpeg.org/ffmpeg.html#Options)
にたくさんオプションが説明されている
Cloud IAPで設定された認証をGCPのサービスアカウントで認証を通す方法

[公式ドキュメント](https://cloud.google.com/iap/docs/authentication-howto#authenticating_from_a_service_account)


```
OpenID Connect（OIDC）トークンを使用して、Cloud IAP で保護されたリソースに対してサービス アカウントを認証します。

    1. Cloud IAP で保護されたプロジェクトのアクセスリストにサービス アカウントを追加します。
    2. JWT ベースのアクセス トークン（JWT-bAT）を生成します。
    3. Cloud IAP で保護されたクライアント ID の OIDC トークンをリクエストします。
        クライアント ID を見つけるには、次の手順を行います。
            [Cloud IAP] ページに移動します。
            アクセスするリソースを見つけて、右側の [さらに表示] > [OAuth クライアント] をクリックします。
            表示される [認証情報] ページで、クライアント ID をメモします。
    4. Authorization: Bearer ヘッダーに OIDC トークンを追加して、Cloud IAP で保護されたリソースへの認証済みリクエストを作成します。
``` 

このドキュメントを見て分からなかった人向け
ちなみに僕は全くわからなかった

解決方法はGoogleさんが参考に作成してくれている、プログラムを利用する
少し改造したのが [コチラ](https://github.com/qua-lnial/python-docs-samples/tree/master/iap#get-openid-connect)

## 前準備
GCPのサービスアカウントをexportしておく。
` export GOOGLE_APPLICATION_CREDENTIALS=$HOME'/.credentials/xxxxxxxxxxxxxxxx.json' `


## プログラムを実行


1. [fork repo](https://github.com/qua-lnial/python-docs-samples/tree/master/iap#get-openid-connect) こちらからプロジェクトをclone
2. iap/に移動
3. 外部ライブラリーをインストール
` $ virtualenv/bin/pip install -r requirements.txt
`
4. コマンド実行 ` $ python iap_get_oidc.py `
5. 結果が表示されるので  `$ curl http://xxx.com -H "Authorization:Bearer xxxxxxxxx` で動作確認
機械学習　語句(途中)

## 畳み込み層

## プーリング層

## 交差エントロピー
まずエントロピーとは何か
→エントロピー(平均情報量）（１回の試行の結果を伝えるのに要する平均ビット数)
確率P(ω) で起きるできごとに
長さlog(1/P(ω)) (確率Pが起きることの情報を伝えるのに要するビット数)
これらの総和から求められる式がエントロピー（平均情報量）と呼ぶ（以下)
![entropy_f1.gif](https://qiita-image-store.s3.amazonaws.com/0/181968/3f55ed3c-262d-e333-a3ef-6529731ca557.gif)

→交差エントロピー
確率にその確率の違うビット数(長さ）をかけたものの総和から求められる式のこと
 
のちにスクリーンショットで式を貼る

機械学習において分類器を学習するときに、正規の分布Pと分類器の予測分布Qの交差エントロピー H(P,Q)を損失関数とする
これの最小化とはPが固定されている値なのでカルバックライブラー情報量の最小化と同じという意味である
カルバックライブラー情報量とは、ビット長の無駄/価値の誤差のことである。

## 損失関数
正しいデータと予測するデータの２つの値の差が小さくなるような関数のこと
正しいデータと予測するデータの２つの値の差が小さいということは、その差は違いとなるので差が小さければ小さいほど予測するデータが正しい値に近いということがわかる。
→損失関数の最小を目指して行くのが機械学習の目標と言える。


## 勾配降下法
ある関数の極小値を算出する手法のこと。
→損失関数（交差エントロピー）に用いる方法で、勾配降下方を用いて損失関数の最小を見つける。
勾配降下法とは、学習データに対する誤差が小さくなる方向に重み（W)を更新し徐々に理想のWへと近づけ行く。
動かす方向は傾きが負となる方向に、傾きに掛け合わせる学習係数により動かす大きさが決まる。

## softmax関数
複数ある事象のうち、ある事象が起きる確率を求める関数

## Adam
確率的勾配降下法の更新量を調整し学習の収束性能を高めた手法
確率的勾配降下法の傾きの部分を　（傾きの平均値)/(傾きの標準偏差）　とすることにより、
始めの香辛料は大きく学習が進み、理想の値に近づくほど更新料が減少し学習を収束させられる性質がある。

## ReLU
入力が0以下ならば0を出力し入力が0より大きいならば入力と同じ値を出力する非線形関数。
純で計算量が小さく、微分すると活性状態なら1となるので誤差逆伝播法で活性状態の勾配が消えない性質がある事から活性化関数としてよく用いられます。

## 活性化関数
角層ごとに持つ関数のこと

y(次の層の値) = f( w1x1+w1x2+ ,,,,) + b　のf()を指すものが活性化関数となる。

## 誤差逆伝播
多層のニューラルネットワークにおいて各層の勾配を効率的に求める手法。
出力層から入力層に向かって誤差（ペナルティ）を逆伝播させながら求めて行く

## 過学習(overfitting)
機械学習の問題では、過学習（overfitting）が問題になることが多くある。 過学習とは、主にパラメータを大量に持ち、表現力が高いこと、訓練データが少ないことによって引き起こされ、訓練データだけに適応し過ぎてしまい、訓練データに含まれない他のデータにはうまく対応できない状態を言う。 機械学習で目指すことは、汎化性能であり、訓練データには含まれないまだ見ぬデータであっても、正しく識別できるモデルが望まれる。複雑で表現力の高いモデルを作ることは可能であるが、その分、過学習を抑制するテクニックが必要となってくる


## 参考サイト
[雑記： 交差エントロピーって何](http://cookie-box.hatenablog.com/entry/2017/05/07/121607) →交差エントロピーについて
[TensorFlowの手書き数字認識チュートリアルからざっくりディープラーニングを勉強してみました](http://nihemak.hatenablog.com/entry/2016/07/02/205330)
[]()
[]()
[]()

## 今から参考させてもらおうと思っているサイト
[エントロピーからKLダイバージェンスまでの話](http://s0sem0y.hatenablog.com/entry/2016/04/21/132645)　→より詳しく交差エントロピーやKLダイバージェンスについて知りたくなったとき
[ダイバージェンス関数を数学の立場から概観](http://s0sem0y.hatenablog.com/entry/2016/11/17/072852)
[]()
[]()
[]()
[]()
畳み込みニューラルネットワークとは(途中)

## 畳み込みニューラルネットワークとは
畳み込みニューラルネットワーク(Convolutional Neural Network：CNN）とは深層学習におけるネットワークの組み方の一種であり、画像や動画認識において広く使われているモデルの一つである。
CNNの構造として畳み込み層とプーリング層と呼ばれる２つの層が画像の特徴を取り出しながら受け渡して行き、最終的に全結合層へとつながって行く。

## 畳み込み層
畳み込み層の仕事とは画像にフィルタ（カーネル）をスライドさせながら畳み込む処理を行い特徴マップを得ること
畳み込むとは画像上にフィルタを乗っけて、その「フィルタ内の画像ベクトル」と「畳み込みに使用するそのフィルタのベクトル」との間の掛け算、内積を行うこと。

特徴→分類するためのもの

フィルター→CNNにおいて学習させるもの

活性化関数としてReLUが用いられる。


### **ゼロパディング**
入力の特徴マップの周辺を０で埋めること
→なぜこのようなことをするかというと。普通に畳み込みを行うと端の領域は他の領域を比べて畳み込まれる回数が少なくなってしまうため。
**メリット**
端のデータに対する畳み込み回数が増えるので端の特徴も考慮されるようになる
畳み込み演算の回数が増えるのでパラメーターの更新が多く実行される
カーネルのサイズや、層の数を調整できる
→ Convolution層とPooling層で出力サイズは次第に小さくなるのでゼロパディングでサイズを増やしたりすると層の数を増やすことができる。


### **フィルタの設定**
畳み込みに使用するフィルタについて、設定しなければいけないパラメーター
使用するフィルタの数　（だいたいは2の階乗の値がとられる)


### **ストライド**
ストライドとは畳み込みの適用間隔のこと。

出力サイズ：O フィルタサイズ:F 高さ:H パディング:P ストライド:S
O(h) = H + 2P - F(h) / S + 1

## CNNの構成要素
CNNは各層と活性化関数といくつかのパラメータの組み合わせでできている。

### **Fully Connected層**
Fully Connected層では一般的なニューラルネットワークでも見られることができる。
各層のユニットは次の層にユニットと全て繋がっている。
それぞれのユニットとの接続は重みを持っている。入力は１次元のベクトルで出力も１次元のベクトルとなる。
CNNでは出力層の手前で使われていることが多く、この部分が検出された特徴の組み合わせから、予測結果に分類するための識別部となる。
また最終的な出力層のユニットの数は分類される数と一致している必要がある。出力層での出力値がそのカテゴリと予測される確率となる。

出力ユニットの値の計算はそれぞれの入力ユニットの値と接続の重みを内積してバイアスを足す
y = f(x1w1 + x2w2 + ・・・・ + b) 入力ユニットの値:x 接続の重み:w バイアス:b　 f()活性化関数

**問題点**
一次元ベクトルを入力値として一次元ベクトルを出力するため、空間的な位置情報・音声であればシーク位置・画像であればRGBチャンネルなど
そのような３次元以上（空間的な情報）を扱うことができない。

活性化関数としてはReLUがよく使われる

#### **Rectified Linear Units(ReLU)**
マイナスの数字が生じたときに0に変換してくれる。
これによって学習値が0付近で立ち往生したり、無限に向かったりすることがなくなる。

#### **フィルタの設定**
必要なパラメーターが以下の４つ
・フィルタの数（K）　：　使用するフィルタの数。大体は２の階乗の値が取られる
・フィルタの大きさ（F）　：　使用するフィルタの大きさ
・フィルタの移動幅（S）　：　フィルタを移動させる幅
・パディング（P）　：　画像の端の領域をどれくらい埋めるか

これらのパラメーターの値から、Convolutional Layerのサイズを計算することが可能です。
32x32x3の画像に5x5x3のフィルタを、移動幅1、パディング2で適用するとします。まず、パディングを加味すると画像のサイズは32+2*2=36となります。ここから幅5のフィルタを移動幅1でとる場合、36-5+1で32となります。つまり、最終的には32x32x3の層ができることになります。

これらのパラメーターはCaffeなどのライブラリを使用する際にも設定が必要なため、その意味とサイズの計算方法を頭に入れておくとよいと思います。

### **Convolution層**
フィルタごとに畳み込み演算した出力が次の層の１つのユニットとなる。
Fully Connected層と同様にフィルタごとに内積を計算しバイアスを足して活性化関数を適用する。

→基本的に畳み込みと呼ばれる前述のことを行う階層。

### **プーリング層**
Convolution層の後にだいたい適用される。入力データをより扱いやすい形に変形するために情報を圧縮し、down samplingする
畳み込み層から出力された特徴マップを、さらに縮小して当たらな特徴マップとする。
この際に着目する領域のどの値を用いるかで、最大値を得ることで画像の多少のずれも吸収される
よって、この処理により画像の位置移動に対する普遍性を獲得したことになる？？

#### **max pooling**
小領域（特徴マップ上）に対して最大のものを選択する操作を行う。
これによって
微小な位置変化に対して強くなる
ある程度過学習を抑制する
計算コストを下げる
などの効果がある。

## **まとめ**

→ 畳み込み層は画像の局所的な特徴を抽出する。
→ プーリング層は局所的な特徴をまとめあげる処理をする。

→→　この２つの処理とは、入力画像の特徴を維持しながら画像を縮小処理している。

今までの画像縮小処理と異なるところは、画像の特徴を維持しながら画像の持つ情報量を大幅に圧縮できるところ。
→　つまり画像の抽象化が可能
ネットワークに記憶された、この抽象化された画像イメージを用いて、入力される画像を認識、つまり画像の分類をすることが可能。

#### **CNNの進化**
・フィルタを小さくし、階層を深くする
・PoolingやFCのレイヤをなくす
などの構成を行うことで精度をあげていく。

# 参考文献
[CNNをゼロから理解する](https://deepage.net/deep_learning/2016/11/07/convolutional_neural_network.html)
[CNNとは何なのか](http://qiita.com/icoxfog417/items/5fd55fad152231d706c2)
[畳み込みニューラルネットワークの仕組み](http://postd.cc/how-do-convolutional-neural-networks-work/)　
[](https://qiita.com/icoxfog417/items/5fd55fad152231d706c2)
[]()
markdownファイルをajaxで取得してクライアント側で描画する

# やりたいこと
```
html/
  index.html
  index.md
  hoge.md
```
index.htmlから同じディレクトリのmdファイルをajaxで取得し、クライアント側でjsで処理して描画する

- example.com にアクセス => index.md が表示
- example.com/#hoge にアクセス => hoge.md が表示

## 補足
- 使用したjs
    - syntax highlight => prism.js
    - markdown parser => marked.js
- HTMLのページ内ジャンプが使えなくなる…

# source

```html:index.html
<!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>Document</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.9.0/github-markdown.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/themes/prism.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.3/prism.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
</head>
<body>
  <div class="container">
    <div id="markdown_content" class="markdown-body"></div>
  </div>

<script>
window.onhashchange = function(){
  location.reload();
}
let target = document.getElementById('markdown_content');
marked.setOptions({
  langPrefix: 'language-'
});

(async () => {
  try {
    const filename = location.hash.slice(1) || 'index';
    const response = await fetch(filename+'.md', {method: 'GET'});
    const responseText = await response.text();
    target.innerHTML = marked(responseText);
    Prism.highlightAll();
  } catch (e) {
    target.innerHTML = 'failed to load a markdown file';
  }
})();
</script>
</body>
</html>
```

```md:index.md
# README

index.htmlからajaxでmdファイルを取得してパースして表示。syntax highlightにも対応

- [hoge](/#hoge)
```

```md:hoge.md
# HOGE

- fuga
- piyo

\```javascript

var hoge = 'piyo';
function fuga(){
  // aaa
}
\```

```
Mapboxのレイヤーのz-index(表示順)を変更する


Mapboxのレイヤーはz-indexを数値で指定することが出来ない。
レイヤーの表示順は`moveLayer`を使用して変更することができる。

2つのレイヤーの位置関係しか指定できないので、ちょっと使い勝手が良くないがやりたいことは実現可能。

https://www.mapbox.com/mapbox-gl-js/api/#map#movelayer
企画を通すために大切な6つのこと

## 概要

何か企画を通したい時に、ノウハウがあるなと思ったのでまとめました。
僕自身コミュニケーションが苦手で、苦労しているところではあるけど、何か助けになれば。

## 前提

企画は、アイデアを練って成功率を上げるフェイズと、そのアイデアをどのように伝えて人を動かしていくかという二つのフェイズがある。
後者のフェイズでは、極論話を聞かずに説得していく(巻き込んでいく)ことも重要。もちろん、元のアイデアがどのような問題があるか把握し軌道修正することも大切だけど。

## 1. 三つの選択肢を提示

一つこんなことを考えました！どうですか？って聞くと、それはこういう点が悪いっていって戻ることになります。
三つの選択肢を作って、どこかから選んでもらう。
松竹梅っていうやつです。
どの企画もいい点も悪い点もある。その上で何を選択するかを話す方が分かりやすいし、決めやすい。
別のやり方だと、こういうことを考えたけど、どうやり方を変えると進めるか聞くこともあります。

## 2. 事前に批判されるポイントを話す/ヒアリング

自分の企画の話をした時に批判させることが想定できてないことはよくないです。
事前に問題のあるポイントは洗い出して、その上でもうまく進めるポイントを整理することが大切。
あとは、いきなり結論を出す会議を設定せずに、その前にヒアリングする機会を設けて、問題点を洗い出します。

## 3. 根回し

根回しってネガティブな印象もあるけど、気持ちよく早く企画を進めることが目的なのと、否定されてから説得するのは大変なのでそうならないように進める方が楽です。
具体的には、2の事前にヒアリングしておくのもそうで、別の方法だと「この企画はこのくらいうまくいくと思っている」など情熱を伝えておくとか、
「うまく進めることができなくて困ってるから助けて欲しい」とか「別のことでこういうことするから今回はお願い」とか
「とりあえず美味しいものをご馳走しとく」とか色々な手法がある。

あとは、会議を段階的に落としておくみたいなのも根回しに近いと思います。
いきなりやると、8-2で反対だけど、1-2で説得し、2-3で説得し、3-5で説得すれば、通るってことはよくある。

## 4. タイプ別攻略法

事前に批判されるポイントを話す/ヒアリングに近いけど、少しニュアンスが違うので、書いています。
大きくは、ロジカルに説明することで説得される人、事例があるから説得される人の二種類があります。
なんとなくですが、理系はロジカルに説得されることが多く、文系は事例から説得されることが多いです。
あと、前提がたくさんあり説明するとしっかりしてるなと思う人と、結論はなんだって思う人もいます。
文章で書くのが良いか、スライドで話すのが良いかもあります。

余談ですが、「異文化理解力」でも同じことが国ごとに違うことが分かりって面白いなと思いました。
ちなみに僕は、ロジカルに説得され、前提なしで結論はなんだって思うタイプです。

ロジックを詰めるだけでなく、事例を集めることが大切なのは収穫でした。
事例は小さなものでもよく、お客さんがなんて言ってるとか、ユーザがなんて言ってるとか、アメリカだとこんなものが流行っていてこんなにユーザがいるとか利益が出てるとか、そういうものです。

逆にロジックを詰めるなら、ゴールは何で、そのためにはどのような数字があり、それぞれの数字をどうやって達成するかの根拠を詰めます。

## 5. 質問できる領域を残す

何か企画を説明したら、必ず質問があります。
質問の内容を2で事前にヒアリングすることが重要と言いましたが、ここではそれを最初から書かないというテクニックです。
書かないことで、必ず質問されます。それをしっかり準備していると、考えられてるなとなります。

このあたりは組織として本当にこれでいいか疑問に思うかもしれないですが、
上の人ほどたくさんの意思決定をする必要があり、たくさんの情報はいらないと思っています。
彼らが気になることに追加で答えられ、その準備ができているということは、重要でないことも含めて詰められているという信頼になります。
たくさんの情報がありすぎても、読めないし、分からないとなるので、想定質問は詰めるべきだけど、話す時は最初に出さない。
質問があれば出すというのもいいかなと。

## 6. やっぱり信頼

なんだかんだ企画は、任せたけどちゃんとやったの？ってのは後からついてきます。
ちゃんとやりきるとか、情熱を持って取り組んでいると次のチャンスは生まれやすいし、中途半端に終わっていると次は生まれにくいと思います。
企画はうまくいかない時もあるけど、応援してくれた人が納得できるまでやりきることも大事だし、基本的にはうまくいかないよりもうまくいく方が信頼も獲得できると思っています。

## 関連URL
* 異文化理解力 https://www.amazon.co.jp/dp/B013WB5BJS/
素のHTMLでのOcticonsの使い方

- Octicons 6.0.1

昔はフォントとして提供されていた[Octicons](https://octicons.github.com/)ですが、今ではSVGでしか提供されていません。
[README](https://github.com/primer/octicons)ではNode.jsやRubyでの使い方は説明されているのものの、素のHTMLでの利用方法が分かりません。
と思ったら、単にSVGタグをそのまま使うだけでした。
MITライセンスなので商用でも問題ありません。

- デモページ: https://sutara79.github.io/demo-octicons/
- ソースコード: https://github.com/sutara79/demo-octicons


# 利用手順
## 1.使いたいアイコンを探す
[Octiconsの公式サイト](https://octicons.github.com/)で使いたいアイコンを探し、個別のページへ移動します。
今回は[.octicon-alert](https://octicons.github.com/icon/alert/)を選びました。
![001.png](https://qiita-image-store.s3.amazonaws.com/0/27816/64c9fc0b-ca8e-3740-52e9-963968a0392c.png)

## 2.SVGタグを丸ごとコピーする
HTMLのソースコードを直接見て、`<svg>`を丸ごとコピーします。
Chromeのデベロッパーツールで、`<svg>`のソースコードの上で`Copy Element`を使うと簡単にコピーできます。
![002.png](https://qiita-image-store.s3.amazonaws.com/0/27816/2104255a-4b39-2544-516d-f384827876ec.png)

## 3.width, height属性を削除する
アイコンの大きさはCSSで一括指定したほうが管理しやすいので、svg要素のwidth, height属性は削除します。

&lt;svg <strong>width="256"</strong> <strong>height="256"</strong> class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" aria-hidden="true"&gt;&lt;path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"&gt;&lt;/path&gt;&lt;/svg&gt;

## 4.見栄えはCSSで調整する
公式のCSSを参考にします。
:link: https://github.com/primer/octicons/blob/master/lib/octicons_node/index.scss

私は下記のようにしました。

```css
.octicon {
  display: inline-block; /* 公式と同じ */
  fill: currentColor;    /* 公式と同じ */
  vertical-align: text-bottom;
  height: 1.4em; /* 大きさは height で指定 */
}
```

アイコンの色は`color`で指定します。
指定しなければ親要素の色を引き継ぎます。これは`fill: currentColor`のおかげです。

```css
.octicon-alert {
  color: red;
}
```

## 5.JavaScriptで動的にスタイル変更
マウスオーバー時に色を変えることもできます。

```javascript
document.querySelectorAll('.octicon-zap').forEach(function(elem, idx) {
  elem.onmouseover = function() {
    this.style.color = 'gold'; // マウスオーバーで金色に
  };
  elem.onmouseout = function() {
    this.style.color = ''; // 元の色に戻す
  }
});
```

# デメリット
欠点の一つに、CSSのtext-shadowを使えないという点があります。
たとえば、[Font Awesome](http://fontawesome.io)ならば下記のように影をつけられます。
![002.png](https://qiita-image-store.s3.amazonaws.com/0/27816/e96e0e9b-fdec-850b-25d2-3f0c08d92339.png)

しかし、Octiconsでは不可能です。
下記でもtext-shadowを使っていますが、SVGなので全く反映されません。
![003.png](https://qiita-image-store.s3.amazonaws.com/0/27816/a6f376e7-6135-dc15-8ba4-2738235046f2.png)

box-shadowでは長方形の画像の領域に沿った影しかつけられません。
![004.png](https://qiita-image-store.s3.amazonaws.com/0/27816/8e9c4df0-30d0-75f5-c282-8f433d9d9ac3.png)

[&lt;feDropShadow&gt;](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow)のようにSVGの内部で影をつけることもできるようですが、手軽に使える方法ではありません。
影をつけたい場合は、素直にフォント形式のアイコンを使うのがいいと思います。

# SVGをHTMLで表示する最適な方法は?
SVGファイルをIMGタグで表示することもできます。
ただ、これではCSSやJavaScriptで色を変えることができません。
現状ではSVGタグを使うのが一番だと思います。
複雑な図だとSVGのソースコードも長くなって扱いづらくなるのが難点ですが…。
ただ、フォントファイルをダウンロードしたりCDNで呼び出す必要がなく、使うアイコンのSVGタグだけを記述すればいいので、その点は良いと思います。

:link: [HTML5でのSVGファイル操作のおさらい - Qiita](https://qiita.com/ka215/items/f9834dca40bb3d7e9c8b)
Dockerfile EXPOSEではポートの公開は行われない

Dockerfileの記述の一つにEXPOSEがあります。

引数としてポートを指定するようになっているので、「外部にポートを公開するためにこれを書く」と説明する人が多いのですが、[公式ドキュメント](https://docs.docker.com/engine/reference/builder/#expose)を見てみると
> The EXPOSE instruction does not actually publish the port. It functions as a type of documentation between the person who builds the image and the person who runs the container, about which ports are intended to be published.

つまり、EXPOSEはあくまでイメージを作った人が意図している「外部に公開**すべき**ポートを指定する」のであって、このコマンドによって実際に何か動作が変わるわけではないようです。何か公開したいポートがあるのならば、ドキュメントとして当然書いたほうがいいことに変わりはありません。
CentOSでCubemapをEquirectangularにTerminalのコマンドで変換する


[MacでCubemapをEquirectangularにTerminalのコマンドで変換する](https://qiita.com/wapa5pow/items/79a76a21bcadb28869d3)のCentOS版です。
Amazon Linuxにいれようとしましたが、インストールがものすごく大変だったのでCentOSにしました。

メモ書き程度ですが、こまっている人のために残しておきます。

Dockerでやります

# Dockerを起動して、ログイン

```
docker run -i -t centos /bin/bash

[root@01830935b610 /]# rpm --query centos-release
centos-release-7-4.1708.el7.centos.x86_64
```

# 各種インストール

```
yum -y update
yum groupinstall -y "Development Tools"
yum install -y rpmdevtools
yum install -y wget
yum install -y libpano13-devel zlib-devel libtiff-devel libjpeg-devel
yum install -y libpng-devel gettext-devel wxGTK-devel boost-devel
yum install -y desktop-file-utils OpenEXR-devel gcc-c++ exiv2-devel glew-devel
yum install -y freeglut-devel mesa-libGLU-devel libXmu-devel
yum install -y wxPython tclap-devel python-devel swig flann-devel lensfun-devel
yum install -y perl-podlators
```

# epelを入れる cd 

```
cd /root
yum install epel-release
wget https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -Uvh epel-release-latest-7*.rpm
```

# cmake3を入れる

```
yum install -y cmake3
```

# wxWidgetsを入れる

```
yum install -y gtk2
yum install -y gtk+-devel gtk2-devel

cd /root
wget https://github.com/wxWidgets/wxWidgets/releases/download/v3.0.3/wxWidgets-3.0.3.tar.bz2
tar xvf wxWidgets-3.0.3.tar.bz2 
cd wxWidgets-3.0.3
./configure 
make
make install
```

# boostを入れる

```
wget https://dl.bintray.com/boostorg/release/1.65.1/source/boost_1_65_1.tar.bz2
cd /root/boost_1_65_1
bash ./bootstrap.sh
./b2
./b2 install
```

# vigraを入れる

```
yum install -y hdf5-devel
yum install -y ImageMagick
yum install -y OpenEXR

yum -y install python-pip
pip install --upgrade pip
pip install numpy nose sphinx

cd /root
wget https://github.com/ukoethe/vigra/releases/download/Version-1-11-1/vigra-1.11.1-src.tar.gz
tar xvf vigra-1.11.1-src.tar.gz
cd /root/vigra-1.11.1
mkdir build
cd build
cmake3 -DWITH_OPENEXR=1 -DWITH_BOOST_THREAD=1 ..

ここでこけるので、vi CMakeCache.txt でCMAKE_CXX_FLAGSに-std=c++11を足す
もう一回cmake3をやる

cmake3 -DWITH_OPENEXR=1 -DWITH_BOOST_THREAD=1 ..
make
make install
```

# libpano13を入れる

```
cd /root
wget https://downloads.sourceforge.net/project/panotools/libpano13/libpano13-2.9.19/libpano13-2.9.19.tar.gz
tar xvf libpano13-2.9.19.tar.gz
cd libpano13-2.9.19

./configure
make
make install
```

# nonaを入れる

```
yum install lcms2-devel
yum install sqlite-devel


mkdir -p /root/hugin
cd /root/hugin

wget https://downloads.sourceforge.net/project/hugin/hugin/hugin-2017.0/hugin-2017.0.0.tar.bz2
tar xvf hugin-2017.0.0.tar.bz2 
cd hugin-2017.0.0
mkdir BUILD
cd BUILD
cmake3 ..
make 
make install
```

nonaを実行してみる

```
export LD_LIBRARY_PATH=/usr/local/lib
nona
```

# cubic2erectを入れる

```
yum install cpan
cpan
cpan install Image::ExifTool
cpan install Image/Size.pm
cpan isntall Image::Size
cpan isntall URI
cpan install Net::HTTP
cpan isntall LWP::UserAgent

cd /root
wget http://search.cpan.org/CPAN/authors/id/B/BP/BPOSTLE/Panotools-Script-0.28.tar.gz
tar xvf Panotools-Script-0.28.tar.gz 
cd Panotools-Script-0.28

perl Makefile.PL
make
make test
make install
```

やっと実行できるようになったので、Macと同じように実行すればEquirectangularの画像ができます
意外と需要がある（泣）文字数を省略して「...」にしたい。複数行のとき！

# 意外と需要がある。。忘れた頃にやってくるこの仕様 :confounded:
1行のときは`text-overflow`プロパティを使用すれば問題ありません！

問題は複数行の時。

## 解決方法（jQuery）
高さを指定して高さを超えたら(改行されたら)「…」に書き換える。

```js
// ▼文字列を省略して「…」を付与
jQuery(function($) {
  $('.js-text-overflow').each(function() {
    var $target = $(this);
    // オリジナルの文章を取得する
    var html = $target.html();
    // 対象の要素を、高さにautoを指定し非表示で複製する
    var $clone = $target.clone();
    $clone
      .css({
        display: 'none',
        position : 'absolute',
        overflow : 'visible'
      })
      .width($target.width())
      .height('auto');
    // DOMを一旦追加
    $target.after($clone);
    // 指定した高さになるまで、1文字ずつ消去していく
    while((html.length > 0) && ($clone.height() > $target.height())) {
      html = html.substr(0, html.length - 1);
      $clone.html(html + '...');
    }
    // 文章を入れ替えて、複製した要素を削除する
    $target.html($clone.html());
    $clone.remove();
  });
});
```
## 解決方法（css）
横幅は任意で設定。
`overflow: hidden;`
 と
`height: 50px;`
がキモ。（50px）は任意でOK

```css
.js-text-overflow {
  overflow: hidden; /* overflow: hidden;　がキモ。*/
  width: 245px;
  height: 50px;
  font-size: 16px;
}
```
## 解決方法（html）
Classを指定してあげるとOK:v:

```html
<p class="js-text-overflow">
 2行以上は3点リーダー2行以上は3点リーダー2行以上は3点リーダー2行以上は3点リーダー2行以上は3点リーダー
</p>
```

参考サイト
:writing_hand: Developers.IO: [文字列を省略して「…」を付与する方法 – CSS/jQuery](https://dev.classmethod.jp/ria/string-replace-css-and-jquery/)
フレンズのトランプジェネレータをRailsで作ったよ

# はじまり
[ちょと前に作ったジェネレータ](https://qiita.com/asny/items/37cf9aaa8a27ad589cf4)をRailsに移植しました。
移植というよりは別言語での実装といった方がいいでしょうかね。


# そーす
[ここ](https://github.com/asny23/KemonoTrump-Rails)にあります。
実行方法も書いてありますのでローカルとかCloud9とかで実行できます。
環境によってはGemのインストールで詰まるかもしれませんが、がんばってください。


# つかいかた
[前回](https://qiita.com/asny/items/37cf9aaa8a27ad589cf4#つかいかた)と同じです。


# つくりかた

## そざい
前回と同じです。
素材製作者の方々、ありがとうございます。

## あーるまじっく
今回はついでにRailsの予習をするつもりだったのでRMagickを使ってみました。

```rb
require 'RMagick'

@@imagePath = 'app/resources/'
@@cardScale = 2.5;

card = Magick::Image.read(@@imagePath + 'card/' + cardId + '.svg').first
cardWidth = card.columns * @@cardScale
cardHeight = card.rows * @@cardScale

icon = Magick::Image.read(@@imagePath + 'icon/' + friendsId + '.jpg').first
iconWidth = icon.columns
iconHeight = icon.rows

iconOffsetX = (cardWidth - iconWidth) / 2;
iconOffsetY = (cardHeight - iconHeight) / 2;

card.resize!(@@cardScale)
card.composite!(icon, iconOffsetX, iconOffsetY, Magick::OverCompositeOp)
```
画像生成部分はこんなようなソースになります。
RMagickは今ひとつドキュメントがないのでこれでいいのか怪しいのですが。。

`@@cardScale` なんていうものが出ているのは、画像素材のサイズの都合です。カード画像を拡大してからフレンズのアイコンを乗せないと大きさが合わないのです。

## くふう
slack等に出せるようになりました。わーい
<img width="771" alt="kemonotrump-rails-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/118352/e8b3fb4a-21b3-4432-e575-9bc558ea5ffe.png">


# なぞ
- Cloud9で開発してEC2のAmazon Linuxにもデプロイしてみたのですが、
実行環境によって同じ画像ファイルなのに縦横のサイズが違ったりしました。

- カード画像の画質が悪いです。svgを読み込んだ時点でラスターに変換されてしまい、それを拡大しているんだと思います。

RmagickとImageMagickは色々使い方が難しいところがありますね。
SVGであれこれするなら別のライブラリのほうがいいのかもしれません。
そのあたりは今後研究していきたいです。
Python3.6でDlib環境構築

#実行環境（開始時点）

- macOS Sierra 10.12.5
- Python 2.7.10
- その他環境は[以前設定した内容](https://qiita.com/WaterIsland/items/12cfce9c1ba5e660fa8f)を引き継いでいる。


#参考にしたサイト
[このサイトを参考に実行](https://qiita.com/WaterIsland/items/12cfce9c1ba5e660fa8f)したら、C++のサンプルプログラムを動かすまでできた。
作業は、virtualenv環境を起動した状態で実施した。

#Python3.6でDlibを使う（エラー発生）
- pythonでdlibをインポートすると以下のエラーが発生
    - \_\_init\_\_.pyの1行目の「from .dlib import *」がお気に召さないご様子
    
` >>> import dlib
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/Users/fmizushima/python/py3/lib/python3.6/site-packages/dlib-19.6.0-py3.6-macosx-10.12-x86_64.egg/dlib/__init__.py", line 1, in <module>
    from .dlib import *
ImportError: dlopen(/Users/fmizushima/python/py3/lib/python3.6/site-packages/dlib-19.6.0-py3.6-macosx-10.12-x86_64.egg/dlib/dlib.so, 2): Symbol not found: _PyClass_Type
  Referenced from: /usr/local/opt/boost-python/lib/libboost_python-mt.dylib
  Expected in: flat namespace
 in /usr/local/opt/boost-python/lib/libboost_python-mt.dylib 
`

#Python3.6でDlibを使う（エラー解決）

\_\_init\_\_.pyの1行目の「from .dlib import *」を「from dlib import *」に修正するとimportできた。
ディレクトリ構成が変わったとかが原因だろうか？
修正忘れてたのかしら？と思う今日この頃。
細かいことは気にしないでGo!
FFmpegを使ってradikoを録音する方法

ffmpeg を使えばradikoをmp3ファイルに録音することができる

- この記事はmacOS想定
- ffmpegさえ利用可能にすればWindowsやLinuxでも使えるのでは

# Homebrew のインストール
必須ではないが便利

```:macOS
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

# ffmpeg のインストール

```:macOS
brew instal ffmpeg
```

## インストールできたかの確認
```:macOS
ffmpeg -version
```

```
ffmpeg version N.N Copyright (c) 2000-YYYY the FFmpeg developers
```


# 録音したファイルを置く専用フォルダを用意して移動
```:macOS
$ cd Desktop
$ mkdir radio
$ cd radio
```

# radikoを録音する

## デベロッパーツールを開き、Networkタブへ移動する
表示 > 開発 / 管理 > デベロッパー ツール
"Network"タブを表示する

## 録音したいradikoをChromeブラウザで開く
```
http://radiko.jp/#!/live/hoge
```

## m3u8のURLを取得する

### Networkコンソールにchunklistを表示する
フィルターに```m3u8```を指定すると便利

### m3u8を右クリックしてcURLを取得する
Copy > Copy as cURL

<img width="649" alt="fig.png" src="https://qiita-image-store.s3.amazonaws.com/0/207089/187dc883-24b7-7e9c-f8cd-8028d272cf6d.png">


### ffmpeg コマンドラインの構築に必要な情報を抽出する
コピーしたcURLは以下のようになる

```
curl 'http://f-radiko.smartstream.ne.jp/hoge/_definst_/simul-stream.stream/chunklist_hogehoge.m3u8' -H 'Origin: http://radiko.jp' -H 'Accept-Encoding: gzip, deflate' -H 'Accept-Language: ja,en-US;q=0.8,en;q=0.6' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36' -H 'Accept: */*' -H 'X-Radiko-AuthToken: hogehogehogehoge' -H 'Referer: http://radiko.jp/' -H 'Connection: keep-alive' --compressed
```

### ffmpeg コマンドラインを構築する
上記の情報を以下のように再構築する

```
ffmpeg \
-headers 'Origin: http://radiko.jp' \
-headers 'Accept-Encoding: gzip, deflate' \
-headers 'Accept-Language: ja,en-US;q=0.8,en;q=0.6' \
-user_agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36" \
-headers 'Accept: */*' \
-headers 'X-Radiko-AuthToken: hogehogehogehoge' \
-headers 'Referer: http://radiko.jp/' \
-headers 'Connection: keep-alive' \
-i "http://f-radiko.smartstream.ne.jp/hoge/_definst_/simul-stream.stream/chunklist_hogehoge.m3u8" \
-vn \
radio.mp3
```
実際は各々の環境で異なる箇所のみ変更すれば良い。具体的には
- user_agent
- X-Radiko-AuthToken
- m3u8のURL


## 録音する
macOSのターミナルを開き、上記コマンドを実行する。
停止するには ```q``` を押す

# 確認する
フォルダ内を覗くと
``` radio.mp3```
ができているはず

# 高度な操作
[ffmpeg Documentation] (https://ffmpeg.org/ffmpeg.html#Options)
にたくさんオプションが説明されている
jetson TX2へOpenCV2.4.13のインストール

# Installing OpenCV2.4.13 for jetson TX2

### 以下の記事を参考にする。
* [Jetson/Installing OpenCV](http://elinux.org/Jetson/Installing_OpenCV)

~~~=
sudo apt-get -y install build-essential make cmake cmake-curses-gui g++
sudo apt-get -y install libavformat-dev libavutil-dev libswscale-dev
sudo apt-get -y install libv4l-dev
sudo apt-get -y install libeigen3-dev
sudo apt-get -y install libglew1.6-dev
sudo apt-get -y install libgtk2.0-dev
wget --no-check-certificate http://downloads.sourceforge.net/project/opencvlibrary/opencv-unix/2.4.13/opencv-2.4.13.zip
unzip opencv-2.4.13.zip
cd opencv-2.4.13
mkdir build
cd build
cmake -DWITH_CUDA=ON -DCUDA_ARCH_BIN="6.2" -DCUDA_ARCH_PTX="" -DENABLE_FAST_MATH=1 -DCUDA_FAST_MATH=1 -DWITH_CUBLAS=1 -DBUILD_TESTS=OFF -DBUILD_PERF_TESTS=OFF ..
sudo make -j 4 install
~~~

### パスを.bashrcに追加

~~~=
echo "# Use OpenCV and other custom-built libraries." >> ~/.bashrc
echo "export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/lib/" >> ~/.bashrc
source ~/.bashrc
~~~
GitHub Pagesで静的サイトを簡単に作る

本記事は以下に引っ越しました。
今後Qiita上での更新はありません。
https://zenn.dev/ririli47/articles/a461cf7fb9ec1b1ddf4c

--------------------------

# この記事のターゲット
・静的サイト作りたいけどサーバーとかどうしよう
・GitHubで作れるらしいけどどうやるんだろう

# GitHub Pagesって？
GitHubが提供している静的サイトのホスティングサービス。
HTML,CSS,JSを利用した静的サイトを簡単に公開することができる。
大きく分けてユーザーサイトとプロジェクトサイトの二つがある。
当然GitHubアカウントが必要。

# ユーザーサイトの作り方
非常に簡単で、「__username__.github.io」という名前のリポジトリを作るだけ。（usernameは自分のgithubアカウント名）
このリポジトリに配置したファイルがweb上に公開される。
適当にindex.htmlを用意して以下のURLにアクセス。

```
https://username.github.io/
```
正しく表示されればあとは好きにサイトを作って行くだけ。

# プロジェクトサイトの作り方
プロジェクトサイトの場合は二通り方法がある。（他にあればご指摘ください）

### 方法１ 「gh-pages」というブランチを用意する
このブランチを切ることで勝手にプロジェクトサイトが用意される。
プロジェクトサイトのURLは以下の通り。

```
https://username.github.io/repository/
```

### 方法2 githubのリポジトリのページでgithub-pagesの設定をする
各リポジトリのsettingsにgithub-pagesに関する設定がある。
デフォルトではsourceがnoneになっているはず。
これを既存のブランチ（masterでも可）に設定することでプロジェクトサイトが用意される。
この場合のURLも方法1と同じ。


# まとめ
とても簡単。
お金もかからないのでお財布にも優しく静的サイトを公開することができます。
プロジェクトサイトなんかはwikiみたいな使い方ができるんじゃないでしょうか。（デフォの機能であるけど）
あとはそのプロジェクトの紹介ページとか。
使い道はいろいろですね。

# 蛇足
拙作ですが、私のユーザーサイトを置いていきます。
簡単なポートフォリオを作りました。
デザインて難しいですね...

(https://ririli47.github.io/)
[C++] Windows環境でmt19937の初期化にrandom_deviceを使うと実行毎に同じ乱数列が生成される問題

# 環境
* Windows 10
    * Git Bash

``` bash
$ bash --version
GNU bash, version 4.3.42(5)-release (x86_64-pc-msys)
Copyright (C) 2013 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>

This is free software; you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

```

※コメントをいただいたので追記
今回の問題はWindowsが悪いのではなく、mingwのlibstdc++の実装が原因とのこと
（詳細はコメント欄参照）

# 問題
ある日以下のような手順とC++コードで、[0,2π]の一様乱数を生成しようとした

* `std::random_device`で非決定的な乱数を生成
* `mt19937`の初期シードに`random_device`で生成した値を入れる
* **実行毎に別の乱数が生成**

``` C++
	// この乱数生成器が実行毎に別の乱数を生成するかは環境依存である
	// Windows環境では実行毎に同じ値を出すので注意
	// Ubuntuでは実行毎に別の乱数を生成した
	std::random_device rnd;
	std::mt19937 mt(rnd());

	std::uniform_real_distribution<double> theta(0.0, 2*M_PI);
	for(int i = 0; i < 10; i++) std::cout << theta(mt) << std::endl;
```

以下のようにコンパイルし
` g++ kadai3.cpp -o kadai3 -std=gnu++11`

実行してみたところ以下のようになった
![image.png](https://qiita-image-store.s3.amazonaws.com/0/201242/dec0c9fe-6706-fe61-43db-e8e5950b780a.png)

**実行毎に同じ乱数返すじゃん!**

# 原因
おかしいと思い、調べてみたところ以下のページに
https://cpprefjp.github.io/reference/random/random_device.html

>Windows版のGCC (MinGW, libstdc++) では、random_deviceクラスは擬似乱数生成器であるmt19937で実装されている。その環境のデフォルトでは固定の乱数列が生成されてしまうので注意すること。コンストラクタの引数としてシード値を文字列化して渡せばmt19937のシードとして扱われるが、非決定論的な乱数として振る舞わないことは変わらない。この環境ではrandom_deviceの使用は推奨しない

>代替

>* クロスプラットフォーム
  * CPU が提供する RDRAND, RDSEED 命令
* Windows
  * rand_s (CryptGenRandom のラッパー)
  * RtlGenRandom 関数 (替わりに CryptGenRandom を使用することを推奨)
  * CryptGenRandom 関数

と書いてありました(詳しくはリンク先を参照)
つまりWindows環境では`random_device`が非決定的乱数として実行されないので、上記のコードで「実行毎に別の乱数列」を生成できない模様

# 検証
## コマンドプロンプトで実行
コマンドプロンプトのg++(バージョンは以下）でコンパイルし実行しても同じ結果になりました(実行結果は同じなので割愛)

```
>g++ --version
g++ (tdm64-1) 5.1.0
Copyright (C) 2015 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
```

## VirtualBoxのUbuntuで実行
同じWindows環境でVirtualBoxを起動しUbuntu16.04で実行したところ

``` bash
$ g++ --version
g++ (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
Copyright (C) 2015 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201242/a8dcbbc8-163f-51ec-ac79-eb38d952a4c1.png)

と実行毎に別の乱数列が生成とのことで解決です

---

中々目的のページが見つからなくて時間かかったので、誰かのお役に立てればうれしいです
覚え書き vue-cliセットアップ　単一ファイルコンポーネント内でscssが書けるとこまで

４〜5年前の作業環境でずっと素のhtml+css+jquery書いてた人が
最近のフロントエンドへ飛び込んでいく記録です。
いわば自分用のまとめ。

megayaさんの記事をだいぶ参考にしました。ありがとう！


npm + Node.jsが入ってるのは前提。

```ruby:まずはterminalでvue-cliの準備
$ npm install --global vue-cli
$ vue init webpack your-project /* your-projectディレクトリを作成してセットアップ */
```

すると下みたいにいろいろ出るので基本Enter、必要なものはいれましょう。
ESLintはあるとべんり。
後半のはよく知らないので入れてません。

```ruby:terminal
? Project name your-project
? Project description A Vue.js project
? Author ***
? Vue build standalone
? Install vue-router? Y/n
? Use ESLint to lint your code? Y/n
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Y/n
? Setup e2e tests with Nightwatch? Y/n
```


あとは普通に作成したディレクトリに移動して

```ruby:terminal
$ cd your-project
$ npm install
$ npm run dev
```

最後ので開発用サーバーが起動、ブラウザで開きます。

```ruby:初期URL
http://localhost:8080/#/
```



これでVueを書く準備自体はオッケー。
your-project/src/main.jsやApp.vueを編集すると
ホットリロードしてくれるぞ！やったね！

で、scssも導入しましょう。
ctrl+cでいったんサーバー終了、下のを叩きます。

```ruby:--save-devはグローバルじゃなく現在のディレクトリにインストールの意
$ npm install sass-loader node-sass --save-dev
```

以上のloaderなどを導入してApp.vueのstyleタグに
lang="scss"をつけると自動でcssへコンパイルしてくれます。

```ruby:src/App.vueの下のほう
<style lang="scss" scoped>
```

ついでにscopedを付けるとApp.vueの中だけで適用されるcssになるぞ！
便利ィ！

ごりごりスクリプトかいて

```ruby:terminal
$ npm run build
```

すると、

```ruby:ファイルパス
your-project/dist/
```

の中にコンパイルされたjs + cssとindex.htmlができるぞ。
index.htmlのjsやcssへのパスはルート相対パスになってるからそこは注意だ。


わかったことがあれば適宜追記します。
続、気象庁のデータを読み出し、データを整形し、matplotlibで表示する。

# 気象庁のデータを読み出し、データを整形し、matplotlibで表示する。

気象庁のデータを読みだし、データを整形するまでは前回の記事に書いた通りです。
[前回の記事](https://qiita.com/ti-ginkgo/items/881ebf7d8ea0776d83ab)

```python
# ave
temperature_ave.iloc[:, 0]
for i in range(0, 12):
    plt.plot(temperature_ave.iloc[:, i], '-o', label=i+1, color=cm.hsv(i/12.0))

plt.xlabel("year")
plt.ylabel("temperature(ave)")
plt.grid(True)
plt.legend(bbox_to_anchor=(1.05, 1), loc='upper left', borderaxespad=0.)
plt.show
```

<img width="477" alt="スクリーンショット 2017-10-25 15.23.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/207924/77005cbf-9e26-b64f-91fa-2db11446139e.png">

表示すると上記のようになります。
plt.grid(True)によりグリッド表示をします。
plt.legend(bbox_to_anchor=(1.05, 1), loc='upper left', borderaxespad=0.)により凡例を外部に表示します。
plt.plot('-o', color=cm.hsv(i/12.0))によりグラフのカラーを設定し、グラフの種類を決定します。

これにより上記のようなグラフが完成します。

# 参考サイト
https://qiita.com/ti-ginkgo/items/881ebf7d8ea0776d83ab
https://matplotlib.org/users/legend_guide.html
いまさらSVNサーバー建立メモ

# 前提

* CentOS7
* Windows (TortoiseSVN：fileプロトコル) から Linux (svnserve：svnプロトコル) へ

# 手順

* 指定フォルダにリポジトリ作成
    * svnadmin create /hoge/hoge/リポジトリ名


* 現行リポジトリのダンプファイル取得
    * svnadmin dump "c:\hoge\リポジトリ名" > c:\work\hoge.dump


* ダンプファイルの移行先へのロード
    * svnadmin load /hoge/hoge/リポジトリ名 < /hoge/dump/hoge.dump  
※リモートデスクトップ接続経由のコピーは、サイズが大きいとファイルが壊れる場合がある。FTPが安心。


* ポート開放
svn://プロトコルでアクセスするため、TCPのポート3690を開ける
    * firewall-cmd --permanent --add-port=3690/tcp


* svnserveのサービス自動起動設定
    * systemctl enable svnserve.service


* svnserveのサービス起動
    * systemctl start svnserve.service


* サーバ上でのアクセス確認
    * svn list svn://xxx.xxx.xxx.xxx/省略パス以降のリポジトリ格納フォルダパス/リポジトリ名


* リポジトリのアクセス権設定
匿名ユーザ(Redmine等)はread権
各ユーザーはwrite権
    * 設定ファイル
        * hoge/hoge/リポジトリ名/conf/svnserve.conf
    * 設定  
anon-access = read  
auth-access = write  
password-db = passwd  


* リポジトリのユーザー設定
    * 設定ファイル
        * hoge/hoge/リポジトリ名/conf/passwd
    * 設定(例)  
username = パスワード  
※=以降無しでパスワード無しにもできる

* リポジトリのチェックアウト
クライアント側で以下のようにurl指定
    * svn://xxx.xxx.xxx.xxx/hoge/リポジトリ名
Angularで<td>の高さを揃える

Angularでtable,tr,td,を使ったところ、高さがずれてしまったので修正しました。

#〇事象##

<img width="550" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/cf074b80-c6be-4ee4-fa24-66f89c5d42f6.png">

「荷主」「項目」が下に凹んでいます。

<img width="139" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/704b6ce9-254d-0e65-8364-51742e73f7ca.png">

small-classが「発生日」
middle-classが「荷主」「項目」
tiny-classがその他のカラムです

##原因①##
・単位がpxなので端末の解像度に依存する
映す端末次第でズレが大きくなります
###(対策)###
・単位をemに書き換えました
emは対象クラスの大文字と同じ大きさになるので、端末依存ではなくなります

##原因②##
・`md-select`を使うと対象クラスのフォントが大きくなる

Angular Materialの`md-select`を使うと他部品よりもフォントが大きくなることが分かりました。文句を言っている人たちもチラホラ。

横幅に合わせて動的に縦幅も変わる為、不一致が起きていました

https://github.com/angular/material2/issues/3322

<img width="504" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/da1534e1-7b19-293c-6182-eea012c6b539.png">

「荷主」「項目」だけがtrに対して隙間なくピッチリtdが入っています。他部品は上下に20ずつくらい余剰がありました

(対策)
widhtの値を指定して固定してしまいます(表示する文字の長さによってはオススメできません)

他部品の底辺を`padding`を使い` md-select` の高さに他部品を無理やり合わせました

<img width="148" alt="4.png" src="https://qiita-image-store.s3.amazonaws.com/0/201155/b8b8cce5-2676-cb7f-2fa6-c1d6c671d4f6.png">

結果、ほぼまっすぐのtrが出来ました。見た目は大切ですね。

本当は` md-select`のフォントサイズを変更する事で調整したかったのですが、どなたか方法が分かればご教授ください。
JavaScript - Setup Airbnb ESLint for React

```
# yarn add -D eslint babel-eslint
```

```
# yarn add -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
```

```
# eslint.js --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
```

```json:.eslintrc.json
{
    ...
    "extends": "airbnb",
    ...
    "parser": "babel-eslint",
    ...
    "rules": {
        ...
        "strict": 0
        ...
    }
}
```

https://github.com/babel/babel-eslint
https://github.com/airbnb/javascript
https://denny.qollie.com/2016/07/11/eslint-fxcking-setup/
http://seans.tw/2016/eslint-with-airbnb/
http://le0zh.github.io/2016/06/21/eslint+in+react+babel+webpack/
VuexFireを図解

# 前提知識
- Vue.js
- Vuex
- Firebase

# 図解
![VuexFire.png](https://qiita-image-store.s3.amazonaws.com/0/38275/5ba3f209-299b-1977-f22d-a130b7af7417.png)

## 解説
1.コンポーネント生成時にDatabase referenceをstateにバインドしておく
2.アクションとしてrefを使ってdbを操作する
3.バインドによってstateの値がdbの値で同期される

# 参考
https://github.com/posva/vuexfire