OmniAICreator/Qiita-1.07M huggingface dataset:
Astro.js サイトマップを追加する方法

サイトマップは、サイト内のページ一覧を検索エンジン（Googleなど）に伝えるファイル。これがあると、新しいページや更新したページが検索エンジンに見つかりやすくなります。

Astroなら、公式インテグレーション @astrojs/sitemap を使えば簡単にセットアップできます。手順をサクッとまとめます！

## サイトマップ・インテグレーションを追加する
プロジェクトのルートディレクトリでターミナル（コマンドプロンプトやPowerShellなど）を開きます。

以下のコマンドを実行します。

* **npm を使用している場合:**
```bash
npx astro add sitemap
```
* **pnpm を使用している場合:**
```bash
pnpm astro add sitemap
```
* **yarn を使用している場合:**
```bash
yarn astro add sitemap
```

コマンド実行中、「y」を聞かれたらそのまま「y」でOK。

必要なパッケージが入り、astro.config.mjs に設定が自動で追加されます。

## サイトのURLを設定する (`astro.config.mjs`)

サイトマップ内のURLを正しく生成するために、あなたのサイトが公開される完全なURLを設定する必要があります。

1.  プロジェクトのルートにある `astro.config.mjs` ファイルを開きます。
2.  `defineConfig` の中に `site` オプションがあるか確認し、なければ追加、あれば編集して、あなたのサイトのURLを設定します。

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap'; // astro add で自動追加されているはず

export default defineConfig({
  // ↓ ここにあなたのサイトの完全なURLを設定！ (例: https://...)
  site: 'https://あなたのサイトのドメイン.com',
  integrations: [
    sitemap(), // astro add で自動追加されているはず
    // ... 他のインテグレーション
  ],
  // ... 他の設定
});
```
* `https://` から始まる、間違いのないURLを入力してください。

## ビルドしてサイトマップを確認する

サイトマップはビルド時に自動生成されます。

以下のコマンドでビルドしましょう。
```bash
npm run build
# または pnpm run build / yarn build
```
ビルドが完了すると、プロジェクト内に `dist` という名前のフォルダが作成されます（出力先を変更していなければ）。

`dist` フォルダの中に `sitemap-index.xml` や `sitemap-0.xml` といった名前のファイルが生成されていれば成功です。

**確認と次のステップ**

* 生成されたサイトマップファイル (`dist/sitemap-index.xml` など) を開いて、中のURLが `astro.config.mjs` で設定した `site` のURLから始まっているか確認しましょう。
* サイトをサーバーにアップロード（デプロイ）したら、生成されたサイトマップのURL（例: `https://あなたのサイトのドメイン.com/sitemap-index.xml`）を Google Search Console などのウェブマスターツールに登録しましょう。これにより、検索エンジンがサイトの構造を把握しやすくなります。

これで、Astroサイトにサイトマップを追加できました。サイトマップは簡単に追加できるので、SEOの第一歩としてぜひ設定しておきましょう。
Cloudflare Tunnel + WARP ClientでAdblockする方法

# 背景

最近、Cloudflare TunnelとWARP Clientを使って、「外出先から常に自宅LANへ入るルート」を作りました。
外から見える固定IPが無くてもルートを作れるのが、個人的に画期的です。作るときの手順は以下を参照ください。

https://qiita.com/sey323/items/c9d43f2c930b8602c46c

しかし、この方法でVPNを張ると、iPhoneなどではAdblockが外れてしまうという欠点がありました。
ググって解消する方法があったので、メモとして共有します

# 方法

1. Cloudflare Zero Trustのダッシュボードへ行きます。
https://one.dash.cloudflare.com/

1. メニューから「Gateway」→「Firewall Policy」を選び、「Add a policy」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789636/2007c825-df24-472c-a80d-27379fd68a24.png)

1. 「STEP 1　Name your policy」は名前を付けるだけなので、何らか入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789636/e6a5249d-fa68-4243-b8bd-fb72c6f51b90.png)

1. 「STEP 2　Build an expression」で、「Add condition」を選び、以下のように追加します。
    - Selector: Domain
    - Operator: matches regex
    - Value: 以下をコピペ
        ```
        (advert|adserv|adsystem|doubleclick|2mdn|truecaller|uberads|206ads|360in|360yield|3lift|a2z|aarki|ad2iction|adcolony|addthis|adform|adhaven|adlooxtracking|admicro|adnxs|adpushup|adroll|adsafeprotected|adsbynimbus|adspruce|adsrvr|adswizz|adtelligent|adventori|adzerk|aerserv|amplitude|aniview|anzuinfra|apester|aralego|atdmt|atwola|bannersnack|batmobi|bluecava|blueconic|carambo|casalemediacriteo|crittercismriteo|crittercism|revcontent|ijinshan|imrworldwide|inmobi|marketo|moatads|moatpixel|mookie|perfectaudience|permutive|pubmatic|pushwoosh|rayjump|revcontent|revjet|rfihub|richrelevance|rqmob|rubiconproject|onetag|samba|scopely|scorecardresearch|shareaholic|sharethis|sharethrough|smaato|snapads|speedshiftmedia|supersonicads|swrve|taboola|tremorhub|unity3d|vertamedia|videohub|vungle|wzrkt|xiaomi|yieldlove|yieldmo|yieldoptimizer|baidu|chinanet|yandex|googlesyndication)
        ```
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3789636/f4c15af5-c508-4cff-9897-8370573fc66d.png)

1. 上記の宛先に行きたくないので、「STEP 3　Select an action」は、Actionを「Block」にします。
1. 最後に「Save Policy」で保存して完了です。

# 補記

## 注意

原理を考えればわかりますが、ドメインを正規表現でブロックしているだけです。
そのため、問題ないサイトもブロックされる可能性があります。
この点は、改良版のやり方を追記予定です

## 見つけた背景

ぐぐると、Redditにて議論されているスレッドがありました。

https://www.reddit.com/r/CloudFlare/comments/17d8oyr/ad_blocking_via_cloudflare_zero_trust/?rdt=34557

その中で「簡単な方法が以下で紹介されているよ」と紹介されていました。

https://icloudgo.net/posts/block-ads-with-cloudflare-zero-trust/
Pythonプログラミング基礎｜演算子の種類と役割まとめ

Pythonには、さまざまな演算子が用意されており、数値計算から論理判定、オブジェクトの比較まで幅広く使われます。

---

### 1. 算術演算子（Arithmetic Operators）
数値の計算に使われる基本的な演算子です。

| 演算子 | 説明         | 例            |
|--------|--------------|---------------|
| `+`    | 加算         | `3 + 2` → 5   |
| `-`    | 減算         | `3 - 2` → 1   |
| `*`    | 乗算         | `3 * 2` → 6   |
| `/`    | 除算         | `3 / 2` → 1.5 |
| `//`   | 切り捨て除算 | `3 // 2` → 1  |
| `%`    | 剰余         | `3 % 2` → 1   |
| `**`   | べき乗       | `3 ** 2` → 9  |

---

### 2. 比較演算子（Comparison Operators）
値を比較して、`True` または `False` を返します。

| 演算子 | 意味          | 例             |
|--------|---------------|----------------|
| `>`    | より大きい    | `3 > 2` → True |
| `<`    | より小さい    | `3 < 2` → False|
| `==`   | 等しい        | `3 == 3` → True|
| `!=`   | 等しくない    | `3 != 2` → True|
| `>=`   | 以上          | `3 >= 3` → True|
| `<=`   | 以下          | `2 <= 3` → True|

---

### 3. 論理演算子（Logical Operators）
複数の条件を組み合わせるときに使います。

| 演算子 | 意味     | 例                         |
|--------|----------|----------------------------|
| `and`  | 両方がTrue | `True and False` → False  |
| `or`   | どちらかがTrue | `True or False` → True |
| `not`  | 否定     | `not True` → False        |

---

### 4. ビット演算子（Bitwise Operators）
整数を**ビット単位で演算**するための演算子です。

| 演算子 | 意味         | 例（2進数）       |
|--------|--------------|------------------|
| `&`    | AND演算      | `0b101 & 0b001` → `0b001` |
| `|`    | OR演算       | `0b101 | 0b001` → `0b101` |
| `^`    | XOR演算      | `0b101 ^ 0b001` → `0b100` |
| `~`    | NOT演算（反転）| `~0b101`         |
| `<<`   | 左シフト     | `1 << 2` → `4`    |
| `>>`   | 右シフト     | `4 >> 1` → `2`    |

---

### 5. 代入演算子（Assignment Operators）
変数に値を代入したり、演算結果を代入するために使います。

| 演算子   | 説明                     | 例             |
|----------|--------------------------|----------------|
| `=`      | 代入                     | `x = 3`        |
| `+=`     | 加算して代入             | `x += 2`       |
| `-=`     | 減算して代入             | `x -= 2`       |
| `*=`     | 乗算して代入             | `x *= 2`       |
| `/=`     | 除算して代入             | `x /= 2`       |
| `//=`    | 切り捨て除算して代入     | `x //= 2`      |
| `%=`     | 剰余を代入               | `x %= 2`       |
| `**=`    | べき乗して代入           | `x **= 2`      |
| `&=`, `\|=`, `^=`, `>>=`, `<<=` | ビット演算して代入 | `x &&= 1` |

---

### 6. 同一性演算子（Identity Operators）
2つのオブジェクトが**同一のものかどうか**を確認します。

