OmniAICreator/Qiita-1.07M huggingface dataset:
MySQL(MariaDB)で別データベースへまるごとデータコピーするワンライナー

データベース間でデータをまるまるコピーしたい（要は同じ状態にしたい）ということがあります。
特に本番環境と開発環境を同じ状態にしたいということはよくあるでしょう。

どのDBMSでもエクスポート→インポートするのが一般的だと思います。
さて、MySQLの場合ですが
もちろん単純にmysqldumpでファイルにエクスポート、その後インポートでもできますが
実はファイルに出力しなくても一行でできてしまいます。ファイル消したりしなくていいので楽です。

```
mysqldump -uユーザー名 -pパスワード 移行元データベース名 | mysql -uユーザー名 -pパスワード 移行先データベース名
```

エクスポートツールmysqldumpの出力をそのままパイプで移行先に渡してやればいいだけです。
なぜこれができるかというと
・mysqldumpコマンドが出力しているのは単なるSQLである
・mysqlコマンドはSQLを受け取るとそれをそのまま実行してくれる
からです。

mysqldumpで出力されるSQLはCREATE TABLE+INSERTですが
CREATE TABLEの前にDROP TABLE IF EXISTがあるので***移行先に同じテーブルがあっても予め削除しておく必要はありません。***（TABLE以外、VIEWやPROCEDUREも同様）
Oracleなんかは予め同じテーブルを削除しておく必要があるので、この点MySQLは楽です。
DataFrameをmarkdownの表形式に変換するには？（pytablewriter)

#概要
DataFrameをmarkdownの表形式に変換するには？
⇒　pytablewriter　モジュールが便利

#利用方法：

```py

import pytablewriter

writer = pytablewriter.MarkdownTableWriter()
writer.from_dataframe(df)
writer.write_table()

```

#出力結果例：

```
|   name    |PRICE| IV  |
|-----------|----:|----:|
|0201/C20250|  525|23.01|
|0201/C20375|  400|18.19|
|0201/C20500|  280|17.68|
```

|   name    |PRICE| IV  |
|-----------|----:|----:|
|0201/C20250|  525|23.01|
|0201/C20375|  400|18.19|
|0201/C20500|  280|17.68|



#参考 
[pytablewriter](https://pytablewriter.readthedocs.io/en/latest/)

#コメント:
pytablewriterはかなり高機能みたいだけど、DataFrameのINDEXを表に反映させ方がわからなかった　⇒　DataFrameにINDEXと同様の内容の列を作成して暫定的に対処。

## 追記（２月１１日）：　
 ライブラリ作者様が,「add_index_column=True」のオプションで
 Index列を追加できる新バージョンを公開してくださいました。
（私のブログにまでコメント頂き、大変恐縮です。
大変有用なライブラリ作成＆更新して頂き、まことにありがとうございます）
[ SASS ] position指定用のmixin

abs == absolute
fixed == fixed
それ以外はrelativeの扱いにします。
数値は top, right, bottom, left の順に。

##mixin

```_mixin.scss

// position:
// ---------------------------------------- //
@mixin position($def: relative, $t: auto, $r: auto, $b: auto, $l: auto){
	@if $def == abs {
        position: absolute;
    } @else if $def == fixed {
        position: fixed;
    } @else {
        position: relative;
    }
	@if $t != auto and $t != n { top: $t; }
	@if $r != auto and $r != n { right: $r };
	@if $b != auto and $b != n { bottom: $b };
	@if $l != auto and $l != n { left: $l };
}

// @include position;
// -> position: relative;

// @include position(abs);
// -> position: absolute;

// @include position(fixed, 0, n, n, 0);
// -> position: fixed;
//    top: 0;
//    left: 0;

```

##SCSS
```example.scss

.example {
	@include position(absolute, 20px, n, n, 55px);
}

```

##CSS
``` example.css

.example {
	position: absolute;
	top: 20px;
	left: 55px;
}

```
ラズパイにSSH接続（鍵認証）

#はじめに

RaspberryPiを購入したので自宅内でssh接続できる様に設定しました。
その際のメモです。

#接続側で鍵作成
```sh
$ ssh-keygen -t rsa #強度を検討する必要あり。
```

保存場所とかパスフレーズとかを訊かれるけれど、入力せずEnterで次に。

```sh
$ ls ~/.ssh/
id_rsa  id_rsa.pub
```
な感じになっていればOKなはずです。

#公開鍵をラズパイに送信

作成した公開鍵をSCPを使って送信します。

```sh
$ scp ~/.ssh/id_rsa.pub pi@192.168.nnn.nnn:~
```

これでラズパイのpiユーザーのホームディレクトリに公開鍵ファイルが置かれます。
`:`の後に`~`なり任意のディレクトリなりを付与しておかないとエラーになります。
はまりました。
今までホームディレクトリに送るという処理をした事が無かったので、空白ならホームディレクトリになるのかと勘違いしていました…。

#ラズパイ側で公開鍵を設定

SCPした公開鍵が存在する事を確認してから次のコマンドで設定します。

```sh
$ cd ~
# 公開鍵の内容を追加。
$ cat id_rsa.pub >> .ssh/authorized_keys
$ chmod 600 .ssh/authorized_keys
# SCPした公開鍵を削除削除
$ rm id_rsa.pub
```

もし`~/.ssh`がない場合は作成して権限を`700`にしておきます。

#ラズパイ側でSSHの設定

`/etc/ssh/sshd_config`を変更して各種設定を行います。

- port番号変更
- rootログインの禁止
- 鍵認証を有効化
- パスワード認証を無効化

```sh
# port番号設定
# 0〜65535の内で設定。
# 他で使われている番号もあるのでその辺りはよしなに。
Port nnnnn

# rootログインの禁止
PermitRootLogin no

# 鍵認証を有効化
PubkeyAuthentication yes

# パスワード認証を無効化
PasswordAuthentication no
```

その他、状況によって設定する項目は変わるので適切に設定する必要があります。
各々の意味は以下のページを参考にさせていただきました。

[sshd_configの設定項目の理解を目指す](https://unskilled.site/sshd_configの設定項目の理解を目指す/)

変更の後はsshサーバーを再起動して設定を反映します。

```sh
$ sudo /etc/init.d/ssh restart
```

有効になっているはず。

#接続の確認

```
$ ssh -i .ssh/[非公開鍵] -p [port番号] pi@nnn.nnn.nnn.nnn
```

接続できればOKです。

#接続の短縮

上記のsshコマンドだと結構コマンドが長くて面倒なので`~/.ssh/config`を設定します。

```
Host raspi
    HostName nnn.nnn.nnn.nnn
    User pi
    Port [ポート番号]
    IdentityFile [非公開鍵のパス]
```

これで以下のコマンドで接続できます。

```
ssh raspi
```

#さいごに

普段は要件・設計・PGしかしておらず、こういう設定等はいつもやっていただいている人間なので、基本的に素人です。
その為、ツッコミどころとか間違っている部分とかが多数あると思いますので、ご教授いただけるとありがたいです。

ありがとうございました。
インデックス・ショットガンを現場から補足


# 第26回 中国地方DB勉強会 in 岡山
@masudakz 増田和弘
2019-02-02

---
# 名著「SQLアンチパターン」
Bill Karwin　著、和田 卓人、和田 省二　監訳、児島 修　訳
http://www.oreilly.co.jp/books/9784873115894/
2013年1月　初版
![image.png](https://qiita-image-store.s3.amazonaws.com/0/47549/2f220e22-21f0-625a-63a1-c28634a4d4a1.png)

---
# 12章 インデックスショットガン

闇雲インデックス

1. インデックスを定義しない
1. **インデックスを定義しすぎる**
1. インデックスを活用しないクエリを実行してしまう

----
# ある日のレビュー前DDL

```sql
CREATE TABLE c_results (
  c_result_id    bigserial not null PRIMARY KEY
, c_id         varchar(30) not null
, child_id     bigint not null
, study_begin  timestamp not null
, study_end    timestamp not null
, elapsed_time integer not null
, create_on    timestamp not null
, CONSTRAINT child_id_study_begin_c_id_unique UNIQUE (child_id, study_begin, c_id)
) ;
```

----
# INDEX定義

```
CREATE INDEX c_results_c_id_idx
  ON c_results USING btree (c_id);

CREATE INDEX c_results_child_id_idx
  ON c_results USING btree (child_id);

CREATE INDEX c_results_study_end_idx
  ON c_results USING btree (study_end);
```

- 全部のカラムじゃない
- 3カラムとも絞込条件に頻出しそう
- 実際にはもっとカラムがあります。

----
# よさげ？

「うまい手」に見える
3本独立したindexをもっておけば、どう組みあわせたSQLでも、hitsの集合操作で高速
PostgreSQL には Bitmap Index Scan　あるし

----
# 複合キーは嫌？

btree(child_id, study_end) だと、この2つのAND条件など、評価順が(child_id, study_end)になるタイプのSQLにしか有効にならない。
c_idも使いたいときは別のindexを追加しないといけない
組みあわせ数の増え方は急速だ！
組みあわせ爆発のおそろしさはみんな知ってる！

----
# サービスの紹介
![スクリーンショット 2019-01-31 22.03.22.png](https://qiita-image-store.s3.amazonaws.com/0/47549/148ffbfe-2115-492a-ac52-34fdbc3efd4d.png)

----
# 現実の計算量

子供の数：各学年ざっと100万人＝潜在市場
サービスが軌道にのったら、study_beginの24h範囲で 50万hit, child_idで 2000hit, c_idで 30万hit くらいはすぐ。
PostgreSQL の Bitmap Index Scanではサービス性能要件にちと足りない

----
# 類似サービスでの記録
```
-> Bitmap Index Scan on c_results_study_end_idx 
(actual time=172.871..172.871 rows=1441720 loops=1)
Index Cond: ((study_end >= ‘2018-12-01') AND (study_end < ‘2018-12-02') AND (child_id = xxxxx))
-> Bitmap Index Scan on c_results_child_id_idx 
(actual time=0.163..0.163 rows=1340 loops=1)
Index Cond: (child_id = xxxxx)
Rows Removed by Filter: 1
Total runtime: 180.127 ms
```

rows=144万!

----
# 複数キーindexで分解能を上げる

btree(child_id, study_end) を使って直近resultsをとるなら、index scan 1回
btree(child_id, c_id, study_begin) を使って、IN句で指定した数件のc_id別の直近一覧をとるなら、IN句の指定と同じ回数の index scan。

複数キーindexを使って、それが使えるSQLだけでサービス構成しないと、平均応答時間10-50msecのサービスはできないです。

----
# 改修後

```sql
CONSTRAINT childid_c_id_study_begin_unique UNIQUE (child_id,c_id,study_begin)

CREATE INDEX c_results_child_id_study_end_idx
  ON c_results USING btree (child_id, study_end));
```

indexを1本にして、UNIQUE制約の順番も、サービスで使いそうなカラム順序になりました。

----
# MENTORの原則

- Measure（測定）
- Explain（解析）
- Nominate（指名）
- Test（テスト）
- Optimize（最適化）
- Rebuild（再構築）

----
# SQLアンチパターン P.141より

「実際には、すべてのアプリケーションに当てはまる答えはありません。」
「あなたこそが、誰よりもデータと運用要件について知っている人間だからです。」
「最も重要なルールは、推測のみに基づいて、闇雲にインデックスをつけてはならない」
AWS ECRにPrivateLinkのサポートがはじまったようです。

[追記] 2019/02/07 fargateでもPrivateLinkやってみました。
https://qiita.com/t20190127/items/a6580c4834a080a11219

[追記] 2019/02/07 fargateでもPrivateLinkができるようになったみたいです。
時間あるとき試してみます！
https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/userguide/vpc-endpoints.html

[追記] 2019/02/03 awsのコンテナロードマップにfargate対応についてのコメントあり
https://github.com/aws/containers-roadmap/issues/1

---


# ECRにPrivateLinkが！~~起動タイプはEC2限定~~
> https://aws.amazon.com/jp/about-aws/whats-new/2019/01/aws-fargate--amazon-ecs--and-amazon-ecr-now-have-support-for-aws/

私はECS/ECRを使ったシステムを検討しており、
この記事を見るまでは、プライベートサブネットでコンテナをfargate起動タイプで実行することを検討していました。
そうなると、ECRのデータを取得するのにNATgatewayの料金がかかってきます。
（インターネット経由）

~~この記事によって、FARGATEではなく、EC2起動タイプのみ、プライベートリンクをひけるという事になります。~~
~~そうなると、NATの代わりにプライベートリンクの料金がかかってきます。~~

プライベートリンクのデータ量の価格は、NATの6分の1程度

~~⇒FARGATEの方が手間がかからなくていいなと思っていたのですが、
　NATとプライベートリンクで料金的な差がでてしまうのでどうしようか考え中。。
　料金計算は慣れていないので、苦手です(^-^;~~
Goでベンチマークを取る

Goでのベンチマークの取り方。
https://golang.org/pkg/testing/

```golang
package main

import (
	"fmt"
	"testing"
)

func makeSlice1(n int) []string {
	var r []string
	for i := 0; i < n; i++ {
		r = append(r, fmt.Sprintf("%03d hello", i))
	}
	return r
}

func makeSlice2(n int) []string {
	r := make([]string, n)
	for i := 0; i < n; i++ {
		r[i] = fmt.Sprintf("%03d hello", i)
	}
	return r
}

func BenchmarkMakeSlice1(b *testing.B) {
	b.ResetTimer()
	makeSlice1(b.N)
}

func BenchmarkMakeSlice2(b *testing.B) {
	b.ResetTimer()
	makeSlice2(b.N)
}

```

```bash
$ go test -bench .
goos: darwin
goarch: amd64
BenchmarkMakeSlice1-4   	 5000000	       285 ns/op
BenchmarkMakeSlice2-4   	10000000	       144 ns/op
PASS
ok  	_/go/to/path	3.383s
```
【SAPUI5】はじめに知っておきたい構文

##概要
SAPUI5を学んでいて、jsファイルやxmlビューに独特の書き方（構文）があることを知りました。今回はこれらの構文についてまとめます。

##jsファイルの構文
SAPUI5のjsファイルは以下の形式で書かれる場合が多いです。この書き方はScaffolding Template（Scaffoldingは足場の意味）と呼ばれ、外部のモジュールを簡単に使用できるようにするために用いられます。SAP UI5 version 1.32から導入されました。

```javascript
 sap.ui.define([
   		"namespace/path/Object1",
   		"namespace/path/Object2"
    ],function (Object1, Object2){
		//この中ではObject1, Object2の名前でクラスを使用できる
});
```
要領は次の通りです。
1. sap.ui.defineに続くカッコ[ ]の中に使用するモジュールを指定する。（この部分はdependencyと呼ばれる）
2. functionの次のカッコ( )の中に、モジュールを表す引数を1.と同じ順番で指定する。順番さえ一致していれば1.と同じ名前でなくてもよい
3. functionの内部で2.で指定した名前でクラスを使用する

jsファイルで使いたいモジュールがある場合は、1.と2.のところに追加していけばよいということになります。

###コントローラーの構文
コントローラーのjsファイルは、これの応用で以下の構文となります。
特徴的なのはsap/ui/core/mvc/Controllerクラスを拡張して実装するところです。

```javascript
sap.ui.define([
	"sap/ui/core/mvc/Controller"
	], function(Controller){
		return Controller.extend("<名前空間>.controller.<コントローラーの名前>", {
			functionName  : function(){

			}
		});
});

```

##xmlビューの構文
xmlビューの考え方はjsファイルと似ていて、頭の部分で使用するライブラリを定義します。
`xmlns:mvc="sap.ui.core.mvc"`という部分は、「このファイルの中では、mvc:と頭につくコントロールはsap.ui.core.mvcライブラリに属しますよ」ということを意味します。
`xmlns="sap.m"`という部分は、「接頭辞がつかないコントロールはsap.mライブラリに属しますよ」ということを表します。

```xml
<mvc:View 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns="sap.m"
	xmlns:f="sap.ui.layout.form"
	controllerName="<名前空間>.controller.<コントローラー>">

</mvc:View>
```
###使用例
以下が実際のビューでの使用例です。
SimpleFormの中にあるcontentにはf:の接頭辞がついていますが、Pageの中にあるcontentにはついていません。contentは少し特殊で、親と同じライブラリを指定する必要があるそうです。（SimpleFormの中にあるcontentからf:をとるとエラーになります）

```xml
<mvc:View 
	xmlns:mvc="sap.ui.core.mvc" 
	xmlns="sap.m"
	xmlns:f="sap.ui.layout.form"
	controllerName="restaurant.controller.customer">
	<App id="idApp">
		<Page title="本日の定食">
			<content>
				<f:SimpleForm>
					<f:content>
						<Label text="メニュー"></Label>
						<Text text="{/menu/name}"></Text>
						<Label text="価格"></Label>
						<Text text="{/menu/price}"></Text>
						<Label text="カロリー"></Label>
						<Text text="{/menu/calories}"></Text>						
					</f:content>
				</f:SimpleForm>				
			</content>
		</Page>
	</App>
</mvc:View>
```

##まとめ

- jsファイルもxmlファイルも、最初に使用するライブラリを指定する
- これにより、ファイルの中で名前空間を指定せずにライブラリを使用できる
初めてのJavaScript⑤

今日の学習内容です。

-----

・**undefined**（アンディファインド）
配列の存在しないインデックス番号の要素や
オブジェクトの存在しないプロパティの要素を取得しようとすると
undefinedと出力される。


・**関数**
いくつかの処理をまとめたもの

・**function(){まとめたい処理}**
例：const 定数名=function(){};
関数を用意することができる。
また、このように関数を用意することを**「関数を定義する」**と呼ぶ。

関数を定義しただけでは、その中の処理は実行されない。
関数を定義した際に使用した定数名を用いて
**「定数名()」**と書くことで関数の中の処理を実行できる。
このことを「関数を呼び出す」と言う。


------
・躓いた点
配列を、{値1,値2,値3}としてしまっていた。
正しくは、[値1,値2,値3]。


----

もう少し勉強時間があったらなと感じてきたので
次の休日は勉強時間を増やしてみます。

エンジニアの方々でこちらの記事をご覧の方
もし何か学習についてのアドバイスや
記事の書き方への指摘などあれば
コメントいただけたらとても嬉しいです。


次はアロー関数からです。
２月第一週限の日経２２５オプション清算値を東京証券取引所から抽出【nk225op】

# 概要：
東京証券取引所のサーバから、本日取引最終日を迎えた２月第一週限の日経２２５オプションの清算値を取り出す。

*   [今週PyPIに登録した自作モジュールnk225op ](https://qiita.com/zaq9/items/3490691bb6ad3adb4281)　のテスト


#ブラウザからすぐ試す場合　⇒　[Google Colab 上のノート](https://colab.research.google.com/github/zaq9/nk225op_data/blob/master/eg_2019jan31/eg_2019jan31.ipynb)
※Chrome推奨。Googleアカウントがあれば、パラメータ変更可能


#実行した内容（準備）:
モジュールをPyPiからインストールする
(Google colabを活用して、ブラウザから実行する場合は、先頭に「！」をつける）

```

!pip install -q nk225op

```

#実行
今回は権利価格20250円から21250円のものを取り出す。
（参考：日経平均終値20750円）

```py

from nk225op import nk225op as nk
df = nk([20190201],[20250,21250])
print(df)

```

#出力

|   name    |PRICE| IV  |
|-----------|----:|----:|
|0201/C20250|  525|23.01|
|0201/C20375|  400|18.19|
|0201/C20500|  280|17.68|
|0201/C20625|  165|15.21|
|0201/C20750|   78|15.13|
|0201/C20875|   25|14.54|
|0201/C21000|    8|15.97|
|0201/C21125|    1|15.09|
|0201/C21250|    1|18.80|
|0201/P20250|    1|21.71|
|0201/P20375|    2|19.00|
|0201/P20500|    5|16.63|
|0201/P20625|   18|15.72|
|0201/P20750|   53|14.78|
|0201/P20875|  135|16.86|
|0201/P21000|  240|18.56|
|0201/P21125|  360|22.45|
|0201/P21250|  485|28.29|

#留意点

*   ランタイムはPython３以上を選択（ブラウザから切り替えも可能）
*   同じパラメータで同じ実行結果になるのは2019年2月1日16時ころまで（翌日以降は2月1日限データは、SQ通過後取引できなくなるので、サーバーから清算値データがなくなる
*   権利日のパラメータはWeeklyとMonthlyでは異なる形式　（東証の悪仕様…）
　⇒　2月限は[20190102] 2月W3は[20190203]
binding.pryで検証中のブレークポイントに戻る方法

`binding.pry`って便利ですよね。

・どの変数に何が入っているのか
・どんなパラメータが渡ってきたのか
・どんなクエリが走るのか。
といったことを確かめるのに使えますが、
**ログだけで画面がいっぱいになってしまい、「今どこの処理を検証してるんだっけ！？ってなることも多いです。**(私は。。)
![qiita_binding.pry2.gif](https://qiita-image-store.s3.amazonaws.com/0/242611/92d08e03-3793-25ee-0277-0008826cb685.gif)


そのためにわざわざ上にスクロール,　または,`next`などと打って確かめている人も多いのではないでしょうか？

しかし,スクロールしてわざわざ探すのは面倒くさいし、`next`を使うと次の行に進んでしまいます。

##解決策
こういうときは`@`を押しましょう。
`@`と打つだけで、ブレークポイントを移動せずに`binding`をかけた場所に戻ることができます。

```
pry> @
```
例)
![qiita_binding.pry.gif](https://qiita-image-store.s3.amazonaws.com/0/242611/6b6198ec-4d92-e0cd-89f3-da1f60d0a46d.gif)


ちなみに、これは適当にキーボード叩いてたら発見しました。
地味に役立つのでぜひ使ってあげてください(m_ _m)
pipeline operatorを実際に使ってみる

## 動機: TC39で策定中の新しい記法に触れたい

ES2019に含まれるであろう新しい記法などを知るのは楽しいですが
眺めているだけでなく実際に使って気持ちよくなりたくないですか。
ありがたいことにBabelを利用することでまだ採用されていない検討中の文法を先取りして試すことができます。

本記事では試しにpipeline operatorという記法を手元で実行してみます。
これは2018年１月現在、stage1: 提案の段階なので絶対にES2019には含まれない
参考: The TC39 Process https://tc39.github.io/process-document/

## pipeline operator とは

まだ策定中の新しいJSの文法。
詳しくはこっち https://github.com/tc39/proposal-pipeline-operator
一瞬理解に苦しむけどRamdaとかで `pipe` を使ったことがあったり
bashでのパイプラインと連想するとスッっと頭に入ってくる。

## 準備

#### babelの周りをインストール

```bash
yarn init -y && \
yarn add -D @babel/core @babel/cli @babel/plugin-proposal-pipeline-operator
```

#### `.babelrc` を用意。  
プラグインを追加することでpipeline operatorを使ったコードのトランスパイルができるようにしてあげます。  

```json:.babelrc


{
  "plugins": [
    [
      "@babel/plugin-proposal-pipeline-operator",
      {
        "proposal": "minimal"
      }
    ]
  ]
}
```

## コードを書く

最初詰まったのですがarrow functionはカッコで括らないとbabelがビルドできないと怒ります

```javascript:src/index.js
'claire redfield' 
  |> (name => name[0].toUpperCase() + name.substring(1))
  |> (name => `my name is ${name}`)
  |> console.log
```

## ビルド & 実行

```shell

./node_modules/.bin/babel src -d . && node index.js
```

## 結果

```
Successfully compiled 1 file with Babel.
my name is Claire Redfield
```

クレア・レッドフィールドになれました。バイオRE2やってますか？

## 参考

- @babel/plugin-proposal-pipeline-operator: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-operator
HTML、CSSの基本

こんにちは!!初投稿です!!芽衣です(^^)/

プログラミングを初めて3日目、
アウトプットしてのために記事を投稿します。

本日今回学んだこと

- text-align
- margin
- hover
- active
- position-fixed

について、まとめます!!

#text-align,margin
対象の物の場所を決められる。

＊例

```css

.message{
text-align:center;
}
```
だと、messageを真ん中に寄せることができます。

marginは広い範囲に使い、text-alignはテキストやボタンなどの小さ目なブロックに使います。

#hover
セレクタ:hoverとすることで、カーソルをのった常態のcssを指定できます。
またtransitionを組み合わせると、変化の対象や変化の時間を指定できます。

#active
セレクタ:activeを用いると、要素がクリックされている間だけcssを指定できます。

#position-fixed
要素を画面上の指定した位置に固定させられる。
また、z-indexで画像が重なることを防ぐことを可能にします。

#最後に
今回は、CSSの基本的な使い方をお伝えしました。
ありがとうございました。
Unity 機能一覧

<img width="1440" alt="スクリーンショット 2019-01-31 21.36.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/325764/0c59cd48-86f7-9832-03e1-9a2ad2afc660.png">
#簡単な機能紹介
##Sceneビュー
ゲームを編集するための３D空間。
##Gameビュー
実際のゲームのプレイ画面
##Hierarchyビュー
Scene内に配置してあるゲームオブジェクト一覧
##Projectビュー
プロジェクトで使用するファイル一覧（画像、音、コードなど）
##Inspectorビュー
選択しているゲームオブジェクトの詳細
##Consoleビュー
エラーメッセージや自分でコードから必要な情報を表示できる
railsアプリでログインをされていないユーザーをログイン画面に飛ばす

#ログインしていないユーザーがログインできてしまう

ログイン機能を実装したもののログインをしていないと使えない機能でも直接urlからアクセスすると使えてしまう。
この状況は非常にまずい。
ってことで調べた。
#before_actionを使う
この機能を実装するためにはbefore_actionを使えばok
before_actionとはまあ書いて字のごとくなんだけどアクションが実行される前に実行されるもの。
字でつらつら書くのはわかりづらいと思うので実際の例を書く。
##before_action実装前
![スクリーンショット 2019-01-31 21.08.48.png](https://qiita-image-store.s3.amazonaws.com/0/350246/e736c8fb-6643-c28d-7d68-bd286fb67bdf.png)
これがトップ画面。
![スクリーンショット 2019-01-31 21.09.37.png](https://qiita-image-store.s3.amazonaws.com/0/350246/160004e5-920d-4789-fafc-d3465637f328.png)
urlを見てもらうと/usersとなっているがこれは本来ログインをしていないと見れない機能。これは非常にまずい。だってログインしなくても使えるんだからね笑
##before_action実装


``` ruby:application_controller.rb
before_action :logged_in_user

def logged_in_user
      unless logged_in?
        flash[:danger] = "Please log in."
        redirect_to login_url
      end
end

def logged_in?
    !current_user.nil?
end


```

上から順に説明していく
一番上にbefore_actionを書く。また、:以下は自分で定義したものによって記述は変わる。

最初の定義についてはログインをしていなかったらログインのパスにリダイレクトする。
次の定義については比較演算子を用いてcurrent_userがnilでない状態つまりcurrent_userがいる状態。

##その他のコントローラの設定
上のままの状態だとログインのページしかいけなくなってトップページにもいけないし、新規会員登録画面にもいけなくなる。
これを改善するにはskip_before_actoinを使う。

``` ruby:users_controller.rb
skip_before_action:logged_in_user,only:[:new,:create]

```


``` ruby:sessions_controller.rb
skip_before_action:logged_in_user
```

``` ruby:pages_controller.rb
skip_before_action :logged_in_user

```

それぞれに記述していく。ちなみにpagesコントローラーはトップページのコントローラー。
以上で実装終わり。
かなり簡単だった。

#before_action実装後
![スクリーンショット 2019-01-31 21.36.41.png](https://qiita-image-store.s3.amazonaws.com/0/350246/aa5a96e0-dae6-4e7f-e816-2786a7bf7b73.png)
ログインしていない状態でusersにアクセスしようとするとこのようにログインページに飛ばすようにできた。
似たような実装をrailsチュートリアルにあった。参考にするといいかも。
http://useless.hatenablog.com/entry/2016/07/12/190000
このページも参考にした。
netetiquette または 電子網作法

電子網作法（net-etiquette)が流行ったことがある。

お茶や、お花、踊りの流派のように、百家争鳴。

何か、一つの方法があるという訳ではない。

#通信規約
前提となるのは、通信規約。

どう転んでも、通信規約の範囲でないと伝達できない。

#接続地点の契約

internetは、networkの相互接続。

接続地点の契約内容の範囲であればよい。

逆に、接続地点の契約内容を、一方的に制限をかけることは契約違反となる。

接続地点の契約内容を意識していることが大事。


#利用ソフトウェア・利用サービスの制約

twitter, facebookなど、利用ソフトウェア、利用サービスの契約上の制約が大事。

時々、それらの契約上の制約よりも厳しい制約を一方的に押し付ける人がいる。

明らかな契約上の利用を妨害するものであり、なんらかの法的手段で訴えるとよいかもしれない。

#ここの利用者相互の合意

ある特定の閉じた空間では、その空間の規則を決めるのは任意。

ただし、思想、良心、人種、信条、性別、社会的身分又は門地により、政治的、経済的又は社会的関係において、差別されないことが大事である。

例えば、信条には、次の事項を含むかもしれない。
ネットは平等でなければならない。
ネットは多様でなければならない。
ネットは民主的でなければならない。
ネットは公共の福祉にやくだたなければならない。
このような憲法、各種法律の範囲内の事項を信条としている人を、理由なく排除することはありえない。



#法律的な制約

いじめ、ストーカーなどの刑法の対象になる行動は、それぞれの当事者の立場、相互の関係などによって、なにをしたらいじめで、なにをしたらストーカーかが決まってくる。

#個々の個人、組織間の契約

雇用契約上の業務の範囲内で毎日連絡を取らなければならなければ、ストーカーとは言えない。
しかし、雇用契約の業務の範囲を超えた内容が毎日の連絡にはいっていればストーカーと言えるかもしれない。

雇用契約の内容をみないとわからない。

#まとめ
これまでに存在していたマナーの、直感的には半分以上が勇み足だと感じていました。大事なのは、ここの人の多様性をどこまで許容できるか。マナーに正しい、ただしくないという概念はありえない。良いか良くないか。良くない場合にどうするかは、それぞれで決めればよい。よくない場合を、よい場合に変えていく方法は一通りではない。
「Vueの設定を開く」が開かないとお嘆きの貴兄に

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f35313131362f62396661383431322d376535302d326566382d393739312d3765643463633364376138352e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/51116/b29143f1-522b-dba6-51ff-1b633a9992b5.png)


画面右上の「Vueの設定を開く」を押しても何も起きません...

そこで```vue ui```のコンソールを見てみるとエラーが出てました。

```sh
Could not open vue.config.js in the editor.
The editor process exited with an error: spawn code ENOENT.

Unable to open '/Users/qoAop/Desktop/my-app/vue.config.js' spawn code ENOENT.
Try setting the EDITOR env variable. More info: https://github.com/yyx990803/launch-editor
```

むむむ

## 対応方法

PATHにVisual Studio Codeのパスを指定すればＯＫです。

```sh
# Add Visual Studio Code (code)
export PATH="/Applications/Visual Studio Code.app/Contents/Resources/app/bin:$PATH"
```

PATHを設定した状態で「Vueの設定を開く」で無事vue.config.jsが開きました。
コンソールにも下記のようにエラーは出力されませんでした。

```sh
open /Users/qoAop/Desktop/my-app/vue.config.js
Opening /Users/qoAop/Desktop/my-app/vue.config.js...
```
[perl] Test::Moreの支配下でutf8文字列に関する警告を無効にする

私にしては珍しく役に立つ記事を書く予感…

[Test::More](https://perldoc.perl.org/Test/More.html)は言わずと知れたperlのテスト環境の必須モジュールな訳ですが、`use Test::More;`を使うと日本語を扱うテストでは`Wide character in print～`的な警告がワンサカ出ました。__ええ、過去形です__。

そこで用いられていたのが次のような4行のおまじない。

```
my $builder = Test::More->builder;
binmode $builder->output,         ":utf8";
binmode $builder->failure_output, ":utf8";
binmode $builder->todo_output,    ":utf8";
```

仕組みはようわからん[^1]が、警告消えるならまぁいっか的な措置でした。__ええ、過去形です__。
なぜなら[Test::More::UTF8](https://metacpan.org/pod/Test::More::UTF8)というズバリなモジュールが（いつの間にか）この世にあるからです！

これからは

```
use Test::More;
use Test::More::UTF8;
```
の2行で同じことができます。仕組みはわかりません。

もし貴方がCPAN　Authorならば、`cpanfile`に

```
on test => sub {
    requires 'Test::More', '1.302';
    requires 'Test::More::UTF8', '0.05';
    ...
}
```

という記述を突っ込みましょう。インストールの前に依存モジュールとして`Test::More::UTF8`を自動検出してインストールしてくれます。

というわけで、Enjoy!

---

個人的には`Data::Dumper`でもおんなじことできるようにしてくれねぇかなぁ、と思います。
上記の環境下では`::note()`としてモジュール内でデバッグしてますけど。


[^1]: [こちら](http://d.hatena.ne.jp/koba04/20100516/1274019508)に機序は書いてます。理解できるかは別として。
golangでパスワード付きzipファイルを展開する


- "1234"のパスワードのかかったzipファイルを引数に与えると実行ファイルと同じディレクトリに1ファイルを展開する。


```
package main

import (
        "bufio"
        "flag"
        "fmt"
        "github.com/yeka/zip"
        "io/ioutil"
        "log"
        "os"
        "path/filepath"
)

const password = "1234"

func readline() {
        stdin := bufio.NewScanner(os.Stdin)
        for stdin.Scan() {
                break
        }
}

func main() {
        // 実行ファイルディレクトリ取得
        exe, err := os.Executable()
        dirname := filepath.Dir(exe)
        fmt.Println(dirname)

        // 引数取得
        flag.Parse()
        args := flag.Args()
        fmt.Println(args)

        // zipファイルを開く
        r, err := zip.OpenReader(flag.Arg(0))
        if err != nil {
                log.Fatal(err)
        }
        defer r.Close()

        // zipファイルのリストをループ
        for _, f := range r.File {
                if f.IsEncrypted() {
                        f.SetPassword(password)
                }
                r, err := f.Open()
                if err != nil {
                        log.Fatal(err)
                }
                // ファイルの中身を読み込み
                buf, err := ioutil.ReadAll(r)
                if err != nil {
                        log.Fatal(err)
                }
                defer r.Close()
                fmt.Printf("Size of %v: %v byte(s)\n", f.Name, len(buf))

                // ファイル書き出し
                err = ioutil.WriteFile(filepath.Join(dirname, f.Name), buf, 0644)
                if err != nil {
                        log.Fatal(err)
                }

                break
        }

        // 入力待ち
        readline()
}
```

```
// パスワード付きzipファイル作る
$ zip -e --password=1234 pool.zip pool.pl
  adding: pool.pl (deflated 67%)

// go runだとos.Executable()が/tmpになるので展開先が消える
$ go run main.go pool.zip
/tmp/go-build265026491/b001/exe
[pool.zip]
Size of pool.pl: 6140 byte(s)
$ $ ./main pool.zip
ls: cannot access pool.pl: No such file or directory

// Linuxバイナリ作って実行ならOK
$ go build main.go
$ ./main pool.zip
/home/k8uwall/gozip
[pool.zip]
Size of pool.pl: 6140 byte(s)
$ ls pool.pl
pool.pl

// Windowsバイナリ作る
$ GOOS=windows GOARCH=amd64 go build main.go
$ ls main.exe
main.exe

// Windowsでも使える。ファイルを実行ファイルにDropしても動く。
PS C:\Users\k8uwall\Desktop\gozip> .\main.exe pool.zip
C:\Users\k8uwall\Desktop\gozip
[pool.zip]
Size of pool.pl: 6140 byte(s)
```

- 入力待ちはWindows向けのデバッグ用
- log.Fatalとfmt.Printfどっちかにしないとorz
- フォルダーを含んだファイルが駄目くさい気がする
- `for _, f := range r.File {`の箇所は1ファイルだけ取り出したかったのだけれど、ループ以外の方法がよくわからなかったが時間切れ


# 参考リンク

[go言語でクロスコンパイルしてみる \- Qiita](https://qiita.com/ymko/items/062eaf6b54268c059a86)

[Goでflagを使ってコマンドライン引数を扱う \- Qiita](https://qiita.com/Yaruki00/items/7edc04720a24e71abfa2)
[Goでflagを使ってコマンドライン引数を扱う \- Qiita](https://qiita.com/Yaruki00/items/7edc04720a24e71abfa2)
[Go言語で標準入力 \- Qiita](https://qiita.com/kosukeKK/items/865e06de03d20664a83f)

[Go で実行ファイルのパスを取得 \- Qiita](https://qiita.com/summer/items/2674a178ffe6acb895fb)
これは1.8以降
React, 子から親への要素の受け渡し

#概要
今回はReactの子から親への要素の受け渡しについてみていきます。
Reactはpropsシステムを使って親から子へ要素を受け渡していきますが、子要素でイベントが起こった時にその要素を親のstateで保存してまた違った子要素で表したい場合に少し戸惑ったので、そのメモです。
詳しく説明します。
#目標
以下のコードを見てください。

```javascript:src/components/App.js
import React, { Component } from 'react';
import ContentList from './ContentList';

class App extends Component {
  state = { 
    contents: [ {num: 1, title: "hello"}, {num: 2, title: "world"}, {num: 3, title: "react"} ]
  };

  render() {
    return (
      <div>
        <ContentList 
          contents={this.state.contents} 
        />
      </div>
    );
  }
}

export default App;
```
コードからわかる通り、stateに配列が保存されており、その中に要素がオブジェクトで保存されています。
次にContentListを見ていきましょう。

```javascript:src/components/ContentList
import React from 'react';
import ContentItem from './ContentItem';

const ContentList = ({contents}) => {
  const contentList = contents.map((content, i) => {
    return (
      <div key={i}>
        <ContentItem 
          content={content}
        />
      </div>
    );
  });

  return (
    <div>
      {contentList}
    </div>
  );
};

export default ContentList;

```
ここではstateのcontentsに保存されている配列をループ処理してそれぞれをContentItemコンポーネントで表しています。 "const ContentList = ({contents}) => "の部分についてわからなければ以下を参考にしてください。

参考
>https://qiita.com/ssnyarii/items/f5c3d8a327041a87622e

最後にContentItemです。

```javascript:src/components/ContentItem
import React from 'react';

const ContentItem = ({content}) => {
  return (
    <div>
      {content.title}
    </div>
  );
};

export default ContentItem;
```
ここではそれぞれのタイトルを表示しています。
これから行うのは、タイトルをクリックした時にその要素の番号を表示することです。
つまり、ContentItemでonClickして、それをApp.jsの新たなstateに保存し、それを別コンポーネントで表します。
App.jsでstateとpropsを新たに追加しましょう。
これからのコードは上記の追加になります。

```javascript:src/components/App.js
state = {contentNum: null};

onSelectItem = (content) => {
  this.setState({contentNum: content.num})
};

<ContentList onItemSelect={this.onSelectItem} />
```
onItemSelectをするとcontentNumにcontent.numが追加されるということがわかります。
このonItemSelectをどんどん子要素へ渡していきます。

```javascript:src/components/ContentList
const ContentList = ({contents, onItemSelect}) => {
    <ContentItem onItemSelect={onItemSelect} />
}
```
ContentItemではonClickイベントで単体要素を渡します。

```javascript:src/components/ContentItem
const ContentItem = ({content, onItemSelect}) => {
    <div onClick={() => onItemSelect(content)}>
}
```
こうすることで子から親へ要素を渡すことができます。
最後にクリックされた要素の番号を表示しましょう。

```javascript:src/components/App.js
import ContentNum from './ContentNum';

<ContentNum contentNum={this.state.contentNum} />
```
```javascript:src/components/ContentNum.js
import React from 'react';

const ContentNum = ({contentNum}) => {
  return (
    <div>
      あなたが選んだアイテムの番号は {contentNum} です
    </div>
  );
};

export default ContentNum;
```
以上です。以下が完成して、helloをクリックした後の画像です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/286470/9eb00e1d-9174-9336-d0ad-a0eb35e42bce.png)

全コードはgithubにあげているので気になれば見てください。
>https://github.com/ssnyarii/fromChildrenToParents

#まとめ
子から親への要素の受け渡しについて見ました。参考になれば幸いです。
React.js Meetup #6 に行ってきました。 #reactjs_meetup

https://reactjs-meetup.connpass.com/event/115274/

## Yahoo!スポンサートーク by @__sakito__ さん

### 社員

- 社員6611人
- エンジニア 2600人
- デザイナー 400人
- 100以上のサービス

### 働き方

- フリーアドレス
  - どこに誰がいるかわかるシステムが構築されている
- 1on1
- Hack Day
- ヤフーミーティング
- 食堂・カフェ
- 保育園

### フロントエンド

- React, Vue, Angular, jQuery, Backboneなどなど
- まとめブログがあります
  - https://techblog.yahoo.co.jp/advent-calendar-2018/yahoo-frontend/
  - Devサミで話します
- Yahoo! TechConference 2019
- イベント
  - フロントエンドランチ会
  - LT会
  - もくもく会
- 採用募集
  - 日本全国募集しています

## 読みやすいコードの書き方のススメ by @hmktsu さん

https://speakerdeck.com/watanabeyu/du-miyasuikodofalseshu-kifang-falsesusume

### 読みやすいコード

- 他の人と一緒に作業するときに流れが理解しやすい
- 久しぶりに触るときに迷わない

### eslint-config-airbnb

- 素のESLINTよりも厳しい
- 誰が書いても似たような感じになる

VSCodeのプラグインで保存時に自動整形

### DEFAULTPROPS

propsの初期値を設定しておけばVSCodeでマウスオーバーすると教えてくれる

### importの整理

- package.jsonのnameをつける
  - nameがルートのエイリアスになる

### その他

- コンポーネントを返すメソッドをJSX内に書かない
- アセットを一元管理する

## React HooksとReduxとProxy by @dai_shi さん

### React Hooks

function componentsですべて完結する仕組み

出てくると言われてから時間がかかった

React Hooks好きすぎてライブラリをたくさんつくりました

### Redux

Reduxは独立したライブラリ。本質的には99行程度

React ReduxはReactに依存したライブラリ

### React Hooksによって代替ライブラリが登場

- Reduxを使わずにhooksで似たようなことを実現するライブラリ
- など

### 作るにあたって

- Redux Storeを作成
  - 素朴な実装だと関係ないコンポーネントがレンダリングされる問題に対応したい
- 変更検知問題
  - selector
  - memoization
  - auto-detect
    - これを採用した
    - Proxy
      - オブジェクトの操作をフックすることができるのでどの部分が操作されたか検知できる

react-hooks-easy-reduxを作りました。
v0.8.0はすごく遅かった(8.37fps)が、ボトルネックになっていたライブラリの作者とともにボトルネックの改善をして39fpsくらいになった

## ちょっと先のReact by @koba04 さん

[reactjs/ja.reactjs.org](https://github.com/reactjs/ja.reactjs.org)
新しい日本語ドキュメントプロジェクトが立ち上がっているので興味ある方はぜひ。

（ライブコーディング）

- class componentsをfunction componentsに書き換え
- SuspenseでのLoading callback埋め込み
- Lazyロード
- useCallback(func, [...obj])で、useCallback(func, [])にすると1度しか動かない
  - [...obj]に変更があったときにfuncが呼ばれるため

##  APOLLOとREACTを使ったアプリケーション設計 by @about_hiroppy さん

- GraphQL
- Apollo
- apollo-link-state

### Apollo

https://www.apollographql.com/

GraphQLプラットフォーム

- 一部がOpen Sourceとして無料で提供されている
  - Apollo Server
  - Apollo Client
    - JavaScript
    - Native Mobile
  - Apollo Links

  - ...

GraphQL Gatewayみたいなもの……？

### apollo-link-state

ローカルデータをapollo clientで管理して、GraphQL query/mutationでアクセスする

### redux vs apollo

- fetchのフラグ管理が楽
- 部分更新が簡単
  - バケツリレーが起きない
- 何が必要かわかりやすい
  - リモートとローカルを同一コンポーネントで表現できる
- 複雑な処理を書くのはあまり向いていない

### まとめ

- apollo はエコシステム含め充実している
- ...
- ...


---

どうにも疲れているようで後半理解しきれなかった……orz
atcoder ABC98

c問題は比較的簡単ですぐにできた。D問題は解法は思い浮かんだが計算時間的に間に合わない解法であり、しゃくとり法を使わなければ解けない問題だったので解けなかった。
https://atcoder.jp/contests/abc098/tasks
#C問題
#方針
どの位置が振り向く人が少なくて済むかを求める問題。Nが10の5乗なので全探索していては間に合わない。よって、まず定数でできないか考える。まずi番目の人がリーダーになった時に振り向く人数について考えると、i番目より左側ではEの人数であり、i番目より右側ではWの人数である。よって、1~N番目の人についてそれぞれその人より左側のEの人数と右側のWの数をあらかじめ保持しておけば定数で解くことができる。したがって、Eについての累積和とWについての累積和を求めることで最終的に定数で解くことができる。

#D問題
#方針
はじめは、累積和を取り、その後xorが偶奇かを判断するため、各A[i]について各2<sup>i<sup/>が割り切れるかどうかを求めておき、全探索をする解法を思いついたが明らかに計算量がN!*20以上になり間に合わない。ここで、左端をl,右端をrとすると,求める組み合わせというのは、lからr番目までのA[i]の和とxorが一緒の数である。この和とxorの性質について考察すると以下のような図になる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263740/34b8a364-a434-1c65-7bf1-7ed65ed0d0ae.png)

よって、一回でも繰り上げがあって和とxorが変わってしまうと、それ以降ずっと和とxorは変わってしまうので、しゃくとり法の要領で右端と左端を更新しながらカウントしていくことで定数で答えを求めることができる。
Windows環境のpython(2.x系列)でstdinからstdoutにデータを流し続けるプログラム(バイナリ対応)

```yokonagashi.py
import sys

if sys.platform == "win32":
    import os, msvcrt
    msvcrt.setmode(sys.stdout.fileno(), os.O_BINARY)
    msvcrt.setmode(sys.stdin.fileno(), os.O_BINARY)

while 1:
    sys.stdout.write(sys.stdin.read())
```

- 実行
 - `cat hoge.bin | python -u yokonagashi.py > hoge_dup.bin`
 - -u オプションはなんかstdin, stdout, stderr あたりでバイナリを使うときに必要らしい。でもこのコードだといらないかも。未確認。
 - yokonagashi.py はEOFとか見てないので、上のコマンドラインは実行すると終了しない。Ctrl-cとかで止めて下さい。多分、出力はちゃんとされているはず。

なんかこれだけのコードを書くために、結構ググった。
cat とか使ってるのは MSYS2環境 だから。
React + Material UIでファイル送信ボタン

フォームでファイル送信ボタン`<input type="file" />`をMaterial UIの `<Button>` で実装する方法。
実際、とても簡単でした。

```JSX
<Button
  component="label"
>
  ファイル送信ボタンです
  <input
    type="file"
    className="inputFileBtnHide"
  />
</Button>
```

input type="file"を見た目非表示にするCSSはこんな感じ

```css
.inputFileBtnHide {
  opacity:0;
  appearance: none;
  position: absolute;
}
```

考え方は以下の2点

- `<input type="file" />`はCSSで非表示にしておく
- `<Button>`を `<label>`で囲んで、for属性で繋ぐ

注意点は、 inputのidは必ず書くこと。
そして `<label for="{input:file要素のID}">`に必ず書くこと

`component="span"` でButtonはspanタグになりますが、ちゃんとTabキーでのフォーカスも当たりキーボード操作も対応されます。
（ただフォーカスがlabelとinput、2回当たるのが難点…）

参考
https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input
SlackのWebHookにPOSTするためだけの最小限のRubyスクリプト


## 本体

`https://WEBHOOKURL` だけ書き換えてください。

```sendslak.rb
require 'net/http'
require 'uri'
require 'json'

body = STDIN.read

uri = URI.parse('https://WEBHOOKURL')
request = Net::HTTP::Post.new(uri)
request.content_type = 'application/json'
request.body = JSON.dump('text' => body)

Net::HTTP.start(uri.hostname, uri.port, use_ssl: true) do |http|
  http.request(request)
end
```

## 使い方

```lang:bash
echo hello | ruby sendslak.rb
```

## ポイント

- あちこちで使うから、標準モジュールのみで動くruby
- プログラムの中に組み込むのがイヤなので、標準入出力を介してやることで、いろんなコマンドの出力結果をSlackに送れる
UNC上のWindowsファイルシステムでGitリモートリポジトリを作成する方法


- 対象のUNCパスをネットワークドライブに割り当てる
- ネットワークドライブ上で右クリック->`Git Bash Here`クリック
- `git init --bare --shared`
- 完了！！

## 参考
- [Git 社内LAN上にリモートリポジトリ最小構成](https://qiita.com/ds_1227/items/82a2f40bf6277e67f403)
Nuxt 2.0.0から2.4.0にアップデートしたときに起こったエラーについて

# 概要
とある理由でnuxt 2.0.0からnuxt2.4.0にアップデートすることがあり、スムーズにアップデートできなかったので備忘録

# Nuxtのバージョン
```
"nuxt": "2.0.0-25638738.d69b4b8"
```
↓

```
"nuxt": "2.4.0"
```

# エラー
何故かrouter.jsのimport部分でコケる

```
Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type.
|       var AsyncHome = asyncComponent(appendAsyncReducer, epicSubject$, function () {
|         return process.env.SERVER ? require('./home')
>         : import(
|         /* webpackChunkName: "accusations" */
|         './home');
 @ ./server/ssr.js 15:0-34 167:25-34
 @ ./server/index.js
```

# 解決方法

```
rm -rf node_modules package-lock.json
# 必要であればキャッシュを消す
npm cache clean --force
npm install webpack@4.28.4 --save-dev --save-exact
npm install acorn-dynamic-import@4.0.0 --save-dev
npm install acorn@6.0.5 --save-dev
npm update acorn --depth 20
npm dedupe
```

# 参考

https://github.com/webpack/webpack/issues/8656
goコマンドでパッケージドキュメント参照

`go doc` コマンドで、パッケージ内容を表示できることを知ったので共有。

```bash
$ go doc fmt
```

```bash
$ go doc fmt.Println
func Println(a ...interface{}) (n int, err error)
    Println formats using the default formats for its operands and writes to standard output.
    Spaces are always added between operands and a newline is appended.
    It returns the number of bytes written and any write error encountered.
```

このようにパッケージに用意されている関数や変数、型などの内容を簡単に参照することが出来ます！
素人のjQuery奮闘記

ど素人が手探りでjQueryでWebサイトによくある機能を作った奮闘記です。
温かい目で見守ってくださると嬉しいです。

#作るときの縛り
未知の技術を学ぶ練習も兼ねて、使えるメソッドを自分で判断し、組み立てる事ができるようになることを目標として、今回は縛りを設けて作成しています。

・<a href="http://semooh.jp/jquery/" target="_blank">jQueryの公式リファレンス</a>のみ
・検索をかけるときは、「メソッド名　jQuery」という検索ワードのみ使用可
　「tab　作り方　jQuery」という書き方は、コードそのものが出てきてしまうのでNG
・命名規則は「FLOCSS＋BEM」を改変して使用。

#ページTOPアイコンの動き
最初は、このようなページTOPアイコンのアニメーションを作成していきます。
![risu_mihon.gif](https://qiita-image-store.s3.amazonaws.com/0/349181/399346ee-5f39-84e5-5941-92189c1acff1.gif)

・ページをスクロールすると下からリスが半分出てくる。
・マウスカーソルをhoverすると全身が出る
・クリックするとページのTOPへ
・TOPに戻るとリスが消える

このような仕様となっています。

#使用するコード
###HTML
使用するHTMLは以下です。

```html
<div class="container">
	<div class="c-pageTop">
		<a href="#" class="c-pageTop__link">
			<img src="img/jquery001/squirre.png" alt="PageTOP" class="c-pageTop__img">
		</a>
	</div>
</div>
```

###CSS
ページをスクロールできるように、高さのみ設定を設定。
他、アイコンの最初の位置など基本的なスタイルを設定しています。

```css
.container{
	height: 3000px;
}

.c-pageTop {
	position: fixed;
	bottom: -130px;
	right: 5px;
	transition: all 600ms ease;
}

.c-pageTop .c-pageTop__img {
	cursor: pointer;
}

.c-pageTop .c-pageTop__link:hover {
	opacity: 1;
}
```

#作ってみよー！
###使えるメソッドの検討をつける
作り方が皆目検討がつかなかったので、まずはリファレンスをひたすら読み、使えそうなメソッドを探して見ました。

初見で使えそうだなーと思ったのは
・scroll()
・click()
でした。

hoverすると下からニョキっと出てくる動きを再現できるメソッドは見つけられませんでした。fadeIn()もshow()も違うっぽい。

探しているとanimate()という、スタイルを要素にあててくれるメソッドがあることに気づきました。もしやこれで、要素の位置をしていするプロパティをあてていくと動くのでは！？

###失敗
早速、scroll()、click()、animate()を使って作成してみました。

![risu.gif](https://qiita-image-store.s3.amazonaws.com/0/349181/5d121923-ca4d-69d0-b68a-fb7c0c804195.gif)

スクロールすると上に上がり続け、終いにはページから消えるページTOPアイコンの完成です。
何を思ったか、animate()で指定するプロパティをposition: absolute; bottom: +50px;と書いてしまったのが原因です。ひたすら、下に50px追加されていきます。
爆笑でした。

###CSSで変化後の位置を指定、jQueryでクラスを付け替える
どうやら、メソッドで動かすよりも、CSSで変化後の位置をかき、jQueryでクラスを付け替えて動かす方法があると気づきました。

使用するメソッドは
・addClass()
・removeClass()
を使っていきます。

###CSS
新たに変化後の位置を指定するCSSを追加しました。

```css
.harf{
	bottom: -50px; 
	transition: all 600ms ease;
}

.harf:hover{
	bottom: 5px;
}
```

###JS
ページのスクロール位置で条件分岐し、クラスを付け替えるようにしました。

```js
$(function() {
	var harfOfPage = $(window).innerHeight() / 2;
	$(window).scroll(function() {
		if($(window).scrollTop() > harfOfPage){
			$(".c-pageTop").addClass('harf');
		}else{
			$(".c-pageTop").removeClass("harf");
		}
	});
});
```

#完成
この方法でこの動きが再現できました！
![risu_kansei.gif](https://qiita-image-store.s3.amazonaws.com/0/349181/83c973a2-dbcf-a4dd-a48b-b8409c938226.gif)

途中、失敗もありましたが無事動くページTOPアイコンを作成することが出来ました！
クラスを付け替えてアニメーションを作成するのは基本の基本とのこと。
今後も使って行けそうです。

改善点の多いコードですが、まずは泥臭く動くものを作成してみました。
ありがとうございました！
HULFTについて勉強してみた

	
`覚書目的（後に修正予定）`	
				
- ELBを用いて冗長化構成をとった時にの、hulftの料金（２台文？）							
	→	ELBは負荷分散のため、hulft対応については確認必要そう					
		てゆうかELB自体がhulftとの連携が苦手そうなので、EC2を２台構成にしてhulftのクラスター版を購入する必要あり（2台目半額！）					
							
- ec2の再起動に10分ほどはかかるので、リトライは30分後などにしても大丈夫そう？							
	→	3600秒はいけそう					
		→	タイムアウト時間と			暴走用にジョブタイムアウト時間という項目の設定が必要	
							
- hulftは名前解決ができる？							
	→	できる、配信側にホスト名とipの紐付けができる（hosts）					
									
							
- 多重度を１にする設計はありうる？							
	→	あるがジョブをキュー的にしたい目的ならありうる、リソースが原因となるケースは少ない					
							
- hulftのファイル送信で一番メモリに負荷をかけやすいタイミング							
	→	ファイルの圧縮、非圧縮時などが懸念すべきところ					
							
- 複数ファイルが同時送信された場合、受信時ジョブとデータ送信は同時にされうる？							
	→	されうる。重いファイルから送信する時などは注意（軽いファイルは集信ジョブへすぐ繋がるので）					
							
- 集信時ジョブが完了して送信タスク完了とできるか							
	→	可能					
		→	その場合のログは切り分け可能？				
			→	可能			
							
- 冗長化構成を取るために、NLBに固定IPを付与しNLBのIPを直指定することは可能？							
HULFTの設定でipAに送信できない場合、ipBにフェイルオーバーするようにすることは可能？							
	→	まだわからない					
							
- ログ送信に関する話							
	→	utllistで実装					
	→	jp1でのログ監視もありうる。					
	→	バッチ的に一回コマンドで切り出してログサービスに送る。					
	→	異常時ジョブの中で完了コードを異常時ジョブに渡して、それを持ってメール送信する仕組みがシンプルかも					
							
- ハルフトスクリプトとは							
	→	超ざっくりいうとデータスパイダーのミニ版のイメージ？					
	→	前後のジョブ実行の効率化					
	→	もしくはFTPからのファイル送信の実現。					
							
- ハルフトジョブの変数							
	$MSG0	〜	5				
	というハルフトの環境変数をスクリプトで指定すればスクリプトの引数として実行できる
Rails + NginxをSSL化

ssl化対応した際に、つまずいたので、メモ


## InvalidAuthenticityToken エラーが発生
証明書をELBに設定後以下のエラーが発生。
ちなみにローカル環境では起きなかったので、nginx周りの設定がおかしいのかな思いました。

```
ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)
```

## 手順通りnginx.confを編集

```nginx.conf
   server {
       listen 443 ssl; # 追記
       # :
       # :
        location @advice_api {
              # :
            proxy_set_header Host $host; # 追記
            proxy_set_header X-Forwarded-Proto $scheme; # 追記
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 追記
        }
   }
```

が、エラーは変わらず発生

## ELBを使っている場合、sslの終端がelbになる
ということに調べているとわかりました。

```nginx.conf
            proxy_set_header X-Forwarded-Proto $scheme;
```
を以下のように書き換えました。

```nginx.conf
            proxy_set_header X-Forwarded-Proto $http_x_forwarded_proto;
```

エラーも無事解消されました。

`$http_x_forwarded_proto`を使うとnginx側でELBへの接続に使用したプロトコルを判別できるっぽいです。
Bootstrapを入れてるはずなのに使えない機能があるって？それはきっとbootstrap.jsを読み込んでないからだよ！

## なんでか使えないタブ機能
bootstrap4の機能は便利なもので、「HTML/CSSの中だけで簡単にページ遷移が出来てしまうぜ！」というタブを使った機能を見かけたので使おうとしたのですが、記載されているhtmlの書き方をしてもページ遷移されない。

一番分かりやすいのは[[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜](https://qiita.com/tonkotsuboy_com/items/15a914f073c8f9bb1344)だったんですが、こんなに丁寧に説明されているのに出来ないなんてセンスないな～と思っていたんですが、ふと冷静になって気付きました。

「bootstrapの中でどう実現しているのかを考えると、記載方法的にjsっぽいよな。style以外にもbootstrapのファイルがあるんじゃない？」

## あったよbootstrap.js

「bootstrap javascript」とかで検索するとちゃんと本家が引っかかりますね。
そして書いてありますね、ちゃんと。

[Bootstrap](https://getbootstrap.com/)
BootstrapCDNをご覧ください。

Webの常識を何も知らないことが露呈してしまった(-_-;)

## bootstrapの利用方法

htmlのbodyは書いてあるけどhead部分は当たり前すぎてあんま見かけない気がしたので、ついでに書き残しておきます。

cssを使うだけならこれをhtmlに記載すればOK

```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
```

JSチックな機能を使いたいならこちらも追加してね。

```html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
```

## 他にもこんなに！bootstrap.jsが必要な機能

例えば[こちら](https://getbootstrap.com/docs/4.0/components/collapse/)等、他にもbootstrap.jsが必要なものは色々あるみたいです。
追って更新します！
リモートのブランチをローカルに反映する

# はじめに
リモートのブランチをローカルに反映する自分用メモです。

# ローカルでリモートのブランチを更新

```bash
$ git remote update -p
```

# リモートのブランチを確認

```bash
$ git branch -r
```

# リモートのブランチをローカルに反映

```bash
$ git checkout -b <ローカルのブランチ名> <ローカルに反映したいリモートのブランチ名>
```

```bash:例
$ git checkout -b dev origin/dev
```

# ローカルのブランチの確認

```bash
$ git branch
```
PythonでQiita APIを叩いて新規投稿するスクリプトの例 (最小構成的な)

PythonでQiita APIを叩いて新規投稿するスクリプトの例 (最小構成的な)


# Script

```py
import requests
import os

if __name__ == "__main__":
    item = {
        'title': 'title',
        "coediting": False,
        'tags': [
          {
            "name": "Python",
            "versions": ["0.0.1"]
          }
        ],
        'private': True,
        'tweet': False,
    }

    item['body'] = "# Header\n- list\n- list\n- list"


    url = 'https://qiita.com/api/v2/items'

    token = os.environ['TOKEN']

    headers = {
     'Authorization': 'Bearer {}'.format(token),
     'Content-Type': 'application/json',
    }

    print(item)
    print(headers)

    res = requests.post(url, headers=headers, json=item)
    print(res.json())



```

# Execute

`TOKEN=XXXXXXXXXXXXXXXXXXXXX python qiita.py`



# 結果

![image](https://user-images.githubusercontent.com/13635059/52046673-a4140200-258a-11e9-9564-2dc2f16d49ef.png)

# Ref

[Qiita API を利用して記事を投稿する - Qiita](https://qiita.com/iimuz/items/4837e9c8043ce7c1262b)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[Android]大学生が大学内を循環しているバスの運行状況を調べられるサービスを開発する。


# 経緯
大学の自由研究でキャンパス内を循環しているバスの位置情報やバス内の画像を解析して、Web上でバスの現在位置や混雑状況などを確認できるサービスを4人チームで開発することになった。
チーム全体の開発が一段落し、自分の担当した領域をまとめようと思い投稿しました。

自分の担当した内容に絞ってまとめているため分かりずらい点があるかもしれません。**分かりずらい点**や**修正した方が良い点**などがあれば報告していただけるとすごくありがたいです。

他の担当者の内容はslideshareに載せてある資料を参照してください。
[大学循環バスシステムをチームで開発してみる。 ](https://www.slideshare.net/tubasa310/ss-128559493)
ソースコードは[GitHub](https://github.com/TsubasaSato/tamabus)に載せています。
# 1.序論
## 1.1 バスクライアントとは
このシステムで私はバスクライアントの開発を担当した。
バスクライアントの役割はバスの位置情報と混雑状況を計測するための
バス内の画像をAPIサーバに送信することである。
これはシステム全体の中でのバスクライアントの役割である。
![システム全体の中でのバスクライアントの役割](https://imgur.com/PmVdKNW.jpg)

## 1.2仕様
　以下の3つの機能を持たせたAndroidアプリを開発し、そのアプリをインストールさせたAndroid端末をバス内に設置することでバスクライアントを実現する。

1. Wi-FiとGPSから取得した位置情報データを10秒ごとにAPIサーバに送信する。
2. バス内の画像をBase64にエンコードしてから10秒ごとにAPIサーバに送信する。
3. 1.と2.の送信データはJSON形式で送信する。

JSONデータの中身  (左:位置情報、右:画像情報）である。
![JSONデータの中身(左:位置情報、右:画像情報)](https://imgur.com/AwsKjGd.jpg)


## 1.3使用した環境
- 統合開発環境:Android Studio
- 使用した言語:Java
- 使用したAndroid端末:VAIO Phone A VPA0511S

## 1.4 ファイルの説明

[tamabus](https://github.com/TsubasaSato/tamabus)
　　├ AndroidManifest.xml
　　├ MainActivity.java
　　├ UploadTask.java
　　├ activity_main.xml
　　├ colors.xml
　　├ strings.xml
　　└ styles.xml

- AndroidManifest.xml：使用する権限を記載してあるファイル
- MainActivity.java：ここに記載されているプログラムが動作する。
- UploadTask.java：サーバにデータをPostする際の非同期通信処理のクラス
- activity_main.xml：アプリ画面のレイアウトが記載されているファイル
- colors.xml,strings.xml,styles.xml：それぞれアプリ内で使用されている色や文字列、書式などの情報が記載されているファイル。

# 2.本論
## 2.1 アプリ画面、機能の流れ
　以下がアプリの画面である。常時カメラを起動し、AndroidのGUIコンポ―ネントであるTextureViewオブジェクトに映し続けている。
TextureViewオブジェクトの下には、青文字で緯度、赤文字で経度を表している。緯度、経度の下にはアプリを起動してからの経過時間を示している。
経過時間は10秒ごとに更新され、経過時間が更新されると位置情報と画像情報が送信されたことが分かるようになっている。
 
![アプリ画面](https://imgur.com/4U0HbyV.jpg)

アプリを起動してからのフローは以下の通りである。	
変数などの初期化処理が行われた後、位置情報権限とカメラ使用権限が許可されているかどうかを確認する。両権限が許可されていれば、「GPSから位置情報を取得」から「エンコードした画像をPost」までのフローを10秒おきにループする。
 
![アプリ起動からのフロー](https://imgur.com/81OedOj.jpg)
## 2.2 発生した課題
### 2.2.1 カメラを全自動で撮影できない。
　開発当初、カメラでの自動撮影はAndroid StudioのIntentクラスの機能を使って、純正のカメラアプリを呼び出し、起動したカメラアプリで自動的に撮影できるものだと思っていた。しかし、純正のカメラアプリでは誰かがシャッターを押さなければ写真が撮影できず、自動的に撮影ができないことが分かった。どのようにしてバス内の画像を取得するかが開発当初の一番の課題であった。

### 2.2.2 Postされたエンコード済み画像データを受信側でデコードできない。
　バスクライアント側で撮影した画像をBase64でエンコードし、文字列化した画像データをテストでlocalhostに送信する。受信側で画像データの文字列を受け取ることに成功したが文字列をデコードすることができなかった。

## 2.3 発生した課題の解決法
### 2.3.1 純正のカメラアプリを起動しない。
 純正のカメラアプリを起動し、シャッターを押して撮影する方法以外に画像を取得する方法はないか、情報を探していたがなかなか見つからなかった。そこで英語で情報を探してみれば見つかるのでは、と考え英語で情報を探してみるとカメラに写っているものをGUIコンポーネントのTextureViewオブジェクトに取り込み、一定時間でTextureViewオブジェクトに移っている画像を取り込むという方法を見つけ、この方法で課題を解決することができた。

### 2.3.2 Postすると+記号が半角スペースに強制的に置換される。
 エンコードされた文字列を送信する前にAndroid側でデコードすると正しくデコードできたことから、Postに原因があるのではないかと推測した。調べてみると、Postした文字列内の+記号が半角スペースに置換されてしまう事が分かった。
 テストでlocalhostにデータを送信した。以下の赤線部が半角スペースに変換された箇所である。
![赤線部が半角スペースに変換された箇所](https://imgur.com/U6jqxdM.jpg)

　サーバ側で受信した文字列に含まれる半角スペースを＋記号に置換するプログラムを作成することで課題を解決した。
# 3.結論
## 3.1 localhostに送信してみた
　XAMPPで受信した位置情報と画像情報のJSONデータを表示する環境をlocalhostに構築した。
　正しくデータを送信できていることが分かる。
![localhost側で受信したデータの中身](https://imgur.com/Nap9s1Y.jpg)

## 3.2 今後の予定
　私の担当であるバスクライアントは完成したので送信された画像から混雑度を解析する画像解析を今後手伝う予定である。
　メンバーで予定を調整して開発を再開して、運用までもっていきたい。
【Laravel】middleware authのリダイレクト先を変更する【Route [login] not defined.】

## 今回困ったこと
- ルーティングでmiddleware authでログインしているユーザーのみ閲覧できるように制限した
- ログインしていない状態でそのページにアクセスした時、デフォルトの挙動だと[login]というルート名にリダイレクトしようとする。
- ルート名を[login]以外にしたいとき(挙動を変更したい時)にどうすれば良いか。

具体的には以下のようなエラー

```php

InvalidArgumentException
Route [login] not defined.
-----------------------------------------------
    public function route($name, $parameters = [], $absolute = true)
    {
        if (! is_null($route = $this->routes->getByName($name))) {
            return $this->toRoute($route, $parameters, $absolute);
        }
 
        throw new InvalidArgumentException("Route [{$name}] not defined.");
    }

```

## 結論
app/Exceptions/Handler.phpで、 Illuminate\Auth\AuthenticationExceptionをインポート(use)して、Handlerクラスのunauthenticatedをオーバーライドする


```php:app/Exceptions/Handler.php
use Illuminate\Auth\AuthenticationException;

    protected function unauthenticated($request, AuthenticationException $exception)
    {
        return $request->expectsJson()
                    ? response()->json(['message' => $exception->getMessage()], 401)
                    : redirect()->guest(route('login')); // ここを変更する
    }
```


## middleware authってなにをしてるんだろう？？

- ログイン状態のチェックを行なっているようだ
- OKなら、return $next($request);
- NGなら、Unauthenticatedという例外を投げているようだ
- 例外は、Illuminate/Foundation/Exceptions/Handler.phpでキャッチされて、function unauthenticatedで処理されているようだ

（Illuminate\Auth\Middleware\Authenticateの中で定義されているようなので、詳しくはそちらを覗いてみてください…！）
Heroku Connectで「Database→Salesforce」同期 (JPA使用)

よくわからないままHeroku ConnectのEdit Mappingの画面で「Database→Salesforce」欄の「Write database updates to Salesforce～」のチェックボックスをチェックすると、画面上部に警告「Read-write mappings require a unique identifier to be specified. Unique identifiers must be defined as unique External ID fields in Salesforce.」が表示された
以下の手順で同期ができるようになった

Salesforceの対象オブジェクトにカスタム項目を追加する

1. データ型：テキスト
1. 項目の表示ラベル：＜自由＞ ※「HerokuID」等
1. 文字数：36 ※UUIDの長さ
1. 項目名：＜自由＞ ※「HerokuId」等
1. 必須項目：OFF
1. ユニーク：ON
    1. 大文字と小文字を区別しない ※「する」でも可
1. 外部ID：ON
1. 項目レベルセキュリティ
    1. 参照可能：ON
    1. 参照のみ：ON
1. ページレイアウトへの追加：なし

再度「Write database updates to Salesforce～」のチェックボックスをチェックする
この時、メッセージ途中のドロップダウン(属性追加前の選択肢は「None」のみだった)で追加属性を選ぶ

Entityクラスに以下のフィールドと値設定処理を記述する
(項目名が「HerokuId」の例)

```
    @Column(name = "herokuid__c", length = 36, updatable = false)
    @Setter(AccessLevel.NONE)
    private String herokuId;

    @PrePersist
    private void onPrePersist() {
        herokuId = UUID.randomUUID().toString();
    }
```

おまけ：Heroku ConnectはSalesforceのAPIコール数制限を消費しないとのこと

以上
CycleGANを利用した音声変換に関する論文(Parallel-Data-Free Voice Conversion Using Cycle-Consistent Adversarial Networks)について

VTuberの音声変換とかに使えそうなので、メモとして書いておく。
著者はNTT研究所の亀岡先生のグループで音声合成とかNMFとかの音声関係で有名な研究室

元論文 https://arxiv.org/abs/1711.11293
この研究に関するNTT研究所のまとめ　http://www.kecl.ntt.co.jp/people/kaneko.takuhiro/projects/cyclegan-vc/

#一言で言うと
　CycleGANを利用して、ある人の音声の声質を別の人の音声の声質に、音声として成り立つように変換するフィルタを学習する。

#先行手法との違い
　学習データとしての、変換前の音声と変換後の音声に対する制約がない。従来の手法だと、変換前と変換後で対応する音声データが必要だったり、もしくは音声以外の学習用データ(例えば、発話内容のテキストデータなど)が必要だったが、この手法では、変換前と変換後の音声データだけがあれば良い。

#論文の肝
###cycle GAN
 変換を担保するAdversarial lossと、変換によって残したい情報が落ちないようにするCycle-consistency lossからなる。これによって、変換前と変換後の音声を対応させずに学習することができる。 

###gated CNN
 文章や音声のようにsequentialなデータを並列計算できるようにCNNで取り扱うための手法。何個前かまでの単語や音をまとめて、畳込み層に渡すことで、CNNでRNNのように動かす手法。

###Identity-mapping loss
 言葉としてきちんと成り立つように担保するloss. 変換後のものをGeneratorに入力したときの出力と、変換後のものとの差がなくなるようにすることで、変換によって、言葉としての意味の部分が落ちないようにするために入れている。
$$ L _{id} = \mathbb{E} _{y~P _{data} (y)} [|| G _{X \to Y} (y) - y || _{1}]  + \mathbb{E} _{x~P _{data} (x)} [|| G _{Y \to X} (x) - x || _{1}] $$



#次にすること
- 使われているgatedCNNが元論文(https://arxiv.org/abs/1612.08083 )読んでも理解できないので、実装されているコードを読んで理解すること
- 実際に実装して試してみること