OmniAICreator/Qiita-1.07M huggingface dataset:
デコレーター2

```py:2つのデコレーター1
def print_more(func):
    def wrapper(*args, **kwargs):
        print('func:', func.__name__)
        print('args:', args)
        print('kwargs:', kwargs)
        result = func(*args, **kwargs)
        print('result:', result)
        return result
    return wrapper

def print_info(func):
    def wrapper(*args, **kwargs):
        print('start')
        result = func(*args, **kwargs)
        print('end')
        return result
    return wrapper

@print_info
@print_more
def add_num(a, b):
    return a + b
    
r = add_num(10, 40)
print(r)
```

```:2つのデコレーター1の実行結果
start
func: add_num
args: (10, 20)
kwargs: {}
result: 30
end
30
```
@print_info と @print_more の順番を入れ替えると
実行結果は

```:入れ替えた場合の実行結果
func: wrapper
args: (10, 40)
kwargs: {}
start
end
result: 50
50
```
となる

これは、
下記の様に
@を使わない書き方でかくと少しは分かりやすいかも。。。

```py:2つのデコレーター2
def print_more(func):
    def wrapper(*args, **kwargs):
        print('func:', func.__name__)
        print('args:', args)
        print('kwargs:', kwargs)
        result = func(*args, **kwargs)
        print('result:', result)
        return result
    return wrapper

def print_info(func):
    def wrapper(*args, **kwargs):
        print('start')
        result = func(*args, **kwargs)
        print('end')
        return result
    return wrapper

def add_num(a, b):
    return a + b

f = print_info(print_more(add_num))
r = f(10, 40)
print(r)
```

```:2つのデコレーター2の実行結果
start
func: add_num
args: (10, 20)
kwargs: {}
result: 30
end
30
```

print_info で print_more を包み込むイメージ。。。
Dockerを触ってみる

##はじめに
前回の記事でDockerってどんなものなんだろうってことを軽く調べて書かせて頂きました。
今回は実際にDockerを使用して開発環境を構築してみよう！って内容を書きたいと思います。
まずは操作に慣れたいのでイメージを取得してコンテナを作成して起動までをやってみたいと思います。

##主なコマンド
+ docker pull リポジトリ:タグ (イメージの取得)
+ docker run イメージ名 (コンテナの生成から起動)
+ docker start コンテナID(もしくはコンテナ名) 
+ docker stop コンテナID(もしくはコンテナ名)
+ docker rm コンテナID(もしくはコンテナ名)
+ docker ps (起動中のコンテナ表示)
+ docker ps -a (状態に関係なくすべてのコンテナを表示)
+ docker ps -aq (コンテナIDのみ表示)
+ docker commit コンテナID(もしくはコンテナ名) イメージ名:タグ (コンテナからイメージ作成)

##イメージの取得
まずcentosのイメージを取得します。

```
centos7: Pulling from library/centos
ab5ef0e58194: Pull complete
Digest: sha256:4a701376d03f6b39b8c2a8f4a8e499441b0d567f9ab9d58e4991de4472fb813c
Status: Downloaded newer image for centos:centos7
docker.io/library/centos:centos7
```

イメージ一覧を表示して確認。

```
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
centos              centos7             5e35e350aded        2 months ago        203MB
```

これでイメージの取得は完了です。めっちゃ簡単！！

##イメージからコンテナを作成、起動

```
$ docker run -it -d --name centos7 centos:centos7
Unable to find image 'centos:centos7' locally
centos7: Pulling from library/centos
ab5ef0e58194: Pull complete
Digest: sha256:4a701376d03f6b39b8c2a8f4a8e499441b0d567f9ab9d58e4991de4472fb813c
Status: Downloaded newer image for centos:centos7
9ac1b47222b99cb76f33837836e30859d7a0420fdccb694d0deb795a5da7b7b7
```
起動できているか確認

```
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
9ac1b47222b9        centos:centos7      "/bin/bash"         2 minutes ago       Up 2 minutes                            centos7
```
STATUSの欄を見るとUp 2となっているので起動できているかと思います。

##実際にコンテナを操作してみる

```
$ docker exec -it centos7 /bin/bash
[root@9ac1b47222b9 /]#
```
これでコンテナ内に入れたのでコマンド操作が可能になります。
コンテナから抜けるにはexitで抜けれました。

##コンテナの停止

docker stop コンテナID(またはコンテナ名)
上記でコンテナを停止できます。

```
$ docker stop centos7
centos7
```

停止しているか確認

```
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
```

プロセスが表示されていないので正しく停止してそうです。

##意外と直感的に操作できた
linux環境を触ったことある人なら意外と簡単に操作できるなって感じました。
これからは自分でイメージを作成したりdockerfileについても勉強して記事にしていきたいと思います。
【Ruby】ある整数の約数（要素の数、和）を求める

興味本位で書いてみた結果の、備忘録用です。
（メソッドの定義文については、幸運にもscivola様からアドバイスを頂きました。1行でのリファクタリングが可能です。是非コメント欄をご参照ください。）

```ruby:divisor.rb
def divisor(num)
  result = []
  i = 1
  while i <= num do
    remainder = num % i
    if remainder == 0
      result << i
    end 
    i += 1
  end
  return result
end

puts "約数を算出したい整数を入力してください"
num = gets.to_i
r = divisor(num)
puts r
puts "約数の数は#{r.length}です"
puts "約数の合計は#{r.sum}です"

```
ローカルでpaizaスキルチェックを解けるようにしてみた。(C#)

## 今回やること
C#で[paiza](https://paiza.jp/challenges)のスキルチェックをローカル環境でも解けるようにする。テストケースもしっかり試せるように作ります:relaxed: (正しいかどうかのテストコードはまだできていません。)


##ローカル環境でできることの利点

* 補完機能が使える
* 使い慣れたテキストエディタが使える
* テンプレートが作れるので、`using宣言`を毎回書く手間が省ける

## 手順
1. mono（C#の実行環境）のインストールをする
2. runファイルをカレントディレクトリ(プロジェクト直下)に作る
3. `chmod +x run`で`run`に実行権限を与える
4. `main.cs`をフォルダ直下に作る

runファイルの中身は以下の通りにしてください。

```sh

#!/bin/bash
mcs ../main.cs main.cs -main:test
mono ../main.exe 
```

`main.cs`は以下の通りにしてください

```cs

using System;
using System.IO;
using static Paiza;

public class test{
        public static void Main()
        {
            var input = Console.In;
            Console.SetIn(File.OpenText("case1.txt"));
            try
            {
               Paiza.Main();
            }
            finally
            {
                Console.SetIn(input);
            }
            Console.ReadKey();
        }
    }
```


## 実行の仕方

1. Templateフォルダをコピーし、Templateフォルダの名前を問題番号などに改名する
2. `main.cs`にスキルチェックのコードを書く
3. `case1.txt`にテストケースをコピーする
4. 実行したいフォルダ内に移動する
5. `../run`を実行する

Templateフォルダ内の`main.cs`は以下のようにしてください

```cs
//使うusingのみでOKです。
using System;
using System.Collections.Generic;

public class Paiza{
    public static void Main(){  
    }
}
```

Templateフォルダの`case1.txt`は、paizaスキルチェックの問題のテストケースの形式をそのままコピーするだけでOKです。

## 最後に
paizaで自分が書いたコードをGitHubのプライベートリポジトリなどで管理することによって、コードを振り返ったりすることが簡単にできるようになるので、ページを行ったり来たりすることなく、振り返りができます！
テスト技法について(ブラックボックステスト、ホワイトボックステスト、経験ベーステスト)

#はじめに
テストを行う上でその具体的な技法と大枠のカテゴリについて説明していきます。
#テスト技法とは
テスト技法の定義ですが、
**「テストケースを作成したり選択するための技法」**
とされています。
あるテスト対象に対して、テストケースを作っていくための方向性を具体的に定めたものになります。

テスト技法はJSTQBにおいて大きく下記の３つのカテゴリに分けられています。
・ホワイトボックステスト
・ブラックボックステスト
・経験ベーステスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55566/2e59444d-eed0-f911-2e62-6d7cb54d4ac8.png)

これらの技法は、それぞれを組み合わせて使うことでテストの目的を達成していくことが可能です。

本稿では、各テスト技法についての概要と具体的な手法について説明します。

#ブラックボックステスト技法
ブラックテスト技法とは、その名の通り、内部をブラックボックスとして行うテスト技法です。入力に対して出力が正しいかどうかを確かめます。
###同値分割法
同値分割法はブラックボックステストで最もわかりやすいテストです。
入力データを同じ処理が行われるパーティションに振り分け（同値パーティション）、
パーティション内の代表的なデータを１つ選び、テストを実施します。
例えば、「0以上100未満の整数で受け取り、その整数を出力する」という仕様のシステムがあった時、下記のような有効同値パーティション、無効同値パーティションに区切ることができそれぞれの値をテストを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55566/4cdc356c-8207-b60c-5f7a-66ed919061be.png)


