OmniAICreator/Qiita-1.07M huggingface dataset:
SEとSWEの違いを実際の業務経験から考察。SEから社内転職でSWEになるメリットも。

今回はSE(システムエンジニア)とSWE(ソフトウェアエンジニア)の違いについて、私の実際の業務経験を元に考察していきます。
また、SEから社内転職でSWEになるメリットなどについても考察します。

## 筆者の経歴

私は現在所属している会社(SIer)に新卒入社しました。最初の3年間は、グループ会社内で利用するシステムの保守や開発を担当していました。3年間で3チームを渡り歩き、スクラッチ開発からほぼノーコードの開発までいろいろ経験しました。
私が担当していた業務は要求整理から設計、製造、テスト、リリースまでと、開発工程のほぼ全てを担当していました。上流工程だけを担当するというよくあるSE像とは異なると思います。
この3年間で触れた主な言語やフレームワークはReact, Spring Boot, SQL (Presto, Hive), Java, JavaScript, Pythonです。

その後、SaaS型のプロダクト開発に携わりたいということで社内転職し、SWEとして今の部署ではたらくことになりました。SWE歴は現在で1年弱になります。現在の部署でも要求整理からリリースまで、開発工程の全てを経験できる環境です。
社内転職してから触れた主な言語やフレームワークはVue.js, Spring Boot, TypeScript, Javaです。

ちなみに、これまで所属していた計4チームは全てアジャイル開発(スクラム開発)を採用していたこともあり、私はずっと同じ開発手法で開発をしてきました。

## SEとSWEの違いについての所感

あくまで私の経験に基づいた結論となりますが、 **SEとSWEに明確な違いはありません。**

SEとしての私の担当業務が上流から下流までほぼ全てだったこともあり、どちらの職種でも業務内容はほぼ変わりませんでした。違うことと言えば、使う技術や、利益を上げることに対しての周りの本気度くらいでしょうか。業務内容的にはその程度の小さな違いしかなく、SWEになってもSEの時と同じようにスクラムを回しながら仕事をしています。

技術力に差があると思われるかもしれませんが、実際はそうでもありませんでした。今まで出会った中で一番技術力の高かった人は、SE時代に隣のチームにいたアーキテクトですし、他にもギークなSEが周りに何人もいました。私の中では技術力についても、SEとSWEに大差はありません。

## 一般的なSEとSWEの違いについて

これまで私の視点でSEとSWEに違いはないことを話してきましたが、 **一般的なSEとSWEにはある程度差がある**とは思っています。未経験でも入社できるSEとは違い、SWEは技術力や実務経験等を求められることから、社員の技術力の平均値はSWEの方が上でしょう。業務内容についても、上流工程が多いSIerと、コーディングやテストなどもやるSWEでは違いが出てくるはずです。

## SEでSWEに近い仕事をするには

SEでSWEに近い仕事をするにはどうすればよいかというと、プライム(一次受け)案件で、かつ下請けを使わないチームに所属することです。そのようなチームを探すには、大企業でグループ向けの案件を主に取り扱う部署を見つけるのが手っ取り早いと思います。実際に私がSE時代に所属していた部署も、そのような特徴を持っている部署でした。

グループ向けの案件は基本的にプライム案件のはずなので、第一の条件は容易にクリアできます。また、私の経験則で言うと、グループ向けの案件はチームの規模が小さめになることが多いです。規模が小さいということは、下請けに回すことが少なく、しかも開発手法としてアジャイルが採用されやすくなります。また、規模が小さいチームでは、上流工程から下流工程まで幅広く経験できる場合が多いため、よりSWEの仕事に近くなるでしょう。

新卒入社の場合はどうしても配属ガチャがあるため、希望通りの部署に配属されるのはなかなか難しいかもしれません。しかし、異動や社内転職がしやすい会社であれば、1年程度我慢すれば融通が利くようになるはずです。

## 自社プロダクトを持つSIerのSEは、SWEにジョブチェンジしやすい

会社に社内転職制度があったり、異動しやすい環境や風土がある前提にはなりますが、 **自社プロダクトを持っているSIerでは、SEからSWEにジョブチェンジしやすいです。**

私も実際に社内転職制度を用いてSEからSWEになったわけですが、私の場合は社内転職の際にコーディング面接などはなく、これまでの経験や技術でどのように転職先で活躍できるかをアピールすれば通るような、通常の面接が課されただけでした。
コーディング面接対策やポートフォリオの作成などである程度の下準備が要求されるSWEの転職と比べると、随分楽にSWEにジョブチェンジできたということです。

これの何が良いかというと、**プログラミング未経験からでも、SIerの中でプロダクト開発チームに社内転職できさえすれば、SWEの業務経験を積むことができる**ということです。これにより、SWEになるためには業務経験が欲しいものの、業務経験を積むにはSWEになるしかないというジレンマから逃れられます。

将来SWEとして就職したいものの、就職活動までに勉強が間に合わないような場合、ちゃんとした自社プロダクトを持っているSIerに就職するのは一つの手かもしれません。
Go言語(プログラミング)入門メモ⑭

## 型アサーションとswitch typeを使う
Goではメソッドを持たない空のインターフェースを作成できる。空のインターフェースにはどのような型の値でも入れることができるので、引数にどんな型が入るのかわからないときに活用できる。空のインターフェースに入れた値を特定の値として使う時に必要なのが、型アサーションとなる。

## 空のインターフェース
最初に、iというインターフェースを引数にするdoという関数を作る。なお、引数の「interface{}」は空のインターフェースで、どのような方でも引数として受け付ける。
~~~
func do (i interface{}) {
    ii := i * 2
    fmt.Println(ii)
}

func main() {
    do(10)
}

//
エラーが出力される
~~~
do関数で引数iを2倍にして変数iiに代入、初期化して変数iiの値を表示しようとする。main関数でdo関数に10を渡して実行するとエラーになってしまう。これはiがインターフェース型なので、int型の数値と計算ができないため。
空のインターフェースが持つ値をintやstringといった具体的な型として扱うために、型アサーションという仕組みを使う必要がある。
「ii := i.(int)」とすることで、iの値をint型として扱い、変数iiに代入する。
その後、「ii *= 2」として掛け算をする。これは、「ii = ii * 2」と同じ意味になる。
~~~
func do(i interface{}) {
    ii := i.(int)
    ii *= 2
    fmt.Println(ii)

func main() {
    do(10)
}

//以下のように出力される
20    
~~~

## 型アサーション②
文字列への型アサーションも確認する。
main関数内で実行するdo関数の引数を「"Mike"」とし、do関数内で引数をstring型に型アサーションして変数ssに代入する。文字列に「!」を足して、表示を確認する。
~~~
func do(i interface{}) {
    ss := i.(string)
    fmt.Println(ss + "!")
}

func main() {
    do("Mike")
}

//以下のように出力される
Mike!
~~~

## switch typeで型ごとに処理を実行する
型アサーションを用いるコードは、int型を処理したいか、文字列を処理したいかがわかりにくくなる。そこで、異なる型に対応できるようにコードを書き換えてみる。switch文で、実行結果に「v := (type)」と書き、iをtypeで型アサーションした結果を変数vに代入する。
※i.(type)という書き方はswitchと一緒でないと使えない。

vに代入した値をcaseで判定する。intの場合は2倍した値を表示、stringの場合は「!」を足して表示する。そのほかのboolean型などの場合はdefaultの処理として
「I don't know」というメッセージとともに型を表示する。

~~~
func do(i interface{}){
    switch v := i.(type) {
    case int:
        fmt.Println(v * 2)
    case string:
        fmt.Println(v + "!")
    default:
        fmt.Println("I don't know" %T\n, v)
    }
}

func main() {
    do(10)
    do(Mike)
    do(true)
}

//以下のように出力される
20
Mike!
I don't know bool
~~~
上記のようにswitch typeを使うことで、引数がインターフェースの関数に対して、様々な型を渡すことができる。引数に指定した値は、インターフェースとして関数に渡されるので、i.(type)のように型アサーションしてから、それぞれ型に応じた処理を行う。

## 学習に使用した教材
・『入門】Golang基礎入門 + 各種ライブラリ + 簡単なTodoWebアプリケーション開発(Go言語)』M.A EduTech
https://www.udemy.com/course/golang-webgosql/?utm_medium=udemyads&utm_source=bene-msa&utm_campaign=responsive&utm_content=top-1&utm_term=general&msclkid=81e2f24a32cc185d275d953d60760226&couponCode=NEWYEARCAREERJP

・『シリコンバレー一流プログラマーが教える Goプロフェッショナル大全』酒井 潤 (著)
https://www.amazon.co.jp/%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%90%E3%83%AC%E3%83%BC%E4%B8%80%E6%B5%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B-Go%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E5%A4%A7%E5%85%A8-%E9%85%92%E4%BA%95-%E6%BD%A4/dp/4046070897
Cocoonを使ってスマホのハンバーガーメニューを作成する手順メモ

何度もなんども調べないといけないのが億劫なので、メモをしておきます。

外観タブ内にあるメニューを押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e019f2e7-9097-3b88-42e5-e871fb00a06b.png)

