OmniAICreator/Qiita-1.07M huggingface dataset:
vsh で HashiCorp Vault をインタラクティブに操作する

# vsh とは

HashiCorp Vault 内に格納されているシークレットをインタラクティブに操作できる Go製 の CLI です。
https://github.com/fishi0x01/vsh
![66355982-9872a980-e969-11e9-8ca4-6a2ff215f835.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49924/339ea0db-09f5-e998-bc5b-a762bb179086.gif)
シークレットパスをディレクトリのように扱うことが可能で補完機能も充実しており、2019年10月10日 (木) に最初のバージョン `v0.1.0` がリリースされました。Vault KV v1, v2 をサポートしており `Interactive mode` と `Non-interactive mode` の2つのモードで実行が可能となっています。

# インストール方法

バージョンは以下を参照ください。
https://github.com/fishi0x01/vsh/releases

macOS の場合

```bash
VERSION=v0.1.1
wget https://github.com/fishi0x01/vsh/releases/download/${VERSION}/vsh_darwin_amd64
mv vsh_darwin_amd64 /usr/local/bin/vsh
chmod a+x /usr/local/bin/vsh
```

Linux系OS の場合

```bash
VERSION=v0.1.1
wget https://github.com/fishi0x01/vsh/releases/download/${VERSION}/vsh_linux_amd64
chmod a+x vsh_linux_amd64
mv vsh_linux_amd64 /usr/local/bin/vsh
chmod a+x /usr/local/bin/vsh
```

# サポートされているコマンド

`v0.1.1` では以下のコマンドがサポートされています。

```
mv <from-path> <to-path>
cp <from-path> <to-path>
rm <dir-path or filel-path>
ls <dir-path // optional>
cd <dir-path>
cat <file-path>
```

# 手元で vsh を試したい方はこちら