###境界値分析
境界値分析は同値パーティションにおいて、境界値をテストする技法です
不等号ミスなど、境界には多くの欠陥が潜んでおり、それらの発見を目的としています。
同値分割法を拡張した技法になります。
例えば、上記の仕様では、境界値は0と100です。
境界値の範囲に含まれる値と含まれない値の正しさをテストすることを2ポイント境界値分析法というのに対し、境界値と境界値の前後±1(-1,0,1と99,100,101)の正しさをテストすることを3ポイント境界値分析といいます。


###デシジョンテーブルテスト
デシジョンテーブルとは、入力と出力の組み合わせを表にまとめたものであり、システムの複雑なルールや条件の正しい動作をテストするための技法です。
下記のように、各規則を組み合わせたテストケースを作成します。
利点として、重要な条件の組み合わせを全て識別することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55566/18b8a9df-1c11-facb-428b-f5b91802eb0e.png)

###状態遷移テスト
現在の条件や前の条件、システムの状態によっては期待した動作とは全く異なる動作を行う場合があります。
状態を考慮したテストケースを設計する技法を、状態遷移テストといいます。

状態遷移図と状態遷移表を作成し、状態の網羅、遷移の網羅の観点からテストを行います。

###ユースケーステスト
ビジネスシナリオやシステムの使い方に基づいて、***ユースケース***を抽出し、ユースケースを網羅できるようなテストケースを設計する技法です。

ユースケースの種類
・ビジネスユースケース：
　　　ビジネスレベル（抽象的なレベル）で顧客と企業との相互作用
　　　(企業が営む事業を一種のシステムとみなす)
・システムユースケース：
　　　ユーザーとテスト対象のシステムとの相互作用

ユースケースの記述内容
　　・アクター(ユーザー及システム)とサブジェクト(テスト対象のシステム)との間の相互作用
　　・相互作用に伴うサブジェクトの状態。
・システムやソフトウェアの振る舞いを識別できる。
・ユーザーや顧客にとって価値のある結果が得られるものに限り記述。


#ホワイトボックステスト技法
ブラックボックステストがテストの観点を外見(外から見える振る舞い)に設定するのに対して、内面に観点を設定したのがホワイトボックステストになります。


###ステートメントテスト
ステートメントテストはコード内の実行可能ステートメント（命令文）に着目してテストケースを設計する技法です。
例えば下記のメソッドにおいては、変数Xが0以外の値を通過した際、（条件分岐が真,①→③)のテストを行うことを指します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55566/fec4e7ba-1314-fe18-5042-942eda71d25a.png)


このテストのカバレッジの算出方法は
テスト対象の実行可能ステートメントの合計数に対するテストにより実行したステートメント数で示されます。

###デシジョンテスト
デシジョンテストはコード内の判定と、その判定結果に着目してテストケースを設計する技法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55566/bc00b11a-cb59-b281-51d5-a58764a7cb4d.png)

###ステートメントテストとデシジョンテストの価値
デシジョンテストを100％網羅することはステートメントテストを100％網羅することと同義です。しかし逆は成立しません。

#まとめ
・テスト技法について説明した。
・ブラックテストとホワイトボックステストの具体的な技法について説明した。
[Laravel] TOAST UI Editorの実装

#### Markdownエディターの実装をしていきます。 今回使用するのは、こちらの[ TOAST UI Editor](https://ui.toast.com/tui-editor/)を使用します。
CDNでサクッと実装していきますね。（npmでトライしたのですが、エラーが止まらなくて諦めました・・・。もしやnpmで実装できた方がいらっしゃれば、オリエンテーションしてください・・・。）

## bladeの編集

viewファイルに、（１）CSSファイルの読み込み、（２）エディタのコンポーネント、（３）JSファイル読み込みを書き込んでいきます。

```php:create.blade.php（個別のblade）
@extends('layouts.app')

// CSSファイルの読み込み
@section('css')
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css">
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
@endsection

// マークダウンエディタを表示させたい場所に記述しよう。
@section('content')
     <div id="editSection"></div>
@endsection

// JSファイル読み込み
@section('javascript-footer')
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>
<script src="{{ asset('js/jquery.imgpreview.js') }}"></script>
@endsection
```

ちなみに、個別のviewファイルを参照している親テンプレートは、以下のような感じになっています。

```php:app.blade.php（親テンプレート）
// headタグ内で個別のCSS呼び出し
<head>
    @yield('css')
</head>

// bodyタグ終了前に個別のJSファイルの呼び出し
<body>
    @yield('content')

    @yield('javascript-footer')
</body>
```

