OmniAICreator/Qiita-1.07M huggingface dataset:
[ Godot 4 ] UI制作で困ったら見られるようなメモ

# はじめに
### Godotとは
MITライセンスで開発されているオープンソースのクロスプラットフォーム用のゲーム開発エンジン。
この記事では基本的に`Godot4.2.1`を使用する。
### UIとは
ユーザーインターフェースのこと。画面上に表示されるものは基本的にUI。この記事では2dのUIにフォーカスしていこうと思う。
## 知っておくと役に立つこと
### screenの大きさを取得する関数
```GDscript
get_viewport_rect().size
```
用途
* windowの大きさを取得する。画面の大きさにUIを合わせたいときに便利。

### Nodeの名前を取得する関数
```GDscript
String(name)
```
用途
* nodeの名前を取得する。nodeの種類ではない。
* 一つのスクリプトで複数のノードを制御したい時などに便利。

Sutep Up !
* `String(name).to_lower()`で大文字を含まない名前が取得できる。

### 何かのアクションを検知する方法 - シグナル
シグナルは`ボタンが押された` `sliderの値が変更された`などのアクションを検知するのに使う。
* 例（BuottonNodeの場合）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794489/13c9a9c2-f23d-a855-ff1a-f7bc6ab71a61.png)
* 送信したいシグナルを選択し、送信先を選択することで使用できる。
* 上から三番目の`pressed()`の下に`. :: _on_pressed()`とあるが、これはシグナルがほかのnodeに送られていることを示すもの。別の名前の場合もある。


