OmniAICreator/Qiita-1.07M huggingface dataset:
python環境準備(python3+vscode)について

###これまでの経緯
pythonを始めよう→画像処理をしたいのでopencvを入れたい→インストールが大変らしい→anacondaが楽らしい。という流れでanacondaを入れて、まあやりたいことはできなくもないんだけど、
anacondaについてるIDEのspyderは起動が遅い。jupyter notebookは手軽なんだけど長いコード書くには向かない＆なんかよく固まる。condaをどう使っていいかよくわからず、ライブラリ追加が怖い。といったことがあって、そのまま使うには便利なんだけど、
[anacondaも人によって賛否あるみたい]
(http://ymotongpoo.hatenablog.com/entry/2017/01/29/002039)
ということで、勧められたvisualstudio codeを試すことに。
#やりたいこと
・numpy,pillow,opencvで画像処理
・ソースをexe化したい。
・計算機っぽく使うときはjupyterもあったほうがいいか。
・python2/3 両方使う場合があるかも。
・仮想環境でパッケージ管理分けといたほうがやっぱいいのかな。

ということで、
python3 + vscode で、pip,venv使えばいいのだということになりました。
(python2必要になったら追加でインストールかな？)

こんな感じで乗り換え。
インストーラ  ：anaconda  → python
ライブラリ管理：conda     → pip
開発環境      : sypder   → vscode + 拡張機能
仮想環境　  　：conda    →　venv

やりたいことはほとんど↓だったのでこれを見ながら進めます。
[qiita Visual Studio CodeでPython開発環境を整える]
(http://qiita.com/84zume/items/27d143f529396c9fa1cc) 

##python3をインストール
インストールするときに、chocolatey(linuxのapt-getみたいなもんらしい)使うって書いてあったけど、普通にインストール
[all userで、環境変数は設定されるように、チェックをつけてインストール]
(http://www.pythonweb.jp/install/install/index1.html)

###VisualStudio Codeをインストール
ここは普通にインストーラでいれました。
###VisualStudio Codeの拡張機能をインストール
↓のとおりに拡張機能４つをインストールする。
[vscode公式 vscodeにpython環境を整える説明] 
(https://code.visualstudio.com/docs/languages/python)
vscode上でctrl + Pで 

>ext install python

やってから、ほしいものを選択。
インストールに時間がかかるものもあったけど待つ。
ここで、一度vscodeを再起動したほうがいいかも。

####VisualStudio Codeの設定
[vscode python拡張機能のデバッグの説明]
(https://github.com/DonJayamanne/pythonVSCode/wiki/Debugging)
[vscode settings.jsonの説明](https://vscode-doc-jp.github.io/docs/getstarted/settings.html)
「上部メニュー」→「ファイル」→「基本設定」→「ユーザー設定」をクリックすると、setting.jsonファイルが開きます。

*デバッグするソースコードの階層が深いとデバッガのステップ実行がうまくいかないみたい。
c:から３階層くらいまでのところにソースは置くようにしました。

####仮想環境の設定
仮想環境をつくるフォルダに移動
>python -m venv test_env

アクティベートする。

> ./test_env/activate.bat


####必要なライブラリのインストール
[インストールされているライブラリの一覧表示は](http://www.python-izm.com/contents/basis/pip.shtml)

>python -m pip freeze

ライブラリのインストール
>python -m pip install pylint
>python -m pip install numpy pandas matplotlib
>python -m pip install pillow
>python -m pip install opencv-python
>python -m pip install jupyter
>python -m pip install cx_freeze

[opencv](http://rabbitfoot141.hatenablog.com/entry/2016/02/05/235340)

####vscode上での仮想環境のactivate
ctrl+shift+Pで、以下打ち込んで切り替え。
> Python:Select Workspace Interpreter



参考
http://qiita.com/84zume/items/27d143f529396c9fa1cc
http://qiita.com/bigengelt/items/780440a146e6a3bdffd4#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB
https://algorithm.joho.info/programming/python/vscode-debug-run/
http://qiita.com/bigengelt/items/780440a146e6a3bdffd4
http://beachside.hatenablog.com/entry/2016/08/17/004500
http://renga.hatenadiary.com/entry/2016/07/08/205647
Pycharmを用いたWindows10環境におけるscikit-learnの構築

# はじめに
環境構築系はほんとうに面倒ですよね．
環境の数だけ資料があってもいいと思います．
なので，備忘録として残しておきます．
(タイトルを論文のタイトルっぽくしてみました:sunny:)

# 今回の環境
- OS  
    - エディション: Windows 10 Pro
    - バージョン: 1703
    - OSビルド: 15063.540
    - システムの種類: 64ビットオペレーティングシステム、x64ベースプロセッサ

- Pycharm
    - Pycharm: 2017.2.3
    - JRE: 1.8.0_152-release-915-b11 amd64
    - JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

- Python
    - Python: 3.5.0
    
- Python Module
    - pip: 9.0.1
    - setuptools: 36.4.0
    
# 構築

## まずはPycharmを駆使する

参考: http://d.hatena.ne.jp/graySpace/20150505/1430809117
ありがとうございます．

さて， `scikit-learn` いれましょう．以下のリストをポチポチクリックしてください．
- file
- Setting
- Project:(アプリ名)
- Project Interpreter
- 緑の+ボタン 
- `scikit-learn` で検索 
- `scikit-learn` をクリック
- Install package

多分エラーになるはずです．
scipy入れろとか，最新にしろとか．

## 解決
参考:
http://toriaezu-engineer.hatenablog.com/entry/2016/10/09/084428#環境
私は，上記のサイトようにダウンロードして入れました．

私がやった流れを以下に記します．

### `scipy-0.19.1-cp35-cp35m-win32.whl` ダウンロード
http://www.lfd.uci.edu/~gohlke/pythonlibs/#scipy

### `numpy` のuninstall
```terminal
$ pip uninstall numpy
```

### `scipy`  `numpy` のinstall

```terminal
$ pip install scipy-0.19.1-cp35-cp35m-win32.whl
```

`pip install scipy-0.19.1-cp35-cp35m-win32.whl` だけで， `scipy` `numpy` 両方入りました．

### `scikit-learn`のinstall

```terminal
$ pip install sklearn
```

# おわりに

`pip install scipy-0.19.1-cp35-cp35m-win_amd64.whl` ファイルではなぜかエラー出ました．

```
pip install scipy-0.19.1-cp35-cp35m-win_amd64.whl
scipy-0.19.1-cp35-cp35m-win_amd64.whl is not a supported wheel on this platform.
```

環境構築めんどくさe...:cloud:
tkinterを使ったGUIアプリを作るための情報リンク

###やりたいことは以下。
・処理したいファイルを指定して実行
・実行時の条件を入力して処理内容に反映
・処理実行はボタンで実行
・ソースはexe化して配布可能にする
###環境
windows10
python3.6
###ググって自分が一番役に立った情報のリンクを以下に貼ってます。
##tkinterについて
menuからファイル選択、
entryに数値入力して処理に反映する、
buttonで実行、
labelに説明を書く、ということにしました。
[menu](http://www.geocities.jp/m_hiroi/light/pytk02.html)/[entry](http://qiita.com/nnahito/items/ad1428a30738b3d93762)/[button](http://qiita.com/nnahito/items/ad1428a30738b3d93762)/[label](http://qiita.com/nnahito/items/ad1428a30738b3d93762)
[widgetの配置は３種類](http://www.shido.info/py/tkinter2.html)
[簡単な例題 (GIF / PPM の画像を表示するプログラム)]
(http://bacspot.dip.jp/virtual_link/www/si.musashi-tech.ac.jp/new_www/Python_IntroTkinter/03/index-2.html)

##exe化について
[thkinterを使ったソースをcx_freezeでexe化]
(http://y-naito.ddo.jp/index.php?categ=1&year=2016&month=11&id=1479535167)
気を付けるのは、
・使用するパッケージをpackagesに追加。
・使用するdllのパスをincludefilesに追加。
・tcl/tkのパスを環境変数に追加。
＊tkinterの場合はこれでよかったけど、ほかのライブラリではまると調べるの大変そう・・・。
★初投稿(テスト)

#　　はじめに

　　　はじめまして。私は、SIerでエンジニアをして3年目のたぬきんぐと申します。
　　　文学部を卒業してSIerに就職、1年間の開発業務を経た後、維持運用業務にシフトしました。
　　　とても平和な毎日ですが、日々付きまとうこのままでいいのかなという心の声・・・
　　　物作りをしたいと思って入社したはずが、思いもしない方向へ向かう私のキャリア・・・
　　　どうしても開発業務への未練を捨てられないへっぽこエンジニアの、
　　　足掻きの軌跡を残していこうと思います。

#　　2018年中の目標

　　　1か月にQiitaで1投稿以上を行うことを目標とします。
　　　1か月ごとの成果をまとめていきます。
　　　その他、勉強していて面白かったことなどがあれば、ちょこちょこ投稿するかもしれません。

#　　タイトルの仕様

　　　★を冠する→1か月ごとの成果発表・反省
　　　★なし→勉強した内容まとめ

#　　さいごに

　　　最低でも開発業務に就くまで、この投稿を続けようと思っています。
　　　それが今務めている会社で実現することになるか、
　　　転職という形で実現させることになるかは分かりませんが、
　　　私、アキラメナイ！(｀・ω・´)ｷﾘｯ
　　　正直、適性からいえば、開発より維持運の方が向いていると判断されるのも
　　　仕方ないとは思っています。
　　　しかし納得はできない。
　　　足掻くたぬきに少しでも共感・同情くださる方がいれば、
　　　暖かく見守り、アドバイスなどいただけると嬉しいです。
Python Assertion failure : size.width>0 && size.height>0 in function imshow

# Assertion failure : size.width>0 && size.height>0 in function imshow

下記コードにてErrorが発生したログは下記の通り

```
OpenCV Error: Assertion failed (size.width>0 && size.height>0) in imshow, file /tmp/opencv-20170825-90583-1pdhamg/opencv-3.3.0/modules/highgui/src/window.cpp, line 325
Traceback (most recent call last):
  File "imageToStr.py", line 6, in <module>
    cv2.imshow('fuck image', img)
cv2.error: /tmp/opencv-20170825-90583-1pdhamg/opencv-3.3.0/modules/highgui/src/window.cpp:325: error: (-215) size.width>0 && size.height>0 in function imshow

```

コードは下記のような感じである。

```
import numpy as np
import cv2

img = cv2.imread('./fuckIage.png', cv2.IMREAD_COLOR)
cv2.imshow('fuck image', img)
cv2.waitKey(0)

```

実行時の階層は下記である。

```
.
├── fuckIage.png
├── imageToStr.py
├── main.py
├── stu.py
├── study.py
└── study.pyc
```

ファイルは存在していてパスも通っている。

なのでとりあえず、画面サイズを指定してみる。

```
import numpy as np
import cv2

img = cv2.imread('.fuckIage.png', cv2.IMREAD_COLOR)
cv2.namedWindow('img', cv2.WINDOW_NORMAL)
cv2.imshow('fuck image', img)
cv2.waitKey(0)
```

実行できました。

その後の下記でも実行してみる。

```
import numpy as np
import cv2

img = cv2.imread('.fuckIage.png', cv2.IMREAD_COLOR)
#コメントアウトしてみる。 cv2.namedWindow('img', cv2.WINDOW_NORMAL)
cv2.imshow('fuck image', img)
cv2.waitKey(0)
```

成功！

値が渡ってなかったのかもしれない、

参照できずにエラー　

おそらくこれらを実行する前に、

numpyのバージョンでエラーが発生していて、それらを改修した後で発生していることを鑑みると、

バイナリーに渡されていた値がクリアーされ、

それでこのような事案が発生したと考えるが

これは仮説の段階であり。

本当の原因は未だわからない

現在原因を究明するため再現に努めている、

わかり次第ここに記す、

同じような事象で悩んでおられ人がいれば

教えていただきたく存じ上げる。
PSRemotingでリモートPC上のデスクトップアプリを起動する

にはどうすればいいのでしょうか、誰か教えてください。

PowerShellは予め設定をしたうえで、Enter-PSSessionでネットワーク上の別のPCに接続し、各種コマンドを実行することができます。
ファイル操作したりコマンドラインのツールを実行したりといった作業に支障は無いのですが、しかしそこでデスクトップアプリを動作させることができないのです。

例えば「メモ帳」。ローカルPC上でPowerShellからメモ帳を起動するには

```ps1:PowerShell
notepad
```

とやるだけです。

これをリモートセッション中にやるとどうなるかというと、確かにnotepadのプロセスは起動して存在するのですが、ウィンドウがどこにもないみたいなんです。
平行世界かなんかで動いてるんですかね？

# タスクスケジューラでプロセスを起動する

PowerShellでリモート接続したときのセッションは通常の手順でサインインしたときのデスクトップのセッションとは異なるのでPSRemotingのセッションで起動したアプリがそっちのデスクトップで表示されたりはしないんですとかWindowsのその辺の事情はサッパリわからんのですが、とりあえず一筋縄ではいかんのです。

じゃあどうすんの、いやこっちが聞きたいわってことで冒頭の一文に繋がる訳なのですが…
ひとつの抜け道にタスクスケジューラを利用するという手段があります。
これ経由であれば対象のPCのデスクトップ上でアプリを起動させる事ができるのですね。

ああなんだそういうやつねと十を理解した人はもうお帰り頂いて良いと思います。ありがとうございました。
ですが私が個人的に後でコピペするために、このエントリはもうちっとだけ続くんです。

## 流れ

タスクスケジューラはタスクのスケジューラです。
ですからタスクのアクションと実行する時間を設定してやる必要があります。ですがタスクに対して任意のタイミングで手動実行させることも可能なので、今回は手動実行を利用します。
時間指定なしでタスクを登録することはできないようなので、ダミーの時間を入れておきましょう。

作成したタスクは自動消滅はしないようなので、不要になったらどこかで削除してください。まあ不要なタスクが残っていた所で何か祟りがあったりもしないでしょうが。

### やること

- タスクをコマンドラインで作成する
- タスクをコマンドラインで実行させる
- 使わなくなったタスクはいつの日か削除する

### タスクのパラメータ

| 名前 | 値 |
| --- | --- |
| 起動するexe | c:\windows\notepad.exe |
| タスクの名前 | メモ帳の起動 |
| 繰り返し | 1回だけ |
| 時間 | 0:00 |


## schtasks.exe の場合
接続先が PowerShell 2.0とかだった場合、ScheduledTasksのコマンドレット群が利用できない場合があるので、schtasks を使いましょう。

```ps1:PowerShell
schtasks /create /tn "メモ帳の起動" /tr "c:\windows\notepad.exe" /sc once /st 00:00
schtasks /run /tn "メモ帳の起動"
```

削除

```ps1:PowerShell
schtasks /delete /f /tn "メモ帳の起動"
```

リモート接続だと削除確認に答えられないようなので、強制オプションを指定しています。

## ScheduledTasks モジュールが導入されている場合
ScheduledTasks のコマンドレットが使えるのであればそちらの方がよろしいでしょう。


```ps1:PowerShell
$action = New-ScheduledTaskAction -Execute 'c:\windows\notepad.exe'
$trigger = New-ScheduledTaskTrigger -Once -At '0:00'
$task = Register-ScheduledTask -TaskName 'メモ帳の起動' -Trigger $trigger -Action $action
Start-ScheduledTask $task.TaskName
```

削除

```ps1:PowerShell
Unregister-ScheduledTask 'メモ帳の起動'
```

無事に動くといいですね。おわり。

・
・
・
・
・


###### 没アイデア

これを投稿に使おうと温めていたのですがなんか前後と話が噛み合わなくなったのでやめました。

```ps1:PowerShell
$action = New-ScheduledTaskAction -Execute 'powershell' -Argument "-WindowStyle Hidden -command `"(New-Object -ComObject sapi.spvoice).Speak('私リカちゃん')`""
$trigger = New-ScheduledTaskTrigger -Once -At '0:00'
$task = Register-ScheduledTask -TaskName 'rika' -Trigger $trigger -Action $action
Start-ScheduledTask $task.TaskName
```

リモートで他人のPCに入って勝手にしゃべらそうぜみたいな悪行に活用したく。
せっかくのPSRemotingなんで同時にたくさんの端末に喋らせたら楽しいかもしれませんね。
Pythonにおけるデータ入出力（CSV、JSON）

# 概要
O'Reilly Japan の「PythonとJavaScriptではじめるデータビジュアライゼーション」を参考に、勉強をしています。

## module

### JSON形式のファイルをCSV形式で出力
```py3
# coding:UTF-8
import json
import csv

# JSONファイルのロード
json_dict = json.load(open('data/players.json', 'r'))
# list of dictの抽出
target_dicts = json_dict['players']

with open('data/players.csv', 'w') as f:
    # dialectの登録
    csv.register_dialect('dialect01', doublequote=True, quoting=csv.QUOTE_ALL)
    # DictWriter作成
    writer = csv.DictWriter(f, fieldnames=target_dicts[0].keys(), dialect='dialect01')
    # CSVへの書き込み
    writer.writeheader()
    for target_dict in target_dicts:
        writer.writerow(target_dict)
```
### CSV形式のファイルをJSON形式で出力
```py3
# coding:UTF-8
import json
import csv

json_list = []
json_data = {}

# CSVファイルのロード
with open('data/players.csv', 'r') as f:
    # list of dictの作成
    for line in csv.DictReader(f):
        json_list.append(line)

    json_data["players"] = json_list

with open('data/players.json', 'w') as f:
    # JSONへの書き込み
    json.dump(json_data, f)
```

※上記のソースは、入出力対象のJSONファイルの形式に依存している。

## 入出力ファイル
### JSON形式（players.json）
```json
{
  "players": [
    {
      "id": "0001",
      "name": "Nishikawa Haruki",
      "position": "center fielder"
    },
    {
      "id": "0002",
      "name": "Matsumoto Go",
      "position": "right fielder"
    },
    {
      "id": "0003",
      "name": "Brandon J. Laird",
      "position": "third baseman"
    } ,
    {
      "id": "0004",
      "name": "Nakata Sho",
      "position": "first baseman"
    }
  ]
}
```

### CSV形式（players.csv）
```csv
"id","name","position"
"0001","Nishikawa Haruki","center fielder"
"0002","Matsumoto Go","right fielder"
"0003","Brandon J. Laird","third baseman"
"0004","Nakata Sho","first baseman"
```

# 参考
##書籍
PythonとJavaScriptではじめるデータビジュアライゼーション
https://www.oreilly.co.jp/books/9784873118086/

##Python 3.3.6 ドキュメント
14.1. csv — CSV ファイルの読み書き
https://docs.python.jp/3.3/library/csv.html

19.2. json — JSON エンコーダおよびデコーダ
https://docs.python.jp/3.3/library/json.html
LGPLでの配布についてのメモ

LGPLでソフトウェアを配布する際、下記の点に注意が必要です。

* FSFはLGPLでの配布を推奨していない。
* LGPLで配布する場合、LPGLのテキストとともに、対応するGPLのテキストも配布物に含める。

[こちらのFSFの記事](https://www.gnu.org/licenses/why-not-lgpl.html)にあるとおり、FSFは、LGPLを推奨していません。ソースを再配布しない商用ソフトウェア開発にフリーソフトウェアを使用させないようにするために、LGPLではなく、なるべくGPLでの配布するように勧めています。ですが、標準Cライブラリなど、すでに商用ソフトウェアでも同等の機能が入手可能であれば、GPLで配布する意味はあまりないのでLGPLでもよいでしょうということです。

また、LGPLのテキストは、GPLに対する追加的な許諾条項なので、参照しているGPLのテキストも一緒に配布物に含める必要があります。

*参考*

* [GNU Lesser General Public License, FSF](https://www.gnu.org/licenses/lgpl.html)
* [Why you shouldn't use the Lesser GPL for your next library, FSF](https://www.gnu.org/licenses/why-not-lgpl.html)
* [How to use GNU licenses for your own software, FSF](https://www.gnu.org/licenses/gpl-howto.html)
ざっくばらんメモ_5：gitのcommit頻度、Dvorak配列、コードの拡張性


###git commitの頻度とタイミング
現状の機能を損なわない範囲で新機能を部位を最小単位でインクリメントし、
その度にローカルでコミットしておく。コミットの数は多くて良い。
そうする事で、予期せぬバグが発生した際、直近の正常動作する
状態へ戻す事ができる。
あるいは正常動作を担保するためにテストをこまめに書いておくのも重要である。
Pushする場合はそれらを１つの機能単位でpushを行う。
細かなコミットの集まりをプッシュしてしまうとコミットが簡単に
増えてしまい、その管理が難しくなるため、機能単位で必ず
まとめてから行うと良い

###Dvorak配列について
通常のキーボード配列はqwerty配列であるが、
この配列はキーを打つ上で最適な配列とはいえない。
歴史的にタイプライターを早く打ちすぎる事による故障を防ぐために
あえて打ちづらくしている配列との事。
対して、キーの打鍵頻度などからより最適な配列として
提案されているのがDvorak配列である。
仕事などで長い間キーボードを打つ必要が有る場合には
Dvorak配列を採用する事で仕事スピードの改善が期待できる。

###コーディングにおける拡張性について
コーディングする際の構造を考える際、そのコードの立ち位置を知る事が指針になる。
書くべきコードが今後も変わる事のない特定のタスクに関するものの場合、
拡張性を意識する必要性は薄く、まだ抽象化などをあまり意識する必要もない。
一方、研究用途や、開発初期のコードの場合、今後新たな機能が追加されていく事が
十分予想される。
そのためコード自体を抽象化しておき、新たな機能を追加しやすくしたり、
既存の機能の変更を受け入れやすいデザインを心がける事が重要になる。
機能毎に、その機能のどの部分が今後追加、変更されやすいかを見極め、
それに合わせたレベルの拡張性、柔軟性を備えておけば、レガシーコードを捨てて
再度１から書き直すといった事態に陥りにくくなり、無駄をなくす事が
期待できる。
TimeoutTransitionサンプル

#TimeoutTransitionのサンプル
##テスト用のQML
```qml
import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQml.StateMachine 1.0 as DSM
import QtMultimedia 5.9

ApplicationWindow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("TimeoutTransitionサンプル")

    Audio { id: clickSound; source: "Sounds/btn01.mp3" }
    Audio { id: finishSound; source: "Sounds/btn02.mp3" }

    Row {
        spacing: 2

        Rectangle { id: colorBox; width: root.width / 2; height: root.height }

        // ボタンのクリックで stateMachine の動作を開始する
        Button {
            id: button
            width: root.width / 2
            height: root.height
            text: "Finish state"
            enabled: !stateMachine.running
            onClicked: { stateMachine.running = true; clickSound.play() }

            // StateMachine 定義
            DSM.StateMachine {
                id: stateMachine
                initialState: state
                running: false

                // 初期状態
                DSM.State {
                    id: state

                    // TimeoutTransition 定義
                    DSM.TimeoutTransition {
                        targetState: finalState
                        timeout: 5000           // 5秒後に状態変更
                    }
                }

                // FinalState 定義
                DSM.FinalState {
                    id: finalState
                }

                // Rectangle の色を変えて音を鳴らす
                onFinished: { colorBox.color = "red"; finishSound.play() }
            }
        }
    }
}
```
##実行結果
[![SignalTransitionサンプル動画](http://img.youtube.com/vi/PA2XFFgXqm4/0.jpg)](http://www.youtube.com/watch?v=PA2XFFgXqm4)
※Linux Mint 18.2 & Qt 5.9.1使用
React+Canvasで画像コントロール

## はじめに
以前に投稿した[CSSで写真コントロールUIを作る](http://qiita.com/smallriv/items/e8ce9ea18e462719da4d)をさらに改良して、
画像をズームしたり、マウスドラッグで動かしたりできて、さらに画像のピクセル座標を取得するUIを作成した。
前回はreact/reduxのスタイル制御で実装したが、
今回はマウスでクリックした位置にピンを立てたりといった、
より複雑な画像コントロールを実現するため、
canvas内包のreactライブラリである[react-konva](https://github.com/lavrton/react-konva)を使ってみた。

## react-konvaを使うメリット

- 普通にcanvasを使うより断然簡単！

これは他のCanvas内包ライブラリも同じかもしれないが、
画像操作の実装が格段にしやすくなった。
[前回の投稿](http://qiita.com/smallriv/items/e8ce9ea18e462719da4d)のようにスタイルを操作する時の苦労から解放された。
画像のズームやドラッグをする際は、width, height, 画像の位置を示すx, yを操作すればいい。
これらのパラメータをstateまたは、propsとして管理し、
Imageコンポーネントに渡すだけで、ブラウザ上で思い通りに画像を動かすことができる。

```js
render() {
  const { rootWidth, rootHeight } = this.props;
  const { imgObj, width, height, position } = this.state;
  <div>
    <Stage
      width={rootWidth}
      height={rootHeight}
    >
      <Layer>
        <Image
          image={imgObj}
          width={width}
          height={height}
          x={position.x}
          y={position.y}
        />
      </Layer>
    </Stage>
  </div>
}
```

もちろん、普通にcanvasを使うよりも実装はシンプルになる。
canvasを使って簡単な画像表示をやってみたが、
canvasコンポーネントを作って、
そこにImageオブジェクトをpropsとして渡さなくてはならなかった。

```js
/* App.js */

render() {
  const canvasProps = {
    width: param.width,
    height: param.height,
    updateCanvas: ctx => {
        let imgObj = new Image():
        imgObj.src = 'imag_sample.png';
        imgObj.onload = () => {
          ctx.drawImage(imgObj, x, y, width, height);
        }
      }
  };
  return(
    <div>
      <CanvasComponent {...canvasProps}/>
    </div>
  );
}

/* CanvasComponent.js */

updateCanvas() {
  const { canvas } = this.refs;
  const context = canvas.getContext('2d');
  this.props.updateCanvas(context);
  canvas.addEventListener('click', this.handleClick, false);
  ....
}

render() {
  return(
    <canvas
      ref="canvas"
      width={this.props.width}
      height={this.props.height}
    ></canvas>
  ); 
}
```

画像のズームはzoomLevelを呼び出し側のComponentで管理、
これをpropsとして画像表示Componentに渡し、
表示Component側でzoomLevelに合わせてwidth, heightを計算させれば、
サイズの管理もしやすくなる。

zoomの中心はデフォルトで画像の左上だったので、
制御もしやすい。
マウス位置を中心にズームするためには、
画像のサイズ変化に合わせて画像を動かさなくてはならないが、
まさにピクセル座標の原点を中心にズームするので、
位置の補正の計算もしやすくなった。

- konvaのAPIをほぼ全てサポート

元々、HTML5のCanvasライブラリとしてオブジェクトの描画機能を豊富に備えた[Konva.js](https://konvajs.github.io/)、
そのReact版がreact-konvaになる。
自分の経験不足もあるかもしれないが、
何かと画像の扱いに苦労するReactで各種図形オブジェクトをReact Componentとして使えるのは本当に便利。

少し苦労したのがLayerの概念。
一枚の画像上にSVG pathを使ってSVG画像をマッピングし、
ベースになっている画像の動きと連動して、
マッピング画像も遅延なく同期して動かせるか試してみた。

最初はマッピング画像どうしを一つのLayer上で管理し、
ベースの画像は別のLayerとした。
このとき、stateで各画像の位置を管理、
stateを更新することで複数の画像が同期して動くようなレンダリングを試みたものの、
片方の画像をマウスドラッグで動かしたとき、
もう片方が遅れてついてくるようになってしまった。
そこで、今度は一つのStageで全ての画像を描画したところ、
期待通りの動作を実現できた。

## react-konvaのデメリット

けっこう困ったのがImageのサイズとStageのサイズの設定。
UIを作るうえで画像の表示領域はある程度指定しなければならない。
その反面、表示する画像のサイズはimage.onloadで読み込むまでは分からない。
また、画像のズーム制御を細かく実装している都合、
ブラウザのwindowサイズの変更に合わせて画像のサイズまで変更するのはかなり厳しい。

そこでの対応策として、

- Stageのサイズはwindowサイズに合わせてレスポンシブに変更

- ImageのサイズやPositionは一定に保つ

の方針で実装を試みた。
これをやったとき、実際にStageのサイズとして設定した領域よりも小さい範囲でしか画像を表示できなかったり、
Stageサイズを変更しまくると、ズーム制御がおかしくなるバグが見られた。
その後、styleのpositionを適切に設定したら上手くいくようになった。
NSAttributedStringを使ってHTMLを表示

データに含まれるHTMLをWebViewを使わずに表示したいことってありますよね。
そんなときはNSAttributedStringを使うことで実現が可能です。

## NSAttributedStringとは

文字列の属性を管理するためのクラスで、文字列のフォントサイズを変更したり、
装飾を加えたりすることができます。

## HTMLを含む文字列を表示

`init(data:options:documentAttributes:)`で初期化する際に、
のoptionsに`NSHTMLTextDocumentType`を指定してあげます。

```
let html = "<b>foo</b>bar"
if let data = html.data(using: .utf8) {
    let attr = try? NSAttributedString(data: data,
                                       options: [NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType],
                                       documentAttributes: nil)
    label.attributedText = attr
}
```
こんな感じの表示になります。
![Simulator Screen Shot 2017.09.10 11.18.41.png](https://qiita-image-store.s3.amazonaws.com/0/12032/90cb2e64-9f2c-7260-5921-5b035991c203.png)
HistoryStateサンプル

#HistoryStateのサンプル
##テスト用QML
```qml
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import QtQml.StateMachine 1.0 as DSM
import QtMultimedia 5.9

ApplicationWindow {
    id: root
    width: 640
    height: 480
    title: "HistoryState Test"
    visible: true

    Audio { id: sound; source: "Sounds/btn01.mp3" }


    Row {
        spacing: 2

        Rectangle { id: colorBox; width: root.width / 2; height: root.height }

        // ボタン
        Button {
            id: button
            width: root.width / 2
            height: root.height
            text: "Press me"
            onClicked: sound.play()

            // StateMachine 定義
            // 初期状態は parentState
            DSM.StateMachine {
                id: stateMachine
                initialState: parentState
                running: true

                // parentState 定義
                // 初期子状態は child2
                DSM.State {
                    id: parentState
                    initialState: child2
                    onEntered: console.log("parentState entered")
                    onExited: console.log("parentState exited")

                    // child1 子状態定義
                    DSM.State {
                        id: child1
                        onEntered: { console.log("child1 entered"); colorBox.color = "blue"; }  // 青くする
                        onExited: console.log("child1 exited")
                    }

                    // child2 子状態定義
                    DSM.State {
                        id: child2
                        onEntered: { console.log("child2 entered"); colorBox.color = "red"; }   // 赤くする
                        onExited: console.log("child2 exited")
                    }

                    // HistoryState 定義
                    // 初期状態の履歴は child1 にする
                    // HistoryState により、child1 と child2 を繰り返す
                    DSM.HistoryState {
                        id: historyState
                        defaultState: child1
                    }

                    // トリガはボタンのクリックとする
                    DSM.SignalTransition {
                        targetState: historyState
                        signal: button.clicked
                    }
                }
            }
        }
    }
}
```
##実行結果
[![SignalTransitionサンプル動画](http://img.youtube.com/vi/vEsV0V3AWVw/0.jpg)](http://www.youtube.com/watch?v=vEsV0V3AWVw)
※Linux Mint 18.2 & Qt 5.9.1使用
Matplotlib > view_init(elev=None, azim=None)のデフォルト値 > elev = 30, azim = -60

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
```

https://matplotlib.org/mpl_toolkits/mplot3d/api.html
に掲載されているViewを変更するAPI

>view_init(elev=None, azim=None)

デフォルト値が書いていないような気がする。

以下で見つけた。
https://github.com/matplotlib/matplotlib/blob/master/lib/mpl_toolkits/mplot3d/axes3d.py

>           ================   =========================================
          Keyword            Description
          ================   =========================================
          *azim*             Azimuthal viewing angle (default -60)
          *elev*             Elevation viewing angle (default 30)
          *zscale*           [%(scale)s]
          *sharez*           Other axes to share z-limits with
          *proj_type*        'persp' or 'ortho' (default 'persp')
          ================   =========================================

こういうのはバージョンが上がると変更されるのだろうか。
keynav

* [ポインティングデバイスのないKING JIM ポメラDM200でX Windowのマウス操作をする方法](http://hitoriblog.com/?p=52262)

の通り設定すればよいが、中でも感動したのがランチャー。

```sh:常駐
sudo apt install -y keynav

keynav
```

```sh:~/.keynavrc
5 sh "xfce4-terminal",end
6 sh "firefox http://google.co.jp",end
7 sh "thunderbird",end
8 sh "midori",end
9 sh "gvim",end
0 sh "emacs",end
```

`ctrl + ;` の後 数字キーを押すことで指定したコマンドが起動できるのが便利に感じた。
[Ruby]クラスとインスタンスを振り返ってみる。

ここのところRailsしかやっておらず、そもそものRubyとは何か、オブジェクト指向とは何か、もうすっかり忘れていたので、こんなコードを書いてみました。

## コード
```
class Dog
  @@hoeru = "うぉぉぉぉん"
  @@count = 0

  def initialize
    puts  "新しいペットの名前は？"
    @name = gets.chomp
    puts "作成しました。#{@name}です。"
    Dog.count_dogs
  end

  def self.how_many_dogs
    return "今は#{@@count}匹いるよ！"
  end

  def self.count_dogs
    @@count += 1
  end

  def hoeru
    puts @@hoeru
  end
end

dog = Dog.new
Dog.how_many_dogs
dog.hoeru
```

説明してみたいと思います。

### クラスメソッド
`Dog.new`は、クラスメソッドです。新しいインスタンスを作成し、`initialize`メソッドが実行されます。これによってインスタンスが初期化されるわけですね。

以下はクラスメソッドを定義しています。

```
  def self.how_many_dogs
    return "今は#{@@count}匹いるよ！"
  end
```

クラスメソッドは`Dog.new`と同じで、`Dog.how_many_dogs`と書くことで呼び出せます。
クラスで共通の情報を使った処理に使用します。

### クラス変数
```
@@hoeru
@@count
```
これはクラス変数です。クラスの中ならどこからでも参照できる変数です。クラス内で共通する情報を定義しておきます。

### インスタンス変数
`@name`はインスタンス変数です。
railsではコントローラで定義され、ビューで参照することができます。
そのクラス内であればどこからでも参照できます。

インスタンスって何かなって考えると、説明に窮してしまいます。
インスタンスは、クラスに基づいて生み出されたオブジェクトのことです。
基本的には１度、変数に入れておいて使うみたいですね。そして変数に新たな値を上書きしてしまえば、そのインスタンスはどこかに行ってしまうようです。
うーんこの辺がいまいち分かっていないです。
えらい人たちが色々試行錯誤してきて、とりあえずクラスとインスタンスっていうやり方が一番合理的でスムーズに行くと思ったんでしょう。

### インスタンスメソッド
```
  def hoeru
    puts @@hoeru
  end
```

これはインスタンスメソッドです。
インスタンスに使わせたいメソッドを定義します。
うーん、この場合はクラスメソッドで良いような気がしますね。
`Dog.`で使いたいメソッドはクラスメソッドで、`dog.`で使いたいメソッドはインスタンスメソッドで、という感じでしょうか。

うーん…… よくわかっていないです。
勉強しなおそう……
Git for Windowsのdiffの文字化けをどうにかする

Git for Windowsで日本語が入ったファイルのdiffを取ると、UTF-8であろうとShift-JISであろうと文字化けすることがあります。

```diff
diff --git a/nihongo.txt b/nihongo.txt
index 0005c4e..5d6ea9c 100644
--- a/nihongo.txt
+++ b/nihongo.txt
@@ -1 +1 @@
-<E3><81><82><E3><81><84><E3><81><86><E3><81><88><E3><81><8A>
+<E3><81><8B><E3><81><8D><E3><81><8F><E3><81><91><E3><81><93>
```

`LANG`環境変数を正しく設定することで、この文字化けを回避することができます。

```bash
SETX LANG ja_JP.UTF-8
```

これで、うまく表示されるようになったはずです。

```diff
diff --git a/nihongo.txt b/nihongo.txt
index 0005c4e..5d6ea9c 100644
--- a/nihongo.txt
+++ b/nihongo.txt
@@ -1 +1 @@
-あいうえお
+かきくけこ
```
CentOS7のdockerでMySQL Cluster環境を構築する(ついでにPythonから接続確認する)



## dockerをインストールする
dockerがインストールされていないときは、インストールします。

```shell-session
$ sudo yum install docker
$ sudo systemctl start docker
$ sudo systemctl enable docker
$ sudo systemctl status docker
~~
Active: active (running)
```

## dockerイメージの取得
hubから公式のイメージを取得します。

```shell-session
$ sudo docker pull mysql/mysql-cluster
$ sudo docker images
```

## MySQL Cluster クラスタの構築
ドキュメント通りでできました。

```shell-session
$ sudo docker network create cluster --subnet=192.168.0.0/16
$ sudo docker run -d --net=cluster --name=management1 --ip=192.168.0.2 mysql/mysql-cluster ndb_mgmd
$ sudo docker run -d --net=cluster --name=ndb1 --ip=192.168.0.3 mysql/mysql-cluster ndbd
$ sudo docker run -d --net=cluster --name=ndb2 --ip=192.168.0.4 mysql/mysql-cluster ndbd
$ sudo docker run -d --net=cluster --name=mysql1 --ip=192.168.0.10 -e MYSQL_RANDOM_ROOT_PASSWORD=true mysql/mysql-cluster mysqld

$ sudo docker logs mysql1 2>&1 | grep PASSWORD
$ sudo docker exec -it mysql1 mysql -uroot -p
```

```sql
ALTER USER 'root'@'localhost' IDENTIFIED BY 'root';
```

ndbdがクラスタのDB本体、ndb_mgmdがndbを管理するサービスです。
基本的にクライアントはSQLサーバに接続すれば良いようです。

## 確認する
確認のためのユーザとデータベースを作っておきます。

```sql
CREATE USER hoge;
SET PASSWORD FOR hoge = PASSWORD('hoge');
CREATE DATABASE mydb;
GRANT ALL ON mydb.* TO hoge;
```

作成したユーザでテーブルとテストデータを用意します。

```sql
CREATE TABLE person (
   id int AUTO_INCREMENT NOT NULL PRIMARY KEY,
   name varchar(256)
) engine=ndbcluster;
INSERT INTO person (name) VALUES ('Shibuya Rin');
INSERT INTO person (name) VALUES ('Futaba Anzu');
INSERT INTO person (name) VALUES ('Mimura Kanako');
```

ストレージエンジン「ndbcluster」がMySQL Clusterですが、特にInnoDBと構文的な違いはありませんね。

接続確認はホストのPythonから確認することにしました。
Pythonからの接続に使用するMySQLのドライバは複数あるようなのですが、特にこだわりもないので、公式のものを使用することにします。

```shell-session
$ sudo pip3.6 install --egg mysql-connector-python-rf
```

チュートリアルを参考にテストコードを作成します。

```py:mysql-python.py
import mysql.connector

cnx = mysql.connector.connect(
    host='192.168.0.10',
    user='hoge',
    password='hoge',
    database='mydb'
)
cursor = cnx.cursor();

cursor.execute("SELECT * FROM person");
for (id, name) in cursor:
    print("{}, {}".format(id, name))

cursor.close()
cnx.close()
```

実行してみます。

```shell-session
$ python3.6 mysql-python.py
1, Shibuya Rin
2, Futaba Anzu
3, Mimura Kanako
```

問題なさそうです。
終わりです。


## 参考
https://hub.docker.com/r/mysql/mysql-cluster/
https://dev.mysql.com/doc/connector-python/en/
http://blog.amedama.jp/entry/2015/09/24/222040
http://qiita.com/h-imaoka/items/5702d51d8447da1c045f
CentOS7にPython3をインストール


Pythonの最新版は3.xなのですが、2と互換性がないとかで、2.xもよく使われています。
CentOS7に標準で含まれているpythonも2.xです。
どうせなら3.xを使いたいということで、CentOS7にPython3をインストールしました。


## Python3のインストール
IUSというリポジトリを追加します。

```shell-session
$ sudo yum install -y https://centos7.iuscommunity.org/ius-release.rpm
```

現時点での最新の3.x系は3.6なので3.6をインストールします。

```shell-session
$ yum search python36
$ sudo yum install python36u python36u-libs python36u-devel python36u-pip
```

検索して必要そうなパッケージをインストールします。

## 確認

```py3:helloworld.py
print("Hello World!")
```

```shell-session
$ python3.6 helloworld.py
Hello World!
```

前述の通り、CentOS7にはpythonが含まれていて、これを置き換えるつもりはないので、実行時は「python3.6」というコマンドで実行しています。

```shell-session
$ python --version
Python 2.7.5
$ python3.6 --version
Python 3.6.2
```

終わりです。

## 参考
https://weblabo.oscasierra.net/python3-centos7-yum-install/
MacのVisual Studio Codeで候補を表示したい

Windowsだと`ctrl + space`で候補が表示されるのに、Macだと(`command + space`)表示されないことがあります。
というかSpotlight検索が表示されます。

# 対処法
1. [システム環境設定] → [キーボード] → [ショートカット] → [Spotlight]から「Spotlight検索を表示」のチェックを外す
1. Visual Studio Codeを再起動する

以上です。よろしくお願いします。
チラ裏: GoCD使おうとしたが起動すら成功しなかった

ubuntu 16.10

## deb インストール

https://www.gocd.org/download/

* go-server_17.9.0-5368_all.deb
* go-agent_17.9.0-5368_all.deb

## 起動

* 設定: /etc/default/go-server

```
sudo /etc/init.d/go-server start
```

## Java 1.9だと動かないので1.8を入れる

/var/log/go-server/go-server.out.log

```rb
[2017年  9月 10日 日曜日 08:21:07 JST] Starting Go Server in directory: /var/lib/go-server
Running GoCD requires Java version 1.8. You are currently running with Java version 9. GoCD will now exit!
```

```
sudo apt purge openjdk-9-jre-headless

sudo apt install -y openjdk-8-jre-headless
```

```
sudo /etc/init.d/go-server start

[2017年  9月 10日 日曜日 08:26:46 JST] using default settings from /etc/default/go-server
Error starting Go Server.
```

以下エラー

```rb:/var/log/go-server/go-server.log
org.springframework.beans.factory.UnsatisfiedDependencyException
: Error creating bean with name 'userService' defined in file [/var/lib/go-server/work/jetty-0.0.0.0-8153-cruise.war-_go-any-/webapp/WEB-INF/classes/com/thoughtworks/go/server/service/UserService.class]
: Unsatisfied dependency expressed through constructor argument with index 0 of type [com.thoughtworks.go.server.dao.UserDao]
: 
: Error creating bean with name 'userSqlMapDao'
: Requested bean is currently in creation
: Is there an unresolvable circular reference?; nested exception is org.springframework.beans.factory.BeanCurrentlyInCreationException
: Error creating bean with name 'userSqlMapDao'
: Requested bean is currently in creation
: Is there an unresolvable circular reference?
```

* https://hub.docker.com/r/gocd/gocd-server/
* https://hub.docker.com/r/gocd/

を使うのがてっとり早そう
DirCaster をaac対応にする。

podcastで　aac形式を　使いたくなったので　Dircaster　を　改修した　ときのメモ

```php:dircaster.php
        switch (strrchr(strtolower($file), ".")) {
          case ".mp3";
          case ".aac";
            $tit = @$ThisFileInfo['id3v2']['comments']['title'][0]; // artist from any/all available tag formats
            $alb = @$ThisFileInfo['id3v2']['comments']['album'][0]; // artist from any/all available tag formats
            $art = @$ThisFileInfo['id3v2']['comments']['artist'][0]; // artist from any/all available tag formats
            $com = @$ThisFileInfo['id3v2']['comments']['comment'][0];

```

と　.mp3　の　case　文のつぎの行に　.aac　を　追加する。

```php:config_inc.php
  // Allowed File Types (file extensions) in Feed URL, make sure your type is listed
  $sftypes = "(.mp3 .aac .m4a .asf .wma .wav .avi .mov .m4b .m4v)";
```

設定ファイルの　対象ファイルに　.aac　を　追加する。

これだけです。
「CSS設計の教科書」に登場した、七人のCSS侍まとめ。

[Web制作者のためのCSS設計の教科書](https://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AECSS%E8%A8%AD%E8%A8%88%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%A2%E3%83%80%E3%83%B3Web%E9%96%8B%E7%99%BA%E3%81%AB%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84%E3%80%8C%E4%BF%AE%E6%AD%A3%E3%81%97%E3%82%84%E3%81%99%E3%81%84CSS%E3%80%8D%E3%81%AE%E8%A8%AD%E8%A8%88%E6%89%8B%E6%B3%95-%E8%B0%B7-%E6%8B%93%E6%A8%B9/dp/4844336355)、
この本の中で紹介された界隈で凄そうな方々を、
情報収集用にメモしておきました。:memo::moyai:

#フィリップウォルトン
![](https://pbs.twimg.com/profile_images/556908160405876738/1FTm29BI_200x200.jpeg)
twitter:[@philwalton](https://twitter.com/philwalton)
ブログ：https://philipwalton.com/
github:https://github.com/philwalton
Googleのエンジニアであり、HTML/CSS関連のツールやドキュメントを残している。


#ニコールサリバン
![](https://pbs.twimg.com/profile_images/796069133926350848/Gk12QrZC_200x200.jpg)
twitter:[@stubbornella](https://twitter.com/stubbornella)
ブログ：http://www.stubbornella.org/content/
github:https://github.com/stubbornella
元・米Yahoo!のデベロッパー。現在はコンサルタントや世界各地で講演活動を行っている。OOCSSを提唱した人。

#ニコラスザッカス
![](https://pbs.twimg.com/profile_images/637638517770752000/tejK-Ehv_200x200.jpg)
twitter:[@slicknet](https://twitter.com/slicknet)
ブログ：https://www.nczonline.net/
github:https://github.com/slicknet （違うかも？）
元・米Yahoo!のデベロッパー。著名なjavascript関連書籍の執筆もしている。
CSS Lint（"彼ら"の考えたCSSのベストプラクティスに適応したCSSかどうかチェックするツール）を作った人。

#ジョナサンスヌーク
![](https://pbs.twimg.com/profile_images/717669500917682176/_huneE84_200x200.jpg)
twitter:[@snookca](https://twitter.com/snookca)
ブログ：https://snook.ca/
github:https://github.com/snookca
元・米Yahoo!のデベロッパー。Yahoo!Mailなどを担当していた。
SMACSS（OOCSSSのコンセプトをベースに作られたフロントエンドに関するガイドライン）を作った人。

#ハリーロバーツ
![](https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f_200x200.jpeg)
twitter:[@csswizardry](https://twitter.com/csswizardry)
ブログ：https://csswizardry.com/
github:https://github.com/csswizardry
「CSS wizardry」というcss、フロントエンドに関するブログを運営している。

#ニコラス・ギャラガー
![](https://pbs.twimg.com/profile_images/901131879625048064/AzcJmFl-_200x200.jpg)
twitter:[@necolas](https://twitter.com/necolas)
ブログ：http://nicolasgallagher.com/
github:https://github.com/necolas
twitterで働いてるらしい。
normalize.cssの提唱者。SuitCSSを開発。

#谷拓樹
![](https://pbs.twimg.com/profile_images/858696855365877761/bXr39w5x_200x200.jpg)
twitter:[@hiloki](https://twitter.com/hiloki)
ブログ：http://inkdesign.jp/
github:https://github.com/hiloki
元・サイバーエージェント。現・ツクルバ。
「Web制作者のためのCSS設計の教科書」著者。
寄稿とかもしている。https://html5experts.jp/hiloki/
ガイドライン[FLOCSS](https://github.com/hiloki/flocss)を現在進行中で作成。
ユニークなキーで grep する場合のベストなオプションを考える

# したいこと
* 100万行程度のテキストファイルから、ユニークな ID でレコードを抽出したい
* 上記処理を数万～数億回と行う
* できるだけ早いほうがいい

## 対象のファイル

```bash
$ ll -h list.csv
-rw-rw-r-- 1 togawa togawa 37M  8月 22 16:51 2017 list.csv

$ wc -l list.csv
995283 list.csv

$ cat list.csv
ASDFGHJ,0,0,0000,0,0,1,0,0,0,東京都三鷹市
...
ZXCVBNM,1,1,1234,0,1,25,0,0,0,東京都八王子市
```

# ポイント

* 大文字小文字は区別させない
* パイプを介さない
* 件数を1件にする

## 大文字小文字は区別させない

`-i` オプションをつけると大文字と小文字の区別なく検索してくれるが、その分処理が遅くなる。

```bash
$ time cat list.csv | grep ZXCVBNM
ZXCVBNM,1,1,1234,0,1,25,0,0,0,東京都八王子市

real    0m0.048s
user    0m0.030s
sys     0m0.018s

$ time cat list.csv | grep -i ZXCVBNM
ZXCVBNM,1,1,1234,0,1,25,0,0,0,東京都八王子市

real    0m1.845s
user    0m1.816s
sys     0m0.022s
```

できれば前処理でこのオプションを付けなくても済むようにしておきたい。

なお、 `grep -i` については grep 2.17 より大幅な高速化がなされている。
http://news.mynavi.jp/news/2014/02/21/053/

今回検証した環境ではなんと **2.6.3** だった。そりゃ遅いわけである。

## パイプを介さない

ファイルを読み込んで処理するときは `cat` してからパイプで渡すという私の癖がある。パイプで渡された方のコマンドは引数が減る分、すっきりして読みやすくなる (と感じている)。
しかし、その分余計な fork が発生してしまうので処理は遅くなる。

```bash
$ time cat list.csv | grep ZXCVBNM
ZXCVBNM,1,1,1234,0,1,25,0,0,0,東京都八王子市

real    0m0.048s
user    0m0.030s
sys     0m0.018s

$ time grep ZXCVBNM list.csv
ZXCVBNM,1,1,1234,0,1,25,0,0,0,東京都八王子市

real    0m0.037s
user    0m0.032s
sys     0m0.005s
```

## 件数を1件にする

grep の `-m` オプションは **何件までヒットさせてもよいか** を指定するものである。言い換えると、 **この件数を超えたらその時点で検索処理をやめる** とすることができる。
今回のようにユニークなキーで grep する場合は検索結果が 1 件であることが保証されているため `grep -m 1` としてもよさそうである。

```bash
$ time grep -m 1 ASDFGHJ list.csv
ASDFGHJ,0,0,0000,0,0,1,0,0,0,東京都三鷹市

real    0m0.001s
user    0m0.000s
sys     0m0.000s

$ time grep ASDFGHJ list.csv
ASDFGHJ,0,0,0000,0,0,1,0,0,0,東京都三鷹市

real    0m0.035s
user    0m0.028s
sys     0m0.007s
```

上記の例は、 `ASDFGHJ` というキーを持つレコード (ファイルの先頭行) を grep したときの結果である。 `-m -1` した場合、1レコード目の検索で早速ヒットしたため、以降の検索は中止している。
一方、 `-m 1` していない方はヒットしようがしまいが最終レコードまで検索は続けるため、その分処理時間は大きくなる。

# まとめ

* grep 処理をループさせる場合、書き方によっては処理のボトルネックになりかねない
* grep によって実現させたいことを明確化し、適切なオプションを使うことである程度の処理速度改善が見込める
    * 特にユニークなキーで検索する場合は `-m 1` が有効
"Open Command" on Bash on Ubuntu on Windows 

Creators Updateにより、[BashからWindowsのexeを実行できる(逆も可能)ようになりました。](http://pc.watch.impress.co.jp/docs/column/nishikawa/1054154.html)
そこでMacのOpenコマンドのように、「Bashから"Windows側で"ファイルを開く」コマンドを作ってみます。

[Bash on Ubuntu on Windowsでopenコマンドみたいなシェルスクリプト](http://qiita.com/A-OHASHI/items/8be1c55482de28e2b4d8)を参考にしました

1. 空白を含むパスへの対策
Bashのデフォルト区切り文字はスペースのため、ファイルパスに空白が含まれると異なる複数の引数として扱われてしまう。
例えば`A B.txt`というファイルを引数に`open A\ B.txt`とすると`$1=A`、`$2=B.txt`と分割されてしまう。
区切り文字を別の文字に変更することで対処する(ここでは改行記号)

2. パス変換
ファイルがWindows上かUbuntu上かで処理を分ける。
Windows:`/mnt/c/A.txt`->`c:\A.txt`
Ubuntuホームディレクトリ:`/home/USER/A.txt`->`%LocalAppData%\lxss\home\USER\A.txt`
Ubuntuシステムディレクトリの場合は危険なので開かせない。

```bash:OpenWin.sh
#!/bin/bash
IFS=$'\n'

# check number of arguments
if   [ $# -le 0 ] ; then
    echo too few arguments.
    exit 0
elif [ $# -ge 2 ] ; then
    echo too many arguments.
    exit 0
elif [ ! -e $1 ] ; then
    echo "$1" is not exist.
    exit 0
fi

absolute_path=$(readlink -f $1)

# replace
if   [[ $absolute_path =~ ^/mnt/[A-z]{1}/ ]] ; then
    # Windows mount directory
    replace_path=$(echo $absolute_path | sed -e 's|\/mnt\/\([A-z]\)|\1:|g'   -e 's|\/|\\|g')
elif [[ $absolute_path =~ ^/home/ ]] ; then
    # Ubuntu home directory
    replace_path=$(echo $absolute_path | sed -e 's|^|%LocalAppData%\\lxss|g' -e 's|\/|\\|g')
else
    # Ubuntu system directory
    echo "$1" is linux system directory.exit.
    exit 0
fi

# open
cmd.exe /c start "" "$replace_path"

exit 0
```

Windows上のファイルをWindows側で開く分には問題ないが、
LXSS上のファイルをWindows側で開くのは危険なのでそちらは多用しないほうがよさそう。
Unityで完全にログを消し去る方法

ネイティブ開発の名残でプリプロセッサで制御していましたが、もっといい方法がありました。

## 失敗例

ラッパーを作ってプリプロセッサで制御

```csharp
class Debug{
    public static void Log(System.Object msg){
#if DEBUG
        UnityEngine.Debug.Log (msg);
#endif
    }
}
```

logEnabledの設定

```csharp
UnityEngine.Debug.unityLogger.logEnabled = false;
```

## 成功例
ラッパーを作ってConditional属性で制御
(Scripting Define SymbolsにLOG_ENABLE追加)

```csharp
#if (LOG_ENABLE == false)
class Debug{
    [Conditional("LOG_ENABLE")]
    public static void Log(System.Object msg){
    }
}
#endif
```

ラッパーの中でログ出力すると、consoleWindowsからジャンプしづらいので
ログ有効時はクラス自体を消すようにしています。

# まとめ

失敗例のコードでもログを表示させないことはできています。
しかし、関数呼び出しは評価されるため以下のような文字列を大量につなげるコードがあった場合GCが多発します。

```csharp
string log = "0123456789";
Debug.Log(
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log +
	log + log + log + log + log + log + log + log + log + log
	);
```

Conditional属性は呼び出し元を消去するため問題ありません。

今更感ある内容かもしれませんがご参考になれば幸いです
Railsのcolor_fieldの使い方

<h1>概要</h1>

<p>Railsのビューヘルパーにcolor_fieldというものがある。<br>使い方を調べてもあまり情報がなかったので自分なりのメモ。</p>
<br>

```ruby:form.html.erb
<%= f.color_field :color %>
```

このようにすることで色を選択できるようになり、
選択した色のカラーコードが送られる。
(colorというカラムがあるものとする)

```
+----+--------+------+-------------------------+-------------------------+---------+
| id |        |      | created_at              | updated_at              | color   |
+----+--------+------+-------------------------+-------------------------+---------+
|    |        |      |                         |                         | #ff8000 |
+----+--------+------+-------------------------+-------------------------+---------+

```


このようにカラーコードが保存されていることが確認できる。
あとはそれをテンプレート側で、、、

```erb:sample.html.erb
<div style="background-color:<%= @article.color %>">
```


<p>少し強引な気もするがbackground-colorは選択した色になっている。</p>
【Rails】ビューヘルパーまとめ

<h1>Railsのビューヘルパーまとめ</h1>
<%= f.text_field %>
<%= f.password_field %>
<%= f.text_area %>
<%= f.file_field %>
<%= f.check_box %>
<%= f.radio_button %>
<%= f.select %>
<%= f.hidden_field %>
<%= f.email_field %>
<%= f.number_field %>
<%= f.range_field %>
<%= f.search_field %>
<%= f.telephone_field %>
<%= f.url_field %>
<%= f.color_field %>
<%= f.date_field %>
<%= f.datetime_field %>
<%= f.datetime_local_field %>
<%= f.time_field %>
<%= f.month_field %>
<%= f.week_field %>
<%= f.submit %>

上記以外にもありますが、とりあえずこれだけ。
Embulkをインストール

## 概要
Embulkを使うことがあったので、インストール方法をメモしておく。

## javaのインストール

Embulkは、Javaアプリケーションです。
Javaがインストールされていることを確認してください。

```sh:ターミナル
## 確認
$ which java
-bash: $: コマンドが見つかりません

## インストール
$ sudo yum install java-1.8.0-openjdk
```

## 自分の環境にのみインストール
上記の方法でインストールできない場合は、手動で自分の環境にのみインストールする。

[Oracleのページ](http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html)でダウンロードURLをコピーする
※「Accept License Agreement」にチェックを入れないとコピーできない

### Javaの設置 (インストール)
```sh:ターミナル
$ wget http://download.oracle.com/otn-pub/java/jdk/8u144-b01/090f390dda5b47b9b721c7dfaa008135/jre-8u144-linux-x64.tar.gz \
--no-cookies --header "Cookie: oraclelicense=accept-securebackup-cookie"

$ sudo mkdir -p ~/.java/
$ sudo tar zxvf jre-8u144-linux-x64.tar.gz -C ~/.java/
```

### Javaのパスを通す
.bashrcに下記を追加する。

```bash:.bashrc
export JAVA_HOME=~/.java/jre1.8.0_144
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/jre/lib:$JAVA_HOME/lib:$JAVA_HOME/lib/tools.jar
```

下記のコマンドでパス設定を反映する。

```sh:ターミナル
$ source ~/.bashrc
```

### Javaのバージョン確認
```sh:ターミナル
$ java -version
java version "1.8.0_144"
Java(TM) SE Runtime Environment (build 1.8.0_144-b01)
Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)
```

## Embulkのインストール
下記コマンドで、Embulkをダウンロードして配置します。

```sh:ターミナル
$ curl --create-dirs -o ~/.embulk/bin/embulk -L "https://dl.embulk.org/embulk-latest.jar"
$ chmod +x ~/.embulk/bin/embulk
```

### Embulkのパスを通す
「.bashrc」にパスを追加します。

```bash:.bashrc
# install embulk
export PATH="$HOME/.embulk/bin:$PATH"
```

パスの設定を反映する。

```sh:ターミナル
$ source ~/.bashrc
```

### Enbulkのバージョン確認
```sh:ターミナル
$ embulk --version
Embulk v0.8.32
```

## Enbulkのアップデート
```sh:ターミナル
$ embulk selfupdate
2017-09-10 00:50:20.125 +0900: Embulk v0.8.32
Checking the latest version...
Already up-to-date. 0.8.32 is the latest version.
```

## 参考サイト (Embulk)
- [github.com - embulk/embulk](https://github.com/embulk/embulk#linux--mac--bsd)
- [embulkのインストール・アップデート方法](http://qiita.com/y-ken/items/31890f4f188321cb88a7)

## 参考サイト (Java)
- [Java SE Runtime Environment 8 - Downloads](http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html)
- [Javaをダウンロードしてインストールする](https://www.java.com/ja/download/help/linux_install.xml)
- [Issues uncompressing a tar.gz file (gzip: stdin: not in gzip format)](https://stackoverflow.com/questions/16381917/issues-uncompressing-a-tar-gz-file)
- [wget/curlでOracleJDKをダウンロード](http://qiita.com/hidekuro/items/6bcf88ec7e233fb9cf79)
- [CentOSにJava(JRE)を手動インストール](http://tec-room.com/?p=1159)
極力StoryBoardを使わないXcodeによるSwiftでのiOS開発 1

XcodeでのSwiftのiOSアプリ開発の備忘録です．
昨今，学んだことがWeb上にあまり掲載されておらず，不便に感じたので，どうせなら自分で作成してみることにしました．
学んだことを片っ端から記述してくので，不定期で更新します．
#環境
私は下記の環境で開発を行なっております．
- 端末: Macbook Air
- OS: macOS Sierra
- 言語: Swift 3

# Xcodeを起動

1.  [Create a new Xcode project]を選択
![スクリーンショット 2017-09-08 18.37.41.png](https://qiita-image-store.s3.amazonaws.com/0/86761/60d9a881-d4a1-f122-5a0b-c0ce65b2df48.png)

2.  iOSタグの[Single View Application]を選択 -> [Next]
    - ここからなんでも作れるので，とりあえずこれを選んでおけば間違いない
3.  下記の画面のように設定 -> [Next]
    - もちろん[Organization Name],[Organization Identify]は適当に入れて
![スクリーンショット 2017-09-08 18.49.58.png](https://qiita-image-store.s3.amazonaws.com/0/86761/f79ce1b7-0633-cbe9-284f-df958a4db714.png)
4. 適当なディレクトリを選択 -> [Create]

# んでは，次回はViewからViewへの画面遷移まで行います．
フレンズのトランプジェネレータを作ったよ

# はじまり
たのしー！夏も終わってしまいました。
私はコントラクトブリッジなんぞを少しやるのですが、時々無性にオリジナルのトランプを作りたくなるときがあります。
そんなわけで、canvasタグの勉強がてら、けものフレンズのトランプを表示するジェネレータを作ってみました。


# つかいかた
- [ページ](https://asny23.github.io/KemonoTrump/)を開いて、カードのスートと数、フレンズを選択します。
![kemono_trump-1.png](https://qiita-image-store.s3.amazonaws.com/0/118352/9aa42b27-99c0-d801-3a81-11f09fddf7d5.png)

- 「たのしー！」を押します。

- トランプのカード画像が表示されます。
![kemono_trump-2.png](https://qiita-image-store.s3.amazonaws.com/0/118352/b1f1a677-cebc-0281-f3ef-0a77992e9a01.png)


# つくりかた

## そざい
[けものフレンズアイコンまとめ【フリーアイコン】 - Togetterまとめ](https://togetter.com/li/1088229)
こちらのアイコンと

[Vector Playing Cards download | SourceForge.net](https://sourceforge.net/projects/vector-cards/)
こちらの画像を自分で編集したものを使っています。

素材製作者の方々、ありがとうございます。

## かんばす
canvasタグで描画する方法はいくつかあるようなのですが、
簡単に書くと

```js
  var cardWidth = 476;
  var cardHeight = 666;

  var canvas = document.getElementById("kemono_trump");
  canvas.width = cardWidth;
  canvas.height = cardHeight;
  var context = canvas.getContext("2d");
  var cardImage = new Image();
  cardImage.src = 'card.svg';
  cardImage.addEventListener('load', function () {
    context.drawImage(cardImage, 0, 0, cardWidth, cardHeight);
  });
```
こんなようなjsになります。
今回カード画像はsvg、フレンズのアイコンはjpgなのですが、どちらももこれでできるのがありがたいですね。

## くふう
- カード画像はパラメータつきURLで表示されるので、フォーム入力しなくても直でカード画像を表示できます。
- カード画像を描画したあとにフレンズのアイコンを描画するという順にしないとアイコンが見えなくなってしまいます。
`addEventListener` を入れ子にして解決しましたが、いまいち美しくないので何かいい方法はないものか。

# これから
slackでインライン表示ができるとたのしー！ので、また別の手法で画像を返すシステムを作りたいですね。
MySQL の最大データサイズを MySQL のコンソールから変更する

MySQL には登録できるデータサイズの上限がありますが、その設定を変更する方法です。

my.cnf に書き込む方法は結構たくさんあるのですが、MySQL のコンソールから設定する方法が見つからなかったのでメモ。

参考にしたのは泣く子も黙る stack overflow。

[MySQL Error 1153 - Got a packet bigger than 'max_allowed_packet' bytes - Stack Overflow](https://stackoverflow.com/questions/93128/mysql-error-1153-got-a-packet-bigger-than-max-allowed-packet-bytes)

```mysql
set global net_buffer_length=1000000; 
set global max_allowed_packet=1000000000;
```

my.cnf をいじりたくないとか、PHP の Builtin Server でテストしてて .htaccess に設定をかけないとか諸々の事情があるときにはこれで。