OmniAICreator/Qiita-1.07M huggingface dataset:
NIPS 2016参加報告

<img width="500" alt="nips2016" src="https://qiita-image-store.s3.amazonaws.com/0/23665/f6d47b44-6f00-ee78-f2c5-384d72b38694.jpeg">

先週スペインのバルセロナで開催された機械学習のトップ会議NIPS 2016に参加してきました。[論文はWebで公開されている](http://papers.nips.cc/book/advances-in-neural-information-processing-systems-29-2016)ので誰でも読むことができますが、口頭発表を聞いたりポスター発表のディスカッションに参加したり休憩時間中の会話などからも学びがあるため、最先端の研究を知るために参加する意義は失われていないように思います。


NIPSの参加者は指数的に増加していると言われており、今年は5000人（！）の参加者がいました。当然論文の査読も厳しく、採択率は20％前後と言われています。分野のトレンドとしてはディープラーニングのブームが続いていますが、認識系はかなり成熟してきたのでGANなどの生成系と強化学習や外部記憶との組み合わせに中心が移ってきているようです。特に強化学習は会議中にシミュレーション環境の[Open AI Universe](https://universe.openai.com/)と[DeepMind Lab](https://deepmind.com/blog/open-sourcing-deepmind-lab/)が公開され、熱気を感じました。

<img width="501" alt="andrew_ng" src="https://qiita-image-store.s3.amazonaws.com/0/23665/1d1c4432-0a6d-76f3-47d0-2dd5716b9470.png">

5000人の聴衆を前にホワイトボードで講義をするスタンフォード大・バイドゥのAndrew Ng先生（もちろん巨大スクリーンで拡大される）。博士課程の学生へのアドバイス：１．論文をたくさん読む　２．既存の結果を再現する　３．汚れ仕事をする（データ収集・前処理など）とのこと。

チュートリアルはこのほか[強化学習](http://people.eecs.berkeley.edu/~pabbeel/nips-tutorial-policy-optimization-Schulman-Abbeel.pdf)と[GAN](http://www.iangoodfellow.com/slides/2016-12-04-NIPS.pdf)を聞きに行きました。ベストペーパーは[強化学習にプラニングモジュールを組み込んだ論文](https://arxiv.org/abs/1602.02867)が選ばれました（早速[実装](http://qiita.com/peisuke/items/0440bbcd11d366352990)している日本の人がいますね！）。[RNNシンポジウム](http://people.idsia.ch/~rupesh/rnnsymposium2016/)ではネイチャー論文の[Differentiable Neural Computer](https://deepmind.com/blog/differentiable-neural-computers/)をはじめ、アルゴリズム学習と記憶モジュールに関する発表がありました。ポスター発表はRNNや機械翻訳を中心に聞きに行き、[LightRNN](https://arxiv.org/abs/1610.09893)という効率化手法、遷移行列への[Dropoutの適用](https://arxiv.org/abs/1512.05287)、[Actor-Criticを使ったBLEU最適化](https://arxiv.org/abs/1607.07086)、[単言語コーパスとパラレルコーパスを組み合わせた機械翻訳](https://arxiv.org/abs/1611.00179)などが面白いなと思いました。

[ディープラーニングの効率化](http://allenai.org/plato/emdnn/index.html)のワークショップでは、[量子化（Quantization）や枝刈り（Pruning）](https://arxiv.org/abs/1510.00149)から専用ハードウェアの開発までいろいろな手法について発表がありました。[RNNにも適用](https://arxiv.org/abs/1608.06902)されているので調べてみたいと思います。[対話システム](http://letsdiscussnips2016.weebly.com/)のワークショップでは、単純な[seq2seq](https://arxiv.org/abs/1506.05869)から一歩進んだモデルや、[強化学習を使って対話的に学習するエージェント](https://arxiv.org/abs/1606.01269)の発表がありました。

<img width="500" alt="barcellona" src="https://qiita-image-store.s3.amazonaws.com/0/23665/a9bac703-97b8-c481-dad6-ef7447ae8cb3.jpeg">
バルセロナの世界遺産、サグラダ・ファミリア。

私はACLなど自然言語処理系のカンファレンスには参加したことがありますが、[word2vec](https://papers.nips.cc/paper/5021-distributed-representations-of-words-and-phrases-and-their-compositionality.pdf)や[ニューラル翻訳](https://papers.nips.cc/paper/5346-sequence-to-sequence-learning-with-neural-networks.pdf)などの重要な研究がNIPSで発表されるようになったため、今回初めてNIPSに参加することにしました。またNIPSに行く前に予習として[Suttonの強化学習本](https://webdocs.cs.ualberta.ca/~sutton/book/the-book-2nd.html)を読んで[方策勾配法を実装](https://github.com/yohokuno/reinforce)したり[GANの元論文](https://arxiv.org/abs/1406.2661)を読んだりしていったため、なんとかついていくことができたかなと思います。Andrew Ng先生が言っていたように機械学習について深く理解するには既存論文の結果を再現できるようになることが第一歩となるので、来年はその辺りを重視していきたいと思いました。
アジャイルについてつらつら　その２

こんにちは。

前回の[アジャイルについてつらつら　その１](http://qiita.com/houren/items/0a6b7632361210a3b45a)のつづきです。

このような絵で終わっていました。
<img width="1166" alt="アジャイル.png" src="https://qiita-image-store.s3.amazonaws.com/0/150624/7bae2c4a-41a3-5f21-5317-9e7e98c279b9.png">

アジャイルのながれからやっていきます。

## アジャイルのながれ
大枠の企画が決まるとイテレーションと呼ばれる開発サイクルに入ります。
1サイクル内で計画〜テストまでを行い、次のイテレーションに進む前にプログラムのリリースが行われます。
それらを繰り返していくことで方向性の認識齟齬や要求との乖離を最小化することができるようになります。

いいねー、かっこいいねー。

よくアジャイル開発と比較される開発手法にウォーターフォールがありますが、こちらは企画、計画、実装という各工程において基本的には戻らない(上流から下流へ一方向)思想のため、アジャイルとは全く異なった開発手法とされています。

自身はこれをべったりやっています。

## アジャイル開発についてよく言われている1問1答をまとめました。
※実体験じゃありません（だってやったことない

【１】アジャイル開発って気合いですよね？
・どんな開発手法でも必要な部分ではありますが、アジャイル開発は常に変化する状況に対応したり、チーム内のコミュニケーションを重視する習慣から、経験が豊富でコミュニケーション能力が高く、アジャイル開発に慣れたコントローラが必要となることがほとんどです。
　チームメンバーの性格を鑑みて適した判断を行えるリーダーがいれば、よりスムーズでよりよいアジャイル開発ができるでしょう。

【２】アジャイル開発ってドキュメントを書かないんでしょ？
・いえいえ。そんなことはありません。
　完成したドキュメントよりも実際のプログラムを重視するだけでドキュメントもきちんと書きます。
　他の開発手法よりもプログラムの優先順位が高いだけです。
　イテレーションごとにしっかりと計画を立てて、実装もドキュメントも作成します。

【３】設計しないんじゃないの？
・前述の通り、1つのイテレーションの中で設計も行います。
　ドキュメントについても必要最小限となることが多いですが、きちんと書きます。
　場当たり的に進めてしまってはプログラムの完成度が低くなります。
　しっかりとした計画・設計の上にアジャイル開発は成り立ちます。
　　
【４】仕様変更はいつでも受け入れ可能でしょ？
・開発サイクルが短く、プログラムに反映させやすい開発手法ではありますが、なんでもかんでも仕様変更を受け入れ可能とは異なります。
1つのイテレーションの中でも設計、実装がありますので、仕様変更を受け入れることによって少なからず手戻りは発生します。
プログラムへの影響度とクライアントの温度感をしっかりと見極めることが大事でしょう。

といったかんじです。
　　
開発手法は流行り廃りがあって、諸説あることが多いですが、アジャイルにかぎらず、どの開発手法でも総じて言えることが多い印象ですね。
ソフトウェアも、人がつくり、対人のためにつくっているというのを念頭に置いて進めるんだろうな、と思いました。

いろんな手法があって、それを選択できるような知識とノウハウと行動力を伴い、
よりよい取捨選択ができるようになりたいなと思います。

アウトプットして、ちしき固めていくぞ〜。
エンジニアが何かを伝える時に心がけておきたい1つのこと

これは[マイネットエンターテイメント Advent Calendar](http://qiita.com/advent-calendar/2016/mynet) 13日目の記事です。
本日は、[nakashimamynet](http://qiita.com/nakashimamynet)が担当させていただきます。
Qiitaに記事を投稿するのは初めてですが、よろしくお願い致します。

さて、今回は少し技術ネタから外れてしまいますが、
"技術"を扱う人がたまに失いかけている"技術"のお話です。


## はじめに
想像してください
> 貴方はSE・エンジニアとしてこの会社に入り3年が経ちました。
> 技術は高く、周りから厚い信頼を置かれています。
> ある日、新人が入社してきました。
> 貴方は新人の研修係になりました。
> 
> さぁ研修のはじまりです。
> 貴方は前から作った手順書を用意して、こう言いました。
> 「よし、じゃあまずはこの手順書で開発環境を作って動くところまでやってみて」
> ところが後輩はこう言いました。
> 
> 『やり方がわかりません』

・・・この時、あなたはどう感じたでしょうか。
「教えがいがあるな～と感じた人」「イラッと感じた人」「何も感じなかった人」
色々いると思います。

これだけでは当然判断できませんが、ここで1つ。

「その手順書は、**誰が見ても**わかるものだったのでしょうか」



## 絶対知っている保証なんてどこにもない
"誰が見ても"というのは、あなた以外の全ての人です。

- 新人エンジニア
- 先輩エンジニア
- さらに上司
- 他職掌の職員
- 客先のユーザーさん
- はたまた部外者の老若男女…etc

例えば、
「SVNからチェックアウトする」と書かれていたとしたら、どれだけの人がわかるでしょうか。
「GitHubでプルリク送って」と書かれていたとしたら、どれだけの人がわかるでしょうか。

自分以外の相手に何かを伝える・教えるとき、
**相手が何をどこまで知っているのか**はわかりません。
その手順書に書かれている前提を全て絶対に知っている保証なんてどこにもないのです。


## 伝えるために必要なこと
物事を教えるときは、
**「相手が何をどこまでできるか、自分が把握した上で適切に導く」**ことが必要だと思います。

先の例でいうとこういう例が挙げられます

- 後輩は何がわからなかったのか
  - 用語がわからないのか
  - 手順がわからないのか
  - それともパソコンのスイッチの入れ方からわからないのか
- 渡した手順書に不備はなかったか
  - その仕事場でしか伝わらない言葉は使われていないか？
  - 誰にでも伝わるレベルまで細分化されているか？
  - 文章がざっくり仕立て(ex.適当な値にする)・ふんわり仕立て(ex.～しておいた方がいいかも)になっていないか？

もちろん内容によってはググったり自分で調べてもらうことも大切です。
全てにおいて「優しくしなさい」とは言いません。
ただ、あなたが感情的になる前にできること・するべきことは必ずあるはずです。
1番重要なのは、**相手と自分の信頼**です。

逆に、後輩側は

- 何がわからないのかを伝えられるようにする
- 手順書のここがどうわからないのかを伝えられるようにする

これらがあるだけでも、きっと相手も導きやすくなると思います。
"信頼"は一方通行では成立しません。
相互通行になってから初めて"信頼"といえるのではないでしょうか。

* * *

最近、「そんなこと聞くな」「自分で調べろ」「何でやる前に聞かなかった」という
3連コンボ使いの上司の話がよく挙がります。

先ほどの項目で「イラッと感じた人」は少々マズいです。
その「イラッ」の成分は大方"3連コンボ"に起因するからだ、と私は思います。

**「技術（だけ）は高く、（後輩以外の）周りから厚い信頼を置かれる」**
そんなエンジニアに、貴方はなっていませんか？

エンジニアに必要なのは手先の"技術"だけではありません。
心の"技術"も必要だと、私は思います。

もちろん「忙しくて余裕がない…」など状況は多々あると思います。
また、こういうやり方で成功している人も少なからずいるのも事実です。

でも。
私は平和な会社と平和な世界の方が好きです。


## あとがき
私はかつて、こういう先輩に巡り合ってしまったことがあるエンジニアの1人です。
そしてまた、自身もこういう過ちを繰り返してしまう1人かもしれません。

将来の自身が読み返すための心がけとして、この記事を残させていただきます。

次回はhazama-mynetさんです。
Twitterのエラーをいい感じにエラーハンドリングする「twitter_retry」

# twitter_retryとは?
Twitter APIのエラーをいい感じにエラーハンドリングして、必要に応じていい感じにリトライするためのgemです

* https://github.com/sue445/twitter_retry
* https://rubygems.org/gems/twitter_retry

# 作った経緯
TwitterのAPIを実行するとたまにTwitterが調子が悪くてエラーになったりすることがあります。リトライすれば成功する可能性のあるエラーは自動でリトライしたくて作りました。

一応社内でTwitter API使ってるアプリを2〜3個くらい見て処理を汎用化しています。

# 使い方
```ruby
TwitterRetry.with_handing do
  # some twitter API code
  twitter.update("some tweet")
end
```

`TwitterRetry.with_handing` のブロックの中で[Twitter gem](https://github.com/sferik/twitter) の処理を書くだけで、

* 「Your account is suspended and is not permitted to access this feature.（凍結済みユーザのエラー）」が投げられたら `TwitterRetry::SuspendedError` を投げる
* 「User is over daily status update limit.（一時的な規制）」 や 「Status is a duplicate.（重複連投）」などが投げられたらエラーは握りつぶす
* Twitter側の一時的なエラー（Over capacityやInternal errorなど）が投げられたら1秒待って3回までリトライ。それでダメなら `TwitterRetry::RetryOverError` を投げる

と、いい感じにエラーハンドリングを行います。

`TwitterRetry.with_handing` の戻り値は通常は `true` ですが、リトライしても成功する可能性が低く呼び出し側でも握りつぶしたいエラー [^ignoreble] の場合はリトライを行わず `false` を返します。

[^ignoreble]: 「Status is a duplicate.」 や「User is over daily status update limit.」など

# カスタマイズ
```ruby
TwitterRetry.configure do |config|
  config.sleep_second     = 1
  config.max_retry_count  = 3
  config.retryable_errors << [Twitter::Error, "some error message"]
  config.ignorable_errors << [Twitter::Error, "some error message"]
end
```

[デフォルトの設定](https://github.com/sue445/twitter_retry/blob/v0.1.0/lib/twitter_retry/config.rb#L4-L14) でだいたい事足りると思いますが、もしリトライ対象のエラーや握りつぶしたいエラーを追加したい場合には `retryable_errors`や `ignorable_errors` に追加してください。
CSS Flexboxを使おう

# はじめに

この記事は、 [OIT Advent Calendar 2016](http://www.adventar.org/calendars/1423#list-2016-12-11)の12日目の記事です。

# Flexbox とは？

Flexboxは**Flexible Box Layout Module**の略です。

CSS3から導入されたレイアウトモジュール
floatにサヨナラを告げる機能です。

解説されつくされている感があります。
未だにfloatしてる人は考え直したほうがいいです。

# 基本的な使い方

親要素に**flex**指定するだけ。

```css
.flexbox {
  display: flex;
}
```

## やってみる

```html
<ul>
  <li><p>List1</p></li>
	<li><p>List2</p></li>
	<li><p>List3</p></li>
	<li><p>List4</p></li>
	<li><p>List5</p></li>
</ul>
```

これだけだと

![2016-12-12 (1).png](https://qiita-image-store.s3.amazonaws.com/0/100319/3bdf7df0-863c-817c-d9aa-29f92d418189.png)

こうなりますが。

これに適当にflexboxすると。

```css
ul {
  display: -webkit-flex;
  display: flex;
  list-style: none;
}

li {
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  line-hight: 1;
  color: #fff;
  background: #aaffaa;
}

li:first-child {
  background: #aabbcc;
}

li p {
  margin: 0;
  padding: 0;
}
```

![2016-12-12 (2).png](https://qiita-image-store.s3.amazonaws.com/0/100319/da3b14ee-b6ac-3537-189d-a1ddefe7fca0.png)

こうなります。

横並びになります。

# 自動折り返し

上のままだと、ブラウザのスクリーンを小さくすると、

![2016-12-12 (3).png](https://qiita-image-store.s3.amazonaws.com/0/100319/b408cb87-de08-7023-c8f7-5f24a838fd07.png)

こうなります。

はみ出します。

## flex-wrap

ここで紹介したいのが、**flex-wrap**です。

**flex-wrap: wrap;**
の1行を追加します。


```css
ul {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  flex-wrap: wrap; /* 折り返し */
}

li {
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  line-hight: 1;
  color: #fff;
  background: #aaffaa;
  flex-wrap: wrap;
}

li:first-child {
  background: #aabbcc;
}

li p {
  margin: 0;
  padding: 0;
}
```

![2016-12-12 (5).png](https://qiita-image-store.s3.amazonaws.com/0/100319/b8dc0878-dae3-467e-5f8c-2f5f3eca8da7.png)
![2016-12-12 (6).png](https://qiita-image-store.s3.amazonaws.com/0/100319/472c5980-632a-7ea0-08da-14f2862954bd.png)


なんかいい感じに折り返すようになりました。

# Vertical Align（Flexboxの美味しいところ）

floatやJavaScriptで頑張っていたのがウソのように簡単。

以下の3つで設定できます。

- align-items

flexコンテナ（親要素）に指定し、すべての子要素の垂直方向の配置を設定する。


- align-self

flexアイテム（子要素）に指定し、個別に垂直方向の配置を設定する。


- justify-content

flexコンテナ（親要素）に指定し、水平方向の配置を設定する。

ということで、次のように書けば。


```css
.contents {
  display: -webkit-flex;
  display: flex;
  width: 800px;
  height: 400px;
  margin: 20px auto;
  background: #f3f3f2;
  border-radius: 5px;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.align {
  background: rgba(0, 0, 255, 0.3);
  -webkit-flex: none;
  flex: none;
}
```

```html
<div class="contents">
    <div class="align">
        <p>floatを使っていた時代からは考えられないくらいに垂直中央揃えが楽だ。</p>
    </div>
</div>
```

![2016-12-12 (7).png](https://qiita-image-store.s3.amazonaws.com/0/100319/6757d1f1-45ba-6a09-8995-97b4938c1547.png)


こうなります。

Flexbox、最高では？
Vulsのログから、悩ましいescape sequenceを取り除く

この記事は[Vuls Advent Calendar 2016](http://qiita.com/advent-calendar/2016/vuls)の、13日目の投稿となります。

7日目に[標準化した、Vuls/VulsRepoの導入](https://qiita.com/drafts/239c0ad02ac409e34f12)の記事を投稿しています。

# 概要

普段は使わないけれども、トラブルシューティングの際に非常に悩ましいことになる /var/log/vuls の **Escape Sequence** を含んだログを、きれいにする方法を記載します。

# どうするのか

sedで切ってあげれば良い

```bash:remove_escape_sequence
$ cat /var/log/vuls/localhost | sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[m|K]//g" | more
```

![remove-esc.png](https://qiita-image-store.s3.amazonaws.com/0/124868/4a04579e-11fd-63d0-a042-9c87288b7641.png)


必要に応じて、ファイルにリダイレクトしたりしてください。

## ついでに

logrotate登録してしまいましょう。

```text:/etc/roglotate.d/vuls
/var/log/vuls/* {
  missingok
  ifempty
}
```

# 備考

- vulsのログの処理は、結構忘れがちかもしれません。
    - /etc/logrotate.d/vuls辺りで、他のログと同じようにローテーションしましょう。
        - そもそも、トラブル以外でVulsの過去のログ見る必要は無いかも…
    - README.md通り作れば、アクセス権は一応セキュアにできる
        - /var/log/vuls
            - vuls:vuls 700
        - /var/log/vuls/report.log
            - vuls:vuls 600
        - /var/log/vuls/* (report.log以外)
            - vuls:vuls 664
ShellScriptで作るウェブサーバー

shellscriptだけでウェブサーバーを立てる方法です。

```bash
$ php -S 0.0.0.0:3000
```
これだけで今いるディレクトリのファイルを `http://localhost:3000` にアクセスするだけで見ることができます！
知らない人もいると思うので書きました！　ぜひ役立ててください！
　
　
　
　
　
　
　
　
　
　
　
　
　
## で終わると思ったか
この世界では……shellscriptだけで動くか動かないかなんだよ！
なので、標準で入っているコマンドだけでウェブサーバーを立ててみようと思います。

### Netcatというコマンド
Netcat(nc)とは、Unix系のOSには大体標準で入っている、TCPやUDPのパケットを読み書きすることができるツールです。
例えば。tcpの通信を待ち受けることができます。
次のコマンドでcurlからのリクエストを読み取ってみましょう。

```bash
$ nc -k -l 3000 | curl -s localhost:3000
```
```bash:結果
GET / HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.49.1
Accept: */*
```
おみごと！　あなたはcurlからのリクエストを見ることに成功しました。
では、次にncからの情報をブラウザから受け取ってみましょう。

### ncから受け取る
ncは待ち受けるだけでなく、pipeを通して接続してきたクライアントに情報を返すことも可能です。
次のコマンドを入力してブラウザから `localhost:3000` へアクセスしてみてください。

```bash
echo "example" | nc -l 3000
```
ブラウザ上に`example` の文字を見ることができましたね？
つまり、これを整形して、適切なファイルを送り返すシェルスクリプトを書くだけで、ウェブサーバーが動くということです。


## ncコマンドを使って作る一番単純なウェブサーバー
ただ表示するだけのコマンドなら、書く内容はとてもは単純です。
ncで取得できるHTTPヘッダーから、要求されたファイル名を読み取ってそのファイルを表示するだけです。
awkを使って、HTTPと書かれた行だけ取り出してみます。
次のコマンドを入力してブラウザから `http://localhost:3000/index.html` へアクセスしてみてください。

```bash
$ nc -kl 3000 | awk '/HTTP/{print substr($2, 2)}'
```
```bash:結果
index.html
```
無事、目的のファイルの名前を取り出すことができました。
ではあとはこれをcatで表示するだけで目的のファイルの内容を見ることができますね。
同じディレクトリに `index.html`を作成して、適当なHTMLを書き込んで、次のコマンドを実行してみましょう。

```bash
$ nc -kl 3000 | awk '/HTTP/{system("cat " substr($2, 2))}'
```
ブラウザからアクセスしてみるとコマンドラインに次のように出力されるはずです。

```html:結果
<!DOCTYPE html>
<html lang="en">
<body>
  これはテストです
</body>
</html>
```
みれましたね。あとはブラウザへ返却するだけです。次へ行きましょう。

### 動くけど動かないコマンド
単純にpipeをつなげてみました。

```bash
$ nc -kl 3000 | (awk '/HTTP/{system("cat " substr($2, 2))}'| nc -l 3000)
```
ですが、このままでは動くけど動きません。
実行してもらえばわかると思いますが、何度かリロードすると、見れる時とみれない時が出てきます。
待ち受けているncと送出するncが重複しているからでしょうか。待ち受けてる時は出せないし、出してる時は受け取れないようです。
どうやら、送受信を同時に上手いことやってくれるわけではないようですね。

pipeでつなげば受け取れることはわかっています。ですので、受け取った内容をそのまま出力できるようにしてみましょう。

### mkfifoコマンド
そこで、mkfifoというコマンドの登場です。

参考：[mkfifoコマンドって使ってますか？](http://qiita.com/richmikan@github/items/bb660a58690ac01ec295)

ざっくりというと、あるコマンドから受け取った内容をそのままpipeとして返すことができるコマンドです。
このコマンドを利用して、ncから与えられた情報を処理して返すようにしてみます。

```bash
$ /usr/bin/mkfifo backpipe
$ nc -kl 3000 -w 1 0<backpipe | awk '/HTTP/{system("cat " substr($2, 2))}' 1>backpipe
```
ブラウザから `http://localhost:3000/index.html` へアクセスしてみましょう。
無事、HTMLファイルが表示されたはずです。

そう、シェルスクリプトだけでウェブサーバーは作れるんです。

## 最後に
ワンライナーで動くウェブサーバー使えばいいと思います。

[ワンライナーWebサーバを集めてみた](http://qiita.com/sudahiroshi/items/e74d61d939f18779970d)
複数の不定パターンのファイル名を指定するワンライナー `nf`

この記事は [Akatsuki Advent Calendar 2016](https://qiita.com/advent-calendar/2016/aktsk) の13日目です。

## はじめに
Advent Calendar でワンライナー紹介もなんだか、、と思ったのですが、以前に若手エンジニアに教えたら感心していたので紹介します。ちなみに私の回りのディレクターもいつも使っています。

## さっそく実例
git で以下のように変更があったとします。

![image](https://qiita-image-store.s3.amazonaws.com/0/31030/e3fec57c-ae06-5ca7-0694-7b46dc6ff270.png)

このうち、 `csv/battle_comments.csv`, `csv/battle_periods.csv`, `csv/battles.csv` の 3 つのみを add したいとします。

この場合、普通は以下のようなコマンドラインになります。

```shell-session
$ git add csv/battle_comments.csv csv/battle_periods.csv csv/battles.csv
```

長いです!!! ファイル名の正確なコピペが辛いです。ワイルドカードでもう少し省略して書くこともできますが、面倒くさいです。いちいちエディタを起動して、コマンドラインを組み立てるのも手間です。

自分は以下のようにします。

```shell-session
$ git add `awk '{print $NF}'`
```

上記を実行すると入力待ちになるので、 add したいファイル名を含む行をまとめてコピペして、最期に行頭にカーソルがある状態で CTRL+D を押します。一瞬 ^D が表示された後、プロンプトに戻って 3 つのファイルが add された状態になります。

一応実行した時のキャプチャも貼り付けておきます。
![image](https://qiita-image-store.s3.amazonaws.com/0/31030/a92844da-0fc2-4338-db05-e8ca76f189b5.png)

動作原理としては、標準入力より awk によって、最期のフィールドだけを取り出して(`print $NF`)、それを shell のコマンド置き換え機能で git に渡しているということです。

意外と shell のコマンド置き換え機能で改行がスペースに変換されるということを知らない人は多く、これがわからないとなぜ動作するのかもわかりづらいと思います。


### コマンド化してみる
毎度上記の如くタイプしても良いわけですが、ちょっとでもタイプ量を減らすために

```shell-session
git add `nf`
```

だけで実行できるようにします。いくつかの方法で実装しますが、せっかくなので shell script で実装するものは何番目のフィールドを取り出すかも指定できるようにしてみます。

#### alias(awk, フィールド番号指定不可)
```shell-session
alias nf='awk "{print $NF}"'
```

#### alias(ワンライナー ruby, フィールド番号指定不可) 
```shell-session
alias nf="ruby -a -n -e 'puts "'$F'".last'"
```

#### shell script(awk, フィールド番号指定可)
```shell-session
#!/bin/sh

if [ "$1" != "" ] ; then
  exec awk '{print $'$1'}'
else
  exec awk '{print $NF}'
fi
```

### 当然 git 以外とも組み合わせて使える
自分はこれを rm コマンドと組み合わせて untracked ファイルの削除などにも使っています。
@sachaos と話をしていたら、 `git clean` でもそれができると知りました。
それはそれでありなのですが、コマンドの組み合わせで解決できれば、他にも応用が効くかと思います。

### 終わりに
単純なワンライナーの話でしたが何かの参考になれば幸いです。
Chainerを使って☆を検出

#はじめに
　以前、Chainer Meetup #03の方でお話したネタになりますが、クリスマスということもありまして☆飾りの「角」の検出についてご紹介します。また、今回は最近話題となっているpix2pixのようなことも試してみました。


#準備
- データの作成

星の飾りを紙の上にばらまいて、デジカメで写真（画像A）を１枚とり、その後、手でシャッフルして、もう１枚写真（画像B）を撮影しています。画像Aは学習用に使い、画像Bはテスト用に使います。

- 教師画像の作り方

星の角の位置を教える画像を作るため、まず、星の角をクリックして、位置を取得するUIを作成しました。javascriptの描画用のライブラリである[fabric.js](http://fabricjs.com/)をjupyter上で動かして、クリックした位置をpython側に受け渡して保存してます。[(jupyterでhtml-javascript側の値を取得するメモ)](http://qiita.com/samacoba/items/1fb7272fc9f13eb2bf09)

◎クリックするUIの動画
<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">教示 <a href="https://t.co/fBS7g9wnfj">pic.twitter.com/fBS7g9wnfj</a></p>&mdash; さまこば (@samacoba) <a href="https://twitter.com/samacoba/status/807922130255872004">2016年12月11日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

このクリックした位置に「球」のようなもの描画して、教師画像としています。

![20161210_教師説明 (1).png](https://qiita-image-store.s3.amazonaws.com/0/109458/3da10f36-3a0e-e8a3-6128-0b3f38fbfd95.png)


- 学習方法

＜学習時＞
画像Aからランダムな位置で画像を切り出し100枚のバッチを作成します。
生成画像が教師画像に近くなるようにネットワークを学習（後述）させます。

＜テスト時＞
学習したネットワークに画像Bを入力させ、生成画像をつくり、生成画像に対し[極大値を抽出](http://www.slideshare.net/samacoba1983/chainer-63698486/8)することで、それぞれの特徴点の位置を抽出（固定した閾値を使用）させています。その位置を使って、元の画像Bに円を重ね書きしています。

#直接誤差での学習

![20161207_直接誤差学習.png](https://qiita-image-store.s3.amazonaws.com/0/109458/a89d93ba-93d7-b515-8f8e-8436194484de.png)

生成器のネットークはconvolutionとdeconvolutionで作ってあります。学習には生成画像と教師画像の個々のピクセルに対し平均二乗誤差をとり、それを逆伝播させて生成器を学習しています。

◎直接誤差で学習の動画（動画は32倍速で再生）
描画にはbokehを使って[jupyter上に表示](http://qiita.com/samacoba/items/958c02f455ca5f3a475d)させ、それを動画でキャプチャしました。学習に使う画像Aではなく、テスト用の画像Bでの出力結果になります。

<blockquote class="twitter-video" data-lang="ja"><p lang="ja" dir="ltr">直接誤差学習 <a href="https://t.co/EEmvzitvk4">pic.twitter.com/EEmvzitvk4</a></p>&mdash; さまこば (@samacoba) <a href="https://twitter.com/samacoba/status/807908460335509504">2016年12月11日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

最初にドーナッツ状に学習した後、個々の角に球状の模様を作って学習している様子がみられます。






#pix2pixでの学習

![20161207_pix2pix.png](https://qiita-image-store.s3.amazonaws.com/0/109458/8fabdd8f-d934-3f45-672c-ba72d4b70364.png)
原論文はほぼ読めてないので、pix2pixと呼べるかわかりませんが、それっぽく学習させています。生成器Gのネットワークは同じconvolutionとdeconvolutionの形にしました。
生成器Gの学習時は判別機Dの出力が本物となるよう誤差を伝播させ、判別機Dの学習時は判別機Dが正しく判別できるように誤差を伝播させています。当然直接位置を教えてなく、正解か不正解でしか誤差は伝わらないため、学習しづらくなるはずです。今回の場合はあまり意味はありませんが、位置が重要でなく数だけ数えたい場合に便利な可能性があったので試してみました。


◎pix2pixで学習の動画（動画は96倍速で再生）
<blockquote class="twitter-video" data-lang="ja"><p lang="en" dir="ltr">pix2pix <a href="https://t.co/JbfKAzPb67">pic.twitter.com/JbfKAzPb67</a></p>&mdash; さまこば (@samacoba) <a href="https://twitter.com/samacoba/status/808068715170316289">2016年12月11日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

学習には「直接誤差での学習」よりも学習が進むのが遅くなっています。
途中で真っ黒になってだめかと思いきや、N train=180000枚くらいから復活しています。
「直接誤差での学習」の場合は星の周りにドーナッツ状になっていた過程がありましたが、こちらでは判別器だますことが重要なので、位置はともかく球ができることを優先してそうです。
成功率は５０％以下で永遠に学習しない状態に陥ることがあります。

#おわりに
今回、角の検出を行いましたが、中心を教えれば中心が検出できるはずです。
コードは読みにくいかもしれませんが、[GitHubに公開](https://github.com/samacoba/detector)してみましたので、よかったら試してみてください。
サーバーレスにWebビーコンをつくってみる。

まずおまじない置いておきます。
投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。

# はじめに

ネタ的には今更感あると思いますが、アクセス解析とかしたときにサーバーレスにつくってみたので
設定からDWHに突っ込むまでをまとめてみました。

# Webビーコンとは？
Webビーコン型とは、サイトの各ページにJSや特殊なイメージ(縦横1pxの透明なgif画像など)を貼り付けておいて、貼り付けたページがブラウザで表示されるたびに、サーバーにユーザーがアクセスしたページの情報を送る仕組みのアクセスログ解析です。
Google Analyticsもこの手法が使われてたりしますね。

# 今回やること
各AWSサービスの設定からDBにアクセスログを貯めるところまでをまとめています。

![スクリーンショット 2016-12-12 18.42.47.png](https://qiita-image-store.s3.amazonaws.com/0/12096/d586e7fb-fc83-880f-1f70-40c54df80289.png)

構成は上記の図のようにいたってシンプルな構成です。

__AWS CloudFront__
キャッシュさせてログとるためにつかいます

__AWS S3__
Imageの保管とアクセスログの保存につかいます。

__AWS Redshift__
貯めたログを貯めて解析するのに使います。

# 実装手順

## 1. 1x1.gifを作成
透過で1x1pixelのgifを用意します。
Photoshopでサクッとつくるのもよし、Webで拾ってくるのもよし。
用意できたらS3にあげておきましょう。

## 2. cloudfrontの設定

まずビーコンタグ用のDistributionを作成します。
Create Distributionを選択して`Origin Domain Name`に先程アップロードしたS3のドメインを設定しましょう。
その他の項目はデフォルトのままで大丈夫です。

![スクリーンショット 2016-12-12 18.59.48.png](https://qiita-image-store.s3.amazonaws.com/0/12096/6e1eb79b-be90-7f9e-5afe-a481187fdefa.png)

Default Cache Behavior Settingsの項目については、TTLを1秒に設定してます。
![スクリーンショット 2016-12-12 19.02.46.png](https://qiita-image-store.s3.amazonaws.com/0/12096/8c0c9bfb-9766-d39d-ea6d-e3864c1b20ee.png)

Distribution SettingsではCNAMEの登録とSSLを登録しておきます！

![スクリーンショット 2016-12-12 19.06.37.png](https://qiita-image-store.s3.amazonaws.com/0/12096/81013b53-a506-491a-f2d0-1310247f1324.png)

以上でCreate Distributionします。

そのあとできたDistributionから、Invalidationを選択
<img width="1300" alt="スクリーンショット 2016-12-12 22.41.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/12096/adc5be49-1d0c-0e62-ea6c-6607f8ab522b.png">

Create Invalidation でS3に保管してある1x1.gifのパス(/1x1.gif*)を入力

これで設定は完了です！
あとは上記で設定したパス（今回はhttps://img.hoge.com/1x1.gif）
にアクセスして問題なければWebビーコンの完成です！

## 4. LPからgifをみる
- 設置ページからのrequestがcloud frontのログにrefererとしてに載るのでquery stringのリレーはいりません

http://localhost:3000/target.html?utm_campaign=hoge&utm_source=fuga

```lp.html
<html>
  <head>
  <body>
    <h1>OK</h1>
    <img src="https://img.hoge.com/1x1.gif?event=view">
  </body>
</html>
```



## 5. s3のログを確認してみましょう

c1:  date
c2:  time
c8:  cs-uri-stem
c10: cs(Referer)
c12: cs-uri-query
c13: cs(Cookie)

```
% aws s3 cp s3://image/path/ . --recursive --quiet && find . -name '*.gz' | xargs gunzip -f && cat * | sort | q -t "select c1, c2, c8, c10, c12, c13 from -"
```

```
2016-11-04      08:20:31        /1x1.gif        http://localhost:3000/lp.html?utm_campaign=hoge&utm_source=fuga  event=view
2016-11-04      08:20:38        /1x1.gif        http://localhost:3000/lp.html?utm_campaign=hoge&utm_source=fuga     event=view
```


## 6. まとめ

短いステップで実装することができました！
ぜひ小規模なアクセス解析にお役立てください！
配列を条件のもとに分割するうまい方法を考えたかった

# がっじゅぐいぎだがっだぁああああ

こんにちは [131e55](https://twitter.com/131e55) です❗
[Swift愛好会 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/love_swift) 13日目です❗

また、[Swift その2 Advent Calendar 2016 13日目 - ポーカー作りで Swift 3 の空気を感じる](http://qiita.com/131e55/items/ed45a68f94d09c0e793a)も同日公開しているので覗いてみてください🐱(宣伝)

さて、Swift愛好会には多分過去2回お邪魔させていただきまして、いつも気軽にお話できる印象があり楽しい限りです。🍺のせいかもしれませんが(´•⌔•`)
今回は、Swift を書いているときに、配列を条件のもとに分割したくなったけどうまい方法がわからなく色々考えた。というお話をしたいと思います❗Swift愛好会の皆様からのアイデアを募集します❗(たすけて

# メインテーマ「配列を条件のもとに分割したい」

例1. Int の配列を奇数と偶数の配列に分割したい

```swift
let numbers: [Int] = [1, 2, 3, 4, 5, 6]
// ↓
// [1, 3, 5]
// [2, 4, 6]
```

例2. UIColor の配列を有彩色と無彩色の配列に分割したい

```swift
let colors: [UIColor] = [.red, .green, .blue, white, .cyan, .magenta, .yellow, .black, .gray]
// ↓
// [.red, .green, .blue, .cyan, .magenta, .yellow]
// [.white, .black, .gray]
```

## アプローチ1. `filter` 連打

<img width="717" alt="スクリーンショット 2016-12-05 21.28.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/104039/4d1fe8da-dc92-4d33-0695-2379cd371ba9.png">

第一感は `filter` でした。`filter` を使えば条件に合うものを抽出できますが、元の配列は変更されないので奇数の抽出と偶数の抽出を２回やるという方法です。無難そうですが `filter` 一回につき全要素を洗ってしまうのは冗長な感じ。なんで6回じゃなく7回なのかはわかりませんが。

## アプローチ2. `filter` + 差集合

<img width="925" alt="スクリーンショット 2016-12-05 21.58.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/104039/0d4d8008-1959-9fb4-5f1f-126451b6618c.png">

これは……読みづらすぎる感……。しかも一度集合にしてしまうので `Hashable` な配列である必要がありますし、配列の順番が保証されないので、ここから `sort` を走らせるならやっぱり `filter` 連打の方が良さそうです。

## アプローチ3. `reduce` で頑張る

<img width="1144" alt="スクリーンショット 2016-12-05 22.42.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/104039/fef71c9d-424d-f322-634a-a0024414758a.png">

`filter` 連打のループ数問題は解決されてますが、長いし何より読みづらい。これなら `filter` 連打で良いかな…。

## アプローチ4. おとなしく `for in`

<img width="646" alt="スクリーンショット 2016-12-05 22.04.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/104039/59dd92bc-29b7-2df6-add2-24fe6417b2d8.png">

なんか古臭い気もしますがありそうっちゃありそうです。ただ `for` で回すと `reduce` もそうですが回して何をしたいのかを解読しないといけません。何より `oddNumbers`、`evenNumbers` を定数にしたいときどうしたらいいんでしょう。やっぱり `filter` 連打かな…❓

## アプローチ5. 最終手段 `Array` 拡張

<img width="1218" alt="スクリーンショット 2016-12-05 22.51.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/104039/10a7f475-f437-52f1-2a72-f61d861a1509.png">

条件を渡して条件に合うものと合わないものに２分する `separated` を `Array` に追加してみました。
なんで7回になるのかはやっぱりわかりませんがすごく良さそうです。`filter` 連打のループ数問題も解決されていますし読みやすさも悪くないかと。
しかし `extension` はオレオレになりがちなところが気になるので標準でで　きるなら標準でしたほうが良い気も。個人的には変な改造せずに標準で使っていきたい派なのでやっぱり `filter` 連打を選択しそうかも…？

# おしえてSwift愛好会のみんな❗

というわけでどうするのが良いと思いますか❓皆様のアイデア募集❗
「こんなことしなくても◯◯でええやん」的なのに期待してます(´•⌔•`)
openCVでカレーを上手に盛れるようになる

オプトテクノロジーズでは半期に1､2度社内ハッカソンを開催してます。
テーマも自由にみんなで業務・趣味とわず開発を行います。そして何かしら成果物を作ります。一日で。

# 動機
## 問題提起
弊社では隔週金曜日に社食がカレーになります。
ここではワンコインでどれだけ大盛りにするかが競われています。
しかし、盛りすぎて溢してしまうことも多く、問題になっています。

## 我々が美しくカレーを盛れるようになるために
1. カレーを盛る
2. 写真に撮る
3. 採点する

継続＆採点基準を順守するためアプリを用意します。

# 準備
## カレー検出器
### openCV
`$ brew install opencv`

### 学習
いくらカレー好きな僕でも数万枚のカレー画像を持ってるわけもなく期間1日（8時間）の中でそこまでするのは無理だったのでプリセットの顔認証で代用します。

※opencvについてきたcascadeファイルがなんかバージョン合ってなくて個別で探しに行った記憶があります

### 採点
ちょっとロジック考えるの大変なので、カレー部分を二値化してカレー（と思われる）部分とご飯（と思われる）部分の割合を求めます。
ここでは

- 技術点：検出部分のカレーとご飯の割合
- 芸術点：検出部分のカレーを特殊な計算で算出

とします（いいのかな）。

```ruby:curry.rb

require 'opencv'
include OpenCV

if ARGV.length < 1
  puts "Usage: ruby #{__FILE__} source dest"
  exit
end

data = './cascade/haarcascade_frontalface_alt.xml' #カレー検出器が間に合わないので顔認識で代用
detector = CvHaarClassifierCascade::load(data)
image = IplImage.load(ARGV[0])

detector.detect_objects(image).each do |region|
  color = CvColor::Gray
  image.rectangle! region.top_left, region.bottom_right, :color => color #ここで顔に枠をつけるよ
  image.set_roi(region) #ここでさらにカレーの部分だけを切り取り
end

i3 = image.BGR2GRAY.add(10) #グレスケ
i2 = i3.threshold(128, 255, CV_THRESH_BINARY) #2値化
# i2.save_image(ARGV[1])

black =  i2.count_non_zero
size = i2.width * i2.height
white = size.to_f - black

artistry = (1 - (black * 0.8) / (size / 2.0)) * 100.0
technical = (1 - (white / black)) * 10.0
puts "技術点 = #{technical.round(2)}, 芸術点 = #{artistry.round(2)}"
```

## WEBアプリ化
誰もが自由にカレー画像をアップロードして点数化できるようにWEBアプリにします。
Railsと[ruby-opencv](https://github.com/ruby-opencv/ruby-opencv)を使います。
画像アップロードは手っ取り早いので`carrierwave`を使います。

### Gemfile
`$ rails new CurrynaSoderberg`

```ruby:Gemfile
source 'https://rubygems.org'

gem "carrierwave"
gem 'rmagick', require: 'RMagick'
gem "ruby-opencv"
gem 'simple_form'

gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
```

画像認識界隈ではポピュラーでみんな大好きなえっち画像の主レナ・ソーダバーグをもじってアプリ名にしました。

# 完成
これでいつでもカレーを美しく盛る練習ができるようになりました！
<img width="528" alt="カレー" src="https://qiita-image-store.s3.amazonaws.com/0/42777/9815b423-dc93-917c-6ccb-cc1df0c1fb33.png">

採点方法は要調整
ちょっとだけ頑張ってUITableViewの余計なseparatorを消す

# 概要
キャプチャのような、余計なseparatorを表示しないUITableViewの実装方法をまとめました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/7a013a4f-9f41-c5a2-4a58-6ecef74251b1.png" height=400>

# 経緯
上記キャプチャのようなデザインを実装しようとすると、立ちはだかるのはUITableViewの余計なseparator(線)です。
なにもしないと、以下のキャプチャのように何もコンテンツがないのにseparatorが表示されてしまいます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/788152c3-6b88-1bc7-f553-78a45e505d30.png" height=400>

以前は、この線を消すのに`tableFooterView = UIView()`といったようにtableFooterViewにUIViewを設定するか、
UITableViewのseparatorを非表示にして、cellの上に線を描くためのviewをのせて実装していました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/7be9c06a-126b-fde7-d14f-0882e2d5f4f4.png" width=500>


しかし、この実装方法には下記のデメリットがあります。

## デメリット1 

どちらの実装でも余計なseparatorを消すことはできますが、一番下のCellだけseparatorを左端まで表示するのが面倒になります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/840d8c49-4ad2-1f28-673b-09a135b5ab6a.png" width=300>


## デメリット2
cellの上に線を描くためのviewをのせて実装する方法にかぎりますが、
この実装方法だとUITableViewCellのAccessoryViewを表示すると、以下のキャプチャのように線が端まで表示されません。
<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/3b945d9b-2475-7675-b846-06e2e1d37398.png" width=400>


<br><br>
上記の問題があり、いつも実装に困っていました。
もっといい方法がないか調べてみた結果、簡単な方法が見つりました。


# 実装方法

## 1. UITableViewのStyleをGroupedに設定する
<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/22c4d1d6-0c83-b07b-a7aa-ecc01718c7a0.png" height=400>


これを設定することにより、余計なseparatorが表示されなくなります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/dc9d3341-28f8-b0e4-b0d5-9c6e67e4c4d1.png" height=400>


## 2. 余計なHeaderの高さを0にする

<img src="https://qiita-image-store.s3.amazonaws.com/0/69901/d2b476af-5481-3c59-a3ab-a85edf7a38d6.png" width=300>



このHeaderをを0にするためには、下記のコードを書きます。

``` Swift
// MARK: - UITableViewDelegate

extension ViewController: UITableViewDelegate {

    func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
        return .leastNormalMagnitude
    }
}

```

ここでポイントなのは0.0ではなく、`CGFloat.leastNormalMagnitude`を使うことです。(Swift 2では`CGFloat.min`)
0.0をreturnしてもHeaderの高さは変わらないため、このように実装しています。

これで意図通りのデザインになります。


# まとめ
ちょっとだけ頑張って余計なseparatorを表示しないデザインUITableViewの実装方法についてでした。
もっといい方法がありましたら、教えていただけると幸いです。
Xcodeにおける色の扱いに関する提案

[Swift Advent Calender 2016](http://qiita.com/advent-calendar/2016/swift) 13日目です！ ちょうど真ん中らへん。

Xcodeにおいて色の扱いかたが不満なのでやっていることを書きますが、現状もまだまだ不満です。
こんな風にやってるよ！という方は是非コメント下さい。

さて、Xcodeで色を扱うときの不満点は大きく２点あります。

1. カラーコードが使えない
2. InterfaceBuilder上で定数として色が扱えない

一つずつ解決していきましょう。

## カラーコードを扱えるようにする

こちらは簡単。
Extensionを作れば解決です。

```swift:UIColor+Hex.swift
extension UIColor {
  convenience init(hex: UInt) {
    let a = CGFloat((hex & 0xFF000000) >> 24) / 255.0
    let r = CGFloat((hex & 0x00FF0000) >> 16) / 255.0
    let g = CGFloat((hex & 0x0000FF00) >>  8) / 255.0
    let b = CGFloat((hex & 0x000000FF) >>  0) / 255.0
    self.init(red: r, green: g, blue: b, alpha: a)
  }
}
```

UIntにしているのは、Int型がInt32のときに、桁あふれするからです。

## InterfaceBuilder上で定数で色を扱えるようにする

### 定数で色を扱うようにする
まずは、色を定数化します。あとから変更しても良いように`blue`とかは作らないほうが良いと思います。

```swift:UIColor+Enum.swift
extension UIColor {
  enum Pallet: String {
    case main
    case veryVeryDark
    case veryDark
    case dark
    case light
    case veryLight
    case danger
    
    var hex: UInt {
      switch self {
      case .main:         return 0xFF14D2EB
      case .veryVeryDark: return 0xFF444444
      case .veryDark:     return 0xFF666666
      case .dark:         return 0xFF909697
      case .light:        return 0xFFBFC7C9
      case .veryLight:    return 0xFFF7F7F7
      case .danger:       return 0xFFFF467A
      }
    }
  }
  
  convenience init(managed: String) {
    self.init(hex: Managed(rawValue: managed)!.hex)
  }

  convenience init(pallet: Pallet) {
    self.init(hex: pallet.hex)
  }
}
```

### InterfaceBuilder上でPalletを使えるようにする
```swift:UIView+ManagedColor.swift
extension UIView {
  @IBInspectable var backgroundColorManaged: String {
    set { backgroundColor = UIColor(managed: newValue) }
    get { return "" }
  }

  @IBInspectable var tintColorManaged: String {
    set { tintColor = UIColor(managed: newValue) }
    get { return "" }
  }
}
```

これで、InterfaceBuilder上でbackgroundColorManagedに"main"とか指定すると色が変更されるようになりました。

## 現状の不満点
### 色々無様
1. backgroundColorManagedはgetterが機能していない。（まぁ使わないけど）
2. 指定方法が結局文字列。間違った文字列指定するとクラッシュ。AppleさんIBInspectableでenum使わせて下さい。

### IB上で色が分からない
`@IBDesignable`がextensionだと使えないのが悪い。Appleさん使わせて下さい。
そもそも`@IBDesignable`もうちょっと使い物になるようにして下さい。

### extension大量発生
色設定項目全てにextension作る必要がある。
これに関してはもうしょうがない。

## 感想
R.swiftとか、コード上でやるだけなら良い方法はいくらでもありそうなんですが、
僕はStoryboard大好きっ子なので、なんとかStoryboardで完結したくこういうことをやっています。
もっと良い方法がある気がとてもしているのですが、思いついてません。

## 参考
http://stackoverflow.com/questions/24074257/how-to-use-uicolorfromrgb-value-in-swift

明日は同僚の@noppefoxwolf君です！
Paper Plane xUI(PPx)のファイル判別について

この記事では、PPxのEnter時に動作するファイル判別についてを解説します


# Enterの種類と用語

Enterにはデフォルトで三種類あり、エントリーの名前や内容を判定する「ファイル判別」の二種、他にファイル判別で利用しているコンテキストメニューの「ファイル判別メニュー」があります。

- Enter([Enter])
    - ファイル判別「E_cr」を実行する
- Shift+Enter(\\[Enter])
    - ファイル判別「E_scr」を実行する
- Ctrl+Enter(^[Enter])
    - ファイル判別メニューを、「M_Ccr」の項目を追加して表示する

これを用いれば、動画拡張子(mp4)なら動画プレイヤー、音楽拡張子(mp3など)なら音楽プレイヤーで開くといった事ができます、専用のショートカットキーやメニューを作ると、数が膨大になるだけでなく、ショートカットキーの数が足りなくなってきます、ファイル判別はただEnterを押せばいいので、そういった心配もなく手軽です。


# 応用例

ここでは、このファイル判別を利用した応用例を紹介します。


## シバン(shebang)を解釈して実行する(Rubyの場合)

Linuxでは拡張子無しの実行ファイルがよく使われます、Linuxでは拡張子判定なんてものはありません、Windowsでは拡張子も判定材料に使われますが、Linuxでは拡張子も含めて単なるファイル名であり、「拡張子なんて単なる飾りです、偉い人にはそれが分からんのです」というのがLinuxの世界です。
しかしその拡張子なしのファイルを実行すると、中身がシェルスクリプト以外のスクリプト言語で書かれてても実行できます、そんな時ファイルの先頭に書かれている

```
#!/usr/bin...
```

という一行がshebangです、ここではそのshebangをファイル判別で表現してみます。

まずは、拡張子無しファイルに、shebang付きのRubyを書きます。
*※「#!/usr/bin/env」を利用するのはshebangとして如何なものか、とLinux界隈でよく指摘されますが、gemなどで自動生成されるコードだとこのように生成されます*


```rb:hello
#!/usr/bin/env ruby

puts "hello world"
```

次に、設定に以下のユーザー定義のファイル判別を追加します。

**※自身の設定が消えないように、適用前にバックアップを取るか、追加取り込みをしてください**

```:PPx.CFG
E_cr	= {	; [Enter]用判別
:SHEBANG_RUBY	,%OB ruby %FCD
}

X_uftyp	= { 
:SHEBANG_RUBY	= 0,#!/usr/bin/env ruby
}
```

設定後、拡張子無しのエントリーでEnterを押すと

![shebang_test.png](https://qiita-image-store.s3.amazonaws.com/0/51728/55420437-46e5-e5d7-119a-b8156b99db98.png)

とPPxでもLinuxのようにshebang判定実行のようなものが出来ました、ただしあくまでもそれっぽい動作なだけなのでご注意ください。


## 実行できるファイル判別を追加する

デフォルトのファイル判別は「[Enter]のE_cr」と「\\[Enter]のE_scr」の二種類ですが、次のようにショートカットキーを利用して追加する事もできます。
ここではCtrl+Shift+Enter(^\\[Enter])で実行するファイル判別「E_cscr」を追加してみます。

**※自身の設定が消えないように、適用前にバックアップを取るか、追加取り込みをしてください**

```:PPX.CFG
KC_main	= {	; PPcメイン窓
^\ENTER	,*execute ,%%ME_cscr,%C
}

E_cscr	= { ; ^\[Enter]用判別 (Custom)
TXT	,%Orib notepad %FDC
*	,%OB echo 未実装
}
```

ファイル判別はE_xxxの形式であれば自作できます、なおショートカットキーなのでEnter以外でも構いません。

このようにすれば幾つでもファイル判別が増やせます。
cloudBitと技適、パチもの問題

littleBitsの数あるbitの中で、日本の代理店であるKORGさまで販売されていないbit、それが[w20 cloudBit](http://littlebits.cc/bits/cloudbit)と最近仲間入りした[w30 ble - Bluetooth Low Energy](http://littlebits.cc/bits/bluetooth-low-energy)です。どちらもいわゆる技適の絡みがあるわけですが、cloudBitの場合はそれだけとも言い切れないところがあります。

#cloudBitとは
ハードウェア的な仕様は[こちらのgithub上](https://github.com/littlebits/w20-cloud)に明らかになっていますが、MCIMX233CAG4CというFreeScale社のARM9ベースのプロセッサに、図面上は明らかになっていませんがUSB経由でWi-Fiドングル、およびArchLinuxベースのOSが格納された4GBのMicroSDカードから構成されています。

なお、ソフトウェア的にはこれまでに３バージョンあるようで、littleBitsのサイトからもWindows用/Mac用のファームウェアのUpdaterが提供されています([こちら](http://littlebits.cc/cloudbit-firmware))。

USBのWi-Fiドングルですが、仕様として明示的にオープンになっている訳ではないものの、現行出荷品に関しては、Dynamode社の[WL-700N-XS](http://www.dynamode.com/english/pages/product/Wireless%20LAN/USB%20Adapter/WL-700N-XS.html)がバンドルされている、という理解でよいものと思われます。仕様に関してはリンク先を参照いただければと思いますが、メインチップとしてはREALTEKの8188CUが搭載されています。で、本ドングル自体は日本において技適は通過していない、ということになります(少なくとも私の知る限り)。

#コンパチなWi-Fiドングルの有無
REALTEKの8188CUが搭載された、技適通過Wi-Fiドングルはないのか？と思いきや、ちゃんとありました。ELECOMの小型無線LAN子機 [WDC-150SU2M](http://www2.elecom.co.jp/network/wireless-lan/adapter/wdc-150su2m/)がまさにそれです。Linux的にはlsusbしてみると前述のWL-700N-XSは0BDA:8179というIDで、WDC-150SU2Mは056e:4008というIDで認識されており、両者ともr8188euというドライバ経由で使用可能になるはず...がWDC-150SU2Mさしてもドライバがロードされません。

#cloudBitのブート時の動作
cloudBitは前述のように4GBのMicroSDからArchLinuxがブートするわけですが、MicroSDは2パーティション, littleBootとlittleRootに分かれており、littleBootパーティションにはブートローダーが、littleRootのほうに / (root)から始まるファイルシステムが構成されています。

littleBits系のファイルは /usr/local/lb 以下で提供されており、ブート時に初期化処理が走るのは、/usr/local/lb/bit-util/onBoot.shというシェルスクリプトになります。中を覗いてみると、Wi-FiドングルのMACアドレスを確認し(/usr/local/lb/mfg_test/checkMAC.sh)、あらかじめ定義されたブラックリスト(/var/badmacs)に該当すればシャットダウンするであるとか、いろいろな仕組みが入っています。

#ごちょごちょ ぐにゅぐにゅ
さて、cloudBitのArchLinuxの場合もカーネルレベルで(特に前述のDynamode社のUSBドングルにかかわるドライバ/ファームだけでなく)幅広いUSB Wi-Fiドングルをサポートしている模様なので、シェルスクリプトの中でMACアドレスを上手に偽装してやれば、日本の技適を通過したWi-FiドングルでcloudBitが動作、これにて一件落着。めでたしめでたし。と、いった感じで本記事を終えたかったのですが、本記事を書くにあたり、(以前の成功実績を)再現確認してみようとあれこれ手を尽くしたものの...なぜか再現できず。メールボックスにはlittleBitsサポートからのcloudBit validation errorメールが投げ込まれてしまう、という良い子は真似をしないでください的な状況になってしまいました。cloudBit側のファームウェアも含め、もう少しちゃんと検証しなおしたかったのですが、まずはここまででご勘弁をいただければ。

#ビジネスモデル
ただ、MACアドレスフィルタリングのようなことをなぜしているのか、というのは(オフィシャルな説明は見たことはありませんが)理解できるところはあります。他のbitは値付け上、そのbit自体の価格であるのに対し、cloudBitの場合は、bit自体の価格に加え、cloudBit APIを維持するためのクラウドシステム(要は https://api-http.littlebitscloud.cc サーバ)側の費用もそこに含まれると解釈できます。

で、littleBitsなんですが(Raspberry Piなんかと同様)互換機と言うかパチものがあったりします(パチものの存在なり問題点にかんしてはlittleBits側で言及されたこともあります)。

* http://www.funmetas.com/pro.aspx

こちらのMETASの「電子積み木」は見てもらうとわかるように各bitがLEGO互換にもなっているというなかなかのデザイン、かつ、(実は価格的には本家本元、本物のlittleBitsと比べて)特に安いわけでもないという商品です。

本記事を書くために改めて上記サイトを見たところ、以前はcloudBit相当のものがあったはずなのですが、...今はないですね。cloudBitもどきを買って確認しておけばよかったのですが、おそらく、以前はパチものでもlittleBitsのcloudbit APIにアクセスして利用可能だったのが、これじゃたまらん、とばかりにアクセスコントロール等、厳しくなってきたものと推察されます。

ラズパイ界隈でも、たとえばバンドルされているMathematicaなどの商用ソフトを(個人利用は無償というケースもあれば、ラズパイ財団が一括して費用を支払いしているケースもあるのに対し)互換機で動作させてしまう、というコンプライアンス的に問題なケースが散見されるという点でも、このあたりのビジネス的な仕組みづくりはなかなか大変、かつ重要な点ではあります。

宙ぶらりんな後味のままになってしまいましたが、本日はこのあたりで。
BCryptのすすめ

## はじめに
この記事は [Scala Advent Calendar(Adventar)](http://www.adventar.org/calendars/1492) の13日目です。パスワード保存に使うBCryptの話をします。

## 安全にパスワードを保存する
皆様、パスワードをセキュアに保存しているでしょうか？まさかとは思いますが、パスワードを生で保存するとかおぞましいことをしてないでしょうか？

パスワードは攻撃者によってソースコード・DBすべて取得されたとしても、元のパスワードを類推することを不可能とするように保存することにより、パスワード漏洩最後の砦として機能させることが望ましいです。

この条件を満たす方法として、パスワードをHash化して保存する方法があります。ただし単純なHash化では駄目です。まず、類推されにくくて衝突しずらい、暗号学的に良いHash関数アルゴリズムが必要です。また、よくあるHash関数アルゴリズムは(元々高速に計算することを意図していたのもあり)非常に高速に計算が可能であり、総当たり試行されてしまえば、現代のコンピュータスペックをもってすれば一瞬で解読されてしまいます。また、レインボーテーブルと呼ばれる、高速にHashから元の値を類推することが可能なアルゴリズムも存在し、Hash化では不足です。

従って、現状ではセキュアにするために以下のように保存することがのぞましいです。

- 暗号学的に優れたHash関数を使うこと [wikipedia](https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E5%AD%A6%E7%9A%84%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E9%96%A2%E6%95%B0)
- Passwordへランダムに生成したsaltを加え、文字数を増やす
- Hash化は1回ではなく複数回(現代なら数千回ぐらい？)行う(ストレッチング処理)

と、パスワードを安全に保存するのは考えることが多くて大変だということが分かりました。saltのデータはパスワード毎に必要なので、DBに保存するなら別途カラムが要りますし、暗号学的に優れたハッシュ関数は時代によって変わるので変わったら更新する必要もあるでしょう。回数も時代のCPUに合わせて徐々に増やしていきたいところです。その実装の過程でセキュリティホール付きバグなんて作った日には目も当てられません。

はい、みんなやらなきゃいけない面倒なことはライブラリに投げましょう。BCryptの登場です。

## BCrypt
BCryptはアルゴリズムという説明を良く目にしますが、世間であふれてるBCrypt実装を見ると、寧ろパスワードをセキュアに保存するのを支援するライブラリな気がするので、ここでは後者の意味で使っています。

Java界にはいくらかのBCrypt実装がありますが、比較的よくメンテされていて利用者も多そうなSpringframeworkのセキュリティライブラリに含まれているものをお勧めします。sbtだと

```scala
libraryDependencies += "org.springframework.security" % "spring-security-web" % "6.1.2"
```

で追加できます。Versionは最新を調べて使いましょう。

## 使い方
### ハッシュ生成
Encoderを生成してそのencodeメソッドにPasswordを渡すだけで、saltを生成し、Passwordとsaltを結合した文字列を返してくれます。この文字列を次のパスワード認証で渡すだけで認証できます。saltカラムなんて要らない!

```scala
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder

val bcrypt = new BCryptPasswordEncoder()
def createHash(password: String): String =
  bcrypt.encode(password)
```

### パスワード認証
さきほど生成したsalt付きhash文字列を、ユーザが投げてきた文字列と共に、Encoderのmatchesメソッドに渡すだけです

```scala
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder

val bcrypt = new BCryptPasswordEncoder()
def authenticate(password: String): Boolean = {
  val hashString = fromDB()
  bcrypt.matches(password, hashString)
}
```

簡単ですね。

## 注意事項とか

### 生成したhash文字列の長さ
60文字です。DBにはCHAR(60)などで置いておけばいいでしょう。

### Hash化の回数の制御
BCryptPasswordEncoderの生成時、引数に強さの値を渡すだけです。4-31の値を渡せます。デフォルトは10。指数関数的に処理時間が増えていくので、テストしてから本番投入しましょう。

### 文字数制限
主要なBCrypt実装は72文字を越える文字列をサポートしていないです。具体的な処理はライブラリ毎に異なるようですが、SpringSecurityの場合は72文字以降を切り捨てるようです。

(初出時にはBCryptで良く使われるBlowfishアルゴリズムが原因と書いていましたが、間違っていた可能性が高いと判断して、主要なBCrypt実装の問題という書き方に変えています)

### Encode結果の詳細
Encode処理をすると次のような形で出力されます。

`$2a$10$8sKUrdvJn7gpWmMH2qfRduF.vhe2n3diyzf8CvY8GtTsmNJ6HRnBe`

この中に

- アルゴリズム
- アルゴリズムの詳細(回数とか)
- Salt
- Hashed Password

の各データが入っています。つまり途中からアルゴリズムや強さを変更しても特に何もせずに移行できるということですね。

## おわりに
このようにBCryptを使えばお手軽にパスワードを比較的安全に保存できます。勿論セキュリティの世界に完璧はないですが、大分マシなものになるでしょう。
Electronで駅すぱあとWebサービスのツール機能を使う話

[ヴァル研究所 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/val)、12日目は[Electron](http://electron.atom.io/)から駅すぱあとWeb APIを使ってみる例を紹介してみようと思います。

駅すぱあとWebサービスが提供する機能に[探索条件生成](http://docs.ekispert.com/v1/api/toolbox/course/condition.html)があります。[経路探索](http://docs.ekispert.com/v1/api/search/course/extreme.html)において、探索条件を指定するのですが、そこで指定する条件データを生成するのがこの[探索条件生成](http://docs.ekispert.com/v1/api/toolbox/course/condition.html)

探索条件として設定できる項目は多く、[探索条件生成](http://docs.ekispert.com/v1/api/toolbox/course/condition.html)のドキュメントを見るとたくさんのパラメータがあることが分かります。さすがにこれをCLIから設定するのは大変なので、もう少し楽に探索条件データを得られるようにしてみます。

## Electronから探索条件生成を使う

Webアプリの形で探索条件生成機能を利用する方法もあるのですが、アクセスキーの扱いを考慮する必要が出てきます(アクセスキーを隠蔽する方法は[6日目の記事](http://qiita.com/hmaruyama/items/e0b69970bad4a9cbc6a5)をご参照ください)。

そのため、今回はHTML+JavaScriptでデスクトップアプリを構築できる[Electron](http://electron.atom.io/)で探索条件をGUIから生成できるアプリを作成してみます。

### Electronをインストールする

[Electron](http://electron.atom.io/)の開発環境を準備します。[Ubuntu](https://www.ubuntu.com/)での例を以下に示します。
まずは`nodejs`と`npm`をインストールします。
```
$ sudo apt-get install nodejs npm
```

npmコマンドはNode.jsのコマンド名がnode決め打ちのため、シンボリックリンクを設定します。

```
$ cd /usr/bin
$ sudo ln -s nodejs node
```

あとは`npm`で`electron-prebuilt`をインストールして準備完了です。

```
$ sudo npm install electron-prebuilt -g
```

### 動作例

動作例は以下のようになります。まだ作成中なので設定できる条件は少ないです...。
(ソースコードはGitHubにUPする予定なのでお待ちいただければと)

![img100.png](https://qiita-image-store.s3.amazonaws.com/0/152217/00bd96ea-ff29-778f-d0c9-2ecc4dc76b4a.png)

デスクトップアプリの形態であれば、アクセスキーはユーザの手元で管理する形になるため、Webアプリとはまた違った活用方法がありそうです。

## まとめ

駆け足ではありますが、Electronから駅すぱあとWebサービスの機能を利用する例を紹介してみました。WebアプリをElectronで動かしただけ感はありますが、デスクトップアプリとしての活用方法を見出してみたいものです。
reactまとめ

## チュートリアル
簡単なページを作って、動作を確認できます。
[公式]https://facebook.github.io/react/tutorial/tutorial.html
ES版のチュートリアルもあります。
http://qiita.com/nownabe/items/2d8b92d95186c3941de0

## reactについて日本語で分かりやすく説明してくれている記事
ざっくり概説されてます。
http://qiita.com/tomzoh/items/7fabe7cb57dd96425867
Jquetyと比較しながらreactの説明がされています。
http://qiita.com/naruto/items/fdb61bc743395f8d8faf

## stateとprops
reactでのデータ管理・動きを解説してくれてます。
http://qiita.com/koba04/items/43200b6fd6e6f43f0d8d

## コンポーネントライフサイクル
プロセス中の特定の時間にコードを実行するためにオーバーライドできるメソッドについての説明があります。
http://qiita.com/koba04/items/66e9c5be8f2e31f28461
分かりやすい図説
http://qiita.com/kawachi/items/092bfc281f88e3a6e456

## reactを書く際の注意
keyの重要性についてかかれています。（結構重要）
http://qiita.com/koba04/items/a4d23245d246c53cd49d
eventが参照できない原因について書かれています。persist()を使うらしい。
https://blog.nakanishy.com/react-persist.html

## railsで使う場合
`react-rails`というgemを使う導入例があります。
http://techlife.cookpad.com/entry/2016/10/26/135818

## 詳しく見る
日本語リファレンスで検索できます。
http://js.studio-kingdom.com/react/
Amazon Lightsailを使ってみた

AWSのre:Invent2016 のフォローアップが全くできてないので、自分のブログをたてるついでに、検証を兼ねて使ってみた。

## AWS Lightsailとは？
新しいAWSのサービスでいわゆるVPS。
思いっきり、さくらやGMOなどにケンカを売ろうとしているサービスです。

## なにができるの？
EC2インスタンスにwordpress等をいれて、動かすことができます。
GitLabとかもあっていいかんじ。

## やってみる
マネジメントコンソールにログインし、EC2 Lightsailを選択してインスタンスをつくる

* App+OS か OSだけかを選ぶ  
WordPressの場合、Bitnami の出しているUbuntuが提供されます。
Ubuntuがいやなひとは、OSに普通にWordPressいれてください。

![スクリーンショット 2016-12-12 22.33.25.png](https://qiita-image-store.s3.amazonaws.com/0/70133/138082b0-72bf-0060-6a18-ee554b8f2bf6.png)

* Keyをアップロードするかつくる

![スクリーンショット 2016-12-12 22.34.06.png](https://qiita-image-store.s3.amazonaws.com/0/70133/31b06320-fde1-2660-02c6-faea096dd51d.png)


![スクリーンショット 2016-12-12 22.34.34.png](https://qiita-image-store.s3.amazonaws.com/0/70133/e6ee1309-9c61-2a82-1756-74b5d7741056.png)

* インスタンスプランを選ぶ  
月額5ドルから利用できて、さくっと検証したいひとにぴったりです。
今だと1ヶ月無料

![スクリーンショット 2016-12-12 22.36.05.png](https://qiita-image-store.s3.amazonaws.com/0/70133/9f905167-5a9d-4aec-0879-c558eb55e93a.png)

* インスタンスをたてる場所を選ぶ  
今のところ、Virginia のみぽいです

![スクリーンショット 2016-12-12 22.36.35.png](https://qiita-image-store.s3.amazonaws.com/0/70133/8b42f646-ca66-94bb-bb38-ba90d17e48fb.png)

これでCreateすればできあがり！

![スクリーンショット 2016-12-12 23.29.54.png](https://qiita-image-store.s3.amazonaws.com/0/70133/c8e2c052-cb18-c453-aab4-beaae679d963.png)


* 鍵をセットアップして、terminal からSSH。  
EC2だとec2-userでログインですが、Lightsailの場合、ユーザ名がちがうので、
できたインスタンスのmanageからきちんと確認。

![スクリーンショット 2016-12-12 23.25.43.png](https://qiita-image-store.s3.amazonaws.com/0/70133/caeb5932-6cd2-3282-6bcb-3525db36f954.png)

ちなみに、コンソールもあるのでブラウザから操作可能になってます。
なかなか危険なので、接続元をしぼるとかしたほうがいいと思います。

![スクリーンショット 2016-12-12 22.49.12.png](https://qiita-image-store.s3.amazonaws.com/0/70133/2198b38d-d398-c8cf-5db5-cabed65c0c9c.png)

![スクリーンショット 2016-12-12 23.17.33.png](https://qiita-image-store.s3.amazonaws.com/0/70133/849ef383-2ac3-8a64-8078-42171889a996.png)

##おまけ
static IPもつけられるし、VPC peerを使えば、RDSともプライベート接続できたりするみたいなので、結構便利かなと思います。
Amazon API GatewayからAWS Lambdaにパラメータを渡す方法

## 概要
Amazon API GatewayからAWS Lambdaにパラメータを渡す方法のまとめ。

## URLに含まれるPathパラメータを渡す

```/users/{userId} - GET```のような形でURLパラメータに含まれている場合は画面右上の「統合リクエスト」より以下のようなマッピングテンプレートを追加する。
Content-Typeにはapplication/jsonを指定する事。

```json:マッピングテンプレート
{
  "userId": "$input.params('userId')"
}
```

対応するLambdaのコードは下記の通り。
今回のサンプルコードではDynamoDBからURLパラメータで指定したuserIdに紐づく値を取得して返却する。

DynamoDBには下記のようなデータが入っている。

<img width="865" alt="dynamoDB1.png" src="https://qiita-image-store.s3.amazonaws.com/0/71899/ed66435f-6bbb-d2d3-ac0c-506f0d07dd35.png">

API Gatewayのテスト呼出で以下のようにPathパラメータを指定する。
<img width="672" alt="awsapigateway1.png" src="https://qiita-image-store.s3.amazonaws.com/0/71899/f3b46570-26d1-5702-9da1-732d003d6003.png">

ExpressionAttributeValuesの中の```event['userId']``` で指定したuserIdが展開される。

```js:aws-lambda-sample/find-dynamodb.js
'use strict';

const AWS = require('aws-sdk');
const dynamo = new AWS.DynamoDB.DocumentClient();

exports.handler = (event, context, callback) => {

  const params = {
    TableName: 'users',
    FilterExpression : 'id = :val',
    ExpressionAttributeValues : {':val': event['userId']}
  };

  dynamo.scan(params, (error, data) => {
    if (error) {
      callback(
        Error('Fail. err:' + error)
      );
    } else {
      callback(null, data);
    }
  });
};
```

```json:response
{
  "Items": [
    {
      "id": "d684f349-fb73-4b3d-8a8f-61feb9fb0714",
      "email": "hoge-huga9999@gmail.com"
    }
  ],
  "Count": 1,
  "ScannedCount": 11
}
```

## POSTでJSONを送信する

次は登録用のエンドポイントに対して、JSON形式でリクエストする例を見てみる。
今回利用するのは ```/users - POST```でリクエストパラメータとして"email"を受け取り、受け取った値をDynamoDBに登録する。

「統合リクエスト」のマッピングテンプレートに以下を追加する。

```json:マッピングテンプレート
{
  "email": $input.json("$.email")
}
```

対応するLambdaのコードは下記の通り。
IDには適当にUUIDバージョン4形式の値を入れておく。

```js:aws-lambda-sample/save-dynamodb.js
'use strict';

const AWS = require('aws-sdk');
const dynamo = new AWS.DynamoDB.DocumentClient();
const uuid = require('node-uuid');

exports.handler = (event, context, callback) => {

  const params = {
    TableName: 'users',
    Item: {
      id: uuid.v4(),
      email: event['email']
    }
  };

  dynamo.put(params, (error) => {
    if (error) {
      callback(
        new Error('Fail. err:' + error)
      );
    } else {
      callback(null, params);
    }
  });
};
```


リクエストヘッダーに```Content-Type: application/json;```を設定し任意のメールアドレスを指定する。

![awsapigateway2.png](https://qiita-image-store.s3.amazonaws.com/0/71899/527d6419-9547-710b-121b-cd703f27e89a.png)

以下のレスポンスが返却され、DynamoDBにもデータが登録されている。

```json:レスポンス
{
  "TableName": "users",
  "Item": {
    "id": "f26b7ce0-efaf-4e64-b891-7c23cae3a321",
    "email": "hoge-hoge-1234@gmail.com"
  }
}
```

![dynamoDB2.png](https://qiita-image-store.s3.amazonaws.com/0/71899/6b447d5c-7e99-9978-4350-f2a450015ec9.png)

## 今回利用したサンプルコード
[github](https://github.com/keita-nishimoto/aws-lambda-sample)に上げてあります。

## その他のパラメータの送信方法

見つかり次第こちらに記事に追記していきます。