OmniAICreator/Qiita-1.07M huggingface dataset:
AWS Lambdaを使ってS3の署名付きURLを自動的に発行する


##はじめに
普段、メールに添付できないような容量の大きいファイルをやりとりするために、S3の署名付きURLを使っています。その他の用途でも、期間限定で特定の人にだけファイルを渡したいときに使うと非常に便利です。

[署名付きURLを使用したオブジェクトのアップロード](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/PresignedUrlUploadObject.html)

ただし、署名付きURLの作成にはSDKを利用して自分でコーディングする必要があります。自分の場合、Pythonのコードを書いてました。さらに、アップロードの後にファイル名を指定してコードを実行する必要があるので、ちょっと面倒です。

というわけで、今回はlambdaを利用して特定のバケットに入ったファイルに対し、自動的に署名付きURLを発行し、SNSによりメールで通知する（自分に）を作ってみたいと思います。

##処理の流れ

1. S3にファイルをアップロード
2. LambdaでEventを受信
3. Lambda FunctionでS3の署名付きURL取得＆SNSへパブリッシュ
4. SNSでメール送信

![20141204.png](https://qiita-image-store.s3.amazonaws.com/0/32775/b3d1d642-3bd5-fae8-2d48-e8dd42c6ce31.png "20141204.png")


##事前準備
* PUT用S3バケットの準備
* SNSのトピック作成

##Lambdaへの関数登録
S3のアップロードのイベントをトリガとして、S3の署名付きURL取得とSNS送信を行います。本当に簡単に実装できました。
有効期限を300秒としてますので、適宜変更してください。

```s3signedurl.js
var aws = require('aws-sdk');
exports.aws = aws;

exports.handler = function(event, context){
    
    var expired_period_sec = 300;
    var bucket = event.Records[0].s3.bucket.name;  
    var key    = event.Records[0].s3.object.key;   
    
    //S3署名付きURL取得
    var s3 = new aws.S3( {Bucket: bucket, Key: key} ); 
    var params = {Bucket: bucket, Key: key, Expires: expired_period_sec}; 
    var url = s3.getSignedUrl('getObject', params);  
    console.log('The URL is', url);

    //SNSでURL送信
    var sns = new aws.SNS({params: {TopicArn: '<SNSのTopic ARN>'}});
　　sns.publish({Message: url}, function (err, data) {
        if (!err) {
            console.log('Message published');
            context.done(null,'');
        }else{
            console.log("Err");
            context.done('Err',err);
        }
    });
};
```

##気をつけること
Lamba実行のIAM roleにSNSのpublish権限を付与する必要がありますので、お忘れなく。

##さいごに
周りのLambda熱におされて、自分も何か作らねば・・・と思い、とりあえず簡単なものから試してみました。
ちょっとしたことでもLambdaを使って簡単に実装できるのがいいですね。これからもいろいろ試してみます。


**免責事項:こちらは個人の意見で、所属する企業や団体は関係ありません。**
「はじめてUNIXで仕事をする人が読む本」を新卒入社生と読書会した話

[新人教育 Advent Calendar 2014](http://www.adventar.org/calendars/429) というカレンダーに登録していたので、実質一日目の記事を...。

毎年新卒入社の方が２〜３ヶ月ペパボの福岡支社で研修するんですが、そのときエンジニア職種などの方は毎年技術書を読書会しております。そのチョイスで今年は下記の本を選んでみました。

* [はじめてUNIXで仕事をする人が読む本](http://www.amazon.co.jp/gp/product/4048913921/ref=as_li_ss_tl?ie=UTF8&camp=247&creative=7399&creativeASIN=4048913921&linkCode=as2&tag=udzura1984-22) 

これを

* 新卒入社4名（エンジニア2、デザイナ2）
* 前年度の新卒入社エンジニア1名
* おじさん（@udzura）1名

で、一通り読んだ感想など。

## 良かった点

### 2ヶ月でちょうど読み終わった

期間が2ヶ月だったんですけど、みんなでゆっくり読んでちょうど終わって、最後に振返りも出来るボリュームだった。まあ、たまたま２ヶ月だったんですが...

### ただのコマンド、技術要素だけじゃなくて文化も教えている感じがした

我々はリナックスなサーバでRubyなどのUNIX文化と相性のいい言語を使う必要がある。ただのコマンドリファレンスじゃなくて、歴史や背景を説明している感じがしたし、ちゃんとUNIX人間を育てようと言う気概を細部に感じた。

### おじさんのまめ知識を引き出しやすい（？

ボリュームのわりに内容が多岐に渡るので、敢えて説明をはしょっているのかな〜という部分がしばしば見られた。でもそれはチャンス :facepunch:

あるテーマについて（プロトコルだの秘密鍵だのなんだの）深掘りした方が良いかな？と判断したらその場に参加しているおじさんが関連知識を教えることが出来る。本に全部が書いてある訳ではないので、適当に板書したりなんかして。そして圧倒的成長...

ある種の教えられ方のムラが出来る訳だが、そういうムラがあった方が記憶の定着には実は良いと思う（経験上も）。

## う...と思った点

### あ、これデザイナー氏には...と思った

ちょっと深過ぎかもしれないな...と。

デザイナーさんもコマンドラインツールやUNIXの文化を知るのは良いことだと思うが、この本のコンセプトはもっと深いところにあるので、戸惑わせてしまったかもしれない。デザイナのうち一人はRailsも書ける魔法剣士系の子だったので、アレはアレで良かったと言ってくれたが...。

### やっぱり難しいかなあ...

おじさんのまめ知識云々ではメリットっぽく書いたが、一人で読み切るには骨が折れると思う。ちょっと経験があるはずのぼくが読んでいても、「んん〜どうだっけ...」とこっそりググったりする内容もあったし。逆に言えばかなり経験がある人でも楽しめる本だとは思うが...。

----

## まとめると

* 技術的背景がバラバラな人たちで集まって読書会すると楽しいかもしれない本。
* 初心者が一人は結構大変なので、積極的に人に助けを借りると良いと思う。


こんな感じで...。

最後に、 [新人教育 Advent Calendar 2014](http://www.adventar.org/calendars/429) なんですが、全然登録がないのでカジュアルな内容でもどんどん登録すると良いと思います。
Node.js のMVCフレームワーク sails.js (0.10.x) で始めるアプリ開発：ORMで多対多のモデルの定義の仕方 ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい

Node.js で簡単にウェブアプリケーションを作成するフレームワーク sails.js を使って「多対多」のモデルを定義する。

:exclamation: **sails.jsはアップデート頻度が高い⇒この記事執筆時点と仕様が異なっている可能性があるのでバージョンに注意**

# この記事の内容をテストした環境

 - node.js 0.10.x
 - sails.js 0.10.x

# 多対多のモデルをつくる

「ユーザー」と「飲み物」で好きな飲み物を保存できるようにする

 - ユーザーは「ひなた」と「まどか」
 - 飲み物は「Dr. Pepper」と「Coca-Cola」
 - ひなたはDr. Pepperが好きで、まどかは両方好き

## ユーザー User.js

ソースコードのひな形を準備する

```
sails generate api User
```

`models/User.js` を次のように変更

```User.js
module.exports = {
  attributes: {
    name: 'string',
    favorites: {
      collection: 'Drink',
      via: 'users',
      dominant: true
    }
  }
}
```

ポイント

 - ユーザーの好きな飲み物を favorites として定義
 - collection として、飲み物のモデル Drink を指定
 - via で Drink.js で定義したプロパティ名を指定
 - dominant ※どちらかにtrueしておく（今回は特に意味は無い）


## 飲み物 Drink.js

ソースコードのひな形を準備する

```
sails generate api Drink
```

`models/Drink.js` を次のように変更

```Drink.js
module.exports = {
  attributes: {
    name: 'string',
    users: {
      collection: 'User',
      via: 'favorites'
    }
  }
}
```

ポイント

 - この飲み物が好きなユーザーを users として定義
 - collection として、ユーザーのモデル User を指定
 - via で User.js で定義したプロパティ名を指定
 - dominant は無し

# 実験

とても便利な`sails console`を使用

```
sails console
```

でコンソールを起動。ユーザー`Hinata`と`Madoka`を登録

```
User.create({name:'Hinata'}).exec(console.log)
=> id:1
User.create({name:'Madoka'}).exec(console.log)
=> id:2
```

飲み物の`Dr. Pepper`と`Coca-Cola`を登録、HinataはDr. Pepperが好きで、Madokaは両方好き

```
Drink.create({name:'Dr. Pepper', users:[1]}).exec(console.log)
=> id:1
Drink.create({name:'Coca-Cola', users:[1, 2]}).exec(console.log)
=> id:2
```

 ヽ(ﾟｰﾟ*ヽ)(ﾉ*ﾟｰﾟ)ﾉわぁい
kitchen-dockerでコンテナ間を接続する

アドカレ登録用にQiitaアカウントを作ったので、せっかくなので初のQiita投稿。  
master-slave構成のDBのテストで、取り急ぎ対応したかった所ができたのでメモ。

# 前置き

~~かなりダーティハックっぽいので、```kitchen-docker```の今後のアップデートで使えなくなったりする可能性があるので注意してください。~~

kitchen-docker本体にコンテナ間接続対応で投げた[プルリクエスト](https://github.com/portertech/kitchen-docker/pull/92)が採用されました。
`instance_name`及び`links`のオプションを指定することで接続ができます。

https://github.com/portertech/kitchen-docker#instance_name
https://github.com/portertech/kitchen-docker#links

なお、Dockerコンテナ同士の接続については[コチラ](http://qiita.com/nyamage/items/197f520a0a8b4fd864df)を参考にしました。

# 方法

まず、```kitchen-docker```には、ホストからのポートフォワード用に、コンテナごとに指定できる```forward```という```driver_config```が用意されています（以下参照）

https://github.com/portertech/kitchen-docker#forward

これに、コンテナ同士の接続オプションを突っ込みます。

以下はのような感じです。  

```yaml:.kitchen.yml

---
driver:
  name: docker

driver_config:
  use_sudo: false

platforms:
  - name: centos-6.5

suites:
  - name: master
    driver_config:
      forward:
        - 13306:3306 --name master
    run_list:
      - recipe[hoge::master]
    attributes:

  - name: slave
    driver_config:
      forward:
        - 23306:3306 --name slave --link master:master
    run_lis
      - recipe[hoge::slave]
    attributes:
      hoge:
        master_host: master

busser:
  sudo: true
```

これで、とりあえず、master-slave構成とかクラスタ構成のテストが捗ります。
faraday-http-cache でキャッシュが使われてなかったら要チェック


## キャッシュから読み出されずに常にリクエストされる…

Rails サーバーから外部のシステムに対して HTTP リクエストをするのに Faraday を使用していました。
当然アクセス先のサーバーに負荷をかけたくないので、キャッシュ機構として faraday-http-cache を採用してたんですが、何故かキャッシュしてくれずに常にリクエストが飛んでしまってました。

以下のように最初クライアントオブジェクトを作ってたんですが…

```ruby
client = Faraday.new('http://hoge.fuga') do |builder|
  builder.adapter Faraday.default_adapter
  builder.request :url_encoded
  builder.response :logger, Rails.logger
  builder.response :json, /\bjson$/
  builder.response :follow_redirects
  builder.use :http_cache, store: Rails.cache, logger: Rails.logger
end

client.get('/path/to/api')
# => get して cache してくれるように api からは response header に Cache-Control: public, max-age=60 あたりが返るようにしてある

client.get('/path/to/api')
# => キャッシュされずにリクエストが飛んだ???
```
クエリパラメーターも含めて全く同じ path にリクエストしているにも関わらず、

1. まずリクエストする。 ← ???
1. レスポンス返ってくる。キャッシュを見る。 ← ???
1. キャッシュに hit & flesh ならキャッシュを採用する。

という謎の挙動に悩まされてました。僕はキャッシュを使いたい！

## 対応

キャッシュの設定を前の方に持っていったら挙動が変わりました。

```ruby
client = Faraday.new('http://hoge.fuga') do |builder|
  builder.use :http_cache, store: Rails.cache, logger: Rails.logger 
  builder.adapter Faraday.default_adapter
  builder.request :url_encoded
  builder.response :logger, Rails.logger
  builder.response :json, /\bjson$/
  builder.response :follow_redirects
end
client.get('/path/to/api')
# => レスポンスをキャッシュしてくれる

client.get('/path/to/api')
# => 先にキャッシュを参照して hit したら採用された！
```
これで解決。

## 備考

マニュアル読んでなかったのでどこかに書いてあるかも。
オブジェクトを作るときに渡す設定の順番で挙動が変わるのはどうなんだろう…?と思いつつ。
html.erbからtextメールテンプレートをrenderする

```erb:app/views/hoge_mailer/piyo_mail.text.erb
拝啓　時下ますますご清祥のこととお喜び申し上げます。平素は格別のご高配賜り、厚く御礼申し上げます。
なんたらかんたら
敬具
```

```erb:app/views/bars/foo.html.erb
<%= render(template: 'hoge_mailer/piyo_mail.text').gsub(/(\r\n?)|(\n)/, "<br />").html_safe %>
```
jQuery/JavaScriptでやった方がいいこと

初投稿は簡単に当たり前のことを書いてみます。

## 要素の有無判別
### サンプル

```js
$("a[href='^#']").on("click", function(e) {
  var $target = $(this.hash);
  if($target.length) {
    var offsetTop = {scrollTop: $target.offset().top};
    $("html,body").animate(offsetTop, 1000);
    e.preventDefault();
  }
});
```

リンクをクリックしてハッシュを取得後、そのハッシュの要素が存在しているかをチェックしてアニメーションでスクロールさせます。
要素が存在しない場合はなにもしません。

## 引数のチェック
引数がある場合とない場合の処理を分ける。
###サンプル


```js
var func = function(arg) {
  if(arg != null) {
    console.log(arg);
  } else {
    console.log("arg is null");
  }
};
func();
```

`arg != null`で`arg`が`null`または`undefined`のみチェックされる。
単純に`!arg`にすると`arg`が`0`や空文字列の場合にも引っかかってしまうので要注意。
もっとも、明示的に引数に`null`を渡したい場合は`arg === undefined`の方がいいかも。

## 数値化・文字列化
渡された値を数値化・文字列化させる。

###サンプル

```js
var num = function(arg) {
  var n = +arg; // 数値化
  n = n+20; // 10+20
  console.log(n); // 30
};
var str = function(arg) {
  var s = ""+arg; // 文字列化
  s = s+20; // "10"+20
  console.log(s); // "1020"
};
num("10"); // 文字列の10を渡す
str(10); // 数値の10を渡す
```

`+arg`で数値化させます。`""+arg`で文字列化させます。
ちなみに`num("hoge");`と数字以外の文字列を渡した場合は`NaN`になりますので、数字以外の文字列が渡った場合は0にするようにすると以下のようになります。

```js
var num = function(arg) {
  var n = +arg||0; // 数値化に失敗したら0を入れる
  n = n+20; // 0+20
  console.log(n); // 20
};
num("hoge"); // 数字以外の文字列を渡す
```

初期値のようなものが存在するならば、0ではなくそれをセットするようにするといいかもしれません。

## おまけ
有名な方法だけど、自分が結構やる方法のforループ文。

```js
var $classEl = $(".classname");
var len = $classEl.length;
for(var i = len; i--;) {
  console.log(i); // 要素数の分だけデクリメントされ、0でループが終了する
}
```

もちろん逆順でループを回しても問題ない場合のみ使える方法。
TexturePacker コマンドラインツールの使い方

[TexturePacker](https://www.codeandweb.com/texturepacker) はコマンドラインでも利用できるスプライトシート生成ツール。
簡単、多機能、安い、と三拍子揃っていて重宝している。

特にコマンドラインでバッチ的にスプライトシートを生成できるのは自動化する上で非常に重要なので、そのやり方を残しておく。

#場所

コマンドラインツールは以下の場所にある。(Windows 8.1)

>C:\Program Files\CodeAndWeb\TexturePacker\bin\TexturePacker.exe

Mac, Linux ではどこに入るかわからないが、おそらくインストールした場所配下の似たようなところにあると思う。

#利用方法

##設定作成

まず TexturePacker GUI でベースとなる設定ファイルを作成する。
TexturePacker の設定ファイルは tps という拡張子がついた xml ファイルになる。
利用したい設定を行って Save project で保存する。

##実行

以下 TexturePacker GUI で作成した設定ファイル BaseTextureSetting.tps を利用して foo ディレクトリ以下の画像を データファイル foo.txt およびスプライトシート foo.png として出力する例。

```
TexturePacker --data foo.txt --sheet foo.png foo BaseTextureSetting.tps
```

個別に設定ファイルの値を上書きしてスプライトシートを出力したい場合は以下のようにする。以下は scale 0.5 で出力する例。

```
TexturePacker --data foo.txt --sheet foo.png --scale 0.5 foo BaseTextureSetting.tps
```

その他のオプションは詳細は `--help` 参照。 TexturePacker GUI で設定可能な項目は基本的に全てコマンドラインオプションでも設定可能。

ヘルプの下の方に他にもコマンド例が載っているので参考するとよい。
Mongooseのスキーマをうまいことファイルに切り出す方法のメモ

こんな感じでMongoDBを使いたい。

```js
var db = require('./db');
db.something.find({mydaya:'value'}, function(err, results) {
  // do something
});
```

```js:/db/index.js
var mongoose = require('mongoose'),
  fs = require('fs');
mongoose.connect('mongodb://localhost:27017/MyApp');

var db = module.exports = {};

// assign all ./schema/*.js files to this.MODEL_NAME models
var rootDir = __dirname + '/schema';
fs.readdirSync(rootDir).forEach(function(file) {
  var res = file.match(/(.+)\.js$/);
  if (res) {
    var name = res[1];
    db[name] = mongoose.model(name, require(rootDir + '/' + file));
  }
});
```

```js:/db/schema/data1.js
var mongoose = require('mongoose');
var schema = module.exports = new mongoose.Schema({
  mydata: {
    type: String,
    index: true
  }
});
```
QUnit 可変エリアの初期化

qunit-fixtureを指定することで、そのエリア内を初期化することができる。
初期化は1テストケース毎となる。

次の例のようにボタンをクリックするたびに要素を追加していくような処理があるとき、
テストケースではタイミングが「初回」か「継続」かで期待値が異なる。

```js
$(function() {
  $('#ctrl_btn_A').on("click", function() {
    $('#result').append('A');
  });

  $('#ctrl_btn_B').on("click", function() {
    $('#result').append('B');
  });
});

```

以下のようにすると、テスト実行時に初期化されるため「初回」のテストが可能となる。

```html
  <button id="ctrl_btn_A">A_button</button>
  <button id="ctrl_btn_B">B_button</button>

  <div id="qunit-fixture">
    <div id="result"></div>
  </div>
<!--
  以下のようにqunit-fixtureエリア外にある場合は初期化は行われない
  <div id="result"></div>
-->
```

また、テストケース毎の初期化のため以下のようにしなければならない。

```js
QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_A" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'A', 'A初回クリックの出力');
});

QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_B" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'B', 'B初回クリックの出力');
});

// 以下は1テストケース内の継続処理となるためBボタンクリック時はABが出力される。
QUnit.test("クリックして文字を出す", function( assert ) {
    var event = $.Event( "click" );
    $( "#ctrl_btn_A" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'A', 'A初回クリックの出力');
    $( "#ctrl_btn_B" ).trigger( event ); 
    assert.equal( $( "#result" ).text(), 'AB', 'B継続クリックの出力');
});
```
ViewのID指定で丸穴あけるオーバーレイを作れるカスタムView

#ちょっと面倒なオーバーレイのヘルプ用カスタムView

![スクリーンショット 2014-12-04 17.47.10.png](https://qiita-image-store.s3.amazonaws.com/0/43688/7b107f47-1fb6-0b43-989b-c743e2d615e7.png)

こういうなにかのオブジェクトの位置だけくり抜くヘルプ用のオーバーレイ的なの、
正直めんどうくさい。
解像度ごとに穴の場所かわったり。

なら穴あける部品の場所に自分で計算して穴を開けてくれるカスタムViewを作っておけばいいし、
沢山実装する場所あってもカスタムViewとヘルプ本体のテキストや画像をセットにしたlayout.xmlだけ指定して差し替えるFragmentを作っておけばいいじゃないか。
という事で夏頃に穴を開けられるオーバーレイのカスタムView作って長らく使わなかったんですが、最近使う機会があって楽だったので。

カスタムビューが分からん方は[こっちに基本的な説明があります](http://qiita.com/Hoshi_7/items/6ba397cdbe914d61d7dc)
#ソース
面倒という見づらいのでGistにソースをアップしてあります。
一番上のjavaがカスタムビュー本体です。
２番目のattrsの定義を自分のプロジェクトのattrs.xmlに追加してあげてください。
それ以下は写真のサンプルアプリのActivityとFragmentを一応載せておきました。
https://gist.github.com/hoshi7/adfb6a40bb7a215a344b

#使い方
ヘルプ画面になるフラグメントのレイアウトから抜粋

```xml
    <jp.hoge.app.androidcookpatern.View.OneCircleFrontOverlayView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:circleClipPadding="5dp"
        app:circleClipViewId="@+id/android_robo"
        app:overlayColor="#c800c864"
        app:rectCornerRadius="10dp"
        />
```


|要素名|内容|
|:---:|:---:|
|circleClipViewId|オーバーレイに穴を開けたいViewクラスのIDを指定する|
|circleClipPading|対象のViewに対して指定dp分のpaddingを円に持たせる|
|overlayColor|オーバーレイの背景色を指定できる|
|rectConnerRadius|オーバーレイを角丸にできる|



これで、android_roboというidを指定しているドロイド訓のImageViewの位置に穴をあけてくれます！
これは作っておいてヨカッタ、便利。
終盤で厳しいときに機能実装分見積もっておくとか凄い便利！
ListBoxのItemsSourceとDataTemplateから、実際に生成されたListBoxItemにアクセスする

# 概要
ListBoxは指定されたアイテムのコレクションを表示することが目的のコントロールだが、そのアイテムの指定には二通りの方法がある。

* 直接ListBoxItemを子要素として配置する方法
* ItemsSourceプロパティにバインドしたコレクションを、DataTemplateで指定したコンテナに格納して配置させる方法

データバインディングを用いるなら後者の方法を使いたいが、実際に生成された子要素にアクセスするのはなかなか難しい。実際にコーディングする上でいくつか罠に引っかかってしまったので、これ以上不幸な犠牲者を出さないためにも、ここに覚え書きを残しておくことにする。

注：もしかすると下記の目標を達成するためにはもっとスマートな方法があるのかも知れないが、今後似たようなことをする機会もあるかも知れないので大目に見てほしい。

# 目標
ListBoxのアイテムを選択不可にする

## 具体的な手段
ListBox.SelectionChangedイベントで、各アイテムのSelector.IsSelected添付プロパティをすべてfalseに設定することで、ハンドラが処理を終えた時点ですべてのアイテムが非選択状態になる。

# コード
ListBoxItemを子要素に格納する場合は、Itemsプロパティから取得したアイテムのコレクションのIsSelected添付プロパティ（実態はSelectorクラスが持つ）を書き換えれば良い。ListBoxの仕組みについて、以下の記事が非常に参考になった。

[ListBoxの選択状態の変更](http://d.hatena.ne.jp/CoMo/20130611/1370955253)

一方で、ItemsSourceを使う場合だと、ItemsでもSelectedItemsでもItemsSourceに設定したコレクションが持っているオブジェクトへの参照が帰ってくるだけで、*実際にテンプレートが適用された子要素が返ってくるわけではない*。これは正直理解しがたい仕様であるが、これに立ち向かう手段については、MSDNの以下の記事が詳しい。

[方法 : DataTemplate によって生成された要素を検索する](http://msdn.microsoft.com/ja-jp/library/bb613579(v=vs.110).aspx)

なかなか狂気を感じる内容だが、要約すると以下の通りである。

* 対象のListBoxのItemContainerGeneratorのContainerFromItemメソッドを使って、ほしいアイテムから子要素の実態(ListBoxItem)が取得できる
* ListBoxItemの中身が見たい場合は、ListBoxItemのContentPresenterが持ってるDataTemplateのFindNameを使って引っ張る
* ContentPresenterを取り出すのはVisualTreeHelperで頑張れ

実際のコードはこんな感じになる。XAML側は普通にItemsSourceにコレクションをバインドしているだけなので省略する。

```example.xaml.cs
private void MyListBox_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    foreach (var item in MyListBox.Items)
    {
        var container = MyListBox.ItemContainerGenerator.ContainerFromItem(item);
        Selector.SetIsSelected(container, false);
    }
}
```
PHP日本語処理

文字列の長さ

```php
$str = 'abcdef';
echo strlen($str); // 6

$str = ' ab cd ';
echo strlen($str); // 7
```

これは？


```php
$str = '日本語';
echo strlen($str);
```

どうやらUTF-8の日本語は一文字が長さ3らしいということが分かる。
正しく日本語の文字数を出す。

```php
$str = '日本語';
echo mb_strlen($str, 'UTF-8');
```


これは？

```php
$str = 'ｶﾙﾊﾟｯﾁｮ';
echo mb_strlen($str, 'UTF-8');
```

一旦全角に戻してやらないといけないことが分かる。
それ以前に半角カタカナは全角に変換してしまうのもあり。

ユーザーの入力をDBにインサートする。
nameというカラムがあってそれは型がvarchar(10)になっている。
日本語は何文字入るだろうか？

```sql
INSERT INTO users (name) VALUES ('日本語の達人ここにあり');
```

他、mb_convert_encodingとかmb_convert_kanaとか、よく使うやつ。

```php
/* 「仮名」を全て「全角カタカナ」に変換します */
$str = 'ｶﾙﾊﾟｯﾁｮ';
echo mb_convert_kana($str, "KVC");
```

動かない。

```php
$str = 'ｶﾙﾊﾟｯﾁｮ';
echo mb_convert_kana($str, "KVC", "UTF-8");
```

動く。

日本語にマッチさせる。
preg? mb_ereg?

```php
$str = 'カルパッチョ';

if (preg_match('/(パッ)/', $str, $regs)) {
	echo $regs[1];
}
```


正規表現。phpの場合()でマッチした部分を2つ目のオプションで配列として受け取れる。(後方参照)

```php
$str = '123-4567';

if (preg_match('/(\d+)-(\d+)/', $str, $regs)) {
	echo $regs[1];
	echo $regs[2];
}
```

$regs[0] には何が？
前方参照も同じに使える。

```php
$str = 'a12-a128w';

if (preg_match('/(.+?)-(\1)/', $str, $regs)) {
	echo $regs[1];
	echo $regs[2];
}
```

置換は`preg_replace`を使えばよい。


基本

```
	.（ドット）	なんらかの一文字
	\d もしくは [0-9]	数字
	+	が1個以上
	*	が0個以上
	?	最少マッチ
	^	から始まる
	$	で終わる
	[^0-9]	数字、っていうか0から9以外
	[^0-9a-zA-Z]	数字とアルファベット以外
	{n,m}	マッチする個数（[0-9]{3,4}みたいに使う）
	{3}	ちょうど3個
```
Visual Studioのコード補完が効かないときに疑ってみること

[昨日からVisual StudioでJavaScript / Node.jsを書いています](http://qiita.com/weed/items/3bb1d4631e5faa918beb)。拡張子は「.ts」なんですが、JavaScriptを書いています。

Google Drive APIを使ってファイルをアップロードするコードを書いているのですが、[@vvakame](https://twitter.com/vvakame)さんが作られたgapidtsで入れた型定義ファイルがサンプルコードに対して警告を返し、**コード補完が効かなくなります**。えええ、どうなってんの？サンプルコードだよ？

いろいろ調べた結果、以下の2つのことが起こっていました：

### 1. プロパティがすべて必須プロパティと解釈されている

Google Drive APIを使うモジュールの型定義ファイルの中を見てみましょう・・・んー？

```ts
    interface IFile {
        alternateLink: string;
        appDataContents: boolean;
        copyable: boolean;
        createdDate: string; // date-time
        defaultOpenWithLink: string;
        description: string;
        downloadUrl: string;
        editable: boolean;
        embedLink: string;
        etag: string;
        explicitlyTrashed: boolean;
        exportLinks: {
            [name:string]: string;
        };
        fileExtension: string;
        ...
```

おおお、**全部必須プロパティになっている**。これだと、どれか一つでもプロパティを指定しないと警告が出ます（ちなみに`IFile`のプロパティはちょうど50個あります）。かといって全部に`null`を入れるのも何ですから、以下のようにオプショナルなプロパティにします（もちろん手作業ではなくて置換します）。

```ts
    interface IFile {
        alternateLink?: string;
        appDataContents?: boolean;
        copyable?: boolean;
        createdDate?: string; // date-time
        defaultOpenWithLink?: string;
        description?: string;
        downloadUrl?: string;
        editable?: boolean;
        embedLink?: string;
        etag?: string;
        explicitlyTrashed?: boolean;
        exportLinks?: {
            [name:string]: string;
        };
        fileExtension?: string;
        ...
```

これで**コード補完が効くようになります**。

なお、[@ken_zookie](https://twitter.com/ken_zookie)さんには「型定義がメンテされるのに期待して any に逃げるのも、TypeScript だからこそできるベストエフォートタイピング」と教えてもらいました。なるほどー

### 2. 同じモジュールを使う型定義ファイルは1つにまとめる

今回使った2つの型定義ファイルは両方とも同じモジュール`googleapis`の型定義ファイルでした。しかしこれだと「定義が2重になっている」と警告が出て**コード補完が効かなくなります**。

![vsnode50.jpg](https://qiita-image-store.s3.amazonaws.com/0/12939/e5e4f8e6-56ed-af5c-20fe-66c07c09bd56.jpeg)

仕方がないので片方をコピーしてもう片方に貼り付け、適宜直しました。これで、**コード補完が効くようになりました**。

なんだか思ったより大変だな・・・まあでも問題は解決したので良しとしましょう！

---
ブログやってます：[Weed software](http://weed.cocolog-nifty.com/wzero3es/)
アプリの最新バージョンかどうか判別する

仮でTwitterアプリのバージョンを取得してみた。
[SwiftyJSON](https://github.com/lingoer/SwiftyJSON)と[Alamofire](https://github.com/Alamofire/Alamofire)を使っています。

responsがOptional型だったので、！を付けてbindingしています。2個つけるとうまくいきました。意味はあとで調べてみます・・

```lang:ViewController.swift
import Alamofire
import SwiftyJSON

〜〜〜

class ViewController: UIViewController {

〜〜〜

let urlPath = "https://itunes.apple.com/lookup?id=284910350"//アプリIDは仮(Twitterになっている)
        
        Alamofire.request(.GET, urlPath).responseJSON { (request, response, responseData, error) -> Void in
            if let data: AnyObject = responseData {
                var resJson: AnyObject = data
                var results: AnyObject = resJson["results"]!!
                var latestVersion: AnyObject = results[0]["version"]!!
                let version: AnyObject! = NSBundle.mainBundle().objectForInfoDictionaryKey("CFBundleShortVersionString")
                
                if latestVersion !== version {
                    //ここにアラートの処理など入れる予定
                }
            }
        }
```
シェルで16x16のカラーパレット表示

シェルで16x16のカラーパレット表示するコードです。
次のコードをシェルに貼り付けると、16x16 のカラーパレットを表示します。
色の確認などにどうぞ。

`````````````````````````
for y in {0..15}; do
  [ $y -eq 0 ] && echo "   0 1 2 3 4 5 6 7 8 9 A B C D E F"
  printf "%X0 " $y
  for x in {0..15}; do
    color=`expr $y \* 16 + $x`
	echo -n -e "\033[48;05;${color}m  \033[m"
  done
  echo
done
`````````````````````````

![screenshot_2014-12-04_17.10.23.png](https://qiita-image-store.s3.amazonaws.com/0/26783/f3bf9725-dd7e-9f62-97f8-e6adf3819c68.png)
fluentd+Elasticsearch+kibanaにApacheアクセスログを流した際の分かち書き対処

# 現象
fluentdを使ってApacheアクセスログをElasticsearch+kibanaへ流した際に
"host"や"path"、"agent"などの値が分かち書きされてしまう。
（Elasticsearchが全文検索をデフォルトとしているため、"/"などを区切り文字として分割してしまう）

# 対処
これを解決するにはElasticsearchのMapping設定をすればよい。
fluentdが以下設定だとしたら

```
<match **>
  type elasticsearch
  type_name apache_access
  logstash_prefix apache_access
  ...
</match>
```

以下を実行して設定。
propertiesにどのキーを指定するかはお好みで。

```
curl -XPUT localhost:9200/_template/template_1 -d '
{
   "template" : "apache_access-*",
   "mappings" : {
       "apache_access": {
           "properties": {
                "host" : { "type" : "string", "index" : "not_analyzed" },
                "path" : { "type" : "string", "index" : "not_analyzed" },
                "referer" : { "type" : "string", "index" : "not_analyzed" },
                "domain" : { "type" : "string", "index" : "not_analyzed" },
                "agent" : { "type" : "string", "index" : "not_analyzed" }
           }
       }
   }
}
'
```
Qiita(:Team) のメンションにアイコンを表示する

ECMAScript 6 Promise の練習ついでに、Qitta/Qiita:Team のメンションでアイコン表示をするユーザスクリプトを作った。アイコンで個人を認識している人間向き。

* https://gist.github.com/kui/916c508fa2eca01c7cad

Google Chrome でしか動作確認していない。

@k_ui ← テスト用


苦労した
-------

こう書くべきところを:

```js
return Promise.resolve(c);
```

こう書いていた:

```js
return c;
```

そのため `then` が　`undefined` になる → 「`undefined` は `function` じゃないから無理だよ」ってエラーでるが、これに気がつくのに時間かかった。

Java/Scala の `Future` で似たようなことやっていたので特に違和感なかったが、こういうので苦労すると型が欲しくなる。
AndroidStudioでローカルの別プロジェクトをインポートする

※ Android Studio v0.8.0時点での情報です。

EclipseのAndroidプロジェクトをAndroidStudioのgradleプロジェクトに載せ替えていたのですが、もともとmavenも何も使っていなかったためライブラリをローカルに落としてインポートしまくっており、全ての依存関係を一気にgradleで綺麗にすることができない状態でした。

そのためローカルのプロジェクトをインポートするようにしたのですが、例によってハマってしまって大変だったのでメモを残しておこうと思います。

 

#1.インポートしたいライブラリをgradleビルドに対応
まず、インポートしたいライブラリをgradleビルドに対応させる必要があります。Eclipseのエクスポート機能を使います。
`File > Export > Generate Gradle build file`を選択します。

![import1.png](https://qiita-image-store.s3.amazonaws.com/0/15267/93798a46-7c5e-08f3-4d50-1d3b57dc2ed4.png "import1.png")

 

エクスポートしたいプロジェクトを選択して、Next。（例として PullToRefresh）

![import2.png](https://qiita-image-store.s3.amazonaws.com/0/15267/f5c413ec-dcc5-e109-ed7c-174443e31af0.png "import2.png")



完了を押せば準備OK。

![import3.png](https://qiita-image-store.s3.amazonaws.com/0/15267/34945145-2529-722e-3200-52631f369319.png "import3.png")


プロジェクトルートに、build.gradleファイルが作成されています。これで準備はOKです。

![import4.png](https://qiita-image-store.s3.amazonaws.com/0/15267/6fe88865-8df3-0513-5150-04c3dc29198c.png "import4.png")


#2.プロジェクトにlibrariesフォルダを作る
ライブラリをインポートしたいプロジェクト直下に、librariesフォルダを作って、インポートするライブラリを中に配置します。

app/librariesという構成でもよいのですが、調べるとプロジェクト直下にしてる人が多かったので従うことにしました。

こんな感じの構成になります。

![import41.png](https://qiita-image-store.s3.amazonaws.com/0/15267/f62ff41b-ac1f-dd69-d10e-bda536e40dd0.png "import41.png")


 

#3.settings.gradleファイルに、includeを記述する

配置したライブラリを使うよ、という設定をsettings.gradleファイルに書きます。

```settings.gradle
include ':app', 'libraries:pulltorefresh'
```

これを書いておかないと、gradle syncした時にこんなエラーが出てハマることになります。

```
Error:(28, 0) Project with path ':libraries:pulltorefresh' could not be found in project ':app'.
```
 

#4.build.gradleファイルに、dependenciesを記述する

app/build.gradleファイルのdependenciesに、ライブラリの依存関係を記述します。うまく行けば、これで読み込まれるはずです。

```build.gradle
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile project(':libraries:pulltorefresh')
}
```
 

まとめてみるとこれだけのことなんですが、色んなバージョンの色んな情報が出回っていてハマりました。AndroidStudioにしたいけどgradleの対応でしぶってる方は、この方法でとりあえず載せ替えてみるといいかもしれません。
[JavaScript]行数を出せるようにconsole.logを上書く方法

console.logは長い、短くしたい、[もっと簡単に色付けしたい](http://qiita.com/omatoro/items/07cc1b0796c73bd0e546)、などたまに話題に上がります。

例えばこれとか
[LIG - console.logのラッパーを作成して業務を効率化する方法](http://liginc.co.jp/web/js/130698)

だけど実際に使ってみると、見た目はいいものの、どこでエラーが起こったのかが分からなくなる。本当はラッパーの呼び出し部分の行を表示してほしいのに、ラッパーの内部を指してしまう。console.logは実際に呼び出された箇所の行を表示するので。


![スクリーンショット 2014-12-04 16.25.58.png](https://qiita-image-store.s3.amazonaws.com/0/31127/5c876c50-8755-7065-15d0-081b8a56278e.png)

画像でいうところの、"test.html:121"ってとこが大事。
クリックしたらファイル開ける。
全部ラッパーの内部を指されても意味ない。

じゃあどうすりゃええのって話ですが、次のように書けばOK

```js
var blueLog = console.log.bind(console, "%c%s", "color:blue;font-weight:bold;");
blueLog("test");
```

こうすれば、呼び出すのはラッパーではなく、実際のconsole.logなので行はちゃんと表示される。

いい感じのパターンできたらおしえてください〜。
io.js


#io.jsとは
http://iojs.org/
nodeやnpmと互換性のあるJavaScript platform
なに…？　どういうこと...?
node.jsが名前変わったの？

どうやらすこし前にnode.js界隈でいろいろこじらせてたやつっぽい。(そもそもあまり知らなかったｗ)

[Node.jsのコミュニティに変化を与えるnode-forwardについて](http://yosuke-furukawa.hatenablog.com/entry/2014/10/23/101831)


#node-forward
nodeforwardとは、NodeやJavaScript、それらエコシステムをより良くしていくためのコミュニティ

http://nodeforward.org/


ここの最後に

```
And finally, if you'd like to work on Node core, there is io.js.
```
#node.jsとio.jsの違い
結局のところは今後開発していく方針が違うってことでいいのかな？

##io.jsの方針
[Initial Release #28](https://github.com/iojs/io.js/issues/28)
によると

- 1/13にリリース予定
- 1.0.0が出るまでは1.0-alpha1って感じでalphaリリースが続くよ
- バージョンの方法はsemver方式になるよ
- v8のリリースになる早で対応していくようにするよ
- 週1リリース。

とのこと。

#最後に
間違ってたらご指摘お願いします。
D言語でTwitterAPIを叩いて色々遊んだ話

はい、[D言語 Advent Calendar](http://qiita.com/advent-calendar/2014/dlang) 4日目の記事です。

どうでもいい話ですけど、自分のBlogに書くかQiitaに書くか迷ったんですけどなんとなくこっち(Qiita)に書くことにしました。

今回は、僕が今年D言語でTwitterAPIを叩いて色々と遊んだ話ということで、D言語でもTwitterAPI触れるよ!
こんなもの作れるよ!って感じの内容で行こうと思いますのでよろしくお願いします。

じゃあ、早速いってみましょう!


# D言語でもTwitterAPIが叩きたい!
僕のつくったライブラリがあります。
Git Repository : [Twitter4D](https://github.com/alphaKAI/twitter4d)
全て標準ライブラリだけで完結させているので面倒な事無しにD言語でTwitter APIが叩けます。
インストール手順

1. 適当にTwitter4Dを clone
2. twitter4d/source/twitter4d.d　を作業ディレクトリにコピー
3. インストール完了

これだけです!
簡単ですね!!

使い方を書いておきます。

```d:helloWorld.d
import twitter4d;

void main(){
  Twitter4D t4d = new Twitter4D([
    "consumerKey"       : "Your Consumer Key",
    "consumerSecret"    : "Your Consumer Secret",
    "accessToken"       : "Your Access Token",
    "accessTokenSecret" : "Your Access Token Secret"]);

  t4d.request("POST", "statuses/update.json", ["status" : "Hello World!"]);
}
```

コンパイル方法が少々特殊なので書いておきます。

```zsh
% dmd FileName.d twitter4d.d -L-lcurl
```

こんな感じにtwitter4d.dと -L-lcurlの２つをdmd コンパイルしたいファイル名 の後に付け足す必要が有ります。
まあ、これだけなので特殊でもなんでもないですね。

あとは実行するだけです

```zsh
% dmd helloWorld.d twitter4d.d -L-lcurl
% ./helloWorld
```

これでHello WorldとTweetされます!!
ほかにもUserStreamとかも普通に扱えますので詳しくはTwitter4Dのreadmeを見て下さい。

Twitter4Dは当初、最小限の処理しか実装しないという方針で開発していたのですが、いちいちエンドポイント直打ちってのも面倒なので
twitterAPIというブランチでエンドポイントごとの実装を進めています(最近出来ていませんが・・・)。
twitterAPIブランチのtwitter4d.dはコンパイルするときに、更にtwitterAPI.dと -version=useTAPIが増えてこうなります「

```zsh
% dmd FileName.d twitter4d.d twitterAPI.d -version=useTAPI -L-lcurl
```

取り敢えずライブラリについての話はここまでにしましょう。


## UserStreamで遊びたい!
結構前にTwitter4Dで何かつくりたいな～って思ってつくったTwitterの通知ツールがあります。
Git Repository : [twitnotify](https://github.com/alphaKAI/twitnotify)
※ えっと、libnotify(notify-sendコマンド)を内部で呼び出しているのでそれが使える必要があります

インストール手順

1. git clone https://github.com/alphaKAI/twitnotify
2. rdmd build.d
3. (any editor) setting.json

これでOkです、3の(any editor)のとこはVimなりEmacsなりすきなエディタに置き換えてください。
そしてConsumer Keyとかを書き込んだら終了です。

ビルドは既にインストール手順2で終わっているので実行してみましょう。

```zsh
% ./twitnotify
```

これで起動してくれます
起動直後は何も怒らないように見えますがしばらくするとCurlのプログレス表示が出てくると思います(消そうと思ったけど調べても消し方がわかりませんでした)。
それが確認できたら起動成功です。
あとはなにかTwitterでリプライが来たりふぁぼられたりすると通知してくれます。


# GUIでTweetがしたい!
(昨日)作りました。
できたてホヤホヤ(?)です。
えっと今回のはGistに投稿してあります。
Gist : [alphaKAI/gtkTweet.d](https://gist.github.com/alphaKAI/c7253e83da01a63d9c30)

Tweet専用のクライアントです。
なお、GUIはGtkDというライブラリを使っていますので適当にインストールしておいてください。

インストール手順

1. git clone https://gist.github.com/alphaKAI/c7253e83da01a63d9c30 gtkTweet
2. dmd gtkTweet.d twitter4d.d -L-lcurl -L-lgtkd-2 -L-ldl
3. (any editor) setting.json

3を書きましたが、setting.jsonは先程の物をコピーしてもらっても全く問題ないので流用しましょう。

後は実行してみてください!

適当なGUIが起動すると思います。
![gtkTweet GUI](https://pbs.twimg.com/media/B369CeNCIAEO3MQ.png:large)

とりあえずこんな感じになります。


## まとめ
とりあえず、こんなものでしょうか。
僕はまだまだD言語わからないので他の人みたいに言語機能についてとか全然かけないので、視点を変えて(?)
D言語でも簡単にTwitterAPIを使ったアプリケーション書けるよ!!ってことを紹介してみようと思って今回この記事を書きました。
D言語はとても強力なので、簡単にいろいろなものを作ることができます。
参考までに、この記事でいくつか紹介したアプリケーションはだいたい20 ~ 30分程度でかけました!

さあ、みなさんもD言語でTwitterAPI叩きましょう!!!


では、以上です


α改
Windows上でのplay frameworkの簡易的なデプロイ

# これは何？
play framework で作ったWebアプリケーションをWindows Server上に簡易的にデプロイするメモ。

※　あくまで手動デプロイなので、**【簡易的】**と書いている。本来であれば、Jenkins等を通じて自動デプロイすべきところ。

# 方法

## 開発マシン
 - play のコマンドで```dist```を打つ
 - ```[project-folder]\target\universal\xxxxxx-1.0-SNAPSHOT.zip```　が生成されている事を確認

##サーバ側
 - 先ほどのZipファイルをサーバ側に転送し、解凍しておく
 - 普通のコマンド・プロンプト（またはPowerShell等）を開いて、解答したフォルダへ移動（```cd c:\hoge\hoge``` 的な感じで)
 - そして、```javaw -cp lib\* play.core.server.NettyServer```を打つ
 - ブラウザでアクセスして起動を確認

※　ログは、```xxxxxx-1.0-SNAPSHOT\logs\application.txt``` に格納されている。起動後に生成される模様なので、起動前は存在しない事に注意。
※  起動時にオプションをつけたい場合は、```javaw```と```-cp```の間に記述する。
　　```javaw  -Dhttp.port=xxxx -cp -cp lib\* play.core.server.NettyServer```

# 参考

* [Running Play 2.1.x App as Windows Service (Fat Free Version)](http://brainstep.blogspot.jp/2013/10/running-play-21x-app-on-windows-fat.html)
Composerを使ってみよう(CakePHP, debug_kit)


[Composer](https://getcomposer.org/)

PHPのライブラリ管理ツール。perlのCPANとかrubyのgemみたいなもの。
一昔前はPEARだったがあまり使い勝手がよくなかった。
ウインドウズ用の実行ファイルをインストールした人はコマンドプロンプトでどこからでも動かせるが、
一般的には使いたい場所で以下のコマンドを実行。

```bash
curl -sS https://getcomposer.org/installer | php
```

そうすると中に composer.phar というファイルが作られる。

で、同じフォルダーに以下のような内容を書いたJSONファイル composer.json を用意しておく。

```json
{
	"require": {
		"monolog/monolog": "1.2.*"
	}
}
```	

その状態で

```bash
php composer.phar install
```

とすればOK。vendorフォルダーが作成されてその中にライブラリと autoload.php が作られている。
仕組みはよくわかりませんが、この autoload.php で全部のライブラリを面倒みてくれるという思想らしい。

```php
require 'vendor/autoload.php';
```

とすれば、アプリ内で全てのライブラリが使用可能になる。

CakePHPでやってみる。

composer.json はこんな感じで

```json
{
	"name": "sample_app",
	"require": {
		"cakephp/cakephp": "*"
	},
	"require-dev": {
		"phpunit/phpunit": "*",
		"cakephp/debug_kit": "2.2.*"
	},
	"config": {
		"vendor-dir": "Vendor/"
	}
}
```

`require-dev` は開発環境にのみインストールするものという意味。
`--no-dev` をつければ本番環境になる。

```bash
php composer.phar install --no-dev
```


バージョンのところはいろいろな書き方ができる。

```json
{
	"require": {
		"vendor/package": "1.3.2",
		"vendor/package2": "1.*",
		"vendor/package3": ">=2.0.3"
	}
}
```

以下参照。

https://packagist.org/

インストールすると /Vendor 以下にいろいろファイルが作られているのが分かる。
debug_kit はプラグインなので Plugin 以下に入る。

使い方としてはこの Vendor 以下の cakephp をコアとして、
ここからアプリを cake bake して開発するというイメージ。
なので Vendor 以下はバージョン管理しない。

```bash
php composer.phar update
```

をすればバージョンアップしてくれる。2.5.1→2.5.2

Config/bootstrap.php　に以下を追加

```php:Config/bootstrap.php
require ROOT . DS . 'Vendor' . DS . 'autoload.php';
	
spl_autoload_unregister(array('App', 'load'));
spl_autoload_register(array('App', 'load'), true, true);
```

debug_kitは、アプリの方の Config/bootstrap.php で

```php:Config/bootstrap.php
App::build(array(
	 'Vendor' => array(ROOT . DS . 'Vendor/'),
	 'Plugin' => array(ROOT . DS . 'Plugin/'),
));
	 
CakePlugin::load('DebugKit'); 
```

を追加すれば使える。
ちなみに、debug_kit はこんなので、

https://github.com/cakephp/debug_kit

AppController に以下追加して、

```php:Controller/AppController.php
class AppController extends Controller {
		 public $components = array('DebugKit.Toolbar');
}
```

レイアウトファイル default.ctp にあった 'sql_dump' を消すだけで使える。
いろいろな情報が得られる。
【whereRawは使わない】Laravelで複数条件をする方法【既出】

#背景
Laravelで複数条件を扱いたい旨をGoogle先生に尋ねると
whereRawを利用するよう解説するサイトを紹介される。
しかし、whereRawを利用すると直にSQL文を触るため、SQLインジェクションに利用される。
解説サイトも解説するだけしておいて、SQLインジェクションについては一切触れていないし
脆弱性だらだらのコードを掲載している。

既出だろうが、whereRawの拡散を防ぐために目を通していただきたい
例

```php:whereraw.php
$user = Input::get("user");
$password = Input::get("password");//ハッシュ化するものとするが例なので省略
User::whereRaw("user = '" . $username . "AND password = '".$password."'"); 
```

# whereRaw

これは、クエリビルダーで作成することができないSQL文を発行するときに利用する。
めったに使わないはずの関数。

#whereは何度でも使える

```php:where.php
$user = Input::get("user");
$password = Input::get("password");//ハッシュ化するものとするが例なので省略
User::where("user","=",$user)->where("password","=",$password); 
```

このように書くことができる。
whereの第3引数はエスケープされる（はず）なので、インジェクション対策を行うことができる。

Typoや勘違いがありましたら教えてください
impress.jsでpreziっぽいアニメーションのプレゼンテーションをつくる。

## impress.jsとはなんぞや。
[Prezi](http://prezi.com/)っぽいアニメーションを組み込んだJSライブラリです。<br>
一回ダウンロードしてしまえば、基本的にはHTML/CSSの編集だけでそれなりのプレゼンテーションを作成できるので、<br>
Javascriptが書けなくても全然問題ありません。<br>
CSS3の transforms と transitions機能をフルで使いヌルヌルアニメーションを実現しています。<br>
デメリットとしては、動作しないブラウザがあるのでその点はご注意ください。（Chrome or Safariでは動作確認済み）

##下準備
・impress.jsをダウンロード
[github](https://github.com/bartaz/impress.js/)からダウンロードもしくはcloneしてください。

##マークアップの基本
**・stepクラス**<br>
impress.jsでは「step」がついたdivが「スライド」になるので、アウトラインの数だけそのdivを作ります。<br>
**・data-x=""**<br>
ページ全体に対し、配置するスライドのx座標を決めます。<br>
**・data-y=""**<br>
ページ全体に対し、配置するスライドのx座標を決めます。<br>
**・data-z=""**<br>
ページ全体に対し、配置するスライドのx座標を決めます。<br>
**・data-scale=""**<br>
スライドの大きさを決めます。<br>
**・date-rotate=""**<br>
スライドの角度を決めます。

##アニメーションをつける。
以下のようにcssを作り、値を変えていくだけでアニメーションの速度やニュアンスを調節できます。
        
        .active .rotating {
    	-webkit-transform: rotate(-10deg);
    	-moz-transform:    rotate(-10deg);
    	-ms-transform:     rotate(-10deg);
    	-o-transform:      rotate(-10deg);
    	transform:         rotate(-10deg);

    	-webkit-transition-delay: 1.75s;
    	-moz-transition-delay:    1.75s;
    	-ms-transition-delay:     1.75s;
    	-o-transition-delay:      1.75s;
    	transition-delay:         1.75s;
	}


##まとめ
一番上に表示されているのが、デモを見ながら作ったものです。
大好きな「Trainspotting」の冒頭の名台詞をひたすら並べました笑

Javascript初心者の私でもかなり簡単にPreziのようなプレゼンテーションを作成できました！（というか実装ではJavascrip一切触ってない笑）

皆さんもぜひサービスの説明ページに組み込んでみたり、プレゼンテーションなどで使ってみてください！

[サンプルでつくったのでぜひ見てみてください。](www.youtube.com/embed/i9Td8XwTjUU)
Macにdnsmasqをインストールして開発環境でワイルドカードDNSを使う

# 手順
## dnsmasqインストール
brewでインストール

```bash
$ brew update
$ brew install dnsmasq
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/dnsmasq-2.72.mavericks.bottle.tar.gz
Already downloaded: /Library/Caches/Homebrew/dnsmasq-2.72.mavericks.bottle.tar.gz
==> Pouring dnsmasq-2.72.mavericks.bottle.tar.gz
==> Caveats
To configure dnsmasq, copy the example configuration to /usr/local/etc/dnsmasq.conf
and edit to taste.

  cp /usr/local/opt/dnsmasq/dnsmasq.conf.example /usr/local/etc/dnsmasq.conf

To have launchd start dnsmasq at startup:
    sudo cp -fv /usr/local/opt/dnsmasq/*.plist /Library/LaunchDaemons
    sudo chown root /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
Then to load dnsmasq now:
    sudo launchctl load /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist

WARNING: launchctl will fail when run under tmux.
==> Summary
?  /usr/local/Cellar/dnsmasq/2.72: 7 files, 496K
```

dnsmasq.confをコピー。以下、パスはHomebrewの設定で変わるのかもしれないので、上記Cavertsに従うこと。

```bash
$ cp /usr/local/opt/dnsmasq/dnsmasq.conf.example /usr/local/etc/dnsmasq.conf
```

launchdに登録するためにスタートアップ設定をシステムにコピー

```bash
sudo cp -fv /usr/local/opt/dnsmasq/*.plist /Library/LaunchDaemons
sudo chown root /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
```

LaunchDaemonにロード(サービスを登録)します。

```bash
sudo launchctl load /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
```

# dnsmasqの設定

``/usr/local/etc/dnsmasq.conf``に以下の行を追加。*.devを全てローカルホストとして解決する。

```
address=/dev/127.0.0.1
```

# Macの設定

Macが名前解決にローカルのdnsmasqを使うように設定する。Macには``/etc/resolv.conf``があるが、このファイルは**使われない**。代わりに、``/etc/resolver/``配下に解決したいドメイン名の設定ファイルを記述する。*.devの場合、以下のように設定。

```bash
$ vi /etc/resolver/dev
nameserver 127.0.0.1
```

# dnsmasqを起動する

```bash
sudo launchctl start homebrew.mxcl.dnsmasq
```

# dnsmasqを終了する

```bash
sudo launchctl start homebrew.mxcl.dnsmasq
```

# dnsmasqの自動起動設定を解除する
Homebrewでインストールされるdnsmasqは ``/Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist`` ファイル内で ``RunAtLoad`` が``true``に指定されているので、次回起動時から自動的にdnsmasqがstartします。嫌な場合はfalseに書き換えましょう。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>Label</key>
    <string>homebrew.mxcl.dnsmasq</string>
    <key>ProgramArguments</key>
    <array>
      <string>/usr/local/opt/dnsmasq/sbin/dnsmasq</string>
      <string>--keep-in-foreground</string>
    </array>
    <key>RunAtLoad</key>
    <true/>                  <!--- ← falseに更新 -->
    <key>KeepAlive</key>
    <true/>
  </dict>
</plist>
```

# 参考文献
- [Using Dnsmasq for local development on OS X • Passing Curiosity](http://passingcuriosity.com/2013/dnsmasq-dev-osx/)
- [Macでdnsmasqを使ってお手軽名前解決 - Study08.net 対シンバシ殲滅用人型機動兵器](http://tell-k.hatenablog.com/entry/2014/04/28/002437)
おおざっぱなWebサービスの感じを掴むクエリをPrestoで投げてみる

あんまりTreasureData固有のtipsじゃないよね！っていうのはさておき４日目です。
今日はおおざっぱにWebサービスの感じ（どこがおそいのかー、とか）をしらべるクエリを共有しておこうと思います。

## 前提条件

各種ページの情報（下記参照）をTreasureDataに出力している

ページ名と処理時間、logが記録された時間を作っておきます。

action: ページのアクション名（例えばhomeとか)
elapsed: 処理時間
time: イベント時間

## elapsedのpercentileを求め、大雑把な傾向を掴む

そもそもpercentileってなんぞ？って話もあるかもしれませんが特定の値を順番に並べていって何番目らへんか、っていうのがpercentileです。0.50ならmedian（中央値)となりますのでだいたい平均的な値。

```sql
select 
	action, 
	count(action) as pv,
	MAX(elapsed) AS max_elapsed, 
	approx_percentile(elapsed, 0.98) as elapsed_98, 
	approx_percentile(elapsed, 0.80) as elapsed_80, 
	approx_percentile(elapsed, 0.70) as elapsed_70, 
	approx_percentile(elapsed, 0.60) as elapsed_60, 
	approx_percentile(elapsed, 0.5) as elapsed_50, 
	approx_percentile(elapsed, 0.3) as elapsed_30 
from 
	access_log
where 
	TD_TIME_RANGE(time, '2014-12-01 00:00', '2014-12-01 23:59:59', 'JST')
group by action
```

すごく単純なクエリですがこういうクエリの結果をソートしたりすると
どこが重要か、重要ではないけれど問題があるのかというのがわかります。

実際問題としてはずれ値（外部起因の障害などがあった）やアプリケーションの傾向（特定時間に行われるイベントによる影響）なども考慮しなければいけないのでこれだけを見て考察を深めるのは良くないですが、なんとなく感じをつかめるようになると色々便利です。


# 参考までに考え方

・elapsed_50と他の値がそんなに剥離していない、かつ早く終わっている
→お行儀の良いページ（優秀！）

・elapsed_70, 80〜あたりの処理時間がmedianから離れている
→特定のユーザー・条件等で重たくなるような動作がある（行動ログ溜まりすぎてクソクエリ投げてる、とか。特定条件でクソループに入ってる、とか）

・elapsed_30は速いけどその他は遅め
→キャッシュが特定の部分だけ効いてるけど全般的に効いていない、とか。

ここらへんの考察は実際にアプリケーション組んでないと想像しがたいところがありますが、問題をみつけたら原因をしらべてみることでだんだんと引き出しが増えていきます。

それでは！
numpyで行列の列の要素の合計値が上位Xの列のみの行列を作る

```lang:python
import numpy as np
X = 5  # 合計値上位5
a = np.random.randint(0, 100, 100).reshape(10, 10)
# 行列の列要素を合計したベクトルをつくる
sum_row_vec = np.sum(a, axis=0)
# 列の合計値が上位Xのインデックスを得る
top_indecies = sum_row_vec.argsort()[-X:][::-1]
# インデックス順に再ソート
np.sort(top_indecies)
top_row_a = a[:, top_indecies]

```
slideshareがwebページの埋め込みからしか閲覧できなくなる方法

ガイドをslideshareにはアップロードしたいけど、
直リンクで開かれたりしたくなくてwebページの埋め込みからしか閲覧されたくない場合


下のように設定すればできます。
![slideshare閲覧設定_1.png](https://qiita-image-store.s3.amazonaws.com/1448/54139/bb752441-e69b-6eb2-6a95-c66658a3816c.png)
React.jsのVirtualDOMについて

今回はReact.jsのVirtualDOMの実装での工夫について書きたいと思います。

## Version control for the DOM

React.jsのVirtualDOMの実態はJavaScriptのオブジェクトであり、rerenderする際に前後の状態を比較して最小限の変更だけを実際のDOMに反映させる仕組みになっています。

つまり、バージョン管理されていてdiffだけをpatchとして実際のDOMに適用する感じですね。


## Level by level

単純にVirtualDOMのtreeを比較すると計算量が多くなってしまうので、React.jsでは計算量を減らすための工夫がされています。

その1つがVirtualDOM treeの同階層同士でしか比較しないということです。WebアプリケーションのDOM構造で異なる階層に要素が移動するケースは珍しいという理由でこのようになっていて、これによってアルゴリズムの複雑性が削減されています。

```html

<div><Header title="foo" /></div>
↓
<div><Header title="bar" /></div>
```

はよくあるけど

```html
<div><Header title="foo" /></div>
↓
<div><div><Header title="foo" /></div></div>
```
みたいなことはあまりないので、この場合は、Header Componentは破棄されて再度作成される。


## List

例えばあるリストの真ん中に要素を追加した時に、それぞれの要素を適切にマッピングして真ん中に要素が追加されたことだけを反映させるのはなかなか難しいです。

React.jsではkey属性を与えることで要素のマッピングを教えることが出来ます。

```html
<ul>
  {this.props.list.map(element => <li key={element.id}>{element.body</li>)}
</ul>

```

keyはそのデータのIdentifyを指定するべきです。indexとかにしても...

```js
[
  { id: 1, name: "foo" },
  { id: 3, name: "bar" },
  { id: 5, name: "baz" }
]
```

↓

```js
[
  { id: 1, name: "foo" },
  { id: 2, name: "foofoo" },
  { id: 3, name: "bar" },
  { id: 5, name: "baz" }
]
```

のようなデータ構造があるときは、idをkeyとして指定しておくといいです。


## Components

React.jsは同じComponent同士に対してしかdiffアルゴリズムを適用しないので、すべてをdiv要素にするのではなくて独自のComponentを定義して使うことで無駄なdiffの計算を減らすことが出来ます。

`<div>header1</div> -> <div>header2</div>`だと中の要素を比較しますが、`<Header1 /> -> <Header2 />`だとHeader1を削除してHeader2を追加となります。逆にいうとHeader1とHeader2の違いが些細な場合は、同じComponentにして差分だけを適用した方がいいということになります。


## Rendering


### Batching

React.jsではsetStateするとそのComponentはdirtyであるとチェックされて、イベントループ毎にdirtyなComponentをrerenderすることで実際のDOMへの反映自体を最低限の回数にしています。

この工夫はVue.jsなど他のフレームワークやライブラリでも見られます。


### Subtree rendering

また、setStateされたときは子のComponentもrerenderされます。なのでTopレベルのComponentでsetStateすると全てのComponentがrerenderされます。でも実際のDOMへは変更された箇所しか適用されないのでパフォーマンス的にはそんなに問題にならないです。VirtualDOMのdiffの計算がありますが実際のDOM操作に比べるとコストが低くVirtualDOMのなせる技です。

それによって、Topレベルの要素にデータをまとめてもたせておいてそれをsetStateで更新して都度アプリケーション全体をrerenderする構造が可能になってアプリケーションの構造を単純化することが出来るメリットもあります。


### Selective sub-tree rendering

さらにパフォーマンスが求められるような場合には、`boolean shouldComponentUpdate(object nextProps, object nextState)`を実装することでパフォーマンスを向上させることが出来ます。ここでfalseを返すとそのComponentとそれより下位のComponentがrerenderされなくなります。

ここでの比較を単純にするために、StateやPropをimmutableなdata構造にするというアプローチもあります。


#### immutable data

その辺りのソリューションとして、immutableなdataを持つClojureScriptでのReact.js実装である[Om](https://github.com/swannodette/om)や、Facebookが作っているimmutableなデータ操作を可能にする[immutable.js](https://github.com/facebook/immutable-js)があったりします。

またReact.jsにも`React.addons.update`というAddonがあるのでそれを使うことも可能です。

immutableなデータ構造にすることによってundoなんかの実装を作りやすくなったりします。


-----------

最後少し話がそれましたが、そんな感じでDOM操作を最低限にしたりdiffの計算量をO(n^3)からO(n)にするためにReact.jsが工夫しているという話でした。

### 参考

http://calendar.perfplanet.com/2013/diff/
Jedis でパイプライニングするサンプル

JavaのRedisクライアントであるJedis (https://github.com/xetorthio/jedis) で、パイプライニングを使用する場合のサンプル。

#パイプライニングしない場合
```java
Jedis jedis = null;

try {
	jedis = new Jedis("localhost");
	jedis.set("foo", "bar");
	
} finally {
	if (jedis != null) {
		jedis.disconnect();
	}
}
```


#パイプライニングする場合（その1）
```java
Jedis jedis = null;

try {
	jedis = new Jedis("localhost");
	
	Pipeline pipeline = jedis.pipelined();
	
	pipeline.set("foo", "bar");

	pipeline.sync();
	
} finally {
	if (jedis != null) {
		jedis.disconnect();
	}
}
```

#パイプライニングする場合（その2）
```java
Jedis jedis = null;

try {
	jedis = new Jedis("localhost");
	
	jedis.pipelined(new PipelineBlock() {
		
		@Override
		public void execute() {
			set("foo", "bar");
			sync();
		}
	});
	
} finally {
	if (jedis != null) {
		jedis.disconnect();
	}
}
```

サンプルの様な単発のコマンド発行だと、パイプライニングの恩恵はほとんどありませんが、バッチ処理などで一気に大量にRedisに書き込む場合などは、高速な処理が期待できます。

http://redis.shibu.jp/developer/pipelining.html によると、4倍早くなるとのこと。
React.jsのComponentについて

今回はComponentについて書いていきたいと思います。

React.jsでは基本的にはComponentを作って組み合わせていくことでアプリケーションを作っていきます。

## render

Componentは`React.createClass`に`render`メソッドをもったオブジェクトを渡すことで作成することが出来ます。

```js
var Hello = React.createClass({
  render() {
    return (
      <div><span>hello</span></div>
    )
  }
})
```

その際、`render`メソッドはComponentを1つ返す必要があります。

↓のように複数のComponentを返すことは出来ません。

```js
  // ダメ
  render() {
     return (
       <div>title</div>
       <div>contents</div>
     )
  }
  
  // OK
  render() {
    return (
      <div>
        <div>title</div>
        <div>contents</div>
      </div>
    )
  }
```

また、renderメソッドはどのタイミングで何度呼ばれるかわからないので必ず冪等性がある実装にする必要があります。

## Separation of concerns?

ところで、React.jsではComponentとして、マークアップとViewのロジックをcreateClassの中に書いていくのですが、他のフレームワークのようにマークアップはHTMLやmustacheで書いてViewのロジックをJSで書くみたいに分かれてなくて気持ち悪い！という人もいるのではないでしょうか？

それに対して、React.jsの開発者であるPete Huntはそれは「関心の分離(Separation of concerns)」ではなくて「技術の分離(Separation of technologies)」だとしていて、マークアップとViewのロジックは密であるべきとしています。

それにTemplateのSyntaxで不自由にコードを書くよりJavaScriptで書いた方がいいとしています。

テストが...という問題は、React.jsではTestUtilsというAddonでサポートしています。


## Component間のやりとり

PropをI/Fとして外部とやりとりすることが出来ます。

`<Hello name="foo" />`のようにすると、`this.props.name`として参照することが出来ます。

```js
var Hello = React.createClass({
  render() {
    return (
      <div>Hello {this.props.name}</div>
    )
  }
});

// <Hello name="React" />
// <div>Hello React</div>
```

Propについては明日に書く予定です。


## 動的に更新する

ユーザーのアクションやAjaxリクエストなどにより、動的に値が変化するような場合はStateを使います。

`this.state.xxx`で参照して、更新するときは`this.state`を更新するのではなくて必ず`this.setState`を使用する必要があります。

```js
var Counter = React.createClass({
  getInitialState() {
    return {
      count: 0
    };
  },
  onClick() {
    this.setState({count: this.state.count + 1});
  },
  render() {
    return (
      <div>
        <div>count:{this.state.count}</div>
        <button onClick={this.onClick}>click!</button>
      </div>
    );

  }
});
```

Stateについては明後日に書く予定です。


## React.createClassについて

Componentを作成にするときに使う関数ですが、v0.11からv0.12にかけて挙動が変わりました。
以前は、Componentの定義を作りつつComponentのElementを返しているという２つのことをやっていたのですが、v0.12からはそれが分離されてComponentの定義を作成して返すだけになりました。

つまりElementではないので、使うときには`React.createElement(Component, {name: 'xxx'})`のようにReact Elementにしてあげる必要があります。ちなみに`React.createFactory(Component)`とやることも出来ます。

ただJSXを使っている場合は、これまでと同じように`React.createClass`の戻り値を`<Component />`のように直接渡しても大丈夫です。

```js
var Hello = React.createClass({
  render() {
    return <div>{this.props.name}</div>;
  }
});

React.render(React.createElement(Hello, {name: "foo"}), document.body);
// or
React.render(React.createFactory(Hello)({name: "foo"}), document.body);
// JSXはそのままでOK
React.render(<Hello name="foo" />, document.body);
```

この変更には今までがcreateClassという名前以上のことをやっていたというのもあるのですが、createElementを通してComponentを作成するようにすることで最適化の余地を与えたり、将来的に`React.createClass`を使っているところをES6のclassで定義出来るようにするという意図もあったりします。

--------

Componentについてはそのほかにも、Lifecycleに応じたhookがあったりするのですが、その辺りについても今後紹介していきたいと思います。

明日は`Prop`について書きたいと思います。
Railsのredirect_toがurl_forを呼ぶまで

ちょっと困ってコード読んで調べたメモ

form_forはurl_forでurl作られるしredirect_toもそうなんだろうなあとなんとなく思ってたけど、自信もてなかったので読んだ

## redirect_toにAR::Baseのインスタンスを渡したときの挙動

- [`ActionController::Instrumentation#redirect_to`](https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/instrumentation.rb#L61)
  - [`ActionController::Redirecting#redirect_to`](https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/redirecting.rb#L75)
     - [`ActionController::Redirecting#_compute_redirect_to_location`](https://github.com/rails/rails/blob/master/actionpack/lib/action_controller/metal/redirecting.rb#L79-L97)

リダイレクト先は `ActionController::Redirecting#_compute_redirect_to_location` で計算される。

```rb
    def _compute_redirect_to_location(request, options) #:nodoc:
      case options
      # The scheme name consist of a letter followed by any combination of
      # letters, digits, and the plus ("+"), period ("."), or hyphen ("-")
      # characters; and is terminated by a colon (":").
      # See http://tools.ietf.org/html/rfc3986#section-3.1
      # The protocol relative scheme starts with a double slash "//".
      when /\A([a-z][a-z\d\-+\.]*:|\/\/).*/i
        options
      when String
        request.protocol + request.host_with_port + options
      when :back
        request.headers["Referer"] or raise RedirectBackError
      when Proc
        _compute_redirect_to_location request, options.call
      else
        url_for(options)
      end.delete("\0\r\n")
    end
```

`redirect_to hoge`（hogeはAR::Baseのインスタンス）したとき、このcaseのelse節に入るため、url_forが呼ばれる。