モバイル用メニューという名前、ヘッダーモバイルボタンを選択した状態で作成を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/22df5671-c790-4bee-4626-d92e1bf66fdb.png)
モバイル用サブメニューという名前、モバイルスライドインメニューを選択した状態で作成を押下します。
このサブメニューがゆくゆくはハンバーガーボタンを押した後に表示されるメニューになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/67da1093-9a12-72e6-83be-c55dd3024b84.png)
モバイル用メニューの構造は以下としてます。
カスタムリンクを選択して以下のように指定して作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/9486f36b-778b-e14c-f177-6bdbc41c6432.png)

|URL|リンク文字列（ナビゲーションラベル）| 
|:-----------|:------------|
|#menu|メニュー|
|#logo|ロゴ|
|#search|検索|


モバイル用サブメニューにはWordpressを構築した際にデフォルトで用意されている固定ページのSample Pageを登録してみます。
ここは後々作りこんでいく感じで。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/f43bb954-389d-bf32-5e9b-dc0378e765e7.png)

ロゴを準備します。
今回はなんでもいいので以下サービスを使用して自動生成してWordpressで使いたいと思います。要Adobe Cloudアカウントです。

https://www.adobe.com/jp/express/create/logo

今回はこれが出来たので、これを使います。
このままだと余白があり過ぎるので、削っておきます。
![qwertyuio_transparent-.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/6d80f6d5-0bca-a83a-b326-7459fe7f21cd.png)
ロゴをWordpressに反映していきます。
Cocoon設定を押下し、ヘッダータブを押下すると以下のようなページになります。
ヘッダーロゴの選択ボタンを押下します。
選択後作成した画像をWordpressにアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/0bf35887-2539-61d2-f9d1-708ab63b91df.png)
アップロード後、プレビュー画面にロゴが表示されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/e4337844-73da-16e4-f665-0952cb60e624.png)

モバイルタブを押下します。
プレビューを見てヘッダーメニューが左からハンバーガーボタン、ロゴ、検索となっていることを確認します。
また、ハンバーガーボタンを押下するとサブメニューに登録したものが表示されることが確認できるとおもい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/b798ca3a-7f1f-38d2-01c5-af3b6ea38645.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3219385/8638fcd2-1b65-5147-fae5-42418af48378.png)
Goにおけるコントローラ層の実装とDIパターン

こんにちは！フリーランスエンジニアのこたろうです。

コントローラ層の実装とDIパターンについて、実践で得た知見を共有します。
## コントローラの基本概念と実装
コントローラは以下の責務を持ちます：
- リクエストの解析
- ビジネスロジックの呼び出し
- レスポンスの整形

```go
// 基本的なコントローラの構造
type ArticleController struct {
    service *services.ArticleService
}

// コンストラクタ
func NewArticleController(s *services.ArticleService) *ArticleController {
    return &ArticleController{service: s}
}

// メソッドの実装
func (c *ArticleController) GetArticle(w http.ResponseWriter, r *http.Request) {
    article, err := c.service.GetArticle(r.Context())
    if err != nil {
        return
    }
    json.NewEncoder(w).Encode(article)
}
```

## 依存性の注入（DI）
依存性の注入とは、コンポーネントが必要とする依存関係を外部から提供する設計パターンです。これにより、コンポーネント間の結合度を低く保ち、柔軟な実装が可能になります。

### 実装例
```go
func main() {
    // 依存関係の構築
    db := initDB()
    repo := repositories.NewArticleRepository(db)
    service := services.NewArticleService(repo)
    controller := controllers.NewArticleController(service)

    // ルータ設定
    router := mux.NewRouter()
    router.HandleFunc("/articles", controller.GetArticle).Methods("GET")
    router.HandleFunc("/articles", controller.CreateArticle).Methods("POST")
}
```

## インターフェースによる抽象化
インターフェースを使用することで、具体的な実装から依存関係を分離します。これにより、実装の詳細を隠蔽し、より柔軟なコード構造を実現できます。

```go
// インターフェース定義
type ArticleServicer interface {
    GetArticle(ctx context.Context) (*Article, error)
    CreateArticle(ctx context.Context, article *Article) error
}

type ArticleController struct {
    service ArticleServicer
}
```

## DIのメリット
1. 変更の影響範囲を限定
   - コンポーネントの実装を変更しても、他への影響を最小限に抑えられる

2. コードの再利用性向上
   - 依存関係を差し替えることで、様々なコンテキストで再利用可能

3. 保守性の向上
   - 機能追加や仕様変更への対応が容易
   - 実装の詳細を隠蔽することで、コードの理解が容易に

4. 開発効率の向上
   - チームでの並行開発が容易
   - コードの見通しが良くなる

## まとめ
- コントローラはビジネスロジックとリクエスト処理を橋渡し
- DIで依存関係を適切に管理
- インターフェースで実装を抽象化
- これらにより保守性と開発効率が向上

## 参考文献
-『Goで作るはじめてのWebアプリケーション改訂版』技術書典
- https://techbookfest.org/product/jXDAEU1dR53kbZkgtDm9zx
学習計画を立てる

# はじめ

初めまして！ジュニアエンジニアの、のはなです。
1回目の投稿で何をどのように書いていくのかまだわからないけれど
勉強していく中での備忘録というか、理解を深めるため分かりやすくアウトプットする練習として初めてゆこうと思う。


今回は、朝の30分から1時間で勉強しているので

## Claudeさんに聞いて、3ヶ月間の具体的な目標設定をする

こんな答えが返ってきた

→→右これまでの技術スタックとキャリア初期の状況を考慮すると、以下のような3ヶ月の具体的な学習計画はいかがでしょうか


#### **第1ヶ月**：データベースとSQL

目標：複雑なSQLクエリが書けるようになる
毎朝の学習内容：

Week 1-2: 基本的なSQL（JOIN、サブクエリ、集計関数）
Week 3-4: パフォーマンスチューニング、実行計画の読み方



#### **第2ヶ月**：APIとマイクロサービス設計

目標：RESTful APIの設計原則を理解し、実装できる
毎朝の学習内容：

Week 1-2: REST APIの基本原則とベストプラクティス
Week 3-4: Node.jsかRubyでシンプルなAPIを作成



#### **第3ヶ月**：クラウドの基礎（AWS）

目標：AWS認定クラウドプラクティショナーの知識レベルに到達
毎朝の学習内容：

Week 1-2: AWSの主要サービスの概要理解
Week 3-4: サーバーレスアーキテクチャの基礎




## 具体的な学習リソースを教えてもらった。

各月ごとに初学者でも取り組みやすい学習リソースをご紹介します：
#### 第1ヶ月：データベース実践

SQL学習サイト


「SQL ZOO」（無料）

インタラクティブに学べる
基本から応用まで段階的に学習可能


「SQLPD」（無料）

パフォーマンスチューニングの実践的な問題が豊富




YouTubeチャンネル


「SQL Tutorial - Full Database Course for Beginners」(freeCodeCamp.org)

体系的に基礎から学べる
実践的な例題が多い



#### 第2ヶ月：REST API設計

オンラインリソース


「REST API Tutorial」（restfulapi.net）

REST APIの基本概念から実践まで
具体例が豊富




実践的な学習


「Public APIs」（github.com/public-apis/public-apis）

実際のAPIを試せる
さまざまなAPIの設計例を学べる



#### 第3ヶ月：AWS

公式リソース


「AWS Skill Builder」（無料コンテンツ）

AWSの基礎から体系的に学べる
ハンズオン形式で実践的




AWS実践


「AWS Well-Architected Labs」

実践的なラボ形式
基本的なものは無料



#### 追加のおすすめ：

Udemyのコース


データベース、API設計、AWSの入門コースが充実
セール時に購入すると1,000-2,000円程度
体系的に学習可能

これを参考に、数日中に精査しながら最終的な目標設定と成果物、具体的なリソースを準備してゆこうと思う。
[UE5]C++のSkeletalMeshでSimulation Generates Hit EventsをTrueにする

めちゃくちゃお久しぶりです。

今回はC++でSkeletalMeshのSimulation Generates Hit Eventsを変える方法を書いていくよ。


## “SetNotifyRigidBodyCollision”では変えられない

まず、この記事を書く前に色々と調べて試したんだけど、Actorなどでは動くらしい
“**SetNotifyRigidBodyCollision**”が何故かSkeletalMeshではいじってあげてもエディタ上でSimulation Generates Hit EventsがTrueにならない…

```c++:BaseClass.h
TObjectPtr<class USkeletalMeshComponent> SkeletalMeshComponent;
```
```c++:BaseClass.cpp
SkeletalMeshComponent->SetNotifyRigidBodyCollision(true);
```

ここの項目つかない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/e4803055-d4d2-0409-6fe7-f701ecdf713b.png)

https://forums.unrealengine.com/t/simulation-generate-hit-events-boolean-in-c/297944

## 解決策
どうやって解決したかというと
"**SkeletalMeshComponent->BodyInstance.SetInstanceNotifyRBCollision()**"をすることで解決

```c++:BaseClass.cpp
SkeletalMeshComponent->BodyInstance.SetInstanceNotifyRBCollision(true);
```

これは“SetNotifyRigidBodyCollision()”の中身なんだけど、その中で実行されている”SetInstanceNotifyRBCollision()”を直接実行してあげただけだよ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/11e5f0f7-20e0-3629-5c09-8b0ee58af46e.png)

これをすることで、デフォルトでSkeletalMeshにSimulation Generates Hit Eventsのチェックをつけることができるよ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2818152/0840d2d1-27cb-2b19-6220-9777ecc8bf64.png)

