OmniAICreator/Qiita-1.07M huggingface dataset:
Portfolio

<!-- TODO: サイトのURLをどうするか？(What will be the URL of the site?) -->
<!-- TODO: サーバーを立てる(Setup a server) -->
<!-- TODO: ポートレートサイトのデザインを決める(Decide on a design for your portrait site.) -->
<!-- TODO: ポートレートに載せる アプリをどうするか(Decide what apps to include in your portraits) -->
<!-- TODO: ポートレートに 載せるスキルを決める(Decide what skills you want to include in your portraits.) -->
あんまり使わない演算子のメモ

# はじめに
普段使う演算子に"+"や"+=","<"などのものを多く使う印象が強いですが、
ふと、目にしないものを見たときに頭の中で？マークが浮かんでしまい、混乱してしまいました。
なので、あまり見ないものを調べたのでその内容をメモがわりに記事にしておこうと思います。

# あまり見ない演算子一覧
|演算子|意味|内容|
|:---|:---|:--|
|&|x & y|0と1の論理積|
|l|x l y|0と1の論理和|
|^|x ^ y|0と1の排他的論理和|
|~|~x|ビット反転|
|<<|x << y|左へビットシフト(符号無し)|
|>>>|x >>> y|右へビットシフト(符号あり)|


**論理積**
いずれも真のときに真となり、それ以外のときは偽となるもの

**論理和**

ずれか少なくとも一つが真であること

**排他的論理和**
どちらか片方が真でもう片方が偽の時には結果が真となり、両方とも真あるいは両方とも偽の時は偽となる

**ビット反転**
各ビットの値を0ならば1に、1ならば0に反転する

**ビットシフト**
ビット列の中身を左右にシフトする操作のこと


# 参考

https://algo-method.com/descriptions/29

https://www.javadrive.jp/start/ope/index8.html
Elastic IPアドレス

# はじめに

この記事はAWS SAA試験勉強のための、 Elastic IPアドレスに関する知識のまとめです。

# Elastic IPアドレス

Elastic IPアドレスは、インターネットと通信可能な固定のパブリックIPアドレスです。

# 料金

Elastic IPアドレスは割り当てられているAWSリソースを終了しても、Elastic IPアドレスを解放するまで利用料金が課金されます。
Fast APIとLineのMessage APIの連携が神すぎた


# FastAPIとOCRを使ったLINE画像テキスト認識

## 第1章: はじめに

LINEを使って画像をアップロードし、その画像からテキストを認識するアプリケーションを作成します。PythonのFastAPIとOCRライブラリを利用して、効率的かつ簡単に実装します。このプロジェクトは、画像からテキストを抽出したい方にとって非常に役立つでしょう。

## 第2章: FastAPIのセットアップ

まず、FastAPIをインストールします。以下のコマンドを使用してください。

```bash
pip install fastapi uvicorn
```

次に、`main.py`というファイルを作成し、基本的なFastAPIアプリケーションを設定します。

```python
from fastapi import FastAPI, UploadFile, File

app = FastAPI()

@app.post("/upload/")
async def upload_image(file: UploadFile = File(...)):
    return {"filename": file.filename}
```

## 第3章: LINE Messaging APIの設定

LINE Developersコンソールにログインし、Messaging APIチャネルを作成します。チャネルアクセストークンを発行し、Webhook URLを設定します[1][2]。これにより、LINE公式アカウントがユーザーからのメッセージを受信したり、メッセージを送信したりできます。

## 第4章: LINEからの画像アップロード

LINE Messaging APIを利用して、ユーザーが画像を送信できるようにします。WebhookイベントをFastAPIで受信し、画像データを取得します。

```python
@app.post("/line_webhook/")
async def line_webhook(request: Request):
    body = await request.json()
    # 画像データの処理をここに追加
    return {"status": "received"}
```

## 第5章: 画像の保存

アップロードされた画像をサーバーに保存する必要があります。以下のコードを追加して、画像を保存します。

```python
import shutil
import os

@app.post("/upload/")
async def upload_image(file: UploadFile = File(...)):
    file_location = f"images/{file.filename}"
    with open(file_location, "wb") as buffer:
        shutil.copyfileobj(file.file, buffer)
    return {"info": "file saved", "filename": file.filename}
```

## 第6章: OCRライブラリの選択

OCRライブラリとしてTesseractを使用します。Tesseractはオープンソースで、多くの言語をサポートしています。以下のコマンドでインストールします。

```bash
pip install pytesseract
```

また、Tesseractの実行ファイルもインストールしてください。

## 第7章: OCRの実装

保存した画像からテキストを抽出するためのOCR機能を実装します。以下のコードを追加します。

```python
import pytesseract
from PIL import Image

def perform_ocr(file_path: str) -> str:
    image = Image.open(file_path)
    text = pytesseract.image_to_string(image, lang='jpn')
    return text
```

## 第8章: 非同期処理の活用

FastAPIの非同期機能を活用して、OCR処理を非同期で実行します。これにより、パフォーマンスが向上します。

```python
@app.post("/upload/")
async def upload_image(file: UploadFile = File(...)):
    file_location = f"images/{file.filename}"
    with open(file_location, "wb") as buffer:
        shutil.copyfileobj(file.file, buffer)
    text = await perform_ocr_async(file_location)
    return {"text": text}

async def perform_ocr_async(file_path: str) -> str:
    return perform_ocr(file_path)
```

## 第9章: セキュリティの考慮

セキュリティを強化するために、画像の保存場所やファイル名の取り扱いに注意が必要です。ディレクトリトラバーサル攻撃を防ぐため、ユーザーからの入力を直接ファイル名に使用しないようにしましょう。また、長期のチャネルアクセストークンを使用する場合、IPアドレスでAPIの呼び出し元を制限することができます。

## 第10章: まとめと次のステップ

これで、FastAPIとOCRを使用してLINEからアップロードされた画像のテキストを認識するアプリケーションが完成しました。次のステップとして、UIを改善したり、他のOCRライブラリを試したりすることが考えられます。

さらに、クラウドサービスを利用してスケーラビリティを向上させることもできます。

このプロジェクトを通じて、画像からテキストを抽出する技術を学び、実践することができました。

ぜひ、さまざまな応用に挑戦してみてください
(危険)Arduino UNO 3.3V化テストをかんがえる(まねしないでね(自己責任))



目的
3.3V化した時のテスト　あくまでもテスト
とりまLチカ

概要

Lチカを書き込んでおく、完全にPCからはなす。
まず、絶対にUSBは、つながない(Aduino UNOとパソコンが破壊されます。)
Arduino UNOの5V端子に3.3Vを入力
(A0にセンサー あとで)
(シリアルに外部シリアルあとで)
基本、3.3Vでは、10Mhzが限界で16Mhzは、動かないはずだがなぜか動く?

Lチカ

![o_coq309.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/2e23540c-9545-0a93-d6ef-8f3bcdf3ff24.jpeg)
AWS Certificate Manager（ACM）

# はじめに
この記事はAWS SAA試験勉強のための、AWS Certificate Managerに関する知識のまとめです。

# AWS Certificate Managerとは

AWS Certificate Managerは、SSL/TLS証明書を作成・管理できるマネージドサービスです。
ユーザー独自のSSL/TLS証明書をインポートすることが可能です。

# ACMで管理しているSSL/TLS証明書（サーバー証明書）の適用対象

- Amazon CloudFront
- Elastic Load Balancing
- Amazon API Gateway
WSL2にCakephp2をインストールする方法

いまさらながらCakephp2を触りたくなったので、ChatGPTとやり取りしながらインストールした手順を備忘録としてまとめます。

# 前提
- WSL2 がインストールされていること
- ユーザ cakephp_userが作られている
- cakephp_userがsudo グループ追加されている

※ユーザをcakephp_userとしているので、必要であれば適宜読み替えてください。


## 必要なパッケージインストール
apache2, php, Mysql をインストールします。

```shell
sudo apt update
sudo apt install -y apache2 php php-mbstring php-xml php-intl libapache2-mod-php mysql-server php-mysql git unzip
```
## MySQL設定
mysqlの起動
```shell
sudo service mysql start
```
mysqlコマンドラインへアクセス
※rootで入っています。パスワード注意。
```shell
sudo mysql -u root -p
```
DB作成
```sql
CREATE DATABASE cakephp_db;
```
ユーザ作成 + 権限付与
```sql
CREATE USER 'cakephp_user'@'localhost' IDENTIFIED BY '{設定したいパスワード}';
GRANT ALL PRIVILEGES ON cakephp_db.* TO 'cakephp_user'@'localhost';
FLUSH PRIVILEGES;
```
mysqlでやること終わったので、抜ける
```sql
EXIT;
```


## Cakephp2のインストール
git絡むと面倒なので、ブラウザからzip取得してインストールします。

### cakephpのダウンロード
https://github.com/cakephp/cakephp/tags

GitHubから利用したいcake2バージョンをダウンロード。
ここでは、バージョン2.10.24をダウンロードしました。異なるバージョンをインストールしたい場合、以後読み替えてください。

### windowsからWSLにファイルコピー
ウェブサーバで利用する`/var/www/`にダウンロードしたcakephpをコピーしてきます。

