OmniAICreator/Qiita-1.07M huggingface dataset:
同人プロジェクトマネジメント入門：人間関係編その1

[同人プロジェクトマネジメント入門の目次はこちら](https://qiita.com/wolfmagnate/items/97bf9a9f8c58ede3fb21)

- - -

# はじめに
人間関係というのも、プロジェクトの進行を左右する重要な要素です。
メンバー同士が良い連携をするからこそ生まれる生産性というのもあるでしょう。
その1では、日常的に人間関係を構築するテクニックを紹介します。

# 注意点
**人間関係維持のテクニックはあくまで補助的な要素です！**
というのも、基本的に仕様書や計画が無茶を言わない限りは人間関係が大きく破綻することはないのです。
大抵の場合「あいつがこの仕事しない」に代表されるような、プロジェクト内部の軋轢が人間関係の悪化を招きます。
つまり、基本的なタスクの管理をやることが人間関係を充実させる最大の方法だということです。

# 人間関係を構築する意義
## 仕事と友情を抱き合わせる
友情・努力・勝利は漫画の世界の話ですが、実はある程度相関します。
その理由は、「メンバー間の友情があれば、人間関係の悪化を恐れてプロジェクトからの離脱が難しくなるので、強制的に努力する圧力が生まれて、最終的にプロジェクトの完成確率が上がる」という理屈です。
確かにこれは村社会な仕組みですが、そもそも、同人プロジェクトは個人の権利を守りつつ働かせるような仕組みを持っていません。モチベーションが最初が最高潮であとから急速に切れていくからです。ある程度の強制力は必要悪です。
加えて、個人個人の目線からすると、働くより働かない方が最適な選択という状況でも、全体の目線からすると、全員に働かせてプロジェクトを完成させた方が、プロジェクトが炎上して失敗するよりも結局みんなが幸せになるという最適な選択だと思います。

## 連絡が密になる
もしメンバーと雑談する機会が定期的にあるならば、雑談に交えて進捗報告や進捗確認をすることで、連絡の頻度が一気に上がります。仕事の巻取りや配分のための情報が一気に増えることで、計画を立てやすくなる効果も期待できます。

## 指示が通しやすくなる
人間関係がないビジネスのようなドライなプロジェクトでは、モチベーションを削るような指示を出しにくいです。
強制的な仕様変更や強制的な仕事の割り当て変更などです。マネージャーはある程度権力を使ってプロジェクトを回す必要があるのですが、そのような指示を出すときに十分な信頼関係あれば、よくよく説明することで納得ないし割り切ってもらうことが出来ます。これは、本質的に上下関係がない同人プロジェクトで疑似的に権力を獲得する手段として最も有力です。

## モチベーションを喚起しやすい
一人でやっているよりも、みんなでやっているほうが、良い意味で流されることで、モチベーションが生まれやすいです。プロジェクトメンバー同士で熱意を高めあう環境があった方が、やはりプロジェクトの進みはいいです。

# モチベーションを維持するためのアドバイス
## 毎日会話しよう
上下関係のある人間関係だと、むしろ距離感が近すぎたらしんどいこともあります。しかし、同人プロジェクトではフラットな人間関係をベースにしているので、親睦を深めやすいです。
そのコツは、会話する場を多く整備するということです。同じような興味を持った人間が集まっているはずですし、まさにプロジェクトという共通の話題があるわけですから、場さえ整備すれば仲良くなれるはずです。したがって、雑談が出来るような場を作るには、出来るだけ多くの回数の会話の機会を設けるのが大事です。Discordの雑談チャンネルに常駐したり、会議後にどうでもいい話題を振ったりして、コミュ力を振り絞りましょう。

## 対面活動を増やそう
ご時世的に怒られてしまうかもしれません。しかし、特にオンライン型の活動は、コミュニティの維持には向いていても、会話が自然に始まる場を作るのが苦手で、コミュニティの生成には向いていません。偶然の出会いや相手の身振りなどの情報量からコミュニケーションがうまくできる、というのは人間の不思議ですね。対面活動が多ければ、それが単なる雑談レベルで会っても、人間関係はある程度うまく回っていきます。

## 褒めよう
何らかの成果物が上がったら、とりあえず「おお！」とか「すごい！」とか「素晴らしい進捗！」とか言っておきましょう。とりあえず褒められた側は悪い気はしないです。また、褒めるときには多くの人間の前で褒めるとより効果的です。

## 尊厳に注意した進捗確認をしよう
誰も見えない密室となるDMで、進捗が出ないことについて説教なんてされたら、モチベーションが完全消滅すること間違いなしです。逆に出来てないことを列挙するような発言を全体グループでされたら、辱められたと感じる人だっているでしょう。進捗確認はかなり感情的になりやすい部分です。

## 根回しは大事
権力の発揮にはやはり強制や摩擦が伴うものです。この摩擦を減らすには、公式に作る会議だけでなく、根回しを行っていくことも重要です。
例えば、事前に過半数を説得したうえで、「みんなで決めた」として責任を分散させ、集団の論理で個人を納得させれば、個人vs個人よりも角が立たないです。
また、効率のいいトップダウン型の強制命令よりも、裏でゆっくり話しながら要求を飲ませたり交渉したりした後に、みんなが参加する公式の会議では角が立っていないように見えるように議論を進めていく方がよいでしょう。
人が最大の経営資源ですから、プロジェクトメンバーの機嫌を取るためのコストも広義には開発予算です。

# おわりに
同人プロジェクトでビジネスのプロジェクトのような「ドライで合理的なかっこいいホワイト」運営を目指してもあまり上手くいかないことが多いです。小規模なレベルではどうしても市民社会的な人間関係よりも、村社会的・学校的人間関係が物を言いますし。マネージャーはそれを前提にした運営をすることで対応するべきでしょう。
iPhoneのフォトライブラリから複数写真を選択【PHPickerViewController】

２０２０リリースのPHPickerViewController。

#UIImagePickerControllerとなにがちがうか

**複数枚取得
アルバムへのアクセス
検索機能
プライバシー許可がいらない**

アプリでフォトライブラリーの全ての写真を取得するのではなく、
シェアピッカーからユーザーが選んだ写真だけをアプリに渡します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/8de9a6da-22ea-2c5a-2d54-6364c0cb510c.gif", width=250>
【複数枚選択】

###PHPickerの設定と表示

PhotosUIをインポートし、使用するクラスにPHPickerViewControllerDelegateを継承させます。

```swift
import PhotosUI

class ViewController: UIViewController,PHPickerViewControllerDelegate {
...
```

PHPickerの設定をして表示します。

```swift
var configuration = PHPickerConfiguration()
configuration.selectionLimit = 36 // 選択上限。0にすると無制限に。
configuration.filter = .images // 取得できるメディアの種類。

// configuration.filter = .any([.videos,livePhotos]) // 複数種類メディア

let picker = PHPickerViewController(configuration: configuration)
picker.delegate = self
present(picker, animated: true)
```

###メディアの取得

Delegateメソッドでメディアを取得できます。
メディアはitemProviderの配列で返されます。
itemProviderは、canLoadObjectメソッドで目的のメディアのクラスを取得できるか確認でき、
loadObjectメソッドでメディアデータを取得できます。

```swift
func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
    picker.dismiss(animated: true)
    // 1枚目の写真
    if let firstItemProvider = results.first?.itemProvider {
        if firstItemProvider.canLoadObject(ofClass: UIImage.self) {
            firstItemProvider.loadObject(ofClass: UIImage.self) { [weak self] image, error  in
                if let firstImage = image as? UIImage,  let safeSelf = self {
                    DispatchQueue.main.async {
                        safeSelf.firstImageView.image = firstImage
                    }
                }
            }
        }
    }
        
    // ２枚目の写真    
    if results.count > 1 {
        let secondItemProvider = results[1].itemProvider
        if secondItemProvider.canLoadObject(ofClass: UIImage.self) {
            secondItemProvider.loadObject(ofClass: UIImage.self) { [weak self]  image, error in
                if let secondImage = image as? UIImage,  let safeSelf = self {
                    DispatchQueue.main.async {
                        safeSelf.secondImageView.image = secondImage
                    }
                }
            }
        }
    }
}
```

【アルバムへのアクセス】　【検索】
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/95340fe8-10f7-f3fe-7c7a-11a5125e0eab.png", width=250> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/7e53bc43-7ae6-bd26-0311-c86e2ed11b60.png", width=250>

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
簡単な開発内容をお書き添えの上、お気軽にご連絡ください。
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
QGISのVector Benderプラグインでベクタデータの幾何補正

この記事は、[FOSS4G Advent Calendar 2021](https://qiita.com/advent-calendar/2021/foss4g)12月13日に投稿しました。

ベクタデータを幾何補正するためのプラグインを紹介します。
Vector Benderプラグインは、任意座標で計測されたベクタデータを所定の座標系に変換する機能を提供します。

# Vector Benderのインストール

1. 「プラグインの管理とインストール」
2. 「vector Bender」選択
3. インストール

![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/6c83e943-037a-e1d8-3517-d09d7e1ed530.png)


# 参照するグリッドの設定

幾何補正の際に参照すべきグリッドを設定します。
「ベクタ」→「調査ツール」→「グリッドを作成」でグリッドを作成しておきます。
グリッドを作成する方法は[QGISでグリッドラインを表示する](https://qiita.com/ishiijunpei/items/870d16daeb14f23059ae)で解説しています。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/aa5fdf66-cd16-a869-88a9-f75dfb10d524.png)

# Vector Benderの設定

## Vector Benderを起動する

「プラグイン」→「Vector Bender」→「Vector Bender」

![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/566f5a2c-1d16-2a48-c097-6bc1c35b7837.png)

## Vector Benderの設定

1. Layer to bend：幾何補正すべきベクタレイヤを指定
2. Pair Layer：「新規作成」アイコンをクリック

![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/7b6a311f-e4d1-5f53-64d2-3edf3cec9e18.png)

「新規作成」アイコンをクリックするとVector Benderというレイヤが生成されます。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/41628438-a777-1f65-dc2b-fccbd5199ee3.png)

Vector BenderレイヤのCRSをプロジェクトのCRSに設定します。

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/1f230c03-b4e5-8ee7-edba-63e334a3f021.png)

# GCPポイントの指定

Vector BenderはPairs Layerというラインベクタを作成し、ラインの始点を幾何補正される図面の任意の点に設定し、ラインの終点を、始点で指定した点が本来あるべき位置に設定することで幾何補正を行います。
最低2組のラインを設定します。

任意の点をクリックして始点を設定します。

![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/8084b34d-404e-4c68-e3cd-af8189b8336e.png)

ラインの終点（始点の本来あるべき位置）を指定します。

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/b88895df-f32b-a002-c537-29e4b703b38a.png)

