OmniAICreator/Qiita-1.07M huggingface dataset:
Express(node.js)をdockerでデバックする時にnodemonを使って再起動なしで動作確認する



## ちょっと面倒なのを解決したい

Express(node.js)でコンテナ立ち上げているんですが、ちょっとファイルを修正したら、

```
docker-compose build node_debug
docker-compose up -d
```

で毎回面倒。

ファイルを変更したら、勝手に変更を検知して、再起動かけてくれないかな？
しかもdockerのコンテナは立ち上がったままで。

ありました。「nodemon」

## nodemonを入れる

[nodemon](http://nodemon.io/)
Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development. Install it using npm.


### インストール

コンテナで利用するので、package.jsonに記述されるように。

```
npm install --save nodemon
```

### package.json抜粋

```
{
  "name": "express",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "nodemon ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "config": "^1.16.0",
    "cookie-parser": "~1.3.5",
    "nodemon": "^1.10.2"
  }
}

```

### Dockerfile抜粋

```
EXPOSE 8080
WORKDIR /home/express
RUN rm -r node_modules; npm install

CMD ["npm", "start"]
```


## 面倒解決

- ホストからコンテナにファイルをコピーする

```
docker cp test.js express:/home/api/models/test.js
```

- 再起動してくれる

```
docker logs -f express

[nodemon] restarting due to changes...
[nodemon] starting `node ./bin/www`
```
$.dataと$.attr('data-*')の違い

jQueryの`$.data`と`$.attr('data-*')`で取得できる値が違うのは知っていたけど、実際どこまで違うのかわからなかったので調べました。



## やったこと

以下のhtmlの各data属性を`$.data`と`$.attr`で取ってきて`typeof`で調べるだけ。

```html
<section class="step__section" data-step="1" data-title="手順1" data-show="true" data-object="{}" data-func="function(){}"></section>
```



## 結果


```js:$.dataで取得したもの
typeof $('.step__section').eq(0).data('step');
// => "number" 0

typeof $('.step__section').eq(0).data('title');
// => "string" '手順1'

typeof $('.step__section').eq(0).data('show');
// => "boolean" true

typeof $('.step__section').eq(0).data('object');
// => "object" {}

typeof $('.step__section').eq(0).data('func');
// => "string" 'function(){}'

```

```js:$.attr('data-*')で取得したもの
typeof $('.step__section').eq(0).attr('data-step');
// => "string" '0'

typeof $('.step__section').eq(0).attr('data-title');
// => "string" '手順1'

typeof $('.step__section').eq(0).attr('data-show');
// => "string" 'true'

typeof $('.step__section').eq(0).attr('data-object');
// => "string" '{}'

typeof $('.step__section').eq(0).attr('data-func');
// => "string" 'function(){}'
```

`$.data`では関数以外はよしなに型変換してくれるようです。`function(){}`だけString型で返しているのはおそらくXSS対策なのでしょう。
それにくらべて`$.attr`はすべてString型で返しています。

どちらが良いかは人と使用する場合によりますが、全部String型で返ってくる`$.attr('data-*')`のほうが統一感あっていいです。
現場からは以上です。
Super-resolution(超解像技術)、画像の解像度を上げる方法

CEDEC 2016の[基調講演：画像を調理する：　面白く、役に立ち、ストーリーのある研究開発のすすめ](http://cedec.cesa.or.jp/2016/session/KN/12048.html)で低い解像度の画像を元に高い解像度の画像を推論する方法が紹介されており、その方法が目からウロコだったのでご紹介します。

## 画像の解像度を上げるのは難しい
![300.jpg](https://qiita-image-store.s3.amazonaws.com/0/39587/30ee36e3-d730-30d4-6306-5ffa67c84e14.jpeg "300.jpg")


左の荒い画像から右の詳細な画像へ解像度を上げる事はできるのでしょうか？
普通に考えるとより情報量の少ない低解像度からより情報量の多い高解像度の画像を得るのはできそうにありません。しかし統計的"幻覚"モデルを使えば可能であると言うのです。


## 統計的"幻覚"モデル
まずたくさんの画像を用意して高解像度から低解像度へ変換し、ある部分の低解像度同士で似た画像があれば元の高解像度画像を出力するようプログラムします。
似た画像の検索には機械学習を使うそうです。

![400.jpg](https://qiita-image-store.s3.amazonaws.com/0/39587/1f917405-385b-11bb-2f17-538419fc52d9.jpeg "400.jpg")


すると人の顔なら「目」や「鼻」といったパーツ単位であれば自分と非常に良く似た人がいるため、部分的に低解像度から高解像度へ自然に置き換えられるというもの。

このままではパッチワークになってしまうので数学的にスムーズにしているという事で、デモでは低解像度の男性画像から非常に良く似た（しかし細部が少し異なる）高解像度の画像を復元していました。


## 所感
講演を聞くまでは低い解像度の画像から高い解像度の画像を求める事はできないと考えており、そこで発想が止まっていました。そのためこの発表内容は衝撃でした。最後に参考URLを載せておきます。

[超解像技術](https://ja.wikipedia.org/wiki/%E8%B6%85%E8%A7%A3%E5%83%8F%E6%8A%80%E8%A1%93)
> 超解像技術（ちょうかいぞうぎじゅつ、Super-resolution）とはテレビなどに関わるデジタルでの画像処理技術の一つで、入力信号の解像度を高めて出力信号を作る技術を指し、具体的な製品では入力された動画や静止画の信号を高解像度化して出力したり、高解像度の画像を表示したりするものである。


[みずほ情報総研](http://www.mizuho-ir.co.jp/publication/navis/027/special02.html)
> ![低解像度の画像を鮮明化](http://www.mizuho-ir.co.jp/publication/navis/027/images/special02_04.jpg "")
node.jsのバージョンが変わった時にgulp実行でsassエラー

## gulpを実行したらnode-sassでエラー

原因は、node.jsのバージョンが変わってしまったことにあるようです。
今後も起こりそうでしたので備忘録として記載しておきます。

エラー文は下記のような内容。

```ruby:Error
[17:19:50] 'sass' errored after 407 ms
[17:19:50] Error: The `libsass` binding was not found in /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node
This usually happens because your node version has changed.
Run `npm rebuild node-sass` to build the binding for your current node version.
    at Object.sass.getBinaryPath (/Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/lib/extensions.js:158:11)
    at Object.<anonymous> (/Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:16:36)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/hogehoge/node_modules/gulp-sass/index.js:183:21)
    at Module._compile (module.js:434:26)

etc....
```
バージョンが合わなくて使うライブラリがないですよという感じでしょうか。

##解決方法

```ruby:Error
Run `npm rebuild node-sass` to build the binding for your current node version.
```
rebuildしてくれと表示されているので実行する。

```
$ npm rebuild node-sass

> node-sass@3.4.2 install /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass
> node scripts/install.js

Binary downloaded and installed at /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node

> node-sass@3.4.2 postinstall /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass
> node scripts/build.js

` /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node ` exists.
 testing binary.
Binary is fine; exiting.
node-sass@3.4.2 /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass

$ gulp
```
こちらでbuildされたので再度、gulpを走らせればOKです。
vim, tmux, git でよくやるファイル検索

# シチュエーション
「直近でいじってたファイルどれだっけ、修正したい」

# やること

- `git log -p`あるいは`git diff`
- ファイル名コピー
- ctrlp.vim のファイル検索にペースト
- 下のウィンドウで表示されている箇所へ飛ぶ

# だいたいこんな感じ(雑)

![sgFKfYtBFe.gif](https://qiita-image-store.s3.amazonaws.com/0/11316/24f1fafd-47cb-e567-f844-f3cb35f23793.gif)
PHP nl2br 

##nl2br
<font color="ff####">**▪️nl2br**
Stringに含まれる全ての改行文字の前に```<br />```又は```<br>```を挿入して返す

##file_get_contents(ファイル名)
<font color="ff####">**▪️file_get_contents(ファイル名)**
ファイルの中身を全て読み込む</font>

▪️indexbbs.php

```php:indexes.php
<!-- http://localhost:8888/tennis/indexbbs.php -->

<?php
// include 'includes/loginbbs.php';
// file_get_contents→ファイルの中身を全て読み込む
$info = file_get_contents ( "info.txt" );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm1ns="http://www.w3.org/1999/xhtml">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">


	<title>掲示板</title>

</head>
<body>
	<h1>テニスサークル交流サイト</h1>
	<p>
		<a href="albumbbs.php">アルバム</a>
	</p>
	<p>
		<a href="bbs.php">掲示板</a>
	</p>
	<h2>お知らせ</h2>
	<?php echo nl2br($info, false); ?>
</body>
</html>
```

▪️info.txt
ミーティングの日程について
日時：9月15日20時
場所：102教室
議題：コートの使用曜日について
筆記用具を持参してください

⇩ドキュメントルート内のtennisフォルダの中に「info.txt」
　という名前で保存する
![スクリーンショット 2016-08-30 17.39.58.png](https://qiita-image-store.s3.amazonaws.com/0/95187/d00910ad-0e5b-f8be-0697-0b623239c03d.png)

▪️実行結果
![スクリーンショット 2016-08-30 17.53.05.png](https://qiita-image-store.s3.amazonaws.com/0/95187/291292fa-6013-25cb-91a8-d0d39a828aa7.png)

##ドキュメントルート
<font color="ff####">webサーバーが外部に公開するファイルなどが置かれたフォルダ/ディレクトリ。
そのサーバーにアクセスした時の最上位フォルダ/ディレクトリがそこになる
(「http://ホスト名/」にあたる場所）。</font>
http://localhost:8888/
でドキュメントルートを開ける。
セレクトボックス　（optionのvalueとinput>submitのvalue）

```php
<?php
<form name="name" method="post" action="sample.php">
<select name="select">
<option>選択してください</option>
<option value="晴れ">晴れ</option>
<option value="雲">雲</option>
<option value="雨">雨</option>
<option value="台風">台風</option>
</select>
<input type="submit" name="Submit" value="天気！">
</form>
```
Itamae/ServerSpecでloginshellを扱う方法 with Capistrano

# これなに
・Capistrano + Itamae + ServerSpecの構成で、loginshellに書かれた変数をロードする方法について調べたので記録する。

# 前提
## バージョン
serverspec (2.36.0)
itamae (1.9.9)
capistrano (3.5.0)

## 構成

![image](https://qiita-image-store.s3.amazonaws.com/0/25935/047aa0ba-2f3c-e68d-a3bf-d3f2e3541acd.png)

Capistrano経由でリモートサーバー上のItamaeとServerSpecを実行します。
root権限に近いユーザーでCapistranoを実行し、そのまま同じユーザーでItamae/ServerSpecを実行して、各レシピ等にUserを明示する事で、`root(みたいな)`から`user`へ`sudo`でコマンドを実行させる方式にしています。
理由としては
・`sudoers`をいじりたくなかった。自動化しずらそうだったから。
・０からセットアップする時はrootユーザーしか存在しないから、それに近い権限から任せてやろうと思った。


## 何が起きたか
### Bundlerがない / セットアップ済のコマンドが見つからない

■ 原因
・Capistranoがリモートホストで実行する時にデフォルトではPATHが引き継がれない。
・リモートホストに `ssh` した際に、loginshellが実行されない為、PATHが設定されない。

■ 対策
・Capistranoではリモート先のLoginShellを実行する仕組みは現在存在しない。(仕様)なのであきらめる！
・実行元サーバーとリモートサーバーで設定されるべき変数は同じ(私の場合)だったので、CapistranoOptionを使ってPATHを引き継ぐ事にした。

```
vi config/deploy.rb
set :default_env, {
  PATH: "#{ENV['PATH']}"
}
```

### Itamaeレシピ実行時にコマンドが存在しない / 期待している変数が存在しない

CapistranoがLoginShell使わなくてもItamaeのレシピにUser指定してるし、そこでLoginShell呼べばいいじゃんと思ってたんだけど、
ダメだった話。
CapistranoからPATHを渡してるので、コマンドがない。って事は大概ないんですが、それ以外に期待している変数やdotfileがある場合に動かない。

■ 原因
Itamae実行時はuserが指定された場合に `sudo -H -u #{user.shellescape} -- #{shell.shellescape} -c #{command.shellescape}`
ってな感じでコマンドを実行している。[この部分](https://github.com/itamae-kitchen/itamae/blob/dc34f4d9959cc5fb2d30cbc387faa2f9d3f7aec8/lib/itamae/backend.rb#L185)
`sudo` 実行時に `-i` が渡せるとLoginShellが実行されるが、今のオプション体系では`-i`は渡せない。

■ 対策
CapistranoでもItamaeでもLoginShellが実行できない！つまりリモートサーバー側で設定してる変数で作業ができない！
なので、もう、しょうがなく。。。
`command`の冒頭で　`. ~/.bashrc && ` なんて書きました。
※ 私の環境では.bashrcから更に `source env.sh`みたいな事してる。
```
execute "start rabbitmq" do
  command ". ~/.bashrc && #{node.ope_script_dir}/rabbitmq-server.sh start"
  user "umisora"
  only_if "test -e #{node.ope_script_dir}/rabbitmq-server.sh"
end
```

Immutableとはいえ、login-shellのニーズって結構あると思うんだけどなー。
Recipiの最初の方で `bashrc`をセットして、`env`はGit Cloneしてきて、あとは良しなに。ってケース。

### ServerSpecが意図したユーザーで動いてない

前提として、私の環境はリモートはCapistranoが受け持って、Itamae/ServerSpecはローカル実行です。

```
> cat spec/spec_helper.rb
require 'serverspec'
set :backend, :exec
```

さて、こんな状態で以下のコードを実行すると`sudo`の動きが見えます。

```
# 成功 sudoされて -i オプションのおかげでログインShellが呼ばれて動く
describe command("sudo -u umisora -i env | grep -e ^USER 2>&1") do
  its(:stdout) { should contain('umisora ') }
end

# 失敗 sudo_optionsは有効ではなく、sudoされてない
describe command("env | grep -e ^USER 2>&1") do
  let(:sudo_options) { '-u umisora  -i' }
  its(:stdout) { should contain('umisora') }
end
```

■ 原因
・Capistranoは`PATH`以外は引き継いでこない。かつ、実行ユーザーは`root`に近い権限のユーザー
・`let(:sudo_options)` はServerSpecのadvanced tipsとして紹介されているが、Backendが`ssh`じゃないと動かない。
・Backendが`exec`だと、コマンドはすぐに`/bin/sh`に引き渡されてしまう。のでUserを変えるタイミングがない。

■ 対策
`sudo -u umisora -i command` でcommandを定義する様にした。
`-i`を付与しておく事で`umisora`のLoginShellが実行され、変数がもろもろセットされる。

```
describe command("sudo -u umisora -i env | grep -e ^USER 2>&1") do
end
```

# なんでこんなややこしい事を…
私が構築している環境で、自身で任意の場所にソースのCompile/Installしているケースが多々あり、
デフォルトの`/user/bin`とかにPATHを通しているだけでは、依存ライブラリすべてにPATHを通す環境になっていなかった。

さらに、そのユーザーにだけ許可した定義を設定する為に、`/home/user/.dotfile` を置いた結果 
正しく`sudo`ができていないと`.dotfile`を読み取る事ができなかった。
chmod? chown? よくわからんって人のための、ファイル権限系まとめ

# 今回取り上げるコマンドと簡単な概要
- **chmod**: (change mode)
ファイルやディレクトリのアクセス権(パーミッション)を変更する

```
chmod <パーミッション> <ファイルorディレクトリ>
```

- **chown**: (change owner)
ファイルやディレクトリの所有者を変更する

```
chown <[所有者]or[所有者:グループ]> <ファイルorディレクトリ>
```

- **chgrp**: (change group)
ファイルやディレクトリのグループを変更する

```
chgrp <グループ> <ファイルorディレクトリ>
```

# 前提知識
今回取り上げるファイル権限系のコマンドは、すべて「ch〇〇〇」というスペルになっています
これはすべて上のカッコ書きで書いたように、change 〇〇〇〇 の略

この意味も覚えておいたほうが何がどれだったかわかりやすい

## アクセス権（パーミッション）の種類
chmodによって、ファイルやディレクトリのアクセス権を変更する
と言っても、アクセス権が何かがわからないと話が進みません

アクセス権(パーミッション)の表し方には、3桁の数字で表す方法と、9文字の記号で表す2種類があります

「**777**」や「**rwxrwxrwx**」 という風に表されます

ちなみに好きなディレクトリで、lsに-lオプションをつけると以下のファイルやディレクトリのパーミッションの確認ができます

```
$ ls -l
drwxr-xr-x  2 user_name  group  68  8 30 15:53 common
-rw-r--r--  1 user_name  group   0  8 30 15:53 index.js
-rw-r--r--  1 user_name  group   0  8 30 15:53 index.php
```


### パーミッションの書き方
上の例での「drwxr-xr-x」に注目してください

まず最初の文字の「d」、これはディレクトリであることを意味し
ただのファイルであれば、「-」で置き換えられます
　　

そのあとの9文字がパーミッションというアクセス権の詳細です

```
rwxr-xr-x
```
この9文字を3文字づつ区切って読んでみると

```
「rwx」,「r-x」,「r-x」
```

これらがそれぞれ前から、「所有者の権限」,「グループの権限」,「その他の権限」になります
　　

ちなみに、ls -lでパーミッションの横にそのファイル(ディレクトリ)の所有者とグループが記述されます
以下の場合、user_name と group です

```
$ ls -l
drwxr-xr-x  2 user_name  group  68  8 30 15:53 common
-rw-r--r--  1 user_name  group   0  8 30 15:53 index.js
-rw-r--r--  1 user_name  group   0  8 30 15:53 index.php
```
　　

それぞれの文字が何を示すかというと、以下のようになっています
- **r** : (read) 読み込み権限
- **w** : (write) 書き込み権限
- **x** : (execute) 実行権限

なので、それぞれを組み合わせて

```
rwxr-xr-x
```

ならば、所有者はすべて、グループとその他は読みと実行のみという意味になる

　　
### 数字での省略記法

|記号|数字|意味|
|:-----|:-----|:-----|
|r|4|読み込み権限|
|w|2|書き込み権限|
|x|1|実行権限|

として3つを合計した数値で表す

よって、**755** ならば「**rwxr-xr-x**」と同じ意味になります
　　
## アクセス権の対象

アクセス権の対象も記号で表される
chmodなどで使うので覚えておきたい

|記号|意味|
|:-----|:-----|
|u|所有者（user）|
|g|グループ（group）|
|o|その他（other）|
|a|上の3つすべて（all）|

この記号もそれぞれカッコ内の略語であるので、それを意識すると覚えやすい
　　
　　

- - -
いよいよここからが本題の使い方のお話

# chmodの使い方
基本

```
chmod <パーミッション> <ファイルorディレクトリ>
```

一番簡単な使い方は、パーミッションの部分に数字での記法で記述する

```
chmod 755 <ファイルorディレクトリ>
```

既存のものに付け加える場合は、記号の記法が使いやすい

```
chmod g+x <ファイルorディレクトリ>
```

「**g+x**」とは、g（グループ）に x（実行権限）を +（加える）という意味になる
逆に権限をなくす場合は、「**g-x**」とすれば良い

## ディレクトリごと権限を変更したい場合

```
chmod -R 755 <ディレクトリ>
```

のように「-R」のオプションをつけます

　　
# chownの使い方
基本

```
chown <[所有者]or[所有者:グループ]> <ファイルorディレクトリ>
```
dataフォルダの所有者をsatouに変更する

```
chown satou data
```

dataフォルダの所有者をsatouにグループをstaffにする

```
chown satou:staff data

```

### ディレクトリごと権限を変更したい場合
chmodと同じように、「-R」オプションをつけます

　　
# chgrpの使い方
基本

```
chgrp <グループ> <ファイルorディレクトリ>
```

dataフォルダのグループをstaffにする

```
chgrp staff data
```

### ディレクトリごと権限を変更したい場合
chmodと同じように、「-R」オプションをつけます
scss-lintに"Avoid qualifying attribute selectors with an element"と言われたとき


解決法が日本語で落ちていなかったので、とても単純な問題だったのに少しばかり引っかかってしまった

```css
input[type=radio]:checked {
  +label {
    background-color: orange;
    color: #fff;
  }
}
```

このように書いたら怒られた

```css
input {
  &[type=radio]:checked {
    +label {
      background-color: orange;
      color: #fff;
    }
  }
}
```

これで解決できる。
言われてみれば確かにそうですよね。
クリックしたボタンと関連するDOMを取得



デモ：http://codepen.io/mo4_9/pen/ZpzQok

## data-*

```html
<div>
  <span data-form-id="1" class="box">1</span>
  <button data-form-id="1">ボタン1</button>
</div>
<div>
  <span data-form-id="2" class="box">2</span>
  <button data-form-id="2">ボタン2</button>
</div>
<div>
  <span data-form-id="3" class="box">3</span>
  <button data-form-id="3">ボタン3</button>
</div>
```

```Javascript:.filter()で絞り込む
$('button').on('click', function() {
  const id = $(this).data('form-id'); // 1~3を取得
  const $box = $('.box').filter(`[data-form-id=${id}]`);
  $box.css('background-color', 'pink');
});
```




## .on()のセレクタ


```html
<div class="parent">
  <ul class="menu">
    <li data-index="0">hoge0</li>
    <li data-index="1">hoge1</li>
    <li data-index="2">hoge2</li>
  </ul>
</div>
```

アクティブなliのdata-indexをクラスにして、親要素に付与する

```javascript:デリゲートを利用
const $parent = $('.parent');
const $menu = $('.menu');

// on('event', 'selector', function)
$menu.on('click', 'li', function(event) {
	$parent[0].className = 'parent s' +  $(this).attr('data-index');
});
```

> 参考
http://www.jquerystudy.info/reference/events/on.html
[JavaScript]SetTimeout関数の第一引数に渡す関数

```
setTimeout('func()', t);
```
等だと第一引数のfuncはグローバルオブジェクトから呼ばれるので、
任意の関数の設定に手こずった。
```
setTimeout('this.func()', t);
```
と書いてもthis参照が書いたところと変わってしまうので
意味なかった。

#解決法
```
setTimeout(function(){
   func();
}, t);
```
と書いたらこいつを書いたスコープからfunc()が呼ばれた。
正直理由はよくわかってないので後で調べたい（クロージャ？）。
thisは参照先が第一引数の匿名関数オブジェクトになってるようなので使えなかった。


JavaScriptの名前空間やスコープはしょっちゅうわけわからなくなる。
VisualStudioでのリモートデバッグ手順

# リモートデバッグツールのセットアップ

デバッグをしたいPCでは、リモートデバッグを受けつけるようにします。
そのためのツールをインストールします。

Remote Tools for Visual Studio 2012 Update 4
https://www.microsoft.com/ja-jp/download/details.aspx?id=38184
Remote Tools for Microsoft Visual Studio 2013 Update 4
https://www.microsoft.com/ja-jp/download/details.aspx?id=44918
Remote Tools for Visual Studio 2015
https://www.microsoft.com/ja-JP/download/details.aspx?id=48155

インストールしたら「Remote Debugger Configuration Wizard」を実行し、サービスを実行するユーザーを設定します。特にこだわりなければ「LocalSystem」にしておくと、あとでリモート接続するときには対象PCで有効なユーザーでログイン出来ます。

セットアップしたら「Remote Debugger」を実行すると待ち受け可能な状態になります。

# VisualStudioからリモートデバッグ
「プロセスにアタッチ」の装飾子に「ユーザー名@マシン名」を入力して検索を行うと、リモート接続が行われます。パスワードが必要な場合は入力を求められます。

![vsdebug03_21_s.gif](https://qiita-image-store.s3.amazonaws.com/0/114529/6e58525a-1d64-ae47-6690-7bc98fbb3e0e.gif)

デバッグ情報があるアセンブリであればステップ実行も出来ます。
それでは良きデバッグライフを！！
geopandasを使ってみる

# これなに
[PyData.Tokyo Meetup #9 -「地理情報データ」](http://pydatatokyo.connpass.com/event/38198/)で紹介されていた **geopandas** を[StatsFragments](http://sinhrks.hatenablog.com/entry/2015/07/18/215951) を参考に試してみました。

# インストール
Anaconda入れて、[Anaconda cloud](https://anaconda.org/) の conda-forge 使えば簡単。下記のコマンド一発[^1]。

```bash:bash
conda install -y geopandas -c conda-forge
```

Dockerイメージ[tsutomu7/geopandas](https://hub.docker.com/r/tsutomu7/geopandas/)も用意しました。下記のようにすればできるはず。(Jupyterサーバー起動後にブラウザを更新してください)

```bash:bash
firefox http://localhost:8888 &
docker run -it --rm -p 8888:8888 tsutomu7/geopandas sh -c "jupyter notebook --ip=*"
```

# Jupyterで試してみる
準備。flattenは、配列の配列を配列にするもの。

```py3:python3
%matplotlib inline
import numpy as np, pandas as pd, geopandas as gpd
from bokeh.plotting import output_notebook, show, figure
output_notebook()
flatten = lambda i: [a for b in i for a in (flatten(b) if hasattr(b,'__iter__') else (b,))]
```

geopandas のバージョンは、0.2.1 で現時点で最新。

```py3:python3
gpd.__version__
>>>
'0.2.1'
```

東京のデータを地球地図日本からダウンロード。

```py3:python3
!wget --no-check-certificate https://github.com/dataofjapan/land/raw/master/tokyo.geojson
```

最初の3行を見てみる。

```py3:python3
df = gpd.read_file('tokyo.geojson')
df[:3]
```

 |area_en|area_ja|code|geometry|ward_en|ward_ja
:--|:--|:--|:--|:--|:--|:--
0|Tokubu|都区部|131211.0|POLYGON ((139.821051 35.815077, 139.821684 35....|Adachi Ku|足立区
1|Tokubu|都区部|131059.0|POLYGON ((139.760933 35.732206, 139.761002 35....|Bunkyo Ku|文京区
2|Tokubu|都区部|131016.0|POLYGON ((139.770135 35.705352, 139.770172 35....|Chiyoda Ku|千代田区

geometry にポリゴンデータが入っています。
matplotlib で描画。

```py3:python3
df[df['area_en'] == 'Tokubu'].plot();
```

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/eeb465cf-7bc1-2a3d-0328-9550b681ca44.png)

今度は、bokehで描画。
geometryのポリゴンは、shapely.geometry.polygon.Polygon と shapely.geometry.multipolygon.MultiPolygon が混じっているので、flattenでPolygonの配列にします。

```py3:python3
xy = [i.exterior.coords.xy for i in flatten(df[df.area_en == 'Tokubu'].geometry)]
p = figure(plot_width=400, plot_height=300)
p.patches([tuple(i[0]) for i in xy], [tuple(i[1]) for i in xy], 
          fill_color='white', line_color="black", line_width=0.5)
show(p);
```

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/5ae4cb3b-97f5-6915-5c7a-125a41829102.png)

Geocodingはうまくいきませんでした。

参考リンク

- [Python geopandas + Bokeh で地理情報をプロットしたい](http://sinhrks.hatenablog.com/entry/2015/07/18/215951)
- [GeoPandas Doc](http://geopandas.org/)
- [GeoPandas PyPI](https://pypi.python.org/pypi/geopandas/)
- [PythonとQGISを使って地理空間を可視化する – UFO目撃情報でのケーススタディ](http://postd.cc/using-python-and-qgis-for-geospatial-visualizations-a-case-study/)
- [PyData.Tokyo Meetup #9 -「地理情報データ」](http://pydatatokyo.connpass.com/event/38198/)
- [Anaconda cloud](https://anaconda.org/)
- [Pythonで地理情報をプロットする](http://qiita.com/K-1/items/dacb66fed98c2d738963)
- [地球地図日本](http://www.gsi.go.jp/kankyochiri/gm_jpn.html)
- [AnacondaのJupyter notebookでnbextensionsを使う](http://qiita.com/Tsutomu-KKE@github/items/1326e05eb992a8aa849d)
- [tsutomu7/geopandas/](https://hub.docker.com/r/tsutomu7/geopandas/)

[^1]: "conda install -y pyproj shapely fiona; pip install geopandas" でもできました。

以上
OWASP ZAP Tips & Tricks　コマンドラインでプロキシ設定

# OWASP ZAPの外部プロキシ設定
OWASP ZAP自身の外部プロキシ設定は以下の場所で設定できます。

「ツール」->「オプション...」->「ネットワーク」

![image](https://qiita-image-store.s3.amazonaws.com/0/28161/097dcd4c-f505-4749-2609-6e02a2a38ebf.png)

図の「外部プロキシサーバ」にチェックを入れ、「アドレス/ドメイン名」と「ポート（例：8080）」にZAPが接続する外部プロキシの情報を入力します。

# コマンドラインのオプションでプロキシ設定
「ローカル・プロキシ」および「ネットワーク」設定は、コマンドラインのオプションでも指定可能です。

### zap-user-dir.bat (Windows)
```bat:zap-user-dir.bat
set ZAP_USER_DIR="C:\Users\hoge\path\to\dir"
set ZAP_PROXY_HOST=127.0.0.1
set ZAP_PROXY_PORT=57777
set ZAP_PROXY_CHAIN_ENABLED=true
set ZAP_PROXY_CHAIN_HOSTNAME=127.0.0.1
set ZAP_PROXY_CHAIN_PORT=58888

java -jar    zap-2.6.0.jar ^
     -dir    %ZAP_USER_DIR% ^
     -host   %ZAP_PROXY_HOST% ^
     -port   %ZAP_PROXY_PORT% ^
     -config connection.proxyChain.enabled=%ZAP_PROXY_CHAIN_ENABLED% ^
     -config connection.proxyChain.hostName=%ZAP_PROXY_CHAIN_HOSTNAME% ^
     -config connection.proxyChain.port=%ZAP_PROXY_CHAIN_PORT%
```

### zap-user-dir.sh (OS X, Ubuntu, CentOS, ...)
```bash:zap-user-dir.sh
ZAP_USER_DIR=/home/hoge/path/to/dir
ZAP_PROXY_HOST=127.0.0.1
ZAP_PROXY_PORT=57777
ZAP_PROXY_CHAIN_ENABLED=true
ZAP_PROXY_CHAIN_HOSTNAME=127.0.0.1
ZAP_PROXY_CHAIN_PORT=58888

java -jar    zap-2.6.0.jar \
     -dir    $ZAP_USER_DIR \
     -host   $ZAP_PROXY_HOST \
     -port   $ZAP_PROXY_PORT \
     -config connection.proxyChain.enabled=$ZAP_PROXY_CHAIN_ENABLED \
     -config connection.proxyChain.hostName=$ZAP_PROXY_CHAIN_HOSTNAME \
     -config connection.proxyChain.port=$ZAP_PROXY_CHAIN_PORT
```

### コマンドラインのオプションや変数の意味

|オプション|例の変数名|意味|値の例|
|:--|:--|:--|:--|
|-dir|ZAP_USER_DIR|ZAPの作業ディレクトリ|"C:\Users\hoge\path\to\dir"|
|-host|ZAP_PROXY_HOST|ZAP自身の待受ホスト名またはIPアドレス|127.0.0.1|
|-port|ZAP_PROXY_PORT|ZAP自身の待受ポート|57777|
|-config connection.proxyChain.enabled|ZAP_PROXY_CHAIN_ENABLED|外部プロキシに接続する場合にtrue|true|
|-config connection.proxyChain.hostName|ZAP_PROXY_CHAIN_HOSTNAME|外部プロキシのホスト名またはIPアドレス|127.0.0.1|
|-config connection.proxyChain.port|ZAP_PROXY_CHAIN_PORT|外部プロキシのポート|58888|


# 参考
https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/zaproxy-develop/WfzSgj95sWM/zgrx3uTKDwAJ
master branchと同調しながら、自分特別なコマンドなどを維持する

# Target
While using github to manage the project of my team, keep synchronizing with the master branch while I remain my own comment on branch "mine".
![git.png](https://qiita-image-store.s3.amazonaws.com/0/137200/9a1f12df-83c8-2212-1f3a-f9f678ea3d72.png)


# Process
1. Create a test repository. Create a text file called "test" in it.
To simulate the real situation, the content of "test" is as follows:
<pre>
public void function1(){
	//something
}
public void function2(){
	//something
}
</pre>
2. Commit "test" to master branch.
3. Create a new branch called "mine".
4. Send a pull request from master to mine and merge it to branch "mine".
Now we can find document "test" in branch "mine".
![text.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/f17cb9bb-9ef5-2671-cd36-32bf03075025.png)

5. On <b>master</b> branch, change the context of "text" a bit. 
![changeinmaster.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/e26890fb-7b1b-85dc-27fb-2344274dbda7.png)
Commit the change.
 On <b>mine</b> branch, add some comments to "test"
![changemine.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/52ad9f92-b20a-daf6-927c-9723419a0f1a.png)
Commit the change.
6. Send a pull request from master to mine.
7. On <b>mine</b> branch, cliclk "update from master".
The file on <b>mine</b> branch becomes as follows:
 ![merge.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/59cf99f1-67dc-f369-4ad2-d3ca1b7b7d88.png)
While the file on <b>master</b> branch keeps unchanged:
![mastersame.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/5c29151f-e258-aacb-ef77-260897cbb9e2.png)


# Edit conflict manually
Normally, git will automatically merge the difference of mine branch and master branch, but there are also some conflicts that can not be dealt with automatically. Example:
1. "test.txt" on mine branch:
![-mine.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/c8e0bf11-8bda-0142-5809-c47edf88eb32.png)
while "text.txt" on master branch is as follows:
![-masterbranch.PNG](https://qiita-image-store.s3.amazonaws.com/0/137200/fe1b31f8-af39-a338-1b2e-413e864bf3e6.png)
2. Change the file on master branch as follows:
<pre>
private void function1(){
	//something
}
public void function2(){
	//other things
}
</pre>
3. Send pull request from master to mine.
4. Update mine branch, now conflict happens:
![conflict.JPG](https://qiita-image-store.s3.amazonaws.com/0/137200/9877453e-7fea-58d6-c35f-e322caf290e8.jpeg)
5. Calm down and edit the file. Be sure to remain both the change from master branch and mine branch.
<pre>
//This is the first function
private void function1(){
	//something
}
public void function2(){
	//other things
}
</pre>
6. Commit. Done!


# Conclusion
It's easy to keep one`s own addiction while synchronizing with the master branch. "Merge" function will automatically deal with the conflict between the pull request and local files, although there may also be some conflicts that have to be solved by the programmer's own hand.
postgresql で全く存在しないユーザーに管理者権限を付けてパスワードログインするまで


まず、postgresql をインストールした時に設定している管理者ユーザー権限が必要。
ここが一番難しいようにも思うけど...

linux で rpm や deb パッケージでインストールしたならば postgres ユーザーが OS に登録されるので、OSの管理者権限でログインして

``` sh
# su -u postgres
$ psql ...
```

とか

``` sh
$ sudo -u postgres psql ...
```

のように起動できなければ、たぶん道は無いと思う。

Windows の場合は postgers ユーザー権限で実行するとか、どうやればいいんでしょうね？


前提として、インストール時の初期設定で postgres のデータベースパス(環境変数なら PGDATA の値)を探し出して、 pg_hba.conf ファイルを見つけて、認証方法の設定が trust (OSユーザー認証) になっていないと上の方法で postgres にアクセスできませんので確認してください。

鶏卵的には pg_hba.conf は、psql でデータベースに接続された状態で

``` psql
=# SHOW hba_file;
```

を実行すれば、どこの pg_hba.conf ファイルを見ているか判ります。ログインできれば。

* linux では /var/postgres とか /var/lib/postgres あたりがありがち
* brew on Mac では /usr/local/var/postgres でした
* windows は... たぶんインストーラーが最後に表示していたと思うよ

## ユーザーロール作成

``` sh
$ create user -P <user name>
```

``` sh,psql
$ psql postgres
=# ALTER ROLE "<user name>" WITH LOGIN SUPERUSER ENCRYPTED PASSWORD '<user password>';
```

管理者権限で、ログイン可能で、暗号化パスワード

ついでに今ログインしているユーザーのパスワードも付けておきます。

``` psql
=# ALTER ROLE "<default postgres>" WITH ENCRYPTED PASSWORD '<password>';
```


## 認証方法の変更

pg_hba.conf の変更

``` pg_hba.conf
...
# TYPE  DATABASE        USER            ADDRESS                 METHOD

# "local" is for Unix domain socket connections only
local   all             all                                     md5
# IPv4 local connections:
host    all             all             127.0.0.1/32            md5
# IPv6 local connections:
host    all             all             ::1/128                 md5
```

METHOD を ident から md5 に変更


## postgres の再起動

`pg_ctl` や `service postgres` や `/etc/init.d/postgres` などで postgresql の再起動をして、ログインできるか試します。

``` sh
$ psql -U <user name> -h localhost -W postgres
Password: 
```

<user name> ユーザーのパスワードでログインきれば OK です。
iOSでバックグラウンド時にアプリの実行画面を隠す(マスクする)方法

iOSでホームボタンでの切替時にバックグラウンド実行中のアプリの実行画面をマスクしたいときがあります。例えば、TouchIDなどを対応するB2CアプリやB2B/B2E向けのアプリにおいて、バックグラウンドで実行中もセキュリティを担保したい場合を想定しています。

AppDelegate.swiftにて、該当するメソッド内に遷移を記述いたします。キーになるのは、applicationWillResignActive()とapplicationDidBecomeActive()のメソッドです。それぞれバックグラウンドに入るときと、フォアグラウンドに呼び戻されるときにコールされます：

```AppDelegate.swift
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    var splashView: UIView?   // 新規で追加するView

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        splashView = UIView(frame: (self.window?.bounds)!)

        // スプラッシュの背景を黒色にしてみる。画像を入れ込みたい場合には、splashViewに対して、addSubviewでUIImageViewなどを追加すれば良い。
        splashView?.backgroundColor = UIColor.blackColor()
        
        return true
    }

    func applicationWillResignActive(application: UIApplication) {
        // アクティブアプリから外れるときに現在のウインドウ表示項目として、splashViewを追加する。
        self.window?.addSubview(splashView!)
    }

    func applicationDidEnterBackground(application: UIApplication) {
    }

    func applicationWillEnterForeground(application: UIApplication) {
    }

    func applicationDidBecomeActive(application: UIApplication) {
        // 追加したsplashViewをsuperViewから削除する。
        self.splashView?.removeFromSuperview()
    }

    func applicationWillTerminate(application: UIApplication) {
    }
}
```

※applicationWillEnterForeground()でremoveFromSuperview()を行った場合、コントロールセンターで非アクティブになったときからのアプリ復帰などが対応できませんので、applicationDidBecomeActive()で行うようにしてください。

いかがでしたか。かなりシンプルですが、このプログラムを記述することで、バックグラウンド時にアプリの実行画面のマスクをすることができます。必要に応じて、Splash用のかっこいいロゴなどをUIViewに追加するとそれっぽくなります。
bot (Hubot) から slack の usergroup にメンションを送る

名前にハイフンなどが含まれている場合は、普通に `@group-name` としてもメンションが送られません。IDを調べた上で、 `<!subteam^ID|group-name>` とする必要があります。

今回IDは固定だったので、[WebのAPIテスター]( https://api.slack.com/methods/usergroups.list/test)を使って調べました。

![usergroups_list_method___Slack.png](https://qiita-image-store.s3.amazonaws.com/0/18113/aeb74761-47ec-1610-e35b-36ff268d1d43.png)

詳しくはこちらに書いてあります。 https://api.slack.com/docs/message-formatting
ArrayListのclearメソッドとnewの速さ比較

ArrayListが格納された変数を使いまわす手段として、以下の2つの方法を比較しました。

+ clear()メソッドを使う。
+ newでインスタンスを生成する。

実行環境は以下の通りです。

<ul>
	<li>DELL VOSTRO 1540
	<li>Windows 10 Pro 32bit
	<li>Intel Celelron 2.00 GHZ
	<li>メモリ 2.0GB
	<li>HDは約300GB
</ul>

以下の2つのプログラムを使い、速さを比較しました。「ArrayList<Integer>に0から30000未満まで格納し、clear/newを実行する」というのを30000回繰り返してます。

```java:ArrayListClear
public class ArrayListClear {

    public static void main(String[] args) {

        long start, end;
        List<Integer> list = new ArrayList<>();

        start = System.currentTimeMillis();
        for (int i = 0; i < 30000; i++) {
            for (int j = 0; j < 30000; j++) {
                list.add(j);
            }
            list.clear();
        }
        end = System.currentTimeMillis();
        System.out.println(end -start);

    }

}
```

```java:ArrayListNew
package test;

import java.util.ArrayList;
import java.util.List;

public class ArrayListNew {

    public static void main(String[] args) {

        long start, end;
        List<Integer> list = new ArrayList<>();

        start = System.currentTimeMillis();
        for (int i = 0; i < 30000; i++) {
            for (int j = 0; j < 30000; j++) {
                list.add(j);
            }
            list = new ArrayList<>();
        }
        end = System.currentTimeMillis();
        System.out.println(end -start);

    }

}
```

結果は以下の通りです。

| クラス名 | clear()       | new ArrayList<>()   |
|:--------:|:--------------|:--------------------|
| ミリ秒   | 22982         |     29450           |

clear()メソッドを使った方が速いという結果になりました。

#コンストラクタArrayList(int initialCapacity)の場合

saka1029さんに初期容量についてコメントを頂きました。コンストラクタArrayList(int initialCapacity)を使った場合を載せます。

以下の2つのプログラムで比較しました。

```java:ArrayListClear30000
package test;

import java.util.ArrayList;
import java.util.List;

public class ArrayListClear30000 {

    public static void main(String[] args) {

        long start, end;
        List<Integer> list = new ArrayList<>(30000);

        start = System.currentTimeMillis();
        for (int i = 0; i < 30000; i++) {
            for (int j = 0; j < 30000; j++) {
                list.add(j);
            }
            list.clear();
        }
        end = System.currentTimeMillis();
        System.out.println(end -start);

    }

}
```

```java:ArrayListClear30000
package test;

import java.util.ArrayList;
import java.util.List;

public class ArrayListNew30000 {

    public static void main(String[] args) {

        long start, end;
        List<Integer> list = new ArrayList<>(30000);

        start = System.currentTimeMillis();
        for (int i = 0; i < 30000; i++) {
            for (int j = 0; j < 30000; j++) {
                list.add(j);
            }
            list = new ArrayList<>(30000);
        }
        end = System.currentTimeMillis();
        System.out.println(end -start);

    }

}
```


| クラス名 | clear()       | new ArrayList(int initialCapacity)   |
|:--------:|:--------------|:-------------------------------------|
| ミリ秒   | 22599         | 21335                                |

new ArrayList(int initialCapacity)の方が速いという結果になりました。


#修正履歴

20160830

+ 「コンストラクタArrayList(int initialCapacity)の場合」を追記。
vscodeでTypescript2.0+@typesを使用する時にエラーが出る対処

# 事象

@typesで型定義を使用する場合にvscodeで赤線エラー`Cannnot find name hogehoge`が出る。

# 対処

http://stackoverflow.com/questions/38268776/why-does-typescript-ignore-my-tsconfig-json-inside-visual-studio-code
ここにあるとおり、設定でTypescript2.0があるディレクトリを記載すれば良い。

# 所感

Projectを変える毎に設定変えるのは面倒だな・・・
DBからCSV

```php
http://php.programmer-reference.com/php-mysql-csv-download/
<?php
     $fileNm = "syain.csv";
     header('Content-Type: text/csv');
     header('Content-Disposition: attachment; filename='.$fileNm);
     echo mb_convert_encoding($csvstr, "SJIS", "UTF-8"); //Shift-JISに変換したい場合のみ
     exit();
```
C言語でマルチインスタンスモジュールを書く

## 概要

## マルチインスタンスモジュールとは

> アプリケーションによっては、同じモジュールに異なるデータと状態を持たせるために、複数のインスタンスが必要になるだろう。たとえば、複数のFIFO データを必要とするアプリケーションが考えられる。
(テスト駆動開発による組み込みプログラミング)

C++ や java や python 等ではクラスを書いてインスタンス生成すれば、別々の状態をもったオブジェクトを管理できますが、C にはクラスがないので工夫が必要となります。

## つくるもの
カウンターをつくります。機能は以下の通りです。

* カウントアップ
* カウントダウン
* カウントを出力
* カウントをリセット

## 構造体を定義する
内部データを格納するための構造体を定義します。

```c
// counter.c
#include "counter.h"

typedef struct CounterStruct
{
    int count;
    int subtotalCount;
} CounterStruct;
```

構造体はヘッダファイルでポインタ型として typedef しておきます。

```c
// counter.h
typedef struct CounterStruct *Counter;
```

これにより構造体の中身を隠蔽したまま、外部(counter.hをインクルードしたコード)から利用できるようになりました。

## コンストラクタとデストラクタ
インスタンスを生成(メモリを確保)するコンストラクタと、破棄(メモリを開放)するデストラクタを書きます。

```c
// counter.c
Counter Counter_Create(void)
{
	Counter self = malloc(sizeof(CounterStruct));
	self->count = 0;
	self->subtotalCount = 0;
	return self;
}

void Counter_Destroy(Counter self)
{
	free(self);
}
```

どのようにして使うかというと、

```c
#include counter.h

int main(void){
    Counter myCounter1;
    Counter myCounter2;
    // まずポインタを宣言。このときまだメモリは確保されていない

    myCounter1 = Counter_Create();
    myCounter2 = Counter_Create();
    // Counter_Create() 内でメモリが確保され、そのアドレスが返り値で渡される
    // 返り値をさっきつくった myCounter ポインタにセットする

    Counter_Destroy(myCounter1);
    Counter_Destroy(myCounter2);
    // 使い終わったらメモリを開放する
}
```

## 機能をつくる
関数は第一引数として Counter 型をとります。たとえばカウントをインクリメントする関数は

```c
void Counter_CountUp(Counter self)
{
	self->count++;
}
```

となります。

## 変数の値を取得する
Counter 型の詳細は隠蔽されているので、変数にアクセスするためには関数を通して値を取得します。

```c
int Counter_GetCount(Counter self)
{
    return self->count;
}
```

## まとめ
* ひとつのコードで複数の状態をもてる
* 構造体の詳細は隠蔽する
* 変数に直接アクセスさせない
* 今回のコード:https://github.com/paragraph14/qiita-code/tree/master/counter

## 参考
[テスト駆動開発による組み込みプログラミング](https://www.oreilly.co.jp/books/9784873116143/)
HTML FormにGetクエリパラメータを代入するブックマークレット

[Trac](https://trac.edgewall.org/)でも[Redmine](http://www.redmine.org/)でもできるのに、[Backlog](http://www.backlog.jp/)だと新規課題を作るためのテンプレート機能がなかったので、カッとなって作ってみた。
IE系で使うときは改行文字をとって一行にすれ

```js:query_parameters_to_input_values
javascript:!function(q){
  document.location.search.slice(1).split("&").forEach(function(e){v=e.split("=");q[v[0]]=decodeURI(v[1])});
  [].forEach.call(document.getElementsByTagName("input"), function(e){e.name&&q[e.name]&&(e.value=q[e.name])});
}({});
```

「ブラウザのアドレスバーの ?から後ろを取り出し、&で分割したそれぞれについて、=の左をキー、右を値としたハッシュテーブルをこしらえておいて、inputタグのうち、nameがハッシュテーブルのキーと一致していたら、その値を設定する。」

----

使い方:

1. 上記文字列をブックマークレットとして登録しておく。
2. リンクするURLにこんなおまけをつけておく: `?key1=value1&key2=value2...`
3. ブックマークレットを実行すると、form の `input type=text name=key1` に value1 が、 `input type=text name=key2 に value2` がそれぞれ代入される。

TODO:

- select option を selected にする処理を入れる。  → [Backlog](http://www.backlog.jp/)のselectが難しすぎた……

----
Backlogのinputとselectに対応したもの。 `?summary=boo&issueTypeId=C2J&priority=高`  みたいに使う。 
jquery.chosen ライブラリに合わせた。
アロー演算子を使いたかったんだけど、IE11が対応してなかった……

```js
javascript:!function(q){
  document.location.search.slice(1).split("&").forEach(function(e){v=e.split("=");q['issue.'+v[0]]=decodeURI(v[1])});
  [].forEach.call(document.getElementsByTagName("input"), function(e){q[e.name]&&(e.value=q[e.name])});
  [].forEach.call(document.getElementsByTagName("select"), function(e){
    q[e.name]&&[].slice.call(e.options)
      .filter( function(o){return q[e.name]==o.text})
      .forEach(function(s){jQuery(e).val(s.value).trigger("liszt:updated")})
  });
}({});
```

注意:

- 現状有姿無保証での提供です。エラーハンドリングとかちゃんとやってないし。ま、Submitとかしてないから影響ないと思うけど

なんか他の人もつくってそうな予感。
もうちょっとうまいやり方がある予感。
というかサーバサイドでやってくれよと思う。

Any Comments, Suggestions are welcome!
ホストは64bitなのに、VirtualBoxで64bit仮想マシンが起動できない場合の対処方法

#VirtualBoxで64bitOSが起動しない場合の対処方法
##64bit仮想マシンが起動しない！

* VirtualBoxで64bit仮想マシンを起動しようしようとしてエラーが表示された
* Windows10にアップグレードしたら、64bit仮想マシンが起動しなくなった
* Vagrant up を実行するとssh接続でタイムアウトする

そんな時、怪しいのはHyper-V

##Hyper-V を停止させる

1. コントロールパネルを開く
2. プログラムと機能を開く
3. Windows機能の有効化または無効化を実行
4. Hyper-Vのチェックマークを外す
5. Windows再起動
6. 64bit仮想マシンが起動すれば成功、しなければ他に原因あり
Windowsのサービスの依存サービスを後から変更する

Windows ServerでTomcatサービスの依存サービスをscコマンドで変更したときのメモ。  
Tomcatで動かすWebAppがローカルのSQL Serverに接続するアプリだったので、SQL Serverの起動後にTomcatを起動するよう設定したかった。

# 環境

- Windows Server 2012 Standard
- Tomcat 8.5.4 (Windowsインストーラ版)がインストール済 （サービス名はTomcat8)
- SQL Server 2014 がインストール済（サービス名はMSSQL$DB）

# 手順

以下手順は管理者権限があるユーザで実施する。

Windows PowerShellを管理者として起動し、cmdを起動する。(サービス変更に使用するscコマンドはPower Shellからは実行できない)

```
PS C:\> cmd
Microsoft Windows [Version 6.2.9200]
(c) 2012 Microsoft Corporation. All rights reserved.

C:\>
```
現在のTomcatの依存サービスを確認。 
依存サービスはDEPENDENCIESの値。以下よりTcpip、Afdが依存サービス。

```
C:\>sc qc Tomcat8
[SC] QueryServiceConfig SUCCESS

SERVICE_NAME: Tomcat8
        TYPE               : 10  WIN32_OWN_PROCESS
        START_TYPE         : 3   DEMAND_START
        ERROR_CONTROL      : 1   NORMAL
        BINARY_PATH_NAME   : "C:\Tomcat 8.5\bin\Tomcat8.exe" //RS//Tomcat8
        LOAD_ORDER_GROUP   :
        TAG                : 0
        DISPLAY_NAME       : Apache Tomcat 8.5 Tomcat8
        DEPENDENCIES       : Tcpip
                           : Afd
        SERVICE_START_NAME : LocalSystem
```

sc configコマンドで依存サービスを変更する。 
依存サービスは `depend=` で指定する。依存サービスは現在DENENDENCIESに登録されているサービスを含めて、スラッシュ区切りで指定する。 
`depend=` と、指定するサービスの間にはスペースが必要な事に注意。(他のパラメータ指定でも同様)

```
C:\>sc config Tomcat8 depend= "Tcpip/Afd/MSSQL$DB"
[SC] ChangeServiceConfig SUCCESS
```

変更後の依存サービスを確認。MSSQL$DBがDEPENDENCIESに追加されている。

```
C:\>sc qc Tomcat8
[SC] QueryServiceConfig SUCCESS

SERVICE_NAME: Tomcat8
        TYPE               : 10  WIN32_OWN_PROCESS
        START_TYPE         : 3   DEMAND_START
        ERROR_CONTROL      : 1   NORMAL
        BINARY_PATH_NAME   : "C:\Tomcat 8.5\bin\Tomcat8.exe" //RS//Tomcat8
        LOAD_ORDER_GROUP   :
        TAG                : 0
        DISPLAY_NAME       : Apache Tomcat 8.5 Tomcat8
        DEPENDENCIES       : Tcpip
                           : Afd
                           : MSSQL$DB
        SERVICE_START_NAME : LocalSystem
```

### 参考
sc configコマンドのhelp

```
C:\>sc config help
説明:
        レジストリおよびサービス データベースのサービス エントリを変更します。
使用法:
        sc <サーバー> config [サービス名] <オプション1> <オプション2>...

オプション:
注意: オプション名には等号が含まれています。
      等号と値の間にはスペースが必要です。
 type= <own|share|interact|kernel|filesys|rec|adapt>
 start= <boot|system|auto|demand|disabled|delayed-auto>
 error= <normal|severe|critical|ignore>
 binPath= <.exe ファイルへの BinaryPathName>
 group= <LoadOrderGroup>
 tag= <yes|no>
 depend= <依存関係 (スラッシュ (/) で区切られています)>
 obj= <AccountName|ObjectName>
 DisplayName= <表示名>
 password= <パスワード>
```
考察 > ただのメモ


- system of linear equation
- iteration
- initial values
- 2005年 Bremen
- T-matrix
- SH-matrix
- Convolutional Neural Network
- Conjugate Gradient Method

初期値を適当な値でCGMで解くと時間がかかる。
初期値が解に近い場合はCGMの計算が短縮される。2006年ころの計算では処理時間は1/5になっていた。

ある条件に対する係数をCNNで学習させ、誤差があったとしてもCGMを続けることで、計算精度を希望精度までもっていく。

これらを証明するプロトタイプ作成にかかる時間はだいたい200時間以上。
他のプロジェクトを止めずにこれをやるには100週くらいかかる。

2018年のBremenに間に合うかどうかといったところ。
ACM(AWS Certificate Manager)での証明書発行とELB登録

# 概要
ACM(AWS Certificate Manager)で証明書を発行する手順と
発行した証明書をELBに登録する手順について書いていきます。

# ACMとは
AWSの証明書発行サービスです。
ワイルドカード証明書にも対応しています。
発行には料金はかかりません。
証明書は自動的に更新されるので、期限切れを気にする必要がなくなります。

# 発行手順
1.AWSコンソールにログインし、Certificate Managerを選ぶ
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/aff6403d-d1a7-dd23-d252-6907d9da6016.png)

2.Request a Certificateを選ぶ
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/a80347c0-d016-932f-5f29-81e52ee19562.png)

3.証明書を取得したいドメインを入力し、Review and Requestを押す
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/a2da030a-7d0d-3f51-a497-00cd0763e774.png)

4.内容を確認して、Confirm and Requestを押す
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/bfaa4ad8-89e1-beea-9bbc-a22140f4badf.png)

5.Continueを押して認証用メールを送信する。
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/f201a632-a72e-a095-c624-6e48a1be15b5.png)

Continueを押すとドメインの管理者宛にメールが送られます。
宛先は*.example.comで発行した場合
- admin@example.com
- administrator@example.com
- hostmaster@example.com
- postmaster@example.com
- webmaster@example.com
の５つのメールアドレスとwhoisに登録されているメールアドレスに対して
認証用メールが送られるようです。
メールは数分程度で送られてくるようです。

whoisの管理者情報はwhoisコマンドで確認できます。

```bash
$ whois example.com
```

5.認証用メールを受信したら承認を行う。

# ELBへの登録
1.ELBの証明書選択画面を開く
2.Certificate TypeからACMを選び、Certificateから作成した証明書を選択して、Saveを押す
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/1a7625d9-0615-3d74-9b04-6a6028f14100.png)
3.ブラウザから対象のURLにアクセスし、証明書の発行元がAmazonになっていることを確認する。
![image](https://qiita-image-store.s3.amazonaws.com/0/99106/38f433d6-c33c-0dea-5946-c601afc9e9d1.png)

以上で完了です。
期限切れを気にしなくて良くなるのは、楽でいいですね。
OracleのSequenceの現在値をどうにかしたい

例えば、今の値が

```
SQL> select sq_hoge.nextval from dual;

   NEXTVAL
　----------
     12345
```

なんかだったりした場合、これを100001に変えたい時。
Oracleにはそんな気の利いた機能は存在しないので、泥臭く下記のようにやるのが一番手っ取り早い。

希望の値と現在の値の差を、そのまま増分値にして、
```
SQL> alter sequence sq_hoge increment by 87655;
```

ここで、nextvalを取得。

```
SQL> select sq_hoge.nextval from dual;

   NEXTVAL
　----------
    100001
```

問題無ければ、大急ぎで増分値を元に戻す。

```
SQL> alter sequence sq_hoge increment by 1;
```
大急ぎでと言っても、実際には3行まとめてペーストしちゃうので、瞬時に処理は終わるけど。
Bluemix：IBM Graphを試してみた（グラフDBを始めよう！という気持ちになった）

少し前まではすこぶる使いづらかった。。
というか、ただAPIが提供されて、「自分でJavaとか組んで叩いてね」「グラフの絵を書くのも自分で頑張れ」くらいだったのが、
GAしたおかげか、**やさしいUIで、グラフDBをこれから始めてみよう！という気になれる**（ように見える）。

## カタログからIBM Graphのサービスを作成
・いつもどおり、bluemixの画面から。
![スクリーンショット 2016-08-30 18.56.09.png](https://qiita-image-store.s3.amazonaws.com/0/119378/29d70ee3-3f81-3397-e702-9a1d6f01e27e.png)


・できると以下のような画面が出てくるので、「Open」で進む
![スクリーンショット 2016-08-30 12.32.45.png](https://qiita-image-store.s3.amazonaws.com/0/119378/973d3005-b3f8-0c3e-eb89-1bc7e4a71344.png)


・これがホーム画面らしい。
![スクリーンショット 2016-08-30 18.57.18.png](https://qiita-image-store.s3.amazonaws.com/0/119378/5a279c40-a21c-4f3a-ecce-2fc12159b5a9.png)


## サンプル・データで遊んでみる

本当はget startedから順当に説明を見ていくのが良いと思いますが、とにかくいじってみたいので、いきなり遊んでみます。


### データロード

画面右上の「Load」をクリックすると、ローカルのデータをuploadとか色々出てきます。
ここでは、SampleDatasetにある「Load Dataset」をクリック

MusicFestival.jsonというファイルのロードが開始されます。

Loaded、になったら「Example Queries」に進みます。

![スクリーンショット 2016-08-30 19.02.04.png](https://qiita-image-store.s3.amazonaws.com/0/119378/f43c45cb-fef3-fc3a-7723-f798814f3dcb.png)



### グラフDBを可視化して見てみる
普通のDBでいうところのselect文みたいなのがすでに準備されているので、それを実行してみます。
普通のDBでは、selectすると表の結果が返ってきますが、グラフDBは、グラフ（エクセル的なグラフ、ではなくて、ネットワーク図、みたいなもの）が表示されます。


![スクリーンショット 2016-08-30 19.07.15.png](https://qiita-image-store.s3.amazonaws.com/0/119378/44ef1ad4-9452-da5a-7a31-63173fc178d5.png)

サンプルの中からVisualizeなんとかを選択してみると、
select文に相当するものが画面上部に表示されるので、右端の実行ボタンをクリックすると・・・



![スクリーンショット 2016-08-30 19.12.44.png](https://qiita-image-store.s3.amazonaws.com/0/119378/edb99184-27af-929f-7e98-005ae2037b08.png)

**おー。美しい・・・・**
左側が、元になっているjsonのデータ、右が可視化結果。
IBM Graphの良いところは、クエリを動的に変えて、その都度、結果をすぐ確認できる柔軟性・・・らしいです（どっかに書いてありました）。

というわけで、赤枠のアイコン、これが既存のクエリを複製するアイコンらしいので、クリックして、また画面上部にクエリを表示させます。
femaleの部分をmanに変えて、再度、クエリ実行ボタンを押してみます。



maleでの結果が出ました。
先ほどは右下のvertices（グレーの線の本数）が39だったのに対して、40に変わってます。
ちゃんとクエリの結果が反映されているようです。
![スクリーンショット 2016-08-30 19.14.09.png](https://qiita-image-store.s3.amazonaws.com/0/119378/d1cadb47-80ad-9027-76fc-682d320ecb25.png)


もうちょっとグラフDB勉強して、遊んでみよ。



## 参考資料
・概要説明動画：酔います・・・（笑）
https://www.youtube.com/watch?v=qMitNJ5zzow
iTerm2で右クリックでペーストできるようにする


iTerm2 3.0.7

WindowsのTeraTermのように、カーソルの選択部分が自動でクリップボードにコピーされ、右クリックでペーストできるやつ。
普通のターミナルからiTerm2に変えた理由の１つがこの機能を簡単に設定できるからだった。

[iTerm]->[Preferences]->[Pointer]
Right button single click : Paste from Clipboard
Middle button single click : Open Context Menu

![Preferences.png](https://qiita-image-store.s3.amazonaws.com/0/49022/99b11fe6-9b4d-766f-09c9-567a98707bb9.png "Preferences.png")

参考
[Mac iTerm iTerm2 右クリックでペーストできるようにする](http://d.hatena.ne.jp/knaka20blue/20160404/1459752656)
電子工作 > 水深1mOKのD-sub コネクタ

Digi-Keyのメールで気になったもの。

[密閉型AMPLIMITE D-subコネクタ](http://www.digikey.jp/ja/product-highlight/t/te-connectivity-aerospace-defense-and-marine/sealed-amplimite-d-subminiature-connectors?WT.v_sub=8447059&WT.mc_id=em_NPA1608B.JP.Send&WT.z_email=8184_NPA1608BIDJP_mainproducttitle--17-TE_Connectivity&mkt_tok=eyJpIjoiT0dZeVlXRXhNekkzTm1JMCIsInQiOiIrTTZjQTJ1RUlpblJGNVYxdzRNZVFGNUcxa2V1VnFlQlFrcFdEUElKNUxhZEthZmhFQVwvUlpsNlZBckpaWjNOdXI1d3B6T1hXTjZHSlwvWTd3MDB1eHZqZ3dab3Q4RkQ2NnZQTWpRdFRjYVJzPSJ9)

> これらのコネクタは、TEによる深さ1mまでの水浸テストで成功し、IP67性能レベルを超過しています。

自分が関わるケーブルは
> Up to 10,000 PSI

上記のコネクタのどの部分を水没してもいいのか不明。
ケーブルだけなのか、コネクタも含めてなのか？
コネクタも含める場合、そのコネクタがささる方も水没することになる。密閉性は担保できないのでは。
C > Excel Trend()のC実装 / ExcelのTrend()の引数の順番に注意

```txt:動作環境
stdint.hが使えない組込みC
```

http://qiita.com/7of9/items/c1e67a19efcfa7eed500
でC#実装したExcelのTrend()関数をCで実装した。

http://ideone.com/swhbCJ

```c
#include <stdio.h>
#include <stdbool.h>
#include <math.h>

typedef struct point {
	float x, y;	
} point_t;

float calcAverageValues(point_t *points, int size, bool isX)
{
	double sum = 0.0;
	for(int idx=0; idx<size; idx++) {
		if (isX) {
			sum += points[idx].x;
		} else {
			sum += points[idx].y;
		}
	}
	return sum / (float)size;
}

float calcSumDiffXDiffY(point_t *points, int size, float xBar, float yBar)
{
	double sum = 0.0;
	
	for(int idx=0; idx<size; idx++) {
		sum += (points[idx].x - xBar) * (points[idx].y - yBar);
	}
	return sum;
}
float calcSumDiffXSquared(point_t *points, int size, float xBar)
{
	double sum = 0.0;
	double xdiff;
	
	for(int idx=0; idx<size; idx++) {
		xdiff = (points[idx].x - xBar);
		sum += xdiff * xdiff;
	}
	return sum;
}

float SlopeOfPoints(point_t *points, int size)
{
	float xBar = calcAverageValues(points, size, /*isX=*/true);
	float yBar = calcAverageValues(points, size, /*isX=*/false);

	float dividend = calcSumDiffXDiffY(points, size, xBar, yBar);
	float divisor = calcSumDiffXSquared(points, size, xBar);
	
	return dividend / divisor;
}

float YInterceptOfPoints(point_t *points, int size, float slope)
{
	float xBar = calcAverageValues(points, size, /*isX=*/true);
	float yBar = calcAverageValues(points, size, /*isX=*/false);

	return yBar - (slope * xBar);	
}

float LeastSquaresValueAtX(point_t *points, int size, float x) {
	float slope = SlopeOfPoints(points, size);
	float yIntercept = YInterceptOfPoints(points, size, slope);

	return (slope * x) + yIntercept;
}

int main(void) {
	point_t P[] = {
		{ 600, 6 }, // X,Y
		{ 800, 7 },
		{ 1000, 10 },
		{ 1200, 12 },
		{ 1400, 14 },
	};
	int size = sizeof(P) / sizeof(P[0]);
	
	float res = LeastSquaresValueAtX(P, size, 650.0);
	printf("%.3f\n", res);
	return 0;
}
```

```txt:結果
Success	time: 0 memory: 2168 signal:0
6.125
```

同じ結果が出た。

各所のnamingが良くないが、とりあえずこれで。

エラー処理も入れた方がいいが、とりあえず。

## ExcelのTrend()の引数の順番に注意

(追記 2016/09/06)

Excelの結果とC実装を比べていて、引数の順番に関してはまった。

[Officeのサイト](https://support.office.com/ja-JP/article/TREND-%E9%96%A2%E6%95%B0-E2F135F0-8827-4096-9873-9A7CF7B51EF1)において
> 書式
> TREND(既知の y, [既知の x], [新しい x], [定数])
とある。

1つ目の引数(既知のy)と2つ目の引数(既知のx)を勘違いして反対に指定して、実際のデータを用いてEXCEL結果とC実装結果を比較する時にはまった。
869回toto_goalsの予想

##理論確率

```
> Result
  ホーム アウェー      W      D      L
1   大宮     横浜 0.3141 0.2800 0.4059
2   神戸     浦和 0.3005 0.2412 0.4583
3   広島    G大阪 0.4306 0.2594 0.3100
```

```
         0      1      2      3
大宮  0.3390 0.3689 0.1985 0.0936
横浜  0.2808 0.3592 0.2272 0.1329
神戸  0.2683 0.3556 0.2330 0.1431
浦和  0.1870 0.3164 0.2648 0.2318
広島  0.2314 0.3415 0.2491 0.1780
G大阪 0.3007 0.3638 0.2176 0.1179
```

##選択
|チーム|0|1|2|3|薦め|
|:-:|:-:|:-:|:-:|:-:|:-:|
|大宮|▲|◎|||1:1,0:0|
|横浜|▲|◎|||1:1,0:0|
|神戸||▲|◎||2:1,2:2|
|浦和||◎|▲||2:1,2:2|
|広島|||▲|◎|3:1,2:1,2:0|
|G大阪|▲|◎|||3:1,2:1,2:0|

##購入
![toto_goals3.png](https://qiita-image-store.s3.amazonaws.com/0/114190/68d780dd-e569-810b-16aa-96270ec992ee.png)
macでスリープから復帰する時にBluetooth接続しようとしてフリーズする

３年程使用しているmacでスリープから復帰する時にBluetoothの接続設定が勝手に起動し、
そのままフリーズする残念な事象が度々、起こる。
毎回、発生する訳ではないので放置していたのだがフリーズしてしまうとキーボードもトラックパッドも入力を受け付けず、
電源を落とすしかなくなり、げんなりするので真剣に向き合ってみた。

# 環境
Mac OS X El Capitan 10.11.4

# 原因？
心当たりとしては以前に使おうとして使わなくなったBluetoothマウスの設定だけが残ってしまっていた。
使わなくなった直後はこの事象が出た覚えがない。
その後の大きな環境の変化としてはmac OS Xへのアップグレード？

# 対策
システム環境設定のBluetoothから使わなくなったマウスの設定を削除して様子を見る。
これでダメであればBluetooth自体をオフにしてみる。
（基本的にBluetoothは使っていないので）