OmniAICreator/Qiita-1.07M huggingface dataset:
すぐ忘れるクッキーとセッションの話


**クッキー（Cookie）について**

*   **クッキーは、ウェブサイトがあなたのパソコンやスマホのブラウザに一時的に保存する小さな情報ファイルのこと**です。例えるなら、ウェブサイトがあなたに「このことを覚えておいてね！」と渡すメモのようなものです。
*   **ブラウザ（インターネットを見るためのアプリ）の中に保存されます**。
*   **どんな情報が保存されるの？**
    *   ウェブサイトにログインしたときの**ユーザー名**などの情報。
    *   オンラインショップで**カートに入れた商品**の情報。
    *   ウェブサイトをどのように見たかという**利用履歴**。これは、あなたに合った広告を表示するために使われることがあります。
*   **何のために使うの？**
    *   一度ログインすれば、**次に同じサイトを開いたときに自動的にログイン**できるようにするため。
    *   ショッピングサイトで、**カートに入れた商品がそのまま**残っているようにするため。
    *   あなたが興味を持ちそうな**広告を表示**するため。
*   **例:**
    *   あるオンラインショップで洋服をカートに入れた後、別のページを見ても、再びそのショップに戻るとカートに商品が入ったままになっています。これは、**クッキーがカートに入れた商品の情報をあなたのブラウザに記憶している**からです。
    *   あなたが最近、旅行に関するウェブサイトを見ていたとします。その後、別のウェブサイトを見ていると、旅行の広告が表示されることがあります。これは、**クッキーがあなたの閲覧履歴を記憶している**ためです。
*   **注意点:** クッキーはあなたのブラウザに保存されるため、**他人に盗まれて悪用される可能性**があります。そのため、ウェブサイト側もクッキーの情報を安全に管理するように注意しています。

**セッション（Session）について**

*   **セッションは、あなたがウェブサイトを利用している間（ログインからログアウトまでなど）の一連の操作のこと**を指します。例えるなら、ウェブサイトにアクセスしている間だけ有効な「一時的な入場パス」のようなものです。
*   **セッションに関する情報は、ウェブサイトのサーバー（情報を管理しているコンピューター）に一時的に保存されます**。
*   **セッションIDって何？** ウェブサイトのサーバーは、アクセスしてきた人を区別するために「セッションID」という特別な番号を発行します。このIDは、例えるならあなたの「入場パス」に書かれた整理番号のようなものです。
*   **クッキーとセッションIDの関係:** サーバーが発行したセッションIDは、あなたのブラウザにクッキーとして保存されることが多いです。次にあなたが同じウェブサイトにアクセスするとき、ブラウザはクッキーに保存されたセッションIDをサーバーに送ります。サーバーはこのIDを使って、あなたが誰なのか、以前にどんな操作をしたのかを思い出すことができるのです。
*   **何のために使うの？**
    *   あなたがログインしている状態を**ウェブサイトが覚えている**ようにするため。
    *   複数のページにまたがる操作（例えば、オンラインショッピングで商品をカートに入れてから購入を完了するまで）で、**あなたを同じユーザーとして認識**し続けるため。
    *   クッキーだけで情報を管理するよりも**安全性が高い**と考えられています。なぜなら、重要な情報はあなたのブラウザではなく、ウェブサイトの安全なサーバーに保管されているからです。
*   **例:**
    *   あなたがウェブサイトにログインした後、いくつかのページを移動しても、ログアウトするまでずっとログイン状態が続きます。これは、**セッションがあなたのログイン状態をサーバー側で管理している**からです。あなたのブラウザに保存されたセッションIDというクッキーが、サーバーに「この人はログインしている人ですよ」と伝えているのです。

**クッキーとセッションの違い**

| 特徴          | クッキー                                  | セッション                                        |
| ------------- | ----------------------------------------- | ------------------------------------------------ |
| 保存場所      | **あなたのブラウザ**      | **ウェブサイトのサーバー**           |
| 保存されるもの | ユーザー情報、カート情報、利用履歴など | ユーザーを識別するための**セッションID**や一時的なデータ |
| 有効期限      | 設定によって様々（期限切れになるまで、またはブラウザを閉じるまで） | 一般的に、ウェブサイトを利用している間だけ（ログインからログアウトまでなど） |
| セキュリティ  | 盗難・悪用のリスクがある      | サーバーで管理するため、比較的安全       |
| 例            | カートの商品、広告の表示            | ログイン状態の維持              |

**まとめ**

クッキーとセッションは、どちらもウェブサイトがあなたとのやり取りをスムーズに行うために使われる仕組みですが、**情報が保存される場所と役割が異なります**。クッキーはあなたのブラウザに情報を覚えさせるためのメモ、セッションはウェブサイトがあなたを一時的に認識するための仕組みと考えると良いでしょう。セッションを利用するためには、多くの場合、セッションIDという情報がクッキーの形であなたのブラウザに保存されます。
【初心者向け】C言語の構造体ってどういう仕組み？アライメントの話をざっくり解説！

久しぶりにc言語を触っていて
そういえば構造体の仕組みをあんまり理解していなかったなと思い、
改めて調べてみました。

## 構造体とは?
構造体は、異なる型のデータを1つにまとめて扱うための「設計図」です。

例えば、以下のように定義できます。
```c
typedef struct s_student{
	int		id;
	char	sex;
	int		age;
	char	name[20];
	double height;
	double weight;
}t_student;
```
この時点では、メモリ上に実体はありません。
あくまでも設計図だからです。

<br>

構造体変数を定義すると、初めてアドレスが割り当てられます。

```c
int main(void){
t_student student;

printf("構造体の先頭アドレス : %p\n", &student);
}
```
実行結果 (例)
```
$> 構造体の先頭アドレス : 0x7fffc3d92390
```

---

構造体変数を定義したらアドレスが割り当てられることは分かったけど
いったいどの範囲までメモリ領域が確保されているんだろうって思いましたよね?

<br>

メンバ変数のアドレスを見てみましょう！

```c
printf("構造体の先頭アドレス : %p\n", &person);
printf("idのアドレス : %p\n", &person.id);
printf("sexのアドレス : %p\n", &person.sex);
printf("ageのアドレス : %p\n", &person.age);
...
```
出力結果 (例)
```bash
$> 
構造体の開始アドレス: 0x7ffcdbe58b70
idのアドレス : 0x7ffcdbe58b70
sexのアドレス : 0x7ffcdbe58b74
ageのアドレス : 0x7ffcdbe58b78
```

<br>

ふむふむ、なるほど...ん？
sexのアドレスとageのアドレスが4バイトずれてる...
メンバ変数sexはchar型で1バイトだからageは```0x7ffcdbe58b75```から始まるべきでは?
<br>
なぜ```4バイト```ずれてしまったのか

## アライメント(整列)のためです

構造体の中では、パディング(隙間)を入れることでアライメントを保っています。

```shell
構造体の開始アドレス: 0x7ffcdbe58b70
[0x7ffcdbe58b70  -  0x7ffcdbe58b73]　→ int id (4バイト)
[0x7ffcdbe58b74] → char sex (1バイト)
[0x7ffcdbe58b75  -  0x7ffcdbe58b77] パディング (無視される隙間)
[0x7ffcdbe58b78  -  0x7ffcdbe587b] → int age (4バイト)
```


### なぜアライメントを保つ必要があるのか
パソコンのCPUがデータアクセスを効率的に行うためです。

現代のパソコンは、メモリを「ワードサイズ」で読み書きを行います。
32ビットシステムなら4バイトずつ、64ビットシステムなら8バイトずつ処理されます。データがアライメントされていないと、CPUは複数回メモリへアクセスする可能性がありパフォーマンスが低下します

<br>

そのため、各データ型はバイトのサイズに合わせたアライメントを持ちます。
- ```char```: 1バイト境界(どこでも配置可能)
- ```short```: 2バイト境界(2の倍数のアドレスに配置可能)
- ```int```, ```float```: 4バイト境界(4の倍数のアドレスに配置可能)
- ```double```: 8バイト境界(8の倍数のアドレスに配置可能)


## おわりに
構造体の仕組みを深掘っていくと
メモリの配置にきちんとしたルールや工夫があることが分かりました！
これからも精進していきます
【MCP × VS Code】 リポジトリ単位で利用するMCPをカスタムする方法 2025.4.7版

## はじめに

この記事は2025年4月7日時点での情報を基に作成しています。
お気づきの点がありましたらコメントいただけると幸いです。

## 結論

`.vscode` に `mcp.json`を作成し、従来のsetting.jsonに記載する`servers`と同じ記法でMCPを追加するだけ。


## 概要
グローバルの`setting.json`に全てのMCPを追加していくと管理が複雑になったり誤った呼び出しが度々起きることがあります。
また、`.vscode/setting.json`にserversを追加してもCopilot Agentは認識することができません。
そこでMCPをリポジトリ単位で追加する方法を調べました。

## 前準備

1. VS Codeを最新版にアップデートし、以下でGithub Copilotをインストールしておく
2. `setting.json` に `"chat.agent.enabled": true,` を追加し、エージェントを利用できるようにしておく
https://code.visualstudio.com/docs/copilot/chat/chat-agent-mode#_use-agent-mode


## セットアップするMCP

今回追加するのは以下のMCP

https://github.com/awslabs/mcp

## 方法

1. Github Copilot Chatでモードを「エージェント」に切り替え、「コンテキストを追加する」の左にあるアイコンをクリック

2. 一番下にある「その他のツールを追加」を選択
 ![スクリーンショット 2025-04-07 0.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840428/d38be36e-745d-4c07-9f52-8b497fd99c05.png)

3. 「MCPサーバの追加」>「コマンド(stdio)」を選択

4. コマンドに`uvx` と入力（ここは後で変えます）

