OmniAICreator/Qiita-1.07M huggingface dataset:
paizaラーニング「各行の要素数の出力 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_output_step5
#### 私の解答
```Python3
li = [[1],[2, 3],[4, 5, 6]]
for i in range(len(li)):
    print(len(li[i]))
```
#### 解答例
```Python3
li = [[1], [2, 3], [4, 5, 6]]
for ele_li in li:
    print(len(ele_li))
```
- for ele_li in li: で変数 ele_li に変数 li の各要素が順に代入されます。
- for ele_li in li: のループ処理内で、len 関数を用いて変数 ele_li の要素数を出力することで求められている出力ができます。
プチDXコンテストに応募したアイデアが生まれるまで

## コンテストの出会いと最初のアイデア
SNSでこんなコンテストを知りました。

https://twitter.com/kintonedevjp/status/1585145578971103232?s=20&t=UMiUult0NocufUUCc_a-xQ

MESHとobnizとkintoneを使って何をしよう。

最初に思い浮かんだのは、🍓ちゃん（娘）のジャンパルーにMESHを貼り付けてジャンプの振動を検知するとkintoneにレコードを追加する
というアイデアでした。
それを、ピョコ太郎（息子）と一緒に作って．．．．
子供も一緒に作ったんだよ？というアドバンテージを得られるかもしれない👀

というわけで進めようと思いましたが
レコード追加して何がしたいんだ！？

というところが思い浮かばなくてボツになりました。

## ピョコ太郎が風邪を引く

一緒に開発しようと言っていたのにｗピョコ太郎が締め切り間近のある日、風邪を引きました。
熱は38.5度以上出て、しんどそう。とてもコンテストどころではなさそうでした。

で、開発の方は私がやって、ピョコ太郎にはMESHの装飾をお願いしようと思いました。

## ピョコ太郎の風邪で閃く

ピョコ太郎は熱があるのでお母さん（私）はあんまり近づきたくないw
すると、頭の上の豆電球が光りました。💡！！

ピョコ太郎がしんどくても、私を呼べる仕組みが作れるじゃん！！

チームメンバーのピョコ太郎がダウンして困ったおかげで閃きました💡

というわけで、爆速で作って・・・・応募しました。

↓

https://protopedia.net/prototype/3625

## 嬉しい感想をいただく👀

https://twitter.com/juri_don/status/1597276790183301120?s=20&t=Tm4ZKGxChBVicTSMgKha7g

嬉しかったです(*ﾉω・*)ﾃﾍ✨✨

## まとめ

困った時には何か閃くかもしれない💡

来年ももし開催されたら・・・参加したいです(*ﾉω・*)ﾃﾍ✨✨



おしまい！
ChatGPTで、Rustの勉強してみる

サンプルコードを表示できる。かつ、その結果を表示できる(本当？)ので、結構いけます。（※）

## 「Rustの勉強を始めます。」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/a9e9e4a0-9908-f0c9-cf89-d66fc252c8f3.png)

## 「Rustのサンプルコードを表示してください」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/6ecaf420-de7c-0a76-1011-2d47364c1f4b.png)

## 「では、その実行結果を教えて下さい。」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/8e47c4dc-3340-72d7-0bd1-19dfd4dbec2c.png)

## 「サンプルコードを足し算するモノに変更してください」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/b6d5e33c-028b-956c-171b-c76ae53d9a25.png)

## 「aの値を20にしてみて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/b9d8fcbd-a809-dfe4-af99-ab360afe2e8c.png)

## 「可変を使ったサンプルにしてみて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/ab31f553-58d2-c0f0-fbc9-04c5ca7b31d1.png)

## 「学ぶべきRustの特徴を教えて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/86c77f92-99f5-43dd-e674-dd2c190df311.png)

## 「安全性を学べるサンプルコードを表示して」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/6206704f-4609-f79a-fa84-d3d50dfa55a1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/d35109e1-c27b-1315-7dcc-504995db62ca.png)

## 「所有権のサンプルコードを表示して」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/7cc57aff-ecab-b565-8e13-0156355ac184.png)

## 「静的型付けのサンプルコードを表示して」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/fa6080d5-0101-116f-fb23-392edf7aa3d5.png)

## 「オブジェクト指向のようなサンプルコードを表示して」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/dec504eb-8510-e3c4-7bf5-e28803183b7b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/07f5107f-58b4-7437-1e04-8bf4315e7a45.png)

"面向対象プログラミング"？？

# 実行してる？？

## 「足し算のサンプルを用意して」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/f07463ee-1c45-c252-2d70-99cf9bfc74a1.png)

## 「xの値を15にしてみて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/6518b278-6ba2-3411-9534-49a17c2d6eac.png)

## 「エラーのあるコードに変更して」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/c8df82a1-14f1-bae7-5ac8-7ff3c7983358.png)

## 「そのコードを、コンパイルした結果を表示してみて」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29715/5fe070c6-fb9f-99aa-fb32-100b2424d9e3.png)


## 所感

意図の汲み取り方はかなり優れていて、結構的確に答えてくれます。そのため見知らぬ言語のサンプルコードとか特徴的な部分は、一人でググるよりは楽かもです。実行結果っぽいものが出せるのが面白いですね。どこまで本気でやってるんでしょうか。

また、真贋わからなきゃ勉強にならない気もするなー()とか思っててやってました。信頼しすぎるのは危険かと思われます。~~知ったかする同僚に勉強教わってるぐらいのノリが良いのかもです。~~
AIが保存している膨大な量のテキストデータについて聞いた結果

以下サイトでテストした結果を貼り付けていきます。
https://chat.openai.com/chat
```
膨大な量のテキストデータの分野を一部だけ教えてください。

私が訓練されたデータは、様々な分野の情報が含まれています。そのため、私が提供できる情報も幅広いです。例えば、以下の分野の情報を含んでいます。

科学
技術
政治
経済
文化
歴史
哲学
心理学
社会学
地理
天文学
生物学
化学
物理学
数学
これらは、私が訓練されたデータに含まれている一部の分野です。私が提供できる情報の範囲は、これらの分野だけに限定されるものではありません。さまざまな分野の情報を含んでいるため、その範囲は広いです。




じろう
膨大な量のテキストデータの時代を一部だけ教えてください。

私が訓練されたデータは、さまざまな時代の情報が含まれています。そのため、私が提供できる情報も幅広いです。例えば、以下の時代の情報を含んでいます。

古代
中世
ヨーロッパ中世
近世
近代
現代
これらは、私が訓練されたデータに含まれている一部の時代です。私が提供できる情報の時代の範囲は、これらの時代だけに限定されるものではありません。さまざまな時代の情報を含んでいるため、その範囲は広いです。




じろう
膨大な量のテキストデータの分野を一つ選び、その中から時代を一つ選んでください。

私が訓練されたデータから、「歴史」という分野を選びます。そして、「中世」という時代を選びます。「歴史」という分野には、さまざまな時代の情報が含まれています。その中でも、「中世」という時代は、特に重要な時期です。「中世」とは、西暦475年から西暦1453年の間を指します。その時代には、大きな変革が起きました。例えば、ローマ帝国の崩壊や、イスラム文明の発展などが起きました。また、中世には、様々な文化が誕生しました。例えば、中世には、ローマ法が発展し、中世文学が盛んになりました。「歴史」と「中世」という分野と時代は、多くの面白い情報が含まれています。
```

（このサイトにまとめるのが適切じゃない可能性もあるがnoteもちゃう気がしているが書かせて）
paizaラーニング「列数の出力 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_output_step4
#### 私の解答
```Python
li = [[1, 2, 3, 4], [6, 5, 4, 3], [8, 1, 3, 1]]
print(len(li[0]))
```
前出の問題の解答例を参考にしたので、解答例と同じになりました。
#### 解答例
```Python
li = [[1, 2, 3, 4], [6, 5, 4, 3], [3, 1, 8, 1]]
print(len(li[0]))
```
paizaラーニング「行数の出力 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_output_step3
#### 私の解答
```Python3
li = [[1, 2, 3],[ 4, 5, 6], [8, 1, 3]]
print(len(li))
```
前出の問題の解答例を参考にしたので、解答例と同じになりました。

#### 解答例
```Python3
li = [[1, 2, 3], [4, 5, 6], [8, 1, 3]]
print(len(li))
```
【GMC-4】10進カウンタ

学研の4ビットマイコン GMC-4 で、10進数で表示するカウンタを作ってみた。

# 仕様

* 799までカウント可能。超えた場合の動作は保証しない。
* 2進LEDの上位に100の位、2進LEDの下位に10の位、7セグメントLEDに1の位を表示する。
* Fキーを押すとカウント値をリセットする(0にする)。
* F以外の数字キーを押すとカウントを進める(カウント値に1を足す)。

# 実装方針

* データメモリの0xD番地に1の位を、0xE番地に10の位を、0xF番地に100の位を保存する。
  * これにより、`CAL DSPR` 命令で10の位と100の位をそのまま表示できる。
