OmniAICreator/Qiita-1.07M huggingface dataset:
Rails 4 で Knockout.js を利用する手順


---

***[2014/08/14追記]***
Turbolinks が導入されていると上手く Knockout.js が動かなかったのですが、こちらの方の投稿を参考に Trubolink を無効にしたら動くようになりました。
http://qiita.com/kazz187/items/12737363d62b9c91993c

---

# 前提

- `knockoutjs-rails` という gem を使います。
	- https://github.com/jswanner/knockoutjs-rails
- 今回の環境
	- ローカルの Mac に 構築した Rails 環境に導入しています。
		- OS： `Mac OS X 10.9.4 (Mavericks)`
		- Ruby： `2.1.2`
		- Rails： `4.1.1`

# 導入手順

- `Gemfile` に次のように追記。

	```Gemfile
	gem 'knockoutjs-rails'
	```

- それらを `bundle install` します。

	```shell
	$ bundle install --path vendor/bundle
	```

	※ 私の場合は、`vendor/bundle` に gem を配置しています。適宜、読み替えてください。

- 次のようにインストールされました。

	![スクリーンショット 2014-08-11 18.22.32.png](https://qiita-image-store.s3.amazonaws.com/0/35733/088ce777-8937-0ddb-4ca6-8192819bcd59.png "スクリーンショット 2014-08-11 18.22.32.png")

- `app/assets/javascripts/application.js` に次のように追記します。

	```javascript:app/assets/javascripts/application.js
	//= require knockout
	```

- 以上で導入は完了です。

# 動作確認

- 画面をつくって動作確認するために、適当に Scaffold します。

	```shell
	$ ./bin/rails g scaffold Hoge name:string age:integer
	$ ./bin/rake db:migrate
	```

- Hoge モデル系向けの JavaScript ファイルを編集します(CoffeeScript記法)。
	- 対象ファイルは `app/assets/javascripts/hoges.js.coffee` です。
		- Konckout.js は 初心者なのですが、CofeeScrpit ファイル毎に即時関数のように書くものなんだろうか..
		- [こういう](http://stackoverflow.com/questions/15919993/knockout-with-coffeescript)感じで、モデルを Class で定義した方が、すっきりするのかもしれん。

		```coffeescript:app/assets/javascripts/hoges.js.coffee
		$ ->
		
		  TestappViewModel = ->
		    self = this
		    self.message = ko.observable("")
		    return
		
		  ko.applyBindings new TestappViewModel()
		  return
		```

- indexページの View も編集します。
	- 対象ファイルは `app/views/hoges/index.html.erb` です。

		```app/views/hoges/index.html.erb
		〜

		<br>
		<br>
		<input type="text" data-bind="value: message, valueUpdate: 'afterkeydown'">
		<br>
		<span data-bind="text: message"></span>
		```

- 編集したら、ローカルWEBサーバを起動して、

	```shell
	$ ./bin/rails s
	```

- ブラウザで `http://localhost:3000/hoges` にアクセスしてみます。

	![スクリーンショット 2014-08-11 19.14.13.png](https://qiita-image-store.s3.amazonaws.com/0/35733/bca4aea3-4546-ab30-2d4c-aa2af83c586d.png "スクリーンショット 2014-08-11 19.14.13.png")

- テキストフィールドに文字を入力すると、データバインディングで同じ文字列が下に表示されます。ちゃんと動いているみたいです^^

# おわりに

もともと Rails の Viewテンプレート(`.erb`ファイル)に Ruby の制御構文も埋め込めるので、JavaScriptベースのアプリケーションでない限り、フルスタックな JavaScript フレームワークよりも今回のような Knockout.js(とjQuery)ぐらいでちょうどいいのかなあと思いました。もうちょっと試してみます。
Mysql2::Error: Table ~~　already existsの解決法

※抜本的な解決方法ではないと思うので悪しからず。
Add_columnしたく、migrationをかけたら、以下のようなエラーが発生しました。

```
==  CreateHoge: migrating ============================================
-- create_table(:hoge)
rake aborted!
An error has occurred, all later migrations canceled:

Mysql2::Error: Table 'hoge' already exists: CREATE TABLE `hoge` (`id` int(11) DEFAULT NULL auto_increment PRIMARY KEY, `hoge_id` int(11), `date` date, `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL) ENGINE=InnoDB
```

ようは、migrationするときに、hogeテーブルを作成しようしたのだが、既にhogeテーブルあるよ！って起こられてるみたいです。

おそらく、hogeテーブルをmigrationかけずに作成してしまったのか？
よく原因が分からず、rollbackしてもdropされず。。。

やむを得ず、コンソール上で直接`ActiveRecord::Migration.drop_table(:hoge)`を叩いて、hogeテーブルを削除。

そして、Migrationかけると、、、

```
==  CreateHoge: migrating ============================================
-- create_table(:Hoge)
   -> 0.2134s
==  CreateHoge: migrated (0.2137s) ===================================

==  AddHugaToHoge: migrating ===========================
-- add_column(:hoge, :huga, :integer)
   -> 0.1057s
==  AddHugaToHoge: migrated (0.1058s) ==================
```

問題なくMigration出来ました。

※やる前はちゃんとバックアップをとって置きましょう。
・テーブルごとにバックアップをとるコマンド
` mysqldump -u ユーザー名 -p -t データベース名 テーブル1 テーブル2 ... > ダンプファイル名`
・復元するコマンド
`mysql -u ユーザ名 -p データベース名 < ダンプファイル名`
Swiftのクロージャと循環参照について．Capture Listの使い処．


関数やクロージャは，実行時にはただのオブジェクトインスタンス扱いなので，ARCで正しく解放されるように循環参照に気を付けよう，というのは理解できる．
では，どういった記述をした場合に循環参照になるのだろうか？　キャプチャリスト(Capture List)の使い処がいまいち分からなかったので調べてみた．

クラス内部にクロージャ（関数）として記述するのは以下の三種でしょうか．
1. クラス内で定義した関数（メソッド）
2. クラスのプロパティとしてのクロージャ
3. メソッド内で定義されたクロージャ

　
## クラス内で定義した関数（メソッド）

```swift
class A {
    var v: Int = 0
    func f() {
        [unowned, self] in     // <== 文法違反．inもキャプチャリストも書けない．
        return ++(self.v)
    }
}
```
メソッド（関数）定義は，文法的にはクロージャとは異なるため`in`はおろかキャプチャリストさえ書くことはできない．関数内部でselfを参照しているのに．これは，つまるところ言語仕様的には循環参照と見なさないということであろう．まあ，こんなのでいちいち陽に循環参照になってたら面倒でやっていられない．

　
## クラスのプロパティとしてのクロージャについて

```swift
class B {
    var v: Int = 0
    var f: () -> Int = { ++(self.v) } // <== 識別子selfを解決できないとエラー
}
```
プロパティに代入するクロージャ内で'self'を参照するとエラーになる．しかし，

```swift
class C {
    var v: Int = 0
    lazy var f: () -> Int = { ++(self.v) } // lazyを付けるとO.K.
}
```
のように`lazy`を付けるとselfを参照できるようになる！？
なぜこれでO.Kとなるのか理由を考えてみる．おそらくインスタンス初期化手順のためであろう．インスタンス化するとき，プロパティで参照してるオブジェクトが先んじて初期化される．この時点ではBのインスタンスはまだ初期化されていないので，先に初期化されるクロージャから`self`を参照できないのはうなずける．または，こうも考えられる．クロージャの静的スコープに`self`という識別子がそもそもない（コード上にそんな識別子はない）．
一方，`lazy`を付けると，その名の通り，後から必要に応じて初期化される．ゆえに，それが初期化される時点ではCのインスタンスはすでに存在し'self'を参照できる．処理系内部ではクロージャのスコープに'self'を追加しているのだろうと想像．ある意味，動的スコープっぽいのかな．
そして，Cのインスタンスとクロージャの初期化が独立しているがために，陽に循環参照が生じることになる．こういう場合にキャプチャリストが必要となる．

```swift
class D {
    var v: Int = 0
    lazy var f: () -> Int = {
        [unowned self] in // <== これを付けないと循環参照
        ++(self.v)
    }
}
```

　
## メソッド内で定義されたクロージャについて

```swift
class E {
    var v: Int = 0
    var g: (() -> Int)!

    func f() {
        g = {
            ++(self.v)
        }
    }
}
```
この例は素直にコンパイルも通るし実行もできる．(2)の場合と同様で，このクロージャはクラスEのインスタンスとは別個に後で初期化される（のであろう）．そしてこの場合も循環参照が生じるから下記のようにキャプチャリストは必須である．

```swift
class F {
    var v: Int = 0
    var g: (() -> Int)!

    func f() {
        g = {
            [unowned self] in // 必須！
            ++(self.v)
        }
    }
}
```
　
以上です．
要は，クラスのインスタンスと独立で（後で必要になって）初期化されるようなクロージャを定義するときに，そのクロージャ内で`self`（またはその他の参照型変数）を参照していて，かつ，クラスでもそのクロージャを参照しているのであれば，循環参照を防ぐためにキャプチャリストが必須となるわけでした．

上記の各クラスに`deinit {println("dealloc'ed")}`などを追加してメモリリークが起こるかどうかを確かめてみるとはっきり分かると思います．
Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい


## ゴール

Google Chrome拡張から、閲覧中のページにJavaScriptを送り込んで、そのページの`Window`オブジェクトにオブジェクトを追加する拡張を作る。なお、今回の成果物は[GitHub]で見ることができる。

## 1. 拡張を作る

ファイル構成は、マニフェスト、アイコン画像、2つのJavaScriptからなる。

```
├── content-script.js
├── embeded-script.js
├── icons
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   └── icon48.png
└── manifest.json
```

### content-script.js

ページを開いた時に実行するスクリプト。このスクリプトはChrome拡張の閉じた環境で実行されるので、ページの `Window`オブジェクトにオブジェクトを追加することはできない。そのため、ページに `<script>` タグを描画することで、`Window` オブジェクトを変更するスクリプトを送り込む。

```js:content-script.js
var injectScript;

injectScript = function(file, node) {
  var s, th;
  th = document.getElementsByTagName(node)[0];
  s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', file);
  return th.appendChild(s);
};

injectScript(chrome.extension.getURL('/embeded-script.js'), 'body');

```


### embeded-script.js

送り込まれるスクリプト。このスクリプトは `Window` オブジェクトを操作できる。

```js:embeded-script.js
window.MyEmbededProgram = {
  helloWorld: function() {
    alert("Hello World!")
  }
};

```

注意点として、送り込まれたスクリプトは拡張から提供されたと言え、ただのJavaScriptになるので、直接拡張の機能やAPIをコールすることはできない。これを解決する方法は次回で紹介するので、ここでは割愛する。


### manifest.json

ページにスクリプトを送り込みたいので、それができる設定を `manifest.json` に宣言する必要がある。まず、すべてのページで `content-script.js` が実行されるように `matches` を `<all_urls>` にする。`permissions` についても `<all_urls>` を設定しておく。次に、ページ上で拡張のJSを読み込めるようにするために、 `web_accessible_resources` に `embeded-script.js` を設定する。

```json:manifest.json
{
  "name": "Example 1: Embed Scripts to All Web Pages",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This is an example to embed scripts to all web pages",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content-script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "embeded-script.js"
  ],
  "permissions": [
    "<all_urls>"
  ]
}
```


## 2. 実行してみる

適当なウェブサイトに行き、インスペクタを開いたら、そこで `MyEmbededProgram.helloWorld()` を実行してみる。すると、「Hello World!」とアラートが出てくるはずだ。

![Example_Domain.png](https://qiita-image-store.s3.amazonaws.com/0/889/57bf92e0-f981-5b66-4e12-5f16d6253748.png "Example_Domain.png")


## Chrome拡張開発シリーズ

前回: [Hello Worldするだけの拡張を作りたい]
次回: ???


[GitHub]: https://github.com/suin/chrome-extension-tips/tree/master/01-embed-scripts-to-all-web-pages

[Hello Worldするだけの拡張を作りたい]: http://qiita.com/suin/items/2b31079056f1356257cb
IPython の豊富な機能を使いこなす

[IPython](http://ipython.org/) は非常に強力な対話環境で、探索的なデータ分析には欠かせません。対話的な操作環境からコードを実行することができ、インタプリタ言語の生産性を十二分に体感することができるでしょう。似たような環境として Ruby における [pry](https://github.com/pry/pry/wiki) が挙げられるかと思いますが、インタラクティブシェルの完成度においても IPython が一歩リードしているのではないかと思います。

## 最新の IPython を使う

IPython コミュニティは開発のスピードが速く、昨年 2013 年の夏にリリースされたバージョン 1.0 から今年 2014 年 4 月にリリースされた [IPython 2.0](http://ipython.org/ipython-doc/2/whatsnew/version2.0.html) までの間に 650 のプルリクエストがマージされ 400 のイシューと 4000 のコミットがされています。また現在は 3.0 系が開発中でそのロードマップは [GitHub](https://github.com/ipython/ipython/wiki/Roadmap:-IPython) で知ることができます。シングルコードベースでの Python 3.x 系のサポートなどさまざまな点で進化しており、セキュリティなども改善されているため、旧 1.x 系を利用しているならすぐに最新の 2.0 系にアップデートするべきです。執筆時点での最新版は 8/6 にリリースされ[セキュリティフィックス](https://github.com/ipython/ipython/pull/6249)がされたばかりの[バージョン 2.2](https://github.com/ipython/ipython/issues?q=milestone%3A2.2) です。

最新情報は[こちら](http://ipython.org/news.html)から確認できます。また、最新版へのアップグレードは次のようにおこないます。

```zsh
ipython --version # IPython のバージョンを確認する
pip install --upgrade ipython # 古ければ最新にアップグレード
```

また pip でインストールされたパッケージを、フリーズされたものを除いて最新にアップグレードするには次のようにします。

```zsh
pip freeze --local | grep -v '^\-e' | cut -d = -f 1  | xargs pip install -U
```

## 初期化スクリプト

Python ならいつもインポートするお決まりのライブラリがあると思います。例えば sys, os や numpy as np などです。

~/.ipython/profile_default/startup/ ディレクトリに IPython 起動時に実行したいスクリプトを入れておくと実行されます。なお、読み込み順はファイル名の辞書順なので GNU/Linux のデーモン起動スクリプトのように 00-first.py のように頭に番号を付けておくと管理しやすくなります。

```py3
import sys, os
import readline
import numpy as np
import scipy as sp
import pandas as pd
import matplotlib.pyplot as plt
```

最低でもこれくらいは書いておくと便利でしょう。

## イントロスペクション

オブジェクトの前または後に ? をひとつ付けると docstring が、 ?? を付けるとソースコードが表示されます。ソースコードは環境にもよりますがシンタックスハイライトされて表示されるので非常に強力です。使いたいライブラリの関数についてその都度コードを手軽に確認できるのは挙動を理解するのに役立ちます。

```bash
ipython
df = pd.read_csv("data.csv")
df?? # データフレームのソースコードが表示される
df.plot?? # プロット関数のソースコードが表示される (オプションなど確認可能)
```

## 既存コードの実行

書き途中のコード片をテストしたいがためにインタラクティブシェルにソースコードをコピペするのはあまりにナンセンスです。

IPython は %run コマンドで既存のソースコードを実行することができます。この % ではじまるコマンドはマジックコマンドと言われます。 % のあとにタブキーを押すことでどのようなマジックコマンドが存在するのかわかります。意味も名前だけ見てたいていは推測できるでしょう。

```py3
%run ~/source/your_code.py
```

上の例では your_code.py が実行されるだけでなく、クラス、変数などのオブジェクトがその後も IPython で使用可能になります。

### シェルにコピペをする場合

少々ダサいながらもコードをインタラクティブシェルに貼り付けたい場面というのはあります。筆者のおすすめは %cpaste を使う方法です。

```py3
%cpaste
# このあとコードを貼り付ける
```

## 履歴の保存

[前回](http://qiita.com/ynakayama/items/2c3782c82317f21596ba)も最後に紹介しましたが readline.write_history_file で履歴をファイルに保存できます。

```py3
readline.write_history_file("history.py")
```

またセッション全体の保存には %logstart でロギングをすると便利です。既定で ipython_log.py というファイルに履歴が保存されます。

## その他の豊富な機能

IPython には他にも紹介しきれないほどの便利な機能が充実しています。[本家のドキュメントを読む](http://ipython.org/ipython-doc/2/index.html)のが良いでしょう。
コンテンツの表示の順番を自由に変更する機能の実装方法

各日付けに紐づけたコンテンツの表示の順番を変更したいということで、右往左往しながら愚直に実装してみたので、その方法を記します。
※前提としてコンテンツをcreateするタイミングでは表示させる順番は特に考えていない。変更したいときに変更できれば良い。という希有なシチュエーションを想定して実装しました。笑


```ruby:content.rb
class Content < ActiveRecord::Base
  attr_accessible :titles, :body, :date, :contents_order
end
```
`:date`に配信したい日付けを格納し、`:contents_order`に表示したい日付けを格納します。

まず、createアクションをする際に、自動で表示の順番を持たせます。

```ruby:contents_controller.rb
def create
  @content = Content.new(params[:content])
  @content_num = Content.where("date = ?", @content.date).size
  @contents_order = @content_num+1
  if @content.save
    ・
    ・
    ・
  end
end
```

これで、その日付けに紐づけられてるコンテンツ数と同じ番号が`contents_order`に格納されていくので、ひとまずcreateされた順にコンテンツが表示されます。

これで良ければ、`content.where("date =?", content.date).order("date ASC")`などを行い、表示することでできます。
もし、変更したい場合は、editアクションから直接contents_orderに値を入れupdateすることで任意の順番にそのコンテンツを表示させることが可能です。

もちろん、もっとうまくやる方法があるかと思いますが、ひとまず自分は上記の方法で行いました。
Mac のターミナルのタブを1つであっても常に表示する

(2014-09-19 追記 >>>>>>>>)
単に見落としなのか最近のバージョンで追加されたのかは分かりませんが、
メニューバーを眺めてたらタブバーの表示／非表示を切り替えるオプションがありました。

```
View -> Show Tab Bar (Cmd+T)
```

日本語環境だと 表示 -> タブバーを表示 かな。これのチェックで簡単に切り替えられます。

(<<<<<<<< 追記ここまで)

ターミナルから以下のコマンドを実行し、ターミナルを再起動することでタブを常に表示する事ができる。

```
defaults write com.Apple.Terminal ShowTabBar 1
```

タブの有無でターミナルのウィンドウの高さが変化するので、自分のようにウィンドウを並べて表示するなどウィンドウのサイズが変わると困る人には有用かと。

（参考）[Mac Howtos](http://www.greenend.org.uk/rjk/tech/macbits.html)
Chrome拡張開発: Hello Worldするだけの拡張を作りたい


## ゴール

コンソールで「Hello World!」と出力するだけのGoogle Chrome拡張が出来上がる。なお、今回の成果物はGitHubの[suin/chrome-extension-playground]に置いた。

## 1. 必要最低限のファイルを作る

適当なディレクトリに、background.jsとmanifest.jsonとアイコン画像を作る。

```
├── background.js
├── icons
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   └── icon48.png
└── manifest.json
```

background.jsはHello Worldを出力するJavaScript。

```js:background.js
console.log("Hello World!");
```

manifest.jsonは拡張の情報をまとめたファイル。Chrome拡張を作るときに必須になる。

```json:manifest.json
{
  "name": "Example 0: Hello World in Console",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This is an example to print Hello World in Chrome console",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

```

ここの `background` はGoogle Chromeの[Background Pages]でスクリプトを実行するという宣言。Backgroupd Pagesはスクリプトを裏側でずっと実行できるようにするための仕組みで、Chromeが立ち上がっている間、ずっと実行しておきたい処理や、保持しておきたい状態を持つときに使う。

## 2. Chromeを開発者モードにして拡張を読み込む

ChromeのPreference→Extensionに行き、「Developer mode」にチェックを入れる。そうすると、「Load unpacked extension」というボタンが出てくるので、それを押す。

![Extensions.png](https://qiita-image-store.s3.amazonaws.com/0/889/00415c80-78d1-1dde-a7a8-da3d3efda910.png "Extensions.png")

Finderが開くので、manifest.jsonがあるディレクトリを選択して開く。すると、Extensionsに拡張がロードされて使える状態になる。


## 3. 実行結果を確認する

Background Pagesで出力した内容は、Extensionsの各拡張の「Inspect views」から確認することができる。

![Extensions 2.png](https://qiita-image-store.s3.amazonaws.com/0/889/c382c54a-44e0-515b-4447-b7abc1de29a1.png "Extensions 2.png")

開いてみると、Inspectorが開きConsoleのタブを開けば、「Hello World！」と出ているはずなので、確認してほしい。

![Developer_Tools_-_chrome-extension___naalkabolcajfkjgimpibgfggbhbnhma__generated_background_page_html.png](https://qiita-image-store.s3.amazonaws.com/0/889/e3643708-7fc8-1bca-1703-3b5b81a24c64.png "Developer_Tools_-_chrome-extension___naalkabolcajfkjgimpibgfggbhbnhma__generated_background_page_html.png")


コードを修正して実行しなおすときには、「Reload」のリンクを押して拡張を読み込み直す。


## Chrome拡張開発シリーズ

次回: [拡張からページにJavaScriptを送り込みたい](http://qiita.com/suin/items/5e1aa942e654bce442f7)

[Background Pages]: https://developer.chrome.com/extensions/background_pages

[suin/chrome-extension-playground]: https://github.com/suin/chrome-extension-playground/tree/master/00-hello-world-in-console
簡単！URLSchemeの設定

<h2>URLSchemeの設定</h2>
infoのURL Typesを選択
![スクリーンショット 2014-08-11 15.01.05.png](https://qiita-image-store.s3.amazonaws.com/0/48286/953c8752-7fa7-9dc5-20c2-3a921b21e12e.png)

① +からURLTypeを追加します。
② Identifierは一意なキーを入れます。com.~~.~~のやつをいれておけばokだと思われます。
③ URLSchemesで好きなURLSchemeを設定します。
sample,asampleのようにカンマ区切りで複数設定も可能。
④⑤はあまり気にしなくていいようです。

ここまでできたらビルドして、safariからURL入れるところに「sample://」と入力するとその設定したアプリが開くはず！！
開いたらちゃんと設定出来ています。

＜注意＞
URLSchemeは好きに設定できますが、他のアプリが設定してるURLScemeとかぶると自分のアプリが開かないことがあるそうです。

<h2>URLSchemeから起動したら</h2>
URLSchemeから起動すると

```objc
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL*)url;
```
が呼ばれるので

```objc:AppDelegate.m
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL*)url {
    if ([url.scheme isEqualToString:@"sample"]) {
       NSLog(@" url === %@ \n url.scheme === %@ \n url.host === %@ \n url.path === %@ \n url.query === %@", url, url.scheme, url.host, url.path, url.query);

        //なにかの処理

    }
}
```

これでURLSchemeで開いたときの処理をすることができます。
iOSのTweakでログを出力する方法

Logos Tweakで関数をhookするようなtweakを作っている時にそもそもxcodeのコンソールが使えないのでNSLogは無意味だと思っていたのですが、
オーガナイザー→Devices→console
でデバイスが吐くメッセージをコンソールから見ることが出来るようです。
sshでdevを転送＆インストールしたらUSBで接続すればNSLogがオーガナイザーのコンソールに吐かれます。（%Logとかでxcodeに出るのかとか思ってた）
js書けない人がmochaを触る

# 準備

## npm をどうにかこうにか入れる

多分入る。きっと入る。

## mocha をインストール
```
$ sudo npm install -g mocha
```
sudo じゃないとinheritsだかlru-cacheだかでエラーが出て入らなかった。
[公式](http://visionmedia.github.io/mocha/#installation) にはsudo無しで載っているので、そもそもnpmあたりの入れ方がマズってるのかもしれない。。

## chai もインストール
```
$ sudo npm install -g chai
```
必要っぽかったので入れた。こちらは [公式](http://chaijs.com/) には -g がついてない。
けど mochaと揃えたかったのでつけた。

## ちょっと休憩
関連コマンド：
```
$ npm ls -g //グローバルにインストールされたパッケージを確認
$ sudo npm uninstall -g mocha //アンインストール（こっちもsudoが必要だった）
```

## セットアップ
```
$ mocha init .
```
を実行すると、そこに

* index.html
* mocha.css
* mocha.js
* tests.js

が生成される。（中身は空）
ブラウザでテスト結果を表示する時に必要という噂。

## 1,2,3 Mocha! を写経する

[公式](http://visionmedia.github.io/mocha/#getting-started) 参照。

写経したら 
```
$ mocha
```
とやるだけで動く。
※実行した場所の直下のtestディレクトリの中のjsを全部やってくれる。
実行するjsを選びたい時は `mocha test/test1.js` みたいなのも可。

`var assert = require("assert")` の替わり？に
`var assert = require('chai').assert;` と書いてもいける。

mochaにはassertが無いからchaiとか使え、というのは公式にも他の記事にも書いてあって、そしたら前者の書き方では動かなそうだけどなんか動く。

# 自分で書いたjsをテストする（本題）

本体とテストは分けて書くものだと思ったのだが、test下のjsからどうやって関数を呼べばいいのか分からずすごく困った（undefined的なエラーになる）。
多分初歩的過ぎて書いてない？（あるいは知識が無さ過ぎて上手くググれない）
assertのサンプルコードから多分requireを使うんだろうというところからが長かったが`module.exports` （または `exports` ）なるものを使うとできる様子。

```foo.js
function sum(a,b){
  return a+b;
}
module.exports = sum;
```

```test/tests.js
var assert = require('chai').assert;
var sum = require('../foo.js');