最初、D&Dでコピーしようと考えていたのですが、書き込み権限の不足でうまくいかなかったので、コマンドラインから攻めます。

WSLからWindowsへは`/mnt/c/`でアクセス可能です。
マウントポイントとして接続できるの面白いですよね。

ダウンロードフォルダまで、のパスを連ねてダウンロードしたCakephpがあるかfindコマンドで確認します。
```shell
find /mnt/c/Users/{ユーザ名}/Downloads -type f -name "*cakephp*"
```

確認できたら、root昇格してコピーしましょう。
（`/var/www`への書き込み権限がcakephp_userにはないので、rootに昇格しています）
```shell
sudo su - 
cp -vR /mnt/c/Users/{ユーザ名}/Downloads/cakephp-2.10.24.zip /var/www/
```

### cakephpを展開
```shell
# zipの展開
sudo unzip cakephp-2.10.24.zip -d /var/www/
sudo mv /var/www/cakephp-2.2.10.24 /var/www/cakephp2

# 権限、所有者を変更
sudo chown -R cakephp_user:www-data /var/www/cakephp2
sudo chmod -R 775 /var/www/cakephp2
```

## Apacheの設定
アパッチの設定に入ります。
Vhost設定に入ります。エディタでapache設定ファイルに追記します。エディタは何でもいいです。

```shell:
sudo vi /etc/apache2/sites-available/cakephp2.conf
```
```shell:書き込む設定
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/cakephp2/app/webroot
    ServerName cakephp2.local

    <Directory /var/www/cakephp2>
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
```

## Apache設定の反映
設定ファイルを有効にし、Apache を再起動します。
```shell
sudo a2ensite cakephp2.conf
sudo a2enmod rewrite
sudo service apache2 restart
```


## サイトの確認
Windowsのブラウザで表示確認をするために、WSLのIPでアクセスします。

```
## WSLのIP取得
hostname -I
```

vhost設定でServerNameに設定した「cakephp2.local」をwindowsのhosts設定に追加します。
```
{hostname -Iで取得したIP取得} cakephp2.local
```


`http://cakephp2.local`でアクセスします。
表示出来たら、OKです。


あとは、VScodeやらのエディタで編集できます。


## 結論
chat-GPTがいると、環境構築がめちゃらくになりますね。
Amazon VPC IP Address Manager (IPAM) を使用した VPC およびサブネットのプライベート IPv6 アドレス指定がGAになりました

こんばんは。Koderaです。
IPAMを使用した VPC およびサブネットのプライベート IPv6 アドレス指定がGAになりました。
https://aws.amazon.com/about-aws/whats-new/2024/08/aws-private-ipv6-addressing-vpcs-subnets/

# AWSでのIPv6アドレスについて
AWS は、パブリック IP アドレスを AWS からインターネット上でアドバタイズされるものとして定義します。
ここで「Advertise」はネットワーク上で制御情報などを広く告知する機能や挙動などを意味します。

一方、プライベート IP アドレスは AWS からインターネット上でアドバタイズされず、アドバタイズをすることはできないです。
VPC に関連付けることができるのは以下の3パターンです。
・プライベート IPv6 アドレスのみ
・パブリック IPv6 アドレスのみ
・プライベートとパブリックの両方の IPv6 アドレス


プライベートIPアドレスに戻ると、アドバタイズされない？というだけでは少し分かりにくいですよね。
AWS のプライベートIPv6アドレスには、ローカル通信を目的とした ULA と、プロトコル定義に従ってグローバルにルーティング可能なプライベート GUA を含めることができます。
AWSでのIPv6アドレスはプライベートIPv6アドレスを含めて合計4つに分かれます。

### Amazon-provided IPv6 prefixes
Amazon が提供する IPv6 プレフィックスです。
パブリックでグローバルに一意であり、GUA IPv6 の Amazon プールから割り当てられ、インターネット レジストリによって割り当てられます。Amazonから提供されるIPv6アドレスは常にAWSからインターネット上でアドバタイズされ、アドバタイズステータスを制御したり変更したりすることはできません。


### BYOIPv6 prefixes
Bring Your Own IPv6 (BYOIPv6) を使用すると、IPv6アドレス空間をAWSにインポートできます。 
BYOIPv6 を使用することで、プレフィックスのアドバタイズメント ステータスを制御できます。BYOIPv6 プールは、公的にと非パブリックの両方でアドバタイズすることができます。

パブリックにアドバタイズ可能なプールでプロビジョニングされる BYOIPv6 プレフィックスは、/48 以上の必要あり。構成時にアドバタイズするつもりがない場合でも、RDAP (登録データ アクセス プロトコル) および ROA (ルート発信元認証) プロセスを受ける必要があります。
一方の非パブリックな BYOIPv6 プレフィックスは /60 以上の必要あり。ROA は必要ありませんが、RDAP プロセスが必要です。AWSで利用される際に一度非パブリックだと判定されると、次にパブリックに変更ができないとなっています。

### Private IPv6 GUA
AWS では、IPv6 GUA を、インターネット上でアドバタイズされず、アドバタイズすることもできないプライベート IPv6 アドレスとして使用できます。 
GUAとは、グローバルユニキャストアドレスを意味します。最も一般的なアドレス種別とされています。
RDAP プロセスや ROA プロセスを実行する必要なく、プライベート IPv6 GUA を構成できます。注意点としては、IPv6 アドレス指定がインターネット上の他のエンドポイントや他の AWS ユーザーと重複しないように、地域インターネット レジストリ (RIR) によって割り当てられた IPv6 GUA アドレスのみをプライベートGUAとして利用するというところでしょうか。
また、AWSで直接インターネット接続する要件が出てきた場合、パブリック IPv6 アドレスを使用して VPC を再作成する必要があるので、どのアドレス体系を選ぶべきか？というのも大きなポイントになりそうですね。

### IPv6 ULA
IPv6 ULA アドレスは RFC 4193 で定義されています。
RFC では fd00::/8 をローカルに割り当てられた ULA アドレス空間として定義します。元々インターネット上で公開できないためプライベートな空間です。
ULAとは、ユニークローカルアドレスで、IPv6ユニキャストアドレスが定義されました。完全な一意性は保証されないですが、いつでも皆、利用可能なアドレスです。
Amazon が提供する ULA プレフィックスは、デフォルトでは /48 です。特定の ULA プレフィックスが必要な場合は、Amazon VPC IPAM プールに直接プロビジョニングできます。
ULAを使う場合の注意点は、デュアル スタック環境でのプロトコル選択の優先順位を考慮する必要があります。
現在、RFC 6724 に従って、ULA よりも IPv4 アドレスが優先されてしまう仕様になっています。アドレス重複が発生してしまうことを回避するために、どのようなアドレス体系で利用するのか事前の綿密な計画が必要なようです。

VPC に関連付けられた IPv6 アドレスのアドバタイズステータスを識別しやすくするために、AWS は VPC IPv6 CIDR の新しいattributeが定義されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858908/2c97f233-1f17-58ff-3ece-40adc0990cc5.png)


# アップデート内容
VPC とサブネットのプライベート IPv6 アドレス指定が、すべての AWS 商用リージョンと AWS GovCloud (米国) リージョンで、無料ティアとアドバンスト ティア VPC IPAM の両方で利用できるようになりました。 
どのようなシーンで、どのIPアドレス体系を導入すれば良いのかは別途、考えてみたいなーと思います。
OpenAPIGeneratorで生成したコードがisolatedModule違反になるのを修正するには

最近OpenAPIGeneratorを用いたTSクライアントコードを生成してみて、生成したコードが`isolatedMoudule`違反になったので、その自動修正方法メモ

:::note info
`eslint`の`@typescript-eslint/consistent-type-exports`を`error`にして、
`eslint --fix /path/to/openapi/generated`を実行するとよい
:::

情報源は以下
https://github.com/OpenAPITools/openapi-generator/issues/6805

### そもそもの原因

以下isolatedModuleの説明に詳しくありますが、OpenAPIGeneratorの生成コードが定義された型を再エクスポートする際に、コンパイラが`値`なのか`型`なのかを判断できるように`export {~}`か`export type { ~ }`のいずれかを明示する必要があるとのこと
https://typescriptbook.jp/reference/tsconfig/isolatedModules

なので、前述のeslintのルール自動修正を利用することでfixすることができるということでした👏
`npm`のスクリプトとしてクライアントコード生成を実行するなら、`(クライアント生成命令) && eslint --fix /path/to/openapi/generated`のようにしておくとわざわざコマンドを打ち直す必要もないので便利ですね💯
解いてみた。「Cランク：みかんの仕分け」

解いてみた。「Cランク：みかんの仕分け」
paiza×Qiitaコラボキャンペーン

