OmniAICreator/Qiita-1.07M huggingface dataset:
【自作アプリ】草野球の募集掲示板を作成してみた

# はじめに
はじめまして、yamamotoooonと申します。
今回は個人製作アプリとして草野球の募集掲示板を作成しました。その中での技術選定やよかった点、また悪かった点などを記録としてまとめます。これがどなたかの参考になれば幸いです。

**実際のURL**

https://yakyumare.org

触ってみていただけると嬉しいです。

# 前提

### なぜ草野球の募集掲示板を作成したのか？

以下の理由で草野球の募集掲示板をテーマに選びました。

1. 0→1での開発経験を積む
当時は上流工程の経験が浅かったため、技術選定やアーキテクチャ設計の経験を積みたかった。

2. CI/CDを個人プロジェクトで活用
当時参画していたプロジェクトでJenkinsを使用しており、それ以外のCI/CDツールを触ってみたかったため。

3. UIの良い草野球の募集掲示板が欲しかった
自分自身が草野球をしており、広告がなく、直感的で見やすい募集掲示板が欲しかった。


# システム概要
![システム概要.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3876674/aca20bc8-ac74-6615-7e2b-f9fb28a0b3d1.png)

簡単なシステム構成図は上記の通りです。バックエンドとフロントエンドを分離し、デプロイ環境に適した設計を心掛けました。

# 選定技術
個人製作において最も重要な課題の一つはコストだと思います。
理想はAWSやGCPでのホスティングでしたが、費用面で断念しました。そのため、既存のリソースを活用する方向で進めました。

## バックエンド
### Laravel/PHP

+ 選定理由
一度クローズドのWEBアプリを個人製作した際、さくらサーバーにLaravelをデプロイした経験がありました。さくらサーバーは既に契約しているので、ほかの言語触ってみたいという気持ちを押し殺し今回もバックエンドはLaravelに決めました。

さくらサーバーにLaravelをデプロイする際、参考にさせていただいた記事

https://qiita.com/Riooon/items/5b36eb94129568b008f5

+ 振り返り
普段バックエンドはJavaばかり触っていて、PHPは久しぶりに触ったのでなかなか苦労しました。
言語やFWの特徴を考慮した設計が必要だと改めて実感しました。
サービスとリポジトリの依存度が高すぎる形になってしまったことが反省点です。(ソースもいずれ修正していきたいと思います)

## フロントエンド
### Vue/TypeScript
+ 選定理由
当時プロジェクトでVueを使用しており、スキルをさらに伸ばしたかったため。
TypeScriptを導入することで、型定義による開発効率向上を図ることができたため。

+ 振り返り
せっかくなのでNuxtにしておけばよかったなと思いました。
あとは状態管理がうまくいっていないこと(修正したい)、
IPhoneで実機確認ができなかったためリリースしてからいくつか問題を発見しました。
CORSやsamesiteあたりにも苦しめさせられました。

# CI/CD

### GitHub Actions
productionブランチプッシュ時
さくらサーバーにSSHで接続し、pull
migrationファイルが追加された場合はartisan migrateを実行

こちらは別途記事を執筆したいなと考えています

[まだ書いてない]()

# その他サードパーティーなど

### PUSHER
チャット機能があったためwebsocketを使用するために使いました。
websocketは今まであまり触ったことがなかったので勉強になりました。

**完全に理解した記事(理解していない)**

https://qiita.com/yamamotoooon/items/e87b2f2b4b6b2663724d

### Google OAuth

ユーザビリティを考えたときにサードパーティーでのログインが1つは必要だと思いました。
個人的にも経験がなかったので勉強になりました。
自分で使ってみても便利だなと思ったので実装してよかったです。
toCのアプリであれば今の時代は必須なのかなと思います。

### FCM (Firebase Cloud Messaging)

WEBプッシュ通知は実装したいと考えていたので、FCMを選びました。
ただ、safariではPWAインストール後ではないと使えないことや、PWAとしてインストールできるのかどうか視覚的にわかりにくい部分からiosでのPWAはまだ実用的ではないと感じました。

**HTTP v1での実装について**

https://qiita.com/yamamotoooon/items/331ebdf4ca9a6ce80cd8

# よかった点

触ったことのない技術などをモリモリに使ったのでかなり学びがありました。
スクラッチでの開発経験は少なめ、ない方にとっては個人開発を1度本気でやってみるのはありだと思います。
また、自分の好きなもの、作りたいものを作成できたので非常に楽しかったです。

# 悪かった点

知らない技術などが多かったため、後から見直すとあまりよろしくない実装が多々あります。
一応一般公開しているアプリとしては低いクオリティになってしまったことが反省点です。
もっとしっかりリサーチをすべきだったと思います。

# さいごに

だらだらとしたポエムになってしまいましたが読んでいただきありがとうございました。
これが誰かの個人開発の参考になってくれたらうれしいです！
【リーダブルコード】初心者エンジニアが読み解く「誤解されない名前」の付け方 - 第3章

こんばんは！マル太です。

前回は、リーダブルコードの第2章「名前に情報を詰め込む」についてまとめました。

今回は、第3章「誤解されない名前」の内容を、私なりに解釈し、アウトプットしていきたいと思います。
<br>

# 誤解されない名前をつけることの重要性
コードを書く上で、変数や関数に誤解されない名前をつけることは非常に重要です。

誤解を招く名前をつけてしまうと、コードを読む人が間違った解釈をしてしまいます。
バグの発生に繋がってしまうかもしれません。

特に、複数人で開発を行う場合は、名前の解釈が人によって異なることが多いため、注意が必要です。
<br>

# 誤解されない名前をつけるための具体的なテクニック
3章では、誤解されない名前をつけるための具体的なテクニックとして、以下の点が挙げられています。
<br>

**明確な単語を選ぶ**
・例えば、`filter` という単語は、「選択する」という意味と「除外する」という意味の両方があります。
・そのため、`filter` ではなく、 `select` や `exclude` のように、より具体的な単語を使う方が、誤解を防ぐことができます。
<br>

**限界値には `max` や `min` を使う**
・限界値を表す変数には、 `max` や `min` を接頭辞としてつけることで、その変数が限界値であることを明確に示すことができます。
・例えば、 `MAX_ITEMS_IN_CART` や `MIN_PASSWORD_LENGTH` のように名前をつけると、誤解を防ぐことができます。
<br>

**範囲を指定するときは `first` と `last` を使う**
・範囲を指定する変数には、 `first` と `last` を使うことで、範囲の開始と終了を明確に示すことができます。
・例えば、 `first_day_of_month` や `last_day_of_month` のように名前をつけると、誤解を防ぐことができます。
<br>

**包含/排他的範囲には `begin` と `end` を使う**
・範囲に開始値が含まれるか、終了値が含まれるかを明確にするために、 `begin` と `end` を使い分けましょう。
・例えば、 `begin_time` と `end_time` のように名前をつけると、誤解を防ぐことができます。

※包含/排他的範囲って？
ある範囲に、値が「含まれる」か「含まれない」か をはっきりさせるための考え方です。
包含範囲: 始まりの値と終わりの値、両方とも範囲に含まれます。
排他的範囲: 始まりの値は範囲に含まれますが、終わりの値は含まれません。
<br>

**ブール値の名前は `is` から始める**
・ブール値（真偽値）を表す変数や関数には、 `is` から始まる名前をつけることで、その変数や関数がブール値を返すことを明確に示すことができます。
・例えば、 `is_adult` や `is_valid` のように名前をつけると、誤解を防ぐことができます。

※ブール値って？
ブール値は、プログラミングにおいて、真（true） または 偽（false） のいずれかの値を取るデータ型のことです。
<br>

**スコープを意識する**
・変数や関数のスコープ（有効範囲）を意識することで、誤解を防ぐことができます。
・例えば、グローバル変数とローカル変数を区別するために、グローバル変数には `g_` などの接頭辞をつけることができます。

※スコープって？
スコープは、プログラミングにおいて、変数や関数などの名前が有効な範囲 を指します。つまり、ある変数や関数をどこから参照できるのか、その範囲を定めるものです。

※グローバル変数って？
グローバル変数とは、プログラム全体でどこからでもアクセスできる変数のこと。関数内やクラスの外など、プログラムのどの部分からでもその変数の値を参照したり、変更したりすることができます。

※ローカル変数って？
ローカル変数とは、特定の関数やブロック内で定義され、その範囲内でしか有効な変数のこと。関数やブロックの外からはアクセスできません。
<br>



**ユーザの期待に合わせる**
・システムを使うユーザが、どのような名前を期待しているかを考慮して、名前をつけましょう。
・ユーザが慣れ親しんだ用語や表現を使うことで、誤解を防ぐことができます。

※ユーザって？
ここでいう「ユーザ」は、システムを操作したり、プログラムを作成するプログラマーや開発者を指しています。

<br>

# まとめ

今回は、「リーダブルコード」第3章「誤解されない名前」の内容をまとめました。

誤解されない名前をつけることは、コードの品質向上に大きく貢献するということをこの章で学ぶことができました。

3章で紹介されているテクニックを参考に、誤解を防ぐ名前をつけることで、より信頼性の高いシステムを構築していきたいですね！

次回は、第4章「美しさ」についてまとめます。
python pandas

# Pandasまとめ

## データフレームの作成
```python
# 空のデータフレームを作成（カラム名を指定）
df = pd.DataFrame(columns=["ユーザID", "名前", "スコア"])
```

## 既存のExcelファイルに追記（シートを追加） 
```python
with pd.ExcelWriter("output.xlsx", mode="a", engine="openpyxl") as writer:
    df.to_excel(writer, sheet_name="追加シート", index=False)
```

## ファイルの読み込み
```.py
import pandas as pd
df = pd.read_excel("data.xlsx")
```
カラム名を指定してインデックスに使用
```.py
df = pd.read_excel("data.xlsx", index_col="ユーザID")
```
シート名を指定
```.py
df = pd.read_excel("data.xlsx", sheet_name="Sheet1")
```

CSVやJSON等でも読み込める
```.py
df = pd.read_csv("data.csv")
df = pd.read_json("data.json")
```

