OmniAICreator/Qiita-1.07M huggingface dataset:
PHPでゲーム用の画像連結プログラムを作ったときのメモ

#動機
格ゲーライクなゲームを作っててプログラムで使用する個別の画像を横一列に連結させたい。
しかしPhotoshopの手作業で連結するのがぶっちゃけしんどいので、手軽なところでPHPプログラムで連結させるのがいいかなーと思ったのが動機です（--;）

#環境
Windows10, PHP&Apacheインストール済み

#どうしたい？
こういう画像たちを

![Swing01.png](https://qiita-image-store.s3.amazonaws.com/0/110583/151d07b7-d882-6024-a713-2aaf1d221a69.png)
![Swing02.png](https://qiita-image-store.s3.amazonaws.com/0/110583/b10c33cb-6f12-e5ed-767a-1c1652a6af8f.png)
![Swing03.png](https://qiita-image-store.s3.amazonaws.com/0/110583/1764e2d1-4764-ed7b-ec78-ce8f5468941d.png)
![Swing04.png](https://qiita-image-store.s3.amazonaws.com/0/110583/6d8739ee-621f-5329-b30a-3006eb4b9452.png)
![Swing05.png](https://qiita-image-store.s3.amazonaws.com/0/110583/c63a06f2-850e-f2d8-ea7c-84215f87d867.png)


こうしたい

![Swing01.png](https://qiita-image-store.s3.amazonaws.com/0/110583/3362d239-80d3-a0f5-7ac7-ff532e783862.png)


#そしてどうした？
よく使われているImageMagickを使ってみようかと思ったものの、うまく手前のWindowsにインストールできなくてあきらめる。
（持ってきたDLLが「使えない」といわれたとき、やる気のひもが切れる音がした・・・・・・必要になった時また挑戦すればいいや）

しかたないのでデフォのGD関数を使うことに。

#できあがったコード

```
<?php
################
## 画像を横にくっつけていくモジュール
################

##エラーチェック
if($argc<4){
	echo "error01";
	exit;
}
if(!(is_numeric($argv[1]) && is_numeric($argv[2]))){
	echo "error02";
	exit;
}

//画像のサイズ
$width = $argv[1];
$height = $argv[2];

//画像作成
$base = ImageCreateTrueColor($width * ($argc-3), $height);

//ピクセルブレンド停止 → PNGでα値を使用する
imageAlphaBlending($base, false);
imageSaveAlpha($base, true);
//透過色で埋める
$transparent = imageColorAllocateAlpha($base, 0xFF, 0xFF, 0xFF, 0);
imageFill($image, 0, 0, $transparent);

//合成開始
for($i = 3; $i < $argc; $i++){
	echo $argv[$i]."\n";
	$src = ImageCreateFromPng("./".$argv[$i]);
	ImageCopy($base, $src, ($i-3) * $width, 0, 0, 0, $width, $height);
	imagedestroy($src);
	//データ削除
	unlink("./".$argv[$i]);
}
//出力
imagepng ($base, "./gen/".$argv[3], 8);//圧縮率「8」
imagedestroy($base);

echo "generated\n";
?>
```

#プログラムの使い方
使い方としてはまずPHPファイルのあるディレクトリ直下に合体させたい画像たちをコピーしておきましょう。
同じく「gen」ディレクトリも作成しておきましょう。
そしてコンソールで

```
php gattai.php 200 200 Swing01.png Swing02.png Swing03.png Swing04.png Swing05.png
```

とコマンドを打ちましょう。

第1,2パラメータは各画像の大きさ（全ての画像が同じ大きさであることが必須です）、第3から先はカレントディレクトリにある画像ファイル名です。

エラーなしで通れば、「gen」以下に第3パラメータの名前で合体したファイルが作成されているはずです。（ちなみに合体に使われた画像ファイルはunlinkで削除されます）

各自改良して使えば、ゲーム作りたい人には便利なんじゃないかな……っていうか皆さん、プログラマーならこれくらいやってますよね（苦笑）

別にPHPじゃなくてもPerlでもVBScriptでもRubyでもPythonでもコンパイルいらない言語ならなんでもOKです。

ちなみに初心者の方のために一応お伝えしておくと今回のプログラムは、PHPとApacheがインストールされてるPCかサーバ上で実行するのが前提です。

以上です。

参考URL
http://yozorabiyori.blog116.fc2.com/blog-entry-235.html
JavaScript シェルソート

##シェルソート
シェルソートは[挿入ソート](http://qiita.com/may88seiji/items/53e164ca26a3fdbca0c1)を改良されてつくられたソートアルゴリズムです。

間隔を空けて挿入ソートを行い、その間隔をだんだんと狭めていきます。
「ドナルド・シェル」さんにちなんでシェルソートと呼ばれます。

**基本アイデア**
・少ないデータであればソートは速く行える
→データをグループ分けして、少ないデータ量にする
・大雑把でも順番に並んでいる部分が多いと挿入ソートは高速にできる
→間隔を空けてソートすることで「小さい値は一気に前へ、大きい値は一気に後ろへ移動する」効果を利用

**手順**
前提 未整列のデータを用意する。
1　配列の一定間隔ごとに離れた値をひとつのグループとして考える。間隔の変数(step)を用意して、その範囲を狭めていく。
2 各グループに[挿入ソート](http://qiita.com/may88seiji/items/53e164ca26a3fdbca0c1)を行う。挿入ソートは先頭の値を「整列済み」、二つ目以降を「未整列」として処理を開始する。
3 step個のグループができているので、「整列済み」はstep個あることになる。
4 間隔(step)を半分にしていっても、step個以降が「未整列」なおで、ここから挿入ソートを行う。
5 取り出した値をどこに挿入すれば良いのか各グループの後ろからstep間隔で前に向かってみていく。
6 間隔(step)が１つになると全体が１つのグループになる。
7 この状態で挿入ソートを行うと全データに挿入ソートが行われたことになり、整列済みになる。

**ポイント**
・「グループ分けの間隔を半分にしていく繰り返し」を行う
・その中で「整列していない部分から、挿入する値を順番に１つずつ取り出す」繰り返し
・その中で「取り出した値を、整列した部分のどこに挿入するかを判定する」繰り返し
シェルソートは三重の繰り返しで出来ている

```script.js
//未整列のデータ
var a = [10,3,1,9,7,6,8,2,4,5];

//「グループ分けの間隔を半分にしていく繰り返し」
for(var step = parseInt(a.length/2); step > 0; step = parseInt(step/2)){

    //間隔をあけて挿入ソートを行う
    //挿入する値を１つずつ取り出す繰り返し
    for(var i = step; i < a.length; i++){
        //挿入する値を一時的に保存する
        var tmp = a[i];
        //取り出した位置から前に向かって比較するfor文
        for(var j = i; j >= step; j -= step){
            if(a[j-step]>tmp){
                //挿入する値が小さい場合、その値をstep幅だけ後ろへずらす
                a[j] = a[j - step];
            }else{
                //挿入する値が小さくなければ、処理を止める
                break;
            }
        }
        //ずらす処理が終わったところに「挿入する値」をいれる
        a[j] = tmp;
        }
    }

//ソート後の値を表示
console.log(a);
```

**補足**
間隔(step)の最初は「配列の個数を２で割った値」で、それを2で割りながら繰り返す。
割り切れなかった場合を想定して、parseInt()で整数化する
Namazuのインデックス更新メモ

古いWEBシステムでNamazuを使っていてインデックスが更新されてないぞ？ってなったので作業メモ

##原因
インデックス更新のバッチが用意されていなかっただけ。

##対応
1.　とりあえず更新してみる

```
$ mknmz -O /var/www/index /var/www/namazu
```

* /var/www/index　…　インデックスを作成する対象のディレクトリ
* /var/www/namazu　…　インデックスファイルを出力する先

エラーが出た。

```
/usr/local/share/kakasi/kanwadict: No such file or directory
```

どうやらkanwadictがないためエラーになっているらしい。

　
2.　kanwadictを作成

```
mkkanwa kanwadict kakasidict
```

が、何故かkanwadictが作成されない。

試しに[ここ](http://www.asahi-net.or.jp/~yw3t-trns/namazu/kakasi/)からファイルをダウンロードして/usr/local/share/kakasiに.gzを配置してからもう一度実行したら成功。

　
3.　もう一度mknmz実行
成功したけど、検索内容を確認したら文字化けしてる。
namazuの文字コードはEUCみたいなので環境に合わせた文字コードにしてあげる。

　
4.　文字コードを指定する

```
$ mknmz -O /var/www/index /var/www/namazu | nkf -w
```

* nkf -w　…　UTF-8を指定

　

無事、インデックスの更新が完了。
あとはこれをcronに登録しておけば定期的にインデックスが更新される。
自分の環境では1回2〜3分だったから実行タイミングもそこまでシビアではなかった。

しかし、Namazuにしろkanwadictにしろ更新が止まってるようなので別の全文検索に変えたほうが良いのかな…
Elasticsearchをソースからビルドしてインストールする

# 概要
Elasticsearch のソースを github から clone してきてビルドする手順です。
[ドキュメント](https://github.com/elastic/elasticsearch#building-from-source) 通りです。

Elasticsearch は速いスピードでどんどんバージョンアップされており 2017年1月末に [Elasticsearch 5.2 がリリース](https://www.elastic.co/blog/elasticsearch-5-2-0-released) されましたが、5.3 以降で組み込まれる予定の [Field Collapsing] (https://www.elastic.co/guide/en/elasticsearch/reference/5.x/search-request-collapse.html) を利用してみたかったため、未リリースのバージョンをビルドしてみました。

# 手順
### 準備
java8 以上が必要です。

```bash
$ java -version
openjdk version "1.8.0_121"
```

ビルドツールの gradle をインストールします。
[ドキュメント](https://gradle.org/gradle-download/) 通りです。

```bash
$ curl -s https://get.sdkman.io | bash
$ sdk install gradle 3.3
$ gradle -v
------------------------------------------------------------
Gradle 3.3
------------------------------------------------------------ 
```

### ビルド
利用したいバージョンのソースを github から clone します。

```bash
$ git clone -b 5.x https://github.com/elastic/elasticsearch.git
$ cd elasticsearch/
$ git branch
* 5.x
```

ビルドします。
BUILD SUCCESSFUL と出れば完了です。

```bash
$ gradle assemble
```


### インストール
ビルドされたパッケージが distribution/deb ディレクトリや distribution/rpm ディレクトリなどの配下にあるので、環境に合わせてインストールします。

```bash
$ ls distribution/rpm/build/distributions/
elasticsearch-5.3.0-SNAPSHOT.rpm

$ sudo rpm -ivh distribution/rpm/build/distributions/elasticsearch-5.3.0-SNAPSHOT.rpm
```

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

以上で Elasticsearch をソースからビルドしてインストールすることができました。
Field Collapsing とても便利そうです。
require 'sequel'できない

installしてるにも関わらずrequireできない

`sudo gem install sequel`してみる
`Operation not permitted - /usr/bin/sequel`　権限ないと
`brew install ruby`
`sudo gem install sequel`再度インストール

```
Fetching: sequel-4.43.0.gem (100%)
Successfully installed sequel-4.43.0
Parsing documentation for sequel-4.43.0
Installing ri documentation for sequel-4.43.0
Done installing documentation for sequel after 15 seconds
1 gem installed
```

できましたね
.vimrcの設定

#vimの設定(.vimrc)

```vim:.vimrc
"color_schemeの設定
let g:hybrid_use_iTerm_colors = 1
hi String     ctermfg=red guifg=Orange cterm=none gui=none
syntax on

"tab幅の設定
set tabstop=2
set expandtab
set shiftwidth=2
"連続した空白に対するカーソルの動く幅
set softtabstop=2

"行番号の表示
set number
"スワップファイルを作らない
set noswapfile

"自動インデント
set smartindent
set autoindent

"[検索]大文字小文字を区別しない
set ignorecase
set smartcase
"1文字入力ごとに検索を行う
set incsearch
"検索結果のハイライト
set hlsearch
"ハイライトの切り替え
nnoremap <silent><Esc><Esc> :<C-u>set nohlsearch!<CR>

"保存時の文字コード
set fileencoding=utf-8
"読み込み時の文字コードの自動判別、左優先
set fileencodings=ucs-boms,utf-8,euc-jp,cp932
"改行コードの自動判別、左側優先
set fileformats=unix,dos,mac
"◻や◯が崩れるのを防ぐ(iTerm2の設定から一部変更の必要性))
set ambiwidth=double

"カーソルの左右移動で行末から行頭への移動
set whichwrap=b,s,h,l,<,>,[,],~
"カーソルラインのハイライト
set cursorline
" 行が折り返し表示されていた場合、行単位ではなく表示行単位でカーソルを移動する
nnoremap j gj
nnoremap k gk
nnoremap <down> gj
nnoremap <up> gk

"コマンドモードの補完
set wildmenu
"保存するコマンド履歴の数
set history=5000
"クリップボードからコピペする際のインデントのズレを防ぐ
if &term =~ "xterm"
  let &t_SI .= "\e[?2004h"
  let &t_EI .= "\e[?2004l"
  let &pastetoggle = "\e[201~"

  function XTermPasteBegin(ret)
    set paste
    return a:ret
  endfunction

  inoremap <special> <expr> <Esc>[200~ XTermPasteBegin("")
endif


"マウス操作の有効化
if has('mouse')
  set mouse=a
  if has('mouse_sgr')
    set ttymouse=sgr
  elseif v:version > 703 || v:version is 703 && has('patch632')
    set ttymouse=sgr
  else
    set ttymouse=xterm2
  endif
endif


"NeoBundle
if has('vim_starting')
    " 初回起動時のみruntimepathにNeoBundleのパスを指定する
    set runtimepath+=~/.vim/bundle/neobundle.vim/

    " NeoBundleが未インストールであればgit cloneする・・・・・・①
    if !isdirectory(expand("~/.vim/bundle/neobundle.vim/"))
        echo "install NeoBundle..."
        :call system("git clone git://github.com/Shougo/neobundle.vim ~/.vim/bundle/neobundle.vim")
    endif
endif

call neobundle#begin(expand('~/.vim/bundle/'))

" インストールするVimプラグインを以下に記述
" NeoBundle自身を管理
NeoBundleFetch 'Shougo/neobundle.vim'
"----------------------------------------------------------
" ここに追加したいVimプラグインを記述する・・・・・・②

"カッコの自動閉じ
NeoBundle 'Townk/vim-autoclose'

" ステータスラインの表示内容強化
NeoBundle 'itchyny/lightline.vim'

"sudo vimのときにも設定が反映される(vim sudo:xxx)
NeoBundle 'sudo.vim'

"----------------------------------------------------------
" ステータスラインの設定
"----------------------------------------------------------
set laststatus=2 " ステータスラインを常に表示
set showmode " 現在のモードを表示
set showcmd " 打ったコマンドをステータスラインの下に表示
set ruler " ステータスラインの右側にカーソルの現在位置を表示する

" インデントの可視化
NeoBundle 'Yggdroot/indentLine'


" Plugin key-mappings.
inoremap <expr><C-g>     neocomplcache#undo_completion()
inoremap <expr><C-l>     neocomplcache#complete_common_string()

"----------------------------------------------------------
call neobundle#end()

" ファイルタイプ別のVimプラグイン/インデントを有効にする
filetype plugin indent on

" 未インストールのVimプラグインがある場合、インストールするかどうかを尋ねてくれるようにする設定・・・・・・③
NeoBundleCheck
``````
いろいろ設定してみてとりあえずはこんな感じ
行末から左右のカーソルで移動できるのとかは使い勝手が良くておすすめ  

※カラースキームは別のとこからダウンロードしてきたものなのでそのままだとエラー出るかも


最近はｚｓｈが気になっているので試してみたい
未経験からのiphoneアプリづくり

swift3でiosAppづくりをする。

スパルタキャンプ（8日間）で習った技術を駆使しながら。

今月は長期出張（２月１１日〜２３日）
が入るのでそれ以外のところでまずは平日3時間
時間をとる。
出張中は仕事飲みがない日は、1時間でもコードを書くようにする。


○目標
3月上旬にサイリウムアプリを完成させる


○そのための課題

平日、仕事は18時までには終わらせる←ここ重要

毎日コード写経をしながらすすめる。
（swift3の本のサンプルコード）

わからない単語等はメモ
（１日最低1つは覚えていきたい）

本当にわからないところはslackにて人に聞く

sketchの無料期間すぎてるため課金する

githubに毎日あげていく。（練習コードと、自作アプリ用）
無料でiOSとAndroidのストアにリダイレクトする

## はじめに
個人ゲームを作っていてTwitterなんかを始めると、iOSとAndroidのストアページのリンクを両方貼っていたら140文字になんか収まらなくなりますね。
本来ならランディングページを作って、AppStoreとGooglePlayのバナーを貼るのがベストなんでしょうが、デザインを作る余裕もないし、サーバーなんか持っていない！
だけど、とりあえず1つのURLでAppStoreとGooglePlayのストアに飛ばしわけたいというケースはそこそこあるんじゃないでしょうか。

技術的には端末のUserAgentをみてリダイレクトするだけなんですが、無料という縛りが入ると、意外と選択肢は少なかったです。今回はクライアントサイドのJavaScriptで実現しました。

## 検討した候補
- Heroku
 - 無料だとスリープするのが必須とかで、スリープしないためにCronでジョブ実行するとか本末転倒な感じだったので断念
- 無料のレンタルサーバー
 - 意外と使えるのが見つけられず。お名前ドットコムでドメイン運用してますが、さすがに無料のサーバーは提供していないんですね。
- Google Site
 - 任意のJavaScriptが実行できませんでした。。。
- Google Apps Script
 - これでいけました

## 実装方法
Google Apps Script をWebアプリケーションとして一般公開することで無料で実現できます。まずはGoogle Driveからスクリプトを作成しましょう。


## コード
```js:コード.gs
function doGet(e) {
  var t = HtmlService.createTemplateFromFile('index.html');
  return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
```

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
  <form action='https://itunes.apple.com/app/idxxxxxx' method='GET' id='ios'>
    <input type="hidden" name="mt" value="8">
  </form>
  <form action='https://play.google.com/store/apps/details' method='GET' id='android'>
    <input type="hidden" name="id" value="com.example.xxxxx">
  </form>  
  
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
 
<script type="text/javascript">

$(document).ready(function() {
if((navigator.userAgent.toLowerCase().indexOf("iphone") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipod") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipad") > -1)) {
  $("#ios").submit();
  
} else if ((navigator.userAgent.toLowerCase().indexOf("android") > -1)) {
  $("#android").submit();

} else {
  $("#ios").submit();
}
});
</script>
</body>
</html>
```
※`com.example.xxxx`はGoogle Play、`idxxxxxx`はApｐStoreのidに変更してください。

あとは`公開→Webアプリケーションとして公開`にて`ユーザー全員`に公開すれば完了です。
GASだとURLが長くなってしまうので、短縮URLを使うのが良いです。
https://goo.gl/
Googleならアクセス履歴も確認できます。

## 実際の挙動はこんな感じです
https://goo.gl/bbYGWh
コマンドプロンプトで変数展開（変数置換）

何度覚えたつもりでも忘れてしまうので備忘録。

日付付きファイルにログを出力するには以下のようにする。

```console
> echo "hoge fuga piyo moge" > %computername%_%date:/=%.log
> dir 
...
2017/02/07  00:17                24 PHOENIX1TH_20170207.txt
...
> type PHOENIX1TH_20170207.txt
"hoge fuga piyo moge"

```

ちなみに欲張って `%computername%_%date:/=%_%time::=%.log` とかすると、特定の時間帯にスペースを含む名前になって意図したファイルに出力されません。
データサイエンスと信号処理の違いを考えてみた

# 記事の目的
- データサイエンティスト勉強会をするにあたってデータサイエンスとはバズワードじゃなくて何なのかを考えたので共有したい

# データサイエンスと信号処理は違うものとして扱うべきなのか
- それはわからないしケースバイケースだと思うが、部署名とか勉強会名であえて画像処理じゃないんだと強調するときにはそうしても良いと思った
    - 書籍とかだとデータサイエンスの本に画像処理の事例とかも書いてあったりするが

# 同じところは何か
- 機械学習や統計解析、パターン認識など使用している技術は同じ

# 違うところは何か
- いわゆるデータサイエンスで扱うデータは人が作ったデータ、画像処理などの信号処理は物理現象をセンサーで観測したデータを主に扱う
    - じゃあCGは？とかデータの一つに画像がある場合はとか境界は曖昧だが
    - このことに付随していろいろ必要なテクニック、テクノロジーに差が出てくる

① フォーマットの理解

画像や音声、その他時系列データは同じ物理現象を扱っているため、概ねフォーマットが統一されていて、その分野の技術者ならある程度すぐに中身の議論に入れる。一方、アプリのログや社員の勤怠のデータ、POSデータなどはそんなに統一されておらず、それの理解から始まる。

②データの理解

同じPOSデータを同じフォーマットで出したCSVであっても服屋とラーメン屋では使っているフラグや使い方に違いが生じたりする。塩ラーメンと味噌ラーメンをランチ時間に同じ品目でつけてたりするかもしれないし、ヒアリングしてみるまでデータの意味はわからない。画像や音声は見たり聞いたりしてみればある程度共通の理解がえられる。

③実現可能性

画像から人を探す、音声から日本語を認識するといったタスクは実現可能かと言われれば可能である。なぜなら人ができるからである。今の技術では無理でもその内できるかもしれない。しかし、明日売れるのは何の商品かを予測するというような問題は原理的にできるかどうか未知数であり、今あるデータでできるか何かデータを足せばできるのかという範囲も簡単には分からない。

④教師（正解）データ作成

機械学習する際に重要となる教師データだが、画像から人を抽出するというような場合はある程度誰でも人がいるのはどの部分かわかり正解をつけられる。一方POSデータからロイヤルカスタマーを探したいと言うような場合は、ロイヤルカスタマーとはどのような顧客かを定義して依頼者と共通認識をもつ必要があり、定義が定まったとしても誰でも正解ラベルを付けられるわけではない。

⑤データの変化への対応

データサイエンスで扱うデータは基本的には人の意志で変えられる。なので、来週からぜんぜん違うデータになったとか、塩ラーメン売るのやめたから販売個数が0になったとかそういうことがある。良い点もあって、こういうデータを取ってくださいという交渉もできる。どういうデータを得るかというところから試合が始まっている。画像・音声処理などは最初にカメラやマイクの性能が決まっていることが多い。

⑥応用範囲

データサイエンスはあくまでもこのラーメン屋の今のPOSデータに対して店主が定義したロイヤルカスタマーの定義に沿って判別することができるアルゴリズムを作るだけであって、それ自体は他に応用することがすごく難しい。もちろん考え方は使えるが、服屋に使おうと思ったらフォーマットの理解からやり直しとなる。

⑦説明力

データサイエンスで扱うデータは人が動いた結果生成されたものであるため、その解析結果も人を動かすものになることが多い。ラーメン屋のロイヤルカスタマーを判別できたらその人に広告を出すとかおまけするとかしたい。そうすると店主はなぜこの人がロイヤルカスタマーと推定されたかを知りたくなる。画像や音声の認識はあんまり説明力はいらない事が多い。人はだれが見ても人だし、間違っても、ああ、まあこれはしょうがないかみたいになることも多い。

# ではどんなテクニックが必要になるか
- コミュ力（ヒアリングしたり、データをより多くもらったり、納得感のある正解の定義を作ったり）する力
- 社会人力（業務を理解して提案したり、常識でデータを補完したり）
- 全体的な構成力（データを解析して、その結果業務が良くなって、もっとデータがえられてと言うような好循環を持った構成を作れる力）
- 説明力が高いモデルを構築する技術

# データサイエンスはサイエンスか
- 画像や音声のような再現性がない
- 論文を読んでも応用できるかはよくわからない
- なので共有するメリットもそんなになく、学会も日本ではあまり盛り上がっていない感じ
- 個人的には経営システム工学のような工学に近いように思う
【Python】 pyenv + anaconda でvenvを使うときに起きるエラーと解決法メモ

##環境
ubuntu 16.04
Python 3.5.2
pyenv 1.0.6
anaconda 1.5.1

##起こるエラー


```bash
$ mkdir hoge
$ pyvenv hoge
Error: Command '['/some/directories/bin/python3.4', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1
```

##解決法

askubuntuより引用

```bash
$ mkdir hoge
$ pyvenv-3.5 --without-pip hoge
$ source venvdir/bin/activate
$ curl https://bootstrap.pypa.io/get-pip.py | python
$ deactivate
$ source venvdir/bin/activate
```

>ubuntuask
>http://askubuntu.com/questions/488529/pyvenv-3-4-error-returned-non-zero-exit-status-1

実際は2行目の

```
pyven-(pythonのversion)　--without-pip (ディレクトリ)
```
を使えばエラーは出ないっぽい

## まとめ

自分はプログラム初心者なので何故このエラーが出るのかわかりません。
askubuntuによれば壊れていると書かれているが、、、
最近、プログラム初心者は[環境構築が大きな壁云々というのをはてブ](http://mizchi.hatenablog.com/entry/2017/02/05/221238)で見ましたが
この記事も初心者が初心者らしくぶち当たる壁なのかと思います。
脱初心者のために一肌脱いで教えてやるまたは解説が載ってるサイトを教えてやるって方はコメントなり、twitterなりで教えてくれると幸いです。

##追記・修正

コメントありがとうございます。

Python3.5以降では```python3 -m venv some_venv```のようにやるそうです。
理由としては、環境管理ソフトを使った時、どのバージョンで```venv```を使用するのかをはっきりさせるためだそうです。
なるほど・・・
詳しいことは引用元を

>引用元
>https://jptomo.github.io/blog/2016/01310_not_use_pyvenv_but_venv.html
Parceler1.0.3とButterKnife8.4.0を併用する

Parcelを簡単に使うためのライブラリ[Parceler](https://github.com/johncarl81/parceler)

Parcelを使いたいけど、いちいちCREATORとか書くのは面倒なので、こう記述して使います。

```build.gradle
dependencies {
  compile "org.parceler:parceler-api:1.0.3"
  apt "org.parceler:parceler:1.0.3"
}
```

今更言うまでもない[ButterKnife](http://jakewharton.github.io/butterknife/)

DataBindingとかもありますが、やっぱ手軽だなと感じるので、もっぱらButteKnifeを使っています。

```build.gradle
dependencies {
  compile 'com.jakewharton:butterknife:8.4.0'
  annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'
}
```

そして同じアプリに、これらを同時に使用すると…

```build.gradle
dependencies {
  compile "org.parceler:parceler-api:1.0.3"
  apt "org.parceler:parceler:1.0.3"
  compile 'com.jakewharton:butterknife:8.4.0'
  annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'
}
```
当然こう書きますよね。

すると、ビルドは問題なく通りますが＠BindViewとかでbindしたはずの変数が実はbindされていずアプリが落ちます。

## 対策
```build.gradle
dependencies {
  compile "org.parceler:parceler-api:1.0.3"
  apt "org.parceler:parceler:1.0.3"
  compile 'com.jakewharton:butterknife:8.4.0'
  apt 'com.jakewharton:butterknife-compiler:8.4.0'
}
```
これで行けます。

ちなみに…

```build.gradle
dependencies {
  compile "org.parceler:parceler-api:1.0.3"
  annotationProcessor "org.parceler:parceler:1.0.3"
  compile 'com.jakewharton:butterknife:8.4.0'
  annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'
}
```
では、`org.parceler.ParcelerRuntimeException: Unable to find generated Parcelable class`(抜粋)とか言われて駄目でした。

## 追記
Parceler1.1.6(現時点の最新版)ではbuild.gradleに書く、`apt`の部分が`annotationProcessor`になっているので、問題なく併用できます。
[備忘録]踏み台経由でssh接続する設定


```
# 踏み台
Host bastion
  HostName HOST_NAME
  User USER
  IdentityFile FILE_PATH

# 最終目的地
Host final_destination
  HostName HOST_NAME
  User USER
  IdentityFile FILE_PATH
  ProxyCommand ssh -W %h:%p bastion
  
```

肝は`ProxyCommand`

あと、これやると便利そう。[最強のSSH踏み台設定](http://qiita.com/kawaz/items/a0151d3aa2b6f9c4b3b8)
BEMが採用されているCSSフレームワークまとめ


有名どころのフレームワークだと独自クラスと見分けが付きにくかったり、作成したコーディング規約に矛盾が生じたりすることがあると思います。
業務でCSSフレームワークを利用する機会が出来たため、調査してみました。

## BEM使われてるよ
* [MATERIAL DESIGN LITE](https://getmdl.io/index.html)
 * 全てのクラスに`mdl-`プレフィックスがついているため、自作/フレームワークとのクラスの違いが分かり易い
 * マテリアルデザイン
 * Goodle謹製
* [Topcoat](http://topcoat.io/)
 * こちらも`topcoat-`プレフィックスがついている
 * きめ細かい影使いが特徴のデザイン
 * Adobe謹製
* [inuitcss](https://github.com/inuitcss)
 * まだcomming soon
 * Components, Objects, Utilitiesというレイヤーを持っていて、それぞれ`c-, o-, u-`プレフィックスがつく
* [MVCSS](http://mvcss.io/)
 * modifierだけ採用して、elementはマルチクラスで対応している
 `ex. btn btn--l btn--red`

__追記__

* [Blaze CSS](http://blazecss.com/)
 * プレフィックスはinuitcss同様に`c-, o-, u-`
* [Cutestrap](https://www.cutestrap.com/)
 * プレフィックス無し
 * 超軽量だけど、バリエーションが可愛い感じ
* [BEMSkel](http://bemskel.com/)
 * マルチクラス式のBEM
 * プレフィックス無し

## おまけだよ
* [UIkit](https://getuikit.com/)
 * BEMじゃないけどおまけ
 * 全てのクラスに`uikit-`プレフィックスがついている、かつデザインも秀逸なため捨てがたく、紹介しました

## 最後に
BEM採用、フレームワーク独自のプレフィックがつくという点を考慮すると[MATERIAL DESIGN LITE](https://getmdl.io/index.html)か[Topcoat](http://topcoat.io/)の2択。

あとは好みやプロダクトの特性によって、どちらのデザインがより望ましいか判断するといった所でしょうか。

デザイン的には[UIkit](https://getuikit.com/)も捨てがたかったため、BEMじゃなくても良い場合は、選択肢に入ってくると思いました。
（深夜に書いているため、文章がグダグダですみません）
YQL API と jQuery を用いて、ココログ等の RSS を取得・表示させる方法（さよなら Google Feed API）

2017年 ~~2月~~ 1月。
とうとう Google Feed API が使えなくなったようです。
代替として YQL API と jQuery を用い、RSS（例としてココログの）を取得し、任意のHTML内に表示させる方法を検討しました。
おかげさまでクロスドメインに対応できました。

なお、以下のスクリプトでは、最新の5件を表示し、投稿されてから3日以内の記事には「NEW!!」をつけるようにしています。

# HTML と jQuery

```
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
	$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
		q: "select title,link,date from rss where url in ('http://info.cocolog-nifty.com/info/index.rdf') limit 5", // selectの後ろに「title,link,date」を指定することでRSSから「タイトル、URL、日付」が取得できる。limitで扱う「件数」を指定できる。
		format: "json"
	}, function (json) {
		for(var i in json.query.results.item){
			var entry = json.query.results.item[i];

			var link = entry.link;
			var title = entry.title;
			var dateString = new Date(entry.date);
			var year = dateString.getFullYear();
			var month = dateString.getMonth() + 1;
			var day = dateString.getDate();

			var delDate = 3; // 「NEW!!」を表示する日数。今回は3日間とする。
			var dateStringNow = new Date();
			var checkDate =(dateStringNow - dateString) / (1000 * 24 * 3600);

			var elementNew = '';

			if(checkDate <= delDate) {
				elementNew = '<strong>NEW!!</strong>'; // 「NEW!!」をつける場合に表示するHTML要素。
			}

			var elementLi = '<li><a href="' + link + '" target="_blank">' + title + '</a>（' + year + '/' + month + '/' + day + '）' + elementNew + '</li>';

			$("#feed ul").append(elementLi);

		}
	});
});
</script>
<div id="feed">
<ul></ul>
</div>
</body>
</html>
```

#  参考サイト
- [Google Feed API から YQL API へ移行したお話](http://qiita.com/nyatto/items/94c3f7cac14e8e8ef50f)
【Node.js】expressとbotkitを使って自分のURLを叩いたらBotがSlackにつぶやくサンプル【SlackBot】

#はじめに
大学の研究室の課題でSlack Botを利用したシステムを開発することになり、WebAPIの作成をしました
今回のサンプルプログラム
https://github.com/Kurowasi/SlackBot_WebAPI

#Expressとは
Webアプリケーションを簡単に作るモジュール

#BotKit
SlackでのBotを簡単に作るモジュール

#手順
##Expressを使ってWebアプリケーションを構築する
まずアプリを入れておくディレクトリの作成

```
$ mkdir hoge
$ cd hoge
$ npm init
```

expressを使える準備を行う

```
$ npm install --save express
$ npm install --save express-generator
```

expressを利用してWebアプリケーションを構築する

```
$ express -e プロジェクト名
$ cd プロジェクト名
$ npm install
```

成功したか確認

```
$ npm start
```

以下のように出たら成功

```
> プロジェクト名@0.0.0 start ディレクトリ名
> node ./bin/www
```

##BotKitを使ってSlack Botを作成する

プロジェクト名のディレクトリに移動する(ディレクトリ名/プロジェクト名)

```
npm install --save botkit
```


以下のURLにアクセスしてBotを作成する
https://slack.com/apps/manage/A0F7YS25R-bots

『Add Configuration』を押下
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/130026/4ec1f622-46d2-97a8-b8a4-b287f2a25240.png)


適当な名前を打ち込み『Add bot integration』を押下
![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/130026/158d13e6-339f-650c-0630-a39b012bef5a.png)

トークンをメモしておく
![キャプチャ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/130026/fe91054c-d780-0be6-d300-7942942fb733.png)



フォルダ名/プロジェクト名/routes/index.jsに
BotKitを利用できるようにするコードを記述する



```routes/index.js
var express = require('express');
var router = express.Router();
/**
 * 以下のコードを追加する
 */
var Botkit = require('botkit');
var controller = Botkit.slackbot();
var bot = controller.spawn({
  token: "メモしておいたトークンを書く"
}).startRTM(function(err, bot, payload){
  if (err) {
    throw new Error('Could not connect to Slack');
  }
});
```

フォルダ名/プロジェクト名/routes/index.jsに
Botがつぶやくように記述する

```routes/index.js
/* GET home page. */
router.get('/', function(req, res, next) {
  bot.say({
        channel: 'general', //つぶやきたいチャンネル
        text: 'WebAPI完成', //つぶやきたい内容
        username: 'hoge', //つぶやくBot名
        icon_url: ''
  });
  res.render('index', { title: 'Express' });
});
```


##うまくいってるか確認する

サーバを起動する

```
$ cd 自分で作成したディレクトリ名
$ cd プロジェクト名
$ npm start
```

以下のように表示されたら成功

```
> プロジェクト名@0.0.0 start 今いるディレクトリ
> node ./bin/www

info: ** No persistent storage method specified! Data may be lost when process shuts down.
info: ** Setting up custom handlers for processing Slack messages
info: ** API CALL: https://slack.com/api/rtm.start
notice: ** BOT ID: hoge ...attempting to connect to RTM!
notice: RTM websocket opened
```

ブラウザを開き以下のURLを叩く
http://localhost:3000/

以下のように
generalチャンネルでBotがつぶやけば成功
![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/130026/a710230f-7a5e-e18b-1ec1-1e5497f98c63.png)


#今回のシステムの仕組み
以下のような流れになっているので、ルーティングを設定することで、『/hello』や『/bye』などにアクセスがあった時に
違う内容をつぶやくBotなどが作ることができる
※routesディレクトリ以下にファイルをファイルを作成する必要あり
usersというルーティングが既存で行われているので、それを参考するといい

![キャプチャ6.PNG](https://qiita-image-store.s3.amazonaws.com/0/130026/0b16fc69-862a-683e-6172-53aa7511368c.png)




#参考サイト
[量産型エンジニアの憂鬱|botkit使って定期的につぶやくslackbot作る](http://blog.duck8823.com/entry/2016/05/20/005734)
install と install-binary でどれくらい違うのか試す。試した。

node.jsの安定版をインストールしようとしたらコマンド間違えて(ほんのちょっと)泣きそうになったのでまとめておく。

# node.jsをnodebrewで管理するようにした。
gulp使うことになったのでついでだしnode.jsをnodebrewで管理するようにした。
なので全編nodebrewでお届け。

nodebrewのインストール云々は一番下でまとめる。

# node.jsの安定版をインストールする。
nodebrewを使ってインストールする際、何通りかあって今回は安定版でとりあえずいいかー。と思ってた。
早いって聞いてたから
```
nodebrew install-binary stable
```

しようと思ってたら
```
nodebrew install stable
```
してた。

吐くかなってくらい長かったので途中で断念して仕切り直したけど気になったから時間を測って見た。

## どれくらい時間かかるのか測ってみる
使用しているPCだったりネットの環境にもよると思いますが、以下の通り。(macを使用しています。)

まずは早い"install-binary"

```
time nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v7.5.0/node-v7.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

real	0m14.390s
user	0m2.189s
sys	0m1.277s
```

まんまの"install"

```
time nodebrew install stable
・
・
(省略)
・
・
real	40m35.822s
user	31m21.746s
sys	4m5.134s
```
30分・・・長い・・・

## uninstallは、
```
time nodebrew uninstall v7.5.0
v7.5.0 uninstalled

real	0m0.488s
user	0m0.155s
sys	0m0.266s
```
って感じ。早い。

# "-binary"ってなんで早いの
単なる"install"はソースからコンパイルするから時間がかかるらしい。
現時点では、バイナリっていうくらいなので二進法で書かれててコンピューターの解釈の手間が減るからだと理解している。
インストールする時にFetchしている拡張子が"tar.gz"なので圧縮されているバイナリデータを解凍するだけ！という感じなのかな。

とにかく"install-binary"の方が早い。

## Fetchしている２つの種類
"install-binary"では、node-v7.5.0-darwin-x64.tar.gz
"install"では、node-v7.5.0.tar.gz

"binary"だとちゃんとmac用のをとって来ている・・・
それで余計早いのかな・・・

# nodebrewでnode.jsを管理する。
nodeenvってやつもあってどっちがいいのかよくわからなかったけどHomebrewで前は管理していたので名前でnodebrewにした。

以下の参考のまんまですが、

まずcurlコマンドを使ってdownloadしてsetupにパイプします。
```curl -L git.io/nodebrew | perl - setup```

次に.bashrcに以下を追記します。
```export PATH=$HOME/.nodebrew/current/bin:$PATH```

.bashrcをリロードします。
```source ~/.bashrc```

helpを開けるか確認します。
```nodebrew help```

開けたらインストール完了です。

最後に.nodebrewまでのパスを変更して(?)終わりです。これも.bashrcに追記しました。
```export NODEBREW_ROOT=/path/to/.nodebrew```

インストールが終わったら、nodebrew useで設定しておきましょう。


参考：[hokaccha/nodebrew: Node\.js version manager](https://github.com/hokaccha/nodebrew)
参考：[Node\.jsの管理をHomebrewからnodebrewに変える \- Qiita](http://qiita.com/takeshi81/items/805f504503cd93151ca6)]
参考：[nodenv を使って Mac に Node.js の環境を構築する](http://qiita.com/1000ch/items/41ea7caffe8c42c5211c)
Seleniumを使ってみて　躓いたところなどのメモ

現在案件で結合テスト中。ブラウザを叩くテストがあるんだけどコストがバカにならないから自動化してみようという試み。Qiitaでseleniumという単語をよく見るので使っているところ。


Node.jsで書く。

##webdriver
ブラウザを操作するオブジェクト。
##要素を取得
```
findElement(By.id('[ID name]'))
```
でhtml要素を取得できる。
idがふられていない要素は、x-pathでも取得ができる。
取得したい要素を右クリック→検証→デベロッパツールで強調表示されたところを右クリック
→Copy→xpath
で対象のx-pathをコピーできる。コピーしたら
```
By.xpath("[xpath]")
```
で取得できる。
##取得した要素の操作
###テキスト入れる
```
driver.findElement(By.id('hoge')).sendKeys("hage")
```
###クリックしたい
```
driver.findElement(By.id('hoge')).click()
```
###ページに飛ぶ
```
driver.get('url')
```
###Basic認証を抜ける
```
driver.get('http://password:username@hogehoge......')
```

###ドロップダウン選択したい
```
driver.findElement(By.xpath('[xpath]')).click()
```

##他
デフォルトブラウザはfirefox
chrome使いたかったら
https://chromedriver.storage.googleapis.com/index.html?path=2.27/
からchromeDriverをDLして適当な場所に配置。
マークダウン実験(1行の文字数)

```python
         1         2         3         4         5         6         7         8         9         0         1         2         3
1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
```
nexus7で縦方向の時53文字
nexus7で横方向の時66文字
(参考)マークダウン実験
http://qiita.com/lranran/items/fd9cb4f924cc0c16e0e6
create-react-app を触ってみる。

# 手順

### Node がなければインストール

### create-react-app のインストール

```
npm install create-react-app -g
```

### アプリの作成

```
create-react-app <フォルダ名>
```
こんなフォルダ構成になる
<pre>
.
├── node_modules
│   :
│   : 略
│
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg
</pre>

### 動かしてみる

```
cd <フォルダ名>
npm start
```

### 確認してみる

```
ブラウザで localhost:3000
```


![SS.png](https://qiita-image-store.s3.amazonaws.com/0/73493/ca86b71a-4fc7-e19b-9517-7bca3511bdce.png)

# 仕組み


```
npm start
```

をシェルから実行して、localhost:3000 にアクセスすると、ブラウザには

```
public/index.html
```

の内容に

```
<script type="text/javascript" src="/static/js/bundle.js">
```

がインサートされたものが返される。このインサートされたもの（bundle）が react-app 全体を Webpack でまとめたやつ。

またこの中で

```
19     <div id="root"></div>
```

が定義されていて、ここが render されるターゲットとなる。


アプリのメイン？は

```
src/index.js
```

自動で生成されてる内容は

```
1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import App from './App';
4 import './index.css';
5 
6 ReactDOM.render(
7   <App />,
8   document.getElementById('root')
9 );
```

3 行目で

```
src/App.js
```

を読み込んで生成された Component を 6-9 行目で

```
public/index.html
```

 の

```
<div id="root"></div>
```

にインサートしているようだ。


# proxy

package.json に以下のように proxy を設定して

```
"proxy": "http://localhost:1234",
```

App.js などで

```
fetch( '/api/sample' )
```
とやると
```
http://localhost:1234/api/sample
```
にアクセスできる。

# サードパーティーのコンポーネントを使う

### Material-ui を使う

```
npm install material-ui --save
```


* タップとかに反応するものを作る場合は（今の所とりあえず）、react-tap-event-pluginが必要。

```
npm install react-tap-event-plugin --save
```

してソースで

```
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin(); 
```


# コンポーネントじゃないのを使う

生 DOM は触らない方がよさそう。
火急の場合とかのために。

### jQuery を使う


```
cd <フォルダ名>
npm install jquery --save
```

して、

```
import $ from 'jquery';
```

### Materialize を使う

```
cd <フォルダ名>
npm install materialize-css --save
```

して、

```
import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';
```
macOS Sierraで旧型のEthernet Adapter (A1277) を使う


昔MacBook Air用に購入したApple純正のEthernetアダプター(A1277)がmacOS Sierraで使えませんでした。

[同じ製品がある](http://www.apple.com/jp/shop/product/MC704ZM/A/apple-usb-ethernet-アダプタ)のですが、どうやらチップが新しくなって古いものは使えなくなっているようです。

高いものでは無いのですが、純正品が使えないのは悔しいのでドライバーを探したら使えるようになりました。

## インストール

以下のサイトの一番上にある「Apple Mac OS X 10.5 to 10.12 Drivers Installer」をダウンロードしてインストールします。

http://www.asix.com.tw/download.php?sub=driverdetail&PItemID=136

再起動すれば認識するかと思います。

MacBook Pro(late 2016)のUSB-C経由でもちゃんと使うことができました。

![スクリーンショット_2017-02-06_22_40_57.png](https://qiita-image-store.s3.amazonaws.com/0/14768/279a9200-ab5e-3c5b-ca49-6c3adfb7c970.png "スクリーンショット_2017-02-06_22_40_57.png")
PythonでJupyterノートブック「.ipynb」を生成する

JupyterノートブックをPythonから生成する方法です。

```python
import nbformat

nb = nbformat.v4.new_notebook()

title = "# タイトル"

code = """
%matplotlib inline
from sympy import *
# to print with mathjax on jupyter notebook
init_printing()
"""

nb["cells"] = [
    nbformat.v4.new_markdown_cell(title),
    nbformat.v4.new_code_cell(code)
]

with open("output.ipynb", "w") as f:
    nbformat.write(nb, f)
```

これで、色々便利なことができそうですね。

# PyCharmでカスタムした.ipynbを生成する

[PyCharm](https://www.jetbrains.com/pycharm/)はPythonの統合開発環境(IDE)です、非常に強力な補完機能を持っており最強のPython開発環境です。
実はPyCharmはJupyterと連携が可能で、Jupyterの表現力＋PyCharmの強力な補完機能はかなり快適です。

![メニュー_011.png](https://qiita-image-store.s3.amazonaws.com/0/140075/5e923ba5-b74a-4db8-5a53-c7ce84d58b9c.png)

ただし、数式を扱う場合はPyCharmのJupyter出力は貧弱ですので、ブラウザ版のJupyterを使った方がよいでしょう。
ですので、PyCharmのJupyterは使いません、かわりに`Extranal Tools`を使います。

### .ipynb生成スクリプトを作る

どこか参照しやすい場所に以下のスクリプトを作成します。

```python
#!/usr/bin/env python3
# coding:utf-8
import sys
import os
import nbformat

output_dir = sys.argv[1]
output_file = input("input ipynb name:")

nb = nbformat.v4.new_notebook()

title = "# タイトル"

code = """
%matplotlib inline
from sympy import *
init_session()
"""

nb["cells"] = [
    nbformat.v4.new_markdown_cell(title),
    nbformat.v4.new_code_cell(code)
]

if not output_file.endswith(".ipynb"):
    output_file += ".ipynb"

with open(os.path.join(output_dir, output_file), "w") as f:
    nbformat.write(nb, f)

print("ok.")
```

### PyCharmのExternal Toolとして登録する

PyCharmの「File(F)」メニューを開き、「Settings...」を選択します。

![メニュー_016.png](https://qiita-image-store.s3.amazonaws.com/0/140075/99409710-8747-b270-83df-d308cc1e13e0.png)

設定ダイアログの「Tools」→「External Tools」を選択して、「＋」ボタンを押します。

![Settings_017.png](https://qiita-image-store.s3.amazonaws.com/0/140075/693e1a3e-d087-0684-41f1-6e54623abf50.png)

設定ダイアログが出るので、以下の項目を追加します。

| 項目 | 入力 |
|:-:|:--|
| Name  | 適当な名前を入れてください  |
| Description  | 適当な説明をいれてください  |
| Program  | JupyterがインストールされているPythonパス  |
| Parameters  | 先ほどのスクリプトパス \$FileDir\$  |

![Edit Tool_018.png](https://qiita-image-store.s3.amazonaws.com/0/140075/d1cff633-afdf-3d8d-080e-5c7d230ce2a0.png)

### PyCharmの右クリックメニューから.ipynbが生成可能に！

PyCharmの右クリックメニューから「External Toos」→「登録したツール名」を選択します。

![メニュー_019.png](https://qiita-image-store.s3.amazonaws.com/0/140075/b4841a0f-5540-e535-c499-af901a1c380d.png)

コンソールにファイル名を入力すると、最初から色々入力済みの.ipynbファイルが生成されます。

![python35 - [~-PycharmProjects-python35] - ...-document-document.ipynb - PyCharm Community Edition 2016.3.2_020.png](https://qiita-image-store.s3.amazonaws.com/0/140075/838d7aa6-2c04-0a44-2bb4-a8707f993f8f.png)


## 参考
https://pypi.python.org/pypi/nbformat
https://github.com/jupyter/nbformat
Oculus Touchセットアップ

[OculusTouch対応のゲームを作る手順目次はこちら](http://qiita.com/UnagiHuman/items/42e2059c04f55410bb1b)

#概要

ここではOculusTouchセットアップまでの手順を説明します。
Oculus自身のセットアップの方法は[こちら](http://www.moguravr.com/oculus-touch-setup-guide/)をご覧ください。

#Oculus Utilities for Unity 5の導入
Oculus VRの[ダウンロードページ](https://developer3.oculus.com/downloads/
)からOculus Utilities for Unity 5をダウンロードしてUnityのプロジェクトにインポートしてください。
OVR/PrefabsフォルダにあるOVRCameraRigをシーンにドロップします。このパッケージは後述のOVRAvatarSDKの導入に必要です。

#OVRAvatarSDKの導入
OVRAvatarSDKはVR内の自分の手、コントローラーを表示する為のものです。
Oculus VRの[ダウンロードページ](https://developer3.oculus.com/downloads/)からOculus Avatar SDKをダウンロードしてOVRAvatarSDK/Unity/OvrAvatarパッケージをプロジェクトにインポートします。
/Assets/OvrAvatar/Samples/LocalAvatar.unityをロードするとサンプルが確認できます。
そもそもOVRAvatarSDKが何者か、何を設定すればよいかは[凹さんのブログ](http://tips.hecomi.com/entry/2016/12/25/142057)に丸投げします。

#まとめ
今回は内容が薄いですがここまでです。
OculusTouch対応のゲームを作る手順目次

#目次
1. [OculusTouchセットアップ](http://qiita.com/UnagiHuman/private/f43444e7119d83081fc8)
2. [OculusTouchでオブジェクトを掴む、運ぶ、投げるを実装する](http://qiita.com/UnagiHuman/items/7434a2daa5024fa86e8b)
3. OculusTouchで扱う武器を実装する(ナイフ)
4. [OculusTouchで扱う武器を実装する(弓)](http://qiita.com/UnagiHuman/items/9ff6548fb0a632bc485f)
5. OculusTouchで扱う武器を実装する(銃)
6. OculusTouchで瞬間移動を実装する
libGDXでの画像を切り取る方法

## AtlasSpriteなどを切り取る方法

AtlasSpriteなどの画像を表現するクラスは、setScaleやsetSizeといった、大きさを調整するメソッドではうまく調整できませんでした。
というのもsetScaleで大きさは調整可能ですが、もちろん画像比率も変更されてしまいます。
画像比率をキープしたまま大きさを小さくリサイズしたい場合などどうすればいいでしょうか。
scaleはそのままに、画像をうまく切りたい場合、どうするか。

## 方法

drawメソッドをオーバーライドします。

## コード


大体、イメージ的にはこんな感じでやるとうまくいきます。drawメソッド内で毎フレーム描画領域を絞る感じです。

```java
AssetManager manager = new AssetManager();
TextureAtlas atlas = manager.get("hoge",TextureAtlas.class);
TextureAtlas.AtlasSprite sprite = new TextureAtlas.AtlasSprite(atlas.findRegion("hoge")){
   @Override
   public void draw(Batch batch) {
       batch.draw(this, this.getX(), this.getY(), this.getOriginX(), this.getOriginY(), 
                this.getWidth() /2f, this.getHeight()/2f, // 縦横を半分にする
                this.getScaleX(), this.getScaleY(), this.getRotation());
   }
};
```


## 参考URL

[How to resize a sprite in Libgdx?](http://stackoverflow.com/questions/21382913/how-to-resize-a-sprite-in-libgdx)
今週やった勉強まとめ（H29.1.30~2.5）

これは私akiraが勉強のために作成したノートである。

##**やったこと**

先週は
『プログラミング言語 Python 3 入門』
https://www.udemy.com/intro-to-python3/
のセクション２まで終わらせました。
しかし途中で躓きまして、やめることに。

そのかわりpaizaラーニングを行うことに。
https://paiza.jp/works

こちらは環境構築などめんどうなことはしずに動画学習と演習で実際にプログラミングを打ち込むということでした。

１週間で、python初心者向けコースを終了し、よくわからないところを深く学びました。



##**わからないこと**

・「input」がよくわからない。

paizaでは入力と出力をする箇所があり、入力箇所に入力し、実行すると出力結果が表示されるというものだ。

1. 入力された数値を表示する
2. 入力された１行数値を表示する
3. 入力された複数行の数値を表示する

##1. 入力された数値を表示する

a = input()
print(a)

入力値　sample
出力値　sample

##2.入力された１行数値を表示する

data = input()
print(data)

入力値　1 2 3
出力値　1 2 3 

##3.入力された複数行の数値を表示する

import sys
for line in sys.stdin.readlines():
     print(line.rstrip)

入力値
1
2
3

出力値
1
2
3

なんでこうなるのかがよくわからなかったが、どうやらsys.stdin.readlines関数はファイルを読み込んで１行ごとに処理するからこのような処理になるということだ。

##発展

次に発展ということで合計の値を出すことにする

num = [20,30,40,60]

print(sum(num))

で出力値150という具合だ。

これを先ほどの１行数値と複数行数値で行ってみる。

~~やってみたがまだできません。~~

~~できましたら載せます。~~
(2/6できました！)
ただいま、数値、配列、型変形がよくわかっておりません


line = input()
print(line)

入力値 1 2 3
出力値 1 2 3

になるのはわかる

line = input().split()
print(line)

入力値 1 2 3
出力値 ['1','2','3']

これもわかる。配列にしたんですよね。

出力値 [1,2,3]
にするにはどうするのか。

line = input().split()

line_int = list(map(int,line))

print(line_int)

出力値 [1,2,3]になりましした！！

どうやら、map関数とlist関数がキモだったらしいです。

map関数は『すべての要素に処理を行う』とのことです。よくわかりません。

list関数はあんまりよくわかりません。

随時調べていきます。

ですので合計は

print(sum(line_int))
codedeployのhook失敗時に何が何でも気合いでCodeDeployを失敗するようにする


AWSのCodeDeployは比較的便利で扱いやすいデプロイするサービスですが一つ問題があります。

それはshファイル内でエラーを出して終了してもCodeDeployのエラーにはならないこと。


## 結論

`set -euo pipefail` をすればhookのshで死んだ時にCodeDeployも失敗してくれます。


## 検証
だいたいこんな感じで`appspec.yml`を用意して

```appspec.yml
version: 0.0 
os: linux
files:
  - source: /
    destination: /home/ec2-user/appdir/

permissions:
  - object: /home/ec2-user/appdir
    owner: ec2-user
    group: ec2-user

hooks:
  AfterInstall:
    - location: setup/codedeploy/01-ansible.sh
      timeout: 1200
      runas: root
```

bashの `set -e` はperlの `use strict` みたいなもので
失敗したらこけてくれると期待しますが、これが失敗しない。

「あれー？デプロイが反映されなくね？」と思ってCodeDeployのログを見に行くと
AnsibleがこけてるのにCodeDeployが成功になってるという感じでした。 

```01-ansible.sh
#!/bin/bash
set -eu
unset PYTHON_INSTALL_LAYOUT
cd /home/ec2-user/appdir/ansible

echo ####################
echo setup app with ansible..
echo ####################
/usr/local/bin/ansible-playbook -vv -i init.hosts init.yam 2>&1 | tee /tmp/codedeploy-ansible1.log
```

なので上記コードに `pipefail` を加えて以下の通りにする。
すると、ansibleがこけたらCodeDeployも失敗するようになった。


```01-ansible.sh
#!/bin/bash
set -euo pipefail
unset PYTHON_INSTALL_LAYOUT
cd /home/ec2-user/appdir/ansible

echo ####################
echo setup app with ansible..
echo ####################
/usr/local/bin/ansible-playbook -vv -i init.hosts init.yam 2>&1 | tee /tmp/codedeploy-ansible1.log
```


## 参照
http://stackoverflow.com/questions/35448125/how-to-make-aws-codedeploy-return-an-error-when-some-of-appspec-hooks-fails
スライサー（FDM式３Ｄプリンタ向け）の作成　考察４（マイクロレイヤリングについて）


* [スライサー（FDM式３Ｄプリンタ向け）の作成　目次](http://qiita.com/isTwt/items/5d40286eec73296ea790)

-----
# １．はじめに
　みなさんは、「マイクロレイヤリング」って知っていますか？
　私は自作スライサに機能を実装したときのつぶやきで、教えてもらいました。
　Slic3rに搭載されている機能のようです。
　※調べたところ、Variable Layer Heightの項が該当しそう。
　※実際にSlic3rを使っていないため同一かは不明です。

# ２．どのような機能か
　通常、スライスは、指定された積層高さで均一にスライスされるため下図のような場合、上部はガタガタになりがちです。
![キャプチャbase.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/c99d969d-b5d8-6007-64f4-0e694f6ea87a.jpeg)
※元モデル

![キャプチャs3d-1.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/3253a69e-aedf-948a-2c80-2f799f477d68.jpeg)
![キャプチャsd-1.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/84b107a9-0242-2be0-7060-8fdb63755187.jpeg)
※0.3[mm]固定積層時

　これを改善するには、積層高さを小さくするのですが、スライス，出力とも時間が増加します。
　そこで本ソフトでは、外壁となるループ部分のみを細分化し、インフィルは通常高さとすることで、時間短縮を狙いました。

　[layerHeight]パラメータが0.3[mm]で[MicroLayering]パラメータで３[分割]を指定すると、外壁ループは0.1[mm]の積層高さになります。
![キャプチャs3d-2.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/d63794e8-3e1d-2519-8175-dd5cc9a509b6.jpeg)
![キャプチャsd-2.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/565d1bcf-1e79-b06c-7b77-4bb8aef9adb3.jpeg)
※0.3[mm]積層、マイクロレイヤリング3指定時

# ３．でも．．．
　でも、上記モデルの場合、下部は垂直面なのでやはり無駄に時間がかかってしまいます。

　そこで、自動マイクロレイヤリングと称した機能も追加しました。
　この機能では、各面の傾きに応じ所定以上傾きがある場合、自動で外壁部分を細分化するものです。
　これにより、垂直面が多い場所では通常厚（0.3[mm]）で積層し、角度がついた面では、自動で細分化され、外形がなめらかになると考えています。
![キャプチャs3d-3.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/7df1e12b-2074-5f68-d50f-18b5eeaff226.jpeg)
![キャプチャsd-3.JPG](https://qiita-image-store.s3.amazonaws.com/0/157557/1a0e5f01-3190-551a-9b86-ae4ab4272236.jpeg)
※0.3[mm]積層、自動マイクロレイヤリング5(重複50%)指定時

# ４．さいごに
　まだ調整中な部分はありますが、このようにスライサ側で判定し自動調整してもらえると、品質向上に繋がると考えています。
bashでタイムアウトを実装する（timeoutコマンドの代用）

## 目的
* 古いCentOS(CentOS4.3)に、timeoutコマンドが無かった
* ありもので実装できないかなぁ

## 環境
* CentOS 4.3
* bash

## スクリプト
```bash:timeout.sh
#!/bin/bash

# タイムアウト秒を指定
ALIVE_TIME=10

# 以下がtimeoutコマンドの代用部分
(ping 192.168.1.1) & sleep ${ALIVE_TIME} ; ps $! > /dev/null 2>&1 && kill -9 $!
```

## 解説
上記のスクリプトでは`ping 192.168.1.1`を10秒でタイムアウトするようにしています。
サンプルなので、`ping -t 10`とかのツッコミは無し。

実行したいコマンド（ここでは、ping）を`&`でバックグラウンド実行します。
`sleep ${ALIVE_TIME}`でsleepします。（ここでは10秒）
sleep後、psコマンドでバックグラウンドに回したコマンド（ここでは`ping 192.168.1.1`）の生存を確認します。
コマンドが起動中であれば、`kill -9`でコマンドを停止します。

## ワンライナーでもできるね

```bash
(ping 192.168.1.1) & sleep 10 ; ps $! > /dev/null 2>&1 && kill -9 $!
```
Instareport (インスタレポート)

# 背景
毎週金曜日に週報なるものをお客様へメールで送る ~~不毛~~ な義務がある。どうやら最近、お客様側のチェックが厳しくなってきているようで、送り忘れると「きてないぜこのやろう( ^ω^ )」というメールが私の上司宛にやってきて、上司は週報を送り忘れた部下へ週報を送るように催促をするという ~~不毛~~ なやりとりをさせてしまっている。
以下、~~不毛~~なやりとり。

![スクリーンショット 2017-02-06 21.19.39.png](https://qiita-image-store.s3.amazonaws.com/0/107402/a158cb1d-966b-13ca-73e8-cf1a142f3a53.png)
![スクリーンショット 2017-02-06 21.19.57.png](https://qiita-image-store.s3.amazonaws.com/0/107402/1334c6d2-a45f-136f-1b11-0ecbbf6f524a.png)
![スクリーンショット 2017-02-06 21.20.11.png](https://qiita-image-store.s3.amazonaws.com/0/107402/aabb2a90-4893-bb8b-4906-d3946d309148.png)


ん？これは、、、本当につくるか？

こんなどうしようもない部下のくだらない話を聞いてくれる上司は他にはいません。ありがたい限りです。これに答えてもお給料がアップするわけではないのは重々わかっていますが、やったりましょう。業務Hack。
で、週末の時間を少し拝借してできるところまでやってみた。

# 理想の完成系
* 自動送信は逆に怖いからそこまでやらない。
* 場所を選ばずに、帰りの電車内でも送信したいので、スマホアプリがいい
* 週報の存在をわすれても大丈夫なように、毎週金曜の指定時刻にスマホにプッシュ通知されるようにする
* 文面は稼働時間も含めて自動で完成されている
* アプリ名、、、即報告。インスタントレポート。Instareport。略してインスタ。・・・いいね。（公開していないから商標権の侵害にはならない、はず！）

# どうすればできる？
1. 会社PCのローカル環境にのタスクスケジューラーを登録。このタスクの内容は毎週金曜に勤怠管理システム（WEB）から稼働時間をスクレイピングしクラウドストレージに保存する。クラウドストレージはgoogle doc？aws？
2. スマホアプリは金曜20:00になるとプッシュ通知する。
3. スマホアプリを起動すると、カレンダーとメール作成ボタンが表示される。
    1. メール文面にはやっかいなことに稼働時間を記載する必要があるので、1で保存したクラウドストレージから取得する。取得期間は、カレンダーで選択する。
    2. メール作成を押すとスマホのメーラーが起動する。（ここは文面をあえて表示。こわいから内容確認しなきゃね）
    3. カレンダーで選択した日を含む過去５日間の稼働時間をクラウドストレージから取得する
    4. カレンダーで選択した日をタイトルに設定する。
    5. メール文面は↓なイメージで作成する
6. あきらめの精神。これに時間をかけすぎることはもっと不毛なので、12:00 - 18:00でできるところまでの時間切りで作業する。

# で、どこまでできたか？
やりたいことはほぼ完成。
できたら、デザイン綺麗にするのとプッシュ通知できるようにする。
使いながらよくしていく。

①アプリを立ち上げる
<img width="320" alt="thumb_IMG_2382_1024.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/107402/fa51181a-f460-3f26-3844-00059bb24f5e.jpeg">

②カレンダーから起点日選択し[Send Fuckin’ Weekly Report]アイコンをタップ
<img width="320" alt="thumb_IMG_2381_1024.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/107402/4697c25b-6b09-0f82-7fea-14b9851d7f54.jpeg">

③稼働時間以外はテンプレのまま。で送信。モザイクだらけですみません。これでもギリギリです。本当は省略部分にモリモリ書いてあります。
<img width="320" alt="copy.png" src="https://qiita-image-store.s3.amazonaws.com/0/107402/981ce9d7-dbe2-2239-de42-e544ee796692.png">

# なにでつくったか
* スマホアプリ
    * iOS 10.2.1
    * swift 3.0.2
    * カレンダー部分 - [JBDatePicker 1.2.0](https://github.com/Tuslareb/JBDatePicker)
* 勤怠サービスのスクレイピングツール
    * CentOS 6.5 (on Vagrant 1.6)
    * Ruby 2.3.1
    * スクレイピング部分 - [mechanize 2.7.5](https://github.com/sparklemotion/mechanize)

ソースはネタバレ情報てんこ盛りなのであげられません！

# 最後に
私以外の方はきちんと週報を送れているのだろうきっと。さすがだ。。。
ノンプログラミングで機械学習（MAGELLAN BLOCKS MLボードα版テスト）

#概要

MAGELLAN BLOCKSのMachine Learningボードα版がリリースされたので、機械学習はほぼ素人のエンジニアがやってみました。

今回試したのは数値回帰です。
下記howtoページの内容を実行し、最終的にはRで作成した「線形回帰モデル」との比較を行います。
https://www.magellanic-clouds.com/blocks/ml-regression-howto/
※「因子を見直す」まだ試してません。
※2017/02/03時点の情報で記載しています。

#モデル作成までの全体図

詳細手順は[howtoページ](https://www.magellanic-clouds.com/blocks/ml-regression-howto/)の通りなので記載しませんが、モデル作成までの全体像はこんな感じで、前処理のデータ編集はBigQuery（SQL）で行います。
*※青色の部分がhowtoページで作成する部分、赤色部分は検証用に独自に作成*

![flow.png](https://qiita-image-store.s3.amazonaws.com/0/106673/f61a0fc8-3bd3-360f-cc29-d74fc9a86973.png)

#データ準備
スプレッドシートを活用してデータの準備を行いました。
参考：[Googleスプレッドシートに東京の日の出・日の入り時間を表示する。](http://qiita.com/wasamiya/items/346f1744802dab1d4d2c)
※2017/02/03時点で、電力使用量のデータは2016/4/1からしか取得できませんでした。
　よって、最終的に使用する学習/予測で使用するレコード数は以下の通りとなります。

| 目的       |期間 |件数    |備考    |
|:----------:|:------------------:|-----------------:|:------------------|
| 学習用     |2016/04/01～2016/12/31 |  274 |訓練,検証データの割合は8:2|
| 予測用     |2017/01/01～2017/01/31|    31||

#トレーニング設定
トレーニング設定は以下の通り

| 設定内容       |設定値 |
|:----------|------------------:|
|トレーニングの経過制限時間(分) |0|
|トレーニングの最大試行回数     |20|

#トレーニング結果
MAGELLAN BLOCKSの画面よりトレーニング結果を確認する事が出来ます。
![トレーニング結果.png](https://qiita-image-store.s3.amazonaws.com/0/106673/ab62807f-e907-9b6f-cca9-aa36b3886642.png)

トレーニング時間は8時間35分、誤差は7560.74となっています。

また、GCPコンソール画面の「機械学習」を見ると、ジョブとモデルがそれぞれ作成されている事が確認できます。

![GCPconsole.png](https://qiita-image-store.s3.amazonaws.com/0/106673/69658c09-ef61-05a6-6ad0-f123acbf4a17.png)

#ベンチマーク用のモデル作成
今回は精度の比較対象に線形回帰(lm)を使用します。
事前に下記テーブルより、date以外の項目をcsvで出力しておきます。

| テーブル   ||出力ファイル |
|:----------:|:-:|:------------------:|
|juyo_all_data_2016_daytime|⇒|data2016.csv|
|juyo_all_data_2017_daytime|⇒|data2017.csv|

CSVレイアウト

| カラム    |
|:----------|
|max_temp|
|min_temp|
|hours_of_sunshine|
|humidity_avg|
|daytime_time|
|used_sum|

下記Rを実行し、予測結果を取得します。

```r:juyo.R
setwd("ファイル保存のディレクトリ")

#ファイル読み込み
juyo2016 <- read.csv("data2016.csv")
juyo2017 <- read.csv("data2017.csv")

#線形回帰でモデル作成＋予測
juyo.lm <- lm(used_sum~., data=juyo2016)
summary(juyo.lm)
juyo.lm.predict <- predict(juyo.lm,juyo2017)
print(data.frame(juyo.lm.predict))
```

#結果
ベンチマークにはhowtoページにある二乗平均平方根誤差（RMSE: Root Mean Square Error)を利用しました。
※数値が小さいほど誤差が少ない

|モデル   |RMSE |
|:----------|------------------:|
|(MAGELLAN BLOCKS)ニューラルネット|9,027|
|(R)線形回帰|17,553|


グラフで書くとこんな感じです。
線形回帰に比べると大分いい感じになっている事がわかります。
![グラフ.png](https://qiita-image-store.s3.amazonaws.com/0/106673/2266af30-24da-9437-4ae7-5f2dbdd27580.png)

#まとめ
- TensorFlowどころかPythonも書いていないのにそこそこの精度のモデルが出来た
- ニューラルネットワークの層数やユニット数等も考える必要なし（ハイパーパラメータチューニング）
- Googleのインフラを利用でき、BigQueryやGCSとの連携が容易
- 入力データを増やす、因子を変える、トレーニングの最大試行回数を増やす事で更なる精度向上が期待出来る

本職のデータサイエンティストであればより良いモデルが作成できるかもしれませんが、素人がプログラムを書くことなく、ここまで出来るようになったのはかなり凄い事なのではないでしょうか。

精度を上げる挑戦については、別途記事をあげたいと思います。
Zabbix+MySQL GroupReplication

この間のMySQL casualで発表した
Zabbix+MySQL GroupReplication(GR)の別記事です。
スライドはこちら
http://www.slideshare.net/bringer1/zabbixgroup-replication-71666508

Zabbix+HARPOXYとありますがZabbix+ProxySQL+HAPROXY+MySQL GRになってます。

MySQL GRは現時点ではシングルプライマリが推奨されると思います。
そのためには更新ポートと参照ポートを分けることが推奨され、
クエリによってい更新と参照を別ポートに分けるられるのがProxySQL（と更新の終わったMySQLproxyだけ）になります。
MYSQL GRのロードバランシングにHAPROXYが現時点で推奨されているためHAPROXYを採用しております。

#Zabbixのインストール
http://qiita.com/bringer1092/items/3ea3254324fdc8bbfa50

#Zabbix側のGR準備
http://qiita.com/bringer1092/items/320c269650f6ed12350e
を参考に
dbversion、history、history_str、history_uintにPKをつけます。
オンラインDDLが効くので無停止で可能です。
また、GTIDも有効にします。これも5.7なら無停止で有効にできます。

#ProxySQLの構築
http://qiita.com/bringer1092/items/7f2729ac83df92541e29

#HAPROXYの構築
http://qiita.com/bringer1092/items/b77a974c19b502862bba

#HAPROXYの監視のためのxinetd構築
こちらだけ私の記事ではありませんが
http://lefred.be/content/mysql-group-replication-as-ha-solution/

#MySQL GRの構築
http://qiita.com/bringer1092/items/9eec78d162c6359a26e5
VisualStudio(2015pro)のショートカット

基本的に自分用の備忘録です。
随時追加予定


- 色々修正:ctrl+.
- コード整形:ctrl+K,ctrl+D
- コメントアウト:ctrl+K,ctrl+C
- コメントアウト解除:ctrl+K,ctrl+U
- 全体のアウトライン化、解除:ctrl+M,ctrl+L
- 選択場所のアウトライン化、解除:ctrl+M,ctrl+M
- アウトラインの折り畳み:ctrl+M,ctrl+O
- イコールを揃える：ctrl+alt+]