OmniAICreator/Qiita-1.07M huggingface dataset:
Ansibleの基礎

##CentOS6での利用方法

CentOS(ホスト) -> CentOS(リモート側)

##予備知識
AnsibleはSSHでリモート側にログインしてコマンド類を叩く設計になっています。
そのため、リモート側でSSHログインができるようにしておきましょう。
（念のため、ログインするユーザと、コマンドを実行するユーザを別にすることも可能です）

## インストール
```
rpm -Uvh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm

yum install ansible -y
```

## 実行確認
アクセス先のホストは192.168.1.20、アクセスユーザはrasennとします。
鍵認証でアクセスするなら（パスワードなしsshができれば）`--ask-pass --ask-sudo-pass`は必要なく、パスワードも要求されません。
(マニュアル見ると-kで2つの代用できるように書いてありますが、sudoが必要な場合にはできませんでした。)

```
echo 192.168.1.20 > hosts

ansible 192.168.1.19 -i hosts  -m ping -u rasenn --ask-pass --ask-sudo-pass
```

```実行結果
SSH password: 
192.168.1.20 | success >> {
    "changed": false, 
    "ping": "pong"
}
```

コマンドの内容としては、下記のとおりです。
ansible ホスト　-i ホストリストファイル -m 実行モジュール -u ユーザ 



## playbookを利用した実行
playbookを利用した実行には２つのファイルが必要になります。

* ホストファイル
* playbookファイル


#### ホストファイル書き方
リモート側のホスト名を記載します。グループ単位で記載が可能です。
下記の例では「gluster-servers」と「hadoop-servers」の２つのグループを記載しています。

```hosts
[gluster-servers]
192.168.1.20
192.168.1.21
192.168.1.22

[hadoop-servers]
192.168.1.30
192.168.1.31
192.168.1.32
```

#### playbookの書き方

yaml形式でかけます。最初のhostsはhostsファイルで記載したどのグループを対象にするかを記載しています。
後はだいたいわかると思うので省略。

#### playbookファイル
```simple-playbook.yml
- hosts: gluster-servers
  sudo: yes
  tasks:
    - name: be sure glusterfs-fuse is installed
      yum: name=glusterfs-fuse state=installed

    - name: be sure glusterfs is installed
      yum: name=glusterfs state=installed

    - name: be sure httpd is runnning and enabled
      service: name=httpd state=running enabled=yes

```


#### 実行コマンド
実行は下記の通り行います。
他にもいろいろオプションはありますが、シンプルに行って下記の感じです。


```
ansible-playbook simple-playbook.yml -i hosts  -u rasenn --ask-pass --ask-sudo-pass
```

上記のコマンドでhosts内に書かれたgluster-serversにのサーバにyumで色々入ります

簡単な補足をするとiオプションは読み込むhostsファイルを指定し、-uはユーザを指定します。--ask-passはsshログインのパスワードをキーボード入力する、--ask-sudo-passはsudoパスワードをキーボド入力する、という指定になります。

パスワード無しSSHログインが可能な場合は--ask-passは不要ですが、立ち上げて壊すVMにいちいち鍵なしログイン設定をするのが面倒なので、２つをつけました


とりあえず、基本はこんなところでしょうか？
playbookの書き方を覚えると色々便利な気がします。
面倒なのでとりあえずここまでで。

