OmniAICreator/Qiita-1.07M huggingface dataset:
Reactで再帰コンポーネントとDnDを使った階層型ToDoリストを作ってみた

# React×Vite×Tailwindで作る階層型ToDoリストを公開しました

## 🔗 実際のアプリURL

* [アプリを開く](https://khosokawa0716.github.io/todo-react/)
* [GitHubリポジトリ](https://github.com/khosokawa0716/todo-react)

## ⚡️ 作ったものの概要

階層構造に対応したToDoリストアプリです。

* 親タスク → 子タスク → 子の子タスク の階層表示
* ドラッグアンドドロップで順番入れ替え
* 完了チェックボックスの切り替え
* データのローカル保存と引き続き
* JSONエクスポート / インポート対応

## ⛏️ 作った理由

* 階層構造のメモ、タスク管理ができるものがほしかった
* Reactでの再帰コンポーネントやDnDを実践したかった
* 仕事以外で好きなものを作ってみたかった

## 使用技術

* React + TypeScript + Vite
* Tailwind CSS
* @dnd-kit/core（DnD実装）
* lucide-react（アイコン）
* gh-pages（GitHub Pages公開）

## 🛠 工夫した点

* 再帰表示で階層構造を満たせるロジック
* バックエンドを使わずに、フロントエンドだけで保存する機能
* localStorageで自動保存するロジック
* JSONダウンロード/アップロード

## 🚀 今後のアイデア

* タスクに期限を指定
* ステータスの自由設定
* タグ分類やフィルター機能

## おわりに

ここまで読んでくださってありがとうございます！

今回の開発では、ChatGPTの助けを借りながら進めました。やりたいことを指示するだけで、ソースコードの提案や丁寧な解説が得られ、ストレスの少ない開発体験ができました。

とはいえ、実際に動かして調整したり、表示や動作を確認して理解していく中で、自分自身の学びや気づきもたくさんありました。

もし「作りたいけど難しそう…」と感じている方がいれば、こういったAIの力を借りてでも、まず一歩踏み出すのは本当におすすめです！

良いなと思ったらGitHubで星をつけたり
フィードバックを頂けたら嬉しいです！
npmの基本からMaven・コンテナ化まで：パッケージ管理を理解する

## **1. npmとは？**
npm（Node Package Manager）は、JavaScriptのパッケージ管理ツールであり、Node.jsの標準パッケージマネージャーとして提供されています。  
主に以下の用途で利用されます：
- JavaScript/TypeScriptのライブラリ管理
- フロントエンドとバックエンドの依存関係管理
- ビルド・テストスクリプトの実行
- オープンソースパッケージの公開と共有

## **2. npmの主な機能**
### 📌 **パッケージのインストール**
npmを使うことで、オープンソースのパッケージ（ライブラリやツール）を簡単にインストールできます。  
```sh
npm install lodash
```
上記のコマンドを実行すると、`lodash` という便利なユーティリティライブラリがプロジェクトに追加されます。

package.jsonファイルは下記のコマンドを実行することでカレントディレクトリに生成されます。
```sh
npm init -y
```

---

### 📌 **依存関係の管理**
npmは、`package.json` ファイルを使ってプロジェクトの依存関係を管理します。  
例えば、以下のように `package.json` に記載すると：
```json
{
  "dependencies": {
    "vue": "^3.0.0",
    "axios": "^1.4.0"
  }
}
```
`npm install` を実行すれば、必要なライブラリが自動的にインストールされます。

---

### 📌 **パッケージの公開**
npmを使って**独自のライブラリやツール**を公開することも可能です。  
```sh
npm login   # npmアカウントにログイン
npm publish # パッケージを公開
```
これにより、自作のパッケージをnpm公式レジストリ（[npmjs.com](https://www.npmjs.com/)）で共有できるようになります。

---

### 📌 **スクリプト実行**
`npm run` コマンドを使って、ビルド・テスト・デプロイを簡単に実行できます。  
例えば、`package.json` に以下の設定があれば：
```json
{
  "scripts": {
    "start": "node app.js",
    "test": "jest"
  }
}
```
実行コマンド：
```sh
npm run start  # Node.jsアプリを起動
npm run test   # テストを実行
```
これにより、**複雑なコマンドを短縮して実行**できるようになります。

## **3. よく使うnpmコマンド一覧**
| コマンド | 説明 |
|----------|--------------------------------------|
| `npm init` | `package.json` を作成 |
| `npm install <package>` | 指定パッケージをインストール |
| `npm uninstall <package>` | パッケージを削除 |
| `npm update` | 依存関係の更新 |
| `npm list` | インストール済みパッケージ一覧の表示 |
| `npm run <script>` | `package.json` に定義されたスクリプトを実行 |
| `npm publish` | 自作のパッケージをnpmに公開 |

## **4. npmとMaven、コンテナの関係**
npmとMavenはどちらも**パッケージ管理ツール**ですが、対象が異なります。
- **npm** → JavaScriptのパッケージ管理（フロントエンド・Node.js向け）
- **Maven** → Javaの依存管理とビルド（バックエンド向け）

### **開発環境の違い**
Mavenは `.jar` や `.war` を生成するビルドツールであり、フロントエンドの管理には向いていません。一方で、Vue.jsのようなモダンなフロントエンド技術を使う場合、npmの導入が必要になります。

#### **Dockerを使った統合例**
Vue.jsを導入すると、以下のような形で**フロントエンドとバックエンドのコンテナ化**が可能です。
```sh
# フロントエンド（Vue）のDockerfile
FROM node:18
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "serve"]
```

```sh
# バックエンド（Spring Boot）のDockerfile
FROM openjdk:17
WORKDIR /app
COPY target/app.jar .
CMD ["java", "-jar", "app.jar"]
```
このように、**フロントエンドはnpm、バックエンドはMavenで管理**する構成が考えられます。

## **5. Vue.js導入時の拡張**
Vue.jsを導入すると、以下のような拡張が必要になります：
1. **コンポーネント設計** → UIの再利用性向上
2. **API通信（REST APIの利用）** → フロントとバックの分離
3. **状態管理の導入** → VuexやPiniaでデータ管理
4. **ビルド・最適化** → ViteやWebpackの利用

## **6. まとめ**
- npmはNode.jsの標準パッケージマネージャー
- `package.json` を使って依存関係を管理
- `npm install` や `npm run` でライブラリの追加・スクリプト実行が可能
- 自作パッケージの公開や共有も可能
- フロントエンドをVue.jsで開発する際に必須となる
- Mavenはバックエンド向け、npmはフロントエンド向け

npmの活用で開発環境がより効率的になります。Vue.jsの導入を検討している場合は、npmを使ったパッケージ管理をうまく活用すると便利です！

---
kintoneのプログラムとかアプリを販売するサイト　作りました。



サイトを公開したあとはそもそも検索に引っかからないので早く登録されないかなーってワクワクして待ってます

最近プログラムを触り始めたのだけどプログラムの楽しさに気づいてしまいみんなにシェアできたらなと思い作成してみました

素人が作ったコードなので金額も安く安く・・・

もしよろしければ...！




https://kintone-tree.stores.jp/
ABC407回答メモ

# 0.はじめに
　調子が上がらないと言うか、最近はコンテスト以外では
　競プロの練習とかしてないので、実力上がらないのは当然か・・・。
　と、おもいつつ参戦。
　A~Cはなんとか正解するも、D以降はお手上げ。
　レートは703のまま変わらずでした。


# 1. A - Approximation
　なんとなくややこしい問題。
　整数以外を扱うのは緊張します。

　とはいえ、A÷Bの答え（小数点あり）が、
　A÷Bの少数第一位を切り捨てたものと
　それに1を加えたもののどちらに近いかという話なので
　そのまま実装しACでした。

　https://atcoder.jp/contests/abc407/submissions/66086437


# 2.B - P(X or Y)
　こちらも少数蟻の問題。
　まぁ単純に、１～6の2重ループを作り、条件に合うケースをカウントし
　最後に36で割って出力でACでした。

　https://atcoder.jp/contests/abc407/submissions/66092677


# 3.C - Security 2
　昔のアーケードゲームのハイスコアのアルファベット3桁名前入力っぽいなと思いつつ。
　【考え方】
　　まずAはSの文字数分入力
　　その後右の桁から見ていき
　　桁ごとに何回押せば最終的にSの文字と同じになるかを加算していく。
　　例）　407の場合
　　　Aは3回
　　　3桁目の7はAを7回
　　　2桁目の0は3桁目でAを7回押すので、7回押したら0になる数＝3回
　　　1桁目の4は2、3桁目でAを10回押すので、10mod10回押したら4になる数＝4回
　　　3+7+3+4＝17回
　考え方に基づき実装してACとなりました。

　https://atcoder.jp/contests/abc407/submissions/66110956

以上
【Go】プリンターへの転送の追跡

https://qiita.com/mniyk/items/c61d4a752c6a8fe91997

# GitHub
https://github.com/mniyk/endpoint-security-and-monitoring-tools/tree/main/module/printer

# Screenshot
![Printer Transfer Monitoring.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498946/631df13c-9572-40d9-b6c5-7387243cd411.gif)

# Technology Stack
- Go Lang
Copilot Version cannot be activated. Copilot services are still being provisioned for this organization. 


+ [Agentforce Innovator: Update a Flow, Agent Action, and Topic - Error Msg](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000PXCXc)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/a9fa8b9d-be61-43f1-94fc-e2fc4b02018e.png)

:::note
今朝、ログインし直した際に、エージェント（[設定] > [Agent Studio] > [エージェント]）が無効になっていることに気付きました。

[Agentforce] を再度有効にすると、Coral Cloud Experience Agent が利用可能になりました。ビルダーを開くと、昨日行ったトピック設定とこのトピックのアクションの変更がすべて反映されていました。[有効化] ボタンをクリックしてもエラーメッセージは表示されませんでした。

この問題を解決するには、エージェント機能を無効化してから再度有効化することをお勧めします。
[(設定] > [Agent Studio] > [エージェント]) Agentforce の有効化]

This morning when logging back in, I found that Agents (Setup > Agent Studio > Agents) had been disabled.

  After re-enabling it (Agentforce), the Coral Cloud Experience Agent became available.  Opening the Builder, all of the Topic Configuration and This Topic's Actions changes I made to it yesterday existed.  No error message appeared upon clicking the Activate button.   
 
My suggestion to resolve this issue is to Disable and then Re-Enable the Agents feature.
  [(Setup > Agent Studio > Agents) Enabling Agentforce] 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/04cff298-f24f-409b-986d-875c5c4f2e95.png)
