OmniAICreator/Qiita-1.07M huggingface dataset:
knockoutのデバッグ方法

    この記事は、knockout.js Advent Calendar 2015の９日目の記事です。 先に８日目に目を通すことを推奨しています。
    knockout , knockout-es5 , knockout.punches環境を想定しています。

あらゆるMV*ライブラリ/フレームワークにして共通して言える事なのですが、
指定したHTMLの要素（element)が一体どのscopeに属しているのかを正確に把握することが大切です。
Webブラウザで、<kbd>F12</kbd>を押すことで、一般的には開発者用のツール（Developer Tools、インスペクタ）が起動します。

ここではChromeの場合で説明します。
DeveloperToolsを開いている状態で、
scopeを調べたい対象の要素を右クリックし、要素を検証(N)を選択します。
![knockout1.png](https://qiita-image-store.s3.amazonaws.com/0/58195/5664894c-bd15-5358-cb31-94a33be46480.png)

その後、DeveloperToolsのConsoleに、
`ko.dataFor($0)` や、 `ko.contextFor($0)`　など実行すると、その要素のscopeが何なのかがわかります。
`ko.contextFor($0).$data` と `ko.dataFor($0)`は等価です。
![knockout2.png](https://qiita-image-store.s3.amazonaws.com/0/58195/b397bbd3-4d2b-4f8b-88f4-b4bedaf29dd0.png)

scope上での動作をシミュレートしたい場合には、非strict modeであれば、

```js:console
with(ko.contextFor($0)){
  $parent.name;
}
```
のように、with内で試すことも出来ます。

> ちなみに、サンプルで利用しているjsFiddleは、iframe内でうごいており、originが違うため、インスペクタの対象を `<top frame>`ではなく、`result(fiddle.jshell.net/)`にすると期待通りの結果になるはずです。
駅の位置を修正しよう

普段は自転車で走りつつコンビニ等のマッピングをしているt-mzです。今年書いた記憶があるOSM関連の資料や記事は[動画マッピング](http://www.slideshare.net/t-mz/ss-46411148)くらいしかなかったので、この記事を書きました。前置きと全く関係ないですが、今日のテーマは駅です。

# はじめに
駅は比較的目立つPOIの一つですが、OSMの駅の位置ってかなりずれた位置に描かれてることが多いと思いませんか？ずれている理由と、簡単な修正手順をまとめておきます。

# 今回の作業目標
マッパーの聖地？かもしれない、[智頭（ちず）駅]
(https://www.openstreetmap.org/node/3791318501#map=18/35.26499/134.22609)の位置を修正します。編集後にスクリーンショットを取得したので、背景画像は全て編集後のものになっています。
![修正前後](https://qiita-image-store.s3.amazonaws.com/0/101608/b67d4c4c-c9a1-03da-74df-1d38aa37368b.png)

# そもそも、何で大きくずれてるの？
現在の日本の駅のノード(railway=station)の多くは、タグを見るとsource=KSJ2となっており、2008年から2009年頃に国土数値情報の鉄道データ（以下、KSJ2）から[インポート](http://wiki.openstreetmap.org/wiki/Import/Catalogue/Japan_KSJ2_Import/Railway)されたものです。KSJ2は、下の図のような2種類の線データで構成されています。
![KSJのデータ](https://qiita-image-store.s3.amazonaws.com/0/101608/0227de7d-40cb-196c-a990-c699f853dc05.png)
KSJ2の駅区間データはノード数2～5個程度のウェイで構成されていて、駅中心を示すノードの情報は持っていません。インポートスクリプトでは、駅区間のノードのうち真ん中に近いノードをstationノードとするようになっていたのですが、智頭駅のように多くの駅はノード数が2個だったため、駅区間の端がstationノードとなり、中心から大きく（今回の場合**約64m**も）ずれてしまう形でインポートされたようです。
既に置かれているデータの位置を大きく動かすのには抵抗があるかもしれませんが、元が大きくずれてるんだから、Bingで大まかに修正しても全く問題ありません。
ただ、単純に駅のノードを動かすと線路も一緒に動いてしまいます。ということで、線路を動かさずに駅の位置だけを動かす手順を紹介します。

# 修正手順
駅のタグ付けルールの詳細は[railway=station](http://wiki.openstreetmap.org/wiki/JA:Tag:railway%3Dstation)を見ていただくとして・・

おおまかな流れはこんな感じ。
1. 正しい駅の位置にrailway=stationのノード（新ノード）をコピーして配置する
2. 旧ノードに付いているタグを削除する（ノード自体は消さないこと）
3. 周辺のデータ拡充も可能な範囲で実施する

JOSMでは次のように操作してください。
1-a. 旧ノードを選択してからキーボードでCtrl+C
1-b. 正しい駅の位置にマウスポインタを置いてCtrl+V。旧ノードは線路上にありましたが、新ノードを線路上に置く必要はありません。
![新ノードの追加](https://qiita-image-store.s3.amazonaws.com/0/101608/94869d4f-f565-3bf0-430f-423b7e32318b.png)
1-c. 新ノードのsourceの値を変更。Bing画像で新ノードの位置を決めたならsource=Bing
1-d. 新ノードの、note, note:ja, source_refの各タグを削除
![新ノードのタグ削除](https://qiita-image-store.s3.amazonaws.com/0/101608/74bf96e9-f9fc-fd7c-9b1d-0a6b9dc02422.png)
2. 旧ノードの、name, railway, wikipedia等のタグを削除（インポート後に編集された形跡がなければ全てのタグを削除）
![旧ノードのタグ削除](https://qiita-image-store.s3.amazonaws.com/0/101608/c7f73bc9-38e0-9b95-deed-aef392ec6649.png)
3. これ以上はお好みでどうぞ。今回は、駅構内の線路を分岐したり、停止位置にノードを追加して、railway=stopなどのタグを付けました。
![停止位置のノード追加](https://qiita-image-store.s3.amazonaws.com/0/101608/da62b05a-de41-94c7-c1eb-3190bd458004.png)
停止位置の追加などのため線路上にノードを追加すると、わずかに線路の位置がずれてしまう場合があります。気になる時は追加したノードを1個だけ選択して「ノードを一直線に配列」（ショートカットはLキー）してみてください。

今回の作業の最終形は最初に示した「修正後」の画像のとおりです。

# 終わりに
この記事で駅の位置を修正してくれる方が増えると嬉しいです。ところで、国土数値情報は今年、[OSMへのインポートができない利用条件となってしまった](https://lists.openstreetmap.org/pipermail/talk-ja/2015-July/009000.html)ようで、この先開業する路線のインポートは難しそうです。地下路線は衛星画像やGPSログも使えないため、[地理院地図](http://wiki.openstreetmap.org/wiki/JA:GSImaps)をトレースするくらいでしょうか。
今週12月6日に仙台市地下鉄東西線が開業したのですが、地理院地図のトレースで描かれているようですね。
Mac OS X 用 wheel パッケージユーティリティ delocate の紹介

この記事はQiitaではなく[**ADVENTAR**のPython Advent Calendar 2015](http://www.adventar.org/calendars/846)の9日目になります。


# delocate とは

delocateはOS X 用のwheelパッケージユーティリティです。
[Matthew Brett](https://github.com/matthew-brett) 氏 作

- https://pypi.python.org/pypi/delocate
- https://github.com/matthew-brett/delocate

下記のような機能を持っています

- wheelが依存しているライブラリを表示する
- wheel中に依存しているライブラリをコピーしリンクするよう書き換える

それでは実例を挙げてみます。

## delocate-listdeps コマンドによる依存ライブラリの表示

実例にはE-Cellという細胞シミュレータの最新版のwheelファイルを用いてみます。
もしdelocateを行う前のwheelファイルをご自分でビルドしたいと思われた方は
https://github.com/ecell/ecell4-wheels/blob/master/.travis.yml
のdelocateを行う前までをご参照ください

まず delocate-listdeps コマンドを試してみます

```
> delocate-listdeps --all dist/ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.whl      
/usr/lib/libSystem.B.dylib
/usr/lib/libc++.1.dylib
/usr/local/Cellar/gsl/1.16/lib/libgsl.0.dylib
/usr/local/Cellar/gsl/1.16/lib/libgslcblas.0.dylib
/usr/local/Cellar/hdf5/1.8.16/lib/libhdf5.10.dylib
/usr/local/Cellar/hdf5/1.8.16/lib/libhdf5_cpp.11.dylib
```

ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.whl というwheelファイルがhomebrewの
gslとhdf5に依存していることがわかります。

```--all```オプション無しのデフォルトでは ```/usr/lib``` と ```/System``` 中のライブラリを表示しません。
(OSXにおいてそれらの中のライブラリは共通で気にする必要が無いから、と思われます。)

## delocate-wheel コマンドによる依存ライブラリのコピーと再リンク

上述のwheelパッケージはそのまま配布しても

- homebrewをデフォルトのパスにinstallしていて
- gslのversion1.16とhdf5の1.8.16をインストールしていて
- OSXのバージョンが10.11

の人しか使えません。
(正確には第3点目のみ、使えないというよりは「wheelのインストールができません」です。詳細は後述します)

wheelパッケージがダイナミックリンクの対象となるライブラリに ```delocate-listdeps``` で確認したパスを期待しているからです。

これを環境に依存しないように書き換えるのが ```delocate-wheel``` コマンドです。
実例で示します。

```
> delocate-wheel dist/ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.whl 
> delocate-listdeps dist/ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.whl 
@loader_path/.dylibs/libgsl.0.dylib
@loader_path/.dylibs/libgslcblas.0.dylib
@loader_path/.dylibs/libhdf5.10.dylib
@loader_path/.dylibs/libhdf5_cpp.11.dylib
@loader_path/libhdf5.10.dylib
@loader_path/libsz.2.0.0.dylib
```

delocate-wheel コマンドによってdylibが期待されるパスwheelのツリーの中に動かされていることがわかります。
期待されるパスが変わっているだけでなくdylibはwheelパッケージの中に含まれるようコピーされています。
(whlをzipにリネームし解凍するとわかります)

## delocate-addplat コマンドによるプラットフォームの追加

delocate-wheel コマンドにより依存ライブラリをwheel中に含めることができましたが最後に前述した「OSXのバージョンが10.11」しかサポートできていない問題が残っています。

[PEP 0427](https://www.python.org/dev/peps/pep-0427/) で規定されているように
wheelのファイル名の最後のタグがプラットフォームを示すものだからです。
(今はこれがmacosx_10_11_intelとなっています。)

これにプラットフォームを追加するコマンドが ```delocate-addplat``` です。
実例を示します。

```
> delocate-addplat --rm-orig -x 10_9 -x 10_10 dist/ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.whl 
> ls dist/     
ecell4-4.0.0b2-cp27-none-macosx_10_11_intel.macosx_10_9_intel.macosx_10_9_x86_64.macosx_10_10_intel.macosx_10_10_x86_64.whl
```

プラットフォームが追加されていることがわかります。


## まとめ

まとめるのがだるくなったのでこれで終わります。
Swiftのprotocolに付ける : class を理解する

下のようなコードですが、`weak cannot be applied to non-class type 'MyProtocol'`というエラーになります。

```swift
protocol MyProtocol {}

// weak cannot be applied to non-class type 'XXX'
class MyClass {
    weak var delegate: MyProtocol?
}
```

## エラーの解決策
protocolに:classを付与すれば直ります。

```swift
protocol MyProtocol: class {}

class MyClass {
    weak var delegate: MyProtocol?
}
```

## : classとは何か
:classを付けるとこのProtocolはclassにのみ適用できるようになります。
:classが付いている場合、enumやstructにはこのプロトコルを使えないです。

```swift
// : classなし
protocol MyProtocol {}

class MyClass: MyProtocol {}
struct MyStruct: MyProtocol {}
enum MyEnum: MyProtocol {}
```

```swift
// : classあり
protocol MyProtocol: class {}

class MyClass: MyProtocol {}
struct MyStruct: MyProtocol {} // エラー
enum MyEnum: MyProtocol {} // エラー
```

`: class`はあるのですが、`: struct`や`: enum`はありません。

```swift
protocol MyProtocol: struct {} // エラー
protocol MyProtocol: enum {} // エラー
```

## なぜ: classを付けないとエラーになるのか
それはstructやenumはweakを付ける事ができないからです。

```swift
struct MyStruct {}
enum MyEnum { case A }

class MyClass {
    weak var myStruct = MyStruct() // エラーになる
    weak var myEnum = MyEnum.A // エラーになる
}
```

## なぜstructやenumでweakが使えないのか
おそらくですが、structやenumには参照カウントがないからだと思われます。

クラスを初期化して変数に入れた場合、変数にはオブジェクトのメモリアドレスが入っています。
参照カウントとは、変数がそのオブジェクトを参照した際にインクリメントされて参照がなくなったらデクリメントされるものです。
つまりそのオブジェクトが何個の変数から参照されているかを表すものです。

weakとはオブジェクトを参照しても参照カウントが増えないようにする機能です。

それに対してstructやenumは変数にメモリアドレスでなく値が入っています。
その為参照されると概念がなく、参照カウントもありません。

そういった事もあってstruct/enumでは参照カウントを制御するweakを使えないのだと思われます。

この辺少し自身がないので変な所あればツッコミ頂けると嬉しいです m m

## まとめ
* `protocol MyPritocol: class`はクラスのみに適用できるようにする記法
* クラスに絞り込めばweak修飾子を使える
* structやenumは参照カウントがないのでweakが使えない
初心者がごるーちんでハマるところ

# 概要
* Go言語の特徴であるごるーちん(goroutine)。
* `go func_name()`と書くだけで動くと聞いて、書いてみたけどうまくいかない!とハマったのでまとめました。
* **結論:** `main()`関数が終了するとごるーちんもすべて終了になるので、`main()`関数内に`go func_name()`と書くだけではごるーちんが起動前にプログラム自体が死んでしまいます。解決するには、チャネルを使う方法があります。サンプルは下に。

# うまくいかない例

<iframe src="https://play.golang.org/p/FSi-YsHDL0" frameborder="0" style="width: 100%; height: 100%"><a href="https://play.golang.org/p/cU2udImTSk">see this code in play.golang.org</a></iframe>
* ↑リンク先の「Run」ボタンを押すとプログラムが実行されます

```go:goroutine_NG.go
package main

import (
	"log"
	"time"
)

func sub() {
	log.Println("ごるーちんが呼ばれたよ!")
	time.Sleep(3 * time.Second)
	log.Println("3秒経過!")
}

func main() {
	log.Println("--- main start ---")

	// ごるーちんの呼び出し(うまくいかない)
	go sub()

	log.Println("--- main finish ---")
}
```
### 実行結果
* ごるーちんが実行されない

```console
2009/11/10 23:00:00 --- main start ---
2009/11/10 23:00:00 --- main finish ---
```

# なんでごるーちんすぐ死んでしまうん?
* main()が終了するとすべてのプロセス(goroutineで呼び出したファンクション含む)が終了するから
* 上記だとごるーちんを呼び出した直後にmain()が終了しているためごるーちんが実行されません
* ごるーちんの終了を待ってからmain()を終了する必要があります

# チャネルを使ってごるーちんの終了を待つ例

<iframe src="https://play.golang.org/p/TkbYZjzROI" frameborder="0" style="width: 100%; height: 100%"><a href="https://play.golang.org/p/f_lwBXVkNp">see this code in play.golang.org</a></iframe> 

* ↑リンク先の「Run」ボタンを押すとプログラムが実行されます

```go:goroutine_SUCCESS.go
package main

import (
	"log"
	"time"
)

func sub(ch chan bool) {
	log.Println("ごるーちんが呼ばれたよ!")
	time.Sleep(3 * time.Second)
	log.Println("3秒経過!")

	// 処理が終わったらチャネルに通知
	ch <- true
}

func main() {
	log.Println("--- main start ---")

	// チャネル作成
	ch1 := make(chan bool)

	// ごるーちんの呼び出し
	go sub(ch1)

	// チャネルから通知が届くのを待つ
	<-ch1

	log.Println("--- main finish ---")
}
```

### 実行結果
* ごるーちんで呼び出したファンクションが無事実行されました

```console
2009/11/10 23:00:00 --- main start ---
2009/11/10 23:00:00 ごるーちんが呼ばれたよ!
2009/11/10 23:00:03 3秒経過!
2009/11/10 23:00:03 --- main finish ---
```

* チャネルを知らない段階で、とりあえずごるーちん動かそうぜ!と思うとこの解決法が思い浮かばずハマりました。
* **で、チャネルって何さ**という点については[Go その3 1日目の記事](http://qiita.com/awakia/items/f8afa070c96d1c9a04c9)がサンプルもあって非常に参考になります!


# その他
* [The Go Playground](https://play.golang.org/)の Share 機能、その場で実行できてちょっとしたサンプルを共有するのにめちゃめちゃ便利ですね!

* [The Go Playground](https://play.golang.org/)の時間は、いつ実行しても同じ結果が得られるように ["2009-11-10 23:00:00 UTC" に固定されているそうです](https://tour.golang.org/welcome/4)



* 気になる点があれば、気軽にコメントください!
回転esa

回転esa

![esa_rolling.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/6e029f9d-25a3-cce8-9b4c-fbdedd08e028.gif)

## <i class="fa fa-paw" style="font-size:1em;"></i> Markdown
esaは内部でFont Awesomeを利用しています。
Font Awesomeで用意されている `fa-spin` を利用することで色々と回転させることができます。

```markdown
<i class="fa-spin">:esa:</i>
---
<i class="fa-spin">:esa:<i class="fa-spin">:esa:</i></i>
---
<i class="fa-spin">:esa:<i class="fa-spin">:esa:<i class="fa-spin">:esa:</i></i></i>
---
```

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Font Awesomeで回転したいときfa-spinが便利](http://qiita.com/hanachin_/items/e729dfd6a72b2c84842e)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Font Awesome](https://fortawesome.github.io/Font-Awesome/examples/)
【Swift】UIViewの各辺を指定してborderをつけるExtension


# 概要

CSSでいう、`border-left`, `border-right`みたいなやつ。

# 使い方

以下のファイルをプロジェクト内にコピーします。

https://github.com/taji-taji/TJExtension/blob/master/TJExtension/TJExtension/TJViewExtension.swift

以上で下記`border`メソッドが追加されます。

## 使用例

```swift:ViewController.swift

// ビューを生成
let someView = UIView(frame: CGRectMake(0, 0, 200, 100))

// TopとRightに線をつける
someView.border([.Top, .Right], borderWidth: 3.5, borderColor: borderColor)

```

![Simulator_Screen_Shot_2015_12_08_23_47_55.png](https://qiita-image-store.s3.amazonaws.com/0/11914/d6bcbb18-a26b-2b50-4190-b7e4118c009d.png)



# メソッド

```swift
func border(positions: [BorderPosition], borderWidth: CGFloat, borderColor: UIColor?)
```

## 引数

#### - positions
`.Top`, `.Left`, `.Right`, `.Bottom`から選択して配列にしたもの

#### - borderWidth
borderの幅。

#### - borderColor
borderの色。オプショナル。


# 特記事項

autolayoutに対応しています。

また、その影響から、サイズが変わるたびにUIViewのlayerにaddSublayerしたレイヤーを一度全て削除しています。
※この辺うまいやり方ないでしょうかね。。

# その他

- もちろん、UIViewを継承しているUIlabel他ビューパーツでも使えます。
- もっといいやり方あったら教えてくださいm(__)m

# コード

UIViewに限らず、よく使いそうな機能をExtensionとしてまとめていっています。
以下、Github上にコードを上げています。随時増やしていく予定です。

https://github.com/taji-taji/TJExtension

# 追記 2015/12/24

この投稿に書いたExtensionを含め、UIKitを拡張したExtensionをまとめてCocoaPodsのライブラリ化しました。

ライブラリは[こちら](http://cocoapods.org/pods/TJExtensions)。

また、CocoaPodsへのライブラリ登録の方法を[こちら](http://qiita.com/taji-taji/items/e23373f9b8124de728a2)に投稿しました。
参考になれば幸いです。
DBAというポジションについて考える

この記事は [animateLAB Advent Calendar 2015](http://qiita.com/advent-calendar/2015/animatelab) 8日目の記事です。

こんばんは、ポエムおじさんこと@kariaです。今日はどんなポエムを書こうかな？と思いながら[昨日のかんがーさんの記事](http://developer.animatelab.com/entry/2015/12/07/130216)を読み返してたら極めてアツい記事であったことに改めて気付きました。ありがとうございました！！

しかし今日は、明後日に出番を控えるsugicyanのハードルを下げるためにポエります。

皆さんはDBAという用語をご存知でしょうか。ご存知ない方もいると思いますのでとりあえずIT用語辞典へのリンクを置いておきます。

[DBAとは｜DataBase Administrator - 意味/解説/説明/定義 ： IT用語辞典](http://e-words.jp/w/DBA.html)

そう、DBAとはDatabase Administrator、つまりデータベース管理者のことを指します。

MySQLやらPostgreSQLやらOracleやら、RDBMSのお世話になっているアプリケーションやプロダクトは星の数ほど存在するでしょう。ということは、それらのDBの面倒を見るDBAも星の数ほど存在するはずです。

大事なことなのでもう一度言います。DBAも星の数ほど存在するはずです。

……現実にはどうでしょう？試しに、[QiitaのDBAタグ](http://qiita.com/tags/DBA)に何件投稿があるか見てみます。

> DBAに関する情報が集まっています。現在0件の投稿があります。 また0人のユーザーがDBAタグをフォローしています。

0件じゃん！DBAに関する情報が集まってない！！

実態としては、アプリケーションエンジニアがDBの面倒を見たり、インフラエンジニアがDBの面倒を見たり、運用担当者がDBの面倒を見たり……といった兼任ポジションを取っていて（もしくは実態として兼任状態になっていて）、独立してDBAというポジションを置いているプロジェクトというのは相当大規模な企業・プロジェクトでもない限り存在しないのではないかと思います。

DBAと他のエンジニア業を兼任する場合は、どの場合でもメリットデメリットがあって一概にどれが良いとは言えません。インフラエンジニアがDBの面倒を見ていたら、いつの間にかインフラエンジニア以外はDBは触ってはいけないことになっていたり、本来はアプリケーションが実現すべきことがDBの機能で実現されていたりとか、ありますよねー。運用担当者が投入した秘伝のタレ的なinsert文やupdate文やdelete文を止めにかかったりとか、ありますよねー。あれ、なんだか目にゴミが入ったようだ……。

個人的にはDBAは物凄く大切なポジションだと思います。それは何故か。DBのレスポンスが遅いということは、多くの場合アプリケーションのレスポンス遅延に直結してくるからです。

そのような場合、最適なクエリを発行するように見直したり、適切なインデックスによりコスト削減を目指したり、スキーマやテーブルの構造自体を見直したり、札束を叩いてより高速なハードウェアやクラウドサービスへ移行したり、場合によってはDBへのリクエスト発行自体を減らすようアプリケーションのコード自体を見直したり、キャッシュ機構の利用を考えたりしなくてはなりません。

よく読めばわかる通り、これらのお仕事はDBAだけの力でできるものではありません。他のエンジニアであったりとか、場合によってはエンジニア以外も巻き込んでいかなくてはなりません。もちろん、DBAという特別な存在を仕立て上げなくてもエンジニア皆にDB最適化の意識があれば何ら問題はありません。人類皆DB最適化の鬼！素晴らしい！

……という夢を見たんだ。

※参考資料：[という夢を見たんだ (というゆめをみたんだ)とは【ピクシブ百科事典】](http://dic.pixiv.net/a/%E3%81%A8%E3%81%84%E3%81%86%E5%A4%A2%E3%82%92%E8%A6%8B%E3%81%9F%E3%82%93%E3%81%A0)
swiftでのタプル

#1.タプルを定義する
```swift

let 変数 = (値1,値2,...)
```
タプルの定義は()の中に値を列挙する。
#2.タプルを参照する
```swift

let 変数 = タプル変数.数値
```
タプルで定義された変数から値を取り出す場合は、ピリオドの後に数値を指定する。
#3.使用例
```swift

//タプルの定義
let sampleTuple = ("Japan",48,"MachuPicchu")
//タプルから取り出す
let country = sampleTuple.0
let number  = sampleTuple.1
let remains = sampleTuple.2
//出力
print(country) // -> Japan
print(number)  // -> 48
print(remains) // -> MachuPicchu
```
WWDCノススメ

<p>WWDCは、Worldwide Developers Conferenceの略で、Appleが年に一回、世界中の開発者を集めて、新技術の紹介や開発にあたっての細かな技術を説明するためのイベントだ。2002年まではAppleの本社があるSan Joseで開催されていたが、2003年からはSan FranciscoのMoscone Westという会場で開催されている。</p>

<p>日本国内で開催される技術系のイベントは、どうしても海外の技術をお勉強するための場という感じになってしまうが、WWDCの特徴は担当部分の責任者であったり、実装を行っているAppleの技術者とやりとりでき、最新の情報が入手できるとともに、それが発表されるタイミングで自分の製品に組み込んだものをリリースできるという利点がある。また、どの分野に注目が集まっているのか、逆にトレンドから外れそうなものなど、流れを感じることができるという利点もある。</p>

<p>開催時期は以前は春から夏の間で変動があったが、最近では6月の第2週あたりに開催されるようになった。月曜日から金曜日に開催され、日本の土曜日に出発すると現地の土曜日に到着し、日曜日で時差ボケの体を慣らして月曜日からのセッションに備え、帰国は現地の土曜日に出発し、日本に日曜日に到着するというのがスタンダードなスケジュールになるのかな？</p>

<p>WWDC参加費以外にかかる費用をどう抑えるかだが、航空機代は頑張るしかない。日本の航空会社にこだわらなくてもかな。宿泊代だが、私のオススメはユースホステル。WWDC期間中は参加者が多く宿泊しており不安も少なく、多少の不便があっても一泊3千円程度は魅力的だ。</p>

関連情報
<a href="http://qiita.com/advent-calendar/2015/cocoa/">Cocoa Advent Calendar 2015</a><br />
<a href="https://developer.apple.com/wwdc/">WWDC</a><br />
<a href="http://www.cocoa-study.com/wwdc/2010/c1/">WWDCノススメ2010</a><br />
<a href="http://www.cocoa-study.com/wwdc/2009/c1/">WWDCノススメ2009</a><br />
<a href="http://www.cocoa-study.com/wwdc/2008/c1/">WWDCノススメ2008</a><br />

【Cocoa練習帳】
<a href="http://www.bitz.co.jp/weblog/">http://www.bitz.co.jp/weblog/</a><br />
<a href="http://ameblo.jp/bitz/">http://ameblo.jp/bitz/</a>（ミラー・サイト）<br />
<a href="https://t.co/6P3h2jtbRk</a>note<br />
underscoreコードリーディング（where）

underscoreに詳しくないので、勉強半分でソースコードを読む。

##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##whereとは

###[underscorejs.orgのwhere](http://underscorejs.org/#where)

こんな説明。
>####_.where(list, properties) 
>Looks through each value in the list, returning an array of all the values that contain all of the key-value pairs listed in properties.

```javascript
_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

```
------------- 
エイリアスは特になし。

リストのすべてのバリューに対して、propertiesに含まれるすべてのkey-valueが含まれるarrayを返却します。


###[underscore.where](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L288)
---------------
コード的にはこのあたり。

```javascript
  _.where = function(obj, attrs) {
    return _.filter(obj, _.matcher(attrs));
  };
```

[_.filter](http://qiita.com/ikasumi_wt/items/b8a9f337fccef74e695a)と_.matcherを用いて、マッチしたarrayだけをフィルタリングして返却する。

_.filterを用いているため、返却値はArrayで返される。
_.matcherはObjectに対して利用できるattrsで定義されているkey-valueと同じものが存在するかを判定できる関数を返す。

[underscore.matcher](http://underscorejs.org/#matcher)

```javascript
matcher_.matcher(attrs) Alias: matches 
Returns a predicate function that will tell you if a passed in object contains all of the key/value properties present in attrs.

var ready = _.matcher({selected: true, visible: true});
var readyToGoList = _.filter(list, ready);
```

[_.matcher](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L1306)

```javascript
_.matcher = _.matches = function(attrs) {
  attrs = _.extendOwn({}, attrs);
  return function(obj) {
    return _.isMatch(obj, attrs);
  };
};
```

_.matcherの中身は_.isMatch関数を返すものなので

[_.isMatch](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L1082)

```javascript
_.isMatch = function(object, attrs) {
    var keys = _.keys(attrs), length = keys.length;
    if (object == null) return !length;
    var obj = Object(object);
    for (var i = 0; i < length; i++) {
      var key = keys[i];
      if (attrs[key] !== obj[key] || !(key in obj)) return false;
    }
    return true;
  };
```


つまり

```javascript
  _.where = function(obj, attrs) {
    return _.filter(obj, function(obj, attrs){
    
      var keys = _.keys(attrs), length = keys.length;
      if (object == null) return !length;
      var obj = Object(object);
      for (var i = 0; i < length; i++) {
        var key = keys[i];
        if (attrs[key] !== obj[key] || !(key in obj)) return false;
      }
      return true; 
    });
  };
```

となっている。
そのため、引数として与えられたobjの中で_.filterでtrueが返ってきたもののみで構成されたArrayが返ってくることがわかる。
Visual Studio Team Servicesで実装されていないBuild Taskを使えるようにする

Visual Studio Team Servicesファンの皆さまこんにちわ。今週のDevOpsハッカソン(12月9日, 10日)のためだけにこのエントリを書きます。本Tipsは、12/9 - 12/12までの間しか意味がありません。

ただし、この手順は、[マイクロソフトが公開しているビルドタスク](https://github.com/Microsoft/vso-agent-tasks/tree/master/Tasks)のうち、自分のプロジェクトから見えないタスクを組み込む手順としては有効かもしれません。それはこの記事とまったく同じ手順です。

Visual Studio Team Servicesで、現在(2015/12/8)Linux上でBuild Agentを実行するとCopyPublicBuildArtifactという、ビルドタスクが動きません。これは、ビルドタスク間で、ファイルを共有するためのタスクなので、致命的な欠陥です。私のほうでこの問題を発見して、[GitHubのIssue](https://github.com/Microsoft/vso-agent-tasks/issues/901)として報告しており、既にほかの方がPull Requestを送っており、マージされて、今週末後にリリース予定です。

その間、Visual Studio Team ServicesのLinux用Build Agentを使いたい人のための手順です。

[Visual Studio Onlineのビルドタスクを作成する](http://qiita.com/TsuyoshiUshio@github/items/38369fe4fbd603ba0d26)の手順と同様ですが、初めての方のために具体的に書いておきます。

1. VSO Tasksの取得
---

Visual Studio Team Servicesで定義されているビルドタスクは実は[GitHub](https://github.com/Microsoft/vso-agent-tasks)にあります。
このCopy and Publish Build Artifactsの部分にバグがあるので、これを改修してアップロードすれば終わりです。

まず、このリポジトリを取得しておきましょう。Gitがインストールされている前提です。

```
$ git clone https://github.com/Microsoft/vso-agent-tasks.git
$ cd vso-agent-tasks
```

2. tfx-cliのインストール
---
Visual Studio Team Services用のコマンドラインツールをインストールします。

Nodeとnpmがインストールされている必要があります。Windowsの人は[chocolatey](https://chocolatey.org/)をインストールしたのち次のようにインストールしましょう。Macの人はhomebrew等でnodejsを`brew install node`でインストール可能です。

```
$ choco install nodejs.install
```

3. tfs-cliのインストール
----
TFS Cross Platform Command Lineツールをインストールすると、Taskを自作できるようになります。

```
$ npm install -g tfx-cli
```

4. Personal Access Tokenの取得
----
コマンドラインツールが、Visual Studio Team Servicesにアクセスできるように、Personal Access Tokenを取得します。Visual Studio Team Servicesの右上の自分のアカウントをクリック > My Profile > Security > Personal access tokens を選択し、Addのリンクを押して、Access Tokenを取得します。

5. task.jsonの修正
----
今回のバグは、task.jsonというファイルでのCopyPublishBuildArtifacts.jsというファイル指定が小文字になっており、Unix系のOSでは、大文字と小文字を区別するため、このファイルが見つからずエラーになるというものです。
現在のGitHubリポジトリはこの問題が修正済みのようですので、このタスクをアップロードしなおせば、問題は修正されます。

[vso-agent-tasks/Tasks/CopyPublishBuildArtifacts/task.json](https://github.com/Microsoft/vso-agent-tasks/blob/master/Tasks/CopyPublishBuildArtifacts/task.json#L75-L77)

実際には先ほどクローンした、リポジトリから移動します。そしてまずはVSTSにログイン

```
$ tfx login
Enter collection > https://<ここにVSOのアカウント名を書く>.visualstudio.com/DefaultCollection
Enter personal access token > xxxxxxxx
```

このGitHubにあるタスクを自分のVSTSに反映させるのは簡単で、そのタスクのディレクトリに行ってから`tfx build tasks upload`コマンドを
実行して終了です。今回`--overwrite`オプションをつけているのは、既にそのビルドタスクは、VSTSに登録済みなので、それを上書きしてもらうために
つけています。

```
$ cd Tasks\CopyPublishBuildArtifacts
$ tfx build tasks upload --overwrite
TFS Cross Platform Command Line Interface v0.3.6
Copyright Microsoft Corporation
> Task path: .
.

Task at C:\Users\tsushi\Codes\vststasks\vso-agent-tasks\Tasks\CopyPublishBuildArtifacts uploaded successfully!
```

という感じですね。これで、CopyPublishBuildArtifactsのバグが修正されます。ほかにもいろいろな面白さそうなビルドタスクがあるので、自分で試してみるのもいいかもしれませんね。

ただし、正式リリースされていないものなので、問題はあるかもしれませんし、Windows系でのみしか動かないものもありますのでご注意ください。
その見分け方は、.js(Javascript)と.ps(PowerShell)が両方あるか否かで判断すればいいです。たまに.psファイルしかないものがあって、そのタスクはWindowsでしか動かないと思ったほうがいいです。（エラーメッセージも出ないので最初はびっくりするかもです）

では、ハックをお楽しみください！
THETA m15で撮った写真をUnityを使ってOculusRiftで見る方法

[CirKit Advent Calendar 2015](http://qiita.com/advent-calendar/2015/cirkit)8日目の記事です。
初めましての人ははじめまして。CirKitでエンジニアやっております306sanです。本当は今日書く予定はなかったんですが~~上司に書かないと給料出さないぞと脅されて~~いいネタを見つけたので紹介します。タイトル通りWeb全く関係ないです。VRです。

## 目的
+ THETAでとった全天周画像をOculusでみたい

## 環境
些細な環境の違いで不具合が起きるのでVR開発者なら動いた環境はきちんと載せましょう。

+ Unity:5.2.3f1
+ OculusSDK:0.8.0
+ OS:Windows8.1pro

## 方法
### 事前準備
+ Unity 伊藤さんがつくられた[天球モデル](https://twitter.com/warapuri/status/480915916645863424)をDLしてください。


1.THETAで撮影する。この時スマホアプリで撮影してスマホに残しておくといいです。
2.THETAで撮影した画像を、PCに転送する。
3.Unityを立ち上げて、新規プロジェクトを作成する。
4.先ほどの天球モデルと画像をインポート。
5.天球モデルをHierarchyに追加し、Scale (10, 10, -10) と Position(0, 0, 0) に値を変更。
6.天球モデルのShaderをUnlit/Textureに変更し、TextureにTHETAの画像をドラッグ&ドロップ。
7. [Edit]→[Project  Setting]→[Player]で`Virtual Reality Supported`をチェックをいれてオンにする。
8. あとは、OculusRiftを繋いで実行してお楽しみください

### 余談
+ THETAの新型THETA Sは全天周動画のライブストリーミングが可能です。これからのVRの発展に寄与しそうですね。
+ Unity使って動画の再生方法がわからないので教えていただけると嬉しいです。

#### 参考にしたサイト（以下感謝）
+ [OculusとTHETAでリアルタイムの旅をしよう〜その3](http://qiita.com/sandinist/items/6e2b9856c9273d580fa2)
JavaScriptでループ中にスリープしたい。それも読みやすいコードで

# JavaScriptのループの中でスリープしたい

JavaScriptを使っている時に、ループの処理の中でスリープをかけたい場合ってありますよね。
外部のAPIを繰り返し呼び出すときとか。

しかし、JavaScriptには他の言語でよくある「**sleep()**」のようなものはありません。
ですので、こんな感じで書くことはできません。

```if_js_had_a_sleep.js
// 注意：動きません！
for (var i = 0; i < 10; i++) {
    doSomething();
    sleep(1000); // 1000ミリ秒スリープする
}
```

# そこでsetTimeout()の出番

JavaScriptで一定時間後に処理を実行したい場合は、setTimout()を使います。

> setTimeout(func, delay);

「なるほど！そうかsetTimeout()か！それじゃ、こう書くんだね！」
と、早とちりをして以下のように書いてしまうことがけっこうあります。

```setTimeout_bad_sample.js
// 注意：これも狙った動きはしません！
for (var i = 0; i < 10; i++) {
    setTimeout(doSomething, 1000);
}
```

残念ながら、このコードは1秒おきにdoSomething()が10回呼ばれるのではなく、
1秒後にdoSomething()がまとめて10回呼ばれるだけです。

正しく、1秒おきにdoSomething()を10回呼ぶには以下のように書く必要があります。

```setTimeout_valid_sample.js
function doSomethingLoop(maxCount, i) {
  if (i <= maxCount) {
    doSomething();
    setTimeout(function(){doSomethingLoop(maxCount, ++i)}, 1000);
  }
}

doSomethingLoop(10, 0);
```

これなら、正しく動きます。
※setInterval()を使った方法は、下の@3upjpさんのコメントを参照。

# setTimeoutによるスリープ処理の問題点(と私が思うもの)

が、上述のコードはなんと言うか、ひじょーーに読みづらい。
パッと見でこれが、

- ループで
- doSomething()を1000ミリ秒ごとに10回呼び出したりしている

処理だと理解できますか？

経験豊富なJavaScriptエンジニアの方は読み取れるかしれません。
ですが、実現したいことに対して、あまり直感的なコードではないことは同意していただけるのではないでしょうか。

# で、

前置きが長くなりました。

- もっと直感的に、通常のループ処理っぽく書きたい！
- 再帰処理とかあんまり書いていると、頭がオーバーフローしてしまう

と思い、以下の様な関数を書いてみました。

```loopSleep.js
function loopSleep(_loopLimit,_interval, _mainFunc){
  var loopLimit = _loopLimit;
  var interval = _interval;
  var mainFunc = _mainFunc;
  var i = 0;
  var loopFunc = function () {
    var result = mainFunc(i);
    if (result === false) {
      // break機能
      return;
    }
    i = i + 1;
    if (i < loopLimit) {
      setTimeout(loopFunc, interval);
    }
  }
  loopFunc();
}
```

この関数を使って、スリープ付きのループ処理を書いてみます。

```loopSleep_client_sample.js
// 例（10回ループを、1000ミリ秒毎に実行します）
loopSleep(10, 1000, function(i){
  doSomething();
});
```

どうでしょうか？
私としては、「単純にsetTimeoutと再帰呼び出しを組み合わせたやり方」よりも、だいぶ分かりやすく書けるようになったと思います。

continueやbreakと同等のことをしたい場合は、以下のように書きます

```loopSleep_client_sample2.js
// 例（10回ループを、1000ミリ秒毎に実行します）
loopSleep(10, 1000, function(i){
  if (i == 7) {
    // breakと同等
    return false;
  } else if (i % 2 == 0) {
    // continueと同等
    return;
  }
  doSomething();
});
```


以上です。


問題点、改善点などありましたらご指摘ください！
System.global (ES.next stage1)

## はじめに

 * [JavaScript stage 0,1,2,3 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/esnext) の記事です
 * [System.global](https://github.com/tc39/proposal-global)を紹介します
 * 記事執筆時で stage1 の仕様です

## これはなに

JS実行環境によってまちまちな名前を付けられている the global object (グローバルオブジェクト)をどんな環境でも一意の名前で取得できるようにするためのものです。

```js
System.global;
```

※「グローバルオブジェクト(the global object)」は`Date`とかの組み込みオブジェクトである「[グローバルオブジェクト（global objects)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)」とは異なります。グローバル変数の全てを自分のプロパティとしてもつ特殊なオブジェクトの方です。日本語にすると同じになってしまうのでややこしいですが、この記事では以後前者を指します。

## ES2015以前

`window`,`self`,`flame`,`global`,`d8`,`jsc`...環境によってまちまちの名前で取得可能でした。そのためコードの可搬性が低くなってしまっていました。

グローバルオブジェクトを簡単に取得できるイディオムとして知られていたのは次のコードです。

```js
var g = Function("return this")();
```

参考；[[JavaScript] グローバル変数とグローバルオブジェクトを取得する方法](http://qiita.com/LightSpeedC/items/ce4b46cbdefd168b30ef)

ところがChromeAppで実行する場合、CSP（コンテンツセキュリティポリシー）違反を起こすコードになってしまい使用不可能でした。proposalのページでも紹介されている [es6-shim](https://github.com/es-shims/es6-shim/blob/master/es6-shim.js#L171) では以下のようなコードでそれを回避しています。

```js:github.com/es-shims/es6-shim/blob/master/es6-shim.js#L171
var getGlobal = function () {
    // the only reliable means to get the global object is
    // `Function('return this')()`
    // However, this causes CSP violations in Chrome apps.
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};
```

今後JSの実行系が増え、IoTなどでも使われるようになる場面が増えた場合、グローバルオブジェクトがどのような名前になるかわかりません。あらたな環境が増えるたびに、上記の泥臭いコードを書き換えてゆくのは得策ではありません。

## ES.nextでは

どんな環境が増えようとも同じ名前で取得できるようにしよう、というのが`System.global`です。この名前ならば、将来どんな箇所でJSを動かそうともグローバルオブジェクトが確実に取得できるようになり、コードの可搬性が上がる上にメンテナンスする必要も無くなります。

ECMAScriptは今後、毎年アップデートされていく予定だそうなので、新仕様への対応が各実行系で今以上にバラバラになっていく事が予想されます。下位互換を維持するpolyfillは有効ですが、大半の場合グローバルオブジェクトに手を入れて新しい仕様に手を入れていく事になると思われるため、polyfillが書きやすくなる`System.global`はES.nextの随時アップデートのためにも重要だと言えるでしょう。

## 注意点

[polyfillが用意されている](https://github.com/tc39/proposal-global/blob/master/polyfill.js)のですが、ページで指摘されている問題点の`Function("return this")()`が使われているコードのため、ChromeAppで使えません。あるいみこれ以上無いサンプルケースになっていますが、一体なぜなんでしょうか。

stage1なので名称もこの名前になるかすらも分かりません。かつてES4という規格を丸ごと闇に葬り去った実績があるのでECMAScriptの未来絵図はあまり信用せず、現時点では話半分に見ておくのがいいと思います。
Railsで立ち上げたローカルの開発用サーバーをスマホで確認したいとき

## 参考
[RailsアプリケーションをLAN内に公開する - Hack Your Design!](http://blog.toshimaru.net/publish-rails-app-in-lan/)

`$ bundle exec rails server --binding=0.0.0.0`
で立ち上げる必要がある。

後は同じネットワークに入って、
ifconfigでローカルIPアドレスを見て、
iPhoneなどでアクセスすればよい。

foremanとかで立ち上げてるときは、foremanの設定ファイルをいじるとか、foremanをやめて個別にいろいろ立ち上げて、railsは 0.0.0.0を指定して立ち上げてあげよう。
Extreme Home Hackレポート

#Extreme Home Hack
Extreme Home Hack（EHH）は、昨今の「スマートホーム」事情を、極端な（おかしな）視点で見つめなおすイベントで、11月25日にアイデアソン、12月5日、6日にハッカソンが開催されました。
アイデアソンの模様は主催のCHANGE-MAKERSさんのサイトにアップされていますので、そちらをご覧いただくとして、Day 2,3 ハッカソンの模様を速報的にレポートいたします。
（本格的なものはCHANGE-MAKERSさんから後日アップされますので、そのつなぎですw）

![IMG_2631.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/ed6bcefa-8175-110a-1c56-9aaccedbb489.jpeg)

「Extreme Home Hack」アイデアソン開催レポート
https://www.change-makers.jp/post/10601

ハッシュタグ #ehh2015

##提供アイテムがおかしい！
だいたいハッカソンというと、APIだったりSDKだったり、メイカソンなら各種デバイスなどが提供されるものですが、EHHはそれらに加えて、ニトムズさんから「コロコロ」、クレハさんから「クレラップ」や「キチントさん」などを提供していただきました。
参加者は最初「？？？」のようでしたが、多くのチームがこれらを使って作品を制作していました。
そう、「なんでいままでこれらをハックしなかったんだろうか！」という思いが会場に充満していました。

![IMG_3817.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/edc3738a-2013-e486-bdc7-6f0035a4a3db.jpeg)



##36個Hueハック！
ハッカソン会場となったDMM.make AKIBAにはかなりの数のPhilips Hue電球が導入されているのですが、今までこれらを制御したことはなかったとのこと。ただの電球だったわけですね。（もったいない）
その制御に挑んだのが、6日目の記事を担当したajimiteiさん。
詳しい内容は記事をご覧いただくとして、最初はみんな生暖かい目で作業を見守っていましたが、36個が色相のグラデーションで点灯したときは、さすがにみんな「おー！」ってなりました。
Bridgeで制御できるのが50個とのことだったので、限界に近いところまでがんばったということですね。その時のajimiteiのドヤ顔が、瞳を閉じるたびに浮かんできます。

![IMG_2620.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/f5f4d5f1-072d-9044-d466-823bb2d7ad37.jpeg)

DMM.make AKIBA の hue をハックしてみた
http://ajimitei.blogspot.jp/2015/12/dmmmake-akiba-hue.html

##コロコロハックの乱舞！
今回のEHHでは6チーム中3チームがコロコロを使った作品を完成させました！
詳細はCHANGE-MAKERSさんの記事で紹介があると思いますので、写真のみでお伝えしたいと思います。
あと、コロコロ３チーム中、2チームからB'zの「Ultla Soul」が流れていましたが、なんなんでしょうか？

![IMG_2628.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/751743d6-399c-3520-fe31-b4ee40be3da8.jpeg)

![IMG_4451.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/19b490c6-e268-c027-cd22-d0218f285cb7.jpeg)

![IMG_2639.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/aa0a7c04-7ef6-73a1-c27c-e30212b0d79d.jpeg)

##まとめ
コロコロとB'zぱない！

##またやりたい！
もし、こんなハッカソンでも参加したい！という方がひとりでもいたら、また是非開催したいです。
ちょっとでも興味をもっていただければ、Doorkeeperのコミュニティに参加お願いしますー！
https://exhh.doorkeeper.jp/

![IMG_4585.JPG](https://qiita-image-store.s3.amazonaws.com/0/63707/c030c697-63bc-e382-f06e-518f5103e6c0.jpeg)
SlackにアニメーションGIFのEmojiを登録する

SlackにアニメーションGIFのEmojiを登録します

## <i class="fa fa-image" style="font-size:1em;"></i> Emojiの登録
SlackへのEmojiの登録については下記記事を参考にしてください。

* <i class="fa fa-external-link" style="font-size:1em;"></i> <a href="http://tbpgr.hatenablog.com/entry/2015/12/06/225130" target="_blank">Slackで個人アイコンをEmoji登録するとホクホクできる話 - Tbpgr Blog</a>

## <i class="fa fa-video-camera" style="font-size:1em;"></i> アニメーションGIF
SlackのEmojiはアニメーションGIFも登録可能です。

`berkus/slack-emoji - GitHub` によさ気なアニメーションGIFがたくさんあるので
この中にあるgifを一気に登録してみます。

* <i class="fa fa-external-link" style="font-size:1em;"></i> <a href="https://github.com/berkus/slack-emoji" target="_blank">berkus/slack-emoji - GitHub</a>

おっ○いアニGIFとかも混ざってるので、そういうのは除外しますけども。

![anigif.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/9bb70c53-c3f2-abb2-4ea6-a54e619aa5d6.gif)

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> <a href="http://tbpgr.hatenablog.com/entry/2015/12/06/225130" target="_blank">Slackで個人アイコンをEmoji登録するとホクホクできる話</a>
* <i class="fa fa-external-link" style="font-size:1em;"></i> <a href="https://github.com/berkus/slack-emoji" target="_blank">berkus/slack-emoji - GitHub</a>
Cloudera Manager API で NameNode HA

[Cloudera Manager Advent Calendar 2015](http://qiita.com/advent-calendar/2015/cm)の8日目です。

#はじめに
本番環境での作業に備えてNameNode HA環境を使って検証をしたい、でも構築が面倒ということ、あると思います。私も稀に良くあります。
そんなときもAdvent Calendarの[4日目](http://qiita.com/d1ce_/items/1c1cdc7272594e3997dd)に紹介されているようにCloudera Managerを使うことでとても簡単にHA化することができます。

まあ、でもGUIじゃなくてCUIからワンステップで終りにしたいんだ、という向きのためにサンプルとしてNNをHA化するスクリプトを用意してみました。

#前提条件
- 4 ノード以上のクラスタ
- ZooKeeperが起動していること（1台:デフォルトでサービスを導入してある状態）
- HA化されていないHDFSが起動していること

なお、動作確認はClouderaManager/CDH共に5.5で行っています。

#やること

特に編集の必要がなければ下記を実行すればHA化されるかもしれません。
````
curl -l https://gist.githubusercontent.com/azurecube/6fe941e7297c64c73ec2/raw/82241f53ddd046cdb211ae463050eaddc700a169/nnha.sh > nnha.sh
bash ./nnha.sh
````

スクリプトでやってることはZooKeeperのロールを増やしてからNameNodeHAを有効にしている、というものになります。
ちなみにNameNodeのHA化は専用のAPIが用意されていてでさくっと実行できるようになっています。便利!

実行前の注意点としては下記あたりかと
- USERNAME/USERPASSは使用しているCloudera ManagerのAdminユーザのものに変更(default admin/admin)
- ロールの配置はスクリプトのはじめのコメントにある下記の形で固定

````
# !!Note Please execute this on more than 4 node cluster!!
# Setting HA as following
# node1: Active NN zk1
# Node2: Standby NN jn1 zk2
# Node3: jn2 zk3
# Node4: jn3
````

サンプルなので、とりあえず実行してみて、動いたらお好みに併せて調整してみてください。

#おわりに
Cloudera Managerの記事なのにCloudera Managerのスクリーンショットがない、だと。。。
というのを目指してたのですが、[3日目](http://frkout.hatenadiary.jp/entry/2015/12/03/174407)にすでにもっていかれてるのを把握してしょんぼりしながら書いてます。

NameNode HAは本番環境ではかかせない機能なので、検証の際にも構成しておきたいことはあると思います。初めて構成する場合などは[4日目](http://qiita.com/d1ce_/items/1c1cdc7272594e3997dd)の記事を参考にするのをおすすめしますが、たくさん構成しすぎて飽きたころにこの記事を思い出していただければ幸いです。
luigiのon-memoryでのデータ受け渡しの非効率さについて

[luigiでパラメータチューニング](http://qiita.com/yanagi3150/items/66f3681b5356edac645a)のコメントにて「on-memoryの受け渡しは luigi.mock でできそう」という情報を頂戴いたしまして、それを実際にやってみたよの話。
ただまあ、mockって名前からしてファイルI/Oを疑似的にon-memoryでやっているようで、そんなに効率は良くないだろうなあとは思っています。いました。

##on-memoryでのデータ受け渡しコード

今回利用したコードは以下。
https://github.com/keisuke-yanagisawa/study/blob/20151208/luigi/mock_test.py
``python mock_test.py main --usemock``でmock利用バージョンを、
``python mock_test.py main``でmock不使用バージョンを走らせることができます。

見ればわかるかと思いますが、"1"が10000000個、カンマ区切りで並んだcsvを作成し、それを読み込み、文字数をカウントするコードになっていまして、最終的な出力は19999999になります。
配列を作成する時間もあるのですが、まあ大体こんなんでええやろ精神です。実際、これで以下の時間計測で差がでましたし。

##時間計測結果
さくさくっと結果を示します。今回は、timeコマンドを利用して3回時間を計測してみました。

|       | luigi.LocalTarget | luigi.mock.MockTarget |
|:-----:|------------------:|---------------------:|
| 1回目 |       10.952 sec. |          29.879 sec. |
| 2回目 |        7.829 sec. |          30.883 sec. |
| 3回目 |       11.137 sec. |          27.766 sec. |

はい、異論はないですね。
mockとはいえ、こんなに遅いとは思っていませんでした。[本家の説明にあるように](http://luigi.readthedocs.org/en/stable/api/luigi.mock.html)、テストをする用の仕組み、って感じですね。

というわけで、普段使いの時にはガンガンファイルを書き出しちゃいましょう。
いい感じでレスポンシブにボタンが増減するLinkPagerウィジェット

いくら Bootstrap でレスポンシブだといっても、なにも考えてないと ListView でページャーがこう

![page13.png](https://qiita-image-store.s3.amazonaws.com/0/11525/789e1fb5-58e0-e6f3-4156-648b7167f28f.png)

なって、幅が足りないとこう

![page13-bad.png](https://qiita-image-store.s3.amazonaws.com/0/11525/a01d1092-acda-631b-5a4f-e2e148fe31b2.png)

なりますよね。プギャーって。

これを、HTML出力を分岐しないで同じのを表示したままボタン数調整したい。こうです

![page5.png](https://qiita-image-store.s3.amazonaws.com/0/11525/5e3d86eb-0e64-7827-5db8-57e78286ac4d.png)

はい、できるウィジェットを作りました。

https://gist.github.com/tanakahisateru/d198092ff42e53100d1e

標準LinkPagerにCSSクラスをばらまくだけです。

実装に無駄なコードが多いのは元の設計のせいですね。(Gistをインラインで表示したい)

適用すると DOM がこうなります。

![dom1.png](https://qiita-image-store.s3.amazonaws.com/0/11525/25ad065d-6750-eb0c-cd02-c70454a9d582.png)

設定によっては...

```php
'pager' => [
    'class' => ResponsiveLinkPager::className(),
    'maxButtonCount' => 13,
    'pageCssClassButtonCountMap' => [
        'hidden-md' => 11,
        'hidden-sm' => 9,
        'hidden-xs' => 5,
    ],
],
```

![dom2.png](https://qiita-image-store.s3.amazonaws.com/0/11525/16e4fde5-ea7a-cbca-2d36-5d5691abb022.png)

かなり器用にレスポンシブな感じ。うまい具合に `active` が当たってるボタンを中心にして、トータルボタン数が指定通りの数になってますね。

短いアルゴリズムでおいしい結果が得られました。Yii 以外でも Bootstrap 使ってるなら、こいつと同じように表示コントロールしたらいいんじゃないですかね。
【SpriteKit】で音楽を流す


アプリのによく使われる音楽について書いてみます。

※QiitaやGitHubの利用も初めて、XcodeもSwiftも初心者なため、おかしい表記や表現が出てくるかもしれませんが、自分のペースで記事を公開できたらと思っております。
暖かい目線でご指摘、ご指導くださると助かります。これからよろしくお願いいたします。

##BGMを設置

以外に簡単だったので驚きました。
多分細かい調整は色々できると思います。※[参考リンク](https://developer.apple.com/library/prerelease/ios/documentation/SpriteKit/Reference/SKAudioNode/ "SKAudioNode Class Reference")

シンプルに『music.mp3』を『GameScene.swift』ファイルと同じ階層においてから以下のコードを書きました。

```GameScene.swift
// 音楽を追加
let backGroundMusic = SKAudioNode(fileNamed: "music.mp3")

addChild(backGroundMusic)  // Nodeに追加
```

定数を使用しないならもっとシンプルにセットできます。


```GameScene.swift
// 音楽を追加（シンプル版）
addChild(SKAudioNode(fileNamed: "music.mp3"))  // Nodeに追加
```

またの機会に『SKVideoNode』についても試してみたいと思います。
FactoryGirlを超初心者が書くときの注意点


## はじめに
安定的なテスト環境を構築するための第一ステップとしてFactoryGirlを導入して書いてみたが、書いていくうちにごちゃごちゃになっていってしまった。今、また最初からやり直すならこうやるのだろうなと思うことがあったのでメモとして残しておこうと思います。


## よく使うもの
「create」 whereなどDBからデータを取得したいときに使用する
```FactoryGirl.create(:users)```

「build」 DBには保存されないのでバリデーションのテストのときに使用したりする
```FactoryGirl.build(:users)```

「sequence」 連番を使って重複しないデータがほしいときに使用する

```
sequence :mail do |n|
  "person#{n}@example.com"
end
```

「trait」 引数のオプションを付けるイメージで任意のコードを実行させたいときに使用する

```
trait :with_mail do
  mail "hogehoge@hoge.co.jp"
end

```

「associations」 多:多 や 多:1 などを表したいときに使用するbelongs_toのイメージ
```association :mail```
ちなみにfactoryの名前とbelong_toの名前が一緒のときは```mail```と書いておくだけでよい！またhas_manyのときは

```
after(:create) do |user|
  user.user_hobies{[FactoryGirl.build(:hoby)]}
end
```

のようにして対応したりできます。


「参考URL」
http://tech.grooves.com/entry/2015/04/28/173025
http://qiita.com/muran001/items/436fd07eba1db18ed622



## 実用例
就職支援サイトの運用時を例に書いてみる。
最初にどういうモデルがあるか。。。
今回は

```
ユーザー  クライアント
user     client
         job_offer
         job_apply
```

みたいのを想定してみる。ここで結構重要になると思っているのが各々の関係性である。冒頭で「やり直すなら・・」と思っていたのがこの部分です笑。手当たりしだいで進めていった結果「こう作っていればよかった」みたいなことに後々なってしまいましたので。。

大まかにモデルの関係性は以下のようになると思います。

・企業は求人をいくつも出している。
・ユーザーはその求人に対して応募をいくつも出せる。
・１つの求人に対しては応募は一回まで

<img width="892" alt="スクリーンショット 2015-12-08 21.31.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/74580/20ca8de8-19c0-9252-f944-ca2d83e20afa.png">


ここからわかるように今回4つのモデルがあったが実質は3つでよい。
絶対作らなければならないオブジェクトは UserとClient、もうひとつJobOffer(JobApplyでも可)である。JobApply(JobOffer)に関しては他の３つから作れる。

ポイントとしては最小単位をFactoryGirlを使用して生成するということ。
既存のサービスにおいてバリデーションなどが複雑だったりして作りにくかったりもするのでこういった対応方法にすると意外とすんなりバリデーションもクリアできます。


## 実際に書いてみる
JobApply Modelに関して

```lang:spec/models/job_apply_spec.rb
describe JobApply do
  context "1.設定したuser/clientでjob_applyが生成できる" do
    example "1.1.1 設定したuser/clientでデータが生成できる" do
      user = FactoryGirl.create(:user)
      job_offer = FactoryGirl.create(:job_offer)
      job_apply = JobApply.create(user_id: user.id, job_offer_id: job_offer.id)
      expect(job_apply).to be_true
    end
  end
end

```

みたいにjob_applyは表現できます。specはここでは触れないのでおいておきます。FactoryGirlについては以下です。

```lang:spec/factories/users.rb
FactoryGirl.define do
  factory :user do
    last_name "HOGE"
    first_name "太郎"
    last_kana "ほげ"
    first_kana "タロウ"
    birthday "2015-12-08"
  end
end

```

```lang:spec/factories/clients.rb
FactoryGirl.define do
  factory :client do
    name HOGE

    trait :with_job_offer do
      after(:create) do |client|
        3.times { FactoryGirl.create(:job_offer, client: client) }
      end
    end

  end
end

```

```lang:spec/factories/job_offers.rb
FactoryGirl.define do
  factory : job_offer do
    sequence(:title) {|n|"テスト#{n}"}

    client #associationをかかなくてもいける
  end
end

```



## まとめ
実際にコードとかを書いてみましたが伝えにくいですねw
テストコードに限ったことではないのですが、僕が大事なんだろうなと思ったのは
図を用いましたが、関係性/設計のところではないかと思いました。
この「関係性を明らかにし、それこそhas_many belongs_toをtrait :with_job_offerで書いてjob_offerのほうではassociationを書く。」を最初におさえて徹底することがコードを書いていく中で後々変なことになることのリスクを最小限にできる方法ではないかと思うので
初めてやる人はおさえておくとよいかもしれません。

以下を見ると比較的簡単に手がつけられると思います。
http://shim0mura.hatenadiary.jp/entry/2014/06/29/002102
http://blog.livedoor.jp/sasata299/archives/51931175.html
やっとわかったこと~ベクトル商空間について~

携帯だから数式貼れないため言葉による説明で終わるけど。数学科でも難しいと言われているらしいベクトル商空間について。ちょっと嬉しかったので忘れないように書いておこう。見やすい体裁とかは全く。

 

世の中の"関係"にはいろいろあるけどある線形空間Vとその部分空間Wが存在する時

v ∼ w ⇔v − w ∈ W

として"~"をV上の同値関係ということにする。言い換えるとある二つのベクトルの差分がWに乗ってるときはこの"~"で表そうと言っている。つまり例として"xyzの座標の場合z要素が同じ原点からのベクトルは全て同値だとみなす"みたいな。

 

次に

V/W ⇔ V/ ∼

と定義。これはただの定義。で問題なのはここで大体の数学書は終わってしまう。ここから先はこの空間の線形性がどうこう言われ始めるのでここだけをテスト前に慌てて100回くらい読んでもわからない。

 

本当は"V/~"ががなんなのかわかってないから前に戻る必要がある。商集合のところだ。

X / ∼ = { ̄x | x ∈ X }

ただし 

 ̄x = { y ∈ X | x ∼ y }   

この定義が超重要。本当はちゃんと順序良く勉強していれば重要もクソもないのだが。

つまり"X / ~ "とかいうのは

 

xと"同値"なyの集合(その場合xを代表元として ̄xで表す)があることはわかるだろう。そのxが自由に動いたときの各集合、の集合

 

のことだ。

なんで商空間がわかりにくいかというと、これ議論の前に大体整数に関して商集合が定義される。されてない教科書(僕の❤️)だと死ぬ。例えばmod 3に関して

Z≥0/ ≡ ⇔  {¯0, ¯1, ¯2}

Z≥0 の ≡ による商集合

というようなことが書かれていたりする。

¯0とかは0を代表元とする「3で割った余りが0の集合」のことである。

" / ≡ "というまたしても「”関係”による割り算みたいなの」が出てくるのだが、何やらよくわからんと言って飛ばしてしまうと、後のベクトル商空間が一切わからなくなってしまう。さらに ”/”,”~”など一見見慣れている記号が板書などで示されても”新しい意味”で使われていることがわかりにくいのだ。
あと

V / W = { x+W | x∈V } 

とかいう定義を見せられると「え、結局V全部じゃね？」ってなって死ぬ。本当はWが少しずつVの中でずれているという感じだからだ。そのずれ方はVの基底からWの基底を除いたものだ。集合がずらっと並んで結局V全体になっているのがわかるだろうか。ちょっと微妙な説明。
本当はもっと集合について学ぶべきなんだろう。

 

[線形代数：商空間 - 商空間を数学的定義ではなく、噛み砕いた言... - Yahoo!知恵袋](http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1111378291)

>商空間 V/W とは、V における W の効果を０につぶしたものということです

 

ここまでくるとこの説明というのは納得がいく。Vに対して”~”(つまりWの持つ基底方向に幾ら変化があってもとそれはこの場合において同値なんですよという関係)を適用させることをWの効果(基底)を”つぶす”と表現しているのだろう。

まぁもう蛇足はやめるが色々な説明を統合するとやはり参考書の定義というのが一番簡潔で正しいなっていう気持ちが持てる。
要は線形代数を勉強していて商空間がわからない人は商集合についてまずちゃんと勉強すればわかりますよ、というお話。以上、物覚えが悪いので逆に教える場合役に立てるかなと思った次第。





※若干defのところとか表記が微妙なところあるのでそこはお許しを
※続きません(テストです)
※あと間違ってたら指摘とか是非
Ext JSのテーマ遍歴 その２

こんにちは、江川です。
前回に引き続き、ExtJSのテーマの遍歴を振り返ってみます。
今回は、各コンポーネントに的を絞って見てみましょう。

## グリッド

Classic

![スクリーンショット 2015-12-08 14.37.07.png](https://qiita-image-store.s3.amazonaws.com/0/20136/0b4158c9-92d1-e819-af65-295359fa7bd0.png)

Neptune

![スクリーンショット 2015-12-08 14.38.25.png](https://qiita-image-store.s3.amazonaws.com/0/20136/b855a5f6-bc8c-1b1d-6673-7abe43f09941.png)

Crisp

![スクリーンショット 2015-12-08 14.38.53.png](https://qiita-image-store.s3.amazonaws.com/0/20136/4ad41d95-ac44-2be4-4a54-5fd6bbf418bf.png)


Triton

![triton_grid.png](https://qiita-image-store.s3.amazonaws.com/0/20136/5d3ade6f-1532-15d6-4fab-22d8b2a5e7c8.png)

Gridは目立った変化はありません。
Tritonでは選択した行が黄色くハイライトされるようになりました。


## タブパネル

Classic

![スクリーンショット 2015-12-08 14.39.41.png](https://qiita-image-store.s3.amazonaws.com/0/20136/e70a3edc-e9cf-4125-e98e-f1d54d4d2891.png)

Neptune

![スクリーンショット 2015-12-08 14.40.45.png](https://qiita-image-store.s3.amazonaws.com/0/20136/2ff06b88-5111-4c10-70c4-e97de5016625.png)

Crisp

![スクリーンショット 2015-12-08 14.41.34.png](https://qiita-image-store.s3.amazonaws.com/0/20136/72cd52ce-4b9d-4005-4e20-e333445c5c39.png)

Triton

![スクリーンショット 2015-12-08 14.42.35.png](https://qiita-image-store.s3.amazonaws.com/0/20136/79621cb3-79e1-dde5-2e4c-da8f4fe8a8ec.png)

テーマを重ねるごとによりシンプルになっている印象を受けます。
Tritonでは2色だけの構成になり一切の無駄を排除したレイアウトに。今流行の断捨離でしょうか。

## ウィンドウ&ボタン

Classic

![スクリーンショット 2015-12-08 14.43.59.png](https://qiita-image-store.s3.amazonaws.com/0/20136/be898e91-3cb3-17b6-ab9a-e63a1ce05b99.png)

Neptune

![スクリーンショット 2015-12-08 14.44.35.png](https://qiita-image-store.s3.amazonaws.com/0/20136/86253a6f-a280-7e31-b50b-9ae3cdf868d8.png)

Crisp

![スクリーンショット 2015-12-08 14.44.59.png](https://qiita-image-store.s3.amazonaws.com/0/20136/3a59350d-1f9a-b9b2-7941-e18b1b57b335.png)

Triton

![スクリーンショット 2015-12-08 14.45.24.png](https://qiita-image-store.s3.amazonaws.com/0/20136/47f8b997-ba92-f177-fff5-68c8d715bf83.png)

バージョンを重ねるごとにボタンがフラットになってきているようです。
Tritonではウィンドウのヘッダーやボタンが少し大きめに。


## ツリーパネル

Classic

![スクリーンショット 2015-12-08 14.46.14.png](https://qiita-image-store.s3.amazonaws.com/0/20136/9acb03fd-f1b1-660f-0e50-d4c4eca8a734.png)

Neptune

![スクリーンショット 2015-12-08 14.46.44.png](https://qiita-image-store.s3.amazonaws.com/0/20136/942acbb0-e32d-490f-0c36-16da1c1ff9f8.png)

Crisp

![スクリーンショット 2015-12-08 14.47.05.png](https://qiita-image-store.s3.amazonaws.com/0/20136/f7d0b768-035f-d8be-712e-00dabefb18c0.png)

Triton

![スクリーンショット 2015-12-08 14.47.21.png](https://qiita-image-store.s3.amazonaws.com/0/20136/59231418-9955-190c-8b80-1e127b16881c.png)

ClassicからNeptuneで大きく変わっています。
ノードのアイコンも丸みを帯びた柔らかい印象になってきています。


以上、コンポーネントごとのデザインの移り変わりを見てみました。
次回も今回紹介できなかったコンポーネントのデザインを見てみたいと思います。
Swift WebViewでBasic認証

# Basic認証が必要なWebページをiOSのWebViewで表示する
Swift版のサンプルが見つからなかったので、共有します。
（あったら、シカトしてください。）

# Basic認証処理について
**Basic認証**とは、
ユーザ名とパスワードは暗号化やハッシュ化がされていない状態で送信する認証方法です。
**一番簡易な方法で、盗聴・改ざんされやすい。**

# WebとiOSの挙動の違い
Webの場合、ブラウザで表示しようとすると、
Basic認証が必要な場合、ダイアログが表示され、
ユーザ名とパスワードを聞かれますが、

iOSネイティブのWebViewで表示しようとすると、
真っ白で何も表示されませんでした。
didFailLoadWithErrorも呼ばれていないようです。

# 実装方針
NSURLConnectionを利用する例を記載します。
**iOS9で非推奨なので、iOS9以上サポートする方は、NSURLSessionをご利用ください**

# サンプルコード

```
class ViewController: UIViewController,UIWebViewDelegate {

    let userId = "xxxx"
    let password = "yyyyyyyy"
    let reqestUrl: String = "http://xxxx/yyyy/zzzz"

    @IBOutlet weak var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.delegate = self
        registerCredential()
    }
    
    func registerCredential() {
        let connection = NSURLConnection(request: NSURLRequest(URL: NSURL(string: reqestUrl)!), delegate: self)
        connection?.start()
    }
    
    //MARK:- NSURLConnection
    func connection(connection:NSURLConnection!, willSendRequestForAuthenticationChallenge challenge:NSURLAuthenticationChallenge!) {
        let creds = NSURLCredential(user: userId, password: password, persistence: NSURLCredentialPersistence.Permanent)
        challenge.sender?.useCredential(creds, forAuthenticationChallenge: challenge)
    }
    
    func connectionDidFinishLoading(connection: NSURLConnection) {
        webView.loadRequest(NSURLRequest(URL: NSURL(string: reqestUrl)!))
    }
    
    /**
     認証が必要な場合に呼ばれるメソッド
    */
    func connection(connection: NSURLConnection, didReceiveAuthenticationChallenge challenge: NSURLAuthenticationChallenge?){
        
        //パスワードを間違えると無限ループするため
        guard challenge?.proposedCredential == false else {
            connection.cancel()
            return
        }
        let credential = NSURLCredential(user: "user", password: "password", persistence: NSURLCredentialPersistence.ForSession)
        challenge?.sender?.useCredential(credential, forAuthenticationChallenge: challenge!)
    }
}
```
# 解説
認証が必要なページを表示しようとすると
「didReceiveAuthenticationChallenge」が呼ばれるようです。

ちなみに、Basic認証を間違えると、無限ループするので、
既に設定されている場合は、キャンセルしてしています。

# まとめ
Basic認証をあまり使う機会はないかもしれませんが、
誰かの参考なれば幸いです。
今度Digest認証もやってみようと思います。

# さいごに
間違っている箇所があれば、優しい方教えて下さい。
解像度に応じて設定を変える

解像度に応じて設定を変えたいということがあります. フォントサイズや初期フレームのサイズ, 画面分割の閾値などの設定などです. 私のユースケースでは, 解像度が高い(大きなモニタを利用する)場合はフォントを大きく, そうでない場合はそれほどフォントを大きくしたくないというものがあります. 私が使っているその際の設定を示します.


## ディスプレイサイズの取得

(GUI限定ですが)`xdisplay-pixel-width`, `xdisplay-pixel-height`でそれぞれモニタの縦, 横のサイズを取得することができます.


## コード例

横幅が 1900以上の場合はフォントサイズを 14px, そうでない場合は 10pxとしています. 

```lisp
(let ((size (if (>= (x-display-pixel-width) 1900) 14 10)))
  (condition-case err
      (let ((myfont (format "VL ゴシック-%d" size)))
	(set-frame-font myfont)
	(add-to-list 'default-frame-alist `(font . ,myfont)))
    (error (message "%s" err))))
```

## おわりに

解像度の違いにより設定を変える方法を示しました.
Visual Studio Code: Task 機能のクロスプラットフォーム対応

# 概要

Visual Studio Code を一般的なプロジェクトへ適用する際にはしばしば Task 機能で実行するコマンドをプラットフォーム毎に特殊化したい需要に遭遇する。

1つの解決手段としては多くのプラットフォームで動作するシェルプログラムなどを各環境へ導入する事を前提としてしまう事だが、Visual Studio Code の Task にはプラットフォームに応じてコマンドを特殊化する機構が組み込まれており、これを用いればより簡易に Task のクロスプラットフォーム対応を、柔軟に行えるから紹介したい。

# 背景

Windows, Linux, OSX の何れも開発環境としたプロジェクトは近年一般的な多くのアプリケーション開発でも一掃重要性が高まっている。Visual Studio Code のプロジェクト設定として開発環境ごとのクロスプラットフォーム対応をはかることで参加する開発者への負担を軽減しより円滑で柔軟な開発体制を実現したい。

# 方法

次の例では windows 環境では `cmd /c` 、それ以外の環境では `sh -c` が top-level のコマンドと引数として実行される。


```json
{ "command": "sh"
, "args": ["-c"]
, "windows":
  { "command": "cmd"
  , "args": ["/c"]
  }
, "tasks":
  [ { "taskName": "hoge"
    , "suppressTaskName": true
    , "isBuildCommand": true
    , "args": ["ninja -v"]
    }
  ]
}
```

執筆現在使っている vscode-0.10.3 では `"windows"` のほか、 `"linux"` あるいは `"osx"` への特殊化に対応している。

# References

- https://github.com/Microsoft/vscode/issues/981#issuecomment-162862957
    - このチケットの過程で @felixfbecker が教えてくれた。
- [Visual Studio Code: Task 機能に複数の任意のコマンドを簡単に仕込む方法](http://qiita.com/usagi/items/5a0f4edc99420173abb3)