(しかしchefと比べて気軽だなおい。。。）

[参照]
http://devopsu.com/guides/ansible-centos-fedora.html
EclipseのTemplates機能（Playframework2 Java Model.Finder）

[自分のブログ](http://d.hatena.ne.jp/shiraji/ "しらじ")からQiitaに乗り換えようか考え中。。。一旦、Qiitaに投稿してみてから考えよう。

ということで、すんごいちょいネタから。

EclipseのTemplate機能を使って、PlayframeworkのModelのFinderを作ってみる。

 * Preference > Java > Editor > TemplatesでNew...ボタンをクリック
 * 「Name」に「find」
 * 「Context」に「Java」
 * 「Description」に「Playframework Model.Finder」
 * 「Pattern」に以下を入れる

```java
public static Model.Finder<${IDclass}, ${enclosing_type}> find = new Model.Finder<>(${IDclass}.class, ${enclosing_type}.class);
${:import(play.db.ebean.Model)}
```
 * 「OK」ボタンをクリック

![4.png](https://qiita-image-store.s3.amazonaws.com/0/20058/a5e0ee8e-f548-758b-c145-df6a551e7ad1.png)


これで、PlayframworkのModel.Finderを書く時に「find」とタイプすれば、コンテントアシストに表示される。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/20058/ecfe1cdb-22fa-2b0a-235a-cb8610f8fc28.png)

選択するとこんな感じに
![2.png](https://qiita-image-store.s3.amazonaws.com/0/20058/95e2b962-e902-345f-63d6-b07c104ff6e4.png)

このTaskクラスの場合、IDがLongなので```IDclass```をLongに書き換えれば、２つあるIDclassがLongになり、完了。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/20058/990b3edd-8686-7bed-cf4f-9e8f70cdf22c.png)
pryのbinding.pryでループ処理のデバッグ中に強制終了したいときは!!!が便利!!!

知らなかったのでメモ

ループ処理の中でbinding.pryしてしまっているときなどに、

```
[1] pry(Hoge)> !!!
```

で終了。
ループ回数分```ctrl + D```する手間が省けました。

参考
https://twitter.com/Yukimitsu_Izawa/status/301547559439192067
https://github.com/pry/pry/wiki/State-navigation#exit-the-program-completely
関数


## 関数の定義と呼び出し

関数は次のように定義する。(下の様なイメージ)

```js
function 関数名(引数, 引数, 引数) {
	文;
	文;
	文;
}

```

例1

```js
// 関数の定義
function add() {
    var a = 10;
    var b = 20;
    var result = a + b;
    document.write(result);
};

// 関数の呼び出し
add(); //=> 30

```

•オブジェクトのプロパティとして定義する場合
以下の様になる。

```
var person = {
	name: '美浜ちよ',
	age: 10,
	say: function() {
	document.write('ともちゃん今日は！');
	}
};
// 関数の呼び出し
person.say(); //=> ともちゃん今日は！
```

![関数00.png](https://qiita-image-store.s3.amazonaws.com/0/35975/9cc6621e-2512-689a-fbd7-2e909ce89d7a.png "関数00.png")

## 引数
引数とは、「関数に渡すことが出来るデータ」のこと。
以下の場合`add(a, b)`の`a`と`b`が「引数」です。

実際に引数を使った関数とその呼び出しです。

```js
// 関数の定義
function add(a, b) {
    var result = a + b;
    document.write(result);
};

// 関数の呼び出し
add (1, 1); //=> 2
add (10, 20); //=> 30
```

![引数.png](https://qiita-image-store.s3.amazonaws.com/0/35975/7a80daac-8f85-954d-99b9-83d259fbe658.png "引数.png")

•重要なのは、add関数の場合は引数に2つの数値を受け取るので、呼び出すときも2つの数値を指定する必要がある事。
もしこの数を間違えると？
①引数をなしで呼び出すと？

```js
// 関数の定義
function add(a) {
    document.write(a);
};

// 関数の呼び出し
add (); //=> undefined
```

②引数の数が少なかったり、無理な数値で呼び出すと？

```js
// 関数の定義
function add(a, b) {
    var result = a + b;
    document.write(result);
};

// 関数の呼び出し
add (1); //=> NaN(Not a Number)がでる
```

![引数2.png](https://qiita-image-store.s3.amazonaws.com/0/35975/6e2c3606-bad3-e095-ea41-3ebe867d77c1.png "引数2.png")


## 戻り値の使用


↓が「関数の定義-戻り値あり」のイメージである。

```js
// 関数の定義
function 関数名() {
	処理;
	return 戻り値;
}
// 定義した関数の呼び出し
戻り値を入れる変数名　= 関数名();
```

先ほどの引数を使った例と比べてみましょう

```js
// 関数の定義
function add(a, b) {
    var result = a + b;
    document.write(result); // add関数の中で出力されてる
};

// 関数の呼び出し
add (1, 1); //=> 2
add (10, 20); //=> 30
```
下の場合は、add関数の中で出力されないで、いったん値が返され、それを改めて「result1」や「result2」に代入している事です。

```js
// 関数の定義
function add(a, b) {
    var result = a + b;
    return result; // 戻り値を設定する事で、add関数は引数に指定した数値を「足し算して返す」という関数になる
};

// 関数の呼び出し
var result1 = add (1, 1);
document.write(result1); //=> 2

var result2 = add (10, 20);
document.write(result2); //=> 30

var result3 = add (result1, result2);
document.write(result3); //=> 32
```

![戻り値.png](https://qiita-image-store.s3.amazonaws.com/0/35975/fb5b8463-471c-73d0-c819-96d6d47ac515.png "戻り値.png")

関数には「何かを返す関数」と、「処理だけ行って何も返さない関数」がある。
例えば`document.write`は「ドキュメントとして書き出す」という処理だけ行って何も返さない関数です。(正確にはundefinedが返ります)
任意の静的ファイルをPHPで動的に処理する


想定ケースとしては、静的なHTMLとしてコンテンツを公開してるけど、部分的に動的に値を生み込みたいなあというものです。
（まだ試してませんが、もしかして JavaScript や CSS など静的リソースファイルに、環境に依存する値や接続情報などを動的に値を埋め込むにも使えるかもしれません。こんど試してみよう^^;）

WEBサーバが Apache の場合、`mod_rewrite` を用いて次のように実現できます。

```apache:.htaccess
RewriteEngine on

RewriteRule ^test\.html$ - [L,H=php5-script]
```

この例だと、`test.html` に対応するコンテンツハンドラに PHP を指定しています。

これで `test.html` は PHP として処理されますので、PHPスクリプトが利用できるようになります。

例として、現在の日付を埋め込んでみます。

```php:test.html
<?php
# ここはHTMLに出力する為の変数をいろいろ組み立てるエリア

$today = date("Y/m/d");

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>HTMLサンプル</title>
</head>
<body bgcolor=white background="xxx.gif" text=black link=blue vlink=fuchsia alink=red>

今日の日付は <?php print $today; ?> です。 

</body>
</html>
```

サーバの `test.html` にアクセスすると次のとおり。

![表示例](https://qiita-image-store.s3.amazonaws.com/0/35733/2596f99b-9133-0983-563d-fd88f72816f0.png)

最初から `test.php` として作っておけよ.. という意見もあるかもしれませんが、すでにhtmlファイルとして運用しちゃってる場合やデザイナーさんとの共同作業でどうしても拡張子を `.html` としたい場合、また外部リンクやAPIの向き先を環境毎に変更するのに便利かも..?

## 補足

mod_rewrite を使わなくても次のように Apache の設定ディレクティブで同じことは実現できます（下記の例に記載したディレクティブは .htaccess にも記載OK）。

```apache:.htaccess
AddHandler php5-script .html
```

もし対象を任意のファイルだけに絞りたい場合は、次のように `FilesMatch` ディレクティブで対象で対象を絞ります。

```apache:.htaccess
<FilesMatch "^test\.html$">
    AddHandler php5-script .html
</FilesMatch>
```
NSCalendarとNSDateを使って年齢を取得する

NSCalendarとNSDateを使って年齢を取得するコード。

なんでこんなことを書いているかというと、
例えば、和暦を使っている人の環境でいま year を取得すると、結果は平成n年の値が返って来る。
なので昭和59年生まれの人が平成26年に何歳になったか確認したいときに、

```objc
yearsOld = nowYear - birthdayYear;
```

みたいな計算をしてしまうと、

```objc
yearsOld = -33;//= (平成)26 - (昭和)59
```

という残念な結果になる。

これが年齢を取得するコード。

```objc
NSCalendar *calendar = self.calendar;
NSDate     *nowDate  = [NSDate date];
NSInteger   year     = [[calendar components:NSYearCalendarUnit
                                            fromDate:birthday
                                              toDate:nowDate
                                             options:0] year];
printf("%ld years old\n", year);
```

和暦で確認したければ

```objc
self.calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSJapaneseCalendar];
```

西暦(グレゴリオ暦)で確認したければ

```objc
self.calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
```

などと先にやっておいてください。 **(この2つのカレンダーでは結果はいっしょです。)**
このしたに書いてあるのは、誕生日のサンプルです。

```objc
NSDateComponents *birthdayComponents = [[NSDateComponents alloc] init];
[birthdayComponents setYear:1984];
[birthdayComponents setMonth:1];
[birthdayComponents setDay:24];
NSCalendar *gregorianCalendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
NSDate     *birthday          = [gregorianCalendar dateFromComponents:birthdayComponents];
```
2D plot in matplotlib

matplotlibで2次元プロットを作成する。
gnuplotで表示が遅くなる場合(1000x1000)くらいでも余裕で動く。

ここで2次元プロットと言っているのは、
座標(x,y)におけるスカラ量f(x,y)を表示する図の事である。

## 基本編

```py
import numpy
from matplotlib import pyplot
data = numpy.random.rand(128,128) # 128x128の2次元numpy.arrayに乱数を入れて生成
pyplot.imshow(data)
```

とりあえず2次元のnumpy.arrayをもってればこれでOK.
ただしx/y軸はindexを使用する。

## grid
gridを出すには`meshgrid`, `pcolor`を使用する。

```py
from numpy import arange, meshgrid
from math import pi
from matplotlib import pyplot
x = arange(0,2*pi,2*pi/128)
y = arange(0,2*pi,2*pi/128)
X, Y = meshgrid(x,y)
data = numpy.random.rand(128,128)
pyplot.pcolor(X, Y, data)
```

この場合x/yをlogにできる

```py
pyplot.xscale("log")
```

## norm
色を対数にするにはnorm引数を使用する

```py
from matplotlib.colors import LogNorm
...
pyplot.imshow(data, norm=LogNorm(vmin, vmax))
pyplot.pcolor(X, Y, data, norm=LogNorm(vmin, vmax))
```

vmin,vmaxはそれぞれ下限,上限値
省略するかNoneの場合は自動判定
たった5行!最も簡単にiBeaconの電波を「受信」する方法


前回の続きです。
前回はこちら！ 
[最も簡単にiBeaconの電波を発信する方法](http://qiita.com/Morikuma_Works/items/a0dd3cfcd1eef8dbd492)

さあiBeaconのアプリを作ってみよう！
となった時に、一番困るのがiBeaconを発信するアプリを作成しても、
電波はもちろん見えないため、本当に機能しているかどうかがわからないところです。

自分で実装？めんどいな…っていうかiPhone2台も持ってないしなぁ……
ここの周りにiBeacon形式のBluetooth飛んでないかなぁ……

というわけで、Macを使った最も簡単にiBeaconの電波を「受信」する方法をまとめたいと思います。

え？どこかで聞いたことがあるくだりだって？気にしない気にしない。

#環境
* Bluetooth Low Energy(BLE, Bluetooth4.0)が搭載されたMac製品
	* Macbook Pro, Macbook Pro Retina, Macbook Airなどなど
	* 最近の製品なら大抵OK
* node.js v0.10.24

#準備
Macでnode.jsとnpmを使えるようにする必要があります。
http://nodejs.org/
から"INSTALL"をクリックしpkgファイルをダウンロードし、インストールします。

その後、無ければ適当にディレクトリを作成しましょう。
ここでは`~/ibeacon`を作成します。

```Bash
mkdir ~/ibeacon
```

これで準備は完了です！

#iBeaconを受信してみる
今回はbleaconを使います。
まず、bleaconをnpm installしましょう。

```Bash
cd ~/ibeacon
npm install bleacon
```
その後、適当にjsを書きます。下記をコピペでも構いません。

```js:receive.js
Bleacon = require('bleacon');
Bleacon.startScanning();

Bleacon.on('discover', function(bleacon) {
   console.dir(bleacon);
});
```

これで準備は完了です。
実際に実行してみましょう。

```Bash
node ~/ibeacon/beacon.js
```

これで特にエラーがでなければ電波を待ち構えている状態です。
あなたが作成した発信アプリを起動してみましょう！するとこんな感じでずらずらでてくるはずです。

```js
{ uuid: 'cce55e10ea7f472faa05102fd7aeced8',
  major: 36,
  minor: 5,
  measuredPower: -57,
  rssi: -34,
  accuracy: 0.22223443385817412,
  proximity: 'immediate' }
{ uuid: 'cce55e10ea7f472faa05102fd7aeced8',
  major: 36,
  minor: 5,
  measuredPower: -57,
  rssi: -32,
  accuracy: 0.19498999948233425,
  proximity: 'immediate' }
{ uuid: 'cce55e10ea7f472faa05102fd7aeced8',
  major: 36,
  minor: 5,
  measuredPower: -57,
  rssi: -33,
  accuracy: 0.20816698139465403,
  proximity: 'immediate' }
{ uuid: 'cce55e10ea7f472faa05102fd7aeced8',
  major: 36,
  minor: 5,
  measuredPower: -57,
  rssi: -31,
  accuracy: 0.18264712128403449,
  proximity: 'immediate' }

...
```

取れる情報は、

* UUID: ビーコンに設定されているUUID
* major: ビーコンに設定されているmajor
* minor: ビーコンに設定されているminor
* measuredPower: 1mでのRSSI強度
* rssi: RSSI強度
* accuracy: measuredPowerとrssiから計算したビーコンとの距離（あてにならない）
* proximity: ビーコンとの近さ。
	* unknown(不明), immediate(すぐそこ), near(近い), far(遠い)で表現

とまあ、iOSで使用できる値はほぼ取得できます。

上記のままだと、iBeaconのフォーマットに従ってAdvertiseされているBluetoothすべてを表示します。
自分の発信アプリだけの挙動が見たい場合はUUID、major、minorを指定して、それだけを受信することもできます。

```Javascript
Bleacon.startScanning(uuid); //UUIDが一致するものすべて

Bleacon.startScanning(uuid, major); //UUIDとmajorが一致するものすべて

Bleacon.startScanning(uuid, major, minor); //UUIDとmajorとminorが一致するものすべて


```


とても簡単！
ObserveOnDispatcherの呼び出し場所に対する検証

前の投稿で

```csharp
var o = Observable.FromEvent<FileSystemEventHandler, FileSystemEventArgs>(
    a => (obj, e) => a(e),
    h => this.watcher.Changed += h,
    h => this.watcher.Changed -= h,
    DispatcherScheduler.Current);
this.obs = o.ObserveOnDispatcher()
    .Select(x => GetContents(f))
    .Subscribe(x => {
        this.mainText.Text = x;
    });
```

と書いたけど、GetContents(f)がObserveOnDispatcher()の後だとUIスレッド上で処理することになる？
ということで次のようなコードを追加して検証してみる。

```csharp
Console.WriteLine("1:" + Thread.CurrentThread.ManagedThreadId);
this.obs2 = o
    .Do(x => Console.WriteLine("2:" + Thread.CurrentThread.ManagedThreadId))
    .ObserveOnDispatcher()
    .Do(x => Console.WriteLine("3:" + Thread.CurrentThread.ManagedThreadId))
    .Subscribe(x => {
        Console.WriteLine("4:" + Thread.CurrentThread.ManagedThreadId);
    });
```
結果は次の通り。

1:10
-- (監視対象ファイルを変更する) --
2:11
2:6
3:10
4:10
3:10
4:10

やはりObservableOnDispatcher()の後だとUIスレッド上での処理になる。別にGetContentsをUIスレッドで処理しなければいけない理由はない（というよりUIスレッドでないほうが望ましい気が）ので次のように書くべきか。

```csharp
var o = Observable.FromEvent<FileSystemEventHandler, FileSystemEventArgs>(
    a => (obj, e) => a(e),
    h => this.watcher.Changed += h,
    h => this.watcher.Changed -= h,
    DispatcherScheduler.Current);
this.obs = o
    .Select(x => GetContents(f))
    .ObserveOnDispatcher()
    .Subscribe(x => {
        this.mainText.Text = x;
    });
```
ところで1回のファイル変更に対して2回イベントが呼ばれているけど、それは別途調査。
jsでfullscreen表示時させるもwindow枠が消えない問題対応

IEのインターネットオプション
-> セキュリティ
-> レベルのカスタマイズ
-> サイズや位置の制限なしにスクリプトでウィンドウを開くことを許可する
-> 有効にする

```diff:レジストリ
; サイズや位置の制限なしにスクリプトでウィンドウを開くことを許可する (信頼済みサイト)
[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Zones\2]
-"2102"=dword:00000000 ;無効(デフォルト)
+"2102"=dword:00000000 ;有効
```
AWSでWebシステム構築の勉強


## 概要
[@betahikaru](https://twitter.com/betahikaru)がAWSでインフラ構築について試行錯誤している内容のメモです。
将来WebサービスをAWS上で提供したくなった時のために勉強してます。
なお、AWSどころかインフラ全般についてド素人です。

## 状況
現在、私はAWSの各サービスをこんな風に使ってます。

### 全体像
システム構成図です。（[cacoo](https://cacoo.com/lang/ja/)で作りました）
EC2インスタンスは、普段は１つだけにしていて、必要に応じて独自AMIイメージから生成できるようにしてます。
（Webサービスを提供している訳じゃないので、検証用途のみです。）

![AWS 20140201.png](https://qiita-image-store.s3.amazonaws.com/0/11662/f9d46e60-54cc-b9e8-2516-798fc5c05e65.png "AWS 20140201.png")


### 利用サービス
以下のサービスを利用します。

* EC2 (とEBS)
  * Webサーバ＆APサーバ。（とそのストレージ）
  * Amazon Linux x64 を利用。
  * httpd, php, mysql(クライアント)をインストール。※色々手っ取り早いので。
  * 適当なHTMLページとPHPのページ（RDSに接続する）が出来た状態で、AMIイメージを作っておきます。
* RDS
  * DBサーバ
  * MySQL5.6 を利用。
  * 適当なテーブルを作っておきます。
* ELB
  * ロードバランサ
  * Webサーバ＆APサーバへのリクエストを振り分けます。
  * 普段はとりあえずEC2インスタンス１個だけ割り当ててる。
  * AMIイメージからEC2インスタンスを作る事で、WEBサーバ＆APサーバは分散できる状態っぽくなった。
* route53
 * DNSのシステム？
 * 独自ドメインを取得したので、ロードバランサに独自ドメインでアクセスできるよう設定した。

## 詳細:route53
### 設定
* "Hosted Zones"を追加(Domain Nameを独自ドメインに設定してCreate)
* "Go to Record Set"
* Aレコードを追加("Alias"を"Yes"にし、"Alias Target"をロードバランサのAレコードにする)
  * 起動しているインスタンスとかの選択肢が出た。便利。
* NSレコードについて、レジストラのサイトでネームサーバの変更設定を行う。

### 参考URL
- [【試してみた】Amazon Route 53にドメインを移動してみた。](http://pocketstudio.jp/log3/2012/03/31/migrationg_an_existing_domain_to_route53/)

## あとがき

### 野望
* RDSとかがSPOF(単一障害点)になるので、冗長化したい！
  * 読み取りだけならリードレプリカとか作れるとかなんとか。じゃあ更新は？
* キャッシュして高速化したい！
  * memcached とか Redis とかでセッションとかDB参照とかをキャッシュしたい。
* AMIからイメージ作るだけではスケールしきれない？パターンに対応するために、Chefとかもやりたい。

### 気づいた点
* EIPは、独自ドメインあったら特に使わなくなりそう。
  * 本番環境以外で使うかも。開発環境（CI、ビルド、デプロイサーバ）とか。

### 戯れ言
色々はしょってますが、忘れないよう後で詳しく書こうと思います。
まとめたらこれだけかーって感じの内容ですが、色々苦労しました。

## 略語集
お節介ですが略語集を載せときます。
* AWS (Amazon Web Services)
* EC2 (Amazon Elastic Compute Cloud)
* EBS (Amazon Elastic Block Store)
* AMI (Amazon Machine Image)
* RDS (Amazon Relational Database Service)
* route53 (Amazon Route 53)
条件判定③

## for文
fo文は「なにを何回繰り返す」といった単純な繰り返しを簡潔に書くことが可能です。
イメージ的には以下のようです。

```js

for (初期式; 条件式; 更新式) {
	文;
	文;
	文;
}


```

以下例を使って説明する。

```js
for (var i = 0; i < 10; i++){
    document.write(i);
};//=> 0から9まで順番に出力される
```

![for文01.png](https://qiita-image-store.s3.amazonaws.com/0/35975/c10b22ad-3683-625b-ef16-f10061980029.png "for文01.png")

↑先ほどのwhile文をfor文でやってみた物。(最初に`var i = 0`など変数を設定しなても成立してるのが分かる)

## 配列の繰り返しで利用するfor文

for文の利用例として下の様な配列の繰り返しが出たとき↓

```js
var bonkura = ['とも', 'おおさか', 'かぐら'];
var character;

character = bonkura[0];
document.write(character); //=> とも

character = bonkura[1];
document.write(character); //=> おおさか

character = bonkura[2];
document.write(character); //=> かぐら

```

for分を使えは、以下の様に書くことが出来る。

```js
var bonkura = ['とも', 'おおさか', 'かぐら'];
var character;
for (var i = 0; i < 3; i++) {
    character = bonkura[i];
    document.write(character); //=> ともおおさかかぐら
};
```

![for文02.png](https://qiita-image-store.s3.amazonaws.com/0/35975/57bb6d20-be89-a980-d552-4e214fa06910.png "for文02.png")

さらに、配列の要素数が増減しても`i < 3`の部分を着替えなくても良い様に

```js
var bonkura = ['とも', 'おおさか', 'かぐら'];
var len = bonkura.length;
var character;
for (var i = 0; i < len; i++) {
    character = bonkura[i];
    document.write(character); //=> ともおおさかかぐら
};
```
`i < len`が重要な所です。`len`は`bonkura.length`なので配列の要素数である3が代入されます。
従って「条件式は`i < 3`となります」。
こうすると、配列の要素が6になったら`len`には`6`が入るので、条件式は`i < 6`となり、全配列の要素を出力する。
こうゆうことです↓

```js
var bonkura = ['とも', 'おおさか', 'かぐら', 'よみ', 'さかき', 'かおりん'];
var len = bonkura.length;
var character;
for (var i = 0; i < len; i++) {
    character = bonkura[i];
    document.write(character); //=> ともおおさかかぐらよみさかきかおりん
};
```
![for文03.png](https://qiita-image-store.s3.amazonaws.com/0/35975/0b51399b-4f2f-0532-3c84-cb447b5c1a14.png "for文03.png")
条件判定②

## else文
elseとは「そうでなければ」の意味です。else文ではif文の条件式がfalseだった場合の処理を書く場合に利用する。
イメージ的には以下の様になる。↓

```js

if (条件式1) {
	// 条件式1がtrueならば実行される
} else if (条件式2) {
	// 条件式2がtrueならば実行される
	// 条件式1がtrueのときは実行されない
} else if (条件式3) {
	// 条件式3がtrueならば実行される
	// 条件式2がtrueのときは実行されない
} else {
	// すべての条件式がfalseならば実行される
}
	
```

てな具合いになる。

具体例だと、以下↓

```js
var x = 30;
if (x > 100) {
    document.write('xは100より大きい値です');
} else if (x > 50) {
    document.write('xは100以下かつ50より大きい値です');
} else {
    document.write('xは50以下の値です');
}; //=> xは50以下の値です

```

![else if_01.png](https://qiita-image-store.s3.amazonaws.com/0/35975/03d41701-bb65-d157-38ea-07bc3f3c9625.png "else if_01.png")

## while文
　while文は以下の様に{}で囲まれたプロック内の文を、()内の条件式がtrueである限り、ブロックの文を繰り返すものである。
イメージ的には以下の様になる↓

```while文のイメージ
while (条件式) {
	文;
	文;
	文;
};
```

以下例↓

```js
var i = 0;
while (i < 10) {
    document.write(i);
    i++;
}; // 0から9まで出力される

```

![while文1.png](https://qiita-image-store.s3.amazonaws.com/0/35975/dac1fbb6-7752-9016-1ebb-4899af524712.png "while文1.png")

ちなみに`i++`を取ると、いわゆる有名な「無限ループ」になってブラウザにエラーが出た。
以下そのときの画面。
![無限.png](https://qiita-image-store.s3.amazonaws.com/0/35975/36c5a26d-9f89-53e0-3bdf-fe37e37bf86a.png "無限.png")
Internet Explorer 8のサポート期間

Internet Explorer 8のサポートっていつまでなんだろう、と思って調べてみたんですが。

- http://answers.microsoft.com/ja-jp/ie/forum/ie8-windows_7/internet/7300bb52-bc5a-4267-adbb-e95f1bca5435
- http://support.microsoft.com/gp/lifewinfaq/ja
- http://freefielder.jp/blog/2013/02/internet-explorer-8-support-li.html

---

[Microsoft Windows 製品のサポート ライフサイクルに関する FAQ](http://support.microsoft.com/gp/lifewinfaq/ja)

```text:quote
1. Internet Explorer、および Windows Media Player のライフサイクルはどのようになっていますか？

Internet Explorer、および Windows Media Player は、オペレーティング システムに含まれるコンポーネントです。そのため、オペレーティング システムのライフサイクルが満了となると同時に、コンポーネントのサポートも終了となります。
```

[サポート ライフサイクル検索](http://support.microsoft.com/lifecycle/search/default.aspx?sort=PN&alpha=Windows+7&Filter=FilterNO)

```text:quote
延長サポート終了日
------------------
2020/01/14
```

( ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ

```text:quote
延長サポート終了日
------------------
2020/01/14
```

(；ﾟдﾟ) ・・・ (つд⊂)ｺﾞｼｺﾞｼ

```text:quote
延長サポート終了日
------------------
2020/01/14
```

(；ﾟдﾟ)
カスタムTweet buttonを作る

Tweet Buttonを作るなら https://about.twitter.com/resources/buttons で作ってやったらOKだけど、ツイートする内容を動的に作ってやる一例。

  まずこれが雛形。

```html
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
```

+ 表示言語
  - `data-lang`がenになっているのでボタンには`Tweet`と表示される。
  - `data-lang="ja"`としてやると`ツイート`と出る。

# Option

| Data Source	| Share query string	| `data-` attribute of anchor tag	| rel= attribute of a link tag	| Default|
|-------|---------|----------|--------|-------|
| Priority	| 1	| 2	| 3	| 4|
|URL to Tweet	|url	|data-url	|rel="canonical"	|HTTP Referrer|
|via user	|via	|data-via	|rel="me"	 ||
|Tweet text	|text	|data-text	| 	|Content of the <title> tag|
|Recommended accounts	|related	|data-related	 |	| |
|Count box position	|count	|data-count	 	||horizontal|
|Language	|lang	|data-lang|	 	|en|
|URL to which your shared URL resolves	|counturl	|data-counturl	 	||the url being shared|
|Hashtags	|hashtags	|data-hashtags		
|Size	|size	|data-size		
|Opt Out	|dnt	|data-dnt	

それぞれ左から優先して適用される。

## で、どんなオプションなのよ

### url
  - ツイートに挿入されるURL。デフォルトは現在のページのURL。<br> **日本語を含むURLで使用するとURLが正常に反映されないことがある。その可能性がある際は前もってここにurlエンコードしたURLを記しておくこと！**
    
### via
  - `via @hoge` で挿入されるscreen_name.日本語環境からだと `@○○さんから`

### text
  - ツイートの本文。言うまでもない。

### related
  - ツイートた後に表示されるおすすめユーザー。

### count
  - ボタンの横にカウンターを表示するか。`none`/`horizontal`(横)/`vertical`(縦)

### lang
  - ボタンの表示言語

### counturl
  - カウンターの対象url

### hashtag
  - 挿入されるハッシュタグ

### size
  - ボタンのサイズ。`large`=>大きいボタン

### dnt (opt-out)
  - [カスタマイズされたおすすめユーザー](https://support.twitter.com/articles/20169942-)を利用するか

## ボタン、ウィジェットのjs読み込み

そしてこれをページの何処か(bodyの最初とか)に貼っておく。
ボタンリンクとセットではられていることが多いがどこか一箇所に貼っておけば何回もコールする必要はない。
[ウィジェット](https://twitter.com/settings/widgets)とも共用で、前述のことは踏まえておこう。

```html
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
```

  > (実はこのコードはjsをhttpsでコールしているが、ボタン自動生成ページで作られるものはhttp/httpsをページに合わせて切り替えている。しかし`http://*.twitter.com/`はアクセフィルタとかの対象になっているのでこのコードを呼んでやったほうが該当する利用者にとっても嬉しい配慮となるだろう。)
>>↑先日仕様変更されたみたいで一部のウィジェットが`//*.twitter.com/`をiframeで埋め込むようになったりしててやられてることがある模様。


# で、設置例。

```html
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-text="にゃんぱすー" data-url="http://www.nonnontv.com/" data-via="nonnontv" data-hashtag="なのん" >Tweet</a>

```



PHPと組み合わせて動的なボタンを作るならこんな感じ

```php
<?

$text = "にゃんぱすー";
$url = "http://www.nonnontv.com/";
$tag = "なのん";
$via = "nonnontv";
?>
```

```html
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-text="<?=$text ?>" data-url="<?=$url?>" data-via="<?=$via?>" data-hashtag="<?=$tag?>" >Tweet</a>

```

発想次第で思わぬボタンが作れる...!?

## Ajaxとか
Ajaxでページを遷移した後ボタンが読み込まれない時は

```js
twttr.widgets.load();
```

ってやってやれば読み込まれるはず。


# 参考
[Tweet Button | Twitter Developers](https://dev.twitter.com/docs/tweet-button)
UnityでSpriteをフリップ（左右反転）する

http://qiita.com/fuqunaga/items/45f6db289549cde35af7
の続編

>transform.localScale.x を -1 にしてスプライトをフリップしてた のがまずかった
>http://forum.unity3d.com/threads/217184-OnCollisionExit2D-Issue
>
>transform.localRotation を180度、Y軸回転して対処したった

これはよろしくなかった
**Collider2Dがrotationのzしか反映されない**ので左右非対称な形状だと、
フリップに追従できない

正解はやっぱり
**transform.localScale.x を -1 にする**

この背景を理解してると
OnCollisionStay2D()、OnCollisionExit2D()が呼ばれない
のもなんとなく納得ができる

つまり、Collider2Dの形状が変わる（左右反転）からCollision2Dも新たに生成されてる、と
これはtransform.localScaleに値を代入する処理がトリガーになってるっぽくって、
同じ値を代入しなおしても上記２つの関数が発生しない模様
（値の変更の有無にかかわらず毎フレーム代入してるコードだったのでOnCollisionEnter2D()以外が
常に発生しなかった）

これ理解してないときに値が違うときにだけ代入するコードだったら、だいぶわかりにくいバグになってたな・・・
GitHub の注意するべき規約

Git の練習を兼ねて, GitHub 上に小説を書こうと思って (すでに先行事例は多数ある),
規約に違反することがないように規約を読んだ.

[GitHub Terms of Service · GitHub Help](https://help.github.com/articles/github-terms-of-service)

--

> You must be 13 years or older to use this Service.

このサービスを利用するためには, あなたは 13 歳またはそれ以上でなければならない.

> You must be a human. Accounts registered by "bots" or other automated methods are not permitted.

あなたは人間である必要がある. Bot やその他の自動化手法で登録されたアカウントは許さないよ.

--

これらは特に注意するべきである.
13 歳未満の読者は clone したり, クソ展開に issue を投げたり,
誤植を修正し pull request したり, 未完の作品を fork することはできない.

さらに, 人間であることを求めるので,
将来的に人工知能が作品を書いても人間の手を借りないと commit すらできない.

--

また, 表現に対する制限に関しては以下の規約が存在する (翻訳クソなので誤りがあれば編集リクエストなど送っていただけると助かる).

> We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.

我々が我々独自の裁量で判断した, 非合法, 攻撃, 脅迫, 名誉毀損, 中傷, ポルノ, 猥褻, その他の好ましくないもの, 第三者の知的財産を侵害したもの, サービス規約に違反したもの, を含んだコンテンツ, およびアカウントを, 我々は削除してもよい. が, それは義務ではない.

![](http://31.media.tumblr.com/124863b6bd797662d599018d27ce053a/tumblr_n09psmmXL71trg2f3o1_250.png)
特定のGitリポジトリだけAuthorを変更する

皆さんGitを使う際には`$HOME/.gitconfig`辺りに`user.name`と`user.email`を設定しているかと思います。

```:$HOME/.gitconfig
[user]
  name = sasaplus1
  email = sasaplus1@gmail.com
```

が、たまに特定のリポジトリでは別名でコミットしたい、ということがあるかと思います。そういう場合は以下のようにすると良いかと。

```bash:Terminal
$ cd 特定のリポジトリ
$ git config user.name hogehoge
$ git config user.email hogehoge@example.com
```

とすると、リポジトリ内にある`.git/config`に設定が追加されるため、このリポジトリ内でコミットした場合は

```
$ git log
commit xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Author: hogehoge <hogehoge@example.com>
...
```

のようになります。という同僚向けの投稿でした。

ちなみにコマンドを実行するのが面倒な場合は、テキストエディタで直接`.git/config`を編集すると良いかと思います。`$HOME/.gitconfig`に書いているような書式で書けば良いだけです。
tigカスタムキーバインド紹介（mainビューとbranchビュー編）

[やけに丁寧なtigの設定ガイド（キーバインド概論編）](http://qiita.com/yoshikazusawa/items/3eaa6db78fa348d38bfe) の続きで、筆者がよく使っているキーバインドのうち、mainビューとbranchビューで使っている主要な設定を紹介します。

```
########
# main view
########

# チーム開発しているとよくremoteで更新が入るため手元に同期
bind main ^r !git pull --rebase
# revert作業は手早く行う必要があるためバインドして効率化
bind main V !?git revert %(commit)
# 任意のリビジョンを再現するためにcheckoutすることが多いためバインド
bind main C !?git checkout %(commit)

########
# branch view
########

# リモートブランチをtrackしつつチェックアウト
bind branch T !git checkout -t %(branch)
# カーソル行のブランチを親にして入力した名前のブランチを作成
bind branch n !git checkout -b %(prompt) %(branch)
# 不要になったブランチを削除（squash mergeや別リポジトリへのmergeをするワークフロー用）
bind branch D !?git branch -D %(branch)
# 不要になったブランチを削除
bind branch d !?git branch -d %(branch)
# originへのpush
bind branch P !git push -u origin %(branch)
```

筆者自身のいま持っている課題感としては、`git reset`周りがバインドできていないことと、
branchのrebase周りがバインドできていないことが挙げられます。今後改善していきたいと思います。
gitlistで.phpで終わるファイルがブラウズ出来ない問題

gitlistは本当に簡単にインストールできる、ブラウザでgitリポジトリをブラウジングできるアプリ。

それをDebian wheezyのnginxに入れて適切に設定をしたのだが、.phpで終わるファイルをブラウジングしようとすると、どうやらgitlistが処理する前にnginxがそのURL構造から.phpのファイルを実行しにかかってしまい、'File not found'のエラーを吐く。

この問題ってどう解決したらよいのでしょうね？w
たった6行!最も簡単にiBeaconの電波を「発信」する方法

さあiBeaconのアプリを作ってみよう！
となった時に、一番困るのがiBeaconフォーマットのBluetoothを発信してくれるようなデバイスがパッとないことです。

自分で実装？めんどいな…っていうかiPhone2台も持ってないしなぁ……
aplixやestimoteを買う？金かかるのもなぁ……

というわけで、Macを使った最も簡単にiBeaconの電波を発信する（Advertiseする）方法をまとめたいと思います。

最も簡単に「受信」をしたい場合はこちら！
[たった4行!最も簡単にiBeaconの電波を「受信」する方法](http://qiita.com/Morikuma_Works/items/c2899e548da1c5e2c28e)

#環境
* Bluetooth Low Energy(BLE, Bluetooth4.0)が搭載されたMac製品
	* Macbook Pro, Macbook Pro Retina, Macbook Airなどなど
	* 最近の製品なら大抵OK
* node.js v0.10.24

#準備
Macでnode.jsとnpmを使えるようにする必要があります。
http://nodejs.org/
から"INSTALL"をクリックしpkgファイルをダウンロードし、インストールします。

その後、適当にディレクトリを作成しましょう。
ここでは`~/ibeacon`を作成します。

```Bash
mkdir ~/ibeacon
```

これで準備は完了です！

#iBeaconを発信してみる
今回はbleaconを使います。
まず、bleaconをnpm installしましょう。

```Bash
cd ~/ibeacon
npm install bleacon
```
その後、適当にjsを書きます。下記をコピペでも構いません。

```Javascript:beacon.js
Bleacon = require('bleacon');

var uuid = 'E86367B8D8A84BE082DE4653A7333113';
var major = 0;
var minor = 0;
var measuredPower = -59;

Bleacon.startAdvertising(uuid, major, minor, measuredPower);
```

これで準備は完了です。
実際に実行してみましょう。

```Bash
node ~/ibeacon/beacon.js
```

これで特にエラーがでなければ飛んでいるはずです。

とても簡単！

####追記
blenoを使用していましたが、bleaconに変更しました。
blenoをbleaconに書き換えるだけで動くはずです。

また、メソッド名も変更されてました。
startAdvertisingIbeacon -> startAdvertising
zonoさんありがとうございます！
std::priority_queue は 安定ではない

std::priority_queue<T> は要素 T を push() しておくと優先順位の高い(=大きい)順に pop() できます。

int を要素とし、その一ケタ目を優先順位とみなして 0...29 を push() し、一気に pop() してみましょう。

```cpp
#include <iostream>
#include <queue>

// 一ケタ目だけを比較する
struct less_digit {
  bool operator()(int x, int y) const {
    return (x%10) < (y%10);
  }
};

using namespace std;

int main() {
  priority_queue<int,std::vector<int>,less_digit> pq;
  for ( int i = 0; i < 30; ++i ) {
    pq.push(i);
  }

  while ( !pq.empty() ) {
    cout << pq.top() << ' ';
    pq.pop();
  }
  cout << endl;
}
```

実行結果はどうなるでしょう。一ケタ目が大きいものが先に現れるなら、
9 19 29 8 18 28 7 17 27 ...
と出力されると期待しますが、実際には:
9 29 19 28 8 18 27 7 17 26 6 16 5 25 15 14 4 24 13 23 3 12 22 2 11 21 1 20 10 0
でした。優先順位の等しい要素が複数あるとき、pop順は安定(=push順)ではないのです。

その理由は priority_queue::push()/pop() の実装にあります。

```cpp
clas priority_queue {
  ...
  void push(const value_type& _Val) { // insert value in priority order
    c.push_back(_Val);
    push_heap(c.begin(), c.end(), comp);
  }

  void pop() { // erase highest-priority element
    pop_heap(c.begin(), c.end(), comp);
    c.pop_back();
  }
```

ご覧のとおり、push_heap/pop_heap で実現しているんです。
そのため時間計算量は Nlog(N) と高速だけど安定ではないというわけ。

安定なpriority_queueが欲しいなら、要素の挿入順を比較キーに使うのが安直な方法でしょう。

```cpp
#include <iostream>
#include <queue>

struct less_digit {
  bool operator()(int x, int y) const {
    return (x%10) < (y%10);
  }
};

using namespace std;

template<typename T, typename Compare> 
struct stable_compare {
  bool operator()(const std::pair<T,unsigned>& x, const std::pair<T,unsigned>& y) const {
    if ( comp_(x.first, y.first) ) return true;
    if ( comp_(y.first, x.first) ) return false;
    return x.second > y.second; // 優先順位が等しいときは先に挿入した方を選ぶ
  }
  Compare comp_;
};

template<typename T, typename Compare> 
struct helper {
  typedef std::pair<T,unsigned> value_type;
  typedef std::vector<value_type> container_type;
  typedef stable_compare<T,Compare> compare_type;
  typedef std::priority_queue<value_type, container_type, compare_type> stable_priority_queue;
};

int main() {
  helper<int,less_digit>::stable_priority_queue pq;
  unsigned order = 0;
  for ( int i = 0; i < 30; ++i ) {
    pq.push(std::make_pair(i,order++));
  }

  while ( !pq.empty() ) {
    cout << pq.top().first << ' ';
    pq.pop();
  }
  cout << endl;
}
 
/* 実行結果:
9 19 29 8 18 28 7 17 27 6 16 26 5 15 25 4 14 24 3 13 23 2 12 22 1 11 21 0 10 20
*/ 
```
【Twitter】Twitterボタンを設置する（2014/1/31時点）【JavaScript】


Facebookは[こちら](http://qiita.com/takudo/items/078fe69a1e7f25ae88fc)です

#ボタンを選ぶ

https://about.twitter.com/resources/buttons#tweet

* Share URL（ツイート対象のページURL。Use the page URLを選んでおけばよい。）
* Tweet text（ページのタイトル。Use the title of the pageを選んでおけばよい。）
* Show count（カウントを出すかどうか）
* Via （@****さんから、という形のツイートになる。空可能）
* Recommend（？）
* Hashtag （#**** というハッシュタグの入った形のツイートになる。）
* Large button　（大きいボタンがお好みでしたらこっち）
* Opt-out of tailoring Twitter（？）
* Lauguage（言語です）

#ボタンをおきたいところに生成されたコード貼る

以下、一例

```html

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
```
Wordpress(PHP) on POW

普段は、RailsやSinatraでRackサーバーの[Pow](http://pow.cx/)を使っていて、Wordpress(PHP)をいじるときに、Apacheとか余計なものを立ちあげたくない（port 80をpowが専有してしまう）
他にメリットとしては、

- シンボリックリンク貼るだけでなので、複数プロジェクトを手軽に切り替えできる
- [xip.io](http://xip.io/)連携で同一LAN内の端末からアクセスが簡単になる


### 1. gemインストール

```sh
gem install rack-legacy
```

### 2. config.ru 作成
プロジェクト配下にファイル作成
※ rack-rewrite使わずに、Rack::Legacy::Indexで対応できるようになりました。

```ruby:config.ru
require 'rack/showexceptions'
require 'rack-legacy'

use Rack::ShowExceptions
use Rack::Legacy::Index
use Rack::Legacy::Php
use Rack::Legacy::Cgi
run Rack::File.new Dir.getwd
```

### 3. MySQL
MySQLを入れて、Wordpress用のDB作成（割愛）

* brewで入れる

```sh
brew install mysql
```

* インストーラーで入れる  
[MySQL :: Download MySQL Community Server](http://dev.mysql.com/downloads/mysql/)

### 4. シンボリックリンク

```sh
ln -s ~/Code/my-wordpress-site ~/.pow/my-wordpress-site
```
[powder](http://git.io/powder)を入れてあれば、

```sh
powder link
```

### 5. アクセス
[http://my-wordpress-site.dev](http://mywordpresssite.dev)

もしくは、

```sh
powder open
```

## Reference
* [eric1234/rack-legacy](https://github.com/eric1234/rack-legacy)
【Facebook】FacebookSDKを用いていいね！ボタン等を設置する(2014/1/31時点)【JavaScript】



#おきたいボタンを選ぶ

https://developers.facebook.com/docs/plugins/like-button

* URL to Like（いいね対象のページURL。固定値なので、動的なサイトには関係ない。後述）
* Leyout（ボタンの体裁。いくつか選べる）
* Width（ウィジェットの幅。最小値は決まっている模様）
* Action Type （ボタン押下時のアクションは何か、いいね（Like）、おすすめ（recommend）が選べる）

* Show Friends' Face （友達がいたら顔を出すかどうか）
* Include Share Button （シェアボタンも置くかどうか。いいねだけでいいなら、このチェックは外す）

「Get Code」ボタンを押下すると、HTMLに記述すべきコードが出てくる。

#1つめのコード

FacebookSDKをインクルードしているコード。bodyタグの最初の子要素とかでよろし

```html
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
```

#2つめのコード

ボタン。おきたいところにこれを記述する。
data-show-facesとか、data-shareとかの属性値が1で選んだものが反映される。
ポイントは、data-hrefの属性値。 __動的なサイトの場合は、ここの値を動的に書き換えないといけない。__

```html
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-width="50" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
```

以上です。
簡単ですな。
RadicalGoodSpeedカラースキーム

[RadicalGoodSpeed](http://www.vim.org/scripts/script.php?script_id=4822)というVimのカラースキームがあるのですが、[作者](http://qiita.com/svjunic)曰く「誰も使ってくれへんねん」とのことなので、普段GVimではdarkblueを、Vimではdefaultを使っている私が試してみた訳です。リポジトリは[ここ](https://github.com/svjunic/RadicalGoodSpeed.vim)みたいです。

## 下準備

NeoBundleでインストールします。NeoBundleを使っていない方はいい感じにインストールするといいと思います。

```vim:.vimrc
NeoBundle 'gh:svjunic/RadicalGoodSpeed.vim.git'

colorscheme radicalgoodspeed
```

とか書いておくと良いかと。

## スクリーンショット

見た目は以下のような感じ。

![radicalgoodspeed-1.png](https://qiita-image-store.s3.amazonaws.com/0/5538/541b2634-afe5-a520-872a-d2b79d0ff32d.png)

![radicalgoodspeed-2.png](https://qiita-image-store.s3.amazonaws.com/0/5538/ac08d865-6ef9-884d-aecb-3c92b5db32a4.png)
Sublime textを入れたら最初に見ると良いページ

Emacsからsublimeに移ってしまった軟弱モノです。
3にはまだ移行してないです。

- [Sublime Text 2 のDefault設定ファイルを眺める - blue_ham_cake1024のブログ](http://blue-ham-cake1024.hatenablog.com/entry/2012/09/07/Sublime_Text_2_%E3%81%AEDefault%E8%A8%AD%E5%AE%9A%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E7%9C%BA%E3%82%81%E3%82%8B)

  - translate_tabs_to_spaces
  - ensure_newline_at_eof_on_save
  - trim_trailing_white_space_on_save
  - highlight_modified_tab (変更があった時tabの色を変更する)

- [Sublime Text 2とCtagsの組み合わせがすごい。開発スピードUP[Mac版] | codechord](http://codechord.com/2013/03/sublimetext2-ctags/)
  - methodの定義場所まで飛んだりとか。これができないとダメeditorのレッテルが...
- <del>[sublime text2で好きな場所に秒速で新規ファイルを作る](http://blog.sanojimaru.com/post/45961451117/sublime-text2)</del>
    - SublimeQuickFileMakerはpackage installerから入らないので、[AdvancedNewFile](https://github.com/skuroda/Sublime-AdvancedNewFile)の方が良さそうです
- [keyremap4macbook - Sublime TextとGoogleIMEを併用しているとき、予測変換が使えなくなる問題の応急処置 - Qiita [キータ]](http://qiita.com/kei_q/items/c9a6fbd55391d90af1f6)
  - KeyRemap4MacBookを併用すれば日本語がまともに使えるようになる
- [jisaacks/GitGutter](https://github.com/jisaacks/GitGutter)
  - Gitの変更箇所が分かるようになる
  - 合わせて使うColor schemaには[Deep Blue See](https://github.com/jisaacks/DeepBlueSee)がおすすめ(デフォルトだと+とかに色がつかない)

![af57657d7fc2a89e87871b148d1f3dfd.png](https://qiita-image-store.s3.amazonaws.com/0/11143/fa3f6e26-50ea-b3af-93a8-d47f12e8faa2.png)
iOS+openFrameworks: projectGenerator

プロジェクトの雛形を作成するツール。
ここではMac版のビルドについて書きます。

#project
apps/devApps/projectGenerator/projectGenerator.xcodeproj

#build

##Architectures
自分の環境に合わせる？Universalにしておけば大丈夫？

```
Build Settings
    Architectures
        Architectures           Universal(32/64-bit Intel)(x86_64,i386)
```

##Error: 'tr1/memory' file not found
ビルド設定を変更する。

```
Build Settings
    Apple LLVM 5.0 - Language - C++
        C++ Language Dialect    C++98 [-std=c++98]
        C++ Standard Library    libstdc++ (GNU C++ standard library)
```

##Warning多数
とりあえず無視。
weechat cheetsheet (追記型)


## weechat起動
```
weechat
```

## チャンネルに接続する
```
/join #channel
```

## 指定したチャンネルに移動する
```
/buffer #channel
```

## チャンネルを切断する(バッファは開いたままにする)
```
/part #channel
```

## チャンネルを切断する(バッファも閉じる)
```
/close #channel
```

## WeeChatを終了する
```
/exit	
```

## 指定されたサーバーに接続する
```
/connect hoge

# 各種オプション
/server add hoge irc.example.com/6667 -ssl -autoconnect -password=mypassword
```

##	指定されたサーバーから切断する
```
/disconnect hoge
```

## 指定されたサーバーの設定を追加する
``` 
/server add hoge example.com/6667
```

## 指定されたサーバーの設定を削除する
```
/server del hoge
```

## ニックネームを設定する
```
/set irc.server.hoge.nicks - “mynick1,mynick2,mynick3,mynick4,mynick5″
```

## プラグインを追加する
```
/script install #{name}.#{ext}
```

## プラグインを読み込む
```
/script load #{name}.#{ext}
```

## プラグインを自動起動設定する
```
/script autoload #{name}.#{ext}
```

### 設定を保存する
```
/save
```

### トーク開始する
```
/msg #{nick} #{message}
```

### ウィンドウ横分割する
```
/window splith 50
```

### ウィンドウ縦分割する
```
/window splitv 50
```

### ウィンドウを統合する
```
/window merge
```

## プラグイン chanmon (channel monitoring)

### モニター有効化(トグル)
```
/chanmon dynmon
```
Rails4でMongoDBを使う


###プロジェクト作成

```
$ rails new mongo_test -O --skip-bundle
```

※-OオプションでActiveRecordをスキップ

###gemの追加

```Gemfile
gem 'mongoid', '4.0.0.alpha2'
gem 'bson_ext'
```

```
$ bundle install
```

###mongoidの設定ファイル作成

```
$ rails generate mongoid:config
```

これで、`config/mongoid.yml`が作成される。

とりあえず、localで使う分にはデフォルトでだいたいOK。

ここまでで、localでMongoDBは使えるはず。

###Scaffoldで動作確認

```
$ rails g scaffold User name email
```

あとは、`http://localhost:3000/users`にアクセスして、userを作ってみる。

###MongoDB側で確認

```
# mongoシェルの起動
$ mongo

# データベース一覧
> show dbs;
local xxxxGB
mongo_test_development xxxxGB

> use mongo_test_development;

# コレクション一覧
> show collections;
system.indexes
users

# ドキュメント一覧
> db.users.find();
{"_id" : ObjectId("xxxxxxxxxxxxxxxx"), "name" : "hoge", "email" : "hoge@example.com"}
```

##参照
・[酒と泪とRubyとRailsと - Herokuの超優良アドオン MongoLabを Rails 4.0 X Ruby 2.1環境で使う！](http://morizyun.github.io/blog/mongolab-mongodb-mongoid-rails/ 'Herokuの超優良アドオン MongoLabを Rails 4.0 X Ruby 2.1環境で使う！')
・[なるひこの Linux Printing お勉強日記 - Ruby初心者がRuby on Rails + Mongoidを試してみた](http://d.hatena.ne.jp/naruoga/20131202/1385983516 'Ruby初心者がRuby on Rails + Mongoidを試してみた')
・[そういうことだったんですね - DB - MongoDB(3) mongoid](http://babiy3104.hateblo.jp/entry/2013/11/15/133423 'DB - MongoDB(3) mongoid')
ブラウザが CSS トランジションに対応しているかどうか判定する方法


# シンプルな解決策

**Modernizr** http://modernizr.com 使え。

# JS ファイル増やさず自力で何とかしたい

Modernizr のソース読めばわかるんですが、適当な HTML 要素にトランジション系の CSS プロパティをセットしておいて、そのプロパティを JavaScript から参照し `undefined ` でなければ対応しています、的なやり方で判定できます。

JavaScript をごりごり書くのもできますけど、こういうケースではだいたい jQuery が使われているはずですので jQuery で書きます。そのほうが楽だし。

たぶんこんな感じ。


```css:style.css
.test-transition {
  -webkit-transition: none 0;
  -moz-transition: none 0;
  -o-transition: none 0;
  transition: none 0;
}
```

```html:test.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>トランジションに対応してるかな？</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="test-transition"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./test.js"></script>
</body>
```

```javascript:test.js
!function(w,d) {
  w.jQuery(d).ready(function($) {
    // チェックする CSS プロパティ名の配列
    // このうちひとつでも取得できれば対応とする
    var transition_props = [
        'transition',
        '-webkit-transition',
        '-moz-transition',
        '-o-transition'
    ];

    // テスト用の要素
    var $target = $('.test-transition');

    // トランジション対応の可否フラグ
    var transision_enabled = false;

    // ループ用
    var i, len;
    for (i = 0, len = transition_props.length; i < len; ++i) {
      if ($target.css(transition_props[i])) {
        // ここで指定の CSS プロパティ値が有効なら
        // CSS 3 トランジション対応ブラウザ
        transision_enabled = true;
        break;
      }
    }

    // jQuery 1.9 以降ならこうも書ける
    var values = $target.css(transition_props);
    for (i = 0, len = values.length; i < len; ++i) {
      if (values[i]) {
        transision_enabled = true;
        break;
      }
    }

    $target.text(transision_enabled ? 'トランジション対応してる！' : '対応してないし…。')
  });
}(window,document);
```

ここでは CSS トランジション対応の判定だけしていますが、 `box-sizing` や `opacity` とかの CSS プロパティでも同じやり方でできるっぽいです。

HTML 要素は JavaScriptから動的に追加してもいいんですが、HTML ソースまで手を入れられるなら最初から HTML ソースに `DIV` タグとか置いといたほうが早いです。
汎用ライブラリ的なものを書く場合なら動的生成するしかないですが、JavaScript 中に HTML ソースが紛れてしまうのがネック。

JavaScript と CSS の両方がなんとかできるなら、

```css:style.css
body {
  -webkit-transition: none 0;
  -moz-transition: none 0;
  -o-transition: none 0;
  transition: none 0;
}
```

としてしまって `BODY` 要素から調べるのもいいかもしれません。
もちろんこうすると `BODY` タグにトランジションを設定したい場合に困った事態になるおそれもあるので CSS の読み込み順に要注意といったところ。

調べたい内容が 1 - 2 件程度でその用途もしょぼい、というケースなら自力でやってしまうのもアリだと思いますが、おおむね Modernizr 使ったほうが手間かからずに JavaScript からも CSS からも判定できるし便利ですね。
Ambassadorパターンを使った複数のDockerホストにおけるコンテナ間通信


## 概要

Dockerコンテナが複数のサーバにデプロイされているときに、コンテナ同士が通信する必要がある。通信させるためには、いくつかの方法がある。

* [Pipework](https://github.com/jpetazzo/pipework)でIPを割り当て、ホスト間でブリッジをGRE接続する。
* 各ホスト間でVPN接続する。
* Ambassadorパターンで通信する。

Pipeworkや、VPNを使った通信ではDockerの外部で設定を行う必要があるため、手順が多くなるという欠点がある。

今回は、Ambassadorパターンで通信してみる。
Ambassadorパターンは、各DockerホストにプロキシとなるAmbassadorコンテナ配置する。このパターンを使うと、クライアントやサーバコンテナは具体的なIPを隠蔽することが可能になる。


簡単な概要図を示す。

![Docker_Ambassadorパターン.png](https://qiita-image-store.s3.amazonaws.com/0/7565/a2660f42-ec03-1b4b-5798-a8508c248553.png "Docker_Ambassadorパターン.png")


Ambassadorコンテナも通常のコンテナと同様にOSも含まれているが、docker-ut(docker unittest)イメージを基礎として構築されており、フットプリントは非常に軽く、7MB程度である。

## 環境

クライアント側DockerホストIP: 172.12.8.151
サーバ側DockerホストIP: 172.12.8.152

## サーバ側の起動

今回は、[前回の記事](http://qiita.com/reoring/items/de4512aecb84b3e4612c)で構築したElasticsearchのコンテナを使う。

### Elasticsearchコンテナの起動

```bash:run_elasticsearch_container
docker run -d -name elasticsearch reoring/docker-elasticsearch
```

### サーバ側Ambassadorコンテナの起動

```bash:run_elasticsearch_ambassador_container
docker run -d -link elasticsearch:elasticsearch -name elasticsearch_ambassador -p 9200:9200 svendowideit/ambassador
```

### 接続確認

#### サーバ側Dockerホストから

```bash:netcat_on_server
% nc -vn 127.0.0.1 9200
Connection to 127.0.0.1 9200 port [tcp/*] succeeded!
```

#### クライアント側Dockerホストから

```bash:netcat_on_client
% nc -vn 172.12.8.152 9200
Connection to 172.12.8.152 9200 port [tcp/*] succeeded!
```

## クライアント側の起動

```bash:run_ambassador
docker run -d -name elasticsearch_ambassador -expose 9200 -e ELASTICSEARCH_PORT_9200_TCP=tcp://172.12.8.152:9200 svendowideit/ambassador
```

```bash:test_shell
docker run -i -t -rm -link elasticsearch_ambassador:elasticsearch ubuntu /bin/bash
```

## 接続確認

直前に起動したクライアント側から、サーバ側にクエリを行なう。

```
curl -X GET http://$ELASTICSEARCH_PORT_9200_TCP_ADDR:9200/
```


### 結果

```json:result
{
  "ok" : true,
  "status" : 200,
  "name" : "Bill Foster",
  "version" : {
    "number" : "0.90.10",
    "build_hash" : "0a5781f44876e8d1c30b6360628d59cb2a7a2bbb",
    "build_timestamp" : "2014-01-10T10:18:37Z",
    "build_snapshot" : false,
    "lucene_version" : "4.6"
  },
  "tagline" : "You Know, for Search"
}
```

## おわりに

今回は、Ambassadorと、Docker Linkの組み合せで通信を行なったが、環境変数に依存しており現実のアプリケーションでどのように通信するかまでは言及していない。次回ではどのようにしてアプリケーションから通信するかまでを踏まえて書いていく。
sinon.fakeServer は 正規表現が使える

sinon.fakeServerはクロスドメインとかクエリパラメータの一致を定義するの面倒とか考えてググってたらやっぱり正規表現が書けた。

[Sinon.JS - Documentation](http://sinonjs.org/docs/#fakeServer "Sinon.JS - Documentation")

```js
server.respondWith(/\/todo-items\/(\d+)/, function (xhr, id) {
    xhr.respond(200, { "Content-Type": "application/json" }, '[{ "id": ' + id + ' }]');
});
```


最終的にこんな感じのヘルパを用意した

```coffeescript
stubRequest = ({pattern, method, status, response}) ->
  beforeEach ->
    throw 'pattern is required' unless pattern
    method ?= 'GET'
    status ?= 200
    response ?= {}

    unless @_server
      @_server = sinon.fakeServer.create()
      @_server.autoRespond = true

    @_server.respondWith(method, pattern,
      [
        status
        {"Content-Type": "application/json"}
        JSON.stringify(response)
      ]
    )

  afterEach: ->
    @_server?.restore?()
```


こうやって使う

```coffeescript
describe 'Commit', ->
  beforeEach ->
    @commit = new Commit
  stubRequest
    pattern: /\/api\/commit/
    method: 'POST'

  it 'should post /api/commit', (done) ->
    @commit.commit().done => done()
```

便利
メモ：definePropertyとconfigurable

既に設定されているプロパティをラップしたりしたかった。

```js

var o = {};

Object.defineProperty(o, 'test', {
  get: function() {
    return 'a';
  }
});

console.log(o.test); // -> 'a';

Object.defineProperty(o, 'test', { // Error: Cannot redefine property: test
  get: function() {
     return 'b';
  }
});
```

デフォルトだと再定義でエラーが出る。
再定義(変更)可能にするには`configurable`が必要らしい。

```js

var o = {};

Object.defineProperty(o, 'test', {
  get: function() {
    return 'a';
  },
  configurable: true
});

console.log(o.test); // -> 'a';

Object.defineProperty(o, 'test', {
  get: function() {
     return 'b';
  }
});

console.log(o.test); // -> 'b';
```

ちなみに2回目以降は変更された箇所が反映されるらしい。

```js

var o = {};

Object.defineProperty(o, 'test', {
  get: function() {
    return 'a';
  },
  configurable: true
});

console.log(o.test); // -> 'a';

Object.defineProperty(o, 'test', {
  get: function() {
     return 'b';
  }
});

console.log(o.test); // -> 'b';


Object.defineProperty(o, 'test', {
  get: function() {
     return 'c';
  },
  configurable: false
});

console.log(o.test); // -> 'c';



Object.defineProperty(o, 'test', { // Error: Cannot redefine property: test
  get: function() {
     return 'd';
  }
});

```

＠google chrome 32.0.1700.102
Boost.Flyweightで素数生成

#Boost.Flyweight
Boost.Flyweightは所謂Flyweightパターンを簡単に実装出来る便利なライブラリである。
今回はそのチュートリアルの1つ[key-value flyweights](http://www.boost.org/doc/libs/1_55_0/libs/flyweight/doc/tutorial/key_value.html)をお手本に素数生成した。

#コード

```cpp

#include "stdafx.h"
#include<iostream>
#include<boost/flyweight.hpp>
#include<boost/flyweight/key_value.hpp>
#include<boost/flyweight/no_tracking.hpp>
#include<boost/noncopyable.hpp>

class compute_prime;
int gen_prime(int);

typedef boost::flyweight<boost::flyweights::key_value<int, compute_prime>, boost::flyweights::no_tracking> prime;

class compute_prime : private boost::noncopyable{
public:
	compute_prime(int n):
		result(gen_prime(n))
	{}

	operator int() const{
		return result;
	}
	int result;
};

int gen_prime(int n){
	if (n == 0){
		return 2;
	}
	int p = prime(n - 1).get() + 1;
	while (true){
		int i = 0;
		while (true){
			if (prime(i).get() > sqrt(p)){
				return p;
			}
			if (p % prime(i).get() == 0){
				break;
			}
			++i;
		}
		++p;
	}
}

int _tmain(int argc, _TCHAR* argv[])
{
	//スタックオーバーフローを防ぐ^^;;
	for (int i = 0; i < 10000; ++i){
		prime(i).get();
	}

	std::cout << prime(10000);
	return 0;
}

```

#感想
いきなり大きな素数を求めようとするとスタックオーバーフローが起こる。再帰にすべきじゃなかった。
既に求めた最大の素数を記録さえしとけばスタックオーバーフロー自体は防げる。どこに持たせるのがお行儀が良いだろうか。
[android-ndk]NativeActivityからJavaのメソッドを呼ぶ方法

* NativeActivityを使ったときに、JavaのAPIを呼ぶ方法をまとめる。
* 試したndkのバージョンはandroid-ndk-r9b

#  必要なもの
* JVM *vm
* JNIEnv *env

JVMとJNIEnvはandroid_main()に渡される struct android_app が持っているANativeActivityのメンバーからとってくる

```cpp
JNIEnv *env = state->activity->env;
JavaVM *vm = state->activity->vm;
```

# Javaメソッドを呼び出す方法
* 現在のスレッドをVMにアタッチする
* クラスを取得する
* クラスからmethod idを取得する
* クラス/オブジェクトとmethod idからメソッドを呼び出す
* 現在のスレッドをVMからデタッチする

```cpp:Log.dを呼び出す
    vm->AttachCurrentThread(&env, NULL);

    jclass log = env->FindClass("android/util/Log");
    if (log == NULL) {
        LOGE("Log class not Found");
        return;
    }

    jmethodID methodD = env->GetStaticMethodID(log, "d", "(Ljava/lang/String;Ljava/lang/String;)I");
    if (methodD == NULL) {
        LOGE("Log.d not Found");
        return;
    }

    jstring tag =  env->NewStringUTF("log");
    jstring message =  env->NewStringUTF("message");

    env->CallStaticIntMethod(log, methodD, tag, message);
```

上記はサンプルのため、android/util/Log を呼び出してみたもの(実際は__android_log_printを使ったほうがよい。

# NativeActivityを拡張したクラスに定義したメソッドを呼び出す方法

アクティビティにメソッドを定義

```java:MyTest.java
public class MyTest extends NativeActivity {

    public void showToast() {
    	runOnUiThread(new Runnable() {
			@Override
			public void run() {
				Toast.makeText(MyTest.this, "test toast", Toast.LENGTH_SHORT).show();	
			}
    	});
    }
}
```

下記の用にshowToastメソッドを呼び出す。
アクティビティのオブジェクトは、struct android_appのNativeActivityが持っているclazzを利用します。

```cpp:Activityのメソッドを呼び出す
    vm->AttachCurrentThread(&env, NULL);

    jclass test = env->GetObjectClass(clazz);
    jmethodID methodShow = env->GetMethodID(test, "showToast", "()V");
    if (methodShow == NULL) {
        LOGE("showToast not Found");
        return;
    }
    jobject clazz = state->activity->class;
    env->CallVoidMethod(clazz, methodShow);

    vm->DetachCurrentThread();
```

# GetMethodIDに渡すメソッドのシグネチャ
* GetMethodIDは env->GetMethodID(クラス, メソッド名, メソッドのシグネチャ) で指定する
* void foo() は "()V" (戻り値がVoidも場合はV)
* int bar(int) は "(I)I" (intはIを指定)
* String baz (String str) は "(Ljava/lang/String;)Ljava/lang/String;"  (L(パケーッジ名含むクラス名); という形式で渡す)