OmniAICreator/Qiita-1.07M huggingface dataset:
react-routerとreact-router-reduxの組み合わせが動かなくなったときの対処法

## 問題発生の経緯
npmパッケージのアップデートをした際に、画面が表示されなくなった。エラーメッセージは下記の通り。

```
TypeError: Cannot read property 'listen' of undefined
```

発生箇所は下記。

```
unsubscribeFromHistory = history.listen(handleLocationChange);
```

上記はreact-router内部の処理。実際に自分で書いたソースまで遡ると下記。
historyを作るときにコケていた。

```
const history = syncHistoryWithStore(browserHistory, store);
```


## バージョンの確認
インストールしていたreact-router, redux-routerのバージョンは下記のとおりだった。

```
"react-router": "^4.1.1",
"react-router-redux": "^4.0.8",
```

## 対処法
4系のreact-router-reduxを使っている場合、react-routerを3系に落としてやると正しく動くようになる。

```
"react-router": "^3.0.5",
"react-router-redux": "^4.0.8",
```


## 参考リンク
githubのissueで解決策が示されていた。
https://github.com/reactjs/react-router-redux/issues/348
『.gitignore』を一瞬で作るメモ

Swiftでアプリ作ろうとしてた時、GitHubを使って『.gitignore』ファイルを一瞬で作れることを（今更ながら）発見したのでメモします。

# 『.gitignore』って何？

gitでバージョン管理をする際に、対象から外すファイルを指定するものです。
例えばキャッシュのファイル等、いちいち変更をコミットしたくないファイルを無視できます。

（.gitignoreそのものについての詳細や、書き方などはいろいろと文献があると思うので割愛します。）

# 簡単に作るには？

まず、GitHub上で様々な言語に対応したテンプレートが公開されています。