Root Token を `root` に設定して Vault を ["Dev" Server Mode](https://www.vaultproject.io/docs/concepts/dev-server.html) で起動します。

```bash
$ docker run -d --name vault -p 8200:8200 --cap-add=IPC_LOCK -e 'VAULT_DEV_ROOT_TOKEN_ID=root' vault:1.2.3
ba773aa8c7a2fbd6014c7969c310191a16f12394e81c614df2a5d160bb94644f
```

シークレットがないと操作感を体感できないと思うので、以下のコマンドでテストデータを追加します。

```bash
for env in dev stage prod; do
    for i in {1..5}; do
        docker exec \
            -e 'VAULT_ADDR=http://localhost:8200' \
            -e 'VAULT_TOKEN=root' vault \
            /bin/vault kv put secret/${env}/service${i}/password password=${RANDOM}
    done
done
```

vsh は `v0.1.1` を使用します。

```bash
$ vsh -version
v0.1.1
```

`VAULT_ADDR` と `VAULT_TOKEN` を指定して vsh を実行すると `Interactive mode` で起動するので、あとは手元で操作感を体感してみてください。

```bash
$ export VAULT_ADDR=http://localhost:8200
$ export VAULT_TOKEN=root
$ vsh
```

vsh を終了する際には `exit` と入力してください。

```bash
$ vsh
http://localhost:8200 /> exit
```

以下で `Non-interactive mode` での実行も可能です。

```bash
$ vsh -c 'cat secret/prod/service1/password'
password = 2768
destroyed = false
version = 1
created_time = 2019-10-15T14:49:59.9722335Z
deletion_time =
```

コンテナのお片付けも忘れずに。

```bash
$ docker rm -f vault
vault
```

# まとめ

HashiCorp Vault をインタラクティブに操作する vsh の紹介でした。
実際に触ってみて便利だったのでこれから使っていこうと思います。
Debian 9にNginx stable最新版をインストール（公式repository）

# はじめに

公式repositoryを利用してDebian9にNginx stable最新版をインストール
親記事：[Nginxの各種インストール方法とEOLまとめ](https://qiita.com/witchcraze/items/df4a0baaaad9c932ea30)
参考：[nginx: Linux packages](https://nginx.org/en/linux_packages.html#Debian)

## サポート

本手法で導入した場合、nginxの開発が停止するまでサポートされると思われる。
特定のバージョンを指定しなければ、stable最新版が常に提供されると思われる。

## LOG

### レポジトリ登録

```shell-session
# apt update; apt install -y curl gnupg2 ca-certificates lsb-release
# echo "deb http://nginx.org/packages/debian `lsb_release -cs` nginx" | tee /etc/apt/sources.list.d/nginx.list
# curl -fsSL https://nginx.org/keys/nginx_signing.key | apt-key add -

# apt-key fingerprint ABF5BD827BD9BF62
pub   rsa2048 2011-08-19 [SC] [expires: 2024-06-14]
      573B FD6B 3D8F BC64 1079  A6AB ABF5 BD82 7BD9 BF62
uid           [ unknown] nginx signing key <signing-key@nginx.com>
```

### インストール

```shell-session
# cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
VERSION_CODENAME=stretch
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

# apt update; apt install -y nginx
... 略
```

### 各種確認

```shell-session
# which nginx
/usr/sbin/nginx

# nginx -v
nginx version: nginx/1.16.1

# apt show nginx
Package: nginx
Version: 1.16.1-1~stretch
Priority: optional
Section: httpd
Maintainer: Sergey Budnevitch <sb@nginx.com>
Installed-Size: 3003 kB
Provides: httpd
Depends: init-system-helpers (>= 1.18~), libc6 (>= 2.17), libpcre3, libssl1.1 (>= 1.1.0), zlib1g (>= 1:1.1.4), lsb-base (>= 3.0-6), adduser
Conflicts: nginx-common, nginx-core
Replaces: nginx-common, nginx-core
Homepage: http://nginx.org
Download-Size: 843 kB
APT-Manual-Installed: yes
APT-Sources: http://nginx.org/packages/debian stretch/nginx amd64 Packages
Description: high performance web server
 nginx [engine x] is an HTTP and reverse proxy server, as well as
 a mail proxy server.

N: There are 8 additional records. Please use the '-a' switch to see them.
```
Debian 9にNginx mainline最新版をインストール（公式repository）

# はじめに

公式repositoryを利用してDebian9にNginx mainline最新版をインストール
親記事：[Nginxの各種インストール方法とEOLまとめ](https://qiita.com/witchcraze/items/df4a0baaaad9c932ea30)
参考：[nginx: Linux packages](https://nginx.org/en/linux_packages.html#Debian)

## サポート

本手法で導入した場合、nginxの開発が停止するまでサポートされると思われる。
特定のバージョンを指定しなければ、mainline最新版が常に提供されると思われる。

## LOG

### レポジトリ登録

```shell-session
# apt update; apt install -y curl gnupg2 ca-certificates lsb-release
# echo "deb http://nginx.org/packages/mainline/debian `lsb_release -cs` nginx" | tee /etc/apt/sources.list.d/nginx.list
# curl -fsSL https://nginx.org/keys/nginx_signing.key | apt-key add -

# apt-key fingerprint ABF5BD827BD9BF62
pub   rsa2048 2011-08-19 [SC] [expires: 2024-06-14]
      573B FD6B 3D8F BC64 1079  A6AB ABF5 BD82 7BD9 BF62
uid           [ unknown] nginx signing key <signing-key@nginx.com>
```

### インストール

```shell-session
# cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 9 (stretch)"
NAME="Debian GNU/Linux"
VERSION_ID="9"
VERSION="9 (stretch)"
VERSION_CODENAME=stretch
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"

# apt update; apt install -y nginx
... 略
```

### 各種確認

```shell-session
# which nginx
/usr/sbin/nginx

# nginx -v
nginx version: nginx/1.17.4

# apt show nginx
Package: nginx
Version: 1.17.4-1~stretch
Priority: optional
Section: httpd
Maintainer: Sergey Budnevitch <sb@nginx.com>
Installed-Size: 3010 kB
Provides: httpd
Depends: init-system-helpers (>= 1.18~), libc6 (>= 2.17), libpcre3, libssl1.1 (>= 1.1.0), zlib1g (>= 1:1.1.4), lsb-base (>= 3.0-6), adduser
Conflicts: nginx-common, nginx-core
Replaces: nginx-common, nginx-core
Homepage: http://nginx.org
Download-Size: 845 kB
APT-Manual-Installed: yes
APT-Sources: http://nginx.org/packages/mainline/debian stretch/nginx amd64 Packages
Description: high performance web server
 nginx [engine x] is an HTTP and reverse proxy server, as well as
 a mail proxy server.

N: There are 33 additional records. Please use the '-a' switch to see them.
```
GitHubの複数アカウントをコマンドから操作しよう

# はじめに

GitHubの使っていたアカウントのレポジトリがぐちゃぐちゃになってしまって何が何だかわからない！
って事でGitの練習も兼ねてサブアカウントを作ってコマンドから両方操作できるようにしてみようと思った次第です。

## サブアカウントを作ろう

Githubで普通にサブアカウントを作りました。

## ssh認証鍵を作ろう

`ssh-keygen -t rsa -b 4096 -C "your_email@example.com"` => sshキーを生成 ( `-t`:鍵のタイプ。 `-b`:鍵の長さ。デフォルトは2,048bitだがGithubは安全性の高い4,096bitを推奨している。`-C`:コメント )

`ls ~/.ssh/id_rsa_github*` => 生成した鍵の確認

`chmod 600 ~/.ssh/id_rsa_github` => 秘密鍵(.pubがついてない方)のパーミッションを変更

`vi ~/.ssh/config` => sshのコンフィグファイルに以下のように記述する

```
Host github-sub
  HostName github.com
  IdentityFile ~/.ssh/sub_rsa
  User git
  Port 22
  TCPKeepAlive yes
  IdentitiesOnly yes
  
Host github
  HostName github.com
  IdentityFile ~/.ssh/main_rsa
  User git
  Port 22
  TCPKeepAlive yes
  IdentitiesOnly yes
```

`ssh -T <HOST>` => ssh接続できているかの確認

<img width="682" alt="スクリーンショット 2019-10-08 10 24 24" src="https://user-images.githubusercontent.com/55518345/66364083-14491200-e9bb-11e9-9e58-a74a26f5567c.png">

## Gitのコンフィグファイルを編集しよう

`vi ~/.bashrc` => bashの設定ファイルをvimで開きます。

`iキー`を入力してインサートモードにしてから

以下を.bashrcの中に追記してください。

```
function tomain() {
  git config --global user.name "<MAIN_ACCOUNT>"
  git config --global user.email "<MAIN_ADDRESS>"
}

function tosub() {
  git config --global user.name "<SUB_ACCOUNT>"
  git config --global user.email "<SUB_ADDRESS>"
}
```

`escキー` => `:wq`で保存です。


次に.bashrc内記述を反映させるために`source ~/.bashrc`コマンドを実行してください。

これで、

`tomain` => メインアカウントに切替え
`tosub` => サブアカウントに切替え

コマンドでアカウント切替えができるようになりました。


## Githubで鍵を設定しよう

`setting` => `SSH and GPG keys` => `New SSH key`

中に`open ~/.ssh`で確認できる、
`.pub`がついているファイルをテキストエディタ等で開いてコピーペーストしてください。

## 複数アカウントによる問題点

1. `git init`
2. `git add <ファイル名>`
3. `git commit -m "<コメント>"`
4. `git remote add origin <URL(https://github.com/<アカウント名>/<レポジトリ名>.git)>`
5. `git push -u origin master`

複数アカウントがあると、これではエラーになります。
( sshのコンフィグファイルがしたに記述した方を優先的に使用するからです。 )
そこで、

1. `git init`
2. `git add <ファイル名>`
3. `git commit -m "<コメント>"`
4. `git remote add origin git@github(-sub):<URL(<アカウント名>/<レポジトリ名>.git)>`
5. `git push -u origin master`

これで解決です。

## 参考サイト
・ [今日からはじめるGitHub](https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000)

・ [複数のgitアカウントを使用する場合](https://qiita.com/yamataku29/items/4744c9c70ad793c83b82)
「美しい」にモヤったら「認知負荷が小さい」と言いかえよう

プログラミング業界では定期的に「美しいコード」が話題になり、そのたびに炎上が発生します:

- コードの美しさは実務には関係ない
- 美しくても動かなければ意味がない
- 「美しさ」は主観的で、プログラマーの自己満足に過ぎない
- 汚くたって俺は読める。読めないお前が悪い

などなど・・・

私もコードは美しくあれかしとは思いつつも、

- 「確かに『美しい』って曖昧だよな」とか、
- 「どうして `=` の位置がそろっているのを『美しい』というのだろう？『整然としている』なら分かるけど」とか、
- 「『可読性が高い』でもいいけど、今一つ『美しい』との違いが判らん」
- 「そもそも、どうして美しいコードの方が読みやすいと言えるんだ？」

と、割り切れなく思っていました。

ところで、最近の心理学・脳科学ではこんな説があるようです（本当かどうかは知らないよ）：

> 中野：（中略）美人の顔って対称性が高いって言われますよね。あれは別に体が健康だからではなくて。体の健康さとは相関がないということがわかったんです。
>
> 佐渡島：あ、そうなんですか。
> 
> 中野：実は、認知しやすいから。
> 
> 佐渡島：顔の認知が。
> 
> 中野：顔の対称性が高かったら、半分のリソースで済みますよね？
> 
> 佐渡島：右目と左目で違う脳を使ってますもんね。
> 
> 中野：そうですね。すごく楽に認知できるわけです。平均顔に近い人も平均顔だから、それも認知負荷が低い。認知負荷が低い顔ほど、好ましく思う。
> 
> 佐渡島：へぇ。健康な体を見分けてるわけじゃないんですね。
> 
> 中野：うん、違うみたいですね。「今までそういうふうに言われてたけど、どうも違うようだ」という説が出てきてます。
> 
> [なぜ左右対称の顔を美しいと感じるのか？　私たちの脳の意外な判断基準 \- ログミーBiz](https://logmi.jp/business/articles/299725/3)

これを見てピンと来ました。


モヤモヤしがちな「美しいコード」は、**「認知負荷が小さいコード」** と言いかえられるのではないでしょうか？

例えば・・・

**例：「= や ) の位置を揃えよう」**
△位置が揃っていると美しいから。
〇位置が揃っていると、位置を毎回確認する必要が無く、認知負荷が小さいから。

**例：「クラスや関数に一貫性のある命名をしよう」**
△名前が一貫していると美しいから。
〇名前が一貫していると、一見するだけでクラスや関数の役割や動作が把握でき、認知負荷が小さいから。


「認知負荷が小さいコード」の良いところは、「美しいコード」よりも**応用が広く利きそう**なことです。

**例：「関数を切り出すときは意味のある名前を付けられる範囲を選ぼう」**
〇人間の脳は、意味のある名前のついたものを理解しやすい特性があり、「ステップ２」「～のあとに必要な処理全部」のような抽象的な名前より、意味のある名前の方が認知負荷が小さいから。

**例：「関数名やテストの見出しには、単語の羅列ではなく、英文法的に正しい名づけをしよう」**
〇人間の脳は、単語の羅列よりも文法的な文を効率的に処理できるようになっており、正しい文の方が認知負荷が小さいから。


「美しいコード = 認知負荷が小さいコード」はあくまで私の思いつきですが、先輩の言う「美しいコード」に納得できなかったり、後輩が頑なに「美しいコード」を拒んだりしたときは、「認知負荷が小さいコード」を思い出してみてください。
【Oracle DB】ROWNUMを使って大量データを10万件ずつ削除する

# テーマ：ROWNUMを使って10万件ずつ削除する
テーブル[BIGDATA]から50万件のデータを削除する。
ROWNUMを使った下記スクリプトを実行し、10万件ずつ削除する。

```SQL:SQL
DELETE
FROM BIGDATA
WHERE ROWNUM BETWEEN '1' AND '100000';
```

上記SQLとCOMMITを５回繰り返し、データを削除した。

# 説明：ROWNUMについて
ROWNUMは、テーブルの取得結果に付けられた連番のことである。
特徴は下記２点。

> 1.  連番は”1”からスタートする。
> -  ORDER BY句でソートする前の状態に連番が付与される。

上記SQLではテーブル[BIGDATA]の取得結果に対して、
1番目～100,000番目のデータを削除している。

# 補足：10万件ずつ削除する理由
- UNDO領域のパンクを防ぐ<br>
DELETEしたデータが大きすぎる場合、下記エラーが出現する場合あり。

```
ORA-30036: UNDO表領域内でセグメントを拡張できません
```
JavaScriptの基本箇所についての復習①(console.log()と関数)

#はじめに
JavaScript(以下js）の復習をやっているので、知識の定着を兼ねて、
最初歩の部分をまとめてみます。
jsのコードについて記載しているので、html部分の説明はありません。
別途投稿します。

#内容
最終的には、LINEのような非同期通信について語りたいですが、
まずはjsで関数を作れるようにしたいと想います。

#実行

まずは一番簡単な文字の出力です。

```js:basic.js

console.log("hello.world");
```

rubyで言えば```puts ```にあたり、
()内の文字を表示する事ができます。
今回の場合は'hello.world'と表示されます。

変数を使用する場合は、

```js:basic.js

var word = "hello.world";
console.log(word);
```
jsの変数定義は、文頭に'var'をつけます。
'var'がついている所は変数定義しているとわかるので、長いコードの中でも見つけやすいです。
これで、'word'の中身を変えるだけで表示される内容を変えられるようになりました。

次に関数です

```javascript:basic.js

function Hello(){
  console.log("hello.world");
}
```

関数の基本形は

```js:basic.js

function 関数名(引数){
  処理名;
}
```

となっており、今回の関数は、
**Helloは'hello.world'を表示する**
というものになります。

#終わりに
最初の文の説明記事を作成することにより、自分への知識定着を図りました。
同時に、もしも自分のように「jsを超基礎から勉強したい・し直したい」という方に参照いただければ幸いと思います。

[次の記事](https://qiita.com/Moon1126Snow/items/80fa35ba5850aee2b1fe)では、引数を使ったjsの書き方について投稿したいと思います。
リネームした Dockerfile を VSCode に認識させる

## 背景
Dockerfile ファイル名を `Dockerfile.dev` や `Dockerfile-php.prod` など，デフォルトの `Dockerfile` からリネームすることがありますよね。VSCode を使っている場合，デフォルトの `Dockerfile` なら言語関連付けしてくれますが，リネームした場合はプレーンテキストとしか認識してくれません。そうなると当然シンタックスハイライトや補完や言語別のフォーマッターが効かないため，激萎えします。

その対策として，リネーム後も Dockerfile として言語関連付けして，ついでにフォーマッターの設定もする方法を説明します。

## 環境
- macOS: High Sierra(10.13.6)
- Visual Studio Code: 1.38.1

なお今回は Dockerfile ファイル名の命名規則を `Dockerfile〇〇` とし，インデントをスペース 4 つとして設定します。

## 手順
1. Dockerfile に言語関連付けする
2. Dockerfile のエディタ設定を上書きする

どちらも `settings.json` を編集するだけです。`settings.json` については[こちら](https://www.atmarkit.co.jp/ait/articles/1708/23/news026.html)をどうぞ。

### 1. Dockerfile に言語関連付けする
`settings.json` に以下を追記します。

```json
  "files.associations": {
    "Dockerfile*": "dockerfile"
  }
```

`*` はワイルドカードですので，先頭に `Dockerfile` が付いていれば `Dockerfile.dev` でも `Dockerfile-php.prod` でも何でもいけるようになります。

### 2. Dockerfile のエディタ設定を上書きする
同じく `settings.json` に以下を追記します。

```json
  "[dockerfile]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
  }
```

`"editor.insertSpaces"` が true だとタブを押下したときスペースが挿入されます。
`"editor.tabSize": 4` で タブ 1 つ分に相当するスペースの数を 4 つに設定します。

以上で保存すれば完了です。

## 確認
画面の右下の赤枠の部分を見てみると，設定した項目が反映されています。

<img width="600" alt="スクリーンショット 2019-10-15 13.06.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309854/57c1f16e-fb7e-bed6-85b5-6ce618264f3f.png">

## 参考
[Visual Studio Codeの設定「虎の巻」：IDE編](https://www.atmarkit.co.jp/ait/articles/1708/23/news026.html)
【jQuery】ヘッダーをposition:fixed;した場合のページ内リンク位置調整

##開始タグ
headerをfixedした際に、ページ内リンク先へ飛ぶとコンテンツとheaderが被って見辛い、なんてことがあると思います。
今回はその現象を解決するメモ。

##方法
以下のように、ページ遷移時のアニメーションに追加で記述してあげればOK！

```javascript:sample.js

$(window).on("load resize", function() {
	var breakpoint = 768; //ブレイクポイント設定
	var browseWid = $(window).width(); //ブラウザの横幅取得
	var widPc = browseWid > breakpoint; //PC表示のとき
	var widSp = browseWid <= breakpoint; //SP表示のとき

	$(document).on("click", "a[href^='#']", function() {
		if (widPc) {
			var headerHight = 125; //ヘッダの高さ
		} else if (widSp) {
			var headerHight = 80; //ヘッダの高さ
		}
	
		var speed = 800; // ミリ秒
		var href = $(this).attr("href"); // アンカーの値取得
		var target = $(href == "#" || href == "" ? "html" : href); // 移動先を取得
		var position = target.offset().top - headerHight; // 移動先を数値で取得（ここでヘッダー分の高さを引く）
		$("body,html").animate({ scrollTop: position }, speed, "swing");// スムーススクロール
		return false;
	});
});
```
`var position = target.offset().top - headerHight;`ここで`headerHight`＝`headerの高さ`を引く部分がポイント。

##閉じタグ
PC/SP別で絶対値を指定してあげるもよし。
headerの高さを自動で取得するようにするもよし。
これでページ内リンク先が見やすくなりました。
コードレビューのポイント

* 例外の握りつぶしがないか
  * catchブロックで発生した例外によってもとの例外が消えないか。
  * 例外を別の例外でラップする際、もとの例外を含めているか
  * `e.printStacktrace` がないか（コーディング規約などによって認められる場合を除く
  * ログに出力する、 e.addSuppressed など、発生した例外の情報が追えるようにしておく。 
  * 握りつぶしても良い場合は握りつぶしても良いとする理由をコメントで明記する
* （特定の状況を除いて）変数の上書きがないか
  * 上書きしなければならない変数は通常カウンタぐらい。 
* 早期リターンを適用可能な状況でブロックのネストをしていないか
  * if(isXXX) {} など if ブロックで処理している場合、 if(!isXXX){ return; } が適用できないか検討する。
* リソースのクローズ漏れがないか
  * InputStream/OutputStream等の Closeable/AutoCloseable は try-with-resources を積極的に利用する
  * 明示的にクローズしない場合はクローズするタイミングやクローズしない理由をコメントで明記する
* 過剰なチェック処理がはいっていないか
  * public メソッドの nullを許容する/しないなどは Javadoc に明記しておく。
  * return null; しているコードは極力 Empty を表す定数を返す（Optional#empty() や Collections#emptyList() とか)
  * return null が異常な状態なのであれば例外を投げる、またはステータスを表すクラスを戻り値とするなど。
* ライブラリなどで定義されている定数を活用しているか
  * HTTPステータスコードなど。
* IN/OUT系処理はバッファリングしているか
  * 生のInputStreamではなくBufferedInputStreamを利用する等
* 高頻度で出現する特定コードの適切なクラス化、ユーティリティ化がなされているか
  * 継承より委譲に基づいて原則的には委譲する。
* is - a にならない継承をしていないか
  * instance of のようなインスタンスによって分岐する処理が多いようならば適切な継承関係が保てていない可能性が高い
* コンストラクタでリソースのオープンしていないか。
  * コンストラクタでリソースオープンさせるのであればstaticファクトリメソッドなどを検討する。
* 定数は enum を適用できないか
Google AIY (RaspberryPi zero)を再installした時に、apt update & upgradeが通らない件の対処

#時間を直す
あまりにもズレていると同期がとれないとのこと。
これをやらないと通らないかは試していないが、再インストール時に明らかに時間がずれていたので、直した。

```
$ sudo date --set=" 2019-10-15 23:22:30"
$ sudo dpkg-reconfigure tzdata
```

[参考]https://white02.hatenablog.com/entry/2018/07/03/015108

#nameserverを直す
```
$ sudo vim /etc/resolv.conf
```
でnameserverを172.0.0.1 から 8.8.8.8にする。

```
$ sudo /etc/init.d/networking reload
```
[参考]http://engetu21.hatenablog.com/entry/2015/04/11/131949
（ここでは8.8.8.8を変えるようにあるが、172.0.0.1を8.8.8.8にしたら直った。）
【iOS13】swifterを用いた際のcallback URLのSceneDelegateへの記述

## はじめに
・2018年10月31日をもってTwitterKitのサポートが終了した。
・twitter連携アプリに、swifterを利用することにした。
>[swifterのgitレポジトリ](https://github.com/mattdonnelly/Swifter)

・xcode11からSceneDelegateが導入されたされたため、callback urlの記述場所を変える必要がある。
・これに関して記述した記事がなくてめっちゃ詰まったので、記録として残す。
・全体的な手順は、[この記事](https://qiita.com/noby111/items/532f3d806b19ab46433a#_reference-ce916023255374116460)に従いました。わかりやすい。AppDelegateではなくSceneDelegateへの記述をしないとアプリが動かずめちゃくちゃ詰まったため、そこを書きます。


## 環境

xcode11.0
swift 5.0.1
iOS13

## SceneDelegate上にコールバックUrlを設定

xcode11から、SceneDelegate.swiftが追加された。これにより、これまでAppDelegateに記述されていたコードの多くが、SceneDelegateに移行された。

>[【iOS】AppDelegate.swiftってなにしてんの？](https://qiita.com/SoyaTakahashi/items/cc8f48af792c353cd9f3)
>[【xcode 11】新たに導入されたsceneDelegateの各メソッドが呼ばれるタイミング](https://qiita.com/ninoko1995/items/b28a712d5f620dbebb6f)

ゆえに、Twitter認証後にアプリに帰ってくる際に実行されるメソッドも、変化している。

### これまで
AppDelegate上の`application(_:open url:)`関数が、urlにてアプリが開かれた場合に実行されるメソッドのため、

```swift:AppDelegate.swift
import Swifter
## 省略 ##

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        return Swifter.handleOpenURL(url, callbackURL: URL(string: "swifter-{Consumer API key}://")!)
    }

## 省略　##
```

と記述することでcallback後の挙動を制御できていた。


### 今後

・Xcode11では、SceneDelegate上の`scene(_:openURLContexts:)`関数が、urlにてアプリが開かれた場合に実行されるメソッドとなっている。
・CustomURLSchemeを設定する場合には、アプリ遷移後の挙動は`scene(_:openURLContexts:)`関数で制御する。
>[stackoverflow : Custom URL Scheme not working on Swift 5, Xcode 11](https://stackoverflow.com/questions/57962362/custom-url-scheme-not-working-on-swift-5-xcode-11)

・URLContextsには何が格納されているのか。
実際に何が格納されているのかを確認する。以下のコードを記述後、シミュレータ上のsafariで`swifter-<ConsumerAPIkey>://`を入力し、アプリに飛ぶと出力は以下。

```swift:SceneDelegate.swift
import Swifter
## 省略 ##

    // callback urlの設定
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>){
        print(URLContexts)
    }

## 省略 ##
```

<img width="870" alt="スクリーンショット 2019-10-15 22.41.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270898/fba016d7-af52-f197-9d7b-dc28ef2db1aa.png">

これより、どうやら`URLContexts`には要素数が一つの`UIOpenURLContext`の配列が格納されているらしい。
ゆえに、`URLContexts`配列の一つ目の`UIOpenURLContext`要素のurl変数を取得すれば良いことがわかる。

以上から、SceneDelegate上に以下のように記述しなければいけない。


```swift:SceneDelegate.swift
import Swifter
## 省略 ##

    // callback urlの設定
    func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>){
        Swifter.handleOpenURL(URLContexts.first!.url, callbackURL: URL(string: "swifter-<ConsumerAPIkey>://")!)
    }

## 省略 ##
```


・`scene(_:openURLContexts:)`に関連する公式ドキュメントは以下。
>[Apple Developer : scene(_:openURLContexts:)](https://developer.apple.com/documentation/uikit/uiscenedelegate/3238059-scene)
>[Apple Developer : Set](https://developer.apple.com/documentation/swift/set)
>[Apple Developer : UIOpenURLContext](https://developer.apple.com/documentation/uikit/uiopenurlcontext)


## まとめ
Xcode11でのCustomURLSchemeに関しての記事がめちゃくちゃ少なくて、これを調べるだけですごい時間かかりました。
探すのが大変だったので、備忘録として。
今後はtwitter連携アプリを作り込んでいきたいと思うので、それも記事にできればと。
面接でされて嬉しかった行動個人ランキングTOP 3

転職活動での面接、カジュアル面談、勉強会での1on1で経験した、「相手にされて嬉しかった行動」を書いてゆきます。

※「されて嫌な行動」は書きません。アンチパターンとしての知見になりそうですが、まだ情報が足りないので。

# 第1位 「しっかりしたフィードバックをしてくれる」
カジュアル面談で自分が気を抜いて雑な態度を取ってしまったとき、面談してくれた人が「**初対面でそういう態度を取る人は、わが社では厳しい。会社のコミュニケーションは、結局はどれだけ相手を助けたいと思うかが大事だ。狭い業界、どこかで一緒に仕事をすることになるかもしれない。相対する人１人１人に、真摯な態度で接するようにしてほしい**」と言ってくれました。

正直、**かなり耳の痛いことを言われたな**と思いましたが、いっぽうで「**こんなに真剣に真っすぐに叱ってもらったことも最近無かった**」と思いました。当然、その面接は落ちてしまいましたが、とても良い経験になったと思います。ぬるま湯に溺れそうになっていたときに、ガツンと言ってもらったことを今ではとても感謝しています。

このような、しっかりしたフィードバックがあると、とても励みになります。例えば、お祈りメールであっても、「何故マッチしなかったか」、「どんな会社のどこのポジションなら向いていそうか」が書いてあると、次に活かすことが出来ます。

**自分に何が足りないか、新しい気づきを与えてくれるフィードバックは、ポジティブかネガティブかに関わらずとても嬉しいです**。痛みを伴うものだからこそ教訓にできるのです。

# 第2位 「行動の意図を説明してくれる」
面接の最初に、「**これから面接内容を記録するためにノートパソコンを開きますけど、お気になさらないでくださいね**」と一言いってもらえたのは嬉しかったです。とても安心できました。

面接官がノートパソコンのキーボードを叩きながら進行することは珍しくないですが、面接される方からはノートパソコンのディスプレイが見えないので、不安な気持ちになるときがあります。**電車の中で電話する人に不快感を感じるのに似ていると思います**。

普段の仕事であれば全く問題ないのですが、求職者は相手方の会社に赴き、不慣れな環境や不慣れな状況で面接することが多く、完全なアウェイといって良いでしょう。必然的に、求職者は不安でソワソワし、些細なことが不信感を煽ることになります。

何も言わずにいきなり目の前で高速にキーボードを叩く姿を見せつけられると、「いったいどんな内容を打鍵しているのかわからない。もしかしたら内職でもしているのではないか」と邪推してしまうかもしれません。そういった不安が解消されるような説明を言って貰えるのは嬉しいです。

# 第3位 「辛い体験を喋ってるときに共感する態度を取ってくれる」
面接や1on1で、自身の成功体験を話すときに過去の辛かった体験から話すことがあります。そんなときに、**眉をしかめて辛そうな表情をして頷く動作をしてもらったことがあり、とても勇気づけられました**。

辛い体験を相手に話すのは、シラフの状態では言いにくいです。本当に辛い体験はトラウマになっているので、詳細に説明することが難しいのです。面接の場合、初対面の人にそういった話をしなければならないので、話していても「ちゃんと相手に伝わっているかな」と不安になります。

なので、**表情や相槌で、話している人の感情に寄り添うように行動してもらえたことで、とても勇気づけられました**。

# まとめ
以上、相手にしてもらって嬉しかった行動でした。
**「ちゃんと自分の話を聞いてくれているんだな」という安心感と、「きちんと向かい合ってくれているんだな」という信頼感**があると、嬉しくなるんだなと思いました。

自分が面接官になったときや、日常の活動でも、意識していけたら良いなと思います。

# 参考文献

- [『フィードバック入門
耳の痛いことを伝えて部下と職場を立て直す技術』](https://www.php.co.jp/books/detail.php?isbn=978-4-569-83290-6)
- [『マイクロカウンセリング技法―事例場面から学ぶ』](https://www.kinokuniya.co.jp/f/dsg-01-9784759916379)
- [『エンジニアリング組織論への招待
～不確実性に向き合う思考と組織のリファクタリング』](https://gihyo.jp/book/2018/978-4-7741-9605-3)
- [『ワインバーグのシステム行動法』](https://www.kyoritsu-pub.co.jp/bookdetail/9784320027084)
RPAへの理解がぐっと深まる、RPAがよくこける理由

##はじめに

みなさんはRPA使ってますか？

労働力不足にも関わらず、残業時間の削減が求められる日本において、**「プログラミング経験不要で、誰でも簡単に業務が自動化できるツール！」**という触れ込みで、RPAは働き方改革の特効薬として注目され、急速に広まりました。

導入によって最初はどの企業でも一定の効果が出るため、「よし！この調子でどんどん開発しよう！」となるのですが、しばらくすると想定以上にロボットがよくこけるため、「どんどん開発するつもりだったのに、運用と保守に時間が取られてしまい、なかなか開発が進められない・・」という状況に陥ります。既に大規模展開を実施されている方は、当初の開発計画と大きく乖離した苦い経験をされている方も多いのではないでしょうか。

本記事は「RPAはなぜよくこけるのか」という事を正しく理解するために、簡潔に2枚の絵を使って書いて行きたいと思います。

本記事の対象読者は以下です。

* RPAの導入を検討している方
* RPAを導入したものの、想定以上によくこけるという事象を経験した方
* これからRPAの大規模展開を予定している方

##RPAの開発工数に対する運用・保守工数の割合

RPAは一般的なシステム開発に比べて開発工数が小さく、導入自体は容易です。しかし、運用・保守に必要な工数の割合は**開発工数の約半分**と言われており、システム開発における割合を大きく上回ります。

<img width=100% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431306/d6c8cecb-07ba-96db-b8fb-fb9515b0c07d.png>

つまり、RPAは一般的なシステムに比べて**よくこける**という事です。

ではなぜRPAは一般的なシステムに比べてよくこけるのでしょうか？
周囲の方々に聞いてみると、「開発が難しいから？」「開発者の単価が低いから？」「新しいツールでまだ安定していないから？」といった声をよく聞きますが、いずれも本当の原因ではありません。

これは**仮想労働者**と言われるRPAの立場を考えると見えてきます。

##RPAがよくこける最もな理由
仮想労働者と言われるRPAは、ユーザーによって使われるシステムとは異なり、システムを使う立場にあるため、周辺環境のあらゆる変化の影響を受けます。つまり、RPAはいわば**弱い立場**にあり、RPAの実行エラー率は、RPA自体の品質だけでは決まらず周辺環境の安定性に大きく依存します。そのため、RPAの実行エラー率は一般的なシステムに比べ必然的に高くなります。

<img width=100% src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431306/697136e5-d741-431f-5eeb-717bf1bbeec5.png>

RPAは指示された通り忠実に動くので、RPAの実行エラーの要因のほとんどはRPA自体のエラーではなく、周辺環境の変化によるものです。RPAがよくこけるからといって、やみくもに開発者も攻めても真の問題解決には繋がらない場合が多く、エラーの要因を分析し、要因に合わせた適切な対策を打っていく必要があります。

将来のあらゆる変化を想定した完璧に動くロボットを作る事は事実上不可能なため、RPAの大規模展開を進める場合は、ある程度のエラー発生は前提として、運用・保守の体制作りを進めて行く必要があります。
 
##まとめ
いかがでしたでしょうか。
RPA自体は素晴らしいツールで、正しく使えば大きな効果を生むのですが、RPAを使いこなしていくためには、仮想労働者と言われるRPAの特性を理解しておく必要があります。**RPAはよくこけるものの、その多くはRPAが原因ではない場合が多い**という事を正しく理解し、今後の取り組みに活かして頂ければ幸いです。


<参考>
Qiita記事
・[RPAは誰でも簡単に作れるという罠](https://qiita.com/jw-automation/items/78d823a6cb278f7015b5) 
・[VBAが組める人ならRPAは簡単に作れるという罠](https://qiita.com/jw-automation/items/38c28016bf5162e76c59)
・[UiPathのコーディングチェックツールを作ってみた](https://qiita.com/jw-automation/items/003dd0ef116cf968c3a8)
・[寿司打を自動化してみた【RPA×OCR】](https://qiita.com/jw-automation/items/a906f7a79e72add7b577)
・[RPAのオススメ書籍](https://qiita.com/jw-automation/items/3c141c50c7a163943fd9)
・[RPAの開発に向いている人、向いていない人](https://qiita.com/jw-automation/items/828933731611b9ec601f)
・[RPAの推進に必須なRPAOpsという考え方](https://qiita.com/jw-automation/items/53c45b7dfc7a5865c5ff)
・[【AI】Deep Metric Learning](https://qiita.com/jw-automation/items/7bbe1c872fcec7fa6c1d)
・[【AI】Deep Learning for Image Denoising](https://qiita.com/jw-automation/items/f942ea0c6a02e8e50fa2)
・[Deep Convolutional Autoencoderベースの教師なし異常箇所検知](https://qiita.com/jw-automation/items/aea08a5c915d0627803a)

デモ
・[UiPathCodingChecker](https://jw-automation.com/rpa/uipathcodingchecker)：UiPathのxamlファイルからコードを分析
・[AI Demos](https://jw-automation.com/ai/demos)：DeepLearningによる手書き文字認識・異常検知・画像のデノイズ
・[寿司打自動化(YouTube)](https://youtu.be/7l9FiPtPftw)：タイピングゲーム寿司打のRPA×OCRでの自動化
Ruby キーワード引数 の使い方

# 目的

- メソッドに引数を渡す際の特殊な方法、キーワード引数の使用方法を知る。
- メソッドにたくさんの引数を渡すと何番目が何の引数かが分からなくなる。そのための回避策を知る。

# 書き方の例

- メソッドに引数を渡すときにたくさんの引数を渡すと何番目が何の引数であるかわからなくなる。
- そのためにメソッド呼び出しのときにメソッド内で引数を格納する変数も一緒に書き引数を渡す。
- 下記に処理を記載する。

```ruby
# メソッドの定義
def メソッド名(変数A:, 変数B:, 変数C:)
  puts 変数A
  puts 変数B
  puts 変数C
endac

# メソッドの呼び出す
メソッド名(変数A: "おはよう", 変数B: "こんにちは", 変数C: "こんばんは")

```
(function() {...})();って？無名関数・即時関数とスコープ - jQueryを書けるようになりたい(2)

jQueryのプラグインでよく見かけるこの記述。

```javascript
(function() {
    // 何らかの処理
})();
```

プラグイン全体をこれで囲っていることが多いのでどういう意味なのか調べてみました。
また他の書き方も見かけるのでそちらも少し紹介します。

## この記述の意味とメリット

```javascript
(function() {
    // 即実行される処理
})();
```

これは**即時関数**もしくは**無名関数**と呼ばれるものです。その名の通り読み込まれると中の処理がすぐ実行されます。実行タイミングとしては素のままで書くのと同じです。
（私が調べた範囲では即時関数と書いてあったり無名関数と書いてあったりしましたが、おそらく意味的にはどちらも正しいと思います。即時関数かつ無名関数。）

なぜこの書き方をするのかというと、スコープを汚染しないためです。
唐突に出てきた「スコープ」ですが、ひとことでいうと「変数の有効範囲」です。
スコープについては分かりやすい説明をしてくれているサイトがあったのでこちらを参考にしてください。

* [jQueryの無名関数「(function(){})()」の使い方 - Web’Notes](http://webnonotes.com/javascript-2/function/)
* [JavaScript中級者への道【3. 関数スコープ】 - Qiita](https://qiita.com/matsuby/items/1010ae38ee6258fd8020)

こうしてプラグイン内で使われている変数を隔離することで、色んなプラグインを同時に使っても変数名の重複が起こらないようになっています。

## さらに安全な即時関数の定義

```javascript
(function($) {
    // 即実行される処理
})(jQuery);
```
こういった書き方もよく見かけると思います。
これは即時関数の引数にjQueryオブジェクトを渡しています。引数にオブジェクトを渡す・・・？安心してください、私もよく分かっていません。
これは後ろのカッコにある`jQuery`を、関数の中では`$`で扱うことができるというものです。
~~特に明示しなくてもjQuery内では`$`=`jQuery`なんですが、あえてこう書くことで、javascriptを使った他のライブラリとの衝突を防ぐことができます。~~

:arrow_up: **@j5c8k6m8さんに補足していただきましたのでちょっと訂正！**

特に明示しなくてもjQueryを読み込むと
`$`=`jQuery`
として定義されています。しかしこれは「スコープ」のところで出てきた「グローバルスコープ」に定義されている「グローバル変数」です。
jQueryを読み込んだ後で、`$`をグローバル変数として定義している別のライブラリを読み込むと、`$`が上書きされてしまい、`$`=`jQuery`として利用できなくなってしまいます。
即時関数を使って上記のように書くと、即時関数の中では安心して`$`=`jQuery`として利用することができます。
これについては@j5c8k6m8さんのコメントもぜひ参考にしてください！


## 参考になったサイト・ブログなど
* [jQueryの無名関数「(function(){})()」の使い方 - Web’Notes](http://webnonotes.com/javascript-2/function/)
* [JavaScript中級者への道【3. 関数スコープ】 - Qiita](https://qiita.com/matsuby/items/1010ae38ee6258fd8020)
* [JavaScript、jQueryでの即時関数の書き方について。 - teratail](https://teratail.com/questions/45493)
* [【jQuery】よく見るおまじない的なアレについて - Qiita](https://qiita.com/tomcky/items/63cd6a35180af0699962)
* [jQuery(function($){ ... });と(function($){ ... })(jQuery);の違いを教えて下さい。 - W3Q Archive](http://w3q.jp/t/6021)
* [【JavaScript】 変数とスコープについて。 - Qiita](https://qiita.com/santaku3109/items/ad66f57ebb70b580ebaa)
【備忘録】range()、suffle()、array_slice()理解する

#目的
イメージできるようになる

#range関数
startからendまでの整数の配列を返す。要するに、***配列を作る***

```
<?php
// array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)
foreach (range(0, 12) as $number) {
    echo $number;
}
```

#shuffle関数
配列の要素に対して、新しいキーを割り当てる。***パラメーターは、配列のみ。***

```
<?php
//1~20の数字を$numbersに代入する。
$numbers = range(1, 20);
//
shuffle($numbers);
foreach ($numbers as $number) {
    echo "$number ";
}
?>
```

#array_slice関数
こいつが1番分かりづらい。
パラメーターには、array、offset,length,preserve_keysがある。
array→配列
offset→基準点からの距離で位置を表現したもの
length→返す要素の数を指定するが、負の場合は、最後の要素からの基準点になる。***（ややこい）***
preserve_keys→



```ruby:例１
<?php
$input = array("a", "b", "c", "d", "e");

$output = array_slice($input, 2);     
var_dump($output);
?>
```
```ruby:例１の出力
array(3) { [0]=> string(1) "c" [1]=> string(1) "d" [2]=> string(1) "e" }
```

c,d,eの値を配列で取得している
***最初の要素から数えて3番目の値からスタートし、最後の要素まで取得する***

```ruby:例２
<?php
$input = array("a", "b", "c", "d", "e");

$output = array_slice($input, -2);     
var_dump($output);
?>
```
```ruby:例２の出力
array(2) { [0]=> string(1) "d" [1]=> string(1) "e" }
```
-2にすると、d,eの値を配列で取得している。
***最後の要素から数えて２番目の値からスタートし、最後の要素まで取得する***


```ruby:例３
<?php
$input = array("a", "b", "c", "d", "e");

$output = array_slice($input, 2,2);     
var_dump($output);
?>
```
```ruby:例３の出力
array(2) { [0]=> string(1) "c" [1]=> string(1) "d" }
```
c,dの値を配列で取得している。
***最初の要素から数えて３番目の値からスタートし、要素数が２になるまで取得できる。***

```ruby:例４lengthが負の場合は、配列の末尾から連続する複数の要素が返されます。
<?php
$input = array("a", "b", "c", "d", "e", "f");

$output = array_slice($input, 1, -2);    
var_dump($output);
?>
```
```ruby:例４の出力
array(3) { [0]=> string(1) "b" [1]=> string(1) "c" [2]=> string(1) "d" }
```
b,c,dの値を出力している
***最初から数えて2番目の値と、最後から数えて３番目の値の間を配列で取得する。***

```ruby:例４preserve_keysをtrue
<?php
$input = array("a", "b", "c", "d", "e", "f");

$output = array_slice($input, 2, -1, true);

var_dump($output);
?>
```
```ruby:例４の出力
array(3) { [2]=> string(1) "c" [3]=> string(1) "d" [4]=> string(1) "e" }
```
***値に当てはまる添字が、2から始まる***
offsetで指定した数が最初の要素の添字になるようだ

#まとめ
random関数は配列を作り、shuffle関数は配列しか受けとらない点から相性の良さを感じる。

array_sliceも配列しか受け取らない。そして、様々な条件(offset,length,preserve_keys)をつけることで取得する際に制限をかけることができる

#参考資料・引用先
PHP公式ドキュメント
・[shuffle](https://www.php.net/manual/ja/function.shuffle.php)
・[range](https://www.php.net/manual/ja/function.range.php)
・[array_slice](https://www.php.net/manual/ja/function.array-slice.php)
[R]住所から座標データ取得

Rで住所から座標データを取得したくなったのでメモ

#API
[geocoding.jp](https://www.geocoding.jp/)のAPIを利用します。
~~調べた限り、無料でフリーに使えるapiはこれだけ？
ggmapライブラリなるものでgeocodingが昔は使えたようですが、今はAPI_KEYを求められるのでダメな模様。~~

ggmapを使っても取得できるようです。(11/3修正)
参考：[ggmapパッケージを用いて住所から緯度経度のデータを得る](https://qiita.com/koki25ando/items/fa17a17195d4abf77282)

#コード
リクエストに対して、結果はxml形式で返ってくるようですが、html上で表示されるのでrvestを使用して座標のみ取り出します。

```r
library(rvest)

url <- paste0("https://www.geocoding.jp/api/?v=1.1&q=", "所望の住所")
                     
page <- read_html(url)
page %>% html_nodes("lat") %>% html_text() -> lat
page %>% html_nodes("lng") %>% html_text() -> lng
          
geo <- data.frame(lat, lng)
```
これだけで座標は取得できました。
複数の場合は以下

```r:サンプル
#複数住所も可
#住所リスト
> jusho
[1] "日野市東豊田3-16"      "墨田区堤通2-6-10"      "墨田区東向島1-７-１１"
> str(jusho)
chr [1:3] "日野市東豊田3-16" "墨田区堤通2-6-10" "墨田区東向島1-７-１１"


url <- paste0("https://www.geocoding.jp/api/?v=1.1&q=", jusho)
                       
lat <- c()
lng <- c()

for(i in 1:length(url)){
      page <- read_html(url[i])
      
      page %>% html_nodes("lat") %>% html_text() -> lat_i
      page %>% html_nodes("lng") %>% html_text() -> lng_i
      
      lat <- c(lat, lat_i)
      lng <- c(lng, lng_i)
      Sys.sleep(5) #取得元に負担をかけないよう1データ取得ごとに5秒あける
    }
    

geo_list <- data.frame(jusho, lat, lng)

> geo_list
                 jusho       lat        lng
1      日野市東豊田3-16 35.666307 139.387277
2      墨田区堤通2-6-10  35.73371 139.816348
3  墨田区東向島1-７-１１ 35.721908  139.81308
```
座標を取得できました。
ここまで取れればleafletなどで可視化するなど、色々できそうです。

#参考
[住所から緯度経度を取得するpythonスニペット](https://qiita.com/paulxll/items/7bc4a5b0529a8d784673)
[geocoding.jp](https://www.geocoding.jp/)
[ggmapパッケージを用いて住所から緯度経度のデータを得る](https://qiita.com/koki25ando/items/fa17a17195d4abf77282)
AWS エラー解消方法まとめ（現在2つ記載、随時更新予定）

※　自分用メモも兼ねています。

---

# AWS Secrets Manager で「Secrets Managerは指定されたLambda関数を呼び出すことがで]きません。」

**@2019/10/11**

AWS SMで、

>Secrets Managerは指定されたLambda関数を呼び出すことができません。関数ポリシーがprincipal secretsmanager.amazonaws.comへのアクセスを許可していることを確認してください

というエラーが出た場合は、公式ドキュメントに太字で書かれている、

- Lambda 関数が作成されていることを検証する
- ユーザーに代わって関数を呼び出す許可を Secrets Manager に付与する

の箇所をやって、ローテーション用のLambdaにsecrets managerにアクセスするためのポリシーを作成すればOK。

公式ドキュメント：[データベース用の AWS Secrets Manager シークレットをローテーションするための AWS Lambda 関数の作成](https://aws.amazon.com/jp/premiumsupport/knowledge-center/lambda-function-secrets-manager/)

# SSM でマネージドインスタンス一覧に EC2が表示されない場合

**@2019/10/31**

「結論から言うと**再起動**すれば表示されるようになりました。」

EC2インスタンスをマネージドインスタンスにする場合は、[この記事の「準備」の欄](https://qiita.com/numasawa/items/ed1f1ef6c7c3c6b4c56b#%E6%BA%96%E5%82%99)にあるような方法で設定すると思います。

この時に、IAM Role をアタッチした後マネージドインスタンス一覧を見ると、該当インスタンス表示されていない場合があります。（ありました。）

この場合に、僕の場合は再起動すれば、表示されるようになりました。

追記：

どうやら、IAM Role はアタッチしてから反映されるまでに少し時間がかかるみたいです。
[EC2 インスタンスにつけた IAM ロールが反映されるまで - sorta kinda...](https://nasrinjp1.hatenablog.com/entry/2018/04/10/205859)
PythonとHTTPでGoogleHomeに好きな言葉をしゃべらせる！（追記：しゃべった）

# 一番使いやすい方法かと・・

RaspberryPiとかPythonとかを使って
GoogleHome（Chromecastデバイス）をしゃべらせる系の記事を色々調べました。

**別途サーバー立てる必要なし！**
コード中でサーバー運用する

**事前にmp3ファイルを準備する必要なし！**

そ（HTTPリクエスト）の都度、
**mp3ファイルを生成 ➡ 時間がたったら削除**
してくれる

# 環境

Windows 10 Pro
Anaconda 3
Python 3.7
Visual Studio Code

# 目的

[Gist (SlashNephy様)](https://gist.github.com/SlashNephy/f59bdf66051c842cd1f43776043bde59) からソースコードをコピーしてきて
Google Homeをしゃべらせよう！という試み。

# 現状

## やったこと
- Anacondaで仮想環境構築
- 構築した仮想環境で pip install flask gtts pychromecast
- スクリプト走らせる
- FirefoxからURLにアクセス

## 結果
- Google Homeが「ジュルン♪」っていう（GoogleHomeのIPアドレスは合ってるね。）
- キャッシュにmp3ファイルを生成（プレーヤーで再生可能）
- mp3ファイルがGoogle Homeから再生されない

## 原因の究明活動

問題：**mp3ファイルがGoogle Homeから再生されない**

サーバーのアクセスログを確認
![コメント 2019-10-15 224711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499476/25af8b41-8103-e70f-98ac-1fffb49a40ab.png)


mp3ファイルは生成されている
![messageImage_1571145678863.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499476/a321db7f-14e1-b131-ae72-2ee7d02eaa9f.jpeg)

ブラウザからmp3ファイルにアクセスしようとすると、404。
※キャッシュ削除前に試行
![messageImage_1571145617278.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499476/6ce98cf5-a1c8-c3e7-4064-50e5188c3880.jpeg)

# この前はしゃべってたんだよなぁ～
おっかしいなぁ～～～
仮想環境なんか変えたっけ・・？

# 追記：なんかしゃべった

コードの18行目のdeviceの設定変えた。

```python
device = pychromecast.Chromecast(ip_address)
```
.
もともとのコードがなぜ

```python
device = next(x for x in pychromecast.get_chromecasts() if x.host == ip_address)
```
となっているのだろう？

私の環境だとエラーになってしまう。

IPアドレス特定して使用するのが前提なのだから、
if文の条件が真になるまでfor文の処理を行う必要はあるのだろうか？
（ifとforの処理内容も完全に理解してない）
MySQL:覚えた知識を日々書き留める#2

#LIMIT/OFFSET
 ・PostgreSQL,MySQLでしか使えない。

#LIMIT
 ・LIMITの後の数値で、SELECTから返される行数を指定する。

#OFFSET
 ・OFFSETの後の数値の分、上位から数えた行数をスキップする。
vimの縦移動を改善(10の倍数の行番号をハイライトするplugin)

vimで縦移動する時、なんとなく惰性で `j` を連打してしまいませんか？

かと言って、ドンピシャで `17j` とかやろうと思っても、行きたい行が何行目かを探すので、眼力が必要で、結局、 `jjjjj...` とやってしまうものです。。。(私)

そんなときに、ざっと、20行くらいは下だな、みたいのが目に入ると、 `20j kkk` くらいで済んだりするので、ちょっと早く移動できるかもしれません（^皿^ 

そんな思いをプラグインにしました。

「10の倍数の行番号をハイライトする」vim pluginです。 初 vim plugin (祝)

[line-number-interval.nvim](https://github.com/IMOKURI/line-number-interval.nvim)

![highlight-line-number](https://user-images.githubusercontent.com/1638500/66444757-6b181f80-ea7f-11e9-8d26-20768193934e.gif)

もちろん relative numberにも対応しています(^^

![highlight-line-relative-number](https://user-images.githubusercontent.com/1638500/66444779-79663b80-ea7f-11e9-8c97-8fbd0552c6ca.gif)

そして、こだわりが強い方には、10ごとと言わず、お好きな数列の値をハイライトすることができます。例えばフィボナッチ数列とか（≧▽≦

![highlight-line-relative-number-custom](https://user-images.githubusercontent.com/1638500/66466246-565a7c80-eabd-11e9-9ca8-1db2b0160c0a.gif)

なお、この機能を実装するにあたって、 neovim にしかない highlight グループを使う必要があったので、現状 vim では使用できません。。 (泣)

vim で実現する方法ないかな。。。
SVGのココがスゴイ

 * SVGの凄いポイント3つ
   SVG(Scalable Vector Graphicsの略)


- 画像を拡大してもシャギーが入らない
- 専用のソフトウェアを用いることなく作成・編集ができる
- アニメーションをつけることが出来る

##解説
**画像を拡大してもシャギーが入らない**
コンピューターで画像を扱う方法には大きくわけて2種類あります。
ラスタ形式とベクタ形式です。

今回記事にしたSVGで作成されるファイルはベクタ形式です。
SVGで作成されたファイルは、`.svg`という拡張子を使います。

ラスタ形式という画像形式は、画像を点の集合で表現するのではなく計算式によって図形を表現しています。その為画像など拡大表示したときにギザギザになりません。ベクタ形式は、写真など複雑な色を表現するのには不向きですが、それ以外に使用するのであればベクタ形式がおすすめです。



**専用のアプリケーションを用いることなく作成・編集ができる**
.aiファイルはAdobe SystemsのIllustratorのグラフィックソフトでしか作成・編集できません。しかし、SVGは拡張の自由度が高いXMLで記述されており原理的には専用のソフトウェアを用いることなくプレインテキストとして作成・編集できます。


**アニメーションをつけることが出来る**
これまでは、アニメーションといえばGIF、透過画像といえばPNGでしたが、SVGはアニメーションも透過もどちらも扱えます。CSSやJavaScriptを使って動きをつけることも可能です。
MDN Web Docs
SVG animation with SMIL
Firefox 4 より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。[SMIL]
  (https://developer.mozilla.org/ja/docs/Web/SVG/SVG_animation_with_SMIL)はここから




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

###感想
スマホでウェブサイトを見るときは無意識のうちにページを指で拡大しています。わたしが学生の頃は画像を拡大するとシャギーが入ってしまってぼやけてしまっていた現象が今は滅多にみられなくなったような気がします。これって、SVGが普及されたお陰だったんでしょうか(#^^#) <br>これから[Inkscape](https://inkscape.org/ja) を使ってSVG使いこなせるようになりたいです。





本日は[SVGファイルとは？特徴・作成・変換方法を知ろう！](https://tree-file.com/web-design/about-svgfile/)の記事を参考にさせていただきました！
MySQL SUM関数とCASE文の合わせ技

```sql

select date_format(a.created_at, '%Y/%m/%d') as 'order_date'
     , sum(case when a.deleted_at is not null then 1 else 0 end) as 'deleted_quantity'
  from test_table as a
group by date_format(a.created_at, '%Y/%m/%d');
```

`group by`は、指定した値でグルーピングをしてくれるので、selectで記述した内容もそのグルーピングした中で処理されるっぽいです。
なので、グループ毎のレコード1行1行に対して評価がされる。
もしnullの値があったら1を返し、sumしておく。
それをグループ毎にループして行うことで、ちょっとリッチなカウントができる。
Laravel6.0 + Typescript の設定をして、CDNから jquery と firebase とaxiosを読み込んだメモ

## 概要

[前回](https://qiita.com/hibohiboo/items/c675181e48c1bca77d70)からの続き。
LaravelでTypescriptを使ってみた。
さらに、CDNから読み込むライブラリを使えるように設定した。

## typescript の導入
[typescript の利用](https://bsblog.casareal.co.jp/archives/1993)を参考にしたらすんなり。

### インストール

```
npm install --save-dev ts-loader typescript
```

### 設定

```json
{
  "compilerOptions": {
    "outDir": "./built/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es2015",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "target": "es6",
    "lib": ["es2016", "dom"]
  },
  "include": ["resources/ts/**/*"]
}
```

- experimentalDecorators: decolater を使用可能になる。
  - [参考](http://js.studio-kingdom.com/typescript/handbook/decorators)

* mix に ts 使用を追加

```diff:webpack.mix.js
+ mix.ts("resources/ts/welcome/index.ts", "public/js/welcome");
```

### 使用

```ts/ts/welcome/index.ts
{
    const helloWorld: string = "Hello World";

    console.log(helloWorld);
}
```

```diff:resources/view/welcome.blade.php
@section('scripts')

+ <script src="{{ mix('js/welcome/index.js') }}"></script>

@endsection
```

```
npm run watch-poll
```

[ここまでのソース](https://github.com/hibohiboo/whitemap/tree/9c8ac293b6d2421cc05fe07b8b640c0df5ce34cd/laravel_docker)

## CDNからライブラリを読みこむ設定


### 外部モジュールの読み込み

以下を追記。cdn から読み込むソースはmixしないようにする。

```js:webpack.mix.js
mix.webpackConfig({
  externals: {
    jquery: "jQuery",
    firebase: "firebase",
    firebaseui: "firebaseui",
    axios: "axios"
  }
});
```

使用。`import * as`か`import`かの読み込みかたの違いはライブラリの export の形式による。

```
import * as firebase from "firebase";
import axios from "axios";
```

[ここまでのソース](https://github.com/hibohiboo/whitemap/tree/8948b5151a8f4736a0b3df7865e0614f328aee29/laravel_docker/whitemap)

[bootstrapも外部化](https://github.com/hibohiboo/whitemap/tree/adf1857ef43e312152f28ae0f20e7357a5ff1c32
/laravel_docker/whitemap)

## 参考
[Laravel6.0 で Vue.js と Bootstrap を使う方法](https://www.webopixel.net/php/1554.html)
[laravel frontend](https://laravel.com/docs/6.x/frontend)
[laravel/ui](https://github.com/laravel/ui)
[laradock と nuxt で開発環境構築](https://qiita.com/aoarashi/items/535feeca48d15516d450)
[Laravel5.5 インストールから Bootstrap4 を導入するまで](https://qiita.com/hondy12345/items/fef482c347b883acff84)
[Laravel Mix](https://readouble.com/laravel/6.0/ja/mix.html)
[typescript の利用](https://bsblog.casareal.co.jp/archives/1993)
[typescript で import しなくても jquery が使えるようになっていたので、他の外部ライブラリとして chart.js を読み込んでみたメモ](https://qiita.com/hibohiboo/items/400a4206bbceb56e45e5)
Splunkでcsvファイルを検索している時に、抽出済みの全フィールドの内の一部しか表示されなくて困った話

#### 今回はlimitation知らずにちょっとはまった話です。

複数種類のcsvファイルをSplunkに取り込み、まとめて横串検索を実施していたときに出会った不可解な事象
--
- index時に自動でフィールド抽出済みのはずなのに、なぜかサーチしても意図したフィールド**”すべて”**が表示されない！
- ***焦ったポイント(汗)***
    - **一部はフィールド抽出されている。**
    - **対象のcsvファイルをへらすと、事象が改善される。**
    - **エラーメッセージはない。**
<img width="782" alt="スクリーンショット 2019-10-15 22.26.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/7bed678c-5d50-e1e0-0734-712042fd2d30.png">
分かりにくい画像ですが、意図したフィールドすべてが抽出できない事象が発生しました。


原因
---
- デフォルトのindex時フィールドの検索フィールド抽出数の**上限**に達していたため、結果にすべてのフィールドが表示されなかった。
- 仕様詳細はこちら
    - https://docs.splunk.com/images/4/47/Splunk-7.3.0-Data_ja-JP.pdf
- 以下、該当箇所を抜粋

#### [184ページ] ⾏の数が多い構造化データファイルは、Splunkサーチで全ての抽出ファイルを表⽰しない可能性があります。

`構造化データファイルを多数の⾏によってインデックス作成する（例えば、CSVファイルを300のコロンでインデックスする）と、サーチAppが戻らない、もしくはそのファイルのフィールドを全て⽰さないような問題が後々発⽣する可能性があります。全てのフィールドにインデックス作成をしてもこのような問題が発⽣するのは、サーチ時にSplunkソフトウエアのフィールドの抽出⽅法を設定しているためです。`

`Splunk ソフトウエアがSplunk Web上にフィールドを表⽰する前に、サーチ時フィールドの抽出を実⾏し、それらのフィールドを抽出しなければなりません。デフォルトでは、サーチ時の⾃動フィールドの抽出数は**100**に制限されています。$SPLUNK_HOME/etc/system/local の limits.conf ファイルを編集し、また limit 設定を構造化データファイルの⾏数より多い数にすることにより、この数値をより⾼く引き上げることができます。`

```limits.conf
[kv]
limit = 300
```

`多数のCSVファイルで作業する場合、設定が構造化データファイルに求める⾏の最⼤数を表す数にする必要があるといえます。`


回避策
---
- /opt/splunk/system/local/limits.confに以下を追記することで、すべてのフィールドが表示されました。

```:limits.conf
[kv]
limit = 300
```

まとめ
---
- 日本語のフィールド名を含むcsvファイルだし、もしかしてバグふんだか？と焦ってましたが、なんてことはない。limitationでした。
- google検索する時に「is there any limitation default csv field extraction splunk」ととりあえず英語で調べてみるとなにかしら引っかかるものです。他には「how to xxxx splunk」とかよく使います。
<img width="806" alt="スクリーンショット 2019-10-15 22.13.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/aebd354e-90dc-2d32-ed9a-6a2724cbc2f8.png">
Could not insert new outlet connectionの対処方法

#"Could not insert new outlet connection"

ストーリーボードなどで View を配置して、コード側と関連付けようとするとたまに遭遇するこのエラーメッセージ、ググッてみても完璧な解決策が見つかりません。

![スクリーンショット 2016-07-20 13.41.42.png](https://qiita-image-store.s3.amazonaws.com/0/27210/de0658e0-0a3c-9158-f47b-6a9eb66fdb42.png "スクリーンショット 2016-07-20 13.41.42.png")

だいたい

- Derived Data を削除
- Xcode を再起動
- プロジェクトをクリーン

するとうまくいくようになる、という書き込みを見かけます。ですが試してみてもうまくいったりいかなかったり。

# 手動で接続先となる変数(Outlet)を書いて、その変数と繋げるとうまくいくっぽい

そこで思いついてやってみたらうまくいったぽい解決策がこちら。

## 1. 接続先となる変数を先に定義する

まず手動で変数を用意します。

```
    @IBOutlet weak var noticeLabel: UILabel!
```

## 2. View から接続先の変数へドラッグ＆ドロップ

このあと定義したい View からドラッグ＆ドロップで先ほど定義した変数を接続します。

![スクリーンショット 2016-07-20 13.50.15.png](https://qiita-image-store.s3.amazonaws.com/0/27210/53d781df-56ef-770b-55ce-84f279bf6ce8.png "スクリーンショット 2016-07-20 13.50.15.png")

## 以上。

これでも動作しているので "Could not 〜" に遭遇した際は試してみるといいかもしれません。
nginx と Apache では、動かす PHP に違いがあります（Xdebug もお忘れなく）

# 環境
- Windows 10
- PHP 7.3.10
- Apache 2.4.41

# 動機
以前のプロジェクトで、nginx で PHP を動かしていました。
今回のプロジェクトでは nginx ではなく Apache で動かすことになったので、ローカルに Apache だけをインストールして既存の PHP を動かそうと思ったのですが、ブラウザからアクセスしてみたところ、PHP が動いていませんでした。

# 現象
動作確認のために phpinfo() にアクセスしてみたところ、PHP のソースがそのままベタで表示されてしまいました。

# 原因
以前のプロジェクト（nginx 環境）の PHP をそのまま流用しようと思ったのが間違いでした。
nginx で動作させるため、Non Thread Safe 版の PHP をダウンロードしていた（ことを思い出した）のです。
Apache で動作させるために、Thread Safe 版（TS 版）をダウンロードして解決しました。


# やったこと
PHP が動かないので調査したところ、 php7apache2_4.dll が入っていないことが問題のようでした。
これは TS 版にしか入っていないようなので、別途 TS 版をダウンロードして、php7apache2_4.dll だけを既存の Non Thread Safe 版に移植してみましたが、動きませんでした。

更に調査したところ、どうやらその他にも Apache2 系を動かすために必要な ddl が、Non Thread Safe 版には一式含まれていないようです。
結局全部 TS 版に置き換えました。

あとは設定して、

```httpd.conf
LoadModule php5_module "c:/php/php7apache2_4.dll"
AddHandler application/x-httpd-php .php

# configure the path to php.ini
PHPIniDir "C:/php"
```
Apache を再起動してやれば、

```
> httpd -k restart
```

きちんと動きました。

# 参考
- [WindowsにPHP7をインストール](https://xn--xcke3b8f8261bm7tb.jp/blog/archives/225)
- [PHP のNon Thread Safe とThread Safe の違い](http://gete.blog.shinobi.jp/Entry/41/)

# おまけ
Xdebug も流用しようと思ったところ、こんなエラーが出ました。

```
Failed loading C:\php\ext\php_xdebug.dll
```
読み込めないよ、と言われています。所定のパスに php_xdebug.dll はきちんと存在しているのに。
もしやと思って調べたら、ビンゴでした。Xdebug にも Thread Safe 版と Non Thread Safe 版があるみたいです。
（以前 PHP をインストールした際に、Xdebug も合わせてインストールしたため、何も考えずに Non Thread Safe 版を選んでいました）

こちらも動かす PHP に合わせて ddl をダウンロードする必要があるのでご注意ください。
（前述の通り、今回は TS 版の PHP を使用するので、Xdebug も TS 版の ddl に置き換えました）

# 参考
- [xamppで「Failed loading ～/php_xdebug.dll」と出た場合の対処](https://yattemita-blog.com/xampp%E3%81%A7%E3%80%8Cfailed-loading-%EF%BD%9E-php_xdebug-dll%E3%80%8D%E3%81%A8%E5%87%BA%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6/)
CentOS7で再起動するとネットワーク接続が切れる問題への対処法

CentOS7で再起動するとネットワーク接続が切れる問題への対処法について書きます。
原因はCentOS7のインストール時にIP設定をきちんとしないまま後からネットワーク設定をしたことが多いようです。

NICのネットワーク設定が再起動時に接続を保持しないデフォルト設定(ONBOOT=no)になっているのです。これを解決するためCentOS7でリブート時にNICを自動起動させる設定方法について説明します。

## CentOS7で再起動するとネットワーク接続が切れる問題

CentOS7で再起動をしたらネットワークに繋がらなくなってしまいました。
単にリブートしただけなのにネットワーク接続できない理由が分からず困りました。

## 調査

デバイスの接続状態を確認します。

```
nmcli device status
```

CentOS7ではnmcliコマンドの使用が推奨されています。

```
DEVICE TYPE     STATE        CONNECTION
eno1   ethernet disconnected eno1
lo     loopback unmanaged    --
```

いつの間にかデバイスの接続が切断されている事が分かりました。

## 原因

CentOS7のインストール時にIP設定をきちんとしないまま後からネットワーク設定をしたことが多いようです。

NICのネットワーク設定が再起動時に接続を保持しないデフォルト設定(ONBOOT=no)になっているのです。

## CentOS7でリブート時にNICを自動起動させる設定方法

OSを再起動した際にNICのネットワーク設定を保持するように（ONBOOT＝yes）設定します。

```
nmcli connection modify eno1 connection.autoconnect yes
```

`eno1`の部分は対象のNICのものに変更してください。
設定を反映するためにネットワークサービスを再起動します。

```
systemctl restart network.service
```

お疲れさまでした。
ServerLess Framework 技術調査

公式Document: https://serverless.com/framework/docs/

### Install 

NPMで管理されてるっぽい。Node 6.0以上が必要。
参考: https://serverless.com/framework/docs/providers/aws/guide/quick-start/

```shell

npm install -g serverless
serverless -v
sls -v
```

AWSのセットアップ関連は省略
参考: https://serverless.com/framework/docs/providers/aws/guide/credentials/


### Create
プロジェクトを作成

```shell

sls
```

### Test
Lambdaの実行テスト

```shell
sls invoke -f hello
sls invoke local -f hello # ローカル環境のコードを走らせる場合
sls logs -f hello # ログを見る
```
- `-f hello` 実行する関数を指定

### Deploy

```shell
sls deploy -v -r ap-northeast-1
sls deploy function -f hello -r ap-northeast-1
``` 

- `-v` Stackの状況を出力
- `-r ap-northeast-1` 関数を作成するRegionを指定。serverless.ymlからも指定できる。
- `-s dev` 関数を作成するStageを指定。メリットは今の所わからない。
- `--aws-s3-accelerate` s3へのUploadが早くなる?!

### Delete

```shell
sls remove
```
Nuxt.js 2.10 + TypeScript propsに独自定義した型を指定する

今回は「公式ドキュメントをちゃんと読みましょう」というお話。

NuxtをTypeScriptで作っていて独自定義した型をpropsの型として使いたくてちょっとだけハマったのでメモします。

```typescript:MyType.ts
type MyType = {
  hoge: string,
  huga: string
}

export default MyType;
```

こういう独自定義の型をpropsに指定したい場合

```vuejs:MyComponent.vue
<script lang="ts">
import Vue from 'vue';
import MyType from '~/path/to/MyType';

export default Vue.extend({
  ...
  props: {
    myProp: MyType,
  }
  ...
})
</script>
```

みたいに何も考えずに指定すると実行時エラーになります。
`TS2693: 'MyType' only refers to a type, but is being used as a value here`


ちょっとハマりましたが、他でもない[Nuxt TypeScript公式ドキュメント](https://typescript.nuxtjs.org/cookbook/components/#template)に書いてありました。

それを参考に先ほどのvueファイルを修正すると

```vuejs:MyComponent.vue
<script lang="ts">
import Vue, { PropOptions } from 'vue';
import MyType from '~/path/to/MyType';

export default Vue.extend({
  ...
  props: {
    myProp: {type: Object} as PropOptions<MyType>,
  }
  ...
})
</script>
```

こうなります。`PropOptions`のimportをお忘れなく。
Railsチュートリアル 第１３章＜復習＞

第１３章の復習メモです。
個人的に重要と思ったことを書きます。

前回と同様、以下３つの視点で書きます。

- 分かったこと
- 分からなかったこと
- 今回はスルーしたこと

※１２章は、１１章と内容が似通っていたので、復習メモは作りませんでした。

#分かったこと

##モデル間の関連付け
SQLでテーブルをJOINするように、モデル間を関係付けることができる。今回は、MicropostモデルとUserモデルの関係付けを行った。Micropostは一人のユーザと関係付けられ、Userは複数のMicropostと関係付けられる。図で表すと以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/8c570e84-a32b-6711-6462-487cad472d90.png)

図の通り、１対１の関係は`belongs_to`を、１対多の関係は`has_many`を使う。モデルのコードに、以下のように記載する。

```app/models/micropost.rb
class Micropost < ApplicationRecord
  belongs_to :user
  .
  .
  .
end
```

```app/models/user.rb
class User < ApplicationRecord
  has_many :microposts
  .
  .
  .
end
```

`app/models/micropost.rb`の`belongs_to :user`は、モデル生成時に、引数として**reference型のカラム**を渡すことで、自動生成される。モデル生成のコマンドは以下の通り。

```
$ rails generate model Micropost content:text user:references
```

`user:references`が**reference型のカラム**となる。これを利用すると、自動的にインデックスと**外部キー参照付きのuser_idカラム**が追加され、UserとMicropostを関連付けする下準備をしてくれる。

このように、belongs_to/has_many関連付けを使うことで、SQLでテーブルをJOINするようなメソッドを使うことができる。使えるメソッドは以下の通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506678/80815245-f577-6e77-24e8-1075821df1fb.png)


#分からなかったこと、今回はスルーしたこと

- 画像の投稿
- テスト全般
- アプリケーションの仕様、ロジックの詳細

マイクロポストについては、ソート方法など様々な内容が説明されていましたが、最も重要と思われるモデル間の関係付けについて、集中的にまとめました。
pd.concat(df,axis=0)で列の順番が勝手に変わる！?


# 注意
本記事は2019年10月15日におけるKaggle Notebook上で実験したものです。
2021年4月7日におけるKaggle Notebookでは下記の現象は起きなかったため、バージョンが上がり改善されたと思われます。
pd.concat()の引数sortのデフォルトがFalseになっているようです。

# 何があったの
pd.concat()にて縦方向の結合を行ったら、列の順番が勝手に変わる事象に出くわしたため、
その解決法を書きます。

# 問題

タイタニックデータをインポートして

```python:
import pandas as pd
train = pd.read_csv('../input/titanic/train.csv')
test = pd.read_csv('../input/titanic/test.csv')
```

trainとtestを見てみると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390595/43fc1dcb-e530-d53c-df3a-0c085e3d46b7.png)

これをconcatを用いて縦方向に結合すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390595/7b2fa3cb-403a-9760-143d-de376c56111a.png)

列がアルファベット順に入れ替わります。

# 解決法
sort=Falseを追記してあげれば解決します。

```python:
train_test_concat = pd.concat([train,test],axis=0,sort=False)
```

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390595/9ea3086d-2cfa-4e70-ddf5-c7e08c327544.png)

warningを見れば一発ですが、
下記のコードのようにwarningを無視していると意外とはまるため、
一応記事にまとめました。

```python:
import warnings
warnings.simplefilter('ignore')
```