## カラム名を取得
```.py
df.columns
```
例：`Index(['会社名', '商品名', '単価', '数量', '売上'], dtype='object')`

## 行名を取得
```.py
# 行名
df.index
```
例：`RangeIndex(start=0, stop=10, step=1)`


## 特定のカラムを取得する
```.py
df["カラム名"]
```

## データ型を取得する
```.py
df.types
```

## サイズを取得する
```.py
df.shape
```

## 先頭の行を取得する
```.py
df.head
```

ちなみに引数に数字を指定すると、その指定した数分取得することができる
```.py
# 先頭から3行取得する
df.head(3)
```

## 末尾の行を取得する
```.py
df.tail
# headと同じく引数を設定
df.tail(3)
```

## loc
locを使用することで`行や列を指定してデータを取得`することができる
### 基本形
```.py
df.iloc[行番号, 列の名前]
```

### 行番号と列の名前を指定
```.py
# 1列目と2列目の名前と年齢を取得する例
df.loc[[1, 2], ["名前", "年齢"]]
```
## コロンを使用することで範囲指定も可能 
以下は1行目から3行目と名前から年齢までを取得する例
```.py
df.loc[1:3, "名前":"年齢"]
```
## 条件を指定
条件を再度、`df`で囲む
```.py
df[df["年齢"] > 30]
```

queryでも可能
```.py
df.query('年齢 > 30')
```
## かつ条件を指定
```.py
df[(df["年齢"] > 30) & (df["名前"] == "高橋")]
```
queryでも可能
```.py
df.query('年齢 > 30 & 名前 == "高橋"')
```
## または条件を指定
```.py
df[(df["年齢"] > 30) | (df["名前"] == "高橋")]

## ユニークな値を取得
```.py
df['名前'].unique()
```

## 重複削除
全て一致の場合は引数が必要ないが、そうでない場合はセットする
```.py
df.drop_duplicates(subset='名前')
```

## 全ての行や列を取得
```.py
df.loc[:, :]
```
## iloc
ilocを使用することで行や列をインデックスで指定してデータを取得することができる 

### 基本形
```.py
df.iloc[要素番号（インデックス）, 要素番号（インデックス）]
```

# 行と列を取得
値の指定がややこしい。。。
```.py
# 5行目から10行目と2列目から5列目まで取得
data_frame.iloc[[4:10], [2, 6]]
```
## 統計量を調べる
numberic_only=Trueを指定することで数値のみの列を取得することができる
```.py
data_frame.mean()
data_frame.median()
data_frame.max()
data_frame.min()
data_frame.sum()
```

# 列単位で演算・加工
```.py
data_frame["年齢"] + 10
data_frame["年齢"] * data_frame["値"]
data_frame["新しい列"] = data_frame["年齢"] + 10
data_frame["新しい列"] = data_frame["名前"] + "さん"

pd.DataFrame([1, 2, 3, 4, 5], columns=["col1", "col2", "col3", "col4", "col5"], index=["a", "b", "c", "d", "e"])
```

# まとめ
以上がpandasを使った基本的な操作になります！
ただ、自分は複雑な操作をしたことがないので、「これも便利だよ〜」とかあればぜひ教えていただけると嬉しいです🙌
AZ-305で覚えておきたいサービスまとめ その2

AZ-305の学習の際に知ったサービスなどをまとめています。どの端末からも見返すことが出来るので意外と便利です。基本的に自分の資格勉強のためだけに書いていますが、もし誰かの為になったら嬉しいです。

## Azure Basion
* AzureポータルまたはローカルPCにインストール済みのSSHかRDPクライアントを介してTLS経由で仮想マシンに接続できるようにするフルマネージドな踏み台サービス
* RDP（3389）やSSH（22）などの管理ポートをインターネットに公開する必要がなく、一般的にWebサービス公開のために使用するHTTPS（443）で接続できる点が特徴

## Transparent Data Encryption (TDE)
* ディスクに書き込まれる時に暗号化し、メモリに読み込まれる時に復号化する仕組み
* Azure SQL Databaseでデフォルトで有効になっている機能でAzureが勝手に行ってくれるので、ユーザー（アプリケーション）は暗号化/復号化を意識しなくていい

## Azure Site Recovery
* オンプレミスやAzure上のサーバを別の場所にレプリケーション（同期）して、自然災害などの大規模障害に備えるためのサービス
* 障害が発生した場合、Azure上でシステムを素早く起動（フェールオーバー）させる
* フェールオーバーは部分的（1つのアプリ）または全体的（全システム）に実行できる

## Microsoft Entra Domain Services
* 従来のWindows Serverで提供されるActive Directoryの機能をクラウドで利用できるようにしたもの
    * LDAP（Lightweight Directory Access Protocol）
    * Kerberos 認証
    * グループポリシー
* ドメインコントローラーを自分でセットアップする必要はなく、Microsoftが基盤を管理してくれるため、運用コストや手間が大幅に削減される

## Azure Blueprints
* リソースの構成（仮想ネットワーク、ポリシー、ロールなど）を「設計図」として定義し、それを複数のサブスクリプションに再利用できるようにするサービス

####  Azure BlueprintsとARMテンプレートの違い
|               | **Azure Blueprints**                               | **ARMテンプレート**                              |
|-------------------------|----------------------------------------------------|-------------------------------------------------|
| **目的**               | 標準化とガバナンスを伴う環境デプロイ               | リソースのデプロイ（環境全体を意識しない場合も） |
| **状態管理**           | 状態を保持し、変更や更新を容易に管理               | 状態は保持しない                                |
| **コンプライアンス管理** | Azure Policyやロールを組み込める                   | デプロイのみ（ポリシーは別途設定）              |
| **スコープ**           | サブスクリプションやリソースグループ全体に適用可能 | リソース単位でのデプロイが中心                  |
最近気になってたGraphQL

こんにちは！  
今回は**APIリクエストのGraphQL**について書いていきます。  
耳にしたことはあるのですが、「今度調べよう」と後回しにしていたので、今回こそ初めの一歩を踏み出します！笑

---

## APIとは

API（Application Programming Interface）は、アプリケーション間でデータや機能をやり取りするための仕組みです。例えば、フロントエンドとバックエンド間の通信に利用され、サーバーから必要なデータを取得したり、サーバーへデータを送信したりします。

---

### 1. **RestAPI**
- **概要**: 現在最も一般的に使用されるAPIリクエストの形式です。
- **特徴**:
  - URLごとにエンドポイントが異なる（例: `/users`, `/posts`）。
  - HTTPメソッド（GET、POST、PUT、DELETE）を使って操作を定義。
  - 汎用性が高く広く普及している。

#### RestAPIの例:
```http
GET /users/123
```
このリクエストで、IDが123のユーザー情報を取得します。

### 2. **GraphQL**
- **概要**:  近年注目を集めているAPIのクエリ言語。
- **特徴**:
  - 1つのエンドポイントですべてのリクエストが可能（例: /graphql）。
  - 取得したいデータをリクエスト時に指定できるため、必要なデータだけを取得可能。
  - オーバーフェッチやアンダーフェッチ（データの取得不足）の問題を解決。
  - クライアント側で柔軟なリクエストが可能。

```
query {
  user(id: "123") {
    name
    email
    posts {
      title
    }
  }
}
```

このリクエストでは、IDが123のユーザーの名前、メールアドレス、投稿タイトルを1回のリクエストで取得します。

![9698b3fbd466-20231122.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/b29ded53-e9c4-d934-4644-3463af436876.png)


### GraphQLを使うメリット
- 必要なデータだけ取得できる
  - クライアント側で取得データを指定できるため、効率的。
- 複数のリクエストをまとめられる
  - 例えば、ユーザー情報とその投稿データを1回のリクエストで取得可能。
- APIの拡張がしやすい
  - スキーマに基づいて設計されているため、新しいフィールドを追加しても既存のクエリに影響を与えにくい。


### 感想
GraphQLで、サーバーへのリクエストの時間もだいぶ短くなってパフォーマンスも上がりますね
早速使いたくなってきました〜！！
フロントがReactでバックエンドがNode.jsの時とか、flutterでも使えるってこの前聞いたので自分の分野にぴったりかもです。
【統計検定】平均

[まとめ](https://qiita.com/sano192/items/aed1c3cafc9ca6af960a)

## 定義
**【離散の場合】**
```math
\begin{align*}
E(X)&=\Sigma_x xP(X=x)　※\Sigma_xはxがとりうる全ての値に関する和\\
\end{align*}
```
**【連続の場合】**
```math
\begin{align*}
E(X)=\int _{-\infty}^{\infty } xP(x)dx\\
\end{align*}
```
## 性質
```math
\begin{align*}
&E(aX+b)=aE(X)+b\\
&E(X+Y)=E(X)+E(Y)\\
\end{align*}
```
これはX,Yが独立でなくても成り立つ


**【証明】**
離散の場合を証明するが連続の場合も同じ方法でOK。
```math
\begin{align*}
E(aX+b)&=\Sigma_x(ax+b)P(X=x)\\
&=a\Sigma_x(x)P(X=x)+b\Sigma_xP(X=x)\\
&=aE(X)+b\\
E(X+Y)&=\Sigma_x\Sigma_y(x+y)P(X=x,Y=y)\\
&=\Sigma_x\Sigma_yxP(X=x,Y=y)+\Sigma_x\Sigma_yyP(X=x,Y=y)\\
&=\Sigma_xx\Sigma_yP(X=x,Y=y)+\Sigma_yy\Sigma_xP(X=x,Y=y)\\
&=\Sigma_xxP(X=x)+\Sigma_yyP(Y=y)\\
&=E(X)+E(Y)
\end{align*}
```

**【証明の補足】**
$b\Sigma_xP(X=x)=b$となる理由
$\Sigma_xP(X=x)$について、これはつまりXのとりうる全ての値についてその確率を足しているので=1になる。

$\Sigma_xx\Sigma_yP(X=x,Y=y)=\Sigma_xxP(X=x)$となる理由
$P(X=x,Y=y)$というのは$X=x$でかつ$Y=y$となる確率を表す。
例えば大のサイコロ(X)と小のサイコロ(Y)を振ってそれぞれ1,3になる確率だったら$P(X=1,Y=3)$と書く。
$\Sigma_yP(X=x,Y=y)$というのは$y$として取りうる値全てを足しているわけだから、$=P(X=x)$になる。
サイコロの例でいうと、$x=1$の場合、
$\Sigma_yP(X=1,Y=y)=P(X=1,Y=1)+P(X=1,Y=2)+...+P(X=1,Y=6)$になる。これはつまり大のサイコロが1になる確率$P(X=1)$と同じ。
AWSマネジメントコンソールのマルチセッションサポート小技

16日、[AWSからマルチセッション対応](https://aws.amazon.com/jp/about-aws/whats-new/2025/01/aws-management-console-simultaneous-sign-in-multiple-accounts/)の発表がされました。

やったね、これで、マルチセッションが使いやすくなるなぁと思った反面
セッションがを間違えてしまうと、
ヒューマンエラーや安易に本番環境にアクセスできてしまうなと思って何か対策がないか考えてみました。

私のフォロワーさんの意見を引用させていただきます。
[kazzpapa3様](https://x.com/kazzpapa3/status/1880540432112975913)

うん、確かにそりゃそうだ。
とも思いました。

- マルチセッションの使い方

簡単です。
AWSマネジメントコンソール上でポチッと実施すれば切り替えられます。
画像は有効にした後のものですが、同じ場所に「マルチセッションサポートをオンにする」というものがあるので有効にしましょう。
![MultiSession.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553392/3cf5607e-3e96-5d6c-48d5-1b90aa551762.png)

実施することはこれだけです。

- 問題点

フォロワーの皆さんの意見の通り、このまま切り替えたりすると、
本番環境なのか開発環境なのかわからなくなりそうです。
私も実際迷いました。

- そこでこのプラグインを使う

今のところ動作確認が取れているのは、GoogleChromeさんだけです。
ほかのブラウザをお使いの方は、同様のプラグインがあるかご確認いただければと思います。

[aws-extend-switch-roles](https://chromewebstore.google.com/detail/aws-extend-switch-roles/jpmkfafbacpgapdghgdpembnojdlgkdl)

こちらの最新版にアップデートください。

設定方法は調べていただく必要がありますが
必要なのはSAVEの上にある以下のカラーコードconfigを加えます。
`color = "color code"`
プロファイルごとに目立つ色に変えます。

おすすめは、
本番系→赤系蛍光色
stg系→緑系の蛍光色
dev計→青系のカラー
です。

はい、この設定を各プロファイルごとに行った後、
一度AWSマネジメントコンソールのログアウトとChromeを再起動します。

再起動後、AWSマネジメントコンソールにログインを行います。

通常であれば、プラグインの青い鍵のアイコンをクリックすることで、ロールが切り替えます。

通常時の画像は以下
![IAM_Changer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553392/a0661855-62a8-881f-d70f-c06a05d2d33f.png)


ところが、マルチセションを有効にすると有効にしたところでセッションを読み込んでカラーリングも読み込んでくれるんです！

実際の画面抜粋はこんな感じ！
![SwitchRole.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553392/ce5cf3e6-8e22-8102-e4bc-f9bc31cb962e.png)


実際に切り替えると右上の切り替え部分のカラーリングが変わります。
![RoleName.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553392/05413070-8430-679f-be8a-744f49d8eaae.png)


アカウント名やアカウントIDは隠しているため見にくいですが、stg用のアカウントに切り替えたため緑色になっています。

- 余談

実際最新版のプラグインで読み込むことで、切り替えロール時のカラーが変更できるというすごくよい小技です。

確かにヘッダー帯のカラーが切り替わるといいなーとか思ったりするのですが、なかなか難しいだろうなぁとは思うので、

操作を行う前に右上のカラーリングで確認するというのがいいとおもうので、ちょっとした共有的な記事でした。
無料のgoogle workspace labを使ってみる



# google workspace lab

google workspace単体のサブスクリプションプランは先日廃止になることが決定し，有料版である程度のgoogle workspaceが使用することができるようになりましたが，実際にどのように使うのかをgoogle workspace labを使って試すことができます．

https://workspace.google.com/labs-sign-up/

上記のリンクからgoogle workspace labに登録することができます．

ページ下にある同意ボタンを押すと，google workspace labを使用することができます．

## 使い方

実際に使ってみるには，google driveにアクセスしてみるとわかります．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/06b86140-5eda-bd3e-85ec-970bfe93caae.png)

上記のようにgoogle driveの右上にgeminiのアイコンが表示されていることがわかります．

このボタンを押すと，driveの右側にgeminiのチャットが表示されます．

ただしこのままでは，下のようなエラーが出て使えませんでした．


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/bdc84396-7f95-eb01-404a-ee6c9877dd84.png)


このエラーは設定を変更する必要があります．

[公式サイト](https://support.google.com/mail/answer/15604322?visit_id=638730592622180639-268178120&p=workspace-smart-features-settings&rd=1)


### gmail

gmailであれば，以下の方法で設定を変更できます．

1. パソコンでGmailにアクセスします．
1. 右上の設定アイコンをクリックし，「すべての設定を表示」をクリックします．
1. 「全般」タブの「Google Workspaceのスマート機能」までスクロールします．
1. 「Workspaceのスマート機能の設定を管理」をクリックします．
1. スマート機能の設定をオンまたはオフにします：
  - Google Workspaceのスマート機能
  - 他のGoogle製品のスマート機能
1. 右下の「保存」をクリックします．

### google chat

google chatであれば，以下の方法で設定を変更できます．

1. パソコンでChatにアクセスします．
1. 右上の設定アイコンをクリックします．
1. 「Google Workspaceのスマート機能」の下にある「設定を管理」をクリックします．
1. スマート機能の設定をオンまたはオフにします：
  - Google Workspaceのスマート機能
  - 他のGoogle製品のスマート機能
1. 右下の「保存」をクリックします．

### google drive

google driveであれば，以下の方法で設定を変更できます．

1. driveを開いて，右上にある設定アイコンをクリックします．
1. settingsをクリックします．
1. generalの一番下にある manage search historyをクリックします．
1. スマート機能の設定をオンまたはオフにします：
  - Smart features in Google Workspace
  - Smart features in other Google products
1. 下の方にある「Save」をクリックします．


:::note info
どれか一つでも行えば全ての機能を使うことができます．
:::

### 実際に使ってみる

google driveでは，ファイル等を右クリックすることで，要約するという選択肢が出てきます．

![gemini](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/cd6c7940-d13a-8a8e-0838-4a8cf5bcbcc9.png)

このボタンを押すとしっかり要約することができました！

また，google slidesではスライドにあった画像生成をしてくれたり，gmailの未開封メールをまとめてくれたりしました！

### 今後に期待の点

labではスマホでgeminiを使うことはできませんでした...

また，チャット履歴も一回で消えちゃううぽいですね

使えるようになってくれると嬉しいですね
【MongoDB】 複数バージョンをスキップしてバージョンアップをしたい

MongoDBをそろそろバージョンアップしないとなー、と思っていたら幾星霜、とうとうやる気になったらなんと3.4から7.0まで上げないといけない、とかいう状況に遭遇した場合、

通常は ローリングアップグレード でやるんだろうけれども、そうするとえーと、

3.4 → 3.6 → 4.0 → 4.2 → 4.4 → 5.0 → 6.0 → 7.0

と、なんとまあ、七回もバージョンアップを繰り返さなきゃいけなくなります。

で、ふつうは、じゃあダウンタイムは許容するとしてダンプ&リストアで何とかならないのか、と思いますよね。

でもどこをさがしてもなんか "ダンプ&リストアで何とか" なるのかどうか、公式ドキュメントだとよくわからない。

https://www.mongodb.com/community/forums/t/replace-mongodb-binaries-all-at-once/10956/3

には

If downtime is acceptable and you have a large number of major releases to upgrade through, you can also consider a **migration using mongodump and mongorestore**.

とあるものの、

will encounter different issues depending on the provenance of your data

とかあるし、ちょっと心配ですが、まあきちんとテストすれば、というかローリングアップグレードしたからといってテストしないわけでもないし、やはり ダンプ&リストア の方が楽かなーと思います。

ちなみに以下では docker 使って複数バージョン間バージョンアップを自動化するという力業が紹介されてて、なるほどすごいなーという感じです。

https://stackoverflow.com/questions/37833561/restoring-the-database-dump-of-an-older-version-of-mongo-to-a-new-version-of-mon

以上

*ちなみに同じことを自分のサイトのブログにも書きました。こちらです→ https://0x0c.info/?p=392*
Go言語(プログラミング)入門メモ⑫

## 構造体の埋め込み
Goでは構造体の中に構造体を持たせることによってオブジェクト指向プログラミングにおける継承のようなことができる。
これを埋め込み(Embedded)という。

## 埋め込みの方法
まず、Vertex構造体を作成する。
~~~
type Vertex struct {
    x,y int
}

func (v Vertex) Area() int {
    return v.x * v.y
}

func (v Vertex) Scale(i int){
    v.x = v.x * i
    v.y = v.y * i
}
~~~
新しくVeretx3Dという構造体を作成し、その中にVertexをかく。これでVeretx3DはVertexの値であるxとyも持っている状態になる。また、Veretx3Dにはint型のzも加える。Area3DメソッドやScale3Dメソッドの作成時もx,y,zを使用するようにする。
~~~
type Vertex3D struct {
    Vertex           //構造体の中に構造体を入れる
    z int
}

func (v Vertex3D) Area3D() int {
    retrun v.x * v.y * v.z
}

func (v Vertex3D) Scale3D(i int) {
    v.x = v.x * i
    v.y = v.y * i
    v.z = v.z * i
}
~~~
New関数は引数にzを加え、返り値をVeretx3Dにする。
~~~
func New(x,y,z int) *Vertex3D {
    retrun &Vertex3D{Vetex{x,y},z}
}
~~~
main関数内でNew関数を実行し、VertexとVeretx3Dのメソッドをそれぞれ実行してみる。
~~~
func main() {
    v := New(3.4.5)
    v.Scalte(10)
    fmt.Println(v.Area())
    fmt.Println(v.Area3D())
}

//以下のように出力される
1200
6000
~~~

## 学習に使用した教材
・『入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)』M.A EduTech
https://www.udemy.com/course/golang-webgosql/?utm_medium=udemyads&utm_source=bene-msa&utm_campaign=responsive&utm_content=top-1&utm_term=general&msclkid=81e2f24a32cc185d275d953d60760226&couponCode=NEWYEARCAREERJP

・『シリコンバレー一流プログラマーが教える Goプロフェッショナル大全』酒井 潤 (著)
https://www.amazon.co.jp/%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%90%E3%83%AC%E3%83%BC%E4%B8%80%E6%B5%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B-Go%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E5%A4%A7%E5%85%A8-%E9%85%92%E4%BA%95-%E6%BD%A4/dp/4046070897
基本情報技術者試験：メモ

# 論理演算とは・・・真の値、儀の値という二つの値を使う演算
ベン図・・・論理演算を見やすくしたもの
論理値表・・・入力の全パターンとそれに対する結果の値を表にしたもの
論理積（AND）・・・二つある条件がともに真のときのみ真を出力する演算
⇒どちらも1のときに1を出力
論理和（OR）・・・二つある条件のいずれかが真のときに真を出力する演算
⇒どちらか1、もしくは両方1のときに１を出力する
否定（NOT）・・・一つの条件に対して真偽値の値を反転させる演算
⇒1のときに0、0のときに1を出力する
排他的論理和（XOR）・・・二つある条件のうち片方だけが真であるときに真を出力する演算
⇒どちらか一方が1のときに1を出力する※両方1のときは0


# 組み合わせ計算方法
縦横の本数を数える
### 全パターン
(縦+横)!/(縦!横!)＝通り
### 中継点を通る場合
(縦+横)!/(縦!横!) * (縦+横)!/(縦!横!)＝通り
FileStream ~初心者向け~

この記事では筆者がFileStreamについて学んだことをまとめています。
# そもそもStreamって
C#にはOOStreamというクラスがたくさんありますが、それらはすべてStreamという抽象クラスを継承して作られたものです。

:::note info
FileStreamもStreamを継承したもので主にファイルの入出力に携わります。
:::

# 本題:FileStreamの使い方
`FileStream`は主に二つのモードに分かれていて、一つがファイルの書き出し、もう一つがファイルの読み込みです。具体例を交えてみてみましょう。
## ファイルを書き出すとき
まず大前提としてファイルに何かを書き込むときは、それをByteに直して書き込みます。以下のコードを参照。

```C#:sample.cs
string text1 = "abcdef";
string text2 = "ghijkl";
byte[] textbyte1 = Encoding.UTF8.GetBytes(text1);
byte[] textbyte2 = Encoding.UTF8.GetBytes(text2);
```
ではこの`byte[]`を書き込んでいきます。
```C#:sample.cs
FileStream fs = new FileStream(/*ファイルのパス*/,FileMode.Create,FileAccess.Write);

