OmniAICreator/Qiita-1.07M huggingface dataset:
javascriptの簡易的なモジュール分割

BrowserifyやRequire.jsを導入するレベルでもない、プロダクト依存のモジュールをさくっと分割する方法。

```js:scriptA.js
(function(exports) {
	exports.nameOfModule = exports.nameOfModule || {};
	var module = exports.nameOfModule;

	// MethodA
	// ===========================================================
	module.nameOfMethodA = function() {
		module.nameOfMethodB();
	};

	// propertyA
	// ===========================================================
	module.propertyA = 'hogehoge';

})(this);
```

```js:scriptB.js
(function(exports) {
	exports.nameOfModule = exports.nameOfModule || {};
	var module = exports.nameOfModule;

	// MethodB
	// ===========================================================
	module.nameOfMethodB = function() {
		console.log(module.propertyA);
	};

})(this);
```

上3行と下1行が共通部分。

`window.nameOfModule`が展開されてグローバル空間からアクセスが可能。
モジュール中では`module.hogehoge`でモジュール中の他のパーツの読み出しが可能。

モジュール内の処理はネームスペースが`module`と`this`だけで完結するので、頭使わなくていいかと。

順不同なので`grunt-contrib-concat`でまとめたり`minify`や`uglyfy`もご自由にどうぞ。

----

Browserifyも検討したんだけど、作っていたものはページごとにイニシャライズの部分が違うので、全部を一つにまとめてしまうと、巨大なjsファイルがいくつも出来上がりそうなのでやめておいた。

単純に使い方間違っているだけかもしれないけれど、プレコンパイルなjsのモジュール系実装はSPAではないと向いていないのではないかと思った。
Play!Framework2.0.4から2.2.4へのmigration

# 特徴
* sbt versionの変更により、Build.scalaへの編集が必要になる点をフォロー

# ダウンロードとパス設定
## 解凍後ディレクトリ構成

```
> tree
C:.
└───play-2.0.4
└───play-2.2.4
```

## パス設定

```diff
> set
・・・
- PLAY_HOME=C:\play-2.0.4;
+ PLAY_HOME=C:\play-2.2.4;
Path=%PLAY_HOME%;・・・
・・・
```

# ファイルの編集
## 使用するsbtのバージョン更新

```diff:/project/build.properties
-sbt.version=0.11.3
+sbt.version=0.13.0
```

## sbt用Playプラグイン更新

```diff:/project/plugins.sbt
-addSbtPlugin("play" % "sbt-plugin" % "2.0.4")
+addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.2.0")
```

## PlayProjectオブジェクト変更対応
* Play 2.0 の PlayProject オブジェクト が Play 2.1 で play.Projectに
* 依存に"jdbc"、"anorm"追加
* コンストラクタの引数が変更され、"mainLang = SCA"削除
* PostgreSQL利用の場合はgroupIDも変更

```diff:/project/Build.scala
-import PlayProject._
+import play.Project._

・・・
    val appVersion      = "1.0"

    val appDependencies = Seq(
        // Add your project dependencies here,
-        "postgresql" % "postgresql" % "9.1-901-1.jdbc4"
+        jdbc, anorm,
+        "org.postgresql" % "postgresql" % "9.3-1100-jdbc4"
    )

-    val main = PlayProject(
-        appName, appVersion, appDependencies, mainLang = SCA
+    val main = play.Project(
+        appName, appVersion, appDependencies
    ).settings(
        // Add your own project settings here
    )
```

## play clean

```
> play clean
・・・
[success] Total time: 0 s, completed yyyy/MM/dd hh:mm:ss
```

* jdk1.8+の場合、Permanent領域が削除されたため以下警告が出る。

```
Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=256M; sup
port was removed in 8.0
```
システムの負荷の原因を切り分ける方法

# サーバのボトルネックを探る
サーバが重い時、主に以下の4つがボトルネックとなる。

1. CPU使用率
2. メモリ使用量
3. ディスクI/O
4. TCPコネクション数

この記事では、これらのうちどれがボトルネックとなっているかを突き止める方法について書く。

## ロードアベレージを見る

