OmniAICreator/Qiita-1.07M huggingface dataset:
【swift】tableViewに何もなければ、吉岡里帆ちゃんが出現する

# 【swift】tableViewに何もなければ、吉岡里帆ちゃんが出現する
- 今回は、UITabaleViewやUICollectionViewに表示する要素が0であれば、[吉岡里帆さん](https://matome.naver.jp/odai/2149290466326227901) が出現するようにします。
- アプリ作りのときに毎回お世話になっているライブラリで [dzenbot/DZNEmptyDataSet](https://github.com/dzenbot/DZNEmptyDataSet) という、UITabaleViewやUICollectionViewに表示する要素が何もなければ任意の画像や文字を設定してくれます。

### 完成形はこんな感じです(要素が０のとき)
<img width="414" alt="Simulator Screen Shot - iPhone 8 Plus - 2017-10-04 at 22.39.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/1d51ffab-1e9f-d944-27c0-a918ce48ccaf.png">
---

### 要素があれば普通にインデックスを表示します
<img width="414" alt="Simulator Screen Shot - iPhone 8 Plus - 2017-10-04 at 22.41.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/8b09f2b0-45f2-ef40-d273-39b627d95e30.png">
---

## 実装してみる
### cocoapodかcarthageで[dzenbot/DZNEmptyDataSet](https://github.com/dzenbot/DZNEmptyDataSet)を入れる

#### cocoapod
```Podfile
  pod 'DZNEmptyDataSet'
```

```
$ pod install
```

#### carthage

```Cartfile
github "dzenbot/DZNEmptyDataSet"
```

```
$ carthage update --platform iOS
```

### ソースコードはこれだけ
- 画像は`riho1`で`Assets.xcassets` に入れてあります。
- `numberOfRowsInSection`を0にすると吉岡里帆ちゃんが出現するはずです。
- ポイントとして今回delegateの設定は、Storyboardだけで行います。


```viewController.swift
import UIKit
import DZNEmptyDataSet

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

extension ViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = "\(indexPath.row)"
        return cell
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10 // <= ここを0にしたときに、吉岡里帆ちゃんが出現すれば成功
    }
}

extension ViewController: DZNEmptyDataSetSource, DZNEmptyDataSetDelegate {
    func image(forEmptyDataSet scrollView: UIScrollView!) -> UIImage! {
        return UIImage(named: "riho1")
    }
}
```

### Storyboardの設定
#### UITableViewとDZNEmptyDataSetの**delegateをStoryboardで設定する <- ポイント！！**
- referencing Outlets に 
  - `UITableViewDataSource` 
  - `UITableViewDelagate` 
  - `DZNEmptyDataSetSource` 
  - `DZNEmptyDataSetDelegate` が設定されています。

- このとき、viewControllerに`DZNEmptyDataSet` がimportされていることと、Storyboardに`viewController`がcustom classに設定されていれば、設定できます。
- 下図のように、tableViewをControllを押しながらViewControllerのところで離すと、delegateの設定ができます。ソースコードの中でいちいち `????.delegate = self` としなくて良くなります。



<img width="428" alt="Screen Shot 2017-10-04 at 22.53.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/cc7ad64f-b931-ad31-7617-fa09a3760ef3.png">

---


<img width="722" alt="Screen Shot 2017-10-04 at 22.36.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/62822/9ac9b3ce-b6d7-7441-c9ba-ce3b219409c5.png">
---

## 完成形はこちら

![yosidariho_full.gif](https://qiita-image-store.s3.amazonaws.com/0/62822/7e0434d0-9d7d-2e4a-fb36-73e813503ffb.gif)

## まとめ
- DZNEmptyDataSetを使えば、tableViewやcolelctionView scrollViewに何もないときに画像やテキストをかんたんに表示することができます。
- おすすめです！
GPSカー　シュミレータ その5

#概要
GPSで自動走行する、コンテストがある。
実機を借りて、アプリから操作する部門がある。
実機は無いので、シュミレータを作ってみた。
大会要項が変更されたため、対応した。
再配布します。

#写真

![simm.JPG](https://qiita-image-store.s3.amazonaws.com/0/18104/24f9f361-f16d-6600-6b46-5e6e712f545e.jpeg)


#実行環境
windows .netframework4.0

#配布物
[ダウンロード](http://jsrun.it/assets/s/E/t/s/sEtsi_)

#使い方
ZIPです。解凍願います。
bluetoothトングルを挿す。
スタートボタンを押すとCOM14をオープンします。
androidアプリは、ご準備下さい。
eコマンドで、デスクトップに軌跡をlog.jpgで保存します。

以上
gcd ターミナルでGitHubのレポジトリを便利に移動する

![tweet.gif](https://qiita-image-store.s3.amazonaws.com/0/15319/9e03c4a8-4dac-b4d5-f13e-1161e1cb5199.gif)

基本的な動作は以下のとおりです。

`gcd レポジトリ名`で自分のレポジトリへ移動。
`gcd 組織/レポジトリ名`でそのレポジトリへ移動。
もしローカルに無ければクローンしてから移動。

ghqを必要とします。

https://github.com/motemen/ghq

ghqはとても素晴らしいツールです。詳しい導入方法は検索すると多くの記事が出てくるのでそちらに任せます。macならば`brew install ghq`でインストール可能です。

gcdは、以下のスクリプトを`.zshrc`などに追記するだけで動作します。

```sh
GHQ=`ghq root`/github.com
ME=`git config --get user.name`

gcd() {
	ghq get -p $1
	if [ `dirname "$1"` = "." ]; then
		cd $GHQ/$ME/$1
	else
		cd $GHQ/$1
	fi
}
```

`$GHQ`や`$ME`などの変数は、ハードコートしてもよいと思います。

自分で追記するのも面倒ならば、`npm i -g gcd-cli`でインストールできます。
https://github.com/akameco/gcd-cli

何かあればtwitterまたはコメント欄にて議論しましょう。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">便利スクリプトgcd(GitHub cd)。`gcd レポジトリ名`で自分のレポジトリへ移動。`gcd 組織/レポジトリ名`でそのレポジトリへ移動。ローカルに無ければクローンしてから移動  <a href="https://t.co/q6YKO9G7LB">https://t.co/q6YKO9G7LB</a>  要ghq <a href="https://t.co/SAnEXkCrnY">pic.twitter.com/SAnEXkCrnY</a></p>&mdash; 無職.js (@akameco) <a href="https://twitter.com/akameco/status/915673362499649536?ref_src=twsrc%5Etfw">2017年10月4日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Javascript初心者がsetTimeoutを使ったとき行き詰ったこと

Javascriptの練習にブラウザで動く簡単なゲームを作ろうとしていたところ
setTimeoutを続けて使うとうまく動作しないというところで詰まったのでその解決策

Javascriptは非同期処理を行っています。

例

まず'#1'を出力しそのあと'#2'を出力したい場合、

```js
setTimeout(() => {
　console.log('#1');
}, 500);
console.log('#2');
```
こう書くと実行した結果は

```
 #2
 #1
```
となってしまいます。


時間のかかる処理がある場合、同期処理の場合はまずその処理を待ってから次の行が実行されますが
非同期処理のJavascriptの場合すぐに次の行のコードが実行されてしまうためです。


これを解決するために、
まずコールバック関数を使う方法です

```js
setTimeout(() => {
　　console.log('#1');
　　setTimeout(() => {
　　　console.log('#2');
　　　setTimeout(() => {
　　　　console.log('#3');
　　　}, 500);
   }, 500);
}, 500);
```

この場合、数が多くなるとコールバック関数地獄になりコードの見た目がカオスなことになってしまいます。

そこでPromiseオブジェクトを使うと大分すっきりします。

```js
var p = new Promise((resolve) => {
  setTimeout(() => {
    resolve(console.log('#1'));
  }, 500);
});

p
.then((resolve) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log('#2'));
    }, 500);
  })
})
.then((resolve) => {
  setTimeout(() => {
    console.log('#3');
  }, 500);
})
```
少しややこしいですが処理を順番にthenに渡してやるイメージです。


いろいろな書き方があるので

```js
new Promise((resolve) => {
  setTimeout(() => {
    resolve(console.log('#1'));
  }, 500);
})
.then((resolve) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log('#2'));
    }, 500);
  })
})
.then((resolve) => {
  setTimeout(() => {
    console.log('#3');
  }, 500);
})
```
このようにすべてつなげて書いたり

```js
function p() {
 return new Promise((resolve) => {
   setTimeout(() => {
     resolve(console.log('#1'));
   }, 500);
 });
}

p()
.then((resolve) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(console.log('#2'));
    }, 500);
  })
})
.then((resolve) => {
  setTimeout(() => {
    console.log('#3');
  }, 500);
})
```
関数を使っても動きます。

また、

```js
new Promise((resolve) =>{
  setTimeout(resolve, 500);
})
.then(() =>{return new Promise((resolve) => {
  console.log('#1');
  setTimeout(resolve, 500);
})})
.then(() =>{return new Promise((resolve) => {
  console.log('#2');
  setTimeout(resolve, 500);
})})
.then(() =>{console.log('#3');});
```
このようにresolve()を使わずに書くこともできます。

Promiseオブジェクトの仕組みはややこしい部分もあるので詳細に解説しているページを見てもらった方がいいと思います。

ちなみに

```js
function() {};
```
はアロー関数を使って

```js
() =>{};
```
と短く書くことができます。


以上、Javascript初心者が最近気づいたことのメモでした。

追記

```
const wait = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

Promise.resolve()
.then( () => wait(500)         )
.then( () => console.log('#1') )
.then( () => wait(500)         )
.then( () => console.log('#2') )
.then( () => wait(500)         )
.then( () => console.log('#3') );
```
コメントのculageさんのコードが分かりやすかったため追記しました!
開発用サーバーを作る on AWS（PHP7+Nginx）

# そのまんま

3分くらいでサーバーが立つ便利な世の中。
EC2起動したらsshで接続して以下コピペすればおk。
Apacheでいい人はnginxは外してくだされ。
最後の行で止まるからEnterしたったらええよ。

```bash
sudo yum update
sudo rpm -Uvh ftp://ftp.scientificlinux.org/linux/scientific/6.4/x86_64/updates/fastbugs/scl-utils-20120927-8.el6.x86_64.rpm
sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
sudo yum install -y nginx php70 php70-php-fpm php70-mbstring php70-mcrypt php70-pdo php70-xml php70-fpm
sudo sed -i -e "s#/usr/share/nginx/html;#/var/www/html;#g" /etc/nginx/nginx.conf
sudo sed -i -e "s/user = apache/user = nginx/g" /etc/php-fpm.d/www.conf
sudo sed -i -e "s/group = apache/group = nginx/g" /etc/php-fpm.d/www.conf
sudo chmod 2777 /var/www -R
sudo chown -R nginx:ec2-user /var/www/html
echo "<?php phpinfo(); ?>" >> /var/www/html/index.php
sudo chkconfig php-fpm on
sudo chkconfig nginx on
sudo service php70-php-fpm start
sudo service nginx start
```

アクセスしてphpinfoが表示されるか確認しませう。

### おまけ
EC2を日本時間に

```bash
$ sudo mv /etc/localtime /etc/_localtime
$ sudo cp /usr/share/zoneinfo/Japan /etc/localtime
```

### さらにおまけ
AWS SDK導入

```bash
$ curl -sS https://getcomposer.org/installer | php
$ php composer.phar require aws/aws-sdk-php
```

### もひとつおまけ
MySQLクライアントインストール

```bash
sudo yum install mysql57 php70-mysql php70-mysqlnd
```

by [株式会社Arrvis](http://www.arrvis.com/)
s2s: reduxにおけるRequest/Sucess/Failureパターンを自動生成する

![9184b81a540f29860536de5a2e1c43ba.gif](https://qiita-image-store.s3.amazonaws.com/0/15319/a196731d-9231-a01a-f68d-4a8a1e3f98d1.gif)


reduxで頻出するパターンとしてRequest/Sucess/Failureパターンがあります。
これは、APIを叩く際に主に利用されるパターンです。
具体的な流れとしては、Requestアクションを発火しStateをisLoadingに変更しローディングを表示し、APIリクエストを行います。データを取得できれば、Sucessアクションでデータを反映、失敗したらFailureアクションを発火しエラーを表示するのが主なパターンです。
このパターンをライブラリなどで抽象することもありますが、flowtypeでアクションタイプを厳密に管理してると自分でアクションを定義する必要があります。もし、ライブラリ側で適切に型付けする方法を知っていればコメント欄またはtwitterにて教えてください。

## 自動生成
さて、先日s2sというライブラリを公開しました。
詳しくは、以下の記事を読んでください。

[**さよならボイラープレート。s2sによる高速reduxアプリケーション構築**<br>https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4](https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4)


簡単に説明すると、ASTによるリアルタイムコーディングアシストです。
これを使うと、型定義及びアクションの定数が一気に簡単になります。

![9184b81a540f29860536de5a2e1c43ba.gif](https://qiita-image-store.s3.amazonaws.com/0/15319/a196731d-9231-a01a-f68d-4a8a1e3f98d1.gif)


これは、保存時に以下の変換を行っています。

![スクリーンショット 2017-10-05 02.40.11.png](https://qiita-image-store.s3.amazonaws.com/0/15319/9b28d0f5-4671-a121-b250-96ff197fefd2.png)

導入方法については、上記の記事を読んでください。
また、興味があれば、他の記事も読んでいただけるとうれしいです。

**さよならボイラープレート。s2sによる高速reduxアプリケーション構築**
[https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4](https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4)

**s2s: reduxにおけるreducerのテスト。あなたがテストを書く必要はないかも知れない**
[https://qiita.com/akameco/items/66a2232df0e95e5bfe31](https://qiita.com/akameco/items/66a2232df0e95e5bfe31)


https://github.com/akameco/s2s に公開してるのでスターをいただけるとモチベーションになります。


何かあればコメント欄またはtwitterにて議論しましょう。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Request/Success/Failureパターンに対応した <a href="https://t.co/8H30LdTDQF">https://t.co/8H30LdTDQF</a> <a href="https://t.co/w7Hqno7FKr">pic.twitter.com/w7Hqno7FKr</a></p>&mdash; 無職.js (@akameco) <a href="https://twitter.com/akameco/status/915187137397403653?ref_src=twsrc%5Etfw">2017年10月3日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
ChromeでscrollTopを設定しようと思ったらハマった件

エフェクトとかで何かとウィンドウのスクロール位置をセットすることは多いと思います。

何故かChromeで動かなくなり悩んだところ、
Webkit系でスクロール料の取得・設定に使用していた`document.body.scrollTop`が使えなくなってるのが原因らしく。
`document.scrollingElement.scrollTop`を呼べばよいみたい。

## 例
こんなコードを書いてたのですが動作せず。

```js
setScrollTop(top) {
	// Webkit系であればdocument.body.scrollTopを呼ぶ。
	// それ以外はdocument.documentElement.scrollTopを。
	const tgt = (this.browser.isWebKit) ? document.body : document.documentElement;
	tgt.scrollTop = top;
}
```

こうしたら解決。

```js
setScrollTop(top) {
	let tgt;
	if ('scrollingElement' in document) {
		tgt = document.scrollingElement;
	} else if (this.browser.isWebKit) {
		tgt = document.body;
	} else {
		tgt = document.documentElement;
	}
	tgt.scrollTop = top;
}
```
もうちょい頭良いコードにできると思いますがひとまず。
pythonでon-memoryにtar.gzを作る


~~~convert_str_to_tar_gz.py
import io
import tarfile
import gzip


def convert_str_to_tar_gz(input: str, name: str, encoding: str='utf-8') -> bytes:
    # 入力された文字列をBytesIOにする
    input_io = io.BytesIO(input.encode(encoding))
    # 出力用のBytesIOを用意
    output_io = io.BytesIO()
    # TarFileを用意
    tar = tarfile.TarFile(fileobj=output_io, mode='w')
    info = tarfile.TarInfo(name=name)
    info.size = input_io.getbuffer().nbytes
    tar.addfile(info, input_io)  # TarFileに追加する（info.size分input_ioから読み込まれる）
    # output_ioから結果を取得
    result = output_io.getvalue()
    tar.close()
    output_io.close()
    return gzip.compress(result)
~~~

# 参考

https://docs.python.org/3.6/library/tarfile.html

https://docs.python.org/3/library/gzip.html

https://docs.python.org/3/library/io.html

https://stackoverflow.com/questions/26827055/python-how-to-get-iobytes-allocated-memory-length

https://stackoverflow.com/questions/740820/python-write-string-directly-to-tarfile

https://stackoverflow.com/questions/8858414/using-python-how-do-you-untar-purely-in-memory
スーパーバブルソート

バブルソートを極限まで早くしてみたいと思います。

まず、バブルソートを改良したものはいくつかありますが、
隣り合った要素を交換する、という枷がある以上、交換する回数はどれも同じです。
つまり、高速化するには余分な比較を減らすしかありません。

有名な比較数の削減は、最後の交換の手前までしか比較しない、というものです。
図で見ていきます。
![array.png](https://qiita-image-store.s3.amazonaws.com/0/985/32a1c50e-4e48-a39a-880b-b95d0b5a27c2.png)
赤い部分が最後の交換だった場合、次は青い部分まで比較すればいいです。

また、スタート位置も途中からスタートさせることを考えます。
最初の交換が赤い部分だった場合、次は青い部分の比較からスタートすればいいです。

この考えを発展すると、前回の場所で交換があったら、次はその1個手前の場所だけ比較すればいいのです。
n個の要素の場合、(n-1)+(交換回数)回の比較だけで済みます。

それではプログラムを書いていきます。
まずは最初にズラッと舐めて、交換が発生したら、一個手前の場所をキューに入れます。
あとはキューがなくなるまでそれを繰り返します。

```cpp:superbubble.cpp
#include <vector>
#include <algorithm>
#include <iostream>
#include <boost/timer/timer.hpp>
#include <boost/circular_buffer.hpp>

template<typename T>
bool ifswap(T &d1, T &d2){
	if (d1 > d2) {std::swap(d1, d2); return true;}
	return false;
}

template<typename iterator>
void bsort(iterator first, iterator last){
	boost::circular_buffer<iterator> data(std::distance(first, last));
	for (auto it = first; it != last; ++it) data.push_back(it);
	if (!data.empty()) data.pop_back();

	while(!data.empty()){
		auto &it = data.front();
		if (ifswap(*it, *(it + 1)) && it != first) data.push_back(it - 1);
		data.pop_front();
	}
}

int main(){
	const int size = 32;
	std::vector<int> v(size);
	for (int i = 0; i < size; i++)v[i] = i;
	std::random_shuffle(v.begin(), v.end());
	auto v2 = v;

	{
		boost::timer::auto_cpu_timer t;
		bsort(v.begin(), v.end());
//		std::sort(v.begin(), v.end());

		std::cout << std::is_sorted(v.begin(), v.end()) << std::endl;
	}

	return 0;
}
```

さて、速度比較です。
std::sortと比べてどのぐらい早いのか…。

要素数が32個の場合は、std::sortは挿入ソートを行います。

```text
std::sort
 0.000017s wall, 0.000000s user + 0.000000s system = 0.000000s CPU (n/a%)

bsort
 0.000042s wall, 0.000000s user + 0.000000s system = 0.000000s CPU (n/a%)
```

遅いですね。駄目ですね。

考えてみれば当然です。
実は挿入ソートって、比較数が最低という条件を満たしているんです。
つまり、このスーパーバブルソートは、挿入ソートをキューという仕組みを使って、
めんどくさく実装しただけ、ということになります。
kubeadm init の時に生成されたトークンの寿命が切れてしまった時の対処

TL;DR: `kubeadm init` 時に生成されたトークンが期限きれてしまった時、`kubeadm token create` で再生成できる、がそれだけだと csr リクエスト通らなくて、実は `kubeadm token create --groups 'system:bootstrappers:kubeadm:default-node-token'` が必要。

あとでちゃんと書く
文字列を任意の固定長で切り分けてみる


# 目的

えとー、base64の文字列に改行を入れたかったんです。
VSで開発するC#の話です。

まぁ`InsertLineBreaks`を指定すれば、76文字毎に改行コードを入れてくれる事は知ってますけど。
でも、どーしても80文字で改行したいんだよー

# まずは力技

```csharp
string text = "aaaabbbbccccddddeeee";

const int SIZE = 7;
text += new string(' ', (SIZE - text.Length % SIZE) % SIZE);
string[] lines = new string[text.Length / SIZE];
for(int i = 0; i < lines.Length; i++)
	lines[i] = text.Substring(i * SIZE, SIZE).TrimEnd();

foreach(string s in lines)
	Console.WriteLine("'{0}'", s);
```

結果はこんな感じで、無問題。

![image](https://qiita-image-store.s3.amazonaws.com/0/136132/5e4a7639-ca0d-ff97-e09e-c55dc0f294a9.png)

力技ではあるが、予め入力文字列の長さを調整してあるので、切り分けは若干シンプルになっております。

んー
でもなぁ、イマイチ美しくないんだよねー

# 正規表現って使えないのかなぁ？

お次はやっぱり正規表現。
真っ先に思いつくのは`Matches`ですね。
でも`MatchCollection`を受けて、`foreach`でくるくる回るんじゃ力技と大して変わらない。ここはやっぱり`Linq`でしょ。
えー、グーグル先生は物知りなんでー
…
[ほらやっぱりあった](https://qiita.com/tokishirazu/items/74f49bba971ad5fa1dcb)

```csharp
string text = "aaaabbbbccccddddeeee";

foreach(string s in Regex.Matches(text, @".{1,7}")
                                .Cast<Match>()
                                .Select(m => m.Value)
                                .ToArray())
	Console.WriteLine("'{0}'", s);
```

こんな感じだー
中々綺麗に纏まりました。

> ※結果は前と同じなので省略で～す

でも何かコスト高そうだなぁ…

# もう一歩踏み込む

そんなこんなで、正規表現確認してたら`Split`ってメソッドがあるじゃん。これなら`string[]`で返してくれるので`Matches`よりも良さげ。

んーんん…
でもさ、そんな都合の良い区切り文字なんて無いよー
<br/>
と云い乍も思い出した。
えーと確かここら辺に（ごそごそっ、と）…
あー、あったあった、[これだよ](https://abicky.net/2010/05/30/135112/)。

何も具体的な文字である必要はない。アンカーで充分って事だよね。
<br/>
取り敢えずは「肯定的後読み」かな？

```csharp
(?<=.{80})
```

とかでどうだろ？
任意の文字80桁の後ろにマッチする訳で…

![image](https://qiita-image-store.s3.amazonaws.com/0/136132/3e24671a-9586-677d-b701-8b34d2f8c812.png)

あれ？ダメだ。
うーーーんと、そっか
一文字ずつ進んでいくから一旦マッチすると、それ以降は一文字ずつマッチしてしまうんだ。

もう一回`msdn`をじっくり見てみましょうか。
あ、見っけ。

`\G`アンカーだ。前回一致した位置にマッチするからこれを組み合わせれば、必ず指定文字幅毎に一致する筈だ。

```csharp
(?<=\G.{80})
```

ばっちり！

と思ったら、問題が一つ。

![screen.png](https://qiita-image-store.s3.amazonaws.com/0/136132/6290b2d1-6534-25d5-f1a3-4a60fddaf2eb.png)

文字列長が丁度分割文字幅の倍数である時には最後に空文字が出てしまう…
まぁ、そうだよなぁ…
滅多にある事では無し、これで良しとするかなぁ…
<br/><br/>
いや、ダメだ！
諦めるんじゃないっ
[あらびき日記](https://abicky.net/2010/05/30/135112/)を読み返せ

と云う事で、読み返しました。
否定先読み利用して末尾のみをマッチ対象から外してやればいいんじゃね？

と云う事で以下。

```csharp
string text = "aaaabbbbccccddddeeee";

foreach(string s in Regex.Split(text, @"(?<=\G.{4})(?!$)"))
	Console.WriteLine("'{0}'", s);
```

![image](https://qiita-image-store.s3.amazonaws.com/0/136132/f2f2742d-1c6a-b542-b995-c35ab23a5f30.png)

素晴らしい

# おっといけねー

本来の目的を忘れておるぞ。
分割した文字列を配列で欲しければ此処までの話で良いんだが、改行コードで区切りたい時はどうするか。入手した配列を`Join`でくっつけても良いけど、配列にしてから改めてくっつけると云うのが如何にも遠回り。

此処までくれば`Replace`メソッド使って、アンカーを改行コードに置き換えれば良い、と云う事に自然と気が付く。

```csharp
string text = "aaaabbbbccccddddeeee";

Console.WriteLine(Regex.Replace(text, @"(?<=\G.{4})(?!$)", Environment.NewLine));
```

![image](https://qiita-image-store.s3.amazonaws.com/0/136132/fb7c3851-4592-62c6-cfeb-a9baf7cdadbc.png)

すんげーぞ
めちゃ簡潔になった…
<br/>
しかし、結果的にお馴染み`Replace`メソッドに落ち着いたけど、`Split`に気が付いたからこそ、此処に辿り着いた気がする。最初っからすんなり気が付ける様に精進しなくては、と思いました。
[Ruby] aws-sdk v3.0.1 で S3 にファイルアップロード

# 本題
`aws-sdk` を使ってS3にファイルアップロードする。
version 3.0 を使っている日本語記事が見つからなかったので書く。

## install
Gemfileに以下を追加
```gem 'aws-sdk'```
bundle install
```$ bundle install```

## How To Use
```ruby
require 'aws-sdk'
class Caws
  def initialize
    @bucket_name = 'bucketname'

    Aws.config.update({
        region: 'ap-northeast-1',
        credentials: Aws::Credentials.new('ACCESS-KEY', 'SECRET-KEY')
    })

    s3 = Aws::S3::Resource.new
    @bucket = s3.bucket(@bucket_name)
  end

  def send(s3_path,upd_path,file_name)
    o = @bucket.object(s3_path + '/' + file_name)
    o.upload_file(upd_path + '/' + file_name)
  end
end
```
ACCESS-KEY とか SECRET-KEY はここで取得できた。
https://console.aws.amazon.com/iam/home?#/security_credential

#### How to use `send`
- s3_path : s3 の指定したbucket上のpath
- upd_path : ローカルにあるファイルパス
- file_name : ファイルネーム

## Test
```ruby
class CawsTest < Test::Unit::TestCase

  def setup
    @aws = Caws.new
  end

  def test_upd
    @aws.send("s3/file/path","/local/file/path", "file.txt")
  end
end
```

## Reference
http://docs.aws.amazon.com/sdk-for-ruby/v3/api/index.html
ES2015のオブジェクトの分割代入

### オブジェクトの分割代入の基本的な動き

#### サンプル1

- とりあえずサンプル

```js
const user = { name: 'ozaki', age: 27 };
const { name, age } = user;
console.log(name); // ozaki
console.log(age); // 27
```
- ↑この処理は↓この処理と同じことをしている

```js
const user = { name: 'ozaki', age: 27 };
const name = user.name;
const age = user.age;
console.log(name); // ozaki
console.log(age); // 27
```

#### 何が起きているか

- ここが注目するところ

```js
const { name, age } = user;
```

- {}で囲った変数名には、同じ名前のプロパティの値が代入される
- つまりnameにはuser.nameがageにはuser.ageの値が入った
- 順序は関係なくて名前で紐付いているので

```js
const { age, name } = user;
```

- と書いてもnameにはuser.nameがageにはuser.ageは代入される


### メソッドの引数で活用する

#### サンプル2

- とりあえずサンプル

```js
const user = { name: 'ozaki', age: 27 };
const showUser = ({ name, age }) => {
  console.log(name);
  console.log(age);
}
showUser(user);
// ozaki
// 27
```

#### 何が起きているか

- 基本的には最初に書いたサンプル1と同じことが起きている
- showUserを呼び出す時に渡された`user`が`{ name, age }`に代入される
- 結果としてnameにはuser.nameがageにはuser.ageの値が入った
ちょっとずつ読むドメイン駆動設計 第ニ部 モデル駆動設計の構成要素 第五章 ソフトウェアで表現されたモデル8(値オブジェクト モデル・実装)

# 値オブジェクト モデル・実装

値オブジェクトについて、モデル・実装面で注意することは、"不変であること"１点ですね。

値オブジェクトが不変であることは概念的には、
> 値オブジェクトはいわゆる物なので、一度オブジェクトを作ったら変更しないのが原則。都道府県で言えば、「東京都」は「宮崎県」に変更できないということです。

と[前回](https://qiita.com/YasuhiroKimesawa/items/8d539d8ecdce2665bc20)確認したとおりですが、実装面では、変更の管理が単純である。という利点があるでしょう。

不変でない場合、メモリ上参照先が同じオブジェクトを複数作ってしまった場合、片方が変更された場合、元も変更されてしまいます。しばしば、それは意識しないところで不意にやられてしまうことがあります。
しかも、これってなかなか見つけづらいんですよね・・・

以下は、実装例です

```java:MailAddress.java
class MailAddress{
  final String value;

  MailAddress(String value){
    this.value = value;
  }

  MailAddress modify(String newValue){
    return new MailAddress(newValue)
  }

  int hashCode(){
    ...
  }

  boolean equals(Object other){
    ...
    return this.value.equals(other.value)
  }
}
```

equalsの実装は属性の値が一致していればtrueになるようにしています。メールアドレスの値が同じならば、当然同じであるはずですよね。
embulk の隠しコマンド embulk irb と embulk exec

embulk のプラグイン等のデバッグをしていて、 embulk 環境の JRuby 特有の条件や性質にぶち当たることがある。
そういう場合に、 embulk の世界でインタラクティブにデバッグできたら便利だな、と考えていた。

[探してみた所、どうやらそのような隠しコマンドが存在するようだ。](https://github.com/embulk/embulk/blob/5586462dbff15b2ef278ca96aaafe18bb91e2a53/embulk-cli/src/main/java/org/embulk/cli/EmbulkSubcommand.java#L8-L11)

勝手に隠しコマンドと呼んでみたものの、実はどこかに記述されているのかもしれない。
少なくとも 2017 年 10 月 4 日現在、 [Web ドキュメント](http://www.embulk.org/docs/) や [README](https://github.com/embulk/embulk/blob/master/README.md) や `embulk --help` には見つけられなかった。

この記事で解説してみる (誤った理解があるかもしれない)

# embulk irb

jirb (JRuby の [IRB](https://docs.ruby-lang.org/ja/latest/library/irb.html) ) に入る事ができる (インタラクティブシェルや REPL の類)

あとはいつも通り。たとえば

```shell-session
$ embulk irb
2017-10-04 23:49:33.706 +0900: Embulk v0.8.30
irb(main):001:0> p 'yay'
"yay"
=> "yay"
irb(main):004:0> 3.times {|i| print(i)}
012=> 3
```

当然、プラグインを require して使うこともできる。デバッグが捗る。

# embulk exec

`embulk exec` は `bundle exec` のように embulk 環境でシェルコマンドを実行できる。

たとえば、環境変数を表示できるコマンドである [env](https://en.wikipedia.org/wiki/Env) を実行すると

```shell-session
$ embulk exec env
GEM_HOME=...
JAVA_MAIN_CLASS_12912=...
RUBY=...
JAVA_ARCH=x86_64
GEM_PATH=
.
.
.
```

など、環境変数が得られる。

`embulk gem` でインストールしたパッケージに付属するコマンドも実行できるようになる。


# 2017 年 10 月 5 日 追記: 

どうやら廃止される可能性があるらしい。  ([hiroysato](https://qiita.com/hiroysato) さんから教えていただきました。ありがとうございます。)

<blockquote class="twitter-tweet" lang="ja"><p>こんにちは、こちらの機能ですが、現在EmbulkのJRubyの依存を減らす作業をしていて、v0.9で廃止されるかもとのことです。こちらに要望を書くと良いと思います。https://github.com/embulk/embulk/issues/631 … ※ JRubyのプラグインが使えなくなるという意味ではないです。</p>&mdash; hiroyuki sato (@hiroysato) <a href="https://twitter.com/hiroysato/status/915729797447245825">2017, 10月 5</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

まだ見つけたばかりだし un-JRuby-ing the boot process と呼んでいる改善によって JRuby のデバッグしにくさが発展的に解消されるのであれば、 `embulk irb` や `embulk exec` が使えなくても平気かなぁ？
Ethereumの基本事項　Solidityでの実装へむけて

#この記事について
ブロックチェーンの勉強している学生が、Ethereumを実装するための言語であるSolidityについて学んだことの備忘録です。

#Ethereumの構成要素
- account
- transaction
- Messages


それぞれ、以下のような特徴がある。

##account
Ethereumでは、あらゆる状態はアカウントと呼ばれるオブジェクトから作り上げられる。アドレスとアカウント間における値や情報の直接的やりとりで状態遷移を保持する。４つのフィールドを含む。

- nonce
- ether balance
- contract code
- storage


##transaction
- 受信者
- 送信者を特定する署名
- 送付されるetherの量
- オプショナルデータフィールド
- `STARTGAS`値
- `GASPRICE`値

EOAから送信されたメッセージを貯蔵する署名付きデータパッケージを参照するために使用される。

##Messages
- 送信者
- 受信者
- etherの量
- オプショナルデータフィールド
- `STARTGAS`値

contractにより生成され、外部では作動しない。



#コーディングするためのメモ


##Contract
classのようなもの。デプロイすると、アドレスが割り当てられる。継承することもできる。


##Library
delegatecallやJUMP命令が内部的に使用されている。
>internalがある→JUMP命令
internalがない→delegatecall命令

が実行される。

usingで型にライブラリ関数をバインドできる。そうすると、self的な使い方が可能になる。
><型の変数>.<関数>()　

で呼び出しができるようになる。

#参考文献
Solidityドキュメント https://solidity.readthedocs.io/en/develop/
Ethereum白書
 https://github.com/ethereum/wiki/wiki/%5BJapanese%5D-White-Paper#ethereum
RxSwift 一定間隔で1文字ずつStringを流し込む（入力する）

# TL;DR
Stringを1文字ずつ一定間隔で、UILabelやUITextViewに流し込みたい。
「1文字ずつ」、「一定間隔で」……、これはRxが得意そうなやつだ。典型的なストリームの問題だ。
そんなこんなで実装例がなかなか見つからなかったので、考えてみました。

できあがりはこちら↓
<img src="https://media.giphy.com/media/l1J9KXVAaBdpLeumk/giphy.gif">

# 実装例
下記の例では0.05秒間隔で１文字ずつ流し込んでいきます。

```swift
    @IBAction func didTapButton(_ sender: UIButton) {
        label.text = nil
        
        let lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        let text  = Observable.just(lorem)
        let timer = Observable<Int>.interval(0.05, scheduler: MainScheduler.instance)
        
        _ = Observable.combineLatest(timer, text)
            .takeWhile { (i, t)  in
                i < t.characters.count
            }
            .flatMapLatest { (i, t) -> Observable<String> in
                let characters = Array(t.characters)
                let character = characters[i]
                return Observable.just("\(character)")
            }
            .subscribe(onNext: { [weak self] (character) in
                let currentText = self?.label.text ?? ""
                self?.label.text = currentText + character
            })
    }
```

ポイントは`takeWhile`です。

`i`が文字数以上になると`completed`が呼ばれ、シーケンスがterminateされます。
試しに`subscribe { print($0) }`に変えてみると`completed`が呼ばれているのが確認できます。

```
next(L)
next(o)
next(r)
// ...
completed
```
reactv16のテストでWarning: React depends on requestAnimationFrameが出る場合

react v16はrequestAnimationFrameを要求しますが、jestが使っているjsdom環境だとポイフィルが必要が必要です。
まあ、一時的なハックで時間が解決すると思いますが。

```json
Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills
```

## jest

さて、素のjest環境だとjest.config.jsのsetupFileに以下を追加すればいいです。

```js
module.exports = {
  setupFiles: ['raf/polyfill'],
}
```

## create-react-app環境
create-react-app(CRA)だと、jestの設定をそのままいじれないので少しハックは必要です。


`src`以下に以下のような`setupTest.js`を配置します。
どうせ使うと思うので、enzymeの設定も乗せておきます。

```js
import raf from './tempPolyfills'
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })
```

同じ階層に`tempPolyfills.js`を容易します。

```js
const raf = (global.requestAnimationFrame = cb => {
  setTimeout(cb, 0)
})

export default raf
```

これでエラーが解消されるはずです。

## 関連
Reactやreduxのアプリケーションを高速に構築する記事をいくつかあげているのでよかったら確認してください。

[**さよならボイラープレート。s2sによる高速reduxアプリケーション構築**](https://qiita.com/akameco/items/e1489c6bbf3439ec6ca4)

![demo.gif (1072×586)](https://raw.githubusercontent.com/akameco/s2s-examples/master/media/demo.gif)


**s2s: reduxにおけるreducerのテスト。あなたがテストを書く必要はないかも知れない**
[https://qiita.com/akameco/items/66a2232df0e95e5bfe31](https://qiita.com/akameco/items/66a2232df0e95e5bfe31)

**flowtypeのactionの型付け。String Literal型とString型について**
https://qiita.com/akameco/items/e7021e22da4c9e14463a

**Flowtype+reduxにおけるreducerの正しい型付け**
https://qiita.com/akameco/items/fe7ba22c158a2593b077



なんかあればコメント欄またはtwitterまでどうぞ。


<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">s2sを使ったreducerのテストケースの生成。コードを書くとき、そこにテストはある <a href="https://t.co/FISlpWrpOe">https://t.co/FISlpWrpOe</a> <a href="https://t.co/8CNWHhOQwL">pic.twitter.com/8CNWHhOQwL</a></p>&mdash; 無職.js (@akameco) <a href="https://twitter.com/akameco/status/914804233395896320?ref_src=twsrc%5Etfw">October 2, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
PythonでC言語の単体テストを書く

C言語のテストをPythonのunittestを使って単体テストを書く方法についてです。動機は、コンパイル回数をできるだけ減らすことです。この方法を取ると、テストを書くときのコンパイルは不要になります(速度的なことや、戻り値が複雑な場合どうなるかは分かりませんが)。

まずC言語のコードは次のようなものとします。

```c
//main.c
#include<stdio.h>
int add(int a, int b);
struct Pair {
  int l;
  int r;
};
int
main(void) {
  printf("%d + %d = %d\n", 3, 4, add(3, 4));
  return (0);
}
int add(int a, int b) {
  return a + b;
}
struct Pair  make_pair(int l, int r) {
  struct Pair p;
  p.l = l;
  p.r = r;
  return p;
}
```

次にgdbから呼び出すpythonコードは次のようにします。

```py
#debug.py
import unittest

class Test(unittest.TestCase):
  def assertEqual_(self, a, expr):
    self.assertEqual(a, gdb.parse_and_eval(expr))
  def test_aaaa(self):
    self.assertEqual_(42, 'add(30, 12)')
  def test_bbb(self):
    self.assertEqual_(0, 'add(0, 0)')
  def test_ccc(self):
    p = gdb.parse_and_eval("make_pair(3, 4)")
    self.assertEqual("{l = 3, r = 4}", str(p))


gdb.execute('break main')
gdb.execute('run')
unittest.main()
```
C言語のコードをこのpythonコードでテストするには、次のようにします。

```bash
$ gcc -g3 main.c
$ gdb -q -x ./debug.py a.out
```

標準出力は次のようになります。これでPythonでC言語で書いた関数を再コンパイル無しでテストを追加、修正することが可能になります。

```
Reading symbols from a.out...done.
Breakpoint 1 at 0x804841c: file main.c, line 9.

Breakpoint 1, main () at main.c:9
9	  printf("%d + %d = %d\n", 3, 4, add(3, 4));
...
----------------------------------------------------------------------
Ran 3 tests in 0.003s

OK
```

冒頭にも書いたように、関数の戻り値が複雑な場合、特に構造体の取り扱いをもっと良くできないかと思います。C言語の方で、オブジェクトの内容を文字列に変換するような関数を用意するのが現実的かもしれません。

## バージョンについて

- Ubuntu 16.04 i386
- gcc 5.4.0
- GNU gdb (Ubuntu 7.11.1-0ubuntu1~16.5) 7.11.1
SRE本まとめ（9章 単純さ）

自分の理解を深めるためにまとめてみました。[8章](https://qiita.com/bassbone/items/2a908ac3889dd5a6bca0)の続きです。

## 9章 単純さ

ソフトウェアに関して退屈は美徳である。必要な複雑さと想定外の複雑さとの区別を考えることは重要である。ソースコードは常にメンテナンスし、使わなくなったロジックは躊躇せず削除すべき。（バージョン管理システムを信じて！）。「最終的に完璧なものが生まれるのは、追加するものがなくなったときではなく、取り除くものがなくなったときである」という言葉がある。APIにバージョンの概念を持たせることで既存のプログラムにすぐに影響を与えることなく改修することができる。リリースに関して言えば、複数の修正をまとめてリリースするよりも小分けにリリースするほうが不測の事態が発生した際の原因切り分けがしやすくなる。

（[10章](https://qiita.com/bassbone/items/96369d819000eb8ea01d)に続く）
Apacheとnginxのリバースプロキシ挙動差（バッファリング）

Apacheとnginxでは，リバースプロキシのバッファリングにまつわる挙動差があります．

# nginx

- デフォルトでリクエストはバッファリングされる．
- 転送先へのリクエストは，nginxがリクエストを受信し終えた後．
- ただし，nginx 1.7.11以降はproxy_request_bufferingオプションで無効化できる．

# Apache

- リクエストはバッファリングされない．
- 転送先へのリクエストは，Apacheのリクエスト受信途中から．

# バッファリングによる利点・欠点

## 利点

- 低速なクライアントの影響を受けない．
  - unicornのworkerがリクエスト受信待ちで占有… ということがなく，workerが効率良く捌けるようになる．
  - 転送先Webアプリケーションのセッション数(unicornのworker数)が限られる場合は効果的．

## 欠点

- メモリやディスクを消費する．
  - リクエストが数百MBを超えたり，塵も積もればの大量リクエストがある場合は，ディスクI/Oがボトルネックになり得ます．
  - client_body_buffer_sizeでメモリへのバッファサイズをチューニングできますが，消費はします．
- 転送先へのリクエスト送信がわずかに遅れる．
  - バッファリングなしで随時送信するよりは，わずかに遅くなります．わずかにですが．

----

せいぜい数百KBのアップロードだけど，低速なMVNO回線でしょっちゅう利用する（利用される）…
というWebアプリケーションなんかは，バッファリングの利点目当てに Debian+nginx+unicorn+Rails という構成をよくやっていました．

# 参考文献

- [Module ngx_http_proxy_module](http://nginx.org/en/docs/http/ngx_http_proxy_module.html)
- 過去に実験したデータ（どっかいった…）
日本の祝日を一覧化したcsv

# はじめに

時系列データの分析をする際に、ある日付が日本の祝日かどうかを調べたくなりました。
2010年はじめから2018年末までの祝日を一覧にし、csvにしたので共有します。

# csvファイル

GitHubに上げてあります。
https://github.com/takitsuba/yeah_meccha

# おわりに

わかる人は世代が近そう。
Fisheye shader

プラネタリウム映像を作成＆上映する機会があり、いくつか作って上映してきました。

[プラネタリウム映像をUnityで](https://www.slideshare.net/emesiwiysohnst/unity-80278604)

![tmtest_00883.png](https://qiita-image-store.s3.amazonaws.com/0/59911/811fe361-b49b-03c4-eb0b-4332e6a71369.png)

![IMG_4356.JPG](https://qiita-image-store.s3.amazonaws.com/0/59911/dca0d514-e8dc-4668-a030-2b624d1a677d.jpeg)

[サンプルムービー](https://youtu.be/dLhVmTXvJPg)をいくつか作って試した結果、[cubemapを使った360映像](https://qiita.com/ELIXIR/items/c71ee67eb259bfa7d2c7)でなくても、FoV90[deg]くらいのカメラでFishEye（魚眼レンズ）化したものでもそこそこいけそうな感じでしたので、Fisheyeシェーダーを用意しました。

```FisheyeShader.shader
Shader "Unlit/FisheyeShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Rate ("Distortion Rate", Range(0.55,0.7)) = 0.58
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
//		Cull Off ZWrite Off ZTest Always

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#pragma multi_compile _ IS_SQUARE
			#pragma multi_compile _ USE_MASK

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
				float rate : RATE;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			float _Rate;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				#ifndef IS_SQUARE
					o.rate = 1;
				#else
					o.rate = _ScreenParams.x/_ScreenParams.y;
				#endif
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				float2 coord = (i.uv-0.5);
				float dist = (distance(coord, 0));
				#ifdef USE_MASK
				#ifndef IS_SQUARE
				if(dist>0.5){ return fixed4(0,0,0,0);}
				#else
				float2 ckCoord = (0.5 - i.uv)*float2(i.rate,1);
				float ckDist = (distance(ckCoord, 0));
				if(ckDist>0.5){ return fixed4(0,0,0,0);}
				#endif
				#endif

				float ang = atan2(coord.y,coord.x);
				float r = tan(dist * UNITY_PI/2) / tan(_Rate * UNITY_PI);
				coord.x = cos(ang)*r*2;
				coord.y = sin(ang)*r*2;
				coord = max(min(0.5-coord,1),0);
				fixed4 col = tex2D(_MainTex, coord);
				return col;
			}
			ENDCG
		}
	}
}
```

カメラへの適用は、カメラにアタッチしたスクリプト内で

```
void OnRenderImage(RenderTexture src, RenderTexture dest){
  Graphics.Blit(src, dest, material);
}
```

のようにしています。

元画像
![元画像](https://qiita-image-store.s3.amazonaws.com/0/59911/ff11ac46-b6d5-e8b5-5a31-cf9f65e56009.png)

Fish eye
![Fish eye](https://qiita-image-store.s3.amazonaws.com/0/59911/cdd39165-109d-54f1-5826-e61837f43e7f.png)

３６０画像(dome master)
![３６０画像(dome master)](https://qiita-image-store.s3.amazonaws.com/0/59911/7e65cfa9-71d9-b032-6014-4442b07b3d88.png)
HTMLInputElement.value を監視する

teratailでこういう質問があって、

> yubinbango.js で、住所が取得できた瞬間をイベントで検知したいんですが、うまく行きません。
[JavaScript - yubinbago.js で住所取得を検知したい(94990)｜teratail](https://teratail.com/questions/94990)

要は、「他のライブラリによるフォームの値変更を検知したい」という話です。
　
イベントで拾えず、キー入力イベントのバブリングを拾って後から取るのもダメ。
もちろん、setTimeoutでタイミングをずらせばいいだけなんだけど、なんかスマートじゃない。
　
`MutationObserver`かな、と思ったけど、プロパティは変更されても属性の変化はないので、やはり拾えない。
　
　
　
で、`value`プロパティの`setter`を作ってフックする方法を考えました。

```js
Object.defineProperty(target, 'value',{
  get : function(){return value;},
  set : function(x){
    console.log(x);
    value = x;
  }
})
```

ただ、これだと、`value`プロパティが変更されても、フォームの内容に反映されませんでした。
　
　
　
ネイティブの`setter`に値を渡せばいいのかな、と思ったので探してみたところ、コンストラクタの`HTMLInputElement`の`prototype`にそれっぽいものが。
これを`Object.getOwnPropertyDescriptor`から呼び出してみると、どうやら上手く動作するようです（要確認）

```js
Object.defineProperty(target, 'value',{
  get : function(){return Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,'value').get.call(target)},
  set : function(x){
    console.log(x);
    Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ).set.call( target, x );
  }
})
```

なんちゃってデータバインディングとかに使えるかも。
Data Pipelineを使ってS3にDUMPしたDynamoDBテーブルをEMRを使って処理する方法


相当ニッチなことを書きます。

DynamoDBのデータをエクスポートするとData Pipelineが起動してS3へ１行１Jsonのデータが出力されます

```json:sample
{"id":"{"s":"00001"},"name":{"s":"鷺沢 文香"}}
```

みたいなのです。

通常は、Data Pipelineを使用して書き戻すので特に何か考える必要は無いのですが、コレを敢えてEMRを使用して書き戻す方法を書きます。
具体的には、Data Pipelineで何がされているかと言った流れです。

# Step1: JSONデータの取り込み
まず、HiveのテーブルにS3に保存されたJSONデータを取り込みます。

```sql:取り込み（マッピング）
CREATE EXTERNAL TABLE dynamodb_json(
 id    STRUCT<s:STRING>,
 name  STRUCT<s:STRING>
)
ROW FORMAT
SERDE 'org.apache.hive.hcatalog.data.JsonSerDe'
LOCATION 's3://<path to dynamodb data>';

```

このように外部テーブルをマッピングします。
この状態でqueryを発行すると・・・

```sql:query
SELECT id,name FROM dynamodb_json LIMIT 1;
```

```
{"s":"00001"}	{"s":"鷺沢 文香"}
```

こんな感じでマッピングされます。
値だけをちゃんと出力するには、

```sql:query
SELECT 
	id.s,
	name.s 
FROM dynamodb_json LIMIT 1;
```

という風にオブジェクトにアクセスすることで必要な値を取得することができます。
S3に書き出されたデータをHiveに取り込むことができました。

# Step2: DynamoDBテーブルとHDFSを紐づける

DynamoDBTable: my_idol
HiveTavle: my_idol

```sql:テーブルのマッピング
CREATE EXTERNAL TABLE IF NOT EXISTS my_idol (
  id              STRING,
  name            STRING
  )
STORED BY 'org.apache.hadoop.hive.dynamodb.DynamoDBStorageHandler'
TBLPROPERTIES (
"dynamodb.table.name" = "my_idol",
"dynamodb.column.mapping" = "id:id,name:name"
);
```

これで、EMRからqueryを発行することでDynamoDBに問い合わせを行うことが出来るようになりました。

```sql:sample
SELECT name FROM my_idol WHERE id='00001';
```

```:結果
鷺沢 文香
```

同名で作成したのでわかりにくいかもしれませんが、これはHiveの腹持ちテーブルに問い合わせを行うことで（そのテーブルの実態がDynamoDBなので）データを取得しています。

# Step3 DynamoDBの更新
S3からインポートしたデータを使ってDynamoDBのテーブルに更新をかけます

```sql:一括更新
SET hive.execution.engine=mr;
SET dynamodb.throughput.write.percent=1.0;

INSERT OVERWRITE TABLE my_idol
SELECT
  id.s,
  name.s
FROM dynamodb_json;
```

emrをデフォルトで起動するとtezが動くのですが、色々試した結果DynamoDBへの書き込みを行うときはmrのほうが体感で早かったのでこっちを指定しています。

あとは終わるまで待つだけ。
fswatchコマンドのincludeオプションはすべてをexcludeしてから使う

### やりたかったこと

- pythonスクリプトが更新されたら自動でunittestを走らせる

### 困ったこと

- fswatchの--includeオプションが予想どおりに動かないので.pyファイルの更新だけを対象にできない

### 解決方法

- fswatchの--includeは--excludeに対する例外という扱いなので、先にすべてをexcludeする必要がある
  - 参考: https://stackoverflow.com/questions/34713278/fswatch-to-watch-only-a-certain-file-extension

```
$ fswatch -e ".*" -i "¥¥.py$" . | xargs -I{} python -m unittest
```

（xargsに-Iを付けないと動かないけどその理由もよく分からない…）

fswatch 1.10.0にて確認。
ボリュームテスト

## テスト内容（非機能テスト）

稼働システムに**大容量データを与えても仕様通り動作することを確認**するテスト
**どれくらいのユーザーを想定しているか。またこの時間帯にこれくらいのアクセスがあるかなどのアウトプットの用意し**、使用するテストデータを作成する。

データ量によって、5xx系エラーが発生

1.**「500　Internal Server Error」：内部サーバーエラー** 
![FireShot Capture 4 - 500 Internal Server Error - 
http___shimada2012.tank.jp_tmp_login.php.png](https://qiita-image-store.s3.amazonaws.com/0/55160/3776cf55-df2d-9977-e80b-0321d77f3a54.png)
アクセスが集中している
サーバーのメモリが不足している
サーバーの設定やプログラムに問題

2.**「502　Bad Gateway」：サーバーが応答を拒否**
アクセスが集中している
サーバー側のスペック
ファイアウォールの設定
サーバー側のメンテナンス

3.**「503 Service Unavailable」：サービス利用不可**
サーバー負荷のため
アクセスが集中している

4.**「504 Gateway Timeout」：リクエストが正しく処理されずタイムアウト**
サーバーダウンが発生している
タイムアウトまでの設定時間が短い

※Javascriptであれば**何秒でtimeout**するのか。確認しておく。



まずは、**テストデータの作成**から着手する。
どの機能の**ボリュームテスト**がしたいのか。
テスト計画を立てる、サーバーのスペックやDBのスペックを考慮する。

また、仕様がわからないシステムに対しても、同様な手順で実施。
MaxLengthが決まっていない、いくらでもデータを追加可能であるUI。
アジャイル開発に多い課題でもあるので、**ボリュームテスト**は大事である。

### どんなテストケースが必要か（※例）
・入力件数のCSVダウンロードができること（例：1000件、1万件、10万件）
・入力件数のCSVアップロードができること（例：1000件、1万件、10万件）
・画像をたくさん並べた時に一覧に表示すること（例：1000件取り込んだ時にエラーが無く一覧画面で表示する）
・リンクをクリックした時に仕様記載されている画面遷移できること
・ボタンをクリックした時に仕様記載されている画面遷移できること
・ドラッグ・アンド・ドロップができること
・リロードを数回行っても動作に問題がないこと（例：500系のエラーが返ってこないこと）
・レスポンスが規定した時間内であること（例：3秒以内、5秒以内、10秒以内）
・権限の付与有り無しに関わらず、動作に問題がないこと（例：有りの場合は10秒だが無しの場合は3秒）

### 確認

・環境単位での確認。Staging環境とProduction環境で結果が同じである。
・どこまでのデータ量であれば問題ないのか。データの境界値確認も含む。
・現状処理のレスポンス。あまりにも遅いのであれば速度改善も。
・GoogleChromeデベロッパーツールで確認。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/55160/83e9f772-2109-c77b-ed09-198dd3ca88da.png)

.YSlowで確認する。

![確認.png](https://qiita-image-store.s3.amazonaws.com/0/55160/b5746153-e14d-3be0-8260-662c892807e1.png)



PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/55160/4f8666ae-7f95-5914-3426-b99f8ac12409.png)

New Relic Browser
https://newrelic.nissho-ele.co.jp/products/newrelic-browser
![ボリュームテスト.png](https://qiita-image-store.s3.amazonaws.com/0/55160/de6786a8-449b-376e-8127-7356869b0ac5.png)


### 準備
・テストデータ（100件単位、1000件単位、10000件単位）※提供システムによります。

### データの入れ込み
・ツールを使用するパターン
Seleniumで頑張る
・一括にDBに入れるパターン
https://photo-tea.com/p/aws-ec2-to-rds-csv/
前々処理５：サクサク使うSQL(クロス集計)

|項目|内容|補足|
|---|---|---|
|目標|ＳＱＬでサクサクとクロス集計する||
|背景|クロス集計用の前処理をＳＱＬで行いエクセルに渡したい||
|前提|エクセルでクロス集計の経験あり ||
|学習|SQL case 構文 ||

* ちょっと解説

データは、年齢、性別、身長、体重のように、項目が横にならんでいますが、クロス集計は、このうちひとつの項目を縦に値を展開して、集計（主に、数え上げ）しなおすものです。
貿易統計では、輸出入、月、国、ＨＳコード、数量、金額などの項目があります。今回のクロス集計では、輸出入を縦（輸出と輸入）に展開し、月別の項目数を数え上げてみます。

### case 構文を学ぶ
おなじみ　tmp.dbをあけて、下記のＳＱＬを実行してください。
今回、学習するのは、case という構文です。 
case 構文　は、下記にあるので見ればわかると思いますが、簡単に解説します。

case 対象の項目
when 条件 then 値
※ある条件に合致したら、値を返す
※繰り返すことができます。
else をつかってそれ以外の選択もできます。
最後に end 新規項目名

でおわり、項目を続ける場合には、,(カンマ）を忘れないようにしましょう。 

最初の case 構文は、輸出が、1, 輸入が 2 というのがわかりにくいので、輸出、輸入の文字列をわりあてるためです。1,2 でいいなら不要で、exp_imp をかわりに配置します。

集計関数のsum()の中に、case 構文を書くことも可能です。条件に該当するときは、1をたてて、集計するので、実際には、数え上げをしています。条件は、月が、01のときは、m01 という新規項目をたてています。データは、8月分までしかないので、８月でおわりにして、最後に、総数をならべています。

```
select 
case exp_imp 
when  1 then '輸出'
else  '輸入'
end export_import,
sum(case month when '01' then 1 else 0 end ) as m01,
sum(case month when '02' then 1 else 0 end ) as m02,
sum(case month when '03' then 1 else 0 end ) as m03,
sum(case month when '04' then 1 else 0 end ) as m04,
sum(case month when '05' then 1 else 0 end ) as m05,
sum(case month when '06' then 1 else 0 end ) as m06,
sum(case month when '07' then 1 else 0 end ) as m07,
sum(case month when '08' then 1 else 0 end ) as m08,
count(*) as total
from ym_latest
group by exp_imp
```
結果は、下記です。実際の作業では、エクセルにコピペして使うのが楽です。
項目は、export_import,m01 とかになっているので、エクセルにいってから、下記の表のように、追記してあげてください。

|輸出入|１月|２月|３月|４月|５月|６月|７月|８月|総数|
|---|---|---|---|---|---|---|---|---|---|
|輸出|62907|68583|71542|68844|67102|69662|68994|67632|545266|
|輸入|47694|47056|49600|46809|47823|48428|49042|49086|385538|

これは、数えあげているだけですが、金額(Value)を集計することも可能です。
sum(case month when '01' then 1 else 0 end )　の　１の部分を、Value に変えます。結構簡単ですね。やってみましょう。
[Survey] Kaggle - Carvana 10位解法まとめ

Kaggle - Carvana Image Masking Challenge[^1]の10位解法[^2]の調査記事です．

Title: LB 10th place 0.9971 solution
Name: David
Kaggle Discussion: https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40133

## 開発環境

- 4個のGTX1080 Ti
- Keras(Backend: Tensorflow)
- gigabyte AORUS GA-Z270X-Gaming 9
- 1600W必要
- 高音になるとスピードが遅くなるので，ウォータークーラを取り付ける必要があった．

## Models

### モデル1(背景検出)

- マスクの値を反転し背景を抽出する5層Up/DownのU-Netを構築
- 単一モデルでLB:0.9970.
- MEMO: なんで反転したら変わるの?5層Up/Downがパラメータとして良かっただけでは？

### モデル2(車の検出)

- 6層Up/DownのU-Net

### モデル3

- 画像を上下で分割して6層Up/DownのU-Netを学習．

## 後処理

- アンテナ領域をCannyで高精度に抽出．

## 備考

- 背景は全部で3種類なので，その情報を予測変数として追加すればさらに改善できたかも？？

## References

[^1]: Kaggle, [Carvana Image Masking Challenge](https://www.kaggle.com/c/carvana-image-masking-challenge), 2017.
[^2]: JandJ, [LB 11th(0.9971) solution overview](https://www.kaggle.com/c/carvana-image-masking-challenge/discussion/40126), 2017.
Tera Term利用時のセキュリティ警告画面について


TeraTermを利用して新しいsshサーバにアクセスすると下記のような確認画面が表示されることがあります。この画面の意味を調べたので紹介します。

　　　　　　　　　　　![セキュリティ警告.png](https://qiita-image-store.s3.amazonaws.com/0/45990/e3a744e7-8d8b-894d-725c-4257bc63ba3a.png)

#known hostsリストとは
画面内にある，"known hostsリスト"とは何でしょうか？

SSHには，接続先が正しいサーバであることを検証するための仕組みが備わっています。このときに利用されるのが"known hostsリスト"です。リストには照合するための情報として，そのサーバのホスト名（もしくはIPアドレス），暗号化方式，サーバの公開鍵が登録されています。Teratermはサーバとの通信を確立する際，サーバから返される情報と"known hostsリスト"にあるサーバ情報を照合させて正しいサーバであることを検証します。

#ホスト鍵指紋とrandomart
画面内にある"ホスト鍵指紋"とは，接続先となるサーバから返された公開鍵のハッシュ値です。TeraTermは，この値と"known hostsリスト"内の公開鍵の情報を比較し，一致しなかった場合にセキュリティ警告画面を表示します。また，画面下の四角枠にはrandomartが表示されています。これは，単なる数字の列であるホスト鍵指紋を視覚的にわかりやすくすることを目的としています。

#最後に
SSHは単に通信を暗号化するだけのプロトコルではなく，悪意のあるサーバがなりすましを行っていないかをチェックする機能を備えてます。なりすましが行われていた場合，暗号化しても通信の中身が覗かれてしまいます。セキュリティ警告が表示されたときは十分に注意しましょう。
Tornadoをスケジューラとして使ってマルチタスクっぽいのを実現するメモ

# TL;DR
Tornadoの`ioloop`を使うと非同期タイマもどきが作れるので，手軽にマルチタスクっぽいことが実現出来る．
多分`threading`を使うより手軽．

# なにがしたいか
一定周期に実行されるタスクを複数平行して走らせたい．

# やり方
tornadoの`IOLoop`クラスを使うと簡単に非同期ループが実現出来ます．
`IOLoop`はtornadoでプロセスごとに（多分）一つずつ生成されるイベントループで，いい感じに非同期処理をやってくれます．
`IOLoop`はプロセスにつき一つずつなので，ソース全体で使い回す必要があります．
`tornado.ioloop.IOLoop.current()`を呼ぶことで，今使うべき`IOLoop`クラスのインスタンスが帰って来るのでこれを使いましょう．
インスタンスに対して`add_timeout(deadline, callback)`で時間と関数を設定してあげると，時刻が`deadline`をすぎた時に，`callback`が実行されます．

# 例
```tornado_loop_test.py
# -*- coding: utf-8 -*-
import time
import tornado.ioloop


def loop1():
    PERIOD = 2
    ioloop = tornado.ioloop.IOLoop.current()
    ioloop.add_timeout(time.time() + PERIOD, loop1)
    print("loop1")
    # 実際の処理はこの辺に書く（その1）


def loop2():
    PERIOD = 0.5
    ioloop = tornado.ioloop.IOLoop.current()
    ioloop.add_timeout(time.time() + PERIOD, loop2)
    print("loop2")
    # 実際の処理はこの辺に書く（その2）

if __name__ == "__main__":
    loop1()
    loop2()
    tornado.ioloop.IOLoop.current().start()

    print("Ooops!")  # ←実行されない
```
ループを二つ並列に走らせる例です．
`loop1`は2秒ごと，`loop2`は0.5秒ごとに実行されるので実行結果は

```
loop1
loop2
loop2
loop2
loop2
loop1
loop2
loop2
loop2
loop2
(以下略
```
のように`loop1`が1回実行される間に，`loop2`が4回実行されています．
なお，一度`loop1()`と`loop2()`を呼ぶだけだと，`IOLoop`クラスに登録されるだけで実際にループが走り出さないので`tornado.ioloop.IOLoop.current().start()`を呼んでループをスタートさせる必要があります．
一度ループがスタートすると，それ以降の処理は実行されないため最後の行の`print("Ooops!")  # ←実行されない`はコメント通り実行されないようです．

要は，`add_timeout`にコールバック関数が登録さえ出来れば良いのでメンバ関数であろうと無かろうと簡単に並列化ができます．
加えてかなりシンプルなソースで並列化が実現できるのでお勧めです．
［HTML/CSS］Bootstrapを利用せずにレスポンシブデザインを導入する方法

# Bootstrapを利用せずにレスポンシブデザインを導入する方法
![responsivedesign.png](https://qiita-image-store.s3.amazonaws.com/0/199441/dec05e66-9d56-d389-17cb-8f14a6f9c2e2.png)


## 共有すること
・Bootstrapを利用しなくても、レスポンシブデザインを導入できること

## なぜレスポンシブデザインを導入するのか？
### ① ユーザーエクスペリエンスの向上
ユーザーの利用する端末の画面幅に応じて、要素の配置を変更することで情報が伝えやすくなる。

### ② メンテナンス性の向上
PC用・タブレット用・モバイル用にCSSを用意する必要がない。

## なぜBootstrapを利用しないのか
どんな仕組みで配置変更しているのか理解が深まらない。

## 具体的な方法
① headタグに下記のコードを導入

```HTML:HTML
<meta name="viewport" content="width=device-width">
```

② 端末に応じて、画面の最大値・最小値を設定

```CSS:CSS
@media screen and (min-width:__px) and (max-width:__px){

}
```

##コード例
### HTML
```HTML:sample.html
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <title>SAMPLE</title>
    <meta name="viewport" content="width=device-width">
　　　　　　　　<link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>


  </body>
</html>
```
 
### CSS
```CSS:sample.css
/*PC*/
@media screen and (min-width:961px){
/*ここにPC閲覧時に適用するCSSを入力*/
}


/*tablet*/
@media screen and (min-width:461px) and (max-width:960px){
/*ここにtablet閲覧時に適用するCSSを入力*/
}


/*smartphone*/
@media screen and (max-width:460px){
/*ここにsmartphone閲覧時に適用するCSSを入力*/
}
```
powershellでショートカットのリンク先変更

フォルダの変更になってますが、
ファイルサーバ以降などの時にも使えそうな気がしますが......

\$wsh=New-Object -ComObject wscript.shell
cd c:\Users\user\Desktop

サブフォルダも検索
\$fnames=dir -Recurse -Include *.lnk

foreach(\$fname in \$fnames){
\$sht=\$wsh.createshortcut(\$fname)
\$fnamefull=\$sht.fullname
\$link_name=\$sht.targetpath

リンク先を変更する
\$str=\$link_name.split("\")
\$str.length

if(\$str[1]="Users"){
\$str[1]="dell"
\$new_path=\$str -join "\"
\$sht=\$wsh.createshortcut(\$fnamefull)
\$sht.targetpath=\$new_path
$sht.save()
}else{
}
}
Jupyter(hub)のNotebookをユーザー自身で環境変数を変更して使ってもらうための設定

タイトルの通りのことをやる。特にJupyterhubでやりたいことが多いと思われる。
(https://github.com/jupyterhub/jupyterhub/issues/227
はぱっと見，それで具体的にどこをどう変えればいいのかが英語, Python弱にはわからなかったので)


tkf さんあざした。

<blockquote class="twitter-tweet" data-lang="en"><p lang="ja" dir="ltr">~/.jupyter/jupyter_notebook_config.py で os.environ 弄るのでは駄目なんですか? (jupyterhub だとこれが読み込まれるか試したこと無いですが</p>&mdash; tₖᶠ (@tkf) <a href="https://twitter.com/tkf/status/915505904807591936?ref_src=twsrc%5Etfw">October 4, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


所望のユーザーになって下記のfileを作る (`jupyter notebook --generate-config` としてもよい)
```
mkdir ~/.jupyter
nano ~/.jupyter/jupyter_notebook_config.py
```

下記を jupyter_notebook_confi.py に貼り付ける
下記では `LD_LIBRARY_PATH` と `PYTHONPATH` を設定している

```
import os
os.environ['LD_LIBRARY_PATH'] = "どっかのPATH"
os.environ['PYTHONPATH'] = "どっかのPYTHONPATH"
```

以上。