OmniAICreator/Qiita-1.07M huggingface dataset:
[小ネタ] fishの重複パスを削除する

最近自宅のUbuntuのログインシェルを試験的にfishにしています。
「fish_user_paths は環境変数 PATH に優先的に加えられるディレクトリの配列変数」[^1]ですが、fishの設定ファイルであるconfig.fishが読み込まれるたびに`fish_user_paths`に同じパスが何度も書かれてしまうので対策しました。

## 同じパスが増える理由

```fish
set -U fish_user_paths /home/user_name/.pyenv $fish_user_paths
set -U fish_user_paths /home/user_name/.go $fish_user_paths
```
既存の`$fish_user_paths`に追加していくように書いているので何度も呼び出すと同じパスが追加されていってしまいます。

## 対策

```fish
set -U fish_user_paths (echo $fish_user_paths | tr ' ' '\n' | sort -u)
```

このコードをconfig.fishの最後の方に書いています。やっていることはただ`sort`と`uniq`のようなことをやっているだけです。

## 余談

ちなみにbashなどの場合のワンライナーを書いている方がいました。[^2]

```bash
export PATH=`echo $PATH | tr ':' '\n' | sort -u | paste -d: -s -`;
```

fishで同じ考え方でやろうと思ったのですがうまくいきませんでした。

```fish
set -U fish_user_paths (echo $fish_user_paths | tr ' ' '\n' | sort -u | paste -d' ' -s)
```

確かに`$fish_user_paths`を`echo`してみると`/home/user_name/.go/bin /home/user_name/.pyenv/bin`となっているのですが、これは`/home/user_name/.go/bin`と`/home/user_name/.pyenv/bin`という２つのパスがあるのではなく`"/home/user_name/.go/bin /home/user_name/.pyenv/bin"`というパスが指定されてしまっているようでした。

つまりスペース区切りの文字列ではなくリストで定義しろということですね。

[^1]: http://fish.rubikitch.com/document-ja/ (2017年8月6日 閲覧)
[^2]: http://d.hatena.ne.jp/lurker/20060428/1146227406 (2017年8月6日 閲覧)
Google Cloud Platform のファイアウォールの設定方法

VPC ネットワーク　-> ファイアウォール ルール