# 本文の目次
1. [ラベル(Lavel)](https://qiita.com/098orin/items/31828e617a1cb764a9f8#1%E3%83%A9%E3%83%99%E3%83%ABlavel)
2. [タブコンテナー(TabContainer)](https://qiita.com/098orin/items/31828e617a1cb764a9f8#2%E3%82%BF%E3%83%96%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%83%BCtabcontainer)

# 本文
## 1.ラベル(Lavel)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794489/8bc2b7a9-17df-1f23-b0c0-231ec3484263.png)
文字列を表示させるノード
基本的にノードの名前をプレイ画面上に表示させる。変更したかったら`text`プロパティを変更すればよい（なお、変更はscript上でも行うことができる）。

## 2.タブコンテナー(TabContainer)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794489/5dc1e198-2903-b1ec-4861-172a2610516b.png)
このノードはこのノードの子ノードを整列させる機能がある。
特にBoxContainerはこのノードの頭にタブとして並ぶ。
* BoxContainer
![NodeTree_BoxContainer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794489/cf0af025-3b42-20ef-588e-c088dbdfc783.png)
* 例 ( VBoxContainer を使用)
![Ex_BoxContainer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3794489/ded98d87-eb7a-ef0a-839e-fdb2e5e45029.png)

### ポイント
* このノードが非表示になるとこのノードの子ノードも非表示になる
* このノードの子ノードの大きさは基本的にこのノードの大きさに合うように調節される
* タブごとに表示させる要素を変えたかったら要素をBoxContainerの子ノードとする
* 大きさはsizeプロパティで調節できる
* 大きさの調整はscriptからでもできる

# 最後に
まだ少ないが随時追加する。

#### 関連記事
https://qiita.com/098orin/items/63b164ccbca36b20f7fe

https://qiita.com/098orin/items/0f3f433ad653a6feba7d
定数回ループを範囲forで

単純増加のループ処理

```c++:C++03
for (int i = 0; i < 5; i++) {
  // ...
}
```

を範囲forにしたとき

```c++:C++11
for (auto i : range<int>(5)) {
  // ...
}
```

みたいな実行効率を考えた range クラス相当は既にあるだろうと思ったのですが、軽く検索すると int[] や vec<int> などに [a] = a を代入してから使用しているものしか見つけられませんでした。真面目に探せば実行効率を考えたものは必ず出てくると思いますが、ざっくりと書いてみた。(コンパイラの最適化をかなり当てにしています)

```c++:sample.cpp
#include <iostream>

template <typename T>
struct range {
    struct iterator {
        T value;

        iterator(T n) : value(n) {}
        T operator *() { return value; }
        void operator ++() { ++value; }
        bool operator !=(iterator &rhs) { return value != rhs.value; }
    };

    T _start, _end;

    range(T count) : _start(0), _end(count) {}
    range(T start, T end) : _start(start), _end(end) {}
    iterator begin() { return iterator(_start); }
    iterator end() { return iterator(_end); }
};

int main()
{
    std::cout << "range(5):";
    for (const auto i : range<int>(5))
        std::cout << " " << i;
    std::cout << std::endl;

    std::cout << "range(2, 7):";
    for (const auto i : range<size_t>(2, 7))
        std::cout << " " << i;
    std::cout << std::endl;
}
```

```console:実行結果
range(5): 0 1 2 3 4
range(2, 7): 2 3 4 5 6
```

Apple clang version 15.0.0 (clang-1500.3.9.4)[x86_64] を使い

```console:
$ clang++ -std=c++11 sample.cpp -O -S
```

で出力したアセンブラの一部を抜粋

```asm:range<int>(5)のループ部
	xorl	%r14d, %r14d
	leaq	L_.str.1(%rip), %r15
	.p2align	4, 0x90
LBB0_1:                                 ## =>This Inner Loop Header: Depth=1
	movl	$1, %edx
	movq	%rbx, %rdi
	movq	%r15, %rsi
	callq	__ZNSt3__124__put_character_sequenceB8ue170006IcNS_11char_traitsIcEEEERNS_13basic_ostreamIT_T0_EES7_PKS4_m
	movq	%rax, %rdi
	movl	%r14d, %esi
	callq	__ZNSt3__113basic_ostreamIcNS_11char_traitsIcEEElsEi
	incl	%r14d
	cmpl	$5, %r14d
	jne	LBB0_1
```

変数 i は r14d レジスタで完結しています。
WebSocket Serverで Uncaught SyntaxError: Unexpected token 'o', "[object Blob]" is not valid jsonが出たときの対処法



## はじめに
去年、私自身が[WebRTCハンズオン 本編](https://qiita.com/yusuke84/items/43a20e3b6c78ae9a8f6c)を使用して、WebRTCの勉強をしていた時につまずいた部分で、今年研究室に入ってきた後輩も困っていたので、改めてエラーの原因を調べました。

## 発生した現象
### エラーが発生した部分
ハンズオン資料の**STEP4 シグナリングサーバを使ってWebRTCをつなげよう**の部分で、送信用のクライアント端末からシグナリングサーバーにSDPを送信します。その後、シグナリングサーバーはSDPを受信用のクライアント端末に転送します。この転送されたSDPを受信用のクライアント端末が解析する際にエラーが発生します。

### 現象
受信用のクライアント端末で文字列をJSONとして解析する部分で、**Uncaught SyntaxError: Unexpected token 'o', "[object Blob]" is not valid json**というエラーが発生する。

このエラーは「**[object Blob]** という文字列が有効なJSON形式の文字列でない。」という意味です。**[object Blob]** というのはバイナリデータのBlobオブジェクトが文字列型にキャストされたデータを指します。

```javascript
String(new Blob([0]))
//'[object Blob]'
```
要するに、JSON形式のテキストデータが届くはずのところにバイナリデータが届いてしまっているために発生するエラーです。
### 状況
WebSocketの通信をwiresharkを使用してキャプチャしたところ
- 送信用のクライアント端末 -> シグナリングサーバーはテキストデータとして送信されている

![string.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799461/7906f384-cdb3-3738-0015-1fc065f3112e.png)

- シグナリングサーバー -> 受信用のクライアント端末はバイナリデータとして送信されている

![binary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799461/45dde36f-d8ae-621c-fbd3-9f96f70ecc2e.png)


## 対処方法
signaling.jsを下記のように書き換える。
```javascript:signaing.js
"use strict";

const WebSocketServer = require("ws").Server;
const port = 3001;
const wsServer = new WebSocketServer({ port: port });

wsServer.on("connection", function (ws) {
    console.log("-- websocket connected --");
    ws.on("message", function (message, isBinary) {
        wsServer.clients.forEach(function each(client) {
            if (isSame(ws, client)) {
                console.log("- skip sender -");
            } else {
                client.send(message, { binary: isBinary });
            }
        });
    });
});

function isSame(ws1, ws2) {
    // -- compare object --
    return ws1 === ws2;
}

console.log("websocket server start. port=" + port);
```

## 原因
[node.jsのWebSocketモジュール](https://github.com/websockets/ws)の[仕様変更](https://github.com/websockets/ws/commit/e173423c180dc1e4e6ee8938d9e4376a7a8b9757)が原因で起こるエラーでした。

現在のWebSocket Serverは、データを受信する際、第一引数に受信したデータをバイナリデータとして、第二引数にバイナリデータであるかどうかのフラグをコールバック関数に渡します。

仕様変更前は、テキストメッセージを受信した際にWebSocket Serverが内部でUTF-8にデコードする動作を行っていたため、binary引数を指定する必要がありませんでした。現在はデコード処理が無駄とされており、binary引数を渡すことでデコードせずに文字列型のデータとして送信できるようになっています。

binary引数を省略すると、シグナリングサーバーはデータをバイナリデータとしてクライアントに送信してしまいます。その結果、受信用のクライアント端末は文字列型を想定していたところにBlobオブジェクトが届いてしまって、エラーが発生していました。
単純選択法(選択ソート)

## 単純選択法(選択ソート)とは

データを並べ替える整列アルゴリズムの一つ。
一番小さなデータを選択して、先頭から順に並べ替えていく。

### 対象データ

以下の配列を昇順に並べ替える

```php
$array = [12, 13, 11, 14, 10];
```



### フローチャート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733055/c88b3f08-a06d-6137-52ee-79a01f9a52c5.png)

#### 手順

①探索範囲の最小値を探す
②探索範囲の最小値を先頭要素と交換する
正規表現「?」の使い道

# はじめに
正規表現で``` . + * {...} (...)```をよく使うが、```?``` の使い道がわからず調べてみた。特に文字列の最短ヒットをさせるときに使と便利。


# 目次
+ [「X?」直前にXがあるorない。](#x直前にxがあるorない)
+ [「(?=XXXX)」後ろにXXXと続く](#xxxx後ろにxxxと続く)
+ [最短でヒットさせる。](#最短でヒットさせる )

## 「X?」直前にXがあるorない。
例えば「。」がついても、ついてなくてもヒットさせたい場合は下記の通り。
"！"で終わる場合"！"を含まないようにヒットする。

```python:example.py
str_data = 'あついですね'
hit_data = re.search(r'.*ですね。?',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 6), match='あついですね'>

str_data = 'あついですね。'
hit_data = re.search(r'.*ですね。?',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 7), match='あついですね。'>

str_data = 'あついですね！'
hit_data = re.search(r'.*ですね。?',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 6), match='あついですね'>

```
[戻る](#目次)

## 「(?=XXXX)」後ろにXXXと続く。
例えば後ろに"さん"か"様"がつくものをヒットさせる。

```python:example.py
str_data = 'たろう様'
hit_data = re.search(r'.+(?=(さん|様)$)',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 3), match='たろう'>

str_data = 'たろうさん'
hit_data = re.search(r'.+(?=(さん|様)$)',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 3), match='たろう'>

str_data = 'たろうくん'
hit_data = re.search(r'.+(?=(さん|様)$)',str_data)
print(f'# {hit_data}')
# None

str_data = 'たろう'
hit_data = re.search(r'.+(?=(さん|様)$)',str_data)
print(f'# {hit_data}')
# None
```
[戻る](#目次)

# 最短でヒットさせる。
同じ文字列が並んでいるときに最短でヒットさせたい場合に使う。
例は直後に```,```がある文字列を最短ヒットさせる。
```python:example.py
str_data = '012,345,678,'
hit_data = re.search(r'.*,',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 12), match='012,345,678,'>
# 最長でヒットする。

hit_data = re.search(r'.*?,',str_data)
print(f'# {hit_data}')
# <re.Match object; span=(0, 4), match='012,'>
# 最短でヒットする。
```
[戻る](#目次)

以上
DBコンテナ起動時に初期データを設定する

## 結論
PostgreSQLの公式イメージは、コンテナの初回起動時にサンプルデータを登録することができる。

初回起動時に`/docker-entrypoint-initdb.d`のディレクトリ内に配置された特定の拡張子のファイルが実行される。
このディレクトリに、サンプルデータ設定用のスクリプトを配置すると、コンテナ起動時に初期データが設定される。

## DBコンテナ起動時に初期データを設定する

`docker-compose.yml`の例を示す。

```yaml
services:
  db:
    image: arm64v8/postgres:16.1-alpine
    volumes:
      - ./db/init:/docker-entrypoint-initdb.d # 追加
    environment:
      POSTGRES_PASSWORD: secret
```

dbコンテナの`docker-entrypoint-initdb.d`にローカルのディレクトリをマウントしている。
`./db/init`内のファイルが`docker-entrypoint-initdb.d`に配置される。

このディレクトリにマウントされたファイルは、**コンテナの起動時に一度だけ実行される**。
実行されるファイルの拡張子は、`sh`, `sql`, `sql.gz`のみである。

:::note
複数のファイルをマウントした場合、辞書順で実行される。
また、直下のファイルのみが実行される。
:::

## 実例
今回の実際の対応内容を示しておく。

> 複数のファイルをマウントした場合、辞書順で実行される。

ファイル名を変えるのはあまり好きでなかったので、適切な順番通りにSQLを呼び出す`sh`を用意し、対象のディレクトリにマウントした。

```sh
#!/bin/bash

# シェルから任意の実行したい順でファイルを実行する。
psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" -f ../sql/create_table.sql
psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" -f ../sql/grant_user_access.sql
psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" -f ../sql/insert_record.sql
```

初期データについては、別のディレクトリにマウントした。

```yaml
services:
  db:
    image: arm64v8/postgres:16.1-alpine
    volumes:
      - ./db/init:/docker-entrypoint-initdb.d
      - ./db/sql/sample_data:/initdb # サンプルデータをコンテナのファイルシステムにマウントする。
    environment:
      POSTGRES_PASSWORD: secret
```

## 参考文献

- https://hub.docker.com/_/postgres
AWS Cost Explorerを使ってみた

# 背景
AWSを使って「どのサービスにどのくらいのコストを使っているのだろう」と思い調べていく中で、色んな分野に分けて消費コストを算出できたので、これを記事にしたいと感じた。

# AWS Cost Explorerとは
サイトには以下のように記載がされていました。
>AWS Cost Explorer は使いやすいインターフェイスを備えており、AWS のコストと使用状況を長期にわたって視覚化、理解、管理できます。すぐに使用を開始し、カスタムレポートを作成してコストと使用量のデータを分析できます。大まかにデータを分析したり (例: すべてのアカウントの合計コストと使用量)、コストと使用量のデータを詳細に分析して傾向、コスト要因、異常を特定したりできます。

AWS Cost Explorer
https://aws.amazon.com/jp/aws-cost-management/aws-cost-explorer/
私の解釈として以下の通りかなと感じました。

- 使用している各サービスのコストをグラフで可視化ができる
- サービスごとやリージョンごと等のフィルタリングができる

**その中でも、1つのサービスに対して細かくコストを分析できたことに感動しました。**

# 使ってみた
実際にコストを調べていて「EC2 その他」って何だろうと思ったり、なんかやたらと他に比べてコストがかかっているなと感じました。
疑問解決するべく諸々調べて「レポートパラメタ」を使って分析してみた
![スクリーンショット 2024-05-25 125050.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659733/d6930742-6d3a-1e88-2e63-56552b8b5dc4.png)


# 分析してみた

- まずは日付を設定して、「ディメンション」で使用タイプを選択
- 「フィルター」のサービスを「EC2-Other」を選択することでEC2-Otherの詳細が棒グラフで表示される
- NATGateway、EBS、データ転送に関する料金が出てきた
- NATGatewayでコストがかかっていることが判明
![使用type_ec2other.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659733/6d3eedec-15f3-f6c3-b834-0d3ee2421059.png)


# 感想
AWS Cost Explorerを使うことで、使用したサービスコストが詳細に分析できることを知れた。また、「ディメンション」という機能を使えば使用タイプだけでなく、リージョンごとや管理しているアカウントごとのコストも算出できるため、複雑な運用になった場合この機能は役に立つと感じた。
あと、NATGatewayはそこそこコストがかかる（使用する前のコスト算出は大事）。

# 参考文献
以下を参考にして学習しました。
ありがとうございます。
[AWS Cost Explorer](https://aws.amazon.com/jp/aws-cost-management/aws-cost-explorer/)
Python 開発に役立つ基本文法（１）

# こんにちは

### 地方国公立大学の修士2年生のPython初心者です
初めての記事なので読みづらいかもしれませんがご容赦ください^_^

今回は、Pythonの関数について学んだことを皆さんに共有します。

まず、関数を使うメリットを紹介します。
1.コードが分かりやすくなる!
2.コードの重複を減らすことができる‼

そして、関数には標準関数と独自関数の2種類があります。
標準関数は、Pythonをインストールしたときから利用できる関数です。また、独自関数とは、プログラマーが変数を作るのと同じように、自由に名前と処理を考えプログラマーが作る関数です。

最後に主な標準関数の紹介をします。いくつかまとめたので是非参考にしてください。
<table>
  <thead>
    <tr>
      <th>関数</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td> abs() </td> <td>絶対値を取得する</td>
  </tr>
  <tr>
    <td> min() </td> <td>最小値を取得する</td>
  </tr>
  <tr>
    <td> max() </td> <td>最大値を取得する</td>
  </tr>
  <tr>
    <td> sum() </td> <td>合計値を計算する</td>
  </tr>
  <tr>
    <td> print() </td> <td>文字や数字を表示する</td>
  </tr>
  <tr>
    <td> slice() </td> <td>rangeで指定されるインデックスの集合を表す</td>
  </tr>
  <tr>
    <td> id() </td> <td>オブジェクトの識別値を返す</td>
  </tr>
  <tr>
    <td> list() </td> <td>リスト型を返す</td>
  </tr>
</table>

ぜひ皆さんも一緒に開発頑張りましょう:point_up:
AWSアカウントを作った際に行うMFA(多要素認証)の有効化をやってみる

今回は、アカウントを作成後に行うことが推奨されているMFAの有効化を行います。

# 手順
1. マネジメントコンソールの検索でIAMを検索し、サービス欄に出てきたIAMをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/9c779660-ef97-d51e-bc7b-088fdfd62e92.png)

2. 初期設定だとセキュリティに関するレコメンデーションでrootユーザーのMFAを追加するというような内容がのっているため、MFAを追加のボタンをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/819f20ef-d7be-817c-e827-d2d0585f471a.png)

3. MFAデバイスはいろいろありますが、最もみなさんが使いやすいであろうスマホのAuthenticator appを用いて行う(他のデバイス持ってないだけですが)。デバイス名には適当な名前を入力して、次へボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/a2a0219a-fab2-0f3a-b677-2f413064f48e.png)

4. 今回は、Authenticator appの中でもGoogleのAuthenticatorアプリをインストールして使いたいと思います
参考サイト：
https://mobilelaby.com/blog-entry-5028.html

5. 手順2にQRコードを表示があるので、クリックしてQRコードを表示する。その後、スマホのGoogle AuthenticatorアプリのQRコードをスキャンを選択してQRコードを読み取ります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/e4281efb-eff0-b710-0039-af19cca3ae47.png)

6. QRコードを読み取るとAuthenticatorアプリに以下のようなワンタイムパスワードが出てくるようになります
![IMG_7539.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/ab8768a9-26f3-db52-c165-7adc9cae912a.jpeg)

7. 次に手順5の画像手順③にあるようにスマホ側で表示される先ほどの手順6のワンタイムパスワードを連続で入れる。すると以下のように、自分の認証情報の中に多要素認証（MFA）(1)というようにデバイスが登録されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/1aac7c03-3f1a-a78d-3e9a-d45dfd86a39d.png)

以上が手順となります。
いかがでしたでしょうか？
参考になれば幸いです。

参考サイト
https://qiita.com/yanyansk/items/3a989b70d2d3d49eff16
PHPでiPhoneユーザーとAndroidユーザーを自動判別するサンプルコード

PHPでiPhoneユーザーとAndroidユーザーを自動判別してリンク先を分けるシステムを作成することは可能です。以下にその実装方法を示します。

PHPコード
以下の例では、User-Agent ヘッダーを解析して、ユーザーがiPhoneまたはAndroidデバイスを使用しているかどうかを判別し、それに基づいてリダイレクトするコードを示します。

```PHP
<?php
function detectDevice($userAgent) {
    if (strpos($userAgent, 'iPhone') !== false) {
        return 'iPhone';
    } elseif (strpos($userAgent, 'Android') !== false) {
        return 'Android';
    } else {
        return 'Unknown';
    }
}

$userAgent = $_SERVER['HTTP_USER_AGENT'];
$deviceType = detectDevice($userAgent);

if ($deviceType == 'iPhone') {
    header('Location: https://example.com/ios');
    exit();
} elseif ($deviceType == 'Android') {
    header('Location: https://example.com/android');
    exit();
} else {
    header('Location: https://example.com/unknown');
    exit();
}
?>
```
## 説明
User-Agentの取得: $_SERVER['HTTP_USER_AGENT'] を使ってユーザーの User-Agent ヘッダーを取得します。
デバイスの判別: detectDevice 関数で User-Agent を解析し、ユーザーがiPhone、Android、または不明なデバイスを使用しているかを判別します。
リダイレクト: デバイスの種類に応じて適切なURLにリダイレクトします。iPhoneユーザーは https://example.com/ios に、Androidユーザーは https://example.com/android に、不明なデバイスの場合は https://example.com/unknown にリダイレクトします。
## 使用方法
上記のPHPコードをファイル（例：index.php）に保存し、ウェブサーバー上に配置します。このスクリプトにアクセスすると、ユーザーのデバイスに応じて適切なページにリダイレクトされます。
AWSのデフォルトリージョンの変更方法

こんにちは翔太です。
今回はちょっとしょうもない記事になりますが、
マネジメントコンソールログイン時のデフォルトのリージョン設定を行いたいと思います

# 手順
1. マネジメントコンソール右上の歯車マークをクリックします
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/bc428d70-81b2-3323-90fb-4fefe140cd07.png)
 
2. その他ユーザー設定をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/e7b0cce6-1f05-338c-2015-824b5b2c9f2c.png)

3. 統一された設定からローカリゼーションとデフォルトのリージョンの編集ボタンをクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/1055743e-f17a-3af9-8dde-f3a5f25e8881.png)

4. デフォルトのリージョンを自由に変更してください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2005551/ded81ed8-c4df-830e-be3e-2cb8fbdf32c1.png)

5. 設定を保存のボタンをクリックすれば設定完了です。これでデフォルトのリージョンを設定することができました。
1_電子工作ならここからでしょ！Lチカやってみるぞ！_flipper's circuit Project -電子工作人口を増やすためのプロジェクト-

まず最初に、LED点滅（通称Lチカ）させてみましょう。
電子工作での「Hello world!!」的なものです。

# 用意するもの

|No| パーツ | 個数 |
|:-:|-|-:|
|1| ブレッドボード |1|
|2| LED |1|
|3| 抵抗220Ω |1|
|4| ジャンパ線|2|
|5| Arduino（マイコン） |1|

# 手順
1　回路を組む
2　プログラム作成
3　プログラムのコンパイル・マイコンへの書き込み
4　動作確認

# 予備知識
### 1 ブレッドボードについて

最初にブレッドボードについて解説します。
ブレッドボードははんだ付けなしで配線するための道具です。
番号が振ってある列がショートしています。
※ショートって何？て方はこちらのサイトを→　https://march-blog.com/short
要は番号の列は一本につながっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/41a0b413-a3fa-94ca-cbe2-7550cd907ee3.png)

端っこの+と-は、それぞれVcc(+)とGND（-）に使用します。
赤い線、黒い線のついている穴が一列ずつショートしています。

### 2 LEDについて
LEDは流れる電流が一定なので、+側に抵抗をおいて電位差を作ることで光ります。抵抗がないとLEDの両端の電位差0で光りません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/ba6d74e1-f90c-255b-1779-768a4dc1434f.png)

