OmniAICreator/Qiita-1.07M huggingface dataset:
Firmataを使ってNode.jsからArduinoを制御してみよう


先日、FirefoxOS端末がKDDIからお披露目されましたよね。その会場にいたしょぼっちです。
私はその会場でひっそりと、Arduinoを使った作品を展示していました。

そこに使った技術を紹介したいと思います。

まずはArduinoでの開発の際に面倒な点をいくつか上げたいと思います。

# Arduinoって面倒じゃね！？
* 普段サーバーサイドしか書かないのにC++なんて書けるか
* そもそもArduinoはC++じゃなくてArduino語だし、書くの面倒だからもうやめたい
* パソコンとのシリアル通信が致命的にダメ。

などなど、あげたらキリがありません。
所詮、レギュレータとUSBドライバの内蔵されたAVRってことですね。
しかし、そんなArduinoを完全にnode.jsで制御するためのプロトコルがあるのです。

# Firmataとは
元々はProcessingとArduinoをつなぐ物として注目されていました。
仕組みとしては、こちら側から操作するPINを指定して上げることで色々できるってわけです。
パソコンにGPIOが直接生えた間隔で操作できるため、とても楽しいです。
問題点としては、パソコンが無いと動かないため、今回、私が設置した際はRaspberry PiをLinuxボードとして動作するように設置しました。

# Firmataの使い方

## ArduinoにFirmataを導入する
ArduinoのIDEから

    File > Examples > Firmata > StandardFirmata
あたりにでもアクセスして、コードをそのままArduinoに焼きます。
以上で設定完了です。
http://yoppa.org/tau_bmaw13/4772.html
導入に関して、ココらへんのサイトが詳しいので、詳細は参考をしてください。

## node.jsの設定
ライブラリとしてjohnny-fiveを使用します。
https://github.com/rwaldron/johnny-five

```
npm init

npm install --save johnny-five
```

とでもやって、一発で導入してしまいましょう。node.jsが入ってなかったり、rootのnode_modulesがrootに入っているとかは知らないです。
あと、Windowsでも動作するかは神のみぞ知るってところです。

```CoffeeScript:app.coffee
j5 = require "johnny-five"
arduino = new j5.Board()
arduino.on "ready", ->
  led = new j5.Led
    pin: 13
  led.strobe(400);
```

これで一先ずLチカは完成です。
https://github.com/ky0615/arduino_show_brightness
私はこれでLCDディスプレイを弄ってみました。
簡単にArduino側の値を取得できるため、その場でサーバーに送ることも可能になります。
また、デバッグもパソコン側で全て出来るため非常に楽です。

最終的にはpm2が動いているLinuxサーバーでこのアプリをデーモン化させれば、USBが再接続されても再び接続することができるので便利ですね。
めんどくせーからzfs用メモ晒す

ZFSメモ

Pool作成
zpool create tank /dev/da0s1
zpool create tank mirror /dev/da0s1 /dev/da0s2 mirror /dev/da1s1 /dev/da1s2
zpool create tank raidz /dev/da0s1 /dev/da0s2
zpool create tank raidz2 /dev/da0s1 /dev/da0s2 /dev/da0s3
pool add tank raidz1 /dev/da0s4 /dev/da0s5

Mountは自動だけど色々変えたい場合
zfs set mountpoint=none tank
zfs create -o mountpoint=/home tank/home
zfs set quota=10G tank/home
zfs destroy zfs_test/home
zpool destroy tank

Snapshot関連
zfs snapshot tank/home@test3
zfs list -t snapshot
zfs rollback -r tank/home@test3
zfs destroy tank/home@test3
zfs clone tank/home@test3 tank/home3
zfs promote tank/home3

RAID1
zpool create tank mirror /dev/da1s1 /dev/da1s2

RAID10
zpool add tank mirror /dev/da1s3 /dev/da1s4

RAID1[HDDx4]
zpool create tank mirror /dev/da1s1 /dev/da1s2 /dev/da1s3 /dev/da1s4
zpool detach tank /dev/da1s3
zpool detach tank /dev/da1s4

DESTROY
zpool destroy tank
zpool destroy -r tank 再帰でなにもかも消すので注意

DISPLAY
zfs list
zpool list 
zpool status [ -v 10 ]とか

zvolとか
zfs rename tank/volumes/v2 tank/volumes/v1
zfs create -V10G z/block
newfs /dev/zvol/block
mount /dev/zvol/block /mnt

簡易速度測定
while true; do dd if=/dev/zero of=./test bs=10m count=5 2>&1 | grep sec | awk '{print $1 / 1024 / 1024 / $5, "MB/sec" }'; done
htmlで画像(img要素)を縦並びにセンタリング(中央寄せ)する方法

![](https://qiita-image-store.s3.amazonaws.com/0/63640/3c15bea4-7567-553d-6fc9-ba1a34e02810.png "logofix.png")

挿入した画像(img要素)が開いているブラウザのウインドウサイズより小さいと横並びになってしまいます。
たいていの写真サイズとノートパソコン程度の画面で見ているのであれば、自動的にカラム落ちして縦並びになっているのかもしれません。ですが、小さい画像を使っている時に突然横並びになっている状態を目の当たりにして混乱してしまう人もいると思います。

そんな時は、まず、どうして画像(img要素)がそのままだと縦に並ばないのか、画像(img要素)の特徴をおさらいしてみましょう。

## imgタグ
- インラインブロック要素
- Image(イメージ)の略
- 画像を表示したい時に使う
- 使用できる画像の形式はgif,jpeg,pngの3種類
- html4から必ずalt属性をつける必要がある

## alt属性
alt属性は画像を表示できない時に代わりに表示するテキストを指定する時に使います。また、読み上げソフトで音声として画像を認識されたり、画像の読み込みに時間がかかる時にはそれまでの間、テキストが代わりに表示されます。
webがどんな人にでも使いやすくあるために、必須条件となったんだと思います。なので、忘れずにつけるようにしましょう。

## 画像(img要素)が横並びになってしまう理由と縦並びにする方法
画像はインラインブロック要素なので、cssで何も指定していないとどんどん横に並んでいきます。なので、これをブロック要素に指定して、縦に積まれるようにする必要があります。逆に言えば、指定さえすれば縦並びにはなります。

```html
<img src="sample.png">
<img src="sample2.png">
<img src="sample3.png">
```

```css
img {
	display: block;
}
```

```RubySlim
img src="sample.png"
img src="sample.png"
img src="sample.png"
```

```SCSS
img {
	display: block;
}
```

## 画像(img要素)をセンタリング(中央寄せ)する方法
縦並びにすることができたら次はセンタリング(中央寄せ)してみましょう。ブロック要素をセンタリングするには上下のmargin(一番外側の幅)の上下を0にして、左右をauto(要素が本来持っている大きさ)をcssやsass(scss)で指定してあげればOKです。

```css
	img {
	display: block;
	marigin: 0 auto;
}
```

```scss
	img {
	display: block;
	marigin: 0 auto;
}
```

## 画像(img要素)にmargin(マージン)を指定していて「margin: 0 auto;」が使えない場合の方法
例えば、画像(img要素)を縦並びでセンタリング(中央寄せ)にしたいけど、画像同士の上下に間をあけたい！という時。上下のマージンを指定してリロードした瞬間に左寄せに戻ってしまいます。
こんな時はどうするかというと、わたしの場合は、liタグで画像(img要素)を囲います。
htmlはそのままでOKです。
liタグはブロック要素なので、cssでmargin: 0 auto;を指定したい所ですが、今回は上下のマージンを指定したいので、それでは二の舞となってしまいます。
なので、親要素であるulタグにtext-align: center;を指定します。
また、liタグを指定すると黒丸が先頭に出てきてしまうので、lisut-style: none;を指定して、黒丸を消しましょう。
これで画像(img要素)がセンタリング(中央寄せ)できたはずです！


```css
ul {
	text-align: center;
}

ul li {
	list-style: none;
	margin: 20px 0;
}
```

```scss
ul {
	text-align: center;
	li {
	list-style: none;
	margin: 20px 0;
	}
}
```

## あれ？少し右にズレてる？
画像が少し右にズレているかも・・・と思った人はいないでしょうか？それは、正解です！見間違いではありません。
実は、bodyタグやulタグ自体にもmarginやpaddingが初期値として与えられているのです。なんででしょうね。まだまだ勉強したてのわたしにとってはちょっぴり邪魔です(>o<)

というわけなので、bodyタグ、ulタグのcssの指定をとっぱらっておきましょう。
htmlはそのまんまでOKでしゅ、

```css
body {
	margin: 0;
}

ul {
	text-align: center;
	padding: 0;
}

ul li {
	list-style: none;
	margin: 20px 0;
}
```

```scss
body {
	margin: 0;
}

ul {
	text-align: center;
	li {
	list-style: none;
	margin: 20px 0;
	}
}

```
goimportsを使ってIntelliJ IDEA でGoのコードのimportを手軽に整理する

## import文を削るのが手間

GoをIntelliJで書いていると、必要なimportは結構よしなに追加してくれます。
ところが、そのimportしたパッケージが不要になった場合（使用してるコードを削除する）、そのimportを削除するところまではやってくれません。
Goは不要なimport文があるとコンパイルが通らないので、自分でimport文を削らなければならずちょっと手間です。

## GoImportsを使う

Goimportsというツールが有ります。
https://github.com/bradfitz/goimports

これを使用することで、不要なimportsの削除、標準パッケージであればimportsの追加をしてくれていい感じに整理もしてくれます。

導入は簡単で

`go get golang.org/x/tools/cmd/goimports `

をすればOK
あとはコマンドライン上で、` goimports -w hoge.go `とするだけでファイルのimportを整理してくれます。
ちなみに `-w ` 付けないと標準出力に吐き出されます。


## IntelliJ IDEAから呼び出す

これでいつでも整理できるようにはなりましたが、都度コンソールから実行するのは不便です。
IntelliJから呼び出せるようにしましょう。
まず一旦 goimportsのフルパスを確認。

`$ which goimports ` -> ` /Users/yourname/bin/goimports `

で、適当な場所（今回は`/usr/local/bin/` )にシェルスクリプトを作成します。

