OmniAICreator/Qiita-1.07M huggingface dataset:
100日でSQLの達人になる@LeetCode! Day32 <GROUP BY句に記載できる変数名>

## 580. Count Student Number in Departments （問題レベル: Medium）要課金
今日の問題はこれ。
学科毎の履修生徒人数をリストアップするという問題。

問題は単純だが、`GROUP BY`に入れる変数名で悩んでしまった。
この問題の場合は、`dept_name`も`dept_id`も一対一でも`dept_id`を入れるとエラーになってしまう。

ポイントは当たり前なのだが、`SELECT`句に入れた変数名しか`GROUP BY`に入れられないである。

```:MS SQL Server
SELECT d.dept_name, ISNULL(COUNT(s.student_id),0) AS student_number
FROM department d
LEFT JOIN student s
ON d.dept_id=s.dept_id
GROUP BY d.dept_name
ORDER BY COUNT(s.student_id) DESC, d.dept_name ASC
```

* [LeetCode](https://leetcode.com/)の問題は、`MS SQL Server`で解いています。
TDDで機能追加するとき

# overview
- Railsのアプリに機能を追加したり編集したり削除したりするときの自己流フロー
- 備忘録
- TDDでやりんす（Minitest）


# Get staretd
### Issue作成
1. githubでissueを作る
   1. チェックボックスでテストメソッドのタイトルを書いておくと良いかも

> テストを作る際には以下のルールを設けています
> ・基本的にModelごとにcreate, read, update, deleteの4ファイルで構成される
> ・各テストファイルのテスト名はUnable to 〜, Able to 〜と２種類の文頭で始まる
> ・Unable to 〜でNGなリストを作ることでテストファイルを仕様書として機能させます

```
# example

- [ ] Create
   - Unable to create without Login
   - Unable to create with blank
   - Able to create
- [ ] Read
- [ ] Update
- [ ] Delete
   - Unable to delete without Login
   - Unable to delete other users tweet
   - Able to delete
```

### 作業ブランチ作成
> ブランチの運用ルールは以下の通りです
> main => 本番環境用のブランチ
> dev => 最新の開発用ブランチでここから作業ブランチを作る（mainへのmergeは管理者のみ）
> f/xxx => 作業用ブランチで必ずDevブランチから派生する

1. `$ git fetch`
1. `$ git status`
1. `$ git branch -a`
1. `$ git checkout -b f/add-tweet-model origin/dev`

### テストファイル作成
1. `$ rails t`
1. CRUDで4つのファイルを作成（tweetディレクトリの中で作成することでメンテナンス性up）
   1. `$ rails g integration_test tweet/create`
   1. `$ rails g integration_test tweet/read`
   1. `$ rails g integration_test tweet/update`
   1. `$ rails g integration_test tweet/delete`
1. `$ rails t`(greenであればok)

### Red, Green, Refactoring
```ruby
# test/integration/tweet/create_test.rb

def
  def setup
    @alice = users(:alice)
  end
  test 'Unable to create without Login' do
    sign_in(@alice)
    assert_no_difference 'Tweet.count' do
      post tweet_path, params: { tweet: {
        title: 'hello',
        content: 'world!',
      } }
    end
    assert_response :redirect
    follow_redirect!
    assert_equal tweets_path, request.path
  end
end
```

### PR発行
1. `$ git status`
1. `$ git add .`
1. `$ git commit -m'Add Test Suite for Tweet'`
1. `$ git push origin HEAD`
1. ブラウザからPR発行
   1. `f/add-tweet-model` => `dev`
   1. `dev` => `main`

### Heroku Deploy
1. `$ git checkout main`
1. `$ git status`
1. `git pull`
1. `rails t`
1. `git push heroku`
プログラマーの実務1ヶ月で学んだこと

2022年の1月中旬からプログラマーとしての実務がスタートしました。

:::note info
【勤務先での仕事内容】
システム開発の改修や新規機能追加などを行っています。システムはフロントをVue.js（Nuxt.js）、Vuex、Vuetify、バックエンドとホスティングをFirebase（Firestore）で構築しています。同時に、別チームでAdobe XDやSTUDIOを使用したWebサイト制作にも携わっています。
:::

1年以上独学とスクールでプログラミングに触れていましたが、実務で学べることの量と質はそれの数倍だと感じています。プログラマー系YouTuberがたびたび「**早く実務経験積め！**」と言っていた理由が分かりましたw 

まだ1ヶ月ちょっとしか勤務していないですが、その短期間でも膨大かつ貴重な経験をさせてもらっていて、とても充実した毎日をおくっています。インプットしたことを忘れないため、簡単に学んだことを列挙しました。

***
#### コミュニケーション的な部分
- コメントアウトは随所に書く（当たり前だけど必要なものだけ書く）
- 便利なツールたちの使い方（slack、Confluence、Linearが便利で驚いた。もう電話不要）
- 質問するときの注意点（質問フォーマットや、相手になるべく負荷をかけない質問の仕方を意識するようになった。）
- 自分で考えるのも大事だが、前もって質問することも大事（このタイミングは難しい。。）
- 何でもリモートでできる！（会議はGoogle MeetやGather、連絡はslackやハングアウト、作業のやりとりはLinearやBitbucket）
- 業務時間内に勉強会がある（働きながら学べるのは最高！もちろん、業務時間外でも勉強はする->楽しいからw）

#### 仕事の進め方的な部分
- コード書く前に、設計意図や仕様を理解する（ここをおろそかにすると途中で迷う）
- 作る画面や機能についてのドメイン知識はある程度必要
- エラーの特定・解消方法（console.log()めっちゃ使う。エラー文をDeepLで翻訳したり、ググったりするクセが付いた）
- ちょうどいいコンポーネント分割（レビュワーが見るコードを少なくしよう！）
- DRYの考え方（同じ機能やCSSをあちこち書かないとか）

#### 技術的な部分
- Gitコマンドと仕組み、Bitbucket（実務だとこんなに使うのかと驚いた）
- Dockerの使い方（ほんと、触りだけ。自分で0からコンテナ作ったりはできない。。）
- JavaScriptのモダンな機能（reduceとか、オプショナルチェイニング、Null合体演算子など）
- Vue.jsのお作法（まだまだ道半ばだが。）
- Vuexの考え方（最初は何をしているのか分からなくて不安でしたが、最近はようやく理解してきた。）
- Nuxt.jsの便利機能（inject関数とかpageとか）
- Vuetifyができること（できることが多過ぎて逆に何をしてくれてるのか分からなかったw 結果、CSSいらないくらいマルっとデザインしてくれることが分かった）
- Firestoreの仕組み（コレクションとドキュメント、フィールドの関係性が分かってきた）
- Adobe XDの共有方法やFigma、STUDIOというツールについて
***

最初の1ヶ月というのもありますが、これだけ新しい学びがあったことに驚いています。次の1ヶ月（もう半分過ぎようとしていますが）もどんな学びがあるか楽しみです。
Chatwork 用 Azure Logic Apps  カスタムコネクタ

あちこちに引っ越しがちなのでメモ。

```
swagger: '2.0'
info: {title: Default title, description: major chatwork APIs, version: '1.0'}
host: api.chatwork.com
basePath: /v2
schemes: [https]
consumes: []
produces: []
paths:
  /rooms/{room_id}/messages:
    post:
      responses:
        default:
          description: default
          schema: {}
      summary: Post Chat Message
      description: 指定のRoomIDにメッセージを投稿します。
      operationId: PostChat
      x-ms-visibility: important
      parameters:
      - {name: room_id, in: path, required: true, type: string}
      - {name: body, in: query, required: true, type: string, description: 'メッセージ本文。書式は、https://developer.chatwork.com/ja/messagenotation.html
          を参照。', x-ms-summary: Body, x-ms-visibility: important}
      - {name: self_unread, in: query, required: false, type: integer, default: 1,
        description: 追加したメッセージを自分から見て未読とするか, x-ms-summary: self_unread, x-ms-visibility: advanced,
        format: int32}
definitions: {}
parameters: {}
responses: {}
securityDefinitions:
  API Key: {type: apiKey, in: header, name: X-ChatWorkToken}
security:
- API Key: []
tags: []

```
Vuetifyのv-text-fieldに必須マークを入れる

v-text-fieldに下記のような`*`マークを追加しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/e11a0cf7-68f5-95df-208b-26cd31a59926.png)
# 概要

Vuetifyのv-text-fieldを使えば、簡単にリッチなテキストボックスを作成できます。
`rules`を用いることで必須等のvalidationも簡単に実装できます。