### LEDにはアノードとカソードがあります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/111246a2-522f-daea-51b9-309cf3e97e5d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/3e572adc-890e-28aa-3c46-ec1bc7b28005.png)

向きを間違えると光らないので注意してください。
（カソード側がGND（-）に流れるようにしてください）

# 回路を組む

今回組む回路は次の通り。
LEDのアノードをArduinoのDIGITALの3ピンに接続。
カソードと抵抗接続、抵抗とArduinoのGND接続。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/5ca6151c-23c2-e98c-f1bd-f6cfe8a56ff0.png)

これをブレッドボードで組むと以下のようになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/e644656a-5ae0-5afd-f1b3-451a1f50ff2e.png)

各ピンについては後日解説します。

# プログラム作成

書き込むプログラムは以下通りです。
設定は「void setup」に、動作させる内容は「void loop」に書き込みます。

```
void setup() {
  pinMode(3, OUTPUT);
}

void loop() {
  digitalWrite(3, HIGH);
  delay(1000);
  digitalWrite(3, LOW);
  delay(1000);
}
```
> pinmode(3, OUTPUT)で、ボードの3pinを出力用に設定。
実行内容にてdigitalWrite(3, HIGH);で3ピンに出力高
delay(1000);にて1秒待ち（delay(1000)で1秒）
digitalWrite(3, LOW);で3ピンに出力低
という内容になります。

#### 注意点

①ボードの設定忘れないでください
ボードの設定が正しくされていないと書き込みエラーになります。使用するマイコンのボードを正しく設定してください。
ボードの設定は「Tools > Board > ...」にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/54639717-766c-d335-9600-4e149f96817f.png)

②ポートの設定忘れないでください
試用するUSBのポートも設定しないと書き込み時エラーになります。
ポートの設定は「Tools > Port > ...」にあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/7f5bdabb-ba65-88f9-357d-4b51ecfaf158.png)

# プログラムのコンパイル・マイコンへの書き込み

プログラムが書けたら、USBでPCとマイコンをつなぎ、Uploadを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/b9299e48-92cd-48ed-15bf-14e8678a3182.png)

# 動作確認

ここまででエラーしなければ動作します。

[実際のLチカはtwitter(X)のポストで](https://x.com/pupurucom/status/1792515556094169160)

ここまでがLチカの手順となります！

[最初のページに戻る](https://qiita.com/comchiki66/items/615c0c8cb87cd0c5c575)
カスタマイズしたGoogle Form で回答が収集できなかったとき

Google Form で作成したフォーム情報をもとに独自のHTMLとCSSでフォームを作成するという方法がある。

参考：
https://note.com/taatn0te/n/n20e9e04ce759

https://qiita.com/sotatakahashi/items/fa077cbf820faca30598

https://zenn.dev/yurukei20/articles/9741118bfb5ee0



サンキューページに回答者向けのファイルを用意したく、この方法でフォームを作成したら引っかかったので、覚書。

# サンキューページに遷移しても回答が記録されていない

送信ボタン押下後、Google Form の送信完了ページではなくカスタマイズしたサンキューページに遷移するようにした。
見た目上、遷移はうまく行っているのに、Form のレスポンス一覧を見ると回答が収集されていない。

## サンキューページへのリンクを外してみる

デフォルトのGoogle Form 送信完了ページに遷移するように設定を戻してみる。

送信ボタン押下後、「前に保存された回答がありますよ」みたいなメッセージが出ている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532781/31712485-9da9-efb1-6d99-c7f449ae8995.png)


> Saved progress
It looks as though there's a more recent draft of your response. Update to your latest draft to pick up where you left off.

## 回答のオートセーブ機能をオフにする

つまり、Google Form を作成する過程でテスト送信などしていた影響で、自分のGoogle アカウントと紐づいた回答の下書きが保存されていて、新しい回答を阻害していた。

Google Form の設定でオートセーブ機能をオフにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532781/0828b8b0-9eb9-d81b-46f6-c8948f803e6a.png)