もしも困っている人がいたら参考にしてみてね。

そして今年はもっと多くQiita書くのようにしたいなという目標を立てておく
SSR  CSR 概要と違い　＃備忘録

## 初めに
最近インターン先でフロント周りの開発を行う機会が増え、レンダリングについてのエラーが出た際に、SSR, SSGなどの区別ができていなかったので、備忘録的にまとめてみようと思います！

## 基本的な知識について
SSR, SSG, CSRなどはレンダリングを行う場所とタイミングの話である。

（サバー側でレンダリングを行うのか、リクエスト後にレンダリングを行うのかなど）

***それぞれのレンダリング方法についてクライアントとサーバーのイメージ***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759085/1b904418-5b70-daef-4608-e73ac8101d27.png)


## レンダリングの種類

### SSG(Static Site Generation)

ビルド時にデータの取得を行い、ページの生成を行い静的ページとして保存しておき、リクエストがあった際にはそのページが解される仕組み。

**良い点**

- リクエスト毎にサーバー側でページを生成するわけではないため、ページの表示速度が早い

**悪い点**

- データに更新が必要な場合には不向き

### SSR(Server Side Rendering)

リクエストがあった際にサーバー側でJSを実行しレンダリングを行う。クライアントはレンダリングされたHTMLを受け取り表示するという流れ

***良い点***

- クライアントはページを表示するだけなので、表示する速度が早い。
- SEOの点で良い（完成されたHTMLを返すため）

**悪い点**

- ページ遷移の際にサーバーへの通信が発生

### CSR(Client Side Rendering)

リクエストに対してサーバーは空のHTML, JSを返す。その後クライアント側でレンダリングが行われる

**良い点**

- ページ遷移が高速

**悪い点**

- SEOの点で不利(レンダリングされていない空のHTMLが返るため)
- 初回読み込みが遅い（全てのデータを一括して取得するため）


## 参考記事

https://scrapbox.io/teamlab-frontend/SSR,_CSR,_SSG,_ISG,_ISR%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E6%96%B9%E3%80%82%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8CNext.js%E3%81%A7Todo%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%82#6153c5afac19080023bd637f

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation
[kotlin]DB保存の順番が変わってtest難しくなった時の話

## 困ったこと
testで.saveAll()などを使ってRepositoryにデータを格納し、
あるメソッドが発火した時、DBの中身がどの様な形になっているか？をテストしようとしたところ、
データの保存順番がlistOf(hoge, fuga, piyo)などの順番通りではなく入れ替わってしまい、.findAll()で取得したレコードのカラムの中身が思ったように取得できず困ってしまった。

## 結論概要
取得したいカラムの値が別のカラムのidと紐づいて組み合わせで判定することができそうだったので、組み合わせ条件を判定する関数を作成しassertTrue()で判定した。

## コード例
まず、判定用の関数を作成し、assertTrueで判定

```kotlin
fun isVaildRecord(record: SomeRecord): Boolean {
    return (record.id == 1 && record.name == "hoge") ||
           (record.id == 2 && record.name == "fuga")

val records = listOf(SomeRecord(1, "hoge"), SomeRecord(2, "fuga"), SomeRecord(1, "hoge")) // findAll()で取得したレコードを想定

records.forEach { record ->
    assertTrue(isValidRecord(record))
}
```

条件を関数でカプセル化し、意図が明確になったと思います。

最大の問題は、assertTrueで判定しているので、期待値と実際の値がどう違うからfalseになって落ちているのかがわかりにくいという点です。

kotlinの記述方法なかなか慣れないので、もっと勉強をして使いこなせる様になりたいです。
# 🚀 【初心者向け】LP（ランディングページ）の作り方完全ガイド 🌟

### 「LP（ランディングページ）って何？どうやって作るの？」🤔  
そんな疑問をお持ちの方に向けて、この記事では**LP制作の基本から実践的なコーディング方法**までを分かりやすく解説します！  
HTML/CSS/JavaScriptの基礎知識があればOK！一緒に魅力的なLPを作ってみましょう💻✨

---

## 📋 **目次**