`$ touch /usr/local/bin/goimp.sh `
`$ chmod +x /usr/local/bin/goimp.sh `

中身をこんな感じに編集

``` sh:goimp.sh

#!/bin/sh

if [[ $1 == *.go ]]
then
         /Users/yourname/bin/goimports -w $1
fi

```

きちんと実行できるかは試しておいたほうがよいです。

`$ /usr/local/bin/goimp.sh /Users/yourname/src/hoge/fuga.go `

きちんとimportが整理されているようなら、外部ツールとして登録します。
Preference(⌘+,)を開いて、`IDE Settings ` → `External Tools `を開きます。で、追加ボタン。

![Preferences.png](https://qiita-image-store.s3.amazonaws.com/0/2341/829049e3-40d8-9a76-0e0c-7a2b188c64f8.png)

名前は自分のわかりやすいもの、Groupも適当にGolangとかにしておくと良いです。
`Open Console`のチェックは外しておいた方がイチイチ実行するたびにターミナル出てこなくて楽です。
`Program `のところにはさっきのシェルスクリプト、`Parameters` には、右のinsert macroから `$FilePath$` を選びましょう。

大体こんな感じ

![2014-12-24 0.59.19.png](https://qiita-image-store.s3.amazonaws.com/0/2341/deb55d40-9308-0d00-220b-99d8d6725388.png)


あとは保存してOK.

実行するには、メニューの`Tools`からさっきのGroupに入れればOK.
Goの方に入れたいけど出来ないのかな。

![2014-12-24 1.01.28.png](https://qiita-image-store.s3.amazonaws.com/0/2341/343696aa-3a09-e3f5-67b4-787fa4df0358.png)


## Macro化

これでIntelliJからいつでもgoimportsが実行できるようになりました。
しかしまだ、面倒ですね。
出来たら保存のアクション（IntelliJは基本的に自動保存なので、明示的に⌘+Sする必要はないですが）の時に都度実行されて欲しい感じもあります。

なので、この動作をmacroとして設定します。


メニューの `Edit` → `Macro` → `Start recording macro `を選びます。
![2014-12-24 1.05.03.png](https://qiita-image-store.s3.amazonaws.com/0/2341/6edbc084-d3aa-c2b1-c227-6d4735124832.png)


ここからマクロとして記録されてしまうのでIntelliJの中では余計な動作をしないようにしましょう。

1. `Tools ` からさっきのgoimportsを実行する
2. `“File` から `Save all`を実行する
3. 再度  `Edit` → `Macro` から `Stop recording macro `を選ぶ
4. 適当な名前をつける。

ここからはもうマクロじゃないので適当に。

これでマクロとして一連の操作が保存されたので、キーボードショートカットして登録すればOK。


Preference(⌘+,)を開いて、`IDE Settings ` → `Keymap ` を開いて、さっき付けたマクロの名前で検索。
あとは自分の分かりやすいショートカット、今回はctrl+sをアサインして終わり。
都度、ctrl+sを押すだけでgoimportsが実行されるようになりました。





## よく見たら設定にあった

![スクリーンショット 2014-12-24 1.14.56.png](https://qiita-image-store.s3.amazonaws.com/0/2341/7df5b649-415d-548c-06a3-acd1b1932444.png)

まぁでもこれを応用して、
gofmt
golint https://github.com/golang/lint
goimports https://github.com/bradfitz/goimports

をまとめて実行してくれるようなシェルスクリプトにすれば、結構いい感じになるんじゃないかと。





テスト環境
・Mac OSX 10.9.5
・IntelliJ IDEA CE 13.1.4
・Go 1.3

参考
http://marcesher.com/2014/03/30/intellij-idea-run-goimports-on-file-save/
Salesforce1にLightningタブを追加する


## Lightningタブを作成する
### Lightningコンポーネントを作成する
Lightningタブに追加するためのLightningコンポーネントを作成しする。\<aura:component>に __implements="force:appHostable"__ をつけることでLightningタブを作成するときに指定できるようになる。

```html:Sample.cmp
<aura:component implements="force:appHostable">
	Hello, world!
</aura:component>
```

### Auraタブを作成する
ビルド>作成>タブ を開くと、[Aura タブ]セクションが追加されており、Lightningタブが作成できる。先ほど作成したLightningコンポーネントをAuraに指定して、タブ名、アイコンなどを設定して作成する。

### Salesforce1アプリケーションに追加する
管理>モバイル管理>モバイルナビゲーション を開くと、Lightningタブが選択可能になっているので、選択済みに追加する。

## Lightningタブの特徴
### JavaScript
Lightningタブに指定できるのはLightningアプリケーションではなくLightningコンポーネントなので、簡単な方法では外部のJavaScriptを読み込めない。

### タグ
LightningタブをSalesforce1アプリケーションに追加した場合、Visualforce Pageのように\<iframe>内に追加されるのではなく\<div>内に追加される。
一つのUITableView内で要素があまり変わらない２つ以上のセルを使い分ける


iOSのメッセージアプリの吹き出しのようなセルのように、相手と自分かで異なる`UITableViewCell`を使いたいけど、中身の構成はあんまり変わらない場合の話を想定。


# まず親`UITableViewCell`を一つ作る
xibファイル無しで、一つ`UITableViewCell`を作り、全てのセルで共通のコンポーネントをプロパティで持っておく。

```CommonTableViewCell.swift
import UIKit

class CommonTableViewCell: UITableViewCell {
    @IBOutlet weak var label: UILabel!
}
```

# 親`UITableViewCell`を継承させて子`UITableViewCell`を必要な種類だけ準備する
ここでは`ATableViewCell`と`BTableViewCell`を作る。
`ATableViewCell`には`UILabel`と`UIButton`を置いておく。
![スクリーンショット 2014-12-24 0.32.44.png](https://qiita-image-store.s3.amazonaws.com/0/13257/55c754b6-c1a3-5805-b8d0-9d54087e463b.png "スクリーンショット 2014-12-24 0.32.44.png")

`UILabel`の方は親である`CommonTableViewCell`の`label`と紐付ける。
![ss.png](https://qiita-image-store.s3.amazonaws.com/0/13257/ed6388ab-cdb2-2d34-440f-d2232c8cbfcf.png "ss.png")

`UIButton`の方は`ATableViewCell`のプロパティとして持っておく。
![ss2.png](https://qiita-image-store.s3.amazonaws.com/0/13257/51a2f81e-e2b5-7dfa-bff9-ff18369708cc.png "ss2.png")

`BTableViewCell`には`UILabel`だけ設置して、`CommonTableViewCell`の`label`と紐付ける。
![ss3.png](https://qiita-image-store.s3.amazonaws.com/0/13257/0e989bd5-72e5-85c3-dceb-0fd1559169fd.png "ss3.png")

現時点で、`CommonTableViewCell`の`label`には`ATableViewCell`と`BTableViewCell`内の`UILabel`が紐付いていることになる。

# 使い方
まずはnibファイルを登録。

```
override func viewDidLoad() {
        super.viewDidLoad()
        
        var nib = UINib(nibName: "ATableViewCell", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "ATableViewCell")
        nib = UINib(nibName: "BTableViewCell", bundle: nil)
        tableView.registerNib(nib, forCellReuseIdentifier: "BTableViewCell")
        
        tableView.delegate = self
        tableView.dataSource = self
    }
```

`tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)`内では

```
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let row = indexPath.row
        var cell:CommonTableViewCell!
        // 乱数の3の剰余が0ならATableViewCellを使う
        if (rand() % 3 == 0){
            var aCell = tableView.dequeueReusableCellWithIdentifier("ATableViewCell") as ATableViewCell
            aCell.button.setTitle("Hoge", forState: UIControlState.Normal)
            cell = aCell
        } else {
            cell = tableView.dequeueReusableCellWithIdentifier("BTableViewCell") as BTableViewCell
        }
        cell.label.text = "\(row)"
        
        return cell
    }
```
などというように、継承の利点を活かして各値を設定できる。
VVVでwordmoveを使う（いまさら）

# [wordmove](https://github.com/welaika/wordmove)を最近知ったのでVVVに突っ込んでみました

wordmoveなるものを今さら知りまして。

https://firegoby.jp/archives/5644

あぁこれは便利そうだと思ったんですが、記事中にある[VCCW](http://vccw.cc/)とは別に、すでに[生のVVV](https://github.com/Varying-Vagrant-Vagrants/VVV)で満足、すでにいろんなサイトを突っ込んどるわけです。先のVCCWを使っときゃいいんでしょうが、初回起動のいろいろ待つのが面倒という短気的な理由で、結構前にcloneしてprovisioningを最近してないVVVでwordmoveを入れたという、ごくつまらない話です。

## VM の ruby, gem のバージョンを上げる

以下は`vagrant ssh`でVMに接続してやってる前提です。

VVVのVMがUbuntu 14.04 LTS (Trusty Tahr)ってgithubでは書いてましたが、ruby 1.9とかが入ってたはず。これで

```bash
$ gem install wordmove
```

するとまずコケる。rubyもgemも古いくさかった。こんなのでると思う。

```bash
vagrant@vvv:~$ sudo gem install wordmove
Building native extensions. This could take a while...
ERROR: Error installing wordmove:
ERROR: Failed to build gem native extension.
```

なので、ruby周りを整えてあげる。
https://github.com/welaika/wordmove/issues/110#issuecomment-63575141


```bash
$ apt-get install -y ruby-dev
$ gem install rubygems-update
$ update_rubygems
$ gem install wordmove
```

すぐインストール出来た。[provision-pre.shに書いてもOKな感じのもissueで見つけたが](https://github.com/welaika/wordmove/issues/110#issuecomment-63742331)、動機は短気的な理由だったのでマニュアリーにやった。

あとはWP入れているところ（wordpress-default）とかで、

```bash
$ wordmove init
```

すればテンプレが入ったMovefileができている。各々書き換えればよい。

## lftp を入れないと動かない（FTP接続したい場合）

SSHでつないでおきたい人ですが、わけあってFTPでやる必要もあったので

```bash
$ apt-get install lftp
```

で、lftpも入れておく。lftpなんて初耳なんですけど。[ホームディレクトリに`.lftprc`がないとあかんらしく](http://qiita.com/suzuki86/items/51f977c1dfa1faedc044)、

```bash
$ cd /vagrant
$ vi .lftprc
```
```bash:.lftprc
set ssl:check-hostname no
set ssl:verify-certificate no
```

このlftpやたらパラメータ書けるんだけどまったく何が何を意味するのか分からない。
https://gist.github.com/gaubert/822090

## wordmove動きます

MoveFileにもろもろ書いていればもうwordmove動きます。やったのは

1. `wordmove pull -d` でステージングのDBをローカルに持ってくる
2. `wordmove push -u` でアップロードファイルをステージングにプッシュする
3. `wordmove push -t` でテーマディレクトリをステージングにプッシュする

あたり。

1はもうえらい早かった。何しろ設置ドメインの変換までやってくれる。DBダンプを持ってきてからのwp-cliでsearch-replace的なことしなくてよい。今までちまちまそうやってた。そういうのからの卒業感がハンパない。やばい。

2,3はFTP接続だとだいぶ遅いです。すごいしんどみ。SSHで本意気が見られるんでしょう。3なんかは基本`wp-content/themes/*`全部見てるので、MoveFileでテーマディレクトリの見方変えた方が良さそう。

---

というわけで、wordmoveをしばらく使いそうです。
本日は以上です。
Jenkinsおじさんとdocker

# はじめに
世の中には多くのCIツールがありますが、自分はJenkinsおじさんとの付き合いが一番長いです。そんなわけで、どこで作業するにもdockerで起動するようになっていれば困らないだろう（少なくとも自分は）と思い、Jenkins用のDockerfileを自作していました。

ただ、自作のため、アップデートなどのDockerfileのメンテが<del>面倒</del>少し手間がかかるので、何かないかなーと探していると、 [Official Jenkins Docker image](https://registry.hub.docker.com/_/jenkins/) を見つけました。
こちらを利用している方が今後<del>ラクチン</del>汎用性があるのではと思いましたので、起動手順を書いておきます。

# 環境

* OS: Ubuntu14.04
* docker version: 1.4.1

# 前準備
jenkins_homeの永続化用にディレクトリを用意します。

```bash
mkdir jenkins_home
chmod 777 jenkins_home
```

# Jenkinsコンテナ起動
```bash
sudo docker run -p 8080:8080 -d \
 -v [PATH]/jenkins_home:/var/jenkins_home \
 jenkins
```

※[PATH]は適宜修正して下さい。

# 動作確認
```bash:URL
http://(dockerホストのIPアドレス):8080
```

アクセスすると、Jenkinsが使えますので、プラグイン入れるなり、ジョブを作るなりすればOKです。

# 補足
## 使用したイメージのDockerfile
自分が使用したのは、latest, 1.565.3 (Dockerfile)です。
[Official Jenkins Docker image](https://registry.hub.docker.com/_/jenkins/)

```conf:Dockerfile(jenkins)
FROM java:openjdk-7u65-jdk
RUN apt-get update && apt-get install -y wget git curl zip && rm -rf /var/lib/apt/lists/*
ENV JENKINS_VERSION 1.565.3
RUN mkdir /usr/share/jenkins/
RUN useradd -d /home/jenkins -m -s /bin/bash jenkins
COPY init.groovy /tmp/WEB-INF/init.groovy.d/tcp-slave-angent-port.groovy
RUN curl -L http://mirrors.jenkins-ci.org/war-stable/$JENKINS_VERSION/jenkins.war -o /usr/share/jenkins/jenkins.war \
&& cd /tmp && zip -g /usr/share/jenkins/jenkins.war WEB-INF/init.groovy.d/tcp-slave-angent-port.groovy && rm -rf /tmp/WEB-INF
ENV JENKINS_HOME /var/jenkins_home
RUN usermod -m -d "$JENKINS_HOME" jenkins && chown -R jenkins "$JENKINS_HOME"
VOLUME /var/jenkins_home
# for main web interface:
EXPOSE 8080
# will be used by attached slave agents:
EXPOSE 50000
USER jenkins
COPY jenkins.sh /usr/local/bin/jenkins.sh
ENTRYPOINT ["/usr/local/bin/jenkins.sh"]
```

[Java is a concurrent, class-based, and object-oriented programming language.](https://registry.hub.docker.com/_/java/)
java:openjdk-7u65-jdkは既にアップデートされていたが、基本構成は同じ

```conf:Dockerfile(java:openjdk-7u71-jdk)
FROM debian:jessie
# A few problems with compiling Java from source:
# 1. Oracle. Licensing prevents us from redistributing the official JDK.
# 2. Compiling OpenJDK also requires the JDK to be installed, and it gets
# really hairy.
ENV JAVA_VERSION 7u71
ENV JAVA_DEBIAN_VERSION 7u71-2.5.3-2
RUN apt-get update && apt-get install -y curl openjdk-7-jdk="$JAVA_DEBIAN_VERSION" unzip wget
# If you're reading this and have any feedback on how this image could be
# improved, please open an issue or a pull request so we can discuss it!
```
cpコマンドで大きなファイルをコピーしたときに途中経過を表示させる

簡単なわりに地味に便利なのでよく使います。
実行中のシェルで`Ctrl + t`を押してSIGINFOを送るだけです。
押すたびに表示されます。

```bash
$ cp very_big_file.dat ../
load: 1.95  cmd: cp 94473 uninterruptible 0.00u 0.09s
very_big_file.dat -> ../very_big_file.dat   4%
load: 1.95  cmd: cp 94473 uninterruptible 0.00u 0.60s
very_big_file.dat -> ../very_big_file.dat  27%
```

ただし、この機能はMac限定なので（もしかするとBSD系はいけるかも）、Linux等では使用できないです。
Linuxで同様のことをしたい場合はrsyncで`--progress`オプションを使うのがいいでしょう。

ちなみにSIGINFOはpingコマンドなどでも統計情報を表示するのに使えたりするので、けっこう便利です。
Ruboty | ruboty_gen の生成する Action に rescue 付きのソースを生成する rescue オプションを追加 #ruboty

# Ruboty | ruboty_gen の生成する Action に rescue 付きのソースを生成する rescue オプションを追加 #ruboty
## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
ruboty_gen の生成する Action に rescue 付きのソースを生成する rescue オプションを追加します
## <i class="fa fa-history" style="font-size:1em;"></i> 前提知識
[Ruboty | 【怠惰は正義】ruboty-gen で Handlers と Actions のひな形を作成](http://qiita.com/tbpgr/items/39c754bb17193c9b27e9)

## <i class="fa fa-history" style="font-size:1em;"></i> 経緯
Ruboty の Plugin はその性質上、内部で他の API を利用することが多いです。
その際に、例外処理が必要になるため、API を利用した Plugin を作成する場合、
下記のような処理が必要になることが多々あります。

~~~ruby
module Ruboty
  module SomePlugin
    module Actions
      class Convert < Ruboty::Actions::Base
        def call
          message.reply(your_action)
        end

        private

        def your_action
          ret = some_api_call
          some_converter(ret)
        rescue => e
          e.message
        end
      end
    end
  end
end
~~~

私は **怠惰** なのでたったこれだけではありますが毎回書きたくありません。
そこで、 Ruboty のテンプレートジェネレータである、 ruboty-gen に機能を追加します。

## <i class="fa fa-files-o" style="font-size:1em;"></i> 既存の ruboty-gen の出力確認
### <i class="fa fa-file-o" style="font-size:1em;"></i> Ruboty Plugin のプロジェクトテンプレートを生成
~~~bash
$ ruboty-gen gem some_plugin some_action
~~~

### <i class="fa fa-search" style="font-size:1em;"></i> 自動生成された Action のひな形を確認

~~~ruby
module Ruboty
  module SomePlugin
    module Actions
      class SomeAction < Ruboty::Actions::Base
        def call
          message.reply("TODO: write a message.")
        end
      end
    end
  end
end
~~~

## <i class="fa fa-files-o" style="font-size:1em;"></i> rescue オプション動作イメージ
### <i class="fa fa-file-o" style="font-size:1em;"></i> Ruboty Plugin のプロジェクトテンプレートを生成(rescue オプション付)
~~~bash
$ ruboty-gen gem some_plugin some_action --rescue
~~~

### <i class="fa fa-search" style="font-size:1em;"></i> 自動生成された Action のひな形を確認

~~~ruby
module Ruboty
  module SomePlugin
    module Actions
      class SomeAction < Ruboty::Actions::Base
        def call
          message.reply(some_action)
        end
      end

      def some_action
        "TODO: write your logic."
      rescue => e
        e.message
      end
    end
  end
end
~~~

## <i class="fa fa-github-alt" style="font-size:1em;"></i> プルリクエスト
以上の仕様でプルリクエストを行いました。
既にマージして頂いているため、最新版の ruboty-gen を使用していれば当記事の機能を利用できます。

<i class="fa fa-github-square" style="font-size:1em;"></i> [add_rescue_option pull request](https://github.com/blockgiven/ruboty-gen/pull/3)

## <i class="fa fa-arrow-circle-right" style="font-size:1em;"></i> 参照
* <i class="fa fa-external-link" style="font-size:1em;"></i> [ruboty-gen GitHub](https://github.com/blockgiven/ruboty-gen)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [ruboty-gen RubyGems](http://rubygems.org/gems/ruboty-gen)
oh-my-fishではじめるfish



設定をしなくても、そこそこ使えるshellとして[fish shell](http://fishshell.com/)の名を最近よく聞きます。
機能としてはカスタマイズされたzshには負けますが、インストールするだけで使いやすいshellの地位は確立できる予感がします。

「でも、どうせなら便利に使いたいよね」なんて人のために[oh-my-fish](https://github.com/oh-my-fish/oh-my-fish)があります。
ちょっと試してみたので、まとめてみました。

本記事はfishに関する解説はしていません。

# インストール

oh-my-fishをインストールしてみます。

Macを想定で話しを進めていきますので、適宜置き換えて読んでください。

まず、fishのインストール。

```
brew install fish
```

そして、oh-my-fishをインストールします。

```
curl -L http://get.oh-my.fish | fish
```

このコマンドを実行した際には自動的にfishを起動した状態になりますが、端末を再起動するとfishは自動で起動しません。自動でfishを起動したい場合は端末の設定で`/usr/local/bin/fish`を実行するようにしてみてください。

## インストールに関する余談

自動インストールされるのはちょっと怖いです。怖い場合は[中身](https://raw.githubusercontent.com/oh-my-fish/oh-my-fish/master/bin/install)を覗いておきましょう。

ざっくりメモをしておくと`~/.local/share/omf`に`git clone`されて `~/.config/fish/conf.d/omf.fish`にファイルが置かれることによってfishが起動時に読み込まれます

# omf コマンド

oh-my-fishのプラグインやテーマのインストールは`omf`コマンドで行います。

## プラグインを使う

`cd`プラグインをインストールしてみます。

```
omf install cd
```

でインストールできます。
このプラグインは `cd`するときに `...`を指定することができます。

`...` は `../..` として置き換えられます。`ls`などでは使えなくて微妙でした。

公式のプラグインはgithubの以下URLで探せます。

* https://github.com/oh-my-fish?utf8=%E2%9C%93&query=plugin

## プラグインの削除

cd プラグインを削除します。

```
omf remove cd
```

## 日々のお手入れ

```
$ omf update
```

oh-my-fishとインストールしたプラグインの更新ができます。

## oh-my-fishの削除

oh-my-fishがいまいちだと思ったら簡単に削除できます。

```
omf destroy
```

簡単にやり直せて良いですね。
(ただし、再度oh-my-fishをインストールすると入れていたプラグインは再インストールされます)

# プラグイン探検

## balias

* http://qiita.com/eielh/items/8e85d5cf39eb1d51564b

## peco

```
omf install peco
```

https://github.com/oh-my-fish/plugin-peco

```
bind \cr 'peco_select_history (commandline -b)'
```

を実行するとpecoで履歴を検索できます。


## docker-machine

```
omf install docker-machine
```

https://github.com/oh-my-fish/plugin-docker-machine

dockerコマンド使うだけでdefaultのdocker-machineへ接続できるっぽい。

# まとめ

なんとなくfishを利用している人は`oh-my-fish`を使ってみても良いと思います。
oh-my-zsh比べると、fish自体とうまく結合されていて使いやすいです。
ただ、oh-my-zshをなんとなく利用してzshを使うほうが便利ではあります。
しかし、fishは文法が整理されているので、スクリプトは読みやすいです。
READMEも充実していて、ユーザーに優しいです。
ちょっとしたオレオレ設定をするには敷居が低いと思いました。
Android wearアプリ作成 自分用メモ

Android wearアプリ作成 自分用メモ

#ウェアラブル端末用Android Wearアプリ開発の基礎知識
http://www.atmarkit.co.jp/ait/articles/1409/05/news044.html

* Moto360のデバッグモードをBluetooth経由で有効にする方法。

http://androidlover.net/android-wear/moto-360/moto360-bluetooth-debug-mode-on.html

* 初めて Mac で zsh を使う人のためのチュートリアル

http://mollifier.hatenablog.com/entry/2013/02/22/025415

* zshへのパスの通し方

.zshrcを作成し、以下を追加する。

\# パスを通す
export ANDROID_HOME="/Users/(ユーザー名)/Library/Android/sdk/"
export PATH=\${PATH}:$ANDROID_HOME/platform-tools

#Building Apps for Wearables
http://developer.android.com/training/building-wearables.html

#Android 5.0発表＆スマホと連動する音声認識Android Wearアプリの作り方 
http://www.atmarkit.co.jp/ait/articles/1410/17/news031.html

#美女時計を作ろう！Android Wear開発入門 30分で作る盤面アプリ
http://blog.btrax.com/jp/2014/12/16/develop-watch-face/

#ADN LAB'S BLOG Android Wear 開発 その１
http://lab.adn-mobasia.net/?p=3750

#android studioとGitHubとの連携
http://dev.classmethod.jp/smartphone/android/android-studio-git-integration/

#android wearのスクリーンショットの撮り方
http://s-max.jp/archives/1624539.html

#android studioでの署名付きapkの作成
http://dev.classmethod.jp/smartphone/android/android-app-how-to-release/
KnockoutHxを使って小規模SPA

knockoutjsとhaxeを組み合わせて小規模なSPAを作成してみるサンプルです。

* [knockouthx](http://lib.haxe.org/p/knockout.hx)

knockoutjsをHaxeで利用するためのexternクラス

* [routerhx](https://github.com/k-motoyan/routerhx)

pushstateに対応したフロントエンドルーティングライブラリ

# サンプルコード

タブメニューをクリックするとページコンテンツが切り替わります。

```html
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
  <div class="jumbotron">
    <section id="header">
        <h1>KnockoutHx Sample</h1>
        <p>Knockoutjs + Haxe sample application.</p>
    </section>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <section id="menu">
          <ul class="nav nav-tabs nav-justified" data-bind="foreach: menus">
            <li role="presentation" data-bind="css: { active: is_active }">
              <a data-bind="text: name, attr: { href: url }, click: movePage">Top</a>
            </li>
          </ul>
        </section>
        <section id="contents">
          <h1 data-bind="text: title"></h1>
          <p data-bind="text: body"></p>
        </section>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
  <script src="app.js"></script>
</body>
```

```hx
import js.Browser;
import knockout.Knockout;
import knockout.Observable;
import routerhx.Router;

typedef Menu = {
  name: String,
  url: String,
  is_active: Observable<Bool>,
  movePage: Void -> Void
}

typedef Contens = {
  title: Observable<String>,
  body: Observable<String>
}

class Main {
  static var menus: Array<Menu> = [
    { name: "Top", url: "/", is_active: Knockout.observable(true), movePage: topPage },
    { name: "Outline", url: "/outline", is_active: Knockout.observable(false), movePage: outlinePage },
  ];

  static var contents: Contens = {
    title: Knockout.observable(""),
    body: Knockout.observable("")
  }

  static function main() {
    var menu_dom = Browser.document.getElementById("menu");
    var contents_dom = Browser.document.getElementById("contents");

    Knockout.applyBindings({ menus: menus }, menu_dom);
    Knockout.applyBindings(contents, contents_dom);

    var r = new Router();
    for (menu in menus) {
      r.addCb(menu.url, menu.movePage);
    }
    r.raisePushState("a", "click", "href", menu_dom);
    r.run();
  }

  public static function topPage(): Void {
    switchActiveMenu("/");
    contents.title.set("トップページ");
    contents.body.set("トップページっぽいテキスト");
  }

  public static function outlinePage(): Void {
    switchActiveMenu("/outline");
    contents.title.set("概要");
    contents.body.set("概要ページっぽいテキスト");
  }

  static function switchActiveMenu(target_url: String): Void {
    for (menu in menus) {
      if (menu.url == target_url && menu.is_active.get() == false) {
        menu.is_active.set(true);
      } else if (menu.url != target_url && menu.is_active.get() == true) {
        menu.is_active.set(false);
      }
    }
  }
}
```

## Haxeで書く場合のポイント

* obserbしたプロパティへのアクセスは`get`、`set`のアクセサを通して行う。
* ViewModelになる部分は予め`typedef`で構造を定義しておく（規模が大きいならクラスを定義する）
* あとはリンクを踏んだ時の処理を好きなように書けばOK

---

昨日までに間に合いませんでした、スミマセンでした。
WebStormのTypeScript関連Issueを見る

こんにちは、らこです。元々はWebStormでTypeScript書くときのTips書くとか言ってたんですが、ここ何ヶ月かDartしか書いてないんで完全にTypeScriptの書き方忘れました。なのでWebStorm絡みってのはなんとか残して、今後WebStormに実装される/されそうな機能とかを見ていこうと思います。

# 最新版9.0.2で変わったこと
まずはWebStormの一番最近のアップデートで変わったことをまとめます

[Feature Request: support for TypeScript 1.3 feature](https://youtrack.jetbrains.com/issue/WEB-14149)
我らがvvakameさんが投げたIssueで、TypeScript1.3のサポートが実装されてます。

[Indexer parameter not colorized](https://youtrack.jetbrains.com/issue/WEB-11506)
インデクサに色がつかないバグが直ってます。

[Class name after 'new' keyword not colorized](https://youtrack.jetbrains.com/issue/WEB-11508)
コンストラクタがあるクラスをnewすると色がつかないバグが直ってます。

9.0.2では1.3対応以外は目立った変更はなかったです。

# 今後の実装が決定しているもの
Fixedにされていてまだ組み込まれるビルドが決まってないものです。

[TypeScript: IIOBE is thrown for Class with generic argument : WEB-14409](https://youtrack.jetbrains.com/issue/WEB-14409)
WebStormの静的解析のバグ修正です。

[TypeScript: Colors&Fonts: properties from lib.d.ts are not colored : WEB-13704](https://youtrack.jetbrains.com/issue/WEB-13704)
lib.d.tsのオブジェクトのプロパティに色がつかないバグの修正です

[JSDoc syntax errors stop typescript recompilation : WEB-12360](https://youtrack.jetbrains.com/issue/WEB-12360)
JSDocにエラーがある状態だとFile Watcherがコンパイルしなくなるバグの修正です。

[support "Override Methods..." and "Implement Methods..." for TypeScript : WEB-12321](https://youtrack.jetbrains.com/issue/WEB-12321)
IDEAのJava等と同様にクラスを継承した際やインターフェースを実装した時に「Implement Methods...」や「Override Methods...」をTypeScriptで有効にする変更です。

[Alt+Ins (generate) doesn't work in TypeScript files : WEB-13101](https://youtrack.jetbrains.com/issue/WEB-13101)
TypeScriptでgenerateアクションが使えないバグ（？）の修正です。

# 修正中のもの
In Progressになってるやつです

[Use TypeScript compiler as a service to dramatically improve compilation speed of TS file watcher : WEB-11491](https://youtrack.jetbrains.com/issue/WEB-11491)
公式のtscをサービスとして利用してFileWatcherより高速にコンパイルできるようにしようという計画。

# まだ手がつけられてないもの
Openになってるやつです

[#TypeScript #Open sort by: Updated | WebStorm _ IntelliJ Web (WEB) | YouTrack](https://youtrack.jetbrains.com/issues/WEB?q=%23TypeScript+%23Open+++sort+by%3A+Updated)

多いですね。

# 明らかに人手が足りてない
大体Issue眺めてたら分かるんですが、TypeScriptのプラグインのIssue担当してるの多分一人、もしかしたら二人ってレベルです。最近のTypeScriptの怒涛の更新に完全に置いて行かれてます。だからといってIssueを投げるのをやめてしまっては元も子もないので、とにかくユーザー側は投げ続けましょう。人員増やせと念じながらCreate Issueするのです。

# おわりに
中身スッカスカの記事ですみませんでした！！！！
Smalltalk Web開発編（Seaside入門）

# Smalltalk Web開発編（Seaside入門）
下書き

今回は、SmalltalkのWeb Framework Seasideで画面遷移やコンポーネントの埋め込み等を説明します。

# call:answer:

# children

# WATask

## フォーム

# CookBook

## ページタイトルの変更

## HTML5対応

#参考
nvmを利用したnode.jsのインストール方法

nvmを使用して複数バージョンのnodeを切り替えて使用する方法

# nvmのインストール

```lang:bash
git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
```

# node.jsのインストール
```lang:bash
# 指定したバージョンのnode.jsをインストールして有効化する
nvm install v0.10.24
```
```lang:bash
# 0.x系の最新のnode.jsをinstallして有効化する
nvm install 0
```

# nvmのその他のコマンド
```lang:bash
# install可能なnodeのバージョンを表示する
nvm ls-remote
```
```lang:bash
# install済のnode.jsのバージョンを表示
nvm ls
```
```lang:bash
# 0.x系に切り替えて有効化する
nvm use 0
```

# その他
- 起動時にnvmとnode.jsを有効化する

```lang:.bash
# .bashrc等の設定ファイルに以下を記述しておく
source ~/.nvm/nvm.sh
nvm use 0
```
GITチートシート



## Git Blame
### 該当行がどのコミットで更新されたか確認する

```
git blame -l <ファイル名>
```

## Git Log

#### とりあえずはこれ
```
git log --decorate=full --oneline --graph
```


#### 履歴からコミットのハッシュ値で検索する

```
git log -p --all <ファイル名>
/<hash値>
```

#### コメントを1行で表示する
```
git log --pretty=oneline
```

#### 該当ファイルの変更履歴を見る
```
git log -p <ファイル名>
```

####一意に認識できる部分までのハッシュ値を表示

```
git log --abbrev-commit
```

#### 特定のファイルの履歴を見る

```
git log filename
```


## Git Status
#### 状態を確認する

```
git status
```

## Git Add
#### インタラクティブモードでステージング

```
git add -i

5: patch
を選択（5かp)

y - 処理中の hunk をステージングします
n - 処理中の hunk をステージングしません
q - 終了します。処理中の hunk およびそれ以降の hunk はステージングしません
a - 処理中の hunk およびそれ以降のファイル中の hunk をステージングします。
d - 処理中の hunk およびそれ以降のファイル中の hunk をステージングしません
g - 処理対象となる(別の) hunk を選択します。
/ - 入力した正規表現にマッチする hunk を検索します
j - 処理中の hunk を保留にし、次の保留されている hunk を表示します
J - 処理中の hunk を保留にし、次の hunk を表示します
k - 処理中の hunk を保留にし、ひとつ前の保留されている hunk を表示します
K - 処理中の hunk を保留にし、ひとつ前の hunk を表示します
s - 現在の hunk を小さい hunk に分割します
e - 現在の hunk を手動で編集します
? - ヘルプを表示します
```
DartでCake PatternによるDI



既にDartにはAngularプロジェクト発の[DIライブラリ](https://pub.dartlang.org/packages/di)があるのだけれど、
Webブラウザ上での動作時や公開ライブラリ等において、外部ライブラリに依存したくない場合や、そこまで重厚なDIが必要でない場合がままある。
そこで、Dart標準の言語機能で、DIっぽいことをあれこれ試した結果、implicit interfaceとmix-inを使ってCake Patternっぽいものができた。

すごく単純な例で解説。

``` dart
class Entity {
  String name;
  Entity(this.name);
  String toString() => "Entity:${this.name}";
}

class Repository {
  List<Entity> getAll() =>
      ["entity1", "entity2"].map((s) => new Entity(s)).toList();
}

class Service {
  Repository get repository => new Repository();
  void execute() => print(repository.getAll());
}
```

EntityインスタンスをRepositoryインスタンスからgetAllメソッドで引っ張ってきてprintするServiceクラスのexecuteメソッドがある。

Serviceクラスのrepositoryプロパティは、プロダクション環境下では以下のクラスを参照したい。

``` dart
class AwesomeRepository implements Repository {
  List<Entity> getAll() =>
      ["awesomeEntity1", "awesomeEntity2"].map((s) => new Entity(s)).toList();
}
```

（まぁ実際は外部DBとかにでもアクセスすると思ってください）

もちろん、repositoryプロパティを可変にすれば自在にRepositoryの実装を変更できるのだろうが、そうするとServiceのインタフェースが汚れる。
Dartのimplicit interfaceは便利なのだけれど、意図せぬインタフェースを外部に提供してしまう場合もあるので、クラスやそのメンバーの可視性やオブジェクトの不変性には特に気をつけておきたい。
この例も同様、Serviceの状態は不変を保ちたいとする。

このような場合は、Mix-inを使用する。
以下のようなAwesomeRepositoryへの依存をサポートするためのMix-inを定義して、

``` dart
abstract class AwesomeRepositoryMixin {
  Repository get repository => new AwesomeRepository();
}
```

AwesomeRepositoryMixinとのmix-in applicationによって、AwesomeRepositoryへの依存を持つServiceを定義する。

``` dart
class AwesomeService = Service with AwesomeRepositoryMixin;
```
(昔はtypedefキーワードだった。しみじみ)

これで、ServiceとAwesomeServiceそれぞれ同じexecuteメソッドを有するが、repositoryプロパティの参照先が変更されため、標準出力の内容がそれぞれで異なる結果が得られる。

``` dart
main () {
  new Service().execute();
  new AwesomeService().execute();
}
```

ただ、この方法には、動的にrepositoryプロパティの参照先を変更できないという問題がある。
動的にしたい場合は、constructor injenctionなりproperty injectionなりを採用すればよいと思う。
それよりも、依存関係が複雑化した際のdart analyzerによる静的チェックの恩恵の方が個人的には大きく、この似非Cake patternの採用の動機になっている。

### まとめ
- DIばりばりやりたい場合は、[diパッケージ](https://pub.dartlang.org/packages/di)
- 動的にやりたい場合は、素直にconstructor injenctionかproperty injection
- 静的に依存関係を構築したい場合は、当記事のCake Pattern
ぎばさちゃんスタンプラリー作成でつまづいたところとその解決？

## ぎばさちゃんスタンプラリーって何？
渚の妖精ぎばさちゃんのスタンプラリーアプリを現在作成中です。「全国のご当地キャラが簡単に地元用に使いまわせる」をコンセプトにオープンソース化の予定です。ちなみにオールSwift！

## はわわ！いまは過渡期なのです！
現在は過渡期！新開発言語Swift、新OSであるiOS8、そして新ハードiPhone6/6Plus。今までと同じ調子で作っているとなぜか動かない……なんてことも。今回は私がつまづいたところと解決方法や参考にしたサイトを紹介していきます！結構簡単なところでも苦戦してたり……。解決してないのもあるけど。

### 文字列をDoubleへ変換する
トップバッターは「文字列をDoubleへ変換する」。Swiftになって文字列にはNSStringではなくStringを使うようになり、文字列を+で連結したりとかObjective-C時代よりも扱いやすくなりました！基本的には……
しかし、文字列を数値に変換するメソッドがなぜかtoInt()のみ！あれ？Doubleは？
ってことで、Doubleに変換する一番楽な方法はNSStringのdoubleValueを使うこと！

```
let str: String ="38.260297"
let latStr: NSString = str
let lat: Double = latStr.doubleValue
```

### モーダルで透過画面を表示する
透過背景を用いてモーダルで画面を重ねるUI。これがどうもiOS8からやり方が変わった模様。

こちらのリンクを参考にしてみたけどうまくいかず……
http://ushisantoasobu.hateblo.jp/entry/2014/09/12/023926

画面が真っ黒になっちゃうんですよね。良い解決方法をご存知の方がいたら教えてください。
拾い読み WEB+DB PRESS Vol.84


書籍URL
http://gihyo.jp/magazine/wdpress/archive/2015/vol84

おまけで紹介。ちょっと値段が高め。
ITロードマップ2015年版
http://www.amazon.co.jp/gp/product/4492581065
ITナビゲーター2015年版
http://www.amazon.co.jp/gp/product/4492502637

##キーワード
・GitHub Enterprise2.0
　GitHubの機能を社内のサーバなどクローズドな環境で使えるようにするソフトウェア。これの新しいバージョン。

・jQuery 3.0, jQuery Compat 3.0
　jQueryの新しいバージョン。1.xの呼び方が変わるだけっぽい。

・CTO
　Chief Technical Officer（＝最高技術責任者）。

##話題
###アニメーションの原理とデザイン（p2）
一言でいうと「アニメーションってこういうものだよね」と説明しているコラム。
http://the12principles.tumblr.com/
アニメーションの語源がアニマ（魂）から由来しているらしい。

###エンジニアの生存戦略（p6）
インタビュー記事。質問「優秀なエンジニアとは？」への答え「アルゴリズムとデータ構造がわかること」が良かった。付け焼き刃の技術でなく基礎が大事ですね。ときには付け焼き刃も…やむを得ないけどきっちり「負債」を返済しないと。（「負債」というキーワードは本誌の後半で出てきます）

###特集1 動かしながらサクサク学べる はじめてのSwift（p17）
秋ごろからSwiftの日本語書籍が増えてきた。Objective-Cとは書き方がだいぶ違う。というよりObejective-Cの文法が独特というか。Swiftはパッと見るとJavaScriptっぽくて取っ付きやすそう。ただし静的型付け。よく見るとあちこちに"String", "Int"と型宣言している。

Optional型というのを初めて見た。
http://ja.wikipedia.org/wiki/Swift_%28%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%29#Optional.E5.9E.8B

Macがあれば開発ができるらしいので年末年始に…いややらないだろうな。年末年始はゆっくり休んだほうが良い。

###特集2 実践ベータテスト（p50）
ゲーム開発の話。コンシューマではなくソーシャルの方ですね。

技術的なことはままりよく分からなかった。
「『ガールフレンド（仮）』のバトル画面」とあったけどあれってバトルゲームだったのか…。

β版ってどうして"β"なの？ ユーザが最初に触るバージョンだから"α"じゃないの？ と思って調べると「α版」にはきちんとした定義がなされていた。

アルファ版
http://www.weblio.jp/content/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E7%89%88

じゃあ製品化されたらガンマ版だな！と検索したら本当にあって驚いた。

リリース候補版(ガンマ版 から転送)
http://www.weblio.jp/content/%E3%82%AC%E3%83%B3%E3%83%9E%E7%89%88

###特集3 メジャーリーグのデータで学ぶ [速習] 統計分析（p73）
OPSは知っていたけどここではRCという指標を用いていた。「昔は打率で評価していたけど」というところから始まりデータ分析の話に入る。

この11月末に統計検定2級を受けて、昨日Webで合格を確認。そこで得た知識があったから読みやすかった。内容のレベルもちょうど2級くらい（かちょっと下）。徐々に応用の方も力を付けていきたいですね。

##その他
###CTO 最高技術責任者が明かす技術・組織マネジメント ノウハウ大公開（p99）
内容はこちらのslideshareを掘り下げたもの。作者も本コラム著者と同じ伊藤直也氏。
https://speakerdeck.com/naoya/kai-fa-zu-zhi-falsemanezimento
本コラムでは藤本真樹氏と共にCTOとは？の題材で展開されている。

ここで重要なワードとして「（技術的）負債」。余裕が無かったりサボったりで手を抜いちゃうと後ほど痛い目に遭うよというもの。「動くからいいじゃん」で済ませるのではなく…と言いたいところだけど上の人やユーザから見ると「動くからいいじゃん」なんだよなあ。

だからこそ上の人、つまりCTOが率先して負債の返済に取り組まないと、ということです。
werckerでdockerイメージをキャッシュ・リストアさせるステップ

### リストア

```yaml
- script:
    name: load docker images from CACHE
    code: |
      find $WERCKER_CACHE_DIR/docker/images/ -name "*.tar" -ls -exec docker load -i {} + || :
```

### キャッシュ

```yaml
- script:
    name: save docker images to CACHE
    code: |
      mkdir -p $WERCKER_CACHE_DIR/docker/images
      docker ps -a | awk 'NR>1 {print $2}' | xargs -I{} -P0 bash -c "export SAFE=\$(echo {} | sed -r 's|[/:]|_|g'); [ ! -f $WERCKER_CACHE_DIR/docker/images/\$SAFE.tar ] && docker save -o /tmp/\$SAFE.tar {} && mv /tmp/\$SAFE.tar $WERCKER_CACHE_DIR/docker/images && echo \$SAFE saved"
      ls -la $WERCKER_CACHE_DIR
      du -sh $WERCKER_CACHE_DIR
```

`$WERCKER_CACHE_DIR`は1Gを超えるとキャッシュしてくれないので注意。
`selenium/hub`と`selenium/node-chrome`で1.1Gになってアウトでした(`selenium/standalone-chrome`で回避)。
`docker {save,load}`は標準入出力経由でも扱えるので、gzipも挟ませられるハズ。
Clickイベントが呼ばれるまでの時間を測ってみた

## 追記2015/01/06
テストコードを追加してみました。
Robotiumを使ってボタン連打してます。
clickOnButtonの引数にボタンのtextやらid渡すと押せるんですね。
座標を渡してタッチさせるメソッドもあるみたいです。

```java
package com.futabooo.clicklistenerspeed;

import android.test.ActivityInstrumentationTestCase2;
import android.util.Log;

import com.robotium.solo.Solo;

public class MainActivityTest extends ActivityInstrumentationTestCase2<MainActivity> {

    private Solo mSolo;

    public MainActivityTest() {
        super(MainActivity.class);
    }

    public void setUp() throws Exception {
        mSolo = new Solo(getInstrumentation(), getActivity());
        super.setUp();
        getActivity().arrayList.clear();
    }

    public void tearDown() throws Exception {
        mSolo.finishOpenedActivities();
        super.tearDown();
    }

    public void testClickButton1() {
        for (int i = 0; i < 100; i++) {
            mSolo.clickOnButton("button1");
        }
        long sum = 0;
        for (int i = 0; i < getActivity().arrayList.size(); i++) {
            sum =+ getActivity().arrayList.get(i);
        }
        Log.d("Button1 平均タイム = ", "" + sum/getActivity().arrayList.size());
    }

    public void testClickButton2() {
        for (int i = 0; i < 100; i++) {
            mSolo.clickOnButton("button2");
        }
        long sum = 0;
        for (int i = 0; i < getActivity().arrayList.size(); i++) {
            sum =+ getActivity().arrayList.get(i);
        }
        Log.d("Button2 平均タイム = ", "" + sum/getActivity().arrayList.size());
    }

    public void testClickButton3() {
        for (int i = 0; i < 100; i++) {
            mSolo.clickOnButton("button3");
        }
        long sum = 0;
        for (int i = 0; i < getActivity().arrayList.size(); i++) {
            sum =+ getActivity().arrayList.get(i);
        }
        Log.d("Button3 平均タイム = ", "" + sum/getActivity().arrayList.size());
    }
}
```

## はじめに
はじめましてfutaboooです。
勢いでAndroid Advent Calendarに登録したものの、ついさっきまで何を書いていいのかもわからず超焦っていました。
そして思いついたのがこのClickイベントの速度計測です。
可読性などで語られる記事はよく見かけるのですが、ぶっちゃけどれが早いの？というのが気になっていたので今回オレオレ測定をしてみました。


## 結論
試したのは下記3つの実装方法です。

1 ActivityにimplementsしたOnClickListerを渡す
2 setOnClickListenerの時点でOnClickListenerをnewして渡す
3 setOnClickListenerに無名クラスで用意しておいたOnClickListenerを渡す


それぞれ100回測定した平均nano秒が下記になります。
nano秒なのでこの差がなんぼのもじゃい！という感じではありますが、結果として2番の
setOnClickListenerの時点でOnClickListenerをnewして渡す実装が一番はやいようです。

| 　　　　 | 　　1 | 　　2 | 　　3 |
|:--------|-----:|------:|-----:|
|平均nano秒|226010.5|195421.9|206880.2|


今回しようしたコードはGitHubにあげておきました。
https://github.com/futabooo/ClickListenerSpeed


## 終わりに
来年はもっと準備をしていいTips書けるように頑張りますorz
Goutteではまった

巷ではgoutte vs simple_html_dom が話題ですが
goutteはyoutubeのスクレイピングは出来ませんでした。
というかgoutteのせいではなく内部で使用しているsymfonyのdomcrawlerが原因ですが。

```scraping.php
<?php
require('./vendor/autoload.php');
use Symfony\Component\DomCrawler\Crawler;

$url = 'https://www.youtube.com/results?search_query=php';

$crawler = new Crawler();
$crawler->addContent(file_get_contents($url));
echo $crawler->html();

```

これでどうなるかというと
javascript内の

```
var content = '<!DOCTYPE html><html><head></head><body>' +iframeContent + '</body></html>';
```

の一文を誤解析して、この先の内容がどうやっても取れませんでした。

2015/6/12

さらに調べてみると内部で使っているphp組み込みのXML DOM Parserが根本原因のようで、
いろいろイレギュラーな形になっているっぽいHTMLの都合は考慮されていないみたい。

simple_html_domは完全に自前のParserで正規表現を使ってscriptタグを排除したりいろいろしてくれているのでphpでスクレイピングするならこちらのほうが無難のよう。
Google Apps Script でセル内容を使ってメールを送信する

なんかすでにありそう。
トリガーを使えば、フォーム投稿時やcron的に時間指定で以下のスクリプトが実行できて便利ですね。

例えば以下のようなシートがあって、直編集やフォームで入力したものがあったとする。

![sheet](http://i.gyazo.com/c07967e16727985bcc74d95c7ab43a66.png)

```js
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet(); // 現在のシートを取得
  var data = sheet.getDataRange().getValues(); // 全セルデータを2次元配列で取得

  for (var i = 0 ; i < data.length; i++) {
    // 送信済みでない場合は送信
    if (data[i][3] === '') {
      data[i][3] = '済' // 送信したら済にする
      MailApp.sendEmail("hoge@example.com", data[i][1], data[i][2]); // 送信
      sheet.getDataRange().setValues(data); // 「済」をシートに反映して、2回以上送られないようにする
      break;
    }
  }
}
```

送信されていない件名/本文のみ投稿される。

便利そう。

フォームの作成方法や、トリガーの使い方、そもそものGASの使い方はggrks。
プログラマになること#2


###記述する動機
私、とある専門学校でPGを教えています。はや８年。
いまだにSEもやってます。
学生さんたちに読んでもらうために書いているのですが、悩めるプログラマ、悩めるSE、悩める教育関係者にも何かのヒントにはなると思い、公開していきたいと思います。全て実例です。個人名は秘密！！

###出会い
私、10数年前、フリーのエンジニアとして、多忙な日々を送っていました。
縁あって、古巣の◯EC系の仕事を受けました。先輩、同期とあうことが出来嬉しい次第。マネージャーから「鍛えて下さい。宜しく」とA君を渡されます。？？？

私「今回、Unix,Oracle,VBなんですけど、どれは大丈夫？」
A君「全て知りません。ずっと汎用機ばっかりでしたので。」
私「そうですか。じゃ考えます。きついこと言うけど、ま、やろうね。」
A君「はい。」

###環境
ハードもソフトもすぐに調達（さすがにメーカー系）
CS環境はこちらで準備。

###本気の行動
私「今回、どこまでやれる必要があるの？」
A君「全てと言われてます。」
私「そりゃ出来ん。無理ですよ。おそらくこのあたりです。確認は私でとっておきます。結構たいへんよ？やれるかい？」
A君「先輩に学べと言われています。」

書籍を３冊渡しました。「基本中の基本です。あとは自分で探しましょう。明日、成果を確認します。」
翌日「わからないところをリストアップしてきました。」
「もっとやらないとね。」
以下、繰り返し。

###たったの二人
「設計は分かってくれたと思います。、DBは私がやるので、あなたは画面の実装をお願いします。テストケースは心配しないで良い。」５人✕３ヶ月の見積もり…二人共ゲッソリ
仕方なし。他のSEはそれぞれやってて、時々ドキュメントのサポートしかできなかったから

###カットオーバー
無事、納品物（省庁向け）も出来ました。良かったね。
私はやりかたを少しだけ伝えただけです。
BigQueryでUPDATE？？

#はじめに
先日のGCP ja Nightはどーもありがとうございました。
『運用がQiitaだと？』と言うつぶやきもありましたが、まぁそれはそれで良いと思うんですよね。世の中の常識の運用なんてぶっ飛ばしていいと思う。運用から見えてくるいろんなモノを新しいテクノロジーで解決するってのも積極的にやらないとね。じゃないと開発だけにお株を奪われてつまんないでしょ？（笑）
で、その中でうちの子が言ってた**『データをアップデート出来ない？気にしなきゃいいんだ！』**を詳しく解説したいと思います。
#どういうデータをアップデートするのか？
そもそもBigQueryに入れているデータなんてアップデートするもの入れなきゃ良いんじゃない？ということもあります。が、うちの場合だと商品マスタなどを入れて他のデータとJOINすることがあります。
なんで商品マスタをアップデートする必要があるか？例えば某48人居るアイドルグループの場合、総選挙で結果が出るとすぐにCDの予約が始まったりします。でも、その時はタイトルが『タイトル未定（仮）』とかになるんですね。そして、後ほどタイトルが決まり発売になるという流れです。その際にずっと『タイトル未定（仮）』だとカッコ悪いし？かと言って商品マスタを毎日全部入れ替えるのなんてなんだかなぁ。。だからアップデートしたいということになります。
#じゃ、どうする？
と、言うことで考えました。どーすっかな？と。
##吐き出すレコードにタイムスタンプを持たせる。
で答えが**『レコードにタイムスタンプを持たせる』**ということにしました。まずはデータ吐き出しのところを改修しました。基準としては商品マスタが書き換わったものを差分データとして吐き出します。その際に吐き出した時間を各レコードの最後にタイムスタンプとして持たせます。Oracleだとsysdateという感じで。
##インポートするときもTIMESTAMP型で。
BigQueryに差分データをインポートする際に、タイムスタンプも入れ込みます。その際にTIMESTAMP型でインポートしましょう。
##Viewを作ります。（これが一番のポイント！）
で、Viewを作ります。どうやって作るか？
まずはBigQuery ConsoleにアクセスしてSQLを入力します。
SQLは簡単に言うとselectのところでタイムスタンプのmax値を取ってくるってわけです。

例としてカラムがshohin_name,shohin_code,shohin_price,update_dateとしましょう。
update_dateがデータ差分入れ込み時のタイムスタンプとします。
データセットがhoge、テーブル名がshohin_masterとします。

```sql
SELECT
 shohin_name,
 shohin_code,
 shohin_price,
 max(update_date)
FROM
 [hoge.shohin_master]
GROUP EACH BY
 shohin_name,
 shohin_code,
 shohin_price
```

こんなSQLを入力して最後に**『Save View』**を押下して、Viewを作ります。
![view.jpg](https://qiita-image-store.s3.amazonaws.com/0/49108/b9b806fb-ea91-6a35-7155-2663ebbc7854.jpeg)
これで、このViewを参照することで最新のデータを取ることが出来ます。
#アップデートじゃないじゃん！
まぁ、そう言うなよ（笑）
でも、これで最新のデータとって来れるわけでしょ？うちで調べてみると約3%ぐらいがマスタデータ変わってるのでこれで十分です。
だがしかーし！これだと約1か月ほどで倍の容量になるわけで。それはそれでもったいない。
じゃ、どーする？？？？
#たまには洗い替え
と言ってもわざわざデータをまた吐き出してやるわけじゃない！BigQueryでやればいいわけですよ。
どうやるか、一時テーブルを作ってそこにViewのデータを突っ込む⇒一時テーブルのデータを元のテーブルに戻す、という感じで。
これもBigQueryConsole上でやっちゃいます。（コマンドでも出来るけどね）

```sql
SELECT
 *
FROM
 [hoge.view_master]
```
これを実行するときに以下のようなオプションにします。
**『Destination Table』を一時テーブルの名前を入力。この場合は[TMP_TABLE.tmp_master]。**
（すでにある場合は『Write Preference』を『Overwrite table』を選択）
**『Results Size』の『Allow Large Results』にチェックを入れる。**
![temp_table.jpg](https://qiita-image-store.s3.amazonaws.com/0/49108/596c49bc-d7e6-c8ee-3f8b-0af0cbc74538.jpeg)
あとはこれを元のテーブルに戻してやります。同じですが、すでにテーブルがあるのでデータ入れ替えということで『Write Preference』を『Overwrite table』に必ずチェックを入れます。

```sql
SELECT
 *
FROM
 [TMP_TABLE.tmp_master]
```

**『Destination Table』を商品マスターの名前を入力。この場合は[hoge.shohin_master]。**
**『Write Preference』を『Overwrite table』を選択。**
**『Results Size』の『Allow Large Results』にチェックを入れる。**
これでデータ入れ替えが完了です。
ちなみにテーブルをdropしてからcreateをするのは厳禁です！これだとViewの作り替えをしなければならないからです！絶対にやめましょう！**これで何度泣いたことか！**
#応用編として
これと同じようなことでカラム追加なんかも出来ますよ～っと。
#最後に
どーでしたか？工夫次第でアップデートみたいなことも出来るわけです。
洗い替えもBigQueryのパワーを使えば、一からデータ吐き出して作り替えないでも簡単に恐ろしく短時間でできます。これは体感してみないとわかんないですね。
ちなみに5千万件、23GBぐらいのデータで2分20秒。これってすごくないですか？
このあたりのお話は[第一回GCPUG in Tokyo！](https://atnd.org/events/60584)でやりますね。興味がある方は是非！
見ているページのタイトルとURLを取得するブックマークレット


# やりたかったこと

## 背景
Webサイトを見ている際、Twitterにリンクを投稿したい場合や、自分のメモにURLを残したい場合に、ページタイトルとURLを併記したテキストが欲しかった。

## 目標
Webサイトを見ているときに、以下のように「Twitterで投稿する」or「表示したテキストをコピーして利用する」のが目標。
ブックマークレットを選んだ理由は、ブラウザのキーボードショートカットから素早く実行できるため。

### テキストのコピーだけしたいとき

こんな感じでブラウザ上のダイアログに表示する。
あとはCommand+Cでテキストをコピーした後、Escを押してダイアログを消せばOK。

![スクリーンショット 2014-12-22 15.38.29.png](https://qiita-image-store.s3.amazonaws.com/0/62874/5faaf4e7-703a-1ceb-023c-5fa7146a6a3f.png "スクリーンショット 2014-12-22 15.38.29.png")

### Twitterに投稿したいとき

こんな感じで別タブに開く。

![スクリーンショット 2014-12-22 15.11.25.png](https://qiita-image-store.s3.amazonaws.com/0/62874/04543242-ce80-ba1f-f1d3-389573813c1d.png "スクリーンショット 2014-12-22 15.11.25.png")

# 成果物

## ブックマークレット本体

### テキストコピー用

```bookmarklet_prompt.js
javascript:prompt('Title%20+%20URL',document.title+'%5Cn'+location.href)();
```

### Twitterに投稿できるもの

```bookmarklet_twitter.js
javascript:open('https://twitter.com/intent/tweet?text='+document.title+'%5Cn'+location.href);void(0);
```


## おまけ(Operaでの便利な使い方)

ブックマークレットを実行できるようにお気に入りに登録。
![スクリーンショット 2014-12-22 15.06.18.png](https://qiita-image-store.s3.amazonaws.com/0/62874/a368d7eb-8b37-24bd-a003-a53b4a057fb3.png "スクリーンショット 2014-12-22 15.06.18.png")

上記のように設定すれば、アドレスバーに「t」と入力するだけでブックマークレットを実行することができる。
実際に打つキーの全ては以下。

1. Command + L : アドレスバーにフォーカス
1. t : アドレスバーに「t」と入力
1. Enter : ブックマークレットを実行

これだけのコマンドで、新しいタブに以下のようなテキストで開くことができる。

![スクリーンショット 2014-12-22 15.11.25.png](https://qiita-image-store.s3.amazonaws.com/0/62874/04543242-ce80-ba1f-f1d3-389573813c1d.png "スクリーンショット 2014-12-22 15.11.25.png")

# 参考
タイトル・URL・選択テキストをコピーする Bookmarklet - Fluffy white croquis
http://align-centre.hatenablog.com/entry/2013/12/16/234604
html_safe、raw、「<%==」の比較

# html_safe よりも raw

[RailsGuidesの「5.1 Output Safety」](http://guides.rubyonrails.org/active_support_core_extensions.html#output-safety)に「To insert something verbatim use the raw helper rather than calling html_safe」とある。

```erb
<%= @cms.current_template.html_safe %>
```

ではなく：

```erb
<%= raw @cms.current_template %>
```

を使えということだが、これはなぜだろうか。RailsGuides には理由が書かれてない。

まず「@cms.current_template が nil だった場合に例外が起きないから」という理由が考えられる。nil には html_safe メソッドが存在しないため、例外が起きてしまう。「[When to use raw() and when to use .html_safe](http://www.tigraine.at/2012/08/23/when-to-use-raw-and-when-to-use-html_safe)」で指摘されている通りだ。

また、raw ヘルパーを使うことで、エスケープ処理の回避が明確になるのも利点の一つと考えられる。

```erb
<%= @safe_content %> <%# @safe_content = unsafe_content.safe_html %>
```

よりも：

```erb
<%= raw @safe_content %>
```

のほうが分かりやすい。

やはり RailsGuides に従って、html_safe ではなく raw を使うのが適切だろう。

# raw よりも「<%==」

raw の他に RailsGuides で推奨されているのが「<%==」を使う方法である。

```erb
<%== @cms.current_template %>
```

この方法でも nil の例外は起きない。また、エスケープ処理の回避が明確になる。html_safe ではなく、raw あるいは「<%==」を使うべきだ。

さらに「<%==」には、raw と比べてもパフォーマンス上のメリットが少々ある。

```rb
handler = ActionView::Template::Handlers::ERB.new
handler.call ActionView::Template.new('<p><%= raw val %></p>', '', handler, {})
# => "@output_buffer = output_buffer || ActionView::OutputBuffer.new;@output_buffer.safe_append='<p>';@output_buffer.append=( raw val );@output_buffer.safe_append='</p>';@output_buffer.to_s"
```

```rb
handler = ActionView::Template::Handlers::ERB.new
handler.call ActionView::Template.new('<p><%== val %></p>', '', handler, {})
# => "@output_buffer = output_buffer || ActionView::OutputBuffer.new;@output_buffer.safe_append='<p>';@output_buffer.safe_append=( val );@output_buffer.safe_append='</p>';@output_buffer.to_s"
```

「`@output_buffer.append=( raw val )`」より「`@output_buffer.safe_append=( val )`」のほうが、ほんの少々速いはずだ。前者では val#html_safe? メソッドが呼ばれるのに対し、後者では呼ばれないからだ。