fs.Write(BitConverter.GetBytes(textbyte1.Length), 0, sizeof(int));/*注目*/
fs.Write(textbyte1,0,textbyte1.Length);

fs.Write(BitConverter.GetBytes(textbyte2.Length), 0, sizeof(int));/*注目*/
fs.Write(textbyte2,0,textbyte2.Length);

fs.Close();
```
ここで注目してほしい点が二つあります。
### 一つ目
`fs.Write(BitConverter.GetBytes(textbyte1.Length), 0, sizeof(int));`
なぜこの行が存在するかというと`textbyte1`を書き込んだファイルを<b>読み込む際に</b>`byte[]`のサイズがわからないと困るからです。この行があることで`textbyte1`のサイズを書き込むことができます。`sizeof(int)`については下で補足します。
#### 補足1
`textbyte1`のサイズを書き込んだ`byte[]`の長さは`textbyte1.Length`が`int型`なのでかならず4バイトになります。なので`sizeof(int)`となっているところを4バイトと書いてもいいんですが、後で見て何をしたかったのかがすぐにわかるのでこちらをおすすめします。
#### 補足2
上記のコードブロックでは最終行に`fs.Close();`と記述されいますが、OOStreamでは基本的にやりたい動作が終わったらこのように解放してあげましょう。C#は基本的にプログラマーが意識して解放しなくてもいいように作られているので最初こそ慣れないでしょうが、失敗してでもいいので頑張りましょう。なお筆者は動画のフレームを開放し忘れてメモリが成仏しかけました。
### ただし、方法がないわけではありません.。
C#にはこれまた便利なステートメントがあります。それが次に紹介する`using()`ステートメントです。これを使ってコードブロックを書き換えると
```C#:sample.cs
using(var fs = new FileStream(/*ファイルのパス*/,FileMode.Create,FileAccess.Write)){
    fs.Write(BitConverter.GetBytes(textbyte1.Length), 0, sizeof(int));
    fs.Write(BitConverter.GetBytes(textbyte2.Length), 0, sizeof(int));/*24,25行目に注目*/

    fs.Write(textbyte1,0,textbyte1.Length);
    fs.Write(textbyte2,0,textbyte2.Length);
    }
```
主な機能としてはこのブロックの処理が終わって`using()`ステートメントを抜けると自動的に解放されます。また処理部がわかりやすくなるのも筆者的にgoodポイントです。

## ファイルを読み込むとき
次にファイルを読み込んでみましょう。
```C#:sample.cs
string text1 = "";
string text2 = "";