# 問題
[「Cランク：みかんの仕分け」](https://paiza.jp/works/mondai/c_rank_skillcheck_archive/mikan)

# コード
Javaで解いてみました。

``` Java
import java.util.*;


public class Main {
    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        int nN = sc.nextInt();
        int nM = sc.nextInt();
        
        for (int i = 0; i < nM; i++) {
            int nW = sc.nextInt();
            int nK = nW / nN;
            if (nK == 0) {  // 重さが、１番目の箱の重さより小さい
                System.out.println(nN); // 1番目の箱に入る
            } else {
                int nMod = nW % nN;
                if (nMod == 0) {    // 重さがnK番目の箱の重さに等しい
                    System.out.println(nN * nK);     // nK番目の箱に入る
                } else {
                    if ((nW - nK * nN) >= ((nK + 1) * nN - nW)) {   // nK番目の箱の重さより、(nK+1)番目の箱の重さの方が近い時
                                                                    // （等しい場合も含む）
                        System.out.println(nN * (nK + 1));  // (nK + 1)番目の箱に入る
                    } else {
                        System.out.println(nN * nK);    // nK番目の箱に入る
                    }
                }
            }
        }
    }
}

```

# 解説
## 標準入力からの数値の読み取り
Scanner インスタンスを作り、nextInt()メソッドで数値（箱の単位の重さ、みかんの個数、各みかんの重さ）を取得しています。

## どの箱に入れるか？の場合分け
みかんの重さ（nW）を箱の単位の重さ（nN）で割った商をnK、余りをnModとします。
### nK == 0 の場合
1つ目の箱の重さ（nN）より、みかんの重さ（nW）が小さいことを意味します。
0gの箱がないことから、自動的に1番目の箱（nN）に入ります。
### nMod == 0 の場合
みかんの重さ（nW）が、ちょうどnK番目の箱の重さ（nN\*nK）であることを意味するので、（nN\*nK）の重さの箱に入ります。
### nK >= 1 かつ nMod != 0 の場合
みかんの重さ（nW）は、nK番目の箱の重さ（nN\*nK）と（nK+1）番目の箱の重さ（nN\*(nK+1)）の間になります。
そこで、それぞれの箱の重さとの差分を求めて、近い方（同じ値なら、nK+1番目）の箱に入れます。
Googleアカウントでログインする機能の実装

## 概要
googleアカウントでログインする機能の勉強。
メールアドレスでも出来るし、他SNSのアカウントでも出来るらしい。

## 手順
1. https://clerk.com/ にアクセスして、アカウントを作成する
1. ログイン
1. Create applicationを押下![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/8d72227a-a585-b224-70bb-f4fe0934b2d4.png)
1. 作るアプリケーションの名前を入力する![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/6d1bc5cd-4e92-4d7e-5890-b7151499b0e9.png)

1. 使用したいログイン方法を押下する。画像の場合はEmailとGoogleアカウント![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/c726cc20-aa1f-b3b1-49f1-f5779e1cac0b.png)
1. Create applicationを押下![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/4362aa06-3e39-0451-28e6-984e2974ada2.png)
1. 遷移先のページから、シークレットキーなどの情報を取ってくる![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/5040a151-0b15-5b07-d9af-d7f180156500.png)
1. .envファイルにそのまま貼り付け
1. .gitignoreファイルに、.envを追加
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/5e6007c7-74b7-acdf-b68d-e01f87452299.png)
1. ターミナルで以下コマンドを叩く
   ```bash
   npm install @clerk/nextjs
   ```
1. あとはドキュメント通り
1. 結果
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/2eaa9fcf-7443-8b67-f663-4dafda536007.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/e15e7e68-753e-df39-dec1-bf580ba4e159.png)
1. 使用したGoogleアカウントでログイン出来てることを確認。
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/865ace45-4a77-c50e-2c68-758d2692eb5d.png)


### ちょい足し
googleアカウントのアイコンでログイン情報を表示

* 変更前
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/865ace45-4a77-c50e-2c68-758d2692eb5d.png)
* 変更後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3527006/eae055b1-0d4b-ac30-b48c-8c64a4f039b3.png)
* コード

    ```typescript
    "use client";

    import { UserButton } from "@clerk/nextjs";

    const testUserPage = () => {
      return (
    <div>
      <UserButton />
    </div>
      );
    };
        export default ProtectedPage;
    ```
     



取り敢えずなぐり書き
躓きが解決しました。（改）

「Python×Excelで作るかんたん自動化ツール」という本の７２ページのcreate_excel.pyに書かれているコードを、Python IDILで実行しようとしたところ、以下のエラーメッセージが出ましたが、ChatGptを駆使して原因を探ったところ、無事解決しました。その手順についてお話ししたいと思います。

使用PC：MacBook Air

### 入力したコード
```py
new_book = openpyxl.Workbook()
sheet = new_book.active
sheet['A1'] = 'Pythonから作成されたExcel'
new_book.save('new_excel.xlsx')
```

### 出ているエラーメッセージ
```
ModuleNotFoundError: No module named 'openpyxl'
```

### 手順
まずは、ターミナルにこのコマンドを入力しました
```
pip install openpyxl
```

この時、このコマンドをPython IDILに入力すると、`invalid syntax`というエラーになりました。
問題は、ターミナルに指定のコマンドを入力しても、`ModuleNotFoundError: No module named 'openpyxl'`と表示されたことです。ChatGptの回答によると、「ターミナルでインストールした openpyxl は、Python IDLEが使用しているPythonとは異なるバージョンにインストールされた可能性がある」とのことでした。まずはターミナルとPython IDLEのバージョンが一致しているかを確認しました。

```:ターミナルでPythonのバージョンを確認するコマンド
python --version
```

```py:Python IDLEでバージョンを確認するコマンド
import sys
print(sys.version)
```

### 結果
```:ターミナル
Python 3.11.5
```
```:IDLE
3.12.2 (v3.12.2:6abddd9f6a, Feb  6 2024, 17:02:06) [Clang 13.0.0 (clang-1300.0.29.30)]
```

どちらも不一致でした。つまり、IDLEとターミナルで使用しているPythonのバージョンが違っていた故に、インストールしたパッケージ「openpyxl」がIDLEで認識されず、前に進めなかったのです。

解決するにはPython IDLEで使用しているPython 3.12.2に対して openpyxl をインストールしなくてはいけませんでした。

＃解決の手順
1.ターミナルでPython 3.12.2に対応する pip コマンドを使用して openpyxl をインストールする。
```
python3.12 -m pip install openpyxl
```
2.ターミナルでPythonスクリプトを実行する際に、以下のコマンドを入力することでPython 3.12.2を明示的に指定し、python3.12を使えるようになる。
```
python3.12 /path/to/your_script.py
```

これによってPython IDLEと同じバージョンのPythonで「openpyxl」がインストールされるため、Python IDLEがきちんと動きました。あとは、本に載っている入力したコードをIDLEに入力し、無事にアウトプットができました。

### 最後に
ご回答いただきありがとうございました！　今後もよろしくお願いいたします。
Turboとはどんな機能なのか？

# はじめに
コードを入力していてエラーがでたとき、GPT等を利用していてわからなかった用語がでてきたのでアウトプットしたいと思います。今回はTurboについてです。

## **Turboとはどんな機能？**

Turboは、Railsアプリケーションのページ遷移を高速化するための機能で、特にTurbo DriveやTurbo Framesを利用して、ページ全体を再読み込みせずに部分的なコンテンツの更新を可能にするものです。これにより、ユーザー体験が向上すします

## **似たもの**

似た機能には、以下のようなものがあります

- **React Router**: Reactを使用したアプリケーションで、クライアントサイドのルーティングを提供する。
- **Vue Router**: Vue.jsアプリケーションにおけるルーティングを管理するためのライブラリ。
- **AJAX**: JavaScriptを使って非同期にデータを取得し、ページを更新する技術。

## **メリット**
- **高速なページ遷移**: ページ全体を再読み込みしないため、遷移が速い。
- **シンプルな実装**: Railsに組み込まれているため、追加の設定が少なくて済む。
- **SEO対応**: サーバーサイドレンダリングに対応しているため、SEOにも良い影響を与える。

## **デメリット**
- **学習コスト**: Turboを使うためには、特有の概念や使い方を学ぶ必要がある。
- **JavaScriptとの統合**: 既存のJavaScriptライブラリと併用する際に、競合が発生する可能性がある。

## **特徴**
- **部分的更新**: Turbo Framesを使うことで、特定の部分だけを更新できる。
- **フォームの非同期送信**: フォーム送信時にページをリロードせずにデータを送信できる。
- **URLの管理**: ページ遷移時にURLを更新できるため、ブラウザの履歴にも対応しているカ。

## **いつからあるのか**
Turboは、Hotwireという新しいフロントエンドスタイルの一部として、2021年に登場したダ。Hotwireは、Basecampの技術者たちによって開発された。

### **起源**

Turboの起源は、Basecampの開発者たちが、Railsアプリケーションのパフォーマンスを向上させるために取り組んだプロジェクトから来ています。彼らは、ページ遷移の体験を改善するための新しい手法を模索し、Turboを生み出したそうです。


## さいごに
Turboの概要だけを今回お伝えしました。実際にこれを使用したコードを入力する際はもっと詳しく調べて実装していきたいと思います。
「2冊目の本」としてオススメできる情報セキュリティ本

## はじめに

