OmniAICreator/Qiita-1.07M huggingface dataset:
Chrome で PC に接続されたマイクなどの情報を手軽に確認する（ chrome://media-internals/ ）

以下の記事と似た方向の話で、以下の記事では「カメラ」となっている部分を「マイクなど」の音関連の内容に変えた話について書いていきます。

●Chrome で利用可能なカメラの解像度・フレームレートやデバイス名を手軽に確認する（＋余談）：「chrome://media-internals/」 - Qiita
　https://qiita.com/youtoy/items/bfc5325d118dad11e1d7

上記の記事は、「chrome://media-internals/」に関する話になっており、今回もその部分は同じです。

## 今回使ったデバイス
今回試している構成は、3.5mm のプラグのマイクを、3.5mm 4極ミニプラグ用アダプタを介して Mac につないでいます。具体的には、自宅にあった以下を利用しています。

●ヨドバシ.com - GeSpec ジースペック GS-MHA01-BK [モバイルヘッドセットアダプター]
https://www.yodobashi.com/product/100000001001629883/

## chrome://media-internals/ を使う
さっそく試していきます。

まずは Chrome のアドレスバーに「chrome://media-internals/」と入力し、これにアクセスしてみます。

### マイクなどの情報を確認する
そして、上部にタブが表示されているので、その中の「Audio」を選んでみましょう。

例えば、以下のような情報が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e2672963-6488-695a-ecf1-4bd0b37d422f.png)

#### マイクなどを利用するページを開く
この状態で、例えば [WebRTC samples](https://webrtc.github.io/samples/) のマイクなどが使われるサンプル、例えば以下などを別タブで開いてみましょう。

●Select audio and video sources
　https://webrtc.github.io/samples/src/content/devices/input-output/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/54ca408e-9c6d-cc92-64f7-d089a8021daa.png)

（他の [Audio stream volume](https://webrtc.github.io/samples/src/content/getusermedia/volume/) などでも良いです）

#### chrome://media-internals/ に戻って情報を見てみる
上記の状態になっていると、ブラウザでマイクなど音の入出力が使われている状態になります。

その状態で「chrome://media-internals/」のタブに戻ってみると、「Input Controllers」「Output Controllers」「Output Streams」の下の表示が変化しているのが分かります。

以下のように、青い色がついた部分が表示されるようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/38362306-1c54-6a81-b41e-8367397761d8.png)

#### 音の入出力に関する情報を表示させてみる
さらに、青色の部分をクリックすると、下部に情報が表示されます。

以下は、Input Controllers の下の部分をクリックした際の例です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/58d0fa6c-b2e1-5079-a4a8-1155262976c0.png)

さらに他の 2つ、「Output Controllers」「Output Streams」の下の青い部分をクリックした時の表示を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/820cafcd-d6ac-a209-3201-f6c9282f335c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d0390995-9f75-ae9d-9ccd-9e68b35826ba.png)

外部マイク・ヘッドフォンの情報を、Mac のシステム情報で確認すると以下になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1c66c843-a53c-d51f-65d9-e3d3859dcb94.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d346ba1-89d4-d2bc-0df7-253a33796f27.png)

これらを見ると、入出力のチャンネル数やサンプルレートは問題なく取得できていそうです。

このような手軽な操作で、音の入出力に関する情報を確認できるのが分かりました。今後、上記の内容を活用するような話に手をつけていこうと思います。
Lighthouseとは何か調べてみた

# はじめに

こんにちは、エンジニアのkeitaMaxです。

Lighthouseというものについて全く知らなかったので調べてみました。

# Lighthouseとは