using(var fs = new FileStream(/*ファイルのパス*/,FileMode.Open,FileAccess.Read)){
    byte[] basebytes = new byte[sizeof(int)];

    fs.Read(basebytes,0,sizeof(int));
    bytes[] text1bytes = new byte[BitConverter.ToInt32(basebytes, 0)];
    fs.Read(text1bytes,0,BitConverter.ToInt32(basebytes, 0));//intに変換する
    text1 = Encoding.UTF8.GetString(text1bytes);/*UTF-8で書き込んだからUTF-8で読み込みます。*/

    ~~~~ text2も同様 ~~~~
}
```
まずは`text1bytes`の`length`を求めるため、`basebytes`に書き込んでいます。次に`basebytes`を`text1bytes`の初期化時にint型へ変えて範囲に使います。

#### 補足1
`Write()`や`Read()`を実行すると`fs.Position`プロパティが自動的に更新されます。なので`fs.Read()`などを実行しても基本的に読み取る範囲が重複することはありません。


:::note info
お疲れさまでした。
:::

以上が`FileStream`を使った基本的なファイルの入出力です。応用として与える`bytes[]`を暗号化してファイルに書き込むなどいろいろ考えられます。ぜひ活用してください。

## 最後に
この記事は初めて書いたもので説明が偏ったり、文章の拙い部分があったりと読みにくいところもあったと思いますが、読んでいただきありがとうございました。一緒にいろんなことを学んでいきましょう!
【初心者向け🔰】ICTにおけるインフラエンジニアのお仕事とは

アディクシィ株式会社でインフラアーキテクトとして従事している
おんたまと申します。記事に目を止めていただきありがとうございます。
>アディクシィ株式会社
>https://adixi.co.jp

本記事は以下の方向けに記載をしております。

:::note info
・ICT業界に興味を持っていただいた方
・インフラ領域に興味がある方
・インフラエンジニアとしてのキャリア形成について考えている方
:::

# インフラって何？
そもそも、「インフラ」とは何かについて説明します。

**インフラとは「インフラストラクチャー（英語: infrastructure）」の略称で、「基礎」であったり、「基盤」となるものを意味します。**

世の中の事象に例えると、「電気、ガス、水道」、「鉄道、道路」、「学校、病院」といった社会基礎基盤になるものを指すことが多いです。

# ICTにおける「インフラ」とは？
では、ICT業界における「インフラ」とは何でしょうか？

**Webサイトやアプリケーション、情報システムを利用する上で必要な環境そのものが「インフラ」に分類されます。**

例えば以下の物などが挙げられます。

* 利用者の端末（パソコン、スマートフォンなど）
* 接続するための環境（インターネット、社内ネットワークなど）
* サイト、アプリを設置するための機器類（サーバー、ソフトウェアなど）

このように、多くのものが「インフラ」に定義されます。

# ICTにおけるインフラエンジニアとは
ICTにおける「インフラエンジニア」とは上記の **「インフラ」全般に関わる技術者ということになります。**

とはいえ非常に多岐にわたる為、エンジニアの方々の多くは、その中から分野に**特化した専門性**を持って従事している形になります。

個人的には地味な仕事かもしれませんが、多くの利用者の下支えをしているという事にもなり、スケールの大きさや責任感の大きさもあり、非常に面白い分野だと思っています。

# 終わりに
ICTにおけるインフラエンジニアのお仕事について簡潔に説明してみましたがいかがでしたでしょうか。
今後、少しずつですがインフラエンジニアに興味を持っていただけるような記事を書いて行ければと思います。
LPIC101_2 Linuxのインストールとパッケージ管理(主題102)　よくわからないところをAIに聞いてみた

 LPIC101_1のわからないところをAIに聞いてみた。

システムアーキテクチャ(主題101)はこちらから。

https://qiita.com/Riba_Quita/items/baae59480fdb32439d62

# Linuxのインストールとパッケージ管理(主題102)
※ハードディスクのレイアウト設計なし
 
### 
<INS>GRUB2の流れ</INS>
コンピュータ起動時にOSの指定ができる画面の項目がmenuentry
menuentryは /boot/grub/grub.cfg(GRUB2の設定ファイル内)に配置
しかし直接編集できない
↓
変更するには、/etc/default/grubを編集
↓
grub-mkconfigまたはupdate-grubコマンドを使用してgrub.cfgを再生成



systemdは、ユニットという大分類の中にターゲットがある。
ランレベルはターゲットに所属。
ターゲットもユニットの一部なので統一性を持たせるためsystemd.unitにする

### ブートマネージャのインストール
- **GRUB Legacyの設定ファイル**
/boot/grub/menu.lst ※menu.lstは「menu list」の略
/boot/grub/grub.conf
ディストリビューションによってファイルが違う。どちらかのファイルが入っている。
- **GRUB2の設定ファイル**
/boot/grub/grub.cfg →GRUB2の使用を明示的にするため、GRUBと同じファイル名(/boot/grub/grub.conf)ではなく/boot/grub/grub.cfgとした
- **GRUB2の設定を直接編集できるファイル**
/etc/default/grub→一般的な設定
/etc/grub.dディレクトリ内のファイル→詳細設定

- **GRUB1のディスク番号・パーティション番号は0から、GRUB2のディスク番号は0からパーティション番号は1から数える**
プログラミング言語やシステム設計では、0から数えることが一般的で、管理者(IT上級者)のみが利用するディスク番号は0からのカウントを採用、パーティション番号は初心者も操作するので、分かりやすいためにGRUB2は1からのカウント。
- **grub> kernel /boot/カーネルのバージョン ★**
★root=マウントポイントの指定
★init=カーネルが使用するコマンド・ぷろぐらむを指定

- **ロードするモジュールを指定する項目**
inmod(insert module モジュールを挿入)

### 共有ライブラリ
- **LDDコマンド→List Dynamic Dependenciesの略、プログラムが必要としている共有ライブラリの表示**

- **/etc/ld.so.conf**
「so」は、「shared object」の略

- **共有ライブラリの場所を検索するために使用されるファイル
/etc/ld.so.cache**
/libディレクトリ配下ではない理由→/libは共有ライブラリそのものが入っていて、設定ファイルではない


## Debianパッケージ管理
- **update→情報を最新にする  upgrade→中身を最新にする**
- **dpkg(Debianのパッケージ管理コマンド)**
Debian Packageの略 
- **dpkg -s パッケージ名, dpkg -status→パッケージ名 パッケージの詳細表示、dpkg -S ファイルのパス, dpkg -search→ファイルのインストール元の表示**
どうしてstutasの省略形が-sでSearchが-Sなのか
→基本的には頻度が高いものが小文字、statusの方がより使われる(インストール元の表示は管理者しか行わない)のでこちらが小文字になる
- **Debianのパッケージ管理ツールapt(Advanced Package Tool)は自然言語に近づける設定にしたので単語でのオプション**
- **gpkg -r→パッケージアンインストール時、設定ファイルを残す
gpkg -P→アンインストール時、設定ファイルも削除**
→-Pオプションは強力なコマンドなので間違いを防ぐために大文字
- **dpkg -audit(検査→異常がないかを表示),-C(configure unconfigured packages？checkだと思ったら覚えやすい)**
インストールが完了していないパッケージの表示
- **apt-get→パッケージへの操作、apt-cache→情報関係**
**apt-cache search→キーワードをふくパッケージの表示
apt-cache show→情報の表示(依存関係は表示しない) 
apt-cache showpkg→依存関係も含めた情報の表示 
apt-cache depends→依存しているパッケージを表示**
例：
apt-cache search vim → vim というキーワードを含むパッケージの表示
apt-cache show vim → vim というパッケージの情報を表示
apt-cache showpkg vim → vim というパッケージの情報を依存関係を含めて表示
apt-cache depends vim → vim が依存しているパッケージを表示

## RPMとYUMパッケージ管理
- **RPM（Red Hat Package Manager）コマンド**-
→Red hat系。依存関係を自動で解決しない 
-q queryクエリ データベースやシステムに情報を問い合わせること
-c/--configfiles 設定ファイルの表示 
-v(verbose)冗長→通常よりも詳細な情報を提供 
-F/--freshen　アップグレード、パッケージがない場合、新たにインストールしない 
-U/--upgrade　アップグレード、パッケージがない場合、新たにインストール     
- **rpm(Red Hat Package Manager)→yum(Yellowdog Updater, 
Modified)→dnf(Dandified YUM）**

## 仮想化のゲストOSとしてのLinux
- **LDD**
- List Dynamic Dependencies 動的依存関係を一覧表示する  
- **/etc/ld.so.conf→soはshared objectの略**
#0021（2024/01/21）IPカメラの映像送信方式

# IPカメラが映像をPCに送る仕組み（原理）

IPカメラ（例: iProなど）は、映像をデジタルデータとして処理し、ネットワークを通じてPCに送信します。その主な流れを以下に要点を絞って説明します。


## **1. 映像のキャプチャ**
- **イメージセンサー:** CMOSまたはCCDセンサーが光を電気信号に変換。
- **信号処理:** 電気信号をデジタルデータに変換し、リアルタイムで映像を生成。


## **2. 映像データの圧縮**
- 映像データはサイズが大きいため、帯域幅を最適化するために圧縮されます。
- 主なコーデック:
  - **H.264/H.265:** 高効率なビデオ圧縮方式。
  - **MJPEG:** 静止画の連続フレームで構成。


## **3. データのパケット化**
- 圧縮された映像データを小さなパケットに分割し、ネットワークプロトコルに準拠した形式に変換。
- 使用されるプロトコル:
  - **RTSP (Real-Time Streaming Protocol):** ストリーミング用のプロトコル。
  - **HTTP/HTTPS:** Webブラウザ経由で映像を配信。
  - **ONVIF:** カメラ間の互換性を提供する業界標準プロトコル。


## **4. ネットワークを通じた送信**
- **IPプロトコル:** TCP/IPまたはUDPを使用してデータを送信。
- **ネットワーク方式:** 有線LAN（Ethernet）または無線LAN（Wi-Fi）を利用。


## **5. PCでの受信と再生**
- **接続方法:** PCがIPカメラのIPアドレスとポートに接続してデータを受信。
- **再生ソフトウェア:** 専用ビューアソフト（例: iPro Viewer）や汎用ソフト（例: VLC Media Player）。
- **デコード:** 圧縮されたデータをデコードし、映像を表示。


## **まとめ**
IPカメラは、センサーでキャプチャした映像をデジタルデータに変換・圧縮し、RTSPやHTTPなどのプロトコルでパケット化してネットワークを通じてPCに送信します。PC側ではデータを受信・デコードし、リアルタイムで映像を再生します。
よく見るけどちゃんと知らない言葉

# はじめに

IT技術者をやっていてよく見るけど、雰囲気でしか意味を分かってない、ちゃんと人に説明できない言葉を整理してみました。


## エラスティック (elasctic)

Amazon EC2(Elastic Compute Cloud)など、AWSのサービス名でよく見るエラスティック（`elasctic`）。

英単語の意味としては「弾力のある、伸縮自在の、しなやかな」など。

クラウドの文脈では、需要に応じてリソースを動的に増減できる柔軟性（スケーラビリティ）の意味で使われている。


## アドホック (ad hoc)

アドホックネットワークとか、アドホックテストとか、複数のシチュエーションで目にするアドホック（`ad hoc`）。

「特定の目的のための」「限定目的の」などを意味するラテン語とのこと。

常設・常用されるものではなく、その場限りの解決策や一時的な対応を指す場合が多い。


## プロプライエタリ

OSSなんかの文脈で見かけるプロプライエタリ(`proprietary`)。

英単語の意味としては「所有者の」「私有の」など。

開発した企業や団体が権利を持っていて、仕様や構造について公開されていないことを指す。利用や配布についてもライセンスで制限されている場合が多い。オープンソースの対義語的に使われる。


## モノリシック

アーキテクチャなどの話で見かけるモノリシック(`monolithic`)。

英単語としては「一枚岩でできた」「巨大な」などの意味で、語源は`mono`(1つの)と`lithos`(石)を指すギリシャ語らしい。

全体が1つのモジュールとして結合していて、部分的に切り離したり交換したりすることが難しく、全体への影響を考慮しなければいけない構造のソフトウェアを指す。マイクロサービスアーキテクチャの対義語として出てくることが多い。


## サロゲート

DBのサロゲートキーとか、サロゲートペア文字などで見かけるサロゲート(`surrogate`)。

英単語としては「代役」「代わり」などを意味する。

前出の例で言うと、ナチュラルキーの代わりに主キーとしての意味だけを持たせるという意味での「サロゲートキー」であったり、Unicodeで表現しきれない文字を補うために、2つの16ビットコードで1つの文字を表すのが「サロゲートペア文字」みたいな感じ。
OS自作

C言語(C++)が必要な人と必要ない人
https://qiita.com/kaizen_nagoya/items/2afe9e846b55b24cb6f1

を読んでほしい人たちの一覧

# OS自作
12ステップで作る 組込みOS自作入門　Macでのシリアルを利用したフラッシュROM書き込み
https://qiita.com/gisuyama7/items/d362947e3f87b006a44a

os自作入門
https://qiita.com/Shun_Takahashi/items/a4eedbd631266f68d2c2

ゼロからのOS自作入門のメモ
https://qiita.com/kudojp/items/508615602ff75456dd58

ゼロからのOS自作入門 その1
https://qiita.com/peta_67/items/8d99212bd54bf7969acd

ゼロからのOS自作入門 メモ #1
https://qiita.com/fuji3195/items/1495df96a164b23a9007

「ゼロからのOS自作入門」環境構築
https://qiita.com/O-Jun/items/7ff9f7e87bfa386b8685

簡易的なOS自作
https://qiita.com/suwa3/items/80574687644d70729be1


OS自作 1日目
https://qiita.com/Tuffy/items/c08865270de519d7619b
その配列の加工、reduceでできない？

## filter・map関数の便利さは異常
reactを学んだときにまず出てくる、map関数、ループ処理くらいの認識ですぐに使ってしまいがちです。
さらに、filter関数。条件付きで配列を扱えるmapの仲間みたいな認識で学びました。

```js
const products = [
  { id: 1, name: "Laptop", stock: 5 },
  { id: 2, name: "Keyboard", stock: 0 },
  { id: 3, name: "Mouse", stock: 10 },
  { id: 4, name: "Monitor", stock: 0 },
  { id: 5, name: "Headphones", stock: 3 },
];
```
例えば、上記のような在庫管理テーブルがあったとします。

これらのデータのうち、<b>在庫がある商品の名前を取得</b>するとします。
```js
const availableProducts = products
  .filter((product) => product.stock > 0) // 在庫がある商品を抽出
  .map((product) => product.name);       // 商品名だけを取り出す

