OmniAICreator/Qiita-1.07M huggingface dataset:
[aws] CodeCommit リポジトリ作成と動作確認

## 概要

CodeCommitによるソース管理を始めるための開始方法をスクショを入れてまとめます。
基本的に以下内容に沿った内容となっています。
https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/getting-started.html

## リポジトリの作成

https://console.aws.amazon.com/codesuite/codecommit/home にアクセスし、リポジトリを作成を押下

![スクリーンショット 2020-11-04 10.24.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497547/bc70a84d-74f5-24a2-ffa7-7c0450191f4c.png)

リポジトリ名を設定し、`作成`を押下。

![スクリーンショット 2020-11-04 10.31.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497547/04f74c71-c87a-6dcc-a772-612ca6a61dd1.png)


## SSHによるリポジトリのクローン

SSHでのリポジトリクローンはIAMユーザでのみ実行可能です。
CodeCommitように公開鍵を予め登録しておく必要があります。

```
$ ssh-keygen
$ cat ~/.ssh/id_rsa.pub
```

上記で出力された公開鍵をIAMユーザに登録します。

![スクリーンショット 2020-11-04 10.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497547/75b37f7e-b52a-be6c-3e02-2ffb0b64a225.png)

ローカルマシンの`~/.ssh/config`に接続情報を記載します。
`User`の値は公開鍵を登録した際のSSHキーIDです。

```~/.ssh/config
Host git-codecommit.*.amazonaws.com
  User APKAZ6CO7NSLEFREIC4T
  IdentityFile ~/.ssh/id_rsa
```

ローカルマシンでcloneを行います。
cloneのURLはCodeCommitで作成したリポジトリの画面から確認できます。

```
$ git clone ssh://git-codecommit.ap-northeast-1.amazonaws.com/v1/repos/practice_ripo
Cloning into 'practice_ripo'...
warning: You appear to have cloned an empty repository.
```

gitの使い方は基本的に同じなため割愛します。

## CloudFormationによるリポジトリの作成

リポジトリの作成を自動化するため、`CloudFormation`を使用し環境の作成を行います。

https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-codecommit-repository.html


リポジトリを作成するだけであれば以下が最小単位となります。

```yaml
AWSTemplateFormatVersion: '2010-09-09'
Resources:
  codecommit:
    Type: AWS::CodeCommit::Repository
    Properties:
      RepositoryName: practice
```
ラズパイやディープラーニングを用いてハムスターの行動を監視するシステムを作ってみた【概要】

# 動機
ペットのハムスターの活動の様子を知りたい。 

具体的には..

* 外出時、ハムスターがちゃんと動いていることを知って安心したい。
* 夜行性のため、飼い主が寝ている時間帯にどれだけ動いていたかを知りたい。

→ 手持ちのラズパイに物体検出ディープラーニングモデルを埋め込み、監視システムを作成。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634659/14c3a87f-ab6e-1e31-02fc-4308c92146fb.jpeg" width="640">
ラズパイカメラをスマホアームで固定して飼育ケージをストリーミング撮影しています。

