OmniAICreator/Qiita-1.07M huggingface dataset:
React小ネタ集 - stateでコンポーネントを複製, forEachで繰り返しrenderする

#趣旨
同じようなcomponentをn個レンダリングしたい & 個々の細部はちょっとだけ変えたいという時に使える小ネタ。開発中に使えると思ったことをメモした。

#作ったもの
https://codesandbox.io/s/qkvv35mn26
labelとテキストボックスがひとまとまりになった子コンポーネントを生成して、「挨拶する」ボタンをクリックすると個々の入力内容をアラートで表示するだけのシンプルなやつ。React-Bootstrapで簡単にスタイル付けもしている。

#TL;DR
- state.languageに新たな要素を追加すれば勝手にrenderされるコンポーネントが増える。
- 合わせてshowFieldとinputTextにも要素を追加すれば何ヶ国語でも挨拶できるよ
- codesandbox上で自由に試して見てください

#コンポーネントの構造
- App (親コンポーネント)
- MessageBox (子コンポーネント)

#stateで制御しているもの
### showField (Array)
- 各コンポーネントのうち、テキストエリアの表示状態を管理。
- 青文字のリンクをクリックするとハンドラが表示状態をトグルしてくれる。
 
### language (Array)
- [言語コード, 言語名]が組みになった要素を格納した配列。

### inputText (Object)
- 各テキストエリアの入力内容

#各メソッドについて
### showText
```JavaScript:App.js
showText(e, langCode) {
    let greeting = e.target.value;
    if (this.state.inputText !== "") {
      this.setState({
        inputText: Object.assign({}, this.state.inputText, {
          [langCode]: greeting
        }),
      })
    }
  }
```
テキストエリアの入力内容に変更が起こると発火する。
入力したテキストをstateに格納してそのまま反映しているが、`this.state.inputText`は各言語コードがキーとなっているのでそれを上書きしないよう、引数でイベントと言語コードを同時に受け取っている。`Object.assign`の第二引数では既存のstateを受け取り、各言語コードをキーとして入力内容と合成し再びオブジェクトに結合してsetStateしている。

Object.assign()はReduxでもよく使われるが、素のReactでもこういった場面で使える。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

ちなみに普段通りにsetStateしようとすると一番新たに入力した言語のテキストしかstateにセットされなくなるので注意。

```JavaScript
this.setState({inputText: {[langCode]: greeting}}),
```

### handleTextField
```JavaScript:App.js
handleTextField(e, number) {
    e.preventDefault();
    let showFieldState = this.state.showField;
    showFieldState[number] = !this.state.showField[number];
    this.setState({ showField: showFieldState });
  }
```
「○○語で挨拶しましょう」というリンクをクリックすると発火する。
各コンポーネントは```this.state.showField```の配列で表示状態を管理しているので、n番目のコンポーネントの状態だけをトグルするように記述している。

### render
```JavaScript:App.js
render() {
    const boxes = []
    this.state.language.forEach((value, index) => {
      boxes.push(<MessageBox
                  props= { this.state }
                  showText= { this.showText }
                  handler= { this.handleTextField }
                  key= { index }
                  showNum= { index } />)
    })
```
Array.forEach()を使えばlanguageに入っている要素数だけコンポーネントをrenderできる。
ただ、return()句のなかでやろうとすると即時関数でラップしたりする必要があり、色々と面倒なので、returnの前で空配列を定義 -> forEachでコンポーネントを詰め詰め　という手順でやっておいた方がラク。
keyに配列の添字を渡してやらないと各コンポーネントを識別できなくなりWarningが出るので注意。
showNumにも同じく配列の添字を渡してやることでthis.state.languageの内容を子コンポーネント側で読み取って反映させられる。
JavaScript:多重配列をflatにする関数

