OmniAICreator/Qiita-1.07M huggingface dataset:
AWS CloudShell とは

## 勉強前イメージ

ブラウザで触れるコンソールの認識

## 調査

### AWS CloudShell とは

ブラウザから触れるコマンドラインになります。
Amazon Linux2ベールで、aws cli やコンテナサービスのcliなど予めインストールされています。

### AWS CloudShell の特徴

- Amazon Linux 2ベースの環境
- パッケージインストールも可能
- ファイルをアップロード,ダウンロード可能(ホームディレクトリは1GB保持することが出来ます。)
- 最大10個の同時シェルを無料で使用可能

### 起動方法

- 起動

ターミナルの画面、または検索から `cloudshell` で起動

![1ダッシュボード _ EC2 Management Console - Google Chrome 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/7353bdb7-240d-5e14-0db1-239ef89229a1.png)


- 起動

すぐに起動します。

![2AWS CloudShell - Google Chrome 2021-06-19 14.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/9887582b-fb7f-1ffc-19f6-c47b2b9e1b13.png)


- いろいろ確認

amazon linux2でした

```
$ cat /etc/system-release
Amazon Linux release 2 (Karoo)
```

/home配下は1GBで、logとかは20GB程度使える

```
$ df -h
Filesystem      Size  Used Avail Use% Mounted on
overlay          30G   11G   18G  39% /
tmpfs            64M     0   64M   0% /dev
shm             1.9G     0  1.9G   0% /dev/shm
tmpfs           1.9G     0  1.9G   0% /sys/fs/cgroup
/dev/xvdcz       30G   11G   18G  39% /aws/mde
/dev/loop0      976M  2.6M  907M   1% /home
tmpfs           1.9G     0  1.9G   0% /proc/acpi
tmpfs           1.9G     0  1.9G   0% /sys/firmware
tmpfs           1.9G     0  1.9G   0% /proc/scsi
```

rootにもなれました。

```
$ sudo su -
-bash-4.2# 
```

## 勉強後イメージ

ちょっとaws cliでコマンド叩きたいねんって時に良いかもですね

## 参考

- [待望の新サービス AWS CloudShell がリリースされました！ #reinvent](https://dev.classmethod.jp/articles/new-service-aws-cloudshell-reinvent-2020/)
- [ほぼ無料の「AWS Cloud Shell」を利用して「Amazon S3」の署名付きURLを発行する](https://www.atmarkit.co.jp/ait/articles/2102/02/news003.html#_ga=2.180177956.106254148.1624077900-1012809726.1610296898)
テレワーク中鬱屈とした心をちょっとだけ癒してくれるサイト

# はじめに

長期にわたるテレワークで鬱屈とした心をちょっとだけ癒してくれるサイトを紹介します。

# ちょっとだけ癒してくれるサイト

## WindowSwap
誰かの家の窓の景色をのぞき見できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/f8c8d531-b21c-a2a3-76a9-3acb1c260958.png)

https://www.window-swap.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/b496568e-869c-ca48-2f55-e7bba250402a.png)

## Drive & Listen
世界各国の道をドライブできます

https://driveandlisten.herokuapp.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/764ba49e-e3fe-238b-22f9-0976d88abcb0.png)

## samayoeru me

GoogleMap上をランダムにさまよってる人についていけます

https://samayoeru.me/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502798/b22a41ad-d672-07fe-e252-7615f9104545.png)

## Youyube Liveカメラ系

### Kitten Academy Live Stream

ぐうたらしてるネコちゃんをのぞき見できます

https://www.youtube.com/watch?v=AlmNFM7n3GU

### Rescued Baby Sea Otter Joey And His Otter Friends

うきうきで泳いでるラッコをのぞき見できます

https://www.youtube.com/watch?v=zxYribbndTM

### Wolong Grove Panda Cam 

イチャイチャしてる親子パンダのぞき見できます

https://www.youtube.com/watch?v=OObOQ2GElhA

## おまけ

## Tabby Cat

Chromeの拡張機能です。
タブを開くたびにいろんな動物がお出迎えしてくれます

https://chrome.google.com/webstore/detail/tabby-cat/mefhakmgclhhfbdadeojlkbllmecialg?hl=ja

# 終わりに
ちょっとでも癒されたら幸いです！

他にもおすすめあったら教えていただきたいです！！
AWS NetWork Firewall を使用した Web フィルタリングの実装 - Suricata compatible IPS rules -

**本記事では AWS Network Firewall にて実装が可能な Suricata互換のIPSルールの解説と簡易的なルールを記載する**

#Suricataとは
Suricataとは、簡単にいうとオープンソースのセキュリティ監査エンジン。
Network Firewall では互換性のあるステートフルルールとしてSuricataが使用可能である。

以下、公式ドキュメント

https://suricata.readthedocs.io/en/suricata-5.0.2/what-is-suricata.html


#特徴
他のステートフルルールである 5tuple あるいは domain list との大きな違いは、定義したシグネチャー通りに動作を行うところ。要は以下に記載したルールによって、検査を行う動作内容を表現する事が出来る。
また、5tuple あるいは domain list で実装が出来ないシグネチャー単位で優先順位を付ける事が可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/f326b7c6-fd68-9c7b-f98b-d120bc108a00.png)


#ルール形式
基本的には公式ドキュメントに記載がある形式を使用する。

https://suricata.readthedocs.io/en/suricata-5.0.2/rules/intro.html#action

ルール形式は以下の３構成で定義される。

| 項目  | 動作内容 |
|:-:|:-:|
| <font color="Red"> アクション</font>  | 検査後にどのような対応を行うか |
| <font color="Green"> ヘッダ </font> | プロトコル、IPアドレス、ポート、ルールの方向を指定  |
| <font color="Blue"> オプション </font> | ルールの詳細を定義  |

以下を例として色付けによる解説を行う。

<font color="Red"> drop </font> <font color="Green"> http any any -> any any </font> <font color="Blue">(msg:"HTTP traffic detected"; sid:200000; rev:1;) </font>


* アクション

アクションでは以下 3つが定義可能
<font color="Red"> **Pass** </font>: パケットの検査を終了し、目的の宛先への送信を許可。
<font color="Red"> **drop** </font> : ファイアウォールにアラートログが設定されている場合は、メッセージを送信する。パケットのすべての検査を終了し、目的の宛先に送信されないようにブロックする。
<font color="Red"> **alert** </font>: ファイアウォールにアラートログが設定されている場合は、メッセージを送信する。パケットが目的の宛先に送信されることを許可。

Network Firewall では reject アクションはサポートされない。


* ヘッダ

ヘッダは以下大きく分けて 4つの構成から定義されている

<font color="Green"> **protocol** </font>: 検査するプロトコルを定義。指定可能なプロトコル一覧は以下となる。
tcp / udp / icmp / ip (allまたは any) / http / ftp / tls (sslを含む) /smb / dns / dcerpc / ssh /smtp /imap / ikev2 / krb5 / ntp /dhcp


<font color="Green"> **src and dest**</font>: 通信の送信元と、送信先のIP を指定。以下のように特定の演算子や変数の指定も可能。任意の送信先とする場合は `any ->` , `-> any` にて表現する。 

| 演算子  | 内容 |
|:-:|:-:|
|../..|	CIDR|
|!|否定/例外|
|[.., ..]|グループ化|
|`$HOME_NET` / `$EXTERNAL_NET` |自分のネットワークの範囲 / 自分以外のネットワークの範囲 |

<font color="Green"> **port** </font>:送信元と送信先のポートを指定する。
以下のように演算子を用いた指定も可能。任意ポートは `any ->` , `-> any` にて表現する。 

| 演算子  | 内容 |
|:-:|:-:|
|:|ポート範囲|
|!|否定/例外|
|[.., ..]|グループ化|

<font color="Green"> **direction** </font>:通信の方向を指定する。
direction の記述については、以下の通り2パターン

|演算子	|内容|
|:-:|:-:|
|->	|source から destionation への通信|
|<>	|双方向の通信|


このようにヘッダは記述を行う。先述したルールを上記に倣って解釈すると、全ての送信元から http プロトコルにて全ての送信先へ通信をする場合、 drop する。となる。

```
drop http any any -> any any (msg:"HTTP traffic detected"; sid:200000; rev:1;)
```

* オプション

ルールの残りの部分はオプションで構成される。
これらは括弧 `( )` で囲まれ、`;` セミコロンで区切られる。
オプションはキーワードによって構成され、sid キーワード以外は任意のメタキーワードとなる。
一部の msg オプションには設定があり、キーワード、コロン、設定の順に指定される。その他には設定がなく、キーワードとなる。

