OmniAICreator/Qiita-1.07M huggingface dataset:
Chromiumの全バージョン一覧が欲しい

# 忙しい人へ

```bash
git -c 'versionsort.suffix=-' ls-remote --tags --sort='v:refname' https://chromium.googlesource.com/chromium/src
```
これでタグとコミットハッシュの両方が出るので、適切にこねくり回せばバージョン一覧が出る。

# 背景
youtube-dlには、[UA偽装のためにChromeのバージョン一覧を持っています。](https://github.com/ytdl-org/youtube-dl/blob/master/youtube_dl/utils.py#L90-L1666)ですが、見て頂いても分かる通り、バージョンが68〜76?と非常に古いのです。[^oldver]
Windows版のChromeであれば自動更新機能があり、この機能によって古いバージョンのChromeは比較的早く置き換えられていきます。それを考えれば、今更60番台のChromeのUAが来たら即ブロックされかねません。こういったこともあり、バージョン一覧を新しいものに交換しようと考えました。

# やったこと
最初、Chromiumのリポジトリをcloneしようとしたのですが、リポジトリ全部cloneすると23 GBにもなります。大きすぎます。[^actions]
cloneすれば`git tag -l`で全部列挙できますが、大きすぎるので諦めました。

# 結論
少し調べていると、[cloneしないでtag一覧を取得する方法がありました。](https://stackoverflow.com/questions/10649814/get-last-git-tag-from-a-remote-repo-without-cloning)
こんなコマンドになります。

```bash
git -c 'versionsort.suffix=-' ls-remote --tags --sort='v:refname' https://chromium.googlesource.com/chromium/src
```

~~というかこれって`git ls-remote`で出来たんですね...~~

出力の一例は次のようになります。

```bash
$ git -c 'versionsort.suffix=-' ls-remote --tags --sort='v:refname' https://chromium.googlesource.com/chromium/src
05197078e4761dde56f8dc8884050bf862344425        refs/tags/3.0.195.25
75894f416826f37475ca17e92f5853b0f84ac3ee        refs/tags/3.0.195.27
```

各行がtag一個を指しており、`コミットハッシュ\tタグ参照名`の形式で表示されます。[^tsv]
[これを適切に解析すれば](https://github.com/nao20010128nao/ytdl-patched/blob/master/devscripts/make_chrome_version_list.py)、23 GBを消費すること無くtag一覧を取得できます。


[^oldver]: 確かにバージョンは古いですが、これらのChromeが必要という訳ではありません。よって、これを原因として何らかの脆弱性に直結するようなことはありません。
[^actions]: GitHub Actionsで自動化したい場合、[GitHub-hosted runner](https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#about-github-hosted-runners)[では入り切りません。](https://docs.microsoft.com/ja-jp/azure/virtual-machines/dv2-dsv2-series#dsv2-series)
[^tsv]: このため、出力をそのままTSVとして使うことも可能です。知らんけど。
AWS CloudFormationのデプロイで遭遇したエラーメッセージと対処

##はじめに

AWS CloudFormationを使ってとある仮想アプライアンスを起動させようとして2つのパターンのエラーが発生してデプロイに失敗したのでその時のメモ。
※CloudFormationで使ったテンプレートのjsonファイルの書き方に問題があった等、コードの中身に言及した記事ではないです

##その1(AWS MarketPlaceでの事前準備)

###エラー画面

<img src="https://docs.google.com/drawings/d/e/2PACX-1vTS_k8HzuOfEXtRej1iPWYED0A4B7HcboqAlWXshZyywGmeBmFZbSjfnqKsICCV0tDQS7C5sr9sAThC/pub?w=696&amp;h=161">

CREATE_FAILEDとエラーメッセージが出力されている。エラー内容は以下

In order to use this AWS Marketplace product you need to accept and subscribe. To do so please visit https://aws.amazon.com/marketplace/xxxxxx

###原因

どうやらデプロイする前にAWS Marketplaceで使いたいプロダクトをSubscribeしておかないといけなかったようなので
エラーメッセージに出力されているmarketplaceのURL(デプロイ対象の仮想アプライアンスのURL)にアクセス。
以下の画面のContinue to Sbscribeと書いてあるオレンジの部分をクリック。
※今回CloudFormationで貯めそうとした製品は別製品。今回は例としてCiscoMerakiの仮想版(vMX)を選択

<img src="https://docs.google.com/drawings/d/e/2PACX-1vQvAT05KtorbZ_Cq2o2d0FYpRD26EPTmdrDcU_GBWMvbupCHY4wGawGQb9XORFnVCqaU_gEuQb-D4I1/pub?w=953&amp;h=195">

Subscribeをクリックしたら次に以下の画面のAccept Termsをクリック。

<img src="https://docs.google.com/drawings/d/e/2PACX-1vSNjPleDKBOM5CXLyiWyk50J30PkadSlmZWSliVtdZ3tJu0cs5c5FfS1I9IJIChLJlVIsPrYKzS3cFr/pub?w=745&amp;h=706">

最終的には以下のようなSubscribe to this softwareというメッセージが出力されて完了。
ここまでの工程を済ませてCloudFormationを実行すると、表示されていたエラーは発生しないようになった。

<img src="https://docs.google.com/drawings/d/e/2PACX-1vSJhkcFRSpPY0f49H_eaJkh2nLA63eAGJ0XJvj4KLZtib-fmDoxdNO1h7JK4POVcms9u9LNky7nc6j-/pub?w=579&amp;h=554">

##その2(ElasticIPを割り当てるタイミングでデプロイに失敗)

###エラー画面

<img src="https://docs.google.com/drawings/d/e/2PACX-1vSJ1EbCHOYybd5c64LFpMKAlt5zCPlRVm3OaeCuquQNIcPcFv3oiiDcyof0QgrT5JzLb-ZrbOf0PxPe/pub?w=968&amp;h=212">

エラー内容は以下

The maximum number of addresses has been reached. (Service: AmazonEC2; Status Code: 400; Error Code: AddressLimitExceeded Request ID:xxxxxx

###原因

ElasticIPアドレスの割り当て中にAddressLimitExceededのエラーメッセージが出力されデプロイに失敗したようで
この場合は未使用のElasticIPを開放してあげるか制限緩和を申請して解決をする。
自分は未使用のElasticIPを開放した後に、再度CloudFormationを実行してデプロイに成功しました。

参考URL
https://aws.amazon.com/jp/premiumsupport/knowledge-center/unlock-move-recover-troubleshoot-eip/

##最後に

今までハンズオントレーニング等でしっかり動くように作られてきたCloudFormationのテンプレートしか使ったことがなく、
自分の環境にテンプレートを合わせていくことを今回初めてやった結果、上記のエラーとどうやったら回避できるのかということを実体験することができた。

まだ大して触れているわけではないですが、ある試験項目をこなしたい場合にテンプレートを読みだして、終わったら削除するというサイクルが組めるので、CloudFormationは使いこなせるととても有意義だと実感しました。
DockerでNode-REDからPostgresに接続した

## はじめに

DockerでNode-REDコンテナからPostgresコンテナへ接続する際に少し沼った。
「ECONNREFUSED」が出てきて接続できなかった。
2か所ほど設定を間違っていたので、備忘録として。

## 状況

- Dockerで下記コンテナ間で接続を試みた
  - Node-RED
  - Postgres
- docker-compose.ymlを用いた立ち上げ

```
version: '3'
services:
    postgres:
        image: postgres
        container_name: postgres
        ports:
            - '6432:5432'
        volumes:
            - (略)
        environment:
            POSTGRES_USER: postgres
            POSTGRES_PASSWORD: *****
    nodered:
        image: nodered/node-red
        container_name: nodered
        ports:
            - '2880:1880'
        volumes:
            - (略)
```

- Node-REDのノード、設定は下記の通り
  - ノード: node-red-contrib-postgres-variable
  - Host: localhost
  - Port: 6432
  - Database: postgres
  - Username: postgres
  - Password: *****

## 解消

Node-REDのノード設定が間違っていた。

### Host

内部接続ではあるものの、ホストは`localhost`ではなく`postgres`にしなければならなかった。
コンテナ間の接続は同ネットワーク内での接続ということで、IPアドレスなどを指定するのではなく、コンテナ名を指定する必要があると思われる。
たしかに`links`のような内部接続の設定を考慮すると当然といえば当然かもしれない。
ちなみに、Postgresのコンテナ内で`hostname`コマンドを実行すると、コンテナのIDが出力される。

### Port

ポートの設定をポートフォワーディングで設定していた`6432`に設定していたが、正しくは元の`5432`を指定しなければならかった。
ポートフォワーディングはあくまで外部から接続があった場合の設定なので、同じネットワーク内にあるコンテナ間の接続では、既存のポートを設定する必要があると思われる。
そりゃそうか。

## 終わりに

Dockerでコンテナを立ち上げて作業しているということを忘れていると、このような現象に見舞われる気がする。
Dockerの基礎知識をもっと付けておかないと、よくわからないところで沼るなと改めて思った。

---

最後まで読んでいただきありがとうございます。
認識が違っている点などがあれば、ぜひご指摘ください！
（特にDockerは詳しくないので、今後誰かの助けとなるようブラッシュアップしていきたいです！）
load_documents の利用について

#背景


ドットインストールYAML講座にてYAMLのデータを記載し、Rubyファイルを実行しようとしました。

しかし、以下のエラーが発生してしまいます。

```
Traceback (most recent call last):
        2: from parse.rb:3:in `<main>'
        1: from parse.rb:3:in `open'
parse.rb:4:in `block in <main>': undefined method `load_documents' for Psych:Module (NoMethodError)
```
何やら load_documents に問題がありそうです。



#解決策

調べた結果、現在は load_documents の使用はRuby 2.5 にて廃止されており（ご指摘いただきましたので修正しました）、代わりに load_stream の使用をすればいいとのことでした。load_stream に書き換えて再度実行したらうまくできました。


#参照
参考にさせていただきました。ありがとうございます。

https://qiita.com/t_o_d/items/bd58fb798c5087f0ef1a
【CSS・SASS】display flexでcolumを使って縦に並べている時に左寄せや右寄せにする方法

`display :flex;`で`flex-direction: column;`を使って縦に並べている時に左寄せにする方法。

display flexで並べた要素を左寄せにしようと思い`justify-content: flex-start;`を付けたのに効かない時の対処法。

##解決策

左寄せの場合は`align-items: flex-start;`にする。または`align-items`を記述しない。

右寄せの場合は`align-items: flex-end;`にする。




##原因と理由
columnにするとflexboxの**中の要素の縦と横が切り替わるのではなく、flexbox全体が縦と横で切り替わる**。（90度反時計周りに回転した状態）

何が言いたいかというと、`align-items: center;`が上下方向の中央寄せから、左右方向の中央寄せになり、

`justify-content: center;`が左右方向の中央寄せから、左右方向の中央寄せになる。


また、flexboxのデフォルトは左寄せなので、`align-items`の記述をなくせば左寄せになる。




<br>
##実例
縦積みのflexboxの中の要素が中央に寄ってしまっている状態。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c25095a4-7b76-fefc-a392-5919644fbd9a.png)|
|:--|

```scss:
.main-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
```

boxの高さがなければ以下でも同じ状態になる。

```scss:
.main-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  //boxの高さがないので機能していない
  }
```

<br>
###左寄せ

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/77f77b93-470f-7360-b51f-75e0650fd687.png)|
|:--|

```scss:
.main-wrapper{
    display: flex;
    flex-direction: column;
  }
```

または

```scss:
.main-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
```


<br>
###右寄せ

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/bef84b59-019d-f1f3-27ca-d2d69b9c11d9.png)|
|:--|

```scss:
.main-wrapper{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
```


<br>
以上。
ECSにdocker compose

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/ecs-docker-compose/)

## はじめに
AWS ECSに対して、docker composeしてみます。

## 準備

### AWSのアクセスキー・シークレットキー

AWSのIAMに入って、対象のユーザの詳細画面に 認証情報タブを表示して 
[![](http://techback.info/wp-content/uploads/2021/02/img_602232f8cdc7b.png)](http://techback.info/wp-content/uploads/2021/02/img_602232f8cdc7b.png)

アクセスキーの作成ボタンをクリックして、 **アクセスキー**と**シークレットキー**をコピーしておいてください。後で使います。 
[![](http://techback.info/wp-content/uploads/2021/02/img_60223324511ee.png)](http://techback.info/wp-content/uploads/2021/02/img_60223324511ee.png)

## 手順

### contextの作成

まず、ターミナルで docker-compose.yml ファイルが有る場所に移動して、 

```
docker context create ecs <span style="color:">mycontext</span>
```

とコマンド。 ちなみに、mycontext 部分はお好みで。 すると、、 

```
<pre class="p1"><span class="s1">% docker context create ecs mycontext</span>

<span class="s2"><b>? </b></span><span class="s3"><b>Create a Docker context using:</b><span class="Apple-converted-space">  </span></span><span class="s1">[Use arrows to move, type to filter]</span>

<span class="s1"><b>> AWS secret and token credentials</b></span>

<span class="s1"><span class="Apple-converted-space">  </span>AWS environment variables</span>
```

キーボードの↑↓でカーソル移動できます。 今回は、AWS secret and token credentials の方を選択してEnter 

```
Retrieve or create AWS Access Key and Secret on https://console.aws.amazon.com/iam/home?#security_credential
? AWS Access Key ID
```

作成しておいた、Access Key とSecret Keyを貼り付けてEnter 

```
<pre class="p1">? AWS Access Key ID ****************
? Enter AWS Secret Access Key ****************************************
```

お次は、対象リージョンを選択します。 ここでは、ap-northeast-1 を選択してEnter 

```
? Region [Use arrows to move, type to filter]
> eu-north-1
ap-south-1
eu-west-3
eu-west-2
eu-west-1
ap-northeast-2
ap-northeast-1
```

無事Contextができました。 

```
Successfully created ecs context mycontext
```

lsコマンドでも確認できます。 

```
docker context ls
```

[![](http://techback.info/wp-content/uploads/2021/02/img_602235e003942.png)](http://techback.info/wp-content/uploads/2021/02/img_602235e003942.png)

### docker compose

docker composeする前に、contextを変更する必要があります。 今は、defaultのcontextが選択されている状態なので、 

```
docker context use <span style="color:">mycontext</span>
```

そして、docker composeします。 

```
docker compose up
```
React入門 - 目次

<font color="red">**2021/09/14時点の記事完成状況**</font>

<font color="red">**Part8    書きかけ**</font>
<font color="red">**Tips6    未完成**</font>


# 目次
- [React入門 - Part1 - VsCodeをインストールしてReactでHello World](https://qiita.com/yokosuka205k9/items/3929af275e1b6b0397a2)
- [React入門 - Part2 - Next.jsを使ってページ遷移を行う](https://qiita.com/yokosuka205k9/items/132fbd4129afd9b37500)
- [React入門 - Part3 - コンポーネントを書いてみる](https://qiita.com/yokowake12345/items/b9725a744246594f28b8)
- [React入門 - Part4.1 - 親子間コンポーネントへの値の受け渡し - props編](https://qiita.com/yokowake12345/items/effc82bfd0c7b13460ca)
- [React入門 - Part4.2 - 親子間コンポーネントへの値の受け渡し - useContext編](https://qiita.com/yokowake12345/items/92ac41a616321d944462)
- [React入門 - Part4.3 - 親子間コンポーネントへの値の受け渡し - Redux編](https://qiita.com/yokowake12345/items/443776233190bb4cbaa1)
- [React入門 - 演習1 - 簡易計算画面を作ってみよう](https://qiita.com/yokowake12345/items/43c5c11d37db5ff5cdd9)
- [React入門 - Part5 - jsonファイルの読み込み、表示](https://qiita.com/yokowake12345/items/4256a902940c2e673392)
- [React入門 - Part6 - apiの呼び出し、値の受け取り(axios等)](https://qiita.com/yokowake12345/items/2c7cbf34f1c69af52b83)
- [React入門 - Part7 - mockサーバを利用してみる](https://qiita.com/yokowake12345/items/1400a30c4f4f157b8d12)
- [React入門 - Part8 - hooksについて★書きかけあり](https://qiita.com/yokowake12345/items/eebdf2f54a80f6372686)
- [React入門 - Part9 - formikとyup(値の保持、バリデーション)](https://qiita.com/yokowake12345/items/672b46c0e59df4d9cb24)


#
- [React入門 - Tips1 - アロー関数](https://qiita.com/yokowake12345/items/a882d58e989f1dbbe06a)
- [React入門 - Tips2 - JSXとは](https://qiita.com/yokowake12345/items/a14fe2b7bbe28497e67a)
- [React入門 - Tips3 - スプレッド構文](https://qiita.com/yokowake12345/items/3e56ba13791ae6f91b74)
- [React入門 - Tips4 - dockerでReact環境を構築してみる](https://qiita.com/yokowake12345/items/533a9166cdc00aabe6ad)
- [React入門 - Tips5 - 無限レンダリング](https://qiita.com/yokowake12345/items/d07b768c029c6ba88deb)
- ~~[React入門 - Tips6 - hooksがあればreduxは不要？](http://google.com)~~
- [React入門 - Tips7 - immer。オブジェクト配列のクローン](https://qiita.com/yokowake12345/items/6ce6890ceb9139e126b6)
- [React入門 - Tips8 - reactstrap](https://qiita.com/yokowake12345/items/99245769ff80021d081b)
- [React入門 - Tips9 - null,undefined,空文字](https://qiita.com/yokowake12345/items/8d4e8d8b0895050cdcf7)
- [React入門 - Tips10 - useMediaQueryを使っててレスポンシブ](https://qiita.com/yokowake12345/items/563c783aefabd91ce25f)
- [React入門 - Tips11 - PrettierとEsLintを設定する](https://qiita.com/yokowake12345/items/08912796ac336ce32740) 
- [React入門 - Tips12 - React.memo, useCallback, useMemoで無駄なレンダリングを抑制](https://qiita.com/yokowake12345/items/e54d136644ea04d5da83) 


## jestも執筆しないと。。。。

このようなラインナップでやりたいと思っています。
（が、随時状況に応じ変更します。。。）

# 概要

細かいところは置いといて、Part1~Xまでサクサクっと進めることができ、React+Typescriptやその他フレームワーク、ライブラリの雰囲気をつかんでもらうことを念頭に記事を書いています。
React, next.js, axios, typescript, redux等を紹介できればいいかなと思っています。

一通りやれば、何となく全体を触ったような感じになるかと思います。
というか、それを目指します。

# 展望

[React応用](https://qiita.com/yokowake12345/items/9627ff9d7a00f05e4d31)は、まだ執筆してませんが、
目次にあるように、入門をおさらいしながら`Firebase`や`Liff(Line)`との連携などを学び、

皆で手分けして下記（今のところざっくり）のようなアプリを作りたいなと思っています。

- <font color="red">公開されているAPI（DMMとか）を使用</font>
- <font color="red">LineにReactアプリを表示して</font>
- <font color="red">Firebaseの認証処理を盛り込む</font>
WSL2上のCentOS8でsystemctlを使えるようにする


# はじめに
[CentOS WSL](https://github.com/mishamosher/CentOS-WSL)を使うと、WSL2上でCentOS8を使えて便利です。
ただsystemctlを呼びだそうとすると、次のようなエラーメッセージが表示されて使えません。(2021年4月現在)
systemctlが使えないとMariaDBなどのサービスが起動できず不便です。

```
System has not been booted with systemd as init system (PID 1). Can't operate.
Failed to create bus connection: Host is down
```

# 起動しない理由や対策

起動しない理由や対策は、こちらのブログ記事の説明が詳しいです。

https://shikiyura.com/2020/06/execute_systemctl_on_wsl2/

# systemctlを有効化する

上記の記事によると、systemctlを使えるようにするには、genieを用いる方法が解説されています。
記事では、make installでビルドしてインストールする方法が説明されていますが
genieのgithubのページを見ると、releasesにfedora用のrpmが公開されています。
CentOS8でもこのrpmが使えました。

https://github.com/arkane-systems/genie/releases/

なおgenieをインストールする前には、EPELを有効にしておきます。
rpmインストール時に依存するdaemonizeやdotnet-runtimeもインストールされます。

```
dnf install epel-release
cd /root/
wget https://github.com/arkane-systems/genie/releases/download/v1.36/genie-1.36-1.fc33.x86_64.rpm
dnf install genie-1.36-1.fc33.x86_64.rpm
```

# WSL 1で起動している場合
環境によっては``genie -s``を実行すると、WSL2ではなく WSL1で起動している旨にエラーが表示される場合があります。
この場合、PowerShellかコマンドプロンプトでWSLの既定バージョンを2に変えてからCentOS8 WSLをインストールします。

```
wsl --list --verbose
wsl --set-default-version 2
```

# 次回起動時にも有効化する
.bashrcの末尾にコマンドを入れておきます。

```
vi /root/.bashrc
```

```
# 末尾に追記する
if [ "`ps -eo pid,lstart,cmd | grep systemd | grep -v -e grep -e systemd- | sort -n -k2 | awk 'NR==1 { print $1 }'`" != "1" ]; then
  genie -s
fi
```

これでsystemctlが使えるようになります。


# 参考

https://qiita.com/Uchitaso/items/61751ec49a177daa2335
UIButtonの画像をアスペクト比を維持してサイズ変更

# はじめに
UIButtonのサイズ変更に伴い，内部の画像サイズを変更したい場合の方法についてメモしました．

# 拡大方法

UIButtonいっぱいに画像を拡大．

```swift
button.imageView?.contentMode = .scaleAspectFit
button.contentHorizontalAlignment = .fill // オリジナルの画像サイズを超えて拡大（水平）
button.contentVerticalAlignment = .fill // オリジナルの画像サイズを超えて拡大(垂直)
```

# 縮小方法

画像の上下左右にマージンを取ることで縮小．

```swift
button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
```

# 参考
* [iOS UIButtonの画像の比率を固定して拡縮する](https://hopita.hatenablog.com/entry/2018/08/15/200349)
UserDefaultsによるUIColorを保存

# はじめに
UserDefaultsをExtensionで拡張することで，UIColorを保存できるようにする方法をメモしました．
利用例として，アプリのテーマカラーなどを保存したいときが挙げられます．


# 方法
以下のコードを記述．

```swift

extension UserDefaults {
  func colorForKey(key: String) -> UIColor? {
    var colorReturnded: UIColor?
    if let colorData = data(forKey: key) {
      do {
        if let color = try NSKeyedUnarchiver.unarchiveTopLevelObjectWithData(colorData) as? UIColor {
          colorReturnded = color
        }
      } catch {
        print("Error UserDefaults")
      }
    }
    return colorReturnded
  }
  
  func setColor(color: UIColor?, forKey key: String) {
    var colorData: NSData?
    if let color = color {
      do {
        let data = try NSKeyedArchiver.archivedData(withRootObject: color, requiringSecureCoding: false) as NSData?
        colorData = data
      } catch {
        print("Error UserDefaults")
      }
    }
    set(colorData, forKey: key)
  }
}

```

# 参考
* [Save UIColor With UserDefaults in Swift 5](https://betterprogramming.pub/save-uicolor-with-userdefaults-in-swift-5-951ef1aa88e8)
* [Working with UserDefaults in Swift](https://learnappmaking.com/userdefaults-swift-setting-getting-data-how-to/)
* [How to load and save a struct in UserDefaults using Codable](https://www.hackingwithswift.com/example-code/system/how-to-load-and-save-a-struct-in-userdefaults-using-codable)
* [【Swift】UserDefaultsの使い方](https://capibara1969.com/2531/)
Windows10のRDPポートを変更してみた

#Windows10のリモートデスクトップポートを変更してみた
RDP接続をすれば、普段使用しているwindows環境がそのまま利用できるが、外出先からRDP接続をするのは危険があるので、
少しでも、安全に接続するために、RDPのポート番号を変更してみた。

##手順

1.レジストリエディターでポート番号を変更する

####レジストリエディターの開き方
1. 「windows」キーを押しながら「R」きーを押す
1. 「regedit」と入力し「Enter」きーを押す

###該当のレジストリを探す
1. サイドのリスト内、コンピューターの中の「HKEY_LOCAL_MACHINE」
1. 「HKEY_LOCAL_MACHINE」の「\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\RDP-Tcp」
1. メインのエリア内にある「PortNumber」
![rdp_registry.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641254/3b29da6b-fac4-5c69-0a63-0e5a4850f10a.png)

<a id="ポート番号を確認する">
###ポート番号を変更する
1. 「値の名前(N):」はそのまま変更してはいけない
1. 「表記」を「16進数(H)」から「10進数(D)」にする
1. 「値のデータ(V):」を任意の数値に変更する <br>
        ただし、入力できる値は**10000～65000**の中から選ぶとよい
</a>

ここまでできたら一度再起動をする
###再起動後、設定からポート番号が正しく変更されているか確認する
1. 「windows]キーを押す
1. 「歯車のアイコン」をクリック
1. 「システム」をクリック
1. 左側のメニュー下から二番目の「リモートデスクトップ」をクリック
1. 「リモートデスクトップを有効にする」がオンになっていなければオンにする　　　※オンになっていれば、この項目はスキップ
1. 「詳細設定」をクリック
<a id="現在のポート">
1. 「リモートデスクトップポート」の「現在のリモートデスクトップポート」が[前の手順](#ポート番号を変更する) で設定したポート番号になっていることを確認する
</a>

###ファイヤフォール設定を変更する
1. 「windows」キーを押す
1. 「Windows管理ツール」をクリック
1. 「セキュリティが強化された Windows Defenderファイアウォール」をクリック
1. 左側メニューの「受信の規則」をクリック
1. 上部の「操作」をクリック
1. 「新しい規則(N)...」をクリック
1. 「ポート(O)」にを選択する
1. 「次へ(N)>」をクリック
1. 「TCP(T)」にを選択する
1. 「特定のローカルポート(S):」にチェックをいれ[先ほど確認したポート番号](#現在のポート)を入力
1. 「次へ(N)>」をクリック
1. 「接続を許可する(A)」を選択する
1. 「次へ(N)>」をクリック
1. 「ドメイン(D)」と「プライベート(P)」をチェックを入れる
1. 「次へ(N)>」をクリック
1. 「名前(N):」と「説明(オプション)(D):」に今後ご自身がわかりやすいものを入力
1. 「完了(F)」をクリック


あとは、ルーター側でポート開放すれば、外部から接続することが可能です。
ローカルを汚さずにお手軽に aws コマンドを使う

# 目標

- aws のコマンドを、ローカルは散らかさずに使いたい
- 使うためにはそれ用のパッケージをインストールする必要があるが、それはインストールしたくない

# 前提

- Docker コマンドが使える

# やり方

```bash
$ docker run --rm -it -v ~/.aws:/root/.aws -v (pwd):/aws -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY -e AWS_DEFAULT_REGION amazon/aws-cli

usage: aws [options] <command> <subcommand> [<subcommand> ...] [parameters]
To see help text, you can run:

  aws help
  aws <command> help
  aws <command> <subcommand> help
```

環境変数を使って認証できるので、 `direnv` を使うと相性が良い


## alias

`aws` で呼び出せて、docker を意識せず使えるので便利

```:bash_profile
alias aws "docker run --rm -it -v ~/.aws:/root/.aws -v (pwd):/aws -e AWS_ACCESS_KEY_ID -e AWS_SECRET_ACCESS_KEY -e AWS_DEFAULT_REGION amazon/aws-cli"
```
Djangoチュートリアル備忘録① 

#はじめに
この記事は[はじめての Django アプリ作成](https://docs.djangoproject.com/ja/3.1/intro/tutorial01/)の備忘録です.

#Djangoのインストール
pip経由でインストールできます.

```shell
$ python -m pip install Django
```

バージョンの確認は

```shell
$ python -m django --version
```
#アプリの作成
```shell
python manage.py startapp polls
```

作成後のディレクトリは下記のようになります.

```
polls/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py
```

#開発用サーバーを動かす
```shell
$ python manage.py runserver
```
上記のコマンドで開発用サーバーを動かすことができる.
アクセスするには http://localhost:8000/ を開く.

#ビューの作成
##ビューとは
DjangoはMTVモデルを採用しており,MTVとは

・Model(データベースに格納されているデータ)
・Template (テンプレートファイルによって定義されたそれぞれのページのデザイン)
・View（どのページを表示させるかを決定する処理）

の頭文字をとったものです.

つまりビューでは表示するページを決定しているのです.

##実際に書いてみる
まずはpolls/views.pyに以下のように書き込みます.

```polls/view.py
from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")
```

この作成したビューを呼び出すためにはURLを対応付けする必要があります.

そのためには,まずpolls下にurls.pyを作成します.
ディレクトリは以下のようになります.

```
polls/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    urls.py ←NEW!!
    views.py
```
その後polls/urls.pyに以下を書き込みます.

```polls/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```
ここでのpath関数の引数はpath(route,view,kwargs,name)となり,それぞれ
**route**・・・polls以下のURL
**view**・・・呼び出すview
**kwargs**・・・キーワード引数を辞書としてviewに渡す
**name**・・・URLに付ける名前
を意味します.


次にルートのURLconfにpolls.urlsの記述を反映させます.
mysite/urls.pyにdjango.urls.includeのimportを追加し,urlpatternsのリストにinclude()を追加します.

```mysite/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]
```

このinclude()はほかのURLconfへの参照を行ってます.ここではpolls.urlsを参照しています.


##実際にURLにアクセスしてみる
先ほどは http://localhost:8000 にアクセスしましたが,今回からはpollsにviewを作りルーティングしたため http://localhost:8000/polls にアクセスします.
viewに記述した文字列が出てきたら正しく実行されています.

#おわりに
今回はDjangoチュートリアルのその1の備忘録を書かせていただきました. 
その２以降もどんどんまとめていこうと思います.

#追記
[Djangoチュートリアル備忘録②](https://qiita.com/surai_uni/items/243e4176f07a28ba3a75)
Admob 8.3.0 で  xib の Custom Class へ適用出来ない問題

## 事象
Admobを導入してネイティブ アドバンス広告を表示しようと試みましたが、日本語ドキュメントの作成済みの UIViews に広告ビューのアセット アウトレットをリンクする手順では、GADNativeAdView(GADUnifiedNativeAdViewから変更になった)を Storyboard -> custom classへ設定することが出来ませんでした。
https://developers.google.com/admob/ios/native/advanced

## 解決策

xcframework内のViewがxibへ適用できない問題が現状ある為、ワークアラウンドで.hファイルを直接プロジェクトへ追加することで、custom classへ適用できるようになりました。
ファイルはCocoapodsで導入していた為、`/Pods/Google-Mobile-Ads-SDK/Frameworks/GoogleMobileAdsFramework-Current/GoogleMobileAds.xcframework/ios-arm64_armv7/GoogleMobileAds.framework/Headers/GADNativeAd.h`をコピーして直接プロジェクトへ追加すれば無事適用することができました。

https://github.com/googleads/googleads-mobile-ios-examples/issues/208#issuecomment-814233264
仮想通貨 新 XP ウォレット管理 ・ MN ( マスターノード ) 作成 

#はじめに
仮想通貨 新XPのウォレット管理・MNについての記事.

記事執筆時の202104時点で1XP=0.05円くらい.
https://www.coingecko.com/ja/%E3%82%B3%E3%82%A4%E3%83%B3/xp/jpy

新XPウォレットの日本語の記事がほぼないため作成.
取引所やプール放置は他人に財布を預けてるようなものなので、GOXしても誰も責任取ってくれない.ウォレット管理すべし.
(過去のGOXの例：クリプトピア・コインエクスチェンジ・SPP他)
旧XPウォレットとだいたいの操作感は一緒=ググれば出てくるので、その部分については説明は簡略化する.

# ウォレット・bootstrapのダウンロード
・公式WebSiteのダウンロードにいく.
　https://experiencepoints.io/downloads/
・ウォレットダウンロード
　WindowsかMac
・bootstrapダウンロード
　bootstrapはブロックチェーンの同期を早めてくれるらしい.

# ウォレットでブロックチェーンの同期を完了させる.
・ウォレット起動
　起動したら一旦閉じる.
・bootstrapファイルの置き換え
　旧XPのウォレットのやり方と同じなのでググれば出てくる.
・再度ウォレット起動
　ブロックチェーン同期が完了するまで待つ.（bootstrapのおかげで10分くらいで同期完了した.）

# ウォレットの初期設定
・パスワード設定
・暗号化
・アンロック
・バックアップ
　このあたりも旧XPのウォレットのやり方と同じなのでググれば出てくる.

# 取引所からウォレットに送金
・受け取りアドレスの作成
　Receiveタブから右側にある「Receiving Address」を押して受け取りアドレスの作成
・取引所(graviexとか)から上で作ったアドレスを指定して送金

#POSで報酬を受け取る.
・デバッグコンソールというところ「getstakingstatus」と入力
　https://gu-gu-peco.com/cryptocurrency/xp-staking/
　この記事が参考になる.
>「staking status」が「true」の状態になっていれば、鋳造可能な状態と思われます。

　あとは放置していればPOS報酬が得られる.

※POS関連で個人的にハマったこと一覧
・「getstakingstatus」の項目の一つの「mintablecoins」について
　これはクールダウンの時間が10時間
　おそらく10時間立ったら trueになって、10時間後flaseを繰り返す.
　はじめの10時間はfalseなのでとりあえずPCを放置しておくとtrueになる.
　POSすると塊が半分になるので、XP保有量にもよるが時間が経つにつれずっとtrue状態になる.
・PCはつけっぱなしにすること
　PCはつけっぱなしにしておかないと、「mintablecoins」がfalseにままなのでPOSできない.
・PCの再起動等でウォレットを開き直した時はアンロックを忘れずに
　これも旧XPと同様。なかなかPOSしないと言う人はアンロック忘れてるかも.
・最低どのくらいのXPを持ってるとPOSできるのか？
　明確な数値はないが、100万XP以上あれば安心.
　50万XPでもPOSできることは確認済.
　安定して毎日1回以上POS報酬が欲しいのであれば400万XPくらいあるといいかも.
　参考までに記事作成者は現在400万XPくらい保有、1日に2~5回くらいPOSしている.

#MNで報酬を受け取る.
・前提
　VPSというものを借りることになるが、月額5ドルくらいかかる.
　現在の価格(執筆時の202104時点で1XP=0.05円くらい)では、トントンかむしろマイナスになるらしい.
　かつ設定も難しい.(VPSを初めて触ったのもあるが、MN作成に一週間くらいかかった.)
　今後XPの価格が上がることを期待できる人だけMNを立てればいいと思う.

・MNの作成note
　めちゃくちゃ丁寧でわかりやすい.
　https://note.com/xp_masternode

※MN関連で個人的にハマったこと一覧
・上のnoteではPuTTYを使っているが、Macの場合はターミナルから直接いじる.以下の記事を参考にした.
　https://knowledge.sakura.ad.jp/8218/
・上のnote通り作業すると、エラーが消えない箇所があった、エラーと表示されているファイルをググって別の場所からインストールしたりした.(たぶんバージョンの関係とかが原因.note通りだとうまくいかないところは気合が必要.)
・困ったらVPS再起動.
　意味わからないエラーもVPS再起動で治ったりした.
・1日たっても同期が終わらない.(/opt/XP/eXperiencePointsd ここからずっと進まない.)
　/opt/XP/eXperiencePoints-cli getblockcount で同期が進んでいるか確認.同期が進んでいなければ、ポート番号とか何かしら設定がおかしい可能性あり.設定ファイルを1つ1つ見直してみよう.
・同期を始めようとするとエラー(eXperience Points Core is probably already running.)
　/opt/XP/eXperiencePoints-cli stop で止めればよい.(VPS再起動でも可)
・心の準備がいる.
　気合と根性と時間が必要.メンタル面で負けないようにする.諦めたらVPS代丸損.

#おわりに
上記の作業で困ったこと等があれば、Discordの「chat-ジャパニーズ」の部屋まで.
みんな優しく回答してくれる.
http://discord.gg/E2a9tvt
または
Discordは公式WebSite
https://experiencepoints.io/
の「Join Our Community Chat」と言うところから参加できる.
お気に入り機能とルーティングのネストについて

# 前提

Railsにて、単語帳アプリを作成しました。
登録される単語をWordモデルとし、お気に入り機能を実装するため、Wordモデルと紐づくFavoriteモデルがあり、以下のようなアソシエーションが組まれています。

```Ruby:app/model/word.rb
class Word < ApplicationRecord
  has_many :favorites, dependent: :destroy
end
```

```Ruby:app/model/favorite.rb
class Favorite < ApplicationRecord
  belongs_to :word
end
```
`dependent: :destroy`で、親モデルが削除されたときは、それに紐付いている子モデルも削除されるように設定。<br>

単語をお気に入りに追加もしくはお気に入りから外す際には、以下のアクションが働きます。

```Ruby:app/controllers/favorites_controller.rb
class FavoritesController < ApplicationController
  before_action :set_word

  def create #お気に入りに追加する
    @favorite = Favorite.create(word_id: @word.id)
  end

  def destroy #お気に入りから外す
    @favorite = Favorite.find_by(word_id: @word.id)
    @favorite.destroy
  end

  private

  def set_word #パラメーターとして送られてくるword情報をインスタンス変数に代入
    @word = Word.find(params[:word_id])
  end
end
```

予定している動きとしては、以下の通りです。

1. 「お気に入りに追加」ボタンを押すと、その単語の情報が`FavoritesController`にパラメーターとして送られてくる。<br>
（params（送られてきたパラメーターをハッシュのような構造で格納したもの）によって、設定したルーティングのURLに含まれているword_idがFavoritesコントローラーのcreateアクションへ渡される）
1. `before_action`により、コントローラで定義されたアクション（今回の場合、createアクション）が実行される前に、set_wordアクションが実行され、`findメソッド`を使用し引数で指定したidのレコードを取得し、インスタンス変数`@word`に代入。<br>（引数では、送られてきたパラメーターに含まれるwordのid情報を`params[:キー名]`で取り出している）
1. createアクションが実行され、word_idには、パラメーターとして送られてきたwordのidを値に持つインスタンス（お気に入り）を生成し、インスタンス変数`@favorie`に代入。

この動きを実現させるために、上記のリスト1に関わる、**「wordのid情報をパラメーターとしてURLに含める」**という作業が必要になります。その上で、コントローラーがその情報を受け取り、アクションが実行され、お気に入りインスタンスが生成されるからです。この場合、ルーティングのネストを意識しなければなりません。

# ルーティングのネスト
ネストとは入子構造のこと。
まず、ネストを意識せずにルーティングを記述すると以下の通り。

```Ruby:config/routes.rb
  Rails.application.routes.draw do
    resources :word
    resources :favorites, only: [:create, :destroy]
  end
  ```

この状態で、ターミナルにて、`rails routes`を実行します。

```:ターミナル
     Prefix Verb   URI Pattern              Controller#Action
  favorites POST   /favorites(.:format)     favorites#create
   favorite DELETE /favorites/:id(.:format) favorites#destroy
```

これだとパス（URL）の中に、どのwordに対してお気に入り機能が働いているかを示す情報がありません。
お気に入り機能が働く際には、どのワードに対してのものなのかをパスから判断し、かつコントローラーにその情報を渡したいので、ルーティングのネストを用います。
以下のように記述。

```Ruby:config/routes.rb
  Rails.application.routes.draw do
    resources :word do
      resources :favorites, only: [:create, :destroy]
    end
  end
```

ターミナルにて、`rails routes`を実行します。

```:ターミナル
          Prefix Verb   URI Pattern                             Controller#Action
  word_favorites POST   /words/:word_id/favorites(.:format)     favorites#create
   word_favorite DELETE /words/:word_id/favorites/:id(.:format) favorites#destroy
```

パスの`:word_id`という部分に記述された値は、パラメーターとして送られます。
このように、ネストを利用すればwordのid情報を含めることができます。

ルーティングをネストさせる一番の理由は、アソシエーション先のレコードのidをparamsに追加してコントローラーに送るところにあると言えます。  
この`:word_id`の箇所へ、お気に入り機能が働くと結びつくワードのidを記述すると、paramsのなかにword_idというキーでパラメーターが追加され、コントローラーで扱うことができます。

以上。
【ReactNative_2021/4】開発の時に参考としているリンクまとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630810/6fc6099f-352c-83c2-3455-75080b6c118b.png)

最近Qiitaとかでのアウトプットしてないなと思い、
マークダウン記法の復習ついでにたまには更新したいと思います。

今回は私がハマっているReactNative開発でよく使うリンク集です。

## 基本

- ReactNative

https://reactnative.dev/

## UI

- React-Native-Elements（統一したいためNativeBaseは使ってない）

https://reactnativeelements.com/


- アイコン

https://oblador.github.io/react-native-vector-icons/

- アニメーション（といえばこれ!!ってやつ）

https://github.com/oblador/react-native-animatable

## 画面遷移
- React Navigation（マストなので使い倒して覚えるのが吉）

https://reactnavigation.org/

https://qiita.com/numanomanu/items/d79f5a7f4a536b935054

## Expo

- 公式

https://docs.expo.io/

https://qiita.com/ya_s_u/items/5f7117496695f21e2b98

## Firebase

https://firebase.google.com/?hl=ja

https://qiita.com/owen/items/c51c6ec27c9e2f5804b0

https://qiita.com/muijp/items/86a4573fdce800221b72

## 決済

要件によっては外部APIの方が良いとかもあるはず。

https://qiita.com/zaburo/items/7d4de7723b6d2445f356

## リスト関連

- ヘッダ画像固定スクロール

https://github.com/bamlab/react-native-image-header-scroll-view

- ヘッダ画像固定スクロール

https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e

- タブ固定セクションリスト

https://github.com/bogoslavskiy/react-native-tabs-section-list

- 視差を用いたヘッダ固定スクロール

https://www.npmjs.com/package/react-native-parallax-header

## アイコンとか写真とか
- スプラッシュ（画面開いてすぐ表示されるやつ）

https://github.com/crazycodeboy/react-native-splash-screen

- ローディング

https://kyleamathews.github.io/react-spinkit/

- 画像をスワイプ表示

https://github.com/meliorence/react-native-snap-carousel

## アニメーションとかエフェクト
- react-native-material-ripple

https://www.npmjs.com/package/react-native-material-ripple

- カスタム入力フォーム

https://github.com/halilb/react-native-textinput-effects

- スケルトン

https://www.npmjs.com/package/react-loading-skeleton

## ビルド＆リリース周り

https://qiita.com/HorieH/items/9d4a19377c0f0ab014ba

https://qiita.com/gonta616/items/b8c323167ac41323b8fa

https://qiita.com/kaneko77/items/ce918317e94c9f36441f

https://i-app-tec.com/ios/app-release.html

https://honmushi.com/2019/11/28/expo-publish/

https://qiita.com/khara_nasuo486/items/1ccb4890ed71f4873c05

## 感想
ネット上に落ちているさまざまなライブラリを多用すると思わぬメンテナンスなどに詰まることもあるので
最近は簡単なものに限り、なるべく自作することが多くなってきました。

私はReactNativeに出会って開発が楽しくなった変な人なので
そんな変な人がたくさん生まれることを祈っています（笑）
【git】ターミナルでgithubと連携する

初書：2021/03/29

# 前書き

gitを使ってgithubと連携する機会がついに来てしまったので、最低限使うに当たってやったことをメモ。

- 前提

・gitの大体の動き（ステージとかコミットとか…）は理解してる

# 連携

githubとssh接続するためのもの。

注意：これがないと接続出来ないのだが、この記事を書くまでに端末を再起動し、ターミナルのログが消えていたので、
他のサイトを見ながら`% history 1`で確認しているので、ここは他のサイトを見た方がいいかもしれない。

まずは`/Users/xxxxxxx/`に移動し、`.ssh`ディレクトリが存在するか確認する
存在していない場合は、`% mkdir .ssh/`で作成し、`% cd .ssh/`で入る。
その後、sshのキーを作成する
(※既に.sshディレクトリが存在する場合は以下は飛ばす。また他のキーを使用したい場合は他のサイトを参考にすること)

```zsh
% ssh-keygen
```

これで、`id_rsa`と`id_rsa.pub`ファイルが作成されるので、`id_rsa.pub`ファイルの中身をコピー

次にgithubへログインし、設定画面へ
`SSH and GPG keys`という画面へいき、右上の`New SSH Key`をクリック
`Title`は自分がわかりやすい内容に
`Key`には先ほどコピーしたものをペーストし、`Add SHH Key`

再びターミナルに戻り、`% ssh -T git@github.com`を実行。

```zsh
% ssh -T git@github.com
Hi xxxxxxx! You've successfully authenticated, but GitHub does not provide shell access.
```

このように表示されれば完了。

注意箇所ここまで

# 既にあるgithubのリポジドリをcloneする

cloneしたいリポジドリのページへ行き、右上の`コード`から`clone`の`ssh`を選択
`git@github.com:`から始まる文字列をコピー
ターミナルに戻り、以下を実行

```zsh
% git clone コピーした文字列
```

これで、リポジドリのcloneをローカルにDLすることができた。

# 自身の情報を設定する

複数人で作業する場合は誰がどのコミットをしたかをメモする必要がある。
まあ1人でもgitを使う場合はメモしないといけないが。
なのでその登録をする

```zsh
% git config --local core.editor "code -w"
% git config --local user.name "NAME"
% git config --local user.email "email"
```

`--local`はそのディレクトリのgitにのみ影響する設定
端末の設定を変える場合は`--local`を`--global`に変更する

１行ずつ説明
１つ目はメインエディタの設定。codeはvscode。
ちなみに-wは付けないと後々面倒な事になるのであらかじめ指定しておく。
[git - Aborting commit due to empty commit message - Stack Overflow](https://stackoverflow.com/questions/9725160/aborting-commit-due-to-empty-commit-message#)

２つ目は名前。`"NAME"`は自身の名前に変更する
３つ目はメールアドレス。`"email"`は自身のメールアドレスに変更する

# 変更をcommitする

commitする前に、まずはリポジドリの中身を更新する必要がある。

```zsh
% git pull origin main
```

ちなみにpullって何？というのはこの辺を参考にした。
[【初心者向け】git fetch、git merge、git pullの違いについて - Qiita](https://qiita.com/wann/items/688bc17460a457104d7d)

次にステージング（`git add`）を行う。

```zsh
% git add -A
```
後ろの`-A`はオプションで、全ての変更・追加・削除をステージングする。
一部だけを指定する場合は、`-A`のところをファイル名にすればいい。
[git add -u と git add -A と git add . の違い | note.nkmk.me](https://note.nkmk.me/git-add-u-a-period/)

ステージングが終われば次はコミットする。

```zsh
% git commit
```

このあと`config core.editor`で指定したエディタで`COMMIT_EDITMSG`が開くので、コミットメッセージを記述。
一々開くのが面倒な場合は、`-m "message"`をオプションでつけると、message部分がコミットメッセージとして記述される。

最後に今回はgithubで共有しているので、github側にコミットを送信する。

```zsh
% git push origin main
```

# 終わりに

VSCode使ってると拡張機能使った方が直感的でわかりやすい気がしなくもないが、
マウスカーソルを触らなくても扱える点では覚えておいて損しないかもしれない。。。。

# 参考サイト

[GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ - Qiita](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)
超初心者🔰がFlexboxの基礎を理解するためアイルランド国旗をFlexboxで作ってみた

 Flexboxを使ってアイルランド国旗を作る

![finish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/c6207353-b482-c3b6-948e-2e5d4e8b7ddb.png)


目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　ある程度、最初に決めておくと後が楽になります。
　例　アイルランドの国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

・紙とペンで実際に枠を書いてみる（添付画像参照　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```HTML
　<body>
    <div class="ireland">　
      <div class="ire1">みどり</div>　
      <div class="ire2">しろ</div>　　
      <div class="ire3">おれんじ</div>
    </div> 
  </body>
```

```css
.ireland {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 0px auto;　　※画面中央用
}

.ire1 {　background-color: green;}
.ire2 {　background-color: white;}
.ire3 {　background-color: orange;}
```

上記の状態を一旦確認![シンプル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/a01c6243-4245-bd53-3ccc-e11d6ba84674.png)

上記のCSSの『親要素にdisplay: flex』をつける。

```Css
.ireland {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 0px auto;

  display: flex; ※
}
```
Flex.boxの大元である、display: flex;を『親要素』に付けた。
見た目が、重なっていた```<div>```が横並びに変化。


![flexbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/8c7c27cb-3bfc-65fd-c89f-eeb89b42951e.png)

みどり、しろ、おれんじの幅を```flex-grow```を使って伸ばします
```flex-grow```は『子要素』に付ける
間違えやすいポイントなので気をつけて


```css
.ire1 {
  background-color: green;
  flex-grow: 1; ※
}
.ire2 {
  background-color: white;
  flex-grow: 1;　※
}
.ire3 {
  background-color: orange;
  flex-grow: 1;　※
}
```

最後に、```<div>みどり　しろ　オレンジ</div>```の文字を消して
完成です！！！

![finish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/57527aef-19cc-86f6-03b1-b50425b82a05.png)



まとめ
```Flexbox```を使う際の、```display: flex```は必ず```親要素```につけてあげる。
上手に反応しない場合のチェック箇所でもあります。
```親要素```に付けていると思ったら```子要素``` ```孫要素```に付けていた場合もありそれに気づかず苦戦しました。

最後に。```『アイルランド、イタリア、フランス、ベルギーetc』``` にも応用できます。
是非皆様も実践してみてください。

ありがとうございます
今回は以上です。
飛び越えモンキーパッチ

#はじめに
既存のパッケージを少しだけ変えて使いたい。そんなときに役に立つのがモンキーパッチです。今回はモンキーパッチをする際にハマってしまったことがあるので、その理由と解決策を記載しておこうと思います。

# ハマったこと

モンキーパッチをしても、メソッドが上書きできない。それが今回のハマったことです。状況を簡潔に再現するためにA.py, B.pyを以下のようなファイルとします。

```python:A.py
def func_a(i):
    return i
```

```python:B.py
from A import func_a 

def func_b(i):
    return func_a(i)
```

要するにA.pyで作ったメソッドをB.pyにimportして使用しています。このとき、実行結果は以下のようになります。

```python:main.py
import B 

print(B.func_b(1))
#実行結果：1
```

ここまでは特に問題なく動きます。さて、ここでfunc_aをモンキーパッチによって上書きします。

```python:main2.py
import A
import B

#上書きするメソッド
def func_a_alt(i):
     return 10*i

#モンキーパッチ！
A.func_a = func_a_alt

print(func_c(1))
#A.func_aをfunc_a_altで上書きしたから10が表示されるはず！
#実行結果：1
```

func_aをfunc_a_altで上書きしようとしたのにうまくいきませんでした。なぜだ...?

# 原因

原因はB.pyで

```python
from A import func_a
```
をしていたことでした。これをすると、元々A.pyで定義したfunc_aと別のメモリに新しくfunc_aが記録されるみたいです。したがって、main2.pyを実行すると以下のような現象が起きます。

```python:main2(解説つき).py
import A
import B #B.pyのfunc_aがA.pyのfunc_aとは別のメモリにできる

#上書きするメソッド
def func_a_alt(i):
     return 10*i

#モンキーパッチ！
A.func_a = func_a_alt　#A.pyのfunc_aだけ上書きされる

print(func_b(1)) #B.pyのfunc_aは上書きされていないから上書きされる前のメソッドが呼び出される
#実行結果：1
```

# 解決策
解決策は意外と簡単で、<strong>A.pyのfunc_aを上書きしたあとにB.pyを実行(import)する</strong>だけです。

```python:main3.py
import A
#ここではBをimportしない

#上書きするメソッド
def func_a_alt(i):
     return 10*i

#モンキーパッチ！
A.func_a = func_a_alt #A.pyのfunc_aが上書きされる

import B #B.pyのfunc_aが上書きされた状態でimportされる

print(func_b(1)) 
#実行結果：10
#無事にモンキーパッチできました！
```

# 終わりに
モンキーパッチをする際には

+ おおもとのメソッドを上書きする
+ 他の.pyからメソッドを呼び出す前に上書きする

この2点を気を付ける必要があるようです。今回は簡単なスクリプトで再現しましたが、私は既存のパッケージに対してモンキーパッチしようとしてはまりました。私のハマり経験が何かのお役に立てれば嬉しいです！
「うわがかれる」が「宇和が枯れる」と変換されるのが嫌

#対象読者

Windows10で「うわがかれる」が「宇和が枯れる」と変換されるのが嫌で、なおかつ対処方法を知らない人。
ITに詳しいQiita住民の方々には無縁な話。

#こうする。

タスクバー右下の「あ」（または「A」）を右クリックし、「単語の追加」をクリックする。
<img width="300" alt="ide.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/a5670e69-b3c7-21c2-c773-89651015f7fd.png">

単語「上書」
よみ「うわが」
その他「5段動詞・か行」
と入力し登録ボタンをクリックする。
<img width="500" alt="add.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/4e3cc4de-240a-872c-1c0a-f792d51e9e01.png">

「うわがかれる」が「上書かれる」と変換できるようになる。
AWSのIAMユーザーのアカウントIDにエイリアスを設定する方法

# 概要

AWSのIAMユーザーでサインインしようとすると、アカウント作成時にランダムで生成された12桁のアカウントIDが求められる。
サインインする際にいちいち覚えていられないので変更などできないか調べたところエイリアスを設定できることがわかった。
そのため、設定方法を記載する。

# 参考サイト
https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/console_account-alias.html

# 手順

1. AWSマネジメントコンソールにサインインする。

2. **[サービス]**メニューからIAMサービスをクリックしてIAMダッシュボードを開く。

3. IAMダッシュボードにある**このアカウントのIAMユーザーのサインインURL**横の**[カスタマイズ]**を選択する。
![iam_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598427/1f6b5018-5ccf-2c62-3c5d-f57dd4116e6e.png)

4. 以下のようなダイアログが表示されるので、設定したいエイリアスを入力し**[エイリアスの作成]**をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598427/f1e28498-1e94-32e4-91ef-66b1c2273fc7.png)

上記の手順を実施することで次からアカウントIDに設定したエイリアスを入力してサインインすることができるようになる。
【何が分からないかわからない】～質問の仕方～


#■目的
在宅ワークも増えてからチャットでの質問が増えました。身振り手振りで説明しながらなんとか質問してきた身としては文面だけでの質問は想像以上に大変でして、、、そこで！今回は「質問の仕方」について考え方をまとめていこうと思います。
文面でのやり取りに限らずに使っていけると思いますのでぜひ試してみてほしいです。


#1.何が分からない？
現場に出てせっかく任された仕事ですが、いざ取り掛かると何を言っているのかまったくわからない未知の領域だったなんてことは意外にもたくさんありました。俗にいう「何が分からないかわからない」状態ですが、まずどこに「わからない要因」があるのかを探す必要があります。
そのためにはわからないなりにあてずっぽうでも何かしらのアプローチを試みなければいけません。
では、どうやってアプローチ先を探せばよいのか？？です。

#2.問題はどこか？
知識不足かも知れないですし、アプローチの方向性が間違っているのか、何か理解を妨げる勘違いをしているのか、あるいは内容について読めていない部分があるのかも知れないです。
とにかく「とっかかり」となる部分を見つけるためにあてずっぽうでもいいのでアプローチして失敗する必要があります。そうすれば「その問題に対して自分は何を試みて、それがどのように失敗したのか」、「どこまでは試みが成功したのか」が見えてきます。この内容をセットに質問をしに行けば相手に判断基準を全部丸投げせずに質問することができるはずです。

#3.まとめ
「わかりません」の一言で質問してもいいのですが、その場合は相手に判断基準を全部丸投げしてしまいます。
そうすると、本当に欲しい回答をもらえない可能性が高くなってしまい、結果的に質問が無意味のものになってしまいます。
なので、わからない原因をアレコレ探って、その結果をもとに質問をぶつけに行くと自分で考えた原因が正しいのかどうか回答をもらえるはずです。これを繰り返していくことで大道をそれずに「何が分からないかわからない」の答えにたどり着くことができます。

余談ですが、考えに時間をかけ過ぎるとそれはそれで問題なので時間の線引きは大切です。

#■参考文献リスト
[大学の恩師に教わった、「なにがわからないか、わからない」ときの質問のしかた。](https://blog.tinect.jp/?p=68951)
【Vagrant】アップデート後にエラーが発生した場合の対処

Vagrantをアップデート（＋OS再起動）した後に、vagrantコマンドを実行すると以下のようなエラーが発生した。

```
$ vagrant box list
Vagrant failed to initialize at a very early stage:

The plugins failed to initialize correctly. This may be due to manual
modifications made within the Vagrant home directory. Vagrant can
attempt to automatically correct this issue by running:

  vagrant plugin repair

If Vagrant was recently updated, this error may be due to incompatible
versions of dependencies. To fix this problem please remove and re-install
all plugins. Vagrant can attempt to do this automatically by running:

  vagrant plugin expunge --reinstall

Or you may want to try updating the installed plugins to their latest
versions:

  vagrant plugin update

Error message given during initialization: Unable to resolve dependency: user requested 'vagrant-share (= 1.1.9)'
```

メッセージに従って、プラグインをアップデートすることでエラーは発生しなくなった。

```
$ vagrant plugin update
Updating installed plugins...
Updated 'vagrant-vbguest' to version '0.29.0'!
```

ちなみに、最初はもう一方の対処を試してみたが、以下のようにエラーになった。

```
$ vagrant plugin expunge --reinstall

This command permanently deletes all currently installed user plugins. It
should only be used when a repair command is unable to properly fix the
system.

Continue? [N]: y

All user installed plugins have been removed from this Vagrant environment!

Vagrant will now attempt to reinstall user plugins that were removed.
Installing the 'vagrant-share' plugin. This can take a few minutes...
Vagrant failed to properly resolve required dependencies. These
errors can commonly be caused by misconfigured plugin installations
or transient network issues. The reported error is:

Unable to resolve dependency: user requested 'vagrant-vbguest (= 0.15.2)'
```
ラズパイに通常版Vimをインストールする

```bash:
#インストールされているVimの確認
dpkg -l | grep vim
#既存Vimをアンインストール
sudo apt-get purge vim-common vim-tiny -y
#通常版Vimをインストール
sudo apt-get install vim
```


#参考
- [RaspberryPi3のセットアップ続き〜VimやNFS設定](https://qiita.com/B73W56H84/items/1d164a3c083872e10ccb)
- [raspberry pi : Vim インストール](https://qazsedcftf.blogspot.com/2019/12/raspberry-pi-vim.html)
- [ラズパイ3にvimをインストールした](http://ytyaru.hatenablog.com/entry/2019/01/21/000000)
Cookieとセッション

cookieとセッションって何が違うのかよく分からなかったので調べました！

以下のYoutubeで勉強させていただきました:pray_tone1:
[Cookieとセッションってなに？ゼロからわかりやすく解説](https://www.youtube.com/watch?v=t8Xxp_dk214)
[実演付きで説明する、クッキーの仕組み](https://www.youtube.com/watch?v=-Ka2CwY5-Qc)

## そもそも何故必要か

例えばスマホやPCでAmazonにアクセスして、以前のログイン状態やカートに入れた商品が残るのはcookieやセッションのおかげです。

と、いうのもHTTPは`ステートレス`といってログイン状態などの状態を管理していないものらしい。
でも、これだといちいちブラウザを閉じるたびに会員情報を入力しなきゃいけないし、すっごく面倒...
なので`Cookieを使ったセッション管理`を用いてログイン状態などを実現させています。

Cookieとセッションって全くの別のものかと思ってましたが、cookieを使ってセッション管理をしているんですね。
なるほど。


## セッションとCookie

セッションとは
`一連の動作や処理の始まりから終わりまでを表す概念`です。

Cookieとは
`ブラウザのテキスト情報を保存する仕組み`です。

と、動画では解説されていたのですが
「ん？なんか現役エンジニアの方が使う意味と違う気がするな」と思って聞いてみました。

セッションにはもう1つ意味があり
`サーバー側がブラウザに渡す識別番号のようなもの`だそうです。セッションIDと言います。


一連の流れで例を表すと、下記の図のようになります。
①ブラウザからサーバーにログインする
「はじめましてー」
②サーバーはその情報を管理するための識別番号を渡す(これがセッションID)
「あなたの識別番号は×××なので次回もこちらの識別番号を持ってきてね」
③その識別番号をブラウザはCookieに保存する
「OK。忘れないようにCookieに保存しておくね」

![BIZ-MTG - Frame 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/62d2caa3-5870-dd58-d6d6-991e423e1164.jpeg)

で、上記の状態で一度ブラウザを閉じるとHTTP自体には保存する機能がないのですが
Cookieを使ったセッション管理をすることにより以下の図のようになります。

①Cookieに保存した識別番号を持ってサーバーにアクセスする
「以前ログインした者です。識別番号×××でーす」
②サーバーは識別番号を元に以前の情報を引き継いでHTMLを表示
「はいはい。また来てくれてありがとね。識別番号×××のあなたのページを出しますねー」

![BIZ-MTG - Frame 1 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/4ccc1185-b755-2775-a23b-70a38f9d582b.jpeg)


## Cookieの仕組み

じゃあどうやって識別番号を送ったり、Cookieとして保存しているのか。
以下の図のようになります。

①サーバーはブラウザに識別番号を`Set-Cookie:~`で渡す。
②ブラウザは`Set-Cookie:~`で送られてきたら保存するように命令されているのでCookieに保存する。
③再度アクセスするときにCookieから識別番号を取り出して`Cookie:~`と渡す。
④サーバーは`Cookie:~`を受け取るとCookieでのログインだと分かり該当の情報を返す。

![BIZ-MTG - Frame 1 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/d0f94c6b-e9d6-7a00-e32a-6a62be8da520.jpeg)


なるほど！
このような仕組みで我々は便利にWebアプリを使うことができるんですね！
なんとなーくの理解から少し人に説明できるくらいには理解できました！

以上です！
【小ネタ】Streamlit でクエリパラメータはexperimental_get_query_paramsで取得できる

# はじめに
公式ドキュメントを検索しても使い方が見つからなかったのですが、Streamlit Version 0.65.0で追加されてるのを発見し使い方について調査したものを記事にまとめました。

# クエリパラメータの取得方法
タイトルに記載の通り、`experimental_get_query_params()`メソッドにて取得可能です。

## サンプルプログラム
```python:streamlit_app.py
import streamlit as st
params = st.experimental_get_query_params()

#
# 例： http://localhost:8501?name=abc&name2=5 の場合
# paramsには以下のように格納される
# {
#   "name": [
#     "abc"
#   ],
#   "name2": [
#     "5"
#   ]
# }
```

## お試しサイト
こちらのサイトに検証用のサイトを構築しましたのでテストされたい方はアクセスしてみてください。

### 検証用サイトのソース
#### サンプルプログラム
```python:streamlit_app.py
import streamlit as st

st.title('Streamlitでクエリパラメータを取得するサンプル')

params = st.experimental_get_query_params()
st.write('experimental_get_query_params() の実行結果')
st.write(params)
```

### 検証用サイトのURL
https://share.streamlit.io/narita1980/streamlit-query-params/main

# Appendix
## 参考サイト
- [Changelog - Streamlit 0.65.0 documentation](https://docs.streamlit.io/en/stable/changelog.html?highlight=query%20param#version-0-65-0)

# ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/narinarita1980)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。
【C言語学習】パスワード生成プログラムを作ってみた

##概要
Webサービスのユーザー登録やファイルの暗号化など、、
パスワードとしてランダムな文字列を生成したい時ってたまにあると思います。

"パスワード生成" でググれば、ボタン一つでパスワードを作ってくれるPHPなWebサイトが簡単に見つかるでしょう。
しかし、「これから使用しようとしているパスワードを誰かに握られているって、情報セキュリティの観点的にどうなの?」と思ったのと、
C言語を1ヶ月間勉強した事だしその知識を活用する良い機会だな、という事で作ってみました。

##環境
Ubuntu 20.04 LTS on Windows Subsystem for Linux (WSL2)
gcc (Ubuntu 9.3.0-17ubuntu1~20.04) 9.3.0

###コード

```C:genrandstr.c
/* *********** genrandstr.c *********** */
/*   Generates a random string          */
/*                                      */
/*   1st release: 2021-04-13            */
/*   Last update: 2021-04-15            */
/*   Author: Y. Kosaka                  */
/*   See the web for more information   */
/*   https://qiita.com/x-ia             */
/* ************************************ */

#include <stdio.h>
#include <stdlib.h>
#include <time.h>

int		main(int argc, char **argv)
{
	char	c;
	char	c_range[3][2];
	char	c_tmp;
	int		i;
	int		n;

	i = 0;
	n = 0;
	c = 0x00;
	c_tmp = 0x00;
	c_range[0][0] = 0x21;
	c_range[0][1] = 0x7e;
	c_range[1][0] = 0x01;
	c_range[1][1] = 0x00;
	c_range[2][0] = 0x01;
	c_range[2][1] = 0x00;

	if (argc > 2)
	{
		while (*(argv[2] + n) != 0x00 && n < 6)
			n++;
		while (n > 1)
		{
			i = n / 2 - 1;
			c_range[i][0] = argv[2][n / 2 * 2 - 2];
			c_range[i][1] = argv[2][n / 2 * 2 - 1];
			if (c_range[i][0] > c_range[i][1])
			{
				c_tmp = c_range[i][0];
				c_range[i][0] = c_range[i][1];
				c_range[i][1] = c_tmp;
			}
			n -= 2;
		}
	}

	if (argc > 1)
		n = atoi(argv[1]);
	if (n < 1)
		n = 8;

	srand((unsigned int)time(NULL));
	i = 0;
	while (i < n)
	{
		c = rand();
		if ((c >= c_range[0][0] && c <= c_range[0][1]) || \
			(c >= c_range[1][0] && c <= c_range[1][1]) || \
			(c >= c_range[2][0] && c <= c_range[2][1]))
		{
		    printf("%c", c);
			i++;
		}
	}
	printf("\n");
	return (0);
}
```

##使用方法
1. `gcc` でコンパイルします。
* 第1引数で、文字数を指定します。
 * `10` のように、算用数字で指定します。
 * atoi関数により、引数の頭の整数部分が採用されます。
 * 指定が無い場合は、8文字となります。
* 第2引数で、使用する文字の範囲を指定します。
 * `AZ` とすると、ASCIIコードでA―Zの範囲にある文字から選ばれます。
 * `09AF` とすれば、0―9及びA―Fとなり、16進数のように使用可能です。
 * `AZaz09` のように最大3つの範囲を指定可能です。
 * 指定が無い場合は、'!'(0x21) ― '~'(0x7E) となります。
* プログラムを実行し、出力された文字列を確認します。
【個人開発】Flutterで四則演算だけの低クオリティーiOSアプリを作ってみた【リリースするのが大事って教わったから...】

<h1>はじめに</h1>
少しでも個人開発のハードルを下げられればと思って記事にしてみた。ただハードルを下げ過ぎて貶めているまであるが気にしない。

<h1>初めての個人開発</h1>
一端のエンジニア目指して個人開発に着手してみた。何を持ってエンジニアというかは諸説あると思うけど、僕のエンジニア像はQiitaを読んできて培われてきた。だから仕事が終わってもコーディングしているし、休日もアプリ開発をしてるイメージ。

<h1>なぜにFlutter?</h1>
まず一つに簡単なアプリでよかったこと。初めての開発でモチベが続いているうちにリリースまでしたかった。
二つ目に学習コスト。webアプリで開発しようとするとフロントとサーバー、果てはインフラとやることが多い。対してFlutterはdart一つで大概どうにかなる。(マテリアルデザインとかは目を瞑ろう...)
最後はFlutterって響きがカッコよかったから。

<h1>そしてできたもの</h1>
僕も趣味の一つが麻雀だ。麻雀をよくオンライン麻雀の<a href=https://tenhou.net>天鳳</a>とかやっていた。そしれ某プロ団体に属したりもする。

麻雀において技術とそんなに関係なくめんどくさいものが存在する。それが逆転条件の計算だ。

というわけで<a href=https://github.com/always-reach/tokuten_calculator>こんなもの</a>を作ってみた。
<img width="50%" alt="Simulator Screen Shot - iPhone 11 Pro Max - 2021-04-09 at 23.14.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/793703/97c5352b-dbc3-eb8e-4427-32624844e354.png">



自分の点数と相手の点数を入力するとどれ位の手をアガレばいいかを計算してくれる。超シンプルなアプリ。

<h1>シンプル is ベスト</h1>
少なくともQiitaの個人開発の記事を漁った感じでは、人生最初のリリースはこんな感じでいいと思った。まだまだ機能は盛ろうと思えば盛れる。UIだってツッコミどころがたくさんある。ソースだってぐちゃぐちゃ。でもそんなのは気にしない。思い立ったらしのごの言わずに書いてリリースするもんだと記事で読んだ。改良はこの後すればいいって教わった。

<h1>今後</h1>
仕事でDjango+React+awsでwebアプリの業務に携わることになったので直近ではそっちのお勉強。アプリの改修はそれが落ち着いてからかな?

とりあえずfirebaseのadmobとanalyticsを追加したい。エラーを直せず挫折したらか次は頑張りたい。
Rails APIとPostmanについて

## Rails APIを勉強してみる
フロントエンドはVue.jsやReactを使用してバックエンドをRails APIモードで作成するといった使い方。
SPAでアプリを作成する際に使用されている。


####SPA(Single Page Application)
基本的にページは遷移しない。ページ遷移というのを画面内で表現する。
必要に応じてデータを非同期通信でサーバーに問い合わせ、
JavaScriptによってブラウザで動的に描画される。
「速度」「開発のしやすさ」「モバイルアプリ開発への適用」
と言った理由でSPAが主流になってきているとのこと。

### Rails apiモード？
API専用アプリケーションを支援するRailsの**機能**でした

`--api`とつけるとAPI仕様になる

```
$ rails new my_api --api
```

`rails generate`コマンドでview, helper, assetファイルは生成されなくなる。
Gemfileもview関連(coffee-rails, sass-rails等)のgemは入らない。

コントローラーはActionController::Baseの代わりにActionController::APIから継承される

```
class ApplicationController < ActionController::API
end
```

https://railsguides.jp/api_app.html


## Postmanて何？

Postmanは、プロジェクトのAPIを検証するためのインタラクティブな自動ツールです。 Postmanは、HTTP APIsとやり取りするためのGoogleChromeアプリです。リクエストを作成し、レスポンスを読み取るための使いやすいGUIを提供します。バックエンドで動作し、各APIが意図したとおりに動作していることを確認します。

Postmanはより簡単にAPIを触れれるツール。

[POSTMAN URL](https://www.postman.com/)