OmniAICreator/Qiita-1.07M huggingface dataset:
immutable/mutable変数の参照・浅いコピー・深いコピーに関して

## immutable変数の場合
### immutable変数とは
* オブジェクトidを変えずに直接代入されている値の変更が不可能なオブジェクト
* 数値、文字列、タプル、bytes, bool, range
    * ただし、タプルは注意
    * `("a",1,[1,2,3])`の場合`"a"`,`1`は変更できないが、`[1,2,3]`内の要素は変更できる
    * それはリストがmutableだから
    * なお、`[1,2,3]`そのものを変えること（例えばintに変更）はできない

### immutable変数は値を変更できないので、参照後のオブジェクトを変更すると値の再代入になり、元のオブジェクトには影響しない

* immutable変数では`=`で参照したあとに値の変更をしても、元の変数に影響を与えない

```python
c = 1
d = c

c = 99
print(c,d)
d =100
print(c,d)

# out
# 99 1
# 99 100
```

* `d=c`のタイミングでは、`d`は`c`を参照しており、オブジェクトidは共通している
* しかし、値を再代入(再定義)すると、別のオブジェクトidが発行されるため、cとdの結びつきは解消される
* このため、`=`で参照してもまるでコピーしたかのように振る舞う

```python
c = 1
d = c
print(id(c), id(d))
c = 99
print(id(c), id(d))
d =100
print(id(c), id(d))

# out
# 4486982704 4486982704
# 4486985840 4486982704
# 4486985840 4486985872
```

### ただし、タプルはまたも注意が必要

* `=`でコピーした時点ではオブジェクトidは共通している（下記の例ではL.2の時点では`a`と`b`のオブジェクトidは一致）
* その状態で下記のように`a[1][0] = "ddd"`や`b[1][0] = "xxxx"`といったリスト(mutable object)の変更を行うと、変更が２つのオブジェクトで共通してしまう
* `a = (1,2)`のようにタプルを再代入すると元とは別のオブジェクトidが発行されるので、オブジェクトが独立し、互いに干渉しなくなる

```python
a = ("a",["b"])
b = a
a[1][0] = "ddd"
print(a,b)
b[1][0] = "xxxx"
print(a,b)
a = (1,2)
print(a,b)

# out
# ('a', ['ddd']) ('a', ['ddd'])
# ('a', ['xxxx']) ('a', ['xxxx'])
# (1, 2) ('a', ['xxxx'])
```


## mutable変数の場合
### mutable変数とは
* オブジェクトidを変えずに直接代入されている値の変更が可能なオブジェクト
* リスト、dict、bytearray, set, classなど

```python
a = [1,2,3,4]
print(id(a))

a[3]=99
print(id(a))

# out
# 4520913608
# 4520913608
```

### 参照
* 変数を`=`でつなぐと参照になる
* この場合、オブジェクトidが一致する
* 実体が同じものなので、片方のオブジェクトに変更を加えると連動して他方も変更されてしまう

```python
a = [1,2,3,4]
b = a
print(id(a),id(b))

a[3]=99
print(id(a),id(b))

print(a,b)

# out
# 4520977672 4520977672
# 4520977672 4520977672
# [1, 2, 3, 99] [1, 2, 3, 99]
```

### 浅いコピー
* 変数を`b = a[:]`のように`[:]`をつけてコピーすることで実現
    * もしくは`b = a.copy()`でも同じ
* 浅いコピーの場合、オブジェクトidは新規に発行される
* 直接代入されているimmutableオブジェクトの取替は連動しない
    * 下記の例だと`a[3]=99`は`b`に影響を与えていない

```python
a = [1,2,3,4]
b = a.copy()
print(id(a),id(b))

a[3]=99
print(id(a),id(b))

print(a,b)

# out
# 4517479560 4521704008
# 4517479560 4521704008
# [1, 2, 3, 99] [1, 2, 3, 4]
```

* ただし、オブジェクト内のmutableオブジェクトに対する変更は連動する
    * 下記の例では、`a[1][1]=99`の操作がリスト`a`(mutable)の中のリスト(mutable)のindex=1の値を変更しているが、その操作は`b`にも影響している
    * 一方で、`a[0]=99`は、リスト`a`(mutable)の中の整数(imutable)の値を再代入しているので、`b`には連動しない

```python
a = [1,[2,3]]
b = a.copy()
print(id(a),id(b))

a[0]=99
print(id(a),id(b))

a[1][1]=99
print(id(a),id(b))

print(a,b)

# out
# 4358824520 4358826184
# 4358824520 4358826184
# 4358824520 4358826184
# [99, [2, 99]] [1, [2, 99]]
```

### 深いコピー
* `import copy`の上で、`copy.deepcopy(a)`で実現
* 連動しない


```python
import copy
a = [1,[2,3]]
b = copy.deepcopy(a)
print(id(a),id(b))

a[0]=99
print(id(a),id(b))

a[1][1]=99
print(id(a),id(b))

print(a,b)

# out
# 4521762760 4521742728
# 4521762760 4521742728
# 4521762760 4521742728
# [99, [2, 99]] [1, [2, 3]]
```
Vue + E2Eテスト

# はじめに
前回、「Vue + 単体テスト」という題でVueの単体テストについて書きました。その続きになります。この記事ではE2Eテストについて書いていきます。

# E2Eテストとは
通称End to Endテスト。システム全体を通してテストをおこないます。よく例にあげられるのはログインページです。

(システム全体【ログインまで】の流れ)
1. ログインページを開く
2. メールアドレスを入力する
3. パスワードを入力する
4. ログインボタンをクリックする
5. メールアドレスとパスワードの判定を行う
6. トップページへ遷移する

前回の単体テストは、個々の機能のみで判定して成功か失敗かを返していたが、E2Eテストではその単体テストを集めてその一連の流れでうまくいっているか否かを判定します。特徴は以下の通りです。

- 上位レベル
- フィードバックが遅い
- 実行が遅い
- 壊れやすい

実はこれ、単体テストと全く真逆の特徴です。
単体テストは１つ１つの機能で判定してるので実行が早く、フィードバックがしやすいのですが、E2Eテストは一連の流れの処理ができたうえで始めるため、実行が遅くかつフィードバックの修正次第ではまた違うエラーを引き起こす可能性もあるので壊れやすいです。

