OmniAICreator/Qiita-1.07M huggingface dataset:
OpenCVの画像フィルタを使ってみた

OpenCVのいくつかのフィルタを使ってみました。

## 環境
環境は[こちら](https://qiita.com/noz_mikally/items/ceb1cc5cb67fadb45218)で作成した環境です。

## ソースコード

```image_filter.py

#-*- coding:utf-8 -*-
import cv2
import numpy as np

def main():
    # 入力画像を読み込み
    img = cv2.imread("input.jpg")

    # グレースケール変換
    gray = cv2.cvtColor(img, cv2.COLOR_RGB2GRAY)
    cv2.imwrite("gray.jpg", gray )
    
    # medianフィルタ
    median = cv2.medianBlur(gray,9)
    cv2.imwrite("median.jpg", median )
    
    # sobelフィルタ
    gray_x = cv2.Sobel(gray, cv2.CV_32F, 1, 0, ksize=3)
    gray_y = cv2.Sobel(gray, cv2.CV_32F, 0, 1, ksize=3)
    sobel = np.sqrt(gray_x ** 2 + gray_y ** 2)
    cv2.imwrite("sobel.jpg", sobel)

    # Gaussianフィルタ処理
    gauss = cv2.GaussianBlur(gray, (11,11), 5.0)
    cv2.imwrite("gauss.jpg", gauss )
    

if __name__ == "__main__":
    main()
```

## 実行
`input.jpg`を自分がいじりたい画像に変えて

```
$ python image_filter.py
```
を実行すれば完了です。

## 入力画像
この画像を入力に使いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458187/d893225a-4be1-6f25-0ee6-289826ab8ce7.png)


## 出力
gray.jpg
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458187/269083a2-f4cf-eab2-b094-fa0a6cbc4fb7.png)

median.jpg
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458187/8e838e17-0ff3-3662-ea98-62c5c2357248.png)

sobel.jpg
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458187/d144ee12-bf25-5bd2-c2cb-ef75cc941a1c.png)

gauss.jpg
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458187/9fad3ccd-6365-8a46-b6c5-a4fabc0f1858.png)
Databaseコンテナを構築(PostgreSQL編)

# Databaseコンテナを構築(PostgreSQL編)

ソフトウェア開発に欠かせないデータベース環境をWindows ノートPCに構築します。

今回はPostgreSQL環境を構築します。

## モチベーション

- 開発用にPostgreSQL環境をノートPC上で構築したい。
- ポート、ユーザ、スキーマの定義は起動時に自動的に設定してほしい。

## 手順

### 環境

- Windows 10 Pro
- Docker Desktop for Windows

### 設定ファイルの作成

- ファイルは以下のようなディレクトリ構造で配置します。

```
{任意フォルダ}
 ├ docker-compose.yaml
 └ docker-entrypoint-initdb.d
   └ init.sh
```

- docker-compose.yamlを作成します。

```yaml
version: '3'
services:
db:
image: postgres:12-alpine
container_name: db-container
ports:
- 5433:5432
environment:
POSTGRES_USER: admin
POSTGRES_PASSWORD: admin
volumes:
- /C/Task/RedmineWorkHICT/#7212/docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d
```

- init.shを作成します。

```bash
set -e
psql -U admin admin << EOSQL
CREATE TABLE Users(
  account_id        SERIAL PRIMARY KEY,
  account_name      VARCHAR(20),
  email             VARCHAR(100),
  password    CHAR(64)
);

CREATE TABLE UserStatus(
  status            VARCHAR(20) PRIMARY KEY
);
EOSQL
```

#### 改行コードをLinuxに揃える

今回の環境はWindowsのなので改行コードによりdockerの実行がエラーになる場合があります。
以下を実施して、改行コードをLinuxに揃えておきます。

- **VSCodeの場合**：右下の改行コードの箇所をLFにする。

![{17AFD2C7-66A8-4454-8F63-E210225EA400}.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631668/09511c5c-5c94-c8fd-9a3b-259eef1ffd3e.png)


- **Vimの場合**：以下のコマンドでCR改行コードを削除。
```
:%s/^M//g
```

- エラーがある場合は、以下コマンドでコンテナとユーザキャッシュを削除します。

```
docker-compose down -v
docker-compose build --no-cache
docker-compose up -
```

### 起動とチェック

1. 以下コマンドで起動します。

```bash
docker-compose up -d
```

2. PostgreSQLのコンソールまで入ります。

```
docker exec -it db-container bash
psql -U admin
```

3. 適当にSQL文を発行して動作を確認します。


## まとめ

上記手順で新規に環境を構築できました。

- docker-compose.ymlで以下を定義する。
	- PostgresSQLのコンテナイメージ
	- ユーザとパスワード
	- ポート
- init.shでスキーマの定義を自動的に設定する。

### 応用編

- データが入った状態で開始したい場合には以下の方法があります。
	- init.shにInsert文も記述する。(少量向け)
	- バックアップデータからレストアする。
	- DBデータディレクトリをマウントする。
「テスターちゃん」で学ぶソフトウェアテスト⑧