:::

+ [Internal Server Error - GatewaySystemsError](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000PZZf50AH)  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/985edaf1-9b29-411c-8322-5d8e88c13ba5.png)

+ [Copilot Version cannot be activated. Copilot services are still being provisioned for this organization. Error](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000TinRI)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/68ecd608-85ff-498a-8a23-de32a2065dff.png)

:::note
I solved the issue by Disabling and re enabling the  Agent Force agent enable toggle button


エージェントフォースのエージェント有効化トグルボタンを無効にしてから再度有効にすることで問題を解決しました。
:::

+ [i have done hands on challenge but org not finding my user and "Challenge not yet complete in Cunning Fox Playground Our trailbots are having a problem accessing your hands-on org. Please try again and if this issue persists refer to this article to fix "](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SX7jZ)
Agentforce : エージェントのアクセス権


+ [Default Agent is not able to access managed AgentForce actions in the subscriber org](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SWYgS)

:::note
You may find the following help article useful, it provides detailed guidance on assigning the appropriate permissions to Agentforce agents. 

https://help.salesforce.com/s/articleView?id=ai.agent_user.htm&type=5
:::

+ [Agentforce Developer Org で「Einstein Agent User」プロファイルを使用して作成したユーザーの「Agentforce Service Agent User」権限セットと「Service Agent Permissions」権限セットが欠落していることがわかりました](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000SWMKM)
+ 

# エージェントのアクセス権

デフォルトでは、エージェント ユーザーに付与される権限は限られています。セキュリティの観点からは、これは最小権限の原則に準拠しているため、素晴らしいことです。ただし、これは、AI エージェントを設定するときに、エージェントが作業を行うために必要なすべての権限を明示的に付与する必要があることも意味します。そうしないと、エージェントは適切に機能しません。したがって、エージェントを計画するときは、これらのガイドラインに留意してください。

### オブジェクトの権限
エージェントに、フロー、Apex、またはプロンプトテンプレートを通じてエージェントが操作するすべてのオブジェクトに対する作成、読み取り、更新、および削除 (CRUD) 権限を付与します。

### 権限セット
エージェント ユーザーに必要な権限セットを割り当てます。これらはユースケースによって異なりますが、次のような例があります。

+ Agentforce Service Agent Object Access
+ Agentforce Service Agent User
+ Data Cloud User
+ Platform—Flow User
+ Prompt Template User
+ Service—Knowledge Access

### エージェントライセンス
CRUD アクセス用の新しい権限セットを作成する場合は、それを Einstein Agent ライセンスに関連付けます。

### ロール
エージェント ユーザーに、CEO ロールなどの標準オブジェクトを表示および変更できるロールを割り当てます。

+ Apex:エージェントが Apex クラスを使用する場合、エージェントが使用する Apex クラスのセキュリティをエージェント ユーザーのプロファイルに拡張します。
+ フロー:エージェントを動かすためにフローを使用する場合は、必ずエージェント ユーザーとしてフローを実行してデバッグし、見落としている可能性のある権限の問題がないか確認してください。

Salesforce でエージェントの権限を設定する場合、最初はうまくいかない可能性が高いため、エージェントのプロトタイプを作成するときに、サンドボックスでセキュリティ制御をテストしてください。
Kling AI を使って 写真から犬のぬいぐるみが歩く動画を生成してみた

はじめに
---
　すでにご存じの方も多いのかも知れませんが、Kling AI なるすごい動画生成AIサービスがあると某テレビ番組で知り、試してみました。以前に  [NotebookLMを使って業務を効率的にしよう！](https://qiita.com/tech-nami/items/df2b41c4a51c66c120e2) をご紹介して以来の、想像を超える驚きがありましたため、あえてご紹介させてください。

Kling AI とは
---
　Kling（クリング） AIは、中国の大手テクノロジー企業である快手科技（Kuaishou Technology）が開発した、革新的なAI動画生成サービスです。テキストや画像を入力するだけで、高品質でリアルな動画を生成できることが大きな特徴です。

ユーザー登録
---
　先に書いておきますと、クレジットカードの入力などはありません（ちょっと安心）。
まず、検索サイトで「Kling AI」として検索するなどして、
https://app.klingai.com/global/
のサイトを表示し、「Sign In」をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822494/0f6243ef-65aa-4b7c-a7cf-4cee0fa707cc.png" width=80%>

Googleアカウント、Appleアカウントを持っている場合はそちらで、持っていない場合は「Sign in with email」emailをクリックします。（ファイルサイズ上限の関係で割愛^^;）

新規ユーザ登録の場合は「Sign up for free」をクリックしてください。
基本的に入力するのはメールアドレスと、パスワード程度で、入力完了後に、
メール「KlingAI Account Verification」が届きますので、そこにあるコードを入力します。
ロボット確認のための、ちょっとわかりにくい画面がありますが、
「>>>」ボタン(?)を押しながら右にスライドさせて、パズルを正しい位置にはめることで認証完了です。

Kling AI を使ってみよう！
---
　主に、テキスト（プロンプト）から動画を生成と、画像から動画を生成の２つの方法があるようですが、やはりすごいのは、自分の持っている画像から動画を生成する方法と思います。
　下記の様な画面が表示されますので、赤枠の部分に、自分の持っている画像をドラッグ＆ドロップします。（以下では我が家のマスコットである豆柴くんを使っています）
　プロンプトの指示では、「犬が部屋の中を歩いている動画を作成してください」と入力して「Generate」ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822494/d79e6c6a-2358-4095-bee9-d4600f4dca7e.png" width=80%>

　生成に１分程度かかる、とのメッセージが表示されていますが、テレビで放送された直後というのもあってか、生成完了までに１時間程度かかりました。（気長に待ちましょう）
　参考までに、自分が新規登録した際には、166クレジットが付与されており、5秒の動画作成には、20クレジットかかる様ですので、いくつかの動画を無料で作成できるという感じかと思います。
　そしていよいよ完成しました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822494/20be6da2-bcdb-4755-937d-bc2f5c38040c.png" width=80%>

　動画をお見せしたいところですが、コマ的にはこんな感じになりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822494/3c610f88-7b1f-424c-a10d-9e0bab36dc14.png" width=80%>

　豆柴が動き出した瞬間、家族みんなで感動しました。生成AI恐るべしです。

まとめ
---
　今回は、Kling AI を使って写真からの動画生成を行ってみました。本当に、ここまで来ると感動してしまいます。つくづく時代は変わったと思わざるをえませんが、Kling AIでは、動画だけでなく、静止画やサウンド生成などもできるようですので、また試して見たいと思います。皆さんもぜひ使ってみてください！
コーディング初心者がpaizaラーニングでどこまでスキルを獲得することができるのか.day1

# Day1
こんにちは。完全コーディング初心者ではありますが、今日からプログラミングで学んだことを日々発信していこうと思います。私は現在大学の団体でpaizaラーニングという教材を恵んでもらっているのでそこで勉強中です。
環境構築は慣れてきたら発信します（今はあんまよく分かってないです）
言語はC#でいこうと思います。ゆくゆくはUnityでゲームも作れたらなと考えています。
https://paiza.jp/works
↑これ環境構築なしでできるので重宝しています。


#### 配列のキソ
複数のデータを一括で管理するときに使用するものです。高校生の頃pythonを触っていたので変数、配列ぐらいは知っていました。ここでは文法メインで解説していきます。
```
string[] 配列名 = {"要素1","要素2","要素....n"};
```
とりあえずこれで配列の定義は完了です。具体例は
```
string[] fruits = {"apple", "orange", "grape"};
```
みたいな感じです。

#### 配列のindex
次に、配列のインデックスについて解説します。
配列のインデックスとは、一言でざっくり言えば配列の要素の出席番号です。
1つ注意点なのは最初の数字から0からスタートすることです。先程の具体例を用いると、
appleには0が割り当てられ、orangeには1が割り当てられるということです。この仕様には私も何度かなれるまで苦しめられましたね...初年度共通テスト情報でもこれは出題されてました。話が少し脱線しましたが、じゃあ１つのデータを取り出したいときには
```
fruits[0] // []の中に任意の番号を入れましょう

//コンソールで出力したいときには以下のように書く
Console.WriteLine(fruits[0]);
```
このようにしましょう。ちなみにインデックスの欄に定義されていない番号をぶち込むとエラーをはかれてしまうので注意しましょう。この例でいうとfruits[3]とかです。"grape"のインデックスは2でしたね。

#### ループ処理＆配列の扱い
ループ処理と配列を扱うとき、配列の長さを自動で取得してくれるとうれしいですよね。
その方法を書いていきます。
配列の長さの取得方法は
```
fruits.Length
```
です。これは数値型で帰ってきます。
これでfor文書いたら終わりですね！！ってなるんですけどもう少し便利な構文があります。
それがforeach構文です。
##### foreach文
```
string[] animal = {"bird", "lion", monkey"};

foreach (string job in animal){
    Console.WriteLine(job);
}
```
もしかして最初にコード書く方が見やすい？とか今ふと思いました。これはanimal配列の中の要素を最初から順にjobという変数(string型)に代入してループ処理してくれる関数です。めっちゃ便利。可読性が高いのもよい。

なるべく毎日何かしら学んだことをアウトプットしていきます。間違えてる部分もあると思いますが、もしよければ指摘していただけると助かります。
macOS SequoiaのRosetta 2でAVX2が動くらしい件

え？MacのRosetta2でAVX2が動くようになった？

前回は動かなかったんですけど、なんかソフトウェアも進化するんですね。
Intelの特許の問題じゃないかって考察もあったようですけどね。

https://qiita.com/STDNUL/items/e1521852a8c7f9044827

# 1. 正式にはサポートしていない

出足からズッコケる話をすると、結論から先に言うと正式にはサポートはしていない。どういうことかというと各種ソフトウェアからRosettaがどのようにみえているかを確認してみたい

## 表向きのRosettaのサポート命令にはAVX*は無い

### MacCPUID
Intelが以前公開していたIntel CPU搭載MacのCPUの機能を表示するソフト。
新規販売されているIntel CPU搭載機は無くなってしまったのでIntelのサイトからは削除されているが、手元のMacには保存されていたので確認してみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136367/16f5d93e-c0c2-492d-8fc2-12d983e8b6c6.png)

