OmniAICreator/Qiita-1.07M huggingface dataset:
React(環境構築 create-react-app) とらゼミ03 メモ

# 環境構築
- node ver8.10以上
- npm ver5.6以上
- homebrew,nodebrewのインストールが必要。

## nodebrew(node,npmも)のインストール
 - nodebrewをhomebrewを使ってインストール。

```terminal
> brew install nodebrew  
```
- nodebrewのバージョン情報確認。

```terminal
> nodebrew -v 
```

- 利用できるnodebrewnのバージョンを確認。

```terminal
> nodebrew ls-remote
```
- nodebrewの安定バージョンのインストール。
 
```terminal
> nodebrew install stable 
```
- 現在インストールされているバージョンの確認。

```terminal
> nodebrew ls
```

- 使用するバージョンを指定。

```terminal
> nodebrew use (バージョン)
```

- PATHの記述

```terminal
> echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```
これでnodeとnpmもインストールされる。

```terminal
> node -v
> npm -v
```
バージョン情報が出れば成功。

- 環境構築コマンド入力。 

```terminal
> npx create-react-app-(ファイル名)
```
## 実際に動かしてみる。
- 本番環境のディレクトリを作成、このタイミングでバンドルやトランスパイルも行う。

```terminal
> npm run build
```
- webページの立ち上げ。

```terminal
> npm start
```
- babelやwebpackの設定を変更したい場合のみ使用。

```terminal
> npm run eject
```

## ディレクトリの説明
- src:  コンポーネントを作るjsファイルがある。
- build: 本番環境用にバンドルされたディレクトリ。
- public: htmlファイルや設定ファイルがある。

> バンドル: srcとpublicのファイルを一つのファイルに纏める。

## 何故 create-react-appで環境構築するのか？
トランスパイラのbabelやパンドラーの設定はとてもムズイらしいので、取り敢えずReactを使ってみたいと言う人はcreate-react-appで構築した方が良い。
React(JSXの基礎知識) とらゼミ02 メモ

#JSX
- javascriptの拡張言語である。
- Facebookが開発。
- Reactの業界標準である。

## 何故使うのか？

```react
const fuga = "<h1>Hello world</h1>";
const start ="こんにちは";
const foo = "<p>世界</p>"
document.getElementById("hoge").innerHTML = huga;
document.getElementById("point").innerText = start;
document.getElementById("wd").innerHTML = foo; 
```
このように量が増えるととても見にくい = 可読性が落ちる。
可読性を下げないためにもHTMLのように記述出来た方が良い。

## トランスパイラ
JSXはjsではないのでブラウザは理解できない、なのでJSXの記述を「変換」する必要がある、
これをトランスパイラと呼ぶ。TypeScriptなどもトランスパイラしてjsに置き換えている。
JSXではなくReactのまま書こうとすると、

```react
React.createElement(
    "h1",
    null, //引数
    "Hello World"
)
```

スコシ分かりにくくなるが実際はこう書かれている。

## jsの基礎文法
### ①
Reactパッケージのインストールが必要(方法はとらゼミ03で記述)。

```react
// jsx内ファイルの先頭
import React from "react"
```

### ②
HTMLとほぼ同じ記述方法だが、classはclassNameと記述する。

```react
let hoge = "hoge"
const App = () => { //Appはコンポーネント。
    return(
        <div className = {hoge} >
            <h1>Hello World!!</h1>
        </div>
    )
}
```

### ③
{}内に変数や関数を埋め込める、{}内はJSの世界。

```react
let hoge = "hoge"
const hello = "<h1>Hello World!!</h1>"
const App = () => { //Appはコンポーネント。
    return(
        <div className = {hoge} >
            {hello}
        </div>
    )
}
```

### ④
変数名は全てキャメルケースで書く、ケバブケースはNG。
 > - キャメルケース : ラクダのコブ、単語の小文字と大文字の組み合わせ(fooBar等)。
> - ケバブケース : ハイフン繋ぎのやつ(foo-bar等)。
-rを削除して

# -rを削除して！

ある日, いつものように友人と雑談をしていたところ, ふと「Dovahaちゃん, これもlinuxあるあるなんだけれど, "-r"って名前のファイルを削除できる???」って言われた.
これが僕の10分くらいの苦労の始まりだった.

ここで一旦ストップ. 自分自身でも"-r"って名前のファイルを作って削除してみよう.
---
## 結論
* オペランドにハイフン付きのを指定するのは難しい
* 様々なコマンドの`-r`のオプションに詳しくなれるね.
* ファイルオペランドに./-rとして指定してあげる方法で-rを指定できる.
* オプションに`--`を指定するとハイフン付きファイル名が指定できるようになる.

## "-r"を削除するために, まず"-r"を作ろう

ファイルを削除するためにはまずは作らないといけない.

### touch -r
中身のないファイルを作るために使われるコマンドと言えば,`touch`である.
というわけで,

    $ touch -r

をするわけだが, 

~~~
$ touch -r
touch: option requires an argument -- 'r'
Try 'touch --help' for more information.
~~~

と出てきた.
どうやら,touchにおける`-r`オプションというのはファイルのタイムスタンプを合わせるためのコマンドらしい.

    $ touch -r fileB fileA

とコマンドを打つとfileAのタイムスタンプがfileBとそろうらしい.
そりゃあ引数を必要とするって怒られるわけだ.

### linux環境外で作成する(番外)

自分が利用しているlinux環境がWSLであるため, ファイルシステムにwindows側からアクセスができる.(というか, linuxホームからwindowsのDocumentにシンボリックリンクを貼って普段はそこで作業を行っている.)

じゃあ作業している領域にwindowsのエクスプローラーでアクセスして-rというファイルを作ればいいわけだ!!!となるわけだ.

ってことで作った.
が, linuxでどうしてもいじることができない.それに邪道感が半端ないのでwindowsのexploreで削除を行った.

### リダイレクト

友人から, ヒントをもらった.
作るだけならリダイレクトをすると簡単に作れるよ！とのアドバイスをもらった.

ということで作ってみる.

~~~
$ last > -r
$ ls
-r
~~~

意外とあっさりできてしまった.

ふとこのファイルの中身を気になって

    $ less -r

としてみると, 

~~~
$ less -r
Missing filename ("less --help" for help)
~~~

と怒られた.

こいつにも`-r`オプションがあるのかと怒られて調べてみると, ANSI Color Escape Sequenceを色表示するオプションらしい.
つまるところ, コードに色を付けられる？のかな？
ということで, ちょっと研究室のwwwサーバーにアクセスして確認してきた.

うーん, どちらも黒いままだ……. ということでまた今度調べることに.

とりあえず, "-r"というファイルを作れたので削除を頑張る.

## "-r"を削除しよう.

### ワイルドカードを使ってみよう

ファイルの削除をしたいのなら, そりゃもちろん`rm`でしょ. ということで`rm`を使おうとする.

だが, ここでDovaha君は賢いので気が付いた!!`-r`オプションは再帰的に削除(ディレクトリごと削除できる!)するためのオプションだからオプション判定されてきっと`rm :オペランドがありません`って怒られるだけになっちゃうと！

なので頭がいいDovaha君はディレクトリ内のモノを`*`を用いて一斉に削除することに!!

~~~
$ ls
-r
$ rm *
rm: missing operand
Try 'rm --help' for more information.
~~~