#1. 「テスターちゃん」について
初心者(新人)向けに描かれたソフトウェアテストの漫画になります
たまたまJSTQBについて調べていた時に見付けたブログの記事がきっかけで読むようになりました
[JSTQBを取るメリット5選](http://testerchan.hatenadiary.com/entry/2018/02/15/001117)

今でも更新がある度にチェックしたり、書籍版を読み返したりしたり、とテスト関連の資料として活用しています

[Blog](http://testerchan.hatenadiary.com/)
[書籍版](https://books.rakuten.co.jp/rb/16202142/)

#2. LOG
[「テスターちゃん」で学ぶソフトウェアテスト①](https://qiita.com/156Musik/items/46111ec9cfae5f9aa88d)
[「テスターちゃん」で学ぶソフトウェアテスト②](https://qiita.com/156Musik/items/3c1a91126dc15bd2bf40)
[「テスターちゃん」で学ぶソフトウェアテスト③](https://qiita.com/156Musik/items/1a9450a15aa3607fe2d5)
[「テスターちゃん」で学ぶソフトウェアテスト④](https://qiita.com/156Musik/items/77d4471ae21aac937f78)
[「テスターちゃん」で学ぶソフトウェアテスト⑤](https://qiita.com/156Musik/items/b89e104010dfcced3fd0)
[「テスターちゃん」で学ぶソフトウェアテスト⑥](https://qiita.com/156Musik/items/ebb1d2339c3a256f8ec9)
[「テスターちゃん」で学ぶソフトウェアテスト⑦](https://qiita.com/156Musik/items/94a036beb46c2dc68a86)
「テスターちゃん」で学ぶソフトウェアテスト⑧ :point_left_tone1:イマココ)

#3. テスト自動化

##3.1 テストの自動化って何？
手作業でやっていたテストをプログラム等で自動的にテストすること
**基本動作確認**とか**回帰テスト**とか**繰り返すところ**等の作業的なところに効果を発揮する

因みに、**回帰テスト**とは
別名：リグレッションテスト
バグ修正後に別のところが壊れていないか確認するテスト
意外とバグが出易い

##3.2 注意点
**仕様変更**があると作り直さなければいけない
**直す手間**と**効果**のバランスを考える必要がある


#4. AIが使われたオススメ機能のテストのやり方
##4.1 そもそもAIとは
ここでは**機械学習**を指す
遺伝的なアルゴリズム等もAI含まれる

AIは不思議なブラックブックスではない

教師あり学習の場合、<font color="red">データのこの特徴を使い、このモデルを通して、こういうデータの傾向を覚えさせる</font>と言う流れ

**データ・特徴・傾向**等はテストのヒントに大いになりえる

##4.2 機能の確認

AIのテストには開発者との連携は必須だお！

###テストのヒントを得るには…

- 「どんなデータを使って、何を覚えさせたが」を聞く
- 「こう動くはず」と思っていることを聞く
    - 「そう動くと思っていることが確かにそう動く」かの確認は必要
- AIも一つの機能なので、機能全体を考えて**いつものテスト観点**も出る

- 特定の観点のデータの学習が漏れていたり、データが偏っていたりすることもあるため、**学習の漏れ**も考慮する

##4.3 精度の確認

実際のログを使った制度の確認は、教師データに使ったデータを使うのはアウト
⇒「これが入ったらこうなる」とそのデータで覚えたのに、同じデータを使ったら同じ結果になるのは至極当然
<font color="red">精度を見たいのなら**違うデータで確認**しないとダメ</font>

###精度の代表的な計算例
①Precision(適合率)
該当の件数の内何件当たったか

②Reciprocal Rank
ランキングの何番目に最初の辺りが出たかを分数にする
条件を変えて計算した後、その平均を出したのがMRR(Mean RR)である

③Average Precision(AP)
その順位までにおける正解率を、各正解データの部分に限定して平均を取ったもの
条件を変えて計算した後、その平均を出したものがMAP(Mean AP)である

##4.4 テスティングのやり方

AIみたいな**期待結果がわからない**時…
「こう変更したらこうなるはず」と予測出来る関係を使って変なことが起っていないかを確認出来る方法

**メタモルフィック・テスティング**と言う
「入力に対してある一定の変化を与えた時出力の変化が理論上、予測出来る」メタモルフィック関係を使ったテストのこと
![メタモルフィック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64697/678f8736-35e4-0343-0d56-16fd6e367c40.png)
これはロジックにもよるため、開発者との連携が重要となってくる
#4.5 ペルソナを使ったテスト
ここでのペルソナとは…
ユーザーをグループやパターンで等で分けた時、それを代表するユーザー像のこと

そのペルソナを想定してシナリオを、作成して確認していく

⇒ペルソナを使ったテストの期待結果の一案について
例えば、4段階とかのアンケート形式で取るなど…

#5. 今後の進め方について
「テスターちゃん」の書籍を使ったまとめは一応一段落付きました
とは言え、完結していない作品で、メインのブログでも連載は続いています
また、書籍・同人誌共に次の巻がいつ出るのかも不明となっています

今後はブログの方で1話終わるごとにまとめを書いていこうと考えています
Pythonで整数だけを含んだcsvを読み込む方法

Pythonで以下のようなcsv読み込みに自前で二重ループを書いて苦戦している方をみかけたので、代表的な読み込み方を4つまとめておく。

```csv:sample.csv
1,2,3
4,5,6
7,8,9
10,11,12
```

なお、ここではファイル読み込みをエミュレートするためにStringIOを使うが、実際に使うときには適宜open関数やファイル名の文字列などに読み替えてほしい。

# csvモジュールを使う

Pythonの標準ライブラリである[CSV](https://docs.python.org/ja/3/library/csv.html)を使う方法。
標準ライブラリだけで動くメリットはあるかもしれないが、実際のところ数値しか含まないデータを二重のリストのままで扱うことはまずない、はず。

各要素は文字列のままなので、数値として変換するために`map(int, row)`を挟んでいる点に注意。

```python
from io import StringIO
import csv
s = """1,2,3
4,5,6
7,8,9
10,11,12"""

with StringIO(s) as csvfile:
    csvreader = csv.reader(csvfile)
    rows = []
    for row in csvreader:
        rows.append(list(map(int, row)))

# or リスト内包表記
with StringIO(s) as csvfile:
    csvreader = csv.reader(csvfile)
    rows = [list(map(int, row)) for row in csvreader]

import numpy as np
arr = np.array(rows)
```

# numpy

[loadtxt](https://numpy.org/doc/stable/reference/generated/numpy.loadtxt.html#numpy.loadtxt)と[genfromtxt](https://numpy.org/doc/stable/reference/generated/numpy.genfromtxt.html?highlight=genfromtxt#numpy.genfromtxt)がある。どちらも似たようなインターフェイスだが、genfromtxtは欠損値の置換ができたりするので少し高機能。

## numpy.loadtxt

```python
from io import StringIO
import numpy as np

s = """1,2,3
4,5,6
7,8,9
10,11,12"""

with StringIO(s) as csvfile:
    arr = np.loadtxt(csvfile, delimiter=",", dtype=int)
```

## numpy.genfromtxt

```python
from io import StringIO
import numpy as np

s = """1,2,3
4,5,6
7,8,9
10,11,12"""

with StringIO(s) as csvfile:
    arr = np.genfromtxt(csvfile, delimiter=",", dtype=int)
```

# pandas

np.genfromtxtでも欠損値がある場合を扱えるが、pandasのほうが情報が見つかりやすいかもしれない。

## pandas.read_csv

https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.read_csv.html

今回はヘッダーがないcsvとして扱うので、`header=None`のオプションを入れておく。

```python
from io import StringIO
import pandas as pd

s = """1,2,3
4,5,6
7,8,9
10,11,12"""

with StringIO(s) as csvfile:
    df = pd.read_csv(csvfile, header=None, dtype=int)
arr = df.values
```

他に便利な方法があれば教えてください。
Scratchのコードを楽して書いて^H^H^H^Hく描いて働き方改革

# Scratch のコードは……

作るのは文字どおり子どもにもできるくらい簡単なのですが、教材の一つでも作ろうものならブラウザをスクリーンショットしてトリミングして貼り付けして…と **不毛な作業** との闘いになります。しかも **使い回しがほぼできない**。ループの回数を変えよう、変数の名前を変えよう、このブロックとこのブロックの順番を入れ替えよう、などと思った日にはまたブラウザのScratchエディタからやり直しです。

あー、ふつうにテキストエディタで書けたらなぁ、できればついでに LaTeX で……と思っていたら何とそのものがありました。
というわけで紹介します。

つまらなくて苦労の多い作業を、楽で楽しい作業に変えて生産性を向上しましょう！


# scratch3 パッケージ

texlive をふつうにインストールしてある環境ならたぶん入っていると思います。[overleaf](https://overleaf.com) でもそのまま使えました。プリアンブルで `\usepackage{scratch3}` とすれば準備完了。

# 例

Scratch コードは `scratch` 環境で書きます。`\blockなんとか` というのが基本コマンドで、なんとかの部分がカテゴリを示し、見た目としては色や形が変わります。`\blockmove` とか `\blockinit` とかです。

```scratchexample.tex
% プリアンブルは省略します。皆さんの環境に合わせてください。
% ここは document 環境内だとします。
\begin{scratch}
\blockinit{円周率を級数展開して求めたくなったとき}
\blockvariable{変数\selectmenu{pi}を\ovalnum{0}にする}
\blockvariable{変数\selectmenu{i}を\ovalnum{0}にする}
\blockrepeat{\ovalnum{10000}回繰り返す}{
  \blockvariable{変数 \selectmenu{pi} を
    \ovalnum{\(\frac{4\times(-1)^i}{2i+1}\)}ずつ変える}
  \blockvariable{変数\selectmenu{i}を\ovalnum{1}ずつ変える}}
}
 \blocklook{\ovalvariable{pi}と言う}
\end{scratch}
```

と書くと↓こんなのが描けます。

![scratchcode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265397/a4d77bcd-a4f5-84ae-389f-8665b68ab179.png)
No space left on deviceが発生したとき

#No space left on device
このエラーは端末（サーバー）の容量がいっぱいの時に起こるエラーです。

####まず容量を確認するために以下のコードを記述する。

```terminal
df -h
#=>Filesystem      Size  Used Avail Use% Mounted on
   devtmpfs        483M   60K  483M   1% /dev
   tmpfs           493M     0  493M   0% /dev/shm
   /dev/xvda1      9.8G  9.6G   36M 100% /
```
useが100％になって、ファイルが圧迫されていることがわかる。

####不要なファイルを削除しましょう

```terminal
du -sh ./*　
#=>
4.0K    ./,,,
60K     ./,,,,
832K    ./,,,,,,
54M     ./
1.4M    ./
304K    .
12M     ./
9.0M    ./
4.0K    ./
4.0K    ./
4.0K    ./
4.0K    ./
11M     ./
1.6M    ./
700K    ./
752K    ./
16K     ./
```
上記のようにどのファイルが、どれくらいの容量をくっているのかわかります。
いらないログファイルや、いらないファイルは削除しましょう。
railsアプリの作成手順

##①rails new
rails newコマンドは、Railsアプリケーションの土台を作るためのコマンド

```
$ rails _5.2.4_ new sample -d postgresql
```

##②rails server
rails severはwebサーバーを起動させるコマンド

```
$ rails db:create
```

##③rails new scaffold
簡単なCRUD機能をもつアプリを作成するコマンド

```
$ rails generate scaffold モデル名 カラム名:データ型
```
作成時にGemfileからjbuilder gemを削除するとJSON関連のコードを生成しない。

```
 gem 'jbuilder
```

参考記事
https://qiita.com/jnchito/items/ec070f7551c983cc5b60
Unicode正規化

## とは

- 「ア」と「ｱ」, 「①」と「1」など等価な文字の表記を統一する操作. NLPで前処理としてよく使われる
- *"Unicode正規化（ユニコードせいきか、英語: Unicode normalization）とは、等価な文字や文字の並びを統一的な内部表現に変換することでテキストの比較を容易にする、テキスト正規化処理の一種である。"* - [Wikipedia](https://ja.wikipedia.org/wiki/Unicode%E6%AD%A3%E8%A6%8F%E5%8C%96)

## NFD, NFC, NFKD, NFKC

4種類の正規化形式が存在する.
「NFD (Normalization Form Canonical Decomposition)」
「NFC (Normalization Form Canonical Composition)」
「NFKD (Normalization Form Compatibility Decomposition)」
「NFKC (Normalization Form Compatibility Composition)」

- NFDとNFCは正準等価性 (Canonical Equivalent) によって分解. 同一文字とみなす条件がより厳しい.
- NFKDとNFKCは互換等価性 (Compatibility Equivalent) によって分解. 同一文字とみなす条件がより緩い.
- NFDの後, 再度合成するのがNFC
- NFKDの後, 再度合成するのがNFKC

## 例1. 正準等価性と互換等価性

```python
$ python
>>> import unicodedata
>>> text = "①1１"
>>> unicodedata.normalize("NFD",text)
'①1１'
>>> unicodedata.normalize("NFC",text)
'①1１'
>>> unicodedata.normalize("NFKD",text)
'111'
>>> unicodedata.normalize("NFKC",text)
'111'
```

バイト列で見てみると

```python
>>> text.encode("utf-8")
b'\xe2\x91\xa01\xef\xbc\x91'
>>> unicodedata.normalize("NFD",text).encode("utf-8")
b'\xe2\x91\xa01\xef\xbc\x91'
>>> unicodedata.normalize("NFC",text).encode("utf-8")
b'\xe2\x91\xa01\xef\xbc\x91'
>>> unicodedata.normalize("NFKD",text).encode("utf-8")
b'111'
>>> unicodedata.normalize("NFKC",text).encode("utf-8")
b'111'
```

- 正準等価性の観点では, 「①」と「1」と「１」は同一視しない
- 互換等価性の観点では全て同一視

## 例2. 分解と合成

```python
>>> text="ｶﾞガが"
>>> unicodedata.normalize("NFD",text)
'ｶﾞガが'
>>> unicodedata.normalize("NFC",text)
'ｶﾞガが'
>>> unicodedata.normalize("NFKD",text)
'ガガが'
>>> unicodedata.normalize("NFKC",text)
'ガガが'
```

- 半角「ｶﾞ」と全角「ガ」は互換等価であるらしい. ひらがなとカタカナは区別される.
- NFDとNFC, NFKDとNFKCが全く同じように見えるが, 実は

```python
>>> text.encode("utf-8")
b'\xef\xbd\xb6\xef\xbe\x9e\xe3\x82\xac\xe3\x81\x8c'
>>> unicodedata.normalize("NFD",text).encode("utf-8")
b'\xef\xbd\xb6\xef\xbe\x9e\xe3\x82\xab\xe3\x82\x99\xe3\x81\x8b\xe3\x82\x99'
>>> unicodedata.normalize("NFC",text).encode("utf-8")
b'\xef\xbd\xb6\xef\xbe\x9e\xe3\x82\xac\xe3\x81\x8c'
>>> unicodedata.normalize("NFKD",text).encode("utf-8")
b'\xe3\x82\xab\xe3\x82\x99\xe3\x82\xab\xe3\x82\x99\xe3\x81\x8b\xe3\x82\x99'
>>> unicodedata.normalize("NFKC",text).encode("utf-8")
b'\xe3\x82\xac\xe3\x82\xac\xe3\x81\x8c'
```

コンピュータにはこのように見えている. NFDとNFKDのバイト列が他より長いことが分かる.

- 正規化前の文字は「ｶﾞ=\xef\xbd\xb6\xef\xbe\x9e」「ガ=\xe3\x82\xac」「が=\xe3\x81\x8c」このようにそれぞれ対応している. つまり
    - NFDでは「ガ(\xe3\x82\xac)」を「カ(\xe3\x82\xab)+゙  (\xe3\x82\x99)」に, 「が(\xe3\x81\x8c)」を「か(\xe3\x81\x8b)+゙  (\xe3\x82\x99)」に分解した.
        - NFCではこのように分解した結合文字列を再合成して, 元のバイト列に戻した.
    - NFKDではNFDの動作に加え, 「ｶﾞ」を「カ(\xe3\x82\xab)+゙  (\xe3\x82\x99)」に分解している.
        - NFKCではそれを再合成.

- Unicodeには見た目上同じ文字（「が」）でも、「が(\xe3\x81\x8c)」「か(\xe3\x81\x8b)+゙  (\xe3\x82\x99)」のように2通りの方法で表せるものがある. 前者は「合成済み文字」, 後者は「結合文字列 (基底文字+結合文字の組み合わせ)」と呼ばれる.
- つまりUnicode正規化の「分解 (Decomposition)」は合成済み文字を結合文字列にする操作, 「合成 (Composition)」は基底文字と結合文字の組み合わせによる結合文字列を合成済み文字にする操作である.
- どれを使うかは場面に応じる必要があるが, NFKCが最もよく使われている印象.
SASSって何だ？〜環境構築

#はじめに
初学者である私が学習内容を脳みそに定着させるために記述している記事です。

※Mac利用前提。
※内容に誤りがある場合はご指摘いただけますと幸いです。
※引き続き学習を継続しつつ内容を更新していきます。

#SASSとは
簡単に言うと、「ハイスペックなCSS」です。
CSSをより効率的に書くための便利なもので、「ライブラリ」の中の一つ。
※ライブラリ＝「開発のための便利ツール」という認識です。

正直、SASSがなくてもCSSだけでWEBサイトは作れます。


<br>


で、これを使うための「環境」を作ってあげる必要があります。

今回はSASSを使うための最低限の内容をまとてみます。

#SASSでできること
SASSにはいろいろ便利なことがあるのですよ。

いくつかピックアップしますと…
・ネスト（入れ子）の記述ができる。 -> 見やすくなるし、メンテナンスもしやすくなるのです。
・ファイルを分けることができる。 -> 管理がしやすくなるのです。
・独自のテンプレート（mixin）や変数、関数が作れる -> 効率が良くなります。
・四則演算が使える。
 
…などなど。

# 環境構築のために必要なこと
###SASSの環境を作るには、npmもしくはyarnが必要。
今回はyarnを使用します。
※yarn：各種ライブラリのパッケージマネージャとのこと。
　ライブラリの追加やインストールをしてくれるものです。
※npmと基本的な機能は同じですが、Yarnの方が新しい技術。

###yarnのインストール
[こちら](https://classic.yarnpkg.com/ja/docs/install#mac-stable)からインストールしてください。
>※Yarnインストールの前提としてHomebrewが必要。



#SASSを使うためのライブラリ（便利ツール）をインストール

###①まずはコマンド画面にてこれを実行。

```:コマンド
yarn init
```
###②下記のような表示が出ます。

```:コマンド
yarn init v1.17.3
question name (portfolio): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json

　//questionは１行ずつ質問形式で表示される
　// -> ローカルで使用する場合は、基本的に全てそのままEnterでOK。（公開する場合は設定した方が良さげ）
　// -> package.jsonファイルが作成される。
```

###③プロジェクトに対してパッケージの追加をする

```:コマンド
yarn add [パッケージ名]

　// -> package.jsonにも自動で追記されていく。
```


###④開発時のみ使用するパッケージを追加したい場合

```:コマンド
yarn add [パッケージ名] --dev

　// -> package.jsonのdevDependenciesに追加される。
```

###⑤package.jsonが最初から用意されている場合

```:コマンド
yarn -i
　//もしくは
yarn install

　// -> これだけでpackage.jsonに登録されている内容が自動で追加される。
　//  （プロジェクトを複数人開発する際に便利）
```


#scriptsでコマンドを定義していく

※ここではnode-sassとnodemonというパッケージを追加して、それを使用するためのコマンドを登録する方法を記載します。

###①scriptsを記載する
```JavaScript:package.json
{
  "name": "portfolio",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
   　//ここから ↓
  "scripts": {
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css",
    "watch": "nodemon -e scss -x \"yarn build-css\""
  },
    //ここまで ↑
  "devDependencies": {
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4"
  }
}
```
上記の記載だと以下のよう内容のなコマンドが使えるようになります。
・「build-css」コマンド：同階層にあるsassフォルダ内のstyle.scssのファイルを更新すると、同じく同階層のcssフォルダ内のstyle.cssのファイルにコンパイルしてくれます。

・「watch」コマンド：style.scssが更新されると、自動的に「yarn build-css」が実行される。

##コマンド実行方法
「build-css」コマンドを実行する場合

```:コマンド
yarn buid-css
```
「watch」コマンドコマンドを実行する場合

```:コマンド
yarn watch
```

##備忘録
sassファイルが複数に別れる場合、「node-sass-globbing」というパッケージも便利なようです。
Pythonでネットワークプログラム　

TCP通信
サーバ側
サーバ側のプログラムは基本的に以下の流れで構築する

socketでソケットを作成　TCP通信を用いる場合は、引数にAF_INET, SOCK_STREAMを指定する
bindでアドレスとポート番号を指定
listenでクライアントの接続を待つ
acceptでクライアントの接続を受け付ける
sendやrecvを使ってクライアントのデータの送受信を行う
closeでソケットを閉じる
の流れで行う
VBA お役立ち

#テキストファイル操作
###検索したい文字列まで行を移動する
```VB
'テキストファイルを開く
Open "ファイルパスの入ったセル" For Input As #1

Do
  Line Input #1, "行を格納する変数"
            
  '見つかった場合はループを抜ける
  If InStr("行を格納する変数", "検索したい文字列") <> 0 Then
    Exit Do
  End If
  
  Loop
```

#Excelファイル操作
###連続する同一文字を一文字にまとめる
```VB
Function DeleteMultiSpace(str As String) As String
  DeleteMultiSpace = str
    
  While InStr(DeleteMultiSpace, "  ") > 0
    DeleteMultiSpace = Replace(DeleteMultiSpace, "  ", " ")
  Wend
    
End Function
```

###最終行の行数を取得する
```VB
"行数を格納する変数" = "起点となるセル".End(xlDown).Row
```

###指定の範囲をSUM
```VB
'計算範囲の指定
Set "範囲を格納する変数" = Range(開始セル, 終了セル)
        
'指定した範囲をSUM
"計算結果を格納する変数" = Application.WorksheetFunction.Sum("範囲を格納する変数")
```

###アクティブシートを切り替える
```VB
Worksheets("シート番号").Activate
```
※シート番号は一番左から数えるため、シート順を変えるとバグる

###まとまったセルを削除
```VB
  Set "起点となるセルを格納する変数" = Range("B10")
    
  'セル初期化(Ctrl+Shift+Endと同じ挙動)
  Range("起点となるセルを格納する変数", ActivateCell.SpecialCells(xlLastCell)).ClearContents
```

###ファイルを開く
```VB
Sub FileOpen()

  Dim OpenFileName As String  'ファイル名
    
  'ダイアログボックスを開く
  OpenFileName = Application.GetOpenFilename(FileFilter:="Cファイル,*.c")

  'ファイル名の取得判定
  If OpenFileName <> "False" Then        
    '取得したファイル名をセルへ格納
    "ファイル名を格納する変数" = OpenFileName        
  Else
    MsgBox "キャンセルされました"
  End If

End Sub
```
[備忘録][一行メモ]Pythonに-uオプション付けたらstdout, stderrがunbufferedになる。teeにパイプするとき便利

# タイトルが内容のすべてですが、一応捕捉

```sh
python -c 'import time; print(1); time.sleep(1); print(2)'
```
⇒1が表示され、しばらくしてから2が表示される(ラインバッファ)

```sh
sh -c 'echo 1; sleep 1; echo 2'
```

⇒1が表示され、しばらくしてから2が表示される(ラインバッファ)

```sh
python -c 'import time; print(1); time.sleep(1); print(2)' | tee /dev/null
```

⇒しばらくしてから、1と2が一気に表示される(Python側でバッファリング)

```sh
sh -c 'echo 1; sleep 1; echo 2' | tee /dev/null
```

⇒1が表示され、しばらくしてから2が表示される(ラインバッファ)

# なぜPythonでパイプしたときだけ挙動が違う?

Pythonは賢いので、stdout, stderrが端末だったらラインバッファ、そうじゃなければ普通にバッファリングしてくれる。(いっぱい出力するときは、バッファリングした方が圧倒的に速い)
ちなみに、Pythonが自分自身でそれをやっているので、`stdbuf`コマンドでは挙動を変えられない。

# `-u`オプションを付けるとunbufferedになる。

```sh
python -u -c 'import time; print(1); time.sleep(1); print(2)' | tee /dev/null
```

⇒1が表示され、しばらくしてから2が表示される(バッファリングなし)
Emacsにtypescript環境を設定する

ちょっとtypescript書くことになったのでEmacsに設定を追加します。
私はパッケージ管理にstraight.elを使っているので、詳しくは前回の記事を参照ください。
[Emacs環境をアップデートする（straight.el）](https://qiita.com/yuze/items/a145b1e3edb6d0c24cbf)

以下のパッケージを入れて、シンタックスハイライト、補完などできるようにします。
- [typescript-mode](https://github.com/emacs-typescript/typescript.el/blob/master/typescript-mode.el)
- [tide](https://github.com/ananthakumaran/tide)

```elisp:init.el
;; typescript
(straight-use-package 'typescript-mode)
(straight-use-package 'tide)
(add-to-list 'auto-mode-alist '("\\.ts\\'" . typescript-mode))
(add-hook 'typescript-mode-hook
          '(lambda ()
             (interactive)
             (tide-setup)
             (flycheck-mode +1)
             (tide-hl-identifier-mode +1)
             (company-mode +1)
             (eldoc-mode +1)
             ))
```

<img width="464" alt="スクリーンショット 2020-05-15 16.09.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42069/a74e389f-7cd3-6bcb-d13e-bfe69e53448a.png">
Rails6+Reactで付箋アプリっぽいページを作ってみた。(テスト編)

# この記事について
[付箋アプリっぽいページ](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)の作成過程で作ったモデルのテストコードをある程度記載しておくものです。

# 関連する記事
書いているうちに分量がすごくなって記事を分割したので、リンク先をまとめておきます。
[その１(環境構築〜モデル作成編)](https://qiita.com/hanaitama-kaz/items/5b68b9c665f75020bcd4)
[その２(API作成編)](https://qiita.com/hanaitama-kaz/items/b461ff8564a5368523fc)
[その３(UI作成編1)](https://qiita.com/hanaitama-kaz/items/9b680c50566161046690)
[その４(UI作成編2)](https://qiita.com/hanaitama-kaz/items/e82a9ec9538914861746)
[おまけ(モデルのテスト編)](https://qiita.com/hanaitama-kaz/items/d3b9e54913139aecf530)


# モデルができたら。。。テストでしょ？ 
Railsでアプリを作るうえで、最も大切なこと。
多分、テストの作成です。
自動化されたテストを作成しておかないと、後々痛い目に逢いました。(過去形。。)
ので、テスト内容を記載させていただきます。

## Fixture
Fixtureはテストデータですね。
ユーザは３人(今回は未アサインタスクを保持させるためにnotassignedさんにも仲間に入ってもらいました。)分用意しました。

```yaml:test/fixtures/users.yml
notassigned:
  name: Not Assigned

alice:
  name: Alice

bob:
  name: Bob
```

タスクは2つほど用意しました。
関連付けがあるので、ユーザのfixtureで使った名前をそのまま使えます。(これすごい。)

```yaml:test/fixtures/tasks.yml 
task1:
  title: Task001
  description: Description 0001
  due_date: 2020-05-01 10:03:32
  user: notassigned

task2:
  title: Task002
  description: Description 0002
  due_date: 2020-05-01 10:03:32
  user: alice
```

## テストの作成
### タスクモデルのテスト
こちらは、以下の確認ができれば良いかな、とテストを作成しました。
・誰にもアサインされないタスクが作れないこと。
・誰かにアサインすればタスクが作れること。
・アサイン先を切り替えられること

```ruby:test/models/task_test.rb
## 以下のようなテストを追加しました。
  # ユーザを指定しないタスクは保存できない。
  test "Not assinged task should fail to create" do
    new_task = Task.new(title: "test001", description: "hoge", due_date: Date.new(2020,5,1));
    assert_raises(ActiveRecord::RecordInvalid) do
      new_task.save!
    end
  end

  # ユーザを指定すると保存できる。
  test "Assinged task should success to create" do
    user = users(:notassigned);
    new_task = Task.new(title: "test001", description: "hoge", due_date: Date.new(2020,5,1), user: user);
    assert_nothing_raised do
      new_task.save!
    end
  end

  # アサイン先を変更できる。
  test "task's owner can be changed to another user" do
    bob = users(:bob);
    assert_difference('bob.tasks.count') do 
      target = tasks(:task2);
      target.user = bob;
      target.save!;
      bob.tasks.reload;
    end
  end
```

## ユーザモデルのテスト
こちらは以下について確認してみました。
・初期状態のユーザはタスクを持たない。（タスクを持たないユーザを作成できる）
・タスクの入れ替えができる。

```ruby:test/models/user_test.rb
  test "New User should not have any tasks" do
    user = User.new(name: "hoge hoge");

    assert_nothing_raised do
      user.save!;
    end

    assert_equal(0, user.tasks.count);

  end

  test "Task owner can be changed" do
    bob = users(:bob);
    notassigned = users(:notassigned);
    notassigned_task = notassigned.tasks[0];

    bob.tasks.push(notassigned_task);

    assert_nothing_raised do
      bob.save!;
      notassigned.tasks.reload;
    end

    assert_equal(1, bob.tasks.length);
    assert_equal(0, notassigned.tasks.length);

  end
```
ONLYOFFICEの日本語フォントを綺麗にする

こんにちは。@notake です。

Webベースのオフィススイート ONLYOFFICE で Office 文書を表示すると、日本語の書体が違和感のあるものとなってしまいます。そこで、ONLYOFFICE に日本語フォントを導入し、Office 文書を綺麗に表示できるようにします。

## Nextcloud

プライベートな環境に Dropbox のようなクラウドストレージを構築できる、[Nextcloud](https://nextcloud.com/) というソフトウェアがあります。
Linux サーバーを用意して Docker で起動するだけで、本格的なファイルストレージを構築することができます。

この Nextcloud は写真やテキスト、PDF ファイルなどをそのままプレビューできたりと多機能で大変便利なのですが、Word や Excel のような Office 文書はブラウザでの表示・編集には対応していません。

## ONLYOFFICE

そこで、Office 文書をサポートする [ONLYOFFICE](https://www.onlyoffice.com/ja/) を導入し、Nextcloud と連携することにしました。

（当記事では Nextcloud と ONLYOFFICE の導入については触れません。導入については以下の ONLYOFFICE 公式リポジトリを参照してください。）
https://github.com/ONLYOFFICE/docker-onlyoffice-nextcloud

ところが、ONLYOFFICE で Office 文書を表示してみると、日本語が違和感のある表示となってしまいます。ひらがなと漢字のサイズが合っていませんし、`輩` `所` `底` あたりの書体も怪しいです。

![onlyoffice_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152488/167ede31-7e42-4e4a-c872-5ce0599f3fef.jpeg)

そこで、ONLYOFFICE に日本語フォントを導入し、文書表示における違和感を取り除きます。

## 日本語フォントの選定

ONLYOFFICE の公式ドキュメント

- https://helpcenter.onlyoffice.com/server/linux/document/install-fonts.aspx

によると、対応しているフォントは `*.ttf` (TrueType) のみとなり、`*.otf` (OpenType) には対応していないようです。日本語の表示にはゴシック体と明朝体があれば十分でしょうから、以下の2種類のフォントを導入することにしました。

- [源真ゴシック](http://jikasei.me/font/genshin/)
- [IPAex明朝](https://ipafont.ipa.go.jp/node193)

## 日本語フォントの配置

上記公式ドキュメントによると `/usr/share/fonts/` に `*.ttf` ファイルを置けば良いように思いますが、残念ながらドキュメントの通りにファイルを配置しても ONLYOFFICE は配置したフォントを使用しません。

ONLYOFFICE Docker コンテナ内の `/var/www/onlyoffice/documentserver/core-fonts` ディレクトリに初期フォントが多数格納されており、こちらが優先的に読み込まれるようです。
そのため、本来であれば既に `core-fonts` ディレクトリに格納されているデフォルトのフォントを全て削除し、空になったディレクトリに日本語フォントを導入する必要がありますが、Docker を使用している場合はホストのディレクトリを ONLYOFFICE Docker コンテナの `core-fonts` にマウントすることで、こちらが配置したフォントを ONLYOFFICE で使用することができます。

最初に、ホストに `core-fonts` ディレクトリを作成し、源真ゴシックとIPAex明朝を配置します。

```
core-fonts
├── genshin-gothic
│   ├── GenShinGothic-Monospace-Normal.ttf
│   ├── GenShinGothic-Normal.ttf
│   └── GenShinGothic-P-Normal.ttf
└── ipaex-mincho
    └── ipaexm.ttf
```

続いて、docker-compose.yml を編集し、`volumes` にエントリを追加します。

```yaml
#...

  onlyoffice-document-server:
    container_name: onlyoffice-document-server
    #...(中略)...
    volumes:
      - document_data:/var/www/onlyoffice/Data
      - document_log:/var/log/onlyoffice
      - core-fonts:/var/www/onlyoffice/documentserver/core-fonts:ro #追加

#...
```

この設定で docker-compose を起動し、**ブラウザのキャッシュを消去**することで ONLYOFFICE が新しい日本語フォントを使用するようになります。

なお、公式ドキュメントでは 「`/usr/bin/documentserver-generate-allfonts.sh` を実行してフォントを再生成せよ」とあるのですが、Docker コンテナ版の ONLYOFFICE は[コンテナ起動時にフォント生成のスクリプトが実行される](https://github.com/ONLYOFFICE/Docker-DocumentServer/blob/9d82bb8d1fd453d1e49b63bc976264f00b1819db/run-document-server.sh#L504)ため、コンテナ起動後に手動でスクリプトを呼び出す必要はありません。

![onlyoffice_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152488/463e2d2a-094f-6626-d6dc-cc162ce88879.jpeg)
【docker for mac】ローカルのファイルを共有してコンテナ内で実行する方法

## 動機

CTFを始めたいなーと思ってVirtualBoxで環境構築したものの、ファイルの共有ができずに諦め、Dockerに行き着いたのでメモします。

Linux上でしか実行できないバイナリファイルを、仮想環境で動かしたいときなどにファイルの共有は必要らしいです。

今回は仮にやりたいこととして、「ローカル(mac)で作ったpythonファイルをdocker(centos)で実行したい」、とします。

## 前提

docker初心者で、docker for mac と、centosのイメージはインストールできているものとします。

```
$ docker --version
Docker version 19.03.5, build 633a0ea

$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
centos              7                   b5b4d78bc90c        9 days ago          203MB
```

## ローカルにファイルを作成

ローカルのデスクトップにPythonファイルを作っていきます。

```
cd desktop
mkdir Python
cd Python
touch index.py
```

Pythonファイルの中身はこのようにします。

```python
print("hello docker!")
```

## コンテナを立ち上げる

要はここが全てで、コンテナを立ち上げる時、
```$ docker run -v "<共有したいローカルのフォルダのパス>:<コンテナ内の共有先>" -it "<イメージ名>"```
というコマンドを打ってフォルダをマウントします。

```
$ docker run -v "/Users/tagawahirotaka/Desktop/Python/:/Python" -it "centos:7"
```

Volumeについて詳しい記事は[Docker、ボリューム(Volume)について真面目に調べた](https://qiita.com/gounx2/items/23b0dc8b8b95cc629f32)がありました。

## コンテナ内で実行

コンテナ内でファイルを調べると、きちんとPythonフォルダができています。
階層を移動し、実行するとちゃんと hello docker! が表示されます。

```
[root@5cd7e14e1f10 /]# ls
Python  anaconda-post.log  bin  dev  etc  home  lib  lib64  media  mnt  opt  proc  root  run  sbin  srv  sys  tmp  usr  var

[root@5cd7e14e1f10 /]# cd Python

[root@5cd7e14e1f10 Python]# ls
index.py

[root@5cd7e14e1f10 Python]# python index.py
hello docker!
```

再度マウントをせずコンテナを立ち上げた時には、Pythonフォルダは消えています。

## まとめ

VirtualBoxでCentOSを立ち上げるのには結構時間がかかったのに、dockerだと一瞬でした。
また、[VirtualBoxとMac間でファイルのやりとりをする共有フォルダを作成する](https://hacknote.jp/archives/8691/)等の記事を参考にしても、うまくファイルの共有ができずに詰まっていたのですが、これもdockerだと一瞬でした。

これから少しづつCTFをかじっていこうかなーと思ってます。
【VBA】表の行と列を変換するプログラム

#表の行列を変換するプログラム

以下のプログラムでは、エクセルデータの行と列を入れ替える処理を行うことができます。

**シート間をまたぐ場合**でも、処理を行うシートを指定することで対応可能です。

```vb:VBA
Sub tategaki()

'ファイルを開く
    Dim wb2 As Workbook
    Dim OpenFileName As String
    MsgBox "行と列を変換したいデータを選択してください。" & vbCrLf & "※ただし拡張子はxlsxのみ。", vbOKOnly + vbInformation
    OpenFileName = Application.GetOpenFilename("Microsoft Excelブック,*.xlsx?")
    Set wb2 = Workbooks.Open(OpenFileName)
   

'新しいシートの作成
    Worksheets.Add(After:=wb2.Worksheets(2)).Name = "行ー列変換"

'行と列を入れ替えたい範囲の選択
    Worksheets(2).Select
    Worksheets(2).Range(Cells(1, 4), Cells(10, 85)).Select　
    Selection.Copy

'行と列の入れ替え    
    Worksheets(3).Range("A1").PasteSpecial Transpose:=True
    
'処理完了のダイアログ表示 
    ActiveWorkbook.Save
    MsgBox "行と列の変換が完了しました。"
    
End Sub
```


以下の項目を入れ替えたいデータ範囲に合わせて書き換える。

```vb:VBA
Worksheets(2).Range(Cells(1, 4), Cells(10, 85)).Select
```


#行と列を変換するプログラムまとめ

**Transpose:=True**とすることがポイント。
JavaScript の ?? と || でどっちが0の判定どうなるんだっけ

JavaScriptの `??` と `||` ってどういう動きするのだっけ？ といつも忘れるので書いておきます。あと記号のググラビリティも悪いので名前も記録しておきたい。

まとめ: falsyなものを判定するなら`||`でOK、nullまたはundefinedだけを判定するなら`??`の方が良い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144064/36be0dfb-0ea0-a4c9-853b-a2b993c628f2.png)


# null合体演算子 `??`
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

> Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

> 左辺が '' や 0 の場合は左の値を評価して返します

# 論理OR演算子 `||`
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators

> true に変換できる値は、いわゆる truthy です。false に変換できる値は、いわゆる falsy です。

> false と見ることができる式の例は、null、0、空文字列 ("")、あるいは、undefined と評価されるものです。

# おまけ
ちなみにこういう演算子とかを検索するときに `??` とかで検索してもだいたい出てこないのでどうやって検索しているかという話。
`??` の場合は javascript question double とか記号の名前と特徴を英単語で検索すると「これってなんなの？」的な質問サイトに行き当たって正式名称を知ることができます。
Deno: テキストファイルを作成 (Create)

Deno でテキストファイルを作成します。
Dictionary に保存したデータをテキストファイルに変換します。

## プログラム

```ts:text_create.ts
// ---------------------------------------------------------------
//	text_create.ts
//
//					Feb/27/2023
//
// ---------------------------------------------------------------
function text_write_proc (file_out:string,dict_aa: {[key: string]: any})
{
	var out_str:string = "";

	const delimit = "\t";

	for (var id in dict_aa)
		{
		out_str += id + delimit;
		out_str += dict_aa[id]["name"] + delimit;
		out_str += dict_aa[id]["population"] + delimit;
		out_str += dict_aa[id]["date_mod"] + "\n";
		}

	Deno.writeTextFileSync (file_out,out_str)
}
// ---------------------------------------------------------------
function dict_append_proc (dict_aa: {[key: string]: any},id_in:string,name_in:string,population_in:number,date_mod_in:string)
{
	var unit_aa:{[key: string]: any} = new Object()
	unit_aa['name'] = name_in
	unit_aa['population'] = population_in
	unit_aa['date_mod'] = date_mod_in

	dict_aa[id_in] = unit_aa

	return	dict_aa
}

// ---------------------------------------------------------------
function data_prepare_proc ()
{
	var dict_aa : {[key: string]: any} = new Object()

	dict_aa = dict_append_proc (dict_aa,'t2381','名古屋',29516,'2012-5-12')
	dict_aa = dict_append_proc (dict_aa,'t2382','豊橋',46138,'2012-3-18')
	dict_aa = dict_append_proc (dict_aa,'t2383','岡崎',93241,'2012-10-4')
	dict_aa = dict_append_proc (dict_aa,'t2384','一宮',37864,'2012-6-22')
	dict_aa = dict_append_proc (dict_aa,'t2385','蒲郡',49178,'2012-8-14')
	dict_aa = dict_append_proc (dict_aa,'t2386','常滑',65792,'2012-9-12')
	dict_aa = dict_append_proc (dict_aa,'t2387','大府',37251,'2012-3-21')
	dict_aa = dict_append_proc (dict_aa,'t2388','瀬戸',59486,'2012-7-26')
	dict_aa = dict_append_proc (dict_aa,'t2389','犬山',31859,'2012-11-11')
	
	return	dict_aa
}

// ---------------------------------------------------------------
console.error ("*** 開始 ***")

const file_out:string = Deno.args[0]

console.log (file_out)

const dict_aa = data_prepare_proc ()

text_write_proc (file_out,dict_aa)

console.error ("*** 終了 ***")

// ---------------------------------------------------------------
```

## 実行コマンド

```bash
deno run --allow-write text_create.ts cities.txt
```

## 確認したバージョン

```text
$ deno --version
deno 1.31.0 (release, x86_64-unknown-linux-gnu)
v8 11.0.226.13
typescript 4.9.4
```
Alexaスキル申請でAmazonブランドまたは商標が不適切に使用されていますに悩んだ話

弊社ではAlexaスキル開発も行っているんですが、先日いつものようにAlexaスキルを申請したら以下の理由で審査をリジェクトされました。

```
スキルでは、Amazonのブランドまたは商標が不適切に使用されています。
```

**...はい？**
スキルでAmazonのこと何も喋っていないし、ドキュメントも問題ないし、スキル公開時の説明も問題ないはず。当然[申請チェックリスト](https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/certification-requirements-for-custom-skills.html#submission-checklist)にも則ってちゃんと申請しているはずなのに･･･頭抱えました。

## 原因

サポートに問い合わせてみると、以下の回答が返ってきました。

```
指摘させていただいた箇所は開発者コンソール > 公開タブ のプライバシーポリシーと利用規約のURLに"alexa"が含まれています。こちらを取り除いてください。
```

今まで公開してたスキルは全て```xxxx.alexa.スキル名.public```ディレクトリ配下で利用規約およびプライバシーポリシーを公開していたのですが、審査基準が変更されたんですかね？
このURLって別にユーザーから見えるもんじゃないし、いいんじゃないかなぁ。。。

そんなわけで、みなさん申請出すスキルのプライバシーポリシーおよび利用規約のURLにも充分気をつけましょう。
無償版 Microsoft Teams の MS アカウントの多要素認証設定を変更する方法

たしか、無償版の Microsoft Teams にサインアップしてからたしか 14 日以内に、追加のセキュリティ要素を追加しなければならなかったと思います。

僕も電話番号を追加して、SMS でセキュリティコードを受け取るようにしていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/6f5b4e2d-e5ad-7880-10c6-8dcfdb6395b9.png)

まあ、ここまでは良かったんですよ。ここまでは。

# 電話番号を変えたい
このログインするときの電話番号を変えたいと思ったんです。さてどうしよう。

## Microsoft Teams にはそんな設定メニューないなぁ…
まず、Microsoft Teams にはそんなメニューがありそうもないです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/4828c5ce-770d-fe9e-10fa-39a727e1b9a3.png)

## ほなら Microsoft アカウントの設定を変えるかー
というわけで、Microsoft アカウントのページを開きます。

https://account.microsoft.com/

多要素認証は「セキュリティ情報の更新」ですよね。ポチッと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/4bbfc09a-23d4-05b6-7ce7-a49c140ab7a8.png)

んー、「その他のセキュリティ オプション」かなー？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/3e9d6b7a-17ef-329e-5f30-f768f397f66a.png)

ここは「2 段階認証」やろー！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/e46e03dc-1e10-e02c-b3c1-875c758f188d.png)

ん？セットアップ？何かがおかしいですね…、だって、僕はもうセットアップしてるもの。

## Azure AD のほうだったかー！
まさかと思い、Azure AD のアクセスパネルを開いてみます。

http://myapps.microsoft.com/

そして、右上の顔写真のところから「プロファイル」を選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/f2ec9dca-d1c2-4539-2a17-989383cb49ec.png)

ここで「追加のセキュリティ確認」をポチッと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/a1546f2a-d3dc-462f-2167-b11e9ee5aaea.png)

こいつか！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/e0f80f33-f342-18b7-8611-973afe1530c6.png)

ここで電話番号を書き換えて「保存」したら、次からは新しい電話番号に SMS でセキュリティコードが届くようになりました。

## はは～ん
なるほど。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167110/24384b39-a8b7-30ee-c1c7-5821a0f09322.png)

# Microsoft Teams を利用する場合、多要素認証の設定は 2 箇所ある
Microsoft Teams を利用しようとアカウントをサインアップした場合、多要素認証の設定は Microsoft アカウント自体のものと、Microsoft Teams のものと 2 箇所存在することになります。

Microsoft アカウント
https://account.microsoft.com/
アクセスパネル
http://myapps.microsoft.com/

同じように悩まれているかたは、この 2 つの設定を確認してみてください。

#さいごに
謎は多く残りましたが、何とか無事に登録していた電話番号を変えることができました。

おそらく無償版ユーザーさんには、たどり着けない場所にある設定だろうなーと思い書いてみました。
Kubernetes基礎(3)：Overview

#Kubernetes Overview
<img width="943" alt="Kubernetes_overview.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519254/f256b700-5dde-4c01-fa40-4b0c0daa278d.png">
<b>Kubernetes Cluster</b>
サーバー1台はMasterとして使って、他の複数のサーバはNodeとしてMasterに接続します。
このような組み合わせで接続されているのをKubernetes Clusterと言います。
※Nodeは3つ以上を推薦しています。

<b>Master</b>
Clusterを管理します。

<b>Node</b>
リソースを提供します。
Cluster全体のリソースを増やしたい場合はNodeを追加します。
Nodeにはkubeletが存在し、Kubernetes Masterと通信（using kubernetes API）、Nodeを管理します。
（kubeletをagentとも呼びます。）

<b>Namespace</b>
Cluster内のNamespaceがKubernetesのオブジェクトを独立した空間に分離(=隔離)します。
NamespaceはKubernetesの最小配布単位のPodがあり、このPodは外部からの接続が可能なように
IPアドレスを割り当てたServiceがあって接続が可能になります。
※別のNamespaceのPodへの接続はできない。

<b>Pod</b>
PodはKubernetes Applicationの基本実行単位であり、Deployする最小単位です。
Podには複数のContainerが入れます。
Container毎に1つのApplicationが動作するため、Podは複数のApplicationの稼働ができます。

<b>Service</b>
Kubernetesで動かしているサービス（PodのContainer）を外部公開します。
Podに含まれているContainerのtraffic load balancingをサポートします。

<b>Volume</b>
Podに問題が生じて再生成されると、その中のデータは消えてしまいます。
Volumeを作成して繋げておけば、データはVolumeに保管されるのでPodが再生成されても、データは消えません。

<b>ResourceQuota/LimitRange</b>
1つのNamespaceで使えるリソースの制御ができます。
例）Pod数、CPU、Memory

<b>ConfigMap/Secret</b>
Podの作成時、Containerの環境変数などを設定したファイルへのMountができます。

<b>Controller</b>
Podを管理する。
・Replication Controller/ ReplicaSet（基本的なController）
　Podの状況を常に監視し、Podが多すぎるとPodを除去し、少ないとPodを開始したり、Podを管理します。
・Deployment
　Application Instanceの生成と更新を担当します。
　Podのバージョン管理を行います。
　アップグレード時、問題が発生した場合はロールバックもできます。
・DaemonSet
　1つのNodeに1つのPodが維持出来るように管理します。
・Job
　1つ以上のPodを作成し、指定された数のPodが正常に終了することを保証します。 
　このJobを定期的に実行するときはCronJobを使います。
【VBA】csvファイルから値を抜き出して、新しいxlsxファイルに書き出し・計算処理を行う方法



#新規ファイルを作成して名前を付けて保存する

##自動的にその時の日付・時刻をファイル名にするプログラム

```VBAscript:VBA
    '新しいファイルを作成
    Dim wb1 As Workbook
    Set wb1 = Workbooks.Add
    Set wb1 = ActiveWorkbook
    
    wb1.SaveAs Filename:="book1.xlsx"
    Debug.Print (wb1.Name)
    'ファイル名作成
    Dim strFileName As String
    strFileName = "好きな名前_" & Format(Now, "yyyymmddhhmmss") & ".xlsx"
   
    'ファイルパス指定
    Dim strFilePath As String
    strFilePath = ActiveWorkbook.Path & "\" & strFileName
    
    Set wb1 = ActiveWorkbook
'    ファイル保存
    ActiveWorkbook.SaveAs Filename:=strFilePath, _
                       FileFormat:=xlOpenXMLWorkbook


```

###日付・時刻をファイル名に入れる際のポイント


**Format(Now, "yyyymmddhhmmss")** を書くこと。



##保存したファイル名をダイアログボックスに表示するプログラム

```VBAscript:VBA

    '完了メッセージ
    MsgBox "ファイルの保存が完了しました" & vbCrLf & _
          "保存先は" & strFilePath & "です。"
          
```        

##データを参照するためのcsvファイルを開くプログラム
以下のプログラムでは、あとから好きなcsvファイルを開くことができます。

```VBAscript:VBA

'使用するCSVファイルを読む
    Dim wb2 As Workbook
    Dim OpenFileName As String
    MsgBox "参照するためのcsvデータを選択してください。" & vbCrLf & "※ただし拡張子はcsvのみ。", vbOKOnly + vbInformation
    OpenFileName = Application.GetOpenFilename("Microsoft Excelブック,*.csv?")
    Set wb2 = Workbooks.Open(OpenFileName)
    Debug.Print Application.ActiveWorkbook.Name

```
[Docker] [Gitlab] Gitlab基本安裝

#目的
這是一次安裝經驗紀錄,當我們需要自己架設 `版本控管` 環境時,以前用過幾個不同環境,最早是都放在github

之後到公司後好像許多公司都會自己做這段,之前是用GOGS但覺得沒那麼好用,後來無意間發現同事推薦這款發現功能真的挺齊全的就決定來使用看看


預先準備環境:Docker


#安裝Gitlab

1. 建立綁定資料夾

```
mkdir -p /docker/gitlab/config
mkdir -p /docker/gitlab/data #備份位置也會在這
mkdir -p /docker/gitlab/logs
```



2 . 安裝Gitlab

```
docker run -d -e "TZ=Asia/Taipei" -h gitlab \
-p 2222:22 \
-p 8888:80 \
-p 8443:443 \
-v /docker/gitlab/config:/etc/gitlab \
-v /docker/gitlab/logs:/var/log/gitlab \
-v /docker/gitlab/data:/var/opt/gitlab \
--restart always \
--name gitlab gitlab/gitlab-ce:latest

```

 - 2222(外部監聽Port):22(Docker 內部對應Port) SSH用
 - 8888(外部監聽Port):80(Docker 內部對應Port) HTTP用
 - 8443(外部監聽Port):443(Docker 內部對應Port) HTTPS用



3.登入gitlab
![gitlab1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176166/86687ba7-f87b-5784-b368-34840cb59e46.png)

![gitlab2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176166/43b9db0e-5ed7-a530-b69c-3f19757b5cde.png)



這樣就完成了
Xbox Game Bar使用後に画面一部が反応しなくなる現象

# 問題の概要

普通にPCを使っていたが、何かしらのゲームをした後、画面左上から当たり判定が消えていた。
だがディスプレイ上ではいたって正常に描画されていて、カーソルも存在する。

異常判定外から異常判定内へ範囲選択をすれば、異常判定内のアイコンは選択可能だが
内側から外側に向けて範囲選択をしてもなんの動作もおこらない。

加えて、筆者はタスクバーを画面の左側に配置しているのだが、異常判定の領域ではタスクバーが引き出せない。

# 問題の原因

原因を先に述べてしまうと、`Xbox Game Bar`の機能の1つである`パフォーマンス`をピン留めしているためであった。
ゲームを閉じてパフォーマンスの表示が消えても、内部的にはそこに固定ウィンドウが生成され、下にあるアプリケーションが選択不可となっている状態であったと考えられる。

# 解決方法

単純にピン留めを外すだけで解決できた。
方法は、`Windowsキー + G`で`Xbox Game Bar`を起動し、表示されている`パフォーマンス`の画面の上にあるピンマークを解除する。
最初は`Xbox Game Bar`のアプリケーションを強制終了していたが、ゲームを起動するたびに自動的に立ち上がり、さらにエラーでゲームが一度落とされるという悪仕様。
アプリケーションの音量調整がカーソル移動量を少なくかつ簡単にできるため、このアプリケーション自体は悪くないものなのだが、そこにウィンドウがとどまり続けるというのは困ったものである。
DBMSについて色々調べてみた件（３）

どうも初めまして！　

最近基本情報技術者の資格取得に向けて勉強中な駆け出しエンジニアのワカです。

#■この記事を書こうと思ったきっかけ
最近書籍を購入して勉強しているのですが、暗記ばかりでなかなか身にならないと思いました。

そこで基本情報に書かれている内容を自分なりに解釈したものをここに備忘録として書き残すことにしました。
そうすれば手も動かせるし人にみられると思うとその分責任感出ますしね！

あと個人的に今自作PCを作りたいとも考えているのでこの機会に詳しくなっとこうと思ったのも理由の一つです笑

もしかすると間違っている点などあるかもしれませんので、その時は指摘していただけると嬉しいです。

#◼️トランザクション管理と排他制御

データベースを同時に複数人でいじることができると不整合が起こることが予想できます
不整合を引き起こす要因からデータベースを守るのが**トランザクション管理**と**排他制御**です

##トランザクション管理

トランザクション・・・一連の処理（在庫更新の際、更新前の在庫数から更新後の在庫数へと変更するまでの処理のこと）をひとまとめにしたもの


##排他制御
トランザクションの間使用するデータをロックしておいて他の人が読み書きできないようにする機能です。
ロックする方法には**共有ロック**と**専有ロック**の二種類があります

**共有ロック**・・・他のユーザー：読む→**可能**、書き→**不可**
**専有ロック**・・・他のユーザー：読む→**不可**、書き→**不可**

※デッドロック・・・複数のトランザクションがお互いに相手の使いたいデータをロックしてしまいお互いがお互いのロック解除を永遠に持ち続ける現象のこと。こうなってしまった場合はいずれかのトランザクションを強制的にキャンセルする必要があります

##トランザクションに求められる ACID 特性

DBMSではトランザクション処理に対して4つの特性が必須とされ、それを各々の頭文字をとってACID特性といいます。

| 特性 | 説明 |
|:-:|:--|
| **A**tomicity<br>(原子性)  |「全て実行される」か「全く実行されない」かのいずれかで終了すること。<br>中途半端に一部だけ実行されるような事は許容しない   |
|**C**onsistency<br>(一貫性)   |データベースの内容が矛盾のない状態であること。  |
|**I**solation<br>(隔離性)   | 複数のトランザクションを同時に実行した場合と順番に実行した場合の処理結果が一致すること。  |
| **D**urability<br>(耐久性)  |正常に終了したトランザクションの更新結果は障害が発生してもデータベースから消失しないこと。何らかの復旧手段が保証されていないといけない   |

##ストアドプロシージャ
データベースを操作する一連の処理手順（SQL文）もう一つのプログラムにまとめ、データベース管理システム DBMS側にあらかじめ保存しておくことを**ストアドプロシージャ**と呼びます

例)・・・クライアントサーバーシステムによってデータベースサーバーに保存されたストアドプロシージャはそのプロシージャ名を指定するだけでクライアントから実行させることができます

**メリット①**→ちまちまと SQL を流す必要がないので ネットワークの負荷が軽減できる
**メリット②**→プロシージャは SQL 文の解析も済ませた 即実行可能な形式なので処理速度の向上が見込める

#◼️データベースの障害管理
データベースには業務に必要なデータが大量にため込まれており、刻々と更新されています。
だからこれが壊れると一大事になっちゃいます。

ですがシステムである以上こういったことが必ず起こり得てしまうのでこういった障害が発生した時として
**バックアップファイル**や**ジャーナルファイル**を使って回復を行うようになっています。

**バックアップ**・・・一日に一回といった頻度を決めて、その時点のデータベース内容を丸ごと別のファイルにコピーして保管すること
**ジャーナル**・・・バックアップを取るといっても常に更新できるわけではないのでバックアップとバックアップまでの間の内容に更新された気を苦を保護する目的として使われる。更新前と後で逐一記録して更新履歴を管理しています。

実際に障害が発生した場合はこれらのファイルを使って**ロールバック**や**ロールフォワード**など障害回復処理を行い元の状態に復旧します。

##コミットとロールバック
トランザクション単位で更新処理を管理するということはどういうことかというと
データベース に更新内容を反映させるのは「**すべての処理が問題なく完了しました**」と言うタイミングじゃないとだめということです。

**コミット**・・・トランザクション処理の一連が問題なく完了できたとき、最後にその方針を確定することでデータベースへの更新内容を反映させること

**ロールバック**・・・トランザクション処理中に何らかの障害が発生して更新に失敗した場合にデータベース更新前の状態を更新前ジャーナルから取得して データベースをトランザクション開始直前の状態にまで戻す処理のこと

##分散データベースと２相コミット

**分散データベースシステム**・・・物理的に分かれてる複数のデータベースを見かけ上一つのデータベースとして使えるようにしたシステム

イメージでいうと、主サイト（親）があり、それとは別にサイトA,B（子）が連携して動いているようなイメージ
親側で更新があった場合に子側でもその更新が適応されなければいけないことになる

**２相コミット**・・・この親が子に対して更新の可否を問い合わせてその結果に応じてコミット、ロールバックを行うこと

２相コミットの流れ
① 全てのサイトに対してコミットの可否を問い合わせる
↓
②各サイトからの返答が返ってくる
↓
③前菜とが コミット可能なら全サイトにコミットを指示一部でも不可 奈良 全サイトにロールバックを 指示する
##ロールフォワード
トランザクション処理中ではなく突然データベースが故障してしまった場合に行う処置方法です。
これまでに失ったデータをできるかぎり元に戻すために以下のような形で復旧を行います。

**バックアップファイル＋バックアップ以降の更新後ジャーナルから情報取得**


#■最後に

ここまで長々と読んでくださりありがとうございました！
少し説明がわかりにくかった部分があるかと思いますが、もしわからないところがあればコメントしていただけると嬉しいです。

では！次の記事にて！
【Swift】アルバム起動

##①photosをインポートする
```
import Photos

```

##② UIImagePickerControllerDelegate,UINavigationControllerDelegate　を継承する。
```
UIImagePickerControllerDelegate,UINavigationControllerDelegate
```


##③以下のコードをメソッドとして記述する。

```
//アルバムを起動
    func doAlbum(){
        let sourceType:UIImagePickerController.SourceType = .photoLibrary
        //カメラが利用可能かチェックする
        if UIImagePickerController.isSourceTypeAvailable(.photoLibrary){
            let cameraPicker = UIImagePickerController()
            cameraPicker.sourceType = sourceType
            cameraPicker.delegate = self
            cameraPicker.allowsEditing = true
            present(cameraPicker, animated: true, completion: nil)
        }
    }
```


##④アルバムから画像が選択されたときの呼ばれる箇所。以下のコードを記述する。

    //カメラ撮影orアルバムから画像選択された時に呼ばれる
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        
        if info[.originalImage] as? UIImage != nil{
            let selectedImage = info[.originalImage] as! UIImage
            UserDefaults.standard.set(selectedImage.jpegData(compressionQuality: 0.1), forKey: "userImage")
            logoImageView.image = selectedImage
            picker.dismiss(animated: true, completion: nil)
            
        }
    }


※理解のため、自分のわかりやすい単語に置き換えてあるので、表記に問題ありの場合が多いかと思いますが、ご了承ください。。
C++によるHDF5の取り扱い(インストール編)

科学技術計算の配列データ読み書きでよく用いられているHDF5を以前から導入したいと思っていました。しかし、Pythonの記事は多くあるものの実際にシミュレーションで使用するC++での利用について触れられた資料があまりなかったので導入に少し苦戦しました。シミュレーションでHDF5を使ってみたいと考えている方の役に立てばと思います。

## 導入の経緯
3Dシミュレーションなどを行っていると、粒子の座標情報など非常に大きなデータを吐き出す場面が多々あります。このような情報をテキストデータとして書き出してもよいのですが、ファイルへの書き出しとプロット時の読み込みが遅いことを不満に感じていた。

## HDF5について
いきなりインストール方法について書いてもよいが、せっかくなのでHDF5の特徴について少しだけ触れておきたいと思います。

- 階層構造を持ったデータを保存できる。例えば、分子シミュレーションなどでステップごとに粒子配置のファイルを生成する必要がなく一つの.h5ファイルに保存することができる。
- バイナリ形式で保存されるため、テキストファイルと比較すると非常に早く読み書きできる。
- 計算を行う際のパラメータなどを属性として保存できるので、どのような条件で計算して得られたデータであるのか把握しやすい。

## インストール
科学技術計算では通常、ローカルマシンからリモート(計算機サーバー)にジョブを投げる形でシミュレーション計算を行います。そこで今回は、計算機サーバーにHDF5をインストールしたいと思います。動作環境は以下の通り。

- OS: CentOS 6.10 x86_64
- CPU: Intel(R) Xeon(R) CPU E5-1650 6コア 3.2GHz
- メモリ: 16GB

Linuxであればapt-getやyumなどのパッケージマネージャによりHDFをインストールすることができますが、今回はroot権限のない計算機サーバーを想定して、ソースコードからインストールします。
サーバーにログインしたら、コマンドラインに次のように入力しソースコードをダウンロード・解凍します。

```cmd
$> cd $HOME/Downloads  
$> wget https://support.hdfgroup.org/ftp/HDF5/current/src/hdf5-1.10.5.tar.bz2
$> tar -zxf hdf5-1.10.5.tar.bz2 -C $HOME/local/src
```

`$HOME/local/src`に展開していますが、展開先・インストール先はお好みの場所で構いません。
次に、ビルド・インストールを行います。

```cmd
$> cd $HOME/local/src/hdf5-1.10.5
$> ./configure --prefix=$HOME/local --enable-cxx
$> make && make install
```
最後に、`$HOME/.bash_profile`に以下の文を追加するとHDFライブラリを利用できるようになります。  

```$HOME/.bash_profile
export LD_LIBRARY_PATH=$HOME/local:$LD_LIBRARY_PATH
```

## コンパイル、実行時の注意　　

コンパイルの際、以下のようにライブラリを指定してあげる必要があります。

```cmd
g++ hogehoge.cpp -lhdf5_cpp -L($HOME)/local/lib -I($HOME)/local/include
```

また、計算機から他の計算機にジョブを投げる際にはジョブを投げるスクリプトに`$HOME/.bash_profile`同様にライブラリパスを追記する必要があります。　　
  
　　
  
次回は配列の書き出し方について書きたいと思います。
webpack 4系でwebpack.config.jsの自動生成ができないときの解決方法



プロジェクト開始時、今までwebpack.config.jsは手でシコシコ書いていたんですけど、「自動生成出来るよ」って聞いたので試してみたときの備忘録になります。

## 環境

結果的にOKだった環境は次の通り

|name|version| 
|:--|--:|
|node.js|13.8.0| 
|webpack|4.43.0|
|webpack-cli|3.31.0|
|@webpack-cli/init|0.2.2|

## 失敗したケース
```shell:
# 各種ツール類のインストール
$ yarn add -D webpack webpack-cli @webpack-cli/init

# webpack.config.jsの自動生成
$ webpack init
/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:42
            throw new TypeError(chalk_1.default.bold(`${scaffold} isn't a valid name.\n`) +
            ^

TypeError: init isn't a valid name.

It should be prefixed with 'webpack-scaffold', but have different suffix.

    at /Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:42:19
    at Array.forEach (<anonymous>)
    at Object.npmPackagesExists [as default] (/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/utils/npm-packages-exists.js:26:9)
    at initializeInquirer (/Users/YoukyMurakami/project_hoge/node_modules/@webpack-cli/init/index.js:23:41)
    at runWhenInstalled (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/utils/prompt-command.js:46:9)
    at promptForInstallation (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/utils/prompt-command.js:140:10)
    at /Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/cli.js:32:43
    at Object.<anonymous> (/Users/YoukyMurakami/project_hoge/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)

```

oh...```TypeError: init isn't a valid name.```って出ていますね。
ちょっとググってみると、どうやらinitじゃなくてcreateになるよってことらしいのですが、createを使うには```webpack-cli@beta```をインストールしてねということだそうです。
webpack-cli本体のバージョンは上げずになんとかするには･･･

## 解決策
webpack-cliとwebpackのバージョンの組み合わせによりうまく動かないようなので、以下のコマンドでダウングレードしたwebpack-cliをインストールして下さい。

```shell:
# 0．2．2バージョン指定でインストール
$ yarn add -D webpack @webpack-cli/init@0.2.2
```

```shell:
$ webpack init
INFO  For more information and a detailed description of each question, have a look at: https://github.com/webpack/webpack-cli/blob/master/INIT.md
INFO  Alternatively, run "webpack(-cli) --help" for usage info

? Will your application have multiple bundles? (y/N) Run-async wrapped function (sync) returned a promise but async() callback must be executed to resolve.
```

無事に動きました！
最終的なpackage.jsonを貼っておきます。

```json:package.json
{
    "name": "hoge",
    "description": "hogehoge",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
    },
    "devDependencies": {
        "webpack": "^4.43.0"
        "@webpack-cli/init": "0.2.2",
    },
    "scripts": {
        "test": "jest"
    }
}
```
LaravelでDatabaseTransactionsを利用してDBにアクセスするテストを高速に実行する。

# 概要

タイトルでほぼ終わってる感がありますが、`DatabaseTransactions`トレイトを利用すると、DBへの書き込みテストを高速に行うことができます。

# 説明
DBに対するテストをする場合に`RefreshDatabase`を利用する例をよく見ますが、
RefreshDatabaseは内部的に`php artisan migrate:fresh`が行われており、データベースの作り直しから始まるので、Migrationが増えてくるとかなり時間が掛かるようになってきます。

`DatabaseTransactions`を利用するとテストのsetup時点でbeginTransactionして、tearDown時にrollbackしてくれるので、データベースを作り直すことが無く、高速に実行できます。

# デメリットは？
データベースを作り直すわけではないので、完全に実行前に戻るわけではありません。
例えばautoIncrementなidを持つtableなどに対してテストを行った場合は、たとえrollbackしても自動採番の数字は戻りません。そこら辺を理解した上で利用できる状況であれば、とても高速です。
部分テンプレート

#部分テンプレートとは

viewファイルで同じHTML構造の部分を共通化したもの

例えばwebサイトのヘッダー部分や、ブログ記事の一覧表示画面の各投稿のレイアウトなども多くが共通していますよね

#使用するメリット

・共通化することで何度も同じコードを書く必要がない

・修正する際の修正箇所が少なく済む

・他のviewファイルで使い回すことができる

# 使用方法

まずは共通化している部分を部分テンプレートのファイルに書き換えます。

ファイル名の前には必ず「**　_　(アンダーバー）**」を書きます

「_post.html.erb」　など。

あとは呼び出しをするだけですが、この際 **render** メソッドを使用します。

```index.html.erb
<% render partial: "post" %>
```

**partial** オプションは部分テンプレート名の指定をしています。

また、部分テンプレート内で変数を扱いたい場合は **locals** オプションを使用します。

```
<% render partial: "部分テンプレート名", locals: { 変数: 値 } %>
```
PMP試験に出てくるPMI Talent Triangleを覚えよう！

# PMI Talent Triangle
PMIタレントトライアングルのこと

## PMBOKのどこに出てくるのか

PMBOKガイドの`57ページ`の`3.4.1 Overview`

- 3 The Role Of The Project Manager
    - 3.4 Project Manager Competences
        - 3.4.1 Overview

# PMIタレントトライアングル
- Technical project management.
- Leadership.
- Strategic and business management.
    - expertise in the industry
    - deliver business outcomes


----

よかったよかった