1. [LPとは？その役割と特徴](#lpとはその役割と特徴)  
2. [LP制作の5つのステップ](#lp制作の5つのステップ)  
3. [HTML/CSS/JavaScriptで実装してみよう](#htmlcssjavascriptで実装してみよう)  
4. [効果測定と改善方法](#効果測定と改善方法)  
5. [まとめ](#まとめ)

---

## 🎯 **LPとは？その役割と特徴**

### **LP（ランディングページ）とは？**
LP（Landing Page）は、ユーザーが広告や検索エンジン、SNSなどからアクセスする**特定の目的に特化したWebページ**です。

### **特徴**
- **1つのゴールに集中**: 商品購入、資料請求、お問い合わせなど。
- **シンプルな構造**: 必要最低限の情報で構成。
- **行動喚起が重要**: ユーザーにアクションを促すCTA（Call to Action）が必須。

### **なぜLPが必要なの？**
- **コンバージョン率UP📈**: 目的に特化しているため、ユーザーを迷わせず行動に誘導できます。
- **広告効果の最大化🔥**: 広告内容と一致したページで離脱率を低減。
- **データ分析が容易📊**: 効果測定がしやすく、改善につなげられます。

---

## 👣 **LP制作の5つのステップ**

### 1. 🎯 **目的とターゲットを明確にする**
まずは「何を達成したいか？」（例: 資料請求数を増やす）、「誰に届けたいか？」（例: 20代女性）を明確にしましょう。

### 2. 👤 **ペルソナ設定**
ターゲットユーザー像を具体化します。  
**例:**  
- 名前: 田中美咲  
- 年齢: 25歳  
- 職業: アパレル店員  
- 悩み: 歯の黄ばみが気になる  

### 3. 🧱 **ワイヤーフレーム作成**
構成要素（キャッチコピー、ベネフィット、CTAなど）を整理し、設計図を作ります。

```mermaid
graph TD
  A[キャッチコピー] --> B[ベネフィット]
  B --> C[サービス紹介]
  C --> D[CTAボタン]
```

### 4. 🎨 **デザイン決定**
配色やフォント選びなど、ターゲット層に合ったデザインを決めます。

### 5. 💻 **コーディング**
HTML/CSS/JavaScriptで実際にページを作ります！

---

## 💻 **HTML/CSS/JavaScriptで実装してみよう**

以下はシンプルなLPのコード例です。

### HTML構造
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>デンタルエステサロン</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>🦷 白い歯で笑顔に自信！</h1>
    <p>初回限定✨無料カウンセリング受付中！</p>
    <a href="#cta" class="cta-button">今すぐ予約する</a>
  </header>

  <section id="benefits">
    <h2>💎 当サロンの3つの魅力</h2>
    <ul>
      <li>痛みが少ない施術</li>
      <li>歯科医師監修で安心</li>
      <li>駅チカで通いやすい</li>
    </ul>
  </section>

  <footer class="footer">
    <p>&copy; 2023 デンタルエステサロン</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>
```

### CSSデザイン
```css
body {
  font-family: Arial, sans-serif;
}

.hero {
  text-align: center;
  background-color: #f0f8ff;
  padding: 50px;
}

.cta-button {
  display: inline-block;
  background-color: #00bcd4;
  color: white;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 5px;
}

.cta-button:hover {
  background-color: #008c9e;
}

.footer {
  text-align: center;
  padding: 20px;
}
```

### JavaScriptで動きを追加
```javascript
document.querySelector('.cta-button').addEventListener('click', () => {
  alert('予約ありがとうございます！📅');
});
```

---

## 📊 **効果測定と改善方法**

公開後は効果測定ツールを活用してデータ分析＆改善しましょう！

### ツール例
- **Google Analytics**: ユーザー行動分析
- **Google Search Console**: SEOパフォーマンス確認
- **ヒートマップツール**: ユーザー視線・クリック分析

---

## 📝 **まとめ**

ランディングページ制作は以下がポイントです：

1. 🎯 明確な目的とターゲット設定  
2. 👤 ペルソナ設定による具体的なユーザー像  
3. 💻 HTML/CSS/JavaScriptによる効率的なコーディング  
4. 📊 公開後はデータ分析＆改善  

この記事を参考に、自分だけの魅力的なLPを作ってみてください！😊
🦷【実践コード付き】デンタルエステLP集客術｜医療広告準拠×Web技術で予約率30%UP

# 🦷【集客率30%UP】デンタルエステLP最適化術｜Web技術で予約数を劇的に増やす方法

![スクリーンショット 2025-01-23 20.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/30344bac-647a-da3e-e387-0c960bed00d4.png)

## はじめに

デンタルエステサロンのWebサイトやランディングページ（LP）を運営している方々の中には、「広告費をかけても予約が増えない」「離脱率が高い」といった課題を抱えている方も多いのではないでしょうか？

この記事では、**Web技術を活用したLPの最適化手法**を解説します。特に以下のような方におすすめです：

- **Web制作やマーケティング担当者**：集客効果を高めたい
- **エンジニア**：クライアント向けに効果的なLPを構築したい
- **デザイナー**：UI/UX改善の具体例を知りたい

この記事を読むことで、次のような知識が得られます：

- LP改善で集客率を30%向上させる具体的な手法
- 実装例付きで学べるWeb技術（HTML/CSS/JavaScript）
- 医療広告ガイドラインに準拠した設計ポイント

---

## 記事の流れ

1. [実績データで見るLP改善効果](#実績データで見るlp改善効果)
2. [LP成功の5つの設計ポイント](#lp成功の5つの設計ポイント)
3. [実装例：コードサンプル付き](#実装例コードサンプル付き)
4. [まとめと次のステップ](#まとめと次のステップ)

---

## 実績データで見るLP改善効果

まずは、実際に行ったLP改善事例をご紹介します。

| 指標           | 改善前 | 改善後 | 変化率   |
| -------------- | ------ | ------ | ------ |
| **離脱率**       | 68%    | 45%    | ▼23%   |
| **問い合わせ率**   | 2.1%   | 3.8%   | ▲81%   |
| **ページ表示速度** | 4.2秒  | 1.8秒  | ▼57%   |

これらは、以下で解説する「5つの設計ポイント」を活用した結果です。

---

## LP成功の5つの設計ポイント

### 1. 医療広告ガイドライン準拠設計
医療関連広告では法規制が厳しく、違反するとペナルティを受けるリスクがあります。これに対応するためには、適切な注意書きや地域別表示ロジックが必要です。

#### 実装例：注意書きの動的表示
```html
<div class="disclaimer" data-region="kanto">
  <p>※効果には個人差があります。</p>
</div>
```

### 2. 比較表で「選ばれる理由」を明確化
競合との差別化は、ユーザーがサービスを選ぶ際に重要です。以下は比較表の一例です。

```html
<div class="comparison-table">
  <div class="column our-service">
    <h3>当サロン</h3>
    <ul>
      <li>🦷 痛みが少ない施術</li>
      <li>💎 歯科医師監修</li>
    </ul>
  </div>
</div>
```

### 3. CTA（行動喚起）の最適化
CTAボタンはユーザー行動を促す重要な要素です。視覚的に目立たせるために、グラデーションやアニメーションを活用します。

#### 実装例：CSSによるボタンデザイン
```css
.cta-button {
  background: linear-gradient(135deg, #89f7fe, #66a6ff);
  padding: 15px;
  font-size: 18px;
  border-radius: 5px;
}
.cta-button:hover {
  transform: translateY(-2px);
}
```

### 4. Before/Afterスライダーで効果訴求
施術効果を視覚的に伝えるためには、「Before/Afterスライダー」が有効です。

#### 実装例：JavaScriptによるスライダー
```javascript
const slider = new KeenSlider('#slider', {
  loop: true,
});
```

### 5. CMS連携による運用効率化
更新作業を簡単にするためにCMS（WordPressなど）と連携します。

#### 実装例：PHPによる動的メニュー生成
```php
$treatment_types = get_field('treatment_menu');
foreach ($treatment_types as $type) {
    echo '<div class="menu-item">';
    echo '<h4>' . $type['name'] . '</h4>';
    echo '<p>' . $type['description'] . '</p>';
    echo '</div>';
}
```

---

## 実装例：コードサンプル付き

以下は、今回の記事で紹介した技術スタックとその使用比率です。

```mermaid
pie
title 技術スタック比率
"HTML/CSS": 40
"JavaScript": 35
"PHP(CMS)": 20
"API連携": 5
```

これらを活用することで、高い保守性と柔軟性を持つLP構築が可能になります。

---

## まとめ

デンタルエステサロン向けLP最適化では、以下が重要です：

1. ユーザー体験（UX）を重視した設計
2. 医療広告ガイドラインへの準拠
3. 最新技術によるパフォーマンス改善

もしこの記事が参考になった場合は、「いいね」やコメントでフィードバックいただけると嬉しいです。また、さらに詳しい情報や具体的な相談をご希望の場合は、お気軽にお問い合わせください！

---
キーボード沼の旅路（2）

### まず素人が思いつく気の利いたキーボードと言えば
キーボード素人の私でも、HHKBとRealforceくらいは知っています。しかしながら、HHKBは前回のポストの通り、フルサイズを求める私の条件には合わないので最初から除外となりました。Realforceは私の求めるフルサイズキーボードのそれもMac配列があることから、まず検討対象になりました。

Realforceのウェブを見ていると様々な選択肢が用意されています。ていうか、Macだけでも選択肢が多すぎて意味がわからない… 押下圧35gとか45gとかって文字列を見たところでどんなものなのか想像のしようもない。

ということでRealforceの実機を触るために家電量販店に行ってみました。で、世間で散々打鍵感に関する評価の高いRealforce、私にはいまいちでした。ネットでは「スコスコ」と表現されるRealforceの打鍵感、私には最後の最後にグニャっとした気持ち悪さを感じました。私は1990年以来のマカーなのですが、当時から評判の悪かったApple Keyboard IIに似た感触を覚えました。世間の高評価がわかりませんでした。同じキースイッチを使用しているとされるHHKBもフルサイズがあったとて気に入ることはなかったのでしょうそれにRealforceのキーボードはHPやDellのような大量生産キーボードみたいな見た目で、見た目の新鮮さに欠ける印象も持ちました。はい、マカーなので見た目も重要です。

### Realforce以外に選択肢はるのか

同じ売場に他のメカニカルキーボードの展示もあったので、Realforce以外も触ってみました。その中で見た目とキータッチのバランスがいいなと思ったのは、赤軸のKeychron K5でした。ベゼルレスな見た目も印象がよかったです。というか、量販店で認識可能だったロープロファイル、メカニカル、フルサイズを満たす選択肢はKeychronしかありませんでした。

### Keychron K5を触ってみて

こういうのは店頭で触っただけではよくわからないことはいっぱいありますよね。Keychron K5のキーキャップは奥に向けて下がる独特のキーキャップで、打鍵ミス率がとても高くなってしまいました。それに慣れる予感も感じられず、こんなの使ってられないわ…と速攻でメルカリ経由で手放すことになってしまいました。

キーボードの購入には実機を店頭で触ることは必要不可欠だとは思いますが、店頭で触っただけではわからず、継続的に長時間使わないとわからないこともまた多いのがキーボードというプロダクトの特性だと思います。
jestのsnapshotでテストの運用コストを削減する

## 概要
node.jsでintegrationテストを運用しているのですが、運用していて仕様変更等によりレスポンスの変更が発生します。
小さな変更でも多くのテストコードを修正していたのですが、メンテナンス性を考えてsnapshotテストを運用するようにしました。
今回はそのメリット・デメリット含めて実際に感じたことを書いていこうと思います

## snap shotテスト導入のきっかけ
普段integrationのテストを実装する際にちょっとしたレスポンスの変更に対しても各ケースで値の状態を検証するコードを直す必要があり、テストケースが増えることによりテストコードの修正コストが大きくなったためです

## やってみよう
それでは早速やっていきたいと思います

### snapshotを使わないテスト
``` js
describe('/api/v1/sample2', () => {
	it('get message', async () => {
		const response = await request(app).get('/api/v1/sample');

		// response bodyの確認
        // このレスポンスの中身が増えたり、値が変わったりした場合の検証が大変
        expect(response.body).toEqual({
            "_id": "67922c0e4fee2d8abbbb292d",
            "index": 0,
            "guid": "07e645ac-c31f-4353-9721-9bccfb6a77ef",
            "isActive": false,
            "balance": "$1,520.47",
            ...中略
            "tags": [
        			...中略
            ],
            "friends": [
        			...中略
            ],
        });
	});
})
```
実装を見るだけだとあまり感じませんが、レスポンスが増えたり、テストケースが多い場合だとそれだけ修正コストがかかってきます



### snapshotテストを使った場合
snapshoテストについて見ていきたいと思います。
ちなみにjestでsnapshotを出力するには`toMatchSnapshot()`を呼ぶことによりsnapshotが出力されるようになります
``` js
describe('/api/v1/sample2', () => {
	it('get message', async () => {
		const response = await request(app).get('/api/v1/sample');

		// 出力したsnap shotがマッチしているかを確認
		expect(response.body).toMatchSnapshot();
	});
})
```
この方法だとレスポンスを追加した場合であってもsnap shotの更新だけで済むので運用コスト的には軽く済みます。
出力されるsnap shotは下記のような形
``` json
exports[`/api/v1/sample2 get message 1`] = `
{
    "_id": "67922c0e4fee2d8abbbb292d",
    "index": 0,
    "guid": "07e645ac-c31f-4353-9721-9bccfb6a77ef",
    "isActive": false,
    "balance": "$1,520.47",
    ...中略
    "tags": [
            ...中略
    ],
    "friends": [
            ...中略
    ],
}`;

```
このように、snap shotからどういったレスポンスが返るのかが確認できるため、レビュー時にはこのsnap shotをベースにレビューができるといったようなメリットもあります。

## snap shotテストで運用するデメリット
snap shotテストは手軽に取り入れることができるのと、運用コストが軽く済むのはいいことですがもちろんデメリットもあります。
デメリットとしては実装者がsnap shotを作業的に更新するだけになってしまいがちなこと
またレビュワーもsnap shotの変更の確認漏れが起こってしまいがちになってしまうことです。
対応策としてやってみたこととしては、テストの実装観点として正常系を期待しているのか、異常系を期待しているのかはテストで実装(assertion)するようにしています。
``` js
describe('/api/v1/sample2', () => {
	it('get message', async () => {
		const response = await request(app).get('/api/v1/sample');
		
        // 正常かどうかを確認するためステータスチェックは入れる
		expect(response.status).toBe(200);
        
		expect(response.body).toMatchSnapshot();
	});
})
```

## 最後に
自動テストは素晴らしいツールですが、アプリケーションの規模が大きくなるにつれ運用のコストが上がってしまうことも少なくありません。
こういったものを活用してより運用コストを下げつつもちゃんとしたテストのプロセスを回していける状態にしたいですね。
ではでは
Go言語(プログラミング)入門メモ-インターフェイス-

## インターフェイスの概念が良くわかっていなかった
https://qiita.com/Hirohiro-new/items/bb149704e0301491bb3a
入門メモ⑬でインターフェースについて学習したが、いまいち使用用途やなぜ必要なのかというところが分からなかったので再度学ぶ。

## 学習に使用した教材
https://docs.google.com/presentation/d/1r96GPwlWCkVeeUnFj7dwb8RqMalYLG7vDYWjuAa_Wik/edit#slide=id.g4f15a7d687_0_168

## インターフェースはなんのためにある？
まず、インターフェースは抽象化を行うためにある。
現実世界で例えると、
役所に行って、住民票を取ろうとする。いつも窓口には佐藤さんという人がいて、対応してくれている。ある日役所に行くと、佐藤さんは転職してしまったという。ただ、こうなったとしても、自分たちは住民票をとれなくなってしまう！ということにはならない。
役所の人であればだれであっても住民票を取ってくれる。
ソフトウェアの世界でも、具体的な実装を抽象化して、インターフェースを用いて機能を使えるようにする、ということが必要になる。
「住民票を取ってきてくれる佐藤さん」という考え方ではなくて、
「名前はわからんが住民票を取ってきてくれる人いるなあ」という状態にする。

※他にもCopilotに聞いてみたところこんな例えを出してくれた。
例：音楽プレイヤーとイヤホン

あなたが新しいイヤホンを買ったとします。それがどのメーカーのものであっても、普通はあなたのスマホや音楽プレイヤーにそのまま接続できますよね。それは、イヤホンのプラグの形（3.5mmジャックなど）が決まっていて、その形に合わせて作られているからです。

つまり、「この形に合うプラグを持っていれば、どのイヤホンでも使える」という共通の取り決めがあるわけです。

## インターフェースとは？
インターフェースとはメソッドの集まり。
型TがインターフェースIを実装している、という時を考えると
インターフェースIが持っているメソッドを型Tもすべて持っている、ということである。(型TはインターフェースIが持っているメソッド以外も持っているかもしれない)
役所の例でいくと
インターフェースIは「住民票を取ってくる」メソッドを持っている、ということ。
型Tは佐藤さんで、「住民票を取ってくる」メソッドを持っているし、「転籍届を受け付けてくれる」メソッドも持っているかもしれないが、少なくとも「住民票を取ってくる」メソッドを持っているので、佐藤さんは「住民票を取ってくる」インターフェイスを実装している、といえるということ。

数学的に言えば、インターフェースIが型Tの部分集合になっている、ということである。
このような状態であれば、「型TはインターフェースI型として振る舞うことができる」という状態になる。
上記は、インターフェースI型の変数に型T型の値を代入できる、ということになる。
これはプログラム的に言うと、以下が成り立つということになる。
~~~
var i I = t  // tはT型の変数とする
~~~

## インターフェースの具体例
~~~
type Stringer interface {
	String() string
}
// インタフェースを実装していることになる
var s Stringer = Hex(100)
fmt.Println(s.String())
~~~
StringerというインターフェースはStringというstring型を返すメソッドを持っている。
~~~
type Hex int
func (h Hex) String() string {
   return fmt.Sprintf("%x", int(h))
}
~~~
2つ目のブロックではHexという型を定義し、Stringというメソッドを定義している。このStringメソッドは1つ目のブロックで定義したStringメソッドと一致している。(一致、というのは引数や返り値が同じだから同一のメソッドであると言えるということ。)
つまり、HexはStringメソッドを持っているので、Stringerインターフェースを実装している、ということができる。
実装しているならば、1つ目のブロックの5行目で書いている通り、StringerインターフェースにHex型の変数を代入することができる。
sという変数の中身は実はHex型なのだけど、Stringメソッドを使いたい人からするとそれはどうでもよくて、Stringというメソッドを呼べるということが重要。

## 振り返り
分からない概念に遭遇したときは、なるべく卑近な例で考えてみること(この辺はAIに聞くとすぐに出してくれる)、それがあるとどんなうれしいことがあるかで考えてみるとわかりやすくなる。今後の学習でもこのようなスタイルで理解を深めていきたい。
[VSCode]Rails x Docker環境でRubocopuの自動フォーマット

## はじめに
備忘録として残します
フロントエンドのPrettierみたいに、Rails環境でもformat on saveする方法を探していました。
ホストにrubocopを用意して...とかDev Containerを使って...とかやりたくなかったので、超シンプルに実現できて満足

## 前提
Railsの動くDocker環境


Docker環境の用意がない場合はこちらご利用ください

sqlite

https://qiita.com/kandalog/items/b8f001a02c8b95ae2fcc

mysql

https://qiita.com/kandalog/items/4b2b4a8f8f0fb78dbe3b


## rubocopt
```ruby
group :development do
  gem 'rubocop', require: false
end
```

```shell
$ bundle install
```

## VSCodeの拡張機能をinstall
https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop


## rubocop用の設定ファイルを作成
```
$ touch ./bin/rubocop
$ chmod 744 ./bin/rubocop
```
```ruby
#!/bin/bash
cd $(dirname $0)/..
OPTION=$(test -p /dev/stdin && echo '-T')
docker compose exec $OPTION app rubocop --server $@
```

## setting.json
```shell
"ruby.rubocop.executePath": "./bin/",
  "[ruby]": {
    "editor.defaultFormatter": "misogi.ruby-rubocop"
  },
```

## 参考

https://zenn.dev/ohran/scraps/b5773fe823ea12

https://zenn.dev/cumet04/articles/rubocop-server-with-docker
🛠 2025年のバックエンド革命：効率性とセキュリティ強化のための最新技術 🚀

# 🚀 2025年のバックエンドトレンド：これからの開発を支える技術と革新 🌐

2025年、バックエンド開発はさらに進化し、効率性とスケーラビリティを追求する新しい技術やトレンドが続々と登場しています。ここでは、最新のトレンドを分かりやすく解説します！

---

## 🛠 **主要なバックエンド技術**

### 1. **AI統合開発：開発効率の向上** 
- **特徴**: AIによるコード生成、デバッグ支援、自動化されたCI/CDパイプライン。
- **活用例**: GitHub CopilotやAmazon CodeWhispererが開発者の生産性を大幅に向上。
- **2025年の注目点**: AIが開発チームの一員として定着し、コード品質の向上と開発サイクルの短縮が実現。

### 2. **サーバーレスアーキテクチャ：インフラ管理からの解放** 
- **特徴**: クラウドプロバイダがリソースを自動管理し、開発者はビジネスロジックに集中。
- **活用例**: AWS LambdaやGoogle Cloud Functionsが主流に。
- **2025年の注目点**: エッジコンピューティングとの連携で、低遅延かつ高効率なアプリケーションが増加。

### 3. **マイクロサービスからプラットフォームエンジニアリングへ** 
- **特徴**: マイクロサービスの複雑さを解消し、プラットフォームチームが開発者向けの標準化された環境を提供。
- **活用例**: SpotifyやAirbnbがプラットフォームエンジニアリングを採用し、開発者満足度と効率性を向上。
- **2025年の注目点**: インフラストラクチャ・アズ・コード（IaC）の進化により、スケーラビリティと回復力が強化。

---

## 🚀 **2025年のバックエンドトレンド**

### 1. **AIとAPIの融合：インテリジェントなシステム構築** 
- **特徴**: AIがAPIの設計と利用をガイドし、動的なユーザー体験を実現。
- **メリット**: リアルタイムでのシステム適応とセキュリティの強化。
- **活用例**: AIがAPIの使用パターンを分析し、最適なリソース配分を自動化。

### 2. **セキュリティ・アズ・コード：開発ライフサイクルへの統合** 
- **特徴**: セキュリティ設定とポリシーをコードとして自動化し、安全な環境を構築。
- **メリット**: DevSecOpsの普及により、脆弱性の早期発見と修正が可能に。
- **活用例**: 金融や医療業界でのコンプライアンス要件に対応したセキュアなデプロイメント。

### 3. **量子コンピューティングの実用化：複雑な問題解決** 
- **特徴**: 量子アルゴリズムによる最適化問題の高速解決。
- **メリット**: 物流、金融、医療分野での応用が期待。
- **活用例**: IBMやMicrosoftが提供する量子SDKで、開発者が量子アプリケーションを実験。

### 4. **ローコード/ノーコードプラットフォームの普及** 
- **特徴**: 非開発者でもアプリケーションを迅速に構築可能。
- **メリット**: 開発コストの削減と迅速なプロトタイピング。
- **活用例**: MendixやOutSystemsがエンタープライズ向けの複雑なアプリケーションをサポート。

### 5. **エッジコンピューティング：リアルタイム処理の革新** 
- **特徴**: データ発生源近くでの処理により、遅延を最小化。
- **メリット**: IoTや自動運転車でのリアルタイムデータ処理が可能に。
- **活用例**: 防犯カメラの映像分析やスマート工場での活用が拡大。

---

## 🌟 **まとめ**

2025年のバックエンド開発は、**AI統合**や**サーバーレスアーキテクチャ**、**量子コンピューティング**などの技術革新により、さらに効率的でスケーラブルなシステムが主流となります。これらのトレンドを押さえることで、開発者はより高速で安全なアプリケーションを構築できるでしょう。

ぜひこれらの技術を活用し、次のプロジェクトに挑戦してみてください！ 🚀

---

**参考リンク**  
- [Gartnerの2025年戦略的テクノロジートレンド](https://www.gartner.co.jp/ja/articles/top-technology-trends-2025)   
- [Backend Development Trends in 2025](https://www.geeksforgeeks.org/top-backend-development-trends/)   
- [エッジコンピューティングの最新動向](https://www.qbook.jp/column/1995.html)
CloudFlare Tunnel の使い方講座


:::note alert
この記事について
この記事は、**CloudFlareアカウント**を持っていることを前提としています
:::
:::note warn
この記事について
CloudFlareアカウントにドメインが1つ以上紐づいている必要があります。
:::
<dl>
  <dt>1. CloudFlare ダッシュボードにアクセス</dt>
  
https://dash.cloudflare.com/

ご自身のCloudFlareアカウントにログインします。
以下の画像のような表示があるページになれば完璧！！ (英語なのはご了承を。)
  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/65234ea7-3a8c-3d88-f168-2b095d79f7d1.png)

## 2. トンネル作成をしてみよう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/ee12dc8d-126a-5bfd-e153-f2f1e4e94f97.png)
左側にある、このバーの **Zero Trust** を開いてください。

開くと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/a52f220d-e33f-3bb6-4466-eaabcda121b5.png)
この画像のようなページに行くことができます

そして、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/9e31a2b9-cd23-9cd7-5933-121621234d74.png)
この中の、 **Networks** を開いてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/11079398-5adc-e504-cda6-2b7d19b22ff5.png)
この画面になれば成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/5bc35c3c-de84-2d60-5018-4522c485141a.png)
このボタンを押して、次のページに進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/39197b66-cb2b-eeaf-8add-52dbdf12ed6e.png)
この画面まできたら、左の **Cloudflared** を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/fd7a6c88-da86-64af-61c0-702977e9a2aa.png)
ここで、自分のつけたい名前を決めて入力してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/c2e9daa9-75ed-9887-660a-76e2d3ad55cd.png)
ここからは各自OSを選択してください。
今回はUbuntuの説明をしたいと思います。

## インストールの仕方
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/31b723c1-e652-e8e1-4291-64fb4ab7f6d8.png)
このように選択をし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/28f6644e-c561-6f9f-8eaa-d83debdc0cd2.png)
**上部の一番長い方のみをコピーします。**(クリックをすることでコピーができます)
そして、それをUbuntuのCLI(Windowsで言うCMD)を開いてこちらを入力します。
そうすると自動的に認識するので、Nextを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/9e7273a4-8c6c-b984-71a7-d01238912ca2.png)
Subdomainは任意。追加したい場合は入力すること。
**Domainは必須です。** こちらにCloudFlare Tunnelで公開したいドメインを選択します。

:::note warn
今回はWebサイトを作成するということを前提に進めていきます。
:::

<dt>TypeはHTTP</dt>
<dd>(利用するものによってはHTTPSを使用する際もある。)</dd>
あとは、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529959/ea126565-7d33-8478-4581-ddb5b8b32360.png)

これをクリックすることで終わりです。
お疲れさまでした。
ざつでごめｎ
FFmpeg Command Generator: Simplifying Video Frame Extraction

# FFmpeg Command Generator: Simplifying Video Frame Extraction

FFmpeg is a powerful tool for video processing, but crafting the right commands can be challenging. That's why I created FFmpeg Command Generator - a simple GUI tool that makes frame extraction easy, even for those new to FFmpeg.

## What It Does

This tool helps you:
- Select video files visually
- Choose where to save extracted frames
- Set how often to extract frames (every nth frame)
- Generate and copy FFmpeg commands automatically

## Why Use It?

- No need to remember FFmpeg syntax
- Avoid common command-line errors
- Save time on repetitive tasks
- Perfect for both beginners and professionals

## Key Features

- Simple, intuitive interface
- File browser for selecting videos and output locations
- Automatic command generation
- Saves your last used settings
- One-click command copy

## Who Is It For?

- Content creators needing video thumbnails
- Researchers analyzing video frames
- Anyone who works with video frame extraction

## Getting Started

https://github.com/keigo1110/ffmpeg_for_GS

1. Download and install
2. Select your video file
3. Choose output settings
4. Copy the generated command
5. Run in your terminal

The tool is open-source and available on GitHub. Try it out and simplify your FFmpeg workflow!
それっぽい使いやすそうなDiscordBOT作ってみた

## それっぽい使いやすいBOT作ってみた
どうもとみーです。今日は、だれでも使えるBOT作ったので
皆さんに共有したいなと思いました。
#### 専属さん

こんな名前で作ってて、
- [導入リンク](https://discord.com/oauth2/authorize?client_id=1316023730484281394&permissions=8&integration_type=0&scope=bot+applications.commands)
- [サポートサーバー](https://discord.gg/senzokusan)
- [ホームページ](https://senzokusanhome.pages.dev/)
ここからはできることとか説明します。
## BOTでできること
このBOTでは、数々の機能が使えます。しかし、数が多いので、
どんな機能があるか（機能の種類）と、代表的な奴を説明します。
- モデレーション機能
例えば、タイムアウト、Kick、Ban（サーバー外人物も可）とか、
Token（ログインするための文字列）の送信ブロック
詐欺リンクなどの送信ブロックなどをすることができます。
- 超便利(笑)な機能
Nitro（9.99＄するやつ）が無料で手に入る（？）
- サーバー管理機能
意外とどのBOTにもあるわけじゃないチケットパネルや、
ロールパネルが簡単に作成できます。結構便利！
- 普段の雑談にちょっとした機能
おみくじや、計算（難しいものまで...！！）
しゃべったことを忘れないように検索までできる...
これだけ説明したけどまだまだ機能はあるよ！
いつでもBOTアップデートしてるし、常に進化してる！
みんなも導入してね！！！
[
]()
![a72cf80c031d00a46f372039e8ba9e1b.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993135/1612418f-60d4-8124-3d7c-760fa0f86458.jpeg)
Microsoft IntuneにMacOS端末を登録する方法

# 目次
[1.はじめに](#はじめに)
[2.登録方法の種類](#登録方法の種類)
[3.自動デバイス登録 (ADE)](#自動デバイス登録 (ADE))
[4.BYOD](#BYOD)
[5.直接登録](#直接登録)
[6.参考](#参考)

# はじめに
Intuneへの端末登録、AndroidとかiOSとかは色々情報見つかるのにMacOSだけはなぜか全然ない。
もどかしいので自分が調べた情報をここにまとめておきます。
叩き台レベルでのまとめなので、誤った記載があればコメントで教えてください。

# 登録方法の種類
参考：[Mac登録の概要](https://learn.microsoft.com/ja-jp/mem/intune/fundamentals/deployment-guide-enrollment-macos)

MacOSをIntuneに登録する方法をまとめると以下の３種類
| 登録方法 | ユースケース | 利点 |適用例 |
|---------|---------|---------|---------|
| 自動デバイス登録（ADE） |  組織が新しいデバイスを一括で購入し、社員に配布する場合。 | デバイスが自動的に登録され、初期設定が簡単になります。管理者の手間が省けます。 | 新入社員に対するデバイスの配布や、学校での学生用デバイスの管理。 |
| BYOD | 社員が個人所有のデバイスを業務で使用する場合。 | 社員は自分の慣れたデバイスを使用できるため、使い勝手が良く、生産性が向上します。 | リモートワークやフレキシブルな働き方を推進する企業。 |
| 直接登録 | 共有デバイスやキオスク端末など、特定のユーザーに紐づかないデバイスを管理する場合。 | 複数のユーザーが同じデバイスを使用する環境で、セキュリティポリシーを一貫して適用できます。 | 受付や会議室のキオスク端末、図書館の共有PC。 |

# 自動デバイス登録 (ADE)
Apple Business Managerで管理されている端末であればこちらの方法が使えます。
自動デバイス登録 (ADE) は、AppleのDevice Enrollment Program (DEP) を利用して、デバイスを自動的にIntuneに登録する方法です。これにより、デバイスが初めて起動されたときに自動的に管理下に置かれます。
この方法でIntuneに登録されると基本的に企業がPCの所有権を持っていることになります。
まあApple Business Managerに登録された端末なのだからそれはそうなのだけど。

## 登録手順
1. Apple Business ManagerまたはApple School Managerにデバイスを追加します。
2. Intune管理センターでADEプロファイルを作成します。
3. デバイスを初期化し、ADEプロファイルを適用します。

**じゃあApple Business Managerに端末が存在しないと、企業専用の端末にできないということ？**

答えは恐らくYES。
Apple Configuratorを使用した[直接登録](#直接登録)の方法を使い、端末へのユーザー割り当て（ユーザーアフィニティというらしい）有りで登録する方法はあるがMacOSでは対応無しと明言されている。

https://learn.microsoft.com/ja-jp/mem/intune/enrollment/device-enrollment-direct-enroll-macos

ただし、[Apple Business ManagerにApple Configuratorからデバイスを追加する](https://support.apple.com/ja-jp/guide/apple-business-manager/axm200a54d59/web)方法は一応ある。どうしても自動デバイス登録でMacOSを登録したい場合は参考にすると良い。


# BYOD
BYODはそのまま名前の通り、従業員が自分の個人デバイスを業務に使用する場合の登録方法。この方法では、デバイスの所有者が自分でデバイスを登録します。

## 登録手順
1. Intune Company PortalアプリをMacOSデバイスにインストールします。
2. Company Portalアプリを開き、職場または学校のアカウントでサインインします。
3. 指示に従ってデバイスを登録します。

ここで言う「Intune Company Portalアプリ」は手元で確認する限り「Potal Site」という名前で配布されているが、こちらはApp Storeには無い。以下のリンクからpkgファイルをダウンロードして対象の端末にインストールする。
[ポータル サイト アプリを使用して macOS デバイスを登録する](https://learn.microsoft.com/ja-jp/mem/intune/user-help/enroll-your-device-in-intune-macos-cp)


# 直接登録
直接登録は、Apple Configuratorを使って管理者が手動でデバイスをIntuneに登録する方法。
Apple Configuratorというのはいわゆる端末管理ソフトだが、自分自身を管理対象として含められないので必然的にApple Configurator用PCを別で持たなければならない。

## 登録手順
1. Intuneで直接登録用のプロファイルを作成します。
2. Apple Configuratorをインストールした端末を管理対象端末に優先接続します。
3. 管理プロファイルを直接設定します。

これについてはまだ少ししか試せていないので、手順はかなり簡略化して書いているが、Apple ConfiguratorとIntuneとの接続操作に慣れてしまえばそこまで難しくなく、触れ込み通り台数が少ない場合はそこまで大変な作業ではない予想。

# 参考

https://learn.microsoft.com/ja-jp/mem/intune/fundamentals/deployment-guide-enrollment-macos

https://learn.microsoft.com/ja-jp/mem/intune/enrollment/device-enrollment-program-enroll-macos

https://learn.microsoft.com/ja-jp/mem/intune/enrollment/device-enrollment-direct-enroll-macos
電脳少女プログラミング2088  -Bランク ギャングのアジト-

こんにちは,nasuoです。初投稿です。

先日発売したPaizaさんの新作ゲーム,"電脳少女プログラミング2088 壊レタ君を再構築"が...
とにかく面白い！

https://ppg.paiza.jp/denno2088　

ストーリーも、動画も、正誤判定の演出も
とにかく全てが凝っていて、そしてかっこいい！！

学校の授業でプログラミングを少し学んだと言う人でも、解ける難易度の問題もあります。
下に、問題の一例とその解答を示します。


Bランク　ギャングのアジト 

一番街の繁華街にはギャングが縄張りを示すためにピクセルアートを壁に描き残しています。

N × N のグリッドを黒と白で塗ったピクセルアートに左右対称のものがありそれはあるギャングの縄張りという話を聞きました。

ピクセルアートが左右対称かどうか判定してください。
https://ppg.paiza.jp/denno2088/challenges/denno2088_c_b_02　より


解答:python3

    
    #mathモジュールをインポート
    import math
    
    #繰り返す回数をインプット
    n=int(input())

    for i in range(n):
        l=list(input().split())
        #もしnが奇数なら真ん中は必ず線対象であるため、2回目のループはn/2の切り捨て
        for k in range(math.floor(n/2)):
    
            #もし左右対称でないところがあれば、Noである
            if l[k] != l[len(l)-k-1]:
                print("No")
                exit()

    #最後まで成し遂げられれば、Yesを出力
    print("Yes")




他にも面白い問題がたくさんありますので、ぜひ一度チャレンジしてみてください！！

また、この記事がプログラミングにハマるきっかけとなれば幸いです。
Linuxで一発でサービスの起動と自動起動設定をする

LinuxでApacheなどのミドルウェアをインストールして起動するときsystemctlコマンドで
サービス起動 ⇒ 自動起動設定 ⇒ 自動起動設定確認 をするのが面倒でした。
```bash
$ systemctl start httpd
$ systemctl enable httpd
$ systemctl is-enabled httpd
```
`&&`で繋げて実行するのもいいですが、
あまり、スマートではないですよね。

そこでオプションを使います。

```bash
$ systemctl enable --now httpd
```
これを行うことによりサービスの自動起動設定後、即座にサービスを起動してくれます。

ええやん
<img width="400" alt="eeyan" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935946/25e58f7e-409e-46bc-0fb7-f17784674fce.png">
Stripe CliのWebhookのイベントを細かく管理する

決済サービスのStripeは、Stripe Cliを使うことでローカル上でもWebhookのテストが行えて便利です。

通常stipe Cliはコマンドを実行すると一つのエンドポイントでテストが可能です。
しかし、今回複数のエンドポイントでwebhookのイベントごとに分けたいケースがありました。
そのような場合はBash処理にすることで複数のエンドポイントがあってもWebhookのテストを行うことが出来、便利です。

```bash
#!/bin/bash

# 各イベントを別々のエンドポイントに転送
stripe listen --events customer.subscription.updated --forward-to http://localhost:8080/stripe/webhook/subscription-updated &
pid1=$!

stripe listen --events checkout.session.completed --forward-to http://localhost:8080/stripe/webhook/checkout-completed &
pid2=$!

wait $pid1 $pid2
```
「Groq」と「ChatGPT」

AI技術の進化に伴い、「Groq」と「ChatGPT」は注目を集めています。両者はAI分野で重要な役割を果たしていますが、その機能や目的には明確な違いがあります。本記事では、最新のニュースや機能を交えながら、GroqとChatGPTの比較を行います。

**Groqとは**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3917980/1d30189e-11fa-de1b-65ff-034cfe87ffdd.png)
Groqは、元Googleのエンジニアであるジョナサン・ロス氏が2016年に設立したシリコンバレー発のスタートアップ企業です。同社はAI推論に特化したハードウェア「Language Processing Unit（LPU）」を開発しており、これによりAIモデルの推論速度を飛躍的に向上させています。特に、ChatGPTの実行速度を10倍以上高速化できるとされています。 

**ChatGPTとは**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3917980/2ee74c07-aeec-545a-1107-69ac6e1c8ee3.png)

ChatGPTは、OpenAIが開発した対話型AIモデルで、人間のような自然な会話を生成することができます。最新モデルの「ChatGPT-4o」は、複数のバージョンが提供されており、無料プランでも利用可能です。スマートフォン向けのアプリも提供されており、手軽に利用できる点が特徴です。 

**主な違い**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3917980/6827cfb9-44b9-9770-efd2-fffe0f82d30b.png)

1. **機能性**:
   - *Groq*: AIモデルの推論を高速化するハードウェアを提供し、特に大規模言語モデルの処理速度を向上させます。
   - *ChatGPT*: ユーザーとの自然な対話を実現するソフトウェアで、質問応答や文章生成など多岐にわたるタスクに対応します。

2. **目的**:
   - *Groq*: AI計算の効率化と高速化を目的としており、特にデータセンターや自動運転車両向けのソリューションを提供しています。
   - *ChatGPT*: ユーザーとのインタラクションを通じて情報提供やサポートを行うことを目的としています。

3. **対象ユーザー**:
   - *Groq*: AIモデルの高速処理を必要とする企業や研究機関が主なユーザーです。
   - *ChatGPT*: 一般ユーザーからビジネスユーザーまで幅広く利用されています。

**最新の動向**

- **Groqの進展**: 2024年3月、Groqは新製品「GroqCloud」をリリースしました。これは、開発者向けのプレイグラウンドであり、同社のLPU推論エンジンにアクセスできる点が特徴です。 

- **ChatGPTの進化**: OpenAIは最新モデル「ChatGPT-4o」を発表し、無料プランでも利用可能なバージョンを提供しています。スマートフォン向けのアプリもリリースされ、ユーザーの利便性が向上しています。 

**まとめ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3917980/e3fcc57f-30c2-3ac9-05b2-27689e5fb8fa.png)

GroqとChatGPTは、AI分野で異なる役割を担っています。GroqはAIモデルの高速処理を可能にするハードウェアソリューションを提供し、ChatGPTはユーザーとの自然な対話を実現するソフトウェアとして機能しています。両者の特性を理解し、適切に活用することで、AI技術の恩恵を最大限に享受できるでしょう。
Handsontableで日本語のコメントを書こうとするとセルに入力される現象の回避方法

Handsontableのセルにコメントを記入しようとすると、下図のGIFのようにセル自体に記入されてしまうという不具合（？）があります。
コメント入力欄を1度クリックすれば、入力できるようにはなるのですが、ユーザー体験としてはとてもよろしくないですよね。

![Monosnap screencast 2025-01-23 17-11-02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547099/5b7a65c1-2ee8-3584-6e37-5041c6c85efa.gif)

そこで今回、暫定的な回避策を見つけたので書き残します。

利用しているHandsontableのバージョンは15.0です。
なお、本記事で扱っているテーブル（GIFのテーブル）はHandsontableのドキュメント内で公開されているサンプルコードを利用しています。

https://handsontable.com/docs/javascript-data-grid/comments/#basic-example

# 発生手順
下記手順で、不具合が発生します。
英語入力だと問題ないので、日本語入力特有の問題のようです。

1. セルを選択後、コンテキストメニューからコメントの追加を選択
2. **IMEが日本語入力の状態**でキー入力を行う
3. コメント入力欄ではなく、セルに入力されてしまう☹️


# 回避方法
セルが選択状態になっていることがよくなさそうなので、**コメント入力欄が出現したときにセルの選択を解除する方法**をとりました。
そのために、JSの`MutationObserver`を利用してコメント入力欄の出現を監視します。

実装したコードです。
```ts
// コメント入力欄を監視対象のtargetとする
const target = document.querySelector('div.htComments') as HTMLElement

const observer = new MutationObserver(() => {
  // targetのstyleが変化した際に実行する処理
  if (
    target.style.display === 'block' &&
    document.activeElement === document.querySelector('textarea.htCommentTextArea')
  ) {
    hot.deselectCell()
  }
})

observer.observe(target, {
  attributes: true,
  attributeFilter: ['style'],
})
 ```

下記の条件をif文に入れています。その理由として、入れておかないとコメント入力済みのセルにマウスホバーしてコメント入力欄が出現した際にセルの選択が解除されてしまうからです。

```ts
document.activeElement === document.querySelector('textarea.htCommentTextArea')
```

<details>
<summary>【参考】サンプルのテーブルに適用した際のコード</summary>

```ts
import './styles.css';
import Handsontable from 'handsontable';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

const container = document.querySelector('#example1');

const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16],
    ['2018', 10, 11, 12, 13, 15, 16],
    ['2019', 10, 11, 12, 13, 15, 16],
    ['2020', 10, 11, 12, 13, 15, 16],
    ['2021', 10, 11, 12, 13, 15, 16],
  ],
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  comments: true,
  cell: [
    { row: 1, col: 1, comment: { value: 'Some comment' } },
    { row: 2, col: 2, comment: { value: 'More comments' } },
  ],
  height: 'auto',
  autoWrapRow: true,
  autoWrapCol: true,
  licenseKey: 'non-commercial-and-evaluation',
});

const target = document.querySelector('div.htComments');

const observer = new MutationObserver(() => {
  // targetのstyleが変化した際に実行する処理
  if (
    target.style.display === 'block' &&
    document.activeElement ===
      document.querySelector('textarea.htCommentTextArea')
  ) {
    hot.deselectCell();
  }
});

observer.observe(target, {
  attributes: true,
  attributeFilter: ['style'],
});
```
</details>

…すると無事に日本語でコメント入力ができました！

![Monosnap screencast 2025-01-23 18-03-49.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547099/3bc29f2c-31a0-10e7-9451-625373249221.gif)
天気予報APIを用いたlangchainの実装

## はじめに
LangChainを用いて、天気情報を取得する外部apiの情報を元に回答を行うエージェントを作成しました。

## 環境準備
外部のAPIは下記のサイトのものを使用させていただきました。
https://weather.tsukumijima.net/


パッケージは以下のものを利用します。
```
langchain==0.3.15
langchain-community==0.3.15
langchain-openai==0.3.1
```
キーは.envに記述します。
```.env
OPENAI_API_KEY="OPENAI_API_KEY"
```
以下がコードの全体像です。
```python
from dotenv import load_dotenv
from api import call_weather_api  # 外部API呼び出し関数をインポート
from langchain_openai import ChatOpenAI  # ChatOpenAIを使用
from langchain.agents import initialize_agent, Tool
from langchain.agents import AgentType

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

# 外部APIツールを定義
tools = [
    Tool(
        name        = "WeatherAPI",
        func        = call_weather_api,
        description = "このツールは日本語表記の都市名を引数として、外部APIから今日、明日、明後日の3日分の天気のデータを取得します"
    )
]

# ChatOpenAIの設定（APIキーを環境変数から取得）
openai_model_version = "gpt-4o-mini"
llm                  = ChatOpenAI(model=openai_model_version)

# エージェントの初期化
agent_executor = initialize_agent(
    tools, llm, agent_type=AgentType.ZERO_SHOT_REACT_DESCRIPTION, verbose=True
)

# クエリを辞書形式で渡す
query = {"messages": [{"role": "user", "content": "明日の小田原の天気は"}]}

# エージェントにクエリを送信
result = agent_executor.invoke(query["messages"][0]["content"])

# 結果を表示
print(result)
```
また、apiの内容は以下になります。
```python

import requests

# 定数として都市コード（id）の対応情報を保持
CITY_CODES = {
    "稚内": "011000",
    "旭川": "012010",
    "留萌": "012020",
    "網走": "013010",
    "北見": "013020",
    "紋別": "013030",
    "根室": "014010",
    "釧路": "014020",
    "帯広": "014030",
    ...
}

def call_weather_api(city_name: str):
    # 都市名に対応する地域コードを取得
    city_code = CITY_CODES.get(city_name)
    if not city_code:
        return f"次の都市名のデータは見つかりませんでした {city_name}"

    # 地域コードを使ってAPIを呼び出す
    url      = f"https://weather.tsukumijima.net/api/forecast/city/{city_code}"
    response = requests.get(url)

    if response.status_code == 200:
        # APIから得られたデータをJSON形式で取得
        weather_data = response.json()
        return weather_data
    else:
        return "データが取得できませんでした"
```

以下のような回答が得られます。
```
{'input': '明日の小田原の天気は', 'output': '明日の小田原の天気は晴時々曇で、最低気温は2℃、最高気温は13℃です。'}
```

試しに、apiが対応していない県名を入力とした場合の挙動を確認すると、
```python
query = {"messages": [{"role": "user", "content": "明日の神奈川の天気は"}]}
```
```
{'input': '明日の神奈川の天気は', 'output': '明日の神奈川（横浜）の天気は「晴れ時々曇」で、気温は最低5度、最高13度です。'}
```
と回答してくれました。初めの施行ではapiに対応していない県名を入れていましたが、二回目には代表的な都市として横浜の情報を検索してくれました。
Tool内のdescriptionの"このツールは日本語表記の都市名を引数として、"という記述をもとに都市名を入力してくれました。

## 最後に
天気情報を取得するAPIの情報をもとに回答するエージェントの開発を行いました。apiの引数が明確な質問だと使いやすいのではないかと思いました。

## 参考
https://qiita.com/sdt-bizdev/items/547c1f5ec9d8aacf0d1c

https://weather.tsukumijima.net/
Office 2024 ライセンス認証と更新に必要な通信

[概要と環境]
必要な通信のみを許可している会社の環境において、Office 2024 のライセンス認証および更新に必要な通信がブロックされないよう設定が必要となる。
そのため、許可が必要な URL やポート番号についてご紹介します。


◾️Office 2024 のライセンス認証に必要な通信は、以下となります。

https://go.microsoft.com/
http://go.microsoft.com/
https://login.live.com/
https://activation.sls.microsoft.com/
http://crl.microsoft.com/pki/crl/products/MicProSecSerCA_2007-12-04.crl/
https://validation.sls.microsoft.com/
https://activation-v2.sls.microsoft.com/
https://validation-v2.sls.microsoft.com/
https://displaycatalog.mp.microsoft.com/
https://licensing.mp.microsoft.com/
https://purchase.mp.microsoft.com/
https://displaycatalog.md.mp.microsoft.com/
https://licensing.md.mp.microsoft.com/
https://purchase.md.mp.microsoft.com/

[公開情報]
Title : Windowsアクティブ化または検証が失敗し、エラー コードが0x8004FE33 - Microsoft サポート
URL : https://support.microsoft.com/ja-jp/topic/a9afe65e-230b-c1ed-3414-39acd7fddf52


◾️Office 2024 の更新に必要な通信は、以下となります。

ポート : 80/443

接続先 URL は、以下
------ ここから ------
*.c2r.ts.cdn.office.net
officecdn.microsoft.com
officecdn.microsoft.com.edgesuite.net
config.office.com
mrodevicemgr.officeapps.live.com
go.microsoft.com
------ ここまで ------

以上、参考までにご紹介いたします。
NetBSDでMACアドレスの設定

SOCを使ったモジュールなどではEEPROMではなくflashにMACアドレスが保存されています。

NetBSDではデフォルトのMACアドレスはifドライバのattachの時にセットされます。SOCのifドライバーではハードコードされてることが多いです。

NetBSDでMACアドレスを設定はifconfigのmanにありますが、

```
ifconfig sip0 link 00:11:22:33:44:55 active
```

です。

/etc/ifconfig.sip0で設定するには、

```
link 00:11:22:33:44:55 active
```

になります。

この後IPアドレスを設定するとifドライバーのinitがよばれ、このアドレスを拾うことができます。

```
memcpy(sc->sc_enaddr, CLLADDR(ifp->if_sadl), ETHER_ADDR_LEN);
```

ifconfigでの設定はioctlになるので、ioctlをフックする方法も考えられますが、initの方が簡単です。

通常のMACモジュールは送信はMACアドレスの処理をしませんが、受信は設定されたMACアドレスのパケットと指定したマルチキャストとブロードキャストのパケットをホストに上げます。

LUNAの初期のころおれおれMACアドレスを使っていて、某所で怒られてO先輩がIEEEに申請していたのを思い出しました。

[FreeBSDとはちょっと違うようです。](https://qiita.com/yamori813/items/1687b068017d08358153)