なんでオペランドが無いって怒られるの……？どうして……(´・ω・`)

ここでワイルドカードの動作を考えてみよう.
1. コマンドとして実行される前にワイルドカードが展開される.
1. 展開されて"-r"が出てくる.
1. 実行されるのは`rm -r`になる.

ダメじゃん.というわけです.
このままだと削除ができない！と困ってしまうわけですね.

#### ここまでのまとめ

* `-r`を直接コマンドの後に書くとオプションとして認識される.
* `*`でワイルドカード展開を行うと-rが展開された後にコマンドが走るのでオプションとして認識される.

### -rの示し方

とりあえず削除するためにディレクトリごと消すというのを試していたところ, ふと気が付いた.
「あれ？これ, ディレクトリの中の-rなら指定できるのじゃない???と」
というわけで試してみる.

~~~
~/test$ ls
-r
~/test$ pwd
/home/USER/test
~/test$ rm ./../test/-r
~/test$ ls
~/test$
~~~

できた!!!
どうやら, ファイルオペランドにオプションとして認識できないものをいれればいいみたい!!!

じゃあ……カレントディレクトリの-rも削除できるんじゃ?となるわけです.

~~~
~/test$ last > -r
~/test$ ls
-r
~/test$ rm ./-r
~/test$ ls
~/test$ 
~~~

これもできた!!となるとファイルの作成も削除もこれで出来るね！

~~~
~/test$ touch ./-r
~/test$ ls
-r
~/test$ rm ./-r
~/test$ ls
~/test$ 
~~~

というわけです.

## 正攻法は??

どうやらこれは友人の想定していた方法ではないらしい.

友人の想定は,`--`オプションを使うというもの
これを使うと？

~~~
$ touch -- -r
$ ls
-r
$ rm -- -r
$ ls
$ 
~~~

いや！こんなの知らなきゃできるか!!!!

というわけでした.

_おわり_
React(超基礎知識) とらゼミ01 メモ

#React
- Facebook社が開発したjavasctriptのライブラリ(フレームワークではない。)
- WebのUIを作るためにある。

##UIとは？
見た目と機能のことを言う。
そして見た目(view) + 機能(controller) = コンポーネントをつくるのがReact

##Webの構造(コンポーネントのツリー構造)おおまかに
![ツリー構造.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100170/96d09d5e-f4a2-4d44-8e46-8b3749f093e7.png)


## DOMとは
Document Object Model
インタフェースでありHTMLにアクセスする窓口、HTML構造、見た目、コンテンツを変更。

## Virtual DOM
Reactで管理するDOM、ブラウザのレンダリングと別管理であり効率良くDOM操作できる。
> レンダリング : 簡潔に言うとブラウザ画面に表示させるまでの処理。

- 通常のDOM操作の例

```js
document.getElementById('hoge').innerText = 'fuga';
```

- ReactのDOM操作の例

```react
render(
    <div id='hoge'>fuga</div>
)
```
どちらも id = hoge にテキスト 'fuga' を追加する操作。

##差分描画(現時点での認識)
変更のあった場所(差分箇所)を再描画する。

##JSX(ざっくり)
jsでhtmlっぽく書ける。
- 例)

```react
ReactDom.render(
    <div className = {hoge}>
        <h1>Hello World!!</h1>
    </div>
)
```
Picker内の選択肢をDictionaryにしたときのLocalization


Textについてはこちらの記事のようにLocalizable.stringsに記述すればかんたんに対応できます。

https://zenn.dev/sakutech/articles/swiftui-localization

でもPickerの中のDictionaryを使ってるところでは、上記の方法ではうまくいきませんでした。

Localeを使って場合分けしたらうまくいきました。


```swift
    func firstLang() -> String {
            let prefLang = Locale.preferredLanguages.first
            return prefLang!
    }
```

で、こう。

```swift
    Picker(selection: $name, label: Text("name"), content: {
        ForEach(1..<3, id: \.self){i in
             if firstLang().hasPrefix("ja"){
                   Text(NumToNameJP[i] ?? "").tag(i)
              } else{
                   Text(NumToName[i] ?? "").tag(i)
              }
         }
    })
```

```swift
let NumToPitchJP: [Int: String] = [
    1: "うさぎ",
    2: "かめ",
    3: "ねずみ"
]

let NumToPitchJP: [Int: String] = [
    1: "rabbit",
    2: "turtle",
    3: "mouse"
]
```

参考
https://capibara1969.com/2120/
https://medium.com/@dkmczk/swift3-端末の表示言語を読み取り-言語ごとに分岐する方法まとめ-ios-d0d3f92f9bcc
Node.js パッケージ管理(更新中) メモ

## npm
正式名称 : Node Packcage Maneger
Node.jsのパッケージ管理ツール外部で、ライブラリに対する依存バージョンの管理、更新を容易にすることが出来る。
npm ls でディレクトリ内のパッケージ依存構造( 依存ツリーを確認できる。)
## package.json
JSONファイルによって管理され、メタデータ(知らん)の管理にも使われる。
npm initで生成でき、様々な値を設定できる。
> メタデータとは :  データが持つデータ、データ自身に付随するデータのこと(意味不)
> Excelで言えば作成者、作成日などを指す。

###値
#### name
パッケージ名の設定です。
レジストリに公開する際必要で、付けれる名前には制約がある(オライリーハンズオンNode p.365)
スコープ付きパッケージ[@スコープ名/]で設定できる。
> スコープ : 変数がどの場所から参照できるか定義する概念、同一スコープ上にある変数にアクセスできるらしい....。

#### version 
パッケージのバージョンです。
バージョンはセマンティックバージョニングv2.0.0の仕様を満たす書式でなければならず、
メジャーバージョン、マイナーバージョン、バッチバージョンで表される。
> - メジャーバージョン : 以前のverと互換性が無い(破壊的な変更)時にに変化。
> - マイナーバージョン : 互換性を保ったまま機能を追加したい時変化。
> - バッチバージョン : 互換性を保ったまま不具合を修正したい時変化。

ただしメジャーバージョンが0のうちの更新は、破壊的変更が行われることがある。

#### decription
パッケージの説明文。

#### keyword
関連するキーワードの指定(配列j)。

####  main
パッケージのメインエントリポイントとなるファイルを指定する。

#### author、contributors
一人で開発しているパッケージはauthor、複数人の時はcontributorsに記述する。

#### license
その名の通りライセンスの設定。

#### private
パッケージの公開設定。
> - "private" : true の時パッケージは非公開。

#### dependencies
パッケージの依存関係の管理。
ver前に「^」がついている時指定されているバージョンと互換性のあるバージョンに依存する。

``` javascript
"dependencies": {
    "mkdirp": "^1.0.4",
    "rimraf": "^3.0.2"
  }
```
この場合のmkdripに注目すると 依存パッケージのバージョン範囲は 1.0.4以上2.0.0未満となる。

#### devDependencies
テスト、ビルド時の依存パッケージを管理する項目。
npm install --save-devで追加できる。

#### script 
プロジェクトで必要なタスクをスクリプトとして記述するためのフィールド。
npm run -script (スクリプト名)、npm run (スクリプト名)　などで実行。

#### yarn
Opencv


## 画像処理

### make movie

```python
```

### 画像生成
```
# 1chのブランク画像を生成
img = np.zeros((height, width), np.uint8)

# 1chの画像をスタックして3chのブランク画像を生成
img = np.dstack([img, img, img])

# 3chのブランク画像を生成
img = np.zeros((height, width, 3), np.uint8)

# 4chのブランク画像を生成,png形式の透明画像で使用する
img = np.zeros((height, width, 4), np.uint8)

# 画像を出力
cv2.imwrite("./test.jpg", img)
```

---
### 空画像の生成 
```
# 1chのブランク画像を生成
img = np.zeros((height, width), np.uint8)

# 1chの画像をスタックして3chのブランク画像を生成
img = np.dstack([img, img, img])

# 3chのブランク画像を生成
img = np.zeros((height, width, 3), np.uint8)

# 4chのブランク画像を生成,png形式の透明画像で使用する
img = np.zeros((height, width, 4), np.uint8)

# 画像を出力
cv2.imwrite("./test.jpg", img)
```

---
### 画像のリサイズ
```
path = "./test.jpg"
img = cv.imread(path)
print(img.shape) # 返り値はheight width ch
img = img.resize(img, (height, width))
print(img.shape)
```
---
### 色の入れ替え
```
img = np.zeros((256, 512, 3), np.uint8)
black, white = [0, 0, 0], [255, 255, 255]
img[np.where((img == black).all(axis = 2))] = white
```
---
### 透明画像の生成
```
img = np.zeros((256, 512, 3), np.uint8)
mask = np.zeros((256, 512, 1), np.uint8)

img = cv2.circle(img, (256, 128), 100, (0, 0, 255), thickness=-1)
mask = cv2.circle(mask, (256, 128), 100, (255), thickness=-1) # 0の部分は透明となる

dst = np.dstack([img, mask])
cv2.imwrite("test.png", dst)

img = cv2.imread("./test.png", -1) # 透明画像を読み込むときの引数は-1
```

---
### CPUコア数をカウント
```
import multiprocessing
multiprocessing.cpu_count()
```

## utils

### コマンドライン引数
```
def get_args():
    parser = argparse.ArgumentParser()
    parser.add_argument("--aaa", type=float, default=-1.0)
    parser.add_argument("--bbb", type=str, default='sample.png')
    parser.add_argument("--ccc", type=str, default=None)
    parser.add_argument('--ddd', action='store_true', default=False, help='')
    args = parser.parse_args()
    return args
```
---
###
Node.js EventEmitter  メモ

## observerパターン
監視対象(subject)と監視役(observer)、監視対象に対して何かイベントがあれば監視役に逐一報告する報連相がしっかりできる上司と後輩の関係。

## イベントの登録、呼び出し
リスナは登録されていくとメモリを圧迫するので定期的に破棄する必要がある。
### EventEmitterのメソッド一覧 
- on(event,listener) : 第一引数イベント名、第二引数にリスナ。
- once(event,listener) : 第一引数イベント名、第二引数にリスナ。
- off(event,listener) : 第一引数のイベント名に対応するリスナを削除。
- emit(event) : 指定したイベントの発行。
Node.js 非同期処理近辺 メモ

## 非同期処理
外部に処理を投げている間結果が帰ってくるまで暇をしている同期処理と違って、暇を効率的に使うことができる秀才な処理。
## コールバック
指定した処理が完了した後、実行してほしい関数を引数に入れることで実現する処理。
## Promise
非同期処理の状態を4段階(pending,fulfilled,rejected,settled)で表してくれる律儀なオブジェクト。
resolveやrejectを使って、成功、失敗時の振る舞いを教えることができる(設定できる)。
### 4つの状態
- pending : 実行中...。
- fulfilled : 成功。
- rejected : 失敗。
- settled : 処理完了。

### resolveとreject
- resolve : 引数は空でも可、空の時はpromiseが入る、処理結果を引数にこいつを実行するとfulfilledになるらしい。
- reject : 基本的にはerrインスタンスが入るらしい、エラーを引数にこいつを実行するとrejectedになるらしい。

promiseはオブジェクトであるため、簡易的にresolve、reject関数を呼び出すこともできる。

## 非同期処理のハンドリング
### then(onFulfilled,onRejected)
promiseの状態がfulfilled(解決)又はrejected(拒否)の時実行するコールバックを設定するメソッド、第二引数(onRejected)は省略できる。
### catch()
thenの第二引数を省略することで使うことが可能、onFulfilledの中エラーも拾うことができるのでエラーハンドリングを一箇所に集約できるらしい(正直意味があまりわからん)
### finally()
promiseの状態がsettledになると実行されるコールバック。

## ジェネレータ関数
処理を途中で中断、実行できるasync/awaitの基になった関数。

``` js
function * generatorfunc{
      console.log("検問1")
      yield1
      console.log("検問2")
      yield2
      console.log("検問3")
      yield3
}

const gene1 = generatorfunc()
gene1.next()
```
functionの後に * 関数内にyieldキーワードを記述するのが特徴。
ジェネレータオブジェクトのnext関数を使うことで、 次のyieldまでの処理を実行する。

## async/await
視覚的に同期処理のように見える非同期処理。
基本的にジェネレータ関数と挙動は同じ。

``` js
async function asyncFunc(input) {
    try{
      const result1 = await ayncFunc1(input)
      const result2 = await ayncFunc2(result1)
      const result3 = await ayncFunc3(result2)
      const result4 = await ayncFunc4(result3)
    }
}
```
### ジェネレータ関数との違い
- functionの後の * が functionの前についているasyncに置き換わっている。
- yieldがawaitに置き換わっています。

awaitの後ろにpromiseインスタンスを渡すと、関数内の処理が一時停止、解決に伴って再開し解決された値がawaitによって返されます、つまりawaitはバトン(結果)が渡されるまで走らないサボり = 同期処理のように実行されるということ。
Vue3なのにmust call Vue.use(VueCompositionAPI) before using any function.が出てくる

# 事象

Vue3で開発しているのに `computed` を使おうとすると下記のエラー文がブラウザのコンソールに表示されうまく動作しない。
ちなみにVue2で開発している場合の対処法はネットで調べるとたくさん出てくるがVue３での事象はあまりない。

```

must call Vue.use(VueCompositionAPI) before using any function.

```

#　解決策

下記のように from vue からインポートする

```

import { computed,defineComponent } from 'vue';

```

`import { computed,defineComponent } from '@vue/composition-api'`　でインポートしていると上手く動作しない模様
KiCadで抜き文字のシルクを作成する

# 大切なこと

**KiCadの標準機能ではそのまま作れません（たぶん）**
なので、今回は画像としてシルクを作成して配置する方法を紹介します

# 抜き文字とは
こういうやつです。たまにこうやってシルク印刷したくなりますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/03db4758-81b9-2423-9d13-0222739178ef.png)

# 大まかな手順
1. シルク印刷したい抜き文字の画像を用意します
1. ビットマップコンポーネントコンバーターを使って画像データとして扱います

これだけ

# 詳細な手順
### 文字の画像を作成する
ここでは以下のWEBサイトを活用させてもらいます。
・フォントの色：白
・画像背景の色：黒
・縦方向：中央
・横方向：中央
に設定しておくと、画像全体のサイズを確認しやすいのでお勧めです。
サイズ自体はKiCadに取り込む際にも調整可能ですが、縦横比はある程度狙っておいた方が手戻りが少ないです。

https://ysklog.net/tool/text-img-generate.html

例えば、こんな感じの画像を用意します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21408/789b02ad-adff-3901-cfa5-275bbba88446.png)

### ビットマップコンポーネントコンバーターを使う
KiCadのビットマップコンポーネントコンバーターの使い方は、いろいろなサイトで紹介されているので、この記事では詳細は割愛します。例えば、以下のサイトなどは分かりやすいと思います。
画像を取り込んだ時に、解像度を調整して基板上でのサイズが決まるので、実際にシルク印刷したい場所を測定しながら、解像度を決めていきます。

https://spiceman.jp/kicad-bitmap2component/

# まとめ
他のCADでは、標準機能でテキストから抜き文字を作成する機能が付いているものもありますが、KiCadでは見当たらなかったので、今回はこのような方法でやってみました。
もし、何かいい方法を知っている方が居ましたら、教えて下さい！
Androidアプリのパフォーマンス 解析

この記事では、Androidアプリのパフォーマンス改善のための、解析方法について記載します。

### 準備
パフォーマンスの解析にはいくつか方法がありますが、ここでは「Systraceコマンドラインツール」を使用します。

Systraceコマンドを使うにはAndroid SDKとPython（２.７）が必要です。
　https://qiita.com/yoshihiro-kato/items/1c4fb816782e6a8aba8e

##### カスタムイベント
処理に時間がかかっていそうな部分にカスタムログを入れます。
※どの辺に時間がかかっているかわからない場合は、広い範囲に入れてみると良いです。

カスタムログは下記のようにTrace.beginSectionとTrace.endSectionをペアで実装します。

```kotlin:TextViewSampleActivity.kt
class TextViewSampleActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        Trace.beginSection("TextViewSampleActivity#onCreate")
        ...
        Trace.endSection()
    }
}
```

### Systraceの取得

まず、下記のコマンドを実行します。
※systrace.pyはSDKの中にあるので、パスは実行環境に合わせて書き換えてください。
※カスタムイベントを取得するには、[プロセス名](https://developer.android.com/guide/topics/manifest/application-element?hl=ja#proc)の指定（--app）が必要です。
※-oで出力ファイル名を指定します。

```
python /Users/yoshihiro/Library/Android/sdk/platform-tools/systrace/systrace.py --app=com.ykato.sample.kotlinsampleapplication -o mynewtrace.html sched freq idle am wm gfx view binder_driver hal dalvik camera input res
```

上記のコマンドを実行すると、下記がコンソールに表示されます。
下記が表示されたら、パフォーマンス解析を行いたい操作を行ってください。

```
Starting tracing (stop with enter)
```

操作が終わったら、コンソール上でエンターキーを押下してください。

```
Tracing completed. Collecting output...
Outputting Systrace results...
Tracing complete, writing results