◆この記事は何？
以前、セキュリティを学ぶために1冊目としておすすめできる本について[記事](https://qiita.com/mkt_hanada/items/340fc59c291db8aa192a)を書きました。

本記事では、2冊目におすすめできる本を紹介します。

◆対象は？
セキュリティを学ぼうとされる方

## 先に結論

- セキュリティを学ぶ際に2冊目におすすめできる本は[「マンガ＋図解で基礎がよくわかる　情報セキュリティの教科書」](https://amzn.asia/d/fIK2Rs0)
- 2冊目におすすめできる本の特徴
    - 文字の情報量が多い
    - 実際の例や実践的な例を扱う
    - 背景まで説明がある

## 「2冊目」はどんな本を選ぶと良いか

私は年間で50冊以上の技術書を読みます。
その経験から得た「2冊目の技術書」について経験を共有します。

「1冊目の技術書」は、視覚的なわかりやすさを重視すると良いです。情報量も少ない方が良いです。

一方で「2冊目の技術書」は、
- 情報量が多い
- 丁寧な説明
- 扱う領域が広い

のような特徴がある本が良いです。

そしてその内容に、
- 実際の例を扱う
- より実践的な内容を扱う
- 理論の背景まで説明する

などが含まれる書籍が望ましいと考えます。入門者から中級者に成長しやすいためです。

## 「マンガ＋図解で基礎がよくわかる　情報セキュリティの教科書」

セキュリティ分野の1冊目におすすめなのは[「ゼロからスタート！　教育系YouTuberまさるの情報処理安全確保支援士１冊目の教科書 」](https://amzn.asia/d/0HiKo4x)です。

2冊目におすすめできるのが「マンガ＋図解で基礎がよくわかる　情報セキュリティの教科書」です。

◆この本の良いところ
- 難しい概念は漫画や図で説明
- 情報セキュリティを学ぶ上で必要な基礎・基本が充実
- 実際の例がある。しかも読者自身で試せる良質な例が豊富に紹介される

2024年7月に発売された本ですが、これから情報セキュリティを学ぶ上での定番本になると思います。

## おわりに

この記事では、「2冊目の技術書」の特徴とセキュリティ分野でおすすめできる2冊目の本について紹介しました。

参考になれば幸いです。
HTMLでリストを作成する

## HTMLでリストを作成
めちゃめちゃ基本的ですがHTMLでリスト表記を学んだのでメモ

基本的にliタグでリストの要素を囲み、それをさらにulタグで囲むと作成できる

<details open><summary>サンプルコード</summary>

```html:index.html
  <body>
    <ul>
      <li>りんご</li>
      <li>ばなな</li>
      <li>ぶどう</li>
    </ul>
  </body>

```
</details>

結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815854/77c26872-b334-9e71-1f7f-124658afb733.png)


その他にもulタグの代わりにolタグを使うと番号付きリストが作成可能らしいです

参考にしたサイト

https://magazine.techacademy.jp/magazine/5712
OracleのSQLパフォーマンス調査時によく利用するv$sql・v$session各カラムの意味合い

### `v$sql`ビューのカラム説明

- **`v$sql.elapsed_time`**
  - **説明**: SQLの実行が開始されてからの総経過時間をマイクロ秒単位で示す。実行時間の累積値である。
  - **意味**: SQLが実行中にかかった全体の時間を表し、SQLが複数回実行された場合は、その総時間を含む。

- **`v$sql.executions`**
  - **説明**: SQLが実行された回数を示す。SQLが実行されたトータルの回数である。
  - **意味**: SQLの実行頻度を示し、例えば、SQLが10回実行された場合、`executions`の値は10になる。

- **`v$sql.last_active_time`**
  - **説明**: SQLが最後にアクティブだった時刻を示す。SQLが最後に実行された時刻や、最後にパフォーマンス関連のアクションが行われた時刻である。該当SQLが実行中の場合、現在時刻に比較的近い時刻となる。
  - **意味**: SQLが最近アクティブだったタイミングを示し、SQLの実行や関連操作が行われた最後の時刻を表す。

- **`v$sql.last_load_time`**
  - **説明**: SQLが最後にライブラリキャッシュに読み込まれた時刻（つまり、ハードパースにより実行計画が作成された時刻）を示す。
  - **意味**: SQLがライブラリキャッシュにロードされた最新のタイムスタンプを示す。パースや再利用などの際に更新される。

- **`v$sql.first_load_time`**
  - **説明**: SQLが初めてライブラリキャッシュに読み込まれた時刻を示す。
  - **意味**: SQLが最初にライブラリキャッシュにロードされた時点を示し、SQLがキャッシュに存在してからの経過時間の参考になる。

### `v$session`ビューのカラム説明

- **`v$session.sql_exec_start`**
  - **説明**: セッションがSQLの実行を開始した時刻を示す。
  - **意味**: SQLの実行が開始された具体的な時刻で、実行の開始時刻を把握するために使用される。

### 違いのまとめ

- **`v$sql.last_active_time` vs `v$sql.last_load_time`**
  - `last_active_time`はSQLが最後にアクティブだった時刻（最後に実行や関連操作が行われた時刻）を示す。`last_load_time`はSQLが最後にライブラリキャッシュに読み込まれた時刻を示し、SQLがパースされた最新のタイムスタンプである。

- **`v$session.sql_exec_start` vs `v$sql.last_active_time`**
  - `sql_exec_start`はセッションでSQLの実行が開始された時刻を示すが、`last_active_time`はSQLが最後にアクティブだった時刻を示す。前者は実行開始時刻、後者は最近のアクティブなタイミングである。

---

※ ChatGPTにうかがった上で、実験してファクトチェックし、加筆修正しました。
解いてみた。「Cランク：野球の審判」

# 問題
[「Cランク：野球の審判」](https://paiza.jp/works/mondai/c_rank_skillcheck_archive/umpire)

# コード
Javaで解いてみました。

``` Java
import java.util.*;

public class Main {
    public static void main(String[] args) {

        Scanner sc = new Scanner(System.in);
        int nN = sc.nextInt();
        
        int nStrike = 0;
        int nBall = 0;
        
        for (int i = 0; i < nN; i++) {
            String sS = sc.next();
            if (sS.equals("strike")) {
                nStrike++;
                if (nStrike >= 3) {
                    System.out.println("out!");
                }else {
                    System.out.println("strike!");
                }
            } else {    // ball の判定
                nBall++;
                if (nBall >= 4) {
                    System.out.println("fourball!");
                } else {
                    System.out.println("ball!");
                }
            }
        }
    }
}

```

# 解説
## 標準入力からの数値、文字列の読み取り
Scanner インスタンスを作り、nextInt()メソッドで数値（判定の回数）、next() メソッドで文字列（判定）を取得しています。

## 「判定」別分岐
### strike の場合
ストライクの回数（nStrike）をインクリメントします。
#### ストライクの回数が3回以上
"out!"と表示します。
#### ストライクの回数が2回以下
"strike!"と表示します。
### ball の場合
ボールの回数（nBall）をインクリメントします。
#### ボールの回数が4回以上
"fourball!"と表示します。
#### ボールの回数が3回以下
"ball!"と表示します。
【AndroidStudio】日本語化手順まとめ

# はじめに
みなさん慣れていればAndroidStudioインストールしてそのまま使用することが多いかと思います。
ですが、初学者の方や英語が弱い方などは、英語というだけで萎縮してしまうもの。
そこで今回は入門編として、AndroidStudioを日本語化する手順をまとめてみようと思います。

# 日本語化手順
実はJetBrainsのマーケットに日本語化プラグインが公開されています。
今回はそのプラグインを使用して日本語化してみます。

まずはご利用のAndroidStudioのバージョンを確認しましょう。

```
Android Studio Koala | 2024.1.1
Build #AI-241.15989.150.2411.11948838, built on June 11, 2024
```

確認できたら次に、以下リンクより該当のプラグインページを参照します。

https://plugins.jetbrains.com/plugin/13964-japanese-language-pack------/versions

上記リンクより適切なプラグインを導入します。
選択する際は年数とバージョンに一致するものを選択します。

Build #AI-`241`.15989.150.2411.11948838, built on June 11, `2024`

上記グレーになっている部分に一致するプラグインを導入します。

![スクリーンショット 2024-08-11 18.41.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/f640a6bc-23c8-4d82-2c4f-aab582748d59.png)

ご自身のがわかれば、該当のプラグインをdownloadより取得します。

ダウンロードが完了すればファイルを解凍し、AndroidStudioよりインポートする手順に移ります。

`Android Studio > Settings` より設定画面を開きます。

![スクリーンショット 2024-08-11 18.46.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/842e6c67-4721-efed-5577-a970c452203e.png)

上記画像のように、`Plugins > 設定アイコン > Install Plugin from Disk` と選択していきます。

ファイルを選択するウィンドウが表示されるはずなので、そこで先ほどダウンロードしたプラグインのjarファイルを選択し、導入します。

![スクリーンショット 2024-08-11 18.52.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/b21fee93-9de0-b38d-5c6a-6b0169df7aea.png)

選択すると導入したプラグインの詳細が表示されます。

![スクリーンショット 2024-08-11 18.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/1bb854a2-4f8a-fb26-5cd1-5938487bfe4e.png)

上記詳細より、`Restart IDE`とあるので選択し、IDEを再起動させます。

再度立ち上がると以下のように日本語化されていると思います。

![スクリーンショット 2024-08-11 18.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/3913d773-1869-e2f5-6a33-bdd716bd68f1.png)

プロジェクト選択する際の画面やメニューまで日本語化されています

![スクリーンショット 2024-08-11 18.55.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/23d9e877-0043-1b7d-d393-d92542292a9f.png)

設定画面もこんな感じに。

![スクリーンショット 2024-08-11 18.56.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354522/704e370c-51f5-a1cc-52db-c3cd7d1a8b0b.png)

これであれば初学者の方や英語が弱い方でも安心して触れるかと思います。
設定は以上です。

# さいごに
やはりお盆はどこも人混みがすごいですね、、、
.envファイルと何かについて

# はじめに
現在Reactとsupabaseを使用してTodoアプリを制作しています。制作している中で.envファイルというものが出てきたのですが、.envファイルとは何か分からなかったので調べてみました。

## .envファイルとは
.envファイルとはすごく簡単にいうと秘密の情報を書いておくためにファイルです。具体的には、環境変数を書くことができます。今回は下記のようにsupabaseのkeyを設定しています。

```.env
VITE_SUPABASE_URL=https://⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎⚫︎
VITE_SUPABASE_ANON_KEY=aaaaaaaaaaaaaabbbbbbbbbbbb111111111
```

## どんな時に使うのか？
.envファイルは隠しファイルとなっているので隠したい情報などを記述できます。アプリケーションで使用する、環境変数やapiのキーなどを管理するために使用します。apiのキーなどを公開してしまうと悪用されてしまうことがあるので気をつけてください。<font color="Red">**下記の記事のように高額の請求が来てしまうこともあるそうです。**</font>

https://qiita.com/AkiyoshiOkano/items/72002409e3be9215ae7e

## 最後に
今回は.envファイルについて簡単にですがまとめてみました。.envファイルがどんなものか理解が進んでよかったです。

## 参考記事

『環境変数って？ .envファイルって？』

https://qiita.com/shunii/items/5b26f14fc0d2f64de8f6

『[React].envファイルの使い方』

https://zenn.dev/ryohei0509/articles/4612714e2a4c2d

『Reactの.envにシークレットトークンとかを決して含めてはいけない』

https://qiita.com/ken-s/items/b6190283db28295155bb
Drupalでdotenvを使う

## はじめに
`dotenv`は環境変数を読み込むために用いられるライブラリです。例えばPHPだと[phpdotenv](https://github.com/vlucas/phpdotenv)が有名です。

今回は`Drupal`で`dotenv`を使用する方法についてまとめます。

## なぜdotenvを使うのか
なぜdotenvを使うのかというと
- 環境変数のハードコーディングを避けるため
    - セキュリティの観点でよろしくない
- 環境の切り替え（例えば開発環境から本番環境）の際に環境変数の設定を楽にする

といった理由が挙げられます。

## 早速準備してみる
今回はDrupalで提供されている`dotenv`を使用します。

### 環境
最新版の`1.2.x`を使用する場合、以下の環境を用意しておく必要があります。
- PHP8.0以上
- Drupal10

### インストール
1. `drupal/dotenv`をcomposerを使ってinstallします。
```bash
composer require 'drupal/dotenv:^1.2'
```

`drupal/dotenv`ではsymfonyのdotenvをインストールする必要があるので、こちらもインストールします。
```bash
composer require symfony/dotenv
```
ここで注意していただきたいのが`symfony/dotenv`の最新版`v7.1.3`(2024/08/11時点)では`drupal/dotenv`に対応していないため`v6.4`をインストールするようにしてください。

---

作成したDrupalプロジェクトのルートに`load.environment.php`を追加し、以下のように記述します。
```php
<?php

use Symfony\Component\Dotenv\Dotenv;

(new Dotenv())->usePutenv()->bootEnv(DRUPAL_ROOT . '/../.env', 'dev', ['test'], true);

```
こちらのファイルでは先ほどインストールした`symfony/dotenv`を用いて環境変数の読み込みを行います。`.env`がない場合は`.env.dist`が読み込まれます。

---
続いて`composer.json`に以下の内容を追記し、`load.environment.php`をautoloadします。
```json
"autoload": {
    "files": ["load.environment.php"]
}
```

---
最後に以下のコマンドを実行します。
```bash
composer update --lock
```

```bash
composer dump-autoload
```

### 使用方法
任意のphpファイルで`$ENV['HOGE']` で環境変数を読み込むことができます。

例)
```
APP_ENV=dev
```

```php
<?php

echo $_ENV['APP_ENV']; //dev
```
また`.env`にスペース（余白）を入れないように注意してください。
```
//OK
APP_ENV=dev

//NG
APP_ENV = dev
```

## 参考
https://www.drupal.org/project/dotenv
HTMLとCSSを使ってシャインエフェクトを作成する方法

ウェブサイトにビジュアルエフェクトを追加すると、訪問者にとってより魅力的で興味を引くものになります。ボタンやテキストに追加できるクールなエフェクトの1つに「シャイン」エフェクトがあります。これは、テキスト上をライトが走るようなイリュージョンを与えます。このチュートリアルでは、HTMLとCSSを使ってこのエフェクトを実現する方法を説明します。

ステップバイステップガイド
-------------![Slide-to-Unlock-Shine.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3858813/69c5bfff-6f30-e1b3-9bed-328c13ebf298.gif)


まず、ボタンのベーシックなHTMLストラクチャーを見てみましょう。

 ```
 <a href="https://forfrontend.com" class="btn-shine" target="_blank">Get early access</a>
 ```

このHTMLコードは、`btn-shine` クラスを持つボタンとしてスタイル設定されたリンクを作成します。それでは、シャインエフェクトを作成するためにCSSを追加してみましょう。

### CSSでボタンをスタイリングする

次に、シャインエフェクトを実現するためのCSSコードを紹介します。このコードは、[shine animations](https://forfrontend.com/css-shine-effects/) を使ってボタンをより魅力的に見せるために必要な全てを含んでいます。
```
body {
  background: black;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn-shine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 48px;
  color: #ffffff;
  background: linear-gradient(to right, #4d4d4d 0%, white 10%, #4d4d4d 20%);
  background-position: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s infinite linear;
  animation-fill-mode: forwards;
  -webkit-text-size-adjust: none;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

@keyframes shine {
  0% {
    background-position: 0;
  }
  60% {
    background-position: 180px;
  }
  100% {
    background-position: 180px;
  }
}

```
### CSSの説明

*   **バックグラウンドとフォントスムージング:** bodyはブラックのバックグラウンドを持ち、モダンな印象を与えるために「ポピンズ」フォントを使用しています。フォントスムージングにより、異なるデバイスでのテキストレンダリングが向上します。
    
*   **ポジショニング:** ボタンは、(`position: absolute、top: 50%、left: 50%`)、および`transform: translate(-50%, -50%)`を使用してスクリーンのセンターに絶対配置されています。
    
*   **ボタンのスタイル:** ボタンには、サイズを調整するためのパディングがあり、ダークグレーからホワイト、そして再びダークグレーに変わるグラデーションバックグラウンドを使用しています。このグラデーションがシャインエフェクトを生み出します。
    
*   **テキストクリッピング:** `background-clip: text`プロパティは、テキストにグラデーションバックグラウンドをクリップし、`-webkit-text-fill-color: transparent`によってボタンの残りの部分をトランスペアレントにし、テキストのみがグラデーションを表示します。
    
*   **アニメーション:** @keyframesルールは、3秒間にわたってグラデーションバックグラウンドをテキスト上に左から右にムーブするshineというアニメーションを定義しています。このようなshine animationsは、`animation: shine 3s infinite linear`で無限にループするようセットされています。
    

結論
--

これらのステップに従うことで、ウェブサイトのボタンやテキストに魅力的なシャインエフェクトを追加できます。このエフェクトは、サイト内の重要なエレメントに注目を集めるための素晴らしい方法です。異なるカラーやアニメーションのデュレーションを試して、ブランドに合ったユニークなスタイルをクリエイトしてみましょう。
SwiftUI　sheetの画面遷移から戻ってきた時に処理を行う方法

sheetの画面遷移方法はこちらです。

https://qiita.com/yuta317/items/cb74cba8e98e2c4a38b2

画面遷移から戻ってきた時に処理を行いたいことってあると思います。

# コード内容

```.swift
struct HomeView: View {
    @State var showSheet: Bool = false

    var body: some View {
        NavigationView {
            Button("シート遷移サンプル"){
                showSheet.toggle()
            }       
            .navigationTitle("実装サンプル")
        }
        .sheet(isPresented: $showSheet,
           onDismiss: {print("Sheet遷移サンプルからの戻り")},
           content: {Text("Sheet遷移サンプル")}
        )
    }
}
```

`sheet`に`onDismiss`がある為`print("Sheet遷移サンプルからの戻り")`の箇所に処理を実装すると、戻ってきた時に実行されます。
Ruby on Railsチュートリアル 1.2.1の環境構築で引っかかった話

## はじめに
Ruby on Rails チュートリアルの記載に従って、GitHub Codespacesで環境構築を試みたところ、rails serverが実行されず（「Railsチュートリアルのロゴ画像が表示されたら完成です。」のロゴ画像が表示されなかった）、戸惑ってしまいました。
おそらく、私以外にここで困る人はいない気はしますが、備忘録として残しておきます。

▼ 以下のとおり`command not found`が出力されてしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/eae218ec-0291-e641-e07f-ef5639c016dc.png)

## Rails をインストールする

Ruby on Rails チュートリアルの「1.2.2 Railsをインストールする」を参考に、Rails をインストールしました。無事にインストールできました。
（bundlerについては、既にインストールされていたので問題ありませんでした。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/e200cb34-dc0f-d304-0d1c-76c01146b8d8.png)

## rails serverを実行

ようやくrails serverを実行！と思いましたが、さらにエラー(`Your Ruby version is 3.2.5, but your Gemfile specified 3.2.4`)が発生しました。
Gemfileに記載のRubyのバージョンと実際にインストールされているRubyのバージョンが異なっていることが原因のようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/362e8afe-0b1c-d756-2996-e0574c245a38.png)

あまりに無知で、Gemfileってどこにあるの？という感じでしたが、スクロールしていけば見つかりました（Rubyファイルですので、ルビーのマークを探すとよいです）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/49783436-7fbe-b499-aa60-df7895d0fcf7.png)

