OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミングスキルが上がる本

読めば確実にプログラミングスキルが上がる、実践的な本を紹介します。
(本は電子書籍版を買ったほうが、どこでも読めるし場所も取らないのでオススメです。)

# コーディングスキル

- [リーダブルコード ― より良いコードを書くためのシンプルで実践的なテクニック](https://www.amazon.co.jp/リーダブルコード-―より良いコードを書くためのシンプルで実践的なテクニック-Theory-practice-Boswell/dp/4873115655)
- [新装版-リファクタリング-既存のコードを安全に改善する](https://www.amazon.co.jp/新装版-リファクタリング-既存のコードを安全に改善する-ＭａｒｔｉｎＦｏｗｌｅｒ-ebook/dp/B01IGW5MG0)

# 設計スキル

## オブジェクト指向設計

- [オブジェクト指向設計実践ガイド　～Rubyでわかる 進化しつづける柔軟なアプリケーションの育て方](https://www.amazon.co.jp/オブジェクト指向設計実践ガイド-Rubyでわかる-進化しつづける柔軟なアプリケーションの育て方-Sandi-Metz-ebook/dp/B01L8SEVYI)
- [現場で役立つシステム設計の原則-変更を楽で安全にするオブジェクト指向の実践技法(増田 亨)](https://www.amazon.co.jp/現場で役立つシステム設計の原則-変更を楽で安全にするオブジェクト指向の実践技法-増田-亨-ebook/dp/B073GSDBGT)

## API設計
- [Web API: The Good Parts](https://www.amazon.co.jp/Web-API-Parts-水野-貴明/dp/4873116864)

## DB設計
- [SQLアンチパターン](https://www.amazon.co.jp/SQLアンチパターン-Bill-Karwin/dp/4873115892/)


# 言語別

## Ruby

- [Effective Ruby](https://www.amazon.co.jp/Effective-Ruby-Peter-J-Jones-ebook/dp/B00SF6JN4K)

## Kotlin

- [Kotlinイン・アクション](https://www.amazon.co.jp/Kotlin%E3%82%A4%E3%83%B3%E3%83%BB%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3-Dmitry-Jemerov/dp/4839961743/)
Java 2次元マップに格納してfor文で回す

**1、『生徒名、科目名・点数』という情報を、2次元マップのデータ構造にしました。**
**2、それぞれの生徒の合計点と平均点をfor文を使って出力しました。**

コレクションクラスはインスタンスでないものは格納できない。
しかし、int型の情報をInteger型（ラッパークラス）にすれば格納できる。

Eclipse Oxygenで実行

```java:2次元マップを作って回すプログラム

import java.util.LinkedHashMap;
import java.util.Map;

public class MapScore {

	public static void main(String[] args) {
		//2次元マップをつくる
		//マップ名の直前、つまり Map<String, Map<String, Integer>>までがデータ型
		Map<String, Map<String, Integer>> nameMap = new LinkedHashMap<String, Map<String, Integer>>();

		//鈴木さん
		Map<String, Integer> scoresMap_suzuki = new LinkedHashMap<String,  Integer>();
		scoresMap_suzuki.put("国語", 78);
		scoresMap_suzuki.put("数学", 90);
		scoresMap_suzuki.put("英語", 20);

		//佐藤さん
		Map<String, Integer> scoresMap_satoh = new LinkedHashMap<String,  Integer>();
		scoresMap_satoh.put("国語", 50);
		scoresMap_satoh.put("数学", 40);
		scoresMap_satoh.put("英語", 90);

		//田中さん
		Map<String, Integer> scoresMap_tanaka = new LinkedHashMap<String,  Integer>();
		scoresMap_tanaka.put("国語", 80);
		scoresMap_tanaka.put("数学", 60);
		scoresMap_tanaka.put("英語", 85);

		//nameマップのvalueに上記3つのマップを入れることで2次元マップを実現
		nameMap.put("鈴木", scoresMap_suzuki);
		nameMap.put("佐藤", scoresMap_satoh);
		nameMap.put("田中", scoresMap_tanaka);

		//拡張forで名前マップを回す
		//LinkedHashMapの場合、格納順に取り出される
		for (Map.Entry<String,  Map<String, Integer>> element : nameMap.entrySet()) {

			//nameMapのバリューを取得して、新規のマップに代入する
			Map<String,Integer> scores = element.getValue();

			int sum = 0;
			int avg = 0;

			//scoresMap_名前のバリュー、つまり点数を回して、sumに代入していく
			for(int hogeInt : scores.values()){
				sum += hogeInt;
				avg  = sum  / scores.size();
			}

			//人数分(3人分）出力
			System.out.println(element + "合計点は" + sum + " " + "平均は" + avg);
		}
	}
}
```

実行結果

```:実行結果
鈴木={国語=78, 数学=90, 英語=20}合計点は188 平均は62
佐藤={国語=50, 数学=40, 英語=90}合計点は180 平均は60
田中={国語=80, 数学=60, 英語=85}合計点は225 平均は75
```
[Linux][Powershell]パーミッションを八進表記と記号表記で相互変換する


# 概要

Excelに書かれた大量の八進表記のパーミッションを記号表記に書き換える必要があったので、手っ取り早くPowershellで一括変換できるコードを書いてみた。ついでに逆変換も書いた。
いまいち影の薄いSUIDとかスティッキービットも考慮してます。
途中まではちゃんと2進数に変換したりしてアルゴリズム通りに変換しようとしてたけど、だんだんとif文てんこ盛りのごちゃごちゃしたコードになってしまったから、結局読みやすさ書きやすさ優先して総当りで順番に置換していく感じにした。

[コード(gist)](https://gist.github.com/sensq/ae4238da5b090d3f5a45268062bf5b39)

SUIDとかの特殊な権限に関しては[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%91%E3%83%BC%E3%83%9F%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3)に書いてあるので省略

使用しているPowershellのバージョンは5.0

# 簡単な解説

## 八進表記から記号表記に変換する場合

基本的なrwxへの変換は所詮8パターンしかないので、あらかじめ8個の数字と8個の文字列で対応表を作っておいて置換するだけ。

その後、特殊な権限への対応として、1文字目で指定された数字に対応した位置の実行権の部分をxからsやt（または-からSやT）に入れ替えているだけ。

妙に長くて冗長な雰囲気のするコードになったけど、まぁ読みやすくはあると思う。

## 記号表記から八進表記に変換する場合

こちらは先に特殊な権限への対応を先に行っておく必要がある。

特殊な権限が付く場合、実行権部分がxの代わりにs,t（または-の代わりにS,T）と書かれるため、s,tをxに、S,Tを-に置換しておく。
また、八進表記の1文字目は3つあるそれぞれの実行権を1,2,4としてフラグが立っている部分のみを合算した値になるため、単純な計算で求めることができる。

あとは、八進表記を記号表記に変換する場合と同じように、基本的な8パターンの変換を行うだけ。

# 余談

Wikipediaにも書いてあるけど、Linuxでパーミッションの確認するときは[stat](https://linuxjm.osdn.jp/html/GNU_coreutils/man1/stat.1.html)コマンドを使うと八進表記と記号表記の両方を表示できて便利

結果をワンライナーで出力することもできるし、``ls -l``をawkして頑張るより使い勝手も見栄えも良いと思う。

```shell
# 「ファイル名、パーミッション（八進）、パーミッション（記号）、所有者、所有グループ」をワンライナーで表示
stat PATH --printf "%n\t%a\t%A\t%U\t%G\t\n"
```
Angular 4のSingle Page ApplicationでGoogle Analyticsを設定する

こんにちは。10分で生産的なミーティングができるWeb会議ツール、[minmeeting](https://minmeeting.jp/)を開発している伊勢川です。

<a title="minmeeting - 10分で生産的なミーティングができる会議ツール" href="https://minmeeting.jp/" target="_blank"><img width="100px" src="https://qiita-image-store.s3.amazonaws.com/0/199506/32e65577-a5bb-2c3b-4d30-4690c3c5ce0f.png" /></a>

AngularでGoogle Analyticsを設定しようとした際に、Googleの説明の通りに設定をするとデータが連携されなかったので、失敗したパターンとうまくいったパターンを記載しておきます。

# うまくいったパターン
1. googletagmanagerのソースをheadタグ内で読み込む。
2. 初期化コードはbodyタグの中で読み込む。

```.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
  <!-- 1. googletagmanagerのソースはheadタグ内で読み込む -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
  <!-- 2. 初期化コードはbodyタグ内で呼び出す -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
</body>
</html>
```

# 失敗したパターン
## headタグの先頭に貼り付ける

<img width="898" alt="スクリーンショット 2017-10-02 1.04.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/199506/123f721f-0dcf-6335-a3d5-212b04b1c00e.png">

設定画面には、「head内の最初の要素として貼り付けてください。」と書いてあるので、下記のように貼り付けたが、データを受信せず。

```.html
<!doctype html>
<html>
<head>
  <!-- ここ -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
    :
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
</body>
</html>
```

## headタグの一番最後に貼り付ける

<img width="741" alt="スクリーンショット 2017-10-02 1.05.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/199506/b9b66f9d-8c71-8d2c-bcdd-dac4e3777644.png">

トラブルシューティングのページを見ると、「head終了タグの直前に貼り付けてください。」と書いてあるので、下記のように貼り付けたが、データを受信せず。

```.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>minmeeting</title>
    :
  <!-- ここ -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments)};
    gtag('js', new Date());

    gtag('config', 'YOUR_TRACKING_ID');
  </script>
</head>
<body id="IndexBody" class="IndexHtmlBody">
  <app-root>Loading...</app-root>
</body>
</html>
```
Logstashでログの取り込みに失敗した話（日付の処理で）

# Logstash失敗事例その1
月が変わってログデータの取り込みが失敗するようになったため、うまくいくパターン、うまくいかないパターンを調査した。

|ログのパターン              |結果            |
|:------------------------|:---------------|
|Aug 15 00:00:01 …        |うまくいく        |
|Sep  7 00:00:01 …        |うまくいかない     |

## 原因
日付が1桁の場合のmatch条件の考慮がなかった。

```logstash.conf修正前
match => [ "logdate", "MMM dd yyyy HH:mm:ss" ]
```
*logdateというフィールドを作って、それをtimestampとして採用していた。

## 解決策
公式ページを頼りに、以下の通りに修正して解決。

```logstash.conf修正後
match => [ "logdate", "MMM dd yyyy HH:mm:ss",
          "MMM  d yyyy HH:mm:ss", "ISO8601" ]
```

## おまけ
なお、
grok-patternファイルの初期値にある、SYSLOGTIMESTAMPの記述の「＋」は、スペースが「0もしくは複数」ということらしく、
MMM[space]dd
MMM[space][space]d のように日付が1桁の場合にも対応していた。

```※grok-pattern抜粋
MONTH \b(?:[Jj]an(?:uary|uar)?|[Ff]eb(?:ruary|ruar)?|[Mm](?:a|ä)?r(?:ch|z)?|[Aa]pr(?:il)?|[Mm]a(?:y|i)?|[Jj]un(?:e|i)?|[Jj]ul(?:y)?|[Aa]ug(?:ust)?|[Ss]ep(?:tember)?|[Oo](?:c|k)?t(?:ober)?|[Nn]ov(?:ember)?|[Dd]e(?:c|z)(?:ember)?)\b
MONTHDAY (?:(?:0[1-9])|(?:[12][0-9])|(?:3[01])|[1-9])
TIME (?!<[0-9])%{HOUR}:%{MINUTE}(?::%{SECOND})(?![0-9])

SYSLOGTIMESTAMP %{MONTH} +%{MONTHDAY} %{TIME}
```

基本のtimestampは、しっかり問題を押さえていたようで…。

以上、パース自体は動作するものの、matchで台無しにする失敗例でした。
Vuejsでコンポネント内のCSSを親コンポネントから変更したい場合はdeep selectorを使おう

# はじめに

Vuejsなどのコンポネント志向のフレームワークを使っていると、コンポネントの中のスタイルをある特定の用途のときのみ変更したいことが発生すると思います。
とは言え下記の用に `scoped` パラメータを設定していると、外側からコンポネントのスタイルを上書きすることは困難です。

```html
# 子コンポーネント
<style scoped>
.hoge {
  color: red;
}
...

</style>
```

そこで下記の用に設定する人がいますが、 `!important` も使ってるしグローバル汚染するため明らかにアンチパターンです。

```html
# 親コンポネント
<style>
.hoge {
  color: black !important;
}
</style>
```

# Deep Selector

`vue-loader:2.12` から上記のパターンの場合を考慮し、DeepSelectorというものが導入されました。

## 使い方

使い方は単純で、 親コンポネントのCSSセレクターと子コンポーネントのCSSセレクターを `>>>` でつなぐだけです。

```html
# 親コンポネント
<style scoped>
.parent >>> .hoge {
  color: black; /* .parentの親属性に所属する .hoge属性に関してのみblackが適応 */
}
</style>
```

scssの場合は `>>>` の変わりに `/deep/` となります。inp

# 応用した使い方

例えば [element-ui](http://element.eleme.io/#/en-US) のような外部テーマを使用する場合、コンポネに使用されるCSSクラスの接頭語は決まっています。 (element-uiの場合は `.el-` )
そうした場合SCSS記法を使えば下記のように指定できるようになります。

```scss
.parent /deep/ .el- {
  &select {
    width: 100%;
  }
  &input {
    width: 80%;
  }
}
```

そうすることで、特定のコンポネの子コンポーネントのみスタイルを当てるというのが、ソースコード上でひとまとまりに管理できるようになります。
Magento-Restrict ip access、IP制限をかける方法


if you want to restrict ip to access your backend you can set up ip list that can be access

- ?重複0或1次
- ^匹配
- ()條件指定
- !不匹配

ip:10.10.10.10

.htaccess

```apache
RewriteCond %{REQUEST_URI} ^/(index.php/)?admin/? [NC]
RewriteCond %{REMOTE_ADDR} !^10.10.10.10
RewriteRule ^(.*)$ / [F,L]
```
vimにフレンズの名前を補完する設定を追加してみた

![img.png](https://qiita-image-store.s3.amazonaws.com/0/163243/78f5707b-db8d-c7d3-5ff5-c87e785e7f7c.png)
上記をvimrcに追加
![Screenshot from 2017-10-01 23-56-56.png](https://qiita-image-store.s3.amazonaws.com/0/163243/916b6efa-d761-1615-5d2a-fad62105b002.png)
入力するとこんな感じで補完される
第1回最安インスタンスチャンピオンシップ～UnixBench編～

こんにちは。しめさばです。

# 企画の趣旨
各社のVPSやクラウドなどの中で、月額1000円を切るような低価格帯のインスタンスが、計算資源としてどれくらい頑張ってくれるのかを試してみたかったというものです。

# 今回のラインナップ
とりあえず適当に10個選んでみました。

|No.|サービス名|プラン名|メモリ|CPU|ディスク|月額料金(税抜)|時間課金|転送量|
|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|
|1|ConoHa|512MB|512MB|仮想1コア|SSD 20GB|¥630|あり|規定なし|
|2|DigitalOcean|－|512MB|仮想1コア|SSD 20GB|$5|あり|1TB込み|
|3|ServersMan@VPS|Entry|保証1GB|記載なし|50GB|¥467|なし|規定なし|
|4|AWS|t2.nano|512MB|仮想1コア|gp2 20GB|$11.92|あり|転送量課金あり|
|5|LightSail|－|512MB|仮想1コア|SSD 20GB|$5|あり|1TB込み|
|6|IDCFクラウド|Light.S1|1GB|仮想1コア|SSD 15GB|¥500|あり|規定なし|
|7|KAGOYA CLOUD/2|KVM/1コア/1GB|1GB|仮想1コア|SSD 20GB|¥600|あり|規定なし|
|8|KAGOYA CLOUD/2|OpenVZ/3コア/HDD200GB|保証1GB/最大2GB|仮想3コア|HDD 200GB|¥800|あり|規定なし|
|9|KAGOYA CLOUD/2|OpenVZ/3コア/SSD80GB|保証1GB/最大2GB|仮想3コア|SSD 80GB|¥800|あり|規定なし|
|10|WebARENA VPSクラウド|512M-SSDタイプ（KVM）|512MB|仮想1コア|SSD 20GB|¥360|あり|規定なし|

仮想化方式についてはKVMなどのハイパーバイザ型とOpenVZなどのコンテナ型に分かれます。ハイパーバイザ型はマシンの仮想化、コンテナ型はOSの仮想化、とでも説明しておけば良いでしょうか（かなり端折ってる）。仮想化しているレベルに違いがあるためできることできないことがあります。例えばコンテナ型は動的にディスク容量を変更することができますが、使えないコマンドがあったりします。この話は書けば書くほどボロが出そうで怖いのでこのへんにしておきます。

# UnixBench測定結果

今回は前述の各インスタンスでUnixBenchを実行した結果を掲載します。UnixBenchはシステムのベンチマークという位置づけですが、主にCPUのベンチマークとお考え下さい。UnixBenchの手順は[こちらのサイト](http://blog.idcf.jp/entry/cloud/unixbench/)を参考にしました。UnixBenchスコアの列にはSystem Benchmarks Index Scoreを記載しています。

|No.|サービス名|プラン名|メモリ|CPU|ディスク|UnixBenchスコア|
|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|:------------------:|
|1|ConoHa|512MB|512MB|仮想1コア|SSD 20GB|1509.7|
|2|DigitalOcean|－|512MB|仮想1コア|SSD 20GB|1228.3|
|3|ServersMan@VPS|Entry|保証1GB|記載なし|50GB|379.2/365.7|
|4|AWS|t2.nano|512MB|仮想1コア|gp2 20GB|2005.5|
|5|LightSail|－|512MB|仮想1コア|SSD 20GB|1953.8|
|6|IDCFクラウド|Light.S1|1GB|仮想1コア|SSD 15GB|447.4|
|7|KAGOYA CLOUD/2|KVM/1コア/1GB|1GB|仮想1コア|SSD 20GB|1578.5|
|8|KAGOYA CLOUD/2|OpenVZ/3コア/HDD200GB|保証1GB/最大2GB|仮想3コア|HDD 200GB|1053.9/2237.7|
|9|KAGOYA CLOUD/2|OpenVZ/3コア/SSD80GB|保証1GB/最大2GB|仮想3コア|SSD 80GB|786.6/1460.6|
|10|WebARENA VPSクラウド|512M-SSDタイプ（KVM）|512MB|仮想1コア|SSD 20GB|1598.6|

AWSのt2.nanoが安定して性能が出ていますが、LightSailの$5プランがほぼ同じくらいの性能をたたき出しているので、クラウド的な機能がいらない場合はLightSailかなり良いでしょう。日本リージョンはありますし。ただUIやマニュアルは、まだ全部英語です。

「ワンコインクラウド」を自称するIDCFクラウドとServersMan@VPSですが、どちらもCPU性能はかなり芳しくないようです。

KAGOYA CLOUD/2とWebARENA VPSクラウドは最近リニューアルしたサービスなのでどちらもそれなりに良いホストサーバを使っているのか、結構性能が出ているようです。

3,8,9はマルチコアのため前者が1並列のスコア、後者が複数並列のスコアです。ServersMan@VPSはサイトに記載がありませんが、2コア割り当てられているようです。ただ並列しても性能が上がっていないので計算資源としてはあまり期待できないでしょう。一方でKAGOYA CLOUD/2は3コアのため3並列で動いています。3倍とはいきませんが、2倍くらいの性能向上が図られているようなので、複数コアを使いこなせるアプリを動かすときは良いかもしれません。

# あいつがいないのはなんで
CloudAtCostも用意したんですが、起動はしてるがネットワークリーチャビリティがダメ過ぎて今回は対象から外しました。コンソールからyum updateもできないレベルにダメだったので、こいつ待ってたらいつまで経っても記事書けないなと思い、外しました。こいつはこいつで面白そうなので、第1回チャンピオンシップが終わったら番外編としてやってやってもいいかもしれません。ちゃんと動けばですが。
IDEA(Ult)+SpringBoot+MavenでHello Worldなwebアプリをサクッと書いてみる

# 経緯
- IntelliJ IDEAで、かつMavenを使って、SpringBootのHelloWorldを(なるべく)サクッと書いてみたい。
- ネットで検索してみると、Eclipseを使ったサンプルとか、IDEA+Gradleのサンプルとかはよく見かける。
- あと、結果をWebじゃなくてコンソールに表示するやつとかも多いが、結果はWeb画面に表示したいし、最低限のコントローラとかテンプレートとかも使ったサンプルにしたい。
- あと、UltimateのIDEAだと、SpringBootのサポート機能があって、よりサクッと作れそう。

# 環境
- Windows10 Enterprise
- IntelliJ IDEA Ultimate 2017.2.4
- JDK1.8

あと、使用したSpringBootのバージョンは、この時点でのCURRENT GAの1.5.7

# 手順
##IDEAを起動する
![idea_s.png](https://qiita-image-store.s3.amazonaws.com/0/181011/ea903804-5067-06e1-4c49-80ee80b76bed.png)

##新規プロジェクトの作成
- すでに何らかのプロジェクトが開いていたら、`File` - `New` - `Project`...
- プロジェクトが開いていない状態だったら、`Create New Project`をクリック
- `New Project`の画面が開く

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/6cdd1dd6-6de9-a056-e3ab-cc93f6f145dc.png)

- 左のリストから`Spring Initializr`をクリック
- `Project SDK`はPCに入っているJDKを適当に選択
- `Next`をクリック
- `Project Metadata`の画面に切り替わる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/b41e0190-f87e-9b56-5f41-50ba20468ec8.png)

- Mavenを使いたかったので、`Type`で`Maven Project`を指定
- 他の項目はとりあえずこのままで`Next`をクリック
- `Dependencies`の画面に切り替わる

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/7e3ceec0-0bb9-3e83-fff2-dbc80eb32782.png)

- `Web`の`Web`と、`Template Engines`の`Thymeleaf`を選択。
- `Next`をクリック

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/4a323672-6d16-a687-b8ce-63522bb236f2.png)

- `Project name`と`Project location`を適当に設定。
- `Finish`をクリック。
- プロジェクトが作成される。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/ead7bbef-6c2f-aca5-089b-8dc50a5941f9.png)

- 画面右下に`Maven projects need to be imported`と表示されていたら、`Enable Auto-Import`をクリックしておくと、pom.xmlを書き換える都度、必要な依存関係を自動的にインポートしてくれる。

## コントローラの作成
- 画面左のProjectビューの`demo`プロジェクトのツリーを開き、`src` - `main` - `java` -  `com.example.demo` を右クリックし、`New` - `Java Class`を選択
- `Name`に`controller.HelloController`と入力し、`OK`をクリック
- クラス宣言の上に`@Controller`アノテーションを追加
- クラスの中に`getHello()`メソッドを追加

```java:
    @GetMapping
    public String getHello() {
        return "hello";
    }
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/701ac07e-b405-36c1-d152-a0e247e680ec.png)

## テンプレートの作成
- `demo`プロジェクトツリーの `src` - `main` - `resources` - `templates`フォルダを右クリックし、`New` - `HTML File`を選択
- `Name`に`hello`と入力し、`OK`をクリック
- `<body>`タグに`Hello World!`と書く
- あと、`<meta>`タグがこのままだと実行時にthymeleafのエラー（タグが閉じてないよ！エラー）になるので、末尾を`/>`に書き換える

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/d34381da-c0d9-2bc3-0ac9-e4860a2eb71e.png)

## アプリケーションの起動
- 画面右上を見ると、すでに`DemoApplication`という名前で実行設定が作られているので、その横にある緑の三角ボタンをクリックする。
- アプリケーションが起動され、コンソールログがつらつらと表示され始める。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/b7528cfa-08c0-163f-87f2-ee795639b389.png)

- そのうち`Tomcat started on ...`と表示され、内部のTomcatが起動されたことがわかる。
- 最後に`Started DemoApplication in ...`と表示されれば起動完了。

## 動作確認
- ブラウザから、`localhost:8080`にアクセスする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/4b455275-bd2c-9a27-b0c7-367c6faee71f.png)

- できた。
Play2.5.14から2.6.5にバージョンアップしたら動かなくなった

こんなこともあるという備忘録
Playをバージョンアップしたら、`sbt clean compile`は成功するのに`sbt run`で動作確認すると以下のメッセージが出た

```
[trace] Stack trace suppressed: run last web-assets:sassify for the full output.
[error] (web-assets:sassify) java.lang.NoSuchMethodError: com.typesafe.sbt.web.CompileProblems$.report(Lsbt/LoggerReporter;Lscala/collection/Seq;)V
[ERROR] [09/16/2017 18:26:38.111] [play-dev-mode-akka.actor.default-dispatcher-7] [akka.actor.ActorSystemImpl(play-dev-mode)] Internal server error, sending 500 response
```

調べていくと以下のissueにたどり着いた
https://github.com/irundaia/sbt-sassify/issues/28

sbt-sassifyを	1.4.11にバージョンアップして解決
1.4.10はjava9でコンパイルされているので注意
PlayFramework2.5.14を2.6.5にバージョンアップしたときのコードの修正

作業メモです。
## Play
### Configuration

```play2.5.14
val value: Option[String] = config.getString("key")
```

```play2.6.5
val value: String = config.get[String]("key")
```
`getInt`とかも同じ

### Controller

```play2.5.14
class HomeController @Inject() extends Controller
```

```play2.6.5
class HomeController @Inject()(components: ControllerComponents) extends AbstractController(components)
```
`Controller`の継承なし
`ControllerComponents`をDIして継承している`AbstractController`に渡す

### ExecutionContext

```play2.5.14
import play.api.libs.concurrent.Execution.Implicits.defaultContext
```

```play2.6.5
import scala.concurrent.ExecutionContext

class MyController @Inject()(implicit ec: ExecutionContext)
```

play.api.libs.concurrent.Execution が deprecated


## Slick
使用DB: Mysql

```play2.5.14
import slick.driver.JdbcProfile
import slick.driver.MySQLDriver.api._
```

```play2.6.5
import slick.jdbc.JdbcProfile
import slick.jdbc.MySQLProfile.api._
```

`slick.driver`ではなく`slick.jdbc`を使用
`MySQLDriver`ではなく`MySQLProfile`を使用

他にも対応したのがあったので、作業を整理して追記予定。
PlayFrameworkで独自のValidationを定義する

PlayFrameworkにはデフォルトでValidationの制約が用意されています。
`play.api.data.validation.Constraints`がそれに当たります。

しかし、上記に定義されていない制約を用いてValidationを行いたい場合は自身で作成する必要があります。
Play公式に作成方法が書いてあります。
[【Play公式】独自Validationの作り方](https://www.playframework.com/documentation/2.6.x/ScalaCustomValidations#Using-Custom-Validations)

ポイントは`Valid`, `InValid`の使い方で
`Valid`ならOK
`InValid`ならNGになります。

また、InValidの場合は使用するエラーメッセージを指定してください。

下のコードが独自Validationのコードになります。
`Constraint`型を使用して、電話番号に対して制約を定義しています。


```CustomValidation.scala
val TelRegex = """^\d{10}$|^\d{11}$""".r

val telConstraint: Constraint[String] = Constraint("constraint.tel") { tel =>
  if (tel == null) Valid
  else if (tel.trim.isEmpty) Valid
  else {
    val matchResult = TelRegex.findFirstMatchIn(tel.replace("-", ""))
    matchResult match {
      case None => Invalid(ValidationError("error.tel.parttern"))
      case Some(result) => Valid
    }
  }
}
```

使い方はPlayで用意されているのと同じで、`verifying`メソッドの引数に作成した制約を与えてください。
Windowsでgitの改行コード設定（Git for Windows）

Windowsでgitを使っているとよくある改行コードのお話です。

PCをリプレイスして環境構築をした際にGit for Woindowsの改行コード設定を間違えてインストールしてしまい、
開発に使用しているDockerコンテナが起動しなくなってしまいました。

インストール時の改行コード設定
![改行コードを決める画面](https://qiita-image-store.s3.amazonaws.com/0/71234/ccccad43-e428-7aaa-57d3-941d5bcf97cd.png "gitforwindows.png")

選択肢の2番目の`Checkout as-is, commit Unix-style line endings`を選択するべきだったのですが、
実際には1番目の`Checkout Windows-style, commit Unix-style line endings`を選択してしまっていたみたいです。
`git config --global core.autocrlf input`で設定を変更しました。

皆さんもWindowsでGitを使うときはお気をつけ下さい。
PlayFramework(2.5.14)でIPアドレスを取得する時にハマった


## 現象
アクセスしてきているクライアントのIPアドレスを取得する必要があり、`play.api.mvc.Request`の`remoteAddress()`で期待していた結果を取得できなかった。
インフラの構成によると思いますが、自分の場合、Webサーバーとして立てていたNginxのIPアドレスが取得されました。


```HomeController.scala
def index = Action { request =>
  // NginxのIPアドレスが取得された
  val clientIp = request.remoteAddress
  Ok("clientIp[" + clientIp + "]")
}

```

## 原因
調べるとどうやら`remoteAddress()`はHTTPヘッダの`X-Forwarded-For`を返すと分かりました。
この時、`X-Forwarded-For`であれば`client1, proxy1(Nginx)`といった形で取得できるのではと思いましたが、
Nginxの設定を見返すと`X-Forwarded-For`の設定が抜けていました・・・

## クライアントのIPアドレスだけ取得する
取得したかったのはクライアントのIPアドレスだけだったので、以下の実装に修正しました。

```HomeController.scala
def index = Action { request =>
  val xForwardedFor = request.headers.get("X-Forwarded-For").getOrElse("")
  val clientIp = xForwardedFor.split(",").headOption.getOrElse("")

  Ok("clientIp[" + clientIp + "]")
}
```
Slickでtuple22問題にぶち当たった時の対応メモ	

Slickを使っていて突然`slick.collection.heterogeneous.HCons`という型が出てきて？１ってなってのでメモ
slick-codegenを使っている

## 原因
scalaのtuple22問題に起因するらしい
テーブルのカラムが22個超えている場合に`HCons`が登場する

## 対応
HConsで取得される結果と対応するcase classにマッピングする。
マッピングされるcase classはフィールドにcase classを宣言する。
HConsで取得された結果を情報のまとまりごとにcase classにしてそれらをマッピングされるcase classのapplyに渡す。

```ResultMap.scala
case class ResultMap(dataA: DataA, datab: DataB, dataC: DataC)

case class DataA(id: Int, name: String)
case class DataB(tel: String, email: String)
case class DataC(zipCode: String, prefecture: String, city: String, street: String)
```

```HogeDao.scala
db.run(query.result.headOption.map(row =>
  row.map(r => 
    ResultMap(
      DataA(r(0), r(1)),
      DataB(r(18), r(19)),
      DataC(r(20), r(21), r(22), r(23))
    )
  )
)
```

slickでqueryを作成する時点でmapで絞り込めるならその時点で絞り込んだりすれば多少はマシになるかも・・・
１テーブルで22カラムを超えている場合はどうにもならない感あるけど・・・
$0と$BASH_SOURCEの違い

スクリプトを準備

```
$ cat << 'EOF' > test
> echo $0
> echo $BASH_SOURCE
> echo ${BASH_SOURCE:-$0}
> EOF
$ chmod 777 test
```

実行してみる

```
$ ./test
./test
./test
./test
```
```
$ bash ./test
./test
./test
./test
```
```
$ source ./test
-bash
./test
./test
```

```
$ zsh test
./test

./test
```

sourceで実行されても、bashでもzshで実行されてもうまく実行ファイルのパスを取得するためには、```BASH_SOURCE:-$0```と書くべき
実行ファイルのディレクトリの絶対パスを取得するには```echo $(cd $(dirname ${BASH_SOURCE:-$0}); pwd)```でいける
Ubuntu16.04の日本語化

Ubuntu16.04を日本語化したメモ。

```:console
>sudo locale-gen ja_JP.UTF-8

>echo export LANG=ja_JP.UTF-8 >> ~/.profile

>source ~/.profile
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/178016/57bb995e-c0cb-6450-4200-64dcb537be51.png)

dateコマンドの結果が日本語になってます。
JavaScriptでうっかり躓く小石

JavaScriptでこれまでにちょっと引っかかったけど、あとから考えてみればものすごくヘボなことを並べます。
探せば無限に出てきそうだけど、とりあえず3つ！
# 条件演算子
```js:駄目な例
var a = "1" + true ? "10" : "";
console.log(a); // "10"
```
```js:動く例
var a = "1" + (true ? "10" : "");
console.log(a); // "110"
```
## why?
初っ端からJavaScriptと厳密には無関係ですが、やらかした時にひどく困惑した例です。
原因は単純。**条件演算子の評価順は演算子の中でも後ろの部類です。**
(いや、こんなんやらかすのは私ぐらいかもしれませんが……何年コード書いてんだか)

基本的に論理演算が絡むと大抵優先順位は低くなるもんですが、条件演算子は更に輪をかけて低くなるものです。
それを忘れてうっかり上記のようなコードを書くと「あれ？」となります。
# RegExp と Function Scope
```js:駄目な例
var a = /あ/.test
```
```js:動く例
var a = str => /あ/.test(str)
```
## why?
今度はちょっとJSっぽい話です (コードは……まあバカですが……) 。
「駄目な例」は「JSって関数が第一級オブジェクトなんだろ？ /あ/.testを変数に握らせたらそれで呼び出せるんじゃね？？」とか考えて実験したコードです。無論動きません。
何故そんなの実験したかって？疲れてたんでしょう。

ではこれが何故動かないのか？
/あ/.testが指し示す関数は実のところRegExp.prototype.testです。
これがJavaScriptの面白いところで、prototypeでキッチリ構築された (つまり標準APIやしっかりしたライブラリの) オブジェクトのメソッドは、その所属オブジェクトをthisとした上でprototypeの関数を呼んでいるだけなのですよね。
今回の場合で言うと、変数aにぶち込まれたのは/あ/.test===RegExp.prototype.testです。
これは本来thisがRegExpオブジェクトであることを前提としている (所属オブジェクトの情報を基に比較する、当然ですね) ので、当然prototypeの関数だけ引っ張ってきてぶち込んだのではなんの意味もありません。

ちょっと脱線しますが、「じゃあprototypeの関数って単独だとなんの価値もないの？」というと、実はそうでもなかったりします。
Function.prototype.callやFunction.prototype.applyを使うと、任意の値をthisとして引き渡して動作させることが可能です。
有名な使いみちはquerySelectorAllで拾ったNodeListに対し、Array.prototype.forEachを適用するパターンでしょうか。
# isActive? isInactive?
```js:よろしくないかもしれない例
function hoge(isInactive){
  if(isInactive) return;
  // do something
}
```
```js:ちょっといいかもしれない例
function hoge(isActive){
  if(isActive) {
    // do something
  }
}
```
## why?
**何がイケないんだネストは浅いほうがいいだろ！**
そう思ったあなたは正しい。私もそう思います。
しかし重要なのは、「言語と状況によって、どちらがより安全側に倒れるかは異なる」という、ごく単純で致命的な一点です。

上記の2つはどちらも引数を一つ取り、これを条件にifを使用してなにがしかの操作の実行/回避を制御しています。
前者と後者の差はどこで発生するか。言うまでもないですが、JavaScriptの型強制機能……以下のような動作です。

```js:例
Boolean(null); // === false
Boolean(undefined); // === false
Boolean(NaN); // === false
Boolean("false"); // === true
Boolean({}) // === true
```
もしもある操作do sometingがNaNやUndefinedが紛れ込んだ時に動いてほしくない操作だった場合、**前者を使ってはいけません**。たとえ無駄ネスト (っぽいもの) を見ると蕁麻疹が出るような、私のような人種でもです。
もちろん、動かしたほうが安全であるならば前者を使ったほうがよいでしょう。ただ、普通に書けば、大抵は「ここはこの条件の時動かしたくないんだよなあ」という要件のほうがよっぽど多いはずです。

なお、ネスト嫌いの民へのステロイド剤もちゃあんとあります。
なにせJavaScriptはなんでもできるので、Booleanへ機能を足すなんてお茶の子さいさいです。

```js:ステロイド剤(劇薬です！)
Boolean.prototype.ifTrue = function(func){
  if(this.valueOf()) { // this = Boolean
    return func();
  }
}
// usage: isActive.ifTrue(action)
```
うーん、まんだむ。改良の余地は山ほどある気がしますが、とりあえずある程度は使えそうです。
なにしろこれはBooleanのprototypeなので、やってきたオブジェクト (usageで言うところのisActive) がBooleanでなければ、そもそもundefinedで蹴られるはずなのです！わーお。
実際にここまでやるべきかどうかはともかく (遺憾ながらたぶんやるべきではないでしょう……) 、最終手段として考えてみるのはありかもしれません。
ちょっとずつ読むドメイン駆動設計 第ニ部 モデル駆動設計の構成要素 第五章 ソフトウェアで表現されたモデル5(エンティティ・モデル)

# エンティティ モデル

> エンティティにとって最も基本的な責務は、ふるまいが明確で予測可能になるよう、連続性を確立することである。これが一番うまくいくのは、余計なものがない状態が保たれている時だ。属性やふるまいに集中するよりは、エンティティオブジェクトの定義を、最も本質的な特徴にまで削ぎ落とすこと。(第二部第5章より)


[「設計とプロセス」](https://qiita.com/YasuhiroKimesawa/items/32dd9013e81c505611fb)で読んだように、DDDは、アジャイルプロセスで開発することを前提としています。

イテレーティブ（反復的）にモデルを成長することができるので、上記のように、まずエンティティを最も本質的な特徴にまで削ぎ落とすようなことも可能となります。

## エンティティの本質的な特徴とは
- エンティティを識別するもの
- エンティティを検索し突き合わせるのに通常使用されるもの
- その概念にとって本質的なふるまいと、そのふるまいが必要とする属性

上記からエンティティとその属性を見つけ出し、さらにそれらの属性が別のエンティティや値オブジェクトに移動できないかを検討します。

"削ぎ落とす"というのはそういうことなんですね。

設計・開発にとって、必要なものを付け足していくというのは普通のことですが、それをわざわざ削ぎ落としていくことにDDDの真髄があるような気がしますね。

## 例

![クラス図0.png](https://qiita-image-store.s3.amazonaws.com/0/150455/b0e4ec22-c874-47fb-d12c-e748198cc76d.png)

たとえば、注文の例で言えば(全然属性が足りないですが・・・あくまで例として)、まず上記のようにモデリングをしたあとに、削ぎ落とす作業をします。

- 注文IDはエンティティを識別するものなので残します。
- 配送先住所は問い合わせがあった場合に検索に使うので残します。
- 商品名で注文を検索することはないので移動します。
- 合計金額で注文を検索することはないので移動します。

というわけでこうなりました。
![クラス図1.png](https://qiita-image-store.s3.amazonaws.com/0/150455/8bfc7ce0-bbb8-358a-66d9-90b62d5ad31f.png)

注文の合計金額も注文の本質的なふるまいですが、注文合計金額というモデルを分けたのでふるまいをそちらに移動しています。

商品も商品コードで識別していますので、ここのエンティティの検討も必要になりますね。

明日は実装面を見てみたいと思います。
【Swift】SFSafariViewControllerが白くなる？

## SFSafariViewControllerが読み込まれない
同様の問題
https://stackoverflow.com/questions/45641887/sfsafariviewcontroller-displays-empty-screen-for-any-url
<img width="300" alt="スクリーンショット 2017-10-01 23.31.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/132410/68141dc5-9a27-19b4-6a78-8bd15906cceb.png">

上図のようにSFSafariViewControllerが白くなってしまう場合があったので原因を調べて見ました。

### 実行したソース
```swift
let url = URL(string: "https://qiita.com/0905Tom")
let viewController = SFSafariViewController(url: url!)
topVC?.present(viewController, animated: true)
```
何気ないこのソースで`SFSafariViewController`が白くなってしまいました。
なぜだろうと思い少し調査していると、どうやら`UIApplication.shared.keyWindow`に問題がある様子。

私が実現したかったのはYoutubeのように右下にPlayerを表示したまま、SFSafariViewControllerにpresentという動作。
そのため、presentする前に自作`UIWindow.rootViewController`に対して`PlayerViewController`をセットし、`window?.makeKeyAndVisible()`をしていました。そうすると元keyWindow、つまりkeyWindow上にない`topVC`からpresentすることでこのように白くなりました。

## 解決方法
幸い`WindowManager`的なもので複数のwindowを管理していたため、以下のように対応することで期待する動作をしました。

※以下はソースの抜粋です！！

```swift
// 複数のUIWindowを管理しているクラス
class WindowManager {
  static let shared = WindowManager()
  
  var topWindow: UIWindow?

  var topVC: UIViewController? {
    return topWindow?.rootViewController
  }

  var playerWindow: UIWindow?
}

// SFSafariViewControllerに遷移するメソッド
func presentToSafari() {
  let url = URL(string: "https://qiita.com/0905Tom")
  let viewController = SFSafariViewController(url: url!)
  WindowManager.shared.topWindow.makeKey()
  WindowManager.shared.topVC?.present(viewController, animated: true)
}
```

少し乱雑になってしまいましたがイメージは上記の感じです。サンプルリポジトリは後日作ろうと思います。
present元にしたい`UIWindow`に対して再度`makeKey()`してあげると正常に表示されました！
`PlayerViewController`もきちんと`SFSafariViewControlller`上で動作しました。

## 最後に
対応の仕方はそのプロジェクトの構成によりけりですが`SFSafariViewController`はkeyWindowからの遷移を想定している様です...何か他の解決法を見つけた方、同様の問題が起きたことがある方がいらっしゃいましたらご教授お願いします :bow:
Laravel5.4 + Vuejsのアプリをherokuで公開する手順

# heroku
## 概要
- Paas
- 料金についてはいろいろルールがありますが、趣味の範囲で公開するなら無料で利用できます。
- ソースコードさえあればあとはherokuにおまかせで簡単に公開できます！💡
- DBなどもアドオンで利用可能。

## アカウント登録
- 公式サイトから。
- アドオンを利用する場合はクレカ登録が必要なのでしておきましょう。

## herokuCLI
- herokuの操作を全てコマンド実行可能。
- 自動デプロイなどする場合に必要になってくるので今回はこっちで。

### インストール
```bash:bash
brew install heroku/brew/heroku
```

# Laravel
## 前提
- Vuejsを利用したアプリケーション。
- デプロイ前にwebpackでのコンパイルを行う。
- 既にgit管理下であること。
- DBのmigrationも利用。
- ルートに`composer.json`が配置されていること。そうでないとPHPと**認識してくれません！**

## herokuで動かすための準備
### Procfile
- このファイルでドキュメントルートの指定を行います。ルートにコミットする。
- laravelはpublic配下を指定する必要があるので以下のように記述。

```text:Procfile
web: vendor/bin/heroku-php-apache2 public
```

### nodejs
- webpackでのコンパイルはnpmでなく、yarnで行い`yarn.lock`ファイルをルートにコミットする。
- デプロイ時にコンパイルを自動実行してもらうために、以下の記述をpackage.jsonに追加する。
- postbuildに書いたスクリプトをnpm install完了後に実行してくれます。

```json:package.json
  "scripts": {
    "heroku-postbuild": "npm run production"
  }
```

# デプロイ
## 概要
- heroku-gitのmasterに対してpushを行うとデプロイされます。
- 開発はgithubで行い、デプロイ時はheroku-gitへpushするといったフローにする。
- デプロイ後にcomposer、yarnなど一通り自動実行されるので、基本的にはpushしたら公開される状態になるはず。

## 手順
- ログイン

```bash
heroku login
```
- アプリケーション作成、ここで指定した名前がURLになります。

```bash
heroku create {アプリケーション名}
```

- ビルドパックの指定、今回はPHPとnodejsを利用するので以下のコマンドを実行。

```bash
heroku buildpacks:set heroku/php
heroku buildpacks:add heroku/nodejs
```

- 環境変数の設定、laravelで必要な設定

```bash
heroku config:set APP_KEY=$(php artisan key:generate --show)
```

- gitのリモートURLにherokuを追加する

```bash
heroku git:remote -a {アプリケーション名}
```

- デプロイ実行！`composer install`や`yarn`、`npm run production`が実行されるはず！

```bash
git push heroku master
```

- 確認、以下コマンドを実行するとブラウザで自分のアプリが開かれます。

```bash
heroku open
```

# データベースの利用
- https://elements.heroku.com/addons
- ここで利用したいアドオンを探します。料金プランなども確認可能。

## mysqlの追加
- 今回はmysqlのフリープランを追加していきます。

```bash
heroku addons:create cleardb:ignite
```
`cleardb` ：　mysqlアドオン名
`ignite` ：　プランを指定、igniteはフリープランです。

## DB設定
- 以下コマンドを実行するとDB接続に必要な情報が取得できます。

```bash
heroku config | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL: mysql://{ユーザー名}:{パスワード}@{HOST}/{DB名}?reconnect=true
```

- laravel用の環境変数に上記で取得した情報を設定する。

```bash
heroku config:set DB_HOST={HOST}
heroku config:set DB_DATABASE={DB名}
heroku config:set DB_USERNAME={ユーザー名}
heroku config:set DB_PASSWORD={パスワード}
```

## マイグレーションを実行してみる
- `heroku run {コマンド}`でheroku上でコマンドを実行できます。
- 無事実行されれば完了！

```bash
heroku run php artisan migrate
```

# その他
## アクセスログを見たい
- logsコマンド

```bash
heroku logs -t
```

## デバッグしたい
- .envでなく`heroku config:set`で環境変数を設定する。

```bash
heroku config:set APP_DEBUG=true
```

## デプロイに失敗する！
- ビルドパックを設定しなおしてみる

```bash
heroku buildpacks:set heroku/php
```

- 必要なファイルの確認、以下ファイルがルートに存在しないとうまくいかない。

```bash
Procfile
package.json
composer.json
yarn.lock
```

# まとめ
趣味アプリを無料公開するならお手軽なのでオススメです！
平行座標

あるデータ系列の頻度を表すものとしてヒストグラム。
2変数の関係を表そうと思ったら散布図、3次元なら頑張って3Dで図示してグリグリ動的に動かせると楽しいです。

で、それ以上というか4次元以上は完璧に見通すのは常人には無理なので(汗)、ある程度情報量が落としてもいいので何か出せないか、という時のアイデアの1つに平行座標(parallel coordinates)があります。

散布図のように縦軸・横軸を直行させる代わりに、無理矢理同じ方向(=平行)に並べていく感じです。

## library読み込み

```py3
from sklearn.datasets import load_iris
from pandas.tools.plotting import parallel_coordinates
	
import pandas as pd
import matplotlib.pyplot as plt
import matplotlib

matplotlib.style.use('ggplot')
```

ここでコケた場合は、`pip install`なり`conda`あたりで必要なパッケージを入れておいて下さい。
`parallel_coordinates`が今回のテーマです。


## データ読み込み
```py3
data = load_iris()
df = pd.DataFrame(data.data, columns=data.feature_names) 
```

この時点で中身を確認すると、、、

```py3
df.head()
```

|#|sepal length (cm)|sepal width (cm)|petal length (cm)|petal width (cm)|
|-----|----|----|----|----|----|
|0|5.1|	3.5|1.4|0.2|
|1|4.9|	3.0|1.4|0.2|
|2|4.7|	3.2|1.3|0.2|
|3|4.6|	3.1|1.5|0.2|
|4|5.0|	3.6|1.4|0.2|

マジメに表現しようとすると、4次元なので、直交座標では表現出来ません。

## `iris`の名前をつける
`iris`にはお約束の名前を`target_name`として付加しておきましょう。

```py3
df['target_names'] = [data.target_names[i] for i in data.target]
df.head()
```

|#|sepal length (cm)|sepal width (cm)|petal length (cm)|petal width (cm)|target_names|
|-----|----|----|----|----|----|
|0|5.1|	3.5|1.4|0.2|setosa|
|1|4.9|	3.0|1.4|0.2|setosa|
|2|4.7|	3.2|1.3|0.2|setosa|
|3|4.6|	3.1|1.5|0.2|setosa|
|4|5.0|	3.6|1.4|0.2|setosa|

、、となって右側のカラムに`setosa`などの`target_name`カラムが追加されました。

## 表示
`target_names`を凡例として平行座標表示：

```py3
plt.figure()
parallel_coordinates(df, 'target_names')
plt.show()
```

![download.png](https://qiita-image-store.s3.amazonaws.com/0/80539/e332cb0c-2820-18bd-03ad-ac09a007473e.png)

例えば、黄色の`virginica`を見てみると、`sepal length(cm)`が、他の2種類より全体的に大きく、`sepal width(cm)`は中くらい、、、などが視覚的にわかりますね。
勿論、きちんとデータ分析などに使う場合は雰囲気だけじゃなくて統計量を使って定量的に見ましょう(当然)。

次元数(=カラム数)は4つ使っていますが、連続量に関する大小関係を視覚的につかみたい場合には適していそうですね。

## References
- parallel coordinates: 
    - https://en.wikipedia.org/wiki/Parallel_coordinates
    - https://pandas.pydata.org/pandas-docs/stable/visualization.html#visualization-parallel-coordinates
    - https://stackoverflow.com/questions/8230638/parallel-coordinates-plot-in-matplotlib
    - https://eagereyes.org/techniques/parallel-coordinates
SQLServerの歴史から

昨日のMicrosoftのページがどうにも読みにくくて、イマイチ理解出来ずSQLServerに対するニガテ意識が出てきそうだったので、(翻訳前の元ページを読む根気はなかった…)<br>色々SQLServerの記事を見ていたところ下記にたどり着く。<br>

https://enterprisezine.jp/dbonline/detail/7899

SQLServerの歴史に始まり、SSRSのことやSQLServerの構造までさっくり分かりやすい説明で<br>個人的には非常にわかりやすかったです。

### <font color="orange">↓ここからは上記サイトの引用---</font>

- SQLServerでは、インスタンスとDBは1:Nの関係となる。
- OS上に複数のSQLServerインスタンスの配置が可能。
- インスタンスを構成するDBにはSystemDatabaseとUserDatabaseの2つの要素がある。
- SystemDatabase:インスタンスレベルのメタデータ(制御情報、ユーザー情報)や一時作業領域として利用される。
- 各システムテーブルは以下がある。<br>

<table>
<thead>
 <tr>
 <th>名前  </th><th>概要</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td><font color="red">master   </font></td><td>システム全体の情報</td>
 </tr>
  <tr>
 <td>model</td><td>DBを作成する時のテンプレート。CREATE DATABASEでmodelがコピーされ、それに対してカスタマイズが行われる。</td>
  </tr>
  <tr>
<td>msdb</td><td>ジョブのスケジューリングとか</td>
 </tr>
 <tr>
 <td>tempdb</td><td>作業用のDB。SQLserver起動時に自動的に初期化。</td>
 </tr>
</tbody>
</table>

上記でも特に「master」がSQLServerの特徴的な構成としてある。<br>SQLServerは起動時にインスタンスレベルの各種パラメータ情報をmasterDBで管理しているため、<br>パラメータの多くがSQLServerの稼働中に変更可能で、インスタンスの再起動が不要。

msdbは定期的なメンテナンスが必要。SQLServer Management Studioからメンテナンスジョブの作成が可能。

…今日はここまで。明日も引き続き上記URLの連載記事で勉強。
SierraにKHCoderをインストールしたときのメモ

# 背景
テキストマイニングのためのフリーソフトウェアとして有名なKH Coderをインストールしたときのメモです。
デファクトスタンダードは、Windowsにインストールするのですが、perlとRとTKで動いているためクロスプラットフォームで動きます。自分はMacしか持っていなかったため、Macにインストールしました。

# 環境
OS: 10.12.3(Sierra)
shell: bash

# インストール
[KH CoderをMacにインストール](http://labo.utsubo.tokyo/2016/05/18/kh-coder%E3%82%92mac%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/)
=> perl以外はこっちがオススメ

[Mac】KH Coder導入手順](https://qiita.com/yossun/items/0423bf6775de8e6305f3)
=> perlのインストールは、cpanmを使ったこっちがオススメ

`brew`で失敗することはなく、perlのモジュールをインストールしたときに失敗しました。
`perl -MCPAN -e shell`ではTK, Clipboardが失敗したため、`cpanm`でインストールしたらうまくインストール出来た記憶があり
ます。`make`とかはしなくても動きました。

また、一度失敗しても、`cpanm Clipboard --force`などと`--force`をつけると動く場合があります。

どうしてもインストールできない場合は、公式に有償サポートがありますので、こちらを使うと早いと思います。
=> [Macで手軽にKH Coderを［有償サポート］](http://khc.sourceforge.net/mac_com.html)

※ インストール時は言語環境がUTF8でも問題ないです。

# X Winodow Systemについて
kh_coderの起動にはX Winodow Systemが必要です。Macでは、xquartzというアプリケーションでX Window Systemが使えます。[ここ](https://www.xquartz.org/)からdmgファイルをダウンロードしインストールします。
インストールするとターミナルの中で`startx`コマンドが使えるようになります。

# kh_coderを起動する

kh_coderはターミナルから起動します。ターミナルのデフォルト言語環境はUTF8です。kh_coderはSJISの環境で起動する必要があるため、ターミナルの言語環境を`SJIS`に変更してから起動してください。

<img width="669" alt="貼り付けた画像_2017_10_01_23_04.png" src="https://qiita-image-store.s3.amazonaws.com/0/2432/508eb857-b9c0-1738-693d-2dff63674511.png">

## X Window Systemを起動する

kh_coderを起動するには、xwindowを事前に起動する必要があるため`startx`コマンドを実行します。

```bash
startx
```

出力結果

正常時

```
This is KH Coder 2.00f on darwin.
CWD: /Applications/kh_coder
R Version: 3.3, x86_64
Using un-threaded functions...
```

文字コードは間違っていると、起動はしますが、下記のエラーが出ます。

```
font_cache: Scanning user font directories to generate X11 font caches
font_cache: Updating FC cache
font_cache: Done
expr: syntax error
expr: syntax error
expr: syntax error
xauth:  file /Users/xxxxx/.serverauth.94212 does not exist
xauth: (argv):1:  bad display name "xxxxxx.local:0" in "list" command
xauth: (stdin):1:  bad display name "xxxxxx.local:0" in "add" command

/opt/X11/bin/xinit: XFree86_VT property unexpectedly has 0 items instead of 1
```

※: `xxxxxx`は、自分のフォルダー名／PC名なのでマスクした

## kh_coderを起動する

```
perl kh_coder.pl
```

下記のWindowが開けば成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/2432/8db8d06a-11d1-0d75-f0da-fa71161e796c.png)

## kh_coderが起動しない場合

X Window Systemが起動していないと`perk kh_coder.pl`を実行したときに下記のエラーが出力されます。
ターミナルの言語環境はSJISに設定し`startx`コマンドを実行しましょう。

```
This is KH Coder 2.00f on darwin.
CWD: /Applications/kh_coder
sh: line 1: 94387 Killed: 9               /usr/local/bin/R --slave --vanilla < start.r > output.log
R Version: 3.3, x86_64
Using un-threaded functions...
couldn't connect to display ":0" at /Library/Perl/5.18/darwin-thread-multi-2level/Tk/MainWindow.pm line 53.
MainWindow->new() at /Applications/kh_coder/kh_lib/gui_window.pm line 117.
Warning message:
In Sys.setlocale(category = "LC_ALL", locale = "ja_JP.EUC-JP") :
  OS reports request to set locale to "ja_JP.EUC-JP" cannot be honored
```
Laravelを使ったデータ操作の備忘録


# 前提
- Laravelにはデータを扱うための様々な機能が存在します
- この記事はクエリビルダとコレクションとEloquentなどに関するゲームアプリを想定したデータ操作の備忘録です

# 基本知識（戻り値）
| 項目 | 戻り値の型 |
|-----|-----------|
|->first|Model|
|->get|Illuminate\Database\EloquentのCollection（配列をラップしたもの）|
|Collection用メソッドの結果|Illuminate\SupportのCollection（配列をラップしたもの）|
|->toArray|array（配列への変換）|
|->all|array（配列への変換）|

# よく使う関数などの備忘録

```php
// データベースから取得した内容（事前に配列変換が必要）から1つのカラムを指定して、そのカラムだけの配列を生成する
array_column(多次元配列, 抽出したいカラム名);

// 二次元連想配列の結合
$result = ['normal' => $hoge1];
$result += ['special' => $hoge2];

// カラムの中身が特定の値であるレコード数をカウントする（※二次元連想配列の時に使用）
array_count_values($hoge)

// 連想配列への要素の追加（データベース内のJOINは処理が重いので禁止。こちらの方法で結合する）
foreach ($hogeList as $hoge) {
    $hoge['追加するキー'] = 追加したい内容
}

// データが空またはNULLかどうかの判定
if(empty($hoge)) {
    // 空だった時のエラー処理
}

// エラー処理
abort(403, '値は必ず100,000にして下さい');

// コレクションの中から特定のカラムのみを抜き出す
$hogeCollection->pluck('mst_id');
```

# クライアントへ送る結果
- Laravelでは配列をreturnすると自動的にJSONにしてくれる
- クライアントに渡したい内容をarrya()関数を使って最終的に結合する

```php
$result = ["hogehoge" => $hogehogeList, "hoge" => $hogeList];
```

# トランザクション
```php
DB::beginTransaction();
try {
    // 行いたい処理を書く	
    DB::commit();
} catch (\Exception $e) {
    $result = ['isSuccess' => false,'message' => "aaaaaaaaaa"];
    DB::rollback();
}
```

# 参考
- [PHP isset, empty, is_null の違い早見表](http://qiita.com/shinichi-takii/items/00aed26f96cf6bb3fe62#php-isset-empty-is_null-%E3%81%AE%E9%81%95%E3%81%84%E6%97%A9%E8%A6%8B%E8%A1%A8)
- [PHPの連想配列をソートする時に便利な関数（array_multisort)](http://act2u.net/blog/?p=155)
UnityでグレースケールテクスチャにカラーをのせるEditor拡張

#概要
AEにあるエフェクトのColoramaのようにグレースケールのテクスチャに対してグラデーションテクスチャの色をのせることができます。これをUnityで作ってみました。
GitHubは[こちら](https://github.com/yoike/Colorama)。


#リファレンス
Editor拡張のインターフェースとしてはMaterialEditorになります。
下記画像のようにColorama/AdditiveなどColoramaのShaderを選択した際にGradientを４つ調整できるようになります。
![30335166-8c6dce8a-981c-11e7-9719-d31ef7c93cc5.PNG](https://qiita-image-store.s3.amazonaws.com/0/27032/84e515c3-9cc3-2340-7575-a6655406c144.png)

それぞれのパラメーターについてですが下記のようになっておりRateをアニメーションさせることでグラデーションのアニメーションを実現します。

| パラメーター名 | 説明 |
|:-----------|:------------|
| Gradient0  | Rateが0のときのグラデーション |
| Gradient1  | Rateが0.33のときのグラデーション |
| Gradient2  | Rateが0.66のときのグラデーション      |
| Gradient3  | Rateが1のときのグラデーション      | 
| Rate       | グラデーションのどこを使うか      | 
| Save| グラデーションの変更を保存するかどうか | 

画像のようなパラメーター設定にすると自動的にこのようなグラデーションのテクスチャが生成されます。
![Additive.png](https://qiita-image-store.s3.amazonaws.com/0/27032/2fa8be80-8df2-af8c-8408-c7afad063b13.png)

内部的にはこちらを参照して色をのせるだけなので負荷も軽めです。


#実装
##Shaderについて
Shaderは非常にシンプルでCGPROGRAM ~ ENDCGのところを表示するとこれだけでグレースケールのテクスチャからとった値を元にグラデーションテクスチャをSampleしているだけです。
将来的にはグレースケールのほうのG,Bも何かに使いたいところです。

```
sampler2D _MainTex;
float4 _MainTex_ST;
sampler2D _GradientTex;
float _Rate;


v2f vert(appdata v)
{
	v2f o;
	o.vertex = UnityObjectToClipPos(v.vertex);
	o.uv = TRANSFORM_TEX(v.uv, _MainTex);
	return o;
}

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    fixed4 gradient = tex2D(_GradientTex, float2(col.r, _Rate));
    return fixed4(gradient.rgb, col.a);
}
```

##Material Editorについて
Material Editorは非常に便利で特定のShaderのときにMaterialのInspectorをカスタムできます。

こんな感じのをShaderの下に各だけでColoramaInspectorというファイルを参照してくれます。

```
CustomEditor "ColoramaInspector"
```

ColoramaInspector.csではGradient EditorをUIに使うことでグラデーションテクスチャを直感的にUIで作ることができます・
Gradient Editorについての詳細は[こちら](https://qiita.com/yoike/items/37a8ec593f3274d4ddcc)

RuntimeでGradientのデータを使うと速度的に怪しかったのでEditorで編集された際にTextureを作っています。
Textureの生成処理は以下のようにしています。

```
void Gradient2Texture(GradientData data, ref Texture2D texture)
{
    if (texture == null)
    {
        Debug.Assert(false, "[GradientData] Texture is missing!!!");
        texture = CreateTemporaryTexture();
    }

    Gradient[] gradients = new Gradient[]
    {
        data.gradient0,
        data.gradient1,
        data.gradient2,
        data.gradient3
    };

    for (int h = 0; h < texture.height; ++h)
    {
        Gradient gradient = gradients[h];
        for (int w = 0; w < texture.width; ++w)
        {
            float rate = (float)w / (float)texture.width;
            Color color = gradient.Evaluate(rate);
            texture.SetPixel(w, h, color);
        }
    }

    texture.Apply();
}
```
homebrewでGLFWを入れてコマンドラインで実行するまで

OpenGLの参考書でGLFWを使うのだが、実行するまでにつまづいたのでメモ。

まずはhomebrewでglfwをインストールする。

```bash
$ brew install glfw
```

GLFWのサイトからサンプルコードを持ってきて、`sample.c`として保存する。
[GLFW \- Documentation](http://www.glfw.org/documentation.html)

作成した`sample.c`をコンパイルする。

```bash
$ clang sample.c -o sample -framework OpenGL -I/usr/local/include -L/usr/local/lib -lgfw
```

実行ファイルを動かしてみる。

```
$ ./sample
```
TypeScript の enum を JSON オブジェクトにワンライナーで変換する。

Angular をやっている時に、enum からプルダウンメニューを作っている時に、enum を JSON に一発変換できないかなぁと思って、色々試してみました。

# enum の構造

```ts
export enum FoodType {
    breakfast = 0,
    lunch = 1,
    dinner = 2,
    snack = 3
}
```

これをどうやって JSON に変換するか考えます。

# イテレーション

enum はどうやらイテレートできるっぽいので、次のようなコードを書いてみます。

```ts
for (let foodType in FoodType) {
    console.log("log:" + foodType)
}
```
実行結果はまさかの、

```
log:0
log:1
log:2
log:3
log:breakfast
log:lunch
log:dinner
log:snack
```

キーと値が一緒こたんに出てくるという感じ。

じゃあ、こんなコードでどうだ。

```ts
for (let foodType in FoodType) {
    if (!Number(foodType)) {
        console.log("log:" +foodType);
    }
}
```

```
log:0
log:breakfast
log:lunch
log:dinner
log:snack
```

なんで０が数字じゃないとか、のたまっています、、なんでやねん。

```ts
for (let foodType in FoodType) {
    if (Number(foodType) || foodType == '0') {
        console.log("Log:" + foodType);
    }
}
```
これやと文句ないか？強引やけど。

```
Log:0
Log:1
Log:2
Log:3
```

# enum の変換

enum のキーから値をとったり、その逆はいけるだろうか？

```ts

let a = FoodType["breakfast"];
console.log(a);
let b = FoodType[0];
console.log(b);
```

そのへんは柔軟っぽい。

```
0
breakfast
```

よっしゃ、この情報があれば、あとはJSON に変換できる。

# JSON への変換

ループでまず書くとこんなの。

```ts
let result: Array<any> = [];
for (let foodType in FoodType) {
    if (Number(foodType) || foodType == '0') {
        result[foodType] = { "key": foodType, "value": FoodType[foodType]};
    }
}
```

```
[ { key: '0', value: 'breakfast' },
  { key: '1', value: 'lunch' },
  { key: '2', value: 'dinner' },
  { key: '3', value: 'snack' } ]
```

# ワンライナーで、JSON変換

そして、ワンライナーで書いてみる。

```ts
let value = Object.keys(FoodType).filter(v => Number(v) || v == '0').map(k => { return { "key": Number(k), "value": FoodType[Number(k)] }});

console.log(value);
````

行けた。

```
[ { key: 0, value: 'breakfast' },
  { key: 1, value: 'lunch' },
  { key: 2, value: 'dinner' },
  { key: 3, value: 'snack' } ]
```

ポイントとしては、map のところで渡すものは、`k => ` の右側は、普通に変換したい値でよかったが、ここにはコールバックを入れる必要があるらしく、関数の戻り値っぽく書いていると動いた。単に `{"key": Number(k), "value": FoodType(Number(k)]}` とかだとエラーになってしまった。

とはいえ、うまくかけたので、ワンライナーの方で実装します。

以上。

# Resource

* [How to programmatically enumerate an enum type in Typescript 0.9.5?](https://stackoverflow.com/questions/21293063/how-to-programmatically-enumerate-an-enum-type-in-typescript-0-9-5)
StackStormを使ってみる

最近、日商エレクトロニクスさんのNewRelicセミナーの中で、紹介があったことからStackStormを知りました。

- [StackStormでNew Relicと連携してみました](https://qiita.com/KUROPON/items/b2a0f4238cef58338bb)

# StackStormって何だろ？

event-drivenタイプの自動化ツールで、現在はBrocadeが所有しています。

[StackStorm](https://stackstorm.com/)


APIを通して他の製品と色々連携できそう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/204807/0f35f1bb-fa6a-b01b-636f-0eae3325bf8d.png)

自分でサーバ立てるので、linuxサーバが使えればplatformは自由。
AWS lambda、Azure functionみたいにvender lockinしないことがメリットか。

自前のサービスでmulti platformの監視基盤となるところにおいて使えそう。
個人的にはActionでansible使ってゴニョゴニョしてみたい。

# まずはインストールしてみっか

AWS EC2でサーバを立ててみました。
使用したOSはCentOS6(ami-d4d0e2b3)、
(CentOS7はうまくインストールできなかった)。

[各Distributionを使用する場合のインストール方法はここを参照してください](https://docs.stackstorm.com/install/index.html)

インストールは簡単、ワンライナーで一発！
`curl -sSL https://stackstorm.com/packages/install.sh | bash -s -- --user=st2admin --password='<your password>'`

うまくインストールできると"ST2 OK"となります。

```install.log
Complete!

####################### WARNING ########################
######## Chatops requires manual configuration #########
Edit /opt/stackstorm/chatops/st2chatops.env to specify
the adapter and settings hubot should use to connect to
the chat you're using. Don't forget to start the service
afterwards:

  $ sudo service st2chatops restart

For more information, please refer to documentation at
https://docs.stackstorm.com/install/rhel6.html#setup-chatops
########################################################


███████╗████████╗██████╗      ██████╗ ██╗  ██╗
██╔════╝╚══██╔══╝╚════██╗    ██╔═══██╗██║ ██╔╝
███████╗   ██║    █████╔╝    ██║   ██║█████╔╝
╚════██║   ██║   ██╔═══╝     ██║   ██║██╔═██╗
███████║   ██║   ███████╗    ╚██████╔╝██║  ██╗
╚══════╝   ╚═╝   ╚══════╝     ╚═════╝ ╚═╝  ╚═╝

  st2 is installed and ready to use.

Head to https://YOUR_HOST_IP/ to access the WebUI

Don't forget to dive into our documentation! Here are some resources
for you:

* Documentation  - https://docs.stackstorm.com
* Knowledge Base - https://stackstorm.reamaze.com

Thanks for installing StackStorm! Come visit us in our Slack Channel
and tell us how it's going. We'd love to hear from you!
http://stackstorm.com/community-signup
```

# WebUIへログインしてみよう
自分が作成したサーバのIPアドレスへブラウザでアクセスします。
`https://<your host IPaddress>`

<img width="1275" alt="スクリーンショット 2017-10-01 22.37.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/204807/35be9bb6-35d0-6d6f-2bba-7765163937ce.png">

ログインするアカウント、パスワードはインストールのコマンドで指定したものです。

<img width="1271" alt="スクリーンショット 2017-10-01 22.38.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/204807/fab3c0ea-60b3-0797-4651-2d1cba7931d7.png">

ログインできました！


次回は実際にStackStormを使ってみたいと思います。
仮想マシンとwindowsの間でフォルダを共有する

# やりたいこと
windowsと仮想マシンでフォルダの共有を行いたい
いちいちwinscpとかでデータ共有するのが大変なので、
（時間的）コスト削減！

他にも方法はあると思いますが、今回ご紹介するのは、
`mount`コマンドでVMWareでもVirtualBoxでも、同じようにできる方法です。
あと、Ubuntu + NASとかでもできるので、けっこう便利（と感じている）
NASの場合は、Ubuntu側の設定だけでOKです。

# 試した環境
- Windows 7 + Ubuntu 14.04

# 設定方法
## Windows 側
共有したいフォルダ(`c:/users/username/desktop/hoge`として説明）を作成
右クリック→ プロパティ → 共有 → 共有する相手を追加で、EeryOneを追加。さらにアクセス許可のレベルを"読み取り/書き込み"にする

コマンドプロンプトで、`ipconfig`にてwindowsのIPを確認

## Ubuntsu 側
`$ sudo apt-get instal cifs-utis`
`$ sudo mkdir /mnt/windows # mountしたいフォルダ` 
`$ sudo mount -t cifs -o uid=${uid},gid=${uid},user=${host_user},password=${host_user_password},rw,file_mode=0777,dir_mode=0775 //${host_ip}/hoge /mnt/windows`

uidとgidはUbuntu側で利用しているユーザやグループを指定してください。
userはwindowsで利用しているユーザ名、passwordはログインするときのパスワードです。

# 確認方法
windows側で、適当に`hoge.txt`を作成し、
Ubuntsu側で、`ls /mnt/windows/`で `hoge.txt`が表示されればOK

逆にUbuntu側でも、適当に`foo.txt`を作成し、
windows側で`foo.txt`があるかを確認すればOK

# 参考
補足。
最初、やろうとしたら、`

`mount: wrong fs type, bad option, bad superblock on //(ipアドレス)/hoge,`

というようなエラーが出力された。
調べてみると、cifsがサポートされてなさそうであった。
下記のページを見ると、`cifs-utils`をインストールすればよいよ、って書いてあるので、
それを参考にしてできました。
めでたし、めでたし～

- https://askubuntu.com/questions/525243/why-do-i-get-wrong-fs-type-bad-option-bad-superblock-error