5. サーバIDは`awslabs.aws-documentation-mcp-server`を追加

6. 「ワークスペースの設定」を選択

7. 以下の`awslabs.aws-documentation-mcp-server`に記載されている設定に合わせ、以下の通りに書き換え

    https://github.com/awslabs/mcp?tab=readme-ov-file#installation-and-setup
    
    ```json
    {
      "servers": {
        "awslabs.aws-documentation-mcp-server": {
          "command": "uvx",
          "args": ["awslabs.aws-documentation-mcp-server@latest"],
          "env": {
            "FASTMCP_LOG_LEVEL": "ERROR"
          }
        }
    }
    ```

8. Github Copilot Chatの入力欄にある更新マークを押し、設定を再読み込みする

    ↓こんなの
    ![スクリーンショット 2025-04-07 0.49.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840428/ec8e110e-5465-4b8f-bae7-205362e8d384.png)

9. ツールマークを押すと設定で追加したAWSのtoolsが使えるようになる


※直接`.vscode/mcp.json` を作成した後に再読み込みでも同様に認識できます。

## 利用結果

![スクリーンショット 2025-04-07 0.50.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2840428/ba17c675-cd6c-452f-afa2-6e53f201577b.png)

無事AWSドキュメントから検索することができました。

これでチームでAIエージェントを同じ水準で使えるだけでなく、自社サービスMCPとの連携時にも簡単に共有できますね。
Arch Linux 環境におけるセキュリティ対策（自衛策）

## 最初に
やるべきかどうかは置いといて、セキュリティ対策を調べたときにこんな設定があったってことで、学んだことを備忘録としてまとめます。
あとArch Linux 特有の内容薄いかも

## ファイアウォールの導入
**選択肢**
| ツール | 特徴 |
|:-----------|------------:|
| ufw | Ubuntu由来の簡単操作ツール |
| iptables | 伝統的・柔軟 |
| nftables | 新標準。iptablesの後継 |

iptablesって昔からあるようですが、その分(？)若干難解寄りな気がします。

## ufw のインストールと設定
```
sudo pacman -S ufw
sudo systemctl enable ufw
sudo systemctl start ufw
```
基本設定：
```
sudo ufw default deny incoming
sudo ufw default allow outgoing
```
特定ポートを開放（例：SSH）：
```
sudo ufw allow 22
```
状態確認：
```
sudo ufw status
```
## アンチウイルスの導入
Linuxでもマルウェアはゼロではありません。特にファイル共有やダウンロードが多い場合、スキャンは割と重要です。

**ClamAV の導入と使い方**
```
sudo pacman -S clamav
sudo freshclam  # ウイルス定義の更新
```
ファイル/ディレクトリをスキャン：
```
clamscan -r ~/Downloads
```

## 最小権限の原則
当たり前ですが**rootでの常用操作は危険です。**
* 普段は一般ユーザーアカウントを使用。
* 必要な時だけ sudo を使用する。
**sudo の設定**
```
sudo pacman -S sudo
sudo visudo
```
%wheel ALL=(ALL:ALL) ALL の行を有効にして、wheelグループのユーザーに sudo 権限を付与します。
そもそも環境構築したてのArch Linuxってsudoすら入ってないので、rootユーザーから一般ユーザー作ったら真っ先にやっとくべきですね。。。

## AUR パッケージの安全な扱い方
AUR（Arch User Repository）は便利ですが、信頼性はピンキリです。
**安全な利用のポイント**
* 信頼できるメンテナのものか確認
* PKGBUILD の内容を必ず目視確認

例：yay を使う場合
```
yay -S <パッケージ名>
```
途中で PKGBUILD を表示して「怪しいURLがないか」「不審なスクリプトがないか」を見るのが重要です。

## ログとネットワークの監視
システムの「異変」にいち早く気づくには、ログ確認とネットワーク監視が役立ちます。
**journalctl**
```
journalctl -b -p err
```
過去のログ確認：
```
journalctl --since "2 days ago"
```
**systemd-analyze**
起動時間分析：
```
systemd-analyze
systemd-analyze blame
```

**ネットワーク監視**
```
sudo pacman -S iftop net-tools
sudo iftop -i wlan0
netstat -tulnp
```

## 自動通知は基本ナシ、自分でチェックが必要
Arch Linux 環境では、セキュリティ通知の自動化とか特にされていないので自分で定期的に監視・スキャンを行うのが基本です。
ただ、SSEC や Snort, Suricata などの 侵入検知システム（IDS） を導入すれば、多少自動化も可能になるかと。

## まとめ
| 対策項目 | 実施例 |
|:-----------|------------:|
| ファイアウォール     | ufw を導入、デフォルト拒否 |
| アンチウイルス | clamav を導入して定期スキャン |
| 最小権限 | 普段は一般ユーザー + sudo の活用 |
| AURの取り扱い | PKGBUILD を毎回確認 |
| ログ監視 | journalctl / systemd-analyze |
| ネットワーク監視 | iftop / netstat でトラフィック確認 |
| (IDSの検討) | (OSSEC / Snort など) |

## 最後に
Arch Linux は自由度が高い代わりに、OSインスコした直後はまじで何も入ってないので、セキュリティを学ぶには良い教材な気もします。
君の性格は変えられない。だから僕はオーバーライドする

エラーの重複が起こった。

自分で作成したエラーを出力するコードと、コンポーネントが自動で用意してくれているエラーが被ったのだ。

重複を消すには自分で用意したエラー出力を削除するか、コンポーネント側を削除する必要がある。

コンポーネント使っていない箇所でもエラー文は使っているので、コンポーネント側の出力を抑えれば統一感出るから良いんじゃない？という話になった。

`vendor`の中身をいじっていたのだが、それはあまりよろしくないとのこと。

その時に出てきたのが**オーバーライド**だ。





# オーバーライド（Override）とは

**オーバーライド(Override)** は親クラスや既存のクラスが持つ処理を、子クラス側で再定義（上書き）すること。  
再定義することで既存クラスの機能や処理を部分的に変更したり追加できるようになる。


---

## なぜ「ベンダー（vendor）を直接いじる」ことはよくないのか

Laravel をインストールすると`vendor` フォルダの中に公式や他のパッケージ開発者が提供するコードが格納される。
下記の理由から`vendor`直下を直接いじることは推奨されない。

1. **バージョンアップで上書きされる**  
   - `composer update` などでライブラリを更新すると、`vendor` フォルダ内のコードがアップデートされ、**変更を加えた部分が上書きされて消えてしまう**
2. **想定外の不具合が起きる**  
   - ライブラリの動作を直接変更すると依存している他のコードやパッケージにも影響を与えバージョンアップ時に不整合が起きる可能性が高まる

そのため**複製（継承）してオーバーライドする**という方法が使われる。

---

## Laravel でのオーバーライドの考え方

Laravel に限らず、PHP のクラスをオーバーライドする典型的な方法

**既存クラスを継承したクラスを作る**  
```php
   <?php

   namespace App\Overrides;

   use Vendor\Package\OriginalClass;

   class MyCustomClass extends OriginalClass
   {
       // 上書きしたいメソッドを同名で定義する
       public function someMethod($param)
       {
           // 親クラスのメソッドを呼び出すこともできる
           // parent::someMethod($param);

           // ここで独自のロジックを追加する
           // ...
       }
   }
```



`Vendor\Package\OriginalClass`（オリジナルクラス）を 継承 (extends) した`MyCustomClass`を新規作成。
- 上書き（再定義）したいメソッドを、同じメソッド名で書き直す
- 必要であれば、`parent::メソッド名()`を呼び出すことで親クラスの処理も利用できる



## どう使う

例: Laravel の Blade コンポーネントをオーバーライドする場合

`resources/views/vendor`にパッケージから提供されているコンポーネントの Blade ファイルがある場合はそのフォルダ構成を別名で複製。自分のカスタムコンポーネントを作成する。
1.	`resources/views/vendor/XXX-package/components/button.blade.php`というコンポーネントがあると仮定
2.	`resources/views/components/my-button.blade.php`という形で複製する
3.	修正したい箇所を編集し、テンプレートとロジックを変更
4.	実際には`x-my-button`などのタグとして呼び出す

⸻


**まとめ**
- オーバーライド (Override) とは、元となるクラスやメソッドの処理を 再定義 (上書き) すること
- ベンダーフォルダ (vendor) を直接編集するのは厳禁。更新で消される危険があるため、必ず複製または継承によるオーバーライドを行う

オーバーライドの実装手順
1. 既存クラスを継承したクラスを新規作成
2. 親クラスのメソッドを同名で再定義（必要なら`parent::`で親の処理も利用）

- Blade コンポーネントなら別名で複製して、カスタム版として利用
明日はこれらを念頭に対応を進める所存。
Cursorの真価はウルトラワイドでこそ発揮される

※本投稿はAIによるいい感じ（？）の校正を入れています。
## はじめに

Cursor、使ってますか？  
もうAIエディタなしではやっていけない体になってしまった一方で、  
**「画面…狭くない？」** と密かに感じていました。

僕はVSCodeのころから、画面を2列に分割して使い、サイドバーを `⌘+B` で開いたり閉じたりしていました。  
Cursorに移行してからは、そこに**AIペイン**（AIとのチャット画面）が加わり、 `⌘+L` での表示切り替えも日常に。

しかし、MacBookだけで作業すると、サイドバーとAIペインを同時に表示するとエディタは1列が限界。  
2列表示にすれば全体がぎゅうぎゅうになります。

なんとかやっていたけど、やっぱり窮屈でした。

そんなある日（本日）、**ウルトラワイドモニター（29インチ）** を導入してみたところ、Cursorでの作業環境が劇的に改善されました。



## ノートPCだけのCursor = 1口コンロのキッチン

