OmniAICreator/Qiita-1.07M huggingface dataset:
nginx + uwsgi + python: 502 Bad Gateway

####[現象]
* nginx と uwsgi を起動したが「502 Bad Gateway」
* nginxからプロキシはうまくいっているがuwsgiが受取れていないようだ

####[原因]
* カーネル値調整不足

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

* ログ確認

```
//uWSGIログ
*** Starting uWSGI 2.0.9 (64bit) on [Fri May 29 19:34:16 2015] ***
compiled with version: 4.4.7 20120313 (Red Hat 4.4.7-11) on 27 May 2015 15:04:13
os: Linux-2.6.32-504.el6.x86_64 #1 SMP Wed Oct 15 04:27:16 UTC 2014
nodename: webap-01
machine: x86_64
clock source: unix
detected number of CPU cores: 1
current working directory: /etc/uwsgi
detected binary path: /opt/venv/app/bin/uwsgi
!!! no internal routing support, rebuild with pcre support !!!
setgid() to 99
setuid() to 498
chdir() to /opt/app/
your processes number limit is 20480
your memory page size is 4096 bytes
detected max file descriptor number: 65536
lock engine: pthread robust mutexes
thunder lock: disabled (you can enable it with --thunder-lock)
Listen queue size is greater than the system max net.core.somaxconn (1024).
```

* 「net.core.somaxconn」が足りないようだ。

```
# grep listen /etc/uwsgi.yaml
  listen: 16384
# vi /etc/sysctl.conf
net.core.somaxconn = 20480
# sysctl -w net.core.somaxconn=20480
# sysctl net.core.somaxconn
```

```
# /etc/rc.d/init.d/uwsgi restart
```

```
//uWSGIログ

*** Starting uWSGI 2.0.9 (64bit) 
:
*** uWSGI is running in multiple interpreter mode ***
spawned uWSGI master process (pid: 26131)
spawned uWSGI worker 1 (pid: 26132, cores: 1)
spawned uWSGI worker 2 (pid: 26133, cores: 1)
spawned uWSGI worker 3 (pid: 26134, cores: 1)
spawned uWSGI worker 4 (pid: 26135, cores: 1)
```

起動した　ε-(´∀｀*)ﾎｯ
ChefでServiceリソース内でaction :startするのはやめた方がよいかも

Chefのレシピで、ミドルウェアのインストール後にserviceリソースで`action :start`するのをよくやると思うのですが(自分もよくやってた)、これはやめたが方がいいんじゃないかと思いました。

# なんでダメなのか

よくあるChefレシピの例で考えてみましょう。
Nginx をインストールするこんなレシピ。

```nginx/recipes/default.rb
package "nginx" do
  action :install
end

service "nginx" do
  action [:enable, :start] # ← コレ
  supports :start => true, :status => true, :restart => true, :reload => true
end

template "/etc/nginx/nginx.conf" do
    notifies :reload, 'service[nginx]'
end
```

一見なんの変哲もないレシピですが、実は問題があります。

# 問題その１：サーバの設定ファイルに文法エラーがある状態だと起動に失敗する

例えばサーバの設定ファイルを手動でいじってしまい、文法エラーが入ってNginxが起動しなくなったとします。
(本番ではやらないとしても、vagrantで実験してるときはよくあります)

このとき、レシピの設定ファイルは正しい状態なので、「Chefを実行すれば正しい状態に戻るだろう」と思うのですが、実際やってみるとそうはならない。

なぜかというと、設定ファイルのプロビジョニングよりも `action :start`が先に効いてしまうので、文法エラーのまま起動しようとして起動エラーになり、Chefクライアントが処理を中断してしまうからです。

# 問題その２：パッケージデフォルトの状態で起動してしまう

問題2点目はレシピの実行順序にあります。
例のように`action :start`を書いた場合、Chefの挙動は

* Nginxパッケージをインストールする
* そのままNginxを起動する (！！)
* 自作の設定ファイルを設置する
* (notifies機能によりChef実行フェーズの最終段階で) Nginxをreloadする

というフローになります。
自作設定ファイルを設置する前に、パッケージデフォルトのまま起動してしまうのですが、ここで問題がおきます。

例えばApacheとNginxを別々のポートで動くようなレシピを書いたとして、`action :start`をつけてしまうと、両方とも80番ポートで起動しようとしてポートの取り合いが起きます。(後から起動した方がこける)

# 解決策

* serviceリソースでは`:start`しない。
* templateリソースから、`notifies :start`して`notifies :reload`する

これで、初回プロビジョン時も2回目以降のプロビジョン時もうまく動きます。

```nginx/recipes/default.rb
package "nginx" do
  action :install
end

service "nginx" do
  action [:enable] # ← :start しない
  supports :start => true, :status => true, :restart => true, :reload => true
end

template "/etc/nginx/nginx.conf" do
    notifies :start, 'service[nginx]'  # ←　ここで:start指令を送る
    notifies :reload, 'service[nginx]'
end
```

Happy Cooking !