<font color="Blue"> **sid** </font> : オプションで唯一必須の項目となる。任意のID を定義し、他のシグネチャーと重複しないようにする。

<font color="Blue"> **rev** </font> : シグネチャーのバージョンを表記する。変更があった際に更新をかけるキーワード

<font color="Blue"> **msg** </font> : アラートに関するテキスト情報を提供する。

オプションはキーワードの数が多く、適切なキーワードを使用してシグネチャーを作成する。先述したルールを上記に倣って解釈すると、全ての送信元から http プロトコルにて全ての送信先へ通信をする場合、通信は drop され、"HTTP traffic detected" といったテキスト情報をアラートログへ記述するようになる。

```
drop http any any -> any any (msg:"HTTP traffic detected"; sid:200000; rev:1;)
```
【win10】docker: error during connect: This error may indicate that the docker daemon is not running

docker: error during connect: This error may indicate that the docker daemon is not running.: Post "http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.24/containers/create": open //./pipe/docker_engine: The system cannot find the file specified.
See 'docker run --help'.

dockerをインストール後に、サービスを起動しようとしたら出てきた

# 環境
windows 10 pro [Version 10.0.19041.985]
# 実施したこと

## インストーラーをDL
[https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package)

ここからDL

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100934/93788873-2f8f-3a15-efdb-81fbbe7a62a8.png)

## インストーラー実行
適当に”はい”を選択してインスコ

## WSLのデフォルト設定
powershellから下記コマンドを実行
念のため管理者権限で起動した


```
wsl --set-default-version 2
```
<br>
PC再起動をしたらエラーは表示されなくなった
APIKitでapplication/urlencodedでbodyを送る方法

自分自身APIKITは普段使わないのですが、今回使う機会があり、application/urlencodedでbodyを送る方法で少し詰まったのでここにまとめておきます。
## bodyParametersを使う
基本的にSwiftでAPIを叩くときはrequestやresponseといった風にファイルを分けるのですが、APIKITを使う場合は以下のような感じでrequestを作ります。


```
struct HogehogeAPI {
    struct hogeRequest: Requset {
        var headerFields: [String : String] {
            return [
                "Content-Type":  "application/x-www-form-urlencoded; charset=utf-8"
            ]
        }

        typealias Response = Hogehoge.Response

   

        var baseURL: URL {
            return URL(string: "/hogehoge")!
        }

        var method: HTTPMethod {
            return .post
        }

        var path: String {
            return /hogehoge
        }

        var parameters: Any? {
            return [
               "user_id": 1
            ]
        }
    }
}
```

こんな感じでRequestを継承してheaderFieldsやbodyであるparametersを設定していきます。
**content-type: application/json**だとおそらくこれで問題なかったのですが、今回の
**application/x-www-form-urlencoded**ではparametersを使うだけだとbodyを送れませんでした。
そこでbodyParametersを設定します。

```
　
   var parameters: Any? {
       return [
           "user_id": 1
       ]
   }

   var bodyParameters: BodyParameters? {
       guard let parameters = parameters as? [String: Any] else { return nil }
       return FormURLEncodedBodyParameters(formObject: parameters)
   }
```

こんな感じでparametersに設定した値をFormURLEncodedBodyParametersに変換してあげてbodyParametersに設定してあげると、上手く送信できました。
APIKITを普段から使っている人にとっては当たり前のことかもしれませんが、少しつまづいたので共有しておきます。
css色々細かい方法

#cssの色々
以下のように"."が付くのは、HTML内でクラスの設定（class="works"）とした場合に必要です。headerの"p"タグの場合は、header p {}として大丈夫です。

```css:css
.works {
}

```


##font-weight（太さの指定）

```css:css
.work h1 {
  margin: 0;
  font-weight: normal;
  font-size: 24px;
}
```

##list-style-type: none;（liの・を消す）

```css:css
.work ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}
```

##CSSを適用したい（ulの中のliに適用したい時）指定方法
カンマなどで区切ったりしないようにする。ulの後にliと書こう。

```
.work ul li {
  margin-right: 8px;
}

```

#アイテムの調整（containerなどにも使える）
Flexbox内の要素を縦方向で中央揃えにするために、align-itemsを使っていきます。

```css:css
/* 位置による配置 */
/* align-items は左と右の値を取らない */
align-items: center; /* アイテムを中央付近にまとめる */
align-items: start; /* アイテムを先頭にまとめる */
align-items: end; /* アイテムを末尾にまとめる */
align-items: flex-start; /* フレックスアイテムを先頭にまとめる */
align-items: flex-end; /* フレックスアイテムを末尾にまとめる */
```


#クラス内にあるタグにだけcssを適用する方法(>区切りのセレクタ)
">"を使用して、指定したクラスの中にあるもの（今回：h1）にのみ適用することができる。

```css:css
.works > h1 {
  font-weight: normal;
  font-size: 24px;
  text-align: center;
}

.works > section > h1 {
  font-weight: normal;
}
```

#line-heightで行間指定方法
細かい余白を調整したのちに、line-heightプロパティを使って行間の調整をしていきます。数値1以上で空間が発生します。

```css:css
.works p {
  line-height: 1.8;
}
```
Reactで配列のメソッドを使用する際に注意すること(push)

#Reactで配列のメソッドを使用する際に注意すること(push)

自分がReactを勉強し始めて、基本的なことを忘れていたために行き詰まった点をこちらで紹介させていただきます。
ほとんど備忘録のような感覚で書かせていただいているので、細かな間違いがあるかもしれません。


今回は、大抵のプログラミング言語で使用される、配列メソッドpushを使用した際に基本的な部分で行き詰まった点について紹介します。

##pushの戻り値は、配列ではなくpush後の配列の要素数である
自分はこれを忘れていて、Reactの勉強をしているときに少し悩まされました。

例えば、ある配列

```
const Arry = new Array();
```
に対して、さらに要素を追加したいとします。
そして、その配列の要素を別の変数に記憶させたいとき、自分はついつい次のように書いてしまいました。

```
const newArry = Array.push( "追加したい要素" );
```

この場合、タイトルにもある通り、pushは(要素を追加した後の)配列の要素数を戻り値として返すので、newArryは配列ではなく整数値になります。
それに気づかないままnewArryを配列のつもりで使用していくと、エラーが発生してしまいます。

なので、push後の配列の要素を別の配列変数に記憶したい場合、Reactでは次のように書くことができます。

```
const newArry = [...Arry, ("追加したい要素")];
```
この

```
...Arry
```

は、JavaScriptで使用可能なスプレッド構文と呼ばれる記述法で、その場で配列の要素を展開できます。

##まとめ

今回のpushの使い方については、正直Reactは関係ありませんが、自分がReactを使っていて躓いたので、備忘録としてReact関連の記事にさせていただきました。

また、スプレッド構文を用いて配列の要素を変更する手順は、Reactで何度も使うと思うので、参考程度に話させていただきました。

React関係なく、プログラミングで似たような点で躓いていらっしゃる方がおられれば、参考にしていただければ幸いです。
技術書同人誌博覧会に行った

2021/06/19に開催された技書博こと、技術書同人誌博覧会に参加しました。
https://gishohaku.dev/
こういった技術書系のイベントは初めてだったので、参加して感じたことなどを書いていきたいと思います。

###会場の雰囲気
会場は大きめの体育館ぐらいの広さでした。
各サークルごとに大体一つの長机が与えられていて、見本誌や展示を置かれていました。
今回は時間帯でグループごとに分けての参加のためか、特定のブースに人が集中するということもなく、
のんびりと自分の見たいブースを見ることができました。

###内容
OS系、読み物、クラウド、ハードウェア系、エンジニアスキルについてなど様々なジャンルがありました。
決済方法は、一部電子マネー対応のところもありましたが、ほとんどが現金のみでした。

###初めての参加で
最初はどういう感じで各ブースを回って良いか分からず、とりあえずぐるっと一周してみました。
その後、とりあえずざっくりと各ブースの見本誌を見せていただき、興味のあるところは質問したり、サークルの方と会話させていただきました。
最初はドキドキでしたが、最終的には興味のある分野の本も見つかり、4冊ほど全体で購入をさせていただきました。

###こんな人におすすめ
・勉強したいんだけど、なんか面白いジャンルないかな～って思っている人
・とにかく技術的なことが好きな方
・普段の業務から離れてリラックスしたい人
prepareメソッドを使う時にbindValueを省略する記述法があるらしい…！

#bindValueを省略しない書き方
prepareメソッドは変動値を持つSQLを実行したいときに使うメソッド。
基本的な流れは
変動値にプレースホルダーを持たせてprepareメソッドを記述
　　↓
prepareメソッドの返り値のPDOExeptionの中にあるbindValueメソッドで、
設定しているプレースホルダーに割り当てたい値、＄PDOデータ型定数を設定する
　　↓
executeで実行する
　　↓
fetchで実行結果の返り値を取得

```
$sql = 'select * from contacts where id = :id'; 
$stmt = $pdo->prepare($sql);
$stmt->bindValue('id', 3, PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetchAll();
```
#bindValueを省略する書き方
基本的な流れは
変動値にプレースホルダーを持たせてprepareメソッドを記述
　　↓
bindValueを使わない代わりに、exectueメソッドにarray型の引数をもたせる
　　↓
fetchで実行結果の返り値を取得

```
$params = [
 'id' => null,
 'your_name' => '追加名前4',
 'email' => 'params@udemy2.com',
 'url' => 'http://params2.com',
 'gender' => '0',
 'age' => '3',
 'contact' => 'ダミーテキスト4',
 'created_at' => null
];

$count = 0;
$colums = '';
$values = '';

foreach(array_keys($params) as $key){
  if($count++>0){
      $colums .= ',';
      $values .= ',';
  }
  $colums .= $key;
// 名前付きプレースホルダー
  $values .= ':'.$key;
}

$sql = "insert into contacts ($colums) values ($values)";
$stmt = $pdo->prepare($sql);

// bindValueを使わない代わりに、exectueメソッドにarray型の引数をもたせる
$stmt->execute($params);

/*
bindValueを省略しないバージョン
*/

// $stmt = $pdo->prepare($sql);
// $stmt->bindValue(':id',$params["id"],PDO::PARAM_INT);
// $stmt->bindValue(':your_name',$params["your_name"],PDO::PARAM_STR);
// $stmt->bindValue(':email',$params["email"],PDO::PARAM_STR);
// $stmt->bindValue(':url',$params["url"],PDO::PARAM_STR);
// $stmt->bindValue(':gender',$params["gender"],PDO::PARAM_INT);
// $stmt->bindValue(':age',$params["age"],PDO::PARAM_INT);
// $stmt->bindValue(':contact',$params["contact"],PDO::PARAM_STR);
// $stmt->bindValue(':created_at',$params["created_at"],PDO::PARAM_STR);
// $stmt->execute();


```
bindValueを省略しないバージョンは記述量がとてつもなく長くなる・・・
変動値が複数ある場合にはbindValueを使わない記述の方が見やすくて良い感じ！
ただ、bindValueを使わないことで$PDOデータ型変数が指定できないことがデメリットみたいだなあ :sweat_smile:
優れたチームになるための５つのルール（Google談）

「心理的安全性」という言葉はだいぶ有名だが、その大本となったGoogleのブログ記事について。

https://rework.withgoogle.com/blog/five-keys-to-a-successful-google-team/

1. 心理的安全性：私たちは、このチームで不安や恥ずかしさを感じることなくリスクを取ることができるか？
2. 信頼性：間に合うように質の高い作業を行うために、お互いに信頼できるか？
3. 構造と明快さ：チームの目標、役割、実行計画は明確か？
4. 仕事の意味：私たちは私たちひとりひとりにとって個人的に重要なことに取り組んでいるか？
5. 仕事のインパクト：私たちがしている仕事を根本的に信じているか？

ということが書いてある。

引用:

> We were dead wrong. Who is on a team matters less than how the team members interact, structure their work, and view their contributions. So much for that magical algorithm.

> We learned that there are five key dynamics that set successful teams apart from other teams at Google:

> 1. Psychological safety: Can we take risks on this team without feeling insecure or embarrassed?
2. Dependability: Can we count on each other to do high quality work on time?
3. Structure & clarity: Are goals, roles, and execution plans on our team clear?
4. Meaning of work: Are we working on something that is personally important for each of us?
5. Impact of work: Do we fundamentally believe that the work we’re doing matters?

> If you answered “yes” to the five questions above, congrats! You’re probably on a high-performing team. And if not, not all hope is lost. This is a shortcut to help you figure out where to focus, how to get better, and a way to talk about this concept with your teammates in a structured way.

## 心理的安全性

以下 [re:Work - The five keys to a successful Google team](https://rework.withgoogle.com/blog/five-keys-to-a-successful-google-team/) からDeepL翻訳によりまとめる。中でも「心理的安全性」が圧倒的だという。

### 引用
**心理的安全性は、私たちが発見した5つのダイナミクスの中で圧倒的に重要**であり、他の4つのダイナミクスを支えています。それはなぜでしょうか？チームメンバーの周りでリスクを取ることは簡単なように思えます。しかし、あなたが最近プロジェクトに参加したときのことを思い出してみてください。あなたは、自分だけが蚊帳の外にいるようなリスクを冒すことなく、ゴールへ向かうことができたでしょうか？それとも、「何も知らない人」と思われないように、何も聞かずにただ続行しましたか？

結局のところ、私たちは自分の能力や意識、積極性に対する他人の評価に悪影響を与えるような行動をとりたくないのです。このような自己防衛は、職場では自然な戦略ですが、効果的なチームワークには悪影響を及ぼします。逆に、チームメンバーがお互いに安心感を持てば持つほど、間違いを認めたり、パートナーになったり、新しい役割を担ったりする可能性が高くなります。そしてそれは、従業員にとって重要なほぼすべての側面に影響を与えます。**心理的安全性**が高いチームのメンバーは、グーグルを辞める可能性が低く、チームメイトの多様なアイデアを活用する可能性が高く、収益が増加し、エグゼクティブから効果的であると評価される頻度が2倍になります。


## 結論

https://rework.withgoogle.com/jp/guides/understanding-team-effectiveness/steps/introduction/

以上簡単に過去のメモ書きから。
参考になればさいわいです。
Pythonのpygame関連のコード

pygame関連のコードです
ボールゲーム

```
python:ballgame.py
import pygame
from pygame.locals import *
import sys


# def event(kvx):
#     # イベント処理
#     for event in pygame.event.get():  # イベントキューからキーボードやマウスの動きを取得
#         if event.type == QUIT:        # 閉じるボタンが押されたら終了
#             pygame.quit()             # Pygameの終了(ないと終われない)
#             sys.exit()                # 終了（ないとエラーで終了することになる）
#         elif event. type == KEYDOWN: 
#             if event.key==K_LEFT:
#                 kvx = -1#横方向の速度
#             elif event.key==K_RIGHT:
#                 kvx = +1#横方向の速度
#     return kvx            

            
# for event in pygame.event.get(): 
#     if event. type == QUIT: 
#         pygame. quit() 
#         sys. exit()
#     elif event. type == KEYDOWN: 
#         if event.key==K_LEFT:
#           pvx =-5#横方向の速度
#         elif event.key==K_RIGHT:
#           pvx =+5#横方向の速度            
            
pygame.init()                                 # Pygameの初期化
screen = pygame.display.set_mode((800, 600))  # 800*600の画面
px=120
py=100

vx = 1
vy = 1

kx =350
ky =500
kvx = 0
kh = 50
kw = 100

while True:
    screen.fill((255,255,255))                                      # 画面を白に
    pygame.draw.circle(screen,(200,10,10),(px,py),10)               # ●
         
    px = px + vx
    py = py + vy
    if py >= 600:
        vy = -1
    if px >=800:
        vx = -1
    if py <=0:
        vy = 1
    if px <=0:
        vx = 1
        
    if kx<px<kx+kw and ky<py<ky+kh:
        print("hit")
        vy *= -1
        py = ky
        
    #kvx =event(kvx)
    #event()
    for event in pygame.event.get():  # イベントキューからキーボードやマウスの動きを取得
        if event.type == QUIT:        # 閉じるボタンが押されたら終了
            pygame.quit()             # Pygameの終了(ないと終われない)
            sys.exit()                # 終了（ないとエラーで終了することになる）
        elif event. type == KEYDOWN: 
            if event.key==K_LEFT:
                kvx = -1#横方向の速度
            elif event.key==K_RIGHT:
                kvx = +1#横方向の速度
            elif event.key==K_UP:
                kvx = 0#横方向の速度
    
    
    kx = kx + kvx    
    pygame.draw.rect(screen, (255,0,0), Rect(kx, ky, kw,kh), 1) 
    pygame.display.update()                                         # 画面更新

```
windowsでiverilog その104

#概要　

windowsでiverilogやってみた。
avrのcpu書いてみた。
相対ジャンプrjmpの実装。


#考え方

オペコードを一致させる。
ジャンプ量(12bit)を取り出し、プログラムカウンターを更新する。

#アセンブラを書く。

```
	ldi r16, 0x00
	ldi r31, 0x40
loop:  inc r16
	inc r31
	cpi r16, 0x01a
	breq tugi
	rjmp loop
tugi:  nop

```

#rom化する。

```
rom[0] <= 16'hE000; // 	ldi r16, 0x00
rom[1] <= 16'hE4F0; // 	ldi r31, 0x40
rom[2] <= 16'h9503; // loop:  inc r16
rom[3] <= 16'h95F3; // 	inc r31
rom[4] <= 16'h310A; // 	cpi r16, 0x01a
rom[5] <= 16'hF009; // 	breq tugi
rom[6] <= 16'hCFFB; // 	rjmp loop
rom[7] <= 16'h0000; // tugi:  nop


```

#rjmpを書く

```
	parameter CMD_RJMP = 16'b1100xxxxxxxxxxxx;

				if (opcode[15:12] == CMD_RJMP[15:12])
				begin
					pc <= pc + {opcode[11:0]} + 1;
				end
				else
				begin
					pc <= pc + 1'd1;
				end

```

#テストベンチを書く。

```
module test;
	reg clk,
		rst;
	wire [7:0] outport;
	avr u(.clk(clk), .rst(rst), .porta(outport));
	initial
	begin
		$monitor("%s", outport);
		clk = 0;
		rst = 1;
		#2
			rst = 0;
		#2
			rst = 1;
		#330
			$finish;
	end
	always
		#1
			clk = ~clk;
endmodule

```

#実行結果

```


@
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z


```

以上。
node で TypeScript プロジェクトの新規作成手順 

# 今までのあらすじ
https://qiita.com/x_Wa-taro_x/private/d41fbe27a005c1e8570a

既に誰かが作ったプロジェクトを動かしたり触ったりすることはできたけど、そもそも新規プロジェクトを作成するにはどうすんの？ということでこの記事が決定版
覚えて置く必要は無いけどやり方知らないとつらい。
以下、全て最小構成

# 環境
|||Version|
|:-:|:-:|:-:|
|OS|Windows 10|   |
|EDI|VSCode|?|

# 手順
## 初期化
### npm init
```terminal:terminal
npm init
```
package.jsonが作成されます。
このプロジェクトがnpmの管理下に置かれます。
プロジェクトの基本的な情報が入ってます。
インストールしたパッケージが追加されていきます。

## TypeScript
### TypeScriptのインストール
```terminal:terminal
npm install --save-dev typescript
```

node_modulesの配下にts系のライブラリをインストールする
### TypeScript初期化
```terminal:terminal
tsc --init
```

tsconfig.jsonを作成する
## Webpack
### webpackのインストール
```terminal:terminal
npm install --save-dev webpack webpack-cli ts-loader
```
おなじみwebpackのインストール

### webpack.config.jsの作成
```javascript:{homedirectory}/webpack.config.js
module.exports = {
    mode: "development",
    entry: "./typescript/script.js"
};

```
最小構成
他にも色々できる
時間があれば公式ドキュメント見たほうが良い

https://webpack.js.org/configuration/

ググれば日本語で解説してるページも出てくる

## index.html作成
サンプル

```html:{homedirectory}/index.html
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>a!</title>
</head>

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

</html>
```
(最小構成じゃない....)
キャラセットにutf-8を指定してたり
サーバーのファイルを更新した時にブラウザキャッシュが残らないようにしてたり
してるけど実質最小構成

## script.ts(名前は何でもよい)の作成
```typescript:{homedirectory}/typescript/script.ts
console.log('a!');
```
コンソールにa!と表示させます
`script.ts`でなくても問題無いけど、その場合は`webpack.config.js`を修正せなあかんです。

## 小休止
ここまで終われば後は必要なパッケージを入れるだけ
##
## pixi.jsインストール
```terminal:terminal
npm install @types/pixi.js --save-dev
```
npm install pixi.js + npm install @types/pixi.jsでも良い。変わらんけど
--save-devはローカルインストールを表す

# 終わり
あとはいつものビルドコマンド+Live Server
ブラウザのコンソールに出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676040/75382423-da37-7827-ca6d-07c996aec916.png)


# 参考
https://qiita.com/EBIHARA_kenji/items/31b7c1c62426bdabd263
CakePHP v3.5.x から v4.2.x へのバージョンアップについてのメモ

CakePHP 3.5.x から 4.2.x へバージョンアップする際に、苦労した点などをマトメていきます。

この記事は徐々に、更新していく予定です。

私が携わった案件では、サーバをインターネット環境に接続できないという制約があったため、composerは使用せず、全て手動でバージョンアップしています。

CakePHP4.xの移行ガイドに書かれていることについては、この記事では触れません。
移行ガイドだけ読んでいても気づきづらいことや、予め一覧化されていた方がよい変更点などをマトメていきます。

↓　v4.2の移行ガイドはこちら　↓
https://book.cakephp.org/4/ja/appendices/4-2-migration-guide.html
<br>

<table>
<h1>記述方法の変更点マトメ</h1>
現行のソースコードにこれらの記述方法の変更点を反映させて、新フレームワークに乗せ換えるだけで、ほぼほぼ動く様になると思います。<br>
（もちろん、/src/Config配下の設定が正しく移行されていることが必要ですが。）<br><br>
逆に言うと、これらの変更点を事前に把握していないと、<br>
■エラー出る→■公式サイトで変更点を調べる→■修正する→■それを類似の全てのファイルに反映させる<br>
を繰り返すハメになります。（私のように・・・・・）<br><br>
記述方法の変更によるエラー「以外」については、フレームワークの個々の機能（ウィジェットとか）の問題なので、一個一個調べていくしかないと思います。
<tr><td><h4>分類</h4></td>
<td><h4>v3.5.x</h4></td>
<td><h4>v4.2.x</h4></td>
<td><h4>備考</h4></td></tr>

<tr><td>Model</td>
<td>public function initialize(array $config)</td>
<td>public function initialize(array $config) : void</td>
<td></td></tr>

<tr><td>View</td>
<td>$this->viewBuilder()->layout('hoge');</td>
<td>$this->viewBuilder()->setLayout('hoge');</td>
<td></td></tr>

<tr><td>Controller</td>
<td>public function initialize()</td>
<td>public function initialize(): void</td>
<td></td></tr>

<tr><td>Controller</td>
<td>$hoge = $this->Hoges->newEntity();</td>
<td>$hoge = $this->Hoges->newEmptyEntity();</td>
<td>Hogesはコントローラーの名前<br>(HogesController)</td></tr>

<tr><td>Table</td>
<td>public function validationDefault(Validator $validator)</td>
<td>public function validationDefault(Validator $validator): Validator</td>
<td></td></tr>

<tr><td>Session関連</td>
<td>$this->request->session()</td>
<td>$this->request->getSession()</td>
<td></td></tr>

<tr><td>---</td><td>---</td><td>---</td><td>---</td></tr>

</table>
<br>
（続きは随時、更新していきます。）
【Next.js】環境変数の取り扱いについて

Next.jsまとめシリーズ。
アウトプットとしてまとめていきます。
初心者記事のため、内容に誤った点等ありましたらご指摘いただけると嬉しいです。

# 環境変数とは
ここでの環境変数とは、アプリケーション内で利用できる変数のこと。
例えばAPIによって外部アプリケーションからデータ取得する際に必要になるAPIキーなど、環境変数として定義します。

# Next.jsがサポートする環境
Next.jsでは、

- development
- production
- test

の3つの環境をサポートしています。


# ファイルの種類
**```.env```** : すべての環境に対する環境変数（デフォルト値）
**```.env.local ```**: リポジトリに含めてはいけない環境変数を書く（前述のAPIキーなど外部に露出したら困る秘密情報）。すべての環境の環境変数を上書きする。
**```.env.[environment]```** : 特定の環境に対する環境変数（デフォルト値）。```.env.development``` など
**```.env.[environment].local```** : 特定環境のローカル用環境変数。特定の環境に対する環境変数を上書き。```.env.development.local``` など

#### ```.env.[environment]```と```.env.[environment].local``` について
.env.developmentと.env.development.localは、```next dev```コマンド実行時に使用されます。
.env.productionと.env.production.localは、```next build```と```next start```コマンド実行時に使用されます。
.env.testと.env.test.localは、テスト目的に特定の環境変数を設定する必要がある場合に作成します。また、テスト環境においては``.env.local``ファイルはロードされないため注意が必要です。

# 各ファイルの優先順位
**```.env.[environment].local``` > ```.env.local ``` > ```.env.[environment]``` > ```.env```**の順で優先されます。

# 環境変数の設定方法と参照方法
## 設定方法
**ルート**に```.env.local```ファイルを作成し、変数を定義します。

```
API_KEY='my-secret-api-key'
```

## 参照方法
下記のように、```process.env.XXXXX```と書くことで参照することができます。

```javascript:index.jsx
export async function getStaticProps() {
  const db = await myDB(process.env.API_KEY)
  // ...
}

```

# クライアント側で使いたいとき
クライアント側で使う環境変数には``NEXT_PUBLIC_``　をつけて定義することで、ブラウザに送信されるJavaScript内に環境変数の値がインライン化され、クライアント側で使用できます。

```
NEXT_PUBLIC_ID=advresgfsl
```

```javascript:index.jsx
export default function Page(){
const { NEXT_PUBLIC_ID } = process.env
console.log(NEXT_PUBLIC_ID) // advresgfsl
// ...
```

当然ですが、**公開したくない秘密情報については``NEXT_PUBLIC_``　をつけず定義します。**

#.gitignoreへ追加
``.env.loval``と``.env.[environment].local``については秘密情報を定義するので、**.gitignoreファイルに追加しておきます。**
公式ドキュメントによると、その他.envファイルについてはリポジトリに含めてデフォルト値設定のため使用することが推奨されています。
>Note: .env, .env.development, and .env.production files should be included in your repository as they define defaults. .env*.local should be added to .gitignore, as those files are intended to be ignored. .env.local is where secrets can be stored.
[公式Docより](https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables)

# 参考
https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables
EC-CUBE4でgmailを使うpostfixリレー[メール設定]

# ECCUBE4のメール設定
documentaionを見るとMailCatcherの紹介があります。
https://doc4.ec-cube.net/development-tools/mail-catcher

これもこれで練習なんで全然いいと思うんですけど、しかし、実際に手元にメールが届いたりというのを確認したいじゃないですか。

と、いうわけで会員登録などのメールを受信することを目標にメール設定を行います。

#遠回り
下記URLや.envファイルの記述を参考にgmailの設定をしてみたのですが、なぜか上手くいかなかったので、ECCUBEからの送信をpostfixを挟んでgmailのsmtpを使って送信するという方法を取ります。
https://www.mahirokazuko.com/entry/2019/05/15/234746

![SoWkIImgAStDuKfCJyqhKN1rTWvrSbL8B5PGSdNM1R6Le385-SKbQPaLK5vwRc9c3XTKjQuTJ5R12iWgAh4oCkM2YW0b8OfXKgOMvbmEgNafG3i1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447807/41b95f47-82ff-33e4-b48f-c7bf2ef81fd4.png)


#postfix設定
postfixはunix系の最も標準的なMTAの一つです。

postfixからgmailのsmtpを使う設定をしていきます。
参考サイトをあげておきます。
１の通りに行い、2がアプリケーションパスワードで、3がtls使う際のメモ。

1. https://qiita.com/phantom1793/items/03c95d0a3634e8c44c42
2. https://support.google.com/accounts/answer/185833?hl=ja
3. https://t-min.hatenablog.com/entry/2018/02/10/002326

届くか届かないかのテストをsendmailとかで行っても良いかもしれませんが、あまりやると成功した時に[再送設定](https://www.conversion.co.jp/technology/blog/-/detail/=/blog_id=6412350)に従いアホほど届くハメになるので気をつけたい所です。


私はec2で立ち上げていたので587ポートを開放します。
https://stackoverflow.com/questions/45036620/how-do-i-use-gmail-smtp-with-port-587-on-aws-ec2

# ECCUBEからメール送信
以上の設定でpostfixからgmailを使って送信できるとようになっているかと思いますので、
次はECCUBEから会員登録のメールが送れているか確認しましょう。

.envのSMTP_URLはデフォルトで大丈夫です。
MAILER_URL=smtp://localhost:25


次のようなメールが来たら成功です。
![スクリーンショット 2021-06-21 1.46.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447807/723b46d9-ecf2-d964-ddfd-27ec0406ecd6.png)
そのまま、コピペーでできます！LineNotify api でlineグループにメッセージを送信する(PHP)

①Lineグループを作る。
・Line Notifyのユーザーを友たちに追加します。
・Lineグループを作成します。
・Line Notifyのユーザーをグループに招待します。

②下記Urlにログインしてトークンを発行する。

https://notify-bot.line.me/ja/

こちらの画面から発行してください。
![notigy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1668939/52ea37b2-21e2-67bb-d55d-52d1d5316748.png)

③下記コードをそのまま使えば送信できます。

```php:lineNoftify.php
function send($lineNotifyToken, $lineMessage)
{

    $query = http_build_query(['message' => $lineMessage]);
    $header = [
            'Content-Type: application/x-www-form-urlencoded',
            'Authorization: Bearer ' . $lineNotifyToken,
            'Content-Length: ' . strlen($query)
    ];
    $ch = curl_init('https://notify-api.line.me/api/notify');
    $options = [
        CURLOPT_RETURNTRANSFER  => true,
        CURLOPT_POST            => true,
        CURLOPT_HTTPHEADER      => $header,
        CURLOPT_POSTFIELDS      => $query
    ];
    curl_setopt($ch,CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt_array($ch, $options);
    // APIリクエスト
    $result = curl_exec($ch);
    $info = curl_getinfo($ch);

    // リクエスト結果取得
    $errno = curl_errno($ch);
    $error = curl_error($ch);
    curl_close($ch);
    if (CURLE_OK !== $errno) {
        Log::error();
    }
    return $result;
} 

$lineNotifyToken = '〇〇〇〇〇〇〇〇';//こちらトークンを入れます。
$lineMessage = 'テスト'
sendLineNotify($lineNotifyToken, $lineMessage);

```
React + Material UIで動的にMaterialアイコンを表示する

Material UIのアイコンを入力とか、データループとかから動的に作成したかった

# やりかた

サイドバーのデータを表示する例


```react
import * as Icons from '@material-ui/icons/'

const datas = [
    {
        icon: 'Home',
        title: 'ホーム',
        to: '/home',
    }
]

function Sidebar(){
  return (
    <ul>
      {datas.map((data, index) => (
        <li>{React.createElement(Icons[data.icon])}</li>
      ))}
    </ul>
  )
}

```

`import * as Icons from '@material-ui/icons/'`で
モジュールのコンテンツすべてをインポートしています。[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents)

あとは、データをループして`React.createElement`でReact要素で対象のアイコンを作成しています

ちなみにTSでやる際は`Icons[data.icon]`でエラー吐いたので下記のように、Materialアイコンのkeyを使用するようにしました。

```typescript
import * as Icons from '@material-ui/icons/';

interface route {
  icon: keyof typeof Icons;
  title: string;
  to: string;
}

const datas: route[] = [
    {
        icon: 'Home',
        title: 'ホーム',
        to: '/home',
    }
]
```
【Javascript】配列によく使われる関数ー学習ノート

# 初めに
javascriptの配列によく使われる関数について学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

# slice()メソッド
配列の中身を何番目から何番目までを切り出して、新しい配列を生成するメソッド。元の配列の値は変更されない。

# 使ってみる
indexは0から始まるので配列の左から4番目の値からスタートします。何番目までかを指定する第２引数は省略することができ、その場合は最後までがindexになります。

```javascript
let names = ['Tanaka', 'Suzuki', 'Honda', 'Matsuyama', 'Kobayashi'];

console.log(names.slice(3));  
//(2) ["Matsuyama", "Kobayashi"]
```
第２引数を指定した場合、その引数の含まないindexが範囲になります。以下のように第２引数として４を指定した場合、新しく生成される配列の最後の値は配列の左から3番目(0,1,2,3)の'Matsuyama'になります。

```javascript
console.log(names.slice(2,4));
//(2) ["Honda", "Matsuyama"]
```
代入する引数の値がマイナス（-)だった場合には配列の一番右側から-1,-2,-3と数えられ、-1番目から指定した引数の-n番目までの値を持つ配列が生成されます。

```javascript
console.log(names.slice(-1));
//["Kobayashi"]

console.log(names.slice(-2));
//(2) ["Matsuyama", "Kobayashi"]
```

これを応用すれば左から2番目からスタートし、右から数えて2番目までを含まない値を新しい配列として生成することができます。

```javascript
console.log(names.slice(1, -2));
//(2) ["Suzuki", "Honda"]
```

また、sliceメソッドで引数を指定しないと、対象の配列のコピーが作れます。

```javascript
console.log(names.slice());
//(5) ["Tanaka", "Suzuki", "Honda", "Matsuyama", "Kobayashi"]
```

これはスプレッド構文を使った結果と同じです。配列のコピーを作るとき、slice()メソッドを使うかスプレッド構文を使うかは人の好みでありどちらを使ってもいいです。

```javascript
console.log([...names]);
//(5) ["Tanaka", "Suzuki", "Honda", "Matsuyama", "Kobayashi"]
```

# splice()メソッド
生成する配列はslice()メソッドと全く同じですが、元の配列が変更されるところが違います。このようにsplice()メソッドを使うと切り出した配列の部分を除いたものが元の配列になります。

```javascript
console.log(names.splice(3));
//(2) ["Matsuyama", "Kobayashi"]
console.log(names);
//(3) ["Tanaka", "Suzuki", "Honda"]
```

# reverse()メソッド
配列の要素の順番を逆にするメソッドです。引数は取りません。

```javascript
console.log(names.reverse());
//(5) ["Kobayashi", "Matsuyama", "Honda", "Suzuki", "Tanaka"]
```

reverse()メソッドは元の配列も変更してしまうため、注意が必要です。

```javascript
console.log(names);
//(5) ["Kobayashi", "Matsuyama", "Honda", "Suzuki", "Tanaka"]
```

# concat()メソッド
2つの配列の要素同士をくっ付けて一つの新しい配列を生成します。元の配列は変更されません。

```javascript
const alpha = ['c', 'd', 'e', 'f', 'g'];
const nums = [1, 2, 3, 4, 5];
const letters = alpha.concat(nums);
console.log(letters);
//(10) ["c", "d", "e", "f", "g", 1, 2, 3, 4, 5]
```

これもスプレッドメソッドを使えば同じ配列を作ることができます。

```javascript
const letters2 = [...alpha, ...nums];
console.log(letters2);
//(10) ["c", "d", "e", "f", "g", 1, 2, 3, 4, 5]
```
これも好みによるもので、どちらでも構いません。

# join()メソッド
引数に文字列を指定し、配列の要素同士をその指定した文字列で繋げます。元の配列は変更されません。

```javascript
const nums = [1, 2, 3, 4, 5];
console.log(nums.join(' * '));
//1 * 2 * 3 * 4 * 5
```

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
Go言語でRSAを実装してみる

Go言語で公開鍵暗号RSAを実装してみました。
こちらのPythonコードをGo言語に翻訳しただけの記事です。
大変参考になるので、この記事を読むよりこっちのほうがいいと思います。

https://qiita.com/QUANON/items/e7b181dd08f2f0b4fdbe

## コード

以下がコードとなりますが、変な書き方とかありましたら教えて欲しいです、、、
思ったより実装がシンプルだったことに驚きました。

一応Githubにも載せてます

https://github.com/greenteabiscuit/rsa-golang

```main.go
package main

import (
	"fmt"
	"math/big"
)

type publicKey struct {
	E int
	N int
}

type privateKey struct {
	D int
	N int
}

func main() {
	publicKey, privateKey := generateKeys(101, 3259)
	plainText := "This is a secret"
	encryptedText := encrypt(plainText, publicKey)
	decryptedText := decrypt(encryptedText, privateKey)
	fmt.Println("Public Key:", publicKey.E, publicKey.N)
	fmt.Println("Private Key:", privateKey.D, privateKey.N)
	fmt.Println("Message:", plainText)
	fmt.Println("Encrypted Text:", encryptedText)
	fmt.Println("Decrypted Text:", decryptedText)
}

func generateKeys(p int, q int) (public publicKey, secret privateKey) {
	N := p * q
	L := lcm(p-1, q-1)
	var D, E int
	for i := 2; i < L; i++ {
		if gcd(i, L) == 1 {
			E = i
			break
		}
	}
	for i := 2; i < L; i++ {
		if (E*i)%L == 1 {
			D = i
			break
		}
	}
	return publicKey{E: E, N: N}, privateKey{D: D, N: N}
}

func lcm(p int, q int) int {
	return (p * q) / gcd(p, q)
}

func gcd(p int, q int) int {
	// https://play.golang.org/p/SmzvkDjYlb
	for q != 0 {
		t := q
		q = p % q
		p = t
	}
	return p
}

func encrypt(plainText string, publicKey publicKey) string {
	E, N := publicKey.E, publicKey.N
	resultString := ""
	for _, char := range plainText {
		bigChar := big.NewInt(int64(char))
		bigE := big.NewInt(int64(E))
		bigN := big.NewInt(int64(N))

		res := *bigChar.Exp(bigChar, bigE, bigN)
		resultString += string(rune(res.Int64()))
	}
	return resultString
}

func decrypt(encryptedText string, privateKey privateKey) string {
	D, N := privateKey.D, privateKey.N
	resultString := ""
	for _, char := range encryptedText {
		bigChar := big.NewInt(int64(char))
		bigD := big.NewInt(int64(D))
		bigN := big.NewInt(int64(N))

		res := *bigChar.Exp(bigChar, bigD, bigN)
		resultString += string(rune(res.Int64()))
	}
	return resultString
}

```

## 走らせてみる

```
(master) ✗ go run main.go
Public Key: 7 329159
Private Key: 46543 329159
Message: This is a secret
Encrypted Text: 𕖜𪮖𸖗𳌒𣸲𸖗𳌒𣸲񍱄𣸲𳌒段𗁣񆏍段𫲮
Decrypted Text: This is a secret
```
【Java】Map+条件分岐をした際にうまくいかなかった原因

#起こった問題
Listの中に入っているMapを繰り返し処理で取り出して条件分岐させたのですが、うまくいきませんでした。

##問題のコード

```java
List<Map<String, String>> list = new ArrayList<Map<String,String>>();
Map<String, String> map = new HashMap<String, String>();
map.put("name", "hello");
map.put("name2", "hello2");
list.add(map);
for(Map<String, String> map2 : list) {
	if(map2.get("name") == "hello") {
		System.out.println("hi");
	}
}

//　=>表示されない
```

##原因
Javaの文字列比較で==演算子は使うことがNGだったようです。
簡単に紹介すると
比較している内容が
メモリ上のアドレスを比較するのか(==演算子)
メモリ上のアドレスに置いてあるデータを比較するのかの違いだそうです。(equalsメソッド)


