OmniAICreator/Qiita-1.07M huggingface dataset:
clickイベント　基本メモ

基本的なclickイベント時の記述の仕方と思いましたんで、メモ。

```js
$(window).load(function(){
	clickFn();
});

function clickFn(){
	let go = {
			target : $(".header .navIcon"),
			open : "js-open",
			body : "body",
			play : function(){
						if(!$(go.target).hasClass(go.open)){
							$(go.body).toggleClass(go.open);
					}
				},
			}

	go.target.on("click",function(){
    go.play();
	});
};
```

基本的な、オブジェクト志向の記述です。
では、参考までに
CoreOSにログインしたときのエラーメッセージ

CoreOS shows failed units at login, what does it mean?
https://www.digitalocean.com/community/questions/coreos-shows-failed-units-at-login-what-does-it-mean

## エラーの調査

```
systemctl --failed
```

## エラーのリセット

```
sudo systemctl reset-failed
```
企業向けLINEアカウントの違いを比較してみる

先日弊社にて共同運営といった形でLINE@のMessagingAPIを利用したサービスをリリースしました。

WazzUp!
https://wazzup.me/

サービスの内容はサービスサイトと営業窓口となってくださっているファナテックさんのブログをご覧いただければと思います。
https://ecfanatic.com/blog/


そういった関係で各企業様が利用しているLINE@アカウントに対して
Messaging APIの利用開始設定をする機会があるのですが、赤字でこんな記載があります。