Wrote trace HTML file: file:///Users/ykato/Documents/tmp/mynewtrace.html
```

### Systraceの解析

Systraceの取得結果の解析は、下記のURLから行います。
https://ui.perfetto.dev

左のツールバーの一番上にある「Open trace file」から、結果を確認したいファイルを選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/bc6b0706-eca1-9b9a-cc3e-cc2d78c7084b.png" width=1000%>

取得結果はプロセス毎に表示され、画面上部の検索窓から、Trace.beginSectionで指定したsectionNameを検索することで、解析対象を簡単に見つけることが出来ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/c7a3c750-80bf-9b1c-d1f5-260a7e0a0481.png" width=1000%>

上記の場合は、TextViewSampleActivity#onCreateは223msかかっていることがわかります。

取得結果の表示操作の詳細は下記を参照してください。
https://developer.android.com/topic/performance/tracing/navigate-report?hl=ja#keyboard-shortcuts

### 補足
左のツールバーの一番上にある「Open with legacy UI」から、結果を開くことで、表示パフォーマンスに問題がある場所（フレームアラート）を特定することが出来ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/bc6b0706-eca1-9b9a-cc3e-cc2d78c7084b.png" width=1000%>

legacy UIもプロセス毎に表示されます。
フレームアラートは丸で囲まれたFで表示され、問題ある箇所は赤と黄色で表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254520/31e4bbc4-84cf-5ad3-f3c5-88e35aaa0e30.png" width=1000%>

### 参考
https://developer.android.com/topic/performance/tracing?hl=ja
fontawesomeのSVGcore版を使って、必要なアイコンだけ使用する方法

laravelとvueを使って、webアプリ開発をしていて、fontawesomeを使いたい場面に出くわした。

でも5つぐらいしか使わないのに、全てのアイコンを読み込むのはコスパ悪いので、SVGのcore版を使って、必要なアイコンだけ取り込んだ。

この記事は、その時のメモ。

サクサクっと手順だけを書いておく。

## npmでインストールcore版をインストール

```
npm install @fortawesome/fontawesome-svg-core
```

## その他に必要なライブラリもインストール

regularとsolid用のものをインストールしておく。

どちらか一つでよければそちらだけインストールすればよき。

```
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-regular-svg-icons
```

## jsファイルで読み込む

どっかのjsファイルで読み込んであげる。（自分で好きなところで読み込んでください。）

```js:どっかのjsファイル
//コア版から必要なオブジェクトを取得
import {config, dom, library} from '@fortawesome/fontawesome-svg-core';
//solidスタイルのアイコンを取得
import {faComment} from '@fortawesome/free-solid-svg-icons';
//regularスタイルのアイコンを取得
import {faStar,faShareSquare} from '@fortawesome/free-regular-svg-icons';
//アイコンが上手く置換できなかった時に消す。
config.showMissingIcons = false;
//アイコンを登録
library.add(faComment, faStar, faShareSquare);
//これで<i>タグを<svg>タグに置換してくれる
dom.watch();
```

###　補足

いくつか捕捉しておきます。

まず、`{faComment}`こんな感じで取得したいアイコンを指定するわけですが、キャメルケースで記載すればOKです。（公式サイトとかはキャメルケースで書かれてないので、混乱するかも。）

`config`は細かい設定をしたいときに使えるオブジェクトです。
例えば、`config.showMissingIcons = false;`を設定すれば、fontawesomeを上手く表示できなかったときに`？`と表示されずに、空白になります。

`dom.watch()`ではなく、`dom.i2svg()`を使うことも可能ですが、`vue.js`とかを使っていると、`watch`じゃないと上手くいかない。たぶん。

## view側で表示。

view側は、普通に書けば良き。

```html
<span class="mr-1"><i class="far fa-star"></i>4.5</span>
<span class="mx-1"><i class="fas fa-comment"></i>30</span>
<span class="mx-1"><i class="far fa-share-square"></i>20%</span>
```

これで完成です(*´ω｀*)ﾉ
個人特許権者の訴訟での勝率調査結果

個人特許権者が原告となって特許権侵害訴訟を提起した場合の勝率の調査結果を発表します。平成２７年８月から過去５年間に亘って調査した結果、２４件の判決がヒットしましたが、個人特許権者が全て敗訴しています。
平成２７年当時の特許権侵害訴訟全体での原告勝訴率は約２５％でした。２４戦全敗となる確率は、
約０.０８％です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461483/f69ab0f4-9173-cae8-2c1b-93d952f891f9.png)

もっと長期間に亘って調査すれば個人特許権者の勝訴判決が出てくるかもしれませんし、調査漏れがないとも断言できませんが、いずれにしても、個人特許権者が原告となった場合の勝率は、異常に低いと言わざるを得ません。
個人特許権者の皆様、訴訟をするなら法人化してから行ってください。
Fortranでも三項演算子がしたい！（merge関数）


# はじめに
昨今の多くの言語には三項演算子が実装されています．残念ながらFortranにはありませんが，`merge`関数を用いると三項演算子と同じ役割をしてくれます．



# 三項演算子とは
[?: 演算子 - C# リファレンス | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/operators/conditional-operator)

```C#:構文
condition ? consequent : alternative
```

`?`と`:`からなるこの演算子は，`condition`が`True`ならば`consequent`の値を，`False`ならば`alternative`の値を返します．（正確には`consequent`あるいは`alternative`の式を評価して値を返します．）以下の例の様に**簡単な条件分岐をより簡潔に記述できる**メリットがあります．

```C#:例文
//statusへの代入の分岐を簡潔に書ける
status = condition ? "GOOD" : "BAD";