エラーコードと参考にしたqiitaの記事の記述から、`ruby '3.2.4'`がRubyのバージョンと一致していないことが原因とわかっていますので、この部分を`ruby '3.2.5'`に修正しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/c8c8fdd4-cce2-9e16-cdb0-99ec11419522.png)

修正後、上図のとおり`bundle update`を実行します。

## 今度こそrails serverの実行

再度、`rails server`コマンドを実行したところ、求めていた画面が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3763181/6f499da0-e9e0-ecf6-9536-cf8e19d3b776.png)


## 助けられた文献

以下の記事の内容を読んで、対処法がわかりました。先人の方ありがとうございます。

https://qiita.com/TK_WebSE/items/c9f063891a3c5a98c0f5
４．.gsファイルで生成したHTMLコードがタグとして読み込まれないエラー

# 突然HTMLが文字列になってしまった！！！
さっきまではきちんとタグとして読み込んでいたのですが、何かよからぬ修正をしてしまったのかタグとして読み取ってもらえなくなっちゃいました！！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782982/d8583641-9302-e476-8783-74fdbd79fd23.png)

（何もしてないのに壊れた！・・・とは言いませんとも。）

# 対応１：.gsファイルを修正前のコードに戻してみる
本事象が起きた日の最初の状態に戻してみるも改善されず。
※ここがドはまりした原因でして、gsファイル内のロジックに問題があるから出力されないものという思い込みがあったのですよね。