| 演算子      | 意味            | 例                       |
|-------------|------------------|--------------------------|
| `is`        | 同一オブジェクト | `a is b`                 |
| `is not`    | 異なるオブジェクト | `a is not b`             |

---

### 7. 所属演算子（Membership Operators）
特定の値がリストや文字列などに**含まれているか**を確認します。

| 演算子     | 意味       | 例                   |
|------------|------------|----------------------|
| `in`       | 含まれる   | `'a' in 'apple'` → True |
| `not in`   | 含まれない | `'z' not in 'apple'` → True |

---
【Windows】ワークグループが入力不可で変更できない場合の対応

# はじめに
仕事で Windows 10 に導入作業を依頼をされたのですが、その中でコンピューター名とワークグループの変更がありました。
しかし、コンピュータ名は変更できたのですが、下図のようにワークグループは入力できない状態になっていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/a434540c-7efa-4a8d-97a2-6e1417a76324.png)

# 調査
チーム内会議でワークグループが変更できない旨を報告、皆で対応方法を考えていました。
よく画面を見ていると、「このコンピューターのドメインとメンバーシップを変更する前に Workstation サービスを開始する必要があります。」と記載がありました。

早速、`Workstation` サービスを開始してみるとエラーで開始できませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/06d28457-3974-4def-ac46-663b089b60dc.png)

# 原因
>[windows10 workstationサービスの起動時にエラー1075となる](https://answers.microsoft.com/ja-jp/windows/forum/all/windows10/822be2f4-ae23-44f3-a4bc-b6e5d939105e)
Workstation サービスは SMB v1.0 に依存していますが、SMB v1.0は有効化されていますか？

`Workstation` サービスのプロパティの依存関係には、`SMB 1.0`の記載がありませんでした。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/34ee3bbd-3611-4bf0-9b45-3c867d49108b.png)

# 対応
「プログラムと機能」にある「Windowsの機能の有効化または無効化」にて、「SMB 1.0/CIFS ファイル共有のサポート」にチェックを付けてインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/0137f1ec-1dbf-4c00-9643-b684125a5b6b.png)

これにより、`Workstation` サービスを開始させることが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/e25daa25-db15-4a32-9c03-308a8f40390f.png)

コンピュータ名の変更画面を開き直すと、ワークグループが入力できるようになりました。
これでワークグループを変更して、OKボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14053/908eafe2-e5bc-40a0-b21b-8f4a4daf3587.png)

## SMB 1.0を無効化
このままでも良かったのですが、元々インストールされていない状態であったため、「SMB 1.0/CIFS ファイル共有のサポート」にチェックを外して無効化しました。

# 最後に
ネットで「ワークグループ 入力できない」とかで調べたり、Microsoft Copilotに尋ねてもダメでしたが、チーム内会議にて皆で相談すれば解決できることもあるわけです。
「Workstation サービスを開始する必要があります。」との画面上の記載に気が付けば良かったのですが、灯台下暗しってやつで見落としがちでした。
ロッチ「言わんといて」の条件分岐