//上と同じ内容だが5行も必要
if(condition){
  status = "GOOD";
}else{
  status = "BAD";
}
```



# `merge`関数とは
[GNU Fortran Compiler: merge](https://gcc.gnu.org/onlinedocs/gcc-9.2.0/gfortran/MERGE.html#MERGE)
2つの配列を併合させて新しく同じサイズの配列を作り出す関数です．新しい配列の各要素の値には元の配列の値を使用します．2つの配列のうちどちらの値を使用するかを`logical`の配列で指定します．以下に例文とその解説図を示します．

```Fortran
program main
  implicit none
  integer :: ifT(7), ifF(7),ans(7)
  logical :: mask(7), T=.true.,F=.false.

  ifT  = [  1,  2,  3,  4,  5,  6,  7]
  ifF  = [101,102,103,104,105,106,107]
  mask = [  T,  F,  T,  T,  F,  T,  F]

  ans = merge(ifT, ifF, mask)
  print'(7(i0,x))',ans
  ! 1 102 3 4 105 6 107

end program
```
![merge.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573413/8d17cc8d-fdab-9913-b2dc-5e336ff09d39.png)


# `merge`関数による疑似的な三項演算子
`merge`関数は，引数に配列を与えた場合だけでなく，単一の値を与えた場合にも正常に働きます．これを用いて，疑似的に三項演算子として用いることができます．構文とサンプルのプログラムを示します．上述した**一般的な三項演算子とは引数の順序が異なる**ことに注意してください．

```Fortran:構文
merge(consequent, alternative, condition)
```

```Fortran:サンプルプログラム
program main
  implicit none
  integer :: ifT, ifF, ans
  logical :: flag

  flag = .true.
  ! flag = .false.
  ifT = 1
  ifF = 2
  ans = merge(ifT, ifF, flag)
  print'(I0)', ans
  ! flag==true  => ans==1
  ! flag==false => ans==2
end program
```

# おまけ（ユーザー定義演算子を用いた実装）
三項演算子というのですから，**関数**ではなく**演算子**を使いたくないですか？ということでユーザー定義演算子を用いて三項演算子と同じ挙動を目指して実装してみました．
Fortranで定義できる演算子は単項演算子と二項演算子のみで，残念ながら三項演算子を定義することはできません．今回は`?`と`:`を別に分けてそれぞれ2項演算子として定義することで実装しました．
とても使いにくそうな出来上がりになりました．

```Fortran:ユーザー定義演算子を用いた実装
module myModule
  implicit none

  interface operator( .hatena. )
    module procedure opHatena
  end interface
  interface operator( .TorF. )
    module procedure opTorF
  end interface

  type myType
    integer :: T, F
  end type

  contains
  type(myType) function opTorF( i1, i2 )
    implicit none
    integer, intent(in) :: i1, i2
    opTorF%T = i1
    opTorF%F = i2
  end function

  integer function opHatena( bool, TorF )
    implicit none
    logical, intent(in) :: bool
    type(myType), intent(in) :: TorF
    if(bool)then
      opHatena = TorF%T
    else
      opHatena = TorF%F
    end if
  end function
end module

program main
  use myModule
  implicit none
  integer :: ifT, ifF, ans
  logical :: flag

  flag = .false.
  ifT = 1
  ifF = 2
  ans = flag .hatena. (ifT.TorF.ifF)
  print'(I0)', ans
  ! flag==true  => ans==1
  ! flag==false => ans==2
end program
```
DockerでNginxコンテナ建てた際に環境変数の渡し方でハマった時の備忘録

NestJSで作成したサーバーに対してNginxから飛ばそうとした際に、NestJSのポートを可変にできる様にしようとしてNginxのconfに環境変数を渡せずハマったので備忘録として残します。

# 結論

dockerhubの公式イメージに書いてありました。。
https://hub.docker.com/_/nginx
→`Using environment variables in nginx configuration`に書いてあります

confそのものではなく、conf.templateをコンテナにコピーしてやるだけです
※ignxのバージョン1.19から使える機能みたいです

```docker-compose.yml
services:
  server:
    image: node:12-alpine
    container_name: server
    ・・・（省略）・・・
    environment:
      - PORT=${SERVER_PORT}

  proxy:
    image: nginx
    container_name: proxy
    depends_on:
      - server
    volumes:
      - ./nginx/default.conf.template:/etc/nginx/templates/default.conf.template
    ports:
      - 80:80
    environment:
      - SERVER_PORT=${SERVER_PORT}
