OmniAICreator/Qiita-1.07M huggingface dataset:
flowtypeによるredux-thunkの型付け

久しぶりにredux-thunkを使ってみたらflowの型定義が以前記事を書いたときと大きく変わっていました。

以前の記事。

flowtypeでredux-thunkの型定義を使う
http://qiita.com/akameco/items/5a0b427c1c5ef2967bac

flow-typedでインストールした型定義に後から手を入れるのちょっとやめたほうがいいかなという気持ちになりましたね。


今回は、`types.js`(もちろんファイル名は任意)以下に定義します。


```js

// @flow
import type { Store as ReduxStore, Dispatch as ReduxDispatch } from 'redux'
import type { Action as _Action } from './action'
import type { State as _State } from './state'

export type State = _State
export type Action = _Action

type GetState = () => State

export type ThunkAction = (
  dispatch: Dispatch,
  getState: GetState,
) => void | Promise<void>
// ) => Action | Promise<Action>

type ThunkDispatch<A> = ThunkAction => A

export type Dispatch = ReduxDispatch<Action> & ThunkDispatch<Action>
export type Store = ReduxStore<State, Action>
```

本来ならdispatchはA => Aですけど、thunkでこれ許可するとカオスになるので、thunkの返り値はvoidで縛ってます。
しかし現状非同期dispatchなのか、同期dispatchなのか型でわからないのがちょっと嫌ですね。

しかしまあ、これで、以前のように定義されてないActionをDispatchしたら型エラーが起きます。(スクリーンショットはAtom-IDE)

