OmniAICreator/Qiita-1.07M huggingface dataset:
一度AppCompat v7 v23に上げると後戻り出来ない話

# ハマったこと

- [ラジコンシェルジュ](https://play.google.com/store/apps/details?id=tsuyogoro.sugorokuon&hl=ja)の更新が停滞していたのでそろそろやろうかとAppCompatをv23に上げてみた
- つまりcompileSdkVersionを23に上げた (AppCompatバージョンとcompileSdkバージョンにgapがあると怒られますよね)
- ApacheのHttpClientでエラー多発 (Mから消えたので)
- 別に試したいことがあるから、v22に下げてHttpClient対応は後回しで！
- って、なぜかappcompat-v7とsupport-v4が、22系を指定しても断固23.0.0をfetchしてくるという謎事態が発生
- そのおかげで __compileSdkVersionを23から下げられない__ ...。

# 調べてみたところ
- [codepath/android_guides](https://github.com/codepath/android_guides)の[Migrating-to-the-AppCompat-Library](https://github.com/codepath/android_guides/wiki/Migrating-to-the-AppCompat-Library)に下記のような記載が…。

>Also notice that once you upgrade to AppCompat v7 v23, you will also be forced to update your Build Tools and compileSDKVersion to API 23 too.

- [バグ](https://code.google.com/p/android/issues/detail?id=183149)なんですね (自分が直面した、解決できなかったエラーメッセージも同じ)

- 一応↑のwikiにworkaroundも書いてありましたが、v23に関連するファイルを消しましょう的な感じ (どうしても戻したいならこうやれば出来るよ、という雰囲気ですね)

# その他
- HttpClientを置き換えるTipsもまとめてくれていました ([Using Android Async Http Client](https://github.com/codepath/android_guides/wiki/Using-Android-Async-Http-Client#resolving-android-marshmallow-compatibility-issues))

# 結論
- どのみちv23対応はするし、HttpClientの対応を先にやってしまおうということで、後戻りは諦めました。
UIデザインの参考になる、国内iOSアプリのギャラリーサイト


<a href="http://takashi178.me/ui_archive/">![screencapture-takashi178-me-ui_archive-1454300527128.jpg](https://qiita-image-store.s3.amazonaws.com/0/658/444f60ff-8961-fef0-4ef7-272a919c60c6.jpeg)</a>

# <a href="http://takashi178.me/ui_archive/">UI Archive | 国内iOSアプリのUIデザインアーカイブ</a>

カテゴリ別（ショッピング・ニュース・ミュージック等）にアプリを探せるほか、
UIパターン（drawer,gallery,modal等）からもアプリを探すこともできます。
cloud9のコードのバージョン管理をGitHubで行う

#前提
GitHubのアカウントは作成済みとする。

#手順
1. cloud9のssh-keyをGitHubに登録する
    1. cloud9にログインした状態で、https://c9.io/account/ssh に遷移する
    1. cloud9のアカウント用の[Default SSH key]が表示されるのでクリップボードにコピーする
    1. GitHubにログインした状態で、https://github.com/settings/ssh に遷移する
    1. [New SSH Key]ボタンを押下し、先ほどコピーしたSSH Keyを貼り付ける ※titleは適当でOK

1. GitHubに新規リポジトリを作成する
    1. GitHubのログイン後トップページで、[New repository]ボタンを押下する
    2. repository nameを設定して登録する
    3. リポジトリのトップページのHTTPSトグルを押下しSSHに変更する
    4. トグルの横に表示されたパスをクリップボードにコピーする

2. ローカルリポジトリを作成する
    1. cloud9のコンソールからGitHubで管理したいディレクトリの場所に移動する
    1. コンソールから`git init`コマンドを実行してgitのローカルリポジトリを作成する<br>※もし間違った場所に作ってしまった場合は`rm -rf .git`で削除する
2. コードをリモートリポジトリにpushする
    1. cloud9のコンソールから`git add .`コマンドを実行してインデックスに登録する
    2. コンソールから`git commit -m "first commit"`コマンドを実行してコミットする<br>※メッセージは何でも良い
    3. コンソールから`git remote add origin git@xxxx`コマンドを実行してリモートリポジトリに接続する<br>※git@xxxxは2-4の手順で取得したパス
    4. コンソールから`git push -u origin master`コマンドを実行してリモートリポジトリにコードを反映する

以上でGitHubの画面上にcloud9から送信されたコードが表示されるはず。あとはGitHubFlowなどに則って、cloud9上で編集したコードを好きなようにpushできる。
AmazonWebService実践入門を読んで実践する「その１：I/Oの高速化」

## AmazonWebService実践入門の本にあるI/O高速化の方法をベンチマークを使って試してみる。

### 方法：I/Oが遅い選択肢から順に早くさせていく。

### 本で紹介されている高速化の方法

1. EC2のストレージタイプの選択
2. EC2のボリュームタイプの選択
3. EBS最適化オプションの選択
4. RAID0によるスクレイピング
5. ボリュームの暖機

---

* 一番遅い方法

1. EC2のストレージタイプの選択・・・EBS
2. EC2のボリュームタイプの選択・・・マグネティック
3. EBS最適化オプションの選択・・・なし
4. RAID0によるスクレイピング・・・なし
5. ボリュームの暖機・・・なし


#### 上の条件でインスタンスを作ろうとしたら、丁寧に以下モーダルが出てきた。

![2016-02-12_003545.png](https://qiita-image-store.s3.amazonaws.com/0/53477/66b228de-49e7-3af2-36c9-25ec3dad702c.png)

#### ということで以下でインスタンス作成。

![2016-02-12_003840.png](https://qiita-image-store.s3.amazonaws.com/0/53477/9f7d5284-b8af-a304-7f60-f76252e2e093.png)


---
#### ベンチマークコマンドをインスト―ル。

```
# rootになる
sudo su

# yumのアップデートする
yum clean all
yum -y update

# fioのインストール
yum install libaio-devel
wget http://pkgs.repoforge.org/fio/fio-2.0.14-1.el5.rf.x86_64.rpm
rpm -Uvh fio-2.0.14-1.el5.rf.x86_64.rpm
rpm -qa | grep fio

# fioインストール確認
which fio
```

---

#### fioを試しに使ってみる

* fio実行結果

```lang:fio
[root@ip-172-31-26-155 ec2-user]# fio ./fileio_bench/random-read.fio
random-read: (g=0): rw=randread, bs=4K-4K/4K-4K/4K-4K, ioengine=sync, iodepth=1
fio-2.0.14
Starting 1 process
random-read: Laying out IO file(s) (1 file(s) / 100MB)

random-read: (groupid=0, jobs=1): err= 0: pid=7160: Thu Feb 11 16:10:52 2016
  read : io=102400KB, bw=2173.1MB/s, iops=556521 , runt=    46msec
    clat (usec): min=0 , max=24 , avg= 1.09, stdev= 0.77
     lat (usec): min=0 , max=24 , avg= 1.21, stdev= 0.79
    clat percentiles (usec):
     |  1.00th=[    0],  5.00th=[    0], 10.00th=[    1], 20.00th=[    1],
     | 30.00th=[    1], 40.00th=[    1], 50.00th=[    1], 60.00th=[    1],
     | 70.00th=[    1], 80.00th=[    1], 90.00th=[    2], 95.00th=[    2],
     | 99.00th=[    3], 99.50th=[    3], 99.90th=[   13], 99.95th=[   14],
     | 99.99th=[   21]
    lat (usec) : 2=88.38%, 4=11.12%, 10=0.34%, 20=0.14%, 50=0.02%
  cpu          : usr=17.78%, sys=71.11%, ctx=7, majf=0, minf=4
  IO depths    : 1=100.0%, 2=0.0%, 4=0.0%, 8=0.0%, 16=0.0%, 32=0.0%, >=64=0.0%
     submit    : 0=0.0%, 4=100.0%, 8=0.0%, 16=0.0%, 32=0.0%, 64=0.0%, >=64=0.0%
     complete  : 0=0.0%, 4=100.0%, 8=0.0%, 16=0.0%, 32=0.0%, 64=0.0%, >=64=0.0%
     issued    : total=r=25600/w=0/d=0, short=r=0/w=0/d=0

Run status group 0 (all jobs):
   READ: io=102400KB, aggrb=2173.1MB/s, minb=2173.1MB/s, maxb=2173.1MB/s, mint=46msec, maxt=46msec

Disk stats (read/write):
  xvda: ios=0/0, merge=0/0, ticks=0/0, in_queue=0, util=0.00%
[root@ip-172-31-26-155 ec2-user]#
```
画像を使わずcssだけで、開閉するリストによくある矢印を作る

このような縦に並ぶリストで、リストの右端に並んでいる矢印をcssで作る。
<img width="75" alt="スクリーンショット 2016-02-12 0.03.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/6876/4a86ca09-3aa0-9cc5-951d-87debf34a3b6.png">

```html
<ul class="menu">
	<li class="hasChild">
		<a href="#">リンク1</a>
		<ul class="subNav">
			<li><a href="#">リンク1-1</a></li>
			<li><a href="#">リンク1-1</a></li>
			<li><a href="#">リンク1-1</a></li>
		</ul>
	</li>
	<li><a href="#">リンク2</a></li>
	<li><a href="#">リンク3</a></li>
	<li><a href="#">リンク4</a></li>
	<li><a href="#">リンク5</a></li>
</ul>
```


```css
li {
	height: 40px;
	width: 200px;
	border-color: 1px solid #ccc;
}
li a {
	display: block;
	width: 100%;
	height: 100%;
	position: relative; /* このaタグを基準に矢印を作成 */
}
li a:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 2px solid #333; /* 線の太さ */
	border-right: 2px solid #333; /* 線の太さ */
	transform: rotate(45deg); /* 右向き矢印 */
}
.subNav {
	display: none;
}
li.hasChild a:after {
	transform: rotate(135deg);
	/* 下向き矢印（サブリストが開じている時） */
}
li.hasChild.open a:after {
	transform: rotate(-45deg);
	/* 上向き矢印（サブリストが開いている時） */
}
```


```js
$('.hasChild > a').click(function(e){
	e.preventDefault();
	var li = $(this).closest('li.hasChild')
	if(li.hasClass('open')){
		li.removeClass('open').find('.subNav').slideUp('fast');
	}else{
		$('.hasChild').removeClass('open').find('.subNav').slideUp('fast');
		/* 上の行を書くと一つだけしか開いた状態にならない。 */
		setTimeout(function(){ /* 閉じてから開くためにsetTimeout */
			li.addClass('open').find('.subNav').slideDown('fast');					
		},200);
	}
});

```
ターミナルから直接実行できるC/C++のソースコードのテンプレート

# 追記(2017/04/02)
[もっといい感じでブログに書き直した](https://blog.cardina1.red/2017/04/02/direct-source-execution/)のでそっち参照してください。
Rustとかgraphvizとかにも対応しました。

# 追記(2016/03/13)
```sh:foo.cpp
#if 0
g++ -std=c++11 "$0" && ./a.out
exit
#endif
```

これで十分だった。なんで `#if 0` を捨てようと頑張ってたんだろう……

というわけで、この記事には謎の無駄があるので、それを踏まえてどうぞ。

# TL;DR

先頭に

```sh:foo.cpp
///bin/true<<//
#if 0
//
g++ -std=c++11 "$0" && ./a.out
exit
#endif
```

を入れる。
実行は、単にシェルに渡してやればよい。

```shell-session
$ sh foo.cpp
```

以上。

なお、 `g++` の部分には `#` で始まる行以外なら何でも書けるし、複数行でも問題ない。

# 実行例

```cpp:foo.cpp
///bin/true<<//
#if 0
//
g++ -std=c++11 "$0" && ./a.out
exit
#endif

// put C++ source below.

#include<iostream>
int main(void)
{
    std::cout << "Hello world" << std::endl;
    return  0;
}
```

```shell-session:terminal
$ sh foo.cpp
Hello world
$
```

# 解説

大雑把に言えばこういうことである。

- `g++` を起動する、シェルスクリプトとしてのソースが存在する。
  * これはC++から見てコメントである。
- C++としてのソースが存在する。
  * これはシェルスクリプト部分の終了後に置いてある。

## `///bin/true<<//`
`/bin/true` とヒアドキュメントを使って、特定部分のテキストをシェルから無視させる。
この部分にC++コードを入れる。

同時に、この行は `//` で始まるから、行コメントとしてC++コンパイラからは無視される。

>E10) Why does `cd //` leave `$PWD` as `//`?
>
>POSIX.2, in its description of `cd`, says that *three* or more leading
>slashes may be replaced with a single slash when canonicalizing the
>current working directory.
>
>This is, I presume, for historical compatibility.  Certain versions of
>Unix, and early network file systems, used paths of the form
>`//hostname/path` to access 'path' on server 'hostname'.
([Bash FAQ](http://tiswww.case.edu/php/chet/bash/FAQ) より引用)

上に引用した[linux - what is path //, how is it different from / - Stack Overflow](http://stackoverflow.com/questions/16840916/what-is-path-how-is-it-different-from)によると、POSIX.2 では、パスの先頭の3つ以上連続するスラッシュはひとつに置換されるらしいので、これを利用すると `///bin/true` は `/bin/true` として扱われる。

`/bin/true` は、リターンコード `0` を返すだけのシンプルなプログラムだ。
何も出力を行わないので、入力を食わせて無視させるには丁度良い。

`<<//` はヒアドキュメントである。
説明するまでもないが、 `//` という文字列だけの行の直前までを標準入力に流し、 `//` の行そのものは飛ばされる。

## `#if 0`
言わずと知れた、C/C++のプリプロセッサを利用したコメント。
`/* */` と違ってネスト可能なので一部用途で重宝される。

同時に、この行そのものは `#` から始まるため、シェルにもコメント扱いされる。

ここから `#endif` までがC++としては無視されるので、そこにシェルスクリプト本体を書く。

## シェルスクリプト部
べつにコマンドは `g++` でなくとも何でも良い。
`wc` で行数を数えてもいいし、なんだったら `cppcheck` でソースの解析をしたっていい。
そもそも複数行であっても問題ない。
もちろん全部やったって構わない。

`#endif` のような行を含まない任意のシェルスクリプトを書こう。

ただし、**最後に `exit` を置くのを忘れない**こと 。
この `exit` によってシェルスクリプトの実行が終了し、以降の全ての行がシェルから無視される。

ちなみに、このように `exit` 等の後ろに任意のデータ(時にはバイナリさえ有り得る)を付加する手法は、シェルスクリプト単体でバイナリファイルをインストールするようなインストーラ等で使われたりする。

## `#endif`
C++のコメント終了。
この行では既にシェルスクリプトとしての実行も終了しているから、
この行以降は純粋にC++として見られる。
任意のC++コードを置こう。


# そもそも

quickrun等を使うべきって？
確かにそうだろう。私もそう思った。

だが、ファイル毎にコンパイルオプションを設定する方法を探すのが面倒だったのだ。
考えた方が早かったし、結果的に柔軟性もより高い方法になったはずだ。たぶん。

任意のコマンドを実行できるし、エディタに依存しない。
最高だと思わないか。

# 本当にどうでもいい話

- 上で「C/C++」でなく「C++」と言っている箇所があるが、深い理由はない。思い付いたときC++を書こうとしていたとか、 `--std=c++14` オプションを打つのが面倒だと思っていたとか、そんな理由だ。
- 私個人のブログに全く同じような記事がありますが、そっちのサイト丸ごと作り替えるかもしれないのでこっちにコピーしました。元記事も私が書いたやつなのでパクりとか言わないでください。(たぶんQiitaの利用規約でも問題なさげなので)
CGI入門


# ■ CGIとは

CGI とは Common Gateway Interface の略。
ウェブサーバーがプログラムを起動する際の起動方法（環境変数の名前や値）を定めた仕様の名称。
この仕様に基づいて作成されたプログラムを「CGIプログラム」と呼ぶ。

WebサーバはWebブラウザから要求を受け、CGIプログラムを起動する。





# ■ 参考
* [CGIの概要](http://www.tohoho-web.com/wwwcgi1.htm#CgiAbout)
Reactサブセット実装の preact で、ライフゲームのアニメーション書いて使い方を確認した


厳密なサブセットかは要確認な気がするが、まあそういうコンセプトのライブラリがある。

https://github.com/developit/preact

で、使ってみた。

![](https://i.gyazo.com/45cf8fe4016452f2a21fc4ff77c210a6.gif)

## preact とは

reactのサブセット実装。reactと比較してかなり小さい(圧縮して3kb)。contextとかpropTypesとかはない。いらないと思う。

reactとの互換をもたせるレイヤーは本体を小さくするために外部パッケージに切り出されている。 https://github.com/developit/preact-compat

コード量が少ないので、迷ったら元のコード読めるという安心感がある。
個人的にReactは過剰な抽象化の迷宮だと思っていて、あんまり読みたくない。

https://github.com/developit/preact/tree/master/src

## 最初に

ライフゲームのアニメーションしたかったわけで、ライフゲームを書きたかったわけではないので、ライフゲームのロジック部分はnpmから適当に持ってきた。

動いてるコードはここ http://mizchi-sandbox.github.io/sketch-board-1/

## Reactとの主な違い

babel では `/** @jsx h */` というプラグマでReactElementを生成する関数をハック出来る。deku等でも使える。
https://babeljs.io/docs/plugins/transform-react-jsx/

render関数がそのままだとcontainerへのprependなので、rootでStateless Component のpropsを更新し続ける場合(React0.14スタイルと個人的に呼んでる)、`render(<Main />, el, el.lastChild);` と第三引数を渡さないとDOMを生成し続ける。

## コード

そのままだと svg のレンダリングは別パッケージになってるので、そこも引っ張ってくる。

```js
/** @jsx h */
import GameOfLife  from 'game-of-life-logic'
import flatten  from 'lodash.flatten'
import range  from 'lodash.range'
import { h, render } from 'preact'
import SVG  from 'preact-svg'

// Domain
const createBuffer = (x, y, rate = 0.5) =>
  range(y).map(
    _ => range(x).map(
      _ =>
        Math.random() < rate ? 1 : 0));

const createGameOfLife = (x, y, rate = 0.5) => {
  let gol = new GameOfLife(x, y);
  let buf = createBuffer(x, y, rate);
  gol.copyMatrixAt(0, 0, buf);
  return gol;
};

// Component
function GameOfLifeComponent({matrix, size}) {
  return (
    <SVG width="640" height="480">
      {
        flatten(matrix.map((row, y) => row.map((val, x) =>
          <rect
            x={x*size}
            y={y*size}
            width={size}
            height={size}
            style={{fill: val ? "#000" : "#fff"}}
          />
        )))
      }
    </SVG>
  );
}

// Controller
const SIZE_X = 30;
const SIZE_Y = 10;
const INITIAL_ACTIVE_RATE = 0.3;

let gol = createGameOfLife(SIZE_X, SIZE_Y, INITIAL_ACTIVE_RATE);

const startApp = el => {
  (function _update() {
    render(<GameOfLifeComponent matrix={gol.matrix} size={15} />, el, el.lastChild);
    gol.tick();
    setTimeout(_update, 1000)
  })();
}

window.addEventListener("DOMContentLoaded", () => {
  let el = document.querySelector(".main");
  startApp(el);
});
```

やや手癖で書いた感がある(createBufferあたりがひどい)

https://github.com/mizchi-sandbox/sketch-board-1
http://mizchi-sandbox.github.io/sketch-board-1/

## 感想

マイナー故の動作確認の辛さはあるが、サイズが小さいのは魅力的なので、仮想DOM欲しいが、Reactでけーよって人いたら検討に値する。
tmux で複数サーバに一発でssh接続


[Terminal](http://qiita.com/tearoom6/items/e3c8b27bc4de9985e471), [Screen](http://qiita.com/tearoom6/items/e01c04eb0d0a814594a3) とやったので、惰性で tmux もやってみました。

tmux の場合は、[Tmuxinator](https://github.com/tmuxinator/tmuxinator) というツールが非常に便利なので、これを使うといいでしょう。使い方については他の方も解説されているので、割愛します。

## やりたいこと

- コマンド1つで、tmux を起動し、画面を 4 panes に分割し、さらにそれぞれの画面で別々のサーバに接続した状態にさせます。
- ついでに、別 window でデプロイ用サーバにも接続しておきます。

## 手順

- まずはインストール

```
$ gem install tmuxinator
```

- 以下のように $EDITOR を定義しておきます

```
$ export EDITOR='vim'
```

- プロジェクト作成
- mux コマンドは、tmuxinator コマンドの alias
- `~/.tmuxinator/PROJECT.yml` が作られ、vimが開きます

```
$ mux new [PROJECT]
```

- 以下のように入力

```YAML:~/.tmuxinator/multi_ssh.yml
name: multi_ssh
root: ~/
windows:
  - multi_ssh:
      layout: tiled
      panes:
        - local:
          - date
        - server001:
          - ssh server001
          - cd /var/log
        - server002:
          - ssh server002
          - cd /var/log
        - server003:
          - ssh server003
          - cd /var/log
  - deploy:
    - ssh server_deploy
    - cd ~/deploy
```

- 起動すると、tmux が開き、上記で入力したコマンドが分割した画面で次々実行されていきます

```
# Start tmux session.
$ mux start PROJECT
```

## 補足

### `layout` について

標準の layout として、以下の5つが選べます。

- even-horizontal
   - 均等に縦縞上に並びます
- even-vertical
   - 均等に横縞上に並びます
- main-horizontal
   - メインのpaneが上に表示され、残りが下に縦縞上に並びます
- main-vertical
   - メインのpaneが左に表示され、残りが右に横縞上に並びます
- tiled
   - 格子状

他にもサイズをカスタム指定することもできます。

### `mux local`

- 特定のディレクトリ (プロジェクトルートなど) ごとに Tmuxinator 環境を用意する場合、ディレクトリに `./.tmuxinator.yml` を作成しておきます
- 以下のコマンドで起動できます

```
# `./.tmuxinator.yml` を読み取り、起動
$ mux local
```
PostgreSQLアンチパターン：運用DBのpg_dump


pg_dumpはPostgreSQLデータベースをバックアップするユーティリティです。
データベースを使用中であっても、他のユーザによるデータベースへのアクセスをブロックしませんし、運用に欠かせないツールです。
それでも濫用はいけません。運用の巨大DBなら極力回避したいものです。

# ページキャッシュ総入れ替え

データベース全体をひとなめするので、サービス実需ではアクセスしなくなったような古いデータまで、一度読み込んでしまいます。それによって、実需側のキャッシュヒット率が下がるリスクがあります。検索範囲の局所化効果で、サービスのスループットを保っていたなら、一時的にスループットが低下します。

# データ量比例の処理

データベース全体を、ポータブルな形式で外部出力するので、データ量に比例してIO/CPUに負荷がかかります。
アクセスピークと重なったりすると、DBServerの過負荷でパンクのリスクがあります。

# 回避策

[AWS の EBS snapshot](http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/EBSSnapshots.html) がおいしい回避策です。

- 運用DBを停止する必要がない
 - pg_dump は PostgreSQL の提供する標準のマイグレーション手段でもあるので当然できます。
 - file IOレベルの処理になる EBS snapshot でもちゃんと整合性のある PostgreSQL DB になります。
  - AWSだけが偉いわけではなく、PostgreSQLが、運用中のどの時点でOSクラッシュを食らっても、データベースを守り抜くという、DBMSの「ど根性要件」を満たしているからです。
   - [PostgreSQL Documents:信頼性とログ先行書き込み](https://www.postgresql.jp/document/9.3/html/wal-intro.html)
  - AWS側は任意の一時点のストレージを再現できる snapshot を作るので、PostgreSQL は次回起動時に WAL：先行書き込みログを使って、整合性のあるDBに自動リカバリします。
- 運用DBServer に負荷がかからない
 - AWS の backyard 側で処理してくれるので、顧客向けサービスを担当している正面側には全く負荷がかかりません。
 - snapshot作成コマンドも、ストレージサイズによらず、すぐに終了する非同期コマンドです。backyard側で処理は続きます。
- EBS snapshot は差分だけ記録
 - Backup は定期的に繰り返すものです。そしてDBには一度書き込まれたらほとんど書き換えのない部分がかなりあります。
 - 差分だけ S3 に保存するので保管コストが安い。
 - 差分だけなので、2回目以降は snapshot 作成完了までが早い。
  - 更新量1GBにつき1分が目安らしい。
 - 差分だけど、古いものはどんどん削除できる
  - 「ボリュームの過去のスナップショットを削除しても、それ以降のスナップショットからボリュームを復元する機能に影響することはありません。」 [Amazon EBS スナップショットの削除](http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ebs-deleting-snapshot.html)　から引用。
  - AWSのbackyardでどうやってるんでしょうね？ 「充分に発達した科学技術は、魔法と見分けが付かない。」 by アーサー・C・クラーク

# 適用できないケース
- PostgreSQL のメジャー・バージョンアップをするときは、DBバイナリの互換性がなくなるので、ポータブルな pg_dump 形式が必要になります。
- EBS volumeを複数使って SoftRAID を組んでいると、「任意の一時点」のストレージを再現できません。そうなると WAL での自動リカバリが成功する保証がありません。
- PostgreSQLじゃなくてMySQLの場合は、lock して flushする必要があるので、実質的にはDB停止が必要です。
ドメインに参加した後に、ドメインユーザでRDPする時に必要な設定

###以下の記事を元に設定

「このユーザーアカウントはリモートログインを許可されていないため、接続は拒否されました。」の対応 at softelメモ https://www.softel.co.jp/blogs/tech/archives/5046

「このユーザーアカウントはリモートログインを許可されていないため、接続は拒否されました。」の対応 - いてづきブログ http://iteduki.hateblo.jp/entry/2015/02/05/155302

【Windows Server 2008 R2】エラーメッセージ「このユーザーアカウントはリモートログインを許可されていないため、接続は拒否されました。」 - Muni Bus http://munibus.hatenablog.com/entry/2014/04/09/054217
react-router v2.0.0系でURLにハッシュ値を付けないようにする

react-routerを使ってルーティングするとURLの最後にハッシュ値が付いて `http://localhost:3000/#/?_k=5aw68m`
 みたいなURLに勝手になる。ちょっとダサいので勝手につかないようにする。

[公式](https://github.com/rackt/react-router/blob/master/upgrade-guides/v2.0.0.md#using-custom-histories) に書いてあった通りにやればOK。

**追記 : 2016/2/10にv2.0.0系になっていた。v1.xはやり方が違う**

``` js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, useRouterHistory } from 'react-router';
import { createHashHistory } from 'history';

import AppRoutes from './Routes';

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

ReactDOM.render(
  <Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}>
    {AppRoutes}
  </Router>
, document.getElementById('main'));
```
SublimeText3のConsole内フォントサイズを変える


`Data\Packages\User`フォルダの下に`Widget.sublime-settings`ファイルを作成します。
作成したらそのファイル内に

```
{
    "font_size":10
}
```

といった感じに記述して保存。  
一度エディタを再起動しないと反映されないので再起動してConsoleを開き、  
フォントサイズが変わっていたら成功です。

なお注意点として、
変更箇所がConsole内のフォントサイズの他、検索や置換時に入力する文字の
サイズも影響を受けます。
（個人的にはConsoleもそっちもフォントサイズ小さくしたかったのでむしろ影響受けてくれてラッキーって感じでしたが…）

※2016/2/12追記

font_faceも書いたらそれが適用されるようです。
検索窓のフォントもそれになるので一応注意。
CSSだけで、角が丸いグラデーションのGoogle風ボタンを描く


画像を使わずにこんなボタンがつくれます。
![image](https://qiita-image-store.s3.amazonaws.com/0/111534/58fab34e-0698-7316-cc38-d6bfed1937ed.png)

```css:test.css
.myButton {
  box-shadow:inset 0px 1px 0px 0px #ffffff;
  background:color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
  background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0);
  background-color:#f9f9f9;
  border-radius:6px;
  border:1px solid #dcdcdc;
  display:inline-block;
  cursor:pointer;
  color:#666666;
  font-family:Arial;
  font-size:1em;
  padding:3px 24px; /* ボタンの上下と左右の中の余白 */
  text-decoration:none;
}
.myButton:hover {
  background:color-stop(0.05, #e9e9e9), color-stop(1, #f9f9f9));
  background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9',GradientType=0);
  background-color:#e9e9e9;
}
.myButton:active {
  position:relative;
  top:1px;
}
.myButton {
  margin-top: 1em;
}
```
RTX1200とOSXでL2TP/IPsecをIPv4/IPv6デュアルスタックで接続する

# きっかけ
家に設置したRTX1200でL2TP/IPsec接続時のログを見ていたら、`PP[ANONYMOUS01] PPP/IPV6CP up`というログを見た…気がする。これは、ちゃんと設定すれば、家にデュアルスタックでトンネル行けるのでは…?

# 設定
## RTX1200側
1. L2TP/IPsecできるようにする。これはrtpro他、各種記事参照のこと。
2. `pp anonymous`にIPv6の設定を追加する。追加差分はこれだけ。

```
ipv6 prefix 4 dhcp-prefix@pp2:2::/64
pp select anonymous
 ppp ipv6cp use on
 ipv6 pp address dhcp-prefix@pp2:2::1/64
 ipv6 pp rtadv send 4 o_flag=on
 ipv6 pp mtu 1280
 ipv6 pp dhcp service server
 ipv6 pp tcp mss limit auto
```

我が家はPPPoEで/48なので、トンネル専用のprefixとして、pp2のprefixに2::を足している。MTUは適当。

## OSX側
OSXのpppはデフォルトでRAによるアドレス自動設定が動作しない。そこで、ppp0がup/downした時に、`ipconfig`コマンド(`ifconfig`ではない)で自動設定が動作するようにする。

```shell-session:/etc/ppp/ipv6-up
#!/bin/sh
/usr/sbin/ipconfig set $1 AUTOMATIC-V6
/sbin/route add -inet6 default -interface $1
```

```shell-session:/etc/ppp/ipv6-down
#!/bin/sh
/sbin/route delete -inet6 default -interface $1
/usr/sbin/ipconfig set $1 NONE-V6
```

`sudo chmod +x /etc/ppp/ipv6-*`を忘れずに。スクリプトの引数は`PPPD(8)`参照のこと。$1はインターフェース名(ppp0等)。

## ちなみにWindows10
WindowsはL2TP/IPsecもRAで設定される模様で、追加設定無しでIPv6接続可能となった。ただ、そもそもNAT Traversalが有効でないため、LTEのCGNが通らなかった。[こちら](https://support.microsoft.com/ja-jp/kb/926179)の方法でレジストリ変更で対処。

# 確認
```shell-session
$ ifconfig ppp0
ppp0: flags=8051<UP,POINTOPOINT,RUNNING,MULTICAST> mtu 1280
	inet6 fe80::yyyy:yyff:feyy:yyyy%ppp0 prefixlen 64 scopeid 0xa
	inet 192.168.101.100 --> 192.168.100.1 netmask 0xffffff00
	inet6 2001:xxx:xxxx:2:yyyy:yyff:feyy:yyyy prefixlen 64 autoconf
	inet6 2001:xxx:xxxx:2:zzzz:zzzz:zzzz:zzzz prefixlen 64 autoconf temporary
$ sudo ipconfig getv6packet ppp0
DHCPv6 REPLY (7) Transaction ID 0x0e75e1 Length 56
Options[3] = {
  SERVERID (2) Length 10 DUID LL HW 1 Addr yy:yy:yy:yy:yy:yy
  CLIENTID (1) Length 14 DUID LLT HW 1 Time 505569110 Addr zz:zz:zz:zz:zz:zz
  DNS_SERVERS (23) Length 16 2001:xxx:xxxx:2::1
}
```

わーい。

# 課題
DNSが変かも? ブラウザでAAAAが引かれない?
El CapitanでHappy Eyeballsが変更になったとの話だが、この方法だとAAAAを引こうとしない…のか?
ハッシュ付きのURLを打ってもその場所がうまく表示されない問題


原因がサイトのheight取得のタイミングの場合は、heightが決まった後に、このコードを追加する。

```Javascript
if(window.location.hash){
  $(window).scrollTop($(window.location.hash).offset().top);
}
```
CodeIQの入出力サンプル<Scheme>について

__注意:本記事は2015/2/11に書かれたものです。__
__2016/2/12追記__

[先日大規模アップデートされたCodeIQの入出力サンプル表](https://codeiq.jp/node/1598)ですが、そこに掲げられたSchemeの例に因縁をつけてみたいと思います。

「改行区切りのアルファベット文字列を1行ずつ標準入力から読み込んで、それを大文字に変換した後、標準出力に出力する」にあたって、上述のサンプルでは次のような関数`f`を定義しています。

```scm
(use-modules (ice-9 rdelim))
(define f (lambda()
        (let ((s (read-line (current-input-port))))
                (if (not (eof-object? s)) (begin
                        (display (string-upcase (string-trim s)))
                        (newline)
                        (f)
                ))
        )
))
(f)
```

たとえば`"hello\nworld\n"`が入力された場合`"HELLO\nWORLD\n"`が出力されるわけですが……この例は実際どうなんでしょう? Schemeに詳しい方がいらっしゃれば教えてほしいのですが、少なくともわたしであれば次のように書くと思います。ちなみにCodeIQで採用されている処理系は**Guile1.8**です。

```scm
(use-modules (ice-9 rdelim))

(define (f)
  (let loop ((line (read-line)) (str ""))
    (if (eof-object? line)
      (display str)
      (loop (read-line) (string-append str (string-upcase line) "\n")))))

(f)
```
***
__2016/2/12追記__ : コメントでいくつかご指摘を受けていくつか修正します(´・ω・`)

```scm
(use-modules (ice-9 rdelim))

(define (f)
  (let loop ((line (read-line)) (ls '()))
    (if (eof-object? line)
      (reverse ls)
      (loop (read-line) (cons (string-upcase line) ls)))))

(for-each
  (lambda (line) (begin (display line) (newline)))
  (f))
```
***

- 関数`f`の束縛に際して`(define f (lambda ...))`というような書き方をしていますが、こういう場合は`lambda`を省略することができます。
- 本問の中核的な処理はEOFまで1行ずつ読み込むというところにあり、`while`的なループが必要になります。~~例ではそれを関数`f`の再帰によって実現していますが、named-letの方が効率的で一般的だと思います。~~例では関数`f`の再帰呼び出しによってそれを実現していますが、いろいろ気になるのでnamed-let&末尾再帰に書き換えました。__(2016/2/16追記:表現がまずいので変更)__
    - CodeIQの問題には数百行数千行読み込まねばならないものもあり、それを単なる再帰でさばくとなるとかなりつらいのでは?
    - 実際には「読み込んだものを順番にリストに突っ込み、最後にそれを関数の返り値とする」ような関数がもとめられる場合が多いと思いますが、例のような書き方だとそれは難しくなります。
- `read-line`ではportを指定しているのに、`display`ではしていないというのはアンバランスな印象を受けます。
    - というか挙げられた例の最大目的は「入出力先のportは`current-input-port`や`current-output-port`でとれる」ということを示すことにあるとも思うので`(display ... (current-output-port))`としないと目的が達成されていないような気もします。
    - ちなみにCodeIQの問題を解くにあたっては、`read`や`write`のportは省略できます(経験則)
- `read-line`ですが、末尾の改行(`"\n"`)は読み込まれなかったような……。つまり`string-trim`はいらない気がします(´・ω・`)
Carrierwave、paperclipを使った時のテストでコケた！

carrierwaveやpaperclipを使って画像アップロードを実装して、いよいよ最後にテストコードを書こうとなりまして。以下のように書いてハマってしまったのでメモ。
avatarにはpresence: trueのバリデーションを設定しています。


```lang:spec/support/factories/users.rb
FactoryGirl.define do
  factory :user do
    password = FFaker::Internet.password(8)
    name { FFaker::Name.name }
    email { FFaker::Internet.email }
    password password
    password_confirmation password
    avatar { FFaker::Avatar.image }
  end
end
```

こう書くと、バリデーションエラーを起こしてしまい、上手く画像ファイルが作られません。
コンソールでFFaker::Avatar.imageとたたくと、次のような画像urlになっているので画像ファイルに変換する必要があります。
*"https://robohash.org/etsolutavero.png?size=300x300"*

##対処法
`ActionDispatch::TestProcess` という便利なモジュールが準備されているのでまずはこちらをインクルードします。
すると、`fixture_file_upload` というメソッドが使えるようになるので、こちらを使います。このメソッドはテスト用にアップロードされた状態の画像ファイルを生成してくれます。
これを使ってimage直下に配置した画像を指定しました。

```lang:spec/support/factories/users.rb
include ActionDispatch::TestProcess
FactoryGirl.define do
  factory :user do
    password = FFaker::Internet.password(8)
    name { FFaker::Name.name }
    email { FFaker::Internet.email }
    password password
    password_confirmation password
    avatar { fixture_file_upload("spec/support/image/noimage.png", 'image/png') }
  end
end
```

これで画像ファイルをアップロードした状態でテストユーザーが作成されて上手くテストが通ります。

他になにか良いやり方があれば教えて下さい。
Electron レンダラプロセスでjQueryのrequireができない


休日を半日使ってしまったのでメモ。

# エラーになるまでの流れ

## 最初はBrowserifyで

簡単なメモアプリを作りたかったので、とりあえずElectronで作ってみようということで、テンプレ的なところを作りました。
Gulp+Babel+Browserifyで作成しました。

```js:main.js
const app = require('app');
const BrowserWindow = require('browser-window');
let mainWindow = null;

app.on('window-all-closed', function () {
	if (process.platform != 'darwin') {
		app.quit();
	}
});

app.on('ready', function () {
	mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		center: true,
		resizable: true,
		'node-integration': false
	});
	mainWindow.on('closed',function () {
		mainWindow = null;
	});
	mainWindow.loadUrl(`file://${__dirname}/index.html`);
});
```

メインプロセスはこんな感じのコードですね。テンプレです。  

jQueryをHTMLで `<script src="lib/jquery-2.2.0"></script>` といった感じで読み込みたかったので、 `nodeIntegration: false` を指定しました。

作ってみたはいいものの、npmでjQueryの管理ができるみたいだったので、そっちに乗り換えました。

```
npm install --save jquery
```

Electronはレンダラプロセスでも `require` 文が使用でき、npmでインストールしたjQueryもそれを使用するとのことなので、早速試してみました。

```js:renderer.js
const $ = require('jquery');

$(document).ready(function () {
	// 処理
});
```

実行！
……するとエラーが発生して動作しません。

レンダラプロセスのjs上で `require('jquery');` とするとエラーになってしまいます。

## Browserifyを外して実行

「Browserifyがrequireを書き換えちゃうから、それを外したらできるよ！」といった感じの記事を見かけたので試してみたのですが、同じようにエラーとなってしまいました。

## ここまでは情報があった

日本語のページでそれなりに探したものの、ここまでの情報しか見つけられませんでした。


# 解決へ

英語が嫌いな私は、ここまで来てようやく[Electronの公式ドキュメント](http://electron.atom.io/docs/v0.36.7/)に目を通し始めました。
というかドキュメントの[FAQのページ](http://electron.atom.io/docs/v0.36.7/faq/electron-faq/)で「jQuery」で検索かけました。

そしたら次のような記載が。

> ```js:js
// In the main process.
var mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
});
```

> ```html:HTML
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
```

~~前後の英語は見るのすらきついので読んでません。~~

要するに、「`window`に`require`（や`exports`、`module`）が追加されているけど、`nodeIntegration`を`false`に設定すると削除されますよ」ということっぽい？

ということで早速メインプロセス側のjsを修正。
該当行を削除するだけなのでソースは割愛です。

それで解決しました。


# おわりに

jQueryを使えるようにするオプションでjQueryが使えなかったという皮肉な結果ですね。
自分が設定したオプションの意味をしっかりと理解しておきましょう。
Git記法チートシート


調べたコマンドメモ。主に自分用です

## 履歴ごとファイル削除

```bash:
git filter-branch --tree-filter "rm -f [消したいファイルパス]" HEAD
git gc --aggressive --prune=now
git push -f -u origin branch-name
```

[ref] [Git リポジトリに上がっているファイルを履歴ごと消すには？](http://qiita.com/go_astrayer/items/6e39d3ab16ae8094496c)
Elasticsearch & kibana installメモ


# 経緯 

* 24万行のCSV fileが手元にあり、Excelやgoogleスプレッドシートでは処理できないので、どうしようか検討した
* nonエンジニアの人にも見てもらうので、可能な限り、GUIで直感的に使えるようにしたい。

# 方針

* [TreasureData](https://www.treasuredata.com/jp/)のwebサービス使うと、CSV fileのimportとSQL文を使った必要なdataのselectまで30分以内でできた。でも、SQL文が必須になる。
* ElasticSerachとKibanaを使うと、かっちょいいGUIで操作ができるみたい。これでいこう。

# 環境

* Ubuntu14.04

# ElasticSearch2.2

1. download zip
   https://www.elastic.co/downloads/elasticsearch
2. `unzip`で解凍
3. `bin/elasticseaech -d`でバックグラウンドで起動
4. `curl -X GET localhost:9200`で動作確認

# kibana4.4

1. download zip
   https://www.elastic.co/downloads/kibana
2. `tar xvfz`で解凍
3. `bin/kibana`で実行

# embulkでcsv(tsv) fileをimport

http://www.embulk.org/docs/recipe/scheduled-csv-load-to-elasticsearch-kibana4.html

### Download Embulk binary

```
$ sudo wget http://dl.embulk.org/embulk-latest.jar -O /usr/local/bin/embulk
$ sudo chmod +x /usr/local/bin/embulk
```

### Install Elasticsearch plugin¶

```
$ embulk gem install embulk-output-elasticsearch
```


### Loading a CSV file

1. `embulk example ./mydata`で雛形作成
   `./mydata`の名前、場所は任意でok
2. `.mydata/csv`以下にcsv fileを保存。
   私はtsv fileを圧縮(gz)したfileを保存しました。
3. `./mydata/seed.yml`を編集

```seed.yml
in:
  type: file
  path_prefix: "/path/to/file/file-prefix."
out:
  type: elasticsearch
  index: embulk
  index_type: embulk
  nodes:
    - host: localhost
```

4. `embulk guess ./mydata/seed.yml -o config.yml`実行
5. `embulk preview config.yml`実行
6. `embulk run config.yml`実行
   注意事項としては、この時はElasticSearchが起動している必要があります。

# kibanaにアクセス
* `http://x.x.x.x:5601`でアクセスすると、下記のようなSetteingsタブが表示されます。よく分からなかったのですが、下記のような感じで、ワイルドカードにして、先にすすめます。

![kibana.png](https://qiita-image-store.s3.amazonaws.com/0/4779/797a883c-11a9-65af-7108-36688a880d41.png "kibana.png")

* `Discover`タブで、検索窓で直感的に検索が可能です。(詳細な使い方はこれから)

![kibana2.png](https://qiita-image-store.s3.amazonaws.com/0/4779/64c55af7-3212-558e-af52-ba83d6cce239.png "kibana2.png")

* `Visualize`タブでグラフを作成し、`Dashboard`タブで並べることで下記のような画面が作れます。

![kibana3.png](https://qiita-image-store.s3.amazonaws.com/0/4779/211b15be-4be8-0b6a-45f1-68b46ec795d4.png "kibana3.png")



# その他
## dashboardの検索結果をcsvでdownloadしたい

* 現在のバージョンのkibanaでは、dashboardの検索結果をcsvでDownloadできません。githubのissueには登録されていますが、まだ未対応です。
* [こちら](http://minewhat.com/blog/elasticsearch-csv-exporter-for-kibana-discover/)で紹介されている、Chromeのaddonを使う事で、csv downloadができます。

## daemonで起動

* ElasticSearchは結局`bin/elasticsearch -d`にしました。
	* http://blog.hrendoh.com/how-to-install-fluentd-elasticsearch-and-kibana4/#Fluentd_ElasticSearch
* kibanaは下記を参考にしました。
	* https://www.elastic.co/guide/en/elasticsearch/reference/current/setup.html

## 管理者画面を使いたい

* Marvel pluginをinstall
	* http://morizyun.github.io/blog/elasticsearch-kibana-setup-mac/?utm_content=buffer7dfbc&utm_medium=social&utm_source=facebook.com&utm_campaign=buffer 

# まとめ

* ずっと気になっていたElasticSearch+Kibanaを触ることができました。
* Kibanaで可視化できる内容もだいたいわかりました。もう少し面白い見せ方を探っていきたいと思います。
クリックしたボタンと関連するDOMを取得



デモ：http://jsrun.it/mo4_9/gwyo

## data属性

これが一番シンプル

```html
<div>
  <span data-form-id="1" class="box">1</span>
  <button data-form-id="1">ボタン1</button>
</div>
<div>
  <span data-form-id="2" class="box">2</span>
  <button data-form-id="2">ボタン2</button>
</div>
<div>
  <span data-form-id="3" class="box">3</span>
  <button data-form-id="3">ボタン3</button>
</div>
```

```Javascript
$('button').on('click', function(){
  var id = $(this).data('form-id'); // 1~3を取得
  var box = $('.box').filter('[data-form-id='+id+']');
  box.css('background', 'pink');
});
```


## on()メソッドのセレクタ


```html
<div class="parent">
  <ul class="menu">
    <li data-index="0">hoge0</li>
    <li data-index="1">hoge1</li>
    <li data-index="2">hoge2</li>
  </ul>
</div>
```

アクティブなliのdata-indexをクラスにして、親要素に付与する

```javascript
var $parent = $('.parent');
var $menu = $('.menu');

// on('event', 'selector', function)
$menu.on('click', 'li', function(event) {
	$parent[0].className = 'parent s' +  $(this).attr('data-index');
});
```

> 参考
http://www.jquerystudy.info/reference/events/on.html


## 画像の切り替え
末尾が_on,_off写真を用意

```
$('.btn').on('click', function(){
	$('.btn').each(function(){
		$(this).attr('src', $(this).attr('src').replace('_on', '_off'));
	});
	$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
});
```


ホバー

```
$(function(){
  $('a img').hover(function(){
    $(this).attr('src', $(this).attr('src').replace('_off', '_on'));
  }, function(){
    if (!$(this).hasClass('currentPage')) {
      $(this).attr('src', $(this).attr('src').replace('_on', '_off'));
    }
  });
});
```
Guzzleでファイルアップロードする



前々から少し気になっていたGuzzleでファイルアップロード（multipart/form-dataを送信）する方法を調べてみました。

まあ、[ここ](http://docs.guzzlephp.org/en/latest/quickstart.html#uploading-data)を見れば済む話ですが。

##ファイルの受け取り側

とりあえず、下記のようなファイルアップロードを受けるAPIを用意してみた。
いろいろ書いているが、そんなに複雑なことはしていない（テストなのでエラー処理も最低限）。

>エラーはまず$_FILES['file']['error']を利用して考える方がいいです。

multipartをチェックしたいので、とりあえず、access_keyとfileを受け取るようにしている。

receive.php

```php
<?php

    $response   = [];
    $access_key = "";
    $remote_size = 0;
	
	//access_key
	if(isset($_POST['access_key'])) $access_key = htmlspecialchars($_POST['access_key']);

	//access_key error
	if($access_key != "hoge")
	{
		$response['status'] = "NG";
		$response['msg'] = "error";
		$response['size'] = 0;

		header('Content-type: application/json');
		echo json_encode($response);
		exit;
	}


	//一時ファイルが存在するか？
	//アップロードされたファイルは一時ファイルとして保存される。
	if(is_uploaded_file($_FILES['file']['tmp_name']))
	{
		$remote_size = $_FILES['file']['size'];
		$response['size'] = $remote_size;

		//size check
		if($remote_size > 1000 * 1024)
		{
			$response['status'] = "NG";
			$response['msg'] = "file size error";

			header('Content-type: application/json');
			echo json_encode($response);
			exit;
		}

		//一時ファイルを正式ファイルにコピー
		//moveすると、一時ファイルは削除される
		if(move_uploaded_file($_FILES['file']['tmp_name'], "./".$_FILES['file']['name']))
		{
			//正常
			$response['status'] = "OK";
			$response['msg'] = "file uploaded";

		}else{

			//moveエラー
			$response['status'] = "NG";
			$response['msg'] = "error when saving";

		}
	}else{

		//uploadエラー
		$response['status'] = "NG";
		$response['msg'] = "file not uploaded";
		$response['size'] = 0;

	}

	header('Content-type: application/json');
	echo json_encode($response);
```

##ファイルの送信側

まず、Guzzleのインストールは、必要なディレクトリで、

```bash
composer require guzzlehttp/guzzle
```

とします。

guzzleにおいては、multipartの場合、送信する値を、

```php
[
	'name' => 'access_key',
	'contents' => 'hoge',
]
```

の様に、nameとcontentsに分けて設定するのがポイントです。

>普通のgetやpostの時のように、'access_key => 'hoge'の様にしない。

また、fileの指定は、

```php
[
	'name' => 'file',
	'contents' => fopen('file/path','r'),
]
```

という感じでfopenで指定する。高水準にいきなり低水準が出てきます。
とは言え、慣れればどうってことはありません。

```php
<?php

	require_once 'vendor/autoload.php';

	//get filesize
	$local_size = filesize('hoge.jpg');

	//upload
	$client = new GuzzleHttp\Client();

	$response = $client->request('POST','http://localhost/receive.php',[
		'multipart' => [
			[
				'name' => 'access_key',
				'contents' => 'hoge',
			],
			[
				'name' => 'file',
				'contents' => fopen('hoge.jpg','r'),
			],
		]
	]);

	//get response(josn -> obje)
	$obj = json_decode($response->getBody());

	$status = $obj->status;
	$msg = $obj->msg;
	$size = $obj->size;

	echo "status=".$status."<br>";
	echo "msg=".$msg."<br>";
	echo "remote file size=".$size."<br>";
	echo "local file size=".$local_size."<br>";
```

ここでは、レスポンスはjsonなので、decodeして、各要素を取得しています。
まともにアップロードされたら、

```bash
status=OK
msg=file uploaded
remote file size=806959
local file size=806959
```

という感じで表示されます。
size取得して、アップロードチェックしても良いかもしれません。
background-imageで埋め込む画像多めのサイトに



```scss
/* 基本形 */
@mixin setImg($w: 300, $h: 300){
	background-repeat: no-repeat;
	background-position: center center;
	background-size: $w + px, $h + px;
	width: $w + px;
	height: $h + px;
}

/* sp版 */
@mixin setImgSp($w: 300, $h: 300){
	background-repeat: no-repeat;
	background-position: center center;
	background-size: $w/2 + px , $h/2 + px ;
	width: $w/2 + px ;
	height: $h/2 + px ;
}

/* 拡張版 */
@mixin setImg2($w: 300, $h: 300, $l: 0, $t: 0){
	background-repeat: no-repeat;
	background-position: center center;
	background-size: $w + px, $h + px;
	width: $w + px;
	height: $h + px;
	margin: 0 auto;
	position: relative;
	left: $l + px;
	top: $t + px;
}

/* 使用例 */
.img{
	@include setImg(600, 400);
}
```
Redshiftで管理ユーザのパスワードを忘れたときの対処

# AWSの管理コンソールからGUIで変更する

http://docs.aws.amazon.com/ja_jp/redshift/latest/mgmt/managing-clusters-console.html

上記の手順で、Redshiftの該当クラスタの設定変更画面の「Master User Password」を変更する。


# RedShiftにAWS CLIでアクセスして変更する

TBD

# RedShiftにpsqlでアクセスして変更する

TBD
OWASP ZAPを使用してサイトの脆弱性と闘う話

# 概要
無料でサイトの脆弱性チェックできるツールのOWASP ZAPを使ってみて
脆弱性対応をしてみたというお話である。

OWASP ZAPのダウンロードは下記
https://github.com/zaproxy/zaproxy/wiki/Downloads

# 使い方
ところどころが日本語化されているので比較的に使いやすいかもしれない
クイックスタートより攻撃対象URLを入力して攻撃！
対象のサイトがどこかの外部サイトのものやCDNなどを使用されている場合は攻撃する前にURLの指定を外したほうが良い。
![スクリーンショット 2016-02-11 17.06.26.png](https://qiita-image-store.s3.amazonaws.com/0/89599/3176cb1b-21f9-40ab-93e2-ab24235ce68b.png)

# 発生した脆弱性

## X-Frame-Optionsヘッダーの欠如

![スクリーンショット 2016-02-11 17.15.29.png](https://qiita-image-store.s3.amazonaws.com/0/89599/1a8c46f2-6033-b2a5-e7ff-1c8acc0c108e.png)

「クリックジャッキング」攻撃を防止するために下記を追記することで対策できる。
他のサイトからiframeによるアクセスができないようにするために行う内容である。

.htaccessなら

```
Header set X-FRAME-OPTIONS "DENY"
```

H2Oなら

```
header.set: "X-Frame-Options: DENY"
```

PHP側で対応する場合なら

```
header("X-Frame-Options: DENY");
```

## Cookie set without HttpOnly flag
![スクリーンショット 2016-02-11 18.15.22.png](https://qiita-image-store.s3.amazonaws.com/0/89599/41a2845f-4d03-28a0-0bff-5d035991bfed.png)

CookieのセッションIDをJS経由で取得できてしまう脆弱性があるため
Cookieのセットの設定はHttpOnlyにしよう。

.htaccessなら

```
session.cookie_httponly = On
```

H2Oなら

```
header.append: "Set-Cookie: HttpOnly"
```

PHP側で対応する場合なら

```
ini_set('session.cookie_httponly', 1);
```

## Cookie set without secure flag
![スクリーンショット 2016-02-11 18.15.35.png](https://qiita-image-store.s3.amazonaws.com/0/89599/f892b48c-9eaa-8468-2c77-e212084a2498.png)

secure属性を指定することでHTTPSの通信時のみクッキーを送信するようになるとのこと

.htaccessなら

```
session.cookie_secure = On
```

H2Oなら

```
header.append: "Set-Cookie: secure"
```

PHP側で対応する場合なら

```
ini_set('session.cookie_secure', 1);
```

## Incomplete or No Cache-control and Pragma HTTP Header Set
![スクリーンショット 2016-02-11 18.45.35.png](https://qiita-image-store.s3.amazonaws.com/0/89599/53793536-5ca4-4395-0629-f310b24bba00.png)


SSL化されているのにキャッシュが許可されている場合に発生する問題

.htaccessなら

```
Header set Pragma no-cache
Header set Cache-Control no-cache, no-store, must-revalidate
```

H2Oなら

```
header.append: "Cache-Control: no-cache, no-store, must-revalidate"
header.set: "Pragma: no-cache"
```

PHPなら

```
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
```

## Web Browser XSS Protection Not Enabled

![スクリーンショット 2016-02-11 19.21.44.png](https://qiita-image-store.s3.amazonaws.com/0/89599/45197660-9c30-b0c8-2a8e-220f941a3caa.png)


クロスサイトスクリプティング防止機能が無効になっていると出てくる問題らしい

.htaccessなら

```
Header always set X-XSS-Protection "1; mode=block"
```

H2Oなら

```
header.set: "X-XSS-Protection: 1; mode=block"
```

PHPなら

```
header("X-XSS-Protection: 1; mode=block");
```

# 最後に
あまり脆弱性による問題点とかあげられていないのでその辺の追加編集をしていかないと、、、
headerに情報を追加したものが多かったがサーバの設定で追加するべきなのかプログラム側で追加するべきなのかも調べておかないと。
Powershell上で、パイプで渡すと文字化けする。

Powershell上で、コマンドの出力結果をそのままパイプで受け渡しすると、文字化けします。

例えば、次のようなコマンドを打った時、

```
PS C:\ > ipconfig | clip
```

ipconfigの出力結果がクリップボードに出力できますが、日本語の環境では文字化けした結果が出力されます。

これはパイプでデータを渡す際に、$OutputEncoding変数の値に従って、文字コードの変換を行ってからデータを渡す動作を行っており、文字コードの変換の過程で文字化けが発生します。
デフォルトの設定がUS-ASCIIのため、結果として日本語は自動的に文字化けします。

以下の様に指定することで、日本語のテキストを文字化けせずに出力できます。

```
PS C:\ > $OutputEncoding = [System.Text.Encoding]::GetEncoding('shift_jis')
```

**※注意** $OutputEncodingの値の変更による、他への影響が考えられるため、試す際はご注意下さい。

追記:下のコマンドでも大丈夫みたいです。

```
PS C:\ > $OutputEncoding = [Text.Encoding]::Default
```
sunspotでインデックス作成のパフォーマンス検証

railsからsolrを使っているとき、インデックス作成は避けて通れないですね。
rails側とsolr側でそれぞれどのくらいかかっているか気になったので調べてみました。

# 設定

`bundle exec rake sunspot:reindex` でのインデックス作成を検証します。

* Solr 5.4
* sunspot 2.0.0
* ruby 2.1.5
* java 1.8
* メモリ4GB
* 2コア
* クロック周波数3GHz
* CentOS 6.4

# sunspot:reindexの仕組み

デフォルトでは、ドキュメント50個ずつ、それを登録するためのリクエストをSolrに投げます。
つまり、ドキュメントの総数 / 50 回のリクエストをするということです。

まとめる件数はつぎのようにして変更できます。

`sunspot:reindex[500]`

くわしくはこちらを。
https://github.com/sunspot/sunspot#reindexing-objects

色々試した結果、10000ずつでやることにしました。

# シングルコアの場合

ドキュメントの件数は50万件、できあがったインデックスのサイズは60MBになりました。

対象のテーブルによってデータサイズがかわってくるのですが、大体は下記の範囲におさまりました。

* sunspotがリクエストをつくるまで: 10~12秒
* solrがリクエストを処理するまで: 0.4~0.8秒

sunspot側の方がめっちゃ時間かかっていたようです。

# コレクション1の2shard

埋め込みのzookeeprをつかって、SolrCloudモードにして2shardでもやってみました。
結果は上記とたいして変わらず。

ただ、SolrCloudにしたことで、インデックス登録のリクエストの振り分けがされて動きが変わっています。

10000個のドキュメントを、だいたい100個ずつに分けられて、1,2のshardに均等に分けられて登録されます。その結果が10000件の登録リクエストのレスポンスとしてでてきます。

つまり、秒間100リクエストくらいはSolrはさばけるということのようです。

# まとめ

まずは、sunspot側を改善するしかないようです。メモリ、コア数、クロック周波数を上げると改善されはしました。メモリを増やせば、reindexのバッチサイズを上げての速度改善が見込めるようです。

直列がやっているのがつらいので、並列化するgemもあるようです。

https://github.com/btucker/sunspot-parallel-reindex

ともあれ、Solr側で時間がかかっているかどうかの切り分けが、sunspotをつかっているときのポイントのようです。
IntelliJでSpark CSVを使ったsbtプロジェクトの作成法

# 環境
Windows

# Spark CSVについて
参照URL:http://qiita.com/kanuma1984/items/7cf2deb07c4eec593265

# IntelliJでのsbtプロジェクトの作成法
英語だが
http://nanxiao.me/en/build-apache-spark-application-in-intellij-idea-14-1/
の後半が参考になる．

scala2.11ではなく，scala2.10を使うことに注意

プロジェクト直下に下記のbuild.sbtを作成．

```build.sbt
name := "YourProjectName"

version := "1.0"

scalaVersion := "2.10.5"

libraryDependencies ++= Seq(
  "org.apache.spark" %% "spark-core" % "1.5.1" % "provided",
  "org.apache.spark" %% "spark-mllib" % "1.5.1",
  "com.databricks" % "spark-csv_2.10" % "1.3.0"
)
```

以上．
アスペクト比を保持したまま、widthに合わせてheightを変更する方法


デモ：http://jsrun.it/mo4_9/weXV

```html
<div class="box__wrapper">
    <div class="box"></div>
</div>
```

500px*300pxのboxを伸縮させる下準備。

```scss
$box_width: 500px;
$box_height: 300px;

.box__wrapper{
    position: relative;
    overflow: hidden;
}

.box{
	background-color: yellow;
	width: $box_width;
	height: $box_height;
	margin-left: -($box_width/2); /* 中央に寄せる */
	position: absolute;
	left: 50%;
	/* 下寄せの場合はbottomに */
	-moz-transform-origin: center top;
	-webkit-transform-origin: center top;
	-o-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top;
}
```

resizeの度にscaleを変更していく。

```Javascript
var $ww = $(window).innerWidth(),
	$box = $('.box'),
	$box_wrapper = $('.box__wrapper'),
	box_height = 300,
	sp_scale = 700,
	tablet_scale = 800,
	pc_scale = 900; // widthが900pxを越えると縮尺が100%を越えるということ

function resize(ww){
    if (ww < 480) { // sp
        $box.css('transform', 'scale('+ ww/sp_scale +')'); // 内        
        $box_wrapper.css('height', box_height * (ww/sp_scale)+ 'px'); // 外
        var scale = (ww/sp_scale);
    }else if(ww < 768){ // tablet
        $box.css('transform', 'scale('+ ww/tablet_scale +')');
        $box_wrapper.css('height', box_height * (ww/tablet_scale)+ 'px');
        var scale = (ww/tablet_scale);
    }else{ // pc
        $box.css('transform', 'scale('+ ww/pc_scale +')');
        $box_wrapper.css('height', box_height * (ww/pc_scale)+ 'px');
        var scale = (ww/pc_scale);
    };

    return scale;
}

$(window).on('load resize', function(){
	var $ww = $(window).innerWidth(); 
    resize($ww);
    console.log(resize($ww)); // 縮尺を確認
});
```

返り値scaleは確認用なので、本番では削除する。
Regular Expressions (realistic example)

Sites for testing / more info:
https://regex101.com/
http://regexone.com/
http://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

###Find emails using this :
"^(([a-zA-Z]|[0-9])|([-]|[\_]|[.]))+\[@\](([a-zA-Z0-9])|([-])){2,63}\[.\](([a-zA-Z0-9]){2,63})+$"
this will get accept valid email formats


###Finding home #, mobile #:
"^(\[0-9\]{3,})\[\-\](\[0-9\]{4})$"   this is for home phone numbers like "655-7663" (with the '-' dash sign)
"^0\[0-9\]{10}$" -this is for finding cellphone numbers (pure numbers only like "09055741020"
"^\+63[0-9]{10}$" - this is also for finding cell #s in the format of country code + number like "+639055741020"

###Find URLs
^(http(s){0,1}:\/\/){0,1}(www\.){0,1}[0-9a-zA-z]{2,}((\.[A-z]{2,}){1,})(\/[A-z0-9]+)*\/*$
this can find complete urls with http(s) , www, or just domain name like, yahoo.com,  can also find with trailing /word/ as many times possible
for example website.com/index/profile/2/save is allowed
Ubuntuへのカーネルパッチ適用手順

Debianのカーネルパッケージには[`test-paches`](http://kernel-handbook.alioth.debian.org/ch-common-tasks.html#s4.2.2)スクリプトがあるが，Ubuntuにはなくてつらい．

## 手順
### 前準備:
    $ sudo apt-get build-dep linux-image-$(uname -r)

### カーネルソース取得:

    $ . /etc/lsb-release
    $ git clone git://kernel.ubuntu.com/ubuntu/ubuntu-${DISTRIB_CODENAME}.git
    $ cd ubuntu-${DISTRIB_CODENAME}
    $ git checkout -b foobar

2GB近くあるため時間がかかる．
あるいは`apt-get source linux-image-$(uname -r)`を実行してソースをとってきても問題ないが，gitのコミット情報(`.git`)が含まれないため，作業しにくいことがある．

### パッチ適用:
`patch`や`git am`などで自由にパッチを適用する．
直接Emacsで編集しても良い．

### ビルド

    $ fakeroot debian/rules clean && fakeroot debian/rules binary-headers binary-generic

デフォルトで並列にビルドされるので，`DEB_BUILD_OPTIONS=parallel=$(nproc)`など並列性を自分で指定する必要はない．

Ubuntu 15.10のKernel 4.2.0をAWS t2.large(2 CPUs)でビルドしたところ70分かかった．

### インストール

    $ sudo dpkg -i ../*.deb
    $ sudo reboot

起動しなくなった場合はGRUBのプロンプトに降りて何とかする．
Amazon EC2だとGRUBに降りられなくてつらい．

## 参考
* https://wiki.ubuntu.com/Kernel/BuildYourOwnKernel
sunspot+RailsでSolr5.4を使う

Railsの検索機能を早くするのにSolrを組み合わせるケースが多いようで、その際はsunspotでRailsとSolrをつなぐと思います。そのときのやり方

# schema.xmlとsolrconfig.xmlの生成

インデックスの生成方法などを決めるschema.xmlとsolrconfig.xmlが鍵となります。
下記のissueにあるように、sunspot_solrでsolr 5.x系に対応するものを生成させます。

https://github.com/sunspot/sunspot/issues/711

```
gem install sunspot_solr
bundle exec rake sunspot:solr:run
```

これで、gemのインストール先のsunspot_solrのディレクトリの下に、sunspotに対応したschema.xmlとsolrconfig.xmlなどのconfigのディレクトリができます。これをもとにします。

# solrのコア作成

${SOLR_HOME}/bin/solrでコアを作成します。オプションで設定ファイルのディレクトリを指定できるので、前述で作ったものを使います。

https://cwiki.apache.org/confluence/display/solr/Solr+Start+Script+Reference#SolrStartScriptReference-Create

```
${SOLR_HOME}/bin/solr create -c core -d configsets
```

# インデックスの作成

どういう検索するかによって、インデックスの作り方を決めます。
sunspot_solrでつくったものは、[StandardTokenizer](https://cwiki.apache.org/confluence/display/solr/Tokenizers#Tokenizers-StandardTokenizer)というもので、スペースや改行など、一般的に単語の区切りとされるもので、トークンをつくっていくものです。特に拘りがなければこれからはじめるのがよいでしょう。

区切りのルールの詳細は下記を。
http://unicode.org/reports/tr29/#Word_Boundaries

## とにかく部分一致 

いわゆるbigramの設定をすると、手っ取り早く部分一致が実現できます。そのかわり検索ノイズもでます。問答無用で2文字区切りでトークンをつくるので、wildcardをつかったクエリがあまり意味がなくなってしまいます。

https://cwiki.apache.org/confluence/display/solr/Tokenizers#Tokenizers-N-GramTokenizer

https://github.com/sunspot/sunspot/wiki/Matching-substrings-in-fulltext-search

http://stackoverflow.com/questions/12267895/solr-wildcard-searching

## 前方一致と後方一致

NGramを前方・後方からやる[Edge NGram](https://cwiki.apache.org/confluence/display/solr/Tokenizers#Tokenizers-EdgeN-GramTokenizer)を使います。

http://stackoverflow.com/questions/29974665/the-best-practice-to-search-on-solr-with-wildcard-at-the-beginning-and-at-the-en

## 形態素解析

日本語の標準のも用意されているようです。
https://cwiki.apache.org/confluence/display/solr/Language+Analysis#LanguageAnalysis-Japanese


## インデックスとクエリ

インデックスのときに、どう分割するかを決めるように、入力された検索語の分割の仕方も指定できます。インデックスとクエリを同じルールにも、違うようにも設定できます。さらに、フィールドごとにも設定できるようです。

https://cwiki.apache.org/confluence/display/solr/Analyzers

# まとめ

SQLでできるレベルの検索しかしないなら、solrにあまり踏み込まなくもよさそうですが、それなりの検索をしようと思ったら、ちゃんとインデックスの仕組みをおさえる必要があるようです。


# 参考サイト

http://www.tree-tips.com/solr/kuromoji/analyzer/

http://ameblo.jp/itboy/entry-11803122464.html

http://www.slideshare.net/techblogyahoo/17lucenesolr-solrjp-apache-lucene-solrnbest