OmniAICreator/Qiita-1.07M huggingface dataset:
WebGLスクール第2期 2回目 メモ - その2


前回に引き続き、WebGLスクールの復習です。

### 前回

[WebGLスクール第2期 2回目 メモ](http://qiita.com/dorayaki_kun/items/5b77b75c002d223ebd75)

## 免責事項

3Dや数学の専門家ではないので、所々おかなしな記述があるかもしれません。

予め、ご承知おきください。

## IBOについて

IBO（Index Buffer Object）は頂点インデックスを格納するオブジェクトです。

例えば↓の図のような正方形を描画したいとします。

※便宜上、三角形を離しているので正方形に見えないかもしれませんが、心の目で見てください...


![IBOの説明.png](https://qiita-image-store.s3.amazonaws.com/0/12331/830a6460-769a-a7da-20a0-00fcf01ba968.png "IBOの説明.png")

描画したいのは正方形なので、本来4つの頂点で描画できるはずなのですが...

プリミティブ形状に`gl.TRIANGLES`を指定すると三角形を2つ書いて正方形を描画することになるので頂点は6つになってしまいます。

結果として、2つの頂点が無駄に描画されることになってしまいます。

そんな時、IBOを利用すると`頂点B・Cを再利用して頂点D・Eを省く`といった実装が可能になります。


```js

var position = [
  -0.5,  0.5, 0.0,
   0.5,  0.5, 0.0,
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0
];

// 色情報、左から順にRGBA
var color = [
  1.0, 0.0, 0.0, 1.0,
  0.0, 1.0, 0.0, 1.0,
  0.0, 0.0, 1.0, 1.0,
  1.0, 1.0, 1.0, 1.0
];

// 中略

// iboの作成
var indexes = [
  0, 1, 2,
  1, 2, 3
];

var ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(indexes), gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);

// 中略

gl.drawElements(gl.TRIANGLES, indexes.length, gl.UNSIGNED_SHORT, 0);

```

![IBO_Sample.png](https://qiita-image-store.s3.amazonaws.com/0/12331/d2bf5a14-a211-83d4-c5bd-c4eba9573f64.png "IBO_Sample.png")

4つの頂点で正方形が描画されますね!

こういう単純な図形ではありがたみはないです。

ですが、複雑なモデルデータを描画する場合は地味に利いてくるテクニックだと思います。

### 余談

ちなみに、gl.TRIANGLE_STRIPを利用しても良い感じに正方形は書けます...が

頂点の利用順序に制限があるので、融通が利かないです。

```js
var position = [
  -0.5,  0.5, 0.0,
   0.5,  0.5, 0.0,
  -0.5, -0.5, 0.0,
   0.5, -0.5, 0.0
];

// 色情報、左から順にRGBA
var color = [
  1.0, 0.0, 0.0, 1.0,
  0.0, 1.0, 0.0, 1.0,
  0.0, 0.0, 1.0, 1.0,
  1.0, 1.0, 1.0, 1.0
];

// 中略

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

```

## 深度テストについて

深度テストは簡単に説明すると、手前のモデルが奥にあるモデルを覆い隠すかをテストする機能です。

これを利用しないと、奥のモデルが手前のモデルから透けてしまい不自然な描画になってしまいます。

サンプルを見ると、イメージしやすいかも...です。

[practice-webgl/004/public/](https://github.com/dorayaki-kun/practice-webgl/tree/master/004/public)

正8面体の裏面が描画されるタイミングで違和感を感じる...はず。

実際に深度テストを有効にするコードは下記のようになります。

``` js
gl.enable(gl.DEPTH_TEST);// 深度テストの有効化
gl.depthFunc(gl.LEQUAL); // 深度テストの比較関数を指定
```

実際に深度テストを利用したサンプルは下記となります。

[practice-webgl/005/public/](https://github.com/dorayaki-kun/practice-webgl/tree/master/005/public)


深度テストに利用できる比較関数は下記ですが...

- gl.NEVER
- gl.LESS
- gl.EQUAL
- gl.LEQUAL
- gl.GREATER
- gl.NOTEQUAL
- gl.GEQUAL
- gl.ALWAYS

実質は`gl.LEQUAL`の一択らしいです。

※なぜこの一択かは、不勉強なため分かりません... 

## 最後に

今回の実装サンプルは下記にありますので良かったら見てください。

[practice-webgl/](https://github.com/dorayaki-kun/practice-webgl/)


来週6/13がまた講義なので、勉強してきます!!

[WebGL スクール第２期の募集を開始します！ 2015年5月開講！](http://webgl.souhonzan.org/entry/?v=0203)
Python で画像の代表色 (?) を取る練習

画像の代表色を調べたくなった。
しかも、自分なりに代表色の探し方を考えて、それを実装をしてみる練習をしたいとも思った。

大枠で次のような方式を考えて実装した。

1. 画像のピクセルを k-means でクラスタに分ける。
2. クラスタに属するピクセルの数でヒストグラムを作る。
3. ヒストグラムの多い順で取り出して代表色とする。

k-means よりも優れた減色アルゴリズムは多数あり、そちらを使うのも手かもしれないが、
自分は日曜プログラミングで実装できる自信がなかったので、実装も簡単で scipy にも含まれてる k-means を使った。
ピクセルをクラスタに割り治すのも scipy の vq (Vector Quantization) をそのまま使うことにしたのでかなり捗った。

# 結果

wkhtmltoimage コマンドを使い、幾つかの Web ページの画像を取得して代表色を抜き出してみた。
抜き出しただけでは直感的にはわからないので、適当な長方形に代表色を同じ大きさで表示することにした。
~~以下、根拠はないが「いい感じ」と思った。~~

## [Qiita](https://qiita.com/)

![qiita_image.png](https://qiita-image-store.s3.amazonaws.com/0/25886/76b24f87-90fb-6784-1465-c98f645bb940.png)


## [Facebook](https://www.facebook.com)

![facebook_image.png](https://qiita-image-store.s3.amazonaws.com/0/25886/b641e226-2ba2-492b-4616-0eef58a3dd53.png)

## [コカ・コーラ公式ブランドサイト](http://www.cocacola.jp/)

![cocacola_image.png](https://qiita-image-store.s3.amazonaws.com/0/25886/7f82d9e6-b794-58ed-b8dd-4cfcf64dbb92.png)




# スクリプト

以下が Python 3 で書いたスクリプト。
他に numpy, scipy, pillow を必要とする。

```py3
#!/usr/bin/env python
import argparse

import numpy

import PIL
import PIL.ImageDraw
import scipy
import scipy.cluster
import scipy.misc


def main():
    parser = argparse.ArgumentParser()
    parser.add_argument('source_image')
    parser.add_argument('summary_image')
    parser.add_argument('-n', type=int, default=4)
    args = parser.parse_args()
    img = PIL.Image.open(args.source_image)
    c = args.n + 1
    colors = top_n_colors(img, top_n=args.n, num_of_clusters=c)
    save_summary_image(args.summary_image, colors)


def pillow_image_to_simple_bitmap(pillow_image):
    small_img = pillow_image.resize((100, 100))
    bitmap = scipy.misc.fromimage(small_img)
    shape = bitmap.shape
    bitmap = bitmap.reshape(scipy.product(shape[:2]), shape[2])
    bitmap = bitmap.astype(numpy.float)
    return bitmap


def top_n_colors(pillow_image, top_n, num_of_clusters):
    clustering = scipy.cluster.vq.kmeans
    bitmap = pillow_image_to_simple_bitmap(pillow_image)
    clusters, _ = clustering(bitmap, num_of_clusters)
    quntized, _ = scipy.cluster.vq.vq(bitmap, clusters)
    histgrams, _ = scipy.histogram(quntized, len(clusters))
    order = numpy.argsort(histgrams)[::-1][:top_n]
    for idx in range(top_n):
        rgb = clusters.astype(int)[order[idx]].tolist()
        yield '#{:02x}{:02x}{:02x}'.format(*rgb)


def save_summary_image(path, color_codes, width=300, height=100):
    color_codes = tuple(color_codes)
    image = PIL.Image.new('RGB', (width, height))
    draw = PIL.ImageDraw.Draw(image)
    single_width = width / len(color_codes)
    for i, color_code in enumerate(color_codes):
        starting = (int(single_width * i), 0)
        ending = (int(single_width * (i + 1)), height)
        draw.rectangle([starting, ending], fill=color_code)
    image.save(path, format='png')


if __name__ == '__main__':
    main()
```

## 使い方

```
$ python ./image_top_n_color.py input.png output.png
```

```-n``` オプションでクラスタの数を指定することができる。
Macの複数のExcel（xlsx）ファイルをunzipでファイル名でディレクトリを作成しながら一括解凍する。そして写真を収集する。

xlsxファイルから写真だけを抽出するときに使いました。

実行したディレクトリ配下のファイルをunzipする。
unzip -dオプションでファイル名**（拡張子を外す）**をディレクトリに指定して解凍する。

**mvコマンドを使うのでバックアップをおすすめします。**

1.terminalを開く。
2.mvコマンドでxlsxからzipに変換する。

```lang:mvコマンド
$cd /xlsxがあるディレクトリ
$for file in *.JPEG; do
> mv $file ${file%.xlsx}.zip;
> done
```

3.以下を実行して解答する。

```lang:unzipコマンド
$ for filename in $(ls) ; do unzip $filename -d ${filename%.*}; done
```

これでxlsxファイルがフォルダになります。
私は写真管理ソフト（Macの場合は写真.app）でこれらのフォルダ配下の写真を収集しました。

bash初心者でループ処理とか覚えてない人の手助けになれば。
自前サービスのユーザーアカウントを使ってFirebaseを操作する

#そもそもFirebaseってなんですか?
* BaaS(Backend as a Service)と呼ばれる、クライアントの開発だけに集中できるサービスの一つ
* データベースの更新通知機能が強力で変更するとリアルタイムと言っていいほどの感覚でクライアントに通知される
* クライアントからの変更もリアルタイム
* 最近のアップデートで通信回線がない場合でも使えるようになった
* facebook,twitter等のソーシャルログイン機能もあって非常に便利です。

# 今回はカスタム認証(Custom Authentication)にまつわる話をします
* カスタム認証とは自前サービスのアカウントを使ってFirebaseを操作できるようにする仕組みです。
* すでに用意されているソーシャルログインは１サイト１アカウントになっているので、facebookとtwitterを同じアカウントとして扱うといったことができません
* ユーザーから見るとtwitterやfacebook等で別々に扱われるのは違和感を感じるので、こんなときはカスタム認証の出番です

# 実際に実装してみた
* https://github.com/codefreak2015/firebase-login-demo-android
* 実装してて使っているApache Commons Codecがあたらしすぎて動かない(http://stackoverflow.com/questions/2047706/apache-commons-codec-with-android-could-not-find-method )との事だったので、Base64エンコードの部分を自前実装して回避してます。

こんな感じですね。

https://github.com/codefreak2015/firebase-login-demo-android/blob/withCustomAuth/app/src/main/java/com/firebase/samples/logindemo/MainActivity.java#L587-L594

```java:MainActivity.java
        Map<String, Object> payload = new HashMap<String, Object>();
        payload.put("uid", "custom:1");
        payload.put("some", "arbitrary");
        payload.put("data", "here");
        TokenGenerator tokenGenerator = new TokenGenerator(firebaseSecret);
        String token = tokenGenerator.createToken(payload);

        mFirebaseRef.authWithCustomToken(token, new AuthResultHandler("custom"));
    }
```

#まとめ
* BaaSは便利なようで、いろいろ制限があるため使えなかった
* Firebaseは最近になってオフライン機能がついたので良さそうです
* アカウント管理はカスタム認証を使えば解決できるでしょう。
ProcessingでOpenCVを使う(続き)

PImageとMatの変換について
[前の記事](http://qiita.com/endoh0509/items/1cb6b0e3ac2e16899893)ではProcessing上でOpenCVを使う方法を書いたけど
MatのままではProcessingで表示できないのでPImageへ変換します
この変換はライブラリ化している方がいたので["Mat(OpenCV)とBufferedImageとPImage(Procesing)を相互変換可能なライブラリを作ってみた"](http://www.magicandlove.com/blog/2013/04/04/opencv-2-4-4-and-processing/)にある***ImageTranslater***ライブラリを使えば簡単にできる

下記のサンプルではOpenCVのVideoCaptureクラスでキャプチャを撮り
特徴点を検出してからMatからPImageへ変換して表示している
検出した特徴点はProcessingのellipseで描画している

```java:TestOpenCV.pde
import imageTranslater.*;
import org.opencv.core.*;
import org.opencv.imgproc.*;
import org.opencv.highgui.*;
import org.opencv.features2d.*;

ImageTranslater imgTrans;
VideoCapture capture;
FeatureDetection feature;
Mat captureImage;
PImage img;

void setup() {
  imgTrans = new ImageTranslater(this);
  System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
  capture = new VideoCapture(0);
  feature = new FeatureDetection(FeatureDetector.SIFT);
  captureImage = new Mat();
  size(640, 480);
}

void draw() {
  background(0);
  noStroke();
  fill(255, 255, 0, 100);
  if (capture.isOpened()) { 
    capture.read(captureImage);
    Size sz = new Size(width, height);
    Mat resizeimage = new Mat();
    Imgproc.resize(captureImage, resizeimage, sz);
    feature.setImage(resizeimage);
    feature.detection();
    image(imgTrans.MatToPImageRGB(this, resizeimage), 0, 0);
    for (Point p : feature.getPoints ()) {
      ellipse((float)p.x, (float)p.y, 10, 10);
    }
  }
}
```
```java:FeatureDetection.pde
public class FeatureDetection {

  Mat image;
  FeatureDetector featuer;
  MatOfKeyPoint keyPoints;

  public FeatureDetection(int _type) {
    image = new Mat();
    featuer = FeatureDetector.create(_type);
    keyPoints = new MatOfKeyPoint();
  }

  public void detection() {
    featuer.detect(image, keyPoints);
  }

  public Point[] getPoints() {
    Point[] points = new Point[keyPoints.toArray().length];
    for (int i = 0; i < points.length; i++) {
      points[i] = keyPoints.toArray()[i].pt;
    }
    return points;
  }

  public void setImage(Mat _image) {
    image = _image;
  }
}
```
![TestOpenCV.png](https://qiita-image-store.s3.amazonaws.com/0/80816/9e39c8ac-709d-30e7-e0d1-13e2f942a938.png)


もしくは["OpenCV 2.4.4 and Processing"](http://www.magicandlove.com/blog/2013/04/04/opencv-2-4-4-and-processing/)ではPImage->BufferedImage->Matのように変換している

参考 : 
ImageBufferへの変換
http://www.magicandlove.com/blog/2013/04/04/opencv-2-4-4-and-processing/
変換ライブラリ
https://sites.google.com/site/gutugutu30/other/matopencvtobufferedimagetopimageprocesingwoxianghubianhuankenengnaraiburariwozuottemita
gulpが実行出来なくてハマった時に確認したこと


先日とある理由でgulpを使ったのですが、思ったように実行できなかった時のメモ。

## エラー内容

### npm install 実行時
```
npm ERR! cb() never called!

```
出力内容の最後のあたりにというエラーが。

### gulp serve 実行時

そのまま無視してgulp実行。

```
Error: Cannot find module 'wrappy'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/maximum80/sample/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/node_modules/once/once.js:1:76)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
```
とか

```
Error: Cannot find module 'json3'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/maximum80/sample/node_modules/gulp/node_modules/orchestrator/node_modules/end-of-stream/node_modules/once/once.js:1:76)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
```

など、やり直すたびに何かしらのModuleがない、と怒られます。

## ハマった原因
どうやらnpm installを実行した際に、対象のmoduleが正しくインストールされなかった模様。
また、正しくインストールされないのはキャッシュが悪さしてたりバージョンの問題が原因にあるとのことで、以下の内容を試しました。

## 確認したこと
### 1. npm cacheの確認


```
$ npm cache clean
```

で、キャッシュを削除。


### 2. npmのversionの確認

[npmのGithub上](https://github.com/npm/npm/issues/5920)で2014年に同様のエラーについてのissueが展開されていたので、**「もしかしてバージョンアップしたら解決するかも？」**と思ってバージョンアップしました。

```
$ npm update -g npm
```

を実行。上記が完了してしたら、改めてnpm installしてgulpを実行したら僕の場合は正常に動いてくれました。ただ、明確な原因はわかっていないため、**常にキャッシュとバージョンを意識する**という事を一旦肝に命じておきます。
iTerm2のコマンドまとめ


普段つかってるのにCmd-dくらいしか知りませんでした。

## もうひとつ作業スペースが欲しい時
### 新しいウィンドウを開く
Cmd - n

### 新しいタブを開く
Cmd - t

### タブを変更する
Cmd - Shift + ]
Cmd - Shift + [

### 画面を左右に分割する
Cmd - d

### 画面を上下に分割する
Cmd - Shift+d

### 分割した画面間の移動
Cmd - [
Cmd - ]

## 作業中
### 検索
Cmd - f


## プレゼン等でターミナルを写す時
### 文字を大きくする
Cmd - +

### 文字を小さくする
Cmd - -

### 文字を元に戻す
Cmd - 0
PHPと日本語文字列

日本語圏で使うWebアプリをPHPで組み立てる上では、日本語処理は欠かせません。では、どのように処理していけばいいのでしょうか。

# 文字コードはUTF-8がおすすめ
まず、内部処理で使う文字コードとしては、UTF-8で進めるべきでしょう（特定の文字コードを要求するシステムとのやり取りの際には、入出力時に変換すれば済みます）。シフトJISやEUCでは文字の切れ目がわかりづらく、いわゆる「ダメ文字」問題など、妙なところにヒットする事故が発生しがちです。これに対して、UTF-8の場合は

* 1バイト文字…0x00-0x7F（0b0xxxxxxx）
* 複数バイト文字の2バイト目以降…0x80-0xBF（0b10xxxxxx）
* 2バイト文字の1バイト目…0xC2[^1]-0xDF（0b110xxxxx）
* 3バイト文字の1バイト目…0xE0-0xEF（0b1110xxxx）
* 4バイト文字の1バイト目…0xF0-0xF4[^2]（0b11110xxx）

というように、「1バイト目」と「それ以降」が別に定義してあるため、単純なバイト比較による検索でも文字の切れ目を誤って誤爆することはありません（正規化の加減で「同じ」に見える文字がヒットしないことはありますが、それとは別問題です）。

さらに、この特徴があることで、シングルバイトを意識した関数を使える場面も増えますし、正規表現のPCREもUTF-8モードで使うことができます。

# PCREとUTF-8
PHPの[PCRE正規表現](http://php.net/manual/ja/book.pcre.php)には、UTF-8指定子の`u`があります。UTF-8指定子を付けずに正規表現を書くと、UTF-8の1文字はそのままバイト列として認識されます。

そのままで問題なく動く場面も多いですが、`.`は**1バイト**にヒットしますし、2バイト以上の文字をキャラクタクラスの`[]`に入れてしまうと、**バイト単位でどれか**という意味になってしまい、正しくヒットしなくなります。よほど速度にシビアな場面を除けば、`/regex/u`というように、UTF-8指定を付けるようにしておいたほうがいいでしょう。

なお、`u`付きの正規表現で処理をかけると、検索対象がUTF-8として正しいかどうかのチェックをして、おかしなコードならヒットさせずに`FALSE`を返します。これを利用して、`preg_match('//u', $target)`と空の正規表現と照合させることで、UTF-8としての整合性チェックに使えます。

# UTF-8での文字列関数
上に述べたように、UTF-8の文字列にバイト単位の比較で検索をかけても、文字の切れ目を誤ってヒットしてしまうことは起きないので、引数を文字列単位で扱うような関数（[`explode`](http://php.net/manual/ja/function.explode.php)、[`sprintf`](http://php.net/manual/ja/function.sprintf.php)、[`str_replace`](http://php.net/manual/ja/function.str-replace.php)、[`strpos`](http://php.net/manual/ja/function.strpos.php)など）は、UTF-8文字列に対しても問題なく適用することができます（`strpos`はバイト数単位で位置を返しますが）。

一方で、文字列をバイト単位で扱う関数の場合、UTF-8の文字が途中で切れることになるため、正しく動作しません。例えば、[`trim`](http://php.net/manual/ja/function.trim.php)で全角空白を除かせることはできませんし、[`str_shuffle`](http://php.net/manual/ja/function.str-shuffle.php)はバイト単位でシャッフルして、（たいていの場合）正しくないUTF-8としてしまいます。[`strtr`](http://php.net/manual/ja/function.strtr.php)では、2引数であればUTF-8でも問題ないですが、3引数の場合はASCII内の文字を、同じくASCII内の文字に置き換えるのにしか使えません（が、入力文字列自体はUTF-8混じりでも問題ありません）。


[^1]: 0xC0、0xC1とすると、計算上は1バイトで表せる文字を表現するコードとなりますが、そのような冗長なコードの使用は禁止されています。
[^2]: 0xF5以降はUnicodeの範囲外にはみ出すので使用されません。また、もともとISO 10646としては31ビットコードを計画していたので、UTF-8では5バイト・6バイト文字（1バイト目が0xF5以降）も存在しうるのですが、もはやUnicode外の領域に文字が割り当てられることはなくなったので、使用されることはありません。
Robolectric3.0を入れようとしたらFailed to resolveで失敗した


AndroitTestがうまく動かなくなったのでRobolecticを試そうとしたら初歩的なところでつまずいたので記録しときます。

```gradle:build.gradle
{
repositories {
        maven { url "https://oss.sonatype.org/content/repositories/snapshots" }
        jcenter()
        mavenCentral()
        mavenLocal()
        } 
       	
dependencies{
    testCompile 'junit:junit:4.12'
    testCompile "org.mockito:mockito-core:1.9.5"

    testCompile('org.robolectric:robolectric:3.0-rc2') {
        exclude group: 'commons-logging', module: 'commons-logging'
        exclude group: 'org.apache.httpcomponents', module: 'httpclient'
        }       	
    }
}
```

リポジトリも指定しているのになんで？と思ったらオフラインになってただけでした。

![kobito.1433677947.824630.png](https://qiita-image-store.s3.amazonaws.com/0/47837/53b81338-8919-8a03-ead5-b8e57a8e4cf9.png "kobito.1433677947.824630.png")

Preference> Build, > Gradle > Global Gradle Settings > Offline work

今まで普通に動いてたので見落としてました。。。
pry の履歴を Bundler のプロジェクトごとに別々にする

役に立つのかどうかよくわかりませんが、できるっぽいということがわかったのでメモを残しておきます。

Pry の履歴はデフォルトで `~/.pry_history` に保存されています。これは、[`~/.pryrc` を適当に設定することで変更することが出来ます](https://github.com/pry/pry/wiki/History#the-history-file)。

ところで、Bundler を使用しているプロジェクトでは、メソッド `Bundler.root` によりプロジェクトのルートディレクトリ (要は Gemfile とかを置いてあるディレクトリ) が取得できます。

ということで、`~/.pryrc` に以下のような記述をすることで、タイトル通り Pry の履歴を Bundler のプロジェクト別にすることができます。

```rb:.pryrc
Pry.config.history.file = Bundler.root.join ".pry_history" if defined? Bundler
```

ちなみに、Rails プロジェクトにおいても Bundler と Pry (`pry-rails`) を使っていれば、 `bundle exec rails c` などで立ち上げた場合もこれは有効になります。

例えば

- `/home/ichigo/some-gem`
- `/home/ichigo/rails-project-aikatsu8` 
- `/home/ichigo/rails-project-soleil`

において、 Pry の履歴ファイルはそれぞれ

- `/home/ichigo/some-gem/.pry_history`
- `/home/ichigo/rails-project-aikatsu8/.pry_history` 
- `/home/ichigo/rails-project-soleil/.pry_history`

というような感じになります。


ただ、このままだと `git status` とかしたときに常時 `.pry_history` が unstaged なファイルとして表示されてしまうと思うので、その時は global gitignore を設定するなどすると良いと思います。
[python] pythonのconfigparserがもしかしたらyamlで設定を管理するより優れているかもしれないこと

pythonの標準ライブラリの [configparser](http://docs.python.jp/3.3/library/configparser.html) についての内容です。
configparserはあるオプションに依存するオプションを書くことができます。また依存元を後で埋めることもできます。
この一点だけで、設定ファイルをjsonで書いて`json.load()`したり、設定ファイルをyamlで書いて`yaml.load()`するより便利なことがあるかもしれません。

具体的には以下のようなコードが動くということです。

以下のような設定ファイル(config.ini)があり、

```
[DEFAULT]
here = /foo/bar/boo
app = %(here)s/app%(suffix)s
```

DEFAULTセクションにhere,appのオプションが設定されています。
ここでappはhere,suffixに依存しています。
また、suffix optionは設定ファイルには記述されていません。


```py
from configparser import ConfigParser

parser = ConfigParser(default_section="DEFAULT")
with open("config.ini") as inp
    parser.readfp(inp)
parser["DEFAULT"]["suffix"] = ".py"
```

here, suffixに依存しているappオプションの値が取れました。

```py
print(parser["DEFAULT"]["app"])  # /foo/bar/boo/app.py
```
JetBrains PhpStorm: How to set `case` label offset with zero

PhpStorm のエディタで `case` ラベルのインデントを下記のようにするには……

```php
switch ($point) {
case 'A':
    echo '合格ライン';
    break;

case 'B':
    echo '追試ライン';
    break;

case 'C':
    echo '落第ライン';
    break;
}
```

Preference ▶ Editor ▶ Code Style ▶ PHP ▶ Wrapping and Braces ▶ &#096;switch' statement ▶ Indent &#096;case' branches のチェックを外します。
![preference.png](https://qiita-image-store.s3.amazonaws.com/0/28376/9e71daa3-f241-169b-572d-db1a7b41f1ff.png)
sarファイル(sysstat) をグラフ化


# 概要
Linuxのsarファイルをグラフ化するツール。
Javaアプリケーションなので、LinuxでもWindowsでも動作することができる。

# 前提条件
javaがインストールされていること

# 使い方
## ksarをダウンロード
http://osdn.jp/projects/sfnet_ksar/releases/

## sarファイルを変換
デフォルトでは /var/log/sa にあるバイナリ形式のsarファイルから
ksarで読み込めるテキスト形式に変換する

例：
Linux環境で
バイナリファイル20140225.sarファイルから
テキストファイル20140225.sar.txtへ出力。

```linux:command
env LANG=C  sar -f 20140225.sar -s 00:00:00 -e 23:59:00 -A > ./20140225.sar.txt
```     


## ksar起動
kSar.jarを起動し、
Data -> Load from text file を押下し、
変換した後のファイルを選択する

問題なく読み込めた場合、
Data import is finished
という文言が表示される。

# ksarの見方について
以下のブログがとてもわかりやすい。
http://d.hatena.ne.jp/japanrock_pg/20090415/1239795768
第二回GCPUG in Tokyo！勉強会に参加した

# 勉強会の基本情報

* 【日　時】2015年5月15日 19:00~22:30
* 【会　場】フリークアウト　ヒルズガレージ（〒106-0032 東京都港区六本木6-3-1　六本木ヒルズクロスポイント5F）
* 【参加費】無料
* 【主　催】Google Cloud Platform の User Group
* 【申し込み】https://atnd.org/events/64511

# 概要
* GCPUGとは
    * Google Cloud Platform User Groupの略称
* Google Cloud Platform の新機能、活用事例が、紹介される

# 内容
### 新しいストレージサービスについて
* google cloud platformのイノベーション
* Bigtableによりアプリケーション
    * youtube, google search......
* Bigtableのデータモデル
    * 分散キューバリューデータストア
    * インデックスはプライマリーキーのみ
    * 行単位のトランザクション可能
* 安定Bigtable
* HDDとSSD両方を使えて、アプリケーション側に指摘できる


### FireBaseの概要と使い方

* FireBaseとは
    * リアルタイムアプリケーションプラットフォーム
    * リアルタイムDB
    * ユーザ管理
    * ファイルホスティング
* リアルタイムデータベース
    * NoSQL, JSONデータベース
    * ミリ秒単位で更新をプッシュ
    * デバイスから、直接的に接続可能なセキュリア
    * データとURLのマッピング
    * オンライン同期とオフライン
* ユーザ管理
    * メアドとパスワード
    * OAuthプロバイター
        * google, facebook, twitter, github
    * カスタム認証トークン
* ファイルホスティング
    * カスタムドメイン
    * SSL
    * CDN
JavaScript Code Smell - くせぇコードを見つける


- [JavaScript Code Smells](http://elijahmanor.com/javascript-smells/?utm_source=javascriptweekly&utm_medium=email)
- [elijahmanor.com/talks/js-smells](http://elijahmanor.com/talks/js-smells)

javascript のコードが

>こいつはくせえッー！ゲロ以下のにおいがプンプンするぜッーーーーッ！！

っていう意味じゃないらしい。[code smell（コードの臭い）](http://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%87%AD%E3%81%84) っていう言い方があるらしく。初めて知った。正しくは、

>コンピュータプログラミングにおいてプログラムのソースコードに深刻な問題が存在することを示す何らかの兆候のことを言う。

翻訳とまではいかないけど、非常に参考になったので先ほどのレクチャー、スライド要約メモしておこうと思います。咀嚼しきれず、全然まとまってないですが。

結果的に、lint 使いなよ、という話なんだけど。
ソース判例はスライド見てください。いちいち載せないです。

## 1. CONVOLUTED CODE SMELL

複雑化したコードの臭い。

- Too Many Statements （Stringが長いとか）
- Too Much Depth（構造が深い、if,for,if,if,else,for とか言ってる）
- Too Much Complexity（複雑化し過ぎている）

```js:jshint
/*jshint maxstatements:15, maxdepth:2, maxcomplexity:5 */
```
```js:esilnt
/*eslint max-statements:[2, 15], max-depth:[1, 2], complexity:[2, 5] */
```
lint でこの設定入れとけよ。という話。

### lint しよう

- jshint - http://jshint.com/
- eslint - http://eslint.org/
- jscomplexity - http://jscomplexity.org/
- escomplex - https://github.com/philbooth/escomplex
- jasmine - http://jasmine.github.io/

## 2. COPY PASTE CODE SMELL

コピペなコードの臭い。
コピペしちゃダメ、じゃなくて、コピペしたような重複した処理・メソッドはまとめようぜ。っていう話。

- jsinspect - https://github.com/danielstjules
- jscpd - https://github.com/kucherenko/jscpd

この辺のtoolingで抽出できるらしい。

## 3. SWITCH STATEMENT SMELL

（この項、ちょっとフワッとしてる）

Switch文がくせぇ。Open/Closedの原理を犯してる（この辺不明）。
例としての挙げられたsmellyなコードに条件を追加したい時のソースが載せられ、「これは悲劇的なデザインパターン」とのこと。

window の下にオブジェクトぶら下げて展開していく方法がひとつ（この辺不安）。

magic strings refactor. Stringは2回使用されてる、var で object types にしちゃえば？ ＆ const にしちゃえば？（ES6 読み取りのみの定数宣言）

## 4. THE THIS ABYSS SMELL

よく見る this のスコープより深度深い時にやりがちパターン。

```js
var that = this;
var self = this;
```
っていうあるある。こないだ読んだ[これ](http://www.amazon.co.jp/dp/479813905X)でもゴリッゴリ使ってた。
これあるあるだけど、バッドノウハウだよね。って思います。

1. bind 使おうよ。`Function.prototype.bind` ですね
2. forEachだったら第2引数使おうよ
3. ES6ならArrow Functionで関数定義（式）できるよ
4. 関数型プログラミングやれば？（関数型～詳しくないし飛ばした）

### lint しよう

- no-this-assign (eslint-plugin-smells) - https://github.com/elijahmanor/eslint-plugin-smells
- consistent-this - http://eslint.org/docs/rules/consistent-this
- no-extra-bind - http://eslint.org/docs/rules/no-extra-bind


## 5. CRISP CONCATENATION SMELL

シングルクォート、ダブルクオートの混在が臭う。

- [Tweet Sized JavaScript Templating Engine](http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-javascript-templating-engine/) を使う手がある
- ES6なら Template Strings が使えるよ

## 6. INAPPROPRIATE INTIMACY

疎結合せよ。の話だと思うんですが、子どもが騒いでいるので気が向いたら加筆します。

---

今日は以上です。ES6に向かわないとダメだと再認識。
[Tips] AWS Auto Scaling でタグ付けを活用する

## 導入
Auto Scaling によって、新規にたてられたインスタンスの
__Nameが空白__で分かりづらい。。(間違って消したら...)
とか思ったことがあるかもしれません。
![スクリーンショット 2015-06-07 19.27.24.png](https://qiita-image-store.s3.amazonaws.com/0/20609/b1dbc06d-15c4-3f25-77c4-7af7b54a69f3.png)


今回、インスタンスの管理・整理に有効な__タグ付け__について書きます。

## タグ付け
### ■ Nameタグを追加する
Console画面から、
EC2 > Auto Scaling > Auto Scaling Groups
に移動して設定する Auto Scaling Groups を選択し、Tags のタブをクリック。
![スクリーンショット 2015-06-07 19.38.43.png](https://qiita-image-store.s3.amazonaws.com/0/20609/ba239d60-e99a-488b-fa02-aa478ce31e46.png)

Add/Edit Tags で、`Key:Name, Value:好きな名前` として設定しましょう。

![スクリーンショット 2015-06-07 19.42.27.png](https://qiita-image-store.s3.amazonaws.com/0/20609/546ffedd-6097-94aa-d514-a50245a43ba4.png)

__これで、終わりです。__
新規でたてられたインスタンスの`Name`のところに、先ほどの`好きな名前`が付いているはずです。

### ■ その他
下記なんかも設定したら、見やすく検索もしやすくなると思います。
(タグの上限は10個)
- Environment ( production / development )
- Project (プロジェクト単位)
- Owner (所有者)

下記は、Project タグを入れてみた例です。
__Nameカラムの隣に、Projectカラムが追加されており、
判別しやすいし、検索も便利！！__
![スクリーンショット 2015-06-07 19.50.49.png](https://qiita-image-store.s3.amazonaws.com/0/20609/3c1ff740-2309-94a3-351e-fd283fd5f4fe.png)

## 終わりに
タグ付け、ドンドン活用しましょう！

## 公式
https://docs.aws.amazon.com/ja_jp/AutoScaling/latest/DeveloperGuide/ASTagging.html
MacTeX パッケージ追加のやり方

#MacTexでの、tex環境へのパッケージの導入方法

パケージ導入しようとしていてググりまくったけども
textmfってなんや！どのディレクトリにパッケージ置けばいいんだ！！パスが通っているディレクトリどこよ!と悩んだので書いておきます。

##1.パッケージをダウンロードしてくる
適当にダウンロードしてきてください

##2.パッケージを解凍する
拡張子にあった解凍方法をしてください

##3.パッケージをディレクトリに移動する
パッケージをディレクトリに移動させます

2014のところはインストールされているversionによって,2013,2015と変わります

```
% sudo mv 解凍してしてできたパッケージ名 /usr/local/texlive/2014/texmf-dist/tex/latex/
```

## 4.権限を確認する

```
% ls -l /usr/local/texlive/2014/texmf-dist/tex/latex/解凍してできたパッケージ名  
```

権限がおかしいなら変更する

```
chmod 755 /usr/local/texlive/2014/texmf-dist/tex/latex/解凍してできたパッケージ名
```

で読み込みと実行を許可

##5.mktexlsr 

```
sudo mktexlsr
```
#参考にしたサイト
http://www.takunoko.com/blog/mac%E3%81%ABjlisting-sty%E3%82%92%E5%B0%8E%E5%85%A5-tex/
#多分出来ると思います！
Ubuntu にOracle Java 8 (PPA)をインストールする(ubuntu)

# Ubuntu にOracle Java 8 (PPA)をインストールする 
非公式のリポジトリからOracle Java 8 をインストールする手順について説明します。
webupd8team のリポジトリを追加して、下記手順でOracle Java 8 をインストールします。

```text:ppaの追加とOracleJava8のインストール
$ sudo add-apt-repository ppa:webupd8team/java
$ sudo apt-get update
$ sudo apt-get install oracle-java8-installer
```


途中、規約に同意する画面が出てくるので、OK を選択します。
![Ubuntu_InstallOracleJava8_0000.png](https://qiita-image-store.s3.amazonaws.com/0/70152/565a473b-0449-bfe2-5b74-95be37490f03.png)

![Ubuntu_InstallOracleJava8_0001.png](https://qiita-image-store.s3.amazonaws.com/0/70152/9ad9111b-2826-f749-8d95-26cd52c1de8e.png)


インストールが完了したら、java のバージョンを確認してみましょう。

```text:javaのバージョンを確認する
$ sudo dpkg --list | grep oracle-java
ii  oracle-java8-installer                               8u45+8u33arm-1~webupd8~0                   all          Oracle Java(TM) Development Kit (JDK) 8

$ java -version
```


Webupd8 では、環境変数を設定するためのパッケージも提供しているので、それもインストールします。

```text:環境変数を設定するパッケージのインストール
$ sudo apt-get install oracle-java8-set-default
```


インストールが完了したらターミナルを再起動して、環境変数を確認してみます。
java に関する環境変数が追加されていることがわかります。


```text:環境変数の確認
$ env | grep -i java
DERBY_HOME=/usr/lib/jvm/java-8-oracle/db
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/lib/jvm/java-8-oracle/bin:/usr/lib/jvm/java-8-oracle/db/bin:/usr/lib/jvm/java-8-oracle/jre/bin
JAVA_HOME=/usr/lib/jvm/java-8-oracle
JAVA_TOOL_OPTIONS=-javaagent:/usr/share/java/jayatanaag.jar
J2SDKDIR=/usr/lib/jvm/java-8-oracle
J2REDIR=/usr/lib/jvm/java-8-oracle/jre
```


# 参考 
How to Install JAVA 8 (JDK 8u45) on Ubuntu & LinuxMint Via PPA
http://tecadmin.net/install-oracle-java-8-jdk-8-ubuntu-via-ppa/
Rack Middlewareを条件付きで実行するためのRack Middlewareを書いた

# Rack Middlewareを条件付きで実行するためのRack Middlewareを書いた

あるRackミドルウェアがあったとして、それを特定の条件下でのみ実行させたいとする。
その際には、以下に示すような回避策を講じることになる。

```ruby
class SpecialMiddleware < Rack::AwesomeMiddleware
  def call(env)
    except?(env) ? @app.call(env) : super
  end

  def except?(env)
    env["PATH_INFO"].start_with?("/api")
  end

  private :except?
end

use SpecialMiddleware
```

で、これはこれで良いんだけど、対象が複数個のミドルウェアになってくるとなかなかに面倒臭い。
というわけでシンプルに書けるようにするRack Middlewareを書いてみた。

[namusyaka/mandrake](https://github.com/namusyaka/mandrake)

上記のコードをMandrakeを使って置き換えると、以下のようなコードになる。

```ruby
use Mandrake::Middleware do
  # 以下のifオプションの値は実際の比較式とは異なり、それ自身を文字列にして返すメソッド。
  # 内部的にはその文字列をexcept?のようなメソッドの中身として定義し条件分岐を実現している。
  use Rack::AwesomeMiddleware, if: env["PATH_INFO"].start_with?("/api")
  # lambdaを渡した場合には、そのブロックをそのまま条件分岐用のメソッドとして、define_methodを使って定義している。
  # use Rack::AwesomeMiddleware, if: -> { env["PATH_INFO"].start_with?("/api") }
end
```

完成すれば軽く便利だし、面白いかなぁと思って作ってみたGem。
書いたのは大分前だけど、せっかくなので記事にした。

おわり。
Force Touchトラックパッドの「強めのクリック」を処理する


Force Touchトラックパッドでは「[強めのクリック](https://support.apple.com/ja-jp/HT204352)」という操作がサポートされていて、たとえばSafariでリンクを強めにクリックするとリンク先のプレビューがポップオーバーされます。ここでは、`NSButton`を強めのクリックに対応させる方法を紹介します。

## 強めのクリックに対応したボタンを作成

まず、NSButtonはデフォルトの状態では強めのクリックを利用できないため、下記のようにbutton typeを`MultiLevelAcceleratorButton`へ変更して強めのクリックを利用できるよう設定します。

```swift
button.setButtonType(.MultiLevelAcceleratorButton)
button.maxAcceleratorLevel = 5
```

ここでは一緒に`maxAcceleratorLevel`を`5`に設定しましたが、これはクリックの強さを5段階（1:通常〜5:最強）で受け付けるということです。`MultiLevelAcceleratorButton`の場合のデフォルト値は`2`で、それ以外のbutton typeの場合は`1`がデフォルトです。`1`の場合は強いクリックを受け付けません。

## クリック時に強さのレベルを取得する

強いクリックは、通常のクリックと同じようにtargetに対してactionを実行します。このとき、クリック中に強さレベルが変わる（通常クリック中に強く押し込むなど）と、その都度actionが実行されます。

action中でクリックの強さを取得するには、`NSButton`の`integerValue`プロパティを参照します。通常のクリックが行われた場合にはこの値は`1`に、強いクリックが行われた場合にはこの値が`2`以上になります。最大値は`maxAcceleratorLevel`に設定した値になります。

なお、Force Touchに対応していないトラックパッドからのクリックはすべて`integerValue`が`1`になります。

## デモ

下記のように、5段階のクリックを受け付けて、そのクリックレベルを`NSLevelIndicator`へ表示させるサンプルを作成して実行してみました。

```swift
import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet var button: NSButton!
    @IBOutlet var indicator: NSLevelIndicator!

    func applicationDidFinishLaunching(aNotification: NSNotification) {
        button.setButtonType(.MultiLevelAcceleratorButton)
        button.maxAcceleratorLevel = 5
    }
    
    @IBAction func click(sender: AnyObject?) {
        indicator.integerValue = button.integerValue
    }
}
```

![デモ](https://qiita-image-store.s3.amazonaws.com/0/1866/897d8d9e-e1d0-b2fa-96d3-e0dd7acbf8a3.gif "デモ")

デモアニメではなかなか伝わりにくいですが、ボタンを長押しする間に押し込みを強めたり弱めたりしています。
Macで外部ディスプレイを認識できなくなったときの解決策


## 現象

MacBookProを使用しているのですが、久しぶりに自宅のティスプレイとThunderboltで接続してみると、ディスプレイを検出することができませんでした。

![スクリーンショット 2015-06-07 18.22.41.png](https://qiita-image-store.s3.amazonaws.com/0/42441/809abbf4-f199-a698-0d26-65b7e20e94e0.png "スクリーンショット 2015-06-07 18.22.41.png")

ディスプレイの方にもNoSignalとしか表示されません。

## 解決策

ターミナルから以下のコマンドを打って、OSを再起動すれば認識できるようになります。
{user}は自分のPC環境に合わせて変更して下さい。

```
$ sudo rm /Library/Preferences/com.apple.windowserver.plist
$ sudo rm /Users/{user}/Library/Preferences/ByHost/com.apple.windowserver.*.plist
```
GruntやGulpの実行をWebStormのUI上で管理する方法

GruntやGulpのタスクは、基本的にコマンドラインを使って実行します。しかし、 IDE **[WebStorm](https://www.jetbrains.com/webstorm/)を使うとUI上から手軽にタスクの実行・停止・再起動が行えます**。

# UI上でタスクの実行を管理できるメリット
プロジェクトが膨大になるにつれて、タスクの量も増えていきます。WebStormのUIを使うと**どんなタスクが登録されているかがわかりやすくなり、管理しやすくなります**。また、コマンドラインに疎いチームメンバーがいる場合も、Gulpの環境構築さえできていればボタン一つでタスクの実行ができるため手軽です。

# タスクの実行方法
それでは実際にWebStormでタスクを実行する方法を見ていきましょう。今回はGulpの例で説明しますが、Gruntの場合も同じです。

■ 手順

1. Gulpのタスクが定義されたプロジェクトをWebStormで開きます。
2. gulpfile.jsの箇所で右クリックし、コンテキストメニューから[Show Gulp Tasks]を選択します。
3. [View]→[Tool Windows]→[Gulp]と選択すると、UI上にGulpの実行パネルが表示され、あらかじめ登録しておいたタスクが①の箇所に表示されます。
4. ①の箇所のタスク名をダブルクリックするか、②の上部の実行ボタンをダブルクリックすると、指定したタスクが実行されます。

![gulptask.png](https://qiita-image-store.s3.amazonaws.com/0/67884/b99df78b-fde3-bfb2-bb0c-9b5cbe021f31.png)

## タスクの停止・再実行方法
watch中など実行途中のタスクは、②の箇所の上部ボタンで再実行、下部ボタンで停止ができます。

# 最後に
プロジェクト引き継ぎ時など、誰かが定義したタスクの名前をコマンドラインから打ち込むのは意外に面倒なものです。タスクの量が多い場合はなおさらです。そんなときはWebStormのUIを使って上手にタスクを管理しましょう。

> *参考*
> *[Gulp Tool Window](https://www.jetbrains.com/help/webstorm/gulp-tool-window.html)*
DockerHubにPHPのWebアプリケーション開発用のイメージを公開しました

# 構成
 * Ubuntu:14.0 (日本語対応)
 * Openssl
 * Nginx
 * PHP-FPM
 * Xdebug
 * Redis
 * MySQL

# イメージの取得
```bash:
docker pull maemori/web-application-development-server-for-php
```

# 起動
```bash:
docker run -d \
 -v ~/Public/develop/data:/develop/data:rw \
 -v ~/Public/develop/workspace:/develop/workspace:rw \
 -v ~/Public/develop/www:/develop/www:rw \
 -p 80:80 \
 -p 443:443 \
 -p 3306:3306 \
 -t -i \
 -h test \
 --name test \
 maemori/web-application-development-server-for-php:latest
```
  コンテナが起動するとhttpsで対象のWebアプリケーションを利用できます。（Nginx・PHP-FPM・MySQLが起動しています）
  Xdebugのポートは9001番です。デフォルトでリモートデバックデバッグ可能です。
##Volumeオプション (-v)

### PHPアプリケーションのプロジェクト格納場所
  ホスト側の例：~/Public/develop/workspace:

### htmlドキュメントルート
  ホスト側の例：~/Public/develop/www

## MySQLのデータベース作成用ファイル置き場
  ホスト側の例:~/Public/develop/data
  イメージ起動時に下の二つのファイルが実行されます

 * database.sql データベース作成

```sql:
create database [データベース名];
grant all on [データベース名].* to [ユーザID]@localhost identified by '[パスワード]';
grant all privileges on [データベース名].* to [ユーザID]@"192.168.%.%" identified by '[パスワード]' with grant option;
```
 * tables.sql　テーブルとデータ作成（mysqldumpで取得した内容）

```sql:
USE [データベース名];
--
-- Table structure for table `users_groups`
--
DROP TABLE IF EXISTS `users_groups`;
CREATE TABLE `users_groups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `user_id` int(11) NOT NULL DEFAULT '0',
  `created_at` int(11) NOT NULL DEFAULT '0',
  `updated_at` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`),
  UNIQUE KEY `UNIQUE` (`name`)
) ENGINE=InnoDB AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;
--
-- Dumping data for table `users_groups`
--
LOCK TABLES `users_groups` WRITE;
INSERT INTO `users_groups` VALUES (0,'Banned',1,0,0),(1,'Guests',1,0,0),(2,'Users',1,0,0),(3,'Moderators',1,0,0),(4,'Tester',2,0,1431777363),(5,'Developers',1,0,0),(6,'Operators',1,0,0),(7,'Administrators',1,0,0),(8,'Super Admins',1,0,0),(19,'aaa aaa aaa',2,1431870825,1432459462),(21,'cccccccc',2,1432420493,1432423717),(26,'ddd',2,1432460672,0);
UNLOCK TABLES;
```
指定ディレクトリ配下のpycファイルを全て削除する

# 指定ディレクトリ配下のpycファイルを全て削除する
## 削除コマンド
```bash
$ find <directory name> -name '*.pyc' -delete
```
## 例)~/projectディレクトリ配下の全てのpycファイル削除
```bash
# 検索
$ find ~/project -name *.pyc
/Users/xxx/project/django1.5/mysite/mysite/__init__.pyc
/Users/xxx/project/django1.5/mysite/mysite/settings.pyc
/Users/xxx/project/django1.5/mysite/mysite/urls.pyc
/Users/xxx/project/django1.5/mysite/mysite/wsgi.pyc
# 削除
$ find ~/project -name *.pyc -delete
# 検索
$ find ~/project -name *.pyc
なし
```
言葉から見る日本と英語圏の違い

# 言葉から見る日本と英語圏の違い

## ミーティングが長い
今日、外国籍の同僚と話をしてたら同僚がちょっとした不満を漏らした。それはミーティングが長いこと。
確かにうちの会社のミーティングはなんだかんだで伸びてしまいがちなところがある。1時間のつもりだった議論が白熱してしまい時間が伸びる/その時間内で話を終わらせられないといった事がちょくちょく起きる。
なるほど確かに改善していく必要があるなと思いながら話を聞いていると彼女はこう続けた。
「ミーティングで議論しないでほしい」

## ミーティングとディスカッション
議論が長びくことが問題なのかと思って聞くと、どうもそうではないらしい。「そもそもミーティングだと思って参加したので議論が始まることが嫌」なのだそうだ。
彼女の中ではミーティングとディスカッションは別のものとして明確に区別されている。ミーティングは「進捗の共有と次回に向けたタスクの確認」をする場であり、ディスカッションは「皆の考えや方向性のすり合わせ」の場なのだそう。
一方、日本人の思う会議は進捗の共有から始まり、議論によってみんなの方向性を擦り合わせる場になっている。つまりミーティングとディスカッションを明確には区別していない。これは言葉の面においてもその違いが表れている。
ミーティングは「出会い」を意味する meet からきていて、ディスカッションは「議論」を意味する discuss からきている。そして面白いことに、その違いを知ってか知らずか、会って議論すると書いて「会議」とよんでいる。

## 文化の違い
なるほど「共有」と「議論」が曖昧になる事で不満が出るのであれば直した方が良いなと思って「それは確かに良くない事だね」と同意すると意外にも彼女の方から「これは良い悪いの問題じゃない。悪いから直して欲しいとかじゃない。ただ文化の違いだと思っていて、その文化にまだ自分が馴染めていないだけ。」と返してきた。

英語圏などでは責任を持つ人を明確にして、共有や議論の場に来る人を絞る事で他の人の時間を必要以上に使わないようにしている。人の時間を使う事をコストと考えて、そのコストをいかに減らすかに焦点を当てている。  
一方日本では全体で同じ内容を共有する場を作る事で、各々が全体像を見て個々が同じ目標に対して自律的に動く事を期待する。人の時間を使う事に対して「コスト」という感覚は少なく、全員が一つの場所に向かおうとする事に焦点を当てている。  
どうもそんな違いが見え隠れするような気がする。

## 時間に対する感覚
そんな事を考えながら一つ感じたのが「時間」に対する感覚の違いだ。

時間を使う事を「コスト」と捉える時、多分人は無意識のうちに時間を「迫りくる敵」と捉えているように感じる。
もしかしたら様々な人種や国と隣りあった状態の国にとって、時間を有効に使えずに時を過ごすことはすなわち敗北・殲滅を意味していたのかもしれない。そんな環境の中にいたら時間をかける事はただのコストであり、時間は常に追いかけてくるものだったのだろう。  
日本は逆に、時間を「迫りくる敵」とは捉えずに「共に歩んでいく仲間」として捉えていたのかなと思う。少なくとも時間を使う事に対して欧米ほど強烈に負の感情を持ってはいないと思う。これは国内でお互いに争っていたかもしれないが、人種は基本的に同じで「負け = 殲滅」となる事は少なかったという経緯が関係しているのかもしれない。

これが「西洋」と「東洋」の違いの一つなのかもしれない。
な〜んてことまで空想して繋がっていく。そして一人でワクワクしてる。笑

## 相反する感覚を知り、理解する
同僚からも言われたが、これは「善し悪し」の話ではない。

複数の異なる背景から生まれた違いを知り、その時々で自分に必要な考え方を活用して前に進んでいく。
そんな挑戦が今後必要になっていくのだと思う。
現に日本は西洋の考え方を取り入れようと挑戦し、逆に欧米は東洋の考え方を取り入れようとしている面もある。

違う事はもどかしくて、でもその違いを知れる事はどこか楽しいものだなと最近よく思う。
Operation category READ is not supported in state standby

hiveでクエリを流し正常終了。

Namenode HAでNamenodeのフェイルオーバーをすると失敗すると言う事象が起きた。(本番じゃないよ--;)

<pre>
ERROR : Job Submission failed with exception 'org.apache.hadoop.ipc.RemoteException(Operation category READ is not supported in state standby
</pre>

なんかStandbyのNamenodeを使おうとしてるような感じ


その日は定時で帰ろうと思ってたのに夕方からず～っと調べて、、

NamenodeでHAを組む前に作成した、hiveテーブルのプロパティのlocationに
メモし忘れたけど、ホスト名がベタっと書かれてた。。

<pre>
location:hdfs://svr001	8020/user/hdfs/input
</pre>

HA組んだ後は以下のように書かれてる

<pre>
location:hdfs	//nameservice1/user/hdfs/input
</pre>

まぁ今後HA組む前に使い出すことはないのでいいけど、前バージョンとかからバージョン上げた人だとはまった人もいそうな


いつかどこかの誰かの助けになれば幸い<(_ _)>
hidden_field_tag / checkbox_tagの使い方


hidden_field_tagの使い方

```
<input type="hidden" name="hello_name_and_id" id="hello_name_and_id_" value="hello_value">
<%= hidden_field_tag "hello_name_and_id", "hello_value" %>
```

checkbox_tagの使い方

```
<input type="checkbox" name="hello_name_and_id" id="hello_name_and_id_" value="hello_value" class="hello_class">
<%= check_box_tag "hello_name_and_id", "hello_value", checked = false, class: "hello_calss" %>
```
Spring Boot/Groovy/EclipseでHello world

## 環境

OS X Yosemite 10.10.3
jdk1.8.0_45.jdk

### Spring Tool Suite 

Version: 3.6.4.RELEASE
Build Id: 201503100337
Platform: Eclipse Kepler SR2 (4.3.2)

Gradle IDE plugin Version: 3.6.4.201503050952-RELEASE
Groovy-Eclipse plugin Version: 2.9.2.xx-201502282108-e43j8


# 前提条件

下の状態をJavaからGroovyに書き換えます

> Spring IO,Spring Boot, Eclipse Gradle ProjectでHello world
http://qiita.com/quwahara/items/1bb7dcf8fd8100cc4ed9

# Groovyをbuild.gradleに設定する

下を参考に前提条件のbuild.gradleに// Addを追記

> Eclipse/Gradle Java Projectで、後からGroovyもCompileできるようにする
http://qiita.com/quwahara/items/22a898b61d64dd1ee934

```groovy:build.gradle
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'io.spring.gradle:dependency-management-plugin:0.4.1.RELEASE'
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'io.spring.dependency-management'
// Add
apply plugin: 'groovy'
// Add
sourceSets {
    main {
        java {
            srcDirs = []
        }
        groovy {
            srcDirs = ['src/main/java']
        }
    }
    test {
        java {
            srcDirs = []
        }
        groovy {
            srcDirs = ['src/test/java']
        }
    }
}

sourceCompatibility = 1.5
version = '1.0'
jar {
    manifest {
        attributes 'Implementation-Title': 'Gradle Quickstart',
                   'Implementation-Version': version
    }
}

repositories {
    mavenCentral()
}

dependencyManagement {
    imports {
        mavenBom 'io.spring.platform:platform-bom:1.1.2.RELEASE'
    }
}

dependencies {
    // Add
    compile 'org.codehaus.groovy:groovy-all'
    compile 'org.springframework.boot:spring-boot-starter-web'

    compile group: 'commons-collections', name: 'commons-collections', version: '3.2'
    testCompile group: 'junit', name: 'junit', version: '4.+'
}

test {
    systemProperties 'property': 'value'
}

uploadArchives {
    repositories {
       flatDir {
           dirs 'repos'
       }
    }
}
```

# 依存関係を更新

追記分を反映させるため依存関係を更新する
Package ExplorerでProjectのRoot要素を選択、右クリック
Gradle → Refresh All
Gradle Dependencies下に依存するLibraryが追加される

# javaをgoovyに変更

hello/SampleController.javaをhello/SampleController.groovyに名前変更

# アプリケーションを実行

Package Explorerでhello/SampleController.groovyを選択、右クリック
Debug As → Spring Boot App

ブラウザで下のURLを開く
http://localhost:8080/

# 参考

* Source
https://github.com/quwahara/GP/tree/spring-hello-world-groovy

# 次の記事

Groovyを使ったSpring Boot, Data JPA, MySQL操作の簡単な実装
http://qiita.com/quwahara/items/6567fd54772a879a7a6f
ASP.NET(C#)でクロスドメインに対応する

System.Web.Http.corsをNuGet。
WebConfigに、Customheaderを追加すればよいだけ。


```csharp:WebApiConfig.cs
using System.Web.Http;

namespace t2tr
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.EnableCors();
        }
    }
}
```

```csharp:Controllers.xxxController.cs
    [EnableCors(origins: "*", headers: "*", methods: "*")]
    public class XxxController : ApiController
    {
    }

```
ProcessingでOpenCVを使う

OpenCVの公式JavaラッパーをProcessingで使う
[OpenCV for Processing](https://github.com/atduskgreg/opencv-processing)や[OPENCV Processing and Java Library](http://ubaa.net/shared/processing/opencv/)もあるけど
~~機能に限りがあるので公式のものを使うことをおすすめします~~
2015/11/9訂正:
OpenCV for ProcessingはJavaのOpenCVを使用しているようでした．
最新版のOpenCVを使いたい方はこの方法を試すか，OpenCV for Processingの中を書き換えてみてください．

まずはOpenCVのJavaラッパーを持ってくる
Macの場合はhomebrewで管理できる(Windowsの方はすみません)

```
pip install numpy
```
```
brew tap home-brew/science
```
```
brew install opencv --with-java
```
少し時間がかかるが終わったら
***/usr/local/Cellar/opencv/2.4.11_1/share/OpenCV/java/***に
***opencv-2411.jar***と***libopencv_java2411.dylib***があるはず
*注 ) 数字はバージョンによって異なります*
次に***Processing/libraries***に***opencv/library***ディレクトリを作り
先ほどの***opencv-2411.jar***と***libopencv_java2411.dylib***をコピーする
最終的には
***Processing/libraries/opencv/library/opencv-2411.jar
Processing/libraries/opencv/library/libopencv_java2411.dylib***
になる
これでProcessingライブラリ化は完了なのでサンプルを動かしてみる

```java:HelloOpenCV.pde
import org.opencv.core.*;

Mat img;

void setup() {
  System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
  Mat m  = Mat.eye(3, 3, CvType.CV_8UC1);
  System.out.println("m = " + m.dump());
}
void draw() {
}
```
無事に

```java
m = [1, 0, 0;
  0, 1, 0;
  0, 0, 1]
```
と表示されたら終了
PImageとMatの変換については[次の投稿](http://qiita.com/endoh0509/items/2b3fe05288735ac629a3)で
キーボードの上ボタンが効かなくて、ウィンドウが最大、普通になって困る。


##挙動
キーボードの上を押すと、
ウィンドウが大きくなったり、小さくなったりした。

これだと、ターミナルで過去のコマンドを呼び出して実行できない。

##環境
debian

##対応



![Kobito.SqIgXa.png](https://qiita-image-store.s3.amazonaws.com/0/59686/54dab743-68d7-0c43-2908-46eec237f476.png "Kobito.SqIgXa.png")

設定があったので、無効化した。

![Kobito.tFf6Mo.png](https://qiita-image-store.s3.amazonaws.com/0/59686/9844398e-2c72-23a8-9bef-c4b3ec1a0857.png "Kobito.tFf6Mo.png")




なんで、こういう設定になっていたかは謎。。
Chromeのresolve cacheを削除しました。

Chromeのresolve cacheが削除できるようなので削除しました。

Chromeを利用していて、<a href="chrome://net-internals/#dns">chrome://net-internals/#dns</a>にアクセスすると、**Clear host cache**というボタンがあります。このボタンを押すとキャッシュが削除されるみたいです。

# 参考

http://www.trishtech.com/2012/10/how-to-clear-host-resolver-cache-in-google-chrome/
Spring IO,Spring Boot, Eclipse Gradle ProjectでHello world

## 環境

OS X Yosemite 10.10.3
jdk1.8.0_45.jdk

### Spring Tool Suite 

Version: 3.6.4.RELEASE
Build Id: 201503100337
Platform: Eclipse Kepler SR2 (4.3.2)

Gradle IDE plugin Version: 3.6.4.201503050952-RELEASE	


# 前提条件

Eclipseが下の状態にあること

> EclipseでGradle Java Porjectを新規作成する
http://qiita.com/quwahara/items/1bb7dcf8fd8100cc4ed9

# Spring IOをbuild.gradleに設定する

下を参考に前提条件のbuild.gradleに// Addを追記

> Spring IO Platform Reference Guide
4.2 Using Spring IO Platform with Gradle
http://docs.spring.io/platform/docs/1.1.2.RELEASE/reference/htmlsingle/#getting-started-using-spring-io-platform-gradle

```groovy:build.gradle
// Add
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'io.spring.gradle:dependency-management-plugin:0.4.1.RELEASE'
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
// Add
apply plugin: 'io.spring.dependency-management'

sourceCompatibility = 1.5
version = '1.0'
jar {
    manifest {
        attributes 'Implementation-Title': 'Gradle Quickstart',
                   'Implementation-Version': version
    }
}

repositories {
    mavenCentral()
}

// Add
dependencyManagement {
    imports {
        mavenBom 'io.spring.platform:platform-bom:1.1.2.RELEASE'
    }
}

dependencies {
    // Add
    compile 'org.springframework.boot:spring-boot-starter-web'

    compile group: 'commons-collections', name: 'commons-collections', version: '3.2'
    testCompile group: 'junit', name: 'junit', version: '4.+'
}

test {
    systemProperties 'property': 'value'
}

uploadArchives {
    repositories {
       flatDir {
           dirs 'repos'
       }
    }
}
```

# 依存関係を更新

追記分を反映させるため依存関係を更新する
Package ExplorerでProjectのRoot要素を選択、右クリック
Gradle → Refresh All
Gradle Dependencies下に依存するLibraryが追加される

# アプリケーション作成

下を参考にhello/SampleController.javaを作成

> Spring Boot
Quick Start
http://projects.spring.io/spring-boot/#quick-start

```java:hello/SampleController.java
package hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@EnableAutoConfiguration
public class SampleController {

    @RequestMapping("/")
    @ResponseBody
    String home() {
        return "Hello World!";
    }

    public static void main(String[] args) throws Exception {
        SpringApplication.run(SampleController.class, args);
    }
}
```

# アプリケーションを実行

Package Explorerでhello/SampleController.javaを選択、右クリック
Debug As → Spring Boot App

ブラウザで下のURLを開く
http://localhost:8080/

# 参考

* Source
https://github.com/quwahara/GP/tree/20150607-2-spring-hello-world

# 次の記事

Spring Boot/Groovy/EclipseでHello world
http://qiita.com/quwahara/items/f4b1d30855fff83da3b8
「IoT縛りの勉強会! IoTLT vol.3」に参加した

# 勉強会の基本情報
* 【日　時】2015年5月13日 19:00~21:30
* 【会　場】リレーションズ 東京都渋谷区神宮前3-7-5
* 【参加費】無料
* 【主　催】リレーションズ株式会社
* 【申し込み】http://iotlt.connpass.com/event/13615/

# 目的
* アイディアを共有する
* 技術を紹介する

# 内容
### LT：ビスケットの増やし方
* アイディアに共有する
* 動作：ポケットを叩く　結果：ビスケットが増える
* 動作と結果をアイディアでつなげるものを作る

### LT：IoTバックエンド
* 構築パターン
* BaaSを紹介
* IoT用MQTT
 * http://sango.shiguredo.jp　→　難易度：低い；　リアルタイム通信
 * http://parse.com/apps　→　　難易度：中；　arduino, raspberry pi
 * aws Kinesis　→ 難易度：　高　
 * https://mlkcca.com/
 * http://gihyo.jp/dev/feature/01/milkcocoa-baas/0005

### LT：続々とBaaSがIoT対応してきた
* イベント物デバイス
* inter,  mbed
* webserver
 * IRKit webserver
 * wemo
 * bocco
 * hue(使う)
* ライトをコントロールできる

### リノベーションxIoT
* リノベーション　IoT
 * 自動コントロール
 * 外出から
 * 家の状態をモニタリング
 * 一括制御�自自動jisaf
* リノベーションのために、やること
    * 情報発信
    * 設置スペースの開放
* お願いこと
    * 展示したい製品募集
    * イベントなどのアイディア募集


### LT：http://kikyu.org/ の話
* リアルタイム追跡


### LT：mbedでIoTデバイス	
* mbedとは
    * ブラウザでプログラムできる
* 性能
    * LAN, Bluetooth LE
* mbed device server

### LT：IOT時代の楽しみ方	横堀 氏@ ADK勉強会（東京）
* http://adk-tokyo.com
* ハードウェアを意識しないでいい
* intel edison  vs Kinoma create
    * linux
    * intel edison: 小さい；　6800円；
  

### LT：Tesselで作るニコニコ新着コメントお知らせはちゅね
* 仕組み
    * HTTPで、niconico API
    * 部品：　Tessel, サーボモータ、　
* 配線
    * GND, G5 pin
* プログラム
EclipseでGradle Java Porjectを新規作成する

## 環境

OS X Yosemite 10.10.3
jdk1.8.0_45.jdk

### Spring Tool Suite 

Version: 3.6.4.RELEASE
Build Id: 201503100337
Platform: Eclipse Kepler SR2 (4.3.2)

Gradle IDE plugin Version: 3.6.4.201503050952-RELEASE	

# Gradle Project新規作成手順

File -> New -> Project...

Gradle -> Gradle Project

Project Name: GP

Sample Project: Java Quickstart

Press Finish button

# 作成されたbuild.gradle

```groovy:build.gradle
apply plugin: 'java'
apply plugin: 'eclipse'

sourceCompatibility = 1.5
version = '1.0'
jar {
    manifest {
        attributes 'Implementation-Title': 'Gradle Quickstart',
                   'Implementation-Version': version
    }
}

repositories {
    mavenCentral()
}

dependencies {
    compile group: 'commons-collections', name: 'commons-collections', version: '3.2'
    testCompile group: 'junit', name: 'junit', version: '4.+'
}

test {
    systemProperties 'property': 'value'
}

uploadArchives {
    repositories {
       flatDir {
           dirs 'repos'
       }
    }
}
```

# 参考

* Gradle User Guide、第7章 Javaクイックスタート
http://gradle.monochromeroad.com/docs/userguide/tutorial_java_projects.html

* Source
https://github.com/quwahara/GP/tree/20150607-1-first-commit

# 次の記事

Spring IO,Spring Boot, Eclipse Gradle ProjectでHello world
http://qiita.com/quwahara/items/2f2c68dd24696eb28588
行指向に jq コマンドを使う

# 課題

以下のような Line Delimited な JSON ログファイルがあったとして、

```json:input.json
{"a":"foo","b":"bar"}
{"a":"foo","b":"bar"}
```

[jq](http://stedolan.github.io/jq/) コマンドを以下のように使うと、

```bash
$ cat input.json | jq -r '.a,.b'
foo
bar
foo
bar
```

のように行指向になっていなくて、そのあと awk とか grep とかに pipe でわたしてごにょごにょするのが辛い。

```
foo bar
foo bar
```

のように出力して欲しい

# やりかた

以下のようにすると TSV に変換できて、行指向になる。

```
$ cat input.json | jq -r '"\(.a)\t\(.b)"'
foo	bar
foo	bar
```

# スクリプト

覚えにくくて毎回打ってられない感あるので、ラッパースクリプトを書いた。名前はてきとうに jjq にした。

```bash:jjq
#!/bin/bash

usage_exit() {
    echo "Usage: $0 [-k keys] [file]"                                   1>&2
    echo ""                                                             1>&2
    echo "List specified keys of Line Delimited JSON file"              1>&2
    echo ""                                                             1>&2
    echo "  OPTIONS"                                                    1>&2
    echo "    -k keys    keys to output (multiple keys separated by ,)" 1>&2
    echo ""                                                             1>&2
    exit 1
}

while getopts k:Kh OPT
do
    case $OPT in
        k)  # Converting like "\(.foo)\t\(.bar)"
            KEYS=$(echo $OPTARG | sed 's/,/)\\t\\(./g')
            KEYS=$(echo "\"\(.$KEYS)\"")
            ;;
        h)  usage_exit
            ;;
        \?) usage_exit
            ;;
    esac
done
shift $((OPTIND - 1))

if [ $# -eq 0 ]; then
  exec jq -r "${KEYS}"
else
  FILE=${@:$#}
  exec jq -r "${KEYS}" $FILE
fi
```

これで以下のようにできるようになった。

```
$ cat input.json | jjq -k a,b
```

おしまい
MTDDC Meetup TOHOKU 2015に行ってきました

仙台でこのテのイベントってほんと少なくてねえ・・・

MTと銘打ってるイベントなのでMovable Typeに関するセッションがメインだったのですが、それだけではなくMT6から搭載されたREST APIに絡んで広くアプリの構築手法に関するものがあったり、SEOの話、フォントの話などなどWeb周りの技術に関して広く取り上げられてたのがかなり良かったです

喫煙所で偶然話す機会のあった東京からのスピーカーの方も「話題が広くて面白かったですねえ」とおっしゃってました

普段は会社にこもりっきりでなかなか外の人とお話することもなかったので、懇親会まで参加してきました周りのTech系の人たちとも技術的な方向性はそこまでズレてないなと安心したイベントでした