# はじめに
ロッチの[「言わんといて」というコント](https://youtu.be/C4pdfYIdVdw?si=UtGxmK4nWzButI7n)が面白すぎて何度か見返していたのですが、コカドさんのために中岡さんの言っていることを整理してあげたくなったのでプログラムにしてみました。

面白いのでコント動画ぜひ見てほしいです。
`if`文を勉強したての人には動画内のコカドさんの苦悩に共感できるとおもいます。


# 中岡さんに「言う」べきか判定する
```python
def should_notify_nakaoka(is_cancelled: bool,
                          hanshin: list,
                          x: list):
  if is_cancelled: #雨天中止の場合
    return True  #言う
  if sum(hanshin) > sum(x): #阪神が勝った場合
    return False #言わない
  if sum(x) - sum(hanshin) >= 10: #10点以上差をつけられている場合
    if sum(hanshin[:8]) + sum(x[:8]) == 0: #1回から8回まで0対0の場合
      return False #言わない
    else:
      return True  #言う
  if x[0] - hanshin[0] >= 7: #初回に7点差以上
    return True  #言う
    
  return False
```


# おわりに
テストが不充分なので不安が残りますが、これで少しはコカドさんの助けになるでしょうか、、
どうせ試合を重ねるごとに中岡さんの要件は増え続けていくんでしょうね
Docker上のWebアプリにホストからアクセスできない理由と解決方法

DockerでWebアプリを立ち上げたとき、ホスト（PC）のブラウザから `localhost:8000` などでアクセスしようとしても接続できないことがあります。

これはアプリケーションの**バインドアドレスとDockerのポートマッピングの関係**を正しく理解していないと起きる典型的なトラブルです。

## よくある症状

```bash
アプリ起動: アプリが 127.0.0.1:8000 で起動
```
→ そのままでは ホストのブラウザからアクセスできない

表示されるエラー例：
- 「このサイトにアクセスできません」
- ERR_EMPTY_RESPONSE
- ERR_CONNECTION_REFUSED

## 原因：127.0.0.1 にバインドしている
127.0.0.1 は「localhost（自分自身）」を表す特殊なIPアドレスです。

Dockerコンテナ内でアプリが `127.0.0.1:ポート番号` にバインドされている場合、それは**「コンテナ内部からしかアクセスできない」**という意味になります。

## 解決策：0.0.0.0 にバインドする
アプリを起動するとき、次のように `0.0.0.0` にバインドすると、コンテナ外からアクセスできるようになります。

```bash
起動例（フレームワークにより異なる）:
  例）--host 0.0.0.0
  例）bind 0.0.0.0:8000
```
`0.0.0.0` は「すべてのネットワークインターフェース」を意味します。
これにより、Dockerのポートフォワーディングと連携してホストからアクセス可能になります。

## Docker Composeでの設定（例）
```yaml
version: '3.8'

services:
  web:
    build: .
    ports:
      - "8000:8000"  # ホストの8000番 → コンテナの8000番
    volumes:
      - .:/app
```
この例では、ホストの `localhost:8000` にアクセスすると、コンテナの `8000` 番ポートに転送されます。

## 正常にアクセスできる構成まとめ

|状況	|アプリのバインド先	|Dockerの ports 設定	|ホストからアクセス|
|-|-|-|-|
|❌ アクセス不可|	`127.0.0.1:8000` |	`8000:8000`|	✕（コンテナ外から見えない）
|✅ アクセス可能|	`0.0.0.0:8000`	| `8000:8000` |	○（コンテナ外からアクセス可）

## 他の端末（スマホなど）からアクセスするには？
以下の条件を満たせば、同じLAN内のスマホなどからPC上のDockerアプリにアクセスできます：

1．アプリが 0.0.0.0 にバインドされている
2. Dockerの ports で該当ポートが公開されている
3. ホストOSの ファイアウォールでポートを開放している
4. アクセス先は「ホストPCのローカルIPアドレス」

スマホから `http://192.168.x.x:8000` にアクセスj
`192.168.x.x` はホストPCのIP。`ipconfig`（Windows）や `ifconfig/ip` a（Mac/Linux）で確認できます。

### セキュリティに注意
- `0.0.0.0` にバインドすることで、**全てのネットワークインターフェースからの接続を受け付ける状態**になります。
- 開発環境では便利ですが、本番環境でそのまま使うのは危険です。
- 本番ではリバースプロキシ（nginx など）＋ HTTPS を推奨します。

## まとめ
- アプリが 127.0.0.1 にバインドされていると、Docker外からアクセスできない。
- 0.0.0.0 にバインドすれば、Docker外（ホストや他デバイス）からアクセス可能になる。
- Dockerの ports 設定と組み合わせて、適切に公開することが重要。
忖度について思うこと

**＜本記事のターゲット層＞**

- 忖度って偉い人だけの特権だと思う人
- 忖度が嫌いな人
- 忖度を理不尽だと感じる人

## 1. 忖度に対する提起

今回伝えたいことは、
(1) 忖度が得意な人も、作業が得意な人もどちらもチームワークで仕事を進めるためには必要である
(2) 他部署や他社の人と仕事をする場合、忖度が得意な人材のほうが活躍する（ことが多い）
ということです。
 
空気を読むことが苦手な人が世の中にはいる。反面、作業をすることが得意だったりする。
それとは逆に空気を読むのが得意で、作業をすることが苦手な人もいる。
 
作業をすることが得意な人から見て、空気を読むことが得意で周囲をうまくやっているのを見て嫉妬をすることがあるかもしれない。
それとは逆に、空気を読むことが得意な人から見て、作業が得意な人に嫉妬をすることがあるかもしれない。
 
しかし、それとは違い、作業をすることが得意な人が、空気を読みながら仕事をしている人を見て「能力がないやつだな」と思うことがあるかもしれない。
それとは逆に空気を読みながら仕事をすることが得意な人から見て、空気を読まずに作業をしている姿を見て「無駄な労力を使ってバカなやつめ」と思うことがあるかもしれない。
 
でも、それぞれが得意なことをやっていて、苦手なことがあるだけです。自分がやりたい仕事のやり方は、自分にとっての理想のやり方なので自分からみて優れていると感じるのは当たり前で、それに適合しない仕事のやり方をみて、悪いことに目を向けて下に見るのはよくないことだと思う。

## 2. 忖度はチームワークに必要である

それはそれとして、私も作業が好きで、作業が得意だからこそ思うことがあります。
 
それは忖度をして、つまり空気を読んで仕事をすることには、とある効果があるということです。
 
忖度とは、えらい人に対して行うイメージが強いですが、本来の意味は「他人の気持をおしはかること」です。
 
立場が上でも下でも対等でも、相手がつらいときに手を差し伸べたり、あるいは敢えてそっとしておくことはチームワークを推進する上ではよいことです。

たとえ正論であっても相手がつらいときに話したところで100の内、何%を受け入れられるのでしょうか？あるいは相手を辱めるような状況下で話をしたところでも同じく伝えたいことをベストな状態で伝えきれないでしょう。
 
理論的に説明をして動くことは得意な人は、理論的に説明をすれば動きます。しかし、理論的に説明をしても動けない人が世の中にいることを常に忘れてはなりません。
 
忙しくて余力がない人、ハートで動くタイプ、戦略を練って動くタイプなど、様々なパターンがあることでしょう。そうした人たちを動かす決め手は理論ではありません。相手の気持ちを理解し、事前に対話をすることで心理的な負担を軽くしたり（根回し）、相手に分かりやすく短い時間で伝えたいことが伝わるようにしたり、様々な工夫が必要です。しかもこれらは、相手に根掘り葉掘り聞いて進められるものではありません。

正論は正しいのはそうかもしれません。しかし、正論を実行することは必ずしも最高の結果にはならないのです。そこには人と人の関わり合いがあり、その関わり合いは様々な状況の中にあります。

例えば相手がご高齢の方で、耳が遠く、考えるのも億劫な状況だったらどうでしょうか。あるいは病により高熱があり、声もほとんど出せない状況だったらどうでしょうか。そうした状況であれば、わかりやすく気を遣うことでしょう。

でも世の中、必ずしもこうした分かりやすい状況にある人ばかりではありません。とてもつらい状況で、人に話すこともできず、そうした中で普段とは違いトゲのある言葉を出してしまう人だっているかもしれません。「そんなことまで考えられないよ」っと思う人も多いことでしょう。しかし、そうした心を推しはかることこそが、重要であり、それこそが真に忖度をするということだと考えています。
 
また、常日頃からコミュニケーションを取り、あるいは周囲から情報を聞いたりして、事細かく情報を集めて進めなければいけない状況でも、相手に対話することすら嫌がられることだってあります。これらを解消するには忖度の上手さが必要になるわけです。
 
## 3. 伝える難しさ、忖度の大事さ

伝わると伝えるは違います。伝える側は相手に伝えるために試行錯誤して、何度も伝える内容を読み返すため、多大な時間を費やして望んでいるので覚えていて当然かもしれません。
 
しかし、伝える相手は、内容を見聞きする時間だけしか関わらないのです。メールやチャットであれば2分もかからないことでしょう。対話をしたとして何分でしょうか。忙しい日常の中で関わることを考えたら一瞬の話です。その一瞬に一度伝えただけで「伝わっている」というのは傲慢だと思います。Amazonの創業者ジェフ・ベゾスも、意思を浸透させるために何度も繰り返し従業員に伝えたそうです。とくに伝えた内容を実行に移して欲しいのは、多くの場合は伝える側です。伝える相手ではありません。当然伝わりやすい工夫をすることも当然のことでしょう。
 
それに仕事を相手に教えるときにも、忖度をすること、伝わる話し方をすることは重要です。相手がプライドが高ければ、そのプライドを傷つけないように配慮した対話をしたほうが結果が出ますし、相手が年下だからといって横柄な態度を取らないほうが質問をしてもらいやすいですし、話を聞いてもらいやすくなります。
 
ただ「伝えたいことを言う」だけでは結果が出にくいため非効率です。相手の反応を見ながら、それに合わせた対話をしたほうが伝えたいことを伝えやすいのです。言い方を変えると対話の生産性が高くなるということですね。
 
こんな話をしている私こそ、傲慢に見える人も間違いなくいると思います。私も前まではそうでした。
 
このように考え方を変えた理由は、情シス時代に忙しいユーザー部門を見て気づいたからです。気づいた内容はまさに、いまお伝えした内容です。
 
忙しい日常の中で関わることを考えたら、関わるのは一瞬の話です。その一瞬に一度伝えただけで「伝わっている」というのは傲慢であり、伝わりやすい工夫をすることこそが当然です。
 
忙しくて余力がない人、ハートで動くタイプ、戦略を練って動くタイプなど、様々なパターンがある。というこの忖度が必要な人材がいることも情シス時代に気づいたことの一つです。
 
作業が得意な人と同様に、忖度が得意な人もいて、それで一つのチームであり、どちらがより優れているとかではない。いまの現場でもそう感じて仕事をしていたので今回、話をしました。
 
こうしたことを理解した上で仕事をすることが出来る。これもポータブルスキルになるかなと思いました。

ちなみにこの動画が良い忖度のやり方です
https://vt.tiktok.com/ZSjSkvgsc/
【論文読み】生成AIを活用したプログラミングに重要なスキルの予備調査

## はじめに
こんにちは。読んだ論文の紹介記事です。  
今回紹介するのは、「生成AIを活用したプログラミングに重要なスキルの予備調査」という論文です。  

- タイトル： 生成AIを活用したプログラミングに重要なスキルの予備調査
- 出典： 2024年度人工知能学会全国大会（第38回）(2024)
- URL： https://www.jstage.jst.go.jp/article/pjsai/JSAI2024/0/JSAI2024_4Xin239/_pdf/-char/ja


## 概要
開発者が持っているスキルの習熟度の違いが生成AIよって生成されたコードの品質にどのように影響を与えるかを調査した。


## 特徴
- 開発者に求められるスキルを、コーディング力、プロセス力、ドメイン知識、プロンプト力の4つのスキル系統に分類。  
- 4つのスキルに対するアンケートを行い、習熟度を点数化。  
- プロンプト力のアンケートにはChain of Thought (CoT)に関する問がある。CoTプロンプティングとは、大規模言語モデル（LLM）の推論能力を向上させる手法の一つである。問題解決の過程をステップごとに明示的に示すことで、モデルが論理的に思考し、より正確な回答を導き出すことを促す。  
- プロンプト力のスキルの習熟度とコードの品質には相関関係がある結果となり、プロンプト力はコードの品質に最も影響を与える可能性があることが確認された。  


## 想定される適用例
- 生成AIを活用したプログラミング


## 参考
- [生成AIを活用したプログラミングに重要なスキルの予備調査](https://www.jstage.jst.go.jp/article/pjsai/JSAI2024/0/JSAI2024_4Xin239/_pdf/-char/ja)
React + Rails初心者の歩み 〜初級編：環境構築〜

# はじめに
今回取り組む前に、色々見よう見まねのコピペでタスク管理アプリとかを作っていたんです。
でもサーフィンして出てくる情報って、当然ですけどそれぞれバージョン違ったり書き方が違ったりしています。
そこで踊らされてめちゃくちゃ時間食ったりしていて、「やっぱりまずはちゃんと自分で書けるようにならんと話にならんなぁ。」と痛感しました。AI然り。
なので一から進めていきます。

# 環境導入
当時、特にバージョンは躓いたので、とにかく最新新鮮最強！
ということで当時最新？だったバージョン入れました。
Node  10.9.2
Rails 8.0.2
Vite  6.3.4
React 19.1.0

# Rails、Reactのプロジェクト作成
まずはプロジェクトの作成。

## React
ViteでReactを導入する際、色々と組み合わせ？を選択できるのですが今回は、
javascriptを選択。
```
npm create vite frontend --template react
```

Viteで導入すると、「node_modules」が自動で作成されません。
なので、以下を実行。
```
npm install
```

起動の合言葉は、
```
npm run dev
```
ひゅぅ！めんどくせー！
npm startで慣れてたんで手数が多く感じちゃいます。

## Rails
APIモードで作成するには「--api」をつけるだけ。
```
rails new backend --api
```

::: note info
RailsをAPIモードで作成した場合、フロントエンドとバックエンドを異なるオリジン（ドメイン・ポート）で動作させることが多いようです。
Webのセキュリティ機構で、スクリプトが読み込まれたオリジン（スキーム・ドメイン・ポート）以外のサーバーと勝手に通信できないという制限がされています。
そのため、CORSを設定し通信が安全に許可されるようにします。
By：GPTえもん
:::
### CORSが必要になる典型的なケース
```
・Rails API（例: http://localhost:3000）
・React フロントエンド（例: http://localhost:5173）
```
::: note info
このように異なるオリジン間でリクエストを送ると、
ブラウザの同一オリジンポリシーにより、リクエストがブロックされる可能性があります。
By：GPTえもん
:::
まじでAI様様です。

要は自分の子供が全然知らんおっさんとやりとりしていたら、
「そのやり取りほんとに安全？大丈夫？話聞こか？」となるので、
ちゃんと「この人安全ですよー」と教えてあげる必要がある。
ってことですかね。

<b>君優しいやん。</b>

### CORSの設定

#### rack-cors
まず、フロントエンドとバックエンドのやりとりを許可するための設定をしていきます。
Gemfileに「rack-cors」がコメントアウトされているので、
コメントアウトを解除します。
```
gem 'rack-cors'
```

その後、ターミナルで以下を実行
```
bundle install
```

すると、「config/initializers/cors.rb」が自動生成されるので、
そのファイルを編集します。
```
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "localhost:3000",'複数可'

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
```

#### パスワードのハッシュ化
続いてなんらかのアプリを作成するならほぼ必須な、
パスワードを安全に扱うために「パスワードのハッシュ化」を行います。
Gemfileにコメントアウトされていたのでコメントアウトを解除。
なければ追加。
```
gem "bcrypt", "~> 3.1.7"
```

その後、またターミナルで以下を実行
```
bundle install
```

最後にターミナルで以下を実行し、空のデータベースを作成して終わり！
```
rails db:create
```

# まとめ
作業量は少ないので、「おいおいこんなもんかよ！」とか思ってましたが、
こうやって書き記して1つ1つ解説してみると全然理解できていなかったし、
ほんとに勉強になります。

とはいえ、おいおいこんなもんかよ！な量なので、
問題集初心者編の1問目もやっちゃいます。
それはまた別の記事で。さよなら。

https://qiita.com/tukaji/items/649d7dc3e0d43d597250
Streamlitとは？


**Streamlit（ストリームリット）** は、PythonのコードだけでインタラクティブなWebアプリを簡単に作れるフレームワークです。

## ロボットの例えで理解するStreamlit

あなたがAIロボットを作ったとしても、それを人に見せる「展示台（ショーケース）」がないと魅力が伝わりません。

**Streamlitはその展示台を一瞬で作ってくれる魔法の道具**です。Pythonコードを書くだけでロボットを紹介できるWebアプリが完成します。



## 特徴

| 特徴             | 内容 |
|------------------|------|
| PythonだけでOK   | HTMLやJavaScriptは不要。PythonだけでUIが作れます。 |
| リアルタイム更新 | 入力や変更に応じて、画面がすぐに再描画されます。 |
| 軽量＆高速       | 試作アプリをすばやく作成・共有できます。 |
| グラフ連携が簡単 | matplotlib、pandas、Plotlyなどのライブラリと相性抜群。 |

---

## よく使う機能（例）

| 機能       | コード例                          | 説明                         |
|------------|-----------------------------------|------------------------------|
| タイトル   | `st.title("タイトル")`            | 大きな見出しを表示          |
| テキスト表示 | `st.write("こんにちは")`          | 文字・数値などを表示        |
| 入力欄     | `st.text_input("名前は？")`       | ユーザーからの入力を受け取る |
| ボタン     | `st.button("実行")`               | 処理を起動できるボタン       |
| グラフ表示 | `st.line_chart(data)`             | データから線グラフを表示     |
| サイドバー | `st.sidebar.selectbox(...)`       | サイドメニューを追加できる   |

---

## 最小のアプリ例

```python
import streamlit as st

st.title("AIロボットの自己紹介")
name = st.text_input("あなたの名前は？")

if name:
    st.write(f"こんにちは、{name}さん！私はAIロボットです。")
vue.js学習記事　その１　開発環境の準備

<h1>vue.jsの導入</h1>

<h2>CDNから直接読み込む　（最も簡単）</h2>

開発時に使用するとよい（詳細なエラーメッセージを吐き出してくれるらしい）
``` html
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
```

こっちは本番よう的なやつ
``` html
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```
簡単なテストや学習程度なら上記でOK

# npmを使用したやつ
まず、PCにnpmがインストールされているか確認。
されてなかったらググって！ちな、コマンドラインで実行して
```
npm -v
```

# プロジェクトフォルダを作成する
ちなここでのファイル名は自由で可
``` 
mkdir　my-vue-project
cd my-vue-project 
````
# package.jsonの作成
```
npm init -y
```
# Vue.jsのインストール
```
npm install vue
```
誤字ってたらごめん。
でも、たぶんこれでいける。

VSCodeで開発するのがおススメらしい。
osek/vdx os open source, kernel, ECC2

職業訓練
https://qiita.com/kaizen_nagoya/items/95368b63fa21d64271ec

# OSEK/VDX OS

OSEK/VDX OS
https://www.toppers.jp/atk1-download.html

osek/vdx os open source
https://qiita.com/kaizen_nagoya/items/59a4202bcb68e2dfd2b5

osek/vdx os open source, config, h8tiny-renesas, header file
https://qiita.com/kaizen_nagoya/items/b4816501832bc0ad5a1e

# github
kaizen-nagoya/osek
https://github.com/kaizen-nagoya/osek/

# ECC2
https://github.com/kaizen-nagoya/osek/tree/main/kernel/ecc2
ecc2
- ent.c
- interrupt.c
- interrupt.h
- osek_kernel_cc.h
- resource.c
- resource.h
- task.c
- task.h
- task_manage.c

## ecc2
### ent.c
### interrupt.c
### interrupt.h
###  osek_kernel_cc.h
###  resource.c
###  resource.h
###  task.c
###  task.h
###  task_manage.c
【Playwright】uiモードでテストコードを読み込めない場合の対処法

## 結論
ローカルサーバーとuiモードを同時に起動すると解決した。

## 対処法
1. PowerShellで対象のフォルダに移動し、`npm run dev`を実行する
2. VS Codeのコンソールで`npx playwright test --ui`を実行する
3. uiモードの画面で再生ボタンを押下する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/70b02c21-79f5-4f5f-943d-8d6d087ceccc.png)

## 参考図書
入門　WebフロントエンドE2Eテスト
https://www.amazon.co.jp/%EF%BC%BB%E5%85%A5%E9%96%80%EF%BC%BDWeb%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89-E2E-%E3%83%86%E3%82%B9%E3%83%88%E2%80%95%E2%80%95Playwright%E3%81%AB%E3%82%88%E3%82%8BWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E8%87%AA%E5%8B%95%E3%83%86%E3%82%B9%E3%83%88%E3%81%8B%E3%82%89%E8%89%AF%E3%81%84%E3%83%86%E3%82%B9%E3%83%88%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%81%BE%E3%81%A7-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E9%81%B8%E6%9B%B8-%E3%82%88%E3%81%97%E3%81%8D/dp/4297142201
Google のマーケ系データを BigQuery に連結する

## 連結するもの
- Google Analytics 4
- Google Search Console
- Google Ads

## 連結方法
### BigQuery のプロジェクトを作成
Google Cloud で BigQuery を使用するプロジェクトを作成します。
1. コンソールにログインして既存のプロジェクトもしくは新しくプロジェクトを作成する
1. 作成したプロジェクト > APIライブラリ > 有効なAPIとサービス > APIとサービスを有効にする を選択
1. BigQuery API を検索し、有効にする
1. BigQuery API を選択し、有効になっていたらOK

### Google Analytics4 を連携
- [公式ガイド](https://support.google.com/analytics/answer/9823238?hl=ja#zippy=%2C%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%86%85%E5%AE%B9)
- [参考記事](https://www.data-be.at/magazine/ga4-bigquery/)
1. Google Analytics4 にアクセスする
1. 左下の歯車「管理」> サービス間のリンク設定 > BigQuery のリンク
1. リンクを押す
1. 先ほど作成した BigQuery プロジェクトを選択し、リージョンも指定する
1. イベントデータで毎日・ストリーミング（継続的に取得）を選択
1. 送信
※ 上記の設定は後で変更可能

BigQueryのコンソールへアクセスして、エクスプローラ内に連結したものがあれはOK

### Google Search Consoleを連携
- [公式ガイド](https://support.google.com/webmasters/answer/12917675?hl=ja)
- [参考記事](https://reposub.jp/blogs/google_searchconsole/google_search_console_bigquery)

#### Google Cloud
1. 上記と同じでBigQuery APIが有効になっていない場合は有効にする
1. サイドバーの IAMと管理 > IAM
1. +アクセスを許可 > プリンシパルを追加
1. 新しいプリンシパルに `search-console-data-export@system.gserviceaccount.com` を指定
　Google Search Console用の公式が提供しているもの
1. ロールを割り当てる（以下二つ）
    1. `BigQuery ジョブユーザー`
    1. `BigQuery データ編集者`
1. 保存

#### Search Console
1. Search Consoleへアクセスする
1. 設定 > 一括データエクスポート
1. Google Cloudの プロジェクトID を入力する
1. データセット名を入力（searchconsoleがデフォルトで変更してもプレフィックスで使われる）
1. 続行

BigQueryのコンソールへアクセスして、エクスプローラ内に連結したものがあれはOK

### Google Ads を連携
- [公式ガイド](https://cloud.google.com/bigquery/docs/google-ads-transfer?hl=ja)
- [参考記事](https://reposub.jp/blogs/bigquery/google_ads_bigquery_export)
#### 権限
1. APIとサービス > 有効なAPIとサービス > +APIとサービスを有効にする
1. BigQuery Data Transfer APIを検索し有効にする

#### BigQuery
1. Google CloudにてBigQuery > データ転送
1. +転送を作成
1. ソースタイプで Google Ads 選択
1. データソースの設定
    1. Google AdsのIDを指定
    1. 転送先の設定でデータセットを選ぶ
    1. 転送構成名（わかりやすいもの）
    1. スケジュールオプションでいつ送るか指定する
1. 保存

BigQueryのコンソールへアクセスして、エクスプローラ内に連結したものがあれはOK

## 問題が起こった時
連結できない時は、権限が足りてない場合が多いです。
Google CloudのIAMを確認してみてください。

### あとがき
あとは連結したデータを取得するクエリを書いたり、Looker StudioなどBIツールを使用してグラフ化したりしていきます。
NPO TOPPERS osek/vdx os open source, kernel

職業訓練
https://qiita.com/kaizen_nagoya/items/95368b63fa21d64271ec

# OSEK/VDX OS
OSEK/VDX OS
https://www.toppers.jp/atk1-download.html

osek/vdx os open source
https://qiita.com/kaizen_nagoya/items/59a4202bcb68e2dfd2b5

osek/vdx os open source, config, h8tiny-renesas, header file
https://qiita.com/kaizen_nagoya/items/b4816501832bc0ad5a1e

# github
kaizen-nagoya/osek
https://github.com/kaizen-nagoya/osek/

# kernel
kernel
https://github.com/kaizen-nagoya/osek/tree/main/kernel
alarm.c
alarm.h
check.h
osctl.c
osek_kernel.h
ecc2
- ent.c
- interrupt.c
- interrupt.h
- osek_kernel_cc.h
- resource.c
- resource.h
- task.c
- task.h
- task_manage.c

## alarm.c
## alarm.h
## check.h
## osctl.c
## osek_kernel.h
.envをpushしてしまったので、GitHub上から完全消去したい話

# 状況
テストのために、`.env.test`を用意していたが、`.gitignore`に追記していたのを忘れたため、リモートリポジトリに上げてしまった。

# したいこと
* リモートリポジトリにある`.env.test`を消したい。
しかし、ローカルリポジトリには残しておきたい。

* (2025/4/30追記) コミットの履歴から`.env.test`を消したい。

# 解決策
１. まずは`.gitignore`に以下を追加します：
```.gitignore
*.env.test
```


2\. ローカルリポジトリの`.env.test`をGitの追跡から削除 

`.gitignore`は、「まだGitに追加されていないファイルを無視するもの」で、一度Gitに追加されているファイルを無視はできないので、追跡対象から外す必要があります。

```.bash
git rm --cached .env.test
```
ローカルリポジトリのファイルは残してリモートリポジトリのファイルのみを消したいときは`--cached`を付ける。


3\. コミットして反映
```.bash
git commit -m "次回以降無視されます"
git push
```

# 結果
* .env.test は GitHub 上から削除される
* ローカルには .env.test がそのまま残る
* 次回以降、.env.test の変更や追加も Git は無視される

# 追記（2025/4/30）:GitHub上から完全削除をするために…
これで確かにリモートリポジトリからは削除されるのですが、過去のコミット履歴から`.env.test`のファイルの中身を参照できてしまいます。完全削除するにはコミットの履歴から`.env.test`を削除し、履歴を書き換える必要があります。

まだだ、まだ終わらんぞ…

# 方針
GitHub 提供するツール「BFG Repo-Cleaner」を使う

※BFG Repo-Cleanerとは
> BFGは、Gitリポジトリの履歴から不要なデータを取り除くための、
> git-filter-branchのシンプルで高速な代替ツールです。
>
> 対応できる主な用途：
> * 巨大なファイルの削除
> * パスワードや認証情報などの機密データの削除
>
> https://rtyley.github.io/bfg-repo-cleaner/ より引用

# コミット履歴から削除する手順

0\. 前提条件
* Ubuntu 22.04 (WSL2上)
* Javaはインストール済み
* 対象リポジトリURL（例）：https://github.com/yourname/repo-exmple.git

1\. 対象リポジトリを mirror モードでクローン
```.bash
git clone --mirror https://github.com/yourname/repo-example.git
```
すると、`repo-example.git`というフォルダができます。
ちなみに、`mirror`モードとは、履歴の書き換えや BFG 実行時に必要な特殊モードでブランチ・タグ・リモートの設定を含む完全なコピーをします。通常の開発では使用しません。

2\. BFG Repo-Cleanerをダウンロード（初回のみ）
```.bash
wget https://repo1.maven.org/maven2/com/madgag/bfg/1.14.0/bfg-1.14.0.jar -O bfg.jar
```

3\. `.env.test` を履歴から削除
```.bash
java -jar bfg.jar --delete-files '.env.test' study-record.git
```

4\. Git履歴をクリーンアップ
```.bash
cd repo-example.git
git reflog expire --expire=now --all
git gc --prune=now --aggressive
```

5\. GitHub へ強制 push
```.bash
git push --force
```

これにて履歴から削除されました。チームなどほかの開発者もいる場合ローカルリポジトリを再クローンする必要があることを共有してください。


# まとめ 
いや、ほんとに気を付けましょう…

# 参考
https://git-scm.com/docs/gitignore
https://rtyley.github.io/bfg-repo-cleaner/
【イベントレポート】なんでもCopilot#27「Power AppsのCopilot作るコパに使うコパ」 #なんでもCopilot

いつも記事を読んでいただきありがとうございます！
モブエンジニア（[@mob-engineer](https://qiita.com/mob_engineer))です！

今回は2025.04.30（水）に開催したなんでもCopilot#27「Power AppsのCopilot作るコパに使うコパ」に参加しましたので、アウトプットとしてイベントレポートを執筆しました。

初見の方でもサクッと読めるように平易な表現で執筆しておりますので、お気軽に読んでいただければ幸いです。

:::note info
誤字脱字、わかりづらい表現、認識相違などは極力なくすように心がけています。そのうえで、リアルタイムで執筆しておりますので、誤字脱字、わかりづらい表現、認識相違などがあるかもしれません。
:::

#### イベントページ

https://nandemo.connpass.com/event/352307/

# 目次
- イベント内容
    - 西さんのニュースコーナー
    - Power AppsのCopilotなんでも作るコパ
- まとめ

## イベント内容

### 西さんのニュースコーナー
    - 三菱商事 AI資格を全社員へ推奨
    - クボタ・サッポロHDでもAI人材育成推進へ
        - （個人的意見）確かに進んでいますよね

### Power AppsのCopilotなんでも作るコパ
- 自己紹介
    - 一般職からSharepoint、C#系の技術者へ転身された方
    - Microsoft MVPの方
    - Power Apps同好会の運営されている
- Power Appsあれこれ
    - RPGボスバトルやパズルゲームも作成できる
        - （個人的意見）ゲームできるんだ！！
- Power Appsあれこれ
    - Power Appsひとつでも様々な機能がある
        - （個人的意見）プラットフォームのような役割なのかしら
- 作る・補助系Copilotアプリ
    - 基本的にBasicオプションで利用可能
    - データ分析系は課金プランで利用可能
    - データワークスペース
        - ざっくり言えば、**自然言語やファイルからサクッとテーブルを作成できる**アプリ
        - （個人的意見）テーブル設計スキルがなくても使えるのはうれしいですね
    - 既存テーブルを取り込むこともできる
        - （個人的意見）リレーション表示がきれいでいいですね
    - プランデザイナー
        - 自然言語でテーブル・ユーザロールを作成することができる
            - （個人的意見）このあたりの機能うれしすぎる
        - GUI操作で簡単にアプリのモックを作成できる
    - ラベル名提案
        - ボタン名を変更したら周辺コンポーネント名の修正提案を行ってくれる
        - （個人的意見）ラベル名に関しても的を得ているので実務でも利用できそうですね
- 使う系Copilotアプリ
    - ユーザー用Copilot
        - 検索や文書生成で利用できる
        - Datavarsをデータベースとして利用するためにはあらかじめ設定をOnにする必要がある
- 入力支援系Copilot
    - スマートペースト機能
        - ざっくり言えば一つフォームに情報を入れれば予測した値を入れてくれる
            - （例）氏名を入れたら、住所・電話番号なども入れてくれる
            - （個人的意見）この機能凄すぎるな👀
        - （個人的意見）機能を活用すればアプリもサクサクできそうですね
    - AI Builder
        - 課金プランになるがカスタム機能追加を実装できる
    - スマートグリッド
        - 複数条件、数式等で検索できる機能（クエリみたいなイメージ）
            - Visualize data（グラフ生成機能）を利用すれば可視化できる
            - （個人的意見）データも良い感じで生成してくれるのね
- まとめ
    - Power Apps内に複数のCopilot機能が存在している
    - うまく使いこなすことでアプリ開発を効率的に行うことができる

## まとめ

Power Appsに関してはプロジェクト内であまり触れてきていないので、知識が不足している状態でしたが、本セッションを聞いてみて学んでみたくなりました。

そのうえで、非エンジニアロールでもPower Appsを利用して簡単なアプリ開発やデータ分析を行う世界がやってくるのかなぁと思いました。個人的にキャッチアップしていかないといけないなぁと思いました。

最後まで記事を読んでいただきありがとうございました！！
まだあった名前のついた素数

こんにちは｜こんばんは。カエルのアイコンで活動しております @kyamaz :frog: です。

## はじめに
去年(2024年)夏休みの頃、名前のついた素数をコレクションしたエントリ『[名前のついた素数コレクション 〜Haskellを添えて〜](https://qiita.com/kyamaz/items/e7ff6b4ee029d971c41e)』を書きました。そこでは、その時点で調べられるだけの素数を取り上げて列挙しましたが、後日単に調べきれなかったものがでてきました。その中には、:frog:の実力不足もあって Haskell のプログラムで書き下せられなかったりもしたものも含まれております。本稿では、さほど多くないですが、プログラムは抜きにして、以前のエントリで紹介されなかった『名前のついた素数』を列挙して紹介しようと思います。

## ホーネッカー素数

<dl>
<dt>定義</dt>
<dd>

せきゅーんさんの記事『[Smith-Honaker数](https://integers.hatenablog.com/entry/2017/08/30/022000)』によると

:::note info
$n$ 番目の素数 $p_n$ がホーネッカー素数であるとは、$S(x)$ を数$x$の各桁の数の総和とすると、$S(n)=S(p_n)$ が成り立つ素数のことです。
:::
最小のホーネッカー数は 131 です。
131 は 32 番目の素数なので

$ S(32) = 3 + 2 = 1 + 3 + 1 = S(131) $

が成り立ちます。
</dd>
<dt>オンライン整数列大辞典</dt>
<dd>

https://oeis.org/A033548
</dd>
</dl>


## ブラックジャック素数

<dl>
<dt>定義</dt>
<dd>

:::note info
$q−p=22$ であるような連続する素数のペア $(p,q)$ のことをブラックジャック素数と呼ぶことがあります。
:::

$p,q$ の間にある整数の数が $21$ 個であることにちなんだ名称です。そのような素数ペアの例をいくつか挙げます。

$(1129,1151),(1951,1973), (2311,2333), (2557,2579), \cdots, (11329,11351) $
</dd>
</dl>


## Google素数 379009

<dl>
<dt>定義</dt>
<dd>

:::note info
$ 379009 $ をさかさまにすると、著名な検索エンジンである GOOGLE に見えることに由来した命名です。
:::

</dd>
</dl>

次のサイトに紹介がされており、発展的に $379 \times 10^{n} + 9 $ の形を持つ素数を『一般GOOGLE素数』として取り上げています。

https://googology.fandom.com/ja/wiki/GOOGLE%E7%B4%A0%E6%95%B0

※このサイトにはこの他にも巨大数にまつわる話題が扱われております。

## マルコフ素数

<dl>
<dt>定義</dt>
<dd>

:::note info
マルコフのディオファントス方程式と呼ばれる式

$ x^2 + y^2 + z^2 = 3 xyz$

の解の一部を与える正整数 $x, y, z$ をマルコフ数といい、マルコフ数であって素数であるものをマルコフ素数と呼びます。
:::

<dt>オンライン整数列大辞典</dt>
<dd>

https://oeis.org/A178444
</dd>
</dl>

この数についても、せきゅーんさんの次のエントリに詳しく解説があります。

https://integers.hatenablog.com/entry/2016/04/20/235500

## スマランダチェ・ウェリン素数

こちらも[せきゅーさんのエントリ](https://integers.hatenablog.com/entry/2015/12/25/000000)から

<dl>
<dt>定義</dt>
<dd>

:::note info
$ 2, 23, 235, 2357, 235711, 23571113, \dots$と 素数を順番につなげていって出来る数のことを スマランダチェ・ウェリン数 といい、その中で素数のものを スマランダチェ・ウェリン素数 と呼びます。
:::

<dt>オンライン整数列大辞典</dt>
<dd>

https://oeis.org/A019518
</dd>
</dl>



## ジェノッキ素数

<dl>
<dt>定義</dt>
<dd>

ジェノッキ数は、次の関係を満たす整数列 $G_n$ です。

$\displaystyle \frac{2t}{1+e^{t}}= \sum_{n=0}^{\infty} G_n \frac{t^{n}}{n!}$

アンジェロ・ジェノッキにちなんで名付けられた数列で、[WikiPedia: Genocchi_number](https://en.wikipedia.org/wiki/Genocchi_number) によると、この数列に現れる素数は、$n=8$ のときの $17$ と、負数ですが $n=6$ のときの $-3$ に限られていることが証明されているそうです。

:::note info
17, -3
:::

</dd>
<dt>オンライン整数列大辞典</dt>
<dd>

https://oeis.org/A001469 ... Genocchi numbers
</dd>
</dl>


## 無名ですが...

名前はついていない素数ですが、

$ 1000000000077700000000001 $

は、真ん中にラッキー７がある運気の良い素数として知られています。
$1000000000000066600000000000001$ が不吉な数として『ベルフェゴール素数 』という名前がついていますが、それとはほぼ反対の意味となる素数です。

なお、$ 10\dots (n\textrm{-} 0's) \dots 07770 \dots (n\textrm{-} 0's) \dots 01$ が素数となる$n$ は $n=10,13,82,100,119$ があります。

さらに、奇跡の素数として、次の記事を紹介して本稿を締めたいと思います。

https://qiita.com/greymd/items/3167325ed7eb3ceb3272

## おわりに
いかがでしたでしょうか。

本稿と以前の寄稿と合わせて『名前のついた素数』をとりあげました。（ChatGPTに聞いてみて、概ね取り上げたつもりですが）:frog: が探せていないものがもっとあるように思います。そのような素数に巡り合ったら、またの機会に紹介できたらと思います

ご一読いただきまして有り難うございます。
（●）（●） Happy Hacking!
/""　＿＿""＼
Gitを利用したObsidianの同期(windowsとAndroid)で詰まったのでメモ

ざっくりとしたメモです あとで追加するかも

アクセストークンは作成、メモしておく
→アクセストークンはスマホ側でしか使用しなかった

1. private リポジトリを作成する
2. ローカルにクローンしてくる
3. Obsidianをインストール
4. 保管庫を開くを選択、クローンしてきたのを選択
5. (windows) Gitのプラグインを入れて、Optionからusernameとemailを入力
6. (以下Android) 適当な名前でVaultを作成、Gitプラグインを入れる
7. command paletteからgit cloneする
8. GitプラグインのOptionからusernameとアクセストークンを入力

Git source controlからcommit(✔), push(↑), pull(↓)できればok

※2025/05/27追記　
余談ですが、スマホから操作するとコンフリクトが起きやすいのと、解消が面倒だったのでスマホ側ではgit同期をやめました
代わりに以下のプラグインを使用しています。
[Obsidianモバイルの「面倒」をLINEで解決！プラグイン「LINE Notes Sync」導入＆活用ガイド](https://note.com/shotovim/n/n55c363144d86)
Flutter案件に入って戸惑った2つのこと

## はじめに

最近Flutter案件に参加して、コードを読みながら「え、なにこれ？」と感じたポイントがいくつかありました。  
最初につまづいた2つのこと、

- `@override` の意味と使い方
- `for文` と `map()` の使い分け

について、Flutter初心者目線で整理してみます。


## 1. `@override` って何者？

Flutterでは、`@override` がよく使われています。  
最初は「なんでわざわざ書くの？書かないと動かないの？」と疑問でした。

### ✅ 結論：親クラスの機能を**上書きする宣言**

たとえば、`StatefulWidget` の中で使う `initState()`。  
これは実は「親クラス（State）で定義された関数」で、自分のクラスにカスタム処理を入れたいときに上書き（override）して使います。

```dart
@override
void initState() {
  super.initState(); // ← 親のinitState()もちゃんと呼ぶ
  // 自分の処理
}
```

### 💡 `@override` があるといい理由

- 親にちゃんとある関数かどうか Dartがチェックしてくれる
- 読み手にも「上書きしてるな」と一目でわかる

つまり `@override` は「**安全のための宣言**」みたいなものです。  
書かなくても動くことはありますが、書いた方がいいらしいです。


## 2. Flutterで `for文` が多用されていて驚いた話

Flutterでは、リストを使って複数のWidgetを並べる場面がめちゃくちゃ多いです。  
入った案件ではこんなコードを見かけました。

```dart
List<Widget> widgets = [];
for (var item in items) {
  widgets.add(Text(item));
}
```

これは動きますが、Flutterらしい書き方ではないそうです。

---

### ✅ Flutterの基本は `map()`＋`toList()`

```dart
final widgets = items.map((item) => Text(item)).toList();
```


さらに `...`（スプレッド演算子）と組み合わせると、もっとFlutterっぽくなります：

```dart
Column(
  children: [
    Text('リスト：'),
    ...items.map((item) => Text(item)).toList(),
  ],
);
```

TypeScriptユーザーの僕からしたら直感的な書き方です！
blenderチュートリアルにトライしてみた２


第二弾となりました。
焦りはあれど数をこなすしかないなと思いながら今月もblenderです。
Unityでいろいろ動かせるようになりたいなと思いつつ、まず動かすものを作れるようになりたいなという次第です。
PCのスペック問題でLightingなど変更し始めるとなかなかに重いです……。

[さあ、blenderでクマのキャラクターを作ろう！初心者向けチュートリアル](https://youtu.be/WPYuwaWaNVA?feature=shared)

### テクスチャスロットはいずこ
今回はスムーズにいったんですが、チュートリアル動画とblenderのバージョンが違って、テクスチャスロットを探しました。
ツールのどこかにあるかなと思いきや画面上部に大移動していましたね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/89f46a73-1417-4ca6-be80-343413fab3d2.png)

下記を参考に発見しました
[Blenderのテクスチャスロットがない？3系と4系のUIの違いを解説](https://blender.inuinukaukau.com/blender-texture-slot-missing#index_id1)


### カメラと自分の視点を合わせる
これは便利ですね……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/7f2b683a-16e7-4fe0-9acb-78acc18bc623.png)



### 完成
renderingの重さがネックでしたが、なんとかクマの形になりました。
![bear.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3811577/a48f2295-da22-4a4b-b1b5-c7afadb8fec6.png)
NPO Toppers/osekvdx os をuploadした。

OSEK/VDX OS改訂提案を作る
https://qiita.com/kaizen_nagoya/items/4229a8ac0baec836261a

OSEK/VDX OSは、C言語で記述している。
Cの精神をひきついでいる。

osek
https://github.com/kaizen-nagoya/osek

どのように扱うかはこれから。

osek/vdx os open source
https://qiita.com/kaizen_nagoya/items/59a4202bcb68e2dfd2b5

osek/vdx os open source, config, h8tiny-renesas, header file
https://qiita.com/kaizen_nagoya/items/b4816501832bc0ad5a1e

osek autosar oil
https://qiita.com/kaizen_nagoya/items/2df939e15e6282d5c380

# Ref.
toppers 3分岐
https://qiita.com/kaizen_nagoya/items/18e772db71a763b919a4

osek/vdx osekをuploadした。
https://qiita.com/kaizen_nagoya/items/6bc7eb2ec635e88afd5a

osek
https://github.com/kaizen-nagoya/osek

edu jsp toppers edu jsp
https://qiita.com/kaizen_nagoya/items/5561df93c7e156573fd2

kernel
https://github.com/kaizen-nagoya/toppersedujsp/tree/main/kernel

ssp toppers/ssp upload
https://qiita.com/kaizen_nagoya/items/cffa0aaf2c029cef7334

Github
https://github.com/kaizen-nagoya/toppersssp
QualysでのMAPスキャン機能について

## はじめに
本記事はQualysでMAPスキャンを行いMAP表示させるための方法についての記事になります。
MAPスキャン時にセグメントを指定してスキャンを行う方法を使うことで、管理できていない端末などを見つけることができます。
※IPアドレスが無い機器は見つけることはできません。
## 前提
・Qualysの操作権限があること
・スキャン対象があること

## none domainファイルの編集
スキャン対象をアドレスレンジで指定するため、none domainのファイルを編集します。
「Assets」→「Domains」→「none」を選択してプルダウンメニューから「Edit」を選択します。

![Qualiys1スクリーンショット 2025-04-30 144457.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/92fe0378-4040-4432-93a7-e72ddec35f37.png)

![Qualys1スクリーンショット 2025-04-30 150624.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/702b53e1-6e4f-4706-842f-e2a4527f3e32.png)

「Edit」を選択後「Associated Netblocks :」の部分に指定のIPアドレスレンジを記載して下の「SAVE」を押下します。
これでnone domainファイルの編集は終了です。
※記載するレンジが複数ある場合は「,(カンマ)」を使って区切ってください。

## MAPスキャン機能を使って、MAP表示させる
次にMAPスキャンの設定を行います。
「Assets」→「Maps」→「New」→「Map」を選択します。

![Qualys1スクリーンショット 2025-04-30 142927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/1eda694b-a9b2-4df4-96e4-7c6e8a00ec4b.png)


![Qualys1スクリーンショット 2025-04-30 142947.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/aa3afada-a3c7-40d6-a508-b855be71bac7.png)


![Qualis1スクリーンショット 2025-04-30 143013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/8dc46b11-2fa7-46c0-bf78-e1b485d34c8a.png)

①名称
②オプションプロファイルを選択(ここではデフォルトを選択します)
③スキャナーを選択
④ドメインを選択する際に、右の「Select」から先ほど編集した「none domain」を選択して「Add」を押下します。
入力が完了したら「Lunch」を押下します。
![Qualiys1スクリーンショット 2025-04-30 143037.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/cc5bc078-d4c0-4b4a-b4b3-b98861e1b077.png)
作成には少し時間がかかります(30分程度)。
MAP画面のStatusが「Finished」となればMAPスキャン完了です。
※ステータス繊維は「Queued」→「Running」→「Finished」となります。

![Qualiys1スクリーンショット 2025-04-30 143129.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/220a0a97-f108-40c8-baba-090c49be7b6a.png)

作成したMAPを選択し「Action」→「View Graphic Mode」を選択するとMAPスキャンで作成されたMAPが表示されます。
![Qualiys1クリーンショット 2025-04-30 143235.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3677761/a10d37b5-3282-4a53-9d7f-969eaab1fa59.png)


## まとめ
QualysのMAPスキャンは、資産の可視化やスキャン対象の把握に有効であり、脆弱性管理とは別の観点からも非常に便利な機能であると感じました。
いくつかオプション設定もあるため、今後は活用例や便利な使い方についても記事化して共有していきたいと考えています。
最新のゲーミングPC何を選びますか？（PRではありません）

## はじめに

友人から配信可能なゲーミングPCの相談を受けました。予算や希望するゲームジャンルを考慮し、最適な構成を検討してみました。この記事では、その検討内容と選定した構成を紹介します。

## 友人からの依頼内容

友人からは以下のような希望がありました：

- TwitchかYouTubeで配信ができること
- ノベルゲーム、パズルゲームを主にプレイ予定（Ibなど）
- FPSやハイスペック3Dゲームはあまりやらない予定（可能性があるのはOW、VALORANT）
- SF6のような格闘ゲームもプレイしたい可能性あり
- 予算は20〜30万円（できれば25万円以下）

## 前提条件の整理

- OBSを使用して配信しながらゲームプレイを行う
- 負荷の高くないゲームが主だが、SF6などの格闘ゲームも視野に入れる
- 配信とゲームを同時に行うため、ある程度の余裕が必要

## スペック検討

### CPU（配信+ゲームの両立に強いもの）
- **Intel Core i7-14700K** または **AMD Ryzen 7 7800X3D**
  - 配信とゲームの同時処理に十分なコア数とクロック数

### GPU
- FHD（1080p）であれば **RTX XX60Ti** クラスで十分
- QHD（1440p）で快適にプレイしたい場合は **RTX XX70** 以上が望ましい
  - 解像度が高くなるほど必要なGPUパワーも増加

### メモリ
- **32GB（16GB×2）**
  - 配信+ゲームの同時使用には最低限このくらい必要

### 電源
- 最低でも **750W 80PLUS Gold** 認証
- 余裕を持たせるなら **850W** が安心

### CPUクーラー
- 空冷でも可能だが、できれば **簡易水冷（240mm）** を推奨

## BTOショップ比較

### 候補ショップ
- フロンティア（コスパ◎）
- ドスパラ（納期早い）
- パソコン工房、マウスコンピューターは構成の関係で除外

## 具体的な構成と見積もり

### 1. ドスパラ構成
[商品リンク](https://www.dospara.co.jp/TC30/MC16790-SN4874.html)

**基本構成**
- CPU: Core i7-14700F
- GPU: GeForce RTX 4060Ti

**カスタマイズ**
- メモリ: 32GB
- SSD2: 1TB
- 電源: 850W (80PLUS GOLD)
- CPUクーラー: (水冷式) ASETEK 624S-M2

**合計金額: 258,880円**

### 2. フロンティア構成①
[商品リンク](https://www.frontier-direct.jp/direct/g/g121121-Apr4/)

**基本構成**
- CPU: Core i7-14700F
- メモリ: 32GB (16GB x2)
- GPU: NVIDIA GeForce RTX 5060 Ti

**カスタマイズ**
- CPUクーラー: 水冷CPUクーラー
- SSD[2nd]: 1TB
- 電源: 850W

**合計金額: 242,800円**

### 3. フロンティア構成②
[商品リンク](https://www.frontier-direct.jp/direct/u/g121093-Apr4/)

**基本構成（カスタマイズなし）**
- より高性能な構成がすでに組まれている

**合計金額: 279,980円**

## まとめ

予算と必要性を考慮すると、**フロンティアの構成①**（242,800円）が最もバランスが良いと思われます。

- 予算内（25万円以下）に収まる
- 配信に必要なCPUパワーを確保
- メモリも十分（32GB）
- 水冷システムで安定性を確保
- 電源も850Wと余裕がある

これらの構成はあくまで私の判断ですので、他にも良い選択肢はあると思います。皆さんの知見やおすすめ構成があれば、ぜひコメントで教えてください。今後の参考にさせていただきます。

また、無線LANやDVDドライブは含まれていませんので、必要であれば別途検討が必要です。

---

*※この記事は特定メーカーのPRではなく、個人的な見解に基づいています。*
Excelで“チャット風UI”を自作。在庫管理がちょっと楽しくなった話

はじめに
「Excelって、チャットUIみたいな見た目で操作できたら面白いかも」そんな思いつきから、今回の取り組みがスタートしました。単純な工数・在庫管理シートに飽きていた私が、遊び感覚で作ったものです。作ってみたら意外と楽しく、学びも多かったので記事にまとめてみました。

![1000058935.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311160/59c47743-a057-41d4-b094-bbbb983cd4c0.jpeg)

▲商品データとチャットUIを並べた画面。質問に応じて自動回答。
機能紹介
作成したチャットUIには、以下のような機能があります：
- 質問を入力してEnterを押すと、該当商品の価格や情報を返す
- 会話が吹き出し形式で表示される
- 各メッセージに時間が表示され、既読も表示される
- アイコンはExcel内の図形から読み込み、左に表示
- チャットログは自動的にシートに保存され、5001件を超えると上書き


技術的なポイント
VBAのみで構築している点がポイントです。
・吹き出しUIはLabelコントロールで実装し、高さは文字数に応じて自動調整
・画像はShapesからコピーし、一時的にJPEG保存してImageコントロールに表示
・質問に「価格」や「情報」が含まれるかどうかを判断し、複数列を参照して回答生成
・ラベル位置や時間、既読の位置は定数で調整可能にしてカスタマイズ性を確保
・チャットログは「チャットログ」シートにA〜D列で保存し、5001件超えると2行目を削除

![1000058936.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311160/b12485ac-3980-4647-9fb0-d4b57c26281e.jpeg)


▲ 実際にチャットで質問し、情報を返している様子
コード解説：回答取得の部分
questionText = Trim(Me.TextBox1.Value)
If questionText = "" Then Exit Sub
この部分では、テキストボックスに入力された文字列の前後の空白を削除し、空なら処理を中止します。空のメッセージを送らないようにする基本的な入力チェックです。
Call CreateChatBubble(Me.Frame1, "あなた：" & vbCrLf & questionText, True)
ユーザーからの入力テキストをチャット形式で吹き出しにして表示する処理です。左側に吹き出しが表示されます。
startTime = Timer
Do While Timer < startTime + (0.5 + Rnd)
    DoEvents
Loop
へたれくんの回答に対して“少し考える時間”のような演出をするため、0.5〜1.5秒の間でランダムに待機時間を入れています。
answerText = GetAnswerFromDatabase(questionText)
ユーザーの質問テキストをもとに、商品シートから該当する情報を検索して回答を作成する関数です。
Call CreateChatBubble(Me.Frame1, "へたれくん：" & vbCrLf & answerText, False)
へたれくん側の吹き出しを作成し、検索で得られた回答を右側に表示します。
GetAnswerFromDatabase関数では、商品シートの各列を検索し、質問文に一致する型式や商品名が見つかれば、その行の内容から情報を組み立てて返します。
価格だけでなく「情報」というキーワードがあれば、分類・商品名・型式・価格・備考まで出力します。

![1000058937.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311160/28be3e30-0d3e-4cf3-be04-8f802c7fec24.jpeg)

▲ VBAでの検索処理のコード例。If文で価格や情報の抽出を判定
裏側の処理
ユーザーフォーム内の吹き出しラベルは、Frame内に追加する形で作成されます。
ユーザーの発言には画像（アイコン）を表示し、チャットのような見た目を再現。
へたれくんの返信には「既読」「時間」の表示をラベル下に追加。
この表示位置もコード内の定数で数値調整できるようになっています。

![1000058938.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3311160/c9072166-fd05-4b40-ba95-a234957b1406.jpeg)

▲ チャットログも残せるようにしました。
動画で見たい方はこちら
実際の操作を動画でも紹介しています。
▶ YouTube: https://youtu.be/xBJDva6MFoY?si=oRoKcnM0D8xM9jWL
おわりに
ExcelのVBAでも、ここまで遊び心のある機能を作ることができます。
正直、実務での活用は限定的かもしれませんが、業務効率よりも「ちょっと楽しい」を取り入れることで、毎日の仕事に少し笑顔が増えるかもしれません。
もし気になったら、ぜひマネしてみてください！
2025年のPyScript事情

## 概要

ブラウザでPythonを実行するプロジェクトであるPyScriptですが、Googleで検索すると2022年の登場時の話ばかりが目につく気がしており、2025年現在はどうなっているのか、自分の知る限りを列挙してみました。

## MicroPythonサポート

PyScript登場当初は、CPythonのWasm移植版であるPyodideを使いやすくするためのライブラリであり、Pyodideしか利用できませんでしたが、現在ではMicroPythonのWasm版も選択できるようになっています。

MicroPythonは組み込み向けのPythonであり、一部の機能やライブラリが存在しなかったり、モジュールのインストールが不可能だったりしますが、組み込み向けであるため、ページを開いてからスクリプトが動作するまでの時間がPyodideに比べて明らかに速いです。

[リリースノート](https://pyscript.net/releases/2025.3.1/)を見ると、ロード直後にMicroPythonのバージョン（3.4.0; MicroPython v1.24.1 on 2024-11-30）が表示され、その後しばらくしてからPyodideのバージョン（3.12.7 (main, Feb 26 2025, 08:15:59) [Clang 19.0.0git (https://github.com/llvm/llvm-project 0a8cd1ed1f4f35905df318015b)]）が表示される様子が確認できます（表示はバージョン2025.3.1時点のもの）。

正直、ブラウザ周辺のPythonライブラリはまだ充実しておらず、結局はJavaScriptライブラリに頼ることが多い印象です。そのため、CPythonの機能やモジュールを使わないのであれば、MicroPythonでJavaScriptライブラリを活用する構成で十分な気がしています。

どうしてもPyodideを使う必要がある場合でも、Web Workersを使えば[複数のランタイムを連携させて動作させることが可能](https://docs.pyscript.net/2025.3.1/user-guide/workers/#common-use-case)です。最初はMicroPythonで起動し、DOMや外部JavaScriptライブラリでUI周りを制御し、Worker経由でPyodideを動かすという構成が最も無難だと感じています。

## scriptタグのサポート

PyScript登場時は、`py-script`という独自タグ内にコードを書く必要がありましたが、IDEのサポートやブラウザ制御の都合により、2025年現在ではHTML標準の`script`タグでも記述可能になっています。

現在でも`py-script`タグは使用可能ですが、[公式ドキュメントのFirst steps](https://docs.pyscript.net/2025.3.1/user-guide/first-steps/)では`script`タグによる記述が推奨されており、ページ下部には`script`タグサポートの経緯が記載されています。

## トップレベルは非同期評価で動作（Top-level await）

登場当初はトップレベルのコードが同期的に評価されていましたが、現在では非同期評価がデフォルトとなっています。詳細は[公式ドキュメントのFirst steps](https://docs.pyscript.net/2025.3.1/user-guide/first-steps/)に記載されています。

## Pygame-ceサポート

2025年に入り、[Pyodideが公式にPygame-ceをサポート](https://blog.pyodide.org/posts/0.26-release/#pygame-ce-support)したことにより、PyScriptでも[Pygame-ceが利用可能](https://docs.pyscript.net/2025.3.1/user-guide/pygame-ce/)になりました。ただし、2025年現在ではいずれもまだ実験的段階であることが明記されています。

この話がきっかけで知ったのですが、Pygameコミュニティは現在、PygameとPygame-ceに分裂しているようです。

ループの際にブラウザに制御を返す必要があるため、[非同期関数内でループを回し、毎回`asyncio.sleep`関数を呼ぶ必要がある](https://pyodide.org/en/stable/usage/sdl.html)ようです。そのため、オリジナルのPygame-ce(Pygame)のコードがそのまま動作するわけではないようです。

## 明示的にバージョン指定が必要になった

初期は`latest`で最新の安定版を指定することが可能でしたが、2023年からこの方針は撤回され、現在は`2025.3.1`のように明示的にバージョンを指定する必要があります。その理由は[FAQ](https://docs.pyscript.net/2025.3.1/faq/#pyscript-latest)に記載されています。

## 個人的感想

ブラウザ上でPythonを動かすだけであれば、Jupyter Lab（Google Colab）で十分な場合が多く、個人的にはPyScriptの使いどころはブラウザゲームやモバイルアプリ（Ionic Framework/Capacitor経由）だと感じています。そういった分野の記事を書いていこうかと考えているところです。
webアプリ my-favorite-list 一覧機能

# 一覧

したこと：ページネーションと詳細

# 流れ

views.py -> urls.py -> anime_list.html
フォームの基礎 -> 選択肢 -> 見た目 -> urlの設定 -> html(ユーザーの見た目)

# 役割

views.py(データをhtmlに渡すため)/ urls.py(urlの設定)/html(ユーザーに見せる)

# ポイント：urlの指定

ページネーションでは<int:pk>を使わない理由 = 一意ではないため。（その特定の情報）
例えば：アニメの「君の名は。」は一意
	アニメのページネーションでの2/80ページ目は特定できない

ページネーションとは：データを複数のページに分割する
例えば：アニメのデータが1189件あった場合、15 * 80 ページにする

## views.py

- dbからアニメのデータを全て取得
- paginatorクラスでデータを分割
- ユーザーのリクエストが渡してきたパラメータを取得（ページの取得）
- パラメータからページのデータのみを取得(urlを簡単にする) -> データをhtmlに渡す

```python
def anime_list(request):
	anime_queryset = Anime.objects.all()
	paginator = Paginator(anime_queryset, 15)
	page_number = request.GET.get('page')
	page_obj = paginator.get_page(page_number)
	return render(request, 'myapp/anime_list.html', {'page_obj' : page_obj})
```

## urls.py

- urlは指定しなくても変わる(ページネーションとか、その特定のデータではない場合)

```python

path('anime/', views.anime_list, name='anime_list'),
```

## html
- ul内でデータの受け渡し
- ページネーションで前後ページの有り無しで場合分け
- urlでボタンを作る(homeボタン等)

```python
<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>anime_list</title>
    <link rel="stylesheet" href="{% static 'myapp/css/anime_list.css' %}"> <!-- 修正済み -->
</head>
<body>
    <h1>アニメ一覧</h1>
    <ul>
        {% for anime in page_obj.object_list %}
            <li>
                <a href="{% url 'anime_detail' anime.id %}">{{ anime.title }}</a>
            </li>
        {% endfor %}
    </ul>

    <!-- ページネーションのリンク -->
    <div class="pagination">
        {% if page_obj.has_previous %}
            <a href="?page=1">最初</a>
            <a href="?page={{ page_obj.previous_page_number }}">前へ</a>
        {% endif %}

        <span>ページ {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">次へ</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">最後</a>
        {% endif %}
    </div>

    <!-- リンクボタン-->
    <div class = "group">
        <a href="{% url  'anime_form' %}" class = "button">追加</a>
        <a href="{% url  'anime_search' %}" class = "button">検索</a>
        <a href="{% url  'home' %}" class = "button">Home</a>
    </div>
</body>
</html>
```