console.log(availableProducts);
// 結果: ["Laptop", "Mouse", "Headphones"]
```

react初学者の自分はまず最初に上記のような書き方を考えつきました。
このようなシンプルな処理の場合はこちらの書き方で問題はありません。

## なんでもfilter・mapするんじゃない

しかしmap関数、filter関数を同時に扱う時に、気をつけなければいけないことがあります。
上記の処理では、filter関数で一度配列全体を走査した結果に対してmap関数はもう一度配列を走査しています。
配列のデータ数が膨大、または条件が複雑になった時、パフォーマンスの低下を招きかねません。
そこで使いたいのが<b>reduce<b/>です。

## reduceとは？
reduceは配列の各要素を１つづつ処理して、最終的に１つの結果を作り出すためのメソッドです。

シンプルな例だと以下のような使い方をします。配列内の数値の合計を計算しています。
```js
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((total, current) => total + current, 0);

console.log(sum); // 結果: 15
```
redueの第一引数は累積値、第二引数は現在の値を意味します。
mapやfilterと異なり、配列を扱う時の汎用性が高いです。
先ほどの在庫管理の例をreduceで書いてみましょう。

```js
const { availableProducts, outOfStockProducts } = products.reduce(
  (result, product) => {
    if (product.stock > 0) {
      result.availableProducts.push(product.name); // 在庫ありの商品名を追加
    } else {
      result.outOfStockProducts.push(product.name); // 在庫切れの商品名を追加
    }
    return result;
  },
  { availableProducts: [], outOfStockProducts: [] } // 初期値
);

console.log(availableProducts);
// 結果: ["Laptop", "Mouse", "Headphones"]

console.log(outOfStockProducts);
// 結果: ["Keyboard", "Monitor"]

```

一回の配列の走査で在庫がある商品と在庫がないの商品のリストを作成できました。

## まとめ
reduceを使うことでコードの見やすさは落ちます。（filter・mapは誰が見ても何やってるか見やすい）
しかし、膨大なデータ・複雑な条件で配列を加工したい場合は、reduceを検討してみてください。
Go言語(プログラミング)入門メモ⑪

## メソッド
構造体を含むデータに紐づけた関数のことをメソッドという。

## 型に紐づくメソッドを作成する
構造体にメソッドを作成して呼び出してみる。まず、int型のXとYを持つ構造体Vertexを宣言する。
引数が構造体Vertexの変数v、返り値がint型のArea関数を作る。この関数は。「v.X*v.Y」を返す。main関数で変数vを初期化してArea関数を実行すると12が表示される。
~~~
type Vertex struct {
    int X,Y
}

func Area(v Vertex) int {
    return v.X * v.Y
}

func main() {
    v := Vertex{3, 4}
    fmt.Println(Area(v))
}

//以下のように表示される
12
~~~
次に関数Areaを構造体Vertexに結び付けたメソッドとして定義する。
メソッド作成時は「func (v Vertex) Area() int」のように、funcのあとに()をつけてそのなかにレシーバーと呼ばれる引数の名前と型を指定する。これにより、Vertex型のレシーバーvを持ち、返り値がint型のAreaメソッドが作成される。レシーバーが型とメソッドを紐づける役割を持つ。
メソッドを呼び出すためには、「v.Area()」のようにメソッドを結び付けた構造体の変数とメソッド名を.でつないで実行する。

~~~
type Vertex struct {
    X,Y int
}

func (v Vertex) Area() int {　　　　//メソッドを定義
    return v.X * v.Y
}

func main() {
    v :={3,4}
    fmt.Println(v.Area())     //メソッドを実行
}

//以下のように出力される
12
~~~
※メソッドを使う利点
関数を使う場合関数名を把握していないと関数が使えないが、メソッドとして作成すると、「v.Area()」ように構造体とメソッドの紐づけがコードからわかりやすくなる。また、構造体さえわかればVSCodeなどの機能でメソッド名が補完されて表示されるようになるというメリットもある。

## ポインタレシーバと値レシーバ
メソッドで紐づけられた構造体の値を変えたい場合は、メソッド作成時にレシーバーに*を付ける。
ここでは、ScaleというVertexのメソッドを「func (v *Vertex) Scala(i int)」のように書いて作成し、XとYの値を書き換えてみる。iのintという引数を取り、メソッドの中でXとYそれぞれの値を「v.X = v.X*i」「v.Y = v.Y*i」と書き換える

~~~
func (v *Vertex) Scale (i int) {
    v.X = v.X * i
    v.Y = v.Y * i
}

func main() {
    v := Vertex{3,4}
    v.Scale(10)
    fmt.Println(v.Area())
}

//以下のように出力される
1200
~~~
Scaleメソッドを実行しAreaメソッドでXとYの積を表示すると、1200になるため、ScaleメソッドでXとYの値が書き換えられていることが分かる。
レシーバにポインタの＊を書くことで、Vertexに紐づけられたScaleというメソッド内で構造体の中身を書き換えることができる。これをポインタレシーバという。
一方で、レシーバに＊を書かない場合は、構造体の参照ではなく値をコピーして渡しているので、値レシーバという。

## Newで初期化時の処理を実行する
Pythonにおける__initi__のような、初期化時に実行される処理(コンストラクタ)は、GoではNewという関数を作成して行う。
New関数を作成する。まず、VertexのXとYを小文字に置き換える。小文字にすることで他のパッケージから操作することはできず、このパッケージ内からのみ書き換えができるようになる
~~~
type Vertex struct {
    x,y int
}
~~~
次にNew関数の作成を行う。引数にint型のx,y、返り値に＊Vertex(Vertexのポインタ)を設定し、処理にはreturn &Vertex{x,y}と書く。この実行をすると1200が表示される
~~~
func New(x,y int) *Vertex{
    return &Vertex{x,y}
}

func main() {
    v := New(3,4)
    v.Scale(10)
    fmt.Println(Area())
}

//以下のように表示される
1200
~~~
## 構造体以外の型のメソッド
typeを使うと、組み込み型に新しい名前を付けた独自の型を作ることが可能で、その独自の型にメソッドを持たせることができる。ここでは、int型にMyintという別の名前を付けて新しい型を作る。
また、作成したMyint型にint型の返り値を返すDoubleメソッドを作成してiに2をかけた値をint型で返す。
~~~
tyope Myint int

func (i Myint) Double() int {   
    return int(i * 2)
}

func main() {
    myInt := Myint(10)
    fmt.Println(myInt.Double())
}

//以下のように出力される
20
~~~

## 学習に使用した教材
・『入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)』M.A EduTech
https://www.udemy.com/course/golang-webgosql/?utm_medium=udemyads&utm_source=bene-msa&utm_campaign=responsive&utm_content=top-1&utm_term=general&msclkid=81e2f24a32cc185d275d953d60760226&couponCode=NEWYEARCAREERJP

・『シリコンバレー一流プログラマーが教える Goプロフェッショナル大全』酒井 潤 (著)
https://www.amazon.co.jp/%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%90%E3%83%AC%E3%83%BC%E4%B8%80%E6%B5%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B-Go%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E5%A4%A7%E5%85%A8-%E9%85%92%E4%BA%95-%E6%BD%A4/dp/4046070897
【WindowsApi】 マウスカーソル非表示でつまづいたところ

# マウスカーソルを非表示にしたい！
~~~
ShowCursor(FALSE);
~~~
これでいいはず...

**まったく非表示になりません!なんで!!**

# ちゃんとリファレンスを読んでみる

https://learn.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-showcursor

つまり、**内部でカーソルを表示しろと言われた回数を保持**していて、それが**正だとカーソルは表示される**らしい。
返り値はその保持数だから...
~~~
while(ShowCursor(FALSE) >= 0){}
~~~
これでよいのでは...

**やっぱり表示される！！**

# 結論
**メインスレッド外でShowCursor()を呼び出していたから非表示にできなかった！**

スレッドごとにカウントを保持しているためメインスレッド外でカウントを負にしてもメインスレッドのカウントは減ってないから非表示にできないってことでした。

# おわり
初めて使うものは単純な状態で試してから使いましょう。
(というかデバイスから入力を受け取るのであればメインスレッドのみで更新を行うべきであるということに気づくのが遅かった...)
LaravelでRBACを簡単実装！Spatie Laravel Permissionの導入方法


Laravelでロールベースのアクセス制御（RBAC）を簡単に実装するためのパッケージとして、**Spatie Laravel Permission**を活用する方法を解説します。

---

## **1. Spatie Laravel Permissionとは？**

Spatie Laravel Permissionは、Laravelアプリケーションにロールと権限を簡単に管理できる機能を追加するためのパッケージです。以下のような特徴があります：

- **ロールと権限の割り当て**が簡単。
- ユーザーに直接権限を割り当て可能。
- **Bladeディレクティブ**やミドルウェアでアクセス制御が可能。
- シンプルで使いやすいAPIを提供。

---

## **2. パッケージのインストール**

### **1. インストール**
まず、Composerでパッケージをインストールします。

```bash
composer require spatie/laravel-permission
```

---

### **2. マイグレーションファイルの公開**

以下のコマンドでマイグレーションファイルを公開します。

```bash
php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider"
```

これで、`database/migrations` フォルダにマイグレーションファイルが生成されます。

---

### **3. マイグレーションの実行**

公開されたマイグレーションファイルを元に、テーブルを作成します。

```bash
php artisan migrate
```

---

## **3. Userモデルの設定**

ユーザーモデルに`HasRoles`トレイトを追加します。

```php
use Spatie\Permission\Traits\HasRoles;

class User extends Authenticatable
{
    use HasRoles;
}
```

---

## **4. ロールと権限の作成**

以下のコードでロールと権限を作成し、割り当てることができます。

```php
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

// ロールの作成
$adminRole = Role::create(['name' => 'Admin']);
$editorRole = Role::create(['name' => 'Editor']);

// 権限の作成
$editArticlesPermission = Permission::create(['name' => 'edit articles']);
$deleteArticlesPermission = Permission::create(['name' => 'delete articles']);

// 権限をロールに割り当て
$adminRole->givePermissionTo(['edit articles', 'delete articles']);
$editorRole->givePermissionTo('edit articles');

// ユーザーにロールを割り当て
$user = User::find(1);
$user->assignRole('Admin');
```

---

## **5. アクセス制御の実装**

### **ミドルウェアの利用**

ミドルウェアを使用してアクセス制御を行うことができます。

#### ルートでの使用例
```php
Route::get('/admin', function () {
    return 'Admin Page';
})->middleware('role:Admin');
```

#### 複数ロールを許可
```php
Route::get('/dashboard', function () {
    return 'Dashboard';
})->middleware('role:Admin|Editor');
```

---

### **Bladeディレクティブの利用**

Bladeファイル内でロールや権限をチェックするには以下のディレクティブを使用します。

#### ロールの確認
```blade
@role('Admin')
    <p>管理者専用コンテンツ</p>
@endrole
```

#### 権限の確認
```blade
@can('edit articles')
    <p>記事編集可能</p>
@endcan
```

---

## **6. よく使うAPI**

### **ロール関連**

- ロールを割り当てる：`$user->assignRole('Admin');`
- ロールを削除：`$user->removeRole('Admin');`
- ロールを確認：`$user->hasRole('Admin');`

### **権限関連**

- 権限を直接付与：`$user->givePermissionTo('edit articles');`
- 権限を削除：`$user->revokePermissionTo('edit articles');`
- 権限を確認：`$user->can('edit articles');`

---

## **7. まとめ**

Spatie Laravel Permissionを使えば、RBACを効率的に実装できます。ロールと権限を組み合わせることで、柔軟で堅牢なアクセス制御が可能です。

LaravelでのプロジェクトにRBACを導入する際に、ぜひ参考にしてください！
プログラミング学習用にランダムな数値・配列を出力する

プログラミングを学習する上で、テストデータとしてランダムな数値や数値等が必要となる場合がある。

学習を始めた頃は適当にタイピングしてみたり、AIに作ってもらったり等で対処してきたが、段々とその作業が面倒になってきてしまった。

これでは本末転倒なので、テストデータ自体もプログラムに作ってもらうことにした。
このプログラムを作る過程も学習の一環となったので、自分用チートシートとして記録を残しておく。

# 1. ある整数1つをランダムに生成
randomモジュールを用いる。
こちらはPythonの標準モジュールであるため、事前のインストールは必要ない。
### コード
``` python
import random

a = int(input("乱数の最小値："))
b = int(input("乱数の最大値："))

print(random.randint(a, b))
```
### 出力例
```
乱数の最小値：1
乱数の最大値：100

32
```

# 2. ランダムな数列を生成
1.をベースとして、リスト内包表記で生成が可能である。
### コード
``` python
import random

a = int(input("乱数の最小値："))
b = int(input("乱数の最大値："))
n = int(input("数列のサイズ："))

li = [random.randint(a, b) for i in range(n)]

print("")
print(li)
```
### 出力例
```
乱数の最小値：1
乱数の最大値：10
数列のサイズ：10

[5, 3, 7, 9, 5, 1, 4, 5, 3, 8]
```
# 3. ランダムな二次元配列を生成
Numpyモジュールを用いる。
Pythonの標準モジュールには入っていないため、事前にインストールしておく必要がある。
### コード
``` python
import numpy as np

a = int(input("乱数の最小値："))
b = int(input("乱数の最大値："))
x = int(input("配列の行数："))
y = int(input("配列の列数："))

li = np.random.randint(a, b+1, (x, y))

print("")

# ndarray形式（Numpyで多次元配列を扱うためのデータ構造）
print(li)

# リスト形式
print(li.tolist())
```
### 出力例
```
乱数の最小値：1
乱数の最大値：30
配列の行数：3
配列の列数：3

# ndarray形式
[[ 1 14 13]
 [15 21 14]
 [24  4 21]]

# リスト形式
[1, 14, 13], [15, 21, 14], [24, 4, 21]]
```
MUI Menu の中身を左右にスクロールして全体を表示する

横幅の小さいデバイスでは、メニューの中身の幅が大きいと画面をはみ出してしまいます。
そこで、中身を左右にスクロールすることで全体を表示できるようにします。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1188794/7d097a50-4d7c-89fd-e7e8-6658f2fa406d.gif)

## 実装

ポイントは `Menu` コンポーネントのプロパティの以下の2点です。

* `slotProps` / `paper` / `style` / `overflowX: auto`
* `MenuListProps` / `style` / `width: max-content`


```typescript
import './App.css';

import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';

const App = () => {
  return (
    <div className="content">
      <Menu
        open
        sx={{
          width: '10em',
        }}
        slotProps={{
          paper: {
            style: {
              overflowX: 'auto',
            },
          },
        }}
        MenuListProps={{
          style: {
            width: 'max-content',
          },
        }}
      >
        <MenuItem>VERY LONG MENU ITEM 1</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 2</MenuItem>
        <MenuItem>VERY LONG MENU ITEM 3</MenuItem>
      </Menu>
    </div>
  );
};

export default App;
```

Menu コンポーネントの内部実装は、Popover コンポーネントの中に MenuList コンポーネントが配置されたものです。
Popover コンポーネントの中の Paper に `overflow` 属性を設定し、Paper の子である MenuList の幅をその内容の MenuItem の幅に合わせることで実現します。

## 環境
* MUI v6
CursorエディタとVS Codeの競合: codeコマンドの削除方法


## はじめに

Cursorエディタをインストールする際、誤って「codeコマンドをインストール」にチェックを入れてしまい、既存のVS Codeの`code`コマンドと競合してしまうことがあります。この記事では、VS Codeはそのままに、Cursorが追加した`code`コマンドだけを安全に削除する方法を解説します。

## 環境

- Windows 11
- Visual Studio Code インストール済み
- Cursor エディタ インストール済み

## 問題

Cursorのインストール時に「codeコマンドをインストール」オプションを選択すると、以下の問題が発生します：

- VS CodeとCursorの両方が`code`コマンドを提供
- ターミナルで`code`コマンドを実行した際の動作が不安定
- 意図しないエディタが起動する可能性

## 解決方法

### 1. codeコマンドの場所を特定

PowerShellで以下のコマンドを実行して、現在の`code`コマンドの場所を確認します：

```powershell
Get-Command code -All | Format-List Source
```

出力例：
```
Source : c:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin\code.cmd
Source : c:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin\code
Source : C:\Users\[ユーザー名]\AppData\Local\Programs\Microsoft VS Code\bin\code.cmd
Source : C:\Users\[ユーザー名]\AppData\Local\Programs\Microsoft VS Code\bin\code
```

### 2. Cursorの`code`コマンドファイルを確認

以下のコマンドで、Cursorが追加した`code`コマンドファイルの存在を確認します：

```powershell
ls "c:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin\code*"
```

出力例：
```
    ディレクトリ: C:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        2025/01/03     17:24           2031 code