まずはロードアベレージを見ることで、おおまかに問題を切り分ける。
ロードアベレージの確認方法は[load averageを見てシステムの負荷を確認する](http://qiita.com/k0kubun/items/8065f5cf2da7605c8043)に書いた。

### ロードアベレージが高い場合

現在のホストの**「1. CPU使用率」**, **「2. メモリ使用率」**, **「3. ディスクI/O」**を疑う。
ロードアベレージが1以下であれば軽く、1〜3くらいだとやや重く、それ以上だとこれらがボトルネックの可能性が高い。

### ロードアベレージが低い場合
**「4. TCPコネクション数」**か、リモートホストがボトルネックになっていないか疑う。

# 特定のホストの問題を解決する
ネットワークがボトルネックでなく、どのホストがボトルネックになっているかが特定できたら、そのホストのボトルネックを以下の手順で探る。

## CPU使用率を見る
`top`, `sar`, `vmstat`などを使ってCPU使用率を見る。

### CPU使用率が高い場合
CPU使用率が100%に近い場合は**「1. CPU使用率」**がボトルネックになっていると言える。
その場合、

- `ps` でどのプロセスが原因になっているかを調査する。
- 原因のプロセスがわかったら、`strace`や`oprofile`でなぜそのプロセスがボトルネックなのか特定し、解決する。

### CPU使用率が低い場合
idleの割合が高ければ、**「2. メモリ使用量」**や**「3. ディスクI/O」**を疑う。

## スワップの発生状況を見る
`sar`, `vmstat`、`free`などでスワップが発生しているか確認する。

### スワップが発生している場合
**「2. メモリ使用量」**を疑う。
その場合、

- `ps`で特定のプロセスが極端にメモリを消費していないか確認する。
- プログラムの不具合でメモリを使いすぎている場合は改善する。
- そうでなければ、メモリ増設か分散を検討する。

### スワップが発生していない場合
**「3. ディスクI/O」**を疑う。
その場合、

- プログラムの改善でI/O頻度を軽減する
- データの分散やキャッシュサーバの導入
- メモリ増設でキャッシュ領域を拡大させられる場合はメモリを増設する

などで対処する。

# TCPコネクション数を確認
ロードアベレージが低いがサーバが重いとき、ネットワークがボトルネックになっている可能性がある。
そのような場合、`netstat -an | wc -l`などでTCPコネクション数を調べてみる。

## TCPコネクションが多い場合
**「4. TCPコネクション」**がボトルネックの場合。
ポートは番号65535個しかないので、数万個のTCPコネクションが貼られている場合は分散のような対応をとる必要がある。

## そうでもない場合
ロードアベレージが低く、ネットワークも問題でないような場合は他のホストがボトルネックになっていないか確認する。

# まとめ

以上をまとめると、以下のような構造になる。


- ロードアベレージが高い
  - CPU使用率がほぼ100%
     - **「1. CPU使用率」**
  - スワップが発生している
     - **「2. メモリ使用量」**
  - スワップが発生していない
     - **「3. ディスクI/O」**
- ロードアベレージが低い
  - TCPコネクション数が多い
     - **「4. TCPコネクション」**
  - TCPコネクション数が少ない
     - 他のホストを疑う
Google Play 仕様変更 -メールアドレスが必須になった！-

8/31 にGooglePlayの仕様変更、新デザイン（こちらはもっとはやくリリースされましたね）が出ました。
事前に、http://qiita.com/hotchemi/items/38ce7de88b35093005a0 の情報を提供いただいたおかげで無事対応を済ませることが出来ました。よかった！よかった！と、思っていた矢先に、思いも寄らない事態が...

デベロッパーコンソールを見ていると「アプリに関する情報が不完全です。」とのメッセージが！
なんでじゃ！簡単な説明もちゃんと入れたぞ！
と、思いながら確認してみると、「連絡先メール アドレスを入力する必要があります。」と真っ赤な警告が...

なかったよ！そんな事前通知なかったよね！
https://support.google.com/googleplay/android-developer/answer/113469?hl=ja
このページもいつの間にやら、メールアドレス必須の記述になっているじゃないですか...

まあ、必須と言われたら入れるしかないのがユーザーの悲しいところ...
デザイン変更とかで事前告知してたんだから同時に情報提供してくれればいいのになぁ
（新デザインも事前告知と表示違ったし... いつものことと言えば、いつものことか）
karmaでTypeScriptのテストを行う

## すべてTypeScriptにしたい。テストも。

TypeScriptでの開発に慣れてくると、すべてTypeScriptで記述したくなります。

テストもTypeScriptで書きたいです。

実行環境:karma、テスティングフレームワーク:jasmineの一般的(?)な組み合わせの場合について調べてみました。


## 1.型定義ファイルのインストール
Nugetから以下のパッケージをインストールする。
**AngularJSの型定義ファイルを使用する場合は、これのインストールは不要。**(angular-scenario.d.tsとの定義重複エラーが大量に発生します。)

```
install-package karma-jasmine.TypeScript.DefinitelyTyped
```


## 2.TypeScriptのプリプロセッサパッケージをインストール

karma-typescript-preprocessor という名前がズバリなこのパッケージを使う。(仕組みとかは全然見てないんですけど、とりあえずインストール＆設定したら使えました。。)

### 2-1.パッケージのインストール
https://github.com/sergeyt/karma-typescript-preprocessor このパッケージをインストールする。

```
npm install -g karma-typescript-preprocessor
```


### 2-2.設定ファイルの書き換え

karmaの設定ファイルにプリプロセッサ情報を追記する。

+ filesにtsファイルを追加する。
+ 型定義ファイル(*.d.ts)に対応する実装ファイル(*.js)もfilesに追加する必要あり。
+ プリプロセッサの設定を追加する。

```karma.conf.js
// ～～ 略 ～～

    files: [
        "../underscore.js",
        "../myts/*.ts",
        "*.ts"
    ],

    preprocessors: {
        '../myts/*.ts': ['typescript'],
        '*.ts': ['typescript']
    },

// ～～ 略 ～～
```


## 3.テストの記述
referenceが不要みたい。やった！
テスト書いたらあとはkarma実行するだけ。

```hoge-test.ts
describe("テストサンプル",  () => {
    it("TypeScript定義クラスが利用できる。", () => {
        var h = new File1.Hoge("ほげ", 110);
        expect(h.getHogege()).toBe("ほげ 110");
    });

    it("外部の有名ライブラリも利用できる", () => { 
        _.each([1, 2], (i: number) => {
            expect(1).toBe(1);
        });
    });
});
```
デスクトップ向けウェブブラウザの各社開発版を入手する

便利リンク集です。

<a href="https://boxen.github.com/">BOXEN</a>なんかを使うとこういうナイトリービルドを追い掛けるのが自働化できて良い感じでした。

## Google Chrome Canary

http://www.google.co.uk/intl/en/chrome/browser/canary.html

プロファイルを常用環境のものと別にできます。

## Firefox Aurora

https://www.mozilla.org/ja/firefox/channel/#aurora

## WebKit(Safari)

http://nightly.webkit.org/

## Opera Developer

http://blogs.opera.com/desktop/

"Opera developer"をダウンロード

## Internet Explorer

http://msdn.microsoft.com/ja-jp/library/ie/aa740471

どこかにあります(知らん)
特定のブラウザでCSRFエラーが多発する件。

PCとスマホとかクロスプラットフォーム開発してる時の話です。

開発でメインに使ってるブラウザだけなんかリロードするだけで2回データ受信行っていました。
CSRF対策で時間制限のあるトークンを発行しているのですが、
ビュー側で受け取っているのは1回目に発行されたトークン。
Zend_Sessionで保持しているのは2回目に発行されたトークン。
で、Validateして一致するはずないよねという内容でした。

以前似たような2重のトークン発行はAjax通信の時に通信がSuccessした時の処理にアクションを呼ぶようにしてたら2重通信になったということが有りました。

今回はJavascriptを使っているとはいえ、ページを新しいタブで開くだけの処理。
内容自体はAタグと変わりません。
とは言えアクションから別のアクションを呼び出したり、自身はトークンを呼び出す処理を行うのは1回限りだけれども2回一つの処理の中で呼ばれたりするのでトレースが非常に辛い。
地道にログ取得処理を埋め込んでいった結果どうも_init関数自体を2回呼んでいるという結論に。
ただのブラウザ更新でinit2回呼ぶってなんだ…?
って30分ぐらい悩んでたんですがそういやへダーを解析するエクステンション幾つか入れていたなと思い
・Live HTTP Headers
・Fire Bug
の2つを無効にしてみたところ綺麗に動き始めました。
なるほど、悪さをしていたのはソースではなくエクステンションってこともあるんだと思いました。

教訓
・テストは必ずエクステンションの入れてない真っさらなブラウザと開発用で分けろ
・原因不明の時は取り敢えずエクステンション全部無効にしてみろ

あんま技術的な話でないのに長文で申し訳ありませんでした。
CentOS7から変わったネットワーク系のコマンド


CentOS7から、ifconfigやarp、netstatなどのよく利用しているネットワーク系のコマンドが非推奨となり、iproute2に置き換わってます。

まぁ、
`yum install net-tools`
で、今まで通りのコマンドが使えるようにはなりますが、非推奨のものなので、後々消えてなくなるでしょう。

それなら、今のうちにiproute2のコマンドを覚えてしまう！ってことで、普段自分が利用しているものを中心にまとめてみました。

## ifconfigの代わりは？

`ip addr`ですね。略して`ip a`でも同じ内容が表示されます。
こんな感じに表示されます。少々表示のされ方が変わってますよね。。。まぁ、慣れるでしょう。
![ScreenShot 2014-09-08 21.51.29.png](https://qiita-image-store.s3.amazonaws.com/0/21319/bf3fd34c-95f0-2f2a-7dce-dbbf0da57afa.png)

特定のインターフェースのみが見たい場合は、`ip a show dev device名`となります。

## routeの代わりは？

`ip route`ですね。略して`ip r`でもOK.
![ScreenShot 2014-09-08 21.53.31.png](https://qiita-image-store.s3.amazonaws.com/0/21319/0963d2c9-5e87-df88-c9ec-f102467bc54c.png)


## netstatの代わりは？

`ss`なのですが、いつも`netstat -antup`とオプションを付けて使っている身なので、`ss -antup`になります。普段利用しているオプションがそのまま使えたのはうれしかった。
![ScreenShot 2014-09-08 21.58.58.png](https://qiita-image-store.s3.amazonaws.com/0/21319/b115b6c6-448f-e7fe-dc42-d55d4e0cf2f9.png)

## arpの代わりは？

`ip neigh`です。略して`ip n`でもOK.
![ScreenShot 2014-09-08 22.12.21.png](https://qiita-image-store.s3.amazonaws.com/0/21319/9aa4d5f2-d631-f84c-8eaa-e9d81b388e9a.png)

## さいごに

まぁ、私が利用する分としては、こんな感じでしょう。
他に追加したいコマンドがあれば、追加するなりしたいと思います。
grep+pecoの検索結果を素早くvimで開く 

[peco](https://github.com/peco/peco)ってどう便利なんだろう、と思っていたのだけど、その便利さを実感できたのでメモ。

# やりたいこと
「hoge」でgrepかけて、引っかかったファイルのうち任意のものをviで開きたい
ってことがよくあります。

```console
$ grep hoge -Rni app/
app/controller/hoge_controller.rb:3:class HogeController
app/controller/hoge_controller.rb:12:    tmp = hoge.hogege.hugogo
app/controller/hoge_controller.rb:42:    tyome = hoge.sotr_by(&:bar)
app/model/hoge.rb:3:class Hoge
 :
$ vi app/controller/hoge_controller.rb +42
```

面倒くさい。

# 検索結果から選んでvimで開く

ついでに、grepより`ag`(the_silver_searcher)のほうが好きなので、そっちを使います。

```bash
# agで検索した結果から選択し、ファイルを開く
function agvi(){
  path=$(ag $* | peco | awk -F: '{printf  $1 " +" $2}'| sed -e 's/\+$//')
  if [ -n "$path" ]; then
    echo "vim $path"
    vim $path
  fi  
}
```

```console
$ cd $GOPATH/src/github.com/peco/
$ agvi chan
```
![grep select](https://qiita-image-store.s3.amazonaws.com/0/41635/264ed98c-fbba-49be-9082-dd1e9a7e2e7b.png)

`ag` のオプションを使って、ファイル名検索とかも簡単

```console
$ cd $GOPATH/src/github.com/peco/
$ agvi -g re
```

![find select](https://qiita-image-store.s3.amazonaws.com/0/41635/b9256d80-659b-d0bd-eb62-5bd99d9e3b08.png)

# 解説

```sh
path=$(ag $* | peco | awk -F: '{printf  $1 " +" $2}'| sed -e 's/\+$//')

ag $*          # agviに渡した引数をすべて使ってagする
 | peco        # 結果をpecoする
 | awk -F: ..  # pecoで選んだものを「ファイル名 +行数」の形に整える
 | sed -e ..   # 上ので行数がないなら「+」も消す

# 上の結果を変数pathに入れて、pathが空白でないならvimで開く
# pecoの画面でESCなど使って何も選択しない時などを考慮
if [ -n "$path" ]; then
  vim $path
fi  
```
RSpecカスタムマッチャでデータベースのNOT NULL制約を簡単にテストする

[データベースのNOT NULL制約テストを簡単にするRSpecのカスタムマッチャ](http://blog.enogineer.com/2014/09/08/rspec-db-not-null-constraint/)を作りました。

たとえばPersonモデルのnameフィールドのNOT NULL制約をテストする場合は

```Ruby
describe Person, type: :model do
  it { should have_not_null_constraint_on(:title) }
end
```

とすればNOT NULL制約をテストできます。

テストを実行すると結果は

    $ bundle exec rspec spec/models/person_spec.rb
    Person
      should have NOT NULL constraint on name

となります。

[カスタムマッチャのコード](http://blog.enogineer.com/2014/09/08/rspec-db-not-null-constraint/)も15行くらいでお手軽です。
Rails4でビューをiframeから参照させる際の設定

rails4でiframeから参照される画面を作成。
デフォルトだと上手く表示されなかったが、以下の設定で解決。

```lang:config/application.rb
config.action_dispatch.default_headers = {
　　'X-Frame-Options' => 'ALLOWALL'
}
```
Backbone(Marionette)でハマりそうな気がしなくもないパターン

とあるコードで

```javascript
var View = Backbone.View.extend({
    data: [],
    initialize: function() {
        this.data.push($('#hoge'));
    },
    reset: function() {
        this.data = [];    
    }
});
```

みたいなのがあったんですが、これ若干はまりポイントがあるので注意です。


## 何故か

Backbone.extendによるコンストラクタ生成の時に指定したオブジェクトのプロパティは **全てprototypeオブジェクトのプロパティとして定義** されます。

つまり、上記のコードを通常のJavaScriptのコンストラクタ生成パターンで示すと

```javascript
function View() {
}

View.prototype = {
    data: [],
    initialize: function() {
        
    },
    reset: function() {
        
    }
}
// 本来ならBackbone.Viewのprototypeとかの処理も入りますが省略
```

のような定義と同様になるため、インスタンスを作成した時に

```javascript
var view = new View();

console.log(view.__proto__.data);       // -> []
console.log(view.__proto__.initialize); // -> function() {}
console.log(view.__proto__.reset);      // -> function() {}
```

のように **プロトタイプチェーンの参照オブジェクト(`__proto__`)上に定義** されます。まぁそりゃそうですね。


## で、何を注意しなければならないか

注意すべきは、参照と代入です。

意図せずプロトタイプチェーン上の`__proto__`オブジェクトに存在するプロパティへアクセスを行ったり、逆にさっきまで触っていたデータへアクセス出来なくなるなどの可能性があります。

また、インスタンスに付く`__proto__`オブジェクトは`prototype`オブジェクトの参照なので全インスタンス間とコンストラクタの`prototype`で共有されるのも注意です。

```javascript
var View = Backbone.View.extend({
    data: [],
});
var view = new View();

// view.data に $('#hoge') を push しようとするが、view に data というプロパティは存在しないので
// プロトタイプチェーンを遡って this.__proto__.data へ代入される
view.data.push('hoge'); // view.__proto__.push('hoge') と同等 

// view.data に [](空配列) を代入しようとすると、view オブジェクトの data というプロパティへ空配列が定義される
view.data = []; // この時点で view.data と view.__proto__.data が存在することになる

console.log(view.data); // -> [](空配列) (view オブジェクトに data プロパティは存在するので)

// では、view.dataを削除したとすると？
delete view.data;
console.log(view.data); // -> ['hoge'] (view.__proto__.data は存在するので)

// view.__proto__.data を消したくても delete view.data では消せないので
// 勢い余って delete view.__proto__.data などとすると…
delete view.__proto__.data;
console.log(view.data); // -> undefined
console.log(view.__proto__.data); // -> undefined
console.log(View.prototype.data); // -> undefined (view.__proto__ === View.prototype なので当然コンストラクタ側のものも消えてしまう)
```

みたいなのにハマったりしました。まぁそんなに話題に出ないのでエッジケースではあるのですが。

## あとはこんなことが起こりそう

- リセット or delete したはずなのに`__proto__`側が参照を持っていてメモリリークが発生し突然の死
- 複数インスタンスで`__proto__`オブジェクトが共用されていて訳分からんデータで埋まったり消えたりして突然の死
- 今どこのオブジェクトにデータを入れたのか分からなくなって突然の死

などなど。人類の可能性は無限大だぜ！

これからも`prototype`のことをよろしくな！！

----------------------------------------------------------------------

#### 余談

個人的には`Backbone.Hoge.extend`に渡すオブジェクトへ、ダイナミックな操作を行うオブジェクト(や配列)を入れなければいいんじゃねと思うます。そういうのは`initialize`メソッドでやった方が確実に幸せになれます。

Backboneガチ勢はどうしてるんですかね。
メール送信機能の実装

ある特定のアクションを行ったら、メールが届くようにしたい！というニーズありませんか？
というわけで、いまとなってはかなりポピュラーな技術ですが、基本的なMailerの設定方法について記します。

##1.メーラーを設定
まず、MailerというControllerに相当するクラスを生成します。
``rails generate メーラーの名前 メソッド名[オプション]``

今回、TestMailerというメーラーを作成したとします。

```
rails generate mailer TestMailer sendmaild_confirm
```

```ruby:app/mailers/test_mailer.rb
class TestMailer < ActionMailer:Base
　　
  default from: 'test@gmail.com'
        cc: 'test_test@gmail.com'

  def sendmail_confirm(user)
    @user = user
    mail(to: user.email, subject:'ユーザー登録ありがとうございました。')
  end
end
```

`default`メソッドでデフォルトのヘッダー情報を設定します。
`def`以下はコントローラーでいうアクションメソッドです。

##2. メールのレイアウトを編集する。
``rails generate mailer TestMailer sendmaild_confirm``を行った際に、
``app/views/test_mailer/sendmail_confirm.text.rb``というファイルが生成されたかと思います。
``sendmail_confirm.text.rb``に好きな文言を入力してください。もし、HTMLメールを送信したい場合は、`sendmail_confirm.html.erb`にHTMLを書いてください。

```textの場合
登録完了しました！
```

```htmlの場合
<HTML>
  <p>登録完了しました！</p>
</HTML>
```

##3.任意のコントローラーに設定
最後は、任意のアクションコントローラーのアクションにメーラーを呼び出すメソッドを書くのみです。
今回は、ユーザー登録が完了したら自動で登録完了メールを送るとしましょう。

```ruby:users_controller.rb
def create
  @user = User.new(paramas[:user])
  if @user.save
    TestMailer.sendmail_confirm(@user).deliver #.deliverでメールを送信
    redirect_to user_path
  else
    render `new`
  end
end
```
``deliver``メソッドを使用してTest Mailerのsendmail_confirmのメールを@userに送信します。

基本的なメーラーの設定は以上になります。
load averageを見てシステムの負荷を確認する

## load averageとは
ロードアベレージはシステム全体の負荷状況を表す指標。
「1CPUにおける単位時間あたりの実行待ちとディスクI/O待ちのプロセスの数」で表される。

システムのスループットを上げたい場合はロードアベレージを下げることを目標にする。

### 詳細な説明
Linuxカーネルはプロセス１つごとにプロセスディスクリプタを持っていて、そのstateメンバにプロセスの状態を入れて管理している。
プロセスの状態は以下のように区別される。

- **TASK_RUNNING**: 実行可能な状態。CPUが空いていれば実行できる。
- **TASK_UNINTERRUPTABLE**: 割り込み不能な待ち状態。ディスクI/O待ちなど、短時間で復帰するもの。
- **TASK_INTERRUPTABLE**: 割り込み可能な待ち状態。ユーザの入力待ちなど、復帰時間が予測できないもの。
- **TASK_STOPPED**: 実行中断になった状態。リジュームされるまでスケジューリングされない。
- **TASK_ZOMBIE**: ゾンビプロセス。子プロセスがexitして親プロセスにwaitされていないもの。

run queueに入っているプロセスのうち、**TASK_RUNNING**と**TASK_UNINTERRUPTABLE**のものがload averageとして換算される。

load average、つまりシステムの負荷とは、**「CPUの実行権限が与えられるのを待っているプロセス」**と**「ディスクI/Oの完了を待っているプロセス」**の多さのことである。

## load averageを見れるコマンド
### uptime
```bash
$ uptime
# 11:52:38 up  3:12,  2 users,  load average: 2.90, 0.64, 0.25
```

システムの稼働時間を見るコマンド。
それ以外に、現在の時間と、ログインユーザの数と、load averageが見れる。

load averageは、左から、直近1分, 5分, 15分間で計測したものを表している。
`watch uptime`のようにすれば変化を監視できるが、その場合は後述の`top`を使っても良い。

### w
```bash
$ w
# 11:58:45 up  3:18,  2 user,  load average: 0.06, 1.19, 0.87
# USER     TTY      FROM              LOGIN@   IDLE   JCPU   PCPU WHAT
# isucon   pts/0    i100-100-80-200. 11:59    6.00s  0.00s  0.00s top
# isucon   pts/1    i100-100-80-200. 08:42    5.00s  0.02s  0.00s w
```

システムに誰がログインしていて何をしているかを表すコマンド。
1行目は`uptime`と同じものが表示される。

### top
```bash
$ top
# top - 12:05:42 up  3:25,  2 users,  load average: 1.12, 2.24, 1.47
# Tasks:  92 total,   1 running,  91 sleeping,   0 stopped,   0 zombie
# Cpu(s):  2.3%us,  0.3%sy,  0.0%ni, 97.2%id,  0.1%wa,  0.0%hi,  0.0%si,  0.1%st
# Mem:  15144564k total,  1326668k used, 13817896k free,    41508k buffers
# Swap:        0k total,        0k used,        0k free,   502256k cached
```

システムの様々な統計を同時に表示し変化を監視することができるコマンド。
万能だが、solarisなどのOSでは入ってないことがあるので上記のようなコマンドを使う必要がある。

機能が多いので、詳しい使い方は[topコマンドの使い方](http://qiita.com/k0kubun/items/7368c323d90f24a00c2f)に書いた。

## まとめ

`uptime`, `w`, `top`などを使うとシステムの負荷状況を表すload averageを見ることができる。
grunt-wiredep使用の環境でjquery-uiのdatepickerのロケールとCSSを含みたい


grunt-wiredep使用の環境でAngularJSの[ui-date](https://github.com/angular-ui/ui-date)でロケール指定したい＆jquery-uiのCSSを当てたいと。

bower.jsonに追加してbower install

```bower.json
{
  "dependencies": {
    "angular-ui-date": "latest"
  }
}
```
ui-dateがjquery-uiに依存しているので、jquery-uiも入る。

jquery-uiの構成を確認すると、ロケールはui/i18n/datepicker-ja.jsに、CSSのテーマはthemes/にある。

なので、プロジェクトのbower.jsonでmainをoverrideして、ロケールファイルとCSSを含める。

下記はsmoothnessにしてみた例。

```bower.json
 "jquery-ui": {
      "main": [
        "jquery-ui.js",
        "ui/i18n/datepicker-ja.js",
        "themes/smoothness/jquery-ui.css"
      ]
    }
```

grunt serveとか実行するとこうなる↓

```index.html

  <!-- 省略 -->

  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/jquery-ui/themes/smoothness/jquery-ui.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- 省略 -->

  <!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->

  <!-- 省略 -->
  <script src="bower_components/jquery-ui/jquery-ui.js"></script>
  <script src="bower_components/jquery-ui/ui/i18n/datepicker-ja.js"></script>
  <script src="bower_components/angular-ui-date/src/date.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

```

あとはrunあたりで設定でOK

```app.coffee
myapp.run(->
  $.datepicker.setDefaults($.datepicker.regional[ "ja" ])
)
```

buildして製品用に吐き出す場合に、cssの読むimageも処理しなければならないが、grunt-contrib-copyなどでよしなにすればOK。
Value Domainでホストしているドメインでメーリングリストをさくらで運用する

#さくらのレンタルサーバ側で設定
さくらのメールボックスを契約

サーバコントロールパネルから、ドメイン設定へ

新しいドメインを追加をクリック
5.他社で取得したドメインを移管せずに使う・属性型JPドメインを使う（さくら管理も含む）を選択

sub.main.jp のように設定
初期ドメインが登録された後ではないとできない様子（５分ほど？）

#value domain 側で設定
ドメインのDNS設定へ
サブドメイン用にさくらのネームサーバを登録する 
ns sub 210.188.224.9
ns sub 210.224.172.13

digを打ちながら浸透するのを待つ
matplotlib のギャラリーとカラーマップ

データ可視化ライブラリの [matplotlib](http://matplotlib.org/) を利用すると印刷品質に耐えうる可視化をおこなうことができます。[今まで](http://qiita.com/ynakayama/items/7dc01f45caf6d87a981b)の記事でもさんざん活用してきました。工夫次第では実にさまざまな図形を描くことができます。どのような図示が可能かは[オンラインギャラリー](http://matplotlib.org/gallery.html)を覗くと良いでしょう。

Thumbnail gallery
http://matplotlib.org/gallery.html

今日はこの中から興味深い図示を筆者の独断でいくつか選んでみたいと思います。


### 3D 円グラフ

pie_and_polar_charts
http://matplotlib.org/examples/pie_and_polar_charts/pie_demo_features.html

pylab_examples
http://matplotlib.org/examples/pylab_examples/pie_demo2.html

3D 円グラフといえば[殺した方がいいグラフランキングで堂々一位を受賞できる](https://oku.edu.mie-u.ac.jp/~okumura/blog/node/2266)ある意味素晴らしい可視化ですが matplotlib を利用すればこのような図示もおこなうことができます。

念のためなぜダメなのか理由を記載しておくと、目の錯覚で下側に位置する項目の割合が左右に位置する項目よりも大きく見えてしまうため、誤解が生じやすいからです。

ご覧のように、公式サイトにはソースコードも掲載されていますので、このような図示もあますとろなくおこない、読み手の感性を破壊することができて便利です。

### 箱ひげ図

statistics
http://matplotlib.org/examples/statistics/boxplot_demo.html

こちらは統計の基本中の基本、要約統計量を可視化する[箱ひげ図](http://qiita.com/ynakayama/items/022b2d3d4a7f4adf1f31)です。代表値を見ることは分析の基本ですから、よく使うグラフの代表と言っても良いでしょう。

オプションで平均を表示したり、箱のかたちをカスタマイズすることができたりします。これもバリエーションまで含めてソースコードが掲載されていますから、応用するときに役立ちます。

### 何に使うのかよくわからないオブジェクト

shapes_and_collections
http://matplotlib.org/examples/shapes_and_collections/artist_reference.html

矢印や円などのグラフィックオブジェクトを配置することができます。こういったものをパッチと呼びます。パッチを使えば絵を描くこともできます。

筆者はこれを実際に使うというケースに直面したことはないのですが、もしかしたら応用例があるのかもしれません。

### カラーマップリファレンス

color example
http://matplotlib.org/examples/color/colormaps_reference.html

matplotlib は既定でいくつかのカラーマップを用意しています。これを利用することで、たとえば Greens を指定すると全体的に緑のグラデーションで棒グラフや各種チャートなどを描いたりすることができます。

* 普通に描画した破線チャート

![1.png](https://qiita-image-store.s3.amazonaws.com/0/38501/8272eb38-f166-2a16-9470-fca9cbc8e87f.png)

* カラーマップを緑にした破線チャート

![2.png](https://qiita-image-store.s3.amazonaws.com/0/38501/0823cdc6-4815-8acf-3e01-24c7ad22ff17.png)

このように色彩を変化させることで、白黒印刷に対応したり、目にやさしい色合いにすることができます。[過去のさまざまなグラフ](http://qiita.com/ynakayama/items/94779651d09e1004fd46)も色合いを変化させてみると意外と印象が変わるものです。どういった[カラーマップ](http://matplotlib.org/examples/color/colormaps_reference.html)があるか把握しておくと良いでしょう。

## まとめ

今回は matplotlib のオンラインギャラリーを探索してみるという話でした。興味のひかれる図示は他にもありますので色々と見てみると良いでしょう。
IntStream.range()と.boxed()のSpliterator特性

```
IntStream.range: DISTINCT IMMUTABLE NONNULL ORDERED SIZED SORTED SUBSIZED
IntStream.range.boxed: ORDERED SIZED SUBSIZED 
```

```java
import java.util.*;
import java.util.stream.*;

public class SpliteratorTest {
  static String c2s(String hdr, int c) {
    StringBuilder sb = new StringBuilder(hdr + ":");
    if ((c & Spliterator.CONCURRENT) != 0) sb.append(" CONCURRENT");
    if ((c & Spliterator.DISTINCT)  != 0) sb.append(" DISTINCT");
    if ((c & Spliterator.IMMUTABLE) != 0) sb.append(" IMMUTABLE");
    if ((c & Spliterator.NONNULL)   != 0) sb.append(" NONNULL");
    if ((c & Spliterator.ORDERED)   != 0) sb.append(" ORDERED");
    if ((c & Spliterator.SIZED)     != 0) sb.append(" SIZED");
    if ((c & Spliterator.SORTED)    != 0) sb.append(" SORTED");
    if ((c & Spliterator.SUBSIZED)  != 0) sb.append(" SUBSIZED");
    return sb.toString();
  }
  static void dump(String hdr, IntStream s) {
    System.out.println(c2s(hdr, s.spliterator().characteristics()));
  }
  static <T> void dump(String hdr, Stream<T> s) {
    System.out.println(c2s(hdr, s.spliterator().characteristics()));
  }
  
  static public void main(String[] args) {
    dump("IntStream.range", IntStream.range(0,10));
    dump("IntStream.range.boxed", IntStream.range(0,10).boxed());
  }
}

```
リニューアル後の iTunes Connect で新規バージョン追加時の注意点と手順


## **レビュー審査のために送信**をすると下記エラーが表示されて送信出来ない
> You must choose a build.

### 対応
**レビュー審査のために送信**の前に **Xcode** にて **Distribute** をして、 **iTunes Connect**でビルドを指定する必要がある


## **Xcode** の **Organizer** にてValidate、Distribute時に下記Warningが表示される。
>Undeclared Use of Advertising Identifier [IDFA]. You app contains the Advertising Identifier [IDFA] API but you have not indicated its usage on the Prepare for Submission page in iTunes Connect. Click Submit for Review to access the Prepare for Submission page and indicate IDFA usage.

### 対応
Distribute自体は終わっているので、 **iTunes Connect**にて **レビュー審査のために送信**の後に **IDFA** に関する質問が表示されるので回答する。

##手順まとめ
0. **iTunes Connect**にて対象のアプリを選択
1. **新規バージョン**をクリック
2. 必要事項入力
3. **保存**をクリック
4. **Xcode** の **Organizer** にてValidate, Distribute
5. <del>**iTunes Connect**からメールが来る</del> 
6. **iTunes Connect**のビルド欄に **＋** が出現している
7. **＋**から先ほどアップロードしたビルドを選択
8. **保存**をクリック
9. **レビュー審査のために送信**をクリック
10. このあと **IDFA**に関する質問が表示されるので回答
指定期間毎日更新するphpの処理

## 内容
○日〜○日まで、日毎に公開されるようなコンテンツの実装テンプレ。
例：日めくりカレンダー的な仕様など
コードは下記になります。

    <?php
    function day_diff($date1, $date2) {
        $stamp1 = strtotime($date1);
        $stamp2 = strtotime($date2);
        $secdiff = $stamp2 - $stamp1;
        $daydiff = $secdiff / (60 * 60 * 24);
        return $daydiff;
    }

    $startDate = "2014-09-01";
    $today = date("Y-m-d");
    $endDate = "2014-09-10";
    $loopDay = day_diff($startDate, $today);
    $endDay = day_diff($startDate, $endDate);
    $count = 0;

    for ($count = 0; $count <= $endDay; $count++) {
      if($count <= $loopDay) {
        echo "<p class='no{$count}'>コンテンツ{$count}</p>";
      } else if($loopDay <= $count) {
        echo "<p>coming soon</p>";
      }
    }
    ?>

仮に、2014/9/6だったら2014/9/1〜6までの内容が表示されていて、それ以降の内容は”coming soon”となっているかと思います。
これにプラスして配列を持たせるなどして、日々違うコンテンツを吐き出させるにできるかと思います。
Ruby 初心者用メモ

  Rubyを始めることになりました。そこで、自分を含め、初心者がつまづくであろうポイントを書き残しておこうと思います。

★二次元配列の作り方！

```rb:
#二次元配列の初期化の仕方（ここではmapを使ってみる）
a = Array.new(3).map{Array.new(3,0)}

p a
a[0][0] = 5
p a
```

すると、出力結果はこうなります。
[[0, 0, 0], [0, 0, 0], [0, 0, 0]]
[[5, 0, 0], [0, 0, 0], [0, 0, 0]]

決して、a = Array.new(3, Array.new(3, 0))などとしないように！
これでは、一つの配列オブジェクトを変更するつもりが、複数の配列オブジェクトを変更させてしまうことになりかねません！



今後、何か気づいた事があったら追加していく予定です〜（≧▽≦）/

---------------------------------------------------------
★以下におすすめサイトをのせておきます〜
・逆引きRuby
http://www.namaraii.com/rubytips/%E6%96%87%E5%AD%97%E5%88%97#l21
Dockerを導入する（CentOS版）

# Dockerを導入する（CentOS版）

Dockerとは、Linux上で独立した別のLinuxシステムを起動することができる、コンテナ型の仮想化ソフトウェアの一つである。（[IT用語辞典](http://e-words.jp/w/Docker.html)）

仮想サーバを簡単に立てることができるし、壊すことも自由にできるよーってことです。

では、実際に導入等々を説明していきます。

※ちなみに下記は一般ユーザでやってますので、sudoがめんどくさい人はrootでやればOKです。

## Dockerを導入する

epelリポジトリからyumで一発導入

```bash
$ sudo rpm --import http://dl.fedoraproject.org/pub/epel/RPM-GPG-KEY-EPEL-6
$ sudo yum -y install http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
$ sudo yum -y install docker-io
```

yumからdocker-ioをインストールすればdockerがインストールされます。
そして、お約束のサービスをスタート

```bash
$ sudo service docker start
$ sudo chkconfig docker on
```

これでDockerがホスト側（インストールしたサーバ）でいつも起動している状態になります。次に子サーバ（Dockerでいう「コンテナ」）にOSをセットアップします。
Dockerの提供元が各Linuxのディストリビューションイメージを提供してくれていますので、そこから取ってきます。

```bash
$ sudo docker pull centos
```

うまくいけばこれでcentosが入ります。
現在どんなイメージがDockerにあるかは下記のコマンドで確認できます。

```bash
$ sudo docker images
```

これでひとまずDockerの一通りの準備ができました。
ちなみにDockerを使うときは結構コマンドが長くなるので、aliasを設定しておくと後々楽です。
例えば。。。

```bash
$ sudo echo "alias dl='docker ps -l -q'" >> ~/.bashrc
```

これでコンテナ名を取得するaliasができました。

## コンテナを起動してみる

Dockerでは「子サーバ＝コンテナ」と呼び、それを今から起動してみます。

```bash
$ docker run -i -t centos /bin/bash
```

コンテナの起動はdocker runで一発です。これはcentosというイメージを使って、bashを起動してくださいというコマンドです。
接続されると、

```bash
bash-4.2#
```

と表示されるはずです。
これはコンテナのbashになります。では、いろいろ確認してみましょう。

```bash
bash-4.2# uname -a
bash-4.2# cat /etc/redhat-release
bash-4.2# ping yahoo.co.jp
bash-4.2# exit
```

いろいろ確認できましたらexitしましょう。
exitするとコンテナは終了します。現在実行中のコンテナを確認する方法は

```bash
$ sudo docker ps
```

で確認することができます。
すでに終了した環境についても-aオプションをつけることで確認ができます。
仮想環境を終了させたくない時は、runしているときにCtrl+p, Ctrl+qで中断することができます。
そして、実行中の環境に再接続するときは

```bash
$ sudo docker attach コンテナID
```

をすることで再接続が可能です。

## コンテナをカスタマイズしてみる

最初に使用したコンテナはほんとに初期のコンテナです。
それを自分の欲しい環境に設定したイメージを作ってみます。

まずはDockerでコンテナを作ってみます。

```bash
$ sudo docker run -i -t centos /bin/bash
```

これによりコンテナが起動します。
では、この初期コンテナに下記のコマンドを打ってみると、

```bash
bash-4.2# telnet
bash: telnet: command not found
```

と出ると思います。これは、初期コンテナにはtelnetがインストールされてないので、怒られています。
では、さくっとyumでtelnetを入れてみます。

```bash
bash-4.2# yum -y install telnet
```

これでtelnetコマンドが使えるようになりました。
では、一度bashを抜けます。

```bash
bash-4.2# exit
```

dockerでは起動したイメージが残っているので、それに先ほどのtelnetをいれたイメージに名前をつけていつでも呼び出せるようにします。
先ほどtelnetを入れたイメージのContainerIDを取得するために下記のコマンドを打ちます。

```bash
$ sudo docker ps -a
```

これで先ほど呼び出したContainerのIdを取得することができます。それに名前を付けて簡単に呼び出せるようにします。

```bash
$ sudo docker commit コンテナのID centos/telnet
```

ここでは「centos/telnet」と名前をつけましたが、基本的には名前の付け方は自由です。しかし、コンテナの名前は「自分の名前/なんとか」にすることが推奨されているみたいです。
では名前がきちんとついているか確認してみます。

```bash
$ sudo docker images
```

これで先ほど名前のつけたイメージができています。それを起動してtelnetが入っているか確認します。

```bash
$ sudo docker run -i -t centos/telnet /bin/bash
bash-4.2# telnet localhost 80
```

怒られることなくtelnetコマンドをたたくことができました。
これでtelnetが入ったcentosイメージを作成することができました。

## まとめ

Dockerは簡単にインストールとコンテナを作成することができます。個人的にはVagrantよりも好きです。
Chefと組み合わせたら簡単にサーバが立てられますね。
次回はDockerfileの説明をしたいと思います。
topコマンドの使い方

![](http://i.gyazo.com/a7eace67b1d3ed37c689ff591665d4ad.png)

## 得られる情報

- システム全体の負荷
- プロセス, CPU, メモリ, スワップの統計情報


## 使い方

```bash
$ top          # CPU使用率順にソート
$ top -a       # メモリ使用率順にソート
$ top -p [PID] # 特定のプロセスを監視
$ top -d1      # 1秒ごとに更新
```

### 操作方法

- **Shift+o**: 表示された特定のキーを押してEnterすると任意の列でソートできる
- **Shift+p**: CPU使用率順にソート
- **Shift+m**: メモリ使用率順にソート


## ヘッダーの見方

### load average

```bash
top - 08:42:47 up 2min,  2 users,  load average: 2.76, 0.76, 0.27
#     現在時間 サーバーの  ログイン                 1分   5分   15分
#              稼働時間   ユーザー数               間の単位時間あたりの待ちタスク数
```

この行は`uptime`と同じものが表示される。

### Tasks

```bash
Tasks: 110 total,   7 running, 103 sleeping,   0 stopped,   0 zombie
#      合計タスク数   稼働中       待機中        停止タスク    ゾンビタスク
```

各状態のタスクの数を見ることができる。

### CPU

```bash
Cpu(s): 77.1%us,  8.4%sy,  0.0%ni,  0.1%id, 14.3%wa,  0.0%hi,  0.2%si,  0.0%st
#       user      system    nice     idle   I/O wait hardware  software  steal
#                                                    interrupt interrupt
```

- **ni**: `nice`で実行優先度を変更したプロセスがユーザモードでCPUを消費した時間
- **st**: OS仮想化利用時にほかの仮想CPUの計算で待たされた時間

`sar`のようにCPUの利用時間の割合をプロセスの種類ごとに見ることができる。
1を押すとCPUごとのデータが見れる。

### Memory / Swap

```bash
Mem:  15144564k total,  1178112k used, 13966452k free,    28300k buffers
Swap:        0k total,        0k used,        0k free,   289928k cached
```

- **buffers**: mallocなど、バッファとして利用されているメモリ量
- **cached**: キャッシュとして利用されているメモリ量 (ファイルシステムのキャッシュ)

物理メモリとスワップ領域の使用状況が表示される。 `free` でも見ることができる。

## プロセス一覧

![](http://i.gyazo.com/55e8aff23dd0f75df5a5fa400f49da73.png)

| PR | NI | VIRT | RES | SHR | S | %CPU | %MEM | TIME+ |
|:---|:---|:-----|:----|:----|:--|:-----|:-----|:------|
| 優先度 | 相対優先度 | 仮想メモリ | 物理メモリ | 共有メモリ | 状態 | CPU使用率 | メモリ使用率 | 実行時間 |

- **NI**: Nice value。相対優先度。0が基準で、負だと優先度が高く、正だと優先度が低い。
- **VIRT**: Virtual Image。確保された仮想メモリ全て。スワップしたメモリ使用量を含む。
- **RES**: Resident size。 スワップしていない、使用した物理メモリのサイズ。
- **SHR**: Shared Mem size。 他のプロセスと共有される可能性のあるメモリのサイズ。
- **S**: Process Status。 以下のいずれの状態であるかを示している。
  - **D**: 割り込み不能
  - **R**: 実行中
  - **S**: スリープ状態
  - **T**: 停止中
  - **Z**: ゾンビプロセス


## まとめ
`top`を使うと、`uptime`, `sar`, `free`の結果を見つつ各プロセスの状態を監視することができる。
Atom の package で定義されているキーバインドを変更する方法


## TL;DR
- キーバインドを無効にしたい時は `unset!` を使う。
- キーバインドを変更したい時は無効にしてから定義する。


## キーバインドを無効/変更する

新しく [git-blame](https://atom.io/packages/git-blame) というパッケージを追加した。
しかし、このパッケージのキーバインドが `ctrl-b` になっているのが問題だ。
[git-blame](https://atom.io/packages/git-blame) は便利なコマンドだけど、この一等地を使うほど重要なコマンドじゃない。
ctrl と n,p,f,b の組み合わせはカーソル移動で使いたい。そう脳と身体に刻まれてる。

なので keymap.cson を編集して git-blame のキーバインドを変更した。


```keymap.cson
'.editor':
  # キーバインドを無効にする
  'ctrl-b': 'unset!'
  # キーバインドを再定義する
  'alt-cmd-b': 'git-blame:toggle'
```

単にキーバインドを変更するだけであれば `unset!` を指定すればいい。

## 参考
- [Keymaps In-Depth](https://atom.io/docs/latest/advanced/keymaps)

- [New Package Roundup](http://blog.atom.io/2014/08/08/new-package-roundup.html)
WordPress4.0 と WordPress3.9 の主な違い


# WordPress4.0リリース
WordPress4.0 がリリースされましたね。
主な違いを WordPress3.9 と比較してご紹介したいと思います。

## プラグイン追加画面が変更に

左 4.0 / 右 3.9

![プラグインを追加_‹_MyWordPress_—_WordPress_and_プラグインのインストール_‹_hoge_—_WordPress.png](https://qiita-image-store.s3.amazonaws.com/0/41589/9ea9d16c-7931-52dd-96ef-ec0d97dc3759.png "プラグインを追加_‹_MyWordPress_—_WordPress_and_プラグインのインストール_‹_hoge_—_WordPress.png")

プラグイン追加画面がグラフィカルになりました。
互換性や最終更新日なとが一覧画面で視認できるのは便利ですね。
アイコンってこれまでありましたっけ？

## メディアを簡単に埋め込めるように

同じテキストをそれぞれ入力してみます。

左 4.0 / 右 3.9

![投稿の編集_‹_MyWordPress_—_WordPress_and_投稿の編集_‹_hoge_—_WordPress.png](https://qiita-image-store.s3.amazonaws.com/0/41589/08d7a9ee-6156-7f42-2b57-42f2f4848f57.png "投稿の編集_‹_MyWordPress_—_WordPress_and_投稿の編集_‹_hoge_—_WordPress.png")

テキストモードではこのような感じですが、ビジュアルモードに切り替えると・・・

左 4.0 / 右 3.9

![投稿の編集_‹_hoge_—_WordPress_and_投稿の編集_‹_MyWordPress_—_WordPress.png](https://qiita-image-store.s3.amazonaws.com/0/41589/95afef78-4f8f-9a3f-e3b9-439b97c16062.png "投稿の編集_‹_hoge_—_WordPress_and_投稿の編集_‹_MyWordPress_—_WordPress.png")

外部メディアのURLを入力したところが、自動的に埋め込まれます。
（※セキュリティの関係で、標準で対応するサービスが制限されています。対応サイトは[こちら](http://codex.wordpress.org/Embeds)で確認できます。）

また、入力エリアがコンテンツの量に応じて自動的に調整されるようになっています。（表示オプションでコントロール可能。）
サイドバーもスクロールに追従するようになっていますね。

## メディアライブラリの表示モードが追加に

メディアライブラリに、サムネイルだけ表示できるモードが追加されました。

左 4.0 / 右 3.9

![メディアライブラリ_‹_MyWordPress_—_WordPress_and_メディアライブラリ_‹_hoge_—_WordPress.png](https://qiita-image-store.s3.amazonaws.com/0/41589/cdc8ae9b-c0f2-c9c1-7ceb-ef6ebf84b963.png "メディアライブラリ_‹_MyWordPress_—_WordPress_and_メディアライブラリ_‹_hoge_—_WordPress.png")

また、詳細プレビューも美しくなりました。

以上簡単ではありますが、新しい WordPress のご紹介でした。
Vagrantでpython2.7系の開発環境を構築する方法

#### 設定環境
CentOS 6.5
Vagrant 1.6.5

#### pythonの2.7.6を取得

```
$ curl -L -O http://python.org/ftp/python/2.7.6/Python-2.7.6.tgz
$ tar zxf Python-2.7.6.tgz
$ cd Python-2.7.6
$ ./configure --prefix=/opt/local
```

#### Developer Toolsを管理者権限でインストール

```
$ sudo yum groupinstall "Development tools"
$ sudo yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel
```

#### python2.7.6をインストール

```
$ cd Python-2.7.6
$ ./configure --prefix=/opt/local
$ sudo make && make altinstall
```

#### VirtualEnvをインストール

```
$ /opt/local/bin/python2.7
$ cd
$ curl -O https://pypi.python.org/packages/source/v/virtualenv/virtualenv-1.11.6.tar.gz
$ tar xvfz virtualenv-1.11.6.tar.gz
$ cd virtualenv-1.11.6
$ sudo /opt/local/bin/python2.7 setup.py install
```

#### pipを利用してDjangoとiPythonのモジュールを取得

```
$ cd
$ /opt/local/bin/virtualenv demo
$ source demo/bin/activate
$ python
$ pip
$ pip install Django ipython
```
rpmbuild メモ


https://fedoraproject.org/wiki/Packaging:RPMMacros?rd=Packaging/RPMMacros#Macros_mimicking_autoconf_variables


debug package省略
.specファイル
```%debug_package %{nil}```
or
.rpmmacros
``` %debug_package %{nil}```

disable brp-java-repack-jars
.specファイル
```%define __jar_repack 0```
or 
.rpmmacros
```%__jar_repack 0```


以下メモ

```spec
%__arch_install_post   /usr/lib/rpm/check-buildroot

##この辺でつまったら以下を編集
%__os_install_post    \
    /usr/lib/rpm/redhat/brp-compress \
    %{!?__debug_package:/usr/lib/rpm/redhat/brp-strip %{__strip}} \
    /usr/lib/rpm/redhat/brp-strip-static-archive %{__strip} \
    /usr/lib/rpm/redhat/brp-strip-comment-note %{__strip} %{__objdump} \
    /usr/lib/rpm/brp-python-bytecompile \
    /usr/lib/rpm/redhat/brp-python-hardlink \

    %{!?__jar_repack:/usr/lib/rpm/redhat/brp-java-repack-jars} \
%{nil}
```
Slack 設定メモ

## 概要

SlackのWeb版（Chromeを使用)の設定で何が設定できるかをメモ。内容的にほとんど日本語訳しただけ。

## 設定画面の開き方
![70.jpg](https://qiita-image-store.s3.amazonaws.com/0/26257/036ea3d6-fa4f-cbb2-c87f-3e885e426bdb.jpeg)

左下にある自分のマークをクリック（上を示すアイコンあたりのみクリックできるような見た目だが、あの領域のならどこでも判定があるようだ）

## Notificationsタブ
主に通知について設定を行う。

#### Desktop Notifications
デスクトップ通知について。

- For activity of any kind　すべての書き込みの通知を行う。
- Only for Highlight Words and direct messages 強調された単語、メッセージを受け取ったときのみ通知する。
- Never 通知しない

#### Highlight Words
ハイライト（強調）する単語を設定する。

#### Sounds
通知音について。

- Mute all sounds をチェックするとミュート（音無）になる
- Choose a notification sound で通知音の選択。

## Message displayタブ
メッセージの表示について。

#### Message Theme
メッセージのテーマ（見た目を選択)

- Clean 見やすく、いろいろな情報を見せる。
- Compact 重要な情報を見せ、画面に合わせる。

#### Message Options

- Display information about who is currently typing a message 誰がタイピング中かを表示する。
- Display real names instead of usernames (team default) ユーザーネームではなく、本名を表示する。
- Show times with 24-hour clock (16:00 rather than 4:00PM)　24時間表記にする。

## Sidebar Themeタブ
スライダーの見た目を変える。お好みで。

## Media & Linksタブ
メディア（画像、音声、ビデオ）について

- For files on Slack ファイルをSlack上に置く。
- For links to media from external sources メディアにリンクを貼る
- Even if it is an image larger than 2MB 2MBを超える画像でもメディアにリンクを貼る。
- Expand website links to show a preview of the content, when available. WEBサイトへのリンクのプレビューを行う。

## Emojiタブ
絵文字についてTwitterやGoogle等、見た目を選ぶ。

- Convert my typed emoticons to emoji, so  :D  becomes :smile: :Dとタイプしたら:smile:に変換する

## Serachタブ
ここから検索を行う。

## Read State Trackingタブ
既読についての設定

- automatically scroll me to the oldest unread message and mark the channel as having been read. 自動で未読部分までスクロールを行う。
- Do not scroll me to the oldest unread message, but still mark the messages as having been read when I switch. 自動スクロールを行わない。ただし、Slack内部では既読箇所を保持する。
- Do not scroll me or automatically mark messages as read — wait until I've seen the oldest unread message. 自動スクロールを行わないし、既読を保持しない。

## Advanced Optionsタブ
その他、詳細設定。
#### Input Options
入力オプション

- Enable spellchecking on input fields. 文字入力のスペルチェックを行う。日本語では無効？
- Only show autocomplete for people when the '@' character is used.　@とタイプしたときにチームメンバーのオートコンプリートだけを行う。
- When typing code with \`\`\`, ENTER should not send the message. プログラムコードを\`\`\`と一緒にタイプしたとき、エンターキーでメッセージを送らないようにする。
- Up/Down arrows in input cycle through your typed history. With this checked, you'll have to use Ctrl +   to edit your last message.上下矢印キーで自分の入力履歴を見れるようにする。これにチェックすると、自分の最後の入力履歴を編集するにはCtrl＋↑を使う。

#### Channel List
チャンネルリストの表示設定

- Show all channels, DMs and private groups you have open (default) すべてのチャンネルを表示する。
- Hide any channels, DMs or groups which have no unread activity すでに読んだチャンネルやDMは隠す。
- Hide any channels, etc., which have no unread activity, unless they are starred スターをつけていない、すでに読んだチャンネルやDMは隠す。

#### Other Options
その他

- Page up/down, Home, and End keys always scroll messages.Page up/down, Home, and End keyでメッセージのスクロールを行う。
- Ctrl + F starts a Slack search. This overrides normal browser search behavior.Ctrl + Fでslackの検索を行う。これはブラウザ標準の動作を上書きしているらしい。
- Surprise me! 押すと何かが起こるボタン。
Appleに超特急レビューをお願いするには

ヘルプも日本語になっていたので、追記・修正
※2016/01/22現在

iTunesConnectのUIがかなり変わって日本語が所々に表示されるようになったので、このまま完全に日本語対応とXcodeの日本語が戻ってきてくれないかなという希望も込めつつ・・・
※2014/09/08現在

（※iOSアプリってどうやって公開するの？？？って気になった方は[こちらへ](http://qiita.com/annaok/items/882f9ce8980a97d0f774)）

iOSアプリなどを公開する場合、
Appleによる審査が入るのですが、
それが長い！
体感的に早くても1週間弱・・・
新しい製品の発表間近な時はそれ以上かかったりします。
そんな中で、どうしても今すぐに公開したいという場合、

**「Expedited Review」**

というのがあります。
（※申請の前にAdhocではなくReleaseバージョンのアプリの動作確認をしたい場合は[こちらへ](http://qiita.com/annaok/items/9e803fbb03391cf1b388)）




これは、致命的なバグや期間限定イベントに合わせたい時など、
一刻も早く申請を通したい時に使うもので、
体感ですが、**1日程度**で審査は終了します。

その手順を以下にまとめておきます。

# 超特急申請の手順
1. まずは通常の申請手順と同じように、アップロードし**レビュー待ちの状態にする**
2. iTunesConnectのトップページから**「リソースとヘルプ」**を選択
2. **「連絡先」**を選択(「連絡先を表示」のリンク)
3. ドロップダウンから**「App Review」**＞**「App Store Review」**＞**「Request Expedited Review」**を選ぶ
4. 出てきた文章中の**「Request an Expedited App Review」**というリンクをクリック(下のボタンは使わないようです)
5. 電話番号、アプリ名、アプリID(レビュー待ちアプリのページで確認できます)、関連アプリのID(なければ空白)、プラットフォームを記載。
6. あとは、急ぐ理由を**「Critical Bug Fix」**(緊急性のあるバグ修正)、**「Time-Sensitive Event」**(時間限定イベント)、**「Other」**(その他)の中から選択し、フリースペースに詳細な理由も記載(フリースペースの理由の部分は、日本語でも大丈夫なようですが、一応、翻訳した英語も一緒に記載して出しています。)
6. **「Submit」**ボタンで申し込みは完了
7. 問題なければ、寝て起きると**審査が通ってる！？**


とりあえずは、今のところ断られたことはないのですが、
断られることもあるらしいので、ご利用は計画的に・・・
（申請は、余裕をもってやっておくのが一番^^;
GroongaをインストールしてHTTPサーバを立ち上げる手順


## 環境
- CentOS 6.5
- Groonga 4.0.5

## Groongaの構築

基本的には[公式ドキュメント](http://groonga.org/ja/docs/install/centos.html#centos-6)の通りに進めるだけ。

### インストール

yumで粛々とインストールします(関係ないけど、groongaって1.3MBしかないんですね)。

```bash:Groongaのインストール
$ sudo rpm -ivh http://packages.groonga.org/centos/groonga-release-1.1.0-1.noarch.rpm
$ sudo yum makecache
$ sudo yum install -y groonga
```

形態素解析が必要な人はMeCabトークナイザーもインストールします。

```bash:MeCabトークナイザーのインストール
$ sudo yum install -y groonga-tokenizer-mecab
```

MySQL互換のノーマライザーについても[こちら](http://qiita.com/groonga/items/acc7059eb0c6bbd4a427)の解説記事を読んで、必要だったら入れます。

```bash:MySQL互換のノーマライザーのインストール
$ sudo yum install -y groonga-normalizer-mysql
```

### 動作確認
インストールしたgroongaをコマンドとして実行して、動作する事を確認します。

```ruby:動作確認
# test.grnデータベースの作成
$ groonga -n /tmp/test.grn

# Siteテーブルの作成
> table_create --name Site --flags TABLE_HASH_KEY --key_type ShortText
[[0,1409878228.05819,0.00194931030273438],true]

# テーブル一覧の確認
> table_list
[[0,1409878240.4172,0.000143289566040039],[[["id","UInt32"],["name","ShortText"],["path","ShortText"],["flags","ShortText"],["domain","ShortText"],["range","ShortText"],["default_tokenizer","ShortText"],["normalizer","ShortText"]],[256,"Site","/tmp/test.grn.0000100","TABLE_HASH_KEY|PERSISTENT","ShortText",null,null,null]]]

> quit
```

詳しいコマンドは、[チュートリアル](http://groonga.org/ja/docs/tutorial/introduction.html)を参照してください。

ここまでで、groongaそのもののインストールは完了です。

## HTTPサーバの立ち上げ

GroongaのHTTPサーバパッケージは2種類ありますが、この手順ではHTTPサーバにはgroonga-httpdを入れます。
2種類の違いは[こちら](http://groonga.org/ja/docs/server/http/comparison.html)を参照してください。


### インストール

yumでgroonga-httpdをインストールします。

ちなみに、groonga-httpdのインストール手順は公式ドキュメントに見つけられなかったので、[こちらの記事](http://qiita.com/groonga/items/cfab8f00df1e8f9f4b82)を参考にしました。

```bash:groonga-httpdのインストール
$ sudo yum install -y groonga-httpd
```

### 起動

※上記の[記事](http://qiita.com/groonga/items/cfab8f00df1e8f9f4b82)では、起動の前に`groonga-httpd.conf`の修正が入っていますが、デフォルトで実施済みでした。

```bash:groonga-httpdの起動
$ sudo service groonga-httpd restart

# Port:10041でLISTENしている事を確認
$ netstat -lna | grep 10041
tcp        0      0 0.0.0.0:10041               0.0.0.0:*                   LISTEN
```

### 試しにコマンドを投げてみる

正しく起動しているかを確認するために、適当なリクエストを送ってみます。
本来であれば、ブラウザで管理画面を確認するのが一番いいと思いますが、僕の環境はVirtualBoxでPortフォワーディングの設定が面倒くさかったので、ステータス取得APIを叩いています。

```bash:試してみる
$ curl localhost:10041/d/status
[[0,1410164985.37004,7.48634338378906e-05],{"alloc_count":155,"starttime":1410164577,"uptime":408,"version":"4.0.4-214-gb1aaec1","n_queries":0,"cache_hit_rate":0.0,"command_version":1,"default_command_version":1,"max_command_version":2}]
```

なんらかの値が帰ってくれば、一旦完成です。

### サービス登録

CentOSではインスールしただけでは自動起動しないので、サービス登録しておきます

```bash:groonga-httpdをサービス登録
$ sudo chkconfig --add groonga-httpd
$ sudo chkconfig --level 345 groonga-httpd on
```

これで終わりです。
【プログラミング48(/2 -1)手】Bridge


## ポイント
Bridge（橋渡し）パターン。
これは、言葉だとなかなかわかりにくいので、
以下の説明と図を読んで理解するのが一番早い。
http://www.ie.u-ryukyu.ac.jp/~e085739/java.it.7.html
クラスの関係性というよりは、少し実装に近い。
このパターンで重要なのは、上記のページにもあるが、
* コンストラクタで実装オブジェクトを保持（委譲）←これがBridge
* コンストラクタで保持したオブジェクトに処理をまかせる
というところだと思う。

## サンプルコード
<script src="https://gist.github.com/onody/55deda7336e16ae5ac19.js"></script>
https://gist.github.com/onody/55deda7336e16ae5ac19


## 所感

* Adapterと意味的には共通するところは多い。  
  * Adapter すでにあるオブジェクトとオブジェクトの間に入って、適応させるもの  
  * Bridge これから実装するときに煩雑にならないように、実装するインターフェース？のようなもの。
* まあ、他のクラスを継承するのか、moduleとして取り込むのか、他のオブジェクトを保持（委譲）するのか、ケースによって使い分ける必要がある。
　

## 参考にしたサイト
http://www.ie.u-ryukyu.ac.jp/~e085739/java.it.7.html
http://www.techscore.com/tech/DesignPattern/Bridge.html/
Ractive.jsで 取得したデータ自身から発火して更に自発的に詳細データを取得


最近、[Ractive.js](http://www.ractivejs.org/)を使っていてとても楽しいので、初めての投稿にチャレンジです。変なところがあったらご教示ください。

##Ractive.jsで onLoad
####ページ読み込み後すぐに、json取得などのイベントを発火したい
テンプレートに書くイベントトリガはon-clickみたいな物はあるけど、on-loadって書くとこないなあ（考えてみれば当たり前なんでしょうけど）と思っていて、
最初は、Ractive.extend();でinit:〜に書かなきゃいけないのかなあとか訳の分からないことを考えたのですが、ぜんぜんシンプルにいけました。
ractive.fire()は、まずは自分のスコープ内で、this.fire()として使っていたのだけど、つまりグローバルスコープでもどこでも使えるということが分かりました。

```Javascript
var ractive = new Ractive({
	el: "#container",
	template: "#template",
	data:{}
});

//イベント登録
ractive.on({
	getData:function(){
		//ajaxなど何かしらの処理
	}
});
	
//グローバルですぐにメソッドをトリガー
ractive.fire('getData'):
```

##更に自発的に詳細データを取得
####onLoadで取得したデータ自身から発火して、keyから詳細を取得。
別のAPIなどからデータを取って来たりするのに使えるんじゃないかと。
データ取得などにはjQueryを使用し、例えば最初にkeyのみのこういうjsonを取得するとして、

```JSON:list.json
[{key:'aaa'},{key:'bbb'},{key:'ccc'},{key:'ddd'}]
```
別のURLからこういう詳細データを（実際にはJSONPなどで）取得する。

```JSON:detail.json
[
	{key:'ddd', time:'10:00'},
	{key:'aaa', time:'12:00'},
	{key:'ccc', time:'14:00'},
	{key:'bbb', time:'20:00'}
]
```

```Javascript
var ractive = new Ractive({
		el: "#container",
		template: "#template",
		data:{ myData:null }
});

//イベント登録
ractive.on({

	getData:function(){

		var self = this;

		$.getJSON(
			'http://sample.com/data/list.json',
			function(json){
				self.set('myData',json);
			});
	},

	getDetail:function(key){
	
   		var self = this;
		var datas = this.get('myData');

		$.getJSON(
			'http://api.com/data/detail.json',
			{key:key},
			function(json){

          		datas.forEach(function(data, i) {

					//キーが一致するデータとマージしてセット
            		(data.key === key) &&
              			self.set('myData.' + i, $.extend(data, json.data)); 

          		});
			});
	}

});
	
//observeでmyDataを監視し、各データ中のkeyが空ではなくなったらkeyを引数にgetDetailを発火
ractive.observe('myData.*.key',function(newVal){

	if(newVal !== null){
		this.fire('getDetail',newVal);
	}

}):

//ここで最初のデータを読み込む
ractive.fire('getData');
```
なんかこれだと無駄なことをやっているようですが、もっと複雑なことが簡単にできます。で、データを取得する前と後で表示を切り替えるのもRactiveなら簡単ですよね。
Xcode 6 Betaインストール後に、Titanium stadioを利用したい場合

Xocde 6 Betaをインストール後、Titaniumを動かそうとしたら、
iOSがビルドできなくなっている！！


どうやらTitaniumではデフォルト設定で
MAC内の最新のiOS SDKを参照するようになっており、
iOS8なんて知らないよ～ってなっているみたい。

というわけで解決方法は
設定でXcode5に向けてあげれば良い。
TitaniumのTerminalより下のコマンドを実行したらビルドできるようになります。


`sudo xcode-select -s /Applications/Xcode.app/Contents/Developer`
position:absoluteでもインライン要素だとtext-align:centerの影響を受ける

以下のdiv内のimgは、position:absolute を指定しているにも関わらず、divの真ん中あたりの妙な位置へ飛んでいきます。


```html:	
<div id="parent_block">
	<img src="picture.png" id="child_img" />
</div>
```

```css:
#parent_block {
	position: relative;
	text-align: center;
}

#child_img {
	position: absolute;
}
```

よく見るとdivには text-align:center の指定があります。
text-align プロパティはインライン要素に反映するので、当然ながらimgタグも影響を受けます（position 指定がなんであっても）。

なので、displayプロパティにblockを指定してあげると万事解決です。

```css:
#child_img {
	position: absolute;
	display: block;
}
```
fio-format で "EB map missing" が表示され失敗したとき

ioDrive Duo に fio-format コマンドでフォーマットをかけようとしたところ、 `Format failed: EB map missing.`と表示され失敗しました。

```
$ sudo fio-format /dev/fct1
Creating a standard block device of size 320.00GBytes (298.02GiBytes).
  Using block (sector) size of 512 bytes.

WARNING: Formatting will destroy any existing data on the device!
Do you wish to continue [y/n]? y
Formatting: [====================] (100%) /
Format failed: EB map missing.
```

## fio-sure-erase を実行してみる
`fio-sure-erase` コマンドで完全消去を試してみます。

```
$ sudo fio-sure-erase /dev/fct1
WARNING: erasing will destroy any existing data on the device!
Do you wish to continue [y/n]? y
Erasing blocks: [====================] (100%) /
Formatting drive: [====================] (100%) \
Erase successful.
```

その後サーバを reboot し、再度 `fio-format` を実行したところフォーマットすることができました。

```
$ sudo fio-format /dev/fct1
Creating a standard block device of size 320.00GBytes (298.02GiBytes).
  Using block (sector) size of 512 bytes.

WARNING: Formatting will destroy any existing data on the device!
Do you wish to continue [y/n]? y
Formatting: [====================] (100%) \
Format successful.
```
vimrcの設定を見直す

#### @yuroyoro さんのブログを参考にvimrcを整理した

# .vimrc

```
"vunlde.vimで管理してるpluginを読み込む
source ~/dotfiles/.vimrc.bundle

"基本設定
source ~/dotfiles/.vimrc.basic
"StatusLine設定
source ~/dotfiles/.vimrc.statusline
"インデント設定
source ~/dotfiles/.vimrc.indent
"表示関連
source ~/dotfiles/.vimrc.apperance
"補完関連
source ~/dotfiles/.vimrc.completion
"Tags関連
source ~/dotfiles/.vimrc.tags
"検索関連
source ~/dotfiles/.vimrc.search
"移動関連
source ~/dotfiles/.vimrc.moving
"Color関連
source ~/dotfiles/.vimrc.colors
"編集関連
source ~/dotfiles/.vimrc.editing
"エンコーディング関連
source ~/dotfiles/.vimrc.encoding
"その他
source ~/dotfiles/.vimrc.misc
"プラグインに依存するアレ
source ~/dotfiles/.vimrc.plugins_setting
```

# 

# 参考
* [dotfilesをGitHubで管理，vimプラグインをNeoBundleで管理する方法メモ](http://nwpct1.hatenablog.com/entry/2014/01/14/214128)
* [Vimでgitのログをきれいに表示する - derisの日記 を参考にカスタマイズしてみる](http://deris.hatenablog.jp/entry/2013/05/10/003430)
commonjs環境でユニットテストのひな形を自動生成する

commonjs環境(node/browserify)でこんなディレクトリだったとして

```
app/
  foo.coffee
  bar.coffee
```

雑にこういうテストコード生成したい

```
app/
  foo.coffee
  bar.coffee
test/
  foo.coffee
  bar.coffee
```

中身はこんな感じで(mocha)

```coffeescript
# require '../src/foo'
describe "src/foo", ->
  it "should be written"
```

というわけでつくった

[mizchi/hartman](https://github.com/mizchi/hartman "mizchi/hartman")

```
# インストール
$ npm install -g hartman

# 生成
$ hartman --src app --test test --ext ".coffee"

# テスト実行
$ mocha --compilers coffee:coffee-script/register --reporter spec


  src/foo
    - should be written

  src/bar
    - should be written


  0 passing (4ms)
  2 pending

```

拡張子coffeeとjsに対応してる
他は気が向いたら作る
:first-letterで１文字目が記号だとブラウザの挙動が違う件

[firefox　で　first-letter　にバグがあるらしい : ssswork](http://ssswork.exblog.jp/13877984)を見て、挙動確認用のページ作って確認してみた。

デモ：[:first-letterで１文字目が記号だとブラウザの挙動が違う件 - jsdo.it](http://jsdo.it/Ituki/6com)

#各ブラウザの挙動まとめ

挙動が色々ちがう・・・試したのが全角記号だから？

##IE7だけ思ったとおり（１文字目が赤字）の結果になる

##Chrome,Safari,IE8-11

- ■,●,★は思ったとおりの結果に
- ・,※,．は２文字目まで赤字になる **←！？**

##Firefox

- ・,※,．は２文字目まで赤字になる **←モダンブラウザの挙動と思えばなんとなく予想できた**
- ■,●,★は無反応 **←！？？ Firefoxでfirst-letterにバグがあるらしいとはこのこと？**