![8b654c4cfd444732248967d702bc31b9.png](https://qiita-image-store.s3.amazonaws.com/0/145013/e0c79078-bff0-de80-3139-caba14bcf0ca.png)

・1:1トーク => 最悪、開発すればいいのでべつになくなってもいいか。
・LINE@アプリ => 申し訳ございません。今後はPCからのみ更新してください。。。
・LINE@から「LINE公式アカウント」、または「ビジネスコネクトアカウント」への切り替え => ????
・Official Web Appへの切り替え => ???????

利用前の状態に戻すことができないと言われると不安になるもので、
「まぁ大丈夫っすよ」なんて気軽にもいえないのでちょっと理解を深めてみることにしました。
ここにもあるように企業向けのLINEのアカウントは大きく分けて3種類提供されているようです。

・LINE公式アカウント
・ビジネスコネクト
・LINE@

3アカウントの概要はこちらのサイトが分かりやすかったです。
https://satori.marketing/marketing-blog/socialmedia/linebusinessconnect/

抜粋すると

>・LINE公式アカウント
企業、ブランド、アーティストなどが開設でき、友だち登録したユーザーへのメッセージの一斉配信などが行えます。
LINE公式アカウントは、LINE内での露出機会が多いため、友だちを獲得しやすくなります。
アカウントの利用は有料で、初期費用、月額費用がかかります。
LINEビジネスコネクトを利用する場合は、API型公式アカウントと呼ばれます。

>・ビジネスコネクトアカウント
ビジネスコネクトのためのアカウントです。
公式アカウントではないため、LINEプラットフォーム内での露出が少なくなります。

>・LINE@
店舗や施設、個人などが利用できるアカウントで、友だち登録したユーザーへの一斉配信、ユーザーとの双方向のやり取りも可能です。
有料プラン、無料プランがあります。LINEビジネスコネクトには対応していません。

なるほど。松竹梅、甲乙丙みたいなもので露出率とか機能がちがうよってことですよね。
あと全く違う点は費用です。

・LINE公式アカウント
250万〜
https://gaiax-socialmedialab.jp/post-41135/

・ビジネスコネクトアカウント
「アカウント利用料50万円～（月額）」＋「通数課金」
https://gaiax-socialmedialab.jp/post-45182/

・LINE@
0〜3万円

値段がこれだけ違うと機能はどのくらい違うのかとても疑問に思えます。
３つの機能を比較しているものがなかったですが、「LINE公式アカウント」と「ビジネスコネクトアカウント」を比較しているものがありました。
こちらが　一番わかりやすかったので載せると

<img width="1176" alt="スクリーンショット 2017-05-12 21.23.28.png" src="http://web-tan-cdn.impress.co.jp/files/images/article2016/line_bc_book/line_bc_book_027.png">
>引用 : http://web-tan.forum.impressrd.jp/e/2016/10/24/24129

といった感じです。
LINE@はこの表でいうと

・タイムライン配信
・一斉配信

のみ可能な超安価版といった形になっていると思います。

Messaging APIについてなにも知らない方は「なるほどね」と終わるかもと思いますが、
先日Messaging APIというのがLINE@のオプションとして提供開始されこの差別化がおかしくなってきます。
https://business.line.me/ja/services/bot
Messaging APIを含めた比較表はこのようになります。

<img width="1176" alt="スクリーンショット 2017-05-12 21.23.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/145013/2adffe3b-cfbe-cd52-b83d-f4fdbf17903d.png">

こうなってくると「ビジネスコネクトアカウント」と「LINE@」アカウントの違いがほぼなくなってきます。
そこで、出てくるのが「Official Web App」です。
http://blog.feedmatic.net/entry/2016/10/26/162116

「Official Web App」はLINE@では利用できません。
「Official Web App」は何に特価しているかというと会員などとLINEのアカウントをどれだけシームレスに連携できるかと言う点に特価したサービスだと考えられます。
ソーシャルPLUSがとてもいい例です。
https://socialplus.jp/line/
Messaging APIがあれば「Official Web App」が提供される前に各企業が行っていたzozoタウン方式の会員連携は可能です。
しかし、「Official Web App」の「友達追加API」などは素晴らしく、本当にストレスなく会員連携が可能だと思います。
同じような動きができるかは現在研究中です。

「Official Web App」を含めた比較表はこのようになります。

<img width="1178" alt="スクリーンショット 2017-05-12 21.22.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/145013/9ab29d9b-6cdc-6c61-6a48-38bea27fe124.png">

Messaging APIが提供されたことによってLINE@でできることの可能性が非常に大きくなりました。
各企業様は今後の展開も含めた上でコストと機能を照らし合わせてどのアカウントを利用するのか選定していただければと思います。

個人的にはLINE@でもっとたくさんのことができるようになることを望みます。。。。
大文字と小文字を区別して同一のものとしてカウントする方法

![同一文字列のカウント.png](https://qiita-image-store.s3.amazonaws.com/0/160563/dbd0ffc1-831e-6ed2-2478-fa3a2931b16d.png)


#利用シチュエーション

* 大文字と小文字を別々のものとしてカウントしたい時

##直面した問題
　×　大文字と小文字を別々のもとしてカウントしたいが、COUNT(COUNTIF)関数では同一のものとしてカウントしてしまう

#記述方法
```text:qiita.rb
=SUMPRODUCT((EXACT(比較文字列1,比較文字列2)*1)

<記述例>
=SUMPRODUCT((EXACT(A:A,A1))*1)
```

> **前提条件**
> A列にクエリ情報
> ![区別カウント.png](https://qiita-image-store.s3.amazonaws.com/0/160563/70f3a87e-f84d-1e61-bfa9-caa016448810.png)




---

> **抽出結果**
> ![区別カウント2.png](https://qiita-image-store.s3.amazonaws.com/0/160563/11484448-98b8-74c5-c368-8684d3318399.png)





---

> **解説**

> * EXACT関数でA列のすべてのクエリと指定した一つを比較して、合致しているかしていないかを判断。
> * SUMPRODACT関数で合致している数が何個あるか数える。

> ####個々の関数の説明####
> EXACT関数は二つの文字列を比較し、正しければ「TRUE」間違っていれば「FALSE」を返す

> ||書き方|利用例|
> |:---|:---|:---|
> |書式|EXACT(文字列1,文字列2)|EXACT(A:A,amazon)|
> |引数1|文字列を指定|A:A|
> |引数2|文字列を指定|amazon|

> SUMPRODUCT関数は指定した複数条件の配列の合計(件数)を返す

> ||書き方|利用例|
> |:---|:---|:---|
> |書式|SUMPRODUCT(範囲1,範囲2,...)|SUMPRODUCT((TRUE)*1)|
> |引数1|検証結果を指定|TRUE|
> |引数2|TRUE(=1)を指定|1|
> SUMPRODUCT(引数1*引数2)で両方の条件に一致する件数

#サンプル

* [Googleスプレッドシート](https://goo.gl/bhJTSI)
Crowiの表示がIE11でおかしかったときのメモ

# 結論
IE11にPromiseが実装されていないせい。

#対処
PromiseをPolyfillする。

以下、ちょっと泥臭い方法。

1. **crowi/public/js** 下に[es6-promise](https://www.npmjs.com/package/es6-promise)を放り込む
2. **crowi/lib/views/layout/layout.html**に以下を挿入

```html
<script src="/js/es6-promise.auto.min.js"></script>
```
capistrano-sidekiqを使うのをやめる

[capistrano-sidekiq](https://github.com/seuros/capistrano-sidekiq) を使ったデプロイが不定期に事故るので直した話

## 前提
- [capistrano-sidekiq](https://github.com/seuros/capistrano-sidekiq) は `v0.5.4` を使ってた(最新版の1個前)
- capistranoでデプロイ後にsidekiqがバグる
	- sidekiqのプロセスが古いままで再起動ができておらず、`sidekiq.pid` を見ても立ち上がってるプロセスとズレてておかしい
	- sidekiqが指定されたプロセス以上の数が立ち上がる

## 対応方法
capistrano-sidekiq のタイミングがよくわからんので、やめて自前でコマンド実行

```ruby:config/deploy.rb
# sidekiq
set :sidekiq_pid_path, -> { File.join(shared_path, 'tmp', 'pids', 'sidekiq.pid') }

namespace :sidekiq do
  desc 'sidekiq stop'
  task :stop do
    on roles(:app) do
      execute "kill -USR1 `cat #{fetch :sidekiq_pid_path}`; true"
    end
  end
  before 'deploy:updated',    'sidekiq:stop'

  desc 'sidekiq kill'
  task :kill do
    on roles(:app) do
      execute "kill -TERM `cat #{fetch :sidekiq_pid_path}`; true"
    end
  end
  after  'deploy:finishing',  'sidekiq:kill'

end
```

シンプルにデプロイ前にstoppingし、完了したら完全にkillします
参考: http://qiita.com/pekepek/items/8eb302c997335fbce854

その後、monitがsidekiqを叩き起こすようになってます。

## 却下案

[capistrano-sidekiq](https://github.com/seuros/capistrano-sidekiq) を最新版にしたらこの問題が解決しないかと検討したが、pidのファイル名になぜか0が追加される事象に遭遇。
Githubを覗いたら、 [Change pidfile handling, always add index to pidfile name by w1mvy ](https://github.com/seuros/capistrano-sidekiq/pull/116) でそうするような処理が入ってた。

インフラ的な変更も入るし、そもそもこのgemを上げたら前提のところに書いてある問題が解決されるのかわからなかったため、シェルスクリプトでやることにしました。。。

## 一言

結局、capistranoがsymlinkを入れ替える前にsidekiqが起動してるのかその辺が結局よくわからなかったが、自前でやったら安定しましたよというお話。
Erlangでモナド

# Erlangでモナド

ビヘイビアを使ってmonad型クラスのようなものを提供。monadのインスタンスを作りたい人はreturn/1とbind/2を用意すればよいようにしている。

```erlang:monad.erl
-module(monad).

-export([flatten/2, map/3, sequence/2, mapM/3]).

-type m(_A) :: term().

-callback return(A) -> m(A) when A :: term().
-callback bind(m(A), fun((A) -> m(B))) -> m(B).

-spec flatten(module(), m(m(A))) -> m(A)  when
      A :: term().
flatten(Instance, Mmx) ->
    Instance:bind(Mmx, fun(M) -> M end).

-spec map(module(), fun((A) -> B), m(A)) -> m(B) when
      A :: term(),
      B :: term().
map(Instance, F, M) ->
    Instance:bind(M, fun(X) -> Instance:return(F(X)) end).

-spec sequence(module(), list(m(A))) -> m(list(A)) when
      A :: term().
sequence(Instance, []) ->
    Instance:return([]);
sequence(Instance, [M | Ms]) ->
    Instance:bind(M, fun(Hd) ->
    Mtl = sequence(Instance, Ms),
    Instance:bind(Mtl, fun(Tl) ->
    Instance:return([Hd | Tl])
    end) end).

-spec mapM(module(), fun((A) -> m(B)), list(A)) -> m(list(B)) when
      A :: term(),
      B :: term().
mapM(Instance, F, Xs) ->
    sequence(Instance, lists:map(F, Xs)).
```

## モナドのインスタンス例

### resultモナド

`{ok, _}`または `{error, _}` のような形をしたデータ型を`result`型と呼ぶことにする。
OCamlでいう`('a, exn) result` 型、Scalaでいう `Try[A]` 型。
Erlangではこういう形のデータを想定した処理がたくさんあるらしいので、モナディックに結合したいので↑の`monad`ビヘイビアを使ってモナドにする。


```erlang:result.erl
-module(result).

-behavior(monad).

-export([return/1, bind/2]).
-export_type([result/1]).

-type result(A) :: {ok, A} | {error, term()}.

-spec return(A) -> result(A) when A :: term().
return(X) -> {ok, X}.

-spec bind(result(A), fun((A) -> result(B))) -> result(B) when
      A :: term(),
      B :: term().
bind({error, Reason}, _F) -> {error, Reason};
bind({ok, X}, F) -> F(X).
```

使用例:

Erlangにはまだdo構文相当がないようなので、以下のようにbindでつなげる。

```erlang:sample.erl
main() ->
  result:bind( find_parameter(),    fun(Param) ->
  result:bind( take_user_id(Param), fun(UserId) ->
  result:bind( find_user(UserId),   fun(User) ->
  result:return(User)
  end) end) end).
```

(`find_parameter/0`, `take_user_id/1`, `find_user/1` はそれぞれ失敗するかもしれない架空の関数)
do構文 (Scalaのfor) がわかる人は以下のように心の目で置き換えて読むのがよい。

```erlang:sample.erl
main() ->
  result:do
    Param  <- find_parameter(),
    UserId <- take_user_id(Param),
    User   <- find_user(UserId),
    return (User)
  end.
```
「openal-soft-1.16.0-3.el7.src.rpm」をインストールする際にエラーとなる

「openal-soft-1.16.0-3.el7.src.rpm」をインストールする時に
以下のエラーが発生

`/usr/include/QtCore/qconfig.h:12:31: fatal error: QtCore/qconfig-32.h	: No such file or directory`

どうやら"qconfig-32.h"が見つからないと言われてるらしい。

試しに"/usr/include/QtCore/"配下を確認したところ、確かに見当たらない。
"qconfig-64.h"はあったので、
恐らく、なにかしら32bit版のパッケージがインストールされていないと予想。

そこで、「qt-devel.i686」をインストールしたところ、"qconfig-32.h"が作成された。

無事、インストール完了。
Jupyter Notebookでプレゼンをするとっても便利な方法

# Jupyter Notebookを簡単にプレゼンスライドにする方法
Jupyter Notebookを使ってプログラミングのプレゼンをする方を頻繁に見かけます。
多くの場合、Notebookをそのまま使って、画面を少しずつスクロールダウンながらプレゼンをしているようです。
プログラムを実行しては、ブラウザ画面を少し下に移動して、またプログラムを実行する、という流れです。
私もよくやります。
Jupyter Notebookはプログラムを順次実行して結果を見せながら説明できるため、この流れで話すとわかりやすいのですが、しかしこのやり方、案外不便でプレゼン中にマゴマゴすることが多々あります。
原因は２つあると思います。

1. プログラムの文字が小さい
2. ブラウザを程よい位置に下げるのが難しく、画面端が切れる

実際にやってみるとこの図のようになります。

![１.png](https://qiita-image-store.s3.amazonaws.com/0/55384/84bb39f1-93d8-2027-9d33-9962463795f7.png)



プレゼンしてる側もプレゼンを見ている側も、案外不便です。
これで困っている方に朗報です。
実はJupyter Notebookにはよりベターなプレゼン・ツール**『RISE』**があります。

## RISEとは
RISEはJupyter Notebookの拡張機能です。
フリーで公開されています。
https://github.com/damianavila/RISE

RISEを使うことで、NotebookをWebブラウザ上でプレゼンスライドに変換して見せることができます。
イメージはこんな感じです。

![２.png](https://qiita-image-store.s3.amazonaws.com/0/55384/2f3963c2-99a9-4b59-0c99-d42d33d8c9ee.png)


プログラム等の文字は読みやすいサイズに拡大されます。
ブラウザからはみ出る画像やデータは内部でスクロールできるようになるので、画面端が切れることはありません。


## インストールしてみよう
インストール方法は簡単です。
Jupyer Notebookがインストールされている環境で、以下を実行します。

```
pip install RISE
jupyter-nbextension install rise --py --sys-prefix
jupyter-nbextension enable rise --py --sys-prefix

```

たった３行、所要時間も１０秒程度です。


## やってみよう
インストールしてJupyter Notebookを開くと、右上に以下のボタンが追加されています。

![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/55384/c3b148e6-d17c-2202-40d7-c22002da1bd4.png)


このボタンを押すとNotebookがブラウザ内でスライド化することができます。

画面構成はいたってシンプルです。

![６.png](https://qiita-image-store.s3.amazonaws.com/0/55384/33e45cf3-547b-2234-2714-4abb1134c1b7.png)


画面の移動は「←」「→」でも可能です。


## プレゼンスライドの作り方
RISEではJupyter Notebookのセルのタイプに応じてプレゼンでの表示方法を分類しています。
セルのタイプはメニューの『View』＞『Cell Toolbar』＞『Slideshow』で変更できるようになります。
『Slideshow』を選ぶと、セルの右上で『Slide Type』を選べるようになります。

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/55384/e11cd34c-80f3-3a6c-4dac-0fe048a44327.png)


選べるスライドタイプは以下です。

- 「-」：セルをそのまま表示する
- Slide：セルを１枚のスライドにする
- Sub-slide：前スライドのサブスライドにする
- Fragment：前スライドの下に表示する（画面端は切れる）
- Skip：表示しない
- Notes：ノート扱い

基本的にSlideを使えば良いです。
他のタイプはちょっと凝ったスライド移動をする場合に使えば良いと思いますが、あまり便利ではない気がします（便利な使い方をご存じの方、教えてください）。

Jupyter Notebookではご存知のとおり、Markdown形式で文言を書くことができます。
文字や画像はMarkdownで書けば、パワーポイントのようなスライドを作ることもできます。

![５.png](https://qiita-image-store.s3.amazonaws.com/0/55384/d5729ef3-dc05-58ea-9188-2d60b7bcfb4a.png)


## おすすめポイント
最後にRISEのおすすめポイントです。
RISEではプレゼン中にプログラムを実行することができます。
これでインタラクティブに魅せるプレゼンが可能になります。

実行方法は『SHIFT + ENTER』同時押しです。
Jupyter Notebookでのプログラム実行方法と同じです。

![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/55384/ae2da642-1026-d51a-96ae-8f190e53e4e7.png)

![８.png](https://qiita-image-store.s3.amazonaws.com/0/55384/c45c2f50-2b95-afaf-23e7-c4a2c20c75a2.png)



## 最後に
簡単なインストールと使い方で絶大な効果を得ることができるJupyter Notebookのプレゼンツール**『[RISE](https://github.com/damianavila/RISE)』**を紹介しました。
これでNotebookプレゼン中にスクロールがうまくいかずにマゴマゴする日々ともおさらばです。


【2017/05/28　追記】
先日会社のイベントでJupyter Notebook + RISEでお客様にプレゼンしましたが、滞りなくうまくいきました。
プログラムをパワーポイントに転記したりする必要もなく、プレゼン作成から実施まで、とても便利でした。
【メモ】Chart - ScatterChartDataSetのShapeの書き方と例

グラフ作成ライブラリ「[Charts](https://github.com/danielgindi/Charts)」の点グラフ（散布図）「ScatterChart」の点の形の書き方

#Shapeの種類
```swift:ScatterChartDataSet.swift
@objc(ScatterShape)
    public enum Shape: Int
    {
        case square
        case circle
        case triangle
        case cross
        case x
        case chevronUp
        case chevronDown
    }
```

#書き方の例
```swift:ViewController.swift
import Charts

class ViewController: UIViewController {
    var chartView: ScatterChartView!
    var dataSets: NSMutableArray = []
    var data: ScatterChartData!
    
    override func viewDidLoad() {
        var entries: [BarChartDataEntry] = []
        entries.append(BarChartDataEntry(x: 0, y: 0))
        entries.append(BarChartDataEntry(x: 1, y: 1))
        
        var exampleSet = ScatterChartDataSet(values: entries, label: "entries")
        exampleSet.setScatterShape(ScatterChartDataSet.Shape.circle) //entriesの点を指定(circle)
        exampleSet.setColor(NSUIColor.red) //entriesの点の色を指定(red)
        
        self.dataSets.addObjects(from: [exampleSet])
        
        self.data = ScatterChartData(dataSets: self.dataSets as! [IChartDataSet])
        
        self.chartView.data = self.data
    }
}
```
asciiFlowにショートカットを追加して楽をする

## とりあえず成果物
少しわかりにくいですがマウスによる描画モードの切り替えをショートカットのみで行うようにしています。
![test.gif](https://qiita-image-store.s3.amazonaws.com/0/78983/c140e17e-967b-f0ee-6c2d-7b0918c70357.gif)

# 動機
asciiFlow便利でちょくちょく使うのですがテキスト書いたり整形するたびに左上にマウスを移動させるのが面倒・・・
ショートカットで描画モードを変更出来たら楽だよなぁ・・・
よし実装されていないなら付け足してしまえ！ということでやってみました。

# 環境
OS : Win7
エディタ : Visual Studio Code
(GitHubとソースをいじれる環境があれば何でもOK)

# GitHubのリポジトリ
本家 : https://github.com/lewish/asciiflow2
マルチバイト文字に対応してくれた方 : https://github.com/farss/asciiflow2

自分はfarssさんのリポジトリをForkして作りました。
https://github.com/hachimitu22/asciiflow2
【Concrete5】独自のテーマを作成する上で最低限必要な文言に関して

独自のテーマ、テンプレートを作成した際に、
Conrete5本体の方のメニューが表示されなくなったり、ブロックが追加できなくなったりする時がある。
その原因の一つとしてテンプレートに最低限必要な文言がなくなっている場合があるので、必要な文言を明記する。

#### 超シンプルなテンプレート例

```sample.php
<?php
defined('C5_EXECUTE') or die("Access Denied."); ?>
<!DOCTYPE html>
<html lang="<?php echo Localization::activeLanguage() ?>">
  <head>
    <meta charset="utf-8">
    <!-- Concrete5本体で必要なCSS読み込み -->
    <?php Loader::element('header_required');?>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>さんぷる</title>
    <!-- 独自CSS読み込み（必要に応じて） -->
    <link rel="stylesheet" href="<?php echo $view->getThemePath()?>/css/sample.css">
    <!-- 独自javascript読み込み（必要に応じて） -->
    <script src="<?php echo $view->getThemePath()?>/js/sample.js"></script>
  </head>
  <body>
    <div class="<?php echo $c->getPageWrapperClass()?>">
<?php
// ブロック追加や編集した部分に指定。Areaの引数名は適当で。
$a = new Area('Contents');
$a->display();?>
    </div>
    <!-- 管理用メニューバーの表示に必要 -->
    <?php Loader::element('footer_required'); ?>
  </body>
</html>
```

#### 重要な部分を解説

`defined('C5_EXECUTE') or die("Access Denied."); ?>`
おまじない

`<html lang="<?php echo Localization::activeLanguage() ?>">`
多言語対応する場合は必要。日本語のみなら、`lang="ja"`でもOK

`<?php Loader::element('header_required');?>`
Concrete5本体で使用するcssファイルを読み込んでいるのでないと大幅にレイアウトが崩れる

`<div class="<?php echo $c->getPageWrapperClass()?>">`
これがなくても動くが編集可能なエリアが正しく表示されなくなる。

`<?php Loader::element('footer_required'); ?>`
上部のメニューバー表示に必要。
@flow の有無を eslint でチェックする


プロジェクトで全面的に flowtype を導入している場合、`eslint-plugin-flowtype` の eslint plugin も使ってる場合がほとんどだと思うのだけど、標準だと `@flow` の有無をチェックしてくれない

# ルールで有効化する

- https://github.com/gajus/eslint-plugin-flowtype#eslint-plugin-flowtype-rules-require-valid-file-annotation

の通り、強制するルールがあるので有効化する。

```json
{
  "rules": {
    "flowtype/require-valid-file-annotation": [
      2,
      "always"
    ]
  }
}
```

これで `@flow` がない js ファイルはエラーになるし、明示的に flow でチェックしたくないファイルの場合、 `@noflow` をつければ OK なので有効にしておきたい。

そしてこのルールを追加したところ、かなりのファイル(ほぼ書き忘れてるのは私…) でうっかり `@flow` 書き忘れが発見された… :crying_cat_face: 。`@flow` 追加したらちゃんとバグも見つかったので、flow 大事だなぁ。
closestをjQueryなしで書こうとしたら

今でこそ仮想DOM系ライブラリの普及で活躍の場を狭めつつあるjQueryですが、そういうライブラリを入れるのが大げさに過ぎてしまうような、ちょっとしたものを作るには便利なので、今でも活躍の場はそれなりにあります。

そして、メインとなるDOM操作でも、jQueryは単なるDOMのラッパーというわけではなく、便利なメソッドを用意しています。今回のテーマとなる`.closest`もそんなメソッドの1つです。

## `.closest`メソッド
この`.closest`メソッドは、ふつうの探索系メソッド（jQueryの`.find`やDOMの`getElementsByClassName`など）と違って、**親の方**へと探索を進めていって、（自分自身も含めて）最初にマッチした要素を返す、というものです（[リファレンスの日本語訳](http://js.studio-kingdom.com/jquery/traversing/closest)）。

「JavaScriptの動作を決めるような特殊なクラスや属性を、親にまとめて書く」というシチュエーションなど、ちょくちょく使えるメソッドです。

## jQueryなしで書くには？
こういう挙動をjQueryなしでするにはどうすればいいのか調べていたのですが…なんと最近のブラウザはDOMに直接`Element.closest`を実装していることが判明しました（[MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/closest)）。シグネチャもセレクタを渡すという、jQueryと全く同じもので、iOS 9以上など、最近のブラウザならネイティブに使えるとのことでした。IEなど非対応なブラウザ向けに、Polyfillも用意してありました（MDNのページや[GitHub](https://github.com/jonathantneal/closest)にあります）。

## 「準標準」としてのjQuery
jQueryにしかなかったはずの機能がDOMに実装されたのは、`.closest`だけではありません。昔は`className`を自力でパースするしかなかったクラス処理ですが、jQueryには`hasClass`、`addClass`、`removeClass`、`toggleClass`とクラス制御に便利なメソッドがあります。その後、DOM側で`classList`（[MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/classList)）というものが現れて、`contains`、`add`、`remove`、`toggle`と多くが同じ名前で使えるようになっています。

このように、jQueryはある種、「DOMにあるべき機能の指標」としても機能しています。C++のBoost、RubyのActiveSupportのように、「準標準」とでもいうべきライブラリは、他の言語にも存在しています。
【超簡単】macへMySQLをインストール

##Homebrewのインストール
https://brew.sh/index_ja.html
まず上記リンクからHomebrewをインストールしてください。
Homebrewはmacで各種ツールをインストールするときにも使います。

##MySQLのインストール
ターミナルを開き、以下のように打ち込んでください。

```
$ brew install mysql
```

これでMySQLがインストールされます。

##MySQLのセットアップ
MySQLを起動させます。

```
$ mysql.server start
```

セキュリティ設定を行います。

```
$ mysql_secure_installation
```

色々質問されますが、基本的には'y'(YES)で答えて大丈夫です。
パスワードを聞かれた時は好きなパスワードを打ち込んでください。


最後に下記のように打ち込み、自分で設定したパスワードを入力すれば完了です。

```
$ mysql -uroot -p
```

もうこれでMySQLを使えるようになりました。

MySQL HP(https://dev.mysql.com/downloads/)
からインストールすることも出来るのですが、最初から自分でパスワードを決めることが出来るなど、今回の方法でインストールする方が色々と楽です。
初心者の方には本記事の方法をオススメします。
[DynamoDB]DynamoDBローカルをsystemdで管理する

# DynamoDBローカルをsystemdで管理する

```bash
systemctl start dynamodb
```

こんな感じで DynamoDB を起動できるようにします。

## 環境

* CentOS 7
* DynamoDBローカル  
今回試したのは 2017年05月12日時点の東京リージョン対象です。

## DynamoDBローカルのセットアップ

詳しくはAWSのドキュメント見てください。
http://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.html

```bash
cd /usr/local/src
wget https://s3-ap-northeast-1.amazonaws.com/dynamodb-local-tokyo/dynamodb_local_latest.tar.gz
```

DynamoDBローカルは /usr/local/dynamodb に置きました。

```bash
mkdir /usr/local/dynamodb
tar xzvf dynamodb_local_latest.tar.gz -C /usr/local/dynamodb
```

DynamoDBローカルを動かすにはJavaが必要なのでインストールします。
もちろん本番では利用しない環境なので楽な yum からインストールします。

```bash
yum install java -y
```

一旦動かしてみます。

```bash
cd /usr/local/dynamodb
java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb
```

## DynamoDBローカルのユニットファイル作成

ここが本題です。

```bash
vim /etc/systemd/system/dynamodb.service
```

```dynamodb.service
[Unit]
Description=Manage DynamoDB service
Documentation=http://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/DynamoDBLocal.html
After=network.target

[Service]
Environment="DYNAMODB_HOME=/usr/local/dynamodb"
Environment="DYNAMODB_LISTEN_PORT=8000"
ExecStart=/usr/bin/java -Djava.library.path=${DYNAMODB_HOME}/DynamoDBLocal_lib -jar ${DYNAMODB_HOME}/DynamoDBLocal.jar -dbPath ${DYNAMODB_HOME} -sharedDb -port ${DYNAMODB_LISTEN_PORT}
ExecStop=/bin/kill -QUIT $MAINPID
ExecReload=/bin/kill -HUP $MAINPID
Type=simple

[Install]
WantedBy=multi-user.target
```

DynamoDBローカルの置き場所が違う場合は DYNAMODB_HOME を変更してください。
公開ポートを DYNAMODB_LISTEN_PORT で変更できます。

```bash
systemctl start dynamodb
systemctl stop dynamodb
```
なぜ “or die()” は動くのに “or return” はダメなのか


最近また PHP を一から勉強し直している @koogawa です。

```php
$fp = @fopen($filepath, 'rb')
        or die('ファイルのオープンに失敗しました');
```

と同じノリで

```php
$fp = @fopen($filepath, 'rb')
        or return;
```

と書いたら syntax error になったので理由を調べてみました。

すると、Stackoverflow でまさに同じ質問をしている人がおりました。

* [error handling \- In PHP, why does "or die\(\)" work, but "or return" doesn't? \- Stack Overflow](http://stackoverflow.com/questions/14393173/in-php-why-does-or-die-work-but-or-return-doesnt)

理由はシンプルでした。

> `or return` doesn't work because `return` isn't considered an "expression" by the language parser - simple as that.

つまり、[return](http://php.net/manual/ja/function.return.php) は**「式」ではない**んですね。

このあとに続く考察みたいなのも面白いので、興味がある方はぜひ読んでみることをおすすめします。

> You can't run `$handle = return 0;` but `$handle = fun();` is valid code.

言われてみると確かにそうですね。

なお、「式」と「文」については公式ドキュメント

* PHP: 式 - Manual http://php.net/manual/ja/language.expressions.php
* PHP: 導入 - Manual http://php.net/manual/ja/control-structures.intro.php

に詳しく書いてあります。

今回の疑問をきっかけに、「式」と「文」とは何か？を考え直す良い機会になりました。
何か間違ったことを書いていたらツッコミお願いします :bow:

# 検証環境

* PHP 5.6.30

# リンク

* [PHP: die \- Manual](http://php.net/manual/ja/function.die.php) - 関数の文脈で紹介されている（正確には言語構造）
* [PHP: return \- Manual](http://php.net/manual/ja/function.return.php) - 制御構造の文脈で紹介されている
Vagrantで建てたWEBサーバーへ、別PCから検証用にアクセスさせる為の設定（ブリッジ接続）


### Vagrantファイルの編集

以下IPを 192.168.1.111 にセットする前提で。

```
config.vm.network "public_network", ip: "192.168.1.111" 
```

public_network を指定して、 hostsファイルにドメインとともにIP追記しておきたいので固定IPを指定してあげる。
もちろん他マシンとIP被らないように。



### 設定反映させる
```
vagrant reload
```

### 起動中に下記のようにどこに接続するか聞かれるようになる


```
==> develop: Attempting graceful shutdown of VM...
==> develop: Clearing any previously set forwarded ports...
==> develop: Clearing any previously set network interfaces...
==> develop: Available bridged network interfaces:
1) en0: Wi-Fi (AirPort)
2) en1: Thunderbolt 1
3) en2: Thunderbolt 2
4) p2p0
5) awdl0
6) bridge0
==> develop: When choosing an interface, it is usually the one that is
==> develop: being used to connect to the internet.
    develop: Which interface should the network bridge to? 1
    
# 上記例は1を選択
```

### 起動したら確認
```
vagrant ssh

# 以下vagrant内


[vagrant@develop ~]$ ifconfig
eth0      Link encap:Ethernet  HWaddr 08:00:27:CE:08:3D
          inet addr:10.0.2.15  Bcast:10.0.2.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fece:83d/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:490 errors:0 dropped:0 overruns:0 frame:0
          TX packets:332 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:51628 (50.4 KiB)  TX bytes:43514 (42.4 KiB)

eth1      Link encap:Ethernet  HWaddr 08:00:27:75:74:A0
          inet addr:192.168.1.111  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: 2408:211:af60:4f00:a00:27ff:fe75:74a0/64 Scope:Global
          inet6 addr: fe80::a00:27ff:fe75:74a0/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:5 errors:0 dropped:0 overruns:0 frame:0
          TX packets:18 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:682 (682.0 b)  TX bytes:1536 (1.5 KiB)

```

eth1 の inet addr:192.168.1.111 と指定したIPになっていればOK。これで別PCからも検証できると。。
【Concrete5】入れ子になったユーザーグループを戻す方法

ユーザーグループの順番を変更しようとして他のグループの配下に移動してしまった場合、
ブウラザ上では戻すことができない（バグか？）
・・・ので、それを戻す方法。

## 失敗例
**[管理者]、[テスト１]、[テスト２]から[管理者]、[テスト２]、[テスト１]の順に変更しようとして失敗**
![前.png](https://qiita-image-store.s3.amazonaws.com/0/37929/3566e49f-40b1-7845-521d-32c0418d1126.png)
　　**↓**

![後.png](https://qiita-image-store.s3.amazonaws.com/0/37929/9e1c2626-73a7-62d3-44dd-bb0531fcffb5.png)

## 元に戻す方法
#### 1. DBの**Groups**を修正する。
`SELECT gID, gName, gPath FROM Groups;`

| gID | gName            | gPath              |
|:----|:-----------------|:-------------------|
| 1   | Guest            | /Guest             |
| 2   | Registered Users | /Registered Users  |
| 3   | Administrators   | /Administrators    |
| 7   | テスト１         | /テスト１          |
| 8   | テスト２         | /テスト１/テスト２ |

**gPath**が「/テスト１/テスト２」になっているのでそこを元に戻す
`UPDATE Groups SET gPath = '/テスト２' WHERE gID = 8;`

#### 2. DBの**TreeNodes**を修正する。 
`SELECT treeNodeID, treeNodeParentID, treeNodeDisplayOrder FROM TreeNodes WHERE treeNodeTypeID=1;`
*※treeNodeTypeID=1でユーザーグループの関連レコードのみを取得する*

| treeNodeID | treeNodeParentID | treeNodeDisplayOrder |
|:-----------|:-----------------|:---------------------|
|          1 |                0 |                    0 |
|          2 |                1 |                    0 |
|          3 |                1 |                    1 |
|          4 |                1 |                    2 |
|        136 |                1 |                    3 |
|        137 |              136 |                    0 |

**treeNodeParentID** が変わっていないところがないか確認する。
この場合、他のレコードが**1**なのに対して、1つだけ**136**があるので、
そこを**1**に変える。
`UPDATE TreeNodes SET treeNodeParentID = 1 WHERE treeNodeID=137;`

#### 3. 管理画面からユーザーグループを見て、意図した構成になっていることを確認して完了。 

### お願い
**管理画面上で戻す方法があれば教えてください**
CSSプリプロセッサ利用時のファイル構成＆記載ルールについて

LESSやSCSSなど、CSSプリプロセッサ言語（メタ言語？この辺の呼び名がわかってない...）を使って長くなってきたので、その中で身につけてきた構成＆記載ルールをメモメモ。

※ファイル名は、SCSSで記載していきます～。


# ファイル構成について
ファイルの分割と、その整頓はこんなカンジ。

- style.scss
- base
    - _reset.scss
    - _base.scss
    - _function.scss
    - _form.scss
- theme
    - _color.scss
    - _font.scss
    - _size.scss
    - _animation.scss　※
- template
    - _header.scss
    - _footer.scss
    - _layout.scss　※
    - 他

（※：必要な時にだけ登場するもの）

これに追加で、作成物に応じて「pageフォルダ」や、「partsフォルダ」とかを作成し、中身を追加していく。


# お決まりのファイルは何をするものぞ？

##style.scss 
- 全部import
- TEST用・temporaryにちょこっとなにかしときたいもの
  ex.)ヴァーティカルリズムの背景をつける/どうするか決まってないけど、とりあえず、文章のヘッダーだけなんかわかるようにしたい。

##base（フォルダ）
ベーシックなものを設定していきます～
###_reset.scss
そのまま。俗にいうreset.cssなものを、そのまま拡張子変更。
個人的に、hxに[font-weight:normal;]を追加してる。

###_base.scss
resetとは違うけど、こうしときたいんだよ～、なものを記載。
htmlやbodyの設定、
imgに[max-width]つけたり、aの扱いどうするかとかに使ってる。

###_function.scss
いくつかのCSSプロパティをまとめておきたいものとかを記載。
最近は clearfix についてだけになってきたかも...

###_form.scss
フォームのベーシック設定。（サイズ感とか、ベースのデザインとか。）
デザインのリセットがこっちに入れるか、「reset.scss」にいれるかまだフワフワしてる。

## theme（フォルダ）
###_color.scss
色の変数の設定。

###_font.scss
フォントについての設定。
pxとremで展開できるmixinや、フォントファミリーの設定、アイコンフォントのincludeとかなんかこちらで。
※個人的にはアイコンフォントは、好きに:before :afterどっちにもつけたいから、
ここで、必要なものを設定しなおしたりしてます。

###_size.scss
サイズ感や、breakpointの設定。
ベースサイズやコラム、ヘッダーフッターのサイズを変数に置いときたいときとか、こちらに記載。

###_animation.scss
必要がある時だけ登場するファイル。
animationの設定をここにひとまとめして、各ファイルから呼び出し（って言う？）。


##template（フォルダ）
全体の構成を作るファイルを設置するに利用

##_header.scss
ヘッダーについて。

##_footer.scss
フッターについて。

##_layout.scss
コラムの設定など、ページの全体構成のレイアウト設定を記載。

##その他
ひたすら縦に積む構成ときに、
「_vertical.scss」
などのファイルを登場させて、各パーツのmaginとpaddingだけ設定していったりしてる。


#その他、お決まりじゃないファイル構成
その時々で

- page
- parts

などのフォルダを登場させます。

##page

- layoutと似てるけど、もっと細い設定を書く。
- HTMLファイルなり、なんなり構成上区切ったページのタイトルと、scssファイル名を一致させる。
- ファイル全体を、idなど、そのページのアイデンティフィで囲む。

↓

```ruby:HTML
<main data-page="top">
  ...
</main>
```

```ruby:SCSS
[data-page="top"]{
  ...
}
```

- ページの構成と、ページの中の要素を別々に記載する。

↓

```ruby:SCSS
[data-page="top"]{
  section{
    displayとか、marginとか
  }
  .hoge{
    displayとか、marginとか
  }
}
[data-page="top"]{
  section{
    backgroundとか、font-sizeとか
  }
  .hoge{
    backgroundとか、font-sizeとか
  }
}
```

##parts
いろいろ使いまわすパーツについての設定したものを保存。

- _link.scss
- _list.scss

など、その時必要としたものをば。
このフォルダが登場したら、_form.scss　をこっちのフォルダに入れたりもする。


#以上。
これは、あまり周りに一緒にCSSガリガリする人がいない中で、個人的に作成しながら

- １ファイルに大量に書きたくないよ～
- あれに関することは、アレを開いたらパッと確認したいよ～(=あんまりスクロールしたくないよ～＝１ファイルの記載を少なくしてほしいよ～) 

という思いから作っている構成だったりします。

複数メンバーで開発してたりすると、どんなカンジなのかしら...
そういう環境のほうが、この手のものはいいソリューションがありそうな気がするけど...
サブテーブルに参照されているテーブルをtruncateする方法


Laravelのシーダーファイルの一番最初に

```
DB::table('t_order')->truncate();
```

としたが、消せない。

##エラー内容

```  
[Illuminate\Database\QueryException]                                                                                             
  SQLSTATE[0A000]: Feature not supported: 7 ERROR:  cannot truncate a table referenced in a foreign key constraint                 
  DETAIL:  Table "t_order_sub" references "t_order".                                                                             
  HINT:  Truncate table "t_order_sub" at the same time, or use TRUNCATE ... CASCADE. (SQL: truncate "t_order" restart identity)  
```

他のテーブルで参照されているのでtruncateできません、とのこと。

#解決法

```
DB::table('t_order_sub')->truncate();
DB::table('t_order')->truncate();
```

先にサブの方を消す。

##全体的に使用されていて、サブとか調べてられないとき

```
DB::statement('TRUNCATE m_category_id CASCADE');
```

超強力なやつ。
これで紐づけられているテーブルも道連れで全部消される。
が危ないので、本当に気をつけて。
form_forの利便性について

```rb
= form_for @group do |f|
   .chat-group-form__field--left
     %label.chat-group-form__label{:for => "chat_group_name"} グループ名
   .chat-group-form__field--right
     = f.text_field :name, id:"chat_group_name", class:"chat-group-form__input", placeholder: "グループ名を入力してください"
```

以下略

みたいなコードがあったとする。form_forは@groupに入ってくるparamsが新規ならcreateメソッドに既存のものならedit,updateに持っていってくれる。なので

```rb
  <%= form_tag('/tweets', method: :post) do %>
```

form_tagの時みたいにパスを設定してあげる必要はない。

間違えていたらコメントお願いします。
G Suiteの認証を介してAWSの一時認証クレデンシャルを取得する


## 説明
AWSコンソールへのログインがG SuiteのSAML2.0フェデレーションを介して行えるようになり、コンソールへのログインは
ユーザ管理の手間が減りました。が、個々のユーザがAWS CLIなどでAPIを呼出す時に認証にはまだ固定のキーが必要な状況でした。
これをやめてキー管理からも開放されたいと思います。
ここでは、AWSブログにあったsamlapi_formauthの内容を参考にG Suiteのログインをスクリプトで実行して、SAMLレスポンスを
受け取る用にしました。

## 準備
+ python2.7系が動く環境
+ jsを動かすためのブラウザとしてPhantomJSをインストール
	
	```bash
	$ brew install phantomjs
	```
	
+ その他以下のライブラリをインストール
	+ selenium
	+ requests
	+ lxml
	+ beautifulsoup4
	
	```bash
	$ pip install selenium
	$ pip install requests
	$ pip install lxml
	$ pip install beautifulsoup4
	```
	
	※pipに関しては各自使えるようにしておいてください。
	
+ githubからクローンする
	
	```bash
	$ git clone github:mossaky/gsuite_samlapi_formauth.git
	```
	
+ credentialsの確認
	現状、~/.aws/credentialsの状態が以下の状態であることを前提とします
	
	```ini
	[deafult]
	access_key_id =       # ここは何も設定されていなくてもOK
	secret_access_key = 	# ここは何も設定されていなくてもOK
	
	[some_profile]
	access_key_id = xxxxxx
	secret_access_key = xxxxx
	````
	
## 使い方
```bash
$ python gsuite_samlapi_formauth.py
:
username: xxxxxxxx
password: 
:
:

[0] xxxxxxx/xxxxxxxx

select hogehoge
0

:
```
スクリプトを実行するとユーザ名/パスワードの入力を求められます。こちらは、ログイン情報を入力してください。
その後、ロールの選択を行います。番号を入力してください。
一時認証の取得に成功した場合は、該当のアカウントのS3のバケット一覧が表示されます。

取得した結果は、~/.aws/credentialsのセクション[saml]へ書き出されます。
以降、1時間以内は下記のようにコマンドを実行可能となります。

```bash
$ aws --profile saml s3 ls
```

残念ながら現在のAWSの仕様上一時認証情報の有効期間は、1時間となっています。:cry: 
あと、スクリプトの実行は遅いです…。なんとかなんないかな？
Material Components の Layout Grids を試してみた

公開されて話題の Material Components を試してみました。

取り急ぎレイアウトがどのように制御できるのか調べたかったので [Layout Grids](https://material.io/components/web/catalog/layout-grids/) のコンポーネントに、分かりやすい [Cards](https://material.io/components/web/catalog/cards/) を組み合わせて試しました。

## サンプル
![スクリーンショット 2017-05-12 16.57.24.png](https://qiita-image-store.s3.amazonaws.com/0/42946/a2030ac3-e1b4-5752-aa7f-9dbd2ad46f3b.png)
[Codepenで表示](http://codepen.io/KazuyoshiGoto/pen/YVabpd)

右下が下に詰まってズレてるのは挙動を見るため**わざとです**。<br>
テキスト量が違うことで高さに差があるため上側に余白が出ています。


FlexやGridに慣れてる人なら一目で分かると思いますが、 Cards コンポーネントには`justify-content` の指定がされていません。必ずしもFlexやGridを直接適用する要素ではないので、これは仕方ないですね。幅や詰めは個別に調整が必要です。

## Layout Grids で全体レイアウト

Material Components のグリッドシステムは下記HTMLのように、親要素に `mdc-layout-grid` を定義し、子要素に `mdc-layout-grid__cell` を定義していく形です。

```html
<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__cell"></div>
  <div class="mdc-layout-grid__cell"></div>
  ...
</div>
```

親要素に定義する `mdc-layout-grid` は Media Queries が指定されており、ブラウザ幅に応じて以下のグリッドに分割されます。

* PCサイズ（840px以上)： 12分割
* タブレットサイズ(480px以上)： 8分割
* スマホサイズ(479px以下)： 4分割

[Layout Grids のデモページ](https://material-components-web.appspot.com/layout-grid.html)でブラウザ幅を変えてみると分かりやすいです。

そして子要素側で以下のようにクラス指定のみでレスポンシブ対応ができます。

```html
<div class="
  mdc-layout-grid__cell
  mdc-layout-grid__cell--span-6
  mdc-layout-grid__cell--span-4-tablet
  mdc-layout-grid__cell--span-4-phone
">
```

な、長い…
冒頭のサンプル表示にある4つのCardsすべてに適用しています。

上記の記述で、
- PCの時は6セル結合（50%表示）
- タブレットの時は4セル結合（50%表示）
- スマホの時は4セル結合（100%表示）
という制御ができます。


### 注意
PC用のクラスのみだけでなく `-tablet` と `-phone` のクラスもちゃんと指定していないと、**そのデバイス幅の時にレイアウトが崩れます**。 その辺りイイ感じに自動調整はしてくれず、きちんとクラス設定が必要です。

## 所感

CSS3のグリッドレイアウトを理解している立場から見ると、 Layout Grids コンポーネントは記述も仕組みも冗長に思えて結構ダルいのですが、最適化されていくことを期待します。
venv: Python 仮想環境管理

## venv について
- [venv](https://docs.python.org/ja/3/library/venv.html#module-venv) を使うと pip によるパッケージの導入状態をプロジェクトごとに独立させることができる．
- venv は [virtualenv](https://virtualenv.pypa.io/en/latest/) が Python 3.3 から標準機能として取り込まれたもの．別途ソフトウェアをインストールすることなく使用できるため，最も手軽に仮想環境を管理する方法の一つと言える．
    - 2 系を偶に使うという程度なら 3 系は venv，2 系は virtualenv で管理すると同じように管理できるので良い．

>Since Python 3.3, a subset of it has been integrated into the standard library under the [venv module](https://docs.python.org/3/library/venv.html).

[Virtualenv — virtualenv 16.6.1 documentation](https://virtualenv.pypa.io/en/latest/)

- Python 3.x.x 下に組み込まれた機能なので，Python 自体のバージョンは管理できない．
- venv と同等な py"v"env (≠pyenv) というものがあるが，Puthon 3.5 以降 pyvenv は非推奨となっている．

>注釈 pyvenv スクリプトは Python 3.6 で非推奨となり、代わりに python3 -m venv を使い、仮想環境を動かす Python インタープリタを取り違える可能性を防ぎやすくします。

[venv — 仮想環境の作成](https://docs.python.jp/3/library/venv.html) 

公式ページでは使い方がわかりにくいと感じたのでそこを中心に書く．

## 環境

```
$ python -V
Python 2.7.10

$ python3 -V
Python 3.6.1
```

## 利用手順
### 新しい環境の作成
```
$ cd [project dir]
$ python3 -m venv [newenvname]
```

venv という名前でプロジェクトディレクトリ直下に作成しておく（`$ python3 -m venv venv`）のが良い．ディレクトリ移動 → venv アクティベート → 作業 という流れができたり，IDE によっては 1 つのプロジェクト内でソースコードと一緒に venv も管理できるので．

### Activate
#### Linux，Mac

```
$ source [newenvname]/bin/activate
```

もしくは

```
$ . [newenvname]/bin/activate
```

#### Windows
```
$ .\[newenvname]\Scripts\activate
```


### `python` の実行・バージョン確認

```
([newenvname])$ python -V
Python 3.6.1
```

プロンプトの頭に環境名が表示されている間，`python` コマンドでは作成した環境の python が実行される．

2系と3系の両方がインストールされており，`python3`などと2系なのか3系なのかを明示することで使い分けている場合でも，venv をアクティベートすると `python` コマンドでは作成した環境のものが実行されるようになる．

### パッケージのインストール
```
([newenvname])$ pip install [package name]
```


### 作成した環境にインストールされているパッケージの確認

```
([newenvname])$ pip freeze
[package name1]==x.x.x
[package name2]==x.x.x
・
・
・
```

グローバルにインストールされているものと作成した環境にインストールされているものが一覧表示される．

Linter など，どの環境でも必ず利用するパッケージはグローバルの環境にインストールし，場合によって利用したりしなかったりするパッケージは venv で作成した環境にインストールすると良い．

### Deactivate

```
([newenvname])$ deactivate
```

### 終了確認

```
$ python -V
Python 2.7.10
```
## 参考
- [venv --- 仮想環境の作成](https://docs.python.jp/3/library/venv.html) 
- [Virtualenv — virtualenv 16.6.1 documentation](https://virtualenv.pypa.io/en/latest/)
- [HomebrewのPython2とPython3でvirtualenv環境を作成する手順メモ](https://hnakamur.github.io/blog/2015/07/26/how_to_use_venv_with_homebrew_python2_and_3/)
データ分析の分類で、どこで誤分類が起きているのかを可視化する方法

# データ分析の結果を精度を高めるためにどこで誤分類が起きたのかを特定しよう

というのが今回のテーマです。

そこで、今日は confusion matrix を使って、どこで誤分類が起きたのかを可視化して見ていていきます。




```python: 

from sklearn.tree import DecisionTreeClassifier
from sklearn.metrics import confusion_matrix

clf = DecisionTreeClassifier()

clf.fit(X_train, Y_train)
result = clf.predict(X_test)
cm = confusion_matrix(Y_test, result)

print(cm)


```
iris データセットを使うと下記の図のように可視化されます。

![Screen Shot 2017-05-12 at 17.47.25.png](https://qiita-image-store.s3.amazonaws.com/0/161691/21a418b3-548f-317b-d20d-7acc38650a04.png)
Extracted from sklearn [公式ドキュメント](http://scikit-learn.org/stable/auto_examples/model_selection/plot_confusion_matrix.html#sphx-glr-auto-examples-model-selection-plot-confusion-matrix-py)

少し小さくて、見えにくいかもしれませんが、y軸が True value、つまり、正解のラベリングで、x軸が、Predicted value で、機械学習モデルを使用してラベリングされたものです。 上記の図で見ると、中央行、右のところで誤分類が起きています。

これを認識した上で、データの前処理を見直してみたり、機械学習モデルのパラメータを調整しなおしてみることで、精度が上がるかもしれませんね。
UE4メモ Build.cs でモジュールのディレクトリパスを取得

Build.cs 書いてて、お？と思ったのでメモ。本当に短いメモ

# 確認環境
* Win10 Pro
* UE4.15.2

# モジュールのディレクトリパス取得

今まで Build.cs (ModuleRules と呼ぶ？) でモジュールのディレクトリを取得するのに

```
Path.GetDirectoryName(RulesCompiler.GetModuleFilename(this.GetType().Name));
```

と書いてたんだが、ビルドしてみると deprecated だよ！と出たので調べてみると

```
ModuleDirectory
```

が使えるようになってて、そこにパスが入ってた。 4.15 から？

# ThirdParty 製ライブラリ用 Build.cs ちょい便利変数

.uproject や .sln のあるディレクトリに ```ThirdParty``` ディレクトリを作り、そこに突っ込む前提で、
 Build.cs を

```
using System.IO;

public class UE4Project : ModuleRules
{
    private string ThirdPartyDir
    {
        get { return Path.GetFullPath(Path.Combine(ModuleDirectory, "../../ThirdParty/")); }
    }

    ...
}
```

な感じに変数用意しておくと、 ThirdParty 製のファイルのパスを追加したり、依存ライブラリ設定したりが楽になる。

# 更新履歴
* 2017.05.12 新規作成
Webpackでソースコードを変更していないのにビルド結果に差分が発生する場合の対処


Webpackのビルド結果をGit管理に含めている場合に、自分はソースコードを変更していないのにビルド結果に差分が発生する問題に遭遇しました。

## 謎の`__webpack_require__ `の差分が発生

```
/******/    function __webpack_require__(335) { (-) ビルド前
/******/    function __webpack_require__(363) { (+) ビルド後
```

例えばこんな感じで`__webpack_require__`の数字の部分だけ変わっています。

webpack 基本的な使い方AICS | AICS http://aics-app.sakura.ne.jp/blog/2014/09/03/webpack-%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9/

調べてみると、この数字はwebpack内で読み込んだモジュールに順番でつけられる番号であることがわかりました。

## 開発者間のnode_modulesの差分が原因
プロジェクト配下に配置している`node_modules`の中身が開発者毎に異なっていたのが原因でした。

npm installをすると`package.json`を元に必要なnpmがインストールされますが、
開発時に試しに使いたいnpmを`--saveや--save-dev`をつけずに`npm install`している人が
チーム内にいるとこの問題が発生します(自分がやらかしたので自戒)

## 試しに使うnpmは`-g`で各自のPCにインストールする

なので、開発時に試しに使ってみたいと思ったnpmがあったら
`npm install -g`で自分のPCにインストールしましょう。

そうすればプロジェクトの他の開発者に迷惑はかかりません。
今後も忘れた頃に同じ問題に遭遇しそうなので、メモしておきました。気をつけよう。
マークダウン記法　

# マークダウン記法　チートシート

- markdownでドキュメントを書く機会が増えてきたので良く使う記法をメモ

## 見出し

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
# 見出し：h1
## 見出し：h2
### 見出し：h3
#### 見出し：h4
##### 見出し：h5
###### 見出し：h6
```

<h3><i class="fa fa-sign-out">結果</i></h3>

<h1>見出し：h1</h1>

<h2>見出し：h2</h2>

<h3>見出し：h3</h3>

<h4>見出し：h4</h4>

<h5>見出し：h5</h5>

<h6>見出し：h6</h6>

## 箇条書き

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
- りんご
- ゴリラ
  - ラッパ
- パンダ
```

<h3><i class="fa fa-sign-out">結果</i></h3>

- りんご
- ゴリラ
  - ラッパ
- パンダ

## 番号付きリスト

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
1. りんご
1. ゴリラ
  1. ラッパ
1. パンダ
```

<h3><i class="fa fa-sign-out">結果</i></h3>

1. りんご
1. ゴリラ
  1. ラッパ
1. パンダ

## 強調
### イタリック

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
*イタリックで表示されます*
```

<h3><i class="fa fa-sign-out">結果</i></h3>

*イタリックで表示されます*

### ボールド

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
**ボールドで表示されます**
```

<h3><i class="fa fa-sign-out">結果</i></h3>

**ボールドで表示されます**

## 取り消し線

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
~~このポエムは削除されました~~
```

<h3><i class="fa fa-sign-out">結果</i></h3>

~~このポエムは削除されました~~

## 引用

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
> あかいめだまの　さそり
> ひろげた鷲の　　つばさ
> あをいめだまの　小いぬ、
> ひかりのへびの　とぐろ。
> オリオンは高く　うたひ
> つゆとしもとを　おとす、
>> 各行の末尾に半角スペースを2個入れないと改行されません
```

<h3><i class="fa fa-sign-out">結果</i></h3>

> あかいめだまの　さそり  
> ひろげた鷲の　　つばさ  
> あをいめだまの　小いぬ、  
> ひかりのへびの　とぐろ。  
> オリオンは高く　うたひ  
> つゆとしもとを　おとす、  
>> 各行の末尾に半角スペースを2個入れないと改行されません

## 区切り線

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
---
```

<h3><i class="fa fa-sign-out">結果</i></h3>

---

## コード表記

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
文字列で変数を作りたいときは`string`型で変数を定義
```

<h3><i class="fa fa-sign-out">結果</i></h3>

文字列で変数を作りたいときは`string`型で変数を定義

## コード表記（シンタックスハイライト）

<h3><i class="fa fa-pencil-square">記法</i></h3>

    ```SQL:SELECT文のサンプル
    SELECT
        sample.code AS コード
      , sample.name AS 名前
    FROM
        sampletabele AS sample
    ```

<h3><i class="fa fa-sign-out">結果</i></h3>

```SQL:SELECT文のサンプル
SELECT
    sample.code AS コード
  , sample.name AS 名前
FROM
    sampletabele AS sample
```

## テーブル

<h3><i class="fa fa-pencil-square">記法</i></h3>

```
 コード  | 名前     | 誕生日
:-------:|:---------|------:
   1     | 山田太郎 |    1/1
   2     | 山田花子 |   2/29
   99    | その他   |  12/31
中央寄せ | 左寄せ   | 右寄せ
```

<h3><i class="fa fa-sign-out">結果</i></h3>

 コード  | 名前     | 誕生日
:-------:|:---------|------:
   1     | 山田太郎 |    1/1
   2     | 山田花子 |   2/29
   99    | その他   |  12/31
中央寄せ | 左寄せ   | 右寄せ

## 参考にしたサイト

- [Markdown記法一覧](http://qiita.com/oreo/items/82183bfbaac69971917f)
- [Markdown記法 チートシート](http://qiita.com/Qiita/items/c686397e4a0f4f11683d)
Web サーバを さくらインターネットにしていて、メールを お名前.com にするときの設定のメモ。

Web サーバを さくらインターネット にしていて、メールを お名前.com にするときの設定方法をよく忘れるので、メモします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/2e3fd2ab-95fb-b9ec-a7d2-14c9569c93c9.png)

サーバNaviへをクリックして、サーバNaviへログインします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/cce11303-8816-8b7d-34fe-96265ed1a00a.png)

会員ID, パスワードを入力し、ログインします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/42ab66d0-4bbf-0540-51e6-2c08b195e948.png)

ご利用サービス確認をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/97c66e5c-24b8-712d-321a-648aca135314.png)

オプションの追加するを押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/8266bb60-3a63-8a39-6036-253db034131e.png)

追加ドメインにチェックを付けて、次へを押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/4e803c6f-4fdc-f81b-66b8-b7844b89d8f2.png)

既にお名前.com でにチェックをつけて、次へを押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/69bfdc59-de20-112a-56da-a6702da52b68.png)

追加したいドメインをチェックし、次へを押す。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/33043/e1018215-4f8e-e362-5a02-050df315c556.png)

お申し込みを押して、申し込む。

続きは、１時間後。
embulk unpivot filterプラグイン作りました。

データ転送ツールの[Embulk](https://github.com/embulk/embulk)は大量データの投入に威力を発揮しますが、filter pluginを組み合わせることによってかなり複雑な処理も実現できるため、yamlで書けるETLツールとしても優秀です。

今回RDBMSで正規化されたテーブルにデータを投入する必要ができたので、unpivot処理を行うpluginを書きましたので公開しておきます。

[github: embulk-filter-unpivot](https://github.com/ietty/embulk-filter-unpivot)

## インストール

```
embulk gem install embulk-filter-unpivot
```

でインストールできます。

## どんなプラグインか

一言で言うと「横持ち」のテーブル構造から「縦持ち」のテーブルに変換するフィルタです。

例えば、不動産物件のCSVデータがこのようにあるとします。

* (A)変換前のデータ(横持ちデータ)

|物件ID|家賃|物件情報入力日|ペット可|駐車場付き|バス・トイレ別|エアコン|
|---|---|---|---|---|---|---|
|1|8.5|2017-05-01|0|0|1|1|
|2|5.5|2017-05-01|0|0|0|0|
|3|10.0|2017-05-02|1|0|1|1|
|4|15.5|2017-05-02|0|1|1|1|

物件の属性(バス・トイレ別やエアコンの有無)が0/1で表現されています。ただ物件の属性というのは数百種類以上になることもあり、かつ「駐車場付き」などは殆どが0のカラムとなるので、データ構造としては無駄の多いテーブルとなります(こういうデータをスパースデータなどと呼びます)。
そこでRDBMSではこの部分を別テーブルに移して以下のように表現することがよく行われます。

* (B)縦持ちデータ

|物件ID|設備名|
|---|---|
|1|バス・トイレ別|
|1|エアコン|
|3|ペット可|
|3|バス・トイレ別|
|3|エアコン|
|4|駐車場付き|
|4|バス・トイレ別|
|4|エアコン|

物件IDと存在する(1が立っている)カラムだけのレコードを作ることで、レコード数は多いもののカラム数は2つだけのテーブルにできます。存在しない(値が0の)カラムのレコードは作りませんので、スパースデータの場合、かなり全体のサイズが圧縮可能です。
さらに、設備名にIDをつけて、

* (C)設備コード表

|設備ID|設備|
|---|---|
|1|ペット可|
|2|駐車場付き|
|3|バス・トイレ別|
|4|エアコン|

文字列をこのコードに置き換えると以下のようになります。

* (D)縦持ちデータ(コード化後)

|物件ID|設備ID|
|---|---|
|1|3|
|1|4|
|3|1|
|3|3|
|3|4|
|4|2|
|4|3|
|4|4|

データサイズはかなり小さくなりました。

横持ちデータを縦持ちデータに変換する処理をunpivot、その逆をpivot処理と呼びます。Excelのピボットテーブルを思い出していただくと良いかと思います。

今回のプラグインはこのunpivotを行います。

## 書き方

上の例のデータ(A)から(D)に変換するfilterの例です。

```
filters:
  - type: column
    add_columns:
      - {name: 設備ID, type: long, default: 0}
  - type: unpivot
    outer_key: 物件ID
    inner_key: 設備ID
    columns:
      - {name: 'ペット可', id: 1}
      - {name: '駐車場付き', id: 2}
      - {name: 'バス・トイレ別', id: 3}
      - {name: 'エアコン', id: 4}
```

unpivotプラグイン自体はカラムを定義したり変換したりする機能を持たないので、まず必要なカラムをcolumnプラグインで定義しておきます。最終的に必要なカラムは「物件ID」と「設備ID」ですが、データ(A)に設備IDはないので、add_columnsで追加します。

その後、`type: unpivot`でプラグインの利用を宣言し、outer_keyにレコードのID(ここでは物件ID）を、inner_keyに「設備ID」を指定します。

さらに、columnsで(C)設備コード表に当たるkey/valueを定義します。idは今回int型ですが、stringで定義することも可能です。コード表を持たせず(B)のようなデータを作りたい場合は`- {name: 'ペット可', id: `ペット可`}と書けばOKです。

yaml内にin: とout: を定義してembulkを実行すると(D)のデータが出来上がります。

### カラムを追加する場合

全レコードに同じカラムを追加したい場合は「additional」というキーが利用できます。

```
filters:
  - type: column
    add_columns:
      - {name: 設備ID, type: long, default: 0}
      - {name: created_at, type: timestamp, src: '物件情報入力日'}
      - {name: updated_at, type: timestamp, src: '物件情報更新日'}
  - type: unpivot
    outer_key: 物件ID
    inner_key: 設備ID
    additional: [created_at, updated_at]
    columns:
      - {name: 'ペット可', id: 1}
      - {name: '駐車場付き', id: 2}
      - {name: 'バス・トイレ別', id: 3}
      - {name: 'エアコン', id

```

additionalには各レコードの後ろに付与するカラム名を定義します。配列で複数もつことも可能です。上記の例だと、created_atとupdate_atというカラムが、物件情報の入力日と更新日が入った状態で全レコードに追加されます。なお、outer_key/inner_key/additionalで指定したカラム以外は全て削除されます。

なお、unpibvot後のレコードを生成するかどうか(フラグが立っているとみなすかどうか)は、「0または空文字('')以外」という条件式にしていますので、変換前のデータが厳密に「0/1」でなくとも構いません。
ベイエリアで働くエンジニアがやりやすいと感じる会社の特徴５つ

私は昨年７月からサンフランシスコにある[Asana](https://asana.com/)という会社でエンジニアをしています。アメリカの大学でComputer Scienceを専攻し、昨年卒業しました。

[エンジニアを指導する立場の人こそ読んでほしい、新卒エンジニアが1年間で上司に感じた５つのこと](http://qiita.com/H_Crane/items/22ea96300dda82ec5b02)の著者と私は新卒エンジニアで１年経ったところという境遇が似ている一方で、私は上述の記事に書かれているような不満を一度たりとも感じたことがありません。

この記事では、H_Craneさんの５つの上司に対する不満点と対比して、私がこの１年間で感じたAsanaの良い点を５つ列挙することで、どういった環境下だと新卒エンジニアはやりやすいと感じるのかの一例をご紹介します。

#~~1、「本当にそれググった？」って聞き返さないで欲しい~~
#1、部下がイラッとしない指導の仕方を上司が心得ている
私の憶測ですが、「本当にそれググった？」と聞かれてイラッとしてしまう原因は、その指導の内容自体にあるわけではなく、その上司の言い方にあるのではないでしょうか。私自身は「本当にそれググった？」と言われた事はありませんが、仮に僕の上司が同じ事を伝えようとしたならば、

* その質問はググれば答えが出てきそうだから一緒に調べてみようか。なんて調べたの？
* なるほど。確かにそれだと出てこないね。他に何かキーワード思いつく？
* （彼の誘導の末私が正解を出せなかったら）○○で調べてみたらどうだろう
* 出たね！
* 今後同じような問題があった時に、どうすれば僕の助け無しで自分で解決できるだろう？
* そうか、確かに△△の基礎知識がないとキーワードを思いつくのもきついね。その知識をつけるためにはどうすれば良いだろう？
* ・・・

といった流れになるだろうと思います。
決して部下を非難せず、あくまで問題を根本から解決することに集中し、互いに納得が行くまで問いかけを続ける彼の姿勢からは学ぶべき事が大いにあると感じています。

#~~2、やたら「同じミスはするな」って言わないで欲しい~~
#2、似たミスが続いたら、上司が一緒にその原因を考えてくれる

私の上司は毎日13時半からの1時間を、部下とのペアリングの時間として予定を空けており、日頃私たちのコードを読んでいて気になった点などがあればそれを取り上げて、どうすれば改善できるかのフィードバックをくれます。

このフィードバックの時間はけして一方的な知識の伝達ではなく、むしろディベートを彷彿とさせる様相で、なぜミスが起きてしまったのか、どうすれば防げるのか、代わりにどのようなアプローチがとれるのか、各アプローチにどのようなトレードオフがあるのか等をじっくり話し合ってくれます。入社して二日目の私に「自分の言う事に反論してくれた方が圧倒的にやりやすい」と言ったりと、安心して議論に集中できる雰囲気を彼が整えているのもポイントでしょう。

こうして考え抜いて辿り着いたノウハウは忘れにくく、私個人の、そしてチーム全体のコードクオリティの向上に大いに役立っています。

#~~3、意見やツールの押し付けをしないで欲しい~~
#3、アドバイスは豊富にくれるが、最終的な決断は自分で下す事を求められる

入社して数週間経った頃、とあるプロジェクトで考えられるアプローチが二つあり、甲乙つけ難かったので上司に助言を求めたら「僕は君にアドバイスはできるけど、君の代わりに判断を下す事はできない」と言われました。Asanaでは極端に早い段階から自立した人材になる事が求められます。

自己責任を重んじる社風が現れているのか、Asanaでは上司や同僚のチェック無しでブランチをマージし、後からコードレビューをしてもらうPost Commit Reviewという手法で開発を行っています。コードレビューはマージの許可をもらうプロセスでは無く、あくまでアドバイスを貰う機会に過ぎないという事でしょうか。事前のチェックが入らない分、自分のコードに対する責任感も増します。

ツールに関しても同様で、会社が推奨する環境はありますが、それ以外の環境で開発をしても特に何も言われません。当然自分の好きなツールに不具合が生じた場合は、それによる遅れなどに対する責任を負う事を要求されます。

自分で決断しその責任を負うのは最初は大変なストレスでしたが、それが自然にできるようになった今では、仕事に満足して自分に自信を持って働ける事に繋がっています。

#~~4、もっと褒めて！~~
#4、めっちゃ褒めてくれる

部下を褒めない指導者の方や、互いを褒めあうカルチャーを構築できていない会社があるのだとしたら、本当に勿体ない事だと思います。[Harvard Business Reviewの記事](https://hbr.org/2013/03/the-ideal-praise-to-criticism.html)によれば、最もパフォーマンスが高いチーム内ではポジティブなフィードバックとネガティブなフィードバックの比率は5.6:1であるという研究結果が出ています。
言い換えるならば、9褒めて1𠮟れなどと昔から言いますが、最近の研究結果では5.6褒めて1叱るべきだという事です。これを踏まえて、Asanaでは半年に一回の勤務評定なども含めて、社員を大いに褒めるカルチャーが徹底されています。

また、Asanaには”Traveling Narwhal”と呼ばれる変なぬいぐるみが数体おり、これを受け取った社員は２週間後に、自分が最もお世話になった相手にこれを渡すというルールがあります。なんだかこっぱずかしいしいなあと最初は思っていたのですが、貰ってみると大変嬉しく、モチベーションもあがります。また、日々お世話になっている人に改めて感謝の気持ちを伝えるのも気分が良いものです。

![15608452_10211766643351290_933066643_o.jpg](https://qiita-image-store.s3.amazonaws.com/0/181147/2acb3d8d-14e2-2307-64ed-38598defde44.jpeg)
変なぬいぐるみ

#~~5、「わからないことはすぐ聞いて」という人ほど聞くと怒る~~
#5、忙しい人は忙しいって言ってくれる

一ヶ月程前に全く新しい部分のコードを触る機会があり、その導入としてマネージャークラスの人に助けを求めた事がありました。20分程かけてざっと説明をしてくれた後、「何か質問があればもちろんしてもらって構わないけど、あんまり聞かれすぎると邪魔かもしれない」と面と向かって言われました。文字に起こすとなんだか酷い事を言われているようですが、あまりにはっきりと言ってくれたからか、私は全く気分を害しませんでした。その後他のエンジニアの方が質問に応じてくれ、プロジェクトに支障は出ませんでした。

#あとがき
いかがでしょうか。私の今の職場では

1、部下がイラッとしない指導の仕方を上司が心得ている
2、似たミスが続いたら、上司が一緒にその原因を考えてくれる
3、アドバイスは豊富にくれるが、最終的な決断は自分で下す事を求められる
4、めっちゃ褒めてくれる
5、忙しい人は忙しいって言ってくれる

ので日々仕事がとてもやりやすいと感じています。少しでもエンジニアを指導する立場の方々の参考になれたならばら幸いです！
回帰と分類の違い


# 回帰と分類

## 回帰 (Regression)

回帰とは、株価分析のように、連続するデータの予測を行うときなどに使う。
主に数値を扱うとき。
例えば、そのデータの特徴量の傾向をみて(座標上に線を書いて)、具体的な数字を出す（線上から割り出す）、予測するのが回帰である。


## 分類 (Classify)

分類は、回帰とは違い具体的な数字を出すのではなく、与えられたクラスに分ける（ラベリングする）ことを目的としている。
例えば、花弁の数をみて、少ないとパンジー、多いとたんぽぽのように、あらかじめ与えられたクラス（ここでは、パンジーとたんぽぽ）に分けることを分類という。


## 比較

考え方的には、回帰は時系列、時の経過を考慮するものが多いのに対して（必ずしもそれだけでない）、分類は、ある時点を切り抜いた中で考えたり、そもそも、時の経過を考慮しないようなイメージがあります。

簡単に言うと、

回帰 → 予測
分類 → ラベリング

という感じかなと。
BeautifulSoupでいらないHTMLタグを取り除く

#BeautifulSoupを初めて使った

業務で何故かスクレイピングすることになったので急遽突貫で使ってみました。

```sc.py
import urllib.request
import bs4

url = 'http://www.XXXXXX.jp'

html = urllib.request.urlopen(url)
soup = bs4.BeautifulSoup(html, 'html.parser')

title = soup.select('.lxl-inCateList ul li a dl dt')
price = soup.find_all("dd", class_="l-price")



for i in title:
    a = (i.string)
    print (a)
for i in price:
    b = (i.string)
    print (b)
```

見栄えはビューティフルじゃないソースですが、

```
a = (i.string)
```

とすることで不要なHTMLタグは削除できました。

```
soup.find_all("dd", class_="l-price")
```

クラスなどを参照しに行けるのはめちゃくちゃ便利ですね。もっと早く知っていれば良かった・・・。
急な用件で「これとこれをサイトからまとめて資料にしといて」とかいう作業が一気に楽になりますね。