OmniAICreator/Qiita-1.07M huggingface dataset:
propsと$emitでデータを引き渡す

コンポーネント間の基本的なデータの受け渡し方法をまとめます。

```zsh
$ vue create learn-props-emit
$ cd learn-props-emit
$ npm run serve
$ touch src/components/Child.vue
```

##props
親→子に値を渡す時にはpropを使います。

```src/components/Child.vue
<template>
  <div>
    <p>{{ greet }}</p>
  </div>
</template>

<script>
export default {
  props: {
    greet: {
     type: String,
     default: 'hogehoge'
    }
  }
}
</script>
```
```src/App.vue
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <Child greet='Hello with props'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  components: {
    Child
  }
}
</script>
```

###ポイント
- 子コンポーネント内にpropsという属性を定義し、propの名前と型を定義する
- 親コンポーネント内で子コンポーネントを使う時に、prop名と値を受け渡す

##$emit
子→親に値を渡す時には$emitを使います。結構めんどいです。

```src/components/Child.vue
<template>
  <div>
    <p>child_num: {{ child_num }}</p>
    <button @click='send'>親に値を渡す</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      child_num: 0
    };
  },
  methods: {
    send() {
      this.$emit("my-click", this.child_num);
    }
  }
};
</script>
```
```vue:src/App.vue
# パターン1:受け取った値をそのまま使う場合は$eventで受け取る
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <p>parent_num: {{ parent_num }}</p>
    <Child @my-click='parent_num = $event'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  }
}
</script>
```
```vue:src/App.vue
# パターン2. 受け取った値を関数で使う場合は、適当な変数(value)を定義するとそこに値が入る
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <p>parent_num: {{ parent_num }}</p>
    <Child @my-click='reflectNum'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  },
  methods: {
    reflectNum(value) {
      this.parent_num = value
    }
  }
}
</script>
```

###ポイント
- 子コンポーネント内で、`$emit`でカスタムイベント(clickとかchange的な使われ方をするやつ)を作る
    - 第２引数に送信するデータを渡す
- 親コンポーネント内で子コンポーネントを呼び出す時に、作成したカスタムイベントを付与する
- `$event`や引数で送信されたデータを受け取る
【Rails】 コントローラー、モデルの削除の仕方

#コントローラーとモデルの削除ってどうするの？
Railsでコントローラーを作ったのはいいけど消す時は？ってなったのでこの機会にいつもお世話になっているQiitaの先人様たちと同様に投稿していこうと思う。初投稿だからダメな所あっても優しくしてクレメンスb
##コントローラー、モデルの作成
まぁコントローラー、モデルを作るのはみんな知っていると思うけど知らない人も見るかもしれないので簡単に

```
rails g controller コントローラー名
```

```
rails g model モデル名
```

では消す時は？

##コントローラー、モデルの削除
ここからが本題であまり消すことのなかったコントローラーを初めて消したいと思って調べました。
で、一番上に出てきたサイトを参考にやってみました。
参考サイト→[リンク](https://yuu.1000quu.com/delete_the_model_and_controller_in_rails)

```
rails destroy controller コントローラー名
```

はい、destroyです。

ただこのサイトでも書いているのですがdに省略出来ないの？ってなって自分で試してみたら出来ました。2015年の記事では出来なかったらしいですけどRailsもよくなっているわけです。

```
rails d controller コントローラー名
```

作って消すだけなら10秒あれば出来るので知らなかった方は試してみてください。

というわけで今回はここらへんで
[Matlab] 感染症SIRモデルを解いてみる。

##ウイルス感染をシミュレーション→「SIRモデル」
現在日本では、コロナウイルスの感染が広がっている。ウイルス感染のシミュレーションを行うのに、「SIRモデル」というのがよく使用されるそうだ。今回は、他の方の資料を参考にMatlabを用いてSIRモデルを解いてみたのでまとめてみた。

###参考にさせてもらったサイト
[荻田 武史、捕食・被食関係のシミュレーション](http://www.math.twcu.ac.jp/ogita/lec/sim_lotka.pdf)
[荻田 武史、感染症流行のシミュレーション](http://www.math.twcu.ac.jp/ogita/lec/sim_infection.pdf#search='SIR%E3%83%A2%E3%83%87%E3%83%AB+%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0')
[捕食者と被食者の方程式の求解](https://jp.mathworks.com/help/matlab/math/numerical-integration-of-differential-equations.html)


###SIRモデルとは
**S :未感染者の人数(Susceptible)**
**I  :感染者の人数(Infected)**
**R :亡くなったまたは回復した人数(Recovered)**

全人口をS、I、Rの三つに分けて、初期条件と適切なパラメーターを選択して微分方程式を解くことで、時間とともに変化する感染人数をシミュレーションできる。
ここでS、I、Rは時間tの関数である。

###微分方程式
```math
\frac{dS(t)}{dt} = -βS(t)I(t)\\
\qquad\quad\frac{dI(t)}{dt}= βS(t)I(t)-γI(t)\\
\frac{dR(t)}{dt}= γI(t)\qquad\\
\\
\ β：感染率[1/日]\\
\ γ：回復率[1/日]\\
```
これを解くことで、シミュレーションすることができる。

###プログラミング（Matlab）
「SIR_sim.m」という名前でファイルを作成する。

```matlab

function dy = SIR_sim(t,y)
a = 0.001; % β感染率[1/日]
b = 0.5; % γ回復率（隔離率）[1/日]
dy = zeros(3,1);
dy(1) = -a*y(1)*y(2);
dy(2) = a*y(1)*y(2)-b*y(2); 
dy(3) = b*y(2);

```
###実行
Matlabのコマンドラインから次のコマンドを実行する。

```
>> t = [0,200]
>> y0= [1000;1;0]
>> [t,y]=ode45('SIR_sim',t,y0);
>> plot(t,y)
>> xlabel('時間 (日)')
>> ylabel('人口 (人)')
>> legend('S','I','R')
```
![SIRシミュレーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613597/f8bf21a8-9ca4-172f-ac5f-ac160a80a84d.png)

プログラム内の *β*、*γ*、時間を表す *t*、初期条件 *y0*を変更することでシミュレーションすることが可能である。今回実行した値は適当に決めた値で根拠はない。

###おわりに
Matlabを用いてSIRモデルを簡単にシミュレーションすることができた。
dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib となった時のメモ

## メモ

`dyld: Library not loaded: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib`
となってしまってコマンドが動作しない時（私の場合はmongoexportが動かなかった）の対処法
どうやらOpenSSLのバージョンの問題らしい
久々に `brew upgrade` をした後に発生

[issue](https://github.com/kelaberetiv/TagUI/issues/86)
> This error is happening because macOS decided to drop OpenSSL and switched to LibreSSL. Furthermore, macOS Homebrew switched from OpenSSL v.1.0 to v1.1, breaking many other apps that are dependent on OpenSSL v1.0. The solution below may or may not work for other apps, be sure to check with their respective maintainers to confirm.

上記のissueにも解決方法は書いてあったが、opensslをuninstallしてビルド済みのものを入れ直すという様な方法だったので少し抵抗があり、他に無いか探してみた

[dyld-library-not-loaded-usr-local-opt-openssl-lib-libssl-1-0-0-dylib](https://stackoverflow.com/questions/59006602/dyld-library-not-loaded-usr-local-opt-openssl-lib-libssl-1-0-0-dylib)

上記のリンク内にもopensslのバージョンが1.0.2sやら1.0.2qやら出てくるが、自分の場合は1.0.2tだった

```shell
brew switch openssl 1.0.2t
```

上記のコマンドを実行して存在しないバージョンだと下記の様なエラーメッセージが表示されるので、そのバージョンを指定すれば良い様である

```shell
openssl's installed versions: 1.0.2t
```

以上で解決
MySQL基本

#はじめに
こちらではMySQLの基本操作を書いていきます。
複雑だったりレベルの高い操作を書くよりも今日インストールしたばっかりで何すればいいの？
みたいな人を対象にしようと思っております。

##環境
[VirtualBox](https://www.virtualbox.org/)
[Vagrant](https://www.vagrantup.com/)
[Cent0S7](https://www.centos.org/)
MySQL（Ver 8.0.19）



[こちらで構築の紹介をさせていただいてます参考にどうぞ](https://qiita.com/I_S-657/items/63528d09995138c9e46d)
[MySQL版](https://qiita.com/I_S-657/items/8e2eb94367c418000fd9)

##データベースって？
データベースとは・・・
ベースとなるデータの集合体・・・・といえば雑ですが・・・
つまりは情報の集まりですね。
なんの情報を扱うかは何をしたいかそれぞれちがいますが・・・

例：hogeさんhugaという人の情報があったとします

名前:hoge　　
年齢:16歳　　　
出身:東京　　　

名前:huga
年齢:27歳
出身:大阪

とします


|   　id　   |　名前　　 | 　　年齢　　 |　　 出身　　 |
|:-----------:|:-----------:|:------------:|:------------:|
|   1  |　hoge　　 | 　　16 　　 |　　 東京　　 |
|   2  |　huga　　 | 　　27　 　 |　　 大阪　　 |
|   3  |　piyo　　 | 　　38　 　 |　　 愛知　　 |

こういった情報の集まりがデータベースとなります

この情報を元に説明していきます。

基本的な操作ですが
CRUDを中心に説明したいと思います。

##CRUD（クラッド）って？
C -> Create(製作)
R -> Read(閲覧)
U -> Update（更新）
D -> Delete（削除）

の頭をとったものです。

##MySQLの操作
DB内容を操作するのはいいですがまずはDBそのものの操作を確認してみましょう。
書いて確認して〜みたいな流れでもいいですが読み返す時にまとまっている方が楽だと思うので。
さらっと要点だけ書いていきたいと思います。


ユーザの作成

```
create user [ユーザ名]@[ホスト名] identified by '[パスワード]';
```
権限付与

```
mysql> grant [権限] on [データベース名].* to [ユーザ名]@[ホスト名];
```


```
mysql> drop user [ユーザ名]@[ホスト名]
```
DBの確認

```
mysql>  show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
```
DBの作成

```
mysql> create database [任意のDB名];
```
名前変更

```
mysql> rename [変更したいデータベース名] to [新データベース名] ;
```
削除

```
mysql> drop database [削除したいデータベース名];
```

使用するデータベース選択

```
mysql> use [データベース名];
```
外部ファイルの読み込み

```
mysql> \. [ファイルパス]/[ファイル名].sql
```


##DBデーブル操作
こちらではDBの操作をみてみましょう
ここからはカラムとレコードを用意するの出会うがappdb.sqlというファイルを自分で作って操作しながら説明していきたいと思います。


```sql:appdb.sql
--テーブルの削除
drop table if exists db01;

--テーブルの作成
create table db01 (
　id int unsigned primary key auto_increment,
  name varchar(20),
  age int unsigned,
  from_ja varchar(20)
);

--レコードの追加
insert into db01(name,age,from_ja)values('hoge',18,'東京');

--レコードの追加（まとめて）
insert into db01(name,age,from_ja)values
 ('fuga',27,'大阪'),
 ('piyo',38,'愛知');

--テーブル内容表示
select * from db01;
```

実行結果

```
+-------+------+------+---------+
| 　id  | name | age  | from_ja |
+-------+------+------+---------+
|     1 | hoge |   18 | 東京    |
|     2 | fuga |   27 | 大阪    |
|     3 | piyo |   38 | 愛知    |
+-------+------+------+---------+
```

ここからはSQL上で説明していきます
テーブル情報の確認

```
mysql> desc [テーブル名]
```

抽出

```
mysql> select * from [テーブル名] where [抽出したい内容]
```

レコードの追加

```
mysql> insert into [テーブル名]([カラム名])values([データ]);
```

レコード更新

```
mysql> update [テーブル名] set [カラム名] = [データ] where [カラム名] = [データ];
```
レコードの削除

```
mysql> delete from [テーブル名] where [カラム名] = [データ];
```

カラムの追加

```
mysql> alter table [テーブル名] add column [カラム名] [型] after [カラム名];
```

カラムの更新

```
mysql> alter table [テーブル名] change [旧カラム名] [新カラム名] [型] 
```

カラムの削除

```
mysql> alter table [テーブル名] drop column [カラム名];
```

##そのた
DBでバックアップを取る事もあると思います。

```
$ mysqldump -u [ユーザ名]@[ホスト名] -p [DB名] > [ファイル名].sql
```

#まとめ
いかがだったでしょうかDBは奥が深いですが簡単にでも理解できていただいたら幸いです。
【Mac】VSCodeの不要な赤い下線(赤線)を消す方法

# VSCodeの不要な赤い下線(赤線)を消す方法
<img width="853" alt="スクリーンショット 2020-04-09 18.32.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/40def377-fe59-9cb9-c030-300e6f972e98.png">


VSCodeでコードを記述しているとスペル間違いではないのに不要な赤い下線がでてくるときがあります。すごく紛らわしくて混乱してしまいますし、見にくいので赤線を消す方法を紹介します^_^

## VSCodeの設定を変更する
<img width="853" alt="スクリーンショット 2020-04-09 18.33.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/12cdfe8e-1aa2-96e2-da32-b72e813e728f.png">
※MacOS バージョン10.14.6

まずは「Code」から「基本設定」次に「設定」の順番に進んでください。

<img width="853" alt="スクリーンショット 2020-04-09 18.33.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/5234b6c3-54a8-1c39-8dde-c1295b950759.png">

次に「設定の検索」に「**python.linting.enabled**」と検索してください。

<img width="853" alt="スクリーンショット 2020-04-09 18.33.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/a54c5609-6c22-c36d-1c3c-87b0982e737f.png">

こちらのチェック項目外してください。

<img width="853" alt="スクリーンショット 2020-04-09 18.33.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/60db0dde-490c-b6e5-4489-802ba4ced0b8.png">

すると先ほどまでの赤線を見事に消すことができました^_^

<img width="853" alt="スクリーンショット 2020-04-09 18.32.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/df74390c-4476-2489-63b5-7081925e7438.png">
PowerShell の -WhatIf と -Confirm 引数

# 概要

「[PowerShell の -Verbose と -Debug 引数](https://qiita.com/motoJinC25/items/c4aa6701c3ceb6ea3d2b)」記事の追加内容として WhatIf と Confirm 引数を加えてさらに便利な PowerShell スクリプトを作成してみます。
`CmdletBinding`を定義することでPowerShellコマンドレットのように機能させることができと前回記事に書きました。
そこから追加オプションを加えることで WhatIf と Confirm 引数も使えるようになります。

# 実装

cmdletbinding に SupportsShouldProcess 引数を定義しておきます。
ConfirmImpact は Confirm パラメータに対して確認レベルを制御するのに使います。デフォルト値は「Medium」です。

```powershell
[cmdletbinding(SupportsShouldProcess=$True, ConfirmImpact='Medium')]
Param()

If ($Pscmdlet.ShouldProcess("A", "B")) {
    Write-Host "コマンド実行"
}
```

## WhatIf パラメータ確認

変更する前に結果を確認するパラメータです。

```powershell
PS > .\powershell.ps1 
コマンド実行

PS > .\powershell.ps1 -WhatIf
WhatIf: 対象 "A" に対して操作 "B" を実行しています。
```

## Confirm パラメータ確認

コマンドレット実行前に確認を求めるパラメータです。

```powershell
PS > .\powershell.ps1 -Confirm
確認
この操作を実行しますか?
対象 "A" に対して操作 "B" を実行しています。
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "Y"): Y
コマンド実行

PS > .\powershell.ps1 -Confirm
確認
この操作を実行しますか?
対象 "A" に対して操作 "B" を実行しています。
[Y] はい(Y)  [A] すべて続行(A)  [N] いいえ(N)  [L] すべて無視(L)  [S] 中断(S)  [?] ヘルプ (既定値は "Y"): N

```
PHPでUndefinedIndex対策

PHPで、多階層の配列を使う時、UndefindIndexに悩まされることはありませんでしょうか？
そんな時使える関数を発明しました！（といっても、めちゃくちゃ簡単なコードですが）

```php
if (!function_exists('IFERROR')){
    function IFERROR($ary,$idx,$val='-'){
        if (is_string($idx) || is_numeric($idx) {
            return (isset($ary[$idx])) ? $ary[$idx] : $val;
        }else{
            foreach($idx as $i){
                if (!isset($ary[$i])){
                    return $val;
                }else{
                    $ary = $ary[$i];
                }
            }
            return $ary;
        }
    }
}
```

使い方

```php
$ary = ['abc'=>['x'=>'test','def'=>'test2']]; //こんな配列があったとして

// 階層順のindexを配列で　$ary['abc']['def'] のような場合
$idx = ['abc','def'];
IFERROR($ary,$idx,'-');  // indexがある場合、値を、ない場合"-"を返す

IFERROR($ary,['abc','efg'],0);  // => 0
IFERROR($ary,['abc','def'],0);  // => "test2"
```
Laravel blade基本

Laravelではbladeテンプレートを使用してviewを作成できます。
resources/viewsフォルダ以下にviewファイルを置き、拡張子をOOO.blade.phpにすることでbladeテンプレートとして扱えます。

# viewファイル読み込み
viewヘルパー関数を使うことでviewファイルの読み込みと変数の受け渡しを行うことができます。
viewヘルパー関数の第一引数にviewファイルのパスを、第二引数にviewに渡す変数を指定します。
viewファイルパスは
resources/views以下を指定し、ディレクトリは/(スラッシュ)ではなく.(ドット)で繋げ、拡張子なしのファイル名を記述します。
例えば`resources/views/hoge/fuga.blade.php`を読み込む場合は以下になります。

```lang:コントローラーのアクションメソッド
public function index() {
    return view('hoge.fuga');
}
```

# viewファイルへの変数受け渡し
viewヘルパー関数の第二引数に連想配列を渡すことでviewファイルに変数を受け渡しすることができます。
viewファイル内では連想配列のkeyを変数名として指定できます。

```lang:コントローラーのアクションメソッド
public function index() {
    $data = [
        'hoge' => 'fuga',
    ];
    return view('hoge.fuga', $data);
}
```

```lang:foge/fuga.blade.php
{{ $hoge }}
```

```lang:結果
fuga
```

また、phpのcompact関数を使うことで簡単に変数を渡すことができます。

```lang:コントローラーのアクションメソッド
public function index() {
    $hoge = 'fuga';
    return view('hoge.fuga', compact('hoge'));
}
```

# viewファイルで変数を使う
viewヘルパー関数で渡された変数には `マスタッシュ構文 {{ }}`内で使用可能です。

```lang:viewファイル
{{ $hoge }}
```

マスタッシュ構文では変数展開時にXSS対策のため自動でHTMLエスケープが実行されます(=タグがそのまま文字列として表示される)。
動的にhtmlを作成したい場合にエスケープを無効にしたい場合は、代わりに`{!! !!}`を使用してください。(中括弧は一つでok)

```lang:viewファイル
{!! $hoge !!}
```

viewファイル内で`{{ }}`をそのまま使いたい場合は先頭に@をつけてください。変数展開されず出力されます。

```lang:viewファイル
@{{ $hoge }}
```

# viewファイルでコメントを記述する
htmlのコメント(<!-- comment -->)をそのまま記述することも可能ですが、htmlファイルとして出力されるのでユーザーから見えてしまいます。
bladeテンプレート内でのみ残るコメントにする場合は `{{-- comment --}}`を使います。


# ディレクティブ制御構文
bladeテンプレートにはview制御を行うifやforeachが使えるディレクティブ構文が使えます。
ディレクティブ構文内では変数が使えます。
ディレクティブ構文には先頭に@を付けます。

## if文
`@if, @elseif, @else, @endif, @unless, @isset, @empty` があります。

```lang:viewファイル
@if ($isActive)
アクティブ
@else
非アクティブ
@endif
```

```lang:viewファイル
@unless ($isActive)
@endunless

```lang:viewファイル
@isset ($fuga)
fugaが定義されていない
@endisset
```

```lang:viewファイル
@empty ($array)
arrayが空です
@endempty
```

## Switch文
`@switch, @case, @break, @default, @endswitch`があります。

```lang:viewファイル
@switch($i)
    @case(0)
        0です。
        @break
    @case(1)
        1です。
        @break
    @default
        でふぉるとです
@endswitch
```

## 繰り返し
`@foreach, @endforeach, @for, @continue, @break` が使えます。
繰り返し構文の中では$loop変数が使えます。

```lang:viewファイル
@foreach ($books as $book)
 @continue ($loop->first)

 @if ($loop->last)
   最後
 @endif

 {{ $book->title }}
@endforeach
```
WSLでzshの補完やlsの色が見にくいので変える

WSL上でzshの補完やlsを使ったとき，ディレクトリが緑背景に青文字という表示でまともに読めなかったので設定変更の手順をメモ．

## 手順
1. `$LS_COLORS`の設定ファイルがなければ`dircolors -p > ~/.dircolors`のようにしてとりあえずデフォルト設定で作る．
2. 設定ファイル中の`OTHER_WRITABLE`の項目の値を変更する．(今回は`34;42`を`DIR`に合わせて`01;32`に変更)
3. `.zshrc`に`eval "$(dircolors -b ~/.dircolors)"`を追加．
    - デフォルトで補完周りの設定時に`eval "$(dircolors -b)"`があったのでそれを変更．
    - 設定ファイルは指定しないと無意味なので注意．
 
## 備考
- 問題の表示方法は`$LS_COLORS`という環境変数で表示対象の種類ごとに設定できる．
- `dircolors`はその設定を補助するコマンド．
- `OTHER_WRITABLE`という種類は`o+w`の権限（別ユーザーの書き込み権限？）のついたディレクトリが該当するが，WSL上のディレクトリは基本これになってしまうらしい．
サイバーセキュリティプログラミングをすすめる

# 目的
linux,ネットワーク、python初心者が[サイバーセキュリティプログラミング](https://www.oreilly.co.jp/books/9784873117317/)を読み進めるうえで引っかかったことを残しておく。未解決も残しておく。 （進捗に応じて追記する。）

##2.6 TCPプロキシの構築
#### 引っかかったこと
* Non-ASCII character '\xe3' 
    * [参考](https://qiita.com/KEINOS/items/6efc1147b917d7811b5b)
    * Python2系ではUTF-8で書いていることを明示する必要がある
     * コメントになっているのに意味があったなんて…

* 実行にあたって
    * sudo ./proxy.py 127.0.0.1 21 ftp.example.com 21 True
        * これ実行できない気がするんだけど…
    * sudo しなくても21番待ち受けはできてるっぽい（root権限だからかな…）
    * FTPクライアントソフトを21番ポートで"別に"起動しなければならない
    * kali linux標準？でftpサーバは起動できそう
    * server.accept()で応答が返ってこない。。。
    * 同様のことを、外部ftpサーバ利用して試している人がいるので、真似してみようかな…[参考](https://medium.com/@ismailakkila/black-hat-python-a-tcp-proxy-4528f3dd3b37)
    * ↑kaliからfilezillaで接続できないftpサーバをvsftpdでローカルに立ててみた。server.acceptでとまることはなくなったが、データのやり取りじたいはできてないみたい。。。

* Wing IDEでタブやスペースを明示的に表示したい
    * 初っ端のインデントずれを直すのに苦労
swiftの基礎的な書き方

Xcodeの基礎的なことを書いていきます。
#変数と定数
変数は数学で習う、χみたいなもので数字を何回でも入れ替えることができる。
変数では、先頭にvarをつける。
`var 変数名: 型名`
定数は一度決めたら変えられないもの。
例えば円の直径を計算するときのπ=3.14みたいな、変えたらおかしくなってしまうもの。
定数は先頭にletをつける。
`let 変数名: 型名`

#Swiftのデータ型
Swiftのデータ型を書いていきます。
####Int型
正と負のデータを扱うときに使う。
####Double型
小数点を扱うときに使う。
小数点を扱うものにFloat型もあるがこれは扱える範囲が狭いため基本的にはDouble型を使う。
####String型
文字列を扱うときに使う。
####Bool型
論理演算でtrueかfalseを扱うときに使う。

#条件分岐処理
条件分岐をするときは大体if文を使う。
こんな感じ

```swift
var num = 10

if (num > 5) {
    print("true")
} else {
    print("false")
}
```

結果は
trueとなる

ここにelse ifを使うことでどんどん条件を増やしていく。

#文字列の結合
文字列の結合はこんな感じに書く

```swift
var test1 = tarou
var test2 = maru

print(test1 + test2)

結果
taroumaru
```
文字と数字はそのままだと結合できないので、文字に合わせる場合は`String（test1）`というような感じで結合する。

#出力
swiftには`print`,`dump`という出力方法がある。
基本的に使うのはprintで、細かななところまで出力できるのがdumpdeです。
SSH接続時にアクセス元に応じてメッセージを表示する

# やりたいこと
リモートワークを推進する裏で、SSHのアクセスコントロールをちゃんとしたい。
例えば、本番環境で稼働しているサーバは踏み台を必ず経由したいときなど、あると思います。
SSHポートをiptablesで落とすだけでも良いのですが、その場合なぜユーザがログインできなかったのかの切り分けがやりにくく、開発者が混乱する可能性があると考えました。

そのため、以下の要件を満たせないか考えました。

```bash:要件
1. ユーザの接続元とユーザに応じてアクセスをコントロールしたい
   * 172.168.10.0/24からのアクセス かつ sshd_userというユーザのアクセスは拒否したい
   * それ以外のSSHアクセスは通す
2. アクセスしてきたユーザに対して、なぜログインできないのかを明示したい
```

# 環境
sshd serverはインストール済みで稼働しているものとします。
今回使用したOpenSSH Serverのバージョンは`OpenSSH_8.1p1`になります。


# 設定内容
## ユーザの接続元とユーザに応じたアクセスコントロール
こちらはよくある設定ですね。
今回は、以下のユーザからのアクセスを制限したいと思います。

* IPアドレス172.168.10.0/24からのアクセスである
* 制限対象のユーザ名は sshd_user とします

接続先サーバのsshd_configに以下のような設定を入れてみましょう。

```bash:/etc/ssh/sshd_config
Match Address 172.168.10.* User sshd_user
    PasswordAuthentication no
    PubkeyAuthentication no
```

こうすると、SSHのコネクションは貼れますが、認証方式が無いため結果としてログインできません。
でも、これだけなら`DenyUsers`構文だけでも十分です。
では、今回やりたかったことを実現してみましょう。

## ログインできない理由を表示する
以下のサイトに記載されていた情報を参考にしました。
[manページ  — SSHD_CONFIG](https://nxmnpg.lemoda.net/ja/5/sshd_config)
[sshd_configの設定項目の理解を目指す](https://unskilled.site/sshd_config%E3%81%AE%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE%E3%81%AE%E7%90%86%E8%A7%A3%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99/)

以下のような記載があります。

```bash
Banner (バナー)
司法管区によっては、法的な保護を受けるためには 認証の前に警告メッセージを送ったほうがよい場合があります。 
ここで指定されたファイルの内容は、認証が許可される前に リモートユーザに提示されます。 
このオプションは プロトコル バージョン 2 でのみサポートされています。
デフォルトでは、バナーは表示されません
```

となっていますので、早速バナーを設定してみましょう。

```bash:設定
$ cat << EOF | sudo tee /etc/ssh/banner.txt
********************************************************
*YOU CAN NOT LOGIN TO THIS SERVER FROM YOUR IP ADDRESS.*
********************************************************
EOF

$ sudo chmod 644 /etc/ssh/banner.txt

### 先程の設定を編集しましょう。
$ sudo vim /etc/ssh/sshd_config

Match Address 172.168.10.* User sshd_user
    Banner /etc/ssh/banner.txt
    PasswordAuthentication no
    PubkeyAuthentication no

$ sudo systemctl restart sshd.service
```

この状態で接続すると以下のように表示されます。

```bash
% ssh <上記のSSHの設定したサーバ>
********************************************************
*YOU CAN NOT LOGIN TO THIS SERVER FROM YOUR IP ADDRESS.*
********************************************************
sshd_user@<上記のSSHの設定したサーバ>'s password:
Received disconnect from 上記のSSHの設定したサーバ> port 22:2: Too many authentication failures
Disconnected from 上記のSSHの設定したサーバ> port 22
```

というわけで、要件は満たせました。
Flutterの環境構築の際に遭遇したエラー(Android toolchain)

# 僕が遭遇したエラーについて
![ffd.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616396/62a4fb44-c2f7-0bd7-23b7-d0b1fda4afb7.png)
Android toolchain - develop for Android devices～という項目です。
Android license status unknownという事でターミナル上で
```$ flutter doctor --android-licenses```
というコマンドを打ったのですがAndroidSDKが存在していないと言われてしましました。
「あれ？おかしいな？AndroidStudioでSDKはダウンロードしたはずだけど」と思いつつtool→SDKmanager→SDKtoolで確認
![wer.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616396/f5b133be-ef42-243c-f870-b3e11d8c0f81.png)
と、ここでAndroidSDKtoolsが存在していないことに気づきます。
右下にある「廃止パッケージを隠す」のチェックを外す。
![s.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616396/0439358f-391b-4570-9985-17748b55ab2a.png)
すると表示されました。こいつにチェックを入れて再度ターミナル上で
```$ flutter doctor```
と叩くと
![er.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616396/fddf9f80-ed69-1204-4ca4-a5ba5afbadda.png)
先ほどとは表示が変わり、前述したコマンド
```$ flutter doctor --android-licenses```
を叩き、表示されるスクリプトに全てyで答えると問題は解決しました。

##あとがき
大事なパッケージを隠すな
メモ帳でプログラミング

#メモ帳でプログラミング

JavaやPHPを使ってプログラムを作るさいに、パソコンにJava、PHPをインストール必要があるが
パソコンにインストールされているメモ帳を使うことで、インストールしなくてもWebページを作ることができる。

使用するのは言語はHTML
HTMLとは、Webページを作成するための言語のこと。

メモ帳にこのように書いて

![html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580200/c180beee-5e0d-7313-0781-e9930bc87d89.png)

ブラウザで開くと

![htmlweb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580200/44a88fb8-a9b3-6058-db94-13562914c0b3.png)

Webページの完成
Macで現在接続しているのが5GHzか2.4GHzか確認する方法

Option を押しながらメニューバーの Wi-Fi アイコンをクリック。
Channel 欄に表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/dae6d136-9216-4dcc-82fe-15e5d45a7d98.png)
【画像あり】neofetchをいろんなOSで使ってみた！

neofetchという使用中OSのロゴを表示するコマンドを見つけました。
気になって様々なOSで試してみました！
### Ubuntu
ホワイト版
![ubuntu_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/62ff5e75-8549-b9d3-ff32-7845d74d7c96.png)
ダーク版
![ubuntu_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/5563a815-19bd-c979-b307-a302efa579cc.png)


### Centos
ホワイト版
![centos_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/a29d96b9-454a-caaf-b960-8ac59b589d09.png)
ダーク版
![centos_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/37552a96-ccce-5549-592b-40bd7982df9c.png)

### Fedora
ホワイト版
![fedora_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/25255942-ac18-dc02-0d19-b14ac0cc9473.png)
ダーク版
![fedora_Dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/9f478467-4cfc-48b3-4e43-408c2f5a46f9.png)

### Alpine
ホワイト版
![alpine_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/16bc920a-9f86-8ad1-7f3c-e6345d940a60.png)
ダーク版
![alpine_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/89149ce5-505c-59e9-0b28-c88c0ac24135.png)

### ArchLinux
ホワイト版
![arch_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/2c8f195e-811f-e056-0a7e-ede122c2694e.png)
ダーク版
![arch_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/0995ac31-e670-df59-bef0-74ce1a5cc72a.png)

### Debian
ホワイト版
![debian_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/a58bfcb0-b208-cdc1-55ae-43bed6e28219.png)
ダーク版
![debian_Dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/52bd7e1a-6c05-57c4-f7f3-80c22ded582b.png)

### openSUSE
ホワイト版
![opensuse_white.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/f1f67310-b274-72d6-f6a4-c2fbdeb4ac52.png)
ダーク版
![opensuse_dark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318684/22ed853c-f865-e6d9-f6d0-60268da4704d.png)

##まとめ
neofetchを様々なOSで試してみました。
次回は検証に使用したソースなどを説明した記事を作りたいと思います。
どん兵衛を生け贄に青眼の白龍を召喚！

# はじめに
React Native で ARKit を使ってみたかったのやってみました。
使用するライブラリは [react-native-arkit](https://github.com/react-native-ar/react-native-arkit) です。

完成形は以下のようになります。

![IMG_0232.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43625/8fc0bec6-d171-0ae5-d01f-50464c94043b.jpeg)


では、実装していきます。

# インストール

正直、ここが一番面倒でした。
公式が、 React Native >= 60.0 から追加された Autolink に対応していない…！

まだ取り込まれていない[修正プルリクエスト](https://github.com/react-native-ar/react-native-arkit/pull/208)があったので、そちらに従いました。

```bash
yarn add github:code-matt/react-native-arkit react-native-svg
```

Pod.file に下記の二行を追加します。

```
  pod 'RCTARKit', :path => "../node_modules/react-native-arkit/ios/RCTARKit.podspec"
  pod 'PocketSVG
```

これで `pod install` が動くはずです。

# 下準備

ARKit がどん兵衛を認識できるように、画像を取り込みます。
Asset Catalog の`Images.xcassets`の中に`AR Resource Group`を作成して、写真を設定します。

<img width="1320" alt="adding-arresources.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43625/a0703012-7f35-d854-8d26-53aa4648f782.png">

次に 3D オブジェクトを用意します。
最後に紹介する参考ページで[紹介されていたサイト](https://www.models-resource.com/wii/yugioh5dswb/model/2348/)から青眼の白龍のオブジェクトをダウンロードして、`.scn`ファイルを作成します。

XCode で`SceneKit Catalog`を作成し、名前を`art.scnassets`としました。
作成された`.scn`ファイルをその中に移動させます。

私の環境では、これだけだと色のない真っ白なオブジェクトになりました。
PNG ファイルを見て色を当てているようだったので、一緒に入っていた PNG ファイルも格納したところ、ちゃんと色ありで表示されるようになりました。

# 実装

```tsx
const ARKitContainer: React.FunctionComponent = () => {
  const [position, setPosition] = useState(null);
  return (
    <ARKit
      style={{ flex: 1 }}
      debug
      // enable plane detection (defaults to Horizontal)
      planeDetection={ARKit.ARPlaneDetection.Horizontal}
      // enable light estimation (defaults to true)
      lightEstimationEnabled
      onAnchorDetected={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorUpdated={(anchor) => {
        setPosition(anchor?.position);
      }}
      onAnchorRemoved={(anchor) => {
        setPosition(null);
      }}
      // you can detect images and will get an anchor for these images
      detectionImages={[{ resourceGroupName: 'AR Resources' }]}
    >
      {position && (
        <ARKit.Model
          position={{ ...position, z: position.z * 1.25, frame: 'local' }}
          scale={0.01}
          model={{
            scale: 1,
            file: 'art.scnassets/BlueEyes.scn',
          }}
        />
      )}
    </ARKit>
  );
};
```

`AR Resources` のリソースグループを検知した時に、その座標を`position`に設定しています。
`position`が存在する場合、その位置に`art.scnassets/BlueEyes.scn`を表示しています。


ARKit の検出精度が良いので、特に変わったことをしなくても、どん兵衛を見つけると青眼の白龍を召喚できるようになりました。

# おわりに
いかがでしたでしょうか。
Swift x ARKit の例はたくさん出てきたのですが、React Native で AR をやっていた記事はあまり見つけられませんでした。
ライブラリがアップデート（Autolink対応）されておらず、インストールでつまづいたのが一番難点でした。

3D モデルさえ手に入れれば色々と可能性を感じたので、もうちょっと ARKit で遊んでみたいと思います。

# 参考
[休日2日を生け贄に青眼の白龍を召喚！](https://qiita.com/shunp/items/4289660b912d90536ece)
CSS : 斜め背景の作り方

最近よく見る↓のような斜め背景をCSSで実装する方法です。

<p class="codepen" data-height="500" data-theme-id="5973" data-default-tab="result" data-user="KazuyoshiGoto" data-slug-hash="RqgQap" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Slant Section">
  <span>See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/RqgQap">
  Slant Section</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## HTML

```html
<section>〜</section>
<section class="slant-section">〜</section>
<section>〜</section>
```
HTMLはsectionなどのレイヤーに `slant-section` のクラスを付与するだけです。

## CSS

`slant-section` は以下のような記述です。

```css
.slant-section {
  margin: 100px auto;
}
.slant-section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  z-index: -1;
  width: 100%;
  height: 150%;
  background: #eee;
  transform: skewY(-5deg);
}
.slant-section + section:before {
  content: "";
  display: block;
  position: absolute;
  top: -50px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: skewY(-5deg);
}
```

最初に `,slant-section` に十分な上下マージンを取っておきます。
斜めにするのでゆったりした余白が必要です。

次に `.slant-section` の疑似要素 `:before` にスタイルを設定していきます。
「斜め背景」と言いつつ、は実は背景ではなく`:before` 要素を平行四辺形に傾けたものなのです。

この実装には以下3つの工夫が必要です。

## 工夫1： `transform: skewY()`

`transform: skewY(-5deg);` で対象の要素を5度傾けた平行四辺形にできます。

しかしこれを単純に `.slant-section` にかけると、中身のテキストも含めて傾いてしまいます。
そこで次の工夫が必要です。

## 工夫2： `:before`要素を平行四辺形にする

`.slant-section`自体ではなく、`.slant-section:before`を実体化させ、大きな平行四辺形にして `.slant-section` の後方に配置する手法を取っています。

しかしここで別の課題が発生します。
`slant-section` 内の増減に柔軟に対応するために、完全なpx固定にせず縦150%を指定していますが、内容量によっては大きくはみ出してしまうのです。

## 工夫3： 次のsectionにもスタイル指定する

そこで最後の `.slant-section + section:before` のスタイルがあります。

`slant-section` の次のレイヤーでも同じような白い平行四辺形を作ることで、グレーの平行四辺形がはみ出してくるのを防いでいます。
Macのvimで単語が存在しない行を検索する

否定後読みを使う

```
/^.*\(hogehoge.*\)\@<!$
```

![ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151490/6f3b6d99-69a4-5aa5-3309-682fe84c9587.png)
【GCP】GCPの学習方法をまとめる 

GCPとかクラウド関連の知識をつけるとき、ドキュメントを見るのが一番いいなと思ってきた。
なので、備忘録的にドキュメントの見方を以下に記載。

https://cloud.google.com/?hl=ja　＞　サービス　or ソリューション　＞　関連機能があるか探してクリック　＞　でてきたページの下部のほうへ進むとドキュメントやクイックスタートがある

例えば、サービス　＞　データベース　＞　Cloud Firestore　＞　技術リソースにいろいろな項目がある

トップゲートとか、入門編のページででてきた機能について、
上記の進み方でドキュメントを探すのが手っ取り早い方法だと思う。
mapStateヘルパー

## mapStateヘルパー
this.$store.state.messageと書くのは少し長くて面倒なので、
ヘルパー関数が用意されています。

App.vueのスクリプトの部分を以下のように書き換えます。

```App.vue
<script>
import { mapState } from 'vuex';

export default {
  computed: {
    message () {
      return this.$store.state.message;
    }
    ...mapState({
      message: 'message'
    })
  }
};
</script>

```
'message'というように文字列を渡すと内部的にはstate.messageと同じ扱いになります。
JupyterNotebookの対話モードで、変数や式を複数行表示する

JupyterNotebookを使って、プログラムの実行結果を表示するには、print文を使う方法と式や変数を入力する方法があります。

print文を使う方法は、標準出力といわれており、次のように出力します。1つのセルでいくつもの出力ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258643/8a07bbce-245c-229a-6bed-322c5b39849d.png)
これに対し、式や変数をそのまま入力する方法があり、対話モード(インタラクティブシェル)での自動表示などと言われています。「ちょっと実行結果を見たい」という場合に"print"を入力する手間が省けるので便利です。ところが、対話モード(インタラクティブシェル)での自動表示では、1つのセルの中で、最後の結果しか表示してくれないという問題があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258643/7d0e5a92-2519-1c88-13d7-c05fc05a6882.png)
通常は、状況に合わせて使い分ければよいのですが、問題なのはSympyで数式を表示するときです。次の通り、標準出力でよりも対話モードでの自動表示の方がわかりやすく数式を表示してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258643/c0068249-d5f8-7d20-9b72-0ffa148039cf.png)
そうすると、1つのセルで複数の対話モード(インタラクティブシェル)での自動表示ができるようにすることができると便利です。このためには、次のように入力して実行します。

```python3:インタラクティブシェルで変数や数式を複数行表示させる
from IPython import InteractiveShell
InteractiveShell.ast_node_interactivity = "all" 
```

JupyterNotebookはIPythonという対話型シェル上で動いており、IPythonではTerminal IPython optionsでいろいろな設定ができます。このうち、"ast_node_interactivity"パラメータでインタラクティブシェルの表示方法を指定することができます。ast_node_interactivityのデフォルトは"last_expr"（最後だけ）ですが、これを"all"とすることで、すべて表示することができます。

「$\log(x+1)$の5階までの微分を求めたい！」というような場合にも、こんな芸当もできてしまいます。

```python3:n次までの導関数を求める
import sympy
sympy.var("x y")
f =sympy.ln(x+1)
for i in range(6):
    print(str(i) + '階の微分')
    sympy.diff(f,x,i)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258643/b4359d85-1052-c012-2517-c6e10d946ab9.png)
カレント配下のcsvファイルの行数を取得する

# カレント配下のcsvファイルの行数を取得する
カレント配下のcsvファイルの行数を取得するスクリプト（なんか遅いので改善確認中）

```　CountLine.ps1
# カレント配下のcsvファイルの行数を取得（先頭行がヘッダとして -1 している）
(Get-ChildItem -Recurse -File -Include *.csv).FullName |  
ForEach-object -Process { echo ([System.IO.Path]::GetFileName($_) + ":" + ( (Get-Content -Path $_).Length - 1 ))}
```
【redux-actions】Typescriptでの実装方法メモ

# 概要
`react-native`製アプリで、`redux-actions`を導入しているが`Typescript`向けの実装サンプルがあまり見つからなかったので備忘として。
`count`という数値型の変数を持つ`state`に下記2種の`Action`を定義した場合の例です。

- `payload`の値を`count`に加算する`add`
- `meta.hoge`が`true`なら`payload`を`count`に乗算する`multi`

ポイントは`multi`の方で、`meta`を絡めた場合の`Action`の定義の方法がちょっと分かりにくかった印象でした。

# 動作環境
関係してそうなライブラリのみ記載しています。

- typescript @3.5.2
- react-native @0.59.9
- redux @4.0.1
- redux-actions @2.6.5
- @types/redux-actions @2.6.1

# インストール
```
npm install --save redux-actions 
npm install --save @types/redux-actions
```

# 実装

```javascript
import { 
    createActions, 
    handleActions, 
    Action,
    ActionMeta 
} from 'redux-actions';

// State定義
class InitialState  { 
    count : number = 1;
};

// Stateインスタンス作成
const initialState : InitialState = new InitialState();

// Action定義
const { add, multi } = createActions({
  // payloadのみのAction
  add : (value : number) => value,
  // payload + metaのAction
  multi: [(value : number) => value, (value : number, meta : { hoge : boolean }) => meta],
});

// Reducerの定義
const reducer = handleActions(
  {
    // payloadのみの場合はAction<payloadの型>
    add : (state : { count : number }, action : Action<number>) => ({
        ...state,
        count : state.count + action.payload,
    }),
    // metaがある場合はActionMeta<payloadの型, metaの型>
    multi : (state : { count : number }, action : ActionMeta<number, { hoge : boolean}>) => ({
        ...state,
        count : action.meta.hoge? state.count * action.payload : state.count,
    }),
  },
  initialState 
);
```
分離レベルのおさらい

分離レベルはCSですね〜URですね~って業務で当たり前のように使っていますが、
なかなかRSとRRが名前が似てるので（と個人的には思ってます）どっちのモードがファントムリードが起きないんだっけ？ってなって確認するということを毎度毎度やってしまうのでその時のための備忘録的なつもりです。


#分離レベルとは
トランザクションの信頼性を保つために必要な特性としてACID属性というものがあります。
ACID属性は原子性(Atomicity)、一貫性(Consistency)、分離性(Isolation)、永続性(Durability)の４つの頭文字をとったもので、これらの属性のうち、今回は分離性(Isolation)に着目します。分離性は独立性ともいぅ場合もありますが今回は分離性ということにします。

分離性とは、１つのトランザクションは他のトランザクションの処理によって影響を受けないことです。
分離レベルによって、トランザクションが他のトランザクションからの影響を受ける範囲が異なります。
言い換えると、分離レベルによってアプリケーションからみて一度参照した照会結果がどの程度変更されることを許容するかということが変わってきます。


#他のトランザクションからの影響とは？
他のトランザクションによって起こりうる影響は３つあります。

###ダーティーリード（未コミット読み取り）
ダーティーリードとはあるトランザクションによって更新が行われている未コミット状態のデータが他のトランザクションから参照できてしまうことを言います。

###ノンリピータブルリード（反復不能読み取り）
ノンリピータブルリードとは一度読み込んだデータを他のトランザクションによって更新・削除されることによって、次に同様にデータを読み込もうとしても最初に読み込んだ時と同じ結果が返されないことを言います。

###ファントムリード（幻像読み取り）
ファントムリードとはあるトランザクション内で得られた結果が、他のトランザクションによりデータが挿入されることにより、次に同様にデータを読み込もうとしても最初に読み込んだ時と異なる結果が返されることを言います。

どのトランザクションにおいても、いずれの現象が一切発生しないことがデータの整合性の観点ではあるべき姿です。ただいずれの現象が一切発生しないようにデータアクセスの制御を行った場合、１つのトランザクションが更新している最中は他のトランザクションからのアクセスができず、アプリケーションがずっと待機してしまうなど、パフォーマンスに影響が出てきてしまいます。
つまりこの他のトランザクションからの影響をなくす分離性とトランザクションのパフォーマンスはトレードオフの関係なのです。

もちろんデータの特性や使われ方によって分離性の保証が優先すべきケース、分離性よりもアクセスパフォーマンスを優先すべきケースがあります。
そこで、この操作は、このレベルまで他のトランザクションからの影響を受けないように保証してくださいということを指定するために分離レベルがあるのです。この分離レベルはSQL単位で指定可能です。

#Db2の分離レベル
分離レベル、そしてそのレベルによる挙動はDBMS製品によって多少異なります。
今回はDb2の分離レベルについて記載します。
Db2では、UR、CS、RS、RRの４つの分離レベルに分かれます。

[分離レベル](https://www.ibm.com/support/knowledgecenter/ja/SSEPGG_11.5.0/com.ibm.db2.luw.admin.perf.doc/doc/c0004121.html)

各分離レベルによって上記の３つの現象が発生することを許容する・しないかが異なります。
以下の表からURが分離レベルが低く（他トランザクションからの影響大）、RRの方が分離レベルが高い（他トランザクションからの影響小）ということがお分りいただけるかと思います。
ちなみにDb2のデフォルトの分離レベルはCSです。

| 分離レベル　        |     ダーティーリード |ノンリピータブルリード  |ファントムリード|
|:-----------------:|:-----------------:|:------------------:|:------------:|
| UR                |        発生        |       発生          |    発生       |
| CS (default)               |   発生しない        |       発生          |    発生       |
| RS                |   発生しない        |       発生しない     |    発生       |
| RR                |   発生しない        |       発生しない     |    発生しない  |

各分離レベルと一言で簡単にいうと、、

| 分離レベル　   |     |
|:------------:|:-----------------|
| UR           |一度参照したレコードが、無かったことになってもいい       |
| CS (default)          |常にコミットされている結果が返されれば、読み直した時にレコードは変更されていてもよい|
| RS           |参照したレコードは、更新されたくない、読み直した時に同じレコードが欲しい|
| RR           |参照したレコードは、更新されたくない、読み直した時に同じレコードが欲しい|




#どうやってデータの分離性を保証しているのか
ここまではデータの分離性・分離レベルのお話でした。
ここからはどうやってDBMSがこの分離レベルを実現しているのかという話です。
単直に言いますと、**表や行などのオブジェクトに対して、ロックを組み合わせることで実現**しています。
この分離レベルによって組み合わせるロックのタイプが異なります。
また同じ分離レベルでも参照するときと更新するときではロックの組み合わせは異なります。
このへんのロックのタイプや組み合わせなど詳しい話はここではしません。



#まとめ

-分離性とは、１つのトランザクションは他のトランザクションの処理によって影響を受けないことを保証すること。

-影響をどの程度受けたくないかは、データの使われ方によってケースバイケースなので
分離レベルによって、一度参照した照会結果がどの程度変更されることを許容するかを指定できる！

-分離性はロック機能によって制御されていて、分離レベルの違いはこの取得されるロックの種類のよって実現できる！












最後まで読んでいただきありがとうございました:relaxed:
plotlyでアニメーションするグラフを作ったメモ

# Plotlyでアニメーションするグラフを作ったメモ
## 概要
* np.arrayを入力するとアニメーションするグラフを作成する（時系列データ）

## ソースコード
```python
import pandas as pd
import numpy as np
import plotly.express as px

def create_animation_graph(input_array: np.array, start: str = '1900-01-01 0:00', g_type: str = 'line', y_label: str = 'value',
                           x_label: str = 'time') -> object:
    """
    np.arrayを入力すると、plotlyのアニメーションするグラフを返す
    :param input_array:データのnp.array
    :param start:開始時刻
    :param g_type:グラフタイプ 'line','bar','area','scatter'
    :param y_label:y軸名称
    :param x_label:x軸名称
    :return:
    """
    df = pd.DataFrame()
    times = pd.date_range(start=start, periods=len(input_array), freq='T').strftime('%H:%M')

    # animation用のデータフレームを作成
    for idx, time in enumerate(list(times)):
        add_df = pd.DataFrame({x_label: [time for time in times [0:idx]],
                               y_label: input_array [0:idx],
                               'tick': idx})
        df = pd.concat([df, add_df])

    range_x_max = len(input_array) - 2
    
    # plotly.expressで描画
    if g_type == 'scatter':
        fig = px.scatter(df, 
                         x=x_label, 
                         y=y_label,
                         animation_frame="tick",
                         range_y=[0, input_array.max()],
                         range_x=[0, range_x_max])
    elif g_type == 'line':
        fig = px.line(df, 
                      x=x_label, 
                      y=y_label, 
                      animation_frame="tick", 
                      range_y=[0, input_array.max()],
                      range_x=[0, range_x_max])
    elif g_type == 'bar':
        fig = px.bar(df, 
                     x=x_label, 
                     y=y_label, 
                     animation_frame="tick", 
                     range_y=[0, input_array.max()],
                     range_x=[0, range_x_max])
    elif g_type == 'area':
        fig = px.area(df, 
                      x=x_label, 
                      y=y_label, 
                      animation_frame="tick", 
                      range_y=[0, input_array.max()],
                      range_x=[0, range_x_max])
    else:
        raise KeyError('g_typeが違います')

    return fig
```

## 実行
```python
input_array = np.array([_*np.random.rand() for _ in  np.arange(0,30)*2])
create_animation_graph(input_array,g_type='area',start='00:00',x_label='時刻',y_label='電力量')
```


![animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148213/4d0c36c3-aa3e-77b1-165c-5087fdbfbffe.gif)
【今日のアブストラクト】Designing Network Design Spaces【論文 DeepL 翻訳】

1 日 1 回 論文の Abstract を DeepL 翻訳の力を借りて読んでいきます.

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Designing Network Design Spaces](https://arxiv.org/abs/2003.13678)

# Abstract

### 訳文

この研究では, 新しいネットワーク設計のパラダイムを提示する. 我々の目標は, ネットワーク設計の理解を促進し, 設定を越えて一般化する設計原理を発見することである. 個々のネットワークインスタンスの設計に焦点を当てるのではなく, ネットワークの母集団をパラメータ化したネットワーク設計空間を設計する. 全体的なプロセスは, ネットワークの古典的な手動設計に類似しているが, 設計空間のレベルにまで高められてる. 我々の方法論を用いて, ネットワーク設計の構造的側面を探求し, RegNet と呼ばれる単純で規則的なネットワークからなる低次元の設計空間に到達した. RegNet のパラメトリー化の核心的な洞察は驚くほど単純である. RegNet 設計空間を分析し, 現在のネットワーク設計の実践とは異なる興味深い知見を得た. RegNet デザイン空間は, 幅広いフロップレジームで動作するシンプルで高速なネットワークを提供する. 同等のトレーニング設定とフロップの下で, RegNet モデルは一般的な EfficientNet モデルを上回る性能を示し, GPU 上では最大 $5$ 倍の高速化を実現した.


### 原文

In this work, we present a new network design paradigm. Our goal is to help advance the understanding of network design and discover design principles that generalize across settings. Instead of focusing on designing individual network instances, we design network design spaces that parametrize populations of networks. The overall process is analogous to classic manual design of networks, but elevated to the design space level. Using our methodology we explore the structure aspect of network design and arrive at a low-dimensional design space consisting of simple, regular networks that we call RegNet. The core insight of the RegNet parametrization is surprisingly simple: widths and depths of good networks can be explained by a quantized linear function. We analyze the RegNet design space and arrive at interesting findings that do not match the current practice of network design. The RegNet design space provides simple and fast networks that work well across a wide range of flop regimes. Under comparable training settings and flops, the RegNet models outperform the popular EfficientNet models while being up to 5x faster on GPUs.
Teams会議でアバターを使う

Vtuberみたいなモーションキャプチャーは敷居が高いものだと思ってましたが、上半身だけのキャプチャーならとてもお手軽にできるようです。
そこで、Web会議(Teams)でやってみました。

基本的に、@CST_negiさんの[この記事](https://qiita.com/CST_negi/items/95a72a592f44bfc7ad74)を参照すれば大丈夫ですが、自分がやった手順をメモっておきました。

# インストール

以下を順番にインストールするだけです。
WebカメラとTeamsは別途必要です。

Luppet(体験版あります)
https://luppet.appspot.com/

OBS Studio 24.0.3
https://github.com/obsproject/obs-studio/releases/tag/24.0.3

OBS VirtualCam 2.0.4
https://github.com/CatxFish/obs-virtual-cam/releases

# Luppetの設定

起動するとき「Windowed」のチェックを入れましょう。そうでないと全画面になります。
アカウントを作成して、ログインします。

「VRMファイルを選択してください」と出ますので、プリセットのモデルを選択するか、自分で持っているモデルを選択します。
自分で持っているモデルを使うには、「ファイル置き場を開く」を押して出てきたフォルダにVRMファイルを置くだけです。

- [VRMについて](https://luppet.appspot.com/vrm/)

置いたら、いったんログアウトし、再度ログインすると表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/45edffd1-53f8-a9b3-5d6a-c78c46339601.png)

モデルを選択したら、VRM情報の確認と、カメラの確認をして、「このモデルでスタート」を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/cd84966e-38cd-dee2-3a18-56a940a730af.png)

これで完了です。驚くほど簡単です。
これをOBSでキャプチャしますが、最小化しておいて大丈夫です。

あとは、設定画面でいろいろいじってみてください。
背景をいじるくらいで十分かとは思います。
音声でリップシンクもしてくれますし、LeapMotionをつないでいれば、手も動かせます。
LeapMotionは首元になんとかしてつけます。

# OBSの設定

OBSを起動し、ソースにゲームキャプチャを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/290a291f-bd9d-80f2-07e3-0d8da68f4e5a.png)

追加したゲームキャプチャのプロパティを開いて、モードを「特定のウインドウをキャプチャ」とし、ウインドウに「Luppet」を選択し、「OK」を押して閉じます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/73745461-747e-b6b7-406d-95540b8260c3.png)

これでメイン画面にLuppetの画面が表示されます。
まず、Altキーを押しながら赤点をドラッグして、表示領域を決めます。
アバターが表示されている部分だけ表示されるようにしましょう。
あとは赤点をドラッグしてサイズを変更したり、位置を変更したりしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/fac94f78-e5fa-0dc5-46e7-566c08c2ea4e.png)

これをカメラ映像にします。
「ツール」から「VirtualCam」を開き、Target Cameraに「OBS-Camera」を選択して、Startボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/64f9191d-491e-d041-fde1-772ea604d861.png)

これですべての準備が完了しました。

# Teamsの設定

あとはTeamsでOBSのカメラを使えるようにするだけです。
デバイスの設定を開き「OBS-Camera」を選択します。

これで会議を始めと、自分のカメラ映像にアバターが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44912/e8cd6c3f-5ca3-1ca1-6c2b-72ba7d27bdfa.png)

よいアバター会議ライフを。
おしまい。
Kotlinで呼び出し元のクラス名とメソッド名を取るSnippet

呼び出し元の情報を取る。
AndroidのLogCatであればファイル名と行数から飛べるリンクも生成される

``` kotlin
Throwable().stackTrace.forEach { s ->
    Timber.d("  at ${s.className}.${s.methodName}(${s.fileName}:${s.lineNumber})")
}
```
[Rails]テンプレートエンジン(haml.slim)の導入方法と書き方

#パフォーマンス比較グラフ

![20170910222126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/4b6e7e1d-3fd4-70c7-02a0-2c865e534d5b.png)

# erb(比較用)

```erb:~.html.erb
<h1>Users</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>
```

#haml

### 1.導入方法

```ruby:Gemfile
gem 'haml-rails' #hamlファイルを使えるようにする
```

```terminal:ターミナル
$ bundle
```

```terminal:ターミナル
$ rails haml:erb2haml
```

```erb:ターミナル
<!-- 下記の様に問われるので、既存のerbファイルを削除してもいいなら「y + Enter」、駄目なら 「n + Enter」 -->
Would you like to delete the original .erb files? (This is not recommended unless you are under version control.) (y/n)
```

**既存の`erb`ファイルを`haml`ファイルに変換**

### 2.書き方

```haml:~.html.haml
%h1 Users

%table
  %thead
    %tr
      %th Name
      %th Email
      %th

  %tbody
    - @users.each do |user|
      %tr
        %td = user.name
        %td = user.email
        %td = link_to 'Show', user
        %td = link_to 'Edit', edit_user_path(user)
        %td = link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' }

%br

= link_to 'New User', new_user_path
```

#slim

### 1.導入方法

```ruby:Gemfile
gem 'slim-rails' #slimファイルを使えるようにする
gem 'html2slim' #既存のerbファイルをslimファイルに変換出来る様にする
```

```terminal:ターミナル
$ bundle
```

既存の`erb`ファイルを`slim`ファイルに変換し、`erb`ファイルを全削除する。

```terminal:ターミナル
$ bundle exec erb2slim app/views app/views -d
```
ビューを作成時、自動的に`slim`に変換する。

```ruby:application.rb
module Devise
  class Application < Rails::Application
    config.load_defaults 5.2
    config.generators.template_engine = :slim #追記
  end
end
```

### 2.書き方

```slim:~.html.slim
h1 Users

table
  thead
    tr
      th Name
      th Email
      th

  tbody
    - @users.each do |user|
      tr
        td = user.name
        td = user.email
        td = link_to 'Show', user
        td = link_to 'Edit', edit_user_path(user)
        td = link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' }

br

= link_to 'New User', new_user_path
```
Web技術基礎知識メモ2

#HTTP
#####HTTPメソッド
HTTPリクエストを用いて、Webサーバーに具体的な要求内容を伝える。以下のようなメソッドを使用する。
例1)GET:HTMLファイルなどのコンテンツを取得したいときに使用
例2)POST:データをWebサーバーに対して送信する際に使用


Webブラウザ → Webサーバー
「HTTPリクエスト」をWebブラウザが送る

Webブラウザ ← Webサーバー
「HTTPレスポンス」をWebサーバーが返す


####ステータスコード
Webサーバーの応答したときの処理結果であり、3桁の数値から成る。
4xx: (Webブラウザの)クライアントエラー
例1)404 NotFound 
5xx: サーバーエラー


####HTTPS
HTTPの通信において、SSLやTLSのような暗号方式を追加したもの。
SSLやTLSを用いることで以下のことを目指す。
①盗聴防止。暗号化通信を行う。
②改ざん防止。
③なりすまし防止。SSLサーバー証明書を発行するなど。

##ステートレスとステートフル
####ステートレス 
クライアントのWebブラウザが実行した状態を保持しない。
####ステートフル 
状態を保持

HTTPはステートレスであるが、近年のサービス(例えばショッピングサイト)ではクライアント情報を保持する必要がある。
そのため、cookieを用いている。

###cookie
クライアントのWebブラウザ状態を保持、管理するためのデータ。

ショッピングサイト等で、接続してきたWebブラウザを識別するための情報をcookieに送る。
cookieを受け取ったWebブラウザはそれを保存して、次にWebサーバーに接続する際に保存しておいたcookieを
送信することで、Webサーバーは接続してきた相手を識別することが出来る。

####セッション
WebブラウザとWebサーバーのやりとりで、一連の関連性のある処理の流れ。





#参考文献
Web技術の基本 SBCreative
ABC備忘録[ABC161 C - Replacing Integer] (Python)

#ABC161 C - Replacing Integer
##問題文
>青木君は任意の整数$x$に対し、以下の操作を行うことができます。

>###操作
$x$を$x$と$K$の差の絶対値で置き換える。

>整数 Nの初期値が与えられます。この整数に上記の操作を0回以上好きな回数行った時、とりうるNの最小値を求めてください。

>###制約
$0≤N≤10^{18}$
$1≤K≤10^{18}$
入力は全て整数

[C - Replacing Integer](https://atcoder.jp/contests/abc161/tasks/abc161_c)

##解法
行う操作は、例えば$N=7$、$K=4$のとき$x$から$K$を差分の絶対値が最小になるまで引くことなので、$x=7,x=3,x=1,x=3$と$x$が変化していく。
よって求める$x$は$1$となる。
なお、$x=1$以降は$x$は$1$と$3$を繰り返す。

ただこの操作を$N$と$K$が大きいときに愚直に繰り返すと大変なので、求める最小値は$N/K$の余りか$K - (N/K)$の余りであることを利用する。

```Python
N, K = map(int,input().split())
 
print(min(N % K, K - (N % K)))
```

間違いがある場合は指摘してください。
How to install Zsh on Windows

1. https://blog.joaograssi.com/windows-subsystem-for-linux-with-oh-my-zsh-conemu/
https://evdokimovm.github.io/windows/zsh/shell/syntax/highlighting/ohmyzsh/hyper/terminal/2017/02/24/how-to-install-zsh-and-oh-my-zsh-on-windows-10.html
を参照して作成しています。

3.Vimコマンド参照
https://opentutorials.org/course/730/4561

①Microsoft Storeを検索し、Ubuntu terminalをインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/d8dc7561-012b-9a70-f468-49488be3b07b.png)

②インストールしたubuntu bashを起動し、以下のコマンドを入力する
・install oh my zsh ：

```
sudo apt-get install zsh
```

※cURLとはサーバーは通信ができるコマンドツールが、必須ではなさそう。
https://racoonlotty.tistory.com/105　参照(韓国語)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/a81fb99c-d247-0693-c717-501e11208126.png)

![uploading-0]()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/f2ca1db4-963c-b34e-7eca-c2b9c51836ab.png)


③To install oh-my-zsh go to bash terminal and use following command:
curlを利用して、oh-my-zshをインストールする

![uploading-0]()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209211/b2d5a7ca-9616-fbed-8bd3-9ac2e44d9a9d.png)


④zsh/oh-my-zshを構成する
ubuntu bashのdefaultをzshに修正すること
以下のようにセットまたは、上の写真を参照すれば
Do you want to change your default shell to zsh? でYes をすることと同じこと

```
if test -t 1; then
exec zsh
fi
```

③
Install Git:

```
sudo apt-add-repository ppa:git-core/ppa
sudo apt-get update
sudo apt-get install git
```



맨날 까먹는거 캐롯은 ctrl이다
テレワークでの人間の生存監視を考えてえてみた

# テレワークってダレますよね。
 誰も見てないんで、自分でちゃんと課題と目的が無いとダレてしまうものだと思います。
それをちょっと改善するアイデアです。

# ものすごく簡単な課題を課してみる。
 たまたまネットで調べ事をして、これは社内メンバーに簡単な共有をしたほうが良いなってネタだったのです。
　(ネタとしては　CLOUDBERY LABの社名が変わっていたということなのですが
　　https://www.msp360.com/　)
 通常業務として、Temsに変わったぜって共有した次第です。

# 結論として
 1日数回(午前・午後1回ずつとか)自分の業務に関係するトピックをSNSに上げるって
 ことをやったら、生存は監視できるかなと。

# 更に
 通勤が無くて運動不足にもなるので、お昼休憩で外に出て写真を撮ってSNSに上げるとか。
 お昼買いに行って、近所の様子とか取ったら市民の動向もみれるかなと。