例で例えられるのが以下のピラミッドです。
上に行くほど、遅く、コストが高いと言われます。
![test-pyramid.png](https://qiita-image-store.s3.amazonaws.com/0/108210/bd352388-9732-b74c-891c-6a04c94fe3fb.png)

## テスト実行環境
今回も前回同様でVueを用いてE2Eテストを実行していきましょう。
NightWatchというE2E用のフレームワークを用いておこないます。

Vueプロジェクト構成で`test/e2e`があると思います。そのディレクトリに`custom_commands`フォルダを作り、そこにカスタムコマンドを作っていきます。

## 実践してみた。
それではVue.jsでE2Eテスト書いていきましょう。先ほどの`custom_commands`フォルダにパスを通しましょう。環境構築の部分を書いていきます。

```javascript:test/e2e/specs/nightwatch.js
require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],
  custom_commands_path: ['test/e2e/custom-command'], //パスを通す
```

またDOM操作でイベントをトリガーできるように設定するJSファイルやinput要素へのキーボード入力をエミュレーションできるように設定するファイルを設定しましょう。

```javascript
//DOMのトリガー受付
exports.command = function (selector, event, keyCode) {
	return this.execute(function (selector, event, keyCode) {
		var e = document.createEvent('HTMLEvents')
		e.initEvent(event, true, true)
		if (keyCode) {
			e.keyCode = keyCode
		}
		document.querySelector(selector).dispatchEvent(e)
	}, [selector, event, keyCode])
}
```
```javascript
//input要素のキーボードイベントを受け入れる
exports.command = function (selector, value) {
	return this.clearValue(selector)
		.setBalue(selector, value)
		.triggaer(selector, 'keyup', 13)
}
```

あとは実行したいテストを書いていくだけです。
test/e2e/specsのフォルダに対象のファイルを書いていきましょう。
G例としてoogleにアクセスしていろいろ操作するサンプルを見てみましょう。

url(string) .. 参照したいWebサイト等を指定
waitForElementVisible ... 他のコマンドまたはアサートが実行される前に要素がページに表示されるのを所定のミリ秒単位で待つ

などなど色々あります。
詳しくは[NightWatchのAPI](http://nightwatchjs.org/guide)を参照してください。

```javascript:example.js
module.exports = {
  'Demo test Google' : function (client) {
    client
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .assert.title('Google')
      .assert.visible('input[type=text]')
      .setValue('input[type=text]', 'rembrandt van rijn')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('ol#rso li:first-child',
        'Rembrandt - Wikipedia')
      .end();
  }
};
```
あとは実行しましょう。

```
$ npm run e2e
```
# まとめ
最近はテストの重要性がよくわかっていた気がします。
CloudFrontでBasic認証

CloudFrontの設定をいっつもパートナーさんに投げてるとバチが当たる。
俺の貴重な1時間はこうして無駄になったのである。
CloudFrontを利用しているサイトにBASIC認証をかける時は、Headerの設定をしないといかんよ、というメモ。

## Apacheの設定

これはごくごく普通の設定。今回はバーチャルホストの設定ファイルで書いてますが、`.htaccess`を使っていても一緒です。ちなみにApache2.4です。

```
AuthUserfile {{ パス }}/.htpasswd
AuthName "Please enter your ID and password"
AuthType Basic
Require valid-user
```

通常はこれでBASIC認証の設定は完了します。`apachectl restart`などでApacheを再起動して該当URLにアクセス、例のダイアログが表示されたら設定自体は問題ないはずです。

## CloudFrontの設定

…ところが、間にCloudFrontを噛ましていると、このダイアログが消えず、無限認証地獄にはまり込みます…。何故なら、CloudFrontはデフォルトで認証情報を通してくれないから…。そこで設定を変更してやります。

1. [CloudFrontのコンソール](https://console.aws.amazon.com/cloudfront/home)にアクセス。該当のドメインの管理画面にログインします
2. 「Behaviors」のタブをクリック
3. 「Create Behavior」をクリック。Behavior作成画面に遷移します
4. **Path Pattern**に「*」を設定。もしくは、対象のディレクトリを指定します
5. **Whitelists**に、「Authorization」を追加して、画面右下の「**Yes, Edit**」を押下。編集を完了します

![スクリーンショット 2019-03-20 21.00.41.png](https://qiita-image-store.s3.amazonaws.com/0/7201/55ddcb0f-5459-04f6-1846-265f4cda5c82.png)

これで無事、サイトにアクセスできるようになったはず。
あなたのちょっとした時間が無駄にならなければ、俺はそれだけで幸せなのです。
コンポーネント内でElement UI を部分的に使う

他のUIフレームワークを使っているなど、どうしても部分的にElement UI のコンポーネントを使いたくなった時。

まずは npm で Element UI をインストール。

```shell
npm i element-ui -S
```


コンポーネントファイルの中で、使いたいElement UI コンポーネントと、そのCSSを読み込む。
（ここでは、el-button）


```vuejs:MyComponent.vue

<template>
  <div>
    <el-button type="primary" plain> MyButton </el-button>
  </div>
</template>

<script>
import {Button} from 'element-ui';

export default {
  components: {
    'ElButton': Button,
  }
}
</script>

<style lang="scss">
@import "~element-ui/lib/theme-chalk/button.css";
</style>

```

これだけ。
詳しくは http://element.eleme.io/#/en-US/component/quickstart#on-demand
コンポーネントの一覧もここ。
はじめてのプログラミング　〜変数とは〜

##変数とは

変数とは値を入れる箱のことです。
値とは数値や文字列ですね。

書き方は、

```
変数 = 値
```

となります。

ちなみに変数に値を入れることを代入と言います。

##変数を使うメリット

変数を使うと何がいいのかというと、例えば九九で7の段を書きます。

```
7*1
7*2
7*3
7*4
7*5
7*6
7*7
7*8
7*9
```

これを8の段に変えたい場合、7をすべて8に変えなければなりませんが、これはめんどくさすぎます。

ここで変数が活躍します。

```
x=7

x*1
x*2
x*3
x*4
x*5
x*6
x*7
x*8
x*9
```

このようにして変数xに7を代入しておけば以下すべてのxに7が適用されるので、8の段にするときも変数xを8に変えるだけでとても楽です。

プログラムを組むときに「後で値が変わったらめんどくさいなぁ」という問題を、変数を使うことで汎用性がある形にすることで解決できます。

このように、後々の変更に強くなるというのが変数を使用することのメリットですね。

あとで値を変更したいときも、変数を使っている部分は一気に処理を変えることができます。

##変数は文字列の中でも使える

式展開という方法を使うと、文字列の中に変数を埋め込むことができます。

まず式展開とは何かということですが、名前の通り計算式を文字列に展開するためのものです。

```
#{計算式}
```

という書き方で、たとえば

```
puts "1+2は#{1+2}です。"
```

のようにすると、

```
1+2は3です。
```

と、計算結果を表示してくれます。

この計算式と同じ書き方で、

```
#{変数}
```

とすることで、文字列の中に変数を埋め込むことができます。

たとえば、

```
order="コーヒー"
puts "ご注文は#{order}ですね？"
puts "#{order}、オーダー入ります。"
```
```
ご注文はコーヒーですね？
コーヒー、オーダー入ります。
```

という感じです。

式展開を使って変数を埋め込むことで、注文が「カフェラテ」になっても対応可能な、汎用性ある形にできるのでとても便利ですね。

##まとめ
・変数とは値を入れる箱のこと。
・変数を使うことで汎用性がある形にすることができる。
・式展開を使うことで変数を文字列内に埋め込むことができる。
Macで旧バージョンのRをインストールするには?

### RでTCCを使いたいのでR最新版をインストールしたら、依存関係からかうまくパッケージをインストールできなかった。


#### R-3.4.4をインストールしてやることにしたが、パッケージ・インストーラーはどこに？
google chromeのアドレスバーに以下をコピペ（バージョン指定を変えれば、それを落とせる。）

https://cran.r-project.org/bin/macosx/R-3.4.4.pkg

Finderが開くので適当なフォルダを指定して落とす。

#### まず、現在のバージョンをアンインストール
ターミナルを起動して以下を実行。

> sudo rm -rf /Library/Frameworks/R.framework /Applications/R.app \
/usr/local/bin/R /usr/local/bin/Rscript


#### 旧バージョンをインストール
落としておいたパッケージ・インストーラーをダブルクリックして、言われるがままにインストール。
アプリケーションフォルダーからRを起動してバージョンを確認


##### TCCをBioconducterからインストール
Rで以下を実行してパッケージをインストール

source("https://bioconductor.org/biocLite.R")
biocLite("TCC")

無事インストールされた。
解析はこれから。
&& や || を使う条件分岐の理解と使用例。

論理演算子の && と || で条件分岐を書きたいときの書き方を、感覚的に理解するためのメモ。
【前提知識】[truthy](https://developer.mozilla.org/ja/docs/Glossary/Truthy)と[falsy](https://developer.mozilla.org/ja/docs/Glossary/Falsy)について。

#&&
意味: AND

```javascript
xxx && /*処理*/ ;
// ↑↓
if ( xxx ) {
  /*処理*/
} else {
  return xxx ;
}
```

##解説

- 通常のif文の代用。
 - ただし、elseの処理は自動的に `return xxx ;` になる 
- 左方が `truthy` なら、右方の処理をする。

##実際に使ってみる。
```
xxx && ooo ;
```

`xxx` が `truthy` なら…
→ 戻り値は `ooo` の値になる。

`xxx` が `falsy` なら…
→ 戻り値は `xxx` の値になる。 

##こういう時に使える！
- 左方がtrutyなら、右方の処理を実行したい時。
- 左方が定義済みだったら右方の値を代入したいっていうとき。

#||
意味: OR

```javascript
xxx || /*処理*/ ;
// ↑↓
if ( !xxx ) {
  /*処理*/
} else {
  return xxx ;
}
```


##解説

- NOT( ! )を使用するif文の代用。
 - ただし、elseの処理は自動的に `return xxx ;` になる 
- 左方が `falsy`なら、右方の処理をする。

##実際に使ってみる。
```
xxx || ooo
```

`xxx` が `truty` なら…
→ 戻り値は `xxx` の値になる。 

`xxx` が `falsy` なら…
→ 戻り値は `ooo` の値になる。 

##こういう時に使える！
- 左方が定義されていなかったら、右方の価を参照してくれる。左方が定義済みだったら、左方の値を参照してくれる。
    - いわゆる「初期値」というやつ。
    - strictモードを使ってるとき、Reactを書いてるときなど、未定義の値を参照するとエラーがでてしまう状況で使える。

#まとめ

- if　↔　&&
 - もし○○なら ( or ○○が 真 なら) 、●●する。
- else　↔　||
 - もし○○じゃないなら ( or ○○が 偽 なら) 、■■する。
- if ... else　↔　三項演算子
 - もし○○なら ( or ○○が 真 なら) ●●、違ったら ( or ○○が 偽 なら) ■■する。

（三項演算子については本記事では説明していませんが、ググればすぐに分かると思います。）
ECS + AWS SDK for Python(boto3)でS3へファイルPUT

#ECSのコンテナからS3へPUTするには
1. Dockerfileでboto3をインストール
2. boto3を使用したpythonのコーディング
3. コンテナ実行のロールにS3の権限を付与

※通信環境について
　もちろん、プライベートサブネットにおくなら、NATかEndpointで
　各種サービスに接続できるようにする必要はあります。　

##1.Dockerfile
boto3のインストールを記載

``` :Dockerfile
FROM python:3.6.8-alpine3.8
WORKDIR /temp
COPY ./test.py .
RUN pip install boto3
CMD [ "python", "./test.py" ]
```
##2.pythonのコーディング
boto3を使用してS3へPUT

参考URL
>https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html
>

```test.py
import boto3
import hashlib
import base64

#S3オブジェクトを作成
s3 = boto3.resource('s3',region_name='ap-northeast-1')
bucket = 'testbucket'
key = 'test.csv'
obj = s3.Object(bucket,key)

#ファイルコンテンツを設定
file_contents = 'testdayo'

#ファイルのMD5を取得
md5 = hashlib.md5(file_contents.encode()).digest()

#MD5をbase64・strに変換
b64md5 = base64.b64encode(md5).decode()

#ファイルをS3のバケットへput
obj.put( Body=file_contents, ACL='private', StorageClass='STANDARD', ContentMD5=b64md5) 

```
putのパラメーターには下記を設定していますが、必要に応じて公式のDocsをご確認くださいませ。
①Body：ファイル内容
②ACL :オブジェクトのACL
③StorageClass：ストレージクラス
④ContentMD5：チェックサム用のMD5の値
ggplot2のgeom_lineで特定の線だけ太くする

## はじめに

ggplot2を使って以下のようなレポーティング用のグラフを作成している時、

![line_plot.png](https://qiita-image-store.s3.amazonaws.com/0/162536/e1bf774b-28d7-2a1c-bbb0-64ed71409279.png)

次のようなリクエストがありました。

> 「グラフのグループAの線だけ太くすることできない？」

ggplot2ならできるだろうと思ってトライしましたが、調べるのに案外時間がかかったのでメモしておきます。

## 環境

```
> R.version.string
[1] "R version 3.5.1 (2018-07-02)"
> packageVersion("ggplot2")
[1] ‘3.1.0’
```

## 準備

パッケージの読み込みとデータの準備を行います。
まだインストールされていない場合は`install.packages("hoge")`でインストールをお願いします。

``` R
# パッケージの読み込み
library(tidyr)
library(dplyr)
library(magrittr)
library(ggplot2)

# seeedの設定
set.seed(1234)

# データの準備
df <- data.frame(
  item1 = floor(runif(9, min = -3, max = 3 + 1)),
  item2 = floor(runif(9, min = -3, max = 3 + 1)),
  item3 = floor(runif(9, min = -3, max = 3 + 1)),
  category = rep(LETTERS[1:3], 3)
)
```

## グラフの作成

### カテゴリ毎の平均の折れ線グラフ

とりあえず準備したデータから冒頭のグラフを作成してみます。
今回はカテゴリ毎の平均を折れ線グラフで描画します。

``` R
df %>% 
  gather(key, value, -category) %>% 
  group_by(category, key) %>% 
  summarise_all(mean) %>% 
  ggplot(aes(key, value, group = category, colour = category)) +
  geom_line() +
  geom_point()
```

![line_plot.png](https://qiita-image-store.s3.amazonaws.com/0/162536/a383cae9-469d-4dea-bf6f-beea2664377e.png)


### 特定の線のみを太くした折れ線グラフ

`scale_size_manual()`を利用することで細かく線の太さを調整することができます。
ただし、aestheticsにsizeを追加しないと動作しません。

``` R
df %>% 
  gather(key, value, -category) %>% 
  group_by(category, key) %>% 
  summarise_all(mean) %>% 
  ggplot(aes(key, value, group = category, colour = category, size = category)) +
  geom_line() +
  geom_point() +
  scale_size_manual(values = c(2, 1, 1))
```

できました！

![bold_line_plot.png](https://qiita-image-store.s3.amazonaws.com/0/162536/dc4f9773-4de1-4ee8-d8c9-05d77c5bb65f.png)

enjoy!
base64化されたgifをsafariで読み込むとうまく再生されないバグの対処法



## 概要

```js
// base64化されたgif
const data = "data:image/gif;base64,fogefogefoge"
setTimeout(() => {
  $("img").attr("src", data)
}, 1000)
```

上記のようなプログラムのとき、safari(mac、ios両方)だと再読み込み時にgifが止まってしまうバグに遭遇しました。

## 対処法

どうやらsafariがbase64化されたgifをキャッシュするような挙動をしていました。

metaタグやサーバーの設定でキャッシュを無効化してもキャッシュされるため、base64の文字列に乱数を加えて、キャッシュされないようにします。

```js
const getCharset = () => {
  const n = Math.floor(Math.random() * 1000)
  return `charset=${n}`
}

const data = `data:image/gif;${getCharset()};base64,fogefogefoge`
setTimeout(() => {
  $("img").attr("src", data)
}, 1000)
```

charsetは本来文字コードを指定するものですが、無効な文字列を指定しても動くため、そこに乱数を指定します。

これで、base64化されたgifをキャッシュされないため、再読み込み時にもgifが止まらなくなりました。

## 最後に

再現性がなかったため本番のソース以外で動作を確認できませんでしたが。。

同じような状況に陥ってる人の助けになったら幸いです☺️

## 参考

- [Base64 - Wikipedia](https://ja.wikipedia.org/wiki/Base64)
- [データ URL - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
iPhone初期化後にサインインできない場合

# 【事象】
譲渡されたiPhoneを初期化し、既存のApple IDでログインしてセットアップしようとしたところ、以下のメッセージが表示され、セットアップが続けられなかった。
「サインインできません」

# 【原因】
iPhoneには、同一デバイスからサインアップできるアカウントは3つまで、といった制限があるため。

# 【対策】
一旦、別のiOS端末(別のiPhone等)から、既存のAppleIDを使用し、iCloudへサインインする。
その後、サインインできなかったiPhoneとAppleIDを使い、再度サインインを試みたところ、ログインできるようになった。
JavaScriptでクリックした要素をクリップボードへコピーする

#要素をクリックしたらコピーできるようなスクリプト
input要素やtextarea要素内の文字列をクリップボードへコピーするようなコードはよく見かけたものの、単純にdivとかspanとかpとかで囲んだ文字列をコピーするようなコードがなかなか見つからなかったので自分で作りました。

copyというクラスを付与した要素で動作するようにしています。

##まずはHTMLを準備
以下のようなHTMLファイルがあるとします。

```html:example.html
<div class="copy">この文字列をコピーさせるよ</div>

```

divである必要はありません。重要なのは、__copyというクラスを与える__ことです。

##肝心のJavaScriptコード
JavaScriptコードは以下のようになっています。めんどくさい方はコピペして使っちゃってください。

```javascript:click_copy.js
(function () {
    var copyTarget,copyTargets,num,txt,range;
    copyTargets = document.querySelectorAll('.copy');

    ClickCopy = function() {
        copyTarget = this.textContent;

        txt = document.createElement("textarea");
        txt.value = copyTarget;

        document.body.appendChild(txt);
        txt.select();
        document.execCommand('copy');
        txt.parentElement.removeChild(txt);
    }

    for(i=0,num=copyTargets.length;i<num;i++) {
        copyTarget = copyTargets[i];
        copyTarget.addEventListener('click',ClickCopy);
    }
    
}());
```

今回は即時実行関数で作成しています。
#使い方
クリックしたらクリップボードへコピーさせたい要素にcopyクラスをつけてください。

ちなみに__copyクラスではなく、任意のクラスをつけて実装する場合は上記のJavaScriptコードの３行目のquerySelectorAllの引数を任意のクラスに変えてください__。

#説明
変数copyTargetsにはcopyクラスが付与された要素のリストが入ります。

ClickCopy関数はクリップボードにコピーさせる機能の実体です。
変数copyTargetにはイベントで取得された要素のテキストノードが入ります。
新たにtextareaエレメントを作成したのちtxtに代入、値としてcopyTargetを入れます。
appendChildメソッドでbodyの末尾にノードを追加します。
その後、追加したノードを選択し、execCommandでコピー。その後txtを破棄します。

最後のfor文はクリックイベントを拾うための部分です。これによりhtmlファイル内のすべてのcopyクラスがつけられた要素でClipCopy関数が動きます。
LaTeX：アイテマイズ入れ子で(1-1)みたいにする

※`\labelenumii`と`enumii`のiの数に注意！

```latex:例
\begin{enumerate}
    \renewcommand{\labelenumii}{(\ref{item1}-\arabic{enumii})}
    \item \label{item1} {Hoge Hoge.}
    \begin{enumerate}
        \item{Piyo Piyo.}
        \item{Buf Buf.}
        \item{I don't want to work any more.}
    \end{enumerate}
    \item{meu meu.}
\end{enumerate}
```
```plaintext:出力結果
(1) Hoge Hoge.
   (1-1) Piyo Piyo.
   (1-2) Buf Buf.
   (1-3) I don’t want to work any more.
(2) meu meu.
```
[イベントメモ］kaggleの体験セミナー＠キカガクさん|190220

イベント内容の備忘録です。

# イベント概要
[【キカガク流ＡＩ入門セミナー】Kaggleではじめるデータサイエンス体験セミナーでプルス・ウルトラ！](https://kikagaku.connpass.com/event/123467/)

#### 自分の参加目的
- pythonの理解を深めたい
- kaggleがどんなツールか説明できるようになる
- kaggleを自力で使うことができる

**→期待以上の持ち帰りがあった!**

#### 主催目的（私解釈）
- AIブームは過ぎて、研究フェーズから定着フェーズになっている世の中。キカガクさんは、そんな状況を踏まえて、AIをこれから定着させたいと思っている人・会社に、AIに関する情報や学習コンテンツを提供している
- kaggleの題材を使いながら、参加者がAIを導入するにはどんな手順が必要なのか、ざっとした流れをわかるようになること

# セミナースタート！
#### kaggleとは
- **kaggle（カグル）**とはデータサイエンティスト・機械学習に関するコンペサイト。
- 特徴的なのは、企業が課題を出して、誰でも簡単に分析モデルを提出できること。そして、精度の高いモデルに対しては企業が買い取る＋賞金がでる！

#### 分析モデルを作ってkaggoleコンペに提出するまでの流れ
今回の題材は、映画にもなった「titanic」で、どんな特徴を持った人が生き残ったのかを分析するモデルを構築すること。
残っているデータとしては、年齢、チケット代、氏名、同乗者、性別など。

1. kaggle >検索バー「titanic」>検証・テストデータをDL
2. googleドライブに１のデータファイルをアップロード
3. google colabにログイン。こちらの環境上でpythonを使い開発スタート　
    1. googleドライブとgoogle colabを連携
    2. pythonで使う便利なライブラリをインポート
    3. データ読み込み
    4. データ数と特徴量を確認
    5. 欠損値（NULL)を確認（検証・テストデータ両方し、1/3欠損値ならNG）
    6. 欠損値を踏まえて、検証・テストデータを結合することに
    7. 特徴量（colamns)ごとに生存者との関係を見ていく（グラフを使う）
    8. データを整形
        1. （特徴量を見て、値を１くくりにできそうなものは合算。x軸を意味あるくくりでまとめていくイメージ)
        2. 文字列のcolamnsはダミー変数化（数値に変換）。
        3. カテゴリを変数化（例：女性は１、男性は０）
        4. 欠損値の補完
        5. 特徴量の選別が完了
    9. 選別結果を踏まえて、特徴量をいくつか選択。データセット作成
    10. 学習・検証・テストデータの３分割
    11. 特徴量の重要度を計測
    12. モデルを作成
    13. モデルの改良
4. kaggleにアップロード。即時、モデル精度のランキング結果が表示される

#### 豆知識
- google colab はGPU環境も１クリックで設定可能！
- Dataの項目意味がわからないときは、kaggle>Data　で確認

# 感想
- pythonをプライベートで触っているくらいなので、kaggleというサイトの使い方がわかってラッキーだと思った。自分で作ったモデルの精度が良いものなのか客観的にわかるのは、ちょっとモチベーションが上がる。
- キカガクさんの講師の方の説明がわかりやすく、また、データの処理の部分のお話がとても面白くて、こういった話はネットで自分は拾えてこなかったので、面白いなあと感じた。
- データの項目の意味がわかると良い。「ドメイン知識」を持っていると良い。（例）タイタニック号の時代は、敬称で社会的地位が判別できた。それを知っていると、敬称と生存者の相関関係があるだろうと予想も立てられる。データがどんな意味を持つのかわかっていて分析するのが最もよいので、ビジネスでは業務を知っている人×データサイエンティストがタックを組んで、モデルを構築するのが良い。
- 欠損値を補完するときは、ヒストグラムの山が１つの時は平均値、山が２つなら中央値で埋めるのが良い
    - 「相関関係が高い」を安易的に信じるのは危険。（例）温暖化もインターネット普及も時系列的には右肩上がり。X軸を温暖化、Y軸をネット普及と見た時に、数値としては相関関係が出ているように見えるが、実際には因果関係はあるのだろうか？
- いただいたコードの資料も、沢山のポイントが書かれていて、嬉しいお土産だった。
  
# 利用したサイト
- https://www.kaggle.com/c/titanic/leaderboard
- https://colab.research.google.com/notebooks/welcome.ipynb
AWS S3で「Access Denied」を解決する

#はまっていたところ
Rails + Carrierwave + fog + S3で画像アップロード機能をつくっていたところ、「Access Denied」にはまる。
永遠に抜け出せないのではないかと思いながらバケットポリシーに挑んでいたところを、
[エラー<Message>Access Denied</Message> 〜Rails + Carrierwave + HerokuでAWS S3に画像を保存〜](https://qiita.com/yukiyukimiyaiwa/items/a9e0103c8342b81f6ac1)
こちらの記事に救っていただきました。

ただ、またここでも1つ落とし穴?があり、かなりの時間を使ってしまったので、その解決方法を残しておきます。

#前提条件
- [x] rails側、Carrierwave、fogの設定
- [x] s3でのバケット作成
- [x] IAM関連、ユーザーへの権限付与
- [x] バケットポリシーの設定
- [ ] 「Access Denied」の解決

ここの設定方法は先ほどもあげた下記の記事等で触れられているので、まだの場合はこちらを参考にお願いします。
([エラー<Message>Access Denied</Message> 〜Rails + Carrierwave + HerokuでAWS S3に画像を保存〜](https://qiita.com/yukiyukimiyaiwa/items/a9e0103c8342b81f6ac1))

#解決方法
<img width="1440" alt="s3.png" src="https://qiita-image-store.s3.amazonaws.com/0/252342/3c304656-1335-8474-721c-ed37ad28096a.png">

<img width="1440" alt="s3_acount.png" src="https://qiita-image-store.s3.amazonaws.com/0/252342/42f853fa-4cb2-c335-bddb-eb0d4df2d12c.png">

**アカウント+バケット** のパブリックアクセス設定を画像のように変更する。

バケットのパブリックアクセス設定のみを変更するだけで終わると、引き続き「Access Denied」の海で溺れることになります。(体験談)

#解決しなかったら
- rails側、Carrierwave、fogの設定
- IAM関連、ユーザーへの権限付与
- バケットポリシーの設定

このあたりの設定を1から見直してみてください。

##おまけ

実はもうひとつ詰まっていたところがあり、

```ruby:carriervave.rb

require 'carrierwave/storage/abstract'
require 'carrierwave/storage/file'
require 'carrierwave/storage/fog'

CarrierWave.configure do |config|
  # if Rails.env.production?
  # これしか書いていない状態でstaging環境でテストし、「ArgumentError ( is not a recognized provider):」
  if Rails.env.production? || Rails.env.staging?
    config.storage :fog
    config.fog_provider = 'fog/aws'
    config.fog_directory  = 'xxxxxxxxxxxxxxxx'
    config.asset_host = 'https://s3-ap-northeast-1.amazonaws.com/xxxxxxxxxxxxxxxx'
    config.fog_credentials = {
      provider: 'AWS',
      aws_access_key_id: Rails.application.credentials.dig(:aws, :access_key_id),
      aws_secret_access_key: Rails.application.credentials.dig(:aws, :secret_access_key),
      region: "s3-ap-northeast-1",
      path_style: true
    }
  else
    config.storage :file
    config.enable_processing = false if Rails.env.test?
  end
end

CarrierWave::SanitizedFile.sanitize_regexp = /[^[:word:]\.\-\+]/
```

`if Rails.env.production?`
これしか書いていない状態でstaging環境でテストし、`ArgumentError ( is not a recognized provider):`を出し続けるという間抜けなことをやっていました。
「ERROR! The server quit without updating PID file」のエラー解消


macの再起動後に起こったエラー
自分でmysqlのバージョンを変えるコマンドを打ったことにより起こったエラー
この二つの合わせ技

なかなか解決に至る記事が見つからなかったのでここに書く
履歴を辿ってもその記事にたどり着けない不思議
理屈も何もないコマンドと結果のみ

# $ chown username /usr/local/var/mysql/***.local.err
おそらくこのコマンドの後に

```
$ mysql.server start
```
で、直った。以下は軌跡

# ERROR! The server quit without updating PID file
```
$ mysql.server start
Starting MySQL
.Logging to '/usr/local/var/mysql/***.local.err'.
ERROR! The server quit without updating PID file (/usr/local/var/mysql/***.local.pid).
```

```
$ mysql
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

```
$ touch /tmp/mysql.sock
```

```
$ mysql
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)
```

```
$ mysql.server start
Starting MySQL
.Logging to '/usr/local/var/mysql/***.local.err'.
ERROR! The server quit without updating PID file (/usr/local/var/mysql/***.local.pid).
```

```
$ bundle exec rails s
can't connect to local mysql server through socket '/tmp/mysql.sock' (38)
```

## Gem::Ext::BuildError: ERROR: Failed to build gem native extension
```
$ bundle exec gem uninstall mysql2
Successfully uninstalled mysql2-0.5.2
$ bundle install
Installing mysql2 0.5.2 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
```

# $ chown username /usr/local/var/mysql/***.local.err
```
$ chown username /usr/local/var/mysql/***.local.err
$ bundle install
installing mysql2 0.5.2 with native extensions
Bundle complete! 23 Gemfile dependencies, 81 gems now installed.
Bundled gems are installed into `./vender/bundle`
```
bundle install成功

## can't connect to local mysql server through socket '/tmp/mysql.sock' (38)
```
$ bundle exec rails s
Mysql2::Error::ConnectionError (Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)):
```
エラーは変わらない

# $ touch /usr/local/var/mysql/***.local.pid
```
$ mysql.server restart
ERROR! MySQL server PID file could not be found!
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/***.local.pid).
$ touch /usr/local/var/mysql/***.local.pid
$ sudo mysql.server restart
ERROR! MySQL server PID file could not be found!
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/***.local.pid).
```
初めは`mysql.server start`で、エラーが起こっていたのでリスタートにしていたが、スタートで成功

```
$ touch /usr/local/var/mysql/***.local.pid
$ mysql.server start
Starting MySQL
.. SUCCESS! 
```

理解した都度に更新していきます。ご容赦あれ
react-router@v4 + Redux でPostした後に一覧ページにリダイレクトするが、レンダリングされなくて苦労したときのメモ

## 背景
react-router + Redux でCRUD操作後のリダイレクトで躓いた。例えば、新規作成が成功したあとは、一覧ページにリダイレクトしてほしい。 react-router@v4でのリダイレクトが結構面倒で、やりかたによってはレンダリングがされなくて困ったのでメモ。

## 解決方法
基本的にはreact-routerでのリダイレクトは、[historyモジュール]()を使ったやり方がオーソドックスっぽい。

参考: [history.push not working when using BrowserRouter](https://github.com/ReactTraining/react-router/issues/4059#issuecomment-308652098)


Root.js

```js

import React from 'react'
import { Provider } from 'react-redux'
import ListMemo from '../containers/ListMemo'
import CreateMemo from '../containers/CreateMemo'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'
import PropTypes from 'prop-types'
import history from './History'

const Root = ({ store }) => (
  <Provider store={store}>
    <Router history={history}>
      <div>
        <Route exact path="/" component={ListMemo} />
        <Route path="/create" component={CreateMemo} />
      </div>
    </Router>
  </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired
}

export default Root
```

Hisotry.js

```js
import {createBrowserHistory} from 'history'

export default createBrowserHistory()
```

CreateMemo.js

```js
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
  createMemo,
} from '../actions'

class CreateMemo extends Component {
  // ===略=====

  handleSubmit(e) {
    e.preventDefault();
    const { dispatch } = this.props
    dispatch(createMemo(this.state)).then(e => {
      this.props.history.push('/') // ここでcreateのactionが終わった後でpushする
    })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" name="name" value={this.state.name} onChange={this.handleChangeName} />
            Description:
            <input type="text" name="description" value={this.state.description} onChange={this.handleChangeDescription}/>
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

// ==略

```

## うまく行かなかった方法
はじめはactionの中でresponseが返ってきたときに history.push（'/') していた。ブラウザのURLはリダイレクトしたが、レンダリングされなかった。原因は不明。念の為、うまくいかなかったときに参考にしたリンクもメモしておく↓


[Best practice to redirect within action creator?](https://github.com/ReactTraining/react-router/issues/3498#issuecomment-301057248)
[JS]switch文のcaseはブロックで記述しよう

# switchのcase内でconstを使ったら...

何気なくswitch文を書いていたら、こんな記述をした時に怒られてしまいました。

```javascript

const hoge = 'hoge'

switch (hoge) {
  case 'hoge':
    const fuga = 'fuga'
    break
  default:
    const fuga = 'fuga'
}

```

constがブロック内に２つある、つまり、fuga はすでに定義されていますよ、ということだ。
確かに、同じブロック内で定義されているもんね。

# ブロックにしてあげる

解決方法は、case文を囲ってあげるとエラーが解消される。

```javascript

const hoge = 'hoge'

switch (hoge) {
  case 'hoge': {
    const fuga = 'fuga'
    break
  }
  default: {
    const fuga = 'fuga'
  }
}

```

当たり前っちゃあ当たり前なのだが、スコープのことを考えるならば確かにこうあるべきだ。
ちなみに、ESLintでも`no-case-declarations`としてルール化されているようだ。


# ※追記 2019.03.28

こちらの使用方法についてコメントいただいたので補足します！

今回何故このように`case`文内で`const`を宣言したいと思ったかというと、`case`毎に処理を分岐させたかったためです。
結局`case`の中身も`function`化してしまったためこの記法は使用しませんでしたが、ESLintでも紹介されている方法だったので紹介させていただきました！
link rel="prev" "next"の自動出力について

### 前提・実現したいこと

開発会社にオウンドメディア兼サービスサイトを制作してもらったのですが、
ページネーションされたカテゴリアーカイブページにて
```
<link rel="prev" href="https://hoge/page/2/>
<link rel="next" href="https://hoge/page/4/>
```
などの、link rel="prev"/"next"が自動挿入されません。

制作会社の方がかなりマニアックな構造にされたようで、
自動でlink rel="prev"/"next"が入らなくなったようです。

解決策や心当たりがございましたら、ご教授願います。

### 試したこと
以下の2種類のコードをfunctions.phpに記述しましたが、どちらとも変化はありませんでした。

```php
///////////////////////////////////////
// Wordpressデフォルトのnext/prev出力動作を停止
///////////////////////////////////////
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

///////////////////////////////////////
//ページネーション（一覧ページ）と分割ページ（マルチページ）タグを出力
///////////////////////////////////////
function rel_next_prev_link_tags() {
  if(is_single() || is_page()) {
      //1ページを複数に分けた分割ページ（マルチページ）でのタグ出力
    global $wp_query;
    $multipage = check_multi_page();
    if($multipage[0] > 1) {
      $prev = generate_multipage_url('prev');
      $next = generate_multipage_url('next');
      if($prev) {
        echo '<link rel="prev" href="'.$prev.'" />'.PHP_EOL;
      }
      if($next) {
        echo '<link rel="next" href="'.$next.'" />'.PHP_EOL;
      }
    }
  } else{
    //トップページやカテゴリページなどのページネーションでのタグ出力
    global $paged;
    if ( get_previous_posts_link() ){
      echo '<link rel="prev" href="'.get_pagenum_link( $paged - 1 ).'" />'.PHP_EOL;
    }
    if ( get_next_posts_link() ){
      echo '<link rel="next" href="'.get_pagenum_link( $paged + 1 ).'" />'.PHP_EOL;
    }
  }
}
//適切なページのヘッダーにnext/prevを表示
add_action( 'wp_head', 'rel_next_prev_link_tags' );

//分割ページ（マルチページ）URLの取得
//参考ページ：http://seophp.net/wordpress-fix-rel-prev-and-rel-next-without-plugin/
function generate_multipage_url($rel='prev') {
  global $post;
  $url = '';
  $multipage = check_multi_page();
  if($multipage[0] > 1) {
    $numpages = $multipage[0];
    $page = $multipage[1] == 0 ? 1 : $multipage[1];
    $i = 'prev' == $rel? $page - 1: $page + 1;
    if($i && $i > 0 && $i <= $numpages) {
      if(1 == $i) {
        $url = get_permalink();
      } else {
        if ('' == get_option('permalink_structure') || in_array($post->post_status, array('draft', 'pending'))) {
          $url = add_query_arg('page', $i, get_permalink());
        } else {
          $url = trailingslashit(get_permalink()).user_trailingslashit($i, 'single_paged');
        }
      }
    }
  }
  return $url;
}

//分割ページ（マルチページ）かチェックする
function check_multi_page() {
  $num_pages    = substr_count(
      $GLOBALS['post']->post_content,
      '<!--nextpage-->'
  ) + 1;
  $current_page = get_query_var( 'page' );
  return array ( $num_pages, $current_page );
}
```
```php
function ozLinkRelPrevNext(){
  global $paged;
  if( is_archive() ) {
    if ( get_previous_posts_link() ) {
      echo "<link rel='prev' href=".get_pagenum_link( $paged-1 )." />"."\n";
    }
    if ( get_next_posts_link() ) {
      echo "<link rel='next' href=".get_pagenum_link( $paged+1 )." />"."\n";
    }
  }
}
add_action('wp_head', 'ozLinkRelPrevNext');
```
Microbitで360度サーボモータを動かす

### サーボモータとは

サーボモータは、回転数や回転角度を制御できるものが一般的ですが、360度回転するものもあります。
360度回転を利用したサーボモータカーとサーボモータードライバーなどがキットで売られているものもあります。

### サーボモータの配線

配線外側から
茶（黒）：GND
赤（赤）：3V
オレンジ（白）：0（P0)
PCからの電源だと電源不足になることがあるので、電池ボックスをつなぐ必要があります。

###Microbitのサーボモータのプログラム

####普通のサーボモータ
普通のサーボ―モータでは、角度を指定してその角度まで動かします。
参考：
[microbit で工作しよう！サーボモーターで動くバレリーナを作ってみた](http://生活にアートを.com/microbit-servo-diy/)
[サーボモーターを制御する](https://sanuki-tech.net/micro-bit/make/servomotor/)



####360度サーボモータ
360度サーボモータでは、「角度」の数値を90を基準に0～180の間で変化させることで、回転方向やスピードをコントロール出来ます。（部品名：Micro:servo EF90Dなど）
参考：
[micro:bitでガッツリ遊んでみた その1](http://blog.siliconhouse.jp/archives/52152898.html)



#####360度サーボモータプログラム
A+Bボタンが押されると停止。Aボタンが押されると前進、Bボタンが押されると後進。
![servotest.png](https://qiita-image-store.s3.amazonaws.com/0/165987/827dda95-6820-9b73-b5ce-7cf09a2782ed.png)


Micro:bitは3チャンネルあるので、P0、P1を左右の360サーボモータコントロールに割り当て、もう一つのチャンネルにセンサーなどをつけることができます。


###Ring:Bitカーの制御
360度サーボモータを使ったサーボカのキット
[Ring:bit Car — Mirco:bit Educational Smart Robot Kit  ](https://www.robot-r-us.com/index2.php?page=shop.product_details&flypage=flypage_new.tpl&product_id=992&category_id=143&option=com_virtuemart&Itemid=50)
Ring:Bitカーでは特別なプログラミング用追加パッケージが用意されてそれを使って簡単にプログラムを組むことができますが、追加のパッケージを使わなくてもプログラムするもできます。
![Ring_bit_Car.jpg](https://qiita-image-store.s3.amazonaws.com/0/165987/114588aa-c609-9266-033e-f3723c541451.jpeg)


#####サンプルプログラム
追加パッケージ（Ring:bitのブロック）を使った公式サイトのプログラム
[Case_04 Wireless Remote Control](https://www.elecfreaks.com/learn-en/Ring_bit_Car_Kit_Case_04_Wireless_Remote_Control/)

#####Ring:bitのブロックを使わないプログラミング
90度を挟んで、サーボモーターの回転方向に注意しながら、角度を指定する。90度は停止。

**受信側**
![servo_res.png](https://qiita-image-store.s3.amazonaws.com/0/165987/4f5c8118-ab8a-4c38-b016-959324d0e959.png)

**送信側**
![servo_send.png](https://qiita-image-store.s3.amazonaws.com/0/165987/414092e7-2ac7-c68e-31d3-2255b5073833.png)

送信側のプログラムは[Microbit:DC motor制御](https://qiita.com/Gyutan/items/ac3cd5442ef8f2be348b)と同じです。A,Bボタンだけだと命令コマンドが限られるので、傾きを利用して命令コマンドを増やしています。
受信側のプログラムは、関数の中身をDCモータ用からサーボモータ用に書き換えるだけです。
【WordPress】プラグイン「Contact Form 7」で出力されるform要素に対してJSで属性を追加する（autocomplete="off"を付与させる）

# プラグイン「Contact Form 7」のformタグに属性を追加する

ショートコードいじってもできなさそうなんでもうJSで無理やり属性を付与させます

例として`autocomplete="off"`を追加します

```html
<script type="text/javascript">
$(window).load(function(){
    $('form.wpcf7-form').attr('autocomplete', 'off');
});
</script>
```

他の属性もこんな感じで追加していけば行けるはず

# おわり
- しれっとjQueryで書いてる（てへぺろ
filterとかを使って関数を組み合わせたメモ（個人的）

## formで取得したものを全取得したかった
最初はこういう風にやった
`$('form').val()`



だがしかし、これだとあまりうまく行かず行き着いた先が

`  var $form = $('form');
  var param = $form.serializeArray();`

こっち、もともと背景はajaxでapiにpostするもので、今回はこれを使ったらうまくいった

基本的にはこういうオブジェクトになって返ってきていて

```javascript

var obj = [
  { name: "conversion[id]", value: "ssss" },
  { name: "conversion[original_params]", value: "" },
  { name: "conversion[referrer]", value: "http://xxx.localhost.local:3001/lp/xxx" },
  { name: "conversion[conversion_at]", value: "" },
  { name: "conversion[url]", value: "http://solar.localhost.local:3001/lp/xxxx" },
  { name: "conversion[items_1]", value: "種別:土地・その他" },
  { name: "conversion[items_2]", value: "" },
  { name: "conversion[items_3]", value: "" },
  { name: "conversion[items_4]", value: "" },
  { name: "conversion[items_5]", value: "面積:999㎡" },
  { name: "conversion[items_6]", value: "状態:xxxx" },
  { name: "conversion[items_7]", value: "都道府県:xxx県" },
  { name: "conversion[items_8]", value: "メールアドレス:m@xxx.com" },
  { name: "conversion[items_9]", value: "電話番号:07070707070" }
]

//まずこれでvalueだけをマップして全部返す
var result = obj.map( fil => {
  return fil.value
})

//そうするとだいたいこんな形で出る
console.log(result, 222);
//["ssss", "", "http://xxx.localhost.local:3001/lp/xxx", "", "http://xxx.localhost.local:3001/lp/xxxx", "種別:土地・その他", "", "", "", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 222

//そしてそれをさらにfilterを使って "" ←文字なし以外を列挙する
var fil = result.filter(num => num !== '')
//["ssss", "http://xxx.localhost.local:3001/lp/xxx", "http://xxx.localhost.local:3001/lp/xxxx", "種別:土地・その他", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 

//そしてさらにそれをsliceを使って削除
var f = fil.slice(3)

console.log(f, 3333);
//["種別:土地・その他", "面積:999㎡", "状態:xxxx", "都道府県:xxx県", "メールアドレス:m@xxx.com", "電話番号:07070707070"] 

//でこれをレンダリングforEach使ったがこれ他にできる方法があるなら教えてほしい
 f.forEach((value) => {
   $('#confirm-table dl').append(`<div>${value}</div>`);
 });

```


今回はURLの部分は削除したかったのでこの方法でできた
やってて気づいたのが、今回メモしたのは関数で処理した`結果`を関数で返すという例だったので忘れないようにメモ
これが関数型？？なのかなという感じ？なのかはちょっと自信がないが、少し成長した感じだったので一旦忘れないようにメモ


- filter
- map
- slice

を使ったがもう少し配列の操作、slice等を使って技術を高めていきたいとおもいまーす
※書いてて思いましたが変数目くそですね、この辺もリーダブル読んで勉強します
MTタグの書き方（迷子）

# いい歳して迷子
みんな大好きMovableType。
仕事で使うからと覚えてから早...7年？
ずっと独学でやってきたのですが、時々他の方の書いたソースを見ると書き方が人それぞれで...
結局どれか標準なの？と疑問を抱きつつもそっと胸にしまい、歩み続けた社会人生活。
そろそろ三十路も見えてきたので迷子届でも出してみようかと。

WordPressみたいなコーディングルールがあればいいのに。
...MTだとないよね？

# MTタグの書き方
~~義務教育で習いますね、MTタグの記述方法。~~
自分の思いつく書き方で4パターンほど。

1.  `<mt:Var name="hoge">`
2.  `<MTVar name="hoge">`
3.  `<$mt:Var name="hoge"$>`
4.  `<$MTVar name="hoge"$>`

違いは単純で、1,2 と 3,4が`$`の有無。
1,3 と 2,4が~~奇数か偶数か~~タグの記述に`:`を入れるか入れないか。

`$`は前だけ入れている人もいれば後ろだけ入れている人もいる。
　※`$`はファンクションタグにのみ使う、という方も。
`<mt:Var`を`<mt:var`、`<MTVar`を`<mtvar`と書く人も。

...~~燃えればいいのに。~~

# 自分はこれ派
~~たけのこ派~~
自分は上で言うと2の記述を崇拝する教団に属していることになります。
2.  `<MTVar name="hoge">`
だって文字数少ないんだもん。

# あなたは何派？
~~ネコ派？イヌ派？~~
どうかお気軽に "自分はこういった書き方をしている～" などコメントくださいな。
今後の参考にさせて頂きますゆえ。

# 最後に
Qiita初投稿。
なんかこういう発信する側、久々だわ～。

**ありがとうございました。**
【embulk】プラグイン（gem）だとかを一括でアンインストールする方法

これができるとなんなんだっていうところではあるのですが、
とある問題にぶち当たっててインストールしているジェムを入れ直したらもしかしたら・・・。みたいなところで色々模索してて、一括でアンインストールできるコマンドがあって嬉しかったのです。


```
embulk gem uninstall -a
```

を叩くと本当に消すか？みたいに聞かれるので
Y（エンター）
を連打していればそのうち全部消えます。


・・と思ったのですが、

```
$ embulk gem list
2019-03-20 18:14:17.653 +0900: Embulk v0.9.16

Gem plugin path is: /home/deploy/.embulk/lib/gems


*** LOCAL GEMS ***

bundler (1.16.0)
did_you_mean (default: 1.0.1)
embulk (0.9.16 java)
jar-dependencies (default: 0.3.10)
jruby-openssl (0.9.21 java)
jruby-readline (1.2.0 java)
json (1.8.3 java)
liquid (4.0.0)
minitest (default: 5.4.1)
msgpack (1.1.0 java)
net-telnet (default: 0.1.1)
power_assert (default: 0.2.3)
psych (2.2.4 java)
rake (default: 10.4.2)
rdoc (default: 4.2.0)
test-unit (default: 3.1.1)
```

結構残ってました。

多分上記のコマンドで消せるのはembulkをインストールしたあとに、あとから入れたプラグイン（gem）なんだと思います。

上で残っているのはきっと必須のgemなんだと思います。
汗と涙と血のData too Long for Column

#目覚めよ、Concrete5
mysqlの設定でもかなり苦労させられた。結構考えられ得ることをやるだけやったのにこれだもんね、結構ショック。
やったことは、

- mysql起動（当たり前）
- mysqlのポートと、awsのセキュリティグループのRDS用の指定ポートが同一か確認
- grant構文によるデータベースに対する全権付与
- 文字セットをutf8にしておく

こんだけ抑えておけば、大丈夫だろうと思ったら、タイトルのエラーがドバーーーーーン！！まじF●ck。空気読め。そこは成功して、俺、少しできるようになったかなくらいの気持ちを持たせてくれ。

・・・で、なんなのこれ。

## SQLモードの制約が原因
公式では、
> STRICT_TRANS_TABLES は、トランザクションストレージエンジンに対して厳密モードを有効にし、非トランザクションエンジンに対してもある程度有効にします。これは、次のように動作します。

>>トランザクションストレージエンジンの場合、ステートメント内で生じる不良データ値は、ステートメントの実行中止やロールバックを引き起こします。

>>非トランザクションストレージエンジンの場合、ステートメントは、挿入または更新される最初の行でエラーが発生した場合に中止します。(トランザクションテーブルの場合と同じように、最初の行でエラーが生じた場合、ステートメントを中止して、テーブルを変更しないままにしておくことができます。)2 行以降でエラーが生じた場合、最初の行によってテーブルがすでに変更されているため、ステートメントは中止しません。代わりに、不良データ値が調整され、この結果、エラーではなく警告が発せられます。言い換えると、STRICT_TRANS_TABLES を使用すると、テーブルを変更せずに行える場合は、間違った値によって、MySQL はこれまでに行われたすべての更新をロールバックします。ただし、いったんテーブルが変更されると、それ以降に生じるエラーは調整や警告になります。

変なデータを入れようとしたらその時点でデータ更新を打ち切るのがトランザクションですが、非トランザクションでもこのSTRICT_TRANS_TABLESである程度トランザクション機能を使えるようにしてくれる、ということでしょうか。つまり、非トランザクションエンジンでも、これを使えば、データ挿入や更新の途中でエラーがあっても挿入や更新前のデータベースへとロールバックしてくれるということですね。
ストレージエンジンについては、こちらに調べた記事を書きましたので、よろしければどうぞ。
[トランザクションストレージエンジンを調べてたらアバウトにmysqlを全部知ることになった話
](https://qiita.com/Nedward/items/7ee77eb8685947dc9514)

## 解決策
concrete5が入れたいデータなんだから、不良データじゃないはずなので、**入れさせてほしい（意味深）。**
というわけで。

sqlモードをmysqlのコンソールから確認してみると、

```
mysql> SELECT @@GLOBAL.sql_mode;
+--------------------------------------------+
| @@GLOBAL.sql_mode                          |
+--------------------------------------------+
| STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION |
+--------------------------------------------+
```

 いますね、STRICT_TRANS_TABLESが。それじゃ、無効化させます。

```
mysql> SET GLOBAL sql_mode = 'NO_ENGINE_SUBSTITUTION';
```

もう一度確認してみます。

```
mysql> SELECT @@GLOBAL.sql_mode;
+------------------------+
| @@GLOBAL.sql_mode      |
+------------------------+
| NO_ENGINE_SUBSTITUTION |
+------------------------+
```

OK、これでconcrete5が動きました。まあ、この後mb_stringモジュールがなくてホーム画面が出てこなかったので、またrpmを探す旅が待っていたわけですが、前回の記事でrpmに関してはよっく分かったので、問題なしでした。

環境に必要なモノを手に入れるために必要なrpmの知識はこちらにまとめてあります。
[検証環境を構築する上で知ったこと](https://qiita.com/Nedward/items/e8a3f24c104bfb22ac9b)
[検証環境を構築する上で知ったことパート2](https://qiita.com/Nedward/items/84dce575785fb6505612)
Vue.jsでタイピング風テキストのオリジナルコンポーネントを作ってみた


CSSやjQuery等でよく表現されているて「テキストがタイピング風に表示される演出」を、
vue.jsで作りコンポーネントにしました。
[VueTyper](https://cngu.github.io/vue-typer/)もあったのですが、これだと今回表現したかった演出が厳しく。。。
もちろん勉強も兼ねて。


## TypingText.vue - 子コンポーネント（★今回のメイン）

```TypingText.vue

<template>
  <p>
    {{ messageView }}
  </p>
</template>

<script>
export default {
  name: "TypingText",
  data() {
    return {
      siteTitle: "web_engineer_project",
      messageView: '',
      timer: null,
      count: 0
    };
  },
  props: {
    text: {
      type: String,
      required: true
    },
    speed: {
      type: Number,
      required: false,
      default: 100
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.messageView = this.text.substr(0, this.count);
      if (this.count > this.messageView.length) {
        console.log(this.$emit('callParent'))
        clearInterval(this.timer);
      }
      this.count++;
    }, this.speed);
  }
};
</script>

```

## FirstLoader.vue - 親コンポーネント（★使い方例）

```FirstLoader.vue
<template>
  <div class="first-loader">
    <typing-text
      :text="'vue create ' + siteTitle"
      :speed="80"
      v-if="typingTextShowFlg1"
      @callParent="typingTextShowBtn02"
    ></typing-text>

    <typing-text
      :text="'cd ' + siteTitle"
      :speed="80"
      v-if="typingTextShowFlg2"
      @callParent="typingTextShowBtn03"
    ></typing-text>


    <typing-text
      :text="'npm serve'"
      :speed="80"
      v-if="typingTextShowFlg3"
    ></typing-text>

  </div>
</template>

<script>
import TypingText from "./TypingText";
export default {
  name: "FirstLoader",
  components: { TypingText },
  data() {
    return {
      siteTitle: "web_engineer_project",
      typingTextShowFlg1: false,
      typingTextShowFlg2: false,
      typingTextShowFlg3: false,
    }
  },
  methods: {
    typingTextShowBtn01() {
      this.typingTextShowFlg1 = true
    },
    typingTextShowBtn02() {
      this.typingTextShowFlg2 = true
    },
    typingTextShowBtn03() {
      this.typingTextShowFlg3 = true
    }
  },
  mounted(){
    this.typingTextShowBtn01()
  }
};
</script>


```
demoサンプルは今後載せます。
Git のコミット数と n 番目のコミットのリビジョンを取得したい！


git のコミット数は、`get rev-list --count` で取得することが可能です。

Android のビルド番号（`versionCode`）は整数かつ、リリース毎にインクリメントする必要があります。
この `versionCode` に git のコミット数が設定されるように自動化する際に、上記コマンドがよく利用されます。

git のコミット数の取得は以下の通りです。

```shell
get rev-list --count HEAD
```

n 番目のコミットのリビジョンを取得したいケースもあると思います。
5 番目のコミットのリビジョンを取得したい場合は以下の通りです。

```shell
git rev-list --reverse HEAD | head -n 5 | tail -n 1
```
CodeCommitスタートメモ

### 概要
* CodeCommitを使いはじめるメモ
* 既存のリポジトリからの移行も記載
* 会社は開発費用を圧縮するためGithubが使えなくGitLabで頑張る現状(涙)
* GitLabも社内の意思統一が難しいため最新バージョンに移行できず古いGitLabがメインで使用されている(涙)
* 苦肉の策としてプロジェクト毎に発行されるAWSアカウント上でほぼ無料のCodeCommitを使いモダン？な環境を手に入れる
* ついでにCodeBuild、CodeDeployとも連携しCIを構築しちゃう

### アクセス権限登録

CodeCommitへのアクセスはIAM単位で管理されている為、個人のIAMにCodeCommitへのアクセス権と公開鍵の追加等の作業が必要となる
下記の通り、アクセス権限に「AWSCodeCommitFullAccess」を追加

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/18012a78-9149-c67e-3ecf-73387a6e3317.png)

#### SSH接続設定

CodeCommitにSSH接続する際には下記の公開鍵の登録と.ssh/configファイルの追加が必要となる

##### 公開鍵登録

認証情報から「AWS CodeCommitへのSSHキー」を追加

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/196f7679-34c4-3b0f-360d-71c9898268f4.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/b7422d99-4526-69cf-f933-0c8a7fceba35.png)

※登録する公開鍵ですが生成する鍵のビット数が2048bit未満だとアップロードできない

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/f873c261-b753-bc86-f8b8-85fc27b9ee94.png)



##### .ssh/config編集

.ssh/configにCodeCommitのアドレス・ユーザ・秘密鍵の場所を記載

```
Host git-codecommit.*.amazonaws.com
    User xxxxxxxxxxxxxxxxxxxx
    IdentityFile ~/.ssh/id_rsa
```

Userは、上記、公開鍵登録後、「SSHキーID」に表示されている値

IdentityFileは、秘密鍵ファイル


#### HTTPS接続設定

CodeCommitにHTTPS接続する際には下記のGit認証情報の登録が必要

##### Git認証情報生成

認証情報から「AWS CodeCommit の HTTPS Git認証情報」を生成

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/2c42d75e-dda4-64b7-e1b4-b2bd2b781036.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/2e02301b-ef71-ea96-27e4-810a217f2c0d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/372090b1-0b77-5fdc-3da5-ddf8b4c4b3da.png)

証明書をダウンロードして閉じる

ダウンロードしたCSVファイルにユーザ名とパスワードが記載されていますので、こちらを使用してHTTPS接続を行う

### CodeCommit
#### リポジトリ作成

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/dc8fab50-a220-f7ba-4194-07e218a9c5fa.png)

リポジトリ作成後、以下の画面が表示されるが「スキップ」

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/0cb6ac3a-ccfe-e312-0a52-b96775804194.png)

既存のGitからリポジトリを移行する手順を以下に記載

※既存のGitへの接続が確立されていることを前提として記載

### Git移行
既存のGitからリポジトリを移行する手順を以下に記載

※既存のGitへの接続が確立されていることを前提として記載

#### 既存Gitからリポジトリのclone

以下のコマンドにて既存Gitからリポジトリ情報を取得

```
git clone --mirror hoge-ip:huga/web-application.git original_repo
```

※上記例既存リポジトリとなる


#### CodeCommitリポジトリへpush

上記で作成した「original_repo」フォルダに移動し、以下のコマンドでpush

```
git push ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example-repository --all
```

コマンドではリポジトリにある全てのブランチをpushしますがタグのような他の参照はpushしない。タグをpushする場合、上記pushが完了後、以下のコマンドでpush

```
git push ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/example-repository --tags
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/57350/96597ccc-add0-76e3-3b84-f2f9db0d1a6d.png)
セキュアなファイル共有サービス「Firefox Send」をDockerでサクッと立ち上げてみる

こちらの記事でローカル環境で動作させられるのを知り、じゃあ、それDockerで、を試してみました。

個人間で2.5GBまでのファイルのやりとりが可能なFirefox Sendをローカルで試す - Qiita
https://qiita.com/48hands/items/e7c4ca8389121d69a5f5

<img width="1276" alt="スクリーンショット 2019-03-20 15.20.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a126f8ad-6318-eb3b-f6e7-0122206b42cb.png">

## 前提

```console
> git --version
git version 2.19.1

> node -v
v10.11.0

> npm -v
6.4.1

> docker --version
Docker version 18.09.2, build 6247962

> docker-compose --version
docker-compose version 1.23.2, build 1110ad01
```

## 手順

GitHubリポジトリをみたら`Dockerfile` と`docker-compose.yml` がすでに用意されてました。お手軽っぽいです。

mozilla/send: Simple, private file sharing from the makers of Firefox
https://github.com/mozilla/send


こちらのドキュメントによるとDockerコンテナを立ち上げる前に、`npm run build` しろとあったので、以下の手順で立ち上げました。個人的にはホスト側で`npm` コマンドを叩かずに起動できたら良かったのですが、Dockerコンテナに`git` コマンドがインストールされてなかったので、おとなしく従います。

send/docker.md at master · mozilla/send
https://github.com/mozilla/send/blob/master/docs/docker.md

```console
> git clone https://github.com/mozilla/send.git
> cd send
> npm install
> npm run build
> docker-compose up -d
```

立ち上がったらブラウザで`http://localhost:1443` にアクセスします。
<img width="1276" alt="スクリーンショット 2019-03-20 15.20.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a126f8ad-6318-eb3b-f6e7-0122206b42cb.png">
ブラウザはFirefoxじゃないと駄目ってわけではなさそうです。

適当にファイルをアップしてみます。
<img width="1277" alt="スクリーンショット 2019-03-20 15.21.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/cf1df770-9322-2111-a9c2-92633b8facee.png">
<img width="1274" alt="スクリーンショット 2019-03-20 15.22.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/42be4b66-92d7-bdf4-1a6a-0629c9639efb.png">
<img width="1273" alt="スクリーンショット 2019-03-20 15.22.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/c00a1bc1-b4d5-5db6-62e3-587bb4db6040.png">

アップロードできたら生成されたリンクからダウンロードしてみます。
<img width="1275" alt="スクリーンショット 2019-03-20 15.22.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/2e996a4e-e9ea-bafe-70a0-3a590bfce104.png">
<img width="1275" alt="スクリーンショット 2019-03-20 15.22.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/6ffdd65b-c32b-f0bb-ea48-14aaa18ed33b.png">

アップロード時に指定した回数・日数を超えるとダウンロード不可になりました。
<img width="1274" alt="スクリーンショット 2019-03-20 15.32.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/4c4530ca-6fa3-b68b-abc3-cf3d909d8e3a.png">

ファイルをアップロードした状態で、別ブラウザを立ち上げてみると、新しく立ち上げたブラウザではアップロードしたファイルがみえませんでした。どんな仕組みなんだろ？
<img width="1282" alt="スクリーンショット 2019-03-20 15.26.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/b03af520-0ee0-ad67-c622-aa624a833ca6.png">

## まとめ

ひとまず、Dockerを利用して簡単にFirefox Send環境を用意することができました。
ライセンスなどを確認していないのでなんともですが、プライベートなファイル共有サービスがお手軽に立ち上げられそうです。

## 参考

個人間で2.5GBまでのファイルのやりとりが可能なFirefox Sendをローカルで試す - Qiita
https://qiita.com/48hands/items/e7c4ca8389121d69a5f5

mozilla/send: Simple, private file sharing from the makers of Firefox
https://github.com/mozilla/send

send/docker.md at master · mozilla/send
https://github.com/mozilla/send/blob/master/docs/docker.md
【質問】Jupyter NotebookのVariable Inspectorのようなツールは他の言語やツールでもありますか？

c++やpythonを書いた時Jupyter Notebook のVariable Inspectorのような変数の値を確認できるものをご存知の方はいませんか？vimのプラグインでそのようなものがあれば嬉しいのですが､他のツールでも全然構いません
できればVariable Inspectorよりも行列の値を見やすく表示できるものだとありがたいです｡リアルタイムでの確認はできるに越したことはありませんがなくても構いません｡
また､matlabの使い方を勉強する予定があるのですがmatlabにもそのようなツールや機能は存在しますか？
よろしくお願いします｡
Requires Babel "^7.0.0-0", but was loaded with "6.26.3".の解決方法

## はじめに

webpack x babelでJestを導入して、

```zsh
yarn run test
```

を実行しようとしたら以下エラーが出て若干ハマったのでメモ。

```bash
Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 
If you are sure you have a compatible version of @babel/core, 
it is likely that something in your build process is loading the wrong version.
Inspect the stack trace of this error to look for the first entry that 
doesn't mention "@babel/core" or "babel-core" to see what is calling Babel. 
```

## 解決前の状態

`package.json`の解決前の状態は以下。(`devDependencies`部分のみ記載
`@babel/core`は7以上じゃねーか。なんでありもしない`6.26.3`を参照すんだよ。。

```json:package.json
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.1",
    "babel-loader": "^8.0.5",
    "jest": "^23.6.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
```

## 解決方法

いろいろ調べた結果、`babel-jest`が必要らしい。
（JestのGetting Startedにはそんな事書いてなかった、、、

なので、

```zsh
yarn add babel-jest
```

で入れる。
すると、

```zsh
warning " > babel-jest@23.6.0" has unmet peer dependency "babel-core@^6.0.0 || ^7.0.0-0".
```

とwarningがでた。`@babel/core`と`babel-core`は別物なのか？(よくわかってない
でも、warning出るの気持ち悪いので入れよう。

```zsh
yarn add -D babel-core@7.0.0-bridge.0
```

以上でなんとか解決した。
`babel-core@7.0.0-bridge.0`を入れたのは、[ここ](https://github.com/babel/babel/issues/8206#issuecomment-419705758
)で入れてみろとあったのと、7.0.0の最新がこれだったから。