```

```nginx/default.conf.template
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_redirect                      off;
        proxy_pass http://server:${SERVER_PORT};
    }
}
```


# 何にハマったのか？

- `nginx　環境変数`とかで検索すると以下の方法が出てくる
  - perl_setやset_by_luaを使う方法
  - 普通にconfファイルを書き換える方法

ファイルを書き換えるのはめんどくさかったので perl_setでやろうとしたら`./configure`がnot foundとなってしまいperl_setが使えなかった。。。
Windows 10 Homeのアクションセンターを無効化する

Surfaceでペンを使っているときに手のひらでうっかり画面右端を触ってしまい、意図せずアクションセンターが表示されてストレスMaxになっている人は多いかと思います。このアクションセンターを無効化する方法はネットにいろいろ書かれているのですが、2021年現在では大半の方法が使えなくなっていました。

本記事執筆時点（2021年5月、Windows 10 Home 21H1）の最新のWindows 10で効果があったのは、下記の通りレジストリを編集する方法です。キーがない場合は追加します。

~~~
キー　　　：\HKEY_CURRENT_USER\SOFTWARE\Policies\Microsoft\Windows\Explorer
値の名前　：DisableNotificationCenter
値の種類　：REG_DWORD
値のデータ：1
~~~

本当はアクションセンターごとではなくエッジスワイプだけ無効化できればよいのですが、その方法はなさそうですね・・。

ソース：[【Windows10】アクションセンター表示/非表示の設定方法\(レジストリ/ローカル グループポリシー\) \- ぱそかけ](https://paso-kake.com/it/windows10/2694/)
【Laravel】view [***.blade.php]ファイルを修正したが反映されない問題の解決方法

###記事はこちらに移動しました。


https://murakamiaya.com/rastaya/%e3%80%90laravel%e3%80%91view-blade-php%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e4%bf%ae%e6%ad%a3%e3%81%97%e3%81%9f%e3%81%8c%e5%8f%8d%e6%98%a0%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84%e5%95%8f/
CodePenを触ってみるも、HTMLがよく分からず悪戦苦闘

自分メモです('ω')

まだ触り始めですが、色々苦戦しそうなので記録していきます。

##CodePen（今日時点の感想）

すごくお手軽で便利、他の人のPenも公開されていてすごく助かるのですが、触っていて気付いたこと。

圧倒的にHTMLとCSSを分かっていない。
JavaScriptは触り始めとは言え、他言語の経験があるからまだ少しは理解できます。

でも、見様見真似でHTMLとCSSを書こうとしても全然うまく書けない。やっぱりお手軽ツールとは言え、基礎があってナンボのものかなと思いました。CodePenに頼り過ぎるとブラックボックスのまま行きそうな自分がいます。

##苦戦状況

とりあえず以下作成ログです。以下記事参考にCodePenを埋め込みます。Qiitaのエディタのプレビューでちゃんと表示されますね。助かります。
[Qiitaで記事にCodePenが埋め込めるようになりました](https://qiita.com/Qiita/items/edae7417214c8e957f54)

やりたいことは、こんな画面構成のWebアプリです。

- タイトル
- ギャラリー表示（lightgallery.js使用）
- サブタイトル
- 投票ボタン

最初のバージョンがこちら。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="ranchi1977" data-slug-hash="PopWYBo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="lightGallery">
  <span>See the Pen <a href="https://codepen.io/ranchi1977/pen/PopWYBo">
  lightGallery</a> by ranchi1977 (<a href="https://codepen.io/ranchi1977">@ranchi1977</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

見ての通り、各ブロック要素が横一列に並んでしまっています。

しばしHTMLのお勉強を行い、無理やり以下の形にしました。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="ranchi1977" data-slug-hash="zYZogjq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Voting Gallery">
  <span>See the Pen <a href="https://codepen.io/ranchi1977/pen/zYZogjq">
  Voting Gallery</a> by ranchi1977 (<a href="https://codepen.io/ranchi1977">@ranchi1977</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

全体をリストにして、縦に並ぶようにしています。（ulタグとliタグ）
が、これがお作法的にどうなのかすら分かっていない状況です。

##Netlify

こちらは正しいデプロイ用コードが準備できれば操作関係は問題無さそう。
独自ドメインに手を出したく、以下サイトに行ってみたが、Googleアカウントでうまくソーシャルアカウント連携でサインアップできない。一旦見送り。
[Freenom - 誰でも利用できる名前](https://www.freenom.com/ja/index.html)

##積み残し課題

- lightgalleryのサンプルコードをコピペして使用したつもりが、lightgalleryのライブラリを追加してもエラーとなり、lightghallery.jsのライブラリを追加したらうまく行きました（理解しないと）
- ブロック要素はうまく縦に並ぶようになりましたが、ディスプレイ全体の中央を起点にHTMLが表示されているように思います。大き目のPCモニタだと問題ないですが、スマホで見ると先頭のタイトルも表示されない中央部分しか表示されずスクロールできないので、修正しないと
- HTMLの構造に応じたCSS部分の指定方法、勉強あるのみ
- lightgalleryの操作・コードの勉強、サムネ表示で画像を触ると各画像の拡大表示などできるようだが、制御できていない
Azure AD の "AADSTS700016: Application with identifier 'xxxxx' was not found in the directory" エラーについて



# SAML の場合

### エラー メッセージ
> AADSTS700016: Application with identifier 'https://random.com' was not found in the directory 'テナント ID'. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You may have sent your authentication request to the wrong tenant.


SAML Request 内の Issuer の値が、アプリの識別子 (Name ID) と一致しないので怒られてる。

### SAML リクエスト内の Issuer 要素を見てみよう
`<saml:Issuer xmlns:saml="urn:oasis:names:tc:SAML:2.0:assertion">https://random.com</saml:Issuer>
`
https://random.com を指定してる。

### Azure AD の エンタープライズ アプリケーションの設定
確認画面 : Azure ポータル > [Azure Active Directory] > [エンタープライズ アプリケーション] > (対象のアプリ) > [シングル サインオン] > [基本的な SAML 構成]

確認項目 : [識別子 (エンティティ ID)]

SAML Request 内の Issuer で指定する値は、ここで設定されている識別子のいずれかに一致しなきゃいけない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1532250/7106bcc3-bed2-5a67-debd-ac44b671995b.png)


# Open ID Connect の場合

### エラー メッセージ
> AADSTS700016: Application with identifier '7880db84-e5c4-4c55-87a5-7db9f5031ac6' was not found in the directory '17ebfadb-0bd6-49fe-8dce-a28191113160'. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You may have sent your authentication request to the wrong tenant.

リクエスト内で client_id パラメーターで指定している値が、アプリの識別子 (アプリケーション ID) と一致しないので怒られている。

### リクエスト内の client_id 要素を見てみよう
`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=7880db84-e5c4-4c55-87a5-7db9f5031ac6&response_type=id_token...`

"7880db84-e5c4-4c55-87a5-7db9f5031ac6" を指定している。



### Azure AD の エンタープライズ アプリケーションの設定
確認画面 : Azure ポータル > [Azure Active Directory] > [エンタープライズ アプリケーション] > (対象のアプリ)

確認項目 : [アプリケーション ID]

リクエスト内の client_id パラメーターで指定する値は、"アプリケーション ID" と一致しなきゃいけない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1532250/0d251c75-c83d-028c-0b1f-19c9ea28087c.png)

今回のエラーはアプリケーション ID ではなくオブジェクト ID を指定してしまっていたパターン。
null or undefined どっちを使うべき？

# `null` or `undefined` どっちを使うべき？
TypeScript(JavaScript)のお話です。

## 背景: VuexをTypeScriptで開発したときにハマった罠
VuexをTypeScriptで書きたくて[vuex-module-decorators](https://github.com/championswimmer/vuex-module-decorators)を使っているのだが、[vuex-module-decoratorでstateをundefinedにすると変更が検知されない](https://qiita.com/MotohiroSiobara/items/369bc98b9e398b5b46d1)罠があった。

要点だけまとめると、`undefined`ではなく`null`で初期化すれば回避できたわけだが、
これまで`null`も`undefined`もあまり違いを意識してこなかったので、これを機会にまとめてみることにした。

## `null`と`undefined`の違い
### 公式ドキュメントでは？
[TypeScriptの公式ガイドブック](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined)にはこう書いてあった。

>https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#null-and-undefined
>#### `null` and `undefined`
> JavaScript has two primitive values used to signal absent or uninitialized value: `null` and `undefined`

`absent or uninitialized`ってことは「値がないまたは初期化されていない」ということだとして、その状態を表す値として`null`と`undefined`の2つがある、ってことを言っている。
でも`null`と`undefined`の違いについては書かれていない。

### コーディング規約では？
世の中にある有名なコーディング規約ではこれらをどう定義しているんだろう。と思い、ググったらすぐヒットする[TypeScript Deep Dive](https://typescript-jp.gitbook.io/deep-dive/)にこう書いてあるのを見つけた。

https://typescript-jp.gitbook.io/deep-dive/styleguide#null-vs-undefined
> #### `null` vs `undefined`
>- 明示的に使用不可能にするために、どちらも使用しないことを推奨します。
>>理由：これらの値は、値間の一貫した構造を維持するためによく使用されます。TypeScriptでは型を使用して構造を表します
>- 一般的に `undefined`を使用してください(代わりに`{valid:boolean,value?:Foo}`のようなオブジェクトを返すことを検討してください)
>- APIまたは従来のAPIの一部である場合は`null`を使用します
>>理由：Node.jsの慣例通りです。NodeBackスタイルコールバックのerrorはnullです。


https://typescript-jp.gitbook.io/deep-dive/recap/null-undefined
>#### `null`と`undefined`
>JavaScript(と、TypeScript)は、`null`と`undefined`という2つのボトム型(bottom type)があります。これらは異なる意味を持っています。
>
> - 初期化されていない： `undefined`。
> - 現在利用できない： `null`。

なるほど、まとめると
1. `undefined`は初期化されていない状態を、`null`は現在使えない状態を表す値
2. `null`も`undefined`も使うな
3. どうしても使いたいなら`undefined`を使え
4. ただしAPIなどは`null`を使え
こんなところだろうか。

ちなみに、他にも色々検索してみたが、基本的にTypeScriptでは`null`より`undefined`が好まれる傾向があるように感じた。

- https://qiita.com/kabosu3d/items/06ce9266bc2db1226421
  - undefinedやnullを書くことが必要なときは、できる限りundefinedを使うこと。 [SHOULD]
  - 理由: 一貫性のため。
- https://github.com/microsoft/TypeScript/wiki/Coding-guidelines
  - Use undefined. Do not use null.

# まとめ
- TypeScript的には`undefined`と`null`で迷ったら`undefined`を使うのがなんとなく多数派っぽい。
- でも、Vuexみたいに`undefined`で初期化したらうまく動かないライブラリも世の中にはある。
- 今後、もしTypeScriptのライブラリを提供することがあったら、`null`と`undefined`は混在せず、どちらかを統一したものを提供したい。
[Kotlin]ジェネリクスってナンダ

#ジェネリクスとは
<>
こんな感じの記号見たことありませんか？
または。
<<T>T>
これが、ジェネリクスです。以上。

ジェネリクスってドキュメント内を見ると、当たり前のように使われている言葉なので、意外と読む際に躓くポイントではあります。
しかし、それ位普及している言葉なので、知っておく必要があるでしょう。

ジェネリクスは、日本語で総称型になります。
また、型パラメータともいう。

まぁ、クラスの引数の型を実際にセットした型に合わせる形ですね。
「型引数自由」と覚えるのが良いでしょう。

https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/generics.html

```kotlin
class PiyoPiyo<T>(t: T) {
    val hoge = t
}
```

インスタンスをすると分かると思うかもしれませんが、ジェネリクスを用いるどんな型引数も当てはめることが出来ます。
まるで、ポケモンのメタモンの様に様変わりできます！（伝われー！）

```kotlin
val piyoPiyo = PiyoPiyo("動物")
val piyoPiyo2 = PiyoPiyo(10)
val piyoPiyo3 = PiyoPiyo(100L)
```

#終わり
ただ、それだけなんですよね。

「型引数自由」

以上です！

#追記
ある程度勉強したことある人からAny型と同じじゃん！と思うかもしれないので、それとの違いも触れておきたいと思います！

ちなみに、Any型もメタモンの様ではあるのですが、飽くまでもAny型です。
ややこしいですね笑。

先ほどのジェネリスクはString型を入れると、String型になりますが、Any型にString型を入れてもAny型です。
値は、同じなんですけど、型が違うんですね。
その為、入れた値をメソッドで操作したい時に違いが出てきます。

例えば、下記をご覧ください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599059/3c564588-9282-dfc2-b120-c8c5f845d668.png)

これは、Any型のコードなのですが、見て分かる通り提供している関数が少ない！！！！！！！！！！
だから、値を持つだけだったらAny型でいいですけど、それでは不便！って場合はジェネリクス！って感じですかね。
【php】２次元配列・各人のフルネームと住所と年齢を表形式で出力せよ。詳細は以下に示す


```PHP

