OmniAICreator/Qiita-1.07M huggingface dataset:
RxJS雑感

## 概要

プロジェクトでRxJSを使う機会があった。だいぶ前に入門しようとして挫折したが、改めてやってみて感じたことを書こうと思う。



## Observable Stream?

RxJSでは、監視可能なイベントをObservable Streamとよんでいる。これはNode.jsのStreamのようなもので、データを一気に処理するのではなく、細切れの単位で読み取ることのできるもの、と理解している。そのため、どこかでデータがストップすることなく、常にデータが流れ続ける。



## 実装するのは難しい

ある程度概念を理解してくると、コードを読むのは容易になる。`ある動作が起こったらこれをして`というようなコードが`それが何であるか`というところに頭をつかうようになり、コードの量はかなりへらすことができる。あちこち修正する必要が無いので、リファクタも楽になるかもしれない。

ただ、さて自分で実装に取り掛かろうとしてみると、`あれ...書けない...?`といった気持ちであった。思っていたよりなかなか手が止まってしまう。ストリームの概念を理解するのと、それをコードに起こすのに時間がかかる印象だった。しかし、いつの間にか実装ができているような感じがあって、コードも少ないので、書き終わった時には気持ち良い。もっと慣れると、実装内容によっては、命令的なコードよりスピードは上がりそうだと感じたが、学習が必要だと感じる。そのため、保守はしやすくなるかもしれないが、前提として、かなりスキルを求められることと思う。



## MVI

現在のプロジェクトでは、MVI(Model・View・Intent)な設計を使っている。これはRxを使うと非常にうまくコードを分割できる。

### それぞれの責務

Intentがユーザーから発生したイベント、DOM操作などを、意味のある要求に変換するもの、という理解。例えば、ボタンのクリックイベントを、`パネルの開閉をしたいらしい`という要求を意味したObservableに変換するようなイメージ。よって、基本的には、ここを起点にObservableがつくられることになる。その後、Modelがそれを取りまとめて、アプリケーションの状態を伝え、Viewは、データ構造を描画する元になる。仮想DOMにはReactをつかっているが、意味のあるデータ構造をそのまま`移しだす`というイメージで、通常ロジックははいらない。



## RxJSを開発しやすくするもの

