OmniAICreator/Qiita-1.07M huggingface dataset:
Netfilx Vector と Performance Co-Pilot のインストール

Vectorを試用してみたのでメモ。

# Vectorとは
[Vector](http://techblog.netflix.com/2015/04/introducing-vector-netflixs-on-host.html)はNetflixが開発している"on-host performance monitoring framework"。

ざっくり言うと、サーバメトリクス収集ツールの[Performance Co-Pilot](http://pcp.io/)のデータ可視化ツール。
Vectorは、ブラウザから直接サーバのWebAPI(pmweb)にアクセスし、メトリクスを収集して表示する。クライアントとなるPCとサーバがIP通信可能ができる必要がある。

![vector1.png](https://qiita-image-store.s3.amazonaws.com/0/75049/b05c5a5f-9027-6eaa-a005-503ba60eeb69.png)

Netflixでは、別に[Altas](http://techblog.netflix.com/2014/12/introducing-atlas-netflixs-primary.html)という、メトリクス収集・集計・可視化フレームワークを使っていて、基本的にはこちらで集計データを確認しつつ、トラブルシューティングなど、サーバ・インスタンスレベルでのメトリクスを詳細に確認したい時にのみ、Vectorを利用しているようだ。[参考ブログ](http://techblog.netflix.com/2015/02/a-microscope-on-microservices.html)

# Performance Co-Pilotとは

[Performance Co-Pilot](http://pcp.io/)は、サーバのメトリクス収集ツールセット。
2007年から開発されていて、今も活発なOSSなのだが、日本での利用事例はほとんど見つからない。
sar（System Admin Reporter)で良い気もするけど、メトリクス取集、データ保存、可視化がモジュール化されていて、拡張可能になっている。(ElasticSearch, Apache, MySQL Agentなど色々そろっている)


# インストール

## 環境

AWSのAmazon Linuxを利用。

```bash
$ cat /etc/os-release
NAME="Amazon Linux AMI"
VERSION="2015.03"
ID="amzn"
ID_LIKE="rhel fedora"
VERSION_ID="2015.03"
PRETTY_NAME="Amazon Linux AMI 2015.03"
ANSI_COLOR="0;33"
CPE_NAME="cpe:/o:amazon:linux:2015.03:ga"
HOME_URL="http://aws.amazon.com/amazon-linux-ami/"
```

## Performance Co-Pilot(PCP)のインストール

メトリクスを確認サーバにインストールする。
Vectorが要求するPCPのVersionが(>3.10)と高く、まだいい感じのrpmがないので自分でビルドする事にする。

```bash
# 必要なパッケージ
$ sudo yum install perl-Tk-devel bison flex libmicrohttpd-devel gcc-c++
# pcpユーザ/グループの作成
$ sudo groupadd pcp
$ sudo adduser -s /sbin/nologin -g pcp -M pcp
# ソースからビルド
$ git clone git://git.pcp.io/pcp
$ cd pcp
$ ./configure --prefix=/usr --sysconfdir=/etc --localstatedir=/var --with-webapi=true
$ make
# インストール
$ sudo make install 
$ sudo ldconfig -v
```

# Vectorのインストール
Webサーバがあれば何でもOK、下記は公式の手順。

node.jsとnpmをyumでインストール（手抜き)

```bash
$ sudo yum install  nodejs npm
```

Bowerのインストール

```bash
$ sudo yum install  nodejs npm
```

Vectorと依存ライブラリのインストール

```bash
$ git clone https://github.com/Netflix/vector.git
$ cd vector
$ bower install
$ npm install
```

# 起動方法

## Performance Co-Pilot(PCP)の起動

```bash
$ sudo /sbin/chkconfig pmwebd on
$ sudo /etc/init.d/pcp start
```

## Vectorの起動
```
$ cd vector
$ gulp
```
http://localhost:8080 にアクセスする。


### 他の起動方法

Vectorは静的HTMLが表示できればいいので、サーバ側はApacheでも大丈夫。
とりあえずの検証目的なら、Pythonが簡単。

```bash
$ cd vector/app
$ python -m SimpleHTTPServer 8080
```

### localhost以外でgulp利用

vector/gulpfile.js を下記の様に修正すればよい。

```js
var gulp = require('gulp'),
    connect = require('gulp-connect');

gulp.task('webserver', function() {
    connect.server({
        root: 'app',
        host: '0.0.0.0',
        livereload: true
    });
});

gulp.task('default', ['webserver']);
```

おしまい
request を streamで利用し、テストする


Lab と(streamな) request の組み合わせで、サーバにPostリクエストを送り、レスポンスを検証するテストをthrough2を使って書いてみた。

Through2じゃなくてStream APIをそのまま使った方がいい気がするがひとまずこのままで。

```javascript:production
api.login = function () {
  return request.post({
    json: true,
    uri: 'https://api.example.com/user',
    form: {
      username: config.username,
      password: config.password
    }
  });
};

```

```javascript:test
  lab.experiment('Post', function () {
    lab.test('to api', function (done) {
      var buffer = '';
      api.login().pipe(through2.obj(function (chunk, enc, callback) {
        this.push(chunk);
        callback();
      })).on('data', function (data) {
          buffer += (data || '');
      }).on('end', function () {
        var responseBody = JSON.parse(buffer);
        username = responseBody.username;
        code.expect(responseBody.user.name).match(/^username$/);
          done();
        });
    });
  });
```

※experimentやtestの名前が雑なのは自覚している。仕事ではやってはいけない。
MacでBracketsを使ってみる〜インストール編〜

次世代のテキストエディタということで注目されているらしい
「Brackets」についてのメモ。

最初に参考にしたURLは以下です。
[次世代のテキストエディタ、Bracketsが便利すぎて色々ヤバイ（Ver.1.2対応）](http://matome.naver.jp/odai/2141562606923530301)

#インストール
git_hub からでもダウンロードできるらしいですが、私は
[brackets公式サイトよりダウンロード](http://brackets.io/)
![スクリーンショット 2015-04-28 15.49.28.png](https://qiita-image-store.s3.amazonaws.com/0/39911/58e35b29-d347-66d6-5a9f-8f6e83e488e9.png)

ダウンロードが終了したらのファイルができています。
これをクリック
Brackets.1.3.Extract.dmg(41.8MB)
![スクリーンショット 2015-04-28 15.38.43.png](https://qiita-image-store.s3.amazonaws.com/0/39911/cf4c43ed-5239-5e14-6a88-6f632d9dca29.png)
こんなのがたちあがるので、Brackets.appをApplicationにドラックします。
そうすると、LaunchPadにも表示されるので、今後はLaunchPadから起動します！

#BracketsをLaunchPadから起動いじってみる
こんな感じのファイルが立ち上がってきました。
![スクリーンショット 2015-04-28 15.38.35.png](https://qiita-image-store.s3.amazonaws.com/0/39911/53829c58-a057-99ba-a960-779653d39415.png)

ソースじゃなくてブラウザでみたいならば
[ファイル]->[ライブプレビュー]を実行します。
（Chrome が入っていないとみれません。あることを前提に進めます。）
![スクリーンショット 2015-04-28 16.01.08.png](https://qiita-image-store.s3.amazonaws.com/0/39911/d9649920-d601-a3ba-ba7c-20e30f649cb5.png)

これで「OK」を押すとソースの説明文がブラウザでみれるようになりました。
![スクリーンショット 2015-04-28 16.05.20.png](https://qiita-image-store.s3.amazonaws.com/0/39911/c1c9cd67-cb60-2f86-4bb6-887ddeabbd30.png)

そもそも、このガイドがどこにはいっているのだろう？と気になったので一応確認。
>/Applications/Brackets.app//Contents/samples/
の下にいるみたいです。

```
$ find /Applications/Brackets.app/ -name "Getting Started" -type d
/Applications/Brackets.app//Contents/samples/el/Getting Started
/Applications/Brackets.app//Contents/samples/fa-ir/Getting Started
/Applications/Brackets.app//Contents/samples/ja/Getting Started
/Applications/Brackets.app//Contents/samples/root/Getting Started
/Applications/Brackets.app//Contents/samples/ru/Getting Started
/Applications/Brackets.app//Contents/samples/zh-tw/Getting Started
```

エディタに期待していることは、
・Markdownみたいに書くそばからブラウザに反映されていくのか？
・最初の一文字をいれたときに、推測して候補の一覧が出るか？
・開始タグいれたら閉じタグはでるのか？

いろいろ説明をみているとどれも実現しそうなのですが、設定が必要なようで
まだ使い勝手がわかってません。

画面右側に見えるマーク![スクリーンショット 2015-04-28 17.08.42.png](https://qiita-image-store.s3.amazonaws.com/0/39911/d1073677-c137-8742-745d-7a95e8e9afd4.png)

「N」みたいなマークはブラウザを更新してくれるようです。
でも、今の段階では保存しないと更新してくれないんですよね。。。
一番下のマークをクリックすると
同意を求めてくる画面が立ち上がりました。
![スクリーンショット 2015-04-28 17.08.25.png](https://qiita-image-store.s3.amazonaws.com/0/39911/2e643c92-f237-ae89-cf2a-de481a7a70d1.png)

とりあえず同意をするとPSDファイルが読めるようになったようです。
![スクリーンショット 2015-04-28 17.35.09.png](https://qiita-image-store.s3.amazonaws.com/0/39911/5ccfda4c-a51d-b412-5c8a-19d3a1b8002f.png)

真ん中をクリックするとインストールできるものが表示されるようです。
今回は開いただけで何も実行はしません。
![スクリーンショット 2015-04-28 17.27.48.png](https://qiita-image-store.s3.amazonaws.com/0/39911/7a615e27-b6e4-9160-c041-ee47a9d0fad7.png)

これからいろいろ設定をしてみようと思います。
サクッとシェルスクリプトを書く代わりにGoを使う為の基本事項


* package/importは省いてます
* 項目が増えすぎたら整理します
* Gist https://gist.github.com/hossshy

## コマンドライン引数の取得と要素数チェック

```go:args.go
func main() {
	args := os.Args
	if len(args) <= 1 {
		log.Fatal("Usage: ", path.Base(args[0]), " anything")
	}

	fmt.Println("len: ", len(args), " values: ", args)
}
```

## 文字列 -> 数値変換

```go:atoi.go
func main() {
	args := os.Args
	if len(args) != 2 {
		log.Fatal("Usage: ", path.Base(args[0]), " number")
	}
	if val, err := strconv.Atoi(args[1]); err != nil {
		log.Fatal(err)
	} else {
		fmt.Println("val: ", val)
	}
}
```

## ファイル存在チェック

```go:fileexists.go
func main() {
	args := os.Args
	if len(args) != 2 {
		log.Fatal("Usage: ", path.Base(args[0]), " filename")
	}
	if _, err := os.Stat(args[1]); err == nil {
		fmt.Println("File exists")
	} else {
		fmt.Println("File not found.")
	}
}
```

## ディレクトリの中身一覧取得

```go:dirs.go
func main() {
	args := os.Args
	if len(args) != 2 {
		log.Fatal("Usage: ", path.Base(args[0]), " dir")
	}
	files, _ := ioutil.ReadDir(args[1])
	for _, f := range files {
		fmt.Println(f.Name())
	}
}
```

## ファイル読み込み

```go:fileread.go
func main() {
	args := os.Args
	if len(args) != 2 {
		log.Fatal("Usage: ", path.Base(args[0]), " file")
	}
	data, err := ioutil.ReadFile(args[1])
	if err != nil {
		log.Fatal(err)
	}

	fmt.Println("Read:[", string(data), "]")
}
```

## ファイル書き込み

```go:filewrite.go
func main() {
	args := os.Args
	if len(args) != 3 {
		log.Fatal("Usage: ", path.Base(args[0]), " filename text")
	}

	data := []byte(args[2])
	err := ioutil.WriteFile(args[1], data, 0644)
	if err != nil {
		log.Fatal(err)
	}
}
```

## 現在時刻取得

* 引数の値はこのまま2006〜とすること。

```go:now.go
func main() {
	now := time.Now()
	fmt.Println("now: ", now)
	fmt.Println("now: ", now.Format("20060102"))       // YYYYMMDD
	fmt.Println("now: ", now.Format("20060102150405")) //YYMMDDhhmmss
}
```

## 外部コマンド実行

```go:exec.go
func main() {
	args := os.Args
	if len(args) < 2 {
		log.Fatal("Usage: ", path.Base(args[0]), " cmd")
	}
	out, err := exec.Command(args[1], args[2:]...).Output()
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println("Out: ", string(out))
}
```
webpack require.ensureを使った時の、非同期で読み込むパスの指定方法


gulpの場合での動作となります。


```js
require.ensure('./_module/xxx', function() {
	UA = require('./_module/xxx');
});
```

こうすることで、bundle.jsと1.bundle.jsに分割されます。

```webpack.conf.js
module.exports = {
    output: {
        filename: "bundle.js",
		publicPath: "/assets/js/"
    },
```



publicPathを指定することで、require.ensureした場合に、そこのパスから読み込まれます。

require.ensureを複数記述しても、bundle.jsと1.bundle.jsにしか分割されません。。。。モジュールを任意に分割する方法が知りたいです。。。。
S2DAOでIN句を使う

```
select * from company where code in ("001", "003")
```

こんなんをS2DAOでやりたい場合、

```
select * from company where code in /*codes*/('004', '005')
```

SQLの中身はこーやって書いて、渡す側のjavaでは

```
String[] ids = {"001", "003"}
```

こんな感じで書く。

ちなみにクエリのところに書いた「('004', '005')」の部分は「リテラル（ダミーデータ）」と言って、
配列の場合は必ず書かないとダメ。
（「('004', '005')」である必要はない。SQLを発行するツールを使った場合にダミーで使ってくれるだけ。）

# 参考サイト
* [S2Dao.NET - SQLコメント](
http://s2dao.net.seasar.org/ja/sqlcomment.html)
「ES6 クイズ」を AST で見てみる

[ES6 クイズ - Qiita](http://qiita.com/Jxck_/items/11e8dcdb97e5e82c8cc9) の二番目の問題に自信が無かったので [AST](https://github.com/estree/estree) を見てみる。

クイズの問題はこれ

```js:jxck_es6_quiz.js
var a = 1, b = 2, c = 3, d = 4;
var f = a => b ? c: d;
// f = ?
```

[AST](https://github.com/estree/estree) をダンプするプログラムを書く。使うのは [acorn](https://github.com/marijnh/acorn), [espurify](https://github.com/estools/espurify), [concat-stream](https://github.com/maxogden/concat-stream).

```shell-session
$ mkdir es6_quiz && cd es6_quiz
$ npm init
$ npm install acorn espurify concat-stream
```

```js:dump_ast.js
var acorn = require('acorn');
var espurify = require('espurify');
var concat = require('concat-stream');
var parserOptions = { ecmaVersion: 6 };

process.stdin.pipe(concat(function (buf) {
    var jsCode = buf.toString('utf-8');
    var ast = acorn.parse(jsCode, parserOptions);
    console.log(JSON.stringify(espurify(ast), null, 2));
}));
```

実行して AST を見てみる

```shell-session
$ cat jxck_es6_quiz.js | node dump_ast.js
```

出力結果:

```json
{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "value": 1
          }
        },
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "b"
          },
          "init": {
            "type": "Literal",
            "value": 2
          }
        },
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "c"
          },
          "init": {
            "type": "Literal",
            "value": 3
          }
        },
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "d"
          },
          "init": {
            "type": "Literal",
            "value": 4
          }
        }
      ],
      "kind": "var"
    },
    {
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "f"
          },
          "init": {
            "type": "ArrowFunctionExpression",
            "id": null,
            "params": [
              {
                "type": "Identifier",
                "name": "a"
              }
            ],
            "body": {
              "type": "ConditionalExpression",
              "test": {
                "type": "Identifier",
                "name": "b"
              },
              "alternate": {
                "type": "Identifier",
                "name": "d"
              },
              "consequent": {
                "type": "Identifier",
                "name": "c"
              }
            },
            "generator": false,
            "expression": true
          }
        }
      ],
      "kind": "var"
    }
  ],
  "sourceType": "script"
}
```

なるほど〜〜
「ionic platform add ios」で「spawn EACCES」エラーが発生した


ionicプロジェクトを作ってios platformを追加した時「spawn EACCES」エラーが発生した。

```bash
$ ionic start TestApp sidemenu
$ cd TestApp
$ ionic platform add ios
Downloading Default Ionic Resources

Downloading: https://github.com/driftyco/ionic-default-resources/archive/master.zip
[=============================]  100%  0.0s
Done adding default Ionic resources
Adding icons for platform: ios
running cordova platform add ios
npm http GET https://registry.npmjs.org/cordova-ios/3.8.0
npm http 200 https://registry.npmjs.org/cordova-ios/3.8.0
npm http GET https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz
npm http 200 https://registry.npmjs.org/cordova-ios/-/cordova-ios-3.8.0.tgz
Adding ios project...
iOS project created with cordova-ios@3.8.0
Running command: /Users/babukuma/Documents/Workspace/TestApp/hooks/after_prepare/010_add_platform_class.js /Users/babukuma/Documents/Workspace/CompassJapan
Error: spawn EACCES
    at exports._errnoException (util.js:746:11)
    at ChildProcess.spawn (child_process.js:1162:11)
    at Object.exports.spawn (child_process.js:995:9)
    at Object.exports.spawn (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:100:31)
    at runScriptViaChildProcessSpawn (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:189:23)
    at runScript (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:132:16)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/hooks/HooksRunner.js:115:20
    at _fulfilled (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:787:54)
    at self.promiseDispatch.done (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:816:30)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:749:13)
```

調べて見つかった解決策はのは「ionic hooks add」をする事。情報元はhttp://forum.ionicframework.com/t/add-ios-error/20262/7

```bash
$ionic platform remove ios
$ionic hooks add 
$ionic platform ios
```

これでエラーなしでios platformが追加された。
Elasticsearchとkibanaを連携させる

[前回](http://qiita.com/duke-gonorego/items/51c0522214bcae657666)でlogstashからElasticsearchにデータをインデクスできました。
今回はその登録したデータをkibana4で確認したいと思います。

# 環境
 * VirtualBox 4.3
 * ubuntu 14.04
 * java8(1.8.0_25)
 * Elasticsearch(1.5.0)
 * kibana4(4.0.2)

## 確認まで

http://localhost:5601/

上記にアクセスしてkibanaを起動したら

1. 「Index contains time-based events」のチェックを外す
2. 「Index name or pattern」は何も指定していなければデフォルトで指定されている「logstash-*」のままで
3. 「Create」ボタンを押す
4. 「kibana」ロゴ右の「Discover」を押す
5. 何も表示されていません。Elasticsearchにデータ投入からすぐなら良いのですが、ヘッダ右側に「Last 15 minutes」とあるように「直近15分」を表示しようとしています。この時計アイコンを押下して、任意の範囲を指定してください。

データが少ないので表示されるデータもあっさりでしたが、
多くのデータを投入することによって、様変わりすると思います。
Google Maps Heatmapレイヤを使う


# ライブラリ付きでGoogle Mapsを読み込む

ヒートマップレイヤを使うにはGoogle Mapsをライブラリ付きで読み込む必要がある。Google Maps JavaScript APIを呼び出す際に `libraries=visualization` を付与して呼び出すことで、 `google.maps.visualization` オブジェクトが使用できるようになる。

```html
<script type="text/javascript"
        src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>
```

```html
<body>
  <div id="map-canvas"></div>
</body>
```

# ヒートマップレイヤを使用する

`google.maps.visualization.HeatmapLayer` オブジェクトを `google.map.Map` インスタンスにオーバーレイする。

ヒートマップ描画に使用するオブジェクトは`google.maps.LatLngオブジェクト`および`JavaScriptオブジェクト`のいずれかで、後者は`location`属性に`google.maps.LatLngオブジェクト`を内包しており`weight属性`にヒートマップの重みを持っている（サーバサイドで計算して出力することを想定していると思われる）。

```js
// データの準備
var heatmapData = [
  new google.maps.LatLng(35.685175, 139.752799),
  {location: new google.maps.LatLng(35.65858, 139.745433), weight: 8},
  {location: new google.maps.LatLng(35.710063, 139.8107), weight: 5}
];

// Mapオブジェクトの初期化
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new google.maps.LatLng(35.658, 139.745),
    zoom: 11
});

// ヒートマップレイヤの初期化
var heatmap = new google.maps.visualization.HeatmapLayer({data: heatmapData});

// ヒートマップをmapインスタンスに紐付け
heatmap.setMap(map);
```

# 参考

* [Demo](https://jsfiddle.net/rjr6efuw/)
* [Heatmap Layer](https://developers.google.com/maps/documentation/javascript/heatmaplayer)
画像変換用バッチ/ツールについて

AndroidやiOS等のネイティブアプリなどで使用する画像をETC形式/PVRTC形式に変換する
バッチやツールを作成について考えてみる。

#【共通】#
- 変換時は元ファイル名＋拡張子（.prk/.pvr）
- etc1toolとtexturetoolを使用
- 変換時に出来れば各々のフォルダへmoveさせたい



#【バッチ】#
- 階層ごとにバッチを置いて上位階層は下位階層のバッチを実行する
- 同一階層に変換対象がいる場合は変換をかける

**処理の流れ**
1. バッチ処理開始
2. 下位階層の確認
3. 下位階層がある場合、バッチ有無を確認
4. 下位階層にバッチがある場合、バッチ処理開始
5. 下位階層のバッチ処理終了
6. 下位階層が存在する分だけ4と5を繰り返す
7. 全ての下位階層のバッチ処理が終了
8. 同一階層に変換対象(.png)がある場合、変換処理開始
9. 変換処理終了
10. 変換対象が存在するだけ8と9を繰り返す
11. 全ての変換対象の処理終了
12. バッチ処理終了

#【ツール】#
- 変換対象を指定出来る（ファイル単位やフォルダ全体、リソース全体など）
- 変換内容を指定出来る（ETC1だけ、PVRTCだけ、ETC1＋PVRTCなど）

**処理の流れ**
1. ツール起動
2. 変換対象の指定(全体/フォルダ単位/ファイル単位) ※1
3. 変換内容の指定(ETC1+PVRTC/ETC1/PVRTC) ※2
4. 指定した変換対象、変換内容を元に変換処理開始
5. 変換処理終了
*※1 デフォルトは 全体*
*※2 デフォルトは ETC1+PVRTC*

#【変換処理】#
**例：hoge.pngをそれぞれETC1、PVRTCに変換**

- Android

```
$ etc1tool hoge.png --encode
```

- iOS

```
$ texturetool -e PVRTC --bits-per-pixel-4 -o hoge.pvr -f hoge.png
```

#【懸念点】#
- Windows/Macの両方で使用できる形にする手段
- 上位階層内に存在するファイルは変換が必要かどうか
- 新規か既存か、既存なら更新されているかされていないかを変換条件に含ませる必要がある
（変換の必要のないデータを変換する時間の無駄）




上記を踏まえた上でバッチ/ツールを作成する必要がある。
とても面倒くさい。
とりあえず実際のバッチ、ツールを作る流れもメモしながら作業を進めていこうと。
MSYS2上で動作するnkfコマンドのパッケージを作成する

## 【はじめに】
MSYS2環境を作成した後に真っ先にインストールするのは大抵 [nkf](http://sourceforge.jp/projects/nkf/)コマンドなわけですが、ソースコードの場所を探して、ダウンロードしてビルドして・・・といった作業を毎回おこなうのが面倒になってきたので個人的にパッケージ化しました。ということで**PKGBUILD**ファイルをさらします。

> ビルド自体はMSYS2環境でもMINGW環境でも通ると思います。（私はMSYS2のシェル以外から動作させる気があまりないのでMSYS2側でパッケージ化しております。）

## 【ビルドスクリプト】
こんな感じです。コピペして **PKGBUILD** というファイル名で保存して使ってください。

```bash:PKBGUILD
name='nkf'

pkgname="${name}"
pkgver='2.1.3'
pkgrel='1'
pkgdesc="Network Kanji Filter"
arch=('i686' 'x86_64')
url="http://sourceforge.jp/projects/nkf/"
license=('ZLIB')
source=(
  "${name}::git://git.sourceforge.jp/gitroot/${name}/${name}.git#tag=v2_1_3"
)
md5sums=(SKIP)

build() {
  cd "${srcdir}/${name}"
  make CC=gcc
}

check() {
  cd "${srcdir}/${name}"
  make test
}

package() {
  mkdir -p "${pkgdir}/usr/bin"
  cd "${srcdir}/${name}"
  cp nkf.exe "${pkgdir}/usr/bin/"
}
```

## 【パッケージの作成】
**PKGBUILD**ファイルを置いた場所に移動して、*makepkg*コマンド叩くだけです。

> 非常に当たり前の話ですが、BUILD環境は**必須**です。

```shell-session
 $ makepkg
==> パッケージを作成: nkf 2.1.3-1 (2015年 1月 1日 木曜日 12:34:56    )
==> ランタイムの依存関係を確認...
==> ビルドタイムの依存関係を確認...
==> ソースを取得...
  -> nkf git リポジトリを更新...
Fetching origin
==> md5sums でソースファイルを検証...
    nkf ... スキップ
==> ソースを展開...
  -> nkf git リポジトリの作業コピーを作成...
Reset branch 'makepkg'
==> 既存の $pkgdir/ ディレクトリを削除...
==> build() を開始...

（略）

==> package() を開始...
==> インストールを整理...
  -> 不要なファイルを削除...
  -> libtool ファイルを削除...
  -> man と info ページを圧縮...
  -> バイナリとライブラリから不要なシンボルを削除...
==> パッケージを作成 "nkf"...
  -> .PKGINFO ファイルを生成...
  -> .MTREE ファイルを生成...
  -> パッケージの圧縮...
==> 作成完了: nkf 2.1.3-1 (2015年 1月 1日 木曜日 12:34:57    )

```

これでパッケージファイル（ *nkf-2.1.3-1-****.pkg.tar.xz* ）が出来ると思うので、煮るなり焼くなりインストールするなりしてください。
ImageMagick(convert)でイラストなどを画像拡大、比率変更

ImageMagickではそのまま画像を縮小すると、ぼやけた印象になってしまうことがあります。

「sample」を利用すると結構くっきりとできるのでメモ。
ドット絵や低解像度の画像の拡大におすすめ？

画像を3600%拡大
`convert test.png -sample 3600% test.png`

画像を比率を変更する
`convert test.png -sample 300%%x200%% test.png"`
[NT系以外]指定したパス配下のファイルを条件指定検索して一括ビルドする

「処理の流れ」
指定したフォルダ配下を検索してテキストファイルに入れます。
そのファイル一覧をデバッグ、リリースでビルドします。


※注意
list.txtが残るので、必要に応じて消したりカスタマイズしてください。

NT系だともっと簡潔に書けるようでした。
http://pf-j.sakura.ne.jp/program/dos/doscmd/for.htm

下記ソースをbatにしてください。
----------------------------------------------------------

rem 全体ビルドをする場合

cd ビルドしたいパス
dir *.csproj /s /b>list.txt

for /f "delims=" %%a in (list.txt) do (
   "C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv" /rebuild release /out %~dp0/build.log "%%a"
)

for /f "delims=" %%a in (list.txt) do (
   "C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\devenv" /rebuild debug /out %~dp0/build.log "%%a"
)



pause
c++ builder XE4 > TThread > Priorityの種類

System.Classes.TThreadPriority
のヘルプに詳しい。

tpIdle
tpLowest
tpLower
tpNormal
tpHigher
tpHighest
tpTimeCritical
がある。

```
p->Priority = tpNormal;
```
のようにして設定すればいい。

~~C++ では `unsigned char`のようだ。~~
TThreadPriority型を使えばよさそう。

```
enum DECLSPEC_DENUM TThreadPriority : unsigned char { tpIdle, tpLowest, tpLower, tpNormal, tpHigher, tpHighest, tpTimeCritical };
```
LogstashとElasticsearchを連携させる

[前回](http://qiita.com/duke-gonorego/items/be0307601a0dc15685e3)で標準入力/標準出力でのログパースができましたので、今回は、
 1. ログファイルを読み込む
 2. 出力先をElasticsearchにする
 3. Elasticsearchで検索してみる

ところまでやってみたいと思います。

# 環境
 * VirtualBox 4.3
 * ubuntu 14.04
 * java8(1.8.0_25)
 * Elasticsearch(1.5.0)
 * logstash(1.4.2)

## logstashの設定ファイルを変更する

入出力先を変更します
※[前回](http://qiita.com/duke-gonorego/items/be0307601a0dc15685e3)の「conf/test.conf」と同じ場所に新しい設定ファイルを作成します。

```bash:logstash.conf
input {
  file{
    path=>"/path/to/access.log"
    start_position=>"beginning"
    sincedb_path => "/dev/null"
  }
}

filter {
  grok{
    match=>{"message"=>"%{COMBINEDAPACHELOG}"}
    break_on_match=>false
    tag_on_failure=>["_message_parse_failure"]
  }
  date {
    match=>["timestamp","dd/MMM/yyyy:HH:mm:ssZ"]
    locale=>en
  }
}

output {
  stdout{codec=>rubydebug}
}
```
inputの箇所に今までの標準入力設定ではなくfileを指定し、ログファイルのpathを指定します。
start_position=>"beginning"はlogstashを起動したときに、ログファイルのどこから読み込むかの指定です。
※デフォルトは「end」です。この場合、logstashが起動された後に、追記されたログから入力となります。
「sincedb_path => "/dev/null"」は$HOME.sincedbというところに前回どこまで処理をしたか？を記録するもので、ここでは残さないにしてあります。

一度上記設定ファイルで起動します

```bash
$ /usr/local/logstash/bin/logstash -f /usr/local/logstash/conf/logstash.conf
```
ちょっと時間をおいた後、標準出力にパースされた結果が出力され続けます。
※止めるときはcrtl+cで

## elasticsearchにデータを投入

```bash:logstash.conf
output {
  elasticsearch {
    host => localhost
    protocol => http
  }
}
```
上記のように変更します。

実行

```bash
まずはelasticsearchを起動
$ sudo /usr/local/elasticsearch/bin/elasticsearch
その後logstashを起動
$ sudo /usr/local/logstash/bin/logstash -f /usr/local/logstash/conf/logstash.conf
```
※path=>"/path/to/access.log"の中身は少ない方がいいかも(確認が早くできるので)

## インデクス確認

```bash
$ sudo curl 'http://localhost:9200/_search'
```
JSON形式で出力されます。
MacのApp Storeでインストールしたソフトをアンインストールする


MacのApp Storeからインストールしたソフトの消し方がわからなかったので、忘れないように自分用メモ。

1. Launchpad から消す
	* Launchpad を開いてから、Optionキーを押している間はアプリのアイコンがぐらぐら揺れて、左肩にアンインストール用のバツ印が表示されるのでそれをクリック
2. CUIから消す (出展：[Mac App Storeからインストールしたアプリをアンインストールするターミナルコマンド - Macの手書き説明書](http://veadardiary.blog29.fc2.com/blog-entry-5407.html) より)
    * `sudo uninstall file:///Applications/Application_Name_Here.app`
    * ユーザ名とパスワードを訪ねるプロンプトが表示されるので入力する
技術文書執筆の体裁のtips


わかりやすく読みやすい，価値の技術文書の執筆において，文書の体裁を整えることは極めて重要な要素である．いくら内容が良いものであっても，その具体的発露である文書の体裁が乱れていると，読みやすさは大きく損なわれ，文書が本来持つ価値が適切に伝えられない．結果として，その文書が持つとされる価値そのものの低下にもつながる．あまりにもひどい場合には，体裁の乱れそのものに読者の注意が集まり，肝心の内容が置いてけぼりになってしまう場合もある（例：[ヒッグス・ボゾン粒子発見を発表するCERNのスライドデザインが話題に](http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson)）．

体裁に関する細かいルールを全て覚えておくことは容易ではないため，この記事では，技術的文書の体裁に関するtipsを随時追加する形でまとめていく．
内容に関しては，著者の関心である情報技術系の論文執筆を中心としたものになるため，必ずしも全ての人にとって正しい指針ではないことに注意されたい．

## 文書のメタデータに関して

* 表題
	* タイトルが長く改行が入る場合には，単語の途中に改行位置がこないよう調整する
* 著者名・所属・連絡先
	* 文書提出先の投稿規定に従う
	* 論文の場合，最低でも著者のうち一人の連絡先を記載すべき

## 句読点

情報系の論文に関しては，多くの場合全角文字の「，」「．」を句読点として用いることが一般的である．

* [情報処理学会誌原稿執筆案内](https://www.ipsj.or.jp/magazine/sippitsu/kaishi.html)
  * `句読点は“．”および“，”を用い，それぞれ1画（1字分）を用いる`
* [電子情報通信学会和文論文誌 投稿のしおり](http://www.ieice.org/jpn/shiori/ess_2.html#2.4)
  * `(d)	句読点は，句点「．」と読点「，」をそれぞれ全角で用いる．`

## ...

... 大幅に加筆予定（忘れなければ）


## 参考文献

* [文化庁 公文書の書き方資料集](http://www.bunka.go.jp/kokugo_nihongo/joho/series/21/21.html)
* [文化庁 国語施策情報 内閣告示・内閣訓令](http://www.bunka.go.jp/kokugo_nihongo/joho/kijun/naikaku/index.html)
* 渡部 善隆, [横書き句読点の謎](http://yebisu.cc.kyushu-u.ac.jp/~watanabe/RESERCH/MANUSCRIPT/OTHERS/YOKO/ten.pdf)
treeからpecoで選択したファイルをvimで開く


```sh
function peco-tree-vim(){
  local SELECTED_FILE=$(tree --charset=o -f | peco | tr -d '\||`|-' | xargs echo)
  BUFFER="vim $SELECTED_FILE"
  zle accept-line
}
bindkey "^t" peco_tree_vim
```

`-f`オプションでフルパスを表示しつつ`--charset`オプションで罫線に使用する文字を変更して扱いやすくし、`peco`で選択した行にある罫線を`tr`で除去して`vim`で開く
`<Ctrl-t>`で起動して便利

![vim-tree.gif](https://qiita-image-store.s3.amazonaws.com/0/280/737315cf-d0de-effd-bb8a-78702256b654.gif "vim-tree.gif")
Processingで流れるようなインターフェースを持つコードを書く

# 概要
流れるようなインターフェースというコードの書き方があります。
下記のようにオブジェクトに対する操作を連ねて書く方法です。

``` lang:processing
myRect
  .setSize(50,50)  // 大きさを50×50にする
  .setPos(10,20)   // x=10,y=20の座標に配置する
  .display();      // 表示する
```

Martin Fowlerの命名らしいです[^1]。書籍『[リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)』にも載ってます。
ProcessingのライブラリだとControlP5とかでもこの書き方が使われてます。
jQueryでもよく使われてますが、そちらでは「カスケード」なんて呼ばれ方をしてるみたいです。

# 利点
オブジェクトに対する操作が1つの流れにまとまってわかりやすく書け、可読性が上がります。

# 実装方法
クラス内の関数の戻り値を自身(this)にしてやるだけです。

``` lang:processing
Class MyRect{
  int w,h,x,y;

  MyRect setSize(int _w, int _h){
    this.w = _w;
    this.h = _h;
    return this;
  }

  MyRect setPos(int _x, int _y){
    this.x = _x;
    this.y = _y;
    return this;
  }
}
```

# まとめ
以上、流れるようなインターフェースをProcessingで実装する方法でした。オブジェクトに対する操作がたくさんあるときに使うと可読性が上げられるかと思います。

[^1]: http://bliki-ja.github.io/FluentInterface/
Pythonの型付け

今までCやJavaでコーディングする事が多かったためPythonの変数の型付けや定義づけは新鮮で面白いものだと思い、これによってより柔軟性が高くなったのが興味深かったのでわかる範囲で説明していきます。

まずCやJavaでは変数を作成する際にはどの型なのか定義して同じ行もしくは別の行で、その型にあった値を代入していきますが、Pythonでは型の宣言をする必要がなくただ値を代入するだけでよいのです。その代わりに型の宣言だけはできずに新たに変数を作成する場合は絶対に何かの値を代入する必要があります。Pythonでの変数の役割はコメントでshiracamusさんが説明してくださったのでそちらを読んでください。C言語でいうポインターはアドレスを保有してメモリ内のアドレスが保有している値へアクセスするのですが、Pythondでは辞書を使い似た処理しているのではないかと思います。C言語ではポインターでも型宣言しなければいけませんがPythonは必要ないみたいで、しかも一度なにかを代入した変数にまた別の型を持った値も代入できるみたいなので、必要なくなった変数は使い回しができるようです。たぶんC言語の場合は型によってbitの数が変わるからしっかりと定めておかなければいけなくPythonではメモリ上不都合のない設計にしてあるから番地さえわかれば関係ないのだと思います。またPythonではガーベージコレクションが備わっていて新しい値を既存の変数に代入すれば、古いアドレス内の値は自動的に破棄されるシステムでメモリを気にする必要がありません。C言語ではポインターを違うアドレスに指す場合はもともとの値がメモリ上に残ってしまうためメモリの許容量をオーバーした時にめんどくさい事になってしまいます。(C言語でまともに開発はした事ないので半分はしったかです。)

余談になりますが除数の演算子も少し気になったので触れておきます。
Python2.xで演算子'/'で小数を含む数字を計算すれば小数点以下は切り捨てられませんが、'//'を使用することにより切り捨て可能となるみたいです。また

```py:
from __future__ import division
```
をインポートする事で整数同士を'/'で演算すれば小数点以下も結果が表示されるそうです。Pyrhon3.xではこれが標準搭載される予定だったみたいですが知っていいる方いれば教えてください。

この投稿で書いた事には勘違いや間違いがあるかもしれないので、もしお気づきになった方がいればコメントかメールでご指摘ください。すぐに編集させていただきます。前の投稿でもご指摘してくださった方がいましたので気兼ねなくお願いします！

参考資料：初めてのPython　第３版　（発行元：オーライリージャパン）
【殴り書き】Android Studio1.1.0にFacebook SDK for Androidを入れるときの注意点

UnityでFacebook Messengerにメッセージを送ろうと思って調べると、どうもUnity用のSDKはまだない様子。Shareとかはあるけど、本文とかいじれないしイメージか動画しかShareできそうにない。そもそもFacebookにログインしてないと使えないとかも面倒なのでJavaでライブラリ作って、jarしてUnityにimportする方法を選択。
で、つまづいた点をリストアップ。
いろんなサイトにお世話になりました。
ありがとうございましたー。


開発環境：　Android Studio1.1.0																																		
導入方法：																																		
参考：https://developers.facebook.com/quickstarts/577048112428186/?platform=android																																	

公式の方法でやるとつまずくので対処法
## Could not find property 'ANDROID_BUILD_SDK_VERSION' on project  
gradle.propertiesファイルに以下を記載  

```
  ANDROID_BUILD_TARGET_SDK_VERSION=21
  ANDROID_BUILD_TOOLS_VERSION=21
  ANDROID_BUILD_SDK_VERSION=21
  ANDROID_BUILD_MIN_SDK_VERSION=9
```

## ダイヤモンド演算子を使用可能にするには、-source 7以降を使用してください  																																	
`http://xiangcai.at.webry.info/201410/article_6.html`

## Cannot call getBootClasspath() before setTargetInfo() is called.
`http://ichigobambi.com/ciao/blog/2015/02/23/android-studio-1-1-0-%E4%B8%8D%E5%85%B7%E5%90%88/`

## cannot resolve a symbol　'Toolbar'
`http://stackoverflow.com/questions/21316055/actionbaractivity-cannot-resolve-a-symbol`

---
追加：5/12
jarファイル作成するところでいろいろつまづき(時間もなかったので)、結局Eclipseでやりました。
公式のドキュメントはAndroid Studioで書かれていますが、Eclipseでも問題なかったです。やりかたはまた別途アップします。
さくっとGoogleMapsを表示する（API v3版）


data属性に住所や位置情報、ランドマーク、ウィンドウのHTMLを入れるだけで
さくっとGoogleMaps（API版）を表示するJSです。
※一部jQuery使ってます

[GoogleMapsのIFRAME埋め込み版はこちら](http://qiita.com/akihiro1977/items/d61146726f7ad9016a49)


## 使用例
```html:使用例
<!-- APIキーの設定を忘れずに。 -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&region=JP&key=YOURAPIKEY&signed_in=false&sensor=false"></script>
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript">
$(function(){
	// こんな感じでオプションを追加指定できます
	gMaps.markerIcon = {
		url: './map-icon.png'
	};
	gMaps.mapOptions.styles[0].stylers = [
		{ hue: "#00FF99" },
		{ saturation: -40 }
	];
	// 表示する
	gMaps.init($("[data-address]"));
});
</script>
<div class="map-canvas" data-address="東京スカイツリー"></div>
<div class="map-canvas" data-address="35.667480, 139.727275"></div>
<div class="map-canvas" data-address="福岡市中央区大名2丁目4−22" data-html="#akasaka"></div>
<div style="display:none;" id="akasaka"><h4>福岡市中央区大名2丁目4−22</h4><p>スタバがあるよ</p></div>

<style type="text/css">
<!--
.map-canvas {
	margin: 10px;
	height: 200px;
	width: 600px;
}
-->
</style>

```

## 実行結果
![example.png](https://qiita-image-store.s3.amazonaws.com/0/22688/3ae4b3db-2646-163f-75a8-3dcf91e25d29.png)
[example.html](http://labo.i-section.net/admindemo/js/gmaps/example.html)

## ダウンロード
[github](https://github.com/akihiro1977/gmaps/blob/master/gmaps.js)
さくっとGoogleMapsを表示する（IFRAME版）

data属性に住所や位置情報、ランドマークを入れるだけで
さくっとGoogleMaps（IFRAME版）を表示するJSです。
※一部jQuery使ってます

[地図の色変更やアイコン設定ができるAPIv3版はこちら](http://qiita.com/akihiro1977/items/5ca058c2062c83da97eb)


## 使用例
```html:使用例
<script type="text/javascript" src="gmaps_lite.js"></script>
<script>
$(function(){
	gmaps_lite($("[data-address]"));
});
</script>
<div class="map-canvas" data-address="東京スカイツリー"></div>
<div class="map-canvas" data-address="35.667480, 139.727275"></div>
<div class="map-canvas" data-address="スターバックス 福岡市中央区大名2丁目4-22"></div>

<style type="text/css">
.map-canvas {
	margin: 10px;
	height: 200px;
	width: 600px;
}
</style>
```

## 実行結果
![example.png](https://qiita-image-store.s3.amazonaws.com/0/22688/e0bcd889-5ce5-4e58-229a-115868d5ecc6.png)
[example.html](http://labo.i-section.net/admindemo/js/gmaps_lite/example.html)

## ダウンロード
[github](https://github.com/akihiro1977/gmaps_lite/blob/master/gmaps_lite.js)
GitからSVNへの移行

# これは何？
git から SVNへリポジトリを移行する場合の手順について調べた覚書

# 手順

## SVN 事前準備
1. SVNリポジトリの作成
2. SVNリポジトリに、trunk, tags, branchesフォルダーを作り、コミットする。

## 移行
1. svnリポジトリをクローン。　```git svn clone -s [your-svn-path]```　※[your-svn-path]はhttp://xxxxx:8969/xxxx/svn/xxxx/ 形式でOK
2. migration用ブランチの作成 ```git checkout -b migration```
3. 移行したいデータを持ってくる ```git pull --rebase [your-git-path]``` ※[your-git-path]はhttp://xxxx.xxx/xxx/xxx.git 形式でOK
4. svnのコミット（Trunk, Tags, Branchesを作ったコミット）を適用する。　```git rebase master``` データ量が多い場合、すごく時間（5-6時間？）かかります。
5. migration用ブランチからmasterブランチへマージ ```git merge migration```　こちらもデータ量が多い場合、すごく時間（5-6時間？）かかります。
6. svnのリポジトリへコミット　```git svn dcommit```
7. 履歴が移行されていることを完了

# 注意点
* コミットログにAuthorとEmailが全て記入されていないと、エラーになります。

# 参考サイト
- http://d.hatena.ne.jp/pasela/20100513/git_svn
- http://www.coltware.com/2010/02/18/git_to_subversion/
git stashで待避した内容のパッチを作成・反映する

## はじめに

開発ブランチで作業中のコードを`git stash`で一時退避し、更新されたmasterブランチをrebaseしたところ、なにやらよろしくないものがpushされていたらしく、IDEでロードできないプロジェクトになってしまった。

そこで、該当プロジェクトは捨て、別にcloneしたプロジェクトにstashで待避していた内容を反映したいと思ったとき、パッチを作成して反映するという手段でうまくいった。

## 方法

```bash
# IDEでロードできないプロジェクトを移動
mv -f foo error-foo
cd error-foo

# 待避先がstash@{0}だとしたら、この待避内容をパッチ化する
git stash show stash@{0} -p > /path/to/stashed.patch

# ロードできない問題が解決されたプロジェクトをclone
cd ..
git clone https://www.example.com/foo.git foo
cd foo

# --dry-runで試行してからパッチ反映
patch --dry-run -p1 < /path/to/stashed.patch
patch -p1 < /path/to/stashed.patch
```

IDEでfooをロードし直す。

## 参考文献

- [変更を一時的に退避！キメろgit stash](http://qiita.com/fukajun/items/41288806e4733cb9c342)

助かりました！
【Java】【react】jettyサーバーでreactをserver side renderingしてみた

#今回書くこと
Nashorn使ってreactをserver side renderingやってみたらさくっと動いたのでメモ。


#つかったもの
・Jetty(軽量アプリケーションサーバ)
![image](https://qiita-image-store.s3.amazonaws.com/0/70346/0360967f-00ca-1b26-1774-c583f9ade5f7.png)

・thymeleaf(おすすめテンプレートエンジン)
![image](https://qiita-image-store.s3.amazonaws.com/0/70346/77e8b055-f234-de10-d52f-b8beea898fdb.png)

・React
![image](https://qiita-image-store.s3.amazonaws.com/0/70346/775bb5f6-0828-c33c-b2b1-a968ab272712.png)


#内容
##準備
+ jettyを組み込んだプロジェクトを作っておく
+ react.jsのスターターキットみたいなのをダウンロードしておく

##ポイント
AbstractHandlerをextendsしたとこで、
Thymeleafのテンプレートエンジンと、reactを読み込んだスクリプトエンジンを初期化しておく。

```java:JettyHandler.java
	protected void doStart() throws Exception {
		// Thymeleaf
		ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
		resolver.setTemplateMode("HTML5");
		resolver.setPrefix("html/");
		resolver.setSuffix(".html");
		resolver.setCharacterEncoding(CHARSET);
		resolver.setCacheTTLMs(3600000L);
		resolver.setCacheable(!JavaInJettyProperties.getBoolean(Name.DEVELOP));
		templateEngine = new TemplateEngine();
		templateEngine.setTemplateResolver(resolver);

		// script engine
		manager = new ScriptEngineManager();
		engine = manager.getEngineByName("react");
		engine.eval(new FileReader("src/main/resouces/build/react.js"));
		
		super.doStart();
	}

```

動くかどうかの確認なのでThymeleafではこんな感じ。
clientでもreactしたいときはreactを読み込んでおく必要ありますね。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8"/>
		<title>index</title>
	</head>
	<body>
		<div id="contents" th:utext="${content}"></div>
	</body>
</html>
```

あとは、react使ってサーバーサイドでレンダリング。
オーバーライドしたhandleメソッドでどうぞ。
メソッド名が意味不明になりましたが、いいんです、単なる確認ですから。
本当に使うときにはちゃんと書いて下さい。外部ファイル読込とか作る感じかと思います。

```java:JettyHandler.java
(略)ルーティングとか色々～～

final Context ctx = new Context();				
engine.eval(getComponentString());
ctx.setVariable("content", engine.eval(getRenderString("Hello world!!")));
				
templateEngine.process("index", ctx, response.getWriter());
```

```java:JettyHandler.java
	private String getComponentString(){
		return 
		"var MyComponent = React.createClass({" +
				"render: function() {" +"return React.DOM.div(null, this.props.text)" +"}" +
		"});";
	}

```

```java:JettyHandler.java
	private String getRenderString(String text){
		return
			"React.renderToString(React.createFactory(MyComponent)({" +"text: '" + text + "'" + "}))";
	}
```


#あとがき
簡単に動かすとこまでできました。

実際使う場合は外部ファイルを読み込んで、とか
jsxで記載したものを変換するところを自動化して、とか
やんなきゃいけないことがいくつかありますが、目新しいことはなさそうですね。

jetty+Thymeleaf+reactって上手くいくのか不明でしたがやってみた感じ、
この組み合わせ、何か良い感じになりそう。

NashornではJavaScriptがJavaバイトコードになっているらしく、
パフォーマンスも良いです。

機会があれば使いやすいベースを作って使いこんでみたいです。
Bootstrapのモーダルで、左右移動を実装する

懐しのlightboxのように、モーダル間を左右で移動させる。

## 動作フロー&簡単な注釈
### 左右移動ボタン
1. クリックされた要素の親の親要素を取得
2. bodyを非表示
2. クリックされた要素のclassがnext,prevどちらかを判定
3. それによって親の親要素の前後どちらかのモーダルを呼び出す

※モーダルが重なるとスクロール2重に表示されてしまうので、2の処理をしている。

### 閉じるボタン
1. 「閉じる」がクリックされたら
2. 連番で付けたモーダルIDの数だけモーダルを閉じる
3. bodyの要素を表示させる

※上記の動作によって、複数のモーダルが開かれている可能性があるので、全てのモーダルを閉じています。

----

# コード
## 呼び出しボタン

BootstrapのExampleままでOK。
下記はhrefで呼び出しているが、data-targetでも可。(だと思う)

```html
<a href="#portfolioModal1" data-toggle="modal">
</a>
```

## modal側コード
これもほぼexampleままで可。
閉じるボタンの他に、前後への移動ボタンを下記のように記載しておく。modal-move,prev,nextはjQueryでの呼び出しでも使うので、変更する際は、jQuery側も一緒に行うこと。

```html
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close">閉じる</div>
    <div class="modal-move prev">前へ</div>
    <div class="modal-move next">次へ</div>
    <div class="modal-body">本文</div>
  </div>
</div>
```

## js

```js
// [[[[[[[[ 関数定義 ]]]]]]]] //
function moveBtn(directionStr){
  $('.modal-move.'+directionStr).click(function() {
    // ボタンの親要素を取得
    var parentsModal = $(this).parents("div.modal");
    // 親要素モーダルを非表示
    $(parentsModal).modal('hide');
    // 親要素に隣接したmodalを取得して表示
    // モーダル時にスクロールバーを非表示にする
    $(document.body).css({overflow: 'hidden'});
    // 引数の要素によって、前と次どちらをを表示するかを判定 
    if ("prev" === directionStr) {
      parentsModal.prev().modal('show');
    }
    else if ("next" === directionStr){
      parentsModal.next().modal('show');
    }
    else{
      console.log("Args is not much direction ")
    };
  });
}

// [[[[[[[[ 実行部分 ]]]]]]]] //

// モーダルの前次ボタン
moveBtn("prev")
moveBtn("next")

// modal全部閉じる
$('.close').click(function(){
  for (var i = 1; i < 7; i++) {
    $("#Modal"+i).modal('hide');
  };
  $(document.body).css({overflow: 'visible'});
});
```
ファイル参照URLをパスURLに変換する

## Problem
10.10 Yosemite 以降では，ファイルのドラッグ＆ドロップ時にパスではなく，ファイル参照がクリップボードにキャプチャされるようになりました。
ファイル参照，つまり `/.file/id=xxxxxx.xxxxx` のような値が入ってきます。
困ります。

## Solution
`NSTableViewDataSource` であれば `AcceptDrop` あたりで，`NSView` であれば `PerformDragOperation` で変換してやります。
10.9以前でもこのまま動作します。

```cs:PerformDragOperation.cs
public override bool PerformDragOperation(NSDraggingInfo sender)
{
	var pboard = sender.DraggingPasteboard;
	var typeExists = pboard.Types.Any(x => x == "NSFilenamesPboardType");
	if(!typeExists)
		return false;
	
	var items = pboard.PasteboardItems;
	var urls = items.Select(x => new NSUrl(x.GetStringForType("public.file-url")).Path);
	
	return true;
}

```

## Conclusion
Xamarin.Mac ではよくあることです。
特に10.10環境で使いやすいAPIがぐっと増えた一方，破壊的変更も多々あります。
UnifiedAPIであれば10.9 APIレベルを中心に作っていくのがよいと思います。
Objective-C のターゲットから Swift のターゲットを利用する（Enbedded Framework)  iOS7以上


## 公式ドキュメント

https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/BuildingCocoaApps/MixandMatch.html#//apple_ref/doc/uid/TP40014216-CH10-XID_78

## 手順

### Target 追加

![Example_xcodeproj.png](https://qiita-image-store.s3.amazonaws.com/0/4497/8ada03b1-1cc0-9fcc-49ba-7a577bbbbc66.png "Example_xcodeproj.png")

### Build Options 編集

Objective-C のプロジェクトに Swift ターゲットを追加した場合、そのままビルドすると `dyld: Library not loaded: @rpath/libswiftCore.dylib` みたいなエラーでクラッシュするため以下対応。

![Example_xcodeproj.png](https://qiita-image-store.s3.amazonaws.com/0/4497/a3c04295-04c9-5164-7264-90133636d9f9.png "Example_xcodeproj.png")



### Objective-C からの呼び出し

以下を記述すれば **NSObjectを継承した** Swift クラスであれば呼び出せる

```
@import FrameworkName;
```
SpringでDIされるオブジェクトのMockテスト その3 Controller


[「SpringでDIされるオブジェクトのMockテスト」](http://qiita.com/nyasba/items/cd72231f56536a9ef199)
[「SpringでDIされるオブジェクトのMockテスト その２」](http://qiita.com/nyasba/items/16daeff7b9a2a65ef07f)の続きです。

前回は単純なAutowiredでしたが、今回はControllerのテストを対象にします。こんな感じのものが対象です。

```
@RestController
class ControllerA{

    @Autowired
    ServiceB serviceB;
    
    @Autowired
    ServiceC serviceC;
    
    @RequestMapping(value = "/order", method = RequestMethod.GET)
    public Map order1(@Valid String item){
    	return serviceB.save(item);
    }
}
```

（注意）実際に試したコードは業務で使っているコードなので公開できません。考え方の参考にするためにこんな感じで考えましたという程度の情報ですので、その点はご了承ください。

テストコードはgroovyのSpockFramework使ってます。


### やったこと

Mockテスト用のcontext.xmlを用意し、ServiceBに対してMockをInjectionするようにしました。

```context-apimock.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="
       http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd
       ">

    <!-- 本物をComponent-Scanの対象から外す -->
    <context:component-scan base-package="nyasba.example.service">
        <context:exclude-filter type="aspectj" expression="nyasba.example.ServiceB*" />
    </context:component-scan>

    <!-- Mockを生成する -->
    <bean id="serviceBMock" name="serviceBMock" class="org.mockito.Mockito"
          factory-method="mock">
        <constructor-arg value="nyasba.example.service.ServiceB"/>
    </bean>
    
    <!-- その他は省略 -->
</beans>

```

テストコード

```
@WebAppConfiguration
@ContextConfiguration(locations = "classpath:context-apimock.xml")
class ControllerAMockSpec extends Specification {

    @Autowired
    ServiceB serviceBMock;

    @Autowired
    WebApplicationContext wac;

    MockMvc mockMvc;

    def test() {
    
        setup:
        mockMvc = MockMvcBuilders.webAppContextSetup(wac).build();
        
        // serviceBのsaveが呼ばれるとException発生するようにする
        Mockito.when(serviceBMock.save(Mockito.any(String.class)))
                .thenThrow(new RuntimeException("あうとーーー！"))

        when:
        ResultActions resultActions = mockMvc.perform(post("/order").param("item", "test"))

        then:
        // 省略
                                      
        cleanup:
        Mockito.reset(serviceBMock)
        
    }
}
```





### 他に試したこと

いずれも失敗。

* AutowiredしたControllerに対してServiceBのMockを強制的に置き換えた
* AutowiredしたContorollerから ``` MockMvcBuilders.standaloneSetup(controller) ``` を使い、mockMvcを作成し、Mockを強制的に置き換えた

業務で使っているコードはAOPを使っているので、Proxyでwrapされたオブジェクトになるので、そのあたりも何か影響しているのかもしれません。。AOP使ってないなら@InjectMockとかでもいけるかもです。


### 感想

SpringのDIの仕組みはまだまだ全然理解出来たといえるレベルにないですが、こういうのきっかけで作りを調べるのは勉強になるのでよかったです。
Cloud9でMySQLを使う

Cloud9でDB接続するやり方を毎回ggってるのでメモ。

## Terminal側での処理
まずは起動
`$ mysql-ctl start`

mysql> の入力画面にする
`$ mysql-ctl cli`

新規DBや新規テーブルの作成はTerminalから直接SQL叩けばOK
※phpMyadminもインストールできる
`$ phpmyadmin-ctl install`
[Setting Up PHPMyAdmin](https://docs.c9.io/v1.0/docs/setting-up-phpmyadmin)

ちなみにphpMyadminのURIは
`https://[workspace名]-[UserName].c9users.io/phpmyadmin/index.php`

## PHP側からDBを使う
```php
    $servername = getenv('IP');
    $username = getenv('C9_USER');
    $password = "";
    $database = "使用するDB名";
    $dbport = 3306;

    // Create connection
    $db = new mysqli($servername, $username, $password, $database, $dbport);
    $db->set_charset('utf8');

    // Check connection
    if ($db->connect_error) {
        die("Connection failed: " . $db->connect_error);
    } 
  
```

[Setting Up MySQL](https://docs.c9.io/v1.0/docs/setting-up-mysql)

ここまでを自分の環境に合わせれば問題なく利用できます。

以下は自分の覚書的な感じです。
## PDOで接続
普段使ってるpdoのクラスを使いまわしたいので私は大体こうです。

```php:define.php
<?php
include_once 'pdoclass.php';

$servername = getenv('IP');
$username = getenv('C9_USER');
$password = "";
$database = "DB名";
$dbport = 3306;

// DB接続
$conDB  = new DB($servername, $dbport, $database, $username, $password);

// 時刻設定
// どうやってもcloud9上で時刻設定ができなかったので全ファイルでincludeするここに書いた
date_default_timezone_set('Asia/Tokyo');
``` 

オプションの設定がアレなのは実環境が**PHP5.2.4**なせいですorz

```php:pdoclass.php
<?php
/**
 * Class DB
 */
class DB {

  protected $pdo;
  protected $stmt;

  /**
   * @param $host
   * @param $dbname
   * @param $user
   * @param $password
   */
  public function __construct($host, $port, $dbname, $user, $password ) {
    try {
      $this->pdo = new PDO("mysql:host=".$host.";port=".$port.";dbname=".$dbname, $user, $password ,array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8'));
      $this->pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
      $this->pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
      $this->pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
      $this->pdo->setAttribute(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY,true);
    } catch (Exception $e) {
      print "エラー!!:". $e->getMessage() . "<br/>";
    }

    return $pdo;
  }

  /**
   * @param $sql
   * @return array $stmt
   */
  function pdoQuery($sql){
    $stmt = $this->pdo->query($sql);
    foreach ($stmt as $row) {
      $res[] = $row;
    }

    return $res;
  }

  /**
   * @param string $sql
   * @param array  $arr
   * @param int    $mode SELECTの時は1,それ以外の時は2
   *
   * @return array $stmt
   */
  function pdoPrepare($sql,$arr,$mode){
    $stmt = $this->pdo->prepare($sql);
    foreach ($arr as $key => $val) {
      $k = $key+1;
      if(is_int($val)){
          $val = (int)$val;
          $stmt->bindValue($k,$val,PDO::PARAM_INT);
      }else{
          $val = (string)$val;
          $stmt->bindValue($k,$val,PDO::PARAM_STR);
      }
    }

    $stmt->execute();

    if($mode == 1){

      foreach ($stmt as $row) {
        $res[] = $row;
      }

      return $res;

    }else{

      return true;
    }

  }


}
```
GitlabをSubversionにバックアップする

とても残念ですが、世の中まだまだsvnしか使えない人たち・使えない環境があります。

そんな環境で快適にバージョン管理するために、gitlabを導入してgit svnに移行しようとした場合、「成果物はsvnで管理しなければならない」みたいな規則の中では、gitlabにpushしたからOKとはいきません。
あと、gitlabはあくまで試験導入という場合にも、何かの拍子にgitlabのデータが壊れてしまうととても困ります（もちろん、分散レポジトリなので手元が生き残っていればまだセーフですが）。

ということで、**git(lab)に移行したいがいろいろな事情でSubversionにも成果物を残さなければならない**場合に私がやっている方法を書いておきます。
環境は以下の通りです。

* Fedora 21
* Giblab CE 7.9.2 [公式の手順](https://about.gitlab.com/downloads/)にしたがってダウンロード＆インストールします

0. バックアップ先のsvnレポジトリを準備する
    1. レポジトリを取ってきます``cd ~ && svn co http://example.com/svn/trunk``
    1. バックアップを保存するディレクトリを作ってコミットしておきます``cd trunk && mkdir gitlab-backup && svn add gitlab-backup``
0. gitlabのバックアップを作成する（sudoが必要です）
    1. ``gitlab-rake gitlab:backup:create``を実行すると、初期状態で``/var/opt/gitlab/backups/``にxxxxxxxx_gitlab_backup.tarのようにgitlabのバックアップが作成されます
    1. 最初に作ったディレクトリに展開します``tar xf /var/opt/gitlab/backups/*.tar``
0. svnに保存する
    1. 最初に作った保存先ディレクトリを空にしておきます``cd ~/trunk/gitlab-backup && rm -rf *``
    1. ``backup_information.yml``はgitlabが更新されていなくてもバックアップした時刻で変化してしまうので除いておきます（後で定期バックアップしたくなった場合に邪魔になるから）``rm -f backup_information.yml``
    1. 全ファイルを追加します``svn add *``
    1. コミットします``svn commit -m "backup gitlab"``

↑の1は最初に一度だけやっておけばよくて、2はsudoのcrontabに、3は通常ユーザーのcrontabで定期実行させれば、変更があった場合に定期的にsvnにバックアップ出来る環境が、とりあえず整います。

もっといい方法あれば教えて下さい。
Rと連携するアプリケーションを作ってみる。

Rを用いれば綺麗な図を載せたり、簡単に統計をとれたりと便利だが、値を入力する人が、スクリプトを書いた開発者だけになってしまったり開発者以外の人に値を微調整してもらう時に不便があるので、インターフェース部分だけ自分で開発して値をRに渡して動作させてみたときに必要な機能とやっておいたほうがいいことをまとめてみた。
開発環境上、C++と書いてあるが他の環境でも再現は可能かと思われる。

##メリット
1. Rのメリットをそのまま享受出来る（グラフや統計結果をCSV等にして書き出し）
2. 計算部分とインターフェース部分を分けて作ることが出来る。
3. ボタン等を配置したアプリケーションを作って連携させれば、プログラムを理解していない人にでも運用をしてもらったりしやすい。

##デメリット
1. Rに渡す値を書き出して、その後に計算させるので通常のアプリケーション単体より時間がかかる。
2. インターフェース部分と実行部分でメモリをそれなりに消費する。
3. 配布する場合は配布先にもRのインストール（と必要なライブラリ）が必要。

#必要な機能
* R.exeと同じところにRScript.exeという実行ファイルがあるので、これにRのスクリプトが記述されたファイルを与えると計算してくれる。
(C:\Program Files\R\R-X.X.X\bin\Rscript.exe（Xの部分はバージョンによって違う）)

```cpp:C++
ShellExecute(NULL, NULL, "C:\Program Files\R\R-X.X.X\bin\Rscript.exe", "Rのスクリプトファイル", NULL,SW_HIDE);
```

バッチファイルでやるとこんな感じ

```bat:cmd
"C:\Program Files\R\R-X.X.X\bin\Rscript.exe" "Rのスクリプトファイル"
```

* 上記の内容をそのまま実行しようとしてもエラーが表示されることがある。よくある原因は文字コードが合っていないため（UTF-8等）。そこで、次のようなテキストを記載したファイルを書き出す機能を用意して、そちらをRScript.exeで実行させて動作させたほうが上手くいったりする。


```r:script.r
#場合によってはsetwdで作業ディレクトリを設定したほうが良いかもしれません。
setwd("作業ディレクトリ")
#UTF-8で動作
source("Rのスクリプトファイル(場合によっては絶対パスで指定したほうが良いかもしれません)",encoding="UTF-8")
#パスはバックスラッシュではなくスラッシュで書くこと。
```

#あると便利な機能
* Rで計算させる前に、既に動作しているRScript.exeを終了させる。

```cpp:C++
HWND hWnd = FindWindow(L"ConsoleWindowClass", "Rのスクリプトファイル（絶対パス）");
if (hWnd != NULL) {
	PostMessage(hWnd, WM_CLOSE, 0, 0);
}
//実行中のものが完全に閉じるまでのタイムラグを考慮して、ifのところを秒ごとにループさせたり待たせたり必要に応じてエラー処理を行ったりしたほうが良い。
```

* 計算中かそうでないかの判断材料として、上記の内容を応用してハンドルを取得出来るかどうかという方法か、もしくはRScript.exeで出力されるファイルの有無で判定させるという方法も考えられる。例えば前回の計算結果を消して、新しい計算結果が作成されるまでループして待つとか。

```cpp:C++
if (FileExists("計算結果のファイル")) {//ファイルの有無の確認
 DeleteFile("計算結果のファイル");//前回の計算結果ファイルが存在すれば削除
}
//この後に新しい計算結果のファイルが生成されるのを待つ処理を書いておく。
```

* 設定をCSVに書き出してRに読み込ませる場合の例

```r:R
#変数に読み込ませる（1行目には設定したい名前を書いて2行目に値を書く）
#例えば
#  directory,file
#  C:/Users/Public/Documents/,C:/Users/Public/Documents/r_file.r
#という2行のCSVファイルを使って
var_config_data <- read.table("C:/Users/Public/Documents/config.csv", header=TRUE, sep=",",colClasses="character")
#読み込ませたデータのdirectoryという名前の値を作業用フォルダに指定する。
setwd(var_config_data[["directory"]])
```

* C++Builderでレジストリを使わずにインストールされた中で一番新しいRscriptの位置を取得するメソッド(文字列周りを修正すれば他の環境でも使えるかも)

```cpp:CppBuilder.cpp
bool FunctionRFolder(UnicodeString &val) {
	for (int i1 = 4; i1 >= 0; i1--) {
		for (int i2 = 15; i2 >= 0; i2--) {
			for (int i3 = 10; i3 >= 0; i3--) {
				UnicodeString str =
					L"C:\\Program Files\\R\\R-"+static_cast<UnicodeString>(i1) +
					L"."+static_cast<UnicodeString>(i2) +
					L"."+static_cast<UnicodeString>(i3) + L"\\bin\\Rscript.exe";
				if (FileExists(str)) {
					UnicodeString *pstr = &str;
					val = *pstr;
					return true;
				}
			}
		}
	}
	return false;
}
///使い方は例えば下記のようにすればvar_rにRScriptの位置を設定出来る。
UnicodeString var_r;
FunctionRFolder(var_r);
```

#その他
* コメントの記載でエラー

 ~~Rのコメントは「#」で記載するが、RScript.exeで実行させる場合、シャープを重ねて記載すると、そこからエラーになってしまうことがある。~~
↑現在調査中。
R.exeではうまく動作してもRScript.exeではコメントでうまく動作しないことがある。

* 作業ディレクトリをローカル以外にした時にうまく動作しない場合は、とりあえずローカル環境上で試してみる。
* デフォルトの作業ディレクトリは、「C:\Users\ユーザ名」（設定やRの環境次第）
* 相対パスで上手く動作しないなと思ったらとりあえず絶対パスにしてみる。



文字列の部分なんかは開発環境によって違うと思うので、そのへんは適宜改変。

他に思い出したことがあったら随時追記