-a----        2025/01/03     17:24            172 code.cmd
```

### 3. Cursorの`code`コマンドを削除

確認できたファイルを削除します：

```powershell
Remove-Item "c:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin\code.cmd"
Remove-Item "c:\Users\[ユーザー名]\AppData\Local\Programs\cursor\resources\app\bin\code"
```

### 4. 削除の確認

再度`Get-Command`を実行して、VS Codeの`code`コマンドのみが残っていることを確認します：

```powershell
Get-Command code -All | Format-List Source
```

## 注意点

- 必ずコマンドの場所を確認してから削除を実行してください
- VS Codeの`code`コマンド（`Microsoft VS Code\bin`内）は削除しないように注意
- Cursor本体は削除せず、`code`コマンドのみを削除する方法です

## まとめ

この方法により、Cursorエディタ本体はそのままに、VS Codeの`code`コマンドとの競合を解消することができます。今後Cursorをインストールする際は、「codeコマンドをインストール」のオプションに注意しましょう。
OCI Cloud Free Tier をもぎ取れ

# 概要
OCI Cloud Free Tierを取得してみた。
二日掛かった。

# 方針
- 全ての組み合わせを排除しない。

# 手順

## https://www.oracle.com/jp/cloud/free/ を開く。

# Step１
■ アカウント情報
国/地域 ：日本
名 ：任意（漢字）
姓 ：任意（漢字）
電子メール ：任意（このメールアドレスでコンソールにログインします）
「私は人間です」 の画像認証をした後、「電子メールの検証」 をクリックします。
すると、「Verify your email to create your Oracle Cloud account」というメールが届くので 
「Verify email」 をクリックします。

# Step2 アカウント情報の入力
ここでは先ほど入力した情報は反映されていますので、より詳細なアカウント情報を入力します。
■ アカウント情報
別名 ：任意（英語）
パスワード ：任意（小文字、大文字、数字、特殊文字を1文字ずつ含めた8文字以上）
Customer type ：Individual（個人利用のため）
部門名 ：任意（ここはわからなかったので、私は技術と入力しました）
クラウド・アカウント名 ：任意（デフォルトではメールアドレスの＠以前まで）
ホームリージョン ：任意（日本は東京リージョンと大阪リージョンがあります）
「使用条件」 を確認して 「続行」 をクリックします。

# Step3 住所情報の入力
ここでは住所情報を入力していきます。
私は住所を英語で入力しましたが、漢字の住所だとはじかれる場合があるようです。
■ 住所情報
住所行1 ：市区町村より後の住所（先ほど変換した英語表記の住所を1行で入力）
市区町村 ：任意（○○区などは英語表記だと○○-kuになります。私は漢字で入力しました。）
都道府県 ：任意（漢字と英語があり、どちらか分からなかったため私は英語で入力）
郵便番号 ：xxx-xxxx（ハイフンを忘れずに）
電話番号 ：+81 xx xxxx xxxx（070などから始まる番号の最初の0は省いて70から入力、ハイフン不要）
間違いがないかを確認して 「続行」 をクリックします。

# Step4 支払検証の入力
ここではクレジットカードの入力をします。
注意、プリペイドカードは使用できません。
また、有効期限が迫ったクレジットカードを登録しようとするとはじかれる場合があるそうです。
■ Add Payment Method
Billing Information ：これまでの情報が入力済み
Payment Details ：クレジットカードの情報を入力します。
間違いがないかを確認して 「Finish」 をクリックします。
最後に 「同意」 にチェックをつけて 「無料トライアルの開始」 をクリックします。

# 出くわしたエラー1
データを使用できません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d4129fc9-e3f8-04f9-c7bf-7399a3b09c94.png)

クリアした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/41b7e2bf-1a76-9578-5fe7-120fba0dd4c9.png)

# 出くわしたエラー2
時間切れアウト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/06612d58-412d-9b66-b155-bcc31f2f614f.png)

# 出くわしたエラー3
タランザクションの処理中にエラーが発生しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/333ece7b-72ac-50ed-0d71-aecc16dc743c.png)

# ゴール

![ok4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/a003c3be-7a65-221c-589e-8e083804bdf9.png)



以上。
phpstorm 設定のバックアップと同期

phpstormの設定を新しいパソコンに移動させたい。

今まではExport,Importをやっていたが、今は


![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/003459a3-75c8-d5f8-2148-4c0bb6f491f1.png)

これで設定できる。

JetBrainstoolboxをインスコする必要もある。

ただ、サーバー情報はうまく引き継ぐことができないので、

このプロジェクトのみでサーバー情報を表示するのチェックを外して、
違うpcには別途でパスワードを設定していかなきゃいけない。

しかもsync見するとサーバーの接続情報が消えちゃうし。

きをつけてね。
AI 技術を使って画像から似ている商品を見つけたい🔍

こんにちは！この記事では、OpenAI が開発した機械学習モデル「CLIP」とベクトルデータベース「Pinecone」を使って、アップロードした画像に似た商品を見つけるシステムを簡単に作れないかの試みを記載していきます！

この記事で紹介するシステムは、まだ完璧なものではありませんが、徐々に改善を重ねながら精度を高めています。ぜひこの記事を参考にして、みなさんも試してみてください！

# どんなことができるの？

例えば、こんなシーンで活躍します：

- ECサイトでの類似商品提案：写真をアップロードするだけで、似たデザインの商品をすぐに見つける
- 画像ベースの検索体験：テキスト検索では見つけにくいアイテムをビジュアルで簡単に検索

AIを使えば、これらが驚くほど簡単に実現できるはず！

# 使うツールのご紹介

### CLIPとは？

CLIPはOpenAIが開発したモデルで、画像と言語を同じ空間に変換する技術です。画像を「数字の特徴量」に変換することで、他の画像との類似度を計算できるようになります。

### Pineconeとは？

Pineconeは、大量のデータを高速で検索・保存できるクラウドサービスです。AIで生成された特徴量データ（ベクトル）を使った類似検索に最適です。

### rembgとは？

rembgは、画像の背景を除去するPythonライブラリです。背景を取り除くことで、商品の形状や色にフォーカスした特徴量抽出が可能になり、検索精度が向上します。

# システム全体の流れ

この仕組みは以下の手順で動作します：

1. ユーザーが画像をアップロード
2. rembgを使用して画像の背景を除去
3. CLIPで画像の特徴量をベクトル形式で抽出
4. Pineconeに保存されている商品データと類似度を比較
5. 最も似ている商品を上位5件表示

このプロセスは現在も改良中であり、背景の処理や類似度計算の精度向上を目指しています！

# 実際に作ってみよう！

今回の記事では、コードの詳細を省略し、GitHubリポジトリにまとめています。以下のリンクからソースコードを確認し、ぜひ試してみてください！

➡ マスタデータ登録リポジトリ：[clip-pinecone-vectorizer](https://github.com/miyukikoga/clip-pinecone-vectorizer)

➡ 検索のサンプルコード：[sample_query.py](https://github.com/miyukikoga/clip-pinecone-vectorizer/blob/main/sample_query.py)

必要なライブラリや環境設定は README に記載していますので、そちらを参考にしてください。

### 実装状況と今後の展開

現在はまず、マスタデータの登録処理を作成し、簡単なデータをPineconeに登録できる状態を整えました。また、登録データを基に類似検索を試すための検証用スクリプトも準備済みです。

次のステップでは、アップロードされた画像から特徴量を抽出し、登録データとの類似度を比較する機能の実装を進めていきます。

随時改善を進めながら、より多くのデータセットや条件に対応できるようにしていく予定です。

# 検証結果

検証では、ルイヴィトンのモノグラムのトートバッグを中心に評価し、5位以内に表示された確率は76.9%（10/13）という結果になりました。
ただし、今回使用したデータは十分に多いとは言えず、あくまで現時点での暫定的な結果です。

特に、光の当たり方やバッグの置き方によって検索結果が左右されることが確認できました。この点についても、さらなる検証や調整が必要です。これらを改善することで、さらなる精度向上が期待できると思います！

# まとめと所感

この記事では、CLIPとPineconeを活用して画像検索システムを構築する試みを紹介しました。現在も改良中のシステムですが、基礎的な部分は実現可能であり、応用次第では幅広い活用が期待できます。

技術的なチャレンジを重ねながら、少しずつシステムの完成度を上げていきたいと考えています。改良を重ねる中で、新たな可能性や応用の道が開けていくことを楽しみにしています🙌
Gmail、Netflixもクラウド！身近なサービスから学ぶクラウドの基本とメリット

はじめに
=
「クラウド」という言葉、最近よく耳にしますよね。
これは、インターネットを通じて、サーバーやストレージ、ネットワーク、ソフトウェアといった、コンピュータを使うために必要な資源を利用する仕組みです。

身近な例で言うと、写真や動画をオンラインストレージに保存したり、ストリーミングサービスで映画やドラマを視聴したりするのも、クラウド技術が活用されています。

この記事では、そんなクラウドの仕組みについて、分かりやすく解説していきたいと思います。


クラウドってそもそも何？
=
前述の通り、クラウドとは、インターネットを通じて、サーバーやストレージ、ソフトウェアなどのコンピューター資源を利用する仕組みです。

必要な時に必要なだけインターネット経由でコンピューター資源を利用できます。

コンピューターを使うとなると、機器の購入や管理に手間がかかっていましたが、クラウドの登場によりコスト削減や柔軟な運用が可能になりました。

例えば、メールサービスやオンラインストレージ、動画配信サービスなどが身近なクラウドの活用例です。


身近なクラウドサービス
=

* **メールサービス（例：Gmail、Yahoo!メール）:** 
メールを送受信する際、自分のパソコンにメールソフトをインストールする必要はありません。インターネットに接続し、ウェブブラウザからメールサービスにアクセスするだけで利用できます。これは、メールのデータや処理がクラウド上で行われているためです。

* **オンラインストレージ（例：Google Drive、Dropbox、iCloud）:** 
写真や動画、ドキュメントなどのデータをインターネット上のストレージに保存できます。これにより、パソコンやスマートフォンなどの端末の容量を節約できるだけでなく、どの端末からでもデータにアクセスできます。これも、データがクラウド上に保存されているからです。

* **動画配信サービス（例：Netflix、YouTube、Amazon Prime Video）:** 
映画やドラマ、音楽などのコンテンツをストリーミングで視聴できます。コンテンツのデータはクラウド上に保存されており、ユーザーはインターネットを通じて必要な時に再生できます。

クラウドのメリット
=
クラウドを利用することには、様々なメリットがあります。
ここでは主なメリットをいくつかご紹介します。

* **コスト削減:** 
従来のように自社でサーバーなどの機器を購入・管理する必要がないため、初期費用や運用コストを大幅に削減できます。

* **柔軟性・拡張性:** 
必要な時に必要なだけリソースを利用できるため、ビジネスの変化に柔軟に対応できます。例えば、アクセスが急増した場合でも、サーバーの処理能力を増強することで対応できます。

* **どこからでもアクセス可能:** 
インターネット環境があれば、場所や端末を問わずデータやサービスにアクセスできます。これにより、リモートワークなど多様な働き方を支援します。
* **運用管理の負担軽減:** 
サーバーの保守・管理、ソフトウェアのアップデートなどはクラウドサービス提供事業者が行うため、自社のIT担当者の負担を軽減できます。

* **最新技術の利用:** 
クラウドサービス提供事業者は常に最新の技術を導入しているため、ユーザーは常に最新の環境を利用できます。


クラウドの種類
=
クラウドには、大きく分けて3つの種類があります。

* **IaaS（Infrastructure as a Service）:** 
サーバー、ストレージ、ネットワークなどのインフラをインターネット経由で提供するサービス。ユーザーはOSやミドルウェア、アプリケーションなどを自由に構成できます。
例：Amazon EC2、Microsoft Azure Virtual Machines

* **PaaS（Platform as a Service）:** 
アプリケーションの開発・実行環境をインターネット経由で提供するサービス。ユーザーはアプリケーションの開発に集中できます。
例：Google App Engine、AWS Elastic Beanstalk


* **SaaS（Software as a Service）:** 
ソフトウェアをインターネット経由で提供するサービス。ユーザーはソフトウェアのインストールや管理を行う必要はありません。
例：Gmail、Salesforce、Dropbox


まとめ
=
この記事では、身近なサービスを例に挙げながら、クラウドの基本とメリットをご紹介しました。
クラウドは、現代のIT環境において不可欠な存在と言えるでしょう。
コスト削減、柔軟性、そして場所を選ばないアクセス性といったメリットは、個人利用から企業における大規模な活用まで、幅広いニーズに対応しています。
次回は、クラウドの種類別に具体的なサービスを掘り下げてご紹介したいと思います。
最後までお読みいただき、ありがとうございました。