* カウントアップ時、まず7を足す。
  * キャリーがあった場合、元の値が9(以上)であったことを意味するので、0を格納して桁上り処理を行う。
  * キャリーが無かった場合、6を引いて1を足した状態にし、結果を格納する。

# 実装

以下のコードは、[MikeAssembler](https://mikecat.github.io/mike_assembler/)でアセンブルできる。

```
target gmc4

	; 2進LED上位 / 0xF番地 : 100の位
	; 2進LED下位 / 0xE番地: 10の位
	; 7セグメントLED / 0xD番地 : 1の位

START:
	; 初期化
	TIA 0
	TIY 0xD
	AM
	TIY 0xE
	AM
	TIY 0xF
	AM
SHOW_DATA:
	; カウント値の表示
	TIY 0xD
	MA
	AO
	CAL DSPR
	; キーが離されるのを待つ
KEY_RELEASE_WAIT:
	KA
	JUMP KEY_INPUT_WAIT
	JUMP KEY_RELEASE_WAIT
	; キー入力を待つ
KEY_INPUT_WAIT:
	KA
	JUMP KEY_INPUT_WAIT
	; Fが入力された場合は、カウントをリセットする
	CIA 0xF
	JUMP NOT_RESET
	JUMP START
NOT_RESET:
	; カウントアップ処理
	TIY 0xD
	MA
	AIA 7
	JUMP CARRY_10
	AIA -6
	AM
	JUMP SHOW_DATA
CARRY_10:
	TIA 0
	AM
	TIY 0xE
	MA
	AIA 7
	JUMP CARRY_100
	AIA -6
	AM
	JUMP SHOW_DATA
CARRY_100:
	TIA 0
	AM
	TIY 0xF
	MA
	AIA 1
	AM
	JUMP SHOW_DATA
```

以下がこのプログラムの機械語表現である。

```
  | 0 1 2 3  4 5 6 7  8 9 A B  C D E F
--+-----------------------------------
0 | 8 0 A D  4 A E 4  A F 4 A  D 5 1 E
1 | D 0 F 1  8 F 1 1  0 F 1 8  C F F 2
2 | 4 F 0 0  A D 5 9  7 F 3 2  9 A 4 F
3 | 0 B 8 0  4 A E 5  9 7 F 4  3 9 A 4
4 | F 0 B 8  0 4 A F  5 9 1 4  F 0 B
```

# 実行結果

<iframe width="560" height="315" src="https://www.youtube.com/embed/vRKxxXavW3I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

カウントとリセットができている。
Vue.js入門してみた

# Vue.js入門メモ

## Vue.jsとは
ユーザーインターフェースを開発するための、Javascriptフレームワーク。
他にも**React**や**Angular**が存在する。

Vue.jsはMVCから派生したMVVM（Model View View-Model）と呼ばれるデザインパターンを採用していると言われている。


## ソース

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vueを使うためにMDN読み込みを行う -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <!-- 外部ファイルを読み込むためにはここにscript書かないと反映されない -->
    <script src="index.js"></script>
</body>
</html>
```


```index.js
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/431046/6ca4e179-27bc-bc7b-41c8-2ea9257a573d.png" width="400px">



## 説明
### Vue.jsのMDNを読み込む
```html:index.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

### Vueで値を設定する
```index.js
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});
```

### Vueで設定した値を表示させる場所を追加
```index.html
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
```

#### el
**Element**の略でHTMLのこの要素名の部分をVueに任せるというような宣言。
今回はHTMLの`<div id="app">`を任せたいため「#app」となっています。
指定できるのは１つまでとなっています。

#### data
入力や出力するデータや初期値などを設定することが出来る。
今回の場合、messageに設定された値がindex.html内に記述された`{{ message }}`の部分に表示されます。
paizaラーニング「全要素の出力 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_output_step2
#### 私の解答
```Python3
a = [6, 5, 4, 3, 2, 1]
b = [3, 1, 8, 8, 1, 3]
for i in range(5):
    print(a[i],end=" ")
print(a[5])
for j in range(5):
    print(b[j],end=" ")
print(b[5])
```
私の解答はカッコ悪いですね。。。
#### 解答例
```Python3
li = [[6, 5, 4, 3, 2, 1], [3, 1, 8, 8, 1, 3]]

for i in range(len(li)):
    for j in range(len(li[i])):
        print(li[i][j], end="")

        if j < len(li[i]) - 1:
            print(end=" ")
        else:
            print()
```
Elixir生誕10周年祭■第11弾：Elixir Chip（専用プロセッサ）を作る

この記事は、[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir) 8の22日目です

昨日は、@t-kurasawa さんでした

---

[ElixirImp／fukuoka.ex／kokura.ex](https://fukuokaex.connpass.com)と[LiveView JP](https://liveviewjp.connpass.com/)の [piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

下記コラムで、Elixir生誕10周年を出迎えるコラムを昨年のAdvent Calendarでまとめました

https://qiita.com/piacerex/items/7bf8f9f4f5f576e597f5

本コラムは、そのアンサーコラムの第11弾で、Elixir Chip（専用プロセッサ）を作るを味わうコラム一覧で、他シリーズは、こんな感じです

[**Elixir生誕10周年祭■第1弾：Elixir／Phoenixで会員制サイト構築は瞬殺**](https://qiita.com/piacerex/items/e5590fa287d3c89eeebf)
|> [**Elixir生誕10周年祭■第2弾：Elixir／LiveViewでJS不要のSPA＋Tailwind UI**](https://qiita.com/piacerex/items/c86e9d1150937091c06c)
|> [**Elixir生誕10周年祭■第3弾：Elixir／Livebook＋NxでPythonっぽくAI・ML**](https://qiita.com/piacerex/items/ccfc7198f08d06433fbc)
|> [**Elixir生誕10周年祭■第4弾：ElixirDesktopスマホネイティブアプリ開発**](https://qiita.com/piacerex/items/d67ebc3b5deb789005a5)
|> [**Elixir生誕10周年祭■第5弾：ElixirでWebAssemblyにトライ**](https://qiita.com/piacerex/items/63819da9f71ad489824e)
|> [**Elixir生誕10周年祭■第6弾：Elixir／WebSocketでVR／AR／メタバース連携**](https://qiita.com/piacerex/items/9ba9985d90d764f76bec)
|> [**Elixir生誕10周年祭■第7弾：Elixirでエッジコンピューティング開発**](https://qiita.com/piacerex/items/209b0d4ba66d41abdb0c)
|> [**Elixir生誕10周年祭■第8弾：Elixirで海外進出を目指す**](https://qiita.com/piacerex/items/1b55caee64367d73d2fb)
|> [**Elixir生誕10周年祭■第9弾：ElixirでWeb3／DID／DAO**](https://qiita.com/piacerex/items/3ba80f84226e911c5cd4)
|> [**Elixir生誕10周年祭■第10弾：Elixir／Phoenix 1.7プレビュー**](https://qiita.com/piacerex/items/3cec70e037ed38b8d9e1)
|> [**Elixir生誕10周年祭■第11弾：Elixir Chip（専用プロセッサ）を作る**](https://qiita.com/piacerex/items/539e1109aef4530e146b)

<h3>:ocean::ocean::ocean: Elixir Advent Calendar 総勢16本、熱い冬ヽ(=´▽`=)ﾉ :ocean::ocean::ocean:</h3>

例年に無い盛り上がりを見せています … 応援／購読よろしくお願いします :bow:

https://qiita.com/advent-calendar/2022/elixir
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/2965fc3b-ff27-4cb9-f924-9e5db67603fc.png)](https://qiita.com/advent-calendar/2022/elixir)

---

# Elixir Chip（専用プロセッサ）を作る

[**Elixir Chipの鼓動① Elixir CPU+リモートGPUの高速分散処理＆エッジコンピューティングによる未来**](https://qiita.com/piacerex/items/b99baebf284243fb6d6b)
|> [**「ElixirChip：FPGA or HW化されたElixir」研究開発を進めてわかったこと**](https://qiita.com/zacky1972/items/6e1debd04798b01f36be) by @zacky1972 
|> [**「全世界のスマホGPUをクラスタリング」研究開発を進めてわかったこと**](https://qiita.com/zacky1972/items/9a080c90be00231dd863) by @zacky1972 

---

<h3>:ocean::ocean::ocean: Elixir生誕10周年を一緒にお祝いしませんか？ :ocean::ocean::ocean:</h3>

12/21（水）19:30～21:00、「過去LTいただいた方々への感謝祭」をテーマに、リモート忘年会を開催（本コラムも解説します）

「Elixir生誕10周年」に対するコメントや、今／昔のElixirの進化を聞けるチャンスですので、お見逃し無くッ

https://fukuokaex.connpass.com/event/263809/

<font color="#f020a0"><b>※カンパイスタートの会ですので、お酒 or ソフトドリンク、お菓子 or ご飯をお忘れなく</b></font>

<font color="#a020f0"><b>※Zoom接続できれば、本人でも、2Dアバター／3D（VR）アバターでも、お好きな姿でご参加OK</b></font>

---

明日は、私で「Bright：『Elixirスキルシート』のSaaS化とIT業界の変革＋DAOによるエンジニアと技術コミュニティの在り方の変化」です
Elixir生誕10周年祭■第10弾：Elixir／Phoenix 1.7プレビュー

この記事は、[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir) 10の20日目です

昨日は、私で[「Elixir生誕10周年祭■第9弾：ElixirでWeb3／DID／DAO」](https://qiita.com/piacerex/items/3ba80f84226e911c5cd4)でした

---

[ElixirImp／fukuoka.ex／kokura.ex](https://fukuokaex.connpass.com)と[LiveView JP](https://liveviewjp.connpass.com/)の [piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

下記コラムで、Elixir生誕10周年を出迎えるコラムを昨年のAdvent Calendarでまとめました

https://qiita.com/piacerex/items/7bf8f9f4f5f576e597f5

本コラムは、そのアンサーコラムの第10弾で、Elixir／Phoenix 1.7プレビューを味わうコラム一覧で、他シリーズは、こんな感じです

[**Elixir生誕10周年祭■第1弾：Elixir／Phoenixで会員制サイト構築は瞬殺**](https://qiita.com/piacerex/items/e5590fa287d3c89eeebf)
|> [**Elixir生誕10周年祭■第2弾：Elixir／LiveViewでJS不要のSPA＋Tailwind UI**](https://qiita.com/piacerex/items/c86e9d1150937091c06c)
|> [**Elixir生誕10周年祭■第3弾：Elixir／Livebook＋NxでPythonっぽくAI・ML**](https://qiita.com/piacerex/items/ccfc7198f08d06433fbc)
|> [**Elixir生誕10周年祭■第4弾：ElixirDesktopスマホネイティブアプリ開発**](https://qiita.com/piacerex/items/d67ebc3b5deb789005a5)
|> [**Elixir生誕10周年祭■第5弾：ElixirでWebAssemblyにトライ**](https://qiita.com/piacerex/items/63819da9f71ad489824e)
|> [**Elixir生誕10周年祭■第6弾：Elixir／WebSocketでVR／AR／メタバース連携**](https://qiita.com/piacerex/items/9ba9985d90d764f76bec)
|> [**Elixir生誕10周年祭■第7弾：Elixirでエッジコンピューティング開発**](https://qiita.com/piacerex/items/209b0d4ba66d41abdb0c)
|> [**Elixir生誕10周年祭■第8弾：Elixirで海外進出を目指す**](https://qiita.com/piacerex/items/1b55caee64367d73d2fb)
|> [**Elixir生誕10周年祭■第9弾：ElixirでWeb3／DID／DAO**](https://qiita.com/piacerex/items/3ba80f84226e911c5cd4)
|> **Elixir生誕10周年祭■第10弾：Elixir／Phoenix 1.7プレビュー**
|> [**Elixir生誕10周年祭■第11弾：Elixir Chip（専用プロセッサ）を作る**](https://qiita.com/piacerex/items/539e1109aef4530e146b)

<h3>:ocean::ocean::ocean: Elixir Advent Calendar 総勢15本、熱い冬ヽ(=´▽`=)ﾉ :ocean::ocean::ocean:</h3>

例年に無い盛り上がりを見せています … 応援／購読よろしくお願いします :bow:

https://qiita.com/advent-calendar/2022/elixir
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/fe82e56b-79a7-757a-9b0b-84fd130e990b.png)](https://qiita.com/advent-calendar/2022/elixir)

---

# Elixir／Phoenix 1.7プレビュー

[**Phoenix 1.7のverified_routeを使ってみた**](https://qiita.com/the_haigo/items/bc848d80ff8fdf6ffa79) by @the_haigo 
|> [**Phoenix 1.7.0-rc.0 を楽しむ**](https://qiita.com/torifukukaiou/items/e6e94e9742029a608b1d) by @torifukukaiou
|> [**Phoenix 1.7とElixirDesktopでスマホアプリを作る セットアップ編**](https://qiita.com/the_haigo/items/fa3906e45cf805ca38fa) by @the_haigo 

---

<h3>:ocean::ocean::ocean: Elixir生誕10周年をお祝いする会で本コラム扱います :ocean::ocean::ocean:</h3>

12/21（水）19:30～21:00、「過去LTいただいた方々への感謝祭」をテーマに、リモート忘年会を開催

「Elixir生誕10周年」に対するコメントや、今／昔のElixirの進化を聞けるチャンスですので、お見逃し無くッ

https://fukuokaex.connpass.com/event/263809/

<font color="#f020a0"><b>※カンパイスタートの会ですので、お酒 or ソフトドリンク、お菓子 or ご飯をお忘れなく</b></font>

<font color="#a020f0"><b>※Zoom接続できれば、本人でも、2Dアバター／3D（VR）アバターでも、お好きな姿でご参加OK</b></font>

---

明日は、@mnishiguchi さんで「Elixirで気軽に分散ノード間で遠隔手続き呼出し（RPC）」です
新卒でエンジニアになってもうすぐ3年が経つので振り返る

## エンジニアになる前の話
高校が情報系の学校だったので、高校時代に初めてVisualBasicに触れたのが、初めてのプログラム経験でした
よくある話ではありますが、自分が書いたコードが動くのが面白く、これを仕事にしてみたいなと思ったのが今エンジニアをしているきっかけになっています
高校時代にはその他にも基本情報技術者試験を取得したりしていました

大学は情報系の大学を選択せず経営学部を選択しました
マーケティングや組織論などにも興味があり、体系的に学ぶ機会は大学ぐらいでしかないだろうと思ったこと、一応進学した大学は情報系の選択コースもあったのでいいとこ取りできるのではと思い選択しました
大学時代は基本的には独学でRailsを触ったり他にも興味がある技術を触ったりしていました

## エンジニア1年目
1年目はとにかく開発することに必死でした
自分がそれまでやっていた開発と実際の業務で行う開発は全然違い、毎日必死に勉強して開発をしていたのを覚えています
これまで独学でやっていたのもあり、チームで開発するのも初めての体験でした
1年目はとにかく開発するのに必死で、事業そのものに対する理解や何かしらの提案など開発以外のことはあまりできなかったのは反省点かなと思っています
コロナ禍の入社だったので、ほとんどオフィスに出社しないまま1年目がおわりました

## エンジニア2年目
2年目になると少し余裕が出てきて、担当しているプロジェクトそのものに対する勉強など開発以外にも時間が使えるようになってきました
2年目からは担当するプロジェクトも少し増えました
1年目と変わらずRailsを使ったプロジェクトだったので、Railsが得意分野だと言えるようになろうと思って勉強していました
先輩社員の育休などもあり、自分に任せてもらえる範囲が一気に増えた時期がありました
この頃に開発スピードや自分のコードの質が上がったように感じます
2年目にはそれまであまり担当することがなかったメディア系のプロジェクトも担当しました

## エンジニア3年目
3年目はこれまでと担当するプロジェクトが大きく変わりました
これまでずっとRailsを書いてきたのが、PHPで書かれたプロジェクトになり、チーム自体も変わりました
2年目までに担当していたプロジェクトに比べるとかなりレガシーなプロジェクトだったので、1つ変更したら全然関係ないはずの場所に影響がでるなど、開発自体にかなり苦労しました
良い設計についてや保守性の高いプロジェクトについて興味が出てきた時期でした
自分なりにDDDやアーキテクチャについての本やブログなどを読んで勉強していました

## 今後やりたいこと
今後はまた少し違ったプロジェクトを担当することになりそうです
そちらではこれまでやっていたレガシーなプロジェクトとは違い、Goとクリーンアーキテクチャが採用されています
ここ最近で勉強してきたDDDやアーキテクチャについての知識が活かせると良いなと思っています
かなりおもしろそうな環境で開発できると思うので、最高のシステムが開発できるように頑張っていきたいと思います
レガシーシステムに書けるテストについて

PHPカンファレンス2022で [フラットなPHPからオブジェクト指向で自動テストのあるPHPへ、そしてフレームワークへ](https://fortee.jp/phpcon-2022/proposal/ef41a5ba-4efd-4a9f-b6a8-ae456df00541) を発表した際に、「クラス化されていないレガシーシステムに対してテストを書いてリファクタしていくにはどうすればいいか？」という質問を受けました。
その場で「自分で自分のシステムに対してスクレイピングすると良い」という形で言葉で回答はしましたが、実際にどうやるのか他に例が見当たらなかったので、この場を借りて走り書きですが例を示したいと思います。

## テストしたい対象のレガシーシステム

このようなハイパーレガシーコードなシステムがあり、index.phpというURLでアクセスできるとします。

```php
<?php

// index.php

$name = $_GET['name'];

?>
こんにちは<?php echo htmlspecialchars($name); ?>さん
```

## スクレイピングによるテストをするための準備

テストはサーバー上で行わずローカルで行いましょう。
ローカルでコマンドラインでphpを使えるようにしたうえで、index.phpがあるディレクトリで下記のようなコマンドを実行し、開発用ウェブサーバーを起動しておきます。

```shell
php -S 127.0.0.1:8080 -t ./
```

## スクレイピングするテストの書き方

phpunitの基本的な使い方等は別途ググってください。
スクレイピングテストの書き方のみ示します。

```php
<?php

class IndexTest extends \PHPUnit\Framework\TestCase
{
    public function test()
    {
        $client = \GuzzleHttp\Client();
        $response = $client->request('GET', 'https://127.0.0.1:8080/index.php?name=77web');

        $this->assertEquals(200, $response->getStatusCode());
        $this->assertTrue(str_contains($response->getContent(), '77webさん'));
    }

    public function test_xss()
    {
        $client = \GuzzleHttp\Client();
        $response = $client->request('GET', 'https://127.0.0.1:8080/index.php?name=<script>alert()</script>');

        $this->assertEquals(200, $response->getStatusCode());
        $this->assertTrue(str_contains($response->getContent(), '&lt;script&gt;'), 'エスケープされていること');
    }
}
```

Guzzleを使って実際に開発ウェブサーバーのindex.phpにアクセスし、帰ってきたレスポンス内容をstr_contains関数で検査しています。

この例ではGuzzleを使っていますが、HTTP Clientのライブラリは他にも存在するので、使いやすいものを使えばOKです。
https://docs.guzzlephp.org/en/stable/

## よりスクレイピングテストしやすいツール

[Symfony BrowserKitコンポーネント](https://github.com/symfony/browser-kit) は上の例のようなトラディショナルなHTMLを返すURLに対するスクレイピングテストを書くときに便利なツールとなっています。
オーストラリアがIoT・電子工作天国だった件

# 会社から25周年の休暇、1か月！
弊社、素晴らしい制度があり、入社から25周年でまるまる1か月のお休みがもらえます。
考慮の結果高校生の息子とオーストラリアに滞在することにしました！


# オーストラリアがIoT・電子工作天国だった件：その1 秋月電子(秋葉原)がどこにでもある!

最初は観光地を巡ってみたりもしましたが1か月の長期おやすみ。
そんなに盛り上がりません。

やっぱり電子工作、IoTに関連したお店を探したくなりますよね？

ありました。素晴らしいお店が。
しかもオーストラリア中にある！！！！

その名は[「Jaycar」](https://www.jaycar.com.au/)！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/a7e54755-40b5-b847-eb5c-63312f0fa2a6.png)

![オーストラリアIoT天国 (4).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/eb6decdb-6d4e-5bf9-e935-0e24ba982179.jpeg)


何が凄いってエリア展開

オーストラリアで200店舗以上。
私が行ったシドニーでも山ほどお店がありました。
シドニーと東京都が同じくらいなので比べてみると、、、

奥多摩相当の場所にもあるし居住エリアにまんべんなく広がっています。
![オーストラリアIoT天国 (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/896cd957-87b1-f73c-50cb-d9374ff79c25.jpeg)


結論：オーストラリアなら突然のLED購入/抵抗購入も問題なし！

IoTLTメンバーの海外旅行はオーストラリアがおすすめ！

# オーストラリアがIoT・電子工作天国だった件：その2やっぱり人が好き！＋IchigoJam布教活動(^^;

1か月もいると思います。
お店を回るのも楽しいけど、なにかイベントとかないのかな？例えば大好きなIoTLTみたいな？

シドニーのイベントで探してみると、、、「IoT Maker Space」というイベントを発見！！！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/5cdb6d3f-c729-1e9a-5743-162f4c5f756b.png)

![オーストラリアIoT天国 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/f3bdcd0c-31b6-641b-bce3-3df3a34555a3.jpeg)
熱いIoT Lover達がここにも！

そしておもむろにIchigoJamを取り出し、PR! (^^;
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/89f1014c-e23c-c7d9-2215-726677fd45b4.png)

全員集合！
![オーストラリアIoT天国 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/940e3e17-874c-b5c7-3cac-40ac750d36b5.jpeg)

写真は撮り損なってしまいましたが、会場に来ていた小学生(参加者のお子さん)にIchigoJamでLチカを教えたところ、その簡単さに感動していました！

さて、こうなるとさらに探してガンガン参加したくなりますね。

そして「Developers drink up」発見！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/d09d8089-693f-9331-3c04-23e8ce0e3d21.png)

IchigoJamなど布教してみました(^^;

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/1e2fba42-e9c9-fb98-85ed-d0bdbc5856b9.png)


結論：旅行先でもイベント参加が楽しい！！

なお、利用したのはこちらの[「meet up」](https://www.meetup.com/)というサイトです
Gmailは開発者を苦しめる

# 何だこれは！？

あるカラフルなHTMLメールを送信して、Gmailクライアントでテストをしていたある日。。。
なんだこれは！？！？
Gmailクライアントの色の変えようにびっくりしてしまいました。
しかし、ここまで色を変えられるとデザインによっては大きく雰囲気が変わってしまいます。
本記事ではGmailでも任意に色を設定することを目的としています。

| Gmailクライアント（ライトモード） | Gmailクライアント（ダークモード） | iOSのデフォルトメールクライアント（ダークモード） |
|:--:|:--:|:--:|
| ![IMG_3556.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/ad87193c-36f6-7549-cfa2-fd3f748adeab.png) |![IMG_3555.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/565f68ef-5564-e9e5-5a32-d7aab202e04c.png)| ![IMG_3557.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/f0c8e338-5e4c-60fa-f3cb-59327de45b51.png) |


# 色を変えたくない！！
## 対象メールのHTML

```html
<html>
  <head>
    <style type="text/css">
      .blue {
        background: #0000FF	;
        text-align: center;
        color: #FFFFFF;
      }
      .navy {
        background: #000080;
        text-align: center;
        color: #FFFFFF;
      }
      .green {
        background: #008000;
        text-align: center;
        color: #FFFFFF;
      }
      .lime {
        background: #00FF00;
        text-align: center;
        color: #000000;
      }
      .aqua {
        background: #00FFFF;
        text-align: center;
        color: #000000;
      }
      .yellow {
        background: #FFFF00;
        text-align: center;
        color: #000000;
      }
      .red {
        background: #FF0000;
        text-align: center;
        color: #000000;
      }
      .purple {
        background: #800080;
        text-align: center;
        color: #FFFFFF;
      }
    </style>
  </head>
  <body>
    <h1>テストメール</h1>
    <div class="blue">
      <h2>blue</h2>
    </div>
    <div class="navy">
      <h2>navy</h2>
    </div>
    <div class="green">
      <h2>green</h2>
    </div>
    <div class="lime">
      <h2>lime</h2>
    </div>
    <div class="aqua">
      <h2>aqua</h2>
    </div>
    <div class="yellow">
      <h2>yellow</h2>
    </div>
    <div class="red">
      <h2>red</h2>
    </div>
    <div class="purple">
      <h2>purple</h2>
    </div>
  </body>
</html>

```


## linear-gradient()を使う
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient

linear-gradientで背景色を作ると、画像として認識され色が変わらないというハックがあります。

以下のように、`background`に対して、`linear-gradient(カラーコードA, カラーコードA)` というように同じ色を指定します。

```css
.blue {
  background: linear-gradient(#0000FF, #0000FF) 	;
  text-align: center;
  color: #FFFFFF;
}
```

| Gmailクライアント（ライトモード） | Gmailクライアント（ダークモード） | 
|:--:|:--:|
| ![IMG_3556.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/ad87193c-36f6-7549-cfa2-fd3f748adeab.png) | ![IMG_3558.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154845/bf56be40-c140-2b39-b214-bacefcbe53c7.png) |


このように色を固定して表示することができました。
CSSのclassって前方・後方検索ができるんですよ！


https://codepen.io/yuriacats/pen/QWOpgqN
↑ サンプルコードはこちら

## CSSで要素を前方検索・後方検索

後方検索
```css
タグ名[class$="ターゲット文字"]
```
前方検索
```css
タグ名[class^="ターゲット文字"]
```
部分検索
```css
タグ名[class*="ターゲット文字"]
```
## 使用例

```css
input[type="checkbox"]:checkd~div[class^="hoge"]
```
意味：
チェックボックスがチェックされた時に兄弟要素のうち、hogeから始まる要素（=hogetarou,hoge-01-red など）にCSSが適用される

上記の機能を活用することで、以下のようなCSSの適用の仕方をしたい時に以下のようにCSSのクラスを命名することで、少ない行で簡単にスタイルの違いを作ることができます。

|要素A＼要素B|あり|なし|
|--|---|---|
|あり|youa-youb|youa-off|
|なし|off-youb|off-off|

```css
div[class^="youa"]{
//youaの時のスタイル
}
div[class$="youb"]{
//youbの時のスタイル
}
```
Elixir生誕10周年祭■第5弾：ElixirでWebAssemblyにトライ

この記事は、[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir) 10の10日目です

昨日は、私で「Elixir生誕10周年祭■第4弾：ElixirDesktopスマホネイティブアプリ開発」でした

---

[ElixirImp／fukuoka.ex／kokura.ex](https://fukuokaex.connpass.com)と[LiveView JP](https://liveviewjp.connpass.com/)の [piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

下記コラムで、Elixir生誕10周年を出迎えるコラムを昨年のAdvent Calendarでまとめました

https://qiita.com/piacerex/items/7bf8f9f4f5f576e597f5

本コラムは、そのアンサーコラムの第5弾で、ElixirでWebAssemblyにトライを味わうコラム一覧で、他シリーズは、こんな感じです

[**Elixir生誕10周年祭■第1弾：Elixir／Phoenixで会員制サイト構築は瞬殺**](https://qiita.com/piacerex/items/e5590fa287d3c89eeebf)
|> [**Elixir生誕10周年祭■第2弾：Elixir／LiveViewでJS不要のSPA＋Tailwind UI**](https://qiita.com/piacerex/items/c86e9d1150937091c06c)
|> [**Elixir生誕10周年祭■第3弾：Elixir／Livebook＋NxでPythonっぽくAI・ML**](https://qiita.com/piacerex/items/ccfc7198f08d06433fbc)
|> [**Elixir生誕10周年祭■第4弾：ElixirDesktopスマホネイティブアプリ開発**](https://qiita.com/piacerex/items/d67ebc3b5deb789005a5)
|> **Elixir生誕10周年祭■第5弾：ElixirでWebAssemblyにトライ**
|> [**Elixir生誕10周年祭■第6弾：Elixir／WebSocketでVR／AR／メタバース連携**](https://qiita.com/piacerex/items/9ba9985d90d764f76bec)
|> [**Elixir生誕10周年祭■第7弾：Elixirでエッジコンピューティング開発**](https://qiita.com/piacerex/items/209b0d4ba66d41abdb0c)
|> [**Elixir生誕10周年祭■第8弾：Elixirで海外進出を目指す**](https://qiita.com/piacerex/items/1b55caee64367d73d2fb)
|> [**Elixir生誕10周年祭■第9弾：ElixirでWeb3／DID／DAO**](https://qiita.com/piacerex/items/3ba80f84226e911c5cd4)
|> [**Elixir生誕10周年祭■第10弾：Elixir／Phoenix 1.7プレビュー**](https://qiita.com/piacerex/items/3cec70e037ed38b8d9e1)
|> [**Elixir生誕10周年祭■第11弾：Elixir Chip（専用プロセッサ）を作る**](https://qiita.com/piacerex/items/539e1109aef4530e146b)

<h3>:ocean::ocean::ocean: Elixir Advent Calendar 総勢13本、熱い冬ヽ(=´▽`=)ﾉ :ocean::ocean::ocean:</h3>

例年に無い盛り上がりを見せています … 応援／購読よろしくお願いします :bow:

https://qiita.com/advent-calendar/2022/elixir
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/2965fc3b-ff27-4cb9-f924-9e5db67603fc.png)](https://qiita.com/advent-calendar/2022/elixir)

---

# ElixirでWebAssemblyにトライ

https://speakerdeck.com/nako_sleep_9h/wasmtutehe-webassemblyhazimetenofang-he

[**UbuntuでWasmExを動かそう**](https://qiita.com/t-yamanashi/items/c151eb3bb155da75f1cf) by @t-yamanashi 
|> [**「ElixirImp#25：はじめてのWebAssembly＋Elixir」レポート**](https://qiita.com/torifukukaiou/items/150790f5944947580013) by @torifukukaiou
|> [**ZEAM で広がる Elixir と WebAssembly の未来**](https://qiita.com/zacky1972/items/da4c423f328e26d4b569) @zacky1972 
|> [**自作3Dライブラリ次回作の新しい武器を探してたらElixirに出会いました**](https://qiita.com/emadurandal/items/1fe28406a67805a35e27) @emadurandal 

---

<h3>:ocean::ocean::ocean: Elixir生誕10周年を一緒にお祝いしませんか？ :ocean::ocean::ocean:</h3>

12/21（水）19:30～21:00、「過去LTいただいた方々への感謝祭」をテーマに、リモート忘年会を開催（本コラムも解説します）

「Elixir生誕10周年」に対するコメントや、今／昔のElixirの進化を聞けるチャンスですので、お見逃し無くッ

https://fukuokaex.connpass.com/event/263809/

<font color="#f020a0"><b>※カンパイスタートの会ですので、お酒 or ソフトドリンク、お菓子 or ご飯をお忘れなく</b></font>

<font color="#a020f0"><b>※Zoom接続できれば、本人でも、2Dアバター／3D（VR）アバターでも、お好きな姿でご参加OK</b></font>

---

明日も、私で「Elixir生誕10周年祭■第6弾：Elixir／WebSocketでVR／AR／メタバース連携」です
pandas 読み込み／書き込み

# csv ファイルの処理

## AWS S3のファイルを読み込んでCP932でファイルに書く
AWSのファイルはUTF-8なので読み込み指定し、書き込み時はcp932にして書く。

```python
            dfData = pd.read_csv(url, encoding="utf-8")
            dfData.to_csv(filename, encoding="cp932")
```

## 巨大なファイルを読み込んでcp932でファイルに書く
巨大なファイルはメモリも気になるので、分割して読んで追記する。
確認はしていない。

```python
dfData = pd.read_csv(url, encoding="utf-8", chunksize=1000)
isTop = true
for value in dfData:
    if (isTop):
        dfData.to_csv(filename, encoding="cp932", header = False, index = False)
        isTop = false
    else :
        dfData.to_csv(filename, encoding="cp932", mode="a", header = False, index = False)
                    
```
ブランチはこんな時に便利！

# ブランチはこんな時に便利！
## 疑問点
以前はTFSを使用していたが、GitLabを使うことになりGitの基礎講習を受けた。
ブランチについて説明を受けたがいまいちメリットがピンとこなかったので、
実際に使ってみて感じたことを共有。

## TFSで不便だった点
TFSではできなかったこととして、現行の流通システムに対して
- ページレイアウトの改善
- 新機能の追加
- バグの改修
など同時に複数の作業を行いたいときに、
「ページレイアウトの修正が途中だから新機能の追加や検証ができない！」
「コード編集中のため現行のバグが再現できない！」
「せっかく途中まで進めたのにバグの改修のために一旦保留中の変更を破棄（もしくは別で保存）しなければならない！」
などたびたびめんどくさい場面に遭遇していた。

## GitLab（分散管理）の便利な点
上記の作業をブランチを切って作業することで作業途中の内容を一旦コミットしておけば、
そのブランチの作業前の状態から別のブランチを切ることもできる。


## ブランチを切る際の注意点
ブランチを切る際は

`git branch newBranch`

のコマンドで実行可能だが、他のブランチの変更内容を現在のブランチに統合（merge）したい場合は

`git merge main`※mainの内容を現在開いているブランチにmergeするコマンド

で統合することができる。その際に誤ってmainを開いた状態で

`git merge newBranch`

などと実行してしまうと意図せずmainに作業用ブランチのコードが混じってしまうことがあるので注意。
※一回前のコミットであればVScodeからGUI上でコミット前の状態に戻すことも可能。
【CommonLisp】意識低い系Loop


## 何これ

動けばいいじゃんという意識が低いLisperのためのLoopマクロの説明です
**意識が高いLisperは使ってはいけません**

一応書いておきますが、dotimesとかdolistが使えるならそっちを使ったほうがいいでしょう

## Loop

```common-lisp
(loop (format t "hoge~%"))
```

上記のように書くと無限に"hoge"が出力される
要するに無限ループということ
つまり

```common-lisp
(loop
  (when (終了条件) (return))
  (ぐるぐるしたい処理)
  (なんかの更新処理))
```

と書いておけばループは大抵何とかなる
単純明快！シンプルイズベスト！
これでLoopマクロをいちいちググらなくても使える！やったね！

以上
【WordPress】記事を編集・削除・復元する

# 前回の記事

前回の記事では、固定ページの作成について触れました。

https://qiita.com/raptony110/private/48c5cd584f19e28d4bb4

今回は、これまでに作成した記事や固定ページの編集や削除する方法を確認しておきましょう。

僕のAdvent Calendarを読み終わった人が、
「へぇ簡単なんだなぁ〜　自分もWordPress使ってサイト作ってみようかな〜」って思うあなたがそこにいたのなら、、、、
読むだけで、頭の中WordPress化しちゃったんだよッ！！！！

https://qiita.com/advent-calendar/2022/wordpress-output

# 記事を編集する
投稿した記事を編集したい場合は、投稿一覧を開いて、編集したい記事にカーソルを当てると「編集」メニューが表示されますので、編集ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/76404eb8-f811-1919-d70b-3845d4aa24b9.png)
そうすると、記事作成と同じブロックエディタ画面が開きますので、編集を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/fa3bfbee-832d-f345-19cc-eaf8d4abff38.png)

# 記事を削除する
記事を削除する場合は、同様に、削除したい記事にカーソルを当てると「ゴミ箱へ移動」というボタンが表示されますので、クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/38006770-f4e2-b0a0-5cc5-23d70e7738dc.png)
そうすると、一覧から消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/e00c5cfc-5ecc-4726-f0fe-966ea75fb6c6.png)
しかし、この状態では完全に削除された状態ではありません。
適用ボタンの上あたりに「ゴミ箱」というリンクが見えると思いますので、これをクリックします。
ここから削除したい記事にカーソルを当てると「完全に削除する」というボタンが表示されますので、こちらをクリックすると削除されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/30d08534-63cb-86cc-9a3f-90a5e73fadf3.png)

# 記事を復元する
一度ゴミ箱へ移してしまった記事を復元する場合は、ゴミ箱から復元したい記事にカーソルをあてて、復元ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/993363b7-35ab-7ffc-64a7-b8f6600be11a.png)
すると、復元した記事が「下書き」状態で復元されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/ec2c4791-8407-d643-d234-58dcf1ec72e1.png)

# おわりに
今回の記事の編集・削除・復元方法を確認しました。

次回は、ウィジェットを使って、Webページに機能性を持たせていきましょう。
sort()メソッドを使ってReactでソート機能を実装する

# やりたいこと

お店の名前、評価のデータ一覧が入った配列が親コンポーネント`<App>`から渡され、 `<ShopList>` コンポーネントでmapを使ってさらに子供のコンポーネント`<ShopItem>`にデータ展開している。

この`<ShopList>` コンポーネントの中に、「並び替えボタン」を設置し、クリック時に評価順にソートして表示する機能を追加したい。

```react:App.tsx
export type Shop = {
  name: string;
  rating: number;
};

const shops:Shop[] = [
  {
    name: 'shopA',
    rating: 1.2,
  },
  {
    name: 'shopB',
    rating: 2.6,
  },
  {
    name: 'shopC',
    rating: 0.9,
  },
  {
    name: 'shopD',
    rating: 3.1,
  },
];
const App = () => {
  return <ShopList shops={shops} />;
};
export default App;
```

```react:ShopList.tsx
import { Shop } from './App'
import ShopItem from './ShopItem';


type Props = {
  shops: Shop[];
};

const ShopList = ({ shops }: Props) => {
  return (
    <>
      {shops.map((item, i) => (
        <ShopItem shop={item} key={i} />
      ))}
    </>
  );
};
export default ShopList;
```

# 実装方法

`ShopList.tsx` を以下のように修正する。

```react:ShopList.tsx
import { useState, useEffect } from 'react';
import { Shop } from './App'
import ShopItem from './ShopItem';


type Props = {
  shops: Shop[];
};

const ShopList = ({ shops }: Props) => {
  const [sortedShops, setSortedShops] = useState<Shop[]>(shops);

  useEffect(() => {
    setSortedShops(shops);
  }, [shops]);

  const sortByRating = () => {
    var clonedShops = Array.from(sortedShops);
    clonedShops.sort((a, b) => b.rating - a.rating);
    setSortedShops(clonedShops);
  };

  return (
    <>
      <button onClick={sortByRating}>並び替えボタン</button>
      {sortedShops.map((item, i) => (
        <ShopItem shop={item} key={i} />
      ))}
    </>
  );
};
export default ShopList;
```

## 実装のポイント

- **useState()の初期値をuseEffect内で設定すること**

useEffect内で `setSortedShops` を呼ぶことで、propsで受け取った値を `sortedShops` として設定することができる。React.useState()の初期値は一度しかセットされないため、useState()の初期値にpropsを使う場合はuseEffect()の中で値を設定することで、propsが変化した時に親から受け取ったshopsをsetすることでができる。

参考：[【React】useState()の初期値にpropsを使う時の注意点](https://zenn.dev/lilac/articles/9e025186343058)

- **sortメソッドの結果を一時変数に入れる**

sortメソッドを使ってお店の評価( `rating` )によるソートを行ったものを一時変数( `clonedShops`)に入れて、 `setSortedShops` することで、React側がオブジェクトの変更を検知し再レンダリングが走る。一時変数を使わず、直接 `sortedShops` をソートしようとすると、オブジェクトの変更が検知されず、再レンダリングが走らない。
Leetcode 328. Odd Even Linked List

# 328. Odd Even Linked List

https://leetcode.com/problems/odd-even-linked-list/

## 難易度
### Medium

```java
package com.leetcode.easy;

public class OddEvenLinkedList328 {
    public static void main(String[] args) {

    }

    public ListNode328 oddEvenList(ListNode328 head) {
        if (head == null) {
            return head;
        }
        ListNode328 odd = head;
        ListNode328 even = head.next;
        ListNode328 evenHead = even;

        while (even != null && odd != null) {
            even.next = even.next.next;
            odd.next = odd.next.next;
            even = even.next;
            odd = odd.next;
        }
        odd.next = evenHead;
        return head;
    }
}

class ListNode328 {
    int val;
    ListNode328 next;

    ListNode328() {
    }

    ListNode328(int val) {
        this.val = val;
    }

    ListNode328(int val, ListNode328 next) {
        this.val = val;
        this.next = next;
    }
}
```

- [こちら](https://leetcode.com/problems/odd-even-linked-list/discuss/1606975/JAVA-or-2-Solutions-or-Explanation-Using-Image-or-Without-Space)の解説を参考しました
【パソコン初心者】コンピューターの構成

# 目次
- [コンピューターの構成](#コンピューターの構成)
- [ハードウェアとソフトウェア](#ハードウェアとソフトウェア)
- [プログラム記憶方式](#プログラム記憶方式)


# コンピューターの構成
コンピューターは、制御装置・演算子装置・記憶装置・入力装置・出力装置の5つの装置から構成されています。このうち、制御装置を合わせて[中央処理装置(CPU)]()といい、コンピューターの頭脳といいます。それぞれ、以下のような役割を果たしています。

| 装置 | 役割 |
|:-:|:-:|
| CPU  | 制御装置 : 記憶装置からのプログラムの命令を取り出して解読し、各装置に指示を与える  |
| CPU  | 演算装置 : 四則演算(加減乗除)や論理演算などを行う  |
| 記憶装置  | データやプログラムを記憶する  |
| 入力装置  | コンピューターの外部からプログラムやデータを読み込む  |
| 出力装置  | コンピューターの内部で処理されたデータを外部へ導き出す  |

![コンピューターの構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/0d51bd0a-7bd8-034b-352a-e9940c2b1263.png)


#### Tips!

コンピューターの5つの装置 : 制御, 演算, 記憶, 入力, 出力装置

# ハードウェアとソフトウェア

ここまで上げた5つの装置は、**ハードウェア**です。機会として物理的に存在します。(制御装置、演算装置はCPUの中に存在します)
これに対してプログラムやアプリケーションソフトウェアソフトウェアです。記憶装置に記憶された「1」と「0」の信号という形で存在します。

# プログラム記憶方式

現代のコンピューターは、**記憶装置（主記憶）に記憶されタプログラムをCPUが順に取り出し、解読・実行する方**です。**プログラム記憶方式(プログラム格納方式)と**言われています。ハードウェアを変更しなくても、プログラムを変更することで、さまざまな処理を行うことができます。
【Swift】初心者のランダム通話アプリ開発奮闘記 #9

# 今日の積み上げ
なし、、、
いいコーワーキングスペースを見つけたのは収穫かな、、
https://trialvillage.net
アットホームな感じでそんなに満席でもないいい感じ。
1500円/日 で回数券もある感じです。
愛知県豊橋市に寄ったときには是非是非！！！
コストコ会員限定メールマガジンがgmailに届いたらLINEに通知する

こんにちは！
[PRAアドベントカレンダー2022](https://qiita.com/advent-calendar/2022/robotic_process_automation)の14日目記事です
我が家では12月に必ずコストコへ行きますので、コストコ会員限定メールマガジンの通知を自動化したことを無理やり記事にしてみました
これのどこがRPA？業務改善？１㍉ぐらいはかすってないですかね
ごめんなさい🙇先に謝っておきます。

# やったこと

gmailに本日届いた「コストコ会員限定メールマガジン｣を抽出して、本文内のリンクをLINENotifyに転送する

## gmailからメールを抽出する

GASでGメールを検索するには`GmailApp.search`の引数に検索演算子を含めた検索条件を文字列で指定します
検索条件はこのようにGメールの画面でフィルタリングした文字列をそのまま使用できるので、
コーディング後の状態がイメージしやすくて助かります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150628/1bc196d0-1a58-9d78-b3d6-1d380019b13e.png)
Gメール標準の検索演算子は[こちら](https://support.google.com/mail/answer/7190)

検索結果は２次元配列のメールスレッドに格納されているので、ループしながら１件ずつ読みこんでいきます

```main.js
    const today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd');
    const query = `from:コストコ会員限定メールマガジン after:${today}`;
    const threads = GmailApp.search(query);
    threads.forEach(thread => {
        const gmails = thread.getMessages();
        gmails.forEach(gmail => {
            // LINEへ通知する処理
        });
    });
```

## メール本文からURLを抽出する

メール本文から抽出したいセールのURLは本文の４行目あたりに記載されています
先頭から10行ほどをピックアップして該当行からURLを直接抜き出します
本来ならURL文字列を検索する正規表現を使って抽出すべきなんでしょうが、
なぜか抽出できなかったので今後の課題としています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150628/a39a71cf-c191-3c8b-a658-2d9f68232e5d.png)


```main.js
    const today = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd');
    const query = `from:コストコ会員限定メールマガジン after:${today}`;
    const threads = GmailApp.search(query);
    threads.forEach(thread => {
        const gmails = thread.getMessages();
        gmails.forEach(gmail => {
            const bodylist = gmail.getPlainBody().split('\r\n').slice(0, 9);
            // ３行目と４行目の条件が一致したらリンクを送信する
            const findIndex = bodylist.indexOf('画像付ﾒﾙﾏｶﾞはこちらでご覧いただけます。');
            if (findIndex > -1) {
                const url = bodylist[findIndex + 1].replace(' (PC専用ｻｲﾄ)', '');
                SendNotify(gmail.getSubject(), url);
            }
        });
    });
```

## LINEへ通知する

LINEへの通知先は自分だけなので、今回は[LINENotify](https://notify-bot.line.me/ja/)を使用しています
LINENotifyのアクセストークンはスクリプトプロパティに格納しておきます

```notify.js
function SendNotify(title, url) {

    let message = title + '\n' + url;

    const token = PropertiesService.getScriptProperties().getProperty('ACCESS_TOKEN');
    let options = {
        "method": "post",
        "headers": {
            "Authorization": "Bearer " + token
        },
        "payload": {
            "message": message
        }
    }
    UrlFetchApp.fetch(url, options)
}
```

# まとめ

プライベートで必要なことをちょこっと作るのは気が楽でいいですね
今回は特定のメール受信とLINEへの通知を自動化したのですが、
Gメールの検索条件や連携内容、連携先などが入れ替えできるような仕組みにしておけば
他で応用ができるので便利ですね

最後まで読んでいただき、ありがとうございました

### 補記：コストコ会員限定メールマガジンとは

コストコ会員限定メールマガジンに登録すると今週と翌週のセール情報を見ることができます。
毎週日曜日と木曜日の12時頃に届きます。

https://www.costco.co.jp/Newsletter
【React】カスタムフックのテストはこんな感じに書くといいよ

## はじめに

みなさんはフロントエンドのテストを書いているでしょうか？

書き始めると世界が変わりますよ
嘘ではなく、本当に開発スピードは上がるし、バグは減ります。

なぜテストを書くのかという話は以前書いたので、もし興味のある方は見てください

https://qiita.com/anneau/items/a2e18ff2678f8acaeaa1

今回は、**Reactのカスタムフックのテストをどのように書くのか**という話をします。

:::note
Reactに対して、Jestでテストを書いていきます
サクッと環境を用意したい方は、Next.jsを使うのが良いと思います。
https://nextjs.org/docs/testing#jest-and-react-testing-library
:::

## Reactにおけるテストコード

大別すると2つあります。

- 単体テスト
- コンポーネントテスト

他にもE2Eテストやビジュアルリグレッションテストなど色々ありますが、まずは上記二つが重要になってきます。

### 単体（ユニット）テスト

ある程度小さめに切られた単位（ユニット）に対してテストを書いていく方法です。

通常のfunctionもそうですが、Reactではとりわけ、カスタムフックに対していかにテストコードを書いていくかということが重要になってくるかなと思います。

なので、のちにカスタムフックについてのテストコードも紹介しようと思います。

### コンポーネントテスト

今回はコンポーネントテストについては触れませんが、

よりユーザーに近い動作のテストを書くことができます。
一つの小さなコンポーネントテストということで、単体テストと捉えられなくもないですが、結合テストに近いかなと個人的には思います。

## カスタムフックのテスト

さて、ざっと概要を知ったところで、今回フォーカスを当てるカスタムフックのテストについて話します。

### 0. 概要を理解する

まず、カスタムフックというのは、基本、関数コンポーネントの中でしか動きません。
フック自体が関数コンポーネントにstateやeffectを起こすものになるので、当然ですね。

ではテストはどう書くのでしょうか？

関数コンポーネントの中で書く？
それだと単体テストではなく、上に説明したコンポーネントテストになってしまいますね。

なので、`@testing-library/react`というライブラリを用い、擬似的に関数コンポーネントの中でカスタムフックを実行したかのように見せかけます。

### 下準備をする

何はともあれ、何をテストしたいのかを定めましょう。
今回は、簡単なトグルhooksを用意しました

```ts
import { useState } from "react";

export const useToggle = (initialValue: boolean) => {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue((current) => !current);

  return { value, toggle };
};
```

### 初期ステートがちゃんと入ることを検証する

先に紹介した`renderHook`を用い、カスタムフックを実行します。

```ts
describe('initial stateがfalseの時', () => {
  it('stateがfalseである', () => {
    const { result } = renderHook(() => useToggle(false));

    expect(result.current.value).toBe(false);
  });
 ...
});
```

#### result.current

`renderHook`は色々返してくれますが、`result`というところにhooksを実行した後の返り値をオブジェクトで渡してくれます。
今回で言うと、`useToggle`を実行した後には`value`と`toggle()`が返ってきます。

#### expect

検証には`expect`という構文を使います。
後ろにはマッチャーを書くことができ、今回の場合、`.toBe(false)`で返り値の`value`が`false`であることを検証しています。

### renderHookを実行したのち、toggle関数で値が変わることを検証する

次に、初期値を入れた後、toggle関数を実行して、実際に値が書き変わるか検証します。
ステートを変えるような処理を実行したい場合は、`act`で囲む必要があります。

```ts
  describe('initial stateがfalseの時', () => {
   ...
    it('toggleを実行したらtrueに変わる', () => {
      const { result } = renderHook(() => useToggle(false));

      act(() => {
        result.current.toggle();
      });

      expect(result.current.value).toBe(true);
    });
  });
```

これを実行すると、`result.current`が変化し、`expect`を用いれば値が`true`に書き変わっていることが検証できます。


## まとめ

今回はカスタムフックのテストということで、ざっくりとどう書いていけばいいのかについて記事にしてみました。
他にももう少し複雑なケースは、モックしないといけないケースなども出てきますので、またの機会に取り上げれればと思います。
【iPhoneユーザー限定】ショートカットでお手軽にゲームが作れちゃう!?!?

## はじめに
この記事は[長野高専 Advent Calender 2022](https://qiita.com/advent-calendar/2022/nnct)の6日目の記事です。

ゲーム作りたいけどプログラム書くの難しいなぁ．．．せや！ショートカットで作ればええんや！！！

## ショートカットって何？
iPhoneを買うとデフォルトで入っているアプリです．スクラッチのようにブロックを置いてプログラムを作成します．一般的には今日の時間割を確認するなど，日常でよく使うものをより簡単に行うために使われます． ショートカットなんてほとんど触ったことないという方が多いと思いますが，ショートカットには想像以上に多くの機能が存在しています．せっかくiPhoneがたくさんの機能を用意してくれているのに，これを使わないのはもったいない！

## どんなゲームが作れるの？

結論として，初歩的なカジュアルゲーム，頑張ればRPGなどが作れます．
ショートカットがゲームを作るために提供されたアプリ出ない関係上，作れるタイプのゲームは限られてしまいます．
- 動的な画面描写ができない

ユーザーがボタンを押すまで画面が変化することがないので，アクションゲームなどのものは作れません．
- そもそもグラフィックに弱い

画像を表示させればできないことはないですが．．．基本的にテキストベースのゲームになります．~~くそ雑魚じゃん！~~
よってテキストだけで完成させられる初歩的なカジュアルゲーム，RPG等を作ることができます．
ゲームを作るにあたって，ゲーム部分もグラフィックも考えるとなるとかなりハードルが上がってしまいます．気軽にゲームを作るならこのくらい制約があっても悪くないですね！ですよね！！

## 環境構築
- iPhone または iPad の購入

これだけです．簡単だね！

## よく使う機能の紹介
とりあえずよく使う機能をざっくりと説明します．ここにあるものはよく使う項目に登録することをお勧めします．
#### 変数
これがなかったらプログラムを書こうと思いませんね．変数+100のような計算をしても変数の値は更新されないので，変数の中身を変えたいときは「変数を設定」を使って更新することを忘れないようにしてください(当たり前)．
#### if文
if文です．elseも使えます．
#### 繰り返し
for文です．一見固定された回数しか繰り返すことができないように見えますが，長押しすることで変数も使うことができます．リストの要素について繰り返し処理したい場合は「各項目を繰り返す」を使います．
#### リスト
配列です．一見便利そうに見えますが，なんと各要素の値の書き換えや消去の機能がありません！！その辺をしたい場合は自力で実装する必要があります．早く解決してくれーー
#### 辞書
辞書型です．どうやらjsonで管理しているようです．こちらはkeyに対応する値の書き換えは簡単に行うことができます．
#### ショートカットを実行
ほかのショートカットを実行することで関数として使うことができます．入力の値もせっていできるし，「停止して出力」を使えば返り値も設定することができます．実行するショートカットを自分自身に設定することで再起関数も実装できます．しかしこれにも問題点があります．それはものすごく実行に時間がかかること(古いiphoneを使っている場合は特に)，配布難易度が上がる事です．関数の中身が短いなら極力作るのを避けるべきです．
#### 結果を表示
print関数です．デバッグや文章の表示をする際に用います．似たようなものとして，「アラートを表示」というものがあります．
#### 入力を要求
ユーザーに数字やテキスト，時間等の入力を求めます．
#### メニューから選択
ユーザーにAとBの選択肢から選んでもらいます．選択肢は好きな数だけ作ることができます．リストの中から選択したい場合は「リストから選択」を使います．
#### ファイル
ショートカットではフォルダを作成する，ファイルを保存，消去する等のファイル操作することができます．これを使えばセーブデータ等の実装も可能です．

## ゲームの製作例
そんなわけで非常に簡単なゲームの例として「1/10の確率でたぬきに有り金全部奪われるゲーム」を，ちょっと頑張った例として記録を保存する機能が付いたHit&browを作ってみました！ぜひ遊んでみてください！！！
[1/10の確率でたぬきに有り金全部奪われるゲーム](https://www.icloud.com/shortcuts/6e8a99b169fc4dca89670e6fb64c04ea)
[Hit&Blow](https://www.icloud.com/shortcuts/f2664f16f0ce42b7ae11277b318aee3f)
ショートカットを動かしていると，次のような画面が出ることがありますが，常に許可を押せば大丈夫です．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051132/f1bd9ba3-20f5-875e-56ac-452c7b7e5e9f.png)

みんなもショートカットでゲーム作ってtwitterに投稿して，承認欲求モンスターを満たしましょう！
コミュニケーションを促進するカンタンな図の使い方

## はじめに

この記事はHRBrain Advent Calendar 2022カレンダー1の10日目の記事です。

https://qiita.com/advent-calendar/2022/hrbrain

プロダクトデザイナーの安藤です。
同僚から定期的にフィードバックをいただくので、図を使ってコミュニケーションするときに心がけていることを紹介できたらと思います。

## 利用する図形について

図形を組み合わせ、言葉で補助をすることで概念を表現します。
ベースの図形は言葉を取り扱いやすい四角形がオススメです。
取り扱える概念と形の関係性はいろいろありますが、代表的なものをいくつか取り上げます。

### 「流れ」を「線」で表す
![EX：課題整理用Figjam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/c84e355a-014d-c361-9605-98e68323fa0c.png)
応用パターンとしては「循環」も「線」で表す場合が多いです。
![循環.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/5ec042b2-c57d-7736-d167-3121ed2ee829.png)


### 「範囲・くくり」を「囲い」や「区切り」で表す
![範囲.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/05688386-3b34-b360-57d4-cc6d4d1f74bc.png)

### 「文脈」を「モチーフ」で表す
![モチーフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/5636c27a-9c92-ad7a-c6cd-efb135d9fea2.png)
1つ1つで書かれても分かりづらいので、架空のケースを元に活用事例をご紹介します。

## 活用事例紹介
![架空.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/ee65f976-178c-b81a-f871-5a0bd45ba1a1.png)
利用している図と概念を1つずつ見ていきたいと思います。
- 業務の流れを表現する → 流れと循環を表す線
- 対応業務を表現する → 範囲を表す囲い
- どの業務を誰が行なっているのかを表現する → モチーフ

言葉だけでこれらを説明するとしたら、「共通認識が取れるか？」「合意形成がスムーズに行えるか？」というところに不確実性を残してしまうと自分は感じます。
とはいえ、このくらいの量であれば、まだ頑張れることもあるかもしれませんが、以下くらいの内容になってくるとどうでしょう？（架空のドキュメントの運用の流れと人の対応範囲について書いたものです）
![権限範囲.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/914296/16455721-c975-0f4c-f0c5-ff699600ba35.png)
こうした複雑な関係性や概念を説明するには、言葉だけでなく、図があることでより素早く理解できるのは明白だと思います。

## よくある質問

##### Q：毎回、図を使うことが良いわけではないと思うんですが、特にどんな時に活用するのが良いですか？

A：おっしゃる通りですね。このコストを払った方が効率が高い、個々の理解や納得度が高まる、といった判断をする必要はあると思います。自分の場合は以下の場面で利用するケースが多いです。
- 複雑な概念を自分が理解する
- 共通理解を複数名で得る
- 合意形成を複数名で行う

特に複雑な概念を取り扱う場合、その場にいる人が「同じ図を見て理解できる」ことが合意形成のポイントになっていると感じます。

##### Q：モチーフを集めるのが毎回大変なのですが、どうすれば良いでしょうか？

A：大変ですよね。一度利用したモチーフはライブラリとして登録しておくと便利です。弊社では「いらすとや」で提供されている画像をライブラリとして登録し、活用しています。

##### Q：デザイナーだから出来るスキルのように感じてしまい、ハードルが高く感じます

A：FigJamやMiroといったホワイトボードツールを利用すると、図形は提供されていますので、非デザイナーでも簡単に図にすることができるようになります。「概念」と「図形」の関連づけに関しては、日々のコミュニケーションの中で「この概念は、図で表すとなんだろう？」と考えていると身につきやすいです。

## おわりに

日々の様々なコミュニケーション・コラボレーションの場面でひと手間かけた伝え方をすることで、関わる人が気持ちよく働けるようになるので、ご参考になると幸いです。

https://www.hrbrain.co.jp/recruit
スマートホームの規格 Matterについて調べてみた

# はじめに
[2022年11月3日](https://csa-iot.org/newsroom/matter-arrives/)にAmazon, Apple, Googleなどが参加しているスマートホーム製品の規格「Matter 1.0」がリリースされました。このプロトコルに対応する機器やスマートフォンも発売されてきています。
スマートホームの1つの規格として使われていくかもしれないので、対応機器やプロトコルを調べてみました。
まだ、調べている途中ですが、今後書き足していければと思います。

# Matter 対応機器
#### Appleの対応
OSバージョン [16.1](https://developer.apple.com/apple-home/matter/)から対応しているようです。

以下のソフトウェアは、[CSAのMatter認証済製品](https://csa-iot.org/csa-iot_products/?p_keywords=&p_type%5B%5D=17&p_type%5B%5D=14&p_type%5B%5D=1053&p_program_type%5B%5D=1049&p_certificate=&p_company%5B%5D=1051&p_family=)として登録されています。
* iPhone(iOS) [16.1でMatter対応](https://developer.apple.com/apple-home/matter/)
* iPad(iPadOS) [16.1でMatter対応](https://support.apple.com/ja-jp/HT213408#161)
* Mac(MacOS)
* Apple TV(tvOS) [16.1でMatter対応](https://support.apple.com/ja-jp/HT207936)
* HomePod [16.1 でMatter対応](https://support.apple.com/ja-jp/HT208714#161)
* Apple Watch(watchOS)


# プロトコル
 CSAから[Matter 1.0の規格](https://csa-iot.org/developer-resource/specifications-download-request/)をダウンロードできます。

## 機器検出(Discovery)
Matterノードの検索
```
dns-sd -B _matterc._udp
```

```
dns-sd -B _matterd._udp
```


# 参考文献
* [Matterの説明(CSA)](https://csa-iot.org/all-solutions/matter/)
* [Matterの実装(Github)](https://github.com/project-chip/connectedhomeip)
* [Matter認証済製品の検索ページ(CSA)](https://csa-iot.org/csa-iot_products/?p_program_type%5B%5D=1049)
* [Matter 1.0のリリース(CSA)](https://csa-iot.org/newsroom/matter-arrives/)