$members = [
  [
    'id' => 11,
    'family_name' => '山田',
    'first_name' => '太郎',
    'age' => 35,
    'gender' => '男性',
    'address' => '東京都港区',
  ],
  [
    'id' => 12,
    'family_name' => '佐藤',
    'first_name' => '花子',
    'age' => 28,
    'gender' => '女性',
    'address' => '東京都中央区',
  ],
  [
    'id' => 13,
    'family_name' => '斎藤',
    'first_name' => '次郎',
    'age' => 41,
    'gender' => '男性',
    'address' => '東京都豊島区',
  ],
  [
    'id' => 14,
    'family_name' => '山本',
    'first_name' => '三郎',
    'age' => 52,
    'gender' => '男性',
    'address' => '東京都世田谷区',
  ],
];
```
css

```css
    table {
        border-collapse: collapse;
    }
    th,td {
        border: solid 1px black;
        padding: 3px;
    }

```

出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/ff1598f9-7ea8-ae34-1153-b6d185a47c16.png)



```PHP
<?php
$members = [
  [
    'id' => 11,
    'family_name' => '山田',
    'first_name' => '太郎',
    'age' => 35,
    'gender' => '男性',
    'address' => '東京都港区',
  ],
  [
    'id' => 12,
    'family_name' => '佐藤',
    'first_name' => '花子',
    'age' => 28,
    'gender' => '女性',
    'address' => '東京都中央区',
  ],
  [
    'id' => 13,
    'family_name' => '斎藤',
    'first_name' => '次郎',
    'age' => 41,
    'gender' => '男性',
    'address' => '東京都豊島区',
  ],
  [
    'id' => 14,
    'family_name' => '山本',
    'first_name' => '三郎',
    'age' => 52,
    'gender' => '男性',
    'address' => '東京都世田谷区',
  ],
];

?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>2次元配列</title>
<style>
    table {
        border-collapse: collapse;
    }
    th,td {
        border: solid 1px black;
        padding: 3px;
    }
</style>
</head>

<h1>２次元配列</h1>
<ul>
    <?php 
    foreach ($members as $value){ 
    ?> 
    
     <li> 
       <?php echo $value['family_name']; ?>
       <?php echo $value['first_name']; ?>
       <?php echo $value['first_name']; ?>
        <?php echo $value['address']; ?>
        <?php echo $value['age']; ?>
     </li> 
    
    <?php 
    }
    ?>
</ul>

<table>
    <th>id</th>
    <th>姓</th>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
    <th>住所</th>
  </tr>
    
<?php

foreach ($members as $value){ ?>


  <tr>
    <td> <?php echo $value['id']; ?> </td>
    <td> <?php echo $value['family_name']; ?> </td>
    <td> <?php echo $value['first_name']; ?> </td>
    <td> <?php echo $value['age']; ?> </td>
    <td> <?php echo $value['gender']; ?> </td>
    <td> <?php echo $value['address']; ?> </td>
  </tr> 

    
    <?php
}

?>
  <table>
  
```
RubyOnRails findの使い方

#findメソッドとは
主なイメージは、「主キー(id)を指定して、見つかった1レコードを返す」です。

**特徴**
find()の()内に記述できる数値（id）のみ
idは主キーなので、1レコードのみ取得
検索に該当するデータがなかった場合、ActiveRecord::RecordNotFoundを返す

記述の仕方
モデル名.find(主キー)
例）
前提条件：sample_appのListテーブルに格納されているデータを取得したい場合

①id=1のみを取得したい場合

```
List.find(1)
```

②URLの:idを取得したい場合、

``` 
List.find(params[:id])
```
JetBrains RiderでJavaScriptを実行する

###RiderでJavaScriptを実行する

Node.jsをインストールする

Riderで新規プロジェクトを開く。C#のコンソールなどを開きます
<img width="100" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/b5146b9d-7ffa-2993-b7dc-14f36df72f4e.png">

右クリックからJSファイルを追加する
<img width="300" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/0bab058f-6c07-ec9e-3431-6daf42566a0e.png">
▼実行構成の編集を選択する
<img width="300" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2d40cd7e-4489-6ee0-9f40-6ed5c63d9053.png">

＋ボタンを押す。Node.jsを選択　Jsファイルパスを設定する
<img width="500" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/f0dfba60-b898-b693-959c-96fcde77efdf.png">

▶ボタンを押すと実行されます
<img width="300" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/8ef745f8-da5f-311a-1013-455827f34f04.png">

出力
<img width="300" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6ac7ec07-6b52-85f5-90ff-2f2ab4e36298.png">


Pythonファイル、TypeScriptファイル、Htmlファイルがあるので同じようなことができます。

<img width="400" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/8d95e695-7306-f80d-bb3f-62437bbd1d06.png">
JavaScriptのライブラリーのパスはSetting - 言語フレームワークから設定します

<img width="400" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6f449e0d-3cd8-5843-fe8f-fc1e6e58fe94.png">
Node.jsのパッケージはここからインストールできます。requreで読むことができるようになります
SwiftのKVO・KVCメモ

# KVO
```swift
    @objc dynamic var value: Int = 0
    var observation: NSKeyValueObservation?

    self.observation = self.observe(\.value, options: [.initial, .new]) { vc, change in
        if let value = change.newValue {
            NSLog("\(value)")
        }
    }
        
    self.value = 1
    self.value = 1
    self.value = 2
```

```
結果
0
1
1
2
```
# KVC
```swift
    @objc dynamic var value: Int = 0 {
        willSet {
            self.willChangeValue(for: \.value)
        }
        
        didSet {
            self.didChangeValue(for: \.value)
        }
    }
    var observation: NSKeyValueObservation?

    self.observation = self.observe(\.value, options: [.initial, .new]) { vc, change in
        if let value = change.newValue {
            NSLog("\(value)")
        }
    }

    self.value = 1
    self.value = 1
    self.value = 2
    
    override class func automaticallyNotifiesObservers(forKey key: String) -> Bool {
        switch key {
        case "value":
            return false
        default:
            return super.automaticallyNotifiesObservers(forKey: key)
        }
    }
```

```
結果
0
1
1
2
```
# KVC（値の変化は通知させない）
同じ値のときは`observe`のコールバックに返却させない

```swift
    @objc dynamic var value: Int = 0 {
        willSet {
            if self.value != newValue {
                self.willChangeValue(for: \.value)
            }
        }
        
        didSet {
            if self.value != oldValue {
                self.didChangeValue(for: \.value)
            }
        }
    }
    var observation: NSKeyValueObservation?

    self.observation = self.observe(\.value, options: [.initial, .new]) { vc, change in
        if let value = change.newValue {
            NSLog("\(value)")
        }
    }

    self.value = 1
    self.value = 1
    self.value = 2
    
    override class func automaticallyNotifiesObservers(forKey key: String) -> Bool {
        switch key {
        case "value":
            return false
        default:
            return super.automaticallyNotifiesObservers(forKey: key)
        }
    }
```

```
結果
0
1
2
```
【エラー備忘録】safariでtableのデザインが崩れる

##状況

tableタグを使用した時のこと。
以下のコードのviewが、chromeではきれいに表示できるがsafariで崩れている。

```php:room.blade.php
<div class="main">
    <table class="score_card">
      <tr class="index">
        <td><span>Hole</span></td>
        <td><span>1</span></td>
        //省略
      </tr>
    </table>
  </div>
```

##原因
・HTML及び、HTMLタグから自動生成されているCSSに、両者ブラウザで大きな違いは無い。
・よって原因は、display: table; の扱いが両ブラウザで異なることと仮定してみる。

tableタグから生成されているCSS（検証モードで確認）は以下の通り。

```css:chromeのcss
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}
```
```css:safariのcss
table {
    display: table;
    border-collapse: separate;
    -webkit-border-horizontal-spacing: 2px;
    -webkit-border-vertical-spacing: 2px;
    border-top-color: gray;
}
```

##解決策

tableタグを囲うdivに、dispaly: flex; を指定する。

これでsafariでも同じように表示された。
[AtCoder] ABC 185 D - Stamp

https://atcoder.jp/contests/abc185/tasks/abc185_d

連続する白マスの列を数え上げて、その白マスの個数 $w_i$ の列を $W$ とします。
その $W$ の中で最短の列の長さを $k$ として、 $W$ のそれぞれ $w_i$ に対して $\lceil \frac{w_i}{k} \rceil$ で塗り上げれば最小回数になります。

$\sum \lceil \frac{w_i}{k} \rceil$

言語はC++(GCC 9.2.1)でAtCoderのコードテストで確認しています。

```c++
#include <bits/stdc++.h>
using namespace std;

int main() {
  int N, M, B;
  cin >> N >> M;
  vector<bool> A(N, false);
  for (int i = 0; i < M; i++) {
    cin >> B;
    A[B-1] = true;
  }

  vector<int> White;
  int start = 0;
  bool isWhite = false;
  for (int i = 0; i < N; i++) {
    if (A[i] && isWhite) {
      White.push_back(i - start);
      isWhite = false;
    } else if (!A[i] && !isWhite) {
      start = i;
      isWhite = true;
    }
  }
  if (isWhite) {
    White.push_back(N - start);
  }

  if (!White.size()) {
    cout << 0 << endl;
    return 0;
  }

  sort(White.begin(), White.end(), greater<int>{});

  int K = White.back(), ans = 0, len = White.size();

  for (int i = 0; i < len; i++) {
    ans += White[i] % K ? White[i] / K + 1 : White[i] / K;
  }

  cout << ans << endl;
}
```
Memorystore for Redisのフェールオーバー時間を調べた

# Memorystore for Redisのフェールオーバー時間を調べた

## 結果

30秒程度かかる

| 回目 | 秒数 |
| ---: | ---: |
| 1 | 33 | 
| ２ | 49 | 
| 3 | 32 | 
| 4 | 16 | 
| 5 | 25 | 
| 6 | 49 | 
| 7 | 35 | 
| 8 | 34 | 
| 9 | 34 | 
|10 | 32 | 


## 測定方法

外部のGCEから毎秒pingを飛ばしてpingが通らない期間を疎通不可とする。

```shell
#!/bin/bash

for i in {1..10000}
do
	result=`redis-cli --no-auth-warning -h 10.128.0.4 -a AUTH文字列 ping`
	echo "`date` ${result}" >> result.txt
	sleep 1
done
```


Memorystoreのフェールオーバーは以下のコマンド
`gcloud redis instances failover sakon-test --data-protection-mode=force-data-loss --region=asia-northeast1`

フェールオーバーを実行したら以下のようになる。


```
Sat May 22 03:33:53 UTC 2021 PONG
Sat May 22 03:33:54 UTC 2021 PONG
Sat May 22 03:33:55 UTC 2021 PONG
Sat May 22 03:33:56 UTC 2021 PONG
Sat May 22 03:33:57 UTC 2021 PONG ← このあとから
Sat May 22 03:34:14 UTC 2021 PONG ← 一回返ってきたけどノーカンにする
Sat May 22 03:34:30 UTC 2021 PONG ← ここまで疎通できてないとする
Sat May 22 03:34:31 UTC 2021 PONG
Sat May 22 03:34:32 UTC 2021 PONG
Sat May 22 03:34:33 UTC 2021 PONG
Sat May 22 03:34:34 UTC 2021 PONG
Sat May 22 03:34:35 UTC 2021 PONG
```
MySQLの基礎

#はじめに
UdemyのPHPを学ぶ講座の中でMySQLを学ぶ講座があったので、改めてMySQLについて学んでいきます。
完全メモですので、読みづらさについてはあらかじめご了承ください


#主な構文

以下にMySQLでよく使う構文をまとめています。

```terminal:MySQL

#データの挿入
INSERT INTO テーブル名　SET カラム名＝値
　　　　　　　　or
INSERT INTO テーブル名（カラム名）　VALUES (値)

#テーブルの作成
CREATE TABLE テーブル名 (id INT, name TEXT, price INT)
 
#データの更新
UPDATE テーブル名　SET price=180 WHERE id=1;

#データの削除
DELETE FROM テーブル名　WHERE id=1;

#プライマリキーの設定（空のデータベースで行う必要がある）
ALTER TABLE テーブル名　ADD PRIMARY KEY(カラム名);

#オートインクリメントの設定（自動採番）
ALTER TABLE テーブル名　CHANGE カラム名　カラム名　データ型　AUTO_INCREMENT;

#カラムの追加
ALTER TABLE テーブル名　ADD カラム名　型情報　オプション；

#カラムの削除
ALTER TABLE テーブル名　DROP COLUMN category;

#条件に一致したデータの取り出し
SELECT * FROM テーブル名　WHERE 条件；

#LIKE句を使用した例
SELECT * FROM テーブル名　WHERE  カラム名　LIKE '%キーワード%'

＃SUMを使って合計を知る
SELECT SUM（カラム名）　FROM テーブル名

＃MAXを使って最大値を知る
SELECT MAX（カラム名）　FROM テーブル名

＃MINを使って最小値を知る
SELECT SUM（カラム名）　FROM テーブル名

＃AVGを使って平均を知る
SELECT SUM（カラム名）　FROM テーブル名

#並び替え
SELECT * FROM テーブル名　ORDER BY カラム名 ASC(昇順)/DESC(降順);

#グループ化
SELECT カラム名　FROM テーブル名　GROUP BY なにをもとにグループ化するかのカラム

#LEFT JOIN ,RIGT JOIN
SELECT * FROM 結合元のテーブル名(左) JOIN 結合先のテーブル名(右) ON 両テーブルの結合条件

#重複を避ける場合
SELECT DISTINCT　カラム名 FROM　テーブル名 ;

#範囲指定
SELECT * FROM　テーブル　WHERE カラム名　BETWEEN 50 AND 149;

#複数条件をINで
SELECT * FROM テーブル名　FROM カラム名　IN(候補,候補)　

#LIMITで制限する
SELECT * FROM テーブル名　WHERE、、、、、ORDER BY、、、、、、LIMIT　何件目から,何件分

```

#おわりに
以上、ざっくりまとめました。
まだまだ慣れてなかったり、まだ知識が足りなかたりするので引き続き勉強していきます！
【ExcelVBA基礎】序章：まえがきと目次

はじめに
業務で利用するマクロの開発・保守をするにあたり、最低限おさえておいて欲しい知識について書きます。「マクロの記録」を卒業して直にVBEでマクロを記述してみようという方向けの記事です。基本は私の所属する会社の社員を読者と想定していますので、必要最低限の説明にとどめています。


目次
1章：変数
https://qiita.com/daichi05w/items/bb838d274960caa687f5

2章：配列
https://qiita.com/daichi05w/items/006ed98fee433f58b93f

3章：セルのデータ操作
https://qiita.com/daichi05w/items/87011897a5116bd260ae

4章：繰り返し処理（For~Next文）
https://qiita.com/daichi05w/items/3c5b0362798feb59aa50
[Rails] RuboCopの導入

#はじめに
pre-commitと併用して導入したので、こちらも書き留めておく。

#Rubocopとは
Rubyの静的コードアナライザー（リンター）及び、コードフォーマッターである。要は解析分析するツールのことを指す。

つまり、ソースコードを自動的にチェック/修正を行ってくれるツールだよってことらしい。

#機能
原文の翻訳をそのまま拝借
>- すべての主要なRuby実装で動作する
- 検出したコード違反の多くの自動修正を行う
- 堅牢なコードフォーマット機能である
- インタラクティブな使用と他のツールへのデータの供給の両方のための複数の結果フォーマッター
- コードベースのさまざまな部分に対してさまざまな構成を持つ機能
- 特定のファイルまたはファイルの一部に対してのみ特定の警官を無効にする機能を持つ
- RuboCopをほぼすべてのスタイルと好みに適応させることができる非常に柔軟な構成
- カスタム警官とフォーマッターでRuboCopを拡張するのは簡単です
- 既製の膨大な数の拡張（例えばrubocop-rails、rubocop-rspec、rubocop-performance及びrubocop-minitest）
- 幅広いエディター/ IDEサポート
- 多くのオンラインサービスは内部でRuboCopを使用しています（例：HoundCI、Sider、CodeClimate）
- 史上最高のロゴ/ステッカー

Ruby上で動作する広い互換性と拡張性を備えた人気のツールであり、信頼性の高い自動修正を行うみたい。

#導入
システム全体にインストール

```ターミナル
gem install rubocop
```

bundlerを使用してRubocopをインストールする場合、
`Gemfile`に下記を記述する。

```Gemfile
gem 'rubocop', require: false
```

ただ、公式では不要な更新を防ぐために、`Gemfile`で保守的なバージョンロックを推奨していると書いてある。

```Gefile
#保守的なバージョンロック
gem 'rubocop', '~> 1.15', require: false
```

拡張機能

```Gemfile
# Railsの拡張機能
gem 'rubocop-rails', require: false

# プロジェクトのパフォーマンス拡張機能
gem 'rubocop-performance', require: false

#　RSpecの拡張機能
gem 'rubocop-rspec'
```

#操作
現在のディレクトリ内の全てのRubyソースファイルをチェック
下記はコードの違反を判定するのみで自動修正は行われない。

```ターミナル
#引数なしのコードスタイルチェッカー
rubocop
```

自動修正を含めたチェックを行う（オートコレクトモード）

```ターミナル
# 推奨
rubocop -a
rubocop --auto-correct

# 非推奨
rubocop -A
rubocop --auto-correct-all
```

非推奨のオートコレクトモードでは`rubocop -a`と同じように自動的に違反を修正するコマンドである。

ただし、一部の違反では自動修正が行えない上、コードの[セマンティクス](https://e-words.jp/w/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF.html)が（わずかに）変更される場合がある。

つまり、元のコードとほぼ同等であるが１００％同等ではないコードが生成されるため「安全ではない」らしい。

`rubocop -a`はカレントディレクトリ内の全ファイルに対して実行される。
特定のファイルを指定したい場合は`rubocop -a ファイル名`で実行する。

#操作（オプション）

```
#lintのみをチェックする
rubocop -l
rubocop --lint

#コードレイアウト（フォーマット）のみをチェック
rubocop -x
rubocop --fix-layout

#コマンドラインオプションの確認
rubocop -h
```

#Rubocopの動作を変更するには？
Rubocopの動作は、`.rubocop.yml`構成ファイルを介して制御を行うもののようだ。

`.rubocop.yml`をもとに特定のチェックを無効/有効にしたり、パラメータを受け入れた場合にその動作を変更することができるものだと書いてある。

詳細は[Configuration](https://docs.rubocop.org/rubocop/1.15/configuration.html)に書いてあるが、今回は省略して別の記事としてまとめたいと思う。

#参考元
[GitHub: RuboCop](https://github.com/rubocop/rubocop)
[RuboCop/ドキュメント](https://docs.rubocop.org/rubocop/1.15/index.html)
【エラー備忘録】外部キー制約のエラー　General error: 1215 Cannot add foreign key constraint

##状況

php aritisan migrateを行うとターミナルでエラーが発生。


```
General error: 1215 Cannot add foreign key constraint
```

##エラー内容
外部キー制約について、型の不一致が原因らしい。
  
原因となっているファイルはこれ。

``` php:2021_05_01_103119_create_room_players_table
class CreateRoomPlayersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('room_players', function (Blueprint $table) {
            $table->engine = 'InnoDB';
            $table->bigIncrements('id');
            $table->interger("room_id")->comment('スコアボードのテーブル');
            //この行が問題

            //外部キー制約
            $table->foreign('room_id')
                    ->references('id')
                    ->on('rooms')
                    ->onDelete('cascade');
//以下省略


```

参照下のファイルはこれ。

```php:2021_04_20_110007_create_rooms_table

class CreateRoomsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('rooms', function (Blueprint $table) {
            $table->bigIncrements('id')->unique
            ();
            $table->string("name")->comment('プレイ名')->unique();
            $table->string("password")->comment('スコアボードに入るためのパスワード');
            $table->timestamps();
        });
    }
```


外部キーの参照元のroomテーブルのidはbigIncrementsなので、bigIncrementsとintegerで一致していない。
またphpMyAdminで確認すると、roomテーブルのidは属性unsignedがついている。  

外部キーを設定する場合、データ型が違うとだめらしい。

##解決法
データ型を合わせるため、外部キーに指定するroom_idのintegerをbigIntegerに修正する。
（bigIncrementsとbigIntegerで合わせるため）
  
またroomテーブルのidの属性に合わせて、unsignedもつける。


``` php:2021_05_01_103119_create_room_players_table
class CreateRoomPlayersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('room_players', function (Blueprint $table) {
            $table->engine = 'InnoDB';
            $table->bigIncrements('id');
            $table->unsignedBigInteger("room_id")->comment('スコアボードのテーブル');

            //外部キー制約
            $table->foreign('room_id')
                    ->references('id')
                    ->on('rooms')
                    ->onDelete('cascade');
            $table->integer("user_id")
``` 

php artisan migrate:rollback
php artisan migrate:fresh　を実行し、
php artisan migrate　を実行すると、無事migrationできた。