describe('sum()', function(){
  it ('should return 5 when args are 2 and 3', function(){
    assert.equal(5, sum(2,3));
  })
})
```

実行結果：

```
$ mocha

  sum()
    ✓ should return 5 when args are 2 and 3 


  1 passing (6ms)

```

何かfunction毎に　`module.exports` とか書くの面倒な気がするので、何かいい方法があると思われる。が、今は無用の長物という説。

## 追記

まとめて出す時は以下？

```foo.js
function sum(a,b){
  return a+b;
}

function sub(a,b){
  return a-b;
}

module.exports = {
  sum: sum
  , sub: sub
}
```

```test/tests.js
var sum = require('../foo.js').sum;
var sub = require('../foo.js').sub;
```
ApacheでOpenSSLのセキュリティを強化する

# セキュリティランクの確認

OpenSSLを利用されている方は下記サイトでセキュリティランクを確認してみると良いでしょう。
https://sslcheck.globalsign.com/ja/

# apacheの設定

**/etc/httpd/conf.d/ssl.conf**などに下記を追加しましょう。

~~~bash
$ sudo vim /etc/httpd/conf.d/ssl.conf
SSLHonorCipherOrder ON  ##追記
SSLCipherSuite EECDH+HIGH:EDH+HIGH:HIGH:MEDIUM:+3DES:!ADH:!RC4:!MD5:!aNULL:!eNULL:!SSLv2:!LOW:!EXP:!PSK:!SRP:!DSS:!KRB5  ##追記
~~~

デフォルトと、設定した際の違いは下記コマンドで分かります。

~~~bash
[許可されてる暗号方式の確認方法]
$ openssl ciphers -v
 
[制限したときの暗号方式の確認]
$ openssl ciphers -v 'EECDH+HIGH:EDH+HIGH:HIGH:MEDIUM:+3DES:!ADH:!RC4:!MD5:!aNULL:!eNULL:!SSLv2:!LOW:!EXP:!PSK:!SRP:!DSS:!KRB5'
~~~

#設定した暗号方式の詳細

- !は暗号スイートを使わせない。
- -は暗号スイートを削除する。後ろで追加すれば使用することも可能
- +は暗号スイートの追加。

| 内容 | 設定 | 備考|
|:-----------:|:------------:|:------------:|
|SSLv2の排除|!SSLv2|v2は危険なので排除|
|40bitの暗号方式を削除|!EXP|米国輸出規制緩和により使用可能となった暗号化方式。非常に弱い|
|56bit, 60bitの暗号方式を削除|!Low|同じく非常に弱い|
|通信を暗号化しない方式を削除|!eNULL||
|通信の認証をしない方式を削除|!aNULL||
|メッセージ認証符号にMD5を使用するものを削除|!MD5|MD5は選択プレフィックス衝突攻撃に対し脆弱性が存在します|
|暗号方式にRC4を使用するもの削除|!RC4|RC4は解読が容易になるようなアルゴリズムが存在するため危殆化しています|
|匿名暗号方式を削除|!ADH|匿名なんて削除です|
|128bit以上の暗号方式を追加|+MEDIUM+HIGH||
|3DES暗号方式を追加|+3DES|RC4を削除するとWinXP + IEで接続出来なくなるため追加|
|ECDHEの使用優先度を上げる|EECDH+HIGH|一番強固なので上げる。利用する場合は、apache2.2だと対応してないので、2.3.3以上にバージョンアップしてください。|
|EDHの使用優先度を上げる|EDH+HIGH|次に強固なので上げる。|
|ケルベロス認証を削除|!KRB5|基本的には使用していないため|
|DSS(DSA)を削除|!DSS|RSAと違って、「通信の暗号化」はカバーしてるが、「ユーザ認証」を行っていないため、暗号強度が低い。|
|PSKを削除|!PSK|基本的には使用しない|
|SRPを削除|!SRP|基本的には使用しない|

# 2014/10/16更新：POODLE対策

SSLv3の脆弱性ですね。
下記を判断した上でPOODLE対策の設定を反映してください。

- TLS1.0 1.1 1.2のみの接続方式になります。<br>
（確認方法：$ openssl s_client -tls1_2 -connect example.com:443）
- firefoxはSSLv3で接続されるため、閲覧することが出来なくなります（修正パッチは11/25リリースのver34.0から。<br>
33.0で手動有効にして閲覧することは出来ますが、エンドユーザが全てやっているとは限りません。<br>http://security.slashdot.jp/story/14/10/15/0850246/SSL-3.0%E3%81%AB%E6%B7%B1%E5%88%BB%E3%81%AA%E8%84%86%E5%BC%B1%E6%80%A7%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8B）
- ガラケーはドコモ、ソフトバンクはTLS1.0をサポートして問題ないですが、auはSSL3.0のみなので閲覧することが出来なくなります。

~~~bash
### :!SSLv3を追加するだけ
$ sudo vim /etc/httpd/conf.d/ssl.conf
EECDH+HIGH:EDH+HIGH:HIGH:MEDIUM:+3DES:!ADH:!RC4:!MD5:!aNULL:!eNULL:!SSLv3:!SSLv2:!LOW:!EXP:!PSK:!SRP:!DSS:!KRB5
~~~
primary, secondary, その次は？

メインのサーバを「プライマリサーバ」、予備のほうを「セカンダリサーバ」なんて言いますね。
3番目以降はなんつーの？とふと思ったので、調べてみました。

|n| 英語 |
|---:|:----:|
| 1| primary |
| 2| secondary |
| 3| tertiary |
| 4| quaternary |
| 5| quinary |
| 6| senary |
| 7| septenary |
| 8| octonary |
| 9| nonary |
| 10| denary |
| 11| ? |
| 12| duodenary |


参考:
http://www.oxforddictionaries.com/words/what-comes-after-primary-secondary-tertiary

>The sequence continues with quaternary, quinary, senary, septenary, octonary, nonary, and denary, although most of these terms are rarely used. There's no word relating to the number eleven but there is one that relates to the number twelve: duodenary.

調べてはみたものの、正直使いどころがわからないｗ
「今ターシャリサーバまで死んでるけどクォータナリがなんとか生きてるよ」とか言うんだろうか。
Rails Assets で Rails 4 に Backbone.js をいれてみた


Rails 4 のプロジェクトで View部分の DOM 操作用途で [Backbone.js](http://backbonejs.org/) を試してみようと思い、どうせならと、ちょっと気になってた [Rails Assets](https://rails-assets.org/) を利用してみました。メモがてら、ここに試した手順を残しておきます。

ちなみに Rails Assets を使うと、本来は Bower で管理されているパッケージを、gem として管理できるようです。

# 今回の環境

- ローカルの Mac に 構築した Rails 環境に導入しています。
	- OS： `Mac OS X 10.9.4 (Mavericks)`
	- Ruby： `2.1.2`
	- Rails： `4.1.1`

# 導入手順

まず、[Rails Assets](https://rails-assets.org/) のサイトを見ると、次のように gem を指定する、とあります。

`gem 'rails-assets-BOWER_PACKAGE_NAME'`

[Bower](http://bower.io/) のサイトを見ると、Backbone.js のパッケージ名は `backbone` のようなので、`Gemfile` に次のように追記します。

```Gemfile
source 'https://rails-assets.org'

