OmniAICreator/Qiita-1.07M huggingface dataset:
npm-scriptsを使ってみる

# npm scriptsとは
package.jsonの`script`に書いてある下記のようなやつ。
(下のは`npm init`の初期値)

```json
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}
```

# 事前準備
便利そうなやつがデフォルトで使えないから、先に入れておく。

```sh
# スクリプトの直列、並列実行をするために必要
npm install --save-dev npm-run-all
# ファイルの監視をして何かをするために必要
npm install --save-dev watch
# クロスプラットフォーム用(コピー,リムーブの代用)
npm install --save-dev cpx
npm install --save-dev rimraf
```

# 書けること
shell(bat),alias,scriptsに書いた自分以外のスクリプトが動かせる。
ターミナル(コマンドプロンプト)で動くものは基本的に動くと思われる。

# 使い方
基本的には`npm run {script名}`でOK。
以下、scriptの例と実行結果サンプル。

```json
"scripts": {
  "echo": "echo テスト"
}
```

```sh
$ npm run echo
> hoge@1.0.0 echo /test
> echo テスト

テスト
```

### おまけ
`yarn`の場合は`run`を省略できる。

```sh
$ yarn echo
> yarn run v1.17.3
> $ echo テスト
> テスト
> ✨  Done in 0.14s.

# 省略しなくても動く
$ yarn run echo
> yarn run v1.17.3
> $ echo テスト
> テスト
> ✨  Done in 0.15s.
```

## 予約語
基本的には上記使い方で問題ないが、4種類の予約後が用意されている。
`start`,`stop`,`restart`,`test`の4つが予約語となっており、`npm start`のようにrunを書かなくても実行できる。

```json
  "scripts": {
    "start": "echo run省略"
  }
```
```sh
$ npm start
> hoge@1.0.0 start
> echo run省略

run省略
```

## クラスプラットフォーム向け
scriptはシェルなり、ターミナルコマンドなりを使うことができる。
`package.json`に書くことはできるが当然ウインドウズでは動かないので、そこを解消する。
下記jsonのうち、`cpx`はコピーコマンドの代替。
`rimraf`は`rm -rf`の代替となる。
※実行結果は元のコマンドと同じなので省略。

```json
  "scripts": {
    "copy": "cpx ./text.txt ./text2.txt",
    "clean": "rimraf ./dist"
  }
```

## 直列実行
2つのscriptsを直列実行したいときは、
`run-s {コマンド1} {コマンド2}`でコマンド1の結果を待ってコマンド2を実行できる。
例えばビルドして結果をどこかにコピーしたいとき。
以下のようなスクリプトを用意しておくと救われる。
(例はAngular-cli利用した時のもの)

```json
"script": {
    "all": "run-s build copy"
    , "build": "ng build"
    , "copy": "cpx ./dist/* ../server/"
}
```

## 並列実行
2つの複数のスクリプトを走らせたいときは、
`run-p {コマンド1} {コマンド2}`でコマンド1と2を同時に実行できる。
パッと用途が思いつかなかった。下記例だと、2種類のビルドを同時に実行している。

```json
"script": {
    "parallel": "run-p build:tsc build:angular"
    , "build:tsc": "tsc test.ts"
    , "build:angular": "ng build"
}
```

## 監視
ファイルの変更検知して自動でビルドしたいときは、
`npm run watch {コマンド} {監視対象}`で監視対象の変更を検知してコマンドを実行できる。
使い方としては、開発中にホットデプロイのようなことをしたい場合。
ローカルで開発中にいちいちビルドと再起動を行わなくて済むので便利。
下記例はビルドからサーバにファイルを配置、サーバを起動ということをしている。
※フォルダ構成やファイル名は適当に記述

```json
"script": {
    "watch": "watch \"npm run start:app\" ./src",
    "start:app": "run-s build boot:server",
    "boot:server": "nodemon ./app.js",
    "build": "run-s build:app copy",
    "build:app": "ng build",
    "copy": "cpx ./dist ../server/"
}
```

## Scriptに引数を渡す
スクリプトを書いた際に、動的に変えたい部分もあると思う。
スクリプトに引数を渡すには`npm run スクリプト名 -- 引数`とすれば良い。
ただし、渡した引数は後ろにくっつくので途中に埋め込みたいとかは無理(なはず)。

```json
"scripts": {
  "test-touch": "touch"
}
```
```sh
$ npm run test-touch -- hoge.txt
> touch "hoge.txt"
> hoge.txtが作成される
```

### おまけ
`yarn`の場合`--`をつけなくても引数を渡せる。
他はnpmのときと同じ。

```sh
$ yarn test-touch hoge.txt
> 結果は同じなので省略
```

# まとめ
以上npm-scriptの簡単な説明でした。
nodeを使うアプリであれば、おそらく`package.json`や`npm`はあると思うのでとっかりとしては始めやすい方だと思います。
タスクランナーとして使ってる方もいるみたいなので是非使ってみてはいかがでしょうか。

