OmniAICreator/Qiita-1.07M huggingface dataset:
変数スコープを誤解していた件

##自己紹介

昔はDelphi、ここ数年はC#で業務アプリを開発しているarimooです。
もうLINQとリフレクションのない世界には戻れそうにありません。

Qiita初投稿、Advent Calendar初参加です。よろしくお願い致します。

本記事は「[C# その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/csharplang2)」19日目です。

##発端

いつも参考にさせて頂いている「未確認飛行C」の記事[C# の null 判定の話](https://ufcpp.net/blog/2020/12/isnull/)を拝見していて(記事の趣旨とは無関係な部分で)気になるコード例が...

(引用開始)

```C#
void M(A a)
{
    if (a.X is not { } x) return; // null だったら early return。
 
    // x を使って何か処理をする。
    // ここでは x に非 null な値が入っているはず。
}
```
(引用終了)

あれっ！？　<font color="Red">if文カッコ内の"x"のスコープってifブロックで閉じてなかったっけ...？</font>

##検証

※環境はVisualStudio2019、ターゲットフレームワークを.NET 5.0にしたWinFormsアプリで検証しています。

という訳で適当なクラスAを作成し、記事中の"x を使って何か処理をする。"にDebug.WriteLineでxを表示させます。

```C#:クラスAとメソッドM
class A
{
    public string X;
}

void M(A a)
{
    if (a.X is not { } x) return; // null だったら early return。

    // x を使って何か処理をする。
    Debug.WriteLine($"x: {x}"); //ここでエラーが出ていない！
}
```

VS上でこのコードを書いてもエラーが検出されないので、この時点で"x"がifブロックの外で参照できる事、<font color="Red">**私が変数スコープを誤解していた件が確定っ！**</font>

**早くもタイトルを回収してしまいましたが、**でもまぁ折角コードを書いたので気を取り直して上記を呼び出してみます。

```C#:メソッドMの呼び出し側
//XがNULL
A a = new(); //Viva! C#9.0
M(a); //early returnが効いて、何も出力されない

//Xを埋める
a.X = "hoge";
M(a); //"x: hoge"が出力される
```

...と、想定通り(※)の挙動になりました。

※私のではなく、元記事の想定の通り...

##なぜ誤解したか...？

###ぱっと見の印象

```C#:for文
for (int i = 0; i < 10; i++)
{

}
Debug.WriteLine($"{i}"); //iはスコープ外、ダメ

string[] strs = new string[] { "aaa", "bbb", "ccc" };

foreach (var s in strs)
{

}
Debug.WriteLine($"{s}"); //sはスコープ外、ダメ
```

上記for/foreach文やメソッドの引数のように、{}ブロック外で使えないという印象が強く効いていました。

###マイクロソフトのドキュメントの誤読

"expr is type varname"に対応した当時に読んだ内容と同じかどうかは不明ですが...

[マイクロソフトのドキュメント](https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/keywords/is)中、

(引用開始)

```C#:C#
expr is type varname
```

expr が true であり is が if ステートメントに使用されている場合は、<font color="Red">varname は if ステートメント内のみに割り当てられます。 varname のスコープは、is 式から if ステートメントを閉じるブロックの末尾までになります。</font> 他の任意の場所に varname を使用すると、<font color="Blue">割り当てられていない変数の使用によるコンパイル時エラー</font>が生成されます。

(引用終了)

...の<font color="Red">赤字</font>部分を見て早とちりして、その先の<font color="Blue">青字</font>をさらっと流してしまっていました。
冷静に考えるとスコープ外なら**"現在のコンテキストにvarnameは存在しません"**になるはずですね...

※とはいえ**"varname のスコープは、is 式から if ステートメントを閉じるブロックの末尾までになります。"**はダウトかな～。

"割り当てられていない変数の使用によるコンパイル時エラー"という事は、**割り当てればエラーにならない**ハズ！　...という事で、検証した内容をコメント文に記載しています。
(最初の検証で上手く行く事は判っていますが、実際に弄ってみるとフロー解析の賢さを体験できます！)

```C#:検証コード
string s1 = null;

if (s1 is string w1)
{
    //ここに入る場合、w1はs1の中身で埋まっている
    w1 += ":TRUE"; //埋まっているから+=もOK
}
else
{
    //ここに入る場合、w1は未割当の状態
    w1 = "FALSE"; //ここでw1への代入で、WriteLineでも使える状態になる
    //w1 += "FALSE"; //先にこれはダメ。w1は"未割当"エラーになる
    
    //return; //returnするならWriteLineまで行かないからw1埋めなくてもOK！
}

Debug.WriteLine($"{w1}"); //elseブロックをコメントアウトすると、w1は"未割当"エラーになる
```

w1をifブロック外で使うためにはelse側で埋めてあげるかreturnする必要がある、という事ですね！
(is notにするとifブロック側で埋めるかreturnする必要があります)

##まとめ

便利に使っているif (obj is Hoge h)構文のhが、ifブロックの外側でも使えるとは目から鱗でした！

※今のところ、元記事にあるような演算子オーバーロード回避の需要が発生しない限り使わないとは思いますが...(^^;
（そもそも演算子オーバーロード自体を余り使っていない...）

初投稿＆初Advent Calendarが<font color="Red">**自分のうっかり記事**</font>というのもどうかと思いましたが、同じように誤解している方もいるかもしれないと思い、書かせて頂きました。参考になれば幸いです！
Fatal error: Unexpectedly found nil while unwrapping an Optional valueについて

#Swiftでよく見るこのエラー
``Fatal error: Unexpectedly found nil while unwrapping an Optional value``
まずは翻訳してみましょう！

`オプショナル形の値のアンラップ中に予期せずnilが見つかりました`

です。

Storyboardを使って開発してる方向けに言うと、


このエラーが起きたら、**6割**、関連付けができていないことが原因です！



この,**6割**ってのが割と大事。(※筆者の肌感覚です)



#(6割方原因これ)関連付けが主な原因な場合

もしこのエラー文章が、`@IBOutlet`接続してるものが含まれる文章に書いてあるんだったら、
関連付けできてるか確認しましょう。




<img width="722" alt="スクリーンショット 2020-06-13 10.47.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410130/0036a753-d1b4-aff5-5186-c83c77d24cc3.png">
お、こんなとこに白丸が！！

![スクリーンショット 2020-12-13 15.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410130/2172a590-4286-f579-2cbc-613aa104de2d.png)

XCodeは便利なもので、
関連付けしてあったら、◉
してなかったら、○
が行のところに表示してくれます。
(たまに関連付けしてるのに、○表示になってることもあるけど、、)

ってことで関連付けして終了です。

ちなみに`@IBOutlet`をつけるとき("`@IBOutlet`オプションの時"って言う)、"!"をつけるの！！！って人はこちら参照！
【[IBOutletはなぜ" ! "で定義すべきか][link-1] 】
[link-1]:https://qiita.com/Lulu34/items/791ad052a6dce480175c


#(4割方の原因)変数がnilの状態のままその変数をつかって処理をしようとしてクラッシュしてる

直訳通りです。

ます頭に入れといて欲しいのは
###変数は箱だってこと。
箱の中身には値が入ります。
<div align="center">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/410130/4d82698a-ce76-e608-2a76-c5a026b49093.png" alt="属性" title="変数はただの箱.png">
</div>


この画像で言うなら、"a"って言う箱に何かしらの値が入ってるって意味っす。

変数についての復習はこちら。

この箱の中には値が入ってなくて(つまりnilの状態)、その状態のまま処理しようとしてるからアウトってパターンです！

###どう直せばいいのか

空になってる変数に値を入れればいいのです。
いかに注意して、変数に値を入れてください。
①関数内のプログラミングコードはは上から下に読まれる
②大抵の場合、viewDidLoad関数は一番最初に読まれる。
Google Driveをコマンドラインで扱う-skicka編

### これまで

gdrive（[prasmussen/gdrive](https://github.com/prasmussen/gdrive)）を試していた。もうメンテナンスしてないので、skickaに変更（認証を通せなかった……）

skickaについては、ほとんど下記のすばらしい記事たちに書いてあります。屋上屋を重ねているようで恐縮……ですが、macOS Big Surでもやれた検証ということで……。


- インストール手順→[【メモ】Skickaを使ってGoogleDriveに簡単アップロード](https://qiita.com/kotarouetake/items/e10585826b5ac15cd03a)
- 認証について→[skickaの『「Google でログイン」機能が一時的に無効』を一時的に解決する](https://qiita.com/satackey/items/34c7fc5bf77bd2f5c633)
- 主なコマンド→[GDriveをCLIで使う - skicka - ](https://qiita.com/sesame_apps/items/054fbc49d5a7da9679b7)


### skickaのインストールから、コマンド例まで

![スクリーンショット 2020-12-15 16.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/75f4d810-7798-613f-4e1d-4dd8f8ab82ad.png)


#### goのインストール

- ダウンロードして、インストール（＊１）
- `$ go version` でインストールされていることを確認


#### skickaのインストール

- githubからインストール
    - `$ go get github.com/google/skicka`
- パスを通す
    - `$ export PATH=~/go/bin;$PATH`
    - →`.bash_profile`に`export PATH="/Users/xxxxx/go/bin:$PATH"`追加
- 初期化ファイル作成
    - `$ skicka init`

#### 認証を通す

- 下記でURLを取り、ブラウザに入力するが「Google でログイン機能が一時的に無効」と出てくる
    - `$ skicka -no-browser-auth df`
- Client ID と Client Secret を取得　（＊２）
    - `~/.skicka.config`を編集
    - 該当行のコメント（`;`）を外すのを忘れててハマった！
- たとえば`$ skicka ls`とすると、ブラウザでアプリ認証がはじまる（１回だけ）


#### コマンドラインで操作

ファイルリスト（ls）、最初は時間がかかった（１回だけ？）

```
$ skicka ls
skicka: attempting to launch browser to authorize.
(Re-run skicka with the -no-browser-auth option to authorize directly.)
Updating metadata cache: [========================================] 100.00% 4m4s
＜ここに表示される＞
```

フォルダサイズを調べる

```
$ skicka du /xxx/yyy/
```

アップロードとダウンロード

```
$ skika upload(download) /xxx/yyy/ ./zzz/
```

#### 気づいたこと
- 下記はさきにパースしてから、ダウンロードを開始してくれる（便利だ！）
    - ファイル名が同じものはスキップされる
        - Google Driveでは同じフォルダに同じファイル名のものが存在できるから
    - Google Appsファイルはスキップされる
    - ファイル名（フォルダ名）に`/`が入っているものはスキップされる（そんなファイルはないと言われる）


### 参考サイト

- GO：[Download and install](https://golang.org/doc/install)　（＊１）
- 本家：[google/skicka](https://github.com/google/skicka)
- [GDriveをCLIで使う　- skicka - ](https://qiita.com/sesame_apps/items/054fbc49d5a7da9679b7)
- [【メモ】Skickaを使ってGoogleDriveに簡単アップロード](https://qiita.com/kotarouetake/items/e10585826b5ac15cd03a)
- 認証：[skickaの『「Google でログイン」機能が一時的に無効』を一時的に解決する](https://qiita.com/satackey/items/34c7fc5bf77bd2f5c633)　（＊２）


### 環境

skicka committed on 17 Jun
go version go1.15.6 darwin/amd64
macOS BigSur バージョン 11.0.1（20B50）
MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
[PHP]複数配列のループ

複数配列を同時にループさせる方法として以下のようにarray_map()を使うのが便利だったので共有します。

```php:.php

$array1 = [1,2,3];
$array2 = [4,5,6];

foreach (array_map(null, $array1, $array2) as [$arr1, $arr2]) {
    echo ($arr1 + $arr2); //5,7,9
}

```
array_map(null, $array1, $array2)の結果は [ [1,4], [2,5], [3,6] ] となっていて、
nullを渡すことによって、それぞれの配列の同じインデックスの要素同士をくっつけて、配列の配列にしてくれます。

##参照
[array_map - PHP](https://www.php.net/manual/ja/function.array-map.php)

##会社の紹介
私は現在、[株式会社ダイアログ](https://www.dialog-inc.com/)という物流×ITの会社に勤務しております。
2020年12月現在、エンジニアの募集はしていませんが、他にも様々な職種を募集しているので、[Wantedly](https://www.wantedly.com/companies/company_3244501)のページをご覧ください。
XcodeのStoryboardで指定するUIViewのBGColorがカラーピッカーから取得したカラーコードに色が合わなくて困った

AdobeXDで作られたスマホアプリのデザインを実装していたのですが、XDのスポイトで取得したカラーコードを実装してもいまいち色が合わなかったので調べました。
※ 色は同じディスプレイでみてます。

# XDの色

![スクリーンショット 2020-12-15 15.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/2bf855c2-1a9b-dd22-dd96-a2fe0ecf71e4.png)

ピックすると#83C449のカラーで取得。

# StoryboadのUIViewのBackgroundに指定

 ![スクリーンショット 2020-12-15 15.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/b462e809-ef74-11ef-bc43-be3b76ff52ec.png)

XDで取得したカラーコードをUIViewのBGカラーとして設定したのですが、いまいちくすんで色が合わない。
シミュレータで実行後のUIViewの色がこちら。

![スクリーンショット 2020-12-15 15.41.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/d855a171-6de6-7347-fa0e-3da4e6282430.png)


## カラープロファイルを指定する

調査したところディスプレイやデジタルカメラ、スキャナなどは、それぞれ様々な規格でRGBの色を表示しており、デバイスによっては表現できる色の幅が変わるとのこと。
UIViewのデフォルトは```Generic RGB```が指定されており、これを```sRGB```で指定すれば大差なく表示できるとあったので、設定を変えてみました。

![スクリーンショット 2020-12-15 15.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/b5a42858-6002-df8b-66b7-0ee55d5d29a4.png)

変更してシミュレータで実行した結果がこちら。

![スクリーンショット 2020-12-15 15.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/4901afa2-8467-38b0-523d-237f1cac5ad9.png)

あんまり変わってない。。。

## 結論

![スクリーンショット 2020-12-15 15.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/f19349e9-5040-09f2-9ea0-3c6e9ddec906.png)

解決方法がわからなかったので、Googleでカラーコードを入力し、そこから目視で"#86D442"を設定しました。
シミュレータでの"#86D442"の結果がこちら。

![スクリーンショット 2020-12-15 15.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92379/b6fbbc6d-7213-16a8-0f21-14407d9aee1b.png)

ということで、結局微調整は必要なのかもです。。。
どなたか詳しい方いればコメントいただけるとうれしいです。
AAVE を testnet で動かし DeFi レンディングを体験する

AAVE とか Compound とかで DeFi lending/borrowing 使ってみたいけど, 実資産(Ether, ERC20 tokens, etc)を使うのはためらいがある...

testnet で試しましょう!

今回は AAVE を試します(UI がわかりやすいので).

https://aave.com/

AAVE は Kovan testnet しか対応していないようです.
(Compound は Ropsten など各種テストネットに対応しています)

## Wallet 準備

とりあえず Metamask あたり(PC browser の Metamask が楽でしょうか)で Wallet を用意しておきましょう.

AAVE の場合は, wallet connect を利用することで, スマホ Metamask も使えます

### Faucet

最初の Ether が必要になります.

いくつか faucet ありますが, 現状動いていないものがあったりしますので注意です.

https://faucet.kovan.network/

https://github.com/kovan-testnet/faucet/issues/159

502 bad gateway :cry:

ぺろっともらえるのは, 迷惑な利用(?)を避けるためか, もらえる ETHs は少なめです.

gitter でもらう(4 ETHs もらえる)のがよさそうです.

https://qiita.com/biga816/items/ac762faf5d9334aeeabd

### AAVE 

https://testnet.aave.com

で Kovan で繋げばいけます!

![Screenshot from 2020-12-14 17-16-57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/4911a857-662b-d762-071f-1197f2f6a564.png)


AAVE 上でも `More` -> `Faucet` で各コインを Faucet 取得できます.

![Screenshot from 2020-12-14 17-08-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/e99add0d-e079-c4bb-2b6c-9e6d292b9608.png)

(取得するために gas がいるので最初の Ether はいずれにせよ必要. また Eth の faucet は無い)

v1, v2 がありますが, mainnet は v2 が最新(2020/12/04 あたりリリース)です. 
website は mainnet のを流用しているからか, v1, v2 切り替えがうまくいかない(mainnet の URL に飛んでしまう)ので注意です.
とりあえずデフォルトで設定されたものを使いましょう. いずれは治るかもです.


### Wallet でのコインのアドレス

USDC など, Metamask とかで検索で追加できる ERC20 コインは mainnet のアドレスのものなので, 検索で追加したものだとそのままでは残高ゼロのままです.
借り入れしたコインを Metamask などで残高確認したい場合, Kovan network(より正確には AAVE が Kovan で生成したコントラクトのアドレス)のコインのアドレスを指定する必要があるので注意です!

一覧はこのあたりから.

https://docs.aave.com/developers/v/1.0/deployed-contracts/deployed-contract-instances

もしくは, 残高は Kovan etherscan で確認しましょう.

https://kovan.etherscan.io/ 

Compound など別のサービスでは, コインのアドレスはまた別のアドレスになっていますので注意しましょう.

### 試す

あとは UI ぽちぽちするだけで預け入れ, 借り入れが体験できます.
借り入れたくさんして精算(liquidation)を引き起こしてみるなどするとよいでしょう!
Visual Studio Code PHP Debug 急にブレークポイントが設定できなくなった

# 目的

- デバッグ中にブレークポイントが設定できなくなって困ったので自分の遭遇したケースの解決策を記載する

# 前提情報

- 筆者のVScodeは日本語化拡張機能が導入されている。

# 症状

- 行数の左側をクリックするとブレークポイントを設定できるはずなのにクリックしてもブレークポイントが設定できない

    ![FirstController_php_—_j-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/2036592b-a690-550d-764b-4e26a0a5720d.png)

# 解決方法

1. タスクバーの「code」をクリックし「基本設定」→「設定」をクリックする。
1. 設定の検索に「phg debug」と入力しEnterを押下する。

    ![設定_—_j-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/9f70ea7c-884a-16d8-f474-31d9c92fcdfa.png)

1. サイドメニューの「デバッグ」をクリックする。

    ![設定_—_j-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/64eaca5d-178f-6b53-0afb-dce589a011f4.png)

1. 「Debug: Allow Breakpoints Everywhere」のチェックが外れていたためチェックをつける

    ![設定_—_j-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/58057d5a-23cc-a438-5233-c745ad80887f.png)

1. 下記のようになっていることを確認して設定を閉じる。

    ![設定_—_j-project.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/2294bc1f-0581-21cc-22c4-acb496d0bcd5.png)

1. 正常にブレークポイントを設定できようになった。使用中になぜ設定が変わってしまったんだろう。。。
Django-Rest-Frameworkでフォロー機能を作りたい

Django-Rest-Frameworkでフォロー機能を実装したいと思います。

# フォロー機能を実装したい(api)
SNSサイトによくあるフォロー機能の実装するための手順

```models.py
class CustomUser(AbstractBaseUser, PermissionsMixin):
    user_id = models.AutoField(primary_key=True, verbose_name="ユーザーID")
    username = models.CharField(max_length=20, verbose_name='ユーザー名', unique=True)
    email = models.EmailField('メールアドレス')
    prof_img = models.ImageField(upload_to='user/', verbose_name='プロフィール画像', null=True, blank=True, default='user/default.png')
    intro = models.TextField(verbose_name='自己紹介', max_length=300, null=True, blank=True)
    univ_name = models.CharField(verbose_name='大学名', max_length=30)
    major = models.CharField(verbose_name='学部・学科・専攻', max_length=50, null=True, blank=True)
    created_at = models.DateTimeField(auto_now_add=True)

class UserFollowing(models.Model):
    relation_id = models.AutoField(primary_key=True, verbose_name="関係ID")
    # フォローした人のid
    user_id = models.ForeignKey(CustomUser, related_name="following", on_delete=models.CASCADE)
    # フォローされた人のid
    following_user_id = models.ForeignKey(CustomUser, related_name="followers", on_delete=models.CASCADE)
    # フォローした日時を表示
    created = models.DateTimeField(auto_now_add=True)

```
一応CustomUserも載せておきますそこはなんでもいいです。
大事なのはその次のUserFollowingのクラスで、これはCustomUserとは別で作成します。

```serializers.py
class FollowingSerializer(serializers.ModelSerializer):

    class Meta:
        model = UserFollowing
        fields = ("relation_id", "following_user_id", "created")

class FollowersSerializer(serializers.ModelSerializer):
    class Meta:
        model = UserFollowing
        fields = ("relation_id", "user_id", "created")

class UserSerializer(serializers.ModelSerializer):
    following = serializers.SerializerMethodField()
    followers = serializers.SerializerMethodField()

    class Meta:
        model = CustomUser
        fields = ('user_id', 'username', 'email', 'prof_img', 'intro', 'univ_name',
                'major', 'following', "followers",)

    def get_following(self, obj):
        return FollowingSerializer(obj.following.all(), many=True).data

    def get_followers(self, obj):
        return FollowersSerializer(obj.followers.all(), many=True).data

```
シリアライザについて、フォローとフォロワーは別々でシリアライザは作成します。

で、それだけではなくUserSerializerについても少し工夫を加える必要があります。
## serializers.SerializerMethodField()ってなに？
結論から言うとシリアライザのフィールドの値を動的に決めるための関数です。

UserSerializerを見てみると、modelにはなかった'following'と'followers'があることがわかります。

この値を決めるためにこのメソッドを定義します。

値の決め方については、その下にある、get_{フィールド名}関数を用います。この関数の返り値がそれぞれのフィールドに入ります。

```views.py
class UserFollowingViewSet(viewsets.ModelViewSet):
    permission_classes = (IsAuthenticatedOrReadOnly,)
    serializer_class = FollowingSerializer
    queryset = UserFollowing.objects.all()

```
これで一応apiは完成です。
Angularのリバースプロキシの設定

設定する上で[公式ドキュメント](https://angular.jp/guide/build#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%B8%E3%81%AE%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7)が大いに参考になります。

#Angularのリバースプロキシを設定していく



サーバーサイドとクライアントサイドを別々のlocalhostで立ち上げるとポート番号が異なります。
例)
クライアントサイド : http://localhost:4200
サーバーサイド : http://localhost:8080

異なるポートからのアクセスはCORSエラーとなり拒否されます。
そこでローカルで開発する場合は、リバースプロキシを設定しクライアントサイドからの特定のURLをサーバーサイドに合わせることで(書き換えることで)回避できます。

##proxy.conf.jsonの作成
proxy.conf.json ファイルを、 package.json と同じディレクトリにある src/ フォルダの中に作成します。
src/
├app
├assets
├この中<---
ターミナルからなら以下のコマンドで作成できます。

``` 
touch proxy.conf.json
````
proxy.conf.jsonには以下の内容を記述します。

```
{
  "/app": {
    "target": "http://localhost:8080",
    "secure": false,
    "pathRewrite": {
      "^/app": ""
    },
    "logLevel": "debug"
  }
}
```
内容は`localhot:4200/app/*`にきたアクセスは全て`localhost:8080/*`となります。
分かりやすいように例を出します。
`localhost:4200/app/api/login`が要求されるとプロキシ設定により
`localhost:8080/api/login`に書き換えられ、サーバーに飛んでいきます。

##CLI設定ファイルの変更
CLI設定ファイルangular.jsonの中で, serveターゲットにproxyConfigオプションを追加します

```
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json" //ここに追加
    },
```
##ローカルサーバーの起動
あとは通常通りサーバーサイドとクライアントサイドのローカルサーバーを立ち上げます。
今回自分はGo/Echoを使っているので以下になります.

```golang
go run main.go
```

```nginx
ng serve --open
```

##参考資料
[Angular公式ドキュメント](https://angular.jp/guide/build#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%B8%E3%81%AE%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7)
作成済のAmazon WorkSpacesのパブリックIPの探し方

定期的に忘れてパニクるので、衝動的にメモ。

1. WorkSpacesコンソールから、プライベートIPをコピーする。
2. EC2コンソール>ネットワークインターフェイスに進む。
3. 上部の検索窓にプライベートIPを入力してフィルタリングし、該当するENIをみつける。
4. ENIの詳細画面から、パブリックIP/DNSを探す。

ENIの管理画面が、VPCコンソールではなくEC2コンソールにあるのが罠。

### ちなみに:ENIとは
Elastic Network Interfaceの略。
https://qiita.com/TaigoKuriyama/items/a1fcbadd10fa7ba41a04
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-eni.html

ひとことでいうと、仮想ネットワークカード (NIC) 的なもの。
EC2などにも自動で生成されて割り当てられている。
[Ruby] 配列の中から数字を探せ

##一言
最近なぜか忙しい・・・。
仕事はそんなに多くないが・・・。
なぜか
契約切れるから引っ越し準備してたら事務所も引っ越して・・・。
なんてタイミング

ということで本題
標題的に何か、眼鏡をかけた赤と白のボーダーの服を着ている人を連想させますが・・・。

##配列の中から任意の数字を探せ

今日も朝学習で前にもやった課題にチャレンジ（2回目）

>array=[1,3,5,6,9,10,13,20,26,31]
※出力例：
検索したい数字を入力してください
5　 5は配列の2番目に存在します 
7 　7は配列内に存在しません

こんな感じで出せと
ちょっと忘れててわからず解説見てしまいました。
真ん中のデータを取り出して、左右で大小の比較、それを繰り返し処理で範囲を絞っていって最終的にどの数字かを当てていくやり方。
所謂、二分探索（バイナリーサーチ）というやつ

で、恥ずかしながら昨日あげた記事にコメントいただいた内容で初めて知った言葉で「線形探索（リニアサーチ）」なる言葉をご教授いただき、このやり方でやってみようと思い投稿しました。

```ruby
def linear_search(array, num)
  array.each_with_index do |n, index|
    if n == num
      return index
    end
  end
  return
end
array=[1,3,5,6,9,10,13,20,26,31]

puts "検索したい数字を入力してください"
num = gets.to_i

result = linear_search(array, num)

if result.nil?
  puts "#{num}は配列内に存在しません"
else
  puts "#{num}は配列の#{result+1}番目に存在します "
end

※コメントにてご指摘いただいた内容、修正済み

```

これで同じような出力結果が出せました。
線形探索などの言葉は意識してなかったですが、いつもやってるような感じだったのでこっちの方が個人的にはやりやすかった。

めでたし
盛り盛り nc

## nc
TCP/UDPの調査とかに使うらしい

## 何に利用した？
tcpdumpの動作確認  

普通の使い方は知らんし想像もできん  

## 何が出来るの？
TCP/UDPのポートを指定して読み書きが出来る  
もっと色々出来るが、どうせ忘れるので知らないでおく  

## 操作ログ
### 1. ポートをlisten
```
$ nc -l 54321
```

### 2. リッスンの確認
```
$ lsof -i:54321
```

### 3. 接続
```
$ telnet 127.0.0.1 54321
```

### 4. 接続の確認
```
$ lsof -i:54321
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
nc      12415 qon    3u  IPv4 0x4fcf6657625b83a1      0t0  TCP *:54321 (LISTEN)
nc      12415 qon    4u  IPv4 0x4fcf665773bce079      0t0  TCP localhost:54321->localhost:50191 (ESTABLISHED)
telnet  12420 qon    3u  IPv4 0x4fcf6657756dde89      0t0  TCP localhost:50191->localhost:54321 (ESTABLISHED)
```

### 所感
どのサイトもスイスアーミーナイフに例えているけど、何それ使ったことない
[React]ドラッグでリサイズできるコンポーネントを作る

react-rndを使いましょう。
以下の記事を参考に。
https://medium.com/ruffnote/react-rnd%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E3%81%90%E3%82%8A%E3%81%90%E3%82%8A%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B-781c59a6ee83

##ポイント

- 親コンポーネントにrelativeを追加
- 画面の半分にしたいときは以下のように指定

```
x: document.documentElement.offsetWidth / 2
```
RSpecのテスト中にMySQL client is not connected

# 開発環境
macOS Catalina 10.15.7
Ruby on Rails 6.0.0
RSpec 4.0.1
pry rails 0.3.9
FactoryBot 6.1.0

## エラー内容

```zsh:console
Failure/Error: _query(sql, @query_options.merge(options))
      
ActiveRecord::StatementInvalid:
  Mysql2::Error: MySQL client is not connected
```
どうやらMySQLクライアントとの接続が確立できていないようだ。

> 定義を見る限り、client が初期化されているにも関わらず、network socket (file descriptor) が無効な状態だとこのエラーになるみたいですね。
> [Mysql2 の "MySQL client is not connected" について](https://abicky.net/2017/09/17/014241/)

## 検証
![テスト結果](https://gyazo.com/5336b70e201b370796d58a7a50a309f1.png)
テストの実行結果を見ると、途中まではテストが成功しているため、ひとまず`binding.pry`で処理を止めながらテスト内容を確認してみたところ、なぜかすべてのテストが成功した。

```zsh:console
Finished in 16.16 seconds (files took 2.21 seconds to load)
15 examples, 0 failures
```

## 仮説
FactoryBotのインスタンス生成の記述を増やしたタイミングでエラーがエラーが発生しはじめたため、ここで負荷がかかって処理が止まった可能性があると考えた。

## 対処法1
インスタンスを生成するタイミングで`sleep`で処理を待機させることにした。

```ruby
RSpec.describe OrderItem, type: :model do
  describe '購入情報の保存' do
    before do
      @user = FactoryBot.create(:user)
      @item = FactoryBot.create(:item)
      @order_item = FactoryBot.build(:order_item)
      sleep 0.1 # 0.1秒待機
    end
# 省略
```

## 結果
エラーを吐かずにテストが安定して成功するようになった。

## 対処法2
`config/environments/test.rb`に以下の記述をすることでも対処出来た。

```ruby:config/environments/test.rb
Rails.application.configure do
  config.active_job.queue_adapter = :inline
# 省略
end
```



### 参考リンク
- [Mysql2 の "MySQL client is not connected" について](https://abicky.net/2017/09/17/014241/)
- [Rubyでsleepを使う方法【初心者向け】](https://techacademy.jp/magazine/18813)
- [Mysql2::Error: # MySQL client is not connected — Rails 6.0.2.2 with rspec; Ruby 2.6.4 mac os Catalina + Mojave
] (https://stackoverflow.com/questions/60919107/mysql2error-mysql-client-is-not-connected-rails-6-0-2-2-with-rspec-ruby)
OpenChain Spec v2.1の紹介 第7回 / Introduction to OpenChain Specification v2.1 Section 3.6

みなさんこんにちは。日立製作所の今田と申します。本日は、OpenChain仕様の紹介の最終回として、セクション3.6を紹介します。この記事は、日立製作所としての公式見解を示すものではなく、執筆者個人の見解をまとめたものです。また、この記事には仕様の日本語訳を一部含みますが、これも執筆者が読者の参考のために提供するものであり、公式な翻訳ではありません。

## 3.6 Adherence to the specification requirements

このセクションは、仕様の要求事項の遵守について規定しています。二つのサブセクション 3.6.1 と 3.6.2 からなります。順に見ていきましょう。

### 3.6.1 Conformance

In order for a program to be deemed OpenChain conformant, the organization shall affirm that the program satisfies the requirements presented in this document.

あるオープンソース コンプライアンス プログラムがOpenChainに適合しているとみなされるためには、その組織は、そのプログラムがOpenChain仕様に規定されている要求事項を満足していることを確認できなければなりません。そのために、この項目では次のエビデンスが存在していることが求められます。

Verification material(s):
3.6.1.1 A document affirming the program specified in §3.1.4 satisfies all the requirements of this document.

エビデンス：
§3.1.4 (プログラムのスコープ) で規定されるプログラムが、OpenChain仕様のすべての要求事項を満足していることを確認しているドキュメント

Rationale:
To ensure that if an organization declares that it has a program that is OpenChain conforming, that such program has met all the requirements of this document. The mere meeting of a subset of these requirements is not considered sufficient.

論拠：
もし、ある組織のオープンソース コンプライアンス プログラムがOpenChainに適合していることを宣言するなら、そのプログラムはこの仕様のすべての要求事項を満たしていなければなりません。単に一部の要求事項を満たしているだけでは、不十分とみなされます。

### 3.6.2 Duration

A program that is OpenChain conformant with this version of the specification shall last 18 months from the date conformance validation was obtained. The conformance validation registration procedure can be found on the OpenChain project's website.

オープンソース コンプライアンス プログラムのOpenChainへの適合は、適合の確認が得られた日から18か月間継続します。適合の確認の登録手順は、OpenChain Projectのウェブサイトをご覧ください。この項目では次のエビデンスが存在していることが求められます。

Verification material(s):
3.6.2.1 A document affirming the program meets all the requirements of this document, within the past 18 months of obtaining conformance validation.

エビデンス：
そのプログラムが、適合確認の取得から過去18か月間以内に、この仕様のすべての要求事項に適合していることを確認しているドキュメント

Rationale:
It is important for a program to remain current with the specification if an organization wants to assert conformance over time. This requirement ensures that the program's supporting processes and controls do not erode if an organization continues to assert program conformance over time.

論拠：
ある組織が、長い期間にわたって仕様への適合を主張するなら、そのプログラムの仕様への適合が常に最新の状態を保つことが重要です。この要求事項は、そのプログラムのプロセスや管理が長期間にわたって損なわれないことを確実にします。

## まとめ

以上見てきましたように、このセクションでは、オープンソース コンプライアンス プログラムがOpenChain仕様のすべての要求事項を満足していることを文書に残すことと、それが過去18か月間以内に行われていることを、要求事項として定めています。たとえば、要求事項の一覧と、それに対する社内のエビデンス (文書名や記載箇所など) を比較対照したチェックリストを作成し、そのチェックリストに確認の日付を記載することで達成できると思います。

また、このセクションでよくある質問が、なぜ12か月でも24か月でもなく18か月なのか？というものです。これには、理論的な最適値はありません。たとえば、よくあるプラクティスとしては、一年に一回くらいの頻度で社内でチェックを行い、プログラムの状況を確認したり改善を行っていくことではないでしょうか。これは完全に執筆者個人の見解ですが、18か月を12か月＋6か月と考え、＋6か月は日程設定の余裕度と考えることもできます。もちろん、18か月に一回のチェックでもまったく問題ありません

## 明日のテーマは

明日は、富士通株式会社の大崎さんが、OpenChain仕様適合を宣言した企業について書いてくださいます。お楽しみに!!
[Python Queue] 便利なDequeの使い方

# Queue (キュー) の基本的な操作イメージ

* 最大サイズが５のときのEnqueue & Dequeue
* 最後尾に新しい要素が追加され
* 先頭の最古要素（一番最初に追加された要素）が取り出される
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64293/e81c0942-bb3e-ed26-3582-0ae7fd456a02.png)


# 実装

* deque(Double- Ended Queue)を使用。名前通り、 両側からデータを入れたり取り出したりすることができる特殊なキュー
* キューの要素数によって処理を変えたりすることなくappendメソッドのみで、最大サイズに到達以降、先頭の要素が取り出され、最後尾に新しい要素が追加される。

```python

from collections import deque

d = deque(maxlen=5)
for i in range(1, 7):
    d.append(i)
    print(d)
```

### 出力

```
deque([1], maxlen=5)
deque([1, 2], maxlen=5)
deque([1, 2, 3], maxlen=5)
deque([1, 2, 3, 4], maxlen=5)
deque([1, 2, 3, 4, 5], maxlen=5)  <- 最大サイズに到達
deque([2, 3, 4, 5, 6], maxlen=5)  <- Enqueue & Dequeue 後
```


# 参考

* [Why is python deque initialized using the last maxlen items in an iterable? - Stack Overflow](https://stackoverflow.com/questions/19723459/why-is-python-deque-initialized-using-the-last-maxlen-items-in-an-iterable)
【MSSQL】行を列に変換するPIVOT

Select文を使い検索する際、特定列の検索結果値を列に変換したい場合はPIVOTと集計関数を使用し表現する方法があります。
※検索の際、戻り値の数は予測できない為、動的SQLを使用します。

```
DECLARE @CODECOLUMNS NVARCHAR(MAX)
DECLARE @SQL         NVARCHAR(MAX)

SET @CODECOLUMNS = ''

SELECT 
  @CODECOLUMNS = @CODECOLUMNS + '[' + gorupcd + '],'
    FROM (
         SELECT DISTINCT
				CONCAT('pe_bvcd', CONVERT(NVARCHAR(6), ROW_NUMBER() OVER(PARTITION BY pe_partname ORDER BY pe_partname), 112)) gorupcd
         FROM testinfo
       ) seq
　　ORDER BY gorupcd

SET @CODECOLUMNS = LEFT(@CODECOLUMNS, LEN(@CODECOLUMNS) - 1) 
-- カラム名を設定します。デバッグしてみる@CODECOLUMNS変数に[pe_bvcd1], [pe_bvcd2], [pe_bvcd3], ...の形で保存されていることが確認出来ます。

SET @SQL = ' 
     SELECT a.* FROM
     (SELECT *
      FROM (
	          SELECT pe_partname
                   , pe_bvcd
				   , CONCAT(''pe_bvcd'',CONVERT(NVARCHAR(6), ROW_NUMBER() OVER(PARTITION BY pe_partname ORDER BY pe_partname), 112)) AS gorupcd　--列に変換する行を指定します。
               FROM testinfo
            ) AS result
      PIVOT ( 
              MIN(pe_bvcd) --表現したい値
              FOR gorupcd IN (' + @CODECOLUMNS + ') 　--PIVOT文の中で列に変換する行のカラム名へ@CODECOLUMNS変数の値をセットします。
            ) AS pivot_result
	 ) a
'

EXEC(@SQL)
```
Ubuntu 18.04.05 LTSセットアップについて

Ubuntu 18.04.05 LTSのセットアップについてのメモ。

---

####準備する物
Windows搭載PC(イメージファイル書き込みに使用します)
ubuntuを導入するPC
インストールメディア用USB

---
###必要ISOファイルのダウンロード
【本家版】
[公式ミラー](http://jp.releases.ubuntu.com/bionic/) ← 実体は富山大学と同じサーバーらしいです。
[富山大学](http://ubuntutym2.u-toyama.ac.jp/ubuntu/bionic/)
[JAIST](http://ftp.jaist.ac.jp/pub/Linux/ubuntu-releases/bionic/)
[Tsukuba WIDE](http://ftp.tsukuba.wide.ad.jp/Linux/ubuntu-releases/bionic/)
[山形大学](http://ftp.yz.yamagata-u.ac.jp/pub/Linux/ubuntu/releases/bionic/)
[理化学研究所](http://ftp.riken.go.jp/Linux/ubuntu-releases/bionic/)

※日本語版Remixもありますが省きます。

![スクリーンショット (302).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/07b71d84-3822-b572-3e7f-d932157dafb5.png)
『ubuntu-18.04.5-desktop-amd64.iso』をダウンロードすればOK

---
###イメージファイル書き込みソフトの準備
Rufusなるフリーソフトを使用します。
他の人の解説もあり、結構楽に出来た印象があります。

[Rufus公式](https://rufus.ie/)

![スクリーンショット (304).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/dc213759-9a0b-9ef5-7b77-f736c27b2597.png)
赤枠部をポチっとすればダウンロード出来ます。

---
###メディアへのISOファイル書き込み

Rufusを立ち上げ → 書込デバイス選択 → 書込ISOファイル選択 → スタート
基本これで書きこみ出来ます。

![スクリーンショット (307).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607764/1dc824ce-4345-eb2f-9348-dd664c99ecda.png)

---
###PCへのubuntuインストール
[参考サイト](https://www.kkaneko.jp/tools/linux/ubuntudesktop1804.html)

os変更したPCのBiosより起動デバイス設定をUSBに変更する。
Biosへの移行キーはメーカーによって違うので注意する事。

ISOファイルを入れたUSBをセットして『Install Ubuntu』選択する。

初回インストール時(Windows → Ubuntu)は`Try Ubuntu` or `Install Ubuntu`と出ます。
今回のメモはインストールで進めます。

細かな手順は参考サイトを確認して下さい。

ただ、機械学習関係での使用目的なら日本語インストールでなく英語でインストールした方が
後々楽です。

---
###Ubuntuインストール完了後にする事
ソフトウェアのアップデートを行うか
ターミナルを立ちあげて

```
sudo apt-get update
sudo apt-get upgrade
sudo apt-get autoremove
sudo reboot
```
上記を実施すればOKです。
Autoremoveは別にやらなくても問題ないですが
アップデートした後の不要ファイルを削除する目的で実施しています。

とりあえずこれで使える様にはなります。

以上です。
ここがすごいよMattermost CLI（良い点と悪い点）

# この記事について

この記事は、[aslead Agile](https://aslead.nri.co.jp/solution/aslead_agile.html)の開発チーム「[オキザリス](https://speakerdeck.com/viva_tweet_x/huesudeyong-qi-wode-taxin-gui-timugashi-yan-wozao-rifan-sitejin-nizhi-rumadefalsewu-yu)」にて行っているアウトプット企画である
「[チーム「オキザリス」Advent Calendar](https://qiita.com/advent-calendar/2020/oxalis)」の15日目の記事です。

# Mattermost CLI って使ってますか？
Mattermost CLI というものが存在することをご存じでしょうか？
Mattermostがインストールされているサーバ上で実行することができるコマンドラインインタフェース（CLI）で、Mattermostのシステム構成を変更したり、ユーザを追加したりと様々なことをコマンドから行うことができるというものです。

でも、Mattermostのシステム構成変更とかユーザの追加なんて画面上（GUI）からできるし、コマンドなんて必要ないじゃん。
と思ったあなた、ちょっと待ってください。

Mattermost CLI ではGUIにない素晴らしい点がいくつもあるんです！
ということを語りたいと思いますのでお付き合いください。

※ Mattermost 5.27.1
※ Mattermostについては[こちら](https://aslead.nri.co.jp/products/mattermost.html)

# 前提
CLIコマンドはMattermostルートディレクトリ配下のbinディレクトリにあります。
標準だと、``/opt/mattermost/bin``にあるはずなので確認してみてください。
また、CLIコマンドはMattermostをインストールしたユーザで実行してください。

CLIの詳細は [公式ドキュメント（英語）](https://docs.mattermost.com/administration/command-line-tools.html)を参照ください。



# すごいところ①　GUIでできない操作もCLIならできる（こともある）

### 【チームを削除する】
GUIではチームを削除することができません。
でもテスト的に作成したチームや恒久的に不要で残っていると邪魔なチームなどは消したくなるのが心情です。
大丈夫、CLIならチーム削除が可能です。ぶら下がるチャンネル情報もまとめて削除してくれますよ。

####実行例
```
mattermost team delete myteam
```

####注意点
データベースから**投稿を含むすべての関連情報とともに**チーム情報が完全に削除されます。
削除するチームにぶら下がるチャンネル情報もまとめて削除してくれるため、データを綺麗にしたいときに重宝します。



### 【非公開チャンネルを公開チャンネルに変更する】
公開チャンネルを非公開チャンネルに変更するのであればGUIで簡単にできます。
しばらくオープンに会話していたけれどお金の話が増えてきたから非公開チャンネルにしよう、というシーンはよくあります。
逆に、非公開チャンネルで会話してたけれど特に機密事項もないし、むしろみんなと共有したほうが良いから公開チャンネルにしようというシーンもまあまあありそうですが、画面から変更することはできません。
でも大丈夫、CLIならそんなシーンにもバッチリ対応できます。

####実行例
```
mattermost channel modify myteam:mychannel --username myusername --private
```


# すごいところ②　CLIならデータ投入も簡単にできる
チームを作って、チャンネルを作って、ユーザを追加して。
数が少なければ対して苦にならない作業も大量のデータとなれば話は別。
ユーザを50名追加、、、GUIでちまちまやってられません。
でも大丈夫、CLIでなら（少しは）簡単に追加することができます。

####実行例
```
# チームの作成
team create --name mynewteam --display_name "My New Team"

# チャンネルの作成
mattermost channel create --team myteam --name mynewchannel --display_name "My New Channel"

# ユーザの追加
mattermost user create --email user@example.com --username userexample --password Password1
```


# すごいところ③　操作が簡単に正確に再現できる
Mattermostへのシステム構成の変更やチーム・チャンネルなどのデータ作成。
別の環境へも同じ操作をしたいことはよくあります。
例えばローカルで実施した操作をテスト環境でも行いたい、など。
GUIでは例えば設定手順書などを準備し、それをチェックしながら作業を進めていくことになります。
でも、目視チェックが入る人手の作業ではミスも起こりやすいですよね。
大丈夫、CLIでなら１度実行したコマンドをそのままほかの環境で実行するだけなのでミスも起こりません！（きっと）

####ポイント
コマンドはテキストなどで保存しておきましょう。

# すごいところ④　コマンド生成用ツールも簡単にできる
ツールというか、、、Excelの文字列連結を使って簡易的なコマンド生成用のファイルを作成することができます。
例えばExcelでユーザリストを作っておきます。
そのリストのセル値を使って数式を駆使すれば簡単にユーザ登録用ファイルの出来上がりです。（背景色黄色部分に数式を埋め込んでます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857467/1de59ca6-d94f-e5d5-b6dc-bdc0844bdd6e.png)


# つらいところ　Linuxコマンドが使えないとつらい
そもそも論になりますが、サーバ上で作業するためにはLinuxコマンドの知識が必須になります。
また、サーバ上での作業のため権限の問題など、作業できる人が限られるというのが実情でしょう。
とはいえこの記事を最後まで読んでくれている方は上記問題をクリアされてる方だと思うので大丈夫ですね。


# おわりに
GUIで簡単にシステム構成を操作したりすることができるけど、CLIにもCLIの良さがあることが伝わったでしょうか？
「〇〇したいけど画面上からできない」といった場合でもすぐに諦めず、そっと公式ドキュメントを開いてみましょう。もしかしたらやりたいことがCLIならできるかもしれません。
公式ドキュメントは英語ですがブラウザの翻訳機能を使えば怖くありません。
いろいろとMattermostの可能性を探ってみてください。
MacでVisualVMを使う方法

## この記事は？
- MacでVisualVMを使うのに情報があまりなかったので備忘です。


## インストール方法
- [ダウンロードページ](https://visualvm.github.io/download.html)からzipでダウンロードして解凍する
    - 'macOS Application Bundle' というリンクからもダウンロードしてアプリをインストールすることができるが残念ながら起動することができなかった（やり方が悪い可能性大）

## 実行方法
- `/bin/visualvm` を実行する
- 実行する際に`--jdkhome`を指定する必要あり

```bash
# $JAVA_HOMEは/Users/user_name/.sdkman/candidates/java/currentとして設定している
./bin/visualvm --jdkhome $JAVA_HOME
```

- コマンドを実行したらアプリが立ち上がるので、Local下に表示されるpidから確認したいものをクリックする
Pythonで学ぶアルゴリズム　第1弾：FizzBuzz問題

# #Pythonで学ぶアルゴリズム< FizzBuzz問題 >#

##はじめに
基本的なアルゴリズムをPythonで実装し，アルゴリズムの理解を深める．
その第１弾としてFizzBuzz問題を扱う．

##FizzBuzz問題とは？
ある連続した数字を順に表示していく中で，3の倍数ならば「Fizz」，5の倍数ならば「Buzz」，3と5の両方の倍数ならば「FizzBuzz」を数字の代わりに表示するというものである．
簡単そうではあるが，細かいところまで見ていくためにも一度実際に実装をしてみる．
今回は1~100のFizzBuzz問題を扱う．

##実装コード

```python:FizzBuzz
"""
2020/12/15
@Yuya Shimizu

FizzBuzz
1~100までの数字を順番に表示していき，3で割り切れるものはFizz，
5で割り切れるものはBuzz，3でも5でも割り切れるものはFizzBuzzと表示する
"""
# FizzBuzz
for i in range(1, 101):
    # 一般に特殊な場合から記述した方が見やすくなる
    if (i%3==0) and (i%5==0):
        print('FizzBuzz', end=' ') # printの引数としてend = ' 'とすれば，改行せずに空白をあけて表示してくれる
    elif i%3==0:
        print('Fizz', end=' ')
    elif i%5==0:
        print('Buzz', end=' ')
    else:
        print(i, end=' ')
```

##実装結果
実装コードのコメントにも記述しているが，printの引数としてend = ' 'とすれば，改行せずに空白をあけて表示してくれる．

```
1 2 Fizz 4 Buzz Fizz 7 8 Fizz Buzz 11 Fizz 13 14 FizzBuzz 16 17 Fizz 19 Buzz Fizz 22 23 Fizz Buzz 26 Fizz 28 29 FizzBuzz 31 32 Fizz 34 Buzz Fizz 37 38 Fizz Buzz 41 Fizz 43 44 FizzBuzz 46 47 Fizz 49 Buzz Fizz 52 53 Fizz Buzz 56 Fizz 58 59 FizzBuzz 61 62 Fizz 64 Buzz Fizz 67 68 Fizz Buzz 71 Fizz 73 74 FizzBuzz 76 77 Fizz 79 Buzz Fizz 82 83 Fizz Buzz 86 Fizz 88 89 FizzBuzz 91 92 Fizz 94 Buzz Fizz 97 98 Fizz Buzz 
```
確かに，3の倍数ならば「Fizz」，5の倍数ならば「Buzz」，3と5の両方の倍数ならば「FizzBuzz」を数字の代わりに表示していることが分かる．

##感想
今までよく使ってきていたprintの引数にend = ' 'とするだけでprintを複数使ったときの自動改行をさせずに，空白をあけて表示することができることは知らなかった．知れて良かった．
また，特殊な場合を優先して条件を組まなければならないことも再確認できた．

##参考文献
Pythonで始めるアルゴリズム入門　伝統的なアルゴリズムで学ぶ定石と計算量
　　　　　　　　　　　　　　　　　　　　　　　　 増井 敏克　著　　翔泳社
docker環境でlaravel/Duskをインストール(laravel6)

煮詰まっちゃったんで記事に残しておきます

#前提条件
simotarooさんの[絶対に失敗しないDockerでLaravel+Vueの実行環境（LEMP環境）を構築する方法](URL:https://qiita.com/shimotaroo/items/29f7878b01ee4b99b951)、もしくはdockerにてlaravel,PHPの環境構築済みの方

#環境
mac

docker (LEMP環境)





#構築方法

任意のdockerfileに以下を追加しbuildし直す
※僕はsimotarooさんの記事を参考にして構築したためphpのdockerfileに記述しました

```dockerfile:dockerfile
RUN apt-get -y install libzip-dev
RUN docker-php-ext-install zip


RUN apt-get -y install libnss3
RUN apt-get -y install libasound2-data  libasound2 xdg-utils
RUN apt install sudo
RUN apt-get install -y wget
RUN apt-get install -y gnupg2

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
RUN sudo apt update
RUN sudo apt-get install -y google-chrome-stable
RUN apt-get install -y fonts-ipafont 

```

.envのAPP_URLを書き換え

```:.env
APP_URL = http://localhost　を

APP_URL=http://127.0.0.1:8000 に書き換え

```

tests/DuskTestCase.phpを書き換え

```php:tests/DuskTestCase.php
    protected function driver()
    {
        $options = (new ChromeOptions)->addArguments([
            '--no-sandbox',
            '--disable-gpu',
            '--headless',
            '--window-size=1920,1080',
            '--lang=ja_JP',
        ]);
```

インストール後プロジェクト内で

```
composer require --dev laravel/dusk:
artisan dusk:install
php artisan serve
```

そんでテスト実行

```
php artisan dusk
PHPUnit 8.5.8 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 11.2 seconds, Memory: 24.00 MB

OK (1 test, 1 assertion)
```
成功したら無事完成です
Unity – UnityHubで「ライセンスサーバーへの接続に失敗しました」と表示される。

UnityHub > ライセンス管理 > 新規ライセンスでProを選択＋シリアル番号を入力したあと[実行]ボタンを押したら「ライセンスサーバーへの接続に失敗しました」と表示される。

何回やっても、時間をおいても、PC再起動しても起こる。その場合以下の
C:\ProgramData\Unity\Unity_lic.ulf
ファイルを消して再度ライセンス認証をするとうまくいく場合がある。
WordPressで投稿編集画面のカテゴリー欄をカスタマイズする

ワードプレスのテーマtwentytwentyを基盤に、投稿編集画面のカテゴリー欄の表示をカスタマイズする実装をしたので、備忘録的にこの記事を残す。

# 環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwenty

# 「よく使うもの」と「新規カテゴリーを追加」を非表示

「よく使うもの」タブと「新規カテゴリーを追加」リンクを同時に非表示にする方法をまず紹介します。

```functions.php
// カテゴリーの「よく使うもの」と「新規カテゴリーを追加」を非表示
function my_admin_style() {
    echo '<style>
    div.categorydiv li.hide-if-no-js{
        display:none;
    }
    div.wp-hidden-children a.hide-if-no-js{
        display:none;
    }
    </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');
```

div.categorydiv li.hide-if-no-js で囲まれた部分が「よく使うもの」、div.wp-hidden-children a.hide-if-no-js で囲まれた部分が「新規カテゴリーを追加」をそれぞれ非表示にする内容です。使われる際は実装したい内容に合わせて適宜変更してください。

# カテゴリーの選択を一つのみにする

カテゴリーで選択できるものを一つだけにする方法を紹介します。

```functions.php
function category_one_select() {
?>
    <script type="text/javascript">
        jQuery(function($) {
            // 投稿画面のカテゴリー選択を制限
            var categorydiv = $( '#categorydiv input[type=checkbox]' );
            categorydiv.click( function() {
                $(this).parents( '#categorydiv' ).find( 'input[type=checkbox]' ).attr('checked', false);
                $(this).attr( 'checked', true );
            });
            // クイック編集のカテゴリー選択を制限
            var inline_edit_col_center = $( '.inline-edit-col-center input[type=checkbox]' );
            inline_edit_col_center.click( function() {
                $(this).parents( '.inline-edit-col-center' ).find( 'input[type=checkbox]' ).attr( 'checked', false );
                $(this).attr( 'checked', true );
            });
        });
    </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'category_one_select' );

//タクソノミー選択画面で一つだけしか選択できないようにする（ラジオボタン）。
function select_to_radio_topic_category() {
    ?>
    <script type="text/javascript">
    jQuery( function( $ ) {
        // 投稿画面
        $( '#taxonomy-topic_category input[type=checkbox]' ).each( function() {
            $( this ).replaceWith( $( this ).clone().attr( 'type', 'radio' ) );
        } );

        // 一覧画面
        var topic_category_checklist = $( '.topic_category-checklist input[type=checkbox]' );
        topic_category_checklist.click( function() {
            $( this ).parents( '.topic_category-checklist' ).find( ' input[type=checkbox]' ).attr( 'checked', false );
            $( this ).attr( 'checked', true );
        } );
    } );
    </script>
    <?php
}
add_action( 'admin_print_footer_scripts', 'select_to_radio_topic_category' );

```

今回は投稿編集画面とクイック編集画面の両方でこの機能が実装されるように処理をまとめています。使われる際は実装したい内容に合わせて適宜変更してください。
authenticateメゾットについて。

```
user = User.find_by(email: params[:session][:email].downcase)
    if user && user.authenticate(params[:session][:password])
```
user.authenticate(password)で
合っていればユーザーの情報を出す。
間違っていれば、falseを返すメゾット。

主にログイン等に使われる。

 ```
if user && user.authenticate(params[:session][:password])
```
この文は&&の論理積（and）はnilとfalse以外は
Rubyではnilとfalse以外のすべてのオブジェクトは、真偽値ではtrueになるという性質を利用して、ログインできるかできないかをif文を使って実行している。

真偽値についての理解が浅かったため理解するのに時間がかかった。。。
【Spring Dtata JPA】 Spring Bootで、単一のスレッドでAPIを同期的に処理したい場合に、DBの変更を検知できない問題の対応方法



## 【課題】 
### EntityManagerの対象外（別スレッドやDB直叩き等）からDBが更新された場合、その更新されたレコードの状態を取得できない


単一スレッド内で、DBの更新を行った後に、更新されたTBLを取得した場合はその状態を取得できる
それ以外の場所（別スレッドやDB直叩き）でDBが更新された後に更新されたTBLを取得しても、最新の情報を取ることができない

例えば以下のような例の場合...


```
1. あるスレッドでsaveAndFlushでレコード作成/更新
2. 同一スレッドで、状態監視するためのDB取得処理をloop
3. 別スレッド/別サービス等で該当のレコードを更新
4. loopでDBの変更を検知したら何らかの処理を行う ★ここでDB検索をかけても、更新された最新のDBのデータが取得できない
```

## 【原因】
saveAndFlushした際に、EntityManagerの永続化コンテクストにEntityが登録され、そのEntityはJPA標準の仕様でスレッドが終了するまでキャッシュされた状態となる
外部でDBの更新が行われても、EntityManagerはそれを検知しない。つまりキャッシュが残っている状態で検索しても、キャッシュした状態でのDBの値しか取得できない

## 【対策】
Entityのキャッシュを直接clearまたはdetachし、その後にDB検索を実行するとコミット後のDBのデータが取得可能
（最初からcacheを持たないようにする設定もできるようだが、、標準仕様を無効化する必要性は低いかも）
以下のような処理を、repositoryで検索する前などに実行する必要がある

```java
	// EntityManagerをDI
	@PersistenceContext
	EntityManager entityManager;

	public void clearEntityCache() {
		// 共通処理としてキャッシュをクリアするため、detach()ではなくclear()を使う.
		entityManager.clear();
	}

```

参考：
- http://itdoc.hitachi.co.jp/manuals/link/cosmi_v0870/APKC/EU070319.HTM
- https://gloryof.hatenablog.com/entry/20120922/1348299856
iOS プッシュ通知の実装に必要な「p12形式の証明書」と「 p8形式の鍵」について

#はじめに
私はプッシュ通知のためのMBaaS（mobile backend as a Service）はFirebaseしか使った事がありません。。
なので、基本的にこの記事で書く内容は、Firebase Cloud Messagingを使う事を前提としています！

あらかじめご了承を:grinning:

#iOSでプッシュ通知を使うために必要なファイルは２種類ある
iOSアプリのPush通知を実現するには、**APNs（Apple Push Notification Service）**と連携する必要があります。

で、APNsを利用する際には、認証のために証明書やトークンが必要です。

![スクリーンショット 2020-12-15 12.56.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/1789a9d6-15f0-b2eb-af33-6455aef62d95.png)
https://developer.apple.com/documentation/usernotifications/setting_up_a_remote_notification_server

APNsを利用する際に必要な認証方法が実は２種類あるため、初めて調べた人は非常に混乱するのではないだろか？？:sweat:


２種類の認証方法というのがタイトルにもある「p12形式の証明書」と「p8形式の鍵」の事です。

#「p12形式の証明書」と「p8形式の鍵」の違い
それぞれの特徴をまとめてみました！

##p12
・ファイル取得までの道のりが長くて複雑
・有効期限は１年で、毎年更新する必要がある
・App ID単位で管理ができる
・開発環境・本番環境と区別ができる
・古いやり方
・何度でもダウンロードできる

##p8
・ファイル取得までの道のりが短くて簡単
・有効期限は無期限
・App ID単位で管理ができない（Apple IDが保有している全てのアプリで使える）
・開発環境・本番環境と区別がない
・新しいやり方（Firebaseではp8が推奨されている）
・**同じkeyは１度しかダウンロードできない**
・**Apple IDのApple Developer Programに対して、2つまでしか認証キーが発行できない**

###補足
**p8 keyは「１度しかダウンロードできない」となっていますが、これは「１度失ったら２度とプッシュ通知を使えない」というわけではありません。**
>Remember to keep the key file safely as you can only download it once, if you lost the key file, you will need to revoke and it and register a new one.
https://fluffy.es/p8-push-notification/

>ダウンロードできるのは1回だけなので、キーファイルを安全に保管することを忘れないでください。キーファイルを紛失した場合は、キーファイルを取り消して新しいファイルを登録する必要があります。

同じkeyをダウンロードできるのが１回だけ、という意味で、もし無くしたら現在有効になっているp8 keyを取り消して**（Revoke）**、再び新しいものを作成してダウンロードすればOKという事です！
![スクリーンショット 2020-12-15 14.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/4668c73d-b6cc-76a4-b183-7840f56d0bb9.png)
https://firebase.google.com/docs/cloud-messaging/ios/certs




#「p12形式の証明書」の取得方法
[プッシュ通知に必要な証明書の作り方2020](https://qiita.com/natsumo/items/d5cc1d0be427ca3af1cb#7-apns用証明書p12-の作成)

#「p8形式の鍵」の取得方法
使われてる画像は古いですが、参考になるかと
[お手軽firebaseプッシュ通知証明書作成メモ](https://qiita.com/matsuyoro/items/77408e5d09ef00be8577)

英語でもいいならこちらが新しい
[.p8 Key File For Push Notification](https://mobikul.com/p8-key-file-for-push-notification/)

#最後に
「どっちが良いか？」を一概に決めることはできず、どちらも一長一短という感じ。。。

ただ、p8が新しいやり方なので、時代が進むとそっちが主流になりそうではある。

**もしp8 keyを紛失したら？については下記を参考に:point_down:**
[iOS - What happens I lost my APNs Key file?](https://stackoverflow.com/questions/48825962/ios-what-happens-i-lost-my-apns-key-file)
軽く要約しますと
①[ Apple Developer Member Center](https://developer.apple.com/membercenter/index.action)で新しいp8 keyを作成（もし既に2つ認証keyを作成していた場合、無くした方を**Revoke**する）
②Firebaseなどのサーバー側で無くしたp8 keyを削除して、新しいp8 keyを登録




#参考
https://takamii.hatenablog.com/entry/2020/07/13/190027
Ubuntu20.04でペネストレーション環境を作ろうとして挫折した話

最近、新しいことしてないな〜と思って、始めた次第です。

結論、Mac使いはMacで、Win使いはWinでやった方が早い。

今回はLinuxを学ぶことがメインではないので、Macに切り替えました。

## 手順

1. vagrant/virtualboxの導入
    - `brew install vagrant`
    - `brew cask install virtualbox`
2. vagrant boxにadd
    - `vagrant box add rapid7/metasploitable3-win2k8`
    - providerを要求されたら`virturalbox`を選択
3. `~/.vagrant.d/boxes/`にaddしたmetasploitable3があるので、適当な場所にcp
    - `cp -R ~/.vagrant.d/metasploitable3 任意の場所`
4. virtualbox起動
5. virtualbox設定
    - ファイル -> 仮想アプライアンスのインポート -> cpした先のDir配下のbox.ovf
    - インポート押下前に「MACアドレスのポリシー」を「すべてのネットワークアダプターでMAXアドレスを作成」
    - インポート後、設定アイコン押下し、下記の設定をする
        - ディスプレイタブ
            - ビデオメモリー:128MB
        - ストレージたぶ
            - 光学ドライブの追加アイコン押下->空のままにするで追加
6. metasploitabel3を起動
    - 起動後は`CTRL + ALT + DELETE`でログオン画面に遷移するが、macキーボードだと反応しないので、ソフトウェアキーボードを立ち上げてログオン画面を出す
7. administratorでログイン
    - パスワードはvagrant
8. ログイン後の設定
    - Explore 8ウィンドウが表示されるので、Next->No, don't turn onを選択->Next->Use express settingを選択->Finish押下->IEを閉じる->再起動要請が出るので、Restart Now押下
9. リスタート後のアクティベート
    - アクティベートウィンドウが出るとのことだったが、出なかった
        - コマンドプロンプトで`slmgr /ato`を実行
        - 成功するとポップアップが出てくるのでOK押下
10. Windows Updateを無効化
    - Start->All Programs->Windows Update
    - 開いたウィンドウの`Change Settings`を探して押下
    - Important updatesをNever check for updates(not recommendaed)にする
    - 他チェックボックスは全て無効化
    - OK押下
11. virtualboxのD&Dを双方向オンにする
12. Guest Additions CD イメージの挿入...
    - Run VBoxWindowsADditions.exe Published By Orade Corporationを選択
    - Next->Nextで出てくるウィンドウにあるChoose Componentsで`Direct3D Support(Experimental)のチェックを外す
    - Install押下->Finish押下で再起動

参考
https://www.amazon.co.jp/Kali-Linux%E3%83%93%E3%82%AE%E3%83%8A%E3%83%BC%E3%82%BA%E3%82%AC%E3%82%A4%E3%83%89%E2%85%A0-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8%E3%83%86%E3%82%B9%E3%83%88%E3%83%A9%E3%83%9C%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97-2020-2%E5%AF%BE%E5%BF%9C-%E6%B5%85%E5%B1%B1%E6%96%B0%E4%B8%80-ebook/dp/B08544DVRT/ref=pd_sbs_351_1/358-1097408-2349322?_encoding=UTF8&pd_rd_i=B08544DVRT&pd_rd_r=a4240d65-a104-461a-b466-1530ef2f2aa1&pd_rd_w=czc8s&pd_rd_wg=p1ZwC&pf_rd_p=c295905f-82f9-4d73-8142-c393a4211258&pf_rd_r=XMX4GK50DAFHT563SXSJ&psc=1&refRID=XMX4GK50DAFHT563SXSJ 5.3 Metasploitable3のインストール
Rails：modelとデータベースについてちょっとまとめてみた。

# 最初に

**カレンダー企画2020の15日目**
プログラミングの勉強を始めて3ヵ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、誤解されるような言葉があったら教えてください^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。


## モデルとデータベース（DB）についてちょっとまとめてみる

## modelとは？

モデルは[ここで簡単に説明している](https://qiita.com/yutas-8/items/51f305c3e110d2a05e88#model)

>アプリケーションのデータを取り扱う場所。データベースに対してデータの登録や取得、更新、削除などといった処理を役割として担っている。
たとえば
データベースという巨大な倉庫を管理しているイメージかな。
必要な時に必要な情報を取り出したり、しまったりしてくれる感じです。

基本的にDBとのやり取りになる。

## データベース（DB）とは？

DBはデータの保存先です。
DBのおかげでデータを効率的に保存できたり、検索できるようになっている。

>ゲームでいうところのメモリカードとかセーブデータを保存してある場所かな！
modelがゲーム機本体
今回は出てこないけど、Controllerはコントローラー
テレビ画面に表示するコードやテレビがViewになるにかな！
そんなイメージです。

railsではDBに保存されているデータを**「テーブル」**にまとめてテーブル同士が関連して保存してあります。

テーブルはデータを整頓してくれるのでデータを取り出しやすくなります。

ゲームで過去のセーブデータがゴチャゴチャな並びだったら最新のものを探すの大変じゃないですか？
そういったことをなくす為にテーブルというので関連しているもの同士をわかりやすく保存してあるのです。


## テーブルについてもう少しだけ

ブログサイトをイメージしてください。

- タイトル
- 本文
- 投稿者
- 投稿日

こんな情報があったとします。

これらをテーブルにしてみると

| ID | タイトル | 本文 | 投稿者 | 投稿日 |
|:-:|:-:|:-:|:-:|:-:|
| 1  | 初めまして  | 本日からブログを始めます  | yuta  | 12/1  |
| 2  | こんな空スゴイ  | 今朝の青空  | yuta  | 12/5  |
| 3  | 今日はどこにいるでしょう？  | 写真をみて当ててみて  | yuta  | 12/9  |
| 4  | 朝から、、、  | 黙々と仕事しています  | yuta  | 12/12  |

こんな感じになります。Excelみたいですね！でもまさにそのイメージです！！
このようにしてあると、どこがタイトルでいつ投稿したのかとか一目瞭然ですよね！これが整頓して分かりやすくするということです。


テーブルにも名前がついており、
全体の事は**テーブル**と言います。
縦列：**カラム**と言います。
横列：**レコード**と言います。

railsではテーブルが作られてデータが作られるとIDは自動生成されます。
ID1のレコードは？

| ID | タイトル | 本文 | 投稿者 | 投稿日 |
|:-:|:-:|:-:|:-:|:-:|
| 1  | 初めまして  | 本日からブログを始めます  | yuta  | 12/1  |

このテーブルのカラム名は？

| ID | タイトル | 本文 | 投稿者 | 投稿日 |
|:-:|:-:|:-:|:-:|:-:|
||||||

これになります。

タイトルカラムの中身は？

|タイトル|
|:-:|
|初めまして|
|こんな空スゴイ|
|今日はどこにいるでしょう？|
|朝から、、、|

これらが抽出されます。


DBとデータのやり取りはデータベース言語（SQL）で行われます。


## 最後に

正直カラムを理解するのが最初は大変だったことを思い出しました^^;
ここではわかるけど実際作るとあれ？とよく混乱していました。^^;
GitHubにpushするとherokuに自動デプロイする設定

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ GitHub及びherokuの基礎知識が増える
・ GitHubにpushをするとherokuに自動でデプロイを行う設定について

## 手順

① herokuの管理画面にて、GitHubと連携を行うappを選択します

![スクリーンショット 2020-12-15 14.07.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/d1180cb6-0e99-0ca2-5ff6-950a5149e5b5.png)

② Deployを選択します

![スクリーンショット 2020-12-15 14.13.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/888c3c81-8858-fee9-2430-1bfbcd26639c.png)

③ Deployment method項目にてGitHubのアイコンを選択します

![スクリーンショット 2020-12-15 14.18.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/538eb919-9d2d-4638-e4f9-1953d24c12e4.png)

④ Connect to GitHub項目にて、連携するリポジトリ名を入力してSearchを押下します

![スクリーンショット 2020-12-15 14.20.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/5761e9f3-0234-b23c-b677-5aed802016fb.png)

⑤ リポジトリ名を再度確認し、Connectを押下します

![スクリーンショット 2020-12-15 14.26.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/0e8dc312-1e46-7bab-4eea-a290dce5e4c8.png)

⑥ Automatic deploys項目にてEnable Automatic Deploysを押下し設定完了です

![スクリーンショット 2020-12-15 14.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/115bd2dc-4e92-ab22-88f7-fba5a5749186.png)

設定が完了すると、GitHubの接続状態・対象リポジトリ・どのブランチが自動デプロイの対象なのか
情報が表示されます

![スクリーンショット 2020-12-15 14.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/aa45a9bd-9702-b91a-ced6-8c04a23d0be3.png)