OmniAICreator/Qiita-1.07M huggingface dataset:
[openFrameworks] 透過画像を重ねて描画したい時の注意点


##始めに


透過pngを重ねて描画したいときに気づくまでに相当の時間かかってしまったので残しておく。


##発生した問題

元画像の透過pngは円以外は透過されてある
![FireParticle.png](https://qiita-image-store.s3.amazonaws.com/0/59123/7180dad6-4e81-ca88-723d-d65283e5193b.png "元画像")

この円を連続で出してみる。色は少し加工してある

![スクリーンショット 2015-02-22 23.09.20.png](https://qiita-image-store.s3.amazonaws.com/0/59123/4daa2709-a800-6c3c-b33f-fbc9eb3b85aa.png "スクリーンショット 2015-02-22 23.09.20.png")

画像の円以外の透過されている部分が後ろの画像にかぶさってしまい後ろの画像が隠れてしまっていることがわかる。透過されている部分は後ろと重なり合って欲しい。


##原因

原因は２つだった。

	ofEnableDepthTest();
	ofSetVerticalSync(bool);

の2つ。

###ofEnableDepthTest()

深度テストを有効にする関数。3Dの立体の場合にありえない重なりになるのを防ぐ（つまり深度関係を明確にする関数）なのだが、これを加えた状態で透過pngを描画すると透過部分が上手く働いてくれなくなるみたいだ。僕はこれをこれを入れていたがばかりに思ったように描画してくれなかったようだ。
でちゃんとしたのがこちら。


![スクリーンショット 2015-03-01 17.29.16.png](https://qiita-image-store.s3.amazonaws.com/0/59123/450aa477-8c7d-efe7-fac6-7501f1174565.png "スクリーンショット 2015-03-01 17.29.16.png")

透過部分が重なっている部分に影響を与えなくなったことが確認できた。これをやりたかったんだよ。


これに気づくまでにかなりの時間を有したが、振り返ると馬鹿みたいである...
Objective-Cのメッセージが「変」な理由

Swift流行ってますが、個人的には、逆にだからこそObjective-C再考モードです。

Objective-Cを触ってると、よく以下のような文がでてきます。
初めてだと戸惑います。「変だな」と思いましたね。

```objc

[self.view endEditing:YES];
```

これ、JavaScriptなどで書くと

```js

this.view.endEditing = true;
```

あるいは

```js


this.view.setEndEditing(true);
```
こんなところでしょうか。

これ、ただ見にくいだけという訳ではないだろうと思ったんです。

プログラミング言語の「やりにくい」ってところには大体理由があって、ただ暗記しただけなら要らないだろって思っちゃいがちですよね。分からないなりにちょっと哲学的に考えた方が面白いです。CのポインタとかJSのクロージャとか。これもそういった類の概念です。


**この違いですが、Objective-Cのメッセージでは、より「オブジェクトにメッセージを伝える感じ」を出したいという発想からきているようです。**

**さらにこじつけると、Objective-Cの[ ]はセリフの「」だと言えます。（←）**

**つまり先ほどの例だと自分自身のviewに、独り言で「endEditing:YES！！」と言葉で言っているような感じになります。** ~~変態ですね。~~


そして先ほどのJSの例を極端に言うと、
「自分自身のviewのendEditingという変数にtrueを代入する。」
「自分自身のviewのsetEndEditing関数にtrueをぶち込んで実行」

こういう風に**味気なくなりがちな部分を解消する意味合いをObjective-Cのメッセージングでは感じ取れます**。（肯定的に言うと）

###実はObjective-Cの方が可読性が高い（！？）
英語は左から読むと分かりやすい言語って言われます。
Objective-Cも同様に
「**左から読んだ時に、[　←　が出てきたらオブジェクトに何らかのメッセージを送っているように読む**」

それに対してJSなど
「左から読んで、 . ←があったらプロパティなのかメソッドなのか意識する」
**こういう意味ではObjective-Cの方が可読性が高い**と言えますね。

まぁ、そこまでして形式が違うのは逆に不便では？と思うこともありますが、可読性を見るとObjective-Cの方が高いとも言えます。実際慣れたら高いかも。

###面白い書き方
ここでObjective-Cのメッセージを便利に活用しているコードがありましたので引用させていただきます。

「ラベル」と「メッセージ」が活き活きしている例です。
第一引数と関数名をミックスして、第二引数と統一させてます。

http://www.atmarkit.co.jp/ait/articles/0811/10/news108_2.html

```objc
  - (void)setWidth:(int)argWidth
            height:(int)argHeight
            depth:(int)argDepth;

    //↓メソッドの実行例
    [test setWidth:5 height:6 depth:7];
```

Javaが味気なく見えますね。（同じ内容のコード）

```java

    public void setSize(int w, int h, int d) {
        // ....
    }

    // メソッドの実行
    test.setSize(5, 6, 7);
```

###一般的に言われていること
**Objective-Cのメッセージはいわゆる「メソッド」ではないため、該当するメソッドがなくても警告だけが出てエラーが出ない**という話がありました。
でも試してみたけどエラーで出来なかったyo...
ここは今どうなんでしょう・・・
これはあんまり考えないほうが良さそうです。だって存在しないメソッドを呼びたくないじゃないですか？ｗ
ちなみに、UnityのSendMessage()はエラー出ないですね。

###ここで「デリゲート」を考えてみよう
メッセージを考えてみると、よく分かりにくかった「デリゲート　（delegate = 委任、派遣）」も概念的に納得いく部分があります。

**誰かからメッセージが来たとして、その部分は何かに委託していたらそこにお願いするっていうことです。**

**確定申告の時に、税務署から連絡（メッセージ）が来たらその部分は税理士に委託（デリゲート）すれば良いんですね。**
iOSアプリの通知スタイルの設定が表示されない件


「SenchaTouch + Cordova」のiOS、Androidアプリ開発ではまったことを少しメモする。

## 通知スタイルの設定が表示されない

######変更前
```javascript:touch/src/device/push/Cordova.js
    setPushConfig : function (config) {
        var methodName = Ext.id(null, 'callback');

        //Cordova's PushPlugin needs a static method to call when notifications are received
        Ext.device.push.Cordova.callbacks[methodName] = config.callbacks.received;

        return {
            "badge"    : (config.callbacks.type === Ext.device.Push.BADGE) ? "true" : "false",
            "sound"    : (config.callbacks.type === Ext.device.Push.SOUND) ? "true" : "false",
            "alert"    : (config.callbacks.type === Ext.device.Push.ALERT) ? "true" : "false",
            "ecb"      : 'Ext.device.push.Cordova.callbacks.' + methodName,
            "senderID" : config.senderID
        };
    },

```

######変更後
```javascript:touch/src/device/push/Cordova.js
    setPushConfig : function (config) {
        var methodName = Ext.id(null, 'callback');

        //Cordova's PushPlugin needs a static method to call when notifications are received
        Ext.device.push.Cordova.callbacks[methodName] = config.callbacks.received;

        return {
            "badge"    : (config.callbacks.type & Ext.device.Push.BADGE) ? "true" : "false",
            "sound"    : (config.callbacks.type & Ext.device.Push.SOUND) ? "true" : "false",
            "alert"    : (config.callbacks.type & Ext.device.Push.ALERT) ? "true" : "false",

            "ecb"      : 'Ext.device.push.Cordova.callbacks.' + methodName,
            "senderID" : config.senderID
        };
    },
```

## 実装済みアプリ
* [FXAlert - 外為のアラート通知アプリ](http://www.itmarlin.com/page-fx-alert.html)
Googleのチャート機能をSenchaTouchの中に実装


「SenchaTouch + GoogleCharts」を利用し、ローソク足チャートの実装をメモする。

## GoogleChartsを読み込む
```html
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
    </script>
```

## SenchaTouch側のPanelを準備する
```javascript:SenchaTouch
{
    xtype: 'panel',
    html: [
        '<div class="tab_rate_chart_area_top">',
            '<div id="id-rate-chart-div"></div>',
        '</div>'
    ].join('')
}
```

## GoogleChartsを初期化する
```javascript
    // チャートを描画する
    drawChart: function(records){
        var chartId = 'id-rate-chart-div';
        var width = Ext.get(chartId).getWidth();
        var data = google.visualization.arrayToDataTable(records, true);
        var options = {
            legend: 'none',
            colors: ['#ccc'],
            chartArea: {
                left: 50,
                top: 15,
                width: width - 60,
                height: 130
            },
            hAxis: {
                showTextEvery: 6,
                textStyle: {
                    fontSize: 9
                }
            },
            vAxis: {
                textStyle: {
                    fontSize: 9
                }
            },
            candlestick:{
                hollowIsRising: true,
                fallingColor: {
                    fill: '#002DB2',
                    stroke: '#002DB2',
                    strokeWidth: '0'
                },
                risingColor:{
                    fill: '#B20000',
                    stroke: '#B20000',
                    strokeWidth: '0'
                }
            }
        };
        if (!this.chart) this.chart = new google.visualization.CandlestickChart(document.getElementById(chartId));
        this.chart.clearChart();
        if (records.length > 0) this.chart.draw(data, options);
    },
```

```javascript
records = [
    ['ラベル', '最小値', '開始値', '終了値', '最大値'],
    ['ラベル', '最小値', '開始値', '終了値', '最大値']
]
```

## 実装済みアプリ
* [FXAlert - 外為のアラート通知アプリ](http://www.itmarlin.com/page-fx-alert.html) : [レート]-[チャート画面]
空のアプリを作成するメモ


「SenchaTouch + Cordova」のiOS、Androidアプリ開発の手順をメモする。

## 空のアプリを作成する
```bash
$ sencha -sdk ~/sdk/touch-2.4.1/ generate app TestApp ./TestApp
```

## Cordovaを初期化する
```bash
$ cd TestApp
$ sencha cordova init com.xxx.test-app
```

## Cordovaのプラットフォームを追加する
```bash
$ cd cordova
$ cordova platform add ios
$ cordova platform add android
```

## Cordovaのプラグインを追加する
```bash
$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.inappbrowser
```

## アプリをビルドする
```bash
$ cd ..
$ sencha app build native
```

## 実装済みアプリ
* [FXAlert - 外為のアラート通知アプリ](http://www.itmarlin.com/page-fx-alert.html)
docker run等のコマンド実行時に404 page not foundとエラーになった場合の対処

新しいdockerで環境変数でhttp_proxy、https_proxyを使っている場合に「404 page not found」と言われてエラーになるようでした。

例えば↓みたいになります。

```
masami@saga:~$ docker version
Client version: 1.5.0
Client API version: 1.17
Go version (client): go1.4.1
Git commit (client): a8a31ef
OS/Arch (client): linux/amd64
FATA[0000] Error response from daemon: 404 page not found
```

githubの[Add documentation for HTTP proxies #10192](https://github.com/docker/docker/pull/10192/files)を見ると環境変数にNO_PROXYを設定して/var/run/docker.sockへのアクセスにはproxyを介さないようにしろということなので.bashrcに下記行を追加し、

```
NO_PROXY=/var/run/docker.sock ; export NO_PROXY
```

再度versionを見てみると今度は何も問題なくコマンドが完了しました。

```
masami@saga:~$ docker version
Client version: 1.5.0
Client API version: 1.17
Go version (client): go1.4.1
Git commit (client): a8a31ef
OS/Arch (client): linux/amd64
Server version: 1.5.0
Server API version: 1.17
Go version (server): go1.4.1
Git commit (server): a8a31ef
```

こちらを参考にしました。
[Docker daemon answer 404 after update](http://serverfault.com/questions/667388/docker-daemon-answer-404-after-update)
HTMLのテーブルをExcelにCopy&Pastしたときにセルを分割させない

http://oshiete.goo.ne.jp/qa/5010133.html
http://soudan1.biglobe.ne.jp/qa1800963.html

上記リンクはASP開発側の観点の質問ですが、利用側の観点では、いったんLibreOffice calcに貼り付けるという手もあります。
mso-data-placement:same-cell;のような定義がないHTMLページの表でもbrタグはセル内改行で貼りつきます。

Mac OS X 10.9.5 / LibreOffice 4.4.1.2 で確認
Swift を始める前に知っておきたいポイント


これまでに他の言語を触っていたらなんとなくで Swift を使いはじめることができると思いますが、Swift を始める時に覚えておいた方がいいポイントをまとめました。

# Switch 文

case 文には break は必須ではない。break がなくても該当する case 文を実行したら Switch 文を抜ける。
でも処理をしないからといって case 文に処理が何もない場合はコンパイル時にエラーになります。

```switchでbreakを使わない例	
    switch value {
      case : 1 
        println("1")  <- ここを実行したあとに case :2 内の処理は実行されない
      case : 2 
        println("2")
      case : 3 
        println("3")
      default:
        println("default")
    }
```

# 関数に参照渡しをする

Swift では関数への引数は値渡しが基本。参照渡しがしたい場合は inout キーワードを使用します。渡す時は変数に & をつけます。

```参照渡しをする例
    func setup(inout index: Int){
        index = index + 5
    }

    var result = 0    
    setup(&result)
```


# 外部引数名を使う

Objective-c のような引数に名前をつけることができます（他の言語のような関数定義をすると名前がない関数定義になります）。
外部引数名をつけると可読性が向上します。

- 外部引数名を使わないパターン

```外部引数名を使わないパターン
	func calc(x : Int, y :Int) -> Int {
		return x * y
	}
	
	calc(4, 5)
```

- 外部引数名を使うパターン

```
	func calc(width x : Int, height y :Int) -> Int {
		return x * y
	}
	
	calc(width: 4, height: 5)
```
　
# ワイルドカード

_(アンダースコア)は Swift では使用しない変数の代入先として用いることができます。

```ワイルドカードを使う例
	for _ in 1...5 {
	  // index を使用しないループ処理を行いたい場合 '_' を指定する
	}

```
バグが入り込まないように使わないけど宣言していた変数などがあった場合はこれを使うと便利です。


# if 文で nil チェックをする時は let を使う

変数が nil かどうかによって処理を分ける時は if 文を使うと思いますがこの時は、

```
  var value: Int?

  ..  // value に代入する処理
  
  if value != nil {
    // nil じゃない場合の処理
    var output = value? + 5
  }else{
    // nil の場合の処理
  }
```

と書くのではなく、let で定数を定義して処理を書くと optional 型の変数を unwrap しなくていいので綺麗に書けます。

```
  var value: Int?

  ..  // value に代入する処理
  
  if let result = value {
    // nil じゃない場合の処理
  	var output = result + 5  
  }else{
    // nil の場合の処理
  }
```
十進数よみとり

ひまだからてきとうに書いた。

<pre>
100byte のメモリに溜める
[1][2][3]...[99][100] 
 ^ 開始位置         ^ full


一文字よみこむと次の位置をさす

[1][2][3]...[99][100]
      　^ 3文字よみとったとこ

</pre>


```c

char buff[100];
const char* n = "100\n2\na5";

char terminator;
char delim;
int fail;
int pos;
 
terminator = '\0';
delim = '\n';
fail = 0;
pos = 0;
 
for(; pos<100 && n[pos] != terminator; ++pos) {
  if(isdigit(n[pos]) || n[pos] == delim) {
    buff[pos] = n[pos];
  }
  else if(n[pos] != delim) {
    fail = 1;
    break;
  }
}
/* ここの pos: 6byte目, 'a'のとこ */

```

あれ？int full ないなバッファ溢れ放題。

文字配列->すうち にする(｀・ω・´)ｼｬｷｰﾝ

```c

int z = 0;
int i = 0;
 
while(i < pos) {
  if(buff[i] != delim) {
  z = z*10 + buff[i]-'0';
  }
  else break;
   ++i;
  }
}

```

pos は static でも再帰でもドーゾ。
再帰呼び出しオススメ。

いずれにせよStreamではなくバッファなのです。


----

追加


行バッファされた1行の読み取りを想定
数字以外だとよみとばす。

```c

  int n;
  if( 1 < (scanf("%d", &n)) ) {
    while( getchar() != '\n'); /* (-人-)改行コードがきますように */
    scanf("%d", &n);
  }

```


```c

  char c;
  int n;
  int sig;
 
  c = 0;
  n = 0;
  sig = 1;
 
  while((c=getchar()) != '\n') {
    if(c=='-') sig = -1;
    if(isdigit(c)) {
      n = n*10 + c-'0';
    }
  }
  n *= sig;
  return n;

```

アドバイスもらったヾ(\*´∀｀\*)ﾉｷｬｯｷｬ
PHP でホームディレクトリを取得


```
$ php -a
php > echo posix_getpwuid(posix_geteuid())['dir'];
"/Users/***"
```

* [posix_geteuid](http://php.net/manual/ja/function.posix-geteuid.php) 
> posix_geteuid — 現在のプロセスの有効なユーザー ID を返す

* [posix_getpwuid](http://php.net/manual/ja/function.posix-getpwuid.php)
> posix_getpwuid — 指定 ID のユーザーに関する情報を返す
CentOS に Vim をインストール

今までVagrant上のCentOSのファイルを編集する際に、Cyberduckからファイルを選んでVimで開くというのをやっていましたが、面倒くさくなったのでVim自体をインストールしようと考えました。

# 必要なものを揃える

初期状態でのVimのバージョンを確認してみます。

```
$ yum list installed | grep vim
Failed to set locale, defaulting to C
vim-minimal.x86_64     2:7.2.411-1.8.el6
```

7.2が出たのはwikipediaによると2008年なので古いです。最新版の7.4を導入しましょう。

vimをインストールするのに必要なパッケージが入っているかを以下のコマンドで確認します。"list installed"はインストール済みのパッケージ一覧を表示します。

```
$ yum list installed | grep mercurial
$ yum list installed | grep ncurses-devel
$ yum list installed | grep make         
$ yum list installed | grep gcc 
```

インストールされていない場合はそれぞれインストールしてください。

```
$ yum install mercurial
$ yum install ncurses-devel
$ yum install make
$ yum install gcc
```

# Vimのインストール
では、本題のインストールです。今回は最新版にするためにソースコードからインストールします。まず、vimというディレクトリ内にリポジトリを複製します。（自分は"Permission denied"というエラーが出たので"sudo"をつけました）

```
$ cd /usr/local/src
$ sudo hg clone https://bitbucket.org/vim-mirror/vim vim
```

vimディレクトリ内に複製され、たくさんファイルができてます

```
$ cd vim
$ ls
```

一応、確認のためにリポジトリが更新されてないかの確認のコマンドも実行しましょう。

```
$ sudo hg pull
pulling from https://bitbucket.org/vim-mirror/vim
searching for changes
no changes found
```

最新版に保たれているようです。

では、configureコマンドを使ってMakefileを生成し、makeしましょう。
（makeは自動的にコンパイル等の処理を行うコマンドです。makeするためにはMakefileがないため、configureを使って生成します）

```
$ sudo ./configure --with-features=huge --enable-multibyte --disable-selinux
$ sudo make
$ sudo make install
```

確認してみましょう。

```
vim --version
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Mar  1 2015 06:42:11)
```

終了です。

# おわりに
configureの意味も知らずに調べながらやりました。間違っている点があれば指摘してください。

# 参考文献
[Vim7.3をソースからインストール](http://o.inchiki.jp/obbr/19)
[CentOS 6.3にVim 7.3をインストールする](http://qiita.com/muniere/items/0569d05d470c5d3dc51b)
[UNIXの部屋 コマンド検索:configure (*BSD/Linux)](http://x68000.q-e-d.net/~68user/unix/pickup?configure)
[Vim - Wikipedia](http://ja.wikipedia.org/wiki/Vim)
Ractive.js + Twitter Bootstrap で自発的に出て自発的に消えるアラート


以前作って、最近は必ず使っているやつです。
こういうのをractive.extendで設定しておくと共通の機能として使えます。
この場合テンプレートにベタ書きですが、Componentsでつくるやり方もあると思います。

##Ractiveテンプレート 
Bootstrapのcssを読み込み、Bootstrapのalertをこんなかんじで書く（.alert-wrapでくるんでいます）
閉じるボタンに`on-click="alert_hide"`を設定
**※ bootstrap.jsは不要**

```html:text/ractive
{{#alert}}
<div class="alert-wrap">
    <div class="alert alert-{{status}}">
        <button type="button" class="close" on-click="alert_hide">&times;</button>
        {{#title}}<strong>{{title}}</strong>{{/}} {{#text}}{{text}}{{/}}
    </div>
</div>
{{/alert}}
```

トランジションのプラグインを使って、
`<div class="alert-wrap">` に `intro-outro="slide"` や`intro-outro="fade"`
を仕込むと楽しいです。

##イベント登録
ractiveオブジェクト生成は省略

```javascript
ractive.on({
    alert: function (title, text, status, hideAfter) {
    	//alertにデータが入ると自発的に現れる
        this.set('alert', {
            title: title || null,
            text: text || null,
            status: status || 'info',//デフォルトでalert-info
            hideAfter: hideAfter || null //デフォルトではタイマーなし
        });
    },
    alert_hide: function (event) {
        event.original.preventDefault();
        this.set('alert', null);//alertをnullにするだけ これで自発的に消える
    }
});
```

##observeでタイマーをセット
タイマー機能がいらなければ、alert.hideAfterのデータと、このobserveは不要です


```javascript

ractive.observe('alert.hideAfter', function (val) {
	//'alert.hideAfter'に値がセットされたらタイマーをセット
    val && setTimeout(function () {
        this.set('alert', null);//自発的に消える
    }.bind(this), val);
}, {init: false});
```

##alertを出す

```javascript
//xを押すと消えるalert
ractive.fire('alert','アラートタイトル','アラートテキスト');

//3秒で消えるまたはxを押すと消えるalert
ractive.fire('alert','アラートタイトル','アラートテキスト',null,3000);

//bootstrap的にalert-dangerなalert
ractive.fire('alert','アラートタイトル','アラートテキスト','danger');

//イベントを発火せず直接データをセットしてもいいです。
ractive.set('alert', {
	title: 'アラートタイトル',
	text: 'アラートテキスト',
	status: 'info',
	hideAfter: 3000 
});

//xを押すと消えるalert
ractive.set('alert', {
	title: 'アラートタイトル',
	text: 'アラートテキスト',
	status: 'info',
});
//このアラートを消す
ractive.set('alert', null});
```

##サンプル
**[jsFiddleにサンプルあげました](http://jsfiddle.net/tomohidex/5ed20Lvj/19/)**
ui-router を使ってログイン必須のstateを作る

現状の AnagularJS では必ずと言っていいほど、 ui-router を使っているが、ログインが必要な state と、そうでない state を作る必要が出てきてしまったので、そのための方法を調べてみた。

```js
var app = angular.module('bgcApp', [
  'ui.router'
]);

app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: '/views/home.html',
            controller: 'homeController',
            isLoginRequired: true
        })
        .state('login', {
            url: '/login',
            templateUrl: '/views/login.html',
            controller: 'loginController as login'
        })
        .state('logout', {
            url: '/logout',
            controller: 'logoutController'
        });
```

とりあえず、このような形で3つの state を用意してみた。`home` には新たな属性値として `isLoginRequired` を追加した。

```js
app.service('UserService', function () {
    this.isLoggedIn = function () {
        // TODO: implement it.
        return true;
    }
});
```

これは別に必要ないのだが、ユーザがログインしているかどうかを判定する機能を持ったサービスを用意しておく。

```js
app.run(['$rootScope', '$state', 'UserService', function ($rootScope, $state, UserService) {
    $rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams){
        if (toState.isLoginRequired) {
            if (!UserService.isLoggedIn()) {
                $state.go('login');
                e.preventDefault();
            }
        }
    });
}]);
```

ui-router には、 `$stateChangeStart` というイベントが用意されており、これは状態の変更前に呼ばれる。 `toState` には、遷移後の state 設定が入っているので、 `isLoginRequired` を読み取って、ログインしていないようだったら、 `login` へ遷移させる処理を書くことができる。

この際、 `e.preventDefault()` で遷移イベントを止めることを忘れずに。

これで、非ログイン時の、ログインページヘの強制遷移処理を書くことができた。

### 参考にした資料

- [$state API Doc](http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state)
- [AngularJS Access Control and Authentication](https://coderwall.com/p/f6brkg/angularjs-access-control-and-authentication)
[jQuery]フォームのチェックボックスでテキストボックスの入力可・不可を操作する

フォーム処理で、チェックボックスでチェックした場合のみ補足項目を入力させたい場合のコード例です。

今回は以下のフォームを例に、果物名をチェックした場合のみその果物の数量が入力できるようにします。

![Document (1).png](https://qiita-image-store.s3.amazonaws.com/0/62022/b1d0dc6c-2c58-8d6a-a67b-4eb74885b149.png)


**HTML**

```html
<div>
	<input type="checkbox" id="apple" class="switch">りんご
	<input type="number" id="apple_add" class="inputbox" disabled="disabled"> 個</td>
</div>

<div>
	<input type="checkbox" id="melon" class="switch">メロン
	<input type="number" id="melon_add" class="inputbox" disabled="disabled"> 個</td>
</div>

<div>
	<input type="reset" id="reset">
</div>
```

**※補足**
1. 数量欄のidは、"チェックボックスのid" + "_add" と指定します。
2. チェックボックスと数量欄にはそれぞれ "switch" と "inputbox" というclassをつけています。
3. リセットボタンにもid="reset"をつけてください。


**JavaScript**

```js
$('.switch').each(function(){			//class'switch'(=チェックボックス)
	var idname = $(this).attr('id');	//class'switch'(=チェックボックス)のidから入力可・不可にする入力欄を指定
	var addInput = '#'+idname +'_add';

	/* 既にチェックされていた場合の処理 */
	if($(this).prop('checked')){
		$(addInput).removeAttr('disabled').removeClass('none');
	}

	$(this).click(function(){
		/* チェック時の処理 */
		if($(this).prop('checked')){
			$(addInput).removeAttr('disabled').addClass('active').removeClass('none').focus();
			//入力可能に変更し、class'active'を付与し、フォーカスさせる

		/* チェックをはずした時の処理 */
		} else {
			$(addInput).attr('disabled','disabled').removeClass('active').addClass('none').blur();
			//入力不可に変更し、class'active'を外して'none'を付与し、フォーカスを外す
		}
	});

	/* フォーカスが外れた時 */
	$(addInput).blur(function(){
		$(addInput).removeClass('active');
	});

	/* 他のオプションをクリックしたときの処理 */
	$('.switch').not(this).click(function(){
			$(addInput).removeClass('active');
	});
});

/* リセットで↑条件をリセット */
$('#reset').click(function() {
	$('.switch').attr('checked',false);
	$('.inputbox').val('').attr('disabled','disabled').removeClass('active').addClass('none');

});
```

**CSS**

```css
/* 入力不可状態のスタイル */
.inputbox.none {
	background-color: #ddd;
}

/* フォーカスされた時のスタイル */
.inputbox.active {
	background-color:#FFF8E1;
	color: #000;
	box-shadow:0px 0px 5px rgba(84,189,245,1);
}
```

入力可・不可の状態別にスタイル指定してあげると、チェック時に以下のように数量の欄が目立つのでユーザーの見逃しも防げます。

![Document.png](https://qiita-image-store.s3.amazonaws.com/0/62022/4e8be7a9-043c-eeee-2570-b8b0eb71d953.png)

以上です。

チェックボックスとテキストボックスのidを法則にしたがってつければいくつでも対応します。

テキストボックスのidを指定して入力の可・不可を操作する方法は他にも見つかりますが、複数の項目に同じ処理を施したい場合は、この例のようにidに法則性を持たせてまとめて処理すればOKです。
毎月30日がAnniversary Billing Dateの場合、2月はどうなる？

早いものでもう3月ですね。今回は、月の変わり目に関係する話題です。

SoftLayerには、Anniversary Billing Date（ABD）という考え方があります。
毎月、この日を締め日として、毎月の利用料金が確定します。
月額サーバーを使っていた場合、ABDを過ぎると、また翌月分の料金が発生します。

![ABD.png](https://qiita-image-store.s3.amazonaws.com/0/59627/4a725795-801f-c147-20dc-acddd6c8379e.png)

課金の考え方については、詳細は下記でご確認ください。
http://www.slideshare.net/kkitase/softlayer-basic-billing

さて、このABDですが、その月に存在しない日付だったらどうなるでしょう？
例えば、30日がABDだった場合、2月には30日がありません。
課金に関係する事なので、正確に理解しておきたいところです。

答えはSoftLayerのMaster Service Agreement（MSA）に書いてありました。
MSAは下記からダウンロードできます。
http://www.softlayer.com/legal

下記の通り、ABDがその月に存在しない日付だった場合は、その月の最後の日になるという事です。毎月30日がABDだった場合、今年の場合、2月は28日がABDになるという事ですね。

> If the Anniversary Billing Date is a date in a calendar month which does not exist in each calendar month, then the Anniversary Billing Date shall be the last date of such month (i.e. if the Anniversary Billing Date is the 30th, then in February, the Anniversary Billing Date shall be either February 28 or 29, depending on the year).

（上記は2015年2月末時点の情報です。仕組みは変更する可能性があります。こちらに掲載されている情報について、一切の責任、または賠償責任を負いません。）
iOSアプリのpresentViewControllerの背景透過のOSバージョン別の書き方

#カスタマイズされたアラートを出したい

UIAlertViewのカスタマイズとして、モーダルビューをよびだして背景透過をする手法。

OSのバージョンが変わるごとにmodalの設定方法が変わって、完全に闇の原因になっている。。。

まずiOS6の書き方

```objc:
self.tabBarController.modalPresentationStyle = UIModalPresentationCurrentContext;
```

iOS7のとき

```objc:
self.tabBarController.modalPresentationStyle = UIModalPresentationCurrentContext;
```

iOS8のとき

```objc:
self.tabBarController.modalPresentationStyle = UIModalPresentationOverCurrentContext;
```


#設定する時の注意

また、このコードを反映させる時にまた注意が一つ。
こちらで紹介した通りに、モーダルビューの設定にはもう一つ注意が必要だそうです。

どのOSのタイプでもmodalPresentationStyleを設定する対象を以下のように変えていかなければならないらしく。

```objc:
self.navigationController.modalPresentationStyle = UIModalPresentationCurrentContext;
```

表示するVIewControllerがnavigatoincontrollerかtabbercontrollerを含んでる時はnavigationcontrollerかtabbercontrollerのmodalPresentationStyleに設定。

こういうちょっとしたところでつまずいて闇に頭を抱えるの怖すぎますね。

#参考
http://qiita.com/dokubeko/items/b4231841c37108110cb6
PHPerがFizzBuzzをRubyっぽく書く

#お題
## FizzBuzz
https://www.codeeval.com/open_challenges/1/

# PHPの場合
```php:fizzBuzz.php
<?php
$fcontents = fopen($argv[1], 'r');

function judgeFizzBuzz($n, $fizz, $buzz)
{
    if ($fizz($n) && $buzz($n)) {
        return 'FB ';
    } elseif ($fizz($n)) {
        return 'F ';
    } elseif ($buzz($n)) {
        return 'B ';
    } else {
        return $n . ' ';
    }
}

function FizzBuzz($fst_int, $sec_int, $times)
{
    # conditions
    $fizz = function($n) use ($fst_int) { return ($n % $fst_int === 0); };
    $buzz = function($n) use ($sec_int) { return ($n % $sec_int === 0); };

    $result = '';
    for ($i = 1; $i <= $times; $i++) {
        $result .= judgeFizzBuzz($i, $fizz, $buzz);
    }
    return $result;
}

while ( ($input_lines = fgets($fcontents)) ) {
    list($fst_int, $sec_int, $times) = explode(' ', trim($input_lines));
    echo FizzBuzz($fst_int, $sec_int, $times) . PHP_EOL;
}


```
もう少しスマートに書けそう…
変に\$fizz, $buzzと書いてしまってるのが冗長かも？
# Rubyの場合
## 
```rb:fizz_buzz.rb
def judge_fizzbuzz(f, b, num)
  return 'FB' if (num % f).zero? && (num % b).zero?
  return 'F'  if (num % f).zero?
  return 'B'  if (num % b).zero?
  num.to_s
end

ARGF.each_line do |line|
  f, b, times = line.split.map {|n| n.to_i}

  result = []
  (1..times).each do |num|
    result << judge_fizzbuzz(f, b, num)
  end
  
  puts result.join(' ')
end
```
手探りだけど、短く書ける！
# 追記
## 破壊的操作してる！　よくない！
```rb:破壊してる
  (1..times).each do |num|
    result << judge_fizzbuzz(f, b, num)
  end
```
String#<<が破壊的操作してます。
破壊的操作は良くない！
# 参考にさせて頂いたページ
FizzBuzzで始めるRuby
http://ore-public.github.io/2013/11/02/fizzbuzzruby/

# 感想
* Rubyは後置ifがよかった
* Rubyはメソッドつないで処理していくのがいい感じ
* ；が必要ないので、小指に優しかった
* キャメルケースの方が読みやすい

**というわけで、いろんな言語に触って色々書いてみよう！**
好きなところ嫌いなところ（ビルドツール界隈編）

# 好きなところ嫌いなところ（ビルドツール界隈編）

個人の見解です。

異なるスキルセットの人が複数人いる場面で教育コストと標準化を考えるとビルドシステムは極力ミニマムのことができればイイと思います。なんでもできることはそれはそれで良いこともあるのですが、変に頑張れてしまうので場違いな頑張りの所為でカオスになることが多々あります。
個人的に使うのであれば自由度が限りなく高い方が望ましいと思う。

※ 初回の公開から8年が経過しているという衝撃を受けながら編集しました。

総論は**Gradle大嫌い**です

## Maven

Java プロジェクトでこれまで（2023年1月時点）で最も使ってきたビルドルーツです。

### 好きなところ

* 守備範囲が明確。コマンドが決まっているので自由がきかない。→利用者の習熟度が成熟しやすい、教育コスト低い。
* 現時点でデファクト=世間のリソース、ノウハウが豊富
* プロジェクトのスタイル（殆どが Web アプリケーション）なので、設定ファイル（POM）の使いまわしがきく
* IDEとのリレーションハードルが低い。Eclipse+m2e+WTP


### 嫌いなところ

* 遅い
* できないことが多い（トレードオフ。ただ今のところは致命的ではなく代替案が大体ある）
* リポジトリにつながらないのが一定期間続くと、モジュールの更新がうまくいかないときがある。→そんなときはローカルリポジトリ削除しかない
* XMLでの設定
* ブラックボックスなので問題が起きたときの原因調査に時間がかかる。
* ファイルの操作が Maven だけではできない。
* カスタマイズ面倒。

## Gradle

2015年以降Javaアプリケーションの開発やAndroidアプリケーションの開発で使用する機会が増え、常に何かしらGradleを触ってる状態。ただし、自分に選択権がある場合は採用していない。理由は以下の通り。

### 好きなところ

* Groovy スクリプトなので自由にタスク決められる
* Kotlin での記述もできる

### 嫌いなところ

* 自由度高すぎる=複雑にしようと思えばどこまででも複雑にできる。
* あるゴール（やりたいこと）を記述する方法が複数あり、一体どれが適切な姿なのか一切わからない。
* プラグインなどである程度デフォルトがつくられているが、タスクの名前を自由に決めるので、人によってルールが変わる→毎回説明がいる。引き継ぎ面倒臭い。
* IDE を Eclipse にするとやたらめんどくさい。Eclipse で設定した内容を build.gradle に記述しておかないと消失する。
* 基本的な機能も記述しなければいけない（MavenにおけるProfile切替みたいなこととか）
* build.gradle の文字コードが実行環境に依存してる
* Groovy、Kotlinと複数の記述方法があり、プロジェクトにより採用がバラバラになる＝覚えることが増える
* モジュール依存を記載するにも2種類あって表記が揺れて、そろえるのにいちいち面倒くさい
* ~~結局ivy使ってるので、Mavenと両方つかうとローカルリポジトリが膨大に~~


## Ant

### 好きなところ

* できることが Maven よりもちょっとおおい

### 嫌いなところ

* タスクの名前を自由に決めるので、人によってルールが変わる→毎回説明がいる。
* プロジェクトのディレクトリ構成のスタンダードがない（自由だからね）
* ライブラリのバージョン管理ができない（思想にない。ivyがあるけど、それなら Maven でいい）
* 設定が XML なのかプロパティファイルに分散することがおおい
* プロファイルの切り替えみたいなことがデフォルトでない
Railsのコントローラーのspecを書くとき、subject(:response)と書いてみる

# subject(:response)

僕はRailsでController書いている時に一つのactionについて、こんな風にspecを書く事が多いです。

```rb
subject(:response) do # ←ココ
  get :index
end

it { expect(response.status).to eq 200 }
```

これは普通に考えると、rspec-railsで自動的にresponseを作ってるし、既にあるものを上書きしているようで気持ち悪いところもあるんですが、get(post, putなども同様)の返り値も同じなのでまあ従来と同じようにresponseを使ってテストできます。


# なぜわざわざ`subject(:response)`と書くのか

まずsubjectを使うと「ここではこれをテストするんだな」と分かりやすくて個人的に好きというのがあります。

その上で`subject(:response)`と書かずに`subject`とした場合はspecはこんな感じになるかと思います

```rb
# subject(:response)ってやらない場合
subject do
  get :index
end

# これだとsubjectがresponseだって分かりにくい
it { expect(subject.status).to eq 200 }

# これだと既に書いてあるgetと同じもの書くのが面倒(渡す値多いとなおさら)
it do
  get :index
  expect(response.status).to eq 200
end

# これだとわざわざ一回subjectと書くのが面倒
it do
  subject
  expect(response.status).to eq 200
end
```


それに対して、`subject(:response)`とすると`it`の中で`response`が呼ばれた時に`subject`の中身が走って、必要な時にgetをやってくれるのでなんだか良いと思ってます。

```rb
subject(:response) do
  get :index
end

it { expect(response.status).to eq 200 } # responseが呼ばれた時にsubjectのブロックが実行される
```

というわけで`subject(:response)`ってやっておくとコントローラーのspecを書いてる時の細かい悩みが解決する…気がしてます。

なんかrspec-railsなどの挙動で勘違いしているだろうか。

# その他

ここではRailsコントローラーの中でもactionのunitテストを書く場合を考えてます。
Sinatra、Padrinoなどでも同様に出来るとは思いますが実際に試してないです。
ComposerでOpenpearのパッケージをインストールする方法

PEARのリポジトリとして、`http://openpear.org`を追加すれば、`pear-openpear.org/パッケージ名`でパッケージを指定できる。

### コマンドでの使用方法

* `composer.phar`が`composer`としてパスが通っている場合
（Windowsの場合は`composer.bat`などを用意してパスが通っている場合）

    ```
    composer config repositories.0 "pear" "http://openpear.org"
    composer require "pear-openpear.org/パッケージ名" "バージョン"
    ```
tmlib.jsをPhoneGap(Cordova)で使う場合の注意点

先日、tmlib.jsとCordovaで作ったiOSアプリをリリースしたのですが、はまった点をまとめます。
見当違いの事を書いている可能性もありますので、間違いや気づいた事等ありましたらご指摘頂けるとありがたいです。

使用バージョン
tmlib.js 0.5.0
cordova 3.5.0-0.2.4

##CanvasAppのオブジェクト名にappは使えない
Phonegap/Cordovaでappという名前のオブジェクトを生成しているので、tm.CanvasAppをサンプル等で使用しているappという名前で生成するとエラーは起きませんがPhonegap/Cordovaの機能が使用できなくなります。
ソースを見れば当たり前の話なのですが、気付くまで結構掛りました。

##canvasタグの追加
tmlibはCanvasに描画してますので、index.html内にcanvasタグを追加する必要があります。
無いと動きません。当たり前ですね（汗）

##ShadowBlur等の重いエフェクトは使わない
tmlibに限った事ではないのですが、ShadowBlur等のエフェクトは処理がかなり重たいらしく、動作に深刻な影響がでます。
エミュレータでは全然問題無くても、実機でカクカクになったり…
演出上必要でないのであれば使用しない方が無難です。

##実行速度について
Mobile Safari上での実行に比べるとWebViewで実行した場合の実行速度はかなり遅くなります。
原因はWebView上ではセキュリティの関係上JITコンパイラがオフになっているという事らしいです。
iOS8以降はWKWebViewを使用すると速度的にはかなり改善されます。

##UIWebViewとWkWebViewについて
上記実行速度に関し、iOS8以降でUIWebViewの実行速度は相当に遅い物となります。
iOS8以降はWKWebViewを使用できますので、こちらを使用すると良いでしょう。
WKWebView化については以下のプラグインを使用しました。
Telerik-Verified-Plugins/WKWebView
https://github.com/Telerik-Verified-Plugins/WKWebView.git

対応していないOSバージョンの場合は自動的にUIWebViewに切り替えてくれるので、こちらが意識する事はありません。

##音声再生周りについて
UIWebViewでは、WebAudioを利用出来ますので音声再生には問題ありません。
WkWebViewについて、当初WebAudioが利用出来ないらしく音声再生が出来なかったのですが、特にアップデートも何も掛ける事無くいつのまにか使える様になっていました。
StackOverflowにも同様の質問が上がっており、環境依存では無い問題のはずですが、使える様になった原因は不明です。
ちなみに、Cordova標準の音声再生とローレイテンシオーディオのプラグインがありますが、多重再生が出来ない、再生が遅れる等の問題があり、ゲームへの使用には不向きです。

##GameCenterについて
プラグインは下記を使用しました。
crossley/cordova-plugin-game-center
https://github.com/leecrossley/cordova-plugin-game-center.git

スコア登録等に関して通常使用で問題ありませんが、無名関数内等でsubmitScore等に渡すパラメータにローカル変数を使った場合、スレッド間のデータアクセスエラーが起こる場合があります。
自分は以下の様に対処して解決しました

```lang:JavaScript
gamecenter.submitScore(successCallback, failureCallback, {
    score: 10,
    leaderboardId: "board1"
});
```

iTunes connectで行うLeaderBoardの設定は、アプリがReady for saleになると一切変更が出来なくなりますので、厳重にチェックした方がいいです。
一回、スコア登録の最高スコアと最新スコア、昇順と降順の設定を間違えて失敗しました。

##ステータスバーについて
下記プラグインを利用してステータスバーを消しております。
apache/cordova-plugin-statusbar
https://github.com/apache/cordova-plugin-statusbar.git

プラグインインストール後にplatforms/ios/<プロジェクト名>内にある<プロジェクト名>-info.plistへ以下を追加してください。
`
<key>UIStatusBarHidden</key>
<true/>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
`

##AdMob使用時の注意点
プラグインは下記を使用しました。
floatinghotpot/cordova-admob-pro
https://github.com/floatinghotpot/cordova-admob-pro.git

サンプル通りに設定すれば問題ありませんが、テストモードを有効にした場合でも実機デバッグ時に表示されるバナーおよびインタースティシャルは本番っぽいです。
誤ってタッチした場合、不正クリックとみなされ最悪アカウント停止される可能性もありますので注意が必要です。

iOS7で画面上部または下部にバナーが表示された時点で画面のリサイズが行われ、若干画面が小さく表示されてしまいます。
ゲーム実行上は問題無かったので対処はしておりません。

##アプリケーションのバージョン番号について
プロジェクトが入っているフォルダ直下のconfig.xml内にバージョン番号を記述してあります。

```lang:config.xml
<widget id="jp.hoge.hogehoge" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>hogehoge</name>
```

<widget>タグのversionを適宜書き換えてください。
cordovaでのビルド時、xcodeのアプリバージョン番号がこの値に書き換えられます。

以下、気付いた事があったら追記予定…
ProjectEuler 21 

問題
---
d(n) を n の真の約数の和と定義する. (真の約数とは n 以外の約数のことである. )
もし, d(a) = b かつ d(b) = a (a ≠ b のとき) を満たすとき, a と b は友愛数(親和数)であるという.

例えば, 220 の約数は 1, 2, 4, 5, 10, 11, 20, 22, 44, 55, 110 なので d(220) = 284 である.
また, 284 の約数は 1, 2, 4, 71, 142 なので d(284) = 220 である.

それでは10000未満の友愛数の和を求めよ.
http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%2021

回答
---
第12問と同じく、エラストテネスの篩を少し修正して、約数の和を返す関数を作成した。
http://qiita.com/cof/items/222d51c09b043da974af

```
def factor_sum_seq(max):
  dl = [0] + [1]*(max-1)
  seq = range(max) 
  for i in seq[2:]:
    for j in seq[i*2::i]:
      dl[j] += i
  return dl
```

上記関数は、次のとおりに動く。(3/2 説明を修正)

```
dl[]: 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20
i=2 : 1  1  1  3  1  3  1  3  1  3  1  3  1  3  1  3  1  3  1  3 
    #2の倍数(2自身を除く)に2が加えられる。
i=3 : 1  1  1  3  1  6  1  3  4  3  1  6  1  3  4  3  1  6  1  3
    #3の倍数(3自身を除く)に3が加えられる。
i=4 : 1  1  1  3  1  6  1  7  4  3  1 10  1  3  4  7  1  6  1  7
    #4の倍数(4自身を除く)に4が加えられる。
```

iを所定の数の平方根まで動かすことにより、各iの倍数、換言すれば各iを真の約数として持つ数に、当該約数各i加えられるので、真の約数の和が適切に算出される。

これを利用して次のように求めた。

```
def cof():
  MAX = 10**4
  seq = range(MAX)
  dl = factor_sum_seq(MAX)
  ans=0
  for i in seq:
    if dl[i]<MAX and i == dl[dl[i]] and i != dl[i]:
      ans += i

  print ans

cof()
```
Ractive.jsでの"event.preventDefault();"


[Ractive.js](http://www.ractivejs.org/) 僕にはとてもわかりやすいライブラリなので楽しいです。
以前つまずいていたことがあるので残しておきます。
タイトルをみて、「もう知ってる」という方は読む必要は無いです。

##aタグにon-clickイベントをセット

例えばRactiveテンプレートで、aタグなどにon-clickイベントを仕込んで、

```
{{#element}}
<a href="#popup-{{id}}" on-click="popup:{{id}}">{{text}}</a>
{{/}}
```

popupイベントの引数をractive.data.popupElementにセットしたい。

```javascript
ractive.on(
	popup: function(event,id){
		this.set('popupElement',id);
	}
)
```

以上の概念だけで書くと上記のようになるけど、
これだと"\#popup1"へのhashchange eventがふつうに発火してしまい、
意図しない動作になることがあります（href属性を書かないとリンクタグとして表示されない）。

##hashchange eventをキャンセルするには?
jQueryなどでよくやってたかんじで

```
//bad：使えません
ractive.on(
	popup: function(event,id){
		event.preventDefault();
		this.set('popupElement',id);
	}
);
```

と書いてしまいますが、これではhashchange eventをキャンセルできません。

**RactiveはVirtual DOMを使っている**というところがポイントでした。

ここで引数に入っているeventは、Virtual DOMのeventであって、
生DOMのeventではないということなのでした。
だから event.preventDefault(); としても何も起こらない。

でもちゃんと生のDOMのeventを取って来れます。

ちゃんとドキュメントに書いてありました。

http://docs.ractivejs.org/latest/proxy-events#the-event-object
>event.original - the original DOM event, if available


##正しい書き方

"event.original"で生のDOMのデータを拾えます。

```javascript
ractive.on(
	popup: function(event,id){
		event.original.preventDefault();
		this.set('popupElement',id);
	}
);
```

または、これはjQueryなどでもよくやったやり方で、


```javascript
ractive.on(
	popup: function(event,id){
		this.set('popupElement',id);
		return false;
	}
);
```

これでOK。hashchangeをキャンセルできます。

"return false"はRactive.jsのver 0.4などでは使えなかったのですが、ver 0.6から使えるようになったようで、

>If you return false from a proxy event handler, ractive will automatically call both preventDefault() and stopPropagation() on the original DOM event.


"event.originalpreventDefault()" と "event.originalstopPropagation()"を両方発火するようです。
"preventDefault()" だけにしたい、という場合のみ、"event.original.preventDefault();"を使うのが良さそうです。



ドキュメントに書いてあるように、更にこのeventオブジェクトからはVirtual DOM内のいろんなデータを拾うことが出来て、自分で理解しているものでは

```
event.name //イベント名、上の例だと"popup"
event.node  //上の例だとクリックされた<a>要素のDOM node
			//data-属性などを拾うのに使える
event.keypath  //上の例だと"element.クリックされた要素のイテレーションのindex値"
event.original  //生のDOM
```

などがあります。いろいろ便利です。
これらの使い方によってはクリックイベント関数の引数がいらなくなったりします。
ProjectEuler 20

問題
---
n × (n - 1) × ... × 3 × 2 × 1 を n! と表す.

例えば, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800 となる.
この数の各桁の合計は 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27 である.

では, 100! の各桁の数字の和を求めよ.
http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%2020

回答
---
map()の練習


```
def main():
  n = 1
  for i in range(1,101): n*=i   
  ans = sum(map(int, str(n)))
  print ans

main()
```

2.6以降ならば階乗は以下で求められる模様。
```
import math
math.factorial(100)
```
Project Euler 19 

問題
---
次の情報が与えられている.

1900年1月1日は月曜日である.
9月, 4月, 6月, 11月は30日まであり, 2月を除く他の月は31日まである.
2月は28日まであるが, うるう年のときは29日である.
うるう年は西暦が4で割り切れる年に起こる. しかし, 西暦が400で割り切れず100で割り切れる年はうるう年でない.
20世紀（1901年1月1日から2000年12月31日）中に月の初めが日曜日になるのは何回あるか?
http://odz.sakura.ne.jp/projecteuler/index.php?cmd=read&page=Problem%2019

回答
---
日曜:0 月曜:1 火曜:2 水曜:3 木曜:4 金曜:5 土曜:6
とする。
前月の1日の曜日dateと前月の日数daysから次の式により次月の1日の曜日nextdateは算出できる。(7は曜日数)。これを利用して以下のコードを書いた。

```
nextdate = (date+days) % 7
```


```py
# -*- coding: utf-8 -*-
def getdays(month, year):
  if month in [1,3,5,7,8,10,12]:
    return 31
  elif month in [4,6,9,11]:
    return 30
  elif year%400 == 0:
    return 29
  elif year%100 == 0:
    return 28
  elif year%4 == 0:
    return 29
  else:
    return 28

def nextdate(date, month, year):
   return (date + getdays(month, year)) % 7

def nextmonth(month, year):
   if month == 12:
      #12月であれば次の年へ
      return (1, year+1)
   else:
      return (month+1, year)

def main():
  STARTYEAR = 1901
  LASTYEAR = 2000
  (date, month, year) = (1, 1, 1900)
  ans = 0

  while year <= LASTYEAR:

    #前月のdate,month,yearから次月のdate(曜日)を取得
    date = nextdate(date, month, year)

    #month, yearをインクリメント
    (month,year) = nextmonth(month, year)

    #yearが範囲内でdateが0(日曜日)ならansに1を加える。
    if STARTYEAR <= year <= LASTYEAR and date == 0:
      ans += 1

  print ans

main()
```
Rspec feature  afterブロックは実行失敗時の対応

@jnchito さんの指摘で、本件について原因を追究して、再修正します。

### 背景
featureのrspecの中に、
複数シナリオの共通部分のテストをリファクタリングしたいです。

featureをspecファイル下記のように記述しました。
after内のテストがエラーが発生しました。


```rb
require 'rails_helper'


feature 'guest add item to the cart', type: :feature do
  after do
    # シナリオ'a'実行後、絶対通れると思ったが、エラーが発生します。
    expect(current_path).to eq cart_path
  end

  describe 'non sign in user' do
    context 'when add a new item to cart' do
      scenario 'a' do
        # 通れたケースです
        ...  
      end

      scenario 'b' do
        # まだ書いていません。
      end
    end
  end
end
```

### 原因
まず、テストの書き方を置いといて、
上記のテストが失敗した原因を説明しますと。

実行順番は下記の(1)-(4)

```rb
require 'rails_helper'

feature 'guest add item to the cart', type: :feature do
  after do
    # シナリオ'a'実行後、絶対通れると思ったが、エラーが発生します。
    # (2) (4 ×)
    expect(current_path).to eq cart_path
  end

  describe 'non sign in user' do
    context 'when add a new item to cart' do
      scenario 'a' do
        # 通れたケースです
        # (1)
        ...  
      end

      scenario 'b' do
        # まだ書いていません。
        # (3)
      end
    end
  end
end
```

`after`＝`after(:each)`、実行タイミングは各シナリオごとです。
そのために、シナリオaが実行成功しましたが、
シナリオbが定義されたが、実施内容は何も書いていないので、
空実行後`after`の内容を実施されると、エラーになります。

### テスト書き方の間違い

@jnchito さんが指摘の通りですが、`after`ブロック内に、`expect`のケースを書くのが
間違いです。
`after`ブロックに書くべきなのは、テスト実施後の後処理です。（例：ログアウト、データクリアなど）


### テストの修正方法
そして、今回の件で、
各シナリオの一部共通部分だけを抽出で記述することよりは、
シナリオの分割方法から考えて、わかりやすく修正することです。
@jnchito の指摘のように、
> [RSpec入門・その1](http://qiita.com/jnchito/items/42193d066bd61c740612)にも書きましたが、テストはDRYさよりも読みやすさやシンプルさの方が大事です。
fullcalendarで現在時刻にラインを入れる

#概要
fullcalendarで現在時刻の所に赤い線を入れる。
1分ごとに動く。
こんなやつ↓
![Screenshot 2015-03-01 13.14.05.jpg](https://qiita-image-store.s3.amazonaws.com/0/55371/6e812403-435a-fa6f-14bf-7f976382f67f.jpeg)

#使用環境
Rails v4.1.0
fullcalendar v2.3.0
jquery-rails v3.1.2

#ロジック
１、カレンダーはテーブル形式なので全く同じテーブルをもう一つ挿入する。
２、今日の日付またはユーザーの設定などから曜日を取得。
２、取得した曜日のところだけcssでvisibility == visibleを設定して表示する

#実際のコード

```js:calendar.js
function setNowBorderLine(calendar){
    var elm = $('.fc-today.fc-state-highlight');
    if(elm.length == 2) {
        var height = $('.fc-time-grid').height();
        var border_height = height/1440;
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var per = Math.round((hours * 60 + minutes) * border_height);
        var html =('<table id="now_border" style="width: 100%;
　　　　　　　　　　　line-height:0px;"><tr><td id="yajirushi"
 　　　　　　　　　　　class="fc-axis 　fc-widget-content"
 　　　　　　　　　　　style="width:31px;">▶</td>');
        for (var i = 0; i < 7; i++) {
               html += '<td class="week_no' + i + '"'+'>&nbsp</td>';
            }
        html += '<td style="border:none;display:none;">&nbsp;</td></tr></table>';
        $('#now_border').remove();
        $('.fc-time-grid').prepend(html);
        $('#now_border').css('top',per +'px');
        $('#now_border').find('td').removeClass('disp-now-border');
        var youbi = now.getDay();
        var user_setting_youbi = $('#week-start-day').data('week-start-day');
        if (user_setting_youbi == 0 ) {
            $('td.week_no'+youbi).addClass('disp-now-border');
        }else if(user_setting_youbi == 1){
            if(youbi == 0){
            var getsuyoubi = 6
            }else{
            var getsuyoubi = youbi - 1
            }
            $('td.week_no'+getsuyoubi).addClass('disp-now-border');
        }else if(user_setting_youbi == 10){
            $('td.week_no0').addClass('disp-now-border');
        }
        $('.disp-now-border').css('visibility', 'visible');
        window.setTimeout(function() {
                this.setNowBorderLine();
        }, 60000);
    }
}
$(document).ready(function(){
     var calendar =  $('#fullcalendarを表示するid名').fullCalendar({});
     setNowBorderLine();
});
```
```css:calendar.css.scss
#now_border{
  	position: absolute;
  	z-index: 100;
  	.disp-now-border{
    	border-bottom: 1px solid red;
    	display: block;
    	position:relative;
   	}
}
```


tableのtrには▶︎を追加し、一番左に設置して目印にしました。
tdは曜日によって分けないといけないので、それぞれ違うクラスを付与しないといけない。
上記はユーザーの設定に応じて曜日を変えるようにしています。
最後にSetTimeoutを使って1分ごとに実行するようにすればリアルタイムで線が動きます。
最初に var elm = $('.fc-today.fc-state-highlight');を取得しているのは
カレンダーのPrev、Nextをクリックして他の週を表示したときに
ラインが出ないようにするためです。
VisualStudioで認証プロキシを超えてサインインする

これ。
http://blogs.msdn.com/b/rido/archive/2010/05/06/how-to-connect-to-tfs-through-authenticated-web-proxy.aspx

407認証エラーが返された際に表示される対策から辿れる。
https://msdn.microsoft.com/ja-jp/vstudio/dn771556.aspx?f=255&MSPPError=-2147217396
Stackの解除

## 参考

* [%Switch can not be un-provisioned when it is physically present | ネットワークの私的メモ](http://netserc.blog63.fc2.com/blog-entry-336.html)
* [Catalyst 3750 シリーズ スイッチでの一般的な問題のトラブルシューティング - Cisco Systems](http://www.cisco.com/cisco/web/support/JP/100/1008/1008515_troubleshoot_3750-j.html)

## 対応

show int しても `Fa1/0/XX`だけではなく`Fa2/0/XX`が存在することに気がつき調べてみるとStack設定が残っていることがわかった。

```bash:現状確認
#show switch
Switch/Stack Mac Address : 0014.69a5.XXXX
                                           H/W   Current
Switch#  Role   Mac Address     Priority Version  State
----------------------------------------------------------
 1       Member 0000.0000.0000     0      0       Provisioned
*2       Master 0014.69a5.XXXX     1      0       Ready
```

```bash:修正
#conf t
Enter configuration commands, one per line.  End with CNTL/Z.
(config)#switch 2 renumber 1
WARNING: Changing the switch number may result in a
configuration change for that switch.
The interface configuration associated with the old switch
number will remain as a provisioned configuration.
Do you want to continue?[confirm]
Changing Switch Number 2 to Switch Number 1
New Switch Number will be effective after next reboot

(config)#^Z
```

```bash:再起動
#reload

System configuration has been modified. Save? [yes/no]: yes
Building configuration...
[OK]
```

## 再起動後

```bash:確認
#show switch
Switch/Stack Mac Address : 0014.69a5.XXXX
                                           H/W   Current
Switch#  Role   Mac Address     Priority Version  State
----------------------------------------------------------
*1       Master 0014.69a5.XXXX     1      0       Ready
 2       Member 0000.0000.0000     0      0       Provisioned
```

* switch 2を削除すればよい。

```bash:
(config)#no switch 2 provision ws-c3750-24ts
```

```bash:確認
#show switch
Switch/Stack Mac Address : 0014.69a5.XXXX
                                           H/W   Current
Switch#  Role   Mac Address     Priority Version  State
----------------------------------------------------------
*1       Master 0014.69a5.XXXX     1      0       Ready
```
Cocoa Pods のビルドで詰まった




# Podsの中身のフレームワークをimportしようとしても、存在しないってエラーが出る。

プロダクトの設定 -> Build Setting -> Header Search Path
に
"${PODS_ROOT}/Headers/"
を追加。

[参考にしたページ (ja.stackoverflow)](http://ja.stackoverflow.com/questions/7043/pods%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%82%A8%E3%83%A9%E3%83%BC)



# Podsファイル同士の依存関係でビルドエラー

[manage scemes...]を開いて、依存の順番に一つづつビルドしていけばOK。

参考にしたページ
[http://qiita.com/yokomotod/items/884f624cf17ba4a5ef11](http://qiita.com/yokomotod/items/884f624cf17ba4a5ef11)
Raspberry Pi で rbenv / Ruby on Rails を動かすまでの個人的メモ


PCでのRails開発環境と同じものにしたかったので、rbenvでrubyを入れてrailsを動かしました。
ただ、ビルドに時間がかかるのでおすすめはしません。
※Raspberry pi 2 / Rails 4.2.0 で動作確認

# 前準備

必要に応じて設定

```
$ sudo raspi-config
```

リポジトリのアップデートも忘れずに

```
$ apt-get update
$ apt-get upgrade
```

# rbenvのインストール
ビルドに時間がかかるので注意。

現在のrubyバージョンを確認

```
$ pi@raspberrypi ~ $ ruby --version
ruby 1.9.3p194 (2012-04-20 revision 35410) [arm-linux-eabihf]
```

```
# OpenSSLのインストール rbenvのインストールに必要
$ apt-get install libssl-dev
```

```
$ cd /usr/local
$ git clone git://github.com/sstephenson/rbenv.git rbenv
$ mkdir rbenv/shims rbenv/versions
$ chgrp -R users rbenv
$ chmod -R g+rwxXs rbenv

```


/etc/profile.d/rbenv.sh を作成して下記の内容を記述

```
export RBENV_ROOT=/usr/local/rbenv
export PATH="/usr/local/rbenv/shims:/usr/local/rbenv/bin:$PATH"
eval "$(rbenv init -)"
```

再起動後 rbenv のコマンドが通ることを確認

```
$ reboot
$ pi@raspberrypi ~ $ rbenv --version
$ rbenv 0.4.0-129-g7e0e85b
```


ruby-buildも入れる

```
git clone git://github.com/sstephenson/ruby-build.git ruby-build
ruby-build/install.sh
rbenv rehash
```

rubyのビルドに必要なのでインストール

```
$ sudo apt-get install ruby-dev
```

ビルドします！
※Raspberry Pi 2 で 1時間ほどかかります。Raspberry Pi だと2時間以上かかりました。

```
$ pi@raspberrypi ~ $ rbenv install 2.2.0
Downloading ruby-2.2.0.tar.gz...
-> http://dqw8nmjcqpjn7.cloudfront.net/7671e394abfb5d262fbcd3b27a71bf78737c7e9347fa21c39e58b0bb9c4840fc
Installing ruby-2.2.0...
Installed ruby-2.2.0 to /usr/local/rbenv/versions/2.2.0
```

```
$ pi@raspberrypi ~ $ rbenv global 2.2.0 # 2.2.0をglobalに設定
$ pi@raspberrypi ~ $ ruby --version # バージョン確認
$ ruby 2.2.0p0 (2014-12-25 revision 49005) [armv7l-linux-eabihf] # 変更を確認!
```

# Railsのインストール

```
$ pi@raspberrypi ~ $ gem install rails
Fetching: thread_safe-0.3.4.gem (100%)
Successfully installed thread_safe-0.3.4

・・・

Parsing documentation for rails-4.2.0
Installing ri documentation for rails-4.2.0
Done installing documentation for thread_safe, tzinfo, i18n, activesupport, rails-deprecated_sanitizer, mini_portile, nokogiri, rails-dom-testing, loofah, rails-html-sanitizer, erubis, builder, actionview, rack, rack-test, actionpack, tilt, multi_json, hike, sprockets, sprockets-rails, bundler, thor, railties, globalid, activejob, mime-types, mail, actionmailer, arel, activemodel, activerecord, rails after 5480 seconds
33 gems installed
```


```
$ apt-get install libsqlite3-dev
$ bundle install
$ rails s -b 0.0.0.0
```

サーバーの起動を確認すれば完了！

# rbenvのインストール方法 参考:
http://yatmsu.hatenablog.com/entry/20120413/1334300058
http://www.iconoclastlabs.com/blog/ruby-on-rails-on-the-raspberry-pi-b-with-rbenv
Pukiwikiを無理やりMarkdown記法に変えてみた

##とりあえず実現した
PukiwikiがMarkdownで書けたらいいなと思ったPukiwikiユーザーさんはたくさんいらっしゃると思います。
いないですかね……
僕はそういったものがどうしても欲しくて、PukiwikiライクでMarkdownなCMSを来る日も来る日も探し回りました。

そして結局見つけられませんでした。

でもよく考えたらPukiwikiを改造すればすぐできそうです。
ということで、とりあえず無理やり？実現しました。
lib/convert_html.php をちょっと修正しただけですが。。。

作ったもの：
https://github.com/dotneet/pukiwiki-md

##Pukiwiki記法と融合
作ってすぐに、Markdownで書けるようになってもPukiwikiの機能が全部使えなくなると辛いことに気づきました。
最初に気付くべきでしたが。
なのでなんとか許容できる範囲でPukiwiki記法と融合させています。

- [[ページ名]]のようなPukiwikiの内部ページリンクの記法はそのまま使えます。
- ブロックプラグインの呼び出しがMarkdownのヘッダの記法と被るため、ブロックプラグイン呼び出しは行頭を"#"から"!"に変えました。
  例：!recent(20)
- インラインプラグインは同じ記法で使用できます

ただ現在の実装では、すべてのプラグインを適用した後にMarkdownのパーサーにかけているため、プラグインの出力結果によってはうまく動作しない可能性があります。

##サンプル

<pre>
#hoge
文章です。
[[FrontPage]]で内部リンクを張れる。
もちろん[ほげほげ](http://example.com)というMarkdownのリンクの書き方もできる。

##リスト
- foo
- bar

##画像を表示(Pukiwikiプラグインが使える)
!ref(テスト/test.jpg)
</pre>
routeのmoduleとnamespaceとscopeの違い

- `namespace`は、URLもcontroller格納フォルダも、指定のパスになる

```ruby
namespace :admin do
  resources :users
end
	
# rake routes
        Prefix Verb   URI Pattern                     Controller#Action
   admin_users GET    /admin/users(.:format)          admin/users#index
               POST   /admin/users(.:format)          admin/users#create
new_admin_user GET    /admin/users/new(.:format)      admin/users#new
dit_admin_user GET    /admin/users/:id/edit(.:format) admin/users#edit
    admin_user GET    /admin/users/:id(.:format)      admin/users#show
               PATCH  /admin/users/:id(.:format)      admin/users#update
               PUT    /admin/users/:id(.:format)      admin/users#update
               DELETE /admin/users/:id(.:format)      admin/users#destroy
```

- `module`は、controllerの格納フォルダだけ、指定パスになる
	
```ruby
scope module: :admin do
  resources :users
end

# rake routes
   Prefix Verb   URI Pattern               Controller#Action
    users GET    /users(.:format)          admin/users#index
          POST   /users(.:format)          admin/users#create
 new_user GET    /users/new(.:format)      admin/users#new
edit_user GET    /users/:id/edit(.:format) admin/users#edit
     user GET    /users/:id(.:format)      admin/users#show
          PATCH  /users/:id(.:format)      admin/users#update
          PUT    /users/:id(.:format)      admin/users#update
          DELETE /users/:id(.:format)      admin/users#destroy
```

- `scope`のみの場合は、URLだけ、指定のパスになる

```ruby
scope '/admin' do
  resources :users
end

# rake routes
   Prefix Verb   URI Pattern                     Controller#Action
    users GET    /admin/users(.:format)          users#index
          POST   /admin/users(.:format)          users#create
 new_user GET    /admin/users/new(.:format)      users#new
edit_user GET    /admin/users/:id/edit(.:format) users#edit
     user GET    /admin/users/:id(.:format)      users#show
          PATCH  /admin/users/:id(.:format)      users#update
          PUT    /admin/users/:id(.:format)      users#update
          DELETE /admin/users/:id(.:format)      users#destroy

```

## 参考記事
- [ルーティングを極める (後編)](http://techracho.bpsinc.jp/hachi8833/2014_03_03/15619)
- [RailsGuides(日本語版) 2.6 コントローラの名前空間とルーティング](http://railsguides.jp/routing.html#%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%81%AE%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E3%81%A8%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)