OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS re:Invent 2024】ゆっくり学ぶには Content Hub が最適かもしれない

# はじめに
現地時間2024/12/3(火)はre:Invent2024 2日目！
先週土曜（2024/11/30）に日本出国して時差の兼ね合いもあり、今日が2日目ということが信じられません:thinking:

初日は3万歩を記録したので、足がプルプルと震えてしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/8740cddc-31fb-373b-97a2-590d124c170d.png)

2日目もこの歩数を記録するのはしんどい、、、と思っていたところ、「Content Hub」という場所があったので紹介します！現地参加者の人は参考にしてください！

# 自分のペースで学べる Content Hub
各ホテルの会場には「Content Hub」と呼ばれる場所があるようです。

![1000000455.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/2a311deb-5779-39a2-53e2-14e6211386c1.jpeg)


その奥には「Self-Paced Training」があり、PCとモニターの1セットが数多く配置されていました。
![1000000580.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/178d524e-3a73-51c2-c9ab-add2e5e3847b.jpeg)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/9303fc38-af44-b4b5-8190-079bb6c4f763.png)
私が滞在した時間帯は満席になることはないものの、多くの人たちがもくもくと勉強している姿が見られました。


ここでは、[AWS Bulder Labs](https://aws.amazon.com/jp/training/digital/aws-builder-labs/)、[AWS SimuLearn](https://aws.amazon.com/jp/training/digital/aws-simulearn/)、 [AWS Jam](https://aws.amazon.com/jp/training/digital/aws-jam/)が体験できるコンテンツが用意されていました。


![1000000476.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/59324d66-9b0b-9197-adb3-7d3ca6e834f7.jpeg)


https://aws.amazon.com/jp/training/digital/aws-builder-labs/

https://aws.amazon.com/jp/training/digital/aws-simulearn/

https://aws.amazon.com/jp/training/digital/aws-jam/

# 時間制限なく、もくもくと勉強できた
私がいた時は混雑していなかったのもあるかもしれないですが、場所の時間制限があることは言われなく、もくもくとAWS Jamに没頭することができました！

近くにソリューションアーキテクト（SA）らしき人もいたので、分からない部分などがあれば質問できる環境のようでした。

AWS Jamと聞くとグループのチーム戦、というイメージがあり足を引っ張りそう、、、re:Inventでは海外の方と一緒になることもあるので、更に避けがちになるかと思います。
Content Hub では自分のペースで進めることが出来るので、試してみたい！という人はまずはここでチャレンジしてみるのも良いかもしれませんね。

また、AWSを使いだしたばかりでまずは基礎的な部分から学んでいきたい、という人もまずはここでゆっくりと勉強するのも良いかもしれません。

# このコンテンツは現地参加者限定のものらしい
この記事を書いていて、「もしやこのコンテンツはオンラインで誰でも参加出来るのでは？」と思いましたが、現地参加者限定のもののようでした。少し残念。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/b9d516b1-03b0-8f06-ed31-55931ba5da37.png)


# ちなみに椅子が良い
椅子が柔らかく、長時間座ってお尻が痛くなりにくかったです。
認定者ラウンジにある椅子よりも快適だった気がします:smiley:

![1000000488.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2822205/8721c4b9-02ac-d4b1-4164-f0ca0ef8f7c4.jpeg)

椅子が良いとはいえ、Content Hub はもくもくと学習を進める場所なので、自社業務は認定者ラウンジなど別の場所で行なうようにしたいですね

# 弊社では一緒に働く仲間を募集中です
現在、様々な職種を募集しております。
カジュアル面談も可能ですので、ご興味のある方は是非ご連絡ください！

募集内容等詳細は、是非採用サイトをご確認ください。
https://engineer.po-holdings.co.jp/
Error と Exception の違い、知ってますか？

# はじめに
記事を見てくださりありがとうございます！
@HayatoHanaoka と申します。
今回は`Error`と`Exception`について新しい学びがありました。
`java`や`kotlin`といったjvm系言語をメインで扱っている人からすると、「当たり前の内容じゃん？」と思うかもしれません。
ただ、筆者は今回のプロジェクトで初めてjvm系言語を扱ったので、新しい学びでした。
備忘録がてら残そうと思います。

# 何があったのか？
以下のコードを見た社内のとあるエンジニアの方から、とあるご指摘をいただきました。
```example.kt
class ExampleUseCase(private val examplePort: ExamplePort) {
    fun example(resouceId: ResourceId): Resource {
        // リソースを取得しにいき、なければエラーとする
        val result = examplePort.getResource(resourceId) ?: throw Error("Couldn't get resource")
        return Resource(result)
    }
}
```
👨 **「どうしてエラーを投げてるの？」**
👨 **「ここで起こるのは、リソースが取れなかった という 例外 だよね」**

これを聞いた時、恥ずかしながら「え？何が違うんだ...？」となってしまいました。
皆さんはこの違いを認識できますか...？

# 何がよくなかったのか？
jvm系の言語は、以下の階層構造で`throwable`を持っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2449619/3cb7ee28-df78-70ae-fadf-c88922a6304b.png)
引用元：

https://www.tohoho-web.com/java/exception.htm

この違いを全く認識しておらず、今回は処理上発生するエラーに `Error` を割り当ててしまっていたのがよくなかったのですね。

# どう修正するのが適切か？

これを踏まえてコードを修正すると、以下のようになります。
```diff_kotlin
class ExampleUseCase(private val examplePort: ExamplePort) {
    fun example(resourceId: ResourceId): : Resource {
        // リソースを取得しにいき、なければエラーとする
-         val result = examplePort.getResource(resourceId) ?: throw Error("Couldn't get resource")
+         val result = examplePort.getResource(resourceId) ?: throw IllegalArgumentException("IllegalArgumentException: $resourceId is illegal")
        return Resource(result)
    }
}
```

# 最後に
適切なエラーや例外をハンドリングして返すことは意外と難しい。
エラーハンドリングの際は、公式Docs等でエラーの種類などを事前に調査して、適切に扱えるよう注意しようと思います。
GoのHTTPサーバー入門

GoのHTTPサーバーのいろいろなパターンについて紹介します。

コード：https://github.com/tkeshun/http-server-explain

### 基本的なHTTPサーバー

パスに対応した処理が行われるように関数を登録します。
以下例では"http://<ホスト名>:8080/"にアクセスしたとき紐付けられた関数が実行されます。
関数はHandleFuncの引数に定義された`func(ResponseWriter, *Request)`型にマッチすれば引数として渡すことができます。

```golang
package main

import (
	"fmt"
	"net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello, World!")
}

func main() {
	http.HandleFunc("/", handler) // DefaultServeMuxにパスと対応する処理が登録される
	http.ListenAndServe(":8080", nil)
}
```

### ライブラリのHTTPリクエストマルチプレクサを使ってHTTPサーバーを組み立てる方法

前項のコードの場合、何も指定していないため、`DefaultServMux`というHTTPリクエストマルチプレクサが使用されている。

HTTPリクエストマルチプレクサは自分で変数宣言して使うことが可能である。

`http.NewServeMux()`で新たなマルチプレクサを作れる。

```golang
package main

import (
	"fmt"
	"net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello, World!")
}

func main() {
	mux := http.NewServeMux()
	mux.HandleFunc("/", handler)
	// マルチプレクサ(handler)を登録する必要がある
	// 登録する場合、第一引数のポート番号と第２引数のhandlerがServer構造体に登録された上で、ServerのListenAndServeメソッドが実行される
	http.ListenAndServe(":8080", mux)
}
```

### Handlerを自分で実装するパターン

今までのコードでは、予め内部で実装済みのServeHTTPメソッドが呼び出されていた。
http.Handlerインターフェースを実装した構造体を用意することで、中身の処理を自身で記述できるようになる
以下の例では、　フィールドなしの構造体を定義して、ServeHTTPメソッドを実装している。
http.Handle()はhttp.Handlerインターフェースを満たす構造体を要求するので、ServeHTTPを実装し、http.Handlerインターフェースを満たすことで引数に渡すことができるようになる。
カスタムハンドラーはこのあと紹介するミドルウェアパターンで役に立つ。

```golang
package main

import "net/http"

type CustomHandler struct{} // anyだとエラーになる

// http.Handlerのインターフェースを実装する
func (h *CustomHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	w.Write([]byte("Custom handler\n"))
}

func main() {
	handler := &CustomHandler{}
	// DefaultServeMuxにカスタムハンドラーを登録する
	http.Handle("/", handler)
	http.ListenAndServe(":8080", nil)
}
```

### ミドルウェアパターン

http.Handlerをラップすることで、ラップされるハンドラーの前後に処理を追加することができる 入れ子に組み合わせることで複数のミドルウェアを組み合わせられる。
これをミドルウェアパターンという。
ここでは、middlewareでhttp.Handlerをラップしている。
関数の中で`next.ServeHTTP(w, r)`を呼び出すことで、本来実行されるはずだったServeHTTP関数を実行しつつ、引数のハンドラーが実行される前後に処理を挿むことができる。

以下が処理の流れの図。

![middle.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462734/bde24008-b5f8-9979-10c1-71d0431ce4e4.png)