# 対応２：キャッシュクリアしてみる
キャッシュの問題かと思ったのでブラウザを変えて動作確認までしてみたのですが、変わりなし。

# 対応３：.gsファイル内のHTMLはバッククォートで囲む
本事象を調べているうちに、.gsファイル内でHTMLコードを記述する場合は、バッククォートで囲まれている必要があるとのこと。
そうなるように修正してみたのですが、変わりなく。
以下コードくらいまで、単純化して記述してもダメでした。
```
html = `<span>test</span>`;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2782982/0795cb72-cb3a-ddb4-e196-056650d9d2e8.png)

# 原因：htmlファイル内の変数の記述に問題あり！
htmlファイルの中で、gs内で定義した変数を２種類の呼び方をしていたため、より端的な記述のほうに統一したことで今回の問題が起こりました。
``` htmlとして表記.html
<span class="gridParent">
  <? output._ = formHTML ?>
</span>
```
``` 文字列として表記.html
<footer>
  <?= footer ?>
</footer>
```

以下のどちらの形でも変数の中身すべてをhtmlに反映することができますが、変数の中身にHTMLタグが含まれるときに、htmlとして生成してもらうためには`<? output._ = [変数名] ?>`と記載してあげる必要があったようです。
浅学でお恥ずかしい限りです。

今日はここまで。
HTTP Response Status Code

# HTTPステータスコード

## 1xx 情報レスポンス (Informational)
- **100 Continue**: リクエストが正常に受け取られ、処理が続行できることを示す。

## 2xx 成功レスポンス (Success)
- **200 OK**: リクエストが正常に処理され、要求されたページが返されたことを示す。
- **201 Created**: 新しいリソースが作成されたことを示す。

## 3xx リダイレクト (Redirection)
- **301 Moved Permanently**: リソースが永続的に別の場所に移動したことを示す。
- **302 Found**: 一時的に別の場所に移動していることを示す。

## 4xx クライアントエラー (Client Error)
- **400 Bad Request**: リクエストが不正なため、サーバーが処理できなかったことを示す。
- **404 Not Found**: 要求されたリソースが見つからなかったことを示す。

## 5xx サーバーエラー (Server Error)
- **500 Internal Server Error**: サーバー内で予期せぬエラーが発生したことを示す。
- **503 Service Unavailable**: サーバーが一時的に利用できない状態であることを示す。



# HTTPステータスコード

| 桁  | 意味                         | 代表的なコードと説明                                                                 |
|-----|------------------------------|------------------------------------------------------------------------------------|
| 1xx | 情報レスポンス (Informational) | **100 Continue**: リクエストが正常に受け取られ、処理が続行できることを示す。                     |
| 2xx | 成功レスポンス (Success)       | **200 OK**: リクエストが正常に処理され、要求されたページが返されたことを示す。<br>**201 Created**: 新しいリソースが作成されたことを示す。 |
| 3xx | リダイレクト (Redirection)    | **301 Moved Permanently**: リソースが永続的に別の場所に移動したことを示す。<br>**302 Found**: 一時的に別の場所に移動していることを示す。 |
| 4xx | クライアントエラー (Client Error) | **400 Bad Request**: リクエストが不正なため、サーバーが処理できなかったことを示す。<br>**404 Not Found**: 要求されたリソースが見つからなかったことを示す。 |
| 5xx | サーバーエラー (Server Error)  | **500 Internal Server Error**: サーバー内で予期せぬエラーが発生したことを示す。<br>**503 Service Unavailable**: サーバーが一時的に利用できない状態であることを示す。 |
github pushに時間がかかりコミットができない

# 問題
Githubにコミットをしようと`github push origin main`をしたところ、ずっとローディング状態が続きコミットが反映されないことがありました。

通常は`github push`を完了したら現在のディレクトリのパスが表示されてターミナルの操作ができるのですが、今回は現在のディレクトリのパスがいつまで経っても表示されずターミナル操作ができない状態でした。

# 試したこと

ネットで調べると、バッファのサイズを上げることや**shift＋c(macはcontrol + c)**でターミナル閉じてとアドバイスされていたので、その通りにやってみても同じでコミットがいつまで経ってもできませんでした。

https://qiita.com/_futaba_/items/30bb877ea6a4a4c6f465

https://zenn.dev/t_fukuyama/articles/a7078ed624d04e


# 解決法
最終手段として、PCの再起動をしてGithubを見てみたところ、コミット中で止まっていたものがコミットされていました。

その後テキストエディターでもう一度`git push`をしてみたら通常通りコミットがされました。

再起動をすると事象が解決されたので、Githubとの通信がうまくいっていなかったのかなと予想しています。

# おわりに
今回は謎の事象が起こってしまい解決方法がなかなか見つからず無駄に時間をかけてしまいました。
解決法はすごく単純だったので、同じ事象が起こったらまずはPC再起動を試してみてみることをおすすめします。
blobとは（フロントエンド編）

# はじめに
今回、インターンでblobを扱うようになったので、今回記事を書いていきます！

**Blob**（Binary Large Object）は、クライアントサイドでファイルデータやバイナリデータを扱う際に非常に大切になります。特にWebアプリケーションの開発において、Blobを利用することで、ユーザーがローカルファイルを操作したり、データをダウンロードしたりする機能を実装できます。本記事では、クライアントサイドのBlobの基本的な使い方から、実際のユースケース、パフォーマンスの最適化までを調べたことを書いていきます。

---

## 1. Blobの基本概念

クライアントサイドでのBlobは、主にJavaScriptで操作され、バイナリデータやファイルの内容を表現するために使用されます。Blobは、テキストデータやバイナリデータ、画像、動画など、さまざまなデータ形式を扱うことができます。
Blobは、以下のようにJavaScriptを使用して簡単に作成できます。

```typescript
const data = new Uint8Array([72, 101, 108, 108, 111]); // "Hello"のバイナリ表現
const blob = new Blob([data], { type: 'text/plain' });
```

## 2. Blobの主要なユースケース

### a. ファイルのアップロードとダウンロード

Blobは、ユーザーがアップロードするファイルの操作に頻繁に使用されます。HTMLの`<input type="file">`要素を利用して、ユーザーが選択したファイルをBlobとして取得できます。

```typescript
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const blob = new Blob([file], { type: file.type });
    console.log(blob);
});

```

また、Blobを使ってデータをクライアントサイドで生成し、ユーザーにダウンロードさせることもできます。

```typescript
const text = "Hello, world!";
const blob = new Blob([text], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'hello.txt';
link.click();
```

### b. 画像や動画のプレビュー

ユーザーがアップロードした画像や動画をプレビューする機能を実装する際にも、Blobは有効です。`URL.createObjectURL()`を使ってBlobからURLを生成し、これを`<img>`や`<video>`タグの`src`属性に設定することで、簡単にプレビューが可能になります。

```typescript
const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector('#preview');

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    const url = URL.createObjectURL(file);
    preview.src = url;
});