〜

gem 'rails-assets-backbone'
```

追記したら、`bundle install` を実行します。

```shell
$ bundle install --path vendor/bundle
```

- **結果：**

	![スクリーンショット 2014-08-11 16.14.56.png](https://qiita-image-store.s3.amazonaws.com/0/35733/258f459a-ad3b-aaf7-da4c-db99256c8e8b.png "スクリーンショット 2014-08-11 16.14.56.png")

バージョン `1.1.2` がインストールされたぽい。ついでに Underscore.js も。

次に、`application.js` に次の2行を追記します。

```app/assets/javascripts/application.js
//= require underscore
//= require backbone
```

いったん、ここで動作確認。ローカルWEBサーバを起動します。

```shell
$ ./bin/rails s
```

とりあえず、エラーは出てないらしい。

![スクリーンショット 2014-08-11 15.00.13.png](https://qiita-image-store.s3.amazonaws.com/0/35733/c7ac5125-f70e-5d0b-c606-ced3ccbec659.png "スクリーンショット 2014-08-11 15.00.13.png")

画面をつくって動作確認するために、適当に Scaffold します。

```shell
$ ./bin/rails g scaffold Hoge name:string age:integer
$ ./bin/rake db:migrate
```

ローカルWEBサーバを起動しなおし、ブラウザで `http://localhost:3000/hoges` にアクセスしてみます。エラーは出てなさそう。