[ディープコピー](https://qiita.com/ttatsf/items/f790cd867deac487f43b)と同様に考えるとflattenは：

+ 初期値[]のアキュムレータに配列の要素を順に連結していく(reduce)。
+ もし配列の要素が配列なら、要素をさらにflatにしてから連結(concat)。
+ そうでないなら要素をそのまま連結。

アロー関数で書くと：


```JavaScript:
const flatten =
  xs => xs.reduce(
      (acc, e) => Array.isArray( e ) ? acc.concat( flatten( e ) )
                                     : acc.concat( e )
      ,[]
    )
```

```Javascript:
flatten([ 1, [ 2, 3 ], [ [ 4, 5 ], 6 ] ])
=> [ 1, 2, 3, 4, 5, 6 ]
```

参照：
[Greedy flatten function for Array in JavaScript](https://qiita.com/noromanba/items/9ab146b26b09160b683b)
function式で書かれている。中味は同じ。

あるいは[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)を使って


```Javascript:
const flatten =
  xs => xs.reduce(
      (acc, e) => Array.isArray( e ) ? [...acc, ...flatten( e )]
                                     : [...acc, e ]
      ,[]
    )

```
こっちの方が直観的かも。見慣れれば。
DockerでWordPress環境を構築する

以下のサイトに書かれている通り
https://docs.docker.com/compose/wordpress/#define-the-project

WordPressが動作するコンテナとデータを管理するMySQLが動作するコンテナの2つから構成されるDockerコンテナとして構築する。

## 作業用ディレクトリの準備

```
mkdir WordPress
cd WordPress
```

## Docker Composeの設定

以下の内容で `docker-compose.yml` というファイルを作る。

```yaml
version: '3.3'

services:
   db:
     image: mysql:5.7
     volumes:
       - dbdata:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    dbdata:
```

## コンテナ起動

```
$ docker-compose up -d
```

ブラウザで`localhost:8000`にアクセスするとWordPressが起動していることが確認できる
。
<img width="924" alt="スクリーンショット 2018-03-12 23.52.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/82034/93b89d11-c5b2-a26c-9da8-f7c6a6c2ae95.png">



## コンテナ停止
```
$ docker-compose down
```

これだとデータベースのデータ領域が残存する。
データ領域も削除する場合は以下のコマンドを実行する。
```
$ docker-compose down --volumes
```

以上。
成功するまでの回数の期待値その③

```math
\begin{align}
&~~~あるお菓子の箱に，おまけとして指人形が必ず1つ入っています．\\
&指人形には10種類があり，どれも同じ確率で入っています．\\
&~~~その10種類がそろうまでそのお菓子を買い続けるとします．\\
&~~~お菓子を買う回数の個数の期待値は？\\
\\
&~~~1種類目は1箱目で入手．\\
&~~~2箱目以降で2種類目を入手する確率はつねに\frac{9}{10}．ゆえに2種類目\\
&を入手するまでに買う箱数の期待値は\frac{10}{9}（その①参照）．\\
&~~~2種類目を入手ののち，3種類目を入手する確率はつねに\frac{8}{10}．\\
&ゆえに3種類目を入手するまでに買う箱数の期待値は\frac{10}{8}．\\
&（中略）\\
&~~~9種類目を入手ののち，10種類目を入手する確率はつねに\frac{1}{10}．\\
&ゆえに10種類目を入手するまでに買う箱数の期待値は\frac{10}{1}．\\
&したがって答えは，\\
&~~~~~~1+\frac{10}{9}+\frac{10}{8}+\frac{10}{7}+\dots+\frac{10}{2}+\frac{10}{1}=\frac{7381}{252}
\end{align}
```
5分でfacebookログイン情報の審査申請

オリジナルアプリ作成してリリースした際、facebookにitem審査通すの忘れてしまいログインエラーとなってしまいました。自分が使いたいfacebook情報によっては審査を通過する必要があります。

ちなみに`email`・`public_profile`(利用者の氏名、プロフィール写真、性別、年齢層などの基本情報)・`user_friends`(利用者の友達でアプリを利用している人のリストへのアクセス)はデフォルトで利用可能です。

それ以外の情報を利用するにはfacebookへの申請が必要です。
審査の手順は以下です。

1. 利用したい情報(item)を選択
2. オリジナルアプリでどのように情報(item)が利用されているか明瞭に撮影
3. 審査申請


例えば、今回私が使いたかったのはuser_birthday(ユーザーの誕生日)です。
では手順通り説明していきます。

## ① 利用したい情報(item)を選択
* facebook for developppersのダッシュボードから「アプリレビュー」の項目を選択します。
https://developers.facebook.com/
* 次に、利用したい情報(item)を選択します。

<img width="1300" alt="スクリーンショット 2018-03-12 22.49.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/242437/8ab4cef3-7767-5b01-573a-347f4ea14579.png">

## ② オリジナルアプリでどのように情報(item)が利用されているか明瞭に撮影
詳しくは以下から確認していただければと思いますが、利用したい情報がどこでどのように使われているかをわかるように撮影します。
https://developers.facebook.com/docs/facebook-login/review/examples/?locale=en_US#screencast
MacならQuick timeが一番簡単かもしれません。
https://ushigyu.net/2012/12/14/quicktime_player_display_recording/

こちらが実際に撮影したもの流れになります。
(私の場合はuser_birthday、つまり誕生日の情報をプロフィールに載せたいということです。)

* top画面
<img width="1422" alt="スクリーンショット 2018-03-12 23.16.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/242437/ecd8f638-d8ff-c050-a067-745cbff84aa2.png">

* facebookログイン

<img width="1421" alt="スクリーンショット 2019-05-05 18.41.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242437/e2b501ad-71df-8260-2be4-00a81fb791e8.png">

* プロフィール画面で誕生日情報を利用していることを見せました
<img width="1416" alt="スクリーンショット 2018-03-12 23.17.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/242437/4532255a-5e2b-b102-b9a9-bc4314ec5d6b.png">



##③ 審査申請

審査申請して終わりです！
<img width="994" alt="スクリーンショット 2018-03-12 23.27.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/242437/a859dcef-d6a8-4dda-8d41-7c3bcf90137d.png">


以上の操作で次の日には申請は通過できました。

皆さんも簡単なのでぜひ！
記事に関するfeedbackもお待ちしています。


ちなみに今回作成したプログラミングレビュワーマッチングアプリはこちらです！
ぜひ立ち寄って行ってください。

//////////////////////////////////////////////////////////////////////////////////////////////

@ninnin737
//////////////////////////////////////////////////////////////////////////////////////////////

こちらのfeedbackもお待ちしています。
ご協力を！
BoostingライブラリをColaboratoryで使ってみよう

話題のColaboratoryでBoostingライブラリのインストールを試してみました。

1.Googleアカウントを作成する。
2.Google ChromeからColaboratoryをググって起動する。
3.ファイルメニューからPythonのノートブックを作成。Jupyter notebook同様の操作が可能です。
4.以下のコードで各ライブラリのインストールが実行される。
行頭に!をつけるとLinuxのコマンド実行になります。

```python:XGBoost
!pip install xgboost
import xgboost as xgb
```

```python:CatBoost
!pip install catboost
import catboost
```

```python:LightGBM
!pip install lightgbm
import lightgbm as lgb
```

なんだかんだと環境構築にはめんどくさい側面がありますが、Colaboratoryならお手軽ですね。
Ubuntu 16.04 LTS GPU deep learning 環境を整備　その1 NVIDIAドライバー、CUDA ToolkitとcuDNNのインストールまで

- 自分用メモ
- 意外とてこずったので誰かの役に立つかもしれない。


### はじめに
*****
大学にDeep learning用のmachineが届いた。プリインスールされている諸々がOS(Ubuntu14.04LTSだった）を始め古過ぎ、アプデすると不具合が出まくるそうなので諦めてUbuntu 16.04 LTSを入れ直してGPUでkeras(Tensorflow back end)とchainerがjupyterで動くまでのメモ。やってみて、環境構築が難しいと言われる所以がわかった。端的にいうと、発展著しい領域なのでpackage周りのアプデが早過ぎて直ぐに情報が古くなること。pythonの仮想環境構築がほぼ必須になっていることの2つが原因だと思われます。このページを主に参考にしたのですが
(https://www.buildinsider.net/small/deeplearningenv/ubuntu#cuda-toolkit)

2017年末の記事なのにすでに内容が一部古いです。３回に分けて
- その1 NVIDIAドライバー、CUDA ToolkitとcuDNNのインストールまで
- その2 pythonとDeep learningのpackage周り
- その3 APC製のUPSの導入

でやりたいと思います。

****
## NVIDIAドライバーのインストール
http://www.nvidia.co.jp/Download/index.aspx?lang=jp
から自分のGPUに合っているのを入れる。基本的にドライバは最新のでOK!

```:terminal
$ sudo dpkg -i ダウンロードしたファイル名

#追加指示が出ることもある
$ sudo apt -y update
$ sudo apt -y install cuda-drivers
$ sudo apt -y upgrade
$ sudo reboot
```
これで

```:terminal
$ nvidia-smi
```
エラーが出なければOK

## CUDA ToolkitとcuDNNのバージョンを確認!
必ずTensorflowの公式サイト
https://www.tensorflow.org/install/install_linux#nvidia_requirements_to_run_tensorflow_with_gpu_support
で必要なCUDA ToolkitとcuDNNのバージョンを確認を確認する。俺はこれを怠ったのでCUDAとcuDNNを入れ直す羽目になりました。

## CUDA Toolkitのインストール
超参考になるurl
https://qiita.com/JeJeNeNo/items/05e148a325192004e2cd
まずここで、必要条件を確認した上でCUDA Toolkit Archiveでhttps://developer.nvidia.com/cuda-toolkit-archive
で対応したものを落とす。2018年3月時点でUbuntu 16.04 LTSでTensorflowを使うのならCUDA toolkitは9.0。

```:terminal
sudo dpkg -i ダウンロードしたファイル名
sudo apt update
sudo apt install cuda-9-0
```

以上でインストール完了。一緒にパッチがあるならダウンロード後これもインストールしておく。

```:terminal
$ sudo dpkg -i ダウンロードしたファイル名
$ sudo apt update
$ sudo apt -y upgrade
$ sudo reboot
```

次にパスを通す

```:terminal
echo -e "\n## CUDA and cuDNN paths"  >> ~/.bashrc
echo 'export PATH=/usr/local/cuda-9.0/bin:${PATH}' >> ~/.bashrc
echo 'export LD_LIBRARY_PATH=/usr/local/cuda-9.0/lib64:${LD_LIBRARY_PATH}' >> ~/.bashrc
```
ターミナル再起動または

```:terminal
source ~/.bashrc 
```
でCUDAのパスが書き込まれたbashrcを読み込む。
続いてCUDAがきちんとインストールできているのか色々確認する

```:terminal
echo $PATH             # 出力に"/usr/local/cuda-9.0/bin"が含まれているか？
echo $LD_LIBRARY_PATH  # 出力に"/usr/local/cuda-9.0/lib64"が含まれているか？
which nvcc             # 出力が"/usr/local/cuda-9.0/bin/nvcc"になっているか？
nvidia-smi             # nvidiaのGPUの情報が表示されているか？
nvcc -V                #インストールされているCUDAのverが表示されるか？
```

## cuDNNのインストール
https://developer.nvidia.com/rdp/cudnn-download から必要なものをダウンロード。俺の場合だとcuDNN7.0 for CUDA9.0でした。

```:terminal
# Install Runtime library
sudo dpkg -i ダウンロードした中でファイル名が一番短いやつ
# Install developer library
sudo dpkg -i ダウンロードしたやつの中でdevがファイル名に入っているやつ
# Install code samples and user guide
sudo dpkg -i ダウンロードしたやつの中でdocがファイル名に入っているやつ
```

これで一応はOKのはず。
動作を確認する。

```:terminal
cuda-install-samples-9.0.sh ~ # ホームディレクトリにサンプルコードをコピー。
cd ~/NVIDIA_CUDA-9.0_Samples/
make
cd bin/x86_64/linux/release   # サンプルの実行ファイルがあるディレクトリに移動。
./smokeParticles
```

これで煙がうねうねしている姿が見えたらOK!
FreeBSDでSSHするためのホストオンリーアダプターの設定

FreeBSDににおいてVirtualBoxの画面で操作をしていると様々な不便さを感じると思います。例えば、**「画面がスクロールできない」**と言うことです。
そのため前に何をしたのか確認することができません。そこで**SSH**を用いてmacではターミナル、windowsではコマンドプロンプト？（windowsよくわかりません。）で操作を行うことができれば快適に作業をすることができます。　　
　　
　　
　　
VirtualBoxを立ち上げ、「ファイル」　→ 「ホストネットワークマネージャー」をクリック
![メニューバー.png](https://qiita-image-store.s3.amazonaws.com/0/241572/b4429d25-c42a-cfc2-e0f3-af296c4dbadb.png)
　　
　　
　　
　　
「作成」をクリックして**vboxnet0**を作成します。ここのIPアドレスが今後重要になってきます。しっかり覚えておいて下さい。また、ここに書いてあることを覚えておいて下さい。
![ホストネットワークマネージャー.png](https://qiita-image-store.s3.amazonaws.com/0/241572/e16e1954-e643-9403-7886-7484c735aee5.png)
作成できたら「閉じる」を押して下さい。　　
　　
　　
　　
　　
続いてFreeBSDを選択した状態で「設定」をクリック。メニューバーから「ネットワーク」をクリックし、「アダプター２」をクリックし、「割り当て」に先ほど作成したホストオンリーアダプターにし、名前が**vboxnet0**になっていることを確認。
![ホストオンリーアダプタ.png](https://qiita-image-store.s3.amazonaws.com/0/241572/21447e3b-dffc-2ea1-fe0a-f5b38de60f70.png)
設定できたら「OK」で閉じて下さい。　　
　　
　　
　　
では、ホストオンリーアダプターがしっかり適応されているかを確認しましょう。

```python:ターミナル
macbook:~ user$ ifconfig
...

vboxnet0: flags=8843<UP,BROADCAST,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	ether 0a:00:27:00:00:00 
	inet 192.168.56.1 netmask 0xffffff00 broadcast 192.168.56.255
```

ifconfigコマンドを実行して先ほどの vboxnet0 の行があれば大丈夫です。

　　
　　
　　
　　
それではFreeBSDを起動していつも通りログインしましょう。suコマンドでroot権限で動けるようにしましょう。[suコマンドができない方はこちら](https://qiita.com/kaz1shuu2/items/652645a2372d52dec91d)
　　
　　

```python:FreeBSD
# Freebsdの設定
bsdconfig
```
![bsdconfig_1.png](https://qiita-image-store.s3.amazonaws.com/0/241572/56a0b403-8ac0-7914-2550-b36351cc6a6f.png)
「Networking Management」を選択　　
　　
　　
　　
　　

「Network Interfaces」を選択
![bsdconfig_2.png](https://qiita-image-store.s3.amazonaws.com/0/241572/79a6bed5-bf95-0e84-0fb5-ca0480df9d76.png)  
　　
　　
　　
　　
　　
　　
FreeBSDの設定画面で見たネットワーク１とネットワーク２（ホストオンリーアダプター）が表示されている。「em1」をクリック。
![bsdconfig_3.png](https://qiita-image-store.s3.amazonaws.com/0/241572/2c531ba0-0e0c-b783-3e2f-f50a151bd759.png)  
　　
　　
　　
　　
「DHCP」→　Enabled（自動でIPアドレスを割り当てる機能を有効化）　
「ipaddr」→ 192.168.56.102（IPアドレスの設定）
※vboxnet0の初期設定では、IPアドレスが192.168.56.0/24なので最後の 0 を1~254の適当な数字を割り当てましょう。私は102にしました。特に意味はありません。
![bsdconfig_4.png](https://qiita-image-store.s3.amazonaws.com/0/241572/d8010c65-d38f-0e87-57ec-e1e24cf9ea82.png)
「OK」を押してあとはbsdconfigを終了しましょう。
　　
　　
　　
　　
それではSSHを実行してみましょう。

```python:ターミナル(SSH)
macbook:~ user$ ssh name@192.168.56.102
# nameはFreeBSD内で使っているアカウント名
# @後ろのアドレスは自分でbsdconfig内で設定したアドレス

Password for name@Hostname:
# パスワードを入力します。
Last login: Tue Mar 13 08:02:35 2018
FreeBSD 11.1-RELEASE (GENERIC) #0 r321309: Fri Jul 21 02:08:28 UTC 2017

Welcome to FreeBSD!
# ログイン完了！
...

```


今日はここまで
成功するまでの回数の期待値その②

```math
\begin{align}
&~~~あるお菓子の箱に，おまけが必ず1つ入っています．\\
&おまけには\text{A}と\text{B}の2種類あり，\text{A}が入っている確率はa，\\
&\text{B}が入っている確率はbです（a\not=0，b\not=0，a+b=1）．\\
&~~~その2種類がそろうまでそのお菓子を買い続けるとします．\\
&~~~お菓子を買う回数の期待値は？\\
\\
&~~~1箱目で\text{A}が出る確率はaで，その1箱ののち，\text{B}が出るまでの\\
&箱数の期待値は\frac{1}{b}（その①参照）．\\
&~~~1箱目で\text{B}が出る確率はbで，その1箱ののち，\text{A}がでるまでの\\
&箱数の期待値は\frac{1}{a}．\\
&~~~したがって，求める期待値Eは，\\
&~~~~~~E=a\left(1+\frac{1}{b}\right)+b\left(\frac{1}{a}\right)\\
&~~~~~~~~~=1+\frac{b}{a}+\frac{a}{b}
\end{align}
```
Laravel　複数の値で検索する

###やりたいこと
- 条件を複数指定して検索したい
- ひとつでも複数でも検索可能に

###追記：コメントから学んだこと
コメントで頂いた書き方を追記しました。
検索方法によってはとてもスマートにコンパクトにできます。

- Controllerでの値の取得、検索はhasメソッドを使用してコンパクトにできる
- 検索方法が同じであればonlyメソッドを使用してコンパクトにできる


###View

```html:resources\views\example.blade.php
{!! Form::open() !!}
    タイトル:{!! Form::text('s_title', $s_title) !!}
    カテゴリー:{!! Form::text('s_category', $s_category) !!}
    監督:{!! Form::text('s_production', $s_production) !!}
    出演:{!! Form::text('s_performer', $s_performer) !!}
    {!! Form::submit('検索') !!}
{!! Form::close() !!}
 
@foreach($movies as $movie)
<div>
    <a>{{ $movie->id }}</a>
    <a>{{ $movie->title }}</a>
    <a>{{ $movie->category }}</a>
    <a>{{ $movie->production }}</a>
    <a>{{ $movie->performer }}</a>
</div>
@endforeach
```

###Controller
```php:app\Http\Controllers\SearchController.php
<?php
 
namespace App\Http\Controllers;
 
use App\Movies;
use Request;
 
class SearchController extends Controller
{
    public function example(Request $request)
    {
        $query = Movies::query();

        //自分の書き方
        // 検索条件の値を取得
        $s_title = $request->input('s_title');
        $s_category = $request->input('s_category');
        $s_production = $request->input('s_production');
        $s_performer= $request->input('s_performer');

        // もし$s_titleがあれば
        if(!empty($s_title)) {
            $query->where('title', 'like', '%'.$s_title.'%');
        }
        if(!empty($s_category)) {
            $query->where('category', 'like', '%'.$s_category.'%');
        }
        if(!empty($s_production)) {
            $query->where('production', 'like', '%'.$s_production.'%');
        }
        if(!empty($s_performer)) {
            $query->where('performer', 'like', '%'.$s_performer.'%');
        }


        //コメントでいただいた書き方
        //hasメソッドを使用（値が存在、かつ空ではないか）
        if($request->has('s_title'))) {
            $query->where('title', 'like', '%'.$request->get('s_title').'%');
        }

       //また、同じ検索条件(今回はwhere)の場合は、onlyメソッドでまとめることができる
       foreach ($request->only(['s_title', 's_category','s_production','s_performer']) as $key => $value) {
           $query->where($key, 'like', '%'.$value.'%');
       }

       $movies = $query->get();

        return view('example', compact('movies'));

    }
}
```
成功するまでの回数の期待値その①

```math
\begin{align}
&~~~あるモンスターとの戦闘でアイテムを入手できる確率が，\\
&つねにpであるとします（p\not=0）．\\
&~~~アイテムを入手できるまで戦闘する回数の期待値は？\\
\\
&~~~期待値をEとする．\\
&~~~1回目で入手できる確率はpで，入手できたらその1回で終わり．\\
&~~~1回目で入手できない確率は(1-p)で，入手できなかったらその1回\\
&のあとさらにE回の戦闘が必要．\\
&~~~したがって，\\
&~~~~~~E=p\cdot1+(1-p)(1+E)=1+E-Ep\\
&~~~~~~\therefore E=\frac{1}{p}
\end{align}
```
Flutter入門3日目:Androidでサンプルを動かすまで

# 目標

* androidでもサンプルを動かす

# 原因

デバイス自体がインストールされていないから

# 下記を参考に

https://flutter.io/setup-macos/#set-up-the-android-emulator

# 接続しているデバイスが2つ以上ある場合

`flutter devices`で接続しているデバイスが2つある状態で`flutter run`を実行すると下記の表示になる

```
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

Android SDK built for x86 • emulator-5554                        • android-x86 • Android P (API 27) (emulator)
iPhone X                  • xxxxxxxxxxxxxx • ios         • iOS 11.2 (simulator)
```

全てで起動する場合は`-d all`とし、指定する場合は`-d xxx`とデバイスIDを指定する。

# 次回

IDEにFlutterプラグインをインストール
Embulkを使ってS3にあるJSONをMySQLに保存


S3にあるJsonファイルをMySQLにレコードとして保存

## 状況
Kinesis FirehoseでS3にログを送った後、どうにかして特定のログをMysqlに保存したかった。
なのでEmbulkで定期的にMysqlへ書き込んでやることに。

ちなみにFirehoseのTransform時にLambdaからMysqlにデータを保存しようとしたが、Lambdaがconnectionを使い切るみたいな記事を読んだので辞めた。[MySQL + lambdaのgoogle 検索結果](https://www.google.co.jp/search?q=lambda+mysql&gws_rd=cr&dcr=0&ei=JYemWqnQHeOZ0wKx-I3ICQ)


## 使ったプラグイン
- embulk-output-mysql
- embulk-input-s3
- embulk-parser-jsonl

## configファイル

```yaml:config.yml
in:
  type: s3
  bucket: xxxxx
  path_prefix: dev/2018/03/12/24/
  endpoint: s3-ap-northeast-1.amazonaws.com
  auth_method: instance
  parser:
    type: jsonl
    schema:
      - {name: first_name, type: string}
      - {name: last_name, type: string}
      - {name: sex, type: string}
      - {name: datetime, type: string}

out:
  type: mysql
  host: xxxxxxxxx.ap-northeast-1.rds.amazonaws.com
  user: xxxxx
  password: xxxxxxx
  database: xxxxx
  table: xxxxx
  mode: replace
```

## ハマリポイント

### 改行コード
Kinesisで普通にログを出力するとJSON同士の切れ目がなくなるのでログ出力時に改行コードを入れるとパースしやすくなる
#### BAD:
> {"a":1}{"b":1}

#### GOOD 
>{"a":1}
>{"b":1}

### embulkを実行しているEC2からS3へアクセスする時
もちろんIAMでS3にアクセス出来るようにしておく必要があるのと
 `config.yml` で `auth_method: instance` を明記する必要がある

## 感想
どうしようかなと思って調べてから、約1時間でやりたいことが出来たのでembulkスゴい。
Marxicoで手軽にキレイめな図を書く方法

## 環境

Marxico 1.8.0

## 方法

### シーケンス図

Marxicoの[Welcomeページ](https://marxi.co/)でも紹介されている `sequence` だと下記のような地味な感じの図になってしまいます。

<pre>
```sequence
A->B: text1
B->B: text2
B-->A: text3
```
</pre>

![sequence.png](https://qiita-image-store.s3.amazonaws.com/0/165884/60cdefea-255d-dadb-18bb-36a8c6c48779.png)

1.8.0からサポートされている`sequence2` を使うとmarmeid.js ベースの下記のような図に出来ます。

<pre>
```sequence2
A->>+B: text1
B-->>B: text2
B-->>-A: text3
A-xB: text4
A--xB: text5
```
</pre>

![sequence2.png](https://qiita-image-store.s3.amazonaws.com/0/165884/26955eaf-017d-8263-0a2a-0a6a2753c462.png)

### グラフ図

他にも `graphLR` [^1]を使うと下記のような図も書けます。

<pre>
```graphLR
St(Start);
Op1[Operation1];
Cond{Yes or No?};
Op2[Operation2];
Ed(End);

St --> Op1;
Op1 --> Cond;
Cond -->|yes| Op2;
Op2 --> Ed;
Cond -->|no| Ed;
```
</pre>

![graphLR.png](https://qiita-image-store.s3.amazonaws.com/0/165884/675d5e73-812d-ebbc-58b7-c79afa84382d.png)

ただし、`flow` とは違って上位の要素へ戻る矢印は綺麗には書けない[^2]ようです。

## 雑記

複雑な図を書くには向いてませんが、テキストベースで簡単な図を書けるのでそこそこ便利な機能かなと。
ガントチャートも`gantt` で書けるのですが、流石に実用的では無いと思うのでスルーしてます。

[^1]: TBなら図の方向が上(Top)から下(Bottom)、LRなら左(Left)から右(Right)と言った形でTB/BT/LR/RLの4種類とTD(Top/Downの意味でTBと同じ)の5つが指定可能

[^2]: Welcomeページで紹介されているflowと対比させようと頑張ったけどダメだった。
Deep image priorはDeep speech priorでもあるのか

# Deep image priorを音声でやってみる
[Deep image priorという論文](https://arxiv.org/abs/1711.10925)が昨年11月に発表され、注目を浴びているようです。
この論文はCNNの構造自体が画像らしさを表現するのに適しているため，
適当なランダムノイズだけの画像１枚からノイズが付加された画像１枚を出力させるようにCNNを学習すると、
最終的にノイズが取れた綺麗な画像が出力されるようになるというものでした。
特に面白い点が実験的結果なれど、CNNが画像らしさを表現する関数だといえたことだと思います。

所変わって音響信号処理でもDeep Learningとの融合は非常によく図られており、音声強調、つまるところNoisyな音声のDenoisingに関する応用もよく研究されています。（音響的に外乱はノイズだけじゃないですが）
今回、Deep image priorのようなDenoisingが音声の場合でもできれば、音声強調DNNに対して何か新しい知見が得られるのではないかと思ってとりあえずでやってみることにしました。
~~遊んでねーで自分の仕事しろよ~~
# setup

やることは大したことがありません。
論文中のモデルを画像を音声に置き換えただけです
-モデル
　　論文中と同じUNetのようなモデルを用いました。
　　2次元畳み込みを1次元畳み込みにしたものを用いました。
　　フィルタタップ長は128と長めに取りました。
-音源
　　音源信号はNIIで有償配布されている音素バランス文の一つを用いました。
　　有償配布データなので、こちらで音として流すことはできません…。あしからず。
　　サンプリングレートは16kHzです。
-付与ノイズ
　　ノイズはピンクノイズを付与しました。
　　SN比は適当ですが多分6dBくらいのような気がします。
-入力ノイズ
　　ガウス乱数です。

![noisy_speech.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/6ba6cef9-3880-3d02-def5-e2e901ad3b0d.jpeg)
図1.ノイズが付与された音声信号

わかりづらいですが帯状に現れているのがノイズ、包絡が増減しているのが音声です。

約5秒程度の長さの音声を丸ごと出力ベクトルとして学習させます。
入力ノイズも出力と同じ長さになるようにします。

# 結果
学習結果の出力信号です
<div style="text-align: center;">
![denoised.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/a6970785-61af-9fea-a3e9-40ebd43c6533.jpeg)
図2.学習結果
</div>
なんかすごく綺麗にノイズが取れてるように見えますね。
透過してクリーン信号と重ねて見ましょう。

![denoised_and_clean.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/775ded4e-7f09-a132-3dc8-808792594ea6.jpeg)
図3.紺が出力信号、オレンジがクリーン信号　オレンジを生成することが今回の目標
(学習し直してしまったので上のものに比べてややノイズが残っています)

なんだかところどころ丸ごと削っていますね…。
聞いた感じはもうものすごい低域しか聞こえず、かつ歪んでいて、クリーン信号を事前に聞かないと何を言ってるのかすらわかりませんでした。


スペクトログラムで確認して見ます。
![denoised_spectrogram.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/a621ee2a-ac20-0d44-e4b0-218753e2fc47.jpeg)
図4.出力信号のスペクトログラム
![clean_spectrogram.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/c8a8451e-52e6-1780-d19d-b50c5257b6c7.jpeg)
図5.クリーン信号のスペクトログラム
横軸が時間に相当するフレームインデックス、縦が周波数ビン、濃淡が強さを表していて、黄色いほど、その時間、その周波数の音が強いことになります。

出力信号は低域ばかり再現していて、高域は全く再現できていませんね。
このあと信号を帯域分割して高域のみ再現させようとしてもノイズが付加されたままの信号や、全く関係ない信号が出力されるのみでした。
![high_pass.jpg](https://qiita-image-store.s3.amazonaws.com/0/178455/a85fbd6a-069f-bc7c-8fa3-e62f7f3faba8.jpeg)
図6.高域信号のみで学習した時の出力信号のスペクトログラム

# 考察
察するにUNetのダウンサンプリングが悪影響しているように思います。
サンプリング定理からいって、ダウンサンプリングしてしまうと元の信号の高域成分はどんどん消えていってしまいます。
CNNの中身でサンプリング定理が通用するかは謎ですが、ダウンサンプリングしすぎることに影響があるような気がします。
ただUNetはスキップコネクションをして、ダウンサンプリング前の特徴も残す構造をしているので実際どうなんでしょう…。

# まとめ
Deep image priorの要領で音声強調を試しました。
結果としてノイズは取れたようにみえますが低域ばかり強調され、音も歪むなど音声強調できたとは言い難い結果でした。
信号を帯域分割して高域のみの音声強調を試した所、全くノイズを取ることができませんでいした。
この結果から構造自体が高域を再現できない可能性が考えられます。


### 所感
もしかしたらDeep image priorはDenoisingを目的にするより、考えたネットワーク構造が目的となる信号を適切に出力できるかのテストができるかもしれません。
まともに実験してないのでなんともいえませんが。
~~というか図の表記もめっちゃいい加減・・・・・・・・~~

~~詳細なパラメータを記述するのがめんどいから~~コードをgithubにあげたいので整理しつつ、ついでにダウンサンプリングを減らすなど試して見ます。

今日はここまで。明日から日本音響学会ですね。3/12現在。
テーマ切り替え可能なCSS設計について考えてみた

最近、1プロジェクトの中に複数サービスがあり、サービスによってコンポーネントの色やサイズを調整したいという要望がありました。
このとき、CSS設計をどのように行うべきかを考えた結果のまとめになります。

### 注意

他によい方法があるかもしれませんので、検討時に選択肢の１つとして考えていただければと思います。
また、よりよい方法を知っているよという場合、是非その方法を教えていただけるとうれしいです。
 


# 実装について

## 例

わかりやすいのでボタンで考えてみます。

サービスのテーマカラーのボタンを設置したいとします。
このとき、`btn--service`をクラスに指定すれば、指定した色のボタンが実装できるとします。
そうなると下記のようなコードになります。

```sass
.btn {
  ...

  &--service {
    background-color: #f00;
  }
}
```

```html
<button class="btn btn--service">テキスト</button>
```

よく見慣れた形です。

### 複数サービスの場合

複数のサービスがあった場合、どうなるでしょうか。
すぐに思いつくのが、それぞれ別のクラス（modifire）を作成する方法でしょうか？

```sass
.btn {
  ...

  &--serviceA {
    background-color: #f00;
  }
  &--serviceB {
    background-color: #0f0;
  }
}
```

```html
<button class="btn btn--serviceA">テキスト</button>
```

```html
<button class="btn btn--serviceB">テキスト</button>
```

このような形になるかと思います。
（※本来であれば、サイズ用のクラスなどがあるかと思いますが、ここでは省略しています）

では、次は問い合わせボタンも定義していくとします。
その際、問い合わせボタンの色は、サービスごとで違う色にしたいとします。
先ほどと同じように対応するのであれば、下記のようになるかと思います。

```sass
.btn {
  ...

  &--inquiryServiceA {
    background-color: #f00;
  }
  &--inquiryServiceB {
    background-color: #0f0;
  }
}
```

```html
<button class="btn btn--inquiryServiceA">テキスト</button>
```

```html
<button class="btn btn--inquiryServiceB">テキスト</button>
```

これでも問題はないのですが、そのサービスの中で使用するのに、わざわざそのサービス名がついたクラス名をつけるのって面倒ではないでしょうか？

### scssを別にする

では問題を解決するために、scssを別にしてみます。

### serviceA/_btn.scss

```sass
.btn {
  ...

  &--inquiry {
    background-color: #f00;
  }
}
```

### serviceB/_btn.scss

```sass
.btn {
  ...

  &--inquiry {
    background-color: #0f0;
  }
}
```

こうなれば、これをそれぞれのサービスの共通scssでimportすればいいだけです。

でも、ボタンコンポーネントがサービスごとに散ってしまいました。
やはりボタンはボタンで固まっていて欲しくないでしょうか？

mixinという方法もありだとは思いますが、毎回作成するのも少し面倒なので、別の方法を考えてみました。

そこで、提案するのが、色などを管理する`theme.scss`をサービスごとに作成し、ここで管理するという方法です。

## 対応方法

### _btn.scss

```sass
.btn {
  ...

  &--inquiry {
    background-color: $inquiry_color;
  }
}
```

`background-color`の指定を変数にしました。
ここで宣言した変数を、各サービスで上書きしていくことになります。

### base/_theme.scss

```sass
// 指定がなかった場合のデフォルトを指定しておく
$inquiry_color: #fff !default
```
デフォルトとなる色などを指定しておきます。
今は必要ないかもしれないですが、今後上書きの必要がない場合に使用していきます。

### serviceA/_theme.scss

```sass
$inquiry_color: #f00;
```

serviceA用の色を指定します。

### serviceB/_theme.scss

```sass
$inquiry_color: #0f0;
```

serviceB用の色を指定します。

### serviceB/layout.scss

``` scss
@import "base/theme";
@import "serviceA/theme";
@import "btn";
```

importの順番が重要になります。
まず、デフォルトのテーマを読みこんで、その後にサービスAのテーマを読み込んでいます。
その結果、`base/theme`で指定されたものをベースにし、その後`serviceA/theme`で指定されたもので上書きすることになります。

**※パスは必要に応じて修正してください**

### serviceB/layout.scss

``` scss
@import "base/theme";
@import "serviceB/theme";
@import "btn";
```

こちらに関してはserviceAと同様になります。

# まとめ

以上が対応方法になります。

このようにサービスごとに変化させたい値を変数で切り出し、読み込み時に上書きしていくことで、コンポーネントをまとめたままでも、サービスごとのModifire（パターン違いのクラス）を定義する必要がなくなります。

もちろん、普通にModifireとして定義した方がいい場合もあるので、常にこの方法の方がいいということはないと思います。
状況に応じて、このようなCSS設計も選択肢の１つに加えていただければと思います。
議事録作成のプロセス

入社1年目の時に書いたメモを発見。初心を忘れないため記載。
議事録に関わらず、成果物全般に関して適用できる考え方なのでは。

##●打合せ前
①お客様提出向け or 内部向けなのか、事前に確認。

②事前に会議資料を読み込む。不明な用語は事前に調べる。

③議題を踏まえ、全体の流れをイメージして会議に臨む。

##●打合せ中

①打合せ中は、特に決定事項・宿題事項を意識して、メモを取る。

## ●打合せ後
①打合せ全体の要旨を掴む。不要なやり取りは議事録では省略する。

②まず大枠を記述し、その後に大事な部分を補足する。

## ●議事録作成後
①先輩にレビュー依頼を出す前に、紙で印刷しセルフチェックを行う。（文体・フォントの統一）

②時間に余裕がある場合は一旦席を外し、休憩から戻ってきた後に再度議事録を見直す。
日時の計算にはライブラリ(strtotime)を使おう

# 事始め

こういう計算式を見たことがないですか？

```php
define('YEAR_SECONDS', 365 * 24* 60 * 60);

// 次の年を取得
$next_year = date('Y', time() + YEAR_SECONDS);
```

これを見て普通じゃね？って思った人はちょっと待って下さい
残念ながらこのコードは間違いです

簡単に反証出来るのでやってみましょう

# 反証

```php
define('YEAR_SECONDS', 365 * 24* 60 * 60);

$lib_calc_seconds = strtotime('+48 years', 0);
$self_calc_seconds = 48 * YEAE_SECONDS;

echo($lib_calc_seconds - YEAR_SECONDS); // 1036800
```

差分が出ていますね。理由は簡単です
うるう年を考慮していないからです

万年カレンダーを作ったことがある人はすぐに分かったかもしれないですね

ではコードを修正してみましょう

# 修正

```php
$next_year = date('Y', strtotime('+1 years'));
```

これだけです。むしろ簡単になりましたね
これなら何百年先でも差分は出ません
PHP万歳！

# まとめ

今回の趣旨は面倒なことはライブラリに頼ろうということです
きっと自分で書くより正確で簡単です
OpenJDKとOracleJDKの立ち位置について

# OpenJDKとOracleJDKの立ち位置について

http://www.publickey1.jp/blog/18/java_109java_11java.html
例の記事以降、誤った解釈のネガティブな発言が繰り返されてた気がするので…(もう下火ですが)


## CentOSとざっくり比較例示

厳密に一致してるわけでもなくイメージ比較表ですが、立ち位置としてはこんな感じではないか？と。

|         |主流の無償版 |主流の有償版             |先進的な開発版|
|:--------|:------------|:------------------------|:-------------|
|(比較例) |CentOS       |Red Hat Enterprise Linux |Fedora        |
|Java8以前|OracleJDK    |OracleJDK ※1            |OpenJDK       |
|Java9以降|**OpenJDK**  |OracleJDK                |OpenJDK       |
※1有償サポート契約

有償オンリーの RHEL を補うような形で、
OSS 版の CentOS が自由に利用できることを嘆くような人は居ないと思います。
Java の方は今の所好意的に取られていないような気がしますが、実は似たような構図なのでは。


## ちょっと細かい解釈とか

これまでは Oracle 公式の OracleJDK が無償で利用可能 (※同梱の一部ツールは利用すると有償) でしたが
無償版は OSS に任せるよという方針っぽいです。
Oracle が Java を切り捨てたとかそういう話ではなく、 OSS 版と守備領域をはっきり分けたというむしろ分かりやすい話と思っています。
また今後は JDK そのものやインストールで含まれる周辺ツールについて、 OracleJDK と OpenJDK で差異をなくしていく方針を打ち出しており、別組織ありながら連携強化していくとのこと。
むしろ開発用途や内部ツール用や小規模案件など、OpenJDK の実用シーンが拡大していくんではないでしょうか。

あと無償版はサポート付かないから使いものにならないとか、いや元々無償利用してた人はサポート関係ないだろ、とか喧々諤々してるのも観測しましたが
重要なのは無償版でどれだけの期間セキュリティアップデートが振ってくるかであり、 OpenJDK が LTS 版を出すかどうかが今の所一番の注目点です。

---

知ってる範囲で近い気がしたので CentOS を引き合いに出したんですが、他に良い例とかいやこういう解釈が正しいだろ、とかあれば指摘下さい。
(ガンダムで例えると？とかは詳しくないので他の人お願いします)
Flutter入門2日目:サンプル動かすまで

# 目標

* 必要なライブラリインストール
* サンプルを動かす

# 参考

インストールはここを参考に

https://flutter.io/setup-macos/
https://qiita.com/ozaki25/items/1d8701f8f4b8e9e20b0d

`flutter doctor`実行結果にて色々怒られた。

```
Android toolchain - develop for Android devices
[✗] Android Studio (not installed)
[!] VS Code (version 1.19.3)
[!] Connected devices
```

# IDE

AndroidStudioを利用。

IntelliJ IDEAもサポートしているが、特にどちらがいいか考えずSDKを利用するためにAndroidStudioをインストールしたので採用。

# run

`open -a Simulator`でシミュレーターを起動してから`flutter run`で実行
サンプルが動いた。

# 次回

iOSのシミュレーターしか動かなかった。
おそらくandroidのシミュレーターがインストールされていないからだと思うのでandroidでも動かすところまで。
Metricbeatの設定（Elasticsearch、Kibana）


Metricbeatのインストールと設定を行ったので、備忘のため簡単に残しておきます。
今回は、AWSのElasticsearchを使用しました。

###■動作環境
・RHEL（6.6, 7.4）
・AWS Elasticsearch

###■インストール
 # curl -L -O https://artifacts.elastic.co/downloads/beats/metricbeat/metricbeat-6.2.2-x86_64.rpm
 # rpm -vi metricbeat-6.2.2-x86_64.rpm

###■基本設定
 # vi /etc/metricbeat/metricbeat.yml

```yaml:metricbeat.yml

～～～(中略)～～～

#============================== Kibana =====================================

# Starting with Beats version 6.0.0, the dashboards are loaded via the Kibana API.
# This requires a Kibana endpoint configuration.
setup.kibana:

  # Kibana Host
  # Scheme and port can be left out and will be set to the default (http and 5601)
  # In case you specify and additional path, the scheme is required: http://localhost:5601/path
  # IPv6 addresses should always be defined as: https://[2001:db8::1]:5601
  #host: "localhost:5601"
  host: "<KibanaのURL>:443/_plugin/kibana/"

～～～(中略)～～～

#================================ Outputs =====================================

# Configure what output to use when sending the data collected by the beat.

#-------------------------- Elasticsearch output ------------------------------
output.elasticsearch:
  # Array of hosts to connect to.
  hosts: ["<Elasticsearchのエンドポイント>:443"]

～～～(中略)～～～

```

###■module
 # ls /etc/metricbeat/modules.d/

※有効 / 無効で末尾の識別子が異なる。
【有効】system.yml
【無効】system.yml.disable
（デフォルトはsystemのみ有効）

###■無効化 / 有効化
・無効化
 # metricbeat modules disable system
 # metricbeat modules list

・有効化
 # metricbeat modules enable system
 # metricbeat modules list

###■起動 / 停止
・REHL6
 # /etc/init.d/metricbeat start
 # /etc/init.d/metricbeat stop

・REHL7
 # systemctl start metricbeat
 # systemctl stop metricbeat

###■ログ確認
 # less /var/log/metricbeat/metricbeat

###■参考
・「Metricbeat Reference [6.2] - Step 1: Install Metricbeat」
https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html

・「Metricbeatを使ってみる - Kibanaを立ててみた」
http://atsuizo.hatenadiary.jp/entry/2017/08/02/090000
バイト列を受け取ったブラウザがDOMツリーをつくるまで

## 概要

ブラウザがページをレンダリングするまでにはいくつかのステップを経ている。
  googleの[Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en)を読んで、分からなかった単語などを調べながらまとめる。
  CSSDOMのところは除いてとりあえず`DOMツリー`が作られるところまで。

## バイト文字列からDOMオブジェクトになるまでの流れ

ブラウザーに渡された`バイト列`は、下のような流れで`DOMツリー`になってレンダリングされる。
  英語が苦手な人もgoogleのページの図を見てもらえると分かりやすいかと。

```
バイト列
  ↓
文字列
  ↓
トークン
  ↓
オブジェクト
  ↓
DOMツリー
```

## バイト文字列から文字列へ - Conversion

ブラウザーは、サーバーやディスクから読み込んだバイト列を、決まった文字コードに応じて文字列に変換する。
  例えば、htmlファイルのheadに`<meta charset="utf-8">`があれば、バイト列をUTF-8として処理する。

## 文字列からトークンへ - Tokenizing

ブラウザーは文字列を`<html>`や`<body>`などカギカッコ(angle brackets)に囲まれたトークン[^1]に変換する。
  それぞれのトークンはそれぞれの特性を持っている。

  [^1]: トークンはここでは、連続したデータにおいて最小の意味を持ったまとまりの意味。

## トークンからノードへ - Lexing

トークンがオブジェクト(ノード)へと変換される。
  Tokenizeで、headやbodyなどの各タグは始まりのタグと終わりのタグで別個になっていたが、  
  この段階でひとまとまりのオブジェクトへと変換される。

- Lex - レキシカルアナライザ(字句解析プログラム)を生成するプログラム

## オブジェクトからDOMツリーへ

HTMLでは各タグ同士の包含関係などの関係性が書かれているので、オブジェクトは木構造へと結びつけられる。
  htmlタグがparent、head、bodyがchildといった形。
  リンク先の図が分かりやすい。


## 参考

- [Constructing the Object Model](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=en)
- [字句解析 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%AD%97%E5%8F%A5%E8%A7%A3%E6%9E%90)
pix2pix(unet版)の過学習の制御は可能か？？～実行編～

[計画編](https://qiita.com/MuAuan/items/52396829a9df81015f88)で目論んだのは以下のように
①pix2pix(unet版)にL1L2ノルムを導入して汎化特性を持たせよう
②pix2pix(encoder-decoder版)に層間写像を導入してさらに綺麗な画像を作ろう
って、まともな戦略だった。

結果は、簡単に言うと。。。失敗！
①のUnet版の汎化は、一層のみの層間写像でさえ、導入すると未知データの画像は壊れました。
ということで、①も②もここで失敗です。
※簡単に書きましたが一週間ほぼ回し続けての結果でマシンはメモリフルになるしですが、パラメータの特性を勉強するには適当な題材でした。

しかし、②の層間写像はあきらめたが、DropoutやL1L2ノルムの適用の調整は良い効果も見られたので以下示したいと思います。

これらの調整をやるためのコードを以下に置いておきます。
[MuAuan/pix2pix_alt](https://github.com/MuAuan/pix2pix_alt)
 
#Dropout及びL1L2ノルムの効果について
この両者はそれぞれ過学習の抑制として効果のある手法だとされています。
しかし、やってみるとDropoutの方が格段に効果がわかりやすいです。
ということで、以下はDropoutの効果を中心に実施したことを示すこととします。

pix2pix(encoder-decoder版)は、層間写像はしませんが、Dropoutはi<2に導入しています。これを調整しようということです。
当初は、dropout(0.5)としています。これはオリジナルのpix2pixでその値だったからです。しかし、層間写像を止めた時点で汎化特性は緩めてもいいかもしれないので、もっと小さな値にしてもいいかもしれません。
ということで、そもそもDropout無しとdropout(0.25)、dopout(0.5)、dropout(0.75)、そしてdropout(0.9)をやってみました。
200epoch回した時点でのvalidationデータでチェックしました。結果は以下の通りです。
#結果
###Dropout(0) 200epoch
![current_batch_mayu2kitaRaw_test2.png](https://qiita-image-store.s3.amazonaws.com/0/233744/0ae1cc3e-23ed-0173-dfb6-596570c46347.png)
###Dropout(0.25) 200epoch
![current_batch_mayu2kitaRaw_test2.png](https://qiita-image-store.s3.amazonaws.com/0/233744/4fe5cd6b-3f0e-3e4a-d793-9d762ac8f293.png)
###Dropout(0.5) 200epoch
![current_batch_mayu2kitaRaw_test2.png](https://qiita-image-store.s3.amazonaws.com/0/233744/b0f537ad-0ac0-effa-5e3f-bf9daef197cd.png)
###Dropout(0.75) 200epoch
![current_batch_mayu2kitaRaw_test2.png](https://qiita-image-store.s3.amazonaws.com/0/233744/e8cd734e-2e24-010e-b576-9149fcdb4de6.png)
ということで、構造が同じ場合はあまり差がありませんが、それでもDropout（0.25)か(0)当たりが一番よさそうです。05,0.75では目が消えていきます。
###Dropout(0), L1L2(0.0001) 500epoch
![current_batch_kita2mayuRaw_test1.png](https://qiita-image-store.s3.amazonaws.com/0/233744/13935640-3b29-da39-301e-cab54e9b5cad.png)
まあまあだが、若干壊れかけている
###encoder-decoder版　1000epoch
![current_batch_kita2mayuRaw_test1.png](https://qiita-image-store.s3.amazonaws.com/0/233744/dbee9c4e-bc91-6dde-8246-b76054a64d61.png)
結局、encoder-decoder版が安定して綺麗
#まとめ
いろいろパラメータを動かしてvalidationデータの出力を見たが、過学習なく安定した出力はencoder-decoder版で得られた。
#課題
実は、encoder-decoder版では細部が甘く、epochを回しても学習データでさえピンボケが消えない。一方、unet版の収束性は非常にいい。
ということで、議論は振り出しに戻ってしまった
東京大学松尾研究室が公開している「Deep Learning基礎講座演習コンテンツ」のwindowsでの環境setup方法メモ

[Deep Learning基礎講座演習コンテンツ](http://weblab.t.u-tokyo.ac.jp/deep-learning%E5%9F%BA%E7%A4%8E%E8%AC%9B%E5%BA%A7%E6%BC%94%E7%BF%92%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84-%E5%85%AC%E9%96%8B%E3%83%9A%E3%83%BC%E3%82%B8/)で公開されているコンテンツをwindowsで使う場合のsetup方法が見当たらなかったので作成

ファイルはJupyter notebook形式で作成していると記載してあるので、これを使用できるようにします。
Jupyter notebookはanacondaを利用すると簡単にインストールできます。
pythonの環境構築も自動でやってくれるので、今後ローカル環境で勉強したいとなったときも考えると一番楽な方法と思います。
[anacondaインストール方法](https://pythondatascience.plavox.info/python%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/python%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-windows)

インストールしたらスタートメニューから「Anacond3>Jupyter　Notebook」を選択しましょう。
![Jupyter Notebook.jpg](https://qiita-image-store.s3.amazonaws.com/0/207883/395e0581-137c-f876-ba1c-a5cdfe2406fa.jpeg)

ブラウザでJupyter Notebookが開いたら、「weblab_dlb」を選択してください。下記画面になれば成功です。
![名称未設定 2.jpg](https://qiita-image-store.s3.amazonaws.com/0/207883/8f0d89d2-9b3f-3720-5270-cb7b32b20842.jpeg)
IISでerror 500.19 (HRESULT: 0X80070005)が返る場合の解決法

# 環境
Windows7 32bit
IIS 7.5系
# 事象
Http error 500.19 (HRESULT: 0X80070005)が返ってくる。
# 対処法
webサイトの仮想ディレクトリを含む物理ディレクトリをファイルエクスプローラーで開き、IUSRSにweb.configへのアクセス権を与えたら解決した。
プログラミング言語Goを読みながらメモ(第三章)

[プログラミング言語 Go]( https://www.amazon.co.jp/dp/4621300253 ) を読みながらメモ。

第一章 : https://qiita.com/Nabetani/items/077c6b4d3d1ce0a2c3fd
第二章 : https://qiita.com/Nabetani/items/d053304698dfa3601116

で。

#整数 - 演算子

`&^` という演算子があることに驚いた。というか、要らない気がする。
`a &(^ b)` と `a &^ b` は同じでしょ？ → 当記事のコメント欄参照のこと

なぜ bit not を `^` にしたんだろう。由来が気になる。
指数演算子がないのがちょっと残念。

#整数 - Cとの違い

C 言語と異なり、整数の int への自動昇格がないので、

```go:go
package main

import "fmt"

func main() {
	b := byte(255)
	fmt.Printf("%d\n", (b << 1)) //=> 254
}
```

となる。

C言語では

```C:C11
#include <stdio.h>
#include <stdint.h>

int main()
{
	uint8_t b = 255;
	printf( "%d\n", b<<1); //=>510
	return 0;
}
```

となる。要注意と思う。

あと。剰余の扱いが、私の好きじゃない方になっていた。

```go:go
package main

import "fmt"

func main() {
	fmt.Printf("%d\n", -5%3) //=> -2
}
```

ということ。まあ昔の C言語みたいに処理系依存？であるよりはずっといいけど。

# 実装依存の変換

1e100 のような巨大な数を整数に変換した結果が実装依存なのは残念。手元の処理系では

```go:go
package main

import "fmt"

func main() {
	f := 1e100
	fmt.Printf("%x\n", int(f))   //=>-8000000000000000
	fmt.Printf("%x\n", int32(f)) //=>-80000000
	fmt.Printf("%x\n", int16(f)) //=>0
	fmt.Printf("%x\n", int8(f))  //=>0
}
```
となった。ちょっと気持ち悪い。

ちなみに、`int(1e100)`  とじかに書くとコンパイルエラーになった。好ましい。

ちなみに同じ様にたぶん処理系依存の C 言語では

```c:c11
#include <stdio.h>
#include <stdint.h>

int main(){
  printf( "%llx\n", (int64_t)1e100); //=> 7ffee017b910
  printf( "%x\n", (int32_t)1e100); // => 100
  printf( "%x\n", (int16_t)1e100); //=> 0
  printf( "%x\n", (int8_t)1e100); //=>0
}
```

と、さらに気持ち悪い結果になった。

# 複素数型

言語組み込みで `1.2+3.4i` のように複素数が書けるのは好ましい。ここは ruby と似ているけど、要素型が浮動小数点に決まるところは似ていない。ruby は整数型を要素にも出来るからね。

`imag` と `real` が、関数であってメソッドではないのはちょっと違和感があるけど、まあそういう文化なのだろう。

# 真偽値

|言語|真偽|
|:--|:--|
|C言語|0と _False が偽で、それ以外の整数は真|
|GoとJava|true のみが真で、false のみが偽|
|Ruby|false と nil が偽で、それ以外は真|
|JavaScript と PHP|むずかしい|
|C++|ややむずかしい|

ということで、Go は Java と同じ道を選んだようだ。
後知恵で Google 様が作っているんだから当たり前だけど、JavaScript や PHP の選んだ道を進まなくて良かった。

Ruby の選んだ道が一番好きなんだけど、Go の立場なら Java と同じだろうなぁとも思う。

# 文字列

文字列が変更不可能なのは、好ましい感じがする。UTF-8 にべったりという立場も悪くない。

`strconv.FormatInt` と `strconv.ParseInt` があるので、どう書くで n進数の問題が出ても安心。

Ruby のような多彩な文字列定数表記がないのは残念。バッククオート表記しかないのか。

# iota

ギリシャ文字の ι / Ι (見てくれではなんだかわからないが...) なんだろうけど、なぜ iota なのか、由来情報も書いてほしかった。

# 型なし定数の精度

Pascal の定数も型がないんじゃなかったっけ。うろ覚え。
あと、精度がどうなっているのか実験したい。

内部的に 128bit 整数があるのなら、言語にも出してくれればいいのに。

次は第四章 : https://qiita.com/Nabetani/items/59bfd00dc3323883a07f
[初心者向け]Gitを使って開発するときの実際の流れ

# Gitのコマンド多すぎ！
「あれ、あの時のGitのコマンドってなんだっけ？」と思ったときにとりあえず検索してみるとすごい量のGitのコマンドが出てくる。
結局コマンドを忘れるたびに毎回検索して自分がほしいコマンドを探さないといけない。そこで実際に開発する流れに沿って。Gitのコマンドを整理してみたいと思う。わかりづらくならないように、ここには必要最低限のコマンドだけ記載したい。
あくまで自分が開発する時の一例なので、参考程度に見て下さい。

# 前提の環境
- 開発用ブランチはorigin/develop
- 自分が新しい機能の開発を頼まれたとする。

# 開発にとりかかるまで
## まずはissue化
開発する内容をGitHubのissueに落としこむ。自分は[ZenHub](https://www.zenhub.com/)という拡張を入れて、issueがTrelloみたいにボードで分かりやすく管理できるようにした。
issueに書く内容としては
- 追加する機能の詳細
- 開発完了予定日
- 開発後にテストする内容
などを書きましょう。

## ブランチを作成
```
 git checkout -b feature/issue-XX origin/develop
```
これでリモートにあるブランチorigin/developをもとに、ローカルに新しいブランチを作成してそのブランチに切り替えることができる。
なお、issue-XXの部分には上記で作成したissueの番号を入れるようにしている。

# 開発している最中
## addする
```
git add .
```
これで今回の変更分を全てaddできます。
つまり、[ワーキングツリー]→[インデックス]

## commitする
```
git commit
```
これで上記でaddしたものをコミットします。このコマンドのあと、コミットメッセージを書くことができます。
つまり、[インデックス]→[ローカルにあるfeature/issue-XX]

```
git config --global core.editor 'vim -c "set fenc=utf-8"'
```

ちなみに、これでコミットメッセージを編集するエディターをnanoからvimへ変更できます。




# 開発が終わったら
## Pushする
```
git push origin feature/issue-XX
```
これであなたのローカルでの変更がリモートのorigin/feature-issue-XXに反映されました。
つまり、[ローカルにあるfeature/issue-XX]→[リモートにあるorigin/feature/issue-XX]

## Pull Requestを送る。
これはGitHubのリポジトリのページから。今回なら「feature/issue-XXをdevelopからpullしてください」というリクエストを送る。コートレビューをしてもらい、OKならMergeしてもらう。

## Branchを削除
不要になったBranchは消しておこう。

```
git branch -d feature/issue-XX
```
ちなみに今のBranchの一覧を見たい場合は

```
git branch -a
```
とすればOK

## 現在の状況を確認
```
git status
```
これで今自分addしてないファイルや、addしたけどコミットしてないファイルの一覧が確認できます。

## 今ままでのコミット状況を確認

```
git log
```
これで今までのコミット履歴を確認できます。

# まとめ
Gitでミスをすると、他の人に変更を上書きしてしまったり、リモートのブランチを汚してしまうこともある。（自分はそれで上司にとても迷惑をかけたことがある…）
しっかり使いこなして、楽しい共同開発を！
細かいコマンドについてはその都度調べていこうと思う。
kerasでカルマンフィルタ

下記の記事が面白かったので、参考にしつつKeras版を実装してみました。
1. https://qiita.com/tttamaki/items/3bd1fdab5ef5bbf0d4be
2. http://s0sem0y.hatenablog.com/entry/2018/03/08/131445

K.rnnを使って書きましたが、逆行列はtensorflowの関数を使いました。
K.rnnはバッチ次元を前提としているため少しややこしいですが、個人的にはtensorflowよりは読み書きしやすいと思います。今後ニューラルネットと組み合わせることも意識できますのでこれで良しとします。
tensorflowであればtf.nn.dynamic_rnnを使えば同じ要領で書けるはずです。


表示・評価部分は参照記事1と同じですので、関数部分のみコード記載します：

```python:

import keras
from keras import backend as K
from keras.layers import Input
from keras.models import Model

def KalmanFilter_keras(T, x_obs, mu0, V0, A, b, Q, R):
    """
    kerasで実装したカルマンフィルタ．
    """
    x_predict = np.zeros((T, 2))
    x_filter = np.zeros((T, 2))
    V_predict = np.zeros((T, 2, 2))
    V_filter = np.zeros((T, 2, 2))

    x_predict[0] = mu0
    x_filter[0] = mu0
    V_predict[0] = V0
    V_filter[0] = V0

    class KalmanLayer(keras.layers.Layer):
        def __init__(self, dim, A, b, Q, R, V0, **kwargs):
            super(KalmanLayer, self).__init__(**kwargs)
            self.dim = dim
            self.A = K.constant(A)
            self.b = K.constant(b)
            self.Q = K.constant(Q)
            self.R = K.constant(R)
            self.V0 = K.constant(V0.reshape((1,dim,dim))) # バッチ次元を加えておく

        def call(self, x):
            last_output, outputs, states = K.rnn(self.step, x[:,1:], initial_states=[x[:,0],self.V0]) # はじめの観測値を初期値、それ以降の観測値を入力値とする
            return outputs

        def compute_output_shape(self, input_shape):
            return (input_shape[0],self.dim)

        def step(self, inputs, states):
            x_obs = inputs
            mu, V = states

            mu_ = K.dot(mu,K.transpose(self.A)) + self.b # 転置のまま計算 shape: (batch,d)
            VAt = K.permute_dimensions(K.dot(V,K.transpose(self.A)),(1,2,0)) # shape: (d,d,batch)
            V_ = K.permute_dimensions(K.dot(self.A,VAt),(2,0,1)) + self.Q # shape: (batch,d,d)

            S = V_ + self.R
            K_ = K.batch_dot( V_, tf.matrix_inverse(S) )

            mu = mu_ + K.batch_dot(K_, x_obs-mu_)
            V = V_ - K.batch_dot(K_,V_)
            
            ret = K.concatenate( [ K.batch_flatten(f) for f in [mu_,V_,mu,V] ] ) # K.rnnはリスト出力ができないため、flatten -> concat して出力する
            new_states = [ mu, V ]

            return ret, new_states

    dim = 2
    x = Input(shape=(None,dim))
    y = KalmanLayer(dim,A,b,Q,R,V0)(x)
    model = Model(inputs=[x],outputs=[y])

    start = time.time()

    ret = model.predict( x_obs.reshape((1,-1,dim)) ) # バッチサイズ1として計算
    x_predict[1:] = ret[0,:,0:2]
    V_predict[1:] = ret[0,:,2:6].reshape((-1,2,2))
    x_filter[1:]  = ret[0,:,6:8]
    V_filter[1:]  = ret[0,:,8:12].reshape((-1,2,2))

    elapsed_time = time.time() - start
    print("keras:      ", elapsed_time)
    
    return x_predict, V_predict, x_filter, V_filter
```


実行時間です（Ubuntu CPU実行時）

```
numpy:       0.001127481460571289
（省略）
tensorflow:  0.008805990219116211
keras:       0.018843889236450195
```
macOS built inのカラーピッカーをアプリのように使う方法

# やり方
Applications -> Utilites から Script Editorを起動。
`choose color`と書いて、Applicationとして保存。
![appleScript-color.jpg](https://qiita-image-store.s3.amazonaws.com/0/68213/9b6fde8c-a6a5-9f23-1fbf-63ba9ba2503f.jpeg)
![save-color-picker.jpg](https://qiita-image-store.s3.amazonaws.com/0/68213/4929b5d3-f3fb-2e89-3068-273b96ea8689.jpeg)

Applicationsから起動。
![maOS-color-picker.jpg](https://qiita-image-store.s3.amazonaws.com/0/68213/af8ab346-cb71-3780-7b41-c71db69371e4.jpeg)


# 参考・画像出典
https://www.addictivetips.com/mac-os/use-the-color-picker-in-macos-as-a-stand-alone-app/
超初心者が始めるLinux-自分用メモ-

#超初心者がLinuxを学習してみた
シリーズ１として、書き始めるが
基本は自分用のメモとして書こうと思います。


#現在のディレクトリを表示　pwd
・コマンド名の由来
　-　print working directory

・説明
　- 現在のディレクトリの場所を表示する

#画面の表示をクリア　clear
・コマンド名の由来
　- clear(消去する)

・説明
  - 画面をクリアする

#ディレクトリ作成　mkdir
・コマンド名の由来
  - make directory

・説明
　- ディレクトリを作成する

・オプション
　- p : サブディレクトリを含めてディレクトリを作成する
　ex)  mkdir -p sample2/sample3


#ディレクトリの中身をリスト表示　ls
・コマンド名の由来
　- list

・説明
　- ディレクトリの中身をリスト表示する

・オプション
　- l  : 詳細情報を表示してくれる
　- a  : 普段みられたくないファイル(ざっくり)を表示してくれる
　- la : 上二つの組み合わせ

#ディレクトリ間を移動　cd
・コマンド名の由来
　- change directory

・説明
　- 指定したディレクトリに移動する

#ディレクトリの移動　mv
・コマンドの由来
　- move
　
・説明
 　-ファイルやディレクトリを移動
　-ファイル名やディレクトリ名を変更

ex)
mv [移動させたいファイル/ディレクトリ] [移動させるディレクトリ]
mv sample2/sample3/ sample/

#ディレクトリの削除 rmdir
・コマンドの由来
　-remove directory

・説明
　- ディレクトリを削除

※オプションを指定しない時は、ディレクトの中身が空じゃないと削除できません！

・オプション
　- r  : ディレクトリの中身も含めて削除する
　- rf : 削除する際の確認を省略する
##今回はこれで終わり
以上、**超基本的**なコマンド7つでした！
次回は、ファイル操作周りをメモしていきたいと思います！
流体シミュレーションと機械学習

勉強になったので備忘録
https://blog.negativemind.com/2016/05/12/physics-forests/

# 記事概要
・従来の流体シミュレーションはナビエ・ストークス方程式（NS）を数値的に解く必要があり、解像度を上げると安定的な解への収束が急激に遅くなる問題が発生
　⇒　現状は解像度を下げて高速化
・本論ではRegression Forest（ランダムフォレストの回帰分析バージョン）を利用することで、毎回NSを解くことなく粒子の位置・速度を推定することが可能
・結果として、既存のシミュレーションに比べて10～1,000倍高速化
・著者の1名はDisney Research研究者
強化学習とCNNアーキテクチャデザイン【論文レビュー】

原著論文を読んだので備忘録がてらまとめた。
Baker et. al. (2017) "Desiginig Neural Network Architectures Using Reinforcement Learning"
https://arxiv.org/pdf/1611.02167.pdf

# 論文概要
- 畳み込みニューラルネット（CNN）は各層の定義の自由度が高く、その分エンジニアによる手作業（匠の技？）が必要
    - 各層を{畳み込み層、プーリング層 、全結合層}いずれにするか
    - 上記を選んだうえで、どのようなハイパーパラメータをセットするか（畳み込み層ならフィルタの数、フィルタサイズ、ストライド）
- 本論文では強化学習モデルにより上記の作業を自動化することに成功（MetaQNNモデル、添付Figure2参照）

<img width="546" alt="Image1.png" src="https://qiita-image-store.s3.amazonaws.com/0/107669/b239abd2-7613-43eb-a235-49ef99146f6d.png">

- 層の種類とハイパーパラメータ候補（状態空間）から、各層においてどの種類の層とパラメータを強化学習により選択
    - 例えば、Layer1でC(64,3,1)を選ぶと畳み込み層、3x3のフィルタを64枚、ストライドは1x1と設定
    - 単純なQ学習だけだと、1)状態空間が広大であると学習が進まない、2)過度の最適化は局所最適に陥るリスクが高い、という問題があるので、2)に対してε-Greedyメソッドで過度の最適化を抑え、1)に対してexperimental replayメソッドで効率化を図る
- 結果として、既存のエンジニアによる手作業で構築されたCNNと比べ、4つのデータサンプル全てにおいて低エラー率のモデルを構築することができた（添付Table3参照）

<img width="553" alt="Image.png" src="https://qiita-image-store.s3.amazonaws.com/0/107669/59dcb0ba-5ace-c579-202a-2ca1c39a3172.png">

#コメント
- エンジニアの作業を極小化して自動的に学習を進めるモデルは非常に面白い
- ただ、すべてを自動化する代償に計算時間が膨大になってしまっている
    - 本論文では1モデルあたり、最大12層のCNNを5,000回の訓練回数で学習し、それを2700モデル繰り返す（5,000 x 2,700=135万回の訓練）
    - CNNの訓練回数として1モデルあたり5,000は非常に少ない。本当にモデルあたりのパフォーマンスを上げるなら数十万回の訓練が必要。そうすると、数十万ｘ2,700というとんでもない計算時間がかかる
    - もちろん、experience replayを活用して過去のモデル評価結果を効率的に利用してはいるが、それでも訓練回数が劇的に減少するとは思えない
- また、既に強化学習ではなく、ベイジアンフレームワークを活用してハイパーパラメータの自動最適化するといったモデルがいくつか提唱されているみたいなのでそれと比較してみたい
- just ideaだが、遺伝的アルゴリズムｘCNNも親和性が高い気がする
Emacs のキーバインドが忘れられない VisualStudio ユーザーに捧げる のVSCode 版

「[Emacs のキーバインドが忘れられない VisualStudio ユーザーに捧げる](https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.Emacsemulation)」のVSCode版です。
まあ各環境でキーバインドは極力合わせたいんでね。

```json:keybindings.json
[
    {
        "key": "ctrl+p",
        "command": "cursorUp",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+p",
        "command": "workbench.action.quickOpenNavigateNext",
        "when": "inQuickOpen"
    },
    {
        "key": "ctrl+alt+p",
        "command": "workbench.action.quickOpen"
    },
    {
        "key": "ctrl+n",
        "command": "cursorDown",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+n",
        "command": "workbench.action.files.newUntitledFile"
    },
    {
        "key": "ctrl+f",
        "command": "cursorRight",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+f",
        "command": "defaultSettings.action.focusSearch",
        "when": "defaultSettingsEditor"
    },
    {
        "key": "ctrl+alt+f",
        "command": "actions.find"
    },
    {
        "key": "ctrl+b",
        "command": "cursorLeft",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+b",
        "command": "workbench.action.toggleSidebarVisibility"
    },
    {
        "key": "ctrl+a",
        "command": "cursorHome",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+a",
        "command": "editor.action.selectAll"
    },
    {
        "key": "ctrl+e",
        "command": "cursorEnd",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+e",
        "command": "workbench.action.quickOpenNavigateNext",
        "when": "inQuickOpen"
    },
    {
        "key": "ctrl+alt+e",
        "command": "workbench.action.quickOpen"
    },
    {
        "key": "ctrl+w",
        "command": "cursorWordRight",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+r",
        "command": "cursorWordLeft",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+d",
        "command": "deleteRight",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+h",
        "command": "deleteLeft",
        "when": "editorTextFocus"
    },
    {
        "key": "delete",
        "command": "deleteWordRight",
        "when": "editorTextFocus"
    },
    {
        "key": "backspace",
        "command": "deleteWordLeft",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+alt+h",
        "command": "editor.action.startFindReplaceAction"
    },
    {
        "key": "ctrl+h",
        "command": "-editor.action.startFindReplaceAction"
    },
]
```