# できたもの
3つの機能により、ハムスターの活動の様子を見守れるようにしています🐹
[Github](https://github.com/yuyugreen/hampi-detection)にコード一式をまとめています（実装の詳細は[作り方](#作り方)の記事にて解説）。

**1. 飼育ケージをラズパイカメラで撮影しストリーミング**
🐹が巣穴から出てきてカメラに映ったら物体検出モデルが働いてくれます(↓Gif)
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634659/563022cd-61bd-7cfe-9afe-efa7669d14d6.gif)
　　
使ったもの: Python(Flask), OpenCV, PyTorch, [YOLOv5](https://github.com/ultralytics/yolov5)
※ 夜行性なので、暗がりでも撮影できる赤外線カメラを導入。全体的に紫がかってます。
※ かなりカクカクしていますが、行動把握や↓のLINE通知目的ならこれで十分と判断..

**2. ハムスターを検出したらLINE通知**
🐹が映ってるときに常に通知すると大変なことになるので、10分おきに判定をかけています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634659/724f8938-1af6-c375-b300-27613bebb5c8.jpeg" width="300">
使ったもの: [LINE Notify API](https://notify-bot.line.me/ja/)

**3. BIツールによる活動時間帯の可視化**
なんとなくですがいつ動いてたか、がわかります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634659/8336dba8-6908-1380-4ea6-279d20ad3261.png" width="640">
※ 回し車(wheel)にどのくらい滞在してたかも可視化したいのですが、現状あまりうまく行ってないですね..
使ったもの: GCP(IoTCore, Pub/Sub, Cloud Functions, BigQuery), Googleデータポータル

# システム構成図
ごちゃごちゃしてますが全体像はこんな感じです。
※ 最初は[Object Detection API](https://github.com/tensorflow/models/tree/master/research/object_detection)でモデルを作成したのですが、後に[YOLOv5](https://github.com/ultralytics/yolov5)に乗り換えました。
![hampi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634659/a6e2664c-617c-39a9-83af-59e6e818736c.png)
※ 2020/11/5 GCPのフローにおいてCloud FunctionsとBigQueryの順番が逆になっていたのを修正
# 準備したもの&協力者
* [Raspberry Pi 4B](https://www.amazon.co.jp/gp/product/B082VVJCPT/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)　※ Jetson nanoとかでも試したい..
* [Kuman カメラモジュール Raspberry Pi用 夜間 赤外線可視 ラズベリーパイ 500W画素 Pi 4B 3 2 SC15](https://www.amazon.co.jp/gp/product/B01ICO5CFI/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1)
* ジャンガリアンハムスター

# 作り方
それぞれ長くなりそうなので各記事で紹介します（近日投稿予定）

* [ラズパイカメラでハムスターの動きを検出し、ストリーミング&LINE通知してみた【YOLOv5実装編】](https://qiita.com/yuyugreen/items/6f0f52cae1fff1d6ec4f)
* ラズパイカメラでハムスターの動きを検出し、ストリーミング&LINE通知してみた【Object Detection API】
* ラズパイカメラ検出したハムスターの動きをGoogleデータポータルで可視化してみた。
【Swift】未経験から実務までのスキルマップ(ロードマップ)

この記事を書いていく前に、弊社の人事兼開発者が
**未経験のiOSエンジニアを採用する際に見ていること**
をまとめておりますので参考までにご覧ください
https://note.com/bari555/n/n5921e83378fa



##多くの初学者が無駄なインプットをしすぎている

自分もそうだったのですが、
「どこまで勉強すれば実務に入れるのか」
「何を勉強したら良いのか」
がよくわからず、色々な言語(２桁)を浅く触り、
かなり時間を無駄にしたので、他の未経験の方に
そういったことがないようにここにロードマップを残しておきたいと思います。

プログラミングでは全てを網羅しようとするとキリがないので、
あくまで自分が最低限実務で使っている、多用していることに絞っています。

また、スキルは証明しなければならないので、
深ぼったアプリを作る必要があります。

##スキルマップ
基礎構文
新しいことを始めるにはまず、最低限の言葉・文法を知らなければなりません
以下がチェックリストになります。

**レベル1**：実務は厳しい

```
・演算(+, -, *, /, %)
・インスタンスとは
・プロパティとは
・メソッドとは
・比較演算子(==, !=)
・変数 var
・定数 let
・エスケープ処理「\()」
・if文
・switch文
・for文
・構造体：struct
・関数 func
・型キャスト
```

**レベル2**：数打てばどこか入れるかも

```
・型推論
・オプショナルがわかる
・if let
・オプショナルチェーン
・画像が使える
・storyboard/コーディングによる描画
　View、TableView、CollectionView、Switch、SegmentedControl
　TableViewとCollectionViewでのカスタムセルによる実装、
　その他もろもろのパーツ
・画面遷移(segue, navigationController,等)
・参照渡し, 値渡し
・アラート UIAlertController,UIAlertAction
・SVProgressHUDを適切なタイミングで使える
・NavigationControllerが使える
```

**レベル3**：数打てばどこか入れるかも

```
・UIView.animateでアニメーションが実装できる
　-> ライフサイクルを意識できると良い
　　　これができるとUIに磨きがかかるので選考でウケがいい
・セルの再利用がわかり、適切に動作させることができる
　-> 再利用を理解せず(特に初期化)、副作用が起きがち
・selfをつける時、要らない時がわかる
```

**レベル4**：入れる確率上昇中

```
・非同期処理(WebAPIを利用)->DispatchQueueやクロージャを使う
　(クロージャはここで使えれば良さそう)
・ライブラリ(Cocoapodsで外部ファイルをインストールして使う)
　Charts、FSCalendar、SwiftyJSON、とかで良さそう
・Delegateが実用できる
・NotificationCenterが使える
・Githubが使える
・SourceTreeが使える
```

Delegateは以下の記事が一番わかりやすい
https://qiita.com/Sossiii/items/6c8916f96176991f19aa

**レベル5**：独学はもう効率悪いから今すぐ実務に入ろう

```
・Firestore、RealmSwiftを使える
　サーバー上に保存した情報をローカルDBに入れることで、
　何回もFirestoreからデータを引っ張らなくても良い(通信が減る)
　RealmSwiftはメモリ上に保存するのでタスクキルでデータは消え、肥大しない
・チャットが実装できる
　ライブラリ-> MessageKit
・ある程度のUIが設計できる
  Pinterestでググれ
```
Pinterest(https://tinyurl.com/yyjaansd)

**レベル6**：即戦力

```
・RxSwift,Alamofire、SwiftyJSON、Moya, RxCocoa, RxDataSources
　等のライブラリを使用して、MVVMアーキテクチャに基づいたコーディングができる
・既存コードを把握し、それを壊さないコーディングができる(保守)
```

**レベルX**：一番重要かも

```
・ぐぐり力
・ある程度のエラーを自己解決できる
・難題に見切りをつけ、「何がどうわからず、どう調べたが、どうわからなかったので
　こういうことを知りたい」と言った形で質問ができる
・積極的に自習ができる
・プログラミングが好き
```

##最後はポートフォリオを作成
あなたが決めたレベルまでなんとなくできるようになったら、
あとは拘りのアプリを作り上げ、面接に進む時です。

##ポートフォリオは拘れ
たまに、「ポートフォリオは要らない」という方がいますが、
自分は「必要」の一択です
スキルレベルのわからない未経験を採用するのに一番わかりやすい
指標が「ポートフォリオ」なので、
必ずと言って良いほど必要です。

ただ、教育リソースがしっかりしていて、未経験の育成に力を入れている
会社であれば手ぶらな状態でも入れるところがあったりします。

その為、広く浅いポートフォリオではなく、
とにかく**狭く深く**を意識したアプリを作るのをお勧めします。

コンテンツの設計(UX)からデザイン(UI)まで考えられ、
レベル4,5あたりまでの技術を盛り込めば
あとは応募するのみです

##コーディング選考に備えるなら
Paiza一択(https://paiza.jp/challenges)

##スキル以外に重要なこととは
スキルだけあれば良いのか、と聞かれると実はNoで、
具体的には人としての軸が必要になってきます。
「なぜエンジニアになりたいのか」
「なぜ勉強しているのか」
「あなたはどんな人間なのか」
「実務についたとして続けられるのか」
「何が好きなのか」
このあたりの問いに明確な答えが出てくるようになると、
面接でも特に問題ないかと思います。

##企業ニーズに寄せていけ！
「**私はこういう人間です！受け入れてください！**」
「は？企業は親じゃねえよ」
会社は成果をあげる場所であって、
あなたを育成するための場所ではありません。
あくまでの成果のためにあなたを育成するのであって、売り上げのために動きます。


選考を通る確率を上げたいのなら、企業ニーズを把握し
それに合わせることはとても大切です
・どんなスキルを歓迎しているのか
・どんなビジョンを持っている会社なのか
・どういう人材を欲しているのか
を把握し、ポートフォリオや面接に盛り込めると尚良しです。

##おわりに
個人的にはレベル4,5あたりで応募していきたいところです。
参考になれば幸いです。
また、**何ヶ月も勉強しているのに全然できない！**
という方に朗報なのですが、１年でスタートラインに立てれば早いものです。
挫折は成長のきっかけであって、それを乗り越えるたびに1歩ずつ進み、
何もしない人との差がそれだけ開いていきます。
ふつうのLinuxプログラミングをやってみる その２

有名な本らしいので買ってみました
<a target="_blank" href="https://www.amazon.co.jp/gp/product/4797328355/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4797328355&linkCode=as2&tag=lespacetranqu-22&linkId=b690c3257ff896f2239f1107e5bf95a4">ふつうのLinuxプログラミング Linuxの仕組みから学べるgccプログラミングの王道</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=lespacetranqu-22&l=am2&o=9&a=4797328355" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B075ST51Y5/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B075ST51Y5&linkCode=as2&tag=lespacetranqu-22&linkId=aa0915aa60afe5a385a365f9059a2877">ふつうのLinuxプログラミング 第2版　Linuxの仕組みから学べるgccプログラミングの王道</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=lespacetranqu-22&l=am2&o=9&a=B075ST51Y5" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />


> ふつうのLinuxプログラミングをやってみる その１
> https://qiita.com/uturned0/items/b9ae846f2aff5865c074
> ふつうのLinuxプログラミングをやってみる その2
> https://qiita.com/uturned0/items/56beac990cdd6f1059ed
> ふつうのLinuxプログラミングをやってみる その3
> https://qiita.com/uturned0/items/675092da8aa89c4b1ff0
> その４
> https://qiita.com/uturned0/items/8f5765cfc0f0be8a1981
> その５
> https://qiita.com/uturned0/items/ab97deb489c994a836da
その７−３
https://qiita.com/uturned0/items/3fbf3ed6bb2a47325f59

---


# chapter 2

unix -> System V -> Solaris
unix -> bsd -> FreeBSD, mac os x

linuxはゼロから作られた。が、仕様がsystem v/bsd に似ている

あくまでゼロから作ってるからlinuxはunixじゃないっていうアレか

現在はお互いに機能を取り入れている　互いを似たものにする標準規格が POSIX　


Linux OS と Linux Kernel は違うもの。linux = linux kernel

カーネルはたったひとつのプログラム。 `vmlinuz` がそのプログラムひとつ。

`ls /boot/vmlinuz-3.10.0-xxx.el7.x86_64`

Linus大王が見てる（た）のはkernelだけ。

ハードウェアと直接やり取りできるのはカーネルだけ。device driverは **kernelだけ** に入ってるから。

kernelの機能を使うものをシステムコールと呼ぶ。open/read/write etc

## chapter 2.2
ライブラリ関数とシステムコールは違うものだが境界はあいまい。

ライブラリ関数 printf(3) は write() システムコールを使っている。
ライブラリ関数 strlen(3) はシステムコールを使っていない、単体で完結している

`man 1 write` コマンドのwrite
`man 2 write` システムコールのwrite

早速恐ろしいことが書いてありましたよ

> 注意
       write() が成功して返ってきても、 **データがディスクに記録されたことを保証するものではない** 。 実際、データのためのスペースが確保されたことすら保証されないというバグっぽい実装もある。

実装はman必須感あるね

### libc

標準C library 通称 libc がめっちゃ大事

```ruby
$ ll /lib/libc.so.6
lrwxrwxrwx. 1 root root 12 2019-10-01 18:58:09 /lib/libc.so.6 -> libc-2.17.so
```

liunx では GNU libc 略して glibc ぐりぶしー より じーりぶしー ぽい

libc.so.2 とかも /libs にあるのは全部Cのライブラリ。これはLinuxじゃない人が管理してる
libc.so.6は数学的な関数が入ってる


chapter 2 おわり
Jetpack Compose で縦のDividerを引く

[Divider](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#divider) の Composable は存在しますが横線のみで、縦線はなかったので実装してみました。
※Compose 1.0.0-alpha06 時点の話であり、破壊的な変更が入ることがあり得ます。

縦線の Composable を用意します。
Modifier に `fillMaxHeight` を指定するのを忘れずに。

```kotlin
@Composable
fun HorizontalDivider(
    modifier: Modifier = Modifier
) {
    Spacer(
        modifier = modifier
            .preferredWidth(1.dp)
            .fillMaxHeight()
            .background(color = MaterialTheme.colors.onSurface.copy(0.12f))
    )
}
```

作成した Divider を使うレイアウトで `preferredHeight` に `IntrinsicSize.Min` を指定します。

```kotlin
Row(Modifier.preferredHeight(IntrinsicSize.Min)) {
    Text(
        text = "Label"
    )
    HorizontalDivider()
}
```

`IntrinsicSize` を使うことでコンテンツの高さを、コンテンツの最小または最大の固有高さと同じにすることができます。
今回のコードでは `Row` 内の `Text` の高さを内部の高さとし、`fillMaxHeight` を適用することで `Row` の高さいっぱいまで表示させることで縦の Divider を実現しています。
Gitの基本4

<font color="Red">プッシュ</font>
ローカルリポジトリで加えた変更をリモートリポジトリに同期させること。
ローカルでコミットが終わり、、リモートに変更を同期させたい場合は必ずプッシュを行う必要がある。

<font color="Red">ブランチ、メリット</font>
リポジトリで管理をしているプロジェクトの履歴の一つ。自分の作業している場所のこと。
ブランチは独立しているため、それぞれのブランチが干渉していない。

<font color="Red">プル</font>
リモートリポジトリの変更履歴をローカルリポジトリに反映させる操作のこと。
他の開発者による変更がリモートリポジトリに反映された後や、自分でマージを行った際に必ずプルの
作業を行う必要がある。

<font color="Red">マージ</font>
ブランチとブランチを結合すること。結合する側のブランチを結合される側のブランチにマージを行うと、結合する側のブランチの内容が結合される側のブランチに反映される。

<font color="Red">デプロイ</font>
ソースコードをAWS等の本番環境に設置し、稼働させること。

<font color="Red">コンフリクト</font>
複数の人が同じ箇所を編集してしまい、変更箇所を自動では判断できずにマージできなくなること。
競合が起きる条件は、二つのブランチで同じ箇所のソースコードを編集している。片方のブランチをマージし、もう片方のブランチを同じブランチにマージする。この二つの条件が起こったときに、競合は発生する。

<font color="Red">コンフリクト解決のフロー</font>
1.コンフリクト箇所を現在の変更があるブランチに反映。
2.コンフリクト箇所を修正
3.コンフリクト解決をコミット
4.現在の変更があるブランチをマージ
【React】Material-UI 導入 〜 運用手順

#Material-UIインストール

ターミナルの開発プロジェクト下で Material-UI の実装に必要なパッケージをインストールします

```
npm install --save @material-ui/core @material-ui/icons @material-ui/system
```

#Material-UIインポート

Material-UI を使用したいファイル内で次をインポートします

```react
import { makeStyles, createStyles } from '@material-ui/core/styles';
```

#関数を定義

import下に次の関数を定義する

```react
const useStyles = makeStyles(() =>
    createStyles({
        // ここでスタイルをつける
    }),
);

```

#スタイルをつけよう

ルールとして以下の点に注意しましょう
・クラス、Id はダブルクォーテーションで囲む
・プロパティはキャメルケースでかく

```react

//省略

const useStyles = makeStyles(() =>
    createStyles({
        "hello": {
            color: '#AAAAAA',
            fontWeight: 'bold',
        }
    }),
);

const Hello = () => {

    const classes = useStyles(); // useStyles関数を定数に代入
    return(
        <h1 className={classes.hello}>Hello World</h1> // クラスを指定する時は定数名.クラス名
    );
}

//　省略

```

以上

Material-UI公式ページ
https://material-ui.com/
mecab(NEologd辞書)環境をDocker(ubuntu)で構築

記事の内容は古くなっていると思います。
最新の状態は[GitHub](https://github.com/adachi0919/analysis001/blob/master/dock1/Dockerfile)で確認してください。

最近、スクレイピングでデータを取得したり、mecabで形態素解析を行ったり、様々な分析を行ったりしております。

最近の記事
[青空文庫の書籍をDoc2Vecでクラスタリング](https://qiita.com/kei0919/items/bde365bf179c0a1573af)
[文春オンラインの記事をスクレイピング&ネガポジ分析](https://qiita.com/kei0919/items/825901d8c9281dbbc292)

その際どんな環境で分析を行っているかというと、全てDocker環境で行っています。
今回は私が使っているDockerfileを公開いたします。

ベース：`ubuntu`
入っているもの:`anaconda`,`mecab`,`NEologd`,`gensim`,`janome`,`BeautifulSoup`など
工夫した点:NEologdをデフォルト辞書に設定したこと。こうすることでmecabを起動する度にNEologd辞書を指定する必要がない。

参考
[かめさんのudemy Docker講座](https://www.udemy.com/course/aidocker/)・・・私のDockerの基礎知識となっています。超お勧め講座。
[NEologdのGitHubページ](https://github.com/neologd/mecab-ipadic-neologd)・・・デフォルトの辞書より固有名詞に強いです。
[MeCabのデフォルト辞書を変更する【Mac】](https://qiita.com/shimajiroxyz/items/e488e9b28a56e908e7cb)・・・mecabのデフォルト辞書を指定する際に参考にしました。

```
FROM ubuntu:latest

RUN apt-get update && apt-get install -y \
  sudo \
  wget \
  vim \
  mecab \
  libmecab-dev \
  mecab-ipadic-utf8 \
  git \
  make \
  curl \
  xz-utils \
  file

WORKDIR /opt

RUN wget https://repo.anaconda.com/archive/Anaconda3-2020.07-Linux-x86_64.sh && \
  sh Anaconda3-2020.07-Linux-x86_64.sh -b -p /opt/anaconda3 && \
  rm -f Anaconda3-2020.07-Linux-x86_64.sh
ENV PATH /opt/anaconda3/bin:$PATH

RUN git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git ; exit 0
RUN cd mecab-ipadic-neologd && \
  ./bin/install-mecab-ipadic-neologd -n -y && \
  echo "dicdir=/usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd">/etc/mecabrc
RUN conda update -n base -c defaults conda

RUN pip install --upgrade pip && \
  pip install mecab-python3 \
  Janome \
  jaconv \
  tinysegmenter==0.3 \
  gensim \
  unidic-lite \
  japanize-matplotlib

RUN conda install -c conda-forge \
  newspaper3k && \
  conda install beautifulsoup4 \
  lxml \
  html5lib \
  requests

WORKDIR /work

CMD ["jupyter", "lab", "--ip=0.0.0.0", "--allow-root"]
```

記事の内容は古くなっていると思います。
最新の状態は[GitHub](https://github.com/adachi0919/analysis001/blob/master/dock1/Dockerfile)で確認してください。
【3ヶ月】未経験転職したエンジニアが自社開発企業で行なったこと【そこから見えるやっておくべきこと】

## 自己紹介
[yuki](https://twitter.com/yuki82511988)と申します。DMMWEBCAMPにお世話になって、今はWEBエンジニアをしつつ、自分で仲間を集めてサービス開発したり、プログラミングの家庭教師したり毎日エンジニアライフをエンジョイしています。

本日は未経験エンジニアとして、自社開発企業に就職して3ヶ月の間に何をしたか紹介します。
勤務先にもSNSで身分を明らかにすることは承諾を得ているので、その部分もお伝えします。

## 会社の紹介
私は現在、[株式会社ダイアログ](https://www.dialog-inc.com/)という物流×ITの会社に勤務しております。
2020年9月現在、エンジニアの募集はしていませんが、他にも様々な職種を募集しているので、[Wantedly](https://www.wantedly.com/companies/company_3244501)のページをご覧ください。いつか自分のQiitaきっかけで応募してくださる方がいたら、嬉しいなと思います。

[インタビュー記事（入社後の感想など）](https://www.wantedly.com/companies/company_3244501/post_articles/278203)

さて、ではそんなダイアログで行なったことをまとめます。

## 1ヶ月目
### プログラミングの部分
- 環境構築
- 自社サービスの使用方法、ファイルの場所などの研修
- 【Laravel】CSVファイルの書き出しの際の簡単なロジックの追加
- 【HTML/CSS/JS】でプロダクトのモックを作成

### それ以外の部分
- エンジニアの先輩方、部署を跨いだメンターとの1on1面談
- 興味があったので、お客様とのMTGに参加

1ヶ月目は環境構築を終えたのち、大変ありがたいことにサービスの操作方法や関連するファイルの場所などの研修がありました。プログラミングに関してはある程度研修が終わったのち、Laravelを用いてCSVファイルの出力の際に、`こういう値がきたらこうする`といった簡単な処理の追加をOJT形式で行わせていただきました。また、個人の案件としてはこれまで学習した知識を生かし、HTML/CSS/JSでモック（DBの複雑な処理などはないが、見た目としてはできているプロダクト）の作成をしました。

それ以外の部分では、メンター制度が手厚く、エンジニアの先輩方に質問しやすい1on1面談があっただけではなく、他部署の先輩が一人ずっとメンターとしてついてくださるので会社の精度などの質問ができました。また、お仕事の部分では開発だけではなく、早いうちからお客様の意見を直接お聞きしたかったので、ミーティングに参加希望を出したところ承認していただきました。

## 2ヶ月目
### プログラミングの部分
- 【Laravel】APIを作成、Service層の切り分け
- 【AngularJS】APIに連携させるフロントエンドの処理を作成
- 【SQL】20行くらいのSQLを教えていただき、理解しながらLalavelの処理の中に組み込む

### それ以外の部分
- Qiitaのプロジェクト提案＆開始

2ヶ月目に入ると少しだけ難易度が上がり、フロントエンドとバックエンドを分けた開発に携わることになりました。LaravelでAPIを作成し、フロント側のAngularJSと連携させるような実装です。他にも、スクールでは学習しなかった【Service層】という概念を知り、ロジックを切り分けることの大切さを確認しました。また、自社サービスとなると複雑なDBがつきもので、これまで見たことのない（自分にとっては）長いSQLを扱うようになりました。ただSQLがわかるだけではなく、Railsにもアクティブレコードなんかがありますが、LaravelでのORMも同時に学ぶ必要があったので少し大変でした。

プログラミング以外の部分では、社内でこれまでにQiitaを運用したいができていなかったという課題をお聞きできたので、投稿経験もあったため、メリットデメリットをまとめ、スケジュールをひき、自分主体で投稿サイクルを作成するQiitaプロジェクトを提案し、無事まかせていただきました。（まさにこの記事もその一環なので、ぜひLGTMお願いしますっ）

## 3ヶ月目
### プログラミングの部分
- 【Laravel】モデル以外の場所に、より細かいバリデーション（削除の際の制御など）追加
- 【AngularJS】カスタムディレクティブのメリット理解と作成
- ER図の離れたデータの取得の仕方を学習
### それ以外の部分
- 社内の懇親会企画

3ヶ月目は、これまでの実装の他に削除制御について機能を実装しました。スクールで学習するレベルだと、モデルに簡単なバリデーションを書くだけでしたが、もっと細かい処理を書く必要があったのでいい経験になりました。フロントエンドの方では、カスタムディレクティブという概念を学び、コードをより短く書くなどリファクタリングと所謂コンポーネントの役割をしっかり決める必要性を学びました。大きいER図を見ながらデータを取りに行くことがあるのですが、その際テーブル同士の関係は非常に重要で、3ヶ月経過した今でも無駄なくそこにアクセスできるように頑張っています。企業にもよりますが、弊社にはER図のまとめがあったので印刷して暇な時に眺めています。

全く話が変わりますが、大学生の頃にボードゲームでたくさん遊んでいた経験があったので、メンターの方と協力して社内の懇親会を企画しました。オンラインが多い現状ですが、いろいろ考えながら引き続きやっていきたいと思います。

## やっておいてよかったこと
- 質問の仕方をしっかり身につける
まだまだわかりにくい質問をしてしまっていると思いますが、スクールで学習する際にここだけはしっかりと意識していました。

大体以下のような形で質問しています。

```
#【何がやりたくて】
#【今どうやってて】
#【どこでエラーが起きて】
#【自分ではこうだと思ったのだけど】
#【うまくいかないのでアドバイスをください】＋【あれば参考にした記事】
```

相手が答えやすい質問をすることはとても大切だと思うので、この辺は早いうちから意識した方がいいと思います。

- フロントとバックを分けた開発を経験していた  
ポートフォリオを作る段階で、RailsでAPIを作って、フロントエンドのフレームワークNuxt.jsを使ってバックフロントを分けた開発をしていたので、その辺の合流は思っていたよりスムーズにできていたのかなと思います。これは、他の記事でもまとめておりますので、よければご覧ください。後でリンク貼ります。

## 反省
以下、反省点です。精進します。

- もっとSQLやDBの学習をしておけばよかった
- 使うフレームワークや言語がわかったら、どんなに期間が短くても深く学んでおけばよかった
CSVからカスタムメタデータの一括作成 # Salesforce Summer ’20 新機能

# 概要
* **カスタムメタデータ型はカスタム設定(リスト型)の様にデータローダを利用してCSVでデータのインサートを行えない**
* **大量にカスタムデータレコードがある場合は、手作業でレコードを一つ一つ作成する必要がありとても時間がかかる**
* **[Salesforce Summer ’20で新しく追加されたCLIコマンド]((https://releasenotes.docs.salesforce.com/ja-jp/summer20/release-notes/rn_sf_cli_nc.htm))**

# How
1.**設定>カスタムコード>カスタムメタデータ型** からカスタムメタデータオブジェクトを作成し、任意のカスタム項目を作成
2.下記の形で任意の場所にCSVファイルを作成、作成するCSVファイルはNameと作成したカスタム項目分の列でOK

| Name | カスタム項目API参照名 + __c | カスタム項目API参照名 + __c etc... |
|-----------:|------------:|------------:|
| インサートしたい値 | インサートしたい値 | インサートしたい値 |
| 値 etc... | 値 etc... | 値 etc... |

3.VSCodeのOrg BrowserのCustum Objectsから作成したカスタムメタデータオブジェクトAPI参照名 + __mdtのメタデータを取得
4.VSCodeのターミナルから下記のCLIコマンドを実行

```java:CLIコマンド
sfdx force:cmdt:record:insert --filepath path/to/my.csv --typename カスタムメタデータオブジェクトAPI参照名※ __mdtは不要
```
5.上記のCLIコマンドの実行後に、下記ファルパスにメタデータが作成されるのでデプロイを行う

``` :ファイルパス
\force-app\main\default\customMetadata
```

6.**設定>カスタムコード>カスタムメタデータ型** から作成されたレコードを確認

# 資料
* [Salesforce Summer ’20 CLI: 新規および変更されたコマンド ](https://releasenotes.docs.salesforce.com/ja-jp/summer20/release-notes/rn_sf_cli_nc.htm)
* [Salesforce CLI Command Reference ※英語しかリファレンス資料がありません(2020/11現在)](https://developer.salesforce.com/docs/atlas.en-us.226.0.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_force_cmdt.htm)
* [CLI コマンドを使用したカスタムメタデータ型の作成および管理](https://help.salesforce.com/articleView?id=custommetadatatypes_cli.htm&type=5)
vue.jsでproxyを使ってみた時のエラーがlocalhostのままで、proxy設定したurlにならなかったこと

## 背景

vue.jsの勉強をしていて、郵便番号検索APIを使ったところ、[CORS](https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34)が発生してうまく表示できなかった。
開発中のことなので、楽に[CORS](https://qiita.com/tomoyukilabs/items/81698edd5812ff6acb34)が回避できないか方法を探ったところ、[proxyを使うと良いという記事](https://qiita.com/Ryoma0413/items/c41d10d2e6e2a420c3cf)を見つけた。
早速やってみたものの、コンソールに出たエラーが示すURLが変わらず、解決まで意外と時間がかかったので、メモを残すことにした。

ちなみに、郵便番号検索には、[zipcloud](https://zipcloud.ibsnet.co.jp/)を利用した。

## 問題点

郵便番号検索APIのURLとローカル開発中のURLは別物で、originが違うので怒られる。
> 開発中のもの　http://localhost:8080
> 郵便番号検索　https://zipcloud.ibsnet.co.jp/

これはポートを違えても同様なので、ローカルでフロントエンドとバックエンドを別々に開発している場合にも発生する。
これを開発環境側を変更せずに解決したい。

## proxyの設定と問題発生

proxyの設定は、プロジェクトルートに配置するvue.config.jsに行う。
vue/cli 4.5.8で作ったプロジェクトにはそれがなかったので、追加して中身を記述する。
ここでの目的は、ローカル開発環境から`http://localhost:8080/postal`にアクセスしたら、郵便番号検索バックエンドのURLに変えてアクセスすることだ。

```javascript:vue.config.js
module.exports = {
    devServer: {
        port: 8080,
        proxy: {
            '/postal': {
                target: "https://zipcloud.ibsnet.co.jp/api",
                changeOrigin: true,
            }
        }
    }
};
```

APIを実行する側は以下の通り。

```vue
axios
    .get("/postal/1234567")
    .then((res) => {
        console.log(res.data);
    })
    .catch((err) => {
        console.log("エラー発生");
        console.log(err);
    });
```

機体としては`https://zipcloud.ibsnet.co.jp/api/postal/1234567`になって、見つからないというようになるのかな、と思ってましたが、実際に表示されたエラーは`http://localhost:8080/postal/1234567`でproxyされてないっぽい。

```bash
GET http://localhost:8080/postal/1234567 404 (Not Found)
```

## 解決方法

解決方法と言って良いか迷うところだが、ここでの問題点はproxyで変わった結果のurlでエラーが表示されていなかったということだ。
期待したエラーは以下のようなものだが、実際は上記のようになっていた。

```bash
GET https://zipcloud.ibsnet.co.jp/api/postal/1234567 404 (Not Found)
```

[zipcloudの郵便番号検索API](https://zipcloud.ibsnet.co.jp/doc/api)をご覧いただければわかるが、targetのurlはapiで止まらず、その続きがある。パラメータも必要だ。これらがないので、Not Foundになる。ここまでは予想していた。ただエラーの出方が期待と違っていた、というわけだ。
targetのurlが存在しないものになってしまうような設定になってしまうと、proxyが働いてないじゃないか、みたいに悩まされた。

結果としては、以下のようになっていると、やりたいことが実現できた。

```javascript:vue.config.js
module.exports = {
    runtimeCompiler: true,
    devServer: {
        port: 8080,
        proxy: {
            '/postal': {
                target: "https://zipcloud.ibsnet.co.jp/api/search",
                changeOrigin: true,
                pathRewrite: p => {
                    console.log(p);
                    r = p.replace(/^\/postal\/*/, '?zipcode=');
                    console.log("result:" + r);
                    return r;
                },
            }
        }
    }
};
```
【AWS】ECS Serviceの監視をCFnで設定する

ECS ServiceのCPU使用率とタスク数をCloudWatch Alarm・SNS・ChatBotを利用して監視したいと思います。
リソース構築にはCloudFormation(以下CFnと略)を使います。

# 前提

- 監視対象のECS Cluster・Serviceが既に構築済み
- Container Insightsが有効になっている

# 要件

- 共通
    - 正常(OK)・異常(ALARM)の通知
- CPU使用率
    - 80%を超過したら通知
- タスク数
    - 2個未満になったら通知

# CFn

```yaml
AWSTemplateFormatVersion: 2010-09-09

####################################################
# Parameters
####################################################

Parameters:
  # 監視対象のECS Cluster
  EcsClusterName:
    Type: String
  # 監視対象のECS Service
  EcsServiceName:
    Type: String

####################################################
# Resources
####################################################

Resources:
  SampleSNSTopic:
    Type: AWS::SNS::Topic
    Properties:
      Subscription:
        # 向き先をChatBotにする
        - Endpoint: https://global.sns-api.chatbot.amazonaws.com
          Protocol: HTTPS
      TopicName: sample

  CpuUtilizationAlarm:
    Type: AWS::CloudWatch::Alarm
    Properties:
      MetricName: CPUUtilization
      Namespace: AWS/ECS
      ComparisonOperator: GreaterThanOrEqualToThreshold
      EvaluationPeriods: 1
      Period: 60
      Statistic: Average
      Threshold: 80
      AlarmActions:
        - !Ref SampleSNSTopic
      AlarmDescription: CPU utilization is 80% or more
      Dimensions:
        - Name: ClusterName
          Value: !Ref EcsClusterName
        - Name: ServiceName
          Value: !Ref EcsServiceName
      OKActions:
        - !Ref SampleSNSTopic

  EcsTaskCountAlarm:
    Type: AWS::CloudWatch::Alarm
    Properties:
      MetricName: RunningTaskCount
      Namespace: ECS/ContainerInsights
      ComparisonOperator: LessThanThreshold
      EvaluationPeriods: 1
      Period: 60
      Statistic: Average
      Threshold: 2
      AlarmActions:
        - !Ref SampleSNSTopic
      AlarmDescription: Running task count is less than 2
      Dimensions:
        - Name: ClusterName
          Value: !Ref EcsClusterName
        - Name: ServiceName
          Value: !Ref EcsServiceName
      OKActions:
        - !Ref SampleSNSTopic
```

# 備考

上記のCFnは既存のChatBotを利用する想定なので、ChatBotのマネコンからSNSトピックの追加作業があります。
(ChatBotはCFnでも管理できます -> [AWS::Chatbot::SlackChannelConfiguration - AWS CloudFormation](https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-chatbot-slackchannelconfiguration.html))

# Reference

- https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-properties-cw-alarm.html
- https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/Container-Insights-metrics-ECS.html
- https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/aws-resource-sns-subscription.html
- https://aws.amazon.com/jp/blogs/aws/amazon-cloudwatch-alarms/#:~:text=A%20CloudWatch%20Alarm%20is%20always,transitions%20to%20the%20ALARM%20state.
OpenCV　「画像のグレースケール化」

##画像の色変更について
さて、そろそろOpenCVにも慣れてきて楽しくなってきているところではないでしょうか。今回の記事は画像の色変更についてです。そんなに難しくはないですが卒業研究などの研究には非常に使われる技術なのでしっかりと覚えましょう。

##Mark4

```
#include <opencv2/opencv.hpp>
#include<iostream>

#if _DEBUG
#pragma comment(lib,"opencv_world430d.lib")
#else
#pragma comment(lib,"opencv_world430.lib")
#endif

using namespace cv;	
using namespace std;

int main(void) {


	Mat img = imread("C:\\opencv\\sources\\samples\\data\\lena.jpg");

	cvtColor(img, img, COLOR_BGR2GRAY);																

	imshow("View", img);

	waitKey();

	return 0;


}

```

このように出てくればOKです。

![rena.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/843242/59cd4ecf-ce02-eefd-1553-e45ccda34c36.jpeg)

######解説①
前回のプログラムと違う点はここです。

```
cvtColor(img, img, COLOR_BGR2GRAY);
```
これの引数は

```
cvtColor(入力画像, 出力画像, グレースケール化);
```
の意味を持ちます。

######解説②
BGRで色を表現できるのは知っていますか。B(Blue),G(Green),R(Red)の三つです。今回はグレースケールの紹介ですが、GBRを入れ替えたりすることも出来ますので、興味がある人
はいろいろしてみて下さい。

######解説③
さっきはcvtColorであとでグレースケールにしましたが、次のように画像を読み込んだときにグレースケールにしてもいいです。

```
Mat img = imread("C:\\opencv\\sources\\samples\\data\\lena.jpg", IMREAD_GRAYSCALE);
```

######cvtColorで可能な変換(例)
```
COLOR_BGR2RGB   //RGBとBGRの色空間を変更する
COLOR_GRAY2RGB  //グレースケールをRGBまたはBGR色空間に、もしくはアルファチャンネルを追加する。
```

##最後に
研究ではよく使われる技術なのでしかっり覚えましょう。
Vue3ベースのIonic-Vueで実機デバッグするまで。

Vue3が発表されてIonic-Vueがβで公開されて少し経ったのでどんなもんか触ってみました。
諸事情あってWindowsで開発環境を構築していますがMacでもほぼ差異なく動きました

ionic/cliをglobalにinstallします。

```shell
npm install -g @ionic/cli@testing
```

my-appはプロジェクト名なので任意に

```shell
ionic start my-app tabs --type vue --tag vue-beta
```

1分程待つと

```shell
Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./vocbook
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition
```

```shell
ionic serve
```

すると無事動作は確認できました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143795/ef4fc028-f370-11ce-b2b6-2d33321fc601.png)

Androidアプリとしての開発をしたいので一旦 `npm run build` します
ここも特に問題なく正常終了。dist配下に諸々生成されるので

```shell
npx cap add android
```
または

```shell
capacitor.cmd add android
```

でAndroidのネイティブプロジェクトを作ります。

```shell
? What platform would you like to add? android
> capacitor.cmd add android
√ Installing android dependencies in 24.90s
√ Adding native android project in: 
√ Syncing Gradle in 652.80μp
√ add in 24.97s
√ Copying web assets from dist to android\app\src\main\assets\public in 112.61ms
√ Copying native bridge in 3.06ms
√ Copying capacitor.config.json in 4.43ms
√ copy in 146.39ms
√ Updating Android plugins in 9.65ms
  Found 0 Capacitor plugins for android:
√ update android in 42.47ms

Now you can run npx cap open android to launch Android Studio
```

Android Studioで開けといわれるので確認します

```
npx cap open android
```

で自動的にAndroid Studioが起動するのでgradleのsyncなんかを済ませて…

実機で動作しました！

![Screenshot_20201104-110441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143795/b10f8f57-457d-d10d-dcba-403eb0f68c5a.png)

まだ全然詳細は見れていないですがmanifestのパーミッションがもりもりになっていて、使う予定がないものもがっつり入っているので検証時は楽ですがリリース時には見直しが必要そうです。


```xml
    <uses-permission android:name="android.permission.INTERNET" />
    <!-- Camera, Photos, input file -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <!-- Geolocation API -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
    <!-- Network API -->
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <!-- Navigator.getUserMedia -->
    <!-- Video -->
    <uses-permission android:name="android.permission.CAMERA" />
    <!-- Audio -->
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
```


ほぼドキュメント通りでハマりどころもなく実機検証までできたので、このペースでβが外れてくれるとうれしいですね。
wsl.confにfmaskを設定するとwslttyが落ちるときの対処

# 概要
```conf:/etc/wsl.conf
[automount]
enabled = true
options = "metadata,umask=22,fmask=133"
```
こんなふうに`fmask=133`などに設定すると，wslttyを起動してもすぐに落ちてしまう。

# 環境
Windows 10 Pro 1909 Build 18363.1139
WSL1
Ubuntu 20.04.1 LTS
wsltty 3.4.1 (x64)

# 背景
`ls --color`したとき全部黄緑で表示されたらどれが実行ファイルか分かりづらいし，目がチカチカするのでどうしてもこの設定をしたかった。

# 同様の症例
https://qiita.com/angel_p_57/items/05c8e34351f828429a36
こちらは`fmask=177`だが，ほぼ同様の症状。恐らくwslttyのインストールドライブをマウントしてfmaskを設定するとこうなる。

# 対処
1. 上に張った記事と同じことをする
2. wslttyの実行ファイルに実行パーミッションを与えてしまう

私は2を選んだ。

wslttyは落ちるが，Ubuntuのショートカットを直接起動することはできるので，そちらで起動。またはcmdから`wsl`で起動。
wslttyのインストール先（初期設定では`C:\Users\<ユーザー名>\AppData\Local\wsltty`）に移動して，`chmod -R 755 .`する。
こうすればwslttyからwslttyのファイルが呼び出せるようになる。

# おまけ
ノートPCではwslttyが黒画面のまま何も表示されなかったが，ウイルスバスタークラウドが原因だった。除外対象に`C:\Users\<ユーザー名>\AppData\Local\wsltty`を加えればOK
AWS〜VPCでネットワークを構築する①〜

# この記事を読んでできるようになること
AWSでVPCを作成し、ネットワークを構築するための**基礎**を学ぶことができる。
# 記事を読むにあたってのお願い
私は**AWSの初学者**で、アウトプットをすることで知識を定着させるためにこの記事を書いています。内容に誤りがある場合は、コメントをいただけますと幸いです。
`学習に使用した教材`
AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
https://www.udemy.com/course/aws-and-infra/
# AWS・ネットワークの基礎知識
### リージョンとは
AWSが提供されている地域のこと。
アジアだと東京やソウルなどがある。
### アベイラビリティゾーンとは
各リージョンに存在するデータセンターのこと。
リージョンごとに複数のアベイラビリティゾーンが存在する。インスタンス（EC2で作成したサーバー）を複数のアベイラビリティゾーンに設置し、1つのインスタンスに障害が発生しても他のインスタンスで要求を処理するように設定することができる。**（障害に強くなる）**
### VPCとは
Virtual Private Cloudの略で、AWSクラウド内にユーザーごとにプライベートなクラウド環境を提供するサービスのこと。
この中に、サーバーを設置し、Webサービスなどを提供する。
### サブネットとは
VPCを管理しやすいように細かく分割したネットワークのこと。
### IPアドレスとは
ネットワーク上に存在する機器を識別するための**インターネットにおける住所**のこと。
32ビットの整数で表されるが、読み取りにくいので8ビット4つに分けて10進数で表現する。
00001111 00000111 00000011 00000001 → 読みにくい
15.7.3.1 といった形で表す。
#### パブリックIPアドレス
インターネット接続の際に用いるIPアドレスのこと。
#### プライベートIPアドレス
インターネットに接続する必要のない時に使用するIPアドレスのこと。
社内LANなど。
### IPアドレスの範囲について
10.0.0.0~10.0.0.255というIPアドレスの範囲を指定したとする。
数字が変わらない最初の3つの数字部分 10.0.0 をネットワーク部といい、可変する最後の数字 0~255 をホスト部という。ネットワーク部で自分のネットワークまで通信がきて、ホスト部で自分のネットワーク内のどのデバイスに通信をするかを決定している。
### CIDR（サイダー）表記について
**ネットワーク部が最初の何ビットか**を"IPアドレス/数字"で表す表記のこと。
10.0.0.0~10.0.0.255であれば 10.0.0 すなわち最初の24ビットがネットワーク部であるため、10.0.0.0/**24**と表記する。
### サブネットマスク表記について
ネットワーク部のビットを"1"で表し、ホスト部のビットを"0"で表現した表記法。
こちらは、説明が難しいので表記を見てください。
①10.0.0.0~10.0.0.255をビット表記に変換
00001010.00000000.00000000.00000000~00001010.00000000.00000000.11111111
②ネットワーク部（最初の24ビット）を"1"に、ホスト部（最後の8ビット）を"0"に変換
11111111.11111111.11111111.00000000
③②の数字を10進数へ変換
255.255.255.0
④③の数字をCIDR表記でいう"24"のところに表記
10.0.0.0/**255.255.255.0**

AWSでは、**CIDR表記**でIPアドレスの範囲を表現する。

次は実際に**VPCを作成し、ネットワークを構築**していきたいと思います。
【Ruby】配列内の偶数or奇数のカウント方法

配列内にある値について、偶数もしくは奇数の数のカウントをするメソッドを作成します。

値が偶数の場合は<font color="Red">even?</font>メソッドを使用し、奇数の場合は<font color="Red">odd?</font>メソッドを使用します。
※以下は偶数パターンのみ記載しています。evenをoddに変換することで奇数のカウントに使用できます。

#### 使用例
```rb:Ruby
number = 2
number.even?

// →trueが返却される
```

# 解答例
```rb:Ruby
def count(number)
  count = 0
  number.each do |num|
    if num.even?
      count += 1
    end
  end
  puts count
end
```

# 解説
今回はメソッド作成のため、まず一行目にメソッド名と仮引数のnumberを記述しています。

```rb:Ruby
def count(number)
```
上述の通りeven?メソッドはtrueもしくはfalseのみ返却するため単体ではカウントできません。
そのため以下のように配列に対してeven?メソッドを使用するとエラーが発生します。
#### 失敗例
```rb:Ruby
hairetsu = [1,2,6,8,10]
hairetsu.even?

// NoMethodError (undefined method `even?' for [1, 2, 6, 8, 10]:Array)
```

なお、二行目でcount = oと記載していますが、繰り返し処理の前に記載することでカウントの初期化をしています。

カウントするためにはeachメソッドによる繰り返し処理で行います。
流れとしてはtrueだった場合にはカウントアップし、falseの場合は何もせず次の要素の判定に進む、といったものです。

```rb:Ruby
number.each do |num|
  if num.even?
    count += 1
  end
end
```
最後にカウントしたものを出力するためにputsメソッドを使用しています。

```rb:Ruby
puts "count"
```

これで汎用的な配列内の偶数or奇数のカウントメソッドを作成することができました。
メソッドを呼び出す際はメソッド外から実引数に配列を指定してコールすることをお忘れなく。
cargo の dependency patch のミスでハマった話

## 状況説明
Rust で開発中に serde の一部機能を置き換えてテストしたくなり、改造した serde に依存させるべく以下のように Cargo.toml を書いた。(依存ライブラリ名、Cargo.toml の中身は理解できるように作られたフェイクで、実際はもっと別のライブラリです。)

```Cargo.toml
[dependencies]
serde = "0.9"

[patch.crates-io]
serde = { git = "https://github.com/serde-rs/serde", branch = "master" }
```
https://github.com/koba-e964/crate-version-diff-patch-test

コンパイルしてみた。

```
$ cargo c
warning: Patch `serde v1.0.117 (https://github.com/serde-rs/serde#8084258a)` was not used in the crate graph.
Check that the patched package version and available features are compatible
with the dependency requirements. If the patch has a different version from
what is locked in the Cargo.lock file, run `cargo update` to use the new
version. This may also occur with an optional dependency that is not enabled.
    Finished dev [unoptimized + debuginfo] target(s) in 0.24s
```

すると、patch セクションで取り込んだはずの変更が一向に取り込まれない！

## 原因
serde は現行バージョンが "1.0" になっており、semver の点からは互換性が失われていた。

- cargo は依存するクレートを `名前:バージョン` のペアとして扱い、**たとえ名前が同じでもバージョンが違うクレートは別として扱われ**、両方に依存することができる。この仕様は [semver trick](https://github.com/dtolnay/semver-trick) などのテクニックのために欠かせない仕様である。
- 今回の場合、serde:0.9 と serde:1.0 という 2 種のクレートに依存しているものとして扱われており、単に patch を追加しただけなので serde:1.0 の方はどこでも使用されておらず、警告が出た。

最終的には、serder:0.9 に依存しているクレート全ての依存性を serde:1.0 にアップグレードすることによって解決した。

## 教訓
- 警告メッセージは無視しない
- ツールの仕様を理解しておくとこういったコーナーケースで役に立つ
- **警告メッセージは無視しない**
ユーザー登録でなぜメールアドレスが必要か



# 大体の流れ
多くのwebサイトでは以下のような手順が取られている
1 : 新規登録画面でメールアドレスの入力を要求
↓
2 : そのメールアドレスに対して本登録用のリンクを記載したメールを送信
↓
3 : リンクから遷移した先のフォームに必要事項を記入
↓
4 : 登録完了

# なぜemailを使った認証が必要なのか？
## 不正登録を防ぐ
もし、メール受信なくユーザー登録が完了してしまった場合、無限にアカウントが作れてしまう。
その場合、不正に利用されてしまう可能性があるので手順を複雑化し、不正利用を防ぐのが狙い。

## メールアドレスが有効か確認する
ユーザーとの連絡手段を確立するため。
もし、入力されたメールアドレスが間違っていた場合、ユーザーとの連絡が確立できず「ユーザー登録が完了した」事すらも伝えることができない。
よって、メールアドレスが正常に受信できるかどうか確認している

# Railsでの認証
Railsでログイン認証をするにはdeviseというgemを使って実装するみたい。

[[*Rails*] deviseの使い方（rails5版）](https://qiita.com/cigalecigales/items/f4274088f20832252374)

# 参考
[参考にしたブログ](https://www.ryotaku.com/entry/2019/06/14/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AB%E4%BB%AE%E7%99%BB%E9%8C%B2%E3%82%92%E8%A1%8C%E3%82%8F%E3%81%9B%E3%82%8B%E7%90%86%E7%94%B1#Web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E3%81%AE%E4%BC%9A%E5%93%A1%E7%99%BB%E9%8C%B2%E3%81%AE%E6%89%8B%E9%A0%86)
【Ruby on Rails】DB保存時のカラムの制約（代表４つ）

# この記事を書いた背景
データ保存時の制約の指定の仕方が、マイグレーションファイルとモデルファイルとそれぞれに書く方法があることを知ったので、改めて代表的なバリデーションをまとめてみました。（結構前に勉強したことですが、改めてqiitaにまとめていこうと思います。）

# 実施環境
macOS Catalina 10.15.7
VS Code 1.50.0
Ruby 2.6.5
Rails 6.0.0

## ①NOT NULL制約
→データが空の状態では保存ができない制約

【マイグレーションファイルへの書き方】
**null: false**

```java:20200919092740_create_item.rb
t.string :address, null: false
```

【モデルファイルへの書き方】
**presence: true**

```java:item.rb
validates :address, presence: true
```
 
## ②一意性制約
→重複して同じデータを保存できない制約  
【マイグレーションファイルへの書き方】
**unique: true**

```java:20200919092740_create_item.rb
t.string :address, unique: true
```

【モデルファイルへの書き方】
**uniqueness: true**

```java:item.rb
validates :address, uniqueness: true
```

## ③主キー制約
→データが空の状態では保存ができない、かつ、重複して同じデータを保存できない制約 
（NOT NULL制約かつ一意性制約）
（idカラムには自動で設定される制約）

【マイグレーションファイルへの書き方】
**primary_key: true**

```java:20200919092740_create_item.rb
t.string :address, primary_key: true
```

※モデル名のID以外を主キーにわざわざ設定することは少ないと思うので、あまり使わないと思います。
※モデルファイルへの書き方は調べた限りどうやらなさそうです。

## ④外部キー制約
→外部キーとなるデータが必ず存在しないとデータ保存できない制約

【マイグレーションファイルへの書き方】
**foreign_key: true**

```java:20200919092740_create_item.rb
t.string :address, foreign_key: true
```

※モデルファイルへの書き方は調べた限りどうやらなさそうです。
【Docker】基本のDocker Instructionの紹介

また少しDocker担当から離れていきそうなので備忘録もかねて記述していきたいと思います。
今回は簡単にFROM, RUN, CMDのご紹介です。


## FROM
DockerfileはFROMを記述して、ベースとなるイメージを決めます。
ex.ubuntuの最新バージョンのイメージを指定する場合

```Dockerfile
FROM ubuntu:latest
```

慣れるまでは自分が必要とするツールが揃っているものを指定するのもいいと思います。慣れてきたらOSのみで欲しいツールを入れていくことを検討するといいと思います。

## RUN
このコマンドを使うことでサーバーに必要なものを好きなようにカスタマイズすることが可能です。

ex.イメージOS上にtest1.txt,test2.txtというファイルを作成する

```docker:Dockerfile
RUN touch test1.txt
RUN touch test2.txt
```

`RUN`コマンドを複数行と実行することでイメージOS上の環境を整えていくことが可能ですが、`RUN`ごとにレイヤーが作られます。
レイヤーが増えるとイメージが大きくなるので注意が必要です。

#### レイヤーを少なくする工夫
レイヤーを作るコマンドRUN, COPY, ADDを複数使う必要がある場合は＆＆でコマンドをつなげて記述する。１行が長くなるとDockerfileが見辛くなるので\(バックスラッシュ)で改行をする。

```docker:Dockerfile
RUN apt-get update
RUN apt-get install aaa
RUN apt-get install bbb
RUN apt-get install ccc
```
↓

```docker:Dockerfile
RUN apt-get update　&& apt-get install aaa bbb　ccc
```
↓インストールのパッケージが増えると見辛くなるので改行で整えます。

```docker:Dockerfile
RUN apt-get update　&& apt-get install \
aaa \
bbb　\
ccc```

インタラクティブに実行許可のyを入力する必要があるのでyesを意味する-yを入れるとインストールがスムーズに実行されます。

```docker:Dockerfile
RUN apt-get update　&& apt-get install \
aaa \
bbb \
ccc
```

### キャッシュを有効利用する
apt-getなどでツールをインストールする記述をする時に一つ一つaaa,bbbがうまくインストールされたのでつなげてcccを記述して試す...と実行結果を得るためにネットワークへのアクセスが毎回発生してしまいます。

aaa bbb cccのツールをインストールしたい場合
```docker:Dockerfile
RUN apt-get install \
aaa \
bbb
```
これがうまくいったので続けてcccを記述するとキャッシュが利用されずに全てをネットワーク上から取得する事になる。

```docker:Dockerfile
RUN apt-get install \
aaa \
bbb \
ccc
```
↓まずは違うRUNで記述します。

```docker:Dockerfile
RUN apt-get install \
aaa \
bbb
RUN apt-get ccc
```
というように後から追記するものはまず分けてうまく動作するかを試します。うまくいけば１行で記述するようにすることで記述から実行の一連の時間のロスをなくすことができます。

## CMD
・Dockerfileの最後に記述することで、コンテナのデフォルトで実行されるコマンドの指定をすることができます。
CMD ["コマンド", "パラメータ1", "パラメータ2", "パラメータ3"]
ex.バッシュを起動する

```Dockerfile
FROM ...
RUN ...
CMD ["bin/bash"]
```

## おしまい
上記紹介したコマンド：FROM, RUN, CMDで簡単なウェブサーバーなどの環境を作ろうと思えば作れるようになると思います。Docker、便利なんでぜひお試しください。
充電器を刺したらエラーが解決した話を頭の片隅に置いて欲しい


![arienai.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/af690d62-2a78-81ef-7105-2bc37c9912b9.jpeg)
>グリード「ありえないなんてことは、ありえない」 ーーー鋼の錬金術師

## はじめに
正直しょーもない記事ですが、万が一でも誰かのためになればいいなと思いまとめました。

## 背景
メンターとしてプログラミングに関するエラー対応をしていた際に、以下のようなエラーに遭遇しました。

Rails5.2.4を使用し、RSpecの実行をしようとした際、`cannot load such file -- spec_helper (LoadError)`と詳しくは覚えていませんが、何かしらの`NameError`が同時に起こりました。

生徒さんが設定したファイル・フォルダ名やディレクトリの位置などが全て合っていることを確認し、当該アプリケーションを一度githubに上げて頂いたのち、私のPCでclone、テストを通してみました。

皮肉にも自分の環境では無事にテストが通りました。
どうしたこと、何か設定が違うのかと頭を悩ませていました。。。

### 解決へ・・・
その際、Zoomで会話をしていたのが生徒さんのPCの充電が残り1ケタで、自分の方がほぼフル充電であることに気づきました。
**生徒さんは充電器を取りに行かれて、ご自身のPCに差し込んでもう一度テストを実行しました。**

その結果、なんとエラー無くテストが実行されたのです・・・。

まさかーと思いましたが、私以外にももう一人同時にチェックしていた方がいらしたので、コーディングは間違いなく一切しておりません。

PCのパフォーマンスなど、そういった影響もあるのかな・・・？と思いました。
もし、何をどうやってもダメな場合、充電を十分にした上でプログラムを実行してみるのも最終手段として良いのかなと思いました。

似たような記事が見つからなかったので、一応残しました。
何か詳細が分かる方がいらしたら、是非コメントにお願いします。
【超簡単】git github 接続方法



今回はHTTPS,SSH両方の接続方法を紹介してゆくぅ
【前提】
・gitダウンロード
・リモートリポジトリの作成

【作業フロー】
①git init
②git ユーザーネーム、メールアドレス設定
③git remote 設定(HTTPSの場合)
④git remote 設定(SSHの場合)

①git initする
---
```
cd gitで管理したいディレクトリ名
git init
```
"git init"するとそのディレクトリに ".git"というディレクトリができてgit管理できるようになる。

②git ユーザーネーム、メールアドレス設定　
---
```
git config --global user.email sample@〇〇.com
git config --global user.name "your name"
```

③git remote 設定(HTTPS)
---
HTTPS通信でリモートリポジトリと接続する場合

```
git remote add origin https://github.com/GitHubのユーザー名/GitHubのリモートリポジトリ 名.git
```

HTTPS通信でpushする場合

```
git push orign master

以下を問われる
↓
Username for 'https://github.com': ユーザー名入力
Password for 'https://xxyamatonxx@github.com': パスワード入力
```

④git remote 設定(SSH)
---
①originの設定
②SSHのための鍵登録

①originの設定
---
```
git remote add origin git@github.com:GitHubのユーザー名/GitHubのリモートリポジトリ名.git
```
②SSHのための鍵登録
----
```
cd ~/.ssh
ssh-keygen -t rsa -C hoge@example.com ←GitHubのメールアドレス

以下を問われる
※私は3つとも"Enter"だけのガバガバなアンサーです
↓
Generating public/private rsa key pair.
Enter file in which to save the key (/home/ubuntu/.ssh/id_rsa):
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
```
以下のファイルが生成されます

```
$ ls -l
total 12
-rw------- 1 hoge hoge 1675  2月 23 15:06 id_rsa
-rw-r--r-- 1 hoge hoge  404  2月 23 15:06 id_rsa.pub
````

秘密鍵の権限を変更する！

```
sudo chmod 600 id_rsa
```

公開鍵の内容をクリップボードに保存

```
cat id_rsa.pub
長蛇の文字列が出てくる
```

GitHubにコピーしたのを登録する

GitHub上で以下の順にクリック
↓
・GitHubの右上の自分のアイコン => 設定(settings) => SSH and GPG Key => New SSH Key

Keyの欄にさっきコピーした公開鍵の内容を貼り付けて保存

テストでpushしてみる
---
```
cd "git initしたディレクトリ"
git push origin master
```
HTTPSの時と違い、パスワード等は問われない！
【PHP】【初心者】値渡しと参照渡し

##値渡しってなんぞ
関数を呼ぶとき、引数って使いますよね。
このとき、呼び出した先に渡された値は、呼び出し元の変数を**コピーして**使っています。
つまり、呼び出し先の関数でこの引数を変更しても、呼び出し元にはまったく影響がないということです。

```php5
public function start()
{
	$number = 10;

	// 上記の変数を使って関数を呼びます
	$this->oneUp($number);

	echo '3:' , $number, ' 関数の後、呼び出し元の値', PHP_EOL;
}

private function oneUp(int $number)
{
	echo '1:', $number, ' これが関数に渡された値', PHP_EOL;

	$number += 1;

	echo '2:', $number, ' 引数に１を足した値', PHP_EOL;
}
```

実行結果

```
1:10 これが関数に渡された値
2:11 引数に１を足した値
3:10 関数の後、呼び出し元の値
```

「3:」の値が変化していないことから、コピーであることがわかります。
これを**値渡し**と言います。

##値渡しで進める通常の処理
せっかく関数で増やしたんだから呼び出し元でも使いたいよ、というとき、
人は呼び出し元で「別の変数」として受け取ります。

```php5
public function start()
{
	$number = 10;

	// 左辺で別変数を指定する
	$oneUpNumber = $this->oneUp($number);

	echo '3:' , $oneUpNumber, ' 関数の後、呼び出し元で受け取った値', PHP_EOL;
}

private function oneUp(int $number)
{
	echo '1:', $number, ' これが関数に渡された値', PHP_EOL;

	$number += 1;

	echo '2:', $number, ' 引数に１を足した値', PHP_EOL;

	// 呼び出し先でもreturnで値を返す
	return $number;
}
```

実行結果

```
1:10 これが関数に渡された値
2:11 引数に１を足した値
3:11 関数の後、呼び出し元で受け取った値
```

こんな感じで、通常は処理を進めます。

##参照渡し
ところが、こういった手順を踏まなくても、
呼び出し先で、呼び出し元の値を書き換えてしまう渡し方があります。
それが**参照渡し**です。

```php5
public function start()
{
	$number = 10;

	// 上記の変数を使って関数を呼びます
	$this->oneUp($number);

	echo '3:' , $number, ' 関数の後、呼び出し元の値', PHP_EOL;
}

// 受け取った引数の頭に&をつける
private function oneUp(int &$number)
{
	echo '1:', $number, ' これが関数に渡された値', PHP_EOL;

	$number += 1;

	echo '2:', $number, ' 引数に１を足した値', PHP_EOL;
}
```

実行結果

```
1:10 これが関数に渡された値
2:11 引数に１を足した値
3:11 関数の後、呼び出し元の値
```

関数で受け取った引数の頭に「**&**」をつけたことで「3:」の値が変化しました。
呼び出し先の関数でも呼び出し元の変数(メモリアドレス)を「**参照**」しているからです。

##ここが大事な注意点
ところが、ソースの中でこういった参照渡しが存在すると、
「あれ、変数の値が途中でいつの間にか変わってる？？？」
という混乱の元になります。
同じ名前の変数が処理の前後で値が変わっていてしまうと、
そのことに大変気付きにくいので、大災害の火種になりかねません。

関数で値を変えて、それを使いたいのであれば別の変数として受け取りましょう。

~~ちなみにPHPではオブジェクトはデフォルトで参照渡しです。これも注意しましょう。~~
追記
デフォルトで参照渡しというのは間違いです。[こちらの記事](https://qiita.com/tadsan/items/0f7c20bdde119c9ce13e)参照。
同じ方の&(リファレンス)の使い方の[記事](https://qiita.com/tadsan/items/74f992dcc48216b571bd)も参考になりました。
【VSCode】ショートカットキー一覧を表示するショートカットキー

#最初に
VSCodeを触っていたらショートカットキー一覧を表示するショートカットキーを偶発的に見つけたので備忘録として残します。
OSはWindowsです。

##`Ctr + K + S`
このコマンドで一覧を表示できます。

#まとめ
色々眺めて使いやすそうなものとか覚えておくといいかも

#編集可
ショートカットキーの編集もできるので、他のIDEやテキストアプリと共通化もできる。
Next.jsアプリをChromeで開きっぱにするとRailsアプリで "/_next/webpack-hmr" のRoutingエラーになる話

## 問題
rails s でローカルサーバーを起動したところ、20秒ごとにNo route matches [GET] "/_next/webpack-hmr" のエラーが出た。

1日前まで普通に動いていたのでおかしいなあと思いつつググってみるとこんなIssueがGitHubに。
[ActionController::RoutingError (No route matches [GET] "/_next/webpack-hmr") every 20secs](https://github.com/rails/webpacker/issues/1447)

## 原因と対策

別で作業をしていたNext.jsのアプリのChromeタブが原因ぽいです。

解決方法はNext.jsアプリのChromeタブを閉じるだけですね。

## 所感
このIssueなかったらこの人みたいにめちゃくちゃ時間かかったかも。。。

ということで秒速で解決できますが、一見不可思議な問題なので一応日本語ソースとして投稿しておきました。

お役にたてれば幸いです。
3分アジャイル デイリースクラム(2)

デイリースクラムとは、開発チームのための 15 分間のタイムボックスのイベントである。
スプリントでは、毎日デイリースクラムを開催する。
開発チームは、次の 24 時間の作業を計画する。前回のデイリースクラムから行なった作業の検査と今後のスプリント作業の予想をすることで、チームのコラボレーションやパフォーマンスを最適化するのである。
デイリースクラムは毎日、同じ時間・場所で開催し、複雑にならないようにする。

---

開発チームはデイリースクラムを使って、スプリントゴールとスプリントバックログの進捗を検査する。
デイリースクラムは、開発チームがスプリントゴールを達成する可能性を最適化する。
開発チームは、自己組織化チームとしてスプリントゴールを達成し、スプリント終了までに期待されるインクリメントを作成できるかを毎日把握しなければいけない。

デイリースクラムの構成は、開発チームが設定する。スプリントゴールを目指している限り、他のや
り方で行なっても構わない。質問を使うチームもあれば、議論ベースで進めるチームもある。
たとえば、以下のような例を使用するといいだろう。

---

• 開発チームがスプリントゴールを達成するために、私が昨日やったことは何か？
• 開発チームがスプリントゴールを達成するために、私が今日やることは何か？
• 私や開発チームがスプリントゴールを達成する上で、障害となる物を目撃したか？

---

開発チームやチームメンバーは、デイリースクラムの終了直後に集まり、スプリントの残作業につい
て、詳細な議論・適応・再計画を行うこともある。

---

スクラムマスターは、開発チームにデイリースクラムを開催してもらうようにする。ただし、デイリースクラムを開催する責任は開発チームにある。スクラムマスターは、デイリースクラムを 15 分間のタイムボックスで終わらせるように開発チームに伝える。

デイリースクラムは開発チームのためのミーティングである。それ以外の人たちが参加する場合、開発チームの邪魔にならないようにスクラムマスターが配慮する。
デイリースクラムは、コミュニケーションを改善し、その他のミーティングを取り除き、開発の障害物
を特定・排除し、迅速な意思決定を強調・助長して、開発チームのプロジェクト知識のレベルを向
上させるものである。これは、検査と適応の重要なイベントである。


---

## デイリー

• 開発チームがスプリントゴールを達成するために、私が昨日やったことは何か？
• 開発チームがスプリントゴールを達成するために、私が今日やることは何か？
• 私や開発チームがスプリントゴールを達成する上で、障害となる物を目撃したか？


---

出典

https://www.scrumguides.org/docs/scrumguide/v2017/2017-Scrum-Guide-Japanese.pdf
[Flutter] TextFormFieldとアイコンを横並びに配置しようとするとビルド時にエラーが出た。

## 状況

日付入力用のテキストフォームとカレンダーアイコンを横並びに設置しようとすると、
ビルド時にエラーが出たので、その解決方法を共有。

## 修正前のソース

```dart:view.dart
Row(
  children: [
     TextFormField(
        keyboardType: TextInputType.number,
        controller: dateController,
        decoration: const InputDecoration(
          labelText: '日付',
          border: OutlineInputBorder(),
        ),
        onSaved: (String value) {
          setState(() {
            dateController.text = value;
          });
        },
      ),
    ),
    IconButton(
        icon: Icon(calendar),
        onPressed: () async {
        //  アイコン押下時のイベント
        }),
  ],
),
```

## エラー内容
` EXCEPTION CAUGHT BY RENDERING LIBRARY
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint. For example, if the
InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a
SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.`

TextFormFieldには固有の幅がなく、
親要素の全幅にTextFormFieldのサイズを設定しようとしてエラーが起こっている。

## 解決方法

Flexible配下に置くことでよしなに幅を調節してくれる。

```dart:view.dart
  Flexible(
    //この中にTextFormFieldを設置
  )
```

## 修正後のソース

```dart:view.dart
Row(
  children: [
    Flexible( // ←追加
      child: TextFormField(
          keyboardType: TextInputType.number,
          controller: dateController,
          decoration: const InputDecoration(
            labelText: '日付',
            border: OutlineInputBorder(),
          ),
          onSaved: (String value) {
            setState(() {
              dateController.text = value;
            });
          },
        ),
    ),
    IconButton(
        icon: Icon(calendar),
        onPressed: () async {
        //  アイコン押下時のイベント
        }),
  ],
),
```

### 参照

https://stackoverflow.com/questions/45986093/textfield-inside-of-row-causes-layout-exception-unable-to-calculate-size
c,c++備忘録2

[c,c++備忘録1](https://qiita.com/jajaja/items/08baaaed38023ee2c3c7)

##目次
bit左シフトをbit表記の桁数以上してみる 20/11/4
小数点型変数の値が整数値がチェックする 20/09/20
余りを使う際のテクニック　20/7/15
2進数表記時の1の数を求める 20/7/15
bitsetを用いる時の型のサイズ指定は定数で行う。　20/7/6
2minの目安　2020/6/17
配列などの全要素にある値を代入する 2020/6/16
pythonっぽいfor文の書き方 2020/6/16

##bit左シフトをbit表記の桁数以上してみる 20/11/4
```c++
  int i = 4;
  cout << (i >> 2) << endl; // 1
  cout << (i >> 3) << endl; // 0
  cout << (i >> 8) << endl; // 0

```
となった。
つまり、bit表記の桁数以上左シフトをしても0。
(bit表記した時に1を表記しない桁は0で埋められてるから？)

##小数点型変数の値が整数値がチェックする 20/09/20
`floor`を使う
`double x;`のxの値が整数値かチェックする時は
`if(floor(x) == x)`
[浮動小数点数の値が整数であるかどうかを調べる(C++, Ruby, JS, Go)](https://qiita.com/Nabetani/items/3280a08340aeececfe33)

##余りを使う際のテクニック　20/7/15
modの性質を使う
[合同式の意味とよく使う６つの性質](https://mathtrain.jp/mod)

##2進数表記時の1の数を求める 20/7/15
`__builtin_popcount(temp)`
関数を用いる。
引数はint(long longとか、doubleとかでもできるかは試してない)
他のbuiltin関数[GCCのビルトイン関数メモ](https://naoyat.hatenablog.jp/entry/2014/05/12/143650)

##bitsetを用いる時の型のサイズ指定は定数で行う
`bitset<8> bs1(131uL); // 10000011`
こんな感じ。
`
int a = 131uL;
bitset<a> s(tmp);
`
みたいなのはだめ。
[bitset](https://cpprefjp.github.io/reference/bitset/bitset.html)

##2minの目安
[計算量オーダーの求め方を総整理！ 〜 どこから log が出て来るか 〜](https://qiita.com/drken/items/872ebc3a2b5caaa4a0d0)

##配列の全要素にある値を代入する

```cpp
std::vector<int> v(5);

// v を 3 の値で埋める
std::fill(v.begin(), v.end(), 3);
```
[std::fill](https://cpprefjp.github.io/reference/algorithm/fill.html#gsc.tab=0)

##pythonっぽいforの書き方

```cpp
int ar[] = {1, 2, 3, 4, 5, 6, 7};
    for(int x : ar) {
        std::cout << x << "\n";     // 1 2 3・・・7 と順に表示される
}
```
[C++11 範囲ベース for ループ](http://vivi.dyndns.org/tech/cpp/range-for.html)