OmniAICreator/Qiita-1.07M huggingface dataset:
【DDD】「ドメイン駆動設計を導入するためにやったこと」に参加してもっと設計したくなりました

## はじめに
先日、増田 亨さん主催の「ドメイン駆動設計を導入するためにやったこと」に参加しました。
とても有意義な時間を過ごすことができたのでぜひ少しでもドメイン駆動設計について興味を持ってもらえたらと思い記事に纏めます。
また、増田さんは定期的にconnpassにてイベントの主催をしているので是非とも参加してみてください！
[connpass](https://connpass.com/user/masuda220/)

## ドメイン駆動設計のプラクティスでカバーできること、できないこと
「[ドメイン駆動設計のプラクティスでカバーできること、できないこと](https://www.slideshare.net/koichiromatsuoka/2022117)」

登壇者：松岡 幸一郎（[@little_hand_s](https://twitter.com/little_hand_s)）

### 要点
- DDDの目的
- DDDのアプローチ
- ログラスにおける実践
- 活用していくための取り組み

### 感想
印象としては「モデリング」「テストコード」について強く語っていた印象。
ただその2点だけが大事なのではなくDDDの目的やアプローチについても重要なことがあり勉強になりました。
松岡さんは書籍を出したりコミュニティもあることが知れたので早速参加しました！

[DDD Community Jp](https://t.co/OHNixNvQ7Y)
[ドメイン駆動設計 モデリング/実装ガイド](https://little-hands.booth.pm/)

## 巨大レガシーシステムの戦略評価とリファクタリングにおけるDDDの活用事例
[巨大レガシーシステムの戦略評価とリファクタリングにおけるDDDの活用事例](https://speakerdeck.com/minodriven/ju-da-regasisisutemufalsezhan-lue-ping-jia-torihuakutaringuniokerudddfalsehuo-yong-shi-li)

登壇者：ミノ駆動（[@MinoDriven](https://twitter.com/MinoDriven)）

### 要点
- コアドメインについて（重要）
- 問題領域と解決領域
- 事業領域を明確化、コアドメインの特定
- 巨大レガシーシステムの技術的負債解消
- 納得感の醸成
- 勉強会のやり方

### 感想
DDDを導入するためにも一人でできるものでもなく、チームで開発する以上メンバーに意図が理解されないと負債を減らすことは難しいということを知った。1番は勉強会のやり方が印象的。やってみたいけど自社では厳しい。だけどやり方自体は絶対いいので個人的にもくもく会を開いてうまいことやりたい。

### News
ミノ駆動さんの本が**技術評論社より今春全国出版予定**

## 基幹システムの刷新をドメイン駆動設計で取り組む
[基幹システムの刷新をドメイン駆動設計で取り組む](https://speakerdeck.com/masuda220/ji-gan-sisutemufalsebian-geng-wole-dean-quan-nisuru)

登壇者：増田 亨（[@masuda220](https://twitter.com/masuda220)）

### 要点
- why の合意形成
- how の認識合わせ
- what の体験学習
- 変更を楽に安全にするための設計方針について
- 手を動かして習得・納得・手応え

### 感想
ミュータブルデータモデルやイミュータブルデータモデルなど自分にはまだ聞きなれない言葉が出てきて知る機会を得れました。実は増田さんが「[現場で役立つシステム設計の原則](https://amzn.to/3rF2OW9)」を書いていたことを知らずにいましてこのイベントに参加して知って感動してました。ほんと良書だったので感謝の思いで増田さんのお話を聞いてました。

「[現場で役立つシステム設計の原則](https://amzn.to/3rF2OW9)」

## まとめ
ドメイン駆動設計はほんの数時間で理解ができるような内容では無いです。また、理解するための解釈の仕方も人それぞれ変わってくるしポイントも変わってくるかなという印象。それでも根っことしては変更優位性と機能性ということに対しての追求というのはみんな同じだと思ってます。いろんな人のいろんな視点を知れた今回のイベントは今後の自分に活かしていきます。
GitとGitHubを基本からまとめてみた【基本操作及びエラー解消法】

## リポジトリの移行時などでremote urlを変更する

#### 1. 新しいリポジトリを作成
GitHub上で『New repository』をクリックして作成する。

#### 2. 現在のremote url を確認

```
git remote -v
```

#### 3. remote url を変更
新しいリポジトリのURLに変更する。

```
git remote set-url origin {new-url}
```

正しく変更できているか確認する。

```
git remote -v
```

ここで正しくfetchとpushのURLが設定で規定いればOK。

もしpushが正しく変わっていない場合は下記で設定する。

```
git remote set-url --push origin {new-url}
```
#### 4. 新しいリポジトリにpush

```
git  push -u origin master
```

この -u オプションをつけることで、次回から git push だけで push先を origin master にしてくれる。


## git pushがreject（拒否）されたときの対処法

リモートにプッシュした時、次のようなエラーが出た場合

```
To github.com:○○○○○○/○○○○○○○
 ! [rejected]        master -> master (non-fast-forward)
error: failed to push some refs to 'git@github.com:○○○○○○/○○○○○○'
hint: Updates were rejected because the tip of your current branch is behind
hint: its remote counterpart. Integrate the remote changes (e.g.
hint: 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```

#### 対処法１
```
$ git pull origin master　　リモートの情報をローカルに持ってくる(自動的にマージも行われる)
$ git push origin master　　最新情報が一致するため通常のプッシュが行える
```
#### 対処法2
```
$ git push -f origin master  　強制(force)的にプッシュする
```




## 参考サイト
[【git】リポジトリの移行時などでremote urlを変更する](https://kde.hateblo.jp/entry/2018/02/18/200459)
[git pushがreject（拒否）されたときの対処法](https://qiita.com/Takao_/items/5e563d5ea61d2829e497)
Next12でkonva8を使うためにdynamic importを行ったメモ

## 概要
Next.jsの12とkonvaの8では、konvaがブラウザで読み込むesm前提になっているため、そのままでは以下のエラーが発生してしまう。

```
 require() of ES Module D:\project\node_modules\react-konva\lib\ReactKonvaCore.js not supported.
Instead change the require of Core.js in D:\project\node_modules\react-konva\lib\ReactKonvaCore.js 
to a dynamic import() which is available in all CommonJS modules. 
```

`dynamic import`を使用して対応したメモを残す。[Next - dynamic import No SSR](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr)


## 変更点
```diff
import React, { useEffect, useState } from 'react'
import { NextPage } from 'next'
import Head from 'next/head'
import fetch from 'isomorphic-unfetch'
- import Edit from '~/domain/kakuriyogarden/components/'
import { useCharacterViewModel } from '~/domain/kakuriyogarden/store/character'
import type { Magic } from '~/domain/kakuriyogarden/classes/gemory/magic'
import dynamic from 'next/dynamic'


+ const Edit = dynamic(() => import('~/domain/kakuriyogarden/components/'), {
+   ssr: false,
+ })

const Page: NextPage<{
  id: string
  pageTitle: string
  skills: any
}> = function () {
  const [skills, setSkills] = useState([])

  const pageTitle = 'カクリヨガーデン: キャラクター編集'
  const vm = useCharacterViewModel()

  return (
    <>
      <Head>
        <title>{pageTitle}</title>
      </Head>
      <Edit vm={vm} cardList={skills} />
    </>
  )
}
export default Page
```

[ソース](https://github.com/hibohiboo/kotatool/blob/c776dcf95b225ca069e20841eb1dc4df1cde7fad/src/pages/kakuriyogarden/characters/edit/index.tsx)

## 参考
[【JavaScript】基本的なモジュール（ESM）の使い方について【まとめ】](https://qiita.com/higa02/items/1112128192b1e0466cc6)
[react-konva issue](https://github.com/konvajs/react-konva/issues/588)
[firebase9に対応したメモ](https://qiita.com/hibohiboo/items/9fe72a434552949270a5)
[next-auth](https://next-auth.js.org/getting-started/client#usesession)
プログラミングを学んで2週間。PowerAutomate Desktop の OCRを使ってレシート（JPG）をExcelに落とし込んでみました

私は、スタッフとして小売業のレジ業務のオペレーション改善を担当しています。
店舗では陳列している商品の価格が掲示されている価格と異なったことが発覚（通称「売価エラー」原因の大半は、前日の特売POPの取り外しを忘れて、安いと思って買おうとしたが定価だった）した場合、その際に所定の紙に記入作業を行い、店舗内の他部署への報告に加えて、エクセル等に打ち直して本部への発生事由の報告があります。

所定の紙には、レジのテストモードで価格を確認したレシートの貼付も必要です。

最終かつ壮大なアウトプットとしては、価格を確認したレシートを写真で撮り、報告に必要な項目が抜きとられてExcelに変換する、までできる仕組みが作れたらよいですが、まず初めにレシート（jpeg/jpg）をExcelに落とし込めるか、をやってみました。


#使用した機能
・Power Automate desktop（以下PAD）
・tesseract


#PADの構成について
Power Automate desktopのフローは以下の通り
![フロー全体.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/99a10ba8-8aa9-d6d0-930b-320694ada054.png)


#PAD　項目ごとの説明
##1.【OCRを使ってテキストを抽出】
まずは、レシート画像をテキストに変えます。
１．OCRはtesseractを使用。
２．「画像ファイルパス」はExcelに取り込みたいレシート（JPG）を選択。
![フロー1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/21cdf1fc-ca70-561c-acbb-6950cf38a9e1.png)
３．「OCRエンジンの設定」では、tesseractはそのままでは日本語に変換できないため、「他の言語を使う」をクリックし、「言語コード」を日本語の【jpn】、言語データパスをtesseractのフォルダに設定。
４．「生成された変数」は「OcrText」に。
![フロー1-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/f2a49e24-fde9-3c5c-6a81-8e35436caa70.png)


##2.【テキストの分割】
抽出されたテキスト（OcrText）を区切り記号に文字列が区切られるように設定。
![フロー2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/9ccbbf13-93f3-702c-61da-9468d2afb824.png)


##3.【Excelの起動】
OCRで抽出されたテキストをどのExcelファイルに入力させるのか、をExcelの起動と希望するExcelファイルを設定します。
![フロー3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/203b1d96-1832-132d-7538-456961f4fbb7.png)



##4.【変数の設定】
OCRで抽出したデータを取り出したり、エクセルに書き込んだりするのに、ループをおこないます。そのループした回数をカウントするのに、変数を作成します。
![フロー4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/8acfd3a4-c436-9ddc-0e99-3404d5a26628.png)


##5.【Loop】
Loopを利用して、取得したファイル数分、反復処理（ループ）をおこないます。
![フロー5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/5283b5d6-67f9-2ef7-ed3e-eeef7aa9d99b.png)


##6.【Excelワークシートに書き込み】
【Loop】と【End】の間に【Excelワークシートの書き込み】を差し込む。
OCRで抽出したレシートのテキストをExcelのどこに記入するのかを設定。
![フロー6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/b464b0c3-809f-3a40-3461-d65865476a1c.png)



#出来上がり
![KIMG1508(加工).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/d8a71087-44f4-c510-485f-ed8d7583041f.jpeg)
![excel転換.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2495333/37131f03-b9f7-4635-b222-47e7f2aed6be.png)



#課題と今後
Qiita記事はPDFでの事例が多かったので、そこに記載のフローを参考にJPGで試みました。
実際に作ってみて文字化けが多かったです。JPGは難しいのでしょうか・・・
今後は、レシート内の欲しい項目だけを抜き出してExcelに落とし込めるか挑戦してみます。
Vueで子のstyleを親側で変更するのに躓いた件



## 使用環境
・Windows
・VScode
・Node.js   (v14.17.6）
・Nuxt

## はじめに
Nuxtにてアプリ開発をする中で、子コンポーネントのstyleを親側で変更することに苦戦した経験があったので同じところで躓かれている方の参考になればと思い書きました。


## 結論
Vueでstyleを記述する際にscopedにしていると思いますが
この場合親側からは普通にseleterを選んでもstyleが効きません。
deep selectorというものが必要になります。


## やりたかったこと
子でv-btnを記述しボタンを用意。親側でボタンの背景色をピンクに変更したい場合どうするか？

![スクリーンショット 2022-01-23 082222.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225069/23d91207-c481-1e45-9442-2579dc95de87.jpeg)

●親

```parent.vue
<template>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
  <v-app>
    <btn />
  </v-app>
</template>

<script>
import Btn from "~/components/btn.vue";
export default {
  components: {
    Btn,
  },
  
};
</script>
```

●子

```child.vue
<template>
  <v-app>
    <v-btn width="100px" height="40px" class="mt-10 mx-auto blue">
　　　　foo
　　</v-btn>
  </v-app>
</template>
```


## 試行錯誤
最初はこれ

```parent.vue
<template>
  <v-app>
    <btn style="background-color:pink;"/>
  </v-app>
</template>
```
![スクリーンショット 2022-01-23 084354.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225069/70623117-e819-688f-dcd9-cbdbd6288ecb.jpeg)

あれ、、違う。
じゃー、デベロッパーツールでボタンを選択して背景色をブルーに設定しているseleterをコピーしてstyleで変更しよう。
![Inkedスクリーンショット 2022-01-23 084354_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225069/ff210b71-ac5d-5cfb-97fc-32d19182d6ee.jpeg)


```parent.vue
<template>
  <v-app>
    <btn />
  </v-app>
</template>

<script>
import Btn from "~/components/btn.vue";
export default {
  components: {
    Btn,
  },
};
</script>
  
<style lang="scss" scoped>
.v-application .blue{
  background-color: pink;
}
</style>

```

これでもダメか、、、。
あ、!important付けてないからだ。これで解決でしょ！！

```parent.vue
<style lang="scss" scoped>
 .v-application .blue {
  background-color: pink !important;
}
</style>
```
結果何にも変わりません。
頭を悩ませながらググっていたらdeep selectorなるものがあることを発見。

見よう見まねでコードを修正

```parent.vue
<style lang="scss" scoped>
 ::v-deep .v-application .blue {
  background-color: pink !important;
}
</style>

```
![スクリーンショット 2022-01-23 094448.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1225069/2cc178df-aff6-b5ae-7117-5da4e2320156.jpeg)


か、変わりました。
よかった。

## 最後に
scopedをなんとなくで使っていましたが今回の躓きで理解を深められたと思います。
また、deep selectorの書き方は何通りかあるみたいですが個人的には「::v-deep」
が一番いいかなと思いました。
あと、ちゃんと公式ドキュメントを読み込むことの重要性を実感しました。


---

## 参考資料

- [Vue Loader公式][1]
- [Qiita][2]

[1]:https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
[2]:https://qiita.com/h-naito/items/f6ca679276282dce2600
Symbol Bootstrap バージョンアップメモ (1.1.1 → 1.1.3)


下記ページ手順の修正版になります。

https://qiita.com/curupo/items/adbfe1b58119d3ffa401

1.1.1 → 1.1.3 へのバージョンアップ時のメモです。

※自分は、symbol-bootstrap と [うにやさんの https-portal](https://nemlog.nem.social/blog/58808) を組み合わせて運用していたため、以下の手順になっております。symbol-bootstrap のみで運用している方は必要ない手順を含んでおります。今後は公式が用意する symbol-bootstrap 単体で https 対応をするため、そちらの構築手順に沿ったほうが良いと思われます。自分としてはノード構築手順の見直しが必要っすね。。

最新バージョンの確認

GitHUb nemtech / symbol-bootstrap
https://github.com/nemtech/symbol-bootstrap/releases


```
https-portalの停止
$ cd ~/https-portal/
$ docker-compose down

symbol-bootstrapの停止
$ cd ~/symbol-bootstrap/
$ symbol-bootstrap stop

rootユーザーにスイッチ
$ sudo su -

symbol-bootstrapのアンインストール
# symbol-bootstrap -v
# npm uninstall symbol-bootstrap

npmの最新化
# npm -v
# npm install -g npm@latest
# npm -v

symbol-bootstrapのインストール
# npm install -g symbol-bootstrap@1.1.3
# symbol-bootstrap -v
# exit

カスタムプリセットに host と httpsProxies を設定するだけです。
$ view my-preset.yml
---
nodes:
    - friendlyName: My Awesome Node    # なんでもOK
      host: awesomenode.mycompany.net  # HTTPS対応するホスト名
httpsProxies:                          # 今回追記する部分
    - excludeDockerService: false      # 今回追記する部分
---
$ symbol-bootstrap config -p mainnet -a dual -c my-preset.yml --upgrade
$ symbol-bootstrap compose --upgrade
$ symbol-bootstrap run -d
$ symbol-bootstrap healthCheck
$ curl http://localhost:3000/node/server
```

起動中のDockerのプロセスを確認します。

`$ docker ps`

実はこの時点で https機能が起動しています！
よって、以下のhttps-portalを起動させる必要はありません。
影響としては、あきひさんの Symbol Node List の nodeSetting.json が機能しなくなっています。
こちらもできればコアデブのほうで機能を取り込んでほしいですね☆

~~https-portalの起動~~
~~$ docker ps~~
~~$ cd ~/https-portal/~~
~~$ view docker-compose.yml~~
~~$ docker-compose up -d~~
~~$ docker ps~~

もしノード構築でハマったときは？　タヌソンSlackへ
https://tanuson.slack.com/
iptablesでパケットフィルタリングを実装①（概念編）

本日は、IPTablesをやります！！

因みに私は、経験が浅い為、浅い視点で概念を理解しているかもしれませんので、
ご指摘等頂けたら、嬉しいです。
くれぐれも罵詈雑言は、やめてください。　　へこみます....:sob:



というわけで、
IPTablesって何ですか～～！と聞かれたときの為に、自分なりに理解した内容をまとめました。

※①概念編　②実装編　というふうに2部に分けております。

私の理解では大雑把ですが、Linux内部に入力されたデータに対して、目的の処理を実現する役割が
IPTablesです。

そして、その目的というものが、

これから説明する4種類の"TABLE"に紐づいています。
※この後出てくるchainについては、
　難しく考えず目的を果たすために "配置された存在" みたいに理解しておけばよい思います。
　サッカーで言えば、点を取る為にフォワードがいて、守るためにディフェンスがいるみたいな。。。
　サッカーやったことありませんが...

では、それぞれのテーブルの内容を見ていきましょう！！！！！:yum:
分かりやすく図も作りましたので、併せてご覧ください！！


TAbLE（目的）の内容--------------

・Filter
/*
パケットに対して、フィルターをかけ
①許可して通す　②拒否して通さない　③廃棄する
要するにF/Wみたいにセキュリティを掛けようって事です。
関わっているChainは、INPUT、OUTPUT、FORWARD　です。
なぜ関わっているchainはここに配置されているのか？？？？
INPUT:Linux内部のメインの処理に怪しいデータが届かないようにする為。
OUTPUT：メイン処理で生成されたデータが信頼できるか確認する為。
FORWARD：メイン処理を通らないデータに対して、怪しいデータかどうか確認する為。
です。
*/
![Linux _ Iptables - ページ 1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2498823/7cef6f5a-ad03-d92f-faa8-5199c4ee6d16.jpeg)
・Nat
/*
Linux内部を隔離された領域にしたい！！って時に使います。
関わっているChainは、PREROUTING、POSTROUTING、OUTPUT　です。
なぜ関わっているchainはここに配置されているのか？？？？
PREROUTING / POSTROUTING :Linux内部を隔離された領域にする為、入口と出口で変換します。
OUTPUT：これは理解に苦しみますが、
認識としてメイン処理を通る_OUTPUT/通らない_POSTROUTING
で設定を分ければ運用コストがかからないで十分だと思います
*/
![Linux _ Iptables - ページ 1 (1).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2498823/adfeb538-208c-a386-fd62-1be0f0c39f63.jpeg)
・Mangle
/*
パケットに優先順位付けをするぞ～～！！って時に使います。
関わっているchainは、全部です。
なぜ関わっているchainはここに配置されているのか？？？？
考え方次第でバリエーションは豊かになりますので、各々の説明は割愛します。
例として、メイン処理を通る通信のみに優先順位付けしたい場合、INPUT。
Linux内部全体でTCP通信に優先順位付けをしたい場合は、PREROUTING
みたいな感じです
*/
![Linux _ Iptables - ページ 1 (2).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2498823/55b33985-6120-9455-9b52-780aa56ba626.jpeg)
・Raw
/*
！！
って時に使います。
関わっているChainは、PREROUTING、OUTPUT　です。
なぜ関わっているchainはここに配置されているのか？？？？
PREROUTING:***************
OUTPUT：***************
説明できません💦
理解が浅いので次回の実装編に持ち越したいと思います。
*/
![Linux _ Iptables - ページ 1 (3).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2498823/74ecd833-9268-d9ff-3fdf-f6495a0db692.jpeg)


では、IPTABLESの概念の説明は終了です。

つづいて、実装に入ります、と言いたい所ですが、2回に分けて投稿したいと思います。
初記事なので、長時間で疲れてしまったためです:bow:

実装編は、2月頭を予定しております。

宜しくお願いします。
form_withを使ったRails.fireの使い方

## form_withを使ったRails.fireの使い方

JS側からsubmitを行う方法として、Rails.fireを使う方法があります。
Rails.fireを使うとajax通信が可能になります。
form_withの中で、local: falseを指定することによって、html.erbがコンパイルされた結果のhtmlに「data-remote="true"」が記述される様になり、ajax通信が可能になります。

- html.erb側

```
<%= form_with(model: @hoge, url: '', id: 'hoge_form', local: false) do |f| %>
  <%= f.text_field :name, placeholder: 'test' %>
  <%= f.button id: 'hoge_submit' ,type:'button' %>
<% end %>
```

- js側

```
import Rails from "@rails/ujs";

$(document).on ('turbolinks:load', function(){
  $('#hoge_submit').on('click',function(e) {

    Rails.fire($("#hoge_form")[0],'submit');
  }
});
```

- 参考
    - form_withでRails.fireを使う場合
        - https://www.bokukoko.info/entry/2017/12/22/194327
        - https://teratail.com/questions/333494
FactoryBot(Rails)のtraitとは

## 概要
`FactoryBot`を使用する際の`trait`の使い方についてアウトプットしたいと思います。

## traitとは
FactoryBotでテストデータを定義する際に用いるオプションのことです。
`trait`を使用することによってテストファイル内でデータを定義する際により簡潔に記載することができるようになります。

## 使用例
###  前提
Userモデルにて`name`に１０文字以内というバリデーションが定義されていると仮定します。
そのバリデーションについてのテストを行う際のテストデータの定義を行います。
なおテストの記載は割愛します。

_*factories/user.rb*_

```ruby
FactoryBot.define do
  factory :user do
    name { '太郎' }

    trait :over_length_name do
      name {'a' * 11}
    end
  end
end
```
### traitを使用する場合
下記のように記載するだけで`name`が11文字のデータを定義できます。
_*rspec/models/user_spec.rb*_

```ruby
RSpec.describe User, type: :model do
  describe 'バリデーションに関するテスト' do
    let!(:user) { create(:user, :over_length_name) } # rails_helper.rbに設定定義済み
  end
end
```

### traitを使用しない場合
下記のコードは`trait`を使用したときと比べると冗長に感じます。
_*spec/models/user_spec.rb*_

```ruby
RSpec.describe User, type: :model do
  describe 'バリデーションに関するテスト' do
    let(:over_length_name) { 'a' * 11 }
    let!(:user) { create(:user, name: over_length_name) } # rails_helper.rbに設定定義済み
  end
end
```
## まとめ
例のように`trait`を使用することによってよりコードを簡潔に記載することができるようになるので
積極的に使用していこうと思いました。

## 参考文献
[github](https://github.com/thoughtbot/factory_bot/blob/master/GETTING_STARTED.md#defining-traits)
サーバー（実機）まで行くの面倒くさい！Windows10からUbuntuへリモートデスクトップできるようにしたい！



# まずはUbuntuに入ってるパッケージをアップデート


```shell:端末で実行したコマンド
sudo apt update
```

今回は『パッケージはすべて最新です。』と表示されたので何もすることなし！


# XRDPインストール

WindowsからUbuntuへリモートデスクトップするには **XRDP** ってソフトが必要なのでインストール。

```shell:端末で実行したコマンド
sudo apt insatall xrdp
```

下図のようになったら『y』でインストールスタート！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/2a9d38cc-9a93-555b-3e92-6eff2db62c5c.png)


# XRDPの起動と設定

インストールが終わったら、まずXRDPを起動！

```shell:端末で実行したコマンド
systemctl start xrdp
```

ちゃんと起動してるか確認してみるね！

```shell:端末で実行したコマンド
systemctl status xrdp
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/51f1ad10-5c60-6b07-d7cd-d88c89e74c9d.png)


そんでもって、サーバーを再起動した時にXRDPが自動で起動してくれるように設定！

```shell:端末で実行したコマンド
systemctl enable xrdp
```

んで、XRDPのバージョンを確認したい時は下記。

```shell:端末で実行したコマンド
xrdp --version
```

# ファイアウォール設定

うちのUbuntu君にはファイアウォールをGUIで設定できるように、gufwってソフト入れてます。
そんで『IncomingはDeny（外からは何も受け付けないよ！）』にしてあるので、このままだとリモートデスクトップできないです。
そこでリモートデスクトップを許可してあげる設定を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/0e035eb4-89d4-418c-7432-9bde07760790.png)

下図のように設定追加して…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c24dd34c-b608-ba74-f149-0fae2af8ee32.png)

最終的にこうなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/2b0f793f-89b6-923c-4ba7-8386048182f8.png)
本当は『特定のIPアドレスからしか許可しない』って感じの設定の方がいいけど…。
ひとまず、使えるようにすること優先でこんな設定。


# Windows10からUbuntuへリモートデスクトップ

サーバー側の準備ができたので、Windows側からつなぎにいきます。
サーバーのIPアドレスを指定してリモートデスクトップ開始！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/db3f4543-ea91-fd64-a68e-0915cc079753.png)

認証画面入力して、さあリモートデスクトップできるかな…？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/5cf98bf2-2b83-0eb4-dbc6-62ef8b9e35c4.png)

結果は暗黒…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/5a32dd24-d2b2-0ea6-47ac-04d1b97229c1.png)

実は **サーバー（Ubuntu）側はログアウトしておくことが必須** なんです。
それやれば真っ暗にならずにリモートデスクトップできました。

んでもって、リモートデスクトップで操作できるまでに2回くらい認証画面がでてくる…。
でもサーバーまで行って作業することに比べれば大した手間じゃない！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b6a40772-65d1-7a81-35f2-ad4168751077.png)

無事つなげることできました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/4ce73fbf-309a-6122-a3d5-a785d8cc11c0.png)

んでんでんで、 **リモートデスクトップやめる時はログアウトが必須** 。 
そうしないと今度はサーバー（Ubuntu）側でログインができなくなっちゃう…。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/265d45d7-ccc1-d7dd-0bdf-87840dc13a59.png)
間違えてログアウトせずにリモートデスクトップを閉じちゃった時は、再度リモートデスクトップしてログアウトしてあげればOK。
（セッションが残ってるから、改めてリモートデスクトップできる）


# 参考サイトさん

https://note.com/ogs_digilife/n/n7310daa4252b

# バージョン

Ubuntu 20.04.3
XRDP 0.9.12
Windows 10 Pro バージョン21H1 OSビルド19043.1348
2022/1/23主にITとかセキュリティの記事

NTTデータ 2021年度第2四半期 セキュリティグローバル動向調査、バイネーム記載で資料価値大(1/21)
https://s.netsecurity.ne.jp/article/2022/01/21/46989.html

JIPDEC「Pマーク取得企業がランサムウェア被害にあったら必ず報告書提出」(1/21)
https://s.netsecurity.ne.jp/article/2022/01/21/46983.html

Internet Explorer サポート終了目前（2022/6/16）、IPA が注意喚起を再掲(1/21)
https://s.netsecurity.ne.jp/article/2022/01/21/46990.html

北京オリンピック公式アプリに検閲機能…個人情報漏洩の懸念も(1/21)
https://www.businessinsider.jp/post-249582

Apache Log4j の脆弱性による影響の低減を支援する Google Cloud Armor WAF ルール(1/20)
https://cloud.google.com/blog/ja/products/identity-security/cloud-armor-waf-rule-to-help-address-apache-log4j-vulnerability

｢ほとんどの仕事は屈辱的で、搾取的｣…アンチワーク掲示板のユーザーは2020年以降、140万人増(1/20)
https://www.businessinsider.jp/post-249135

メタバース革命が始まる全解明 暗号資産＆NFT(1/21)
https://premium.toyokeizai.net/articles/-/29512

悪質なQRコードや短縮URLを見破る方法(1/20)
https://www.lifehacker.jp/article/how-to-know-if-a-qr-code-or-a-short-url-is-safe/

米インフラ法への期待
新風シリコンバレー　米インタートラストテクノロジーズマネジャー　フィル・キーズ氏(1/21)
https://www.nikkei.com/article/DGXZQOUC113DH0R10C22A1000000/

IPA、2021年第4四半期のセキュリティ相談窓口の対応が前四半期9割増(1/20)
https://news.mynavi.jp/techplus/article/20220120-2252208/

JVN#16690037
php_mailform における複数のクロスサイトスクリプティングの脆弱性(1/20)
https://jvn.jp/jp/JVN16690037/

ByteDanceが戦略投資チームを解散・再編し中国テック業界がパニックに、政府の規制強化への対策か(1/20)
https://jp.techcrunch.com/2022/01/20/2022-01-19-tiktok-bytedance-dissolves-strategic-investment-arm/

Windows 11ミニTips 第38回 OneDriveのアンインストールでエラー発生！ 対処法は？(1/21)
https://news.infoseek.co.jp/article/mynavi_2355365/?tpgnr=it

Microsoft、マルウェアの温床となっていた古い「Excel」マクロ機能をデフォルト無効化
30年前からある「Excel 4.0」（XLM）マクロ(1/21)
https://forest.watch.impress.co.jp/docs/news/1382510.html

通販、宅配装うメールに注意　県内、サイバー犯罪相談が増加(1/21)
https://www.iwate-np.co.jp/article/2022/1/21/108471

2021年に衝撃だったセキュリティニュースは断然、あのアプリの……!?(1/20)
https://ascii.jp/elem/000/004/080/4080425/

PC版『モンスターハンターライズ』初回起動時にセーブできない不具合を修正するパッチ配信(1/21)
https://s.inside-games.jp/article/2022/01/21/136375.html

大津赤十字病院、サイロ状態のシステムのバックアップを一元化(1/21)
https://japan.zdnet.com/article/35182409/

AWS、FreeRTOSの拡張メンテナンスプランを発表、LTS終了後に最大10年間の更新が可能(1/20)
https://codezine.jp/article/detail/15477

電子マネーの残高がマイナスになったトラブルの原因は？(1/21)
https://xtech.nikkei.com/atcl/nxt/column/18/01672/012000013/

インドネシアのイスラム教組織が仮想通貨に対してファトワを発行(1/21)
https://nextmoney.jp/?p=47671

「Firefox 96.0.2」が公開 ～Facebookアプリのサイズ変更でクラッシュする問題などに対処(1/21)
https://forest.watch.impress.co.jp/docs/news/1382435.html

デジタル化が進んでいない業務は「取引先との契約書締結」か――アドビ調査(1/21)
https://enterprisezine.jp/news/detail/15474

Google、サーバーのファームウエア仕様統一図る(1/21)
https://www.nikkei.com/article/DGXZQOUC116KE0R10C22A1000000/
PhpStormにインストールすると個人的に捗ったプラグイン一覧

# はじめに

今回は`PhpStorm`を導入したときに知っておきたかったプラグインを紹介します

https://www.jetbrains.com/ja-jp/phpstorm/

# UI関連

## Japanese Language Pack / 日本語言語パック

UIを日本語に翻訳してくれます

> 日本語言語パックは IntelliJ IDEA、AppCode、CLion、DataGrip、GoLand、PyCharm、PhpStorm、RubyMine、および WebStorm の UI を日本語にローカライズするプラグインです。

https://plugins.jetbrains.com/plugin/13964-japanese-language-pack------

# 作業関連

## Indent Rainbow
インデントが読みやすくなります
![スクリーンショット 2022-01-23 3.45.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555632/9844dcf1-0578-a843-c7e2-5c1ba84ca13b.png)

https://plugins.jetbrains.com/plugin/13308-indent-rainbow

## Rainbow CSV

CSVがカラフルになるので読みやすくなります

https://plugins.jetbrains.com/plugin/12896-rainbow-csv

## deep-assoc-completion

連想配列のキーを自動補完してくれます

https://plugins.jetbrains.com/plugin/9927-deep-assoc-completion

## Laravel Query

Queryを自動補完してくれます

https://plugins.jetbrains.com/plugin/16309-laravel-query

# その他

## Nyan Progress Bar

プログレスバーが猫アイコンになるので幸せな気持ちになります

https://plugins.jetbrains.com/plugin/8575-nyan-progress-bar

## Gitmoji Plus: Commit Button

GitHubのコミットメッセージに絵文字をつけることができます

https://plugins.jetbrains.com/plugin/12383-gitmoji-plus-commit-button

# 最後に

個人的に`PhpStrom`を導入することで作業効率が上がった気がするので、迷っている方はお試しで使ってみてください！
【Vue.js】V-Calendarを使用してVue3で日付・時刻選択のコンポーネントを表示

## 概要
Vue3対応をしているカレンダーのライブラリがないかと探していたら、2022年1月時点ではアルファ版ですが[V-Calendar](https://vcalendar.io/vue-3.html)というライブラリを見つけたので試してみました。V-Calendarについては、[Vue.jsのカレンダーライブラリ「V-Calendar」の使い方](https://www.kabanoki.net/3890/)の記事にある通り、色々な機能が実装されているカレンダーコンポーネントで、けっこう便利なイメージがあります。
今回はV-Calendarを使用して、Vue3で日付・時刻選択ができるコンポーネントを表示してみました。

## 実装方法
[こちら](https://vcalendar.io/datepicker.html)のドキュメントにある「Date & Time」の項に、日付・時刻選択の実装例があります。具体的には`v-date-picker`のタグを使用し、modeを`dateTime`で設定します。

## 実装サンプル
ドキュメントの内容のほぼそのままですが、Vue3で実装サンプルは以下の通りです。

```vue
<template>
  <v-date-picker v-model="state.sampleDateTime" mode="dateTime" />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    const state = reactive({
      sampleDateTime: undefined,
    });
    return {
      state,
    };
  },
});
</script>
```

以下のように表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32098/9dfd7ee2-811b-5f07-c11b-e8b8c0280cde.png" width="300" />
Ajax通信後に要素のイベントが発火しなかった時の備忘録

# はじめに

Ajax通信後に要素のイベントが発火しなかった時の備忘録を残す

# やり方

## 動的に追加した要素やリダイレクト時にクリックイベントが発火しなくなった

```javascript:sample.js

window.addEventListener("load", function () {
    /**
     * @summary 取消ボタン
     */
    $("#skillSheet_template_target").on("click", '#js_jobOffer_delete_button', function () {
        $(this)
            .closest(".scout_job_offer_template_child")
            .fadeOut(function () {
                $(this).remove();
            });

        return false;
    });
});
```

## イベント対象が読み込みされていないので明示的に行う

```javascript
window.addEventListener("load", function () {
    /**
     * @summary 追加要素の削除
     */
    $(function () {
        $(document).on('click', '#js_jobOffer_delete_button', function () {
            $(this)
                .closest(".scout_job_offer_template_child")
                .fadeOut(function () {
                    $(this).remove();
                });

            const jobOfferId = String($(this).attr("data-id"));
            const name = String($(this).attr("data-name"));
            const jobCode = String($(this).attr("data-jobCode"));

            // 積み上げ削除
            someRemoves(selectedIds, jobOfferId);
            someRemoves(selectedNames, name);
            someRemoves(selectedJobCodes, jobCode);

            return false;
        });
    });
});
```

# さいごに
読んでいただきありがとうございます。
いいねしていただけると記事執筆の励みになりますので、参考になったと思った方は是非よろしくお願いします！
【時短テク】AWSサインイン時のMFA認証を素早く済ませる

# はじめに
こんにちは@tetotetoと申します。

本記事は、とあるAWSの研修で「あっこれ便利！」と思った
AWSのMFA認証を素早く済ませる方法を記事にしました。
大したことは書いていませんが、チリツモになる＋日々のストレス軽減になればいいなと

# 必要なもの
#### Google Chrome(Authenticatorという拡張機能を使います)

https://support.google.com/chrome/answer/95346?hl=ja&co=GENIE.Platform%3DDesktop

# MFA認証って？
多要素認証 (MFA) は、サインイン プロセスの保護をさらに強化します。
アカウントまたはアプリにアクセスするときに、ユーザーは追加の本人確認を行います。
たとえば指紋のスキャンや、電話で受け取ったコードの入力です。

https://www.microsoft.com/ja-jp/security/business/identity-access-management/mfa-multi-factor-authentication


AWSだと以下のような感じです

まず通常のサインインをします

![MFA1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585341/f82754ae-37a5-bd44-a7e9-3afbcb5708ec.png)

その後MFA認証をします

![MFA2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585341/748e0a2e-90e5-9a16-d99f-1dc5836bd8c8.png)

# 今までの僕：スマホにアプリを入れて、いちいちスマホでコードを手打ちして認証していました

同じような方いらっしゃるんじゃないでしょうか。これ地味にめんどくさいですよね。。
パソコンでログイン作業をしつつ、スマホを見て、数字を6桁打ち込んで・・・

![MFA3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585341/62490015-5330-7afa-2843-2180d9787bec.png)

#時短テク：Google Chrome　Authenticatorという拡張機能を使用

#### 1. 拡張機能をインストール

以下の記事が参考になると思います
http://www.gifu-nct.ac.jp/infopro/chrome_Microsoft365.pdf


#### 2. QRを登録する

以下の記事が参考になると思います。(下の方)
https://qiita.com/viptakechan/items/6d19aee635b2ab189e47


#### 3. 数字が表示されることを確認

登録がうまくいくとこんな感じで数字が表示されます。
複数アカウント登録可能です。
![MFA4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585341/70f0bf68-fb21-a4df-2ec5-b626caa7a522.png)


##### 何が便利かというと、**左クリックをするだけでコピーが可能**です。

![MFA5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585341/c43a990d-c371-9354-6788-15150ba4ec63.png)

#つまりこういうこと
##### AWSのMFAの画面になる→拡張機能を表示して、コピー→それを貼り付けるとサインイン可能！！
Couldn't find * with 'id'=* [rails エラー error]

# エラー内容
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/324819/724b77b6-6cf3-6a1f-492c-009af6fb4690.png)



開発してるとこんなエラーがでる

「idがindexなんてTweetは見つけられなかったよ」って意味ですね！

# エラーの解説
それはそう、だってDBの中に入っているレコードのidには、「1,2,3...」のような数字で割り振られてるから、その中から検索メソッド（今回はfindメソッド）を使って「index」という文字列でidを調べてもダメだよねって事です。

# エラーの原因
問題はroutesにあります。

```config/routes.rb
Rails.application.routes.draw do
  # 省略

  get 'tweets/:id' => 'tweets#show',as: 'tweet'
  get 'tweets/new' => 'tweets#new'
  post 'tweets' => 'tweets#create'
  patch 'tweets/:id' => 'tweets#update'
  delete 'tweets/:id' => 'tweets#destroy'
  get 'tweets/:id/edit' => 'tweets#edit', as:'edit_tweet'
  get 'tweets/index' => 'tweets#index'
  root 'hello#index'
end
```

大事なのは順番とパラメーターです。
routesは上から順番にHTTPメソッド（GETとかPOSTとか）とURLが一致しているものを探索していきます。
見つかった時点で、定義されたコントローラのアクションに遷移させます。

また、```:id```と書かれているものがパラメーターです。ここに情報が入ります。
例えば、Tweetのshowであれば、どのTweetの詳細を表示すれば良いのかidの情報をパラメーターに渡してあげることで、それぞれのTweetごとの情報が表示されます。
実際のURLが```localhost:3000/tweets/2```となれば、idが2のTweetが表示されるわけです！

ここで、わかりやすいように必要なところだけ抜き出しました。

```config/routes.rb
Rails.application.routes.draw do
  # 省略
  get 'tweets/:id' => 'tweets#show',as: 'tweet'
  # 省略
  get 'tweets/index' => 'tweets#index'
end
```

そして、よく見てほしいのは
``` get 'tweets/:id' => 'tweets#show',as: 'tweet'```と
```get 'tweets/index' => 'tweets#index'```の順番です！

```get 'tweets/:id'```の方が上に来ていますね！
これが原因です。

URLが`tweets/index`で来た時を考えましょう！そうすると`tweets/:id`の`:id`の部分にindexが入っているように見えますよね。routesもそのように勘違いします。そして、そのまま`index`で検索してエラーという事です。


# 解決策
解決方法は2つです。

①順番を逆にしてあげましょう。

```config/routes.rb
Rails.application.routes.draw do
  # 省略
  get 'tweets/index' => 'tweets#index'
  get 'tweets/:id' => 'tweets#show',as: 'tweet'
  # 省略
end
```
そうすれば、URLが`tweets/index`で来た時は先に`get 'tweets/index' => 'tweets#index'`がマッチするので、正しく表示できます。

②resourcesを活用しましょう
煩雑なroutesも一発で定義してくれます。

```config/routes.rb
Rails.application.routes.draw do
  # 省略
  resources :tweets
end
```
この場合は`tweet#index`にアクセスするURLが`localhost:3000/tweets`に変更になってるので、注意です！
routesがわからなくなったら、`rails routes`を使いましょう！

以上、エラーの解説でした！
機械学習初心者へのKaggle Tabular Playground Series の紹介


#自己紹介
初めましてtmrtjと申します。私は現在株式会社音圧爆上げくんという会社に所属しており、プロKagglerとして活動しています。


これから、主にテーブルデータコンペに取り組むに当たって、そこで得た知見などを記事として投稿していく予定です。

また、コンペに直接関係する内容の記事はprivate sharing に当たらないように該当コンペのDiscussion にも同じ内容のものを投稿します。

私は現在プロKagglerとして、業務の一環で、現在Kaggleで行われているコンペの一つである[Tabular Playground Series - Jan2022](https://www.kaggle.com/c/tabular-playground-series-jan-2022) に参加しています。

Tabular Playground Series とはテーブルデータコンペで、去年の1月以降、毎月コンペが開催されています。Tabular Playground Series を初心者の方へ紹介するにあたり、今のKaggle におけるテーブルデータコンペの現状について簡単に説明します。


#Kaggleにおけるテーブルコンペの現状について



最近は、Kaggle 上でのテーブルデータのコンペが減っています。

また、時系列データコンペをより現実的な問題設定にするために、Time-Series API という、推論に使うデータが逐次与えられる仕組みを用いたコンペが増加しています。Time-Series API コンペは、従来のコンペとは違いtest データを触ることができず、Adverasal Validation など、未来のデータを用いた精度向上のテクニックを使うことができないため、より現実のデータサイエンス業務に即した問題設定のコンペになっています。

Time-Series API コンペはこのような利点があるものの、csv やコードを提出するだけで済むコンペに比べるとエンジニアリングの面での難易度が高く、初心者には敷居が高くなっています。

#Tabular Playground Seriesについて
以上のような流れを受けて、最近は初心者が取り組みやすいテーブルコンペが少なくなっています。また、discussion やコンペ終了後に公開される解法などもとてもレベルが高く、全くの初心者だと、そのハードルの高さに面食らってしまうのではないでしょうか？（私もその一人です...）


その点、Tabular Playground Seriesは、予測値の提出はcsv ファイルを提出するだけで済みます。また、与えられるデータも、実際のデータに基づいた人工データが与えられ、厄介な前処理などがあまりなく、あまりデータセットのサイズも大きくありません。そのため、初心者であっても取り組みやすく、手軽にデータ分析を体験できるコンペになっています。


こうした理由からか、Tabular Playground Series では賞金やメダルは獲得できないものの、毎回多くの人が参加しています。


#「Kaggleに興味はあるけど手頃なコンペが...」という方へ
私はまだプログラミングを学び始めてから1年程度の初心者ですが、レベルの高いdiscussion やcode に圧倒されながらも、なんとかKaggle を楽しめています。

機械学習、データサイエンスに興味のある方であれば、とても取り組みやすく、参加するに値するコンペだと思います。

ぜひ参加してみてはいかがでしょうか。

#人材募集
株式会社音圧爆上げくんではプロKagglerを募集しています。
ご興味のある方はぜひ以下のリンクをご覧ください。
[Wantedlyリンク](https://www.wantedly.com/projects/748285)
S3からRDSにデータを変換する方法(RDS Extension)をローカルで確認する方法

#初めに
S3のデータをRDSに変換する方法をローカルで確認する方法を示します。

#RDS Extensionをダウンロード
以下のgitからコードをダウンロード
https://github.com/chimpler/postgres-aws-s3
ダウンロード後解凍

#自宅での確認方法（プロキシサーバを挟まない場合）
解凍したファイルに記載されているdocker-compose.ymlを以下のコマンドを用いて実行する
docker-compose up -d

その後以下の記事の指示に従い動作確認を行う
https://dev.classmethod.jp/articles/rds-postgresql-support-s3-load/

#会社などでの確認方法（プロキシサーバを挟む場合）
今回の方法、自宅などのプロキシサーバを挟まない場合簡単ですが、問題はプロキシサーバを挟む場合です。
確認方法を行うためにプロキシの設定を行います。

まず、Dockerfile内のプロキシ設定

以下の記述を行いプロキシ設定を突破しましょう！！

apt系
　-o Acquire::http::proxy="プロキシIP"
pip系
　--proxy="プロキシIP"

最後にダウンロードフォルダ内にある aws_s3--0.0.1.sqlのプロキシ設定を行えばプロキシサーバ下でも確認できるようになります。

修正箇所は以下の通り
70行目 shutil = ~ のしたに

os = cache_import('os')
os.environ["http-proxy"] = "プロキシIP”
os.environ["https-proxy"] = "プロキシIP”

91行目

s3=boto3.resource(の中に
  user_SSL = False,
  verify = False,

これで確認することが出来ます。
[03] Ansible 検証環境用 Docker コンテナで「docker_image」モジュールを使う


|本シリーズのトップページ|
|:--|
|https://qiita.com/robozushi10/items/1790fdf5ba220b00a2a2|


## 概要

[[01]](https://qiita.com/robozushi10/items/37ebfc92e54f1ded1a92) の手順によって、次の Docker コンテナ環境を構築した.

本記事では下表の Master から Slave に対して、Ansible の「`docker_image`」モジュールを使って
Docker イメージを操作するための設定を記す


**コンテナ構成 (2022/01/22 時点)**

| 用途 | 台数 | OS | 備考 |
|:--|:--|:--|:--|
| Ansible Master | 1台 | Ubuntu 18.04 |■本コンテナに導入する Ansible バージョンは次の通り. <br/>・ansible = `3.4.0-1ppa~bionic` <br/>・ansible-base = `2.10.16-1ppa~bionic` <br/>■Slave に対して、アカウント「foo」であればパスワードなしで ssh 接続可能である.<br/>■必要ないはずだが、一応、アカウントのパスワードは Dockerfile に記している.|
| Ansible Slave | 8台 | Ubuntu 18.04 |■基となる Docker Image は上記 Master と同じである.(横着した)|


## セットアップ手順

### 1. slave01 コンテナにログインする

```bash
$ docker-compose exec -u foo slave01 bash
```

### 2. docker エンジンをインストールする

公式ドキュメントを参照すること.

### 3. /lib/systemd/system/docker.service に対して「--storage-driver=vfs」を追加する

コンテナの場合は /lib/systemd/system/docker.service に対して、
次の「--storage-driver=vfs」設定をしなければ後述のエラーが起きてしまう

```diff
+ExecStart=/usr/bin/dockerd --storage-driver=vfs -H fd://
-ExecStart=/usr/bin/dockerd -H fd://
```

#### 「--storage-driver=vfs」が無ければ生じるエラー

「docker run hello-world」というサンプルコンテナを起動したときのエラーである.
なお、表示の都合で改行している.

```
$ sudo docker run hello-world
docker: Error response from daemon: error creating aufs mount to 
/var/lib/docker/aufs/mnt/9f0e8f8f31837467fb95620cc001a43bb6eb377ac5bc370d9bda2c4e17f0cbce-init: mount target=/var/lib/docker/aufs/mnt/9f0e8f8f31837467fb95620cc001a43bb6eb377ac5bc370d9bda2c4e17f0cbce-init 
data=br:/var/lib/docker/aufs/diff/9f0e8f8f31837467fb95620cc001a43bb6eb377ac5bc370d9bda2c4e17f0cbce-
init=rw:/var/lib/docker/aufs/diff/937737d2d1c47ab012cd1b845be39669b150ac7a6700207b8e5e6b1ffab8e6fe=ro+wh,dio,xino=/dev/shm/aufs.xino: invalid argument.
```

### 4. python の docker 関連パッケージをインストールする

```bash
$ sudo apt install python3-docker -y
$ sudo apt install python3-pip -y
$ pip3 install docker
```

　

## 動作確認

### 1. master コンテナにログインする

```bash
$ docker-compose exec -u foo master bash
```

### 2. master から slave01 に対して、Docker イメージ「hello-world」を pull するよう

```bash
$ ansible -m docker_image slave01 --args "name=hello-world source=pull" 
```

### 3. slave01 上に Docker イメージ「hello-world」が存在していれば OK

```bash
$ ssh slave01 'docker images'
```

　
## 補足

### docker コンテナ「hello-world」を pull したい場合は「docker_container」モジュールを使う

```
$ ansible -m docker_container slave01 --args "name=hello-world image=hello-world"
```

　

以上
Macbook pro M1 Pro Maxを買ったので、Python2から3系にデフォルトを切り替える。

Macbook pro M1 Pro Maxを買ったので、Python2から3系にデフォルトを切り替えたい。

今回は2.7系のデフォルトのPythonから
3系に切り替える作業をしていきます。pyenvを使います。

まだ[Home Brew](https://brew.sh/index_ja)をインストールしていない方は、
こちらのサイトに従ってインストール。

続いて、brewインストールで『pyenv』をインストール。

```shell

% brew install pyenv　

````


最近のosXでは
zshがデフォルトなので、この際zshに慣れていく。
こちらでpyenvの環境パスを通す。

```shell
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc
source ~/.zshrc
````

お次は、3.9系のPythonをインストールしてみる。

```shell
% pyenv install 3.9.9
````

そして、でグローバルのPythonバージョンをセットしてみる。

```shell

% pyenv global 3.9.9
````

これで、Python2系から3系に変わったかな？ということで、

```shell
% python -V
````

でバージョンを確認するも、、、あれ？そのままだ。

ということで、少し調べると

.zprofile　というファイルに

eval "$(pyenv init --path)"

を追加せよとのことだったので、ちょっとダサいけど、
ファイル開いてそのまま上の文字を記入。


```shell

% open ~/.zprofile​ 

````

もちろんechoで入れてもいいです。その場合は、こんな感じ？


```shell

% echo 'eval "$(pyenv init --path)"' >> ~/.zprofile

````

![スクリーンショット 2022-01-23 2.08.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152481/139c7be1-fbbf-ab62-9c71-b08791d3102d.png)

で開いてそのまま上の一行を追加して、ターミナルを再起動したら、
できました。

おっし。
JSでname属性を前方一致で複数取得したい

#前方一致で取得する
「onclick」でJSの関数を呼び出して引数にformを渡す場合、欲しい要素が１つならこの方法でも取れるみたい

```html
<form onsubmit="return false">
    <input type="text" name="AAA_a">
    <input type="submit" onclick="func(this.form)">
</form>
<script>
    function func(form){
        console.log(form[name ^= 'AAA_']);
    }
</script>
```

でも欲しい要素が複数の場合、これではできない。。。
そこでこうする

```html
<form onsubmit="return false">
    <input type="text" name="AAA_a">
    <input type="text" name="AAA_b">
    <input type="text" name="AAA_c">
    <input type="submit" onclick="func(this.form)">
</form>
<script>
    function func(form){
        let elements = form.querySelectorAll('[name^="AAA_"]');
    }
</script>
```
このように、引数に対して「querySelectorAll」を指定して前方一致にすることで配列で取得できるようになる




##formの入力チェックを追加する際、name属性を前方一致で複数取得する必要性があったとする

* class及びidの追加はなしで行う
* このページにはformが複数存在し、入力チェックは送信するform事に行う
* 入力欄は動的に作成される（今回の例では３個と１個で固定）
* チェックする入力欄のname属性は必ず"AAA_"から始まる
* 半角数字のみ受け付けるようなチェック内容を追加する

```html
<body>
    <form onsubmit="return false">
        <input type="text" name="AAA_a">
        <input type="text" name="AAA_b">
        <input type="text" name="AAA_c">
        <input type="submit" onclick="func(this.form)">
    </form>
    <form onsubmit="return false">
        <input type="text" name="AAA_d">
        <input type="submit" onclick="func(this.form)">
    </form>
    

    <script>
        function func(form){
            let elements = form.querySelectorAll('[name^="AAA_"]');
            elements.forEach((element)=>{

                //ここで入力チェックを行う
                let val = element.value.trim();// 入力数

                if(val == '' || val == 0) {
                    err_tex = "数字を入力してください";

                }else if(!val.match(/.*[^0-9０-９].*/)){
                    order_quantity = val.replace(/[０-９]/g,
                        function( match_num ) {
                            return String.fromCharCode( match_num.charCodeAt(0) - 0xFEE0 );
                        }
                    );
                    element.value = order_quantity

                }else{
                    err_tex = "半角数字で入力してください";
                }
            });
            if(err_tex){
                alert(err_tex);
            }else{
              form.submit();
            }
        }
    </script>
</body>
```

とこんな感じで。。。。

でも・・・さ
name属性を配列にしておけばいいのに、思ってしまう、、、まぁ仕方ないですね
kafkaConnectをopenshift上で構築する方法

#初めに
今回この記事を書こうと思ったのは、openshift上でfluentd-kafka-?のようなログ収集基盤を作成したいと思いウェブの記事を探しながら作成したのですが、一切見つかりませんでした。（私の検索力が低いだけかもしれませんが・・・）
なので、今後再度作りたいと思ったときに再現できるようとして備忘録かつこの基盤を作成したくて困っている人に対して少しでも救いになればと思い今回の記事を作成しました。

#作成方法
今回は、fluentd-kafka-s3sinkconnect,postgresのログ収集基盤を作成していきたいと思います。

#kafka cluster作成
openshiftWebコンソールでoperatorからkafkaを選択、設定を変えずに作成

#S3plugin,postgresplugin,fluentdのビルド
それぞれのDockerfileを作成する。

fluentdは以下のURLを見本に作成すると簡単にできると思います。
https://github.com/fluent/fluentd-docker-image

s3は以下のURLを見本に作成すると簡単にできると思います。
https://github.com/confluentinc/kafka-connect-storage-cloud/tree/master/kafka-connect-s3

postgresは以下のURLを見本に作成すると簡単にできると思います。
https://github.com/jcustenborder/kafka-connect-cdc-postgres

s3とpostgresは作成したファイルを/var/kafka/pluginsの配下にコピーして配置するDockerfileを作成します。

作成したファイルのあるフォルダに移動して以下のコマンドを押下します。
https://thinkit.co.jp/article/15696

例：fluetndの場合(fluentdの部分はビルドしたい対象によって変わります。）
oc new-build --name=fluentd --strategy=docker
oc start-build fluentd --from-dir=. --follow

以上でopenshift用のイメージは作成することが出来ます。
デプロイメントで実行したい場合は以下のコマンドで実行できます。

oc new-app fluentd

#kakfaconnectの作成
webconsoleのkafkaconnectを選択名前を設定後yaml記述に画面を変更して spec の下に以下を記述します。
ここが作成時につまづきました。

:::note warn
この記述を行わないとkafkaconnectでメッセージを複数の場所に送りたいときバグが起きます。
:::

config:
 config.storage.topic: postgres-configs
 group.id: postgres
 offset.storage.topic: postgres-offsets
 status.storage.topic: postgres-status
image: >-
 image-registry.openshift-image-registry.svc:~~~~~~~~

:::note info
imageはwebコンソールにあるイメージストリームタグにあるイメージリポジトリーorパブリックイメージリポジトリーを用いてください
:::

#メッセージを保存するkafkatopicの作成
webコンソールでfluentdで指定したtopic名で作成します。

#jsonで設定を行う
作成されたpodに入り、そのpodのIPアドレスに対してcurlで設定値を送る

例：postgresの場合
echo '{
 "name":"sink-connect-jdbc-postgres",
 "config":{
      "group.id": "postgres",
      "connector.class": "hogehoge",
      "connection.url": "hogehoge",
      "connection.password": "hogehoge",
      "db.name": "hogehoge",
      "topics": "hogehoge",
      "task.max": "hogehoge",
      "insert.mode": "insert",
      "max.retries": "1"
       }
}
'|curl -x POST -d @-http://podIP/connectors --header "content-Type:application/json"
[シリーズ] Ansible の実装検証環境として Docker コンテナを活用する


## 概要

Ansible の実装検証環境として Docker コンテナを活用する例である.

コンテナ内で次のことを確認済みである
・systemd の使用が可能なこと
・dockerコンテナを起動できること (DinD ができること)

|コンテンツ|一言|
|:--|:--|
|[[01] Ansible 検証環境として使用できる Docker コンテナを構築する (手順のみ)](https://qiita.com/robozushi10/items/37ebfc92e54f1ded1a92)||
|[[02] Ansible 検証環境として使用できる Docker コンテナを構築する (コード列挙のみ)](https://qiita.com/robozushi10/items/40054c4fef1c52369cde)||
|[[03] Ansible 検証環境用 Docker コンテナで「docker_image」モジュールを使う](https://qiita.com/robozushi10/items/1fc7d34ed44f62257be2)|「docker_container」モジュールも使っている|
Codedeploy の 概要や appspec.yaml

#EC2/オンプレミスへのデプロイ#

##概要##

- CodeDeploy Agentが導入されたEC2またはオンプレミスインスタンスが必要。
- デプロイタイプ：インプレース　/ Blue/Green ※オンプレミスはインプレースのみ。
- デプロイグループに、Auto Scaling グループ　を指定することで、スケールアウト時に最新のリビジョンが自動でデプロイされる。
- ライフサイクルイベントへHookを指定し、スクリプトを実行することが可能。

##リビジョンの構成##

- フォルダ構成
 - appspec.yaml
 - ビルド済みの成果物
 - その他の配布物
 - Hookスクリプト

- リビジョンタイプ
 - S3
 - GitHub

##appspec.yaml(EC2)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure.html

|セクション|説明|
|---|---|
|version|現在は　**0.0** のみ|
|OS|**linux** もしくは　**Windows**|
|files|アプリケーションや設定ファイルをディレクトリへコピー|
|permission|特定のディレクトリとファイルのアクセス許可を設定|
|hooks|インストール前後の処理。アプリケーションの処理。アプリケーションの開始。デプロイ成功の確認。|

```yaml
version: 0.0
os: operating-system-name
files:
  source-destination-files-mappings
permissions:
  permissions-specifications
hooks:
  deployment-lifecycle-event-mappings
```

##hooks(EC2)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure-hooks.html#appspec-hooks-server

- インプレースデプロイとBlue/Green デプロイによりhookを実行可能な箇所が異なる。


#Lambda へのデプロイ#

##概要##

- Lambdaの**関数重み付けエイリアス**を利用したトラフィックのシフト
- **カナリアデプロイ**/**リニアデプロイ**を選択。
- **Validation Hook**でLambda関数を実行してテストすることが可能。

##appspec.yaml(Lambda)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure.html

|セクション|説明|
|---|---|
|version|現在は　**0.0** のみ|
|resources|Lambda関数に関する情報を指定|
|hooks|hook用Lambdaの指定|

```yaml
version: 0.0
resources: 
  lambda-function-specifications
hooks: 
  deployment-lifecycle-event-mappings
```

##hooks(Lambda)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure-hooks.html#reference-appspec-file-structure-hooks-section-structure-lambda-sample-function

- **BeforeAllowTraffic** および **AfterAllowTraffic** のみ。


#ECS へのデプロイ#

##概要##

- Greenタスクをプロビジョニングし、ロードバランサーのトラフィックで切り替える。
- 検証Hookによって各ステージのデプロイメントでテストを実行することが可能。

##appspec.yaml(ECS)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure.html

|セクション|説明|
|---|---|
|version|現在は　**0.0** のみ|
|resources|デプロイする Amazon ECS アプリケーションに関する情報を指定する|
|hooks|hook用Lambdaの指定|

```yaml
version: 0.0
resources: 
  ecs-service-specifications
hooks: 
  deployment-lifecycle-event-mappings
```

##hooks(ECS)##

https://docs.aws.amazon.com/ja_jp/codedeploy/latest/userguide/reference-appspec-file-structure-hooks.html#appspec-hooks-ecs
[01] Ansible 検証環境として使用できる Docker コンテナを構築する (手順のみ)

|本シリーズのトップページ|
|:--|
|https://qiita.com/robozushi10/items/1790fdf5ba220b00a2a2|

## 概要

docker-compose を使って Ansible 検証環境として使用できる Docker コンテナを構築する.
Docker コンテナの中で systemctl の使用が可能になるようにしている.

なお、本記事では環境構築手順のみを記したので、
Dockerfile や docker-compose.yml の中身を知りたい場合は [02](https://qiita.com/robozushi10/items/40054c4fef1c52369cde) を参照してほしい.


## コンテナを作成したホスト

・ubuntu 18.04


## 今回構築する Ansible 検証用のコンテナ環境

### コンテナ構成 (2022/01/22 時点)

| 用途 | 台数 | OS | 備考 |
|:--|:--|:--|:--|
| Ansible Master | 1台 | Ubuntu 18.04 |■本コンテナに導入する Ansible バージョンは次の通り. <br/>・ansible = `3.4.0-1ppa~bionic` <br/>・ansible-base = `2.10.16-1ppa~bionic` <br/>■Slave に対して、アカウント「foo」であればパスワードなしで ssh 接続可能である.<br/>■必要ないはずだが、一応、アカウントのパスワードは Dockerfile に記している.|
| Ansible Slave | 8台 | Ubuntu 18.04 |■基となる Docker Image は上記 Master と同じである.(横着した)|


## 構築手順

### 1. コード群を配置する

```bash
$ git clone https://github.com/robozushi10/qiita-ansible.git
```

### 2. Docker イメージビルドをする

```bash
$ cd qiita-ansible
$ docker-compose build
```

### 3. Docker コンテナ群を起動する

```bash
$ docker-compose up -d
```

### 4. master コンテナに対して、アカウント「foo」でログインする

```bash
$ docker-compose exec -u foo master bash
```

　

## 動作確認

### master コンテナから slave0* に対して ping-pong 応答があること

```bash
## 永続ボリュームに移動する
$ cd /share

## inventory.ini を作成する
$ cat <<'EOL' > inventory.ini
[myservice]
slave[01:08]
EOL

## slave01 に対して ping - pong チェックをする. 次のように SUCCESS となれば OK.
$ ansible -i inventory.ini -m ping slave01 
slave01 | SUCCESS => {
    "ansible_facts": {
        "discovered_interpreter_python": "/usr/bin/python3"
    },
    "changed": false,
    "ping": "pong"
}
```

　

以上
SpringBoot  アプリが、予期せず停止してしまう場合の対処


## About

SpringBootアプリが、ログに、「Application availability state ReadinessState changed from ACCEPTING_TRAFFIC to REFUSING_TRAFFIC」と残してダウンしてしまう時の対処について。

## 事象について
　
私の場合は、[Scoold](https://scoold.com/)というStackOverflow clone アプリを動かしていた際におこりました、SpringBoot version は、2.5.2 です。
起動後しばらくすると、ログに以下が表示されます。

```

2022-01-20 19:47:51,025 [DEBUG] o.s.b.a.ApplicationAvailabilityBean - Application availability state ReadinessState changed from ACCEPTIN
G_TRAFFIC to REFUSING_TRAFFIC
...
2022-01-20 19:47:51,032 [DEBUG] o.s.c.s.DefaultLifecycleProcessor - Bean 'webServerGracefulShutdown' completed its stop procedure

```

ここらへんの情報、
https://www.baeldung.com/spring-liveness-readiness-probes
によると、Spring2.3から、Kubernetes環境下で、グレースフルにアプリを終了する機能が追加されているようです。
ぱっと見、KubernetesのヘルスチェックによりPodが再起動されて、アプリが再起動される時に安全に再起動ができるようにしてくれるようです。

この機能は、上記記事の以下記述から、SpringBootが必要と判断する場合に有効化するようですが、

```
We'll usually let Spring Boot decide when to stand up these probes for us. But, if we want to, we can enable them manually in our application.properties.

```

私の実行環境（Sakura VPS）、または、アプリの構成？ では不必要に有効化されてしまっているようです。


## 解決策

BootによりKubernetes用の設定がKubernetes環境以外で設定される場合があるようなので、以下の設定を追加し、マニュアルで機能を停止することで、アプリのシャットダウンが解消されました。

```
management.health.probes.enabled=false
```
NucleoF103でNeoPixel制御

# はじめに
前回の投稿から6年ほど経過した。
https://qiita.com/gkmaro634/items/7b2ce4f72615c96f41d3

その間STM32の開発環境も様変わりしているようで、時代に追いつくために今風の開発環境で何か試そうと思い立った。
前回の記事で取り上げたCubeMXがIDEとして取り込まれたCubeIDEというものがSTMicroからリリースされていたようで、今回こちらを使うこととする。インストール方法はネット上にたくさん情報があり、それらを参考にした。

単なるLチカでは物足りないので色々物色していたところテープLEDなるものが目に止まり、こちらの制御にトライすることにした。一筋縄では行かなかったのでその経緯を記事に残すこととした。

# 今回使用したもの
- NucleoF103: https://www.switch-science.com/catalog/1618/
- NeoPixel: https://www.switch-science.com/catalog/5209/
- Grove用ジャンパケーブル: https://www.switch-science.com/catalog/1048/

# NeoPixelの制御
NeoPixelは素のSPIやI2Cでは制御できない独特な制御仕様となっている。
SPIを使ってNeoPixelへのHigh/Lowの制御信号を複数bitで表現する方法が紹介されており、今回はSPIでの制御を採用した。
https://www.newinnovations.nl/post/controlling-ws2812-and-ws2812b-using-only-stm32-spi/
https://blog.handen.net/archives/19087339.html

PWMを使って制御する方法もあるようだが、まだ試せていない。
https://qiita.com/kanehara/items/0e7776c225f83a6b4152

# ピンアサイン、クロックの設定
今回用いるNeoPixelは電源(5V)、GND, 信号線をマイコンと接続すれば良い。
信号線はPB15(SPI2_MOSI)に接続することとした。

NeoPixelへのHigh/Lowの信号は1.25usの期間でのDuty比で決定される。
データシートに記載のしきい値に対して実際は多少のマージンを持っているようである。
https://qiita.com/mml/items/770bcf8b0f82a6ec9ad1

ひとまずSPI2へのクロックは8MHzとなるようCubeIDEで設定することとした。
NeoPixelへの制御は
 5 / 8MHz = 0.625us
 3 / 8MHz = 0.375us
であるので
 High: 0b11111000
 Low:　0b11100000
とHigh/Lowの制御信号を8bitで表現すればよさそうである。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96262/d5a00751-b164-0644-8975-f74213287881.png)

# プログラムの例

メイン関数から呼び出すメソッドを抜粋して記載する。


```c:main.c
#define NEOPIXEL_0		0b11000000
#define NEOPIXEL_1		0b11111100
#define NEOPIXEL_RESET	0b00000000
#define NEOPIXEL_COUNT	30
#define NEOPIXEL_SIGNAL_CLOCK_COUNT	8

typedef struct {
	uint8_t r;
	uint8_t g;
	uint8_t b;
} RGB;

RGB g_neoPixels[NEOPIXEL_COUNT];

void UpdateNeoPixelBuffer(uint32_t pixelIndex, RGB newValue){
	if (pixelIndex >= NEOPIXEL_COUNT){
		return;
	}

	g_neoPixels[pixelIndex].r = newValue.r;
	g_neoPixels[pixelIndex].g = newValue.g;
	g_neoPixels[pixelIndex].b = newValue.b;
}

void TurnOffNeoPixelBuffer(uint32_t pixelIndex){
	if (pixelIndex >= NEOPIXEL_COUNT){
		return;
	}

	g_neoPixels[pixelIndex].r = 0;
	g_neoPixels[pixelIndex].g = 0;
	g_neoPixels[pixelIndex].b = 0;
}

void ResetNeoPixel(){
	uint8_t txValue = NEOPIXEL_RESET;
	uint32_t i = 0;

	// SPI Clock: 8MHz
	// Send Low >50us
	// 8 * 50 / 1e-6 = 400
	for (i = 0; i < 512; i++){
		HAL_SPI_Transmit(&hspi2, &txValue, 1, 100);
	}
}

void UpdateNeoPixel(){
	uint32_t i, j = 0;
	uint8_t txValue;

	ResetNeoPixel();

	for (i=0; i < NEOPIXEL_COUNT; i++){
		for (j=0; j<NEOPIXEL_SIGNAL_CLOCK_COUNT; j++){
			txValue = g_neoPixels[i].g & 0x80 >> j ? NEOPIXEL_1 : NEOPIXEL_0;
			HAL_SPI_Transmit(&hspi2, &txValue, 1, 100);
		}

		for (j=0; j<NEOPIXEL_SIGNAL_CLOCK_COUNT; j++){
			txValue = g_neoPixels[i].r & 0x80 >> j ? NEOPIXEL_1 : NEOPIXEL_0;
			HAL_SPI_Transmit(&hspi2, &txValue, 1, 100);
		}

		for (j=0; j<NEOPIXEL_SIGNAL_CLOCK_COUNT; j++){
			txValue = g_neoPixels[i].b & 0x80 >> j ? NEOPIXEL_1 : NEOPIXEL_0;
			HAL_SPI_Transmit(&hspi2, &txValue, 1, 100);
		}
	}
}
```