```golang
package main

import (
	"fmt"
	"net/http"
)

func handler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello, World!")
}

func middleware(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		fmt.Println("ラップする処理の前に実行される")
		next.ServeHTTP(w, r)
		fmt.Println("ラップする処理の後に実行される")
	})
}

func main() {
	mux := http.NewServeMux()
	mux.HandleFunc("/", handler)
	mux.Handle("/middleware", middleware(http.HandlerFunc(handler)))

	// マルチプレクサ(handler)を登録する必要がある
	// 登録する場合、第一引数のポート番号と第２引数のhandlerがServer構造体に登録された上で、ServerのListenAndServeメソッドが実行される
	http.ListenAndServe(":8080", mux)
}
```

### まとめ

GoのWebサーバーの使い方の基本を紹介した。
リポジトリにある他の使い方もそのうち紹介する。
+page.svelteの型の再利用のアイデア

## 前提
- デザイナーはTypeScriptに詳しくない
- リリース後の運用（UIの変更など）をデザイナーが行う

## +page.svelte
SvelteKitではroutesディレクトリ配下に`+page.svelte`を配置するとページを作成することができます。

また、`+page.svelte`はただのSvelteコンポーネントなので他のファイルから`import`することができます。
この記事はそれを利用してみる内容となっています。

## 特定のページでしか使用しないコンポーネント
今回例としてLPのようなページを考えます。このLPは他のページと完全に独立しています。
また、`lp/_components/`に配置した`Posts.svelte`や`lp/+page.server.ts`は`lp/+page.svelte`でしか使用しないものとします。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/c8f34c33-afa8-e670-fbd0-fa9345ca5f82.png)

このような状況ではlpディレクトリの近くに`Posts.svelte`を置くのがいいと考えています。
今後共通で使用することがないとわかっている、かつ他で使って欲しくないコンポーネントを離れた別の場所に置きたくないためです。

この状況下では`Posts`コンポーネントの`props`に関しても
```
+page.server.ts -> +page.svelte -> Posts.svelte
```
と流れてくる以外ないので、`Posts.svelte`コンポーネントの`props`の型も`+page.svelte`から持ってきてしまってよいでしょう。

つまりこうです。

```svelte: Posts.svelte
<script lang="ts">
	import type { ComponentProps } from 'svelte';
	import type Page from '../+page.svelte';

	type PageDataPosts = ComponentProps<typeof Page>['data']['posts'];
	let { posts }: { posts: PageDataPosts } = $props();
</script>
```

`+page.server.ts`は以下です。
```ts: +page.server.ts
declare const __brand: unique symbol;
type BrandedType<T, B> = T & { [__brand]: B };

type PostId = BrandedType<number, 'id'>;
type UserId = BrandedType<number, 'userId'>;

type Post = {
	id: PostId;
	title: string;
	body: string;
	userId: UserId;
};

type PageServerData = {
	posts: Post[];
};
export const load = async (): Promise<PageServerData> => {
	const posts = await fetch('https://jsonplaceholder.typicode.com/posts/').then(
		(response) => response.json()
	);
	return {
		posts: posts.slice(0, 10),
	};
};
```

`Post`型の`id`や`userId`にはBrandedTypeを使用しておりかつその型を`export`していないので、
今後例えば`Posts.svelte`を拡張した`XXXPosts.svelte`を「TypeScriptに詳しくないデザイナー」が作成した時に既存の`Posts.svelte`の`props`を見に行くように誘導できるので少し安心です。

また、`Posts.svelte`の`props`に`+page.svelte`の型を使用することによって、このコンポーネントが`+page.svelte`のデータを表示することを明示できました。

## まとめ
このような使い方をする機会はあまりないと思いますが、`+page.svelte`の型の再利用や`+page.svelte`をStorybookで表示するなどのテクニックとして覚えておいて損はありません。

個人的には`+page.svelte`や`+layout.svelte`に色々書きすぎるとStorybookでの表示やテストの時にしんどくなると思っており、`Page.svelte`や`Layout.svelte`コンポーネントを作って`+page.svelte`はそのページの`Page.svelte`を読み込んでいるだけ、`+layout.svelte`は極力使用しない　という選択肢もありだと思っています。

この記事はこういうこともできるよ　というアイデア、知識として読んでもらえればと思います。
最後まで読んでくださりありがとうございました！

みなさんのちょっと変わったSvelteKit、Svelteの使い方の記事も読みたいのでぜひ書いてください🙏