![スクリーンショット 2017-09-17 19.21.01.png](https://qiita-image-store.s3.amazonaws.com/0/15319/99ec9871-324d-011f-9514-dc0ae1b5a92b.png)

もっとうまく型付けできるなどの情報があればコメント欄もしくはtwitterまでよろしくお願いします。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">一周回ってredux-thunkに帰ってきた <a href="https://t.co/DbvOSbjatS">pic.twitter.com/DbvOSbjatS</a></p>&mdash; 無職.js (@akameco) <a href="https://twitter.com/akameco/status/909102880220524544">September 16, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
nodeのデバッグ実行を有効にしてforeverで稼働させる

nodejsを開発する際、デバッグ実行するためにはnodeをデバッグモードで実行する必要がありますが、foreverでnodeが稼働している環境での設定をしてみました。


なお、Visual Studio Codeでnodejsをデバッグする方法はこちら
[Visual Studio Codeでリモートサーバー上のNodejsをデバッグする](http://qiita.com/Manjiii/items/2cdaab46e24bdaabde6f)
になります。
ChromeでもChrome Debugging Protocolを利用してデバッグ可能です。

#環境
MacOS 10.12.6 (Sierra)
Nodejs:7.10.1
npm:4.2.0

#下準備
- デバックしたいNodejsがforeverで稼働していること。
- リモートサーバー等ローカル以外で稼働している場合、対象サーバーの下記で設定するデバッグ用のポートが開放されていること。


#nodejsのデバッグ設定

nodejs単体でのデバッグ実行は下記のようなコマンドになります。

```
node --inspect[=[host:]port]
```
[=[host:]port]を指定しない場合、デフォルトでは127.0.0.1:9229に設定されます。

ローカルだけでなく、別サーバーで稼働中のnodeをデバッグしたい場合は
[=[host:]port]の部分に192.168.33.10:9229のように接続元のIPとポートを設定する必要があります。
また、特にIPを制限しない場合の設定は下記になります。
（デバッグモードにしないと思いますが、本番稼働中のサーバーの際は気をつけて下さい）

```
node --inspect=0.0.0.0:9229
```

起動すると下記のような起動時にログが流れます。

```
Debugger listening on port 9229.
Warning: This is an experimental feature and could change at any time.
To start debugging, open the following URL in Chrome:
    chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=0.0.0.0:9229/bd58f05d-b341-4d0f-8a31-03640a747d62
```
のようなログが出ればデバック準備可能です。
※起動ログに実験的な機能と記載されています。将来仕様が変わる可能性があります。
また、記載されているURLを利用してchromeでもデバックできます。（IPの部分は稼働サーバーのアドレスに変更必要です）



#foreverでnodejsのデバッグ設定
上記設定をfoeverの起動時に指定します。
通常foreverで起動する際には

```
forever start app.js
```
のようにfoeverのアクションとエントリーポイントのjsファイルのみの指定となります。

これをforeverのオプション-cを利用してnodeをオプション付きで指定します。

```
forever -c 'node --inspect=0.0.0.0:9229' app.js
```
この設定でnodeがinspectオプション付きで実行されます。
同様にログファイルの指定等も利用できるようになります。
下記はforeverのファイル監視オプションと同時にnodeのログファイル指定、デバッグモードの設定をつけた例です。

```
forever -w -l /var/log/node/forever.log -c 'node --inspect=0.0.0.0:9229' app.js
```

package.jsonのstart項目で指定する場合は下記のようになります。
※下記はforeverをグローバルインストールしていないのでmoduleまでのパスを追記しています。

```
{
  "name": "manjii_app",
  "scripts": {
    "start": "NODE_ENV=development node_modules/forever/bin/forever -w  -l /var/log/node/forever.log -c 'node --inspect=0.0.0.0:9229' server.js"
  },
  "dependencies": {
    "express": "4.13.3",
  }
}
```


なお、上記を利用しているサンプルは下記においています。
https://github.com/manjiii/Vagrant-samples/tree/master/Skeleton-nginx-nodejs-mongodb

#参考サイト
nodejs公式
[Node.js v8.5.0 Documentation](https://nodejs.org/api/cli.html#cli_inspect_host_port)
※8.5.0となっていますが--inspectオプショはv6.3.0から使えるようです。
githubのforever公式
[foreverjs/forever](https://github.com/foreverjs/forever)
AdminLTEサイドバーのツリー構造について


 <ul class="sidebar-menu" data-widget="tree">
  <li>
      <i></i>検索
  </li>
  <li class="treeview">
  　　　　　　　　<i></i>動物園
　　　　　　　     <ul class="treeview-menu">
            <li class="treeview">
             <li>
                 <i></i>パンダ
             </li>
　　　　　　　　　　　　　　　　　　　　   <li>
                 <i></i>コアラ
　　　　　　　　　　　　　　　　　　　　　　　　     <ul class="treeview-menu" >
                  <li> 
　　　　　　　　　　　　　　　　　　　　　　　　　　 　      <i></i> 一郎
                  </li>
                  <li> 
　　　　　　　　　　　　　　　　　　　　　　　　　　       　<i></i> 二郎
                  </li>
                 </ul> 
             </li>
            </li>
        </ul>
　　　　</li>
 </ul>

eachで回しているものについても
　　　　　　　　<% @animals.each do |animal| %>
       <li>
          <%= link_to "#" do %>
       　　　　　　　　　<i class="fa fa-user fa-white"></i><%= "#{animal.kind}" %>
          <% end %>  
             <ul class="treeview-menu">　　　←　ここから割り込み！！
               <% unless @animaru.nil? %>
                 <% @animal.each do |animal| %>
                   <li>   
                    <%= link_to "#" do %>
                    <i class="fa fa-user fa-white"></i><%={animal.name}"%>
みたいな感じでやればeachからeachが可能となる
[Survey] Kaggle - Quora 12位解法まとめ

Kaggle - Quora Question Pairs[^1]の12位解法[^2]の調査記事です．

Author: CPMP
Title: Solution #12 overview
Kaggle Discussion: https://www.kaggle.com/c/quora-question-pairs/discussion/34342

## 特徴量

### グラフ構造

- 質問をノード,質問1と2を辺としたグラフを構築[^3]

#### ノードからの特徴量

- ノードの次数(Jared's frequency)
- 連結成分の数
- 双方向連結成分の数．???
- 隣接成分の平均

#### エッジからの特徴量

- グラフの辺の特徴量
- 共通の隣人の数
- 共通の近隣の数

#### 生成パターン

- 質問が登場した順に並び替えたときの質問1と2の差の絶対値

#### 推移律

- (q1とq2は重複)かつ(q2とq3は重複)ならば(q1とq3は重複)
- (q1とq2は重複)かつ(q2とq3は重複してない)ならば(q1とq3は重複してない)

### NLP

#### 分散表現

- カーネル上の特徴量(by Anokas[^4], Abhishek[^5], ChenglongCheng[^6]など)
- 生の質問, テキストクリーニングした質問, ステミングした質問, 見出し語での質問
- 分散表現(Word2Vec, GloVe, fastText, dbow2vec, lsi)
- 質問ベクトルの差の10次元PCA

#### NLP関連の特徴量

- 質問1と2の長さをl1,l2として，min(l1,l2), max(l1,l2)

### Stacking

- layer1で100のモデル(XGBoost, LightGBM, NN, gblinear, H20, sklearn, extra tree, logistic regression)
- 単一モデルは600以上の特徴量でのXGBoostでLB=0.131
- layer3はLogistic Regression

## References

[^1]: Kaggle, [Quora Question Pairs](https://www.kaggle.com/c/quora-question-pairs), 2017.
[^2]: CPMP, [Solution #12 overview](https://www.kaggle.com/c/quora-question-pairs/discussion/34342), 2017.
[^3]: airxiechao, [What are the magic features of winners?](https://www.kaggle.com/c/quora-question-pairs/discussion/34283), 2017.
[^4]: anocak
[^5]: radder, [Abhishek's features](https://www.kaggle.com/c/quora-question-pairs/discussion/31284)
[^6]: ChenglongCHen, [Kaggle_CrowdFlower](https://github.com/ChenglongChen/Kaggle_CrowdFlower)
Slackで動くrubotyをherokuにデプロイ

#背景
herokuにslackで動くrubotyをデプロイしたいけどherokuのこともrubyのこともrubotyのこともあまりよくわかっていない．
簡単にdeployできるtemplateが有るけどbot userには対応してなさそう．
というわけでどうしたのか健忘録としてまとめたのが以下です．

##rubotyとは
以下を見ると良いです
[Ruboty って何？どうやって動かすの？ Hubot と何が違うの？どっちを使えばいいの？ #ruboty #chatops](http://qiita.com/tbpgr/items/39d93a0a33ec99e37da1)

##デプロイ
そもそもrubotyの製作者である@r7kamuraさんがherokuに対するSlack botのデプロイテンプレートを作成しているので考えることは無い
https://github.com/r7kamura/ruboty-template

と思ったんですが，このテンプレートは[ruboty-slack](https://github.com/r7kamura/ruboty-slack)を利用しているため，bot用の通常ユーザーを作成する必要があります．（私の理解が正しければ）
Slackにはbot userというものがあるので，こちらを使いたいという気持ちがありました．
https://api.slack.com/bot-users

そしてbot userに対応しているruboty-pluginが[ruboty-slack_rtm](https://github.com/rosylilly/ruboty-slack_rtm)です．
なので，テンプレートがruboty-slackを呼んでいる部分をruboty-slack_rtmに置き換える必要があります．

#やっておくこと
- rubyが動く環境作成
- herokuのアカウント登録
- slackのbot user作成
- slackのbot user用トークン取得

#やったこと
1. https://github.com/r7kamura/ruboty-template をフォーク
2. Gemfileの `gem "ruboty-slack"`を`gem "ruboty-slack_rtm"`に書き換え
3. app.jsonの中で`ruboty_slack`が要求する`SLACK_PASSWORD` `SLACK_ROOM` `SLACK_TEAM` `SLACK_USERNAME`を削除し，`ruboty-slack_rtm`が要求する`SLACK_TOKEN`を追加
4. bundle updateを行い，Gemfile.lockを更新
5. 更新内容をgithubにpush
6. github上から`Deploy to Heroku`ボタンを押す
7. あとは普通にテンプレートを利用した時と同じ

#感想
わかってれば2秒で終わるけどわかってないと面倒．
Splunkへのログの取り込みと分析

　Splunkへのログの取り込みと分析の例として、我が家の無線LANルータのログを使ってタダ乗りされていないかチェックしてみます。

#１．ログ取り込み

###①ログ取り込み
Splunkのトップ画面から、「Add Data」、「Upload」と進み、取り込むログを指定します。

###②インデックスの作成
　「Create a new index」で新規でインデックスを作成します。名前は「ap_idx」とします。

#２.ログのサーチ

　インデックスを指定して取り込んだログをまず全て表示させてみます。

```shell-session:
index=ap_idx
```

![スクリーンショット 2017-09-17 14.01.55.png](https://qiita-image-store.s3.amazonaws.com/0/201618/0978c1a9-b6cf-414c-0a23-9ac3957b1415.png)

　無線LANルータへの認証が成功すると「associated」というキーワードが残るようなので、以下のようにサーチ文にキーワードを入れます。

```shell-session:
index=ap_idx associated
```

「associated」か含まれている行のみが表示されるようになりました。この辺りがgrepっぽいですね。
 次に、認証に成功しているMACアドレスを抽出してみましょう。ログを見ると、「STA("MACアドレス")」というフォーマットになっているので、rexコマンドを使って以下のサーチ文を書きます。
（サーチ結果を別のコマンドに渡すときはパイプ"|"を使います。Linuxとかと同じですね。）

```shell-session:
index=ap_idx associated
|rex field=_raw "STA\((?<MAC>.*)\)"
```

![スクリーンショット 2017-09-17 18.30.38.png](https://qiita-image-store.s3.amazonaws.com/0/201618/9a09677b-42a2-b60e-d4a2-1c8ce3a37f2b.png)

　画像に変化がありませんが、抽出、つまりフィールドとして認識しています。
　ただ、このままでは一覧性がなく見にくいので、リスト形式にします。tableコマンドを使います。

```shell-session:
index=ap_idx associated
|rex field=_raw "STA\((?<MAC>.*)\)"
|table MAC
```

![スクリーンショット 2017-09-17 18.53.31.png](https://qiita-image-store.s3.amazonaws.com/0/201618/4c1211b2-dbc8-0eb3-bdbb-eaac7a83774f.png)

　重複しているMACアドレスも表示されていますので、重複を削除します。dedupコマンドを使います。

```shell-session:
index=ap_idx associated
|rex field=_raw "STA\((?<MAC>.*)\)"
|table MAC
|dedup MAC
```

![スクリーンショット 2017-09-17 18.43.00.png](https://qiita-image-store.s3.amazonaws.com/0/201618/264d315e-51fe-8da8-5793-2e601a597c6d.png)

　この中に知らないMACアドレスがあればタダ乗りされていることになりますが、すべて把握しているものでしたので一安心です。
メソッドをラムダ式で簡略化しよう(メモ)

#メソッドとラムダ
デリゲートだけでなく、メソッドもラムダ式で書くことが出来る。(C#6.0より)
但し、ラムダ演算子の右側が式の場合に限る。文は不可。
以下に例を示す。

```csharp:mlambda.cs
using System;

class Program
{
    public static int Add(int num1, int num2) => num1 + num2;
}
```
勿論、エントリポイント(Main)もラムダ式で記述することが出来る。
先ほどの続きから。

```csharp:mlamda.cs
    public static void Main(string[] args) => Console.WriteLine(Add(10, 20));
```

綺麗に簡略化できるけど、あまり使いすぎるのも良くない。

# 追記:プロパティ、インデクサとラムダ
プロパティ、インデクサもラムダ式で簡略化できる。
但し、getterのみとなる。
プロパティの例を示す。

```csharp:plamda.cs
public int Num => 10;
```

インデクサも同じような感じに書ける。
やっぱり需要としてはメソッドが高そう。
Visual Studio CodeとCordovaで作るハイブリッドアプリ開発環境

# 背景
Windows端末でiOSアプリの開発を行うための下調べです。
うちらが作るシステムはiOSアプリをハイブリッド前提としたWeb部分のみ、作業端末はWindowsだけだったらどこまでできるのか？という疑問から、実際に環境構築からサンプル作成までを行い、開発を進めて問題ないかの検証です。

# 前提
* OS：Windows 10
* IDE：Visual Studio Codeインストール済み (1.10.2) (以降VSCode)
* アプリの申請系については触れないです

# 手順
## 1.環境準備
### Cordova Tools 拡張機能インストール
VSCのコマンドパレットを起動(`Ctrl + P`)し、「ext install cordova」を入力し、「Cordova Tools」をインストールします。 

### Node.jsインストール
* [Node.js / npmをインストールする（for Windows）](http://qiita.com/taiponrock/items/9001ae194571feb63a5e)
* インストール済みの人は飛ばしてください。
* [nodistでNode.jsをバージョン管理](http://qiita.com/satoyan419/items/56e0b5f35912b9374305)
 
``` :cmd
>nodist -v
(x64)
> 6.11.3  (global: 6.11.3)
  7.2.1
```

## 2. Cordovaアプリベース生成
### Cordoava を npm install でインストール

``` :cmd
>npm install -g cordova 
```

### Cordovaプロジェクト作成
コマンドプロンプトを起動し、任意の箇所にフォルダを作成し移動します。

``` :cmd
>mkdir c:\Users\[hoge]\cordova
>cd c:\Users\[hoge]\cordova
```
Cordovaプロジェクトのベースを作成します。

``` :cmd
>cordova create hello com.example.hello HelloWorld
第1引数(hello):プロジェクトディレクトリ名
第2引数(com.example.hello)：逆引きドメイン スタイル識別子と、プロジェクトを提供。
第3引数(HelloWorld)：アプリケーションの表示タイトル 
```
実行すると`Creating a new cordova project.`を出力。

### プラットフォームを追加する
helloに移動します。

``` :cmd
>cd hello
```

今回はiosのアプリケーションを想定しているのでiosのみの追加です。androidやwindowsPhoneの場合は適宜変更必要です。また、WARNINGでてますね。iosで作ったけどビルドはできないとの事。(やっぱりMacが必要なんだね)

``` :cmd
>cordova platform add ios
WARNING: Applications for platform ios can not be built on this OS - win32.
Using cordova-fetch for cordova-ios@~4.4.0
Adding ios project...
Creating Cordova project for the iOS platform:
        Path: platforms\ios
        Package: com.example.hello
        Name: HelloWorld
iOS project created with cordova-ios@4.4.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving ios@~4.4.0 into config.xml file ...
```

現在のプラットフォームのセットを確認します。
iosがあればOKです。

``` :cmd
>cordova platforms ls
Installed platforms:
  ios 4.4.0
Available platforms:
  android ~6.2.2
  blackberry10 ~3.8.0 (deprecated)
  browser ~4.1.0
  webos ~3.7.0
  windows ~5.0.0
```

## 3. VSCode で起動する
CordovaプロジェクトフォルダをVSCodeで開く。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/57103/86c5350c-4c48-cb69-bafc-377c933ae573.png)

デバッグモード(Ctrl + Shift + D)を開き、歯車アイコンを選択して「Cordova」を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/57103/ae579e93-65f0-bddf-abec-665d774a8085.png)

デバッグ右のプルダウンから選択。
Simulate iOS in browser
![image.png](https://qiita-image-store.s3.amazonaws.com/0/57103/c4a93d62-2a9b-a074-c6c7-bc7336d4850a.png)


(補足)
Run iOS on device
Run iOS on simulator　は以下エラーで実行できず。

```
Launching for ios (This may take a while)...
Unable to launch iOS on non-mac machines
```

以下のように実行起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/57103/cceac653-3bb4-4b81-ba06-1b69fa63bb1d.png)

ハイブリッドの実装方法は別途確認する。

以上。

開発に向けて...
[Apache Cordovaで本格スマホアプリに挑戦しよう](https://codezine.jp/article/detail/9218)
MongoDBが起動しなくなった時の対処

# 症状　
今まで同様の状態になった場合は、MongoDBの一時ファイルやロックファイルを消すことで解決できていた。しかし、それでは解決できなかった。
環境 : Ubuntu14.04 , mongo3.2.13

# 解決法
/var/lib/mongodbの所有者をルートからmongoldbに変更した
意外と知らない Vim でできること

## 概要
自分はターミナルで Vim を使って開発するのが好きなのだが、 Sublime Text でよくね？とか VSCode でよくね？みたいなことを言われて、話をすると、

* タグジャンプができたり
* ファイルをツリーで表示できたり
* ファイル検索できたり
* 補完できたり

するから良いと言われ、それって標準の Vim でもできるのでは、と思って調べてみたら意外にできると知ったので記事にしてみました。

他のエディタに Vim プラグインを乗っけるというのもありだとは思いますが、

* エディタアップデートの際にプラグインアップデートしなきゃだったり
* 結局サーバーに入る時にそういったソフトは使えなかったり
* カスタマイズしにくかったり

するので、標準 Vim でやっています。

## タグジャンプ（定義元に移動）
コードを書いてて、定義元を表示したいことはしばしばある。これは Vim 標準の ctags を使うことで解決できる。ctags はソースからタグファイルを生成して、vim からそのタグファイルを読み込めるようにすることで、定義元を特定してタグジャンプを可能にする。

![スクリーンショット 2017-09-17 17.40.12.png](https://qiita-image-store.s3.amazonaws.com/0/19698/56638dfa-06fb-636f-bc91-60b9bde47d2f.png)

mac だと homebrew で最新にした方が良さそう。

```
$ brew install ctags
```

ctags でタグファイルを作るのは以下のように ctags コマンドをたたく

```
$ ctags --languages=RUBY -R .
```

tags ファイルが生成されるので以下の操作で定義元にジャンプできる

| 操作方法 | 動作 |
|---|---|
| `<C-]>` | 一番目の候補にジャンプ | 
| `g<C-]>` | 複数候補を表示 > 選択ジャンプ |

## ファイルツリー表示
ファイルツリーは、 [NERDTree](https://github.com/scrooloose/nerdtree) というライブラリが使いやすいのでこれはライブラリで導入。カレントディレクトリ以下のファイル選択が捗る。ライブラリ導入方法は別記事にて： [Vim におけるプラグイン管理についてまとめてみた](http://qiita.com/tanabee/items/e2064c5ce59c85915940)

![スクリーンショット 2017-09-17 17.05.05.png](https://qiita-image-store.s3.amazonaws.com/0/19698/cdc34476-cdf8-281f-88c8-3f3d1cf88976.png)

## ファイル検索

標準では vimgrep を使うとファイル検索ができるが、これもライブラリを使ったほうがラク。[Unite.vim](https://github.com/Shougo/unite.vim) などを使うと良い。

```
:Unite file
```

と叩いて、挿入モードでパターン入力すると、ファイル検索ができ、所望のファイルを開くことができる。

![Unite.vim](https://camo.githubusercontent.com/3c58da05b4e3ccf2f717007c4d1c0bee415d670d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622d63736578746f6e2f756e6974652d30312e676966)

その他のライブラリでは [ctrlp.vim](https://github.com/kien/ctrlp.vim) とかも良さそう。


## 自動補完

Vim には標準で挿入モード中に `<C-p>` や `<C-n>`　と打つと補完が走る。設定をすれば ctags で生成したファイルや辞書データ（スペルチェックに使う）を候補にすることも可能。

こちらまだ深掘りできてないが、デフォルトの補完は設定がややめんどそうなので、[neocomplete.vim](https://github.com/Shougo/neocomplete.vim) などライブラリ導入を検討したほうがラクそう。

## ファイル進む、戻る

以下のキーで直前に編集したファイルに戻ったり進んだりできる。

| 操作方法 | 動作 |
|---|---|
| `<C-i>` | 進む |
| `<C-o>` | 戻る |

参考: [Vim でブラウザのようにファイル間で進む、戻る操作をする方法](http://qiita.com/tanabee/items/8675580c07c58a3db990)

## まとめ
ライブラリも多用しましたが、標準の Vim で用意された機能をライブラリでより使いやすくされています。これら、ライブラリを使わずに標準機能で頑張ってみるのも良いと思います。その際には [実践Vim](http://amzn.to/2haePyE) に詳しく書かれているので、そちらを参考にされるのが良いと思います。

こちらの記事も書きました > [Vim におけるプラグイン管理についてまとめてみた](http://qiita.com/tanabee/items/e2064c5ce59c85915940)
Laravelを使ったテーブル設計

# 前提
- Laravelにはマイグレーションというテーブル作成の補助をしてくれる機能があります
- この記事はマイグレーションの使い方とテーブル設計を行う上での備忘録です
- ゲームアプリを想定したテーブル設計を行う場合の備忘録です

# 基本知識
- マイグレーションとは
	- マイグレーションとはデータベースのバージョンコントロールのような機能です
	- このファイルをメンバー同士で共有することでテーブルの変更などを容易に共有することができます

- マイグレーションの使い方
	- public function up()欄には変更を加える内容を記述します
	- public function down()欄には変更を戻すための内容を記述します


# マイグレーションのコマンド

	// テーブルの作成時
	php artisan make:migration create_テーブル名_table --create=テーブル名

	//　テーブルの修正時
	php artisan make:migration hoge_テーブル名_table --table=テーブル名
	
	// ファイルの実行（※仮想環境で実行）
	php artisan migrate
	
	// ロールバック(1段階の場合はオプションコマンドは不要、※仮想環境で実行）
	php artisan migrate:rollback --step=5
	
	// マイグレーションファイルの状況を確認
	php artisan migrate:status

# テーブルの変更時によく使うもの
- 作成カラム情報

| 項目 | 記載内容 |
|-----|-----------|
|主キー|$table->increments('カラム名');|
|整数型|$table->unsignedInteger('カラム名');|
|整数型|$table->unsignedTinyInteger('カラム名');|
|整数型|$table->unsignedBigInteger('カラム名');|
|文字列型|$table->string('カラム名', 最大文字数);|
|create_time| $table->timestamp('created_time')->default(\DB::raw('CURRENT_TIMESTAMP')); | 
|update_time| $table->timestamp('updated_time')->default(\DB::raw('CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP')); |
|Nullを許可|->nullable();|
|コメント|->comment('コメント');|
|主キー追加|$table->primary('カラム名');|
|インデックスキー追加|$table->index('カラム名','インデックスキー名');|
|ユニークキー追加|$table->unique('カラム名','ユニークキー名');|

- 対応表

| 項目 | up側に記載 | down側に記載 |
|-----|-----------|-------------|
|カラムの追加| カラムを追加（->after('カラム名')を付ける） | $table->dropColumn('カラム名');|
|カラムの削除| $table->dropColumn('カラム名'); | カラムを追加（->after('カラム名')を付ける）|
|カラム名の変更| $table->renameColumn('変更前', '変更後'); | up()に記載したものと逆|
|ユニークキーの追加|$table->unique('カラム名','ユニークキー名'); | $table->dropUnique('ユニークキー名');|
|インデックスキーの追加|$table->index('カラム名','インデックスキー名'); | $table->dropIndex('インデックスキー名');|

# テーブル作成時の補足
- 型について

	| 項目 | 型 |
	|--------|--------|
	| 時間関連| TIMESTAMP|
	| 文字| VARCHAR|
	| 必ず256以内におさまる整数値| TINYINT |
	| 数十億以上になるかもしれない整数値| BIGINT |
	| それ以外の整数値| INT |

- TIMESTAMPについて
    - Laravelのデフォルトの「created_at」「updated_at」はon update CURRENT_TIMESTAMPになっていない。カラム名を変えたいなどの理由から使わないようにします

- 補足
    - マイナスになる見込みがないものにはUNSIGNEDを付けます
    - データを取得する際、IN句の引数に入れる可能性がある値のカラムについてはindexキーをはるようにします
    - レコードの更新が行われる見込みがない場合はupdate_timeカラムは不要です
    - テーブルの言語を変更するために「config/database.php」ファイルの以下のmysql部分を修正します

            'charset' => 'utf8',
            'collation' => 'utf8_general_ci',

# 補助ツール
- テーブル内容の記述については下記のSequelPro用プラグインの利用がオススメです
	- http://co.bsnws.net/article/203

# 参考
- タイムゾーンの確認方法
    - http://q.hatena.ne.jp/1362384044
- データ型とサイズについて
    - http://kaya-soft.com/sqlserver2008-toranomaki/beginner/columntype/
- Indexをはった時に内部で行われている処理（BTreeについて）
    - http://blog.h13i32maru.jp/entry/2012/07/01/000000
- 使用したSQLをデバッグログにすべて残す方法（※デバッグに大変便利です）
    - http://kimagureneet.hatenablog.com/entry/2016/08/18/194857
- マイグレーションファイルを削除した時に注意すること
    - http://qiita.com/one-kelvin/items/6ea00d747ac7e641db32
form_withでutf8=✓を消す方法

form_forからはoptionのkeyが変更されています。

`skip_enforcing_utf8`になります。

```ruby
form_with(model: @foo, method: :get, skip_enforcing_utf8: true) do |f|
...
```

https://github.com/rails/rails/blob/9c35bf2a6a27431c6aa283db781c19f61c5155be/actionview/test/template/form_helper/form_with_test.rb#L19

動かなくなってるから、焦りました。

参考

http://qiita.com/tyamagu2/items/fbc44f7b41a1697ca5b7
jQueryを用いずにtextareaの大きさを動的に拡張する

[加筆修正しました。](https://qiita.com/ne_no_usa/items/289dcb28fd4b0d101c97)

textareaの大きさを動的に拡張しようとしたら、jQueryを使わなくても思いの外簡単にできてしまったので、自分用メモも兼ねて。実は、公開することでバグを見つけてもらおう、なんて思っていたり……
#ソースコード（JavaScript）
引数には、大きさを変更したいtextareaのelementを渡します。keyupなりkeypressなりで呼び出せば良いです。

```js
function ReSize(target) {
    //targetのbox-sizingがborder-boxかcontent-boxか
    if (window.getComputedStyle(target).boxSizing == "border-box") {
        //box-sizingの場合
        //scrollHeightにborderとmarginの大きさを加える
        target.style.height = target.scrollHeight + (target.offsetHeight - target.clientHeight) + "px";
    } else {
        //content-boxの場合
        //上下のpaddingの大きさを計算
        var padding = parseInt(window.getComputedStyle(target).paddingTop) + 
            parseInt(window.getComputedStyle(target).paddingBottom);
        //scrollHeightから上下のpaddingの大きさを引く
        target.style.height = target.scrollHeight - padding + "px";
    }
}
```

#ソースコードについて
textareaのbox-sizingに応じて高さの計算方法を変えています。
##box-sizing:border-boxの場合
```target.scrollHeight```に上下のborderとmarginの大きさを加えています。その大きさは```target.offsetHeight - target.clientHeight```で求めています。
##box-sizing:content-boxの場合（elseの方）
```target.scrollHeight```から上下のpaddingの大きさを引いています。その大きさは```parseInt(window.getComputedStyle(textarea).paddingTop) + parseInt(window.getComputedStyle(textarea).paddingBottom)```で求めています。長かったのでpaddingに一旦保存してしまいました。（parseFloatの方が良いかも……　今のところ、私はparseIntで問題が発生していませんが。）

#動作確認について
Chrome60.0.3112.113及びMicrosoft Edge 40.15063.0.0で確認しました。

#訂正
jQueryのスペルに誤りがあったため、修正しました。（2017/09/17）
変数名に誤りがあったため、修正しました。（2017/09/17）
ソースコードにコメントを追加しました。（2017/09/17）
JavaScriptで欧文だけスタイルを変える

cssで合成フォントを指定したはいいが、
欧文だけサイズを変えたい、ベースラインを調整したいと思ったときパッと出来そうになかったので
無理くりJavaScriptでタグ付け。そのメモ。


用途

- 和文と欧文とでサイズやベースラインを変えて合成フォントを再現したいとき
- かつhtmlの中身が静的じゃないとき

```js
function addTagAndClassForEnglish(element) {
  let html = element.html();
  if (!html) { return }
  var newHtml = "";
  var beforeTextType;
  for(var i=0; i < html.length; i++){
    if(html.charCodeAt(i) >= 256) {
      if (beforeTextType === "en") {
        newHtml += '</span>' + html.slice(i, i + 1);
      } else {
      newHtml += html.slice(i, i + 1);
      }
      beforeTextType = "ja";
    } else {
      if (beforeTextType === "ja" || i === 0) {
        newHtml += '<span class="en">' + html.slice(i, i + 1);
      } else if (beforeTextType === "en" && i === html.length - 1) {
        newHtml += html.slice(i, i + 1) + '</span>';
      } else {
        newHtml += html.slice(i, i + 1);
      }
      beforeTextType = "en";
    }
  }
  element.empty().append(newHtml);
}
```
SwiftでWeb開発ができるフレームワーク集

『SwiftはiOSやMacOSのための言語』だと思っている人がまだまだ多いが、既にオープンソース化されているので、他のプラットフォームでも動かせる。
とはいえ、まだまだ歴史も浅いので、これから増えていく傾向。

Swiftの初登場は、2014年6月2日（現地時間）のApple社のWWDC。リークもなく突然発表された。（Swift1.0 正式版リリースは9月15日）
2015年9月15日に、Swift2.0 正式版リリース。
2015年12月3日にオープンソースとしてGitHubに公開された。
2016年9月13日に、Swift3.0 正式版リリース。
開発速度は非常にハイペース。既に Swift4.0 の開発も進んでおり、ウワサでは2017年下期のリリース目標という情報も。


そんなわけで、SwiftでもWeb開発ができる。
現在あるSwfitのWEBフレームワークをまとめてみた。

|フレームワーク	|特徴
|:---		|:---
|Perfect(パーフェクト)|・オープンソースとほぼ同時リリース<br>・Linux/MacOSで動くWEBアプリ/WEBサーバーが作れる<br>・つまりSwiftだけでフロント〜バックエンドまでできる
|Kitura(キトゥーラ)|・IBM社が2016年2月22日に発表したフレームワーク<br>・IBMのクラウド環境「Bluemix」上で動作するWEBアプリ/WEBサーバーが作れる
|Swift Express	|・非同期、シンプル、強力なWEBアプリケーションが作れる（らしい）<br>・MVC開発フレームワーク
|Vapor(ベイパー)	|・Ubuntu(Linux)/MacOSで動作<br>・WEBサイト、REST API、クラウドサービスを作るための機能を提供<br>・PHPのフレームワーク「Laravel」に影響を受けている
|Swifton(スウィフトン)|・Linux/MacOSで動作<br>・MysqlやPostgreSQLなどのデータベースもサポート<br>・Ruby on Railsに影響を受けに影響を受けRails風に書ける<br>・Webサイトではアメリカの人気歌手Talor Swiftが線路に乗せられている(つまり、Swift on Rail)というギャグ画像があった
|Slimane(スリマン)|・Expressに影響を受け、Swift3に対応している<br>・WEBフレームワーク自身がHTTP Serverとして機能する<br>・非常に高速に動作するらしい<br>・非同期に関わる機能はほぼ対応している<br>・ロゴマークから察するに、名前の由来は著名フランス人デザイナー、エディ・スリマン？
|HTTPSwiftServer|・MaxOSフレームワーク「Cocoa」を拡張するフレームワーク<br>・HTTPをiOSアプリと連携できるような設計<br>・多機能ではなくシンプルな機能しか提供していない<br>・Cocoa拡張のため統合性が高く、iOSとの単純通信するサーバーサイドにはベスト

Swift4.0以降でそれぞれがどんな発展をするのかも要注目。
トピックモデルでポケモン分類


# はじめに

haripoさんの [LDA for Pokemon analysis](https://haripo.com/articles/2016/LDA-for-Pokemon-analysis/) の記事が面白かったので，
二番煎じになりますがトピックモデルでポケモンの分類をしました．

本記事の構成

* はじめに
* トピックモデル
* ポケモン分類
* 結果と分析
* もう少し分析
* おわりに


# トピックモデル

トピックモデルについては以前書いた記事を参考にしてください．

* [pythonでトピックモデルの最尤推定実装](http://qiita.com/ta-ka/items/18248abf0135cca02b93)
* [pythonでトピックモデルの変分ベイズ推定実装](http://qiita.com/ta-ka/items/ccb0f39883bfe3ad743c)


# ポケモン分類

トピックモデルで使用される用語をポケモン分類に当てはめると
以下のテーブルのようになります．

| トピックモデル | ポケモン分類 |
|:---|:---|
| 文書 | ポケモン |
| トピック | タイプ |
| 単語 | わざ |

ポケモンはタイプを持ち，タイプは覚えられる技に影響を与えます．
例えば，みずタイプのポケモンは「なみのり」や「あわ」といった
みずタイプの技を覚える傾向があります．
この傾向は覚える技を観測データとした分類に利用できそうです．


# 結果と分析

今回は変分ベイズ推定を用いてパラメータを推定し，
ポケモンを分類しました．

* ポケモン数 $D$: 721
* わざ数 $V$: 620
* トピック数 $K$: 30

推定したパラメータをもとに分布を決定し，
各トピックの上位10体のポケモンをまとめました．
同じタイプのポケモンが集まっていそうです．

<img width="2880" alt="pokemon_lda" src="https://qiita-image-store.s3.amazonaws.com/0/82527/a320f7d2-a741-e315-e6ef-0946733834ae.png">

次に各トピックで出現確率の高い技を上位10個まとめました．
全ては載せられないので3トピックぶん載せます．
上から順にかくとう，ひこう，ドラゴンの技っぽいです．

```py3
# probability, move

# topic 0
0.038194060809852150,きあいパンチ
0.037835195362798050,なげつける
0.036841611052444170,グロウパンチ
0.034094062097912610,かわらわり
0.031582047497348980,きあいだま
0.030022570931390366,かみなりパンチ
0.028445813433849287,けたぐり
0.025004928499331930,ほのおのパンチ
0.023780587984568276,カウンター
0.021945692094110280,がんせきふうじ

# topic 4
0.033900215309604030,そらをとぶ
0.030482342390286497,ついばむ
0.028591087641639673,はがねのつばさ
0.027435959356401675,はねやすめ
0.027380458031433918,おいかぜ
0.025788738790993984,きりばらい
0.023034317940404975,ねっぷう
0.022523589807169140,つばめがえし
0.022254501055455754,ゴッドバード
0.020131867462295738,でんこうせっか

# topic 11
0.049065350322072170,げきりん
0.041774262273487610,かみくだく
0.041624388294984890,りゅうのはどう
0.037855463232992870,ほえる
0.025959566718192560,ドラゴンクロー
0.024452559013954666,かみつく
0.023117951513882520,りゅうせいぐん
0.022165850178318302,りゅうのいぶき
0.021211659635587490,ドラゴンテール
0.020565024347301973,アイアンテール
```

ちなみにどの技も等確率で出現すると仮定すると，
$0.001612903$ になります．



# もう少し分析

トピック1にはイーブイ系が集まっています．

<img width="960" alt="001" src="https://qiita-image-store.s3.amazonaws.com/0/82527/a96bdeb4-3382-7f66-72b1-c35bf254d19e.png">

```py3
# topic 1
0.043147518977559340,あまえる
0.041203419444248310,とっておき
0.033292408675975230,かたきうち
0.033029453562122160,ほしがる
0.030529522626056543,ふるいたてる
0.025551829416613884,ハイパーボイス
0.024972809947129540,しっぽをふる
0.024818145340899777,エコーボイス
0.023821039582134246,なきごえ
0.023117882965061936,てだすけ
```

私は最近のポケモンに詳しくないので，
これらがイーブイ系に特異な技なのか知りません．
分類結果を分析にするには，ある程度知識が必要になります．

トピック13は分類に失敗していそうです．

<img width="960" alt="012" src="https://qiita-image-store.s3.amazonaws.com/0/82527/da02376d-e7cd-8d03-c4d2-0bbb300d07fd.png">

```py3
# topic 12
0.057367839760812930,いびき
0.053966900730742826,はたきおとす
0.045267075341040960,やつあたり
0.042824715616878280,ないしょばなし
0.042506636983195300,からげんき
0.042225237649753020,ひみつのちから
0.041397727253613630,どくどく
0.035804309317892184,まもる
0.034668594832704050,りんしょう
0.021632999482884614,つばめがえし
```

ポケモンの場合は分類結果の評価が比較的簡単でした．
しかし，トピックを定義しづらい場合は，
分類結果が良いか悪いか評価するのが難しそうです．
また，コードを回す度に結果を見て分析するが大変でした．


# おわりに

トピックモデルでポケモンの分類ができました．
想定よりも良い結果が出たので楽しかったです．
ソースコードは公開しない予定です．
ES6：文字列で式展開する方法

<code>\`</code> （バッククオート）で文字列を囲み、その中で　 `${}` を使えばよし

```js
let interest = 'React Native'

console.log(`I am interested in ${interest}`) // I am interested in React Native
```

## 参考
- [テンプレート文字列 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings)
SharePointサイトにタイルUI(w/ カスタムリスト)

#やりたいこと
サイトにタイルのっけて、それをリンクにしたい。
（注目リンクパーツではなく）

#やったこと
- サイトにカスタムリストを用意して、そこにタイルの色と、画像のURLを記載
- ページ側ではScript editorで、SPServicesをつかってリストデータを取得
- Contents editorではタイルの見栄えを調整（ホバーしたら1.1倍に拡大している）

#こんな感じ
![tile.png](https://qiita-image-store.s3.amazonaws.com/0/202779/b1897690-03cf-b030-f043-df25320a34a4.png)
![hover.png](https://qiita-image-store.s3.amazonaws.com/0/202779/8fc251a2-0dbd-eb96-b844-1778e7275cff.png)
ホバーするとおっきくなる
![list.png](https://qiita-image-store.s3.amazonaws.com/0/202779/0c4815aa-21a0-01e1-8cba-f522c2d5eb55.png)
リスト側。いらないフィールドもあるが、それはCAMLでとらなければいい。

#コード

```js:ScriptEditor
<div>title</div>
<script src="jquery.minのpath" type="text/javascript"></script>
<script src="jquery.SPServicesのパス" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "XXXXXX",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Open In New Window' /><FieldRef Name='Order' /><FieldRef Name='imageURL' /><FieldRef Name='color' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='Order' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var order =parseInt(($(this).attr("ows_Order")));
                var imageURL = ($(this).attr("ows_imageURL"));
                var bgcolor = ($(this).attr("ows_color"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var liHtml = "<div class='Tile' id='Div"+order+"' style='background-color: "+bgcolor+ "'>"+"<a href='"+ href +"'>" + "<img width='150' alt='' src='"+imageURL+"'/> </a></div>";
                $("#Content").append(liHtml);
            });
        }
    });
});
</script>
<div id="Content"></div>
```
SPServicesでList itemとってきて、そのあとにdivに子要素を生成しているだけ。

```css:ContentsEditor
<style type="text/css"> 
div.Content{
 width: 100%;
}
           
div.Tile{
 position: relative;
 height: 150px;
 width: 150px;
 background-color: #38A3DB;
 margin: 10px;
 float: left;
}

div.Tile a{
 position: relative;
 height: 150px;
 width: 150px;
 float: left;
}

div.Tile img{
 position: relative;
 height: 150px;
 width: 150px;
 float: left;
}

div.Tile:hover{
 -webkit-transform: scale(1.1, 1.1);
 -ms-transform: scale(1.1, 1.1); 
 background-image: url("/SiteAssets/white_vpvot.png");
 background-repeat: no-repeat;
 background-position: right top;
 opacity: 0.75;
}
</style>
```
これまたもう少し綺麗にできそうだがまずはこんな感じ。

#Reference
- https://david9142.wordpress.com/2012/01/18/html%E3%81%A7%E3%83%A1%E3%83%88%E3%83%ADui%E3%81%A3%E3%81%BD%E3%81%84%E7%94%BB%E9%9D%A2%E3%82%92%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/
- https://spservices.codeplex.com/wikipage?title=GetListItems&referringTitle=Lists
JavaScript のクラスの書き方のいくつか

このポストは、壮大なヤクの毛刈りの最中なので、いつもにまして、私以外には意味のないポストである。[JavaScriptのプロトタイプからオブジェクト指向を学ぶ](http://qiita.com/takeharu/items/809114f943208aaf55b3)この方の一連のポストから、学ぶ方が効率がいいだろう。

さて、自分のために、その１。JavaScript のクラスの書き方のいくつか。

```js
function Employee(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
    this.getSalary = function() {
        return baseSalary * 2 + 1;
    }
}

var emp = new Employee("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());
```

まずは、これは問題のある書き方。何故かというと、Employee の生成のたびに、getSalary() メソッドも生成されるから。

```
Tsuyoshi
201
```

実際、このコードは次のものと同じらしい。

```js
function EmployeeNative(name, baseSalary) {
    var self = {};
    self.name = name;
    self.baseSalary = baseSalary;
    self.getSalary = function() {
        return self.baseSalary * 2 + 1;
    }
    return self;
}

var emp = EmployeeNative("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());
```

つまり、`new` キーワードは、オブジェクトを返しているに過ぎない。その時に、この書き方だと、毎回メソッドを作成することになる。オススメは次のもの。

```js
function EmployeePrototype(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
}

EmployeePrototype.prototype.getSalary = function() {
    return this.baseSalary * 2 + 1;
}

var emp = new EmployeePrototype("Tsuyoshi", 100);
console.log(emp.name);
console.log(emp.getSalary());
```

`prototype` を用いて定義するもの。prototype は、既存のプロトタイプに、後からプロパティ（関数含む）を追加できるもの。ここでは、`EmployeePrototype` に対して、後から、プロパティを追加している。こうすると、どうなるかというと、新たに

```js
var emp = new EmployeePrototype("Yamada", 200);
``` 

みたいなコードを書いたとしても、

```js
function EmployeePrototype(name, baseSalary) {
  var self = {};
  self.name = name;
  self.baseSalary = baseSalary;
  return self;
}
```

になるので、メモリ効率的にメソッド分だけ有利になる。しかし、プロトタイプがなんであるかは、まだちょっとスッキリしないので、次のポストで掘り下げてみる。

* [JavaScript Object Prototypes](https://www.w3schools.com/js/js_object_prototypes.asp)
* [Object.prototype](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype)
Gitでファイルのrename前の履歴を追いたい

こんな記事を書いておいてアレですが
http://qiita.com/gooddoog/items/a12d500b331f2ecf718f

作ったプログラムのファイル名を間違えたので直したい(CaseStatement → Case Experssion)
https://github.com/yuyabu/OrderByWithCaseStatementGenerator


過去にファイル名変更のせいでgitのlogが追えなくなったことがあった気がするので、事前調査を行いたい

# 検証方法

https://github.com/yuyabu/modifyTest

REDME.mdファイルを

This
This is 
This is Test 
This is Test Message

と単語を追加して編集したのちファイル名を変更。(REDME.md → README.md)

このファイルの変更履歴の確認を検証する。


# ローカルでの確認

以下のコマンドで確認可能

```
git log --follow -p ./README.md
```

```:結果
commit 5e956b5606f0318621d3d88f27095bc523525f07
Author: yuyabu 
Date:   Sun Sep 17 16:03:31 2017 +0900

    rename

diff --git a/REDME.md b/README.md
similarity index 100%
rename from REDME.md
rename to README.md

commit 6777211baa084f59136f1a54b90dc5a0b4f2c29f
Author: yuyabu 
Date:   Sun Sep 17 15:59:17 2017 +0900

    add word

diff --git a/REDME.md b/REDME.md
index e225a40..d312b2e 100644
--- a/REDME.md
+++ b/REDME.md
@@ -1 +1 @@
-This is Test
+This is Test Message

commit 9bc5bbd9b64397535088fb1bd5f4d4abd3a94ca6
Author: yuyabu 
Date:   Sun Sep 17 15:59:03 2017 +0900

    add word

diff --git a/REDME.md b/REDME.md
index 7ab118a..e225a40 100644
--- a/REDME.md
+++ b/REDME.md
@@ -1 +1 @@
-This is 
+This is Test

commit 86ebce4d9a5a1cc10e9102467bdfba4b971a0e3b
Author: yuyabu 
Date:   Sun Sep 17 15:58:32 2017 +0900

    fix message

diff --git a/REDME.md b/REDME.md
index f0ff9a1..7ab118a 100644
--- a/REDME.md
+++ b/REDME.md
@@ -1 +1 @@
-This
+This is 

commit 2c01601a9a4e84cf8bd13135b8cd794b6a0b1cab
Author: yuyabu 
Date:   Sun Sep 17 15:56:20 2017 +0900

    first commit

diff --git a/REDME.md b/REDME.md
new file mode 100644
index 0000000..f0ff9a1
--- /dev/null
+++ b/REDME.md
@@ -0,0 +1 @@
+This
```

変更前の履歴が確認できた。

# github上での確認

https://stackoverflow.com/questions/19101554/git-renaming-file-history-is-available-on-cmd-line-but-not-in-github-interface
によるとブランチのcommit logを

```
https://github.com/<user>/<project>/commits/<branch>
```

で確認可能
今回の場合: https://github.com/yuyabu/modifyTest/commits/master


また変更前ファイル名をURLで指定することで確認可能
https://github.com/yuyabu/modifyTest/commits/master/REDME.md


## 他

ファイル変更をまたいだ履歴を追えるChromeの拡張がある
https://stackoverflow.com/questions/17213046/see-history-in-github-after-folder-rename

# 所感
どれも正攻法に思えない。
ファイル名変更はイレギュラーなケースだと思うので、命名には気をつけたい
DHT11をラズパイ + pythonで使えるようにする（メモ）

#DHT11
安価で導入できる温度湿度計[DHT11](https://www.amazon.co.jp/s/ref=nb_sb_noss?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=DHT11&rh=i%3Aaps%2Ck%3ADHT11)をサクッと使うため、[pythonライブラリ](https://github.com/szazo/DHT11_Python)を導入（ダウンロードするだけ）。

```
git clone https://github.com/szazo/DHT11_Python
```

上記で公開されている`dht11_example.py`が、スタートプログラムになる。

```py:dht11_example.py
import RPi.GPIO as GPIO
import dht11
import time
import datetime

# initialize GPIO
GPIO.setwarnings(False)
GPIO.setmode(GPIO.BCM)
GPIO.cleanup()

# read data using pin 14
instance = dht11.DHT11(pin=14)

while True:
    result = instance.read()
    if result.is_valid():
        print("Last valid input: " + str(datetime.datetime.now()))
        print("Temperature: %d C" % result.temperature)
        print("Humidity: %d %%" % result.humidity)

time.sleep(1)
```
JavaScript以外のフロント開発ができる言語

2017年9月現在、Webブラウザ上で動作するプログラミング言語は JavaScriptただ１つ。

でも、JavaScript以外の言語をJavaScriptに変換することで、実質、他の言語でフロント開発ができる。

例えば、WordPressでおなじみの「PHP」は、処理はPHPで書くが、実際にブラウザで解釈させているのは変換したJavaScriptということ。
近年の新言語でも、「JavaScript以外の言語 → JavaScript」に変換できるコンパイラは結構ある。

そんな、JavaSccript以外で書けるフロントの言語を個人的に厳選してみた。

|言語	|対応コンパイラ	|備考
|:---	|:---		|:---
|PHP	|Uniter(ユナイター)|JavaScript製、MIT Licenseのオープンソース
|Ruby	|Opal(オーパル)	|Ruby製、MIT Licenseのオープンソース
|Python	|Brython(ブライソン)|JavaScript製、New BSD Licenseのオープンソース
|Go	|GopherJS(ゴーファーJS)|JavaScript製、New BSD Licenseのオープンソース
|Swift	|ShiftJS(シフトJS)|JavaScript製、MIT Licenseのオープンソース

2017年9月現在では、事例やドキュメントはまだまだ少ないが、学習コスト軽減や開発スピード向上によって、今後有用なケースも増えてくる（はず）。
SSD 1306 OLEDをラズパイ + pythonで使えるようにする（メモ）

#SSD 1306 OLED
安価で導入できるOLED（有機EL）ディスプレイ[SSD1306](https://www.amazon.co.jp/HiLetgo-128%C3%9764-LCD%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4SSD1306%E6%B6%B2%E6%99%B6-MSP430-Arduino/dp/B01MDK1X72/ref=sr_1_1?s=industrial&ie=UTF8&qid=1505632344&sr=1-1&keywords=HiLetgo+0.96%22+I2C+SPI+%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%AB+128%C3%9764+OLED)。I2CとSPIに対応している（基板によっては一方のみ）あるが、SPIの方が表示レートが早い。

[こちらの記事](http://ytkyk.info/blog/2016/06/19/raspberry-pi%E3%81%A7128x64%E3%81%AEoled%E3%81%AB%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%82%92%E8%A1%A8%E7%A4%BA%E7%BE%8E%E5%92%B2%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/)を参考にして、[Adafruit向けのpythonライブラリ](https://github.com/adafruit/Adafruit_Python_SSD1306)と[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)を導入。


```
git clone https://github.com/adafruit/Adafruit_Python_SSD1306.git
cd Adafruit_Python_SSD1306
sudo python setup.py install

wget http://www.geocities.jp/littlimi/arc/misaki/misaki_ttf_2015-04-10.zip
unzip misaki_ttf_2015-04-10.zip -d misaki
```
起動しているXcodeのプロセスをすべて強制終了するコマンド

Xcode使用中/終了中に虹色のくるくるが出て固まってしまった場合等。

ターミナルを起動して、以下のコマンドを実行します。
`ps -ef | grep "MacOS/Xcode$" | grep -v grep | awk '{print $2}' | xargs kill -KILL`

↑でなんかうまくいかない場合はこちら。こっちはちょっと乱暴に皆殺しします。
`ps -ef | grep Xcode | grep -v grep | awk '{print $2}' | xargs kill -KILL`

個別のXcodeの終了方法などはいい方法があれば追記します。
メソッドの引数が継承/実装関係にあった場合のオーバーロード

Javaで継承/実装関係にあるクラスのオーバーライドでは実行時に型が決定してメソッドが呼び出されますが、オーバーロードではどのメソッドが呼び出されるのかを調べてみました

**インタフェース**

```
public interface OInterface {
	public void printClassname();
}
```
**親クラス**

```
public class OParent  {
	public void printClassname() {
		System.out.println("called:OParent=>printClassname()");
	}
}
```
**子クラス（インタフェースを実装）**

```
public class OChild extends OParent implements OInterface {

	@Override
	public void printClassname() {
		System.out.println("called:OChild=>printClassname()");
	}
}
```

**実行用コード**

```
public class OverloadMain {
	public static void main(String[] args) {

		OverloadMain main = new OverloadMain();

		OChild child = new OChild();
		OParent parent = new OChild();
		OInterface iface = new OChild();

		main.overloadMethod(child);  // (1)
		System.out.println("----");
		main.overloadMethod(parent); // (2)
		System.out.println("----");
		main.overloadMethod(iface);  // (3)
	}


	public void overloadMethod(OChild child) {
		System.out.println("called:overloadMethod(OChild)");
		child.printClassname();
	}

	public void overloadMethod(OParent parent) {
		System.out.println("called:overloadMethod(OParent)");
		parent.printClassname();
	}

	public  void overloadMethod(OInterface iface) {
		System.out.println("called:overloadMethod(OInterface)");
		iface.printClassname();
	}
}
```

**予想**
予想1. (1)～(3)は全てoverloadMethod(OChild child)呼ばれる（オーバーライドと同じ）
予想2. (1)～(3)はそれぞれ宣言した型のメソッドが呼ばれる

**実行結果**

```
called:overloadMethod(OChild)
called:OChild=>printClassname()
----
called:overloadMethod(OParent)
called:OChild=>printClassname()
----
called:overloadMethod(OInterface)
called:OChild=>printClassname()
```
##結論
予想2. (1)～(3)はそれぞれ宣言した型のメソッドが呼ばれる
でした
オーバーロードはコンパイル時にに決定するのですね
Vim でブラウザのようにファイル間で進む、戻る操作をする方法

## 操作方法
* `<C-i>` で進む（Ctrl キーを押しながら i キーを押す）
* `<C-o>` で戻る

厳密には vim が管理するジャンプリストの行き来なので、ファイル単位の進む/戻るではないが、かなり重宝する。

ちなみにジャンプリストは vim 起動中に以下のコマンドを入力すると一覧で見ることができる。

```
:jumps (:ju でも可)
```

[意外と知らない Vim でできること](http://qiita.com/tanabee/items/a9e80aeee4261501bdd6) の一項目として紹介させていただきました！
おっさんが挑むPyStanによるMCMC～インストール編～

# 前書き

## 何のための記事か
Stanとかやったことのないおっさんが、仕事でMCMCを使ってみたいので、一から覚えるための覚書。
勉強し始めたばかりなので間違いなどあるかも。

## 目次
- Pystan のインストール
- 例題に挑戦
- 参照サイト

# 本論
## Pystan のインストール
conda 経由でインストール

pipでインストールでもよかったのですが、[Anaconda Cloud](https://anaconda.org/conda-forge/pystan)でパッケージを見つけたのでなんとなくconda経由でインストール

    conda install -c conda-forge pystan




## 例題に挑戦
[PyStan 公式サイト] (http://pystan.readthedocs.io/en/latest/index.html)にある例題を参考

### データの生成

使用するデータは、8個の学校でのコーチングの効果？に関する研究に基づくものらしい。
Jが学校数、yが効果、sigmaが効果標準偏差。yを説明できるパラメータをMCMCで求める。

    import pystan
    schools_dat = {'J': 8, 'y': [28,  8, -3,  7, -1,  1, 18, 12],
                   'sigma': [15, 10, 16, 11,  9, 11, 10, 18]}


### Stanの記述

data ブロックはデータ型と変数名の定義

parameters ブロック以降がモデルにかんする記述
平均が theta, 標準偏差が sigma の正規分布を y にあてはめる
ここで、theta = mu + tau * eta で表される線形予測子

mu は無情報事前分布(を近似した分散の大きい正規分布)
tau は正の無情報事前分布
eta は標準正規分布

定数 mu と tau を求める


thetaを直接推定するのではなく、muとtauからthetaを推定するのが、なんだかStanっぽい


    schools_code = """
    data {
        int<lower=0> J; // number of schools
        real y[J]; // estimated treatment effects
        real<lower=0> sigma[J]; // s.e. of effect estimates
    }
    parameters {
        real mu;
        real<lower=0> tau;
        real eta[J];
    }
    transformed parameters {
        real theta[J];
        for (j in 1:J)
        theta[j] = mu + tau * eta[j];
    }
    model {
        eta ~ normal(0, 1);
        y ~ normal(theta, sigma);
    }
    """

###フィッティング
フィッティングはたったの２行

    sm = pystan.StanModel(model_code=schools_code)
    fit = sm.sampling(data=schools_dat, iter=1000, chains=4)

### 結果

fit.extractで結果を辞書型で格納

    la = fit.extract(permuted=True)
    print(la['mu'])

    > [  2.26169685   7.16400113  12.47582276 ...,   0.91833614  15.98670397  11.11211459]

    la['mu'].shape

    > (2000,)


`print(fit)`でこんな感じの結果がでてくる
mu の平均が7.68で標準偏差が5.38、tauの平均が6.7で標準偏差が6.38てなってますね。

    print(fit)

    >Inference for Stan model: anon_model_cbe9cd2f1e5ab5d1c7cce1f23ca970b4.
    >4 chains, each with iter=1000; warmup=500; thin=1; 
    >post-warmup draws per chain=500, total post-warmup draws=2000.
    >           mean se_mean     sd   2.5%    25%    50%    75%  97.5%  n_eff   Rhat
    >mu         7.68    0.25   5.38  -3.72   4.36   7.64  10.83  18.47    448   1.01
    >tau         6.7    0.38   6.38   0.14   2.35   5.03   9.16  22.67    283   1.01
    >eta[0]     0.42    0.02   0.97  -1.55  -0.21   0.46   1.05   2.26   2000    1.0
    >eta[1]  -5.5e-3    0.02   0.87  -1.69  -0.56 9.7e-3   0.55    1.7   2000    1.0
    >eta[2]    -0.19    0.02   0.96  -2.15  -0.81   -0.2   0.44   1.64   2000    1.0
    >eta[3]    -0.01    0.02   0.85  -1.71  -0.55  -0.02   0.52    1.7   2000    1.0
    >...


`fit.plot()`でグラフ出力

![image.png](https://qiita-image-store.s3.amazonaws.com/0/119826/270cb0ee-3ad8-10bd-981b-7f815d4fcc52.png)

まずは動いたので今日はここまで。

# 参照サイト
今回参考にしたWebsiteなど

- [PyStanでMCMC入門](http://breakbee.hatenablog.jp/entry/2014/08/10/042440)
- [PyStan 公式サイト] (http://pystan.readthedocs.io/en/latest/index.html)
- [Anaconda Cloud](https://anaconda.org/conda-forge/pystan)
Mac Python環境構築を調べてみた


##動機
この数年で機械学習が大きく進んだのはなぜだろうかと思っていたところ、phthonを使って丁寧に解説した本に出会えました。[ゼロから作るDeep Learning
――Pythonで学ぶディープラーニングの理論と実装](https://www.oreilly.co.jp/books/9784873117584/)。
　anacondaをご推薦ということですので、早速Mac君に実行環境をつくろうとしたのですが、google先生やQiitaで調べてみたものの、皆様おすすめがまちまちで、正直よくわからない。いろいろ調べましたが、自分の場合は、直接anacondaをインストールすることにしました。

## 記事から勉強

### Anacondaとは何だろう。
[原点](https://www.anaconda.com/what-is-anaconda/)にあたると、AnacondaはThe Most Popular Python Data Science Platformで、Anaconda Partners, Anaconda Enterprise,Anaconda Distrubution, Anaconda Supportなどを包含する。その核となるのがAnaconda Distrubutionで、データサイエンスのパッケージとcondaパッケージ、Windows, Linux, MacOSの仮想環境マネージャを含む。（知っている人にはよくわかるんだろうなという解説。）

ざっくりいうと、データサイエンス用のPythonライブラリとそれを管理してくれるツール。

参考：[t2y,"Anaconda は Environment Isolation Tool (環境分離ツール) ではない",Qiita,2016/11/12](http://qiita.com/t2y/items/dd6d7f9c70ac2b8a79da) Anacondaとは何か解説してあります。
　Anacondaは、Open Data Scienceのためのディストリビューション。ディストリビューションは、ソースやバイナリを配布するために、パッケージ管理システムをもつ。
　パッケージ管理には、システム管理のためのパッケージ管理と、アプリケーションに必要なものをユーザー領域に構築するアプリケーションのためのパッケージ管理がある。(ana)condaは、Open Data Scienceやデータサイエンスのコラボレーションなどの促進を意図したアプリケーションのためのパッケージ管理ツール。
　
### Anacondaの問題点
　なお、sibukawa氏の記事によれば
> Anacondaの/binをパスに設定するのですが、Anacondaがなかで持っているツール(openssl/curl/python)がOSの持っているツールを覆い隠してしまいます。

とのことですが、アンインストールも簡単らしいので、このままが楽かも。
### 手順など
[t2y,"Anaconda で Python 環境をインストールする",Qiita,2017/2/4](http://qiita.com/t2y/items/2a3eb58103e85d8064b6)

### PyEnv
[shibukawa,"pyenvが必要かどうかフローチャート",Qiita,2017/9/3](http://qiita.com/shibukawa/items/0daab479a2fd2cb8a0e7)
Environment Isolation Tool(環境分離ツール)というカテゴリの開発補助ツールがある。
venv/virtualenv　
　
##それでどうしたのか
anaconda をそのままインストールした。
※注意１インストール後、shからpythonをたたくと、システムのpythonの代わってanacondaのpythonが起動する。
　早速、エディタを起動する。

```sh:start
ipython notebook
```


##資料

|カテゴリ|name|概要|特長/注意|
|:--|:--|:--|:--|
|Macパッケージ管理|Homebrew|||:+1:|
|バージョン管理|pyenv|pythonのバージョン管理|2と3両方入れて切り替えられるが、変えない人には手間が増える|
|環境管理|virtual-env|
|ディストリビューション|anaconda|python+パッケージ|PATHの登録順に注意|
|パッケージ管理|conda|anaconda用||
|パッケージ管理|pip|python一般||


環境構築例

|記事|パッケージ|環境管理|distribution|ライブラリ管理|ライブラリ|機械学習<br>ライブラリ|エディタ|IDE|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|
|[吉崎](http://qiita.com/yoshizaki_kkgk/items/4663148a2b3ca078ddbc)|homebrew||python3|pip|numpy,<br> scipy, <br>matplotlib, pandas|scikit-learn, chainer, jupyter|atom||
|[shizma](http://qiita.com/shizuma/items/027167c6257f1c9d2a6f)|homebrew|pyenv, virtualenv|anaconda|pip|||ipython notebook|
|自分|なし|なし|anaconda|conda|適宜|適宜|ipython notebook
間違えたソースコードをGit Pushしてしまった　過去に戻りたい

git reset --hard コミットid
↓
ワーキングツリー　index head がコミットidに戻る
↓
git push　-f (-fで強制的に)

全て元通りハッピー

ちなみに-fをつけずにpushするとエラーが出る。
とはいえ-fは危険なのでお気をつけください
Excelで佐々木希を描く with Ruby

## 元ネタ
[Excelで佐々木希を描く with python](http://qiita.com/Algebra_nobu/items/4e2b36bdb38434e183de)

## 環境
OS X ElCapitan 10.11.5
ruby 2.0.0p648 （macのデフォルト）

## 準備
terminalにて
画像処理のための `rmagick`とExcel操作の為の `rubyXL`というgemをインストールします

```bash:terminal
$ gem install rmagick
$ gem install rubyXL
```

## ソースコード

```ruby:draw_excel.rb
require 'rubyXL'
require 'RMagick'

img = Magick::ImageList.new(ARGV[0])

# Excelを作成し、最初のシートを選択
book = RubyXL::Workbook.new
sheet = book[0]

img.each_pixel do |pixel, y, x|

  # ピクセル色を16進数で取得
  color = pixel.to_color(Magick::AllCompliance, false, img.depth, true)
  color.delete!('#')

  # 塗りつぶし
  sheet.add_cell(x, y, '')
  sheet.sheet_data[x][y].change_fill(color)

  # 行、列の幅変更
  sheet.change_column_width(x, 0.01)
  sheet.change_row_height(y, 5)
end

file_name = File.basename("#{ARGV[0]}", '.*')
book.write("#{file_name}.xlsx")
```


## 実行

```bash:terminal
$ ruby draw_excel.rb sasaki.png
```


## 完成品
元データ
![enter image description here](https://lh3.googleusercontent.com/-tVeU-ifHBhg/WNu9udiAW4I/AAAAAAAAAEw/L0KYGnGhyKY8aCWRYyouCJoQ4neodmL_ACLcB/s0/sasaki1.png "sasaki1.png")

## 出力
![enter image description here](https://lh3.googleusercontent.com/-2moWdy89vnM/WNu90V-zN9I/AAAAAAAAAE4/9hMrRqoRzvE6CfUXrKswX-DgwxI_Qid1wCLcB/s0/sasaki2.png "sasaki2.png")

### 拡大
![enter image description here](https://lh3.googleusercontent.com/-zC6o7lK2bsY/WNu95P07ZhI/AAAAAAAAAFA/DRO1eN9AgggAP9M6f1mTs9TKKVSZ-X-UwCLcB/s0/sasaki3.png "sasaki3.png")

おおー！（感動）
rails sしようとしたらAddress already in useと言われた

## 起きた問題
いつも通り`rails s`でローカルサーバーを立ち上げようとしたら

```sh
$ rails s
=> Booting WEBrick
=> Rails 4.2.5 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
=> Ctrl-C to shutdown server
[2017-03-16 15:48:31] INFO  WEBrick 1.3.1
[2017-03-16 15:48:31] INFO  ruby 2.3.1 (2016-04-26) [x86_64-darwin16]
Exiting
/Users/kenichi/.rbenv/versions/2.3.1/lib/ruby/2.3.0/socket.rb:205:in `bind': Address already in use - bind(2) for 127.0.0.1:3000 (Errno::EADDRINUSE)
	from /Users/kenichi/.rbenv/versions/2.3.1/lib/ruby/2.3.0/socket.rb:205:in `listen'
	from /Users/kenichi/.rbenv/versions/2.3.1/lib/ruby/2.3.0/socket.rb:759:in `block in 
.
.
.
```

どうやら3000番ポートが既に使われているみたいですね。

```
Address already in use - bind(2) for 127.0.0.1:3000 (Errno::EADDRINUSE)
```

## 解決法

まずプロセスの状態を確認

```shell-session
$ ps ax | grep rails
kenichi          12661   0.0  0.0  4267752    880 s003  S+   11:11PM   0:00.00 grep ... rails
kenichi          69441   0.0  0.0  4295984   1784 s001  S+   11:11PM   0:00.32 /bin/sh ...
```
やっぱり使われてました。

`kill`コマンドを使ってプロセスを止めてあげましょう。
`−9`の後に、プロセスの番号(今回は12661)を指定してあげるとプロセスを停止させることができます

```shell-session
$ kill -9 12661
```

これでいつも通り`rails s`できるようになりました。
今の課題感覚1


* ES6に慣れていない
	* いつかは覚えるべきだろう
	* できれば選定段階では慣れていない状態で済ませてしまって、実装条件が揃ったところで慣れつつ学習していきたい
* Reactに慣れていない
	* 細かいテクニックはともかく、全体像や個別概念、実装感覚などをイメージできるようになった方がいい
* Reduxに慣れていない
	* 細かいテクニックはともかく、全体像や個別概念、実装感覚などをイメージできるようになった方がいい
* 非構造を扱うイメージを仮で持っているが、新たなソリューションとの付き合わせで矛盾が生じてその度に迷う
	* try and errorしかないと諦める面はある
	* 情報処理の能力の不足
	* 固めるべきところは固めるしかない面はわかる
* シンプルな実装にするか高機能な実装にするか
	* 完全な回答はもっていないが、高機能すぎると現状では対処できないため、シンプルなほうを選択した方がいい
	* スピードは鈍るが、、せっかくなので高度な実装についてもかじる、グダグダするのでモチベーション維持も大事になる
* 外部ライブラリを探しては、良し悪し（機能性 OR 拡張性とか）に振り回される
	* ライブラリなどのコードリーディングについて、手法やコツ、気をつけている点など一般論を聞ければ聞く
	* ライブラリを評価する軸、分析や思考のフレームワークをもっていると効率がいいかもしれない
* もうだめだー。っと思った時の対処法
	* 休む
	* 遊ぶ
	* 体調を整える
	* 基本に立ち返ってモチベーションを高める
	* きっかけを探す
	* 力を込める
* 仮想domと通常のdomの使い分けについて。
	* 仮想DOMは文字列ほど操作が簡単じゃない気がしているがどうなんだろう、慣れや知識不足によるものなのか
* 大きめのjsonを柔軟に扱えるjsのライブラリをしりませんか。（枝の付け替えや置換、入れ替えなど）
	* 仮想DOMと同じく文字列操作の方が馴染みがある、場合によるのだと思うけど
	* メリットや可能性を模索しつつ代替案や妥協案を模索、、このプロセスに消耗してしまうのは未熟なのかな