MacBookだけでCursorを使うのは、まるで**1口コンロのキッチンで自炊**しているようなもの。  
複数の料理（作業）を並行して進めるには、あまりにもスペースが足りません。

- **サイドバーを開くとAIチャットを閉じることに**  
  →（まな板を置いたら他の調理器具が置けない感覚）
- **コードを書いて → AIチャットを開いて → ディレクトリを確認して… のループ**  
  →（1品作っては片付ける、の繰り返し）
![名称未設定-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918299/f87f647f-b72a-4a8e-9d20-088b8e19bd7a.gif)

ちなみにワイドモニターにしたことで多少効率は上がっていましたが、  
それでも **「1口コンロにグリルがついた程度」** という印象で、まだ狭いと感じていました。

## 3口コンロのアイランドキッチン、それがウルトラワイドモニター

ウルトラワイドモニターでCursorを使ってみると、開発環境が **「アイランドキッチン」** のように広々になりました。エディタが見やすく、サイドバーも常時表示でOK。

- **横並びでも余裕の構成：**  
  チャット画面 + エディタ1（広い） + エディタ2（広い） + サイドバー
- **画面の切り替え不要：**  
  AIに質問しながらコードを修正し、ディレクトリ構成も確認しながら作業可能
- **ペアプロのようなAIとのやりとりがノンストレス：**  
  常に「自分がどこにいるか」がわかるのは、僕のような初学者にとって特に重要でした
 ![スクリーンショット 2025-04-06 23.38.45（2）.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918299/56b29731-4b61-40cc-81b3-312049fa1379.jpeg)

結果として、  
**レシピを見ながら複数の料理を同時に作るように、Cursorでの開発ができるようになりました。**

## Before / After

| 項目 | MacBookのみ (1Rキッチン) | ウルトラワイド (アイランドキッチン) |
|------|----------------------|--------------------------------------|
| サイドバーの表示切替 | 頻繁、つらい | 不要、一望できる |
| ファイル構成の把握 | 把握しにくい | 常に把握できる |
| マルチファイル編集 | 1ファイル（1列表示） | 2ファイル（2列表示）+余裕あり |
| 開発効率 | 片付けてから次の調理 | 複数品目を並行して調理可能 |
| メンタル | ストレス | 爽快 |

## ついでに捗るあれこれ

ウルトラワイドモニターは、Cursorだけでなく以下の作業にも相性抜群でした：

- **YouTubeでチュートリアルを見ながらコーディング**
- **ブラウザで調べながらIllustratorなどのデザイン作業**
- **Obsidianの4列表示で思考の整理**

## 結論：モニターの横幅はCursorの作業効率に影響する

Cursorでの開発環境を整えるには、PCやツールの性能だけでなく、  **「画面の横幅」も重要**だと実感しました。

Cursorは間違いなく強力なAIエディタ。  
でも、そのポテンシャルを最大限に引き出すには、**狭い1口コンロでは足りない。**  

広い視野とスペースを提供してくれる、  
**「アイランドキッチン = ウルトラワイドモニター」** が必要でした。

## 参考
今回購入したウルトラワイドモニターは価格コムで出てきたJAPANNEXTのJN-IPS292WFHD-HSP-C65Wという機種です。
ウルトラワイドでUSB PD機能が付いて32,000円程度でした。
接地面からディスプレイ下端までの長さをメーカーに問い合わせたところ、実寸値を丁寧にお知らせいただいたので大変助かりました（モニタ下にmacbookを置いて高さがぴったりです）。
![338179_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918299/973f282c-5662-45f7-988a-5b0c5e4e9dd5.png)
AIに対してこれからエンジニアが必要とされるスキルをAIに考えさせてみた。

# 生成AIが変えるエンジニアの未来【今こそ知っておきたいスキルとキャリア】

## はじめに：この記事は誰向け？

- 最近よく聞く「生成AI」が気になっているエンジニア・学生
- これからのエンジニア像について考えている人
- AIによって仕事が奪われるのでは…と少し不安な方

そんなあなたに向けて、**生成AIとエンジニアの未来**について、技術・スキル・キャリアの面から解説します。

---

## 生成AIの進化とエンジニアを取り巻く環境の変化

ChatGPT、GitHub Copilot、Midjourneyなど、近年の生成AIは驚異的なスピードで進化しています。  
そして、その影響は当然ながらエンジニアリングの現場にも大きな影響と変革を与え始めています。

### 🔄 従来の開発スタイルが変わる

| 領域 | AIによる変化 |
|------|---------------|
| コーディング | 関数やスニペットの自動生成 |
| テスト・デバッグ | テストコード生成、エラー解析 |
| ドキュメント | 自動的な仕様書やREADMEの生成 |
| 企画・設計 | プロンプトで要件定義や構成図提案 |

---

## エンジニアに求められる新たなスキルセット

生成AIを活用する時代には、以下のようなスキルが重視されていきます。

### 💡 プロンプトエンジニアリング
AIに「何を」「どう伝えるか」が成果を大きく左右します。  
具体例：
```text
NG: ログイン画面作って
OK: ReactとTailwind CSSを使って、メールアドレスとパスワードでログインできるフォームを作ってください。
    バリデーションとエラーメッセージも含めてください。
```

### 🧐 AIモデルの理解と活用
- 代表的なAI（GPT, DALL·E, Claudeなど）の特徴
- APIの使い方や活用パターンの理解

### 🔐 セキュリティ意識
- AIによるデータ漏洩や悪用リスクへの理解
- ユーザー保護のための設計力
---

## 今後求められるエンジニア像とは？

生成AI時代のエンジニアには、以下のようなマインドと能力が重要になっていきます。

### ✅ 創造性と問題解決力
単純作業はAIが得意。だからこそ「何を作るか」を考える力が問われます。

### 🏗️ 抽象化と設計力
AIを組み込む前提でのシステム設計やアーキテクチャ設計が求められます。

### 🤝 コミュニケーションとチーム連携
多職種（PM、デザイナー、マーケ）との協働が当たり前に。

### ⚖️ 倫理と責任
AIの偏りや誤判断をどう制御するか。技術だけでなく倫理観も武器に。

### 📚 学び続ける姿勢
技術は常に変化。学びを止めないことが最大のスキル。

---

## エンジニアのキャリアパス（生成AI時代）

以下のようなロールが今後ますます求められていきます。

| 役割 | 説明 |
|------|------|
| AIスペシャリスト | AIの実装や研究に特化した技術者 |
| AIアーキテクト | AIを含むシステム全体を設計 |
| AIコンサルタント | 企業にAI導入を提案・設計支援 |
| AIエバンジェリスト | 社内外へAI活用を広める広報・教育担当 |

---

## まとめ：AIに置き換えられるのではなく、AIを使いこなす

- AIは脅威ではなく**最強の相棒**
- キーワードは「創造性 × 技術力 × 倫理観」
- スキルとマインドをアップデートし続けることで、可能性は無限大

---

## 📌 参考リンク

