OmniAICreator/Qiita-1.07M huggingface dataset:
強化学習の基本 Qラーニングを直観的に理解するためのアニメーションによる可視化

経路探索問題を強化学習で解き、その過程を[アニメーションで可視化しました。](https://tmokmss.github.io/js_html5/qlearn/main.html)
↑↓で速度調節、Spaceで最速の学習、ドラッグ or タップで障害物の追加ができます。
これにより、強化学習で何をしているのか直観的に分かりやすくなりました。

## 問題設定
本アニメーションで可視化している問題の設定は、下記の通りです。

* 条件
    * $n\times n$のマスからなる離散的なフィールド
        * 固定の初期位置と目標位置(⭐)、障害物が配置されている
    * 障害物（🔴）は、踏んだら死ぬ。初期位置からやり直し
    * 自機(👾)は単位時間に8方向のいずれかへ1マス移動できる
        * 横移動と斜め移動のコストは同じ

* 得たい出力
    * 初期位置から目標位置までの、障害物を回避した最短経路

![問題設定](https://qiita-image-store.s3.amazonaws.com/0/127392/0d43c1f0-1c4b-cec5-0259-1b67baca35fc.png)

この問題を強化学習のフレームワークに落とし込み、Qラーニングで求解しています。
詳細は後述します。


## 各インジケータの意味
本可視化の見方を説明します。
前節で述べた問題をQラーニングで解く過程を可視化しています。
![各インジケータの意味](https://qiita-image-store.s3.amazonaws.com/0/127392/5c4bd696-192b-2e4a-8128-69dc5703c8a5.png)



## 詳細
上記の可視化で表現したかった数式などを説明します。

### 問題を強化学習のフレームワークに落とし込む
強化学習の用語を先に説明した経路探索問題に当てはめると、下記の対応となります：

* 状態 $s$ : 自機のいるマスの位置
* 行動 $a$ : 上下左右斜め8方向の内、進む方向
* 方策 $\pi(a|s)$ : あるマス目$s$において、どの方向$a$へ進むか = 進むべき経路を示す
* 報酬 $R(s, a)$ : あるマス目$s$において、ある方向$a$に移動した結果の評価
    * 障害物を踏んだ → -100 の報酬を与える
    * 目標位置に到達した → +50 の報酬を与える
    * それ以外 → -1 の報酬を与える

この設定で強化学習を行うと、問題の解を得ることができます。
本可視化では、Qラーニングを用いて解いています。

### 数式で見る
各マスに表示されている緑パックマンのようなものは、行動価値関数$Q(s,a)$の値の大きさを示します。
本問題においては、状態$s$はマス目の位置、行動$a$は8方向のどれかを示します。

行動価値関数$Q$とは、ある時刻において状態が$s$のとき行動$t$を取ったときに以後得られるリターンの期待値を表します（なるほどわからん）。
とにかく、$Q(s,a)$が最大となる$a$こそが、今後のリターンが一番大きいということで、$s$における最適の行動であると言って良いでしょう。

実際、最適な行動価値関数$Q^*(s,a)$が求まれば、最適方策$\pi^\*(a|s)$は直ちに

```math

\def\argmax{\mathop{\rm arg~max}\limits}

\pi^*(a|s)= 
  \left\{
    \begin{array}{l}
      1\quad \mathrm{if}\; a=\argmax_a Q^*(s,a) \\
      0\quad \mathrm{otherwise}
    \end{array}
  \right.
```

と求めることができます。
方策 $\pi(a|s)$ とは、状態$s$のときに行動$a$を取る確率を表すものなので、全ての$s$についてそれぞれ行動価値関数が最大となる行動$a$を常に（確率=1）取ることが最適な方策というわけです。

実際、本可視化における$Q(s,a)$を見れば、進むと死ぬ方向や目標から遠ざかる方向は$Q$が小さく（薄く）なり、一方最短経路に従う方向は$Q$が大きく（濃く）評価されていることが見て取れますね。

ではどうすれば最適な$Q$を得られるんだという話になりますが、その一つの方法として下式に示すQラーニングを利用できます。

```math
Q(s_t,a_t)+=\alpha[r+\gamma \max_a Q(s_{t+1},a)-Q(s_t,a_t)]
```

Qラーニングの解説記事はネットに沢山あるので、ここでは詳細を割愛することにします。
上式を実装してエピソードを重ねるうちに、$Q(s,a)$は最適な値へ収束していきます。
収束した後はただ最適経路をなぞるのみということは、もう見ていただけたでしょう。

この行動価値関数$Q$を学習していくというイメージを持っていれば、強化学習の話題がもう少しとっつきやすくなるはずです。
一般に多くの問題では$s$や$a$の空間が広大なので、今回のような$Q$のテーブルに頼った手法は使えません。
代わりに$Q$を連続な関数として扱い、その関数を近似します。その関数近似に深層ニューラルネットワークを用いたのがDQNです。
つまり、結局原理は同じなわけですね！


## まとめ
* 強化学習の一種であるQラーニングを用いて、経路探索問題を解いた
* 解く過程をアニメーションで可視化することで、仕組みが分かりやすくなった（はず！）
* ここで得られた強化学習のイメージは、古典的なQラーニングから割と最新のDQNにまで適用可能です

## 参考文献
* [UCLの講義資料](http://www0.cs.ucl.ac.uk/staff/d.silver/web/Teaching.html)
    * ゼロから説明されていて、分かりやすいです
    * Q学習に関連する話は第2回と第6回にあります
hyperappで使えるcss in js、「picostyle」

最近ReactのスタイリングをするときにStyled-componentを使うのにはまってるんですが、hyperappでも同じようにできたらいいなぁと思って探してみたらあったので紹介です。
## Picostyle
https://github.com/morishitter/picostyle
> Picostyle is a 0.4 KB CSS-in-JS library for use with frameworks that expose an h function.

Picostyleは0.4kbのCSS-in-JSのライブラリで、`h`関数を公開しているフレームワークと共に使うそうで、現在動作確認ができているのが、[hyperapp](https://github.com/hyperapp/hyperapp)と[picodom](https://github.com/picodom/picodom)の２つです。

## インストール
npmやyarn、cndからのインストールが可能です。

```
npm i --save picostyle
```

```
yarn add picostyle
```

```
<script src="https://unpkg.com/picostyle"></script>
```
scriptタグで読み込んだ場合、`window.picostyle`でアクセスできるようになるそうです。

## 使い方
picostyleは`h`関数を公開しているフレームワークと共に使われます。そして、`picostyle`関数に`h`関数をわたすと、その`h`関数と同様の振る舞いをする高階関数を返します。

```Javascript
import { h } from "some-framework"
import picostyle from "picostyle"

const style = picostyle(h)
```
この高階関数はタグ名または、スタイルの適用されていないコンポーネントを受け取り、スタイル（JSON)を受け取る関数を返します。

```Javascript
// Styled component from tag name
const Wrapper = style("div")({
  minHeight: "100vh",
  background: "#000",
})

// Styling an un-styled component
const Component = text => h("h1", {}, text)
const Text = style(Component)({
  color: "#fff",
})
```
もし、propsの値からスタイルを定義したい場合は、JSONのかわりに関数を渡すことができます。

```javascript
// Here we set the color of the button, based on the color prop
const Button = style("button")(props => ({
  color: props.color
}))
```

picostyleは受けとったJSON(または関数)を単純なCSSに変更し、ドキュメントの先頭のスタイルタグに埋め込みます。picostyleによるスタイル付けされたコンポーネントはユニークな識別子をクラス名として持っています。

そして、出力はInlineStyleではなくStyleSheetであるため、MediaQuery、擬似クラス、ネストした子要素などの複雑なスタイルを書けるみたいです。

## サンプル
http://sosukesuzuki.me/ 僕のgh-pagesですが、これはhyperappとpicostyleで作りました。
リポジトリは、https://github.com/sosukesuzuki/sosukesuzuki.github.io/ です。
（追記：2018.4.6、僕のgh-pagesは更新されHyperappを使ったものではなくなりました。）

## 感想
便利だけど、それこそStyled-componentsのようにCSSみたいに書けたらいいですね。
Rails tips: Railsでブラウザキャッシュを削除する

## Tips
遷移した画面へのブラウザバックでブラウザキャッシュを残さないための方法

## 方法
controllerに以下を記載する

```ruby
before_action :set_cache_buster

def set_cache_buster
  response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
  response.headers["Pragma"] = "no-cache"
  response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
end
```
nodejsでメール受信処理とpuppeteerを組み合わせる

目新しいことをしているわけではないんですがpuppeteerにメールを受け取る処理を組み合わせて
入力したメールアドレス宛に仮登録のメールが届くタイプのサイトの登録から退会までのフローのテストを自動化してます

# パッケージインストール
メールパースに必要なパッケージは
`inbox`
`iconv`
`mailparser`
の3つです

```shell
$ npm install inbox iconv mailparser
```

# 仮登録処理
```javascript
function preRegSite(email) {
    const puppeteer = require('puppeteer');
    puppeteer.launch({
        headless: false,
        slowMo: 50
    }).then(async browser => {
        // 新規タブ
        const page = await browser.newPage();
        
        // 仮登録ページへ移動
        await page.goto("https://sitedomain.com/regist/", {timeout: 120000, waitUntil: "domcontentloaded"});

        // 仮登録の処理諸々
        // 省略

        return ;
    });
}
```

# 本登録処理

```javascript
function regSite(reg_url) {
    const puppeteer = require('puppeteer');
    puppeteer.launch({
        headless: false,
        slowMo: 50
    }).then(async browser => {
        // 新規タブ
        const page = await browser.newPage();
        
        // 本登録ページへ移動
        await page.goto(reg_url, {timeout: 120000, waitUntil: "domcontentloaded"});
        
        // 本登録の処理諸々
        // 省略

        return ;
    });

}
```

# メールパース処理
```javascript
const inbox = require('inbox');
const simpleParser = require('mailparser').simpleParser;
const iconv = require('iconv');
const conv = new iconv.Iconv("ISO-2022-JP", "UTF-8");

const email = "emailsample@gmail.com";
const emailPw = "password1234";

var client = inbox.createConnection(false, 'imap.gmail.com', {
    secureConnection: true,
    auth: {
        user: email,
        pass: emailPw
    }
});

client.on('connect', function() {
    console.log('mail server connected');
    client.openMailbox('INBOX', function(error) {
        if (error) throw error;
    });
});

client.on("new", function(message) {
    var stream = client.createMessageStream(message.UID);
    var from = message.from.address
    simpleParser(stream)
        .then(mail => { 
            // 本文取得
            var body = conv.convert(mail.text).toString();
            // メールアドレスチェック
            if (from.match(/登録メールのメアドをマッチさせる正規表現/)) {
                // 本文チェック
                var match = body.match(/本登録URLを見つける正規表現/);
                if (match) {
                    // 目的のメール受け取ったらメール受信は止める
                    client.close();

                    // メール受け取った時にしたい処理
                    // 取得した本登録URLはmatch[0]で使う
                }
            }
        })
        .catch(err => {
            console.log(err);
        });
});
```

# 組み合わせる
「仮登録処理」「本登録処理」「メールパース処理」を組み合わせて

```javascript
preRegCard(); // 仮登録
client.connect(); // メール受け取ったら登録キック
```

と書いて
「メールパース処理」の`// メール受け取った時にしたい処理`の所に

```javascript
regSite(match[0]);
```
と入れると

仮登録処理が走ってメールを受け取って本登録URLを本文から抽出して
そのURLを本登録処理に渡して本登録が実行できる
といった感じです
PHPでくじ引き問題を解いてみた

## 問題
数字の書かれた紙がn枚袋の中に入っている。あなたは紙を1枚引き、数字を見たら紙を袋に戻す。4回引いて、紙に書かれていた数字の和がmであれば当たりである。紙を調べて、当たりになる組み合わせがあるか調べるプログラムを作成しなさい。

## 解答
くじを4回引く組み合わせをひたすら調べればいいだろう、ということでこんな感じに。

```php
<?php

$atari     = 10;
$kuji_list = [
    1,2,3,4,5,6
];

function delveKuji ($atari, $kuji_list) {
    $v = false;
    foreach ($kuji_list as $kuji_1) {
        foreach ($kuji_list as $kuji_2) {
            foreach ($kuji_list as $kuji_3) {
                foreach ($kuji_list as $kuji_4) {
                    if ($kuji_1 + $kuji_2 + $kuji_3 + $kuji_4 == $atari) {
                        echo sprintf('Atari!! %d + %d + %d + %d = %d',$kuji_1, $kuji_2, $kuji_3, $kuji_4, $atari);
                        $v = true;
                        break 4;
                    }
                }
            }
        }
    }
    if (!$v) {
        echo 'not found';
    }
}

delveKuji($atari, $kuji_list);

// Atari!! 1 + 1 + 2 + 6 = 10
```
当たりを見つけた時のフラグとか`break 4`とかちょっと気持ち悪い…。こういうのをさらっと格好良く書きたいですね。

## おまけ
実際にくじを引くプログラムはこんな感じ。

```php
<?php

$atari     = 10;
$kuji_list = [
    1,2,3,4,5,6
];

function playGame($atari, $kuji_list) {
    $sum = 0;
    for ($i=1; $i<=4; $i++) {
        if ($i != 1) {
            echo ' + ';    
        }
        $kuji_key = array_rand($kuji_list);
        echo $kuji_list[$kuji_key];
        $sum += $kuji_list[$kuji_key];
    }
    echo ' = '.$sum.PHP_EOL;
    if ($sum == $atari) {
        echo 'Atari!!';
    } else {
        echo 'Hazure....';
    }
}

playGame($atari, $kuji_list);

// 2 + 6 + 3 + 3 = 14
// Hazure....
```
Android でセンサーのエミュレートを自動化する

# tl;dr
- Android emulator の emulator Console を使用することで、任意のセンサーの値を読み取ったり書き込んだりできる
- emulator Console には telnet で接続する
- 標準入力にコマンドを指定することで、 telnet での操作は自動化できる
- 一連のコマンド操作をシェルスクリプトで記述しておけばセンサーのエミュレートを自動化できる

# 背景
会社で同僚がスマホの実機を振ったりしてセンサーを使ったアプリのデバッグを行っていたので、これを自動化できないものかと調べてみました。

# Android emulator
Android emulator では各種センサーの値をインタラクティブにエミュレートすることができます。
Android emulator の `Extended constrols` を開き、 `Virtual sensors` を開くと CG で描画された端末をぐりぐりと動かすことができます。

![emulator.gif](https://qiita-image-store.s3.amazonaws.com/0/138290/94f2a902-fd91-0634-00b7-273ed278f961.gif)

# emulator Console
Android emulator の操作はコマンドラインから行うことができます。

emulator Console を開くには、 Android emulator を起動した状態で次のコマンドを実行します。

```
$ telnet localhost 5554
```

`5554` はエミュレータのポート番号を指定します。エミュレータのポート番号は `adb devices` 等で調べることができます。

## auth コマンド

emulator Console で `help` または `?` と打つと、使用可能なコマンドが表示されます。
しかしこの状態ではまだ後述する `sensor` コマンドは利用できません。その前に `auth` コマンドで認証する必要があります。

emulator Console を起動した時に次のようなメッセージが表示されたはずです。

```
Android Console: Authentication required
Android Console: type 'auth <auth_token>' to authenticate
Android Console: you can find your <auth_token> in
'/Users/yourname/.emulator_console_auth_token'
```

`cat ~/.emulator_console_auth_token` などして内容を表示させ、その内容で `auth` コマンドを実行してください。

`OK` と表示されれば認証完了です。 `help` コマンドで使用できるコマンドを確認すると、 `sensor` などのコマンドが増えていることがわかります。

## sensor コマンド

いよいよ本題です。 `sensor` コマンドはその名の通り、各種センサの値を読み取ったり書き込んだりできます。
`help sensor` で `sensor` コマンドの使用方法を確認できます。

今回は指定した値をセンサーの値として使用するため、 `sensor set` コマンドを使用します。
`sensor set` コマンドは次のように使用します。

```
set <sensorname> <value-a>[:<value-b>[:<value-c>]]
```

`<sensorname>` にはセンサー名を指定します。これは `sensor status` コマンドで確認できます。

例えば次のように入力すると、加速度センサの Y 軸の値を `20` に指定できます。

```
sensor set acceleration 0:20:0
```

下の図のように端末を縦にした場合、加速度センサの平常時の値は `0:9.81:0` になります。

![portrait.png](https://qiita-image-store.s3.amazonaws.com/0/138290/f13c57a5-2ed4-b39c-ee32-cb4f20f30b8b.png)


# telnet でのコマンドの実行を自動化する

ここまでで Android emulator の emulator Console を使用して各種センサの値をエミュレートできるようになりました。

それではこれらの一連の作業を自動化してみましょう。

telnet でのコマンドの実行を自動化するには、以下のようにします。

```
$ (sleep 1; echo help; sleep 1) | telnet localhost 5554
```

これを実行すると、 emulator Console に接続し、1秒後に `help` コマンドが実行され、さらに1秒後に telnet が終了します。

はじめに `sleep 1` で1秒待つのは、 telnet の接続が完了するのを待つためです。

これだけで任意のコマンドを自動的に実行させられますが、予めコマンドを別ファイルで用意しておくと便利です。

次の内容で `cmds.sh` を作成してください。

```shell:cmds.sh
a=$(cat ~/.emulator_console_auth_token)
sleep 1
echo auth $a
echo sensor status
sleep 1
```

これを使用して telnet を制御するには次のように実行します。

```
$ sh ./cmds.sh | telnet localhost 5554
```

自動的に `auth` コマンドを実行し、 `sensor status` コマンドを実行できていることを確認できるはずです。

あとは `cmds.sh` を自分の好きなコマンドに変更するだけです。シェルスクリプトで作成できるため、一定時間待ったり、条件分岐させたり、繰り返し処理を実行したりが容易に実現できます。

# 参考
- [KMC Staff Blog:Androidのemulator consoleに簡単にコマンドを送る方法](http://blog.kmckk.com/archives/4091258.html)
- [シェルスクリプトでtelnet自動操作 - mozukumaの技術系メモ](http://d.hatena.ne.jp/mozukumamemo/20080613/1213314861)
- [Send Emulator Console Commands | Android Studio](https://developer.android.com/studio/run/emulator-console.html)
Jupyter Notebookのインストール

## はじめに
Jupyter NotebookをmacOSに導入した際の記録（手順メモ）です。

- macOS High Sierra
- Python3.6.4

## pipを更新、必要なパッケージをインストール
pipを最新の状態へ更新し、必要なパッケージをインストールします。

```bash
$ pip install --upgrade pip setuptools
$ pip install numpy scipy matplotlib Pillow ipython[all]
```

## Jupyter Notebookをインストールする
Jupyter Notebookをインストールします。

```bash
$ pip install jupyter
```

## 確認する
以下を実行し、ブラウザでJupyter Notebookが開けるか確認します。

```bash
$ jupyter notebook
```
自分の環境では、ターミナル上に表示されたurlを貼り付けないと、ページが表示されなかったが、何かやらないといけないことがあるのでしょうか。とりあえず、後日調査予定です。
ASP.NET MVC ビュー生成時にJavaScriptに値を受け渡す方法

ASP.NET MVCでビューを生成するとき、JavaScriptに初期化パラメータを受け渡したい場合があります。

値の受け渡しの方法は、
**1. 直接的に値を受け渡す方法**
**2. 間接的に値を受け渡す方法**
の２種類があります。

###1. 直接的に値を受け渡す方法

この方法は、ビュー(cshtml)にJavaScriptを併記している場合に有効です。
ビュー生成時にJavaScriptの変数の右肩を**Razor構文で置換**します。

###2. 間接的に値を受け渡す方法

Razor構文でJavaScriptの変数の右肩を置換する受け渡し方法は、
ビュー(cshtml)とJavaScript(js)を別ファイルで管理し、
ビューでJavaScriptを読み込んで利用する場合には使えません。

この場合、JavaScript(js)に受け渡したい値を**HTMLに埋め込み**、
JavaScript(js)で埋め込まれた値を読み込む方法を採ります。

**2-1. Inputタグを利用する**
HTMLへの埋め込みにInputタグのValueを利用し、Inputタグ自体は非表示(hidden)とする。

**2-2. ローカルストレージを利用する**
こういった方法もありかも？

```js
localStorage.setItem(key, strData);
var strData = localStorage.getItem(key);
```
Javascript:配列のディープコピーを返す関数を考えてみた

そういえば最近のJavascriptのことが全然わからないなと思い、個人的にちょっとひっかかってしまった問題をやってみました。

大概は浅いコピーで済むんですけど、たまにディープコピーが欲しいなっていうことがあります。それで作ってみました。

あんまりよくわかってないんですけど、ディープコピーって多分こんな流れだと見当をつけました。

+ もし、配列なら、配列 ~~をシャローコピーして~~ 各要素に再帰的にディープコピーをかける // mapで新しい配列が作られるのでシャローコピー(.slice()いれてました)不要でした。@hoo-chanありがとうございました。
+ 配列でなければ単純に(そのまま)返す

いろいろ試行錯誤してこんな感じになりました。

```Javascript:
// Arrayをディープコピーする関数
//clone = a => Array.isArray(a) ? a.slice().map(clone) : a  //.slice()不要だった
clone = a => Array.isArray(a) ? a.map(clone) : a

const a = [[[0,0],[0,0]],[[1,1],[1,1]]]
const b = clone(a)
b[1][1][1] = 2

//console.log(`a : ${a}\nb : ${b}`)
console.log(`a : ${JSON.stringify(a)}\nb : ${JSON.stringify(b)}`)
```

```Javascript:
// 結果:console.log(`a : ${a}\nb : ${b}`)の出力 //表示がフラットになって構造が不明
//a : 0,0,0,0,1,1,1,1
//b : 0,0,0,0,1,1,1,2

// 結果:console.log(`a : ${JSON.stringify(a)}\nb : ${JSON.stringify(b)}`)の出力
//   配列の構造まで表示(編集リクエスト@hoo-chanより)
a : [[[0,0],[0,0]],[[1,1],[1,1]]]
b : [[[0,0],[0,0]],[[1,1],[1,2]]]
```

わーいちゃんとコピーできてる!
意外とすっきりでした。

配列とプリミティブな要素限定なので厳密なものではないですが、使いどころがわかって使う分には十分だと思います。

実際書いてみて、新しい書き方がなんとなくわかってきました。
アローとか map とか const とか ${} とか、その他いろいろ。

おかしいよ、とか、もっといい方法があるよ、とかありましたらコメントおねがいします。
jQueryのanimate()でbackground-colorを変える

jQueryを書いていて、背景をアニメーションで変化させようと思ったらハマってしまったので
#そもそもanimate()とは
animate()とは独自のアニメーションを作成する関数です
`animate(params, [duration], [easing], [callback])`
paramsはstyle、durationにはアニメーションの時間、easingには変化方法、callbackにはアニメーション終了時に実行する関数のポインタを渡すことができます。

```javascript
$(".hoge").click(function(){
  $(this).animate({ 
    width: "50%",
    opacity: 0.5
  }, 1500, 'linear', func() );
});
```

こうするとhogeクラスがクリックされた時に、1500msかけてlinear（等速）でwidthを50%、opacityを0.5に変化させ、終了後にfunc()を呼び出すという形になります。

#animate()は数値型の値しか対応していない
私がなんでハマったかというと、animate()のparamsに指定するものは、数値型(100,50%,25pxとか)しか対応していないようで、background-colorの値である`#99ccff`といった指定はできないようになっています、ちゃんと[リファレンス](https://api.jquery.com/animate/)に書いてましたね…
ちなみにbackground-colorのようにハイフンが入っているものはbackgroundColorのようにキャメルケースで記述します。

```javascript
/* これはダメ */
$(".hoge").click(function(){
  $(this).animate({ 
    backgroundColor: "#99ccff"
  }, 1500, 'linear', func() );
});
```

#解決策
リファレンスにも書いてあるように[jQuery.Color](https://github.com/jquery/jquery-color)というプラグインを使えば解決するようですが、今回は[jQuery UI](https://jqueryui.com/)を使用しました。
これはjQuery公式のUI用のプラグインです、今回は[Color Animation](https://jqueryui.com/animate/)の機能を使います。
導入方法は簡単、[ここ](https://developers.google.com/speed/libraries/#jquery-ui)にアクセスして、jQuery UIのスニペットをコピーして貼り付けます。

```html
<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

</head>
```

普通のjQueryの後に読み込む点に注意してください、これだけでさっきのjQueryが動きます。
<br>
公式リファレンスはちゃんと読まないとダメですね…
pytestでデコレータを使いたい


|pytest|URL|
|:--|:--|
|xdistの-nオプションについて|https://qiita.com/cielavenir/items/3f3319f3fa153c16c703|
|デコレータの作り方|https://qiita.com/cielavenir/items/542f7eaa612c6bb9ed90|
|デコレータに引数を渡す|https://qiita.com/cielavenir/items/2c971ca4bc138c375d17|
|部分テストパラメータの値を使ってテストパラメータを生成する|https://qiita.com/cielavenir/items/ce328313a9f0f498cbcb|
|pytestのfixtureを別の箇所でライブラリとして読み込みたい<br>(当該環境にはpytestが存在しない可能性がある)|https://qiita.com/cielavenir/items/8144774a6ac2eca2e2ce|

例えばある計算の結果が要求を満たすかどうかを確認するテストを書きたいとする。そして、その確認方法は複数のテスト間で共通としよう。
計算結果を確認関数に渡したくなる。こういう場合にデコレータを使うことが出来る。

しかし、一般的なデコレータ作成方法だと、 `TypeError: test_foo() takes exactly 1 argument (0 given).` やら、 `ValueError: <function test_and at 0x10a534848> uses no argument 'a'` やらといったエラーが出てしまう。
これを回避するには、decoratorモジュールのdecorator関数を用いれば良い。
標準モジュールではないが、IPythonを導入する際に同時に導入されるので、導入済みの環境も多いのではと思う。

なお、Python3ではこのような制限はないことを付記しておきます。

- acknowledgement: https://stackoverflow.com/a/19614807


```py:test_deco.py
import pytest

def check_divtwo(func):
	if 0: # change to 1 to make Py2/3 compatible!
		import decorator
		def wrapper(func,*args,**kwargs):
			r=func(*args,**kwargs)
			assert r%2==0
		return decorator.decorator(wrapper,func)
	else:
		import functools
		@functools.wraps(func)
		def wrapper(*args,**kwargs):
			r=func(*args,**kwargs)
			assert r%2==0
		return wrapper

@check_divtwo
@pytest.mark.parametrize(('a','b'),[
	(1,2),
	(3,4),
])
def test_and(a,b):
	return a&b

@check_divtwo
@pytest.mark.parametrize('n',[
	2,
	6,
])
def test_leastbit(n):
	return -n&n
```

- この件に関する日本語の情報は私が調べた限りでは存在しないようです。。
[Concourse]03_概念の説明

# 目的

Concourseにおけるパイプラインを構成する要素について整理する。


# パイプラインの構成要素

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/acab12ee-ef65-5b4b-c4d8-2d52e49aafd4.png)

パイプラインはビルドプランによって定義される。

ビルドプランは、

- パイプライン(ビルドプラン)の構成要素
    - リソース
        - ジョブの入力・出力となるもの
        - e.g. gitリポジトリなど
    - ジョブ
        - リソースの入力・出力の単位
        - ステップを集約
    - ステップ
        - パイプライン処理の実体
        - リソースの入出力もステップに含まれる
        - 以下のようなことを行う
            - リソースからの入力を受け付けて処理をおこなう
            - 処理の結果をリソースに出力する

# パイプラインと構成要素をコードから見る

コードだと以下のような形になる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/581d7718-7c35-5347-78e3-6e7bad938b18.png)


ステップはget, put, taskなどをよく用いる。
具体的なステップの一覧は[Build Plans](https://concourse.ci/build-plans.html)参照

# パイプラインのイメージ例

パイプラインはジョブ間はリソースの入力(get),出力(put)を介して
接続できるので、以下のような形のパイプラインを組むことができる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/40692/18b0695e-2bef-cb5e-8dac-b96d94459f68.png)
aタグをPOSTにする

aタグで作ってたけどCreate、Update、DeleteだったのでCSRFのチェックを入れたくなった場合等が使いどころ。

# formに名前を付ける

ループで出す際はform_nameが重複しないように。

```html
<form name="form_name" method="POST" action="/">
    <!--CSRF-->
    <a href="javascript:form_name.submit()">POST</a>
</form>
```


# formにnameをつけるのが面倒な場合

html5ではhrefは無くても良い（指カーソルにはならない）

```html
<form method="POST" action="/">
    <!--CSRF-->
    <a href="javascript:void(0)" onclick="this.parentNode.submit()">POST</a>
</form>
```
ファイルバックアップのメモ

**出来る限りパーミッションを保持したままコピー**

```
cp -a folder_name new_folder_name
```

**パーミッションを維持して圧縮**

```
tar cvzfp folder_name.tar.gz folder_name
```

**パーミッションを維持して回答（root権限で実行）**

```
tar xvzfp directory_name.tar.gz
```

[【 cp 】 ファイルやディレクトリをコピーする | 日経 xTECH（クロステック）](http://tech.nikkeibp.co.jp/it/article/COLUMN/20060227/230734/)
[【Linux】 tarコマンドでパーミッション保持したまま圧縮/解凍する | なんとなく技術系メモブログ](http://blog.monoware.co.jp/archives/14)
Visual Studio Codeのワークスペースを色分けして見分けやすくする

普段、Visual Studio Codeのウィンドウを複数開きっぱなしにして、ウィンドウをちょくちょく切り替える使い方をしているのですが、以下の様に見分けがつきにくく、切り替えに手間取っていました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188748/4797fa83-4570-2dfe-c722-c7eb1a029971.png)

ワークスペース毎にカラーテーマを設定して見分けやすくもできますが、配色が全部変わるのも嫌だなあと。

そこで、配色の一部だけ変えることにしました。
Visual Studio Codeの設定画面を開いて、ワークスペースの設定のところに以下の形式で設定書きます。

```
{
  "workbench.colorCustomizations": {
      // ここに色を指定する。
  }
}
```

具体的なキー名は、以下のページに載っています。
https://code.visualstudio.com/docs/getstarted/theme-color-reference

今回は、アクティビティバー（左端のアイコンが並んでいる領域）の背景色をワークスペース毎に変えてみます。
この領域は、`activityBar.background`というキー名で色を指定できます。

```
{
  "workbench.colorCustomizations": {
      "activityBar.background": "#993333"
  }
}
```

上記の要領で、よく開くワークスペースに個別に色を指定したところ、以下の様に見分けやすくなりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/188748/5eb640fc-c6ba-3394-66da-45c24288e111.png)
nim ポインタについて

# 概要

* nimのポインタについて
* pointer, ptr, refとあるので調べてみた

## 検証

* pointer, ptr, refをそれぞれどんな時に使うのか
    * pointer アドレスを扱う型
    * ptr [型] [型]のアドレスを扱う型
        * reprとかで値まで出力してくれる
    * ref [型] [型]をnewするための型

みたいな考え方で良さそう
ref型はnewでメモリを確保するので、参照されなくなったら解放される。(GCされる)
アドレス自体をなんかしたい場合はptrとかpointerを使う。(この2つはGCされない)

pointerはどの型のポインタでも良く(Cで言うvoid*)、参照先を取りたい時は明示的にキャストしなければならない。

procの中で引数で渡した変数の値を変更したいときとかも、
var intとかして渡せば、out引数にできるので、わざわざポインタにして渡す必要とかはない。

```example.nim
proc foo(num: var int) =
  num = 100


foo(num)
echo num # 100

```


### 検証コード

```example.nim
var
  num: int = 300
  num_ptr_1: ptr int = num.addr
  num_ptr_2: pointer = num.addr
  num_ref: ref int


echo repr(num_ptr_1)

echo repr(num_ptr_2)

echo repr(cast[ptr int](num_ptr_2))

proc ref_test(num: ref int) =
  echo repr(num)


num_ref = new int
num_ref[] = 100
ref_test(num_ref)
```

### 出力

```
ref 0x10c40a1c8 --> 300

0x10c40a1c8

ref 0x10c40a1c8 --> 300

ref 0x10c4c8048 --> 100

```


## オブジェクトのポインタの挙動

* type構文でref型を定義することができる

```nim
type
  FooObj = object
    num: int
  Foo = ref FooObj
```

* let foo = new Foo などとするとfooはref Foo型になる（new時に確保したメモリの先頭アドレス）

```nim

type
  FooObj = object
    num: int
  Foo = ref FooObj


let foo = new Foo

echo repr(foo)
```

出力

```
ref 0x106d17048 --> [num = 0]
```

* newしたオブジェクトを代入するとシャローコピー（ポインタになってるので当たり前ではある）

```nim

type
  FooObj = object
    num: int
  Foo = ref FooObj


let foo = new Foo

echo repr(foo)

let fooPtr = foo

echo repr(fooPtr)
```

出力

```
ref 0x10062f048 --> [num = 0]

ref 0x10062f048 --> [num = 0]
```

* ref型をptrにしてみる

```nim

type
  FooObj = object
    num: int
  Foo = ref FooObj


let foo = new Foo

echo repr(foo)

let fooPtr = foo

echo repr(fooPtr)

let fooPtrR: ptr FooObj = cast[ptr FooObj](new FooObj)

echo repr(fooPtrR)
```

出力

```
ref 0x103aca048 --> [num = 0]

ref 0x103aca048 --> [num = 0]

ref 0x103aca060 --> [num = 0]
```

* 使うタイミングがあるかは謎
WSLとバッチファイルでコマンドラインからワンクリでバッテリープラン変更する


## WSLでシェルスクリプトでWindows操作
`wsl bash -c "notepad.exe hoge"`
のように，WSLを用いることでシェルスクリプトを用いてWindows側の操作を行うことができるようになりました．

これを用いてバッチファイルからWindowsのバッテリープランを変更してみたいと思います．
充電時は高パフォーマンス，そうでないときは省電力にする運用をしている人はいると思いますが，このようなバッチファイルを用意しておけばそれがワンクリックでできるようになります．


## 前提
- バッテリープランに「省電力」プランと「高パフォーマンス」プランが最低一つは存在すること
- WSLが既に使用可能
- ある程度シェルスクリプトの知識がある


# 省電力にするバッチファイル

```bat:save_battery.bat
wsl bash -c "powercfg.exe /S $(powercfg.exe /L | grep GUID | grep 省電力 | awk '{print $3}')"
```
## 「高パフォーマンス」と「省電力」をトグルするバッチファイル
```bat:toggle_battery.bat
wsl.exe bash -c "powercfg.exe /S $(powercfg.exe /L | grep GUID | grep -e 省電力 -e 高 | grep -v \* | awk '{print $3}')"
```

# 参考
### WSLからのexeファイル操作など
[Windwos 10のWSLを日常的に活用する：Windowsの補助としてLinuxコマンドを使うAdd Star](http://www.clear-code.com/blog/2017/12/4.html)

### コマンドラインからの電源操作
[コマンド ラインで Windows 7 の電源オプションを管理する](https://technet.microsoft.com/ja-jp/windows/win7_tips42.aspx)
【Android】Androidでのredis client作成 - set/get編

# 00. はじめに
[前回](https://qiita.com/entan05/items/d430fd0b196d31ed5f31)AndroidでのRedis操作でpublish/subscribeをかいたので、今回はset/getを書いていきます。

# 01. Android Projectへの追加
[前回を参照](https://qiita.com/entan05/items/d430fd0b196d31ed5f31#01-android-project%E3%81%B8%E3%81%AE%E8%BF%BD%E5%8A%A0)

# 02. set

```java
private void set(final String host, final int port, final String key, final String value) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                // Jedisオブジェクトを作成
                Jedis jedis = new Jedis(host, port);
                // set
                jedis.set(key, value);
                // 切断要求
                jedis.quit();
            } catch (Exception e) {
                // pass
            }
        }
    }).start();
}
```

setメソッドでkeyとvalueを指定するだけです。
UI Threadで通信処理が行えないことに注意すれば難しいことはありません。

# 03. get

```java
private void get(final String host, final int port, final String key) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                // Jedisオブジェクトを作成
                Jedis jedis = new Jedis(host, port);
                // get
                String value = jedis.get(key);
                // 切断要求
                jedis.quit();
            } catch (Exception e) {
                // pass
            }
        }
    }).start();
}
```

getメソッドにkeyを指定するだけです。
UIに結果を反映させる場合は、Handlerを利用しましょう。

# 04. keys

keyの一覧を取得したい場合があります（あるか？）。
その場合はkeysメソッドを使用します。

```java
private void keys(final String host, final int port, final String pattern) {
    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                Jedis jedis = new Jedis(host, port);
                Set<String> keys = jedis.keys(pattern);
                jedis.quit();
            } catch (Exception e) {
                // pass
            }
        }
    }).start();
}
```

# 05. サンプルアプリ
<img width=50% src="https://qiita-image-store.s3.amazonaws.com/0/235452/1c70876b-4003-7acf-2317-e4dae0693d3e.gif"/>

set/getに関してサンプルアプリを作成しました。
MainActivity.javaを参照ください。
（たぶん不要なファイルもコミットされているな...）
https://github.com/entan05/RedisSetGetSample

# 98. 参考
xxxxx

# 99. 更新履歴
|日付|内容|
|:--|:--|
|2018/03/01|投稿|
ReSubで_buildStateが呼ばれない

# [ReSub](https://github.com/Microsoft/ReSub)

以下はReadmeに乗ってるコードに適当にReactのライフサイクルメソッドを追加したものです。

```ts
import * as React from 'react';
import {ComponentBase} from 'resub';
import {somethingFn} from './something-fn';

import TodosStore = require('./TodosStore');

interface TodoListState {
  todos?: string[];
}

class TodoList extends ComponentBase<{}, TodoListState> {
  protected _buildState(props: {}, initialBuild: boolean): TodoListState {
    return {
      todos: TodosStore.getTodos()
    };
  }

  render() {
    return (
      <ul className="todos">{this.state.todos.map(todo => <li>{todo}</li>)}</ul>
    );
  }

  componentWillMount() {
    somethingFn();
  }
}
```

ですが、これでは駄目で、ライフサイクルメソッドを使う場合は、`super`を呼ぶ必要があります。

```diff
import * as React from 'react';
import {ComponentBase} from 'resub';
import {somethingFn} from './something-fn';

import TodosStore = require('./TodosStore');

interface TodoListState {
  todos?: string[];
}

class TodoList extends ComponentBase<{}, TodoListState> {
  protected _buildState(props: {}, initialBuild: boolean): TodoListState {
    return {
      todos: TodosStore.getTodos()
    };
  }

  render() {
    return (
      <ul className="todos">{this.state.todos.map(todo => <li>{todo}</li>)}</ul>
    );
  }

  componentWillMount() {
+   super.componentWillMount();
    somethingFn();
  }
}
```
[C] max()関数をいろいろ作る

# はじめに
C言語でいろいろなmax()関数を作ります．  

- キーワード
    - 条件演算子
    - 配列
    - 可変長引数
    - マクロ

# 普通に書いてみる
```C:main.c
#include <stdio.h>

int max1(int a, int b) {
    if (a > b)
        return a;
    else
        return b;
}

int main(void) {
    printf("%d\n", max1(10, 20));    // 出力は20
    return 0;
}
```
if文を使って値が大きい引数を返します．

# コードを短くする
```C:main.c
#include <stdio.h>

int max1(int a, int b) { return a > b ? a : b; }

int main(void) {
    printf("%d\n", max1(10, 20));    // 出力は20
    return 0;
}
```
条件演算子(三項演算子)を使うことで，max()関数のコードを6行から1行に短縮できました．

# 配列に対応する
```C:main.c
#include <stdio.h>

int max2(int len, int *nums) {
    int i, _max = nums[0];
    for (i = 1; i < len; i++) {
        if (nums[i] > _max)
            _max = nums[i];
    }
    return _max;
}

int main(void) {
    int a[] = {20, 40, 10, 30};
    printf("%d\n", max2(4, a));    // 出力は40
    return 0;
}
```
一つ目の引数に配列の長さ，二つ目の引数に配列のアドレスを渡すことで配列の最大値を返します．

# 可変長引数を使う
四つの変数```a```，```b```，```c```，```d```の最大値を求めたい場合では，```max1()```関数，```max2()```関数を次のように使います．

```C:max1()関数の利用
// 何らかの処理でa, b, c, dの値を取得
printf("%d\n", max1(a, max1(b, max1(c, d))));
```

```C:max2()関数の利用
int array[4];

// 何らかの処理でa, b, c, dの値を取得

array[0] = a;
array[1] = b;
array[2] = c;
array[3] = d;
printf("%d\n", max2(4, array));
```

どちらもいまいちですね．```max1()```関数では入れ子が多くなり見づらく，```max2()```関数では配列の生成が面倒です．そこで，可変長引数を利用した新しい```max3()```関数を作ってみます．


```C:main.c
#include <stdio.h>
#include <stdarg.h>

int max3(int len, ...) {
    int i, _max, num;
    va_list ap;
    va_start(ap, len);

    _max = va_arg(ap, int);
    for (i = 1; i < len; i++) {
        num = va_arg(ap, int);
        if (num > _max)
            _max = num;
    }
    va_end(ap);
    return _max;
}

int main(void) {
    int a = 20, b = 40, c = 10, d = 30;
    printf("%d\n", max3(4, a, b, c, d)); // 出力は40
    return 0;
}
```
\<stdarg.h>ヘッダで定義されている```va_list```型，```va_start```マクロ，```va_arg```マクロ，```va_end```マクロを利用することで，関数の引数の個数を可変にすることが出来ます．関数の呼び出し部分が次のように非常にシンプルになりました．

```C:max3()関数の利用
// 何らかの処理でa, b, c, dの値を取得
printf("%d\n", max3(4, a, b, c, d));
```

# マクロで書いてみる
```C:main.c
#include <stdio.h>
#define MAX(a, b) ((a) > (b) ? (a) : (b))

int main(void) {
    printf("%d\n", MAX(10, 20));    // 出力は20
    printf("%f\n", MAX(0.1, 0.2));  // 出力は0.2
    return 0;
}
```
型を指定しないため，```int```型や```double```型など複数の型に対応が出来ますが，副作用を伴う演算では意図しない動作をするため注意が必要です．

```C:意図しない動作
int a = 1;
printf("%d\n", MAX(2, ++a));    // 出力は3
```
これは```MAX(2, ++a)```がプリプロセッサによって```((2) > (++a) ? (2) : (++a))```に置換され，```++a```が二回評価されてしまうために起こる現象です．

# おわりに
3種類のmax()関数+1種類のマクロを作成しました．
用途によって使い分けることが大切です．
正規表現おじさんへの道

# 正規表現の使いどころを考えてみた
みなさん正規表現は書いていますか？ どんなときに書きますか？
サクラエディタのみなど、限られたツールしか使えない環境で、
正規表現はコードチェックツールとして効力を存分に発揮してくれます。

存分に好きなツールを使用できる場合には、役に立たない。
そんな正規表現を紹介させていただきます。
**※　正規表現おじさんを名乗れるほどのものはありません。**

# コードチェック正規表現集
## 行末にスペースがないか確認
```perl
/(?<=\S)(?![\r\n]) +?$/
```

## スペースのみの行を確認
```perl
/^(?![\r\n]) +?$/
```

## 小文字を含んでいる行はないか確認 \(Javaのコメント行は除く\)
```perl
/^(?!(?: *?)\/?\*).*?[a-z]/
```

## インデント数のチェック \(スペース4の場合\)
```perl
/^(?!(?:(?: {4})*?\S)|\n)/
```

# ファイル精査
## CSVのデータの中にダブルコーテーションが含まれていないか確認
```perl
/(?<!,)(?!^)"(?!,)(?!$)/
```
要素の重なりを判定する関数を作ってみた

# 概要
1. 要素の絶対座標と長さを計算し、JSONオブジェクトでまとめる。

2. 1.で生成した2つのJSONオブジェクトから以下の(1),(2)の条件を判定する。
    (1)要素1の右端より要素2の左端が左側にあり、要素1の左端より要素2の左端が右側にあれば、横方向に重なっている。
    (2)要素1の下端より要素2の上端が上側にあり、要素1の上端より要素2の上端が下側にあれば、縦方向に重なっている。

3. (1)と(2)を満たす場合は、trueを返す。そうでなければ、falseを返す。

# ソースコード

```javascript
/**
 * @param rect1
 * @param rect2
 * @return boolean
 */
function detectCollision(rect1, rect2) {
    if( ( ( rect1.xStart <= rect2.xStart && rect2.xStart <= rect1.xEnd ) ||
          ( rect1.xStart <= rect2.xEnd && rect2.xEnd <= rect1.xEnd ) ) &&
        ( ( rect1.yStart <= rect2.yStart && rect2.yStart <= rect1.yEnd ) ||
          ( rect1.yStart <= rect2.yEnd && rect2.yEnd <= rect1.yEnd ) )
    ) {
        return true;
    } else {
        return false;
    }
}
/**
 * @param e Element
 * @return Object
 */
function createBoundingClientRect(e) {
    var x = (window.pageXOffset !== undefined)
        ? window.pageXOffset
        : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    var y = (window.pageYOffset !== undefined)
        ? window.pageYOffset
        : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    var rect = e.getBoundingClientRect();
    var width = rect.width;
    var height = rect.height;
    var xStart = rect.left + x;
    var xEnd = xStart + width;
    var yStart = rect.top + y;
    var yEnd = yStart + height;
    return {
        rect: rect,
        width: width,
        height: height,
        xStart: xStart,
        xEnd: xEnd,
        yStart: yStart,
        yEnd: yEnd
    };
}
```

# 使い方

```javascript
var sun = document.querySelector('#sun');
var moon = document.querySelector('#moon');
var sunRect = createBoundingClientRect(sun);
var moonRect = createBoundingClientRect(moon);
if( detectCollision(sunRect, moonRect) ){
    alert('Eclipse!');
}
```

# 参考
[window.scrollY](https://developer.mozilla.org/ja/docs/Web/API/Window/scrollY)
[JavaScriptでスクロール量を取得する](https://qiita.com/sounisi5011/items/1a5a2410fce27ba6d8ae)

# 追記
2018/03/01 13:56 関数名を変更 checkOverlap -> detectCollision
コメントありがとうございました。Collisionが感覚的にGoodだったので、採用しました。
初EC2を立てるまで

[AWSをはじめる](https://qiita.com/hf7777hi/items/a96fcd3d132311cc9149)
でAWSアカウント初期設定したので、やっとEC2インスタンスが立てられるようになった。

そこでEC2を立てるまでの設定をします。

#VPC
作ってもいいのですが、今回はサクッと作りたいのでデフォルトので行きます。

#EC2作成
![スクリーンショット 2018-02-28 23.37.33.png](https://qiita-image-store.s3.amazonaws.com/0/86605/c29a404d-d36f-eba4-57bf-f7a3400e5d9b.png)


###AMI選択
Amazon Linux 2を選びます
![スクリーンショット 2018-02-28 23.38.20.png](https://qiita-image-store.s3.amazonaws.com/0/86605/1129b146-6ac6-55ad-cb56-da5620fe9e05.png)

###インスタンスタイプ選択
あくまで無料枠
![スクリーンショット 2018-02-28 23.39.33.png](https://qiita-image-store.s3.amazonaws.com/0/86605/c2963f92-d72d-bb2f-d3ab-1f1c058f6fd4.png)

###インスタンス詳細設定
削除保護は一応有効にしときます。
![スクリーンショット 2018-02-28 23.41.03.png](https://qiita-image-store.s3.amazonaws.com/0/86605/9079350b-bf68-d4ba-650e-ae80372f6819.png)

###ストレージの追加
無料枠MAXにしときましょう。
![スクリーンショット 2018-02-28 23.42.59.png](https://qiita-image-store.s3.amazonaws.com/0/86605/86b1a8dd-21d7-730b-e31b-5c0b8c4b8c87.png)

###タグの追加
タグは適当に。
![スクリーンショット 2018-02-28 23.43.56.png](https://qiita-image-store.s3.amazonaws.com/0/86605/dd8bb51b-3636-e417-c2c2-26a9cd190b58.png)

###セキュリティグループ
一旦はSSHだけ許可しておく(後でも変えれます)
![スクリーンショット 2018-02-28 23.45.54.png](https://qiita-image-store.s3.amazonaws.com/0/86605/114a9455-7e61-9732-c00e-0d07911e365b.png)

###作成
鍵は必ずDLしておく。
![スクリーンショット 2018-02-28 23.47.28.png](https://qiita-image-store.s3.amazonaws.com/0/86605/f17e5f25-36c5-01ff-a0af-889467e222f0.png)

作成完了
![スクリーンショット 2018-02-28 23.48.41.png](https://qiita-image-store.s3.amazonaws.com/0/86605/c3b74b71-e94c-cb16-0edc-fe764285b678.png)


###EIP設定
パブリックIPはEC2再起動とかすると変わるので、固定IPにしましょう。
※EIPを関連付けしていない状態にしていると料金が発生します。

新しいアドレスの割り当て
![スクリーンショット 2018-02-28 23.51.16.png](https://qiita-image-store.s3.amazonaws.com/0/86605/dfa395bb-f228-351c-6f62-cad5b4486417.png)

![スクリーンショット 2018-02-28 23.51.33.png](https://qiita-image-store.s3.amazonaws.com/0/86605/dc2bff80-809d-175f-72ca-379217a02c8c.png)

アドレスの関連付け
![スクリーンショット 2018-02-28 23.52.11.png](https://qiita-image-store.s3.amazonaws.com/0/86605/5a1cefcc-b653-fd73-fba3-f1654c731fca.png)

インスタンスを選択します。
![スクリーンショット 2018-02-28 23.52.37.png](https://qiita-image-store.s3.amazonaws.com/0/86605/33f36930-4fc2-ff4a-48df-f0cf9d646aa1.png)

これでOK

#EC2にログイン

```
$ ssh -i dev-slackbot.pem ec2-user@<パブリックIP>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0664 for 'dev-slackbot.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "dev-slackbot.pem": bad permissions
Permission denied (publickey,gssapi-keyex,gssapi-with-mic).
```
DLした鍵をそのままMacで使うと怒られます。

そこで、鍵のパーミッションを変更します。

```
$ chmod 0600 dev-slackbot.pem
$ ssh -i dev-slackbot.pem ec2-user@<パブリックIP>

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/
No packages needed for security; 15 packages available
Run "sudo yum update" to apply all updates.
```
これでログインできました。


次回はEC2の初期設定を行なっていきます。
エンジニアにもデザイナーにも進めたいAdobe XDのちょっとした小技集

# Adobe XDについて
プロトタイピングツールの中では特に直感的な操作で、画面遷移のモックアップまで爆速で作れるソフトです。デザイナー、エンジニア問わず使って楽しくなるツールですので、アプリケーションを作られている方は是非一度使ってみられる事をオススメします！


---
# 以下AdobeXDをより便利に使えるTIPS集です。

# ショートカット
便利なショートカット。Adobeのヘルプでほぼ全て確認できます。
https://helpx.adobe.com/jp/xd/help/keyboard-shortcuts.html


# いい感じのシャドウの描き方
XDのシャドウはスプレッドの項目がないので、表現力に少し乏しい印象を持ちます。
そこで、ぼかしを使った方法で簡単に素敵なシャドウが作れます。
左側が通常のシャドウ、右側が今回作るシャドウです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/9c6947e1-4de0-c49b-2055-5a3900892530.png)


## 1. シャドウを付けたいオブジェクトをコピーします。サイズを調整し、最背面に移動します。この時に塗られている色がシャドウの色になります。もちろん後から変更可能です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/02a9d30b-bc49-8789-f51f-50a58b60b56a.png)



## 2. blurの項目でObject Blur を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/c38e6dde-c8b0-434d-2afb-b3536b94a1a8.png)

 
 

## 3. 位置や色を調整して完成です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/6ee3105a-b526-c527-2d15-9544e7540307.png)


### ちなみに、CSSで書くとこんな感じです。
<p data-height="600" data-theme-id="light" data-slug-hash="vdvbbe" data-default-tab="result" data-user="kotar0" data-embed-version="2" data-pen-title="Floating shadow effect" class="codepen">See the Pen <a href="https://codepen.io/kotar0/pen/vdvbbe/">Floating shadow effect</a> by Kotato okuya (<a href="https://codepen.io/kotar0">@kotar0</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#XDでの正三角形の書き方

## 1.四角形を描く。大きさや位置はキリのよい場所で
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/68bd49aa-6cf6-8ad4-b161-0bc95c0a445c.png)

## 2. 補助線として2つの円を描く。左下と右下を中心として、半径が四角形の1辺となる円。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/b3df7624-aaf1-3066-2620-9f4ae24b2b52.png)

## 円の交点を作る。円の交点を囲む四角形を作成し、パスファインダフィルタで円の交点を作成する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/def8b551-d94a-0482-37f7-dde770821100.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/ae76d5f3-0a26-7ef3-c3ce-a51453a9759c.png)

## 四角形の左上もしくは右上の頂点を削除する。(四角形をダブルクリックすると頂点編集モードになる。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/d9b85e46-a66f-0c50-e4b0-c7b581e1ad27.png)

## 円の交点から始まる線を引く。交点の位置を記憶する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/58c27f9c-6c89-57a3-12fe-df996a809472.png)

## 今は三角形となった元四角形の頂点を、前の手順で記憶した頂点に合わせる。この時は手動で数値入力する。(頂点編集モードではうまくガイドが効かないため)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/98166135-70d3-f886-c30b-1dcbd82594fc.png)

## 出来上がり！　イラレからコピペの方が早いですね！ｗｗ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94948/a83b5b60-7514-a51c-c633-2cda84a32527.png)
ブリッジについて初心者がまとめる

## ブリッジとは？

MACアドレスをみてデータが次にどこに送るかを振り分けてくれる機器

のこと

### MACアドレスとは？

Media Access Control addressの略

機器固有のアドレスであり、同じものはメーカーのミスとかじゃない限り存在しない。

IPアドレスが、住所だとするならば、MACアドレスは名前に例えられることが多い
自己紹介

#自己紹介
- 現在，高専を卒業しており来年度から関東の国立大学に編入します
- 行きたい研究室がpythonを使用しているため，pythonの勉強をしたかった
- noteにまとめるのも古典的，またMarkdown記法を使用したかったため,Qiitaを採用
- 高専の研究室ではC++とC#を用いて研究を進めていた

---
<font color = "blue">
それにしてもMarkdown記法はすごいですね
HTMLよりも簡単
現在，春休みでpythonのついでに勉強します
</font>
---
それではまた次回．
#1 任意の回数分、文字列を連結する

# 初めてのプログラミング

### はじめに
---
コピペプログラマな自分は、一人で、自力でプログラミングをしたことがありません。
プログラマとして就職して1年が経過しようとしているタイミングなので、プログラムの質とかどうこうの前に、自分の頭でプログラムを組み立てることができるように、考える力をつけたいと思ってこのエントリを書いております。

### 今日やったこと
---
1. 指定した回数分、指定した文字列を連結する
2. 1で連結した文字列を表示する

### コード
---

```Javascript:script.js
var name = "Takeshi";
function takeshi(i) {
	for(var n=1; n<=i; n++) {
		var takeshiAttack = Array(n+1).join(name);
    console.log(takeshiAttack);
  }
}
takeshi(3);
```

### 分からなかったところ
---
文字列の連結方法が分からなかった。
始めは、```for```ループが回るたびに、
```takeshi += takeshi```をすれば良いのかもと思ったが、
それでは1回目と2回目は確かに指定回数分の文字連結が可能となるが
3回目以降になると、連結される文字の数が倍々になっていって、ダメだった。

変数を別で定義して、そこで```+```を使って文字列を連結しようとも思ったが（```takeshi+takeshi+takeshi```みたいな）どうやって指定回数と連結回数を結びつけるのかが分からなかったので断念。

### 次回やること
---
何をやれば良いのか分からないので、「プログラミング 問題」とかでググって出てきたものを次回やります。
機械学習まとめ

#自分なりに機械学習をまとめます．
---

```python:教師あり学習.py
import numpy as np
import matplotlib
import matplotlib.pyplot as plt
from sklearn.svm import LinearSVC
from sklearn.model_selection import train_test_split
from sklearn.datasets import make_classification

# データの生成
X, y = make_classification(n_samples=100, n_features=2,
                           n_redundant=0, random_state=42)
train_X, test_X, train_y, test_y = train_test_split(X, y, random_state=42)

# 以下にコードを記述してください
# モデルの構築


# train_Xとtrain_yを使ってモデルに学習させる
#ここに答えをかいてください

# test_Xとtest_yを用いたモデルの正解率を出力
#ここに答えを書いてください

# コードの編集はここまでです。
# 生成したデータをプロット
plt.scatter(X[:, 0], X[:, 1], c=y, marker=".",
            cmap=matplotlib.cm.get_cmap(name="bwr"), alpha=0.7)

# 学習して導出した識別境界線をプロット
Xi = np.linspace(-10, 10)
Y = -model.coef_[0][0] / model.coef_[0][1] * Xi - model.intercept_ / model.coef_[0][1]
plt.plot(Xi, Y)

# グラフのスケールを調整
plt.xlim(min(X[:, 0]) - 0.5, max(X[:, 0]) + 0.5)
plt.ylim(min(X[:, 1]) - 0.5, max(X[:, 1]) + 0.5)
plt.axes().set_aspect("equal", "datalim")
# グラフにタイトルを設定する
plt.title("classification data using LinearSVC")
# x軸、y軸それぞれに名前を設定する
plt.xlabel("x-axis")
plt.ylabel("y-axis")
plt.show()
```
Rを使用した自律神経系評価

#所要時間
おそらく長くても1時間ほど
おそらく心拍ゆらぎを用いたストレス計算のプログラムの中では最も簡単でかなり高速
精度は多少劣るかもしれないが遊ぶには十分

#前提条件
心拍数とストレスに相関があると言われていることを知っている。
自律神経評価について多少は調べている。
LF/HFが何かわかっている
たぶんLF/HFについて調べてからの方がいいと思います。


#概要
心拍ゆらぎにおける低周波と高周波の割合で自律神経評価をする。
おおまかに、低周波が多く、高周波が少ない時に大きなストレスを感じていることが知られている
低周波のゆらぎは交換神経の作用が働いている可能性があることを利用する。


#データについて
ArduinoやRaspberryPiと心拍センサを用いた計測
CSVファイル形式で保存することにする。(※今回は、"heart_rate_data.csv")
基本的には1行目に変数名、2行目からはデータとする。
データは1列目が時間t[s]、2列目がRRI(R波とR波の感覚)[s]

RRIは、拍動1回にかかる時間と考えれば良い。
つまり、心拍数≒60÷RRI

#データの読み込み

    data <- read.csv("~/heart_rate_data.csv",header = 1)
    time_math <- x$time
    as.vector(time_math)
    rri_math <- x$rri
    as.vector(rri_math)
簡単に言うとCSVファイルの読み込み→ベクトル化という流れ。
ベクトル化をしないと後の計算が不可能となるので要注意

>1行目の文字データを数字として読み込ませない工夫
    read.csv("ファイル名",header=1)　で、1行目を変数名として設定する
※ファイル名が日本語だと稀におかしな挙動をするので注意
※同様にディレクトリ名も日本語を使用するのはオススメしない

#ベクトル化
    as.vector(変数名)
を用いる。Rは変数の宣言がないのでしっかり型を指定してあげる。
たぶんこれをやらないとdaraframeかlistあたりになってしまう。


>とりあえずプロットする

    plot(time_math,rri_math)
    lines(time_math,rri_math)

plotで点を描画できる。linesでは線を描画できる。
2次元データの表示は非常に簡単。

#__データの補間__
自分で作ったセンサとかの場合は誤差がひどいけどデータが少ないよりはマシ
ということでかなりのデータのかさましを行う。
今回は2分程度の計測なので100個ほどのデータだがこれを2000個ほどに拡張する
(このあと、周波数領域の評価を行うので2のn乗個のデータにしておく)
実際、5分ほど計測した後処理をするのであればこの部分は省略できる。

    sp <- smooth.spline(time_math, rri_math) 
    i <- seq(0,125000, length=2048)
    pred <- predict(sp,i) 

>一応表示してみる

    lines(pred)

たぶんひどいデータになる。もし結果が怪しいのであれば補間の部分は省略した方が良いかもしれない。

Rでは補間も非常に簡単なのでデータ点数をかさ増しする場合には非常に便利。

__ここから重要__
#自己回帰モデルを使ってみる
自己回帰モデルとは
心拍間隔のデータは時系列なので自己回帰モデルを使う
スペクトル分析ができれば何でもいいけど・・・

FFTでは、周期関数ではないデータのスペクトル分解が出来ない
また、例え出来たとしてもフーリエ変換は比較的時間がかかる(Rでは)
これらを踏まえると
自己再帰モデルが良い(もちろんほかのやり方もある)

    spec <- spec.ar(pred$y, plot = FALSE)
    lf_data <- 0
    hf_data <- 0
    spec_lf <- spec$spec[50:150]    #0.05Hz to 0.15Hz ... LF
    spec_hf <- spec$spec[150:350]   #0.15Hz to 0.35Hz ...HF

今回は0.05-0.15HzをLF、0.15-0.35HzをHFとする。
今回のプログラムでは、spec[i]に、0.01*i[Hz]のスペクトル密度が格納される。
Rは[j:k]で、j番からk番までのデータを抜き出せる。


一応、パワースペクトル密度の公式と合わせるために2乗する。
ぶっちゃけ2乗しなくても"そこそこ"の評価はできる

    spec_lf <- spec_lf * spec_lf
    spec_hf <- spec_hf * spec_hf



#ベクトル計算
今回はRのいいところ、ベクトル計算を使っている
当たり前のようにspec_lf*spec_lfと書いているが、これをC言語風に書くと

    for(int i = 0;i < N; i++){
      spec_lf[i] = spec_lf[i]*spec_lf[i];
    }

こんな感じ。C言語風に解説すると、同じ番号の配列をそのままいっきに掛け算できる。
このベクトル計算が簡単にできるのがRのいいところ
ベクトル計算ができなかったら正直恐ろしいほど遅いプログラムになる

さらに素晴らしいことに、C言語風に言うと配列の要素を全部一気に足せる
とても簡単

    lf_data <- sum(spec_lf)  #sum spectrum
    hf_data <- sum(spec_hf)  #sum spectrum

#ストレス指標LHの計算
ストレス指標はLHとする。
LHは、全体における低周波(LF)と高周波(HF)の割合なので

    lh <- lf_data / hf_data  #Calculate LH Ratio

で計算できる。このLHが大きいとストレスが大きいと言われている。

一応いらない変数は毎回消しておく

    rm(hf_data,lf_data,spec_hf,spec_lf,spec,data)

最後にLHの値を表示する。

    lh
#おわりに
非常に簡単にストレスチェックができた
AR法を用いるとかなり高速化できる
ほかにもたくさんの自律神経評価のプログラムがあるがかなり高速化できているはず。
C++でクロスプラットフォームなシリアルポートのライブラリ作った

## 発端
　C++でシリアルポートのライブラリを探したがいいのがなかった。
　Siv3Dにあるがクロスプラットフォームに（まだ）対応してない。
　　→じゃあ自分で作ろう

## 成果物
　やったぜ
　[https://github.com/MurakamiShun/SerialPort](https://github.com/MurakamiShun/SerialPort)

## 使用例
```main.cpp
#include "Serial.hpp"
#include <vector>
#include <string>
#include <iostream>

using namespace std;

int main() {
	//デバイス一覧
	auto list = getSerialList();
	for (const auto& info : list) {
		cout << "device name:" << info.device_name() << endl;
		cout << "name:" << info.port() << "\n" << endl;
	}

	Serial serial;
	int port;
	cin >> port;
	//オープン
	if (!serial.open(list[port], 9600))
		return -1;
	//SerialInfo構造体にポート名とデバイス名が入っている
	SerialInfo info = serial.getInfo();
	cout << "open success" << endl;
	cout << "device name:" << info.device_name() << endl;
	cout << "name:" << info.port() << "\n" << endl;
	//以下ループ
	while (true) {
		auto v = serial.read();
		for (auto c : v) {
			cout << c;
		}
	}
	return 0;
}
```

## 使用するときの注意点
　ポート名とデバイスネームはWindwosとLinuxで違くなる。
　バッファが少ないから別のスレッドで処理するとかして、一杯にならないように。

## ちょっと説明
　デバイスネームを取得する際、Windowsではフレンドリーネームなるものを取得。
　Linuxでは現在主流のUSB-UART変換だった場合にUSBのPIDとPIDを取得して、変換アダプタのベンダー名と製品名をデバイスネームとした。
　Serial::Configにパリティやらボーレートを設定してsetConfigすれば設定の変更ができる。
　あとはヘッダファイル見てください（言葉で説明するより早いと思う）
[Nginx]どうしてもンギックスと呼びたい

# 記事を書いた経緯

当たり前のようにNginxをエンジンエックスと呼ばれる昨今でございますが、ちょっとまってください。

ンギックスにしか見えません、ンギンクス派もいると思いますが、良いと思います。
エンがないのは僕の財布だけにして欲しいです。

なぜNginxがエンジンエックスと呼ばれるか、背景を知ると好きになれると思いました。

## Nginxとは
Apacheと同じくwebサーバであり、同じくオープンソースソフトウェア
Apacheよりも、処理性能や並行性に焦点があてられて作られていて...
>[いま話題のWebサーバー「Nginx」とは？](http://luxy-inc.com/system-engineering/nginx_intro/) から引用させて頂きました
>>Nginxはもともと、C10K問題に対応するために生まれたWebサーバーです。

ふむ、先にapacheが世の中で使用されていて、その時から既にある問題を解決するために生まれたwebサーバという事で良さそうです、なかなかのヒーロー感。



### C10K問題
↓を参考にさせて頂きました
[C10K問題とnginx](http://sookibizviz.blog81.fc2.com/blog-entry-1055.html)

Nginxならではの話といえば、C10K問題でしょうか
サーバのスペックに問題に問題がなくとも、同時接続数が多くなりすぎるとサーバがパンクしてしまう問題。
プロセス番号が足りなくなる事で起こる現象だそうで、色々な方がインターネットに接続する時代になると１６ビットの世界は意外と狭いらしいです。


#### 読み方の起源

ごめんなさい！！！思ってたより速攻見つかりました。ありがとうございます。

> [Nginx ユーザ会 #0 に行ってきました！](https://heartbeats.jp/hbblog/2014/06/nginx-ug-jp-0.html) から引用させて頂きました
>> エンジンという言葉をどうしてもいれたかった。そこからいろいろ文字を組み合わせて、すでに使われていてダメなものを省いたり、菟用曲折して、Nginxになった。とのこと。
Nginxのロゴの2個目の「N」が鏡文字になっているのは、ロシア文字が由来。発音が「イ」で、イゴールのロシア表記の頭文字でもあるのだそうです。

ちなみに、ロゴのNが鏡文字になってたのも知りませんでした、本当すみません...（見ても３秒くらい探しました）

そして、こんな記事も見つけました。

> [サイオステクノロジーがNginxの商用版「NGINX Plus」の国内販売を発表](https://thinkit.co.jp/story/2014/06/18/5060) から引用させていただきました
>> イゴール氏は、Nginxという名前の由来と綴りについて、「権利関係も含めて、1年位いろいろ考えた。」と語る。なんらかのエンジンであるという意味を込めること、Nginを「エンジン」と読ませるアイデア。さらに、UNIXのように最後にXを加えてトレンドさを出したかったということから、この2つを足してNginxが生まれたと説明した。

つまり、Nginxをエンジンエックスと読むのは開発者の気持ちが込められていました。
Nginxという単語もアイデアから生まれた物でした、凄くすっきりしました。

# まとめ
Nginxをエンジンエックスと読むのは開発者の気持ちがありました、そして...

###初見でNginxをンギックスと読んでしまうのは、仕方のない事だった！！！！

別に間違いではなかったはず、きっとそうです。
でも、Nginxに込められた意味を知ったからには僕はエンジンエックスと呼ばせていただきます。

Nginxをンギっ...ってなってしまった人に、指を刺して「君は間違っている！！！」と指摘する前に、こーいう背景があった事を思い出すと良いですね！
Visual Studio CodeによるPythonのデバッグでinput()を扱う方法

#はじめに
Visual Studio CodeにおいてPython Extensionsインストール後の標準の状態ではデバッグ時にinput()による標準入力を受け取ることができません。
対応方法は公式ガイドに記載があるのですが、簡潔に書かれ過ぎていて分かりづらかったのでこちらにまとめました。

標準入力を受け付けるには、Pythonのデバッグコンソールをexternalに変更する必要があります。
プルダウンで簡単に切り替えられる方法があったのでその方法を追記しました。

#環境
macOS: High Sierra Version 10.13.3
VS Code: Version 1.20.1
Python Extension: Version 2018.1.0

#方法1: プルダウンで変更
1. 左ペインのデバッグアイコンを押す。
2. 一番上のプルダウンから「Python Terminal(external)」を選択する。

![Screen Shot 2018-03-02 at 11.34.32.png](https://qiita-image-store.s3.amazonaws.com/0/16664/027fe901-d581-a549-0b70-b86c0038c9a6.png)


これでデバッグ実行時に標準のTerminalが自動的に別窓で起動するので、そこで入力操作を行うことができます。

#方法2: デフォルト値を変更する
1. 左ペインのDebugボタンを押して歯車アイコン（Open launch.json）を押して、設定ファイルを表示させる。
2.  "name": "Python"セクションに「"console": "externalTerminal",」を追記する。


```json:launch.json
        {
            "name": "Python",
            "console": "externalTerminal",
```
3 .  この時、下の方にある「"Python: Terminal (integrated)"」や「"name": "Python: Terminal (external)"」セクションは編集不要なのでそのままにする。
4.  launch.jsonを保存すれば即座に反映される。VS Codeの再起動は不要。

手順は以上です。

#参考

公式ガイド
https://code.visualstudio.com/docs/python/debugging#_unable-to-capture-user-input-while-debugging

リリースノート
https://blogs.msdn.microsoft.com/ayatokura/2016/09/10/vsc1-5-1_releasenote/
 昔の方法の"externalConsole": true が不要となったことが記載されています。
読み取り専用ファイルを編集する

vimで読み取り専用ファイルを編集したいときのコマンド。

まず、ファイルを開くときは、

```
$ sudo vim <ファイル名>
```

と実行。

そして、vimで上書き保存するときは

```
:w !sudo tee %
```

と実行。

閉じるときは、

```
:q!
```
と実行。

これで完璧！