OmniAICreator/Qiita-1.07M huggingface dataset:
shared_examplesにパラメータを渡す

# 共有サンプルグループにパラメータを渡す
>Passing parameters to a shared example group

* パラメータとは？

>Given a file named “sharedexamplegroupparamsspec.rb” with:
```rb
RSpec.shared_examples "a measurable object" do |measurement, measurement_methods|
  measurement_methods.each do |measurement_method|
    it "should return #{measurement} from ##{measurement_method}" do
      expect(subject.send(measurement_method)).to eq(measurement)
    end
  end
end

RSpec.describe Array, "with 3 items" do
  subject { [1, 2, 3] }
  it_should_behave_like "a measurable object", 3, [:size, :length]
end

RSpec.describe String, "of 6 characters" do
  subject { "FooBar" }
  it_should_behave_like "a measurable object", 6, [:size, :length]
end
```
>When I run rspec shared_example_group_params_spec.rb --format documentation
>
>Then the examples should all pass

And the output should contain:
```
Array with 3 items
  it should behave like a measurable object
    should return 3 from #size
    should return 3 from #length

String of 6 characters
  it should behave like a measurable object
    should return 6 from #size
    should return 6 from #length
```

https://rspec.info/features/3-13/rspec-core/example-groups/shared-examples/#:~:text=Passing%20parameters%20to,6%20from%20%23length

### 変数が後、先でも通って、変数をいきなりパラメータに入れても動いた
```rb
RSpec.shared_examples "a measurable object" do |measurement, measurement_methods,subject|
  measurement_methods.each do |measurement_method|
    it "should return #{measurement} from ##{measurement_method}" do
      expect(subject.send(measurement_method)).to eq(measurement)
    end
  end
end

RSpec.describe Array, "with 3 items" do
  it_should_behave_like "a measurable object", 3, [:size, :length], [1, 2, 3]
  #subject { [1, 2, 3] }
end
---------------(変数が2個の時しました)---------------------

RSpec.describe String, "of 6 characters" do

  #subject { "FooBar" }
  it_should_behave_like "a measurable object", 6, [:size, :length]
  let(:subject) { "FooBar" }
end
```
これでも通った
Flutter大学での8ヶ月を振り返って：学びと成長の記録in2024

## 初めに✨
まず初めに、Flutter大学アドベントカレンダーに参加する機会をいただいたKboyさんに感謝します！
この記事では、私がFlutter大学というコミュニティに参加してからの8ヶ月間を振り返り、その中で感じたことや経験したことを共有します。
少しでもこの記事が、Flutter大学に興味を持っている方やコミュニティ参加を考えている方の参考になれば嬉しいです😊

## 結論：Flutter大学に参加して良かった！🎯
結論から言うと、「<strong>Flutter大学に参加して本当に良かった！</strong>」です🙌
この8ヶ月間、以下のような貴重な経験をすることができました。

- 🌟<strong>Flutterシェアハウスへの来訪（現在は終了）</strong>
- 🛠️<strong>オフライン交流会「UTAGE」への参加</strong>
- 🤝<strong>共同開発プロジェクトへの参加</strong>
- 🎉<strong>年末の忘年会の企画・運営</strong>

## Flutter大学に入ったきっかけ🚀
私がFlutter大学に参加したのは、2024年4月。当時はFlutterを使って個人開発をしていましたが、周りに同じ技術を扱う仲間がいない<strong>「ぼっち開発」</strong>の状態でした😔

そんな中でFlutter大学の存在を知り、「Flutterの知識を深めたい✨」「開発仲間を作りたい🤝」という思いで参加を決めました。
一歩踏み出すのは少し勇気がいりましたが、それが私の開発者人生を大きく変えるきっかけとなりました。

## Flutterシェアハウスへの来訪💡
Flutter大学参加直後、個人開発が行き詰まり、仕事の環境変化も重なってメンタル的に辛い時期がありました😞
そこで、思い切ってFlutterシェアハウス内の住人であるナルンさんに「今日、遊びに行ってもいいですか？」と連絡したところ、快く受け入れてもらえました。

その日のことは今でも鮮明に覚えています。初対面にもかかわらず、シェアハウスのメンバーが温かく迎え入れてくれたおかげで、孤独感が和らぎました。この出会いが、私のFlutter大学での活動のスタート地点だったと思います。

## オフライン交流会「UTAGE」への参加🎙️
Flutter大学の目玉イベントとも言えるオフライン交流会<strong>「UTAGE」</strong>。毎月1回開催されるこのイベントでは、コミュニティのメンバーと直接会い、技術や開発に関する意見交換ができます🛠️

私は毎回参加していますが、刺激的な話や貴重な学びが得られる場として、とても価値を感じています。
普段の生活ではなかなか聞けない体験談や技術的なトピックに触れることで、自分のモチベーションも大きく高まりました📈

## 共同開発への参加🤝
Flutterシェアハウスが終了し、リアルな交流が減るかもしれないと感じた私は、共同開発プロジェクトに参加することを決めました。その理由は以下の2つです。

<strong>1\. チーム開発を経験したい🛠️</strong>
- 個人開発だけでは得られないスキルや知見を学びたいと思いました

<strong>2\. 繋がりを維持したい🤝</strong>
- Flutter大学で築いた人間関係をこれからも大切にしたいと考えたからです

実際に参加してみて感じたのは、個人開発では得られないチーム開発の知見の重要性です📚
以下のような具体的な取り組みを通じて、多くのことを学びました。

### 共同開発で得た具体的な知見とスキル

<strong>1\. GitHubのプルリクエストテンプレートを学ぶ</strong>
<p>プロジェクトでは、コラボレーションをスムーズにするためプルリクエストのテンプレートが活用されていました。</p>
<dl>
  <dd>・変更内容の概要</dd>
  <dd>・動作確認方法</dd>
  <dd>・関連する課題番号</dd>
</dl>
<p>これを使いながら、自分もテンプレートに沿ってわかりやすいプルリクエストを作成する方法を学びました。</p>

<strong>2\. 読みやすいプルリクエストの作成を意識</strong>
- チームメンバーがコードを確認しやすいよう、プルリクエストの説明をシンプルかつ明確に記載することを意識しました
- 例えば、変更した理由やコードに込めた意図を記載することで、レビュー時間を短縮し、意思疎通を円滑化することに努めました

<strong>3\. タスク管理ツール「Notion」の活用</strong>
- プロジェクトのタスク管理にはNotionが使われており、リアルタイムで進捗を共有する仕組みを学びました
- タスクがどのように管理され、どのようにメンバー間で連携が行われるのかを体験し、これを個人開発にも応用できると感じました

<strong>4\. デザインツール「Figma」の使用</strong>
- デザインプロセスではFigmaを使ったリアルタイムなデザイン共有を経験しました
- デザイン案を確認しながらフィードバックを反映したり、プロトタイピングを通じてUI/UXを検証する方法を学びました。これにより、開発とデザインの連携がスムーズに進むことを実感しました

これらの経験は、私自身の開発スキルを大きく向上させただけでなく、個人開発にも大いに役立ちました💡
1月以降も現在の共同開発プロジェクトに参加しつつ、個人開発中のアプリもリリースできるように頑張っていきたいと思います！

## 年末の忘年会の企画、運営🎉
Flutter大学のリアルイベントが減る中で、私は年末の忘年会の企画と運営に携わることとなりました。
これは、私自身が<strong>「リアルな交流の場は絶対に必要だ」</strong>と感じたからです🙌

Aoiさん、Yanooさん、ムヒョンさんと協力して企画したこの忘年会には、多くのメンバーが参加してくれました！二次会まで盛り上がり、イベントは大成功！初めて運営側に回るという経験もまた、大きな学びとなりました。

## 最後に📝
Flutter大学に参加してからの8ヶ月間は、技術的、人間的にも大きく成長できた期間でした。
孤独な<strong>「ぼっち開発」</strong>から始まり、仲間と協力し合う楽しさを知り、自分のスキルを活かしながらコミュニティに貢献する喜びを実感しました。

もしこの記事を読んでいるあなたが、コミュニティ参加を迷っているなら、ぜひ一歩踏み出してみてください。
技術、そして人間関係も、新しい扉が開けるはずです！
day11 『揉め事なしの ソフトウェア開発契約』