(なんかおかしなところがあればコメントで教えてください）
Heroku上でもgulp-webserverを使う

Heroku で Node.js を動かすときのポイントはこちら。

- Procfile か `npm start` でアプリが起動するように
- `0.0.0.0:$PORT` ないし `hogehoge.heroku.com:$PORT` を listen する  

gulp-webserver の場合、デフォルトが `localhost:8000` なので変更が必要です。

```javascript
gulp.task('serve', function() {
    gulp.src('public')
        .pipe(webserver({
            host: process.env.HOST || 'localhost', // $HOST は独自定義
            port: process.env.PORT || 8000
        }));
});
```

ホスト名は環境変数で取得できないようなので、手動で `heroku config:set HOST=0.0.0.0` とかしてください。ローカルで実行する際も同じでよければ、env使わずに埋め込んでもいいと思いますが。

で、 package.json の `scripts.start` に `gulp serve` とか書いておけば、 Heroku で動きます。

ローカルで使っているビルド・実行プロセスがそのまま使えるのはとても便利ですね。

## 参考

- [Heroku Node.js Support | Heroku Dev Center](https://devcenter.heroku.com/articles/nodejs-support)
- [schickling/gulp-webserver](https://github.com/schickling/gulp-webserver)
[FuelPHP] validationクラスを使う

登録フォームなどで、Fuel PHPのValidationクラスを使う方法を記載。


1.バリデーションメ名の設定
```
$val = Validation::forge('regester_validate');
```


2.postされる項目毎に、バリデーションのルールを設定

```
$val->add('name', '名前')->add_rule('required')->add_rule('max_length', 30);
$val->add('aaress', '住所名')->add_rule('required')->add_rule('max_length', 100);
```

3.バリデーションを実行
エラーの場合は、バリデーションのチェック処理毎に設定されているメッセージを取得できます。
（以下の例だと、項目名ごとに、発生したエラーメッセージを表示しています。）

```

if ($val->run()) {
     //正常な場合       
} else {
     //エラー
     $_error = $val->error();
     foreach($_error as $key=>$value){
          //$key毎のエラーメッセージを取得
          echo $value->get_message();     
     }
}
```

以上


公式サイト
http://fuelphp.jp/docs/1.5/classes/validation/validation.html
オレオレ証明書を一撃で作るワンライナー

なんかテストとかでオレオレ証明書がたくさん欲しいとき、いちいちインタラクティブに作成するのは面倒。

```
sudo openssl req -batch -new -x509 -newkey rsa:2048 -nodes -sha256 \
  -subj /CN=example.com/O=oreore -days 3650 \
  -keyout /etc/httpd/ssl.key/example.key \
  -out /etc/httpd/ssl.crt/example.crt
```

こんな感じでたくさん作れます。

```
for x in {0..9}; do
  sudo openssl req -batch -new -x509 -newkey rsa:2048 -nodes -sha256 \
    -subj /CN=$x.example.com/O=oreore -days 3650 \
    -keyout /etc/httpd/ssl.key/$x.key \
    -out /etc/httpd/ssl.crt/$x.crt
done
```
Rubyのインスタンス変数代入メソッドをクラス内からよぶためにはselfが必須


今さら知った...
Rubyではレシーバ無しでメソッドがよばれると、その処理を実行しているインスタンス(self)を自動でセットするので基本的にメソッド内部でselfを書く必要は無いと思ってたけど、代入の場合は別.
理由は、メソッド内のローカル変数への代入か、アクセッサの代入メソッド呼び出しか判別できないので.

■うまくいかない例

setメソッドで`first_name =`、`last_name =`としているが、これはローカル変数への代入と解釈されるので意図しない結果になる.

```ruby:person.rb
class Person
  attr_accessor :first_name, :last_name

  def full_name
    first_name.to_s + "," + last_name.to_s
  end

  def set(fname:, lname:)
    first_name = fname
    last_name = lname
  end
end

## 
## setメソッドではローカル変数への代入になっているので何も起こらず、
## インスタンス変数はnilのまま
## 
person = Person.new
person.set fname: "Newton", lname: "Isaac"
p person.first_name
  # => nil
p person.last_name
  # => nil
```

■うまくいく例

```ruby:person.rb
class Person
  attr_accessor :first_name, :last_name

  def full_name
    first_name.to_s + "," + last_name.to_s
  end

  def set(fname:, lname:)
    self.first_name = fname # self.first_name =にする必要がある
    self.last_name = lname # self.first_name =にする必要がある
  end
end

person = Person.new
person.set fname: "Isaac", lname: "Newton"
p person.full_name
  # => "Isaac,Newton"
```

# References

* http://stackoverflow.com/questions/1496380/why-do-activerecord-callbacks-require-instance-variables-or-instance-methods-to
Golangで実装するCUIコマンド


最近、RDB(Mysql)を操作するバッチ処理を実装することが多く、お勉強がてらgolangを使い始めました。

やることはいつも

* パラメーター判断
* トランザクション制御
* ログ出力

こんな感じなので、
golangの動作確認を兼ねて、コマンドアプリのひな型になりそうなサンプルを作りました。

```go
package main

import (
  "flag"
  "fmt"
  "time"
  "os"
)

const VERSION = `0.0.1`

type ErrMessage struct {
	What string
}
func (e ErrMessage) Error() string {
	return fmt.Sprintf("%v: %v", time.Now(), e.What)
}

var (
  version = flag.Bool("V", false, "display version information")
  failure = flag.Bool("failure", false, "失敗させます")
)

func DoSomething(str string) (err error) {
    defer func() {
      // panicがおきたらRollback
      if e := recover(); e != nil {
          fmt.Fprintf(os.Stderr, "Rollback!!\n")
          // エラーメッセージフォーマット変換
          x, _ := e.(string)
          err = ErrMessage{x}
      }
    }()

    if *failure {
      // Error発生
      panic("DoSomething error...")
    }

    fmt.Fprintf(os.Stdout, "%s\n", str)
    return nil
}

func main() {
  flag.Parse()
  if *version {
    fmt.Printf("dosomething %s\n", VERSION)
    os.Exit(0)
  }

  str := "do something & commit!!"
  err := DoSomething(str)
  if err != nil {
    fmt.Fprintf(os.Stderr, "%s\n", err)
    os.Exit(1)
  }

  str = "and finish!!"
  fmt.Fprintf(os.Stdout, "%s\n", str)
}
```

パラメーターの実装は、flagを使えば楽ですね。

トランザクション制御について、
異常時のRollBackを実行するには、deferとrecover()を使えば良さそうです。
どのような動きになるのか、パラメーターで動作を分けて試してみました。

また、
ログ出力時、メッセージフォーマットを自作する[サンプル](http://golang.org/pkg/errors/#example_)があったので、採用してみました。
正常時のログはStdoutへ、異常時はStderrへ出力したいですから、そのあたりも実装してます。
fmt.Fprintf() に標準出力(os.Stdout)、標準エラー(os.Stderr)のファイルディスクリプタを渡します。

さて、実行してみましょう。
実行時パラメータ無しで、正常終了します。

```bash
$ (コマンド) 2>./stderr.log 1>./stdout.log
```

などとやれば、stderr.log には、何も出力されず、
stdout.log にログが出力されます。

failureパラメータをつけると、異常時の動作を確認できます。
（実際にはこんなパラメータは要らないですが...）

```bash
$ (コマンド) --failure 2>./stderr.log 1>./stdout.log
```

stderr.log で、deferに指定した処理が実行されたことがわかります。
stdout.logには出力されません。

何か異常があれば、すぐにpanic()を起こしてrollbackしてしまいましょう。
MacにAndroid Studioをインストールしてみた

勉強用にMacにAndroid Studioをインストールしてみたんだけど、
なんかエラーが出たので困って対応した話。
##1. Java7がないよというエラーがコンソールに出た

Java7のダウンロード先への誘導リンクが表示されていたので
Mac用のものをダウンロードしてインストールして
ごにょごにょしてAndroid Studioを再起動したら解決。

下記参照
[Android 5.0(Lollipop)対応でJava7が必要だった話](http://d.hatena.ne.jp/paraches/20141107)

##2. PreviewにRendering Problemsってエラーが出てプレビューが表示されない

ググったら使用しているSDKのバージョンが芳しくないようなので
適当に他のバージョンのSDKをインストールして
ターゲットを変更したらプレビューが表示されるようになった。

下記参照
[Android StudioのデザインビューでTextFieldsを追加するとエラー](http://blog.bylo.jp/develop/2014/08/1631/)
***

なんかIDEをスムーズに使い始めることができたこと、いままでない気がするぞ…。
[FuelPHP] FuelPHP内で外部ライブラリを使う

Fuel PHP内で外部ライブラリを使う方法について記載。
（Fuelの命名ルールに沿ってない自作クラスの場合もこの方法でいけます。Controller_Hoge、Model_Hogeなど以外のもの）

1./fuel/app/vendor/配下にライブラリを設置
（仮にHoge.class.phpとする）

2.使いたいクラスに、以下の内容を記述
第一引数はFuel内で呼び出す際のクラス名
第二引数はクラスファイルまでのパス

```
\Autoloader::add_class('Hoge',APPPATH.'vendor/Hoge.class.php');

class Controller_Base extends Controller_Template{
   $_hoge_obj = new Hoge();
}
```

以上
Wordpressのマルチサイトでメンバーページを作るときのいろいろ【WP-Members】

###はじめに

WordPressで会員サイトを作るのに、会員データ項目を項追加できるやつがいいなと思ったので、WP-Membersというプラグインを試してみました。
Theme My Loginだとうまくいきませんでした。
http://qiita.com/hanoopy/items/fc9055946dffd90270b2

###設定画面

WP-Membersは、設定画面がスッキリしてわかりやすかったです。
https://wordpress.org/plugins/wp-members/screenshots/

ThemeMyLoginの場合は、テンプレートを触っていくタイプの開発方法ですが、WP-Membersでは、表示項目が決まっているので、見た目だけCSSで調整していく感じですね。
会員データ項目は設定画面で設定できて、必須チェックとか表示名、name名など変更できます。
非プログラマーの人でも使いやすそうですね。

###日本語での表記

マルチサイトで使うのにも特に制限はありませんでした。
WordPressを日本語で使ってると、表示が日本語になるんですがこの翻訳が不完全です。
エラーメッセージや登録完了メッセージ、タイトルは英語、リンク名（「パスワード変更」など）は日本語となるのでかなり微妙です。WPが日本語で、英語サイトと日本語サイトを作るときなどは特にですね。。
サイトごとに設定画面がわかれているので、そこで言語を選択するとか、ラベルを設定画面で設定させるとかしてほしかったですね。

一番微妙なのが、会員データ項目に「姓」「名」がデフォルトで入ってること。これぐらいはいいのですが「姓」という表示を「お名前（姓）」とか「Last Name」に変えたりできないんですね。英語サイト作れないじゃん。

###エラーチェック
WP-Membersは、必須チェックのみのエラーチェックを行ってくれます。
数値チェックとか電話番号とか、jQueryValidator連動とか行ってくれるとありがたいのだけどなと思いました。

###リンク
WP-Membersの公式ページ
https://wordpress.org/plugins/wp-members/
WP-Membersについては、こちらの解説が詳しいです。
http://hijiriworld.com/web/wordpress-wp-members/
AWS DynamoDB の料金がわかりにくいので、最小テーブルの月額を計算してみた


# はじめに: この記事は最新のDynamoDBのコスティングに準拠していません。
DynamoDBも [オンデマンドキャパシティ](https://aws.amazon.com/jp/dynamodb/pricing/on-demand/)や[リザーブドキャパシティ](https://aws.amazon.com/jp/dynamodb/pricing/provisioned/)(読み込み/書き込み要求の項)がリリースされ時間が経ち、本記事の内容はだいぶ古くなっています。  
いずれ更新しますが、あくまで参考程度に留めて下さいますよう。


# 概要
DynamoDBを業務で使っていて、結構慣れてきたつもりだけど、
コスト感覚があまり身についてない。

公式ドキュメントだと、以下の様な記述になっていて、単位が小さすぎて感覚が掴みにくい。
以下東京リージョンの記述から引用。

> プロビジョニングされたスループットの容量 
> 書き込みスループット: $0.00742 :10 ユニットの書き込み容量あたり/1 時間
>（1 時間あたり最大 36,000 回の書き込みを実行するために十分な容量）*
> 読み込みスループット: $0.00742 : 50 ユニットの読み込み容量あたり/1 時間
>（1 時間あたり最大 180,000 回の強力な整合性のある読み込み、または最大 360,000 回の結果整合性のある読み込みを実行するために十分な容量）*

http://aws.amazon.com/jp/dynamodb/pricing/

引用ここまで。

なるほど、わからん……

# 計算してみた
とりあえず、最も小さい1テーブルについてどのくらい払えば作れるのか見積もってみて、
コストの最小単位を掴んで、1ヶ月あたりテーブルごとの費用の感覚値が出せるようにする。
サービスの売上だの自分の人件費だの、ランニングコストとの兼ね合いを考えられて便利そう。
2015/06/05 時点の東京リージョンでの価格で考える。

## リードキャパシティ
$0.00742 : 50 ユニットリードキャパシティあたり/1 時間  
より、1ドル120円として、1ユニットのリードキャパシティを1ヶ月使用した場合のコストは、
$0.00742 * 720[hour] / 50[ユニット] = 0.106848 [ドル/(ユニット * 月)] ≒ 12.82 [円/(ユニット * 月)]
となる。

## ライトキャパシティ
リードキャパシティの5倍のコストなので、同様に計算して、
64.11 [円/(ユニット * 月)]
となる。

## ストレージ
最初の25GBまで無料なので、ぼちぼちのサービス規模になるとか、
ECで異常なテキスト量の商品詳細がいっぱいあるとか、
そういう状態になるまではコストゼロとみてよさそう。
なったとしても、S3の低冗長化ストレージの1.1倍、
スタンダードストレージの0.86倍 なので、容量で爆発してしぬことは無さそう。

## で、結局いくらかかるの
リードもライトもキャパシティが1のテーブルについて、大きくないサービスなら容量課金が免れることから、
単純にキャパシティの和として、
**85.93 [円/(最小キャパシティテーブル・月)]**
となる。

20テーブル作っても1700円位なので、NoSQL的なもの慣れてる人・Mongoから移行しちゃうような人なら、
サービスによってはRDS使わなくてもいけちゃいそうな感じがする。



単純な計算ミスの指摘等もお待ちしております。

# 最近はコンソールに計算ツールがついていて簡単に計算できる
新しいDynamoDBコンソールで、リード/ライトキャパシティについての簡易コスト見積もり計算機が出現していた。
![20160121215342_DynamoDB_Calc_Console.png](https://qiita-image-store.s3.amazonaws.com/0/27870/735155f7-4a9e-2642-da8a-7f397b902df9.png)

2016/01/21 現在だと、キャパシティ1ずつ、結果整合性、インデックス無しで、
$0.67 = 78.344247 円
になる。
SuperAgent(HTTPリクエスト用のNode.jsモジュール)の使い方メモ


[SuperAgent](https://github.com/visionmedia/superagent) は HTTPリクエストをするための Node.js モジュール。

> Browserify や webpack 等を利用すればブラウザでも利用できると思われる。

ブラウザ向けでいうと、jQueryを使わずに Ajax 的なことをしたい場合に。

## 導入方法

npm コマンドでいれる。

```shell:
$ npm install [--save|--save-dev] superagent
```

## HTTPリクエストの例

例えば Qiia API(v1) にアクセスして新着投稿のタイトルを取得するのは次のように書ける。

```javascript
var request = require('superagent');

var URL = 'http://qiita.com/api/v1/items/?per_page=5';

request
  .get(URL)
  .end(function(err, res) {
    if (res.ok) {
      //console.log(res.status); // HTTPレスポンスのステータスコード
      res.body.forEach(function(item) { // HTTPレスポンスBody(JSON)の配列を1件づつ処理
        console.log(item.title);
      });
    } else {
      console.log('error');
    }
  });
```
bundle installしたときのエラー解消（curb、libv8、mysql2、pg、rmagick）

mac Yosemiteにて下記を参考にrailsの開発環境を構築。
参考: [【Yosemite】Mac OSX 10.10 Yosemite に Ruby + Rails4 開発環境の構築【初心者必見】](http://qiita.com/keneo/items/0a58b188183b5100e3af)

githubからrailsのファイルをclone。
Gemfileで指定されているgemをインストールするために`bundle install`。
次のようなエラー。

```
An error occurred while installing curb (0.8.5), and Bundler cannot continue.
Make sure that `gem install curb -v '0.8.5'` succeeds before bundling.
```

エラーメッセージの `gem install curb -v '0.8.5'`をやってみるがまたもエラー。

```
ERROR:  Error installing curb:
	ERROR: Failed to build gem native extension.
```

今度はバージョン指定せずに`gem install curb`としてみる。
正常にインストールされたので（0.8.8、最新だと思う）もう一度`bundle install`。
またさっきと同じエラー。

Gemfile.lock内に`curb (0.8.5)`という記述を見つけたので`curb (0.8.8)`に修正。
`bundle install`したら次のエラー。

```
An error occurred while installing libv8 (3.16.14.3), and Bundler cannot continue.
Make sure that `gem install libv8 -v '3.16.14.3'` succeeds before bundling.
```

ひとまずはGemfile.lockを修正したことでcurbに関しては解決したっぽい。
`gem install libv8 -v '3.16.14.3'`はまたエラーだったので、バージョン指定せずに`gem install libv8`。
最新の3.16.14.7がインストールされたので、Gemfile.lockのlibv8のバージョンを修正。
今度はmysql2のエラー。

```
An error occurred while installing mysql2 (0.3.11), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.3.11'` succeeds before bundling.
```

どうせ動かんと思ったのでバージョン省いて`gem install mysql2`としたらまたエラー。

```
ERROR:  Error installing mysql2:
	ERROR: Failed to build gem native extension.
```

いろいろ調べたらmysqlのライブラリ？がないっぽいので`brew install mysql`でインストール。
`bundle install`したら今度はpgないって。（ええかげんにしろ）
上記と同じエラー出たので調べたらpostgreSQLが必要なようです。
`brew install postgresql`でインストール。

今度はrmagickでエラー。
`checking for Magick-config... no`てのが気になって調べたところ、
ImageMagickってのをインストールする必要があるようです。
`brew install ImageMagick`でインストール。

やっと`bundle install`できました。
よくわからないままにインストールしまくりましたが動いたんでいいですw
Gorillaフレームワークを使ってJsonrpc APIサーバをDockerコンテナ上に構築してみた

# 履歴

* [NginxとGoコンテナでWEBアプリケーションをつくる](http://qiita.com/shinofara/items/3bf0e88ba889364c5059)
* [フレームワークでGojiを採用、Godoで監視ビルド対応](http://qiita.com/shinofara/items/69ffed71df165a46122b)
* そして今回

# 事前準備

## 必要な物

* [docker](https://docs.docker.com/userguide/)
* [docker-compose](https://docs.docker.com/compose/)
* [docker-machine](https://docs.docker.com/machine/)

今回はdockerは動いてる前提で進めていきます。


## 登場するGoパッケージ

jsonrpcは標準ライブラリではなく、Gorillaと呼ばれるWAFを使ってみます。

* go get github.com/gorilla/rpc/v2       
* go get github.com/gorilla/rpc/v2/json2 
* go get gopkg.in/godo.v1/cmd/godo


## サンプルをクローン

```
$ git clone https://github.com/shinofara/golang-web-application.git
$ golang-web-application
$ git checkout gorira-jsonrpc-2
```

## Containerを立ち上げる

```
$ docker-compose up -d
```

最後にgoをnginxにアタッチと出てます。
これはnginxコンテナにgoコンテナをリンク付けした感じです

## 確認してみましょう

```
$ curl -H "Content-Type: application/json" -d '{"jsonrpc":"2.0", "id":"test", "method": "Counter.Get", "params": {}}' -s http://192.168.99.100/jsonrpc/ 
{"jsonrpc":"2.0","result":{"Count":0},"id":"test"} 
```

jsonrpc 2.0protocolでやりとりが出来ました。

## APIのmethodの追加

```
s := rpc.NewServer()                                                                  
s.RegisterCodec(json2.NewCustomCodec(&rpc.CompressionSelector{}), "application/json") 
s.RegisterService(new(Counter), "")                                                   
http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir("./"))))              
http.Handle("/jsonrpc/", s)                                                           
listener, _ := net.Listen("tcp", ":9000")                                             
                                                                                      
log.Fatal(fcgi.Serve(listener, nil))                                                  
```

コードを見てもらえればと思いますが、```s.RegisterService``` でmethodの登録を行っています。

# 今回の大きな変更点

今回はGorilla,http,fcgiの連携だったりNginxの設定変更を行いました。

[今回の作業リポジトリとブランチ](https://github.com/shinofara/golang-web-application/tree/gorira-jsonrpc-2)
React で Google Map API を使う

# はじめに
React が面白いので，Google Map を使っているアプリも React ベースに移行しようと思った．予想通り，既にライブラリ [react-google-maps](https://github.com/tomchentw/react-google-maps) があって，これを使えば良いのだけれど，どうもオーバースペックな感じがする．そこで簡易コンポーネントを作った．

# ソースコード
Map コンポーネントのソースコードです．よりによって [Coffee-React](https://github.com/jsdf/coffee-react) です．

```coffee-script:Map.cjsx
Map = React.createClass

  propTypes:
    height: React.PropTypes.number.isRequired
    lat: React.PropTypes.number.isRequired
    lng: React.PropTypes.number.isRequired

  getInitialState: ->
    map: null
    mousemove_listener: null
    touchmove_listener: null

  componentDidMount: ->
    map = new google.maps.Map React.findDOMNode(@),
      center: new google.maps.LatLng(@props.lat, @props.lng)
      zoom: 15
      mapTypeId: google.maps.MapTypeId.ROADMAP

    if "onmousedown" of window
      # Use mouse events
      @setState
        mousemove_listener: google.maps.event.addListener map,
                                                  "mousemove", (e) => @handleMouseMove e

    if "ontouchstart" of window
      # Use touch events
      @setState
        touchmove_listener: google.maps.event.addListener map,
                                                  "mousemove", (e) => @handleTouchMove e

    @setState
      map: map

  componentWillUnmount: ->
    if @state.mousemove_listener?
      google.maps.event.removeListener @state.mousemove_listener

    if @state.touchmove_listener?
      google.maps.event.removeListener @state.touchmove_listener

  handleMouseDown: (e) ->
    # Mouse down event handler.

  handleMouseUp: (e) ->
    # Mouse up event handler.

  handleTouchStart: (e) ->
    # Touch start event handler.

  touchEndHandler: (e) ->
    # Touch end event handler.

  handleMouseMove: (e) ->
    # Mouse move event handler.

  handleTouchMove: (e) ->
    # Touch move event handler.

  render: ->
    <div style={ height: @props.height } onMouseDown={ @handleMouseDown }
         onMouseUp={ @handleMouseUp } onTouchStart={ @handleTouchStart }
         onTouchEnd={ @handleTouchEnd } />
```

高さのみ後から変更できるようにしたかったので，height プロパティを追加しています．lat, lng プロパティはマップ中心地点の緯度経度です．zoom などハードコーディングしているものも本当はプロパティ化すべきです．

イベントハンドラに関しては，DOM イベントは他の React コンポーネント同様に登録していますが，MouseMove イベントのみ，画面の x-y 座標ではなく地図上の緯度経度を取得するため Map API のイベントを使用しています．そのため，componentDidMount でイベントハンドラの登録と componentWillUnmount での登録削除が必要です．

また，タッチイベントも拾うようにしています．ただし，どこかで

```coffee-script
React.initializeTouchEvents(true)
```

が必要です．

# その他のコンポーネント
Marker や InfoWindow などはまた別の機会に．
eclipse ダウンロードサイト for mac

Eclipseのインストール

Eclipse は、以下のサイトからダウンロードします。
Eclipse ダウンロードサイト(http://eclipse.org/downloads/)

表示されたダウンロード画面の一覧にある
「Eclipse IDE for Java EE Developers」の
「Mac OS X 64bit」をクリックしてください。

後は開いてインストールすればOK
[AutoLayout] 入れ子にせず、ImageViewの中央に要素を配置したい

# 前置き

ImageViewは中に子Viewを持てず、例えば背景に何かを設定して、その背景領域を基準にレイアウトしていくときにViewのネストが深くなりがち。

親子関係をつくらなくても、兄弟関係の要素で中央寄せという指定がAutoLayoutでできるのでメモ。（いままでCenter in Containerしか使ってなかった)

# やりかた

２つの兄弟関係のViewを選択する (ここではImageViewとView)

![select.png](https://qiita-image-store.s3.amazonaws.com/0/15000/851d208f-b735-7b36-dcfe-6c90115a6aec.png)

ConstraintsのHorizontal Centers / Vertical Centersにチェックを入れる。

![check_constraints.png](https://qiita-image-store.s3.amazonaws.com/0/15000/5a775044-47e0-ae44-8d34-a70b83468583.png)

これで配置するとその兄弟要素に対する中央寄せができるようになる。

![complete.png](https://qiita-image-store.s3.amazonaws.com/0/15000/e07e67c4-538d-dba2-1442-7d0053f5d21e.png)

親子関係をもてないときや、無駄なViewを増やしたくない時にAlignment系のConstraintsは便利.

## コード

- https://github.com/mattak/AutoLayoutMaterialCenteringSample
JSONの整形・圧縮

作った
http://revinx.net/tool/json_viewer.html

↓要点

```js:整形
var json = $('#compressed').val();
try {
    var jsonArray = JSON.parse(json);
} catch (e) {
    return false;
}
var jsonStr = JSON.stringify(jsonArray, null, 4);
$('#ordered').val(jsonStr);
```

```js:圧縮
var json = $('#ordered').val();
try {
    var jsonArray = JSON.parse(json);
} catch (e) {
    return false;
}
var jsonStr = JSON.stringify(jsonArray, null, 0);
$('#compressed').val(jsonStr);
```
monacaでスマホアプリを作ろう #2

せっかくなので、簡単にスマホっぽいUIを実現できるOnsenUIと、MVCモデルを簡単に実装できるAngularJSを使ってアプリを作ってみたいと思います。


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

「Onsen UI最小限のテンプレート」を選択します。

プレビュー、または実機上でMonacaデバッガを起動すると殺風景なページが表示されるはずです。


## AngularJSの機能を試す

さっそくAngularJSの強力な機能である双方向データバインディングを試します。

こんな感じのコードをpage1.htmlに追加してください。

```html
<input type="text" class="text-input" ng-model="model_test">
<br>
{{model_test}}
```

これでテキストボックスに入力した文字がすぐ下に表示されます。
これだけで動的なページが作れてしまうという....恐るべしAngularJS!


## controllerを使ってみる

AngularJSではMVCモデルでコードが簡単にかけます。
まずはMVCのC。ロジックを扱うControllerを追加してみます。

まず、index.htmlを修正

```js
ons.bootstrap();
   ↓
var app = ons.bootstrap();
```

angularjsを扱うモジュールに"app"と名前を付けました。
深く考えずおまじないだと思ってください。

続いてjsファイルを追加
まずはフォルダを作ります。

```
www/js/controller/
```

さらにcontrollerの中にjsファイルを作ります

```
page1controller.js
```

中身はこんな感じ

```js
app.controller('Page1Ctrl',function($scope){
    
    $scope.msg= "message from controller.";
});
```

再度index.htmlに戻ってjsの読み込みを追加します。

```html
    <script src="js/controller/page1controller.js"></script>
```

仕上げにpage1.htmlを修正


```html
<ons-page>
<div ng-controller="Page1Ctrl">
.
.
.

{{msg}}

</div>
</ons-page>
```

controllerで設定したmsgがView(html)で表示されました。
DjangoでDatetimeFieldのformに、HTML5の<input type="date/time">を使えるようにする

```py:widgets.py
# coding: utf-8
from __future__ import unicode_literals
from __future__ import absolute_import
from django import forms


class DateTimeWidget(forms.SplitDateTimeWidget):
    """
    A Widget that splits datetime input into two <input type="date"> and <input type="time"> inputs.
    """
    def __init__(self, attrs=None, date_format=None, time_format=None):
        super(DateTimeWidget, self).__init__(attrs, date_format, time_format)
        self.widgets[0].input_type = "date"
        self.widgets[1].input_type = "time"
```
monacaでスマホアプリを作ろう #1



アカウントさえ取得すれば速攻で開発環境が手に入り、即実機でデバッグ可。
HTML+JavascriptでiPhone,Android,Chromeアプリが作れてしまう！


という恐るべき開発環境 MonacaCloudの紹介です。

https://ja.monaca.io/

へー、どんだけ簡単なんだよぉ、どうせアレやってコレ入れてってめんどい手順があるんだろ？

という前にぜひ以下のチュートリアルをお試しください。

- Monaca プロジェクトの作成

http://docs.monaca.mobi/cur/ja/learning/quick_start/creating_a_project/


- Monaca デバッガー上でのプロジェクトの実行

http://docs.monaca.mobi/cur/ja/learning/quick_start/running_project_on_debugger/


どうですか？
アカウントさえ作れば、5分で実機デバッグまで辿り着く恐るべき手軽さ。
こんな素晴らしいものを作っちゃったAsialさんに感謝です。


-------
## 目次
[#0 ワイヤーフレームを作る](http://qiita.com/furu8ma/items/8a02a9a5cafae981047b)

[#2 AngularJSの機能を試す,Controllerを使ってみる](http://qiita.com/furu8ma/items/397f96b5b5a0a7260165)
[#3 デザインを変えてみる](http://qiita.com/furu8ma/items/5844827b9b1ffbb8739f)
[#4 動的にリストを生成する](http://qiita.com/furu8ma/items/37f9d9b9100fac0561b2)
[#5 Serviceを使ってみる](http://qiita.com/furu8ma/items/879bb1e52052c47ff985)
[#6 ページを切り替える](http://qiita.com/furu8ma/items/8ab9dd333e2497a0a6f3)
Nginx + GoFCGIでreadv() failed (104: Connection reset by peer) while reading upstream

Nginx

```
upstream container-sentry { server go:9000; }
location / {                       
   proxy_set_header Host $host;    
   fastcgi_pass  container-sentry;         
   include       fastcgi_params;   
   break;                          
 }                                 
```

Go

```
listener, _ := net.Listen("tcp", ":9000")
fcgi.Serve(listener, nil)
```

いろいろ端折ってますが、こんなかんじで動かしてた時

```
readv() failed (104: Connection reset by peer) while reading upstream
```

とおこなれ何これ？何文句あるの？
ッて思ってたけど

```
location / {                       
   proxy_set_header Host $host;    
   fastcgi_pass  container-sentry; 
+   fastcgi_keep_conn on;           
   include       fastcgi_params;   
   break;                          
 }    

```

で、かいけつ
Commons-IO:ディレクトリの内容変更を検知するio.monitorパッケージ

# ファイルの変更を検知

Commons-IOの中でも一風変わった機能があるパッケージである io.monitorパッケージ、これらはあるディレクトリ内のファイル変更や削除などを自動検知する仕組みを提供します。

提供されるクラスは以下のものです。デザインパターンの1つ、Observerパターンで作られています。

## 登場するクラスたち

io.monitorパッケージの中で、実際に扱うクラスたちは以下のものです。

* FileAlterationMonitor
    * Observerを管理し、ディレクトリを監視する。監視の開始、終了を制御。
* FileAlterationObserver
    * Listenerを扱う。複数のListenerを扱うことが可能。
* FileAlterationListener（インタフェース）
    * ディレクトリの変更やファイルの作成など、検出する内容にあわせたメソッドを定義。
    * 空の実装クラス FileAlterationListenerAdaptor が存在する

## 使い方

以下、簡単な使い方です。

* 監視するディレクトリを指定する
* Monitorのインスタンスを生成
* Observerのインスタンスを生成
* Listenerのインスタンスを生成
    * 監視する内容を実装する
* ObserverにListenerを登録する
* MonitorにObserverを登録する
* Monitorを起動する

## 実装例

```java:MonitorSample.java(抜粋)
@Log4j2
public class MonitorSample
	public void start() throws Exception {
		// Monitorの生成。監視間隔はミリ秒。
		FileAlterationMonitor monitor = new FileAlterationMonitor(2000);
		// Observerの生成。監視するディレクトリを指定。
		File dir = new File("E:/target");
		FileAlterationObserver observer = new FileAlterationObserver(dir);
		// Listenerを生成して監視する内容を実装
		FileAlterationListener listener = new FileAlterationListenerAdaptor() {
			public void onDirectoryChange(File directory) {
				log.debug("onDirectoryChange:{}" , directory.getName());
				super.onDirectoryChange(directory);
			}

			@Override
			public void onDirectoryCreate(File directory) {
				log.debug("onDirectoryCreate:{}" , directory.getName());
				super.onDirectoryCreate(directory);
			}

			@Override
			public void onDirectoryDelete(File directory) {
				log.debug("onDirectoryDelete:{}" , directory.getName());
				super.onDirectoryDelete(directory);
			}

			@Override
			public void onFileChange(File file) {
				log.debug("onFileChange:{}" , file.getName());
				super.onFileChange(file);
			}

			@Override
			public void onFileCreate(File file) {
				log.debug("onFileCreate:{}" , file.getName());
				super.onFileCreate(file);
			}

			@Override
			public void onFileDelete(File file) {
				log.debug("onFileDelete:{}" , file.getName());
				super.onFileDelete(file);
			}

			@Override
			public void onStart(FileAlterationObserver observer) {
				log.debug("onStart:{}" , observer.toString());
				super.onStart(observer);
			}

			@Override
			public void onStop(FileAlterationObserver observer) {
				log.debug("onStop:{}" , observer.toString());
				super.onStop(observer);
			}
		};
		// ObserverにListerを登録
		observer.addListener(listener);
		// MonitorにObserverを登録
		monitor.addObserver(observer);
		// Monitorの起動
		monitor.start();
	}
}
```
Multi Page Application でも webpack で JavaScript をコンパイルしよう

世間ではそこかしこから SPA SPA という声が聞こえて来ますが、まだ全然 Multi Page Application も作ってますよね？

そんな Multi Page Application における JavaScript の依存関係解決の話題が少ないので、長時間のググり＆試行錯誤の結果をまとめます。

## どんな風にしたいのか

```html
<!-- pageA.html -->
<body>
  <div>hello</div>
  <script src="commons.js"></script>
  <script src="pageA.bundle.js"></script>
</body>
```

こんな感じでスクリプト2つ読み込むだけでOKにしたい。
commons に jquery 等のライブラリ埋め込んだり、どのページでも使う処理を書いたりしたい。
{page_name}.bundle.js にそのページでしか使わない処理を書きたい。

## どうしたか→ webpack でかいけつだ！

長時間ググった割に、webpack のドキュメントにそのものズバリなものがあったので、なんだか微妙な気持ちになりました(´・ω・｀)

<http://webpack.github.io/docs/optimization.html#multi-page-app>

正直この記事は、上記のドキュメントがもっと見つかりやすくなるといいなと思って書いているので、
そっちで英語を読んでもらう方がよいこともあるかと思います。

## 自分が選んだ構成

ディレクトリ構成はこんな感じ。まだそんなに大きく育ってない

- js/
    - page/
        - pageA.js
        - commons.js
    - util/
        - index.js

webpack のコンフィグは下記。

```js
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

{
  entry: {
    commons: './js/page/commons.js'),
    pageA: './js/page/pageA.js')
  },
  output: {
    path: './js',
    filename: '[name].bundle.js'
  },
  plugins: [
    new CommonsChunkPlugin('commons', 'commons.js')
  ]
}
```

この構成で、[webpack の gulp での使用例ドキュメント](http://webpack.github.io/docs/usage-with-gulp.html) を参考に gulp でビルドするように組んでいます。

HTML は上記と同じ。まさしく実現したかったことが実現できました。webpack さんナイス。

## まとめ

最近の JavaScript の話題が SPA ばっかり、趣味で勉強してるのもそればっかりだから、Multi Page Application でどうしたらいいのかって逆に調べるの難しいなと思いました :tired_face:
チャット系システム開発して十分品質について考えた

あらすじ：
チャット系のシステム作った
開発中のプロトタイプを元に「これがないとチャットシステムとしてビミョー」という機能を上げさせた

「投稿時間の表示してほしい」
「投稿者の名前してほしい、デフォルトアイコンが並ぶと誰かわからん」
「返信したときに、どれに対する返信か見たい」
「ここまで見た、がほしい」
「URLの内容を展開して欲しい」

ほぼtwitterにある機能。
チャット系の十分品質はtwitterになったんだ感が強い

ある革新的なプロダクトが登場して、ユーザーの品質の期待値がそのプロダクトが基準になってしまう現象が発生した。

チャットに限らないけど、そういう現象は今後もあるし、「ユーザーがこの商品を何と競合として比較するか」は常に考えたほうがいいと思った
Rails（ActiveRecode）で一週間分のレコードを取得する

## 取得方法

ActiveSupport の日付関連の拡張を使用する。

```rb:item.rb
from  = Time.current.at_beginning_of_day
to    = (from + 6.day).at_end_of_day
items = Item.where(created_at: from...to)
```

## その他

```rb:一月間のデータ取得
from  = Time.current.at_beginning_of_day
to    = (from + 1.month)
items = Item.where(created_at: from...to)
```

```rb:一年間のデータ取得
to    = Time.current.at_beginning_of_day
from  = (to - 1.year)
items = Item.where(created_at: from...to)
```

## 参考サイト

ActiveSupport の日付関連の拡張のドキュメント

Dateクラス
http://railsdoc.com/references/beginning_of_day#日付関連

DateTimeクラス
http://railsdoc.com/references/beginning_of_day#日時関連

Timeクラス
http://railsdoc.com/references/beginning_of_day#時間関連(TIme)
Android TVで縦に画像サムネイルを表示する

先日Android TVに触れる機会があったので、画像サムネイルを縦に表示したときのメモ。

## PresenterとFragmentを準備
VerticalGridFragmentを継承したFragmentでVerticalGridPresenterを使う

```java
VerticalGridPresenter gridPresenter = new VerticalGridPresenter();
gridPresenter.setNumberOfColumns(1);
setGridPresenter(gridPresenter);

mAdapter = new ArrayObjectAdapter(new CardPresenter());

int count = 0;
for (ImageItem item : list) {
    mAdapter.add(count++, item);
}

setAdapter(mAdapter);

setOnItemViewClickedListener(new ItemViewClickedListener());
setOnItemViewSelectedListener(new ItemViewSelectedListener());
```

表示用のCardPresenterを作る

```java
public class CardPresenter extends Presenter {

    private ImageLoader mImageLoader;

    @Override
    public ViewHolder onCreateViewHolder(final ViewGroup parent) {
        // 今回は単なるImageViewのみ追加。別途TextViewとかも入れられる
        ImageView imageView = new ImageView(parent.getContext());
        

        // 中略...

        return new ViewHolder(imageView);
    }

    @Override
    public void onBindViewHolder(final ViewHolder viewHolder, final Object item) {
        // Objectとして渡されるitemからurl文字列取ったり、いろいろ
        ImageItem data = (ImageItem) item;
        
        ImageView imageView = (ImageView) viewHolder.view;
        ImageLoader.ImageListener listener = ImageLoader.getImageListener(
                imageView, R.drawable.something, R.drawable.something);
        mImageLoader.get(item.getUrl, listener);

        // 中略...
    }

    @Override
    public void onUnbindViewHolder(final ViewHolder viewHolder) {
    }
}

```

## VerticalGridFragmentをaddする
任意のレイアウトにfragmentTransaction.addとかreplaceする。
d-padで選択されたときに何かしたい場合はリスナー追加してイベント受け取ればいい。

```java
private final class ItemViewClickedListener implements OnItemViewClickedListener {
    @Override
    public void onItemClicked(final Presenter.ViewHolder itemViewHolder, final Object item,
                              final RowPresenter.ViewHolder rowViewHolder, final Row row) {
        //　Clickされた時の何か
    }
}


private final class ItemViewSelectedListener implements OnItemViewSelectedListener {
    @Override
    public void onItemSelected(final Presenter.ViewHolder itemViewHolder, final Object item,
                               final RowPresenter.ViewHolder rowViewHolder, final Row row) {
        //　選択された時の何か
    }
}
```

PhoneやTabletと全然違って難しく、合ってるか分からないけどとりあえず表示は出来た。
ExcelからPHP動かしてみた

##ExcelからPHP動かしてみた

なんかExcelでVBA使っててふと、これ外部スクリプトで処理してデータ受け取れたらなと思い、どうやらコンソールを使えば行けそうな感じがしたのでやってみました。

とりあえず簡単に動かしたかったのでスクリプトはPHPを使用しましたがコンソールで動けば多分なんでもいけると思います。

手順としては
Excel　→　VBA　→　標準入出力　→　PHP　→　標準入出力　→　VBA　→　Excel
な感じです。

```vbnet:excel_php_test.xlsm
Sub テスト()

Dim path As String
Dim before As String

Dim WSH, Exec_cmd, Com As String
Dim Result As String
Dim head, foot() As String

'現在のパス
path = ThisWorkbook.path
'変換元値
before = Range("B3").Value

'コマンドプロンプトオブジェクト
Set WSH = CreateObject("WScript.Shell")
'コマンド生成
Com = "php " & path & "\excel_php_test.php"
'コマンド実行
Set Exec_cmd = WSH.Exec("%ComSpec% /c " & Com)
'標準入力
Exec_cmd.StdIn.WriteLine (before)
'終わるまで待つ
Do While Exec_cmd.Status = 0
        DoEvents
    Loop
    '結果を全部Resultに
    Result = Exec_cmd.StdOut.ReadAll
'頭区切り文字列で分ける
head = Split(Result, " header ")
'尻区切り文字列で分ける
foot = Split(head(1), " footer ")
'foot(0)に変換後の値が入る（はず）
Range("D3").Value = foot(0)

End Sub
```

```php:excel_php_test.php
<?php

//標準入力
$str = trim(fgets(STDIN));
//$str = mb_convert_encoding($strIn, "UTF-8", "SJIS");

//標準出力用ヘッダー
$header = " header ";
$footer = " footer ";


//処理
$strCh = $str."食べたい";

//出力用にSJISに
//$strOut = mb_convert_encoding($strCh, 'SJIS', 'UTF-8');

//出力
//確認用
echo "変換前 -> ".$str." 変換後 -> ".$strCh."\n";
//Excelで読みたい値をheader,footerで囲む
echo $header;
echo $strCh;
echo $footer;
//確認用
echo "end";

```

これを実行すると
![b.png](https://qiita-image-store.s3.amazonaws.com/0/75588/282553e0-e5d6-e210-f5ce-61b06875841a.png)
　　　　　　　　　　　↓
　　　　一瞬コンソールが立ち上がって
　　　　　　　　　　　↓
![a.png](https://qiita-image-store.s3.amazonaws.com/0/75588/96a1a490-190d-3a8c-6152-7e866c3a07b9.png)

こんな感じです。
やった感想としては

* 言語特有のライブラリなんかを使えば利点はある(？)
* とりあえず無理やりやった感があるのでもうちょっとスマートなやり方があるかも。
* 文字コードよく分からん
* VBAの配列よくわからん
連想配列の自由度検証

javaやC#等では型を指定する必要があったのに、PHPは無い。
したらばどんな自由なことができるのか連想配列で遊んでみた。

* * *

# keyを省略したら

```php:Array1
$d = array(1, 2.5, 03, "4");  //keyの値
var_dump($d);　　　　　　　　　//0,1,2,3
```
結果　→　普通の配列

# 同じkeyを２回宣言

```php:Array2
$a = array(　　　　　　   //value値
        "1" => "a",     //"a"
        "2" => "b",     //"x"
        "3" => "c",     //"c"
        "2" => "x"
    );
var_dump($a);
```
結果　→　値は上書きされる

# valueの型をごちゃまぜに

```php:Array3
$b = array(           //valueの型
        "a" => 1,     //int
        "b" => 2.5,   //float
        "c" => 03,    //int
        "d" => "04"   //string
    );
var_dump($b);
```
結果　→　ごちゃまぜOK

# keyの型をごちゃまぜに

```php:Array4
$c = array(           //keyの値
        1 => 1,     　//1
        2.5 => 2.5, 　//2
        03 => 03,   　//3
        "4" => "04",　//4
        -5 => 5,    　//-5
        "a" => 6    　//"a"
    );
var_dump($c);
```
結果　→　これはまぁできるかなって


# key値をすっ飛ばす
```php:Array5
$e = array(         //keyの値
        1 => 1,     //1
        2 => 2,     //2
        10 => 3     //10
    );
$e[] = 4;           //11
var_dump($e);
```
結果　→　すっ飛ばした続きからになる

# key値がマイナス
```php:Array6
$f = array(         //keyの値
        -5 => 1,    //-5
        -3 =>2,     //-3
        -10 => 3    //-10
    );
$f[] = 4;           //0
var_dump($f);
```
結果　→　0からになる

* * *

javaとかに慣れてたら、便利なような気もするけど気持ち悪い。
検証はしてみたが、自分的に実際使うことはなさそう。
【PhotoShop】乗算レイヤーの白いところを透明にできるアクション

#PhotoShop乗算レイヤーは極力使わないでほしい

デザイナーも兼ねてなかったり、外部からPSDが来たときにたまに困るのが乗算レイヤー・・・
背景消して切り出そうとしたらなんか白いじゃん！！みたいなアレ。
CCとかでてきたので新しい機能でどうにかできんのかな？と思ってググってみたら、[白の要素を透明にするPhotoshopアクション - saucer](http://graphicartsunit.tumblr.com/post/75913670229/photoshop)という救世主が。

##どんなときに使えばいいのか
簡単にいうとこんなかんじ
![乗算レイヤーの白いところを透明にできるとはどういうことなのか](https://qiita-image-store.s3.amazonaws.com/0/13242/d99cb76a-38e3-f849-d639-69d0fda0c5c3.png)

##どうやって使うのか
1. 元のPSDでアクションを使用するとすべてのレイヤーが結合されてしまうので、このアクションを使いたいレイヤーを新規ファイルにコピー
2. カラーなら「カラーの白い範囲を透明に-1.0」、グレースケール（白黒）なら「グレースケールの白い範囲を透明に-1.0」のほうを使う
3. アクションが終わったら周りが透明になったレイヤーを元のレイヤーにコピーする（ずれたら位置調整も）
Unity C#(Mono)でgZip圧縮を行うには

下記ページ参照
　http://melan260.net/?p=530


下記URLに解決策

　http://forum.unity3d.com/threads/cant-use-gzipstream-from-c-behaviours.33973/



　ICSharpCode.SharpZipLib.dllが必要

```
using System;
using System.IO;
using System.Text;
using ICSharpCode.SharpZipLib.BZip2;
 
[System.Serializable]
public struct Zipper
{
    public static string ZipString(string sBuffer)
    {
        MemoryStream m_msBZip2 = null;
        BZip2OutputStream m_osBZip2 = null;
        string result;
        try
        {
            m_msBZip2 = new MemoryStream();
            Int32 size = sBuffer.Length;
            // Prepend the compressed data with the length of the uncompressed data (firs 4 bytes)
            //
            using (BinaryWriter writer = new BinaryWriter(m_msBZip2, System.Text.Encoding.ASCII))
            {
                writer.Write( size );
               
                m_osBZip2 = new BZip2OutputStream(m_msBZip2);
                m_osBZip2.Write(Encoding.ASCII.GetBytes(sBuffer), 0, sBuffer.Length);
               
                m_osBZip2.Close();
                result = Convert.ToBase64String(m_msBZip2.ToArray());
                m_msBZip2.Close();
               
                writer.Close();
            }
        }
        finally
        {
            if (m_osBZip2 != null)
            {
                m_osBZip2.Dispose();
            }
            if (m_msBZip2 != null)
            {
                m_msBZip2.Dispose();
            }
        }
        return result;
    }
 
    public static string UnzipString(string compbytes)
    {
        string result;
        MemoryStream m_msBZip2 = null;
        BZip2InputStream m_isBZip2 = null;
        try
        {
            m_msBZip2 = new MemoryStream(Convert.FromBase64String(compbytes));
            // read final uncompressed string size stored in first 4 bytes
            //
            using (BinaryReader reader = new BinaryReader(m_msBZip2, System.Text.Encoding.ASCII))
            {
                Int32 size = reader.ReadInt32();
               
                m_isBZip2 = new BZip2InputStream(m_msBZip2);
                byte[] bytesUncompressed = new byte[size];
                m_isBZip2.Read(bytesUncompressed, 0, bytesUncompressed.Length);
                m_isBZip2.Close();
                m_msBZip2.Close();
               
                result = Encoding.ASCII.GetString(bytesUncompressed);
               
                reader.Close();
            }
        }
        finally
        {
            if (m_isBZip2 != null)
            {
                m_isBZip2.Dispose();
            }
            if (m_msBZip2 != null)
            {
                m_msBZip2.Dispose();
            }
        }
        return result;
    }
}
```
PHPのtraitでできることできないこと

traitってどこまでできるんだろうなーとちょっと調べた。調べた環境はPHP5.6だけど基本5.4以上なら一緒のはず。

```php
<?php
interface HogeInterface
{
	function hoge();
	function fuga(array $monge);
}

trait HogeTrait
{
	function hoge()
	{
		echo 'hogehoge.', PHP_EOL;
	}
	function mongeeeeee(array $monge)
	{
		array_walk($monge, function($v){ echo $v, PHP_EOL; });
	}
}

class HogeClass implements HogeInterface
{
	use HogeTrait
	{
		// interfaceで定義してる名前に合わせる
		mongeeeeee as fuga;
	}

	// ↓このようなヒンティングは可能だが意味が無い。
	// てかタイプヒンティングは利用時までチェックすらされない
	function traitor(HogeTrait $trait) 
	{
		$trait->mongeeeeee(['mon', 'mon', 'mon']);
	}

	function makeItHoge(HogeInterface $impl)
	{
		$impl->hoge();
	}
}

$hoge = new HogeClass();
$hoge->hoge(); // Traitで実装したメソッド
$hoge->fuga([1,2,3]); // TraitでAsを使って実装したメソッド
$hoge->makeItHoge($hoge); // Interfaceとして振る舞わせているつもり。勿論大丈夫
//$hoge->traitor($hoge); // ヒンティングしてる仮引数の型と一致せずエラーになる。
//$hoge->traitor(new HogeTrait()); // trait単体でnewもできないし詰んだ
```

- traitは型ではない
    - interfaceがわりには使えない
    - 当然「実装のあるinterface」ではない
- traitをinterfaceのメソッド実装に使うことはできる
    - asを使って名前を変えて適合させるでもOK
    - あるinterfaceとセットでデフォルト実装を提供するtraitを作っておくみたいなことができる
        - むしろそういうのこそ活きるっぽい
pcapファイルからシーケンスチャート生成


SIPダイアログの調査過程で、pcapファイルからシーケンスチャートを作れないか調べたのでメモ。

自分の環境は、MacOSX(Marverick)とMacPortsだが、Unix系ならほぼ同様と思います。

##ツール
#####pcap2msc
 以下のtshark,mscgenを使ってpcapからPNGを生成するスクリプト
 https://code.google.com/p/pcap2msc/

 これ自体はpythonスクリプトになので、冒頭の

```
#!/usr/bin/python
```
を自分のpythonパスに合わせる。

#####tshark
 https://www.wireshark.org/
 CUI版wireshark
 Wiresharkをインストールするとついてくる

#####mscgen
 http://www.mcternan.me.uk/mscgen/
 一定の形式で記述されたメッセージシーケンスをPNGなどでチャート化してくれる。
 自分はMac portを使っているので、

```
 port install mscgen
```
でインストールできた。

##シーケンスチャートの作成

ターミナルから以下のようなコマンドを打つと、PNGファイルを生成してくれる。

```
$ pcap2msc ./avses-tosip.cap sip | mscgen -T png -o avses-tosip.png
```

![avses-tosip.png](https://qiita-image-store.s3.amazonaws.com/0/72909/1defe77a-0a97-aaca-46f0-06a0109891c0.png "avses-tosip.png")

因みにmscgenなしでも

```
$ pcap2msc ./avses-tosip.cap sip
```

こんな感じで返してくれるので、図が要らない場合でも重宝する。

```
msc {
  u0[label="148.147.33.67"],u1[label="148.147.33.5"],u2[label="148.147.33.65"];
  u0=>u1 [ label = "SIP Request: SUBSCRIBE sip:3521@mtcsv.avaya.com" ] ;
  u0<=u1 [ label = "SIP Status: 202 Accepted" ] ;
  u0<=u1 [ label = "SIP Request: NOTIFY sip:3521@148.147.33.67;transport=tcp" ] ;
  u0<=u1 [ label = "SIP Request: NOTIFY sip:3521@148.147.33.67;transport=tcp" ] ;
  u0=>u1 [ label = "SIP Status: 200 OK" ] ;
  u0=>u1 [ label = "SIP Status: 200 OK" ] ;
  u0=>u1 [ label = "SIP Request: SUBSCRIBE sip:3521@mtcsv.avaya.com" ] ;
  u0<=u1 [ label = "SIP Status: 202 Accepted" ] ;
  u0<=u1 [ label = "SIP Request: NOTIFY sip:3521@148.147.33.67;transport=tcp" ] ;
  u0<=u1 [ label = "SIP Request: NOTIFY sip:3521@148.147.33.67;transport=tcp" ] ;
  u0=>u1 [ label = "SIP Status: 200 OK" ] ;
  u0=>u1 [ label = "SIP Status: 200 OK" ] ;
}
```
Node.js gulpでwebpackを使う

Node.jsを初めて9日目？（だんだんあやふやになってきた）

複数あるjsファイルを結合するのもめんどくさくなってきたので自動化
ちなみにいままでコマンドラインから

````cmd
webpack .\js\webpack\entry.js .\public\javascripts\main.js
````

こんな風にして、jsフォルダのentry.jsをエントリポイントにして、main.jsってのを作成していました。

#gulpfile.jsの書き方

特段他と違いはありません。

````gulpfile.js
必要な箇所だけ抜粋で書いています。
var webpack = require('gulp-webpack');

gulp.task('webpack',function(){
    gulp.src(['js/webpack/*.js'])
            .pipe(webpack())
            .pipe(gulp.dest('public/javascripts/'))
})

gulp.task('watch',function(){
        gulp.watch(['js/webpack/*.js'],['webpack'])
})


````

これだけ。javasciprtsフォルダを除いてみると、
`d6c62e82726abbbf54cc.js`

なんじゃこら？main.jsにならない。そりゃそうだ。どこにも指定してなかった。
名前を指定しないと、独自にHashの名前を付けてくれるようになっています。

#任意の名前を付けて出力

````gulpfile.js
gulp.task('webpack',function(){
    gulp.src(['js/webpack/entry.js'])
    .pipe(webpack({
      output: {
        filename: 'main.js',
      }
     )
    .pipe(gulp.dest('public/javascripts/'))
});
````

これで`public/javascripts/main.js`が作成されました。

複数エントリポイントがある場合は、

````js
//本家ドキュメントから引用
gulp.task('default', function() {
     gulp.src('src/entry.js')
    .pipe(webpack({
      entry: {
        app: 'src/app.js',
        test: 'test/test.js',
      },
      output: {
        filename: '[name].js',
      },
    }))
    .pipe(gulp.dest('dist/'));
});
````

こんなふうにやればよいそうです。
また、別途`webpack.config.js`を持っているのであれば

````js
gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));
````

このようにwebpack.config.jsのありかを示してあげれば、その指示通りに実行してくれるようです。

[参考　本家ドキュメント]https://github.com/shama/gulp-webpack
WindowsFormsHostがメモリリークする問題への対応

WindowsFormsHostが動的に作成・削除される状態で、メモリプロファイラーなどで見ると、削除したWindowsFormsHostが解放されずに残ってしまって、メモリリークを起こしていました。
対処法を調べたところ以下の方法で改善しました。

https://social.msdn.microsoft.com/Forums/vstudio/en-US/2741d762-f430-4b30-abbf-2b8cb4a24aa9/cleaning-up-windowsformshost-in-a-wpf-dialog?forum=wpf

リンク先が消えてしまっても大丈夫なように一応書いておきます。

```csharp

private void Window_Closed(object sender, EventArgs e)
{
  object winFormsAdapter = typeof(WindowsFormsHost).GetProperty("HostContainerInternal",
    BindingFlags.GetProperty |
    BindingFlags.NonPublic | BindingFlags.Instance).GetValue(host,null);
  if (winFormsAdapter is IDisposable)
   ((IDisposable)winFormsAdapter).Dispose();
  host.Dispose();
}
```
Windows版SourceTreeから好きなターミナルを開きたい(リポジトリのあるディレクトリで)

普段はCUIでGitを利用しているけど、プロジェクトでGitを利用するにあたりGUIの方が良いって人向けにSourceTreeを試してる。
これはこれで見やすくて分かりやすい。
![sourcetree.jpg](https://qiita-image-store.s3.amazonaws.com/0/6092/05ce85fd-a4a1-860f-fee0-d4d80161c7cc.jpeg)

は、いいんだけどターミナルってアイコン押したらコマンドプロンプト開いて悲しい気持ちになった。
やっぱり好きなターミナルで開きたい。

ってことで、好きなターミナルで開けるように設定する。(アイコンを押したときの挙動は変えられなそう)

`ツール - オプション - カスタム操作` を選びカスタム操作を追加する。
![custom.jpg](https://qiita-image-store.s3.amazonaws.com/0/6092/30b2365a-382e-a747-ab62-c11e3fde46d6.jpeg)

メニュー表示名には`open with terminal`(任意の名前)と設定し、`別のウィンドウで開く`にチェックを入れる。
実行するスクリプトには開きたい好みのターミナルを指定する。自分は[cmder](http://gooseberrycreative.com/cmder/)を設定した。
パラメータに`$REPO`を設定することで、リポジトリのディレクトリでターミナルを開くことが出来る。

![edit_custom_action.jpg](https://qiita-image-store.s3.amazonaws.com/0/6092/12f68823-cef8-0073-2b26-5ec881efc065.jpeg)

こんな感じで `右クリック - カスタム操作 - open with terminal` を選ぶと
![open_with_terminal.jpg](https://qiita-image-store.s3.amazonaws.com/0/6092/26f0c6c4-fcb4-6d9f-70d8-87fbd02e0002.jpeg)

リポジトリのディレクトリで好きなターミナルを開くことが出来る。

これでSourceTreeの操作わからないけどコマンドなら分かる！って時にターミナル開いてサクッと操作できる。
C#のDelegateをJava的に考えてみる

```java
interface MyInterface {

  void sayHello();

}

class MyImpl implements MyInterface {

  @Override
  public void sayHello() {
    System.out.println("Hello");
  }

}

class MyDelegate {

  private final MyInterface impl;

  public MyDelegate(MyInterface i) {
    this.impl = i;
  }

  public void execDelegate() {
    impl.sayHello();
  }

}

// 呼び出し側の例
class Main {

  public static void main(String[] args) {

    MyImpl impl = new MyImpl();
    MyDelegate delegate = new MyDelegate(impl);
    delegate.execDelegate(); // -> "Hello"

  }
}
```

```csharp

delegate void MyDelegate();

class MyImpl {
	
  public void method() {
    Console.Write("Hello");
  }
	
}

class MainClass {
	
  static void Main(String[] args) {

    MyImpl impl = new MyImpl();
    MyDelegate del = new MyDelegate(impl.method);
    del(); // -> "Hello"

  }
}
```

Javaではメソッドを引数として渡したりすることは（リフレクションを使わない限りは）できないので、interfaceを使いました。
こう考えると、C#はよりシンプルなコードでdelegate（委譲）を実装できるのかなと思います。
マジックメソッド「__isset()」「__unset()」

**__isset()**
　未宣言変数をisset()しようとしたときに動くメソッド。

**__unset()**
　未宣言変数をunset()しようとしたときに動くメソッド。

* * *
以下、サンプルコード。
[「\_\_set()」と「__get()」について](http://http://qiita.com/Niha/items/94d6a313b2d33265a3d2)

```php:IsUnSet
class Property{
   public $food;

   //未宣言変数にアクセスされた時用の配列
   private $drink = array();

　　//未宣言変数に値をセットしようとしたら、ここが動く。
   public function __set($key, $value){ 
      echo "__set()なう\n";
　　 　//連想配列に値をセット。
      $this->drink[$key] = $value;
   }

   //未宣言変数を取得しようとしたら、ここが動く。
   public function __get($key){
      echo "__get()なう\n";
　　　 //連想配列から$keyに対応する値をreturnする。
      return $this->drink[$key];
   }

   //未宣言変数をissetしようとしたら、ここが動く。
   public function __isset($key){
      echo "__isset()なう\n";
　　　 //連想配列から値を取り出しisset。
      return isset($this->drink[$key]);
   }

　 //未宣言変数をunsetしようとしたら、ここが動く。
   public function __unset($key){
      echo "__unset()なう\n";
　　　//連想配列から値を取り出しunset。
      unset($this->drink[$key]);
   }

 ////////////////////////////////////////////////////////

    $pro = new PropertySample();
    $pro->food = "ごはん";
    $pro->tea = "お茶";   //__set()が動く

    //$pro->foodはあるので　→　true
    var_dump(isset($pro->food));

    //$pro->teaはないので、__isset()が呼ばれる　→　true
    var_dump(isset($pro->tea));

    //$pro->coffeeはないので、__isset()が呼ばれるが、
    //連想配列にも存在しないので　→　false
    var_dump(isset($pro->coffee));

    //$pro->foodはあるので普通に初期化　→　null
    unset($pro->food);
    var_dump($pro->food);

    //$pro->foodはないので、__unset()が呼ばれ初期化　→　null
    unset($pro->tea);
    var_dump($pro->tea);
}
```
技術英語 > w.r.t > ... only the stuff that actually changed position w.r.t the tiles

Commander Keenのスクロールのアルゴリズムについて
http://www.quora.com/How-such-smooth-scrolling-was-achieved-in-games-like-Super-Mario-and-Commander-Keen

> adaptive tile refresh
It was just a post optimization made by Carmack to further speed up his code. Basically the code didn't redraw the screen buffer all the time, only the stuff that actually changed position <font color=red>w.r.t</font> the tiles (i.e. sprites)

w.r.t.は何の略か? 以下の略という記載がある [freedictionary](http://acronyms.thefreedictionary.com/With+Reference+To)。
- with reference to
- with regard to
- with respect to


---
以下は「略」関連で思い出したもの
- What's the long form of the abbreviation? (あの略の正式名は何?)
- What does the "w.r.t" stand for? (w.r.tは何を表すの?)

---
with respect toはregardingなりas regardsなりsynonymousがある。
https://www.englishforums.com/English/RegardingRegardsRegardRespectRespect-Of/bmqng/post.htm