OmniAICreator/Qiita-1.07M huggingface dataset:
useState 引数は primitive? object?

[先日の投稿](https://qiita.com/Takepepe/items/7e62cc7d7d8b81ca50db)の続きです。「memoize input array を空にする」ことにこだわらなければ、この憂慮は不要です。handler関数が外側のstate を参照しない様にした場合、以下の様な課題に遭遇します。

```javascript
const [flag, setFlag] = useState(true)
const [count, setCount] = useState(0)

const handleToggleFlag = useCallback(() => {
  setFlag(prev => !prev)
},[])
const handleIncrement = useCallback(() => {
  setCount(prev => {
    if (!flag) return prev
    return prev + 1
  })
},[flag]) // これを空にしたい
```

動くには動きますが、flag 更新毎に `handleIncrement` が再定義されてしまいます。解決策として state を object 一つに集約する方法があります。useState の引数は「object である必要はないが、要望があれば可能」とされています。

```javascript
const [state, update] = useState({
  flag: true,
  count: 0
})
const handleToggleFlag = useCallback(() => {
  update(prev => ({ ...prev, flag: !prev.flag }))
},[])
const handleIncrement = useCallback(() => {
  update(prev => {
    if (!prev.flag) return prev
    return { ...prev, count: prev.count + 1 }
  })
},[])
```

Hooks 記事では言う必要もなく、これは現時点での考察になりますのでご注意下さい。
Xcode ver10.1 において、WKWebViewをInterface Builderで配置したけど、シミュレーターでうまく反映されない問題。

#状況

  http通信を許可した

<img width="475" alt="スクリーンショット 2018-11-16 7.39.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/bc91385c-aff9-ea22-9b8e-08062d59f7b7.png">



View2つ・Label1つ・Button5つをInterface Builderで以下のように配置
<img width="907" alt="スクリーンショット 2018-11-16 7.46.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/7abcb844-01d2-17ef-68c3-45b51e3b1fe1.png">


WKWebViewクラスのインスタンスを生成してWebページを表示させようとした
<img width="909" alt="スクリーンショット 2018-11-16 7.47.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/596535e6-3cf8-4997-6e0d-ceeeca1f4b0f.png">



#エラー内容(詳細)

シミュレータを起動すると以下のようにヘッダーとフッターが見切れてしまう
<img width="374" alt="スクリーンショット 2018-11-16 9.51.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/6dcc08a9-bb0d-9cf7-792b-4d6cbfa9ebbe.png">


#試したこと

WebViewをInterfaceBuilderで配置
<img width="1167" alt="スクリーンショット 2018-11-16 7.43.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/112b089f-7eb3-7f46-e0d3-954d1dbde22e.png">
⇨なぜかダメ…
けどすぐ解決:joy:

#解決策

15・20行目を削除し、Interface Builder上のWKWebViewをソースコードと関連付けする
<img width="909" alt="スクリーンショット 2018-11-16 7.47.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/1df2fc13-31e7-50b3-ebb0-514ac3f943f6.png">
<img width="640" alt="スクリーンショット 2018-11-16 9.34.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/260056/89e1b6f2-7acb-c126-a352-5c97c31c6ddb.png">


#原因

ただただ関連付けしてないだけだった:dizzy_face:

#まとめ

XcodeがupdateしてからWLWebViewをコードで書いてWebページを表示させようとすると
ちゃんとAutoLayoutを設定しても上下が見切れる
⇨**Interface BuilderでWKWebViewを配置しなきゃダメ**

配置したら**忘れずに関連付けする**

終わり:sunny:
GCPのGPUを比較してみた(T4が東京リージョンにくる!)

# GCPのGPUを比較
こんにちは、chlochanです。いつの日か仕事に生かせる事を目指して、休日とかにDeep Learning の勉強をしています。勉強には Google Cloud Platform(以降GCPと表記) を使っています。教科書は、"PythonとKerasによるディープラーニング"(以降PKDLと表記)を使っています。Deep LearningにはGPUが必要です。GCPで使えるGPUは以下に載っています。
https://cloud.google.com/compute/docs/gpus/
上記によるとGCPで提供しているdeep learning用途向きのGPUは現在4種類あります。それを表にして比較してみました。また参考に、まだα運用中ですがT4も表に載せました。料金はリージョンによって微妙に違うので参考程度にしてください。以下の料金は2018/11/10時点でのロサンゼルスリージョンの料金です。AWSの半額以下の料金です。


| 比較項目 ↓  　 Teslaのタイプ名 → |    V100   |    P100   |     P4    |    K80    |   T4   |
|---------------------------------|:---------:|:---------:|:---------:|:---------:|:------:|
| GCPでの提供開始時期               | 2018年4月 | 2017年9月 | 2018年8月 | 2017年9月 |  α運用中  |
| アーキテクチャー                  |   Volta   |   Pascal  |   Pascal  |   Kepler  | Turing |
| プロセス                          |    12nm   |    16nm   |    16nm   |    28nm   |  12nm  |
| ファン                            |    あり   |    あり   |    なし   |    あり   |  なし  |
| GPUメモリの容量(GB)               |     16    |     16    |     8     |     12    |   16   |
| GPUメモリの種類                   |    HBM2   |    HBM2   |   GDDR5   |   GDDR5   |  GDDR6 |
| GPUメモリバンド幅(GB/s)           |    900    |    732    |    192    |    240    |   320  |
| CPUのMaxコア数/GPU一個あたり      |     12    |     16    |     24    |     8     |    -   |
| その時のCPUのMaxメモリ容量(GB)            |     78    |    104    |    156    |     52    |    -   |
| 利用可能なゾーン数(2018/11時点)   |     9     |     11    |     14    |     9     |    18?   |
| FP32(TF)                          |   14.02   |   9.318   |   5.443   |   4.368   |   8.1  |
| FP16(TF)                          |     -     |   18.636  |     -     |     -     |   65   |
| INT8(TOPS)                        |     -     |     -     |   21.77   |     -     |   130  |
| INT4(TOPS)                        |     -     |     -     |     -     |     -     |   260  |
| PKDLのリスト5-23の実行時間 |   22分  |    20分   |    28分   |    38分   |    -   |
| CPUコア16メモリ104GB時の価格/h    |     -     |   $1.691  |   $1.306  |     -     |    -   |
| CPUコア12メモリ78GB時の価格/h     |   $2.263  |   $1.549  |   $1.107  |     -     |    -   |
| CPUコア8メモリ52GB時の価格/h      |   $2.073  |   $1.359  |   $0.908  |   $0.652  |    -   |
| CPUコア4メモリ26GB時の価格/h      |   $1.907  |   $1.193  |   $0.710  |   $0.486  |    -   |
現時点(2018/11月)では東京リージョンではGPUはどれも使えません。Googleはネットワーク早いので東京に無くても問題ないかもしれませんが、ちょっと寂しいです。他のリージョンから選ぶ必要がありますが、P4は利用可能なゾーンが一番多いので、現時点で一番良いと思います。なおCPUコア数とCPUメモリ容量はデプロイ後でも停止中であれば変更できます。しかしT4のFP16/INT8/INT4はすごいです。これからは、FP16/INT8/INT4をいかにうまく使いこなすか、というのが勝負になりそうです。ちなみに Keras で fp16 で実行する場合は以下を有効にするとよいとの事です。

~~~py
import keras.backend as K
K.set_floatx('float16')
~~~
11/15追記、T4がα運用を開始したとのニュースがありました。IAMと管理 → 割当 を確認したところ、T4が18リージョン出現していました。一気にくるようですね。
### 11/18追記、すみませんよく見たら、T4は東京リージョンがありました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/307576/a8ef0b08-ce58-ba96-051c-411461924904.png)
MsiInstaller　1024　Perflib　1008

https://social.technet.microsoft.com/Forums/ja-JP/8cb05734-ae12-4474-99f3-81ec7981fb27/windows-update?forum=windowsserver2008ja

下記の情報などを見ますと、実害が無ければ無視してよいエラーの可能性もあるようです。



https://yamahide.biz/archives_99.html
イベントログのアプリケーションにPerflibエラーID:1008が記録されるときの対処

をやれば良いかも知れませんがとりあえずクリティカルじゃないので放置っ


いっぱいメモを表記して失礼しました。m(_ _)m
VSS　8193 　ADWS　1202　Iphlpsvc　4202　　report server windows service (YAYOI) 107

https://answers.microsoft.com/ja-jp/windows/forum/all/windows/4bf4bedb-80db-472c-a3e8-f7079aaf83d9

前も書いたかも知れませんが
経過観察しろとの事……

毎回Windowsアップデートの後出るんだよな……

エラー　ADWS　1202
https://qiita.com/moitaro/items/b596e7ce8da76ec715ef

に関しても同様


https://sevenb.jp/wordpress/ura/2015/06/15/%E3%82%A8%E3%83%A9%E3%83%BC%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88id4202-%E3%82%BD%E3%83%BC%E3%82%B9microsoft-windows-iphlpsvc/

設定がおかしくなくても、ネットワークアダプタの設定変更時や、ネットワークアダプタのリンクダウン時にも出力されるようですので、通信が正常なら無視してもOK。



https://docs.microsoft.com/ja-jp/sql/reporting-services/troubleshooting/report-server-windows-service-mssqlserver-107?view=sql-server-2017

SQL Server データベース エンジン サービスが実行されていない場合。

リモート接続または TCP/IP プロトコルが無効になっているため、 データベース エンジン サービスへの接続に失敗する場合。

レポート サーバー データベースが正しく構成されていない場合。

サービス アカウントが正しく構成されていないか、レポート サーバー データベースに対する権限がアカウントにない場合。 この状況は、アカウントやレポート サーバー データベースの設定に Reporting Services 構成ツールを使用しない場合に発生することがあります。
javascript

## プロトタイプ　
　　インスタンンスのようなもの

## コンストラクタ
　　new演算子を用いて、オブジェクトを生成することを想定した、「関数オブジェクト」


```javascript

var Member = function(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
  this.getName = function(){
   return this.lastName + '' + this.firstName;
  }
};

var men = new Member('けんた','やまだ');
document.writeln(men.getName());

→やまだ　けんた

```

rubyに置き換えるとこんなこと？

```ruby
class Member

  def initialize(firstName, lastName)
    @firstName = firstName
    @lastName = lastName
  end

  def getName
   @firstName + @lastName
  end

end

puts member = Member.new('けんた','やまだ')
puts　member
```


プロトタイプの目的

javascriptのインスタンスは、【インスタンス毎にメソッドをもつ】

1プロトタイプにすると、【rubyのクラスのような扱いができる】
2インスタンスの値を引き継げる！！（インスタンス変数もインスタンス毎）

```javascript

var Member = function(){};

Member.prototype.sex = '男';


var men1 = new Member();
var men2 = new Member();
document.writeln(men1.sex + '|' + men2.sex);
men2.sex ='女';
document.writeln(men1.sex + '|' + men2.sex);

男|男 男|女
```



```javascript

var Member = function(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}


Member.prototype.getName = function(){
 return this.lastName + '' + this.firstName;
};

Member.prototype.toString = function(){
  return this.lastName + this.firstName;
}

Member.prototype.firstName =" AAA"

Member.prototype.lastName =" BBBB"

document.writeln(Member.prototype.getName())

document.writeln(Member.prototype.toString())


Member.prototype = {

getName : function(){
 return this.lastName + '' + this.firstName;
};

toString : function(){
  return this.lastName + this.firstName;
}
}


Member.prototype.getName = function(){
 return this.lastName + '' + this.firstName;
};

Member.prototype.toString = function(){
  return this.lastName + this.firstName;
}


```


```
erlangでトレーシング(tracing in erlang)

特定のプロセスの動作をトレシングしたい

```erlang

            dbg:tracer(port,dbg:trace_port(file,"traceFile")),
            P = whereis(gproc),
            dbg:p(P, [all ]),
            dbg:tp('_', cx),
```
シェルからバイナリーログファイルを解析する時

```erlang
Pid = dbg:trace_client(file,"traceFile").
dbg:stop_trace_client(Pid).
```

gen_serverなら、start_link関数にデバッグオプションを入れることでログ情報も取れます

```erlang
{debug, [trace]}
```
php-master-changes 2018-11-15

今日は ext/openssl への X509_verify() ラッパー追加、ドキュメントの更新、typo の修正、ext/fileinfo の libmagic 用データの修正、zend_objects_store_put() の最適化、ext/mbstring のテスト修正、不要変数除去の修正があった！

# 2018-11-15
## DASPRiD: Add openssl_x509_verify() function
- https://github.com/php/php-src/commit/ee939b70d316fba104a2d41b72b2c17ac711be6c
- ext/openssl に openssl_x509_verify() を追加
- [X509_verify()](https://www.openssl.org/docs/man1.1.0/crypto/X509_verify.html) のラッパー

## petk: [ci skip] Update NEWS
- https://github.com/php/php-src/commit/698f8bec938c4f0c314e0f7a3bf048a8280ff08a
- ↑ についてNEWS の更新

## dstogov: typo
- https://github.com/php/php-src/commit/d5955d95878f31c6390529633363fd701c8ec7d0
- ext/opcache のテストの typo を修正

## weltling: Rework magic data once more
- https://github.com/php/php-src/commit/2a062f3c020e8cc53e49fa823021f3e8ce591cfe
- [7.3~]
- ext/fileinfo の libmagic 用データの修正
- PCRE の jit=0 時の性能劣化（言うてそんな大したこともないらしい）の対処かな
- 機能的に何かアカンかったらリバートされるかも
- なんか最近[ちょこちょこ](https://qiita.com/sj-i/items/e452558301e12e26895e#weltling-rework-magic-data)[いじってる](https://qiita.com/sj-i/items/a874944e2f226990ec1b#weltling-rework-magic-data)な

## petk: [ci skip] Update UPGRADING
- https://github.com/php/php-src/commit/35a9ec1b0d528a845fa5ea06bdc3f9f3f5e61dcc
- openssl_x509_verify() の追加について UPGRADING の方にも追記

## dstogov: Split zend_objects_store_put() into hot/cold parts
- https://github.com/php/php-src/commit/9ab3b42888c426befc5f4930d9a209fe679f67b0
- zend_objects_store_put() の cold パス（比較的使われない方）のコードを関数に分離
- コンパイラの最適化を助ける奴

## carusogabriel: Remove missing SKIPIF sections for mbstring tests
- https://github.com/php/php-src/commit/74f26ba816ae1ebaead008538d1b406a30602e39
- ext/mbstring のテストに拡張がロードされているかの SKIPIF セクションが欠けてる奴があったので追加
- コミットコメントが Add でなく Remove となってるのは単に間違いらしい

## carusogabriel: Remove unused variables
- https://github.com/php/php-src/commit/5ae1524dc3fb72d96e50660336541d1f1b0ba9f6
- ext/mbstring の不要な変数を除去
オンライン開発環境

今日はWebブラウザ上でエディターやファイル管理などを使いながら、サーバー上で直接開発できるツールを紹介したいと思います。
これは <h2><a href="https://codeanywhere.com/">codeanywhere</a></h2>

+ Javascript、PHP、HTML、または他の72言語でカスタマイズされた開発環境を簡単にセットアップできます。
+ コンテナまたはリモートサーバ上でbuilt-inターミナルコンソールを使用してコマンドが実行出来る。（SSHを使用）
+ 共有リンクを使用してファイル、フォルダ、プロジェクトをURLだけで共有できます
+ FTP、SFTP、Dropbox、Googleドライブなど・・・どこでもリモートで編集できます。 
+ Git、Bitbucket、GitHub・・・既存のGitリポジトリに簡単に接続できます。
+ リビジョンを使用して確認できます。
+ コンピュータをきれいにし、衝突のない状態で速く走らせます。
+ ブラウザからコードを作成できるだけではなく、iOSやAndroid搭載の携帯電話やタブレットからもコードを作成できます。


クラウドベースの開発には多くの利点があります。
ブラウザだけで他のソフトウェアをインストールする必要はありません。
基本的には、ブラウザのIDE上で仮想マシンを立上てroot〜sshシェルアクセスを使用してからコードを作成することができます。

プロセスを簡単に見てみましょう。
まず、メールアドレス（例：Gmailアカウント）でサインアップする必要があります。
この段階で必要なのは、無料の層だけです。
より多くのスペースを必要とすると、いくつかの異なるサブスクリプションの1つにアップグレードできます。

<a href="http://programmerhelper.net/wp-content/uploads/2018/11/caw_01.png"><img src="http://programmerhelper.net/wp-content/uploads/2018/11/caw_01.png" alt="" width="600" height="300" class="alignnone size-full wp-image-586" /></a>

次に、「コンテナ」を作成する。 
フリーティアでは、一度に1つに制限されます。   
UbuntuまたはCentosのいずれかで操作する、いくつかの異なる事前定義スタックがあります。 
スタックには、Java、C ++、Node、.NET Core、PHPなどのプログラミングが含まれています。

<a href="http://programmerhelper.net/wp-content/uploads/2018/11/caw_02.png"><img src="http://programmerhelper.net/wp-content/uploads/2018/11/caw_02.png" alt="" width="600" height="357" class="alignnone size-full wp-image-589" /></a>

コンテナが作成されたら、今度は完全なsudoアクセス権を持つsshシェルがあります。
C必要なファイルを整理し、パッケージマネージャを実行します。
<a href="http://programmerhelper.net/wp-content/uploads/2018/11/caw_03.png"><img src="http://programmerhelper.net/wp-content/uploads/2018/11/caw_03.png" alt="" width="406" height="257" class="alignnone size-full wp-image-590" /></a>

エディタでは、プロジェクト階層全体にアクセスできます。

<a href="http://programmerhelper.net/wp-content/uploads/2018/11/acw_04.png"><img src="http://programmerhelper.net/wp-content/uploads/2018/11/acw_04.png" alt="" width="200" height="258" class="alignnone size-full wp-image-591" /></a>

最新のIDE機能、コードの完成、コードの折り畳み、構文の色付けなどが含まれています。

Hands-On Video

[![image.png](https://qiita-image-store.s3.amazonaws.com/0/93548/fce8d42d-1464-03e9-6035-ad3f9c3628cb.png)
](https://www.youtube.com/watch?v=gzIoMucgd7E)
homebrewでのoctaveインストールにハマった

# はじめに
[courseraのmachine-learning](https://www.coursera.org/)で、octaveが必要だったのでインストールしようとしたら失敗してどハマリした。
しょうがないのでGUI版をwebからダウンロードして使っていたけど、なんか操作性がおかしかったのでやはりCUI版を入れようと色々やっていたらできました。

調べても解決方法がでてこなかったので、私が色々と試行錯誤した方法をまとめます。同じような状況になった方の参考になればと思います。

## 環境
- macOS: High Sierra ver 10.13.6
- Homebrew: 1.8.2
- Xcode: Version 10.1 (10B61)
- java: version 1.8.0_45

## 初期インストール手順
[参考手順1](https://hgw09.exblog.jp/27277942/)

[参考手順2](http://www.cas.cmc.osaka-u.ac.jp/~miyatake/lectures/expmath30/octave.html)


参考手順1 -> インストール時エラー ->参考手順2 
のようにインストールを行いました。

## エラーメッセージ
```
$ brew install octave
$ octave
dyld: Library not loaded: /usr/local/opt/suite-sparse/lib/libcholmod.3.0.12.dylib
Referenced from: /usr/local/Cellar/octave/4.4.1_2/bin/octave-cli-4.4.1
Reason: image not found
[1]    36541 abort      octave
```
([36541]の数字は環境で変化する。)

## 準備
[こちらの記事](https://qiita.com/takuya71/items/448e2e3e1816cc3967e2)を参考に、homebrew-rmtree をインストール

## 解決方法
```
# octaveの依存パッケージ全削除
$ brew rmtree octave

~　(中略)　~

Uninstalling /usr/local/Cellar/suite-sparse/4.5.5... (145 files, 7.4MB)
suite-sparse 5.3.0 is still installed.
Remove all versions with `brew uninstall --force suite-sparse`.

~ (中略) ~

Error: Refusing to uninstall /usr/local/Cellar/metis/5.1.0
because it is required by suite-sparse, which is currently installed.
You can override this and force removal with:
　　brew uninstall --ignore-dependencies metis

~ (後略) ~

# 削除できなかったパッケージを個別に削除
$ brew uninstall --force suite-sparse
$ brew uninstall --ignore-dependencies metis

# 参考手順1でtapしたリポジトリをuntap
$ brew untap dpo/openblas

# キャッシュ削除
$ rm /Users/kawabatayuma/Library/Caches/Homebrew/downloads/*

# 再インストール
$ brew install octave
```

## まとめ
私の場合はこれで解決できました。
原因としては手順2つをまぜこぜにしたせいでパッケージが衝突したのかもしれません。
全部消して全部入れ直すという単純な解決方法ですが、octaveでエラーが発生した場合に参考にしてみてくださいーーーー
C#でAlexa用のテーブルにデータを追加。やりなおし。

#2018年11月16日追記：
前回もそうですが、今回書いたやり方は「[低レベルAPI](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Programming.LowLevelAPI.html)を利用したテーブル操作」だったことがわかりました。
ということはもちろん「高レベルAPI」があって、それを使うとより簡単に記述できるようです。
すみません。
[高レベルAPIを使ったデータの追加方法](https://qiita.com/shuhey/items/23858cfd39a99727230f)について書きました。

#はじめに
今回はテーブルへのデータの追加方法の説明のやり直しです。
こちらも基本的にはテーブル作成と同じで、リクエストを作って、それを`PutItemAsync`メソッドに渡すことでデータを追加できます。

渡すデータは`ユーザーID（文字列）`と`保存したい値（キーバリューペア）`です。
キーバリューペアは`Dictionary<string, AttributeValue>`で


```csharp
            var tableName = "TestTable";
            var intentRequest = input.Request as IntentRequest;
            var sign = intentRequest.Intent.Slots["StarSign"].Value;

            //ユーザーIDを`intentRequest`から取得
            var userId = input.Session.User.UserId;

            //永続アトリビュートの構築
            var attrs = new AttributeValue();
            //こんな感じで、任意のデータをキーバリューペアの形で追加していく。
            //この「attrs」変数を「attributes」列の値として、あとでリクエストを構築する。
            attrs.M.Add("sign",new AttributeValue{S="ふたご座"});

            //リクエストの構築
            var request = new PutItemRequest
            {
                TableName = tableName,//追加先のテーブル名
                //各カラムの値を指定
                Item = new Dictionary<string, AttributeValue>
                {
                    {"id",new AttributeValue{S= userId} },
                    {"attributes",attrs}
                }
            };

            //テーブルに追加
            var result = client.PutItemAsync(request).Result;
```

`attributes`列に入れるデータを作ります。これはAttributeValueのインスタンスです。
AttributeValueは以下のようなプロパティがあり、これらは格納するデータの種類になります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/245438/fa075e9d-d9fe-702f-129d-29fee94807cd.png)
Alexaスキルではこの「M」プロパティを使います。
このプロパティは`Dictionary<string,AttributeValue>`型なので、キー（文字列）とバリュー（これまたAttributeValue）を入れていきます。
今回はユーザーの発話から取得した星座の情報を保存しますので、「sign」をキーとして、バリューに`new AttributeValue{ S = "ふたご座"}`を入れます。
もし、複数ある場合は同じようにして「M」プロパティに`Add`していきます。

こうして`attributes`列に入れるデータを作ったら、それを使って`PutItemRequest`を作ります。

リクエストができたら`PutItemAsync`メソッドに渡せば、指定したテーブルにデータが追加されます。

AWSコンソールで確認すると以下のように、Node.js版のスキルで作成されたテーブルと同じ形式でデータが追加れているのがわかります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/245438/f25684c2-46a7-d78f-c077-5afdbb9b420f.png)

これで公式トレーニング第4回をC#で書くことができるはずです。

あ、データの取得忘れてた。
Kubernetes関連のシェル自動補完詰め合わせ

# 設定後のイメージ
設定後の使用イメージは以下の通り。TAB入力で候補が表示されます。入力途中の補完もあり。

```sh
$ kubectl ::TABプッシュ::
alpha          attach         completion     create         exec           logs           proxy          set            wait
annotate       auth           config         delete         explain        options        replace        taint
api-resources  autoscale      convert        describe       expose         patch          rollout        top
api-versions   certificate    cordon         drain          get            plugin         run            uncordon
apply          cluster-info   cp             edit           label          port-forward   scale          version
```

# 設定
`bash-completion`が入ってない場合は`apt-get install bash-completion`でインストール。

`.bashrc`に以下を追加。

```sh:.bashrc(追加部分のみ)
if [ -f /etc/bash_completion ]; then
    . /etc/bash_completion
    source <(kubectl completion bash)
    source <(helm completion bash)      # いれてない場合は削除
    source <(skaffold completion bash)  # いれてない場合は削除
fi
```

Dockerの場合は`Dockerfile`に以下を追加

```Dockerfile:Dockerfile(追加部分のみ)
RUN echo "\
if [ -f /etc/bash_completion ] && ! shopt -oq posix; then\n\
    . /etc/bash_completion\n\
    source <(kubectl completion bash)\n\
    source <(helm completion bash)\n\
    source <(skaffold completion bash)\n\
fi\n\
" >> ~/.bashrc # いれてないものは削除
```

あとは`source ~/.bashrc `か、Dockerならコンテナ再起動で動くはず。

# 参考ページ
- [Enabling shell autocompletion - Install and Set Up kubectl](https://kubernetes.io/docs/tasks/tools/install-kubectl/#enabling-shell-autocompletion)
- [helm completion](https://github.com/helm/helm/blob/master/docs/helm/helm_completion.md#helm-completion)
- [_get_comp_words_by_ref command not found](https://github.com/jweslley/rails_completion/issues/2)  
`_get_comp_words_by_ref command not found`みたいなエラーが出たら、`bash-completion`が動いてないか、バージョンが古いかっぽい
Highchartersで世界の平均余命を可視化する

[Kaggle](https://www.kaggle.com/)の[Kernel](https://www.kaggle.com/headsortails/what-we-do-in-the-kernels-a-kaggle-survey-story)を見ていて[Highcharters](https://www.highcharts.com/)を知り、[R for Data Science](https://r4ds.had.co.nz/)を勉強していて[gapminder](https://www.gapminder.org/)を知ったので、両者を組み合わせ可視化してみると面白いのではないかと思い試してみたのでその結果をブログに書きます。

## 準備
以下のpackageを読み込んでおきます。
installしていなかったら適宜install.packages()でinstallしておきます。

```R
library(tidyverse)   # data manipulation and visualization
library(gapminder)  # data
library(countrycode)  # visualization 
library(highcharter)  # visualization
```

## gapminder
まずはgapminderにどのようなデータが格納されているか確認します。詳細に関しては"?gapminder"で確認することもできます。

```R
gapminder
# A tibble: 1,704 x 6
  country     continent  year lifeExp      pop gdpPercap
  <fct>       <fct>     <int>   <dbl>    <int>     <dbl>
1 Afghanistan Asia       1952    28.8  8425333      779.
2 Afghanistan Asia       1957    30.3  9240934      821.
3 Afghanistan Asia       1962    32.0 10267083      853.
4 Afghanistan Asia       1967    34.0 11537966      836.
5 Afghanistan Asia       1972    36.1 13079460      740.
6 Afghanistan Asia       1977    38.4 14880372      786.
7 Afghanistan Asia       1982    39.9 12881816      978.
8 Afghanistan Asia       1987    40.8 13867957      852.
9 Afghanistan Asia       1992    41.7 16317921      649.
10 Afghanistan Asia       1997    41.8 22227415      635.
# ... with 1,694 more rows
```

各国毎の平均余命、人口、一人当たりのGDPを経年で比較することができます。

## 前処理

可視化する際に扱いやすいようにcountryの名称をiso3に変換します。

```R
foo <- gapminder %>% 
  filter(year == 2007) %>% 
  mutate(iso3 = countrycode(country, origin = "country.name", destination = "iso3c"))
```

## Highchartersで可視化する
以下コードで可視化することができます。

```R
highchart() %>%
  hc_add_series_map(worldgeojson, foo, value = 'lifeExp', joinBy = 'iso3') %>%
  hc_title(text = 'Life expectancy in 2007') %>%
  hc_colorAxis(minColor = "#ffdf3f", maxColor = "#5c46ff", min = min(foo$lifeExp), max = max(foo$lifeExp)) %>%
  hc_tooltip(useHTML = TRUE, headerFormat = "", pointFormat = "{point.country}: {point.lifeExp} years")
```

できました！

![Rplot02.png](https://qiita-image-store.s3.amazonaws.com/0/162536/2ac34c75-d3ff-96ab-8cc2-243cf01494bb.png)

ちなみにR上ではマウスオーバーで国の名前とその平均寿命を確認することもできます。
コミュニケーションする際にこういったグラフがあると便利そうですね。

enjoy!

## 参考

- [highcharter package](http://jkunst.com/highcharter/)
- [What We Do in the Kernels - A Kaggle Survey Story
](https://www.kaggle.com/headsortails/what-we-do-in-the-kernels-a-kaggle-survey-story)
- [A Very Extensive GStore Exploratory Analysis
](https://www.kaggle.com/captcalculator/a-very-extensive-gstore-exploratory-analysis#)
- [Gapminder](https://www.gapminder.org/)
- [R for Data Science](https://r4ds.had.co.nz/)
devise+gmailで認証メールを送る設定でエラーが出る対応策

deviseでデフォルトではgmailに送れないのですが、下記の設定で
送れるようになります。

```config/environment/development.rb
config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => "smtp.gmail.com",
    :port => 587,
    :domain => "smtp.gmail.com",
    :user_name => '[myaccount@gmail.com]',
    :password => '[app_password]',
    :enable_starttls_auto => true,
    :authentication => "plain",
    }
```
この場合、試用のために```user_name```、```password```に生の文字列を直接入れてましてエラーがでました。

```
Net::SMTPAuthenticationError in Devise::RegistrationsController#create
534-5.7.14 <https://accounts.google.com/signin/continue?sarp=1&scc=1&plt=AKgn
```
原因は```password```が違うということなんですが、googleのアプリパスワードは間違っていません。

#### 対応策：
環境変数に換えて打ち直すと実行できた。

```
:user_name => Rails.application.secrets.google_address,
:password => Rails.application.secrets.google_password,
```

おそらく生パスワードをgoogle側で拒否しているように思われる（詳しく調べてない、調べられない）。
aspell で間違って追加した単語を削除する

Latex の原稿などをスペルチェックするのに使う aspell. `a` コマンドで辞書になかった単語を辞書に追加することができるけど、うっかりスペルミスした単語を追加してしまった場合にそれを削除する方法。

ホームディレクトリを見てみると

```bash
$ ls -a ~/
.aspell.en.pws
```

というファイルがあるのでエディタで開くと自分で追加した単語が入っているので間違って追加した単語を削除する。おしまい。

今更な事だけどググる力不足のためか検索にぴったりしたページがヒットしなかったので。今時は aspell なんて使わないのかしらん。
GoogleChromeでよく使うURLに爆速でアクセスする方法。ブックマークにエイリアス名設定”的”なことをしてみよう。

# お気に入り一覧からの選択

いや、もう管理無理でしょ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/5638a7cc-6a21-6706-c52c-b91d65f9de66.png)

# アドレスバーからのキーワード検索

似ているURLがあると毎回間違う。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/73591478-164d-c046-db3a-5157e822db86.png)

# ブックマークに検索しやすい名前をつけておく

自分が思い出しやすくて、他のURLなどとかぶらなそうな文字。

3文字の短縮名とか。 ( `mdn` )

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/c9a40f9c-642f-9c35-0cbc-2ee68863dc87.png)

# アドレスバーから「オレオレキーワード」で検索する

爆速でしょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/77ec2d1d-db38-ba6e-3e1d-6fb11ce303c9.png)

# 環境

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/a9a65b49-0332-8819-afb7-77c23fbbaf56.png)

# あわせて読みたい？

- https://www.google.co.jp/search?q=yumainaura+google+chrome+ブックマーク

[まだトラックパッドでChromeを操作しているの？ そろそろキーボードだけで操作しようぜ！！ Chromeを使い倒そう！！ - Qiita](https://qiita.com/dodonki1223/items/205a937c21030d1a511e)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
V-Play Step-by-step guide to your first Android / iOS App | Guide for 2018

To make your own app for Android and iOS may be a tricky adventure. It may all start very confusing. You start thinking about your perfect app and countless how’s appear!

This blog post intends to clear up that cloud in your head.

You will learn the detailed process of what you need to do and how you properly prepare. Get ready and read through how to make an Android app in 2018!

https://v-play.net/blog/how-to-make-an-android-app
Ruby on Railsにおける多対多の関係の実装

現在プログラマとしての転職・起業を視野にRuby/Railsを勉強しています。

今回はRailsでの多対多の関係を実装する際の記録として記事にしました。

<h2>モデル</h2>
今回はサロンとそのサロンの属するカテゴリを実装する、という形です。

サロンの情報をもつSalonモデルとカテゴリの情報を持つCategoryモデル、その2つを繋ぐ中間テーブルとしてClassificationモデルを作成します。

1つのSalonは複数のCategoryを持ちえ、1つのCategoryは複数のSalonを持つ関係とします。

*deviseでSalonの登録ができるようにしている前提で、current_salonを使っています。


<h2>多対多を実装した経緯</h2>
今回のように1つの商品が複数のカテゴリーを持ち、1つのカテゴリーが複数の商品をもつ実装は1対多(has_many)の形でも実装できますが、『Webエンジニアのためのデータベース技術[実践]入門』も参考に、より綺麗な形での実装のためにhas_many throghを用いた多対多で実装。

<h2>モデルの作成</h2>
```ruby:model
$rails g model Salon name:string
$rails g model Category name:string
```
モデルを作成後、中間テーブルとなるモデルを作成します。

```ruby:model
$rails g model Classification salon:references category:references
```
user:referencesというような形にすることでそれぞれのモデルと紐付けさせます。
こうすることでUserProjectモデルは自動的に以下のようにそれぞれのモデルとの紐付けがなされた状態で作成されます。

```ruby:models/classification.rb
class Classification < ApplicationRecord
  belongs_to :salon
  belongs_to :category
end
```
マイグレーションは以下のように自動的に外部キーが設定された形で作成されています。

```ruby:db/migrate/create_classifications.rb
class CreateClassifications < ActiveRecord::Migration[5.2]
  def change
    create_table :classifications do |t|
      t.references :salon, foreign_key: true
      t.references :category, foreign_key: true

      t.timestamps
    end
  end
end
```
Classificationモデルには`belongs_to`が自動で設定されていますが、ProductモデルとCategoryモデルには手動で追加する必要があります。
多対多の形での実装では、中間テーブルとの`has_many`関係の記述と、その中間テーブルを通したCategoryモデルとの紐付けの2つの`has_many through`を記述する必要があります。

```ruby:models/salon.rb
class Salon < ApplicationRecord
  has_many :classifications
  has_many :categories, through: :classifications
end
```
```ruby:models/category.rb
class Category < ApplicationRecord
  has_many :classifications
  has_many :salons, through: :classifications
end
```
モデルの実装は以上。

<h2>Controllerの実装</h2>
中間テーブルにもデータを保存するためのコードを書いていきます。
今回はSalon作成後、そのSalonが属するカテゴリを登録する形で実装します。

```ruby:controllers/categories_controller.rb
class CategorysController < ApplicationController
  def create
    @salon = current_salon
    @category = @salon.categoies.build(category_params)
    if @salon.save
      flash[:success] = "カテゴリーを登録しました"
      redirect_to root_url
    else
      flash[:danger] = "カテゴリーが登録できませんでした"
      redirect_to root_url
    end
  end

  private
  def category_params
    params.require(:category).permit(:name)
  end
end
```

Controllerの実装は以上です。

<h2>Viewsの実装</h2>
カテゴリーは今回は好きなカテゴリーを追加できるような形での実装にし、form_forではtext_fieldを使って登録するようにしました。
また、ログインした後はトップページにユーザーページを表示させ、そこにform_forを設置しています。

```ruby:views/layouts/home.html.erb
<%= form_for(current_salon.categories.build) do |f| %>
  <%= f.label :"カテゴリー登録" %>
  <%= f.text_field :name, placeholder: "Category Name" %>
  <%= f.submit "Registrate" %>
<% end %>
```

特定のSalonのカテゴリー名を全て表示させるような場合には以下のように記述します。

```ruby:views/layouts/home.html.erb
<% @salon.categoies.each do |category| %>
  <%= category.name %>
<% end %>
```

とりあえずはこのくらいで。
IRKitの近くでiPhoneを使うときにLEDが点滅しないようにする。

# どういうこと？
iPhoneのFaceIDは顔認識に赤外線を利用している[^1]ので、IRKitの近くで使うとiPhoneから照射された赤外線を受信してIRKit本体のLEDが点滅します。

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ベッドでFace ID使うたびに枕元近くに置いているIRKitが反応するのどうしようかな</p>&mdash; ARBALEST (@ARBALEST000) <a href="https://twitter.com/ARBALEST000/status/1062752910105292801?ref_src=twsrc%5Etfw">November 14, 2018</a></blockquote>

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">え、なんの因果が？</p>&mdash; 𝑴𝒐𝒚𝒖𝒓𝒖 𝑨𝒊𝒛𝒂𝒘𝒂 (@MoyuruAizawa) <a href="https://twitter.com/MoyuruAizawa/status/1062753296941600769?ref_src=twsrc%5Etfw">November 14, 2018</a></blockquote>

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">Face IDというかTrue depth cameraの赤外線センサーの光が反射して多分IRKitまで届いている</p>&mdash; ARBALEST (@ARBALEST000) <a href="https://twitter.com/ARBALEST000/status/1062753640765485056?ref_src=twsrc%5Etfw">November 14, 2018</a></blockquote>

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">あーなるほど。<br>試してみたら本当に反応したw</p>&mdash; 𝑴𝒐𝒚𝒖𝒓𝒖 𝑨𝒊𝒛𝒂𝒘𝒂 (@MoyuruAizawa) <a href="https://twitter.com/MoyuruAizawa/status/1062754105360211968?ref_src=twsrc%5Etfw">November 14, 2018</a></blockquote>

いちいち光るのが鬱陶しいので消してしまいましょう。

# 手順
## 用意するもの
* [IRKitソースコード](https://github.com/irkit/device)
    * 最新で良いです。
* Arduino IDE
    * 最新で良いです。

## 修正箇所
Arduino IDEで`irkit.ino`を開き、`on_ir_receive`を下記の通り修正してください。

``` cpp:irkit.ino
void on_ir_receive() {
    MAINLOG_PRINTLN("i<");
#ifdef IRLOG
    IR_dump();
#endif
    if (IR_packedlength() > 0) {
        if (IR_looks_like_noise()) {
            IRLOG_PRINTLN("!E31");
            return;
        }
        int8_t cid = irkit_httpclient_post_messages();
        if (cid >= 0) {
            // color.setLedColor( 0, 0, 1, true, 1 ); // received: blue blink for 1sec            
            color.setLedColor( 0, 0, 0, true, 1 ); // 受信時にLEDが点灯しないようにする。
        }
    }
}
```

## ファームウェア書き込み、ほか
[こちらの記事](https://www.foto2strada.com/entry/2017/05/09/002558)を参考にしてください。

[^1]: [GIZMODEの記事](https://www.gizmodo.jp/2017/11/face-id-night-vision.html)
APIによる自動化

# きっかけ
とあるシステムの開発/検証業務について、システムを構成するアプリケーションが提供しているAPIを用いた自動化を検討しています。そんな中、1日に4人から「APIって何？」と質問されました。頑張って説明してみましたが、半分も伝えられなかった気がします。

自動化を推進していくチームのメンバーとして、同じチームのメンバーをはじめ、上司や他チームのメンバーにわかりやすく説明できないこの現状は非常にマズいです。

つい最近まで、APIやオペレーションの自動化について、勉強させてもらう機会を頂いていたので、「APIじゃなくてもいいんじゃないの？」「APIの良さがイマイチわからない」と言われないように、まとめていこうと思います。

# APIとは
APIは、Application Programming Interfaceの略称です。世の中には、いろいろなAPIが溢れています。

* [2018 公開されているAPI一覧まとめ](https://matome.naver.jp/odai/2144230147636045901)
* [海外・国内の便利なAPI一覧] (http://smsurf.app-rox.com/api/)

# RESTful APIとは
自分がAPIという言葉を使うとき、RESTful APIを指していることがほとんどです。
[IT用語辞典 e-Words](http://e-words.jp/w/RESTful_API.html)では、下記の通り記載されています。

> RESTful APIとは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたもの。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいる。

RESTは設計原則であり、それに準拠したものをREST(ful) APIと呼んでいるわけです。

* [0からREST APIについて調べてみた](https://qiita.com/masato44gm/items/dffb8281536ad321fb08)
* [RESTful APIとは何なのか
](https://qiita.com/NagaokaKenichi/items/0647c30ef596cedf4bf2)
* [SLideShare RESTful API 入門]
(https://www.slideshare.net/keisuke69/restful-api-56227772)

# APIのメリット
CLIやGUIに比べて、APIは自動化の再現性があると考えています。CLIやGUIの使い方について、Aというサービスを習熟したところで、扱うサービスがBに変われば1から習熟する必要があります。

それに対して、RESTに準拠しているAPIについて、RESTを理解していれば、50ぐらいから習熟できると考えています。

50と言っている理由は2点あります。

* APIでやりたい操作(例えばVM構築など)に対してどんなパラメータを指定するか調査する必要があるためです。これは、GUI/CLIと同様どれだけそのインタフェースの利用方法に詳しくなったとしても避けることはできません。

* OpenStackやAWSのAPIはあるリソースに対するCRUDが(恐らく)全て用意されていますが、あるサービスではReadのみAPIが用意されていたり、実際はRESTのようなものだったりとリファレンスに「API」と書かれていいても実際に叩いてみるまでわかりません。もちろん「RESTのようなものを読み解く」ことが、「GUI/CLIを1から習熟する」ことより遥かに楽だと考えています。

### 50くらいから習熟できる例(書きかけ)
Facebookでは、自分のアカウント情報は、__「GET /me」__で取得できます。
[FacebookのAPI](https://techblog.zozo.com/entry/facebook_graph_api)

対して、Twitterでは、自分のアカウント情報は、__「GET /account/settings」__で取得できます。
[TwitterのAPI](https://syncer.jp/Web/API/Twitter/REST_API/#section-7)

もし仮にFacebookで「ユーザ名がすでに資料されていた場合は、後ろに乱数をつけて再度登録を試みる」というロジックをつくこんだ場合、エンドポイントとパラメータを変更すれば、恐らくTwitterでも利用できるはずです。

# memo
誤りなどあれば、コメントいただけると幸いです。随時修正していますので、あしからず。
Nuxt.jsでCordovaが動かなくて諦めた話（代替案アリ）

# はじめに
Nuxt.jsでCordovaが動かなくて諦めた話です。
動かないというのは具体的には`cordova run android`すると一応アプリは立ち上がるけれど、画面が真っ白のままで何も表示されない状態となります。
（`cordova run browser`はちゃんと動きます。）

ただ、以下のサイトでは動かせているようなので頑張ればできるのかもしれないです。
[Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法](https://www.webfacts.jp/nuxt-js-web-cordova-build)

# Nuxt.jsでCordovaが動かない理由
Cordovaを動かすためには、config/index.jsを以下の通り修正する必要があります。（もちろん他にも修正は必要ですが）
修正前：`assetsPublicPath: '',`
修正後：`assetsPublicPath: '/',`
※理由については[vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話](https://qiita.com/tiwu_official/items/43dc554ec43dd951812a)の「vue-cliでリリース」の部分に詳しい説明があります。

config/index.jsはNuxt.jsだとnuxt.config.jsとなりますが、nuxt.config.jsではassetsPublicPathが設定できないっぽい（設定しても効かない）ので、結局Nuxt.jsでCordovaを動かすのは無理なんじゃないかと思ってます。
ちなみにNuxtコミュニティに[本件に関するissue](https://cmty.app/nuxt/nuxt.js/issues/c7417)を見つけましたが回答がありませんでした。（やはり無理なのか。。？

# 代替案
Nuxt.jsは諦めて、[こちらのVue-cliテンプレート](https://github.com/OnsenUI/vue-cordova-webpack)を利用してテンプレートプロジェクトを作成し、そっちにソースを移管してCordovaを動かしました。
あとは[Quasar](https://quasar-framework.org)というフレームワークがあり、こちらでもCordovaを動かすことができました。
ちなみにQuasarではハイブリッドアプリだけでなく、SPA, PWA, SSRも対応してるらしいです。
（あれ、Nuxt.jsの上位互換かな。。？

もしくはネイティブアプリでも良いという方は[Weex](https://alibaba.github.io/weex-ui/#/?id=weex-ui)だったり[NativeScript-vue](https://nativescript-vue.org/)だったりも良いかもしれないです。

# おわりに
[Quasar](https://quasar-framework.org)がすごく気になりましたが、まだ情報が少なかったのでエラーになったら詰むと思って無難にvue-cliを選んでしまいました。
（あと独自コンポーネントが多そうだったのでブラックボックスになりすぎるのも微妙だなあという思いもあり。。

また、今回は要件の関係でハイブリッドアプリを選択しましたが、これからはPWAが盛り上がってくるはずなので基本的にはネイティブアプリ or PWA という選択肢になるんじゃないかなあと思います。
iosでもバックグラウンドプッシュ通知ができれば個人的にはPWA一択なのですが、、
それでもネイティブアプリも書けるとカッコいいのでいつかは勉強してみたいですね。
ではでは。
React Hooks、useStateの更新関数引数には関数を

最近 Hooks を触って思ったことを綴ります。よく見る useState の increment 例です。

```javascript
const [count, setCount] = useState(0)
const handleClick = () => {
  setCount(count + 1)
}
return (
  <div className={props.className}>
   <p>count: {count}</p>
   <button onClick={handleClick}>+1</button>
  </div>
)
```
これはアンチパターンで、`handleClick` は render毎に再定義されます。この再定義を skip するため、`useCallback` による関数memoizeを行います。

# アンチパターン集

```javascript
// memoize input array の指定がないため、上記と差がない
const handleClick = useCallback(() => {
  setCount(count + 1)
})
```

```javascript
// memoize されているが、状態変化とともに再定義される
const handleClick = useCallback(() => {
  setCount(count + 1)
},[count])
```

```javascript
// ２回目以降のレンダリング時再定義が skip されるが
// 初期状態を参照しているため「1」にしかならない。
const handleClick = useCallback(() => {
  setCount(count + 1)
},[])
```

# 現状良さそうな方法

状態更新関数の引数に与えるものは、プリミティブに限りません。関数を与えることで、prev state を参照出来ます。これにより、初期レンダリング時のみに handleClick関数定義を抑止し、正しく動かすことが出来ます。

```javascript
// ２回目以降のレンダリング時の再定義が skip され、正しく動く
const handleClick = useCallback(() => {
  setCount(prev => prev + 1)
},[])
```
useState で生成された関数は、同時に生成された状態を参照しない方が良さそう、という話でした。
DNSラウンドロビンで負荷分散しているDB（Aurora等）にコネクションプールを使って接続すると設定次第で負荷分散ができないっていう話と解決法

# 

## 環境

RDSのクラスタ構成（Aurora＠MySQL5.7使用。全部、db.t2.small）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/299475/5dc6c751-b860-71c5-58c0-ef8035b4b331.png)

アプリ構成

```
* Spring-boot:2.1.0
* HikariCP:3.2.0
```

※JVMがDNSキャッシュしないようにしておくこと

## 実験内容

hikariCPのmaxLifetimeを変えながら、コネクションプール使用環境下で継続的にDBアクセスがある場合に負荷分散が行われるかどうかを確認する。

* コネクションプール数は最大10とする。
* abコマンドを 4リクエスト、4同時接続でバックグラウンドで実行する。
* ↑のabコマンドをwhileでループさせて、3秒に1回実行する、というのをしばらくの間継続して実行し続ける。
* リクエスト1回で、DBへselectを実行し、数秒（少なくともリクエストが滞留する程度には遅い）でselectの結果が返ってくるようにしてある。

※リクエスト毎に読み込みエンドポイントに対して、↓の状態のテーブルに、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/299475/6930aa4f-ca72-a79e-424b-e43ceca8f887.png)

```SQL
SELECT * FROM hoge a, hoge b, hoge c, hoge d, hoge e, hoge f, hoge g, hoge h where a.pk != #{id} order by a.pk desc limit 1
```
を投げるようになっている。
※#{id} の部分にはランダムで数値が入るようにして、結果がキャッシュされないようにする

どこのIPアドレスに接続しているかはnetstatで常時監視

```
while :; do netstat -ano | grep ":3306 "; sleep 1; clear; done
```

## 実験結果

動画とれれば面白いのですがそういうの無いので、結果のテキストだけ。。

### maxlifetimeを30"分"にして実行する（hikariCPのデフォルト値）

最初に接続したIPアドレスから接続先が変わりません。
※レプリカ3台にしていますが、最初に接続したのが2台だった場合、残りの1台には30分間に接続しません。

### maxlifetimeを30"秒"にして実行する（hikariCPの最小値）

30秒毎に接続しているIPアドレスが変化しているのが確認できます。
※Spring-bootのログからもmaxlifetimeに引っかかり再接続しにいくログが見れます
※30秒間は同じところに繋ぎに行くのが良いのかどうかはまた別の話。。

## 結論

DNSラウンドロビンで負荷分散をしているシステムに対して、コネクションプールを張り続けると負荷分散ができない。
※厳密にいうとできていない訳ではないけど、、
ので、短いスパンでDB接続を一旦張りなおす設定をいれましょう。
※maxlifetimeでなくても、規定秒idleで切断する(idleTimeout)とか。idleしないと切れないけど。。

## 参考

* [MySQLへコネクションプール有り無しでの速度差検証](https://qiita.com/k_hoso/items/6839e217672a60803637) ※接続コストが。。っていう人向け（多分、MySQL系限定）
* [Aurora、クラスタ構成でホスト名にアクセスした時、ping 打つ毎にIPアドレスが変わるのを確認する](https://qiita.com/k_hoso/items/0ab0ae7e19e019685c73)
C#でAlexa用のテーブルをDynamoDBに作成。やりなおし。

#はじめに
[この記事](https://qiita.com/shuhey/items/cb73812986614af629b3)でC#でDynamoDBにテーブルを作成する方法を書きました。
これは、AlexaスキルをC#で作成する際に、セッションをまたいでデータを保存するために必要になるからです。[公式トレーニング第4回　データの保存](https://developer.amazon.com/ja/blogs/alexa/post/4144a8ea-7549-4c44-a4bd-e94cb93807ea/chapter4-jp)にある永続アトリビュートというのがそれですね。

その後、調べていくうちにいろいろわかっていなかったことがわかったので、改めて整理してみました。
今回はシンプルにAlexaスキルに必要な構成だけにしぼって書きます。

#テーブル作成　ステップ　バイ　ステップ
テーブル作成のコード的な手順を一つずつ説明していきたいと思います。


##AmazonDynamoDBClientのインスタンス化
まずはこれがなければ始まりません。
このクラスがDynamoDBにテーブルを作成したり、テーブルにデータを追加したりする役割を一手に担います。

```csharp
AmazonDynamoDBClient client = new AmazonDynamoDBClient();//主役。これを介してDynamoDBにアクセスする
```

##テーブル作成リクエストの作成
テーブル作成の基本的な流れはざっくりこんな感じです。

1. リクエストの作成
2. テーブル作成リクエストの送信

##リクエストの作成
`CreateTableRequest`クラスを使ってテーブル作成リクエストを構成します。
Alexaスキルで使用するテーブルは、初期状態では「id」列（プライマリキー）だけを持つ構造で、データ追加時に「id」に加えて「attributes」列も追加されるようになっています。

```csharp
            //リクエストを構築
            var request = new CreateTableRequest
            {
                //テーブルの列情報を設定
                //「ThisIsId」と「ThisIsSomthing」という2つの列を持つテーブルを作る
                AttributeDefinitions = new List<AttributeDefinition>()
                {
                    new AttributeDefinition
                    {
                        AttributeName = "id",//カラム名
                        AttributeType = "S"//データのタイプ：N：数値、S：文字列、他にもいくつか。
                    },
                },
                KeySchema = new List<KeySchemaElement>
                {
                    new KeySchemaElement
                    {
                        AttributeName = "id",
                        KeyType = KeyType.HASH //Partition key
                    },
                },
                ProvisionedThroughput = new ProvisionedThroughput
                {
                    ReadCapacityUnits = 5,
                    WriteCapacityUnits = 5
                },
                //テーブル名
                TableName = tableName
            };
```

###AttributeDefinitions
ここでは列の名前やデータのタイプといった基本的な構造を指定します。
`AttributeDefinitions`プロパティに必要な列情報（`AttributeDefinition`）を入れていきます。`AttributeDefinition`は`AttributeName`と`AttributeType`という2つのプロパティを持っていて、それぞれ列名とその列のデータの種類を指定します。
`AttributeType`の指定方法ですが、いくつかあるタイプの中から1つを選び、それを文字列で指定します。
選択できるタイプは以下のとおりです。

- N：数値型
- S：文字列型
- BOOL：ブール型、０または１
- B：バイナリ型
- S：文字列型。Dateの値はISO-8601形式の文字列で格納される。
- SS：文字列セット型
- NS：数値セット型
- BS：バイナリセット型
- M：任意の型

ですので、上の例では「id」列のデータの種類に「N」、つまり数値データを指定しています。

###KeySchema
ここではプライマリキーの指定を行います。「id」列をプライマリキーにするので、`KeyType`に`KeyType.HASH`を指定します。

###ProvisionedThroughput
ここはとりあえずNode.js版と同じ設定にしておきます。
[公式のここ](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/Limits.html#default-limits-capacity-units-provisioned-throughput)に説明がありますが、なんとなくはわかります。スループットといっているので読み書きの性能に関わるとは思います。

##テーブルの作成
この`CreateTableRequest`を`CreateTableAsync`メソッドに渡すと、テーブルが作成されます。

```csharp
            var result = client.CreateTableAsync(request).Result;
```



#おわりに
シンプルに、DynamoDBクライアントをインスタンス化して、リクエストを作って、CreateTableAsyncメソッドに渡す、ことでAlexaスキル用のテーブルを作成できます。
実際に使う場合は、[以前の記事](https://qiita.com/shuhey/items/cb73812986614af629b3)のようにメソッドに切り出したりして、使いやすいようにしてください。

次は、データの追加のやりなおしです。
Eclipse4.8導入メモ(Plugin編)

#はじめに
[前記事](https://qiita.com/Kabenonakaniiru/items/612b9ed47e305d8670cb)で構築した環境(Eclipse4.8)にある程度プラグインを入れたときのメモとなります。

#導入するもの
主なもののみ記載
・マーケーットプレース・クライアント
・WTP(※ある程度選別はする)
・EclEmma Javaコード・カバレッジ
・Gitプラグイン
・プロパティ―・エディター
・Check Style
・Spot Bugs

#導入方法
[ヘルプ]>[新規ソフトウェアのインストール]より、インストールダイアログを起動。
⇒作業対象において、「Photon」を選択し、以下を選択⇒インストール。
[一般用ツール]
・Eclipse 自動エラー報告
・マーケーットプレース・クライアント
[テスト]
・EclEmma Javaコード・カバレッジ
※導入時に
・ターゲット環境へ適用可能なソフトウェアのみ表示
・すでにインストールされている項目を隠す
にチェック済み。

[Web, XML, JavaEE, およびOSGiエンタープライズ開発]
より、今後使いそうなもののみチェックを入れてインストール。
![選択したプラグイン1.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/e8c3d7a0-11fc-9874-ee6d-c6a159ce4d23.png)
![選択したプラグイン2.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/ba9b9b64-c657-3638-7e20-40daae3ba7b9.png)
![選択したプラグイン3.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/dd7160dd-a9ff-b27e-7e27-008bd8d25e0d.png)

とりあえず、私は画像の通りに……。
・Axis2、RAPは使わないと思うので入れない。
・インキュベーションとついているものは入れない。
・PHPも使わないのでいれない。

今のところこんな方針。

[コラボレーション]
・Git integration for Eclipse(3つすべて入れた)

[プログラミング言語]
・Java 開発用コード・リコメンダー
・Javadoc ヘルプフィーチャー

別にdropinsからでもいいけど、特に↓の方法のデメリットが思いつかなかったので、問題が起きるまではこの方法で。
[ヘルプ>Eclipse マーケットプレイス]
以下をインストール。
・プロパティ―・エディター(6.0.5)
・Check Style(8.11.0)
・Spot Bugs(3.15)

![プロパティエディタ.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/a9174d50-ecae-6d5b-353b-00a51fd8c850.png)

![Check Style.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/91daa250-d279-afcc-f7d4-1bf814875f88.png)

![SpotBugs.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/2863cbff-04c0-aafd-5445-3fec00e3416b.png)

#導入時に発生した現象
![エラー.PNG](https://qiita-image-store.s3.amazonaws.com/0/253946/09a9c6f7-f847-0e09-d616-01b925288e96.png)

Git integration for Eclipse(EGit)インストール後、なんかでましたねｪ……。

#Eclipseアカウントについて
[ヘルプ>Eclipseユーザストレージ>マイアカウントを開く]よりEclipseアカウントを作成可能。
[こんな感じ](https://marketplace.eclipse.org/user/kyogiri/favorites)でインストール対象のプラグインを管理することができる。
(マーケットプレースクライアント上で、お気に入りに追加可能)
※アカウント作成時に一番右のタブが赤くなっているが、多分無視していい。
[これ参照](https://twitter.com/kabenonakaniiru/status/1028637604902658048)

#最後に
・思ったよりもEclipseアカウントが便利です。(オフラインしか使えない場合はdropinsで我慢)
・Eclipse4.9導入時にこの記事に追記するつもりは一応あります。
・本当に導入「メモ」なんだ。すまないです。

以　上。
react + flux入門におけるなんかよくわかんねえな！ってなったまとめ

## TL;DR

フロントエンドが苦手でQiitaや公式ドキュメントで「Fluxってこういうものだよ！」という説明文を読んでも理解が上滑りしてしまっていた。
いまいち理解できていないまま数ヶ月サーバーサイドをガッツリ触って久しぶりにフロントエンドで悩み苦しんでいたら少し読み解けたのでどこで詰まっていたのか整理しがてら恥ずかしい話しシリーズ2つ目として書き出す。

理解があってるかどうかは保証しない。

## 以前参考に読ませてもらったエントリ

[React & Flux入門](https://qiita.com/sl2/items/ff7a07c00f545d245a5c)

読んだ当初の理解としては↓な感じ。

- Fluxというのがデータの一方通行なアーキテクチャ、あるいは設計になっていること。
- Container is どこ（何）？
- Storeはなんかデータに関する管理を担う層っぽいけどじゃあStateってなんやねん？
- `state`と`props`があるのはわかるけどStoreとかで操作してるのは`state`なのになんでいきなりViewで`props`になってんの？？？

## 理解できたことその1: StateとStoreの関係性

きっかけは些細なことだったのだけどいままで一番理解に苦しむというか意味わかんねえなーと思っていたことの1つが`Store`と`State`の関係性。

自分のなかで腑に落ちたのは`State`がDBにおける行(レコード)で`Store`がテーブルという風に理解したらあーなるほど？みたいな気持ちになってデータの流れがようやく繋がるようになった。

よくわからないなーと思ったときは「何かに例えてみるとよい」みたいなことをエンジニア生産術の本にも書いてあった気がするが確かに例えることで自分のなかのイメージとコードや設計などがより明確にイメージできるようになった。
なんかよくわからんがわかったような気になってると思ったときは自分の知っている別のなにかに置き換えて説明して意味が通じるか確認するのがよいのかもしれない。

## 理解できたことその2: `View`の`props`は実は`Container.state`だった

ちゃんとコードに答えが書いてました。
コードはよく読もうな！という他ない。

```javascript
class FoolContainer extends Component {
  render() {
    return FoolView(this.state)
  }
}
```

```javascript
function FoolView(props) {
  ...
}
```

……言い訳すると`state`と`props`はReactやFluxが扱う黒魔術的な存在が管理していてアンタッチャブルなものだという認識をしていた。

なのでよくわからんがReactとかしか触れないグローバル領域のようなものがあってそこから必要になったときに渡されているというイメージを持っていた。
実際には愚直にバケツリレーしてデータそのものを受け渡してただけだったんだけど何故か天から謎のデータが降り注ぐイメージを持ってた。


ただまだいまいちわかってないのが同僚に「何故Viewに渡すときに`state`から`props`に名称が変わっているのか？」と質問したところ「慣習的にそういうものとして扱われている」という解答を得たのだけどそこがちょっとよくわからなかった。

ただじゃあそれをググってみようと思ってもどうググればいいのかという検討がつかなかったので一旦諦めた。

## 理解できたことその3: `State`が変更されない問題

[ReduxのStateが変更されたのに再レンダリングされない問題](https://qiita.com/yasuhiro-yamada/items/aebda0dff79a70eb71d7)

そのままズバリなまとめを書いていてくださった方がいたので恐らくReactに入門した人が通りやすい道なのかもしれない。

```javascript
state = { name: 'hoge' }
```

ではなく…

```javascript
state = [{name: 'hoge'},{name: 'fuga'}]
```

みたいなときに…

```javascript
payload.names = [{name: 'hoge-ex'},{name: 'fuga-ex'}]
state = payload.names
```

しようとしたけどうまくいかなかった。みたいな話し。

ちょっと手元に検証可能なコードがないのでだいぶ記憶任せなコードになっているのでそもそも前提があってない可能性があるがネストが深いところのデータの更新をしたはずなのにViewが再描画されない。
値が更新されていない！！！みたいな現象があって盛大にハマったということだけ覚えているのでまあ同じような理由といえる。

## まとめ&反省：

わかってしまったいまとなっては何故そこで躓いた？という気持ちが強いが半端に知識があったり、恐らくなにかを読み飛ばしたかわかったつもりになってスルーしていたのだろうと思われる。

雰囲気で理解した気持ちになるの本当によくないし、完全に悪なのでやめろということです。

ちゃんとチュートリアルみたいなのからやらないからそうなったんだろ！とかいろいろ原因はあるけども苦手意識と分かる人に任せっきりでちゃんと最初から入門しなかったのが多分一番よくなかった。

冒頭で紹介しているQiitaのエントリ、今読み直したら最初に読んだときと全然理解度が違ったのでもう一度しっかり読み直そうと思います。
~/.ssh/configからSSH先のホストをfzfで選んで接続する

fzfを活用してTerminalの作業効率を高める
https://qiita.com/kamykn/items/aa9920f07487559c0c7e

に引き続き、またまたfzfネタです:laughing:


## インストール
fzfについては上記の記事でも詳しく書いていますが、あいまい検索と選択的インターフェースを融合させたCLIツールです。
fzfはMacならbrewでもinstallできます。

```
brew install fzf
```

# SSHのホスト先をfzfで選ぶには
仕事で入るサーバーが増えてくると毎回コマンド履歴を探したり、`~/.ssh/config`を見に行って探したりなど面倒ですよね。

そこでfzfの力で、その場で`~/.ssh/config`の内容からssh先を選んでそのまま接続してみます。

```bash
fssh() {
    local sshLoginHost
    sshLoginHost=`cat ~/.ssh/config | grep -i ^host | awk '{print $2}' | fzf`

    if [ "$sshLoginHost" = "" ]; then
        # ex) Ctrl-C.
        return 1
    fi

    ssh ${sshLoginHost}
}
```

これを.bashrcや.zshrcに書きます。

## 結果
`fssh`というコマンドで`~/.ssh/config`の内容からHostの項目を選んでSSHできるようになります。

![2018-11-16 00-06-34.2018-11-16 00_08_36.gif](https://qiita-image-store.s3.amazonaws.com/0/73446/c763dd47-d87c-719a-d5f6-669059824a77.gif)

サンプルなのでgifには実際にSSH先に入ってる様子までは含めていませんが(手元に適当な環境がなく...)、最終的に `ssh [Hostの設定名]`というコマンドが実行され、SSHすることが可能になります。

### おまけ
SSHするときにオペミス防止の為にTerminal.appの背景色を変える必要があったので、このコマンドでついでに変えてみます。(MacのTerminal.app想定)
下記を、先程の記述の中のssh コマンドの直前に書き加えます。

```bash
## Terminal.appのprofile変更
osascript -e 'tell application "Terminal" to set current settings of first window to settings set "green"'
```

`"green"`の箇所はお使いのMacのTerminal.appのプロファイルで使っている名前を当てはめてください。
↓↓↓ (こんなやつ)

<img width="279" alt="スクリーンショット 2018-11-16 0.31.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/73446/58bfc4cb-65de-301c-27a9-2408fa84fa2f.png">

これで、背景色がSSHついでに緑色に変更することができました:relaxed:
(なお、iTermではこの記述では効かないのでご注意を。)

(↓↓↓またしても接続先に入るところが含まれていないgif)
![2018-11-16 00-41-38.2018-11-16 00_42_03.gif](https://qiita-image-store.s3.amazonaws.com/0/73446/bad67dae-e552-f470-b3a8-e3e14cdc7546.gif)