```vuejs
<v-text-field placeholder="名前" label="名前" :rules="requireRule"/>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/61026f89-4941-07f0-64de-12a943d90b01.png)
入力エラーとなる場合は下記のような表示となりますが、テキストボックスにフォーカスがあたってからエラーが表示されるため
画面表示時にどの項目が必須かどうか分かりづらいことがありました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/6936bbce-f3d5-d7d8-b0e7-62720875cdc1.png)

必須項目を表す`*`マークを赤字でlabelに埋め込めたらいいなと思ったので、調べて実装してみました。

# 記載方法

下記で実現できました。
```vuejs
<v-text-field placeholder="名前" :rules="requireRule">
  <template v-slot:label>
    名前<span style="color: red"> *</span>
  </template>
</v-text-field>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/e11a0cf7-68f5-95df-208b-26cd31a59926.png)

[公式ページのslots](https://vuetifyjs.com/ja/api/v-text-field/#slots)にlabelが記載されており、`<template>`で上書きすることができました。
`<template>`の中にはHTMLタグを記載することができるので`*`の部分のみstyleを指定しています。

`<template>`の中に`v-btn`や`v-icon`を入れることでマーク自体も色々変更できそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/fbc7476c-d313-45d1-db70-d1231031b0a5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2347087/b2355eed-c56b-56cc-38b5-41a687ab72ec.png)
GitHubのプルリクエストでファイルツリーが表示されるようになりました（ベータ版機能）

https://github.com/github/feedback/discussions/12341

# はじめに

Feature preview[^Featurepreview]（早期アクセスリリース）として、プルリクエストの変更したファイルをツリー形式で閲覧できる機能（Pull Request File Tree）がリリースされてました。
使ってみたら良かったので備忘録兼ねて、以下詳細を記載します。

# Pull Request File Treeについて

以下の様に、プルリクエストのファイル差分を開くと画面左側に変更したファイルがツリー形式で表示されます。
※ なお、変更したファイルが1ファイルの時はツリー形式で表示されないようです。

公式の説明）
> Navigate between changed files more quickly and get a high-level view of the changes in a pull request with the new file tree view. When there is available room to show it, the tree replaces the existing Jump to menu and provides a hierarchical view of the files added, changed, deleted, or renamed in a pull request.

和訳）
新しいファイルツリー表示により、変更されたファイル間をより迅速に移動し、プルリクエストの変更点を上位から見ることができます。表示可能なスペースがある場合、ツリーは既存のジャンプメニューに取って代わり、プルリクエストに追加、変更、削除、リネームされたファイルの階層的なビューを提供します。

画面イメージはこちら
![Pull Request File Tree](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6280/ec288d44-d604-bce7-a98b-4c49febb1cd9.png "Pull Request File Tree")

# 設定方法

右上のメニューより、[Feature preview]　- [Pull Request File Tree]の[Enable]ボタンをクリックすると機能をONにすることが可能です。
![スクリーンショット 2022-03-04 8.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6280/de2198aa-e61a-78df-8f80-77cbb7030477.png)

![スクリーンショット 2022-03-04 8.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6280/c6250814-f476-32d9-cc6a-f65612bea088.png)

# 参考・関連URL

