Engineer Flies エンジニアは空を飛ぶ

１行で複数の変数を設定するのは気をつけよう

2015-09-20T10:40:00.001+01:00

`a, b = b, a`と`a = b; b = a;`って違うんですね。

```ruby

> a, b, c = 'a', 'b', 'c'

=> ["a", "b", "c"]

> a = b; b = a;

> [a, b, c]

=> ["b", "b", "c"]

# リセット

> a, b, c = 'a', 'b', 'c'

=> ["a", "b", "c"]

> a, b = b, a

> [a, b, c]

=> ["b", "a", "c"]

```

つまり１行の場合はそれ以前の行の変数の状態を保持した状態でそれぞれの変数へ同時に代入が行われる。

Macのキーリマッピング

2014-11-12T06:22:00.002+00:00

Macのキーリマッピングを再考しました。Rubyをよく書くことが多いので以下のセッティングが個人的に一番楽

- `:`と`;`はシステムワイドでいつもスワップされる
- `-`と`_`はvimを使っているときだけスワップされる（日本語を書くときやコマンドラインでは`-`を多用するから）

つまり

1. `:` <=> `;`はKarabinerで設定する
2. `-` <=> `_`は.vimrcで設定する

## 1. `:` <=> `;`はKarabinerで設定する

- [Karabiner](https://pqrs.org/osx/karabiner/)をインストールする
- Change Key tabを開く
- 検索フィールドにsemicolonと入力する
- Swap Semicolon and Minusにチェックする

## 2. `-` <=> `_`は.vimrcで設定する
- .vimrcに以下を追記する
noremap - _
noremap! - _
noremap _ -
noremap! _ -

東京都内で白松が最中を買える場所

2014-09-27T05:19:00.001+01:00

大好物の甘味、白松が最中が通販では送料が650円。都内で扱っているお店が無いかとホームページをみても見つからなかったので電話して聞いてみました。意外と何個もあったんですね

# 白松がモナカ

- 三越
本店 (日本橋)
恵比寿
銀座

- リビン
錦糸町 ⚪︎ 品揃え豊富

- 西武池袋

- 東急
町田
吉祥寺
東横(渋谷)

- 宮城アンテナショップ
東池袋1-2-2

疑問系における単数形

2014-04-12T01:59:00.000+01:00

”どんなものが広告表現では重要なのでしょう？”という文の日本語訳は以下のうちどちらが正しいでしょうか？複数の回答が予想されるような質問です。

1. What are Important for Ad Representation?

2. What is Important for Ad Representation?

正解は２の単数形のほうです。質問する段階だと、複数の答えがあるとは限らないので、複数形で聞くのはちょっと不自然らしいです。

ただし、"What are your 3 favourite animals?" なら3と聞いてるから複数形で質問するのは正しい。"most"が質問文に含まれている場合、複数形になのが不自然です。"most"はいつも"the most"なので一つなんですね

引数の*

2014-03-17T13:51:00.002+00:00

引数の*がどういう役割をするのか時々分からなくなってしまうのでまとめてみた。

- メソッド内の引数に付ける'*' => 複数の引数をまとめる
- メソッドに渡す引数に付ける'*' => 配列を展開して複数の引数として渡す

```ruby
def caller(*args)
  squash(args)
end
def squash(args)
  puts args.inspect
end
 
caller(:index, :show)
# [:index, :show]
caller(:show)
# [:show]
caller(*[:show])
# [:show]
```

Date.parse と DateTime.parse

2014-03-17T13:42:00.000+00:00

DateTime.parseの方はlocal timeになるらしい。to_iするとUTCとJPTの時差が数値で出る。

```ruby
[2] pry(main)> Date.parse("2014-03-12").to_time.to_i
=> 1394550000
[3] pry(main)> DateTime.parse("2014-03-12").to_i
=> 1394582400
```

test

2014-02-08T04:16:00.001+00:00

Dillinger
=========

Dillinger is a cloud-enabled HTML5 Markdown editor.

- Type some Markdown text in the left window
- See the HTML in the right
- Magic

Markdown is a lightweight markup language based on the formatting conventions that people naturally use in email.  As [John Gruber] writes on the [Markdown site] [1]:

> The overriding design goal for Markdown's
> formatting syntax is to make it as readable 
> as possible. The idea is that a
> Markdown-formatted document should be
> publishable as-is, as plain text, without
> looking like it's been marked up with tags
> or formatting instructions.

This text you see here is *actually* written in Markdown! To get a feel for Markdown's syntax, type some text into the left window and watch the results in the right.  

Version
----

2.0

Tech
-----------

Dillinger uses a number of open source projects to work properly:

* [Ace Editor] - awesome web-based text editor
* [Marked] - a super fast port of Markdown to JavaScript
* [Twitter Bootstrap] - great UI boilerplate for modern web apps
* [node.js] - evented I/O for the backend
* [Express] - fast node.js network app framework [@tjholowaychuk]
* [keymaster.js] - awesome keyboard handler lib by [@thomasfuchs]
* [jQuery] - duh 

Installation
--------------

```sh
git clone [git-repo-url] dillinger
cd dillinger
npm i -d
mkdir -p public/files/{md,html,pdf}
export SOMETHING='something'
echo $SOMETHING
```

```ruby
class A < B; def self.create(object = User) object end end
class Zebra; def inspect; "X#{2 + self.object_id}" end end

module ABC::DEF
  include Comparable

  # @param test
  # @return [String] nothing
  def foo(test)
    Thread.new do |blockvar|
      ABC::DEF.reverse(:a_symbol, :'a symbol' + 'test' + test)
    end.join
  end

  def [](index) self[index] end
  def ==(other) other == self end
end

anIdentifier = an_identifier
Constant = 1
```

##### Configure Plugins. Instructions in following README.md files

* plugins/dropbox/README.md
* plugins/github/README.md
* plugins/googledrive/README.md

```ruby
node app
```


License
----

MIT


**Free Software, Hell Yeah!**

[john gruber]:http://daringfireball.net/
[@thomasfuchs]:http://twitter.com/thomasfuchs
[1]:http://daringfireball.net/projects/markdown/
[marked]:https://github.com/chjj/marked
[Ace Editor]:http://ace.ajax.org
[node.js]:http://nodejs.org
[Twitter Bootstrap]:http://twitter.github.com/bootstrap/
[keymaster.js]:https://github.com/madrobby/keymaster
[jQuery]:http://jquery.com
[@tjholowaychuk]:http://twitter.com/tjholowaychuk
[express]:http://expressjs.com

Box2D.jsで円をゴムまりの様に衝撃で変形させるサンプル

2014-01-18T09:27:00.000+00:00

Box2D.jsで円をゴムまりの様に衝撃で変形させるサンプルです。

ボールが伸びる長さは同じ時間に一定ではなくて一番大きい通常時の大きさの2０％ずつ大きくなります。

var radius = this.circle.GetRadius() + (this.diffExpanding() * this.transformingSpeed);

Box2Dのworldを壁で囲むサンプル

2014-01-16T16:09:00.000+00:00

Box2Dでworldを壁で囲むクラス worldWallsのサンプルです。

箱を作ります

var box = new worldWalls(debugDraw.GetDrawScale(), canvas, '1111');

worldBoxにscale(Box2D上の単位)とcanvas element(画面上の実寸を保持している)を渡しサイズを決定します。

第3引数のtrblはtop right bottom leftの略でバイナリ形式の文字列でどの辺に壁が欲しいかを指定します。例えば底辺にだけ壁が欲しい時は'0010'、上以外に壁が欲しい場合は'0111'を指定してください。

クラス外部からwallを参照したい場合は以下の様にプロパティにアクセスしてください

var walls = new worldWalls(debugDraw.GetDrawScale(), canvas, '0111');
walls.top.restition = 10; //右辺だけ強くバウンドするようにする。

ProcessingでSocial Graphを作る

2014-01-05T05:27:00.000+00:00

ProcessingでSocail Graphを作ってみました。自分とその友達同士の共通の友人の数を線の太さに表したソーシャルグラフです。

世にいろんなソーシャルグラフのライブラリがあるのでそれらを使えば一瞬なんだろうけど幾何学的なことを理解したくて、本を読みながら部品から一個一個全部作りました。詳しくは書かないけれどこんな感じのテクニックを使っています。

正N角形

三角関数 cos, sin

ベジェ曲線

# コントロール的なロジックはSocialGraphというclassに集約されていて、引数はcsvファイルと、半径です。

SocialGraph(SocialGraphCsv csv, int radius)

こういうCSVを渡すとカラム数を拾って自動的に正N角形を描写して、人名や線を描写してくれます。

	Tatsuya Suzuki	Emi Ito	Bruno Barroso	Mattew Day	Maxim Dokhlov	Mehmet Bagbekleyen	Alex Yixnitsky	Stuart Gardner	Derrick May
Tatsuya Suzuki	0	50	19	10	9	11	15	2	0
Emi Ito	0	0	2	3	3	2	1	2	1
Bruno Barroso	0	0	0	4	3	17	1	2	1
Mattew Day	0	0	0	0	4	5	1	2	1
Maxim Dokhlov	0	0	0	0	0	4	1	2	1
Mehmet Bagbekleyen	0	0	0	0	0	0	1	2	1
Alex Yixnitsky	0	0	0	0	0	0	0	1	1
Stuart Gardner	0	0	0	0	0	0	0	0	1
Derrick May	0	0	0	0	0	0	0	0	0

総当たり（隣接配列）のため下半分は上半分の繰り返しであるため全て０です。1は共通の友人が私しかいないことを意味しています。

共通の友人の数は以下のURLで取得できます
https://www.facebook.com/<person A>?and=<person B>

# クラス構成

SocailGraph: 統括コントローラ
Coordinate: 座標を保持する
EquilateralPolygon: 等辺三角形を描写する
nodeNames: ノード（Facebookの例だと）の名前
FamiliarityAsLine: 親しさを線（の太さ）で表します

nodeNamesとFamiliarityAsLineはEquilateralPolygonに依存していますが、それぞれ独立した画像として再利用可能です。

# ソースコード

まだ整えられそう。ProcessingでOOPする難しさなんかも過去の記事にまとめました。

<script src="https://gist.github.com/suzukimilanpaak/8264451.js"></script>

# 感想

java(Processing Language)を久しぶりに書いたけど、今更OOPを気軽にやれない感じだった。ProcessingでOOPしようとするのが結構めんどくさい（不可能ではない）。ので再利用制のあるコードを書いて共有するのがProcessingの世界では手間。Javaの最近の文法を知らないけど、あの言語にあるこんなしようを使えばもっと奇麗になるかも。

ソーシャルグラフは三角関数とπの組み合わせしか使わないので意外と簡単。

Processingで正多角形を描く

2014-01-03T09:54:00.001+00:00

最近Processingで久々に遊んでいます。以前はライブラリを組み合わせて”わーできたー”位のことをやっておりましたが、最近基礎力を身につけたいと思って幾何学的なことも軽く学んでいます。
さて、文化というかよく見かけるProcessingのサンプルは縦に長ーくて変数の値がなんだったのか途中から忘れてしまうようなものが多いです。
例えば折れ線グラフを書くようなケースの場合、

統計情報をデータソースから取得する　＞　X軸、Y軸を描く　＞　X、Yの最大値を求めてスケールを決める　＞　ちょうどいい単位に目盛りを引く　＞　折れ線グラフを描く

といったステップを分けて踏むとコードがすっきりするのですが、一方でX軸、Y軸のディスプレイ上の座標や、XやYの最大値やなどの変数はスケッチを通して保持したいもので、そのことが縦に長ーいプログラムだとコードを複雑にしがちです。Proceccingの世界だとおそらく一回使い切りのプロジェクトもしくは次回使うことがあってもコピペして修正すれば割とすんでしまうようなことが多いのかもしれません。

でも、やっぱり再利用可能な部品を作りたいですね。コードを関数に区切ると変数のスコープが狭まるのでミニマムなことにフォーカスできます。

下記のコードでは最初に以下の引数で図形を調整できるものという条件を固持するものとして書きました。

- 正N角形のN
- 半径

# どこから読めばいいのか？
まずはsetupとdrawを読んでください。特にdrawを読むことで大まかな流れがつかめるでしょう。

// 半径２００pxの６角形を描く
  polygon = new EquilateralPolygon(6, 200);
  // 頂点を取得
  polygon.vertexes();
  // 頂点を描く
  polygon.drawVertexes();
  // 番号を描く
  polygon.drawIndexes();

肝になるところだけ軽く触れておきましょう。

# #xVertex, #vertexes()

vertexesは頂点の座標を集めています。

public float xVertex(int i, int extra) {
    return cos(angles[i]) * (radius + extra);
  }

  public Coordinate[] vertexes() {
    vertexes = new Coordinate[numVertexes];
    float angleForSingleArc = 2 * PI / numVertexes;
  
    for(int i = 0; i < numVertexes; i++) {
      // Sum up angles
      angles[i] = HALF_PI - angleForSingleArc * i;
      
      float x = xVertex(i, 0);
      float y = - yVertex(i, 0);
      
      vertexes[i] = new Coordinate(x, y);
    }
    
    return vertexes;
  }

ある頂点のX座標は三角関数を使って以下のように求められます。sinとcosを使った辺の長さの求め方

# xVertex

cos(角度) * 半径

y座標はsinを使って以下のように求められます

# yVertex
sin(角度) * 半径

xVertex中では半径だけを使ってって計算しています。これは円の中心を起点の0,0としてその差分を座標として計算し描写しているからです。ただ描写する正確な座標ははプログラマが意識しないですむようにtranslate関数であらかじめずらしています。

＃拡張点の座標の求め方
angles[i] = HALF_PI - angleForSingleArc * i;

PIはπを意味するあらかじめProcessingに用意された定数です。上記のx, yの関数で角度が0の場合processingは右端になります。そこから始まって反時計回りに角度を表します。

0 => QUARTER_PI（４５度） => HALF_PI（９０度） => PI(180度) => 2 * PI(360度)

一つずつの頂点について図の一番上を起点としてそこからの角度をi毎に取得します。時計回りに点を配置することにしたのでマイナスを付けて逆方向に回転させます。
angles[i] = HALF_PI - angleForSingleArc * i;

＃　なぜOOPを使ってシンプルに書くのが難しいのか？

なぜProcessingではOOPをつかってシンプルに書くのがむずかしいのでしょうか？コードを書いていて思ったことがあります。

- 文脈依存の関数が多い

例えばこのコードに出てくる以下のようなコードは文脈依存です

fill(BLACK);
text(i, vertexes[i].x, vertexes[i].y);
noFill();

noLoop()

translate(DISPLAY_WIDTH / 2, DISPLAY_HEIGHT / 2)

全て後述の処理に影響します。

- 一個のループに何でもまとめてしまう

計算量が気になってしまい一個のループに何でもまとめてしまうのでそのループを含む関数がいろんなことをやってしまいがちです。lambdaを使ってループのある関数内で座標計算や描写などを遅延評価させてあげればいいんですかね。
http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/Lambda-QuickStart/index.html?cid=7180&ssid=3993398328344#section2

以上、久々のJava勉強になりました。

データビジュアライゼイションに役立つかもしれないデータソースまとめ

2014-01-02T12:52:00.001+00:00

データビジュアライゼイションに役立つかもしれないデータソースをまとめてみます。まだ少ないですが後からもちょいちょい足していきます。(*.最終更新日 2014.1.2)まとまってないだろっていう突っ込みは来年までお待ちください。

# 統計データ

＜日本＞
# estat, 省庁別
人口や産業、経済、エネルギーに関する政府の統計情報。国勢調査などのデータがある。

# Data Meti
経済産業省がオープンデータを実践するために設置した試験サイト。予算、決算、技術、食品、地理、防災などの情報がある。

＜世界＞
# IMF

# 地図

地図のマッピングをするときはデータソースの緯度、経度を正確に地図に配置しなければなりません。そのためには背景にある地図のイメージの緯度、経度が正確でないとなりませんね。

- openStreetMap
　開かれたライセンスのopenStreetMapでは緯度経度の範囲によって地図を切り取ることが出来ます。

緯度、経度はよく度、分、秒で表されます。度より小さい値は６０進数で表されます。分は６０で割り、秒は３６００で割りその値を足すことで小数点以下の値に変換することが出来ます。

- QGIS
QGISは地図上に必要なレイヤー(georeferrence？)を配置するOSSです。商業利用は有料です。

has_and_belongs_to_many associationで counter_cacheを有効にする

2014-01-01T04:21:00.001+00:00

has_and_belongs_to_many associationで counter_cacheを有効にするサンプル。

以下は Category has_and_belongs_to_many Website な関係が成立しています。HABTMでcounter_cacheを実施するには has_and_belongs_to_manyに:after_add, :after_removeなどのオプションを渡してフックするメソッドをしてあげれば良いです。

そうすることで website.categries = [category_foo, category_bar] としたときに以前のcategoriesとの差分についてcounter_cacheをincrement/decrementしてくれる。

Website自身のフック :after_save, :after_create, :after_destroyは関連を更新したときにはトリガーされないです。

*. #make!はmachinistからデータを作成しています

Rails 4　エラーメッセージを完全に上書きする

2014-01-01T01:29:00.001+00:00

メッセージを上書きしたいときはオプションで presence: { message: 'Select at least one category' } の様にメッセージを渡してあげれば良いです。
だけど、それだと主語が先頭に来てしまい"Category Select at least one category"というエラーメッセージになってしまう。

全てのメッセージを上書きしたいときはlambdaを渡してあげればよい。

validates :categories, presence: { message: -> {|location, error| raise [location, error].inspect }  }

# => [:"activerecord.errors.models.website.attributes.categories.blank", {:model=>"Website", :attribute=>"Categories", :value=>#＜ActiveRecord::Associations::CollectionProxy []> }]

現在のGitのブランチをzshのプロンプトに表示する

2013-08-08T04:28:00.000+01:00

現在のGitのブランチをzshのプロンプトに表示するのがいろんなスクリプトがあると思いますが、個人的にzsh-git-promptを半年くらい使っていて何の不満も無かったのでお勧めしたいです。

現在のブランチとremoteとの差分を記号を使って表示してくれます。
表示される記号の詳細はこちらに表記されています。

PROMTを設定することで設定済みの変数のうち何を表示するか設定できるようです。
PROMPT='%B%m%~%b$(git_super_status) %# '

Railsはどうやってコネクションをプールしているの？

2013-03-06T02:01:00.000+00:00

- Rackがコネクションをプールしている
- 一個のスレッドは一個のコネクションしか持てない
http://stackoverflow.com/questions/5131772/how-does-the-rails-connection-pooling-work

- Rails2.2以前
Rails2.2以前のスレッドとコネクションの関係であればこちらの記事が分かりやすいです。良記事！
http://fmkt.blog65.fc2.com/blog-entry-138.html

Capistrano関係のリンク

2013-02-07T04:46:00.001+00:00

- Wiki home
https://github.com/capistrano/capistrano/wiki

- よく使う変数
https://github.com/capistrano/capistrano/wiki/2.x-Significant-Configuration-Variables

- CapistranoのTask一覧
https://github.com/capistrano/capistrano/wiki/Capistrano-Tasks

- Capistranoの予約変数
http://theadmin.org/articles/capistrano-variables/

RSpecのベストプラクティス

2013-01-24T03:04:00.001+00:00

オンライン上のRSpecのベストプラクティスって結構限られていますよね。Specの書き方の基本が分かると”ControllerのexampleでViewやModel出力のバリエイションを担保しない。”といったような一定のノウハウにそってスペックを書きつつコーディングもきれいに整頓していきたくなるところ。

- Better Specs
Specそのものの書き方を学ぶならここ。Githubの議論付きで紹介しています。

- RSpec Rails in Relish
ベストプラクティスと銘打っているわけではありませんがRailsのMVCHのスペックの書き方をここで学ぶことができます。

[Sass] @extendの覚えておくべき動作とplaceholder seloctorの使い道

2013-01-08T16:01:00.001+00:00

以前から疑問に思っていたSassのplaceholder selectorの使い道がひとつ見つかりました。それは既存の継承の定義を汚さずに拡張を行うというものでした。といっても例をあげないことにはぱっと伝わらないと思います。以下のような順番でおさらいをしながら話を進めます。

extend => placeholder selector => codeschoolの応用問題

@extendの基本的な使い方

@extendの基本的な使い方はこのようにクラスを拡張して他の要素(この例だとborder-with)を付け足すことだ。

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.seriousError {
  border-width: 3px; }

出力結果はもともと定義されていたCSS上の.error{} にセレクタである.seriousErrorを追加して同じスタイルを適応している。さらに.seriousError{ border-width: 3px; } を単体で宣言することで拡張という概念を実現している。

では、上記の例のように既に.errorsが拡張されている場合に、.errorsを別のところでも定義したらどうなるだろうか？

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

出力結果には.error.intrusion だけでなく.seriousError.intrusion もできるんですね。

実はこれ本家のリファレンスにある基本的なextendの例なんです。

placeholder selector

Placeholder selectorはそれそのものの定義は何も出力されませんが、それをextendするとextendした先の定義が出力されます

// This ruleset won't be rendered on its own.
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

//However, placeholder selectors can be extended, just like classes and ids. The extended selectors will be generated, but the base placeholder selector will not. For example:

.notice {
  @extend %extreme;
}

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

僕はこれの使い道がいまいち分かりませんでした。

Codeschool

以下は僕がCodeschoolで遭遇した問題です。

= 問題本文 =
Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending .blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with .blueprint and .surveyor to remove the extra .factory .surveyor selector.

？？？なんじゃそりゃ。と初見だと文の意味すらよく理解できなかったです。
でも上記のコンテキストを踏んでいるのでもうお分かりじゃないかと思います。

意訳するとこういうことですね。

最初に .blueprint を定義して .factoryでextendした。

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

だけど、変更が必要で .surveyor を作って extend した。

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  @extend .blueprint;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

そしたら、出力結果に予期せぬ余分な .factory .surveyor が入ったのでこれを取り除きたい。

.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.surveyor {
  color: #fff;
}

.factory {
  background: #fff;
}
.factory .blueprint, .factory .surveyor {
  margin-bottom: 20px;
}

Placeholder selectorを作って余分な .factory .surveyorセレクタを削除してください。

どうでしょう、make senseしましたか?すでに定義済みの継承関係.factory{ .blueprint{} }を汚さないように拡張をするのにplaceholder selector使ってくださいと言っています。こういうケースならplaceholder selectorが使えるのかもしれません。

では以下が問題全文です。回答もありますので併せて参考にしてみてください。

Whoops - we've discovered an alteration to .blueprint later in our stylesheet, and extending .blueprint with .surveyor is creating extra selectors in .factory that aren't needed. Create a placeholder selector called container to hold the shared properties and extend it with .blueprint and .surveyor to remove the extra .factory .surveyor selector.

.blueprint {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}
.surveyor {
  @extend .blueprint;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.surveyor {
  color: #fff;
}

.factory {
  background: #fff;
}
.factory .blueprint, .factory .surveyor {
  margin-bottom: 20px;
}

回答；

%container {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px;
}

.blueprint {
  @extend %container;
}
.surveyor {
  @extend %container;
  color: #fff;
}

.factory {
  background: #fff;
  .blueprint {
    margin-bottom: 20px;
  }
}

.blueprint, .surveyor {
  background: blue;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 10px; }

.surveyor {
  color: #fff; }

.factory {
  background: #fff; }

 .factory .blueprint {
   margin-bottom: 20px; }

まずは.blueprintに親になる %containerを定義して拡張することで出力結果の .blueprint{} と .factory .blueprint{} を実現します。.surveyor{} には color: #fff; という拡張を入れたいので別途 %containerをextendしています。そうすると、.factory { .blueprint{} } は .blueprint だけに適用されますから余分な .factory .surveyerは出力されません。

覚えているようで覚えられない5通りのActiveRecordの属性を変更する方法

2013-01-08T07:44:00.000+00:00

メモ；

5 Ways to set Attributes in ActiveRecord

5 Ways to set Attributes in ActiveRecord

Method	Uses Default Accessor	Mass Assignment Protection	Saved to Database	Validations
attribute=	Yes	No	No	n/a
write_attribute	No	No	No	n/a
update_attribute	Yes	No	Yes	No
attributes=	Yes	Yes¹	No	n/a
update_attributes	Yes	Yes	Yes	Yes

TextMateでパス指定でファイルを開く

2013-01-08T05:35:00.000+00:00

# Create sym link to mate command
% ps aux|grep Mate
tatsuya-suzuki 36875   0.0  1.4   920560 121252   ??  R     2:07PM   0:13.67 /Applications/TextMate.app/Contents/MacOS/TextMate -psn_0_2155022

% sudo ln -s /Applications/TextMate.app/Contents/Resources/mate /usr/bin/mate

# Now you can open a file with the command
% mate config/database.yml

mate commandの前にTextMateでプロジェクトを開いていれば一個のプロジェクトに全てのファイルがそれぞれのタブとして開かれます。そうでない場合は一個のファイルにつき一個のプロジェクトが立ち上がるので注意してください。

参考：
http://superuser.com/questions/201251/how-to-add-textmate-to-my-path-on-mac
https://github.com/textmate/textmate/issues/327

CodeSchoolを試してみてる

2013-01-07T05:43:00.001+00:00

最近いろいろなタイプのオンラインの学習サイトが乱立していることは皆さんもご存知のことと思います。

お手軽にプログラミングを学習したい人のための厳選5サイト

その中にはあまりにも一般化しすぎているものや、”やりたいことはあるけど使い勝手がいまいち。。”的なものなどあって、試してみるまでなかなかどれが良いか分かりません。そんな中周りの評判が良かったのと、自分で使った感じも良かったのでCodeSchoolを使い始めています。

コードスクールの良さ

コードスクールが良いのは、書きながら覚えていくことにラーニングのアプリケーションが特化しているので知識の吸収効率が良いこと、それから、ながーーいリファレンスから必要な情報を抽出する手間を省いてくれていることなどです。

Webのエンジニアリングの世界って分量的にカバーしておくべきが多いですよね？CodeSchoolは月＄５０と割高な感じなんですが、全ての技術に分厚い本を買って望む暇は無いけれど体系化した知識を付けてないと業務上の実践では不安というケースには有効です。

コースはこんな感じのがあります。今のところRuby on Rails界隈のスタックが多いけど、徐々に汎用的なコースが増えてきている感じがします。

Git, Sass, CSS, Mobile, HTML5, Coffeescript, jQuery, iOSなんかのコースがあるのもうれしいですね。
- Javascript
- デザイン
- Web tools

始めた理由

- 以前iKnowを毎日やって成果が出たので感覚的にこういう感じのタイプの公文式みたいに繰り返しやって覚えるオンラインラーニングに慣れている
- 毎日２時間の学習時間は取れないけど、３０分なら取れる。週に一日２時間よりも、毎日３０分x５日の方が頭に定着する
- ＄５０は高いけど本の料金やWeb上のドキュメントとそれにかける時間を考えるとまあ良いかなと思える。仕事への投資と思えば安い。

迷っている人は全てのコースの１個目のチャレンジは無料なのでものの試しにやってみることをお勧めします。ユーザ登録しておくとたまにディスカウントのメールが来るので良いですよ。

以上、また一ヶ月後に使った感想を書くかも！

Macのキーリピートを”さらに”早くする

2013-01-06T10:06:00.000+00:00

Macでキーリピート（キーボードの出力を繰り返し行うこと）の早さの設定は環境設定からの標準に設定できる範囲では非常に遅い。

defaults writeから直接編集してもまだ遅い

それで見つけたのがこの記事。 KeyRemap4MacBook というアプリを使えばkeyの再配置だけでなく、リピートの早さも設定できる。

- Initial wait で最初にキーを押してからリピートが始まるまでの時間
- Waitでリピートの間隔
をそれぞれ設定すれば完了だ。

Macを使うようになってからずーーーーーっとおざなりにしてしまっていたうざったい問題がこれで解決した。

lightwindowのHTMLを:js => trueなexampleで試験するのはwithin_frameが良いけどissues #365に遭遇した

2012-12-25T03:23:00.000+00:00

Integration testを書いていたらlight windowの中にIframeでレンダリングされるHTML pageがあって、testにはCapybaraのwithin_frameが良いことを発見した。within_frameはSeleniumにもWebkitにもある。

ただし、lightwindowに親のURLを変えるようなjavascriptがありこのissue #365に遭遇してしまった。

そもそもAjaxでリクエストした結果をIframeに描写するという実装は複雑すぎるしあんまりテストフレンドリーじゃないからやめたい。ということで結局は実装を変えることにした

英語を学習する人に "Metro" を薦めたい○個の理由

2012-12-06T18:09:00.002+00:00

- Metroとは http://metro.co.uk/
ロンドンで各駅で無料で配られているタブロイド紙の1つです。ここで話しているのはそのウェブ版です。

- 単語が簡単
担当直入で比喩が少ないので単語一個一個の意味は分かるけど文の意味が分からないといったことがほとんど無い。これはきっと移民向けに設計されているんではないかというほど

- 文が短い
GuardianとかReutorsとか良質の新聞は専門用語が多い上に論文調で長い。質が良くても長すぎて結論がわからないまま記事を読み捨ててしまったりしていたらいろんな情報にリーチできないからきっとすぐに英語でニュースを追うことに飽きますよね。Metroは文が短いので興味駆動で長く新聞を読み続けるのにもってこい。毎朝読む習慣が１年以上続いています。英語学習は一定のレベル（文法を一通り把握してる）までいったら後は質より量

- 他紙では取り上げないくだらないニュースも載ってる
たとえばこれ- http://goo.gl/Hg8MS - 都会のきつねがカップルを攻撃。撃退され逃げた瞬間に車にひかれてペシャンコ
こんなローカルネタを地球の反対側から読めるなんて素晴らしい。でも愚弄することなかれ。つまらないニュースにこそスラングや口語などの普段知れない生活観あふれる単語がつまっています。

- UIがすばらしい
去年なにげに'Newspaper App of the Year'を受賞している http://goo.gl/pSJSH

みんなMetroおすすめですよ。僕はいつでもどこでも読めるようにBylineというオフラインRSSリーダにMetroを登録しておいて毎日記事を溜め込んで読んでいます。楽しくて毎日読みたくなりますよ