>Lighthouse は、ウェブページの品質向上に役立つよう開発されたオープンソースの自動化ツールです。任意のウェブページ、公開ページ、認証要求ページに対して実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査を実施しています。
(引用：https://developer.chrome.com/docs/lighthouse/overview?hl=ja)

LighthouseはWEBページに対して、WEBページの品質向上のためにSEOなどに対して無料で診断をしてくれるツールのことです。

以下の診断などが簡単にできるようです。
. Performance
. Accessibility
. Best Practices
. SEO

# 診断のやりかた

診断したいページでF12を押して開発者ツールを出します。

上のタブのLighthouseをクリックします。

![スクリーンショット 2024-05-21 11.01.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/095a8b1b-cfff-5ac2-f9d7-156e8ad19efd.png)

すると以下のような画面がでるので、`Analyze page load`のボタンを押します。

![スクリーンショット 2024-05-21 11.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/38255aa0-c1c4-790e-fa7e-1823f7e8c415.png)

すると解析が始まります。

![スクリーンショット 2024-05-21 11.07.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/0884131b-092b-e964-4f7b-8592562e8b12.png)

解析が終わると以下のように解析結果が表示されます。

![スクリーンショット 2024-05-21 11.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/f8a76025-33ca-c0c9-f1cc-4f85bd34c1fa.png)


# パフォーマンスについて

WEBページのパフォーマンスについての評価になっています。

`First Contentful Paint` `Largest Contentful Paint` `Total Blocking Time` `Cumulative Layout Shift` `Speed Index`
の５つの指標で評価をされています。

 公式には各指標について以下のように書かれていました。
 
### `First Contentful Paint`
>FCP は、ユーザーが最初にページに移動してから、ページのコンテンツの一部が画面にレンダリングされるまでの時間を測定します。
(https://web.dev/articles/fcp?hl=ja)

### `Largest Contentful Paint`
>ページのメイン コンテンツが読み込まれたと思われる時点を示します。
(https://web.dev/articles/lcp?hl=ja)

### `Total Blocking Time`
>First Contentful Paint（FCP）後、ユーザー入力へのレスポンスを妨げるのに十分な時間メインスレッドがブロックされた合計時間を測定します。
(https://web.dev/articles/tbt?hl=ja)

### `Cumulative Layout Shift`
>CLS は、ページの存続期間中に発生する予期しないレイアウト シフトごとに、レイアウト シフト スコアのバーストの最大値を測定します。
(https://web.dev/articles/cls?hl=ja)

### `Speed Index`
>Speed Index は、ページの読み込み中にコンテンツが視覚的に表示される速度を測定します。
(https://developer.chrome.com/docs/lighthouse/performance/speed-index?hl=ja)

#### 参考URL

https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=ja

# ユーザー補助について(Accessibility)

ウェブページが障がいを持つユーザーにも利用しやすいかどうかを評価する機能のようです。

img要素に'alt'属性があったり、リンクが色に依存せずに区別できたりすると評価が上がるようです。

## 参考

https://developer.chrome.com/docs/lighthouse/accessibility/scoring?hl=ja


# ベストプラクティスについて

パフォーマンスやセキュリティなどのベストプラクティスに沿っているかを判断してくれるらしいです。

### 参考

https://developer.chrome.com/docs/lighthouse/best-practices/doctype?hl=ja

# SEOについて

ウェブページが検索エンジン最適化（SEO）についてどれだけしたがっているかを評価しているものになります。

metaタグやタイトルがついていることや、ページの読み込み速度が早いことなどが評価されるポイントとなります。

### 参考

https://developer.chrome.com/docs/lighthouse/seo/meta-description?hl=ja


# おわりに

Lighthouse　CIというものもあるので今後使用してみようと思います。

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！
springでトランザクションの制御方法

JavaのSpringフレームワークで1つのメソッド内で複数の場所でコミットを行いたい場合、標準的な@Transactionalアノテーションでは直接それを実現することはできません。これは@Transactionalがメソッドの開始時にトランザクションを開始し、メソッドの終了時にトランザクションをコミットまたはロールバックするため、メソッド内での複数コミットを制御することは想定されていません。

複数箇所でのコミットを行いたい場合、以下のような方法が考えられます：

## 1,トランザクションの手動管理
以下の例では、PlatformTransactionManagerを使用して、一つのメソッド内で複数のトランザクションを開始し、コミットする手順を示します。
``` App.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.PlatformTransactionManager;
import org.springframework.transaction.TransactionDefinition;
import org.springframework.transaction.TransactionStatus;
import org.springframework.transaction.support.DefaultTransactionDefinition;

@Service
public class TransactionalService {

    @Autowired
    private PlatformTransactionManager transactionManager;

    public void performMultipleCommits() {
        // トランザクション定義の作成
        TransactionDefinition def = new DefaultTransactionDefinition();

        // トランザクション1の開始
        TransactionStatus status1 = transactionManager.getTransaction(def);
        try {
            // ここでビジネスロジックを実行（例：更新処理など）
            // ...
            // トランザクション1のコミット
            transactionManager.commit(status1);
        } catch (Exception ex) {
            transactionManager.rollback(status1);
            throw ex;
        }

        // トランザクション2の開始
        TransactionStatus status2 = transactionManager.getTransaction(def);
        try {
            // 次のビジネスロジックを実行
            // ...
            // トランザクション2のコミット
            transactionManager.commit(status2);
        } catch (Exception ex) {
            transactionManager.rollback(status2);
            throw ex;
        }
    }
}
```
解説

	•	PlatformTransactionManager: Springのトランザクション管理を行う主要なインターフェースです。このインターフェースを通じて、トランザクションの開始、コミット、ロールバックを制御します。
	•	TransactionDefinition: トランザクションのプロパティ（伝播行動、隔離レベル、タイムアウトなど）を定義します。
	•	TransactionStatus: 現在のトランザクションの状態を表します。これを使用して、同じトランザクション内で操作を行うか、新しいトランザクションを開始するかを管理します。

この例では、異なるビジネスロジックを実行するために2回のトランザクションを開始し、各セクションの後でそれぞれをコミットしています。エラーが発生した場合には、そのトランザクションをロールバックしています。これにより、異なるビジネス要件に応じて、メソッド内で複数のトランザクションを個別に制御することが可能になります。

## 2. プログラムによるトランザクション分割
別のアプローチとして、複数のトランザクションに分けてメソッドを呼び出すことが考えられます。すなわち、各コミットが必要な部分を別のトランザクショナルメソッドとして実装し、それらを順に呼び出します。
``` App.java
@Service
public class UserService {

    @Autowired
    private AnotherService anotherService;

    public void updateUser(User user) {
        anotherService.updatePart1(user);
        anotherService.updatePart2(user);
    }
}

@Service
public class AnotherService {

    @Transactional
    public void updatePart1(User user) {
        // ビジネスロジックの一部を実行
    }

    @Transactional
    public void updatePart2(User user) {
        // ビジネスロジックの次の部分を実行
    }
}
```
jsonファイルを編集して上書き保存する

```py:sample.py
import json
import copy


def read_json(file_path):
    with open(file_path, "r") as file:
        data = json.load(file)
    return data


def write_json(file_path, data):
    with open(file_path, "w") as file:
        json.dump(data, file, indent=4)


def edit_json(food_dict):
    """nameの値を小文字に変換"""
    edited_data = copy.deepcopy(food_dict)

    for data in edited_data.values():
        data["name"] = data["name"].lower()

    return edited_data


def main():
    file_path = "sample.json"
    food_dict = read_json(file_path)
    edited_data = edit_json(food_dict)
    write_json(file_path, edited_data)


if __name__ == "__main__":
    main()

```


```json:sample.json
{
    "food1": {
       "name": "APPLE",
       "price": 150
    },
    "food2": {
       "name": "BANANA",
       "price": 100
    }
 }
 ```
【Tips】英傑大戦のランキングを自動で取得する

# はじめに
私はSEGAの大戦シリーズ（三国志大戦、戦国大戦、英傑大戦）が好きで、三国志大戦から20年近くにわたりプレイしています。

現在は英傑大戦が絶賛稼働中となっております！
どのようなゲームかご存じない方は以下のサイトを参照ください。

https://www.eiketsu-taisen.com/

私は週２～３ぐらいのペースでプレイしているのですが、ただプレイするだけではなく「１か月前はどれぐらいだっけ？」とか、「〇日でどれぐらい順位が上がった！」といった日々のプレイ記録を残したいと思い、ラインキングを収集するコードを書いてみました。

# 注意事項
コードを動作させる場合、自己責任で使用してください。

# サンプルコード
```
from requests_html import HTMLSession

# ※検索するURLを指定
# この例では福岡県ランキングのURLを指定し、ランキングを取得しています
url = 'https://www.eiketsu-taisen.com/ranking/prefecture_region/#/national:38/'

# セッション開始
session = HTMLSession()
res = session.get(url)

# ブラウザエンジンでHTMLを生成させる
res.html.render()

#エンコード設定
res.encoding = res.apparent_encoding

#ランキング100件ループ
for num in range(1,100,1):

    #主君名
    playername = res.html.xpath('//*[@id="ranking-top"]/div[2]/ul/li[' + str(num) + ']/ul/li[3]')
    #print(playername[0].text)

    #ここで主君名を指定する
    if ( '主君名' in playername[0].text):
        print('playername:' + playername[0].text)

        #順位
        rank_num = res.html.xpath('//*[@id="ranking-top"]/div[2]/ul/li[' + str(num) + ']/ul/li[1]')
        print('rank_num  :' + rank_num[0].text)

        #石高
        point_num = res.html.xpath('//*[@id="ranking-top"]/div[2]/ul/li[' + str(num) + ']/ul/li[7]/div')
        print('point_num :' + point_num[0].text)

        #店舗
        play_area = res.html.xpath('//*[@id="ranking-top"]/div[2]/ul/li[' + str(num) + ']/ul/li[4]')
        print('play_area :' + play_area[0].text)
        
print('完了しました')
```

# 解説
主君名（プレイヤー名）を指定すると、指定した主君名の以下の項目を抽出します。
・順位
・石高
・店舗

今回は自宅のQNAPで毎日自動実行することを想定しているため、SeleniumではなくRequests-HTMLを使用しています。
※ランキングはTOP100までしかないため、TOP100に入っていない場合は抽出できません。
　
# まとめ
今回は英傑大戦のランキング記録を自動で取得するスクリプトを紹介しました。
キーワード指定を変更するだけでランキング情報が取得できるため、後はCSVに追記して毎日の記録を取るなり、メールやslack等で通知するなど活用していただければと思います。
この記事が誰かの参考になれば幸いです。
arduinoでserial通信でjson形式のデータを読み込む方法

arduinoでserial通信でjson形式のデータを読み込む方法

```c++
#include <Arduino_JSON.h>

void setup() {
    // シリアル通信を開始
    Serial.begin(9600);
}

void loop() {
    // シリアルポートにデータがあるかを確認
    if (Serial.available() > 0) {
        String input = Serial.readString();
        JSONVar instruct = JSON.parse(input);
        // {"serv_1": 5}
        Serial.println(instruct["serv_1"]);
    
    delay(1000);
    }
}
```
wasmファイルにローカルアカウントが混入? Dockerビルドで解決!!

## wasm の中にローカルアカウントが入っている・・・

`Cargo.toml`に以下のように記述しています

```
[profile.release]
opt-level = "s"
debug = false
codegen-units = 1
lto = true
panic = "abort"
```

記述的には問題ないと思うのですが・・・
この状態で、`wasm-pack build --target web --release` でビルドを行い、wasmの中を覗いてみる

```
$ strings ./pkg/wasm_bg.wasm | grep .cargo
/Users/owayo/.cargo/registry/src/index.crates.io-6f17d22bba15001f/lazy_static-1.4.0/src/inline_lazy.rs
/Users/owayo/.cargo/registry/src/index.crates.io-6f17d22bba15001f/serde-wasm-bindgen-0.6.5/src/lib.rs
```
がっつりローカルアカウントが入っていますね

## Dockerでビルドをする

ローカルアカウントが入らないようDockerでビルドすることにしました。

```
FROM debian:bookworm

ENV C_VERSION=12

RUN apt-get update && \
  apt-get install --no-install-recommends -y \
  curl \
  gcc-${C_VERSION} \
  g++-${C_VERSION} \
  ca-certificates \
  build-essential \
  pkg-config \
  libssl-dev && \
  rm -rf /var/lib/apt/lists/*

ENV CXX=/usr/bin/g++-${C_VERSION}
ENV CC=/usr/bin/gcc-${C_VERSION}

ENV RUST_BACKTRACE=full
ENV PATH=/root/.cargo/bin:$PATH
RUN curl https://sh.rustup.rs -sSf | sh -s -- -y && \
  rustup target add wasm32-unknown-unknown && \
  cargo install wasm-pack && \
  cargo install wasm-bindgen-cli && \
  cargo install cargo-generate

WORKDIR /src
```
のようにして、`docker run`で`wasm-pack build --target web --release` を実行しました
ビルドされた wasm ファイルを覗いてみます
```
$ strings ./pkg/wasm_bg.wasm | grep .cargo
/root/.cargo/registry/src/index.crates.io-6f17d22bba15001f/lazy_static-1.4.0/src/inline_lazy.rs
/root/.cargo/registry/src/index.crates.io-6f17d22bba15001f/serde-wasm-bindgen-0.6.5/src/lib.rs
```
大丈夫ですね

## まとめ
wasm-packでビルドする際にローカルアカウントが入ってしまう問題があり、Dockerでビルドすることで解決しました
Dockerでのビルドでつまづいた点がありますが、オマケとして書いておきます

## オマケ: fatal error: 'algorithm' file not found の解消方法

Dockerfileを作っているときに以下のようなエラーが出ました
```
[INFO]: Checking for the Wasm target...
[INFO]: Compiling to Wasm...
   Compiling cxx v1.0.122
The following warnings were emitted during compilation:

warning: cxx@1.0.122: In file included from /usr/local/cargo/registry/src/index.crates.io-6f17d22bba15001f/cxx-1.0.122/src/cxx.cc:1:
warning: cxx@1.0.122: /usr/local/cargo/registry/src/index.crates.io-6f17d22bba15001f/cxx-1.0.122/src/../include/cxx.h:2:10: fatal error: 'algorithm' file not found
warning: cxx@1.0.122: #include <algorithm>
warning: cxx@1.0.122:          ^~~~~~~~~~~
warning: cxx@1.0.122: 1 error generated.

error: failed to run custom build command for `cxx v1.0.122`

Caused by:
  process didn't exit successfully: `/src/target/release/build/cxx-835b19e1672f7ac6/build-script-build` (exit status: 1)
```
試行錯誤した結果、`CC`、`CXX`を設定することで解消しました
`fatal error: 'algorithm' file not found` でググっても発生している人は複数いたのですが、解決方法が書かれていなくて苦労しました。
Markdown形式を使用してGitHubでテーブルを作成

## 以下のようなテーブルを生成(目標物)
![screenshot_39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711935/dec7bbd2-4cfc-5100-2778-6017c1788150.png)


<br>

## Markdownコード

```markdown:markdown
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |
| Data 4   | Data 5   | Data 6   |
```

<br>

## コーディング内容
Markdown形式では、パイプ記号（|）とハイフン（-）を使用して、表の列と行を定義します。
（-）を使用すると、その上のセルは中央揃えになります。
※（:）を追加すると、セルのテキストを左揃えにできますが、カラムと説明は中央揃えで問題ありません。

<br>

## その他の例
目標物

![screenshot_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2711935/d6fdf82c-2f6a-992c-73fd-b4939deddcb5.png)




```markdown:markdown
**Question**
| カラム        | 説明            |
| ------------- | --------------- |
| **id**        | **id**          |
| **name**      | **質問投稿者名** |
| **title**     | **質問タイトル** |
| **content**   | **質問本文**     |
| **created_at**| **作成日時**     |
| **updated_at**| **更新日時**     |

**answers**
| カラム        | 説明            |
| ------------- | --------------- |
| **id**        | **id**          |
| **question_id** | **question.id** |
| **name**      | **回答投稿者名** |
| **content**   | **回答本文**     |
| **created_at**| **作成日時**     |
| **updated_at**| **更新日時**     |
```
入力フォームの整数判定【PHP】

# はじめに
bdrccです。
ポートフォリオに掲載する、PHPの制作物を作っています。
今回の記事は、フォームに入力された内容で四苦八苦した経緯を書いていきます。

# 整数がほしい
パスワードの桁数と個数をフォームに入力し、PHPで実行することで、英数字から作成されたパスワードを、複数個自動生成するWebアプリを作成しています。
数字入力の枠のエラー対応を行いました。

### 入力されていない 場合
-> HTML の inputタグに `required` を追加して対応
### 数値ではない または 負の数 の場合
-> PHP の `is_numeric(入力内容)` で判定可能

ここまでは順調でした。
問題はここからです。

桁数を6〜10、個数を1〜10としていたのですが、<strong>範囲内小数</strong>の場合、小数部分を切り上げて自動判断していました・・・。

# 対応
1.`is_int()` を使用
->文字列扱いで認識され、正しい自然数でも作動せず
2.`is_numeric() and $x==intval($x)` を使用
->無事、範囲内整数のみで指定ができました。
3.`mb_convert_kana（）`を使用
->if文の前で変換しておくと、全角数字の場合も判定が可能 他の文字が入っても影響を受けず

```php:
<?php 
$num = mb_convert_kana($_POST['num'],"n");
if(is_numeric($num) and 
$num == intval($num) and 
1 <= $num and 
$num <= 10){
// 1から10までの整数だけ通す場合
...
}
?>
```
# 終わりに
Qiitaでの投稿の方法、大体わかってきました。
何事もまずはやってみないと、ですね。

引き続き頑張ります。
カモノハシでもわかるGitのコマンド操作

# :white_sun_small_cloud: 自己紹介:rabbit:

はじめまして！新卒1年目の大澤です。
この記事を開いていただきありがとうございます。
今回、初めて記事を投稿するので何を書こうかたくさん迷いましたが、私自身、社内研修でGitのコマンド操作に苦戦し続けているので、今回はGitの基本について一緒に学べたらいいなと思います。
それでは、一緒にGitの勉強タイム入ります！
よろしくおねがいします(*‘∀‘)✯

# :mushroom: Gitとは..？ :seedling:
 
「Git」とは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムです。このツールを使うことで、開発中のプロジェクトでの変更点を効率的に追跡し、複数の人との共同作業がスムーズになります。



Gitには、２種類のリポジトリというものがあります。それは、リモートリポジトリとローカルリポジトリです。リモートリポジトリは、専用のサーバに配置して複数人で共有するためのリポジトリです。一方、ローカルリポジトリはユーザ一人ひとりが利用するために、自分の手元のマシン上に配置するリポジトリのことです。


# :sparkles: 基本的なGitコマンド :rooster:


❓　みなさんはどんなGitのコマンドを知っていますか　❓

さまざまなコマンドがあると思うのですが、今回は私が社内研修で学んだGitコマンドの知識の範囲内で、よく使用するものをピックアップします！

## 🌠git pushの流れ

**☆```git add .```**
**☆```git commit -m "IT勉強中" .```**
**☆```git push .```**



## 🌠git pullの流れ
**☆```git pull origin ブランチ名 .```**


## 🌠git statusの流れ
**☆```git status``` 状態の確認 .**
**☆```git add path/to/conflicted_file``` 競合を解決 .**

**☆```git commit -m "Resolved merge conflict"``` コミットを追加.**
**☆```git merge < branch_name >``` マージ完了.**
**☆```git merge --abort``` マージ中止.**


# :leaves: マージとは..? :chipmunk:
マージとは分岐した履歴を統合する操作のことで、2つのブランチを1つにまとめることができます。また、他の人の作業内容を取り込みたいときにする操作のことをいいます。



# 最後に..:dash::cat: #
私は社内研修で使用しているVScode内でGitのコマンドについて初めて触れました。最初はコマンド操作に苦戦していましたが、今ではうまく扱えるようになりました。みなさんがこの記事を読んで、少しでもGitの操作に興味を持ったり、理解することができていたら幸いです。
ここまで拙い文章を読んでいただきありがとうございました。
では、また次回の記事でお会いしましょう～:cow::star2:
一旦listに変換した方が高速？

:::note info
Python 3.10.11 を使って実験しました。
:::

pythonにおいて、`tuple`, `max`, `min`, `sum`などは、iterableを引数にできるため、

```python
tuple(range(10))
max(range(10))
min(range(10))
sum(range(10))
```

のように書くことが可能だ。一方で、書き方として`tuple(list(range(10)))`のように一旦listに変換してから`tuple`や`max`を使っても文法上は問題ない。しかし、listへの変換が挟まるのだから微差とは言え遅くなるだろうと直観的には考えられる。

```python
%%timeit
max(range(10000))
```
    205 µs ± 8.12 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

```python
%%timeit
max(list(range(10000)))
```
    221 µs ± 11.7 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

これは直観通り。が、次のように書くと予想は裏切られる。

```python
%%timeit
max(i for i in range(10000))
```
    379 µs ± 30.9 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

```python
%%timeit
max([i for i in range(10000)])
```
    247 µs ± 23 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

いやいや、そんな書き方しないよ、と思うかもしれないが、こういうことはよくやる。

```python
t = [(i, i + 1) for i in range(10000)]
```

```python
%%timeit
max(i[0] for i in t)
```
    591 µs ± 7.83 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

```python
%%timeit
max([i[0] for i in t])
```
    514 µs ± 23.4 µs per loop (mean ± std. dev. of 7 runs, 1,000 loops each)

やはり、一度listにした方が速い。

理由は不明。この計測方法だとキャッシュしてしまうのかと思ったが違うようだ。listはiteratorより優遇されているのかもしれないが、この結果はモヤる……
PowerAutomate: Trigger/Actions の入力の使いまわし方

# 背景

以前書いたつもりだったんだけど、分かりにくいなと反省し、New Designer での取得方法と、実際の取得例に特化して書き直し・・ :sweat: 

# 概要

パターンが分かれば簡単

## トリガーの場合

- trigger().inputs.parameters.{取得したい項目}

New Designer なら、以下のように Code View で利用したい項目をコピペするだけ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/20d0cbc0-06b6-e879-d9a4-db0e038cb96b.png)

## アクションの場合

- actions('{アクション名}')?.inputs.parameters.teamId.{取得したい項目}

:::note warn
body/recipient のような場合、parameters.body.recipient だとエラーになるので以下のようにする

```
actions('')?.inputs.parameters['body/recipient']
```
:::

# コピー用一覧

## Triggers

|対象|項目|コピペ用|
|-|-|-|
|Recurrence|start time|<code>trigger().startTime</code>|
|Sharepoint|Site Address|<code>trigger().inputs.parameters.dataset</code>|
|Sharepoint|Library Name|```trigger().inputs.parameters.table```|
|Teams|Adaptive Card|```actions('')?.inputs.parameters.inputsAdaptiveCard```|

## Actions

:::note info
- actions('__{Action Name}__')
Action Name を入れて使う。
:::

|対象|項目|コピペ用|
|-|-|-|
|Sharepoint|Site Address|<code>actions('')?.inputs.parameters.dataset</code>|
|Sharepoint|Library Name|```actions('')?.inputs.parameters.table```|
|Teams|Team|```actions('')?.inputs.parameters.teamId```|
|Teams|Recipient|```actions('')?.inputs.parameters['body/recipient']```|
|Teams|Parent Message ID|<code>actions('').inputs.parameters['body/parentMessageId']</code>|
|Teams|Message ID|<code>actions('').inputs.parameters['messageId']</code>|
|Teams|Team ID|<code>actions('').inputs.parameters['body/recipient/groupId']</code>|

# 詳細

若干変更があるかもだけど、基本は以下

https://qiita.com/baku2san/items/6fa63d15198c2a20f61c

記述の仕方は以下なんかも参考に

https://qiita.com/baku2san/items/fb2e7b8ac03eb3edbb5a#%E7%9B%B4%E6%8E%A5%E6%8C%87%E5%AE%9A

# あとがき

コピーですぐ使えるようにしておくべきでしたね :sweat_smile:
グラフ画像を含むPDFをLambdaで動的に生成する

## はじめに

以前も[こちらの記事](https://qiita.com/taisuke-j/items/047bebb3d85b48e5fddb)でTypescript（サーバーサイド）を使ったPDFの生成に関して書いたのですが、今回はグラフ画像を埋め込んだPDFを動的に生成するエンドポイントを実装した際のメモです。「グラフ画像をサーバーサイドで動的に作りたい」、というだけの場合も役に立つかもしれません。

## PDF生成までの流れ

元々は[chartjs-node-canvas](https://www.npmjs.com/package/chartjs-node-canvas)を使ってのグラフ画像の生成を考えていたのですが、node v18で動かず、代わりに[Puppeteer](https://pptr.dev/)でheadles chromeを起動しスクリーンショットを撮る形にしました。ブラウザでのグラフ描画には[echarts](https://echarts.apache.org/en/index.html)を使用しました。以下、生成までの流れとなります。

1. DBからグラフに必要なデータを取得
1. Puppeteerでheadless chromeを起動
1. Javascriptライブラリechartsでグラフを描画
1. Puppeteerの機能で描画されたグラフのスクリーンショットを撮りbase64にエンコード
1. [pdfmake](http://pdfmake.org/#/)で上記画像を含むPDFを生成

### Puppeteer

コンテナ形式ではなく、Zip形式のAWS Lambdaを使う場合、Lambda環境向けのchromiumをインストールする必要があります。今回はこちらの[@sparticuz/chromium](https://github.com/Sparticuz/chromium)を使用しました。また、ビルド時に `${project_directory}/node_modules/@sparticuz/chromium/bin` の中身を丸っと `${project_directory}/bin` にコピーする必要がありました。これにより、PuppeteerがchromiumをLambda上で起動できるようになります。

https://github.com/Sparticuz/chromium

```typescript
import puppeteer from 'pupeteer-core';
import chromium from '@sparticuz/chromium';
import { setTimeout } from 'node:timers/promises';

...

// Puppeteerの起動
const browser = await puppeteer.launch({
  args: chromium.args,
  defaultViewport: chromium.defaultViewport,
  executablePath: await chromium.executablePath(),
  headless: chromium.headless,
});

const page = await browser.newPage();

// 必要に応じて描画が終わるまでwaitする
await setTimeout(1000);

// スクリーンショットの撮影
const buffer = await page.screenshot({
  type: 'jpeg',
  quality: 100,
});

// base64にエンコード
const base64Encoded = buffer.toString('base64');

...

// pdfmakeに画像データを渡しPDFを生成
```

### pdfmake

少し他のライブラリも見てみたのですが、Typescriptだと依然pdfmakeが使いやすい印象でした。pdfmakeの使用方法に関しては[こちらの記事](https://qiita.com/taisuke-j/items/047bebb3d85b48e5fddb)で以前に紹介しています。

## まとめ

グラフ画像を含むPDFをLambdaで動的に生成する際のメモでした。Lambda上でchromiumを起動するところで少しつまづきましたが、上手くPDFを作成することができました。
架空レストランHPの制作過程 Part2 リサーチ編

前回の記事

https://qiita.com/yamashee/items/fa79516ccebeb3d578b1

## 飲食店探しの現状

イタリアンレストランのWebサイト製作するにあたって、まず、人々がどのように飲食店を探すのか調べました。

![filters_format(webp).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/c37d501d-34de-cf39-b9d6-089ab079e9eb.jpeg)
**参考資料:** [https://www.tablecheck.com/ja/join/about-us/press/ota-survey-2022/](https://www.tablecheck.com/ja/join/about-us/press/ota-survey-2022/)

こちらの資料によると、飲食店を探す際に最も利用されているのは**Google**です。具体的なサービスは明記されていませんが、おそらく**Google検索とGoogleマップ**が考えられます。

実際、私も飲食店を探す際はGoogleマップを活用することが多いです。

一方、予約については、食べログやぐるなびなどのグルメポータルサイト、または電話での予約が主流となっています。

![filters_format(webp) (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1902958/e07ac474-0ee3-ce48-b619-d2063413064a.jpeg)
**参考資料:** [https://www.tablecheck.com/ja/join/about-us/press/ota-survey-2022/](https://www.tablecheck.com/ja/join/about-us/press/ota-survey-2022/)

これは、GoogleやSNSからの予約システムの導入が進んでいない、あるいは十分に認知されていないことが原因に考えられます。

## マーケティングフェーズとWebサイトの役割

一般的なマーケティングの流れに沿って、Webサイトの役割を整理します。

**1. 認知フェーズ:**

このフェーズでは、SEO対策が重要となります。

**2. 興味フェーズ:**

顧客はWebサイトやSNSを訪れ、お店の情報を確認します。

**3. 欲求フェーズ:**

具体的な検討フェーズです。メニュー内容、予約可否、禁煙席の有無などを確認します。

**4. 行動フェーズ:**

今回のコンバージョンは予約とします。電話予約とオンライン予約の2種類が考えられるため、どちらも対応する必要があります。

顧客が複数のチャネルを跨ることなく、認知から行動まで完結できるような機能を搭載する必要があります。

## オムニチャネル化の重要性

今回はWebサイト制作が目的なので、それ以外の対応は省きますが、実際の飲食店集客においては、オムニチャネル化を強化することが重要です。

Webサイト、SNS、グルメポータルサイト、Googleマップなど、それぞれのチャネルを連携し、どのチャネルから流入してもユーザーがスムーズに行動できるよう設計する必要があります。

特に、多くのユーザーが飲食店の認知～欲求フェーズで活用しているであろうGoogleマップからの予約機能を実現することで、コンバージョン率向上に繋がる可能性を秘めています。

Googleマップからの予約を実現するには、Googleと提携しているサービスに登録する必要があります。

**代表的なサービス:**

* ぐるなび
* Retty
* EPARKグルメ
* ヒトサラ

大手グルメポータルサイトでいうと、食べログはGoogleと提携していませんが、ぐるなび（2023年8月に楽天と提携してサービス名称が楽天ぐるなびに変更）はGoogleマップとの連携が可能です。

https://pro.gnavi.co.jp/gnavi_gbp/

さらに、ぐるなびはInstagramとの連携も可能で、Instagramからの予約機能も実装できます。

https://pro.gnavi.co.jp/magazine/t_res/cat_3/a_3229/

## まとめ

Webサイトの制作過程を紹介するつもりが、いつの間にかぐるなびの話になってしまいました。しかし、デジタルチャネルは多様化しており、Webサイト単体ではなく、様々なサービスとの連携が重要になってきていることということです。

## 次回

次回は、Webサイトの情報設計とワイヤフレーム作成について紹介します。

次の記事↓

https://qiita.com/yamashee/items/5069caca62af96d61315
学生はGitHub Copilotを無料で使おう

# 学生はGitHub Copilotを無料で使おう



## なぜこのような記事を書こうと思ったか
現在、インターン先にてGitHub Copilotを使える環境で作業をしており、そこで使うようになり自分のパソコンの環境でも使えるようにしたいなと思ったのがきっかけです。

その前からGitHubCopilotの存在は知っていましたが、有料なら使う必要はないかなと思ってあまり調べていませんでした。最近になって調べると、なんと学生なら無料で使えることを知り、入れない手はないと思いすぐにインストールしました！

## やり方
僕は以下の記事の内容通りに進めていき、申請して3日ほどで使えるようになりました。


https://qiita.com/SNQ-2001/items/796dc5e794ac3f57a945


注意点：現在は学生証をアップロードするときに、画像の容量を少なく抑えないと送れないようになっています。自分のスマホなどで撮影したものを以下のような画像を変換してくれるサイトで、学生証の画像の容量を減らしてアップロードして申請してください。

https://www.iloveimg.com/ja


## 使い方

使い方もいろんな所で紹介されているので他の記事を参考にしてみてください。

公式サイト

https://github.com/features/copilot/



## 終わりに

このような便利な機能を使わない手はないでしょう。
かなり作業効率があがります。
是非学生の皆さんは、GitCopilotを無料で使いこなしましょう
CloudFrontでのキャッシュについて

## はじめに
CloudFrontのキャッシュは、エッジロケーションでコンテンツを保存し、ユーザーに近い場所から配信する仕組みです。
本記事では、CloudFrontのキャッシュによるメリットや保持期間、削除について解説します。

## メリット

CloudFrontのキャッシュは、ユーザーに近いエッジロケーションでコンテンツを保存し、迅速な配信を可能にする仕組みです。これにより、次のようなメリットがあります。

①**配信の高速化**: ユーザーに近いエッジロケーションからコンテンツを提供することで、リクエストのラウンドトリップタイムが短縮され、ページのロード時間が減少します。これにより、高速な応答が可能になり、特にグローバルなユーザー基盤を持つサービスで顕著な効果があります。

②**帯域幅の節約**: 多くのリクエストがエッジロケーションで処理されるため、オリジンサーバーの負荷が減少し、必要な帯域幅が節約されます。また、オリジンサーバーへの転送量が減ることで、データ転送コストの削減にもつながります。

③**高可用性の実現**: オリジンサーバーがダウンした場合でも、エッジロケーションのキャッシュによりサービスの継続が可能です。さらに、特定のエッジロケーションが利用不可になった場合でも他のエッジロケーションがサービスを提供できます。

## キャッシュ保持期間の設定

CloudFrontで設定できるキャッシュ保持期間（TTL: Time to Live）には以下の設定項目があります。

①**Default TTL**: オブジェクトのデフォルトのキャッシュ期間を設定します。オリジンが指定しない場合に適用されます。

②**Minimum TTL**: オリジンが指定する最短のキャッシュ期間を設定します。これにより、オブジェクトが少なくともこの期間はキャッシュされます。

③**Maximum TTL**: オリジンが指定する最長のキャッシュ期間を設定します。これにより、オブジェクトがこの期間を超えてキャッシュされないようにします。

例: 一般的なキャッシュ設定

Default TTL: 86400秒（24時間）
Minimum TTL: 3600秒（1時間）
Maximum TTL: 604800秒（1週間）

動作:

オリジンがTTLを指定しない場合、オブジェクトは24時間キャッシュされます。
オリジンがTTLを30分に設定しても、最低1時間キャッシュされます。
オリジンがTTLを2週間に設定しても、最長1週間までしかキャッシュされません。

## キャッシュ削除

コンテンツが更新された際、キャッシュ保持期間の設定によってはユーザーに最新のコンテンツが配信されません。そのため、キャッシュの削除を行う必要があります。
CloudFrontでのキャッシュの削除はCloudFrontのコンソールまたはAPIを使用して、主に以下の方法で行います。

**インバリッドレーション**: 特定のオブジェクトまたはオブジェクトのパスを指定して、そのキャッシュを無効にすることができます。これにより、新しいオブジェクトがアップロードされたり更新されたりした際に、既存のキャッシュがすぐに無効になります。

**キャッシュの全体的な削除**: 特定のディストリビューションのすべてのキャッシュを一括で削除することができます。これは、大規模なコンテンツのアップデートやサイトの再構築などの際に便利です。

## まとめ
CloudFrontのキャッシュ機能は、ユーザーエクスペリエンスの向上とコスト削減に大いに貢献しますが、コンテンツの更新の際には古いデータが配信されないようにする必要があります。

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/ConfiguringCaching.html

## 参考
https://qiita.com/Haruki-N/items/37cb6745d1837328268b
超便利なソフト「Quicklook」

はじめまして。最近夏でもないのに暑くてエアコンをつけました。どうもdouble型くんです。

# Quicklook

突然ですが、皆さんfbxファイルなどのモデルファイルを確認する際って面倒ですよね。
blenderなどのモデル編集ソフトが入っていなかったら入れないといけないし、blenderなんかはドラッグアンドドロップですぐ見ることができないし....

そんなときに私が見つけたソフトがこちら

https://apps.microsoft.com/detail/9nv4bs3l1h4s?activetab=pivot%3Aoverviewtab&hl=en-us&gl=US

https://github.com/QL-Win/QuickLook?tab=readme-ov-file

見たいモデルファイルにカーソルを合わせて【スペース】を押下するだけで

![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/a089ae01-9342-de8f-a9a8-c28b6fa3068a.png)
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/c3ee05f6-8ba2-aa90-0501-5ea6134b26ec.png)

このようにモデルが表示されます。





今回はGitHubからの導入とその使い方について解説したいと思います。
（Microsoft Storeからでも導入はできるのですが更新が長い等で信用ならない((ボソッ）

# 入れ方
まずはこのソフトの導入なのですが、いたってシンプルで
紹介したサイトに飛び、以下画像の場所までスクロール、

![スクリーンショット (22).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/2b829eb5-4c39-2dda-84b4-e2b6c950c041.png)

**GitHub リリース**をクリックし、飛んだページ（以下画像）の


![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/b8aa4f6d-fc13-5b43-6365-9165d4087cf9.png)

**Quicklook-3.7.3.msi**をクリックするとダウンロードが始まる。
ダウンロードが終了したら、クリックしてセットアップを行う。
この時の保存場所は特にファイルをいじったりする必要がないので任意でOK

これで導入は終了となります。

**あれ、出ない.....**

おっと、まだこれで終わりではないです。
デフォルトではfbxなどのモデルファイルは対応していないようで、（以下GitHubより引用）

>・Almost all image formats: `.png`, `.apng`, `.jpg`, `.bmp`, `.gif`, `.psd`, Camera RAW, ...
・Compressed archives: `.zip`, `.rar`, `.tar.gz`, `.7z`, etc.
・`.pdf` and `.ai` file
・Almost all audio and video formats: `.mp4`, `.mkv`, `.m2ts`, `.ogg`, `.mp3`, `.m4a`, etc.
・Comma-separated values file (`.csv`)
・Email and Outlook Email files (`.eml` and `.msg`)
・HTML files (`.htm`, `.html`)
・Markdown file (`.md`, `.markdown`)
・All kinds of text files (determined by file content)

引用元　[(https://github.com/QL-Win/QuickLook/wiki/Supported-File-Types)](https://github.com/QL-Win/QuickLook/wiki/Supported-File-Types)

**ですが！！！！**

**なんとプラグインを使うことによってこれらのファイルが開くことができます！！！！**


# plugin(プラグイン)


利用可能なプラグインがこちら

https://github.com/QL-Win/QuickLook/wiki/Available-Plugins

おすすめは一番下にある

**WebViewPlus**です

これは`.gltf`、`.glb`、`.fbx`、`.obj`と必要なモデルファイルの表示を行ってくれるプラグインで、とても優秀です。

で、このプラグインの導入なのですが、これも結構簡単です。
Quicklookの導入とほぼ同じで
以下のページから

https://github.com/mooflu/QuickLook.Plugin.WebViewPlus/releases

**QuickLook.Plugin.WebViewPlus.qlplugin**をダウンロードし開くと、

![スクリーンショット (27).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/74eda3f5-4bab-e72f-3e96-4020b540460d.png)

このような画面になると思います。
これは(**このプラグインをインストールするにはここをクリック**)という意味なのでクリックしてインストールします。

すると文字が変わり、
「**Done!Please restert QuickLook**」(**Quicklookをリスタートしてくれ！**)
と書いてある通り、QuickLookを再起動する。

再起動後に再度、fbxファイルを選択して【スペース】を押下すると、
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3797200/e689e108-6ee0-faa2-2504-033596d94933.png)

お！表示された！

:::note warn
表示されない場合は一度`.gltf`のモデルファイルを読みこみを行うと改善される場合があります。
:::

# 終わりに

今回はQuickLookの紹介を行いました。
QuickLookを導入することで`.fbx`などのモデルファイルをワンボタンで表示できるようになりました。
**(これでモデルの確認はラクチンだね！)**
環境構築：Laravel11.0(Docker使用ver)

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [本記事で扱う内容](#本記事で扱う内容)
1. [構築前の留意事項](#留意事項)
1. [手順](#手順)

<!-- 各チャプター -->
<a id="#本記事で扱う内容"></a>
## 本記事で扱う内容
Dockerを用いてlaravelプロジェクトの作成・起動までに関する環境構築
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/f69a8787-882f-2037-628f-0e84a56e00be.png)
※上記画面が表示されるまで

<a id="#Chapter2"></a>
## 留意事項
1. MacOSを用いた環境構築となります
1. 2010年以前のPCモデルについては、本記事の対象外です
1. メモリは16GB以上が望ましいです。（※8GBでも導入はできるかもしれませんが、起動後、馬鹿みたいにPC重くなると思います。４GBはNGです。）
1. DBの設定・laravelパッケージ(laravelの便利キット)のダウンロードは割愛してます（※本来はこの後に設定し、コードの実装を行う）

<a id="#Chapter2"></a>
# 手順
1. [macOSのバージョンとハードウェアを確認](#バージョンとハードウェアの確認)
1. [Rosetta２をinstall(※Appleシリコン（※M1チップ以降）搭載機器の場合のみ実行)](#インストール)
1. [Docker Desktopをinstall](#インストール)
1. [Laravelプロジェクトの新規作成・TOP画面の表示](#プロジェクトの新規作成)

<a id="#macOSのバージョンとハードウェアを確認"></a>
## バージョンとハードウェアの確認

自身のPCのリンゴマークをクリックし、「このMacについて」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/7f91ed0a-2a59-6482-7f6c-867aac418228.png)

赤枠内の情報がバージョン情報となります。
![スクリーンショット 2024-05-21 12.25.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/982ee608-5f20-5a1f-d84e-2306b322d10a.png)

【ハードウェア】：2020年製造、M1チップ(Appleシリコン)使用　
【OSバージョン】：Sonoma14.2.1

## インストール
### (Rosetta2)
ターミナルを起動し、ルートディレクトリ上で下記コードを打ち込む


```:terminal(ルートディレクトリ）
softwareupdate --install-rosetta 
```
## ダウンロード
### (Docker Desktop)

下記サイトからダウンロード

https://docs.docker.com/desktop/install/mac-install/

![スクリーンショット 2024-05-21 20.19.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/d9d69f19-64ee-23c3-87cc-9c488904c249.png)

Appleシリコンを使用している場合
```for Mac with Apple Silicon```をクリック
inlteチップPCを使用している場合
```for Mac with intel chip```をクリック
<br>
インストール完了後、下記画面が表示されればDocker Desktopの準備はOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/70824690-9b36-db4a-02e3-4a9d1c33c35f.png)
※起動した状態で待機

## プロジェクトの新規作成
### (Laravel)
プロジェクトを作成したいディレクトリ上で下記コマンドを入力
```:terminal
url -s "https://laravel.build/※ここに任意のプロジェクト名を記述" | bash  
```

上記コマンド入力後、ターミナル上に下記文字が表示されたら、
Macで設定しているpasswordを入力
```:実行後の表示１
Plese Provide youre password ~~~~~~
[sudo] passsword for 〇〇〇〇：[※ここにPasswordを入力]
```

きちんとpasswordが入力された後、下記の文字が出ればプロジェクト作成完了
```:実行後の表示２
Thank you! We hope you build something incredible. Dive in with: cd 
[※任意のプロジェクト名] && ./vender/bin/sail up
```
上記で作成したプロジェクトのディレクトリに移動
```:terminal
cd [※任意のプロジェクト名]
```
作成したプロジェクトのディレクトリで下記コマンドを入力
※初回の起動は、少々時間がかかる
```:terminal
./vender/bin/sail up
```
下記のような画面が表示され、表示内容が止まったら準備完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/bbde6b56-10dd-121f-6e89-e15a8501fc34.png)
※起動されるコンテナの種類については上記画面とは異なっている場合があっても、気にしないでOKです。
## TOP画面の表示
webブラウザ上で下記URLを入力し
```:URL
http://localhost/
```
下記画面が表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2633519/f69a8787-882f-2037-628f-0e84a56e00be.png)
AtCoder橙色になりました

黄色になった際の記事は[こちら](https://qiita.com/sounansya/items/ca21c45496fa0189d51e)

先日開催された [ARC178](https://atcoder.jp/contests/arc178) でAtCoder橙色になりました。

![スクリーンショット 2024-05-19 23.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227863/2617762e-0471-b904-8c9b-b0f4c2274243.png)

![スクリーンショット 2024-05-20 0.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227863/17cb9df8-a067-a2dd-993c-1a6b82eef475.png)

直近の ARC は 9 勝 1 敗です。正直運の要素も大きいですが、今までの精進が急に成果として出てきたと好意的に解釈しています。

# 自己紹介

現在高専 5 年生の、情報系の学生です。
数学が好きで、積分や級数について色々やっています。積分や級数は競プロには特に生きていないです。

# 精進量

![スクリーンショット 2024-05-19 23.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1227863/6f7ebc21-3417-4dbd-194f-1584a956e786.png)

黄色になりたての際と比べて問題は 2 倍弱解いています。 RPS も当時と比べて 3 倍程度になっています。

# 黄色から橙になるまでやったこと

黄色になってから既に 2 年以上が経過しているので全て覚えている訳ではありませんが、覚えているものを書いていきます。

#### 言語を変えた

第一言語を Java から C++ に変えました。正直な話、これだけでレート 30 ~ 40 程度上がった感覚です。例えば Java にはマクロがなく、 for 文も一々丁寧に書いていく必要がありました。私は早解きでレートを稼いでいたので、 Java と C++ での記述量の差は無視できないものでした。 さらに、ICPC などのチーム戦ではメンバー間の使う言語が違うとメンバー間でのコードの共有が難しくなるなどの弊害もあります。このような理由から、私は Java から C++ に第一言語を変えました。現在は C++ と Python (愚直解の作成やオーバーフローが怖い問題用) の二刀流でコンテストに参加しています。

#### 各種大会に出た

チーム戦では高専プロコンや ICPC 、個人戦では [HTTF](https://atcoder.jp/contests/future-contest-2023-final) や [DDCC](https://special.discoveryjapan.jp/campaign/ddcc2024/) などに出場しました。

特に高専プロコンでは企業賞としてかなり良いパソコンを DMM さんから頂いたので、現在もコンテストはこのパソコンで出場し続けています。

常に ARC に独りで出続けているとやはりモチベが下がっていってしまいます。しかし、上に並べたような大会で実際に他の競技者に会って話すと自分も頑張ろうという気持ちになれます。モチベ維持の点でもこれらの大会は非常に助かりました。

#### 長期インターンを始めた

高専の先輩に誘われ、現在も長期インターンをやっています。受験生ということで勤務の時間はかなり減らしてもらっています。このインターン先では競プロに近い部分を担当させてもらっており、競プロで培ったアルゴリズムの能力やコーディングの能力がかなり発揮できています。競プロしか分からない状態で採用してもらってはじめの頃はかなり不安でしたが、git 等の使い方を丁寧に教えてもらいエンジニアとして力になれる状態になりました。AtCoder Jobs にも無い競プロと全く関係ない会社なので、ここまで競プロが生きているのはかなり運が良かったと思っています。


# 橙になるためには

ここからは個人的な意見です。

橙色になるためには、やはり何か一つの分野に対して強みを持つことが重要だと思います。
私は数学がそれに該当します。数学色の強い問題なら自身のレートより上の difficult の問題も解けることが多いですが、逆に最適化等の問題はかなり解けないことが多いです。
一つ強みを持っておくと、時々大成功してレートが上がるようになってきます。また、チーム戦で違う分野に特化した人とチームを組むと非常に強力なチームになります。その点でも一つ何か得意な分野を持っておくことはメリットが大きいと思います。

あとはとにかく問題を解くのみです。難しい問題を沢山解いて、沢山学びましょう。


# 終わりに

緑色になりたい！水色とかなれるのかな…という気持ちで始めた競プロですが、あれよあれよという内に気付けば橙まで来てしまいました。黄色になりたての頃はこの勢いで橙に！という思いも少しありましたが、今は赤になりたい！という気持ちは無いです。これからののんびりと競プロを続けていけたらと思います。
また、 ABC や ARC の Writer をしてみたいという気持ちもあります。昔から作問が好きなので、もしかすると今後 Writer の名前の欄に sounansya がいるようなコンテストがあるかもしれません。そうなった場合は是非ご参加ください。

ここまで読んでくださりありがとうございました。
SPA/SSR/SSGの違いなどについて

# はじめに
近年、Webアプリケーション開発において、SPA (Single Page Application)、SSR(Server-Side Rendering)、SSG (Static Site Generation) といった技術が注⽬されています。
それぞれ異なる特徴を持ち、それぞれに利点と⽋点があります。本記事では、それぞれの技術の詳細と、プロジェクトの要件に合わせた適切な技術の選択についてまとめています。

# SPA (Single Page Application)
SPAは、1つのHTMLページで完結するWebアプリケーションです。ユーザーがページ遷移を⾏っても、画⾯全体を再読み込みせずに、JavaScriptによって動的にコンテンツを更新します。
近年、React、Vue.js、AngularなどのJavaScriptフレームワークを⽤いて開発されるSPAが主流となっています。

## SPAの利点
### ユーザー体験の向上
ページ遷移に伴う画⾯の再読み込みがないため、ユーザーにとって滑らかな操作性を実現できる

### 開発効率の向上
コンポーネント指向開発など、モジュール化された開発⼿法を採⽤しやすいため、開発効率が向上する

### リッチなUI/UXの実現
JavaScriptフレームワークの機能を活⽤することで、複雑なアニメーションやインタラクションを実現できる

## SPAの⽋点
### SEO対策の難易度が⾼い
クライアント側でHTMLを⽣成するため、検索エンジンにとってコンテンツを理解しにくいという課題がある

### 初回ロード時間が⻑い
JavaScriptやCSSなどのリソースを初回ロードする必要があるため、初回ロード時間が⻑くなる

### 複雑な開発
JavaScriptフレームワークの習得が必要となるため、開発コストが⾼くなる

# SSR (Server-Side Rendering)
SSRは、サーバー側でHTMLを⽣成し、クライアントに送信する技術です。
これにより、初回ロード時に完全なHTMLをクライアントに提供することができるた
め、SEO対策に有利となります。
また、JavaScriptのコード実⾏をクライアント側に委ねるため、SPAよりもセキュリテ
ィ性が⾼いという利点もあります。

## SSRの利点
### 優れたSEO対策
サーバー側でHTMLを⽣成するため、検索エンジンにとってコンテンツを理解しやすく、SEO対策に有利

### ⾼速な初回ロード
初回ロード時に完全なHTMLをクライアントに提供するため、SPAよりも⾼速な初回ロードを実現できる

### ⾼いセキュリティ性
JavaScriptのコード実⾏をクライアント側に委ねるため、SPAよりもセキュリティ性が⾼いと⾔える

## SSRの⽋点
### 複雑な開発
サーバー側でHTMLを⽣成するため、SPAよりも複雑な開発となる

### サーバー負荷が⾼い
サーバー側でHTMLを⽣成するため、サーバー負荷が⾼くなる

### 動的なコンテンツには不向き
動的なコンテンツを頻繁に更新するような場合には、SSRは不向き

# SSG (Static Site Generation)
SSGは、静的なHTMLファイルを⽣成し、クライアントに配信する技術です。ビルド時にHTMLファイルを⽣成するため、サーバー負荷が低く、⾼速な配信を実現できます。また、SEO対策にも優れています。

## SSGの利点
### ⾼速な配信
ビルド時にHTMLファイルを⽣成するため、サーバー負荷が低く、⾼速な配信を実現できる

### 優れたSEO対策
静的なHTMLファイルであるため、検索エンジンにとってコンテンツを理解しやすく、SEO対策に有利

### 低コスト
サーバー側の処理が少ないため、運⽤コストが低くなる

## SSGの⽋点
### 動的なコンテンツには不向き
ビルド時にHTMLファイルを⽣成するため、動的なコンテンツを頻繁に更新するような場合には、SSGは不向き

### コンテンツの更新に時間がかかる
ビルド処理が必要となるため、コンテンツを更新するのに時間がかかる

### 開発の⾃由度が低い
静的なHTMLファイルを⽣成するため、開発の⾃由度が低くなる

# 適切な技術の選択
SPA、SSR、SSGはそれぞれ異なる特徴を持ち、それぞれに利点と⽋点があります。プロジェクトの要件に合わせて、最適な技術を選択することが重要です。

## SPAが適している場合
ユーザー体験を重視するアプリケーション
動的なコンテンツを頻繁に更新するアプリケーション
開発効率を重視するプロジェクト
フロントエンドエンジニアになるための10のロードマップ 36

## SSRが適している場合
SEO対策を重視するアプリケーション
初回ロード時間の短縮を重視するアプリケーション
セキュリティ性を重視するプロジェクト

## SSGが適している場合
コンテンツ配信速度を重視するアプリケーション
運⽤コストを低減したいプロジェクト
静的なコンテンツを配信するアプリケーション

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
実践重視：即戦力を育てるアウトプット中心のプログラム。
モダンなスキル : Reactを中心としたモダンな技術を学べる。
キャリアアップ：スキルアップだけでなく、キャリアパスのサポートも充実。
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！

▼▼▼
https://projisou.jp
UE5 でキー割り当てを変更する

Unreal Engine v5.4.1

## はじめに
UE5 でジャンプなどのキー割り当てをする際、最初に調べた方法が古く、非推奨となっていたため最新の方法である「Enhanced Input」についてまとめました。

## 以前の方法
1. レベルエディタで「編集」 > 「プロジェクト設定」の順に選択する
2. プロジェクト設定ウィンドウで「エンジン」-「インプット」を選択
3. アクションマッピングで各アクションのキー割り当てをする

以前は上記設定で行っていたようですが現在は非推奨となり、Enhanced Inputを代わりに使用するよう注意文が表示されています。

## Enhanced Input

従来の方法より複雑で高度な入力制御が可能になっているようです。
基本的にはアクションごとに「入力アクション」ファイルを作成し「入力マッピングコンテキスト」ファイルでキー割り当てをします。
### 入力アクション
プレイヤーが実行できるアクションを表します。
ジャンプ、移動、弾の発射など各アクションごとに作成します。

### 入力マッピングコンテキスト
入力アクションにどのキーを割り当てるか指定するマッピングファイルです。
基本とは別に「ダッシュ中」「しゃがみ」など作成しておくことで状態に応じで変化させることができます。

## 例：
例として、スペースキーを押すとキャラクターがジャンプするようにキー割り当てをする設定を紹介します。

作りたてのFirstPersonプロジェクトで作業している前提で記載しています。今プロジェクトにはすでに基本的な入力アクションや入力マッピングコンテキストの切り替えなどが実装済みなので構成を確認するだけでも大まかな使用方法はわかるかと思います。

1. 入力アクションを作成する
    1. コンテンツブラウザで右クリック、入力 > 入力アクション を選択
    2. IA_Jump2 と名前を付ける
    3. Triggers に「押される」「リリース済み」を追加します
2. 入力マッピングコンテキストを作成する
    1. コンテンツブラウザで右クリック、入力 > 入力マッピングコンテキスト を選択
    2. IMC_Jump と名前を付ける
    3. Mappings に IA_Jump2 を追加しスペースバーを割り当てる
3. キャラクターブループリントにIA_Jump追加する
    1. BP_FirstPersonCharacter を開く
    2. 右クリックでIA_Jump2 を追加する
    3. 右クリックでキャラクターの Jump を追加する
    4. IA_Jump2 の Started を Jump にリンクさせる
4. プレイヤーコントローラーブループリントにIMC_Jumpを設定する
    1. BP_FirstPersonPlayerController を開く
    2. Mapping Context の割り当てを IMC_Jump に変更する
5. レベルエディタを実行しスペースキーでジャンプできることを確認する

## 詳細
詳しくは以下の公式サイトを確認してください

[Unreal Engine で入力を設定する](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/setting-up-user-inputs-in-unreal-engine)
[Enhanced Input プラグイン](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/enhanced-input-in-unreal-engine)
【Streamlit】st.page_linkでマルチページのリンク先を自由に命名する

# 前置き
こんにちは。データエンジニアの山口歩夢です！

この度、5/25〜の技術書典16に向けて、Streamlitの入門書を執筆しました！
Streamlitの基礎から実践的な内容まで、124ページにまとめて解説させていただきましたので、是非チェックいただけると嬉しいです。

https://techbookfest.org/product/t5GBwbFm4kUhXrTPkGpAnY?utm_source=twitter&utm_medium=social&utm_campaign=share

早速本題ですが、こちらの記事ではStreamlitのマルチページ機能の実装方法について解説しようと思います！

# マルチページ機能とは
Streamlitではアプリ内に別のページを作成して別のアプリケーションの配置を可能にする、マルチページ機能を実装できます。

実装方法としては、以下のような`pages`ディレクトリを作成してPythonスクリプトを配置するだけです。
```
root/
├── streamlit_app.py
└── /pages
     └── multi_page1.py
     └── multi_page2.py
```
上記のような配置でPythonスクリプトを配置するだけで、以下のようにマルチページ機能を実装することができます。

サイドバーの 「multi page1」と「multi page2」をクリックすれば、「multi_page1.py」と「multi_page2.py」のアプリケーションへ遷移することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883573/baa8bf8b-63b8-a49c-2da4-bb07c7afce9f.png)

簡単に実装できますが、こちらの方法だとPythonスクリプトのファイル名と同じ文字列でサイドバー上にリンク先が表示されてしまうという、あまり嬉しくない点があります。
これは`st-pages`モジュール、または`st.page_link`を使用することで改善することができます

「Streamlit データ可視化入門」では、`st-pages`モジュールを使用してマルチページ機能を実装する方法を解説したため、本記事では`st.page_link`関数を使用して実装してみようと思います。

※`st-pages`モジュールを使った実装方法は以下です。

https://github.com/blackary/st_pages



# st.page_linkを使用した実装方法
まず、以下のようにサイドバーの中に`st.page_link`を記入して、以下のようにマルチページのPythonスクリプトとアプリ上に表示したいページ名を記入していきます。
```streamlit_app.py
import streamlit as st

with st.sidebar:
    st.page_link("streamlit_app.py", label="ホーム", icon="🏠")
    st.page_link("pages/multi_page1.py", label="マルチページ1", icon="1️⃣")
    st.page_link("pages/multi_page2.py", label="マルチページ2", icon="2️⃣")

st.title("multi page app")
```

するとこのように、日本語名がついたマルチページへのリンク先がサイドバー上に表示されます。
ですが、これだと元々のマルチページのリンク先も表示されてしまっていて見づらいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883573/bbe3fb35-018d-b4f1-ddfa-2be4a4931b9b.png)

そのため、以下のように`/.streamlit`ディレクトリの中に`config.toml`を用意して以下のように記入します。
```
root/
├── streamlit_app.py
├── /pages
|   └── multi_page1.py
|   └── multi_page2.py
└── /.streamlit
    └── config.toml
     
```
```config.toml
[client]
showSidebarNavigation = false
```

これで元々のマルチページのリンク先が消えて、日本語表記に指定したリンク先だけが表示されるようになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/883573/67c1809c-198d-1f8a-7c13-003789f88be8.png)

# まとめ
最近、EC2にデプロイしたStreamlitアプリケーションで、`st-pages`モジュールを使用してマルチページ機能を実装していたのですが、指定したページ名で表示してくれないという不具合が発生しました。
こちらの方法が便利なので、実装し直してみようと思いました。
以上です！
Splunk - コメントを残したい

## 検証環境
Splunk Enterprise 9.2.1

## はじめに
Splunkに限らず、作成したコマンドは第三者が見ても理解できるようにコメントを残してくれると嬉しいな！でもコメントでどうやって書くんだっけ？という話。

## コメントの残し方
### [1] 使い方
\```コメント``` のようにバッククォートで囲むとコメントが可能。

```SPL:SPL
index=* sourcetype="WinEventLog" ```Windowsイベントログを検索する```
| head 100 ```直近から100件をサンプリングする```
| stats count by app ```アプリの統計を算出する```
```
![スクリーンショット 2024-05-21 8.33.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3310888/1d4eee89-b9ad-484d-839c-9b046c59574e.png)

:::note info
Commentsの使い方はSearch Manualを参照
https://docs.splunk.com/Documentation/Splunk/9.2.1/Search/Comments
:::

## 終わりに
SPLの構文エラーが出た際にも、どこまできちんと動作するのか切り分けに便利。切り分け方法はマニュアル見ればすぐに分かる。
ボリュームマウント

## 概要

ここでは、ボリュームを利用したデータの永続化についてを記載する。
コンテナは、ファイルの作成・更新・削除ができるが、コンテナを削除するとそれらの変更が消失する。
`ボリューム`は、コンテナ内のデータを永続化するために利用する。

## ボリュームマウント

### ボリュームとは？

ボリュームは、コンテナ内で指定したファイルシステムのパスをホストOS上に接続できる機能を持つ。
ボリュームは、`Docker CLI`コマンドや`Docker API`から管理することができる。

```bash
# Dockerボリュームを作成する。
$ docker volume create my-vol
```

### ボリュームマウント

`ボリュームマウント`とは、コンテナ内のファイルシステムにホストOS上のボリュームをマウントすること。
ボリュームマウントは、以下を可能とする。

- コンテナ内のデータの永続化
- コンテナとホストOSもしくは、その他のコンテナとの間でのデータ共有

### ボリュームマウントを設定する

まずは、コンテナ内のディレクトリをマウントするボリュームを作成する必要がある。
`docker volume create`コマンドからボリュームを作成できる。

```bash
$ docker volume create todo-db
```

ボリュームマウントは、以下の二つの指定方法がある。
- `--mount`フラグ（推奨）
    
    ```bash
    $ docker run -dp 127.0.0.1:3000:3000 --mount type=volume,src=todo-db,target=/etc/todos getting-started
    ```
    
    - オプション説明
        - `type`: マウントの形式を指定する。（`volume`, `bind`, `tmpfs`）
        - `src`: マウント元のボリュームを指定する。今回の場合は、`sample-volume`にマウントするため、これを指定している。
        - `target`: コンテナ内のファイルシステム上のマウント先のディレクトリを指定する。
- `--volume`フラグ
    
    ```bash
    $ docker run -dp 127.0.0.1:3000:3000 -v todo-db:/etc/todos
    ```
    
    - オプション説明
        
        `—-volume`もしくは、`-v`フラグの場合には、`:`で区切られた3つのフィールドで構成される。
        
        - `field1`: ボリューム名を指定する。（無名ボリュームの場合には省略する。）
        - `field2`: コンテナ内のファイルシステム上のマウント先のディレクトリを指定する。
        - `field3`: `ro`のようなオプションを指定する。

上に示した方法で、コンテナを起動することで、コンテナのファイルシステムとボリュームとのマウントを設定できる。
コンテナを生成し直しても、アプリケーションで生成されたデータは保持されたままとなる。

### ボリュームの位置を確認する

実際にボリュームが保存されている場所は、`docker volume inspect`コマンドで調べることができる。

```bash
$ docker volume inspect todo-db
[
    {
        "CreatedAt": "2023-12-29T06:12:40Z",
        "Driver": "local",
        "Labels": {},
        "Mountpoint": "/var/lib/docker/volumes/todo-db/_data",
        "Name": "todo-db",
        "Options": {},
        "Scope": "local"
    }
]
```

ホストOS上の`Mountpoint`に保存されている。

### マウント元のボリュームを確認する

コンテナ名からマウント元のボリュームを確認することができる。

```bash
$ docker inspect db_container
... # 長すぎるので省略
"Mounts": [
            {
                "Type": "volume",
                "Name": "todo-db",
                "Source": "/var/lib/docker/volumes/todo-db/_data",
                "Destination": "/etc/todos",
                "Driver": "local",
                "Mode": "z",
                "RW": true,
                "Propagation": ""
            }
        ],
...
```

## 名前付きボリューム

コンテナの起動時にボリュームを生成することができる。
通常は、ボリュームを作成し、作成したボリュームを指定してコンテナを起動することでボリュームマウントが行われる。
`docker run`コマンドで名前付きボリュームを指定すると、コンテナ起動時にボリュームが生成され、自動的にマウントされる。

- **`-v`フラグ**
    
    `:`で区切られた3つのフィールドを指定する。
    - `myvol`
        - ボリューム名を指定する。
        - 無名のボリュームにする場合は省略する。
    - `/app`
        - コンテナ内のマウントするファイルシステムを指定する。

```bash
$ docker run -d \
  -v myvol2:/app \
  nginx:latest
```

- `**--mount`フラグ**
    
    複数のキーとバリューのペアで構成される。
    - `source`
        - ボリューム名を指定する。
        - 無名のボリュームにする場合は省略する。
    - `target`
        - コンテナ内のマウントするファイルシステムを指定する。

```bash
$ docker run -d \
  --mount source=myvol2,target=/app \
  nginx:latest
```

## 参考文献

[ボリュームの使用 — Docker-docs-ja 24.0 ドキュメント](https://docs.docker.jp/storage/volumes.html)
線形探索法(リニアサーチ)

## はじめに

線形探索法についてまとめる

### 線形探索法(リニアサーチ)とは

先頭から順番に調べて探す探索アルゴリズム。
リニアとは一直線という意味。探索が片方からもう片方へ一直線に進んでいくイメージ。
検索エンジンで使われている。
探索効率はそれほど良くない。


### 例

#### 対象データと探す値

以下の配列から5という整数データが入っているかを探す。

```php
$array = [4, 2, 3, 5, 1];
```

#### フローチャート


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2733055/f0c94493-f474-1758-4309-abafc92af027.png)
aws-amplifyで仮パスワードを更新する

# はじめに
つまったので共有
公式ドキュメント分かりづらくない？？？

# 環境
```:モジュール等
Nuxt3 3.10
aws-amplify 6.3.2
@aws-sdk/client-cognito-identity-provider 3.577.0
```

# 背景
管理者ユーザーが自身の組織に一般ユーザーを追加するようなユースケースを想定して、ユーザー追加機能を実装していた
1. 管理者が一般ユーザーの名前やメールアドレスなどを入力し、ユーザー追加を実行
1. 裏で`aws-sdk`の`AdminCreateUserCommand`を実行
1. 成功すると、対象ユーザーのメールアドレスに仮パスワードが送信される
このとき、Cognito上で対象ユーザーの確認ステータスは`パスワードを強制的に変更`となっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177673/a94cd846-3372-b6f6-7362-e1e731de1f55.png)

1. 追加されたユーザーが仮パスワードとメールアドレスでログインする
ここで、ログインには`aws-amplify`の`SignIn`を使っている
1. 確認ステータスが`パスワードを強制的に変更`のユーザーが仮パスワードでログインした際、`SignIn`の返り値として`nextStep.signInStep: "CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED"`が返される
この段階ではログインできておらず、仮パスワードを更新する必要がある

# 詰まりポイント
[公式ドキュメント](https://docs.amplify.aws/vue/build-a-backend/auth/connect-your-frontend/sign-in/)を見たところ、以下の記載があった
> The signIn API response will include a nextStep property, which can be used to determine if further action is required. It may return the following next steps:
>
> CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED - The user was created with a temporary password and must set a new one. Complete the process with confirmSignIn.

ここで「ほむ、`confirmSingIn`で処理すればいいんだな」と思い公式ドキュメント内を探すが、`confirmSingIn`について書かれているページが見当たらず...
辛うじて見つけた[こちら](https://docs.amplify.aws/vue/build-a-backend/auth/concepts/multi-factor-authentication/)も、結局仮パスワードの更新については書かれておらず...

このページだと、どの例でも`challengeResponse`を引数に渡してるのでとりあえず以下で書いてみるも当然エラー...
```typescript
await confirmSignIn({
  challengeResponse: newPassword
});
```

# 解決
`confirmSignIn`の引数の型を見てみたところ、`options`に結構いろいろ書けるみたい
そこで以下のように書いてみたところ、通った
```typescript
await confirmSignIn({
  challengeResponse: newPassword,
  options: {
    ChallengeName: "NEW_PASSWORD_REQUIRED",
  },
});
```
`options`に`ChallengeName`を指定できるようでした。
公式ドキュメント読んでも全く分からなかった...

書いてて気づきましたが、もしかして`CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED`って`WITH_`の後を`ChallengeName`に入れたらいいよって意味なのか？
だとしたら初見殺しすぎないですかAWSさん... orz

# おわりに
公式ドキュメントもうちょい読みやすくして～～～
あと、記事等を調べてもGen1の頃の記事が多く、Gen2の記事が全然見当たらなかったのもつらかった
(結構APIが変わってるので、Gen1の記事があんまり参考にならない)

もし`options`に指定できる値一覧とかをドキュメントから見つけたら教えて頂けるとありがたいです :cry: 
また、`aws-amplify`の記事をGen1で書かれていた方はGen2版も書いて頂けると私が泣いて喜びます :joy: