OmniAICreator/Qiita-1.07M huggingface dataset:
javascript演習　6,7日目/３０日

覚えたこと

someとevery

```javascript
const isAdult = people.some(person => new Date()).getFullYear() - person.year >= 19)

const allAdult = people.every(person => new Date()).getFullYear() - person.year >= 19)
```


findとfindInex
findIndexとslice

```javascript
const index = comments.findIndex(item => {
    return item.id === 823423
})
//comments.splice(index,1);これでもいい
const newComments = [
  ...comments.slice(0,index),
  ...comments.slice(index +1 )
];
```

canvas

```javascript
const canvas = document.querySelector('#draw');
  const ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  ctx.strokeStyle = '#bada55';
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
```

マウスで描写


```javascript
let isDrawing = false;

  function draw(e) {
    if(!isDrawing) return;
    console.log(e)
  }

  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mousedown', () => isDrawing = true);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mouseout', () => isDrawing = false);
```


ーーーーーーーーーーーーーーーーーーーーーーーー

参考

https://techacademy.jp/magazine/37922

https://yoppa.org/taumedia10/2065.html

https://qiita.com/kyrieleison/items/a3ebf7c55295c3e7d8f0
[TypeScript] オブジェクト型でプロパティを増やしたり減らしたりする

## ある型定義からプロパティを増やしたい場合

他にもあるような気がするけど、とりあえずいくつかのパターン。

```ts
type type1_1 = {
  a: string
  b: string
}

const obj1_1: type1_1 = {
  a: 'A',
  b: 'B',
  // c: 'C',  // ERROR
}
console.log(obj1_1);  // { a: "A", b: "B" }

const obj1_2: type1_1 & { c: string } = {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj1_2);  // { a: "A", b: "B", c: "C" }

type type1_2 = type1_1 & { c: string }
const obj1_3: type1_2 = {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj1_3);  // { a: "A", b: "B", c: "C" }

type type2 = {
  a: string
  b: string
  c?: string
}
const obj2_1: type2 = {
  a: 'A',
  b: 'B',
}
console.log(obj2_1);  // { a: "A", b: "B" }

const obj2_2: type2= {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj2_2);  // { a: "A", b: "B", c: "C" }

type type3_1 = {
  a: string
  b: string
}
type type3_2 = {
  a: string
  b: string
  c: string
}
const obj3_1: type3_1 | type3_2 = {
  a: 'A',
  b: 'B',
}
console.log(obj3_1);  // { a: "A", b: "B" }

const obj3_2: type3_1 | type3_2= {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj3_2);  // { a: "A", b: "B", c: "C" }

type type3_3 = type3_1 | type3_2
const obj3_3: type3_3 = {
  a: 'A',
  b: 'B',
}
console.log(obj3_3);  // { a: "A", b: "B" }

const obj3_4: type3_3 = {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj3_4);  // { a: "A", b: "B", c: "C" }

// let obj3_5: type3_3; // ERROR if (obj3_5.c の部分がうまく動かない
let obj3_5: any
obj3_5 = obj3_3
if (obj3_5.c === undefined) {
  obj3_5.c = 'C1'
}
console.log(obj3_5);  // { a: "A", b: "B", c: "C1" }

obj3_5 = obj3_4
if (obj3_5.c === undefined) {
  obj3_5.c = 'C2'
}
console.log(obj3_5);  // { a: "A", b: "B", c: "C" }
```

anyなしにしようとするとなかなか難しいところ。

## ある型定義からプロパティを消したい場合

こんな風に実装する

```ts
interface type1_1 {
  a: string
  b: string
  c: string
}

const obj1_1: type1_1 = {
  a: 'A',
  b: 'B',
  c: 'C',
}
console.log(obj1_1);  // { a: "A", b: "B", c: "C" }

type type2_1 = Pick<type1_1, "a" | "b">

const obj2_1: type2_1 = {
  a: 'A',
  b: 'B',
  // c: 'C',  // ERROR
}
console.log(obj2_1);  // { a: "A", b: "B" }

type type2_2 = Omit<type1_1, "a" | "b">

const obj2_2: type2_2 = {
  // a: 'A',  // ERROR
  // b: 'B',  // ERROR
  c: 'C',
}
console.log(obj2_2);  // { c: "C" }
```

参考

TypeScript特有の組み込み型関数 || log.pocka.io
https://log.pocka.io/ja/posts/typescript-builtin-type-functions/
Incompatible table partitioning specification. Destination table exists with partitioning specification interval(type:MONTH,field:time), but transfer target partitioning specification is interval(type:DAY,field:time). 

このエラーが出たとき、毎回私が以下の間違いをするので記事作成。

- やりたいこと
    - パーティション設定されたテーブル(例:列でのパーティション)に、スケジュールされたクエリでデータ転送したい
        - 今回の例: timestamp型の`time`カラムがパーティションキーになっている場合を想定
- 実現のために行う誤った行動と、行うべき行動の選択肢
    - 「スケジュールされたクエリを新規作成」するときに、「宛先テーブルのパーティショニング フィールド」について
        - 誤った行動: `time`を指定(これをやると、スケジュールされたクエリ実行時に表題のエラーが起きる)
        - 行うべき行動の選択肢
            - 何も設定しない
                - 正しいかどうかは別としてエラーは起きなかった


多分、もっと深い考察や記法があるだろうけれども、一旦備忘録

↓とかを読んでちゃんと理解したい
https://cloud.google.com/bigquery/docs/creating-column-partitions?hl=ja#bq_1
Node.jsのバリデーター「Ajv」で独自formatを作る（カスタムバリデーション）

# 概要
ある時、typescriptで作成する入力フォームのバリデーションをしていて困ったことになった。
入力した値を、どうしても文字列の状態で上限値チェックしなければならなくなった。
具体的には、unixtimeが上限を超えないかどうかをチェックしなければならないのだが、値は文字列の状態で受け取り、また文字列の状態でレスポンスしなければならない。

使用していたバリデーション用のライブラリがAjvで、色々と調べたら独自のバリデーションができることを見つけたので、備忘録として残しておく。

# 標準の文字列判定
普通に文字列判定をしたいだけであれば、以下で事足りる。

``` typescript
import Ajv from "Ajv"

const ajv = new Ajv()

// 検証スキーマを定義
const schema = {
  type: 'object',
  properties: {
    timestamp: {
      type: 'string',
    },
  },
};

const timestamp = "2147483647"
//const timestamp = 2147483647

// バリデーション関数を作成
const validate = ajv.compile(schema);

// バリデーションを実行
const valid = validate({timestamp});

if (!valid) {
  console.log(validate.errors)
}else{
  console.log({result: true});
}

```

実行結果、文字列の場合

```
{ result: true }
```

実行結果、数値型の場合

```
[
  {
    keyword: 'type',
    dataPath: '.timestamp',
    schemaPath: '#/properties/timestamp/type',
    params: { type: 'string' },
    message: 'should be string'
  }
]
```

# カスタムバリデーション
以下のように、 `ajv.addFormat` で、独自の判定フォーマット「custom-timestamp」を定義する。
判定フォーマットは、properties内の「format」で指定する。

```typescript
import Ajv from "Ajv"

const ajv = new Ajv()
ajv.addFormat('custom-timestamp', {
  validate: (timestampString: String) => {
    const timestampNumber = Number(timestampString)
    return timestampNumber < 2147483648
  }
})

// 検証スキーマを定義
const schema = {
  type: 'object',
  properties: {
    timestamp: {
      type: 'string',
      format: 'custom-timestamp',
    },
  },
};

const timestamp: String = "2147483647"

// バリデーション関数を作成
const validate = ajv.compile(schema);

// バリデーションを実行
const valid = validate({timestamp});

if (!valid) {
  console.log(validate.errors)
}else{
  console.log({result: true});
}
```

実行結果、「"2147483647"（unixtime期間内）」の場合

```
{ result: true }
```

実行結果、「"2147483648"（unixtime期間外）」の場合

```
[
  {
    keyword: 'format',
    dataPath: '.timestamp',
    schemaPath: '#/properties/timestamp/format',
    params: { format: 'custom-timestamp' },
    message: 'should match format "custom-timestamp"'
  }
]
```

他のバリデーションライブラリでも、似たようなことはできるかもしれない。
また、今回は数字を文字列のまま大小比較するという実装だったが、実際にはもっと複雑なロジックを記述することも可能なので、用途は広い。

以上。
UE4 クロマキー　背景抜きの方法

#経緯
背景が単色の画像を単色部分だけ抜いて透明にしたmaterialを作成しようとしたのですがパッとやり方が出てこなかったので備忘録として:watermelon:
#方法

新規マテリアルを作成し **Blend Mode** を **Masked** にする。
![スクリーンショット 2021-10-26 001247.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912815/8d0e4200-5ff1-4fa5-488c-f07ec24ed5f9.png)

 **Chroma_key_Alpha**  , **Texture Sample**  , **Constant4Vector** を配置し下図のように繋げる
![スクリーンショット 2021-10-26 001332.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/912815/16db8fb6-6ae8-a6f0-6f63-9c12e3afae6f.png)

**Constant4Vector** の色をスポイトで背景色と一緒にする

#だけ
Yarn v2でworkspace-toolsプラグインをインストールした後、YarnのCLIでエラーが出るときの対処法

## エラーの詳細

> Usage Error: This plugin cannot access the package referenced via typanion which is neither a builtin, nor an exposed entry (when initializing @yarnpkg/plugin-workspace-tools, defined in ~path/to/.yarnrc.yml)


Yarn v2でworkspace-toolsプラグインをインストールした後、YarnのCLIで何をやってもこのエラーが出て、先に進めなくなりました。

## エラーが出るまでの再現
### 1. Yarn v2をインストールする
```shell
npm install -g yarn
cd ~/path/to/project
yarn set version berry
yarn set version 2.x
```

現時点（2021/10/22）では、`yarn set version berry`を実行するとYarn v3がインストールされます。最初から、`yarn set version 2.x`を実行したいところですが、Yarn v1でこれを実行するとエラーになるため、一度Yarn v3を経由する必要があります。

### 2. workspace-toolsプラグインをインストールする
```shell
yarn plugin import workspace-tools
```

このあとYarnのCLIで何をやっても上記のエラーが出るようになります。

## 対処法
上記のエラーが出たのは、インストールしたプラグインがYarn v3対応であったことが原因だと思われます。上記のエラーには`typanion which is neither a builtin, nor an exposed entry`という文言が含まれていましたが、[現時点(2021/10/22)で最新版のworkspace-toolsの依存関係](https://github.com/yarnpkg/berry/blob/master/packages/plugin-workspace-tools/package.json)には`typanion`が含まれています。しかし、[Yarn v2対応の中で最新版の依存関係](https://github.com/yarnpkg/berry/blob/%40yarnpkg/plugin-workspace-tools/2.2.0/packages/plugin-workspace-tools/package.json)には`typanion`が含まれていません。以上を踏まえると、Yarn v2対応のプラグインをインストールすれば解決できそうです。

### 1. プラグインをアンインストールする
```shell
rm .yarn/plugins/\@yarnpkg/plugin-workspace-tools.cjs 
```

```diff_yaml:.yarnrc.yml
- plugins:
-   path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-   spec: "@yarnpkg/plugin-workspace-tools"
```
YarnのCLIはエラーが出て使えないため、一度プラグインを手動でアンインストールします。

### 2. Yarn v2対応のプラグインをインストールする
```shell
yarn plugin import https://github.com/yarnpkg/berry/raw/%40yarnpkg/plugin-workspace-tools/2.2.0/packages/plugin-workspace-tools/bin/%40yarnpkg/plugin-workspace-tools.js
```
`yarn plugin import <name>`では、残念ながらバージョンを指定することができません。実際、`yarn plugin import workspace-tools@2.x`などを実行してみると、以下のようなエラーが出ます。仕方がないので、エラーの指示に従い、直接URLを指定してインストールします。

>
➤ YN0051: Couldn't find a plugin named "@yarnpkg/plugin-workspace-tools@2.x" on the remote registry. Note that only the plugins referenced on our website (https://github.com/yarnpkg/berry/blob/master/plugins.yml) can be referenced by their name; any other plugin will have to be referenced through its public url (for example https://github.com/yarnpkg/berry/raw/master/packages/plugin-typescript/bin/%40yarnpkg/plugin-typescript.js).

### 補足
指定するURLは以下の方法で調べられます。Yarn v2対応の他のプラグインをインストールするときの参考にしてください。

**1. npmのVersionsタブでYarn v2対応の中での最新版を調べる**
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1620372/851c8591-1380-6e14-ca46-63770af6c199.png)


**2. yarnkg/berryのリポジトリでプラグイン名とバージョンでタグを指定する**
![スクリーンショット 2021-10-25 0.33.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1620372/7a3b644f-6f51-e131-0a99-d970d93d8ff3.png)


**3. プラグインのソースコードのページでrawデータのURLを取得する**
![スクリーンショット 2021-10-24 14.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1620372/0b79368e-7c5a-aea0-8470-62cd258872ce.png)
styled-componentsで入力補完を効かせる方法(vscode)

Qiita初投稿です。
テスト投稿も兼ねて。
<br />
### 結論: 拡張機能 「vscode-styled-components」 をインストールする。

![スクリーンショット 2021-10-26 0.10.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201138/52548e52-5708-dca2-afcf-74e15c6f11ed.png)

こちらの方法がおそらく一番手っ取り早いです。
<br/>
【令和３年度秋】R3データベーススペシャリスト試験　解説【午後Ⅰ問２設問１(２)】

R3秋データベーススペシャリスト試験の復習を兼ねた個人的解説です。
問題本文と参考にした解答速報は、この記事の最下部を見てください。
ただし、2021/10/26執筆時点で公式の解答が出ていないので、完全に私オリジナルの解釈になります。
非公式の解答速報をもとにしていますが、間違っていたらごめんなさい（気づいたときに修正します:pencil:）

なお、午後Ⅰ問２の設問１(１)はこちらからどうぞ:hatching_chick:→[【令和３年度秋】R3データベーススペシャリスト試験　解説【午後Ⅰ問２設問１(１)】](https://qiita.com/mtanabe/items/f467eb4ab545d4015416 "【令和３年度秋】R3データベーススペシャリスト試験　解説【午後Ⅰ問２設問１(１)】")

# 午後Ⅰ　問２
データベースの実装に関する次の記述を読んで、設問1～3に答えよ。
※「次の記述」は省略。下部のリンクからPDF参照。

## 設問１　(2)
[参照処理の性能見積もり]について、(1)～(3)に答えよ。
(2)案１について、"加盟店"テーブルのデータバッファを増やすのはなぜか。
   また、"オーソリ履歴"テーブルはデータバッファを増やさないのはなぜか。
   アクセス経路に着目し、それぞれ理由を25字以内で述べよ。

案１:arrow_right: "加盟店"テーブルのデータバッファを増やしバッファヒット率100%にする。

## 解答例
### 加盟店
- ランダムアクセスによるヒット率を増やすため（21字/解答速報）
- 索引検索のバッファヒット率を向上させるため（21字/解答速報）
- アクセスヒット率を増やしディスクI/Oを減らすため（25字/個人的な回答）

### オーソリ履歴
- 表探索によりページを順次読み込むため（18字/解答速報）
- 加盟店番号に索引がなく表探索となるから（19字/解答速報）
- 表探索により先頭から順にデータを読み込むため（22字/個人的な回答）

## 解説
問題文冒頭の[RDBMSの主な仕様]より、以下のことが読み取れます。

- アクセス経路は表探索 or 索引探索のどちらかであること。
- 表探索では、索引を使わずに先頭ページから順に全行を探索すること。
- 索引探索では、where句中の述語に適した索引によって絞り込んでから、表の行を読み込むこと。

また、「Fさんは、利用明細抽出処理の処理時間を、次のように見積もった。」の７つの文章から、次のことが読み取れます。

- 文章１.より、オーソリ履歴テーブルのアクセス経路が「表探索」であること。
- 文章４.より、利用明細抽出処理のSQLでは、オーソリ履歴テーブル１行ごとに加盟店テーブルの主キー索引を「索引探索」すること。

「データバッファ」とは、索引などの情報を保持するメモリ上の領域のことです（多分:droplet:）。
加盟店テーブルは索引検索を行うため、バッファヒット率が高いほどディスクI/Oが減るため、処理時間が短縮できると考えられます。

よって、加盟店テーブルに対する**「アクセスヒット率を増やしディスクI/Oを減らすため」**的な文章が答えになると思います。

また、オーソリ履歴テーブルは表探索のため、データバッファの有無にかかわらず先頭から探索を行います。
そのため、データバッファを見る必要がないため、**「表探索のため先頭から順にデータを読み込むため」**的な文章が回答になると思います。
「なんで増やさなくていいの？」に対する問いなので、「だって、増やす意味ないもん」的な回答をすればよいかと・・・。

ところで、問題文の案１に
> "加盟店"テーブルのデータバッファを増やしバッファヒット率100%にする。

とあるので、加盟店テーブルの回答として「バッファヒット率を向上させるため」はちょっとないんじゃないかなぁ・・・:thinking:と個人的に思ってます。
バッファヒット率が増えたことで何がよくなるのか・・・までを書かないといけない気がするんですが、どうなんでしょう？？
（でも「バッファヒット率が高いほどディスクI/Oが減る」なんてことは問題文から読み取れないから、そこまで言及しなくてもいいのかなぁ・・・）

# 参考情報

問題文はこちら :point_down: 
[IPA　令和3年度秋期試験 データベーススペシャリスト試験 午後Ⅰ](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/mondai_kaitou_2021r03_2/2021r03a_db_pm1_qs.pdf, "令和3年度秋期試験 データベーススペシャリスト試験 午後Ⅰ")

参考にした解答速報はこちら:point_down:
:large_orange_diamond:[解答速報 令和3年度秋期試験｜情報処理｜資格の学校TAC[タック]](http://www.tac-school.co.jp/kaitousokuhou/downloads/13_R3F_DB%E8%A7%A3%E7%AD%94%E4%BE%8B.pdf, "解答速報 令和3年度秋期試験｜情報処理｜資格の学校TAC[タック]")
:large_orange_diamond:[情報処理技術者試験 | 解答速報・自動採点サービス | IT技術者資格取得ならアイテック](https://www.itec.co.jp/wp-content/uploads/shiken/2021a/2021a_db_pm1_kaito_n.pdf, "情報処理技術者試験 | 解答速報・自動採点サービス | IT技術者資格取得ならアイテック")
nodejsのバージョン管理ツールVoltaを使ってみた

# Nodejsのバージョン管理ツール
　googleトレンドを見ると、最近voltaが来ている感じ、、。
![スクリーンショット 2021-10-25 23.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/712534/d480bf2d-79dd-f536-5b85-825027ee4687.png)

**githubのスター数比較**
- [Node.js管理ツールの更新頻度とスター数を比較してみた](https://qiita.com/tora_oba/items/8f8b7d3e5fb62bc96a3f)

# Voltaとは


>- Speed ⚡
- Seamless, per-project version switching
- Cross-platform support, including Windows and all Unix shells
- Support for multiple package managers
- Stable tool installation—no reinstalling on every Node upgrade!
- Extensibility hooks for site-specific customization

[公式](https://docs.volta.sh/guide/)引用

Rustに組み込まれてて早い。がポイントなんですかね。

# 使ってみる

```
# install Volta
curl https://get.volta.sh | bash

# install Node
volta install node

# start using Node
node
```

パスを通す

```
export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"
```

公式によると

```
volta pin node@12
```

このようにpinとするとバージョンが固定されるらしい。

もうちょっと使ってみて更新する予定。
新 App Store 審査ガイドライン 翻訳&差分ガイド 2021年10月号

# はじめに

これは2021年10月22日付けで変更された App Store 審査ガイドラインの翻訳&差分ガイドです。

[前回](https://qiita.com/midnightSuyama/items/1eb396f775a01a876729)からの主な変更点は、課金方法の紹介と iOS 15 の In-App Events についてです。あくまで、課金方法の "紹介" が緩和されるだけであり、アプリ内の制約は変わらず。

旧規約では「メールで他の課金方法を紹介」を禁止していましたが、該当の文章は削除され、さらに連絡先情報の取得が可能となりました。これには、米国開発者による集団訴訟の[合意内容](https://www.apple.com/jp/newsroom/2021/08/apple-us-developers-agree-to-app-store-updates/)が反映されているようです。

他方、日本公正取引委員会との[合意内容](https://www.apple.com/jp/newsroom/2021/09/japan-fair-trade-commission-closes-app-store-investigation/)の「リーダーアプリ内に決済リンクを1つ設置できる」は、今回は未反映です。この内容は、2022年初めに適用予定。

また、Epic Games との訴訟は最終的な決着がついていないため、この内容も未反映です。現状、2021年12月9日までにアプリ決済の見直しを命じられているため、延期の訴えが認められない限り、12月辺りに大きな変化がありそうです。

[https://developer.apple.com/app-store/review/guidelines/](https://developer.apple.com/app-store/review/guidelines/)

## In-App Events

In-App Events は iOS 15 の新機能で、2021年10月27日開始が告知されています。WWDC21 では [Meet in-app events on the App Store](https://developer.apple.com/videos/play/wwdc2021/10171/) が該当します。

App Store 内のプロモーション機能のため、基本的には App Store Connect で情報を入力するだけですが、ディープリンクを実装していない場合はアプリ側にも対応が必要そう。2021年後半には、アプリ内イベント登録の API サポートや効果測定を提供予定。

[https://developer.apple.com/app-store/in-app-events/](https://developer.apple.com/app-store/in-app-events/)

# 新規項目

## 2.3.13 アプリ内イベントのメタデータは正確に。「3. Business」に違反しなければ収益化が可能。

> In-app events are timely events that happen within your app. To feature your event on the App Store, it must fall within an event type provided in App Store Connect. All event metadata must be accurate and pertain to the event itself, rather than the app more generally. Events must happen at the times and dates you select in App Store Connect, including across multiple storefronts. You may monetize your event so long as you follow the rules set forth in Section 3 on Business. And your event deep link must direct users to the proper destination within your app. Read In-App Events for detailed guidance on acceptable event metadata and event deep links.

「3. Business」ありきなので、デジタルコンテンツは要注意。

## 5.1.1 (x) オプションとして連絡先情報の要求が可能。

> Apps may request basic contact information (such as name and email address) so long as the request is optional for the user, features and services are not conditional on providing the information, and it complies with all other provisions of these guidelines, including limitations on collecting information from kids.

連絡先情報の提供有無による機能制限は駄目。

# 修正項目

## 3.1.3 Other Purchase Methods

### アプリ内課金を阻害するような施策は不可。

> The following apps may use purchase methods other than in-app purchase. Apps in this section cannot, within the app, encourage users to use a purchasing method other than in-app purchase. Developers can send communications outside of the app to their user base about purchasing methods other than in-app purchase.

`Developers cannot use information obtained within the app to target individual users outside of the app to use purchasing methods other than in-app purchase (such as sending an individual user an email about other purchasing methods after that individual signs up for an account within the app).` を削除。

「メールで他の課金方法を紹介」という具体例が消滅し、容認へ。
Linuxについて [ネットワーク]

## TCP/IP

* ネットワーク
コンピュータ間をケーブルや無線機能で接続したシステム

#### ローカルエリアネットワークとワイドエリアネットワーク

* ローカルエリアネットワーク(LAN)
  学校や自宅などの閉じられた複数のコンピュータを相互接続したネットワーク

* ワイドエリアネットワーク(WAN)
  離れた場所にあるLANとLANを結んだネットワーク

**LANはコンピュータ同士をLANケーブルで結び、WANはLAN同士を通信回線で結ぶ**

### IP
インターネットプロトコル
ネット上でコンピュータ同士が決まった手順でデータを送受信する
IPは送り先とデータの情報からなるパケットを送るだけ
pingコマンドでデータが送信され、データを受けた機器から確認メッセージが返ってくるか確認できる

#### ping ターゲット

ターゲット（ホスト名やIPアドレス）にデータを送り、返答が来るまでの時間を表示
-cオプションをつけて、pingを発行する回数を指定することも可能

pingコマンドは「Ctrl」Cを押すと止まる

例外として、セキュリティ対策としてpingに応答しない場合もある


### TCPとUDP

* TCP（トランスミッション コントロール プロトコル）
  IPの仕組みでデータを送信
  TCPはデータのまとまりを１つ受け取るとデータ破損などのエラーを確認し、不備があれば
  データの再送を依頼する

* UDP（ユーザ データグラム プロトコル）
  エラー確認やデータの再送依頼は行わない
  その分データを高速に送信可能


## IPアドレス

データの送受信にはお互いの場所を示すアドレスが必要

* IPv4
  プロトコルの種類
  他にもIPv6がある
  4バイト、16進数8桁で表せるアドレス
  
~~~
16進数   C0 A8 01 64

2進数    11000000 10101000 00000001 01100100

10進数   192 168 1 100

~~~

このように16真数から10真数に変換しつないで表示する

### IPアドレスのクラス

IPアドレスは組織に対して割り当てられたもので、範囲が連続したアドレスになっている
ホストアドレスのホスト部の前ビットが0のアドレスはネットワーク自身のアドレスである

* ブロードキャストアドレス
  ホスト部の前ビットが1のアドレスはネットワーク内すべてに届く特殊なアドレスのこと
  コンピュータに割り当てることはできない







## 経路の確認

LANとLANまたはLANとWANをつなげる場合には、ゲートウェイ（ルーター）が接続される

自分のコンピュータから通信先のコンピュータまでに仲介する複数のゲートウェイを調べるには

~~~
traceroute ターゲット
tracepath ターゲット
~~~

ターゲットや途中のゲートウェイへデータを送り、ゲートウェイから返答が返ってくるまでの時間を表示する

## ルーティングの確認

~~~
ip route [オプション]
ss [オプション]
~~~

ネットワークの状況を表示するためのコマンド
データの流れる方向を調べることができる

オプション|意味
-|-
-V|バージョン情報
-a|すべてのソケットを表示
-n|サービス名に変換せずに表示
-r|ホスト名を名前解決
-p|ソケットを使用しているプロセスIDを表示
-s|集約したソケット情報
-4|IPv4のソケットのみ表示、他のオプションと併用
-6|IPv6のソケットのみ表示、他のオプションと併用
-t|TCPのソケットのみ表示
-u|UDPのソケットのみ表示
-e|詳細なソケット情報を表示


### ルーティングの変更

~~~
ip [オプション] r[oute] {コマンド|help}
または
route
~~~

~~~
ip route {add|del} ターゲット/サブネット via ゲートウェイアドレス dev インターフェース
~~~

~~~
route add [-net|-host] ターゲット [netmask サブネット] [インタフェース]
~~~

**コマンドの実行には管理者権限が必要**


## ポート番号

TCP/IPで通信を行う場合、IPアドレスに加えサービスごとにポート番号を使う
ポート番号がどのサービスに対応するかは規格として取り決められている
一般的なサービスはetc/servicesファイルに書かれている

ポート番号|サービス名
-|-
20|FTP(制御)
21|FTP(データ)
22|SSH
23|Telnet
25|SMTP
53|DNS
80|HTTP
443|HTTPS



ssコマンドでLinuxのサービスやネットワークの状況を表示できたり、提供されているサービスを調べることができる

たとえば

~~~
& ss -at

State    Recv-Q Send-Q Local Address:Port      peer
Address:Port
LISTEN   0   128      *:sunrpc      *:*
....
(略)

~~~

ssコマンドにオプションの-aと-tをつけてTCPサービス一覧を表示できる

>参考書籍

>>『Linux標準教科書 v3.0.2』 LPI-Japan 2019年
ES6から導入された分割代入について　オブジェクト編

#### 1.経緯
https://www.amazon.co.jp/%E3%83%A2%E3%83%80%E3%83%B3JavaScript%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8B%E3%82%89%E5%A7%8B%E3%82%81%E3%82%8B-React%E5%AE%9F%E8%B7%B5%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%EF%BC%88%E6%9C%80%E6%96%B0ReactHooks%E5%AF%BE%E5%BF%9C%EF%BC%89-%E3%81%98%E3%82%83%E3%81%91%E3%81%87%EF%BC%88%E5%B2%A1%E7%94%B0-%E6%8B%93%E5%B7%B3%EF%BC%89-ebook/dp/B09BV2HGN3

Reactを学習するためにTwitterで話題となっていた、上記の本を買い学習することになった。初めてJavascriptライブラリを使う人にも優しいようにES6復習してからReactを学習する内容となっていた。Vueをやっていた自分にとってClassやconst、アロー構文など紹介されていく中で分割代入？？なんだそれとなったので分割代入について詳しくみていくことにした。

#### 2.分割代入(オブジェクト)
分割代入には、大きく分けてオブジェクトで使われるケースと配列で使われるケースがあるのだが、まずはオブジェクトで使われるケースについてみていく。

```javascript
const user={
  name:'山田',
  age:23
}
```
このようなごく一般的なオブジェクトを用意した.

```javascript
//分割代入を使用しない
console.log(`名前は${user.name}です${user.age}歳です`)
//名前は山田です23歳です
```

通常使われる際は以上のようにオブジェクト.プロパティ名と言ったようにして呼び出される。しかし、分割代入によって以下のように書き換えることができる。

```javascript
//分割代入を使用する
let {name,age}=user
console.log(`名前は${name}です${age}歳です`)
//名前は山田です23歳です
```
オブジェクト.プロパティというように呼び出さなくてもnameとageというように変数のように呼び出すことができる。

```javascript
let {name,age}=user
name='田中'
console.log(`名前は${name}です${age}歳です`)
//名前は田中です23歳です
```
変数になっているため書き換えもすることができる。

```javascript
let {age,name}=user
console.log(`名前は${name}です${age}歳です`)
//名前は山田です23歳です
```
このようにageとnameを逆にした場合でも通常通り動いた。つまり元になっているオブジェクトのプロパティ名と一致する場合であれば順番はどうでもいいということである。
<br>
このようにオブジェクト.プロパティ名と書かなくても呼び出すことが可能になったのだが、これは果たして使い道があるのだろうか。オブジェクト.プロパティ名として記載した方がオブジェクトを使っているんだな〜ってことが理解できるのではないだろうか？？変数として置き換わるため、後々同じような変数に対して代入するようなミスが起こりうるのではないかと思った。

#### 3.　オブジェクトのプロパティの名前の変更
```javascript
let {name:userName,age:userAge}=user
console.log(`名前は${userName}です${userAge}歳です`)
//名前は山田です23歳です
```

以上のようにするとプロパティの名前とは違う名前を設定することができる。しかし、このケースにおいてもオブジェクト.プロパティ名の方がわかりやすくコードを書くことができているような気がする。それにわかりにくいプロパティ名であればオブジェクト自体を変更すればいいのではないだろうか？？
<br>
他にも使う理由として、長くなってしまったプロパティ名を少しでも短くできるや、オブジェクトが複数個ある場合は管理しずらいなどの点があったがこれはvscodeであれば補完機能が効くのでそれほど不便に感じるようなことはない。

#### 4.僕が考えたオブジェクトの分割代入の利用方法
外部からオブジェクトを引っ張ってきた時のわかりにくいプロパティ名を簡単に変更することができる。

```javascript
user{
n:'山田',
a:23
}
let {n:userName,a:userAge}=user
console.log(`名前は${userName}です${userAge}歳です`)
//名前は山田です23歳です
```

この例では変更不可能な外部から入手したオブジェクトがわかりにくい名前だったケースを想定している。最もこのようなデータを使うのは好ましくないだろう。多くのデータは使う人がわかりやすいプロパティ名をつけてくれていると思う。しかし、もし自分にとってわかりずらいようなものであれば変更することが可能だ。

#### 5.結論
オブジェクトの分割代入の有効的な使い方について自分でも思いつかなかった。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

MDNを見たが有効的な使い方は載っていなかったように感じる。しかし、このような書き方を他の人がした場合に分割代入をしているんだなとわかることは大切であると思う。また、新しく導入されたからといってそれを全て使ってわかりにくいコードになってしまっては本末転倒である。新しい書き方については必要な場面に応じて使っていきたい。
[TypeScript] 関数宣言/関数式オーバーロード

2つの引数を同一型で受け取るような実装をしたい場合など、このように書くと良い

```ts
// 関数宣言
function add1 (v1: number, v2: number): number;
function add1 (v1: string, v2: string): string;
function add1 (v1: any, v2: any) {
  return v1 + v2;
}
console.log(add1(1, 2)); // 3
console.log(add1('A', 'B')); // AB
// console.log(add1('A', 2)); // ERROR

// 関数式
const add2: {
  (v1: number, v2: number): number;
  (v1: string, v2: string): string;
} = (v1: any, v2: any) => {
  return v1 + v2
}
console.log(add2(1, 2)); // 3
console.log(add2('A', 'B')); // AB
// console.log(add2('A', 2)); // ERROR
```

any を消して、`(v1: string | number, v2: string | number)` このように書くと

「演算子 '+' を型 'string | number' および 'string | number' に適用することはできません。ts(2365)」

というエラーがでて演算ができないエラーになる様子。

any消すのはなかなか難しい様子。
Udemy「ネットワークエンジニアを目指す初心者はここから始めよう！「ゼロから学ぶネットワーク基礎」1024

最適経路の選択
・同じ宛先に複数の経路がある場合に最適な経路を選択する。
・選択基準は３つある。
  1.Longest Prefix Match
  2.Distance(Preference)
  3.Metric(Cost)

Longest Prefix Match
・略してLPM、最長一致とも言う。
・宛先IPアドレスを含む複数の経路のうち、
　最もPrefix　長の長いものを選択する。

Distance
・Static ルーティングやDynamic ルーティングプロトコルごとに固有の値がある。
・小さい数字が優先される。

Metric
・宛先ネットワークまでの距離を示す。
・単位は無い。
・小さい数字が優先される。

ECMP
・どの通信でどちらの経路を使うかはメーカーや機種により異なる。
・Equal Cost Multi Path(ECMP)や等コストマルチパスと呼ぶ。
Liveviewで作るスロットゲーム

Phoenix LiveviewはSPAライクなUIをElixirのみで開発できる素晴らしいライブラリです。

つい最近バージョン0.17.0がリリースされ、アニメーションを使った機能がより豊富になりました。
[こちら参考](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html#content)

どのくらい複雑なアニメーションが開発できるのか試したくなったので、ハロウィーンにちなんでドクロのキャラクターと戦うパチスロを作ってみました。

[パチスロのリポジトリ](https://github.com/hminy572/slotgame)
localで遊べます

パチスロにしては見た目はシンプルです。。。（パチスロ未経験）
サンプル画像
![slot_gif1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102733/ff9e81fe-511d-9528-8ceb-f1e32d372fd4.gif)

スロット画面のボタンを押すと押された列のスロットが止まります。
三列止まったときに横か斜めで絵柄が３つ揃うと敵にダメージが加えられます。
７が揃った場合は倍のダメージとなります。

# 結論
ゲーム開発できる？くらいに複雑なアニメーションを作れます。
以下の３つの関数が大活躍しました。
Process.send_after/3
handle_event/3
handle_info/2

# 開発方法

まずはアニメーション用の画像を準備します。
## ドクロの画像
CSSのアニメーションだとかゆいところに手が届かないので、画像をコマ送りにしてアニメにします。
サンプル画像のドクロの敵キャラは[Aseprite](https://www.aseprite.org/)というドット絵作成ツールを用いて連番のアニメーション画像を作成しました。

作成したシーンは
①登場シーン（13枚）
![skull_appear_anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102733/75ce0d2d-e42c-5b17-914f-fd697d5d87ae.png)

②通常時のシーン(11枚)
![skull_attack_anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102733/58d3a0b0-267b-0ac2-a160-e8731b4c58e2.png)

③ダメージを受けたシーン(17枚)
![skull_damage_anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102733/64434beb-4b75-86db-06c1-44d92bf25a3c.png)

④死亡した時のシーン（５５枚）
![skull_death_anim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102733/0847a7b8-8e20-cbc8-9d93-3542c588a0e1.png)

①〜④を一枚のwebp画像に変換し、スロットのアクションに応じて使い分けています。

## スロットの画像
こちらもAsepriteを使って
①左列(16枚)
②真ん中列(16枚)
③右列(16枚)
④背景(１枚)
⑤ボタン（６枚）
を作成しました。

ドクロのアニメーションと異なる点は①〜⑤のアニメーションがそれぞれ別々の動作をするため、一枚のwebp画像にまとめるのではなく、全てSVGファイルとして出力した点です。
SVGを使うことで位置の細かい調整がしやすくなります。
また

```elixir
use Phoenix.Component
```
とすることで

```elixir
def button(assigns) do
  <svg ... >
    <path ... >
  </svg>
```
のように任意の名前でSVG画像を関数として定義でき、関数内でsocket.assignsに対する変更を加えることもできます。

詳しくは
[Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#content)


# ドクロとスロットの絵柄をアニメーションにする

10fps前提で進めます。

基本的な考え方は
①mount時に最初の画像をsocket.assigns.hogeとして状態を持たせて、Process.send_after/3で自プロセスに画像更新用のメッセージを送る

```elixir
def mount(_, _, socket) do
  Process.send_after(self(), :hoge2, 100)
  {:ok, assign(socket, %{ init_image: image }}
end
```
②メッセージをhandle_info/2で受けとり、次のフレームのためのメッセージを送る

```elixir
def handle_info(:hoge, socket) do
  Process.send_after(self(), :hoge3, 100) 
  {:noreply, assign(socket, %{ init_image: image2 }}
end
```

③さらに続く画像のためのhanndle_infoを定義し、アニメーション全部分一周したら画面の動作を確認する。

# ボタンをアニメーションにする
①ボタンのSVGのコードにphx-click="hoge"をつけてhandle_event/3で画像を切り替えました。

```elixir
# template
<svg phx-click="hoge" ... >

# handle event
handle_event("hoge", _, socket) do
  {:noreply, assign(socket, %{ button_image: image }}
end
```

# やってみて思ったこと
Liveviewを用いることでかなり柔軟なアニメーションが作成できいました。
ゲームエンジンを使わずとも初期のマリオ程度のゲームであれば開発可能ではないかと思います。

WEBでのアニメーションにもっと柔軟性が欲しいと考えるデザイナーやエンジニアの方は是非参考にしてみてください。
二重降下の例

#1. 二重降下の例

論文 Two models of double descent for weak features (https://arxiv.org/abs/1903.07571) の例
https://github.com/tohmae/double-descent-sample/blob/main/sample.ipynb

$ \beta = (\beta_{1},\beta_{2},....,\beta_{D}) \in \mathbb{R}^D : 固定$
$ x = (x_{1},x_{2},....,x_{D}) : 正規分布$
$ \sigma\epsilon : ノイズ $
$ y = x^* \beta + \sigma\epsilon = \sum_{j=1}^{D} x_{j} \beta_{j} + \sigma\epsilon$


###初期設定
```
D=200
train_num=80 #学習データの数
test_num=20 #テストデータの数
sigma = 1/5 #ノイズの標準偏差
b = 2 * np.random.rand(D) -1
b = b / np.linalg.norm(b) # β |β|=1
```

###学習データ、テストデータ(x)
```
train_X = np.random.randn(train_num, D)
test_X = np.random.randn(test_num,D)
```

###学習データ、テストデータ(y)
```
train_y = np.matmul(train_X, b.T) + np.random.normal(0, sigma, train_num)
test_y = np.matmul(test_X, b.T) + np.random.normal(0, sigma, test_num)
```

###パラメータ数を制限した時のβの予測値
```
def calc_reg(param_num):
    b_pred = np.linalg.lstsq(train_X[:,:param_num], train_y, rcond=None)[0]
    return b_pred
```

###予測パラメータ時のloss
```
def calc_loss(X, y, param_num, b_pred):
    y_pred = np.matmul(X[:,:param_num], b_pred.T)
    loss = np.sum(np.abs((y - y_pred)*2))/ len(y)
    return loss
```

###パラメータ数を変更した時の学習データおよびテストデータのloss
```
param_nums = []
train_losses = []
test_losses = []
for param_num in range(1,D+1):
    b_pred = calc_reg(param_num)
    train_loss = calc_loss(train_X, train_y, param_num, b_pred)
    test_loss = calc_loss(test_X, test_y, param_num, b_pred)
    param_nums.append(param_num)
    train_losses.append(train_loss)
    test_losses.append(test_loss)
```

###可視化
```
import matplotlib.pyplot as plt
fig, ax = plt.subplots(figsize=(8,8))
ax.plot(param_nums, train_losses, label="train")
ax.plot(param_nums, test_losses, label="test")
ax.legend(loc=0)
plt.ylim(-1,5)
fig.tight_layout()
plt.show()
```

###lossのグラフ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100239/2a775a6f-cb00-2d7d-1eb7-2be3fc8a6226.png)
WindowsでJSP＆Servlet実行環境の作成

##はじめに
　WindowsでJSP,Servlet開発環境を作成したくなったのでメモ書き
　環境変数は汚したくないので、実行時の指定とする

　↓環境
　OS:Windows10
　JAVA：openJDK 17
　Webコンテナ:tomcat9

##環境構築

###openJDK
　1.以下サイトからダウンロード
　http://jdk.java.net/java-se-ri/17
　
　2.解凍して配置※ここではCドライブ直下とする
　C:\jdk-17
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1308027/53d57535-5d46-9d5f-655d-04d24ab737b1.png)

3.コマンドプロンプト起動
・環境変数設定

```
set JAVA_HOME=C:\jdk-17
set PATH=%PATH%;%JAVA_HOME%\bin
set CLASSPATH=%JAVA_HOME%\lib
```

4.バージョン確認
java -version

5.以下のように表示されれば正常
openjdk version "17" 2021-09-14
OpenJDK Runtime Environment (build 17+35-2724)
OpenJDK 64-Bit Server VM (build 17+35-2724, mixed mode, sharing)

####コンパイルテスト
・以下のようにテキストファイルを作成する
保存先とファイル名
C:\jdk-17\HelloWorld.java
　※ファイル内容※文字コードはUTF-8を選択する

・ファイル内容

```
public class HelloWorld {
	public static void main(String args[]){
		System.out.println("Hello, World!");
	}
}

```

・コマンドプロンプトで以下実行
javac C:\jdk-17\HelloWorld.java
　※classファイルが作成される

・実行する
java C:\jdk-17\HelloWorld.java
　以下のように表示されれば成功
`Hello, World!`

###TOMCAT設定

1.以下サイトからダウンロード
https://tomcat.apache.org/download-90.cgi
2.解凍して以下に保存する
C:\apache-tomcat-9.0.54
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1308027/4dfa48b6-9370-be70-a661-21f139ea556b.png)

####動作確認
3.コマンドプロンプト起動
4.環境変数設定

```
set JAVA_HOME=C:\jdk-17
set PATH=%PATH%;%JAVA_HOME%\bin
set CLASSPATH=%JAVA_HOME%\lib
set CATALINA_HOME=C:\apache-tomcat-9.0.54
set PATH=%PATH%;%CATALINA_HOME%\bin;
```
5.tomcat起動
C:\apache-tomcat-9.0.54\bin\startup.bat

6.動作確認
http://localhost:8080/
※TOMCAT起動ページが出れば正常

##JSP動作確認
1.JSPファイルの作成
　保存先とファイル名を以下とする
　C:\apache-tomcat-9.0.54\webapps\sample\HelloJSP.jsp

2.ファイル内容※文字コードはUTF-8を選択する

```
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test0</title>
  </head>
  <body>
	こんにちは!<BR>
	  <% out.println("Hello word"); %>
  </body>
</html>
```

3.以下を開く
http://localhost:8080/sample/HelloJSP.jsp


##Servlet
warファイルの作成が手動では困難なので諦めた。
やっぱり開発環境が必要ですね。


##履歴
2021/10/25 作成
detaにNodeJSで入門(ほぼ自分用メモ)

# deta (baas)
なんかこれが欲しかったけど今まではなかったもの感が否めない最高なBaas(?)。
無料&クレカなし&簡単。満足。最高。

 - データベース(NoSQL)
 - Faas (lambdaとかFirebase functions みたいなやつ)
 - ストレージ

これらが**本当にお手軽に**使える。

大切なことなのでもう一度言う。

**本当にお手軽に**使える。

## インストールもろもろ

### CLIインストール

```
# Windowsの方 (PowerShellで実行してください！)
iwr https://get.deta.dev/cli.ps1 -useb | iex

# macの方
curl -fsSL https://get.deta.dev/cli.sh | sh

```

自分はWindowsユーザなのでmacは試せていません。エラーなどあったらごめんなさい。

### パッケージインストール

```
npm init -y
yarn add deta
```

## 共通部分

いろいろインポートしておく。

```javascript
const { Deta } = require("deta") ;
const deta = Deta(process.env.DETA_PROJECT_KEY) ;

```

※プロジェクトキーは機密情報なので`.env`などに記載しておく。

```:.envの例
DETA_PROJECT_KEY=〇〇〇...
```

## micro
Faas,瞬時的なクラウド上の実行環境

### いろいろセットアップ

microは別プロジェクトで立ち上げるか、トップフォルダ直下にプロジェクト作るほうがよさそう

```
deta new --node プロジェクト名
```

### コード

```javascript
const express = require('express')
const app = express()

app.get('/', (req, res) => {
    const reqBody = req.body ;
    res.status(200).json({
        msg:"ok",
        reqBody,
    });
}) ;

module.exports = app ;

```

## base
DBaas,データベース

```javascript
const usersDb = deta.Base("users") ;

//async 関数内で実行

usersDb.put(
    { name:"TBSten", job:"エンジニア", }
);

const userList = await usersDb.fetch() ;
userList.items.forEach(el=>{
    console.log(el);
});


```

## Drive
Storage,10GBくらいおけるらしい

```javascript
const photos = deta.Drive("photos") ;

//async 関数内で実行

await photos.put(
    "test.png",
    {path: "test/GitHub-Mark.png"}
) ;


```

## 個人的にはこんなフォルダ構成で使いそう

```
lib/
 +- deta/
     +-deta.js //detaをエクスポート
     +-base.js //deta.jsのdetaからbaseと各テーブルをエクスポート
     +-drive.js //deta.jsのdetaからdriveと各フォルダをエクスポート
 +- 
 +- ...(自作ライブラリなど)...

server/
 +- node_module/
     +- ...
 +- index.js //expressでルート分岐

```

# 参考サイト

[公式ドキュメント（英語だけどほんやくしたら結構読める）](https://docs.deta.sh/docs/home)

# 独り言

欲しい機能がこれでもかとあるので、今後作ろうとしているサービスで採用予定です。
Unreal Engineのログインボーナスちゃんと受け取ってる？


Unreal Engineをインストールするために必要なEpic Games Launcherで有料ゲームが毎週期間限定無料配布が行われていることは、有名かなと思いますが、Unreal Engineで使う有料アセットも毎月期間限定無料配布が行われています(2021/10/25現在)。

# 取得場所
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/c8ec6dfe-0fe6-fc27-f1c9-91ee3289dfbf.png)
Epic Games Launcherを開いて、
Unreal Engine > マーケットプレイス > 無料 > 今月の無料コンテンツ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673394/1b2caa03-2e2f-2a37-435e-eb0fb681507e.png)
全てカートに入れて、続行すれば入手済みになります。
ゲームの無料配布の方と同じくインストールしておく必要はないので、PCのストレージ容量は気にしなくて大丈夫ですよ。

# 蛇足
Epic Gamesの無料ゲームを取得しているけど、今後ゲーム開発やゲームエンジンを用いた映像作品作成などしたいなあと考えている人は、ついでにもらっておくと後から便利かもしれませんね。
かく言う私もその一人なわけですが…。そして、この存在を知ったのがUnreal Engineと出会って何か月かした後だったので、もらっておけばよかったなあという気持ちでした。
皆さんもぜひ積みゲーしつつ、積みアセットしていきましょう:muscle:

そのほかにも、こういう期間限定素材配布されているよーなどあったら、教えていただけると、幸せになれそうです。よろしければコメントくださいませ。
配列で使える.sort()が便利だった

#今回の内容

* `.sort()`が便利だったので、その時のことを書きます。


# コードと簡単解説

* 数日前に書いた`連番判定するコード`を`.sort()`を使うことで短くできました。
* `.sort()`は配列内の値を並び替えることが出来ます。
 * 例：`["4","3","2","1"]`を`["1","2","3","4"]`に並び替えることが出来ます。

# .sort( )使用前のコード

```Swift:
    func judge(judgeTarget:String){

        textContents = []

        for text in judgeTarget{

            textContents.append(String(text))
        }

        if textContents[0] == textContents[1] &&
           textContents[0] == textContents[2] &&
           textContents[0] == textContents[3]{

            alert()

        }else{

            switch Int(textContents[0])! < Int(textContents[3])!{

            case true:
                if Int(textContents[3])! - Int(textContents[0])! == 3 &&
                   (Int(textContents[1])! - Int(textContents[0])!) + (Int(textContents[3])! - Int(textContents[2])!) == 2{

                    alert()
                }

            case false:

                if Int(textContents[0])! - Int(textContents[3])! == 3 &&
                   (Int(textContents[0])! - Int(textContents[1])!) + (Int(textContents[2])! - Int(textContents[3])! ) == 2{

                     alert()
                 }
             }
         }

    }
```

# .sort( )使用後のコード

* 以前は、`["4","3","2","1"]`か`["1","2","3","4"]`なのかを判定してましたが、`.sort()`を使用することで`["1","2","3","4"]`か`["1","1","1","1"]`の様な場合だけ判定すれば良くなりました。

```Swift:
    func judge(judgeTarget:String){
        
        textContents = []
        
        for text in judgeTarget{
            
            textContents.append(String(text))
            textContents.sort()
        }
        
        if textContents[0] == textContents[1] &&
           textContents[0] == textContents[2] &&
           textContents[0] == textContents[3]{
            
            alert()
            
        }else if Int(textContents[3])! - Int(textContents[0])! == 3 &&
                (Int(textContents[1])! - Int(textContents[0])!) + (Int(textContents[3])! - Int(textContents[2])!) == 2{
            
            alert()
        }
        
    }
```

# 終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
Djangoレッスンメモ

Djangoを学習するにあたり、YouTubeの動画を参照しました。

以下の二つが検索上位にヒットし、内容も分かりやすかったように思います。
レッスンで学んだキーポイントを挙げておきます。

https://www.youtube.com/watch?v=rHux0gMZ3Eg&t=1325s
Djangoの基礎を教えてくれます。DjangoのViewはなんでそういう名前にしちゃったかな。役割としてはRequest Handlerなんだけど、って言ってたような気がします。

紹介していたdjango-debug-toolbarが便利そうでした。

https://www.youtube.com/watch?v=e1IyzVyrLSU
こちらはアンケートアプリを題材に、最初のインストールから、簡単なアプリができるまで解説してくれるので、Djangoの動き、開発の流れをつかむのに役に立ちました。

バーチャル環境で作業するには
ターミナルでまずpipenvをインストール
pip install pipenv
バーチャル環境でdjangoをインストール
pipenv install django
バーチャル環境で作業
pipenv shell

pollsterプロジェクトを作成
django-admin startproject pollster

サーバーを走らせるには(ポート指定はオプション)
python manage.py runserver 8081

この記事も随時アップデートしていこうと思います。
phpのupload上限解放


phpやwpを使う際にuploadファイルの上限があることに気がつきました。
この設定をいじれば、上限が解放され、重たいファイルもupすることができるようになります。
Localで開発をしていると気づきにくいところですが、本番反映する時などには重要です。

#### php.iniを設定する
phpの初期設定への変更を促すことができます。

サーバーの中からファイルを探して、
```upload_max_filesize = 32M
post_max_size = 64M
memory_limit = 128M
```

この辺りの設定を見直します。
upload_max_filesizeを変更する際に、32M(メガバイト)から128や256などにあげるといいかと思います。

その際には、必ずサーバーの再起動を忘れずにしてください。ただ単に記述するだけだと意味がないので。
再起動せずともできる方法はあるとは思いますが、再起動すれば間違いないと思います。

他には、.htaccessをいじるものもあります。
どの部分をいじったか、忘れないようにしましょうね。


参考：
https://kinsta.com/jp/blog/increase-max-upload-size-wordpress/#htaccess
Unityでgoogle-signin-unityとFirebase SDKを共存させてAndroidビルドする方法のメモ

## はじめに
前回 [Firebase AuthのGoogle認証をする方法](https://qiita.com/Harineko0/items/7345250439f427f38aee) の記事を書きましたが、記事中の状態でFirebaseFirestoreをインポートしたところエラーが出たので、少し回りくどいですがその対処法を備忘録も兼ねてまとめます。

## 使用するツール
Unity 2021.1.26f1
google-signin-plugin-1.0.4 (google-signin-unity)
firebase_unity_sdk_8.4.0

## google-signin-unityのインポート
[前回](https://qiita.com/Harineko0/items/7345250439f427f38aee#google-signin-unity%E3%81%AE%E5%B0%8E%E5%85%A5) と同様にインポートします。エラーが出る場合は [GitHub](https://github.com/Harineko0/google-signin-unity-example) を参照してください。

## Firebase SDKのインポート
google-signin-unityをインポートしたプロジェクトとは別で新規のUnityプロジェクトを作成し、必要なSDKをインポートします。[前回](https://qiita.com/Harineko0/items/7345250439f427f38aee#firebase-auth%E3%81%AE%E5%B0%8E%E5%85%A5) の手順 3. 4. と同様にファイルの操作を行います。 
[flysakiさんの記事](https://qiita.com/flysaki/items/f022ae9a714db2b16674#configure-project-launcher-warning-the-option-setting-androidenabler8false-is-deprecated) の通りに設定を変更します。External Dependency Manager から Android Resolver と Version Handler を実行し、Androidビルドが成功したら完了です。

## google-signin-unityとFirebaseを統合
両者どちらも Assets/ 内にある ExternalDependencyManager を削除します。それぞれバージョンが異なるため、2つを統合した状態で Resolver を実行すると Plugins/Android/ 内のファイルが壊れます。
その後、両者のプロジェクトの Assets/ 内を統合します。Parse/ は Firebase の方を優先してください。

## おわりに
この状態でビルドしても、Firebase.Editor云々のエラーが出てビルドに失敗する場合があります。Unity Editorを開きっぱなしで何度かビルドを繰り返すと成功することがあります。
もしこれよりもいい方法があれば教えてください。
cssの順位 順番


```html
<div class="test1 test2 test3">
```

```css
.test3 {
  background-color: blue;
}
.test2 {
  background-color: green;
}
.test1 {
  background-color: red;
}

```

このhtml上で反映されるcssはcssファイルに書いた最後のコードが反映されます。
ここでいうと、test1のredが適用される。

html上のclassの順番を変えても変わらず、cssファイルの下にある情報が優先順位としては高いみたいですね。

>>ただし、この際、htmlにstyleを直書きすると、優先されるのはstyleに書いた情報です。なので、style > classで cssの順位はcssファイルの読み込まれる順番で決まる！！！
[基本情報技術者]キューとスタックについて

# はじめに
本記事では、本日学習した`キューとスタック`について記述します。

# キュー
`キュー`は格納した順序でデータを取り出すことができるデータ構造です。

`最初に格納したデータ`は`最初に取り出す、FIFO(First-In First-Out)`
先入先出の特徴があります。

キューにデータを格納することを`エンキュー`、
キューからデータを取り出すことを`デキュー`といいます。

# スタック
`スタック`とは、格納した順序とは`逆の順序`でデータを取り出すことができるデータ構造です。

`最後に格納したデータ`を`最初に取り出すLIFO(Last-In First-Out)`
後入先出の特徴があります。

スタックにデータを格納することを`プッシュ`、
スタックからデータを取り出すことを`ポップ`と言います。

```
例.スタック操作について

PUSH x : 整数値xをプッシュする
POP : スタックからデータをポップする

空のスタックに対して、次の順序で行った。
PUSH1 → PUSH7 → PUSH9 → POP →  PUSH3 → PUSH4 → POP → POP

答えは、
7
1
```

以上です。

# 終わりに
非常に簡単なところでしたが、
本日から基本情報技術者の勉強を開始しました。
(1時間前ぐらいですがw)

試験日を11月21日に予定しましたので、明日からまた頑張ります。
UiPathの個人的によく使うショートカットまとめ

#はじめに
UiPathで開発を行う上で、「もっと早く知りたかった…」と思うショートカットキーをまとめたものです。
役立つショートカットキーを見つけ次第、都度追記していきます。どうぞよろしくお願いいたします。
※記載順番はバラバラです。ご承知おきください。

##注釈を追加する
>Shift + F2 - 選択したアクティビティに注釈を追加します。

一言：これ知るまで毎回右クリック→注釈を追加するで追加していました。
個人的にこれは一番最初に持ってきたかった。

##アクティビティ名を編集する
>F2 - 選択されたアクティビティの名前の変更を可能にします。

一言：これと注釈追加のショートカットどっちを上に持ってこようかとても迷いました。
これ知るまでアクティビティの名前欄をダブルクリック（たまに失敗する）でアクティビティ名を変更していました。
もっと早く知りたかった～

##選択したアクティビティ内で変数を定義する
>Ctrl + K - 入力フィールドまたは式エディターで使用すると、アクティビティの必須の型と同じ型の変数を作成します。フィールドに式が既に存在する場合は、Ctrl + K を押す前にその式または式の一部を選択し、選択したテキストを新しい変数の名前として使用できます。

一言：これ知っているか知らないかでは開発のスピードが全く異なります。
これを知るまで毎回変数タブから変数作成して…ええっと型は…とかやっていたので、これを知ってからは新しいアクティビティにびくびくしなくなりました。

##選択したアクティビティをトライキャッチで囲む
>Ctrl + T - アクティビティを [トライ キャッチ] アクティビティの [Try] セクション内に配置します。

一言：トライキャッチ、結構使うんですよね。
知るまではいちいちアクティビティからトライキャッチ探してドラッグして…ってやっていました。

##選択したアクティビティ内に引数（入力）を定義する
>Ctrl + M - 入力フィールドまたは式エディターで使用すると、アクティビティの必須の型と同じ型の入力引数を作成します。フィールドに式が既に存在する場合は、Ctrl + M を押す前にその式または式の一部を選択し、選択したテキストを新しい引数の名前として使用できます。

一言：これ今知りました（小声）
変数が定義できるってことは、引数もできるのかな～と思っていたんですが、やっぱりあったんですね。
めっちゃ便利だな～

##選択したアクティビティ内に引数（出力）を定義する
>Ctrl + Shift + M - 入力フィールドまたは式エディターで使用すると、アクティビティの必須の型と同じ型の出力引数を作成します。フィールドに式が既に存在する場合、Ctrl + Shift + M を押す前にその式または式の一部を選択し、選択したテキストを新しい引数の名前として使用できます。

一言：これも今知りました（極小声）

##ブレークポイントを設置する

>F9 - 選択したアクティビティにブレークポイントのマークを付けます。

一言：デバックするときは必須ですね。
便利すぎてこれ知るまでどうやってブレークおいてたか忘れてしまいました。


#おわりに

このほかにもたくさんのショートカットキーがありました。（参考文献内リンク参照）
自分で使っていって、便利だったものは都度こちらにも書いていきます。
（使って書いて覚えたいため）

内容には間違いの無いよう細心の注意をはらっておりますが、何かありましたらコメントいただけますと幸いです。
よろしくお願いいたします。


#参考文献
https://docs.uipath.com/studio/lang-ja/docs/keyboard-shortcuts

やっぱり公式がなんだかんだ一番載ってますよね。
Laravelクエリビルダを使ってレコード数を取得する方法

#はじめに
Laravelクエリビルダを使ってレコード数を取得しようとした際、集計メソッドを用いると簡潔だったためまとめます。

#クエリビルダを使ってレコード数を取得する方法
集計メソッドを用いることでレコード数を取得することができます。

例：
usersテーブルにてmanageカラムが1のレコード数を取得

```
$count = \App\Models\User::where('manage', 1)->count()
```

※select(count(*) as count)のようにせず、レコード数の取得が可能である。

他にもmax、min、avg、sumなどの集計メソッドがあります。

#おわりに
Laravelでデータを取得時に上手くいかない場合は、便利なメソッドがあるかもしれないので調べてみるのがいいかもしれませんね！

>参考にしたページ

https://readouble.com/laravel/5.7/ja/queries.html
Power Automate: Post message での画像添付

# 背景

Teams で画像添付する際、Adaptive Card でも Message でも、サイズ制限がありますよね。
そろそろなんか変わってないかな、と思い調べた結果。

# 結論

まぁ・・結局まだダメだったってことが分かっただけでした・・
28kB って昔より少し大きくなった印象だけど、まぁきっと記憶のせいかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/05907ba8-c802-f463-b03c-e41a9723c754.png)


# 画像添付方法比較

三種類の画像サイズ別の動作記録、以下三点について

- 28kより小さいサイズ
- 28kを超えたサイズ
- Thumbnail 用の巨大なサイズ

|方法|1M 超えの Gif| 38k の png|9k の png|例|
|-|-|-|-|-|
|Thumbnail|LargeでもOK|OK|OK|<code>\<img src="@{outputs('Get_file_properties_1M')?['body/{Thumbnail}/Large']}" /></code>|
|base64|too large error![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/5cf01db2-7358-762f-fe01-979bf67d05fd.png)|too large|OK|<code>\<img src="data:image/png;base64,@{outputs('Get_file_content_9k')?['body']?['$content']}" /></code>|
|Link|画像表示なし![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/1d3d498d-c506-769e-0ab2-e163858f4cd5.png)|←|←|<code>\<a href="@{outputs('Get_file_properties_1M')?['body/{Link}']}"><br>\<img src="@{outputs('Get_file_properties_1M')?['body/{Link}']}" /><br>\</a></code>|

Thumbnail で表示が一番ですね・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/2828eff4-f1c4-22a3-b717-d118a5bfa8b5.png)
railsチュートリアル第10章 TDDで編集を成功させる

###TDDで編集を成功させる
今度は編集フォームが動作するようにしましょう。

flashメッセージが空でないかどうかと、
プロフィールページにリダイレクトされるかどうかをチェックします。


ユーザー名やメールアドレスを編集するときに毎回パスワードを入力するのは不便なので、（パスワードを変更する必要が無いときは）パスワードを入力せずに更新できると便利です。
####編集の成功に対するテスト
test/integration/users_edit_test.rb

```rb
 require 'test_helper'
 # test_helper.rbのパラメータ群を指定

class UsersEditTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
  end
.
.
.
  test "successful edit" do
    get edit_user_path(@user)
    assert_template 'users/edit'
    name  = "Foo Bar"
    email = "foo@bar.com"
    patch user_path(@user), params: { user: { name:  name,
                                              email: email,
                                              password:              "",
                                              password_confirmation: "" } }
    assert_not flash.empty?
    # flashメッセージが空でないかどうか
    assert_redirected_to @user
    # プロフィールページにリダイレクトされるかどうか
    @user.reload
    # データベースから最新のユーザー情報を読み込み直して、
    # 正しく更新されたかどうかを確認
    assert_equal name,  @user.name
    assert_equal email, @user.email
    # データベース内のユーザー情報が正しく変更されたか
    # どうかも検証します
    
    # 更新するときはパスワードを要求しない
  end
end
```

###ユーザーのupdateアクション
app/controllers/users_controller.rb

```rb
class UsersController < ApplicationController
.
.
.
  def create
    @user = User.new(user_params)
    # 外部メソッドを使う
    if @user.save
      # 保存の成功をここで扱う。
      log_in @user
      # 登録後に自動ログインするため
      flash[:success] = "Welcome to the Sample App!"
      # 成功時一度だけ表示されるメッセージ
      redirect_to @user
      # urlを指定して表示する
      # 保存成功したらurlを表示する
    else
      render 'new'
      # 保存に成功しなければnewアクションに移動する
      # 失敗したらまた戻る
    end
  end
  
  def edit
    @user = User.find(params[:id])
    # データベースから探す
  end
  
  def update
    @user = User.find(params[:id])
    if @user.update(user_params)
      # 更新に成功した場合を扱う。
      flash[:success] = "Profile updated"
      # 成功時にメッセージを表示
      redirect_to @user
      # ユーザーページを表示させる
    else
      render 'edit'
    end
  end
.
.
.
end
```
#####テスト
```
ubuntu:~/environment/sample_app (updating-users) $ rails t
Running via Spring preloader in process 16575
Started with run options --seed 34349

  31/31: [============================] 100% Time: 00:00:01, Time: 00:00:01

Finished in 1.66895s
31 tests, 77 assertions, 0 failures, 0 errors, 0 skips
```
####演習
1.
実際に編集が成功するかどうか、有効な情報を送信して確かめてみましょう。

確認 

2.
もしGravatarと紐付いていない適当なメールアドレス（foobar@example.comなど）に変更した場合、プロフィール画像はどのように表示されるでしょうか? 実際に編集フォームからメールアドレスを変更して、確認してみましょう。

gravatarをしていない。
多分　違うアイコンを表示されると思う。
Ubuntu upgradeができない(mirrors.evowise.com)

#Ubuntuのアップグレードができない
更新を行ったらエラーが出ました。

```
$ sudo apt-get update
ヒット:5 http://dl.google.com/linux/chrome/deb stable InRelease                                                                 
ヒット:6 http://packages.microsoft.com/repos/code stable InRelease                                
取得:1 http://it-mirrors.evowise.com/ubuntu focal InRelease [635 kB]          
取得:2 http://it-mirrors.evowise.com/ubuntu focal-updates InRelease [635 kB]
取得:3 http://it-mirrors.evowise.com/ubuntu focal-backports InRelease [635 kB]
取得:4 http://it-mirrors.evowise.com/ubuntu focal-security InRelease [635 kB]
エラー:1 http://it-mirrors.evowise.com/ubuntu focal InRelease
  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
エラー:2 http://it-mirrors.evowise.com/ubuntu focal-updates InRelease
  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
エラー:3 http://it-mirrors.evowise.com/ubuntu focal-backports InRelease
  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
エラー:4 http://it-mirrors.evowise.com/ubuntu focal-security InRelease
  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
パッケージリストを読み込んでいます... 完了
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
N: このようなリポジトリから更新を安全に行うことができないので、デフォルトでは更新が無効になっています。
E: リポジトリ http://it-mirrors.evowise.com/ubuntu focal InRelease は署名されていません。
E: http://it-mirrors.evowise.com/ubuntu/dists/focal/InRelease の取得に失敗しました  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
N: このようなリポジトリから更新を安全に行うことができないので、デフォルトでは更新が無効になっています。
E: リポジトリ http://it-mirrors.evowise.com/ubuntu focal-updates InRelease は署名されていません。
E: http://it-mirrors.evowise.com/ubuntu/dists/focal-updates/InRelease の取得に失敗しました  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
E: http://it-mirrors.evowise.com/ubuntu/dists/focal-backports/InRelease の取得に失敗しました  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
E: リポジトリ http://it-mirrors.evowise.com/ubuntu focal-backports InRelease は署名されていません。
N: このようなリポジトリから更新を安全に行うことができないので、デフォルトでは更新が無効になっています。
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
E: http://it-mirrors.evowise.com/ubuntu/dists/focal-security/InRelease の取得に失敗しました  クリアサインされたファイルが有効ではなく、'NOSPLIT' を得ました (認証にネットワークが必要?)
E: リポジトリ http://it-mirrors.evowise.com/ubuntu focal-security InRelease は署名されていません。
N: このようなリポジトリから更新を安全に行うことができないので、デフォルトでは更新が無効になっています。
N: リポジトリの作成とユーザ設定の詳細は、apt-secure(8) man ページを参照してください。
```

いろいろ調べてみて以下のコマンドを叩いてみてもダメでした。

```
$ sudo apt autoremove
```

```
$ sudo rm -rf /var/lib/apt/lists/*
```

エラーを見てたら、mirrors.evowise.comが怪しいと感じたので調べてみた。

![Screenshot from 2021-10-25 21-51-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554207/9954f315-a194-75a5-39e1-7fcb74de4ef6.png)


”ダウンロード元”が元々”evowise”なんたら（このとき選択していたものが消えてしまったのでうろ覚えです）になっていたので、”日本のサーバー”に変更したらアップデートすることができました。
Linux全般について

- CentOSでのマウス切り替えは、左コマンドキー

便利機能

| コマンド | 意味 | 備考 |
|:-----------|:------------|:------------:|
|Ctrl(Command) + a|行の先頭に移動|       |
|Ctrl(Command) + e|行の最後に移動|       |
|Ctrl(Command) + w|カーソル位置の単語を削除||
|Ctrl(Command) + u|カーソルの位置から行頭まで削除||
|Ctrl(Command) + k|カーソルの位置から行末まで削除||
|Ctrl(Command) + k|最後に削除した内容を挿入||
|Ctrl(Command) + c|実行中のコマンドを強制終了||
|Ctrl(Command) + k|最後に削除した内容を挿入||