## JSファイルの作成
create.blade.phpの``<script src="{{ asset('js/jquery.imgpreview.js') }}"></script>``部分で読み込んでいる、JSファイルを作成します。
public/jsの下に、.jsファイルを作成（今回はjquery.imgpreview.jsと命名）します。[Document](https://github.com/nhn/tui.editor/blob/master/docs/getting-started.md)を丸写しします。

```javascript
var editor = new tui.Editor({
    el: document.querySelector('#editSection'),
    previewStyle: 'vertical',
    height: '300px',
    initialEditType: 'markdown'
});
```

ファイルを保存して、終了！
以下のような感じで実装できました！！

<img width="602" alt="スクリーンショット 2020-01-12 20.37.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406662/ecdfc7ec-3d48-be2d-1ffc-88e2d9266e19.png">
Google検索結果を常に1年以内で表示するには

# TL;DR
- 直近1年の検索結果を常に表示したい
- 毎度検索ツールを設定するのは面倒  

上記の悩みを解決してくれるchrome拡張があったので備忘録も兼ねて。

https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph

# 使い方
ato-ichinen
https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph

1. 拡張に追加。
2. window右上の[1]アイコンをクリックして有効化。
3. 以上。
GitLabCEで利用ファイルサイズが大きいプロジェクトを表示する一行コマンド

自前運用のGitLabのバックアップサイズが、最近やけに増えたので、原因となっているリポジトリを探したコマンドです。

環境は以下の通りです。

* GitLabCE (12.1.6)
* Amazon Linux (ver1)
* yumインストール

やり方はシンプルで以下の通り。

```bash
du -sm /var/opt/gitlab/git-data/repositories/*/* | sort -n
```

 `/var/opt/gitlab/git-data/repositories/` 配下に `Group名/Project名` という形式で保管されてるので

* ファイル容量を出力してくれる `du` コマンドに `-s` でサマライズしつつ、 `-m` で Mega 表記で出力
* 並び替えをする `sort` コマンドで `-n` で数字の昇順にソート

しています。

表示サンプルは以下の通り。一番サイズが大きいプロジェクトは 487M で、 fuga/documents ということが分かります。表示が長ければ `tail` などで刻むのが良いでしょう。

```text
[root@aws-morihaya-gitlab01 ~]# du -sm /var/opt/gitlab/git-data/repositories/*/*
227     /var/opt/gitlab/git-data/repositories/hoge/moristem-moge.git
312     /var/opt/gitlab/git-data/repositories/piyo/ROOT.war.git
369     /var/opt/gitlab/git-data/repositories/piyo/old_moristem-piyo.git
392     /var/opt/gitlab/git-data/repositories/hoge/item-hoge.git
487     /var/opt/gitlab/git-data/repositories/fuga/documents.git
```

この後は該当プロジェクトの管理関係者に「あなたのリポジトリのサイズが大きいんですが...?」とツッコミを入れる流れです。それでは良いGitLabライフを。
【AWS完全に理解したへの道】 EC2 基本編

【AWS完全に理解したへの道】 EC2 基本編
[IAM 基本編](https://qiita.com/y-u/items/cef40fd249947687810e)
[VPC 基本編](https://qiita.com/y-u/items/40fa729d54ebab52fcb3)
[S3 基本編](https://qiita.com/y-u/items/9517ab2570a4e823fbb8)
[データベース(RDS/ElastiCache/DynamoDB)基本編](https://qiita.com/y-u/items/0d4a9e4ec6844b16b65c)

# EC2(Amazon Elastic Compute Cloud)
ハードウェアに事前投資することなく、必要な数の仮想サーバを起動して、セキュリティやネットワーキングの設定、ストレージの管理を行う。要件変更や需要増に対して、迅速に拡張または縮小できる。
# EC2に関連する主要コンポーネント
ここでは深く掘り下げないが、EC2に連携しているサービスは以下の図のような感じ。

<img width="957" alt="スクリーンショット 2020-01-12 20.09.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70486/482c437a-26cb-3caf-3c4d-5595bd0f3a21.png">

[AWS Black Belt Online Seminar Amazon Elastic Compute Cloud (Amazon EC2)](https://d1.awsstatic.com/webinars/jp/pdf/services/20190305_AWS-Blackbelt-EC2.pdf)より画像を引用

## EC2インスタンス初回作成手順

1. AMI(Amazon Machine Image)の選択
2. インスタンスタイプの選択
3. インスタンスの詳細設定(ネットワーク/IAMロール/ユーザデータなどの設定)
4. ストレージの設定
5. タグ付け
6. セキュリティグループの設定
7. ここまでの設定の確認
8. キーペアの選択

#### 1. AMIの選択
EC2インスタンスを初回起動する際に必要となる仮想マシンイメージ。

#### 2. インスタンスタイプの選択

|インスタンスファミリー|インスタンスタイプ|ユースケース|
|---|---|---|
|汎用(バランス重視)|A1, T3, T3a, T2,M6g, M5, M5a, M5n, M4|ウェブサーバー、コンテナ化されたマイクロサービス、キャッシュサーバー群、分散データストア、開発環境といったスケールアウト型のワークロード|
|コンピューティング最適化|C5, C5n, C4|ハイパフォーマンスのウェブサーバー、科学的モデリング、バッチ処理、分散分析、ハイパフォーマンスコンピューティング (HPC)、機械学習/深層学習推論、広告サービス、拡張性の高いマルチプレイヤーゲーム、動画エンコーディング。|
|GPU(高速コンピューティング)|P3, P2, Inf1, G4, G3, F1|機械学習/深層学習、ハイパフォーマンスコンピューティング (HPC)、計算流体力学、金融工学、耐震解析、音声認識、自律走行車、創薬。|
|メモリ最適化|R5, R5a, R5n, R4, X1e, X1, ハイメモリ, z1d|高パフォーマンスデータベース、分散型ウェブスケールインメモリキャッシュ、中規模のインメモリデータベース、リアルタイムのビッグデータ分析、およびその他エンタープライズアプリケーションなどのメモリ集約型アプリケーションに最適。|
|ストレージ最適化|I3, I3en, D2, H1|NoSQL データベース (例:. Cassandra、MongoDB、Redis)、インメモリデータベース (例: Aerospike)、スケールアウトトランザクションデータベース、データウェアハウジング、Elasticsearch、分析ワークロード。|

#### 3. インスタンスの詳細設定(ネットワーク/IAMロール/ユーザデータなどの設定)
下記画像のようにネットワークやサブネット、IAMロールなどの設定を行う。

<img width="1030" alt="スクリーンショット 2020-01-12 20.33.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70486/e68aa57b-1406-0663-1192-dc1c0d071963.png">

#### 4. ストレージの設定
ストレージデバイスは以下の二種類がある。

* EBS

AZ内に作成されるネットワーク接続型のブロックストレージで不揮発性（永続的なデータボリューム)

* インスタンスストア
EC2インスタンス上の物理ホストの内蔵ストレージで、揮発性（一時的なデータボリューム）
EC2インスタンスを停止すると保存されていたデータは削除される。


##### 注意点
EBSの追加はEC2インスタンスの初回起動後でも可能だが、インスタンスストアを追加できるのはEC2インスタンスの初回起動時のみ。

#### 5. タグ付け
キーとバリューのペアで構成され、このタグを元に検索をかけたり、操作の際の絞り込み条件として指定することができる。

#### 6. セキュリティグループの設定
EC2インスタンスのファイアーウォール
ネットワークトラフィックの制限、ユーザに対するアクセス権限の付与を設定できる。<img width="1022" alt="スクリーンショット 2020-01-12 19.24.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70486/46449355-ffb9-8daf-c508-e0e84fd3e6f1.png">


#### 8. キーペアの作成
EC2インスタンス上のOSに対する安全な認証を提供する機能。
下記画像のようにpemかppkを選択しキーペアを作成する。

<img width="847" alt="スクリーンショット 2020-01-12 19.28.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70486/9b1387f6-132a-41dc-3c00-7e55f1207e15.png">
Git-flowを使ってオートデプロイに乗せる話

## TL;DR

オートデプロイ実装するついでにgit-flow導入を検討中。
リリースブランチで最終ステージングテストするよ。

## 背景

手動デプロイからオートデプロイに切り替えるプロジェクトを担当しています。
オートデプロイを実現するにあたって業務フローを見直していたところ、Gitの運用も今のままだときついのでGit-flowに変えましょうという話になりました。

## Git-flowとは？

Gitの運用に関するベストプラクティスの一つです。

提唱元はこちらです。

> A successful Git branching model
> https://nvie.com/posts/a-successful-git-branching-model/

日本語だと以下の記事が大変良くまとまっています（すばらしい！）

> gitの運用ワークフローのメモ（git-flow、github flow等）
> https://qiita.com/ta-ke-no-bu/items/a9854deb61419a0d64c7

Gitにある程度慣れたユーザは「ブランチをどう切ってどうマージするか？」という問題にぶち当たると思います。
そしてこれには正解がない。業務上のコード管理をどうするかという問題そのものだから。

でもとりあえず悩んだらベストプラクティスから選択してそれに沿うのは賢いやり方です。
料理の素人はレシピ通りに作りましょう。オラそこ隠し味入れてんじゃねぇ！

## 現在のGit運用

ざっくりこんな感じの運用をしてます。

- master: 本番コード
- pj_xxx/dev: プロジェクトごとの開発ブランチ
- pj_xxx/nyaaan: プロジェクトごとの作業ブランチ
- issue/zzz, feature/heyhey, hotfix/vivivi, bugfix/owata: その他有象無象

なんか細かい命名ルールあったけど忘れた。（オレオレルールだと普及も大変です）
trunkブランチもかつてありましたが滅ぼしました。（お察しの通りかつてsvn管理でした）
正直master以外管理されていないです。

リリース時には本番環境よりmasterコードが先行する形になります。

## 現運用の課題点

ざっくりこんな感じ。

### 1. コンフリクト問題

- 開発ブランチ間でコンフリクトしたときに泣ける
- 開発ブランチがmasterちゃんと追従していない場合がある
- 直前のバグ修正の影響で開発ブランチがコンフリクトしてマージできない
- 直前のバグ修正を取り込み漏れでmasterのUTコケてる

### 2. リリース中断時の問題

- リリース中に問題が発覚して撤退した場合masterブランチにrevertを積む必要がある

### 3. 不思議ちゃん

- masterに積まれてるけどデプロイされてない変更があるぞ？

特に今回問題を感じたのは１，２です。（3は自動デプロイしようね）
オートデプロイに乗せるにあたって先にmasterに積んでそれを起動としてしまうと、巻き戻しが発生したときに本質でない変更コミットがガンガン積まれます。

それを避けるためにはmasterは本番変更よりもあとに更新。
共通のdevelopブランチでコンフリクト解決やリリース直前テストをしておきたい。

## Git-flow選択の理由

現運用がほとんどまともにブランチ管理していないので、ベストプラクティス輸入して当てはめるのが一番早いです。
詳細にブランチ運用を定義するための情報も得られてないですし。

他にGitHubFlowとか色々あるのですが、現状うちのプロジェクト進行を鑑みるに、最終調整のdevelopブランチは不可欠ということでgit-flowベースで設計を進めることにしました。（GitHubFlowの方は比較的少人数向きかな？）

## Git-flowのデプロイパイプラインへの当てはめ

元記事の以下のイラストをベースに説明していきます。

![git-model@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184815/2644adbc-1499-8728-7411-9dc6531446aa.png)

[A successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model/)より引用

### メインブランチ(develop/master)

Git-flowにおいて永続するブランチはこの２つのみです。
masterよりdevelopが先行して、デプロイ直後に追いつく形になります。
（主にやりたかったのがこれ）

この２つのブランチは更新を検知してUTを回して方針です。

### リリースブランチ(release/x.y.z)

リリース作業の間だけ存在するブランチ。
developから派生して、デプロイ後にdevelopとmasterにマージされます。
本番環境にはこのブランチをデプロイすることになります。最終クッション。

作成を検知してステージング環境に自動デプロイしてステージングテストができるようにします。
軽微なバグの修正はここにコミットが積まれます。（深刻なバグ？撤退しろ）

２つ以上同時に存在する予定は無いもののバージョン番号のブランチ名つけておいたほうが無難でしょう。

### Featuresブランチ

その他諸々の変更を積むブランチ。プロジェクトの開発ブランチもこの一部。
developから派生してdevelopにマージします。

### Hotdixesブランチ(hotfix/x.y.z)

緊急用。上記のブランチルールによる運用回してられないような危機的状況向けです。
masterから直接派生してmasterとdevelopにマージされます。

実際の運用としては、本番環境を直接触って後付でコミット積む形になると思います。
このブランチ採用すべきか議論を呼んだんですが、結果入れることにしました。

理由としては以下の２点です。

1. デプロイパイプラインは初めは安定しないと思われる
2. うちのサービス特性上、一刻を争う危機的状況は起こり得る

1はともかく2の理由があるので廃止することはなさそうです。

## まとめ

- オートデプロイするうえでgitの運用はちゃんとしような
- 迷ったらベストプラクティス使っとけ
- 開発規模でかいならgit-flowおすすめやで
- ステージングテストはリリースブランチでしよう
論文用のグラフ製図を検討した件


## 概要
最近修士論文を書いていて、Activation function（Sigmoidなど）の説明には、グラフで説明した方がより分かりやすいので、図を書こうとしたが、壁に衝突した。
そこで解決策を模索中に出会ったものを紹介。まず環境は以下になります。

### 環境
* Win10
* Word2016

## 結論部

### Answer first
先に結論を言うとMicrosoft Mathematics（略：MSMath），OneNote(Microsoft), PythonのMatplotlib，Latex という4つの方法を見つけたけど、それぞれの個性がある。

使いやすさ：OneNote ≒ MSMath > Matplotlib > Latex
難易度：Latex >> Matplotlib > MSMath ≒ OneNote （使いやすさと逆）
カスタマイズ可能度：Latex > Matplotlib >> MSMath ≒ OneNote ≒ 0
キレイ度：Latex >> Matplotlib > OneNote > MSMath

では、一つの例にして図を説明しましょう。
Neural NetworksのActivation function としてよく知られているSigmoid関数の図を作ってみよう。


### Method 1 ： Microsoft Mathematics

<img width="663" alt="MsMath-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/b613542a-a102-22e0-01c5-789f396952d2.jpeg">

メインの画面は図で示したように、4つの部分に分けていて、
1. 調整部（グラフの表示区間、枠があるかどうか、出力）
2. 特集な文字や符号を入れるところ？
3. 表示するequationを入力するところなど
4. 表示部分

感想としては、不足点は`グラフ線の色のカスタマイズ`、`表示区間の設定`などあって、スクリーンショットで取ったグラフが論文では見にくいのが感想です。

[Downloadはこちら](https://www.microsoft.com/en-us/download/details.aspx?id=15702)


### Method 2: OneNote
OneNoteでグラフを作成する場合、まず数式を作って（１）、ツールの数学を選択し（２）、2Dグラフを作成して（３）、ノートに挿入する（４）って感じです。それぞれの位置などは図に参照。
そこまで複雑ではないが、やはりグラフのカスタマイズできる部分が少ないという感じがあります。

<img width="619" alt="OneNote.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/877ddae1-e10f-f5ca-f5be-d934204cb2de.jpeg">

### Method 3：Matplotlib
プログラミングを用いることで、ここからはやっと自由にカスタマイズできそうになった。

```python
import math
import numpy as np 
import matplotlib.pyplot as plt 
  
x = np.linspace(-5, 5, 100) 
pow_ex = pow(e,x)
y = pow_ex/(pow_ex+1) 

plt.plot(x, y, color = 'red') 
plt.title("Sigmoid function") 
plt.xlabel("The label of x") 
plt.ylabel("The label of y") 
plt.show() 
```

上記のコードの結果は以下のグラフになる。
<img width="619" alt="sigmoid_function_matplotlib" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/4e4ff5c3-c410-c72e-e799-3308fc9c2ad4.png">

この中のほとんどが調整可能なので、具体的のやり方は公式サイトは私より詳しいので、そちらを参照していただけます。→[Examples using matplotlib.pyplot.plot](https://matplotlib.org/3.1.1/api/_as_gen/matplotlib.pyplot.plot.html#examples-using-matplotlib-pyplot-plot)


### Method 3： Latex

まずコードは以下になります。

```latex
\documentclass{article}

\usepackage{pgfplots}
\pgfplotsset{width=10cm, compat=1.16}

\begin{document}
\begin{tikzpicture}
\begin{axis}[
    axis lines = center,
    xmin = -5, xmax=5,
    ymin=-1.5, ymax=1.5,
    xlabel = $x$,
    ylabel = {$y=sigmoid(x)$},
]

\addplot [
    domain=-5:5,
    samples=100,
    color=black,
]
{e^x/(e^(x)+1)};

\end{axis}
\end{tikzpicture}
\end{document}
```

これを[Overleaf](www.overleaf.com)というOnline LatexのwebサービスにCompileしたら、以下の図が出てきました。

<img width="619" alt="latex_sigmoid" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457921/c91a998c-9605-a97f-3174-2760c8f239fb.png">

Latexのいろんな使い方もあるが、ネットでたくさん情報あるので、いくつかを載ります。
 - [Learn latex in 30 mins](https://www.overleaf.com/learn/latex/Learn_LaTeX_in_30_minutes)
 - [30分もいらないLaTeX入門](https://qiita.com/Go_in_lis/items/41688cdf89eab8f15f71)

latexでできた図のスタイルはわりと自分の好みで、ただコードを調整するのにのdebugは大変すぎるデメリットもある。

## 終わりに
カスタマイズできないのがやや不便だと思うので、LatexとMatplotlibで行くことにしました。

~~※やっと今回の件を記録したんで、頭というメモリからスペースをリリースできた。すっきりしたことで修士論文続ける。~~
Flutter DartでIndex付きのmapを簡単に行うExtension

## Extension

ちょいちょいmapをindex付きで使いたいことがあったので作りました。英語的には`EnumeratedMap`のほうが正しいんだろうか…。

`forEach` のほうがメモリ食うけど高速かなと思い`forEach`で書いてます。

```dart
extension IndexedMap<T, E> on List<T> {
  List<E> indexedMap<E>(E Function(int index, T item) function) {
    final list = <E>[];
    asMap().forEach((index, element) {
      list.add(function(index, element));
    });
    return list;
  }
}

// example
final List<int> list = [1, 2, 3];
list.indexedMap((index, element) => index.toString() + element.toString());
```
Rでヒストグラムを整える（x軸の範囲・ビンの数・タイトル・色）---初心者向け---

# ヒストグラムの装飾（xlim, breaks, main, col)
ヒストグラムは, 以下のように色々指定することができます.

・xlimは, 2列ベクトルを用いて, 範囲を指定する.　c(xmin. xmax)と指定します.
・breaksは, ヒストグラムをn-1個のビンに指定することができます.
・mainは, グラフのタイトルを指定することができます.
・colでは, 色を指定することができます.

```r
# Put graphs in 3 rows and 1 column
par(mfrow = c(3, 1))

# Histograms for each species using options
hist(iris$Petal.Width [iris$Species == "setosa"],
  xlim = c(0, 3),
  breaks = 9,
  main = "Petal Width for Setosa",
  xlab = "",
  col = "red")

hist(iris$Petal.Width [iris$Species == "versicolor"],
  xlim = c(0, 3),
  breaks = 9,
  main = "Petal Width for Versicolor",
  xlab = "",
  col = "purple")

hist(iris$Petal.Width [iris$Species == "virginica"],
  xlim = c(0, 3),
  breaks = 9,
  main = "Petal Width for Virginica",
  xlab = "",
  col = "blue")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565967/88a3dc98-0dcc-6849-b482-84cb93b4e4a2.png)
Sonos で Lチカ してみた。

# はじめに
電子工作のはじめの一歩と言えば「Lチカ」ですね。
ワイヤレススピーカーシステム Sonos でも「Lチカ」を試すことができます。
Sonos One にはステータスライトがついており、このステータスライトの色や点滅で状態を確認することができます。(白色点灯状態が正常です)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/86d73255-1769-ff08-bf3a-752b701515f3.png" width="50%">
ただ、夜中暗い中でステータスライトが点灯していると眩しいことがあるので、Sonos アプリからステータスライトを OFF にすることができます。
<img width="50%" alt="Sonos_App.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2b1d0d60-7e05-f3b6-9fa8-ebd8842076f6.jpeg">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/da110d97-46a4-26d3-8d87-f90dedefad61.png" width="50%">

# プログラムから LED を操作する
Sonos は <A HREF="https://musicpartners.sonos.com/?q=docs">API</A> が公開されていますので、プログラムから LED を操作することが可能です。

- getLEDState() →現在の LED の状態を取得します
- setLEDState(desiredState) → LED の状態を変更します

JavaScript (node.js) の <A HREF="https://github.com/bencevans/node-sonos">node-sonos</A> モジュールを使用してスクリプトで LED を操作してみました。

## インストール
node のバージョンを確認します。(nodebrew で node のバージョン管理を行っています。)

```bash
$ nodebrew list
v6.14.1
v8.14.0
v9.11.2
v12.14.1

current: v12.14.1
$ node -v
v12.14.1
```

node-sonos をインストールします。

```bash
$ npm install sonos
```

## スクリプトの実行
Sonos の LED のステータスを確認して、On なら Off へ、Off なら On へ変更するスクリプトです。

```bash
$ node setLEDState.js 
Got current LED state "Off"
Success LED: Off->On
$ node setLEDState.js 
Got current LED state "On"
Success LED: On->Off
```

```javascript:setLEDState.js 
const Sonos = require('sonos').Sonos
const sonos = new Sonos(process.env.SONOS_HOST || '192.168.13.4', process.env.SONOS_PORT || 1400)

sonos.getLEDState().then(state => {
  console.log('Got current LED state %j', state)
  if (state == "On") {
    sonos.setLEDState("Off").then(state => {
      console.log('Success LED: On->Off')
    }).catch(err => { console.log('Error occurred %j', err) })
  }
  if (state == "Off") {
    sonos.setLEDState("On").then(state => {
      console.log('Success LED: Off->On')
    }).catch(err => { console.log('Error occurred %j', err) })
  }
}).catch(err => { console.log('Error occurred %j', err) })
```

<A HREF="https://sonos-com.amebaownd.com/">SONOS Japan User Group</A> に他の記事もあるので参考になります。
Pythonの環境構築がしたい

この記事は、Pythonの動作環境もないけど、とりあえず動く状態にしたい。
というための記事です。環境構築です。

同じような記事は星の数ほどある気がしますが、自分メモと理解するのも兼ねて書かせていただきます。

## 前提

- Windows10
- エディタはVSCodeを使います

## VSCodeのインストール

Microsoftが提供している無料のエディタです。
[公式サイト](https://code.visualstudio.com/download)からダウンロードできます。

VSCode採用の理由ですが、

- 無料
- Python以外にも用途がある
- 社内で使ってる

です。ここは好みのエディタあれば、VSCodeじゃなくてもよいです。

----

exeファイルがダウンロードされたら、ダブルクリック。
あとはダイアログにしたがってぽちぽちするとあっという間にインストールが完了します。
(特にこだわりがない場合はデフォルトでよいかと思いますが、Codeで開くは追加しておくと便利かと思います)

## Anacondaのインストール

Anacondaはpython含めて、便利なライブラリがたくさん詰まっているものらしいです。
色々入ってた方が便利かと思うので、今回はpython単品ではなくこちらのAnacondaをいれていきたいと思います。

[公式サイト](https://www.anaconda.com/distribution/#download-section)からダウンロードします。

こちらもセットアップ用のexeファイルがダウンロードされるので、ダブルクリックして手順通りやっていけばOKです。
しばらくするといろいろダウンロードがはじまります。結構時間がかかるので休憩しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561891/cf3da09c-667a-107d-377a-9de1a062ab24.png)

Nextが押せるようになったら終わり！ぽちぽちと押していればFinishします。

## VS CodeにpythonのExtensionをいれる

- VSCodeを開き、「Ctrl+Shift+x」でExtensionの検索画面を開きます。
- 検索にPythonと入力し、PythonのExtensionを検索し、「Install」をクリックします。

## ためしに書いてみる

- 「Ctrl+N」で新しいファイルを開く
- `print("Hello World!")`と書く
- 「Ctrl+S」で`hello.py`という名前で適当な場所に保存します。
- 右クリック>Run Python File in Terminalで実行できます。
- `Hello World!`が出力されれば無事完了です！お疲れ様でした！

以上で実行できました。

無事環境も整ったので、ちょくちょくpythonのコードも書いていこうと思います^^
では、お読みいただきありがとうございました:bamboo:
Macの日本語入力があまりにも遅かったので設定を見直してみたら解決した

## 結果(対処方法)

![スクリーンショット 2020-01-12 20.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252348/2c722edd-cfc3-2e4b-7165-a7ca826bec8b.png)

`設定 > 入力ソース > 推測候補表示` のチェックボックスをオフにしたところ、入力遅延が解消されました。

## 愚痴

最近MacBook Pro 16インチを買ったんですが、買って早々からずっと入力が遅くて、なんで最新のMacBookなのにこんなに入力遅いんだとイライラしていたんですが、さすがにそんなわけないだろうと思い、キーボードの設定を見直してみたところ、やはり重たそうな処理がONになっていて、予想通り重かったという話。

同じような苦しみを味わっている方の助けになることを願います。
【初心者向け】Rubyで超簡単ドリンク注文アプリケーションを作る

#メソッドを使用して、ドリンク注文アプリケーションを作ってみる

条件
　・実行時、どのようなドリンクがあるかを表示させる
　・ドリンクには番号をつける
　・選ばれた番号と同じドリンク名を表示させる

#擬似コードを書く

```rb

def otya
　お茶が選ばれたときのメソッド 
end

def coffee
  コーヒーが選ばれた時のメソッド
end

def beer
  ビールが選べれた時のメソッド
end

def saida
  サイダーが選べれた時のメソッド
end


  puts "何を飲みたいですか？"
    お茶、コーヒー、ビール、サイダーと、それぞれのドリンクメニューを表示させる

   1の時お茶
   2の時コーヒー
   3の時ビール
   4の時サイダー
   それ以外は
   "無効な入力値です"と表示させる
    end

```

・それぞれのドリンクが選ばれた際のメソッドを用意しておく（今回はただ、文字を表示させるだけ）
・ドリンクメニューはeach.with_indexを使用し、メニューの左に1から番号をつける
・case whenを使用し、条件分岐を書いて、それぞれのメソッドが動くように書く

#実際にコーディングしていく

```rb
def otya
  puts "あなたが選んだのはお茶"
end

def coffee
  puts "あなたが選んだのはコーヒー"
end

def beer
  puts "あなたが選んだのはビール"
end

def saida
  puts "あなたが選んだのは三ツ矢サイダー"
end


  puts "何を飲みたいですか？"
    drink_menu = ["お茶","コーヒー","ビール","三ツ矢サイダー"]
    drink_menu.each.with_index(1) do |drink_name, number|
      puts "#{number}:#{drink_name}"
    end

  case gets.to_i
    when 1
      otya
    when 2
      coffee
    when 3
      beer
    when 4
      saida
    else
      puts "無効な入力値です"
    end

```

#動作確認

```
何を飲みたいですか？
1:お茶
2:コーヒー
3:ビール
4:三ツ矢サイダー
1
あなたが選んだのはお茶
```

メソッド名は本当はよくないんですが、適当です。。。
今回、メソッドを使ったアプリケーションを作ってみたかった。。。

まだまだ未熟ですが、プログラム考えてる時ってワクワクして楽しいですよね。
次はもうちょっと複雑な処理もやってみようと思います。

最後までみていただきありがとうございます。
【try-catchは難しくなかった】cakePHPとPHPの理解を深めるためフォームの書き方を復習してみた

##cakePHP2.x

```view/Users/create.ctp

$this->Form->create('モデル名','オプション');
$this->Form->input('フィールド','オプション')
$this->Form->end('ボタン名')
```

```Controller/UsersController.php

function create {
 if($this->request->is('method属性'){
   $this->モデル名->save($this->request->data);
 }
} 
```

##覚えておく事

###モデル等の命名について
テーブル名は「-s」をつけるが
ただモデル名は「-s」をつけない
　※Controller,Viewは「-s」をつける

###(createの)オプション~inputのオプションは別~

```php
array('type'=>'','action'=>'')
```

typeはHTMLのmethod属性を指定するもの
  └'get'か'post'を指定する
  └PUTやDELETEはvalue属性なのでここに入らない

　actionはaction属性を指定するもの
　　└「.」で編集しているファイルのディレクトリーがはいる

⇒連想配列を書かないとmethodに'post'が入り'action'には自ファイルのアドレスがはいる

###is()
　リクエストタイプを判別する

```php
  if($this->request->is('post')){
    //postの場合の処理}
```

上記の文書の時は、postのリクエストがあった場合の処理をさせている




##PHP7.x

```form.php
<form method="POST" action="<?php print($_SERVER['PHP_SELF']) ?>">
<input type="text" name="name">
<input type="text" name="content">
<input type="submit" name="btn1" value="投稿する">
</form>

<?php
 @$name = $_POST['name'];
 @$content = htmlspecialchars($_POST['content']);


    try{
        $pdo = new PDO('mysql:host=localhost;dbname=study;charset=utf8','root','1234');
        $sql = "INSERT INTO bull(
            name,content
        ) VALUES (
            '$name','$content'
        )";
        $res = $pdo->query($sql);
    } catch(PDOException $e) {
        echo $e->getMessage();
        die();
    }
?>

```
###DBの読み込み

```php
$PDO = new PDO($pdo = new PDO($dsn, $username, $password);
```

PDOクラスをインスタンス化をして、DBに接続できる様にする。
dsn ⇨ DBに接続する文字列（DBによって書き方が異なる）
username　⇨接続するDBのユーザー名
password　⇨接続するDBのパスワード

###try-catch

何らかの理由でDBに接続できなかった時にPDOクラスはPDOException例外を発生するみたいです。
その例外によってスクリプト全体が停止しまわない様に例外対処のために「try-catch-finally」が使われるみたいです。

```php
try{
 //例外が発生する可能性のあるコード
}catch(発生するかもしれない例外の種類 例外を受け取る変数名){
 //例外発生時の処理
}finally{
 //例外に関わらず実行するコード
}

```

###catch(PDOException $e) 
発生したPDOException例外に対して*$e*に例外を受け取らせています。
変数*$e*から例外メッセージを受け取るために

```php
$e->getMessage();
```
と記載しています


###INSERT INTO

```php
INSERT INTO テーブル名(列名1, ...) VALUES(列値1, ...)
```

テーブル名の後ろにカラム名を入れて、VALUESの後ろに代入する値を入れる。

###エラー制御演算子（＠について）

あまり使わない方がいいみたいですがエラーが出て先に進めなかったので利用しました

```php
@エラーを表示させたくないコード
```



###htmlspecialchars
入力した内容の一部をエンコードしてくれる事で悪意のあるスクリプトを不実行にしてくれる。
例えば
<script>alert(1)</script>
とフォームに入力すると

```
&lt;script&gt;alert(1)&lt;/script&gt;
```
とエンコードされDBに保存される。

一番不安に思ったのがそのままDB内容を表示させようとするといけないんじゃね？デコードされるんじゃない？と思いきやサイト表記は　
<script>alert(1)</script>
となる。

理由としてはブラウザがHTMLエンティティ化というものをしてくれるみたい

補足
htmlspecialchars_decodeの使い道
　⇒HTMLエンティティ化したものはブラウザの機能で変換されるが、コード内で使用する際は変換されないのでデコードが必要になるのでDBなどいじる時は必要になる

##参考サイト
<a href=https://qiita.com/kazu56/items/58f18681a942c3f13bd1>【CakePHP】CakeRequest</a>
 ┗$this->requestのメソッドが色々書いているので参考になる


<a href=https://qiita.com/mpyw/items/b00b72c5c95aac573b71>PHPでデータベースに接続するときのまとめ</a>
　┗DB周りについて詳しく書いてる
【学習メモ】Djangoコマンドまとめ

#はじめに
[Djangoチュートリアル](https://docs.djangoproject.com/ja/3.0/intro/tutorial01/)と[Django Girlsチュートリアル](https://tutorial.djangogirls.org/ja/)を進めつつ、メモしたコマンドです。
学習中のため解釈が間違っている可能性があります。
もし間違いを見つけたらコメント等で教えてくださると嬉しいです。

#環境確認

```
# Djangoのバージョン確認
  $ python -m django --version
```

#作成関連
カウントディレクトリにファイル等作成するコマンド

```
# プロジェクト作成
  $ django-admin startproject [プロジェクト名]

# アプリケーション作成
  $ python manage.py startapp [アプリケーション名]

```

#サーバー関連

```
#開発用サーバー立ち上げ
  $ python manage.py runserver
  $ python manage.py runserver [ポート番号]

```

# DB関連

```
#マイグレーションファイルを作成する
  $ python manage.py makemigrations polls

#マイグレーションの名前を引数にとってSQLを返却
  $ python manage.py sqlmigrate polls 0001

#モデルをデータベースに反映
  $ python manage.py migrate

#Django adminのsuperuserを登録する
  $ python manage.py createsuperuser
```
参考：[【学習メモ】MakemigrationsとMigrateについて](https://qiita.com/frosty/items/8c715a53d7920c9cd1eb)
【Rails】kaminariでページネーションを実装

##基本
```rb:Gemfile
gem 'kaminari'
```
```terminal
$ bundle install
```
```rb:Controller
def hoge
  @users = User.page(params[:page]).per(10)
end
```
```rb:View
<%= paginate @users %>
```

##日本語化
localeファイルを作り、以下を記述。

```config/locales/kaminari_ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: ""
          one: "<strong>1-1</strong>/1件中"
          other: "<strong>1-%{count}</strong>/%{count}件中"
      more_pages:
        display_entries: "<strong>%{first}-%{last}</strong>/%{total}件中"
```

##設定ファイルを作成
```terminal
rails g kaminari:config
```
```config/initializer/kaminari_config.rb
Kaminari.configure do |config|
  config.default_per_page = 10
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.params_on_first_page = false
end
```
`config.default_per_page = 10`を設定することで、Controller内の`.per(10)`を省略できるようになります。（サーバーを再起動しないと反映されなかったので注意）

`config/initialize`や`config/locales`以下のファイルを変更した時は、再起動が必要みたいです。

```rb:Controller
def hoge
  @users = User.page(params[:page])
end
```
その他のオプションに関しては[こちら](https://www.yuta-u.com/programing/rails/rails-kaminari#toc7)の記事を参照。

##表示する項目を変更
```terminal
rails g kaminari:views default
```
`app/views/kaminari`以下に7つのファイルが生成されます。
主となるファイルは`_paginator.html.erb`で、主にこのファイルを編集することになります。不要な項目を削除しましょう。

##API
```rb
@item.total_count #=> レコード総数
@item.offset_value #=> オフセット
@item.num_pages #=> 総ページ数
@item.per_page #=> 1ページごとのレコード数
@item.current_page #=> 現在のページ
@item.first_page? #=> 最初のページならtrue
@item.last_page? #=> 最後のページならtrue
```

##`◯位`とかを表示したい
`.each.with_index`と`.offset_value`を組み合わせて実装。

```erb:View
<% @items.each.with_index(@items.offset_value + 1) do |value, index| %>
  <span><%= index %>位</span>
  <p><%= value.name %></p>
<% end %>
```

##参考
[【Rails】kaminariの使い方を徹底解説！](https://pikawaka.com/rails/kaminari)
[kaminariの日本語対応](https://qiita.com/kogache/items/dbfe5658daaf98508133)
[kaminari徹底入門](https://qiita.com/nysalor/items/77b9d6bc5baa41ea01f3)
【Svelte】Svelte環境をDockerで作ってみた【Sapper】


## 概要
完成品はこちら

- [Svelte](https://github.com/mori-hisayuki/svelte-template)
- [Sapper](https://github.com/mori-hisayuki/sapper-template)

詳しい話はまたブログとかに書きます。

## 躓いたと
**Svelte**のみHostとContainerのlocalhostに繋ぐのにすこし手間取りました。
ReactやVueを造ったときは、localhostのままポート番号だけあわせておけばよかったのですが・・・・
[ここ](https://github.com/sveltejs/template)に書いてあるとおり、`sirv`の仕様でそのままだとHost側のlocalhostからContainer側のlocalhostにはつながらない。
なので、`sirv`コマンドでContainerのhostを指定する必要がありました。

```
sirv public build --host 0.0.0.0
```

これで、Host側の`localhost`とContainer側の`0.0.0.0`が繋がるので、初期画面が表示されるようになります。

**Sapper**は他同様にport:3000同士を繋げば問題なくContainerと繋がります

## まとめ
去年くらいから少し話が出てきたSvelte。
まだまだこれから感ありますが、ReactやVueを刺激するような存在になってくれると面白いです。
pandas の to_csv -> read_csv で "Unnamed: 0" が追加された場合の対処法

# 事の発端
事件は Python の　pandas で、 以下の様にCSV書き込み→読み込み をシンプルに行った時に起こった。

```python
import pandas as pd

# 変数data を定義してCSVファイルに書き込む
data = pd.DataFrame({'name': ['太郎', '花子', '二郎', '由紀'],
                      '数学': [80, 15, 90, 50],
                      '英語': [80, 70, 50, 65],
                      '国語': [ 90, 60, 60,  60]})
print(data)
data.to_csv('a.csv')


# 書き出したCSV ファイルを読みだして出力
data = pd.read_csv('a.csv')
print(data)
```

上記を実行した際に、それぞれに出力に差分が生じた。

```
# 1回目の出力結果
  name  数学  英語  国語
0   太郎  80  80  90
1   花子  15  70  60
2   二郎  90  50  60
3   由紀  50  65  60


# 2回目の出力結果
   Unnamed: 0 name  数学  英語  国語
0           0   太郎  80  80  90
1           1   花子  15  70  60
2           2   二郎  90  50  60
3           3   由紀  50  65  60
```

`Unnamed: 0` という謎カラムが追加されてしまった。これを解消する。


# 何が起きているのか？
上記書き込みにおいて、以下のCSVファイルが出力されていた。

```
,name,数学,英語,国語
0,太郎,80,80,90
1,花子,15,70,60
2,二郎,90,50,60
3,由紀,50,65,60
```
1行目のname の左に想定外の `,` が追加されてしまっている。
これによって、最初のカラムが無記名とみなされている模様。


# 対処法
以下のどちらかで対応可能。両方やる必要はない。

## to_csv で対応
以下の様にindex をfalse で指定することで解消できる。

```python
data.to_csv('a.csv', index=False)
```

上記により、以下のCSVファイルを出力することができた。

```
name,数学,英語,国語
太郎,80,80,90
花子,15,70,60
二郎,90,50,60
由紀,50,65,60
```

```Python
# 書き出したCSV ファイルを読みだして出力
data = pd.read_csv('a.csv')
print(data)
```

```
# 出力結果
  name  数学  英語  国語
0   太郎  80  80  90
1   花子  15  70  60
2   二郎  90  50  60
3   由紀  50  65  60
```

## read_csv

以下の様にインデックスカラムを指定する。

```python
data = pd.read_csv('a.csv', index_col=0)
print(data)
```

```
# 出力結果
  name  数学  英語  国語
0   太郎  80  80  90
1   花子  15  70  60
2   二郎  90  50  60
3   由紀  50  65  60
```
Raspberry Pi Camera Moduleのデータ量の算出

#はじめに
IoTの促進にあたり、画像ファイルをサーバへアップする機会が増えてきております。
しかし、画像ファイルはサイズが大きいのでデータ量が気になるところです。

本記事では低価格のシングルコンピュータRaspberryPiの専用カメラ、**RaspberryPi Camera Module (V1/V2)**でのデータ量を計算します。


# RaspberryPi Camera Module (V1/V2)の性能
##静止画
解像度はV1よりV2が1.5倍近く上がっているため、
データ量も1.5倍程になっています。

|静止画|V1|V2|
|:----------------------:|:------------------:|:------------------:|:------------------:|
|解像度|2592 × 1944<br>(4：3)|3280 × 2464<br>(4：3)|
|1枚当たりの<br>データ量|15MB|24MB|
※計算式は[[データ量の計算式 > 静止画]](#静止画-1) 参照

##動画
動画は連続した静止画が連続したデータです。
解像度 別に使用可能なModeが7種類あります。


|Mode|V1 <br>解像度|V1 <br>最大フレーム<br>レート|V2 <br>解像度|V2 <br>最大フレーム<br>レート|
|:--:|:--:|:--:|:--:|:--:|
|1|1920x1080<br>(16：9)|30fps|1920x1080<br>(16：9)|30fps|
|2|2592x1944<br>(4：3)|15fps|3280x2464<br>(4：3)|30fps|
|3|2592x1944<br>(4：3)|1fps|3280x2464<br>(4：3)|15fps|
|4|1296x972<br>(4：3)|42fps|1640x1232<br>(4：3)|40fps|
|5|1296x730<br>(16：9)|49fps|1640x922<br>(16：9)|40fps|
|6|640x480<br>(4：3)|60fps|1280x720<br>(16：9)|90fps|
|7|640x480<br>(4：3)|90fps|640x480<br>(4：3)|200fps|

※fpsは各Modeにて設定可能な最大値を記載しています。
URL : https://www.raspberrypi.org/documentation/raspbian/applications/camera.md

1分間で最大フレームレートで撮影した場合のデータ量を計算すると
以下のような結果になります。

|Mode|V1 <br>データ量(GB)|V2 <br>データ量(GB)|
|:--:|:--:|:--:|
|1|11.2|11.2|
|2|13.6|21.8|
|3|0.9|21.8|
|4|9.5|14.5|
|5|8.3|10.9|
|6|3.3|14.9|
|7|5.0|11.1|

※計算式は[[データ量の計算式 > 動画]](#動画-1)参照

# データ量の計算式
##静止画

**1枚当たりのデータ量 = 解像度(px) × 色解像度(byte)**

**[例]
　{2592 × 1944}(px)× 3(byte) = 15(MB)**

**<解像度(px)>**
　横のピクセル数と縦のピクセル数を掛け合わせた値
　[例]
　　横のピクセルが2592、横のピクセルが1944の場合、2592x1944 = 5M(px)

**<色解像度(byte)>**
　色情報を持たせるため、各ピクセル毎にR・G・Bの256階調(1byte)の情報量(合計3byte)
　これにより256 * 256 * 256 = 1667万色を表現可能

##動画
今回は1分間のデータ量を計算します。

**1分間の通信量 = 解像度(px) × 色解像度(byte) × フレームレート(fps) × 60(秒)**

**[例]
　{2592 × 1944}(px)× 3(byte)  × 15(fps) × 60(秒)= 13.5(GB)**　　
　
**<解像度(px)>**
　上記参照

**<色解像度(byte)>**
　上記参照
　　　　　
**<フレームレート(fps)>**
　1秒間に使用するフレーム数（コマ数）の静止画の数


# まとめ
データ量を計算しましたが実際は画像ファイルの圧縮できる場合もありますので
理論値よりもデータ量を減らすことができます。

目安として参考にして頂ければと思います。
Angular Universal  SSR And Debug Setting In Webstorm

# Introduction
When SSR in angular by angular universal, debug setting is not set for typescript by default. To use debugger of webstorm, you should change some config files of your project. 

# Webstorm Deubber setting
npm debug setting. Script to run is `serve:ssr`

[How to debug setting in webstorm](https://qiita.com/kubocchi/items/a3e0a75dd5d97ba00e8f)

# Source Map
Add source map setting to angular.json, and webpack.server.config.js

## angular.json
Change angular.json `sourceMap: false` to `sourceMap: true`

```json:angular.json
"server": {
   "configurations": {
      "production": {
         "sourceMap": true
      }
   }  
}
```

## webpack.server.config.js
Add devtool: 'source-map'

```javascript:webpack.server.config.js
module.exports = {
   devtool: 'source-map'
}
```

<img width="442" alt="Screen Shot 2020-01-12 at 19.46.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200431/a1962cc8-b7a9-334c-12d9-82149c814292.png">
How To Use `ng run`

# What is ng run
`ng run` runs specific task defined in angular.json.

## usage

```
ng run project:[target]
```
Target is defined in angular.json file. Bellow is list of available targets. 

<img width="629" alt="Screen Shot 2020-01-12 at 19.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200431/89fc123d-9c32-c0a5-b09c-66f03390e703.png">

## Examples

```
ng run project-name:lint
ng run project-name:serve
```

project-name is also written in angular.json. 
In bellow exmaple, `md-blog` is project name

<img width="508" alt="Screen Shot 2020-01-12 at 19.34.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200431/14069001-512d-1b2f-21e2-57fbf8049f20.png">
標準入出力を介してMOLファイルをSMILESに変換する

#はじめに
MOLファイルをSMILESに変換するpythonスクリプトを作成した。これだとどこにでもある話だが、標準入力からMOLファイル(MOL形式の文字列)を読み込んで、標準出力にSMILESを吐き出すようにした。これによって、ファイルを経由せずとも結果を得ることができ、より手軽に利用できる。

#環境
- Python3.6 
- RDKit 2019.03.3.0 

#ソース
ソースは以下の通りだ。

```Mol2SMILESConvertor.py
import sys
from rdkit import Chem


def main():
    f = sys.stdin
    mol_block = ""
    for line in f:
        mol_block += line

    mol = Chem.MolFromMolBlock(mol_block)
    smiles = Chem.MolToSmiles(mol)
    print(smiles)


if __name__ == "__main__":
    main()
```

#使い方
以下のMOLファイルを例に使い方を説明する。

```test.mol
2,3,6-PCB
     RDKit          2D

 15 16  0  0  0  0  0  0  0  0999 V2000
    1.2990   -0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.2990    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.0000    1.5000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2990    0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2990   -0.7500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.0000   -1.5000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.0000   -3.0008    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.2978   -3.7529    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.3380   -3.1546    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0
   -1.2955   -5.2529    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.3337   -5.8546    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0
    0.0048   -6.0009    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.3026   -5.2488    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.3002   -3.7488    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.3385   -3.1472    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0
  1  2  2  0
  2  3  1  0
  3  4  2  0
  4  5  1  0
  5  6  2  0
  6  1  1  0
  6  7  1  0
  7  8  2  0
  8  9  1  0
  8 10  1  0
 10 11  1  0
 10 12  2  0
 12 13  1  0
 13 14  2  0
 14  7  1  0
 14 15  1  0
M  END
$$$$
```

上のMOLファイルをcatしてこのスクリプトに食わせると、以下のようにSMILESが得られる。お手軽だ。

```
$ cat test.mol |python bin/Mol2SMILESConvertor.py
Clc1ccc(Cl)c(-c2ccccc2)c1Cl
```

#その他
- 複数の化合物が格納されたSDFファイル(SDF形式の文字列)を読み込んで、複数のSMILESをまとめて出力するとさらに便利だろう。
マギレコ2話の絶交階段を計算機として利用する

![](https://gyazo.com/dc6ad26fb848069fcec92cfbc3be18f1.png)
マギアレコード 魔法少女まどか☆マギカ外伝 第2話
https://abema.tv/video/episode/26-89_s1_p2

マギレコ2話に以下の機能を持つ「絶交階段」がでてきます.
> 絶交階段の6段目に自分の名前,7段目に絶交したい相手の名前を書いちゃえばそれが絶交証明書！ もしも仮にも万が一仲直りなどしようものなら謝った方が鎖の化け物に攫われちゃう！ 

この絶交階段を使ったら計算機が作れそうですよね.
本質的には「nandゲートが構成できれば計算機が作れる」ので,この記事では絶交階段を使ってnandゲートを構成するところまで示します.


# 絶交階段の機能

この絶交階段の機能を理想状態での機能として解釈すると以下の通りになります.

- 二値($1$:現世に居る, $ 0$:鎖の化け物に攫われている)をとる人間 $a_1,a_2,...$ が無限に存在する
- ペア$(a_i,a_j)$を絶交階段に名前を書く. 最初はみんな現世にいるので $(a_i,a_j)=(1,1)$ .
- $a_i$ が$a_j$に仲直りの意思表示をすると, $a_i$が攫われて $a_i=0$ に変化する.

以下の機能も仮定しても大きな問題はないでしょう.

- 仲直りの意思表示をする場合, 仲直り対象が現世にいる必要がある.
- 複数人に対してまとめて仲直りの意思表示ができる. 仲直り対象全員が現世にいる必要がある.
- 二人とも鎖の化け物に攫われている場合,再度鎖の化け物の空間内で絶交の意思表示ができる.絶交の意思表示により鎖の化け物は満足するので,意思表示をした人間は現世に帰還できる.


# nandゲートの構成

nandゲート($a_1$nand $ a_2 = a_3 $)は以下の真理値表のとおりです.

|$a_1$|$a_2$|$a_3$|
|:-:|:-:|:-:|
|1|1|0|
|1|0|1|
|0|1|1|
|0|0|1|

3人の人間($a_1,a_2,a_3$)がいて,入力 $a_1,a_2$ の状態に応じてnandの計算と同様にして状態が決まる出力$a_3$ を構成できればよさそうですね.
具体的には以下のようにすればnandゲートが構成できます.

1. 絶交階段の6段目と7段目両方に $a_1,a_2,a_3$ の名前を書いて絶交する.
2. $a_3$ は「毎秒$a_1$と$a_2$の二人と仲直りしたい」と宣言する.
3. $a_3$ は「毎秒$a_1$と絶交したい」と宣言する
4. $a_3$ は「毎秒$a_2$と絶交したい」と宣言する


1.:絶交階段への記名は単なる変数の登録に過ぎません.
2.:「$a_1$と$a_2$の二人が現世にいる場合」には必ず「$a_3$は攫われている」状態になります.つまり,$1$ nand $1 = 0$ が満たされます.
3.,4.:「$a_1$と$a_2$のどちらかが攫われている場合」には必ず「$a_3$は現世にいる」状態になります.つまり,残りの $1$ nand $0 = 1$ , $0$ nand $1 = 1$ , $0$ nand $0 = 1$が満たされます.
毎秒と宣言することで,鎖の化け物の監視を毎秒発動させます.鎖の化け物CPUのクロック数的なやつを1秒に設定した感じです.

# 使い方
nandゲートが構成できたので,後は大勢の人間を使って計算機を作ればよいです.
計算ステップが開始されると大勢の人間が絶えず現世と鎖の化け物の空間とを行き来して街中が大変なことになるかもしれませんが,計算のためには仕方がないことです.

例えば https://ja.wikipedia.org/wiki/NANDゲート にある以下の図のような絶交関係で絶交階段を利用すれば,十数人程度の人間が現世と鎖の化け物の空間とを行き来して全加算器と同様の計算ができますね.
![](https://upload.wikimedia.org/wikipedia/commons/1/1d/NandFullAdder.png)


# さいごに
こんなクソ記事を読むよりもマギレコを見てください.
https://abema.tv/video/title/26-89
Webstorm How To Use

# debug setting

## npm deubg
Find package manager path. 

```
npm => npm@6.12.0 /usr/local/lib/node_modules/npm
```

Then, pacakge manager path is bellow.

```
/usr/local/lib/node_modules/npm
```

# Quotation CodeStyle 
Preference => Editor => Code Style => any language => Use single quotes always. 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200431/8ea58590-43ff-ec6c-dcd3-d288f367338d.png)
NeovimでNimを書く環境を整える

# まえがき

* NeovimでNimを自動補間マシマシのコーディング環境を整える方法を書く

# デモ

以下のように補間効くようになります。

![nimsuggest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69665/a9324370-6f19-7501-58b2-344eb97e0c95.gif)


# 検証環境

| key | value |
| --- | ----- |
| OS | Manjaro Linux |
| Neovim | v0.5.0-100-g0785f8e8b |

# 環境構築

## プラグイン導入

以下の2つのプラグインを入れます。

| プラグイン名 | 説明 |
| --- | --- |
| [alaviss/nim.nvim](https://github.com/alaviss/nim.nvim) | Nimプラグイン |
| [prabirshrestha/asyncomplete.vim](https://github.com/prabirshrestha/asyncomplete.vim) | 非同期補間プラグイン |

僕は[dein.nvim](https://github.com/Shougo/dein.vim)を使用しているのでdein用の設定を書きます。

```dein.toml
[[plugins]]
repo = 'prabirshrestha/asyncomplete.vim'
hook_add = '''
" TABで補完
inoremap <expr> <Tab> pumvisible() ? "\<C-n>" : "\<Tab>"
inoremap <expr> <S-Tab> pumvisible() ? "\<C-p>" : "\<S-Tab>"
inoremap <expr> <cr> pumvisible() ? "\<C-y>" : "\<cr>"

let g:asyncomplete_smart_completion = 1
let g:asyncomplete_auto_popup = 1
'''


[[plugins]]
repo = 'alaviss/nim.nvim'
on_ft = ['nim', 'nimble']
hook_add = '''
au User asyncomplete_setup call asyncomplete#register_source({
  \ 'name': 'nim',
  \ 'whitelist': ['nim'],
  \ 'completor': {opt, ctx -> nim#suggest#sug#GetAllCandidates({start, candidates -> asyncomplete#complete(opt['name'], ctx, start, candidates)})}
  \ })
'''
```

## nimsuggestのインストール

こちらのプラグインでは`nimsuggest`というコマンドを使用して構文解析、補間をします。

`nimsuggest`はNimの公式のchoosenimを使用したインストール手順にしたがってインストールすると、自動でインストールされているはずです。
[インストール手順](https://nim-lang.org/install_unix.html)

もし`nimsuggest`をPATHの通ったディレクトリに配置していないなら、上記手順にしたがってNimをインストールしてください。

## プラグインのアップデート

deinの関数でプラグインをアップデートします。
以下のコマンドをNeovimを起動したときに、コマンドモードで実行します。

```vim
:call dein#update()
```

これで環境構築完了です。

# 動作確認

試しに拡張子`.nim`のファイルを作成して適当にモジュールをimportしてください。
プロシージャ名の補間などが効くようになっていると思います。
残念ながら、import文を自動で補間まではしてくれないので、そこは書く必要があります。

プロシージャ定義元へのジャンプは `gd` で可能です。
[Wiki](https://github.com/alaviss/nim.nvim/wiki/Basic-go-to-definition-usage)に書いてありました。

リポジトリ漁ってみたのですが、Vimのヘルプドキュメントが無いようだったので、キーマッピングがあるかどうかはVimScriptを読む必要がありそうです。
ソースコード上だと、以下にキーマッピングについて定義されてました。
https://github.com/alaviss/nim.nvim/blob/master/ftplugin/nim.vim#L106

まだ開発中のプラグインのようなので、今後に期待です。

# 補足

## nimsuggestについて

`nimsuggest`はNim公式が提供するNimコードの構文解析をするツールです。
公式が提供するツールなので、かなり安心感があります。
開発が滞ってプラグインが動かなくなる、といった懸念は低そうだと思います。

`nimsuggest`に関する情報は、以下の公式ページに情報がまとまっています。
[Nim IDE Integration Guide](https://nim-lang.org/docs/nimsuggest.html)

以上です。
管理者のテストが期待通りにならない理由

Rails Tutoriaiの第10章、10.4.1演習において

```ruby:users_controller.rb
def user_params
  params.require(:user).permit(:name, :email, :password,
                               :password_confirmation, :admin)
end
```

というコードに対して

```ruby:users_controller_test.rb
test "should not allow the admin attribute to be edited via the web" do
  log_in_as(@other_user)
  assert_not @other_user.admin?
  patch user_path(@other_user), params: { 
                                  user: { password: @other_user.password,
                                          password_confirmation: @other_user.password 
                                          admin: true } }
  assert_not @other_user.reload.admin?
end
```

というテストを書きました。

テスト結果はREDになるはずですが、
GREENになってしまします。

なぜこうなってしまうのでしょうか。