![スクリーンショット 2014-08-11 16.35.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/8d4a2d05-715d-2160-cf6f-3b1874cd810d.png "スクリーンショット 2014-08-11 16.35.24.png")

indexページの JavaScript ファイルは `app/assets/javascripts/hoges.js.coffee` なので、ここに Backbone.js のスクリプトを次のように書きます。

```coffeescript:app/assets/javascripts/hoges.js.coffee
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

obj = new Backbone.Model()
obj.set name: "Hoge"
console.log "obj.name: " + obj.get("name")
```

ローカルWEBサーバを起動しなおし、ブラウザで `http://localhost:3000/hoges` にアクセスしてみます。

![スクリーンショット 2014-08-11 17.13.05.png](https://qiita-image-store.s3.amazonaws.com/0/35733/1b713b8e-2088-a2f3-f427-20fd7bf38eee.png "スクリーンショット 2014-08-11 17.13.05.png")

動いてるみたいです^^

# おわりに

同じようにして、AngularJS と Vue.js も導入できたのですが、Knockout.js はアセットパイプラインのパスのエラーが出て、上手くいきませんでした..
HaikuFinderを触ってみた


# きっかけ
まずタイトルからして訳わからん感じですが，きっかけは[Processing](https://www.processing.org/)のpython modeを探していた時でした．Python Modeを作っている人自体は沢山いますが，そのうちのProcessingの公式モジュール?一覧で出ていた[Python Modeを作成した人のウェブサイト](http://mrfeinberg.com/)をよく見ていました．すると彼は[俳句ファインダー](https://github.com/jdf/haikufinder)なるものを作っていた，という次第です．というわけで触ってみました．ちなみに俳句と言っても英語で，音節の数を数えているようです．

# 動かしてみた
## インストール
いたって通常通りです．

```
$ wget http://MrFeinberg.com/haikufinder-1.1.zip

$ unzip haikufinder-1.1.zip

$ cd haikufinder-1.1

$ python setup.py install
```

あとはREADMEにあるようなスクリプトをつらつらと書けばできる．．．．．．．．．はずでしたが，まず音節の並びが`5 7 5`となるような文書を見つけねばなりません．
いろいろさまよって，なんとか[これ](http://genkienglish.net/cinderella.htm)をみつけました．シンデレラです(笑)

## スクリプト
というわけでこんな感じになります．

```python:haiku_test.py
from haikufinder import HaikuFinder

text = ''' Once there was a gentleman who married, for his
second wife, the proudest and most haughty woman that
was ever seen. She had, by a former husband, two
daughters of her own humor, who were, ..(長いので略)'''

haikus = HaikuFinder(text).find_haikus()
for haiku in haikus:
    print haiku[0]
    print "    %s" % haiku[1]
    print haiku[2]
    print
```

こんなスクリプトを用意して，先ほどの`haikufinder-1.1/`下に置いて実行しましょう．結果はこの様になりました．



```
$ python haiku_test.py
Nothing was then heard
     but a confused noise of: "Ha!
how handsome she is!
```



です．
これだけです．とりあえずリズムの良いフレーズが取り出せますよっということですね．

## 日本語なら
1. まずはmecab等で分かち書き
2. 文章中の漢字もmecabで読み推定しておく
3. 日本語を文節ごとに切る(なんかツールある?)
4. `5 7 5`数える

ですかね．形態素じゃなくて文節で区切れるツールあると思いますが，詳しく調べていません．mecabの形態素解析は文節数最小をヒューリスティックに使ってるみたいなのできっとあると思います．では．
iOSデバイスとWindowsPCとのBluetooth間通信について

詳しくは以下のサイトを見ること．

http://blog.fenrir-inc.com/jp/2013/10/bluetooth-le-win81.html

http://ascii.jp/elem/000/000/801/801601/index-2.html

http://stackoverflow.com/questions/5629285/iphone-bluetooth-sdk-discover-android-windows-phone-7-devices-and-background

http://blog.fenrir-inc.com/jp/2012/01/how_to_search_as_programming.html

https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Game%20Kit%20API%20Bluetooth%20Windows

http://ww1.microchip.com/downloads/jp/DeviceDoc/70005113A_JP.pdf

http://www.slideshare.net/taiko19xx/gamekitbluetooth

http://ascii.jp/elem/000/000/661/661785/

http://hitoriblog.com/?p=15873

http://www.atmarkit.co.jp/fsmart/index/ios_sensor.html

http://www.atmarkit.co.jp/fsmart/articles/ios_sensor04/01.html

https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=iPad%20Bluetooth%20%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0

http://arkouji.cocolog-nifty.com/blog/2013/07/iphoneipadbluet.html
tarballからCDH5をインストール 〜zookeeper編〜

CDHをtarballからインストールするメモです。

----

* download

[こちら](http://www.cloudera.com/content/cloudera-content/cloudera-docs/CDH5/latest/CDH-Version-and-Packaging-Information/cdhvd_cdh_package_tarball.html)から

* crate user

```shell-session
[root@cdh5-zookeeper01] # mkdir -p /var/log/zookeeper
[root@cdh5-zookeeper01] # useradd -d /var/lib/zookeeper -r zookeeper
[root@cdh5-zookeeper01] # chown zookeeper:zookeeper /var/log/zookeeper
```

* extract files

```shell-session
[root@cdh5-zookeeper01] # tar xvfp CDH5/zookeeper-3.4.5-cdh5.1.0.tar.gz -C /var/lib/zookeeper/
[root@cdh5-zookeeper01] # chown -R zookeeper:zookeeper /var/lib/zookeeper/zookeeper-3.4.5-cdh5.1.0
```
WordPress をSSL運用すると管理画面でアップロードした画像が見れない

WordPressネタばかりで嫌だ・・・。１日１個おかしな点が見つかる・・・。

# Summary

- WordPress 管理画面をSSLで運用
- アイキャッチ画像を選ぶときに、アップロードした画像が見れない
- 管理画面がSSLなのに `img` タグの `src` が HTTP通信なのが原因（WordPress自体のバグ）
- さっさと直してくれよお願いだから。

# Details 
## 管理画面を SSL で運用（するよね？普通）

一応商業利用ですもの、管理画面はSSLにするじゃないですか。
もともとあまり考えられていないのか？SSLにすると何かしら事件が起きる WordPress ですが・・・

## 画像が見えない

よしきた。
管理画面に SSL を導入したその日、ログイン画面で CSS や画像が見えない事件が発生したが、それと同じ理由。

最近の（？）WEBブラウザは HTTPS の画面から HTTP通信しようとすると事前に止めてくれます。親切設計。

その時やった設定はこちら↓

```httpd.conf
...
DocumentRoot /root/to/wordpress
SetEnv HTTPS on  #これを追加
...
```

ELBの背後で80番しか受け取らないようにしているので、自分で環境変数を設定する必要があり。
wordpress 内に実は `is_ssl()` という関数があって、その中で環境変数を読んでくれます。

```wp-includes/functions.php
3367 function is_ssl() {
3368   if ( isset($_SERVER['HTTPS']) ) {
3369     if ( 'on' == strtolower($_SERVER['HTTPS']) )
3370       return true;
3371     if ( '1' == $_SERVER['HTTPS'] )
3372       return true;
3373   } elseif ( isset($_SERVER['SERVER_PORT']) && ( '443' == $_SERVER['SERVER_PORT'] ) ) {
3374     return true;
3375   }
3376   return false;
3377 }
```

基本的にはSSLかどうかの判定はこの `is_ssl()` を使ってやっていて、CSSや画像もSSL通信に変えてくれるのですが・・・。

画像が見れないとはどういう了見だ(#ﾟДﾟ)ｺﾞﾙｧ!!

アイキャッチ画像が見れない。
自分でアップロードした画像を「アイキャッチ画像」として選ぶのですが、その画像が見れない。

要素を検証すると、どっかで見た状態。
`<img src="http://xxx...">` 

(つд⊂)ｺﾞｼｺﾞｼ
(つд・)
(つд⊂)ｺﾞｼｺﾞｼ
(・д⊂)
なんでや！(#ﾟДﾟ)ｺﾞﾙｧ!!

## 調べた

こんな記事を見つけた↓
https://core.trac.wordpress.org/ticket/15928

WordPress の既存バグじゃねぇかよ！！！

３年前から議論してて未だに未対応って・・・。
4.0 で入れっからーじゃねぇよ(#ﾟДﾟ)ｺﾞﾙｧ!!

## 直した

使ってるテーマの `functions.php` に以下を追加。
※ちなみに添付されてる最新のパッチでは直りませんでした＼(^o^)／

```functions.php
// http => https  -----------------------------------------------------
function fix_ssl_attachment_url( $url ) { 
    if( is_ssl() ){
        $url = preg_replace('/^http:/', 'https:', $url);
    }   
    return $url;
}
add_filter('wp_get_attachment_url', 'fix_ssl_attachment_url');
```

もういい加減 WordPressネタやめたい・・・。
HTML で aタグを使ってるのに、矢印カーソルが出てこなくてなんでやねんと思った時

こんな感じに書いちゃうと・・

```
<a class="hogehoge">ここはリンクなの！</a>
```

何故かマウスオーバーしてもカーソルがポインタにならない。

正しくは

```
<a href="#" class="hogehoge">ここはリンクなの！</a>
```

href属性がないと、aタグでもポインタにならん。
JavaScript使ってページ制御してたりすると、地味にハマった・・

```
.clickable {
  cursor: pointer;
}
```
とか定義して、classに付けてやるか、ちゃんとhref属性書けるなら書く。

Bootstrap使ってて、なんでaタグ置いたのにカーソルポインタにならんのだ～
とBootstrapの他の定義を疑っていたが、全然関係なかった・・・
（どっかで```cursor : default;```やられてると思って一生懸命さがしてましたとさ；；）

- - -
参考リンク [An alternative to cursor:pointer is adding an inert href attribute for the <a](http://stackoverflow.com/questions/19479527/mouse-pointer-on-hover-of-twitter-bootstrap-dropdown-nav)
socket.ioをherokuで動かす時の注意メモ

```
heroku --verion : heroku-toolbelt/3.9.6 (x86_64-darwin10.8.0) ruby/1.9.3
node -v : v0.10.30
npm -v : 1.4.21
express --version : 4.2.0
```

socket通信のところで上手く挙動ができていないと思ったらコンソールに以下のエラーを吐いていました。

![スクリーンショット 2014-08-11 16.04.17.png](https://qiita-image-store.s3.amazonaws.com/0/7186/2684790e-f6bb-f2b9-5473-c907fe2cc390.png)

意味不明だったのでおもむろに検索をかけてみるとヒットしたのが以下の記事

http://stackoverflow.com/questions/21953102/ec2-with-socket-io

問題はindex.ejsの中で
```
var socket = io.connect('http://localhost:3000');
```
ともろにlocalhostと書いてしまっていたのが原因でした。

「It's a stupid error」
まさにその通り・・・
UITextViewで表示中の範囲を取得する方法

UITextViewで表示中のテキストの範囲(NSRange)を取得する方法を開示します。

~~~objc:Objective-C
CGPoint startPoint = textView.contentOffset;
UITextPosition *startPosition = [textView closestPositionToPoint:startPoint];
NSInteger location = [textView offsetFromPosition:textView.beginningOfDocument
                                       toPosition:startPosition];
CGPoint endPoint = startPoint;
endPoint.x += textView.frame.size.width;
endPoint.y += textView.frame.size.height;
UITextPosition *endPosition = [textView closestPositionToPoint:endPoint];
NSInteger length = [textView offsetFromPosition:startPosition
                                     toPosition:endPosition];
NSRange range = NSMakeRange(location, length);
~~~
Javaで自己署名証明書を許可する方法


Jenkins氏でSCMポーリングしようとしたら

```
Failed to connect to repository : sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target
```

とか言い出して出来ず。

調べてみるとキーストアに自己署名証明書を突っ込んで上げる必要があるらしい。

```
$ keytool -importcert -keystore cacerts -alias aws-stash -trustcacerts -file stash.crt
```


パスワードを聞かれたがそんなん設定した覚え無い・・・と思っていたらdefaultで"changeit"になっているらしい。

changeitで認証が通り無事、追加完了。
herokuにnodeのチャットアプリをデプロイした時のメモ

heroku --verion : heroku-toolbelt/3.9.6 (x86_64-darwin10.8.0) ruby/1.9.3
node -v : v0.10.30
npm -v : 1.4.21
express --version : 4.2.0

軽く１時間はハマったのでメモ。

デプロイした時にエラー
```
Error: Cannot find module 'indexof'
    at Function.Module._resolveFilename <module.js:338:15>
    at Function.Module._load <module.js:280:25>
    at Module.require <module.js:364:17>
    at require <module.js:380:17>
    at Object.<anonymous> </app/node_modules/socket.io/node_modules/socket.io-parser/node_modules/emitter/index.js:6:13>
    at Module._compile <module.js:456:26>
    at Object.Module._extensions..js <module.js:474:10>
    at Module.load <module.js:356:32>
    at Functin.Module._load <module.js:312:12>
    at Module.require <module.js:364:17>
```
このようなエラーがどうしても解決できなかった。

http://stackoverflow.com/questions/23987571/node-js-app-works-locally-but-heroku-says-missing-module
に書いてあるようにしてみてもダメ。

他に原因があるのではと
```json
  "engines":{
     "node": "0.10.x",
     "npm": "1.4.x"
  }
```
を見なおしてみたり、

```Procfile
web: npm start
```
に--productionを追加してみたり試行錯誤してもだめ。

解決したのは、エラー元（/node_modules/socket.io/node_modules/socket.io-parser/node_modules/emitter/index.js:6）をたどると
require('indexof')
だったので、dependenciesにindexofを追加してみた。

これで私は解決しました。

初めてのherokuへのnodeデプロイともあり、且つ初めてのnodeかつexpressだったので四苦八苦しました。
routeProviderを利用している時に特定のリンクをルーティングから除外する方法

AngularJSでrouteProviderで遊んでる時に、ファイルのダウンロードやら画像の直リンクやら
意図しないリンクまでルーティングに含まれてしまう問題の対処方法。

これで３時間位詰まった。。。~~おそらくBackboneJSでも通用する。~~しませんでした。

-----

問題
----
下記のようなルーティングを設定した時、
ng-app内の同一ドメイン内のすべてのリンクに対してルーティング処理が行われ、
PJAXに似た動作をするようになる。

```js:router.js
angular.module("app", ["ngRoute"])
.config([
  "$routeProvider",
  "$locationProvider",
  function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    return $routeProvider.when("/", {
      templateUrl: "/template/index.html"
    })
    .when("/page01", {
      templateUrl: "/template/page01.html"
    })
    .when("/page02", {
      templateUrl: "/template/page02.html"
    })
    .otherwise({
      redirectTo: "/"
    });

  }
]);
```

上記の指定では `/` `/page01` `/page02` へのアクセスを行った際に
所定の場所からテンプレートを取得し、ng-viewへ反映する。

ルーティングに該当しなかった場合は `/`へのリクエストとしてリダイレクトして処理する。

ここで問題となるのが、公開したアプリに下記のようなファイルをダウンロードさせるためのリンクや
画像を直リンクで表示したいといったような意図で設置したリンク。

```html
<a href="/download/hoge.zip">ダウンロードはこちら！</a>
```

残念ながらこの状態でリンクを設定すると、
AngularJSはリクエストをルーティングに組み込んで処理する。

実際どのように動作するかというと、
`/download/hoge.zip` をクエリとしてルーティングのマッチングを行う。
当然 `router.js` の内容に該当するルートはないので、`/`と同じ内容が表示されてしまう。

かと言って`route.js`のotherwiseを外したところで内容の取得ができなくなるだけなので
リンクをクリックするとng-viewは空になる。

どうすりゃええのん(´・ω・｀) 


解決方法
----
このような場合には下記のように、ルーティングをしてほしくないURLに対して
`target`を付加することで解決することができる。

例えばファイルのダウンロードのリンクは下記のようになる。

```html
<a href="/download/hoge.zip" target="_self">ダウンロードはこちら！</a>
```

また応用として、ルーティングに定義済みのURLでも`target`を付加すると
AngularJSのルーティング処理を意図して解除することができる。


```html
<!-- こっちはルーティングされる -->
<a href="/page01">PAGE01へ</a>

<!-- こっちはルーティングされずにページの更新がかかる -->
<a href="/page02" target="_self">PAGE02へ</a>
```

今回は同一ページ内で処理したかったので`target="_self"`を指定したが
もちろん新規ウィンドウで表示したいときは`target="_blank"`などを使うこともできる。


参考
----
- Bypass AngularJS router for some &lt;a&gt; tags
  https://coderwall.com/p/em4vua

- File download links with angulars UI-Router
  http://stackoverflow.com/questions/17253903/file-download-links-with-angulars-ui-router
Encode::decode('MIME-Header', $value) の挙動について

メールのヘッダのデコードに `Encode::decode('MIME-Header', $value)` を使っていたのだが、うまくいかないケースがでてきた。

```pl
use strict;
use warnings;
use feature 'say';
use Encode qw/encode_utf8 decode/;

# 実際のデータ
my $subject = "=?utf-8?B?44Ku44Ks44K344ON44OeIHdpdGggVS1ORVhUIOOBiueUs+OB?=
 =?utf-8?B?l+i+vOOBv+WujOS6huOBruOBiuefpeOCieOBmw==?=";

my $decoded = decode('MIME-Header', $subject);

say encode_utf8 $decoded;
```

```text:出力結果
ギガシネマ with U-NEXT お申\xE3\x81\x97込み完了のお知らせ
```

この subject は2行に分かれているが、どうやら「し」という文字がちょうど2行に分断されてしまっていて、別々にデコードされた結果を文字列結合したためこのようになっているっぽい。実際 `\xE3\x81\x97` は「し」に相当する。

```pl
print "\xE3\x81\x97"; # し
```

一方で、`MIME::Words` の `decode_mimewords($value)` を使うときちんとデコードできるっぽい。

```pl
use strict;
use warnings;
use feature 'say';
use MIME::Words qw/decode_mimewords/;
use Encode qw/encode_utf8 decode/;

# 実際のデータ
my $subject = "=?utf-8?B?44Ku44Ks44K344ON44OeIHdpdGggVS1ORVhUIOOBiueUs+OB?=
 =?utf-8?B?l+i+vOOBv+WujOS6huOBruOBiuefpeOCieOBmw==?=";

my $decoded = decode_mimewords($subject);

say $decoded; # なぜか encode_utf8 は不要
```

```text:出力結果
ギガシネマ with U-NEXT お申し込み完了のお知らせ
```

おそらく内部的に、utf8 でデコードする前に結合するか、後にするかの違いだとは思う。

`MIME::Words::decode_mimewords` よりも `Encode::decode('MIME-Header', $value)` が使いやすいし、精度も高いと思うのでこっちでなんとかしたいところだが・・・。`MIME::Words::decode_mimewords` は不親切だし・・・。

どなたか、`Encode::decode('MIME-Header', $value)` を使った解決策があればご教示いただきたいです・・・。
wordpressでスマートフォンとPCなどのデバイスを切り分けてキャッシュを実現する方法

WordpressプラグインのQuick Cacheを使います。
https://wordpress.org/plugins/quick-cache/

ただし旧版（無料）または新版Pro（有料）を使う必要があります。無料で利用したい方は旧版をインストールする必要があります。

こちらの設定などサイトが詳しいです。
http://www.hirok-k.com/blog/796.html


設定の中で「MD5 Version Salt」がありますが、そこで設定する値を私の場合はAndroidをAndroid.*Mobileに変更しています。AndroidタブレットをPC表示にするためです。

`((preg_match("{AdsBot-Google|Android.*Mobile|BlackBerry 9350|BlackBerry 9360|BlackBerry 9370|BlackBerry 9380|BlackBerry 9780|BlackBerry 9790|BlackBerry 9800|BlackBerry 9810|BlackBerry 9850|BlackBerry 9860|BlackBerry 9900|BlackBerry 9930|BlackBerry9500|BlackBerry9520|BlackBerry9530|BlackBerry9550|CUPCAKE|Googlebot-Mobile|bada|dream|froyo|iPhone|iPod|incognito|s8000|webOS|webmate}", $_SERVER["HTTP_USER_AGENT"])) ? "smartphone" : ((preg_match("{DoCoMo/|J-PHONE/|J-EMULATOR/|Vodafone/|MOT(EMULATOR)?-|SoftBank/|[VS]emulator/|KDDI-|UP\.Browser/|emobile/|Huawei/|IAC/|Nokia|mixi-mobile-converter/|DDIPOCKET;|WILLCOM;|Opera Mini|Opera Mobi|PalmOS|Windows CE;|PDA; SL-|PlayStation Portable;|SONY/COM|Nitro|Nintendo}", $_SERVER["HTTP_USER_AGENT"])) ? "featurephone" : ""))`

デバイスの切り替えには、Multi Device Switcherを使いテーマを分けています。
https://wordpress.org/plugins/multi-device-switcher/
Rubyで俺指向言語Qのプロトタイプ作った.

#バグ報告を頂ければ24時間以内に直します！

カモン-> [@gogo_tanaka](https://twitter.com/gogo_tanaka)

## 俺指向言語Q
fooo↑↑

http://q-language.org/ja/


## 動機

僕はただの数学/統計系の学部生で、RやMathematicaなどの言語を強いられる事が多いのですが、

RubyやHaskellやScalaなどのステキな言語を知っていると「ちょっとな〜」と思っておりましたところ、

突然「あ、新しい言語作らなアカン」という不可思議な衝動に駆られ

ガッと取り憑かれたように実装し、少し冷静になってQiitaを書いているのが今です.

フィードバックを頂きながら育てて行きたいと思います（コミッター絶賛募集中、ワイワイ楽しくやりたいです. アメちゃん差し上げるのでお願いします. ）


現在はコンパイラと４秒くらいで作ったインタプリタがあります.


## ポリシー

一番大きな観念としては

###「紙とペンの感動をキーボードで」

です.


後々の可読性や保守性などはどうでもよくて、

「その瞬間（コードを書いている瞬間）の気持ちよさ、心地よさ、そしてその返値を楽しむ事」

を追求しました.


例えばRで行列を表現しようとすると

```
matrix(c(1, 2, 3, 4, 5, 6), 2, 3, byrow = TRUE)
```

こうなります.

まあ細かいシンタックスは各論も各論なんでいいっちゃいいんですが、僕は書きたくないです.


頭に浮かんだモノをその熱が冷めないうちにアウトプット出来る事が大事だと考えています.



またもう一つ、このQ言語は現在コンパイル先をRとRubyの２通り選べます.

行列やベクトルや数式を抽象化して出力に関しては粗結合に設計しているので

（抽象化されたモノを各言語に落とすAPIを書くだけで良い）

複数言語対応も割と簡単に行えると思えます.

Q言語を書けばどの言語、環境でも動く. ステキじゃないでしょうか.


## なぜRuby

1. コミュニティが大きく反応が得られやすいと思った

2. 僕自身Rubyがいちばんいじれるのでアイディアをプロトタイプに落としやすかった

3. Rubyが好きだった
（Ruby上での数式/統計処理を盛り上げたいと思った）

いい感じになってきたらHaskellで全部実装し直したいなと思ってます.

## Qという名称の由来

R言語の前進はS言語


## 仕様
特にちゃんと説明しませんが

紙面上で数学をする感覚そのものが仕様です

「Hello World!」など出力している時間は無駄です.

（以下はインタプリタに対する入力と出力を淡々と載せてます）

### 微分

```
d/dx(cos(x))
=> ( - sin( x ) )

d/dx(log(x))
=> ( 1 / x )

d/dy(y ** 2)                        
=> ( 2 * y )

d/dz(e ** z)                        
=> ( e ** z )
```

### 積分

```
S(log(x)dx)[0..1]
=> - oo

S( sin(x)dx )[0..pi]
=> 2.0

S( cos(x)dx )[0..pi]                       
=> 0.0
```


### Matrix, Vector

```
(1 2 3; 4 5 6)
=> (1 2 3; 4 5 6)

(1 2 3; 4 5 6) + (1 2 3; 4 5 6)
=> (2 4 6; 8 10 12)

(1 2 3; 4 5 6) * (1 2 3)
=> (14 32)
```

#### 関数
##### * 関数についてver 0.0.141以前にバグがありました. すみませんでした.
こんな感じ.

```
f(x, y) = x + y

f(2, 2)
=> 4

g(x) = x ** 2

g(2)
=> 4
```



ちなみに引数名は2文字以上を受け付けていません.

（；゜０゜）「２文字以上を受けつけてない！？」

また関数名は`f, g, h` のみしか受け付けておりません.

（；゜０゜）「！？」

（今後検討の余地あり）

この言語は別に大きなアプリケーションを複数人で作ることなどは全く想定していなくて、

「紙面上で数式処理する感覚に近いものをプログラミング上で表現する」に基づいて

可読性は自分のためのみで、その瞬間だけあればいい.

あえて無駄な自由を除く事で大きな自由を勝ち取ろうという信念があります



ちなみにコンパイラを使うと

`(1 2 3; 4 5 6)`

はこれはRと

`matrix(c(1, 2, 3, 4, 5, 6), 2, 3, byrow = TRUE)`

Rubyの

`Matrix[[1, 2, 3],[4, 5, 6]]`


に相当ます.

### Vector

こんな感じ

`(1 2 3)`

これはRの

`c(1, 2, 3)`

これはRubyの

`Vector[1, 2, 3]`

に相当します

### List

こんな感じ

`{name: “Gogotanaka”, age:  21, birth: (1992 8 10) }`


これはRの

`list(name="Gogotanaka", age=21, birth=c(1992, 8, 10))`

 
に相当します.

## 使い方

Rubyが動けば動きます.

gemの管理などはよしなにやって下さいませ.

`gem install qlang`

これで `qlang` コマンドが使える様になります.

（`q`だと汎用性高すぎるので避けました.）

### Rにコンパイル
`qlang -c -R foo.q`


### Rubyにコンパイル
`qlang -c -Ruby foo.q`

### 対話モード

コンパイラの時点で力つき、Rubyの処理を間借りして４秒くらいで作りました.

`qlang -i`


この新言語Qは


### PRやご鞭撻待ってます

僕はただの数学畑の人間でCSの深い知識もなければ

字句解析や構文解析はWikipediaで調べたくらいなので、

この辺りに深い見識をお持ちの方のPRやご鞭撻待ってます.

あと、Rubyでゴリゴリと作ってしまったのでリファクタやテストも相当に必要です.

ドキュメントの拡充も

ふう...

お後が宜しいようで.


### 追記（8/20）

http://qiita.com/gogotanaka/items/22f7a87ea6d65a0eff46

v0.0.14142135がリリースされました.

多くのバグフィックスと３つのfeatureを含んでいます.
JS: base64文字列をBlob形式のFileに変換する

##■概要
base64文字列で表現されたImageをUnit8Arrayコンストラクタ・Blobコンストラクタ・atobメソッドを利用して、Blob形式のfileに変換する方法。

##■コード

```js:code
//引数はbase64形式の文字列
function toBlob(base64) {
    var bin = atob(base64.replace(/^.*,/, ''));
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
    }
    // Blobを作成
    try{
        var blob = new Blob([buffer.buffer], {
            type: 'image/png'
        });
    }catch (e){
        return false;
    }
    return blob;
}
```

##■参考
https://developer.mozilla.org/ja/docs/Web/API/window.atob
https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays/Uint8Array
https://developer.mozilla.org/ja/docs/DOM/Blob
JS: File周りの実装を判別する方法

##■概要
対象ブラウザにfile関連のAPI実装がなされているか判定を行う方法をまとめた。

##■File API が利用できるか判別
クライアントのfileの読み込みやfile情報取得を行うためのAPIが実装されているか確認する。

```js:checkFileAPI
if (window.File) {
    // File APIに関する処理を記述
    config.checkMethod("File APIが実装されてます。");
    return true;
} else {
    config.checkMethod("本ブラウザではFile APIが使えません");
    return false;
}
```
※上記でFileAPIの実装は確認できるが、versionによって差異があるため下記の様に実際に利用するメソッドやプロパティを含むとより確実となる。

```js:checkAllFileAPI
if (window.File && window.FileReader && window.FileList && window.Blob) {
    // File APIに関する処理を記述
    config.checkMethod("File APIが実装されてます。");
    return true;
} else {
    config.checkMethod("本ブラウザではFile APIが使えません");
    return false;
}
```

##■FormからFileを送信できるか判別 
formからfileが選択可能か判別する。iOS6未満ではブラウザのformからファイルをアップロードする事が不可能なので、その判別をする。OSのversionで判別しても良いが、この方が確実且つ、なんのための判別か視認性が向上する。

```js:formTypeFile
var el = document.createElement("input");
el.type = "file";
if(!el.disabled){
    config.checkMethod("Form Fileが実装されてます。");
    return true;
}else{
    config.checkMethod("Form Fileが実装されていません。");
    return false;
}
```

##■ajaxでfileをblob形式・arrayBuffer形式で取得できるか判別
XMLHttpRequest 2 の仕様に含まれる、blob形式もしくはarrayBuffer形式でのfile取得が可能かを判別。
FileAPIやBlobコンストラクタと併せて様々な用途が期待できる。

```js:checkAjaxBlob/arrayBuffer
var xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);
try{
    xhr.responseType = "blob";
    config.checkMethod('XMLHttpRequest に arrayBuffer が実装されています。');
    return true;
}catch(e){
    config.checkMethod('XMLHttpRequest に arrayBuffer が実装されていません。');
    return false;
}
```

##■BlobコンストラクタAPI が利用できるか判別
バイト配列からBlob形式のfileを生成するためのコンストラクタを利用できるか判別。
バイト配列からfileに変換してajaxで投げたり、クライアントに保存したりと様々な用途が期待できる。

```js:checkBlobConstructor
if (window.Blob) {
    config.checkMethod("new Blobが実装されてます。");
    return true;
} else {
    config.checkMethod("本ブラウザではnew Blobが使えません");
    return false;
}
```

##■実装状況
http://caniuse.com/#feat=fileapi
http://caniuse.com/#feat=filereader
http://caniuse.com/#feat=blobbuilder
http://caniuse.com/#feat=xhr2
Mac & MySQL & Java(JDBC)で文字化けした場合

この間までWindowsで動いていたアプリが、MacのJava環境で文字化けした。

MySQLのDBはUTF8で作成
Javaの文字コードはUTF-8

MySQLのmy.cnfに下記の定義を記述することで解決。

`[client]
default-character-set=utf8
[mysqld]
character-set-server=utf8
[mysqldump]
default-character-set=utf8
[mysql]
default-character-set=utf8`

以下のMySQLクライアントで、設定を確認すること。
`mysql> show variables like 'char%';`

| Variable_name            | Value                                                  |
|:-------------------------|:-------------------------------------------------------|
| character_set_client     | utf8                                                   |
| character_set_connection | utf8                                                   |
| character_set_database   | utf8                                                   |
| character_set_filesystem | binary                                                 |
| character_set_results    | utf8                                                   |
| character_set_server     | utf8                                                   |
| character_set_system     | utf8                                                   |
| character_sets_dir       | /usr/local/mysql-5.6.19-osx10.7-x86_64/share/charsets/ |
Cygwinメモ

## 環境変数

### PATH

Bash起動後に環境変数PATHで重複する項目があったので原因を調べてみた。Windowsのシステム環境変数のPATHとユーザー環境変数のPATHの両方の値がBash起動時にPATHに追加されているようだ。ユーザー環境変数のPATHから重複したシステム環境変数のPATHの値を削除したら。重複がなくなった。(2014-08-11)
メモ：Debug.Logに色を付ける（RGB指定）、シンボル設定

しょっちゅう忘れるのでメモっておく

color と < の間のスペースは削除してください。
なんかHTMLとして認識されるのでスペース開けるしかなかったです。

Debug.Log("< color=green>Awake< /color>");
Debug.Log("< color=blue>Awake< /color>");
Debug.Log("< color=red>Awake< /color>");
Debug.Log("< color=yellow>Awake< /color>");

●RGB指定
Debug.Log("< color=#33ccff>OnClick()</color>");

●シンボルも付けておこう

*#if DEBUG_LOG_DISPLAY*
	Debug.Log("< color=green>Awake< /color>");
*#endif*


■シンボル設定
Build Settings->Player Settings->
           Other Settings->Scripting Define Symbols
EclipseでTomcatサーバを立ち上げる時にOutOfMemoryになるときの対処法

EclipseでTomcatを立ち上げる時にOutOfMemoryになる場合は下記をためす。

1. Run → Run cofigurations を選択。
2. 「Apache Tomcat」 → 「Tomcat v7.0 Server at localhost」を選択。
	 ※ 使用しているTomcatのバージョンに置き換ること。
3. Argumentタブで VM argumentsの最後に下記を追加。
```
-Xms1024m -Xmx1024m -XX:MaxNewSize=1024m -XX:MaxPermSize=1024m
```

ここのメモリーの数値は適宜決めてください。

これでTomcatサーバを起動できれば、OK。

参考にしたサイト
http://d.hatena.ne.jp/necoyama3/20090610/1244652868
Rails 4.1 で Spring を有効にしたメモ


[Spring](https://github.com/rails/spring) は、Rails 4.1 で標準となったプレローダで、`rails` `rake` コマンドを早くすることができます。

`rails new` した初期状態で、次のように `Gemfile` に記載されています。

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-08-11-12.53.17.png)

ただ、`bundle install` して gem はインストールされていても、そのままだと `rails` `rake` コマンドに Spring が適用されていません。ですので、使う場合は次のようにします。

```shell
$ bundle exec spring binstub --all
```

すると、`bin/spring` が生成されると共に、`bin/rails` `bin/rake` が次のように上書きされます。

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-08-11-12.51.34.png)

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-08-11-12.51.57.png)

![](http://staffblog.yumemi.jp/wp-content/uploads/2014/08/スクリーンショット-2014-08-11-12.52.13.png)

あとは普通に `./bin/rails` や `./bin/rake` コマンドの実行時に自動で Spring が適用されているので、意識せず Spring の恩恵を受けることができます^^

# ほか

[自社のブログ](http://staffblog.yumemi.jp/)にも投稿しました。
メモ：SourceTreeで自分のブランチへマージ

Gitでパニックになりつつあるので、手順を整理。

①リモートブランチと対になっているローカルブランチを
　ダブルクリックし、カレントブランチとしてからフェッチを実行
②プルを実行
③自分のブランチを選択してダブルクリックし、
　カレントブランチとする。
④　①のローカルブランチを選択して右クリックし、
　「現在のブランチに①ブランチをマージ」をクリックして
　マージする。

これで元のブランチが汚れず自分のブランチへ最新がマージされるはず。

ログを追加して解析しているだけなので自分のブランチへ最新ソースが
反映されればOK


誤った点があればご指摘ください。
Git始めたばかりで各部位の名前がわかっていない。
セガらしいTwitterアイコン105種プレゼント画像をwgetで一括ダウンロードする

[おかげさまで10万フォロワー達成！感謝！まったくセガらしいTwitterアイコン100種プレゼントキャンペーン｜株式会社セガ](http://sega.jp/sns/201408/) からアイコンを画像を一括ダウンロードする。

```bash
wget http://sega.jp/sns/201408/img/{001..105}.png
```

以上。
pluckが常に最速とは限らない

属性としてアクセス可能にした関連テーブルはキャッシュされるが、pluckを使うとそのキャッシュが使用されない。

```rb
class Member < ActiveRecord::Base
  accepts_nested_attributes_for :groups
# で
m = Member.first # membersからSELECT
m.groups # members inner join groups なクエリの結果がキャッシュされる
m.groups.map{|g| g.id} # 上記の結果からidの配列が作成される
m.groups.pluck(:id) # クエリが再発行される
```