```

### c. データの一時保存とWeb Worker

Blobは、一時的にデータを保存したり、Web Workerでの処理に使用することもできます。Web Workerは、重い計算処理や非同期タスクをメインスレッドから分離して実行するために使われますが、Blobを使用してスクリプトを動的に生成し、Workerに渡すことが可能です。

```typescript
const blob = new Blob([`
  onmessage = function(e) {
    postMessage('Received: ' + e.data);
  }
`], { type: 'application/javascript' });

const worker = new Worker(URL.createObjectURL(blob));
worker.postMessage('Hello, Worker!');
worker.onmessage = function(e) {
    console.log(e.data);
};

```

## 3. パフォーマンスと最適化

Blobはクライアントサイドで非常に便利ですが、大量のデータを扱う場合、パフォーマンスに注意が必要です。以下のポイントを考慮することで、効率的なBlobの使用が可能になります。

### a. メモリの管理

Blobはメモリを消費するため、必要がなくなったBlobのメモリを解放することが重要です。`URL.revokeObjectURL()`を使用して、Blobに関連付けられたURLを破棄することで、メモリリークを防止できます。

```typescript
const url = URL.createObjectURL(blob);
URL.revokeObjectURL(url); // メモリ解放
```

### b. データの分割とストリーム

非常に大きなデータを扱う場合、データを分割して処理するか、ストリーミング技術を活用することで、メモリの使用量を抑えることができます。`ReadableStream`や`WritableStream`と組み合わせることで、Blobのデータを効率的に処理できます。

## 4. セキュリティの考慮

Blobはクライアントサイドでのデータ操作に便利ですが、セキュリティの観点からも注意が必要です。たとえば、ユーザーがアップロードするファイルにはマルウェアが含まれている可能性があるため、適切な検証やサニタイズ処理が求められます。また、クロスサイトスクリプティング（XSS）攻撃のリスクを減らすために、Blobの利用においてはCSP（Content Security Policy）を設定することも推奨されます。

---

## まとめ

クライアントサイドでのBlobの利用は、Webアプリケーションにおけるファイル操作やデータ処理の可能性を大幅に広げます！
blobを使って、最高のアプリ作っていきましょう


参考にした記事

https://developer.mozilla.org/ja/docs/Web/API/Blob

https://zenn.dev/kazu1/articles/736991963449d6
AWS KMSまとめ（SAA-C03）

SAA-C03向けメモ
# HSM (Hardware Security Module)
デジタルキーを保護、管理し、暗号/復号化機能を実行する物理コンピューティングデバイス

# AWS KMS
|キータイプ|使用範囲|管理|削除|作成|自動ローテーション|
|---|---|---|---|---|---|
|AWSマネージドキー|特定サービスのみ|AWS|不可|AWSがKMS HSMで作成|1年ごと(強制)|
|カスタマーマネージドキー|制限なし|ユーザー|可|①ユーザーがKMS HSMで作成(デフォルト)|90日〜7年の間で選択可(無効化可)|
|||||②ユーザーが外部で作成し、インポート|不可|
|||||③ユーザーがAWS Cloud HSMで作成|不可|

カスタマーマネージドキーのみ、鍵を共有が可能。
共有する対象のAWSアカウントIDを鍵の使用者として追加する

ユースケース: 他のAWSアカウントと、暗号化されたAMIやDBのスナップショットなどを共有する。
![IMG_4197.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2950120/63627709-9e05-c187-5e7d-39d050c19d91.jpeg)


参考
https://aws.amazon.com/jp/about-aws/whats-new/2024/04/aws-kms-automatic-key-rotation/
【Reactアプリ開発】学習管理アプリ完成とアウトプット勉強法からの学びについて

# はじめに
以前Reactで作成しました学習管理アプリの完成版が出来ました！
本記事では、完成版アプリのご紹介と、完成するまでの気付きや学びを共有したいと思います！

前回の記事はこちら↓

https://qiita.com/Kei-dev-1213/items/bb35b05b0c5ab885e86e

# 完成したアプリ

![画面収録 2024-08-11 13.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832049/c4351181-100d-cb67-728a-b21e6a4b7018.gif)

### Github

https://github.com/Kei-dev-1213/Shin-Study-Record-List

- 前回との変更点
  - Chakra UI（Reactのライブラリ）でスタイリングしているので、前回の質素なアプリと比較するとかなりそれっぽい 
  - 学習記録をsupabase（データベース機能を提供するサービス）で管理しているため、画面を更新してもデータがクリアされない
  - 学習記録の登録・削除だけでなく、編集機能（一度登録した学習記録の変更）も追加
  - Github ActionsによるCICD（自動デプロイとテスト実行）を追加

前回との変更点は大体上記の通りですが、Reactの開発自体が初めての経験だったので、躓きながらも何とかここまで完成させたという感じですね。。

# 完成したことによる学び
結論から言えば、<font color="Red">**自分で何かを作ること**</font>こそが最大の学びになるな…と思いました。
いや、勿論こんなことはプログラミングを学ぶうえでは散々言われてることではあるんですが、今回のアプリ開発を通して身を持って体験しました。

というのも、私は約10年ほどこの業界におりますが、恥ずかしながらプライベートで何かを作るということをしてきませんでした。。React自体に触れるのも初めてで、様々なエラーにぶち当たりながら開発してきました。
そんな私がこのアプリ開発を通して大きく学んだことを2点ほどご紹介いたします。

- ### エラーと闘った分だけ強くなれる
雑草は踏まれた分だけ強くなるというのと同じような話ですが、これは真理だと思います。業務でも個人開発でも言えますが、何かを作っていてエラーに遭遇しないということは絶対にあり得ません。<font color="Red">**大切なのはエラーに遭遇しないことではなく、エラーを解決するまでに何を学んだか**</font>だと思います。例えば、エラーっぽい部分のアタリをつけるための方法だったり、正しい検索の仕方などですね。
普段からエラーに慣れておけば、別の開発をしているときに同じエラーが出てもすぐに解決出来ますし、調べ方も慣れてくるので、やっぱり自分で頭を悩ませて色々試してみるというのが大切だな、と思いました。

- ### 積み上げてきた実績が見えるからこそやる気になる
私が入っているコミュニティの"JISOU"では、エラーに遭遇したときに10分調べてわからなかったことはQiitaの記事にしろという教えがあります。
この2週間弱、私もこの通りにQiitaの記事を色々書いてきましたが、今までの記事を振り返ってみると「ああ、苦労しながら頑張ったんだな」と、我ながら思います😁😁
また、Qiitaの記事だけでなく、成果物は必ずGithubにコミットしているので、草（contribution）が生い茂っているのを見ると達成感を感じます笑
こういった資産（？）を見ると、ここまでやってきたんだからもっと頑張ろう！と思えてくるので、黙々と開発するよりもやる気が湧いてきますね！

# おわりに
アプリ開発だけじゃなくて何にでも言える話だと思いますが、`とりあえずやってみる`の精神が大切だな、と思いました。
大体やってみようと思い立ってから初めて行動に移すと失敗するんですが、それはそれで学びがあるということなので、決して無駄にはならないと思います。
私が"JISOU"に入ったのも、とりあえずやってみるかの精神でチャレンジしてみた感じでしたが、今のところ後悔はしていません笑
これからも他の人の役に立てるようなエラー解決の記事や、個人的な学びの記事をどんどんアウトプットしていきたいと思います！！

## JISOUのメンバー募集中🔥
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇

https://projisou.jp/
手元でちょろっとファイル名を一括更新したい

# やりたいこと
- 特定のディレクトリ直下にあるファイル名を一括変換したい
- ファイル名に含まれる特定の文字列を特定の文字列へ変換したい
- 手動でぽちぽちするのも面倒だが、エディタを立ち上げてプログラムを組むほどではない
- ターミナルで完結したい

#### イメージはこんな感じ↓
```txt: 変換前
target-directory
    |-単体試験仕様書_abc.xlsx
    |-単体試験仕様書_def.xlsx
    |-単体試験仕様書_ghi.xlsx
    |-単体試験仕様書_jkl.xlsx
    |-単体試験仕様書_mln.xlsx
    |-単体試験仕様書_opq.xlsx
    |-単体試験仕様書_rst.xlsx
```
```txt:上司「単体試験仕様書じゃなくて、単体テスト仕様書に全部直しておいて」
target-directory
    |-単体試験テスト_abc.xlsx
    |-単体試験テスト_def.xlsx
    |-単体試験テスト_ghi.xlsx
    |-単体試験テスト_jkl.xlsx
    |-単体試験テスト_mln.xlsx
    |-単体試験テスト_opq.xlsx
    |-単体試験テスト_rst.xlsx