## 再度、送信後の遷移先をカスタムサンキューページに設定して動作確認

その後は正しく回答がForm に保存されていた。


---
元のGoogle Form にアクセスする方法が無ければ回答がオートセーブされることもないので、利用者の回答がここに引っかかることは無いと思うが、作成時に思いのほか時間を取られたので、念のため。
【やってみた】FLEXBOX FROGGY

# サマリ
flexboxをゲーム感覚で学べる、FLEXBOX FROGGYをやってみました。

# 背景
地道にHTML、CSSを勉強しているのですが、
やっぱり勉強ってモチベーションが大事と感じる今日この頃…
そんなある日FLEXBOX FROGGYのサイトが目について、楽しそう＋ハードル低そうということでやってみました。

# ゴール
FLEXBOX FROGGYを一通りやってみる。

# 対象読者
- FLEXBOX FROGGYが気になっている方
- flexboxを学習したい方

# 前提
必須：インターネット環境・ブラウザ
推奨：CSSについての基礎知識
# 環境
- OS：Window10 Home
- ブラウザ：Google Chrome
# 手順
そもそもflexboxは

https://www.sejuku.net/blog/56401#google_vignette


> Flexboxは、CSS3で追加された新機能です。
> 正式名称はFlexible Box Layout Moduleといいます。
> 
> 今までよりも自由に、そして簡単に横並びのレイアウトを作ることができます。

（上記URLより引用）

詳細は上記のURLを参照ください。（雑

それではさっそくやってみます。
以下のURLに接続します。

https://flexboxfroggy.com/#ja

このような画面が開きます。
ログインは特に不要です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/0fdda1a0-1d61-bb4a-5982-816574e0b6ae.png)

もうすでに最初のレベル１になっていますね。
試しに'justify-content: flex-end;'を打ち込むとこの通り、
カエルが右側に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/46e15835-9d3d-7227-47f0-36a2650dea32.png)

レベルによっては下線が引いてある文字をクリックすると解説も表示されます。
（ちなみに各値を選択すると、自動でエディタ（画面グレー部分）に反映されます。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/a824d8bd-c474-7349-7afe-6ee2e94fed88.png)

このような感じでどんどん進めていきます。
全24レベルあり、全部クリアすると以下のような画面になります。
最後難しかったです。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335813/15dd492c-6e83-fec9-08f8-af7bacd48e80.png)


# 結果
FLEXBOX FROGGYを一通り実施しました。

# まとめ
こういうゲーム感覚のコンテンツは学習ハードルが下がるのでとてもいいですよね！
自分の場合はCSSの基礎をもっと固めたほうがいいのはありますが、
やらないよりやる方がましと言い聞かせて（おい）
今後も引き続き勉強・実践していきたいと思います。

余談ですが、下記のサイトでもflexboxを学習できます。

https://codingfantasy.com/games/flexboxadventure
[rails ＆ cloudinary]carrierwaveで詰まるのでActive Storage で画像投稿を実装する

# 経緯
railsにてcloudinaryとcarrierwaveを用いて画像投稿を実装していたのですが、どうやら最近carrierwaveが上手く動いていないようでローカルにそのまま画像が保存されたり、`Errno::EACCES in HogesController#create Permission denied @ apply2files -`の様なエラーが出てるようで。。。。

Active Storageを利用すれば無事投稿が出来たので備忘録として残しておきます。

# 本記事の想定
- cloudinaryのアカウント登録が完了している
- 投稿機能が実装済み
- 環境変数は`gem 'dotenv-rails'`で管理

※rails6.1.7 ruby3.0.4を使用しています。
(rails7.1.3 ruby3.3でも動作確認済み)

https://cloudinary.com/

# 実装
Active Storageの詳しい仕様ついては公式ドキュメントで確認して下さい。

https://railsguides.jp/active_storage_overview.html

## Active Storageの導入

```powershell:ターミナルまたはコマンドプロンプト
$ rails active_storage:install
$ rails db:migrate
```
実際にアップロードしたファイルが保存されるテーブル`active_storage_blobs`や、`active_storage_attachments`という中間テーブルが作成されます。

## config/storage.ymlの編集

config/storage.ymlファイルにCloudinary用の設定を追加します。

```yml:config/storage.yml
cloudinary:
  service: Cloudinary
  cloud_name: <%= ENV['CLOUD_NAME'] %>
  api_key: <%= ENV['CLOUDINARY_API_KEY'] %>
  api_secret: <%= ENV['CLOUDINARY_API_SECRET'] %>
```
環境変数名は`.env`に書かれている内容を合わせてください。

インデントは編集しないようにしてください、

## development.rb production.rbの編集
開発環境での画像保存を設定する場合development.rb、本番環境の場合はproduction.rbを編集してください。

変更前
```ruby:config/environments/development.rb
  config.active_storage.service = :local
```

変更後
```ruby:config/environments/development.rb
  config.active_storage.service = :cloudinary
```

production.rbも同様に編集してください。

## Gemのインストール

```ruby:Gemfile
gem 'activestorage-cloudinary-service'
```

`gem 'cloudinary'`をまだ入れてない人は`gem 'cloudinary'`も入れてください！

```powershell:ターミナルまたはコマンドプロンプト
bundle install
```
## モデルの編集
画像を保存するカラムを用意します。<font color="Red">**テーブルに新しくカラムを追加する必要はなく**</font>、投稿機能を実装しているモデル(本記事ではTweetモデル)に画像を保存する用のカラム（本記事ではphoto）を記述するだけで大丈夫です。

:::note info
<font color="Red">**既にテーブルに作成しているカラム名とは違う名前を記述してください。**</font>
例えば、「imageカラムを既に作ってるのでそれを使おう！」みたいな事が出来ないという事です。
:::

```ruby:tweet.rb
class Tweet < ApplicationRecord
  has_one_attached :photo #追記
end
```

わざわざテーブルにカラムを追加する必要がないのは便利ですね。 

## view,controllerの編集

コントローラ(本記事の場合はtweets)にてストロングパラメータにphotoカラムを追加

```rb:コントローラ
  private

  def tweet_params
    params.require(:tweet).permit(:title, :body, :photo) #photoを追加
  end
```

投稿と表示のviewファイルを編集
```erb:new.html.erb
<%= form_for @tweet do |f| %>
<div class="field">
    <%= f.label :photo %> #追記
    <p><%= f.file_field :photo %></p> #追記
</div>
<%= f.submit "投稿する" %>
<% end %>
```

```erb:index.html.erb
<% @tweets.each do |t| %>
    #追記ここから
    <% if t.photo.attached? %>
        <%= image_tag t.photo, size: '250x200'%>
    <% end %>
    #追記ここまで
<% end %>
```


# あとがき

実装は以上ですお疲れ様でした。

本記事では一つの画像を投稿する方法のみを扱いましたが、複数画像を投稿する方法もあるので是非トライしてみてください。

以下、お世話になった記事です。ありがとうございました。

https://railsguides.jp/active_storage_overview.html

https://pikawaka.com/rails/active_storage

https://qiita.com/mt-blue-sou/items/cc6d26372fd100c8f167
vimの基本操作について 

vimについて

vimの使い方についてこの記事にまとめていきたいと思います。
目次
1.基本のコマンド操作→h,j,k,l
2.vimのモード
3.その他覚えておくと便利なコマンド



1.基本のコマンド操作→h,j,k,l
vimで移動したい時は矢印キーでも移動できますが移動は下記のようにカーソルを移動することができます。

h:カーソルを左にずらす
j:カーソルを下にずらす
k:カーソルを上にずらす
l:カーソルを右にずらす

2.vimのモード
vimには３つのモードがあります。コマンド入力モード・文字入力モード・選択モードと
3つのモードに分かれています。それぞれのモードの特徴は下記の通りです。

I.NormalMode
II.InsertMode
III.VisualMode

I.NormalMode
NormalModeはコマンド入力モードのことを指しており、このモードではカーソル移動、他
のモードへの移行、テキストのコピー、デリート、ペーストが行えます。このモードの起
動の仕方はEscのボタンを押せばOKです。

II.InsertMode
InsertModeは文字入力モードのことを指しており、このモードではテキストの入力や編集
が行えます。このモードの起動の仕方はa/i/A/I/ciw/のうちどれかのボタンを押せばOKで
す。

III.VisualMode
VisualModeは文字選択モードのことを指しており、テキスト範囲の選択が行えます。この
モードの起動の仕方はvのボタンを押せばOKです。

3.その他覚えておくと便利なコマンド

a カーソルの場所から一文字進めてInsertModeに入る
x カーソル直下の文字を削除
:w ファイルの保存
:q 実行中のタブを閉じる
:wq ファイルの保存を行いタブを閉じる
:w! ¡をつけると強制的に処理します
dd カーソルがある一行を削除
yy 一列コピー
p ペースト
u 前の操作に戻る
J カーソルがある行に一つ下の行を連結する
gg ページの一番上に行く
G ページの一番下に行く
H ページの一番上にいく
M 表示されている画面の真ん中に行く
L 表示されている画面の一番下に行く
競プロ　出力方法まとめ【Python】

## はじめに
競技プログラミングやプログラミングの練習問題で一番初めにつまづいたのが入出力の方法だったので、今回は出力方法についてまとめました。
入力を受け取る方法についての記事は[こちら](https://qiita.com/cbet/items/c29d4891131699ecf7d7)
## 基本の関数
### print()関数
 **print()** は文字列、数値、bool値、リストなどのオブジェクトを引数として、それを出力する関数である。
```Python:
a = [1, 2, 3]
print('one')
print(1)
print(True)
print(a)

# one
# 1
# True
# [1, 2, 3]
```
[公式ドキュメント print()](https://docs.python.org/ja/3/library/functions.html#print)より、 *print(objects, sep = ' ', end = '\n', file = None, flush = False)*
すなわちデフォルトで区切り文字は半角スペース、最後に改行文字が指定されているので、何も指定しない状態でも勝手に空白区切り・改行される。

## 任意の文字で区切って出力
引数 sep を変更して出力する。
```Python:
a = 'one'
b = 'two'
c = 'three'
print(a, b, c, sep = ' ! ')

# one ! two ! three
```
 sep に改行文字を指定すると、オブジェクトごとに改行して出力することができる。
```Python:
a = 'one'
b = 'two'
c = 'three'
print(a, b, c, sep = '\n')

# one
# two
# three
```

## リストを任意の文字で区切って出力
*（リスト名）として print() の引数にすると、リストが展開されて要素が空白区切りで出力される。sep  で区切り文字を任意の文字に変更できる。
```Python:
a = [1, 2, 3]
b = [4, 5, 6]
print(*a)
print(*b, sep = '\n')

# 1 2 3
# 4
# 5
# 6
```

## 複数の print() の出力
デフォルトでは end = '\n' なので print() の末尾は改行される。end に任意の文字を指定することで、改行されずに次の出力を続けることができる。
```Python:
a = 'one'
b = 'two'
c = 'three'
print(a, end = ' ! ')
print(b, end = ' ? ')
print(c)

# one ! two ? three
```

## 空行の出力
デフォルトで end = '\n' が指定されているので、 **print()** のみで空行が出力できる。
```Python:
print()

#
```

## 数値と文字列を合わせて出力
型が違うと出力できないので、数値を **str()** を用いて文字列にする。
```Python:
a = 'one'
b = 1
print(a + ' is ' + str(b))

# one is 1
```

## 文字列の中に変数を埋め込んで出力
f 文字列（フォーマット文字列）にすると、型を変えずに、変数を埋め込むことができる。
```Python:
a = 'one'
b = 1
print(f'{a} is {b}')

# one is 1
```
VSCode:Go To File(Ctrl+P)で.gitignore内のファイルも検索対象にする

# 症状
VSCodeにある、ファイルを検索して飛べる機能Go To File(WindowsならCtrl+P)で一部ファイルが出てこないときがあった。`.gitignore`の対象となっているファイルはデフォルトではGo To Fileの検索から外れるらしい。

# 対処法 
設定を開いてSearch: Use Ignore Filesをオフにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1092391/1e1b9e0d-7893-c512-bc46-04ae717d460f.png)

# 参考リンク
https://github.com/microsoft/vscode/issues/83817
terraformでgoogle_compute_managed_ssl_certificateのdomainを変更しようとすると resourceInUseByAnotherResource errorが出る

# 問題

以下のように設定しているssl certificateのドメインを変更しようとすると

```hcl
resource "google_compute_managed_ssl_certificate" "lb_certs" {
  provider = google-beta

  name = replace(each.value, ".", "-")
  lifecycle { create_before_destroy = true } 
  for_each = local.workspace["certificates"]

  managed {
    domains = ["${each.value}."]
  }
}

resource "google_compute_target_https_proxy" "base_https_proxy" {
  name               = "base-https"
  url_map           = google_compute_url_map.base.self_link
  ssl_certificates = values(google_compute_managed_ssl_certificate.lb_certs).*.self_link
  ssl_policy         = google_compute_ssl_policy.ssl-policy-restricted.self_link
  depends_on     = [google_compute_managed_ssl_certificate.lb_certs]
}
```

すでにhttp proxyなどで参照されている場合、以下の`resourceInUseByAnotherResource`が出てapplyに失敗する


```
Error: Error when reading or editing ManagedSslCertificate: googleapi: Error 400: The ssl_certificate resource 'projects/xxxx/global/sslCertificates/xxxxxx' is already being used by 'projects/xxxx/global/targetHttpsProxies/xxxx', resourceInUseByAnotherResource
```

## 原因

terraform applyで force replacement (xxxx must be replaced)の場合は先に削除が行われてから、新しいリソースが作成されるので、`google_compute_target_https_proxy`のように 依存されている場合には失敗してしまう。

## 解決方法

https://github.com/hashicorp/terraform-provider-google/issues/5356

こちらに乗っているものを使うと解決する。

### 1 `create_before_destroy = true`を設定する

```
  lifecycle {
    create_before_destroy = true
  }
```

これにより、削除よりも前に作成を実行するように順番を変更できる

:::note warn
ただしこれだけだと、nameが被って`Error: Error creating ManagedSslCertificate: googleapi: Error 409: The resource 'projects/xxxxx/global/sslCertificates/xxxx' already exists, alreadyExists` のようなalreadyExistsのエラーになる
:::

そのためdomainsに対応して変わる名前を作るようにする

### 2. domainsのリストに対応するnameのrandom idを生成する

```hc
locals {
  managed_domains = list("test.example.com")
}

resource "random_id" "certificate" {
  byte_length = 4
  prefix      = "issue6147-cert-"

  keepers = {
    domains = join(",", local.managed_domains)
  }
}

resource "google_compute_managed_ssl_certificate" "cert" {
  provider = google-beta
  name     = random_id.certificate.hex

  lifecycle {
    create_before_destroy = true
  }

  managed {
    domains = local.managed_domains
  }
}
```

これでdomainsが変更されたときだけrandom_idが変わるので、名前を変えてリソースを再作成することによりもともと出ていたエラーを回避することができる

## 最後に

すでに公式ドキュメントにこの例が載せられていた :smile: 

https://registry.terraform.io/providers/hashicorp/google/latest/docs/resources/compute_managed_ssl_certificate#example-usage---managed-ssl-certificate-recreation


# ref

- https://github.com/hashicorp/terraform-provider-google/issues/5356
Windowsの新機能「高度な貼り付け」でAIを有効にする方法

本記事は[lifehack](https://lifehacker.com/tech/how-to-use-windows-ai-copy-paste-advanced)により翻訳されたものです。
![QQ20240525155350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298092/9fe46d90-1ce0-f49c-0d26-bfb5f25a81bd.png)

クリップボードは、タブレットからスマートフォン、さらにはWindows PCやMacまで、最近のほとんどのスマートテックに搭載されている本当に便利な機能です。クリップボードを使えば、複数のオブジェクトを保存して貼り付けることができますが、書式を正しく設定できるとは限りません。そこで、マイクロソフトの新しいAIを搭載したシステムが活躍します。このシステムは、あなたのために書式を調整し、貼り付けた内容を変更することもできます。

この新機能は「Advanced Paste」と呼ばれ、カスタマイズしやすいPowerToysアプリの一部としてのみ利用でき、メニューはWindowsキー＋Shiftキー＋Vで呼び出すことができます。主な機能はAIを利用した書式設定ヘルプですが、その他にもAIを利用してコピーしたテキストを要約したり、翻訳したり、コードを生成したり、あるいはスタイルを変えたり変換したりすることもできます。例えば、この段落をコピー＆ペーストして、Advanced Pasteにシェークスピア風の声に書き換えてもらうことができます。最初からCopilotやChatGPTに入る必要もうありません。

AIなしでAdvanced Pasteを使う方法もあります。コピーしたテキストを書き換えることはできませんが、ドロップダウンメニューからプレーンテキスト、JSON、Markdownのいずれかを選択するだけで、自分でテキストをフォーマットすることができます。

Advanced Pasteを試してみたい場合は、まずいくつかのステップを踏む必要があります。AI機能については、お財布を開く必要があります。ここでは、Advanced Pasteを始めるために必要なことをすべて説明します。

## WindowsでAdvanced Pasteを試すには
まずは、Microsoft PowerToysをダウンロードしてインストールしてください。GitHubの公式ページ、PowerToysのMicrosoft Learnページ、またはMicrosoft Storeのアプリページなど、いくつかの方法があります。少なくともバージョン0.8.0.1をインストールしてください。また、PowerToysは他にも多くの高度な機能を備えています。

PowerToysをインストールしたら、Advanced Pasteを有効にしてください。オプションの最初のページに表示されているはずですが、表示されていない場合は検索バーで見つけることができるはずです。有効化したら、Windowsキー＋Shiftキー＋Vキーを押してメニューを表示させれば、すぐにAdvanced Pasteを使い始めることができます。しかし、本当にシステムのAI搭載機能をフルに活用したいのであれば、まずお金を払って有効にする必要があります。

## Advanced PasteでAI機能を有効にする方法
Advanced PasteのAI機能を実際に利用するには、OpenAIトークンを購入し、APIキーを設定する必要があります。

まずは、OpenAI API Keysのページに移動し、アカウントにサインインしてください。ChatGPT Plusを持っていても、GPTトークンは手に入らないことを覚えておいてください。代わりに、OpenAIから直接購入する必要があります。

OpenAIのアカウントにサインインした後、Create New Secret Keyオプションをクリックし、「Windows Advanced Paste 」のような名前を付けます。これで、どのAPIキーがあなたのトークンを使っているのかを追跡することができます。

キーを作成したら、それをコピーしてPowerToysに戻ります。Advanced Pasteを探し、Enable Paste with AIの横にあるEnableボタンをクリックします。APIキーを貼り付け、保存をクリックします。

これで、AI機能を有効にしたAdvanced Pasteを使い始める準備が整いました。

以上、Windowsの新機能「高度な貼り付け」でAIを有効にする方法について紹介しました。最新のAIトレンドに関心を持つ方に、ぼやけた[画像を鮮明にする](https://vanceai.com/ja/sharpen-ai/)ピンボケ補正サイトーーVanceAI画像鮮明化、低解像度の写真をピクセルレベルで修復し、ロスなく8倍のサイズまで拡大することのできるVanceAI[画像拡大](https://vanceai.com/ja/image-enlarger/)を試すのをおすすめします。
WP Offlaod Media Lite S3で画像アップロードが出来なかった...。

# WP Offlaod Media Lite S3で画像アップロードが出来なかった...。 ~php-gd~

AWS初心者向けのハンズオン形式の講座で、WordPress上の画像をS3に保存する処理がありましたが、どういうわけだかS3にアップロードできませんでした。

「AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得」
~~蛇足：AWSのコンソールやWP Offload Mediaの設定画面がハンズオン動画と異なるので苦労します...。~~
https://www.udemy.com/share/101Yby3@7BjNdcYUfFZEZkJbOQ2PFRKD2znhh2E07weMeqSegaewGTSl6u29J1MBsfp7HyIBPw==/


以下の投稿を参考に見直したところ、<strong>php関連パッケージのインストールで不足分</strong>が判明しました...。

https://qiita.com/kyusyu_syoyu/items/a1c183e4afb59788a67a

## php-gd
結論、私は`php-gd`というものが不足していたようです。

インストールコマンド
`sudo yum install -y php-gd`

`php-gd`はGDライブラリの拡張モジュールで、GDライブラリが画像の生成および操作を可能にするためのものです。
以下の公式ドキュメントを読んでGDライブラリが何位をしているのかを私なりにまとめると
<dd>1\.画像の作成と出力、サイズ変更、切り抜き</dd>
<dd>2\.テキスト描画、図形の描画</dd>
<dd>3\.画像のフィルタリング</dd>
こんな感じだと思います。

https://www.php.net/manual/ja/book.image.php

正直公式ドキュメントを読んでも、GDライブラリのインストールがS3へのアクセス成功につながる理由がわからないので、ChatGPTに聞いてみました。
>WP Offload Media Liteの動作
>WP Offload Media Liteは、以下のような処理を行う際にGDライブラリを利用する可能性があります
><dl>
><dt>1.画像の最適化</dt>
><dd>画像の最適化やリサイズを行う際にGDライブラリを利用します。</dd>
><dt>2.画像のサムネイル生成</dt>
><dd>画像のサムネイルを生成する際にGDライブラリを使用します。</dd>
><dt>3.画像のフォーマット変更</dt>
><dd>アップロードされた画像を異なるフォーマットに変換する場合、GDライブラリが必要です。</dd>
></dl>
上記3つが正常に動作したため、php-gdをインストールしたら、S3に画像を格納することに成功しましたようです。


## 最後に

私は、貴重な休日を使ってこれを解決するのに1時間半を要してしまいました。
今回、S3の確認やIAMの権限確認、WP Offload Mediaの設定確認に時間を費やしましたが、まさかのライブラリのインストール不足だとは思いませんでした...。

###### 教訓：インストールしたものの確認を丁寧に行う
以上
Amazon Cognito

# はじめに

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

# Amazon Cognitoとは

顧客がモバイルアプリケーションに認証できるようにするためのサービス。

Amazon Cognitoを利用することで、Google、Facebook、Amazon などのソーシャル ID プロバイダーや、SAML による Microsoft Active Directory などのエンタープライズ ID プロバイダーを通してサインインすることができます。

Amazon CognitoはCognito IdentityとCognito Syncで構成されています。

# Amazon Cognito ユーザープールオーサライザー

Amazon Cognitoの認証機能を利用していれば、Amazon Cognito ユーザープールオーサライザーを使用して、Amazon API Gateway の API にアクセスできるユーザーを制御することができます。


# アダプティブ認証

普段と違うIPアドレスからログインしようとした場合、多要素認証（MFA）を要求することができます。
大学時代の部活でITによる課題解決をした経験　その①

大学の部活やサークルというと、比較的暇な文系学生が主になって運営していることが多いんじゃないかと思います。
そのせいか、 **部内のDXが進んでいない！！** (当時からDXという言葉があったのかは謎)
当の自分も暇な文系学生であったわけですが、ITで色々便利にしようとするのが好きだったので、自力で解決できそうな課題は解決しようと乗り出しました。
その事例の1つ目です。

# 見つけた課題①
入っていたのは吹奏楽部でした。
演奏するためには楽譜が必要です。楽譜を使うには紙が楽です。
結果、部室の床に楽譜が散乱していることに…。(ちゃんと片付けましょう)

これはイカンということで、まずは散乱している楽譜を片付け始めました。
幸い連番は付けられていたので、順番通り棚に片付けて…。
1つ目は完了！

# 見つけた課題②(これがメインです)
さて、部室が少しきれいになりました。前にやった曲をもう一度やりたい時に、楽譜を探しやすくなりました。
でももっと探しやすくできるはずです。
**所持楽譜の一覧を作ることにしました**。
当時ITパスポートすら取得していない文系学生の身分で、それっぽいのでデータベースと名付けることにしました。

ITで色々便利にしようとするのが好きだった自分。当然一覧を作るだけでは物足りません。
**一緒にどんな情報があったらより便利になるだろう？**
考えました。

結果、以下のような項目があると良いと結論しました。

1. 管理番号
1. 曲名
1. 出版社
1. 作曲者
1. 編曲者
1. 最新公演
1. 備考
1. 音源URL

まず、曲が特定できる情報が必要です。それが1～5の項目。
同じ曲でも、出版社が違ったり編曲者が違ったり、色々なバージョンがあります。
それを特定するための情報です。

次に、選曲ルールに関係ある情報を入れました。
曲を選ぶ時のルールに、「同じ代の部員が同じ曲を2回演奏しない」というものがありました。
要するに、1回やると次の2年間(3年で引退でした)は同じ曲ができないわけです。
そこで、最後に演奏したのはいつの回なのかがわかる必要がありました。
それが6の項目です。

その他の付加的な情報や特記事項などを入れる項目として、7 備考を用意しました。

また、あったら曲を選ぶ時に楽かなと思い、8 音源URLも入れてみました。
これはあっても無くてもいい物ですね笑

# おわり
ここでゼミや就活が忙しくなって時間切れでした。
譜面を管理する人が管理しやすくするところまでで終わってしまいました。
できれば、部員全員にしっかり周知して、うまく活用するところまでやりたかったです。
Herokuでデプロイしようとしたら500エラー(Internal Server Error)が出た

# 500エラー出てしまった
[こちら](https://qiita.com/maooz4426/items/afe851f2f1d93ab8baeb)の記事でしようとしていた、Herokuでデプロイを行おうとしたら

![スクリーンショット 2024-05-24 23.37.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/b27090b6-d782-e778-71c5-0390e4f7b9cc.png)

と５００エラーが出てしまいました。

# 原因
デプロイはできていたので、デプロイした際の設定かなと思い調べてみたら環境変数を設定していなかったのが原因でした...
下の画像を設定したらうまくいきました。
![スクリーンショット 2024-05-24 23.49.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3766230/2bfdddbc-d673-8bcf-702b-81031cca11bc.png)
[Zellij] MacにZellijをインストール＆文字化けの対応

# MacにZellijをインストールする方法
筆者はMac初心者で、セットアップする際に少しつまづいたので共有します。
## Zellijとは
Zellij（ゼリージュ）とはRust製のターミナルマルチプレクサです。
 - GitHub: https://github.com/zellij-org/zellij
 - 公式サイト：https://zellij.dev/
## インストール
最も簡単な方法はHomebrewでインストールする方法です。
- https://github.com/zellij-org/zellij/blob/main/docs/THIRD_PARTY_INSTALL.md#macos
```
brew install zellij
```
Zellijのversionは0.40.1でした。
これで```zellij```コマンドで起動できたものの、問題が発生。
- 文字化けで "?" が大量発生
- Zellij上でAlt+<n>等のコマンドが効かない
## 文字化け対応
Documentを探すと、どうやらnerdfontsというフォントを入れる必要がありそうです。
- https://zellij.dev/documentation/compatibility

> This most likely is caused by a missing character in the font.
> Fonts from nerdfonts can fix this problem.

GitHub: https://github.com/ryanoasis/nerd-fonts?tab=readme-ov-file#option-2-homebrew-fonts

これもHomebrewを使ってインストールします。
```
brew install font-hack-nerd-font
```
この後、ターミナル→設定→プロファイル→テキストからフォントをhacknerdfontに設定しました。
参考：https://support.apple.com/ja-jp/guide/terminal/trmltxt/mac

## Altキーを使ったコマンドの対応
AltキーはMacではOptionキーに相当するので、Option + n 等のコマンドが通るはずでしたが通りませんでした。

標準のターミナルを使っている場合は、これを参考にUse Option as Meta Keyにチェックを入れましょう。
- https://superuser.com/questions/1038947/using-the-option-key-properly-on-mac-terminal

参考
- https://zellij.dev/documentation/faq#i-am-a-macos-user-how-can-i-use-the-alt-key
0_2_準備するもの_マイコンおよび電子部品編_flipper's circuit Project -電子工作人口を増やすためのプロジェクト-

PC以外に必要なもの、必要じゃないけどあったらいいもの書きます！

# 1. 【必須】マイコン

今回はArduino UNO R4 WIFIモデルを紹介します。
マイギアー★

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/74ee65d0-217f-4574-0d6d-e7bfab4ec6d1.png)

以下公式ページの紹介文

> Arduino UNO R4 WiFiは、ルネサスの32ビットマイクロコントローラRA4M1を中心に設計されており、Wi-Fi®およびBluetooth®接続用のESP32モジュールも備えています。独自の 12x8 LED マトリックスにより、ボード上で直接ビジュアルのプロトタイプを作成でき、Qwiic コネクタを使用すると、プラグ アンド プレイ スタイルでプロジェクトを作成できます。

Wifi接続用のマイコンにESP32というものがあるのですが、それがもう内臓されているタイプになります。
2024年5月現在での**価格は5000円弱**くらい。アマゾンでも購入可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/fead7b0f-886d-c627-ec76-119b81b83988.png)

流行りのラズパイのようにLinux OSを入れるようなことはできませんが、マイコンとしては性能十分です。
（電子工作で使用するマイコンのなかではなんでもできるフル装備タイプ）
実際、PCからプログラムをかき出す場合は、Type-CのUSBを使います。
Type-A　⇔　Type-c　のケーブルもご準備ください。

スペック詳細は公式サイトをご確認ください⇒　https://docs.arduino.cc/hardware/uno-r4-wifi/

# 2. 【必須】ブレッドボード

電子工作で配線は必ず必要になります。基板やはんだをつかわずに、手軽に配線できるためのツールが「ブレッドボード」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/4abc2fad-baca-902c-687d-196579627631.png)

たくさん組んでいくと足りなくなることが出てくると思いますが、最初はサンハヤトの「SAD-101」もしくは秋月電機の「EIC-3901」くらいでOKです。卓上でやるにもいいサイズでマイコンくらいの大きさです。
値段は1000円以下。
ブレッドボードの使い方については後日書きます。

# 3. ジャンパ・LED・抵抗その他
 
ジャンプワイアやLED・抵抗その他電子部品については、ぶっちゃけ入門キット買うことをお勧めします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/6ce835d2-d0f6-f605-cb2e-769bca1501c1.png)

バラで買っても問題ないのですが、いろいろやってるうちに揃っているもの手元にあったほうがすぐ使えて試せて便利でした。

### 準備するものはここまででOKです。

なお、いままで出したもので必要な金額を出すと(PC以外すべてAmazonで購入を仮定して)...

| No | 品名 | 金額 | 
| :-: | - | -: |
| 1 | Arduino UNO R4 Wifi | 4,343円 |
| 2 | Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル | 740円 |
| 3 | SAD -101 | 529円 |
| 4 | 電子部品スタータキット | 1,700円 |
| - | 合計 | 7,312円 |

こんな感じです。
もしこの金額でも高いようなら、Arduinoの互換品（Generic）を使用する手もあります。
※互換品はType-b接続になります
※WifiつかうならESP32マイコン（Genericで798円）が別途必要です

| No | 品名 | 金額 | 
| :-: | - | -: |
| 1 | Arduino 互換品マイコン | 1,100円 |
| 2 | Amazonベーシック USB2.0 ケーブル (USB-A to USB-B) | 447円 |
| 3 | SAD -101 | 529円 |
| 4 | 電子部品スタータキット | 1,700円 |
| - | 合計 | 3,776円 |

まずは準備にかかる金額もあわせて、ご検討ください。

準備するもの　おわり

[トップに戻る](https://qiita.com/comchiki66/items/615c0c8cb87cd0c5c575)
0_1_準備するもの_開発環境編_flipper's circuit Project -電子工作人口を増やすためのプロジェクト-

電子工作を進めるにあたり、まずは準備する開発環境について書きます。

# PC

Arduinoでプログラムしていくのに使用する統合開発環境が「Arduino IDE」です。
Arduinoだけでなく、ほかのマイコンの開発にも使用できます。
C言語／C++言語をベースにした「Arduino言語」で書いていきます。
インストールするのに、以下のとおり推奨環境があります。
要件を満たしているPCのご準備をお願いします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/e3378363-d368-82fc-8c1f-3139463b8477.png)

# Arduino IDEのインストール手順
調子にのってwingetでinstallかましたらバージョン古くてライブラリがない！をやらかしたので、いったん公式サイトから素直にインストールすること推奨します。（吾輩やらかしました）

### 1. 公式サイトのインストールページにアクセス

https://www.arduino.cc/en/software

### 2. OSにあったファイルをダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/6c558700-4cae-8e78-7215-5a6153aec658.png)

わたしはWindows11使用しているので、「Windows win 10 and newer, 64bit」を使用します。

### 3. Download Arduino IDE & support its progress ページで「JUST DOWNLOAD」をクリック。

※もしドネーションしたいなら止めません！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/276e23c1-76ff-2101-7f34-2a3f4ad90019.png)

### 4. Stay in the Loop: Join Our Newsletter!ページでも「JUST DOWNLOAD」をクリック。

※二度目ですが、ドネーションしたいなら止めません！！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/9f2f3c80-b527-9065-1434-d43580ceffc8.png)

### 5. Download開始。ダウンロードしたファイルを開きましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/0fa7cb4d-7148-dfdd-799e-16458bc5ae7c.png)

### 6. ダウンロードしたファイルを、案内に従ってインストールしましょう（4Stepくらいの簡単な操作です）

### 7. インストールできました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2308477/8a9d21cf-afa1-e27e-bcef-9f06d6610340.png)

ここでいきなりコード書きたくなりますが！その前にハード周りを解説します！

