OmniAICreator/Qiita-1.07M huggingface dataset:
mongoDB Atlas+mongooseでWebアプリをどうやって始めるんや？

## 1. Atlasにclusterを作成する
まずは登録やん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324917/9a770787-95f1-09f5-ef45-575499c87ff8.png)

### 1.1 Add New User
Securityの中にある"Database Access" 項目に行くと、Add New Database Userがあるからそこに行くやん。

![71700.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324917/a2ac3fc2-f2f6-0c5c-c576-e696c1bc645a.jpeg)

### 1.2 whitelistの設定
ADD IP ADDRESSでWhitelist Entryを設定するやん。とりあえず、これは"ALLOW ACCESS FROM ANYWHERE"を押しとこ。

![71701.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324917/bd80070b-521b-d11c-f269-c50ba1bf5cd1.jpeg)

これで、Atlas側の設定はおしまいや。

## 2. Express側の設定

### 2.1 mongooseをインストール

```
npm install mongoose
```

### 2.2 default.jsonの設定
名前はなんでもいいんやで。このファイルの中で

```
{
"mongoURI":"hoge hoge hoge"
}
```
を設定する。このhoge hoge hogeの中には、Atlasの作成して設定してきたclusterのconnectをボタンを押した後に出てくる"mongodb+srv://~"で始まる一文を入れる。
ここで忘れてはいけないのは、passwordとdbnameを自分が設定したものに変更しなければいけない点やね。これを自分は忘れており、1時間ほど無駄に時間を溶かしてもうた。
### 2.3 db.jsの設定
index.js or server.jsと同じ階層の中にdb.jsを作成する。そして、その中で

```
const mongoose = require("mongoose");
const config = require("config");
const db = config.get("mongoURI");

const connectDB = async() => {
    try {
        await mongoose.connect(db);
        console.log("Mongodb is connected....");
    } catch (err) {
        console.error(err.message);

        process.exit(1);
    }
};

module.exports = connectDB;
```
## 最後
これで準備は全部完了や！あとは、メインのファイル（index.js or server.js)で

```
const connectDB=require("db.jsのパス");
connectDB();
```
とすれば、接続完了やな。めでたし、めでたし。
windowsでiverilog その21

#
概要

windowsでiverilogやってみた。
fifo書いてみる。

#サンプルコード


```

module fifo(input clk, rst, input [15:0] data, output full, empty, output [15:0] out);
	reg [15:0] out;
	reg [15:0] mem[2:0];
	reg [2:0] rd_pos;
	reg [2:0] wr_pos;
	assign empty = ((wr_pos - rd_pos) == 0) ? 1'b1 : 1'b0;
	assign full = ((wr_pos - rd_pos) == 8) ? 1'b1 : 1'b0;
	always @(posedge clk or posedge rst)
	begin
		if (rst)
		begin
			wr_pos <= 0;
			rd_pos <= 0;
		end
		else
		begin
			if (full == 1'b0)
			begin
				mem[wr_pos] <= data;
				wr_pos <= wr_pos + 1;
			end
			if (empty == 1'b0)
			begin
				out <= mem[rd_pos];
				rd_pos <= rd_pos + 1;
			end
		end
	end
endmodule

module test();
	reg clk;
	reg rst;
	reg [15:0] data;
	wire [15:0] out;
	wire full,
		empty;
	fifo u(.clk(clk), .rst(rst), .data(data), .full(full), .empty(empty), .out(out));
	initial
	begin
		$monitor("%b %b %h %h %b %b", clk, rst, data, out, full, empty);
		clk = 0;
		rst = 0;
		#10
			rst = 1;
		#10
			rst = 0;
		#10
			data = 16'h0008;
		#10
			data = 16'h0000;
		#60
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule




```

#実行結果


```


0 0 xxxx xxxx x x
1 0 xxxx xxxx x x
0 1 xxxx xxxx 0 1
1 1 xxxx xxxx 0 1
0 0 xxxx xxxx 0 1
1 0 xxxx xxxx 0 0
0 0 0008 xxxx 0 0
1 0 0008 xxxx 0 0
0 0 0000 xxxx 0 0
1 0 0000 0008 0 0
0 0 0000 0008 0 0
1 0 0000 0000 0 0
0 0 0000 0000 0 0
1 0 0000 xxxx 0 0
0 0 0000 xxxx 0 0
1 0 0000 xxxx 0 0
0 0 0000 xxxx 0 0
1 0 0000 xxxx 0 0
0 0 0000 xxxx 0 0
1 0 0000 xxxx 0 0
0 0 0000 xxxx 0 0


```

以上。
Git でリモートブランチへの切り替えはもっと簡単にできる

まず結論から。次のようにして変更できます。(foo はリモートブランチ名です)

```bash
git fetch
git checkout foo
```

fetch できていたら 2行目だけでOK

```
Branch 'foo' set up to track remote branch 'foo' from 'origin'.
Switched to a new branch 'foo'
```

と、親切に動作してくれます。

こちらのツイートで知りました。ありがとうございます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">git fetch<br>git checkout foo<br><br>で行けるような気が</p>&mdash; ドキュネオ (@DQNEO) <a href="https://twitter.com/DQNEO/status/1272508855868506112?ref_src=twsrc%5Etfw">June 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[Git のドキュメント](https://git-scm.com/docs/git-checkout/2.27.0) にちゃんと書いてありますね。

> <branch> が見つからなくても、一致する名前のリモート (これを <remote> と呼びます) にトラッキングブランチが存在し、 --no-guess が指定されていない場合は次と同等です。
> ```
> $ git checkout -b <branch> --track <remote>/<branch>
> ```

これまでは、次のようにやっていました。

```bash
git checkout -b foo origin/foo
```

ブランチ名が長い場合など面倒だし間違えそうです。

ちなみに、`git switch` を使っても同様の動作をしてくれます。

```bash
git switch foo
```

らくちんになった。

参考

- https://qiita.com/hinatades/items/a30ba3b8f2bd80e30258
React: フックで値を定めた<input>要素に制御されたコンポーネントを使うよう警告が出る ー  Warning: Changing uncontrolled input

フック`useState()`でテキスト入力フィールド(`<input type="text">`)をコントロールしようとしたら、ブラウザコンソールに何やら警告が出てしまいました。

### 制御されたコンポーネントを使うよう促す警告

具体的にはつぎのメッセージで、制御されていない`<input type="text">`要素を制御されたコンポーネントに変換しようとしていると警告しています。コントロールしたいのなら、制御されたコンポーネントを使わなければならないということのようです。

> Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.


警告(Warning)メッセージから検索してこの記事にたどり着き、とにかく結論が知りたいという方は、フック`useState()`に初期値を与えてください。

```react
// const [text, setText] = useState();
const [text, setText] = useState('');  // 初期値を与える
```

では改めて、経緯からお話ししましょう。


### 警告を受けた関数コンポーネントのコード
警告を受けた関数コンポーネントのコードは、きわめて単純化するとつぎのとおりです。これで前掲の警告が示されます。CodeSandbox「[React: Warning - Changing uncontrolled input with hook](https://codesandbox.io/s/react-warning-changing-uncontrolled-input-with-hook-ptzsb?file=/src/App.js)」にサンプルを掲げましたので、実際の動きはこちらでお確かめください。フィールドにテキストを入力した最初に、ブラウザコンソールにメッセージが出力されます。警告ですので、動作しないわけではありません。

```react
function App() {
  const [text, setText] = useState();
  const handleChange = (event) => {
    const target = event.target;
    setText(target.value);
  };
  return (
    <div>
      <input type="text"
        value={text}
        onChange={handleChange}
      />
    </div>
  );
}
```


### クラスコンポーネントでは警告されない
警告メッセージはさらに、詳しくはこちらを見るようにと「[制御されたコンポーネント](https://ja.reactjs.org/docs/forms.html#controlled-components)」の説明がリンクされています。ただ、例示されているコードはクラスコンポーネントです。たしかに、つぎのようなクラスコンポーネントに書き替えれば警告は出ません。

```react
class App extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    const target = event.target;
    console.log('change:', target.value);
  };
  render() {
    return (
      <div>
        <input type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
```


### useState()フックには初期値を与える
けれど、このクラスコンポーネントをフックで関数に改めたのが、冒頭のコンポーネントの定めです。処理の組み立てに違いがあるようには見えません。

ようやく判明したのが、フック`useState()`に初期値を与えれば警告が消えるということです。クラスコンポーネントの例で`state`の初期値に設定したのは空のオブジェクト`{}`ですから、ちょっと納得はいきません。少なくとも、警告メッセージにはもう少し情報がほしいところです。

```react
// const [text, setText] = useState();
const [text, setText] = useState('');  // 初期値を与える
```

公開したCodeSandbox「[React: Warning - Changing uncontrolled input with hook](https://codesandbox.io/s/react-warning-changing-uncontrolled-input-with-hook-ptzsb?file=/src/App.js)」は、`src/index.js`がルートモジュールの`src/App.js`を読み込んでいます。クラスコンポーネント`src/App_class.js`と関数コンポーネント`src/App_hook.js`のモジュールも別途加えました。それぞれを`src/App.js`に差し替えて、結果の違いをお確かめください。
vuejs-datepickerの入力データをPHPに渡したら日付が変わった？



Vue.jsでサイトを作る際に日付入力にvuejs-datepickerを使うわけですが、
ブラウザ上で表示されてる日付とフォーム送信された日付がずれる事が。[^1]

生年月日とか入力する時にカレンダーをポチポチするのは面倒なので`typeable="true"`にしてキーボード入力を可能にしてますが、

**入力方法によって設定される時間が変わります。**

- カレンダーポチポチ
![20200612_ss01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590344/01cf5474-ed96-a9e0-d0b8-90bed7f1b6b2.png)
入力操作した時間が設定されてる

- キーボード入力
![20200612_ss02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590344/a6559a46-cc47-f089-00cc-98b9592b1201.png)
`00:00:00`になってる

### それはまぁ、別に良いとして。

このdate型をそのままPHPに投げたところ、PHP側で受けたデータがUTCだった。

```js
// そのまま送る
axios.post('/test/', {date: this.hoge});
```

```php
/** PHPで受けたデータ **/
// カレンダーポチで入力したデータ
2020-06-01T08:29:00.000Z

// キーボード入力したデータ
2020-05-31T15:00:00.000Z
```

・・・うん、日付かわっとるな。
カレンダーポチでも時間によって日付かわるな。

PHP側で補正するのも面倒なんで、js側で文字列に変換してから送るようにしてます。

```js
// よくあるdateをstringに変換するやつ
const dateStr = this.hoge.getFullYear()
         + '-' + String(this.hoge.getMonth() + 1).padStart(2, '0')
         + '-' + String(this.hoge.getDate()).padStart(2, '0');
// '2020-06-01' になる

// stringを送るよ
axios.post('/test/', {date: dateStr});
```

以上

[^1]: 日本語OS上で、vuejs-datepicker のlocaleを"ja"にした環境での話です。他の環境は知らん。
Claris ConnectでOutlookを利用するための接続方法

# はじめに
[Claris Connect](https://www.claris.com/ja/connect/)はApp同士を連携させ、データのやり取りを行うことができるサービスです。
画面でAppを選択して処理を登録していけば、データをやり取りするフローの構成が行えます。

利用するAppは有効なアカウントで接続確認を行う必要があります。
接続確認方法はAppによってそれぞれ異なり、Claris Connectの指示に沿って設定をしていく必要があります。
AppによってはSlackのように構成用サイトへのリンクがあったり、手順が詳しく書かれているものもあります。
[別記事「Claris ConnectでSlackを利用するための接続方法」](https://qiita.com/JuppoWorks/items/72d9bfecbee868e9edcb)

しかしOutlookの場合、説明書きがシンプルすぎて戸惑いそうな印象を受けました。
そこで今回はOutlookの接続確認方法について紹介します。

Office365のアカウントは作成済みを前提として、手順は
1.Outlookのトリガとなる動作を決めて
2.Office365アカウントにログインして
3.Outlookで自分宛てにメールを送る
という流れです。

# Outlookの接続手順
※以下の画面キャプチャはClaris Connectの実際の画面をchromeの翻訳機能で日本語訳したものです。
####(1)トリガとなる動作を選択する
　App一覧からOutlookを選択するとどの動作をトリガとするかを決める必要があります。
　ここは任意のものにチェックを入れてください。
　今回は新着メールを受信した場合にチェックを入れます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/8639ddee-fa3e-1d73-3c5e-688ebc756e76.png)

####(2)Office365アカウントと連携する
　お使いのOffice365のアカウントのログインIDとパスワードを入力します。
　連携が成功すると次に進む青いボタンが押せるようになります。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/4b2a6e66-106c-a39e-41a1-a8c669a4a2f1.png)

####(3)接続確認
　ここでアカウントの接続確認を行います。![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/b08ed035-5b54-df34-3dc4-911a743f9e01.png)↓翻訳前の文章
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/f662eb0a-586c-0705-3aff-5d05aee66548.png)
　シンプルな説明文なので一瞬戸惑いますが、Outlookのメールアドレスで自分宛にメールを送信する必要があります。
![Outlook.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/33b54df1-4d2e-99d6-3711-6694b68c92b6.png)
このように、Outlookから自分宛に空メールを送信します。
接続確認が無事に終わると青いボタンが押せるようになり、完了です！
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535677/2a1d03f4-8d95-a745-201b-2a807256021c.png)


これで、データをやりとりするフローが作成できるようになります。
例えば、(1)で設定した"Outlook新着メールを受信した場合"をトリガとすると、「Outlookでメールを受信したら、FileMakerにレコードを作成する！」ということができます。
windowsでiverilog その20

#概要

windowsでiverilogやってみた。
マルチプレクサを書いてみる。

#サンプルコード


```

module mux(input clk, rst, select, input [15:0] a, input [15:0] b, output [15:0] out);
	reg [15:0] out;
	always @(select or a or b)
	begin
		if (select == 1)
		begin
			out = a;
		end
		else
		begin
			out = b;
		end
	end
endmodule

module test();
	reg clk;
	reg rst;
	reg select;
	reg [15:0] a,
		b;
	wire [15:0] out;
	mux u(.clk(clk), .rst(rst), .select(select), .a(a), .b(b), .out(out));
	initial
	begin
		$monitor("%b %b %b %h %h %h", clk, rst, select, a, b, out);
		clk = 0;
		rst = 0;
		#10
			rst = 1;
		#10
			rst = 0;
		#10
			a = 16'h0004;
			b = 16'h0008;
			select = 1;
		#10
			select = 0;
		#10

		#10

		#10
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule



```

#実行結果


```

0 0 x xxxx xxxx xxxx
1 0 x xxxx xxxx xxxx
0 1 x xxxx xxxx xxxx
1 1 x xxxx xxxx xxxx
0 0 x xxxx xxxx xxxx
1 0 x xxxx xxxx xxxx
0 0 1 0004 0008 0004
1 0 1 0004 0008 0004
0 0 0 0004 0008 0008
1 0 0 0004 0008 0008
0 0 0 0004 0008 0008
1 0 0 0004 0008 0008
0 0 0 0004 0008 0008
1 0 0 0004 0008 0008
0 0 0 0004 0008 0008


```

以上。
PHPでWi-Fi制御

**PHP WiFi**
GitHub：https://github.com/sanchescom/php-wifi
Packagist：https://packagist.org/packages/sanchescom/php-wifi

# インストール
Composerでインストールします。

`>composer require sanchescom/php-wifi`

# コマンド
コマンドとして利用することができます。

## アクセスポイント一覧

```
>.\vendor\bin\wifi list
 SSID               BSSID              Channel  Quality  dBm    Frequency  Connected  Security
----------------------------------------------------------------------------------------------------
 Buffalo-A-XXXX     XX:c2:bf:XX:fa:cc  53       63       -67    5250       true       WPA2-Personal
 aterm-XXXXXX-a     a4:XX:42:f1:XX:63  41       73       -62    5100       false      WPA2-Personal
...
```

## 接続しているアクセスポイント一覧
```
>.\vendor\bin\wifi list --connected
 SSID               BSSID              Channel  Quality  dBm    Frequency  Connected  Security
----------------------------------------------------------------------------------------------------
 Buffalo-A-XXXX     XX:c2:bf:XX:fa:cc  53       63       -67    5250       true       WPA2-Personal
```
## 切断
```
>.\vendor\bin\wifi disconnect --bssid=XX:c2:bf:XX:fa:cc --device=wlan
```

## 接続
```
>.\vendor\bin\wifi connect --bssid=XX:c2:bf:XX:fa:cc --password=password --device=wlan
```

# PHP
```php:index.php
<?php
include __DIR__ . '/vendor/autoload.php';

use Sanchescom\WiFi\WiFi;

$networks = WiFi::scan()->getAll();

foreach ($networks as $network) {
    echo "ssid:{$network->ssid} connected:{$network->connected}\n";
}
```
```
>php index.php
ssid:Buffalo-A-XXXX connected:1
ssid:aterm-XXXXXX-a connected:
```
windowsでiverilog その19

#概要

windowsでiverilogやってみた。
bufferを書いてみる。

#サンプルコード


```

module buffer(input clk, rst, enable, input [15:0] data, output [15:0] out);
	reg [15:0] out;
	always @(clk or enable)
	begin
		if (enable == 1)
		begin
			out = data;
		end
		else
		begin
			out = 16'bz;
		end
	end
endmodule

module test();
	reg clk;
	reg rst;
	reg enable;
	reg [15:0] data;
	wire [15:0] out;
	buffer u(.clk(clk), .rst(rst), .enable(enable), .data(data), .out(out));
	initial
	begin
		$monitor("%b %b %h %h", clk, rst, enable, data, out);
		clk = 0;
		rst = 0;
		#10
			rst = 1;
		#10
			rst = 0;
		#10
			data = 16'h0008;
			enable = 1;
		#10
			enable = 0;
		#10

		#10

		#10
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule



```

#実行結果


```

0 0 x xxxx    z
1 0 x xxxx    z
0 1 x xxxx    z
1 1 x xxxx    z
0 0 x xxxx    z
1 0 x xxxx    z
0 0 1 0008    8
1 0 1 0008    8
0 0 0 0008    z
1 0 0 0008    z
0 0 0 0008    z
1 0 0 0008    z
0 0 0 0008    z
1 0 0 0008    z
0 0 0 0008    z


```

以上。
[Shopify] GoogleにIndexされないページを追加する

このページは検索エンジンにIndexされたくない。というときはこちらの方法を参照してください。

# no-indexテンプレートの作成

「管理ページ」→「テーマのカスタマイズ」→「コードの編集」

Templates配下にて、「新しいTemplateを追加する」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/a7de7253-6c08-3f76-05f9-89479157439e.png)

ここで、名前を指定して「テンプレートを作成する」をクリック。

ここでテンプレートを編集する必要はありません。

# `theme.liquid` を編集

次に `theme.liquid` を編集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/72131db1-687a-b4ed-377a-bcdca31047b2.png)

イメージのように`<head></head>`内に下記のコードを挿入してください。

```html

  {% if template contains 'no-index' %}
    <meta name="robots" content="noindex">
  {% endif %}
```

#　テンプレートの適用

対象のページのテンプレートを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/b3617c1a-9d8d-a341-6795-8140154f1f09.png)

# 確認

ページのソースコードを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241909/53470e2c-fffa-f86f-cf77-4c3d55f5fb91.png)


以上です。
go修行5日目 if文とか

## クロージャー

```golang

package main

import "fmt"

// インクリメント
func incrementGenenrator() func() int {
	x := 0
	return func() int {
		x++
		return x
	}
}

// 円の面積
func circleArea(pi float64) func(radius float64) float64 {
	return func(radius float64) float64 {
		return pi * radius * radius
	}
}

func main() {
	counter := incrementGenenrator()
	fmt.Println(counter())
	fmt.Println(counter())
	fmt.Println(counter())

	c1 := circleArea(3.14)
	fmt.Println(c1(2))

	c2 := circleArea(3)
	fmt.Println(c2(2))
}

```

```
1
2
3
12.56
12
```

## 可変長引数

```golang

package main

import "fmt"

// func foo(param1, param2 int) とするとfoo(10, 20)の形でしか呼べない
func foo(params ...int) {
	fmt.Println(len(params), params)

	// forの中でひとつひとつ呼ぶ
	for _, param := range params {
		fmt.Println(param)
	}
}

func main() {
	foo()
	foo(10, 20)
	foo(10, 20, 30)

	s := []int{1, 2, 3}
	fmt.Println(s)

	foo(s...)
}

```


```
0 []
2 [10 20]
10
20
3 [10 20 30]
10
20
30
[1 2 3]
3 [1 2 3]
1
2
3
```

## if文

```golang

package main

import "fmt"

func main() {
	// if elseif else
	num := 9
	if num%2 == 0 {
		fmt.Println("by 2")
	} else if num%3 == 0 {
		fmt.Println("by 3")
	} else {
		fmt.Println("else")
	}

	// and条件 両方いっちしてTrue
	x, y := 10, 12
	if x == 10 && y == 10 {
		fmt.Println("&&")
	}

	// or条件 どちらか一致していればTrue
	if x == 10 || y == 10 {
		fmt.Println("&&")
	}
}
```

```
by 3
&&
```

関数を使う

```golang

package main

import "fmt"

// 0で割り切れればOK関数
func by2(num int) string {
	if num%2 == 0 {
		return "ok"
	} else {
		return "no"
	}
}

func main() {
	result := by2(10)

	if result == "ok" {
		fmt.Println("Great")
	}

	// 1行で書く場合
	if result2 := by2(10); result2 == "ok" {
		fmt.Println("Great 2")
	}
}
```

```
Great
Great 2
```
batからsqlファイルを実行すると「ORA-00907: 右カッコがありません。」というエラーが発生してしまう現象

タイトル通り

コンソールや、sqlDeveloperからは素直に動くのに、なぜかbatからだと動かないという時は、
sqlファイルの文字コードがUTF-8になっているせいかもしれない。

コメントにしか日本語使ってないぜと思っていても、
長大なSQLの途中にコメント書いてたりすると、SQLを読み込むときに思わぬ動作をしてしまう時がある模様。。

sjisにすればエラー起きずに上手く動いたので、おそらくこれが原因と思われる。。
しょうもないミスだけど、気を付けて置かないとハマるなーという反省記事でした :bow:
Macでデータサイエンス100本ノックを動かす方法