```

# ターミナルからPythonを起動する
早速お仕事をしていきましょう。
PCにPython3がインストールされており、Pythonにファイルの書き込み権限が付与されていることが前提です。

### 1. pythonを起動する
```sh
targetf-directory $ python
Python 3.12.2 (main, Feb 21 2024, 01:35:03) [Clang 15.0.0 (clang-1500.1.0.2.5)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>
```
### 2. ファイル名を取得
```py
>>> files = os.listdir()
>>> files
['単体試験仕様書_abc.xlsx', '単体試験仕様書_def.xlsx', '単体試験テスト_ghi.xlsx', '単体試験テスト_jkl.xlsx', '単体試験テスト_mln.xlsx', '単体試験テスト_opq.xlsx', '単体試験テスト_rst.xlsx']
```

### 3.for文で一括変換
```python
>>> for file in files:
...     os.rename('./'+file,'./'+file.replace('単体試験','単体テスト'))
```
以上です！
【Husky✕Vite】lintが通らない場合はコミットできないようにする方法！

# はじめに
ViteでReactアプリの開発時、Gitへのコミット時に、自動的にlintを走らせて、エラーがある場合にはコミットさせないようにする方法をご紹介します！！

# 方法
huskyというライブラリを使用します。

:::note info
**huskyとは？**
huskyは、Gitフックを簡単に管理・設定するためのツール。
Gitフックは、特定のGit操作（例えば、コミットやプッシュ）が実行される前後に自動的にスクリプトを実行する仕組み。
huskyを使うことで、これらのフックを簡単に設定し、コードの品質を保つための自動化されたチェックやテストを実行することが可能。
:::

導入方法は以下の通り。

まずはViteのプロジェクト内で以下の通りhuskyをインストールし、初期設定を行います。

```terminal:huskyの導入
npm install --save-dev husky
```

```terminal:huskyの初期設定
npx husky init
```
すると、プロジェクト直下に.huskyというフォルダが作成されますので、.husky/pre-commitをオープンし、以下の通り設定します。

```diff_tsx:pre-commit
- npm
+ npm run lint
```

:::note info
**pre-commitとは？**
Gitのコミット操作が実行される前に特定のスクリプトやコマンドを実行するためのフック。
pre-commitファイルに記載されたコマンドがGitへのコミット前に自動的に実行されます。
※ViteはESLintをリンターに採用しており、プロジェクトを作成した時点で ESLint による静的解析が有効になっているので、別途npm installの必要はない。
:::

なんとこれだけで準備は完了です！
では、早速試してみましょう！！
src/App.tsxを以下の通り編集してみます。

```diff_tsx:App.tsx
import "./App.css";

function App() {
+  const hoge = () => {};

  return <></>;
}

export default App;
```

↑のソースでは、hoge関数は使用されていないため、lintでエラーとなります。
この状態でコミットしてみましょう。

```terminal:コミット
git commit -a -m "test commit"
```

```terminal:結果

> digital-card-app@0.0.0 lint
> eslint .

/Users/dev/jisou/program/Digital-Card-App/src/App.tsx
  4:9  error  'hoge' is assigned a value but never used  @typescript-eslint/no-unused-vars

✖ 1 problem (1 error, 0 warnings)

husky - pre-commit script failed (code 1)
```

なんとエラーなり、コミットが失敗しました！(git statusで確認するとコミット出来ていない状態となります。)
では、今度はhoge関数を消した上でコミットしてみましょう。

```diff_tsx:App.tsx
import "./App.css";

function App() {
-  const hoge = () => {};

  return <></>;
}

export default App;
```

```terminal:コミット
git commit -a -m "test commit"
```

```terminal:結果
> digital-card-app@0.0.0 lint
> eslint .

On branch main
nothing to commit, working tree clean
```

今度は成功しました！
これで、Git上にはlintのエラーがある状態でのコミットができなくなったので、
人の目による見逃しは無くなりますね！

# おわりに
pre-commitに書いたコマンドが実行されるのでlintだけではなく、
コミット前にテストを実行したりprettierで整形したりと色々応用が出来そうです。

## JISOUのメンバー募集中🔥
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします！👇

https://projisou.jp/
UnityでSwitchのプロコンのジョイスティックを使う

# はじめに
Unityでプロコンのジョイスティックを使いたかった

# やり方
## Project Settingsをいじる
EditからProject Settingsを選択してInput Managerを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817552/09fa2bd0-c792-d37d-b6f3-3e9596419c21.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817552/8feac48d-ea6b-09a9-b378-afe9ae93dd90.png)
デフォルトだとSizeは18になっている．HorizontalとVerticalの部分を右クリックしてDuplicateArrayElementを選択する．図のようにわかりやすくLeftとRightをつけておく．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817552/d682d619-f8e6-cbc1-c9bb-3c58553ccecb.png)

※ どのコントローラでもデフォルトでは右ジョイスティックが使えないのでこのように設定していく必要がある．

次にAxisという項目をいじる
以下のような番号に対応している．番号の割り当て謎過ぎる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817552/64103d92-231c-23e7-f8de-a7a4051f870b.png)

## スクリプトをいじる

```c#:PlayerController.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour
{
    private float leftHorizontalAxis;
    private float leftVerticalAxis;
    private float rightHorizontalAxis;
    private float rightVerticalAxis;

    public float speed = 5.0f;

    private GameObject player;

    // Start is called before the first frame update
    void Start()
    {
        player = this.gameObject;
    }

    // Update is called once per frame
    void Update()
    {
        leftHorizontalAxis = Input.GetAxis("LeftHorizontal");
        leftVerticalAxis = Input.GetAxis("LeftVertical");
        rightHorizontalAxis = Input.GetAxis("RightHorizontal");
        rightVerticalAxis = Input.GetAxis("RightVertical");

        player.transform.position += new Vector3(leftHorizontalAxis, 0, leftVerticalAxis) * speed * Time.deltaTime;
        player.transform.position += new Vector3(rightHorizontalAxis, 0, rightVerticalAxis) * speed * Time.deltaTime;
    }
}
```
左右どちらのジョイスティックも同じ動きにしてる，めんどくさいので
適当に床と動かすオブジェクトを配置して実行する．動かす方にはスクリプトをアタッチするのを忘れないように
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3817552/13a8678f-46a5-f89a-48f1-a46e1c428c2a.png)

# おわり
動かせたね，やったね
AWS Cost Explorer 超入門：コストを可視化して賢く節約！

AWS を使い始めると、どれくらい費用がかかっているのか、不安になりますよね？ 
そこで役立つのが AWS Cost Explorer です。このサービスを使えば、AWS での利用状況とコストをグラフや表でわかりやすく表示できます。

## コスト分析の基本ツール
AWS Cost Explorer は、AWS での利用状況とコストを分析するための基本的なツールです。
例えば、どのサービスでどれくらい費用がかかっているのか、どのリージョンで多く利用しているのかなどを調べることができます。
![CE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/a64c76c2-e0b8-e221-8d0a-df46e3251ca7.png)
![CE2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/265d58a1-0172-d083-a317-96f6eaba28eb.png)

## コストを可視化する3つのステップ
グラフで全体像をつかむ: AWS Cost Explorer の画面では、コストをグラフで表示できます。
棒グラフや折れ線グラフなど、様々なグラフを使って、コストの推移をわかりやすく確認できます。
![CEグラフ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/30750851-bf72-b207-770a-6a06bfdf5d1d.png)

詳細なデータを分析: グラフだけでわからない詳細なデータは、データテーブルで確認できます。
サービス別、リージョン別、期間別など、様々な条件でデータを表示できます。

フィルターで絞り込む: 特定のサービスやリージョン、期間などの条件を指定して、必要な情報だけを絞り込むことができます。複数のフィルターを組み合わせることで、より詳細な分析を行うことも可能です。
![CEフィルター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/fe81b426-7710-85a2-1c19-eb9d92a14785.png)
## 具体的なユースケース
どのサービスでコストがかかっているか調べる: 例えば、Amazon EC2 や Amazon S3 のコストをグラフで可視化し、どのサービスに最も費用がかかっているのかを確認できます。
リージョン別の利用状況を分析: どのリージョンで多くのサービスを利用しているのかを確認できます。
過去のコストと比較する: 過去のデータと比較することで、コストの推移を把握できます。
![CEEC2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/e94c6a19-57c3-db2e-dd82-3a918089a930.png)
![CEEBS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/e3d9fdec-c759-707f-9835-c434cd19acef.png)
![CEs3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102361/5fe76b17-f43c-f6ef-8151-32e0c6921b02.png)

## さらに高度な分析へ
AWS Cost Explorer は、コスト分析の基礎を学ぶのに最適なツールです。
より詳細な分析や予測が必要な場合は、他の AWS サービスも活用できます。

AWS Cost & Usage Report: より詳細なコストデータを取得できます。

AWS Budgets: コスト上限を設定し、予算を超えた場合に通知を受け取ることができます。

AWS Savings Plans: 期間ごとの割引プランを活用して、コスト削減を目指しましょう。
## まとめ
AWS Cost Explorer は、AWS の利用状況とコストを可視化するための強力なツールです。
ぜひ活用して、コスト管理を効率化しましょう！

## 参考
#### AWS Cost Explorer【AWS Black Belt】(YouTube)
https://www.youtube.com/watch?v=poZiRvLYkoo

#### AWS Cost Explorer【AWS Black Belt】(PDF)
https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Black-Belt_2024_AWS-CostExplorer_0630_v1.pdf