[0_2_準備するもの編へ](https://qiita.com/comchiki66/items/18d3a8bb8df7fa796979)
flipper's circuit Project -電子工作人口を増やすためのプロジェクト-

こんにちは！毎度勢いだけのイルカ、おつうです。
「電子工作なんか気になるけどハードル高くね？」て人たち向けに、「このポンコツでもできるんだから俺もできるわwwwww」と言わせたるわ！プロジェクトを立ち上げます。
（飽きて放置しないようなるべく頑張ります...）

# プロジェクトの目的

1 仲間と会話しながら工作する楽しさを伝え、電子工作愛好家人口を増やす
2 世にあるロボット教室に手が出ない子供にも機会をあたえる
3 現在世の中に出回っているいろいろな技術と掛け合わせて「こんなことができる！」経験の機会を増やす

> 人口増えるとそれだけアイデア広がりますからね★

# 記事化に向けてのマニュフェスト

1 低予算（なるべくかかるコストを明確にする）
2 初心者にもなるべく丁寧かつわかりやすくする（うざすぎない解説）
3 わからないことは誤魔化さない（知らんことはネットの情報でカバーしない）

> できてねえわあほー！て思ったらTwitter（X）にコメントください。

# 記事一覧-IoT関連・マイコン・半導体編
| No | タイトル | 記事の分類 |
| -- | ------- | ---------- |
| N_0 | [IoTとは？](https://qiita.com/comchiki66/items/f6a908e6e2984334cd11) | IoT入門 |
| N_1 | [Arduino_エッジ側デバイス](https://qiita.com/comchiki66/items/75762e15173e76700dd1) | 代表的マイコン |
| N_2 | [RaspberryPi_エッジ側デバイス](https://qiita.com/comchiki66/items/f421b7c673aa59822346) | 半導体入門 |
| N_3 | [半導体部品について](-) | 半導体入門 |

# 記事一覧-Node-RED編
| No | タイトル |
| -- | ------- |
| O_1_0 | [Node-REDとは](https://qiita.com/comchiki66/items/9aef70428746decc1e63) |
| O_1_1 | [Node-REDのインストール](https://qiita.com/comchiki66/items/4127c46c1703d9740964) |
| O_2_0 | [Node-REDの基本](https://qiita.com/comchiki66/items/6acbce7d3a7f3b899cd8) |
| O_2_1 | [Node-REDでフローをつくってみる](https://qiita.com/comchiki66/items/9a665fc928f7c630a698)|
| O_2_2 | [functionノードを使ってみる](https://qiita.com/comchiki66/items/e1d98e703310473e2d90)|

# 記事一覧-Arduino Uno R4 WIFI編
| No | タイトル | 主に使用するもの |
| -- | ------- | ---------- |
| 0_1 | [準備するもの_開発環境編](https://qiita.com/comchiki66/items/542523773dc8492d5f98) | - |
| 0_2 | [準備するもの_マイコンおよび電子部品編](https://qiita.com/comchiki66/items/18d3a8bb8df7fa796979) | - |
| 1 | [電子工作ならここからでしょ！Lチカやってみるぞ！](https://qiita.com/comchiki66/items/113ee8f93e6e86ed1963)| LED ・抵抗220Ω |
サロゲートペアについて【Java】

## はじめに

サロゲートペア（サロゲートペア文字、Surrogate Pair）は、Unicode文字を扱う際に重要な概念です。特に、多言語対応や絵文字の処理が必要な場合に知っておくべき知識です。

## Unicodeとサロゲートペアの基本

### Unicodeの基本

Unicodeは、世界中の文字や記号を一貫して表現するための標準です。各文字には一意のコードポイントが割り当てられており、通常は16ビット（2バイト）で表現されます。しかし、すべての文字を16ビットで表現するには限界があり、基本多言語面（BMP、Basic Multilingual Plane）に収まらない文字も存在します。

### サロゲートペアの必要性

BMPには、U+0000からU+FFFFまでの65,536個のコードポイントが含まれています。しかし、Unicodeにはそれを超えるコードポイントが必要です。そこで、U+10000からU+10FFFFまでのコードポイントを表現するために、サロゲートペアが導入されました。

サロゲートペアは、2つの16ビットのコードユニットを組み合わせて1つの文字を表現します。これにより、1,048,576個の追加コードポイント（約104万個）を表現できるようになります。

### サロゲートペアの構造

サロゲートペアは次の2つの部分から構成されます。

1. **上位サロゲート（High Surrogate）**: U+D800からU+DBFFまでの範囲
2. **下位サロゲート（Low Surrogate）**: U+DC00からU+DFFFまでの範囲

これらを組み合わせて、BMP外の文字（補助平面、Supplementary Planes）のコードポイントを表現します。

## Javaでのサロゲートペアの扱い方

### 基本的な文字操作

Javaでは、`char`型は16ビットのUTF-16コードユニットを表現します。そのため、BMP内の文字は1つの`char`で表現できますが、BMP外の文字はサロゲートペアを使用する必要があります。

### サロゲートペアの検出

サロゲートペアを検出するには、`Character`クラスのメソッドを使用します。

```java
public class SurrogatePairExample {
    public static void main(String[] args) {
        String str = "A𐍈B"; // '𐍈'はサロゲートペアを必要とする文字
        for (int i = 0; i < str.length(); i++) {
            char ch = str.charAt(i);
            if (Character.isHighSurrogate(ch)) {
                System.out.println("High Surrogate: " + ch);
            } else if (Character.isLowSurrogate(ch)) {
                System.out.println("Low Surrogate: " + ch);
            } else {
                System.out.println("Regular character: " + ch);
            }
        }
    }
}
```

### コードポイントの扱い

Javaでは、サロゲートペアを処理するためにコードポイントを使用することが推奨されます。`String`クラスと`Character`クラスには、コードポイントを扱うためのメソッドが多数用意されています。

```java
public class CodePointExample {
    public static void main(String[] args) {
        String str = "A𐍈B";
        
        // コードポイントの取得
        int codePoint = str.codePointAt(1);
        System.out.println("Code point: " + Integer.toHexString(codePoint));
        
        // コードポイント数
        int codePointCount = str.codePointCount(0, str.length());
        System.out.println("Code point count: " + codePointCount);
        
        // コードポイントの配列を取得
        int[] codePoints = str.codePoints().toArray();
        for (int cp : codePoints) {
            System.out.println("Code point: " + Integer.toHexString(cp));
        }
    }
}
```

### 文字列の操作

サロゲートペアを含む文字列の操作には注意が必要です。例えば、文字列の逆順操作を行う場合、サロゲートペアを適切に扱う必要があります。

```java
public class ReverseStringExample {
    public static void main(String[] args) {
        String str = "A𐍈B";
        String reversedStr = new StringBuilder(str).reverse().toString();
        System.out.println("Reversed string: " + reversedStr);
    }
}
```

上記のコードでは、`StringBuilder`の`reverse()`メソッドがサロゲートペアを適切に処理しますが、自前で逆順操作を実装する場合には注意が必要です。

## まとめ

サロゲートペアは、BMP外のUnicode文字を表現するための重要な仕組みです。Javaでは、サロゲートペアを適切に処理するために、`Character`クラスと`String`クラスのメソッドを活用することが推奨されます。
[再度のご案内] 公開されているサービス アカウント キーが自動的に無効になります

# サービスアカウントを無効にするよ

「秘密鍵漏れていたら無効にする」ということなので
漏れていたら自動的に無効にしてもらうのがベストである。

# サービスアカウントの作成まとめ

まず、漏れていないと思うが、googleの誤動作などで
いきなりサービス停止されても困る。

代替的に新しいアカウントを作成する方法をまとめる。

# 認証情報 > サービスアカウントを管理

![n1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/27e7b9b7-9557-63b5-7f8f-d262e6614ae8.png)

# サービスアカウントを作成

![n2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/410ed2a7-d1f0-21ca-92b8-5b713cf34ad6.png)

# サービスアカウントの作成

今回は、CloudStorageだけを使うので画像ように選択する。
ロールを選択したら画像にはないが「続行」のボタンをクリック。

3 の項目は省略する。

![n3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/8c28ba82-2633-88b2-1c94-0ec6100f6044.png)

# 作成したサービスアカウントの三をクリックし、鍵を管理をクリック

![n4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/1021366d-ea3d-07ee-2f57-a6dbdc54e157.png)


# 鍵を追加 > JSON > 作成 の順にクリック

自動的にchromeで鍵ファイルが .json がダウンロードされる。

![n6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31338/f81f10be-3014-f41d-1e9a-0ddf620e04cf.png)


万が一、鍵ファイルが漏れていてサービスが停止されたら
今までのサービスアカウントの鍵ファイルを削除して新しい鍵を作るだけでもよいのかもしれない。





# 余談

# APIキーはどうなの？
ほとんどの Google Cloud APIs は API キーをサポートしていません。この認証方法を使用する前に、使用する API が API キーをサポートしていることを確認してください。

はい、クソ。

以下、漏れていてもOKですよという設定にしようと思ったがエラーが出て弾かれた。



```
平素より Google のサービスをご利用いただきありがとうございます。以前お知らせいたしましたとおり、2024 年 6 月 16 日に、Google Cloud で組織のポリシーが変更されることになりましたので再度ご案内いたします。この変更により、組織管理者は、サービス アカウントの秘密鍵が一般公開されていることを Google Cloud が認識した場合に Google Cloud がどのように対応するかを指定できるようになります。Google Cloud は、GitHub スキャン プログラムなどのいくつかのプログラムと統合を進めることで、サービス アカウントの秘密鍵が一般公開されているか否かを特定しています。

ご注意いただきたい点
サービス アカウント キーは非公開にする必要があります。一般公開されると、お使いの Google Cloud 環境が侵害される恐れがあります。サービス アカウント キーが侵害されると、不正な行為者がデータにアクセスし、これを変更、削除したり、高額なリソースを消費したりする恐れがあります。Google Cloud は、こうした問題がお客様の組織に混乱を招く恐れがあると認識しており、お客様の環境を保護するための予防的な対策を講じています。

お客様の環境のセキュリティを強化するため、このたびの組織のポリシーの変更を 2024 年 6 月 16 日に実施いたします。この変更により、一般公開されているサービス アカウント キーのうち、Google が認識したものはすべて無効化されます。これは、公開されているサービス アカウント キーのすべての使用に影響します。

必要な対応
次のいずれかの操作を行うことで、事前に Google Cloud の対応を変更できます。

IAM.serviceAccountKeyExposureResponse 制約を DISABLE_KEY に設定して早期にオプトインすると、保護がすぐに有効になります。
IAM.serviceAccountKeyExposureResponse 制約を WAIT_FOR_ABUSE に設定してオプトアウトすると、いつでも保護を無効にできます。
何もしない場合は、Google がお客様に代わって 2024 年 6 月 16 日に保護を有効にします。
この変更にはある程度の計画が必要になるかもしれませんが、お客様の環境のセキュリティを強化することが目的であるため、これからも Google の最優先事項として取り組みを進めてまいります。

今後とも Google Cloud をお引き立ていただけますと幸いです。
```

https://blog.g-gen.co.jp/entry/constraints-iam-serviceAccountKeyExposureResponse

https://qiita.com/taro373/questions/b656aebb80f156e7f593