### ページやソース
- [ページ](https://svelte5-examples.pages.dev/lp)
- [ソース](https://github.com/shamokit/svelte5-examples/tree/main/src/routes/lp)
[翻訳投稿] Apple公式サイトのアニメーション分析 (第1回: スクロール同期)

---

- [もっと多くのテック関連の記事を読みたいですか？](https://devblogeasyoon.xyz/blog)
- [記事の元リンクはこちら](https://devblogeasyoon.xyz/blog/apple-website-animation-analyze)

---

# Apple公式サイトのアニメーション分析 (第1回: スクロール同期)

Apple公式サイトでは、スクロールに反応する滑らかなアニメーションを活用して、コンテンツを際立たせています。本記事では、同様のアニメーションを実装する方法を分析し、再現してみます。

---

## 🎥 Apple公式サイトの元動画
<video width="481" alt="apple-website-animation" src="https://github.com/user-attachments/assets/839c0512-325b-4c81-bc5d-7429bd8bb2e9" controls />

## 📜 修正版の実装手法

### 1. スクロール同期
- スクロール位置 (`scrollY`) を基準に、アニメーションの状態をリアルタイムで計算します。

### 2. 双方向アニメーション
- **スクロールを下方向に動かす場合**: テキストが上に移動して消え、動画が縮小されます。
- **スクロールを上方向に戻す場合**: テキストが再び下に現れ、動画が拡大されます。

### 3. CSSプロパティの活用
- `transform: translateY` と `scale` の値をスクロール位置に応じて動的に計算します。
- アニメーションが滑らかに動作するよう、`requestAnimationFrame` を使用します。

---

## 🔧 HTML構造

HTMLはテキストと背景動画を簡単に組み合わせた構造になっています。

```html
<div class="container">
  <div class="text-section">
    <h1 class="text">革新的なデザイン</h1>
    <p class="subtext">Appleの新たな次元を体感してください。</p>
  </div>
  <div class="video-section">
    <video class="background-video" autoplay muted loop>
      <source src="example-video.mp4" type="video/mp4" />
    </video>
  </div>
</div>
```

## 🎨 CSSスタイリング

スクロール位置に応じた滑らかなアニメーションを実現するためのCSS設定です。

``` css
/* テキストセクション */
.text-section {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
  color: white;
  z-index: 2;
}

.video-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.background-video {
  width: 100vw;
  height: auto;
}

```

---

## 🎬 JavaScript (スクロールに比例するアニメーション)

スクロール位置に基づいてテキストと動画の状態を計算し、スタイルをリアルタイムで更新します。

``` javascript
const textSection = document.querySelector(".text-section");
const videoSection = document.querySelector(".video-section");

function handleScroll() {
  const scrollY = window.scrollY;
  const windowHeight = window.innerHeight;

  const textOpacity = Math.max(0, 1 - scrollY / (windowHeight / 2));
  const textTranslateY = Math.min(scrollY / 2, 100);

  textSection.style.transform = `translateY(-${textTranslateY}px)`;
  textSection.style.opacity = textOpacity;

  const videoScale = Math.max(0.5, 1 - scrollY / (windowHeight * 2));
  videoSection.style.transform = `scale(${videoScale})`;
}

window.addEventListener("scroll", () => {
  requestAnimationFrame(handleScroll);
});
```


---

## 🖥️ 主な動作の説明

1. `scrollY`に基づく計算

- `textOpacity`: テキストの透明度をスクロール位置に応じて徐々に減少させます。

- `textTranslateY`: テキストが上方向に移動する量をスクロール比率で計算します。

- `videoScale`: 動画の縮小サイズをスクロール位置に基づいて調整します。

2.`requestAnimationFrame` 

ブラウザのアニメーション性能を向上させ、滑らかな動きを提供する非同期関数です。

3.双方向の動作
- スクロール下方向: テキストは上に移動して消え、動画は縮小します。
- スクロール上方向: テキストは下に戻り再び現れ、動画は拡大します。
テストコンディションにはどんなものがある？

## テストコンディションとは

JSTQBの用語集によると、
「テストのための根拠となる、コンポーネントやシステムのテストが可能な一部分。」
とあります。ンディションという言葉には、日本語で複数の意味があるため、
理解が難しい用語ではないかと感じています。今回は、組み合わせテストで使う
条件となるようなものをイメージして、まとめます。


## 組み合わせテストで使う
では、組み合わせテストに使うテストコンディションには
どういうものがあるでしょうか
- CRUDの発生するアイテムで考える
- 分岐条件で考える
- 時系列ごとのイベントとそれにまつわる条件で考える
- 動作環境などの、使用条件で考える
- ユースケースで考える
- エンティティのライフサイクルで考える
- 過去の不具合例で考える
などなど

こうした考えをまとめるのに便利なのは、マインドマップの出番です。
（マインドマップについての記載も、後日載せたいとおもいます。）

また、複数のペルソナや、６W２Hの考え方も役に立ちます。
ラルフチャートやいじわる漢字など、深い考察に便利なものもあります。

UMLのユースケース図なども助けになります。
テストコンディションの洗い出しに、これだけさまざまなツールがあるのです。

不具合分析をしていると、バグ全体の3割程度が組み合わせテストに該当することが多いです。チーム・製品によっては6割になることもあります。
これらの不具合を削減したい場合、テストコンディションの見直しとテンプレート化は効率的な手段になるでしょう。

ただし、テンプレートは備忘録として優れていますが、条件は常に変動するものなので、過信は禁物ですね。


### 用語解説

#### ６W２H
「When（いつ）」
「Where（どこで）」
「Who（だれが）」
「Whom（だれに）」
「What（なにを）」
「Why（なぜ）」
「How（どのように）」
「How much（いくらで）」
などの視点から、処理や仕様を考えることによって、
気づかなかったことをみつけたり、抜け漏れの防止をします。

#### ラルフチャート
処理のフローに、例外的な要素を絡めたりして、アウトプットを考えるチャート。
私は、基本の処理に例外パターンを掛け算のようにからめて考えています。

https://note.com/akiyama924/n/n00c7bf1ec258


#### いじわる漢字
漢字をヒントに、テストケースを探すチャート。
探索的テストのヒントにも。

https://note.com/kataruyube/n/nf6b550cbe7bd
（下の方に載っています）
VPC Lambda  覚書

# 概要
- 「VPC Lambda」という名称は正式なAWSサービスではない
- 一般的に、Lambda関数でVPC内のリソースにアクセスする方法を指して「VPC Lambda」と呼ぶことがある

# Lambda関数でVPC内のリソースにアクセスするとは？
### Lambdaはリージョンサービス
- アーキテクチャの例として「API Gateway → Lambda → DynamoDB」のような構成の場合、いずれもリージョンサービスなのでLambdaをVPC内に配置する必要はない

### VPC内のリソースにアクセスしたい場合
- Lambda関数をVPC内で使用できるように設定する必要がある
- Lambdaの設定画面で以下の設定を行う
  - VPC、サブネット、セキュリティグループの紐づける
  - VPCおよびアクセスしたいVPC内のリソースへのアクセス権限をIAMロールとして設定する

# VPC Lambdaによる外部通信が必要な場合
- Lambdaをプライベートサブネットに配置した場合、外部との通信にはNAT Gatewayが必要
- Lambda(プライベートサブネット）→NAT Gateway(パブリックサブネット）→インターネットという通信経路になる

# 【補足事項】
### VPC LambdaはVPCにあるけどVPCにはない？
- 上記の例ではプライベートサブネットにVPC Lambdaが配置されているという説明をした
- 実態はLambdaが配置されているVPCとユーザが作成しているVPCが分かれており、NAT機能をつかって接続されているらしい

### VPC Lambdaがスケールした際のIP枯渇の心配
- VPC Lambdaがスケールした際、VPC内のIPアドレス枯渇が心配になる
- Lambda側のVPC内でLambdaがスケール後、ユーザが作成したVPC内に新たにENIを作成するのではなく、NAT機能を用いて通信を集約することでプライベートIPの枯渇を防ぐ作りになっているとのこと
- Lambdaスケール時のIP枯渇は考慮されているものの、VPC設計のタイミングでそれらを踏まえて必要なIPアドレス数を見積もることが必要

### 補足事項の参考資料
- 補足事項についての詳細は以下のAmazon Web Serviceブログ記事を参照してほしい
- https://aws.amazon.com/jp/blogs/news/announcing-improved-vpc-networking-for-aws-lambda-functions/
いいね👍を貰うためにやっていること

## お久しぶりです
### こんにちは！！[タコライス太郎](https://qiita.com/takoraisutaro)です！
前回の記事からだいぶ期間が空いてしまいました😞
実は[and factory株式会社](https://qiita.com/organizations/andfactory)に転職しておりました！
そして早速本編行きましょう！！

## せっかく記事投稿をするならいいねが欲しい
こんなことはありませんか？
- ネタはあるけど投稿する気が起きない
- 記事投稿する時間が無い
- 投稿したのに全然見てもらえない😭
- 誰も見てくれないからやる気が出ない。。

それら全てを解決するのが
### いいね👍
です。

いいねをもらっても何も感じない。
記事投稿を始めたての頃はそう思ってました。
しかし！いいね👍が段々増えていき、デイリーランキングで1位を取った時は

**めっちゃ嬉しかったです**

そしてまた書こうという気持ちになれます。
ということで今回はいいね👍を貰うために私がやっていることをお伝えします！！！！！

## いいね👍のための４つのポイント❤️
1. [内容(大事じゃない)](#1-内容(大事じゃない))
1. [タイトルについて](#2-タイトルについて)
1. [構成について](#3-構成について)
1. [文章について](#4-文章について)

### 1. 内容(大事じゃない)
**内容はそんなに大事ではありません！！**

とにかく記事を作り上げるという**成功体験**の方が大切です。
悩んでしまったら誰かの記事をパクって自分なりに分かりやすいものにするのでもOKです。

https://qiita.com/Sicut_study/items/7b74b2dc832ffcce6b11

**宝くじを買わないと当選することはないのです😇**

### 2. タイトルについて
**⚠️ここはかなり大事です⚠️**

何となく分かりやすそう、なんか面白そうだな、と思ってもらえることが大切です。
ちょっと変なタイトルにすると目に止まりやすいです。
**過去に作った記事は[こちら](https://qiita.com/takoraisutaro)**

捻りのないタイトルだとそもそもクリックされません

😡「**シンプルな名前でも人気の記事あるじゃん！！**」と思われるかもしれません。
もちろんそんなことは分かっております。それは内容が大変素晴らしい場合です。
良い記事は小細工をしなくても自然といいねが付きます。

:::note warn
イケメン・美女がモテることと同じです。
**あなたはイケメンでしょうか？普通の人がモテるためには多少の努力が必要なのです。**
:::

モテるためにまず、
**適当でもいいので数パターン考え文字に起こしてみましょう**

例えばですがこの記事のタイトルを何パターンか出してみたので解説してみます。
1. **記事投稿のコツ**
    こんなタイトルではダメです。これでモテるのはイケメンだけです。
    <br>
1. **卍記事投稿・最強の技卍**
    昔のMMOみたいで僕は結構好みですが、読者が会社にいる場合などは若干クリックしにくいかなと思います。あと、ふざけすぎ感もあります。
    <br>
1. **デイリーランキング1位が取れる記事**
    記事を見ていただくところまではいけそうですが、内容が伴わないとただの詐欺広告なのであまりよろしくなさそうです。
    <br>
1. **デイリーランキング1位を取った記事の話**
    これは結構良さそうですが今回の記事の趣旨は「いいねを取るための方法」となります。
    タイトルと内容の乖離が若干あるため不採用にしました。
    <br>
1. **いいね👍を貰うためにやっていること**
    今回はこれにしました。記事がザッと並んでいると絵文字は目に止まりやすいです。
    また後述する**キーワード**が使えており今回の記事とマッチしてます。
    <br>
1. **いいね👍を貰うために考えていること**
    こっちにするか悩んでおりました。
    やっていることの方が具体的な感じが出て気楽に記事を見てもらえるかと思い不採用にしました。
<br>
個人的にいいタイトルだなぁと思ったものを上げておきます。

https://qiita.com/segfo/items/59706ec9abacae367bd3

↑「祝日計算ってそんなに難しいの？🤔」と想像が引き立てられるとても良いタイトルです。

https://qiita.com/ymgc3/items/0ff50180035e6f4906d4

↑タイトルを見ただけで記事の内容が想像でき分かりやすそうですね。

### 3. 構成について
僕はここで地味に時間がかかります😭
基本的に以下の流れです。

1. 伝えたいことをざっくりまとめる
1. 話の流れを決める
1. 全体の構成を考えて大見出し、小見出しを決定する

ある程度書き進めてから記事が面白くなさすぎて最初から構成を変えることはかなりあります。
この記事も3回ほど壊しました。
創造と破壊を繰り返すと話の流れに引っ張られて伝えたいことが歪んでしまうことがあるので注意⚠️です。

最初からフォーマットを決めて文章を当てはめていくのも良いのですが、どちらかというと記事を量産するやり方で1つの記事のクオリティを上げるのには適してないかと思います。
<br>
↓こちらの記事ではたくさん書くためのフォーマットなどについて触れられているので参考になるかと思います❤️

https://qiita.com/Sicut_study/items/f31cdf9b19756238936b

### 4. 文章について
以下の3点だけ意識しております。
- 読みやすさ
- 面白さ
- 特徴的

**読みやすさ**の点ではざっとこの記事を読んでみていかがだったでしょうか
見出し、行間、絵文字のバランスに気を使ってます。
文字が多くなってしまう場合はNoteや太字を適当に入れるだけでもかなり変わります😄

ためになる記事でも文字がぎっしりで読みにくかったら嫌ですよね。
いいね👍は逃げてしまいます。

**面白さ**は大切です。
しょうもない内容でも面白かったらOKです！となることは結構あります。

また**特徴的**ということについては、キーワードを何回も入れて印象に残ってもらえるようにしてます。

:::note info
今回の記事では「いいね👍」です。
:::

<br>
↓こちらの方の記事はとても参考になると思います。<br>
記事自体がアイコニックな形式になっていてタイトルを見ただけで誰か分かるようになっております。

https://qiita.com/Yametaro/items/742dd0e5aab6b04450d1

## 最後に
久しぶりの記事投稿で思ったより作るのに時間がかかってしまいました。
自分の考えを整理するのって意外と大変ですよね。

**いいね👍、ストックしていただけたら嬉しいです。**
アカウントが無い方は心のいいね👍を押してください

**感謝します🙏**
コンピュータービジョンに関連する最近のLLM

画像生成などコンピュータービジョンに関するLLMの論文を3つ紹介します。

[1. 器用な画像生成モデル「OmniGen」](##器用な画像生成モデル「OmniGen」)
[2. 質の高い3Dアセットの生成](##質の高い3Dアセットの生成)
[3. ドラッグすることで画像を編集する技術の発展](##ドラッグすることで画像を編集する技術の発展)


## 器用な画像生成モデル「OmniGen」
### OmniGen: Unified Image Generation
画像生成の領域では、様々なタスクを単一のフレームワークで処理できるモデルはまだほとんど開発されていませんが、「OmniGen」は次のように1つのモデルで様々なタスクを実行できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/37350170-3aef-611e-c45e-b076a217e8e8.png)


具体的にはこのようなタスクが対象です。

:::note
- Text to Image: 文章から画像の生成
- Reasoning: 推論
- Subject-Driven: 主題に合わせた画像の合成
- In-Context Learning: 文脈の理解
- Visual-Condition: 視覚効果の変化
- Step by Step: 徐々に画像を変える
- Image Editing: 画像編集や画質の変更
:::

こちらの図を見るとより分かりやすいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f311f4b9-f7eb-357e-868d-4f00922c5954.png)


## 質の高い3Dアセットの生成
### 3DTopia-XL: Scaling High-quality 3D Asset Generation via Primitive Diffusion

**3DTopia-XL**という拡散モデルによって高品質な3Dアセットができます。こちらに関してはYouTubeやHugging Faceでデモを見るのが早いです！

https://youtu.be/nscGSjrwMDw

https://huggingface.co/spaces/FrozenBurning/3DTopia-XL

得られる3Dアセットは滑らかなジオメトリだけでなく外部の環境を反映するテクスチャやマテリアルを持たせることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/21b259a3-ad47-78cc-440d-b8ff8851c545.png)



## ドラッグすることで画像を編集する技術の発展
### InstantDrag: Improving Interactivity in Drag-based Image Editing

[**DragGAN**](https://github.com/XingangPan/DragGAN)に代表されるドラッグ操作による画像生成、つまり再編集の技術がさらに発展しました。

https://youtu.be/oGGTC0Gmplw

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/aae4b951-ce99-7535-3721-0a9a42200c04.png)

近年の技術では、1秒以内にテキストから画像を生成することができる一方で、ドラッグ操作による生成は画像の内容を維持しながら変更点だけ正確に反映するために時間がかかってしまいます。
韓国のチームが開発した**InstantDrag**は、既存の技術で使われていた画像ごとに最適化する手法を必要としないパイプラインによって処理速度を高速化しています。

プロンプトやマスクを入力データに使わずに**1.1秒**ほどで生成できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/986141/f45d1370-cee1-104c-354a-309b4c27a6a3.png)


## 参考
### 各arXiv論文はこちらです。

- OmniGen: Unified Image Generation

https://arxiv.org/abs/2409.11340

- 3DTopia-XL: Scaling High-quality 3D Asset Generation via Primitive Diffusion

https://arxiv.org/abs/2409.12957

- InstantDrag: Improving Interactivity in Drag-based Image Editing

https://arxiv.org/abs/2409.08857
SIPRECについて

# SIPRECについて
## 前書き
知ったことを振り返る用のメモ書きです。
わかったことを随時追記していきます。
有識者の意見は常に募集中です。

## 参考ページ
[オラクルのページ](https://docs.oracle.com/cd/E95618_01/html/sbc_scz810_monitoring/GUID-BA6A47DB-7691-4709-9E5A-6D2AED5ABD91.htm#GUID-1C45CF10-E01E-4D25-A166-DEBACE3B3974)
[RFC 6341の翻訳ページ](https://tex2e.github.io/rfc-translater/html/rfc6341.html])　([RFC6341の原文](https://datatracker.ietf.org/doc/html/rfc6341))

## 用語
### SRS
Session Recording Serverの略。セッション記録サーバー。
録音データを記録しておくところ(っぽい)

### SRC
Session Recording Clientの略。セッション記録クライアント。
SRSの送信元？
スタンダードロードサイクルではない。
SRCは
| 対象                                                                | 身近なもの           |
| ------------------------------------------------------------------- | -------------------- |
| 個人用デバイス(SIP電話等)                                           | 携帯電話やPBXの内線 |
| SIPメディアゲートウェイ(MG)                                         | CiscoのGWやMediant？ |
| セッションボーダーコントローラー(SBC)                               | CiscoのGWやMediant？ |
| アプリケーションサーバー（AS）と統合されたSIPメディアサーバー（MS） | PBXのサーバー？     |

を包括して呼称する(っぽい)

### MG
SIP Media Gatewayの略。SIPメディアゲートウェイ。

### SBC
Session Border Controllerの略。セッションボーダーコントローラー。
スタンダードベンチサイクルではない。

### AS
Application Serverの略。アプリケーションサーバー。

### MS
SIP Media Serverの略。SIPメディアサーバー。
マイクロソフトではない。

### SIP
Session Initiation Protocolの略。セッションイニシエーションプロトコル。
電話の発信、着信、応答、切断の呼制御を行う。

### CS
Communication Sessionの略。通信セッション。
録音の主題である2つ以上のSIPユーザーエージェント（UAS）の間で作成されたセッション。

### RS
Recording Sessionの略。記録セッション。
通信セッションを記録する目的で、SRCとSRSの間に作成されたSIPセッション。

## おわりｽﾞｲ₍₍ (ง ˘ω˘ )ว ⁾⁾ｽﾞｲ
MySQLインストール失敗(2025/02/02解決)


# 解決方法(2025/02/02追記)
自己満足的に残しておきますが、問題とか下の部分は見る意味がないです。


:::note warn
この記事が参考になるかもしれない方はMySQLをインストールしようとした際に、

・Initilizing Databaseでエラーになってしまった方
・再度executeしてStarting Serverでエラーになってしまった方
・上記どちらかの条件でWindowsの設定を開いていただき、**PC名が日本語名**になっていた方

が対象になります。
そうでなかった場合は別の手順が必要になると思うので、
別の記事を参考にしてください。
:::

### 手順(1,2は既に行っていたらスキップしてください)
1. インストール画面を閉じる
2. MySQLをアンインストールする(参考：https://qiita.com/NakanakaPierrot/items/cbc075c6f4de7b34886b)
3. PC名を英数字のみに変更する
4. 表示される指示通りに再起動する
5. インストールしなおす

これで私の場合はInitializing Databaseで止まらずに、そのままｍその後のStarting Serverも成功することができました。

### メモ
以前記載していませんがApply Configurationで1回目のexecuteの際に毎回、Initializing Databaseでこけていました。
ここがポイントだったようで、設定のホームに表示されるPC名が日本語だったことが原因でした。
記載していなかった理由としては再度executeするとそのまま先に進んでいったため、気には留めつつも進むなら問題ないだろうと考えていたのですがここが肝だったようです。
違和感を見逃すべきではありませんでした。✞懺悔✞




# 問題
MySQLのインストールで引っかかった。
何度かExecuteをしてみたが駄目だった。
毎回Starting the serverで引っかかっている。

Configuration Stepsタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2639479/58c64953-00bd-47c9-9ea9-8193603796db.png)

Logタブ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2639479/399fe884-80dd-2e45-a5a2-c768d83c580c.png)

# 解決(できない)
https://takublo.net/mysql-install/
ダメでした。なぜ停止するのか。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2639479/8335180d-5a01-c4da-d1ec-fe1d29b089c2.png)

明日の私に任せる。

# メモ
Developer Defaultが最初の画面で出てこなかったり、Customでいろいろ足りなかったりと気になるところがほかにもあるので、どこかのタイミングで躓く予定です。

Developer Defaultがないときに出てきたyahoo知恵袋
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11287412431

この記事を参考にCustomを見てみたが、
・MySQL for Visual Studio
・「MySQL コネクタ」 (for .NET / Python / ODBC / Java / C++)
の2つがなかった。
数年後を見据えた技術戦略に向けて：私が受け取ったフィードバックとその学び

## はじめに
「数年後を見据えたときの技術課題ってなに？」と問われて、「〇〇です！」と即答できる方はどのくらいいらっしゃるでしょうか？私自身、日々の業務の中で「このコード、きついなあ」「1, 2年前と比べて、なんか状況違うな」と感じることはあっても、「じゃあ数年後のために何をするべきか？」となると、答えを見つけることができませんでした。

私も同じように、目の前のことに集中しがちで、長期的な視点を持つことに悩んでいました。いくら目の前の問題を解決しても、それが本当に未来に繋がるのか分からず、どこかモヤモヤを抱えていたんです。

この記事では、そんな私が開発責任者や上司たちからもらったフィードバックを通して、どうやって「数年後を見据えた技術戦略」を立てていったのか、そしてまだ道半ばではありますが、その過程で得た学びを共有しようと思います。戦略を立てる際の葛藤やその解決策を知りたいという方に、少しでも役立つ内容をお届けできたら嬉しいです。

---

## フィードバックの紹介とその学び

### 1. 現状把握と課題の具体化
技術戦略を立てる際には、現状を正しく把握し、解ける課題を具体的に見極めることが重要です。しかし、いろんな意見を聞いたり深く考えた結果、「これだ！」と思う課題に行き着いたものの、冷静になると課題が抽象的すぎて「結局、何が問題だったんだっけ？」となることがあります。こうなると、解決のための具体的な出口戦略が見えにくくなります。

そこで有効だと感じたのが、施策の良し悪しを測るための指標を先に決めることです。具体的な指標を定めることで、課題の抽象度が下がり、現実的な行動につなげやすくなります。また、原因分析を行う際も、単に原因をリストアップするだけではなく、クリティカルな要因を絞り込むことが必要です。これにより、曖昧な対策に時間を浪費することなく、効率的に問題解決へと向かうことができます。

---

### 2. 上位目標とプロダクトの展望との接続
課題を具体化した次のステップとして、それがどのように上位目標と繋がっているのかを考えることが重要です。技術的に優れた解決策であっても、上位目標との接続が不明確であれば、結果的に顧客価値に貢献することができません。

たとえば、技術的負債を返済する場合も、どの部分から取り組むことで顧客価値により大きなインパクトを与えられるのかを検討することが求められます。特定の技術的負債を返済することで、新しい機能の実装が容易になったり、パフォーマンスが向上したり、将来的なメンテナンスコストが削減されるなどのメリットがあります。こうした観点で戦略を上位目標と結びつけることで、単なる内部改善に留まらず、ビジネス全体に対して価値をもたらすことができます。

---

### 3. 帰納と演繹のアプローチのバランス
次に、課題の解決に向けてアプローチを考える際、帰納的なアプローチ（目の前の問題に少しずつ改善を加えること）だけでは限界があると感じました。もちろん、小さな改善を積み重ねることは重要ですが、それだけでは理想の状態にたどり着くことは難しいです。

そこで、理想から逆算して考える演繹的なアプローチも取り入れることが必要です。例えば、電球の寿命を延ばすためにフィラメントの材質を改善する（帰納的アプローチ）だけでは限界がありますが、「もっと長寿命でエネルギー効率の良い光源を作れないか？」という理想を掲げた結果、LEDという新しい技術が生まれました。こうして演繹的に理想から逆算することで、普段の改善作業では見つからなかった革新的な解決策が生まれることがあります。

---

### 4. 情熱と意志の重要性
そして最後に、どれだけ論理的に優れた戦略を立てても、実行に移し続けるためには情熱と意志が欠かせないことを実感しました。上司から「〇〇くんは、どれが一番やりたいの？」と問われたとき、私はハッとしました。

それまでは「正しさ」ばかりに意識が向いていましたが、自分が心から「やりたい」「やらなければいけない」と思えることに取り組むことで、困難に直面したときもその戦略をやり遂げる力が湧いてくるものです。情熱や意志があることで、周りのチームメンバーを巻き込むことができ、長期的な目標に向かうエネルギーを維持することができるのです。

---

## 私が学んだこと
これらのフィードバックを受けて、技術戦略を立てるときには次のことを意識するようになりました：

- **現状を正しく把握し、課題を具体化すること**で、行動に繋げる基盤を整える
- **上位目標とのつながりを明確にすること**で、戦略がビジネス全体に貢献するようにする
- **帰納と演繹のアプローチをバランス良く使うこと**で、現実的な改善と革新的な発見の両方を取り入れられないかを常に検討する
- **自分が情熱を持てることに集中する**ことで、戦略を実行に移すためのエネルギーを持続させる

---

## まとめ
技術戦略を考える中で、上司たちからもらったフィードバックを通して、多くの学びを得ることができました。現状把握、課題の具体化、上位目標との接続、理想からの逆算、そして情熱を持つこと。それぞれが技術戦略を立て、成功させるために欠かせないピースだと思っています。

私もまだまだ道半ばであり、この学びを完全に活かしきれているとは言えませんが、もらったフィードバックを受け入れ、改善を続けることで、より良いプロダクトづくりをしていきたいと思っています。
TypeScript 学習記録#3 (Next.jsの共通コンポーネントのpropsに型を付ける)

少しつまずいてしまったので忘れないように覚書

## Layout.tsxでの記述

eslintでの静的解析やIDE(学習環境はVSCode)によっては``children``が``any型``に型推論されてしまうため警告が出てしまうことがあり、一応無視しても問題なさそうだが気になるので修正していく。

```typescript
//propsとして渡したchildrenに対して警告が出る。
const Layout = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Layout;
```
:::note warn
警告:
バインド要素 'children' には暗黙的に 'any' 型が含まれます。ts(7031)
(parameter) children: any
:::

## 結論


```typescript
import React, { ReactNode } from "react";

interface Props {
	children: ReactNode;
}

const Layout = ({ children }:Props) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default Layout;
```
``ReactNode``を使って``Props``の型に指定するだけで解消された。
明示的な型の指定がない場合は、一般的にこの``ReactNode``が使われるとのこと。



## 以下、追記
気になったことまとめ、本編より長い。
## ReactNodeとは
一言で言うとJSXが受け付けるすべてのものをまとめたtypeとして存在する。
中身を見てみると下記のように定義されてある。
```typescript
    type ReactNode =
        | ReactElement
        | string
        | number
        | Iterable<ReactNode>
        | ReactPortal
        | boolean
        | null
        | undefined
        | 
```
こう見ると型が一通り定義されており、追加でいくつか``Union型``で定義されてあることがわかる。
``union型``で定義されてあるものをそれぞれ辿ってみると、下記のようになっている。
```typescript
//①ReactElement
    interface ReactElement<
        P = any,
        T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>,
    > {
        type: T;
        props: P;
        key: string | null;
    }

//②Iterable<ReactNode>
interface Iterable<T, TReturn = any, TNext = any> {
    [Symbol.iterator](): Iterator<T, TReturn, TNext>;
}

//③ReactPortal
    interface ReactPortal extends ReactElement {
        children: ReactNode;
    }
```

### ①ReactElement
こちらは``props``や``key``など、Reactの要とも言えるコンポーネントの型が定義されてある。

### ②``Iterable<ReactNode>``
``Iterable<T>``型は、オブジェクトがイテラブルであることを表す型で、ここでいう「イテラブル」とは、反復可能なオブジェクトの意。

``Iterable<ReactNode>``では、Reactのコンポーネントや要素を繰り返し処理できるオブジェクトであることを示す。

### ③ReactPortal
React のポータル``（ReactDOM.createPortal）``で使用される型定義。ポータルとはコンポーネントのツリー外にあるDOMノードにコンポーネントをレンダリングするための仕組み。ポータルを使用することで、親コンポーネントのDOMツリーから独立した場所に子コンポーネントをレンダリングすることができる。

## そもそもinterfaceって何？
今回の修正で``interface``というものを利用した。
これまでは``type(型エイリアス)``を使って型定義をしていたが、``interface``というものでも型定義ができるらしい。

``interface``は``type``と同様に型定義をする際に用いられるが、``type``との決定的な違いがある。



## interfaceとtypeの違い
### ①「宣言」か「代入」か。
``interface``は型の「宣言」であり、``type``は型の「代入」となる。

そのため、記述方法にも違いがある。

```typescript
interface Props {
  id: string;
  date: string;
}


type Props = {
  id: string;
  date: string;
};
```
``interface``は「宣言」であるため、セミコロンなどが不要である。対して ``type``は「代入」であるためセミコロンやイコールを用いて関数式のように記述する必要がある。

### ②使い分け
``type``ではプリミティブ、ユニオン、タプル、その他あらゆる型として使用できる。対して、``interface``ではオブジェクトの型を定義する際に使用することを推奨されている。

これら2つの使い分けに悩む場面が多く、その場合、実際の開発環境では型エイリアス統一して書く方針になる場合もあるらしい。

## まとめ
雑記になってしまったが、また補足する情報があれば追記していく。
[翻訳記事] Sharp（Nextの画像最適化ライブラリ）の効果は絶大だった (+ Next/Image)  

- [もっと多くのテック関連の記事を読みたいですか？](https://devblogeasyoon.xyz/blog)

- [記事の元リンクはこちら](https://devblogeasyoon.xyz/blog/next-js-sharp-image-optimization)  


## 結論
- Nextが提供するコンポーネントである`Next/Image`を通常の`img`タグの代わりに使用すると、画像が自動的に最適化され、レイジーローディングがサポートされる。
- `sharp`という画像処理ライブラリを使用して画像を最適化すると、効果は非常に大きい。

## 動機
- ブログの基本テーマのソースコードを見ていた際に、`Next/Image`コンポーネントが使われていることに気付き、調べてみた。
- ビルド時に以下のような警告が表示された。
```
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
```


## 適用方法
- `sharp`ライブラリをインストールすると、特別な設定なしでNextが自動的に画像を最適化してくれる。

    ```bash
    npm install sharp
    ```

- `Next/Image`コンポーネントで優先的にレンダリングする画像に`priority`プロパティを追加することで、優先的にレンダリングすることが可能。

    ```jsx
    import Image from 'next/image';

    <Image
        src="/images/profile.jpg"
        alt="Profile Picture"
        width={500}
        height={500}
        priority
    />
    ```

## 適用結果
- `sharp`適用前は、初回レンダリング時に1～2秒間画像の読み込みに時間がかかり、カクつく現象が見られたが、適用後はその現象が解消された。
- ネットワークタブで確認したところ、画像の読み込みにかかる時間は以下のように短縮された。
  - 適用前: **241ms以上**
  - 適用後: **28ms以下**  
（私の場合、画像サイズ自体は大きく減少しなかった。）

- 適用前  
  ![](../static/images/before-sharp.png)

- 適用後  
  ![](../static/images/after-sharp.png)

## その他

- `Next/Image`コンポーネントは、Nextサーバーが動作する際に`/_next/image`フォルダ内に最適化された画像を初回生成し、以降のリクエストではキャッシュされた画像を返す仕組みになっている。
- **SVG**と**GIF**は最適化されない。（PNG、JPEGなどがサポートされている。）
- `sharp`は、Next公式ドキュメントでも**本番環境で必ず使用するよう推奨**されているライブラリ。

### 関連参考記事
- [Next.js Image Optimization Explained](https://youtu.be/Ino03JPppU4)
- [Next.jsでの画像最適化について（Olive Young）](https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/)
- [Next.js Imageが遅い理由と解決方法](https://junheedot.tistory.com/entry/Next-Image-load-super-slow)
全国型CTFに参加した話

## はじめに
write upは公開していいのかわからないため、今回は感想だけにしとこうと思います。
## 難易度について
初心者でも簡単に解ける問題でした！
私は過去2回CTFに参加していますが、1問も解けませんでした。
(SECCON Beginners CTFやSECCON CTF 13)

そのぐらいの実力の私がcrypto(暗号問題)を全9問中8問解けたので、
CTF初心者の方にもおすすめのイベントだと思います。
## 感想
今まで解けなかったけど、今回cryptoの問題に集中してやったらほとんど解けたので、
嬉しかったのと今後ctfはcrypto分野を伸ばしていこうと考えています。
## 最後に
今回が初投稿のため、書き方がおかしいところなどあるかもしれませんが
最後まで読んでいただきありがとうございました！
また、イベントを開いていただいた主催の方々、ありがとうございました！
楽しかったです！
複数のアカウントの競合でgit cloneが出来ない；；ってなった時の対処

## 環境
エディタ：VScode
OS：Ubuntu 20.04.6
## `git clone`が出来ない；；
GitHub上のリポジトリをSSHで`git clone`しようとしたらこんなエラーが。。。
```
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
在るはずのリポジトリが存在していないと言われてしまいました。

### やってみたこと１：アカウントの確認
ssh接続を行っているアカウントをターミナル上で確認してみます。
```
git config --global user.email
git config --global user.name
```
アカウント情報は問題ありませんでした。接続状況も問題なさそうです。

### やってみたこと２：`~/.ssh/config`の確認
複数アカウントを使い分けている場合、`~/.ssh/config`内で何かしら設定していると思います。その設定が正しいか確認してみましょう。
```
Host github
  HostName github.com
  User git
  Port 22
  TCPKeepAlive yes
  IdentityFile ~/.ssh/<秘密鍵のファイル>
  IdentitiesOnly yes

Host github
  HostName github.com
  User git
  Port 22
  TCPKeepAlive yes
  IdentityFile ~/.ssh/<秘密鍵のファイル>
  IdentitiesOnly yes
```
おそらく`config`の中身はこのようになっているはずです。問題なさそうですね。


---

以上のことから、原因は複数アカウントの競合なのでは？と思いました。
## 解決策
### `~/.ssh/config`の内容を書き換える
SSHでgit cloneをするためにGitHub上からコピーしてくる`git@github.com:なんたら/かんたら.git`ですが、意味としては
```
git -> User
github.com -> HostName
なんたら/かんたら -> GitHubユーザ「なんたら」の「かんたら」というリポジトリ
.git -> gitプロジェクトを示す拡張子
```
となります。
そしてこの`git@github.com:なんたら/かんたら.git`は、以下のように書き換えても同様の処理を行えます。
```
Host:なんたら/かんたら.git
```
つまり、明示的に`Host`を設定することによって、アカウントの競合を避けることができます。
```
Host github
  HostName github.com
  User git
  Port 22
  TCPKeepAlive yes
  IdentityFile ~/.ssh/<秘密鍵のファイル>
  IdentitiesOnly yes

Host github_sub
  HostName github.com
  User git
  Port 22
  TCPKeepAlive yes
  IdentityFile ~/.ssh/<秘密鍵のファイル>
  IdentitiesOnly yes
```
このように設定することによって、
```
git clone github:なんたら/かんたら.git
git clone github_sub:なんたら/かんたら.git
```
が競合が起こらずに処理され、問題なくcloneできました！

#### それでもうまくいかない場合はWindows PowerShellでssh接続の準備を行った可能性も
本筋とは離れますが、Ubuntuのターミナル上で`git clone`したときに参照されるディレクトリに`.ssh/config`がない可能性があります。
ssh接続を行う(もしくは`git clone`を行う)際に参照されるのは`/home/User/.ssh`ですが、私の場合そのディレクトリに秘密鍵等の情報が全くありませんでした。エクスプローラーを色々除いてみると、Cドライブ上にそれらの情報が存在していたので、ssh接続設定のKey発行時にWindows PowerShel環境下で作成していたみたいです。Cドライブ上に情報がある方はCドライブの`~/.ssh`ディレクトリをそのままUbuntuにコピーして権限設定をすることでUbuntuのターミナル上でもgit cloneができるようになります。
##### <font color="Red">注意！以下はCドライブ上の情報をUbuntu上に上書きするため、既にUbuntu上でSSH接続の設定している方は実行しないでください！</font>
```
 cp -r /mnt/c/Users/<ユーザ名>/.ssh /home/<ユーザ名>/
```
```
chmod 700 /mnt/c/Users/<ユーザ名>/.ssh
chmod 600 /mnt/c/Users/<ユーザ名>/.ssh/*
```
普段Ubuntuを使うのになぜPowerShellのターミナルをいじっていたのかはあまり覚えていませんが、とにかく参照しているディレクトリには気をつけたいですね。
Ktor の HttpClient をラップした実装をしたら、つよつよエンジニアさんに注意された話

# はじめに
記事を見てくださりありがとうございます！
@HayatoHanaoka と申します。
今日仕事で起こった出来事を備忘録がてら残します。
また、今回の内容には以下の記事の内容が多少関係してきますので、お時間がある方は目を通していただけると幸いです。
この記事より実装が進んでいるのですが、見ておくことで多少の前提を把握できると思います。

https://qiita.com/HayatoHanaoka/items/108d4c4ea50c38e17284


# 起こった出来事
社内のつよつよエンジニアとプログラミングの振り返りをした際に、
以前実装した`Clinet`にフィードバックをいただきました。
この`Client`は `Driver` の内部で呼び出し、外部からリソースを取得するために使っています。
``` Client.kt
import Config
import io.ktor.http.*
import kotlinx.serialization.Serializable

interface Client {
    suspend fun getResource(
        keywords: String?,
        order: String?,
        tags: String?,
        page: Int?,
        type: String?,
        limit: Int?,
        sort: String?
    ): EntrepediaCompanies
}

class ClientImpl(private val client: HttpClient): Driver {
    override suspend fun getResource(
        keywords: String?,
        order: String?,
        tags: String?,
        page: Int?,
        type: String?,
        limit: Int?,
        sort: String?
    ): Resource {
        val url = URLBuilder("http://localhost").apply {
            parameters.apply {
                keywords?.let { append("keywords", it) }
                order?.let { append("order", it) }
                tags?.let { append("tags", it) }
                page?.let { append("page", it.toString()) }
                type?.let { append("type", it) }
                limit?.let {
                    append("limit", it.toString())
                }
                sort?.let {
                    append("sort", it)
                }
            }
        }.buildString()
        return client.get<Resource>(url)
    }
}
```
この実装に対して、皆さんならどのようなフィードバックを行いますか？
もしあったらコメントしてくださると嬉しいです！

社内のつよつよエンジニアさんからは、

👨‍🦱 **「HttpClientのライブラリをラップするとかえって使いにくくなりますよ。」**

と言われました。
また、

- **HttpClintのライブラリが十分に抽象化されているので、そのまま活かした方が良い**
- **下手にラップする方がと、そのうち色々なところにロジックが漏れ出す**
- **今後同じような処理を持つメソッドを大量に生やすことになると予測される**

といったこともフィードしていただきました🙏

# 結論
`HttpClient`のライブラリ自体そのものがHTTPを効率よく使うための汎用ライブラリなので、それを自分等が扱いやすいように再度加工するのは、よほどライブラリの中身を理解していない限りは避けた方が良いみたいです。
確かに、 **今このような使い方をしたいから、この形にする** という非常に具体的な内容の実装になっていました。
- もし数日後に使い方が変わったら？
- もしライブラリ自体の仕様が変更されたら？

こういったことを考慮すると、わざわざ自分たちで既存のライブラリを用いた新しい実装をするよりは、直接ライブラリを `Driver`からライブラリそのものを直接呼び出す方が良いのかもしれません。

# 最後に
**コードレビューは死ぬほど大事。**
新たな発見があったり、より良い実装にできる要素を気付けますね。
【C#】8年越しでも愛が生まれた

## 記事を発掘
アドベントカレンダーを書くにあたり色々と技術記事を見ていたところ、昔流行ったらしいムーブメント(?)を見つけました。
ちなみにこれらの記事が書かれた2016年は、筆者はまだ高校生でした。
元ネタのQiita記事はすでになくなってしまっていたのですが、2024年の今見てもいいなぁと思ったので8年越しに共有します（元ネタをご存知の方は生温かい目で見ていてください）

## 見つけた記事

https://qiita.com/Tokeiya/items/b47d24406b6e21305898


## 8年越しでも、やっぱり愛が生まれた
私のおんぼろローカルPCでも、ちゃんと愛が生まれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632896/eafec52b-0ef1-d2e5-8904-ab6593ba8595.png)

<br>

ブラウザでは、こちらのサイトで実行可能です。
※Console.WriteLine～ のみ入力

https://dotnet.microsoft.com/ja-jp/platform/try-dotnet

## 愛が生まれる理由
要するに、バイナリの演算の結果が偶然人間にとって意味ありげな文字になっているということです。

https://qiita.com/usk81/items/44daf3a52eb872085556

## まとめ
高級言語で贅沢にWebアプリケーションの開発を行っている際はあまり直接的にバイナリを意識することはありませんが、勉強しているとひょんな拍子で見つけた技術ネタでクスリとできるのでたのしいですね。


## 🔗参考Link

https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/operators/bitwise-and-shift-operators#logical-and-operator-

https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA

<br>
imagePullPolicyを変更せずにKubernetesがPullするDockerイメージを最新版にする方法

:::note info
本記事では、PodやDeploymentの`imagePullPolicy`を`IfNotPresent`から`Always`に変更する方法ではなく、`kubectl`を使用してコマンドラインからキャッシュを更新する方法を紹介します。
:::

# 以前の記事を紹介

https://qiita.com/matoruru/items/49d652e5d40a4b398c3c

上の記事では`imagePullPolicy`を書き換えて新しいイメージを強制的にPullさせる方法を紹介しています。しかし**Podの再起動を必要とする点**と、**わざわざマニフェストを書き換える必要のある点**が好ましくなく、可能なら避けたいところです。

# `kubectl run`を使いましょう！

次のように、`kubhectl run`の`--image-pull-policy`オプションに`Always`を指定して実行します。

```
kubectl -n default run -it --rm --image="<イメージ名>" --image-pull-policy="Always" deleteme
```

これで、既存のマニフェストを変更せずにキャッシュ済みのイメージを最新版にすることができます。

:::note warn
`--rm`オプションをつけているのでプロセスを終了させればPodは自動的に削除されますが、Podの起動がうまくいかなかったりシェルに入れなかった場合は
```
kubectl -n default delete pod/deleteme
```
を実行して当該Podを削除してあげてください。
:::

# まとめ

今回は`imagePullPolicy`の書き換えを避けてキャッシュを更新する方法をご紹介しました。

Twitterでは、おうちKubernetesや技術関連の内容を日々ツイートしているので、興味があればぜひフォローしていってください😊

Twitter: https://twitter.com/_matoruru
Docker勉強

## 初めに

Dockerを勉強するために自宅のデスクトップPCにDocker Desktopをいれました。
Dockerを使いToDoリストを作成してみようと思っています。
作成にあたりやった作業をメモ程度に書いていきます。

## 作業

- 下の画像の通りCentOSを検索し一番上に出てきたイメージをpullしました。
（詳しいことはわからないのでとりあえずofficial imageと書かれていたものを選びました）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146106/c447897f-fc70-3c39-49df-e6960c12016e.png)

- コマンドプロンプトより下記コマンドを実行しイメージを起動させました。

```
# イメージがpull出来たか確認
docker images
# イメージの起動
# ポート80でアクセスできるようにしたけど外部からのアクセスはできない
docker run --name test -p 80:80 -it centos
```

- 立ち上がったイメージのcentosのバージョンを確認

```
cat /etc/redhat-release 
```

- yumコマンドが使えないので下記設定を変更
（mirrorlistをコメントアウト、baseurlのコメントアウトを削除そしてURLを変更）

```
ファイル名：
CentOS-Linux-AppStream.repo
設定差分：
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=AppStream&infra=$infra
baseurl=http://vault.centos.org/$contentdir/$releasever/AppStream/$basearch/os/

ファイル名：
CentOS-Linux-BaseOS.repo
設定差分：
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=BaseOS&infra=$infra
baseurl=http://vault.centos.org/$contentdir/$releasever/BaseOS/$basearch/os/

ファイル名：
CentOS-Linux-Extras.repo
設定差分：
#mirrorlist=http://mirrorlist.centos.org/?release=$releasever&arch=$basearch&repo=extras&infra=$infra
baseurl=http://vault.centos.org/$contentdir/$releasever/extras/$basearch/os/
```

- 下記コマンドでNginxのインストール

```
yum install nginx
```

- 下記コマンドでnginxサービスの起動

```
nginx
```

- 下記URLにてNginxが表示されることそしてポート80でのアクセス確認

```
http://localhost/
```

- 下記画面が表示され問題ないことを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2146106/1d04b31b-5162-2bf7-10f1-1cea94800817.png)

## 最後に
Nginxサービスを起動させるのにsystemctlが使えませんでした、、、
サービスはsystemctlコマンドで起動等行いたいので確認です。
M系、PCからWindowsを消し飛ばしてUbuntuを入れたお話

こんにちは、茨城高専アドカレ5日目です。
本日は、2年機械系の私が学校に持っていっているノートPCからWindowsを完全に消し飛ばして、Ubuntuを入れたことによる良かったこと、後悔していること、後悔してることの解決案について語れたらなと思います。

# なぜそんなことをしたのか？
普通、生活していてWindowsを消してまでUbuntuを入れようだなんて思いません。
では、なぜそんなことをしたのでしょうか？答えはROS2のためです。
ここで簡単にROS2とはなにか紹介すると、ロボット制御用の高度なツール群です。
私は、ロボット部に所属していてロボットの制御を主にしています。そこで、ROS2に出会いました。
ただ、ROS2を使うにあたり一つ問題がありそれは、ROS2は主にUbuntu向けに作られたもので、Windowsでは色々厳しいということでした。そこで、WSLを使ってROS2に触れたのですがネットワーク系がややこしかったり、GUIが使えなかったりで大変だったので、いっそのこと直接Ubuntuを入れようと思い立ったのです。ただ、デュアルブート等ではストレージが不足してしまうと思ったので、Windowsをバックアップをとってから消しました。（のちに、バックアップも消してバックアップが入っていたストレージにもUbuntuを入れた）と、ここまでがWindowsを消し飛ばすまでに至った経緯です。

# Ubuntuを入れてよかったこと
### ① ROS2が動く！
* ROS2のGUIのツールが使えます！ファイヤーウォールをいちいちいじらなくてもOKになる！最高です！
### ② aptが便利
* パッケージマネージャーのaptがメチャクチャ便利で、これなしでは生きていけません。
（たまに、autoremoveに環境を破壊されるけど、、、）
### ③Ubuntuで動くソフトは結構多い
* 普段使っているのだと、vscode、mbed studio、unity、kicad、discord、voicevox、blenderなどがUbuntu上で動作します。

# 後悔したこと
ただ一つ、Ubuntuで困ったことがあります。それは、3DCADです。
機械系は今後、授業で3DCADを使うことが多くなるでしょう。ただUbuntuで動く3DCADはほとんどありません。
学校のPCと、自宅のデスクトップPCを使えばほとんどの場合大丈夫そうですが、対策はしておきたいです。

# 解決案
まだ、試したわけではないのですがこの問題を解決できそうな方法をいくつか紹介します。
Ubuntuのネイティブアプリは色々調べて諦めました。
### ① Onshape
https://www.onshape.com/en/
* Webアプリの3DCADです。周りで使っている人を見ませんし、ネットが必要なので私にとって最終手段です。
### ② Blender
https://www.blender.org/
* もはやCADではないですが、私が最も使い慣れてる3Dソフトです。3DCADとしてはだいぶ不向きだと思いますが一応紹介します。
### ③ Windows in docker
https://github.com/dockur/windows
* Twitter（X）でちらっと見たやつです。
Windowsが動くdockerイメージがあるそうです。（どうゆうこと？）
これができれば、Ubuntuによる他のデメリットもほとんど解決できます。
それにしても、プロダクトキーとかどうなるのでしょうね？

# まとめ
以上、短いですがWindowsを消し飛ばした話はこれくらいで終わりにしようと思います。
まだまだ未熟な内容になってしまいましたが、最後までお読みくださりありがとうございました。

明日は、@juna1013さんによる「文化祭でクラスのWebページ作った話」です。
Webページのお話は、フロントエンド、バックエンドともに好きなので楽しみです。
コンテキストメニュー (2) ～ 表とグラフのインタラクションを設定する

[<B>MATLAB/Simulink Advent Calendar 2024</B>](https://qiita.com/advent-calendar/2024/matlab)に参加しました。

カレンダー1の12/5分として追加しました。

・使用ツール
<dt>　MATLAB</dt>
<br>

<H4><a href="https://note.com/leftbank/n/n68e9bdc63781"</a> [<B>note</B>]にUpしました。</H4>
【基本情報】独学マラソン 正規化基本 Day 29

:::note worn
この記事は自分用の備忘録です。
:::

## 正規化ってなんぞ
データを利用しやすいように整理すること

## 冗長なデータ

<table>
<caption>ポケモン情報</caption>
  <thead>
    <tr>
      <th>ID　</th>
      <th>名前</th>
      <th>タイプ</th>
      <th>トレーナー名</th>
      <th>トレーナーの町</th>
      <th>ポケモンの重さ</th>
      <th>ポケモンの高さ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>のび太</td>
      <td>メガネ</td>
      <td>ドラえもん</td>
      <td>ミライタウン</td>
      <td>35.0kg</td>
      <td>1.4m</td>
    </tr>
    <tr>
      <td>2</td>
      <td>スネ夫</td>
      <td>エスパー</td>
      <td>ドラえもん</td>
      <td>ミライタウン</td>
      <td>40.0kg</td>
      <td>1.3m</td>
    </tr>
    <tr>
      <td>3</td>
      <td>ジャイアン</td>
      <td>かくとう</td>
      <td>ドラえもん</td>
      <td>ミライタウン</td>
      <td>90.0kg</td>
      <td>1.7m</td>
    </tr>
  </tbody>
</table>

これの何が冗長なんですか？
＝＞ドラえもんが引っ越した場合に面倒

<table>
<caption>ポケモン情報（トレーナー引越し後）</caption>
  <thead>
    <tr>
      <th>ID　</th>
      <th>名前</th>
      <th>タイプ</th>
      <th>トレーナー名</th>
      <th>トレーナーの町</th>
      <th>ポケモンの重さ</th>
      <th>ポケモンの高さ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>のび太</td>
      <td>メガネ</td>
      <td>ドラえもん</td>
      <td>カコタウン</td>
      <td>35.0kg</td>
      <td>1.4m</td>
    </tr>
    <tr>
      <td>2</td>
      <td>スネ夫</td>
      <td>エスパー</td>
      <td>ドラえもん</td>
      <td>カコタウン</td>
      <td>40.0kg</td>
      <td>1.3m</td>
    </tr>
    <tr>
      <td>3</td>
      <td>ジャイアン</td>
      <td>かくとう</td>
      <td>ドラえもん</td>
      <td>カコタウン</td>
      <td>90.0kg</td>
      <td>1.7m</td>
    </tr>
  </tbody>
</table>

3つもデータを書き換えないといけないね

## 正規化されたデータ
- やること
    - トレーナーとポケモンの2つのテーブルに分ける
    - トレーナーテーブルのPK（ID）を、ポケモンテーブルのFK（トレーナーID）として関連付ける

<table> <caption>トレーナー情報</caption> <thead> <tr> <th>ID</th> <th>トレーナー名</th> <th>トレーナーの町</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>ドラえもん</td> <td>ミライタウン</td> </tr> </tbody> </table>

<table> <caption>ポケモン情報</caption> <thead> <tr> <th>ID</th> <th>名前</th> <th>タイプ</th> <th>トレーナーID</th> <th>重さ</th> <th>高さ</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>のび太</td> <td>メガネ</td> <td>1</td> <td>35.0kg</td> <td>1.4m</td> </tr> <tr> <td>2</td> <td>スネ夫</td> <td>エスパー</td> <td>1</td> <td>40.0kg</td> <td>1.3m</td> </tr> <tr> <td>3</td> <td>ジャイアン</td> <td>かくとう</td> <td>1</td> <td>90.0kg</td> <td>1.7m</td> </tr> </tbody> </table>

これでデータを1つ書き換えるだけでよくなった

もしポケモンが1025匹テーブルに登録されていたら
冗長なデータだと1025行書き換えが必要

フォロワー100万人とかのデータだったら
100万行書き換えが必要

それが正規化によって1行の変更で済むわけだ

### 


# 感想
この辺り本で勉強してた頃は読み飛ばしてた気がする
実務だと基本設計の時に使う大事な考え方である
アウトプットしないとやっぱり身につかない
アウトプット大事

# 参考

https://wa3.i-3-i.info/word11632.html
見やすい画面録画とちょっとした編集にScreen Studioが便利

## この記事の概要

私は日頃、ツールのTipsレクチャー・データの作り方説明・マニュアル作成・などに関わることが多く、その中で画面録画もします。

見やすい録画データを作成することは重要なのですが、その際に[Screen Studio](https://screen.studio/)というソフトが便利なので、紹介する記事です。

## 自分が便利だと良いと思った箇所を3つに絞って紹介

機能自体はたくさんあり、この記事だけで紹介するのは大変なので、特に自分が良いと思った箇所を3つに絞って紹介します。

- 何も編集しなくても録画しただけで良い感じになる
- カット編集くらいならScreen Studioだけで完結する
- 分かりやすい書き出しができる

それぞれのポイントをピックアップして紹介します。

### 何も編集しなくても録画しただけで良い感じになる

どんな仕上がりになるのか、まずは見てもらった方が早いと思います。
過去に私が撮影した動画の一部を載せます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/597cf230-bc5a-098d-f7cf-6afadc353d4c.gif)

- カーソルを大きく表示
- クリックしている場所を拡大、追従
- 動画の最初と最後でカーソル位置を揃える
- 背景に良い感じの壁紙を設定

このような特徴がありますが、これらはすべて録画しただけで（ほぼ）全自動で設定されます。
特に画面の拡大は自力で編集しようと思うと大変だと思いますが、クリックしたタイミングと位置から勝手に判断して編集してくれます。

正直に言えばOSの純正の機能で録画しても、情報としてはさして変わりません。
しかしコードを単に載せれば良いのに[Carbon](https://carbon.now.sh/)などのサービスを使って格好いい画像にしてシェアする人も多いように、見目よい方が載せる方も見る方ともに気持ちがアガる[^1]んだと思います。

[^1]: 諸説あります。

というわけで、ほぼ無編集でも見た目が良くなるのは自分の中では一番のポイントです。

### カット編集くらいならScreen Studioだけで完結する

無編集でも格好良くなるとは言え、そもそも録画時に一度もミスせず撮るのは難しいです。
そのため、やり直した箇所や間違えた箇所はカットしたくなります。

込み入った編集はできませんが、簡単な編集ならScreen Studioでできます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/ede54d39-5669-e285-9e55-ab7c944b8b00.jpeg)

画像の下の方にタイムラインがあり、そこにハサミマークがいくつかあります。
これは実際に私がカットした箇所です。

カットを入れて、前後を伸ばしたり縮めたりして、簡単な編集ができます。
カット前後のカーソル位置はどういう理屈なのか上手いことスムーズに繋がるよう裏で編集されていて、不自然さは少ないです。

もちろん位置が大きく変わったりするとさすがに無理がありますが、少しクリック順を間違えてやり直したくらいだったらカットしたことが分からないくらいには自然に仕上げてくれます。

### 分かりやすい書き出しができる

「そんなの当たり前では？」と思われるかもしれませんが、意外と重要というか、助かっています。

例えばAfter Effectsの書き出し設定を見てみましょう。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/9ed1ac77-cefb-78ba-e497-bb63d9a81ec4.jpeg)

どこを変えるとどういうフォーマットで、どれくらいの画質で書き出されるのか、初見では分かりづらいのではないでしょうか？

対してScreen Studioはこうです。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/efa3268c-6087-7584-2466-eb108c55011d.jpeg)

動画編集の専門ソフトではないのでオプションは少ないですが、かなり分かりやすいのではないでしょうか？

またgifが直接書き出せるのも嬉しいです。
再びAfter Effectsと比較してしまうと、一度Media Encorderを経由しないとgifが書き出せないなど、一手間かかってしまっていたのです。

## それ以外の機能

- 他のカメラで撮った自分の顔の動画を重ねる
- キーボードショートカットを表示する
- 字幕を自動で生成する
- システム内で鳴っている音も一緒に録音する

などなど、自前でもできなくはないけど面倒なことを勝手にやってくれます。

## 金額

非常に便利なソフトですが、有料です。

私が購入したときは`$89`の買い切りでしたが、今は`$9/month`か買い切りor`$229`になっていました。
（その分、使えるマシン数が1台から3台には増えているようです。）

https://screen.studio/#pricing

安いとは言えないと思いますが、高過ぎるとか割にあわないということはないと思います。
もし興味があったら使ってみてください。