- [OpenAI API Documentation](https://platform.openai.com/docs)
- [Prompt Engineering Guide](https://www.promptingguide.ai/)
- [GitHub Copilot](https://github.com/features/copilot)

---

## ✍️ 最後に

今後も技術記事・生成AIやエンジニアキャリアについて発信していきます！  
「いいね」や「ストック」、そして**フィードバックのコメント**もお待ちしています🙌
Rails8 + PostgreSQL16 で作成した API を Terraform で AWS App Runner にデプロイ

# 仕様

- Rails 8.0.2
    - API モード
- Ruby3.4.2
- PostgreSQL 16.6
    - Aurora Serverless v2

# ソースコード

- アプリケーション
    - https://github.com/kazama1209/rails8-api-postgres16
- インフラコード（Terraform）
    - https://github.com/kazama1209/rails8-api-postgres16-apprunner

サンプルコードを用意したので、手っ取り早く進めたい方は上記を clone してください。

#  環境構築

### アプリケーション

```
$ docker compose build
$ docker compose run --rm api bundle exec rails db:prepare
$ docker compose up

$ curl http://localhost:3000/api/v1/users
{
  "users": [
    {
      "id": 1,
      "name": "山田 太郎",
      "email": "yamada_t@example.com"
    },
    {
      "id": 2,
      "name": "山田 花子",
      "email": "yamada_h@example.com"
    }
  ]
}
```

users 一覧のデータが返ってくれば OK です。

### インフラコード（Terraform）

#### 初期化
```
$ terrarom init
```

#### 環境変数をセット

```
$ cp terraform.tfvars.example terraform.tfvars

db_name = "app_production"
db_username = "posgtres"
db_password = "xxxxxxxxxxx"
rails_secret_key_base = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
```

※ `db_password` や `rails_secret_key_base` などは適宜設定してください。

# デプロイ

環境構築が完了したらいよいよデプロイ開始です。

## ECR リポジトリを作成

```
$ terraform apply --target=aws_ecr_repository.rails8_api_apprunner
```

## Docker イメージを build & push

```
$ aws ecr get-login-password --region ap-northeast-1 | docker login --username AWS --password-stdin <aws_account_id>.dkr.ecr.ap-northeast-1.amazonaws.com

$ docker buildx build --no-cache --platform=linux/x86_64 -f Dockerfile.prd -t rails8-api-apprunner .

$ docker tag rails8-api-apprunner:latest <aws_account_id>.dkr.ecr.ap-northeast-1.amazonaws.com/rails8-api-apprunner:latest

$ docker push <aws_account_id>.dkr.ecr.ap-northeast-1.amazonaws.com/rails8-api-apprunner:latest
```

## RDS を作成

```
$ terraform apply \
  --target=aws_rds_cluster.aurora_pg \
  --target=aws_rds_cluster_instance.aurora_pg_instance
```

## 残りのリソースを作成

```
$ terraform apply

Outputs:

app_runner_service_url = "xxxxxxxxxx.ap-northeast-1.awsapprunner.com"
pp_runner_vpc_connector_arn = ...
```

## 動作確認

「Outputs」にて出力された `app_runner_service_url` を参考に curl コマンドでリクエストを送信してみます。

```
$ curl https://xxxxxxxxxx.ap-northeast-1.awsapprunner.com/api/v1/users

{
  "users": [
    {
      "id": 1,
      "name": "山田 太郎",
      "email": "yamada_t@example.com"
    },
    {
      "id": 2,
      "name": "山田 花子",
      "email": "yamada_h@example.com"
    }
  ]
}
```

users 一覧のデータが返ってくればデプロイ成功です。

## まとめ

普段は ECS を使って開発している事が多いのですが、App Runner は最低限の設定で動作するため、ちょっとした検証のための環境を作りたい際などは便利だと感じました。
第４回 新学期と東欧と商標と私

桜の季節に思うこと
---

卒業式や入学式に触れる機会があるたび、「そういえば校章って商標登録されてるのかな？」とか「制服とかロゴ入れてるよな...」とか思って権利侵害されないか心配してます。

また、コンビニで桜餅とか桜関連スイーツを見るたびに、「桜にちなんだお菓子とか、どの範囲まで商標登録できるだろう？」などと考えてしまうのです。

病んでないです。

--- 
cotoboxの長島です。
今回は少し脱線します。

病んでないです。

LinkedInからのコンタクト
---

先日、LinkedIn経由である東欧の企業からコンタクトがありました。これまでけっこうな数の世界中の国の人とやりとりする機会はあったのですが、この国はこれまで無かったのでちょっと興味を持ちました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128863/f1b6deb1-8cf2-4b56-b12c-bf0755a44ddb.png)
(画像は例のごとく一発勝負で出力しています）

よくあるオフショア開発の提案でした。
ウクライナに始まり、こういう仕事でLinkedInに載せているとけっこう世界中から同様のコンタクトは来ます。

オフショア自体は想定していたものの、これまで中国、インド、ベトナムとオフショアの経験があるため、何か追加でメリットが無いと正直選択肢は足りてるなーと手を広げる必要はありませんでした。

しかし今は違います。生成AI時代です。「 **軽くDeep Research** （なんか矛盾しているのは承知）」、最近お気に入りを発動です。

Deep Researchで見えてきた新しい可能性
---

調査を進めるうちに、以下のような新たな可能性が浮かび上がってきました。

- オフショア開発をベースにした24時間サポート体制構築の可能性
- 現地の法律事務所と連携し、EU圏での法律サービスネットワークを構築する可能性
- 東欧を起点に、新たな販路としてヨーロッパ市場にサービス展開を広げる可能性

従来なら費用や時間の問題で気軽には手を出せなかった調査が、Deep Researchのおかげで気軽にできます。
（気軽に、とはいえDeep Researchのおかげで労せず数百のWebサイトをチェックした上での結論が出せたわけで）

どうやら、近年は知財にかなり国としても力を入れているようです。
一方で市場規模はそこそこ...
しかし、ここを拠点に東欧にビジネスチャンスを広げるのはおもしろいかもしれません。

商標から広がる新しい視点
---

学校の校章、桜のスイーツ、そして東欧企業へのオフショア提案...それぞれは全く別の話ですが、常に知財や商標という視点で物事を考える癖がついてしまった今の自分だからこそ、新たな可能性に気づけたのかもしれません。

もちろん本格的に海外展開を試みるのであれば、しっかりしたリサーチが必要でしょうが、可能性の模索という観点ではなかなかおもしろいアプローチが、より早く一人でできるのではないでしょうか。

みなさんも是非「軽くDeep Research」を。


次回予告：v0活用事例
---
次回は再び実務的な話題に戻り、v0を使った要件の視覚化とチームでの合意形成の実践例 を詳しくご紹介します。

それでは、また次の記事で。
第２回「PdMの要件定義はなぜ詰まるのか？」AI導入前のリアルな実務と構造的課題

# PdMの要件定義はなぜ詰まるのか？AI導入前のリアルな実務と構造的課題

cotoboxの長島です。

先日、社内Slackにこう投稿してみました。

> 知財関係者の挨拶は、こんにちざいってほんとですか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128863/34eddf7e-e55c-4a4e-945c-e3911f685351.png)

反応は…リアクションがひとつだけ。...おかしい。  
どうやら「こんに知財！」の社内認知度は、かなり限定的でした。

知財領域を扱っているとはいえ、実は私自身、知財の知識も経験もまだ浅いです。  
それでもPdMとしてプロダクトを企画・開発していく以上、知財との向き合いは避けられません。
この程度で負けるわけにはいかないのです。

---

AI駆動開発というと、AIにコードを書かせるイメージが先行しがちです。  
しかし、PdMの業務——特に「要件定義」はどう変わるのか？  
本記事では、AI導入前の“詰まりどころ”を整理しながら、なぜPdM業務こそAIと相性が良いのかを実体験から振り返ります。

---

## 要件定義の進め方：これまでどうやっていたか？

私たちは、次のような手法で要件定義を進めてきました。

- BRD／PRDの作成  
- ユーザーインタビューやヒアリング  
- 業界構造や競合の調査  
- ペルソナの設定、ユースケースの洗い出し  
- 社内の意見収集と合意形成（CS、営業、エンジニア、経営層）

ちなみに私、ペルソナづくりってちょっと苦手です。  
あれって経験と偏見の塊みたいなものができてしまいがちじゃないですか？

AI、というかLLMを使うとバイアスがかかると言われます。ではどっちみちダメなのか？
しかし少なくとも適切にプロンプトを設計すれば、一個人がつくるペルソナよりはよっぽど多様性が担保されると思っています。

このあたりは、また別の機会にじっくり考えてみたいと思います。

---

## これまでどこで詰まっていたのか？

以下のような「詰まりポイント」が多く存在しました。

- 情報のインプットが遅い／不足している／主観に寄りすぎている  
- 調査結果や知見が分散しており、再利用しづらい  
- 仮説設計が属人化しやすく、暗黙知に頼ってしまう  
- 要件文書の構造化に時間がかかり、レビューが遅れる  
- チームに共有しても、反応やフィードバックが得づらい

…そういえば、初めて「拒絶理由通知」という単語を見たとき、  
「え、誰に拒絶されたの？」と本気で身構えました。
文脈を知らないと、知財用語ってなかなか攻撃力ありますよね。

---

## 結果、何が起きていたか？

- 初期段階で仕様が曖昧なまま進行してしまう  
- 後工程での大幅なやり直し（「これじゃなかった」問題）  
- 開発との距離が広がる（「なんでこれ作るの？」問題）  
- 仮説が浅く、リリース後のインパクトが弱い  
- 経営層や他部門との目線合わせに時間を要する

---

## 振り返って見える構造的な課題

改めて見直すと、問題は個人のスキルや努力ではなく、構造的なものでした。

- 情報の構造化・可視化を支援するツールがなかった  
- 複数の仮説を整理・検証するテンプレートがなかった  
- 「問いを立てる」工程が属人化しており、再現性がない  
- 要件定義に関わるナレッジが分散し、横展開できなかった

---

## PdMとしての実体験とAIとの向き合い方

こういった属人性の問題、私自身も実務の中で経験してきました。

たとえば、PdMの役割を担う人が社内や事業部単位で一人しかいないときは、属人性があっても表面化しにくいものです。  
ところが、担当が交代すると、急に情報の粒度や要件定義の深さが変わる。まさに属人化の影響がそのまま現れる形でした。

もちろん、そのレベルの属人化は、ドキュメントのテンプレートやレビューの流れを整備すれば、ある程度は解消できます。  
一方で、AIを使ったとしても、使い方や入力がぶれれば、やはりアウトプットもぶれてしまうのは同じです。

私が考える **AI駆動開発** とは、「AIに任せればいい」という話ではありません。  
むしろ、**本来あるべきプロセスを、AIの力で加速させることが本質**だと考えています。

---

たとえば、ChatGPTを使って要件定義の文章を通読させ、論理の飛躍や矛盾を指摘してもらうことで、**自分だけでは気づきにくい曖昧さを洗い出す**ことができました。  
また、v0を活用して簡易的なワイヤーフレームを作成し、**開発やCSとの合意形成を一気に早める**といった使い方も非常に効果的でした。

こうしたツールの使い方は、決して特別なことではなく、経験のあるPdMであれば自然に取り入れている方も多いと思います。

ただ、大量のデータを処理するとき、手作業でのチェックが得意でもExcelやPythonを使う方が効率的なように、  **要件定義やUI/UXの方向性を整理するプロセスにおいても、生成AIは“道具”として非常に相性が良い**と感じています。

（ここであえて「生成AI」と言ったのは、今後「予測AI」の話も触れていく予定だからですが、それはまた別の機会に。）

VUCAの時代
---
加速、加速としつこいですが、なぜそんなに生き急ぐ必要があるのでしょうか。

**VUCA**という言葉があります。この変化が激しく、不確実で、複雑で、曖昧な世の中。速さは武器になります。
開発にもスピード感が求められます。ダラダラ作っていると、出来上がった頃には要件がズレていることも珍しくありません。
ここ数年、開発プロセスはAIの浸透もあって大幅に加速したと思います。要件定義もそのスピード感に負けない速さが求められると考えています。

---

## 次回予告

次回は、これらの課題に対して  
**AI（ChatGPT、Gemini、v0 など）をどのように活用して乗り越えようとしたのか**をご紹介します。

実際に使ったプロンプトや成果物、うまくいかなかった点も含めて、リアルにお届けします。

**「PdMがAIをどう使っているのか」** に関心のある方は、ぜひフォローして次の記事もご覧いただければと思います。

---

今回も「こんに知財！」には社内で誰も乗ってくれませんでしたが、  
知財への理解とプロダクトへの向き合い方は、着実にアップデートしていくつもりです。

そして次回も、懲りずに知財ネタをひとつ持ってくる予定です。  
（そのうち、Slackでリアクションが2個になる日を夢見て…）

それでは、また次の記事で。
第１回「PdMがやるAI駆動開発」って何？エンジニアにも知ってほしい現場の変化

# AI駆動開発で知財ビジネスを変える - はじめましての記事

![ChatGPT Image 2025年3月30日 21_21_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128863/7fb4f4a9-c285-421e-8c21-54f2a854212d.png)
（画像はあえて一発勝負で生成しています。）

## はじめに

「こんに知財！」

…という挨拶を、先日ある知財関連イベントで耳にしました。  
特許庁の支援を受けた啓発動画だったと思うのですが、関係者の方が元気よく発していて、私は思わず「この空気に馴染める日は来るのか…」と考えてしまいました。

とはいえ、知財の世界には、いまだ堅苦しさや敷居の高さが残っているのも事実です。  
私たちは、そうした知財のハードルを、技術の力で少しずつ解きほぐしていけたらと考えています。

---

AI駆動開発という言葉は、コード生成やエンジニアの業務効率化と結びつきやすいものです。しかし実は要件定義や仮説検証のプロセスでも大きな変化が起きています。  
この記事では、PdMがどのようにAIを活用してプロダクト開発を進めているのか、そしてそのプロセスがチーム全体にどのように関わってくるのかをお伝えできればと考えています。

---

## 自己紹介

初めまして、長島と申します。  
現在、cotobox株式会社にてCPO（Chief Product Officer）として、プロダクト戦略の策定から開発の推進までを担当しています。

この記事では**AI駆動開発（AI Driven Development）** をテーマに、実際のプロジェクトを通じて得られた具体的な知見や経験をお伝えしていきます。

今後、リアルな課題解決の過程や実践的なノウハウを継続的に共有していく予定です。  
読者のみなさんと新たな学びや気づきを深めていければ幸いです。

---

## 私と会社について

私はこれまで、主にB2Bになりますがさまざまな企業で新規プロダクトの企画・立ち上げ、そしてプロダクトマネジメントに携わってきました。  
特に、プロダクトがどのようにビジネス成果を生み出すか、そのために必要なチームづくりや意思決定の仕組みに注力してきました。

cotoboxは、知財のDXを推進する企業です。

従来、知財の手続きや管理には専門的な知識や経験が求められ、そのプロセスにはどうしても複雑さやコストが伴っていました。  
私たちはAIも含めた既存技術を活用することでこの課題を解決し、企業がより簡単かつ迅速に自社の知財を活用できるようにするとともに、法律事務所の方々が柔軟にその支援を行える環境をつくろうとしています。

私たちが目指すのは、  
**「知財をもっと身近に、もっと使いやすくすること」**  
です。

---

## なぜ、AI駆動開発なのか？

限られたリソースで最大の成果を出すために、私たちが着目したのが **AI駆動開発（AI Driven Development）** という手法でした。

といっても、最初から明確にその戦略を立てていたわけではありません。  
気がつくと、自然と「AIを活用した開発」が私たちにとっての当たり前になっていました。

2025年1月からは、ChatGPTシリーズ、Gemini、v0といった **AIツールを活用**し、新規プロダクトの要件定義や開発に活用しています。  
ここで重要なのは、必ずしも「最先端の独自AIを開発する」ことにこだわらず、**既存のAIを的確に組み合わせ、いかにビジネスに活かすか**という視点を重視している点です。
（いやホントは知財LLMとか作りたいんですけどね）

このアプローチにより、開発スピードが大幅に向上しただけでなく、要件定義の精度や顧客ニーズの理解も飛躍的に高まりました。

---

## 今後取り上げていくテーマ

今後の記事では、以下のようなテーマを取り上げていく予定です。

- 実際のAI駆動開発プロジェクトで直面した課題と解決策  
- 新規事業やプロジェクトでAIを導入するための具体的ノウハウ  
- プロダクトマネージャーやCPOがAI導入を推進する際に考えるべきポイント  
- プロダクト開発における仮説検証の方法やチーム運営の実践知  
- 時には、ビジネス進捗やチーム運営の内情についても少しだけ

---

## このブログの目標

このブログを通じて、読者のみなさんが  
**「AIをどう使えば、プロダクトやビジネスを一歩前進させられるのか」**  
という問いに対して、ヒントや刺激を得られる場になればと考えています。

私たち自身も、今後のプロダクトのベータ版・正式版リリース、国内外イベントへの参加、エンジニア採用などを進めていく予定です。  
この発信がその一端を担い、読者の皆さんとつながるきっかけになれば嬉しく思います。

---

## おわりに

今回は、PdMが主導するAI駆動開発の概要と、その背景についてお伝えしました。  
今後は、開発の進行に合わせて、具体的な取り組みや課題、そこから得られた学びを共有していきます。

📢 次回は、AIを活用した **要件定義プロセスの実践** に焦点を当てます。  
従来のBRD／PRD作成や顧客リサーチを、どのようにAIで補い、どう効率化してきたのか。  
実際に試行錯誤したプロンプトや、うまくいかなかった場面も含めてリアルにご紹介します。

**「PdMがAIをどう使っているのか」** に関心のある方は、ぜひフォローして他の記事もご覧ください。

それでは、また次の記事で。
Arch Linux でのネットワークと Wi-Fi 設定

## 最初に

この記事では、Arch Linux 環境でのネットワーク接続、特に Wi-Fi 設定に関する学習・操作メモをまとめます。

GUIなしの環境でも安定して Wi-Fi に接続できるように、「iwd」と「iwctl」を使った方法を中心に紹介します。

**そもそもArch Linux立ち上げるときにネットワークツールが無事にインストールできていればこんな記事要らないと思いますが...**

自分はインストールしたつもりがうまく動作しなかったのでいろいろ調べる羽目になったので以下はメモです。

## 前提環境
* OS: Arch Linux（Hyprland使用）
* シェル: fish
* Wi-Fiデバイス: Realtek RTL8852AE
* デバイス名: wlan0
* ネットワーク管理ツール: iwd

## 必要なパッケージのインストール
```
sudo pacman -S iwd
```
iwd は Intel が開発している軽量な Wi-Fi デーモンで、systemd との統合も良く、Arch Linux でも標準的に使われています。
## iwd サービスの有効化と起動
```
sudo systemctl enable iwd
sudo systemctl start iwd
```
状態の確認：
```
sudo systemctl status iwd
```
出力例（正常時）：
```
・iwd.service - Wireless service
     Active: active (running)
```
## デバイスの確認と Wi-Fi 接続手順
**iwctl の実行**
```
iwctl
```
ここからは iwctl の対話モードになります。

**接続手順**
```
[iwd]# device list
```
→ Wi-Fi デバイス名（例: wlan0）を確認。
```
[iwd]# station wlan0 scan
[iwd]# station wlan0 get-networks
[iwd]# station wlan0 connect <SSID>
```
※パスワードの入力が必要な場合はプロンプトで表示されます。
## 状態確認・トラブルシューティング
**デバイスが無効になっていないか確認**
```
rfkill list
```
出力例：
```yaml
2: phy0: Wireless LAN
	Soft blocked: no
	Hard blocked: no
```
→ Soft / Hard ともに「no」であることを確認。
**インターフェースの状態**
```
ip addr show wlan0
```
正常な場合は state UP や LOWER_UP が表示されます。
## トラブル例と対処法
**接続できない場合のログ確認**
```
journalctl -u iwd -f
```
出力例（一部）：
```yaml
event: disconnect-info, reason: 3
event: state, old: connected, new: disconnected
Received error during CMD_TRIGGER_SCAN: Network is down (100)
```
→ このようなログが出る場合は、アクセスポイントからの切断やネットワークデバイスの一時的なダウンが考えられます。
**対処の一例**
```
sudo systemctl restart iwd
```
あるいは iwctl から再接続。
## 自動接続を有効にする
デフォルトでは、明示的に設定しない限り再起動後の自動接続はされません。以下のように .network ファイルを保存することで自動接続が可能になります。
```
[iwd]# station wlan0 connect <SSID> --known
```
あるいは /var/lib/iwd/<SSID>.psk というファイルが作成されていれば自動接続されるようになります。
## 補足：iwd vs NetworkManager
| ツール | ツール |
|:-----------|------------:|
| iwd | 軽量、CUI中心、シンプル構成向け |
| NetworkManager | 	GUIにも対応、依存多め、デスクトップ用途向け |

GUI環境がない or 軽量構成を求める場合は iwd で十分です。

## まとめ
Arch Linux 環境での Wi-Fi 接続は、iwd + iwctl を使えば、非常にシンプルに管理できます。

トラブル時も journalctl などでログを丁寧に見ていけば解決できる場面が多いです。

ただ、iwd と NetworkManager は基本的に同時に使えません。どうやら競合するっぽいです。

どれかひとつに絞って運用するのが基本ですので「今後 GUI を導入する予定がある」なら最初から NetworkManager にしておくとスムーズかもしれません。
【ティラノスクリプト】メッセージウィンドウの非表示で他の任意のレイヤーも一緒に非表示にしたい

# 概要
環境はv600d

[button]タグのrole属性でwindowを指定すると、メッセージレイヤーとfixレイヤーが非表示になる。
非表示になっている状態で画面のクリックなどを行うと、非表示になったメッセージレイヤーとfixレイヤーが再度表示される。
このときに他の任意のレイヤーも非表示/表示させたかったので、できるようにした。

# 詳細
前提として、フォーマッターを掛けて見やすくしている。

メッセージレイヤーの表示切り替えは、`tyrano/plugins/kag/kag.layer.js`で定義されている`hideMessageLayers`と`showMessageLayers`で行われている。
`this.getLayer`で操作したいレイヤーを取得し、`this.hideLayer`や`this.showLayer`に渡すことで実現可能。

## 実際のコード
* レイヤー2を対象にしている場合
* 既に色々修正が入っているかも
```tyrano/plugins/kag/kag.layer.js
hideMessageLayers: function () {
    if (1 == this.kag.stat.display_link) return false;
    this.kag.stat.is_hide_message = true;
    this.kag.trigger("messagewindow-hide");
    for (
        var num_message_layer = parseInt(this.kag.config.numMessageLayers),
            i = 0;
        i < num_message_layer;
        i++
    )
        this.getLayer("message" + i).hide();
    this.hideFixLayer();
    // レイヤー２を非表示にする
    this.hideLayer(this.getLayer("2"));
},
showMessageLayers: function () {
    this.kag.stat.is_hide_message = false;
    this.kag.trigger("messagewindow-show");
    for (
        var num_message_layer = parseInt(this.kag.config.numMessageLayers),
            i = 0;
        i < num_message_layer;
        i++
    ) {
        var j_layer = this.getLayer("message" + i);
        "true" == j_layer.attr("l_visible") && j_layer.show();
    }
    this.showFixLayer();
    // レイヤー２を表示する
    this.showLayer(this.getLayer("2"));
},
```
Chrome拡張機能で通信をブロックしたかったが、問題が多すぎた。

どうも、g[^1]を嫌うTNTSuperManです。
g[^1]が嫌いすぎてそれらの通信をブロックする拡張機能を作ろうとしましたが、
問題が多すぎました。
## 環境
- Windows 10 22H2
- Microsoft Edge Version 135.0.3179.54 (Official build) (64-bit)
## コード1. declarativeNetRequest
`declarative_net_request`で静的に通信ブロックを制限する方法です。
```json:manifest.json
{
    "manifest_version": 3,
    "name": "g_blocker",
    "version": "2.9.1",
    "description": "Block google's watching and networking",
    "permissions": [
        "declarativeNetRequest",
        "declarativeNetRequestWithHostAccess",
        "declarativeNetRequestFeedback"
    ],
    "host_permissions": [
        "<all_urls>"
    ],
    "declarative_net_request": {
        "rule_resources": [{
            "enabled": true,
            "id": "block",
            "path": "block.json"
        }]
    }
}
```
```json:block.json
[{
    "id": 1,
    "priority": 1,
    "action": {"type": "block"},
    "condition": {
        "urlFilter": "https://google.com/*",
        "initiatorDomains": [
            "<all_urls>"
        ],
        "resourceTypes": [
            "main_frame",
            "sub_frame",
            "stylesheet",
            "script",
            "image",
            "font",
            "object",
            "xmlhttprequest",
            "ping",
            "csp_report",
            "media",
            "websocket",
            "webtransport",
            "webbundle"
        ]
    }
}]
```
#### 問題
ブロックされませんでした。動作しませんでした。
しかし理由が全く分かりません。
ブラウザは全くエラー内容を表示しませんでした。
理由が分かった人は教えてください。
## コード2. webRequestBlocking
JavaScriptで動的にリクエストを破棄できる機能ですが、
残念、`webRequestBlocking`はmanifest v2で営業終了しました。
## コード3. 最終手段　`onBeforeRequest`+`tabs.remove`
最終手段です。`onBeforeRequest`でg[^1]の匂いがしたらそのタブを強制的に消します。
```json:manifest.json
{
    "manifest_version": 3,
    "name": "g_blocker",
    "version": "29.12.91",
    "description": "Block google's watching and networking",
    "permissions": [
        "webRequest",
        "tabs"
    ],
    "host_permissions": [
        "<all_urls>"
    ],
    "background": {
        "service_worker": "main.js"
    }
}
```
```js:main.js
const g_reg = /^https?:\/\/(\w+\.)*[\w\d-]*(google|chrome|gstatic|youtube|ytimg)[\w\d-]*\.\w+\/?/;

chrome.webRequest.onBeforeRequest.addListener((d) => {
  if (g_reg.test(d.initiator ?? "") || g_reg.test(d.url)) {
    chrome.tabs.remove(d.tabId);
    return {
        redirectUrl: "data:application/octet-stream,",
        cancel: true
    }
  }
}, { urls: ["*://*/*"] });

```
### 問題: あまりにもg[^1]の匂いを放つサイトが多すぎた
動作しましたが動作に問題大有りでした。

g[^1]はGoogle analytics**~~というスパイウェア~~**や広告を大量のサイトに**~~仕掛けて~~**設置されています。このQiitaも例外ではありません。それら全てのサイトのタブを強制的に消すのはあまりにも強すぎました。
だからといってそれを容認したらもう直で監視されてしまいます。
## 言いたいこと
特定の通信をブロックする機能を作るのが困難になるように設計されていると感じます。広告ブロッカーが関わっているとの意見も。
ちなみにChromeは[3rdPartyCookieの廃止計画を撤回しました](https://www.itmedia.co.jp/news/articles/2504/23/news105.html)
なのでそういうものを作る際はお気を付けください。
firefoxだと大丈夫になってるかもしれません。

そして、拡張機能はデバッグが大変です。

以上です。

[^1]: google
ReactNativeでWebView内の画像をbase64に変換して取得する方法

## はじめに
今回は、ReactNativeでWebView内の画像をbase64に変換して取得する方法について紹介していきます。


### 結論のコード

```ts
// 画像URLからblobを取得し、Base64に変換する関数
function convertImageToBase64(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.onerror = function(err) {
    callback("error fetching image");
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}
```

こちらを`injectedJavaScript`に挿入して使用する感じになります。

本来は`fetch`やcanvasを使用すべきだと思いますが、なぜかそれだと弾かれてしまったので最終的に行き着いたのが今回のコードです。
【Mac】ターミナルでJSONデータを処理する方法

`jq`コマンドを使用するとターミナルでJSONデータを処理できます。

## インストール

以下のコマンドでHomebrewを使用してインストールできます。

```terminal
brew install jq
```

https://jqlang.org/download/

## 使い方

特定のJSONファイルを色付きかつフォーマットされた状態で表示します。

```terminal
jq '.' /path/to/file.json
```

特定のスクリプトを使用してJSONデータを処理するには、次のようにします。

```terminal
cat path/to/file.json | jq --from-file path/to/script.jq
```

特定の引数を渡してJSONデータを操作するには、以下のコマンドを使用します。

```terminal
cat path/to/file.json | jq --arg "name1" "value1" --arg "name2" "value2" ... '. + $ARGS.named'
```

複数のJSONファイルから新しいJSONオブジェクトを作成するには、次のようにします。

```terminal
cat path/to/multiple_json_file_*.json | jq '{newKey1: .key1, newKey2: .key2.nestedKey, ...}'
```

特定のインデックスの配列アイテムを表示するには、以下のコマンドを使用します。

```terminal
cat path/to/file.json | jq '.[index1], .[index2], ...'
```

JSONファイル内のすべての配列またはオブジェクトの値を表示するには、次のようにします。

```terminal
cat path/to/file.json | jq '.[]'
```

特定の条件を満たすオブジェクトをフィルタリングして表示するには、以下のコマンドを使用します。

```terminal
cat path/to/file.json | jq '.[] | select((.key1=="value1") and .key2=="value2")'
```

特定のキーをJSONオブジェクトに追加または削除するには、次のようにします。

```terminal
cat path/to/file.json | jq '. + {"key1": "value1", "key2": "value2", ...}'  # 追加
cat path/to/file.json | jq '. - {"key1": "value1", "key2": "value2", ...}'  # 削除
```

https://jqlang.org/manual/
LambdaとAPI Gatewayを連携してREST APIを作る

# LambdaとAPI Gatewayを連携してみる。
・パラメータ付きのリクエストをAPI Gatewayが受け取り、Lambdaで受け取ったパラメータを処理し、結果を返すAPIのサンプルを作成してみた。
・今回はyear,month,dayの3つのパラメータを受け取って、「平日」か「祝日」かを判定する処理を作る。
・API　Gatewayの種類は「Rest API」とする。

### 要件
入力：year, month, day（例えば 2025, 4, 4）
処理：指定された日付が 土日 or 日本の祝日 なら「休日」、それ以外は「平日」
出力：date:${year-month-day}、isHoliday(土日かどうか？): true | false


## Lambdaで関数を作成
１. AWSコンソール画面でLambdaに遷移
２. 「関数の作成」を押下
３. 「一から作成」を選択し、関数名を記入。ここではNode.js 22.xを選択
４. 関数の作成ボタンを押下 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053547/ca9de63f-2245-40f2-b11a-129554b60d36.png)


５. コードの作成 
コードはローカルPC上で作成したものを、zip形式でアップロードするやり方をとる。
※ローカルPCはmacを想定
```
npm init -y
npm install japanese-holidays
※平日か土日かを判定するライブラリに「japanese-holidays」を使ってみる。
```

上記ライブラリと同一階層に「index.js」を作成

```
const Holidays = require('japanese-holidays');

exports.handler = async (event) => {

  const params = event.queryStringParameters || {};
  const year = params.year;
  const month = params.month;
  const day = params.day;

  if (!year || !month || !day) {
    return {
      statusCode: 400,
      body: JSON.stringify({ error: "year, month, day パラメータが必要です。" })
    };
  }

  const date = new Date(year, month - 1, day); // JSの月は0始まり
  const dayOfWeek = date.getDay();
  const isWeekend = (dayOfWeek === 0 || dayOfWeek === 6);
  const holidayName = Holidays.isHoliday(date);
  const isHoliday = isWeekend || holidayName !== undefined;

  return {
    statusCode: 200,
    body: JSON.stringify({
      date: `${year}-${month}-${day}`,
      isHoliday: isHoliday,
      reason: isWeekend ? "土日" : (holidayName || "平日")
    })
  };
};
```
上記一式をzipで固めて、Lambdaにアップロードする。
    
## API Gateway側

１. AWSコンソール画面でAPI Gatewayに遷移。
２. 「APIを作成」ボタンを押下
３. APIタイプは「REST API」を選択し、構築ボタンを押下
　 APIの詳細画面に遷移するので、「新しいAPI」「任意のAPI名」を設定。その他はデフォルト設定で「APIを作成」ボタンを押下する。  
４. 続いて「メソッドを作成」ボタンを押下。メソッドタイプをGETにし、「Lambda関数」を選択、Lambda関数は事前に作成していたLambda関数を選択する。その他はデフォルト設定で「メソッドを作成」ボタンを押下する。  
６. 「APIをデプロイ」ボタンを押下
７. ステージを「新しいステージ」、ステージ名を「dev」に選択し、デプロイボタンを押下する。

## 動作確認
https://xxxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev?year=2025&month=4&day=7

```
{"date":"2025-4-7","isHoliday":false,"reason":"平日"}
```

https://xxxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev?year=2025&month=4&day=7
```
{"date":"2025-4-6","isHoliday":true,"reason":"土日"}
```

## その他
リクエストがLambda関数には到達しているが、パラメータが受け取れずに原因が分からず、少しハマった。原因はAPI Gatewayの統合リクエスト設定の「Lambda プロキシ統合」をtrueにする必要があることだった。
🔰 Arch Linux 環境の基本操作まとめ【初心者向け備忘録】

## 最初に
**Arch Linux触ったことある人は読まなくていいレベルです。**
**というか初歩的すぎて自分以外は必要ないかも。**
最近Arch Linuxの環境で遊び初めてLinux面白いなと思いつつも、覚えておきたい事が増えすぎたので備忘録的にまとめていきます。
全部さらっと書くので、細かいことは別記事にでもします。（モチベがあれば...）

## 目次
[1. Arch Linuxの特徴と前提](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#arch-linux%E3%81%AE%E7%89%B9%E5%BE%B4%E3%81%A8%E5%89%8D%E6%8F%90)
[2. システムの基本操作](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C)
[3. パッケージ管理（pacman, yay）](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86pacman)
[4. ネットワークの確認と接続](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E7%A2%BA%E8%AA%8D%E3%81%A8wi-fi%E6%8E%A5%E7%B6%9Aiwd)
[5. サービスの管理（systemd）](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E7%AE%A1%E7%90%86systemd)
[6. ログの確認方法](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%83%AD%E3%82%B0%E3%81%AE%E7%A2%BA%E8%AA%8D%E6%96%B9%E6%B3%95journalctl)
[7. シェルとターミナル](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%81%A4%E3%81%84%E3%81%A7%E3%81%ABfish-%E3%82%B7%E3%82%A7%E3%83%AB%E3%81%AE%E5%9F%BA%E6%9C%AC)
[8. よく使う便利コマンド集](https://qiita.com/Shino_txt/items/9a8117f1b6193d5f4dfe#%E3%82%88%E3%81%8F%E4%BD%BF%E3%81%86%E4%BE%BF%E5%88%A9%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E9%9B%86)

## Arch Linuxの特徴と前提
Arch Linuxは、以下のような特徴があります：
* ローリングリリースモデル
* ミニマルで構成が自由
* パッケージマネージャ pacman
* AUR（Arch User Repository）という豊富なユーザー提供パッケージ
* 原則 CLI 操作（最初はGUIなし）
GUIは後から構築することが多く、カスタマイズ性が非常に高いです。
## システムの基本操作
**再起動・シャットダウン**
```
sudo reboot     # 再起動
sudo poweroff   # 電源OFF
```
**現在のユーザーやホスト情報**
```
whoami
hostname
uname -a
```
## パッケージ管理：pacman
**パッケージの検索**
```
pacman -Ss <キーワード>
```
**パッケージのインストール**
```
sudo pacman -S <パッケージ名>
```
**アップデート**
```
sudo pacman -Syu
```
**削除**
```
sudo pacman -R <パッケージ名>
```
## ネットワークの確認とWi-Fi接続（iwd）
**ネットワーク状態の確**
```
ip addr show
ping 8.8.8.8
```
**Wi-Fi 接続（iwd + iwctl）**
```
sudo systemctl start iwd
iwctl
```
iwdシェルでの操作：
```
device list
station wlan0 scan
station wlan0 get-networks
station wlan0 connect <SSID>
```
## サービスの管理（systemd）
**サービスの状態確認**
```
sudo systemctl status <サービス名>
```
例：
```
sudo systemctl status iwd
```
**サービスの起動と自動起動の設定**
```
sudo systemctl start <サービス名>
sudo systemctl enable <サービス名>
```
## ログの確認方法（journalctl）
システム全体のログ：
```
journalctl
```
特定のサービス：
```
journalctl -u iwd.service
```
リアルタイム表示：
```
sudo systemctl status iwd
```
## ついでにfish シェルの基本
fishを使ってみたので載せておく
```
alias ll="ls -l"
set -U fish_greeting ""
```
fishは補完が強力で、案外初心者にも優しいシェルだなと思いました。
設定は ~/.config/fish/config.fish に記述します。
## よく使う便利コマンド集
| コマンド | 説明 |
|:-----------|------------:|
| htop | プロセスモニタ |
| neofetch | システム情報表示 |
| df -h | ディスク使用量確認 |
| du -sh * | フォルダごとの容量 |
| top | 標準的なタスクモニタ |
| lsblk | ディスク構成の確認 |
| mount/umount | デバイスのマウント/解除 |
【Vue】自分のための用語集

Vueの学習をしていく中でわからなかったこと、知らなかった用語などをまとめていきます！
TypeScriptもほとんど知識がないため、基礎的な内容が主となります🙇‍♀️

今後もどんどん増やしていきます。

# Interfaceとは？
Typescriptの概念。
オブジェクトの型を定義するための機能で、Vueコンポーネントの型付けや、データ、props、メソッドの構造を明確にするのに役立つ。

# directive（ディレクティブ）
Vue独自の属性。v-bind や v-if など、テンプレート内のHTMLに対してVueの機能を指示するために使う。
たとえば、`v-if="isVisible"` で要素の表示・非表示を制御できる。

# オプショナルチェーン
`?.` を使って、オブジェクトや配列が **「存在する場合だけ」** その中身にアクセスする記法。
nullやundefinedでエラーにならないよう、安全にアクセスできる。

``` ts 
// オプショナルチェーンを使って、Astore.state が存在すれば A を代入する。
// 存在しない場合は undefined。安全に値を取り出すことができる。

const A = Astore.state?.A;
```

# メソッドチェーン
メソッドの戻り値がオブジェクトで、続けてさらにメソッドを呼び出せる書き方。
連続して処理をつなげられるので、コードがスッキリする。

# ジェネリクス（Generics）
型を後から指定できるしくみ。関数やクラスを汎用的に使えるようにする。
VueやTypeScriptでは、型の柔軟性を保ちながら安全にコードを書くのに便利。

# Typescriptの型アノテーション
変数や関数に「この型である」と明示的に指定すること。
型推論よりも厳密に型を管理したいときに使う。

```ts
const count: number = 10;
```

# import type
TypeScriptで型だけをインポートする構文。
コンパイル後のJavaScriptには影響を与えず、実行時に不要なコードを省くためのもの。

```ts 
import type { User } from './types';
```
ARとVRの違い

# はじめに

AR（Augmented Reality）とVR（Virtual Reality）は、どちらも現実と仮想を融合する技術ですが、その仕組みや用途には大きな違いがあります。本記事では、ARとVRの特徴や違いをわかりやすく解説し、それぞれの活用例についても触れていきます。



# AR（拡張現実）とは

ARは「Augmented Reality」の略で、日本語では「拡張現実」と呼ばれます。現実世界をベースに、デジタル情報を重ね合わせることで、現実に新たな情報を付加する技術です。

### 特徴
- **現実世界がベース**：スマホやタブレットのカメラを通じて、現実世界に仮想情報を追加します
- **デバイス**：スマートフォンやタブレット、AR対応メガネなどが主に使用されます
- **体験**：現実世界に情報が追加されるため、現実と仮想が混在した体験が可能です

### 活用例
- **ナビゲーション**：街中でARアプリを使うと、建物の名前や道案内が表示される
- **エンターテインメント**：スマホゲーム（例：「Pokémon GO」）でキャラクターが現実世界に登場
- **教育・産業**：機械のメンテナンス手順をARで表示



# VR（仮想現実）とは

VRは「Virtual Reality」の略で、日本語では「仮想現実」と呼ばれます。完全に仮想の空間を作り出し、ユーザーがその中に没入する体験を提供します。

### 特徴
- **仮想空間がベース**：CGなどで構築された完全な仮想空間にユーザーを没入させます
- **デバイス**：専用のVRゴーグルやヘッドセット（例：Meta Quest 2）が必要です
- **体験**：ユーザーは仮想空間内で自由に動き回り、現実とは異なる環境を体験できます

### 活用例
- **ゲーム**：VRゲームでプレイヤー自身が主人公となり冒険する
- **シミュレーション**：飛行機の操縦訓練や医療手術のシミュレーション
- **観光・エンターテインメント**：自宅で世界中の観光地をリアルに体験



# ARとVRの比較表

以下は、ARとVRの主な違いを比較した表です：

| 特徴                | AR（拡張現実）                          | VR（仮想現実）                          |
|---------------------|-----------------------------------------|-----------------------------------------|
| ベース              | 現実世界                                | 仮想空間                                |
| デバイス            | スマホ、タブレット、AR対応メガネ         | VRゴーグル、ヘッドセット                |
| 没入感              | 部分的（現実と仮想が混在）              | 高い（完全に仮想空間へ没入）            |
| 使用例              | ナビゲーション、教育、エンターテインメント| ゲーム、シミュレーション、観光          |
| 技術的難易度        | 比較的低い                              | 高い                                    |
| 実装コスト          | 低コスト                                | 高コスト                                |



# ARとVRの使い分け

### ARが適している場合
1. **現実世界との連携が重要な場合**
   - 商品説明や製品メンテナンスなど、現実世界に情報を補完する用途
2. **手軽さが求められる場合**
   - スマートフォンやタブレットだけで利用可能

### VRが適している場合
1. **完全な没入感が必要な場合**
   - ゲームやシミュレーションなど、高度な体験を提供したい場合
2. **現実世界では再現困難な環境**
   - 宇宙探査や医療トレーニングなど



# まとめ

ARとVRはそれぞれ異なる特徴と用途を持つ技術です。ARは現実世界を拡張し、情報を補完する役割を果たします。一方でVRは完全な仮想空間を作り出し、高度な没入感を提供します。これらの技術は今後さらに進化し、多くの分野で活用されることが期待されています。最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
URL短縮ってあれどうやってるの？


# はじめに

TwitterやSNSでよく見かける短いURL（例: `https://bit.ly/3abc123`）。これらは「URL短縮サービス」を利用して生成されたものです。この記事では、URL短縮がどのような仕組みで動いているのか、具体的な技術やアルゴリズムについてわかりやすく解説します。


# URL短縮とは？

URL短縮は、長いURLを短い文字列に変換する技術です。これにより、以下のようなメリットがあります：
- **文字数を節約**：SNSなど文字数制限がある場面で便利
- **リンクの見た目をシンプルに**：長いURLが煩雑に見えるのを防ぐ
- **クリック率の向上**：短いURLは視覚的に魅力的でクリックされやすい

代表的なサービスには以下があります：
- Bitly
- TinyURL
- Google URL Shortener（現在は廃止）


# URL短縮の仕組み

### 1. 入力されたURLをデータベースに保存
ユーザーが長いURLを入力すると、そのURLがデータベースに保存されます。このとき、各URLには一意の識別子（ID）が割り当てられます。

### 2. 識別子を短い文字列に変換
識別子（通常は数値）をエンコードして、短い文字列を生成します。このエンコードには以下の方法が使われます：
- **Base62エンコーディング**  
  数値を「英数字（0-9, a-z, A-Z）」で表現することで短い文字列を生成します。
  例: 数値 `12345` → Base62エンコード → `dnh`

### 3. 短縮URLを生成
生成された文字列を元に、ドメイン名と組み合わせて短縮URLを作成します。
例: `https://bit.ly/dnh`

### 4. リダイレクト処理
ユーザーが短縮URLにアクセスすると、その文字列をデコードして元のURLをデータベースから取得し、リダイレクトします。



# URL短縮アルゴリズム

以下は簡単なURL短縮アルゴリズムの例です：

### Pythonでの実装例
```python
import string

# Base62エンコーディング用の文字セット
BASE62 = string.digits + string.ascii_letters

def encode(num):
    """数値をBase62形式に変換"""
    if num == 0:
        return BASE62[0]
    result = []
    while num > 0:
        num, rem = divmod(num, 62)
        result.append(BASE62[rem])
    return ''.join(reversed(result))

def decode(short_url):
    """Base62形式から数値に変換"""
    num = 0
    for char in short_url:
        num = num * 62 + BASE62.index(char)
    return num

# 使用例
original_url_id = 12345
short_url = encode(original_url_id)  # 短縮された文字列: 'dnh'
print("Short URL:", short_url)

decoded_id = decode(short_url)  # 元のID: 12345
print("Decoded ID:", decoded_id)
```

このコードでは、数値IDをBase62形式でエンコードし、短い文字列として表現しています。


# URL短縮サービスが考慮するポイント

### 1. 一意性の確保
同じ長いURLが入力されても異なる短縮URLが生成されないよう、一意性を保証する必要があります。これには以下の方法が使われます：
- データベース内で既存のURLをチェックして再利用する
- ハッシュ関数（例: MD5, SHA256）で一意な識別子を生成

### 2. 短縮文字列の長さ
短すぎると衝突（同じ文字列が生成される）が発生しやすくなるため、適切な長さを選ぶ必要があります。通常は6〜8文字程度が一般的です。

### 3. セキュリティ対策
- 短縮URLによるフィッシング詐欺防止
- 不正なリンク（マルウェアサイトなど）の検出



# URL短縮サービスの応用例

1. **マーケティング**  
   短縮URLにクリック数トラッキング機能を追加し、広告効果測定などに活用

2. **カスタムリンク**  
   ブランド名や特定キーワードを含むカスタムリンク（例: `https://brand.ly/sale2025`）で認知度向上

3. **統計情報提供**  
   短縮リンクごとにアクセス数や地域分布などの詳細な分析情報を提供

---

## URL短縮サービスの課題

1. **リンク切れ**  
   元の長いURLが削除されると、短縮URLも無効になる可能性があります

2. **セキュリティリスク**  
   短縮されたリンク先が不明瞭なため、不正サイトへの誘導が容易になることがあります

3. **依存性**  
   特定サービスに依存する場合、そのサービス終了時にリンクが利用できなくなる可能性があります



# まとめ

URL短縮は非常に便利な技術ですが、その裏にはデータベース管理、エンコーディングアルゴリズム、一意性保証など多くの技術的配慮があります。Pythonなどで簡単に実装できるので、自分専用のURL短縮サービスを作ってみるのも面白いかもしれません！最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
Webアプリ開発でよく使うPythonライブラリ5選

# Webアプリ開発でよく使うPythonライブラリ5選

Webアプリを開発する際、フレームワーク（DjangoやFastAPIなど）以外にも多くの補助ライブラリが重要な役割を果たします。本記事では、PythonでWebアプリを構築する際によく使われるライブラリを5つ紹介し、それぞれの具体的な業務を想定した使用例を示します。

---

## 1. requests：外部APIとの通信

Webアプリでは、ユーザーの操作に応じて他のサービスと連携する場面が多くあります。`requests`は、外部APIとのHTTP通信をシンプルに行えるライブラリです。

**想定シーン：天気APIを呼び出して現在の天気を取得する**

```python
import requests

def get_weather(city):
    url = f'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q={city}'
    response = requests.get(url)
    if response.status_code == 200:
        data = response.json()
        return data['current']['condition']['text']
    return "取得失敗"

print(get_weather("Tokyo"))
```

---

## 2. python-dotenv：環境変数の管理

APIキーやデータベース接続情報など、機密情報は環境変数で管理するのが一般的です。`python-dotenv`を使うと、`.env`ファイルから環境変数を簡単に読み込むことができます。

**想定シーン：APIキーやDB接続情報を.envから読み込む**

```python
from dotenv import load_dotenv
import os

load_dotenv()  # .env ファイルを読み込む

api_key = os.getenv("API_KEY")
print(f"APIキー: {api_key}")
```

`.env` ファイルの例

```
API_KEY=abc123xyz456
```

---

## 3. pydantic：データバリデーション

Webアプリでは、ユーザーから受け取るデータの検証が欠かせません。`pydantic`は、Pythonの型ヒントを活かしてデータ構造の検証・整形を行う強力なライブラリです。

**想定シーン：ユーザー登録フォームの入力データを検証**

```python
from pydantic import BaseModel, EmailStr, ValidationError

class User(BaseModel):
    name: str
    email: EmailStr
    age: int

try:
    user = User(name="佐藤", email="sato@example.com", age="29")
    print(user)
except ValidationError as e:
    print(e.json())
```

---

## 4. schedule：定期実行のタスク管理

`cron`のようなタスクスケジューリングをPythonで行いたい場合に便利なのが`schedule`です。バッチ処理や通知の自動送信などに使えます。

**想定シーン：毎日9時に定型メールを送信**

```python
import schedule
import time

def send_daily_report():
    print("定型レポートを送信しました")

schedule.every().day.at("09:00").do(send_daily_report)

while True:
    schedule.run_pending()
    time.sleep(1)
```

---

## 5. loguru：ログ出力の最適化

`loguru`はPythonの標準`logging`モジュールよりも簡単で柔軟なログ管理ができるライブラリです。Webアプリでのトラブルシュートや監視に役立ちます。

**想定シーン：APIの呼び出し処理で詳細ログを出力する**

```python
from loguru import logger

logger.add("app.log", rotation="1 MB")

def fetch_data():
    logger.info("APIリクエスト開始")
    try:
        response = requests.get("https://httpbin.org/get")
        logger.success("APIレスポンス取得成功")
        return response.json()
    except Exception as e:
        logger.error(f"API取得エラー: {e}")

fetch_data()
```

---

## まとめ

| ライブラリ名     | 主な用途             | 活用例                           |
|------------------|----------------------|----------------------------------|
| requests         | 外部APIとの通信      | 天気・地図・住所取得など         |
| python-dotenv    | 環境変数の読み込み   | APIキー、DB接続先の管理           |
| pydantic         | 入力データの検証     | フォームデータやAPIバリデーション |
| schedule         | 定期処理             | バッチ処理や通知                  |
| loguru           | ログ出力             | 開発中や運用中のエラーログ監視    |

---

これらのライブラリを適切に使うことで、Webアプリの安全性・保守性・信頼性が大きく向上します。特にセキュリティや運用面でも重要な役割を果たすので、ぜひ積極的に活用してみてください。

📝 ご質問・フィードバックはコメントでお気軽に！