# 参考サイト
[公式](https://docs.npmjs.com/misc/scripts)
StanとRでベイズ統計モデリング(アヒル本)をPythonにしてみる - Chapter 4 練習問題

[実行環境](https://qiita.com/shngt/items/ce6f2c3ef348cd80f432)

### インポート
```python
import pystan
import matplotlib.pyplot as plt
%matplotlib inline
```

### データの準備
```python
%load_ext rpy2.ipython
```
```python
%%R
set.seed(123)
N1 <- 30
N2 <- 20
Y1 <- rnorm(n=N1, mean=0, sd=5)
Y2 <- rnorm(n=N2, mean=1, sd=4)
```
```python
from rpy2.robjects import r
N1 = 30
N2 = 20
Y1 = r.get('Y1')
Y2 = r.get('Y2')
```

# (1)
```python
plt.hist([Y1, Y2], density=True, label=['Y1', 'Y2'])
plt.legend()
plt.show()
```
![chap4ex1.png](https://qiita-image-store.s3.amazonaws.com/0/103085/f8eb445e-8940-cb9f-082d-e67afbed3c95.png)

# (4)
```python
data = dict(N1=N1, N2=N2, Y1=Y1, Y2=Y2)
fit = pystan.stan('./stan/model4ex1.stan', data=data, seed=1234)
ms = fit.extract()
prob = (ms['mu1'] < ms['mu2']).mean()
print(prob)
```
> 0.9305

# (5)
```python
data = dict(N1=N1, N2=N2, Y1=Y1, Y2=Y2)
fit = pystan.stan('./stan/model4ex2.stan', data=data, seed=1234)
ms = fit.extract()
prob = (ms['mu1'] < ms['mu2']).mean()
print(prob)
```
> 0.935
Docker for Windows　セットアップからhello-world実行まで

## 検証した環境は下記の通り
windows 10 Pro
64ビット

## Docker for Windowsをダウンロードしてインストール
- 適当にググってインストールする。特に特殊なことは無かった。
- 下記参考にしたサイト
<br>http://www.atmarkit.co.jp/ait/articles/1609/01/news053.html
 
## hello-world 実行前に
- 下記サイトを参考に、Hyper-Vマネージャからネットワークアダプタを追加
<br>https://qiita.com/noobar/items/c7c1e7e290102a3230ff

## docker run hello-world → 失敗
<pre>>docker run hello-world
Unable to find image 'hello-world:latest' locally
docker: Error response from daemon: Get https://registry-1.docker.io/v2/library/hello-world/manifests/latest: unauthorized: incorrect username or password.
See 'docker run --help'.
</pre>

## docker pull hello-world → 失敗
<pre>
>docker pull hello-world
Using default tag: latest
Warning: failed to get default registry endpoint from daemon (Error response from daemon: An invalid argument was supplied.). Using system default: https://index.docker.io/v1/
Error response from daemon: An invalid argument was supplied.
</pre>

## dockerの設定をしてみた
- 下記を参考に
<br>https://stackoverflow.com/questions/43058226/docker-warning-failed-to-get-default-registry-endpoint-from-daemon
<br>タスクトレイのdockerアイコン右クリック－setting
<br>の画面で、赤線のチェックボックスをチェックする
![docker1.png](https://qiita-image-store.s3.amazonaws.com/0/281492/f49e3ee1-59c2-c96a-b408-a16b9a89c939.png)
- dockerをrestart

## 認証もしておこう
- 下記を参考
<br>http://earu.hatenablog.com/entry/2018/03/12/015022
<pre>
>docker login
Authenticating with existing credentials...
Stored credentials invalid or expired
Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one.
Username (xxxx@xxxx): xxxxxx  ← メールアドレスではない　ユーザID
Password:　　　　　　　　　　　 ← 文字を入力してもカーソルが動かない コピペできるのか不明
Login Succeeded
</pre>

## 再度 docker run hello-world → <font color=red>やっと成功！！</font>
<pre>
>docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
9db2ca6ccae0: Pull complete
Digest: sha256:4b8ff392a12ed9ea17784bd3c9a8b1fa3299cac44aca35a85c90c5e3c7afacdc
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/
</pre>
VSCodeで「PATH上でランタイムnodeを見つけることができませんでした」と表示される対処方法

<img width="419" alt="スクリーンショット 2018-08-16 21.07.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/84307/a55574e4-bf69-69de-eece-9998e5187af4.png">

これは、実行するために必要なnodeのコマンドがわからないよーというエラーです。
ですので、明示的に指定して上げる必要があります。

## nodeコマンドのパスの調べ方
`whichコマンド` で調べられます。

```lang:terminal
$ which node
/Users/furusin/.nodebrew/current/bin/node
```

私の場合はこのように表示されました。
この出力結果を `launch.json` に次のように追記してあげます。

```json:launch.json
"runtimeExecutable": "/Users/furusin/.nodebrew/current/bin/node",
```

これでnodeのPATHが通るようになります。
Windows ServerのDHCPで、拒否フィルタを自動で設定する

# 概要

社内LANに不正接続してくるPCを検知、通知するスクリプトを書いてみた。
[自作スクリプトでLAN内に不正接続する端末がないか監視する](https://qiita.com/330k/items/44a758639bc7b9948e1f)ではLinuxマシン上からARPを監視したが、今回はWindows Server上でDHCPを監視するものを作ってみた。

# 環境

* Active DirectoryのドメインコントローラがDHCPサーバを兼ねる
* DHCPサーバ2台は、2008R2 + 2012R2で、フェールオーバー機能は使っていない
* DHCPのリース領域は`192.168.10.0/24`

# スクリプト

以下のPowerShellスクリプトをタスクスケジューラで5分毎に実行する。

環境に応じてADドメイン名、DHCPサーバ名、DHCPスコープ、メールアドレス等を変更。

~~~powershell
$dhcpservers = @("(DHCPサーバ1)", "(DHCPサーバ2)")

foreach($s in $dhcpservers){
    $illegals = Get-DhcpServerv4Lease 192.168.10.0 -ComputerName $s | Where-Object { $_.HostName -inotlike "*.(ADドメイン名)" }

    if(($illegals | Measure-Object).Count -gt 0){
        $message = $illegals | Format-List | Out-String

        Send-MailMessage -From "(送信元メールアドレス)" -To "(送信先メールアドレス)" -Subject "Illegal DHCP Client Found" -SmtpServer "(SMTPサーバアドレス)" -Body $message

        foreach($i in $illegals){
            Remove-DhcpServerv4Lease -ComputerName $s -IPAddress $i.IPAddress
            foreach($s2 in $dhcpservers){
                try{
                    Add-DhcpServerv4Filter -ComputerName $s2 -List Deny -MacAddress $i.ClientId -Description $i.HostName
                }catch{
                }
            }
        }
    }
}
~~~

自分のドメインでないホスト名を持つクライアントがDHCPでIPアドレスを取得すると、

1. メールで通知
1. アドレスのリースを削除
1. 拒否フィルタに登録

という動作。

フェールオーバーを構成している環境の場合でも、
多分拒否フィルタの登録(`Add-DhcpServerv4Filte`)は別個に行う必要がある。

最後に、DHCPの拒否フィルタを有効にすればOK。

1回目はDHCPでIPアドレスを正常に取得できて接続されてしまうものの、2回目以降はDHCPではIPを取得できず、社内ネットワークへの侵入を少し減らせる・・・はず。

# 参考

* [Windows ServerのDHCPフィルタリング
](https://qiita.com/nakashun/items/4c2f2b150bd8600fe1fd) DHCPフィルタの構成方法。画像あり。
zeit/microをTypeScriptで使いたい！

忙しい人は[ここ](#環境構築)だけ読めば大丈夫です。

## はじめに

もともとNodeJSでサーバサイドをごにょごにょやる人間だったのですが、ここ一年くらいはフロントエンドばかりやっていました。

そんな状況でまたNodeJSを触れる機会があり、 最近のフレームワークの中で何がいいか調べた結果、 `zeit/micro`がすごくよかったのでご紹介します。

ちなみにフレームワークの遍歴としては、

```
express -> koajs -> restify or fastify -> zeit/micro
```

という感じです。

## `zeit/micro`とは

まず、`zeit`はクラウドでサーバレス環境を提供しているサービスです。
https://zeit.co/

それに加えて、その環境のコマンドラインツールや強力なプロダクトをOSSで公開しています。

JavaScriptで実装された（Electron製の）ターミナルである`hyper`や`React`のサーバサイドレンダリングに特化したフレームワークである`Next.js`も`zeit`製です。

本題に戻りまして、今回ご紹介するmicroというフレームワークは軽量かつシンプルにAPIサーバを実装でき、マイクロサービスに向いていると謳っています。

使い方はとても簡単で、

```bash
$ npm install --save micro
```

- index.js

    ```js
    // req, resは標準モジュールの`http`にあるオブジェクト
    // req: IncomingMessage
    // res: ServerResponse
    module.exports = (req, res) => {
        res.end('Welcome to Micro')
    }
    // or
    module.exports = () => 'Welcome to Micro'
    ```

- package.json

    ```json
    {
        "main": "index.js",
        "scripts": {
            "start": "micro"
        }
    }
    ```

これだけで動いてしまいます。

## `TypeScript`で`micro`を触りたい

`TypeScript`での利用例が少ないのか、`micro`というワードのググラビリティが悪いのかわかりませんが、あまり情報が出てきません。

とはいえ、ちゃんと型定義ファイルは用意されていて使えるようになっているので安心して使い倒していきましょう。

## 環境構築

`micro`は`async/await`を多用するのでデフォルトでサポートしている`NodeJS 8`系以上を使うといいでしょう。
`npm`クライアントは`yarn`を使っているので、適宜読み替えてください。

```bash
$ yarn add micro microrouter
$ yarn add -D micro-dev typescript ts-node @types/micro @types/microrouter @types/node@8.x.x
```

- package.json

    ```json
    {
        "engines": {
            "node": "8.x.x"
        },
        "scripts": {
            "start": "micro ./build/index.js",
            "dev": "node -r ts-node/register/transpile-only node_modules/.bin/micro-dev ./src/index.ts",
            "build": "tsc -b"
        }
    }
    ```

- tsconfig.json （お好みの設定で）

    ```json
    {
        "compilerOptions": {
            "target": "esnext",
            "lib": ["esnext"],
            "module": "commonjs",
            "rootDir": "./src",
            "outDir": "./build"
        },
        "include": ["./src/**/*"],
        "exclude": ["node_modules"]
    }
    ```

- src/index.ts

    ```ts
    import { send, createError, sendError } from "micro";
    import { router, get } from "microrouter";

    export = router(
        // 直接ボディを返す
        get("/", () => "hello world."),
        // sendメソッドで返す
        get("/hoge", async (_, res) => {
            await send(res, 200, { fuga: true });
        }),
        // エラーレスポンスを返す
        get("/error", async (req, res) => {
            const error = new Error("panic!");
            const httpError = createError(500, "internal server error.", error);

            await sendError(req, res, httpError);
            // これでもいける
            // throw httpError;
        }),
    );
    ```

```bash
# 開発用
$ yarn dev
# プロダクション用
$ yarn build && yarn start
```

`dev`コマンドで使用している`micro-dev`は、
ソース変更時のホットリロードやログをいい感じに表示してくれる機能がついてくるので絶対使った方がいいです。
また、エラーを返す時もスタックトレースまで返してくれるのでデバッグも多少楽になります。
（もちろん`micro`コマンドで起動した時はスタックトレースは返しません。）

## 最後に

`micro`はめちゃくちゃいいものなのでもっと`micro`人口が増えるといいな〜と思いながら記事を書きました。
少しでも`micro`の魅力が伝わったら嬉しいです。
Atomを導入してみた


これまで使用していた **Sublime Text** からエディタを **Atom** に変更してみた。<br>
移行時に導入したパッケージを簡単にまとめておく。

## 今回導入したパッケージ

### markdown-writer
- Markdown入力支援用パッケージ

### markdown-table-formatter
- テーブルを自動生成用パッケージ
- [Alt] + [Shift] + [T] を押下すると自動生成してくれる
  - 保存時も自動整形してくれる
- 使い方
  1. [Command] + [Shift] + P を押下してメニューを表示
  2. "table" と検索し、"Markdown Writer:Insert table" 選択
  3. 行数と列数を入力し、 [Enter] を押下

### japanese-menu
- メニューを日本語化するパッケージ

### highlight-line
- 編集中の行をハイライトしてくれるパッケージ

### Highlight Column
- 編集中の列をハイライトしてくれるパッケージ

### markdown-preview
- 編集中のMarkdownをプレビューしてくれるパッケージ
- [Ctr] + [Shift] + m を押下してプレビュー画面を表示させる(画面右側)

### markdown-scroll-sync
- 編集画面とプレビュー画面スクロールを同期してくれるパッケージ

### tool-bar-markdown-writer
- Markdownの支援ツールバーを表示してくれるパッケージ

### wordcount
- 文字数カウンタ用パッケージ

### markdown-toc
- markdown文書の階層構造を元に Table of Contents 目次のhtmlを作って追加するパッケージ

### atom-beautify
- 自動でインデントを整形してくれるパッケージ

### markdown-mindmap
- Markdownのテキストからマインドマップを生成してくれるパッケージ


## 参考サイト
- [Atom で Markdown を 快適に書くためのTips](https://www.skyarch.net/blog/?p=7611)
- [Atom をMarkdownエディタとして整備](https://qiita.com/kouichi-c-nakamura/items/5b04fb1a127aac8ba3b0)
オブジェクト指向のこころー演習問題(第５部)

以下の問題及び回答は[書籍](https://www.amazon.co.jp/dp/4621066048)を参考に記載しています。また一部引用があります。

# 第14章：デザインパターンの原則と戦略
## 基礎
Q1. 設計の実装方法を選択する場合、どういったことを考えるべきでしょうか？
A1. 
・将来的に変化が起こる可能性
・現在のシステムを修正することが可能かどうか
・実体化するオブジェクト群の出自
・使用する言語
・データベースやコンフィグレーションファイルの利用可能性

Q2. デザインパターンには５つの落とし穴があります。それらを挙げてください。
A2. 
・表層的理解：詳細レベルの状況に関する表層的な理解してにもとづき、慌ててパターンを選択してしまう。
・思い込み：パターンを信頼しすぎる。選択したパターン/モデルを用いることで全ての状況を解釈しようとする。また、こういった思い込みを正そうとしない。
・選択ミス：パターンが適切となるコンテキストや条件を理解していない（パターンという分類学的側面を理解していない）。このため、誤まったパターンを選択してします。
・誤謬：パターンの全体的知見に不慣れであるため、無知から来る誤謬が発生する。
・当てはめ：パターンの理論に適合しない部分、すなわち現実に存在する具体的な実態の例外を無視してしまう。このため、オブジェクトや個々の事物を本来あるべき姿よりも硬直化した形でモデル化してしまう危険性がある。

## 応用
Q1. 開放/閉鎖原則では、「モジュール、メソッド、クラスは、拡張性という観点から見た場合、見通しの利くようになっているべきであり、変更という観点から見た場合、閉鎖的になっているべきである」と述べられています。これはどういう意味でしょうか。
A1. 新たな機能を個別に、モジュール化された形で追加していけるということ。
開放：モジュールを組み合わせることで、要求が達成できるということ。
閉鎖：何かを変更する場合は、流動的要素がオブジェクト内に隠蔽されており、オブジェクト自体を変更する必要がなく、既存の実装を変更する必要がないということ。

Q2. Bridgeパターンにおける開放/閉鎖原則を説明してください。
A2. 既存のクラスに一切手を加えることなく、新たな実装を追加できる。

# 第15章：共通性/可変性分析
## 基礎
Q1. 共通性/可変性を洗い出す、２つのアプローチを答えてください。
A1. 
問題領域中の２つの言葉（オブジェクト）を選択して、以下２つの観点から問う
・いずれかは、もう一方の流動的要素なのか？
・これらはいずれも、何か他のものの流動的要素なのか？

## 応用
Q1. 共通性/可変性分析では、共通性はそれ自体が一つの関心事に基づいているべきであると述べています。何故こういったことが重要なのでしょうか？
A1. 設計の凝集度を高めることができないため。

Q2. 共通性/可変性分析とデザインパターンは、どのように補完しあうのでしょうか？
A2. 
・共通性/可変性分析は、早い段階で抽象的側面に注目することになるため、最も有益なものを見つけ出しやすくなる。（デザインパターンは、抽象的側面を洗い出す助けにならない）
・デザインパターンは、成功裏に終わった過去の設計における洞察を適用できる。（共通性/可変性分析では、こういうことはできない)

# 第16章：分析マトリクス
## 基礎
Q1. 分析マトリクスにおいて、左端の列は何を表しているでしょうか？
A1. 概念


Q2. 分析マトリクスにおいて、行は何を表しているでしょうか?
A2. 一般化された概念を実装する際における特定の方法。

Q3. 分析マトリクスにおいて、列は何を表しているでしょうか？
A3. 表現しているケースに対して使用することになる特定の実装

Q4. 分析マトリクスには、本書で解説しているどのパターンが表現されることになるのでしょうか？
A4. 
行によって、Strategyパターンが、列によって、Abstract Factoryパターンが表現される。

## 応用
Q1. 分析マトリクスによって操作されるのは、どういったレベルの観点なのでしょうか？
A1.概念上の観点。特における流動的要素や例外。


Q2. 分析マトリクスと共通性/可変性分析は、どういった点で似ているのでしょうか?
A2. 概念上の観点を整理する点。抽象的概念（共通性）と流動的要素（可変性）を洗い出す。
はじめてのQiita

# Qiitaにきーたよ。

``` php:きた？
<?php

$kurukana = new Qiita;

$kurukana->hellow_qiita();

class Qiita {
	function __construct() {
		die('こない。');
	}

	function hellow_qiita() {
	   echo 'きーたよ。';
	}
}
```


<details><summary>きたかな？きたかな？</summary><div>
まーだだよ。
</div></details>


Markdown: [Qiita](http:;javascript:alert(0);)

きたー | kitta-
---|---
キター|KITTA-|
めっちゃきたー|MeTTTAsfjkhslf

- きた？
- きたきた
    * kitakita
- きたきたきた
オープンソースに感謝の気持ちを広げよう

# オープンソースに感謝の気持ちを広げよう


今日、Githubにはたくさんのオープンソースソフトウェアがあります。OSSですから、Contributeでもしない限りそのソフトウェアに貢献することはできません。
しかし貢献はできなくても、その製作者に**感謝の気持ちを伝えることはできます**。

# [saythanks.io](https://github.com/kennethreitz/saythanks.io)

<img src="https://saythanks.io/static/images/inbox.png" width="50%">

saythanks.ioは、**ユーザーがOSSの作成者に感謝の気持ちを伝えることができるサービスです**。Githubのアカウントでログインすると、そのログインしたアカウントに対してOSSのユーザーが感謝を伝えるためのURLが提供され、そのURLを![](https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg)このようなバッジにしてREADMEやドキュメントに追加することでソフトウェアのユーザーが感謝の気持ちを伝えることができます。

## ワークフロー

### 1. 感謝の気持ちを伝えたい場合（ユーザー側）

GithubのREADMEなどに記載されているバッジやURLをクリックします。

![Screenshot_20180816_142729.png](https://qiita-image-store.s3.amazonaws.com/0/1808/304da1d4-2552-c0df-8db2-2b9a59a13818.png)

そうすると、気持ちを伝えるためのページが表示されます。

![Screenshot_20180816_143052.png](https://qiita-image-store.s3.amazonaws.com/0/1808/c0d80475-8ada-1a02-a291-60efc51a006e.png)

「Dear kennethreitz」と書かれているテキストエリアにメッセージを書き、「Katherine Feliciano」と書かれているテキストボックスに自分の名前（実名じゃなくても。Githubのアカウント名でも、anonymousでもいいと思います。）を書きます。その後「SEND NOTE」をクリックすればOK。ね、簡単でしょ？

ちなみにメッセージ欄は英語で書かれていますが、日本語もちゃんと書けます。しかしソフトウェアの製作者が英語圏の人だったら英語で書いてあげたほうが親切です。


### 2. 感謝の気持を伝えてもらいたい場合（製作者側）

[saythanks.io](https://github.com/kennethreitz/saythanks.io)にアクセスするとこのような画面が出てきます。
![Screenshot_20180816_140823.png](https://qiita-image-store.s3.amazonaws.com/0/1808/e4209181-f43a-958e-bfab-37d99bc7d79d.png)
「Create Your Thankfulness Inbox」をクリックしてGithubのアカウントでサインアップします。そうするとインボックスページに移ります。

![Screenshot_20180816_141552.png](https://qiita-image-store.s3.amazonaws.com/0/1808/fffa6047-734c-9bb2-0823-f670778bb63d.png)
赤枠のURLが上記で説明したURLになります。このURLを使ってユーザーに気持ちを伝えてもらいます。このページ画面の下に受信箱欄があり、そこにユーザーが伝えてくれたメッセージが記載されます。

## まとめ

saythanks.ioというサービスは非常に素晴らしいと思います。ユーザーからの感謝の気持ちは製作者にとってモチベーションになりますし、「このソフトウェアを制作してよかった」という幸福感にもつながると思います。（でも自分の制作物のリポジトリにこのバッジ付けるの少し勇気入りますよね笑）

**あなたもオープンソースに感謝の気持ちを広げませんか？**
saythanks.ioの製作者に[![saythanks.ioの製作者に感謝の気持ちを贈ろう！](https://img.shields.io/badge/say-thanks!-ff69b4.svg)](https://saythanks.io/to/kennethreitz)
【React Native】Create Templetes

# react-native-create-templete(flow)

## Components
```jsx
// @flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import styles from './styles';

type Props = {

};

export default class MyComponent extends Component<Props> {
  static defaultProps = {
  };

  render() {
    return (
      <View style={styles.container}>
      </View>
    );
  }
}

```

## Stateless Functional Components
```jsx
// @flow
import React from 'react';
import { View } from 'react-native';
import styles from './styles';

type Props = {

};

const component = (props:Props) => {
	const { value } = props;
  
    return (
      <View style={styles.container}>
      </View>
    );
}

export default component;

```

## Styles
```jsx
// @flow
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
  },
});

export default styles;

```
Get-ChildItemの結果を元にファイルをリネームするときの注意（重複操作）

ファイルシステムに対する`Get-ChildItem`の結果を元にファイルのリネームなどを行う場合、同じファイルに対して複数回操作してしまうことがある、という話。

よくある話だと思いますが、ちょっとハマったので備忘録としてメモ。

# 環境

Windows 8.1 Pro
Windows PowerShell 4.0

```text
Name                           Value
----                           -----
PSVersion                      4.0
WSManStackVersion              3.0
SerializationVersion           1.1.0.1
CLRVersion                     4.0.30319.42000
BuildVersion                   6.3.9600.18968
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0}
PSRemotingProtocolVersion      2.2
```

# 問題となる例

## サンプルコード

```powershell
# 事前準備
# ユーザーのドキュメントフォルダに適当な名前のフォルダを作成
# カレントディレクトリへ変更
[IO.Path]::Combine( #
    [System.Environment]::GetFolderPath('MyDocuments'),
    [guid]::NewGuid()
) | New-Item -Path {$_} -ItemType Directory |
    Push-Location -LiteralPath {$_.FullName}
# 1.log .. 10.log というファイルを作る
1..10 |
    New-Item -Name {'{0}{1}' -f $_ , '.log'} -ItemType File > $null


# 問題の箇所
# .logのファイルに今日の日付（yyyyMMdd）をつけてリネーム
Get-ChildItem -Filter *.log | 
    Rename-Item -NewName {
        '{0}-{1}' -f $_.Name , 
                     (Get-Date -Format yyyyMMdd) 
    } -PassThru
```

## サンプルの実行結果

この時のコンソール出力（=`Rename-Item`が変更したファイル）は以下のようになる。


```text
    ディレクトリ: C:\Users\username\Documents\7a9baef0-bb8b-44e0-a3d4-7cc871f875b2


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
-a---          18/08/16     20:01          1 1.log-20180816
-a---          18/08/16     20:01          2 10.log-20180816
-a---          18/08/16     20:01          1 1.log-20180816-20180816
-a---          18/08/16     20:01          1 2.log-20180816
-a---          18/08/16     20:01          1 3.log-20180816
-a---          18/08/16     20:01          1 4.log-20180816
-a---          18/08/16     20:01          1 5.log-20180816
-a---          18/08/16     20:01          1 6.log-20180816
-a---          18/08/16     20:01          1 7.log-20180816
-a---          18/08/16     20:01          1 8.log-20180816
-a---          18/08/16     20:01          1 9.log-20180816
```

出力を見ると`1.log`に対して2回処理が行われているのが確認できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/142842/4c44d2d8-6e40-afb3-72fc-fdc3664e1610.png)


# 原因と対策

## 原因

`Rename-Item`は逐次実行のため、`Get-ChildItem`のパイプライン出力1個毎に処理をする。
つまり、ファイルが1個見つかるたびそのファイルの名前が変更される。


ファイルの名前が変わることで内部的な並び順が変わり、名前によっては`Get-ChildItem`によって同じファイルが再度パイプラインに出力される、
そのため複数回同じ処理をしてしまう、
ということだと思われる。

## 対策

`Get-ChildItem`の出力結果を固定すれば良いので、以下のような方法が考えられます（もっと良い方法があれば教えて下さい）。

- `Get-ChildItem`の結果を変数に入れる
- `Get-ChildItem`を括弧でくくる
- `Sort-Object`など全結果を一度キャッシュするコマンドを挟む
C++ の tuple/pair の使い方メモ

tuple での例を書きますが、要素数が2つなら pair でも同じことが書けます。

# `std::tuple` 使うとき

make_tuple を使って

```C++
std::tuple<int, int, int> t = std::make_tuple(1, 2, 3);
```

https://cpprefjp.github.io/reference/tuple/tuple.html


# tuple に別名をつけたとき
たとえば（極めて雑な例で、普通は using を使うなり const つけるなりするとのこと。[コメント](https://qiita.com/negito6/items/9693e53ee88dcb5c8095#comment-6da89e4f42633adc7b01)参照）

```C++
typedef struct tuple {
    int first;
    int second;
    int third;
} tuple_t;
```

とした場合は、当然 `std::make_tuple` は使えないわけだが、下記のように書けた

```c++
tuple_t t = {
    1,
    2,
    3,
};
```
Webページをスクレイピングしたい! 何が必要?

# Webページをスクレイピングしたい!

**必要なもの**

- Pythonのrequestsライブラリ
- BeautifulSoup4

上記2つがなければあらかじめインストールしておきましょう。

# Pythonのrequestsライブラリとは
- このライブラリでウェブページをダウンロード可能。
- ウェブサーバーに対してGETリクエストを出す (HTMLコンテンツをダウンロード)

リクエストを走らせると、Responseオブジェクトが来ます。このオブジェクトは`status_code`プロパティを持ち、ウェブページがきちんとダウンロードされたかどうかを判断するのです。

```python:scraping_test.py
from bs4 import BeautifulSoup
import requests

page = requests.get("http://dataquestio.github.io/web-scraping-pages/simple.html")
print(page.status_code)
```
この時点での`$ python scraping_test.py`実行結果
*200*となりました。`status_code`が200ということは、ダウンロード成功です。
![web.png](https://qiita-image-store.s3.amazonaws.com/0/171266/df8d4897-c9c5-1bd2-43bf-4b173414614f.png)

`content` プロパティを使えばHTMLコンテンツを表示します。

```python:scraping_test.py
from bs4 import BeautifulSoup
import requests

page = requests.get("http://dataquestio.github.io/web-scraping-pages/simple.html")
# print(page.status_code)
print(page.content)
```

この時点での`$ python scraping_test.py`実行結果
```
b'<!DOCTYPE html>\n<html>\n    <head>\n        <title>A simple example page</title>\n    </head>\n    <body>\n        <p>Here is some simple content for this page.</p>\n    </body>\n</html>'
```

ここまでrequestsライブラリの説明をしました。このライブラリのプロパティとしては`status_code`と`content`を覚えておきましょう。

# BeautifulSoupライブラリとは
取得したHTMLドキュメントを解析し、テキストを抽出するライブラリです。

ドキュメントを解析するためにBeautifulSoupクラスのインスタンスを作成します。
HTMLパーサー: HTMLのテキストや特定タグの内容を抽出。python標準のhtml.parserでOK。
prettify()メソッド: ソースコードを見やすく表示

```python:scraping_test.py
soup = BeautifulSoup(page.content, 'html.parser')
print(soup.prettify())
```

参考ページ: [dataquest](https://www.dataquest.io/blog/web-scraping-tutorial-python/)
Pythonの例外処理は、オブジェクトの削除を伴う

# 前書き
何の気なしにPythonのドキュメントを眺めていると、次のような記述があった。

> try 文は、ひとまとめの文に対して、例外処理および/またはクリーンアップコードを指定します ...[中略]... 例外が as target を使って代入されたとき、**それは except 節の終わりに消去されます**。これはちょうど、以下のコード:

> ```python
except E as N:
    foo
```

> が、以下のコードに翻訳されたかのようなものです:

> ```python
except E as N:
    try:
        foo
    finally:
        del N
```

引用元：[Python 言語リファレンス » 複合文 » try 文](https://docs.python.jp/3/reference/compound_stmts.html#try) 、**太字**は引用者。

# 試してみる
実際に試してみると、なるほど確かにeが削除されているのが分かる。

```python
>>> try:
...     raise Exception('spam')
... except Exception as e:
...     print(e)
...
spam
>>> print(e)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
NameError: name 'e' is not defined
```

一方、with文ではそのような挙動を見せないので、なんとも解し難い。

```Python
>>> with open(r'./spam.txt') as fin:
...     pass
...
>>> fin.read()
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ValueError: I/O operation on closed file.
```

リソースのクローズを伴うので、同じように削除してくれた方が扱いやすいような...

## ハマるとしたら
知っておいて得な挙動でもないが、ともすれば次のようなハマり方をするかもしれない。

```python
>>> e = 42
>>> try:
...     raise Exception('spam')
... except Exception as e:
...     print(e)
...
spam
>>> print(e)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
NameError: name 'e' is not defined
```

変数名を被らせた本人が悪いのは言うまでもないが、
勝手にオブジェクトが消されてしまうのは見落としがちなような気もする。
WordPress ハンズオン - Amazon EC2

Amazon EC2 の WordPress を使用して、ウェブサイトを立ち上げます。

WordPress は CMS で動いています。　

※CMS とはContents Management System の略で、ウェブサイトのコンテンツを管理したり、ウェブページを更新したりするためのソフトのことです。CMS があればHTMLやCSS などを自分で直接編集しなくても、Word のように文章を書いてレイアウトを整え「更新」をクリックするだけでサイトが更新できます。


---
##1.Amazon EC2 から WordPress を作成し設定する

Amazon EC2 から「インスタンスの作成」 をクリックし、仮想マシンの作成と設定を行います。
![スクリーンショット 2018-08-16 19.33.02.png](https://qiita-image-store.s3.amazonaws.com/0/280929/56811504-1e4a-75be-de8b-c340b8ad215f.png)

「AWS Marketplace」 をクリックし、WordPress を検索し、WordPress powered by BitNami が表示されたら、「選択」 をクリックします。
![スクリーンショット 2018-08-16 19.34.08.png](https://qiita-image-store.s3.amazonaws.com/0/280929/4b5c42f3-0edf-78f4-003c-54f59ff2050f.png)

料金ページが表示されますが、今回は無料枠なので、「Continue」 をクリックします。
![スクリーンショット 2018-08-16 19.35.15.png](https://qiita-image-store.s3.amazonaws.com/0/280929/b319df4b-b604-6708-5850-2fe8e3532ab2.png)

「t2.micro」 を選択し、「次の手順: インスタンスの詳細の設定」 をクリック、以降の画面で、「次の手順: ストレージの追加」、「次の手順: タグの追加」 の順にクリックします。
![スクリーンショット 2018-08-16 19.36.30.png](https://qiita-image-store.s3.amazonaws.com/0/280929/62f6212f-672e-763d-1d57-d61bd8198ea5.png)

インスタンスに名前をつけます。今回は[キー] に「Name」と入力し、[値] ボックスに「WordPress」と入力し、「次の手順: セキュリティグループの作成」 をクリックし、以降の画面で「確認と作成」をクリックします。
![スクリーンショット 2018-08-16 19.35.15.png](https://qiita-image-store.s3.amazonaws.com/0/280929/c65bcaa1-48d2-bf46-244d-96627022ab12.png)

WordPress を実行する Amazon EC2 インスタンスの準備が整ったら、「作成」 をクリックします。
![スクリーンショット 2018-08-16 19.41.01.png](https://qiita-image-store.s3.amazonaws.com/0/280929/69bc5b62-03c2-51fd-1ac1-5eac62cbf748.png)

今回はSSH接続はしないので、[キーペアなしで実行]を選択し、チェックボックスをオンにし、「インスタンスの作成」をクリックします。
![スクリーンショット 2018-08-16 19.41.45.png](https://qiita-image-store.s3.amazonaws.com/0/280929/f87aef05-50bf-dd01-862c-820f25fa1ec9.png)

[WordPress] インスタンスを選択し、[インスタンスの状態] が [running] であることと、[パブリック IP] を確認してください。
![スクリーンショット 2018-08-16 19.48.29.png](https://qiita-image-store.s3.amazonaws.com/0/280929/3e31d3a5-2408-aba5-b32d-3b8f46107dcc.png)

[Public IP] をウェブブラウザに入力すると、[Hello World] ブログページが表示されます。
![スクリーンショット 2018-08-16 19.48.14.png](https://qiita-image-store.s3.amazonaws.com/0/280929/9e91a6c0-fecb-ed58-4356-2b4c8a3eba91.png)


##2.adminパスワードを表示し、ログインする

WordPress インスタンスを選択し、「アクション」-「インスタンスの設定」-「システムログの取得」 の順に選択します。
![スクリーンショット 2018-08-16 19.56.23.png](https://qiita-image-store.s3.amazonaws.com/0/280929/fb725974-9f7a-d944-09a9-fb3fc2bcc6b3.png)


システムログウィンドウで下にスクロールし、パスワード (ハッシュマークで囲まれています) を見つけます。
*接続はブラウザからの直接接続のJavaSSHクライアントにしておく必要があります。
![スクリーンショット 2018-08-16 20.37.40.png](https://qiita-image-store.s3.amazonaws.com/0/280929/e12f2e18-65d6-ce76-5f20-4ff262654194.png)

パスワードが見つかったので、URL の末尾に /admin を追加します。
（例）18.23.45.64/admin
[Username] に「user」と入力し、[Password] にシステムログから読み取ったパスワードを入力してください。
![スクリーンショット 2018-08-16 20.40.55.png](https://qiita-image-store.s3.amazonaws.com/0/280929/1ff23e92-76b3-4a83-39fa-fc5d3a14eb08.png)
Thread1: breakpoint1.0

<br>
画面に画像を表示する。
打ってるうちに　「Thread1: breakpoint1.0」　エラー？

消しても良いみたい。
行数を右クリックで　「Delete Breakpoint」　削除したら、動かせた。


```ruby:qiita.rb
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        imageView.image = UIImage(named: "sample.jpg")
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

```

Xcode project - start
GORMでのUpdateされない場合の注意

GORMを使っててちょっとハマったのでメモ。 　
結論は公式ドキュメント見ろってことでしたが。

## やりたいこと ##
GORM使ってDBのレコードをアップデート。

## ハマったこと ##
**構造体を使って**更新すると、各型の初期値（string : "", int: 0など）は**GORMに空と見なされる**ので反映されない。 
構造体を使わないで更新すれば良い。

例

```go
// 反映されない
db.Model(&foo{}).Where("id = ?", hoge).Update(&foo{num: 0})

// 反映される
db.Model(&foo{}).Where("id = ?", hoge).Update("num", 0)
```

## 参考 ##
http://gorm.io/docs/update.html#Extra-Updating-option  
>
// WARNING when update with struct, GORM will only update those fields that with non blank value
// For below Update, nothing will be updated as "", 0, false are blank values of their types
QtでWebAssembly

とりあえずWebAssembly（C言語）でブラウザで動くものを作りたいので調べたら、
こよなく愛するQtでできるらしいので調べた。
環境はUbuntu 16.04です。

https://wiki.qt.io/Qt_for_WebAssembly
https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm
基本的な情報は上の２個
だがやるとできないでハマった。以下は私が見つけた回答

1.
まずQtをQtのサイトから一式ダウンロードする。
https://www.qt.io/download
ここからOpenSource版をダウンロードしてさらにメンテナンスツールから5.11.0
を選びダウンロードする（しばらくかかる）
知っている人は知っていると思うがダウンロードした5.11.0のフォルダ（/Qt/5.11.0/Src)
のなかにqtのソース一式があり、これでqmake以下一式ビルドできる。
だからあとWebAseemblyのコンパイラがあればいい。

2.
WebAssemblyのコンパイラはemscriptenがいいらしい。
ネットで調べるとそれが一番情報あるから。
それをダウンロードするわけだが、なぜが私のところubuntu16.04 では最新(1.38.11)
ではうまく動作しなかった。そこで古いやつ(1.38.8)を選ぶと動いたのでそれを紹介。
なお上の
https://wiki.qt.io/Qt_for_WebAssembly
で推薦された.1.38.1も動作しなかった（少なくとも私のマシンでは）
以下のコマンドでインストールしてください
git clone https://github.com/juj/emsdk.git
cd emsdk
./emsdk install --build=Release sdk-tag-1.38.8-64bit binaryen-master-64bit 
./emsdk activate --build=Release sdk-tag-1.38.8-64bit binaryen-master-64bit 
source ./emsdk_env.sh 
一応入れたら
https://developer.mozilla.org/ja/docs/WebAssembly/C_to_wasm
に３個例があります。ためしにやって動作確認してください。
C言語がWebで動きます。
※./emsdk install で律速されます、多分数時間。注意
※端末立ち上げるたびsource ./emsdk_env.sh する必要があります。


3.次にもちろんQtの環境を作る。
端末を起動
source ./emsdk_env.sh　
実行
cd で　/Qt/5.11.0/Src に移動
まず
qtbase、qtdeclarative、qtwebsocketsのフォルダを削除したのち
git clone -b wip/webassembly https://code.qt.io/qt/qtbase.git 
git clone -b wip/webassembly https://code.qt.io/qt/qtdeclarative.git 
git clone -b wip/webassembly https://code.qt.io/qt/qtwebsockets.git
さらに
qtlocation ,qt3dも削除
これは代替がない（今の所）よってこれを使うものはできない。
適当な場所にbuildディレクトリを作成（シャドウビルド）、
そこにcdしてからconfigure
   /Qt/5.11.0/Src/configure -xplatform wasm-emscripten -developer-build -release -static -no-thread -nomake tests -nomake examples  -no-dbus -no-headersclean -system-libpng -no-ssl -no-warnings-are-errors -skip qtlocation -skip qt3d -skip qtwebengine （他、使わないと思われるモジュールはskipしておくとコンパイル時間が短くなる）
最後にmake
    make -j10 (-jは並列コンパイルオプション 数字はCPUのコア数と同程度の数字とする)
これでerrorが出ないのを確認して下さい。
終わったらqmakeのパスを確認してください。
/your-build-path/qtbase/bin/qmake
/your-build-path/qtbase/qmake/qmake
これをこれ以降使います。（２個あるけどどっちでもいいらしい）
※qmake自体はconfigureした時すでにできているのに注意
※makeはskipする数とCPU性能により数十分～数時間

4.サンプルを動かしてみる
サンプルは
https://github.com/msorvig/qt-webassembly-examples
私が見た所ほとんど動作する（全部ではない）
やりかたとしては
makefileのやつは
make
*.proのやつは 
/your path/qmake *.pro
make
でOK。htmlともろもろ出力されるのでhtmlをそのままブラウザで開くと動作する。
サーバーに乗っける必要はない。
file:://?????.html のURLを読むのでOK。
※いくつかのサンプルは
project error: unknown module(s) in qt: mqtt
のエラーを出す
これについては
https://stackoverflow.com/questions/48701475/qt-creator-adding-mqtt-library
にある。
git clone https://code.qt.io/qt/qtmqtt.git
cd qmqtt
mkdir build
cd build
/your path/qmake qmake -r ..
make
make install
でクリア出来ている（私のPCでは）

以上

残件
QtCreatorにKitとしてセットするのは今の所うまくできていない。
![Screenshot from 2018-08-16 19-16-24.png](https://qiita-image-store.s3.amazonaws.com/0/8886/cd50e5dd-fdf9-e2f3-4009-d63a122811e2.png)
管理者権限が必要なコマンドをダブルクリックで実行したい

サービスの起動停止をコマンドから行いたかったのですが、
「右クリック→管理者として実行」がめんどくさかったのでダブルクリックで実行する方法を調べました。

COMMAND部分を使用したいコマンドに変更して使用してください。
例ではpostgresqlサービスの立ち上げを行っています。

### cmdで実行
``` exsample.dat
set COMMAND=Start-Service -Name postgresql-x64-9.4
@powershell -NoProfile -ExecutionPolicy unrestricted -Command Start-Process powershell.exe \"%COMMAND%\" -Verb runas
```

### PowerShellで実行
``` exsample.ps1
set COMMAND=Start-Service -Name postgresql-x64-9.4
Start-Process powershell.exe \"%COMMAND%\" -Verb runas
```

参考記事
[Windowsでsudoしたい](https://qiita.com/AinoMegumi/items/fd56711fe1fd2a0e1bbf#_reference-ed09ab347e1935f20565)
OpenCV3.4.2をPython3で動かしてみる

# 環境
- Windows7 X64
- Python3.7
- OpenCV3.4.2

# 構築手順
とりあえず最新のpython3の3.7.0を入れる
https://www.python.org/downloads/windows/
にアクセスして、Download Windows x86-64 executable installerを選択
&ダウンロード。
defaultで以下にインストールされるのでWindowsの環境変数Pathに以下パスを追加
C:\Users\<Me>\AppData\Local\Programs\Python\Python37\Scripts

```
cmd
#opencv-pythonをインストール
pip install opencv-python
#なんかupgradeしろとのことなのでやってみる
You are using pip version 10.0.1, however version 18.0 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' comm
and.

#Upgrade
py -m pip install --upgrade pip

Installing collected packages: pip
  Found existing installation: pip 10.0.1
    Uninstalling pip-10.0.1:
      Successfully uninstalled pip-10.0.1
Successfully installed pip-18.0
#その他のパッケもいれる
pip install opencv-contrib-python
pip install matplotlib
pip install scipy
pip install ipython pyreadline
pip install jupyter
```

# OpenCV実行

```py
#py起動してopencv2
py
# importしてみる
>>> import cv2
# version確認
>>> cv2.__version__
'3.4.2'
>>>

```
Tracking SPA application with Google Analytics / Google Tag Manager

*It may affect outer javascript and framework(like vue, angular, react etc...). I <b>strongly recommend you use it in unavoidable case</b>.

# ga version (Google Analytics)
```javascript
(function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
        (i[r].q = i[r].q || []).push (arguments)
    }, i[r].l = 1 * new Date ();
    a = s.createElement (o), m = s.getElementsByTagName (o)[0];
    a.async = 1;
    a.src   = g;
    m.parentNode.insertBefore (a, m)
}) (window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

ga ('create', 'UA-XXXXX', 'auto'); // replace XXXXX into your id
ga ('send', 'pageview');

function insertCallback(parent, funcname, callback, ...args) {
    let oldFunc = parent[funcname] ? parent[funcname] : function (){}
    parent[funcname] = function() {
        oldFunc.apply(this, arguments)
        return callback(...args)
    }
}

function notify_analytics(l) {
    let newPage = l.pathname + l.hash
    ga('set', 'page', newPage)
    ga('send', 'pageview')
}

insertCallback(window.history, "pushState", notify_analytics, location)
insertCallback(window.history, "replaceState", notify_analytics, location)
```

# gtag version (Google Tag Manager)
```html
<!-- replace XXXXX into your id -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX"></script> 
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag() { dataLayer.push(arguments); }
	gtag('js', new Date());
	gtag('config', 'UA-XXXXX'); // replace XXXXX into your id

	function insertCallback(parent, funcname, callback, ...args) {
		let oldFunc = parent[funcname] ? parent[funcname] : function () { }
		parent[funcname] = function () {
			oldFunc.apply(this, arguments)
			return callback(...args)
		}
	}

	function notify_analytics(l) {
		let newPage = l.pathname + l.hash
		// replace XXXXX into your id
		gtag('config', 'UA-XXXXX', { 'page_path': newPage }); 
	}

	insertCallback(window.history, "pushState", notify_analytics, location)
	insertCallback(window.history, "replaceState", notify_analytics, location)
</script>
```

[Explanation](https://qiita.com/jiyu/items/1a117141f207b1faa925)
[Reference](https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications)
EC2 インスタンス内からインスタンスのメタ情報を取得する

# 概要
EC2 インスタンスで作業しててふとこのインスタンスなんだっけってなった時に，いちいちブラウザでコンソール開かなくてもインスタンスの中からメタ情報取得できますよって話です．

# How?
AWS さんが[公式](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-instance-metadata.html)にメタ情報を取得する術を用意してくれてます．

以下のようにして，取得可能なインスタンスメタデータの一覧を表示できます

```sh
$ curl http://169.254.169.254/latest/meta-data/
ami-id
ami-launch-index
ami-manifest-path
block-device-mapping/
hostname
instance-action
instance-id
instance-type
local-hostname
local-ipv4
mac
metrics/
network/
placement/
profile
public-hostname
public-ipv4
public-keys/
reservation-id
security-groups
services/
```

例えば instance type が欲しい時は，

```sh
$ curl http://169.254.169.254/latest/meta-data/instance-type
p2.xlarge
```

のように取得可能です．

重要の有無はともかく，以上です．


# 出典
[AWS 公式](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-instance-metadata.html)
本当に初心者、２７歳がゼロからスタートするPG。しかも中途転職。

とりあえずprogateのJavaコースを進める。

そして「ネットワークはなぜつながるのか」を読む。
<div class="freezed">
<div class="hatena-asin-detail"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822283119/nebokehero-22/"><img class="hatena-asin-detail-image" title="ネットワークはなぜつながるのか 第2版 知っておきたいTCP/IP、LAN、光ファイバの基礎知識" src="https://images-fe.ssl-images-amazon.com/images/I/51xzk4tjGgL._SL160_.jpg" alt="ネットワークはなぜつながるのか 第2版 知っておきたいTCP/IP、LAN、光ファイバの基礎知識" /></a>
<div class="hatena-asin-detail-info">
<p class="hatena-asin-detail-title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822283119/nebokehero-22/">ネットワークはなぜつながるのか 第2版 知っておきたいTCP/IP、LAN、光ファイバの基礎知識</a></p>
<ul>
<span class="hatena-asin-detail-label">作者:</span> 戸根勤,日経NETWORK
<span class="hatena-asin-detail-label">出版社/メーカー:</span> 日経BP社
<span class="hatena-asin-detail-label">発売日:</span> 2007/04/12
<span class="hatena-asin-detail-label">メディア:</span> 単行本（ソフトカバー）
</ul>

JavaはMainメソッドについて、本当に基礎の基礎だ。
翌日は何もなければ、午後からJavasprictとJavaの基礎を学び。
計算機のクラスを作ってみよう。
やれることからコツコツだ。

--------
*2019/10/30追記*

# 転機

リワークに通ってはや8ヶ月。そろそろ転職してもいいという許可もいただいたし、と思っていたら求められるスキルと持っているスキル（フロントエンド系）がマッチしていない…だと。そこらへん考えて勉強してはいたけれど、まさかこんなにサーバー側の案件しかないだなんて。

というわけで基礎のアルゴリズムから学び、PHPやJavaを徹底的にやっていこうじゃないか。
まぁHTMLも役たつし？と自分に言い訳しつつ好きな言語を勉強していく。
他のネットやウェブ関連に関する知識をまとめたいので基本情報もやっていくつもりだ。
[Atom]ショートカットをまとめておこう。

Mac/Winで[Atom](https://atom.io/)エディタを使っていてショートカットを忘れがちなのでまとめてみました。
※ Mac の ⌘ は commandキー、Alt は optionキー

#+保存
|操作|Mac|Windows|
|:--|:--|:--|
|保存|⌘ + s|Ctrl + s|
|別名で保存|⌘ + Shift + s|Ctrl + Shift + s|

#+ファイル・タブ
タブリスト表示は地味に便利！

|操作|Mac|Windows|
|:--|:--|:--|
|新規ファイル作成|⌘ + n|Ctrl + n|
|アクティブなタブを閉じる|⌘ + w|Ctrl + Shift + w|
|すべてのタブを閉じる|⌘ + k + w|Ctrl + Shift + k + w|
|次のタブへ移動|Alt + ⌘ + →|Alt + Ctrl + →|
|前のタブへ移動|Alt + ⌘ + ←|Alt + Ctrl + ←|
|タブ番号移動|⌘ + 1-9|Ctrl + 1-9|
|タブリスト表示|⌘ + b|Ctrl + b|

#+編集
|操作|Mac|Windows|
|:--|:--|:--|
|全選択|⌘ + a| |
|行選択 (連打で複数行選択)|⌘ + l|Ctrl + l|
|単語選択|⌘ + d|Ctrl + d|
|１行削除|control + Shift + k|Ctrl + Shift + k|
|元に戻す|⌘ + z|Ctrl + z|
|先に進む|⌘ + y|Ctrl + y|
|改行削除|⌘ + j| |
|行頭に移動|⌘ + a|Ctrl + a|
|行末に移動|⌘ + e|Ctrl + e|

#+レイアウト
|操作|Mac|Windows|
|:--|:--|:--|
|フォント拡大|⌘ + Shift + ＋|Ctrl + Shift + ＋|
|フォント縮小|⌘ + ー|Ctrl + ー|

#+ツリービュー
|操作|Mac|Windows|
|:--|:--|:--|
|表示/非表示|⌘ + \\ (Alt + ¥)|Ctrl + ¥|
|ツリービュー/コードの移動・切替|control + 0|Ctrl + 0|
|ファイル新規追加|a|a|
|フォルダ新規追加|Shift + a|Shift + a|
|ファイル名変更|m|m|
|ファイル複製|d|d|

#+その他
|操作|Mac|Windows|
|:--|:--|:--|
|[設定]の表示|⌘ + ＋ + ,|Ctrl + ＋ + ,|
|文字コード選択|⌘ + Shift + u|Ctrl + Shift + u|
|ファイルパスを取得|control + Shift + c|Ctrl + Shift + c|

#+まとめ
作業でよく使うショートカットをまとめました。
こんなショートカットはないかなーと思った時は、コマンドパレットにてお調べください。

|操作|Mac|Windows|
|:--|:--|:--|
|コマンドパレット|⌘ + Shift + p|Ctrl + Shift + p|

また、個人的にショートカットを編集したい場合は、設定画面のKeybindingsにて修正可能のようです。
Production環境でdeviseのパスワードリセットメールを送るとlocalhostのリンクになってしまう

初投稿になります。
deviseでForgot your password?からメール送信する機能についてハマったので、端的ですが残します。

# 起こったこと
・ローカル(development)環境　＝＞ドメインのついたURLが送信される
 https://ドメイン/users/password/edit?reset_password_token=トークン
・プロダクション環境＝＞localhostがついたURLが送信される
 https://localhost:3000/users/password/edit?reset_password_token=トークン

```ruby:production.rb
  # メール送信用
  config.action_mailer.default_url_options = { host: "abc.def(ドメイン)" }
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.raise_delivery_errors = false
  config.action_mailer.smtp_settings = {
    :address => 'email-smtp.us-west-2.amazonaws.com（SESのエンドポイント）',
    port: 587,
    authetication: :login,
    user_name: Rails.application.secrets.smtp_user_name,
    domain: "abc.def(ドメイン）",
    password: Rails.application.secrets.smtp_user_password,
    :enable_starttls_auto => true
  }
```

```secrets.yml
production:
  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
  aws_access_key_id: <%= ENV["AWS_ACCESS_KEY_ID"] %>
  aws_secret_access_key: <%= ENV["AWS_SECRET_ACCESS_KEY"] %>
  smtp_user_name: <%= ENV["SMTP_USER_NAME"] %>
  smtp_user_password: <%= ENV["SMTP_USER_PASSWORD"] %>
```

# 回避できたこと
```ruby:config>initializers>devise.rb
config.scoped_views = true
```
上値抵抗性突破の取引ストラテジー #QuantX

## 上値抵抗性突破とは

過去N日間の株価終値の最高値を、今日の終値が突破した時、さらに上昇することを期待して買いポジションを持つストラテジーです。
とても簡単なアルゴリズムなので、コードも簡単に書けます。

## シグナル

過去９０日間の終値の最高値を今日の終値が突破した場合、ロングポジションを持つ。

## 手仕舞い

益出し：＋５％
損切り：ー３％

## コード

（昨日の勉強会で知ったのですが、QuantXのコードは公開＋Cloneできるんですね。ログイン後、このリンクを辿って、上にあるクローンボタンをおしてクローンしてください。）

clone : https://factory.quantx.io/developer/2729d13d204b4f2db1c08385ad5d13b0

``` python
############################################################################
# 上値抵抗線突破
############################################################################


def initialize(ctx):
    ctx.target = 0.10
    ctx.period = 90
    ctx.loss_cut = -0.03 
    ctx.plofit = 0.05
    
    ctx.codes = [1605, 1925, 2503, 4519, 4911, 6301, 6752, 7741, 8001 ]
    ctx.symbol_list  = ["jp.stock.{}".format(code) for code in ctx.codes]

    ctx.configure(
      channels={
        "jp.stock": {
          "symbols": ctx.symbol_list,
          "columns": ["close_price_adj",    # 終値(株式分割調整後) 
          ]}})

    def _RESISTANCE_LINE(data):
      df_close = data["close_price_adj"].fillna(method='ffill')
      df_Max_close = df_close.rolling(window=ctx.period).max() 
      buy_sig = df_Max_close == df_close 

      # memo 参照
      ctx.logger.info(df_Max_close.tail())
      return {
        "buy:sig": buy_sig,
        "max": df_Max_close, 
        }

    # シグナル登録
    ctx.regist_signal("RESISTANCE_LINE", _RESISTANCE_LINE)

def handle_signals(ctx, date, current):

    # ポジションクローズ
    for (sym,val) in ctx.portfolio.positions.items():
      rtn = val["returns"]

      if rtn < ctx.loss_cut:
        sec = ctx.getSecurity(sym)
        # memo 参照
        sec.order_target_percent(0, comment="損切り {:.2%}".format(rtn))

      elif rtn > ctx.plofit:
        sec = ctx.getSecurity(sym)
        sec.order_target_percent(0, comment="益出し {:.2%}".format(rtn))   

    df = current.copy() 
    df = df[df["buy:sig"]]

    if not df.empty:
      for (sym, val) in df.iterrows(): 
        sec = ctx.getSecurity(sym)
        sec.order_target_percent(ctx.target, comment= "シグナル買")

```


## 結果

![Screenshot from 2018-08-16 14-12-18.png](https://qiita-image-store.s3.amazonaws.com/0/14019/6ed29295-2b9d-a771-3049-1a2f5d2e1351.png)

## memo

### log と print 

QuantX では `print` は使用不可です。
出力したい場合は、`ctx.logger.info` (レベルは debut/info/warn/error/critical ) が使えます。

ログは、IDE画面の下に出るログ画面に表示されます。


### order_target_percent の comment 

上のコードの `sec.order_target_percent(0, comment="損切り {:.2%}".format(rtn))`で使っているcomment はどこに出力されるの？という質問を受けました。

バックテストの結果画面の、個別銘柄詳細タブを開くと、各個別銘柄の各取引を確認できます。そこにコメントという欄がありそこで確認できます。

![Screenshot from 2018-08-16 14-24-05 (1).png](https://qiita-image-store.s3.amazonaws.com/0/14019/48d80a70-45d1-6bf7-5779-b44a6659184f.png)

## 感想

QuantX ユーザーのための `pandas` 勉強会をしたほうがいいなーと思っています。



## 免責注意事項
+ このコードに基づき投資した結果、損害が発生しても，一切責任を持ちません．
+ このコードが正しく機能する保証は一切致しません．
+ このアルゴリズムを勧めているわけではありません．あくまで QuantX / Python のサンプルコードとして掲載しているだけです．
Vue.js のサンプル　(button クリック)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="https://unpkg.com/vue@2.6.14"></script>
<title>vue.js ex03</title>
</head>
<body>
<table>
<tr>
<td>
<div id="green">
  <button v-on:click="func01">Green</button>
	&nbsp;
  {{ counter_green }}
</div>
</td>

</tr>
<tr>
<td>
<div id="yellow">
  <button v-on:click="func01">Yellow</button>
	&nbsp;
  {{ counter_yellow }}
</td>
</div>
</tr>
<tr>

<td>
<div id="red">
  <button v-on:click="func01">Red</button>
	&nbsp;
  {{ counter_red }}
</div>
</td>
</tr>
</table>

<p />
<div id="clear">
  <button v-on:click="func01">Clear</button>
</div>

<script src="ex03.js"></script>
<p />
Aug/16/2018<p />
</body>
</html>
```

```js:ex03.js
// ---------------------------------------------------------------
//	ex03.js
//
//					Aug/18/2018
//
// ---------------------------------------------------------------

green = new Vue({
	el: '#green',
	data: { counter_green: 0 },
	methods: {
	func01: function () { this.counter_green += 1 }
	}
})

yellow = new Vue({
	el: '#yellow',
	data: { counter_yellow: 0},
	methods: {
	func01: function () { this.counter_yellow += 1 }
	}
})

red = new Vue({
	el: '#red',
	data: { counter_red: 0},
	methods: {
	func01: function () { this.counter_red += 1 }
	}
})

new Vue({
	el: '#clear',
	data: {},
	methods: {
	func01: function () {
		 green.counter_green = 0
		 yellow.counter_yellow = 0
		 red.counter_red = 0
		 }
	}
})

// ---------------------------------------------------------------
```

実行の様子
![vue_aug1603.png](https://qiita-image-store.s3.amazonaws.com/0/179446/bf1f8b3a-c77f-5dab-ea3b-0d754d82d51a.png)

次のバージョンで確認しました。

```text
Vue.js v2.6.14
```
RobotFrameworkに入門したときに躓いたポイント

## はじめに
ネットワーク機器のテストなどによく使われている(?)RobotFrameworkに触れる機会があったので、その際に躓いたポイントを列挙します。Pythonなどのプログラミング言語と異なる点と捉えていただいても良いかもしれません。

またこの記事を書いておいてなんですが、RobotFrameworkは日本語ドキュメントが充実しているので、ちゃんと読んでいればここに記述してある点で引っかかることも少ないかと思います (読み落として躓いてしまったのが私です)

## キーワードの引数の記述には空白が2個以上必要
空白が2個以上もしくはタブ文字がない場合、キーワードの一部として認識されます。

```
# エラー
Should Be True ${condition}
# 正常
Should Be True  ${condition}
```

## 文字列リテラル以外の記述方法
RobotFrameworkでは装飾なしで記述されたものは文字列として扱われます。
変数記法`${}`を使用すると、応じた型に変換してくれます。

```
# 文字列
${string} =  Set Variable  2

# 数値
${number1} =  Set Variable  ${2}
${number2} =  Set Variable  ${3.14}
${number3} =  Set Variable  ${-1e-4}

# 真偽
${t} =  Set Variable  ${true}
${f} =  Set Variable  ${false}

# None
${n} =  Set Variable  ${None}
```

## Pythonのインスタンス作成
キーワード中でPythonのインスタンス生成を行いたい場合、ライブラリとして読み込む必要があります。
ライブラリとして読み込んだ場合、インスタンス生成まで行われるようです。
よって複数のインスタンスが必要となる場合、読み込んだライブラリに別名を付けましょう。

```python
# 例クラス
class ExampleClass():
  def __init__(self, arg1):
    print('init')

  def function(self):
    print('function')

  def func_tion2(self):
    print('func_tion2')
```

```
# Settingsに記述
*** Settings ***
Library  example_module.ExampleClass  arg1
Library  example_module.ExampleClass  arg1  WITH NAME  ExampleClass2

# テストケース中に記述
Import Library  example_module.ExampleClass  arg1
Import Library  example_module.ExampleClass  arg1  WITH NAME  ExampleClass2

# 使用
ExampleClass2.function
ExampleClass2.func tion2
```

### 注意点
ライブラリとして読み込むため通常の変数とスコープが異なります。
ちゃんと調べられておらず申し訳ないですが、少なくともテストケーススコープ以上の範囲になるようです。
`Import Library`キーワードを使用して通常のPythonのインスタンスと同様に扱って痛い目を見ました。

## 参考
[Robot Framework 和訳・日本語ドキュメント集](https://robotframework-ja.readthedocs.io/ja/latest/index.html)
[StackOverflow - Creating instances of python class from Robotframework](https://stackoverflow.com/questions/48159051/creating-instances-of-python-class-from-robotframework)
python djangoサーバのパッケージ管理（仮想環境管理）

開発の際の備忘録的に参照
# venvとは
下記にまとまっていたので，venvとか，仮想環境とかなんぞや？って方は見てください．
https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e
なんのために使うかというと，個人だけで開発している人とかには縁遠いものかもしれませんが，チーム開発には必須．リポジトリごとに違うPythonパッケージをpipでインストールできるようになる．最高かよ．

# venvの使用方法

作成するプロダクトがあるリポジトリ直下にて以下のコマンドを実行．
すると，リポジトリにvenvというディレクトリが作成されて，Pythonパッケージを格納する場所ができる．

```zsh
$ python -m venv venv
```
そして，アクティベイトを実行する

```zsh
$ . venv/bin/activate
```

あとはpipを最新の状態にして，パッケージをインストールするだけ．
今回はrequirements.txtに記載されてあるパッケージを一括でインストールしている．

```zsh
$ pip install --upgrade pip
$ pip install -r requirements.txt
```

以上．備忘録なので軽めに書いてます．
OpenPNEを安価で移行してみようとするっ

でAWSに相談すると

http://calculator.s3.amazonaws.com/index.html?lng=ja_JP#r=NRT&s=EC2&key=calc-3D0983C0-5965-4859-9435-85B5D7F205F9

コレどうやねん　って言われましたっ

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/instance-types.html

なんか色々あってわかりにくいけど
嫁さん説得してやってみたいなー
形態素解析の環境を整えた日

1.一応新しくディレクトリを作った。

2.ライブラリをインストールする

```
$brew install mecab-ipadic git curl xz
```
3.git cloneする

```
$git clone —depth 1 https://github.com/neologd/mecab-ipadic-neologd.git
```

4.インストールする

```
$cd mecab-ipadic-neologd; ./bin/install-mecab-ipadic-neologd -n
```
コマンドラインで使ってみた
```
mecab -d /usr/local/lib/mecab/dic/mecab-ipadic-neologd
```
```
私は形態素解析をやってみるぞ。
私	名詞,代名詞,一般,*,*,*,私,ワタシ,ワタシ
は	助詞,係助詞,*,*,*,*,は,ハ,ワ
形態素解析	名詞,固有名詞,一般,*,*,*,形態素解析,ケイタイソカイセキ,ケイタイソカイセキ
を	助詞,格助詞,一般,*,*,*,を,ヲ,ヲ
やっ	動詞,自立,*,*,五段・ラ行,連用タ接続,やる,ヤッ,ヤッ
て	助詞,接続助詞,*,*,*,*,て,テ,テ
みる	動詞,非自立,*,*,一段,基本形,みる,ミル,ミル
ぞ	助詞,終助詞,*,*,*,*,ぞ,ゾ,ゾ
。	記号,句点,*,*,*,*,。,。,。
```

参考:https://www.slideshare.net/overlast/effective-mecabipadicneologdebisuta-1?next_slideshow=1