[github/gitignore - GitHub](https://github.com/github/gitignore)

しかし、これを毎回見なくても<b>自分のリポジトリ内で一瞬でテンプレートを使用できます</b>！！！！！

## 一瞬で作る方法

1. GitHub上で、gitignoreを作成したいリポジトリページへ行き、『Create new file』をクリック。
![20170606213738.png](https://qiita-image-store.s3.amazonaws.com/0/132358/797dc045-376a-143c-152e-d08110e62b13.png)

2. ファイル名を『.gitignore』と記述する。
![20170606214130.png](https://qiita-image-store.s3.amazonaws.com/0/132358/6f2da895-c2c5-fa91-ef6a-d7db4aaa5b09.png)

3. ファイル名の右側に『What to use a .gitignore template?』という記述が現れ、言語を選択できるようになる。  
![20170606214519.png](https://qiita-image-store.s3.amazonaws.com/0/132358/1e85e3fc-6a4e-ae12-3add-c2f846c38772.png)

4. 自分の使用する言語（もしくは環境）を選択すると、勝手に<b>テンプレートを適用してくれる</b>！

5. テンプレートから過不足部分を変更する。

6. コミットメッセージを入力し、『Commit new file』をクリック。

以上の手順で、その言語に対応したテンプレートの.gitignoreファイルを作成できます！
<b>便利！！！！！</b>

今までずっとテンプレート検索してローカルで作成していたのですが、こっちの方がすぐできそうでした。

ただし、テンプレート内容で自分の必要なものがまかなえるかはわからないので、
コメント内容等参考にしつつ、変更や追加は多少すると良いのかなと思いました。
Python - CGIHandlerでのflask_socketioの実行について

Teratailで回答をいただくことができなさそうなので、こちらに再投稿します・・・。

## 前提
Python 3.6.1
サーバー：さくらレンタルサーバー
フレームワーク：Flask, flask_socketio

## 困っていること
さくらのレンタルサーバーで、CGIを実行してサイトを立ち上げることはできましたが、socketioを使ったリアルタイム通信をどのように実現するのか、よくわかりません。

### index.cgi
こちらは通常のindex.cgi。

```python
from wsgiref.handlers import CGIHandler
from main import app,  # socketioにしたい
CGIHandler().run(app) #ここの部分
```

### main.py

```python
from flask import Flask, render_template, request, redirect
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hoge'
socketio = SocketIO(app, async_mode=None)

#以下略
```


## 試したこと
index.cgi

```python
from wsgiref.handlers import CGIHandler
from main import socketio
CGIHandler().run(socketio)
```

```python
from wsgiref.handlers import CGIHandler
from main import app, socketio
CGIHandler().run(socketio.run(app))
```

```python
from wsgiref.handlers import CGIHandler
from main import app, socketio
socketio.run(app,host='0.0.0.0')
```

等、、、

このindex.cgiについて、正しい書き方をご存知の方いらっしゃいましたら、ご教授ください。

よろしくおねがいいたします。
Androidの画面キャプチャを高速化するための試行錯誤

## 目的
- Android端末の画面キャプチャを高速で行いたい．
    - 昨今スマホゲームの1ジャンルである音ゲーの自動テストを行うため
    
## 問題点
- 従来手法：adbコマンドからscreencapコマンドを使用
    - 画面のFullHD化に伴い，キャプチャーから転送までに非常に時間がかかるようになってしまった．
    - 下手するとキャプチャから画像を引っ張ってくるのに2秒ぐらいかかる．~~これでは音ゲーのテストが出来ない.~~


## 試行錯誤

###### [Android Screen Monitor](http://www.adakoda.com/adakoda/android/asm/)
- adakoda様が制作されたものですが，開発が4年前で止まっていること，また当初想定された画面サイズから現在かなり肥大化したためキャプチャが追い付かないことなどから断念．
   
###### HDMI Capture Deviceの利用
- [JaSST'17のCygames様の発表](http://tech.cygames.co.jp/archives/2983/)を拝見させていただき，MHL経由でのHDMI Captureによる画像取得に思い至る．しかしながら， ~~筆者がC#書けないヘタレであること~~ HDMI Capture Device自体が高価であること，また複数台接続に不安があることから，本手法を断念．

## 解決案
- CyberAgent様が以前発表された[Smartphone Test Farm (OpenSTF) ](https://openstf.io/)の技術として，[minicap](https://github.com/openstf/minicap)というのがあるらしいのでこれをどうにかして使えないだろうか，と考える．
- ~~筆者はJavaScript書けないヘタレであるため~~ ゆくゆくはOpenCVとの連携も視野に入れるため，Pythonでの実装を考えることにする．

## んで．
- [作ってみた](https://github.com/setsulla/minicapy)．
- minicapと通信する部分は，中国の方が作成されたものをそのまま流用させていただいた．
    - http://www.jianshu.com/p/f8b8123cd062

## 実装
- [stream.py](https://github.com/setsulla/minicapy/blob/master/minicapy/stream.py) がminicapプロセスからのデータを取得する部分で，データの解析部分になる．
    - データの説明については[本家](https://github.com/openstf/minicap/#usage)が一番であるため割愛
- 画像データ取得後，処理を行っているのはsample project の [minicap.py](https://github.com/setsulla/minicapy/blob/master/sample/minicap.py) で，取得した画像データをOpenCV形式に変換している．

## 感想
- 画面キャプチャが速くなったのはいいが，画面をタップしたりフリックしたりする動作がadb経由で遅いままなのでそっちを改善しないといけなくなった．

## 参考
- https://github.com/openstf/minicap
- http://www.jianshu.com/p/f8b8123cd062
- http://www.ctolib.com/AutomatorX.html
OpenCV3で起きたErrorとその解決方法　MacでOpenCV3を使うときの注意点

# 問題点
ministによる学習を一通りやって、好きな画像でやるぞ！　と思った矢先に起きたError（恐らくMac限定)

```deep_learning_test.py
train_img_dirs = ['T','F']
train_image = []
train_label = []

for i, d in enumerate(train_img_dirs):
    # ./data/以下の各ディレクトリ内のファイル名取得
    files = os.listdir('./data/' + d)
    for f in files:
        # 画像読み込み
        img = cv2.imread('./data/' + d + '/' + f)
        img = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
        # 1辺がIMG_SIZEの正方形にリサイズ
        img = cv2.resize(img, (IMG_SIZE, IMG_SIZE))
        # 1列にして
        img = img.flatten().astype(np.float32)/255.0
        train_image.append(img)

        # one_hot_vectorを作りラベルとして追加
        tmp = np.zeros(NUM_CLASSES)
        tmp[i] = 1
        train_label.append(tmp)
```
これをコンパイルすると...
```
OpenCV Error: Assertion failed (scn == 3 || scn == 4) in ipp_cvtColor
```
に陥る。　なんでや
# 原因
https://stackoverflow.com/questions/20822288/python-opencv-cv2-opencv-error-assertion-failed-scn-3-scn-4-in-unkno
によると
print(img.shape)を実行してみて結果がNone typeになっていると画像が正しく読み込めていないらしい。
そこでprint(d)とprint(f)をして、読み込んだディレクトリとファイルを表示してみると
``` 
$ T
$ .DS_Store
```
が出てきた。　ディレクトリは正しく読み込めているが、ファイルに例のアレが入ってる。 .DS_Storeが読み込まれているせいで、うまく実行できていなかった。


.DS_Storeとは
アイコンの位置や表示設定などのフォルダ表示設定に関するメタデータを記録するための隠しファイル。Finder上でもリモートシステム上でもアクセスするすべてのフォルダに.DS_Storeファイルが作成されている。



#解決方法
個別のディレクトリの.DS_Storeを削除

```
find Desktop/対象のディレクトリ -name ".DS_Store" -print&nbsp; -exec rm {} ";"
```

全部削除

```
sudo find / -name ".DS_Store" -delete
```

今後作成しない

```
defaults write com.apple.desktopservices DSDontWriteNetworkStores True
```

あと、MacForkCleanerというアプリで簡単に消せる。

# 最後に
初めてのOpenCVで、書き方とか画像の形式が誤っているのかと思ってかなり悪戦苦闘してしまった。（調べても全然出てこない）
MacOSを使ってて同じ現象に陥った人の参考にして欲しい。.DS_Storeは隠しファイルなので自分はパット見だと気づかなかった。他の人は経験とかで気づくのかな？

#参考サイト
macから.DS_Storeを消しさる
http://qiita.com/supersnack/items/157b69589e36f340bb29
.DS_Storeの仕組みと削除＆作成しないよう設定する方法
http://uxmilk.jp/48160
Python-OpenCV cv2 OpenCV Error: Assertion failed (scn == 3 || scn == 4) in unknown function, file ..\..\..\modules\imgproc\src\color.cpp
https://stackoverflow.com/questions/20822288/python-opencv-cv2-opencv-error-assertion-failed-scn-3-scn-4-in-unkno
vimで編集完了時にコンパイルを自動設定する

### 対象
- vimが好き
- コンパイルが面倒
- シェルで作業してる人

### 概要
latexやsassなど主にコンパイルが面倒なものは自動コンパイルがそもそも実装されています。
latexであれば
`$ latexmk -pvc sample.tex`
sassであれば
`$ sass --watch sample.scss:sample.css`
しかし、毎回編集を行う前に打ち込むのは面倒。
今回はコンパイルを自動化していきます。

## vimでファイルタイプごとに設定を分ける。
vimには拡張子ごとに設定ファイルを分ける機能が標準装備されています。
filetypeを指定することによってそれが可能になります。
詳しく知りたい方は[公式リファレンス](http://vim-jp.org/vimdoc-ja/usr_43.html#filetype-plugin)をクリックしてみてください。
今回は拡張子がtexとscssのものを扱っています。

```vim:~/.vimrc
filetype plugin on
augroup fileTypeSet
    autocmd!
    autocmd BufNewFile,BufRead *.scss setfiletype scss
augroup END

let g:tex_flavor='latex'
```

vimのaugroup内でファイルを自動で開いた時の設定を記述することができます。上記のようにすると拡張子がscssの場合、filetypeとしてscssを読み込む。という意味になります。
またtexをfiletypeとして指定するとき一つ注意点があり、texは元々vimのグローバル変数の設定からfiletypeを振り分けることができるようになっています。
だから新しく追記する代わりに変数に代入してやります。

vimはruntimepathに設定しているファイルを読みに行くのでここはおとなしく標準で設定されている~/.vim/ftplugin以下に拡張子ごとの設定ファイルを置いていきます。
ftpluginはなければ自分で作成します。sassの例を加えるならば以下の二つを追加します。

- ~/.vim/ftplugin/scss.vim
- ~/.vim/ftplugin/tex.vim

## 設定を記述する

vimではコマンドラインモードで:!を用いることによってシェルのコマンドを実行することができます。ファイル保存時にlatexをオートでコンパイルするようにしました。%:pには編集ファイルのフルパスが入ります。

```~/.vim/ftplugin/tex.vim
autocmd BufWritePost * :lcd %:h |:!latexmk %:p
```

これはこれで動いたのですがここで僕はそもそもこんな少量でいいんだったらそのままvimrcにかけばよくね？となりました。

## 最終的な着地点

現在僕のvimrcはこのようになっています。
Rとlatexとc言語のコンパイルを行えるようにしています。

```vim:~/.vimrc
filetype plugin on
augroup setAutoCompile
    autocmd!
    autocmd BufWritePost *.tex :lcd %:h | :!latexmk %:p
    autocmd BufWritePost *.c :lcd %:h | :!gcc %:p
    autocmd BufWritePost *.R :lcd %:h | :!R -f %:p
augroup END
```

これでvimrcが強くなりました。
ftpluginの存在を知れてよかったです。
AzureAutomationを利用して、仮想マシンを平日の日中だけ起動する。

## AzureAutomationについて
AzureAutomationとは、Azure上でPowerShellを実行する自動化ツールです。
ポータル上からAzurePowerShellを実行し、各種リソースを管理の自動化を簡単に実装できます。
どれくらい簡単かというと、行数の多いPowerShellを書くのが苦手な方もグラフィックPowerShellという仕組みを利用することでマウス操作でスクリプト(※AutomationではRunbookと呼びます)を組むことが出来る程度には簡単です。

## Azureの料金について
AWSやAzureは仮想マシンを起動したままだと料金が発生します。
当然といえば当然ですが、テストで作成したり削除し忘れたりということが時間とともに増えていきます。
人員の出入りも多くなると「よくわからないけど起動している」というリソースだらけになり利用料金の浪費に繋がります。
そうしたことへの対策の一つとして、開発環境の仮想マシンなどを必要なとき以外利用停止状態にするなどの処置にAzureAutomationが利用できるというわけです。
以下の内容では平日のみ仮想マシンを起動・停止するAutomationのRunbookを設定する方法を解説します。

## 平日の夜間に仮想マシンを停止する手順

### AzureAutomationのリソースを作成する
新ポータル上のプラスボタンからAutomationのアイコンを探します

![automation3.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/f9be60a4-3703-e0df-173b-4450540de6ba.png)

リソース名などを決め作成します。
「Azure実行アカウントの作成」は「はい」で大丈夫です。
Azure実行アカウントは、いわばAutomationを実行させるだけのアカウントだと思ってください。
![automation4.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/ad9fdb8e-07a7-72aa-1ee1-2f5217d4042f.png)

### Automationの中身
上の項目で作成したAutomationリソースをクリックします。
色々表示がありますが、まずは「Runbook」「資産」の２つだけ把握してください。
<img width="440" alt="8e42c59b-1ade-45af-caef-ba8bdbaf5cd7.png" src="https://qiita-image-store.s3.amazonaws.com/0/123580/eb04f0e5-42db-4c4f-9eda-848213da17f1.png">


### 「資産」

+ スケジュール
+ 「モジュール」 AzurePowerShellの各種モジュールが標準で入っています
+ 「証明書」「接続」　先程の実行アカウントに「はい」をつけた場合、初期設定でそれぞれ２つ作成されます
+ 「資格情報」　PowerShellでパスワード情報などを入力する場合に事前に「資格情報」として格納し、後ほど引数にします。
+ 「変数」　以上のものがもっと汎用的になったものが「変数」です 

### 「Runbook」を作成する
先程の画面でRunbookをクリックし、「ギャラリーを参照」をクリック。今回は一般に公開されているRunbook(レシピ)を導入します。

「StopAzureV2VMs」「StartAzureV2VMs」の２つを導入します。
この記事では、仮想マシン停止の「StopAzureV2VMs」についてのみ触れます。
クリックして、インポートします。
![automation8.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/03a782d3-4f71-5d08-406a-3444816a301b.png)

### Runbookの編集
「編集」をクリックし、グラフィックRunbookを展開します。

![automation10.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/e2d68828-68e0-5023-b9f6-de0671122181.png)


青い四角が各種PowerShellコマンドレットで、
矢印はパイプラインやシーケンスでコマンドレット同士を繋ぎます。左のサイドバーよりPowerShellコマンドレットや設定した「変数」などをキャンバス上に呼び出すことができます。
今回はありもののRunbookを取ってきただけなので、「入力と出力」をクリックしましょう。
![automation11.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/78f6ff28-7056-f4fb-e84b-76f66a8e93ad.png)
このRunbookでは自分の所有する仮想マシンのリソース名と仮想マシン名を画像のように入力すれば良いです。

その後、「保存」→「発行」します。

### スケジュール化する。
仮想マシン停止のRunbookの設定を終えたので、
平日の日中のみ起動するスケジュールを付与します。
「スケジュール」をクリック
![automation12.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/53ad8e19-3d1d-b400-981b-5b8637182368.png)

実行開始する日時を設定する。
一回のみのスケジュールか、定期的なスケジュールかを選択できます。
「定期的」の場合、「時間」「日」「週」「月」で選択可能です。
![automation13.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/01e5c637-643b-9310-d0c9-cdd320b64a55.png)

今回は平日のみのスケジュールに設定するので、「週」を選択する。
繰り返しオプションで、平日のみにチェックいれる。

![automation14.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/376ddb0f-b5ea-e4f3-ea7d-bbdf9d8e1ac7.png)

停止したいVMのパラメータを設定する。
先程設定した値でいいなら、そのままで良い。

![automation15.PNG](https://qiita-image-store.s3.amazonaws.com/0/123580/d021152a-6e95-a359-1107-85506ce0884a.png)

### 後は設定したスケジュールを待ちましょう！！
起動についてもほぼほぼ同じ要領です。
Electronをいじってみる3

[Electronをいじってみる2](http://qiita.com/maron8676/items/8392778abe1a6e7e9383)で残っていた問題（期待通りのメニューバーが出ない）が解決したので投稿

解決方法としては、予想通り自分でメニューバー設定をすることだった。
長いけど全部載せておく。前回と変わったところとしては、template変数の定義とそれを使ってメニューバー設定をするところ。

```main.ts
///<reference path="./typings/index.d.ts"/>

// In the main process.
const { app, BrowserWindow, Menu } = require('electron')

const template: Electron.MenuItemOptions[] = [
    {
        label: 'Edit',
        submenu: [
            { role: 'undo' },
            { role: 'redo' },
            { type: 'separator' },
            { role: 'cut' },
            { role: 'copy' },
            { role: 'paste' },
            { role: 'pasteandmatchstyle' },
            { role: 'delete' },
            { role: 'selectall' }
        ]
    },
    {
        label: 'View',
        submenu: [
            { role: 'reload' },
            //      {role: 'forcereload'},
            { role: 'toggledevtools' },
            { type: 'separator' },
            { role: 'resetzoom' },
            { role: 'zoomin' },
            { role: 'zoomout' },
            { type: 'separator' },
            { role: 'togglefullscreen' }
        ]
    },
    {
        role: 'window',
        submenu: [
            { role: 'minimize' },
            { role: 'close' }
        ]
    },
    {
        role: 'help',
        submenu: [
            {
                label: 'Learn More',
                click() { require('electron').shell.openExternal('https://electron.atom.io') }
            }
        ]
    }
]

app.on('window-all-closed', () => {
    app.quit()
})

app.on('ready', () => {
    let win = new BrowserWindow({ width: 800, height: 600 })
    // load a local HTML file
    win.loadURL(`file://${__dirname}/index.html`)
    console.log(app.getAppPath())
    const menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)
})
```

#### つまったところとしては2つあって
#### 1. 見つけてきたメニューバー設定のサンプルをそのまま設定したら型エラーでコンパイルに失敗した
見つけたサンプルがJavaScriptのものなのでクラスがついておらずエラーになってしまった。
electron/index.d.tsを見に行ってMenu.buildFromTemplateの引数の型をtemplate変数に設定した。
といっても定義に対して型名をどう書くのかわからなかったので、以下のサイトを参考にした
>TypeScript の型定義ファイルと仲良くなろう
>http://developer.hatenastaff.com/entry/2016/06/27/140931

#### 2. 見つけてきたメニューバー設定のサンプルが型定義と合っていなかった  
`// {role: 'forcereload'},`のコメントを外すとコンパイルに失敗する。

型エラーが出たから再度electron/index.d.tsを見に行ったら
'forcereload'はMenuItemRole型のパターンの中になかったという。

とりあえず基本的なことはそろったと思うので、いったんソースをまとめておこうと思うけど後日に。
VirtualBox上のArch LinuxでNATとホストオンリーアダプタを併用しようとしてハマった話

# やりたかったこと
VirtualBoxに立てたArchLinuxで、NATとホストオンリーアダプタを併用する。
NATはDHCPでIPアドレスを取得して、
ホストオンリーアダプタは固定IPで利用したかった。

# 解決方法
netctlのプロファイルを作ってネットワークインタフェースを設定するときは、dhcpcdを無効化する。
いずれかのインタフェースでdhcpcdを使いたいときは、netctlのプロファイルからDHCPの設定を行う。

# ハマったところ
ホストオンリーアダプタ（以下インタフェース名のenp0s8と記載）用のプロファイルをきちんと設定しているにも関わらず、下記のようなエラーが解消できなかった。

```
network[281]: The interface of network profile 'enp0s8' is already up
```

[Wiki](https://wiki.archlinuxjp.org/index.php/Netctl#Job_for_netctl.40wlan.28....29.service_failed)に書いてあるように、インタフェースをdown→プロファイルをrestart→インタフェースをupという手順を踏むとプロファイルが動き始め、固定IPをきちんと取得出来る。
しかし、マシンを再起動などすると、またエラーになってしまう。

# 原因
原因も[Wiki](https://wiki.archlinuxjp.org/index.php/Netctl#.E5.9F.BA.E6.9C.AC.E7.9A.84.E3.81.AA.E6.96.B9.E6.B3.95)に書いてありました…

>ただし、netctl はネットワークインターフェイスデバイスが既に起動している場合 (例えば dhcpcd を使っている場合) はプロファイルを実行しません。

NATのアダプタはDHCPでIPを取得して欲しかったために、dhcpcdを有効にしていたのが原因でした。

# 解決
最終的に以下のようなプロファイルを作成し、所望の動作が得られました。
ホストオンリーアダプタの方でGatewayなどを設定するとルーティングがおかしなことになるので注意。

```plain:/etc/netctl/enp0s3
Description='VirtualBox NAT Network'
Interface=enp0s3
Connection=ethernet
IP=dhcp
```

```plain:/etc/netctl/enp0s8
Description='VirtualBox Host-only Network'
Interface=enp0s8
Connection=ethernet
IP=static
Address=('192.168.56.56/24')
#DNS=('192.168.56.1')
#Routes=('192.168.0.0/24 via 192.168.1.2')
#Gateway='192.168.56.1'
```

# 結論
ArchLinuxのWikiはやっぱり最強だった。

# 参考
* [netctl - ArchWiki](https://wiki.archlinuxjp.org/index.php/Netctl)
* [[SOLVED] NAT + Host-only network in VirtualBox / Networking, Server, and Protection / Arch Linux Forums](https://bbs.archlinux.org/viewtopic.php?id=138754)
Scalaで指定した期間内の日付・時間を列挙する

https://stackoverflow.com/questions/30166507/iterate-over-dates-range-the-scala-way
ここに掲載されていたものを少し手直しした

``` main.scala
import org.joda.time._

object Main extends App {
  import IntervalIterators._

  val start = LocalDate.now().toDateTimeAtCurrentTime
  val end = LocalDate.now.plusDays(10).toDateTimeAtCurrentTime

  val interval = new Interval(start, end)
  interval.iterateByDay.foreach(println)
  interval.iterateByHour.foreach(println)
}

object IntervalIterators {
  implicit class ImplicitIterator(val interval: Interval) extends AnyVal {
    def iterateBy(step: Period): Iterator[DateTime] = Iterator.iterate(interval.getStart) { _.plus(step) }
      .takeWhile(_.isBefore(interval.getEnd))

    def iterateBy[A](step: Period, transform: DateTime => A): Iterator[A] = iterateBy(step).map(transform)

    def iterateByDay: Iterator[LocalDate] = iterateBy(Period.days(1), { _.toLocalDate })

    def iterateByHour: Iterator[DateTime] = iterateBy(Period.hours(1))
  }
}
```
Git初心者がGitのリモートブランチをANZENに消す方法

## これはなに？
Gitのリモートブランチを消したいときってあるよね？
例えば、[リモートブランチにプッシュしたらrejectされて悲しいとき](http://qiita.com/makua/items/aacf510172ebb0ff0fba)とか。
でもコマンドラインがちょっと怖い新人なので、コマンド使いたくない時が来るんですよ。

## ググれ。
って言うでしょ？でもググッた結果何が出てくるって[こういうやつ](http://qiita.com/yuu_ta/items/519ea47ac2c1ded032d9)なのだ。
> $ git push --delete origin branch_name
> $ git push origin :branch_name

確かに消えるけど、初心者からしたらほとんどforce pushと同じくらいの危なさで怖いんです。(慣れている人はそれでいいと思います。)

## じゃあどうするの？
ぼくたちが安心するのはコマンドではなくてマウスの操作なのです。
なので、**GitHubの標準機能を使おう**。
(GitHub以外もおんなじ機能があるはず。たぶん)

 1. まずはリポジトリのbranchesをクリックする
    * ![スクリーンショット_2017-06-08_2_16_33.png](https://qiita-image-store.s3.amazonaws.com/0/171564/b6838b90-e069-d8dd-e743-519a4b446a71.png)

 2. 自分がpushしたブランチを削除する
    * Your branchesを見に行くと見つけやすい。チームのときはね。。
    * ![スクリーンショット_2017-06-08_2_16_53.png](https://qiita-image-store.s3.amazonaws.com/0/171564/7d146ce6-60af-a7fc-1db1-3849b5ce1f93.png)
Emacs25.2へのアップデート

ubnut16.04でemacs24.5から25.2へアップデートした時のメモ。

まずはソースをダウンロードして解凍する。

```shell-session
wget http://ftp.jaist.ac.jp/pub/GNU/emacs/emacs-25.2.tar.gz
tar -zxvf emacs-25.2.tar.gz
cd emacs-25.2/
```

とりあえず普通に./configureを実行する

```shell-session
./configure
~略~
configure: error: You seem to be running X, but no X development libraries
were found.  You should install the relevant development files for X
and for the toolkit you want, such as Gtk+ or Motif.  Also make
sure you have development files for image handling, i.e.
tiff, gif, jpeg, png and xpm.
If you are sure you want Emacs compiled without X window support, pass
  --without-x
to configure.

```
というエラーが出た。調べると以下の解決策がヒット。
http://royontechnology.blogspot.jp/2012/06/installing-emacs-241.html
これにしたがって必要なパッケージをインストールしてやり直す。

```shell-session
sudo apt install libgtk2.0-dev libtiff5-dev libgif-dev libpng12-dev libxpm-dev libncurses5-dev
./configure
~略~
configure: error: The following required libraries were not found:
     libpng
Maybe some development libraries/packages are missing?
If you don't want to link with them give
     --with-png=no
as options to configure

```

またエラーがでた。PATHにpythonのAnacondaのパスが設定されているとこのエラーが出るらしい。パスの設定をして再度挑戦。

```shell-session
export PATH="/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"
./configure
```
これでうまくいった。あとは

```shell-session
make
sudo make install
```
で完了。

emacsを起動して
```
M-x emacs-version 
```
としてversionを確認してみる。
コンピューターでの微分

参考：[ゼロから作るDeep Learning(p98 4.3.1)](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585)

関数fのx点での微分がしたい時どうすればいいか？
数学の公式のように計算してみると以下のようになる。

```
＞この計算ができたら理想
＞だけど丸め誤差のせいでnp.fload32(10e-50)=0.0になってしまう。
def numerical_diff(f, x):
  h = 10e-50
  return ( f(x+h) - f(x) ) / h
```

なので、以下のようにする。

```
def numerical_diff(f, x):
  h = 1e-4 # 0.00001
  return ( f(x+h) - f(x) ) / h
```

しかし、これだとx点と(x+h/2)点の差が0.00001ある。
その間の点(x+0.000005)の微分になってしまう。xとx+hの差を極小にできていないのでその分ズレがある。
x点での微分とは言えない。
以下のようにすれば関数fのx点での微分になる。

```
def numerical_diff(f, x):
  h = 1e-4 # 0.00001
  return ( f(x+h) - f(x-h) ) / (2*h)
```

ちなみに、微小な値を与えた時の差分によって微分を求めることを、数値微分という。

##おまけ：どれだけ差が出るの？

```
import numpy as np
import matplotlib.pylab as plt

def function(x):
  return 0.01*x**2 + 0.1*x

def nd1(f, x):
  h = 1e-4 # 0.00001
  return ( f(x+h) - f(x) ) / h

def nd2(f, x):
  h = 1e-4 # 0.00001
  return ( f(x+h) - f(x-h) ) / (2*h)

# 真微分では0.2,0.3になるので、それに近ければ近いほどいい。
# nd1の場合
print(nd1(function, 5))  # => 0.20000099999917254
print(nd1(function, 10)) # => 0.3000009999976072
# nd2の場合
print(nd2(function, 5))  # => 0.1999999999990898
print(nd2(function, 10)) # => 0.2999999999986347
```
ROSのBlam-SLAMを動かしてみた


###目的
Berkeley AI Research Laboratoryの3D-SLAM”blam”を動かしてみた。

Github:https://github.com/erik-nelson/blam
blam_slam:https://github.com/erik-nelson/blam_slam/tree/master/src

![pic2.png](https://qiita-image-store.s3.amazonaws.com/0/73020/13ff6001-e425-d35f-4ae3-eb6779553c1d.png)

###環境
Ubuntu 14.04 x64
ROS:Indigo

###インストール

####GTSAMのインストール

```
$ wget https://bitbucket.org/gtborg/gtsam/get/8b0c2ecaf406.zip
$ unzip 8b0c2ecaf406.zip
$ cd gtborg-gtsam-8b0c2ecaf406
$ mkdir build
$ cd build
$ cmake ..
$ make check (optional, runs unit tests)
$ sudo make install
```

####blamのインストール

```
$ cd 
$ mkdir ~/catkin_blame/src -p
$ cd ~/catkin_blame/src
$ git clone https://github.com/erik-nelson/blam.git
$ cd ./blam
$ ./update
$ source ./devel/setup.bash
$ cd ~/catkin_blame/
$ catkin_make_isolated --install --cmake-args -DCMAKE_BUILD_TYPE=Release
```

####テストデータのダウンロード

```
$ cd ~/catkin_blame/
$ wget http://www.frc.ri.cmu.edu/~jizhang03/Datasets/nsh_indoor_outdoor.bag
```

```
<param name="filename/bag" value="/Users/eanelson/Desktop/lbl_lidar.bag"/>
→<param name="filename/bag" value="~/catkin_blam/nsh_indoor_outdoor.bag"/>
```

####blam_slamのlaunchファイルの修正

```
$ vi ~/catkin_blam/src/blam/internal/src/blam_example/launch/test_offline.launch
```

####blam_slamの実行

setup.bashを読み込み後、

```
$ source /home/(user名)/catkin_blam/src/blam/internal/devel/setup.bash --extend
```

```
$ roslaunch blam_example test_offline.launch 
```

もしくは、

```
$ roslaunch blam_example test_online.launch 
$ rosbag play nsh_indoor_outdoor.bag
```





![frames.png](https://qiita-image-store.s3.amazonaws.com/0/73020/0cb7141a-b2f1-4271-5ac0-d037d84b2048.png)

![pic3.png](https://qiita-image-store.s3.amazonaws.com/0/73020/fcb9dd7a-06bb-a394-3b7f-0d8d9cad3f3a.png)
images.xcassetsがないときの復活させる方法

タイトルの通り、うっかり消しちゃったときなどに参照してください。
メモも兼ねてます。
* Xcodeのバージョン：8.3.3
* OS:Sierra 10.12.5

最近、Xcode触るようになって、たまにうっかり消してしまい、
参考書にはあるけど、自分のプロジェクトで無くて困る時があります。
「images.xcassets　ない」でググると下記記事にたどり着きますが、
ちょいちょい単語がわからなかったので、自分がやった方法のスクショを取りました。
http://blog.livedoor.jp/iphonenow/archives/40712719.html


![スクリーンショット 2017-06-08 0.23.26.png](https://qiita-image-store.s3.amazonaws.com/0/11564/4f3555f9-ce48-16ca-6ac8-dec6e30d0d92.png)

![スクリーンショット 2017-06-08 0.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/11564/b92f6d00-7887-6e61-fb4e-1dbb2b4a23f8.png)

![スクリーンショット 2017-06-08 0.33.57.png](https://qiita-image-store.s3.amazonaws.com/0/11564/f7fabb2d-cc73-0e93-80f1-0274c30b98d8.png)

Projectを選択のProjectが何を指しているかわからなかったので、
メニューを探したりして、理解するのにけっこう時間がかかりました。
「App Icons Launch Images」セクションのApp Iconsがボタンにならず、
赤字でセレクトボックスになってる時は、一度別のSwiftファイルを開き、
再度Projectを選択するとボタンになりました。
TypeScriptで型パラメータを省略して型推論に頼る


TypeScriptをしばらく触って、「あれ、もっと型推論に頼っていいじゃん！」と今更判ってきたのでまとめる。

今回は[`reselect`](https://github.com/reactjs/reselect)を例に挙げる

### reselectについて

`reselect`において`createSelector`の型定義は下記のような具合で列挙されている

```ts
// 本当はもうちょっと複雑だが、説明用に簡略化している
export function createSelector<S, R1, R2, T>(
  selector1: (state: S) => R1,
  selector2: (state: S) => R2,
  combiner: (res: R1, res: R2) => T,
): (state: S) => T
```

つまり、`selector1`, `selector2`でそれぞれ計算された結果を、`combiner`でまとめて、`<T>`型を返す、という具合に定義されている。

### 型パラメータを明示する（型推論しない）場合

`reslect`を利用するときに型パラメータを指定する場合、下記のような具合になる

```ts
import { createSelector } from "reselect"

interface Item{
  price: number
}
interface State {
  items: Item[]
}

// それぞれ
// <元のstateの型, 最初の関数の返り値, 最後の返り値>
const itemSumPrice = createSelector<State, number[], number>( 
  (state) => state.items.map( item => item.price),
  (prices) => {
    return prices.reduce( (a, b) => a + b, 0)
  }
)

```

これはかなり保守がしんどい。ちょっと拡張しようとして、例えば「消費税を計算して、単位もつける」となるとこんな具合になる。

```ts
interface State {
  items: Item[]
  tax: number
  unit: string
}

// <Stateの型、最初の関数の返り値,二番目の関数の返り値.... 最終的な返り値>
const itemSumPrice = createSelector<State, number[], string, number,string>( 
  (state) => state.items.map( item => item.price),
  (state) => state.unit,
  (state) => state.tax,
  (prices, unit, tax) => {
    return `${prices.reduce( (a, b) => a + b, 0)  * tax} ${unit}`
  }
)
```

型が多くなってだいぶ読み辛い。脳内スタックが追いつかない

### 型推論に頼る

ということで、型推論に頼る。`createSelector`の型パラメータをあえて省略する。

```ts
const itemSumPrice = createSelector( 
  (state : State) => state.items.map( item => item.price),
  // pricesはnumber[]型として推論されてくれる
  (prices) : number => {
    return prices.reduce( (a, b) => a + b, 0)
  }
)
```

`State`を明示することで、その後の`prices`の型が推論される。

`State`の型をつけるのがしんどい場合は、あまり褒められ無いやり方だが、anyにしてしまって返り値を指定することである程度推論してくれる

```ts
const itemSumPrice = createSelector( 
  (state: any) : number[] => state.items.map( item => item.price),
  // pricesがnumber[]として推論されてくれる
  (prices) : number => {
    return prices.reduce( (a, b) => a + b, 0)
  }
)

```

この方法を使えば、複雑化しても見通しがそこそこ良くなる

```ts
const itemSumPrice = createSelector( 
  (state: State): number[] => state.items.map( item => item.price),
  (state: State): string => state.unit,
  (state: State): number => state.tax,
  // prices, unit, taxがそれぞれ推論される。
  (prices, unit, tax): string => {
    return `${prices.reduce( (a, b) => a + b, 0)  * tax} ${unit}`
  }
)
```

また、下記のような矛盾するselectorを書いてもちゃんと怒ってくれる

```ts
const invalidCreator= createSelector( 
  (state: number): number => state,
  (state: string): string => state,
  (item1, item2): string => {
    return `${item1} ${item2}`
  }
)
// =>
// The type argument for type parameter 'S' cannot be // inferred from the usage. Consider specifying the type arguments explicitly.
```

`react-redux`の`connect`でも似たような感じで推論させたほうが良かったりするので、どんどん推論に頼っていきたい
UnrealEngine4.16 ～NvClothの検証～

どうもです。今日はHoudiniではなくUE4の
4.16から新しく導入された **<font color="red">NvCloth**</font><br>を触ってみます。

これまでAPEX PhATといった物理アセットを組み込むことで
布（クロス）シミュレートが表現できる機能ですね。

あらかじめUE4.16で
Edit > Editor Prefrences　から
![キャプチャ2.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/29a5a14b-9a76-75b4-2898-5aa6ad919c03.jpeg)
Clothing Toosにチェックをいれます。


まずはＤＣＣツールで
クロス用のメッシュ・とシミュレートしないメッシュで分けておきます。
下図ではマテリアルもわけております。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/d7b21b01-f5b2-07b7-ebc8-9a8063fb3859.jpeg)

あわせてCloth Paintっていうタブが追加されていると思います。
![キャプチャ3.jpg](https://qiita-image-store.s3.amazonaws.com/0/184524/4c171fc0-6f24-4ba7-8a42-09e74be9af43.jpeg)
※これが表示されなかったら、再度UE4を再起動してみてください。


早速。ClothPaintをやりたいと思います。
GDC2017/UE4Fesの動画にでもあったように、
初めに　Section Selectionで　対象となるメッシュを選択します。
![キャプチャ4.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/3ba80682-c063-01f2-7045-dd243b996c91.jpeg)

さらにオーバーライドされているメッシュ上で右クリック。
**<font color="red">Creat Clothing Asset from Section**</font><br>![キャプチャ5.jpg](https://qiita-image-store.s3.amazonaws.com/0/184524/ae1d0d8e-1f40-b5d1-d21f-0858a8252170.jpeg)
↑このだるそうな　骨人形の　Phiysics Assetって　何ぞ？
スケルタルメッシュでUE4でインポートされた際につくられるものです。（間違ってたらすみません）
 
Asset Detailsの　Clothingに
APEXが追加されました。![キャプチャ6.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/4dde2e5c-a1ab-f0bc-3fed-818a2d2544ff.jpeg)

追加が確認できたところで
もう一度オーバーライドされているところで右クリック。
Apply Clothing Asset...　> で先ほどつくった　**<font color="red">Clothing Asset**</font><br>を選択します。
![キャプチャ65.jpg](https://qiita-image-store.s3.amazonaws.com/0/184524/39830497-9757-2a47-a84e-833147741ba7.jpeg)

**Cloth Paint**から
Enable Paint Tools（ブラシのアイコン）をクリックし有効（オレンジ色）
その下段にある
Assets にClothing Asset　が表示されます。
下図でいう　<font color="red">**APEX_Cloth00_0**</font><br>
を選択し

すると・・・ペイントを・・・！？ない！！
![キャプチャ7.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/dd38ff65-3bc4-814f-8a6a-8738ba7ae736.jpeg)

！！！
なんか足元にありますね・・・
ちょっと画面をまわしてみたらなぜか下にありました・・・謎。
![キャプチャ8.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/c5028cd3-cb4d-9934-710f-663dd72de8a0.jpeg)


とりあえずペイントをしてみます。
 **Radius**  ・・・ブラシサイズですね。
**Max Distance** ・・・最大の影響範囲
**Paint Value**　・・・0は影響無　100で最大値としてみる。
　
![キャプチャ9.jpg](https://qiita-image-store.s3.amazonaws.com/0/184524/d2323546-5789-b056-c8de-3339e1974597.jpeg)



上記完了したら
Asset Detailsに戻り
Clotingを割り当てます。
![キャプチャ10.JPG](https://qiita-image-store.s3.amazonaws.com/0/184524/eeacf5c3-1c76-35e8-4231-574029336732.jpeg)
割り当て先のマテリアルがわかったので
clothing [None▼]をプルダウンから
[APEX_Cloth00_00 -LOD0]に切り替えた瞬間・・・！！
![キャプチャ11.jpg](https://qiita-image-store.s3.amazonaws.com/0/184524/3a1f5266-f59c-6d1f-cb51-95daf1882729.jpeg)

さらにClothing Propertiesの項目から
細かな調整触れます。
ただ自分の場合　ここでアンドゥでＵＥ４が落ちたので・・・orz

ここで終了にします。
お疲れ様でした。
メタクラスとisinstance

# 発端

Djangoはモデル（django.db.models.Model）に対してメタクラスModelBaseを使い、いろいろと登録処理を行っている。

で、ソースを読んでいて、

```py
class ModelBase(type):
    def __new__(cls, name, bases, attrs):
        parents = [b for b in bases if isinstance(b, ModelBase)]
```

みたいなコードがあったので「ふーん」とshellで`isinstance(Question, Model)`[^1]と打ってみたところ、

> False

[^1]: QuestionはModelを継承したクラス。つまり、Djangoのモデルクラス

よく考えるとわかるのだが初め「あれ？」と思ったので理解したことをまとめておく。

# isinstanceとは

[isinstance](https://docs.python.org/3/library/functions.html#isinstance)は第一引数の**オブジェクト**が第二引数の**クラス**のインスタンスならTrueを返す。例えば、

```
isinstance(123, int)
```

はTrueが返る。

# 先の入力は何がいけなかったのか

Questionは**クラス**、Modelも**クラス**。つまり、「QuestionクラスはModelクラスのインスタンスか？」と聞いてることになる。そんなことはない。Falseが返されるのは当然だ。サブクラスとインスタンスがごっちゃになってた。

# ではどう聞けばよかったのか

isinstanceとは別に[issubclass](https://docs.python.org/3/library/functions.html#issubclass)という関数がある。これを使えばいい。

```
issublass(Question, Model)
```

無事Trueが返る。

# メタクラスとisinstance

Djangoのソースの話に戻ろう。Djangoのソースでは「これから作成されるクラス」のスーパークラス達がModelBaseのインスタンスかを調べていた[^2]。第一引数は**クラス**だ。
何故これでいいのかというと、第二引数がtypeを継承した**メタクラス**だから。**メタクラスのインスタンスはクラス**なので、このチェックはModelクラスを継承したクラスであればTrueになる。つまり、以下の式はTrueが返される。

```
isinstance(Question, ModelBase)
```

[^2]: アプリで共通する属性を定義した抽象モデルクラスを作れるようだけど、実用上そんな複雑なモデル階層を作るのだろうか
jqでJSONパースできない行のエラーを無視する

JSON形式のログとかいい感じにパースして加工するのにjq便利なんだけど、たまに入力データがおかしくて、JSONパースできない行が混じってるとこんなかんじでエラーが出て途中で止まる。

例えばこんなかんじで途中にerrorとか謎の行が入ってるファイルをjqに流し込むと、

```
$ cat test.log
{"aaa": 111, "bbb": 112}
{"aaa": 211, "bbb": 212}
error
{"aaa": 311, "bbb": 212}
```

こんなかんじでエラーで止まる。

```
$ cat test.log | jq -r '.aaa'
111
211
parse error: Invalid numeric literal at line 4, column 0
```

エラーで止めたい場合もあるけど、単にJSONパースできない場合は無視してほしいときもある。

そういう場合は、どうすればよいか調べたところ、
`-R(--raw-input)` で入力行をパースせずに読み込んで `fromjson` でJSONパースしつつ `?` でパースできなかったら単に無視して、 `|` で後ろに流してやるとよいみたい。

```
$ cat test.log | jq -r -R 'fromjson? | .aaa'
111
211
311
```

参考: https://github.com/stedolan/jq/issues/884
golangのflagにbash completion (補完)を追加する

golangでコマンドライン引数を受け取るには、標準のflagパッケージを使うのが基本となります。
普段はkingpinを使っているので`Bash/ZSH Shell Completion`が標準で組み込まれていますが、flagにはそれがありません。

実際、flagにbash completion (コマンド補完)を追加したところで、さほどメリットはないかもしれませんがgolangとbashの練習もかねて作ってみました。

# Goal

flagパッケージにbash completionを追加するflagcmplを紹介する。

 * https://github.com/sago35/flagcmpl

# 使い方

いきなりですが、使い方。

 1. `import "github.com/sago35/flagcmpl"` を追加
 2. `flag.Parse()`を使っている箇所を、`flagcmpl.Parse()`に書き換える
 3. bash_profile等で`eval "$(your-cli-tool --completion-script-bash)"`を実行

## flagcmpl.Parse() に書き換える

まずは、bash completionしたいgolangソース内の`flag.Parse()`を`flagcmpl.Parse()`に書き換えます。

```go
package main

import "flag"
import "github.com/sago35/flagcmpl"

var verbose = flag.Bool("verbose", false, "Verbose mode.")

func main() {
    // flag.Parse() を↓に書き換える
    flagcmpl.Parse()
}
```

補完させたいgolangソースが`flag.FlagSet()`を使っている場合は以下のような形に書き換えます。

```go
package main

import (
    "flag"
    "github.com/sago35/flagcmpl"
    "os"
)

func main() {
    flags := flag.NewFlagSet("sample2", flag.ExitOnError)
    flags.Bool("verbose", false, "Verbose mode.")

    // flags.Parse(os.Args[1:]) を↓に書き換える
    flagcmpl.ParseFlagSet(os.Args[0], flags, os.Args)
}
```

## bash に補完を追加する

作っているものが`your-cli-tool`の場合、`eval "$(your-cli-tool --completion-script-bash)"` を実行してください。

# Demo

git for windowsのbash上でのDemoはこちら。

![sample3.gif](https://qiita-image-store.s3.amazonaws.com/0/63649/804061a9-046b-1813-c51e-cf2c2c9161f5.gif)

Demoに使用したソースはこちら。

 * https://github.com/sago35/flagcmpl/tree/master/sample3

# まとめ

以上のように、簡単にbash completionを追加できました。

# リンク等

 * [sago35/flagcmpl: A Go library to add bash completion to your cli-tool using flag](https://github.com/sago35/flagcmpl)
 * [alecthomas/kingpin: A Go (golang) command line and flag parser](https://github.com/alecthomas/kingpin)
 * gif作成にはScreenToGifを使いました
    * [NickeManarin/ScreenToGif: ScreenToGif allows you to record a selected area of your screen and save it as a gif or video.](https://github.com/NickeManarin/ScreenToGif)
JavaScript基礎 Switch

JavaScript勉強中につき、以下の書籍を読んでいるのですが、学んだことを残そうと思います。

[JavaScript パターン（優れたアプリケーションのための作法）](https://www.amazon.co.jp/JavaScript%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-%E5%84%AA%E3%82%8C%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E4%BD%9C%E6%B3%95-Stoyan-Stefanov/dp/4873114888/ref=sr_1_1?ie=UTF8&qid=1496843213&sr=8-1&keywords=javascript+%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)

# switchの書き方
読みやすさと堅牢さを考慮すると以下にするのがベストです。

```javascript
var expression = 0,
    result = '';

switch(expression){
case 0:
  result = "zero";
  break;
case 1:
  result = "one";
  break;
default:
  result = "unknown";
}
```

switchとcaseは揃えて、case内のコードのインデントを下げます。
caseの最後は必ずbreakで終わらせます。
breakを忘れるとcase1,case2内の処理を行います。



```javascript
var expression = 0,
    result = '';

switch(expression){
case 0:
  result = "zero";
  console.log(result);
case 1:
  result = "one";
  console.log(result);
  break;
default:
  result = "unknown";
}
// 実行結果は以下
// zero
// one
```
breakが省略されると、次のcaseを満たすかどうかに関係なく次のcase内のコードが実行されてしまいます。
なので複数のcaseに対応させたい場合は以下のように書くこともできます。


```javascript
var expression = 0,
    result = '';

switch(expression){
case 0:
case 1:
  console.log("0でも1でもここを表示")
  break;
default:
  result = "unknown";
}
// 実行結果は以下
// 0でも1でもここを表示
```

以上switch文についてでした。
rubyとpythonの配列の範囲指定

・rubyの場合

```tmp.rb
array = [1,2,3,4,5]
array[0, 2] # => [1, 2]

array[2, 3] # => [3, 4, 5]
array[2, 1] # => [3]

array[2, 2]  #=> [3, 4]
array[2, 0] # => []
```

・pythonの場合

```tmp.py
array = [1,2,3,4,5]

print(array[0:2]) # => [1,2]

print(array[2:3]) # => [3]

print(array[2:2]) # => []
```


rubyの場合は二個目の引数で要素数を指定する
pythonの場合は二個目の引数で要素番号を指定する
游ゴシックをWindows版Chromeでキレイに表示する@font-faceの設定

【2017/11/2 追記】
Chrome62では下記の記述が効かなくなったようです。
（boldも効かなくなる）
Chromeの仕様がコロコロ変わるので、游ゴシックに対するfont-faceの記述はやめておいた方が良いかもしれません。

----------------------------

Windows版Chromeでは、「游ゴシック」が汚く表示（かすれて薄い）されてしまいます。  
  
Chrome57までは[こちらの方](http://qiita.com/RinoTsuka/items/4181efd43d072e246519)の指定方法で対処出来たのですが、58以降ではこの指定は動かなくなりました。
【追記】
Chrome58以降に対応したコードにアップデートされました。
細かく解説もされているので、参考になります。

「Yu Gothic Medium」だけを指定するとか、`font-weight: 500;`を指定する等の対処をしている方もいるようですが、納得がいかないので「`@font-face`でYu Gothicの指定を調整する方法」で記述してみました。
（「Yu Gothic Medium」だけを当てると、boldのときに「Yu Gothic Bold」が当たらないし、`font-weight: 500;`を指定するのはあまりにも乱暴すぎる）

## CSSのコード
```css
@font-face{
    font-family: "Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 100;
}

@font-face{
    font-family: "Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 200;
}

@font-face{
    font-family: "Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 300;
}

@font-face{
    font-family: "Yu Gothic";
    src: local("Yu Gothic");
    font-weight: 500;
}

@font-face{
    font-family: "Yu Gothic";
    src: local("Yu Gothic");
    font-weight: bold;
}

*{
    font-family: YuGothic, 'Yu Gothic', sans-serif;
}

```
この記述であれば、`font-weight: normal;`のときでも、Yu Gothic Midiumが当たり、Chromeで、かすれずに表示出来るようです。
LightとBoldもちゃんと表示されるようです。

※Windows 10と「游ゴシック游明朝フォントパック」をインストールしたWindows 7で表示確認を行いました。

## 改善版
```css
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}
@font-face {
  font-family: "Custom Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
selector {
  font-family: YuGothic, "Custom Yu Gothic", "Yu Gothic", sans-serif;
}

```
コメントのご指摘を反映しました。
私が最初に投稿した記述では、Firefoxの方がChromeよりも濃い目に表示されます。
改善版では、Firefoxでもこの記述が効くようなので、差異が少なくなるようです。
[CDN] UNPKGの使い方

# UNPKG
Content delivery network(CDN)のUNPKGを紹介します。UNPKGはnpmで公開されている物が対象となっています。他のCDNより多くのファイルを扱っていると思います。

[UNPKG](https://unpkg.com/)

# 使い方

## 最新バージョンを使用する場合

[]はオプション

```
https://unpkg.com/パッケージ名[/ディレクトリ]/ファイル
```

例

```
https://unpkg.com/react/dist/react.min.js
```


## バージョンを指定して使用する場合
[]はオプション

```
https://unpkg.com/パッケージ名@バージョン[/ディレクトリ]/ファイル
```

例

```
https://unpkg.com/react@15.5.4/dist/react.min.js
```

## ファイルを探す
ファイルを探す際は、最後を "/" で終えるとファイルリスト表示になります。必要なファイルのURLを探すのに使用できます。

例

```
https://unpkg.com/react/
```
rust コーディングルール メモ


## 概要

* rustのコーディングルールのまとめ
* https://aturon.github.io
* 暫定項目とかFIXMEが多いので要更新
* 成熟してないのでガンガン変わりそう
    * 更新リクエスト

## コーディングルール

### 空白、改行

* 1行は100文字以内に収める
* インデントはスペース4つ、タブは使わない
* 行末とファイル末尾には空白、空行は入れない
* 演算子を使うときは空白を入れる

```rust
#[deprecated = "Use `bar` instead."]
fn foo(a: uint, b: uint) -> uint {
    a + b
}
```

* コロン、カンマの後には空白を入れる

```rust
fn foo(a: Bar);

MyStruct { foo: 3, bar: 4 }

foo(bar, baz);
```

* 構造体や1行でブロックを書く場合など、ブレースの後に空白を入れる

```rust
spawn(proc() { do_something(); })

Point { x: 0.1, y: 0.3 }
```

* 関数の宣言で改行をする場合は最初の引数にインデントを合わせる

```rust
fn frobnicate(a: Bar, b: Bar,
              c: Bar, d: Bar)
              -> Bar {
    ...
}

fn foo<T: This,
       U: That>(
       a: Bar,
       b: Bar)
       -> Baz {
    ...
}
```

* 複数行の関数呼び出しのルールは宣言時のものに合わせる
* 最後の引数でブロックを使用する場合は同じ行にブレースを記述して開業する
* 改行後はインデントを1から始める

```rust
fn foo_bar(a: Bar, b: Bar,
           c: |Bar|) -> Bar {
    ...
}

// Same line is fine:
foo_bar(x, y, |z| { z.transpose(y) });

// Indented body on new line is also fine:
foo_bar(x, y, |z| {
    z.quux();
    z.rotate(x)
})
```

### コメント

* 一行コメントは //

```rust
// Wait for the main task to return, and set the process error code
// appropriately.
```

* 複数行は /* */

```rust
/*
 * Wait for the main task to return, and set the process error code
 * appropriately.
 */
```

* docコメントは ///
    * Github markdownを使う
    * 先頭行は説明

```rust
/// Sets up a default runtime configuration, given compiler-supplied arguments.
///
/// This function will block until the entire pool of M:N schedulers has
/// exited. This function also requires a local task to be available.
///
/// # Arguments
///
/// * `argc` & `argv` - The argument vector. On Unix this information is used
///                     by `os::args`.
/// * `main` - The initial procedure to run inside of the M:N scheduling pool.
///            Once this procedure exits, the scheduling pool will begin to shut
///            down. The entire pool (and this function) will only return once
///            all child tasks have finished executing.
///
/// # Return value
///
/// The return value is used as the process return code. 0 on success, 101 on
/// error.
```

### ブレース、セミコロン、カンマ

* ブレースは同じ行に書く

```rust
fn foo() {
    ...
}

fn frobnicate(a: Bar, b: Bar,
              c: Bar, d: Bar)
              -> Bar {
    ...
}

trait Bar {
    fn baz(&self);
}

impl Bar for Baz {
    fn baz(&self) {
        ...
    }
}

frob(|x| {
    x.transpose()
})
```

* returnするときはセミコロンをつける

```rust
fn foo() {
    do_something();

    if condition() {
        return;
    }

    do_something_else();
}
```



### 命名

* 一覧

| Item | Convention |
| --- | --- |
| Crates | snake_case (単語が好ましい） |
| Modules | snake_case |
| Types | CamelCase |
| Traits | CamelCase |
| Enum variants | CamelCase |
| Functions | snake_case |
| Methods | snake_case |
| General constructors | new or with_more_details |
| Conversion constructors | from_some_other_type |
| Local variables | snake_case |
| Static variables | SCREAMING_SNAKE_CASE |
| Constant variables | SCREAMING_SNAKE_CASE |
| Type parameters | concise CamelCase, usually single uppercase letter: T |
| Lifetimes | short, lowercase: 'a |
オススメのサイト一覧 (Windows IE , Google Chrome , Firefox)

<パスワード・乱数自動生成>

パスワード自動作成ツール : http://www.benricho.org/password/

<名前自動生成>

すごい名前生成器 : http://namegen.chobitool.com/

<進数変換>

2進数、8進数、10進数、16進数相互変換ツール : https://hogehoge.tk/tool/number.html

2進数、10進数、16進数および2～62進数全ての相互変換ツール : http://www.muryou-tools.com/sinsuu-change.php

16進数を文字列に自動変換＆その逆をするツール : http://singoro.net/16henkan/

日本語→2進数変換CGI : http://berta.s27.xrea.com/cgi-bin/jto2.cgi

<文字列改行削除>

テキストの改行を削除する : http://www.benricho.org/moji_conv/remove_newline.html

<文字列シャッフル>

文字列をシャッフルするだけ : http://jsdo.it/transel/wMud

<動画をダウンロード>

ClipConverter : http://www.clipconverter.cc/jp/

YouTube mp3 : http://www.youtube-mp3.org/jp

OnlineVideoConverter : https://www.onlinevideoconverter.com/ja/video-converter

Dirpy : http://dirpy.com/

nicozon : http://www.nicozon.net/

<ニコニコ動画匿名閲覧>

ニコニコビューア : http://nicoviewer.net/

<匿名ファイルアップロード>

Fast Uploader : http://fast-uploader.com/

<マインクラフト>

Nova Skin - Wallpapers : https://minecraft.novaskin.me/wallpapers

effectコマンド生成ツール : http://minecraft.sakuraweb.com/913.html

<画像素材>

ICOOON MONO : http://icooon-mono.com/

いらすとや : http://www.irasutoya.com/

<音楽素材>

YouTube オーディオ ライブラリ : https://www.youtube.com/audiolibrary/music

<ジュネレーター>

けものフレンズ ロゴジェネレータ！ : https://aratama.github.io/kemonogen/

CHARAT : https://charat.me/avatarmaker/start/

イケてる似顔絵メーカー : http://www.iconpon.com/iconmaker/in/

<チャット・お絵描き>

デュラララチャット : http://drrrkari.com/lounge/

MagicalDraw : http://draw.kuku.lu/
ガラホ(ケータイ)向けサイト制作

#「ガラホ」向けサイトをなんとかする

ガラケーからスマホの時代になって大分経ちますが、2016年頃よりいわゆる「ガラホ※」と呼ばれる端末が発売されるようになりました。

スマホほど豊富な機能は不要、電話とメールだけできればいい、スマホに慣れない、折りたたみ型にこだわりがある、など、一部のユーザー向けに発売されている端末です。

一応ガラホでもウェブサイトは見れますが、端末操作含め、UI/UXがあまりよろしくなく、クレームもぼちぼち見受けられるようになりました。ガラホ向けのサイト制作ノウハウを手っ取り早く集めたいところですが、巷であまり情報が出回ってないようです。

※「ガラホ」はauの登録商標で、docomoやSoftBankは「ケータイ」と呼んでいるみたいです。

#ガラホ(ケータイ)端末の特徴

これまでのガラケーと大きく異なる点は、OSがSymbianOS(など)からAndroidになった点です。つまり、ガラホではスマホサイトが普通に見れます。

じゃあ解決じゃん〜、ということになりそうですが、そうはいかず、ガラホの操作はスマホのように指で操作するのではなく、上下左右のハードキーで操作しなければいけません。また、AQUOS　K　SHF31などのガラホでは、PCのようにカーソルが出現し、ハードキーがある部分をマウスパッドのように指で滑らせて操作できるようになっていますが、これが非常に使いづらいです。恐らく、スマホサイトを楽に操作できるよう、ハードキーを補うために備わった機能だろうと思いますが、普段使うことはまずないと思います。

#ガラホ向けUI？

というわけで、指で画面に触れられずハードキーで操作するガラホで、スマホサイトを見ると、ストレスが溜まります。これまでのガラケーのように、上下キーで操作することを想定したUIに変更する必要があります。

スマホサイトではおなじみのハンバーガーメニューは、UserAgent等で判別し、非表示にするほうがよいと思います。また、画面左右から出現するメニューも、ガラホの狭い画面の大半を占拠してしまうため、なくすべきだと思います。

モーダルウインドウなども非表示にすべきです。ガラホでモーダルウインドウが出現した時は、カーソルがどこの画面に当たっているのか瞬時に理解できないため、ストレスが溜まります。

逆に、アコーディオンなどのUIは、画面の上下幅を縮小できるため、ガラホでも有効だと思います。しかし、カーソルが当たる範囲を画面幅一杯にするなど、わかりやすくするべきかと思います。

画像が軽量な場合に限り、カルーセルも有効なUIかと思います。

#ガラホの処理速度に気を配る

スマホのスペックがまだ低かった時代、レスポンシブサイトが普及した頃に問題になりましたが、PC向けの重い画像は、当然ながら読み込みに時間がかかります。レティーナディスプレイ向けの倍角画像や動画も同様です。UserAgentで、ガラホ向けに画像を出し分けるべきかと思います。

また、外部jsライブラリの読み込みも最低限に留めたほうがよさそうです。

ガラホの処理速度は、昔のガラケーのスペックとさほど変わらないと思います。従って、htmlやcss、js、画像などのページを構成するデータの合計容量は、150〜250kbyte程度に抑えないと厳しいです。

イメージとしては、ひと昔前のスマホサイト、例えばiPhone3GS向けのサイトを作るような感じです。それにプラスして、上下ハードキーで操作するようなUIを実装すれば、ガラホでもサクサク操作できるサイトが出来上がると思います。

#ガラホサイト、結局どうなるのかまだ分からない

auは2017年夏モデルにMARVERA KYF35というガラホ端末を発売されますが、MVNO向けガラホなど、キャリアが端末を販売し続ける限り、ガラホサイト利用ユーザーは今後も存在しそうです。

サービス提供者がガラホユーザーを切り捨てるのか、それともガラホユーザーもきっちり対象に含めるのかは、結局のところ提供するサービス次第かと思いますが、モバイルサイト制作者はどっちに転んでも対応できるように、そろそろ備えておくべきなんじゃないかと思います。
VisualStudio2017で選択した単語と同じものをハイライトする方法

#スクリーンショット
なにはともあれ、スクリーンショットをごらんください。

![スクリーンショット 2017-06-07 21.55.52 - コピー.png](https://qiita-image-store.s3.amazonaws.com/0/120077/6403bb09-8f67-b864-940c-90af90faed15.png)

左側が選択前、右側が（5）の`hoge1`を選択した状態です。

#導入方法
拡張機能で[Productivity Power Tools 2017](https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.ProductivityPowerPack2017)をインストール
Match Marginを有効化

ツール＞オプション＞環境＞フォントおよび色＞各表示項目

| 設定名 |   解説   | コード上の場所 |
|:---:|:---:|:---:|
|Match color（前景）|スクロールバー上の強調表示|(1)から(6)まで全て|
|Match color（背景）|一致する文字の背景色（セマンティックな一致ではない）|(3), (6)|
|強調表示された参照（背景）|セマンティックに一致する参照されている単語の背景色|(2)|
|強調表示された書き込み参照（背景）|セマンティックに一致する書き込み参照されている単語の背景色|(4)|
|強調表示の定義（背景）|セマンティックに一致する定義の背景色|(1)|
| | | |
|不明|現在選択されている単語|(5)|

以上です。

#注意点

- 現在選択されている単語の背景色を変える設定項目は見つかりませんでした。
- 強調表示された参照などは前景色を設定できますが、反映されません。もしかしたら私の環境依存かもしれません。



#きっかけ
http://qiita.com/fff777/items/53d1342cfb27646a3280

>そのため、以前はダブルクリックなどで単語を選択すると色付けされるものが公開されており大変重宝していました。（スクロール部分にも該当行が色付けされる）

そういえば、前はできたな、と思って調べました。

#環境
VisualStudio2017
.NET Framework 4.6
C#6
フォントはFira Code Light
一部文字色は[SemanticColorizerとViasforaを使用](http://qiita.com/soi/items/4a3097eeb22facfd1b00)
fluentdで独自フォーマットを処理するParser Pluginを作る

## Why?
fluentdはかなり便利なのですが、fluentdがデフォルトで対応していないフォーマットのログを出すソフトウェアもたくさんあります。そこで、そういったログを処理するために作ります。公式のドキュメントが充実しているので、さほど手間はかかりません。

## フォーマット
```shell-session
Feb 01 00:12:30.000 [name1] key|value
```

みたいなログを、

```shell-session
2017-02-01...(省略) tag: 
{
  "[name1]":"key|value",
   "name2":"特定条件のvalue"
}
```
のようにパースするPluginを作ります。

## 考えるべきこと
- 時間のフォーマットの読み取り
- name, key, valueのparseメソッドでの処理

## ベース
まずは、[公式](http://docs.fluentd.org/v0.12/articles/plugin-development#parser-plugins)からParser Pluginをコピペしましょう。

```rb
module Fluent
  class TextParser
    class DokujiLogParser < Parser
      # Register this parser as "dokuji"
      Plugin.register_parser("dokuji", self)
      
      config_param :delimiter, :string, :default => " "
      
      (省略)
      
      def parse(text)
        time, key_values = text.split(" ", 2)
        
        (省略)
        
        record[k] = v
        yield time, record
      end
    end
  end
end

```
このように、インスタンス変数を設定し、parseメソッドに処理を書く、という形になっています。

## 時間
Rubyのstrptimeのようにフォーマットを指定して、

```ruby
config_param :time_format, :string, :default => "%b %d %H:%M:%S.%L"
# Feb 01 00:12:30.000
# %b  %d %H:%M:%S.%L
```
のように設定します。

## name, key, valueのパース
textには、行単位のデータが渡されるので、

```rb
# デリミタの指定
config_param :delimiter, :string, :default => " "
```
```rb
# parseメソッド
def parse(text)

  # テキストの分割
  splited = text.split(@delimiter, 4)
  time = splited[0..2].join(" ")
  data = splited[3]
  
  # 時間のパース
  time = @time_parser.parse(time)
  
  # recordの生成
  record = {}
  k, v = data.split(@delimiter, 2)
  record[k] = v
  
  yield time, record
end
```
このような感じでRubyのメソッドを使って普通に処理をしていきます。
また、特殊なvalueの処理は、

```rb
if value.macth(/条件/)
    record["name2"] = value.split("|")[1]
end
```
のようなことをparseメソッド内で行うだけです。

## 結果
formatにdokujiを指定するだけで、

```shell-session
2017-02-01 00:04:22.000000000 +0900 tag: 
{
  "[name1]":"key|value",
   "name2":"value"
}
```
このようにパースできます。
## 最後に
fluentd初心者なので、ここが間違っているとか、何かあったらコメントしていただけると幸いです。

## 参考文献
[いまさらだけど fluentd に入門した - えいのうにっき](http://blog.a-know.me/entry/2015/06/14/094945)
[fluentdインストール（丁寧な説明つき） - Qiita](http://qiita.com/shuntaro_tamura/items/e897cdc8a155cfcf9da7)
[Writing plugins | Fluentd](http://docs.fluentd.org/v0.12/articles/plugin-development)
[Match and Handle Date/Time Formats in Td-Agent or Fluentd - Data Pipeline Architect](http://datapipelinearchitect.com/handle-tdagent-fluentd-date-time-formats/)
JS小ネタ集　配列と連想配列の等しいかどうか簡単な比較

　短い配列じゃないと厳しいかもですが、ちょっと自分の作業に需要があったもので調べて見たらこんなだったというのを列記します。

# 元ネタ
[[JavaScript]配列の比較 : Strings of Life](http://ryo511.blog.jp/archives/25501773.html)
[JavaScriptで配列やオブジェクトを比較して等しいかチェックする方法 | jMatsuzaki](https://jmatsuzaki.com/archives/16866)

最初この上にもう少し記載していたのですが、それって元ネタのサイトを見ていただければいいのでそちらの著作って気がして削除しました。


# 理屈
どちらも配列をテキストに戻している様です。

それから比較しているので＝＝＝でイコールとなる模様。

```javascript
a = { a:1, b:2};

"{"a":1,"b":2}"
```

```javascript
a = [1, 2, 3];

"1,2,3"
```

# あなたそれ何に使ったの？
引数で受け取ったパターン配列を処理したのですが、それがkoのsubscribeだったのです。

それで複数回ここを通るので通るたびにsubscribeが登録されてしまうので、何度もなんども同じ処理を重ねてしまうわけです。

その多重登録を防ぐためにこの比較を行いました。

例えば・・・

```javascript
var patternMemory = [];

function etc( arg )
{
  for (var indexOfPattern in patternMemory) if patternMemory.hasOwnProperty(indexOfPattern) {
    if (patternMemory[indexOfPattern].toString() === .toString( arg )) {
      return;
    }
  }

  patternMemory.push( arg );

  //ここでsubscribe



}
```
このソースコード書きなぐりなんでバグあったらごめんなさい。

とにかく、こんな感じで使いました。

出典元の皆さんありがとうございました。