## はじめに
　2020年3月までは、経産省系の[IPA 情報処理推進機構](https://www.ipa.go.jp/)でさえも、ソフトウェア開発の主要な開発形態を「**請負開発**」としていたと思います。しかし、ビジネスに合わせて仕様変更を繰り返すアジャイル開発に**請負開発契約**が不向きであることは明らかで、非ウォーターフォール型開発に適したモデル契約のような試行錯誤が続いていたと思います。その間、請負契約で受注してしまったアジャイル開発はトラブル発生を避けられず、その後、日本のアジャイル開発が「内製」/「派遣契約」/「**準委任契約**」にシフトしていきますが、その過渡期に本書は日米の契約や見積り法の比較を通して重要な指摘をしてくれたと思っています。

![揉めごとなしのソフトウェア開発契約 目次2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533414/1989f3f2-5070-fd16-ff38-147486231c73.png)



## ポイント
### IT技術者の所属が契約の重要性を上げてしまう。
- 日本はITサービス企業に集中(7割以上)する。つまり、開発の契約をして作ってもらうスタイルとなる。背景に、日本は解雇が難しいという事情もある。
- 米国はユーザ企業に集中(7割以上)する。競争力のあるユーザ企業が派遣や内製で作るスタイルが主流。

### 米国は多様な契約があり、日本は３つ。
- 日本は、派遣契約、請負契約、準委任契約。
- 米国は、２０種以上のバリエーション。
- 派遣契約とその他の契約では、指揮命令権が異なり、偽装請負などに注意。

### 日本と米国での請負契約の違い
- 米国防省の調達条件
- 1980年代はウォーターフォールモデルとドキュメント重視のアプローチ「DOS-STD-2167」をIT調達の標準としていた。
- 仕様変更や追加費用などの様々なトラブルを経験した。
- **1994年には反復型の開発を推奨**する「MIL-STD-498」を定めて、翌年には、**ソフトウェア開発はウォーターフォールで行うという先入観に警告を発した**。
- 2000年台になり、調達手順書「DoD 5000.2」では、ソフトウェア調達で、**反復型開発プロセスを採用**することを**義務**付けた。

### 日本の準委任契約は、指揮命令権に注意
- 米国だとタイム・アンド・マテリアル契約に相当（価格の決め方が類似）する。SES契約で利用される。
- 準委任契約では、完成責任や瑕疵担保責任（契約不適合）が無い。
- 派遣契約は直接の指揮命令が可能だが、準委任契約にその権利はない。直接指揮命令をしたい場合には派遣契約が適合する。

### 見積りから発生するトラブル群
- 日本ではRFP(Request for Proposal)の際に要件がきちんと定義できていない。
- 昭和企業の多くには、丸投げ体質がある。契約変更にも時間がかかる。予算も固定的。だから、請負契約が好き。
- 各種見積り手法の考察もあり。各種法と見積り可能なタイミングの記載もあり。
- 不確実性コーンの議論もあり。

### スコープ変化に対応した契約方法
- IPAの[非ウォーターフォール型開発に適したモデル契約書](https://www.ipa.go.jp/archive/digital/iot-en-ci/process/ent02-c.html)
    - 基本／個別契約モデル
    - 組合モデル
- 準委任契約でのアジャイルプロセス
- 請負契約でのアジャイルプロセス


## 書誌情報
- 書籍名：揉め事なしの ソフトウェア開発契約
- 著者：英 繁雄
- 出版社：日経BPマーケティング
- ISBN：978-4-8223-5853-5
## 参考
-
変数を渡してshared examplesを実行する

# ブロックを使った共有グループへのコンテキストの提供
Providing context to a shared group using a block

>Given a file named “sharedexamplegroup_spec.rb” with:
```rb
require "set"

RSpec.shared_examples "a collection object" do
  describe "<<" do
    it "adds objects to the end of the collection" do
      collection << 1
      collection << 2
      expect(collection.to_a).to match_array([1, 2])
    end
  end
end

RSpec.describe Array do
  it_behaves_like "a collection object" do
    let(:collection) { Array.new }
  end
end

RSpec.describe Set do
  it_behaves_like "a collection object" do
    let(:collection) { Set.new }
  end
end
```
>When I run rspec shared_example_group_spec.rb --format documentation

* 実行して全て通った

>Then the examples should all pass
>
>And the output should contain:
```
Array
  behaves like a collection object
    <<
      adds objects to the end of the collection

Set
  behaves like a collection object
    <<
      adds objects to the end of the collection
```

https://rspec.info/features/3-13/rspec-core/example-groups/shared-examples/#:~:text=collection%0A%20%20%20%20%20%20%20%20returns%20false-,Providing%20context%20to%20a%20shared%20group%20using%20a%20block,a%20collection%20object%0A%20%20%20%20%3C%3C%0A%20%20%20%20%20%20adds%20objects%20to%20the%20end%20of%20the%20collection,-Passing%20parameters%20to

# 感想
後に投稿したパラメータを渡すことと違いはわからないが、なんとなく動くことしか今は理解できない。
Linear Regression With Time Series tutorial 解説 part1

https://www.kaggle.com/code/ryanholbrook/linear-regression-with-time-series

の解説を行います。

Linear Regression:回帰分析
Time Series:時系列データ
です。

![__results___5_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627091/a7453811-8d20-d781-a13b-bcfbd3186b31.png)


のような時系列データを

```
target = weight_1 * feature_1 + weight_2 * feature_2 + bias
```
のように予測すると言うものです。結果としてはn次関数を作ります。上の図では一次関数ですが、よりよくするために２次関数、３次関数・・・とすることもできます。

bias は、
2x+3でいうところの＋３の部分です。

ここでxの係数がよりよく、目的とする変数を予測できるようにしなくてはなりません。ここで、予測値と実際の値の誤差を取り、そのごさが最も小さい数字をxの係数にするということを考えるわけです。それが回帰分析です。


nつ前のデータをとってくる
```
dataframe.shift(n)
```
これにより、dataframeの列を増やす(特徴量を増やす)こともできます。そこから差分を取り・・としていくとさらに特徴量が増えます。
生まれて初めてのISUCON

# はじめに
終了直後に書いたので箇条書きにはなってしまいます...

* 結果は惨敗...
* けど、めちゃくちゃ楽しかった
* マッチングのロジックを改修しきれなかったのが悔しい

[@aipacommander](https://qiita.com/aipacommander) に誘っていただきました！
ありがとうございます🙇‍♂️

# ミステリアスアイランダーエックス
* チーム名

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2641311/a64563f6-0bee-d8c0-8b43-6e989b605eb7.png)

# 結果は惨敗だったけど...
* 結果としては惨敗でしたが(というか自分が何もできなかった...)、でも出場してよかった！
* こういった他のエンジニアとわいわいできるイベントは勉強会などと違う雰囲気でいい
* オンライン参加だったけど全然楽しめた

# 反省点
* 反省点はいっぱいある
## 本番の反省点
* ドキュメントはしっかり読む
  * 読みながらどういったサービスなのかもイメージできたら良かった

* サービスを使い倒してみる
  * ドキュメントしっかり読みつつ、サービスをつついてみて明確化したらよかった

* AIは程々に...
  * AIに聞くのもいいけど、聞きすぎてたのでコード・サービスに向き合うことが大事

## 本番までの反省点
* 素振りはたくさんやれるならやりたかった
  * 時間作ってやりましょうということですね

* スクリプトは用意する
  * シンプル時間短縮

# マッチングロジック改修できなかったのが悔しい
* 問題解説の時間で、マッチングのロジックを改善したら10万点くらいスコア伸びると言っていたので悔しい
* ただ単に配車位置から近い距離の椅子を配椅子すればいいかと思ったらマッチングしなかった
* `chair_models`のカラムに、`speed`があったので最短で配椅子できる椅子はどれかも考慮にいれることができると、discordで呟いている人がいてなるほどとなった

# でも、楽しかった
* 運営の皆さんありがとうございます🙇‍♂️
* 競技時間終了したあとのdiscordでのわいわいしてた感じは楽しかった
* 自分が改善したコードなどでスコアが上がったのは嬉しかったし、モチベーションにもなった
* 他の人の改善策などを見て「なるほど」となったし、もちろん知らないことも出てきてその都度勉強になった
* また来年、よろしくお願いします

# 参考資料
* 当日、参考になった資料

https://isucon-workshop.trap.show/

# 宣伝
自分が所属している会社についても紹介させてください 🙇‍♂️
弊社では物流課題解決や荷物を配送するドライバーの価値を向上させるために
「ピックゴー」 というサービスを運用しています

https://cb-cloud.com/

# あと、那覇Baseが本店になりました
私が在籍している那覇Baseが本店に移転しました🎉
エンジニアも募集中です！
気になる方は会社説明会も実施してますので気軽にお話聞きに来てくれたら嬉しいです😎

https://recruit-okinawa.cb-cloud.com/?utm_source=web_recruite_tokyo&utm_medium=pcheader&utm_campaign=okinawarecruitecm
RAPID 意思決定に関するフレームワーク

# 概要
- `TIME TALENT ENERGY`を読んだ時のMemo
- 意思決定の準備、意思決定、最終的に実行まで見届ける5つの主要な役割を表現している
- 全体的に各セクションをチームごとに分けて実行しているような書き方
	- なので、決定自体は決定権者が行なっているが全体で決定したような形になると予想される

## R 「提案」（Recommend）
- Rを担当する個人やチームはデータ収集、手段案の評価、提案を行う

## I 「意見提供」（Input）
- チームが相談して意見を求めるのが、然るべき状態である。Iのチームには拒否権がない代わりに、提案に対する責任も負わない

## A 「合意」（Agree）
- 法務やコンプライアンス関わることが多く、様々な手順案を評価して、絞り込まれた推奨案が意思決定賢者に示される前、提案自体に問題がないかどうかを確認するステップ

## D 「決定」（Decide）
- 一人の決定権を持つ個人が意思決定の責任を負う

## P 「実行」（Perform）
- タイムリーに決定事項を実行に移す
[Rust]Rustの構造体

## 構造体

`struct`キーワードを使うことで、独自の構造を持つ型を定義することができます。一つの型に関連する値を複数持たせることで、管理しやすくなります。

### 宣言
構造体を宣言するには、`struct <構造体名>`の後にフィールド（名前と型のペア）を列挙します。

```rust
struct User {
    username: String,
    email: String,
    sign_in_count: u64,
    active: bool,
}
```

構造体のフィールドに他の構造体を指定することもできます。

```rust
struct Address {
    city: String,
    postal_code: String,
}

struct User {
    username: String,
    email: String,
    address: Address,
}
```

### 作成

構造体のインスタンスを作成する場合は、構造体名の後に、名前と値を列挙した`{}`を書きます。

```rust
let user = User {
    username: String::from("Alice"),
    email: String::from("alice@example.com"),
    sign_in_count: 1,
    active: true,
};
```

構造体のフィールドの値として、そのフィールドの名前と同名の変数を設定する場合、`:`を省略することができます。

```rust
let username = String::from("Bob");
let email = String::from("bob@example.com");

let user = User {
    username,
    email,
    sign_in_count: 0,
    active: false,
};
```

同じ構造体の別のインスタンスからコピーしつつ、一部のフィールドを変更したい場合は`..`を使うことができます。

```rust
let user1 = User {
    username: String::from("Charlie"),
    email: String::from("charlie@example.com"),
    sign_in_count: 1,
    active: true,
};

let user2 = User {
    email: String::from("charlie_new@example.com"),
    ..user1
};
```

### 参照

構造体のフィールドには`構造体名.フィールド名`でアクセスできます。

```rust
println!("Username: {}", user.username);
println!("Email: {}", user.email);
```

#### デストラクト

ある構造体のインスタンスのうち、指定したフィールドを個別に新しい変数として抜き出したい場合はデストラクト構文が使えます。

```rust
let User {
    username,
    email,
    sign_in_count,
    active,
} = user;

println!("Username: {}", username);
```

:::note
TypeScriptのオブジェクト型にかなり近い使用感なので、とっつきやすいですね。TypeScriptでいう分割代入やspread演算子（`...`）相当のものが用意されているのも親しみがわきます。
:::

:::note warn
構造体のインスタンスを関数に渡すときなどは、インスタンスへの参照が渡されます。
:::

## タプル構造体

構造体には他にも種類があり、フィールド名を持たず型の組み合わせだけを持つ「タプル構造体」というものがあります。基本的に、構造体はいくつかの値をまとめて整理するために定義しますが、その際に名前を付ける必要がない（冗長である）場合に使用します。

```rust
struct Color(u8, u8, u8);

let black = Color(0, 0, 0);
println!("Red: {}, Green: {}, Blue: {}", black.0, black.1, black.2);
```

## ユニット構造体

中身がない構造体を「ユニット構造体」と呼びます。中身がないため値は持ちませんが、後日紹介するトレイトを実装することで、値はないが関数はある構造体を表現できます。

```rust
struct Unit;

impl Unit {
    fn do_something() {
        println!("Unit struct method called");
    }
}

Unit::do_something();
```

:::note
ユニット構造体の出番がよくわかっていません。いくつかの関数をユーティリティとしてまとめたいときに使うんでしょうか。
:::
生成AIでマイクラ！？Oasisとは

# 初めに
こんにちは、
Akira_0809です
今回は、マイクラのプレイ画面を生成できるAIについて紹介します。

# Oasisとは

https://oasis-model.github.io/

Decartによって開発された生成AIです。
ユーザーの入力に応じてマイクラの画面が生成されます。
ユーザーはリアルタイムに生成される世界でブロックを破壊したり設置したりすることが出来ます。

# デモ
**なんとデモが公開されているのでプレイ出来ます！！！**

https://oasis.decart.ai/welcome

# 簡単な仕組み
簡単に仕組みを説明します、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3241738/e8fe9d0a-b9ba-f948-573f-2f84116f188a.png)

## 空間オートエンコーダー

画像データを効率的に処理するために、Vision Transformer (ViT)ベースのオートエンコーダーを使用しています。

#### エンコーダー
入力画像を特徴空間に圧縮します。これにより、高次元の画像データを低次元の表現に変換します。

#### デコーダー
圧縮された特徴空間から元の画像を再構築します。この再構成によって、生成されたフレームの品質が保証されます。

ViT-VAEは、通常の畳み込みニューラルネットワーク(CNN)と比べて、長距離の依存関係を効率的に学習できるため、画像の細部や広範囲の文脈情報を保つの適しています。

## ラテントディフュージョンモデル

Transformerに基づく拡散モデル(DiT)が採用されています。

### ディフュージョンプロセス
#### ノイズ付加と除去
データに徐々にノイズを加え、ランダムな状態にします。その後、学習された拡散過程を逆転して、ノイズからデータを生成します。
#### 長時間の安定性
フレーム間の連続性を保つために「動的ノイズスケジューリング」を導入。初期のフレームではノイズを注入して小さな誤差を修正し、後半では詳細なディテールを復元します。

### オートリグレッシブ生成
フレームを1つずつ順番に生成し、各フレームが前のフレームに依存します。この手法により、ユーザーの入力が生成結果に反映されます。

### つまり
**ユーザーの入力によって前のフレームを変化させるイメージ**

# 今後の展望

現在は、360p解像度で約20フレーム/秒のパフォーマンスを実現しています。
今後は、Etched社のSohuチップによって4K解像度での実行が可能になる予定です。

# まとめ
デモプレイしてみたけど、夢の中のマイクラみたいで面白かった！
みんなもやってみてね！
ISUCON14に出場して惨敗しました

この記事は「[CBcloud Advent Calendar 2024](https://qiita.com/advent-calendar/2024/cbcloud))」の8日目の記事です。

# 概要
- 初出場です！！！！
- 負けました！！！！！
- 楽しかった！！！！！！


# 初めてです！！！

ずっとでるぞでるぞ！！！って言ってたら早N年立ちましたが、たまたま今回は申込みすることができました！やったね！


これまでISUCON出てた人たちの話は聞いてたので、素振り大事だぞ準備大事だぞって聞いたので、それも含めやるぞ！！！って気持ちでしたが、Webパフォーマンスチューニングの本買ってあとはISUCONとはなんぞやとりあえず過去問の環境作るか、ベンチマーク叩いてふーんであっというまに12/8を迎えました。ピンチです。

ちなみに、一緒のチームの [@Riku__Miyagi](https://x.com/Riku__Miyagi) とでました


# 当日

9時出社です。平日と一緒だね

## やったこと

* 各種サーバへGitHub連携
* newrelic連携
* Chrome devtoolsでサービスの動きをみてみる
* slow-queryの出力設定
* slow-queryの分析
* 各テーブルへインデックスの貼り付け
* 椅子合計移動距離サマリテーブルの用意
* マッチングアルゴリズムの改修

## 各種サーバへGitHub連携

ぐぐってたらこのブログ（？）に出会いました。最高。感謝

https://isucon-workshop.trap.show/text/chapter-3/0-Github.html


この通りにやったら普通にできるので、来年はスクリプト化してやりたいなと思いました

## newrelic連携

~~会社がnewrelic使っているので勝手に導入しました~~

まぁいつも通りに利用して、ベンチ回したときのメトリックスやモニタリング結果で、どのAPIが重たいかなーでみてました

## Chrome devtoolsでサービスの動きをみてみる

notificationがめっちゃ叩かれているな。でおわってしまいました

## slow-queryの出力設定

これまた素晴らしいPostがあったのでこれを参考にしました


https://isucon-workshop.trap.show/text/chapter-3/1-SlowQueryLog.html

## 各テーブルへインデックスの貼り付け

スロークエリ確認して、とりあえずインデックス貼り付けをせっせとやりました

で、計測するツールで叩きまくった結果、スコアがデフォから+1000点ぐらいになりました。よい！！

12時ぐらい

ここから先が早くも伸び悩みした話です

## 椅子合計移動距離サマリテーブルの用意

スロークエリ調べてたら、明らかに `chair_locations` の履歴テーブルで椅子ごとの移動距離計算するクエリが重いのはわかったので、サマリテーブルつくろーってなりました

なったんですが、最初AIに丸投げしてしまい、何も考えずでてきたベースで実装した結果、なんもうまくいかなかったので、一度反省し（すでに14時）ちゃんとコード読もうって動きにしました

そうしたら、こうすればいけるなってことも見え、実装したんですが、結局2000点を少し超えるぐらいで、執着。僕達の夏（冬だけど）は終わりました

スロークエリはだいぶ片付けられたけど、苦しめられたのはベンチを回すと、最終結果数値は移動距離の結果は合うが、途中ベンチ側も移動距離を計算しているようで、オーナー側で取得している移動距離が合いませんワーニングが多発しました。これがまだよくわかっておらず、修正を頑張ったけどタイムアップで夏が（冬(ry）終わりました。なんか勘違いしているのは拭えないですが、見つけられなかったくやしい〜



## マッチングアルゴリズムの改修


`slow-queryの分析` のやっているなかで、椅子のマッチングアルゴリズムが結構てきとうなことに気がついて、これやればいいんじゃね？ということで相棒にお願いしたんですが、こちらもなかなかうまく結果がでず。見るところはお互いよかったと思うんですが、成果につなげることができなかった。くやしい〜〜〜


# 振り返り

## 前半AIに丸投げしすぎてコードに向き合わなかったこと（涙）

思ったより改善しなかったので、出題する内容がさすが！と思いつつ、丸投げ過ぎて時間つかちゃったなという反省があります。ある程度のあたりはちゃんと自分でみて、理解の補助してもらいつつ、自分で考える（または引き出しを増やした上で）というのは必要だなっておもいましたまる

## サービス全体の仕様を理解した上で、コードの挙動を把握しようとしなかったこと

いつも仕事では全体を俯瞰しようって意識しているはずなのに、点で捉えてしまって（涙）結局全体を見ずに終わってしまいました〜〜〜〜〜


まずサービスを使ってみてーから考えてもよかったなーと考えています

## ベンチ回す前に挙動を確認する環境を用意したい

サーバが3台あるので、そういうことか？とは思いましたが、動作確認をする環境はどうにかこうにか作りたいなって考えています。SQLならまだDBに繋いで確認はできますが、アプリケーションとセットで動くかどうかは事前に確認できると、わざわざベンチ回すまでの時間とらなくていいなと思っています

## 素振り不足

前半の設定は思った以上に進んだなーと思いつつ、ただ、全部スクリプト化してたら、時間確保できたなーって思ったのと、あとはチューニングへの引き出しが少ないので、後半コードを読んで動かしてみて〜の繰り返しだったので、もっとあたりをつけられるようにしたいなと思いました


# 雑感

悔しいですが、たのしかったぞーーーーーー。来年再チャレンジします。運営の皆様ありがとうございました！
2.Learn-Discord.サーバー管理の基本


Discord初心者向けにサーバー運営の基本を載せるだけです。（書きかけでも頻繁にコミットしてます。）  
ここではWindowsで行うのでほかのデバイスだとできないことや違うところがあるかもしれません。 
#### 目次
2. サーバー管理の基本
    1. メンバー管理
    2. 監査ログの利用方法
    3. 荒らしへの対策・対処方法
    4. トラブルへの対処
    5. SevenBotの操作
    6. ProBotの操作
    7. Automodの設定の基準

## 1.メンバー管理方法
### メンバーのタイムアウト・キック・BAN
メンバーの名前を右クリック、またはモデレータービューでタイムアウト・キック（追放）・BANなどの操作ができます。  
違いは
タイムアウト：一定時間チャットの送信やVCへの参加を制限すること。  
キック（追放）：サーバーから追放します。招待を受けたりすればまた入ることができます。
BAN：サーバーから追放してさらに解除しない限り参加できないようになります。IPアドレスも記録されるので同じデバイスで違うアカウントを使っても入れません。

### メンバー画面
この画面ではメンバー  
    サーバーに参加してどれほど  
    Discordに参加してどれほど  
    どの招待から入ってきた  
    ロールは何がついているか
    タイムアウトなどの処置を受けていないか
など重要な情報が一覧で載っています。
一括でBANなども可能です。

## 2.荒らしへの対策・対処方法
荒らしへの対策にはAutomodやBotの利用、モデレーターの採用などが効果的です。
荒らし対策にはVoltex、Wickなどがありますが、難易度が高く、大規模サーバーにしか向いていないという点があります。
今回はProbotを後に紹介します。

## トラブルへの対処法
サーバー運営ではどうしても人が絡むので、トラブルなどが発生する可能性があります。
この対策にはモデレーターや鯖主が仲裁に入るか隔離するなどがあげられます。
あまり多くの人の前で言い争いなどが発生するとメンバーに不快なイメージを与えてしまうかもしれません。
もしサーバーに直接かかわりがあるわけではない場合、DMなどで話すなどを提案しましょう。

## SevenBotの操作
SevenBotは多機能ですがアプリケーションコマンドに対応していないため、慣れるまで時間がかかります。
SevenBotでできること、やってることについて軽く触れます。
sevenbotはたいてい" sb# "から始まります。

1つコマンドをしょうかいします。、ロールパネルを作成すれば、メンバーの任意でロールの選択ができるようになります。
ロールパネル作成：```sb#role```
ロールを追加するには:tools: リアクションを追加してから、ロールをメンションで送信することでできます。

そのほかのコマンドはこちらを見てみてください。
https://sevenbot.jp/commands

## Probotの操作
Probotはサーバー管理に便利なボットです。
いろいろなサーバーで採用されているので操作に慣れておくといいかもしれません。
主にウェブサイト上で設定などをします。

下手にここで使い方を紹介するより公式ドキュメントを利用するほうがわかりやすいでしょう。
https://docs.probot.io/ja/docs/intro

## Automodの設定の基準
Automodの設定はやりすぎるとメンバーがペナルティを受けたりしゃべりにくくなったりするので、サーバーの規模に応じて設定する必要があります。

スパム疑惑のあるコンテンツをブロックやBlock Mention Spamなどは設定してもよいと思います。
ただゲーム募集などでメンションなどを多用する場合は、ゆるめに設定しておきましょう。

## 終わり
これで大体2章終わりになります。
自分や周りの経験を主に取り上げているので、あくまでも参考の1つにするとよいと思います。
間違っていることなどがあれば教えてください。
間違えてブランチを切ってしまったら

# 今日の学びに至った背景
　mainブランチからbranchAとbranchBを切る（作成する）つもりが、branchAを編集・commitした後にbranchAからbranchBを切ってしまった。そのため、branchAからbranchB(old)への変更のみ反映したブランチを、mainブランチから新たにbranchB(new)として切る必要に迫られた。
 
 **以下、chatGPT4-oの援助を受けて生成した文章です。**

# Gitのブランチ修正に関するトラブル解決手順書


## **1. 誤って分岐させたブランチを修正**

### **1.1. 問題**
- ブランチを作成した際に、意図しないブランチから分岐してしまった。
- 修正後の状態：正しい基点（例：`master`）を基に新しいブランチを作成。

### **1.2. 解決手順**
1. **現在のブランチを削除**（ローカルに不要な場合）:
   ```bash
   git branch -D wrong-branch
   ```

2. **正しい基点から新しいブランチを作成**:
   ```bash
   git checkout master
   git checkout -b correct-branch
   ```

3. **リモートブランチも削除（必要なら）**:
   ```bash
   git push origin --delete wrong-branch
   ```

4. **新しいブランチをリモートにプッシュ**:
   ```bash
   git push -u origin correct-branch
   ```

---

## **2. ブランチの内容をリセットして基点を修正**

### **2.1. 問題**
- 作成したブランチに意図しない変更が含まれている。
- 修正後の状態：ブランチの内容をリセットし、正しい基点から修正を開始。

### **2.2. 解決手順**
1. **対象ブランチに移動**:
   ```bash
   git checkout branch-to-reset
   ```

2. **正しい基点の状態にリセット**:
   ```bash
   git reset --hard master
   ```

3. **リモートリポジトリにも反映**:
   ```bash
   git push origin branch-to-reset --force
   ```

---

## **3. 不要な変更を含むコミットを修正**

### **3.1. 問題**
- 誤って作業した変更やコミットがブランチに含まれている。
- 修正後の状態：意図したコミットだけを保持。

### **3.2. 解決手順**
1. **コミットを確認**:
   ```bash
   git log --oneline
   ```

2. **不要なコミットを削除**:
   ```bash
   git reset --hard HEAD~n
   ```
   - `n` は削除したいコミット数。

3. **修正内容を反映（リモートの場合）**:
   ```bash
   git push origin branch-name --force
   ```

---

## **4. 必要なコミットのみを新しいブランチに反映**

### **4.1. 問題**
- 元のブランチに不要な変更が含まれているが、一部の変更は新しいブランチに引き継ぎたい。
- 修正後の状態：必要なコミットだけを新しいブランチに適用。

### **4.2. 解決手順**
1. **新しいブランチを作成**:
   ```bash
   git checkout master
   git checkout -b new-branch
   ```

2. **元のブランチのコミットIDを確認**:
   ```bash
   git log --oneline wrong-branch
   ```

3. **必要なコミットを適用**:
   ```bash
   git cherry-pick <コミットID1> <コミットID2> ...
   ```

4. **コンフリクトが発生した場合**:
   - ファイルを修正後、以下を実行:
     ```bash
     git cherry-pick --continue
     ```

---

## **5. 過去の履歴から状態を復元**

### **5.1. 問題**
- 誤った操作で必要なデータが失われた、またはコミットが上書きされた。
- 修正後の状態：履歴から正しい状態を復元。

### **5.2. 解決手順**
1. **過去の履歴を確認**:
   ```bash
   git reflog
   ```

2. **復元したいコミットIDを取得**:
   - `git reflog` の出力から復元するコミットIDを特定。

3. **対象ブランチを復元**:
   ```bash
   git checkout -b restore-branch <コミットID>
   ```

4. **リモートに復元したブランチを反映**:
   ```bash
   git push -u origin restore-branch
   ```

---

## **まとめ**
この手順書では、誤ったブランチ作成や不要な変更が含まれるトラブルに対処する方法を網羅しました。トラブルの種類に応じて適切な手順を実行することで、Gitのブランチ修正を効率的に行えます。
New Relicを使ったモニタリングの挑戦：K8sとJava APMの導入体験

# はじめに

こんにちは、今回はNew Relicを使ってKubernetes（K8s）とJavaアプリケーションのパフォーマンスモニタリングを実装した際の経験を共有します。このアドベントカレンダー記事が、同じような課題に直面している方の参考になれば嬉しいです。そして、Apple Watch series 10を狙っています！

## New Relic for K8sの導入

Kubernetesはそのスケーラビリティと柔軟性から、私たちのプロジェクトでも積極的に使用されています。そのため、まずK8sクラスターのパフォーマンスを把握するためにNew Relicを導入しました。

### 導入の流れ

1. **New Relicアカウントの設定**: まず、New Relicのアカウントを用意します。ここで取得したAPIキーが必要になります。
   
2. **K8sクラスターへのエージェントの設置**: New RelicのクラスターエージェントをHelmを使って簡単にインストールできました。Helmチャートを使うことで、エージェントを迅速にクラスターに展開できます。

   ```bash
   helm repo add newrelic https://helm-charts.newrelic.com
   helm install newrelic-bundle newrelic/nri-bundle --set global.licenseKey=<YOUR_LICENSE_KEY> --set global.cluster=<CLUSTER_NAME>
   ```

3. **メトリクスの確認**: ダッシュボードにアクセスすると、クラスター全体のパフォーマンスやリソース使用率を視覚的に確認することができました。

### 効果と課題

K8sクラスターのパフォーマンスをリアルタイムで監視できるようになり、異常検知が迅速化しました。ただし、導入初期には大量のメトリクスデータが収集されるため、ingested data量が想定以上に膨らんだという問題に直面しました。

## Java APMの導入

次に、Javaアプリケーションのモニタリングを目的として、New RelicのAPM（Application Performance Monitoring）を導入しました。

### 導入プロセス

1. **APMエージェントの設定**: JavaアプリケーションにAPMエージェントをインストールします。`newrelic.jar`の配置と`newrelic.yml`の設定を行いました。

   ```bash
   java -javaagent:/path/to/newrelic.jar -jar myapp.jar
   ```

2. **データ収集の開始**: アプリケーションを再起動すると、自動的にデータが収集され始め、New Relicのダッシュボードにメトリクスが表示されます。

### 課題と解決策

Java APM導入後、ingested data量が膨大で契約している7.5TB/月を超えそうになりました。このため、以下の設定を無効化しました：

- **Distributed Traceを無効化**: `newrelic.yml`ファイルで無効化しました。
  
- **Metricsを無効化**: Metricsも無効化しました。その他にもほとんどの設定を無効化しました。

## まとめ

New Relicを用いたK8sとJava APMの導入は、システム全体のパフォーマンスを詳細に把握するための強力な手段となりました。一方で、過剰なデータ量といった課題と向き合う必要がありました。これらの経験が、同じような取り組みを考えている方にとって少しでも役立つことを願っています。

もし、この記事があなたのお役に立てたら嬉しいです。また、成功や失敗、そして学んだことを共有することの価値を感じていただければ幸いです。
続 Apple Vision Pro を利用するために有益なアクセサリー類の検証

[以前投稿した記事](https://future-architect.github.io/articles/20240905a/)の続きの記事になります。まだ、以前の記事をご覧いただいてない方は、先に以前の記事をご覧ください。

下記は、前回紹介したアクセサリのその後3ヶ月程使用してみた感想になります。

![IMG_0053.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21380/88277a75-5d59-bba6-bd33-43636f557dd4.jpeg)
INFINITY ONE Air Cover 2.0 + ANNAPRO 圧力軽減コンフォート ヘッド ストラップ 2 + Soloニット用バッテリーホルダー 


###  [Soloニット用バッテリーホルダー](https://www.amazon.co.jp/gp/product/B0CX55D151/)
- 3Dプリンタで出力されたもので、特に素材も耐久性があるものではないので、ニットに装着するためのクリップ部分が使用するに従い、結構、開いてくるようになりました。これは単純に何回も使用したからというだけではなく、経年劣化的な面もあるような感じです

### [Anker モバイルバッテリー Power Bank (10000mAh, 30W)](https://www.amazon.co.jp/gp/product/B0BYJNF5Q4/)
- 当初想定していた通り、本体付属バッテリー+本バッテリーx2の運用は便利なものでした

### [ユニクロ ラウンドミニショルダーバッグ](https://www.uniqlo.com/jp/ja/products/E470040-000/)
- Vision ProにANNAPROの製品を装着した場合は収まらなくなりますが、他の場合についてはピチピチになりますが、かろうじてファスナーを閉じられる感じです

### [Ulanzi カメラ用ラッピングクロス 45cm×45cm](https://www.amazon.co.jp/gp/product/B0CKQJ1Z87/)
- 上記のショルダーバックに収まらなく他のバッグなどに入れる際はこちらが便利でした

### [elago シリコントレー](https://www.elago.com/products/silicone-tray)
- こちらは現状一つしか購入していませんが、Vision Proを使用するデスク毎に用意したいと思いました

### [Apple Vision Pro用デベロッパストラップ](https://developer.apple.com/visionos/developer-strap/)
- 無線だと安定しない環境や、[Enterprise API](https://future-architect.github.io/articles/20240906a/)のUVCデバイス入力機能を使うためには必須となるため、購入して良かったと感じました。ただし、UVCデバイス入力機能を使いたいVision Pro全台数にこれを追加で購入する必要があると考えると現実的ではないかと思います

### [SHINOBU工房 Lens Protector](https://shintak.booth.pm/items/5927657)
- 普段使いではライトシーリングを外した状態となってしまい、取り付けはガバガバになってしまったが、レンズを守るために一応挟んで使用しています

### [SoloTop: 上方向にSoloニットを追加するためのアダプター](https://www.amazon.co.jp/gp/product/B0D95ZHSF3/)
- Apple Vision Pro用デベロッパストラップと組み合わせることができない点のため、ほぼ使わなくなっています

### [SHINOBU工房 ヘッドバンド Band Pro v2.1](https://shintak.booth.pm/items/5757496) with [SHINOBU工房 ノーズパッド Nose Pro](https://shintak.booth.pm/items/5910120)
- 前回書いた通り使用時に痛い部分があるため、使わなくなリました

### [ANNAPRO 圧力低減コンフォート ヘッドストラップ](https://annapro.com/ja/products/comfort-head-strap-for-apple-vision-pro)
- Apple Vision Pro用デベロッパストラップと組み合わせるために、一部切り取って対応したりしました

### [INFINITY ONE Air Cover 2.0 with Nylon Tape](https://infinityone3d.com/en/collections/apple/products/air-cover-2-0-para-apple-vision-pro?variant=48117912699222) 
- その後、手に入れ、装着感などを検証してみました
- Soloニット用バッテリーホルダーとの組み合わせでの運用は、他と比べて、レンズと眼球間の距離が近く視界も広くなり、かつ、装着感に無理が少なく、非常に良いものでした
- 問題点としては、上部で支える「Nylon Tape」の一部の留め具が薄すぎる3Dプリント出力のため、ある程度使用していたところ破損してしまったところです

### [ANNAPRO 圧力軽減コンフォート ヘッド ストラップ 2](https://annapro.com/ja/products/comfort-head-strap-2-for-apple-vision-pro) (新規)
- 頭の湾曲の形が欧米人向けで曲率が高く、少々痛いので左右の端を少し曲げて使用しています
- 現在は、これとINFINITY ONE Air Cover 2.0と組み合わせて使用しています

## まとめ
今回は前回から3ヶ月程経たタイミングで使用感の続きを書いてみました。
今後もより快適な装着感となるアクセサリーやその組み合わせを追求していきたいと思います。
基礎理論:n進数・基数変換

# はじめに
基本情報技術者試験の学習中なので、学んだことをメモします
誤り等ございましたらご教示いただけますと幸いです🙇

# n進数
n進数とは、1桁の数をn個の記号で数値を表現する方法のことです。

#### 10進数
普段よく使用する10進数は「0,1,2,3,4,5,6,7,8,9」の10個の記号で数値を表現します。簡単に言うと0から9まで行ったら桁上がりするのが10進数です。

#### 2進数
コンピュータは「0」と「1」しか理解できません。そのため基本的に0と1で数値を表現する2進数を利用し高速で処理をしています。

::: note 🌱Point🌱
コンピュータが扱うデータの最小単位のことを1ビットといいます。 
ビットが8個集まったものをバイトと呼びます。
```
01234567
8bit = 1byte
```
:::

#### 16進数
16進数では、0~9、A~Fの16個の記号で数を表現します。
10進数でいう"10"は16進数で"A"、
10進数でいう"15"は16進数で"F"になります。

### n進数の表現方法
同じ数値を表しても、何進数化によって表現が異なります。
()の中がn進数のn

10進数:17(10)
2進数:10001(2)
16進数:11(16)

### n進数の基数と重み
基数とは、n進数のnの部分です。桁が上がるとn倍になるかを表します。
重みとは、その桁に何の固まりが入っているのかを表します。
10進数の"10の位"に"2"が入っているということは、
"10の固まり"が"2個"ということ！
```
10進数で326.9という数字は
100が3個
10が2個
1が6個
0.1が9個
```

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/6a498aa8-0212-0ea7-6b6e-c32f9284032e.jpeg">

2進数の各桁の重みは、
整数部：2⁰,2¹,2²…
少数部：2⁻⁰,2⁻¹,2⁻²…

# 基数変換
基数変換とは、n進数のnを他の数字に変換して表現すること。

例)
10進数の17 → 2進数の10001
上記は10進数から2進数への基数変換

### n進数から10進数への変換

#### 2進数を10進数に変換
各桁の重みと数値をかけ算して合計すると変換される
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/9f225d63-35e5-592f-6935-8649369d70a0.jpeg">

2進数の1111.111を10進数に変換すると、15.875

#### 8進数を10進数に変換
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/6b809b21-4b67-4a6e-bda3-001d2465c1e8.jpeg">

8進数の137.4を10進数に変換すると、95.5

#### 10進数から2進数への変換

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/d3a296cb-e904-d2e5-4b29-b1c4ac6bbff6.jpeg">

#### 2進数から8進数への変換
2進数の小数点を基準に3桁ずつ区切って、各ブロックを8進数に変換する

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/651e041f-6b31-0b96-10a3-0ce248e71b6c.jpeg">

#### 8進数から2進数への変換
さっきと逆のことをすればOK
    ![JPEG画像-4228-ABD5-DC-0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782860/c9d60333-d670-fd77-97b7-c847ea961512.jpeg)

#### 2進数から16進数への変換
8進数の3桁区切りみたいに、4桁区切りにすればOK
逆も同じ

# おわりに
理解するとそんなに難しくないんだけど、
計算問題ってだけで面食らってしまいます…😞
今後も頑張ってアウトプットします！
【個人開発】学習記録アプリ開発の振り返り(React、jest、Firebase、Supabase、GitHub Actions)

# はじめに
完了まで約2ヶ月かかりました。
分からないことが多く、大変でしたが、勉強になりました。

# やったこと
開発を通して、基本的なことを理解できました。
- React
- Firebase
- Supabase
- GitHub Actions (CI/CD)
- Jestを使ったテスト

付随して、以下も対応しました。
- Qiitaに1ヶ月で9本記事投稿
- ドキュメントを読む

# 学んだこと
- やりたいことをAIに相談した後、回答をそのまま貼り付けるのではなく、「どういうコードなのか」「何をやろうとしているのか」 を考える
- ドキュメントは、課題があり、それを解決するために読む(やみくもに全てを読む必要はない)
- まずはドキュメントを読む
    - Chakra UIは、直前にv2からv3へ大幅リニューアルされていたため、情報がなかったのでドキュメントを読む癖がついた
- Qiitaなどは理解を助けるために読む

# 反省
- 理解せずにコードを貼り付けた結果、深みにはまった
    - 「何をやりたいのか」「コードの内容は何か」を考えなかった
- 課題に直面した際、情報収集の精度を高める必要がある

# 振り返り
- 分からないことが多くて苦しい場面もあったが、<a href="https://qiita.com/Sicut_study/items/aad3c38ab0fd1df894b2">知らないと後悔する最強のエンジニア勉強法</a>にあるような、「積極的に脳に負荷をかけること」 ができた
- 本を読んでサンプルコードを試して「やった気」になっていた自分に気づき、「手を動かしながら考えること」 の重要性を実感した
- <a href="https://qiita.com/Sicut_study/items/79838a4b8ec36bc3a961">人類は気づいていた。この勉強の仕方が1番早いということを。</a>にあるような問題駆動プログラミング法のやり方を実践できた
- 「問題」は「ギフト」であり、問題が起きることで成長の機会が与えられると実感した
- 実践練習を重ねることが、成長の最速の道だと感じたので、どんどん挑戦していきたい

# 使用技術
React
Firebase
Supabase
GitHub Actions
Jest
vite
ChakraUI

# おわりに
引き続き頑張ります。

# 参考
知らないと後悔する最強のエンジニア勉強法
https://qiita.com/Sicut_study/items/aad3c38ab0fd1df894b2

人類は気づいていた。この勉強の仕方が1番早いということを。
https://qiita.com/Sicut_study/items/79838a4b8ec36bc3a961
【コアウェブバイタル】X（旧 Twitter）アカウントのWebサイト埋め込みを最適化する

:::note
本記事では、X（旧 Twitter）を「X」と簡略化して記載します。
:::

## はじめに

Webサイトの表示速度を最適化することは、ユーザー体験の向上とSEO対策の両面で重要です。特に、XのようなSNSコンテンツを埋め込む場合、適切な実装を行わないとページの読み込み速度に大きな影響を与える可能性があります。本記事では、Xアカウントを埋め込んだ際に発生する可能性のあるパフォーマンス上の問題点と、JavaScriptを使用した最適化方法について解説します。

## Webサイトへのコンテンツ埋め込みの意義

Xのコンテンツをウェブサイトに埋め込むことには、以下のような意義があります。サイトのコンテンツ戦略において、これらのメリットを活用することで、より効果的な情報発信が可能となります。

まず、他社のサイトとの差別化を図ることができます。リアルタイムで更新される情報を提供することで、サイトの価値を高めることができます。また、定期的な情報更新は検索エンジンからの評価向上にもつながります。さらに、XとWebサイトの間でユーザーの相互送客が可能となり、より広範な情報発信が実現できます。

## Xアカウント埋め込み時の技術的課題

アカウントの埋め込みを実装する際には、以下のような技術的な課題があります。

### パフォーマンスへの影響

アカウント単位での埋め込みを行う場合、Xプラットフォームにより制御された数の最新投稿が表示されます。この初期読み込みとその後の追加読み込みの処理が、ページの表示速度やスクロール時のパフォーマンスに影響を与える可能性があります。

### プラットフォームによる制限

標準の埋め込みウィジェットでは、表示方法や投稿の表示数はXプラットフォームにより制御されており、カスタマイズが限られています。X API v2は主にデータ取得や分析用途向けに設計されており、埋め込みウィジェットの表示制御用途としては適していません。そのため、パフォーマンスの最適化は、JavaScriptを使用した読み込みタイミングの制御が現実的な解決策となります。

::: note warn
「data-tweet-limit」属性やmax-heightによる制御もできるとされていますが、うまく機能しないこともあるため、JavaScript制御の方法を行いました。
:::

## JavaScriptによる最適化実装

Intersection Observer APIを使用することで、ユーザーの閲覧状況に応じた効率的な読み込みを実現できます。以下が具体的な実装例です。

```javascript
// Xウィジェットの動的遅延読み込み実装
document.addEventListener('DOMContentLoaded', function() {
  function loadTwitterWidget() {
    if (window.twttr) return;

    // Xウィジェット用のスクリプトを動的に生成
    const script = document.createElement('script');
    script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
    script.setAttribute('charset', 'utf-8');
    document.body.appendChild(script);
  }

  // Intersection Observer の設定
  const options = {
    root: null,
    rootMargin: '80% 0px',  // ビューポートの80%手前で発火
    threshold: 0
  };

  // Intersection Observer のインスタンス作成
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 要素が視界に入った場合
      if (entry.isIntersecting) {
        loadTwitterWidget();
        observer.disconnect();
      }
    });
  }, options);
  
  // 監視対象の要素を取得して監視を開始
  const twitterElement = document.querySelector('.twitter-container');
  if (twitterElement) {
    observer.observe(twitterElement);
  }
});
```
### 実装のポイント
![スクリーンショット 2024-12-08 19.02.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624902/3cde2077-bff0-0057-9b5e-5dff42e4aad1.png)
<sub>今回の処理内容のイメージ</sub>


**効率的なリソース管理**
ユーザーが実際にXウィジェットの位置までスクロールした時点で初めてスクリプトを読み込むため、初期ページ読み込み時の負荷を軽減できます。

**ユーザー体験の向上**
ページの初期表示が高速化され、ユーザーにストレスを与えにくい実装となっています。

**柔軟な制御**
rootMarginの値を調整することで、実際にウィジェットが表示される前にどれだけ早く読み込みを開始するかを制御できます。

## まとめ

Xアカウントの埋め込みは、Webサイトのコンテンツを豊かにする有効な手段です。しかし、そのパフォーマンスへの影響を考慮し、適切な最適化を行うことが重要です。

Xコンテンツを埋め込むことで、他サイトとは内容を差別化しやすく、SEOに好影響を与えることができるとされていますが、パフォーマンスを悪化させてしまうとSEOに悪影響を与えてしまいます。

そうならない為にも、本記事で紹介したIntersection Observer APIを活用した遅延読み込みの実装は、この課題に対する効果的な解決策の一つとなると思います。

ぜひ活用していただければと思います！また、X埋め込みに関してより良い方法があればぜひご教授いただけると嬉しいです！

本記事を一読いただきありがとうございました！
1分でできる制作費一枚56円のデジタル名刺の作り方

[KDDI エンジニア＆デザイナー Advent Calendar 2024](https://qiita.com/advent-calendar/2024/kddi)の10日目の記事を書いています。

# デジタル名刺、なんかかっこいい
最近イベントに行くと、プレーリーカードをはじめとしたデジタル名刺をお持ちになっている方がかなり多い！
プレーリーカードとは中にNFCタグが入っているデジタル名刺サービスのことで、スマホをかざすとアプリを開いたりリンクを開いたりすることができます。
しかもプレーリーカードだと、だいたいSNSのアイコンを印刷されている方が多いので「ああ！あの方！！」認識ができるのでめっちゃ良い…。
同じ機能のものなら自作もできるよ！との情報をいただだき、自分でも作ってみました。

誇張抜きで1分くらいで作成できます。

https://prairie.cards/

# 作り方
## NFCタグの準備
自分で書き込みができるNFCタグを準備します。
私は秋葉原のピカリ館さんで買いました。意外にも千石電商さんと秋月電子さんでは売っておらず。。
5枚入りで280円！そんなに大量に必要としてもないし、うれしいお安さ。

![IMG_8446.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629241/a84f0631-1af9-670a-ba73-a24290bc86d6.jpeg)

https://www.akiba-led.jp/product/1561

## NFC Toolsインストール
NFCタグを読み書きできるアプリをインストールします。

▼iPhone

https://apps.apple.com/jp/app/nfc-tools/id1252962749

▼Android

https://play.google.com/store/apps/details?id=com.wakdev.wdnfc&hl=ja&pli=1

## ＵＲＬの登録
アプリを開いた後「書く」を選択します
![IMG_8449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629241/4f039bac-5eb3-8895-ae58-e6a8c1eec04e.png)

上から二番目のURLを選択して、NFCタグにかざしてから書き込むとあっという間に書き込みができます。
![IMG_8447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629241/55436bb5-a0f1-b2f3-ba81-74c862270b61.png)

## 完成
お気に入りのカードに張り付ければオリジナルデジタル名刺のできあがりです♪
![IMG_8448.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3629241/6921715a-bdff-c33f-f3c0-6a0c1e5f0261.jpeg)

ちなみにその他の設定からタグのロックもできるので、上書き防止も可能でした。
ぜひ冬休みの工作（？）にいかがでしょうか。

カスタムURLでX投稿ハッシュタグつきのイベント用タグを作ったり、ちょっとしたときに特定のアプリを開きたいときとか、アプリになにか入力するときとかにも使えそう。iPhoneの場合はショートカットアプリとかでもいろいろ作れそう。NFCタグ、使い方探ってみよう～。
AndroidStudioをカスタマイズ！

# サイドメニューを大きく
サイドメニューの何もないところで右クリックをすると”Show Tool Window Names”とメニューが出てくるのでそれを選択すると、それぞれサイドメニューのアイテムの名前が表示されるようになります。
また、サイドバーの大きさも自分で調節できるようになります。
（Bataと書いてあるんで今後変更になる可能性あり）
![スクリーンショット 2024-12-08 18.00.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/d5c1b888-ef1a-7d85-ebc2-dbd241d52b11.png)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


![スクリーンショット 2024-12-08 18.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/d3ceda75-5ffd-e901-bb26-83a539cf979c.png)


# 不必要なメニューを非表示に
すでに表示されているメニューの中からいらないと思ったアイテムの上で右クリックし　”Hide”を選択すると非表示にできます。
![スクリーンショット 2024-12-08 18.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/ac4c585e-dac7-d943-db50-99f60d41c569.png)


逆に、他のアイテムを常にサイドバーに表示させておくには、　”・・・”を選択しほしいものを選択すると表示されます。
![スクリーンショット 2024-12-08 18.48.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/40a77e29-568c-0ba8-2dfe-dd0028fd94b3.png)


# アイテムをドラック&ドロップ
動かしたいアイテムをドラック&ドロップで　アイテム同士の上下を入れ替えたり、左右のサイドバーに振り分けたりすることができます。
試しに右のサイドバーにあったアイテムを全て左へ移してみました。
![スクリーンショット 2024-12-08 18.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2394054/ee184afb-7e24-7937-46d5-e9ecbd0bb3c2.png)
ポケポケ連勝エンブレム問題

# みんなで効率よくエンブレムゲットしよう。

突如として発生してしまったポケポケ公式からの連勝エンブレムイベント。連勝である部分が大変おつらく、みなさまどう運を寄せるかでお悩みの方も多いのではないでしょうか。

結論から申しますと、次の行動パターンを全員で守ればひとまず平均10戦、最悪でも20戦する程度でエンブレムゲットはおそらく可能です。楽しいかどうかは置いておいて。

## 前提

- 現在の連勝数はプロフィールのエンブレムを見て互いに確認することができる。つまり各対戦ごとに個々人がエンブレム変えてくれることが前提。
  - 厳密には1勝と0勝の違いはわからないし、エンブレム詐称される可能性はあるが、そこは信じて頑張ろう ()
  - 仮にエンブレム詐称系裏切りが発生しても、この行動パターンを守るならば5連勝する人が増えれば増えるほど楽な仕組みにはなっているので、そこは見逃しても良い気がしている。

## 行動

- 同連勝数 = プロフィールのエンブレムが同じ場合はガチでバトルする。
  - この場合の勝率を0.5と仮定する。
- 連勝数が異なる場合は勝数の小さいものが初手で降参する。
  - 最大多数の最大幸福に近い。勝数が多いものが負けるほうが全体として損失が大きいという判断である。
- 5連勝できた人はその後も可能な限り参加し続け、誰と当たるかにかかわらず初手で降参する。
  - **これが大事。ここ裏切られると多分このシステムは崩壊する。**

詳しい可視化については[こちら](https://github.com/Daku-on/qiita_article/blob/50aa7b24e1df73ec6aa8dbf0c9194613fdc42657/codes/pokepoke_1/%E3%83%9D%E3%82%B1%E3%83%9D%E3%82%B1%E5%8B%9D%E8%B2%A0.ipynb)をご確認ください。とりあえず雑にChatGPTに書かせただけです。

5連勝エンブレム未獲得者の裏切り (勝数が小さいのに降参せずガチバトルに持ち込まれる) が10%程度発生することと、5連勝終わった人は50%の確率で参加したりしなくなったりすることを織り込み済みです。最悪でも20戦程度 (初手降参は含まない) すればエンブレム獲得はなんとかなる見込みであることがわかります。

プレイヤー数はざっくり5万人としていますが、プレイヤー数を変えても平均的な対戦回数はほぼ変わらなかったです。
Unityで一人称視点の世界を作る方法

今回は一人称視点の世界を制作する手順について載せます。

まずUnity Assets StoreからStarter Assets - ThirdPerson | Updates in new CharacterController packageという作品を以下のURLからダウンロードします。これは三人称視点でステージを動き回れるアセットですが、カメラの位置を自分で調節して一人称視点で動けるように表現しようと思います。

https://assetstore.unity.com/packages/essentials/starter-assets-thirdperson-updates-in-new-charactercontroller-pa-196526?srsltid=AfmBOoq62fuzNI0nfFIyusJonW8dl9cg-jpK5C-3yZQ3Fdiu4MN5aMgF

ダウンロードしたらStarterAssets>ThirdPersonController>Scenesのファイルを開き、Playgroundというシーンをダブルクリックします。するとアセットとして作られたシーンに移り変わります。ゲームを再生して矢印キーを押すとプレイヤーが動き、カメラが追跡するようになっていると確認できます。

![Assets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954908/02fa813e-689e-dad3-9112-792eed5b005d.png)

しかし、今回は一人称視点で世界を制作したいので、カメラの設定を行います。まずはPlayerArmatureを選択します。そして下の階層に新しくカメラを作成します。作成したカメラの座標を(0,1.7,0)に設定して、タグにMain Cameraを指定します。

![Camera.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954908/cf12e677-d527-11d9-6e09-5e35388603d4.png)

次にPlayerFollowCameraというオブジェクトを選択します。以下の画像のようにインスペクターの一番上にあるチェックボックスをクリックして消すとプレイヤーを追跡するカメラが機能しなくなり、先ほど設定したカメラが機能するようになります。

![Follow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3954908/ab273313-57ed-e8b4-4c5f-56d30325d427.png)

ここでゲームを再生すると、一人称視点でキャラクターを動かすことができるのではないでしょうか。これで一人称視点の世界を作ることができました。あとはオブジェクトやアセットを追加していき自分好みの世界が作れます。

以上、Unityで一人称視点の世界を作る方法でした。
Marshmallow入門ガイド：Pythonでのデータ検証・変換をスマートに！

# はじめに

API開発やWebアプリケーション構築で、入力データや出力データの処理は欠かせません。  
Marshmallowは、Pythonでデータの構造定義やバリデーション、シリアライズ/デシリアライズを一元的に扱える強力なライブラリです。

この記事では、Marshmallowの基本的な使い方と、そのメリットをわかりやすく紹介します。

# Marshmallowとは？

Marshmallowは、以下の3つの機能を中心に提供します。

1. **データ構造の定義**：`Schema`クラスでフィールドや必須項目、型を明示  
2. **シリアライズ/デシリアライズ**：Pythonオブジェクト ↔ JSONなどの双方向変換  
3. **バリデーション(検証)**：不正なデータが渡された場合にエラーを自動通知

これにより、データ処理の冗長なコードを書く必要が減り、開発効率とコード品質が向上します。


# 1. インストール

Marshmallowは`pip`で簡単に導入可能です。

```bash
pip install marshmallow
```

# 2. スキーマ定義でデータを明確化
スキーマ(`Schema`)を使って、どんなフィールドが必要なのかを定義します。
例えば、ユーザー情報用のスキーマは以下のように記述できます。
```python
from marshmallow import Schema, fields

class UserSchema(Schema):
    id = fields.Int(required=True)                  # 整数型が必須
    name = fields.Str(required=True)                # 文字列型で必須
    email = fields.Email(required=True)             # メールアドレス形式
    age = fields.Int(validate=lambda n: n > 0, required=True)  # 正の整数のみ

user_schema = UserSchema()
```
ここで定義したスキーマは、以下のようなデータを扱うのに適しています。
```json
{
    "id": 1,
    "name": "Taro Yamada",
    "email": "taroyama@example.com",
    "age": 30
}
```
# 3. シリアライズ(Pythonオブジェクト → JSON形式)
サーバー内部で利用しているPythonの辞書型データを、APIレスポンスとして返す場合、`dump()`メソッドでJSON形式に変換できます。
```python
user_data = {
    "id": 1,
    "name": "Taro Yamada",
    "email": "taroyama@example.com",
    "age": 30
}

serialized_data = user_schema.dump(user_data)
print(serialized_data)
# {'id': 1, 'name': 'Taro Yamada', 'email': 'taroyama@example.com', 'age': 30}
```

# 4. デシリアライズ(JSON形式 → Pythonオブジェクト)
クライアントから送られてくるJSONデータをPythonオブジェクトに変換する場合は`load()`を使います。この際、バリデーションも同時に行われるため、不正なデータは即座に検出できます。
```python
from marshmallow import ValidationError

input_data = {
    "id": 2,
    "name": "Aoi Yamada",
    "email": "aoiyama@example.com",
    "age": 25
}

try:
    valid_data = user_schema.load(input_data)
    print(valid_data)
    # {'id': 2, 'name': 'Aoi Yamada', 'email': 'aoiyama@example.com', 'age': 25}
except ValidationError as e:
    print(f"Validation Error: {e.messages}"
```

# 5. バリデーションエラーのハンドリング
スキーマに合わないデータが来た場合、`ValidationError`が発生します。
これにより、エラーメッセージを簡単に生成・通知でき、問題箇所が明確になります。
```python
invalid_data = {
    "id": "abc",                # 本来は整数が必要
    "name": "Aoi Yamada",
    "email": "invalid_email",   # 不正なメール形式
    "age": -5                   # 正の整数であるべき
}

try:
    user_schema.load(invalid_data)
except ValidationError as e:
    print(f"Validation Error: {e.messages}")
    # Validation Error: {'id': ['Not a valid integer.'], 'email': ['Not a valid email address.'], 'age': ['Invalid value.']}
```

## ユースケース例

- **API開発**：  
  リクエスト/レスポンスデータの整形・検証が自動化され、実装が楽になります。

- **フォーム入力チェック**：  
  ユーザーのフォーム入力データを瞬時に検証し、不正値を正確に把握できます。

- **バッチ処理でのデータ品質確保**：  
  外部データの取り込み時に整合性確認がしやすくなり、データ品質が向上します。

## まとめ

Marshmallowを使えば、データ処理ロジックをシンプルかつ堅牢にできます。

- スキーマでデータ構造と制約を明文化  
- シリアライズ/デシリアライズでデータ変換を容易に  
- バリデーション機能で不正データを迅速に排除

これにより、**開発効率アップ**と**コードのメンテナンス性向上**が期待できます。  
データ処理で悩んでいる方は、ぜひMarshmallowを導入してみてください！
文字の長さに合わせてborderの長さを調整するCSS

# はじめに
HP制作をしている駆け出しエンジニアです。
`border`の長さを文字に合わせるためのCSSがあるのをご存知ですか？

今回始めて知ったので備忘録として記録します📝

# 文字の長さに合わせてborderの長さを調整する
今回、下記のスクリーンショットのように、
文字の周りを線で囲み、ボタンのように見せるCSSを実装しようとしていました。

![スクリーンショット 2024-12-08 18.40.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3950670/702e524a-fd70-4389-08d5-f3fa81c63be9.png)

文字の長さに合わせて横幅を調整するには、`width:fit-content`を使用します。

```HTML:HTML
<p class="tag">お知らせ</p>
```

```CSS:CSS
/* タグ */
.tag {
  font-weight: normal;
  color: #A9A9A9;
  font-size: 16px;
  border: 1px solid #A9A9A9;
  border-radius: 19px;
  height: 22px;
  width: fit-content; /* これを追加 */
  margin: 3px 10px;
}
```

上記のようにCSSプロパティを追加することで、文字の長さに合わせて`border`の長さを調整できます!!

以上、参考になれば幸いです。
認証機能の実装：Laravel Breeze vs Rails Devise

### はじめに
Webアプリケーションの開発において、ユーザー認証機能は重要な要素の一つです。LaravelとRailsのような人気のフレームワークでは、認証機能を簡単に実装できるパッケージが提供されています。本記事では、Laravelの**Breeze**とRailsの**Devise**を比較し、それぞれの特徴と基本的な導入手順を解説します。

### Laravel Breezeとは
Laravel Breezeは、Laravel公式が提供するシンプルで軽量な認証パッケージです。以下の特徴があります：

Laravelのコア機能に統合された設計
Bladeテンプレートを使用したシンプルなフロントエンド
ユーザー登録、ログイン、ログアウト、パスワードリセットなどの基本機能を含む

公式ドキュメント
[Laravel Breeze Documentation](https://laravel.com/docs/10.x/starter-kits#laravel-breeze)

### Rails Deviseとは
Deviseは、Railsのアプリケーションに認証機能を追加するための人気のGemです。以下の特徴があります：

モジュールベースの設計で、必要な機能を選択可能
ユーザー管理のフルスタックソリューション
ルート、コントローラ、ビューを自動生成

GitHub
[Devise](https://github.com/heartcombo/devise)

### 導入手順

#### Laravel Breezeの導入
以下の手順でBreezeをインストールします。

Laravelプロジェクトを作成

```php:
composer create-project laravel/laravel example-app
cd example-app
```

Breezeのインストール

```php:
composer require laravel/breeze --dev
php artisan breeze:install
```

依存パッケージのインストール
フロントエンドの依存関係をインストールし、ビルドします。

```php:
npm install && npm run dev
```

データベースの設定とマイグレーション
.env ファイルでデータベースを設定し、マイグレーションを実行します。

```php:
php artisan migrate
```

アプリケーションを起動

```php:
php artisan serve
```

これで、`/register` や `/login` から認証機能が利用可能になります。

### Rails Deviseの導入
以下の手順でDeviseをインストールします。

Railsプロジェクトを作成

```ruby:
rails new example_app --database=postgresql
cd example_app
```

Gemのインストール
Gemfileに`devise`を追加します。

```ruby:ruby
gem 'devise'
```
その後、以下を実行します：

```ruby:ruby
bundle install
```

```ruby:ruby
rails generate devise:install
```

ユーザーモデルを生成

```ruby:ruby
rails generate devise User
rails db:migrate
```

ビューのカスタマイズ

```ruby:ruby
rails generate devise:views
```

アプリケーションを起動

```ruby:ruby
rails server
```

これで、`/users/sign_up` や `/users/sign_in` から認証機能が利用可能になります。

比較項目		
		
		
		
		

| 比較項目           | Laravel Breeze                              | Rails Devise                               |
|---------------------|--------------------------------------|--------------------------------------|
| 導入難易度               | 比較的簡単                                | 少し複雑                                |
| カスタマイズ性   | Laravel BladeやLivewireと親和性が高い            | 高度なモジュール構成が可能                          |
| フロントエンド対応      | Blade, Tailwind CSSに対応                     | フロントエンドは手動で対応                        |
|ドキュメントの充実度   | 公式で十分なガイドを提供                 | 豊富なドキュメントとコミュニティ                   |

### まとめ
Laravel BreezeとRails Deviseはどちらも非常に優れた認証パッケージですが、それぞれのフレームワークの特性に最適化されています。

**Laravel Breeze**:シンプルかつ統合されたソリューションを求める場合に最適
**Rails Devise**: 柔軟性が求められる複雑なプロジェクトに適している

どちらを選ぶかは、プロジェクトの規模や要件、使用するフレームワークに応じて決めるとよいでしょう。ぜひ本記事を参考に、認証機能を実装してみてください！
プロンプトエンジニアリング：CO-STARフレームワーク

## プロンプトエンジニアリングとは
プロンプトエンジニアリングとは、AIモデル、特に大規模言語モデル（LLM）に対して、適切な指示（プロンプト）を設計・最適化する技術です。この技術を用いることで、AIがより正確で望ましい出力を生成できるようになります。

具体的には、プロンプトエンジニアリングは以下のような要素を含みます：
- **指示の明確化**：モデルに対して実行すべきタスクを具体的に指示します
- **文脈の提供**：モデルが理解しやすいように、追加の情報や背景を提供します
- **入力データの準備**：モデルに対して適切な入力データを用意します
- **出力形式の指定**：期待する出力の形式やスタイルを指定します

## CO-STARとは
シンガポールのGPT-4プロンプトエンジニアリングコンペティションで優勝したSheila Teo氏は、自身が使用したCO-STARフレームワークを紹介しました。
[How I Won Singapore’s GPT-4 Prompt Engineering Competition](https://towardsdatascience.com/how-i-won-singapores-gpt-4-prompt-engineering-competition-34c195a93d41)


![CO-STAR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2752858/45bae828-243e-dfe9-01e5-9772956224ed.png)


CO-STARは、以下の6つの要素で構成されており、さまざまなシナリオで汎用的に使用できます：

- **C**ontext（コンテキスト）
    - タスクに背景情報を提供します
    - 大規模言語モデル（LLM）に詳細な背景情報を提供することで、特定のシナリオを正確に理解し、関連性のあるフィードバックを提供することができます

- **O**bjective（目的）
    - 大規模言語モデルに完了してほしいタスクを明確にします
    - タスクの目標を明確に定義することで、大規模言語モデルがその目標を達成するために応答を調整することに集中できます

- **S**tyle（スタイル）
    - 期待する文体を明確にします
    - ビジネスアナリストやCEOなど、特定の著名人や業界専門家の文体を指定することができます。これにより、大規模言語モデルがあなたのニーズに合った方法と語彙選択で応答するように指導されます

- **T**one（トーン）
    - 応答の感情的なトーンを設定します
    - 適切なトーンを設定することで、大規模言語モデルの応答が予期される感情や情緒的な背景と調和することを確保します。可能なトーンには、正式、ユーモラス、同情的などがあります

- **A**udience（オーディエンス）
    - ターゲットオーディエンスを識別します
    - 特定のオーディエンスに合わせて大規模言語モデルの応答をカスタマイズすることで、専門家、初心者、子供など、特定の文脈で適切かつ理解しやすい内容を確保できます

- **R**esponse（応答）
    - 出力形式を規定します
    - 出力形式を決定することで、大規模言語モデルが具体的なニーズに従って出力を行い、下流のタスクを実行しやすくします
    - 一般的な形式にはリスト、JSON形式のデータ、専門的なレポートなどがあります。プログラムで大規模言語モデルの出力を処理する必要があるほとんどのアプリケーションにとって、JSON形式が理想的です

## 例
CO-STARを用いた新製品を宣伝するためのSNS投稿の草稿を書く場合の例です。
```
# CONTEXT #
新製品の発売を知らせるためのSNS投稿。
既存の顧客と潜在的な新規顧客に向けて。

# OBJECTIVE #
新製品の特徴と利点を強調し、興味を引く。
ウェブサイトへのトラフィックを増やし、購入を促進する。

# STYLE #
親しみやすく、カジュアルなトーン。
画像やビデオを活用して視覚的に魅力的に。

# TONE #
ポジティブでエネルギッシュ。
読者に行動を促す。

# AUDIENCE #
既存の顧客。
潜在的な新規顧客。
ソーシャルメディアを活用する若年層。

# RESPONSE #
投稿の内容と呼びかけ。
```

GPT-4oからの回答は以下の通りです。
```
✨新製品発表✨  
   
みなさん、こんにちは！👋 今日はワクワクするお知らせがあります！待望の新製品がついに登場です！🎉  
   
🔹【製品名】🔹  
この新製品は、あなたの日常をもっと楽しく、もっと便利にするために生まれました。💡  
   
🔹【特徴】🔹  
🌟 スタイリッシュでコンパクトなデザイン  
🌟 最新技術を駆使した高性能  
🌟 使いやすさ抜群！直感的な操作性  
🌟 エコフレンドリーな素材を使用  
   
🔹【利点】🔹  
🔋 長時間使用可能なバッテリー  
💪 耐久性に優れた構造  
🔊 驚異の音質  
🌍 持ち運びに便利な軽量設計  
   
この新製品があれば、あなたの生活が一段とアップグレードされること間違いなし！✨  
   
🔗 詳しくはこちらのリンクからチェックしてね 👉 [ウェブサイトのリンク]  
   
画像やビデオもたくさん用意しているので、ぜひご覧ください！👀  
   
早い者勝ち！今すぐウェブサイトで詳細をチェックして、新しい体験を手に入れよう！💥  
   
#新製品 #発売開始 #生活をもっと楽しく #エコフレンドリー #高性能 #スタイリッシュ  
   
それでは、みなさんのご購入をお待ちしております！😊
```
問い合わせフォームを実装しただけなのにスパムメールの加害者になっていた話

よくある問い合わせフォームを提供していたら、知らぬ間にスパムメールの加害者になっていた話です

[エンジニアが知っておくべき メール送信・運用ノウハウ、メールの認証技術やセキュリティについて投稿しよう！ by blastengine Advent Calendar 2024](https://qiita.com/advent-calendar/2024/blastengine) の8日目です。


## 要件
- お問い合わせ内容の他、名前や所属、メールアドレスの入力が必須
- 問い合わせ完了後、入力されたメールアドレス宛に自動応答メールを送る
- 自動応答メールには入力された問い合わせ内容を記載する
- 同様に指定したサービス担当者宛にも問い合わせ通知メールを送る

以上の要件で作成しました。

## 実現方法
メール送信にはAWS SESを使用しました。問い合わせ確定ボタンを押下後にAWS Lambdaにリクエストを飛ばし、SESと連携してメールを送信する流れです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707111/bb6cadda-da19-5424-5501-36bb7fc33ae7.png)


## 実装後のこと
実装後、しばらく正常に稼働していました。しかし、ある日朝起きるとサービス担当者に大量の問い合わせ通知メールが届いていました。
本文にはロシア語とともにURLが記載されていました。
ああ、どこかのスパムが我々宛に問い合わせを行っているだけだな、と軽い気持ちで考えていました。

しかし、実は大変なことが起こっていたのです。

## 知らぬうちにスパムメールの加害者になっていた
この問い合わせですが、実はスパムメールの踏み台に使用されていました。
問い合わせフォームのメールアドレス欄に攻撃対象者のメールアドレスを記載すると、その対象者に我々のメールアドレスからロシア語の文章+URL付きでメールが送られてしまうのです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2707111/f78d4598-4593-42d7-c9e8-426579135ff3.png)

結果、AWS SESからバウンス率(送信できなかった割合)及び苦情率の上昇アラート通知が届き、対応を求められました。
スパム対象となってしまった方々には大変申し訳ございません。


## 対策
- **問い合わせの自動応答メールを廃止する**
  ビジネス要件を見直し、不要であれば自動応答メールを廃止するというのがまず考えられる対策です。
  
- **問い合わせの自動応答メールからユーザ入力情報を撤廃し、固定の文言の返答とする**
  我々の場合、自動応答メールの内容にユーザが入力した情報を記載していたため、スパムメールの踏み台にされてしまいました。固定の内容であればURLなどを記載することができませんので、悪用されることはほぼ無くなると思われます。
  本文だけでなく名前欄などもURLを入れ込まれる可能性があり注意が必要です。
  
- **reCAPTCHA v3を実装する**
  reCAPTCHA v3はGoogleが提供するボット対策のためのツールでユーザーの行動を分析し、人間か否かのスコアを取得できます。v3の場合はユーザの操作なしに裏で自動的に動作することが可能なのでユーザ体験を損なわずに実装できます。
  我々はこちらの対策を取り、それ以後悪用されることはありませんでした。
  (追記) 人間がBotと判定される可能性もあるため、ビジネス側との相談の上で決定をする必要があります。


## おわりに
問い合わせフォームに限らずメールを自動返信しているサービスを提供している方々は、一度システムを再チェックして悪用されないかを確認することをおすすめします。