OmniAICreator/Qiita-1.07M huggingface dataset:
ニフティクラウドmobile backend(mBaaS)などでGCMとの連携に必要な準備(2014年3月時点)

# GCMとの連携に必要な準備

## 概要

このチュートリアルは、[ニフティクラウド](http://cloud.nifty.com)のmBaaSである「[ニフティクラウド mobile backend](http://mb.cloud.nifty.com/about.htm)」で、
プッシュ通知を使うためのものです。
（と、言いながら実はmobile backendあんまり関係ありません。GCMを使いたい人なら誰でも通る道だと思います。）


mobile backendのAndroid端末へのプッシュ通知は、GCM(Google Cloud Messeging)と連携しています。
mobile backendに登録されたプッシュ通知を、GCMに送信することで、
各端末にプッシュ通知が受信される仕組みです。


mobile backendとGCMを連携させるのに必要なことは、
ダッシュボードからGCMと連携するためのAPIキーを設定することだけです。

このチュートリアルでは、GCMと連携するためのAPIキーを取得する流れについて
説明していきます。


## APIキーを取得するのに必要なこと

* Googleアカウント

Googleアカウントを作成していない方は、アカウントの登録を行ってください。
Googleアカウントを登録するのに料金は発生いたしません。
以下では、アカウント登録後の手順について説明していきます。

## APIキーを取得するまでの流れ

### Google Developers Consoleにアクセス

APIキーの取得は、Google Developers Consoleにて行います。
[https://console.developers.google.com](https://console.developers.google.com)にアクセスしてください。

### プロジェクトを新規作成する

左メニューにあるProjectsの項目を開くと、プロジェクトの一覧画面になります。
画面の上側にCREATE PROJECTと書いてあるボタンがあるので、クリックします。

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm00.png" alt="プロジェクト新規作成">

新規にプロジェクトを作成するポップアップが開くので、
プロジェクトの名前とプロジェクトIDを入力してください。

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm01.png" alt="名前とIDの入力">

### GCMを有効にする

プロジェクトが作成されたら、プロジェクト名をクリックして詳細を開きます。
左メニューのAPIs & authをクリックし、子メニューとして出てくるAPIsを表示します。
全APIのON/OFFを切り替えるページが開くので、Google Cloud Messaging for AndroidをONにしてください

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm02.png" alt="GCMをONに">

### APIキーを作成する

次に左メニューからAPIs & authの中のCredentialsを開き、
Public API accessの段落にあるCREATE NEW KEYボタンをクリックします。

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm03.png" alt="API KEYの作成1">

Create new keyというポップアップが表示されるので、Server Keyを作成してください。

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm04.png" alt="API KEYの作成2">

APIのアクセスを許可するIPアドレスを入力する画面が開きますが、
何も入力せずにCreateをクリックしてください。

<img src="http://mb.cloud.nifty.com/assets/images/tutorial/push_notification_setup/setupgcm05.png" alt="API KEYの作成3">

作成されたAPI keyが表示されるので、このキーをmobile backendに登録します。

mobile backendでの手順は、[こちら](http://mb.cloud.nifty.com/doc/dashboard/push.html)をご覧ください。
OnsenUIのiconプロパティで利用できるアイコン一覧

<a href="http://onsenui.io/">OnsenUI</a>のons-iconやons-tabbar-item等のiconプロパティで使える
iconの一覧は<a href="http://fortawesome.github.io/Font-Awesome/icons/">Font Awesomeのicons</a>で確認できる。
【超速和訳】海外のUI/UXの１０箇条（＋３０箇条・・・）

「確認フォームは表示せず、ひとまず実行させた後に、画面下部などにUndoを表記して戻せるようにしろ」
「疑問系？よりも断定を使え！」
「サインアップと表示するだけでなく、ユーザの利益に繋がる文言も添えろ。「クーポンを利用する（ユーザ登録）」など」

こんな感じで良いネタでしたので、
自分のメモ用にざっと和訳してみました。

[Goog UI(英語)](http://www.goodui.org/)

1.コンテンツは複数列より１列でまとめるべし
2.短期間のプレゼントキャンペーンを添えるべし
3.いつの間にか増えている重複項目に注意すべし
4.利用者の声を掲載せよ
5.CVボタンを繰り返し表示せよ
6.サイト上の現在位置をフォーカスさせろ
7.複数選択項目は同列で表示せず、おすすめを１つ選び、それを目立たせろ
8.確認フォームは表示せず、ひとまず実行させた後に、画面下部などにUndoを表記して戻せるようにしろ
9.全ての人！ではなく、特定の人としろ。
10.？よりも断定！
11.色彩のコントラクトを使え！
12.商品掲載は私が作りました的な情報、地域などもそえろ
13.一度に表示する入力項目は少なく。
14.短い選択項目はプルダウンとせず、すべて表示するべし
15.文章など表示する際に一部隠すなどはせず、全部表示しろ、ただし通し番号をつけるなど文章間にリズムをつけること
16.CV以外のリンクはつけるな
17.項目表示などで何かしらのアクションがある場合はそれを明示すること。例えばある商品を購入したら一覧でその商品に「済」などを表示するなど。
18.サインアップなどと表示するだけでなく、ユーザの利益に繋がる文言も添えろ。「クーポンを利用する（ユーザ登録）」など
19.更新、削除ボタンは別枠とせず、対象項目と一緒に表示し、マウスホバー時に表示しろ
20.ユーザ登録などは遷移せず、同画面で一緒に行え。
21.状態遷移などは瞬時(0.5s)に変化させて気付かせる。
22.すぐにユーザ登録などではなくデモを使って導け
23.枠線は極力避けて色や空白で代用すること
24.商品の特徴よりもユーザの利点で説明しろ
25.検索結果など結果がない場合は、０とはせず次に繋がるアクションを表示しろ
26.オプトインよりもオプトアウト。○○を希望するチェックボックスは使わずYesNoの２択でYesを選択したラジオボックスを使う
27.ボタンなどの位置、色、形などは一貫性を持たせる
28.入力フォームで過去に入力した内容等予測可能な項目は事前に入力した状態で表示する
29.一般的な表示規約に従う。設定のアイコンは歯車、閉じるは画面右上、戻る・進むの位置は左、右など。
30.人は利益よりも損失を嫌う。よって損失を強調すべし
31.項目ごとに段落を使え
32.項目は用途ごとにグループ化すべし
33.入力項目は最後にエラーチェックせず、都度エラー表示すること
34.入力項目は寛容とすべし
35.出来ないと表示するだけでなく、いつ可能かを明示すべし
36.豊富よりも希少性。残りいくつなど希少性を明示すべし
37.ゼロから入力させるよりも、いくつか提案すべし
38.リンク、ボタン、入力フォームは色や大きさなどで目立たせるべし
39.待ち時間は一気に表示するよりも順に早く表示すべし
40.ボタン押下の操作だけでなくキーボードショートカットも使え
Python モジュールの import をアルファベット順にソートする


Django で共同作業していて、モジュールのインポート順を標準ライブラリ、サードパーティ、オレオレモジュールで分けてアルファベット順で！と言われたときに、golang の gofmt みたいに勝手にやってくれるものがないかと探してみたらありました。

https://github.com/timothycrosley/isort

導入は非常に簡単で、

```shell
$ pip install isort
```

でインストール後、

```shell
$ isort spam.py
```

で、並び替えて上書きしてくれます。
コミットする前にやりましょう。

設定ファイル ~/.isort.cfg というのを作成すると挙動を変えることができます。

```ini:isort.cfg
[settings]
line_length=120                                                                                                                                                                   
multi_line_output=3
```

1 行 120 文字までを許容するようにするのと、インポートが複数行になったときの改行方法を設定してあります。この場合だと 120 文字越えると、以下のように改行されるようになります。

```python
from third_party import (
    lib1,
    lib2,
    lib3,
    lib4,
)
```

シェルじゃなくて Vim 上でやりたくなったらこちら

https://github.com/fisadev/vim-isort

NeoBundle 等を使っていれば、 vimrc に書くだけです。

```vim:vimrc
NeoBundle 'fisadev/vim-isort'
```

これでコマンドモードで `:Isort` もしくは、ビジュアルモードで並び替えたい行を選択して `<C-i>` で並び替えてくれます。
Objective-Cのデバッグが楽になるプリプロセッサマクロ


別にObjective-Cに限らないけど。

``` your-prefix.m

#define log(arg) NSLog(@"%s: %@", #arg, @(arg));

```

こうしておくと例えば以下の様なコードが走ったときに

``` YourViewController.m
unko(scrollView.contentOffset.y);
```

以下の様なログが吐かれる。

```
2014-03-28 17:50:33.278 AKNDev[0378:10b] scrollView.contentOffset.y: -134
```

## 参考

- [#と##演算子](http://wisdom.sakura.ne.jp/programming/c/c42.html)

## 蛇足：イマドキprintfデバッグかよ的な議論

何度も呼ばれるデリゲートメソッドの吐いてる値をざーっと眺めたい時とかはブレークポイントを指定するより良いと思います。
自動で進んでくれるブレークポイントでログを吐かせる手もあるんですが、使ってみたら非常に重く、指定するためのUIもちょっと使いやすくないので、コードで書いた方が早かったりします。
Movable Type にて 記事に設定されたカスタムフィールドを取得する

こんな感じで取れる。
ただし、カスタムフィールドに対応していないMTOSでは動かないので注意。

``` perl
my $blog_id = (任意のblog id);
my @entries = MT::Entry->load( { blog_id => $blog_id } );
foreach my $entry ( @entries ){
    my $customfields = get_meta( $entry );
    while( my ( $custom_name, $custom_value ) = each %{ $customfields } ){
        print "title: " . $entry->title . "\n";
        print "name: $custom_name\n";
        print "value: $custom_value\n";
    } 
}
```

※とりあえずMTのソースを読んでやってみたんですが、もしマニュアルの「ここに書いてある！」ってのがあれば教えてください。
Movable Type にて 記事に設定されたタグを取得する

こんな感じで取れる。

``` perl
my $blog_id = (任意のblog id);
my @entries = MT::Entry->load( { blog_id => $blog_id } );
foreach my $entry ( @entries ){
    my @tags = $entry->get_tags();
    print Dumper @tags;   # この @tags に設定したタグが記録されている
}
```

※とりあえずMTのソースを読んでやってみたんですが、もしマニュアルの「ここに書いてある！」ってのがあれば教えてください。
file_get_contents( $url ) で gzip圧縮されたコンテンツを取得する

`Accept-Encoding:gzip,deflate` ヘッダつけてリクエスト送ると（サーバ側が対応していれば）gzip圧縮されたレスポンスを取得できる。

```php:
<?php

function aaaa( $url, $gzip = false ) {
  return file_get_contents( $url, false, $context = stream_context_create( array(
    'http' => array(
      'method' => 'GET',
      'header' => 'Accept-Encoding:'.( $gzip ? 'gzip,deflate' : 'identity' )."\r\n",
    )
  ) ) );
}

$url = "http://www.yahoo.co.jp/";

$src_raw = aaaa( $url );       // 通常
$src_gz  = aaaa( $url, true ); // gzip圧縮

var_dump(
  strlen( $src_raw ), // int(23993)
  strlen( $src_gz )   // int(5637)
);

// $src_gz は圧縮されてるから中身確認するには gzdecode ( PHP 5 >= 5.4.0 ) 使ってデコードする必要がある
$src_gz_raw = gzdecode( $src_gz );
```
Node.jsでEclipse Orionさわってみた[メモ]

==========================

[npm:orion](https://www.npmjs.org/package/orion)

* localhostにwebベースのエディタ,確認環境がサクッと構築できる。
* webベースでpluginを作成・配布できる
* 既存アプリに組み込める
* web上GUIでgit連携できるっぽい
Github導入までの道のり

Github導入までの道のり
====================

## Github導入に至った背景

### エンジニア サイド

**バージョン管理ができていないプロジェクトの場合** 

- バージョン管理は必須
    - 変更履歴を残していく
    - 場合により、変更を取り消す
    - 複数人で同時に変更作業を行った場合に、変更内容を出来る限り自動的にマージしてくれる


**バージョン管理ができているが、Github以外を利用している場合** 

- ここ数年で、SubversionからGitへ移行する傾向がある
- リリース作業が面倒
    - バージョン管理サーバーが、外部から接続できない社内サーバーである

* [ローカルコミットができる - SVNを捨ててGitを使うべき5つの理由 - Qiita](http://qiita.com/YusukeHosonuma/items/14c59f3878d640a401a1#1%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B)


### 非エンジニア サイド

> **引用元：[ノンエンジニアチームでGitを導入してみたメモ - Qiita](http://qiita.com/y_saeko/items/ca30aa0833a74bc738b8#0git%E3%81%A7%E8%A7%A3%E6%B1%BA%E3%81%A7%E3%81%8D%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%AE%E7%99%BA%E8%A6%8B%E3%81%A8git%E3%81%9D%E3%81%AE%E3%82%82%E3%81%AE%E3%81%AE%E8%AA%8D%E7%9F%A5%E3%81%AE%E3%82%B9%E3%83%86%E3%83%83%E3%83%97)** 
> 
> * メールかなんかで修正ファイルをZipして送ってアップ依頼してた（双方ともに面倒くさい）
> * いくつかの修正をまとめてHTMLを修正したら、修正中に別の人がさらにHTMLを触ったりしてエライコッタ
> * プログラマがバタバタしてたりで忙しいと全然アップしてもらえないんだけど～…
> * FTPで直接ファイルをアップするので、間違っちゃったときに微妙にコワイ（※一応やらかしたらバックアップファイルから書き戻せるが…）

## バージョン管理とは？

> **引用元：[Git - バージョン管理されていないシステムをバージョン管理していく - Qiita](http://qiita.com/genzouw/items/ce999466123c8c04286a)** 
> 
> バージョン管理システムを使う ( 主な ) 目的は下記の 4 つだと思う。
> 
> * 以前の状態に戻る
> * 変更履歴を調査する
> * プロジェクトを管理する
> * 変更者と変更理由を知る
> * 以下で順を追って説明する。
> * 元々は航空機の部品管理に由来。
> 
> （ネジの装着ミスによりフロントガラスが吹っ飛んだ事件の教訓だったと思う。。）


## Github導入によるメリット

* [はじめてのGit　forデザイナー＆コーダー](http://www.slideshare.net/saekoyamamoto/gitfor)


## Github導入直前の教育向けドキュメント


## Github中級者向けドキュメント

* [こわくない Git](http://www.slideshare.net/kotas/git-15276118)
    - merge の注意(no-fast-forward)
    - rebase の注意


## 用語

* コミット
* ブランチ
* リポジトリ
* チェックアウト
* マージ
Wowza Streaming Engine 4のAMI種類

## 背景
* EC2上に、「Wowza Streaming Engine 4」というAMIを選択するときに、以下の結果が出た![wowza4_ami_on_aws.png](https://qiita-image-store.s3.amazonaws.com/0/13451/d4025730-4fcb-a8c1-2e37-6a06ef0046ff.png)
* この5つのAMIが何か違うかを説明しよう

## 参照
* https://aws.amazon.com/marketplace/search/results/ref=dtl_navgno_search_box?page=1&searchTerms=wowza+4
* http://www.wowza.com/products/streaming-engine/deployment-options/aws

## 種類
* byol
* bundle
* standard
* lickey
* Devpay

## ebs vs. instance-store
* 5つのAMIがあるけど、EC2のroot device typeによって、説明しよう
* その区別は、[ここ](http://www.slideshare.net/imaifactory/ephemeral-ssd)に詳しい説明がある
* ebs
 * メリット：　好きに起動終了できる
 * デメリット：　ebsのIO性能低、料金かかる
* instance-store
 * メリット：　IO性能高、別の料金がなし
 * デメリット：　再起動できるけど、停止（stop）できない、shutdown == terminated

## 説明
【byol】

 * 意味： bring your own license
 * root device type: ebs
 * [ここで](http://www.wowza.com/pricing)、いろいろなライセンスを買われる
  * 開発者向け版（無償、６ヶ月）、５５ドル/月など

【standard】

 * root device type: ebs
 * awsmarketplaceから、直接的に購入でき、課金される(EC2と別の料金)
 * すべての無料アドオンを含んでいる

【bundle】

 * root device type: ebs
 * awsmarketplaceから、直接的に購入でき、課金される(EC2と別の料金)
 * 有料アドオンを含んで、すべてのアドオンを使える

【lickey】

 * 基本的に、byolと同じ
 * しかし、root device type: instance-store


【Devpay】

 * 基本的に、bundleと同じ
 * しかし、root device type: instance-store

## テンポラリライセンスについて
* 参照
 * http://www.wowza.com/resources/WowzaStreamingEngineforEC2_UsersGuide.pdf ```the instance 
uses a temporary license key when you launch it for the first time. You must replace the temporary 
license key with a valid Wowza Streaming Engine Subscription or Perpetual license key```
* lickeyとbyolで、EC2を構築すると、サーバー起動する後に、すぐ持っているライセンスで更新しよう
 * 更新手順: http://qiita.com/alingogo/items/a5dd245e5d5858ddf448
コーディング規約


コーディング規約
====================

PHP
--------------------

### PSR-0:オートローダー

* https://github.com/genzouw/fig-standards/blob/master/translation/PSR-0.md

> オートローダー連携のための要件を説明します。


### PSR-1:基本コーディング規約

* https://github.com/genzouw/fig-standards/tree/master/translation

> この規約セクションでは、共有されるPHPコードにおいて高い技術レベルでの連携を確保するために必要とされる標準的なコーディング要素を考慮したうえで構成されています。

### PSR-2:コーディングガイド

* https://github.com/genzouw/fig-standards/blob/master/translation/PSR-2-coding-style-guide.md

> このガイドはPSR-1に準拠し、標準的なコーディング規約のためのスタイルガイドです。
> 
> このガイドの目的は、複数メンバーがコードを読む際の認識のずれを抑えることです。 これはPHPコードをどのような書式にするかについて、ルールや期待値を共有することで実現します。
>
jsで軽くクラス書きたい時のClass定義関数

========================

jsインラインで済ませたい時に使ってます

使い方
--------

```
    /**
     * クラスを定義してみる
     */
    var A = Class( Object, {

        /** コンストラクター */
        constructor: function( name ){
            /** @private */
            this._name = name;
        },
        
        /** プロパティ */
        name: { get: function(){ 
            return this._name; 
        }},

        /** メソッド */
        toString: function(){ 
            return "[object A name=\""+ this.name +"\"]"; 
        }
    });
    
    /**
     * 継承してみる
     */
    var B = Class( A, {
        constructor: function(){ 
            A.apply( this, arguments ); 
        },

        setName: function( value ){ 
            this._name = value; 
        },

        toString: function(){ 
            return "[object B name=\""+ this.name +"\"]"; 
        }
    });

    // つかってみる
    var a = new A( "aaa" );
    console.log( ""+a ); // "[object A name="aaa"]"

    var b = new B( "aaa" );
    console.log( ""+b ); // "[object B name="aaa"]"

    b.setName( "bbb" );
    console.log( ""+b ); // "[object B name="bbb"]"

```

ソース
---------
```

    /** クラス */
    function Class(){
        if( arguments.length>= 2 ) {
            var impl=arguments[1],work={};
            for( var k in impl ) ( typeof impl[k] === "function" )? work[k]={ value:impl[k], writable:true }: work[k]=impl[k];
            var constructor = work.constructor.value;
            constructor.prototype = Object.create( arguments[0].prototype, work );
            return constructor;
        }
        throw new Error("");
    };

```

※{writable: true}追加したほうがいいかもしれません
データベースオブジェクトの命名規約

オブジェクトの命名規約
====================

DB設計によく携わっていた頃に多くのプロジェクトで共通で規定されていた規約をまとめてみました。


ここでは **オブジェクト** として以下のものを対象としています。
（カラムはテーブルの一部ではありますが、別で切りだしています。）

* テーブル
* カラム
* インデックス
* 制約


## 1.全般

### 大文字を利用しない

テーブル名、カラム名ともに大文字を利用しない。
（DBにより大文字小文字を区別するもの、しないものなどがあるため小文字で統一を図る）

| 名前          | OK/NG |
| ---           | ---   |
| DOCUMENTS     | x     |
| Documents     | x     |
| **documents** | o     |


### 複数単語の連携は *スネークケース*

テーブル名、カラム名ともにスネークケースを利用する。
キャメルケース、キャメルバックはNG。

| 名前            | OK/NG |
| ---             | ---   |
| tableName       | x     |
| TableName       | x     |
| tablename       | x     |
| **table\_name** | o     |


### 英語表記

基本的にはローマ字ではなく、英語で。


### 略名は利用しない

| 名前           | OK/NG |
| ---            | ---   |
| start_dt       | x     |
| maker_cd       | x     |
| **start_date** | o     |
| **maker_code** | o     |


## 2.テーブル編

### 基本系 は **〜s（複数形）**

| 名前           | OK/NG |
| ---            | ---   |
| document       | x     |
| **documents**  | o     |
| category       | x     |
| categorys      | x     |
| **categories** | o     |

### n:nのテーブル

**〜s（複数形）** + "\_" + **〜s（複数形）**

| 名前                 | OK/NG |
| ---                  | ---   |
| userscategories      | x     |
| user_categories      | x     |
| **users_categories** | o     |

*@ryo88c さんの案に、今までのプロジェクトでのケースを加えさせていただきました。*



## 3.カラム編

### **ある瞬間の状態（ステータス）を表す名前とする**

| カラム名       |
|----------------|
| **name**       |
| **age**        |
| **is_working** |
| ...            |

*ある任意のタイミングの情報を管理するというDBの特性から考えたら当然では有ります* 


### 以下のカラムは必須

| カラム名   | 役割     |
|------------|----------|
| id         | 主キー   |
| created_at | 登録日時 |
| updated_at | 更新日時 |


### 他テーブルの主キーとジョインするカラムは *テーブル名(単数系)\_id*

| カラム名         | OK/NG    |
| ----------       | ---------- |
| *categories\_id* | x          |
| *category\_id*   | o          |


### flg/kbnなどの略名は利用しない

**flag** は on/off の意味がわかりにくいため、できるだけ使用しない。
（ **delete_flag** は on で削除？ off で削除？）

| 名前          | OK/NG | 
| ---           | ---   | 
| delete\_flg   | x     | 
| delete\_flag  | △     | 
| *is\_deleted* | o     | 


### 時間を表すカラムは *受動態\_on* 、*受動態\_at*

[Railsの基礎知識 - - Railsドキュメント](http://railsdoc.com/rails_base) より。

DATE型のカラムには名前を「受動態\_on」  
TIMESTAMP型のカラムには名前を「受動態\_at」

| 名前       | OK/NG |
|------------|-------|
| created    | x     |
| created_at | o     |
| closed_day | x     |
| closed_on  | o     |


## 4.制約編

### ユニーク制約は uq\_<テーブル名>\_NN

users テーブルのユニークキーは以下のとおり。
（同一テーブルに複数ユニークキーが存在していた場合、 *01* の部分を2桁のゼロフィル連番値で加算していく。）


* *uq\_users\_01*


## 5.インデックス編

### インデックス は idx\_<テーブル名>\_NN

users テーブルのインデックスは以下のとおり。
（同一テーブルに複数インデックスが存在していた場合、 *01* の部分を2桁のゼロフィル連番値で加算していく。）

* *idx\_users\_01*

### ユニークインデックス は ui\_<テーブル名>\_NN

users テーブルのユニークインデックスキーは以下のとおり。
（同一テーブルに複数ユニークインデックスが存在していた場合、 *01* の部分を2桁のゼロフィル連番値で加算していく。）

* *ui\_users\_01*


-----

こんな規約もあるよ！という意見お待ちしています。


-----

**2017-01-22(日)**

以下の方のご指摘を反映

* @Hirata-Masato

-----

**2016-06-29(水)** 

以下の方々の案を追記

* @shoooo さん
* @fuzzball さん

-----

**2016-01-08(金)** 

以下の方々の案を追記

* @ryo88c さん
* @scivola さん
ベイズ定理ことはじめ

統計的仮定におけるベイズ定理は古典的ながら確率論や統計学を語る上で避けては通れない重要かつ基礎的な理論です。

## 尤度と事後確率

次のような例を考えてみます。

```
新薬の効果を調べるために 5 人の治験者を抽出した。すると 4 人には薬が有効であり 1 人には有効ではなかった。

母集団全体に有効なとき = 1 、無効なとき = 0 とすると、この標本集団から得られる新薬の効き具合の分布はどうなるか。
```

効く確率 θ のもとで、データ X ( 5 人の治験者中 4 人に効き、 1 人に効かないこと) の起こる確率が尤度 f(X|θ) です。

このとき[尤度](http://ja.wikipedia.org/wiki/%E5%B0%A4%E5%BA%A6%E9%96%A2%E6%95%B0)は次のようになります。

```math
f(X|{\theta}) = \substack{5}C\substack{4}{\theta}^4(1-{\theta}) \\
ただし \\
(0 \le {\theta} \le 1)
```

ベイズの定理では、実際に治験するまでは確率 θ についての情報は不十分ということになります。なぜなら治験するまでは薬が効くか効かないかなんて決め付けることはできないからです。このときの確率 θ を[事前確率](http://ja.wikipedia.org/wiki/%E4%BA%8B%E5%89%8D%E7%A2%BA%E7%8E%87)と言います。

では事後分布はどのように求めるのでしょうか。ある事象 A が起こったという条件のもとで事象 B の起こる確率を [A のもとで B の起こる条件付き確率](http://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E7%A2%BA%E7%8E%87)と言います。

ベイズ定理に当てはめると次の通りになります。

```math
P(A|B) = \frac {P(B|A) P(A)} {P(B)}
```

したがってこれを解くと、薬が効く、すなわち θ >= 0.5 の範囲を得られる[事後確率](http://ja.wikipedia.org/wiki/%E4%BA%8B%E5%BE%8C%E7%A2%BA%E7%8E%87)は

```math
\int_{0.5}^{-1} {\pi}({\theta}|X)x{\theta} = \\
\int_{0.5}^{-1} 30{\theta}^4(1-{\theta})x{\theta} = \\
\frac {57} {64} \approx	\\
0.89
```

となります。

## 事象から原因を探る

このように、ベイズの理論では事象にもとづいてその背景にある原因を探っていくところに基本的な考え方があります。

人間にとって原因が明らかにわかっておりそこから結果を推定するということが常にあるわけではなく、特に自然科学などの分野では表象の物事から原因を探っていくことが大半です。ですから、ベイズの定理が確率を探る上での思考体系として人にやさしくすんなりと理解できることがお判りになるかと思います。

では次のような例を考えてみましょう。

```
ある商店街では連続して 3 人の女性が通過した。次の通行人が男性である確率はどれほどか。
```

世の中の男女の割合はほぼ 1:1 です。ですからベイズでない独立試行の考え方からすれば次の通行人が男性である確率は 0.5 です。しかし、偶然とはいえ女性が連続で 3 人も通過したのですからもしかしたらこの商店街は女性に人気のお店がたくさんあるのかもしれません。

ベイズの定理では原因 A を θ 、結果 B を x とおいて、事前確率 P(Ai) を w(θi) 、事後確率 P(Ai|B) を w'(θi|x) 、確率 P(x|θ) を x の関数として p(x|θi) と書くことにより

```math
w'(θ_i|x) = \frac {w({\theta_i})p(x|{\theta}_i) } {\sum w(\theta_j)p(x|{\theta}_j)}
```

となります。

事後確率は

```math
w({\theta}_1|x_1) = \frac {9} {19}, \\
w({\theta}_2|x_1) = \frac {6} {19}, \\
w({\theta}_3|x_1) = \frac {4} {19}
```

として得られます。

さて、観察している間にも次から次へと通行人がやってきて通過します。このように θ が連続的に動くなら、積分を用いて

```math
w'({\theta}|x) = \frac {w({\theta})・p(x|{\theta}) } {\int_{\theta} w(\theta)p(x|{\theta})d{\theta}}
```

となります。

そもそも通行人が一人も通っていない段階では、何が起こるか一切情報がありませんから、 α = β = 1 として θ に一様分布を仮定する他ありません。

通行人が連続で 3 人女性だったというデータを得たときは θ についての考え方が変わってきます。 n = 3 、 ∑Xi = 3 ですから α' = 4 、 β' = 1 となるベータ分布が仮定されます。

分布の期待値は次式で表されます。

```math
\frac {{\alpha}'} {{\alpha}' + {\beta}'} = \frac 4 5
```

## まとめ

今回はベイズ定理の基本的な考え方について触れました。次回以降はどのような分野に応用されるのか、また実際にどのように実装していくのかと話を進めていきます。

## 参考

入門ベイズ統計―意思決定の理論と発展
http://www.amazon.co.jp/dp/4489020368

道具としてのベイズ統計
http://www.amazon.co.jp/dp/4534046472
URLクエリ文字列をオブジェクト化

=============================

// 編集リクエストテスト

```js
    var params = (function(){
        var tmp = location.search.split("?")[1];
        if( !tmp ) return {};
        var result = {};
        tmp.split("&").forEach(function(v){var w=v.split("=");result[w[0]]=w[1];});
        return result;
    })();
```
Emacsでc-mode等に入っているときにTABを挿入する


Emacsでc-mode等に入っているときTABを押してもインデントになってしまう。どうしてもTABが入力したい場合はquoted-insertを使う。

`C-q <TAB>`これでTABが入力できる。`M-x quoted-insert`でも、もちろんOK

quoted-insertはTABに限らず次のストロークを何でもそのまま入力してしまう。例えば`C-q C-@`とやればNULが入力できてしまったりもする。

参考
https://www.gnu.org/software/emacs/manual/html_node/emacs/Inserting-Text.html
Macでnginxを使う


## まずは使ってみる

基本は

```bash
brew install nginx
```

でインストールしたら

```bash
nginx
```

で起動して

http://localhost:8080

を開けばいいだけ。

設定は

```
/usr/local/etc/nginx/nginx.conf
```

においてあり、ここを変えて変更する。

- ストップ: `nginx -s stop`
- リロード: `nginx -s reload`

のようにできるので、設定を変えたらリロードを忘れないこと。


localhost:8080のルートは、デフォルトで

```
/usr/local/www
```

に設定されており、このディレクトリ下の`index.html`を書き換えれば内容が変わる。

## モジュールをいろいろ使いたいとき

`marcqualie/nginx`に管理されている`nginx-full`を使うのが良いらしい。

ちなみにnginxはモジュールとか言いつつ毎回ビルドし直さないといけないから、インストール時に何を入れるか指定しないといけない。なので`brew nginx-full`で一から入れ直すという方法が簡単。

```bash
brew options marcqualie/nginx/nginx-full
```

とすれば、インストールできるモジュール一覧が確認できる。

とりあえず、image-filterと、使えるという噂のLua モジュールを入れてみる。

```bash
brew install marcqualie/nginx/nginx-full --with-lua-module --with-image-filter
```

`--with-image-filter`はGD Libraryが必要なので、`brew install libgd`をした後にやらないとダメなので注意。

`brew install nginx`をしちゃってる人は、`brew uninstall nginx`をしてからやったほうが無難。まぁ`brew link nginx-full`とか使えば後からでもなんとかなる。
rbenv alias

# rbenv alias

2.0.0-p353とか2.0.0-p451とかはインストール済みだけど、rubyのバージョン指定自体は2.0.0としてるときに下記の用なエラーがでる
```rb
$ bundle config
rbenv: version `2.0.0' is not installed
```

なので、rbenv-aliasesを使って2.0.0-p451を2.0.0だと認識させる

```rb
$ brew install rbenv-aliases

$ rbenv alias --auto
1.9.3 => 1.9.3-p484
2.0.0 => 2.0.0-p451

$ rbenv versions
  system
  1.9.3
  1.9.3-p392
  1.9.3-p484
* 2.0.0 (set by /Users/yanap/repos/rspec_rails_4/.ruby-version)
  2.0.0-p353
  2.0.0-p451

$ bundle config
Settings are listed in order of priority. The top value will be used.
path
Set for your local app (/Users/yanap/repos/rspec_rails_4/.bundle/config): "vendor/bundle"

disable_shared_gems
Set for your local app (/Users/yanap/repos/rspec_rails_4/.bundle/config): "1"
```

これで大丈夫！

github

https://github.com/tpope/rbenv-aliases
親ページに子ページ一覧を表示させる

#親ページに子ページ一覧を表示させる方法

wordpressで固定ページを階層化させることはよくあるけど、
親ページには子ページの一覧だけ表示させれば良いということもよくある。

子ページを追加する度に親ページに追加していくのは面倒なので自動で追加されるようなコードを見つけたので備忘録として残します。


```php
<?php
	$child_posts = query_posts( 'numberposts=-1&order=ASC&orderby=post_title&post_type=page&post_parent=' . $post->ID );
	if ( $child_posts ) {
		foreach ( $child_posts as $child ) {
			$c_title = apply_filters( 'the_title', $child->post_title );
			$c_permalink = apply_filters( 'the_permalink', get_permalink( $child->ID ) );
			$c_image_id = get_post_thumbnail_id($child->ID);
			$c_image_url = wp_get_attachment_image_src($c_image_id, '', true);
?>
	<div class="child-pages">
		<a href="<?php echo $c_permalink; ?>">
			<img src="<?php echo $c_image_url[0]; ?>" />
			<p><?php echo $c_title; ?></p>
		</a>
	</div><!-- .child-pages -->
<?php
		}
	}
?>
```
node.jsのrequestを使って今日放送するアニメ一覧を取得してみる。


[アニメマップ](http://animemap.net/ "アニメマップ")
こちらのAPIを使用させて頂き、本日放送予定のアニメ情報を取得してみる。

```coffee:coffee
request = require("request")

options =
  url: 'http://animemap.net/api/table/tokyo.json'
  json: true

request.get options, (err, res, body) ->
  return console.log err if err
  for json in body.response.item
    if json.today is '1'
      console.log json.title
      console.log '  放送局:' + json.station
      console.log '  時間:' +  json.time

```


```aaa:結果
のうりん
  放送局:MX
  時間:25:00
Wake Up Girls!
  放送局:テレビ東京
  時間:25:23
鬼灯の冷徹
  放送局:TBS
  時間:25:55
```

今回は東京のデータを取得しましたが、全都道府県分の放送情報があるみたいです。
どこの放送が一番速いのか取得してみると面白いかもしれない。
あ、この３作全部最終回らしいです。お見逃しなく。
PHP5.3でApnsPHPを使って絵文字をPUSHする場合、4byteの絵文字を送ることができない


## 問題の原因になっている箇所

https://github.com/duccio/ApnsPHP/blob/master/ApnsPHP/Message.php#L375

```php:ApnsPHP/Message.php
	public function getPayload()
	{
		$sJSON = json_encode($this->_getPayload(), defined('JSON_UNESCAPED_UNICODE') ? JSON_UNESCAPED_UNICODE : 0);
		if (!defined('JSON_UNESCAPED_UNICODE') && function_exists('mb_convert_encoding')) {
			$sJSON = preg_replace_callback(
				'~\\\\u([0-9a-f]{4})~i',
				create_function('$aMatches', 'return mb_convert_encoding(pack("H*", $aMatches[1]), "UTF-8", "UTF-16");'),
				$sJSON);
		}
```

## PHP5.4以上だとJSON_UNESCAPED_UNICODEが使えるので問題ない

http://www.php.net/manual/ja/json.constants.php

>JSON_UNESCAPED_UNICODE (integer)
>マルチバイト Unicode 文字をそのままの形式で扱います (デフォルトでは \uXXXX にエスケープします)。 PHP 5.4.0 以降で使用可能です。

## では、PHP5.3ではどのように対応すれば良いか

（後で書く）
PythonでUTF-8 with BOMを開く

# はじめに結論から

Pythonで UTF-8 BOM有りを読み込む場合はエンコードを

**'utf_8_sig'** と指定する。

ファイルを読み込む例
`io.open(filename, "r", encoding="utf_8_sig")`

str型(UTF-8)からunicode型に変換
`uni_string = unicode(str_string, 'utf_8_sig')`
# かきはじめに

UTF-8 をPythonで読み込む際にちょっとハマったので、忘失防止として書き留めます。

# BOMとは

UTF-8 には BOM(Byte order mark)が付く場合があります。
これはエンコードがUTF-8であるという、識別子です。
ファイルの先頭3バイトが 'EF BB BF' となっています。

厄介なのが、BOMが有るUTF-8と、無いUTF-8があるのです。

UTF-8にBOMを付けるのは、Windows'メモ帳'やExcelです。
LinuxやMacは基本的にBOM無しUTF-8で扱うようです。

# PythonでUTF-8 BOM有りファイルを扱う

今回はExcelで編集したcsvを読み込みたかったので、BOMを考慮しなければいけませんでした。

とおもっていたら、ドキュメントに書いてましたね。

公式ドキュメント [BOM 印付き UTF-8](http://docs.python.jp/2.7/library/codecs.html#module-encodings.utf_8_sig)

エンコードのコーデックに 'utf_8_sig' とすると、
BOM有りの場合スキップして読み込んでくれます。
BOM無しの場合はそのままUTF-8として読み込むことが可能です。


# サンプルプログラム

```py:ImportCSV.py

import io

with io.open('sample.csv', 'rt', encoding='utf_8_sig') as f:
    print(f.readlines())
```

# 最後に

Pythonで文字コードはハマりがちですが、unicode型に変換するときの文字コードしっかり扱えれば、文字コード関連で悩むことが少なくなりそうです。
新しく作成したVPCでRDSを使う

デフォルトのVPCを削除してしまったときに
あたらしVPCを作成してもRDSのインスタンス立ち上げ時に選択できるVPCがなくなってしまって焦ったのでメモ。

##### 1.新しいVPCを作成する

security groupを用意するのを忘れずに

##### 2.作成したvpcに紐づくsubnetを複数のazに作成する

複数subnetがないとmulti-azが組めないみたい

##### 3.RDSの画面でDB Subnetを作成する

ここで作成した2つのsubnetを登録する。


以上で、無事RDSで新しく作成したVPC使用できました。
Pandoc で github 風 CSS を使った standalone な html を生成

## 動機

ただ何となくふとやってみたいと思っただけです。

## 準備

1. `~/.pandoc` ディレクトリを作成
2. [github.css](https://gist.github.com/andyferra/2554919)　で画像を参照している箇所を
    https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/para.png
    https://raw.githubusercontent.com/gollum/gollum/master/lib/gollum/public/gollum/images/dirty-shade.png
    に差し替え
3. ~/.pandoc 直下に上記 CSS ファイルを配置

[ここ](https://gist.github.com/griffin-stewie/9755783)に改変済みの CSS を置いておきます。

## 実行例

    pandoc 変換元ファイル.md -s --self-contained -t html5 -c github.css -o 生成される.html
    
ポイントは `--self-contained` です。CSS やスクリプト、画像ファイルを全て data: URI スキームを使って埋め込んでくれます。準備のステップ 2 をやっておかないと `pandoc: Could not find data file hoge/fuga/../../images/modules/styleguide/para.png` とか言われて怒られます。

## パラメータがおおい

最良の方法が分かりませんでしたが、僕の場合には `.zshrc` に

```
pandoc_embed_html () {
    pandoc -s --self-contained -t html5 -c github.css $@
}
```

というのを追加して

    pandoc_embed_html 変換元.md -o 出力先.html

という形で実行出来るようにしています。

## 参考

* [Tip: using Pandoc to create truly standalone HTML files | A Labourer at the Bitface](http://devilgate.org/blog/2012/07/02/tip-using-pandoc-to-create-truly-standalone-html-files/ "Tip: using Pandoc to create truly standalone HTML files | A Labourer at the Bitface")
* [Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association](http://sky-y.github.io/site-pandoc-jp/users-guide/#tocAnchor-1-6-4 "Pandoc ユーザーズガイド 日本語版 - Japanese Pandoc User's Association")
* [pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式） - だいたいよくわからないログ( ´_ゝ`)](http://matsu-chara.hatenablog.com/entry/2013/11/17/114859 "pandocでmarkdownからgithub風シンタックスハイライトされたhtml生成（ついでに数式） - だいたいよくわからないログ( ´_ゝ`)")
* [Pandocメモ - jou4のブログ](http://jou4.hateblo.jp/entry/2013/03/04/215020 "Pandocメモ - jou4のブログ")
PlayFramework1.2のview（テンプレート）でよく使う機能


# はじめに
よく使う機能で、公式に詳しいサンプルが無かったものをメモ。
テンプレートの機能を知りたい場合はまず以下に目を通すこと。
[テンプレートエンジン](http://www.playframework-ja.org/documentation/1.2.7/templates#extensions)
[テンプレートのチートシート](http://www.playframework-ja.org/documentation/1.2.7/cheatsheet/templates)

# テンプレートで使う記号

&'あああ'　メッセージ
$　dto
#　タグ
% スクリプト

# よく使う機能

## #{set 'moreScripts'}の書き方
```html
#{set 'moreScripts'}
    #{script 'jquery.validate.min.js'/}
    #{script 'myjs.js'/}
#{/set}
```
## #{set 'moreStyles'}の書き方
```html
#{set 'moreStyles'}
    #{stylesheet 'mycss.css' /}
#{/set}
```
## formタグにHTML要素を追加する
```html
#{form @Application.update(), id:'update_form', class:'form', role:'form'}
#{/form}
```
formタグに追加したい要素をカンマで区切って追加できます。

## 式（${}）をタグの中に記述する

タグの中に式（${}）を記述してidやClass名を作ることができます。
```
<button type="button" id=${user.id}>${user.name}</button>
```

## コレクションをループで処理する

```
#{list items:sections, as:'section'}
    #{list items:section.employees, as:'employee'}
        <td>${employee.name}</td>
    #{/list}
#{/list}
```

## コレクションのループでインデックスを使う

```
#{list items:users, as:'user'}
    #{if user_index <= 2}
		<!-- インデックスが2以下の時の処理 -->
    #{/if}
    #{else}
		<!-- インデックスが3以上の時の処理 -->
    #{/else}
#{/list}
```
設定とか


自身で作ったライブラリの設定値を読み込ませる方法

```php
echo Config::get('directory/filename.arraykey');
```

- `directory/` 

	オプション. `app/config`からのパスとなる。

- `filename`

	拡張子を省いたファイル名。

- `arraykey`

	配列の添字になる。

例えば上記の場合、

```app/config/directory/filename.php
<?php
return array(
	'arraykey' => 10,
);
```

として

```php
echo Config::get('directory/filename.arraykey');
```

の出力値は「`10`」となる。

## 環境依存

データベースとかのパスワードとか環境依存する部分の切り分け方法

1. `bootstrap/start.php` に環境うんぬんを書く

```php
<?php

// なんか色々書いてる

$env = $app->detectEnvironment(array(
    'local' => array('your-machine-name'),
));
```

ここで、arrayで渡された値とホスト名(shell `hostname`)がマッチした時に、それに対応した環境へ切り替える。クロージャーも使えるみたい。

例えば、 `local` に対応した時は `app/config/local/` を読みに行き、`testing` に対応した時は `app/config/testing/` を読みに行く。

`app/config/local` などのファイル構成は `app/config` と同様に、`database.php`を配置する。必要な設定ファイルを `app/config` から `app/config/local` へコピーして編集するのが多分スマートな方法だと思う。

間違って設定値を `git add` で入れないよう、予め`.gitignore` に登録しといたほうがいいと思う。

設定値の読み込み順番は多分こんな感じ。あとでちゃんとドキュメント見る

1. `app/config/*`
2. `app/config/**/*`
3. `.**.php`
3. `.env.**.php`

ぽい？最後２つは勘違いしてるような気がする。


他にも `app/start/local.php` などでスターターを切り替えることができるみたい。((ここまでやると環境依存なコードが出てしまう気がするけど、まぁいいか))




参考: http://forumsarchive.laravel.io/viewtopic.php?id=12055
参考: http://blog.shimabox.net/2014/03/10/laravel-stub/
さくらVPSでFTPを使える様にした

Git以外の方法でもさくらVPSにファイルを上げる為に、FTPを使うことになり、その方法をメモります。

# vsftpdを使います。

## vsftpdを入れます。

```shell-session
$ yum install vsftpd
```

```shell-session
//vsftpdを 起動
$ sudo /etc/rc.d/init.d/vsftpd start
 
//自動起動を有効化
$ sudo chkconfig vsftpd on
```

## vsftpdの設定をします。

```shell-session
// 設定ファイルのバックアップを取ります。
$ cd 
$ mkdir origin
$ sudo cp /etc/vsftpd/vsftpd.conf origin

// 設定ファイルの編集。
$ sudo vim /etc/vsftpd/vsftpd.conf 
---- 
#アスキーモードを有効にする
ascii_upload_enable=YES
ascii_download_enable=YES   
 
# TCP/IP でのフィルタリングを無効にする　（iptables で一応OK）
tcp_wrappers=NO 
 
# 日本時間を使用
use_localtime=YES 
 
# anonymous を無効にする
anonymous_enable=NO
 
# /var/log/vsftpd.log　にログを記入
xferlog_std_format=NO
 
# ログを有効にする
dual_log_enable=YES
---
```

# chroot と FTP利用ユーザー制限

## ユーザー作成

```shell-session
# useradd hoge
# passwd hoge
``` 

## vsftpd.confの設定

```shell-session
$ sudo vim /etc/vsftpd/vsftpd.conf
---
# /etc/vsftpd/user_list　に記述されたユーザーを拒否する
userlist_deny=NO
 
# 全てのローカルユーザーにchrootを有効にする。
chroot_local_user=YES
chroot_list_enable=NO
 
# vsftpdのルートディレクトリを /home/hoge/public_html に設定
local_root=/home/hoge/public_html
---
```

**↑で指定したルートディレクトリが存在しない場合は作成しておく。**

### ※chrootについては[コチラ](http://blog.infinity-es.com/%E3%81%95%E3%81%8F%E3%82%89%E3%81%AEvps%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%85%A5%E9%96%808%E3%80%80vsftp%E3%81%AE%E5%B0%8E%E5%85%A5/)

## アクセス許可ユーザー指定

```shell-session
$ sudo vim /etc/vsftpd/user_list
---
# vsftpd userlist
# If userlist_deny=NO, only allow users in this file
# If userlist_deny=YES (default), never allow users in this file, and
# do not even prompt for a password.
# Note that the default vsftpd pam config also checks /etc/vsftpd/ftpusers
# for users that are denied.
hoge
---
```

# iptables 設定

```shell-session
$ sudo vim /etc/sysconfig/iptables
---
-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ACCEPT　（追記）
---

$ sudo /etc/rc.d/init.d/iptables restart
```

もしくは以下。

```shell-session
$ sudo iptables -A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 21 -j ACCEPT
$ sudo /etc/rc.d/init.d/iptables save
``` 

# vsftpdの反映

```shell-session
// vsftpd の設定を反映
$ sudo /etc/rc.d/init.d/vsftpd restart
```

# IPTABLES_MODULESのロード

## iptables-configを編集します。

```shell-session
$ sudo vim /etc/sysconfig/iptables-config
---
# 以下を追記
IPTABLES_MODULES="ip_conntrack_ftp ip_nat_ftp"
---
```

## iptables-configをrestartします。

```shell-session
$ sudo /etc/rc.d/init.d/iptables restart
```

## ロード確認

```shell-session
$ lsmod
---
// ここにモジュールがあればOK
---
```

# ftp出来るか確認

ftpアプリを使って確認してみる。

# 参考
・[WEB開発記 | さくらのVPSでサーバー入門8　vsftpの導入](http://blog.infinity-es.com/%E3%81%95%E3%81%8F%E3%82%89%E3%81%AEvps%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%85%A5%E9%96%808%E3%80%80vsftp%E3%81%AE%E5%B0%8E%E5%85%A5/)
・[pistolfly | iptablesでftpを通す](http://www.pistolfly.com/weblog/2008/04/iptablesftp.html)
RubyMineでファイルを保存した際に自動的にrubocopが走って通知センタに通知するための方法


## あらまし：
* 背景：ソースコードに変更を加えた際に文法チェックを忘れがち
* 目的：ソースに変更を加えた際に文法チェック漏れがないようにしたい
* ゴール：RubyMineでソースコードに変更を加えたら自動的に文法チェックが走るようにする。流すだけでチェック忘れを防ぐために結果をMacの通知センタで通知する

## 材料

* RubyMine(IDE)
* rubocop(RubyのSyntax Checker)
* guard(ファイル変更の自動検出)
* guard-rubocop(guard + rubocopの連携)
* terminal-notifier-guard(通知センタでguardの結果を通知)

## 手順

### 1. "Save files on frame deactivation"の有効化
* RubyMine上で ⌘, or RubyMine => Preferences
* 検索窓に"save"を打ち込む
* Generalをクリックして"Save files on frame deactivation"が有効になっていることを確認する
* 無効になっている場合は"Save files on frame deactivation"にチェックを入れて有効化をする

### 2. rubocopとguardの導入
* Gemfileに記載してbundleからインストール

```rb:Gemfile
group :development do
  gem 'rubocop'
  gem 'guard'
  gem 'guard-rubocop'
  gem 'terminal-notifier-guard'
end
```

```bash
% bundle install --path vendor/bundle
```

### 3. Edit ConfigurationsにGuardの実行設定を追加
* Run => Edit Configurations...
* "+"を押して"IRB Console"を選択
* Nameに"Guard"(任意)を設定
* IRB scriptにguardへのパスを設定。パスはターミナル上からbundle exec which guardで表示されるのでそれを使う

```bash:例
% bundle exec which guard
/Users/Mahito/repos/sample/vendor/bundle/ruby/2.0.0/bin/guard
```

* Working Directoryに自分の作業ディレクトリのパスを設定
* Bundlerタブの"Run the script in context of the bundle"にチェックを入れて有効にする

### 4.Guardの初期設定
* guardの利用のために必要なGuardfileを作成するためにターミナル上からguard initを実行

```bash
% bundle exec guard init
```

* 作成されたGuardfileに対して設定を追加
* notification: を設定しないとrubocopが失敗した際にのみ通知される。また、falseにするとすべて通知されなくなる

```rb:Guardfile
interactor :simple

guard :rubocop, notification: true do
  watch(%r{.+\.rb$})
  watch(%r{(?:.+/)?\.rubocop\.yml$}) { |m| File.dirname(m[0]) }
end
```

* デフォルトだと*.rbのファイルと.rubocop.ymlが対象なので、.rakeなどを追加する場合は以下参照

```rb:Guardfile
guard :rubocop, notification: true do
  watch(%r{.+\.rb$})
  watch(%r{.+\.rake$}) # 追記
  watch(%r{(?:.+/)?\.rubocop\.yml$}) { |m| File.dirname(m[0]) }
end
```

### 5.Guardの実行

* RubyMine上から Run => Run 'Guard'
* 以降は対象ファイルが変更されるたびにrubocopが走る
* 走った結果が通知センタで通知されて幸せ

## 結論

* guard-rubocop便利！

## 参考
* ruby on rails - Is it impossible to use Guard with RubyMine? - Stack Overflow - http://stackoverflow.com/questions/11996124/is-it-impossible-to-use-guard-with-rubymine/12000765#12000765
* guard/guard - https://github.com/guard/guard
* bbatsov/rubocop - https://github.com/bbatsov/rubocop
* yujinakayama/guard-rubocop - https://github.com/yujinakayama/guard-rubocop
* Springest/terminal-notifier-guard - https://github.com/Springest/terminal-notifier-guard
読書ノート:レガシーコード改善ガイド

# きっかけ
必修書籍そのに

# 書籍情報
題名:レガシーコード改善ガイドー保守開発のためのリファクタリング
原題:Working Effective with Legacy Code
著訳:Michael C. Feathers 著, ウルシステムズ株式会社 監訳, 平澤章/越智典子/稲葉信之/田村友彦/小堀真義 訳
出版:翔泳社
発行:2009年7月13日 発行

# 超訳
以下、袖文より一部引用

* 仕様が分からないコードの分析方法
* 仕様が分からないコードの修正方法、またはテストコードの追加方法
* コードの修正で、疎結合な設計に部分的に改善する方法 

対象読者

* 現行のシステムが仕様が分からず保守作業に悩む、保守担当者
* 現行のシステムの保守作業は可能であるもののデグレーションに悩む、保守担当者
* 疎結合な設計手法について知りたい技術者

# 感想
## 心に残った箇所
* みんなそうだと思うけどやっぱり第24章。みんな大好き第24章
* 「編集して祈る」vs「保護して変更する」
* レガシーコードの変更手順
 1. 変更点を洗い出す
 1. テストを書く場所を見つける
 1. 依存関係を排除する
 1. テストを書く
 1. 変更とリファクタリングを行う
* 検出、分離、接合部

## 私見
* 実は最後まで読んでない

# 読書期間
開始：2014/2/28
読了：2014/3/28
Qiita APIのためのトークン取得

Qiita API を使うためにトークン取得がしたかったのだが、
ruby、python, php での取得方法はすぐ見つかるものの、
もっと簡単な方法があったのでメモ

```shell-session:
$ curl -X POST https://qiita.com/api/v1/auth\?url_name\=<username>\&password\=<password>
```

これだけで

```shell-session:
{"url_name":"username","token":"トークン文字列"}
```

な感じで取得できた。

アカウント設定からのパスワード設定は忘れずに。
【個人メモ】bespoke.jsを使ってプレゼン資料を作成する

# なんだこのプレゼンは？

と思ったプレゼンをネット上で見かけた。

![スクリーンショット 2014-03-28 10.45.13.png](https://qiita-image-store.s3.amazonaws.com/0/3985/ebd80702-dd96-1e0c-dd9d-60c7b1a21c50.png)

[Build Warsへのリンク](http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt/)

JavaScriptのプロダクトをうまい具合にビルドするためのツール、
[Grunt](http://gruntjs.com/)と[glup](http://gulpjs.com/)を比較したプレゼンだ。
gifアニメが多用されてるし、オサレでカッコイイ。

何使ってこのプレゼン作ってるんだ！？と思って調べてみたら、
このプレゼンの作者が自分で作っていた。

[bespoke.js](https://github.com/markdalgleish/bespoke.js)というアプリだった。

# bespoke.js

bespoke.jsというプレゼンアプリを早速使ってみたい。
セットアップや、プレゼンのスケルトン作成って
めんどくさいのかなと思ったんだけど、yeomanを利用して
テンプレを作成する形になってて、

プレゼン作成準備に必要な手間は少ししかなかった。

## bespoke.jsを使うまで

bespoke.jsをセットアップするのに必要なツールは以下の通り。

- [node.js](http://nodejs.org/)
- [yeoman](http://yeoman.io/)

Mac OS Xを使っているのであれば、
homebrewをインストールしてれば以下の流れで
bespokeを使う準備は終わる。

```bash
> brew install node
> npm install -g yo
> npm install -g generator-bespoke
> mkdir presentation-of-newbie
> cd presentation-of-newbie
> yo bespoke
```

実行すると、プレゼンのタイトルなどを
cliで問われるので、適当に答えていく。

![スクリーンショット 2014-03-28 10.59.21.png](https://qiita-image-store.s3.amazonaws.com/0/3985/d176a6ed-aea4-5d6b-89fb-b1a653527573.png)

# 出来上がったプレゼンを見てみよう

```grunt server``` を実行すれば、確認できる。

![スクリーンショット 2014-03-28 11.02.49.png](https://qiita-image-store.s3.amazonaws.com/0/3985/84d1ebbc-831d-2fdc-87fd-c66edff92fec.png)

# デフォルトの内容を編集していこう

自動生成されたテンプレートにある
src/index.jade ファイルを弄っていけば良い。

例えば、以下のようにする。

![スクリーンショット 2014-03-28 11.04.23.png](https://qiita-image-store.s3.amazonaws.com/0/3985/f005d9b4-cb87-eeb0-932f-4c1e68ceefbd.png)

```grunt server``` を実行したままにしていれば、
ホットリロード(!)が有効になってるので、
ブラウザ上でリロード動作が勝手に行われる。
素晴らしい。

![スクリーンショット 2014-03-28 11.06.02.png](https://qiita-image-store.s3.amazonaws.com/0/3985/3dfb18c4-1d7b-435f-47c3-0b75a6c97a00.png)

# github pagesでの公開

github pagesへの公開にも対応している。
githubにリポジトリを登録して、
```git init```して、```git add .```して、
```git push origin master``` して、
その後に```grunt deploy``` を実行しよう。

gh-pagesリポジトリに
作成したプレゼンがpushされていく。

試しに作成したプレゼンはこちら。

http://substanz.github.io/presentation-of-newbie

bespoke.jsヤバイ。

# 実際に使ってみた

先日行われた技術系イベントでLTするときに使ってみた。

http://futoase.github.io/switch-from-chef-to-docker/

# 以前からbespoke.jsを紹介していたエントリ

- [プレゼン用のスライドショーを実装する、わずか1KBなのに多彩なエフェクトを備えタッチデバイスにも対応したスクリプト -Bespoke.js](http://coliss.com/articles/build-websites/operation/javascript/presentation-micro-framework-bespoke-js.html)
Qiitaの検索結果をストック数順に表示する

# 注意
以下の内容はもうすべて実装されています。
左上の入力欄[キーワードを入力 ▼]の▼をクリックしてみてください。

# 本題
Qiitaの左上の検索フォームから、例えばqiitaで検索すると次のURLとなります。
http://qiita.com/search?utf8=%E2%9C%93&sort=&q=qiita

値が空の`sort=`の部分に`stock`と入れると、
http://qiita.com/search?utf8=%E2%9C%93&sort=stock&q=qiita
となり、検索結果がストック数の降順で表示されます。

# 情報求む
日付やコメント数でもソートできないかと`date`や`comment`で試してみましたが、うまく動きませんでした。

何か知っている/見つけた人は教えてください。

なお、sortパラメータについて、[Qiita API document](https://qiita.com/docs)では特に記載はありませんでした。

# 追記
## 日付でソート
@suin さんより`sort=created`で日付が新しい順にできるとの情報をいただきました。ありがとうございます。
http://qiita.com/search?utf8=%E2%9C%93&sort=created&q=qiita

編集して確認してみたところ、日付は最後に編集した日ではなく、どうやら **投稿日** の新着順のようです。

## 自分のストックをストック数順で検索
自分のストックからの検索をストック数順で表示するには、
`sort=stock`と`stocked=1`と組み合わせて
http://qiita.com/search?utf8=%E2%9C%93&sort=stock&q=qiita&stocked=1
でいけます。
ホストサイト側にファイルサイズオーバーで置けないサイズのWebWorkersを扱うには？

# ホストサイト側にファイルサイズオーバーで置けないサイズのWebWorkersを扱うには？

## 何が言いたいか分からない奴はこれでも見とけ！

- [リアルタイムでレイトレして、動画を作る #ffmpeg #emscripten](http://jsdo.it/kjunichi/wt2Md)
 
## 余計に分からなくなる解説

### JavaScriptは2次元化すると容量を減らせることもある

JavaScriptをバイト列とみなして、pngファイルに変換し、
実行時にpngを読み込んで、これをJavaScriptに戻せばよい。

[png to script](http://jsdo.it/Lo-Th/yilv) [Lo-Th](http://jsdo.it/Lo-Th)さん作

### そうはいっても、単一画像だとデカくてまだホストサイトに置けないこともある

ホストにアップロードできる1ファイルの最大サイズ以内の複数の画像に分割し、
これらをそれぞれバイト列に戻し、それを繋げれば元のJavaScriptの出来上がり。

### 理屈は分かったが、具体的にどうするんだ！

HTML5からCanvasが使える。
この中に対象の画像に画素単位でアクセスできるAPIがあのでこれを使う。

CanvasはDOMなんだよなぁ（ボソ

### WebWorkersではDOMオブジェクトが扱えない！！

WebWorker内で画像ファイルからのJavaScriptの取得は諦めて、
WebWorker外、つまり、動的にWebWorkersを生成すれば大丈夫！

#### 動的にWebWorkersを生成するには

[動的にWebWorkerを作成して動かす](http://jsdo.it/kjunichi/naSo)
Python TwistedでTCPクライアントを書く


* Python 2.7
* Twisted 13.0

TCPクライアントを書く必要があったので調べ物。最初[socket](http://docs.python.jp/2.7/library/socket.html)モジュールを使って書いたんだけど、[Twisted](https://twistedmatrix.com/trac/)を使うと簡潔に書けてリトライも簡単だったのでなんとなく。

# やりたいこと

定期的にセンサデータを取得してTCPで外部へ送信を行えるハードウェアがある。これに対して接続し、受信したデータをロギング、任意の処理を行う。

サーバとなるハードウェアは認証や呼び出しなどが必要なプロトコルではなく、ひたすらデータ垂れ流すだけ。


# 書いてみる

```python:protocol.py
import logging
from twisted.internet.protocol import Protocol

logger = logging.getLogger(__name___)


# プロトコルを処理するクラス
class SomeProtocol(Protocol):

    def dataReceived(self, data):
        logger.debug(u'data received. data: %s' % data)

        # ログファイルに書き出し
        f = open('log.dat', 'ab')
        f.write(data)
        f.close()
```


```python:client.py
import logging

from twisted.internet.protocol import ReconnectingClientFactory

from .protocol import SomeProtocol

logger = logging.getLogger(__name___)


# クライアントクラス。実際に接続処理を行うのはこのクラス。
class SomeServerClient(ReconnectingClientFactory):

    protocol = SomeProtocol

    def buildProtocol(self, addr):
        """Procotolクラスのインスタンス生成メソッド
        """
        logging.info(u'Successfully connected to %s' % addr)

        self.resetDelay()  # retry delayを元に戻す

        protocol = self.protocol()
        protocol.factory = self
        return protocol

    def startedConnecting(self, connector):
        """接続後に呼び出される
        """
        logger.info(u'Started to connect.')

    def clientConnectionLost(self, connector, reason):
        """接続を失った際のハンドラ
        """
        logger.warning(u'Lost connection. Reason: %s', reason)
        ReconnectingClientFactory.clientConnectionLost(self, connector, reason)

    def clientConnectionFailed(self, connector, reason):
        """接続に失敗した際のハンドラ
        """
        logger.error(u'Connection failed. Reason: %s' % reason)
        ReconnectingClientFactory.clientConnectionFailed(self, connector, reason)
```


# 実行してみる

reactorモジュールを使用してTCPサーバに接続する。

```python
from twisted.internet import reactor

reactor.connectTCP('127.0.0.1', 5403, SomeServerClient())
reactor.run()
```

# その他

Twistedあんまり速くないしgevent良いよって[@masahifさん](https://twitter.com/masahif)に教えてもらったので後で調べる。

今回は、単一のサーバと単一のクライアントで1秒おきに流れてくるデータを処理するだけなので速度を気にする必要がなくて、簡単にやりたいこと（リトライ処理）が書けたら良いのでTwistedで大丈夫そう。


# あわせて読みたい

* [Twited](https://twistedmatrix.com/trac/)
* [Twisted: Writing Clients](https://twistedmatrix.com/documents/13.0.0/core/howto/clients.html)
* [Python: socketモジュール](http://docs.python.jp/2.7/library/socket.html)
* [アクセンスさん: Twistedの短いソースコード](http://omake.accense.com/wiki/Twisted%E3%81%AE%E7%9F%AD%E3%81%84%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E9%9B%86)
* [yasushiiさん: Python と Twisted できみにも書ける Web サーバ(1)](http://lowlife.jp/yasusii/stories/24.html)
const の指定の仕方とコンパイルエラーについて

レビューで指摘したので、ついでに書いておくことにする。
const を正しく指定しましょうという話。

```objc:main.c
char *char1 = "ab";
const char *char2 = "bc";
char *const char3 = "cd";
const char * const char4 = "de";

int main() {
    char1[0] = 'x';
    char1 = "new";

    char2[0] = 'x';
    char2 = "new";

    char3[0] = 'x';
    char3 = "new";

    char4[0] = 'x';    
    char4 = "new";

    return 0;
}
```

ビルド結果

    main.c:12:14: error: read-only variable is not assignable
    char2[0] = 'x';
    ~~~~~~~~ ^
    main.c:16:11: error: read-only variable is not assignable
    char3 = "new";
    ~~~~~ ^
    main.c:18:14: error: read-only variable is not assignable
    char4[0] = 'x';    
    ~~~~~~~~ ^
    main.c:19:11: error: read-only variable is not assignable
    char4 = "new";
    ~~~~~ ^
    4 errors generated.
非同期通信でリクエストパラメータに配列を使用する

jQueryで作成するリクエストパラメータ

```js
var params = {
  'single_value' : 'single',
  'multi_value' : ['multi_1', 'multi_2']
};
```

Objective-Cで作成するリクエストパラメータ

```objc
NSDictionary *params = @{
  @"single_value" : @"single",
  @"multi_value" : @[ @"multi_1", @"multi_2" ]
};
```

PHPでリクエストパラメータの取得

```php
// single (type:string)
$single_value = $_POST['single_value'];

// Array
// (
//   [0] => multi_1
//   [1] => multi_2
// )
$multi_value = $_POST['multi_value'];
```
iOS7から非推奨になったNSStringの描画時の幅・高さ計算メソッド

**「iOS7から非推奨になった API一覧」**
 http://lab.dolice.net/blog/2013/09/19/objc-deprecated-api-ios7/

↑これのNSStringに関する非推奨とは、文字列描画時にサイズがいくつになるか
計算するメソッドなど。

https://developer.apple.com/library/ios/documentation/UIKit/Reference/NSString_UIKit_Additions/Reference/Reference.html

↑ここにiOS7以降、代替となるメソッドの記述あ
ATOMエディタでちょっとしたオレオレ関数をつくる


例えば「カーソル位置を選択（select word）」→「検索窓を開く(replace-and-find:show)」までを一括で実行したい場合。

環境：ATOM 0.78

(1) Preferences ```cmd-,``` -> 左下の「Open ~/.atom」ボタン

(2) 以下のファイルを編集

```Javascript:init.coffee
selectAndFind =->
  editor = atom.workspace.activePaneItem
  editor.selectWord()
  atom.workspaceView.trigger "find-and-replace:show"
atom.workspaceView.command "my-find:select-and-find", => selectAndFind()
```

```css:keymap.cson
'.editor':
  'ctrl-s' : 'my-find:select-and-find'
```

(3) ウィンドウをリロード (window:reload ```ctrl-alt-cmd-l```)

これでctrl-sでカーソル位置を選択した後に検索窓を開くようになると思います。規模が大きくなってきたらパッケージ化したほうが良いかもしれませんね。で、みんなのためにPublishingしてください(^^)
Gitでよく使うコマンドまとめ


## Gitリポジトリからソースをクローンする。

`$ git clone <リモートのクローン先> [optional ローカルのフォルダ名]`

## リモート操作

### リモートブランチも含めたブランチ一覧を表示する。

`$ git branch -a`

例)
> 
$ git branch -a
  feature2535
  feature2558
* master
  remotes/origin/1.2.1
  remotes/origin/HEAD -> origin/master
  remotes/origin/testbra

### リモートからブランチを取得する。
	
`$ git fetch origin <ブランチ名>`

### リモートからブランチをチェックアウトする。

`$ git checkout -b <作成ブランチ名> <リモートブランチ名>`

例)
> git checkout -b testbra origin/testbra

### リモートブランチを削除する

`$ git push origin --delete <削除するリモートブランチ名>`

または

`$ git push origin :<削除するリモートブランチ名>`

### ブランチ名を変更する

**変更対象のブランチ移動**

`$ git branch -m <変更後のブランチ名>`

### 最新のインデクスからmergeする。

`$ git merge FETCH_HEAD`

## ブランチ操作

### ブランチ一覧を表示する。

`$ git branch`

### ブランチを作成する。

`$ git branch <ブランチ名>`

## ログの閲覧
	
### 特定のコミットのログを見る。

`$ git show <タグ名など>`

### コミットログの一覧を見る。

`$ git log`

## 比較の操作

### リビジョン間の差分(ファイル名のみ)を確認する。

`git diff --stat --name-only <比較するリビジョン> <比較するリビジョン>`

**--name-only** を外せば、中身の比較も表示する。

## 履歴の操作。

### HEADの位置を変更する。

HEADとは簡単にいうと、 **使用中のブランチの最新のコミット位置**のこと。このHEADの位置を自由に操作することができる。

**ワーキングツリーの変更はそのままにする。**

`git reset --soft {HEADの位置}`

例) HEADを1世代前に戻す場合は ```git reset --soft HEAD^^```

**ワーキングツリーの変更もHEADの状態に変更。**

HEADのリビジョンから以前のリビジョンにコミットを戻す。 **ソースの変更も戻してしまう**。

`$ git reset --hard {HEADの位置}`

### マージしてコンフリクトが多発したとき、なかったことにする。

`git reset --hard ORIG_HEAD`

### HEADの移動した履歴を見る。

git resetなどでHEADの履歴を見ることができる。

`git reflog`

例) git reflog

```
f7e2b6d HEAD@{0}: reset: moving to HEAD@{1}
0d977b7 HEAD@{1}: reset: moving to HEAD^
f7e2b6d HEAD@{2}: checkout: moving from xxxxx to yyyy
357f1aa HEAD@{3}: merge FETCH_HEAD: Fast-forward
594e4fe HEAD@{4}: checkout: moving from zzzzzz to xxxxxx
```

上の例の説明。

1.  `$ git reset --hard HEAD^` を実
2.  その後、`git reset --hard HEAD@{1}`でHEADの位置を *1*を実施する前に戻している。


## インデックスの操作。

### インデックスのファイルを追加。

`$ git add {追加するファイル}`

### インデックスからファイルを削除。

`$ git rm --cached <filename>`

## タグ操作

### ローカルにあるタグの一覧を表示する。

`$ git tag`


### リモートのタグを取得する。

`$ git pull --tags`

### タグからチェックアウトしてブランチを作成する

`$ git checkout refs/tags/{タグ名}`

### タグを作成する。

`$ git tag -a <タグ名>`

### ローカルのタグを **リモート**にpushする。

`$ git push --tags`

### ローカルのタグを削除する。

`$ git tag -d <タグ名>`

### リモートのタグを削除する場合は、 **ローカルのタグを削除**したのち、削除したタグをpushする。

```
$ git tag -d <タグ名>
$ git push origin :<タグ名>
```

or

```$ git push --delete <タグ名>```


### タグの情報を確認する。

`git show <タグ名>`

## ワークツリーの変更ファイルを一時的に退避させる。

### スタックに一時的に退避させる

`git stash`

### スタックから退避したファイルを取り戻す

`$ git stash pop`

### スタックから退避した最新作業を削除する

`$ git stash drop`

### スタックから退避した全ての作業を削除する

`$ git stash clear`

# 他のブランチの指定の変更を反映する。

`$ git cherry-pick {反映させる変更が含まれるリビジョン}`



# あまり使わないかも知れないけど、たまに必要になる操作。

すでにcloneずみのリポジトリを別のリポジトリにpushする。(bareリポジトリ初期pushの場合)

`$ git push <bareの新リポジトリ> master`

cloneしたローカルリポジトリのリモートリポジトリを切り替える。

`$ git remote set-url origin <切り替え先リモートリポジトリ>`


>
例)確認してからリポジトリを切り替える。
>
* `git config -l`でremote.origin.url=<現在のリモートリポジトリURL>を確認。
* `git remote set-url origin <切り替え先リモートリポジトリ>`を実行。
* 再度`git config -l`でremote.origin.urlが<切り替え先リモートリポジトリ>に変更されていることを確認。
$_GET, $_POST じゃなくて filter_input 使えとのこと

スーパーグローバル変数に直接アクセスするより、filter_input 経由したほうがいいとのこと。

```php:
<?php

// こう書くよりも
$aaa = isset( $_GET["aaa"] ) ? $_GET["aaa"] : null;
$bbb = isset( $_POST["bbb"] ) ? $_POST["bbb"] : null;

// こう書くほうがよいとのこと
$aaa = filter_input( INPUT_GET, "aaa" );
$bbb = filter_input( INPUT_POST, "bbb" );

```
[CoffeeScript] Backbone.js と setInterval

## Backbone.js に setInterval を組み込む

### スクリプト

```coffeescript:sample.view.coffee
class IndexView extends Backbone.View
  el: "body"

  initialize: ->
    timerId = setInterval =>
      #self.vIndex.render()
      #@vIndex.render()
      @render()
    , 3000

  render: ->
    console.log "timer"
```

```coffeescript:sample.default.coffee
vIndex = new IndexView
```

### 考察

まず必要なのは

`` setInterval (func, delay) ``
[window.setInterval @ MDN](https://developer.mozilla.org/ja/docs/Web/API/window.setInterval)

の形式を作ることですが、
こちらは、@yahihiさんの「[CoffeeScriptで引数に無名関数を使う](http://qiita.com/yahihi/items/d2c3ac3a3c84da658a1e)」を参考にさせていただきました。


つぎに、``func``ですが
[Backbone: using setInterval](http://stackoverflow.com/questions/18387297/backbone-using-setinterval) とか [Backbone.js bind this to setInterval](http://stackoverflow.com/questions/11234431/backbone-js-bind-this-to-setinterval) とかに書いてあるとおり、``self``や``this``を使うと書いてありました。

``self``でも``this``でも``window``が返ってくるようなので（…詳しいことはわかりません。m(_ _ )m）
``window``が返ってくるなら、自分自身を指定してあげればいいじゃない

ってことで、`` @vIndex.render() `` となりました。


``self``と``this``の違いも理解してなくてすみません。

### 2014-09-11 編集
``=>``を使えばいいようだ。