下記の記事を参考にしました。
[[Java]文字列比較で==はダメ、equalsが正解！・・・なんだけど、その理由をちゃんと知ろう！](https://gabekore.org/java-equals-string-compare)



##解決策
上でも軽く触れていますが、==からequalsメソッドに変えることで解決します。

```java
List<Map<String, String>> list = new ArrayList<Map<String,String>>();
Map<String, String> map = new HashMap<String, String>();
map.put("name", "hello");
map.put("name2", "hello2");
list.add(map);
for(Map<String, String> map2 : list) {
	if(map2.get("name").equals("hello")) {
		System.out.println("hi");
	}
}

//　=>hi
//　しっかり表示されました。
```

##おわりに
springを用いてDBから値を取り出して加工するプログラムを書いている際に起こった問題でした。
DBから値を取り出していたので、文字コードが変わっているんじゃないかと考えたのですが、全くダメで、結局解決策はすごく単純でした。
自分はまだスキルが乏しく、あまり気づけないことも多いので、もっと勉強していきたいと思います。
「続・素数一覧を求めるワンライナー各言語まとめ」を参考にWolframAlphaとSymPy Liveでやってみた。

(オリジナルポスト)

https://qiita.com/ytaki0801/items/dd9a4b90e405c120efc0

#WolframAlphaで

https://www.wolframalpha.com/input/?i=100%E6%9C%AA%E6%BA%80%E3%81%AE%E7%B4%A0%E6%95%B0&lang=ja


#SymPy Liveで

https://live.sympy.org/


print([i for i in sieve.primerange(1, 99)])

[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]

#参考

https://qiita.com/mrrclb48z/items/673f481eb369e900c1b2
VSCode settings.json エラー

VSCodeで「ユーザー設定に書き込めません。ユーザー設定を開いて、ファイル内のエラー/警告を修正してからもう一度お試しください。」というエラーが発生した。
![VSCode setting.jsonエラーメッセージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/49dd558b-59ad-029b-0e0a-12224cfdaaec.jpeg)

```json
{
    "todo-tree.tree.showScanModeButton": false,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "files.autoSave": "afterDelay",
    "editor.fontFamily": "Ricty Diminished",
    "editor.minimap.enabled": false,
    "python.pythonPath": "C:\\Users\\admin\\anaconda3\\envs\\py38\\python.exe",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "html.autoClosingTags": true,
    "files.associations": {
        "*.html": "html"
    },
    "window.zoomLevel": 1,
    "workbench.editorAssociations": [
        {
            "viewType": "jupyter.notebook.ipynb",
            "filenamePattern": "*.ipynb"
        }
    ]
    "files.trimTrailingWhitespace": true
    //"python.pythonPath": "C:\\Users\\admin\\anaconda3\\envs\\py38",
    //"python.condaPath": "C:\\Users\\admin\\Anaconda3\\Scripts\\conda.exe"
    "files.associations": {
        "*.erb": "erb"
    }
    "emmet.includeLanguages": {
        "erb": "html"
    }
}
```

- 実際のsetting.json
![VSCode setting.jsonエラー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/445a063b-8753-9cff-ec8b-a8e33e84bb11.jpeg)


 なにがおきているのか。。

 - ①拡張機能のOpen with Live Serverも使えなくなってる。
 - ②htmlファイルの言語モードが「Djnago Template」になってしまっていて、HTMLに切り替えてもすぐ「Djnago Template」に戻ってしまう。
 
それぞれのプロパティの中にカンマがなかったことが原因だったよう。
とりあえずエラーのダイアログは表示されなくなったが①と②は解消されないので調査継続。

②は言語モードをDjango TemplateからHTMLに変更したら直った。

- 修正前
![言語モードDjango Template.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/c16bf11c-49a5-127c-252f-383b0eb1ca91.jpeg)


- 修正後
![言語モードHTML.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/f3d6cdd3-8fc6-fcb1-a554-84f60fa1cb09.jpeg)

ただ、これ1ファイルずつ変えていかなきゃいけないのか。。

①はHTMLファイルを開いて↓のGo Liveをクリックしたら同じ挙動になった。
![言語モードHTML.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/4bd1ed15-0ffe-fdcb-2bb7-1383b983cb93.jpeg)

ただ以前はHTMLファイルを右クリックしたら「Open with Live Server」が選択できたのに。。

# 原因
setting.jsonのfiles.associationsが悪さをしていたよう。
files.associationsは「言語に対するファイルの関連付け」をするプロパティ。
なんでかわからんがfiles.associationsが2つ出来てしまっていた。

files.associations": { "*.html": "html" }でhtmlファイルを言語モード「HTML」で開く設定にしているのに
ファイル下部のfiles.associationsがファイル上部のfiles.associationsを上書いてしまって、
files.associations": { "*.html": "html" }の設定を削除してしまったことが原因。
![VSCode setting.jsonエラー解消後.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133799/7bf338e9-1fb9-d0b8-c57d-569fe785dfb6.jpeg)
ファイル下部の"files.associations": { "*.erb": "erb" }, をコメントしたら
htmlファイルの言語モードがデフォルトでHTMLになった。
htmlファイルを右クリックしてOpen with Live Serverも表示されるようになった。
'--jsx' フラグが指定されていないと、JSX を使用できません。のエラーの解決方法


create-react-appをつかって実行(npm start)しようとした時に上記のようなエラーが出た。

tsconfig.jsonの```"jsx": "react-jsx"```となっていたところを、```"jsx": "react"```と直したらエラーがなくなった。

参考にしたサイト https://terrblog.com/reacttypescript/
【Rails】devise_token_authのUnpermitted parameter: :registrationの対処法

<h2>症状</h2>
devise_token_authを適用したユーザーの登録やアップデートをしようとしたとき、下記エラーが発生しました。
翻訳すると「許可されていないパラメータ::登録」でした。registorationが登録されていないようです。

```terminal:エラーｖ
Unpermitted parameter: :registration
```

該当のRegistorationファイルです。

```ruby:RegistrationsController.rb
class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
   private
     def sign_up_params
         params.permit(:name,:email, :img, :password, :password_confirmation,:address)
     end
      
     def account_update_params
         params.permit(:name, :registration, :email, :img)
     end
emd
```

<h2>解決方法</h2>
Registorationでrequire(:registration)を入れると、エラーが解消しました。


```ruby:RegistrationsController.rb
class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
   private
     #ユーザー登録時に使用
     def sign_up_params
         params.require(:registration).permit(:name,:email, :img, :password, :password_confirmation,:address)
     end
     #ユーザー更新時に使用
     def account_update_params
         params.require(:registration).permit(:name, :registration, :email, :img)
     end
emd
```


<h2>参考</h2>


https://qiita.com/terufumi1122/items/40cbe5c37b381dfac13e
[メモ]DjangoのLogin、Logout機能

Djangoのログイン機能に少し引っかかってしまったので、メモします。
startappはDjangoで作成したアプリ内という意味です。

```python:startapp/urls.py
from django.urls import path
from .views import homefunc, loginfunc, logoutfunc

app_name = 'blog'

urlpatterns = [
    path('', homefunc, name='index'),
    path('login/', loginfunc, name='login'),
    path('logout/', logoutfunc, name='logout'),
]
```


```python:startapp/view.py
from django.shortcuts import render, redirect,
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required

@login_required
def homefunc(request):
    return render(request, 'index.html', {})


def loginfunc(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('blog:index')
        else:
            return render(request, 'login.html', {})

    return render(request, 'login.html', {})


def logoutfunc(request):
    logout(request)
    return redirect('blog:login')
```

```python:setting.py
LOGIN_URL = 'blog:login'
LOGIN_REDIRECT_URL = 'blog:index'
```
【Microsoft Azure AI Fundamentals】に1週間で合格した話

## はじめに

昨年の4月に新入社員として会社に入社し、その後はがむしゃらに資格取得を継続していました。

そして、今年の6月のはじめにやっとAWSの資格をコンプリートしました。ちょっとここらで今まで触れてこなかったAzureの資格にも手を伸ばしてみようと思い、今回、**AI-900: Microsoft Azure AI Fundamentals**に合格したので、その記録を残しておこうと思います。

## 資格歴
+ AWS12冠コンプリート
+ Oracle Java ゴールド
+ AzureはIT fundamentalsのみ
+ 基本情報技術者試験
+ CompTIA少々

## 受験を終えて
私としても驚くことに、この試験に向けて特段何かを勉強をしたということはありません。

AWSの知識と大学生の時のAI研究の記憶を元に**どうにかなるだろう**といった軽い気持ちで挑んだ結果、すんなりと合格してしまいました。

試験が終わった後の感想としては、一部専門のAzureのAIサービスの使い方について出題されていたので、そこがなかなか点に繋がらなかったなと感じています。

今後受験を控えている方にアドバイスとしては、下記Azureサービスを中心的に学習してから試験に挑んでもらえればと思います。

+ Azure Machine Learning
+ Azure Machine Learning スタジオ（上記の一部？）<br>
※ いくらAIの知識があってもここらへんについてはサービスの仕様を問われることがあるためある程度の知識がないと勝負になりません・・

## 終わりに
さて、久々にQiitaの記事を書いた気がします。今までは資格を取得することだけに夢中になっていましたが、今後は振り返り、アウトプットをしっかりしていこうと思っています。

既に取得済みの資格に関しても、今後振り返りを残していこうと思うので、今後資格取得を考えている方の参考になれば幸いです。

ここまで読んでいただき誠にありがとうございました。
Windows10からUbuntu 20.04でログイン中のデスクトップ（コンソール）へリモート接続する方法

件名について、2日近くハマってしまいました…。

## 環境

### 接続元

- Windows 10 バージョン 20H2 （OSビルド 19042.985）

### 接続先

- Ubuntu 20.04（デフォルトのウィンドウマネージャー）

```shell
# cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.2 LTS"
```

## 手順

### 1. 画面共有を有効にする（Ubuntu側）

- [設定]－[共有]－[画面共有]を有効にする。
  - 「このスクリーンを操作する接続を許可する」のチェックをOnにする。
  - 「パスワードを要求する」を選択する。
  - 任意のパスワードを指定する。**Ubuntuのログインユーザーのパスワードとは別に管理する必要のあるパスワードです。8文字までの制限があります。**
![share_display.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275313/51cf0465-8a1c-1422-cb8a-01601731c05c.png)

#### ハマったところ

- 設定画面に「画面共有」の項目がなかった。

#### 対応方法

- vinoパッケージをインストールする。

```shell
$ sudo apt install vino
```

### 2. XRDPサービスを設定する（Ubuntu側）

- パッケージをインストールする。

```shell
$ sudo apt install xrdp
```

- `/etc/xrdp/xrdp.ini`を編集する。（参考URL: [1](https://forums.ubuntulinux.jp/viewtopic.php?id=13257) [2](https://askubuntu.com/questions/235905/use-xrdp-to-connect-to-desktop-session) [3](https://www.yargry.com/notebook/xrdp.html) ）
  - 以下のブロックを追加する。
    - 追加する位置は`Session types`コメント ブロックの下。「リモートデスクトップ接続」で接続した直後に表示される「Session」のドロップダウン リストの位置に対応しているので、コンソール接続を優先したい場合は、先頭に追加する。
    - `username=`の箇所は`na`でも未設定でも、どちらでも影響ありませんでした。

```text
[console]
name=console
lib=libvnc.so
username=
password=ask
ip=127.0.0.1
port=5900
```

- xrdpサービスを再起動する。

```shell
$ sudo systemctl restart xrdp
```

### 3. vinoの通信時の暗号化を解除する（Ubuntu側）

- 以下のコマンドを実行する。

```shell
$ gsettings set org.gnome.Vino require-encryption false
```

#### ハマったポイント

- 上記コマンドをrootユーザーで実行したり、`sudo`を先頭に付加して実行してしまっていた。
  - 接続する先は、ユーザーがログインしているデスクトップなので、そのユーザーとしてコマンドを実行する必要があることに長時間気づいていませんでした。

### 4. Windowsからリモートデスクトップ接続でアクセスする。

- 「Session」で上記「2.」で追加したXRDPのセッション タイプ「console」を選択する。
- 「password」に上記「1.」で設定した画面共有用のパスワードを入力して[OK]ボタンをクリックする。

## 補足

リモートデスクトップ接続のウィンドウを最大化しても、接続先の画面は最大化されません。
「[VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/)」だと、接続先の「Properties」→「Options」タブ→「Scaling」を「Automatic」にしておけば、ウィンドウ最大化にも対応しているので便利だと思います。また、VNC Viewrの場合はVNC接続が前提なので、リモートデスクトップ接続のようにSessionを選ぶ必要がありません。（Scoopからも`scoop install vncviewer`でインストールできるので。）
DjangoでDBを一括更新する

### Djangoのbulk_update

DBのクレンジング作業などで一括更新する時、Djangoであればbulk_updateが使用できる。

```
Object.objects.bulk_update(object_list, fields=['name'])
```

第一引数には更新対象のobjectのリスト、fieldsには更新したいカラムを指定する。
この時、fieldsに設定しないカラムは更新されない。


### bulk_updateで実行されるクエリ

では、bulk_updateではどのようなクエリが流れるだろうか。
以下のようなモデルに対して、bulk_updateを流してみる。

```
class Customer(models.Model):
    name = models.CharField(max_length=255)
    rate = models.IntegerField(default=0)
```

```
from polls.models import Customer
import random

def run():
    customers = Customer.objects.all()

    update_customer_list = []

    for customer in customers:
        customer.rate = random.randrange(10)

        update_customer_list.append(customer)

    Customer.objects.bulk_update(update_customer_list, fields=['rate'])
```

流れるupdateは以下の通り。

```
UPDATE `customer` SET `rate` = CASE WHEN (`customer`.`id` = 1) THEN 5 WHEN (`customer`.`id` = 2) THEN 4 WHEN (`customer`.`id` = 3) THEN 3 ELSE NULL END WHERE `customer`.`id` IN (1, 2, 3);
```

更新対象をWhere句で選択して、更新値はcase句で区切っていく形。
1回ずつsaveする形よりは実行は早い。
VRレベルデザイン


https://github.com/ClusterVR/ClusterCreatorKitSample
https://styly.cc/ja/tips/probuilder-modeling/
https://unity3d.com/jp/unity/features/worldbuilding/probuilder

# ProBuilder
http://www.procore3d.com/probuilder-vr/
ProBuilderはUnityEditor上のツール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/ab0010fd-3ef7-23dd-558c-f02da748024b.png)

# ProBuilder VR
メンテされてない
https://github.com/Unity-Technologies/probuilder-vr

# MRTK
https://qiita.com/h_koya/items/b5924b030b15ce496f3e

#ランタイムのレベルエディタ　[giles](https://github.com/Unity-Technologies/giles)

うごくけど、そんなに便利じゃないし、マテリアル対応してない？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555658/e6dd4d06-a3d1-4232-8d75-e32a84931769.png)

OVRGrabber

Unity標準機能の　ProBuilder
ドメインエキスパートは誰だ！〜ちょっとずつ読むIDDD 1

# ドメインエキスパートは誰だ！

Evans本を読んでいるとドメインエキスパートという言葉が突然でてきます。
読み進めてみると、ドメインエキスパートｘ開発者＝チームとされ、開発者とは明確に役割が違うようです。

Evans本ではドメインエキスパートの説明を以下のようにしています。

> 自分の知っていることを蒸留して本質を抽出するように強いられることによって、しばしば自分の理解を精緻にし、ソフトウェアプロジェクトが必要とする概念を理解するようになる。
[Evans本](https://www.amazon.co.jp/dp/B00GRKD6XU)（15ページより抜粋）

では一体ドメインエキスパートはプロジェクトに関わる人の誰に当たるのか？

# 今扱っている業務について誰よりも知っている人

IDDDではこんな感じで説明されています。

> 役職の名前じゃない。業務の流れについてよくわかっている人がいれば、その人をドメインエキスパートとすればいい。
[IDDD](https://www.amazon.co.jp/dp/B00UX9VJGW)(3ページより抜粋）

業務知識に長けた人、プロダクトを設計した人、営業担当・・・**少なくても自身よりはよく知っている人**を探せばいい。としています。

これはわかりやすいですね。自分自身より知っている人は誰か！探すことがDDDの第一歩。

# ドメインエキスパートとの話し方

ドメインエキスパートとどう話していけばいいか。Evans本やIDDD本にいいヒントがあります。

1.　ドメインエキスパートも自分の業務を知り尽くしているわけではない。

ドメインエキスパートから学ぶことはもちろん多いが、ドメインエキスパートが開発者から学ぶことも大いにある。チームで（ドメインエキスパートｘ開発者）学び成長いくことでソフトウェアで必要な概念を理解していくということでしょう。ドメインエキスパートだけでも、開発者だけでもソフトウェアは作れない。

2.　リードは開発者がする

ドメイン駆動設計は設計とソースコードが一体化しています。だから必要な知識の噛み砕きは開発者がリードして会話していくことが多いでしょう。
また、ドメインエキスパートは業務に必要な知識を有していますが、プロジェクトに必要な知識以上に知っています。開発者がリードしてプロジェクトに必要な知識を蒸留していきましょう。


# さいごに

実際どうですかね。ドメインエキスパートもチームメンバーということは、ずっと一緒に会話していく必要があるということですよね。
プロジェクト初期に要件を聞いて設計、実装していくスタイルだとこの方法はあまりうまく行かないでしょう。
こういう学びはプロジェクト初期だけでなく、プロジェクトを通してしていくものだからです。

ずっと、一緒にプロダクトを通してプロダクトとともに成長していく。そういう意味で顧客でも発注者でもないドメインエキスパートという役割があるのだと思います。
Svelte用のモジュールメモ

Svelteはフロントエンド用のJSフレームワークです。
特徴は記述が非常にシンプルであり、React、Vueよりもパフォーマンスが良いこと。

 [ReactとVueを改善したSvelteというライブラリーについて](https://qiita.com/so99ynoodles/items/a8144ced1a21467c6300)
 [Vue・Reactを超える！？ 近年話題の Svelte に入門してみよう！](https://qiita.com/yassun-youtube/items/3faee13f87aa63e33ef5)
[Svelte の日本語サイトが公開されました！](https://qiita.com/myLifeAsaDog/items/0b1432b0200fdec202b9)

個人的にVueの2系を使ってるんですが、メジャーアップデートされた3系にいつ移行しようかなぁと悩む中で急浮上してきました。
私がFWを選定する基準は「普及度」「パフォーマンス」「わかりやすさ」という感じで、後者2つはばっちりです。

残る気になる点は普及度なんですが、気にする理由の一つが周辺モジュールの充実度。
最低限、やりたいことが簡単にできそうかどうかは気になりますからね（自作しろという話もありますが…）。

次に作る趣味の小物サイトはSvelteで作ってみようかなーと思い、まずは目をつけたモジュールについてリスト化してみました。
もっといいのあるよ！なコメント歓迎です。

- ドラック＆ドロップ  
[velte-dnd-action](https://www.npmjs.com/package/svelte-dnd-action)
- 動画（mp4直、YouTube他動画サービス連携）  
[Vime](https://vimejs.com/)  
V1はSvelteで作られ、その後PureJS化したとのこと。
- 日付時刻選択（datepicker）  
[@beyonk/svelte-datepicker](https://www.npmjs.com/package/@beyonk/svelte-datepicker)

何か見つける度に更新予定。