OmniAICreator/Qiita-1.07M huggingface dataset:
[Survey]Batch Normalization: Accelerating Deep Network Training by Reducing Internal Covariate Shift


何も知らないで使うよりは、少しでも知っていたほうがいいだろうということで、
Batch Normalizationの論文を読んでみました。

# Batch Normalization
この論文は、データの新しい変換方法の提案論文です。
著者はBatch Normalizationと読んでいる。著者いわく、バッチ毎のデータの分布の違い（internal covariate shift)により、学習の収束がおそくなったり、初期値パラメータを慎重に決めなければならなかったと言っています。Batch Normalizationを導入することにより以下の利点があるそうです。

# 利点
・学習が早く進む（learning rateに大きな値を使うことができる）
・初期値依存性を軽減できる
・初期化を気にしなくて良い
・Dropoutの必要性を減らせる

# Algorithm

バッチごとに平均が０、分散が１になるように正規化を行う。この際、Normalizationは、各Featureごとに行う。すなわち、データのFeatureが１０だった場合、平均と分散をそれぞれ１０ずつ計算して、正規化を行う。εは安定化のための係数である。Batch Normalizationは各層の入力で行われる。
γ及びβはパラメータでそれぞれ正規化された値をScaling及びShiftするためのものである。

![範囲を選択_012.png](https://qiita-image-store.s3.amazonaws.com/0/100523/c14e5bc8-5ba7-9425-3df4-c6c7e0529d96.png)

テスト時は、平均と分散の計算は行わず、学習時に計算されたものを使用する。

# Gradient
Batch Normalizationは各層の入力で行われるので、Back PropagationのためのGradientの計算が必要になる。実際、各PlatformではBatch Normalizationがサポートされているので、自ら計算することは無いと思われる。

![範囲を選択_013.png](https://qiita-image-store.s3.amazonaws.com/0/100523/8e670b05-a7db-857f-35ed-bbc78f61f15b.png)

# Experiments
横軸Step回数、縦軸は精度
LSVRC2012のデータ・セット使用して評価
Batch Normalizationを使用することで、学習が早く収束することが下のグラフ及び表からわかる。

![範囲を選択_014.png](https://qiita-image-store.s3.amazonaws.com/0/100523/af19cec7-e8de-b4ef-34b1-33c2519e886c.png)
![範囲を選択_015.png](https://qiita-image-store.s3.amazonaws.com/0/100523/6de44962-5179-f3f7-60f4-d1bca4f06506.png)

# Platform
Chainerでは、「chainer.links.BatchNormalization」とか「chainer.functions.batch_normalization」とかでさくっと使えそうです。

Tensorflowは、「tf.nn.batch_norm_with_global_normalization」を使うようですが、なぜかAPIのDocumentには載っていないです。
Stackoverflowの[ここ](http://stackoverflow.com/questions/33949786/how-could-i-use-batch-normalization-in-tensorflow)に使い方が書いてあります。コピペで動きますが、Chainerの手軽さに比べると少し萎えます。
ただ、コードを見ると、beta,gammaはパラメータ（というか固定ですが）みたいとか、平均、分散はmomentsを使って、Featureごとに計算するとか、計算した平均、分散は、Exponential Moving Averageするとか、中で何をやっているか知ることができます。

# 最後に
入力データに対して、平均を０，分散を１にする処理は前からありますが、batch毎及び各層で行って分布を揃えるというのがいいのかなと思います。
英語で頭が痛くなりました。間違っていないといいのですが。
Swiftはじめたい...その２１ in ってなに？


# swiftには in ってキーワードがありますね。

+ SQLのIN演算子的な？？＜ー違った...

## 関数定義に使うらしい...

+ ググってみたところ関数定義の時に使うらしいです。

```swift:関数だと...
func add(x:Int,_ y:Int) -> Int {
    return x + y
}
print(add(1,2)) // 3
```

+ これだと使ってませんね...

### じゃぁjavascriptの無名関数的な？

+ 無名関数ちっくに書いてみると

```swift:エラーになりました...
let add2 = func(x:Int,_ y:Int) -> Int { return x + y }
```
+ エラーです。

### ここで in の出番です！

```swift:inを使うと...
let add3 = { (x:Int,y:Int) -> Int in x + y }
print(add3(1,2)) // 3
```

+ できました。

### あれ？中はreturnしか書けないの？

+ 安心してください！書けますよ！

```swift:構文も書けます。
let add4 = { (x:Int,y:Int) -> Int in
        var z = 0
        for i in 1...10 {
            z += i
        }
        return (z + x + y)
}
print(add4(1,2)) // 58
```

+ add3 は returnが省略されてたんですね。

## 組み合わせると関数を返す関数も作れました。

```swift:なんのこっちゃ？
let add5 = { (x:Int) -> (Int -> Int) in
    return { (y:Int) -> Int in x + y }
}

print(add5(1)) // (Function)
print(add5(1)(2)) // 3
```

+ はい、意味わかりませんね。
+ add5(1)は(Int -> Int)な関数を返します。中身はx=1は指定されているので ```{ (y:Int) -> Int in 1 + y }``` です。
+ でその関数の引数を(2)としてadd5(1)(2)とするとその関数の中身が1+2=3となるわけです。

## まとめ

+ JavaScriptに慣れていれば、型の宣言がちょっと面倒な程度でわりと理解しやすいんじゃないでしょうか？
:focusのCSSで幸せになる

メモです。

```css:css
*:focus {
  outline: 4px solid #c7dcfc;
}
```


**16/04/08追記:**
こっちのほうがいいかも。

```css:css
*:focus {
   box-shadow: 0 0 0 4px rgba(/* 好きな色のrgb値 */, 0.5);
}
```
これならborder-radiusとかも効くしね。
Mithril.jsでコンポーネントを複数箇所に別々にマウントしてみた

# やってみた
タイトル通り
当然ながら、別に仮想DOMフレームワークはSPA専用じゃないので普通に動く。
コンポーネントが作った実DOMを横取りして、そこに更に別のコンポーネントをマウントする
みたいなアクロバット極まりないことをやらない限りは大体大丈夫。

「素JSやjQueryで作りこんだイケてないページがあるけど、SPAに直すとか到底無理っすわ…」
という場合でも、一部分だけ仮想DOMフレームワークで読みやすくすることはできる。

メリットがあるのかは別として、ある部分はReactJS、別の部分はMithril.js、それ以外では…
みたいなフランケンな構築も可能だと思う。
（Fluxな作りならView以外の部分を協調させたりできるしね？）

なお、今回作ってみたコードはReactに付属してるサンプルのパクリです。

## 注意
この記事は内容が薄すぎます！
読む価値がある記事にするためにはもっと内容を厚くしてください！

## ソース
```html:sample.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>ParallelMount</title>
<body>
  <div id="box1" class="box">
  </div>
  <div id="box2" class="box">
  </div>
</body>
<script src="./mithril.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
'use strict';
const state = {
  a: m.prop(1),
  x: m.prop(1),
  b: m.prop(1),
  y: m.prop(1),
  c: m.prop(0),
  result: m.prop(),
  reculc: function() {
      this.result(
       (this.a() * Math.pow(this.x(),2))
     + (this.b() * this.y())
     + (this.c())
      );
  }
};
const Input = {
  controller: function() {
  	state.reculc();
    return {
      a: function(value) { state.a(parseFloat(value)); state.reculc(); },
      x: function(value) { state.x(parseFloat(value)); state.reculc(); },
      b: function(value) { state.b(parseFloat(value)); state.reculc(); },
      y: function(value) { state.y(parseFloat(value)); state.reculc(); },
      c: function(value) { state.c(parseFloat(value)); state.reculc(); },
    };
  },
  view: function(ctrl) {
	const BR = m.trust('<br>');
	function input(variant, callback, value) {
      return (
      	m('label', {htmlFor:variant}, [variant + ' = ',
          m('input#' + variant + '[type="number"][step="0.01"]',
          {onchange:m.withAttr('value', callback), value:value()})
        ]));
	}
    return [
      input('a', ctrl.a, state.a), BR,
      input('x', ctrl.x, state.x), BR,
      input('b', ctrl.b, state.b), BR,
      input('y', ctrl.y, state.y), BR,
      input('c', ctrl.c, state.c),
    ];      
  }
};
const Output = {
  view: function() {
  	const s = state;
    return ['((',s.a(),') * (',s.x(),')^2) + ((',s.b(),') * (',s.y(),')) + (',s.c(),') = ',s.result()];
  }
};
m.mount(document.getElementById('box2'), Input);
m.mount(document.getElementById('box1'), Output);
});
</script>
<style>
body {
  font-family: monospace;
}
input[type="number"] {
  width: 3rem;
  border-radius: 4px;
}
</style>
```
## 動作イメージ
![image-001.png](https://qiita-image-store.s3.amazonaws.com/0/83175/7ce4e262-8fb0-87d4-8e7b-aa8a817d9bf0.png)
*※Firefoxのテーマについての問い合わせは受け付けかねます。予めご了承ください。*
xargsでzshの自作シェル関数を使う

zsh (少なくともver.5.0.7)ではxargsコマンドで自作シェル関数が使えない。
.zshrcでmyfuncという関数を定義している場合、

````
$ ls hoge | xargs myfunc
````
を実行すると 
`xargs: myfunc: そのようなファイルやディレクトリはありません`
となる。

そこでxargsを実行する際にドットコマンドを用いてmyfunc関数が定義してある.zshrcを一回ずつ一々読み込むようにする。

````
$ ls hoge | xargs -I{} zsh -c ". ~/.zshrc; myfunc {}"
````

ここで
`-I{} zsh -c ". ~/.zshrc; myfunc {}"`
はxargsで複数のコマンドを実行するやり方で、実行される度に`. ~/.zshrc`と標準出力の引数を`{}`に渡し`myfunc`が実行される。


bashでは`export -f`を使えばこのようなことをしなくても済むっぽい。
http://d.hatena.ne.jp/wristed/20120603/1338691396
ただしここで紹介したやり方ではbashでも使えると思う。
マイナンバーのチェックデジットの計算をわかりやすく解説

# マイナンバーのチェックデジットの計算をわかりやすく解説
この記事では、マイナンバーのチェックデジットの計算に挫折した人のために解説をします。

## なんだか計算が難しそう
「マイナンバーのチェックデジットを計算してみたい！自分の周りで流行ってるし！」
「よし計算方法を調べてみよう！」

詳しい解説は他の方がされていますが…
http://qiita.com/qube81/items/fa6ef94d3c8615b0ce64

なんだかシグマとかPとかQとか…ちょっとメンドクサソウです。
「あ、なんだか計算難しそう」と実際に計算をするのを諦めた人も多いのではないでしょうか。
中学校の知識で解けるけど…少しは頭を回転させる必要があるので面倒くさい！
そこで、ピーとかキューとか記号を見ると頭が痛くなる人のためにチェックデジットの計算方法を少しだけわかりやすく解説します。

## 計算方法
マイナンバー（個人番号）は12桁ですが、12桁目は1～11桁目を用いて算出されたチェックデジットになります。
詳しい計算式は他の方の記事なり総務省のドキュメントを参照して欲しいのですが…
チェックデジットの計算方法を簡単に説明すると、こんな感じです。

1. マイナンバーのそれぞれの桁に対し、上位から `6, 5, 4, 3, 2, 7, 6, 5, 4, 3, 2`を掛ける。
2. 1の計算結果の和を11で割った余りを求める。これが`0～1`のとき、チェックデジットは`0`です。
   余りが`0～1`以外の場合は、11から剰余を引いた結果がチェックデジットになります。

### 例：マイナンバーがの上11桁が99999999999の場合
![mynum.png](https://qiita-image-store.s3.amazonaws.com/0/115266/72370538-fbfb-e33b-2765-ed60d4ff95da.png)
図解すると少しだけ簡単に見えますよね？
ハイ、この場合はチェックデジット（12桁目）は`6`になります。

## お約束の計算プログラム
ご自由にお持ち帰りください。

```js:JavaScript
function Mynumber(){}

// 計算用数値Qn
Mynumber.q = [6, 5, 4, 3, 2, 7, 6, 5, 4, 3, 2];

// 12桁の個人番号が正しいかどうかを確認
Mynumber.isValid = function(duodecupleDigits){
  if(!/^\d{12}$/.test(duodecupleDigits)) return false;
  var checkDigit = this.calcCheckDigit(duodecupleDigits.substring(0, 11));
  return duodecupleDigits[11] == checkDigit;
}

// 個人番号の1～11桁からチェックデジットを求める
Mynumber.calcCheckDigit = function(undecupleDigits){
  if(!/^\d{11}$/.test(undecupleDigits)) return -1;
  // Pn * Qn の合計値
  var sumPnxQn = 0;
  for(var i = 0; i < 11; i++){
    sumPnxQn += undecupleDigits[i] * this.q[i];
  }

  var mods = sumPnxQn % 11;

  // (Pn * Qn) % 11 <= 1 のときチェックデジットは 0 とする
  if(mods <= 1){
    return 0;
  }else{
    return 11 - mods;
  }
}
```

```js:JS-Console
Mynumber.calcCheckDigit("99999999999")
=> 6

Mynumber.isValid("999999999996")
=> true
```
無料AWS EC2を使用してウェブサーバーを建てる

awsの無料期間でec2のサーバーを借りてテスト用ウェブサーバーを建てます

とりあえず適当にawsでubuntuのサーバーを借りました(業務でdebian使用しているため)
https://us-west-2.console.aws.amazon.com/console/home?region=us-west-2

httpd入れるとこは以下のコマンドで行います
```sudo apt-get install apache2
```

んでIPなりでアクセスできることを確認

![20160226_1.png](https://qiita-image-store.s3.amazonaws.com/0/115125/0f2eae9c-71ab-a360-88dc-685d025bc2f1.png)

サーバー建てられた。
これから色々試していきます。
direct に RSS を流し込んでみた。

slackにRSSを流し込める連携があり、うらやましく思い、
開発しているメッセンジャー [direct](https://direct4b.com/ja/) にも流し込みたくなり、相談すると…

direct の botフレームワーク [daab](https://direct4b.com/ja/bot/) と hubot のプラグインを組み合わせれば、
普通に作れるよ、と教えてもらったので、daab + [hubot-rss-reader](https://github.com/shokai/hubot-rss-reader) で動くか試してみた。

https://direct4b.com/ja/bot/dev/samples/starter/firstguide.html
を参考に…

daab をインストール

```shell-session
$ npm install -g daab
```

ボットを作って

```shell-session
$ mkdir rssbot && cd $_
$ daab init
```

ログイン情報を登録

```shell-session
$ daab login
Email: loginid@bot.email.com
Password: *****
logged in.
```

ボットを起動

```shell-session
$ daab run
```
※初回起動には起動に時間がかかるよう。

ボットに「ping」と話しかけると「PONG」と返してくれることを確認。
Ctrl+Cでボットを一度止めて、


https://github.com/shokai/hubot-rss-reader
を参考に…

hubot-rss-reader をインストール

```shell-session
$ npm install hubot-rss-reader -save
$ npm install coffee-script@">=1.10.0" -save
```

external-script.json を編集

```text:変更前&nbsp;external-script.json
[]
```

```text:変更後&nbsp;external-script.json
["hubot-rss-reader"]
```


環境変数は .env を書き換えたら良いと教えてもらったので、
.env を編集。既存の行を参考に、hubot-rss-reader 向けに次の環境変数を追加。

```text:.env
HUBOT_RSS_HEADER=[rss]
HUBOT_RSS_LIMIT_ON_ADD=3
```

ボットを起動

```shell-session
$ daab run
```

ボットとのペアトークを作り、
「hubot rss list」と話しかけるも応答なし、
「rss list」と話しかけると応答があった。

試してみると、ペアトークでは「rss list」
グループトークでは「hubot rss list」で応答する様子。


そして、RSSを登録した。
「rss add http://status.direct4b.com/rss」

<img width="489" alt="bot.png" src="https://qiita-image-store.s3.amazonaws.com/0/26343/c8bb5162-29c1-7cb1-f96b-9727c1cf9dc3.png">

ちゃんと動いている様子。
…感動。
カスタマイズCKEditorの一つのアプローチ

**CKEditor**は多くのユーザーを使う**WYSIWYG**（What You See Is What You Get）エディタです。使いやすいし、多くの機能し、十分なドキュメントです。

 <img width="810" alt="Screen Shot 2016-02-27 at 00.25.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/114590/5ef85d52-ef95-b121-711b-a9b32ed7ca06.png">

会社を使っているリストは以下のリンクです。例：IBM、Orcale、 Adobe。。。

　  [http://ckeditor.com/about/who-is-using-ckeditor](url)


**CKEditor**はフリーソフトで、このリンクをダウンロードできます。

  　  [http://ckeditor.com/download](url)

パッケージとCDNリンクを選べます。Internetでパッケージのカスタマイズドキュメントが多いですから、このポストはCDNリンクから、カスタマイズ**CKEditor**の一つのアプローチを説明します。
このリンクは次のようなもの:

  　  [cdn.ckeditor.com/4.5.7/standard/ckeditor.js](url)

# **1. カスタマイズCSS**
動作しているとき, **CKEditor**は*iframe*を作って、この中で全てインタラクティブを起こっています。だから、*Website*のCSSを使えるために、CSSパスは**CKEditor**にインポートすることが必要です。そのことを実行するために、**CKEditor**の*contentsCss*ロパティを変更します。
例えば、**CKEditor**の内容に*Bootstrap*を使いたいです。
```
　  config.contentsCss = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
```
ローカルパスも使うことができます。
しかし、デフォルトの**CKEditor**はいくつかの*element, attribute, style, class*を実行できない。ロック解除が必要です。
一番簡単な方は
```
    　  config.allowedContent = true；
```
ですが、時々、リミットelement, attribute, style, classがあって、以下がいいです。
```
    　  allowedContent: {
      　  　  p: {
        　  　  　  styles: 'text-align'
      　  　  },
    　  }
```
他のは同じです。

# **2.Javascript を実行する**
CSS見たいで、デフォルトは外の*javascript*を実行できない。
わかりやすいために、この例の解決する方を説明します。
例はマウスのドラッグとドロップで*iframe*をリサイズします。
*iframe*がなったら、その問題は簡単だと思います。 
```
　  <script type="text/javascript"> 
  　  　  $(function() { 
      　  　  　  $("#resizable").resizable({ 
      　  　  　  　  helper: "ui-resizable-helper" 
    　  　  　  }); 
  　  　  }); 
　  </script>
　  <div id="resizable" class="ui-widget-content"> <iframe src=" /> </div>
```
でも、**CKEditor**中で、その*javascript* *functioin*を実行できない。どうすればいいですか。。。
解決する方はCKEditorのプラグインを作ります。
```
　  CKEDITOR.plugins.add(PLUGIN_NAME, {
    　  　  onLoad: function() {
      　  　  　  //code
    　  　  }
    　  　  
　  　  init: function(){
      　  　  　  //code
    　  　  }
　  });
```
**onLoad**　と　**init** *function*の中で、*javascript code* を書きます。
```
　  ...
　  init: function(){
　　　  $("#resizable").resizable({ helper: "ui-resizable-helper" });
　  }
　  ...
```
今、*javascript*はまだ実行できない。**CKEditor**にプラグインをインポートすることが必要です。
```
 　  CKEDITOR.config.extraPlugins = PLUGIN_NAME;
```
他のCKEditorのインタラクティブfunctionも供給します。
例：*editor.on(click, select, doubleclick,..)*
```
 　  editor.on( 'doubleclick', function( evt ) {
        　  　  var element = evt.data.element;
        　  　  //code
 　  }, null, null, 100000) ;
```
スマホサイトのコーディング

#スマホサイトのコーディングについて
スマホサイトをコーディングする際は
フォントサイズやボックス、画像の幅・高さ、その他諸諸を
デザインカンプの半分のサイズにする！
という今更な解説

##そもそも一般的なスマートフォンのサイズは幅320pxらしい
（iphone5が320px、6は375pxなのでもはや一般的じゃなくなってきてるが）
自分がよく使うデザインカンプは幅640pxでつくられてるので、
フォントサイズなどを半分にしてコーディングするのは当然なんだが
画像は何でそのまま使うのか？というのをちょっと考えてみた

##デバイス解像度とcss解像度
実際にはiphone5の場合、
デバイス解像度 640x1136px　CSS解像度 320x568
css解像度とかcssピクセルとかいろいろ呼び方があるっぽいけど、プログラム書いたりとかするときはこの値を基準にするらしい。コーディングも同様
この比率（devicePixelRatio）はデバイスによっていろいろで、上記の場合は2になる
iphone6とかはちょっとちがうので割愛

##Retina等での画像の表示
###Retinaとかで画像が荒れる
要するに実際は幅640pxあるスマホで幅320pxの画像を見ることになるので
画像が荒れてしまうらしい。
（↑最近のスマホのサイズを考えると、厳密には違う気がするけど。）

これを防ぐために画像は大きいサイズでスライス、cssでwidth:100%とか指定する
レスポンシブとか考え出すと終わらないので、以上。
Groongaで学ぶ全文検索 2016-02-26


# selectについて

## selectとは

Groongaを操作するインターフェースであるコマンドのうちレコードを取得するもの。
全文検索ではこのselectが肝になる。
※その他にtable_createやloadなどのコマンドもある。
参考)Groonga主なコマンド
http://groonga.org/ja/docs/tutorial/introduction.html#basic-commands

## selectでできること

1. カラムに対して全文検索(絞りこみ
2. カラムの完全一致
3. snippet_html出力<br>対象テキスト中から検索キーワード周辺のテキストを抽出できる。<br>キーワードは `<span class="keyword">` と `</span>`で囲まれている<br>参考)<BR>http://groonga.org/ja/docs/reference/functions/snippet_html.html
4. グルーピングができる<br>著者毎にグルーピングした本のレコードを抽出するなどができる。
5. カラム毎に重みづけして出力順を変更できる<BR>タイトルを著者名より重視するなどの重みづけができる<BR>こちらはクエリ毎に指定できる
6. クエリ言語を解析できる<BR>例)<BR>通常キーワードを複数入力した場合AND検索になるが、<BR>ユーザーが「OR」をキーワードの間に入力した場合<BR>OR検索できるなどのように、ユーザーが挙動をカスタマイズできる
7. 集計機能<BR>下記のような機能がある<BR>カウント<BR>合計<BR>平均<BR>最大値<BR>最小値
8. クエリ展開<BR>例)<BR>焼き肉、焼肉、やきにく<BR>どれで検索されてもヒットするようにできる（あらかじめ登録が必要
9. 重みの底上げ(カラムの重みづけでレコードを取得した後にプラスで重みをつけられる。<BR>例1)<BR>キャンペーン中のレコードは上に出すなど<BR>レコード単位に出力を変えられるため、よりユーザーが欲しいものを上に表示することが可能。<BR>例2)<BR>クリック数が多いものがユーザーが欲しいものだと判断して上に表示するなどもできる
10. ソートができる
11. オフセットが利用できる(途中から取得できる<BR>ページングなどのように途中でデータが追加された場合にも影響を受けたくない場合には、<BR>offsetを常に0にして指定したidより小さいものだけ表示など範囲を指定して検索するようにする。<BR>（登録日時を条件にしてもよい)
12. 複数テーブルをまたいだ検索ができる<BR>例)<BR>キーワードを含むコメントを持った記事を抽出するなどができる。<BR>実現するには記事にコメントの_idを格納するベクターカラムを持つようにする<BR>後から関連するものが増えた場合にカラムを追加する必要があるが、カラム指向のためコストはそれほど高くない
共有ライブラリの依存関係のエラー `cannot open shared object file: No such file or directory`

## 試した環境
* CentOS6.5

今回は、Linux環境でとあるパッケージをYumでインストールした際にそのコマンドが使えなかった。汎用的に同エラーが出た際にも対応出来るような手順で解決した。

## `ogrinfo`を使うときに以下のエラーが出た :sweat_smile: 

```.sh
ogrinfo: error while loading shared libraries: 
libhdf5.so.6: cannot open shared object file: No such file or directory
```

## `yum`でまずは依存関係を調べる :neutral_face: 

```.sh
yum search \*/libhdf5.so.6
yum provides \*/libhdf5.so.6
```

## `yum provides`ででてきたパスから先ほどの`libhdf5.so.6`をgrepかけてみる
libhdf5系のライブラリがどこに入っているかわかった :notes: 

```.sh
ll /usr/lib64/openmpi/lib/ | grep "libhdf5*"
/sbin/ldconfig -p | grep "libhdf5*"
```

## 実際に読み込まれているものは以下で分かります

```.sh
cat /etc/ld.so.conf
```

## `/etc/ld.so.conf.d/`直下のコンフィグファイルを読み取っているので
`libhdf5.so.6`を追加しておく :grinning: :frog: 

```.sh
echo "/usr/lib64/openmpi/lib" >/etc/ld.so.conf.d/ogrinfo.conf
```

## 共有ライブラリの依存関係情報が格納されたライブラリキャッシュを更新しましょう :ghost: 

```.sh
/sbin/ldconfig
```

done :+1: 

一つづつ解決していくことで下手にググるよりもいいでしょう
GPUが使えないLinux環境でChromeをうごかしてWebGLなページを表示する

# 背景

VirtualBoxでLinuxを動かし、そこで、Chromeを動かすと、
3Dハードウェアアクセラレーションの設定をOffにしてもFirefoxと違い、
WebGLが使えない。

OSMesaを使えばできそうなことが分かりやってみた。

# やり方

HDDが30GB程度あるLinux環境を用意する。

chrome本体をビルドと違い、ビルド自体はすぐ完了する。

```shell-session
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
export PATH=$PATH:/path/to/depot_tools
mkdir chromium
fetch --nohooks --no-history chromium
cd src
./build/install-build-deps.sh
gclient runhooks
ninja -C out/Debug osmesa
sudo cp out/Debug/libosmesa.so /opt/google/chrome/
google-chrome --use-gl=osmesa
```

# 参考資料

- [Use osmesa on headless Chromium with Xvfb - Google グループ](https://groups.google.com/a/chromium.org/forum/#!topic/chromium-discuss/NpsDdbtSRsU)

# 関連記事

- [CI環境のNightmareでWebGLを動かす方法や、NightmareでWebGL 2.0を動かす方法](http://abrakatabura.hatenablog.com/entry/2016/03/24/211619)
- [WebGLを使ったElectronアプリをTravis CIで動かすまで](http://abrakatabura.hatenablog.com/entry/2016/11/23/140203)
Swift - 闭包Closure


```Swift
//  Created by Kxx.xxQ 一生相伴 on 16/2/26.
//  Copyright © 2016年 Asahi_Kuang. All rights reserved.
//

import Foundation

// Swift - 闭包Closure

/*  闭包的三种形式

1. 全局函数是一个有名字但不会捕获任何值得闭包。
2. 嵌套函数是一个有名字并且可以捕获其封闭函数域内值的闭包。
3. 闭包表达式是一个利用轻量级语法写的可以捕获其上下文中变量、常量值得匿名闭包。

*/

/*  闭包语法优化

1. 利用上下文推断参数和返回值类型。
2. 隐式返回单表达式闭包，即单表达式闭包可以省略return关键字。
3. 参数名称缩写。
4. 尾随(Trailing)闭包语法。
*/


/* 一般格式

{ (parameters) -> returnType in

statements
}
*/

// 给数组排序
let names:Array<String> = ["Davie", "Ellen", "Alis", "Chris", "Bily"]

func backwards(s1: String, s2: String) ->Bool{
    return s1 > s2
}

// 第一种写法
let result = names.sort(backwards)
print(result)

// 第二种写法 内联闭包函数
let result2 = names.sort({(s1: String, s2: String) ->Bool in return s1>s2})
print(result2)

// 第三种 根据上下文推断参数类型和返回值。因为sort()函数需要的类型已经有了，所以可以省略。
let result3 = names.sort({(s1, s2) ->Bool in return s1>s2})
print(result3)

// 第四种 单表达式闭包 省略return关键字(隐式返回)。
let result4 = names.sort({s1,s2 in s1>s2})
print(result4)

// 第五种 参数名称缩写。这里的$0和$1分别表示第一个String类型的参数和第二个String类型的参数。
let result5 = names.sort({$0 > $1})
print(result5)

// 第六种(不推荐)
let result6 = names.sort(>)
print(result6)

// Swift - 尾部闭包

/*  尾部闭包是一个书写在函数括号之后的闭包表达式。

    如果需要将一个很长的闭包表达式作为参数传给函数使用，可以使用尾部闭包。
*/



func someFunctionsTakeAClosure(closur: () ->()) {
    print("hello world")
}

// 不使用尾部闭包
someFunctionsTakeAClosure { () -> () in
    //
}

// 使用尾部闭包
someFunctionsTakeAClosure() {
    //
}

// 当只有一个闭包作为参数时 可以省略括号
someFunctionsTakeAClosure {

}

// 使用尾部闭包。
let result7 = names.sort {$0>$1}
print(result7)


// 使用map(_:)映射函数实现数字数组转为字符串数组。
let digitNames = [
    0:"Zero", 1:"One", 2:"Two", 3:"Three", 4:"Four",
    5:"Five", 6:"Six", 7:"Seven", 8:"Eight", 9:"Nine"
]

let numbers = [3, 17, 99, 54, 2333]

let results = numbers.map {
    (var num) ->String in
    var output = ""
    while num > 0 {
        output = digitNames[num % 10]! + output
        num /= 10
    }
    return output
}
print(results)

// ->()表示其返回的是一个不需要参数、只有一个返回Int类型的函数，而不是简单的数据类型。
func makeIncretorment(forIncrement amount:Int) ->() ->Int {
    var runningTotal = 0
    func incretor() ->Int {
        runningTotal += amount
        return runningTotal
    }
    return incretor
}

let result = makeIncretorment(forIncrement: 10)
result()
result()
result()

print(result())
// 打印40

// 闭包是引用类型。
let result2 = result()
print(result2)
```
ActiveRecordをsqlで理解する。


```
SELECT  `users`.* FROM `users` WHERE `users`.`email` = 'test@email.com'  ORDER BY `users`.`id` ASC LIMIT 1
```

## ORDER BY
`ORDER BY 'users','id'`だったら
まず`users`でソートしてから、`id`でソートする。

ということになる。

###並べる順番は


`ASC`で昇順

```
1
2
3
4
```

`DEC`で降順

```
4
3
2
1
```

###　行数を制限

`LIMIT 1`

`LIMIT`はデータの先頭から順番に取得する。


## WHERE


ある列の文字列の値がこの文字列の値と等しいのような条件しきになる。

`WHERE `users`.`email` = 'test@email.com' `
userテーブルのemailと'test@email.com'を検索する。

## FROM

```
FROM `users` 
```
FROM <テーブル名>

## SELECT

SELECT <列名>,<列名>....
Rubyでスクレイピング


ちょっと前まではMechanizeとかでやってたんですが、最近のはJavascriptが動くのが前提なサイトが多いので、Capybara+Poltergeistでやることにしてます。

性能で問題が出た時だけMechanizeとかにすれば良いんじゃないかな。


# PhantomJS入れる

```
brew install phantomjs
```

# Gem入れる

```rb:Gemfile
gem 'nokogiri'
gem 'poltergeist'
gem 'capybara'
```

# アクセスするところまで

User-Agentは適当に

```rb

require 'capybara/poltergeist'

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, {:js_errors => false, :timeout => 5000 })
end

session = Capybara::Session.new(:poltergeist)

session.driver.headers = {
    'User-Agent' => "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2564.97 Safari/537.36"
}
session.visit "http://www.yahoo.co.jp"
```

# Capybara周りの使い方

## ID/パスワード入力して次のページヘ

```rb
email_input = session.find('input#email')
email_input.native.send_key('mail@example.com')

password_input = session.find('input#password')
password_input.native.send_key('mypassword')

submit = session.find('#submit-button')
submit.trigger('click')
```

## htmlを取得

```rb
html = session.html
```

## iframeの中のHTMLを取得

```rb
iframe_html = session.evaluate_script('$("#IFrame")[0].contentWindow.document.body.innerHTML')
````

## htmlをパースしてオブジェクト生成

```rb
doc = Nokogiri::HTML.parse(html)
```


# Nokogiriの使い方

参考: http://d.hatena.ne.jp/otn/20090509/p1

基本的にはCSSセレクタ派なのでその使い方をメインに

### cssセレクタで要素を検索
```rb
elements = doc.css('.section')
```

参考 http://weboook.blog22.fc2.com/blog-entry-268.html

### HTMLを取得

```rb
to_html = doc.to_html
inner_html = doc.inner_html
```

### 属性

```rb
keys = doc.keys #属性名
values = doc.values #属性値
attributes = doc.attributes #ハッシュで
```



これくらいあればだいたいなんでもできるはず（たぶん）。
[iOS] Create Push Notification pem certificate

Normally, the certificate you created from the iOS developer center is a `.cer` format certificate.

After you install this `.cer` format certificate, you can export the certificate with a format of `.p12` from keychain.

At last you can use the following command to convert the `.p12` certificate to `.pem` certificate for some tools such as Houston.

```
openssl pkcs12 -in cert.p12 -out apple_push_notification.pem -nodes -clcerts
```

Reference:
[Houston](https://github.com/nomad/houston)
SkinnyFramework+TomcatでUser Agentを取得する

- SkinnyFramework 2.0.6
- Tomcat 8.0.32

SkinnyFramework上で動作するアプリを作っていて、ダウンロードするファイル名が日本語を含む関係上、User Agentを見てゴニョる必要がありました。

で、いつものように

`val ua = request.getHeader("User-Agent")`

とやって取得していたわけです。

jetty上で動作することを確認して、意気揚々とTomcat上にwarファイルをデプロイしました。

...あれ？IEでファイル名が化ける...？UA取れてない？

ログを仕込んでみたところ、Tomcat上では

`val ua = request.getHeader("user-agent")`

でなら取得できるみたいです。小文字かよ！

コンテナでの違い？なんでしょうか。何か、こういうの、統一してほしいなぁという大きな独り言。
Swiftメモ  文字列strの中に"ほげほげ"が含まれるかチェックする方法

#1. 文字列strの中に"ほげほげ"が含まれるか

rangeOfString()...最初に見つかった位置の範囲を返す。今回は(7..<11)
見つからなかったらnil が返る

```Swift:sample
let text = "エレクトリカルパレード"

if text.rangeOfString("パレード") != nil {
    print("文字列textにパレードが含まれる")
}
```




#2. 前方一致、後方一致ver

hasPrefix()で前方一致
hasSuffix()で後方一致
一致する場合はtrue
一致しない場合はfalse
が返る

```Swift:sample
let itemList = ["カレーうどん", "わかめうどん", "カレーライス", "アボガドうどん"]
var menu1 = Array<String>()
var menu2 = Array<String>()

for item in itemList{
    if item.hasPrefix("カレー"){
        menu1.append(item)
    }
    if item.hasSuffix("うどん"){
        menu2.append(item)
    }
}
print(menu1) // ["カレーうどん", "カレーライス"]
print(menu2) // ["カレーうどん", "わかめうどん", "アボガドうどん"]
```
CSS 画像を中央配置

#画像の上下中央を揃えるのによくやるやつ

上下中央を揃えるのに、vertical-alignを指定したり
block要素にはvertical-alignきかないのでdisplay:table-cellを指定したり
というやり方はなんかイマイチなので

##imgを中央配置したいとき
画像自体を調整するのが一番だけど、結構手間だし
サイズが微妙に違う画像に同じスタイルあてたいときとか
![2.png](https://qiita-image-store.s3.amazonaws.com/0/106705/58f22341-17b0-49b1-331b-1ce877acbbff.png)


```css:css
p{
    position: relative;
    width: 100px;
    height: 100px;

}
img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
```

##imgが親のblockよりも大きい場合
アイコンなどで余白が大きかったり
画像の中央しか表示させる必要がないとき
![1.png](https://qiita-image-store.s3.amazonaws.com/0/106705/c1694ab3-b5cc-d1e6-c19f-2a273b5410f1.png)


```css:css
p{
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;

}
img{
    position: absolute;
    top: -50px;
    bottom: -50px;
    right: -50px;
    left: -50px;
    margin: auto;
}
```

親要素をoverflow:hidden
imgのpositionの値をネガティブにする(必要十分な大きさ)

こうすることで四隅のマージンが均等に調整され
画像を中央に配置できる
Windowsで「ファイル拡張子 ".js" を持つスクリプト エンジンはありません」

# 現象

Windows10にあげたら？hogehoge.jsを実行できなくなった


# 対策

下記サイトに対応方法があった。

[ファイル拡張子 ”.js” を持つスクリプト エンジンはありません。 - kagasuの日記](http://d.hatena.ne.jp/kagasu/20150110)

js.regを作成して

```
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\.js]
@="JSFile"

[HKEY_CLASSES_ROOT\.js\PersistentHandler]
@="{5e941d80-bf96-11cd-b579-08002b30bfeb}"
```

でダブルクリックでOKっぽい
限定共有のGoogleCalendarをLambda(Python)で操作する【cloudpack大阪】

ドハマリしたので備忘録。
限定共有にしているGoogleカレンダーをLambda(Python)で操作します。
_仕事でやったんですけど、着手一週間前にGoogleのライブラリ更新された悲劇を日本最速でお届けします。_


## 必要なライブラリ

以下、pipで入れてくだしあ

* httplib2
* oauth2client
* google-api-python-client 
* pyCrypto


## サービスアカウントの作成
GoogleCalendarにアクセスするために、サービスアカウントと呼ばれる認証用ユーザーを作成する必要があります。

[GoogleDeveloperConsole](https://console.developers.google.com/) からAPI Managerにアクセスします。

![API_ライブラリ_-_msp-calendar.png](https://qiita-image-store.s3.amazonaws.com/0/73113/b63dcd5c-3963-9e3f-c433-123d8e3ffdc0.png)

CalendarAPIをEnableに。
![Calendar_API_-_msp-calendar.png](https://qiita-image-store.s3.amazonaws.com/0/73113/d78a6c9b-684f-d07f-860c-aca1060e76e7.png)

「API Manager」から「認証情報」へ移動し、サービスアカウントキーを作成。
![認証情報_-_msp-calendar.png](https://qiita-image-store.s3.amazonaws.com/0/73113/af7ad365-f835-0923-1cac-d6f591f23647.png)

名前とサービスアカウントIDを入力してください。
サービスアカウントIDをは後ほど利用します。
また、今回はキータイプp12を指定します。
![サービス_アカウントキーの作成_-_msp-calendar 2.png](https://qiita-image-store.s3.amazonaws.com/0/73113/138c733a-99d3-f6f0-2583-4b7482583278.png)

p12ファイルがDLされるので、pemに変換
`openssl pkcs12 -in key.p12 -nodes -nocerts > key.pem`

## カレンダーの共有設定
作成したサービスアカウントをGoogleカレンダーの共有ユーザーに追加してください。
公式ドキュメントには、ここの記述を見つけられずハマってました。
なりすましユーザーどうこうみたいな記述はあったんですが、追加しないと操作できないっぽいです。

1. Googleカレンダー右上の歯車から「設定」
2. 「カレンダー」タブを選択し、「共有：設定を編集」へ
![アイレット株式会社_-_カレンダー_-_設定.png](https://qiita-image-store.s3.amazonaws.com/0/73113/33b9f938-3e86-300b-6c18-ce0aa009449a.png)
3. 先ほど作成したサービスアカウントを追加
![アイレット株式会社_-_カレンダー_-_共有.png](https://qiita-image-store.s3.amazonaws.com/0/73113/a03d1417-d20c-7f57-184e-997f95076529.png)



## ソースコード

```python
import httplib2
from apiclient import discovery
import oauth2client
from oauth2client.service_account import ServiceAccountCredentials
from datetime import datetime as dt

SERVICE_ACCOUNT_ID = "xxx@xxx.xxx" # 取得したサービスアカウント

def lambda_handler(event, context):
    credentials = get_credentials()
    http = credentials.authorize(httplib2.Http())
    service = discovery.build(
        'calendar',
        'v3',
        http=http
    )

    events = service.events().list(calendarId=CALENDAR_ID).execute()

    return events.get('items', [])


def get_credentials():
    scopes = 'https://www.googleapis.com/auth/calendar'
    credentials = ServiceAccountCredentials.from_p12_keyfile(
        SERVICE_ACCOUNT_ID,
        'key.pem',
        scopes=scopes
    )

    return credentials
```

あとは `lambda-uploader` なり自分で圧縮するなりでLambdaにアップすればオッケーです！
Drupalキャッシュを有効化するとテーマが崩れる

Drupal管理画面のパフォーマンス設定で 帯域幅最適化 > CSSファイルをまとめて圧縮する（Aggregate and compress CSS files.） のチェックをオンにしておくと複数CSSファイルをひとつにまとめてくれます。

<img width="470" alt="スクリーンショット 2016-02-26 19.48.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/39468/e6b81a4d-f2de-0307-0314-c39c46cc542b.png">


帯域幅最適化の設定をしておくと、ファイルサイズが減少するので回線の帯域の使用率が軽減されることと、ファイル数が減ることでセッション数減り、パフォーマンスが向上します。


DrupalのCSSファイル圧縮機能の仕組みは、複数CSSファイルを1つのCSSファイルにまとめて「sites/default/files/css」に保存されて、以降はこの圧縮ファイルがロードされるようになります。

ただ、このCSS圧縮機能を有効にしているときに、ごくまれにテーマが崩れることがあります。

#テーマが崩れる原因

理由は以下5つが挙げられます。

##1. 圧縮CSSの保存先にApacheユーザーの書き込み権限がない

DrupalはApacheユーザーで動作するので、そのユーザーにフォルダ書き込み権限がなければCSSファイルを生成できずに表示崩れの原因になります。


##2. cssファイルの中で @import を使っている

CSSファイル内で @import を使っているとファイル順序がバラバラになってしまい、意図した継承・上書きがされなくなってしまいます。
@import を使っていないつもりでも導入モジュールの中で使われていることがあるので、意図せずにテーマが崩れたらその辺が原因になっている可能性はあります。
導入モジュールが原因のときはコントリビュートモジュールを修正するわけにもいかないので、テーマ側のCSSファイル上で @!important などを利用して影響を受けないような工夫をする必要があります。

ただし、CSSファイルに記述した場合に問題が起こりますが、SASS/SCSSで使う分には問題ありません。


##3. cssの圧縮ファイルの保存ディレクトリに英数字とアンダースコア以外の特殊文字を使っている

保存ディレクトリに英数字とアンダースコア以外の特殊文字を使っている場合にCSSファイルが保存されないと、Drupal.orgのスレッド上で報告がされています。


##4. cssをgzip圧縮の設定をしているときに古いIEブラウザが読み込めない

古いIEブラウザ（IE6）は、gzip圧縮されたCSSを解釈できませんでした。ただ、2016年時点でIE6に遭遇することはないので気にすることはないでしょう。


##5. CSSのgzip圧縮で失敗する

この問題が起こるのは .htaccessファイルに自前でgzip圧縮の処理を書いてしまっている場合に、記述ミスなどが原因によるものです。
回避方法は、自前で処理を書かずにApacheのmod_deflateに任せるか、または Drupalモジュール「Advanced CSS/JS Aggregation（advagg）」を導入することです。

ほかの原因には、Drupalキャッシュ + (nginx + Varnish)でcssのgzip圧縮が失敗するという報告があります。
ウェブサーバがnginx + Varnishの組み合わせでは常にCSS・JSファイルをgzip圧縮されるが、Drupalキャッシュと合わさるとファイルエンコーディングがおかしくなることが原因のようです。
解決策は、Drupalキャッシュを有効化する場合、nginx + Varnishのデフォルト設定を変更する必要があります。
VMware vmtoolをUbuntuにインストールする


1. VMToolをUbuntuにマウント
![Screenshot from 2015-12-18_0.png](https://qiita-image-store.s3.amazonaws.com/0/104339/49ba3084-a8e1-4ad9-8358-1844dfa27c64.png)



2. VMWareTools-xx.x.-xxxxxxx.tar.gz をホームにコピー


3. ターミナルを起動し、アーカイブを解凍

```
tar zxvf VMwareTools-10.0.5-3228253.tar.gz 
```

![Screenshot from 2015-12-18_1.png](https://qiita-image-store.s3.amazonaws.com/0/104339/e384998d-e92f-0f59-e160-b92e092bd41e.png)



4．解凍したディレクトリへ移動し、管理者権限でvmware-install.plを実行

```
cd vmware-tools-distrib/
```

```
sudo ./vmware-install.pl 
```
![Screenshot from 2015-12-18_2.png](https://qiita-image-store.s3.amazonaws.com/0/104339/933c8d1e-b1e9-cff4-0370-c956b4368701.png)



5．いろいろ聞かれるのでEnterを押す。Enjoyというメッセージが見えたら終わり。
![Screenshot from 2015-12-18_3.png](https://qiita-image-store.s3.amazonaws.com/0/104339/012a110b-5ce1-ec9f-3381-bf514a0b9620.png)
phpで時刻使うならDateTime使いましょう

php5.2以上ならDateTimeが使えるのでDateTime使いましょう。date()よりは便利です。

基本ここにまとめてある
http://qiita.com/re-24/items/c3ed814f2e1ee0f8e811

かるく補足

## 任意の日時を作成(現在を基準に1日前とかやりたい場合)

```php
$date1 = new DateTime(); // 20160101-00:00:00
$date2 = new DateTime('+1 days'); // 20160102-00:00:00
$date3 = new DateTime('-1 days'); // 20151231-00:00:00
$date4 = new DateTime('+1 weeks'); // 20160108-00:00:00
$date5 = new DateTime('+1 month'); // 20160201-00:00:00
$date6 = new DateTime('+1 hours'); // 20160101-01:00:00
$date7 = new DateTime('+1 mins'); // 20160101-00:01:00
$date8 = new DateTime('+1 seconds'); // 20160101-00:00:01
```

## 時間の比較

```php
$date1 = new DateTime();
$date1_ = new DateTime();
$date3 = new DateTime('-1 days');

if($date1 == $date1_) {
    echo 'ok';
};

if($date1 > $date3) {
    echo 'ok';
};
```

## 任意の時間を指定(実行日の9時とか、実行日の3日前の9時とか)
```php
// create_date('today')で実行日の0時0分がとれる
$this_9 = date_create('today')->modify('+9 hours'); 

// create_date('today')で実行日の0時0分がとれる
// 3日前に戻した後、9時間増やす
$this_9 = date_create('today')->modify('-3 days')->modify('+9 hours'); 


```
concern内で共通化したいメソッドを定義する


Concern `Abc(abc.rb)` と Concern `Xyz(xyz.rb)` があって、どっちからも参照したいメソッドを一つのファイルにまとめたいときはmoduleを一つ定義して両者にincludeするといいっぽい。

```
concerns/
  |
  +--abc.rb  <--
  |             |--どっちからも使いたいメソッドがある
  +--xyz.rb  <--
  |
  +--helper.rb
```

```concerns/helper.rb
module Helper
  def hoge_helper
  end
end
```

```concerns/abc.rb
module Abc
  extend ActiveSupport::Concern
  include Helper
  included do
    def abc_method
      hoge_helper # <- helper.rb に定義されている hoge_helper が使える
    end
  end
end
```

```concerns/xyz.rb
module Abc
  extend ActiveSupport::Concern
  include Helper
  # 略
  # こちらからも helper.rb に定義されている hoge_helper が使える
```
WebRTC エラーメモ

#gclient runhooksで↓みたいなエラー出た時
>Updating projects from gyp files... 
find: `src/third_party/android_tools/sdk//extras/google/google_play_services/libproject/google-play-services_lib/res': No such file or directory
src/third_party/android_tools/sdk//extras/google/google_play_services/libproject/google-play-services_lib/res -type f' returned exit status 1.

Google Play Servicesがないよ！的なエラー。
src/third_party/android_tools/sdk//extras/google/google_play_services あたりに何も入ってなかったら、sdk/tools/android コマンドでインストールする必要がある

パッケージリスト確認
third_party/android_tools/sdk/tools/android list sdk

Google Play Serviceを指定してインストール
third_party/android_tools/sdk/tools/android update sdk --no-ui -t 44

多分これで通る。
すげーはまった
[Laravel]バリデーションのuniqueにおける条件指定について

#先に結論

* uniqueルールの追加条件の指定はイコール以外も色々行ける。
* NULL, NOT_NULLを指定する場合は大文字でなくてはいけない。
* 小文字だと文字列として比較する。

|unique:table,column,except,idColumn以降|付加される条件        |
|:---------------|:------------------|
|,column,!value (Larvel5.2以降)   | column != value   |
|,column,NULL     | column is null    |
|,column,NOT_NULL | column is not null|

※,column,!valueが指定できるのは5.2以降でした。
※また、column1,value1,column2,value2,...と続ければ複数個設定できる。
※フィールドの値が、指定されたデータベーステーブルに存在することをバリデートするexistsルールも同様。

#以下雑記

Laravelのバリデーションにはuniqueという、指定したフィールドがテーブル内で一意であることをチェックする為のルールがあります。
http://readouble.com/laravel/5/1/ja/validation.html#rule-unique

ユーザ登録周りの処理なんか書くときなんかすごい便利そうですね。

でもこれ、Eloquentモデルのほうでソフトデリート設定してたとしても、親切にデリートされたレコードを無視してくれるなんてことは無いみたいでチェック時に発行されるクエリは以下のようになります

```
select count(*) as affregate from `users` where `email_address` = 'test@example.com'
```

当然既に削除されているemail_addressがtest@example.comのレコードがあれば、uniqueルールは通りません。

うわー使えねー。と思うにはまだ早いです。uniqueルールには追加のWHERE節を付け加える事ができます。
ということでdleted_at,nullとか設定すると発行されるのは

```
select count(*) as affregate from `users` where `email_address` = 'test@example.com' and `deleted_at` = 'null'
```

。。。違う。

ダメかーカスタムバリデーション作らなきゃダメかーと思いましたが、Laravelのソースコードは読みやすいと評判なのでダメ元で読んでみると

Illuminate\Validation\ValidatorのvalidateUniqueメソッドが呼ばれていて、追加条件の設定を追っていくと
Illuminate\Validation\DatabasePresenceVerifierのaddWhereメソッドにたどり着きました。

そこに書かれていたものが、こちら

```php
    protected function addWhere($query, $key, $extraValue)
    {
        if ($extraValue === 'NULL') {
            $query->whereNull($key);
        } elseif ($extraValue === 'NOT_NULL') {
            $query->whereNotNull($key);
        } elseif (Str::startsWith($extraValue, '!')) {
            $query->where($key, '!=', mb_substr($extraValue, 1));
        } else {
            $query->where($key, $extraValue);
        }
    }
```

。。。解決！！

その後見ていたらExistsルールのところに全部書いてあるじゃないですか。
http://readouble.com/laravel/5/1/ja/validation.html#rule-exists
uniqueでも一緒とは書いてないけど。
まぁ結論はドキュメントちゃんと読めということですかね。

文字列としてNULL、NOT_NULLを条件にしたい時はどうしたらいいんだ。
まぁそんなケース無いだろうけど。
何かの時に使えるかもしれない、ナビバーokayNav

たまたま発見したので試してみました。
何かの時に使うかもしれないのでメモっておきます。

ブラウザサイズによって、ナビバーのリンクが溢れた時に自動的に「・・・」に収納されてドロワーになる、みたいな感じのものだと思います！

動きはgithubのデモを見ていただければわかりやすいかと！

# 公式github

https://github.com/VPenkov/okayNav

# 使い方

jQueryが必要なので、jQuery入ってる前提で、
さっくりとhtmlとjsのサンプルを残しておきます。

とりあえずcloneしてきます。

```bash
$ git clone https://github.com/VPenkov/okayNav.git
```

で、あとは中のdistからcssとjsを読めばOK。
かなり雑ですが、htmlファイル（jQueryはめんどいのでCDNで）

```html:sample.html
<html>
  <head>
    <link rel="stylesheet" href="./okayNav/dist/css/common.min.css">
    <link rel="stylesheet" href="./okayNav/dist/css/okayNav.min.css">
  </head>
  <body>
    <header id="header">
      <a class="site-log" href="#">
        Logo
      </a>

      <nav role="navigation" id="nav-main" class="okayNav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
          <li><a href="#">Link3</a></li>
          <li><a href="#">Link4</a></li>
          <li><a href="#">Link5</a></li>
        </ul>
      </nav>
    </header>

    <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="./okayNav/dist/js/jquery.okayNav-min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>
```

初期化するためにjsをちょろっと書く必要があるみたいなので、書いておきます。

```js:app.js
var navigation = $('#nav-main').okayNav();
```

これで以下の感じの挙動になります。
お手軽だけど、どこかで使うことあるかな〜

### 広い時
![スクリーンショット 2016-02-26 19.29.41.png](https://qiita-image-store.s3.amazonaws.com/0/105934/3b637676-2fad-8681-71ca-a73724b2e88b.png)

### 縮めた時
![スクリーンショット 2016-02-26 19.29.51.png](https://qiita-image-store.s3.amazonaws.com/0/105934/5c9ff735-e4f5-59cf-ffa1-bacb7c0e1799.png)

### ドロワー開いた時
![スクリーンショット 2016-02-26 19.29.59.png](https://qiita-image-store.s3.amazonaws.com/0/105934/e44c1cc9-beaf-26b7-4bb5-5ffb2330fe4a.png)
シンプルでわかりやすいステータスライン

# 要望
## vimを開いた時、必要最低限の情報を表示していてほしい。
最近（ようやく）tmux使いはじめた。

画面をパネルで分割してたら、どれがなんのファイルだかわからなくなる時がある。
最下部のステータスラインはいろんな情報表示してくれるので嬉しいが、
いろんな情報出されたら狭いスペースに入りきらなくて、ほしい情報が見切れる事がよくある。

そんな時、イライラムカムカする。


# どうする？
ステータスラインをシンプルでわかりやすく。

とりあえず欲しい情報は下記だけ。

* ファイル名
* エンコード
* 行数

ちなみにおいらはvimがメインのエディタのpythonとかrubyとかがメインのWEBエンジニア。

他に有用な情報があれば教えてほしいです！


で、.vimrcにはこれを書いた。

```vim:.vimrc
" ファイル名表示
set statusline=%F
" 変更チェック表示
set statusline+=%m
" 読み込み専用かどうか表示
set statusline+=%r
" ヘルプページなら[HELP]と表示
set statusline+=%h
" プレビューウインドウなら[Prevew]と表示
set statusline+=%w
" これ以降は右寄せ表示
set statusline+=%=
" file encoding
set statusline+=[ENC=%{&fileencoding}]
" 現在行数/全行数
set statusline+=[LOW=%l/%L]
" ステータスラインを常に表示(0:表示しない、1:2つ以上ウィンドウがある時だけ表示)
set laststatus=2
```

結果はこんなん。

![スクリーンショット 2016-02-26 19.47.40.png](https://qiita-image-store.s3.amazonaws.com/0/11531/7e096251-25f0-64bd-53fa-d862d0dd6caa.png)

以上。

# Reference
[最初に”vim statusline”でヒット](http://blogged.e2esound.com/2008/08/16/vim%E3%82%B9%E3%83%86%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9Astatusline/)
[細かいフォーマットの説明](http://qiita.com/sizucca/items/40f291463a40feb4cd02)
[laststatusってなに？](http://www.atmarkit.co.jp/ait/articles/1107/21/news115_2.html)
【パズル７】ほとんどのエンジニアには解けるパズル７（CUBES）

エンジニア向けのパズルシリーズの７作目を公開した。[サイト](http://challenge-your-limits7.herokuapp.com/)にアクセスいただくと、読んで字のごとくCUBESがズラッとある。（スマフォで見るのはちょっとキツいかも）

<img width="512" alt="20160226003405.png" src="https://qiita-image-store.s3.amazonaws.com/0/108761/effbeb69-99e2-6656-a1e9-6e86297551c6.png">

前回までのパズルに挑戦いただいた方から「ミスマッチを防ぐために事前にどんな知識を問う問題なのかを明示して欲しい」というご意見をいただいた。なのでハッキリさせる。

不要なモノ
- 英語ほぼ不要
- ツール不要（ウェブブラウザのみ）
- 技術知識ほぼ不要

必要なモノ
- 変な問題を前にした時にも美しく完璧なアルゴリズムを生み出しサッと解決してしまうエンジニア的な勘の鋭さ

まず今回のパズルはいつもよりビジュアルに凝って作った。前回「英語キツい」と言う方がいらっしゃったが、今回は英語で詰まる人はまず居ない。問題の出題がほぼ動く図だけで完了するからだ。

特定の技術を知っておく必要は無いし、ツールも使わない。解答は全てサイトにあるフォームに答えを入力してOkボタンを押すだけ。

今回のパズルで「次に何をすればいいのか分からない」と言ってしまう人は皆無だろう。

だからと言って、カンタンなパズルという訳ではない。
プログラム言語は問わないが、エンジニアにとっては不可欠な問題解決にあたっての美しいアルゴリズムを生み出すセンスが必要だ。問題自体は誰でも理解できるが、それを解くのはちょっと難しくて、センスが必要。
間違いなく言えることはトップに躍り出て来る方達は極めてアルゴリズム系の勘が鋭い方だ、ということ。作者ではなく挑戦者としてパズルに参加していたら、トップ１０に入るのはキツいだろうな、と思いながらいつもトップリストを眺めている。なのでトップ解答者には尊敬と感謝を込めて、その勝利コメントをブログにて紹介させていただくつもり。

パズル７の最後の問題はもし間違った解答を入力すると、問題の数値などが再設定される仕組みにした。これはなにもイジワルをしている訳ではない。要は近似値を使うのではなく、完璧なアルゴリズムで正しい答えを持つ人だけが正解者となるようにしたかったからだ。
問題の質から近似値の予想がきっと当たる。例えばある挑戦者が２５という答えを入れて、それが間違いだったとする。すると２５がダメなら２６，２７、もしくは２４，２３と近似値を入力していけばきっと当たる。そういうやり方では正解になって欲しくないのだ。１とか２とかの差に気がついて、そこを完璧にするのが本パズルの面白さのひとつだから。

もし今回の「CUBESパズルをやってやろうか」とお考えであればぜひソーシャルボタンを押して、ご友人にも紹介し挑戦者を増やしていただきたい。トップの解答者欄にコメントを残すのであれば「たくさんの挑戦者の中を勝ち抜いたんだゾ！」となった方が面白いのではないだろうか。

本パズルシリーズの目的である「優秀なエンジニアにパズルを通して楽しんでいただくこと」が達成されていれば幸いである。


【パズル７】ほとんどのエンジニアには解けるパズル７（CUBES）
公開日時：２０１６年３月３日（木）の午後１０時３０分（日本時間）
http://challenge-your-limits7.herokuapp.com/


【詳細を書いたブログ】
http://tango-ruby.hatenablog.com/
JavaScriptで描画された<a>タグも含めてページ内のリンクをすべて取得したい

[wgetでサイト全体をミラーダウンロードする]方法を紹介しましたが、JavaScriptゴリゴリのページはこの方法ではうまくいきません。これはwgetがJavaScriptを解釈しないためです。例えば、次のようなHTMLではwgetはリンク先を見つけることができません。

```html:demo.html
<script>
document.write('<a href="test.html">link</a>');
document.write('<a href="test2.html">link2</a>');
document.write('<a href="test3.html">link3</a>');
</script>
```

この場合、WebDriverと実ブラウザを使ってJavaScript実行結果を取得するプログラムを実装する必要があります。

以下は、JavaScriptで描画された`<a>`タグも含めてページ内のリンクをすべて取得するRubyのサンプルコードです。

```
gem install selenium-webdriver
```

```rb:main.rb
require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox # ブラウザ起動

# ページからURL一覧を取得する関数
def get_all_links(driver, url)
  driver.navigate.to url # URLを開く
  elements = driver.find_elements(:tag_name, 'a') # aタグ全部
  return elements.map {|element| element.attribute('href')} # aタグからhrefを取り出す
end

urls = get_all_links(driver, 'http://localhost:9000/demo.html')

# TODO: 取得してきたURLに対してスクレイピングをかける

driver.quit # ブラウザ終了
```

[wgetでサイト全体をミラーダウンロードする]: http://qiita.com/suin/items/7241135f1684636652ac
leJOSにおけるモーターの同時停止

# leJOSとは
レゴマインドストームをJavaで動かすためのファームウェア

公式サイト
http://www.lejos.org/

# モーターの同時停止
授業で、EV3のモーターが同時に停止せずに困るという声が上がったため調査した。

この様にしていると、モーターは順次停止するため、ズレて停止する。

```java
rightMotor.stop()
leftMotor.stop()
```

以下のように、stopメソッドの引数にtrueを入れることで、モーターの停止は逐次処理から並列処理となる。

```java
rightMotor.stop(true)
leftMotor.stop()
```

# 参考動画
同時停止をする場合としない場合の参考動画
動きにかなり違いが出ることがよく分かる。
https://youtu.be/SmqLGs-GAEA
Qiita記事一覧にストック数に応じた背景色を塗るユーザースクリプト


## 概要
記事一覧のストック数に応じて背景色を追加します。

2,3日分のすべての記事を確認する際に、流しで確認するとタイトルのみで判断してしまいます。注目されている記事も合わせて確認したいと考え、ストック数に背景色を塗ることで気づきやすいようにします。


## スクリーンショット

![スクリーンショット 2016-02-26 18.27.45.png](https://qiita-image-store.s3.amazonaws.com/0/84376/103882ac-71f8-5fcc-8de8-65a8f48c3380.png "スクリーンショット 2016-02-26 18.27.45.png")

ストック数に応じた濃さのオレンジ色になっています。

## 参考
* [Qiitaのフィードのコメント数ごとに背景色を追加するユーザースクリプト](http://qiita.com/khsk/items/ddec9a9eed62bebec67e)
* [Tampermonkey（またはGreasemonkey）を使ったJavaScriptプログラミング](http://www.symmetric.co.jp/blog/archives/920)
* [配色を考えるのが面倒ならhsl()を使おう](http://qiita.com/karore/items/5edd2a67340770a8ca44)

既にありそうだなと検索したところ、コメント数で同様のことをしている方がいましたので、ストック数に適用しました。(ほぼ写経です)


## 動作検証環境
* Google Chrome バージョン 48.0.2564.109 (64-bit)
* Tampermonkey 3.12.58

## 動作ページ
* フィード
* すべての投稿
* ストック
* 自分の投稿

参考と同様です。

## コード

```javascript
// ==UserScript==
// @name        Qiita add background color to stock
// @namespace   snonaka
// @description 記事のストック数に合わせて背景色を変更する
// @include     http://qiita.com/
// @include     http://qiita.com/items
// @include     http://qiita.com/stock
// @include     http://qiita.com/mine
// @version     1
// @grant       none
/* load jQuery */  
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js  
// ==/UserScript==

  console.time('stock color');
  // 変更を監視する。追加分だけには対応しておらず、毎回全チェック。
  var mo = new MutationObserver((data1, data2) => {
    // ストック数によって背景色を追加する
    $('.js-stock-count').each( function() {
      var stock = parseInt(($(this).text()));
      if(stock > 100) { 
        stock = 100;
      }
      $(this).css('background-color','hsl(30, 100%, ' + (100 - stock/2) + '%)');
    });
  });

  var options = {childList: true, subtree:true};
  mo.observe($('.streamContainer')[0], options);
  console.timeEnd('stock color');

```

* 参考元ではjQueryを使用していませんが、Tampermonkeyでは *@require* で簡単に利用可能だったので利用しています。
* 背景色はhsl()を利用することでストック数に応じた濃淡に変化させています。


## コメント
* ストック数0で白、100件でオレンジとしたのですが数件では色が付いて見えないため、1件以上の場合ははっきりと見えるように設定したほうが良いかもしれません。
* 背景色を変える場所ですが、記事全体を変えた際にタイトルの文字が見づらくなってしまったため、控えめにしました。
Implementing functional languages を頑張って読む.4日目

# 4日目

## 1.5.7
結局iseqが何なのかわからないまま1.5.7を迎えた.いろんな目的のためにiseq使うよとか書いてあるのでそのうち困る.
困ったらhaskell使う.
2つのgeneral pointsも何言ってるかよくわからない.

## 1.6
パーサを作る.

1. 最初にファイルの中身を読む.これは簡単.
1. レキサを作ってトークンに分解する.`clex :: String -> [Token]`
1. 文法解析をしてCoreProgramに落とす.` syntax :: [Token] -> CoreProgram`

うーん.文字にされると簡単そうに見える.
パーサ自体はclexとsyntaxの組み合わせ.

```
parse :: String -> CoreProgram
parse = syntax . clex
```

コメントによるとこのプログラムは全部[Gofer](https://en.wikipedia.org/wiki/Gofer_(programming_language))用らしい.

Exercise 1.9で"||"から行末までコメントに出来るようにしろってあったのでC言語風にコメントの始まりを"//"に変えた.

Exercise 1.10で2文字演算子の対応,1.11で行を表示できるようにToken型を変えた.テストはしてない.

## 1.6.2
問題は,パーサの方を何にすべきか,だ. からパーサを作り始めるあたりすごく関数型プログラミングっぽい.
`type Parser a = [Token] -> [(a, [Token])]`がもう何言ってるかわかんない.
わかんないけどまずpLitを作る.
`pLit :: String -> Parser String`となっているから実際には
`pLit :: String -> [Token] -> [(String, [Token])]` で,Stringと[Token]を引数に取り[(String, [Token])]が帰る関数.
しかし,pAltが` pAlt :: Parser a -> Parser a -> Parser a`となっているので,高階っぽく実装しないといけないのか?
一応pLitを実装してコンパイルを通した.

```c
typedef struct {
	size_t num;
	String str;
} Token_s;
 typedef Token_s * Token;

 Token init_tok(size_t num, size_t len) {
	Token ret = (Token)gc_safealloc(sizeof(Token_s));
	ret->num = num;
	ret->str = init_str(len);
	return ret;
 }

mi_list clex(size_t line, char *str) {
	mi_list ret = init_mi_list();
	String twoCharOps[] = {"==", "˜=", ">=", "<=", "->"};
	for(size_t i = 0; i < 5; i++) {
		if(!strncmp(str, twoCharOps[i], 2)) {
			Token twoop = init_tok(line, 3);
			strncpy(twoop->str, str, 3);
			ml_add_car(ret, twoop);
		}
	}
	if(*str == '\0') {
		return ret;
	} else if(isspace(*str)) {
		return clex(*str == '\n'?line+1:line, str+1);
	} else if(*str == '/' && *(str+1) == '/') {
		for(;*str != '\n';str++);
		return clex(line+1, str+1);
	} else if(isdigit(*str)) {
		Token num_token = init_tok(line, 15);
		size_t i = 0;
		for(; isdigit(*str); i++, str++) {
			num_token->str[i] = *str;
		}
		ml_add_car(ret, num_token);
	} else if(isalpha(*str)) {
		Token var_tok = init_tok(line, 31);
		size_t i = 0;
		for(; isalpha(*str) || isdigit(*str) || *str == '_'; i++, str++) {
			var_tok->str[i] = *str;
		}
		ml_add_car(ret, var_tok);
	} else if(*str) {
		Token tok = init_tok(line, 1);
		tok->str[0] = *str;
		ml_add_car(ret, tok);
	}
	ml_add_car(ret, clex(line, str));
	return ret;
}

mi_list pLit(String s, mi_list toks) {
	mi_list ret = init_mi_list();
	if(toks && !strcmp(s, ((Token)ml_car(toks))->str)) {
		mi_list tmp = init_mi_list();
		ml_add_car(tmp, s);
		ml_add_cdr(tmp, ml_cdr(toks));
		ml_add_car(ret, tmp);
	}
	return ret;
}
```

**32ページまで進んだ**
組合せ最適化でPyCon JP 2016の講演を決めよう

# <i class='fa fa-calendar' /> PyCon JP 2016の講演を決めよう
(これは、あくまでジョークです)

PyConの今年のテーマは、[「みんなちがって、みんないい」](http://pyconjp.blogspot.jp/2016/02/theme-of-pyconjp2016.html)だそうです。

ということで、全ての要素を盛込んだ講演を選んでみましょう。
[組合せ最適化](http://qiita.com/Tsutomu-KKE@github/items/bfbf4c185ed7004b5721)の集合被覆問題を使います。

# <i class='fa fa-calendar' /> ランダムに講演候補を作成します
講演者の国籍や、講演のレベル、講演の分野などをランダムに作成します。
得点は、例えば「いいね」の数とします。

```py3:python
import numpy as np, pandas as pd
np.random.seed(1)
n = 20
a = pd.DataFrame({
        '国': np.random.choice('アメリカ イギリス インド フランス ロシア 中国'.split(), n),
        'レベル': np.random.choice('初級 中級 上級'.split(), n),
        '分野': np.random.choice('データ分析 最適化 機械学習 ドキュメント Web'.split(), n),
        '得点': np.random.randint(1, 10, n),
    })
print(a)
```

 |レベル|分野|国|得点
:--|:--|:--|:--|:--
0|初級|Web|中国|4
1|上級|最適化|フランス|3
2|初級|データ分析|ロシア|1
...|...|...|...|...
19|初級|データ分析|フランス|8

# <i class='fa fa-calendar' /> 集合被覆問題を解きます
ortoolpy.set_coveringを使います。最小化なので、得点の逆数を重みにしました。

```py3:python
from ortoolpy import set_covering
n = sum(b.nunique() for b in [a.レベル, a.分野, a.国]) # 総ユニーク数
res = set_covering(n, [(1/r.得点, r[:3].tolist()) for _, r in a.iterrows()])
print(a.ix[res])
```

 |レベル|分野|国|得点
:--|:--|:--|:--|:--
5|上級|機械学習|フランス|8
8|中級|ドキュメント|アメリカ|7
10|初級|最適化|ロシア|8
13|中級|データ分析|イギリス|6
14|中級|最適化|インド|4
16|上級|Web|中国|9

全項目が出現しているのがわかります。

以上