1本目の始点と終点が設定されました。
「始点の位置を終点の位置に移動する」という意味になります。

![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/77178742-6d55-c3cb-6cdb-e35f03fc8db4.png)

2本目の始点と終点を設定します。

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/a02df27b-bd5a-ca96-6e50-f85176a2a34e.png)

# 幾何補正を実行する

1. Vector Benderレイヤの設定が終わったら、「Layer to bend」と「Pair Layer」の鉛筆マークをクリックして編集モードにします。
2. Run

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/99182e70-bf85-8e2f-348d-711c0aeceefa.png)

ベクタレイヤが幾何補正され、正しい座標が設定されます。

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60438/477ef616-07cf-98cd-dc50-f097296a0b38.png)
GO7007

2年ぶりくらいに秋葉原に行ってみました。改札から表に出るといくつかのビルのシャッターが下りていて、びっくりしました。コロナの影響でしょうか。

いつものように日米商事をのぞいて、ラジオデーパートに寄りました。

まず地下に降り最終処分場に行きましたが、めぼしいものがありませんでした。ずいぶんお世話になった秋葉原エレクトリックパーツなくなっていて、ちょっと暗い気分で上の階に上がりました。

3Fの下のエレベータの前にもジャンクやさんができてて、コンポジットのコネクタが出ているモジュールが300円でありました。USBコネクタもあるのでおそらくMGEGエンコーダーと思われます。

![写真（2021-12-11 9.06）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7c45887e-a34c-0dc1-115f-3771b76caa0b.jpeg)

MPEGエンコーダはいくつかいじっていて、NECとかの全く情報がないチップだとお手上げなんですが、おそらく違うだろうと、ゴーストが囁いたので、一つ買うことにしてみました。

まだ4つくらい積んでありました。

帰ってきて、分解してみました。ネジ止めではなくて、上側のブラスチックがサイドのツメで止められてる構造でした。

EZ-USB FX2やSAA7115は想定どうりでしたが見たことのないチップが出てきました。

GO7007というチップでWISchipという会社のチップです。製造は2004年くらいのようです。WISchipはシリコンバレーにあった会社のようです。

![写真（2021-12-14 12.27）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/f561935e-ff3c-f480-078b-2f9791742e82.jpeg)

GO7007は大き目のUSB 1.0が入ったチップと入ってないGO7007SBというチップがあったようです。入ってないほうはEZ-USB FX2でUSB 2.0なインターフェースをつけていたようです。

電源は9Vで適当なものを見繕ってつないでみたところUSBで認識されました。

![スクリーンショット 2021-12-11 8.10.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/4aa54bd4-b55a-d659-de78-5c700e204be3.png)

VID,PIDがEZ-USB FX2ではないのでEEPROMが付いていると思われます。

ネットで検索するとなんとLinuxのドライバ(wis-go7007-linux-0.9.8)をメーカーが出していたようで、ファームウエアもありました。