# データサイエンス100本ノックとは？
　良さそうなものがありました。
[データサイエンス初学者のための実践的な学習環境 「データサイエンス100本ノック（構造化データ加工編）」をGitHubに無料公開](https://digitalpr.jp/r/39499)

　動かし方はREADMEに書いてあるので、慣れている人は一瞬で動かせると思いますが、初心者だとちょっと戸惑いそうなので、メモがわりに動かし方を書いておきます。

# データサイエンス100本ノック環境構築方法
　やることは大きく以下の2つです。

- Dockerセットアップ
- Docker上で動かす

　それぞれ説明していきます。

## Dockerセットアップ
　Dockerの概要とインストール方法は以下参照ください。

[Docker入門して機械学習環境構築](https://karaage.hatenadiary.jp/entry/2019/05/17/073000)

## Docker上で動かす
　READMEの通り、以下コマンド実行しましょう。

```sh
$ git clone https://github.com/The-Japan-DataScientist-Society/100knocks-preprocess
$ cd 100knocks-preprocess
$ docker-compose up -d --build
```

　全部完了したら、ブラウザで以下のアドレスにアクセスします。

```
http://localhost:8888
```

　以下のような画面が表示されたらOKです。

<img width="640" alt="data_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/29dd4a06-839a-71be-6ec8-837c553ad057.png">

　「preprocess_knock_Python.ipynb」というファイルを選択すると、以下のようにJupyter Notebookが実行できます。

<img width="640" alt="data_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81919/eebb88bf-205e-3fad-93ad-253843753036.png">

　あとはEnjoyしましょう！

# まとめ
　Macでデータサイエンス100本ノックを動かす方法をメモがわりに簡単に紹介してみました。

　データ分析の100本ノックはやるかは正直分からないのですが、それよりDockerでこうやって環境構築できることを知れたのが良かったです。固定した環境とセットでGitHub上でJupyter Notebookを公開できるのは、再現性が高そうで便利ですね。


# 参考リンク
[データサイエンス100本ノックやってみる(環境構築)](https://qrunch.net/@yuduru/entries/NsJLedu8badLas9w)
Windowsの場合の情報

[データサイエンス100本ノックを、Google ColabとAzure Notebooksで気軽に行いたい！](https://qiita.com/noguhiro2002/items/de49db61b69c3dbc9282)
Google ColabやAzure Notebooksで動かしたい人向け

[だから僕はpandasをやめた【データサイエンス100本ノック（構造化データ加工編）篇 #1】](https://qiita.com/nkay/items/6778bb6a6400ed985aa0)
[だから僕はpandasをやめた【データサイエンス100本ノック（構造化データ加工編）篇 #2】](https://qiita.com/nkay/items/65a77b97ae9b7331b39c)

[【Python】データサイエンス100本ノック（構造化データ加工編） 001-010 所感+解説リンクまとめ](https://qiita.com/TosakaNaoya/items/34f1a1b090341904221d)

[Juliaでデータサイエンス100本ノック（構造化データ加工編）](https://qiita.com/Ken-Kuroki/items/115d0679fdce1d15b9d1)
Juliaでやってみた例。Juliaに関しては[「高速な科学計算言語「Julia」入門」](https://karaage.hatenadiary.jp/entry/2020/05/13/073000)を参照ください。

# 関連ページ
[Python関係の「○○100本ノック」のまとめ](https://qiita.com/karaage0703/items/7b5d54223d06e4b6ef0f)

# 変更履歴
- 2020/08/02 参考リンク追記
- 2020/07/02 参考リンク追記
- 2020/06/21 参考リンク追記
- 2020/06/17 関連ページ追記
はじめてのAthena

# はじめてのAthena
webサイトの訪問ログがs3に溜まっていくことになったので、Athenaを使ってみることに。
はじめてのAthenaを使う色々を自分用にメモ。

#テーブルを作る
最初なので、GUIで作る(2回目以降はSQLで作った方が楽ちん)

**step0**
```create table``` > ```from S3 bucket data```
<img width="980" alt="スクリーンショット 2020-04-09 17.06.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333838/7147eaee-0d30-8fd9-55a0-1ed266e57480.png">

**step1**
DB名、Table名、データの取得場所を入力
※ フォルダを指定すると、中にある該当ファイルが取り込まれる
<img width="717" alt="スクリーンショット 2020-04-09 17.15.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333838/f3be01c7-aec5-ab49-ba1e-969cba79c2e9.png">

**step2**
ファイルフォーマットを指定
<img width="664" alt="スクリーンショット 2020-04-09 17.46.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333838/13a06e5a-677c-504e-0c1a-c93565c517e4.png">

**step3**
Columnを設定。ひとつずつプルダウンで選べるけど、多いと大変なので一気に入力
<img width="600" alt="スクリーンショット 2020-04-09 17.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333838/169fac3d-ba3e-ad89-8a0d-0e1887d521f7.png">

**step4**
Partitionに使うColumnを決める。最初なので、いったんそのままで。
<img width="664" alt="スクリーンショット 2020-04-09 17.49.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333838/2c086ea6-ca70-d74b-2452-c5d166e80d2e.png">

**step5**
```create```でテーブル作成
作成と同時に作成に使われたSQLが表示されるので、次回以降はこれを修正しながら作るのが早い
GUIでヘッダーをスキップする方法が見つからないので、結局SQLでつくり直し:upside_down:

```sql
CREATE EXTERNAL TABLE IF NOT EXISTS <Database名>.<Table名> (
  `id` string 
  ...
)
ROW FORMAT SERDE 'org.apache.hadoop.hive.serde2.lazy.LazySimpleSerDe'
WITH SERDEPROPERTIES (
  'serialization.format' = ',',
  'field.delim' = ','
) LOCATION 's3://XXXXXXXX'
TBLPROPERTIES (
  'has_encrypted_data'='false',  # 暗号化するか否か
  'skip.header.line.count'='1'   # ヘッダーをスキップ
);
```
# Database, Tableを削除
```SQL
DROP DATABASE `DB_name`; # DBを削除
DROP TABLE `table_name`; # Tableを削除
```
# TIMESTAMP分割
https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/SPLIT_PART.html

# useragentわける
https://qiita.com/nightyknite/items/b2590a69f2e0135756dc
https://docs.aws.amazon.com/ja_jp/redshift/latest/dg/r_CASE_function.html

# そのうち使いそう
サブクエリからの配列の作成
https://docs.aws.amazon.com/ja_jp/athena/latest/ug/creating-arrays-from-subqueries.html
ServiceNowのdeveloperインスタンスでDomain Separationを有効にする

Version: New York

ServiceNowにはDomain Separationという仕組みがあり1つのインスタンス上で複数の利用者のデータを分離することが出来ます(分離されるのはテーブルでは無くレコードです)ユーザーは自分が所属しているDomain(と基本的にはその下位のDomain)のレコードしか扱えません以下はDomain Separationを有効にしたdeveloperインスタンスのDomain Mapの画面です
![FireShot Capture 063 - Side Menus - ぽんぽこシステム Armor MK II (Golden Avenger) - dev79651.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/3f85e997-dfc4-0ea3-cf2b-5b821933ca18.png)
この記事ではdeveloperインスタンスでDomain Separationを有効にする手順を説明します
# Pluginの有効化

Pluginは通常であればFilter navigatorにpluginなどと入力して表示される[System Defenition] - [Plugins]で目当てのものを探して有効化するのですが(例えばこちらは日本語化Pluginの有効化手順)

[ServiceNowのdeveloperインスタンスを日本語化する]
https://qiita.com/20_percent_cooler/items/ca2dfe6a8764f8b76baf

Pluginの画面でDomain Separationを探すも見つかりません(どうもServiceNowの別プロダクトのように扱われる大き目のソリューション？の有効化はこちらの画面では出来ないようです)
![FireShot Capture 065 - Applications - ぽんぽこシステム Armor MK II (Golden Avenger)_ - dev79651.service-now.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/9829a841-b20c-aef5-acda-fbf347c598a7.png)
developerインスタンスを管理するWebサイトで[Manage] - [Activate plugin]を選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/d4944d59-c006-1c6f-8ce7-ec20613d61f9.png)

そうするとActivateするPluginを選択するダイアログが表示されるので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/9d270efa-b07a-0f14-5176-0cf274153b89.png)
[Type to Filter Plugin]にdomainなどと入力してDomain Support - Domain Extensions Installerの[Activate] - [Activate plugin with demo data]を選択します(慣れてる人はwithout demo dataの[Activate plugin]でいいと思います)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/2c3d4774-0f95-0196-f44f-296badc299db.png)
実行すると終わったらメールが届くと書かれたダイアログが表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/67e07ce2-6276-be4c-c875-7e983fb2f486.png)
Domain Separationが有効化されたインスタンスにログインするとアプリケーションメニューにDomain Adminが追加されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/659397eb-f5c9-652a-c06b-6fb9b554d696.png)
画面右上の歯車アイコンをクリックするとSystem Settingのダイアログが表示されますShow domain picker in headerを有効にするとユーザ名の左に自分が今操作したいDomainを選択するPickerが常に表示されるようになるので便利ですSystem SettingのDomainというコントロールと同じ動作をするようです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193272/f0d19fd3-83f6-b86a-add5-8b67174d5399.png)
# Domain Separationについて
Domain Separationを利用することで基本的には1つのインスタンス上で複数の利用者のデータ(レコード)を分離することが出来るのですが(以下はServiceNowのドキュメントです)

[Understanding domain separation | ServiceNow Docs]
https://docs.servicenow.com/bundle/newyork-platform-administration/page/administer/company-and-domain-separation/concept/c_DomainSeparation.html

Domain Separationで分離することが出来るもの/出来ないもの(Domain Separation非対応のテーブルでは全てのDomainからレコードを参照される)/機能などが制限されるものがあるため

[Understanding domain separation | ServiceNow Docs]
https://docs.servicenow.com/bundle/london-platform-administration/page/administer/company-and-domain-separation/reference/domain-separated-apps.html#domain-separated-apps

利用する際には慎重に検討する必要がありそうです
Docker for Mac が重すぎて仕事にならんので、Vagrant + dockerで環境を作り直してみた

# はじめに
仕事でdockerを利用していたが、特に自分のPCと相性が悪く、1日30回くらいフリーズして仕事にならない状況だった。（同僚はそうでもなかった）
もちろんリソースは十分に割り当てていたのだがそれでもダメだったので、いろんな記事を参考にさせていただき、ようやく環境構築ができたのでメモ書きを残しておく

基本的にこちらの記事を参考にさせていただきました。ありがとうございました。
[Mac上でDocker起動だけVagrant内で行い開発作業はすべてホスト側でするための手順](https://qiita.com/keik/items/1745f0726487760fb05f)

# 環境
・ macOS Catalina ver10.15.5
・ プロセッサ 2.6GHz 6コア Intel Corei7
・ メモリ 16GB 2400 MHz DDR4
・ ストレージ500GB

# 手順
## VirtualBoxのインストール
https://www.virtualbox.org/wiki/Downloads

## Vagrantのインストール
http://www.vagrantup.com/

## Vagrant init
作業用のディレクトリを作成し、vagrant init を行う 

```
$ mikdir -p ~/sample_vagrant_docker
$ cd ~/sample_vagrant_docker
$ vagrant init centos/7
```

## vagrant-disksize プラグインを使って VM のディスク容量を増やす
VMの容量に不安があるので、あらかじめ増やすために [vagrant-disksize](https://github.com/sprotheroe/vagrant-disksize) プラグインをインストールする。

```
$ vagrant plugin install vagrant-disksize
```

## Vagrantfile の編集
vagrant init に成功するとVagrantfileが作成されるので編集する

```
Vagrant.configure("2") do |config|
  config.vm.box = "centos/7"
  # プラグインのvagrant-disksize をインストールしておく
  config.disksize.size = '100GB'
  # メモリを増やしておく
  config.vm.provider "virtualbox" do |v|
    v.memory = 4096
    v.cpus = 2
  end

  # VM 上で初めから Docker を使えるようにしておく
  config.vm.provision "docker"
  # ホスト側にポートフォワーディングして web の画面をみれたりデータベースアクセスできたりするようにしておく
  # guestのポートは適宜変更してください
  config.vm.network "private_network", ip: "172.12.8.150"
  config.vm.network "forwarded_port", host: 4000, guest: 3000 # Web用
  config.vm.network "forwarded_port", host: 4306, guest: 27017 # DB用

  # ホスト側の docker-compose.yml などのファイルを VM ないで参照するために共有しておく
  # docker-compose.ymlなどのファイルはあらかじめ /Users/xxx/sample_vagrant_docker/ に置いておく
  config.vm.synced_folder "/Users/xxx/sample_vagrant_docker/", "/home/vagrant/work", type: "nfs"

end
```

## vagrant を立ち上げる

```
$ vagrant up
$ vagrant ssh
[vagrant@localhost ~]$
```

## docker-compose のインストール
https://github.com/docker/compose/releases を参考にdocker-composeをVM環境にインストール

```
[vagrant@localhost ~]$ sudo curl -L https://github.com/docker/compose/releases/download/1.26.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
[vagrant@localhost ~]$ sudo chmod +x /usr/local/bin/docker-compose
```

## dockerコンテナを起動する

```
[vagrant@localhost ~]$ cd work
[vagrant@localhost my-project]$ docker-compose up -d
```

自分の環境の場合は未圧縮のDBのダンプファイルがあった関係で以下のエラーが発生したので、対象のファイル群を圧縮したら無事にdocker-compose up できた

```
ERROR: Error processing tar file(exit status 1): write /docker-conf/dump/mongo_dump/simulize_development/user_holding_assets.bson: no space left on device
```

## 適宜
これで環境はできたので、あとはDBの入れ替えなり必要な作業をvagrant内で行ってください

# 参考
[Vagrant入門から実践まで](https://qiita.com/daichi87gi/items/d5da33c76295ee32a735)
[Vagrantfileに一行書くだけでVMのディスク容量を増やす方法](https://qiita.com/yut_h1979/items/c84c490053877beee5c1)
【学習メモ】Rails Bootstrapをどこでインポートさせる？

#目次
0.背景
1.どんなロジックでSCSS、JavaScriptが反映されるのか
2.SCSSファイルから別のSCSSファイルをインポートするには
3.参考

#0.背景
ポートフォリオ実装する際に、Viewの実装にてこずっていましたが、ふと「何気なく触っているRailsのSCSS、JavaScriptって、どんな仕組みで反映されているんだっけ？？」ということで調査開始。

#1.どんなロジックでSCSS、JavaScriptが反映されるのか
【結論】
SCSS:``application.scss``
JavaScript:``application.js``

で読み込まれる。

【具体的には】

```erb:application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>TTManager</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= stylesheet_link_tag    'application', media: 'all'%>
    <%= javascript_include_tag 'application' %>
  </head>
  <body>
  <%= yield %>
</body>
</html>

```

この2つの中のこちら。

```
    <%= stylesheet_link_tag    'application', media: 'all'%>
    <%= javascript_include_tag 'application' %>
```


#2.SCSSファイルから別のSCSSファイルをインポートするには

【結論】
SCSS の ``@import`` ディレクティブを使用すると、SCSS ファイルから別の SCSS ファイルをインポートすることができます。


【具体的な内容】

```scss:application.scss
@import "bootstrap";

[SCSSでスタイルシートを調整したいものを記述]
```

```scss
@import "colors.scss";  // 拡張子は省略可能
main {
  color: $main-color;
}
```

#3.参考

[SCSS ファイルから別の SCSS ファイルをインポートする (@import)](https://maku77.github.io/sass/import.html)
GitHubでフォーク(Fork)した複数のrepositoryを同期(sync)するスクリプト

# 前提条件
スクリプトファイルを保存したディレクトリのサブディレクトリとしてクローン(`git clone`)したディレクトリが存在している。

# リポジトリのリスト
以下の内容のテキストファイルを `githubrepos.txt` で保存する。

```text
Aerial master
Pi_Servo_Hat master
RPi_Cam_Web_Interface master
RPi_PanTilt_Camera_Kit master
tensorflow/docs-l10n master
covid19 development
covid19-saitama development
aiyprojects-raspbian aiyprojects
```

# 同期スクリプト
以下の内容の bash　スクリプトファイルを `sync_upstream.sh` で保存する。

```bash
#!/usr/bin/env bash

sync_upstream()
{
  cd $1
  pwd
  # echo $2
  git fetch upstream
  git merge upstream/$2
  git push
  cd -
}

while read repo default
do
  sync_upstream $repo $default
done < githubrepos.txt
```

## 実行属性の付加
次のコマンドを実行し `sync_upstream.sh` に実行属性を付ける。

```shell
chmod u+x sync_upstream.sh
```

# 同期の実行
次のコマンドを実行すれば、同期が開始する。

```shell
./sync_upstream.sh
```
アイコンを特徴で検索できるアプリ Let's search for Iconをリリースした

![スクリーンショット 2020-06-14 12.21 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409192/1e70fd42-9e67-05be-42c8-ebe8c8e134cc.png)

[Let's search for Icon -アイコンを特徴で検索しよう！-](https://icon-search-app.web.app/)

# このアプリについて
Let's search for IconはマテリアルアイコンとFontAwesomeアイコンを特徴で探せるアプリです。
「いいね」「矢印」「人」のような特徴で検索してみてください。


# 作ったきっかけ
　例えば、♡(ハート)のアイコンが欲しかったとして、マテリアルアイコンのページでハートと検索しました。しかしながら、私が欲しい「ハート」アイコンの正しい名前は「favorite」なので検索に引っかからない。そうなると、1000個以上あるアイコン一覧から目視で探し出さなければなりません。その手間を省くアイコン検索アプリが必要だったので、このアイコンを特徴で検索できるLet's search for Iconアプリを作成しました。

# 誰に向けて作ったか
アプリやウェブサイトを作るエンジニアやデザイナーに向けてつくりました。このアプリを使って時短してください。

# 技術
### フロントエンド
react + hooks + redux + typescriptの構成で組ました。
flutterと違って、react + jsだったり、hooksを使わなかったり、様々なパターンのサンプルがあり苦労しました。


### サーバーサイド
firebaseのhostingとfirestore、analysisを使用
やはりfirebaseは簡単でいいですね。
analyticsは一行で使えちゃいますし、firestoreもたった３行です。

``` js:firebaseConfig.ts
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: ',
  messagingSenderId: '',
  appId: '',
  measurementId: '',
};

export default firebaseConfig;
```

``` js:index.tsx
firebase.initializeApp(firebaseConfig);
firebase.analytics();
```

``` js:firestore.ts
const db = firebase.firestore();
const dbPath = db.collection(path);
dbPath.add({ word, timeStamp });
```
# 最後に
検索すればするほど情報が蓄積されて、特徴検索の精度が高くなっていきます。どんどん検索してください。
railsで数値を３桁で区切る。「delimited」メソッドで解決

数字を３桁で区切る方法を解決しましたので備忘録として。
例：1000　→　1,000

#仕様
Rails 5.1.7
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

#やりたいこと
productsテーブルのpriceカラムを表示させたいです。
↓productsテーブル
<img width="515" alt="EX-IT.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614054/6f54ade9-dd55-4971-b6cf-8f7f7d81a489.png">

#「delimited」メソッドで解決
```php:sample.html
<%= product.price.to_s(:delimited)%>
#例 => 12,345,678
```

#「delimiter」オプションで任意の文字で桁を区切れます。
```php:sample.html
<%= product.price.to_s(:delimited, delimiter: "あ")%>
#例 => 12あ345あ678
Raspberry Pi で Apache2 を動かす

Raspberry Pi で Apache2 を動かします。

次の　PHP と Perl が動くようにします。

```php:test_a001.php
<?php
        foreach ($_SERVER as $key => $val)
                {
                echo $key . ' : ' . $val . '<br />';
                }
?>
```

```pl:hello.pl
#! /usr/bin/perl
#
print "Content-type: text/html\n\n";
print "<html>\n";
print "<head>\n";
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n";
print "<title>Hello by Perl</title>\n";
print "</head>\n";
print "<body>\n";
print "Hello<p />\n";
print "こんにちは<p />\n";
print "Jun/16/2020<p />\n";
print "</body>\n";
print "</html>\n";
```

Apache2 のインストール

```bash
sudo apt install apache2
```

インストールしただけで起動します。
状態の確認

```bash
sudo systemctl status apache2
```

ブラウザーでアクセスすると、
　/var/www/html/index.html　が表示されます。
![apache2_jun16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0545af49-5535-4776-d658-f5fb4bc72037.png)


PHP をインストール


```bash
sudo apt install php php-cli php-curl
```

PHP のバージョンの確認

```text
$ php --version
PHP 7.3.27-1~deb10u1 (cli) (built: Feb 13 2021 16:31:40) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.27, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.27-1~deb10u1, Copyright (c) 1999-2018, by Zend Technologies
```

ブラウザーでアクセスすれば、次のように表示されます。
![php_jun1602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0408812d-0330-d937-0a05-797ba86bacb0.png)



Perl の設定
バージョンの確認

```text
$ perl --version

This is perl 5, version 28, subversion 1 (v5.28.1) built for arm-linux-gnueabihf-thread-multi-64int
(with 61 registered patches, see perl -V for more detail)

Copyright 1987-2018, Larry Wall

Perl may be copied only under the terms of either the Artistic License or the
GNU General Public License, which may be found in the Perl 5 source kit.

Complete documentation for Perl, including FAQ lists, should be found on
this system using "man perl" or "perldoc perl".  If you have access to the
Internet, point your browser at http://www.perl.org/, the Perl Home Page.
```

CGI を有効にする

```bash
sudo a2enmod cgid
sudo systemctl restart apache2
```

/etc/apache2/apache2.conf　に次を加える

```text:/etc/apache2/apache2.conf
（省略）
AddHandler cgi-script .cgi .pl
```

ページにアクセスすると、

```text
Forbidden

You don't have permission to access this resource.
Apache/2.4.38 (Raspbian) Server at tulip.local Port 80
```

/etc/apache2/apache2.conf　の設定の変更

```text:/etc/apache2/apache2.conf
<Directory /var/www/>
        Options Indexes FollowSymLinks ExecCGI
        AllowOverride None
        Require all granted
</Directory>
```

ブラウザーからアクセス
![perl_jun16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/af8e6b04-82bc-c9a8-1b66-04eb76035611.png)

次のバージョンで確認しました。

```text
$ uname -a
Linux violet 5.10.17-v7l+ #1414 SMP Fri Apr 30 13:20:47 BST 2021 armv7l GNU/Linux
```
Chrome拡張を限定公開しても追加ボタンが有効にならないとき

単純にURLが管理者専用のURLになっていると思われる。

```
// wrong
https://chrome.google.com/webstore/detail/xxx/publish-review?authuser=0&hl=ja

// correct
https://chrome.google.com/webstore/detail/xxx/

// xxx is the item ID
```

限定公開だとストアで検索に引っかからないし、ダッシュボードの`Chrome ウェブストアのページに移動`から行く画面では追加できないURLだからややこしい！
Goのetcd clientを使っているときにundefined: balancer.PickOptionsエラーが発生する場合の解消方法

## エラー内容

`undefined: balancer.PickOptions`以外にも、`undefined: resolver.BuildOption`や、`undefined: ResolveNowOption`も同時に発生する場合がある。

```bash
# github.com/coreos/etcd/clientv3/balancer/picker
/home/reoring/go/pkg/mod/github.com/coreos/etcd@v3.3.22+incompatible/clientv3/balancer/picker/err.go:37:44: undefined: balancer.PickOptions
/home/reoring/go/pkg/mod/github.com/coreos/etcd@v3.3.22+incompatible/clientv3/balancer/picker/roundrobin_balanced.go:55:54: undefined: balancer.PickOptions
# github.com/coreos/etcd/clientv3/balancer/resolver/endpoint
/home/reoring/go/pkg/mod/github.com/coreos/etcd@v3.3.22+incompatible/clientv3/balancer/resolver/endpoint/endpoint.go:114:78: undefined: resolver.BuildOption
/home/reoring/go/pkg/mod/github.com/coreos/etcd@v3.3.22+incompatible/clientv3/balancer/resolver/endpoint/endpoint.go:182:31: undefined: resolver.ResolveNowOption
```

## 解決方法

etcdのバージョンを落とす。この場合は3.3.13まで落とすと上記エラーは発生しない。

```bash
go get go.etcd.io/etcd@v3.3.13+incompatible
go get github.com/coreos/etcd@v3.3.13+incompatible
```
CSS-in-JSを使うとどれくらいパフォーマンスに影響するか計測してみた。

InfoQの[記事](https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/)を読んでいるとCSS-in-JSに関して以下のように書いてありました。

> スタイル付けされたCSS-in-JS実装は、スタイル付けされていないバージョンと比べて50%以上もレンダリングに時間がかかるように見えた。

CSS-in-JSはパフォーマンスが落ちるとよく聞くものの、実際どうなのか知りたかったので計測してみました。

## 計測方法

CSS-in-JSを使って作成したコンポーネントとそうではないコンポーネントのレンダリングに掛かる時間を計測して比較します。
CSS-in-JSのライブラリはemotionとstyled-componentsを採用しました。

計測には以下のコードを使用します。
Appをレンダリングすると、画面上部にボタン, その下に`NormalDiv`コンポーネントが`NUM`の数だけ表示されます。
ボタンを押下すると`NormalDiv`コンポーネントが再レンダリングされます。
再レンダリングが終わるとボタンを押下してから再レンダリングまでにかかった時間を計測してコンソールに表示します。

```tsx:計測用コード
import React from 'react';
import NormalDiv from './NormalDiv';

const NUM = 2 ** 8 // 表示するコンポーネント数

const TestFC: React.FC<{randomValue: number}> = ({ randomValue }) => {
  return <>
    {new Array(NUM).fill(null).map((__, i) => (
      <NormalDiv key={i}>Hello World {randomValue}</NormalDiv>
    ))}
  </>
}

let start: number;

const App = () => {
  const [randomValue, setRandomValue] = React.useState(0);

  React.useLayoutEffect(() => {
    const end = new Date().getTime() - start
    console.info(end)
  })

  return (
    <React.Fragment>
      <button onClick={() => {
        start = new Date().getTime();
        setRandomValue(Math.random());
      }}>Force Rerender</button>
      <TestFC randomValue={randomValue} />
    </React.Fragment>
  );
};
```

`NormalDiv`コンポーネントはCSS-in-JSを使わないもの、emotionを使ったもの、styled-componentsを使ったものの3種類を用意して、レンダリングに掛かる時間をそれぞれ計測して比較します。

用意した`NormalDiv`コンポーネントのコードは以下のとおりです。

```tsx:CSS-in-JSを使わない場合
import React from 'react';

const NormalDiv = (props: any) => <div {...props} />
```

```tsx:emotion
import styled from '@emotion/styled'

const NormalDiv = styled.div``;
```

```tsx:styled-components
import styled from 'styled-components'

const NormalDiv = styled.div``;
```

## 結果

| 表示するコンポーネント数 | 256 | 512 | 1024 | 2048 | 4096 | 8192 |
|:--|--:|--:|--:|--:|--:|--:|
| CSS-in-JS未使用 [ms] | 74 | 122 | 252 | 516 | 939 | 2028 |
| emotion [ms] | 115 | 241 | 367 | 707 | 1506 | 2748 |
| styled-components [ms] | 154 | 231 | 361 | 721 | 1531 | 2830 |

CSS-in-JS未使用の場合と比較してemotion, styled-componentsは +30% ~ +90% 程度レンダリングに時間がかかった。

emotionとstyled-componentsの間ではレンダリング時間に大きな差はなかった。

## まとめ

InfoQの[記事](https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/)のとおり、たしかにCSS-in-JSを使うとレンダリングに時間がかかるようになりました。

私は名前をつけるために`const Article = styled.div`のような変数化を多用していました。
しかし、パフォーマンスが悪化するのでなんでもかんでも`styled`を使って変数化するのは控えようと思います。
PowershellをPwsh(Powershell 7)に置き換える

# はじめに

Powershellの現在の最新バージョンは、7.0.2です。
しかし、右クリックで.ps1ファイルを実行すると古いバージョンが実行されてしまいます。
そこで、新しいバージョンで動かせるようにレジストリを変更しました。

# Pwshに変更する

Pwsh.exeに変更しつつ、"-NoExit"を渡しています。
また、管理者として実行も追加しています。

```reg:toPwsh.reg
Windows Registry Editor Version 5.00

; Powershell to Pwsh (Powershell7)
[-HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell]

[-HKEY_CLASSES_ROOT\Directory\shell\Powershell]

[-HKEY_CLASSES_ROOT\Drive\shell\Powershell]

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\DefaultIcon]
@="\"C:\\Program Files\\PowerShell\\7\\pwsh.exe\",-32512"

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\0\Command]
@="\"C:\\Program Files\\PowerShell\\7\\pwsh.exe\" \"-NoExit\" \"-Command\" \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }; & '%1'\""

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\runas\Command]
@="\"C:\\Program Files\\PowerShell\\7\\pwsh.exe\" \"-NoExit\" \"-Command\" \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }; & '%1'\""
```

# Powershellに戻す

Powershell.exeに変更しつつ、"-NoExit"を渡さなくしています。
管理者として実行は削除していません。

```reg:toPowershell.reg
Windows Registry Editor Version 5.00

; Resotre powhershell
[HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell\command]
@="powershell.exe -noexit -command Set-Location -literalPath '%V'"

[HKEY_CLASSES_ROOT\Directory\shell\Powershell\command]
@="powershell.exe -noexit -command Set-Location -literalPath '%V'"

[HKEY_CLASSES_ROOT\Drive\shell\Powershell\command]
@="powershell.exe -noexit -command Set-Location -literalPath '%V'"

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\DefaultIcon]
@="\"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell_ise.exe\",1"

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\0\Command]
@="\"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" \"-Command\" \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }; & '%1'\""

[HKEY_CLASSES_ROOT\Microsoft.PowerShellScript.1\Shell\runas\Command]
@="\"C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe\" \"-Command\" \"if((Get-ExecutionPolicy ) -ne 'AllSigned') { Set-ExecutionPolicy -Scope Process Bypass }; & '%1'\""
```
htmlでおみくじアプリ作成

dotinsallでおみくじアプリ作成を勉強したので学んだことをまとめておこう。

●ランダムな数を生成するMath.random()を使って条件分岐が基本。
結果の表示方法は①switch文、②result = []としてresult[n]のように配列でまとめる。
③if文で確率ごとに条件分け、がある。

特に配列で取得するやり方は今後かなり使えそう。実際のアプリで配列を初めて使って感動した。

●ボタンを押した感を出すには下部の影とmargin-topの操作で可能

●cursor: pointer　にすると手のようになってくれる

●opacity　は透明性で０だと完全に透明

以下、コード例

htmlコード

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div id="btn">?</div>


    <script src="js/main.js"></script>

  </body>
</html>
```

CSSコード

```css
body{
  background: #efefef;
}

#btn{
  width: 200px;
  height: 200px;
  background: #ef454a;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: #fff;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  /* cursorで矢印からポインターに変わる */
  box-shadow: 0 10px 0 #d1483e;
  /* 下に影をつける */
  user-select: none;
  /* 連打しても選択なし */
}

#btn:hover{
  opacity: 0.8;
  /* opacityとは透明性　０で完全に透明 */
}

#btn:active{
  box-shadow: 0 5px 0 #d1483e;
  margin-top: 35px;
  /* ボタンを押してる感を出す。下の影を小さくし、元の丸を同じ分だけ下げる */

}
```

javascriptコード

```javascript
'use strict';

{
  
  const btn = document.getElementById('btn');
  btn.addEventListener('click', ()=>{
    const n = Math.random();
    //if文で確率を条件わけ
    if(n < 0.05){ //５％
      btn.textContent = '大吉'
    }else if(n < 0.2){
      btn.textContent = '中吉'
    }else{
      btn.textContent = '凶'
    }
    })
  }
   //配列でまとめる方法
   const results = ['大吉','大吉','大吉','大吉','凶'] 
   const n = Math.floor(Math.random()*4);
   // 要素数を記入してたら間違えやすいため、lengthで書いておく
   const n = Math.floor(Math.random()*results.length);
   btn.textContent = results[n];
    // btn.textContent = results[Math.floor(Math.random()*results.length)];
    //直接配列のインデックスにいれることができる
    //結果を配列に入れて結果を表示
    //switchを使うよりすっきり！！

    switch(n){
      case 0:
        btn.textContent = '大吉'
        break;
      case 1:
        btn.textContent = '中吉'
        break;
      case 2:
        btn.textContent = '凶'
        break;
    }
})
}
```
BOX Captureでアップロードした写真から位置情報を取り出してみる


Boxのスマホアプリである、[Box Capture](https://apps.apple.com/us/app/box-capture/id1040325411)で写真をBoxにアップロードしたあと、位置情報を取り出すことができたので、その手順をメモ。

### TL;DR
Box Captureでアップロードした写真のメタデータは、`templateKey:'boxCaptureV1', scope: 'global'` で取り出せる。


### 事前準備

Box Captureで、位置情報をBoxにアップロードさせるには、スマホアプリのBox Captureの設定を開き、「場所メタデータの保存」をONにする

### Boxにアップロードして確認

Box Captureから、Boxに写真を撮ってアップロードしてみると、メタデータに位置情報が入っているのが見える。
これをとりだしたい。

![スクリーンショット 2020-06-16 6.35.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45767/1da3c9de-370f-2625-ae8d-cd8866e529a4.png)



### それっぽいメタデータテンプレートを探す

globalのメタデータテンプレートを取り出してみると、こんな感じのやつがみつかった。
これっぽい。

```js
  const templates = await client.metadata.getTemplates(
    client.metadata.scopes.GLOBAL
  );
  console.log(templates);
  /*
    [
      {
      id: '17816951-704b-4d55-ae1e-f8f1bd8078ba',
      type: 'metadata_template',
      templateKey: 'boxCaptureV1',
      scope: 'global',
      displayName: 'Box Capture',
      hidden: false,
      copyInstanceOnItemCopy: false,
      fields: [Array]
      },
    ]
   */
```

### ファイルからメタデータテンプレートを指定して情報を取り出す

"boxCaptureV1"をキーにして探すと、location情報を含む、メタデータが取得できた。

```js

  const metadata = await client.files.getMetadata(
    FILEID,
    client.metadata.scopes.GLOBAL,
    "boxCaptureV1"
  );
  console.log(metadata);
  /*
  {
      colorSpace: '',
      camera: 'Apple',
      location: '35.6XXXXXXXXXX334 N, 139.7XXXXXXXXXX67 E',
      exposure: 'Mode: Auto, Program: Program Normal, Time: 0.017 sec, FNumber: 1.8',
      flash: 'Off',
      captureTimestamp: '2020-06-16 05:58',
      resolution: '4032 x 3024',
      lens: 'iPhone XR back camera 4.25mm f/1.8',
      '$type': 'boxCaptureV1-6ee0a197-59b4-41da-8683-7d89c11e62be',
      '$parent': 'file_679265666593',
      '$id': '3e99db55-1762-42d7-a30b-d2fbf2cf3e58',
      '$version': 0,
      '$typeVersion': 6,
      '$template': 'boxCaptureV1',
      '$scope': 'global',
      '$canEdit': true
  }
  */
```
VAEを使った半教師なしクラスタリングをやってみた

[前回の記事](https://qiita.com/kogepan102/items/8b311c5d5fc02559e3e3) で書き足りなかったことを少し書くだけです．
ラベルというのは人間が勝手にきめたものなので，教師なしでラベルがきれいにわかれるなんてことは，MNISTならまだしも実際には難しいと思います．
というわけで，前回の記事に100個だけラベルを教えた場合にちゃんとクラスタリングされるのかをみてみたいと思います．

### モデル

以下が今回のモデルです．
なにが変わったかお気づきでしょうか．
右の推論モデルのyが半分だけグレーになっただけです．
つまり，$q_\phi(y|x)$を教師ありで少しサンプルを使って学習するということです．
もう一つは，$q_\phi(z|x,y)$と$p_\theta(x|z)$使って再構成する項も教師ありサンプルを使って学習に使えそうです．


<img width="603" alt="スクリーンショット 2020-06-16 4.17.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108994/54e02127-6c2c-b50c-282a-62e72c4e13d2.png">


### 前回のコードとの差分

コードは雑ですが，1batch分(100個)だけのデータを教師ありとして利用しました．
ロスにクロスエントロピー項を追加し，再構成誤差の項も教師ありサンプルを使って学習します．
alphaの値は自由ですがとりあえず1000にしました．

```python
x_label, y_label = iter(train_loader).next() 
x_label = x_label.to(device)
y_label = y_label.to(device)

# クロスエントロピー項
pred = qy_x(x_label)
Xent = F.cross_entropy(pred, y_label, reduction="sum")

# 再構性項
y_label_onehot = torch.eye(K)[y_label].to(device)
z_label = qz_xy(x_label, y_label_onehot)
recon_x_label = px_z(z_label)
recon_loss_label = F.binary_cross_entropy(recon_x_label, x_label, reduction="sum")

# ロスを追加
recon_loss += recon_loss_label*100/60000
loss = recon_loss + kl_cat + kl_gauss*beta + Xent*alpha


```

### 結果

#### 訓練の様子
 
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108994/126db7bd-8f55-b362-3ba4-6fe5733b60af.png)

#### yごとのサンプリング

前回の実験よりも混ざっている数字が少ない
![download-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108994/8003cc4f-af2e-e8d8-761f-2b223bd84cbf.png)

#### テストデータの潜在変数における配置

前回の実験よりもいい感じにデータがいい感じにわかれている
![download-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108994/09cf9214-baf8-5834-ee9a-48cbf54bc41b.png)

#### zの事前分布の可視化

zの事前分布$p_\theta(z|y)$の可視化

![download-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108994/c665db00-b712-7ad2-902c-2f5f5242c9fb.png)
WebサイトとWebアプリケーションについて

# プログラミングの勉強日記
2020年6月16日　Progate Lv.111
WebサイトとWebアプリケーションの違いをまとめる。

##Webとは
　Webはインターネット上にある様々な情報をみる仕組みである。この情報は<font color=orange>サーバー</font>というコンピュータに保存されている。サーバーの情報を取得するコンピュータを<font color=orange>クライアント</font>という。

　クライアントの要求（<font color=orange>リクエスト</font>）をもとにサーバーが応答（<font color=orange>レスポンス</font>）する流れで情報をやり取りしている。具体的にはブラウザがサーバーにリクエストを送り、サーバーがURL（サーバーの場所とサーバーの中の情報の場所を示しているもの）に応じてHTMLをブラウザに返すことで、ブラウザにHTMLが表示される。

##Webサイト
　HTMLだけで作ったWebサイトは、あらかじめ用意された情報を表示することしかできない。HTMLだけでなく、サーバーやデータベースを組み合わせることで、より高度な機能を持つことができ、これをWebアプリを作成できる。

##webアプリケーション
　Webの仕組みを使ったアプリのことであり、ブラウザから使うアプリである。（スマホで使うアプリとは異なる）

　ブラウザ上で活躍する言語：HTML, CSS, JavaScript
　サーバー上で活躍する言語：JavaScript(Node.js), Ruby, Python, PHP

　ブラウザ上で活躍する言語は、ブラウザに表示される見た目を作ったり、動きをつけたりすることができる。これらをまとめてクライアントサイド言語やフロントエンド言語などという。

　サーバー上で活躍する言語は、サーバーで行う処理を記述する。サーバーサイド言語やバックエンド言語などという。
SQLでのデータを追加、更新、削除

# プログラミングの勉強日記
2020年6月16日　Progate Lv.116
SQLⅣ

##INSERT
　テーブルにレコードを挿入したいときに使う。

```sql
INSERT INTO students (id, name, course)
VALUES (3, "Kate", "Java");
```

<img width="670" alt="SQL4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/c8d801df-ee92-10d0-47ca-8bf673b82091.png">

##AUTO INCREMENT
　「自動で増加する」という意味で、データが作成されるときに自動で値が割り当てられる。

```sql
INSERT INTO students (name, course)
VALUES("Kate", "Java");
```

<img width="670" alt="SQL5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/753eddfe-ef34-0f43-d4bc-4941f340f577.png">


##UPDATE
　データを更新したいときに使う。複数変更したいカラムがある場合、`,`（コンマ）で区切る。
<font color=blue>注意点
　WHEREで指定しないとカラム内のすべてのデータが更新してしまう。
　UPDATE実行後はデータを戻せない。（実行前にSELECTを使って確認する）
</font>

```sql
UPDATE students
SET name="Johdan", course="HTML"
WHERE id=2;
```
<img width="670" alt="SQL6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/aca94e14-8e72-a24f-b312-b54d6f998226.png">


##DELETE
 レコードを削除する。UPDATE同様に注意点がある。
<font color=blue>注意点
　WHEREで指定しないとカラム内のすべてのデータが削除される。
　DELETE実行後はデータを戻せない。（実行前にSELECTを使って確認する）
</font>

```sql
DELETE FROM students
WHERE id=2;
```

##SQLのコメントアウト
　SQL文でもコメントを入れることができる。`--`もしくは`/* */`を使う。

```sql
-- コメント
/* コメント */
```