以前[RxJS(5.x)で行うテストファーストな機能開発](http://blog.mmmcorp.co.jp/blog/2016/06/25/testing-rxjs-5/)でも書かれたが、このやり方で非常にテストファーストな開発をすることができる。また、Rxの理解しにくい部分をひとつひとつ検証できるという意味で、テスト(とTypeScript)があるとかなり有益に思えた。僕自身の理解もまだ浅いため、逆にないと不安でもある。

とはいえ、最初はマーブルでのテストを理解するのに時間がかかったので、ざっくりと説明をしてみる。例えば、以下の様なマーブルを考える。

```JavaScript
"---a"
```

これは、30frame目に`a`というデータがemitされることを表している(frameというのはmillisecondを模したもの)。次に、以下の様なマーブルを考える。

```JavaScript
"---a", { a: 'R' }
```

これは、`a`というデータには`R`というstringが入っていることを表している。つまり、30frame目に`R`がemitされる。同じように考えると、以下の様なマーブルが作れる。

```JavaScript
// 30frame目に`R`、50frame目に`x`
"---a-b-", { a: 'R', b: 'x' }
```

これを検証したい時に、もうひとつマーブルをつくって、照らしあわせてテストをする。イメージとしては以下の様な感じである。このコードは動かないので、実際のテストコードは[こちら](http://blog.mmmcorp.co.jp/blog/2016/06/25/testing-rxjs-5/)で確認してみて欲しい。

```JavaScript
// toBeの中が期待されるObseravable
expect("---a-b-", { a: 'R', b: 'x' }).toBe("c--d-e-", { c: '', d: 'R', e: 'Rx' })
```

## まとめ

初学者的な観点でRxJSの雑感を書いてみた。参考になると嬉しい。

## 参考

* [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
* [RxMarbles: Interactive diagrams of Rx Observables](http://rxmarbles.com/)
* [RxJS Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/rxjs)
* [cycle.jsでのMVI分割時にどう考えてるか - ✘╹◡╹✘](http://r7kamura.hatenablog.com/entry/2015/10/07/071900)
* [エディタの実装をcycle.jsでMVIベースにしてみた話 - ✘╹◡╹✘](http://r7kamura.hatenablog.com/entry/2015/10/04/062333)
* [Rx(JS)に入門する前に知っておきたいN個のこと | MMMブログ](http://blog.mmmcorp.co.jp/blog/2015/12/20/prepare-to-rxjs/)
* [RxJS(5.x)で行うテストファーストな機能開発](http://blog.mmmcorp.co.jp/blog/2016/06/25/testing-rxjs-5/)
* [なぜReactive Extensionsを導入するのか？ | MMMブログ](http://blog.mmmcorp.co.jp/blog/2016/07/22/why-rx/)

([元記事](http://blog.mmmcorp.co.jp/blog/2016/08/05/firstimpressionsofrxjs/))
ruby remove_const

```bash
vagrant@precise64:~/data/lala$ pry
[1] pry(main)> class A
[1] pry(main)* end  
=> nil
[2] pry(main)> A
=> A
[3] pry(main)> Object.send :remove_const, :A
=> A
[4] pry(main)> A
NameError: uninitialized constant A
from (pry):5:in `__pry__'
```

http://apidock.com/ruby/Object/remove_instance_variable

http://ref.xaio.jp/ruby/classes/module/remove_const
React 和浏览器


React 提供了强大的抽象,能够让你完全不接触` DOM `的情况下完成基本上所有的关于 HTML 相关的事情, 不过呢有些时间某种场景下还是需要借助底层 API 来完成一些工作,比如当你它是使用第三方的类库和代码的时候.

#虚拟 DOM

React 他很快,为什么,因为它完全不合 DOM 直接对话,而是他直接在内存里维护了一个虚拟的 DOM, `render()`方法其实就是返回一个这个对象的描述. 之后 React 可以对比当前最新的 **描述** 和在内存里的 **描述** 来算出如何以及更新对应的 UI 部分.

同时 React 还是语义化实现基本上所欲的浏览器事件对象,不仅仅是 W3C中提到的,还是部分 HTML5中的, 所以你其实大部分的时间在和 React 的`假浏览器`在对话. 不过有时候也是需要借助底层的 API 特别是当你和第三方的类库如 jQuery 插件一起工作的时候, React 提供了一些逃逸舱来让你直接访问底层 DOM 的 api.

# Refs 和 findDOMNode()

和浏览器交互,你就需要拿到 DOM 的对应的节点, 你可以在这些节点里放置` ref`, 通过它就能够拿到 react 组件的实例引用. 当你急切的想要在该节点上执行某个函数,他非常有用.更多关于` ref` 可以去看 [它和组件的关系](http://qiita.com/xiangzhuyuan/items/d209566b1f629005b698).


# 组件生命周期

基本上组件有这样3个阶段:

- 挂载: 一个组件被加载到 DOM
- 更新: re-render DOM 更新
- 卸载: 从 DOM 中移除.

React 提供了具体的生命周期 方法,这样就可以自由的嵌入想要在特定的阶段执行的方法.提供了类型 `will-*` 方法和` did-*` 方法:

## 挂载

- getInitailState(): object
- componentWillmount()
- componentDidmount()

## 更新

- componentWillReceiveProps(object nextProps)
- shouldComponentUodate(object nextProps, object nextState)
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object nextProps, object nextState)

## 卸载

- componentWillUnmount()

## 挂载后的方法

- component.forceUpdate()

#浏览器支持

React 支持大部分流行的浏览器,包括 IE9及以上
non-SPAなサイトでAngular2を使ってみる


Stack Overflowとか眺めてると、SPAじゃないのにAngular2？？？みたいな投稿があったので諦めようかと思ったのですが、こういう方法で動きはするだろうと。

# 仕様
- Server Routing
- 共通して使われるコンポーネントの集合体と、特定ページで使われるコンポーネントの集合体がある

# 作ってみた

## HeaderModule
全ページのヘッダーで使われるだろうコンポーネントを集めたモジュール

## LoginModule
ログインページのフォームとかをまとめたモジュール

## エントリーポイント.ts

前回の続きでturbolinks環境なので、そのライフサイクルをhookしてモジュールを起動する

```main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import * as crossroads from 'crossroads';

import {HeaderModule} from './app/header.module';
import {LoginModule} from './app/login.module';


// turbolinksのライフサイクルをhook
document.addEventListener('turbolinks:load', () => {
    // 適当なrouterで発火させる
    platformBrowserDynamic().bootstrapModule(HeaderModule)
            .catch(err => console.error(err));

    crossroads.addRoute('/login', () => {
        platformBrowserDynamic().bootstrapModule(LoginModule)
            .catch(err => console.error(err));
    });
    crossroads.parse(window.location.pathname);
});
```

この状態で /login にアクセスすると、HeaderModuleに定義されたコンポーネントと、LoginModuleに定義されたコンポーネントがマウントされる。


しかし、Angular1と比べると手間だ...

良いやり方あると思うんですがこれしか思いつきませんでした...
【Objective-C】配列型のデータをコピーするときに気をつけたいプロパティについて

### 概要
---
使用する元データは同一のものを使用するが、後続処理によって値を分ける必要がある場合にアドレス参照を意識する。

### ゴール
---
データA, B, Cを元データ格納用変数に格納し、配列A、配列Bでは元データを利用する。処理の分岐先で配列Aと配列Bを処理によって異なるデータにしたい。

### ハマった内容
---
配列(ここではNSMutableArrayを例にとる)を代入コピーする場合、参照されているポインタが渡される。
そのため、変数A、変数Bどちらかに新しくオブジェクトを追加した場合、変数Aと変数Bのポインタが同一のものとなってしまう。

### サンプル
---

※修正前

```Before.m

    NSMutableArray *useDataArray = @[].mutableCopy;

    [useDataArray addObject: @"http://www.testA.jp"];
    [useDataArray addObject: @"http://www.testB.jp"];
    [useDataArray addObject: @"http://www.testC.jp"];
    
    NSMutableArray *sampleA = @[].mutableCopy;
    NSMutableArray *sampleB = @[].mutableCopy;
    
    sampleA = useDataArray;

    // 参照が渡される
    // 同一のデータが複製されるが、相互の参照先アドレスが紐付いている状態
    sampleB = sampleA;
    
    [sampleA addObject: @"http://www.testD.jp"];
    
    // A or Bどちらかにオブジェクトを追加すると参照されるポインタが更新される
    NSLog(@"sampleA:%@", sampleA);
    NSLog(@"sampleB:%@", sampleB);
```

```Before.log
sampleA:(
    "http://www.testA.jp",
    "http://www.testB.jp",
    "http://www.testC.jp",
    "http://www.testD.jp"

sampleB:(
    "http://www.testA.jp",
    "http://www.testB.jp",
    "http://www.testC.jp",
    "http://www.testD.jp"
)
// 同一のアドレスを参照している
```

※修正後

```After.m

    NSMutableArray *useDataArray = @[].mutableCopy;

    [useDataArray addObject: @"http://www.testA.jp"];
    [useDataArray addObject: @"http://www.testB.jp"];
    [useDataArray addObject: @"http://www.testC.jp"];
    
    NSMutableArray *sampleA = @[].mutableCopy;
    NSMutableArray *sampleB = @[].mutableCopy;

    sampleA = useDataArray;

    // 変更可能(mutable)プロパティを加える
    sampleB = sampleA.mutableCopy;    

    [sampleA addObject: @"http://www.testD.jp"];
    
    NSLog(@"sampleA:%@", sampleA);
    NSLog(@"sampleB:%@", sampleB);
```

```After.log
sampleA:(
    "http://www.testA.jp",
    "http://www.testB.jp",
    "http://www.testC.jp",
    "http://www.testD.jp"
)
sampleB:(
    "http://www.testA.jp",
    "http://www.testB.jp",
    "http://www.testC.jp"
)
// 異なるデータが格納される
```

### まとめ
---
アドレス参照型のものを複製する場合、代入演算子でコピーすると相互の変数に対するアドレスが紐づくため、mutable属性を与えて代入をするとよい。

※ご指摘ありがとうございます。内容を修正しました。
Refs 和组件的关系


有时候在构建了组件之后,会发现你却想要去从已经通过` render()` 函数得到的组件实例哪里调用他们的方法. 大多数时候这样的做法是完全不必要的.因为` render` 的状态就是已经通过最后的` props` 渲染出来的,它已经是最新的. 不过有时候还是有必要的,所以这里` React` 提供一个`逃逸或者出口`来实现这个目的.它就是` refs`, 这些` refs` 在你要找到一个通过组件 render 出来的 DOM 标记时非常有用. 如你像在一个非 reacdt 的大型应用里使用常识使用 react 组件,或者把现有的项目迁移到 react 上.

让我们来看看如何使用这个ref.

# 通过 ReactDOM.render()拿到的 ref

不要和你定义组件的时候用到的` render()` 相混淆,它会返回一个虚拟的 DOM元素, 而` ReactDOM.render()` 它会返回一个组件实例的引用(null 或者无状态组件合).

```
var myComponent = ReactDOM.render(<MyComponent />, myContainer);

```

JSX 它是不会返回一个组件实例的.它只是画出一个元素.一个轻量级的表示容器,用来告诉 react 怎么挂载这些组件:

```
var myComponentElement = <MyComponent />; // This is just a ReactElement.

// Some code here...

var myComponentInstance = ReactDOM.render(myComponentElement, myContainer);
myComponentInstance.doSomething();
```

>注意

>这个只能在顶层使用,而在子组件间的通信只能用 props 和 state 来完成

# ref 回调属性

React 支持一种特定的属性,它能够附加到任何的组件上. 这个` ref` 可以是一个函数,这个回调会在组件挂载之后立即执行.而引用的组件将会作为参数传递, 回调函数可以立即使用这个组件.或者保留这个引用将来使用.


添加 ref 作为一个属性:

```
 render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
  },
```

或者用 ES6里的剪头函数写法;

```
render: function() {
    return <TextInput ref={(c) => this._input = c} />;
  },
  componentDidMount: function() {
    this._input.focus();
  },
```

当添加一个 ref 引用到 DOM 组件如`<div />`时,你就得到了这个 DOM 节点的虚拟对应, 当把这个 ref 引用给复合组件如`<TextInput />`时,就会得到一个 React 类的实例. 接下来我们会调用这个类里定义的任何暴露的方法.

注意: 当这个引用的组件卸载了或者 ref 修改了.对的引用 ref 会被取消,为了防止泄露.


# ref 字符串属性

> 注意
> 字符串的 ref 还能用但是会过期,将来使用回调 ref


React also supports using a string (instead of a callback) as a ref prop on any component.

Assign a ref attribute to anything returned from render such as:

```
<input ref="myInput" />
```

In some other code (typically event handler code), access the backing instance via this.refs as in:

```
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
```


#一个完整的例子

为了能够得到一个 react 组件的引用,你可以通过使用` this` 来获取当前的组件或者你可以通过使用 `ref`来获取当前拥有的组件的引用. 看上去是这样的:


```
var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    // 这里很明显是通过原始的 DOM api 来让这个 input 控件得到焦点
    if (this.myTextInput !== null) {
      this.myTextInput.focus();
    }
  },
  render: function() {
    // The ref attribute is a callback that saves a reference to the
    // component to this.myTextInput when the component is mounted.
    return (
      <div>
        <input type="text" ref={(ref) => this.myTextInput = ref} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);
```
这个例子中我们取到了一个输入框的引用. 然后当按钮 click 的时候通过调用` focus()` 获取焦点.

当对于复合的组件来说 引用会指向组件类的实例.所以你就可以调用这个类中定义的任何函数. 如果你需要访问底层的 DOM 节点时, 你就可以通过` ReactDOM.findDOMNode`来实现. 但是不推荐这样使用,这样就会打破封装,

#总结

ref 是一个很搞定方法用来传递消息给特定的子组件的实例,当在不方便使用 props 和 state 的时候.

## 优势

- 直接在组件类定义公共的方法,通过 ref 来调用.
- 调用原生的 DOM API
- 自己管理 ref, 如果 ref 对应的节点不在了会被自动清理不要担心内存泄露.

## 注意

 ...(略)
XcodeのUITest実行時にtest runner appが見つからないとワーニングが出て実行できないときの対処法


## はじめに
新規プロジェクトを作って UITest のターゲットを追加したときは
ちゃんと実行できるのでおそらく古いアプリで起こるのだと思う。

通常通りに UITest のターゲットを追加してただ ```UItests.m```の
testExample を実行しようとしたときに下記ワーニングが出て
UITest を実行できないことがあった。

初期状態のUItestコード

```Objective-C:uitestUITests.m
- (void)testExample {
    // Use recording to get started writing UI tests.
    // Use XCTAssert and related functions to verify your tests produce the correct results.
}
```

ワーニングはこういうもの。
```Unable to find test runner app containing test bundle path ・・・```

![00_xctest.png](https://qiita-image-store.s3.amazonaws.com/0/88266/bc5320fa-33de-a3fb-f882-8127e1363f0d.png "00_xctest.png")


パスをたどってみると確かに UITests-Runner.app がない。

![01_xctest.png](https://qiita-image-store.s3.amazonaws.com/0/88266/9505865d-c77c-f78f-a66b-429bf0890204.png "01_xctest.png")


Build Settings とかを比較していたときに
たまたま差分を見つけ対処法がわかったので備忘録。
と言っても多分そんなに多いケースではないと思う。

## 環境
* Xcode 8.0 (8A218a)
* OS X El Capitan 10.11.6
* Objective-C

## 対処法

Xcode で UITest の Target を選択し，
Build Settings を選択。
検索窓に **Wrapper Extension** を入力して検索。
これが **app** になっていた。

![02_xctest.png](https://qiita-image-store.s3.amazonaws.com/0/88266/bc6c12a0-d2a4-ac19-fe81-ce8634204ee6.png "02_xctest.png")


正しく実行できるアプリで確認してみると， **xctest** になっていた。

もしかしてこれか？と修正して実行してみると成功した。![03_xctest.png](https://qiita-image-store.s3.amazonaws.com/0/88266/4fa8dbc6-2ed5-b5e3-5716-9032837a3889.png "03_xctest.png")



パスをたどってみると確かに UITests-Runner.app が生成されていた。

![04_xctest.png](https://qiita-image-store.s3.amazonaws.com/0/88266/702029b6-b1b7-94b1-92b7-1d88230d15b1.png "04_xctest.png")


## おわりに
こういう警告でやりたいこと止まると時間がもったいなく感じる。
でもなんと解決できてよかった。
おそらく UITest の新規ターゲットを追加したときに
xctest の設定にならないことを治すべきだとは思うけど
今はテスト優先なので時間があるときに検証してみる(多分しない)。

ここまでご覧いただきありがとうございます。
めったにないことだとは思いますが，他に困った方の参考になれば幸いです。
UI > 次のディスクをセットし、[OK]ボタンを押してください。 > ディスク名は表示されず / 今入れているディスクの「次の」

```txt:動作環境
TOSHIBA製PC
```

## おかしいと感じた

リカバリ時のメッセージ。

> 次のディスクをセットし、[OK]ボタンを押してください。

ディスク名は表示されず。

検索すると古いウィンドウ画面の画像が見つかったりする。

今の今までこのメッセージを「おかしい」と感じる人がいなかったのだろうか。

## 追記

http://dynabook.com/assistpc/faq/pcdata2/016057.htm
を見ると
> ※リカバリーメディア(DVD)が複数枚ある場合は、”次のディスクをセットし、［OK］ボタンを押してください”というメッセージが表示され、ディスクトレイが開きます。メディアの番号順に入れ替え、［OK］ボタンをクリックしてください。

「次の」の意味は以下の二通りありそうだと分かった。

1. 今入れているディスクの「次の」ディスク
2. 下記に表示されているディスク

１の意味で見れば「おかしい」と感じない。

自分がこういうUIを作る時にどういうメッセージを使うだろうか。

> N枚目のディスクをセットし、[OK]ボタンを押してください。 (Nは逐次増える数)
容量が多いディレクトリを探す

macのGUIのアプリで見つからなかったので、備忘録

```bash
sudo du -d 1 -h | grep G #GB単位で消費しているものを探した。
```

```bash
# sudo du -d 1 -h | grep G
 18G    ./Data
 18G    .
# pwd
~/Library/Containers/com.docker.docker
#↑あなたでしたか。。
```
IPベースと名前ベースのVirtualHostの共存

# 概要
IPベースでVirtual Hostの設定がしてあるサーバーに、新たにVirtual Hostの設定をすることになったが、もうIPは新たに振れない諸事情から名前ベースでの設定を行うことになったので、そのためにいじる場所のメモ。

# 前提

example.comとexample.netというドメインを持っていて、
.comを名前ベース、.netをIPベースのVirtualHostとしたい。

##サーバー環境

サーバーは以下の環境で実行。

|OS|WebServer|
|:----------------:|:-----------------:|
|CentOS release 6.8 (Final)|Apache/2.2.15|

# 設定
まずhttpd.confのNameVirtualHostの記述をコメントアウトする。**これが大事**。

```bash:/etc/httpd/conf/httpd.conf
NameVirtualHost *
↓　↓　↓
#NameVirtualHost *
```

次にIPベースのVirtualHost設定のconfファイルを以下の様にする。

```bash:/etc/httpd/conf.d/ip_vh.conf
<VirtualHost *:80>
   ServerName example.net
↓　↓　↓
NameVirtualHost 192.168.0.2:80
<VirtualHost 192.168.0.2:80>
   ServerName example.net
```

そして名前ベースのVirtualHost設定は以下の様にする。

```bash:/etc/httpd/conf.d/name_vh.conf
NameVirtualHost 192.168.0.1:80
<VirtualHost *:80>
   ServerName example.com
↓　↓　↓
#NameVirtualHost 192.168.0.1:80
NameVirtualHost *:80
<VirtualHost *:80>
   ServerName example.com
```

後はApacheを再起動。
`# service httpd restart`

こんな感じで両者がうまいこと共存共栄してくれました。
React 显示数据


对于 UI 来说,无非就是显式数据, 而通过 React 就能够很容易绑定数据并且显式, 还能够时刻自动保持同步.

## 入门

先来看段代码:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>//②
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>//②
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> //①
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">//①

      // ** Your code goes here! **
		var HelloWorld = React.createClass({
		  render: function() {
		    return (
		      <p>//②
		        Hello, <input type="text" placeholder="Your name here" />!
		        It is {this.props.date.toTimeString()}
		      </p>
		    );
		  }
		});
		
		setInterval(function() {
		  ReactDOM.render(
		    <HelloWorld date={new Date()} />,
		    document.getElementById('example')
		  );
		}, 500);
    </script>
  </body>
</html>
```

//① 这个地方为了简单演示,直接通过 babel 的浏览器版本编译 JSX 语法
//② react 库相关

打开这个页面试试看, 这个会不断执行` ReactDOM.render()`函数, 而每次会取到当前的时间. 然后通过`<HelloWorld date={new Date()} />` 传入到` Helloworld` 这个 react 的组件对象里, 然后通过` this.props` 就可以直接取到/=.

## 自动更新

这里提到的一个就是 react 使用了一个最小最快的虚拟 DOM 来 diff 前后的状态最小化修改对应的 UI, 而` prop s` 也就是属性的缩写了.他们通过 JSX 的语法传给 React 的对象组件, 应该把这个对象看做是不可修改的.不要直接在后端修改它.

## 组件就是一个函数

react 组件就是简单的函数,他们会拿` props` 和` state` 来画 HTML. 记住这一点就能很容易阅读 react 的组件了.

> react 每次只能 render 一个根节点.

## JSX 语法

**我们相信, 不, 坚信**相比模板技术或者显示逻辑等, 组件的方式才能够很好的处理 UI 相关的问题. 用 javascript 代码来直接生成这些 HMTL 和组件将会更加清晰, 而且这样来管理 UI 更加有力. 通过 JSX 可以更加方便来写 javascript 的对象, 完全通过 html 的语法来写.

如果使用 javascript 写一个 html 标记是这样的:

```js
 React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')
```
 
而通过 JSX:
  
```html
<a href="https://facebook.github.io/react/">Hello!</a>
``` 

而他们的最终产物都是一样的.

## 不用 JSX

JSX 对于 react 来说完全是可选的, 你完全可以不使用它, 如果你要创建一个 react 的 element 那就直接通过` React.createElement` 来实现. 你可以给它标签名或者一个已有的react 组件, 然后一个属性对象, 然后就是一些可选的子节点.


```js
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));

```
blockUI 使用

#居中显示

```
var __widowWidth = $(window).width(); 
var __popWidth = $("#edmContentList").width();
var __left = (__widowWidth - __popWidth)/2 + 'px';
var __windowHeight = $(window).height();
var __popHeight = $("#edmContentList").height();
var __top = (__windowHeight-__popHeight)/2 + 'px'; 
	$("#edmContentDiv").html("");
	$("#edm_id option").attr("selected",false);
	$("#edm_id option[index='0']").attr("selected",true);
	$.blockUI({"message":$("#domId"),css:{width:"60%",border:0,backgroundColor:"transparent","max-height":"300px","overflow-x":"hidden", left:__left,width:__popWidth+'px',top:"10%"},overlayCSS:  { 
        backgroundColor: '#000', 
        opacity:         0.6,
        cursor:          'wait' ,
			
    }});
```
virtualboxとvagrant が検証中から進まない。


VirtualBoxとVagrantをアップデートしようとしたとき、
それぞれをダウンロードしてきて、インストールしようとしても
検証中画面から進まなかった。

（mac/El Capitan）

VirtualBoxのほうは、こちらの記事を参照して解決。

http://qiita.com/verytired/items/20fcb447709945496fcd

Vagrantも

`sudo installer -package /Volumes/Vagrant/Vagrant.pkg -target /`

で解決。
'Too many open files'と言われた


## OSファイルディスクリプタ数のチェック

以下のように現在の状況を確認

```
$ cat /proc/sys/fs/file-nr
```

>file-nr
　file-nr内のパラメータはそれぞれ、オープンされているファイル数、空きファイル管理データの数、システム中のオープンファイル管理データの最大数（file-maxと同じ）を示します。
 [＠IT：/procによるLinuxチューニング ［後編］（2/4）](http://www.atmarkit.co.jp/flinux/special/proctune/proctune02b.html)



## OSファイルディスクリプタ数の上限設定

以下のページを参考にする

[nginx で Too many open files エラーに対処する - Shin x blog](http://www.1x1.jp/blog/2013/02/nginx_too_many_open_files_error.html)



## nginxのプロセスあたりの上限確認

以下のように現在のプロセスあたりの上限を確認（soft limit がデフォルトの1024）になっている。

```
$ cat /proc/{workerのpid}/limits
Limit                     Soft Limit           Hard Limit           Units
Max cpu time              unlimited            unlimited            seconds
Max file size             unlimited            unlimited            bytes
Max data size             unlimited            unlimited            bytes
Max stack size            8388608              unlimited            bytes
Max core file size        0                    unlimited            bytes
Max resident set          unlimited            unlimited            bytes
Max processes             29090                29090                processes
Max open files            1024                 4096                 files
Max locked memory         65536                65536                bytes
Max address space         unlimited            unlimited            bytes
Max file locks            unlimited            unlimited            locks
Max pending signals       29090                29090                signals
Max msgqueue size         819200               819200               bytes
Max nice priority         0                    0
Max realtime priority     0                    0
Max realtime timeout      unlimited            unlimited            us

```

## nginxのプロセスあたりの上限設定

worker_connections の 4倍程度が良いらしいのでそうする

```/etc/nginx/nginx.conf
worker_rlimit_nofile 4096;

events {
    worker_connections  1024;
}
```

## nginxのプロセスあたりの上限確認

以下のように現在のプロセスあたりの上限を確認（soft limit がデフォルトの1024）になっている。

## 結果確認

以下のように soft limit が変更されてればOK

```
$ cat /proc/{workerのpid}/limits
Limit                     Soft Limit           Hard Limit           Units
 ：
Max open files            4096                 4096                 files
 ：
```
PowerShellでディレクトリのファイル一覧とタイムスタンプを取得するワンライナー

プロジェクトに中途参画して、いままでの経緯を追うために議事録を時系列で見たかった。


編集するならこっち⇒ [PowerShellでディレクトリのファイル一覧とタイムスタンプを取得する](http://qiita.com/yjnk/items/a69920748e96272bfd10)

```ps1
Get-ChildItem -recurse |
  Where-Object { ! $_.PsIsContainer } |
  Select-Object FullName, LastWriteTime |
  Export-Csv .\filelist.csv -Encoding Default
```

このあと [ファイル構成テキスト化ツール](http://www.vector.co.jp/soft/win95/util/se208295.html) なるものを見つけた。
(PHPUnit/)DBUnit について調べてみた[テスト初心者向け]

# はじめに

初めて Laravel5 で[アプリ](https://github.com/hotta/laravel-aws)を書いてみて、なんとなく動くようになってきたので、これも初めてのユニットテストに挑戦しようとしています。PHPUnit は、基本的なところはできそうな気になってきましたが、データベース部分はいろいろと難しそう。ということで、PHPUnit のマニュアルの[第8章 データベースのテスト](https://phpunit.de/manual/current/ja/database.html)を斜め読みした時点のまとめです。実装はこれからです。

（ちなみに、マニュアルは翻訳がすごくこなれていてすばらしい。感謝です。）

# 概要

- DBUnit とは
    - PHPUnit でデータベース周りのテストをする時に必要な拡張機能
        - （※ 実際は、各言語用 xUnit のための DBUnit があるのではないかと思われます）
    - PHPUnit 用の DBUnit の作者は PHPUnit と同じ人（Sebastian Bergmann氏）
- 利用準備
    - オプションパッケージの導入
        - composer require-dev "phpunit/dbunit": ">=1.2"
- PDO の利用
    - DBUnit は「初期化（フィクスチャの作成）や後始末のために」 PDO を使う。
        - ※フィクスチャ＝アプリケーション（static変数等）やデータベースの初期状態
    - アプリケーション側でも PDO を使わないといけないということではない
- 考え方
    - データベースは基本的に、自分のコードへのグローバルな入力変数である
        - → 後続のテストのためにも、きちんとデータの後始末が必要
- 制限事項
    - テストのクラスごとに接続／切断を繰り返すので、テスト全体の終了までに時間がかかりがち
        - → 接続を使いまわすことで時間を節約できる
- テストのステップ
    - 1.フィクスチャのセットアップ(Setup)
    - 2.テストしたいシステムの実行(Exercise)
    - 3.結果の検証(Verify)
    - 4.後始末(Teardown)
- データベースの接続情報
  - 接続用インスタンスを抽象クラス内のプロパティとして持つ
  - 設定情報（DB名、ユーザー名等）は XML ファイルで指定可能
  - XML ファイルを複数用意し、コマンドラインで切り替え可能
        - → データベースを分けることで、複数人が同時にテストできる
- データセットとデータテーブル
  - データベースのテーブル／行／カラムの抽象化レイヤー
  - 実際のデータはファイル(XML/YAML/CSV)で持ったりすることも可能
  - PHPの配列で持つことも可能

# データセット

- フラット XML データセット
  - ファイルはシンプルで見やすいが、NULL の扱いに制限あり
  - createFlatXmlDataSet($filename) でインスタンスを生成
- XML データセット
  - ファイル形式はやや冗長だが、NULL の問題は発生しない
  - createXmlDataSet($filename) でインスタンスを生成
- MySQL XML データセット
  - mysqldump の出力をそのまま読み込める
  - createMySQLXMLDataSet($filename) でインスタンスを生成
- YAML データセット
  - ファイルはシンプルで見やすく、NULL の問題も発生しない
  - 専用のファクトリーメソッドが存在しないので、手動でインスタンスを new する（以下同様）
    - new PHPUnit_Extensions_Database_DataSet_YamlDataSet
- CSV データセット
  - NULL 値は指定不可
  - new PHPUnit_Extensions_Database_DataSet_CsvDataSet
- Array データセット
  - ソース中に PHP のコードとして直接データを書ける。いろいろとメリットあり。
- Query (SQL) データセット
  - DBのスキーマやデータの中身を流用可能
  - 内部で自由に SQL を発行してデータを取り込める
  - new PHPUnit_Extensions_Database_DataSet_QueryDataSet
- Database (DB) データセット
  - 自動的にすべてのテーブルとその中身を含むデータセットを生成
- Replacement データセット
  - NULL の問題を内部のフィルター関数を使って解決する
- データセットフィルタ
  - ホワイトリストあるいはブラックリストとして使い、テーブルやカラムを絞り込んだサブデータセットを作る
- Composite データセット
  - 既存の複数のデータセットをひとつにまとめる
- 自作
 - 上記で満足できない人は、自作も可能。もちろん実装の理解が必要。

# データベースアサーション API

- テーブルの行数のアサーション
  - assertEquals() で行数を調べる
- テーブルの状態のアサーション
  - assertTablesEqual() で、テーブルの中身（全部）が期待した内容と等しいか調べる
- クエリ結果のアサーション
  - assertTablesEqual() で、クエリーの結果を期待した内容と比較
- 複数のテーブルの状態のアサーション
  - 1.接続の Database (DB) データセットを使い、 それをファイルベースのデータセットと比較する
  - 2.データセットを自分で作る

# よくある質問

- PHPUnit は、テストごとにデータベーススキーマを作り直すの?
  - No
- PDO を使ったアプリケーションじゃないと Database Extension を使えないの?
  - No
- 「Too much Connections」 というエラーが出たらどうすればいい?
  - 接続を使いまわす
- フラット XML や CSV のデータセットで NULL を扱う方法は?
  - 使えません
from=<> は MAILER-DAEMONからの返信っぽい

* fromが空(null)のものを検索する場合、`<>`で検索。

## 自分の場合

* 宛先不明（MAILER-DAEMON）の時、from=<> になる様子

## その他本件とは関連がないかもしれませんが情報です

* [自サイトのサービス用アドレスの詐称を拒否 / システムユーザ宛のバウンスの拒否 - Hatuka*nezumi / log](http://hatuka.nezumi.nu/log/2005/06/post-2.html)

> 注意: 空の envelope sender を "<>" で検索したい場合、 smtpd_null_access_lookup_key = <> (既定値) にしておく必要がある。 

----

* [Postfix Configuration Parameters](http://www.postfix.org/postconf.5.html)

![aa.png](https://qiita-image-store.s3.amazonaws.com/0/25728/35d3671a-e129-6905-0fe7-319d8a5a02aa.png)

----

* [http://www.postfix-jp.info/trans-2.1/jhtml/access.5.html](http://www.postfix-jp.info/trans-2.1/jhtml/access.5.html)

![スクリーンショット_2016-09-29_11-02-56.png](https://qiita-image-store.s3.amazonaws.com/0/25728/7b5087ad-ea6d-21d0-72ea-ff5b64b04c60.png)
Database Cloud ServiceでAPEXのユーザパスワード期限をなくす方法

APEXを利用していると、いつの間にかパスワードを変えてくださいと言われて、そのたびにほかのユーザーに連係したりとプロトタイプ制作などをしているときには煩わしいときがあります。
社内デモ環境やプロトタイプ等であまりセキュリティ要件が高くない場合に、パスワード期限をなくしてしまう方法を紹介します。
APEXはデータベースユーザと考えがちょっと違うので、せっかくなので両方紹介します。

APEXの管理画面から、SQL WorkshopでSQL Commandを選択します。
SQL Commandを実行できますので、まずはユーザーのパスワード期限を以下のSQLで確認

ちなみにデータベースユーザはこんな感じです。

```:OracleSQL
SELECT resource_name, limit
FROM dba_profiles
WHERE profile = 'DEFAULT'
AND resource_type = 'PASSWORD';
```

以下のような出力結果が確認できます。

|RESOURCE_NAME	|LIMIT|
|-------------|------------|
|FAILED_LOGIN_ATTEMPTS|	10|
|PASSWORD_LIFE_TIME	|180|
|PASSWORD_REUSE_TIME	|UNLIMITED|
|PASSWORD_REUSE_MAX	|UNLIMITED|
|PASSWORD_VERIFY_FUNCTION	|NULL|
|PASSWORD_LOCK_TIME	|1|
|PASSWORD_GRACE_TIME	|7|

PASSWORD_LIFE_TIMEが180になっているので、6か月ごとにリセットされる設定ですね。

ではさっそく以下のSQLで設定を変えてしまいましょう。

```:OracleSQL
ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED;
```

Auto Commitにチェックが入っていると自動commitされてしまうので、rollbackでしても戻らなくなるので、ご注意ください。

実行するとPASSWORD_LIFE_TIMEがUNLIMITEDになります。

|RESOURCE_NAME	|LIMIT|
|-------------|------------|
|FAILED_LOGIN_ATTEMPTS|	10|
|PASSWORD_LIFE_TIME	|UNLIMITED|
|PASSWORD_REUSE_TIME	|UNLIMITED|
|PASSWORD_REUSE_MAX	|UNLIMITED|
|PASSWORD_VERIFY_FUNCTION	|NULL|
|PASSWORD_LOCK_TIME	|1|
|PASSWORD_GRACE_TIME	|7|

ではAPEXもやっていきます。
ワークスペースを初期ワークスペースでログインします。
Workspace : Internal
Username : admin
Password : the admin password<-DBCS作成時のパスワードですね。

Manage Password Complexityに飛んでいき、Workspace Login Controlの設定を変えます。

Require User Account Expiration and Locking to No
Account Password Lifetime (days) : 99999
と設定します。
設定上無限は無理ですが、100年後以上にすることはできます。
100年以上動くものはプロトタイプではないと思いますので、今回の方法はあくまでデモとかプロトタイプ向けですね。

これで後はまったりAPEXで遊べそうです。
Railsのwhereで検索した際に、指定の順番通りにデータを取得する方法

# 問題
RailsのActiveRecordを使い、(例えば)IDで検索した際に順番どおりにデータを引っ張ってこれない。

```ruby
> User.where(id: [4,6,2,9,7]).pluck(:id)
=> [2, 4, 6, 7, 9]
# 理想としては [4,6,2,9,7] となって欲しい
```

# 解決
そこで登場するのが、``order_as_specified``というgemである。
order_as_specified：https://github.com/panorama-ed/order_as_specified

使い方はシンプル。使いたいモデルに下記のコードを入れる

```ruby
class User < ActiveRecord::Base
  extend OrderAsSpecified
・
・
・
end
```

それで、こんなふうに書くと、思い通りの順番になる。

```ruby

> User.where(id: [4,6,2,9,7]).order_as_specified(id: [4,6,2,9,7]).pluck(:id)
=> [4,6,2,9,7]
```

もちろん、ID以外でもできるので、

```ruby
.order_as_specified(id: [4,6,2,9,7])
```

の部分をいじってやる。
実際に、生成されるsql文は下記の用になるので、なかなかSQL的には辛いなーとおもいました。

```ruby
> User.where(id: [4,6,2,9,7]).order_as_specified(id: [4,6,2,9,7]).to_sql
=> "SELECT `users`.* FROM `users` WHERE `users`.`id` IN (4, 6, 2, 9, 7)  ORDER BY users.id='4' DESC, users.id='6' DESC, users.id='2' DESC, users.id='9' DESC, users.id='7' DESC"
```
vagrant on Mac でvagrant-omnibusインストール時のエラー対処方法

# vagrant on Mac でvagrant-omnibusインストールでエラー対処方法
## 内容
今回は、自分向けの備忘録。
久しぶりにvagrant使ってchefのレシピを作ろうと思ったら、エラーが出ました。

### 環境

* OS X El Capitan 10.11.6
* Vagrant 1.8.1

### エラー内容

```
$ vagrant plugin install vagrant-omnibus

Installing the 'vagrant-omnibus' plugin. This can take a few minutes...
Bundler, the underlying system Vagrant uses to install plugins,
reported an error. The error is shown below. These errors are usually
caused by misconfigured plugin installations or transient network
issues. The error from Bundler is:

Could not fetch specs from http://gems.hashicorp.com/

Warning: this Gemfile contains multiple primary sources. Using `source` more than once without a block is a security risk, and may result in installing unexpected gems. To resolve this warning, use a block to indicate which gems should come from the secondary source. To upgrade this warning to an error, run `bundle config disable_multisource true`.
```

### 対処方法

```
 $ gem list --clear-sources --source http://gems.hashicorp.com -r
```

### 結果

```
$ vagrant plugin install vagrant-omnibus

Installing the 'vagrant-omnibus' plugin. This can take a few minutes...
Installed the plugin 'vagrant-omnibus (1.5.0)'!
```
[論文紹介] PRISM: A System forWeighted Multi-Color Browsing of Fashion Products

# 論文
http://sglab.kaist.ac.kr/PRISM/prism_www14.pdf
この記事のひとつ前に紹介した[Pixel-Level Domain Transfer](http://qiita.com/tn1031/items/0445f8840fd0f8c6d568)と同じ著者

# 概要
ファッションアイテムから色を抽出するという問題。簡単そうに見えて、やってみるとめっちゃむずい。

ファッションECサイトには色による絞込機能が実装されていることが多いが、大抵の場合単色でしか絞り込めない。
一方で実際のファッションアイテムは複数の色が使われていることが多く、単色だと不便。

提案手法では、アイテムの色を複数の色を重み付けで表現することで、色の混合をクエリとする検索機能を提供している。

![スクリーンショット 2016-09-28 21.47.45.png](https://qiita-image-store.s3.amazonaws.com/0/66317/8357817f-b0d7-0e3a-98db-c95ccb17c6c9.png)

# 貢献
- 複数の色の重み付けをフィルタとしてファッションアイテムを絞り込む仕組みを提案する

# システム構成
## クローラー
ドメインに依存する処理を施すレイヤーと共通処理を施すレイヤーの2層になっている。
![スクリーンショット 2016-09-28 21.57.01.png](https://qiita-image-store.s3.amazonaws.com/0/66317/3a8d417f-96e2-bd07-3a27-c0cbda0fb7ec.png)

メタデータ等はそのままMySQLに保存して、画像は特徴抽出モジュールに渡す。

## 輪郭抽出
輪郭抽出は3ステージに分かれる。

**1st stage**
最初はCanny edge detectorという処理を噛ます。OpenCVに実装されている。
outputのうち、面積最大の部分を次の処理に渡す

**２nd stage**
続いて、抽出した輪郭が正しいか否かの判別をカテゴリ毎に行う。
Bag of Hash Binsという方法で輪郭の特徴を表現するらしい。判別器はSVM。

判別結果が陽であれば、その輪郭をそのままマスクとして用いて色抽出を行う。
陽でなければ次のステージに

**3rd stage**
失敗の原因はモデルの顔や肌であることが多い（特にトップスの場合は）。そんなときはアプローチを変えて、GrabCutを施す。
segmentation結果は再度SVM。

![スクリーンショット 2016-09-28 22.19.48.png](https://qiita-image-store.s3.amazonaws.com/0/66317/8d58e6a7-ce5b-05df-c1cd-fb4cd61e68b2.png)

# 色抽出
単色ではなくBag-of-Colorで表現する。ということはk-meansか何かで予め色を量子化してコードブックを作成し、その要素を積み上げたヒストグラムで表現するということだろう。

ただ、何も考えずにk-meansするのは良くない。ファッションアイテムに付与される色は、実際のカラーコードとは異なる場合がある。RGB値ではなく、人間の知覚が優先されるということ。

ただk-meansするだけだと、この微妙な色のニュアンスが失われるから、一度人の知覚に近い空間に射影する必要がある。
論文ではこんなアプローチをとっている。

1. 知覚に近い歪んだ空間にデータを射影（マッピングは学習する）
2. その空間上でk-meansしてコードブックを作成
3. コードブックを手作業でグルーピング

<img width="605" alt="スクリーンショット 2016-09-29 9.58.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/66317/ce22a710-18a7-b71f-a5d2-da99e59b46bf.png">

**知覚空間へのマッピング**
マッピングは学習によって獲得する。ここで使われる手法は読んでないけど、おそらくcontrastive lossのように異なるクラスに属するデータをmarginの外に追い出すように学習するのだろう。
使うデータはファッションアイテムのsuper-pixel。手作業によって{Red, Orange, Yellow, Green, Blue, Navy, Purple, Black, Gray, White}のいずれかがラベリングされている。
super-pixelとは、これみたいなpixelの固まり。
自分が画像やってた頃は著者が公開してるライブラリ使ってたけど、今はOpenCVに実装されているようで。
![superpixels_slic.png](https://qiita-image-store.s3.amazonaws.com/0/66317/d4432769-afcd-2669-9aff-5b23fc3e32d0.png)


**k-means**
獲得した空間上で普通にk-means。コードブックを作成する。

**tonebook**
作成したコードブックを手作業で25色にグルーピングしている。25という数字はおそらくシステムの仕様から決まる。

ちなみに、一連の処理はRGBではなくCIELAB空間で行う。CIELABはRGBよりも人の感覚に近い色空間。

# 実験
色の混合とアイテムカテゴリを指定して、検索を実行する。色はtonebookから複数選択した後、各色の割合を調整して決定する。
ぱっとみうまくいっている。
<img width="457" alt="スクリーンショット 2016-09-29 10.16.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/66317/39362f56-10ea-3f94-7b35-a73652c0316b.png">
<img width="490" alt="スクリーンショット 2016-09-29 10.16.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/66317/f747f63c-afb3-c832-9216-76b6ed6b1cca.png">

色の混合を手作りするだけじゃなくて、ファッションアイテムの画像自体をクエリにすることも可能らしい。食わせた画像から色を抽出して、あとは同じ処理を実行してくれる。

# 議論
輪郭抽出の精度はどれほどのものだろう？
図だとだいぶ易しい問題を解いているけど、実際は背景がうるさかったり２人以上のモデルが写ってたりするので、そういう場合は難しそう。
このあたりは教師情報があればdeepにしても良いのかもしれないけど、そもそも輪郭の情報は得られない場合がほとんど。

# 感想
実際に色の混合でアイテムを検索するというシーンがイメージできなかったけど、輪郭検出やBoCの抽出方法は参考になることが多かった。
React 指南




- [为什么是 react](#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%98%AF-react)
- [显示数据](http://qiita.com/xiangzhuyuan/items/1cb81cf3cc57bbfcdf87)
	- [JSX 详解](http://qiita.com/xiangzhuyuan/items/3dfdac37661bb9f86733)
	- JSX 的` spread` 属性
	- JSX上道儿
- 交互动态 UI
- 多组件
- 复用组件
- 传递属性 通过props
- 表单
- [和浏览器一起工作](http://qiita.com/xiangzhuyuan/items/a34141cc34f0aecb86b8)
	- [在组件中使用 refs](http://qiita.com/xiangzhuyuan/items/d209566b1f629005b698)
- 工具集成
	- 语言工具
	- 包管理
	- 服务器端环境搭建
- 增强功能
	- 动画
	- 双向绑定帮助类
	- 元素克隆
	- 键化片段
	- 不变
	- 混合 render
	- 性能工具
	- shadow 对比
- 高阶性能
- 上下文?


#为什么是 React

react 其实就是js 的库,它在 `MVC`的架构里可以充当` v` 是角色. 设计的初衷就是对应大型应用的频繁数据更新.

##简单

用一种简单的方式来表达 web 应用. react 会自动管理所有的 UI 变化,在背后的数据发生变化之后.

##声明

当数据发生变化时, react 好像会感觉到,然后出发`刷新`按钮,而且知道去修改对应的 UI 部分

## 构建可以组合的组件

React 它本身就是在造组件复用组件,你唯一需要做的事情就是造组件. 他们高度封装, 组件让代码可以复用, 好测试.

## 给我五分钟

想想到底有没有意思呢

[more](https://facebook.github.io/react/blog/2013/06/05/why-react.html)
Swiftでカリー化してみた。

Swiftの勉強がてらカリー化を考えてみました。こんな感じかと。

```curry.swift

func curry<T1,T2,T3>(_ f:@escaping (T1,T2) -> T3) -> (T1) -> (T2) -> T3 {
    
    func F(x:T1) -> (T2) -> T3 { return {(y:T2) in f(x,y)}}
    return F
}


let curryadd = curry((+) as (Int,Int) -> Int)
let add3 = curryadd(3)
add3(10)

```
有報のXBRLの項目メモ

指標出すために色々と調べて時間掛かったのでメモっておきます。XBRLの公式の資料と、PDFの有報と、XMLのファイルを見比べながらやっていて、大変でした。間違っているところありましたらご指摘ください。
最近XBRLのフォーマットが大きく変わったのと、IFRSもあって大混乱です。経年で出すときは2つのフォーマットを扱わないといけないので、なかなか苦労します。

#単体と連結
表現が変わります。

- jpfr-t-cte
    - CurrentYearConsolidatedDuration
    - CurrentYearNonConsolidatedDuration
- jppfs_cor
    - CurrentYearDuration
    - CurrentYearDuration_NonConsolidatedMember

#期
多いところで4期前まであるみたいですが、項目によってはPrior1しかないことも多い。

- Current
- Prior1
- Prior2
- Prior3
- Prior4



#売上高
- jpfr-t-cte:NetSales
- jppfs_cor:NetSales
- jpcrp_cor:NetSalesSummaryOfBusinessResults

#営業利益
- jpfr-t-cte:OperatingIncome
- jppfs_cor:OperatingIncome

#経常利益
- jpfr-t-cte:OrdinaryIncome
- jppfs_cor:OrdinaryIncome
- jpcrp_cor:OrdinaryIncomeLossSummaryOfBusinessResults

#当期純利益
- jpfr-t-cte:NetIncome
- jppfs_cor:NetIncome
- jpcrp_cor:NetIncomeLossSummaryOfBusinessResults

#営業キャッシュフロー
- jpfr-t-cte:NetCashProvidedByUsedInOperatingActivities
- jppfs_cor:NetCashProvidedByUsedInOperatingActivities
- jpcrp_cor:NetCashProvidedByUsedInOperatingActivitiesSummaryOfBusinessResults

#投資キャッシュフロー
- jpfr-t-cte:NetCashProvidedByUsedInInvestmentActivities
- jppfs_cor:NetCashProvidedByUsedInInvestmentActivities
- jpcrp_cor:NetCashProvidedByUsedInInvestingActivitiesSummaryOfBusinessResults

#財務キャッシュフロー
- jpfr-t-cte:NetCashProvidedByUsedInFinancingActivities
- jppfs_cor:NetCashProvidedByUsedInFinancingActivities
- jpcrp_cor:NetCashProvidedByUsedInFinancingActivitiesSummaryOfBusinessResults

#剰余金の配当
- jpfr-t-cte:DividendsFromSurplusRE　（利益剰余金）
- jppfs_cor:DividendsFromSurplus　（contextRefで剰余金の種類を合わせて指定します）

#社員数
社員数は期間ではないので期の指定方法が異なります。
contextRef="CurrentYearInstant"
といった感じです。

- jpfr-t-cte:なし
- jppfs_cor:NumberOfEmployees　（従業員）
- jpcrp_cor:AverageNumberOfTemporaryWorkers　（平均臨時雇用人員）

#他
良く使いそうなのはこんな感じですが、他にも大量にあります。ただし、会社によってどこまで開示しているかはマチマチなので使い辛いですね。あと、定義済みではない個社毎に独自に開示しているデータもあって、それはこんな感じになります。

jpcrp030000-asr_E00000-000:NAME

E00000のところが会社の番号で、NAMEのところが項目の名称が入ります。
contextRefも同様に拡張可能で、
contextRef="CurrentYearDuration_jpcrp030000-asr_E00000-NAME"
といった感じです。
【Swift3】UITableViewのセルをスワイプで削除する

# デモ
![delete.gif](https://qiita-image-store.s3.amazonaws.com/0/135478/b82bbcc7-abdb-d892-b710-958e528cf3ba.gif)


# デフォルト

```.swift
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
    if editingStyle == .delete {
        array.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .fade)
    }
}
```

# ボタンの文字や背景色を変えたい場合

```.swift
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    
    let deleteButton: UITableViewRowAction = UITableViewRowAction(style: .normal, title: "削除") { (action, index) -> Void in
        self.array.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .fade)
    }
    deleteButton.backgroundColor = UIColor.red
    
    return [deleteButton]
}
```


# 関連記事
・[【iOS11】UITableViewセルのスワイプで削除を無効にする方法【Swift】](https://qiita.com/The_Shimon/items/3e5958763c2be755a3f5)
Postgresqlのローカル設定　Mac

Ruby On Railsの開発では、データベースの設定は欠かせない。
この設定を解決するのにだいぶ時間を要したので。PostgreSQLの設定を共有したいと思う。

<h1>PostgreSQLのローカル設定</h1>

まず先に基本的だが、
・Homebrew
・Xcode 
・Command Line Tools 
・Ruby 
上記がインストールされていることが条件です。

ターミナル上でPostgreSQLをインストールします。
（homebrewを利用)

$brew install postgresql
ちょっと時間がかかります。


<h1>次にファイルを起動するために、自動的にPostgresqlが起動できるように、
ターミナル上で下記を。</h1>
$ln -sfv /usr/local/opt/postgresql/*plist ~/Library/LaunchAgents
$launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist


以上、上記を順番にやっていけば、postgresqlの起動はできると思う。

Railsでの開発でherokuを利用する場合は、
postgresqlを利用しやすい。
（私の場合ですが。)
KSDK 1.X UART_DRV_SendData CallBack

##CallBack

PEなどでCallBackをインストールした場合、UART_DRV_SendData を呼び出しただけでは送信が完了しません。
uartCom1_TxCallback内でポインタと送信文字数を更新してあげましょう。

```Events.c
void uartCom1_TxCallback(uint32_t instance, void * uartState)
{
	/* Write your code here ... */
	uart_state_t * state = (uart_state_t *)uartState ;
	++state->txBuff; //
	--state->txSize; //
}
```
技術英語 > you won't have to face [an inquisition] from the goto goon squad.

@ Code Complete (No. 13342 / 36077)

> you won't have to face <font color=red>an inquisition</font> from the goto goon squad.

http://ejje.weblio.jp/content/inquisition
> (しばしば人権無視の)厳しい尋問、取り調べ、審理、(昔の異端審理の)宗教裁判(所)

inquireの名詞形だろう

「goto goon squad」は[wikipedia](https://en.wikipedia.org/wiki/Goon_squad)参照
Goon squadはあらあらしい集団というイメージがあるが詳細は不明（影響圏の外)。
Selenium WebDriver + Firefox49（暫定）（Python）

うおーFirefoxのバージョン上げたらSelenium動かない死ぬしかないしこのままでは楽しい週末を送れない！ と思って調べました。あ、Pythonです。

Selenium 2系だと動かない？
一応いまのところ(2016/9/29時点）うまく行っている方法がこれです。

### Selenium 3.0.0b3 に上げて、geckodriver入れる。

```
wget https://github.com/mozilla/geckodriver/releases/download/v0.10.0/geckodriver-v0.10.0-linux64.tar.gz
tar xzvf geckodriver-v0.10.0-linux64.tar.gz
cp geckodriver /usr/bin/
pip install selenium==3.0.0b3
```
これの通りにやった。
https://github.com/SeleniumHQ/selenium/issues/2739#issuecomment-250112599


### 謎の例外が出る対応

それでも、get_attribute とかすると謎の例外が出る。
```
WebDriverException: Message: SyntaxError: missing ) in parenthetical
```

Seleniumのバージョン上がって使い方変わったのかなあ、とか思って調べてたら、Selenium 3.0.0b3のバグらしいので直す。

http://stackoverflow.com/questions/39527858/how-can-i-disable-web-driver-exceptions-when-using-the-mozilla-marionette-web-dr

誰かプルリクあげてんのかな。

おしまお。
S3で本番環境の機密情報を管理しインスタンスに撒く方法


プロビジョニングツールとかで機密情報を管理する方法もあるが、
AMIからポンッとインスタンス立てて機密情報だけ入れれば動かせるという状況で
S3から機密情報を取ってくるようにすれば運用が楽になるんじゃないかという話。


# 前提条件
- 本番環境用のVPCがある

# VPCエンドポイントの作成
## AWSのサービス一覧からVPCを開き、エンドポイントをクリック

<img width="1080" alt="VPC" src="https://qiita-image-store.s3.amazonaws.com/0/21852/a53738dc-34a6-055f-cf32-692425b0305d.png">
  
## VPCとサービスを選択
基本的にフルアクセスでいいが、必要に応じてポリシーを設定。

<img width="743" alt="Step1" src="https://qiita-image-store.s3.amazonaws.com/0/21852/dccc1e1e-6b59-4550-bc35-f3eef83d6e11.png">

## ルートテーブルを選択

<img width="752" alt="Route table" src="https://qiita-image-store.s3.amazonaws.com/0/21852/368b0728-2144-c0fa-4c74-bb37cd723776.png">


# S3バケットポリシーの設定
S3ではバケットごとにアクセスを制限するためのポリシーを設定することができるので、上で作ったVPCエンドポイントからのみアクセスを許可するようにする。

S3でバケットのプロパティを開き、「バケットポリシーの追加」をクリック。

<img width="864" alt="Bucket property" src="https://qiita-image-store.s3.amazonaws.com/0/21852/ee2a2d3f-d4e2-b6fb-ab37-89670492f747.png">

ポリシー編集ダイアログが出るので、以下を入力

```json:バケットポリシー
{
	"Version": "2012-10-17",
	"Id": "PolicyForCredentials",
	"Statement": [
		{
			"Sid": "Allow-production-VPC-to-getObject",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:getObject",
			"Resource": "arn:aws:s3:::<bucket name>/*",
			"Condition": {
				"StringEquals": {
					"aws:sourceVpce": "上で作ったVPCエンドポイントID"
				}
			}
		}
	]
}
```

以上でVPCに属するインスタンスからはバケット内のファイルが見えるようになったので、あとは
`curl https://s3-ap-northeast-1.amazonaws.com/bucket/credentials.txt > /path/to/credentials.txt`
みたいな感じで取ってくる。
Appleにコードレベルの質問を送る方法 (DTS)

# Apple Developer Technical Support (DTS)

Apple Developer Technical Support(DTS)とは、コードレベルのサポートをAppleへ依頼出来るものです。
基本的に3営業日以内になんらかの返信を得ることができます。ただ、beta版についての依頼はできません。
Developer Program に加入していれば利用できます。

## Technical Support Incident (TSI)とは

1年間有効なメンバーシップを購入すると、自動的にインシデントが追加されます。

Apple Developer Program および Apple Developer Enterprise Program の場合、2件。
MFi Programの場合、8件です。

1つの依頼に対して、1つのインシデントを消費します。
インシデントは1年間有効で、引継ぎはありません。
インシデントがなくなったら、購入することも可能です。
2-pack for $99 USDらしいので、Apple Developer Program の値段と一緒なんですね。

詳しくは [Requesting Technical Support](https://developer.apple.com/support/technical/) をどうぞ。

## 依頼方法

### フォームからリクエストを送る

アカウントページの Code-Level Support から行えます。
https://developer.apple.com/account/?view=support

「Request Technical Support」のリンクで入力フォームが出てきます。
入力する内容は以下で、私は英語で書きました。

* Title 
* Description (問題の詳細)
* Steps to Reproduce　（再現方法の手順）
* App Storeのリジェクトに関する質問の場合は、App NameとApp ID

ここで、添付ファイルをつけるなどはできません。
添付したいものがある場合は、この後に届くメールの返信で送りましょう。

### フォローアップIDをメールで受け取る

フォームからSubmit Requestをすると、以下の文面のメールが届きます。

> Thank you for contacting Apple Developer Technical Support (DTS). This acknowledgment is automatically generated and does not require a reply.
>
> Follow-up: *********
>
> Your request has been assigned the follow-up number listed at the top of this message. When submitting a follow-up email for this request, please include the follow-up number on the first line of your message (not in the Subject line of the email). Here is the format you should use: Follow-up: *********
This DTS support channel provides development-level responses to purchased Technical Support Incidents (TSI) under the Apple Developer Program. 

何か情報を追加したい場合には、このメールに返信します。
メールの本文の1行目に、Follow-up: ********* を必ずいれましょう。

### クラッシュログを取得する

クラッシュする問題の場合は、クラッシュログを送ると良いと思います。
但し、シンボル化されたものを送るようにしましょう。

もし、App Storeに既にリリースしているアプリであれば、Appleに報告されているクラッシュレポートから探すこともできます。

XCode の Window > Organizer の画面で、Crashes のタブを選択します。
CrashログがAppleのサーバーからダウンロードされます。
該当のCrashを右クリックからFinderで開きます。
![crashes.png](https://qiita-image-store.s3.amazonaws.com/0/1380/17e27fd7-435e-f97e-3589-1141abad9f4d.png)

xccrashpoint という拡張子のファイルがあるので、Show Package Contents で中を開きます。

![finder.png](https://qiita-image-store.s3.amazonaws.com/0/1380/598eda1d-ccfa-0411-1ec0-73617ae36816.png)

この中に、Crashファイルが含まれています。
bitcodeが有効になっているアプリの場合は、シンボル化されたものが取得できます。
(これ、とっても素敵！)

ここから取得できるクラッシュログは、「診断/使用状況」を送信する設定している端末でのクラッシュのみで全てではないのは、ご注意を。
詳しくは [Technical Note TN2151](https://developer.apple.com/library/content/technotes/tn2151/_index.html) をどうぞ。

## 私のケース

Case by Caseであるということを前提に、私のケースを参考までに。

Crashする再現方法はわかっているが、解決方法が分からないものを依頼する
↓
iOSのバグと思うのでBugReportを書いて欲しい。そして、インシデントは一旦戻すよ。
引き続き回避策を探ってほしいようであれば手配するが、保証はできないし、凄く時間かかるかもしれない。
との返答がある
↓
回避策が分かれば知りたかったので、引き続き依頼をお願いする
↓
1週間程度で、回避策の返信が届く

メールは、かなり親身になって相談にのってくれている感じでよかったです。
そしてなにより、直にメールでやり取りできる安心感。
さらに「そのバグはもう担当者が既に把握していて対応しているところだよ」と言ってもらえたりすると凄く安心しました！

BugReportはステータスは分かるものの、対応が始まっているのか？ 放置されているのか？などが分からないので、ジリジリすることが多いです。
たまに、BugReportでも"これを試してみて欲しい"というようなメールを受け取る事はあったりしましたが...


ここぞ という時にまた使いたい。
Homebrew で DNSCrypt を試してみる

注: DNS について特に専門ではないので、この記事の内容は大きく誤解して書いている可能性がある。

# DNS とは

DNS は IP とドメイン名を変換してくれるプロトコル・サービス。
これは生の TCP や UDP で通信する。このままでは改ざんし放題、盗聴し放題。

# DNS を守るための手立て

デジタル署名を付加して応答することで、完性を保証する [DNSSEC](https://www.icann.org/resources/pages/dnssec-qaa-2014-01-29-en) がある。
(**完全性の保証はしてくれるが、盗聴は防げない**)。あまり普及していないらしい。

一方、盗聴をも防げる手段として [DNSCrypt](https://dnscrypt.org/) というプロトコル・ソフトウェアがある。

ローカルに DNSCrypt プロキシサーバを立て、そのプロキシサーバ経由で通信することで、
生の DNS 問い合わせはキャプチャできなくなるという寸法だ。

実際に tcpdump で自分の DNS 問い合わせと応答を盗聴し、通常時と DNSCrypt 有効時で比較してみた。

**たしかに DNS の盗聴には有効そうだったので、ここに自分の調べた手順を残す。**
(そして、もちろん、オーバーヘッドがある分、 DNS 問い合わせ時に通信速度は低下する。
また、 DNS の盗聴は防げても、ほかの通信については従来のままなので、やはり VPN や TLS などで保護する必要がある。
地理による最適化などの恩恵が受けられず、 CDN からのダウンロード速度が向上しない可能性がある。
また、 OS 本体のアップグレート時やシングルユーザーモードなど、特殊な状況下でも正しく通信可能か否か、私は検証していない。)

# Homebrew でインストール・起動

## インストール

```console
$ brew install dnscrypt-proxy --with-plugins
```

## 起動

```console
$ sudo brew services restart dnscrypt-proxy
```

なるほど簡単。

# 実験方法

## tcpdump の使い方

`en0` のところは、 `ifconfig` コマンドなどで、自分の環境での、主として使っているネットワークインターフェースをしらべて指定する。

`port 53` というのは、 DNS が 53 番ポートで通信するため。

```console
$ sudo tcpdump -i en0 'port 53'
tcpdump: verbose output suppressed, use -v or -vv for full protocol decode
listening on en0, link-type EN10MB (Ethernet), capture size xxxxxx bytes
(略。キャプチャした結果がでる)
```

## DNSCrypt の有効化・無効化

メニュー > システム環境設定 > ネットワーク > 詳細... > DNS > DNS サーバ
と開いていき、 127.0.0.1 を追加すれば有効、削除すれば無効という設定になる。
確定するには 1 つ前の「ネットワーク」の画面で「適用」を押す必要がある。

(私は普段、英語ロケールで使っているので、↓の図と↑の文言が多少違うかもしれない。)
![a.png](https://qiita-image-store.s3.amazonaws.com/0/25886/9d3f48aa-97db-bea2-398e-3d8367a691ed.png)

## DNS の問い合わせ

`nslookup` コマンドで盗聴したいサンプルの問い合わせを行うことにする。

```console
$ nslookup example.com
Server:		XXX.XXX.XXX.XXX
Address:	XXX.XXX.XXX.XXX#53

Non-authoritative answer:
Name:	example.com
Address: 93.184.216.34
```

## DNS キャッシュのクリア

実験する際には、 DNS キャッシュがあると正しく比較できない可能性を考え、次のコマンドでキャッシュをクリアする。
(通常 `nslookup` コマンドはキャッシュを無視するはずだが、そこを信頼するよりも確実にクリアして比較したい。)

```console
$ sudo killall -HUP mDNSResponder
```

## 結果

DNSCrypt 無効時には次のようなパケットが記録できる。有効時には記録できない。

```console
$ sudo tcpdump -i en0 'port 53'
tcpdump: verbose output suppressed, use -v or -vv for full protocol decode
listening on en0, link-type EN10MB (Ethernet), capture size ?????? bytes
HH:MM:SS.ssssss IP XXX.XXX.XXX.XXX.AAAAA > YYY.YYY.YYY.YYY.domain: ?????+ A? example.com. (29)
HH:MM:SS.ssssss IP YYY.YYY.YYY.YYY.domain > XXX.XXX.XXX.XXX.AAAAA: ????? 1/2/4 A 93.184.216.34 (181)
HH:MM:SS.ssssss IP XXX.XXX.XXX.XXX.BBBBB > YYY.YYY.YYY.YYY.domain: ?????+ PTR? XXX.XXX.XXX.XXX.in-addr.arpa. (44)
HH:MM:SS.ssssss IP YYY.YYY.YYY.YYY.domain > XXX.XXX.XXX.XXX.BBBBB: ????? NXDomain* 0/1/0 (100)
HH:MM:SS.ssssss IP XXX.XXX.XXX.XXX.CCCCC > YYY.YYY.YYY.YYY.domain: ?????+ PTR? YYY.YYY.YYY.YYY.in-addr.arpa. (42)
HH:MM:SS.ssssss IP YYY.YYY.YYY.YYY.domain > XXX.XXX.XXX.XXX.CCCCC: ????? NXDomain* 0/1/0 (98)
```

また、有効時に `port 443` をキャプチャすると、 DNSCrypt によって暗号化された通信が記録できる。 (どんな問い合わせをしたのかまではわからない。)
Swift2.2TableView(+Animation)のコードをSwift3.0に対応しためも

#はじめに
TableViewのアニメーションの勉強にSwift3.0の勉強も兼ねて
以下のeKushidaさんの記事の実装を
Swift3.0でやってみました。
[「Yo.」みたいなUITableViewのアニメーションを作る](http://qiita.com/eKushida/items/a41d960ed278e03ebd51)

Swift3.0対応として修正した箇所について自分用メモとして残します。

#Swift3対応として修正したところ

##TableViewCellのサブタイトル
Swift2.2

```swift
UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "Cell")
```

Swift3.0

```swift
UITableViewCell(style: UITableViewCellStyle.subtitle, reuseIdentifier: "Cell")
```

#TableViewCell選択時のデリゲートメソッド
Swift2.2

```swift
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)
```

Swift3.0

```swift
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
```

##UIView.animate
Swift2.2

```swift
UIView.animateWithDuration(0.75, animations: {[weak self] () -> Void in
```

Swift3.0

```swift
UIView.animate(withDuration: 0.75, animations: {[weak self] () -> Void in
```

##CGAffineTransform
Swift2.2

```swift
CGAffineTransformMakeTranslation(0, CGFloat(index))
```

Swift3.0

```swift
CGAffineTransform(translationX: 0, y: CGFloat(index))
```

##Arrayのremove
Swift2.2

```swift
itemLists.removeAtIndex(indexPath.row)
```

Swift3.0

```swift
itemLists.remove(at: indexPath.row)
```

##TableViewのdeleteRows
Swift2.2

```swift
tableView.deleteRowsAtIndexPaths(deleteIndexPaths, withRowAnimation: UITableViewRowAnimation.Bottom)
```

Swift3.0

```swift
tableView.deleteRows(at: deleteIndexPaths, with: UITableViewRowAnimation.bottom)
```

##Arrayのinsert
Swift2.2

```swift
itemLists.insert(text, atIndex: 0)
```

Swift3.0

```swift
itemLists.insert(text, at: 0)
```

##Arrayのappend
Swift2.2

```swift
insertIndexPaths.append(NSIndexPath(forRow: 0, inSection: 0))
```

Swift3.0

```swift
insertIndexPaths.append(IndexPath(row: 0, section: 0))
```

##TableViewのinsertRows
Swift2.2

```swift
tableView.insertRowsAtIndexPaths(insertIndexPaths, withRowAnimation: UITableViewRowAnimation.Top)
```

Swift3.0

```swift
tableView.insertRows(at: insertIndexPaths, with: UITableViewRowAnimation.top)
```

##CGSize
Swift2.2

```swift
snapshot.layer.shadowOffset = CGSizeMake(-5, 0)
```

Swift3.0

```swift
snapshot.layer.shadowOffset = CGSize(width: -5, height: 0)
```

##その他
- "NS"が無くなったり。
- メソッドの第一引数の扱いが変わったり。(第二以降の引数と扱いが同様になった)
- enumが小文字始まりになったり。

(上に例アリ)

#さいごに
実装した順にひたすら書き連ねていったので、記載順がテキトーになってしまいました。
グループ分けしたほうが見やすかったかも。

Animation実装したTableViewのサンプルは、
整理したらGitHubにあげようかなーと思います。
LiveScriptでポイントフリースタイル

まず最初に、<strong>ポイントフリースタイルは適度に！</strong>

AltJSの一つであるLiveScriptで、Haskellerはみんな大好きポイントフリースタイルをやってみようという試みです。

[![LiveScriptでポイントフリースタイル](http://img.youtube.com/vi/0TL905PJ8qE/0.jpg)](http://www.youtube.com/watch?v=0TL905PJ8qE)


カリー化、関数合成の説明忘れてた…

## 2016/09/29 08:55 追記

```livescript
# 20代の人にhello 30代の人にbyeさせる
people
|> map (
  ($$ [id, (.age) >> by_10 >> ({20: hello, 30: bye}.)])
  >> apply (|>)
)
```
こっちの方が良いですね