WISchipはMicronasに[2005年に買収され](https://www.micronas.tdk.com/ja/node/1441)その後MicronasはTDKと合弁しています。

GO7007は熱暴走するようで、たまたま日米商事でちょうど良いサイズのヒートシンクを購入していました。

![写真（2021-12-14 9.34）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7cade399-f539-49ca-ceb6-a7dd813a98a2.jpeg)


MPEGのエンコーダーチップを作って会社はことごとく買収されてなくなっています。呪われたチップなのでしょうか。
VSCodeの全角スペースハイライトを特定のファイルでOFFにする

2021/12/08にリリースされたVSCodeの `version 1.63` で、全角スペースがハイライトされるようになっていました。

https://code.visualstudio.com/updates/v1_63

とても便利ですが、テキストファイル等で普通に全角スペースを使いたいこともあるので、特定のファイルで機能を無効にする設定を調べました。

![スクリーンショット 2021-12-11 7.59.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504515/2f6dff12-4fa7-a7da-2f9a-fc6d9dd025bb.png)

（画像で使用している"Ricty Diminished"フォントでは全角スペースが○として表示されるため、余計にハイライトが目立ちます）

## 特定のファイルでOFFにする設定

### 1. `settings.json` を開く

mac: `command + ,`, win: `Ctrl + ,` で設定画面を開き、右上のアイコンをクリックするなどで開きます。

![スクリーンショット 2021-12-11 8.07.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504515/476768ba-7051-24af-8bdb-bb33e0e0f36d.png)


### 2. 設定を記載

`.txt` や `.text` ファイルでOFFにする場合は以下のように追記します。

`"[plaintext]"` の中に入るファイル種類については、 `"["` のように途中まで入力した段階で候補が表示されます。

```json:settings.json
{
  "[plaintext]": {
    "editor.unicodeHighlight.invisibleCharacters": false, // ハイライト機能を全てOFFにする場合
    "editor.unicodeHighlight.allowedCharacters": { // 特定の文字でのみOFFにする場合
      "　": true
    }
  }
}
```

以上で設定完了です。（もしかしたらもっと簡単な方法もあるかもしれません）

## 全てのファイルでOFFにする設定

全てのファイルでハイライトをOFFにしたい場合は、上記の設定を `"[plaintext]"` の中にネストさせずに記載します。

そもそもこの場合は、ハイライト部分にマウスオーバーすると表示される `Adjust settings` をクリックして設定を選ぶことで、自動で上記の設定が `settings.json` に追記されます。

![スクリーンショット 2021-12-11 8.32.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504515/9d5624a1-fe22-114f-6527-52ad210eac09.png)

## 余談

[リリースノート](https://code.visualstudio.com/updates/v1_63) を見たところ、この機能は、意図せず全角スペースが紛れ込むことの防止よりも、見えない文字を意図的に使った攻撃を防ぐ目的があるようです。


以下の記事では、ハングルの空白文字にあたる `\u3164` が、JavaScriptの変数として使用できることを利用した攻撃例がわかりやすく紹介されていました。

https://certitude.consulting/blog/en/invisible-backdoor/

以下のような変なコードも、ハイライトのおかげで、`\u3164` （`ㅤ`）が変数として使われている事が分かります。

![スクリーンショット 2021-12-11 8.58.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504515/1271fe02-8871-f0d0-3f69-8eaedd860d7a.png)
点字メーカープログラムの動画レビュー Part 2 - Rubyプログラミング問題にチャレンジ！ －改訂版・チェリー本発売記念－

## この記事は何？
Qiita Advent Calendar 2021「Rubyプログラミング問題にチャレンジ！ －改訂版・チェリー本発売記念－」で投稿してもらったコードを出題者である僕、伊藤淳一が動画でコードレビューしてみました。この記事はその第2回です。

https://qiita.com/advent-calendar/2021/ruby-challenge

前回のレビュー動画はこちらです。

https://qiita.com/jnchito/items/26e8bd7c635e3d32e620

### アドベントカレンダー参加者のみなさんへ

ネタバレになってしまうので、自分の投稿が完了するまでこちらの記事（動画）は見ないようにお願いします〜 :pray: 

### レビュー対象の記事はこちら！

今回レビューさせてもらったのは以下の6日目から10日目の記事です。投稿してくれたみなさん、どうもありがとうございました！

@haruguchiyuma さん

https://haruguchi-yuma.hatenablog.com/entry/2021/12/06/102158

@obreginia1 さん

https://www.obregonia1.com/blog/tenji-maker

@Paru871 さん

https://qiita.com/Paru871/items/6157937a80c2deb81e2c

@watame さん

https://qiita.com/watame/items/af9ac1f6023ec2307822

@siroemk さん

https://siroemk.hatenablog.com/entry/2021/12/10/174042

## 動画でコードレビューしています

今回のコードレビューは動画で実施してみました。だいたい1投稿あたり5分〜10分ぐらいでさーっとコメントしています。
（あまりしっかりレビューできなくてすいません🙇🏻‍♂️）

動画はこちらです 👇

https://www.youtube.com/watch?v=bCNX0BdnZiE

「それは好みの問題や！」みたいなコメントもあるかもしれませんが、何か参考になれば幸いです。

## まとめ

こんな調子でまたこの後の投稿についでもレビューしていきたいと思います。みなさん、どうぞよろしくお願いします〜！

### PR：改訂版・チェリー本が発売されました！🍒

「プロを目指す人のためのRuby入門 改訂2版（通称チェリー本）」が2021年12月2日に発売されました。この点字メーカープログラムを作る際にも役立つ知識が満載です。第1版を持っている方も持っていない方も、一度書店で手に取ってもらえると嬉しいです〜🍒

https://gihyo.jp/book/2021/978-4-297-12437-3

改訂版の見どころについては以下のブログにまとめていますので、こちらもあわせてどうぞ 💁‍♂️

https://blog.jnito.com/entry/2021/12/02/072804
経過時間を計測してグラフを出力する①

経過時間を計測してグラフを出力する機能を実装していくうう

手順1.2の二つの記事に分けて記述します。

手順
1.時間を計測する関数を作成し、結果を配列に加える
2.経過時間の配列からグラフを作成し表示

#1.時間を計測する関数を作成し、結果を配列に加える

####1.1 まず初めに、変数・パーツをいくつか宣言します。

|変数名  |型・クラス  |役割  |
|---|---|---|
|start  |Bool  |経過時間を計測しているのかどうかを判断する  |
|times  |Doubleの配列  |経過時間を格納する配列  |
|startTime  |Date  |計測開始時間を格納する変数  |
|button  |UIButton  |時間を計測する関数を呼び出すためのボタン  |

```swift
import UIKit
class ViewController: UIViewController {
    
    //時間を計測中か判断する理論値を入れる変数
    var start:Bool?
    //経過時間を格納する配列
    var times : [Double] = []
    //計測開始時間を格納する変数
    var startTime = Date()
    //計測ボタン
    @IBOutlet var button : UIButton!

```
####1.2 時間を計測する関数を作成

詳細はコードにコメントアウトとして記述。
    
```swift
    @IBAction func button(_ sender: Any) {
        
        if start != true{
            //時間を計測していなかったら行う処理
            startTime = Date()
            //startをTrueにすることで時間を計測中にする
            self.start = true
            button.setTitle("計測中", for: .normal)
        }else{
            //時間を計測していたら行う処理
            
            //ボタンを押した時点の時刻
            let endTime = Date()
            
            //DateクラスのtimeIntervalSince()メソッドを利用し差分を出す
            let time = Double(endTime.timeIntervalSince(startTime))
            //だした差分を配列に格納
            times.append(time)
            //startをTrueにすることで時間を計測していないことにする
            self.start = false
            button.setTitle("計測中じゃないよ", for: .normal)
        }
    }
    
}
```
`Double(endTime.timeIntervalSince(startTime))`の部分だけ捕捉します。
今回は**`Date`**クラスの**`timeIntervalSince（）`**を用いて、計測時間を出力しています。

**🌟使い方🌟**
>DateクラスのインスタンスA.timeIntervalSince（引数：DateクラスのインスタンスB）

のように記述することでDateクラスのインスタンスAと引数であるDateクラスのインスタンスBの差分が出力されます。

###1.3 実行結果

以下のように経過時間が配列に格納されるようになります。

![Dec-11-2021 00-27-16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/583218/3cc54c18-5ecf-889f-fb9a-717e39f540c4.gif)


手順2はこっち[経過時間の配列からグラフを作成し表示](https://qiita.com/naoking21/items/300d7331857bd7b132f9)
Autify実行結果を簡単に報告

## はじめに

この内容は、
Autify community meetup 自動テストの
管理ツールLT会でLTした内容を
再編集したものです。
- - -
<iframe src="//www.slideshare.net/slideshow/embed_code/key/e9AQn7ZeVuo2Xp" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
【npm】json-serverが起動できない


##　やろうとしたこと
SPAを1から作ってみたく、まずはモックAPIを構築したいと思い、json-serverなる30秒でモックを構築できるものがあると知り、使ってみました。

※下記参照
https://github.com/typicode/json-server

今回はグローバルにはインストールしたくなかったので、ローカルインストールしました。

```
$ npm install json-server
```

(色々、手順は端折っていますが)次に、json-serverを起動させるコマンドをpackage.jsonのscriptに書きました。

```
  "scripts": {
      "json-server": "json-server --watch db.json"
  },
```
db.jsonの中身は、DBそのものです。


## json-serverを起動する

準備が整ったので、いざ起動すべく下記コマンドを叩きました。

```
$ npm json-server
```

すると、こんなメッセージがでました。

```
Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, fund, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview
```
npmの使い方を教えてくれました…

正しくは、

```
$ npm run json-server
```
でした。

今まで深く意識しないでnpm run　してましたが、勉強になりました。
長いコマンド書かなくて良くなるので、結構便利なんですね。
Wiresharkを使い熟すために読みたい書籍

**この記事は [Wireshark Advent Calendar 2021]() 第11日目の記事です。**

ネットワークスペシャリスト試験受験に備えてコンピュータネットワークをもっと深く理解したいと予てから思っていました。しかし、新人だった頃研修で少しWiresharkを触った経験が有るのと、社外講習会でWiresharkを使ったパケット解析の方法を学ぶ研修に参加した時に操作して以来あまり触れる機会が有りませんでした。そこで2022年春のネットワークスペシャリスト試験に備えるべく、Wiresharkを用いてパケットを解析し、コンピュータネットワークへの理解を深めることにしました。筆者の手元にはWiresharkの書籍が数冊。。。押し入れの肥やしにしてしまうのは勿体ないので、この際活用方法を検討したいと思います。(書籍の画像はAmazon.comより)

# 1冊目: 実践パケット解析 第3版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/2d091d2c-866c-3b66-705b-d28e45d5063b.png)

チームのリーダーの方がネットワークの再勉強のために買った本として挙げていたのが本書でした。内容としてざっと目を通した感じだとWiresharkを使い熟してパケット解析からコンピュータネットワークの理解を進めようというコンセプトで書かれている書籍です。因みに日本語版は付録としてWiresharkでUSB機器のパケットをキャプチャする方法の解説が掲載されています。

https://www.amazon.co.jp/dp/4873118441

# 2冊目: パケットキャプチャ入門 第4版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/f03bb47e-ba63-72e6-7fdf-9243892f16a9.png)

以前Wiresharkを用いたパケット解析技術に関する講習会に参加したときに教材として使った書籍が本書でした。その講習会は本著の著者竹本氏が講師を担当しており、Wiresharkを使って初歩的なパケットキャプチャから、より本番環境に近いパケットデータを使った解析までを実際に手を動かして取り組む講習会でした。また、竹本氏は日本人としては唯一Wiresharkのソースにコミットする権限を持っている技術者でもあり、開発に携わっている方の話が聞ける非常に貴重な体験ともなりました。この書籍は初歩的なWiresharkの使い方に始まり、実践的な内容まで網羅的に解説されている印象です。

https://www.amazon.co.jp/dp/4865941398

# 3冊目: パケットキャプチャ実践技術 第2版

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/e8fe0942-be8a-f34e-8600-f859bbc2e275.png)

2冊目に挙げた書籍の続編となる書籍です。HTTPSなど暗号化が施された通信に対してWiresharkを用いてパケット解析を行う方法が丁寧に解説されています。カラーの図版(画面キャプチャー等)も豊富に掲載されており、この本を読了すれば、よりWiresharkによるパケット解析を楽しめるのではないかと思います。

https://www.amazon.co.jp/dp/4865940979

# 4冊目: パケット無線LAN編

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/731c447d-5b60-e504-d9ad-9597f2d66968.png)

無線LANネットワークのパケット解析に関する書籍です。無線LANのセキュリティにもスポットを当てています。2〜4冊目は同じ著者によるシリーズものですが、全て総ページ数400ページを超える大著です。ここまで読めばWiresharkで出来ることはほぼ網羅されているのではと思える程の情報量です。

https://www.amazon.co.jp/dp/4865940294

# まとめ
ネットワークスペシャリスト受験に向けて準備をそろそろ始めようと考えています。手始めに面白そうな所からと考えていた時にWiresharkを使い熟せたら色々出来そうだなとの考えから、今回のまとめ記事を執筆しました。ネットワークスペシャリスト試験までに全て読了したいなと思っています。
SpringBootパスワードの相関チェック

#はじめに
今回は、SpringBootを使った相関チェックの実装を行ったので、備忘録として書いておきます。

#環境
- SpringBoot2.5.5
- SpringSecurity
- Thymeleaf
- MyBatis2.2.0
- MySQL5.6.50

#実現したいこと
僕の場合は、よくあるパスワードとパスワード(確認用)の2つが一致しないといけないというバリデーションを実現したいため、そのような実装を行いました。

参考文献にあるように、`@AssertTrue`を用いての実装を行い、上記仕様のバリデーションを実現しました。

#実装

```java
import javax.validation.constraints.AssertTrue;

import lombok.Data;

@Data
public class SignupForm {

	private String password;
	
	private String passwordConfirmation;
	
	@AssertTrue(message = "PasswordとPassword confirmationは同一にしてください。")
	public boolean isPasswordValid() {
		if (password == null || password.isEmpty()) {
			return true;
		}
		
		return password.equals(passwordConfirmation);
	} 
}
```

`@AssetTrue`を用いると、相関チェックはラクに実装できます。これ以外の方法だと、自身でアノテーションを作成するなどがあります。

上記のコードを簡単に説明すると、パスワードの相関チェックは確認用の入力の際に行いたいので、if分の条件式でパスワードの入力欄がnullや空の時はバリデーションにかからないようにしています。

パスワードの入力がされた時は、パスワード(確認用)と等しいかを比較します。

#エラーメッセージの表示

```java
    @PostMapping("/signup")
	public String postSignup(@Validated @ModelAttribute("form") SignupForm form, BindingResult result) {

		/* 入力チェック*/
		if (result.hasErrors()) {
			/* NG:ユーザー登録画面に戻る*/
			return "user/signup";
		}
        
        return "redirect:/";

}
```

まずはコントローラーですが、`@Validatedアノテーション`を使うことでバリデーションのチェックができます。
そして、`BindingResult`には、バリデーションの結果が格納されます。

そのため、if分の条件式では、「バリデーション結果がエラーの時」という条件を指定します。

```html
<p th:if="${#fields.hasErrors('passwordValid')}" th:errors="*{passwordValid}"></p>
```

次にビューですが、相関チェックのメソッド`isPasswordValid`を変数化し`passwordValid`とすることでメッセージの表示を行えます。

「どこからそんな変数が来たんや、、、」という方に向けて言うと、まず、コントローラーでバリデーション結果(`BindingResult`)を格納しているため、それをビューに渡せばメッセージは表示できます。

その時に`formクラス`に定義した相関チェックのメソッドも、当然渡されることになるので、ビューで呼び出す時に「is」を抜き、変数として扱うことでメッセージを表示しているという流れです。

#参考文献
> - [Spring Boot/相関項目チェックする](https://fukuchiharuki.me/static/pukiwikidump/page/Spring%20Boot/%E7%9B%B8%E9%96%A2%E9%A0%85%E7%9B%AE%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B.html)

> - [SpringBoot + Thymeleafで相関チェックする](https://qiita.com/t-iguchi/items/ea3dd8691d52d7abe695)

> - [Spring Bootで作るWebアプリケーション⑦ - 相関バリデーション](https://penguinlabo.hatenablog.com/entry/springboot/web/7_correlationvalidation)
Faraday 2からアダプターの扱いが変わった (Faraday::Adapter::Test::Stubs::NotFound)

追記:

:::note warn
v2.0.1で`faraday-net_http`が再度追加され、デフォルトのアダプターとして使用されるようになったため、この記事で説明していたエラーは発生しなくなりました。 (@ryy さんありがとうございます)

https://github.com/lostisland/faraday/releases/tag/v2.0.1
:::

----------------------------------------

## 初めに

Faraday 2がアルファリリースされており、動作を検証してみたところ以下のようなエラーが発生しました。

```
no stubbed request for get http://localhost:4567/  (Faraday::Adapter::Test::Stubs::NotFound)
```

Faradayのバージョン: `v2.0.0.alpha-3`

## 結論

UPGRADING.md (v2.0.0.alpha-3) を見る

https://github.com/lostisland/faraday/blob/v2.0.0.alpha-3/UPGRADING.md

具体的には、

- アダプターがFaradayのcoreから外れたので、別途gemのインストールが必要
- デフォルトアダプターが `:test` になっているので、自身で設定する必要がある

```diff_ruby
require 'faraday'
+ require 'faraday/net_http'

+ Faraday.default_adapter = :net_http
conn = Faraday.new(url: 'http://localhost:4567') do |f|
  f.response(:logger)
end
```

```diff_ruby:Gemfile
gem 'faraday', '2.0.0.alpha-3'
+ gem 'faraday-net_http', '2.0.0.alpha-2'
```

## 解説

Faraday v1で以下のようなコードを書いていました。このままFaradayのバージョンを`2.0.0.alpha-3`に上げてみます。

```rb
require 'faraday'

conn = Faraday.new(url: 'http://localhost:4567') do |f|
  f.response(:logger)
end

response = conn.get('/')
```

すると、上で記載したようにこのようなエラーが出ました。

```
no stubbed request for get http://localhost:4567/  (Faraday::Adapter::Test::Stubs::NotFound)
```

### default_adapterの設定

これは以下のような変更が入ったためです。

https://github.com/lostisland/faraday/commit/c010031269f47f059989d4a666d29c97c140bedc#diff-845cc2342ac470a7b749ab1d5f24fa69c5db413a927700e241c5f6c4a67b649aL52

```diff_ruby
-    #   for the default {Faraday::Connection}. Defaults to `:net_http`.
+    #   for the default {Faraday::Connection}. Defaults to `:test`.
    #   @return [Symbol] the default adapter
    # @overload default_adapter=(adapter)
    #   Updates default adapter while resetting {.default_connection}.
@@ -150,5 +150,5 @@ def method_missing(name, *args, &block)
  self.ignore_env_proxy = false
  self.root_path = File.expand_path __dir__
  self.lib_path = File.expand_path 'faraday', __dir__
-  self.default_adapter = :net_http
+  self.default_adapter = :test
end
```

今までは`:net_http`がdefault_adapterでしたが、`:test`に変わっています。これにより、今までは`:net_http`を特に設定せずに使っていたのですが、別途`default_adapter`の設定が必要になります。

```diff_ruby
require 'faraday'

+ Faraday.default_adapter = :net_http
conn = Faraday.new(url: 'http://localhost:4567') do |f|
  f.response(:logger)
end
```

しかしまた以下のようなエラーが出ます。

```
`lookup_middleware': :net_http is not registered on Faraday::Adapter (Faraday::Error)
```

### アダプターのインストール

[UPGRADING.md](https://github.com/lostisland/faraday/blob/v2.0.0.alpha-3/UPGRADING.md#thats-great-what-should-i-change-in-my-code-immediately-after-upgrading)にあるように`faraday-net_http`をGemfileに追加する必要があります。これは、メンテナンスをしやすくするために、Faradayのコアからアダプターが除外されたためです。

そのため、Gemfileへの追加をし、インストールします。

```diff_ruby:Gemfile
gem 'faraday', '2.0.0.alpha-3'
+ gem 'faraday-net_http', '2.0.0.alpha-2'
```

そして`faraday/net_http`をrequireすると動くようになります。

```diff_ruby
require 'faraday'
+ require 'faraday/net_http'

Faraday.default_adapter = :net_http
conn = Faraday.new(url: 'http://localhost:4567') do |f|
  f.response(:logger)
end
```
高田橋の紅葉を点群化（法面を点群化する方法）執筆中

使用したツール
Mavic2Zoom
 - 自動航行アプリ　：　 Dronelink
 - ルート確認     ：　　Google Earth pro
 - SfM　　　　　　：　　Metashape
 - 点群編集　　：　　CloudCompare

https://youtu.be/xVie9v-Fmno
[Blender初級]見たいオブジェクトを中心にして観察したい時

#概要
Blenderでオブジェクトを作っている時、全体のバランスを見るためクルクル回転させて全体を観察すると思います。
その時見たいものが中心からズレたまま回転して見づらい時の解決方法です。
![スクリーンショット 2021-12-11 7.02.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/fcbeb135-6218-c26c-6bc3-1015b64229ae.png)

#本文
回転の中心にしたいオブジェクトを選択して、テンキーの「.」を押すだけ！
手を抜いたプログラム

## Long, long ago.

プログラムはあくまで手段だ、大事なのはいかに人間の「業務」を達成するかだ、等と存在を軽視したかのような時代がありました。

## 一方

プログラムそのものが実は人間の「業務」を「いかに為すか」です。

https://qiita.com/chikuwaespresso/items/55fbde95db7ff308e5eb

https://note.nkmk.me/python-str-remove-strip/

にそのままヒントを得まして手を抜いたプログラムを書きました。

### 出力

```
root@0230359a1b81:~/opt# python3 te.py
1: パソコンで文章を書いいると、手書きに比べどこか心が込もっいないと感じることはないでしょうか
2: パソコンで文章を書いいると、手書きに比べどこか心が込もっいないと感じることはないでしょうか
3: パソコンで文章を書いいると、手書きに比べどこか心が込もっいないと感じることはないでしょうか
4: パソコンで文章を書いいると、書きに比べどこか心が込もっいないと感じることはないでしょうか
```

### プログラム

```te.py
import re

s = 'パソコンで文章を書いていると、手書きに比べてどこか心が込もっていないと感じることはないでしょうか'

# てを抜く
print('1: '+ s.replace('て', ''))

# てを抜く
print('2: '+ re.sub('て', '', s))

# 関数に頼らず、てを抜く
out = ''
for search in s:
    if search == 'て':
        continue;
    out += search;
print('3: '+ out)

# てを抜くし、手を抜く
print('4: '+ s.translate(str.maketrans({'て': '', '手': ''})))
```

## Now. 

たのしくなければ続きません。
プログラムは手を抜かずに真心を込めていきたいです。

```te.py
s = 'パソコンで文章を書いていると、手書きに比べてどこか心が込もっていないと感じることはないでしょうか'
for i in s:
   print(i + "真心", end='')

```

```
パ真心ソ真心コ真心ン真心で真心文真心章真心を真心書真心い真心て真心い真心る真心と真心、真心手真心書真心き真心に真心比真心べ真心て真心ど真心こ真心か真心心真心が真心込真心も真心っ真心て真心い真心な真心い真心と真心感真心じ真心る真心こ真心と真心は真心な真心い真心で真心し真心ょ真心う真心か真心
```

土日こそたのしく純粋にプログラムに向き合いたいですねえ ...。

https://qiita.com/Chrysanthemum94/items/f80d590d1ae35aabf505

https://qiita.com/riita10069/items/54dad04a4f418856e24c

https://qiita.com/mio256/items/eb70d6d2239acc2ce94c


以上です～
UiPath Certified Professional Associate を受験して受かったので振り返り

# はじめに

先日、UiPath公式の認定試験プログラム「UCP：UiPath Certified Professional」（アソシエイト）の試験を受験し合格したのでその振り返りの記事です。

・受験のきっかけ
・どんな勉強をしたか
・振り返ってのGOOD,BAD

等、個人の感想的な面が強いです。
資格試験について知りたいという方は参考の情報を以下に記載しますので、
そちらをご覧ください。

#　参考文献
公式の試験情報です。
受験料、試験範囲、参考となるトレーニングなどが記載されています。

https://www.uipath.com/ja/learning/certification

Qiita内でもとてもわかりやすい記事があったので共有します。

https://qiita.com/miya_gis/items/bdb9872e47acf2e4c2b3

# 受験のきっかけ

社内のメンバーの方がUiPath Certified Professional Advancedに合格したのを聞き、
「自分もやってみたい！」と思ったのがきっかけです。
さすがにいきなりAdvancedを受験する勇気はなかったので、千里の道も一歩よりと、
Associateから受験しようと思い、申し込みをしました。

# 勉強方法・時間

勉強方法については、UiPathが提供しているUiPath Academyのコースを上級まで修了、
その他試験範囲に含まれていたコースを再度学びなおしました。
そのほかにも、UiPathが提供している模擬問題を満点になるまでやりこみました。
勉強期間としては一週間くらいです。

試験が終わってすぐスコアレポートとして合否がわかるのでまじでびびりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/b3defeed-2606-0a9a-8821-3eec80698908.png)
（受かって嬉しかったけど今冷静に見ると結構ぎりぎりだな…（7割で合格））

#　勉強方法でのGOOD

##　模擬問題をやりこんだ

実際の試験でも類似の問題が多かった印象なので、
やはり模擬問題や過去問題をやりこむというのはどの資格試験の勉強方法としても王道かつ確実な方法だなと改めて感じました。

##　短期決戦で挑んだ

これは自分の性格だと思うのですが、勉強期間が多いとやはり学習がダレがちなので、
今回はなるべく短い期間で合格にチャレンジしよう！と考え実現できたのがよかったと思いました。

#　勉強方法でのBAD
##　Orchestrator（以下OC）の学習がおろそかだった
もともとOCについてUiPathを学び始めてからの苦手分野であり、
今の仕事でも特に使用していないので、試験合格に特化した学習になってしまっていたところがありました。
結果として試験範囲の中で得点率が一番低かったのも今後の課題かなと思っています。

#　試験に合格してよかったこと
##　自分に自信が持てる
合格してよかったことはいくつかありますが、やはり「過去の自分にできなかったことを努力によってできるようになった、そしてそれが客観的に証明できる」というのがこの資格にかかわらず資格全般の良いところだと思います。

##　実際に仕事に活きる
合格したからと言って劇的に業務効率が上がることはありません。それは間違いないのですが「あ、そういえばこのプロパティについての設定勉強したな」とか何かわからないことが出てきたときに以前より検索ワードの精度が向上したと思っています。
結果、以前より手詰まりで固まることが少なくなりました。

#　おわりに
なんだか学習マンガのようなことを書いてしまったような気がしますが、
自分としては勉強して前よりできることが増えたと思っています。
次はAdvancedにも挑戦して、合格したらまたこうした記事を書こうと思います。
neosでlogix その22

#概要

niosでlogixやってみる。
Operatorsノードを型で分類してみた。

		


#bool

```
!
&
^
|
0 1
NAND
NOR
XNOR

```

#int

```
<<
>>
ROL	
ROR

```

#float

```
-
!=
%
?:
|V|
|V|²
+
+/-
+1
<
==
>
×
×dT	
÷	
÷dT	
≈
≤	
≥	
°
·
-1	
1/x
1-x
Distance
Filter Invalid
IsInfinity	
IsNaN
Mask
-n
To String
x²
x³	

```

#object

```
??
Get Type
IsNull
NotNull	

```

以上。
気象予報を不特定多数に公開するには予報義務許可が必要

こんにちは。
向かい風です。

不特定多数に公開するには予報義務許可が必要
--
業務でサイネージに気象予測データを表示したいという要望があったため、
気象予測APIとかを調べていたのですが、天気予報を不特定多数に公開するには、
予報義務許可が必要みたいです。
<a href="https://www.jma.go.jp/jma/kishou/minkan/q_a_m.html">気象等の予報業務許可についてよくお寄せいただくご質問</a>

確かに天気予報の嘘情報流れてたら混乱ですね。。

>予報業務は国民生活や企業活動等と深く関連しており、
>技術的な裏付けの無い予報が社会に発表されると、
>その予報に基いて行動した者に混乱や被害を与えるなど、
>社会の安寧を損なう恐れがあります。　

業務内容的には特定向けで用件は満たされるので、
予報業務許可は不要でしたが。特定向けでも毎回契約とか結ばないとなのかな。。

>特定向け予報とは、予報業務許可事業者と利用者が、契約等の関係を結び、それに基き、その契約した利用者に限って提供する予報です。一般向け予報というのは、特定向け予報以外の予報です。
node-redのUIノードを自作したい -調査編-

## node-redとは
https://nodered.jp/

ノードというものを繋げることでプログラミングをするもの

今すぐ簡単に利用するにはenebularがおすすめです

https://www.enebular.com/ja/

何を隠そう[enebularのアドベントカレンダー2021](https://qiita.com/advent-calendar/2021/enebular)の11日目です！

## カスタムノード（自作ノード）の参考サイト
* https://qiita.com/wicket/items/6077cd67f5c4807ce9e3
* https://ambidata.io/blog/2016/09/22/node-red/
* https://hiiiiiiihikaru.hatenadiary.com/entry/2017/12/22/145515
* https://qiita.com/zuhito/items/1c65fdbb3743d9f87edd

たくさんあるので作り方は省略

## [node-red-dashbord](https://flows.nodered.org/node/node-red-dashboard)のすごい魅力

[![Image from Gyazo](https://i.gyazo.com/52052785b512c82d45926e7877f9f221.png)](https://gyazo.com/52052785b512c82d45926e7877f9f221)

右側に「ダッシュボード」アイコンが追加され、

[![Image from Gyazo](https://i.gyazo.com/0bdcb7aa14a172efdf25fd308a904a24.png)](https://gyazo.com/0bdcb7aa14a172efdf25fd308a904a24)

ダッシュボードを使ったフローを追加し、

[![Image from Gyazo](https://i.gyazo.com/52765fdf999f360ba4355a6a5b175760.png)](https://gyazo.com/52765fdf999f360ba4355a6a5b175760)

レイアウトとかを設定したのち、

[![Image from Gyazo](https://i.gyazo.com/935cc0d77274e6ec9ea9701aafaaf688.png)](https://gyazo.com/935cc0d77274e6ec9ea9701aafaaf688)

UIが作れちゃう
（手順説明ではないです。実際のやり方は[公式](https://flows.nodered.org/node/node-red-dashboard)か、[こちら](https://blog.enebular.com/enebular/enebular-editor-first-contact/)のもっとわかりやすいページからもどうぞ）

### 自分もUIを自作したい

node-red-dashbordライブラリ内のソースコードを見てみると

```js:ui_button.js
module.exports = function(RED) {
    var ui = require('../ui')(RED);

    function ButtonNode(config) {
        // （略）

        node.on("input", function(msg) {
            node.topi = RED.util.evaluateNodeProperty(config.topic,config.topicType || "str",node,msg);
        });

        var done = ui.add({
            node: node,
            tab: tab,
            group: group,
            emitOnlyNewValues: false,
            forwardInputMessages: config.passthru || false,
            storeFrontEndInputAsState: false,
            control: {
                type: 'button',
                label: config.label,
                tooltip: config.tooltip,
                color: config.color,
                bgcolor: config.bgcolor,
                className: config.className,
                icon: config.icon,
                order: config.order,
                value: payload,
                format: config.bgcolor,
                width: config.width || group.config.width || 3,
                height: config.height || 1
            },
            // （略）
        });
        node.on("close", done);
    }
    RED.nodes.registerType("ui_button", ButtonNode);
};

```

typeで'button'を渡しているのか…やはり自由にできなさそうなのかな？やりたいけどちょっとまだ調査しきれていないというメモ記事でした…

enebularのよさを出す手前になってしまった無念
Next.jsのアプリをデプロイしたら、なぜかTailwind CSSが効いてない！

#起こったこと
`npm run dev`では効いていたTailwind CSSのstyled componentが、デプロイしたら一つもCSS効いてない。。

#環境
* tailwind-styled-components: ^2.0.3
* tailwindcss: ^2.2.19

#原因
**ディレクトリ構造を変えたのに、`tailwind.config.js`の`purgeを変えていなかった。**

`create-next-app`すると、ルート直下にpagesディレクトリができます。
srcディレクトリを作ってその下にpagesを移動したのに、[公式のインストールガイド](https://v2.tailwindcss.com/docs/guides/nextjs)に従って設定したpurgeのままになっていたのが原因。

```javascript:tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  // tailwindcss 2.2.19までの書き方
  // 3.0ではpurgeではなくcontent
}
```

#対処
purgeに**src**配下を指定したら無事動きました。

```javascript:tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
}
```

`npm run dev`で動くページではconfigの設定関係なく見た目変わるので、デプロイするまで気づかなかった。。
[Firebase][iOS] reauthenticate しないと request.auth.toke.email_verified が更新されなかった

**要するに：**
``Auth.auth().createUser()``後に
``Auth.auth().currentUser?.sendEmailVerification()``でメール認証した後は、
``Auth.auth().currentUser?.reload()``と
``Auth.auth().currentUser?.reauthenticate()``の両方をしておいた方が良い。

---

コード形式の方が分かりやすそうなので、↓の様に書きます。

```swift:swift
// 1. ユーザー作成
Auth.auth().createUser()

// 2. 認証メールを送信
user.sendEmailVerification()

// 3. メールに記載のリンクをクリック
// 4. クラウド側の email_verified が true になる

// 5. currentUser の isEmailVerified は false のまま
Auth.auth().currentUser?.isEmailVerified // false

// 6. currentUser の isEmailVerified を更新
Auth.auth().currentUser?.reload()
Auth.auth().currentUser?.isEmailVerified // true

// 7. データを作成しようとする
//      request.auth.toke.email_verified が false になってる！
//      セキュリティールールで
//      request.auth.token.email_verified == true
//      してると、 Permission denied になってしまう
Firestore.firestore().collection("users").document("hoge").setData(["name": "fuga"])

// 8. 再認証
Auth.auth().currentUser?.reauthenticate()

// 9. データ作成
//      request.auth.toke.email_verified は true になってる！
Firestore.firestore().collection("users").document("hoge").setData(["name": "fuga"])
```
ただただ所持金を上げていくFlutterアプリを作った

この記事は[クソアプリ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kuso-app "クソアプリ Advent Calendar 2021") の11日目の記事です。

# 背景
ポ○モンのリメイクでゲームコーナーが無くなってしまったと風の噂で聞いたので、ギャンブルっぽいものを作ろう！！！！！！！！と思い立ちました。
[bibiri-app](https://github.com/Frappuccino2316/bibiri-app)

# 内容
内容としては、「Challenge!」ボタンを押してひたすら所持金を上げていき、満足したところで「Drop」ボタンを押してリタイアします。
最高金額だった場合は記録されます。
<img width="400" alt="アプリ画像" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521898/49e484d9-a72d-2cc3-1116-07d018be6d26.png">

金額は確率で2倍〜100倍で上がっていきますが、一定確率で一気に0円になります。

`git clone`などして、ビビりながらどこまで金額を上げられるかチャレンジしてみてください。

# 実装
時間が足りず、シンプルにFlutterでStatefulWidgetだけで実装しています。
ぶっちゃけFlutterのCounterアプリの拡張版です。

ランダムに所持金を上げる箇所は0~99の乱数を生成して、確率毎に範囲を区切って倍率を返しています。
絶対もっといい書き方ありそう、、、

``` dart:utils.dart
import 'dart:math';

int randomMagnification() {
  int randomInt = Random().nextInt(100);

  if (randomInt < 10) {
    // ×0: 10%
    return 0;
  } else if (randomInt < 30) {
    // ×2: 25%
    return 2;
  } else if (randomInt < 55) {
    // ×3: 20%
    return 3;
  } else if (randomInt < 70) {
    // ×5: 15%
    return 5;
  } else if (randomInt < 80) {
    // ×10: 10%
    return 10;
  } else if (randomInt < 88) {
    // ×20: 8%
    return 20;
  } else if (randomInt < 94) {
    // ×30: 6%
    return 30;
  } else if (randomInt < 99) {
    // ×50: 5%
    return 50;
  } else if (randomInt < 100) {
    // ×100: 1%
    return 100;
  }
  return 1;
}
```

# 今後
間に合わなそうだったので最低限の状態で出してしまいましたが、以下は進めていこうと思います。
- リファクタリング
- ド派手な演出を追加
- データ永続化
- Firebaseあたりに繋いで全プレイヤーの記録を共有

来年はもっと計画的にやろう、、、、
[Firebase] Emulator のユーザーのメールアドレスを認証する

```swift:swift
Auth.auth().createUser?.sendEmailVerification { error in }
```

した後に、``firebase emulators:start``したコマンドラインに表示されるリンクにアクセスすればOKでした。
こんなのが表示されるはずです。

```
To verify the email address a@a.com, follow this link: http://localhost:9099/emulator/action?mode=verifyEmail&lang=en&oobCode=xC2yn5VyrPYuPJbYv2yf4x_jfuUEdhxv1u0lkuxEvYDLIuau9RVSG8&apiKey=fake-api-key
```
JISキーボード おすすめキー設定（windows）

本記事はTDU CPSLab Advent Calendar 2021の11日目の記事になります。
https://adventar.org/calendars/6489/

10日目は[こちら](https://note.com/bachio/n/n64b9fefa49fd)
12日目は[こちら](https://bo-neko.hatenablog.com/entry/2021/12/12/130355?_ga=2.200393198.1321290280.1639112244-1975656309.1638779253)

人生で初めて記事を書きます
読みづらいとは思いますが、よろしくおねがいしますm(_ _)m

(わかりやすい画像のなど用意できず、すみません)

#使ってないキーは有効活用すべき

「無変換」「変換」「CapsLock」「NumLock」等
普段使っていないキーはございませんか

また左上に配置されている「半角/全角」など
使いにくいと感じているキーはありませんか

例：英語を入力するつもりだったのにローマ字になっちゃって、結局Backspaceで消す、、、


本記事では、日頃の入力がちょっぴり快適になる、個人的にオススメのキー設定？を紹介しようと思います。

ちなみに私が普段使用しているPC(キーボード)は

- 有線のThinkPadキーボード JIS配列 **←メイン**
- Let's note JIS配列
- macbook US配列

https://www.amazon.co.jp/dp/B00DLK4GR4/ref=cm_sw_r_li_dp_RMBY0CWWA2QSEC5N4H13?_encoding=UTF8&psc=1

今回はJIS配列の方向けの記事になります(JIS配列のほうがいっぱいキーがあって好き)




#1.「無変換」を英字入力専用キーへ切り替え(1番オススメ)

この設定をすると「半角/全角」キーを使う必要がなくなり、

日本語を入力したいとき　→　「カタカナひらがなローマ字」キー
英語を入力したいとき　→　「変換」キー

という切り替えができるようになります


google日本語入力の導入を推奨します
何かと便利です


##google日本語入力編(推奨)
google日本語入力を利用されている方はこちら

タスクバーの言語バーを右クリック
↓
プロパティ
↓
キー設定の選択の編集
↓
入力文字なし ：Henkan  → **IMEを無効化**

これだけでOKです



これで不便な「半角/全角」キーを金輪際使わないで済みます！

当時参考にしたサイト
https://www.teradas.net/archives/2927/


##MicroSoft IMEをご利用の方はこちら
こちらは未検証です

参考サイト
https://pcmanabu.com/windows10-ime/

変換　→　**IMEオフ**




#2.無変換キーをBackSpaceキーに変更

BackSpaceは頻繁に使うキーなのに、BackSpaceキーを押そうとすると
ホームポジションから大きくズレてしまい非効率じゃないですか？

慣れるまでは大変ですが、無変換キーをBackSpaceキーにすることで、
ホームポジションを崩すことなく、快適に文字を消すことができるようになります


先程のgoogle日本語入力でも設定が可能ですが、
特定のキーを別のキーに変換する際に
オススメのソフトがあるので、そのやり方を紹介しようと思います

Change Key
https://forest.watch.impress.co.jp/library/software/changekey/

ファイルを解凍後、ChgKey.exe を**右クリックして管理者として実行**します

置き換え前のキーをクリック(今回は無変換キー)

置き換え後のキーをクリック(今回はBackSpace)

そして**登録**して**pcを再起動**すると、
無変換キーがBackSpaceキーになります



参考にしたサイト
https://haizairenmei.com/2019/10/20/changekey/


#3.Caps Lock をEnterキーに変更

「2.無変換キーをBackspaceに」
でやった方法と同様に、変更します！

コレで左手小指でホームポジションを崩さぬままEnterキーを押すことができます！


#4.PrintScreanキーとNumLockキーを 　Alt + tab キー割り当て(2番目にオススメ)

私は普段NumLockキーやPrintScreenキー(win + Shift + S で代用)を使用しないため、
Alt + Tab　キー(同時押し判定)に割り当てています

使用ソフト：HotkeyP
https://sourceforge.net/projects/hotkeyp/files/

ソフトを起動
↓
右の方の「Add」
↓
変える前のキーを押す(今回の例だとNumLock)
↓
「Command」の右の　**<**　を押す
↓
「Window」の中の「Next Task」を選択
↓
左下の「OK」

**注意**
PrintScreenキーはHotkeyPでは変更できないそうなので、
私は前述のChange Keyというソフトで、ハードのPrintScreenキーを無変換キーに割り当てて
HotkeyPで無変換キーをAlt + Tab (Next Task)に設定しています
(これでPrintScreenキーを押すと無変換キーを押した判定になり、HotkeyPによりAlt + Tabを押したことになる)


当時参考にしたサイト
https://mirumi.me/hotkeyp/




#あとがき
US配列とJIS配列どちらが優れているかに関しての個人的意見


- JISキーボードは鍵括弧キーが左右に並んでいない(上下になっていて、違和感を感じる)、
- つかわないのに「かな刻印」がされていて見栄えが悪い(刻印なしのキーボードもあるが少ない)

等の理由からUS配列のほうが良いなと思いまして、
MacbookはUS配列にしてみましが、
個人的には最下段はたくさんキーが欲しいので、現在はJIS配列派です。(カスタマイズしたい)


結論として
最下段のみJIS配列
その他の段US配列のキーボードがほしいと思ってたりします
自作しようかなと思ったり、思わなかったり(大量のはんだ付けしたくない)



**最後まで読んでいただきありがとうございましたm(_ _)m**
PythonでBurp Suite拡張機能の作り方

脆弱性診断で使用しているBurp Suiteの拡張機能の作り方を簡単にメモしたいと思います。

## 環境構築

Pythonで拡張機能を使用するには、Javaで実装されたスクリプト言語のJythonをBurpに設定する必要があります。

1. [公式サイト](https://www.jython.org/download)からJython Standaloneをダウンロードします
1. Burpの Extender > Options > Python Environment を表示します
1. Location of Jython standalone jar file にダウンロードしたJythonのjarファイルのパスを指定します

これでPythonで書かれた拡張機能を使用できるようになります。

## 作り方

Burp拡張機能のサンプルは [Burp Suite Extensibility](https://portswigger.net/burp/extender) で公開されています。
後は [Burp Extender API](https://portswigger.net/burp/extender/api/) も見ながら書いていきます。Burp Extender API の日本語訳されたページもあります！

* https://burp-resources-ja.webappsec.jp/API/burp/package-summary.html


1. BurpExtenderというclassをこねこねしていきます
1. registerExtenderCallbacksメソッドに拡張機能で使用する機能などを登録します
1. 例としてProxyのリクエストやレスポンスを通知するProxyListenerを登録します
1. processProxyMessageメソッドで、Proxyのリクエスト時の処理などを記述する

```python
from burp import IBurpExtender
from burp import IBurpExtenderCallbacks
from burp import IProxyListener

class BurpExtender(IBurpExtender, IProxyListener):
    def registerExtenderCallbacks(self, callbacks):
        callbacks.registerProxyListener(self)
        ...

    def processProxyMessage(self, messageIsRequest, message):
        # リクエストのみ処理する
        if not messageIsRequest:
            return
        ... 何かしらの処理 ...
```

IProxyListener以外にも下記のリスナーも用意されています (一部抜粋)

- IHttpListener
    - Burpが作成したリクエストやレスポンスがリスナーに通知
- IScannerListener
    - Scannerツールが報告する問題を通知

### UIの作成

APIにあるITabを使用することで簡単にカスタムタブをBurpに追加することが可能です。

1. registerExtenderCallbacksメソッドでカスタムタブを追加します
1. getTabCaptionでカスタムタブのタブタイトルを設定します
1. getUiComponentでカスタムタブに表示されるコンテンツを返します

```python
from burp import IBurpExtender
from burp import IBurpExtenderCallbacks
from javax.swing import JPanel

class BurpExtender(IBurpExtender, ITab):
    TAB_NAME = "Test tab"

    def __init__(self):
        self._main_panel = JPanel()
        ...

    def registerExtenderCallbacks(self, callbacks):
        callbacks.addSuiteTab(self)
        ...

    def getTabCaption(self):
        return self.TAB_NAME
    
    def getUiComponent(self):
        return self._main_panel
```

コンポーネントにはJava SwingやJavaFxなどが使用できるため、検索すると沢山の情報を得ることができます。
カスタムUIには、ITab以外にも下記が用意されています(一部抜粋)

- IContextMenuFactory
- IContextMenuInvocation
    - カスタムメニューの追加 (Burpの右クリックで表示されるメニュー)
- IMessageEditorTab
- IMessageEditorTabFactory
    - HTTPメッセージエディタにカスタムタブの追加

## 拡張機能の読み込み

1. Burpの Extender > Extensions > Burp Extensions を表示します
1. Addボタンをクリック、Extension Details > Extension type で Python を選択
1. Extension file の Select files で作成した .py を選択
1. Nextボタンをクリックし、Errorに何も表示されない場合は読み込み成功

## 最後に

~~BurpのUIで日本語が使いたい...。~~ Javaで作ればできる  
~~作成中の拡張機能が完成したら紹介したい。~~
変数名を変える

プログラムを作っているうちに、変数名を変えたくなることがあります。
このような時のために、Scratchには変数の名前を変えることができます（他のプログラム言語でいうところの「リファクタリング」にあたります）。
コードのカテゴリから「変数」を選び、名前を変えたい変数を右クリックします。

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/a7dd6f23-0c62-0531-9582-556aac18e1cf.png">

ダイアログボックスが表示されるので、新しい変数名を入力します。

<img width="75%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75307/410ad835-86b1-889c-30c5-c63c71aee7f6.png">

これで変数名を変えることができます。
CSSのコーディング規約を決めてたら喧嘩になりかけました。

この記事は[豊田高専 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nit_toyota)の 11 日目の記事です。

## はじめに

私のプロジェクトでは、コーディング規約の改善がたまーに行われます。
まだ発足して日が浅いプロジェクトなので、開発中に決まったフワッとしたルールを固めるためにコーディング規約を定義する感じです。
規約も固めずに開発進めてるんか...とツッコみたいところは重々承知なのでそこは触れないでください。

コーディング規約を決めるときはプロジェクトメンバー数人で集まって、話し合いながら決めていきます。
しかし、全員が「この規約でいい」と納得してから規約の追加を行うので、納得するまで話し合いを行うこともあるわけです。
本記事では、CSS の規約決めで~~殴り合い~~ｱﾁｱﾁの討論が起こった時のお話をしていきます。
※本当に殴り合いが起こったわけじゃありません。リモート会議なので画面を殴りながら話していただけです。

## 問題になった規約

今回問題になったのは、**プロパティの宣言順序**です。以下の 2 つの派閥に分かれました。

- [Google のコーディング規約](https://google.github.io/styleguide/htmlcssguide.html#Declaration_Order)に則り、アルファベット順に書けばええやん！派閥
- 視覚順のほうがわかりやすいやん！派閥

よく言われている問題ですね。
言い忘れていましたが、私のプロジェクトでは基本 Google のコーディング規約を元に開発が進められています。よって、1 つ目の派閥が出てきました。

それぞれの言い分はこんな感じです。

### アルファベット順派閥

- 実装者による記述順序の揺らぎが無くなる！
- 新規でプロジェクトに参加した人がわざわざ順序を覚えるのは大変！
- 目的のプロパティを探しやすい！

### 視覚順派閥

- アルファベット順は気持ち悪い！width と height が離れてるってどういう書き方や！！
- 同じようなプロパティでまとめられるため、書きやすい！

まぁこれもよく言われている通りの言い分です。
そんなわけで結局 30 分話して以下の規約になりました。

## 弊プロジェクトの規約
CSS のプロパティは以下の順序で宣言します。
同じ所属のプロパティはアルファベット順で宣言します。

1. ボックスに関するプロパティ(display, margin など)   
   特に、ボックスに関するプロパティは以下の順序で宣言します。  
   1-1. display  
   1-2. 位置に関するプロパティ(position, top など)  
   1-3. margin,padding  
   1-4. 大きさに関するプロパティ(width, height など)  
   1-5. その他のプロパティ  
1. ボーダーに関するプロパティ(border, border-radius など)
1. 色に関するプロパティ(background-color, color など)
1. フォントに関するプロパティ(font-size, font-family など)
1. その他のプロパティ

**要するに半々です。**よく使うプロパティだけは、順番が決まってます。
新規メンバーが覚えることは少なめに、かつできるだけ視覚順に。
どっちつかずになるのが一番いけない感はありましたが、とりあえずこれで殴り合いは終結しました。

## まとめ

正直どっちが正しいかわかりませんでした。
結局は何を優先するかだと思います。CSS を全く知らない人に見せるコードなら視覚順のほうがわかりやすいと思いますし。 :sushi: 
ちなみに私はアルファベット順派でした。
Visual Studio Code かわいくなるってよ

## Visual Studio Codeのフォントを変えよう

**「Viual Sutadio Codeでかわいいフォントが使いたい」**

そんなニーズがあると知ったので、早速やり方をまとめます。

## 前提事項
|No.|分類|前提|備考|
|--|--|--|--|
|1|OS|Windows 10 or 11|
|2|導入フォント|[うずらフォント](http://azukifont.com/font/uzura.html)|
|3|利用ツール|JDK|手順を統一する都合上、zipファイルを解凍するコマンドとして利用する。|

JDKは必ずしも必要ではありません。以下の場合は導入不要です。

* unzipコマンドが利用可能で手順を読み替えることができる
* explorerで開いて解凍するなど、代替の手順を考えることができる

脳死でコピペしたい場合に限り、[この手順](https://qiita.com/shupeluter/items/3ca0dfab64385d6da384#jdk)を参考にJDKを導入してください。

## fontの入手 とインストール

コマンドプロンプトを開き以下のコマンドを実行

``` batch:コマンドプロンプト
> mkdir c:\fonttmp
> cd c:\fonttmp
> curl -O http://azukifont.com/font/uzurafont100.zip 
> jar -xvf  uzurafont100.zip 
> explorer uzurafont100\uzura.ttf
```

ここまで実行すると、以下のような画面が表示されるので、「インストール」を押下する。

![WS000040.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/9d131276-323a-f16b-71ce-4ec14b423c58.jpeg)

インストール完了後、以下のコマンドを実行

``` batch:コマンドプロンプト
> cd c:\
> rmdir /S fonttmp
> dir c:\fonttmp ※ディレクトリが存在しないことを確認
```

## VS Code のフォント変更
VSCodeを起動し、メニューから「ファイル⇒ユーザー設定⇒設定」を選択する。
![WS000048.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/062b1baf-272e-0f25-0445-d73a6f984840.jpeg)

検索メニューにfont と入力
![WS000050.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/880eb944-e24a-0f94-e7bf-1ff14bc5c9ac.jpeg)

「Editor:font family 」うずらフォントと入力
![WS000051.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/2e6d5611-22d0-41a4-b760-d2eeaaa9eda1.jpeg)

エディタ画面に移動すると。。。フォント変更の完了！！
![WS000052.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/406b397d-002b-bc3b-8772-8227b7be1a4f.jpeg)

## 付録：フォントファミリの調べ方
VSコードでフォントを指定する場合、「フォント名」ではなく、「フォントファミリ」を指定する必要があります。そこでフォントファミリを確認する方法を説明します。

  * コントロールパネルを起動
  
  ![WS000041.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/35376e8b-7ff1-1240-c46f-3b30dc5874b6.jpeg)
 
  * 検索フィールドに「font」を入力
 
 ![WS000042.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/8a47694f-d3ea-9ebb-7160-51c98ba87bc1.jpeg)
  
  * 表示される「font」メニューをクリック
  
 ![WS000043.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/b245eeb9-b77a-a5ee-029d-cb25eeda6226.jpeg)

  * 右上のハンバーガーメニュをクリック

![WS000044.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/0295e463-cc75-23dd-e233-e219ad8a263b.jpeg)

  * 「詳細」を選択
 
![WS000046.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/76527305-3060-96b6-5bd4-e17085d211d9.jpeg)


  * 「名前」フィールドの右わきをクリックし、「フォントファミリ」を表示項目に追加
  
![WS000047.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/9c05e8aa-77a8-f7ea-057c-5bce35a204be.jpeg)


  * 知りたいフォントのフォントファミリを確認

  ![WS000049.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/837176/1deb05c1-b762-ed15-70cf-02ea044d45ef.jpeg)


## 免責事項
この手順を試してみて被るあらゆる事象について当方はいっさいの責任を負えません。各自ご判断の上ためしてみてください。
メール 場面別テンプレート一覧

#目次

###依頼のメール
```
株式会社●●●●
●●●●様

お世話になっております.
●●●●の●●です.

~したいと思い， ご連絡いたしました.

(具体的な内容)

~していただけると幸いです.
よろしくお願いいたします.

```

###報告のメール
```
●●●部
●●部長

いつもお世話になっております.
●●●●の●●です.

~の報告をいたします．
ご確認をよろしくお願いいたします．

========================================

報告内容

========================================

以上です．

ご不明な点があればご連絡ください．
よろしくお願いいたします。

```
mallocについて

#malloc
1.mallocとは何か
2.どう使用するのか
3.まとめ



#1.mallocとは何か
・「マロック」、「 エムアロック」と呼ばれている
・「memory（メモリ）」と「allocation（割り当て）」を組み合わせた名称になっている
・メモリ領域を動的に確保するときに使用する
・成功時には確保したメモリのアドレスが、失敗時には NULL が返却される


#2.どう使用するのか

###定義の仕方

```c
#include <stdlib.h>
void *malloc(size_t);
```

・```#include <stdlib.h>```
　これを宣言しないと、malloc関数は使えない

・```(size_t)```
　確保したいメモリのバイトサイズ


###サンプル

プログラムは
1.学生数を入力
2.学生分の点数を入力
3.「X人目：XX点」の形で出力
というものです。

可読性の低いプログラムですがお許しください。

```c
#define _CRT_SECURE_NO_WARNINGS
#include <stdio.h>
#include <stdlib.h> 

int main()
{
    int num,i;

    //ポインタの設定
    int* p;

    printf("生徒人数は?");
    scanf("%d", &num);

     //(型*)malloc(sizeof(型)  * 大きさ); 
     p = (int*)malloc(sizeof(int) * num);

     //もしメモリを割り当てられなければプログラム終了
     if (p == NULL) exit(1);

     for(i=0;i<num;i++)
     {
        //「p+1」→ ポインタの位置を1つずらしている
        scanf("%d", p+i);
     }

    for (i = 0; i < num; i++)
    {
        printf("%d人目：%d点\n", i + 1, *(p+i));
    }
    free(p);
}
```
↓　malloc部分を説明

```c
int* p;
p = (int*)malloc(sizeof(int) * num);
```

・```p = (int*)```
　(int*)には、pポインタと同じ型を入れる

・```sizeof()```
　引数に型名を指定すれば、指定した型のサイズを取得することができる

・```(sizeof(int) * num)```
　int型メモリサイズ[sizeof(int)]を、num個用意する[* num]


↓　最後に忘れてはいけないfreeの説明

```c
free(p);
```

動的に確保したメモリを解放しなくてはならない。そのときにfree(ポインタ)を行う。
free() を忘れてしまうと、メモリーリーク（メモリを確保し続けて、システムのメモリをだんだん消費していく現象）が起こってしまう。
プログラムが終了するまでシステムのメモリ資源を無駄に占有し続けることになる。




#3.まとめ

メリットとして、ソースコード記述時にメモリ使用量を決める必要がないところがある。
また、柔軟なメモリ割り当てが可能です。

私は、知識不足なところがあるのでこれからもお互いに頑張っていきましょう！