AVX関連が完全に未サポートとなっているのがわかる。

### sysctl

続いてMac標準のAPIで機能フラグを確認する。
 **arch -x86_64 sysctl hw.optional** を実行してみたところの出力結果（抜粋）。

```
hw.optional.mmx: 1
hw.optional.sse: 1
hw.optional.sse2: 1
hw.optional.sse3: 1
hw.optional.supplementalsse3: 1
hw.optional.sse4_1: 1
hw.optional.sse4_2: 1
hw.optional.x86_64: 1
hw.optional.aes: 1
hw.optional.avx1_0: 0
hw.optional.rdrand: 0
hw.optional.f16c: 0
hw.optional.enfstrg: 0
hw.optional.fma: 0
hw.optional.avx2_0: 0
hw.optional.bmi1: 0
hw.optional.bmi2: 0
hw.optional.rtm: 0
hw.optional.hle: 0
hw.optional.adx: 0
hw.optional.mpx: 0
hw.optional.sgx: 0
hw.optional.avx512f: 0
hw.optional.avx512cd: 0
hw.optional.avx512dq: 0
hw.optional.avx512bw: 0
hw.optional.avx512vl: 0
hw.optional.avx512ifma: 0
hw.optional.avx512vbmi: 0
```

# 2. サポートはされていないが動く

「だめじゃん！動かないじゃん！！」って思った人は一旦足を止めて欲しい。

どうやら正式対応をうたってはいないが、CPUIDを確認せずにAVX/AVX2を決めうちで実行するようなフローになっているプログラムでも動くようになっている、とのことである。

## SFMT19937で動作検証
SIMD命令のサポートで性能が伸びるプログラムを動かしてみるのが手っ取り早いので、とりあえず動かしてみよう。
得手・不得手はあるからIntel　CPUと比べてパフォーマンスがどうかの議論は今回はしない。

### ARM64 NEON+SHA3

まずARMネイティブである。

```
32 bit BLOCK:49ms for 100000000 randoms generation
32 bit SEQUE:51ms for 100000000 randoms generation
64 bit BLOCK:49ms for 50000000 randoms generation
64 bit SEQUE:38ms for 50000000 randoms generation
```

### x86-64/SSE2
Rosetta2が公式にサポートしているのはSSE4.2+AES+PCLMULDQまでなので当然サポート範囲内である。
ネイティブとそれほど遜色ないレベルのパフォーマンスが出ているので、RosettaのAOTコンパイル技術はそれなりに優秀と言えるのではないだろうか。

```
32 bit BLOCK:52ms for 100000000 randoms generation
32 bit SEQUE:77ms for 100000000 randoms generation
64 bit BLOCK:54ms for 50000000 randoms generation
64 bit SEQUE:65ms for 50000000 randoms generation
```

### x86-64/AVX2

肝心のAVX2。動くには動くが、なんとSSE2より3倍ほど遅い。

```
32 bit BLOCK:183ms for 100000000 randoms generation
32 bit SEQUE:207ms for 100000000 randoms generation
64 bit BLOCK:187ms for 50000000 randoms generation
64 bit SEQUE:193ms for 50000000 randoms generation
``` 

### x86-64/AVX-512

試しにAVX-512版も実行してみたがこちらは動作せず。

```
zsh: illegal hardware instruction  ./test-avx512-M19937 -s
```

# 3. 現状の方針
CPUIDを確認しない行儀の悪いプログラムでもとりあえず落ちないようにするためにという方針なんでしょうか。AVX2のコードは動かなくはないが、置き換えた方がいいくらいには遅いので、すでにそうやっている人は、サポートフラグを見てSSE*のコードバスを実行する方針で問題はなさそう。
マイクラ統合版アドオンを制作するときの環境構築備忘録

# 注意事項
自分のための備忘録的に書いたため、わかりにくい点、間違った点がある可能性もあるので、実際に試す際は外のサイトとクロスチェックしてもらうとよいと思います。
# 環境構築の手順
### 1. `Win`+`R`で検索＆実行ボックスを開いて以下を実行
```
%LocalAppData%\Packages\Microsoft.MinecraftUWP_8wekyb3d8bbwe\LocalState\games\com.mojang
```
### 2. NPMをつかって以下をインストール
#### @minecraft/server
##### [ここ](https://www.npmjs.com/package/@minecraft/server?activeTab=versions)で最新バージョン（○○-beta.○○stable）の名前を探す
例) 2.0.0-beta.1.21.80-stable
##### インストール
```
npm install @minecraft/server@さっき見つけた名前
```
例）npm install @minecraft/server@2.0.0-beta.1.21.80-stable
#### @minecraft/server-ui
##### [ここ](https://www.npmjs.com/package/@minecraft/server-ui?activeTab=versions)で最新バージョン（○○-beta.○○stable）の名前を探す
以下同様
Mojolicious::複数人でのビデオ通話