- [Pull Request File Tree Feedback · Discussion #12341 · github/feedback](https://github.com/github/feedback/discussions/12341)
- [Pull-Requestにファイルツリーついたぞ！！](https://zenn.dev/miyataka/articles/pullrequest-file-tree)
- [GitHub NEW File Tree View in Pull Requests: a HUGE Productivity Boost 🥳🥳🥳 - DEV Community 👩‍💻👨‍💻](https://dev.to/n3wt0n/github-new-file-tree-view-in-pull-requests-a-huge-productivity-boost-38e3)
- [GitHubのプルリクエストが見やすくなる「Pull Request File Tree」がプレビューされました！ | DevelopersIO](https://dev.classmethod.jp/articles/github-pull-request-file-tree/)

**脚注**

[^Featurepreview]: [機能プレビューで早期アクセスリリースに触れる - GitHub Docs](https://docs.github.com/ja/get-started/using-github/exploring-early-access-releases-with-feature-preview)
Dockerfileでzypper installを実行すると終了してしまう問題の対策


## 概要

下記問題への対策

・Dockerfile で zypper install をすると、非0 が返ってきて途中終了してしまう問題



## Dockerfile

次のように、非0 の場合に「:」を実行させれば良い模様.
引用元は失念してしまった.

```
RUN zypper --non-interactive install curl    || :
RUN zypper --non-interactive install nmap    || :
RUN zypper --non-interactive install iputils || :
```
ランダムフォレストの流れを図解してみた

## 目的

この記事では、ランダムフォレストの流れを図解して説明をしていきます。
(手書きで汚いですが、ご了承ください:tired_face:)

## ランダムフォレストとは？

ランダムフォレストとは、複数の種類の決定木を組み合わせて分類や回帰(=数字の予測)を行う機械学習のモデルです。
この説明だとなかなかわからないので、具体例で考えていきます。

## 具体例：病院

「患者のAさんが来て、おそらく1年以内には糖尿病になりそう。でも、確証がない。。。
あ、機械学習でも本当に糖尿病になりそうかどうかを調べてみよう」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201104/31ed6afe-4108-098c-6df1-1fe4312acb3a.png" width="50">


このケースの場合は、Aさんが「1年以内に糖尿病なる」か「1年以内には糖尿病にならない」かの2択の分類になります。
この例で、ランダムフォレストを用いてみましょう。

機械学習を行うためには、まずデータが必要です。今回は下記のような多くの患者さんのデータがあるとします。
(すでに1501人の患者が糖尿病になったのか、ならなかったのかのデータを集めたものです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201104/d2fbbde3-bf04-f1e9-733c-92482e259b2f.png)


## ランダムフォレストの手順

ランダムフォレストの手順は下記になります。

1. それぞれ異なるデータを元に複数の決定木を作る。
2. 今回の患者 Aさんのデータを元に、それぞれの決定木で、「1年以内に糖尿病なる」か「1年以内には糖尿病にならない」を予測してもらう
3. それぞれ出てきた結果から、多数決で予測値を決める

上記の流れを解説します。

#### 1. それぞれ異なるデータを元に複数の決定木を作る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201104/43993517-005d-4044-f0aa-6c199f15aa28.png)


#### 2. 今回の患者 Aさんのデータを元に、それぞれの決定木で、「1年以内に糖尿病なる」か「1年以内には糖尿病にならない」を予測してもらう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201104/11660e5a-e5a9-9ec3-de4d-2940d39f8468.png)

#### 3. それぞれ出てきた結果から、多数決で予測値を決める

今回は、「糖尿病になる」が多数を占めているので、ランダムフォレストのAさんの予測結果は「糖尿病になる」になります。


## まとめ

コードを書いていてもよくわからなくなることが多いので、ランダムフォレストの流れを可視化してみました。
もし誰かの理解の助けになれば幸いです。
もし気になる点などあれば、ご指摘いただけるとありがたいです。
openSUSE のパッケージ管理コマンド「zypper」の実践例からの抜粋


## 概要

openSUSE のパッケージ管理コマンド「zypper」の使用方法のメモ.


## コマンド一覧

||
|:--|
|https://ja.opensuse.org/SDB:Zypper_%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246056/eeb051db-48db-2c16-de2b-8c683271dc40.png)|

　

## 実行例

### Dockerfile における zypper 呼び出しに対して、コマンドの意味を書く

```
FROM opensuse/ruby:2.6

(略)

#! 🏷️エイリアスなし で リポジトリ を追加する
RUN zypper addrepo https://download.opensuse.org/repositories/devel:languages:go/openSUSE_Leap_15.0/devel:languages:go.repo && \

#! 🏷️エイリアスあり(devel:tools) で リポジトリ を追加する
    zypper addrepo https://download.opensuse.org/repositories/devel:/tools/openSUSE_Leap_15.0/ devel:tools && \

#! 🏷️「--gpg-auto-import-keys」... 新規リポジトリの署名を自動的に信頼する
#! 🏷️「ref」...パッケージを自動更新する (「refresh」と同じ)
    zypper --gpg-auto-import-keys ref && \

#! 🏷️「-n」... 自動的に y を入力する. (「--non-interactive」と同じ)
#! 🏷️「--no-recommends」... 初期インストール時に選択解除したパッケージが再び追加されないようにする
    zypper -n in --no-recommends ruby2.6-devel \
           libmariadb-devel postgresql-devel \
           nodejs libxml2-devel libxslt1 git-core \
           go1.10 phantomjs gcc-c++ && \

#! 🏷️「in」... install
#! 🏷️「-t pattern devel_basis」... devel_basis を含むパッケージをインストールする
    zypper -n in --no-recommends -t pattern devel_basis && \
    略

#! 🏷️「rm」...パッケージ(wicked、wicked-service、autoconf など)を削除する.
#! 🏷️「wicked」...wicked は ifup に代わるツールの模様
    zypper -n rm wicked wicked-service autoconf automake \
           binutils bison cpp flex gdbm-devel gettext-tools \
           libtool m4 make makeinfo && \

#! 🏷️削除または ローカルでキャッシュをクリアする
    zypper clean -a
```


　

## 参考サイト

|URL|備考|
|:--|:--|
|https://qiita.com/gentaro/items/5a955ad63463497752b4||
|https://documentation.suse.com/ja-jp/sles/15-SP1/html/SLES-all/cha-upgrade-online.html||
|https://www.techrepublic.com/article/how-to-install-patterns-in-opensuse-and-suse/|「-t pattern 文字」|
|https://www.linuxadictos.com/ja/aprende-zypper-con-estos-sencillos-comandos.html||
|https://en.opensuse.org/Portal:Wicked|wicked は ifup に代わるツールの模様|
任意の回数繰り返してから次に行く配列の生成

# 任意の回数繰り返してから次に行く配列
次のような配列をRubyのワンクエリで作ろうとして頭を悩ませた。
```
# それぞれの数字をn回繰り返してから、1ずつ加算し、mまでの配列
[1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5]
```

## 先に結論
以下を考えました。（もっと良い解答があるようです）
```
[*1..n].map{[*1..m]}.transpose.flatten

# 例
irb> [*1..5].map{[*1..10]}.transpose.flatten
=> [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10]
```

### 解説
```
# '*'をつけて配列展開
> [*1..5]
=> [1, 2, 3, 4, 5]

# .mapで1..5のそれぞれに対して、その中で[1..10]を配列展開
## mapを使うのは、mapは完成した配列を戻り値としてくれるため
> [*1..5].map{[*1..10]}
=> [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]

# transposeで横の配列を縦にする
> [*1..5].map{[*1..10]}.transpose
=> [[1, 1, 1, 1, 1], [2, 2, 2, 2, 2], [3, 3, 3, 3, 3], [4, 4, 4, 4, 4], [5, 5, 5, 5, 5], [6, 6, 6, 6, 6], [7, 7, 7, 7, 7], [8, 8, 8, 8, 8], [9, 9, 9, 9, 9], [10, 10, 10, 10, 10]]

# flattenで平坦化した配列を返す
> [*1..5].map{[*1..10]}.transpose.flatten
=> [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10]
```


## (追加)1飛ばしなど
```
# Numeric.step(limit, step=1)を用いる
> [*1..5].map{1.step(10,2).to_a}.transpose.flatten
=> [1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 5, 5, 5, 5, 5, 7, 7, 7, 7, 7, 9, 9, 9, 9, 9]

## 1.step(10,2)で、1から10まで2step(1飛ばし)になる


# または、rangeに対して、step()して、to_aで配列にする
> [*1..5].map{(1..10).step(2).to_a}.transpose.flatten
=> [1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 5, 5, 5, 5, 5, 7, 7, 7, 7, 7, 9, 9, 9, 9, 9]
```

## もっと簡単に書けました。
https://qiita.com/ja-mik/items/e15858224398f8c27843#comment-427a684b60b4d9f1711a
配列掛け算してflat_mapすればよかった。
こちらの方がスマート！


## 素直に書くと
素直に書くとワンクエリじゃ無理な気がします。
```
a = []
[*1..n].each{|i| m.time{ a << i} }
p a

# 例
irb> a =[]
=> []
irb> [*1..10].each{|i|5.times{a<<i}}
=> [5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
irb> a
=> [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10]
```

## 補足
繰り返しが2回ならzipを使って以下のようにできますが、n回ずつ繰り返したいとなるとこれではできませんね・・・。
```
> [*1..10].zip([*1..10]).flatten
=> [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10]
```

## まとめ
複数項目について、全パターンを作成する時に、n回繰り返してmまでカウントアップする配列を作りたいとなりました。
Rubyはそれがワンクエリでできるのが素晴らしい。
JavaScript: reduce [アウトプット全くしてこなかったのでアウトプットする004]

reduceを書くことがほぼなかったのでアウトプットします。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

> reduce() で一番わかりやすいのは、配列のすべての要素の和を返す場合でしょう。

```js
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10
```

```js
(previousValue, currentValue) => previousValue + currentValue,
```
この第一引数のコールバック関数がreduceをわかりづらくしている所以だと個人的に思っています。
previousValueは今までの計算結果の`「和」`です。

適切な例えかわかりませんがバームクーヘンの作り方が浮かんだのでこれで説明します。

https://youtu.be/8OoneHdcvQY?t=118

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/4900b2ef-cc81-7327-1917-1f2182c287b7.png)

```js
const initialValue = 0;
```

上記はバームクーヘンの一番内側です。

![baumkuhen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/02189778-f64c-16b2-20c1-0639c33327f3.png)
baumkuhen.png

そして二番目にこの中で渡されるのが以下の部分。つまり生地を塗っていた今までの和です。

![baumukuhen.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/aa6f3d6b-2e86-c401-a529-afcf5df439b5.jpeg)
baumukuhen.jpeg

これをどんどん繰り返していき、最終的に`sumWithInitial`に渡されるのが以下のバームクーヘンです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660329/4900b2ef-cc81-7327-1917-1f2182c287b7.png)

ちなみに以下のようにforEachでもできますが、初期値を処理の外で管理しないといけないため、どこかで値が書き変わってしまう可能性があり、危険ですし変数の存在を頭の中に入れないといけないので脳内メモリが奪われます。

```js
const array1 = [1, 2, 3, 4];

let sum = 0;

array1.forEach((num) => {
  sum = sum + num;
});

console.log(sum); // 10
```

自分は今までこのようなコードを量産していたのですが、可読性、保守性が下がるのでreduceを使用するようにしていこうと思いました。

強くなりたい!!!!!!!
【機械学習】最新論文の異常検知手法をMVTecデータセットの実験結果で比較してみた＆各手法のPythonコードも紹介【異常検知】

現在、世界最先端の画像の異常検知手法の性能は、どのくらいなのでしょうか？
2021年度に国際会議に採択された論文の最新手法を調査してみました！（Pythonのプログラムコードも見つけたので、リンクを貼っておきます。）

論文の実験結果に記載されている[MVTecデータセット](https://www.mvtec.com/company/research/datasets/mvtec-ad)のAUC値で各手法を比較してみたいと思います。

**MVTecデータセットの画像例：**
![データセット画像例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2535236/3f5198a6-8ab6-9b0d-1a98-e389f52353dd.png)



# 手法の概要紹介
## [CutPaste](https://openaccess.thecvf.com/content/CVPR2021/html/Li_CutPaste_Self-Supervised_Learning_for_Anomaly_Detection_and_Localization_CVPR_2021_paper.html)
CVPR2021に採択された論文の手法。
CVPRはコンピュータビジョン系の世界最高峰の国際会議で、採択率は約20%。５人の一流の研究者が論文を投稿しても、１人しか採択されないという超難関です。

この手法のアプローチとしては、名前の通り、「カット＆ペースト」して学習用の異常画像を作成することです。
正常画像の一部の領域をランダムに切り取り、切り取った領域を正常画像に張り付けることで疑似的な異常画像を生成し、全く同じ重みで、元の正常画像では0、疑似的な異常画像では1を予測するようにCNNを学習させます。

論文は[こちら](https://openaccess.thecvf.com/content/CVPR2021/html/Li_CutPaste_Self-Supervised_Learning_for_Anomaly_Detection_and_Localization_CVPR_2021_paper.html)を参照ください。

Python（Pytorch）のプログラムコードは[こちら](https://github.com/Runinho/pytorch-cutpaste)。


## [InTra](https://arxiv.org/abs/2104.13897)
ICIAP2021に採択された論文の手法。
Transformerベースの異常検知手法です。
元々Transformerは翻訳などの自然言語分野の手法でしたが、近年、画像認識などにも使われるようになってきました。

論文は[こちら](https://arxiv.org/abs/2104.13897)を参照ください。

Python（Pytorch）のプログラムコードは[こちら](https://github.com/jhy12/inpainting-transformer)。


## [DifferNet](https://openaccess.thecvf.com/content/WACV2021/html/Rudolph_Same_Same_but_DifferNet_Semi-Supervised_Defect_Detection_With_Normalizing_Flows_WACV_2021_paper.html)
WACV2021に採択された論文の手法。
CNNによる特徴量抽出と確率密度分布の推定を組み合わせた手法です。
さらにLossを逆伝搬させることで勾配マップを取得し、簡単に入力画像の異常箇所を可視化することができます。

論文は[こちら](https://openaccess.thecvf.com/content/WACV2021/html/Rudolph_Same_Same_but_DifferNet_Semi-Supervised_Defect_Detection_With_Normalizing_Flows_WACV_2021_paper.html)を参照ください。

Python（Pytorch）のプログラムコードは[こちら](https://github.com/marco-rudolph/differnet)


## [ADFI](https://adfi.jp/ja)
コーディング無しで簡単にAIモデルを自動生成できるプラットフォーム。
参考情報として、[前回の記事](https://qiita.com/umapyoi/items/aa7c829b4591653f1b50)で算出したADFI（DML）のAUCも載せておきます。

ノーコードAI開発プラットフォーム「ADFI」の使い方は[こちら](https://qiita.com/umapyoi/items/ddd45a47aa79ccbde28b)。


# 各手法の比較結果
各論文にMVTecデータセットでの実験結果が載っていますので、それを一覧にまとめてAUCの値を比較しました。

**最新の異常検知手法のAUC：**
![最新手法との比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2535236/056c975f-193f-71e8-f42b-7cbbd262160c.png)


全データセットでのAUCの平均値はCutPasteが最高でしたが、実質、誤差くらいしか違いませんでした。
（アカデミックの分野の方々は、この0.01ポイント上げるために死に物狂いで研究されているので、誤差と言ったら怒られそうですが。）

ただし、どの手法も最高値を出しているデータセットがあるので、手法によって得意・不得意が異なるようです。

# 所感
世界最先端の異常検知手法を比較してみましたが、0.01ポイントの差を争う世界なのだと改めて実感しました。つまり、どの手法も高性能でした！（「誤差」と言って、ごめんなさい！）
この記事で調べた手法は、GitHubでプログラムコードが公開されているので、とてもありがたいですね！
時間あるときに、自分でも試してみようと思います。


# 関連記事
https://qiita.com/umapyoi/items/b5d3c823c0a9f30a5aa4

https://qiita.com/umapyoi/items/eba3842aeab19b62f3a6

https://qiita.com/umapyoi/items/aa7c829b4591653f1b50

https://qiita.com/umapyoi/items/ddd45a47aa79ccbde28b

https://qiita.com/umapyoi/items/7f0de31c2ac89d3c8338

https://qiita.com/umapyoi/items/5a0e21338c64fc7c44e2

https://qiita.com/umapyoi/items/b5942e3fe379c6751b1e
vistaでphotoshop その13

# 概要

vistaでphotoshopやってみる。
キャンバス作って、部分的にjpg読んで、pngで出力やってみる。

# 写真

![test12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/07bdff80-a66a-21b8-819f-b79817f73fdf.png)

# サンプルコード

```
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File("/Users/ore/eki.jpg");
open(fileObj);
var x = 100;
var y = 100;
var selReg = [[x, y], [x + 400, y], [x + 400, y + 400], [x, y + 400], [x, y]];
activeDocument.activeLayer.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
docObj.selection.select(selReg);
docObj.paste(true);
var pngOpt = new ExportOptionsSaveForWeb();
pngOpt.format = SaveDocumentType.PNG;
pngOpt.optimized = true;
pngOpt.interlaced = false;
pngOpt.PNG8 = false;
var filePath = new File("/Users/ore/test12.png");
activeDocument.exportDocument(filePath, ExportType.SAVEFORWEB, pngOpt);
alert("ok");



```


以上。
GitHub ActionsでFlutterをビルドする際「CocoaPods could not find compatible versions for pod "cloud_firestore"」エラーが発生する場合の対処

## 概要
GitHub ActionsでFlutterアプリをビルドする際、以下のようなエラーが発生してしまいしばらくハマったため、
対処方法を記録します。

```
CocoaPods could not find compatible versions for pod "cloud_firestore"
(中略)
[!] Automatically assigning platform `iOS` with version `9.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
```

(エラーメッセージでググるとPodfileを書き換える記事がヒットしますが、Flutterでは`flutter build ios`の過程でPodfileが生成されるため、この方法では対処できないと考えています)

## 対処方法
自分の場合は手元にMacOSがなくXCode経由で操作ができないため、
`ios\Runner.xcodeproj\project.pbxproj` 内の `IPHONEOS_DEPLOYMENT_TARGET` の値を 9.0 -> 11.0 に変更することで対処しました。
(Profile, Debug, Release用に3か所)

``` diff
- IPHONEOS_DEPLOYMENT_TARGET = 9.0;
+ IPHONEOS_DEPLOYMENT_TARGET = 11.0;
```

この変更を行ったところビルドが通ることを確認できました。

```
Running "flutter pub get" in flutter_tools...                      16.4s
Running "flutter pub get" in strollog...                            9.4s
Warning: Building for device with codesigning disabled. You will have to manually codesign before deploying to device.
Building *** for device (ios-release)...
Running pod install...                                            548.6s
Running Xcode build...                                          
Xcode build done.                                           1145.9s
Built /Users/runner/work/xxxx/xxxx/build/ios/iphoneos/Runner.app.
```

## 環境
Flutter: 2.10.1
GitHub Hosted Shared Runner: macOS 11
XCode: /Applications/Xcode_13.2.1.app

## 参考
https://github.com/FirebaseExtended/flutterfire/issues/7721#issuecomment-1002930650
【Excel】UNIQUE、FITER関数だけで2段プルダウンリスト選択→帳票出力っぽい仕組みをつくる

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【教えてください】<br>【優しいお兄さんお姉さん】<br>Excelで1枚目のようなデータを作成<br>2枚目のような形で1人ずつ印刷できるように抽出<br>(クラスAを選択→4名分それぞれで本人の名前、家族情報が印刷される)<br><br>Excelの技で可能でしょうか<br>説明も下手くそで申し訳ありません。<a href="https://twitter.com/hashtag/excel?src=hash&amp;ref_src=twsrc%5Etfw">#excel</a> <a href="https://twitter.com/hashtag/Excel?src=hash&amp;ref_src=twsrc%5Etfw">#Excel</a> <a href="https://twitter.com/hashtag/%E6%95%99%E3%81%88%E3%81%A6?src=hash&amp;ref_src=twsrc%5Etfw">#教えて</a> <a href="https://t.co/WDQ9gCCEp8">pic.twitter.com/WDQ9gCCEp8</a></p>&mdash; わからないことを優しいお兄さんお姉さんに教えてもらいたいアカウント (@excel_wakaran) <a href="https://twitter.com/excel_wakaran/status/1498279658495758340?ref_src=twsrc%5Etfw">February 28, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## 完成形と使い勝手

最終的にはシートは分けた方がいいけど作るのが面倒なのと説明用に同じシートの方が都合が良かったので同シートになってます。

![FMyiHBPWQAICnun.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/5d5e5d0e-9010-932c-9f4b-7447c4be8085.png)

クラスと名前はプルダウン選択
![FMyiMNwaAAAhR97.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/2cedd672-5681-5a0b-de8c-a42db70865e5.png)

![FMyiO92UcAAMjlh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/98e4bf97-c21d-0ff2-0291-ad9fa14ba039.png)

選択が決まると帳票出力欄に該当データが出てくる
![FMyiTEnUYAE5wtn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/f695feea-8f55-5cc1-900a-e44c89d661e9.png)

## 作り方
### プルダウン


１つ目は普通に重複なしリストを作るだけ
```
=UNIQUE(テーブル1[クラス])
```

![FMyjUuvacAEdiFV.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/de022e1c-a707-eb6b-b6fa-ebe557051166.png)

ここまでできたら入力規則をつける
![FMyi246aQAAB27I.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/520e8d41-e6f5-0bb6-d74d-c5adc5088724.png)

2つ目は1つ目のプルダウン選択結果を拾ってフィルタリングする
```
=UNIQUE(
      FILTER(テーブル1[名前],
           テーブル1[クラス]=$H$4)
)
```
![FMyja6zaIAAZLOO.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/f1976e64-080d-42c8-d8f7-6e29ff202558.png)

先日このような課題を見つけたのでやってみました。


![FMyi6sbagAATyMQ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/b8a3ee84-db8d-ccc6-67f6-b52604e5d84a.png)


### 帳票出力欄
あとはFILTER関数祭り
第2引数は一律同じで、第1引数にほしい列を指定していくだけ

```
=LET(
      List_,FILTER(テーブル1[続柄],テーブル1[名前]=$I$4),
      IF(List_=0,"",List_)
)
```

![FMyjqYragAE6Jgs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/9dd70618-0135-66d4-8fb9-b0ca5b8ef546.png)


```
=LET(
      List_,FILTER(テーブル1[会社、学校名],テーブル1[名前]=$I$4),
      IF(List_=0,"",List_)
)
```

![FMyjwusacAA6Z4w.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/ac878090-4127-c7bb-a698-95813427f294.png)

```
=LET(
      List_,FILTER(テーブル1[備考],テーブル1[名前]=$I$4),
      IF(List_=0,"",List_)
)
```
![FMyjz-eaAAEFFED.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/3e923239-0070-ff7d-74d9-03f38f3c1bfb.png)
【React】localhostをhttps化する方法

## はじめに
　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## Reactでlocalhostをhttps化する方法

### `create-react-app`でReactアプリケーションを作成する

```:ターミナル
$ npx create-react-app sample-app 
```

https://ja.reactjs.org/docs/create-a-new-react-app.html

### ディレクトリを移動する

```:ターミナル
$ cd sample-app
```

### サーバーを起動する

```:ターミナル
$ HTTPS=true npm start

```

https://create-react-app.dev/docs/using-https-in-development/

以下のような警告画面が表示されるので、赤枠の「詳細設定」をクリック指定ください。

![スクリーンショット 2022-03-03 21.59.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/66e53ec5-4e19-b48c-1d30-64ec22b1a246.png)

すると、画面の一番下に「localhostにアクセスする」と表示されているのでクリックしてください。

![スクリーンショット 2022-03-03 22.01.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/f2bbcdc5-3a73-ee6f-f6b9-2b62c027b2f6.png)

クリックするとReactの初期画面が表示されます。

デベロッパーツールのネットワークでスキームを確認するとhttpsとなっていることが確認できます。


![スクリーンショット 2022-03-04 3.58.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/6d8de3e4-8348-4149-659d-415c935971b3.png)


デベロッパーツールのネットワーク内にスキームが表示されていない場合には、「名前」「ステータス」・・・と表示されている箇所を右クリックして「スキーム」にチェックマークをつけてください。
grepコマンドをきちんと理解する

Linux系のOSでトップレベルに使うコマンド```grep```
パイプ「|」と併用で使っているが、逆にそれしか知らない。

grepの細かい使い方を知れば開発が捗りそうなのでここらで理解したい。

# 基礎
grepはファイルないの文字列を検索するコマンド。

```hoge.txt
apple：りんご
pen：ペン
applepen：りんごペン
```

```terminal
$ grep <検索ワード> <ファイル名>

$ grep apple hoge.txt
// => ワードに引っかかった行を抜き出す
// apple：りんご
// applepen：りんごペン
```

# パイプ「|」の活用
パイプの左の検索結果をさらに検索
```terminal
$ grep apple hoge.txt | grep pen
// => applepen：りんごペン
```

grep以外の出力に対しても使える。
めちゃくちゃ便利。
```terminal
$ ls | grep hoge
// => hoge.txt
```

# 正規表現
もちろん正規表現もいける
```terminal
// ""必須
$ grep "a.pl.*ペン" hoge.txt
// => applepen：りんごペン
```

# オプション
-n： 行番号付き
```terminal
$ grep -n apple hoge.txt
// =>
// 1:apple：りんご
// 3:applepen：りんごペン
```

-i: 大文字・小文字区別なく検索
```terminal
$ grep -i APPLE hoge.txt
// =>
// apple：りんご
// applepen：りんごペン
```

-v: 指定したワードを含まない行を検索
```terminal
$ grep -v apple hoge.txt
// => pen：ペン
```

--color: 一致した部分をハイライト表示
```terminal
$ grep --color apple hoge.txt
// => appleが強調される
```

オプションの組み合わせもできる
-ni --colorで検索するとか良さそう
```terminal
$ grep -ni --color Apple hoge.txt
// =>
// 1:apple：りんご
// 3:applepen：りんごペン
```
自己紹介

# 初めまして

現在高校3年生（卒業間近）のdejavuと申します。
大学に入る契機にプログラミングを始めるかということでログのためにQiitaアカウントを作成しました。
TeXとPythonをメインにやっていけたらなと思います。
よろしくお願いいたします。
Notionを「Cloudflare」で独自ドメイン化するときに DNS Validation Error (Code: 1004) が出た時の解決策 (2022年3月時点)

# 背景

独自ドメイン(例`example.com`)でNotionの公開ページを作りたい時に「Notion 独自ドメイン」と調べると「Cloudflare」を使った記事がヒットします。

例えば
- [Fruition: Free, Open Source Toolkit for Building Websites with Notion](https://fruitionsite.com/)
- [【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法](https://shin-hack.com/notion-domain/)

などです。これらは大変すばらしい記事です。
その中で

> DNSレコードを追加するため、「+ レコードを追加」をクリック。
> 下記3項目を入力し、「保存」をクリック。
タイプ：A
名前：取得した独自ドメイン
IPv4 アドレス：1.1.1.1

という手順があるのですが、そのまま実行しようとすると、以下のようなエラー文が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/70358179-1764-f891-ccfd-2071c1c71edd.png)


```
DNS Validation Error (Code: 1004) This record type cannot be proxied.
```
というエラーが出ます。
ここで、プロキシをOnからOffに変更して保存すると次に進めてみます。

この状態で作業を続けて、独自ドメインにアクセスすると次のようなエラーがでました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/f25ec0d6-a761-9fe5-6321-7e1ad3fda1cc.png)


```
Please enable cookies.
Error 1034
Ray ID: xxxxxxxxxxxxxxxxxx • 2022-03-01 14:29:34 UTC
Edge IP Restricted
What happened?
You've requested a page on a website that is part of the Cloudflare network. The host (iwakenlab.jp) resolved to an IP address that the owner of the website does not have access to.

What can I do?
If you are a visitor of this website:
Please try again in a few minutes.

If you are the owner of this website:
Check your DNS records to ensure they are pointed to the IP address(es) you were assigned at registration.

Was this page helpful? Yes No
Thank you for your feedback!
Cloudflare Ray ID: xxxxxxxxxxxxxxxxxx• Your IP: X.X.X.X • Performance & security by Cloudflare
```

こちらの解決方法をこの記事では述べます。

# この記事で述べないこと

- ドメインの取得の仕方
- Cloudflareでの全般の手順

以上は、先ほどご紹介した記事にお任せします。

- [Fruition: Free, Open Source Toolkit for Building Websites with Notion](https://fruitionsite.com/)
- [【無料で実現】Notionを「Cloudflare」で独自ドメイン化する方法](https://shin-hack.com/notion-domain/)

# 解決方法

Supportページのこちらを参考にします。
[Error 1034: エッジIP制限付き](https://support.cloudflare.com/hc/ja/articles/360029779472-Cloudflare-1XXX-%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)

> 考えられる原因
以前ドメインを1.1.1.1に接続しているお客様には、1034 エラーが出ます。これはCloudflareのシステムで誤設定や潜在的な不正利用を防止するために、新しいエッジ検証チェックを行っているからです。

> 解決方法
DNSレコードがお客様が管理するIP アドレスを指していることを確認し、「オリジンレス」設定にプレースホルダーIP アドレスが必要な場合は、IPv6リザーブドアドレス 100:: またはIPv4リザーブドアドレス 192.0.2.0を使います。

ということで、レコードに`1.1.1.1`を使用しているのが良くないみたいです。
今回NotionページのIPアドレスを指してほしいため、`notion.so`のIPアドレスを調べてみます。

https://domainwat.ch/site/notion.so?lang=ja#domain_info

2022年3月現在では
`104.18.23.110`
とあります。ということで[レコードを追加]を選択して

|項目|記入|備考|
|---|---|---|
|タイプ|A||
|名前|@|`example.com`のように自分のドメインでも可能|
|IPv4アドレス|`104.18.23.110`|notion.soのIPアドレスを指定|
|プロキシステータス|On||

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96970/aa5e8901-4da8-6c45-da9a-9ec60770daa2.png)

こちらの工程を行って、そのほかの作業を行うと、独自ドメインで公開することができました！！！！！！！
Macbook Airを購入したのでWindows 10を入れてみた


<h2>はじめに</h2>

Intelプロセッサを搭載したMacbook Air 2020をメルカ●で安く購入できたので、仕事にも使えるようにWindows 10を入れてみました。
Mac PCでWindowを使う方法として、本記事で採用している「BootCamp」以外にも「Parallels Desktop」や「Windows 365」などありますが、Windows 10インストールディスクを余らせていた筆者には標準機能で一番安く済む「BootCamp」を採用しました。

---

<h2>前提</h2>

・Boot Camp を使うには、Intel プロセッサを搭載した Mac が必要
・Mac の起動ディスクに 64 GB 以上の空き領域　
・Windows 10のプロダクトキー
など・・・
※詳細については、[公式ドキュメント](#https://support.apple.com/ja-jp/HT201468)を参照ください。

---

<h2>手順</h2>

１．Webブラウザで、「[Windows 10 のダウンロード](#https://www.microsoft.com/ja-jp/software-download/windows10)」にアクセス


![スクリーンショット 2022-03-01 13.44.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/dcb2a0d7-29ae-e579-2b1a-edfb9d19241b.png)

<br>
<br>

２．ダウンロードしたいエディション、言語を選択し、ダウンロードの実行
（エディションは、「Windows 10 Home」の「Windows10 Pro」2種類有）

<br>


３．「Launchpad」より、「Boot Campアシスタント」を起動

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/b9a85c73-7521-4b18-e2c7-fd98354bf708.png)

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/eaa4b028-ed20-ed6c-c0b7-88429d851b9a.png)

<br>

４．「項番２」でダウンロードしたISOファイルを選択し、Windowsパーティションを作成
※画像の通り、筆者の場合は512GBの内、Windowsに192GBを割り当てている

![スクリーンショット 2022-03-01 13.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/f68c44bb-02c9-4d46-20fe-23781fb4e827.png)

![スクリーンショット 2022-03-01 13.47.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/ba2bbf93-4431-5b76-8103-8a42888fb734.png)


５．Windows をインストール
※準備していたライセンスを使用
※必要のない外付けのデバイスはすべて取り外しておく
（以下のような画面が出てくるので指示通りに進めていく）
![image0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2411418/0eee8c5b-b709-f09d-1f1e-56c1ca286882.jpeg)

６．インストール完了後、Windowsが起動される！！



<h2>「Windows」と「macOS」の切り替え</h2>

OSの切り替え方法については、以下を参照
[WindowsとmacOSを切り替える方法](#https://support.apple.com/ja-jp/HT208123)
Azure Databricks で 機密データ保護のために hashlib を利用してみました

## 概要

機密データをそのまま公開するわけにはいかないので、そのカラムをキーにユニークな文字列（Hash利用）を付与することにより、データ処理できるようにする方法となります。 hashlibを使用した Pandas DataFrame列の機密データの匿名化を試してみました。

### ローカル環境

- macOS Monterey 12.1 
- python 3.8.12
- Azure CLI 2.33.0

### 前提条件

1. Azure環境がすでに用意されていること（テナント/サブスクリプション）
2. ローカル環境に「azure cli」がインストールされていること
3. Azure Databricks の Workspace 上で Notebook が稼働できていること。

---

## 事前準備

### データファイルのアップロード

1. 対象の Workspace の Azure Databricks ポータルで [Import & Explorer Data] を選択します
2. 「Drop files to upload, or click to browse」に対象のファイルをドラッグ＆ドロップします
3. 「DBFS」タブを選択し、「FileStore - tables」フォルダ配下にドロップしたファイル（SE_Account.csv）を確認することができます

---

## Notebook の実装

#### 対象ファイルの読込（データの抽出）

```python:cmd_1

# 対象データの確認
display(dbutils.fs.ls("/FileStore/tables/"))

# csv型式のデータファイルをDataFrameとして読取る
sdf = spark.read.csv('/FileStore/tables/SE_Account.csv', header='true', inferSchema='true', encoding='utf-8')
display(sdf)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/f3138e90-5065-de39-2bae-de65665d7cf6.png)


#### SE名をHash処理する

```python:cmd_2
import hashlib

# PySpark Dataframes から Pandas への変換
pdf = sdf.toPandas()

# カラム['U_Name']を新規作成し、Name項目をHashしたものを割り当てる
pdf['U_Name'] = pdf['Name'].apply(lambda x: hashlib.md5(x.encode()).hexdigest())
display(pdf)

# 不必要なカラムの削除後、Pandas から PySpark Dataframes への変換
df = spark.createDataFrame(pdf.drop(['J_Name', 'E_Name', 'Name', 'mailaddress'], axis = 1))
display(df)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/544022/4777a9c5-4ce1-3158-aeef-f5a7c073c84a.png)


---

### まとめ

データ分析を実施するにあたり、データの機密性が大事ということに気が付き、今回の記事を記載。ただ、かなり社内よりの内容なので、忘備録のような扱いになってしまいました、、、、、

### 参考記事

以下の記事を参考にさせていただきました。感謝申し上げます
[pythonでデータ操作を行う時の作業用コードメモ](https://qiita.com/ymto/items/67de944f2b00a7ca8cea)
俺のターミナル設定

## icebergをインストール

ダウンロードし、デフォルトに設定する。

http://cocopon.github.io/iceberg.vim/

フォントサイズ：14ポイント

## Git

```
# Git
fpath=(~/.zsh $fpath)
if [ -f ${HOME}/.zsh/git-completion.zsh ]; then
       zstyle ':completion:*:*:git:*' script ~/.zsh/git-completion.zsh
fi
if [ -f ${HOME}/.zsh/git-prompt.sh ]; then
       source ${HOME}/.zsh/git-prompt.sh
fi
GIT_PS1_SHOWDIRTYSTATE=true
GIT_PS1_SHOWUNTRACKEDFILES=true
GIT_PS1_SHOWSTASHSTATE=true
GIT_PS1_SHOWUPSTREAM=auto

setopt PROMPT_SUBST ; PS1='%F{green}%n: %F{cyan}%~%f$(__git_ps1 " [%s]")
\$ '

source ~/.git-prompt.sh
```

```
curl -o ~/.git-prompt.sh https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh
```

```
source .zshrc
```

## Homebrew

```
# Homebrew
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/tonoyama/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
```

`#set linenumbers`のコメントアウトを解除する

```
sudo nano /etc/nanorc
```
HTMLのdialog要素をスタイリングするときに気をつけること

## この記事の概要

`dialog`要素、ご存じですか？

その名の通りダイアログ的な振る舞いや役割をする要素です。
モーダルウィンドウと言えばより広く伝わるでしょうか。

簡単なダイアログならライブラリを使わなくても事足りるのですが、スタイルを当てる際に気をつけた方が良さそうなことがあったので記事にしてみました。

## 注意

Chrome（とEdge）はよっぽど大丈夫ですが、FirefoxとSafariはまだ本番投入してもブラウザが対応していません。
もう少しすれば使えるようになると思うので、今のうちに素振りをしておくのが良いかもと思います。

<picture>
  <source type="image/webp" srcset="https://caniuse.bitsofco.de/static/v1/dialog-1646320951431.webp">
  <source type="image/png" srcset="https://caniuse.bitsofco.de/static/v1/dialog-1646320951431.png">
  <img src="https://caniuse.bitsofco.de/static/v1/dialog-1646320951431.jpg" alt="Data on support for the dialog feature across the major browsers from caniuse.com">
</picture>

ポリフィルもあります。

https://github.com/GoogleChrome/dialog-polyfill

## デフォルトのスタイル

2022 年 3 月 4 日現在、ChromeとFirefoxではこのような感じです。

```html
<dialog>
  <p>
    秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある日、わたしはウェストミンスター寺院を逍遥して数時間すごしたことがある。
  </p>
  <button>閉じる</button>
</dialog>
```

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/bc9a1df9-6bbd-4f5e-fe9c-8d1f7137bf74.png)


これだけ見せられても……となると思うので補足。

- 背景全体に`rgba(0 0 0 / 10%)`がかかる
  - `backdrop`という名前
- `border`付きの矩形が描画されて、その中にテキストなりボタンなりフォームなりを自由に入れられる
- 矩形の幅や高さは中身のコンテンツにフィットする

## 説明するためにスタイルを調整

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/0235cce3-a81b-c3f0-b7c3-769f80f64687.png)

- `::backdrop`が結構薄めだったので濃くした
- 閉じるボタンを右側に配置した
- その他微調整

## 実際のコードと、変更のポイント

```diff_html
- <dialog>
+ <dialog class="dialog">
    <p>
      秋も更けて、暁闇がすぐに黄昏となり、暮れてゆく年に憂愁をなげかけるころの、おだやかな、むしろ物さびしいある日、わたしはウェストミンスター寺院を逍遥して数時間すごしたことがある。
    </p>
-   <button>閉じる</button>
+   <button class="button">閉じる</button>
  </dialog>
```

```css
.dialog[open] {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0 0 0 / 16%);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  width: 35rem;
}

.dialog::backdrop {
  background: rgba(0 0 0 / 32%);
}

.button {
  align-self: flex-end;
  background-color: #55c500;
  border: none;
  border-radius: 0.5em;
  cursor: pointer;
  font-weight: bold;
  margin-top: 1rem;
  padding: 0.5em 1em;
}
```

### ポイント1 `[open]`の記述

`dialog`は`open`という属性を持ちます。
これを指定せず、例でいう`display: flex`を追加してしまうと常に`dialog`が開きっぱなしになってしまいます。

これは、User Agent Stylesheetでの指定が以下のようになっているため

```css
dialog:not([open]) {
  display: none;
}
```

クラス名による指定をすると詳細度が勝ってしまい、`:not([open])`であっても`display: none;`ではなく`display: flex;`となってしまうからです。
もちろん`block`でも`grid`でも同じことになります。

### ポイント2 `::backdrop`の指定

デフォルトでも背景に半透明な黒を敷いてくれるのですが、一般的なbackdropより若干薄い気もします。
色を変えたい場合も多いと思いますが、そんなときは`::backdrop`へのスタイル指定です。

`dialog`要素そのものや、`dialog`につけたクラス名に対してスタイルを当てても背景色は変わりません。

## まとめ

- 2022年3月4日現在ではFirefoxとSafariが未対応なため本番投入はできない
  - しかし多分もうすぐ使える
- `open`属性をつけてスタイルを書くと良い
- 背景色を変えたければ`::backdrop`に対してスタイルを書く

---

最後まで読んでくださってありがとうございます！
Twitterでも情報を発信しているので、良かったらフォローお願いします！

https://twitter.com/xrxoxcxox
どうしても無料でwordpressサイトを公開したかった（できた）

以前までJAMStack信仰にどっぷり使っていた私ですが、ライブラリのメンテナンスや最新化への対応に疲れてしまいました。
結局のところ、JAMStackでwordpressの代替はできますが、運用レベルで考えると面倒くさいので現実的ではないと感じて、wordpressに戻ってきてしまう事になりました。

が、JAMStackで得たノウハウはwordpressにも活かせるので、意味がなかったとは思えませんでした。
今回は、最初から運用を想定してwordpress/JAMStack(本稿ではJAMStackではありませんが、得た知見のお話なので間違ってはいない)のいいとこ取りを考えていきます。

## 取り上げること
- wordpressで静的サイトを作ってサーバーにデプロイするまで
- (参考情報)どういったプラグインを使って運用しているのか、実例紹介

## 取り上げないこと
- この運用における問題点や課題
  - まだ知見がないので、実務では採用しようとは思いません。
  - wordpressを使うので、wordpressの問題点をそのまま受け入れる事になります
- 懸念事項
  - 極端な話、静的サイトジェネレーターとしたプラグイン自体のソースコードを見たわけではないです
  - どういった処理と相性が悪いのか分からないので、使えないプラグインがあるはず。

## 最低限の機能を実装する
とりあえず記事を書いて公開するところだけやります。

### wordpressで静的ファイルを出力する
まずはこれが出来ない事には話になりません。
app/public以下に必要なファイルなどが置かれるのは分かっているので、以下必要なファイルを選定します。
プラグインなどで複雑な事をしなければ面倒くさいけど難しくない作業です。
すごく極端な話をすれば、Seleniumなどでサイトを巡回してソースをぶっこぬいてしまうのが手っ取り早いです。

が、そんな事をしなくてもプラグインでいい感じにやってくれるものがいっぱいあるので、要件にあったものを探してみましょう。

### ホスティングサーバーを決める
netlifyとかが有名です。
細かい事を言えばサービスごとの特徴がありますが、今回は感覚で決めてよいです。
APIを使う(axiosとか)予定がないので、本当にファイルを置くだけです。
GithubPagesでも構いません。

### 静的ファイルをホスティングサーバーにアップロードする
所定の方法に従います。

## 運用を考える
- ブラウザで記事を書く
- 書いた記事をhtmlなどにする
  - プラグインで変換できればブラウザで完結します
  - htmlなのでコメントができなくなります。必要なら別の方法を検討すべきです
- デプロイする
  - デプロイもブラウザでしたいです。
  - wordpressで完結すればベスト

最低限の機能は既にできているので、wordpressで動かす方法を考えていきます。

### 記事を書く
これはwordpressの標準機能ですね。

### htmlなどにする
これもwordpressのプラグインでやりたいですね。

### デプロイする
各サイトにファイルをアップロードする事になるでしょうが、githubと連携すればCI(GithubActions)が使えるので、これを使いましょう。
wordpressからgithubにpushできれば解決できそうです。
「wordpress git push」あたりで検索すると色々情報が出てきます。

#### CIを作る
ホスティングサービスとGihtubを連携すればいい感じにやってくれるものがありますので、便利なものは使っていきましょう。
必要な設定だけやれば簡単に実現できるはず。

## より便利な方法を考えていく
色々書いていたんですが、どうしても本題から外れてしまったので、本稿では扱わない事にしました。
リンク先をご覧ください。

https://nomuraya.tk/2022/03/wordpress_manual/

## 謝辞
本稿を執筆するにあたり、多くの技術ブログや質問サイトの方にお世話になりました。
この場を借りまして、御礼申し上げます。
オブジェクト

暗黙の業務知識を利用してのコード作成は良くない。
使った業務知識は明示すべき。
言語の知識とかは使うべき。
業務知識は一箇所に集めるべきだと再認識

言語の知識は例えば言語Aでintの配列を作成したときにすべて0で初期化されるにも関わらず0で初期化し直すとか。阿呆でありんす。

業務知識の方は例えばある入力の閾値が決まっていてその範囲の値が入ってくる前提でコードを書くとその前提が変更されたときに変更漏れが生じる可能性がある。
この場合オブジェクト指向的に考えるとhogeruleやhogespecificationなどと言うクラスを作ってそこに仕様を書く例えば年齢制限specなどを使うとそこ一箇所の変更ですべてすむ(単一責任)しマジックナンバーを使うことも避けられる。
[kintone] kintone における 「検索」の概念

# kintoneのレコードを検索 or 集計したい
kintoneはコードを基本的に記述せず、直感的な操作によって業務に必要な情報が格納されています。
もちろんこのアプリケーションには多種多様な情報が格納されていることがほとんどで、そうなるとやはり検索は必須になるでしょう。

しかしながら、kintoneの検索は（言ってしまえば直感的ではない）落とし穴が多く、理解していないと、データの見方を間違えて、違う結論を導き出してしまうことになります。

この記事では、覚えるべき詳細に的を絞ってkintoneにおける検索を解説します。

## kintone内のレコード検索
kintoneにおける検索とは例えば、「絞り込み検索」「一覧作成時の条件絞り込み検索」などkintoneシステム内における検索全般を指しています。
まず以下表を覚えておくのが大前提となります。

|               | 日本語 | 英数字 |
| :---:         | :---: | :---: |
| 全角・半角の区別 | なし | あり |
| 検索ワード      | 2文字以上 | 単語毎 |

日本語、英数字によって若干扱いが変わります。

日本語の場合は簡単で、2文字以上あればどのような形でもhitしてくれます。
（日本語1文字でレコードを作成しているのはイロハでレコードを作っているとかでしょうか。。。そんなレコードはidに書き換えた方が良いのでは？？？）

注意しなければいけないのは英単語の扱いです。
例えば
「hogefuga1 foobar」というレコードで単語を検索する場合、

|検索例| 判定 |
| :---: | :---: |
| hogefuga1 | ○ |
| foobar | ○ |
| hoge | × |
| fu | × |
| 1 | × |
| ogefuga | × |
| fooba | × |


上記のように単語に完全一致していないと検索に引っかかりません。
ここで注意しなければいけないのは、一覧作成時の条件絞り込み検索においてもこの条件が適用されると言うことです。

![604658A1-8E1D-488E-98AE-2CD6CB32F855.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1005334/1c50b589-2d91-084a-a24d-9e875e8b8757.jpeg)

そうこれ。
結構盲点だと思います。


# まとめ
kintoneはノーコードで導入がしやすい分、システムの形式に依存する部分が多いですので、このような検索のクセをしっかりと覚えておいて、データを活用した方が良さそうです。
Tang-Nano-9KでBasicを動かす

#目的
　Tang-Nanoについて調べていたら、Tang-Nano-9Kと言うボード名が引っ掛かった。
　Sipeedの新商品らしい。
　◆◆◆　これを買わなくてどうする　◆◆◆
　という事で、どう使えるか調べる為に即購入。
　購入時には単品は売り切れていたので、1.14インチのLCDを抱き合わせで購入したが、
　このLCDどうやって使うのか、チョット謎だ。
![tn9k.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/006db528-bc53-60fb-cda9-bc1e488bb909.jpeg)


#経緯
　2019年の終わりごろにはTang-Nanoと言うボードが売り出されていた。
　2021年にはTang-Nano-4Kが売り出されれた。
　2022年にはTang-Nano-9Kが売り出されていた。
　現時点では国内購入先が見当たらなかったので、AliE*にて購入。
　　※単価1800円(LCD付)に対し、配送料600円はチト疑問だったが。
　これでTang-Nanoは３兄弟が揃ったと言う事になる。
　　※ボード製作元のSipeedではTangシリーズの5番目らしいが、他の２兄弟は何処に居るのかな。
　３兄弟には各々特徴が有る。※調べればすぐ出ます。
　　Tang-Nano-1K 　安い
　　Tang-Nano-4K 　Mcuを内蔵
　　Tang-Nano-9K 　LUTとRAMを増量


#開発環境のインスツールとLicense取得
　「[Tang Nano、Nano4KのIDEであるGowin EDAインストール(Winのみ)](https://qiita.com/yosiaki/items/2e635e115ecedabecc35)」に詳しく書かれています。
　　※前回申請時は梨の礫だったが、今回は翌日にライセンスがstrato_license@gowinsemi.comから到着。
  　　Macアドレス記載時にハイフォン無しにしたのが効果有りかも。
　LicenseにはEXP_DATEの記載が有るから、１年間有効なのだろう。

#サンプルソフト
　下記で動作を確認。
　　「[TangNano-9K-example](https://github.com/sipeed/TangNano-9K-example)」
　　※lcd_led　所持しているLCD(JST-4300-E3V03)の動作クロックが低いので、クロックを半分にして動作確認。
　　※picotiny　HDMI画面表示のみ確認。他にも事前準備が必要なようだ。
![test_prg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/41835760-a7ec-6233-a768-3f0e41447176.jpeg)

　之だけでは寂しいので、別途BASICを動かした。
　　「[l80soc_4KBAS](https://github.com/hi631/tang-nano-9K/tree/master/l80soc_4KBAS)」


#ＢＡＳＩＣ
　別にBASICで無ければいけない理由は無いが、何か目に見えるものとして。
　「[Ｌｉｇｈｔ８０８０](https://github.com/jaruiz/light8080)」上で4KBASIC(altair 4K Basicらしい)を動作。
　「[Tang-NanoでBasicを動かす](https://qiita.com/hi631/items/d68c3b40c118588723f3)」
　ハード、ソフト共にTang-Nano-1Kのものを、僅かに変更したら動いた。
　　※RAM拡張さえしていないので、RAMは8KB(+2KB)しか使っていない。
　デバイスマネージャーでCOMを確認し、Teraターム等で接続する、通信速度は115200bps。
![RUN_BAS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/a323bda4-90c2-fb10-39b3-87ac644da05d.jpeg)

#シリアル通信について
　Tang-Nano-9Kでは標準装備で、USBシリアル通信が可能。
　ボードを接続したときに現れるCOMがFPGAに繋がっている。
　　IO_LOC "txd" 17;
　　IO_LOC "rxd" 18;
　　※wikiでも見つからなかったが、picotinyで記載されてる端子で動作した。

#Programmer問題
　Gowin_V1.9.8.03では改善されており、SRAM,Flash,Analyzer共に、問題無く使用出来た。
　　※V1.9.8.02で治っていたのも知れない。


#感想
　容量増量と、追加無しでシリアルが使えるのは嬉しい。
　年間Licenseも取得出来るようになっているので、使い勝手も向上している。
　過去の資産(?)をこのボードに移植すれば、FPGA利用の敷居が下がるだろう。
　その内出て来るのだろうけど、早く回路図を出して頂きたいな。　1.14インチのLCDを使って見たいから。
　　※[既に公開されていました。](https://dl.sipeed.com/shareURL/TANG/Nano%209K/2_Schematic)
　なお、上記記載内容は全て無保証であり、各自の責任においてご利用願います。
getElementsByClassNameでの躓き

getElementsByClassNameへの理解不足で躓いたので記録として記載します。

Javascript学習の一環としてHTML/CSSで作成した静的サイトの文章を英語化しようとgetElementsByClassName, style.displayを使おうとしていましたが、getElementsByClassNameについてしっかり確認せず、名前の似ているgetElementByIdのように考えていたのでエラーとなりました。

**getElementsByClassName（）：指定したクラス名を持つ要素のリストを返す。**
**getElementById: 指定したidを持つ要素を返す。**

当初"リストを返す"を理解できておらず、その後のstyle.displayが効かなく困りましたが、配列として考えてfor分で取り出すことができるという情報を発見したので参考にしました。
pタグにクラスを持たせて取得し、取得した要素のstyle属性(display)を操作することで簡易的に日本語⇄英語の切り替えをできるようにしています。
無理やりやってる感じが強いのでスマートな方法があればアドバイスいただきたいです。。


```Javascript
//HTMLは割愛

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("translate-ja").addEventListener("click",TranslateToJapanese);

    function TranslateToJapanese(){
        var ja_status = document.getElementsByClassName("language_ja");  //配列
        var en_status = document.getElementsByClassName("language_en");  //配列
        for(let i = 0; i < ja_status.length && i < en_status.length; i++){      //HTML要素を１つずつ処理
            var ja_display = ja_status[i].style.display;
            var en_display = en_status[i].style.display;
            if(ja_display == "none" && en_display == "block"){
                ja_status[i].style.display = "block";
                en_status[i].style.display = "none";
            }
    }}
})


document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("translate-en").addEventListener('click', TranslateToEnglish);

    function TranslateToEnglish(){
        var ja_status = document.getElementsByClassName("language_ja");  //配列
        var en_status = document.getElementsByClassName("language_en");  //配列
        for(let i = 0; i < ja_status.length && i < en_status.length; i++){      //HTML要素を１つずつ処理
            var ja_display = ja_status[i].style.display;
            var en_display = en_status[i].style.display;
            if(ja_display == "block" && en_display == "none"){
                ja_status[i].style.display = "none";
                en_status[i].style.display = "block";
            }
    }}
})
```
【AWS】WAFのログをCloudWatchとS3に出力する際に注意すること（メモ）

WAFのログをCloudWatchとS3に直接出力する際には、**命名**に注意する。

以下の２つの名前を、「aws-waf-logs-」から始まるようにしなければならない。

- Cloudwatchのロググループ名

- S3バケット名


参考サイト：https://dev.classmethod.jp/articles/aws-waf-log-support-s3-and-cloudwatch-logs/
Countdown Calendar 2021の行き詰まり Wireshark (15)

Wireshark Countdown Calendar 2021 
https://qiita.com/advent-calendar/2021/wireshark

に記事を足そうと努力していた。

行き詰まった。

Wiresharkのコンパイルも、いろいろな機材へのインストールも、
作業がはかどらない。

プログラミングでの応用もできていない。

本も読めていない。

Wi-Fi Countdown Calendar 2021
https://qiita.com/advent-calendar/2021/wi-Fi

は、２つすでに別文書があり、それらを記事にする予定。

Ethernet Countdownt Calendar 2021
https://qiita.com/advent-calendar/2021/ethernet

も車載Ethernetを掘り起こせば記事はいろいろ書けるはず。

Wiresharkだけ、とっかかりがつかめていない。

１０歳児に教えることを検討しはじめた。

10歳児がサイバセキュリティの専門家になるには
https://qiita.com/kaizen_nagoya/items/0aa201b09187bbe39ff3

ここを起点になんとかするには、１０歳前後のお子さんを確保したい。

誰か、自宅または近所で、Wiresharkを教える対象のお子さんおみえでしょうか。

教えていただいて、感想をいただけると幸いです。

しまった、これは質問にあげなきゃいけなかったかも。

記事になるように、のちほど補足します。ごめんなさい。
も、

# 参考資料(reference) Wireshark
Wiresharkのインストール手順（Windows編）
https://qiita.com/yasushi-jp/items/7cacbe6089c760ad4202

WireSharkで学ぶネットワークの基礎
https://qiita.com/na-777/items/d656f720709de2ca4ec4

WireSharkの仕組み
https://qiita.com/Kate941-su/items/df7276b746602a49f0da

wiresharkで保存したデータをpysharkで扱う
https://qiita.com/etherpoc/items/aa5d567ed19d7bd22076

m1macにWiresharkをインストール
https://qiita.com/Qubieeee/items/b72f09eb28f768ff52f2

Nutanix から通信フロー情報を取得してみる
https://qiita.com/2-3/items/117b1530666e400b11ad

# 自己参照
Error一覧 error(0)
https://qiita.com/kaizen_nagoya/items/48b6cbc8d68eae2c42b8

プログラマが知っていると良い「公序良俗」
https://qiita.com/kaizen_nagoya/items/9fe7c0dfac2fbd77a945

Ethernet 記事一覧　Ethernet(0)
https://qiita.com/kaizen_nagoya/items/88d35e99f74aefc98794

Wireshark 一覧 wireshark(0)、Ethernet(48) 
https://qiita.com/kaizen_nagoya/items/fbed841f61875c4731d0

線網（Wi-Fi）空中線(antenna)(0) 記事一覧(118/300目標)
https://qiita.com/kaizen_nagoya/items/5e5464ac2b24bd4cd001

通信記事１００
https://qiita.com/kaizen_nagoya/items/1d67de5e1cd207b05ef7

一覧の一覧( The directory of directories of mine.) Qiita(100)
https://qiita.com/kaizen_nagoya/items/7eb0e006543886138f39

＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.
### 文書履歴(document history)
ver. 0.01 初稿 　 20232003
ver. 0.02 ありがとう追記 20230604
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.