OmniAICreator/Qiita-1.07M huggingface dataset:
Rails4.0でMySQL5.7を使ってrake db:createするとエラーが出た

# 概要
rails4.0でMySQL5.7.3以上と繋いで、`db:create`した場合、

```
Mysql2::Error: All parts of a PRIMARY KEY must be NOT NULL; 
```
のエラーが出るため、その解決策を提示する。

# 実行環境
|        |   バージョン  |   Extra     |
|:-----------------:|:------------------:|:------------------:|
|CentOS|6.9|VirtualBox経由でssh接続|
| Rails             |     4.0.13          | [dot installのRailsの教材](http://dotinstall.com/lessons/basic_rails_v2)がRails4.0を使っていたためv4.0の最新版にした               |
| MySQL           |    5.7.18         |              |
|     Ruby         |            2.3.1 |        こちらも教材に合わせた。rbenvで管理。        |
| Bundler                |         1.14.6        |             |
| mysql2                |         0.4.6        |    バージョン指定せず、最新版。         |

# エラー詳細
上記の環境で、

```
$ rails generate scaffold User nickname:string age:integer
```
として、

```
$ rake db:migrate
```
すると、

```
== 20170514132649 CreateUsers: migrating ======================================
-- create_table(:users)
rake aborted!
StandardError: An error has occurred, all later migrations canceled:

Mysql2::Error: All parts of a PRIMARY KEY must be NOT NULL; if you need NULL in a key, use UNIQUE instead: CREATE TABLE `users` (`id` int(11) DEFAULT NULL auto_increment PRIMARY KEY, `nickname` varchar(255), `age` int(11), `created_at` datetime, `updated_at` datetime) ENGINE=InnoDB

/home/vagrant/myapp/db/migrate/20170514132649_create_users.rb:3:in `change'
ActiveRecord::StatementInvalid: Mysql2::Error: All parts of a PRIMARY KEY must be NOT NULL; if you need NULL in a key, use UNIQUE instead: CREATE TABLE `users` (`id` int(11) DEFAULT NULL auto_increment PRIMARY KEY, `nickname` varchar(255), `age` int(11), `created_at` datetime, `updated_at` datetime) ENGINE=InnoDB
```
と弾かれる。

#原因
ActiveRecord周りのバグ。

`/usr/local/rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/activerecord-4.0.13/lib/active_record/connection_adapters/abstract_mysql_adapter.rb`を見ると、

```rb:abstract_mysql_adapter.rb(excerpt)
    
139       NATIVE_DATABASE_TYPES = {
140         :primary_key => "int(11) DEFAULT NULL auto_increment     PRIMARY KEY”,

```
と、primary keyのデフォルトがNULLになっている。

https://dev.mysql.com/doc/relnotes/mysql/5.7/en/news-5-7-3.html

上記の公式サイトによると、
古いバージョンのMySQL(5.7.2以下？）はこのように明示的にNULLを指定すれば、エラー無く通ったが、MySQL5.7.3以上はNULLの指定をエラーで弾く、とのこと。


[MySQL 5.7.3 m13 does not allow `DEFAULT NULL` for primary key #13203]
(https://github.com/rails/rails/blob/master/activerecord/lib/active_record/connection_adapters/abstract_mysql_adapter.rb)
rails4.0のgithubのissueに立てられていて、既にcloseされていた。

rails4.1はこの問題が修正されているとのこと。
（下の対策にあるように'DEFAULT NULL’を削除したと思う）

#解決策
下記のいずれかをすればよい。
1. 上記の`abstract_mysql_adapter.rb`内の`DEFAULT NULL`という文字列を削除する
2. MySQLのバージョンを5.7.2以下にダウングレードする
3. Railsのバージョンを4.1以上にする

筆者は1.を実行し、

```
$ rake db:migrate
== 20170514132649 CreateUsers: migrating ======================================
-- create_table(:users)
   -> 0.0224s
== 20170514132649 CreateUsers: migrated (0.0224s) =============================
```
と、正しくDBが作成された。

#参考にした記事
[mysql 5.7でdb:createするとエラー　-Qiita](http://qiita.com/the40san/items/b9130a9bdfb41c023d09)
Windows 10 でPython3.6でopencv3インストール

環境：Windows　10
　　　Python　3.6
　　　conda version : 4.3.14
Date: 2017/05/15

以下のようにopencv3をインストールするとしたら：

```bash
$ conda install -c menpo opencv3
  Fetching package metadata ...........
  Solving package specifications: .
  UnsatisfiableError: The following specifications were found to be in conflict:
    - opencv3 -> python 2.7* -> openssl 1.0.1*
    - python 3.6*
 Use "conda info <package>" to see the dependencies for each package.
```
このようなエラーが出ってきた、まだ condaの一般チャンネルでPython3.6に最新のopencv3が対応できてないようです。
それで、conda-forgeチャンネルを追加する必要があります（or自分でコンパイルするか）。

#### #1
```bash
$　conda config --add channels conda-forge
```
#### #2
```bash
$　conda install opencv
```
これでできるはずだ！
python3x: generator.send(value)って何？

>_When the caller executes `R = m.send(a)`, it puts the object `a` into the generator's input slot, transfers control to the generator, and waits for a response. The generator receives object `a` as the result of `X = yield i`, and runs until it hits another yield expression e.g. `Y = yield j`. Then it puts `j` into its output slot, transfers control back to the caller, and waits until it gets resumed again. The caller receives j as the result of `R = m.send(a)`, and runs until it hits another `S = m.send(b)` statement, and so on._

>_`R = next(m)` is just the same as `R = m.send(None)`; it's putting None into the generator's input slot, so if the generator checks the result of `X = yield i` then `X` will be `None`._

```coroutine.py
def coroutine():
    for i in range(1, 10):
        print("From generator {}".format((yield i)))
>>> c = coroutine()
>>> c.send(None) # same as next(c)
>>> try:
        while True:
            print("From user {}".format(c.send(1)))
    except StopIteration: pass

From generator 1
From user 2
From generator 1
From user 3
From generator 1
From user 4
...
```

`other = yield foo`は「`foo`を`yield`して__返ってきたvalue__を`other`に渡してください」というイメージ。つまり`yield`してからvalueを`other`に渡すまでに若干のラグがある（ことが多い）。

`yield`も`send`も一度処理を行うと（イメージ的には）そこで一時停止してvalueを受け取るまで次に進まない。`print(yield i)`は`yield`した`i`を表示するのではなく__`yield`した後に返ってきたvalueを表示__する。

```gen.py
def foo():
    while True:
        x = yield
        print(x)

>>> gen = foo()
>>> gen.send(None) #runs up to yield statement
>>> print(gen.send("foo"))
foo
None #since nothing is yielded back inside of foo func.

def foo():
    while True:
        x = yield
        print(x)
        yield x

>>> gen = foo()
>>> gen.send(None) #runs up to yield statement
>>> print(gen.send("foo"))
foo
foo
```

1. `c.send(None)`によりcoroutine関数内のiterationが始まる(i = 1)。`print("From generator {}".format((yield i)))`により`1`を返す。ここでストップ。※まだ`i`のvalueが返ってきてないのでプリントはしない。`i`のvalue受取待ち状態。（上で示したラグ）
2. `while`文へ移動。`c`にvalue`1`を送る。value受取待ち状態。
3. `c`関数内へ移動。`while`文より送られてきたvalue`1`を受け取り__そのvalueを__プリントする。（=From generator 1）
4. `c`関数内のiterationを続行。`1`だった`i`を`2`にして`yield`する。ここでストップ。
5. `while`文へ移動（ステップ2よりvalue受取待ち状態）。関数`c`より送られてきた`i=2`を受取プリントする（From user 2）。
6. ステップ2, 3, 4...と`i`が`9`になるまで繰り返す。`9`になると`None`を`yield`してiterationが終了する。

上でも何度か示したが`generator.send(None)`と`next(generator)`は同じ役割を持つ。最初の`yield`文にたどり着くための橋渡しと考えて良い。

#参考にしたリンク
- <a href="https://stackoverflow.com/questions/12637768/python-3-send-method-of-generators" target="_blank">Python 3: send method of generators</a>
- <a href="https://stackoverflow.com/questions/19302530/python-generator-send-function-purpose" target="_blank">python generator “send” function purpose?</a>
git mergeとrebaseの違い


gitには分岐した２つのブランチを統合する方法としてmergeとrebaseという２種類のコマンドが用意されています。この時、mergeとrebaseにはどんな違いがあるのか調べてみました。

#mergeの場合
`git merge <branch>`
・指定したブランチでの変更を現在のブランチに統合。
・新たにマージコミットを作って指定したブランチでの変更を合流させるイメージ。
・指定したブランチのコミットハッシュ値は改変されない。
#rebaseの場合
`git rebase <branch>`
・指定したブランチの上に現在いるブランチの変更履歴をくっつける。
・分岐していたブランチが一本になりログが見やすくなる。
・__rebaseしたブランチのコミットハッシュ値が改変される__




rebaseでは、リベースするブランチのコミットのハッシュ値が変更される点に注意が必要です。

#おわりに
履歴をどのように保ちたいのかを意識することによって、ブランチを統合する際にmergeとrebaseどちらを使うべきか判断出来ると思います。両者のコマンドの違いを理解し、状況に応じてうまく使い分けていきましょう。
JavaScriptで0.1を10回積み重ねたけど、なんと合計は「1」じゃない！

#コードレビューで見抜けなかったバグ
先日とあるお仕事で、JavaScriptのコードを書いておりました。

そして、確かに合っているはずなのに、**な・ぜ・か！**こちらの想定通りに、
プログラムが動かないことが発生しました。

##「0.1」が曲者だった
以下のコードは、今回の現象を再現するために書いた、サンプルコードです。
**0.1を10回足すだけ**の、シンプルなプログラムになっております。

```javascript:sample1.js
var total = 0;
for (var i=0; i<10; i++){
    total += 0.1;
    console.log("total=" + total);
}
```

##その結果がこちら

```:Console
total=0.1
total=0.2
total=0.30000000000000004
total=0.4
total=0.5
total=0.6
total=0.7
total=0.7999999999999999
total=0.8999999999999999
total=0.9999999999999999
```
「0.3」が「0.30000000000000004」になっています。
このまま「0.40000000000000004」になると思いきや、普通に「0.4」に戻っています。

そしてまた、「0.7」の次が「0.7999999999999999」になったりと、
なかなか暴れているようですね。。。

##ひょっとすると

こういうことですよね。

```javascript:sample2.js
var total = 0;
for (var i=0; i<10; i++){
    total += 0.1;
    console.log("total=" + total);
}

if (total == 1) {
    console.log("結果：totalは1だよ");
} else {
    console.log("結果：totalは1じゃないよ");
}

```

```:Console
total=0.1
total=0.2
total=0.30000000000000004
total=0.4
total=0.5
total=0.6
total=0.7
total=0.7999999999999999
total=0.8999999999999999
total=0.9999999999999999
結果：totalは1じゃないよ
```

あちゃー 
やっぱりそうなりますよね～ (>_<)

##まとめ

ちょっと調べてみたのですが、どうやらこれは、<a href="https://ja.wikipedia.org/wiki/IEEE_754" target="_blank">IEEE 754</a>という仕様だそうですね！
仕様ならしようがない。

ディレクター：「計算結果がおかしいです。直してください。」
プログラマー：「仕様です。」

ちゃんちゃん (^_^;
cssのimportantぐあい

!importantは無限にimportantになっちゃってどうしようもなくなってしまう。
そのimportantよりも少しだけimportantなimportantを表現することができない。
世の中importantなものがたくさんあるので、importantの強弱具合をうまく表現したい。

# どのスタイルが適用されるのか？
class指定よりid指定が強いというのは知っていましたが、「CSS 個別性」というのを初めて知りました。
idは1個100点でclassは1個10点、合計点で判定だそうで、
じゃあ、class11個つけたらidに勝てる？と思ったら勝てない。

http://zng.info/specs/css3-selectors.html#specificity

![image](https://qiita-image-store.s3.amazonaws.com/0/16626/74a5afa1-aea2-346d-dd43-9bb67d1fc17d.png)

(基数が大きい数値システムで)だそうです。


# &lt;body id="important" class="important"&gt;
bodyじゃなくてもimportantじゃなくてもいいんだけど、一番上の親要素のidとclassを連打してimportant具合を表現できそうです。

https://codepen.io/anon/pen/vmrEVp


```html
<body id="important" class="important">
  <div class="x1 x2 x3">
    A
  </div>

  <div id="yyy" class="zzz">
    B
  </div>

  <a class="qqq">C</a>

  <div id="foo" class="ppp">
    <div id="bar" class="ppp">
      <div id="baz" class="ppp">
        D
      </div>
    </div>
  </div>
</body>
```

```css
div{ margin: 1em; }

/* class5個で50点 */
.important.important .x1.x2.x3{ background-color: red; }

/* class4個で40点 */
.x1.x1.x1.x1{ background-color: green; }

/* class3個で30点 */
.x1.x2.x3{ background-color: blue; }



/* id2個で200点 */
#important #yyy{ background-color: red; }

/* id1個+class2個で120点 */
.important.important #yyy{ background-color: green; }

/* id1個+class1個で110点 */
#yyy.zzz{ background-color: blue; }



/* class2個 + 要素1個 = 21点 */
.important.important a{ background-color: red; }

/* class1個 + 要素1個 = 11点 */
a.qqq{ background-color: blue; }



/* id4個 = 400点*/
#important#important#important #baz{
  background-color: red;
}

/* id3個 + class3個 + 要素3個 = 333点 */
div#foo.ppp div#bar.ppp div#baz.ppp{
  background-color: blue;
}
```

# !important=∞点 #important=100点 .important=10点
* 困ったらとりあえずimportantをつけて手っ取り早くごまかすことができる。
* !importantがついてて上書きできない！お手上げ状態！！を回避。#importantか.importantを連打すれば上書きできる。
Rubyで正規表現でmatch！！

# 複数の候補での前方一致検索の作り方！
### Usersテーブルから、頭文字で任意のユーザーを検索する方法。

- フォームに複数入力された値を、それぞれ頭文字に持つ人を検索するコードを解説します。
- まずソースを掲げ、その後解説します！

```hoge.rb
input = "s t k"
inputs = input.split("").reject(&:blank?)
new_inputs = inputs.map {|ele| /^#{ele}/}
word = new_inputs.join("|")
reg = Regexp.new(word)
users = User.all
names = []
users.each do |user|
  name = user.name
  if name.match(reg)
  names << name
  end
end
```

- 部分に分け解説します。

```
input = "s t k"
```
- 今、誰かがsとtとkをスペースで区切ってフォームに入力しました。
- この人はをsとtとkを頭文字に持つ人を検索しようとしています。
- その情報を取得し、inputに代入しました。

```
inputs = input.split("").reject(&:blank?)
```
- .split("")でinputは["s"," ","t"," ","k"]という配列に分割されます。
- .reject(&:blank?)で上の配列から" "（スペース）を除きます。
- つまり、inputs = ["s","t","k"]という風になります。

```
new_inputs = inputs.map {|ele| /^#{ele}/}
```
- ["s","t","k"]の要素それぞれに^を足して、前方一致の形式にします。
- これで、new_inputs =["^s","^t","^k"]という風になります。

```
word = new_inputs.join("|")
```
- .join("|")で要素を結合します。
- |　で区切ることで、この後matchを使うときに^sか^kか^tのどれかとmatchすれば、trueが返ってくるようになります。

```
reg = Regexp.new(word)
```
- 文字列を加工しできたwordを使い、正規表現オブジェクトを生成します。
- matchの引数には、正規表現オブジェクトしかなれないためです。


-- 残りの処理は、usersテーブルから、全レコードを取得してきて、それをeachで回して、条件に合致するものを、抽出しているという形になります。
axios で、パラメーターを form-data として送信してAPI Gatewayに飛ばす

かなりはまってしまった。

# 問題

モダンなJSのhttpリクエストでおなじみの`axios`や`superagent`は、
データ送信の際にパラメーターを「Payload」というものに入れて送信している。

そっちの方が効率が良いのだそう。

- [AWS API GatewayでContent-Type:application/x-www-form-urlencoded のPOSTデータを受け取り JSONに変換する - Qiita](http://qiita.com/durosasaki/items/83af014aa85a0448770e)

これを利用して、axiosから AWS の API Gateway に送信しようとして、はまった。

API Gatewayでは、`body`にJsonを入れる形式、つまり

```bash
curl -H 'Content-Type: application/x-www-form-urlencoded' \
--data '{"name": "kazuya", "email": "kazuya@kazuya.com"}`' API_ENDPOINT
```

などとして送信しないとエラーになってしまうためだ。

# 解決策

axios でこれを実現するには、単純にこれで良い。

```js
axios.post(API_ENDPOINT, JSON.stringify({
  name: 'kazuya',
  email: 'kazuya@kazuya.com'
}))
```

二個目の引数に文字列を入れてあげれば勝手になったのか・・・・
下記のStack Overflowで知った。

- [jquery - axios post data format - Stack Overflow](http://stackoverflow.com/questions/38439054/axios-post-data-format)
Material-UIでGridレイアウトを試す

# Material-UIにはグリッドレイアウトが無い？
Material-UIは2017年5月の現時点(v0.18)ではグリッドレイアウトの機能を提供していません。これは、Material-UIが純粋なコンポーネントライブラリを指向しているためのようです。
ですが、やっぱりそれにはこだわらずに便利なグリッドレイアウトを提供する方針になったようで、アルファブランチでは実装されています。
アルファ版の[公式ページ](https://material-ui-1dab0.firebaseapp.com)ではレイアウトのセクションにGridについて記載されています。

# 後方互換なし
Material-UIを使っている既存のReactアプリにグリッドレイアウトを適用するため、Materi-UIアルファ版をインストールしてみます。

```shell-session
$ # インストール済みのパッケージを削除
$ npm uninstall -S material-ui
$ # α版をインストール
$ npm install -S material-ui@next
```

私の既存のプロジェクトではTypeScriptとWebpackを使っているのでビルドします。すると色々エラーがでます。どうやらそのままでは使えないようです。FlatButtonが見つからない、とかTabに必要なプロパティがないとかいわれました。

```
$ webpack
83:44-54 "export 'FlatButton' was not found in 'material-ui'
...

```

# 動かすためにやったこと
[公式ページの例](https://material-ui-1dab0.firebaseapp.com/component-demos/)をみながらエラーに基づいて書き方が変わっているところを修正していきます。もとのアプリが簡単なものだったため、FlatButtonとTabを修正するだけでした。FlatButtonはButtonという名前に変わっていたり、TabではonChange属性が必須になっていたりしてました。

が、改めてビルドするとまた怒られてしまいます。

```
$ webpack
 Module ''material-ui/Button'' has no exported member 'Button'
```

TypeScriptの型定義(@types/ui-material)が古いままなので、もちろんButtonなんてありません。`npm install @types/material-ui@next`とかしても型はないようです。探しても見つからないので仕方ないので型は利用しないことにします。

```
npm uninstall --save-dev @types/material-ui
```

これで無事にビルドが通るようになりました。

# Gridレイアウト

BootstrapのGridレイアウトと同じ感覚でつかえます。`<Grid container>`を配置するとコンテナが縦に積み上がります。その中を列に区切るために複数の`<Grid item>`を配置していきます。

## 幅指定
`<Grid item>`の幅は相対指定で1〜12で指定します(12で幅100%)。例えばこんなかんじで指定します。

```html
<Grid container>
    <Grid item xs={3}></Grid>
    <Grid item xs={6}></Grid>
    <Grid item xs={3}></Grid>
</Grid>
```

```
 ┌───┐┌──────┐┌───┐
 │ 3 ││  6   ││ 3 │
 └───┘└──────┘└───┘
```

## レスポンシブ

`<Grid item>`の幅は画面サイズに応じてレスポンシブに変えることができます。上記のxs属性に加えて、画面サイズに応じた属性(sm, md, lg, xl)で幅を指定します。Bootstrapのブレイクポイントとは値が異なるので要注意です。各ブレイクポイントの値は以下になります。

 * xs, 全て
 * sm, small: 600dp〜
 * md, medium: 960dp〜
 * lg, large: 1280dp〜
 * xl, xlarge: 1920dp〜

```html
<Grid>
    <Grid item xs={1} md={3} lg={6}></Grid>
</Grid>
```

## センタリングとか

横方向の中央寄せなどは`<Grid container>`に`justify属性`にて指定します。指定可能な属性の値は以下の通りです。

 * flex-start: 左寄せ
 * center: 中央寄せ
 * flex-end: 右寄せ
 * space-between: 整列（左端と右端にスペースなし）
 * space-around: 整列（左端と右端にスペースあり）

縦方向については`<Grid container>`に`text-align属性`で指定します。指定可能な値は以下の通りです。

 * flex-start: 左寄せ
 * center: 中央寄せ
 * flex-end: 右寄せ
 * stretch: ??

# できあがり

こんな感じになりました。レイアウトも使えるようになったので、とりあえずのデザインはMaterial-UIひとつで間に合いそうです。

<img width="1438" alt="スクリーンショット 2017-05-15 1.02.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/160451/25239c16-aa67-62c5-8529-449d69d1e8f9.png">

＊追記：GithubにMaterial-UIでGridレイアウトを試した[サンプルコード](https://github.com/vimyum/react-grid-sample)をアップしました。
ソーシャルボタンが手軽に置ける「Social Buttons for Bootstrap」がすごい便利そう


一年以上前に書いた[ソーシャルボタンが手軽に置ける「bootstrap-social-buttons」がすごい便利](http://qiita.com/solaluna/items/1cd1c4e3a4c39da06133)のリンク先がなくなってたんで、新しい代わりになりそうなやつ無いかなと検索すると後継？みたいなのがありましたのでとりあえず書いておきます

Social Buttons for Bootstrap
![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/85815/541472c0-1d31-993c-c993-0b6f5f47ce44.png)
https://lipis.github.io/bootstrap-social/

<br>
導入していない（使用していない）ので、詳しくは省かせて頂きますがおそらく

①. `bootstrap-social.css`をDLして読み込ませる

②. Twitterボタンを使いたいならクラスに`btn-social btn-twitter`を追加、
　アイコンタイプが使いたいならクラスに`btn-social-icon btn-twitter`を追加すれば簡単に装飾できるみたい・・・？

<br>

bitbucketとか意外と色々あるみたい（前回のやつより増えてる感じがします）
<br>
![ダウンロード (1).png](https://qiita-image-store.s3.amazonaws.com/0/85815/0ca3e271-2682-7672-12f5-0d14cddb238c.png)

<br>
機械学習論文読みメモ_67


[Adversarially Learned Inference](https://arxiv.org/abs/1606.00704)
本論はgenerative networkとinferenve networkをadversarial processにおいて学習するモデルであるadversarially learned inference (ALI)を提案する。
Generative networkはstochastic latent variableをデータ空間へ写像し、inference networkは訓練データにもとづきデータ空間からlatent spaceへの写像を学習する。
ここにおけるadversarial設定はgenerative networkから生成されたlatent/data joint sampleとinference networkから生成されたlatent/data joint sampleを判別するもう一つのdiscriminative networkを用いてなされる。

[Residual Networks Behave Like Ensembles of Relatively Shallow Networks](https://arxiv.org/abs/1605.06431), NIPS2016
本論ではresnetの新たな解釈を提案し、結果、異なった長さのたくさんのパスをを組み合わせたものとして解釈できる事が分かった。
さらに、resnetは短いパスのネットワークだけを活用する事で非常に深いネットワーク構造を実現していると解釈ができる。
この事を示すため、resnetを明示的にいくつかの異なった長さのネットワークパスの組み合わせとして表現する事に成功した。
この時、各パスのネットワークは、アンサンブルモデルのように、お互いに関連のないモデルとなっている。
これはresnetがvanishing gradientを上手く回避している事の示唆にもなる。

[Hierarchical Clustering of Asymmetric Networks](https://arxiv.org/abs/1607.06294)
有向性を持つdissimilarity用いたネットワーク表現を扱う。
この構造を用いる事でconnectivity parameterに関連付けがされたネスト構造の階層的クラスタリングを行う。
このクラスタリングはadmissible methodsに則る、つまりこの場合は２つのノードは互いのdissimilarity measureの最大値にもとづきクラスタリングを行う、またdissimilarityが減少する場合、そのクラスタは凝集するがその逆はない。相互的、あるいは非相互的なクラスタリング手法を導入する事によりこのadmissible methodに関する上界及び下界を求める事ができる。
機械学習論文読みメモ_69


[Bayesian Learning of Dynamic Multilayer Networks](https://arxiv.org/abs/1608.02209)
複数のコンテクスト下において、各因子（actor)間の関係が時間で変化していくようなデータ構造を考える。
コンテクストや時間依存関係を考慮する動的な多層ネットワークは従来あまり提案されてきていない。
本論では、bayesian non-parametric modelとlatent variable modelを用いてこれを実現する。
各因子のモデルは、潜在変数空間における、共有された、あるいはコンテクスト特有の特徴量を用いて表現される。
またそれら特徴はガウス過程で表現されるような時間依存性を持っている。
このモデルは次元削減を行いつつ、複数コンテクスト情報を取り入れ可能になっている。
さらにこのモデルに対するtractableな学習や推論手法を移転する。

[Revisiting Causality Inference in Markov Chain Data](https://arxiv.org/abs/1608.02658)
従来の因果推論は長い期間の観測データがなければ正確な推論は難しかった。
本論では因果推論は１次マルコフ連鎖の範囲でのイベンド前後の遷移情報の組み合わせだけで十分推論が可能だと考える。
本論ではこの考え方に基づいたcausality inference using composition accuracy(CICT)と呼ばれる効率的な手法を提案する。
入出力関係の組み合わせに基づいて、因果、効果、ランダムイベントの間の違いを明らかにする。
これを利用する事で実際の医療データを活用した患者の状態遷移とその因果推論を実践した。

[Residual Networks of Residual Networks: Multilevel Residual Networks](https://arxiv.org/abs/1608.02908)
resnetは多くの層を重ねる事で性能向上を可能にしたが、その分最適化を行うのは難しくなった。
本論では、resnet構造の上にresnetを重ねる事で最適化性能を改善する手法を提案する。
この手法では、通常のresnetに対して、さらに大きな枠（level）でのショートカットを導入する。
この手法は様々なresnetベースの手法に適用可能である。
機械学習論文読みメモ_68


[Robust Contextual Outlier Detection: Where Context Meets Sparsity](https://arxiv.org/abs/1607.08329), CIKM2016
最近異常検知分野において新たにcontextual outlier detectionという手法が提案されてきている。
これはある特定のコンテクストに限定する事で異常検知性能を向上させることができる。
しかしこの手法は、コンテクストがスパース、つまりreference情報が少ない場合においてはあまり効果をなさない。
またlarge scaleデータにおいては適用が難しい。
本論ではこの問題へ対処したモデルとしてROCODを提案する。
このモデルはコンテクストに応じてlocal及びglobalな動作モデルをロバストで自然な形で統合する。
またこのモデルに関する最適化手法を提案しスケーラビリティを改善した。

[Variational Bayes with Synthetic Likelihood](https://arxiv.org/abs/1608.03069)
Likelihood freeな手法において、パラメータ推定に役立つ近似的なガウス分布構造の要約統計量が得られる場合に、人工的な尤度を用いる事は効果的である。
この手法は要約統計量に関するガウス分布を用いた近似推定結果を利用して人工的な尤度を計算する。
これはモンテカルロ法を利用した平均と分散のplug-in推定を利用して計算する。
本論では従来手法と違いstochastic gradient variational inferenceを用いて人工的な尤度を予測する事で計算コストを軽減する手法を提案する。

[Residual CNDS](https://arxiv.org/abs/1608.02201)
CNNは層を増やすことで性能を上げてきた。
しかしそれは同時に学習を困難にし、計算コストが高くなる。
最近の研究では、途中の層から分岐を行い補助タスクを解かせる事で性能向上させる手法も提案されてきた。
特にどの途中層へ補助タスクを導入すべきかに関する指針が最近得られてきた。
そのルールの１つとしてconvolutional networks with deep supervision (CNDS)がある。
また一方最近提案されたResNetは深いネットワークに対する学習手法として有用である。
本論ではこれら２つの手法を組み合わせる事で性能向上が可能である事を示す。
fcitxのon offをそれぞれ独立したキーで行う

~/.config/fcitx/config
の中にある以下の2つの項目を編集

ActivateKey=CTRL_SPACE
InactivateKey=ESCAPE CTRL_[

これにより以下のようなホットキーでfcitxのon/offができる

fcitx on: Ctrl-space
fcitx off: Escape もしくは Ctrl-[
ALSAデバイスでdmix(resampling)が有効かどうかを調べる方法

下記コマンドによってSE200PCIのデバイス0，サブデバイス0の出力状況を把握することができる．

コマンド例)
$cat /proc/asound/SE200PCI/pcm0p/sub0/hw_params
※ 音声再生中に実行する

出力例)
access: MMAP_INTERLEAVED
format: S32_LE
subformat: STD
channels: 2
rate: 44100 (44100/1)
period_size: 528
buffer_size: 2204

rateの値がアプリケーションの音声出力周波数と一致していればresamplingが無効だと考えます．
また，アプリケーションの起動によってrateの値は変化します．
(例:chrome → 48000，audacious → 44100)
pythonのselfについての理解

# selfとは
selfはpythonでclassを作るときに使われるものだが、これは実際selfという文字でなくてもよい。慣習的にselfを使うようになっているということだ。

そして、selfというのは自分自身とよく言われるがこれでは誤解が生まれてしまうと思う。classをひとつ作ってselfを返すメソッドを書いて試してみれば分かるが、selfは**その時点での自分**である。
そしてその自分自身というのは、意図的に変更することができる。
## 自分自身の変更

```python:sample.py
# -*- coding: utf-8 -*-

class Hoge:
	def __init__(self, a):
		self.__a = a

	def call(self):
		print(self.__a)

ins = Hoge(1)
ins.call() # 1
```

上記のコードは一般的なプログラムである。
しかしこのような書き方もできる。

```python:sample2.py
# -*- coding: utf-8 -*-

class Hoge:
	def __init__(self, a):
		self.__a = a

	def call(self):
		print(self.__a)

ins = Hoge(1)
Hoge.call(ins) # 1
```

これはselfに直接オブジェクトを渡しているためこのような結果になる。
勿論こんな変なことも出来る。

```python:sample3.py
# -*- coding: utf-8 -*-

class Hoge:
	def __init__(self, a):
		self.__a = a

	def call(self):
		print(self.__a)

ins = Hoge(1)
ins2 = Hoge(2)
ins.call() # 1
ins2.call() # 2

Hoge.__init__(ins, 3)
ins.call() # 3
```

## まとめ

もちろんこんな変なこと普通しないよ！というのはもっともだと思うが、個人的には面白いな～と思う。
pythonをなんとなく書いてる人には少し新鮮なのではないだろうか。
LuaでTwitterに投稿する(1)

Luaを使ってTwitter投稿機能を作成します。
いずれは他のSNSにも広げたいけど、今はTwitterだけで。
あと、初心者です。不便で間違ってるかもしれないけど、生暖かい目で見守ってやってください。

#1 Lua使う理由って？(前置き)
なんでLuaという言語をわざわざ使おうとしたのか？
ただ例えばソフト内の記述がスクリプト方式であったりすると、処理が軽いといった性能が重視されることがある。
そして一番の理由は僕が使う、とあるアプリケーションの組み込み言語がLuaでバージョンが5.1(ちょっと古い！)だったからだ。
あと、制限がある中で実装するって~~萌え~~燃えますよね？
(そもそものきっかけが、Lua使って投稿機能実装の記事が古かったわけだし・・・。)
とまあ、そんな感じで本題入りましょう。

#2 実行環境
アプリケーションの都合上、OSはWindows 10(Pro)上にBash(Ubuntu)環境を構築してテストします。
ここはもうダイレクトにBash on Windowsでやります。
(苦労しながらいろいろいじりました。いつか備忘録でアップしようかな)
そして、CUI上であらかた組み切ってしまってからアプリ内に移植する手段をとることにします。
あと、あらかた必要な開発環境は整えておいています。足りなかったら、`apt`や`yum`使って適宜組み込んでください。

(2017.5.16 追記)
さすがに無責任すぎる気がしたのと、いつか吹っ飛んだ時のためにメモ記事を作りました。

+ [Bash on WindowsからWindowsアプリを起動する](http://qiita.com/ch_suginami/items/95db3ffcaa49fcff2650)

#3 Twitter投稿用のAPI
Twitterに投稿なりなんなりする機能ですが、下のリンクに従って作っていくことにしましょう。

+ [Twitter REST APIの使い方](https://syncer.jp/Web/API/Twitter/REST_API/#section-4)

てことでこのページに従ってcurlでポストしよう！としたときに少しトラブったので、今回はその回避法まで。

#4 どんなエラー？
BoWを導入するとcurlは普通に最初から入っている。Luaも入っている。ただし都合でバージョン5.1を使う。
Luaのバージョン管理は**luarocks**を使うことにする。
もし入っていなければ、
`$sudo -S apt install luarocks`
と打ち込み、ユーザーパスワードを聞かれるので打ち込みましょう。
その勢いのまま、
`$sudo -S luarocks install lua-curl`
と打ち込んだのが運の尽き。

```
Error: Could not find expected file curl/curl.h for CURL -- you may have to install CURL in your system and/or pass CURL_DIR or CURL_INCDIR to the luarocks command. Example: luarocks install luacurl CURL_DIR=/usr/local
```

どうしてこうなった？まさかと思ってcurl機能が使えるかを確認する。

```
$which curl
/usr/bin/curl
```
問題なさそう。実際機能もしてたしここではない。
てことで、エラーメッセージ最後の``CURL_DIR=``を上の場所に指定する、がダメ。実行ファイルなのは知ってるけど、一縷の望みなどなかった。

それでもう少し調べたら、こういうの見つけた。

+ [luarock for luacurl and curl.h path assumption](http://lua.2524044.n2.nabble.com/luarock-for-luacurl-and-curl-h-path-assumption-td7653472.html)

読むとライブラリ周りの話らしい。てことで、そのあたりの機能を追加する。

```
$sudo -S apt install libcurl4-openssl-dev
```

インストール後に再び実行。
`$sudo -S luarocks install lua-curl`

するとうまくいきました。やったね。

今回はここまで。
実証動作報告は次回以降ということで。
Visual StudioでPython使う人（オレ）へのメモ その２

#VisualStudioでPycryptoがインストールできない

python3.4の仮想環境にPycryptoを入れたくてpipでインストールしてました。
ですが、インストール中にどうしても以下のエラーでこけてしまいます。

>building 'Crypto.Random.OSRNG.winrandom' extension
error: Microsoft Visual C++ 10.0 required

Python3.4でPycryptoをコンパイルする際に、VC10 (Visual C++ 2010)が
必要だよ！と怒られます。調べてVC10のインストールもしたのですが
改善されずでした。

##コンパイル済みのPycryptoをインストールする
windows上でpythonのパッケージをコンパイルするときに、
よくあるエラーの一つのようで、既にコンパイル済みのPycryptoをインストール
したほうが良いとアドバイスを受けました。

探してみたところ、自分に必要そうなのはここに書いてありました。
[Windows7(64bit)+Python3.4でparamikoを動かしてみた](http://qiita.com/44d/items/00ea3211f631d14b7ac9)



<br>
インストールは成功し、これにてImport可能に。

##ImportError: No module named 'Crypto'
インストールしたものの今度はそんなモジュールねぇ！と怒られてしまいました。

探ってみたところ、インストールしたパッケージの「AES.py」と「blockalgo.py」の
ファイル内で良くない箇所がありました。

![Crypto_bf.PNG](https://qiita-image-store.s3.amazonaws.com/0/113090/30e2080b-1fc5-f473-2fb0-190081e84e32.png)
import元のモジュール名が「Crypto.Cipher」になっています。

![Crypto_af.PNG](https://qiita-image-store.s3.amazonaws.com/0/113090/851ad15e-3836-2154-4ffe-6a86bbed70f9.png)
「crypto.Cipher」にしてあげないと、モジュール名が一致しないようです。

同じくblockalgo.pyもimport元モジュール名の頭文字を小文字にします。
![blockalgo_af.PNG](https://qiita-image-store.s3.amazonaws.com/0/113090/8515f779-0f89-a067-1f3f-f9668a92c250.png)

今回、自分が使用するのはcrypto.Cipher のAESだけだったので、上記の2ファイルを修正しました。
他にもimportする機能によってはほかのファイルも修正する必要がありそうです。

<br>

自分へのメモに残しておきました。
PhoneGap BuildとCordova(PhoneGap)の簡単な比較

3年前にPhoneGap(Cordova)でアプリをリリースして、2017年5月にPhoneGap Buildでアプリをリリースしました。

WebサイトでアプリをBuildできるPhoneGap Buildと、Xcodeなどの開発環境で利用するCordovaの簡単な比較メモです。

# 開発環境
PhoneGap Build : iOS、Android共に同じIDEを利用 ○
Cordova(PhoneGap): iOSはXcode、Androidはeclipseを利用 △

PhoneGap BuildはGitHubと連携できるため、以下のような流れで開発することができました。
eclipseで開発 → eclipseからGitHubにPush → PhoneGap Buildでビルド → iPhoneやAndroidでテスト

<img src="https://qiita-image-store.s3.amazonaws.com/0/179035/f0fa0c2f-38c2-21d3-eefa-c7f086b2d71f.png" width="50%">

# 値段
PhoneGap Build : 無料プランあり △
Cordova(PhoneGap): 無料 ○

PhoneGap Buildには1種類のアプリであれば無料で利用できます。
ただし、GitHubのプライベートリポジトリは利用できません。

# プラグインの利用
PhoneGap BuildやCordovaでHTML5では実現が難しい機能(SQLiteやSNSシェア機能、ネイティブ機能など)を利用する場合、プラグインを利用することになります。
PhoneGap Build : Cordova向けの資料が多く分かりにくい △
Cordova(PhoneGap) : 機能やドキュメントは充実している ○

ただどちらも英語によるドキュメントばかりで、日本語の情報ではCordovaを利用しているMonacaの情報を一部活用しました。
https://ja.monaca.io/

# デバッグ
ネイティブの機能(SQLiteやカメラなど)を利用した場合、極端に差が出ます。
PhoneGap Build : 一度端末に取り込んで実機でテスト ×
Cordova(PhoneGap) : iOSはXcodeのシミュレーターでテスト △

# 配信用スクリーンショットの提出(iOSのみ)
iOSではiPhone向けとiPad向けにスクリーンショットを登録する必要があります。
特にiPadではiPad Pro 12.9のサイズ(2048x2732pixelかその逆)で登録が必要です。

iTC提出時のiPad Pro 12.9"のスクリーンショット関連について
http://qiita.com/hsylife/items/110e352ca35affc5beac

PhoneGap Build : iPhoneX PlusやiPad Pro 12.9を持っていないとハードコピーで対応できない ×
Cordova(PhoneGap): Xcodeのシミュレータのハードコピーを利用 ○

自分がPhoneGap Buildで作成したアプリでは、iPadの画像を1種類のみ掲載したところ、アプリの詳細を説明するためには複数の画像が必要であるとリジェクトされました。そのため急遽、CordovaをインストールしてXcodeのシミュレータでiPad Pro 12.9サイズの画像を用意することになりました。

# まとめ
ネイティブの機能を利用しないのであれば、PhoneGap Buildの無料プランがお手軽で、開発の柔軟性もあります。

自分が製作したアプリではネイティブ機能(SQLite)を利用していたため、デバッグに非常に苦労しました…

# 紹介：PhoneGap Buildで開発したアプリ
### Climb Memo
・Android（Google Play）
https://play.google.com/store/apps/details?id=com.akakura.climbingmemo
・iOS（App Store）
https://appsto.re/jp/3XQSib.i

<img src="https://qiita-image-store.s3.amazonaws.com/0/179035/0213fab0-d191-b121-a371-5900a5ee6128.png" width="30%">
機械学習の環境を構築する

#はじめに
機械学習の環境を構築しようと思ったのですが、そのまま機械学習で使うような特殊なライブラリをインストールすることでパソコンの起動がおかしくなりOSが起動できないことがあるそうです。そこで今回はそんな事態を防ぐためにOSに依存しない仮想環境を構築するための方法を調べてみたのでご紹介します。今回は[データ分析のための機械学習入門](http://www.sbcr.jp/products/4797388084.html?sku=4797388084)の内容からの紹介です。
#動作環境
今回の動作環境は

- macos Sierra
- Python2.7
- pip 9.0.1

こんな感じです。
#仮想環境の構築
はじめにpipを使い以下のコマンドを入力し、virtualenvをインストールします。

```
$ sudo pip install --upgrade virtualenv
```
インストールできたらvirtualenvで実際に仮想環境を構築していきます。以下のコマンドを入力します。

```
$ virtualenv --system-site-packages sample
```
これで「sample」というディレクトリができます。ここにpythonの実行環境を構築していきます。もし必要なくなったらディレクトリごと削除すれば簡単にアンインストールできます。それでは具体的にこの仮想環境をアクティベートする方法を紹介します。

```
$ cd sample
＄ . ./bin/activate
```
アクティベートをするとターミナルの表示が以下のように変わります。

```
(sample)$ 
```
これで仮想環境が実行されています。元に戻す時はdeactiveコマンドを使用します。

```
(sample)$ deactivate　 
```
#scikit-learnのインストール
ではこの仮想環境に機械学習のライブラリscikit-learnをインストールします。先ほど構築した仮想環境をアクティベートしたら以下のコマンドを入力します。

```
(sample)$ pip install -U scikit-learn
```
これでscikit-learnのインストールができました。これからこのscikit-learnを使用して機械学習のプログラムを作成していきます。
Goでのアルゴリズムクイックリファレンス第2版(4.3 分割ベースのソート)

Goに慣れるためとアルゴリズムの復習の為に週1ぐらいで更新していきます。[アルゴリズムクイックリファレンス 第2版](https://www.amazon.co.jp/gp/product/4873117852/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4873117852&linkCode=as2&tag=amesho-22&linkId=b7688201ae37a6234596fa96dfd3ccdd)を読んで各種アルゴリズムをGoで実装して行きます。

前回: [Goでのアルゴリズムクイックリファレンス第2版(4.2 選択ソート)](http://qiita.com/amesho/items/cdbfc525c1418f7523d5)


今回は[ヒープソート](https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%BC%E3%83%97%E3%82%BD%E3%83%BC%E3%83%88)です。

+ リストの並べ替えを二分ヒープ木を用いて行うソートのアルゴリズム
+ 計算量は O(n log n)
+ 安定ソートではない
+ アルゴリズム
  + 未整列のリストから要素を取り出し、順にヒープに追加する。すべての要素を追加するまで繰り返し。
  + ルート（最大値または最小値)を取り出し、整列済みリストに追加する。すべての要素を取り出すまで繰り返し。

https://play.golang.org/p/7UJfY6x8by

```go
package main

import (
	"fmt"
	"math/rand"
)

func sort(a *[]int) {
	buildHeap(a)
	n := len(*a)
	for i := n - 1; i >= 0; i-- {
		(*a)[0], (*a)[i] = (*a)[i], (*a)[0]
		heapify(a, 0, i)
	}
}

func buildHeap(a *[]int) {
	n := len(*a)
	for i := n/2 - 1; i >= 0; i-- {
		heapify(a, i, n)
	}
}

func heapify(a *[]int, idx int, max int) {
	largest := idx
	left := 2*idx + 1
	right := 2*idx + 2

	if left < max && (*a)[left] > (*a)[idx] {
		largest = left
	}

	if right < max && (*a)[right] > (*a)[largest] {
		largest = right
	}

	if largest != idx {
		(*a)[idx], (*a)[largest] = (*a)[largest], (*a)[idx]
		heapify(a, largest, max)
	}
}

func main() {
	var ary []int
	size := 30
	for i := 0; i < size; i++ {
		ary = append(ary, rand.Intn(size-1))
	}
	fmt.Println(ary)
	sort(&ary)
	fmt.Println(ary)
}
```

次回は[クイックソート](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%BD%E3%83%BC%E3%83%88)の予定です。
デザインパターン学習メモ：「Decorator」

## このパターンの目的
GoF本より引用する。

> オブジェクトに責任を動的に追加する。Decoratorパターンは、サブクラス化よりも柔軟な機能拡張方法を提供する。(P.187)

## このパターンの動作
『オブジェクト指向のこころ』の説明がわかりやすかった。

> Decoratorパターンは、付加する機能に対して責任を持つDecoratorというオブジェクトから始まり、元々からある機能を表すオブジェクトで終了する、一連のオブジェクト連鎖を生成することによって機能します。（P.261）

つまり、図示するとこのようになる。(同じくP.261の図を参考に作成)

```
[:Decorator1]-->[:Decorator2]-->[Decorator3]-->[:ConcreteComponent]
```

「オブジェクトの連鎖」がポイントになる。ここが、オブジェクトを多重に修飾している箇所だ。

詳しくは実装例を見てほしい。

## 実装例
『デザインパターン入門』を参考に作成。

```java:Display.java
// 共通のインタフェース
// Component役
public interface Display {
	String getText();

	default void show() {
		System.out.println(getText());
	}
}
```

```java:StringDisplay.java
// ConcreteComponent役
public class StringDisplay implements Display {
	private String string;

	public StringDisplay(String string) {
		this.string = string;
	}

	@Override
	public String getText() {
		return this.string;
	}
}
```

```java:DisplayDecorator.java
// Decorateクラス用のインタフェース
// Decorator役
public abstract class DisplayDecorator implements Display {
	protected Display display;

	protected DisplayDecorator(Display display) {
		this.display = display;
	}
}

```

```java:SurroundWithParentheses.java
// ConcreteDecorator役
public class SurroundWithParentheses extends DisplayDecorator {
	public SurroundWithParentheses(Display display) {
		super(display);
	}

	@Override
	public String getText() {
		String text = "(" + display.getText() + ")";
		return text;
	}
}
```

```java:SurroundWithBrackets.java
//ConcreteDecorator役
public class SurroundWithBrackets extends DisplayDecorator {
	public SurroundWithBrackets(Display display) {
		super(display);
	}

	@Override
	public String getText() {
		String text = "[" + display.getText() + "]";
		return text;
	}
}
```

### 実行
```java:Main.java
// 実行用クラス
public class Main {
	public static void main(String[] args) {
		Display display1 = new StringDisplay("Hello, World!");
		display1.show();

		Display display2 = new SurroundWithBrackets(display1);
		display2.show();

		Display display3 = new SurroundWithParentheses(display2);
		display3.show();
	}
}
```

```text:結果
Hello, World!
[Hello, World!]
([Hello, World!])
```

## 実装例の解説
 * show()メソッド呼び出すと、表示する内容はgetText()メソッドによって取得される
 * Decoratorを使った場合（上記の実行例でいうところのdisplay2と3）は、まずいちばん外側のクラスのgetText()を実行して修飾を加え、次にひとつ内部のクラスのgetText()を実行し、最後にConcreteComponent(StringDisplayクラス)のgetText()を実行する
    * この動作では「委譲」を用いている


## 利点
 * オブジェクトに対してクラスの拡張よりも柔軟に責務を追加できる
    * 機能追加が容易（既存のコードに影響を与えずに機能の追加が可能）
    * 実行時に追加可能

## 参考文献
 * エリック ガンマ、ラルフ ジョンソン、リチャード ヘルム、ジョン プリシディース（1999）『オブジェクト指向における再利用のためのデザインパターン　改訂版』本位田　真一、吉田　和樹 監訳、SBクリエイティブ
 * アラン・シャロウェイ、ジェームズ・R・トロット（2014）『デザインパターンととともに学ぶ　オブジェクト指向のこころ』村上雅章訳、丸善出版
 * 結城浩（2004）『Java言語で学ぶ　デザインパターン入門』SBクリエイティブ
Fluentd ってどんなことができるのか試してみたかった（メモ+α）

# 動機
ログファイルが複数のサーバに配置され、ログファイルが肥大化されることをどうにかしたい

# Fluentd のインストール
#### 参考にしたサイト
- [Fluentdを高速でセットアップしてその機能・効果を体感する](http://qiita.com/mogulla3/items/eefd3cd5d08445028c35)
- [docs.fluentd.org](http://docs.fluentd.org/v0.12/articles/install-by-rpm)

#### インストール
```
$ curl -L https://toolbelt.treasuredata.com/sh/install-redhat-td-agent2.sh | sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
curl: (35) Peer reports incompatible or unsupported protocol version.
```
下記ファイルをブラウザで確認してコマンドラインで実行しました。

```shell-session:install-redhat-td-agent2.sh
echo "This script requires superuser access to install rpm packages."
echo "You will be prompted for your password by sudo."

# clear any previous sudo permission
sudo -k

# run inside sudo
sudo sh <<SCRIPT

  # add GPG key
  rpm --import https://packages.treasuredata.com/GPG-KEY-td-agent

  # add treasure data repository to yum
  cat >/etc/yum.repos.d/td.repo <<'EOF';
[treasuredata]
name=TreasureData
baseurl=http://packages.treasuredata.com/2/redhat/\$releasever/\$basearch
gpgcheck=1
gpgkey=https://packages.treasuredata.com/GPG-KEY-td-agent
EOF

  # update your sources
  yum check-update

  # install the toolbelt
  yes | yum install -y td-agent

SCRIPT
```
## Fluentd 設定
#### ログ監視の設定

```
$ vi /etc/td-agent/td-agent.conf 
```

```:/etc/td-agent/td-agent.conf
<source>
  type tail
  path /var/log/httpd/access_log
  pos_file /var/log/td-agent/sample.pos
  format none
  tag apache.access
</source>

<match apache.access>
  type file
  path /tmp/access_log.fluentd
</match>
```
#### 設定反映
```
$ sudo systemctl start td-agent
```

# Fluentd 動作確認
#### ファイル書き込み確認
```
$ ls -l /tmp/
-rw-r--r-- 1 td-agent td-agent 282  5月 14 13:02 access_log.fluentd.20170514.b54f7b8a7c0f105a4
```
#### 別ターミナルで下記コマンドを実施
```
$ curl localhost
```
#### localhost へのアクセスが書き込まれていることを確認
```
$ tail -f access_log.fluentd.20170514.b54f7b8a7c0f105a4 
2017-05-14T13:01:46+00:00	apache.access	{"message":"::1 - - [14/May/2017:13:01:46 +0000] \"GET / HTTP/1.1\" 200 2321 \"-\" \"curl/7.29.0\""}
2017-05-14T13:02:56+00:00	apache.access	{"message":"::1 - - [14/May/2017:13:02:56 +0000] \"GET / HTTP/1.1\" 200 2321 \"-\" \"curl/7.29.0\""}
2017-05-14T13:40:26+00:00	apache.access	{"message":"::1 - - [14/May/2017:13:40:25 +0000] \"GET / HTTP/1.1\" 200 2321 \"-\" \"curl/7.29.0\""}
```

#やってみて
これで apache log のアクセスについては確認ができる様になったので次回はこのログを一括でサーバへ格納して、WEBサーバなどのログの圧迫をなくせるのかなと思いました。
今後は、ログを管理サーバに転送、kibana / MongoDB / elasticsearch などを使ってログデータの集積、分析、創造できることやってみようと思います。


# あとがき
今後のやろうとしていることで、アドバイスや最善の方法など、参考意見があれば教えてください。
色々取り入れて今後のメモなどとしていこうとおもいます。
Vue.js2でドラッグアンドドロップをする

# 動いてるところ
![dad.gif](https://qiita-image-store.s3.amazonaws.com/0/48596/d32dc2fb-a5a3-949c-2ef3-1bab42acd33e.gif)

# コード
イマイチ設計とか各種命名をどうすればいいかがわからなかったので適当です. フロントエンドの命名難しくない?

Vue.js(というかフロントエンドフレームワーク全般)初心者なのでいろいろわからないまま書いてるんですが, 少なくともemitで親コンポーネントのイベントを発火させていくのはキモいのではないかと思っています.
という考えから, データを保持したりそのデータを弄るメソッドは全て親コンポーネントに集中させ, 子コンポーネントは親から教えてもらったメソッドを発火させる仕組みにしました.
子コンポーネントはいかにも自分に定義してあるメソッドを呼ぶかのように振る舞えるんですが, 実際に呼んでるのは親コンポーネントが持っているメソッドなので親のデータをいじり放題です.

```html:index.html
<script src="https://unpkg.com/vue"></script>

<div id="root">
  <div>
    <select-item v-for="(url, index) in selected_url_list" v-bind:key="index" v-bind:url="url" v-bind:index="index" v-bind:drop_method="drop_method"></select-item>
    <br>
    <image-item v-for="(url, index) in url_list" v-bind:key="index" v-bind:url="url" v-bind:dragstart_method="dragstart_method"></image-item>
  </div>
</div>

<script src="dad.js"></script>
```

```js:dad.js
Vue.component('select-item', {
  props: ['url', 'index', 'drop_method'],
  template: '<img v-bind:src="url" @dragover.prevent @drop="drop_method(index)" width="100px"/>'
})

Vue.component('image-item', {
  props: ['url', 'dragstart_method'],
  template: '<img v-bind:src="url" draggable="true" @dragstart="dragstart_method(url)" width="100px"/>'
})

new Vue({
  el: '#root',
  components: ['image-item', 'select-item'],
  data: {
    url_list: [
      'https://jp.vuejs.org/images/logo.png',
      'http://2.bp.blogspot.com/-h_6vJqWz5KE/VaMNnYX1izI/AAAAAAAAvag/LfS62MKrhKE/s800/man_58.png',
      'http://3.bp.blogspot.com/-0SY0brETIYs/VaMNiZlDbUI/AAAAAAAAvZQ/hrfERj3OB4A/s800/man_49.png',
      'http://4.bp.blogspot.com/-JW9IHh4fQ_g/VaMN9C_Zs7I/AAAAAAAAvgY/91QhSXR-HGc/s800/youngman_36.png',
      'https://qiita-image-store.s3.amazonaws.com/0/48596/profile-images/1473691406'
    ],
    selected_url_list: ['', '', ''],
    dragging_url: ''
  },
  methods: {
    dragstart_method: function(url) {
      this.dragging_url = url;
    },
    drop_method: function(index) {
      var copy = [].concat(this.selected_url_list);
      copy[index] = this.dragging_url;
      this.selected_url_list = copy;
      this.dragging_url = '';
    }
  }
})
```
Windows Creaters Update(バージョン1703)でconemuの全角文字のカーソル位置がずれる(解決済)

# 現象
Cmderで全角文字を入力した際に全角1文字で全角2文字カーソルが動くようになってしまった。
![cmder.gif](https://qiita-image-store.s3.amazonaws.com/0/181474/c81dbed3-2a02-fe99-b95f-d5f8a1717235.gif)

# 結論 (2017/6/14追記)
最新のWindows Updateを適用することで直る。
Bash on Ubuntu on Windowsとも共存可能。

以下は古い情報のため参照する必要はない。

# 旧結論
Windows Creaters Update(バージョン1703)が原因。
cmderはほっといて、コマンドプロンプトの設定で従来のコンソールを使うのチェックを入れると何故かなおる。
![2017_05_14_624.png](https://qiita-image-store.s3.amazonaws.com/0/181474/372f2978-7180-aee7-684f-6740eca2f804.png)

以下のやりとりを参考にした。
https://github.com/cmderdev/cmder/issues/1339
`chcp 65001`は不要で、こちらも実行してしまうとカーソル位置がまたずれる。

conemuとコマンドプロンプトがどう関わってるとかはよくわからない。

# 調査した内容
### cmderの設定
調べると最初に出てくる以下のようなmonospaceの設定は確認済み。
もとより最近のバージョンではチェックしなくてもいい模様。

- [cmderの日本語フォントの幅を治す](http://qiita.com/tukiyo3/items/8e477e48d3bebf9a04d1)

### conemuについて
調べるうちにcmderの中ではconemuが動いてるとわかったので、cmderフォルダの中にある
conemu単体で起動してみたところ、そちらでも同様の現象が起きていたのでconemuの
症状だとわかる。

### 原因の特定
手元にCreaters Updateを適用してないWindowsがあったため、cmderをインストール。
こちらでは問題なく表示される。
そこでCreaters Updateを適用して試してみたところ、同様の現象が起きた。
Creaters Updateが原因だと思う。
「バージョン1703 cmder」でググったら参考のリンクが出てきた。
NeDBとvue.jsの連携（Nedbのfindをvue.jsのdataで受け取る方法）



NeDBのfindメソッドの結果をvue.jsに送るのに苦労したのでメモ。

ポイントは
- NeDBのfindメソッドで変数を使うためにRegExpを利用する必要があること。
- NeDBのfindメソッドの結果を受け取るためにコールバックにbind(this)を設定すること。 ※ここに到達するまで丸2日試行錯誤しました。。



```test.json
{"id":"hogehogehoge","name":"ryo","age":"18"}
{"id":"hogehogedoge","name":"yu","age":"26"}
{"id":"hogehogehoge","name":"taro","age":"27"}
```

```test.vue
<template>
		<input v-model="word"></input>
		<button v-on:click="search">検索</button>
		<table>
			<tr v-for="result">
				<td>{{ result.name }}</td>
				<td>{{ result.age }}</td>
			</tr>
		</table>
</template>


<script>
//データベース設定
var Database = require("nedb");
var testDB = new Database({
    filename: './test.json',
    autoload: true
});

//vue スクリプト
export default {
    data () {
        return {
            Word : '',
            risult: '',
        }
    },
    methods: {
        search: function () {
            testDB.find({case: new RegExp(".*"+this.Word+".*", "i")} , function (err, doc) {
                this.risult = doc
            }.bind(this));
        }
    },
    name: 'disease'
}
</script>
```
HelloTalkからLang-8に戻ってきた理由

しばらくHelloTalkにどっぷりだったのですが、Lang-8も再開しましたという話。

####目次
* HelloTalkは交流>添削, Lang-8は添削>交流
* 添削無し!=パーフェクト
* "文法が出来ないとダメ"からの脱却を目指して


#### HelloTalkとLang-8
僕がよく使う語学添削サイトとしてこの2つがあるのですが、双方には違いがあります。
それは**交流と添削どちらに比重を置いているか**という点です。
どちらも用途や機能は似ている点が多いものの、この点においてはUI,UX共に明確に異なります。

ex1) HelloTalkモーメント機能
1. レンチアイコン画像押下
2. 訂正押下
3. 投稿文に対し修正を入れる
4. 送信ボタン押下

ex2) Lang-8
1. 添削とコメントを書くボタン押下
2. 投稿文に対し修正を入れる
3. 何かコメントがあれば追記
4. 添削を投稿するボタン押下

という感じで、HellloTalkはレンチアイコン画像などから添削機能を呼び出さなければそもそも添削は行わず、逆を言えば添削無しでもコメントの投稿(交流)を可能としています。
一方でLang-8は添削を主体としており、添削無しでコメントの追記も出来ますが入力欄は添削Viewの末端にとあくまでオマケな感じです。


####添削無し!=パーフェクト
当たり前ですが添削が無いからといってコメントくれた人が「通じてるよー」なんていうことかというとそれが絶対では無いんですよね。Lang-8はその点添削時に「パーフェクトボタン」があり、問題が無ければ教えてくれる機能があります。ただしHelloTalkはハートボタン(イイネのようなもの)がある程度でパーフェクトという目的で使われるかというとまた別だと思います。


####"文法が出来ないとダメ"からの脱却を目指して
僕は当2サイトに英語力向上のために添削機能を求めて使い始めたわけですが、HelloTalkでは**添削してくれる人をこちらから求めないとそもそも添削が発生しない**くらいの使い方だと思ってます。もともと気になる相手が相手がいればフォローし1on1での交流が主だったはずなのですが、**モーメント機能が本来の目的を忘れさせるほどの利便性を持っていた**とも言えるんですけどね。

しかし、文法力向上を目指しながらも「文法を完璧にしないと投稿も億劫」と思ってしまっては本末転倒であることもまた事実な訳で。そういう意味でも「添削重視で交流したい」という僕の思惑に現状Lang-8の方がマッチしているなと再認識したというのが今回の一番の理由です。

添削の必要の無い、パーフェクトな文法力を早く身につけて、HelloTalkに限らずいろんなところで英語でのコミュニケーションを図っていきたい次第です。

####補足
* <a href="https://www.hellotalk.com/Index/index/lan/jp/hellotalk.html#jp">HelloTalk</a>
* <a href="http://lang-8.com/">Lang-8</a>
【備忘録】twitteRでタイムラインを取得する

★2019/06/26追記 「twitteR」は現在メンテナンスが行われなくなり、「rtweet」パッケージを使用することが基本となっているようです。使い方については[記事を作成しましたので](https://qiita.com/taro_6974/items/3a3d607682a6da7ab743)、Rでtwitterからデータを取得される方はそちらを参照ください。当記事は参考のために削除せずに残しておきます。

# はじめに

備忘録としてRのパッケージ「twitteR」を使用してツイッターのタイムラインを取得する一連の流れを残しておきます。


## 前準備

twitteRを使用するためには以下の準備が必要です。

・Twitterアカウントの取得
　➡︎https://twitter.com/

・Twitter Developersにアカウントを登録
　➡︎https://dev.twitter.comhttps://dev.twitter.com

簡単なので、Twitterアカウントの取得手順は省略します。
Twitter Developersのアカウント登録方法は以下の手順で行ってください。


まず、リンク先に飛びんでください。「My apps」をクリックします。
<img width="1207" alt="スクリーンショット 2017-05-14 21.02.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/de635e74-0671-eab1-f054-75a0df61a36d.png">

次の画面で、「Create New App」をクリックします。
<img width="988" alt="スクリーンショット 2017-05-14 21.06.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/7a13512b-43fa-2ef5-ec35-7ee5eaa59257.png">

登録画面に従い、赤い✳︎の項目を全て入力します。
入力が終わったら画面下にある「Developer Agreement」にチェックを入れて「Create your Twitter application」ボタンをクリックしましょう。
※アカウントに電話番号が紐付いていない場合は紐付けておいてください。
<img width="1035" alt="スクリーンショット 2017-05-14 21.08.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/2f914b90-5d33-8621-dc0f-14c8b2afcb71.png">

登録後、「Keys and Access Tokens」タブに切り替えることができます。
Consumer Key、Consumer Secret、Access Token、Access Token Secretは必要な情報なので、控えておきましょう。
<img width="1085" alt="スクリーンショット 2017-05-14 21.18.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/c802ab1b-3392-3f20-f4a4-4a505c9d1d9d.png">
<img width="1043" alt="スクリーンショット 2017-05-14 21.24.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/4153ac6e-6ba3-41cb-9cfa-9287f51d5456.png">


## TwitteRを使用してタイムラインを取得する

準備ができたら早速使ってみましょう。


```Twitte.R

#twitteR前準備
install.packages("twitteR")
library("twitteR")

#情報の入力
consumerKey    <- "#######################"
consumerSecret <- "#######################"
accessToken    <- "#######################"
accessSecret   <- "#######################"

#httr_oauth_chcheを保存
options(httr_oauth_cache = TRUE)
#認証情報の取得
setup_twitter_oauth(consumerKey, consumerSecret, accessToken, accessSecret)

#ユーザーのタイムラインを取得
SearchWords <- c("魔法少女育成計画 OR まほいく")

#期間指定
since <- '2017-05-07'
until <- '2017-05-14'

#検索
TwGetDF <- twListToDF(searchTwitter(SearchWords,since = since,until = until,n=3200))
```
「######…」の部分は先ほど控えた情報を入力してください。
twListToDF関数を使用することでタイムラインを検索することができます。
第一引数が検索ワード、第二、第三引数が期間、第四引数が取得件数です。
取得できた件数が指定した数に満たない場合でもエラーは発生しません。

一部ですが、取れたデータはこんな感じです。
<img width="1086" alt="スクリーンショット 2017-05-14 21.39.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/162354/851f3cb0-1600-4ae2-efeb-5cbb6a297a41.png">

# おわりに

以上でtwitteRの簡単な説明は終わりです。
簡単な実験や勉強の解析にお役立てください。

それではっ
addToBackStackメソッドの呼び出しタイミングと引数について

先日よりandroidアプリ開発をスタートし、テキストを見ながら勉強している最中に、
addToBackStackメソッドの使い方について疑問点があったので、書き残しておく。

アプリの動作としては、項目一覧を選択した際に、選択項目の詳細画面に遷移し、
戻るボタンを押したときに一覧に戻る、というもの。

戻り先の状態を保存するため、addToBackStackメソッドを使う。
テキストに記載されていたaddToBackStackの用法は以下の通り。

```java
//一覧を詳細に置き換え
fragmentTransaction.replace(R.id.fragment1,myFragment2);

//戻るボタンを押したときの処理用に元のトランザクションを保存
fragmentTransaction.addToBackStack(null);

```

このコードを見て疑問に思った点は以下の2点。
1.メソッドの呼び出しタイミング
2.メソッドの引数

上記2点について調べた内容を以下にまとめる。

#1.メソッドの呼び出しタイミング
上記コードを見ると、
fragmentTransaction.replaceメソッドでFragmentを入れ替えた後、
fragmentTransaction.addToBackStackメソッドで状態を保存している。

ここでの疑問は、
入れ替えた後保存したら、戻り先の状態を保存できないのではないかという疑問だ。
つまり、
Fragment入れ替え⇒保存
ではなく、
保存⇒Fragment入れ替え
とすべきではないかと考えた。

そこで、Android DevelopersのaddToBackStackの説明を見ると、
>Add this transaction to the back stack. This means that the transaction will be remembered after it is committed, and will reverse its operation when later popped off the stack.

ざっくり訳すと、
transactionをスタックに保存します。コミットされた後にスタックに記録されます。
スタックからpopされると元に戻されるでしょう。

残念ながら答えは得られなかった。
その後もブログ等を探していったが、明確な回答を得られず。
その後、タブレットとスマホで画面レイアウトを変更することについて調べていたら、
答えが見つかった。
fragmentsの解説のページ（https://developer.android.com/guide/components/fragments.html?hl=ja）に
以下の記述を見つけた。

>トランザクションに複数の変更を加えて（add() や remove() など）、addToBackStack() を呼び出した場合、commit() を呼び出す前に適用されたすべての変更点が 1 つのトランザクションとしてバックスタックに追加され、「戻る」ボタンを選択すると、すべてが同時に元に戻るようになります。 

つまり、addToBackStackメソッドでは差分が保存されるということであった。
差分を保存するのであれば、Fragment入れ替え⇒保存で納得。

#2.メソッドの引数
これは単純に「引数がNULLってどういうこと？」という疑問。

この疑問は、Android-Noteさんの解説記事
（http://android-note.open-memo.net/sub/fragment__fragment_stack.html）
に以下の記載があった。

>もし、スタックに保存するフラグメントが複数なく、現在のものだけを保存する場合は次のようにnullを渡します。

なるほど。

以上。
#githubリンク
リポジトリ
https://github.com/tagfa/MyGUIFragmentDynamic02
addToBackStackメソッドの利用箇所
https://github.com/tagfa/MyGUIFragmentDynamic02/blob/master/app/src/main/java/com/example/tag/myguifragmentdynamic02/MainActivity.java
jQuery色々

※随時更新 最終更新2017/05/15
## 高さ取得
・要素の高さ取得
```height()```

・paddingを含んだ高さ
```innerHeight()```

・border、paddingを含んだ高さ
```outerHeight()```

・margin、border、paddingを含んだ高さ
```outerHeight(true)```

## each
```js
$.each(ループさせたい値, function() {
    それぞれにさせたい処理;
});
```

## 画面を読み込んだら実行する
```js
$(window).on('load', function() {
    処理;
});
```
```js
$(document).on('ready', function() {
    処理;
});
```
<br>
#### 1. ブラウザオブジェクトの階層構造
![javascript.png](https://qiita-image-store.s3.amazonaws.com/0/178576/b0bf0b79-edb0-5d77-360d-95662576e790.png)

#### 2. on()
onはbind、live、delegateを全て統合したもの
※on以外の```click、load、resize、blur、change、select、mouseover```などはonの入り口に過ぎない

#### 3. readyとloadの違い
※順番的にはreadyがloadより先に実行される
・load
使用する画像などの関連データ含めて、ページ全体が完全に読み込まれたら実行する

・ready
DOMツリーの構築が完了したら実行する
JavascriptでISO8601ベースの日時フォーマットを作成

`2014-05-01T20:45:20+09:00`のように`YYYY-MM-DDThh:mm:ss+09:00`形式をJavascriptで作成したい。この形式は[wikipedia](https://ja.wikipedia.org/wiki/ISO_8601)によるとISO8601の拡張形式らしい。ともあれAPIなどでよく利用されている形式であり、<time datetime="YYYY-MM-DDThh:mm:ss+09:00">2017/02/09</time>などとWebサイトに書いておくと、googleの検索エンジンが拾ってくれて検索結果のスニペット横等に表示してくれて便利である。

下記のようなコードで取り敢えず作成したのでメモ

```js
const date = new Date();
addZero = function(time) {
  return ("0" + time).slice(-2);
}
const ISO8601Date = date.getFullYear() + "-" +
                    addZero(date.getMonth() + 1) + "-" +
                    addZero(date.getDate()) +
                    "T" +
                    addZero(date.getHours()) + ":" +
                    addZero(date.getMinutes()) + ":" +
                    addZero(date.getSeconds()) + "+" +
                    addZero(date.getTimezoneOffset()/(-60)) + ":00";

console.log(ISO8601Date);
```

addZero関数は,０を足した後にslice(-2)をして後ろの２つの数字を返却することで、一桁の数値ならば05など最初にゼロがつけ、２桁以上の数値ならば０をつけない関数である。また、getTimezoneOffset()では日本では-540が返ってくる。これは日本がUTC(協定世界時)よりも540分進んでいる事を意味する。よってタイムゾーンの差を分から時間に直し、さらにISO8601では正負の記号のつけ方が逆なので(-60)で割ってやる。
結果`2017-05-14T21:26:49+09:00`などと出力される。

ところで、UTC(協定世界時）と私が小学校か中学校で習ったGMT(グリニッジ標準時)はどう違うのか気になったので調べてみた。最初GMTが標準的に使われていたらしいが、原子時計だかの発明で時間が正確に図れるようになった結果、地球の自転の速度が時によって変化するということが分かった。その速度の変化を調節するためにうるう秒が使われるらしいが、UTCはその変化に追従する世界標準時らしく、最近はGMTに変わってほぼデファクトとなっているらしい。まあGMTのより正確なものぐらいに考えておけば取り敢えずは良さそうではある。
Raspberry Pi 3をOpenVPNサーバにする（前提環境③）iPhone VPNクライアント

●[Raspberry Pi環境の全体はリンクを参照](http://qiita.com/nabepy/items/47704696e41b10d86186)
# 必要なもの
Raspberry Pi 3をOpenVPNサーバにする（前提環境③）VPNサーバで作成した以下のファイル
　・ca.crt
　・client1.crt
　・client1.key
　・client1.ovpn
　・ta.key
 client2の分も作成していれば、それも確認します。
 また、Windowsパソコンなどコピーする際には権限が必要になりますので、Raspberry Pi側であらかじめアクセス権限を拡張しておきます。
$ chmod 755 ca.crt
など権限を変えておきます。
 これらをWindowsパソコンまたはMacパソコンに取り込んでおきます。WinSCPなどを使うと楽です。
 その際、
 $ sudo ufw allow 22/tcp
 で、ファイル転送のポートを開けておく必要があります。グローバルIPで運用する際は注意してください。


 # iPhoneに設定する
iPhoneクライアントの設定は以下のサイトのとおりに実施します。iPadでも同様です。
 [Raspberry Pi 3にOpenVPNをインストールする(iOSクライアント編) ](http://itemy.net/?p=1190)
 
# ブリッジモードについて
OpenVPNではトンネルモード、つまりサーバ側と端末側が別セグメントの場合しかできません。もしブリッジモードをiPhoneで試したいならば、Softetherのほうが動くとかどこかに書いてありましたのでそちらで試していただければと思います。

この記事はここまでになります。