OmniAICreator/Qiita-1.07M huggingface dataset:
会社に蔵書管理 ChatOps を導入してみて感じていること

この雑な文章は、[ChatOps Advent Calendar 2015](http://qiita.com/advent-calendar/2015/chatops) の11日目の記事です。

# こんにちは、図書委員長です

その昔、会社の新人研修で「社内ツール作ってよ。本の貸出管理するやつ」と言われ、エンジニアが本の貸し借りや購入依頼のできる(割と普通な) Web サービスを作りました。
でもそれだけじゃ面白くないので、どうするどうすると考えて生み出されたのが「ChatOps できる蔵書管理ツール」、通称書庫たんです。

新人研修が終わってからも、ちまちまと週末に書庫たんを開発、たまに「本がない」「登録して」などのお問い合わせに対応していたら、気付けば図書委員長と呼ばれるようになっていました。

そんなうちの書庫たんを紹介したいと思います。

# なぜ蔵書管理を ChatOps したか

蔵書管理ツールを開発する上での勘所は「どのように本の貸し借りを行えるようにするか」です。

初めは図書館でよくあるようなバーコード読み取りを考えましたが、あえて ChatOps で本の貸し借りを行えるようにしました。
理由はざっくりと以下のような感じです。

- Web サービスならアクセスしないといけないけど、チャットツールならいつも開いてるから楽そう
- 対話を通して本を探したり借りたりできれば、サービス自体に愛着を持ってもらえそう
- 本に対するアクションがチャットで見えるため、それを基点にコミュニケーションが生まれそう
- エンジニアなら面白がって使ってくれそう
- 誰もやったことなさそうだから作るの楽しそう
- ちょうど社内で Bot が浸透しつつあった

とはいえ、当時は私が一番反対していました。ChatOps は、必ずしも万人向けではないからです。

- エンジニア以外の人が使いづらくなる
- チャットルームでの本の貸し借りに抵抗を感じる人がいそう

そんな懸念はありましたが、最終的には「面白そう」「現時点で使うのはエンジニア」「抵抗ある人は Web から貸し借りすればいい」という判断で、チャットでの貸し借りを実装しました。

# 書庫たんが ChatOps でできること

現状、書庫たんは Web サービスで行われた「本の登録・編集・貸出・返却・予約・購入申請・レビュー投稿」といった操作の通知をしてくれる他、
チャットから Web サービスへの「検索・貸出・返却・予約」を依頼できます。

スクショを見せるのが一番イメージが湧くと思うので、いくつかスクショを貼っていきます。

![help.png](https://qiita-image-store.s3.amazonaws.com/0/44003/04f6bd59-c0c7-95b7-d905-331c0f982c35.png)

## 本を検索する

![search.png](https://qiita-image-store.s3.amazonaws.com/0/44003/56535b7a-7e65-5f4e-39c1-8669480404e9.png)

Web サービスの DB から、キーワードをタイトルに含む本を持ってきて表示します。

![search_error.png](https://qiita-image-store.s3.amazonaws.com/0/44003/42bdd80d-53a5-7ac7-14b6-1a2a814e8e44.png)

検索しても該当する本がなかったらこんなエラーを出します。

## 本を借りる

![lending.png](https://qiita-image-store.s3.amazonaws.com/0/44003/dc7a85e1-900c-f0eb-424e-94f8515077c2.png)

検索したときに出てくる番号を指定すると、その本を借りることができます。
内部では Hipchat の メンション名を渡していて、それを Web サービス側で登録しているユーザ情報と照合して貸し出し処理をしています。

## 本を返す

![return.png](https://qiita-image-store.s3.amazonaws.com/0/44003/4fe1d4ce-de48-9685-7632-5e2557487da1.png)

(ここは仕様に悩んだところですが) 直前に借りた本をすぐ返すことができます。
ついでに、社内の Qiita::Team へのレビュー投稿を促します。笑

## 本を予約する

![pre.png](https://qiita-image-store.s3.amazonaws.com/0/44003/1a0531af-dd38-e3f5-adcb-513897a007b6.png)

既に誰かがその本を借りていたときは、予約ができるよ！と案内します。
予約しておくと、本を返却されたときに「○○さん、借りられますよ！」と名前を呼んでくれます。

# 書庫たんを通じた ChatOps で感じていること

## ChatOps に適した機能かどうか

実際、書庫たんは思っていたより、チャットから使われてはいません。
「本を借りて読む」という行為自体がスパンの長いというか、ちょっと腰の重いものなので仕方なくもないのですが
それでも Web サービスからは定期的に使っている人がいますし、その操作でチャットに通知が届き、そこからコミュニケーションが生まれることもあります。

それは、やはり ChatOps は今新しく起きたことの通知、あるいはごく単純なアクションに向いていて、主体的に何か複雑なアクションを起こしにいくのは向いていないからなのかも、と思っています。
例えば、書庫たんで言うと「特定の本の指定」のやり方については、悩みの種でした。ISBNコードをチャットから打ってもらうのは面倒、かといってキーワードは一意性がない。

構想としてはより対話に近づけて、コンテキストを読み取って本を特定できるようにしたいです。が、それもなかなか難しいよなーと悩んではいます。

## チャットで使って分かりやすい機能かどうか

複数のやりとりが必要だったり、次に何が起こるのか想像しにくかったりすると、機能としては使われにくくなってしまいます。

蔵書管理 ChatOps はちょっと挑戦的な試みだったので、やはりチャットから本の貸し借りをするフローがイメージしづらかったなとも思います。
書庫たんでいうと、特に予約機能が「検索して借りようとしたときに他の人が借りている」かつ「既に予約していない」という条件下でしか使えないため、「なにか使いどころのよく分からない機能」となっています。
もっとチャットというインターフェースを活かせるような機能を模索したいなーと思ったりもします。

## 面白くて使いたくなるかどうか

やっぱり ChatOps って「技術のいろんな使い道を模索して面白がるエンジニア文化」だからこそのものだと思っていて、やっぱり面白いものを作りたいですよね。

そういう意味で書庫たんはまだまだ発展途上です。うちの書庫たんをもっと可愛がってもらえるように頑張りたいです。来年以降からがんばります！笑

明日は @treby さんです！よろしくお願いします！
[JavaScript] Arrow Function Test

```js:JavaScript
window.status = "window";

// callback: normal function
var obj1 = {
  status: "obj1",
  func: function() {
    // this=window
    setTimeout(function(){alert(this.status);}, 1000);
  }
};
obj1.func(); // ⇒ "window"

// callback: arrow function
var obj2 = {
  status: "obj2",
  func: function() {
    // this=obj2
    setTimeout(()=>{alert(this.status);}, 1000);
  }
};
obj2.func(); // ⇒ "obj2"
```

アロー関数の特長：
`obj > function > arrow function`
という位置関係の時、arrow function 内の this は必ず obj を指します。つまり静的に決定されます。
コールバックが通常の function においては、this はコールバックを実行した主体（オブジェクト）を指します。つまり、動的に決定されますので、注意が必要です。

⇒ <a href="http://jsfiddle.net/yasumodev/pk3Lzyp3/" target="_blank">ソースデモはこちら</a>
コンポーネントの名前解決をプロジェクトにインポートする時まで遅らせるCSSの書き方

この記事では、JSではおなじみのモジュールの名前解決を、CSSでも実現する方法について解説します。

## 最近のJSではおなじみのこういうの

JSなら、誰かが作ったモジュールを自プロジェクトに組み込む際に、名前を変えるのはワケありません。

```js:Browserify
var coolcat = require("./lazydog");
```

```js:ES6
import {coolcat} from "./lazydog";
```

こういった仕組みのお陰で、JSのモジュール化が一気に進みました。

CSSの場合、配布されているコンポーネントのクラス名を変えようとすると、「ローカルに落として編集して〜」となるので、コンポーネントの作者がバグを直しても、自動的に反映する方法がありませんでした。

## CSSにもそういうのが欲しい

実はSassやStylusで普通にできます。

まずはインポートの仕方：

```sass:本体
.coolcat
  @import "./lazydog"
```

モジュールの書き方：

```sass:lazydog
&
  color: red

&_items
  color: blue

&-hoge &_item
  color: green
```

モジュールがこういうふうに書かれていれば、利用者側は好きなスコープ名でコンポーネントをビルドできます。

```css:CSS
.coolcat {
  color: red;
}
.coolcat_items {
  color: blue;
}
.coolcat-hoge .coolcat_item {
  color: green;
}
```

ビルド結果は期待したどおりに。

## 将来はこんなふうになるかも

```sass
@charset "utf-8"

.fb-dialog
  @import "../node_modules/facebook/deck"

.tw-dialog
  @import "../bower_components/twitter/card"
```

コンポーネント作者はパッケージマネージャを通じてバージョンアップできるし、利用者は好きな名前で衝突を回避できるし、いいことずくめですね。
GitBucketインストール手順

GitBucketのインストール方法はとっても簡単。
gitbucket.warをデプロイするだけです。

## **アプリケーションサーバにデプロイする場合**
GitBucketでは

+ Tomcat 7.x
+ Jetty 8.x
+ GlassFish 3.x

をサポートしています。

今回はtomcatへのデプロイ方法です。

###### **warファイルダウンロード**
https://github.com/gitbucket/gitbucket/releases
から最新バージョンのwarファイルをダウンロードしてきます。

###### **tomcatへデプロイ**
CATALINA_HOME=/usr/local/tomcat
の場合、{CATALINA_HOME}/webapps/以下に
gitbucket.warを配置します。

###### **tomcat起動**
後は、tomcatを起動するだけです。

```
# /etc/init.d/tomcat start
```

###### **GitBucketへアクセス**
tomcatを起動したサーバとポートに`/gitbucket/`をつけてアクセスします。
`http://[hostname]:[port]/gitbucket/`

###### **GitBucketへログイン**
デフォルトの管理者ユーザが自動で作成されています。

* アカウント：root
* パスワード：root

## **組み込みサーバで起動する場合**
gitbucketはwebサーバにデプロイしなくても、
直接warを実行して組み込みサーバで実行できます。

###### **warファイル実行**
warファイルダウンロードまでは同じです。
warファイルをどこか適当な場所に配置し、下記コマンドを実行します。

```
# java -jar gitbucket.war
```

###### **GitBucketへアクセス**
起動したサーバに下記URLでアクセスします。
`http://[hostname]:8080/`

デフォルトでは8080ポートで起動します。
アプリケーションサーバへのデプロイと違う点は、
URLに`/gitbucket/`をつけない点です。

###### **起動オプション**
下記の起動オプションが用意されています。

+ --port=[NUMBER]
+ --prefix=[CONTEXTPATH]
+ --host=[HOSTNAME]
+ --gitbucket.home=[DATA_DIR]

デフォルトの8080ポートが他のアプリとかぶる場合は、
portを変更してあげればOKです。

```
# java -jar gitbucket.war --port=8090
```
`http://[hostname]:8090/`でアクセスできます。

prefixを変更する場合はこんな感じ。

```
# java -jar gitbucket.war --port=8090 --prefix=/gitbucket
```

`http://[hostname]:8090/gitbucket/`でアクセスできます。
ES2015時代のFizzBuzzに挑戦する

今更ながらFizz Buzzコードゴルフにハマってしまいました。

というのも、ECMAScript2015ならもしかしたら今までのJavaScriptより短く書けるのではないか？と思ったからです。

独自の調査で見つけた、一番短いJavaScriptのFizz Buzzは以下の62文字のコードです。

```js:fizzbuzz_js5_shortest.js
for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'
```

さて、ES2015はこの限界を越えられるのか！？

## アロー関数、fill

従来の記法ですが、

```js
Array(100)
```

で100個の要素を持つ空配列を生成できます。

この配列をforEachを回す作戦です。これで新機能アロー関数を使った

```js
Array(100).forEach(elm=>console.log(elm))
```

のような書き方が可能となります。

しかし、このコード、実行しても反応がない…。どうやら、空要素はforEachに反応しないようです。

ここで新機能fillの登場です。

```js
Array(100).fill(0).forEach(elm=>console.log(elm))
```

これで配列が0で初期化され、0が100個出力されます。

forEachのコールバックの第2引数にindexが入るので、それを利用して

```js:fizzbuzz_fill_1.js
Array(100).fill(0).forEach((_,i)=>console.log((++i%3?'':'Fizz')+(i%5?'':'Buzz')||i))
```

でどうでしょう。

ただ、コールバック引数``(_,i)``が長いので、fillのところで意味のない数(0)を使ってるところを変数初期化に使ってみましょう！

```js:fizzbuzz_fill_2.js
Array(100).fill(i=0).forEach(_=>console.log((++i%3?'':'Fizz')+(i%5?'':'Buzz')||i))
```

変化球で、別の方法で長い配列（中身はどうでもいい）を取得する方法を編み出しました。
windowオブジェクトのキーを配列として利用するのです。

```js
keys(this).forEach((_,i)=>console.log((++i%3?'':'Fizz')+(i%5?'':'Buzz')||i))
```

グローバルオブジェクトが``window``なら、``keys(this)``は``window``のプロパティ名の配列になります。
（昨日Chromeでやったときとなぜか挙動が異なるので、正式なES2015ではどうなるか未検証です。）


## 新しいオブジェクトリテラル、テンプレート文字列

これは自分の中では努力賞です。

新機能でオブジェクトリテラルの省略表記が追加され、

```js
var a = 5, b = 3, c = 8;
var obj = {
  a: a,
  b: b,
  c: c
}
```

のようにキーと値の変数名が同じ場合に

```js
var a = 5, b = 3, c = 8;
var obj = {
  a,
  b,
  c
}
```

のように書けることに目をつけました。

もうひとつ、新機能テンプレートリテラルで

```js
console.log(`hoge${1}`); // => 'hoge1'
```

のような式の参照ができるようになったのも何か使えそうだと思いました。

そこで、コンボ技を使ったのがこれです。

```js:fizzbuzz_template.js
_1='Fizz';_2='Buzz';_3=_1+_2;for(i=0;++i<101;)console.log({_1,_2,_3}[`_${!(i%3)+!(i%5)*2}`]||i)
```

``_1``, ``_2``, ``_3``と名付けた3つの変数をオブジェクトリテラルでオブジェクト生成し、
ループ内で`` `_${1}` ``,`` `_${2}` ``,`` `_${3}` ``のどれかがキーとなったときは
``'Fizz'``, ``'Buzz'``, ``'FizzBuzz'``のどれかが選ばれ、
それ以外はオブジェクトのプロパティ参照でundefinedが返されるので``||i``（index）の方に逃がしてやります。

我ながら秀逸ですが、宣言部分が長すぎて対していまいち短縮化できませんでした。

## 他にも頑張った

文字列をevalしてみるとか。

```js:fizzbuzz_eval.js
f='Fizz';b='Buzz';fb=f+b;for(i=0;++i<101;)console.log(eval('f  '[i%3]+'b    '[i%5])||i)
```

3で割った余りと5で割った余りの除算(``0/1 === 0``, ``1/0 === Infinity``, ``isNaN(0/0) === true``)を分岐させるとか。

```js:fizzbuzz_number.js
o={0:'Fizz',Infinity:'Buzz',NaN:'FizzBuzz'};for(i=0;i<100;)console.log(o[(++i%3)/(i%5)]||i)
```

## 自己ベスト

結局ES2015記法ではないのですが、以下のコードが最終的な自己ベストでした。

```js:fizzbuzz_my_best.js
for(i=0;++i<101;)console.log((['Fizz'][i%3]||'')+(['Buzz'][i%5]||'')||i)
```

配列マジックを駆使して、最短記録を10文字オーバーした72文字。

まあ、最短記録のコードゴルフを見れば見るほど無駄の無さが際立つので、思いっきり裏をかけない限りは更新不可能でしょうね…。

```js
for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'
```

ほら、無理。
Windows10ユーザがPython3.5でOpenCV3を使う環境を作った話

> (2016.4.6 追記) もっと簡単な方法があったのでリンク置いておきます．
> http://qiita.com/sugurunatsuno/items/ce3c0d486bdc93688192
> 
> Windows10の環境でもUbuntuと同じ方法でOpenCVをインストールできました．
>

Windows + Python3でOpenCV3のインストール方法をまとめた記事が無さげ (自分が探すのが下手なだけ？) だったのでメモ．

# やること

Windows10環境でOpenCV3をビルドしてPython3.5 (Miniconda) から使えるようにする．

# できたこと

以下のようにOpenCV3をPython3.5から読み込んだ．

```
$ python
Python 3.5.0 |Continuum Analytics, Inc.| (default, Nov  7 2015, 13:15:24) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>> cv2.__version__
'3.0.0-dev'
>>>
```

# 参考にした記事

* OpenCVの環境構築 (OpenCV 2.4.9) - Build Insider
 * http://www.buildinsider.net/small/opencv/02
* OpenCV3 インストールバトル - Qiita
 * http://qiita.com/emakryo/items/5e2c79c2a18e60dd212f


# 手順

#### 1. GithubからOpenCVのソースをcloneしてくる
```
$ git clone https://github.com/Itseez/opencv.git
```

#### 2. CMakeを起動し，先ほどDLしたOpenCVのソースの場所と，ソースをビルドするソリューションファイルを生成する場所を図のように指定する

![figure1.png](https://qiita-image-store.s3.amazonaws.com/0/83161/08bd3d74-47f0-9dd7-6b80-8750e4d37ce1.png)

#### 3. コンパイラとして「Visual Studio 11 2012 Win64」を選択する (vs2013とかでもいいと思う)

![figure2.png](https://qiita-image-store.s3.amazonaws.com/0/83161/675366a3-f6e5-96c9-0653-8ac69e7175b2.png)

#### 4. 赤く表示された変数がいっぱい出てくるので，Python3関連の変数について値を設定する．設定が完了したらConfigureを押す
 * Pythonがインストールされているときは，そのバージョンのPythonに関する値は自動で設定されるっぽい．
 * 自分はPython3の環境としてMinicondaを使っているせいで自動で設定されなかった？

![figure4-2.png](https://qiita-image-store.s3.amazonaws.com/0/83161/edcadf77-3e3c-58f1-f50c-9304dec4a591.png)

#### 5. `BUILD_opencv_python3`のみが赤く表示されるので，チェックをつけて再度Configure．
 * スクショは再度Configureした後のもの．

![figure5.png](https://qiita-image-store.s3.amazonaws.com/0/83161/f675b41b-208c-6b18-831a-80e2e13b78ea.png)

#### 6. Generateを押すとbuildにソリューションファイルが生成される

#### 7. ソリューションをVisual Studio 2012で開き，DebugとReleaseそれぞれでビルドする (時間かかる)
 * ビルドの結果，build内にbinとlibというディレクトリができる

#### 8. `bin/Release`と`lib/Release`の中身をそれぞれ`build/x64/vc11/bin`と`build/x64/vc11/lib`にコピーする
 * 参考文献ではビルドすると自動で配置されるぽかったけど，自分の場合は変な位置に生成されたので手動でディレクトリ作成して移動した．

#### 9. `build/x64/bin`のパスを環境変数に追加する

#### 10. 手順4.で`PYTHON3_PACKAGES_PATH`に設定したパスに`cv2.cp35-win_amd64.pyd`というファイルがあることを確認する

#### 11. Pythonを起動し，OpenCVをインポートしてバージョンが表示できたら完了

```
$ python
Python 3.5.0 |Continuum Analytics, Inc.| (default, Nov  7 2015, 13:15:24) [MSC v.1900 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>> cv2.__version__
'3.0.0-dev'
>>>
```
EC-CUBE3 でメールの送信ログを出力しよう！

EC-CUBE3 でメールが送信できない！
そんな時は、メールの送信ログを出力してみましょう。

[swift-mailer-psr-logger-plugin](https://github.com/gcrico/swift-mailer-psr-logger-plugin) を使います。

### 設定方法

EC-CUBE3 のルートディレクトリ直下で以下のコマンドを実行します。

```
php composer.phar require gcrico/swift-mailer-psr-logger-plugin @stable
```

src/Eccube/Application.php にある initMailer() 関数の最後あたり(EC-CUBE-3.0.7は408行目付近)に、以下のコードを追加します。

```src/Eccube/Application.php
        $app = $this;
        $this->extend('mailer', function ($mailer) use ($app) {
            $app_logger = $app['monolog'];
            $mailer_logger = new \gcrico\SwiftMailerPsrLoggerPlugin\SwiftMailerPsrLoggerPlugin($app_logger);
            $mailer->registerPlugin($mailer_logger);
            return $mailer;
        });
```

こうすることで、メールの送信ログが出力されるようになります。
詳細なログを出力させたい場合は、 `app/config/eccube/log.yml` を以下のように設定しましょう。

```app/config/eccube/log.yml
log:
    prefix: site_
    suffix:
    format: Y-m-d
    action_level: INFO
    log_level: DEBUG
    max_files: 90
    exclude_keys:
        - password
        - app

```

本当は、このログ出力を EC-CUBE3 本体でサポートしたくて、[いろいろ頑張った](https://github.com/EC-CUBE/ec-cube/issues/705)のですが、まだ実現に至っていません...
カノジョが見つかるかもしれないAPI

# WebAPIのデバッグするとき
Web作ってたらWebAPI作ることって多いですよね。
最近アプリ開発なんかでも必須になってきてます。

そんな時、GETはともかくPOST、PUT、DELETEなどのmethodがやりやすくなるツールをご紹介。

https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo

Chromeの拡張機能です。
これを突っ込んで、URL覧にAPIのURLを入力し、methodを選択、その下に必要なパラメータを入力しSendするだけ！

純粋なレスポンス結果のみならず、Statusなども確認ができるので、ステータスコードなどをカスタマイズしているAPIのデバッグにも使えます。

#ところで・・
この記事は[カノジョできないエンジニア Advent Calendar 2015](http://qiita.com/advent-calendar/2015/no-girlfriend)の12日目の記事です。

どうやらこのAdvent Calenderに参加していると、カノジョができるみたいな噂を聞きました。
おや・・・？４日目（[http://koibito.sexy/](http://koibito.sexy/)）に意味不明な記事がありますね。
ブログとしてちゃんと書いてほしいなぁ。。。
JSONってことはAPIなのかなぁ。。。
デバッグしてみようか。。。
単体テストを自動化できるようになるまで

その昔、プロジェクトの単体テストを自動化してみようと思い立ち、色々やったときの困ったところとやったことをまとめてみました。

# その１
## 一つのクラスや関数が巨大
パターンを網羅するテストを書こうとしても、クラスのインスタンスを生成するのが困難だったり、１個の関数の分岐点が多すぎてテストパターンが膨大になる。テストを作るのに大量のモックやスタブが必要になって工数がかかりすぎた。

## 対策
保守で参加したプロジェクトが巨大なレガシーコードでテストできない。これが一番自動化を断念する理由になるんじゃないかな？
この場合、無理して全部テストしようとするより、自分の書いた部分だけはテストで保護しようと努力しました。どうしても依存が激しくて無理！って場合は、その部分を関数化したりラッパークラスを作ったりして、モックやスタブを使えるようにして回避してました。レガシーコード改善ガイドって本を読むとイメージ付くかも！

# その２
## 時間が無い
開発工数が少ないのでそんな時間はない！
単体テストの時間が短い！

## 対策
最初はテスト自体を書くのに時間がかかってしまったけど、慣れてくると「手動で確認」の工数と「コードを書いて自動化」の工数はそんなにかわらないところまできました。
コードいじるたびにテスト用にデータ作ったりコード弄ったりしてた時間が無くなって、時間が短縮されていったのかなと思います。

# その３
## 何をテストしたらいいかわからない
最初は仕様を確認するテストを単体テストとして書いてましたが、仕様確認を単体テストとしてしまうと、認識違いや設計変更でプロダクトコードをちょっと修正すると、テストコードの修正量が膨大になっていく。

## 対策
仕様の確認は結合テスト。単体テストでは自分の書いたコードが「想定通り動くか」をテストします。最初はコードを書いたら、そこを通るテストを書くって意識でやるといいかも。その時に必ずカバレッジレポートを出すと、テストしたところが緑になっていって幸せな気持ちになれます :relaxed: 

# 自動化したことによる変化
レガシーコードからテスト自動化の単体テストで保護した結果、以下の効果がありました。

## コードが綺麗になる

１つのメソッドにズラズラと処理を書きなぐるタイプの人も、テストがめんどくさくなるので小さく細かく作るようになるので、とてもコードが見やすくなった。

## 結合テスト以降でシステムエラーの発生が皆無になった

レガシーコード時代はテスト中に思わぬシステムエラーが発生したりしていたが、自動化後はこれが無くなったので、仕様に対して集中してテストすることができた。
※後に結合テストも自動化しました。

## 動作確認が容易になる
お客様から問い合わせなどあった時の動作確認で、以前だとテスト環境にユーザーデータや関連データをimportして、必要なマスターデータを作って云々・・・と準備が手間でしたが、自動化後はモデルをダミーデータとしてインスタンス化できるので、動作確認用のスクリプトをがすぐ準備できて、実行することができました。

# まとめ
ある程度のプロジェクトで個人で始めても、どうしても続けるのが難しいです。
特にそれを仕事中でやるとなると、難易度がプロダクトコードによって変わってしまうので、チーム全員でやるべきかなと思います。
結局のところチーム全員で取り組めたのが一番の成功の要因かなと思います。
ちなみにこの時は、チーム全員がテストコードを書くようになるまで、約２年程くらいかかりました！
自動化してみよう！って時は周りに声をかけて根気強くやりましょう。
[OSX]ドライバについて（driver）（その2）

<p>ドライバーがロードされたかどうかが分かっても面白くないということで、対象のUSB機器が抜き差しされたら、ログが出力される事を確認することにした。</p>

<p>以前紹介した、DarwinのソースコードのIOUSBFamily-(バージョン番号).tar.gzのExamplesにあるVendorSpecific Driverのプロジェクトを開いて、Info.plistを確認する。</p>

![20130701_0.jpg](https://qiita-image-store.s3.amazonaws.com/0/12540/89520be1-6fd9-55a2-77f4-5a5abdfd375c.jpeg)


<p>IOProviderClassをIOUSBDeviceにして、bcdDeviceとiDProduct、idVendorを対象機器の値にすれば、抜き差しに反応しそうだ！</p>

<p>以前の開発環境に含まれていたUSB Proberを持っていたら、それを使って、SmartScrollの情報を確認する。</p>

![20130701_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/12540/c4313dc3-0b09-5bdb-078a-b306679cc61e.jpeg)


<p>VendorIDが0x056A、ProductIDが0x0050、DeviceVersionNumberが0x0007なので、SmartScrollDriver-Info.plistのIOKitPersonalitiesのSmartScrollDriverにbcdDeviceとidProduct、idVendorを追加して、7と80、1386を入力する。</p>

![20130701_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/12540/584e06e8-9095-94d4-7af0-d5e1ce9938d4.jpeg)


<p>この内容でビルドしてドライバーを前回の方法でロードする。</p>

<pre><code>$ sudo cp -R SmartScrollDriver.kext /tmp
$ sudo kextutil -v /tmp/SmartScrollDriver.kext
Notice: /tmp/SmartScrollDriver.kext has debug properties set.
/tmp/SmartScrollDriver.kext appears to be loadable (not including linkage for on-disk libraries).
Loading /tmp/SmartScrollDriver.kext.
/tmp/SmartScrollDriver.kext successfully loaded (or already loaded).
</code></pre>

<p>kernel.logをtailし、USB機器を差し込んで、抜く。</p>

<pre><code>$ tail -f /var/log/kernel.log
Jul  1 22:30:56 mbc2d kernel[0]: [SmartScrollDriver]Initializing
Jul  1 22:30:56 mbc2d kernel[0]: [SmartScrollDriver]Probing
Jul  1 22:30:56 mbc2d kernel[0]: No interval found for . Using 8000000
Jul  1 22:30:56 mbc2d kernel[0]: [SmartScrollDriver]Starting
Jul  1 22:31:14 mbc2d kernel[0]: No interval found for . Using 8000000
Jul  1 22:31:14 mbc2d kernel[0]: [SmartScrollDriver]Stopping
Jul  1 22:31:14 mbc2d kernel[0]: [SmartScrollDriver]Freeing
</code></pre>

<p>アンロード。</p>

<pre><code>$ sudo kextunload -v /tmp/SmartScrollDriver.kext
jp.co.bitz.driver.SmartScrollDriver unloaded and personalities removed.
</code></pre>

<p>抜き差しした際に、ログが出力されている事が分かるはずだ。</p>

関連情報
<a href="http://www.opensource.apple.com/release/mac-os-x-1075/">Mac OS X 10.7.5 - Source</a><br />
<a href="https://developer.apple.com/library/mac/#documentation/Darwin/Conceptual/KEXTConcept/KEXTConceptIntro/introduction.html">Kernel Extension Programming Topics</a><br />

【Cocoa練習帳】
<a href="http://www.bitz.co.jp/weblog/">http://www.bitz.co.jp/weblog/</a><br />
<a href="http://ameblo.jp/bitz/">http://ameblo.jp/bitz/</a>（ミラー・サイト）<br />
nginxでhttp2を試してみる

[Geek Woman の Advent Calendar](http://www.adventar.org/calendars/875#list-2015-12-12) 12日目としてこの記事を書いています。
ほそぼそと情報収集を去年(2014/夏)くらいからしていたのですが、RFCも決まり、
そろそろサービスにも使いたい！と思い、具体的に検証しようと思ったのがこちらを書くきっかけです。
nginxでhttp2を試してみます。
http/2は色々な方が書かれているので、幾つか試してみて、安定性、運用のし易さ、メンテナンス間隔
で選ぼうと思います。後にh2o,nghttp2について検証した内容も書く予定でいます。
環境:MacOS 10.11
vagrant 1.7.4
vagrantでCentOS7.1を用意する。
[CentOS7.1](http://www.vagrantbox.es/)

```
#vagrant box add centos7.1          　　https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.1/vagrant-centos-7.1.box
#vagrant init centos7.1
```
vagrantfileを編集
```
config.vm.define :wb01 do |wb01|
  wb01.vm.box = "centos7.1"
  wb01.vm.hostname = "wb01"
  wb01.vm.network :private_network, ip: "192.168.22.40"
end
```
`#vagrant up`

nginxは1.9.5からhttp2をサポートしています。
https://www.nginx.com/blog/nginx-1-9-5/#gs.BUI5Z3Q

今回はソースで現在最新の1.9.7を以下の場所から取得します。
デフォルトでは入らないとあるので、--with-http_v2_moduleをオプションで付けます。

`#wget http://nginx.org/download/nginx-1.9.7.tar.gz`
`#tar zxvf nginx-1.9.7.tar.gz`
`#cd nginx-1.9.7`
`#./configure --with-http_ssl_module --with-http_v2_module --with-debug --without-http_rewrite_module`
`#make`
`#make install`

サービスの登録をします。

`#cd /usr/lib/systemd/system/`
`#touch nginx.service`
`#vi nginx.service`

内容は公式にfedora対応であります。こちらを環境に合わせて書き直します。
公式：https://www.nginx.com/resources/wiki/start/topics/examples/systemd/

```lang:nginx.service
[Unit]
Description=The NGINX HTTP and reverse proxy server
After=syslog.target network.target remote-fs.target nss-lookup.target

[Service]
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
ExecStartPre=/usr/local/nginx/sbin/nginx -t
ExecStart=/usr/local/nginx/sbin/nginx
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s QUIT $MAINPID
PrivateTmp=true

[Install]
WantedBy=multi-user.target
```

http/2対応で自己証明書を作成します。
`#openssl genrsa 2048 > server.key`
`#openssl req -new -key server.key > server.csr`
`#openssl x509 -days 3650 -req -signkey server.key < server.csr > server.crt`

http2対応
/usr/local/nginx/conf/nginx.confに以下追記します。

```lang:nginx.conf
server {
    listen       443 ssl http2;
    server_name  localhost;

    ssl_certificate /etc/nginx/ssl/server.crt;
    ssl_certificate_key /etc/nginx/ssl/server.key;
```

リンクを貼り、サービスを登録します。
`#ln -s /usr/lib/systemd/system/nginx.service /etc/systemd/system/multi-user.target.wants/nginx.service`
`#systemctl enable nginx`

公文チェックをして起動します。
`#/usr/local/nginx/sbin/nginx -t`
`#systemctl start nginx`

動いていることを確認します。
`#ps ax |grep nginx`
  969 ?        Ss     0:00 nginx: master process /usr/local/nginx/sbin/nginx
  973 ?        S      0:00 nginx: worker process
 3573 pts/0    S+     0:00 grep --color=auto nginx

 ブラウザからHTTP/2 and SPDY indicatorを使ってhttp/2が有効か確認します。
 chromeブラウザを使っています。
 上のvagrantファイルで設定した、IPでアクセスします。
 最初は自己証明書なので、安全でない接続と出ますが、そのまま進みます。
![スクリーンショット 2015-12-12 0.04.10.png](https://qiita-image-store.s3.amazonaws.com/0/100546/6802a77a-c538-66db-5909-f79667d69779.png)

 インジケータが青くなってhttp/2が有効なことが確認できました！
 簡単な設定で有効にできるので、使っていきたいと思います。
CloudAtCostでArchLinuxブート

この記事はArch Linux Advent Calender 2015の12日目です。

* ArchLinuxのテンプレートが用意されていないCloudAtCostにArchLinuxをインストールします。
* 自分はDebian7.1上で行いました。

## インストール方法

* 昨日の[CloudatCost - DHCPサーバ無しでArchLinuxをiPXEブートに挑戦 - Qiita](http://qiita.com/tukiyo3/items/5d004f149ec7546cbfa0#%E5%8F%82%E8%80%83)を参考


```bash:ipxe.lkrnを/dev/sda1に置く
mkdir a
mount /dev/sda1 a

cp ~/ipxe.lkrn a
# grub rescue時用に/bootもコピーしておく。
cp -a /boot a
umount a
```

## Grub2からipxe.lkrnをブートさせる

```bash:/etc/grub.d/40_custom
#!/bin/sh
exec tail -n +3 $0

menuentry 'Arch Linux Netboot Environment' {
  set root='(hd0,1)'
  linux16 /ipxe.lkrn
}
```

```bash:
update-grub
reboot
```

## ArchLinux boot後の設定

```bash:
passwd
systemctl start sshd
```

* fdiskでパーティション変更。/dev/sda1はそのまま残す。

```bash:fdisk
Device     Boot   Start      End  Sectors  Size Id Type
/dev/sda1  *       2048   487423   485376  237M 83 Linux
/dev/sda2        487424  1511423  1024000  500M 82 Linux swap / Solaris
/dev/sda3       1511424 20971519 19460096  9.3G 83 Linux
```

```bash:反映
partprobe
```

```bash:
mkswap /dev/sda2

mkfs.ext4 /dev/sda3
mount /dev/sda3 /mnt
pacstrap /mnt base grub-bios openssh sudo
```

```bash:
arch-chroot /mnt /bin/bash
```

略)

## まとめ

* カスタマイズしたipxe.lkrnを持っていればはかどりますね。
[小ネタ] knockout.jsでラジオボタンのモデルの値に真偽値を使う

knockout.jsで真偽値を入力させる場合はチェックボックスを使うのが最も簡単ですが、「はい/いいえ」みたいに明示的に「いいえ」を指定させたい場合があります。このような場合はラジオボタンを使って以下の様にすることになります。

```html
<label><input type="radio" name="question" value="1" data-bind="checked: question" />はい</label>
<label><input type="radio" name="question" value="0" data-bind="checked: question" />いいえ</label>
```

value属性にビューモデルに設定される値を指定するわけですが、この値は文字列なので、ビューモデルに設定される値も文字列になります。普通にPOSTしてサーバに送信する場合はサーバが真偽値として解釈してくれる文字列を指定すればいいのですが、JSON形式で送信しようとした時に困ります。真偽値を期待しているところに文字列が送られてしまうのでエラーにされるかもしれません。

こんな時に使えるのが`checkedValue`パラメータです。選択された時の値を指定することができるので、`true`と`false`を指定してあげればビューモデルに真偽値が設定されるようになります。

```html
<label><input type="radio" name="question" data-bind="checked: question, checkedValue: true" />はい</label>
<label><input type="radio" name="question" data-bind="checked: question, checkedValue: false" />いいえ</label>
```

参考：
http://knockoutjs.com/documentation/checked-binding.html#checkedValue
libGDXを使った簡単なhtml5アプリの開発

HTML5 Japan Cup 2014 に参加した時に使用した libGDX を使った html5アプリ の作り方を紹介しようと思います。

ちなみに、応募した作品は[こちら](http://garyou14.appspot.com/)

## libGDX とは
デスクトップ(Windows、Linux、Mac)、スマホ(Android、iPhone) 、HTML5 に対応したクロスプラットフォームゲームライブラリです。

## 環境
HTML5 Japan Cup 2014 に参加した当時は、以下の環境で開発しました。
<dl>
<dt>OS</dt>
<dd>Windows7</dd>
<dt>開発ツール</dt>
<dd>Eclipse 4.4 + ADT Plugin + Gradle Plugin + Google Plugin for Eclipse<br />
Android SDK</dd>
<dt>ブラウザ</dt>
<dd>PC版 chrome で動作確認</dd>
</dl>

## 簡単な html5 アプリの作り方
### libGDX をダウンロード
以下のページで、Download Setup App をクリック
https://libgdx.badlogicgames.com/download.html
（gdx-setup.jar というファイルがダウンロードされます。）

### セットアップの実行
ダウンロードした gdx-setup.jar をダブルクリックすると、
プロジェクトのひな型を作成してくれるアプリが起動します。

![image](https://qiita-image-store.s3.amazonaws.com/0/104428/403f31b5-080b-efd1-da7f-5f3b82477d91.png)

アプリの名前、パッケージ名、メインクラス名、作成先のディレクトリ、インストールした Android SDK のホームディレクトリを入力し "Genarate" ボタンを押すと、プロジェクトのひな型を生成してくれます。

### 作成されたプロジェクトをEclipseで開く
gdx-setup.jar で作成されたひな型のプロジェクトをEclipse で開いてみます。
Eclipse 起動後、メニュー[ファイル]ー[インポート]をクリック
"インポート"ダイアログから Gradleプロジェクトを選択し「次へ」
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/82b28d10-9160-4f45-fb20-ed385e6c20ee.png)

"ルート・フォルダー"に gdx-setup.jar で作成したひな型プロジェクトの作成先のディレクトリを入力して、「モデルのビルド」ボタンを押下してから、「完了」ボタンを押下
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/325ab390-13d2-4d19-99f2-765990c28536.png)

プロジェクトがビルドされて、Eclipse上で開発できる状態になります。
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/ad50743e-22fd-5661-247c-c2b79d236bb5.png)

### ひな型アプリの実行
Google Plugin for Eclipse がインストールされていれば、特にコーディングしなくても、アプリのひな型が実行できます。アプリの名前-html のプロジェクトを右クリック－「実行」ー「Webアプリケーション(GWT Super Dev Mode)」をクリック
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/c2918229-5a38-2825-63ab-fa00d6a015ef.png)

Eclipse上でWebサーバーが起動します。
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/a97ed759-778d-4853-5850-f07bdc2f050c.png)


ブラウザーでアクセスすると、こんな感じにひな型のアプリが起動します。
![image](https://qiita-image-store.s3.amazonaws.com/0/104428/2db55aff-1f54-9809-21a7-3e9ca8b0521b.png)

## まとめ
かなり、ザックリと libGDX をつかったHTML5アプリの作成方法を書いてみました。
もっと、アプリ開発の細かいところまで書きたかったのですが、今回はここまでにしたいと思います。
最近、libGDXの情報源が豊富になっているので

- クロスプラットフォームで スマホアプリを作りたい人
- スマホアプリ開発でエミュレータが重くてイヤになっている人
- 「やっぱり java でコーディングしたい！」な人

は、libGDX でアプリ開発してみてはいかがでしょうか？
見慣れない不等式を発見した話

# イントロ
　実数$x, y$が$0 < x < y$を満たすとする。このとき、次の不等式が成立する。

```math
\frac{x}{1+x} + \frac{y}{1+y} > \frac{x+y}{1+x+y} \tag{1}
```
大学受験によく出てきそうな不等式だ。ゴリ押しで証明するには、左辺から右辺を引いて通分すればよい。

```math
\frac{xy(x+y+2)}{(x+1)(y+1)(x+y+1)} > 0
```
分母分子に正の数しか出てこないから、全体は正という理屈である。証明としてはこれでいいのだが、結局この不等式$(1)$が何だったのかはよく分からない。そこで、式変形により何かイメージしやすい表現が出てこないか、もう少し追いかけてみよう。幸い、元の式は対称性も高いし、いかにも意味のありそうな形をしている。

# 一般化

　関数$\phi(x)$を次で定める。

```math
\phi(x) = \frac{x}{1+x}
```
このとき、元の不等式$(1)$は、次のように書ける。

```math
\phi(x) + \phi(y) > \phi(x + y) \tag{2}
```

つまり$\phi(x)$は線形性に似た性質を持っていることが分かる。

+ 線形な関数$f$: $f(x) + f(y) = f(x + y)$
+ 今回の関数$\phi$: $\phi(x) + \phi(y) > \phi(x + y)$

どういう関数がこの性質を持っているのだろうか？　$\phi$を微分してみるとなんとなく予想がつく。

```math
\frac{\rm d^2}{{\rm d}x^2}\phi(x) = -\frac{2}{(x+1)^3}
```
これは$x>0$で負だから、$\phi(x)$は$x>0$で上に凸な関数である。凸関数といえば、すぐに思いつくのは凸不等式である。

```math
\frac{\phi(x) + \phi(y)}{2} < \phi(\frac{x + y}{2})
```
しかしこれは分母を払っても式$(2)$とは不等号の向きが逆だし、変数変換しても式$(2)$には帰着できそうにない。諦めて、凸関数の定義に戻ってみる。$z = x + y$とする。$x < y < z = x + y$だから、平均値の定理より、ある実数$p, q$が存在して次を満たす。

```math
\frac{\phi(y) - \phi(x)}{y - x} = \phi^\prime(p), \frac{\phi(z) - \phi(y)}{z - y} = \phi^\prime(q), x<p<y<q<z
```
$\phi$は上に凸だから$\phi^\prime$は単調減少である。従って、

```math
\frac{\phi(y) - \phi(x)}{y - x} > \frac{\phi(z) - \phi(y)}{z - y}
```
が得られる。これを整理すると、

```math
\frac{y\phi(y) - x\phi(x)}{y - x} > \phi(x + y)
```
となる。従って、

```math
\phi(x) + \phi(y) > \frac{y\phi(y) - x\phi(x)}{y - x}
```
が言えれば、不等式$(2)$を示すことができる。左辺から右辺を引くと、

```math
\frac{y\phi(x) - x\phi(y)}{y - x} \tag{3}
```
となって、分母は正だから、分子$y\phi(x) - x\phi(y)$の符号が式$(3)$の符号と一致する。この分子の絶対値は、ベクトル$(x, \phi(x))$と$(y, \phi(y))$の張る平行四辺形の面積であり、符号はベクトル$(x, \phi(x))$の方向を$(y, \phi(y))$に重ねる回転行列が時計回りのとき正、反時計回りのとき負となる。上に凸な関数$\phi(x)$について、$x>0$の範囲で$x$が増大するときに$(x, \phi(x))$が時計回りに動くには、$\phi(+0)>0$であればよい。以上をまとめると、次のようになる。

# 得られた不等式

　$x>0$で定義された関数$\phi(x)$が、$\phi(+0)>0, \phi^{\prime\prime}(x)<0$を満たすとき、次が成立する。

```math
\phi(x) + \phi(y) > \frac{y\phi(y) - x\phi(x)}{y - x} > \phi(x + y)
```

なんか公式っぽいものが導出されたように見えるのだが、この式が有名なのか、名前が付いているのかどうかもよく分からない。数学アドベントカレンダーに投稿すると数学ガチ勢の方がマサカリを投げてくれそうなので、今回の記事を投稿してみた次第である。そもそも間違ってるというツッコミを含め、この式がどういう背景を持っているのかというクリスマスプレゼントを待ちつつ筆を置き、次の人にバトンタッチしたい。
範囲外クリックでポップアップを閉じる正しい JQuery


ポップアップを表示して、その領域外をクリックされた時にそのポップアップを閉じたい、といった処理はよくあります。しかしこれを実装する時にちょっとした気をつける点があります。

# よく見かけて気になっている悪い例

Stackoverflow などでよくある処理としては、クリックイベントを全検知して、Pop up を閉じるような処理をしてしまう。もし自分自身だったら stopPropagation()[^1] して、イベント伝播しなくする。理由としては stopPropagation() しないと、ポップアップそのものをクリックした時に閉じてしまうのを防ぎたいからです。

例えばこういったコードです。

```js
$('#target_element').click(function(event) {  
  event.stopPropagation();  
});
```

# 正しいアプローチ

アプローチとしては、クリックイベントを全検知 (ついでに touch device も対応)。もし、そのクリックが自分を含まないものであれば[^2]閉じる処理をするようにします。


```js

$(document).on('click touchend', function(event) {
  if (!$(event.target).closest('#target').length) {
    // ここに処理;
  }
});
```

# なぜ悪い例としてあげたのか?

安易に stopPropagation() するべきではないのかということなのですが、https://css-tricks.com/dangers-stopping-event-propagation/ に詳しく解説があります。かいつまむと、

> In the "How to detect a click outside of an element?" example above, the purpose of calling stopPropagation isn't to get rid of the click event altogether, it's to avoid running some other code on the page.

「stopPropagation が、クリックイベント自体を取り除くだけではなく、なにか他のコードが実行されることを妨げている効果も持もたらす。」
例えば、ポップアップがオープンな時に、他のクリックイベントを検知して動作するボタンをクリックしても、クリックイベントが伝わらないようなことが起こりえます。

> To avoid bugs, it's almost always best to leave events alone and let them propagate as the browser intended.

「イベント自体はそのまま発生させて、ブラウザが意図したようにイベントを伝播させたほうがこのましい。」


---
[^1]: stopPropagation()、preventDefault()、return false 各々についてわかりやすいのは http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=3107&rand=ef81c

[^2]: こちらも参照 https://api.jquery.com/closest/


※本投稿は [http://d.hatena.ne.jp/mabots/20151120/1448003977](http://d.hatena.ne.jp/mabots/20151120/1448003977) を [Coubic Advent Calendar 2015](http://qiita.com/advent-calendar/2015/coubic) に向けて、加筆・再編したものです。
本番リリース前の最終テストは？


本番リリース前までに、様々なテストを実施してきたけど、やはりそれでも不安がつきもの。
そんなシステムに自動的にテストを実施してくれるサービスがあります。


# そもそもテストで見つけられないバグとは？

よくあるのが、開発者が気づかないバグとか、開発者や仕様設計者が知らないバグ。
　⇒「**脆弱性**」ですよ！

脆弱性の一番の原因は「知らなかった」です。

# 脆弱性ってなんだよ！

フォームのデータに不正なコードを送りつけて、不正なSQLを発行したりしてデータを盗み出したりするやつです。
他にもいろいろありますが、一番被害がでかいのがSQLインジェクションかな？

よく解説されているのが[徳丸先生のブログ](http://blog.tokumaru.org/)ですが、
そこで出てくるIPAの安全なWebアプリケーションの実装とはという内容は

http://www.ipa.go.jp/security/fy18/reports/contents/enterprise/html/621.html#2.1.1

ここで書かれていることは注意しましょう。というか厳守しよう。

# 意外と怖い脆弱性

徳丸先生のブログにも書かれている、開発を請け負った側が脆弱性によって損害賠償を請求されてしまう
ケース。
フリーランスだったら自殺するしかないですね。こんなに請求されたら。
■[SQLインジェクション対策もれの責任を開発会社に問う判決]
(http://blog.tokumaru.org/2015/01/sql.html)

# テストサービスを利用する

[vaddy](http://vaddy.net/ja/)http://vaddy.net/ja/

フリープランもあるので、試しに使ってみるのもいいかも。

脆弱性って、開発者自ら気づいて出来ることは限られるので、
テストサービスで利用できるものがあるのならば、利用してしまうのが良いと思います。
Androidビルドで「You build has exceeded the memory limit of 4G on 1 container. 」の対処法

みなさんこんにちわ。
僕は、最近まで「**Nginx**」のこと、

![nginx.jpg](https://qiita-image-store.s3.amazonaws.com/0/103647/604c4a93-d866-15d6-9fb3-444c723917cf.jpeg)

って言ってたんですけど、これ正しくないです。
「**えんじんえっくす**」っていうのが正しいみたいなのですけど、これ無理すぎないですか？

* IIS => あいあいえす（わかる）
* Apatch => あぱっち（わかる）
* Nginx => えんじんえっくす（ワカンネ）

どうも納得できないですよね。
言葉の由来とかもよくわかんないですけど、みんなコレちゃんと読めてるんですかね？！
Nginx（ぬぎんくす）っていうのが正しい気がしてて、僕が会社のエラい人だったら「Nginx（えんじんえっくす）」っていう人がいたら絶対即クビにしてますね。

# Circle CIのメモリの使用量は4Gまでであり、越えるとエラーで止まる。

僕は会社のエラい人でもなんでもないので、別に誰もクビにならなくてよかったなと思いますけど、そんな僕がSlackのCircleCIチャンネルでAndroidビルドが連続して失敗を確認しましたよ。

ビルドエラーを確認すると下記のようなエラーメッセージが表示されていました。

> ./gradlew clean assembleDebug -PpreDexEnable=false died unexpectedly
> 
> Building 88%90% > :app:preDexDebugAction failed: ./gradlew clean assembleDebug -PpreDexEnable=false

そしてcircle CIのビルドジョブの上の方に下記メッセージが表示されてました。

> You build has exceeded the memory limit of 4G on 1 container. The results of this build are likely invalid. We have taken a snapshot of the memory usage at the time, which you can find in a build artifact named `memory-usage.txt`. The RSS column in this file shows the amount of memory used by each process, measured in kilobytes.

つまり1コンテナのメモリ使用量は4Gまでなので、お前超えてるからコケたよってことのようです。

# (解決策)省メモリビルドのために、いろいろパラメータをつければOK！

下記のように省メモリでビルドするようにすれば通りました。

```circle.yml
deployment:
    master:
        branch: master
        commands:
            - ./gradlew assembleDebug -PpreDexEnable=false -Pcom.android.build.threadPoolSize=1 -Dorg.gradle.parallel=false -Dorg.gradle.jvmargs="-Xms512m -Xmx512m" -Dorg.gradle.daemon=false
```

それではまたどこかでお会いしましょう！

# 参考

[Gradle assembleDebug and preDexDebug fail with CircleCI](http://stackoverflow.com/questions/28409608/gradle-assembledebug-and-predexdebug-fail-with-circleci)
非最適探索の意義 -- おまけで Hill Climbing と EHC

この回からしばらくは、非最適探索に特化した探索アルゴリズムを紹介します。

非最適探索とは、基本的に **正しい経路であればなんでもよい** という種類のアルゴリズムです。しかし、そんな経路に使い道はあるのでしょうか?

非最適探索を使う事の意義はいくつかあります。

# 非最適探索は最適探索よりも簡単である。

これは、通常、探索空間において、経路がながければ長いほど、多くの数の経路がゴールたどり着くからです。**例えば地図で考えてみましょう。**多くの場合、 最短経路というのは一本しかありません。しかし、**最短よりもちょびっとだけ長い**経路というのは、数えきれないくらいあるのがわかるでしょうか。

例えば、下の地図の経路通りに歩いている時、途中で一回コンビニに入ってみたとしましょう。すると、それだけで経路は少し長くなります。経路上のどこでほんの少し寄り道をしても、その経路は非最適です。仮に寄り道をする方法が $n$ 個あったとしたら、 2 回寄り道する方法は $n^2$ こあります。3回寄り道なら $n^3$ 個です。寄り道の数が増えれば増えるほど、許される解の個数も指数的に増え、問題は簡単になるのです。

![googlemap.png](https://qiita-image-store.s3.amazonaws.com/0/6090/8d00f4cf-2fed-6c3c-4ad1-f21b18208c7a.png)


# 解を素早く見つけられるので、実用化しやすい。

非最適探索は最適探索よりも簡単なので、非最適向けのアルゴリズムを用いると、答えを素早く得られます。解の**質/良さ**、つまりコストが最適であることを犠牲にして、 **とりあえずの解を素早く得る** ことは重要です。だって、カーナビがナビを開始するまでに一時間もかかったりしたら使い物にならないでしょう?

これは人工知能の問題でもあります。実世界を動き回るロボットにとって、**危険に素早く反応して生き延びること** は重要なタスクの1つです。例えば、道を歩いているロボットに、暴走する珍走団が突っ込んできたとしましょう。この時に、どうやって珍走団を最適に避けるべきなのかをじっくり考えていたら、行動を行う前に轢かれてしまうかもしれません。このように、反応時間が重要になるような問題では、高速な非最適探索は必須の手段になります。

# 非最適解をとりあえず実行しつつより良い解を探すこともできる。

おそらく、より賢い戦略はこちらなのではないでしょうか。非最適解は**おそらく**最適解とある程度似通っていて、最適解にいくつかの無駄が入り込んだものだと考えられるでしょう。ある程度実行しながらより良い最適解を探すというのは、アジャイルプログラミングにも通じるものがあります。それとくらべると最適探索は、ウォーターフォール開発のようなものです。

それにそもそも、完璧にゴールまでたどり着く経路が必要とも限りません。人間でも、車で遠出をする時、最寄りの高速ICに乗って目的地付近のパーキングエリアに行くまではカーナビを起動しない人もいるのではないでしょうか。(いや、休日で渋滞が予測されれば別ですが。) 

最適化に関する鉄則を思い出しましょう:

+ *プログラム最適化の第一法則: 最適化するな。*
+ *プログラム最適化の第二法則（上級者限定）: まだするな。* - Michael A. Jackson


このように、最適性が相対的に重要でない問題のため、あるいは最適性をある程度あとで取り戻せる問題のために、非最適探索は有用です。今日は、そのような手法のうち最もシンプルなものの1つである **山登り法** という局所探索の一種を紹介します。

# Hill Climbing (山登り法)

簡単!

+ Algorithm $HillClimbingSearch(n)$ :
    + If $goal(n)$
        + Exit Algorithm
    + Else
        + $HillClimbingSearch(\arg \min_{m\in children(n)} f(m))$

つまり、よい$f$の方向にひたすら進み、戻ってきもしないという、シンプル明快な方法ですね!
でも、 $h$ の極小値にハマってしまう場合があるので、そのままでは実用になりません。重複検知などでループを防ぐ必要や、タブーサーチとの組み合わせなど、さまざまな拡張が考えられます。

このように、あまり広い空間全体のことを考えず、付近の状況だけをみて探索を行う種類の探索を局所探索と言います。

# Enforced HillClimbing (Hoffman 2001)

<sub>[Hoffmann, Jörg, and Bernhard Nebel. "The FF planning system: Fast plan generation through heuristic search." Journal of Artificial Intelligence Research (2001): 253-302.]</sub>

山登りの変種。ノードごとに幅優先探索を行い、 $h(s) < h(s')$ を満たすような $s'$ がみつかれば続行、失敗すればアルゴリズム全体で失敗。失敗した場合には普通のA*などに移行することで、アルゴリズム全体の完全性が保てます。

+ Algotithm $EHC(s)$:
+ If $goal(s)$
    + return $s$
+ Else
    + let $s' \leftarrow \mbox{BreadthFirstSearch}(s)$ (under $h(s) < h(s')$)
    + If $s' = \mbox{NotFound}$
        + return $\mbox{Fail}$
    + Else
        + EHC($s'$)

# まとめ

山登り法を解説しました。初回なのでこんなもので。
知る人ぞ知るUnity 5のネイティブオーディオプラグインについて

# はじめに

みなさん、Unity 5から使えるようになったネイティブオーディオプラグインのこと、知ってますか？
え？「DllImportで呼ぶやつだろ」って？はい、それはただのネイティブプラグインですね。

Unity 5ではオーディオ機能が改良され、Audio Mixerなどの仕組みが追加されると同時にネイティブオーディオプラグインが使えるようになりました。

# 今までと何が変わったの？

Unity 5以前では音声データを加工するためにはMonoBehaviourのOnAudioFilterReadを使って、スクリプトで処理するしかありませんでした。

ネイティブオーディオプラグインでは処理部分をC/C++などのネイティブコードで記述できるため、高速に音声データの生成・加工を行うことができます。
(エディターからプラグインを操作するためのGUIはC#で記述する)

# サンプル

ネイティブオーディオプラグインのサンプルが以下のURLで公開されています。

https://bitbucket.org/Unity-Technologies/nativeaudioplugins

サンプルと言っても実際のプロジェクトでもそのまま使えるような機能を持ったプラグインが25個も含まれており、「サンプルとはいったい？うごごご…」と宇宙の法則が乱れること請け合いなので、どのようなプラグインが含まれているか順に説明していきたいと思います(というかサンプルの紹介がこの記事の主題だったりする)。

## ビジュアライズ系

エディターでの再生時に、Audio Mixerのインスペクターで何らかの可視化を行えるようにするプラグインです。

|名前|説明|
|:---|:---|
|CorrelationMeter|ステレオメーター。ステレオ信号の位相関係を確認することができます。|
|LoudnessMeter|ラウドネスレベル(音の大きさ)が確認できます。|
|Oscilloscope|リアルタイムに波形が確認できます。|

## プロシージャル系

様々なアルゴリズムを元にパラメータに応じて波形を生成します。

|名前|説明|
|:---|:---|
|ImpactGenerator|スクリプト側からの指示を受けて衝撃音のような波形を生成します。|
|ImpulseGenerator|揺らぎを持ったインパルスを生成します。|
|NoiseBox|ノイズを生成します。|

## エフェクト系

様々なアルゴリズムを元にパラメータに応じて波形を加工します。

|名前|説明|
|:---|:---|
|ConvolutionReverb|畳み込み演算を利用したリバーブです。|
|Equalizer|よくあるイコライザー。3バンド対応。|
|Granulator|グラニュラーシンセシスを行います。それ以上説明のしようがない。|
|LevelMixer|音声チャンネルごとにレベルを調整します。|
|Lofinator|サンプルレートと量子化ビット数を下げてLo-Fi(Hi-Fiの逆)な音を作り出すエフェクトのようですが…デモでは使用されていないような？|
|ModalFilter|金属音を作り出すのに使えるエフェクトです。|
|Multiband|マルチバンドのコンプレッサーです。これも3バンド。|
|RingModulator|リングモジュレーターです。正弦波オシレータ内蔵。|
|Spatializer|立体的な音場を作り出すためのエフェクトです。|
|StereoWidener|音声のステレオ効果を強めます。|
|TubeResonator|共鳴管？のシミュレーションを行います。|
|Vocoder|ボコーダーです。Daft Punkが使ってるアレ。|
|WahWah|俗に言うワウ・エフェクトです。ジミ・ヘンドリックスがよく使ってました。|

「俺はUnityのサンプルの話を聞いていたと思ったらいつのまにかDAWの話になっていた」って？僕もそう思います。

## シンセサイザー系

プロシージャル系に近いですが、より楽器的な音声を生成します。

|名前|説明|
|:---|:---|
|Synthesizer|ちょっとしたソフトウェア・シンセ。なんとMIDI入力にも対応！何に使うんだよ！|
|TeeBee3o3|アシッドハウスを生んだあの名機を再現した？シンセサイザーです。|
|TeeDee9o9|デトロイトテクノでおなじみのあの名ドラムマシンを再現した？シンセサイザーです。名前がちょっと違うけど。|

ここらへんから「お前絶対趣味で作ってるだろ！」という気がしてきます。

## その他

|名前|説明|
|:---|:---|
|PitchDetector|高速フーリエ変換によって再生中の音声の音程を分析します。|
|Routing|スクリプトから音声データを取り出せるようにルーティングするためのプラグインです。|
|Teleport|共有メモリーを利用して、プロセス間で音声データの転送を行います。|

もう完全にゲームと関係ないよね…。

## デモ

サンプルに含まれるデモシーン(Assets/demos.unity)を再生することで実際のプラグインの動作を体験できます。プロシージャル系のプラグインを組み合わせて環境音を再現するデモなど一聴の価値あり。

# より詳しく

ネイティブオーディオプラグインの詳しい解説がUnityのマニュアルにあります。

http://docs.unity3d.com/ja/current/Manual/AudioMixerNativeAudioPlugin.html

また、こちらはUnity 5のオーディオシステムを開発したJan MargucがUnite 2015 Tokyoで講演をした際の資料です。

http://japan.unity3d.com/unite/unite2015/files/DAY1_1900_room1_Jan.pdf

# 最後に

さて、ネイティブオーディオプラグインによって今までのUnityにおける音声処理の限界を軽く突破できることがお分かりいただけたと思います。プレイヤーによりよい体験を提供するには、聴覚への刺激も効果的かもしれませんね。

以上、Unity 2 Advent Calendar 2015の12日目として書かせていただきました。
それでは24日にまたお会いしましょう！
Google日本語入力 1（一般設定編）

## Google日本語入力 1（一般設定編）

Dvorak Advent Calendar 12日目．

-----

![](https://lh3.googleusercontent.com/CLSm-5GTs8lNv8NVxx9aXNacFTDmGWT6AlWLMP2XNXaT1DM4uiDUz6bHw7HI7fRgB8myKmjM7F_MerNpxtcO1AQiB1J88a2pbIN3RtyfwsxTt7LL2palo7GI9HfQYpRfsZZ6ek69vgjkqmGBUOIwA96URBmBoOhbrJzEm1pwDu3W17xyoalvBUGtArc2bl8vQDX3b63tppTscbK_FI6wHRg6_lzJOxTYt-ByjBbq_fB_3JLEaopFcpy7yz_kluPReev04PKupjsGbHEmYXQCeXrsmtsEtFMLWYmAOI6xZzLgQWDcPyhejNikGHBV-_CMZp82TGSCCfL7-xEX1ArQT1-LLnaKqT9QJXh9qCMWTMzeMjYPCiWN7X7kZdqdGQEQkV0w0gVtI8uE8MBcglcXF2YqVL49Z6_CRZD0i4BN3QfPlPscWvD2RSRPa9KkF0NepJfCa9ihmVLaICmh2gMHwO-sSobPNfY8qk93XOAzkArhr6Ygw-FnQXBYn27Qg1skLe5o_lw_GUJDiQPQqSKnqYqX-Ew5IRLkWKBwHvRus7Px=w520-h455-no)


数字入力はデフォルト半角にしておくと何かと捗る．     
英字についても半角が良いかも．     
     
     
DvorakJPなローマ字テーブルの設定はまた別のエントリーに:joy: :joy:
Heroku Postgres へ AWS Lambda からアクセスする

# Heroku Postgres へ AWS Lambda からアクセスする
こんにちは、@kimihomです。

こちらは [Heroku Advent Calendar 2015](http://qiita.com/advent-calendar/2015/heroku) の12日目の記事となっております。

弊社は5分でブラウザ電話コールセンターを構築できる[CallConnect](https://www.callconnect.jp)を Heroku と Ruby on Rails で構築しています。そして AWS Lambda と Heroku Postgres をつないで連携しているので、そのTipsをご紹介します。

## [AWS Lambda](http://aws.amazon.com/jp/lambda/) とは
Herokuの記事なのであまり深くは説明しませんが、AWS Lambda はあらゆるイベントをトリガにしてお好きなコードを実行できるサービスです。

この"あらゆるイベント"というのがポイントで、例えば画像やJSONをS3にアップロードしたタイミングでメールを送ったり、画像処理をしたりといった処理を AWS Lambda へ渡すことができます。これにより頻度の多くないバックグラウンドジョブを AWS Lambda に任せることができるようになります。

## Heroku Postgres を外部からアクセスする
Heorku Postgres は外部から簡単にアクセスできます。最も簡単な方法は、[Heroku Toolbelt](https://toolbelt.heroku.com/)を利用してコマンドを叩くやり方です。

```bash
> heroku pg:credentials DATABASE -a my-awesome-app

postgres://user:pass@ec2.compute-1.amazonaws.com:5432/aaaaaa

```

この接続URLの末尾に`?ssl=true`を付ければ接続ができるようになります。実際にnpmモジュールのpgを利用してアクセスします。

```javascript
var pg = require('pg');
var async = require('async');
var aws = require('aws-sdk');

exports.handler = function(event, context) {

  var conString = "postgres://user:pass@ec2.compute-1.amazonaws.com:5432/aaaaaa?ssl=true";

  pg.connect(conString, function(err, client, done) {
    async.waterfall([
      function startTransaction(callback) {
        console.log("Step4: Begin Transaction.");
        client.query('BEGIN', callback);
      },
      function insertToContacts(callback) {
        client.query("INSERT INTO ....", callback);
      },
    ], function(err, result) {
      client.query("COMMIT", done);
      console.log("Transaction finished.");
      if(err) console.log(err);
      context.done();
    });
  });
};
```

ここで INSERT に渡すデータは、もちろん外部APIを呼んで取ってきてもいいですし、S3に保存したデータを入れるといったこともできます。

## Heroku のデータ容量に気をつける
ここで調子に乗ってたくさんデータを入れてしまうと、プラン容量をオーバーしてしまう時がきます。こまめに

```bash
> heroku pg:info -a my-awesome-app
=== HEROKU_POSTGRESQL_CHARCOAL_URL, DATABASE_URL
Plan:        Hobby-dev
Status:      Available
Connections: 3/20
PG Version:  9.4.4
Created:     2015-04-24 02:53 UTC
Data Size:   10.8 MB
Tables:      19
Rows:        4739/10000 (In compliance)
Fork/Follow: Unsupported
Rollback:    Unsupported
Add-on:      live-surely-5553
```

を見て確認するようにします。限界が近づいたら一応 Heroku からもメールが来るようです。

## その他 Heroku Postgres TIPS
せっかくのアドベントカレンダーなので Heroku Postgres に関してのTIPS。

#### Heroku Postgres にあるデータを他のHeroku Postgresに移す

```bash
> pg_dump --no-acl --no-owner -h [host ip].compute-1.amazonaws.com -U [user name] -t [table name] --data-only [database name] > table.dump

> echo "truncate [table];" | heroku pg:psql [DATABASE] -app YOUR_APP

> heroku pg:psql --app YOURAPP DATABASE < table.dump
```

#### 毎晩2時にバックアップをスケジューリング

```bash
heroku pg:backups schedule --at '02:00 Asia/Tokyo' DATABASE_URL
```

## 所感
自分でデータベースを管理する必要がなくなるので、Heroku Postgres は重宝しております。
[Heroku Postgres の本](http://books.rakuten.co.jp/rk/9392d29678363dbeaa192e2612d8e93c/)も出版されているので、もし興味があれば一読されることをお勧めします。
ちょっとうれしいStoryboardの新機能


この記事は[リクルートライフスタイル Advent Calendar 2015 - Qiita ](http://qiita.com/advent-calendar/2015/recruitlifestyle) の12日目です。
こんにちは！AirレジでiOS開発を担当している山口恭兵です。

はじめに
----

巷では Storyboard Reference の話題で盛り上がっていますが、今回は Xcode7 からひっそりと追加されたちょっと便利なStoryboardの新機能を紹介したいと思います。

なんと、Xcode7からはSceneのView階層に紐付かないView（Extra View）をStoryboardで追加することができるようになりました！・・と言われてもイマイチ伝わらないと思うので図で説明していきます。


Extra Viewの追加手順
----

1. Object libraryからUIViewを選択する
2. UIViewをScene docにドラッグする
3. 以上！

![スクリーンショット_2015_12_11_16_32.png](https://qiita-image-store.s3.amazonaws.com/0/33433/93dc9daa-714f-cfc5-c202-c3dfd7d034e5.png "スクリーンショット_2015_12_11_16_32.png")



Sceneの上部にViewが表示されます。通常のViewと同じく各種パーツを配置したり、Autolayoutを設定することができます。もちろん、ViewControllerに対して Outlet や Action を繋ぐ事ができます。
通常のViewと違うところは、ViewControllerの生成時点では addSubviewされていないところです。

![Main_storyboard_—_Edited.png](https://qiita-image-store.s3.amazonaws.com/0/33433/1bf19ca1-7f1f-c450-7417-360daa6b6c7c.png "Main_storyboard_—_Edited.png")


利用シーン
----

上記のようなエラー時のみに表示したいViewや、特定のボタンなどをタップした際に表示されるメニューを作るときに便利そうですね！今までであれば 別xibファイルでViewを作成したり、SceneのView上で直接レイアウトを作成して初期値を hidden = true にしておくしていたかと思います。

ほかにも活用できそうな場面があれば、ぜひご意見をお願いします！
React Native - Router(Navigator/Ex-Navigator)

## Navigator/Router

React NativeでRouter/Routingというと[Navigator Component](https://facebook.github.io/react-native/docs/navigator.html#content)でのルーティングになります。WebのURLでのルーティングとは少し違うので注意が必要です。イメージ的には下記のようにコンポーネントであるSceneのスタックです。

![ow5gG-2.png](https://qiita-image-store.s3.amazonaws.com/0/13663/93452b3e-e3e4-032c-6ed7-ba81aca8f401.png)
>転載画像：http://stackoverflow.com/questions/32616589/react-native-navigator-with-persistent-scenes

Navigatorにはpush/popのようなメソッドが用意されており、Routing Stackに追加していくことでコンポーネント間の遷移を実現させていきます。


## NavigatorIOSとNavigatorの違い

[ここ](https://facebook.github.io/react-native/docs/navigator-comparison.html#content)に詳しく書いてありますが、Navigatorに関するコンポーネントは、NavigatorIOSとNavigatorがあります。NavigatorIOSはiOSのネイティブライブラリを利用しているので、ネイティブと同じ早い動きになります。iOSアプリだけを作成するつもりなら問題なく利用できますが、長期的に考えてNavigatorを選択するのが良いと思います。そのページでも勧めています。。

## Module/Libraryについて

Reactには`react-router`のようなURLのルーティングを管理するモジュールがあります。React Nativeにはルーティングを管理するモジュールはまだありません。[react-routerのissue](https://github.com/rackt/react-router/issues/743)でも、話されていますが、tabarなども含むと複雑になり、その辺を整理するのに議論が必要なようです。したがって、2015年12月時点では、router系のモジュールを使わない方が良いと思います。

## Ex-Navigator

Navigatorを直接使うのも良いですが、FacebookのJames氏が[Routing and Navigation in React Native](https://medium.com/the-exponent-log/routing-and-navigation-in-react-native-6b27bee39603#.fm6gwd5p0)という記事を書いており、ここで彼のライブラリの[Ex-Navigaor](https://github.com/exponentjs/ex-navigator)を紹介しつつ、Routingについて述べています。

このEx-Navigatorモジュールは私も利用していますが、綺麗にRouter.jsのようなファイルにRoutingコンポーネントにまとめられるのがとても良いです。READMEを読めば大体の使い方はわかると思います。
できるかな？レーザーカッターで加工(by the ヲタク,for the ヲタク)


# 経緯
EEICにはBDM(ビックリドッキリメカ)を作る授業があり、場合によってはレーザーカッターなどを使用する必要が出てきます。
このレーザーカッターというものは大変便利なものです。初めて触った時これこそ「いのべーしょん」だと感動しました。
レーザーカッターは13号館やFabcafeで使うこと出来ます。
しかし一度も使ったことがない人はなかなか手が出しにくいと思うので、一度使った経験を元に注意点を記録しておこうと思います。

# 下準備
レーザーカッターを使うには、ベクトル画が必要です。いろいろソフトはありますがAdobe Illustratorがおすすめです。フリーだとinkscapeあたりがいいのかな(あんまり詳しくないですm(__)m)

この時、パスは色ごとに出力が変えられます。13号館のデフォルトだと青色だと表面だけ削り、赤色だと切り取ります。ベクタ画像の部分はかなり細かい模様を刻むことが出来ます。
塗った部分やラスタ画像の部分は一様に削られます。結構出力が荒いので注意してください。また塗りの色に関係なく加工されます。

Illustratorの場合データはIllustratorCS3で書き出す必要があります。またいらないデータがあると面倒なので、いらないレイヤなどは消しておきましょう。

![スクリーンショット_2015_12_11_10_41.png](https://qiita-image-store.s3.amazonaws.com/0/34727/575df83d-db27-bd42-bfd8-bc37fad53694.png "スクリーンショット_2015_12_11_10_41.png")

# レーザーカッターの使い方
13号館の一般実験室の入って右側にレザーカッターがあります。
マニュアルがあるので基本的にそれに沿ってやれば大丈夫です。
具体的に以下の様な手順です。

## 下準備

+ 窓を開ける
	+ マニュアルには換気扇をつけると書いてありますが、 **換気扇はない** ので窓を開けます。
+ パソコンをつけて、エクセルに名前を記入する。
+ チェックリストが書いてあるフォルダがあるので、それにチェックをつけます。

## 加工

+ パソコンにデータをコピーしてCorelDrawで開きます。ここでデータを変更できますが、面倒です。
+ 選択範囲を印刷をして、右下にある **ここ**を押します。(くわしくはマニュアルを見て下さい)
+ 赤いなんかよくわからないソフトが立ち上がり、画像が映っていると思います。
+ 画像に不備がないかチェックしてください。(これが印刷されます。)
+ ヘッダの位置と素材の位置と高さを調整します。
+ レザーカッターのフタを空いている状態で加工開始をすると、出力せずに動き出します。(動作チェック)
+ 素材を選択肢して、出力の強さを設定します。
+ 1,2,3のスイッチを入れ、ヘッダから空気が出ていることを確かめて、フタを閉めて加工開始。

一度やってみるとわかると思います。

加工時に特に毎回チェックすること

+ 画像チェック
+ 位置の調整
+ 素材チェック
+ 動作チェック(空気圧で素材が動かないか、はみ出さないかなど)
+ 1,2,3,空気が出ていることを確かめる。


## 出力の調整
素材を指定すると入れると出力が変更されますが、自分の加工する画像によって調整したい場合があります。

ポリカーボネートの場合

+ ラスタは23%,100%,500
+ ベクターは13%,100%,250

としました。入力した後 **式**ボタンを押さないと変更が適用されないので注意してください。( **式**はsetの訳らしいです。おいコラ翻訳者)

素材によってかなり違いが出ます。ポリカーボネート1mmの場合、線は黄色ぽくなり、切り抜きやラスタ画像の部分は溶けてしまいました。

# 成果
レーザー加工機を **練習**のため使用した成果が以下のものです。

![otaku_cover.jpg](https://qiita-image-store.s3.amazonaws.com/0/34727/af218a71-99e0-3820-e86b-506d8b5f582e.jpeg "otaku_cover.jpg")

文字もベクタ化するとそれなりの綺麗できます。
![IMG_5829.JPG](https://qiita-image-store.s3.amazonaws.com/0/34727/801d4260-e09e-b81d-acc7-018ef310e31d.jpeg "IMG_5829.JPG")

ベクターだと細かいところも綺麗に書かれます。。
![IMG_5830.JPG](https://qiita-image-store.s3.amazonaws.com/0/34727/a3e098c5-2a18-220c-4797-4c5a71862184.jpeg "IMG_5830.JPG")

これらはすべてポリカーボネートを使用しています。

次に木でラスタ画像を使った場合は以下のようになりました。
ラスタ画像だと少しムラが出るのが見て取れます。

![IMG_5822.JPG](https://qiita-image-store.s3.amazonaws.com/0/34727/193790f3-1932-8f81-a863-1154532d367a.jpeg "IMG_5822.JPG")


みなさんもレーザーカッターで素晴らしいヲタか...もといBDMを作りましょう！
【laravel】view composerでviewロジックを分離する

web開発を行っていると、MVCなどのアーキテクチャ構成はとても悩ましいところです。

私がいつも思うのは
ビューロジックはできればコントローラーに書きたくないし、
テンプレートもできるだけロジックを入れず、
綺麗なhtmlのままでありたい。

実際の処理とビューのロジックが混ざってわかりづらくなってしまいますからね。

そういった問題を解決する手段として、
世の中にはプレゼンターを用意するとか、jsフレームワークを利用するとか様々なものが存在してます。

今回はlaravelに標準で搭載されているview composerの機能を紹介したいと思います。

# view composerの振る舞い
view composerはいわばプレゼンターやビューモデルのような振る舞いをします。
それぞれのテンプレートに値を紐付けることができます。
仕組み自体はただこれだけなので、簡単に利用することができます。

# 使い方

使い方の一例を紹介してみます。
まずはコードを御覧ください。

```php
<?php namespace App\Providers;

use App\Http\ViewComposers as V;

class ViewComposerProvider
{
    public function boot()
    {
        \View::composers([
            V\AuthComposer::class    => 'layouts.*',
            V\SideBarComposer::class => 'elements.sidebar'
        ]);
    }
}
```

上記はview composer用のサービスプロパイダーを作成し、view composerを登録しています。
`\View::composers()`で複数のクラスをbladeテンプレートに紐付けることができます。

上記の例では全てのlayoutsテンプレートにログイン情報を、
elements.sidebarテンプレートにサイドバーで必要な情報をひも付けています。

登録したクラスは例えばこのように記載します。

```php
<?php namespace App\Http\ViewComposers;

use Illuminate\View\View;

class AuthComposer 
{
    protected $user;

    public function __construct(UserService $user)
    {
        $this->user = $user;
    }
    
    public function compose(View $view)
    {
        $user = $this->user->getUserInfo();
    
        $view->with([
            'user_id'   =>  $user->user_id,
            'user_name' => $user->user_name,
        ]);
    }
}
```

composerの第一引数にviewインスタンスが渡されるので、そこにwithでviewで使いたいパラメータを指定できます。

デフォルトではcomposerメソッドが呼ばれますが、
指定することもできます。

```php
V\AuthComposer::class.'@exec' => 'layouts.*',
```

こんな感じでコントローラーに記載せずに直接モデル層から値を注入できます。
これをすることでコントローラーがとてもすっきり！

## view creatorの挙動
view composerの他にはview creatorというものもあります。
基本的に挙動は一緒なのですが、実行されるタイミングが異なります。
簡潔に言えば、

*view creatorはviewインスタンスが作成されるとき*
*view composerはviewインスタンスからviewがコンパイル、結合されて文字列に変換されるとき*

といった違いがあります。

使い方はいたって簡単で、上記のクラスの例で言えば、composeメソッドのようにクラスを登録してからcreateメソッドを作成するだけです。

```php

//サービスプロバイダ等で登録
// creatorsメソッドはない、、
\View::creator('layouts.*',   V\AuthComposer::class);

class AuthComposer
{
    //....

    public function  create(View $view) 
    {
        //
    }
}
```


view creatorとview composer挙動を詳しく理解するにはまずレンダリングの仕方を理解する必要があります。

基本的にController等で実行するとき、下記の様にするのが一般的かと思います。

```php

class IndexController
{
    public function index()
    {
        // logic

        return view('index', [/* data */]);
    }
}

```
viewメソッドは何をしているかといえば、
bladeコンパイラークラスや、ビューで使用するデータを注入してViewインスタンスを返しています。
この時にview creatorが実行されます。

```php
    // viewインスタンスが返ってくる、view creatorが実行される。
    $view = view('index', []);
```

controllerの戻り値は文字列に型変換されます。その際、`__toString()`を通してrenderメソッドが実行されます。

```php

public function IndexController()
{
    //Viewのインスタンス
    return view('index', []);

    // 下記で返してもやってることは同じ
    // $view = view('index', []);
    return (string) $view;
    return $view->__toString();
    // 文字列が返される
    return $view->render();
}

```
renderメソッドではbladeが解決されたりしているのですが、この時の最初の動作として
view composerが実行されます。

つまり、実行タイミングとしては
view creator(make実行時) -> view composer(render実行時)
です。



view composerを利用してビューのロジックを分離して可読性、独立性上げていきましょう！