# はじめに
「[WebRTCを利用した複数人でのビデオ通話サンプル(Mesh)](https://qiita.com/nakka_/items/2d1fd3a941f7c0c1108f)」をMojolicious::Liteに移植しました。

# 環境
TLSサポートにはIO::Socket::SSLが要求されます。
IO::Socket::SSLはNet::SSLeayに依存しています。
Net::SSLeayのインストールには

- DebianとUbuntuでは、libssl-devとzlib1g-dev
- Red Hat Enterprise LinuxとFedoraでは、openssl-develとzlib-devel

が必要になります。

# インストール
```
webrtc_mesh_server.pl
public
  + mesh.html
  + webrtc_mesh.js
```

Ubuntu
```
sudo apt install libssl-dev
sudo apt install zlib1g-dev
```

CentOS（[CentOS6.4上でMojolicious+WebSocket+SSL環境構築](https://qiita.com/nkns165/items/6605c0bc192f2f94eb45)）
```
sudo yum install openssl-devel
sudo yum install zlib-devel
```

IO::Socket::SSLとMojoliciousをインストールします。
```
cpanm IO::Socket::SSL
cpanm Mojolicious
```

開発サーバーを起動します。
```
morbo -l https://*:8443 webrtc_mesh_server.pl
```

# サーバー
webrtc_mesh_server.jsの移植は[リアルタイムチャット (Mojolicious::Lite)](https://mojolicious.perlzemi.com/blog/20100403127089.html)を参考にしました。
サーバーから3分ごと、クライアントから30秒ごと接続確認をしていましたが、3時間に延命してますのでお兄さん許して。

```perl:webrtc_mesh_server.pl
use strict;
use warnings;

use Mojo::JSON 'encode_json';
use Mojolicious::Lite;

# 接続リスト
my @connections = ();

# WebSocket処理
websocket '/' => sub {
  my $self = shift;

  $self->inactivity_timeout(10800);

  my $log = $self->log;

  # Receive message
  $self->on('json' => sub {
    my ($self, $json) = @_;
    if ($json->{join}) {
      $log->info($self->{tx}->remote_address
          . ': join room='
          . $json->{join}{room} . ', id='
          . $json->{join}{id});

      # 同一IDが存在するときは古い方を削除
      @connections = grep {
        !($_->{room} eq $json->{join}{room} && $_->{id} eq $json->{join}{id})
      } @connections;

      # 接続情報を保存
      push(@connections,
        {room => $json->{join}{room}, id => $json->{join}{id}, ws => $self});
      foreach my $data (@connections) {
        if ( $data->{room} eq $json->{join}{room}
          && $data->{id} ne $json->{join}{id})
        {
          # 新規参加者を通知
          $data->{ws}->send(encode_json({join => $json->{join}{id}}));
        }
      }
      return;
    }

    # Peerを検索
    foreach my $data (@connections) {
      if ( $data->{room} eq $json->{room}
        && $data->{id} eq $json->{dest})
      {
        # メッセージの転送
        $data->{ws}->send(encode_json($json));
        last;
      }
    }
  });
  
  # Finish
  $self->on('finish' => sub {
    @connections = grep {
      if ($_->{ws} != $self) { 1; }
      else {
        $log->info($self->{tx}->remote_address
            . ': part room='
            . $_->{room} . ', id='
            . $_->{id});
        foreach my $roomData (@connections) {
          if ( $_->{room} eq $roomData->{room}
            && $_->{id} ne $roomData->{id})
          {
            # 退出を通知
            $roomData->{ws}->send(encode_json({part => 1, src => $_->{id}}));
          }
        }
      }
    } @connections;
  });
};

app->start;
```
# クライアント
mesh.htmlとwebrtc_mesh.jsは省略します。
（pc._remoteVideoはstartPeerConnectionだけで参照され、pcのプロパティに追加する必要はないので、ローカル変数として宣言してもよいのでは？と思います）
改)8x8左回り90度、回転(電光表示板用)(ビット操作


いろいろ注意
----

- arduinoでの予定は、未定


プログラム
----


オンラインコンパイラpaiza

```c++


#include <iostream>
using namespace std;

#define b_put(aa) for(int ii=8;ii!=0;ii--){if(aa & 0x80){printf("#");}else{printf(" ");}aa=aa<<1;}
#define bit8_put(bb) for(int jj=0;jj<8;jj++){b_put(bb[jj]);printf("\n");}



void font270(unsigned char *font){

    int a = font[0];

    int a0 = (a & 1); a = a >> 1;  
    int a1 = (a & 1); a = a >> 1;
    int a2 = (a & 1); a = a >> 1;
    int a3 = (a & 1); a = a >> 1;

    int a4 = (a & 1); a = a >> 1;
    int a5 = (a & 1); a = a >> 1;
    int a6 = (a & 1); a = a >> 1;
    int a7 = (a & 1);

    
    for(int i=1;i<8;i++){

        //処理
        //        12345678

        a7 = a7 << 1;
        a6 = a6 << 1;
        a5 = a5 << 1;
        a4 = a4 << 1;

        a3 = a3 << 1;
        a2 = a2 << 1;
        a1 = a1 << 1;
        a0 = a0 << 1;

        a = font[i];

        a0 = a0|(a & 1); a = a >> 1;  
        a1 = a1|(a & 1); a = a >> 1;
        a2 = a2|(a & 1); a = a >> 1;
        a3 = a3|(a & 1); a = a >> 1;

        a4 = a4|(a & 1); a = a >> 1;
        a5 = a5|(a & 1); a = a >> 1;
        a6 = a6|(a & 1); a = a >> 1;
        a7 = a7|(a & 1);

    }//for i

    font[0] = a0;
    font[1] = a1;
    font[2] = a2;
    font[3] = a3;

    font[4] = a4;
    font[5] = a5;
    font[6] = a6;
    font[7] = a7;

}//font270


int main(void){
    // Your code here!

    unsigned char font[] = {
        0b00100000, //  #     
        0b01111100, // #####  
        0b00100000, //  #     
        0b01111100, // #####  
        0b10101010, //# # # # 
        0b10110010, //# ##  # 
        0b01100100, // ##  #  
        0b00000000  //
    };     
    
    
    //bit8_put(font);printf("\n");
    
    font270(font);
    
    bit8_put(font);
    
}


```


```


        
    ##  
 # #  # 
 # ##   
 # # #  
####### 
 # #  # 
    ##  

```
wordpressの技術メモ

# Wordpressの公開ページが表示されるまでの流れ
※ChatGPTでの自動生成を利用し、加筆、修正しています。

WordPressの公開ページが表示されるまでのプログラム的な流れは、以下のステップで進行します。

---

## 🧭 WordPressのリクエストライフサイクル

### 1. **リクエストの受信とルーティング**

* ユーザーがブラウザでURLを入力すると、Webサーバー（ApacheやNginx）がそのリクエストを受け取ります。

* `.htaccess`ファイルのリライトルールにより、リクエストは `index.php` に転送されます。

### 2. **`index.php` の実行**

* `index.php` は、`wp-blog-header.php` を読み込みます。([Medium][1])

* `wp-blog-header.php` は、WordPressの環境をセットアップするために `wp-load.php` を読み込みます。([Medium][1])

### 3. **`wp-load.php` の処理**

* `wp-load.php` は、`wp-config.php` を読み込みます。

* `wp-config.php` では、データベース接続情報やサイトの基本設定が定義されています。

* `wp-config.php` の最後で、`wp-settings.php` が読み込まれます。([Jhimross Olinares][2])

### 4. **`wp-settings.php` による初期化**

* WordPressのコアファイルやプラグイン、テーマの `functions.php` が読み込まれます。

* アクションフックやフィルターフックが登録され、プラグインやテーマが機能を追加できるようになります。

### 5. **メインクエリの生成**

* `wp()` 関数が呼び出され、リクエストされたURLに基づいてクエリ変数が解析されます。

* `WP_Query` クラスが使用され、データベースから適切な投稿やページが取得されます。

### 6. **テンプレートの決定と読み込み**

* `template-loader.php` が呼び出され、リクエストに対応するテンプレートファイル（例：`single.php`、`page.php`）が決定されます。([Medium][1])

* 決定されたテンプレートファイルが読み込まれ、HTMLが生成されます。

### 7. **レスポンスの送信**

* 生成されたHTMLがブラウザに送信され、ユーザーにページが表示されます。

---

この一連の流れにより、WordPressはユーザーのリクエストに応じたページを動的に生成し、表示します。各ステップでアクションフックやフィルターフックが提供されており、開発者はこれらを利用して機能を拡張できます。

詳細なフックの順序や各ステップでの処理内容については、以下の公式ドキュメントを参照してください：

* [The WordPress request lifecycle](https://learn.wordpress.org/tutorial/the-wordpress-request-lifecycle/)

* [WordPress under the hood: the request lifecycle](https://dev.to/sarahcssiqueira/the-wordpress-request-lifecycle-45ie)

---

[1]: https://medium.com/%40dendeffe/wordpress-loading-sequence-a-guided-tour-e077c7dbd119?utm_source=chatgpt.com "WordPress loading sequence: A guided tour | by Stijn De Lathouwer"
[2]: https://jhimross.com/a-guide-to-the-wordpress-request-lifecycle/?utm_source=chatgpt.com "A Guide to the WordPress Request Lifecycle - Jhimross Olinares"

```mermaid
flowchart TD
  A[URLアクセス] --> B[Webサーバー]
  B --> C[.htaccessルール]
  C --> D[index.php起動]
  D --> E[wp-blog-header.php]
  E --> F[wp-load.php]
  F --> G[wp-config.php]
  G --> H[wp-settings.php]
  H --> I[functions.php等]
  I --> J[WP_Query実行]
  J --> K[template-loader]
  K --> L[テンプレート実行]
  L --> M[HTML生成]
  M --> N[ブラウザへ送信]
  N --> O[ページ表示]
```
paiza.ioでnadesiko その26

# 概要
paiza.ioでnadesikoやってみた。
atcoder、見つけたのでやってみた。
練習問題やってみた。

# 練習問題
ABC 081 A - Placing Marbles
文字列内の、'1' の個数をカウントする。

# 投入するソース

```
111
```

# 期待値

```
3
```

# サンプルコード

```

尋ねる
それを、「1」で、区切る
それの、要素数から、1を、引いて、表示する




```


# 成果物

https://paiza.io/projects/wdG-qMtmEOS1Lfw_kQVTlQ?language=nadesiko

以上。
paiza.ioでnadesiko その25

# 概要
paiza.ioでnadesikoやってみた。
atcoder、見つけたのでやってみた。
練習問題やってみた。

# 参考にしたページ

https://qiita.com/j5c8k6m8/items/a9140f7446885d65879e

# 練習問題
ABC 086 A - Product
二つの整数a,bの積の偶奇を判定する。


# 投入するソース

```
5 7
```

# 期待値

```
Odd
```

# サンプルコード

```

空を、尋ねる
それを、指示に、代入。
物は、指示を「 」で区切る
//物を、表示する
aは、物[0]を整数変換
bは、物[1]を整数変換
cは、 a * b % 2
もし、cが0と、等しいならば
　「Even」を、表示する
違えば
　「Odd」を、表示する
ここまで



```

# 成果物

https://paiza.io/projects/ytxPUz-aEFNjlB3_0DU02A?language=nadesiko

以上。
paiza.ioでnadesiko その24

# 概要
paiza.ioでnadesikoやってみた。
atcoder、見つけたのでやってみた。
練習問題やってみた。

# 参考にしたページ

https://qiita.com/mikecat_mixc/items/c5913562d2a2d7556002

# 練習問題
Welcome to AtCoder では、以下の形式で整数 および文字列 が入力として与えられる。
a
b c
s
この入力をもとに、与えられた整数の和  および文字列  を、以下の形式で出力することが求められる。
sum s

# 投入するソース

```
1
2 3
hello
```

# 期待値

```
6 hello
```
# サンプルコード

```
空を、尋ねて、整数変換
合計は、それ

空を、尋ねる
それを、「 」で区切って、反復
    対象を、整数変換
    合計を、それだけ、増やす
ここまで

空を、尋ねる
「{合計} {それ}」を、表示する



```

# 成果物

https://paiza.io/projects/YzI0Ko4M4ZGsWv0q1KGHNA

以上。
競プロ#25/05/24

# 競技プログラミングの鉄則
[A17 - Dungeon 2](https://atcoder.jp/contests/tessoku-book/tasks/tessoku_book_q)
- 95％は実装できたがdpのfor文のところで間違えてiを2からスタートしていたせいで1ケースだけWAでていた。
- GPT先生にコードレビューして貰って気づいた。
- DPに限らないけどスタート値とかのミスには気を付ける癖を付けないとまずい

```
int main() {
    long long N;
    cin >> N;
    long long dp[1000001];
    dp[0] = 0;
    dp[1] = 0;
    stack<long long> ans;
    vector<long long> A(N + 1);
    for (long long i = 2; i <= N; i++) {
        cin >> A[i];
    }
    vector<long long> B(N + 1);
    for (long long i = 3; i <= N; i++) {
        cin >> B[i];
    }
    ans.push(1); // 1は絶対に通るから
    dp[2] = A[2];

    for (long long i = 3; i <= N; i++) {
        dp[i] = min(dp[i - 1] + A[i], dp[i - 2] + B[i]);
    }

    stack<int> path;
    while(N > 1) {
        if (dp[N] == dp[N - 1] + A[N]) {
            path.push(N);
            N--;
        } else {
            path.push(N);
            N -= 2;
        }
    }
    path.push(1);
    cout << path.size() << endl;
    while (!path.empty()) {
        cout << path.top();
        path.pop();
        if (!path.empty()) {
            cout << " ";
        }
    }
    cout << endl;
}
```
[A27 - Calculate GCD](https://atcoder.jp/contests/tessoku-book/tasks/math_and_algorithm_o)
- アルゴ式の「整数論的アルゴリズム」で実装したGCD()関数を使って一撃






# 余談だん
鉄則本の数学問題のところでアルゴ式でやった内容を関数化したものを使って秒殺できてしまっているのだが。
それは本当に良いのだろうかという疑問。まあ、本質的には車輪の再発明をすることよりも競プロでレートを上げることだから関数化したものを活用できるのであればそれでいいんだけど。とはいえアルゴリズム力にこだわり続けるなら再発明を復習的な感覚で何度もやるのもありだなと
ABC407バーチャル参加

## はじめに

体調不良のため、翌日早朝、ABC407にバーチャル参加しました。
バーチャル参加ということで、レート変動や順位は出ません。

## 今回のまとめ

- 今回(ABC407)はバーチャル参加した
- バーチャル参加のためレートの変動はなし
- バーチャル順位も時間経過と共に変化するので記載不可
- 今回もまたA問題、B問題を解いた
- C問題以降は相変わらず理解不能

## A - Approximation

[A - Approximation](https://atcoder.jp/contests/abc407/tasks/abc407_a)

150点問題ということで身構えましたが、ここまで慎重になる必要はなかったようです。
整数で割れる場合はそのまま結果を返し、そうでない場合はC++のround関数を利用しました。

整数で計算する手段もありますが、思いつきませんでした。

```cpp:A.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  int a, b;
  cin >> a >> b;
  if (a % b == 0) {
    cout << (int)(a / b) << endl;
    return 0;
  }
  double r = (double)a / (double)b;
  int ans = round(r);
  cout << ans << endl;
  return 0;
}
```

## B - P(X or Y)

[B - P(X or Y)](https://atcoder.jp/contests/abc407/tasks/abc407_b)

250点問題ということで身構えましたが(以下同文)。
合計36パターンしかないため、愚直に算出し、最後に36で割っています。
`cout << fixed << setprecision(30)`としたらWAになったので、`fixed`を外したらACになりました。
これが50点ポイントなのかもしれません。

```cpp:B.cpp
#include <bits/stdc++.h>
using namespace std;

int main() {
  int x, y;
  cin >> x >> y;
  int count = 0;
  for (int i = 1; i <= 6; i++) {
    for (int j = 1; j <= 6; j++) {
      if (i + j >= x || abs(i - j) >= y) {
        count++;
      }
    }
  }
  cout << setprecision(30);
  cout << (long double)count / 36.0 << endl;
  return 0;
}
```

## そしてC問題以降は

解けていません。というか、問題解説共に難しくて解けませんでした。
※バーチャル参加では参加中に解説が読めます。

[アルゴ式](https://algo-method.com/)で勉強中なのですが、問題数が多いことから、1週間で出来る量はそれほどでもないので……。

## 今後の方針

- アルゴ式の『数理素養』を引き続き進める
- アルゴ数学本や鉄則本の問題が難しいので、まずは予習として一通り読む
- 今回は体調不良で休んだが、コンテストには積極的に参加していきたいところ
Dockerで環境構築した時に、リアルタイムでコードが反映されない件について

Spring bootをDockerで環境構築した時に、リアルタイムでコードが反映されなく困りました。


**./mvnw spring-boot:run**を実行すると、コメントアウトされているはずの部分のコードが反映され、アプリケーションがエラーで起動しなくなりました。

調べると、**Maven**や**Gradle**などのビルドツールを使用している場合、古いコンパイル結果が残っている可能性があるとのことでした。


今回の場合は、**maven**なので以下のコマンドを実行します。

```
./mvnw clean
```

再度、Spring Bootを起動するとエラーがなくなり、無事起動することに成功しました。

これだけでも、問題なさそうに思ったのですが、Dockerイメージを再ビルドしたほうが良いとのことだったので！
↓

```
docker-compose build --no-cache
```

最後まで、読んでいただきありがとうございました。
ブロック崩しゲーム開発記【環境構築】

## ① Unity Hub をインストール
公式: https://unity.com/download

## ② Unityエディタをインストール（推奨バージョン例：2022.3 LTS）
「Visual Studio for Mac」もインストールオプションでチェック✅

## ③ プロジェクト作成
新規プロジェクト > 2D > C# スクリプトを使用可能

これで、C#の編集・実行・デバッグがすぐにできます。
【公ド読】設計パターンを実装するためのリファクタリング

【公式ドキュメントを読もうシリーズ】設計パターンを実装するためのリファクタリング

## シリーズ概要

[https://qiita.com/yasu_programming/items/cec66f9e8d5d571e9ce3](https://qiita.com/yasu_programming/items/cec66f9e8d5d571e9ce3)

## URL

[https://docs.github.com/ja/copilot/copilot-chat-cookbook/refactoring-code/refactoring-to-implement-a-design-pattern](https://docs.github.com/ja/copilot/copilot-chat-cookbook/refactoring-code/refactoring-to-implement-a-design-pattern)

## 説明

設計パターンのリファクタリングをしてくれる。

## 所感

正直設計周りに関してはかなり使用している。

単一箇所の修正をしていると、全体のアーキテクチャとして適切ではないコードになってくることがあり、それを全体のワークスペースを俯瞰した結果よりよいコードを提案してくれるので、設計周りではこれからも使っていくと思っている。
【Rails初学者】Seed Fuを使ってマスタデータを管理してみた

## RailsでSeed Fuを使ってマスタデータを管理する方法
## はじめに

初学者の私が、マスタデータを扱う必要があるアプリケーションを作る中で、初期データの登録や更新をどう管理すべきか悩んでいました。

Qiitaで「Seed Fu」というgemを見つけ、初めて使ってみたところ非常に便利だったので、学習記録も兼ねて記事にまとめます。

マスタデータは頻繁に更新されない反面、環境構築時に確実に登録されていてほしいデータです。
この記事では、初めてSeed Fuを使ってRailsアプリにデータを安全に・自動で登録するやり方を行ったので記事を残していきます。

## なぜSeed Fuを使うのか？

- `rails db:seed` に統合できるらしい
- `seed_once` を使えば、既存レコードを上書きせず安全に初期データを登録できるらしい
- データを `db/fixtures` に分けて管理でき、見通しが良く保守しやすいらしい
- 初学者にもシンプルな記法で扱いやすい

## 環境
- Ruby 3.x
- Rails 8.0.2
- Seed Fu 2.3.x


## 1. Seed Fuの導入

`Gemfile` に以下を追記します：

```ruby
gem 'seed-fu'
```
インストールする
```
bundle install
```

## 2. マスタデータ用の`fixture`ファイル作成
まず`db/fixtures`フォルダを作成（なければ）
```bash
mkdir db/fixtures
```
次に、情報を定義するファイルを作成
db/fixtures/departments.rb
```ruby
Department.seed_once(:id) do |s|
  s.id = 1
  s.name = 'サッカー'
end

Department.seed_once(:id) do |s|
  s.id = 2
  s.name = '野球'
end

Department.seed_once(:id) do |s|
  s.id = 3
  s.name = 'バスケットボール'
end

Department.seed_once(:id) do |s|
  s.id = 4
  s.name = 'バレーボール'
end

Department.seed_once(:id) do |s|
  s.id = 5
  s.name = 'テニス'
end

Department.seed_once(:id) do |s|
  s.id = 6
  s.name = '卓球'
end

Department.seed_once(:id) do |s|
  s.id = 7
  s.name = 'ラグビー'
end

Department.seed_once(:id) do |s|
  s.id = 8
  s.name = '柔道'
end

Department.seed_once(:id) do |s|
  s.id = 9
  s.name = '水泳'
end

Department.seed_once(:id) do |s|
  s.id = 10
  s.name = '陸上競技'
end

Department.seed_once(:id) do |s|
  s.id = 11
  s.name = 'スキー'
end

Department.seed_once(:id) do |s|
  s.id = 12
  s.name = 'スケート'
end

Department.seed_once(:id) do |s|
  s.id = 13
  s.name = 'ゴルフ'
end
```

## 3. db/seeds.rb に追記
```ruby
# db/seeds.rb
SeedFu.seed
```

## 4.データ登録の実行
```ruby
rails db:seed
```
出力例
```ruby
== Seed from db/fixtures/departments.rb
 - Department {id: 1, name: "サッカー"}
 - Department {id: 2, name: "野球"}
 - Department {id: 3, name: "バスケットボール"}
 - Department {id: 4, name: "バレーボール"}
 - Department {id: 5, name: "テニス"}
 - Department {id: 6, name: "卓球"}
 - Department {id: 7, name: "ラグビー"}
 - Department {id: 8, name: "柔道"}
 - Department {id: 9, name: "水泳"}
 - Department {id: 10, name: "陸上競技"}
 - Department {id: 11, name: "スキー"}
 - Department {id: 12, name: "スケート"}
 - Department {id: 13, name: "ゴルフ"}
```

## 5.DBを確認
```
rails c
Department.all.pluck(:id, :name)
```

## 学び
`Seed Fu`を使うことで、初期データの一元管理・環境構築時の自動化・既存レコードの上書き防止が簡単に実現できるそうです。

- `seed_once`を使えば「一度だけ登録」で安全に運用できることを知りました
- `db/fixtures`フォルダでデータを管理すれば、見通しがよく、チーム開発でも扱いやすいと知りました
- `rails db:seed`に統合できるので、他の開発者とも同じ手順で初期データが扱えると知りました

今回は「スポーツ種目マスタ」の登録で試しましたが、例えば「大会カテゴリ」「トレーニングメニュー一覧」など、他のスポーツ関連のマスタデータにもこの仕組みを展開していくことができそうです。
私のような、マスタデータの扱いに困っているRails初学者にとって勉強になるものでした。
特に「一度だけ登録（seed_once）」「データの見通し管理」「rails db:seed に統合できる」点が、大きな学びになりました。
今後も活用しながら、データ設計や運用の理解を深めていきたいと思います。

-----------
初学者のため、間違えていたらすいません。
BigQueryのウィンドウ関数徹底活用！便利関数をまとめてみた

LAGやLEADばかり活用していましたが、それ以外にも便利な関数がたくさんあることに気づき、まとめてみました。

---

## LAG / LEAD

**使いどころ：**  
- 直前・直後の値を取りたいとき  
- 時系列データの前後比較

```sql
SELECT
  user_id,
  event_date,
  value,
  LAG(value, 1) OVER(PARTITION BY user_id ORDER BY event_date) AS prev_value,
  LEAD(value, 1) OVER(PARTITION BY user_id ORDER BY event_date) AS next_value
FROM
  my_table
```

---

## FIRST_VALUE / LAST_VALUE

**使いどころ：**  
- セッション開始時の値を知りたい  
- 最新の値を取得したい

```sql
SELECT
  user_id,
  event_date,
  value,
  FIRST_VALUE(value) OVER(PARTITION BY user_id ORDER BY event_date) AS first_val,
  LAST_VALUE(value) OVER(PARTITION BY user_id ORDER BY event_date ROWS BETWEEN UNBOUNDED PRECEDING AND UNBOUNDED FOLLOWING) AS last_val
FROM
  my_table
```

---

## NTH_VALUE

**使いどころ：**  
- 例えば「3番目の訪問日の金額が知りたい」ときに便利！

```sql
SELECT
  user_id,
  event_date,
  NTH_VALUE(value, 3) OVER(PARTITION BY user_id ORDER BY event_date ROWS BETWEEN UNBOUNDED PRECEDING AND UNBOUNDED FOLLOWING) AS third_val
FROM
  my_table
```

---

## ROW_NUMBER / RANK / DENSE_RANK

**使いどころ：**  
- 順位付けや、最新データの抽出などに大活躍！

```sql
SELECT
  user_id,
  value,
  ROW_NUMBER() OVER(PARTITION BY user_id ORDER BY event_date DESC) AS row_num,
  RANK() OVER(PARTITION BY user_id ORDER BY value DESC) AS rank_val,
  DENSE_RANK() OVER(PARTITION BY user_id ORDER BY value DESC) AS dense_rank_val
FROM
  my_table
```

---

## PERCENT_RANK / CUME_DIST

**使いどころ：**  
- スコアの相対位置を知るのに便利。0〜1の範囲で順位感がわかる！

```sql
SELECT
  user_id,
  value,
  PERCENT_RANK() OVER(PARTITION BY user_id ORDER BY value) AS percent_rank_val,
  CUME_DIST() OVER(PARTITION BY user_id ORDER BY value) AS cume_dist_val
FROM
  my_table
```

---

## NTILE

**使いどころ：**  
- 分位点（例：4等分でグループ分け）をサクッと計算！

```sql
SELECT
  user_id,
  value,
  NTILE(4) OVER(PARTITION BY user_id ORDER BY value) AS quartile
FROM
  my_table
```

---

## ARRAY_AGG OVER

**使いどころ：**  
- ウィンドウ内の値を配列でまとめられる！

```sql
SELECT
  user_id,
  event_date,
  ARRAY_AGG(value) OVER(PARTITION BY user_id ORDER BY event_date) AS value_array
FROM
  my_table
```

---

## SUM / AVG / MIN / MAX OVER

**使いどころ：**  
- 移動平均や累積和をサクッと出せる

```sql
SELECT
  user_id,
  event_date,
  value,
  SUM(value) OVER(PARTITION BY user_id ORDER BY event_date) AS cumulative_sum,
  AVG(value) OVER(PARTITION BY user_id ORDER BY event_date ROWS BETWEEN 2 PRECEDING AND CURRENT ROW) AS moving_avg
FROM
  my_table
```

---

## まとめ

これらを使いこなすことで、SQLの表現力が一気に広がると思います。
JavaScriptの「タグ付きテンプレートリテラル」を初めて知った話

# タグ付きテンプレート
タグ付きテンプレートリテラルはテンプレートリテラルの拡張機能です。タグ付きテンプレートリテラルを学ぶ前に、まずはテンプレートリテラルについて見てみましょう。
### テンプレートリテラル
テンプレートリテラルはES6に導入された文字列操作の機能です。JavaScript内でテンプレートリテラルを記述するには、バッククォート(`)を使います。
これを使うことで、複数行文字列、埋め込み式、文字列の操作など簡単に行えるようになります。
テンプレトリテラルの使いかた：
```javascript
    const user = "アダム";
    const message1 = "ようこそ、" + user + "様"; //　これは普通の書き方です
    const message2 = `ようこそ、${user}様`; //　これはテンプレトリテラルを使った例文です
    const message3 = `今日がいい天気ですね。
                    本を読むにはぴったりです。
                    `;//　複数行文字列を使ったテンプレトリテラル
    console.log(message1);
    console.log(message2);
    console.log(message3);
```
テンプレートリテラルは普段から使ってるんですが、今日は「タグ付きテンプレートリテラル」というものを初めて知りました。
## タグ付きテンプレートリテラル
タグ付きテンプレートリテラルはテンプレートリテラルの拡張機能です。タグを使うことで、テンプレートリテラルを関数で処理することができます。タグ関数の第一引数は文字列の配列で、それ以外の引数全ては式の値です。これらの引数に対して任意の処理を行い、加工した文字列を返すことができます。
例文をみましょう：
```javascript
    function person(strArr, username, today){
        let result = strArr[0] + username + strArr[1] + today;
        return result;
    }
    const username = `ジョーン`;
    const today = `土曜日`;
    console.log(person`ようこそ、${username}様。今日は${today}です。`);
```
上の例文を理解しましょう。```「ようこそ」、「様」、「今日」、「です。」```は第一引数の配列として渡され、変数```username、today```は式の値として扱われます。
簡単に説明すると、```person```関数の引数は次のように解釈されます：
```javascript
    strArr -> ["ようこそ", "様", "今日", "です。"];
    username -> ${username}
    today -> ${today}
```
引数は何枚いるのかわからない場合は、こやって使えます：
```javascript
    function person(strArr, ...values){//　values -> [username, today]
        const result = values.reduce((accumulator, value, index) => {
        	return accumulator + value + strArr[index + 1];//strArr 配列は、常に values 配列より 一つ多く要素を持ちます。
        }, strArr[0]);
        return result;
    }
```
最後まで読んでいただきありがとうございます。ご質問やご指摘があれば、ぜひコメントで教えてください！
逆に何が使えるのかわからないレベルに機能が削がれた超コンパクトJavaScriptエンジン「elk」

今回はMikanOSのフォークOSであるTNTOSに何としてでもJavaScriptを組み込みたかった哀れな人が発見した超低レベルなJavaScriptエンジンelkについて紹介します。
## そもそもJavaScriptエンジンとは
JavaScriptエンジンとはJavaScriptを実行するプログラムで、
例えば[JavaScriptCore](https://developer.apple.com/documentation/javascriptcore)、[SpiderMonkey](https://spidermonkey.dev/)、[QuickJS](https://bellard.org/quickjs/)などがあります。
特徴としては、ECMAScriptで定められたメソッドしかなく、`document`などの所謂WebAPI等が無い、純粋にJavaScriptを解釈・実行するプログラムです。

WebAPIなどは、そのJavaScriptエンジンとやりとりをしてJavaScript環境内に`document`等を設置してもらいます。
## elkとは

https://github.com/cesanta/elk

組み込み用の超小さいJavaScriptエンジンです。
発電に例えると、V8は原子力発電所、JavaScriptCoreは水力発電所、QuickJSはガソリン発電機、elkは手回し発電機です。

特徴としては以下があります。
- どこでも動く
- 依存関係ゼロ
- `elk.c`と`elk.h`をコピペするだけで導入完了
- APIがシンプル
- 使うメモリはこっちが用意したバッファ内のみ
- JITコンパイラなど無い

組み込み開発者に優しすぎる...
## サンプルコード
まずソースディレクトリに`elk.c`と`elk.h`をポーイ
そして初期化はこれだけ！
```c:main.c
#include <stdio.h>
#include "elk.h"

int main() {
  char buf[200];
  struct js *js = js_create(buf, sizeof(buf));
  // 任意のコード
  return 0;
}
```
ね、簡単でしょ？
一応MikanOSのフォーク内でのコードもあります。サンプルとして見て、どうぞ。

https://github.com/TNTSuperMan/TNTOS/blob/28b5e2eec1591c0a2f11a5bf31a65323f18e8789/apps/js/js.cpp

これだけだと神のようなエンジンだが問題が...
## しかし問題はJavaScriptの仕様であった
なんと、JavaScriptの仕様が散々でありました。ES6のサブセットと言われていますが、色々と無いです。
### 無い機能
- `a[b]`(動的なメンバー)
- `2 ** 16`(べき乗)
- アロー演算子
- strictモードの場合は`var`と`const`(`let`を使ってとのこと)
- `do` `while` `switch`(`for`を使ってとのこと)
- 配列、クロージャー、プロトタイプ、`this`、`new`、`delete`！
- 標準ライブラリ(`Date`、`Regexp`、`Function`、`String`、`Number`など)
- セミコロンの書き忘れのお見逃し(つまりセミコロン必須)

逆に何が出来るのか知りたいですね。
### ある機能
- for文
- if-else
- `!=` `==` `!==` `===`
- `typeof("a") === "string"`
- `a ? b : c`
- 関数(`let f = function(x, y) {return x + y; };`)
- オブジェクト(一応あった...)

### 不便なとこ
- 文字列の長さはバイト数で計算される(ECMAScript標準ではUnicodeコードポイント数)(`'Київ'.length === 8`)
- セミコロン必須

## まとめ
elkとは過酷な環境でも動くよう色々なものをそぎ落としたC言語のJavaScriptエンジンライブラリです。MikanOSや組み込み開発などのような過酷な環境でどうしてもJavaScriptを使いたい人にお勧めです。

## おまけ: QuickJS
[QuickJS](https://bellard.org/quickjs/)は[ES2023](https://tc39.github.io/ecma262/2023)を実装した[JavaScriptエンジン](https://ja.wikipedia.org/wiki/JavaScript%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)です。
ちなみに自分が愛用する[iPhone ~~1~~6s](https://ja.wikipedia.org/wiki/IPhone_6s)の[Safari](https://www.apple.com/safari/)に負けました（[checkyou.pages.dev](https://checkyou.pages.dev)で一歩及ばず[ES2022](https://tc39.github.io/ecma262/2022)と判定されました）

これも[elk](https://github.com/cesanta/elk)と似たように[C言語](https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E)ソース直置きで組み込みやすいのですが、[MikanOS](https://github.com/uchan-nos/mikanos)の環境では[標準ライブラリ](https://ja.wikibooks.org/wiki/C%E8%A8%80%E8%AA%9E/%E6%A8%99%E6%BA%96%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA/fenv.h)が少なすぎて無理でした。標準ライブラリが豊富なら絶対に[QuickJS](https://bellard.org/quickjs/)を使うべきです。

ちなみに[Minecraft](https://www.minecraft.net/ja-jp)の[ScriptAPI](https://learn.microsoft.com/ja-jp/minecraft/creator/scriptapi/)も[QuickJS](https://bellard.org/quickjs/)だそうですよ。

## 追記
場合によってはduktapeの方が便利でした。
少なくともTNTOSの環境ではそうでした。
詳細はこちらです。

https://qiita.com/TNTSuperMan/items/e903c84383862a06a869
Xcode タブの自動上書きをしないで開く方法

Xcodeでタブの自動上書きを防止する方法です。

AndroidStudioの場合は、タブの自動上書きがなく慣れているため、Xcodeでは上書きされてしまうので、何か防止する方法が無いか調べてみました。


# 新しいタブで開く方法
調べてみたら、単純でした。
ダブルクリックを使用して開けば上書きされずに開きます。

Android Studioに慣れている場合は、Xcodeと似ているようで違う箇所が多いため、いろいろ調べてみることをおすすめします。
【安全確保支援士】Cookieの属性を覚えよう

## はじめに

「**Cookieを無効にしてください**」  
「**このサイトはCookieを使用しています**」  
日常的に目にするこの“Cookie”という言葉、セキュリティの観点ではどういう意味を持つのでしょうか？


## Cookieとは？

**Cookie（クッキー）**とは、  
WebブラウザとWebサーバーの間でやりとりされる**小さなテキスト情報**のこと。

### どんなときに使われるの？
- ログイン状態の維持（セッションIDの保存）
- ショッピングカートの中身を保持
- ユーザーの閲覧履歴や好みに基づく表示最適化

つまり、Cookieは**あなたの前回の行動を覚えておくための付箋紙**のような役割を果たします。


## Cookieの属性とは？

Cookieには、セキュリティや動作に関わる**属性（フラグ）**を付与することができます。  
以下が、特に安全確保支援士試験で問われやすい重要な属性です。


### ① Secure 属性

- **意味**：HTTPS通信のときのみCookieを送信
- **効果**：盗聴・改ざんリスクのあるHTTP経由ではCookieが漏れない
- **ポイント**：**HTTPS前提のWebサイトでは必ず付けるべき**


### ② HttpOnly 属性

- **意味**：JavaScriptからのアクセスを禁止する
- **効果**：XSS（クロスサイトスクリプティング）によるCookieの不正取得を防止
- **ポイント**：**セッションIDを含むCookieには必須**


### ③ SameSite 属性

- **意味**：クロスサイト間でのCookie送信を制限
- **設定値**：
  - `Strict`：**外部サイトからのアクセスではCookieを一切送らない**
  - `Lax`：GETリクエストなどは許可（ログイン画面など向け）
  - `None`：クロスサイトでも送信許可（ただしSecure属性が必須）

- **効果**：CSRF（クロスサイトリクエストフォージェリ）の防止
- **ポイント**：近年のブラウザではデフォルトが`Lax`になっていることも多い


##  Cookieの属性まとめ表

| 属性       | 機能・目的                                  | セキュリティ対策としての役割             |
|------------|---------------------------------------------|-------------------------------------------|
| Secure     | HTTPS通信時のみ送信                          | 通信路の盗聴・改ざん対策                 |
| HttpOnly   | JavaScriptからのアクセス不可                 | XSSによるセッションID盗難の防止         |
| SameSite   | クロスサイトでのCookie送信制御               | CSRF攻撃の防止                           |



##  まとめ：Cookieのセキュリティ属性は必須知識！

- Cookieはユーザー情報の“記憶装置”
- 属性を正しく設定することで、重大な攻撃（XSS・CSRF・盗聴）を防げる
- **Secure／HttpOnly／SameSite**の3点セットは特に重要！
【Rails】ja.ymlについて

# 記事概要
Ruby on Railsにて多言語対応するためのファイルについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している

# 基本情報
## ファイルパス
config/locales/ja.yml

## ファイル生成方法
`config/locales`ディレクトリに、ファイル`ja.yml`を新規作成する

# まとめ
## 年月日と時刻の設定

```ja.yml
ja:
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"
```
Next.js App RouterでSSGが効かない？原因はまさかのNODE_ENV設定漏れだった

## ※この記事は実際に起こったトラブルをchatGPTにまとめてもらって書いています。

## 環境
・Next15.1.8
・dockerコンテナ（node:20）にてnpm run build,npm run start実施

## はじめに

Next.js 15.1.8 の App Router を使って、静的サイト生成（SSG）を行おうとしたところ、  
page.tsx内に`force-static` を設定しているにもかかわらず、`timestamp` がリクエストのたびに変わってしまう現象に遭遇しました。以下ソース。

```
export const dynamic = 'force-static';

export default async function SSGPage() {

  const timestamp = new Date().toISOString();
  return (
    <div>
      <p>SSG</p>
      <p>timestamp: {timestamp}</p>

    </div>
  )
}
```

原因調査のため以下を実施：

- キャッシュが残っているかもしれないので、.nextディレクトリを削除してnpm run build, npm run startを実施
- `export const dynamic = 'force-static'` を指定済み
- `async` を使わず同期関数で定義
- `.next/server/app/` 以下に `.html` ファイルも出力されている
- 念のため `middleware.ts` を削除
- `layout.tsx` でも `cookies()` や `headers()` は未使用

それでも `curl -I` の結果は以下のようになり、明らかに SSR のレスポンスでした：

```
Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate
```

---

## 原因：`NODE_ENV=production` を設定していなかった

Docker 上で `node:20` をベースに `next start` を実行していましたが、  
**環境変数 `NODE_ENV` を明示していなかった**ため、Next.js が SSR 相当の挙動をしていました。

### ✅ Next.js の重要な仕様

| コマンド | 挙動 |
|----------|------|
| `next dev` | 開発モード（SSGは一切効かない） |
| `next build` | 常に `NODE_ENV=production` で動く（OK） |
| `next start` | `NODE_ENV` が未指定だと SSR 相当の挙動に |

---

## 解決方法

Dockerfile または docker-compose に以下の環境変数を追加します。

### Dockerfile：

```dockerfile
ENV NODE_ENV=production
```

その上で再ビルド・再起動：
```
npm install
npm run build
npm run start
```

再度 `curl -I ` を実行したところ、次のように表示されました：
```
x-nextjs-cache: HIT
Cache-Control: s-maxage=31536000
```

## この件で得られた教訓：

Next.js の SSG は「見かけのビルド結果」だけではなく、実際のランタイム環境での挙動まで確認することが大切。

同じ問題で悩んでいる方の助けになれば幸いです！
PyTrialをインストールする

（2025.5.24 記事作成）
（2025.5.25 環境をPython3.9系統から3.7系統に修正）

## 📦 PyTrialとは？

PyTrialは、臨床試験におけるAI活用（ML4Trial）を支援するPythonライブラリです。
これまでに公開されたML4Trial関連の主要なOSSのラッパーとなっています。
臨床試験に関する6つの機械学習タスクに対応し、34種類のMLアルゴリズムや23のデータセットもバンドルされています。
また、データロードからモデル訓練・評価まで一貫したAPIを提供しているのも特徴です。


## 🗒️ 参考リンク

> Wang, Z. et al. (2023).
> *PyTrial: Machine Learning Software and Benchmark for Clinical Trial Applications*
> [arXiv:2306.04018v2](https://arxiv.org/abs/2306.04018) / [GitHub](https://github.com/RyanWangZf/PyTrial) / [Readthedocs](https://pytrial.readthedocs.io/en/latest/install.html)


## 🔧 PyTrialのインストール
PyTrial自体はシンプルに見えるものの、GPU対応でしっかり動かす環境構築は手こずりました。なお、CUDAに依存するケモインフォマティクス系パッケージを扱ってきた経験上、PyTorchやCUDA周りの環境構築にはバージョン整合性の罠が多いことは重々承知していました。PyTrialでも例に漏れず苦戦したので、自分なりの「動く手順＋コツ」を記録します。
（検証環境：Windows, NVIDIA GeForce RTX 3060, Miniconda）


##  🚩 公式情報に基づくインストール要点まとめ

* 公式推奨バージョンはPython 3.7以上、PyTorch 1.8.0以上。
* PyTrialはPyPIインストール非推奨で、GitHub mainブランチからpipで導入することが公式手順です。
* まずPyTorch（自分のGPU/OS/CUDAバージョンに合わせたもの）を先に導入します。
* 依存パッケージは[公式requirements.txt](https://github.com/RyanWangZf/PyTrial/blob/main/requirements.txt)にまとまっていますが、多くは最新版だとPython 3.7非対応なのでバージョン固定が必須になります。
* rdkitはpipでのインストールが非推奨なので、conda-forgeチャンネルからインストールしてください。
* 公式案内通り`pip install git+https://github.com/RyanWangZf/pytrial.git@main`でPyTrial本体をインストールします。
* transtabやpromptehrなど一部pipパッケージが依存関係の都合で、torchを新しいバージョンに上書きしてしまいます。そのため、最後にcondaでPyTorch 1.8.1（RTX 3060＋CUDA 11.1対応）を再インストールしました。
* PyTorchの再インストール後、pip show torchで残存確認を一応行うことを推奨します。torch==1.13.1 のような pip由来 のTorchが混在している場合は、当該パッケージを削除してPyTorch 1.8.1（RTX 3060＋CUDA 11.1対応）を再インストールします。
* ちなみにPyTrial（pytrial）とPyPIにあるpytrialsは全くの別物なので間違えないように注意してください（1敗）


```bash
# 1. 仮想環境の作成と有効化
conda create -n pytrial37 python=3.7 -y
conda activate pytrial37

# 2. conda依存パッケージインストール（バージョン明示）
conda install -c conda-forge matplotlib=3.5.3 kiwisolver=1.3.2 numpy=1.21.6 pandas=1.3.5 scikit-learn=1.0.2 tqdm rdkit=2022.09.1 pip -y

# 3. pip依存パッケージインストール（バージョン明示）
pip install networkx==2.6.3 nltk==3.7 sdmetrics==0.6.0 ctgan==0.5.2 seaborn==0.11.2 dill==0.3.6 requests==2.28.1 gensim==4.2.0 joblib==1.1.0 wget==3.2 tqdm==4.64.1 transformers==4.21.3 datasets==2.7.1 copulas==0.7.0 rdt==1.5.0 xgboost==1.6.2 accelerate==0.12.0 transtab==0.0.5 promptehr trial2vec icd10-cm

# 4. PyTorch 1.8.1（CUDA 11.1, RTX 3060用）導入
conda install -c pytorch -c conda-forge pytorch=1.8.1 torchvision=0.9.1 torchaudio=0.8.1 cudatoolkit=11.1 -y

# 5. PyTrial本体をGitHubからインストール（公式通り）
pip install git+https://github.com/RyanWangZf/pytrial.git@main

# 6. GPU対応を保つためPyTorch 1.8.1（CUDA 11.1, RTX 3060用）で上書き
conda install pytorch==1.8.1 torchvision==0.9.1 torchaudio==0.8.1 cudatoolkit=11.1 -c pytorch -c conda-forge -y

# 7. 動作確認（import＋バージョン＋CUDA利用可否を一発チェック）
python -c "import pytrial, torch; print('PyTrial & PyTorch imported'); print('torch version:', torch.__version__); print('CUDA available:', torch.cuda.is_available()); print('CUDA version:', torch.version.cuda)"

# 8. ymlで環境エクスポート（再現・共有用）
conda env export -n pytrial37 > pytrial37_env.yml
```


## 🚀 今後の展開（予定）

* PyTrialのタスク別チュートリアル解説
* サンプルコードの解説と実行例（GPU利用）
* 臨床試験オペレーションのDXユースケース紹介