![gcloud_firewall_aug0601.png](https://qiita-image-store.s3.amazonaws.com/0/179446/bd032eee-aaff-4b8a-3875-ddc90319d267.png)

ファイアウォール ルール を作成

![gcloud_firewall_aug0602.png](https://qiita-image-store.s3.amazonaws.com/0/179446/b46ca446-6515-97e6-6832-fa9fe8f3263f.png)


例えば、5901-5905 ポートを、総てのサイトに対して開けるとすると、
ソースフィルタ
　IP 範囲　0.0.0.0/0
プロトコルとポート
　tcp:5901-5905 
と設定します。

![gcloud_firewall_aug0603.png](https://qiita-image-store.s3.amazonaws.com/0/179446/7d0af118-3256-07bb-426d-b0aa0ebbdcaf.png)
FastCGI Libraryのインストール

#はじめに
FastCGI Libraryを手動でインストールしようとしたら、本家サイト( http://www.fastcgi.com )が停止していた（2017年8月確認）。
gitに[アーカイブ](https://github.com/FastCGI-Archives/FastCGI.com)が用意されていたので、そちらを利用したインストール手順を備忘録として掲載しておく。

#インストール手順
```bash:install.sh
#アーカイブからダウンロード&解凍
curl -O -k -L https://github.com/FastCGI-Archives/FastCGI.com/raw/master/original_snapshot/fcgi-2.4.1-SNAP-0910052249.tar.gz
tar xf fcgi-2.4.1-SNAP-0910052249.tar.gz
#
#インストール
cd fcgi-2.4.1-SNAP-0910052249
./configure --prefix=/usr/local
#
#fcgio.cppのインクルードがないとmakeに失敗するため追加
mv libfcgi/fcgio.cpp /tmp/original
echo "#include <stdio.h>" > libfcgi/fcgio.cpp
cat /tmp/original >> libfcgi/fcgio.cpp
rm /tmp/original
#
make
sudo make install
```
Charlesで帯域を調節するときのそれぞれのパラメータが何を指しているかのメモ

CharlesでThrottleを設定するとき、どういう事ができるのかのメモ。

<img width="535" alt="Banners_and_Alerts_and_Throttle_Settings.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/b91db2ad-a540-0023-fdbd-6b0a781307f6.png">

* Bandwidth(帯域)  
単位時間あたりに転送可能なデータの最大量
* Utilisation(使用率)  
使用可能な帯域の使用率
* Latency(レイテンシ)  
クライアントとサーバー間のリクエストの遅延時間
* MTU  
1回のパケットで送信できるデータの最大値
* Reliability(信頼性)  
コネクションが完全に失敗する比率。信頼性の低いネットワークをシミュレートするときに使う。パケットのロストが発生してもアプリケーションが正しく動作するか確認するのに使える。
* Stability(安定性)  
ネットワーク品質を低下させる比率。定期的に品質が悪くなるようなネットワークをシミュレートするのに使う。ジッタを再現させてパケットの順番が入れ替わったりしてもアプリケーションが正しく動作するか確認するのに使える。
* Unstable quality range  
Stabilityの確率でネットワーク品質を低下させる際、どのくらいまでネットワーク品質を落とすかの範囲ということか。(未確認)
  
参考: https://www.utest.com/articles/network-throttling-using-charles-proxy
Reduxのstoreの中を確認する

#はじめに
この投稿はReact・Reduxを趣味で勉強している私が、reduxのstoreの中身を確認する方法を、勉強しながら書いた内容です。
私は業務でreactをやった経験とかもない素人ですので、あまり参考にしないでください。
ですが、内容が間違っていたとしてもQiita様だとコメントで指摘が入って、そうなればみんなに正しい知識として広まると思い、勉強中ですが投稿させていただきました。よろしくお願いいたします。:tired_face:

##storeの中身を見る対象
http://redux.js.org/docs/basics/ExampleTodoList.html
reduxの公式サイトに乗っている「Todo List」がシンプルでいいのと思ったので、これのstoreを見ていきます。

git cloneで簡単に環境が作れる！
http://redux.js.org/docs/introduction/Examples.html

```
git clone https://github.com/reactjs/redux.git

cd redux/examples/todos
npm install
npm start

open http://localhost:3000/
```

動作はこんな感じです。

![6lyqI6EcGy.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/e9520fc8-466a-5100-c087-6deba9c4a7b4.gif)

#store.getState()を使う
Todo Listのsrc/index.jsに以下のように3行追加するだけで```dispatch```の度に値を見ることができる。

```diff
    import React from 'react'
    import { render } from 'react-dom'
    import { createStore } from 'redux'
    import { Provider } from 'react-redux'
    import App from './components/App'
    import reducer from './reducers'

    const store = createStore(reducer)

+   store.subscribe(() =>
+       console.log(store.getState())
+   )

    render(
       <Provider store={store}>
           <App />
       </Provider>,
    document.getElementById('root')
    )
```

![JilVSYH8cf.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/df361cce-aa81-a998-17e6-741259821f5b.gif)

公式のAPI Referenceを見ると、
###getState()
http://redux.js.org/docs/api/Store.html#getState
↓
アプリケーションの現在の状態ツリーを返します。
これは、店舗のレデューサーによって返された最後の値と同じです。

現在のstateを取得できるメソッドみたいですね。

###subscribe(listener)
http://redux.js.org/docs/api/Store.html#subscribe
↓
アクションがディスパッチされるといつでも呼び出され、状態ツリーの一部が変更されている可能性があります。
getState()をコールして、コールバック内の現在の状態ツリーを読み取ることができます。

この方法が3行書くだけですので、一番楽な方法だと思います。

#Redux DevTools
https://github.com/gaearon/redux-devtools
すごい便利そうな機能が沢山ある！

Chromeの拡張の方ががすごく楽に使えそうなので、そっちでやってみました。

#Redux DevTools Extension
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Chromeの拡張としてRedux DevToolsを使えるみたいです。
以下のように開発者ツールにReduxのタブができます。

![スクリーンショット 2017-08-06 18.58.20.png](https://qiita-image-store.s3.amazonaws.com/0/142910/c59aa9e4-53e8-ddff-312d-e2205c1bf887.png)

ただそのままではまだ使えないので、
the instructions.と書いてあるリンクをクリックし、
https://github.com/zalmoxisus/redux-devtools-extension#usage
ここに書いてある通り、コードに1行追加する。

![スクリーンショット 2017-08-06 19.00.44.png](https://qiita-image-store.s3.amazonaws.com/0/142910/96d41e1c-3338-d312-8183-0b3e2e6dcc3c.png)


```diff
  import React from 'react'
  import { render } from 'react-dom'
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import App from './components/App'
  import reducer from './reducers'

- const store = createStore(reducer)
+ const store = createStore(
+   reducer, /* preloadedState, */
+   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+ );

  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  )
```

これでかっこいいデザインでstoreやactionを確認できます。

![DYcMf40bXc.gif](https://qiita-image-store.s3.amazonaws.com/0/142910/e5ad4c62-a6e2-d761-1ade-8e646d0550db.gif)

最後まで読んでいただき、ありがとうございました。m(_ _)m
頑張ってRedux勉強していきます。
HerokuにRailsアプリをデプロイする手順

# もくじ

- 準備：Herokuログイン
- 準備：Gemfile修正
- 準備：git commit
- Herokuアプリ作成
- リモートリポジトリの登録
- デプロイ
- アクセス確認

# 準備：Herokuログイン
CLIでHerokuにログインしておく

```shell-session
$ heroku login
```

# 準備：Gemfile修正
- production(Heroku)で`sqlite3`を利用しないように修正しておく
- production(Heroku)で`pg`を利用するように修正しておく

```ruby:Gemfile
# Use sqlite3 as the database for Active Record
gem 'sqlite3', group: [:development, :test]
gem 'pg', group: :production
```

# 準備：git commit
ソースをコミットしておく

```shell-session
# アプリのディレクトリに移動する
$ cd rails-app

# 初期化
$ git init

# ディレクトリ配下のファイルをコミット対象にする
$ git add *

# コミット
$ git commit -m "Release to heroku"
```

# Herokuアプリ作成

Herokuアプリを作成して、URLとGitリポジトリを取得する

- `<アプリ名>`は省略可能。省略するとアプリ名が自動で払い出される
- 払い出されたURLがHerokuアプリのURL、Gitリポジトリとなる

```shell-session
# アプリのディレクトリに移動する
$ cd rails-app

# Herokuアプリを作成する
$ heroku create <アプリ名>

Creating app... done, ⬢ xxxxx-xxxxx-xxxxx
https://xxxxx-xxxxx-xxxxx.herokuapp.com/ | https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
```

# リモートリポジトリの確認・登録

リモートリポジトリ**heroku**が作成されてることを確認する

```
# リモートリポジトリを確認
$ git remote
heroku
```

リモートリポジトリ**heroku**が存在しない場合は、`heroku create <アプリ名>`コマンド実行時に払い出されたgitリポジトリをリモートリポジトリ`heroku`として登録する

```shell-session
# リモートリポジトリを追加
$ git remote add heroku https://git.heroku.com/xxxxx-xxxxx-xxxxx.git
```

> 補足：ローカルリポジトリ作成(`git init`)後に`heroku create`コマンドを実行した場合はリモートリポジトリ**heroku**が自動で追加されますが、 `heroku create`コマンド実行後にローカルリポジトリを作成(`git init`)した場合は、手動でリモートリポジトリ**heroku**を追加する必要があります。

# デプロイ

ローカルの`master`ブランチをリモートリポジトリ`heroku`へpushする

```shell-session
$ git push heroku master

...
To https://git.heroku.com/mighty-beyond-37933.git
 * [new branch]      master -> master
```

# アクセス確認
`heroku open`コマンドを実行すると自動でブラウザが開き、HerokuアプリのURLにアクセスする

```shell-session
$ heroku open
```

または、HerokuアプリのURLにブラウザでアクセスする
https://xxxxx-xxxxx-xxxxx.herokuapp.com/

# 補足：Heroku Postgres
Heroku上のRailsアプリでDB(Heroku Postgres)を利用したい場合はこちらの記事をご参考ください。
参考：[Heroku PostgresをRailsアプリで利用する手順 \- Qiita](https://qiita.com/NaokiIshimura/items/550ca82e8e57aaea5582)

# 補足：Heroku Redis
Heroku上のRailsアプリでsessionをRedisに保存したい場合はこちらの記事をご参考ください
参考：[Rails の session store に Heroku Redis を利用する \- Qiita](https://qiita.com/NaokiIshimura/items/024c3d35ddc3188a0524)

# 補足：herokuコマンド

環境変数

```shell-session
# 環境変数一覧
$ heroku config

# 環境変数名を指定して参照
$ heroku config:get ENV_NAME

# 環境変数を追加
$ heroku config:set ENV_NAME="value"

# 環境変数を削除
$ heroku config:unset ENV_VAR_NAME
```
PythonでISO8601形式の時刻を好きな書式に整形する

```py3
import dateutil.parser

s = '2017-02-16 01:27:00+00:00'
t = dateutil.parser.parse(s)

# 整形
u = t.strftime('%Y/%m/%d')
print(u) #=> 2017/02/16
```
統計学中のt-testとp-valueの計算例




統計学なかのt-testとp-valueの理解にかなり時間を使ってました．
t値とｐ値の計算の例をたまたま見つけたので，その流れをまとめます． 


六年前にIT仕事の給料は`$69873`，今はIT仕事の給料は `$69873`ではないと仮設します．**この仮設を証明したいです**． ここでt-testとp-value($ｐ$値)を利用して，証明することにします． 

結論からいうと 求められたｐ値は `0.05`より小さければ，仮設を証明できたことにします． p値は小さければ**今のIT仕事の給料は`$68873`ではない**という仮設の強い裏付けになります．

１２人のITの仕事をやっている人のサンプルがすでにある状態で， 

1. このサンプル $n$ は１２個
2. この１２人の平均給料 $\bar{x}$ は`$79180`
3. この12人給料サンプルの標準偏差 $s$ は `$14985`
4. 六年前のITの給料 $\mu_0$ は `$69873`

上の4つのデータで$ｔ$値と$p$値を求めることができます．

```math
t=\frac{\bar{x} - \mu_0}{\frac{s}{\sqrt{n}}}
```

```math
t=\frac{79180 - 69873}{\frac{14985}{\sqrt{12}}} = 2.15
```

$t$値は2.15であることが分かれば，ｐ値の範囲もわかります．

![451675.image0.jpg](https://qiita-image-store.s3.amazonaws.com/0/54698/4c3cb1ac-f901-ebad-cd51-197fc76bf6bd.jpeg)


サンプルの数は１２なので， degree of freedom（自由度）は `n-1`(11)です．

上の表を参照すると ｔ値の`2.15`は `1.795885`と`2.20099`の間にあるため，つまりp値は `0.05`と`0.025`の間にあることがわかりました．

なので，求めたれたｐ値は `0.05`より小さいので証明できました．

https://www.youtube.com/watch?v=dDsKP7wVpzM
Dockerコンテナ内からホスト側のRailsにアクセスする方法

次のようにしてホスト側の IP を取得します。

```sh
$ ifconfig en0 | ruby -e 'p ARGF.read[/(?<=inet )\S+/]'
"10.0.1.2"
```

それをコンテナ内で使います。

```sh
$ docker exec -it container1 bash
$ curl http://10.0.1.2:3000/
```

Dockerコンテナ内のRailsにアクセスする方法は、多くの情報があって助かりましたが、この逆が難しかった。てっきり `docker-compose.yml` で `ports` や `networks` の指定をするのかと勘違いして遠回りをしてしまいました。

なお Wi-fi を切にすると en0 の IP がなくなってしまってその場合どうしたらいいのかという疑問はあります。わかったら追記します。
GrovePiの実装を実機テストなしでできてしまうGrovePiエミュレータの使い方

## 言いたいこと
Groveってはんだ付けなしでセンサがつくれて便利...！
GrovePiってGroveセンサをRasPiに繋げられて更に便利..！
でも、GrovePiをつかったプログラムを組むとき、わざわざ実機テストするのはめんどくさい...！
と思っていたら、こんな便利なGrovePiエミュレータがありました。
(GrovePi自体はNodeやJavaでも動きますが、本エミュレータはPythonでしか動かないようです...！)

https://github.com/joemarshall/grovepi-emulator/

## 使い方
基本 Mac&Python2.7環境下での使用を前提しています

### GrovePiエミュレータをgitからもってくる
```
$ git clone https://github.com/joemarshall/grovepi-emulator.git
```

### GrovePiエミュレータを立ち上げる
```
$ cd grovepi-emulator
$ python grovepiemu.py
```
そうするっとアッラー素敵なGUIが立ち上がります  
<img width="685" alt="スクリーンショット 2017-08-06 19.49.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/125528/cb621770-bc68-dce9-4241-5ac138f9868d.png">


### GrovePi用のPythonスクリプトの実行
Pythonスクリプトを以下の「Load...」部から指定すると
GUIで指定したセンサの値が入力されている前提で、エミュレータが動いてくれます。
<img width="215" alt="スクリーンショット 2017-08-06 19.50.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/125528/12ae16fa-247c-4fd8-3c36-70c53b1196a6.png">


動かすスクリプトは以下の通り、GrovePiのライブラリをimportした
前提で実装すれば、エミュレータがよしなにやってくれるみたいです

``` python
import grovepi
import time

if __name__ == '__main__':
    while True:
        input = grovepi.analogRead(0)
        print(input)
        time.sleep(1)
```
[クイズ]javascriptと仲良くなるための一歩　第１９話「プロパティ属性」

#問題

```js
var a = {x:2, y:3}
var b = {x:2, y:3}
var c = {x:1, y:2}
JSON.stringify(a)                      //=> "{"x":2,"y":3}"
JSON.stringify(a) == JSON.stringify(b) //=> true
JSON.stringify(a) == JSON.stringify(c) //=> false

var obj = Object.create(
            Object.prototype,
            {
               x: {value:2, writable:true, enumerable:true, configurable:true},
               y: {value:3, writable:true, enumerable:true, configurable:true}
            }
          );
JSON.stringify(a) == JSON.stringify(obj) //=> ?
```

:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:


#答え

```js
JSON.stringify(a) == JSON.stringify(obj) //=> true
```

プロパティ属性を明示的に示しているだけなのでtrueになります。
また、
obj.xをwritable:falseにして`JSON.stringify(a) == JSON.stringify(obj)`しても、`JSON.stringify()`では出力に違いが出ないので、trueになります。

プロパティ属性のチェックは`Object.getOwnPropertyDescriptor(obj, prop)`で、できます。

```js
obj = { x:2, y:3 }
Object.getOwnPropertyDescriptor(obj, 'x') //=> Object {value: 2, writable: true, enumerable: true, configurable: true}
```
SpotFleet(diversified/lowest)で起動するインスタンスを常にELBにアタッチする

# 目的
* SpotFleetで起動しているインスタンスを常に同一のELBにアタッチする
* 生存戦略は*diversified/lowest*で機能する

# 前提
本構成ではインスタンス1台の運用を想定しているのでインスタンスが停止後、他プールからインスタンスが起動するまで〜2分かかるので、可用性を保つためにはオンデマンドを入れるなり、工夫が必要

# 方法
スポットインスタンスリクエスト時にユーザーデータを利用する

#　イメージ
![Untitled (5).png](https://qiita-image-store.s3.amazonaws.com/0/58788/e1dd448e-e4f6-0481-a470-72cfc444dc4e.png)


# 設定
1. ELBに対する権限を持つIAMRoleを作成
2. IAMRoleを使用するスクリプト作成
3. EC2Resourcesの*aws_spot_fleet_request*の引数に*user_data*を記述

```spot_fleet_request.tf
# Request a Spot fleet
resource "aws_spot_fleet_request" "aws-simple-console-spotfleet" {
  iam_fleet_role                      = "arn:aws:iam::xxxxxx:role/xxxxxx"
  spot_price                          = "0.0127"
  allocation_strategy                 = "diversified"
  target_capacity                     = 2
  terminate_instances_with_expiration = false

  launch_specification {
    instance_type               = "m3.medium"
    ami                         = "ami-xxxxxx"
    availability_zone           = "ap-northeast-1c"
    subnet_id                   = "subnet-xxxxxx"
    iam_instance_profile        = "xxxxxx"
    key_name                    = "xxxxxx"
    vpc_security_group_ids      = ["sg-xxxxxx"]
    monitoring                  = false
    associate_public_ip_address = true
    user_data                   = "${file("userdata.sh")}"

    root_block_device {
      volume_size = "10"
      volume_type = "gp2"
    }
  }
}
```

```userdata.sh
#!/bin/bash
export INSTANCEID=`curl http://169.254.169.254/latest/meta-data/instance-id`
aws elb register-instances-with-load-balancer --load-balancer-name xxxxxx --instances $INSTANCEID --region ap-northeast-1
```
S3にアップロードしようと思ったら、時計がズレていたので失敗した。

S3にアップロードしようと思ったら、時計がズレていたので失敗した。

# 環境

- Vagrant
- VirtualBox
- CentOS release 6.4 (Final)


# S3にアップロードしようと思ったら失敗した。

S3にアップロードしようと思ったら、以下のメッセージが返ってきました。

```
The difference between the request time and the current time is too large.
```

日本語訳:リクエストサーバーとS3の時間のズレが大きすぎる

同様の問題の解決記事

[[Rails] 時計のズレが原因でS3への画像アップロードが失敗した
](https://kadoppe.com/archives/2013/10/rails-carrierwave-s3-upload-failure.html)

# 原因は、S3のサーバー時刻とWebサーバー時刻にズレがあったため

まず`ntpdate`で自分のサーバーの時刻と日本標準時間を同期します。
Webサーバーは、vagrantを使用しています。

```bash
$ sudo ntpdate ntp.nict.jp
 6 Aug 14:02:10 ntpdate[7681]: adjust time server 133.243.238.244 offset 0.003161 sec
 ```

 ## ntpdateとは

>ntpdateコマンドでは、日付と時刻をNTPサーバーと同期するコマンドです。

[ntpdate - 日付と時刻をNTPサーバーと同期 - Linuxコマンド](https://webkaru.net/linux/ntpdate-command/)

以下`ntpd`関連資料

[NTPサーバー構築(ntpd)](https://centossrv.com/ntp.shtml)

[14.4. ntpd の起動と動作確認](http://www.turbolinux.co.jp/products/server/11s/user_guide/x6278.html)

ntpdデーモンの設定を変更したので、ntpdを再起動しましょう。

```bash
$ sudo /etc/rc.d/init.d/ntpd restart
ntpd を停止中:                                             [  OK  ]
ntpd を起動中:                                             [  OK  ]
```

これでOK!!
Angular4の自作サービス

Angular4でサービスを作る方法です。
以下のコードを参考に任意の場所にサービスを作ります。
特徴的な部分はInjectableって書いてあるところですね。
他はページとかのクラスと同じ感じですね。

```ts:hero-array-service.ts
 import { Injectable } from '@angular/core';
 
 @Injectable()
 export class HeroesArrayService {
   getHeroesArray(searchResult): Array<Object> {
     let heroesArray = []
     // 何かコード書く
     return heroesArray;
   }
   ...
 }
```

利用するときは以下のような感じで使います。


```ts:search.ts
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import overwatchJs from 'overwatch-js';
 import { SEARCH_RESULT_INITIAL_DATA } from '../../assets/data/search-result-initial-data';
 // サービスをインポート
 import { HeroesArrayService } from '../../utilities/heroes-array-service';

 @Component({
   selector: 'page-search',
   templateUrl: 'search.html',
   providers: [HeroesArrayService]
 })
 export class SearchPage {
   searchResult;
   heroesArray;

   constructor(public navCtrl: NavController, private heroesArrayService: HeroesArrayService) {
     this.searchResult = {'hoge': 'fuga'};
   }
   // テストメソッド
   serviceTest() {
     // サービスを利用して、検索結果からヒーローの配列を成形する
     this.heroesArray = this.heroesArrayService.getHeroesArray(this.searchResult);
   }
 }
```

ページ単位でインポートします。app.module.tsにインポートする必要はないです。
あとはコンストラクタにも書いてますね。
他と大きく違うのは、コンポーネントのprovidersに記述するところでしょうか。

```ts
providers: [HeroesArrayService]
```

サービスは、クラスのメソッドとして普通に使います。

```ts
this.heroesArray = this.heroesArrayService.getHeroesArray(this.searchResult);
```

こんなかんじ。

参考
https://angular.io/tutorial/toh-pt4
謎のCSS simple-paymentsを無効にする方法

##謎のCSS simple-payments.css

`<head>～</head>`で Jetpack のモジュールらしき謎のCSSが読み込まれている 

```
<link rel='stylesheet' id='simple-payments-css'  href='https://www.example.co.jp/wp-content/plugins/jetpack/modules/simple-payments/simple-payments.css' type='text/css' media='all' />
```

[Jetpackのフォーラム](https://wordpress.org/support/topic/what-is-simple-payments-module-and-how-do-i-disable-it/)でも話題になっているが、設定項目もなく、詳細不明。

##とりあえず無効化
`functions.php`に追加

```php:functions.php
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
   wp_dequeue_style('simple-payments'); 
}
```

参考
[wp_print_styles() | Function | WordPress Developer Resources](https://developer.wordpress.org/reference/functions/wp_print_styles/)
[WordPressでプラグインによって読み込まれる外部スタイルシート&javascriptを削除する | webOpixel](http://www.webopixel.net/wordpress/261.html)
Marpで自分のテーマを作成するときの変更点

# 概要
marpがとても便利で、オリジナルのテーマでも作ってみようと思い立ちましたので、じゃあどこを変更すれば良いのかと言ったことをメモします。
(2017/08/06現在)


# 変更点

### テーマ用SCSSファイルの追加

marp/sass/themesフォルダの中に新しいテーマ用のscssファイルを作成する。
今回はお試しでgaiaのファイルをコピーしてoriginal.scssとしてみた。

<img width="295" alt="スクリーンショット 2017-08-06 18.56.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/183308/d3b8bdef-a807-fcfb-0d37-fa2bb0f95c31.png">


### mds_main_menu.coffeeへ記述を追加

marp/coffee/classes/mds_main_menu.coffeeの中にあるthemesの中に自分が作成するテーマ名を追加する。今回はテーマ名がoriginalなのでそれを追加した。

```mds_main_menu.coffee

          themes: [
            {
              label: '&Default'
              enabled: @window?
              type: if @window? then 'radio' else 'normal'
              checked: !@states?.theme || @states.theme == 'default'
              click: => @window.mdsWindow.send 'setTheme', 'default' unless @window.mdsWindow.freeze
            }
            {
              label: '&Gaia'
              enabled: @window?
              type: if @window? then 'radio' else 'normal'
              checked: @states.theme == 'gaia'
              click: => @window.mdsWindow.send 'setTheme', 'gaia' unless @window.mdsWindow.freeze
            }
            //　ここから
            {
              label: '&Original'
              enabled: @window?
              type: if @window? then 'radio' else 'normal'
              checked: @states.theme == 'original'
              click: => @window.mdsWindow.send 'setTheme', 'original' unless @window.mdsWindow.freeze
            }
            // ここまでを追加する
          ]
``` 

@window.mdsWindow.freezeの項目を追加する。

### mds_md_setting.coffeeへ記述を追加

marp/coffee/classes/mds_md_setting.coffee内にある@transformers(26行目のあたり)の下に記述されているbasenameに自分が追加するテーマの名前を追加する。追加は以下の通り行なった。

```変更前のmds_md_setting.coffee
    theme: (v) ->
      basename = path.basename(v)
      return if basename in ['default', 'gaia'] then 
```


```変更後のmds_md_setting.coffee
    theme: (v) ->
      basename = path.basename(v)
      return if basename in ['default', 'gaia', 'original'] then 
```


# 結果

これらを行なった後にドキュメントにある通りにmarpを起動させてみます。
(インストール方法などは[公式のGitHub](https://github.com/yhatt/marp)をご覧ください)

<img width="1277" alt="スクリーンショット 2017-08-06 18.50.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/183308/7815a247-d10a-a081-8227-ad273f51f354.png">

###marp様万歳。originalテーマができました。
(今回はgaiaをコピーしたものなのでまんまgaiaですが・・・)
他の方の利用に耐えうる個人的なテーマを作成できたならプルリクなど飛ばしてみたいと思っていますが・・・実現するかはわかりません。
こちらからは以上です。
Fiddler4でモバイル回線の帯域をシミュレートする

Fiddlerでモバイル回線の3Gとか4Gをシミュレートするにはどうしたらいいか。

## Simulate Modem Speed

`Rules`メニューの`Performance`メニューアイテムに`Simulate Modem Speed'があって、これを有効化する。

すると、FiddlerScriptの下記を設定することでシミュレートできる。

```js
if (m_SimulateModem) {
    // Delay sends by 300ms per KB uploaded.
    oSession["request-trickle-delay"] = "300"; 
    // Delay receives by 150ms per KB downloaded.
    oSession["response-trickle-delay"] = "150"; 
}
```

ただし、これは固定でDelay時間を付加するだけなので、ネットワーク品質のゆらぎを作ったりとか、パケットロスを再現させたりということはできない。

また、ここで設定できるのはDelayなので、他のProxyツール、例えばCharlesにあるような3G, 4Gといった形で設定はできない。
下記、Charlesのダイアログ。こちらはわかりやすい。

<img width="535" alt="Banners_and_Alerts_and_Throttle_Settings.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/8a1c8d43-c34b-6397-cac7-b2a0154ffa0a.png">

## Fiddler Connection Simulator

すこし探した所、`Fiddler Connection Simulator`というアドオンがあった。

http://www.logic-worx.com/software/connsim.php

インストールするには、`Downloads`のリンクをクリック。
インストーラーを実行するだけで、Fiddlerのメニューに追加される。

<img width="1227" alt="Screenshot_8_6_17__6_08_PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/334a6143-7edc-58b9-3852-a20a69fc3473.png">

メニューを選択して、`Configure`を選択するとダイアログが表示される。

<img width="288" alt="Screenshot_8_6_17__6_15_PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/8cb1e396-d20d-de12-df8f-89e9c5ae549b.png">

このダイアログでFiddlerScriptよりは高機能に設定が可能。

<img width="405" alt="Screenshot_8_6_17__6_19_PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/821b7270-adc4-28a0-56d2-0ea8c2e7f5b5.png">

UploadとDownloadで帯域を分けることはできないので変えようと思うと、結局`Simulate Modem Speed`をいじる必要ががあるか。

なお、帯域のVisualizeもできる。

![visualise.png](https://qiita-image-store.s3.amazonaws.com/0/45959/c871ec14-751b-cc36-8dfd-b0c292c072eb.png)

Charlesのようなプリセットが準備されていれば言うことはないのだけれど、すごく助かるツール。
【AWS】ELB＋Gitlabの構築・設定（Google認証付き）

# 目的
AWSでGitlabを構築するにあたり、ELBでHTTPSを受け付け、後段EC2のGitlabサーバにて処理。
それを実現するためのGitlab設定方法をまとめる。
併せて、Gitlabでoogle認証を行う場合の設定も記載。

# 全体概要はこんな感じ
- ELBには「`https://xxx`」で通常４４３ポート開放
- 「`https://xxx/gitlab/`」でアクセスした場合はGitlabサーバに「`http://xxx/gitlab`」で送る。
- 他に「`https://xxx/app1/`」とした場合は別のサーバへ振り分けるイメージ

![スクリーンショット 2017-08-06 16.51.02.png](https://qiita-image-store.s3.amazonaws.com/0/110262/af1936bf-a9b2-36de-f91d-52accb49d201.png)

## やらないこと
- ELB、EC２などのAWSの設定
- 公式に載っているGitlabのインストール手順
- google認証を行うためのgoogle側の設定


# 前提
Gitlabのバージョン：GitLab Community Edition 9.3.6
標準のgitlabのインストールを実行済み
[公式インストール手順(CentOS6)](https://about.gitlab.com/installation/#centos-6)
※AWSLinuxでも同様

gitlabへSSH通信は行わない。PushなどはHTTPSでの認証とする。

# 1. ELBとGitlabの連携

1-1. gitlab.rbの編集

```
==[ELBの連携まで]==
#cd /etc/gitlab/gitlab.rb
#diff gitlab.rb gitlab.rb.org

13,14c13
< external_url 'https://xxx/gitlab'
---
> external_url 'http://xxx'
807c806
< nginx['listen_port'] = 80
---
> # nginx['listen_port'] = nil
811c810
< nginx['listen_https'] = false #https通信の無効化
---
> # nginx['listen_https'] = nil
817c816
<  nginx['proxy_set_headers'] = {
---
> # nginx['proxy_set_headers'] = {
821c820
<   "X-Forwarded-Proto" => "https",
---
> #  "X-Forwarded-Proto" => "https",
825c824
<  }
---
> # }
```

1-2. 再起動

```
gitlab-ctl reconfigure
gitlab-ctl start
```

1-3. ELB連携のポイント

gitlab.rbのみ編集し、reconfigureで反映するため一番きれいな方法だと思います。
直接nginx.conf等修正するとreconfigure時に上書きされるので。

ブラウザからの画面表示（リンクやPOSTのパス）はHTTPSにする必要がありつつ、
gitlabサーバ自体をHTTPで処理させるのが面倒でした。

# 2. GitlabでGoogle認証を設定する場合

2-1. gitlab.rbの編集

```
==[GoogleAuthまで]==
#cd /etc/gitlab/gitlab.rb
#diff gitlab.rb gitlab.rb.org

221c220
< gitlab_rails['omniauth_enabled'] = true
---
> # gitlab_rails['omniauth_enabled'] = false
223d221
< gitlab_rails['omniauth_allow_single_sign_on'] = ['google_oauth2']
230,239c228,235
< gitlab_rails['omniauth_external_providers'] = ['google_oauth2']
< gitlab_rails['omniauth_providers'] = [
<   {
<     "name" => "google_oauth2",
<     "app_id" => "各自のapp-id",
<     "app_secret" => "各自のシークレット",
<     "args" => { "access_type" => "offline", "approval_prompt" => "",
<     "hd" =>  "許容ドメイン(hoge.com)" }
<   }
< ]
---
> # gitlab_rails['omniauth_providers'] = [
> #   {
> #     "name" => "google_oauth2",
> #     "app_id" => "YOUR APP ID",
> #     "app_secret" => "YOUR APP SECRET",
> #     "args" => { "access_type" => "offline", "approval_prompt" => "" }
> #   }
> # ]
```

2-2. 再起動

```
gitlab-ctl reconfigure
gitlab-ctl start
```

2-3. google認証のポイント

特定のドメインのみ許可したい場合は、hdオプションを利用することです。
google認証側で特定ドメインのみ対応してくれます。
特定ドメインが不要であればオプション外せば大丈夫なはずです。

# おまけ
Gitlab, Redmine, Jenkinsなど利用しますが、どれも/配下やHttps->Httpの切り替え方法が異なるので、
いちいち調べるのが面倒。なんかいい方法ないかなぁ。

# 参考
似たような対応として下記の記事を参考にさせて頂きましたが、Reconfigureをすると、
設定が変更されてしまうためメンテナンスする際に面倒なため、/etc/gitlab/gitlab.rbのみで対応できる方法を書きました。
http://qiita.com/morozumi_h/items/128d3254fd2eb4671966
Windows10でFiddler4でリモートデバッグできなかった場合

Windowsファイアウォールで穴あけする必要がある。

`コントロール パネル\システムとセキュリティ\Windows ファイアウォール\許可されたアプリ`
で許可すればOK。

<img width="1126" alt="Screenshot_8_6_17__5_26_PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/45959/902df42a-4503-6a80-c3b8-4bcd82881611.png">

ちなみに、Fiddler初起動時に穴あけするか聞かれるので、それで許可しておけば良い。
MySQL Serverに外部から接続する


#### 接続先環境
| key | version |
| --- | --- |
| OS | Ubuntu16.04 |
| MySQL | 5.7 |

#### mysqlのインストール
---
```
$ sudo apt-get install mysql-server
```

#### ファイアーウォールの設定
---
```
# ufwがなければインストール
$ sudo apt-get install ufw

# mysqlのデフォルトポート3306の通信を許可する
$ sudo ufw allow 3306
```

#### IPアドレスの制限を外す
---
ここで結構躓いた...
mysqlでは接続元のIPを制限しているため，その設定を変更しないと外部から接続できない模様．

```
# mysqld.cnfの編集
$ sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf

# bind-addressをコメントアウトする。
bind-address = 127.0.0.1
```


#### アクセス権限を付与する
---
ユーザーへのアクセス権を編集する．
とりあえずrootユーザーの制限を外して確認した．(セキュリティ的に良くないけど)

```
# mysqlにログイン(パスワードを聞かれるので入力)
$ mysql -u root -p

# rootユーザはどのIPからもアクセス可能に
mysql> grant all privileges on [データベース名].* to root@"%" identified by 'パスワード' with grant option;
```

#### 接続テスト
---
接続元でもmysqlをインストールしてテスト．

```
$ mysql -h 接続先ホスト -u root -p
```

rootユーザーのパスワードを入力して接続できることを確認．

#### 参考
---
- [MySQLの外部接続の設定](http://qiita.com/irabu1/items/4c08fcbac384e05a90ac)
- [MySQLに外部ホストから接続できるように設定する](http://linuxserver.jp/%E3%82%B5%E3%83%BC%E3%83%90%E6%A7%8B%E7%AF%89/db/mysql/%E5%A4%96%E9%83%A8%E6%8E%A5%E7%B6%9A%E8%A8%B1%E5%8F%AF%E8%A8%AD%E5%AE%9A)
raspberrypi zeroが来たのでセットアップする、USB1本で使うときOTGケーブルは要らない！！

このサイトの使い方慣れてないので
練習兼ねて
メモ書きです。

先日やっとzero wを入手したので
セットアップに着手しました。

とりあえずいつも通りSDを作って

刺して
ネットワークは、有線LANの口がないからとりあえずなしで、マイクロUSBコネクタ繋いでみましょう。

ネット上に転がる情報だと
USB OTGに対応してるからOTGケーブルを使いましょうとなっていますが！
ここ、ハマるとこです！

キーボードとか、USBLANアダプターとかをPI zeroで使うときはUSB OTGで正解ですが！

私はMacからssh接続したかったので
ただのマイクロUSBがついたケーブルを使います。充電用ではなく、通信用です。
OTG関係ないですし、そんなケーブルは無いです！！！騙されないように！！！

ラズパイをホストにするときはOTG
MacとつなぐときはUSB通信ケーブルです。

今日のメモはこの辺りで。。ではでは
[クイズ]javascriptと仲良くなるための一歩　第１８話「instanceofで型判定」

#問題

```js
arr = [1,2,3]
arr instanceof Array //=> true

function A() {}
function B() {}
A.prototype = new B();

var a = new A();
a instanceof A      //=> ?
a instanceof B      //=> ?
a instanceof Object //=> ?
```

:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:

#答え

```js
arr = [1,2,3]
arr instanceof Array //=> true

function A() {}
function B() {}
A.prototype = new B();

var a = new A();
a instanceof A      //=> true
a instanceof B      //=> true
a instanceof Object //=> true
```
terraformでASGを作る時の注意点

# 概要
起動設定を更新した際に相関関係にあるASGで起動しているインスタンスが作り直されてしまうので、これを回避する。

# 方法
`EC2Resources`の`aws_launch_configuration`を使用時、引数に`name`ではなく　`name_prefix`を使用する。

```launch_configuration.tf
resource "aws_launch_configuration" xxxxxxxx-autoscaling-conf" {
  name_prefix                 = "xxxxxxxx-autoscaling"
  image_id                    = "ami-xxxxx"
  instance_type               = "t2.medium"
  iam_instance_profile        = "xxxxxxxx"
  key_name                    = "xxxxxxxx"
  security_groups             = ["sg-xxxxxxxx"]
  associate_public_ip_address = true
  user_data                   = "${file("xxxxxxxx.sh")}"
  root_block_device  {
    volume_type           = "gp2"
    volume_size           = "50"
    delete_on_termination = "true"
  }
  lifecycle  {
    create_before_destroy = true
  }
}
```

* IDのみがユニークなものに置換され、ASGは影響を受けない

```
aws_launch_configuration.xxxxxxxx-autoscaling-autoscaling-conf:
  id = xxxxxxxx-autoscalingxxxxxxxxxxxxxxxx
```
Wio Nodeで心拍センサーを使う

## はじめに

Wio Nodeの学生むけの実習教材を作っていて、[心拍センサーは非対応](http://wiki.seeed.cc/Grove-Ear-clip_Heart_Rate_Sensor/)と書いてあるんだけれども、Generic Digital InputとWebSocket使えばいけるんじゃないのかな？と思って試してみました。

## Wio Nodeと心拍センサーの接続

Grove Systemなので特に難しいことはないです。3番ピン（コネクタ側から見て左側）につないでいます。

![EHR.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/1c67a5dd-852b-a92a-2152-9a5d9443ef5a.jpeg)


## アプリ側の設定

Generic Digital Input を選びます。

![app.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/8c34f575-9753-0d69-882f-70e2b9af25c8.jpeg)

WebSocketのAPIが作られます。

![api.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/362e67f6-b685-10a2-1a61-3462ce4f11cf.jpeg)

## プログラミング

Htmlに心拍数を表示するJSをバニラで書いてみます。

WebSocketのAPIは、心拍1回をトリガに、メッセージでイベントを4つ飛ばしてきます。接続しているのが3番ピンだとすると、心拍１回でON/OFFが連続的に同時に起こるので、

- {"msg": {"input_changed": "3"}}
- {"msg": {"input_rise": "3"}}
- {"msg": {"input_changed": "3"}}
- {"msg": {"input_fall": "3"}}

が送られてくることになります。

なので、input_riseかinput_fallを1回の心拍シグナルと見なして、心拍数を計算するプログラムにします。

```js
"use strict";

// ミリ秒を取得する
const getMilis = function() {
  return new Date().getTime();
}

// 心拍数を計算する（心拍合計/経過秒*60を小数点切り捨て）
const getHeartRate = function() {
  let milis = getMilis() - initTime;
  let rate = (beat / (milis / 1000.0)) * 60.0;
  console.log(rate);
  document.getElementById('rate').innerHTML = Math.floor(rate);
};

// 起動時のタイムスタンプ
const initTime = getMilis();
// 心拍合計
var beat = 0;
// 繰り返し処理
var interval = null;
// キー値
const key = '****';

// データをもらうためのWeb接続先
const ws = new WebSocket('wss://us.wio.seeed.io/v1/node/event');

window.onload = function() {

  // Webに接続するための処理
  ws.onopen = function() {
    ws.send(key);
    document.getElementById('wait').style.display = 'none';
  };

  // Webからデータを取得できたときの処理
  // ピン番号を明確にしたければ、最初のifの条件式をjson.msg.input_rise === 'ピン番号' に。
  ws.onmessage = function(evt) {
    var json = JSON.parse(evt.data);
    if (json.msg.input_rise) {
      beat = beat + 1;
      if (!interval) {
        interval = setInterval(getHeartRate, 5000);
      }
    }
  };
}
```

```html
<body>

  <p id="wait"><strong>じゅんびちゅう...</strong></p>
  <p>心拍数：<span id="rate">?</span></p>

</body>
```

## 動作

この記事を書いている間に、心拍センサーをつけっぱなしにしてみました。

それっぽい値が出ています。（FitBitと比較して、誤差1〜2ぐらいでした)

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/8064/12603d43-ea00-9c51-b4c1-41f610a22a5b.png)


なお、小数点を切り捨てにしています。

理由は、[参考にしたUPMのソースコードがそうなっていたから](https://github.com/intel-iot-devkit/upm/tree/master/src/ehr)なんですが、いいんですかね?

医療機器とか医療システムの中の人がいらっしゃいましたら、ぜひ教えてください。


## おわりに

一見、Wio Nodeに対応していないGroveセンサーでも、Generic Digital Input, Generic Analog Inputを使って、対応させることができそうです。（全部はどうかわかりませんが）

参考までに、ソースコードを [gistにおいておきました](https://gist.github.com/gishi-yama/8ed6435d79edd1f2409b109994d539fa)。キー（アクセストークン）は各自のものに変えてください。
PageSpeed Moduleを一時無効にするクエリパラメータ

URL 末尾に`?ModPagespeed=off`もしくは`?PageSpeed=off`をつける。

```:QueryString
https://www.example.co.jp/?ModPagespeed=off
```

参考：[【自動化】PageSpeed ModuleでWebサイトのパフォーマンスチューニング #1 インストール編 ｜ Developers.IO](http://dev.classmethod.jp/tool/challenge-mod-pagespeed-install/)
Java&PHPで学ぶデザインパターン（まとめ）

# はじめに
デザインパターンについてまとめてみました。自分の理解を深めるために書いていますので、明らかに間違っている等あればコメントにてご指摘いただければと思います。（できる限り早めに返信、修正します）

主な参考文献は以下の通りです。(個別の参照元に関しては下の参照をご確認ください)

- [増補改訂版Java言語で学ぶデザインパターン入門](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797327030/ref=sr_1_1?ie=UTF8&qid=1454743284&sr=8-1&keywords=java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83% B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80)
- [TECHSCORE](http://www.techscore.com/tech/DesignPattern/index.html/)


# 何を書くか
基本的にはGoFの23パターンをまとめます。
それ以外でも有用なデザインパターンがあればそれもまとめます。

# 何を書きたいか（修正する可能性大）
書きながら決めていきますので、ここは修正する可能性大ですが、普通に学んだことのほかに、「どういう場合に使うといいのか」「どういう場合だと使えないか」のようなことも書きたいと考えています。また基本的にはJava言語で示しますでが、PHPだとどう書くか（業務ではPHPを書いているので）、みたいなことも書けたらと思ってます。


# デザインパターンまとめ

- 概要（このあたりは学んでいく中で書きます）
    - そもそもデザインパターンとは何か？
    - デザインパターンを学ぶといいことって？
- 生成に関するパターン
    - Abstract Factory
    - Builder
    - Prototype
    - Singleton
- 構造に関するパターン
    - Adapter
    - Bridge
    - Composite
    - Decorator
    - Facade
    - Flyweight
    - Proxy
- 振る舞いに関するパターン
    - Chain of responsibility
    - Command
    - Interpreter
    - Iterator
    - Mediator
    - Memento
    - Observer
    - State
    - Strategy
    - Template Method
    - Visitor
- その他に関するパターン（あるのか？）

# 参照
[増補改訂版Java言語で学ぶデザインパターン入門](https://www.amazon.co.jp/%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88Java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80-%E7%B5%90%E5%9F%8E-%E6%B5%A9/dp/4797327030/ref=sr_1_1?ie=UTF8&qid=1454743284&sr=8-1&keywords=java%E8%A8%80%E8%AA%9E%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%B6%E3%82%A4%E3%83% B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E5%85%A5%E9%96%80)
[デザインパターン(TECHSCORE)](http://www.techscore.com/tech/DesignPattern/index.html/)
[GoFのデザインパターンまとめ](http://qiita.com/shoheiyokoyama/items/67faa46dfff0a6bc35e1)
[GoFの23のデザインパターンを，Javaで活用するための一覧表](http://language-and-engineering.hatenablog.jp/entry/20120330/p1)
jquery datatables filterより便利。 フィールド列を指定して検索

以下のような感じでOK。
コピペじゃ動かんかもしれんので、参考までにね。
カラム番号、検索したい文字列

フィルター使うより、こっちのがわかりやすい。

```

<script>
    $(function () {

        table = $("#foo-table").DataTable();

        // #testhoge をクリックすると table の 2列目から 728を検索して返す
        // 列は 0 列目から始まる。
        $(document).on('click', '#testhoge', function() {
            table.column(2).search("検索したい文字")
                .draw();
        });



    });
</script>

<span id="testhoge">テストで検索</span>

<table id="foo-table">
    <thead>
    <tr>
        <th>
            <input type="checkbox" class="check" value="">
        </th>
        <th>
            <i class="fa fa-gear"></i>
        </th>
        <th>ID</th>
        <th>サイト情報</th>
        <th>テンプレート</th>
        <th>タグ</th>


    </tr>
    </thead>
</table>



```
[クイズ]javascriptと仲良くなるための一歩　第１7話「constructorで型判定」

#問題

```js
var arr = [1,2,3]
arr.constructor //=> function Array() { [native code] }

function A() {}
function B() {}
A.prototype = new B();

var b = new B();
b.constructor; //=> ?
var a = new A();
d.constructor; //=> ?
```


:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:
:mouse:
:cow:
:tiger:
:rabbit:
:dragon_face:
:snake:
:horse:
:sheep:
:monkey_face:
:bird:
:dog:
:boar:


#答え

```js
var arr = [1,2,3]
arr.constructor //=> function Array() { [native code] }

function A() {}
function B() {}
A.prototype = new B();

var b = new B();
b.constructor; //=> function B() {}
var a = new A();
d.constructor; //=> function B() {}
```
CH340G搭載Arduino互換ボードで詰まった

会社の先輩にいただいたArduino nanoもどきのNANO DCCduinoを使おうとした時にハマったのでメモ。

シリアルドライバーがよくあFTDIではなく、CH340というものなのでとりあえずドライバーをインストールする。

ここがOS毎でinstall方法がまとまっててよかった。
[https://kig.re/2014/12/31/how-to-use-arduino-nano-mini-pro-with-CH340G-on-mac-osx-yosemite.html](https://kig.re/2014/12/31/how-to-use-arduino-nano-mini-pro-with-CH340G-on-mac-osx-yosemite.html)

## 問題
インストールした後に、普通は`tty.wchusbserial`と表示されるらしいが、自分の環境では`tty.MindWave`と表示された。これだと、書き込みができない。

## 解決法
どうやら以前、MindWaveをインストールしたのが悪そうだということで、`/System/Library/Extensions/midewave.kext`を削除して再起動したら無事動いた。
npm installで何も表示されないままの時の対策

# 概要
npm installを行なったところそのあと何も表示されずに
ずっとそのままという事態に陥ったのでその際の対策。


# 環境
- MacOS Sierra 10.12.6
- nodejs v7.0.0
- npm  v3.10.8



# 対策

ターミナルで以下のコマンドを打ち、そのあとにnpm installを行なったところうまくいった。

```terminal
$ npm update -g npm
```

↑上記コマンドはnpm自体のupdateを行うコマンド。


## 原因

どうやらnpmのバージョンが古かったために起こった現象の模様。
npmがアップデートされる前は、3.10.8だったがupdate後は
5.3.0だった。初歩的なミス。
GreeのWebViewをWindowsのUnityEditorである程度動作させるとっかかり

#環境
Unity2017.1.0f3
Windows10 Home

#概要
GreeのWebViewがWindowsのUnityEditor上で動作しないのでEditorWebViewを使用してある程度動作させるようにするためのとっかかり的なものです
GreeのWebViewについてくるSample.unityはWeb上のボタンが押されたら、画面にフィードバックしますが、それが動作するようにしています

#GreeのWebView
https://github.com/gree/unity-webview

#プログラム
そこそこあるのでgithubにアップ
以下は追加、修正したファイル
Assets/StreamingAssets/unity_call.js
Assets/Plugins/MyWeb
Assets/Plugins/GreeWebViewEditorWindow.cs
Assets/Plugins/WebViewObject.cs(修正）

https://github.com/fukaken5050/TestGreeEditorWebView

#参考
http://qiita.com/kyusyukeigo/items/71db22676c6f4743913e
Dockerを使ってRails5を動かす


[dockerのセットアップは、こちらを見て下さい](http://qiita.com/joji/items/39f5488308fc166964d8 "dockerのセットアップは、こちらを見て下さい") 

```:bash
vagrant ssh
```

in Vagrant

```:bash
vi Dockerfile 
```

```:Dockerfile 
FROM centos
MAINTAINER taro yamada <taro.yamada@bibo.com.ph>
RUN yum install -y git openssl-devel readline-devel zlib-devel bzip2 make gcc gcc-c++ sqlite-devel
ADD create_app.sh /usr/local/bin/create_app.sh
RUN chmod u+x /usr/local/bin/create_app.sh && /usr/local/bin/create_app.sh
ADD init.sh /usr/local/bin/init.sh
RUN chmod u+x /usr/local/bin/init.sh
EXPOSE 3000
CMD ["/usr/local/bin/init.sh"]
```

```:bash
vi create_app.sh
```

```:create_app.sh
#!/bin/bash -x
git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
cd ~/.rbenv/plugins/ruby-build && ./install.sh
rbenv install 2.4.1
rbenv rehash
rbenv global 2.4.1
gem install rails
cd /root
rails new bibo
cd bibo
echo "gem 'therubyracer', platforms: :ruby" >> Gemfile
bundle install
rails g scaffold user name:string age:integer
rake db:migrate
```

```:bash
vi init.sh 
```

```:init.sh
#!/bin/bash -x
cd /root/bibo
source ~/.bash_profile
rails s -b 0.0.0.0 -p 3000 -d
exec /bin/bash
```

Imageの作成

```:bash
sudo docker build -t rails .
```

containerの3000をvagrantの8080に転送する用に設定して起動

```:bash
sudo docker run -p 8080:3000 -t rails
```

これでbrowserからアクセスできるはずです。

```:browser
http://192.168.55.44:8080/users
```

アクセスできない場合は、以下の項目を確認して下さい。

Vagrant上でFirewallを無効

```:bash
systemctl stop firewalld
```

こう表示されたらOK

```:bash
systemctl status firewalld
# Active: inactive (dead)
```

Vagrant上で8080がListenされているか確認

```:bash
ss -natu | grep 8080
#tcp    LISTEN     0      128      :::8080                 :::* 
```

containerが動いているか確認

```:bash
sudo docker ps
#9eb2ad0c6e9d rails "/usr/local/bin/in..." 1 minutes ago Up 1 minutes 0.0.0.0:8080->3000/tcp   gracious_almeida
```
tensorflow mnist_deep.py

#概要

- 非力なPCで実行するため、いくつか修正。
- [mnist_deep.py](https://github.com/tensorflow/tensorflow/blob/r1.2/tensorflow/examples/tutorials/mnist/mnist_deep.py)

#テスト時にメモリを食いすぎるので、分割して評価

```R
  batch_size = 50

  def my_eval(st,en):
    x_test = mnist.test.images[st:en]
    y_test = mnist.test.labels[st:en]
    return accuracy.eval(feed_dict={x: x_test, y_: y_test, keep_prob: 1.0})

  test_accuracy = np.mean([my_eval(i,i+batch_size) for i in range(0, mnist.test._num_examples, batch_size)])
```

#学習速度を改善
- Heの初期値を使用

```R
def weight_variable(shape):
  """weight_variable generates a weight variable of a given shape."""
  if len(shape) == 4:
    sd = np.sqrt(2.0/shape[0]/shape[1]/shape[2])
  if len(shape) == 2:
    sd = np.sqrt(2.0/shape[0])
  initial = tf.truncated_normal(shape, stddev=sd)
  return tf.Variable(initial)

```

- 学習率を1e-3に拡大

```R
  train_step = tf.train.AdamOptimizer(1e-3).minimize(cross_entropy)
```
Check! 試用版 Azure Web Apps で PHP環境を試す

こんにちは！ @dz_ こと大平かづみです。

Prologue - はじめに
====

「[[お試し] もくもく + PaaSハンズオン（Azure + Bluemix) #0](https://play-with-cloudz.connpass.com/event/63708/)」にて、複数クラウドの  PaaS を体験してみるハンズオンを企画しています。

このハンズオンの資料も兼ねて、 Azure の PaaS である Web Apps をお試しで使うときの最初のステップについてまとめました。

How to use Azure Web Apps on trial - 試用版の Azure Web Apps を使う
====

## Overview - 概要
試用版の Azure Web Apps は、時間制限（1時間）があるものの、アカウント作成なしに Web Apps を体験できるものです。

（正確に言うと、 Web Apps を含む Azure App Service を試用できるものです。）

## Requirements - 必要なもの

試用版の Azure App Service を利用するには、以下のいずれかのアカウントが必要です。

- **Microsoft アカウント**
    - 試用版で Azure ポータルも体験できるので、おすすめ！
- Google + アカウント
- Facebook アカウント
- Github アカウント

## Step by step - 手順

それでは、試しに、試用版の Azure Web Apps を利用して、空の PHPサイトを作成してみましょう。

「[Azure App Service を試す - テンプレートの選択](https://azure.microsoft.com/ja-jp/try/app-service/web/?language=php)」を開きます。（※後述）

「言語の選択」で「PHP」が選択されており、PHPのテンプレートが表示されます。「PHP 空のサイト」を選択し、「作成 >」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/49db5f2d-4ab6-9b41-c39d-08dc95d36d55.png)

ソーシャルアカウントでログインするよう促されるので、いずれかのアカウントでログインしてください。ここで「Microsoft アカウント」でサインインすると、Azure ポータルも試用できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/0cefd6ba-6fa8-37eb-bbcc-cf139494c9b8.png)


サインインすると、プロビジョニングが始まります。プロビジョニングが終わると、下記の画面が表示され、Web Apps の準備が完了します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/a2da1004-5550-c3a4-b181-db8c79259988.png)

作成されたウェブサイトのURLは、ピンク枠の部分に表示されています。開くと、「Hello World」だけ書かれたシンプルなページが表示されます。

このウェブサイトは、1時間のみ利用でき、その期限は画面に表示されています。期限が切れる、またはこの画面の「前へ」をクリックすると、作成した試用版のウェブサイトは削除されます。

## More experiences? - より多く体験するには

また、Microsoft アカウントでサインインして作成した場合は、以下の二つを利用できます。

- (Azure)  ポータル内で管理
- コードをオンラインで編集

ブラウザから簡単に Web App のソースコードを変更したり、内蔵の MySQL In App を利用したい場合に便利です。

### Azure ポータル内で管理
![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/8a6e8d4e-32a9-b0d1-7536-a7eb54d295b5.png)

### コードをオンラインで編集 (App Service Editor)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/a86646bd-6572-ad44-2ed5-372111712fbd.png)


## 備考

※ なお、「Azure App Service を試す 」ページは、 [Azure のサイト](https://azure.microsoft.com/) の [Web Apps の製品ページ](https://azure.microsoft.com/ja-jp/services/app-service/web/) の「Web Apps を今すぐ試す」ボタンからも開けます。言語に「PHP」を選択しておくと、スムーズです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3812/65e4bc41-da79-7cc8-fe40-e8eeb97496ec.png)

Epilogue - おわりに
====
PHPのテンプレートには WordPress もあって、すぐ使える状態にセットアップされています。 WordPress on Azure Web Apps 構成の見本としてみるにも役立つかも知れません♪

- 参考: [Check! 試用版 Azure Web Apps の WordPress テンプレートのデータベースは？](http://qiita.com/dz_/items/8e107363ab49d27422ec)
CognitoでAdminCreateUser時の招待メッセージをカスタマイズする


# 概要
CognitoではLabmdaトリガーを使って様々な処理を行うことが出来ます。
そのうちの一つとして送信するメッセージのカスタマイズがあるのですが、AdminCreateUserがトリガーイベントの場合のドキュメントがなかったのでメモしておきます。
AWSのドキュメントが更新されたら不要になります。

# 参考
- http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-identity-pools-working-with-aws-lambda-triggers.html
- http://blog.cacoveanu.com/2017/03/03/amazon-cognito-email-customization.html

# 詳細
AdminCreateUserは管理者がユーザを作成するAPIです。
管理者がユーザを作成すると、一時パスワードが作成されてユーザにメールが届きます。
ユーザがログイン後にパスワードを変更するとCONFIRMED状態になります。

先に結論として、うまく動作したLambdaのソースコードを載せておきます。

```python
def lambda_handler(event, context):
    if event["triggerSource"] == "CustomMessage_AdminCreateUser":
        event["response"] = {
            "emailSubject": "Custom Subject",
            "emailMessage": "Your username is " + event["request"]["usernameParameter"] + "<br>Your temporary password is " + event["request"]["codeParameter"]
        }
    
    
    return event
```

カスタムメッセージのレスポンスは以下のようにドキュメントに記載されています。

```
"response": {
    "smsMessage": "string",
    "emailMessage": "string",
    "emailSubject": "string";
}
```

SMSのメッセージとメールの件名・本文が変更可能なようです。
emailMessageの説明は以下のようになっています。

```
emailMessage
ユーザーに送信されるカスタム E メールメッセージ。リクエストで受信される codeParameter 値を含める必要があります。
```

なるほど `codeParameter` を入れれば良いのか！ということでドキュメントのサンプルコードを参考に以下のようなコードを書きます。

```python
event["response"]["emailSubject"] = "Welcome to the service"
event["response"]["emailMessage"] = "Your confirmation code is " + event["request"]["codeParameter"]
```

しかし、件名は変わるものの本文は変わりません。

ドキュメントどおりにやっているのに動かない...ということで他の人がどうやっているのか調べていったところ、レスポンスに `usernameParameter` を含めていることが分かりました。
これはリクエストに含まれており、 `codeParameter` のようなものです。
そこで `usernameParameter` を入れたところあっさり成功しました。

# まとめ
`usernameParameter` についてAWSのドキュメントを探しても全く見つかりませんでしたが、AdminCreateUser時の招待メッセージをカスタマイズしたい場合は必要なようでした。
LaravelのGuardに関して

# Guardって何

LaravelのAuthの認証に利用しているドライバークラスです。
普通のサイトを作っている場合にはほぼ見ることはないかもしれませんが、SPAを作ることになった、APIを作ることになったときに見ることになるでしょう。

# 想定バージョン

Laravel 5.4

# 設定されてる場所

`config/auth.php`のguardsにあります。

# 標準のGuardの種類

## SessionGuard

恐らく一番使われているGuard。
名前の通りSessionを利用して認証を行うGuardです。
(なお、Sessionとありますがネイティブのセッションではなく、Laravelが独自に用意したセッションの場合が多い。configのsessionのdriverを見よう。)

## TokenGuard

TokenGuardはapiのトークンを利用して認証する方式です。
これは先に対象のテーブルにapiのトークンをDBに保存しておいて、このトークンがフロントからのリクエストで送られてきたら認証するという方式です。
リクエストとして投げるときはapi_tokenというキーでクエリに混ぜるか、POSTパラメータに混ぜるか、AuthorizationヘッダのBearerスキームに登録するか、PHP_AUTH_PWというヘッダパラメータを付与してリクエストをするかです。(標準なら)
正直このTokenGuardでは心もとなく感じるので、JWTやLaravel Passportを利用したAPIの認証をいずれすることになるでしょう・・・

## RequestGuard

これは例外です。普通の利用ではこのRequestGuardは呼ばれません。
基本的にこのGuardは拡張するためのGuardで、Auth::viaRequestで拡張して利用します。
ここ最近はこれで認証することは少ないみたいです。
検索してもほとんどLumen5.2の話しか出てこなかった・・・！

lumenで実際に使っている所みました。
https://github.com/laravel/lumen/blob/v5.5.0/app/Providers/AuthServiceProvider.php

# Guardを自分で作る

Guardは`Auth::extend`で作ることが出来ます。
ServiceProviderのbootメソッドに記述する必要があるので、大抵は`$this->app['auth']->extend()`と書くことになります。

例として、tymondesigns/jwt-authのextendを見てみます。

```php

$this->app['auth']->extend('jwt', function ($app, $name, array $config) {
	$guard = new JwtGuard(
		$app['tymon.jwt'],
		$app['auth']->createUserProvider($config['provider']),
		$app['request']
	);

	$app->refresh('request', $guard, 'setRequest');

	return $guard;
});
```

上記のように、情報を与えてそのGuardを返すようなやり方です。
専門的な技術者に成果を上げさせるためにリーダーができること

C++のプログラムを書ける人よりも、C++　OpenCVを使って書ける人は少ない。それぞれのアルゴリズムに対してどのように使いこなせばいいのかを知っている人はさらに少ない。さらに自力で問題解決のためにアルゴリズムを作っていける人はさらに少ない。

あなたのそばにいるスペシャリストは、そういう限られた人たちなのです。

そのことを分かった上で、リーダーは次のことを心がけて組織を運営してください。

### **バグレポートのあげ方を改善しよう.**
- バグレポートはRedmineなどでする。(メールやExcelを併用していても)
[「Effective Debugging　――ソフトウェアとシステムをデバッグする66項目」](https://www.oreilly.co.jp/books/9784873117997/) では、課題管理システムに上げられていないバグ報告には対応するなと言っています。


- [エンジニアに分かりやすくバグを報告するバグレポートの書き方](https://liginc.co.jp/178767)
- [バグレポートの書き方](http://qiita.com/bukowski1920/items/82d9524f5a54ae2fe85a)
- [新社会人のためのバグレポートの基本](http://alpha.mixi.co.jp/entry/2012/10799/)

### **問題を生じたRevisionの特定は、二分法で絞り込もう。**
- バージョン管理システムから、コードを復元して、どのバージョンまで問題がなく、どのバージョンで問題を生じたのかを明らかにする。
- バグを生じた変更箇所を明示する。
   - その場所がバグの場合もあるし、バグを顕在化させた引き金の場合もある。
- Redmineなどにチケットに追記する。 

### **専門家の出番**
- Redmineでどのバグレポートなのか、その最新状況を知ることができます。
- バグの状況とヒントとともに、問題の解決にあたります。
- 状況が明確になっているので、少ない工数で解決できます。 
- 解決した結果をRedmineに登録します。
- 単体テストに項目を追加します。

### **専門家は信頼してよい。**
- 専門家であればあるほど、自分の開発中のアルゴリズムがどれほど限界を持ちやすいのかを知っている。
- 専門家のチームは、お互いにアドバイスをしあうので、間違った判断をし続けることは少ない。
- 専門家チームを活用できないのは、適切な要件定義ができていない場合に多い。
- 専門家は、課題管理システム（Redmineなど）やgit, SVNに大切なことを書いている人が多い。


期日が迫っている新機能の実装に忙しい専門家に、あいまいすぎるままバグの対応を依頼してはいけません。

---

プロジェクト・マネジャーが知るべき97のこと　[時としてプロジェクト・マネジャーができる最善のことは、邪魔をしないことです](https://xn--97-273ae6a4irb6e2h2k6c0ec7tvc3h1e0dwi7lj952k.com/%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4/%E9%96%8B%E7%99%BA%E8%80%85%E3%82%92%E6%B4%BB%E3%81%8B%E3%81%99/)
HTTPieでGitterにメッセージを投稿


```
http POST https://api.gitter.im/v1/rooms/$ROOM_ID/chatMessages \
                               "Authorization: Bearer $ACCESS_TOKEN" \
                               text=$MESSAGE
```

## パラメータ

* ROOM_ID
	* チャットルームのRoom ID指定 
	* 取得方法はこちら http://qiita.com/eielh/items/964e5856dbecc5215f1d
* ACCESS_TOKEN
	* APIアクセスのためのトークン
	* この辺からとれるはず https://developer.gitter.im/apps
* MESSAGE
	* 投稿したいメッセージ


# 参考文献

* [Gitter Developer | Messages Resource](https://developer.gitter.im/docs/messages-resource)