OmniAICreator/Qiita-1.07M huggingface dataset:
OpenAI o1-prebiewのAPIを試そうとしたら会員ランク()ではじかれてた話 #chatgpt


リリースした日に触れたのでメモ。試したいけど試せなかった話です。

> OpenAIに雨乞い
> ![Kobito.7zmZ9s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/2f86ab92-30ae-2c29-1e4f-8ee20b63e622.png "Kobito.7zmZ9s.png")


## エラー: Your organization must qualify for at least usage tier 5 to access 'o1-preview'.

まずはいつも通り[ここ](https://platform.openai.com/api-keys)でAPIキー取得して`sk-proj-xxxxxxxxxxxxxxxxxxx` 的なキーを発行し、APIを叩いてみます。

```js
const { OpenAI } = require("openai");
const openai = new OpenAI({apiKey: `sk-proj-xxxxxxxxxxxx`});
const prompt = `hello world?`;
    
(async () => {
    const response = await openai.chat.completions.create({
        model: "o1-preview",
        max_tokens: 1024,
        messages: [
          {
            role: "user",
            content: [
              { type: "text", text: prompt },
            ],
          },
        ],
    });

    console.log(response.choices[0].message);
})();
```

これでちゃんと動いてるか分からないけどとりあえずAPIアクセスでエラーが出ました。

> ![スクリーンショット 2024-09-13 20.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/7ac63445-d592-947c-9b5f-28bac15924c1.png "スクリーンショット 2024-09-13 20.02.06.png")

ほうほう

```
Your organization must qualify for at least usage tier 5 to access 'o1-preview'. See https://platform.openai.com/docs/guides/rate-limits/usage-tiers for more details on usage tiers.
```

=> "o1-preview"にアクセスするには、少なくとも利用レベル5の資格が必要です。利用階層の詳細については、https://platform.openai.com/docs/guides/rate-limits/usage-tiers をご覧ください。"

Tier、レベル5 どういうことだ...?

## Tier - OpenAI APIのVIP会員的な?

Tier調べたら出てきました。これ知らなかった...

> https://platform.openai.com/docs/guides/rate-limits/usage-tiers?context=tier-five

> You can view the rate and usage limits for your organization under the limits section of your account settings. As your usage of the OpenAI API and your spend on our API goes up, we automatically graduate you to the next usage tier. This usually results in an increase in rate limits across most models.

> ![スクリーンショット 2024-09-13 19.59.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/4b3023cc-61b4-468e-5355-65f261419ef6.png "スクリーンショット 2024-09-13 19.59.08.png")

`アカウント設定の制限セクションで、あなたの組織の料金と使用量の制限を見ることができます。 OpenAI API の使用量と API の利用が増加すると、自動的に次の使用レベルに移行します。 その結果、ほとんどのモデルで料金の上限が上がります。` らしい

もっと組織でAPI使ってないとダメってことっぽい
使ってるとTierが上がるんでしょうね。

いっぱい使ってるVIPを優遇ってことっぽいですね。

## 現在のTierが知りたい => Tier1だったので詰み 泣

ここで調べられました。

https://platform.openai.com/settings/organization/limits

> ![スクリーンショット 2024-09-13 20.03.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/a5a8cf41-11d4-8c2b-1933-902ce59064f5.png "スクリーンショット 2024-09-13 20.03.39.png")
> Current tire1て書いてる

僕くらいのちょっと試すくらいの使い方しているとTier5は遠い道のりですね残念。

## まとめ

たぶんTier1に降りてくるまで待つしかなさそうです。

雨乞いしないと。

![Kobito.P3of59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/b8095a33-72f0-ff61-bfec-2432ab9ad2dc.png "Kobito.P3of59.png")
reader.onloadの実行完了を待つ

```typescript
const hoge = () => {
  let base64File: string | null = null;
  const reader = new FileReader();
  reader.onload = () => {
    if (!reader.result) return;
    if (typeof reader.result !== "string") return;
    base64File = reader.result.split(",")[1];
  };
  reader.readAsDataURL(file);
  // 以降の処理
}
```
みたいなコードを書いた時、base64Fileに値が入ったのを確認してから次の処理に移りたい場合がある

async/awaitでなんとかできたので備忘

```typescript
const hoge = async () => {
  const base64File = await new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => {
      if (!reader.result || typeof reader.result !== "string") {
        reject();
        return;
      }
      resolve(reader.result.split(",")[1]);
    };
    reader.readAsDataURL(file);
  });
  // 以降の処理
}
```

readerをあんまり理解していないので、もっと良いコードがあれば教えてください
CloudFront/S3構成におけるCORS対応について

# はじめに

こんにちは、Gakken LEAP のバックエンドエンジニアの Matsuura です。

今回は、あるWebアプリケーションで、S3に配置したコンテンツをCloudFront経由で取得する際に発生したCORS（Cross-Origin Resource Sharing）エラーの対処についてご紹介します。

# 対処方法

まず結論からお伝えします。
S3側の設定を以下のように変更することで、CORSエラーを解消できました。

## 1. AllowedOriginsの設定

S3バケットの「Permissions」タブにある「Cross-Origin Resource Sharing (CORS)」設定で、許可するオリジン（AllowedOrigins）を指定します。
これにより、レスポンスヘッダーに `Access-Control-Allow-Origin: https://hoge.com` を付与できるようになります。

```json
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            // 許可するオリジンを設定
            "https://hoge.com"
        ]
    }
]
```

この設定で大半のCORSエラーは解決しますが、今回のケースではこれだけでは不十分でした。

## 2. ExposeHeadersの設定

今回の問題の解決には、ExposeHeadersの設定が鍵となりました。
[1. AllowedOriginsの設定]と同様に、CORS設定に `ExposeHeaders` を追加します。
ここには、`Access-Control-Allow-Origin`を含む配列を指定しました。

```json
[
    {
        // ...(略)
        "AllowedOrigins": [
            "https://hoge.com"
        ],
        // 追加
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]
```

以上の対応で、問題は無事解決しました。

# CORSの仕組みと対処方法の詳細

## CORSとは

CORS（Cross-Origin Resource Sharing）は、異なるオリジン間でリソースを共有する際に、セキュリティを確保するための仕組みです。
通常、ブラウザは異なるオリジンからのリクエストを制限しています。
例えば、`https://hoge.com` から `https://api.fuga.com` にリクエストを送信する場合、セキュリティ上の理由からリクエストがブロックされ、CORSエラーが発生します。

:::note warn
CORSエラーはブラウザ固有の機能であり、curlコマンドなどでは発生しません。
:::

CORSエラーを回避するためには、サーバー側で特定のオリジンからのリクエストを許可する設定が必要です。
具体的には、サーバーがレスポンスヘッダーに `Access-Control-Allow-Origin` を含めることで、指定されたオリジンからのリクエストが許可されます。

たとえば、以下のようなヘッダーがレスポンスに含まれている場合、`https://hoge.com` からのリクエストが許可されます。

```text
Access-Control-Allow-Origin: https://hoge.com
```

これにより、異なるオリジン間での安全なリソース共有が実現します。

## ExposeHeadersとは

ブラウザのCORSポリシーでは、CORSリクエストで取得したレスポンスのヘッダーにアクセスできるのは、標準的なヘッダーに限られています。
アプリケーションがその他のヘッダーにアクセスするためには、`ExposeHeaders`を設定する必要があります。

私が担当しているプロジェクトでは、プリフライトリクエストを実装しており、その中で `Access-Control-Allow-Origin` ヘッダーをチェックする処理が含まれていました。
しかし、このヘッダーは「標準ヘッダー」ではないため、アクセスできないという問題が生じていました。

`ExposeHeaders` に `Access-Control-Allow-Origin` を設定することで、アプリケーションがこのヘッダーにアクセスできるようになり、CORSエラーを解消できました。

# おわりに

今回は、CloudFront経由でS3のコンテンツを取得する際に発生したCORSエラーについて、その対処方法を解説しました。
特に、`ExposeHeaders`の設定が問題解決の鍵となり、CORSエラーの根本的な理解が重要であることを実感しました。

CORSエラーは、複雑ではありますが、正しい設定を行うことで回避可能です。
今回の対処方法が、同様の問題に直面した方々の参考になれば幸いです。

# エンジニア募集中

Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！

https://gakken-leap.co.jp/recruit/
OpenAI新たなAIモデル「o1」とは？、ChatGPT-4oとの違いを詳しく解説

こんばんは。

今日は「OpenAI新たなAIモデル「o1」」について紹介いたします。

OpenAIは、最新のAIモデル「o1」を2024年9月12日に発表しました。
新モデル「o1」は、複雑な学術タスクや推論において非常に高いパフォーマンスを発揮しています。

# OpenAIの新モデル「o1」とは

このモデルの特徴をOpenAIが以下のように発表しております。

- 物理学、化学、生物学の難しいタスクで博士課程の学生と同等のパフォーマンスを発揮
- 数学とコーディング能力でも優れている
- 国際数学オリンピック予選試験で83%のスコアを獲得（以前は13%）
- コーディングコンテスト「Codeforces」で上位11%（89パーセンタイル）に到達
- 初期モデルであり、Web閲覧やファイル・画像のアップロードなどの機能はまだ未対応
- 複雑な推論タスクでの大きな進歩を示しており、AIの新たなレベルを象徴

「o1」は、まだ初期段階のモデルながらも、学術分野での難解な課題やコーディング分野において優れた成果を上げており、今後の機能強化によって、さらに多くの実用的なシーンでの活躍が期待されています。

# o1の使い方・料金について

o1には2つのモデルがあり、上記の機能を備えたものが「o1-preview」、それより高速で80％安価な「o1-mini」があります。

## o1-preview使い方

o1-previewはChatGPT Plusとteamユーザーは12日から順次利用可能になると発表されています。
無料のEnterpriseもしくはEduユーザーは来週(9/16?17?)から利用可能になる様です。

ChatGPT Plusでは既に利用可能でした。

## o1-previewの料金

追加料金は必要なくChatGPTのプランが適応されています。
ChatGPTのUIからの利用は1週間に30メッセージとされています。
※o1-miniでは1週間50メッセージ

現時点ではChatGPTのUIだと各モデルを選択する必要がありますが、将来的には特定のプロンプトに対して適切なモデルを自動選択できるとのことです。

## o1-previewのAPIについて

現時点で組織のレート制限がティア5の資格であればレート制限が 20 RPM の状態で、API で両方のモデルのプロトタイプを今すぐ開始できます。
（参考：ティア別レート表）
ティアはOpenAI APIの使用量と API への支出が増えると、自動的に次の使用レベルに移行します。

ティア5の利用料金は以下の通りとなっています。

![Screenshot 2024-09-13 at 8.02.26 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3507088/47dcd2e3-9987-4329-8e94-99f3f66313dd.png)

※o1-preview・o1-miniの API には現在、関数呼び出し、ストリーミング、システム メッセージのサポート、その他の機能は含まれていません。

OpenAIは追加のテストの後、これらの制限を増やす予定と発表しています。

# まとめ

新AIモデル「o1」は、現時点で既に学術やコーディングタスクで顕著な性能を示し、博士課程の学生レベルの能力を発揮しています。
OpenAIのo1以外にも生成AI関連の製品リリースは多く、今後も技術発展が期待できる分野となっています。

アイスマイリーでは生成AI関連の製品を数多く取り扱っており、製品別に比較検討する資料を無料提供しています。
この機会に、ぜひご活用ください。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
API 管理市場は、API 主導の接続の採用増加によって推進されています

API 管理市場では、サードパーティのアプリケーション プログラミング インターフェイス (API) を RESTful バックエンド経由で公開、管理、保護、監視できます。API を使用すると、組織は部門やシステム全体で機能とサービスを公開できます。また、企業は複数のプラットフォーム間でアプリケーションとデータの統合を効率化できます。クラウド コンピューティングとモバイル アプリケーションの採用増加により、API トランザクションが増加し、開発者ポータル、ゲートウェイ、管理、分析などの API 管理機能の需要が高まっています。API 管理により、API のパフォーマンスと使用パターンを詳細に把握できるため、組織は API インフラストラクチャを最適化できます。
世界の API 管理市場は、2024 年に 54.8 億米ドルに達すると推定されており、2024 年から 2031 年の予測期間中に 24% の CAGR を示すことが予想されています。

重要なポイント
API 管理市場で活動している主要企業は、API Gateway、Apigee、Axway、Dell Boomi、Microsoft、Mulesoft、Oracle、Postman、Red Hat、SAP、Software AG、WSO2、TIBCO Software Inc.、IBM、Kong Inc. です。これらの企業は、顧客からの高まる需要を満たすために革新的な API 管理ソリューションの提供に注力しています。
クラウド サービスと API の可用性に対する需要の高まりにより、API 管理ソリューションの需要が高まっています。組織は、クラウド アプリケーションとの API 統合を管理し、レガシー システムをクラウド環境に移行するために、API 管理ソリューションを広く採用しています。さらに、マイクロサービス アーキテクチャの採用が増えていることで、内部および外部での使用向けに API を開発およびオーケストレーションするための API 管理プラットフォームの需要がさらに高まっています。
API 管理市場は、北米、ヨーロッパ、アジア太平洋、中東、アフリカなどの地域で大幅な拡大を遂げています。API 管理ソリューションを世界中で採用している主要国には、米国、中国、インド、ドイツ、英国、日本などがあります。ビジネス プロセスを最適化し、優れた顧客体験を提供するためのデジタル変革イニシアチブの増加により、さまざまなエンド ユース産業で API 管理プラットフォームの採用が促進されています。

市場の推進要因
[API 管理市場](https://www.coherentmarketinsights.com/ja/industry-reports/api-management-market)の成長を推進する主な推進要因は、デジタル ビジネス モデルとモバイル アプリケーションの採用の増加です。業界を問わず、組織はデジタル化を採用して顧客体験を向上させ、ビジネス プロセスを最適化するようになっています。API を使用して開発されるアプリケーションやサービスが増えるにつれて、API を公開、保護、監視するための API 管理プラットフォームの需要が大幅に増加しています。もう 1 つの重要な要因は、オープン アーキテクチャを使用してレガシー システム、データベース、クラウド アプリケーション、パートナー テクノロジーの統合を加速するために、企業による社内 API の開発が増加していることです。これにより、自社開発の API を管理する必要性が高まり、予測期間中の API 管理市場の成長が促進されます。

地政学的状況が API 管理市場の成長に与える影響

API 管理市場は、世界中で進行中の地政学的紛争と経済的不確実性により、大きな変化を経験しています。ロシアのウクライナ侵攻により、グローバル サプライ チェーンが混乱し、サイバー脅威が増大しています。API 管理ベンダーの大半は、これらの地域に既存の顧客と事業所を持っています。制限的な貿易政策と制裁により、企業が協力してリソース/テクノロジーを共有することが困難になっています。さらに、ヨーロッパや中国などの主要市場の景気減速は、企業の IT 支出に影響を及ぼす可能性があります。

API プロバイダーは、これらの状況を注意深く監視し、さまざまな戦略を検討する必要があります。新しい成長市場全体でビジネスを多様化することで、リスクの露出を減らすことができます。コンプライアンスとサポートのために現地のパートナーと協力することで、顧客へのサービス提供を継続できます。サイバー攻撃の増加を考えると、安全で隔離された環境を構築することが最優先事項である必要があります。分散したチーム/オフィス間で簡単に統合できるように API を標準化することも重要です。サーバーレス コンピューティングやマイクロサービスなどの最新のアプローチを採用すると、柔軟性が向上します。全体として、政治的不安定性とそれがデジタル変革イニシアチブに与える影響に対処することが、この業界での長期的な成功の鍵となります。

API 管理の市場シェアが最も高い地域

北米は現在、世界最大かつ最も成熟した API 管理市場であり、総収益の 35% 以上を占めています。これは、大手テクノロジー企業による多額の投資と、米国およびカナダの銀行、小売、医療などのセクターにわたる企業による広範な導入によるものです。API ベンダー、プラットフォーム プロバイダー、洗練された顧客の存在により、この地域の成長は長年にわたって加速しています。

著者について:
Money Singh は、市場調査分野で 4 年以上の経験を持つベテラン コンテンツ ライターです。彼女の専門知識は、食品および飲料、バイオテクノロジー、化学および材料、防衛および航空宇宙、消費財など、さまざまな業界にわたります。
(https://www.linkedin.com/in/money-singh-590844163)
Elixirでグラフを描く〜VegaLite〜

# 今回の目標
- 折れ線グラフと棒グラフを同時表示
  -  layersを使う
  -  色も変更する
- y軸は1〜100のランダムの数値を使う
- png形式で保存する

# 環境作成
```
$ sudo npm install -g vega vega-lite canvas
```
Export.to_pngの時に必要でした

# プロジェクト作成

```
$ mix new vegalite_experiment 
$ cd vegalite_experiment
```

# VegaLite組み込み
```diff_elixir:mix.exs
# 〜省略〜
  defp deps do
    [
+     {:vega_lite, "~> 0.1.9"},
+     {:jason, "~> 1.2"}
      # {:dep_from_hexpm, "~> 0.3.0"},
      # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
    ]
  end
# 〜省略〜
```
```
$ mix deps.get
```

# 検証ソース
```elixir:lib/vegalite_experiment.ex
defmodule VegaliteExperiment do
  @moduledoc """
  Documentation for `VegaliteExperiment`.
  """
  alias VegaLite, as: Vl

  @doc """
  Hello world.

  ## Examples

      iex> VegaliteExperiment.hello()
      :world

  """

  def hello do
    y = for _ <- 1..20, do: Enum.random(1..100)

    Vl.new(width: 800, height: 400)
    |> Vl.data_from_values(x: 1..20, y: y)
    |> Vl.layers([
      Vl.new()
      |> Vl.mark(:bar, color: "#ffaaaa", width: 20)
      |> Vl.encode_field(:x, "x", type: :quantitative)
      |> Vl.encode_field(:y, "y", type: :quantitative),
      Vl.new()
      |> Vl.mark(:line, color: "#aaaaff")
      |> Vl.encode_field(:x, "x", type: :quantitative)
      |> Vl.encode_field(:y, "y", type: :quantitative)
    ])
    |> Vl.Export.to_png()
    |> then(&File.write!("test.png", &1))

    :world
  end
end

```

# 実行

```
$ mix run -e "VegaliteExperiment.hello()"
```

test.pngができました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295814/40e5f4a1-a120-251c-309c-62cf4b30f6d7.png)

# ソース(github)
https://github.com/ymn-t-yamanashi/vegalite_experiment
EBMLについて


EBML (Extensible Binary Meta Language) はMatroska (`.mkv`) やWebM (`.webm`) などで使われるオープンなバイナリデータフォーマットです。

# 要素

EBMLの基本的な構成要素は*要素*です。要素はタグとデータからなります。

タグは名前とIDによって識別されます。名前は人間向けのドキュメンテーションなどで使われ、IDは直列化の際に使われます。例えば、Matroskaファイルのルート要素のタグの名前は`Segment`、IDは`0x18538067`です

要素はデータの種類によって次の８つに分類されます。

| 要素 | データ |
|:-|:-|
| 符号付き整数要素 | 符号付き整数 |
| 符号なし整数要素 | 符号なし整数 |
| 浮動小数点数要素 | binary32またはbinary64 |
| 文字列要素 | ASCII文字列 |
| UTF-8要素 | Unicode文字列 |
| 日付要素 | ナノ秒精度の時刻 |
| マスター要素 | ０つ以上の子要素 |
| バイナリ要素 | バイト列 |

# EBML文書

EBML文書はEBMLヘッダーとEBML本体からなります。

EBMLヘッダーにはEBML文書についてのメタデータが記載されます (RFC 8794 11.2を参照) 。

EBML本体はルート要素と大域要素からなります。ルート要素にはEBML文書の本体データ (音声データや映像データなど) が格納されます。大域要素についてはRFC 8794 11.3を参照。

ルート要素の直接の子要素のことをトップレベル要素といいます。

## EBMLストリーム

１つ以上のEBML文書を並べたものをEBMLストリームといいます。

# 直列化

要素は次のように直列化されます。

```plaintext
Element:
 +------+------+--------//---+
 |  ID  | Size | Data   //   |
 +------+------+--------//---+
```

- ID タグのID
- Size Dataの長さ
- Data 直列化されたデータ

IDとSizeはいずれも可変長整数形式で直列化されます (RFC 8794 4を参照) 。データの直列化の方法は次の通りです。

| データ | 直列化 |
|:-|:-|
| 符号付き整数 | ２の補数表現、ビッグエンディアン |
| 符号なし整数 | ビッグエンディアン |
| 浮動小数点数 | binary32またはbinary64 |
| 文字列 | ASCII |
| UTF-8 | UTF-8 |
| 日付 | 2001-01-01T00:00:00Z からの経過時間 (ナノ秒) 、符号付き整数 |
| マスター | 子要素の直列化の連結 |
| バイナリ | そのまま |

# 参考文献

- [RFC 8794 - Extensible Binary Meta Language](https://www.rfc-editor.org/rfc/rfc8794.html)
- [Matroska Media Container Homepage](https://matroska.org/index.html)
- [The WebM Project](https://www.webmproject.org/)
投稿 70 コンパイラ言語 2024/09/08

本日の勉強時間　2H

プログラミング言語には
実行にコンパイル（コードを機械語に変換する作業）を必要とする言語としない言語の
2つがあります。 
実行のたびにコンパイルする言語をインタプリタ型言語と呼ぶのに対して、事前に一括でコンパイルする言語をコンパイラ言語と呼びます。
[Engineering] 半導体

# 一覧
||設計|製造|販売|
|:--|:-:|:-:|:-:|
|IDM|○|○|○|
|デザインハウス|○|||
|ファブレス|○||○|
|ファウンドリ||○||

IDM: Inetegrated Device Manufacturer（垂直統合デバイスメーカー）

# 参考リンク
- [令和5秋66](https://www.ap-siken.com/kakomon/01_aki/q66.html)
投稿 68 CRUD 2024/09/06

本日の勉強時間　2H

CRUDとは、データベース管理システム（DBRS）に必要とされる4つの主要な機能。

「作成（Create）」「読み出し（Read）」「更新（Update）」「削除（Delete）」をそれぞれ頭文字で表したもののこと。
CloudWatch Metrics の保存期間の制約で困った件

# 1.はじめに
負荷テストを行うためにJMeterを使用し、Webアプリケーションに対して性能試験と耐久性試験を実施しました。テストの結果を分析するために、CloudWatchのメトリクスを利用しましたが、データ保持期間の制約により、1分間隔で収集されたメトリクスの分析ができなくなりました。

# 2.保持期間の制約について
AWS CloudWatchのメトリクスデータの保持期間には制約があります。[AWSの公式サイト](https://aws.amazon.com/jp/cloudwatch/faqs/)に、以下のような保持期間が設定されていると記載があります。

>60秒未満のデータポイント: 3時間
>1分間隔のデータポイント: 15日間
>5分間隔のデータポイント: 63日間
>1時間間隔のデータポイント: 15か月間

このため、1分間隔のデータポイントは15日間のみ保存され、その後はデータがロールアップされてしまいます。これにより、保持期間を超えたデータポイントは失われてしまいます。

実際に、CloudWatchのメトリクスを見てみると以下の通り、1分間隔のデータポイントのメトリクスグラフは15日間までしか表示できません。
![CloudWatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683522/12daa906-3ec7-4446-4a9c-14d8c83b2c4d.png)


# 3.保持期間の制約を考慮してやるべきだったこと

### ①CSV形式のファイルダウンロード
CloudWatchのコンソール画面から、データ保持期間内に定期的にダウンロードを行い、必要なデータが失われないようにします。特に長期間の負荷試験では、データ保持期間を超えないよう、エクスポートスケジュールを設定し定期的にダウンロードすれば、必要なデータは保持できます。

以下の通り、アクション→.CSV形式でダウンロードを押下します。

![CloudWatch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683522/bf602754-c276-586a-98f3-7027c5e61882.png)

出力されたCSVファイルに時間ごとのデータポイント値が記載されています。
![CloudWatch②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683522/9a0d81a4-5a2e-39ec-6a42-9cc17a98ec25.png)


### ②CloudWatch Metric Streamsを利用する。
CloudWatch Metric Streamsを利用すると、CloudWatchのメトリクスデータをKinesis Data Firehoseを使って、様々な宛先に送信することが可能です。
以下のようなことができます：

・Amazon S3 にデータをストリーミングし、長期的な保存やアーカイブを行う。
・Amazon Elasticsearch Service (ES) や Redshift にデータを流し込み、独自の分析やダッシュボードの作成を実施する。
・AWS Lambda を利用して、データの集計や加工を自動で行う。
・外部のSaaSサービス や HTTPエンドポイント にデータを送信し、AWS以外のシステムとの統合管理を実現する。

CloudWatch Metric Streamsを利用すると保存期間の制約から解放され、より柔軟で効率的なデータ管理が可能になります。
実装までは行っていないのですが、要件でメトリクスを監査目的で長期間保存するなどがあった場合、CloudWatch Metric Streamsを利用すれば解決できそうです。


# 4.まとめ
CloudWatchのメトリクスデータの保持制限により、短期間で確認したい出力間隔のデータが失われましたが、事前にCSVダウンロードを行うことやCloudWatch Metric Streamsを活用することで、長期間のデータ保存や柔軟な管理が実現できます。
CloudWatchメトリクスを用いた分析を行う方の参考になれば幸いです。
アクセス修飾子の使い分け

## アクセス修飾子
　アクセス修飾子とはメソッドや変数のアクセスできる範囲を指定するもので、以下が存在します。

| アクセス修飾子 | 同一クラス | サブクラス | すべて |
|:-:|:-:|:-:|:-:| 
| public | 〇 | 〇 | 〇 |
| protected | 〇 | 〇 | × |
| private | 〇 | × | × |

　私自身そうだったのですが、プログラムに触れて間もない頃はわざわざprotectedやprivateでアクセス権限を弱める理由が分からずとりあえず全部publicで書きがちだと思います。なので、今一度使い分けを整理していきます。

　私が思うにアクセス修飾子の使い分けの観点は以下です。それぞれ説明していきます。

 ①外部に公開する情報を制限する。
 ②イミュータブルなオブジェクトを作るため。（今回割愛）
 ③継承の原則を守るため。

 ### 外部に公開する情報を制限する。
　呼び出し側と呼び出される側という関係を意識して、呼び出される側は呼び出し側に必要な情報のみを公開し、不必要な情報は隠蔽する。所謂カプセル化です。

　割引コードを扱うオブジェクトで考えた時、以下のようなビジネスロジックが考えられます。
 ・入力された割引コードが存在する割引コードか
 ・割引コードが利用期間の範囲内か
 ・商品の値段によって割引率（額）を変更する
 ・割引額を計算する
 ・割引率（額）を元に最終的な決済金額を求める

<details open><summary>サンプルコード  </summary>

  ```php
  <?php

class CouponCode {

	private $coupon_code;
	private $discount_rate;
	private $discount_fixed_amount;

	public function __construct(string $coupon_code) {
		$this->check_exist_coupon_code($coupon_code);
		$this->check_usage_period($coupon_code);

		$this->coupon_code = $coupon_code;
	}

	private function check_exist_coupon_code(string $coupon_code) {
		//存在チェック
	}

	private function check_usage_period(string $coupon_code) {
		//利用期間チェック
	}

	/**
	 * 割引額取得
	 *
	 * @param PaymentItem $payment_item
	 * @return integer
	 */
	public function get_discount_amount(PaymentItem $payment_item): int {
		$this->set_discount($payment_item);
		return $this->discount_fixed_amount + $this->get_discount_amount_for_rate($payment_item);
	}

	private function set_discount(PaymentItem $payment_item) {
		//割引コード、商品の値段から割引率（額）取得
		$this->discount_rate         = $discount_rate;
		$this->discount_fixed_amount = $discount_amount;
	}

	private function get_discount_amount_for_rate(PaymentItem $payment_item): int {
		return $payment_item->get_item_amount * (1 - $this->discount_rate);
	}

	/**
	 * 決済金額取得（戻り値プリミティブ型なのほんとは良くない）
	 *
	 * @param PaymentItem $payment_item
	 * @return integer
	 */
	public function get_payment_amount(PaymentItem $payment_item): int {
		$discount_amount = $this->get_discount_amount($payment_item);
		return $payment_item->get_item_amount - $discount_amount;
	}
}
  ```

  </details>
  
  上記のサンプルコードは以下のようになっています。 

・入力された割引コードが存在する割引コードか（隠蔽）
 ・割引コードが利用期間の範囲内か　　　　　　（隠蔽）
 ・商品の値段によって割引率（額）を変更する　（隠蔽）
 ・割引額を計算する　　　　　　　　　　　　　（公開）
 ・割引率（額）を元に最終的な決済金額を求める（公開）

　呼び出し側が知らなくても良い情報を隠蔽して、必要な情報のみを公開することで呼び出し側は直観的にオブジェクトを操作できるようになります。（作り方次第ですが）わざわざコードを読んで使い方を逆算するようなことをしなくてよくなります。

 全て公開
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267761/eea36ee2-91fa-d862-ffde-a3d831c64fd9.png)

必要な情報のみ公開
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267761/5fe39a2e-116b-6416-b4d7-111112fb7d23.png)
Why CompTIA Security+ is Essential for Aspiring Cybersecurity Experts

In today's digital age, cybersecurity has become a critical concern for organizations worldwide. As cyber threats continue to evolve, the demand for skilled professionals who can safeguard systems and data is at an all-time high. This is where the [CompTIA Security+ certification](https://www.p2pexams.com/comptia) comes into play, offering IT professionals a globally recognized credential that validates their ability to perform essential security functions.

CompTIA Security+ is a globally recognized certification that assesses the foundational skills required to handle core security tasks. It validates an individual’s ability to identify, mitigate, and manage various security threats, making it an essential credential for anyone pursuing a career in IT security. From securing networks to ensuring compliance with industry standards, Security+ prepares professionals to handle a wide range of cybersecurity responsibilities.

The certification holds immense value for IT professionals for several reasons. First, it provides industry-wide recognition, opening doors to job opportunities in both the public and private sectors. With CompTIA Security+, professionals are equipped with fundamental skills such as threat management, risk analysis, cryptography, network security, and incident response, all of which are crucial for working in cybersecurity. Additionally, the certification enhances career prospects, offering a clear path to advanced roles and higher salaries. For many mid-level security positions, Security+ is a basic requirement, helping candidates gain a competitive edge.

Another significant benefit is that the certification meets the requirements for compliance in several government agencies, including the U.S. Department of Defense. This makes it particularly valuable for those pursuing jobs in the public sector or working with government contracts. Furthermore, CompTIA continuously updates the Security+ certification to reflect the latest cybersecurity challenges, ensuring that certified professionals remain relevant in the ever-evolving landscape.

The CompTIA Security+ certification provides IT professionals with the knowledge and validation they need to succeed in the field of cybersecurity. It serves as a vital stepping stone for those looking to enhance their expertise or pursue a career in security, offering numerous advantages that make it a worthwhile investment for any IT professional.
宇宙文明レベルをテーマとした同人ゲームの案をchatGPTに考えてもらった

chatGPTに小説で考えていた宇宙文明のレベルの差による宇宙文明の衝突のゲームを考えてもらったら、

次の答えが返ってくる。

宇宙文明レベルをテーマとしたSLG（シミュレーションゲーム）の企画として、宇宙圏の高度な文明勢力と、地球圏の比較的発展途上の勢力が攻防を繰り広げるシナリオは、非常に壮大で戦略的な要素が際立つ内容にできます。以下は、そのゲームコンセプトの概要です。

### タイトル案
「星間覇権の戦火」（仮）

### コンセプト
地球は技術的な限界に達し、外宇宙の高次文明と接触を果たした。地球圏は外部からの侵略と、未知の技術を用いた文明の影響を受けながらも、自らの生存と拡張を目指して戦いを繰り広げることになる。プレイヤーは、宇宙圏または地球圏の勢力を指揮し、資源の確保、技術開発、外交、軍事行動を駆使して、星間覇権を競い合う。

### ゲームの特徴

#### 1. **勢力選択**
   - **宇宙文明勢力**：数万年の歴史を持つ超高度文明。強力な艦隊と高度なテクノロジーを駆使するが、資源が限られている。彼らは他の文明を監視し、必要に応じて干渉する存在。地球圏を脅威として排除するか、協力するかの選択を迫られる。
   - **地球圏勢力**：資源に乏しく技術的に劣るが、急速な技術進化や柔軟な戦略、アライアンス構築を強みとする。外宇宙の勢力に対抗しながらも、内政や防衛を進めつつ、地球外の拠点を開発していく。

#### 2. **技術ツリー**
   - 各勢力は独自の技術ツリーを持ち、宇宙文明は高度な兵器技術やエネルギー管理に特化し、地球圏勢力は急速な技術成長や戦術的なリソース管理が重要になる。プレイヤーは研究や発展に重点を置き、適切な技術を選択しなければならない。

#### 3. **資源管理**
   - 資源はゲームの中核要素。宇宙文明勢力は、高度なエネルギー資源や、希少な鉱物を確保し、巨大な艦船や惑星規模の施設を建造できる。一方で、地球勢力は限られた資源を有効に活用し、効率的な補給線と防衛戦略を打ち出すことが求められる。

#### 4. **外交システム**
   - 他の宇宙文明や地球内の国々との外交が重要な要素となる。プレイヤーは、同盟を結んで互いの技術を交換したり、協力してより強力な敵に対抗することができる。ただし、裏切りやスパイ行為も可能であり、状況次第で外交戦略が大きく変わる。

#### 5. **戦闘システム**
   - ターン制またはリアルタイム制の戦闘システムで、艦隊戦や惑星攻防戦がメインとなる。宇宙文明勢力は強力な大型艦や自動化された戦力を有し、地球勢力はゲリラ戦術や戦術的奇襲を得意とする。環境要因（重力井、惑星リングなど）を活用して戦術的なアドバンテージを得ることも可能。

#### 6. **惑星開発・防衛**
   - 地球勢力は新たな惑星を植民地化し、防衛拠点を築きながら勢力を広げる。宇宙文明勢力は、既存の惑星システムを利用して強力な防衛網を構築し、侵攻してくる地球勢力を迎え撃つ。

### ゲームの進行
プレイヤーは以下の要素をバランスよく管理する必要があります。
- **戦略的な拡張**：惑星や資源を確保し、技術を進化させながら勢力を拡大。
- **外交と同盟**：他の文明と連携し、戦略的な利害関係を構築。
- **軍事力の増強**：艦隊や軍備を整え、戦略的な侵攻や防衛を展開。
- **エンドゲーム**：最終的には、宇宙全体の覇権を握るか、平和的に共存するかの選択が迫られます。

### ターゲットプレイヤー
SFファンや、戦略シミュレーションゲームが好きなプレイヤーをターゲットにしており、深い戦略性と長期的なゲームプレイ体験を提供します。

このように、宇宙文明と地球の攻防をテーマにすることで、壮大なスケール感とプレイヤーに幅広い選択肢を提供できるSLGを実現することが可能です。


引き続き、同人ゲームの案を考えるつもりです。
投稿 64 SQL 2024/09/02

本日の勉強時間　1H

データエンジニアは、データの収集や整理、管理、活用のための基盤を構築・運用するITエンジニアです。データ分析に向けた準備をする役割で、大量のデータを扱うために欠かせない存在です。データエンジニアの仕事には、次のようなものがあります。

・データの収集、保管、加工、分析のためのシステムの構築
・データベースやネットワークなどのインフラの構築
投稿 61 0秒思考 2024/08/30

本日の勉強時間　1H

# 0秒思考

・タイトルを決める
・それについて思いつくワードを1分間書き続ける
・それを10回続ける
→1日10分程度


-効果-
自分の抱いているイメージを言語化できる。
自分ってこういうこと考えていんたんだ、ということを実感できる。
GitでWindowsの認証局ストアに登録されたルート証明書を使用する

# 課題・背景
会社のプロキシ利用した状況下かつ、会社独自のルート証明書を使用（Windowsの認証局ストアにインポート）している場合。
Gitは通常、認証局ストアを参照しないため、そのままだとSSLのエラーが発生する。
下記のように、sslVerifyをfalseにすることでも対処可能だが、セキュリティ的に心配。

```bash
git config --global http.sslVerify false
git config --global https.sslVerify false
```

# 対処方法
Windowsの認証局ストアに登録されたルート証明書をエクスポートせずにGitで使用することは、直接的には難しいです。Gitは通常、証明書ファイルを直接参照する設定を必要とするためです。

しかし、以下の方法で間接的に対応することができます：

1. **Windowsの証明書ストアを信頼するようにGitを設定**:
   - Gitの設定ファイル（`gitconfig`）を編集し、Windowsの証明書ストアを信頼するように設定します。具体的には、以下のように設定します：
     ```bash
     git config --global http.sslBackend schannel
     ```
     この設定により、GitはWindowsの証明書ストアを使用するようになります。

2. **環境変数の設定**:
   - 環境変数を設定して、GitがWindowsの証明書ストアを使用するようにします。以下のコマンドを実行します：
     ```bash
     set GIT_SSL_BACKEND=schannel
     ```
     これにより、GitはWindowsの証明書ストアを使用するようになります。

これらの設定を行うことで、Windowsの認証局ストアに登録されたルート証明書をエクスポートせずに使用することが可能になります¹²³。

### `schannel`とは？
`schannel`は、Windowsのセキュリティサポートプロバイダ（SSP）の一つで、SSL/TLSプロトコルを実装しています。これにより、Windowsの証明書ストアを利用してSSL/TLS接続を行うことができます。

### コマンドの詳細
- `git config --global`: これはGitのグローバル設定を変更するコマンドです。`--global`オプションを使用すると、全ユーザーに対して設定が適用されます。
- `http.sslBackend schannel`: これはGitがHTTPS接続において使用するSSL/TLSバックエンドを`schannel`に設定することを意味します。

### メリット
- **Windowsの証明書ストアを利用**: `schannel`を使用することで、Windowsの証明書ストアに登録されたルート証明書をそのまま利用できます。これにより、証明書のエクスポートや個別設定が不要になります。
- **一貫したセキュリティ**: Windowsのセキュリティ機能をフルに活用できるため、セキュリティが強化されます。

### 使い方
以下のコマンドを実行するだけで設定が完了します：
```bash
git config --global http.sslBackend schannel
```

これで、GitはHTTPS接続時にWindowsの証明書ストアを使用するようになります。


ソース:
(1) 【図解/Windows】ルート証明書のインストール方法と確認方法. https://milestone-of-se.nesuke.com/knowhow/lookup-windows-cert/.
(2) Windows環境にルート証明書をインストールする方法 - DigiCert. https://knowledge.digicert.com/ja/jp/solution/SO23057.
(3) ルートCA(証明機関)の証明書をインポートする - Windows - iPentec. https://www.ipentec.com/document/windows-import-root-ca-certification.
(4) セキュリティ証明書の検証が失敗する - Windows Server. https://learn.microsoft.com/ja-jp/troubleshoot/windows-server/certificates-and-public-key-infrastructure-pki/secured-website-certificate-validation-fails.
(5) NT Auth ストア へ ルート証明書 をインポートする - Qiita. https://qiita.com/carol0226/items/5dde4fe77220f4388945.
(6) undefined. https://knowledge.digicert.com/ja/jp/solution/SOT0006.html.
ゆめみの1dayインターンに参加した感想 #ゆめみインターン

<!-- ゆめみの1dayインターンに参加した感想 -->

## はじめに

株式会社ゆめみの1dayインターンに参加しました。というわけで、参加してみた感想を書いていこうと思います。

## 選考

エントリーフォームに記入し、コードテストを受けました。

コードテストはバックエンドに関する問題となっていました。バックエンドについて、基本的なことがわかっているかを問う問題だったと思います。

## インターン当日

### 午前

まずガイダンスや会社の紹介があり、その後グループに分かれて自己紹介とレクリエーションを行いました。

昼休憩前にはお弁当が配達されてきました。このお弁当はゆめみさんから無料でもらえたものだったのですが、非常においしかったです。自分は九州牛のステーキ弁当をいただきました。

### 午後

昼休憩の後は、実際にサービスの設計をやりました。あるテーマが与えられ、それについて以下のことを行いました。

- 要件・ユースケースの把握
- E-R図の作成
- API設計(RESTful API)

設計はグループで話し合ったり分担しながら行い、メンターの方にアドバイスをしていただきながら進行していきました。

最後はグループごとで発表を行いました。他のグループの発表を聞いていると、自分たちの設計についてもっとこうすればよかったのか、ということが見えてきたりしました。また、ほかのグループの人との経験値の差も感じ、もっとがんばる必要があると思いました。

最後は発表を受けてのグループでの反省会があり、その後は質問会のあと解散となりました。

## 感想

自分が参加できた数少ないインターンの一つだったわけですが、非常に興味深い内容だったと思います。

バックエンド開発には興味があったので、APIの設計をどのように行うのか、RESTful APIとはどのような特性があるのか、ということなどを知ることができたことは非常にためになりました。

また、メンターの方に、実際の業務で培った設計知識を教えていただいたり、レビューしていただいたりする機会があったため、実践的な知識も身に付けることができたと思います。

また、自分が思いついた方法の良い点や悪い点、他の人が思いついた方法の良い点や悪い点を知ることができたことも非常に勉強になりました。

また、実際にエンジニアとして働くうえで重要になるスキルなども教えていただけたため、今後何をしたらいいのかも明確になりました。

現状の自分の実力や、もっと勉強すべきことも明確にできたと思うので、今後のモチベーションにつながるインターンだったと思います。

ゆめみさん、ありがとうございました！
Amazon Connectで画面録画を試してみた

# はじめに
Amazon Connectではオペレーターの画面を録画する機能があります
画面録画を実施するには、オペレーターの方のPCにアプリケーションをダウンロード・インストールを実施する必要があります。当記事はオペレーターの方のPCへのアプリケーションのインストール方法とAmazon Connect側の設定について説明します。

## 注意点
- 画面録画の開始と終了のタイミングは、通話開始からアフターコールワーク終了までです
- Amazon Connect側の設定だけでは、画面録画はされません
- 画面録画はアフターコールワーク終了後、1分程度で設定したS3に出力されます
- 複数ディスプレイの場合は3画面まで録画可能です
- オペレーターの方がアプリケーションをインストールしていない場合は、録画はされないがフローや受電でエラーになることはありません



# 画面録画を実施するPCの設定

画面録画を実施するには、オペレーターの方のPCにアプリケーションをダウンロード・インストール方法を記載しています。

### 1. アプリケーションのダウンロード

A. 以下のリンクを開く:  
[https://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/amazon-connect-client-app.html](https://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/amazon-connect-client-app.html)

B. 「AmazonConnectClientWin-v2.0.1」を押下

:::note warn
警告
v2.0.2が2024年9月30日にリリースされました。
対応言語を「English」にする必要があります。
:::


![スクリーンショット 2024-07-31 150959.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/ce7c9b9b-4b03-eadf-3bc0-49c69a931c38.png)

C. フォルダ（エクスプローラー）の「ダウンロード」を押下

D. アプリケーションがダウンロード完了したことを確認

![スクリーンショット 2024-07-31 151125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/3ade2bc0-9662-2f71-65fe-df06f8aaa5f9.png)

### 2. ZIPファイルの解凍

A. ダウンロードしたZIPファイルを右クリックし、「すべて展開」を押下

B. 「展開」を押下

C. 解凍されたフォルダを確認
   1. 「AmazonConnectClientWin」を押下
   2. 以下のようになっていることを確認
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/7bf06b98-c76b-a751-b9c0-e24248c24d50.png)


### 3. アプリケーションのインストール

A. 「Amazon.Connect.Client.Service.Setup.2.0.1.msi」を押下

![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/c4cb149f-1762-ea69-93e6-cac8ac7f61ac.png)

### 4. インストール後の確認

A. フォルダ（エクスプローラー）の左サイドバーにある「PC」を押下

B. 「Windows（C:）」を押下

C. 「Program Files」を押下

D. 「Amazon」を押下

E. 「Amazon.Connect.Client.Service」を押下

F. 以下のようになっているかを確認

![インストール後の確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/6a99baac-c050-250d-f32d-40eee5f9bd2a.png)

## 注意点
- インストールしたアプリケーションは録画中でなくても、バックグラウンドでも動き続けます
- 画面録画中（通話中）のPC負荷

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/3ac134ec-4d5a-3cca-e328-882c83cd9699.png)

- 画面録画以外のタイミングのPC負荷
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/90f5423c-085a-3f35-89a3-b27c68b259fd.png)


# Amazon Connect側の設定

### Contact Lensの有効化

A. Amazon Connectのインスタンス一覧画面に遷移

B. 該当のインスタンスエイリアスをクリック

C. 左側サイドバーの「分析ツール」をクリック

D. Contact Lensを有効にする

### 画面録画の有効化

A. Amazon Connectのインスタンス一覧画面に遷移

B. 該当のインスタンスエイリアスをクリック

C. 左側サイドバーの「データストレージ」をクリック

D. 「画面録画」の編集ボタンをクリック

E. 任意のS3バケットを設定する

![スクリーンショット 2024-07-31 150811.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/f988062d-c7ed-a0fc-9d5c-9c0dc85651a1.png)


### フローの設定

A. 「記録と分析の動作を設定」ブロックで「画面録画」の「オン」にチェックを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3717693/e8284a90-830a-5180-fcbb-48caf0fd3d02.png)

B. 「公開」をする

[参考資料](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-client-app.html)
terraformリソースでcountとfor_eachを併用して簡単にリソースを作成したかった話

# はじめに

業務の中でterraformを触る機会がありこの書き方いいなと思ったので備忘録です。

# 背景＆課題
今回はdatadogでprd, pilot以外の環境で、hogehoge-api-web, hogehoge-api-appのような末尾のprefixだけが異なるサービスに対してダウンタイムを作成したいタイミングがありました。
それぞれ冗長にダウンタイムを作成してもいいですが、冗長になってしまうため、１つの定義で２つのマイクロサービスに対してのダウンタイムを作成したいという課題がありました。

いつもは、countで作成する環境を限定。for_eachで末尾のprefixが異なるサービスのモニターを作成しており、countとfor_eachは併用できるものと考えていました。

しかし、以下のようにcountとfor_eachは併用することができません

```tf
resource "datadog_downtime_schedule" "downtime-template" {
　// count と for_eachは併用できない
  count                            = "${local.env}" == "prd" || "${local.env}" == "pilot" ? 0 : 1
  for_each                         = local.application_name
  // 以下省略
}
```

## エラー
併用した場合以下のようなエラーが発生してしまいます。
```zsh
│ Error: Invalid combination of "count" and "for_each"
│ 
│   on downtime.tf line 4, in resource "datadog_downtime_schedule" "downtime_template":
│    4:   for_each                         = local.application_name
│ 
│ The "count" and "for_each" meta-arguments are mutually-exclusive, only one should be used to be explicit about the number of
│ resources to be created.
```

# 解決策
先輩社員からアドバイスをいただき、以下のような感じで、環境に該当する場合は空配列を返すようにしました。（こういう書き方もできるんですね〜）
```tf
for_each                         = "${local.env}" == "prd" || "${local.env}" == "pilot" ? {} : local.application_name
```

## 完成系
```tf
locals {
  service_name     = "hogehoge-api"
  application_name = {
    web = {
      fugahoge = xxx
    },
    app = {
      fugahoge = xxx
    }
  }
}

resource "datadog_downtime_schedule" "downtime-template" {
  for_each                         = "${local.env}" == "prd" || "${local.env}" == "pilot" ? {} : local.application_name
  scope                            = "*"
  message                          = "[${local.env}] ${local.service_name}-${each.key} scheduled downtime"
  mute_first_recovery_notification = false
  notify_end_states                = ["no data", "alert", "warn"]
  notify_end_types                 = ["expired"]
  recurring_schedule {
    recurrence {
      duration = "450m" # Everyday 0:00 - 7:30 JST (specified in UTC)
      rrule    = "FREQ=DAILY;INTERVAL=1"
      start    = "2024-09-16T15:00:00" # JST 2024-09-17 00:00
    }
    recurrence {
      duration = "3330m" # SAT 0:00 - MON 7:30 JST (specified in UTC)
      rrule    = "FREQ=WEEKLY;INTERVAL=1"
      start    = "2024-09-13T15:00:00" # JST 2024-09-14 00:00
    }
  }
  monitor_identifier {
    monitor_tags = [
      "env:${local.env}",
      "service:${local.service_name}-${each.key}",
      "downtime-for-cost:true"
    ]
  }
}
```
ngrokのインストールと使い方

## 1. ngrokとは？

**ngrok**は、ローカル上で公開しているwebサービスを外部に公開できるツール
例えば、OAuthを使った外部サービスとの連携の開発とかに使います。

## 2. インストール手順

### Windowsの場合

1. **ngrok公式サイト**([ngrok.com](https://ngrok.com)) にアクセスし、Windows用をダウンロードする
2. ダウンロードしたZIPファイルを解凍し、`ngrok.exe` ファイルを適当なディレクトリにおく。
3. `ngrok.exe`を配置したフォルダにパスを通す。システム環境変数の設定をしてね。

#### システム環境変数の設定

- `Windowsキー + Pause` を押して、「システムの詳細設定」を開きます。
- 「環境変数」をクリックし、`Path`にngrokを配置したフォルダのパス（例: `C:\ngrok`）を追加します。
- コマンドプロンプトを開き、`ngrok` と打ち込んで正しく実行されるか確認する。

### macOS/Linuxの場合

以下のコマンドコピペでOK！

1. ターミナルを開いて、コピペぽちー

```bash
curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok
```

---

## 2. 初期設定

インストール後、ngrokを使うためにはアカウントを作成し、認証トークンを設定する必要があります。

### ngrokアカウントの作成

1. [ngrok公式サイト](https://ngrok.com)にアクセスし、アカウントを作成します。無料プランでOK
2. ログイン後、ダッシュボードから「**Your Authtoken**」をコピーします。

### トークンの設定

コピーしたトークンを入力して認証する。

```bash
ngrok authtoken <あなたの認証トークン>
```

これでngrokのセットアップは完了です。

---

## 3. ローカルサーバーを公開する

次に、ローカルで動作しているアプリケーションをngrokを使ってインターネットに公開する。
localhost:3000で公開しているNode.jsのアプリケーションを公開する場合はこんな感じ


```bash
ngrok http 3000
```

コマンドを実行すると、次のような出力が表示されます：

```bash
ngrok by @inconshreveable                                       (Ctrl+C to quit)

Session Status                online
Account                       your_account (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxxx.ngrok.io -> http://localhost:3000
Forwarding                    https://xxxxxxxx.ngrok.io -> http://localhost:3000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00
```

### 外部からのアクセス

この出力に表示されている`https://xxxxxxxx.ngrok.io`のURLを使用して、外部のネットワークからローカルサーバーにアクセスできるようになります。

## 4. ngrokの切断

ngrokを終了したい場合は、単に`Ctrl + C`を押して、ngrokセッションを終了する。

## 結論

ガチでめっちゃ使いやすいし簡単！
webエンジニアなら入れておくと良いですよ〜！
NetBeans環境構築　なぞの不具合

# NetBeansのセットアップでなぞの不具合が発生し、解決できたので情報共有します

### 不具合の詳細
![スクリーンショット 2024-09-12 125150.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881962/824a0164-dc49-4f0f-d111-53f31f4f1907.png)

NetBeansの公式サイトからexeファイルをダウンロードした後に起動したところ、このように固まってしまった。
パソコンの詳細
windows11
JDK ver.17.0  (22.0にバージョンアップしたが効果は無し。)
NetBeans Ver.22

この不具合ではエラー文がなにもでないので、たちが悪い。
JDKのバージョンを最新版に更新、管理者として実行。
さまざま試したが、解決せず。


## 解決策
Exeファイルからの起動だと不具合がおきるが、Zipファイルからの起動だと正常に動作した。
Zipファイルからのセットアップの手順はこちらから

https://qiita.com/ken8/items/990d284ae6952635ecf7
NetBeansをZip版でセットアップする方法（Windows11向け）

# NetBeansをZip版でセットアップする方法（Windows向け）
NetBeansのインストーラーがうまく動作しない場合や、手動でセットアップしたい場合、Zip版を使用することで解決できます。この記事では、Zip版のNetBeansをWindows環境にセットアップする手順を詳しく解説します。

1. Zipファイルの解凍
解凍先の選択
まず、NetBeansを配置するフォルダを選びます。以下の点に注意してください：

パスに日本語やスペースを含めないこと。
管理者権限を必要としないディレクトリであること。
例として、C:\NetBeansフォルダを作成します。

## 解凍
ダウンロードしたZipファイルを右クリックします。
「すべて展開」を選択します。
解凍先に先ほど作成したC:\NetBeansを指定します。
または、お好みの解凍ソフト（7-ZipやWinRARなど）を使用して解凍します。

2. NetBeansの起動
実行ファイルの場所
解凍したフォルダ内のnetbeans\binディレクトリに移動します。

## NetBeansの起動
netbeans64.exe（64ビットOSの場合）またはnetbeans.exe（32ビットOSの場合）を探します。
ダブルクリックして起動します。
3. ショートカットの作成（任意）
NetBeansをより便利に起動できるよう、ショートカットを作成します。

## デスクトップへのショートカット作成
netbeans64.exeを右クリックします。
「ショートカットの作成」を選択します。
システムから「デスクトップにショートカットを作成しますか？」と聞かれた場合は「はい」を選択します。
ショートカットの配置
作成されたショートカットをデスクトップやスタートメニューに移動すると、次回から簡単に起動できます。
おわりに
これで、Zip版NetBeansのセットアップは完了です。必要に応じて以下の追加設定を行うと、より快適に使用できます。

JDKのパス設定：netbeans\etc\netbeans.confファイルでnetbeans_jdkhomeを設定します。
プラグインのインストール：必要なプラグインを追加でインストールします。
アップデートの確認：「ヘルプ」 > 「更新のチェック」から最新の更新プログラムを適用します。
PowerShellで直接実行すると問題ないのにスクリプトとして実行するとエラーが出てくる

## はじめに
この記事は新人エンジニアが遭遇したトラブルと解決方法の覚書です
「何」をしたら「どうなった」のメモで、「何故」はほとんど書いておりません(わからないので)


## 起こったこと
作成したスクリプトを実行
　→エラーが発生、失敗

コマンドを個別にコピペしてPowerShellに貼り付け実行
　→エラーなし、成功

新しくファイルを作成して全文コピペし、スクリプトとして実行
　→最初と同じ箇所にエラーが発生、失敗

### 遭遇したエラー
#### 1. 式またはステートメントのトークンを使用できません
```
式またはステートメントのトークン '`r`n' を使用できません。
式またはステートメントのトークン 'yyyy/MM/dd/' を使用できません。
```

#### 2. 文字列に終端記号がありません
```
文字列に終端記号 " がありません。
```

#### 3. ステートメント ブロックまたは型定義に終わりが存在しません
```
ステートメント ブロックまたは型定義に終わりの '}' が存在しません。
```

#### 確認したこと
・誤字脱字
・全角半角
・変なところに改行やスペースが入っていないか
　→異常なし


 ## 解決法
 文字コードを**BOM付きのUTF-8**に変更
 　→エラーが発生せずにスクリプトが正常終了

 #### BOMとは
 byte order mark：バイトオーダーマークの略
 Unicodeで符号化したテキストの先頭に付与される数バイトのデータのこと

 この先頭数バイトのデータで、プログラムはそのテキストデータがどの符号化形式を使っているのか判別する……らしい

 #### なぜBOM付きに？
 日本語が入っているとBOMなしは文字化けして認識されるらしい
 特に日本語関係ない箇所だったし、ファイル内に日本語がないように作成しなおしても同じ状態だったんだけど……変えたら解決したからまあいいか
[paizaラーニング]ランクCの問題をPythonでチャレンジしてみた

pythonの学習のため、paizaラーニングのCランクのプログラミングスキルチェック問題を
5つ回答してみました。以下の私の回答はpaizaのテストケースを
すべて通過したものとなります。

# 問題１：【キャンペーン問題】枠で囲む
```
S = input()
len_S = len(S)

for i in range(len_S + 2):
    print("+",end="")
    
print(f"\n+{S}+\n",end="")

for i in range(len_S + 2):
    print("+",end="")
```
割と直感的に答えられるシンプルな問題でした

# 問題２：プレゼント応募企画の実施
```
N,A,B = (int(i) for i in input().split())
for x in range(1,N+1):
    if x % A == 0 and x % B == 0:
        print("AB")
    elif x % A == 0:
        print("A")
    elif x % B == 0:
        print("B")
    else:
        print("N")
```
ほぼFizzBuzz問題のようなものでした。

# 問題３：戦闘シミュレーション
```
N,L = (int(x) for x in input().split())
list_x = []
for i in range(N):
    list_x.append(int(input()))
for i in list_x:
    if L > i:
        L = L + (i // 2)
    elif L < i:
        L = L // 2
print(L)
```
問題をよく読んだらやっていることは結構単純だなと思いました。

# 問題４：じゃんけんの結果
```
janken_count = int(input())
alice_win_count = 0
list_alice = []
list_bob = []

for i in range(janken_count):
    A,B = input().split()
    list_alice.append(A)
    list_bob.append(B)

for i in range(janken_count):
    if (list_alice[i] == "G" and list_bob[i] == "C") or (list_alice[i] == "C" and list_bob[i] == "P") or (list_alice[i] == "P" and list_bob[i] == "G"):
        alice_win_count += 1

print(alice_win_count)
```
じゃんけんの勝敗の条件分岐のところをもう少しスマートにかけるといいかなと振り返って思いました。

# 問題５：怪盗からのメッセージ
```
message = input()
new_message = ""
keep_num = ""
alphabet_list = [chr(i)for i in range(65,91)]

for i,alpha in enumerate(message):
    if not alpha in alphabet_list:
        if keep_num:
            keep_num += alpha
        else:
            keep_num = alpha
        continue
    if not keep_num == "":
        int_keep_num = int(keep_num) + 1
        if new_message == "":
            new_message = str(int_keep_num)
        else:
            new_message += str(int_keep_num)
        keep_num = ""
    idx = alphabet_list.index(alpha)
    if alpha == "Z":
        if new_message == "":
            new_message = "A"
        else:
            new_message += "A"
    elif new_message == "":
        new_message = alphabet_list[idx+1]
    else:
        new_message += alphabet_list[idx+1]

if not keep_num == "":
    int_keep_num = int(keep_num) + 1
    new_message += str(int_keep_num)
print(new_message)
```
処理をべた書きしすぎてかなり冗長になってしまっているので、
数字を加算する処理やメッセージを置換する処理など複数回出てきているものは
関数にしてしまったほうが良かったなと思いました。

Bランクの問題もいけるかな？と思って試しに一問(Bランク：ドーナツ)解こうとしましたが
撃沈しました。ひとまずCラング問題が大方解けるようになるまでどんどんチャレンジしていきたいと思います。

今後の課題
・変数名を誰が見てもわかるようにする
・コードを書く時間を短縮する
・問題を解く数を増やしていく
Markdown 作成環境を整えるのとこまごま系やっつけるまで

## やったこと
Markdown 作成環境を整えた  
↓前回記事で作成した記事関連ファイルのリポジトリのフォルダ構成整理とアプリへの反映した  

https://qiita.com/magurouhiru/items/8fbfc5c7e4163028e757

## Markdown 作成環境を整えた
これまで嫌だったこと  
- 使ってたエディタのレスポンスが地味に悪い(コーディングするには最高なんだけどね)  
- 改行ごとに`<br>`を入れる必要があり面倒

1つ目について、まずエディタをVSCodeに変えました。  
もともと軽くて好きだったけど、やっぱりいいですね！  

2つ目について、↓の記事見てシフトとエンターをしたら半角スペース2つ入れるようにした。  

https://qiita.com/P-man_Brown/items/2e78f5528ba8e1277d6d

また、こちらの記事見て半角スペースを常に表示させるようにした。  

https://www.javadrive.jp/vscode/setting/index8.html

ちなみになぜ半角スペース2つかというと、これで改行できるらしい。  
(てっきり`<br>`じゃないとだめだと思ってた。)  

個人的にこれのおかげで大分快適になった。  
なぜかというと、私はQiitaと自作のメディアサイト？に記事を投稿しているのですが、両者で`<br>`の振る舞いが異なっているのです。  
したがって、これまでは手で`<br>`を入れて自作サイトにアップロードする。  
その後、置換で`<br>`を削除してQiitaにアップロードする。  
ということをしていました。  
それが半角スペース2つだとどちらも同じ挙動となり、修正不要となりました。  
ハッピー  

## 記事関連ファイルのリポジトリのフォルダ構成整理とアプリへの反映した
### 前置き
これまでリポジトリのフォルダ構成と自作サイト(Angular)の設定がちぐはぐでした  
どういうことか説明するために、ます以前のフォルダ構成を示します。  
```
article
├─001
│      001.md
│      1-1.png
│      1-2.png
│      1-3.png
│      2-1.png
│      3-1.png
│
├─002
~
├─003
~
├─004
~
├─005
~
└─test
```

これが以前までのフォルダ構成です。  
特にひねりもなく、articleフォルダの中に記事毎のフォルダがあり、記事と画像ファイルが入っています。  
ここで問題なのが、記事から画像を読み込むときの起点が、記事作成時とサイト掲載時で異なることです。  
例えば001.md から1-1.png を読み取りに行くとき、  
記事作成時は記事がある場所を起点とするので`![img.png](1-1.png)`となり、  
サイト掲載時はarticle フォルダの1つ上を起点とするので`![img.png](article/001/1-1.png)`となります。  
つまり、毎回リンクを変える必要がありました。  
これが上でちぐはぐと表現した理由であり、今回見直しました。  

### 結局どう変えたの？
記事関連ファイルのリポジトリのフォルダ構成は↓のようなフォルダ構成に変えました。  
```
article
│  001.md  
~
├─001
│      1-1.png
│      1-2.png
│      1-3.png
│      2-1.png
│      3-1.png
│
├─002
~
├─003
~
├─004
~
├─005
~
└─test
```

アプリは、まずpublic フォルダにあるarticleフォルダ(Git submodule)を`git mv`で1つ上の階層(プロジェクトの直下)に移動しました。  
続いて、angular.json を↓のように変更しました。  
```
            "assets": [
              {
                "glob": "**/*",
                "input": "public"
              },
              {                                       ←New!
                "glob": "**/*",                       ←New!
                "ignore": ["**/.git", "**/.vscode"],  ←New!
                "input": "article"                    ←New!
              }                                       ←New!
            ],
```
これでいちいちリンクを直す必要がなくなりました。  

正直前回の記事でやったことは、楽しかったけどあまり楽にはならなかった。(結局手作業あったしね)  
けど、今回やったことと合わせると大分楽になったと感じる。  
しあわせ  
エラー画面乗せれてないのだけ心残り。  

今回の記事は以上です。  

前回記事はこちら  

https://qiita.com/magurouhiru/items/6fc7f5e23bc7239bc7d6

詳細見たい人はこちら  

https://github.com/magurouhiru/mysite/pull/26

https://magurouhiru.github.io/mysite/
DMM GUILD 2024に参加してきた話

## はじめに
今回は、合同会社DMM様のインターンであるDMMGUILD2024に参加してきたので、その体験等を記録として残したいと思います。

https://dmm-corp.com/recruit/intern/engineer/guild/
### インターンシップに参加した動機
私が今回インターンシップに参加した経緯は、金沢で開かれたサポーターズさんの技育CAMPキャラバン in 金沢がキッカケで、そこでDMMGUILDの存在を知り、応募しました。
https://note.supporterz.jp/n/ndb486859d0f6

応募した理由としては以下のとおりです。
- 大規模ToC向けの自社開発サービスの開発を経験したい
- 実際の業務のコードを見てみたい・携わってみたい
- DMMの事業に対する解像度を上げたい

### インターンシップの概要
『開催期間』2024年9月2日〜9月13日
2週間のうち基本リモートでの業務となりましたが、9/12~13の最終日前日と最終日は東京本社に出社して業務を行いました。他のインターンシップのように一つの事業に配属され、その事業のIssueを解決する形式ではなく、複数の事業部から提示された実際の課題に各自が取り組む形式です。
また、各Issueには「estimate」と呼ばれるポイントが設定されており、そのポイント数に応じて賞金が支給されるという、珍しいインターンシップでした。

### インターンシップの業務内容
インターンでは、インフラからモバイルアプリまで幅広いタスクが用意されており、自分の目的に合わせて取捨選択しながらタスクを進めていきました。

#### 取り組んだIssue① 新規ページ作成
普段から慣れているTailwindを使用したタスクだったため、比較的スムーズに実装に取り掛かることができました。しかし、Mantineというライブラリは初めて使ったため、その仕様を理解するのに少し時間がかかった点が課題でした。ただ、事業部の方に質問しながら進めたことで、無事に実装まで完了できました。

#### 取り組んだIssue② UIの表示崩れ修正
既存のメンバーページで、ユーザー名が長い場合に画面が崩れてしまうバグが発生していたため、-webkit-プロパティを使用して3点リーダーを作成し、UIの崩壊を修正しました。以前も同様のタスクに取り組んだ経験があったためスムーズに進められると思っていたのですが、仕様の違いに悩まされました。

#### 取り組んだIssue③ トップページの修正
Figmaのデザインと現在のデザインが、大きな画面サイズで異なっていたため、その原因を調査し、修正実装に取り組みました。

#### 取り組んだIssue④ アプリダウンロード部分のズレ修正
画面を縮小した際に、QRコードの表示が崩れるバグが発生していたため、対応しました。初めはどのように修正すればいいのか見当がつかず困っていたのですが、最終的には画面サイズに応じてQRコードの位置を調整することで、問題を解決することができました。

#### 取り組んだIssue⑤ 横画面のUI対応
縦画面を前提としたアプリケーションを、横画面でも使用できるようにするタスクでした。リサイズ処理が複雑で、どのコードがどのデザインに影響を与えているのかが不明だったため、最初はCSSで対応しようとしましたが、レビューを受けてJS部分に修正が必要であることがわかりました。その後、再実装を行い、保守性を意識したコードを書くように意識しながら、最終的に実装を完了することができました。

#### 取り組んだIssue⑥ Goの単体テスト
これまでGoを扱ったことがなかったため、Goの単体テストに挑戦しました。まずはGoの基礎を学んでからテストに取り組みましたが、Suite構造体やGo.Mockなど、ポインタ操作を含む複雑な部分に苦労しました。最終的には完全な実装には至りませんでしたが、未知の領域に挑戦する良い経験となりました。

## インターンシップで得たもの

インターンシップを通じて、特に印象に残った学びを以下にまとめました。

#### 即時の反応とスタンプなどを活用したコミュニケーションの重要性
Slackなどでメッセージを確認した際、「確認しました」と相手にしっかり反応を返すことが重要だと感じました。ただ確認しただけでは、相手に安心感を与えられず、結果としてコミュニケーション不足による不安やトラブルにつながる可能性があるからです。迅速な対応が、Issue解決のスピード向上にも役立つことを学びました。

#### プライドを捨てて質問することの大切さ
自分一人で悩み続けるのではなく、15分ほど考えても解決策が見つからない場合は、すぐに周りに質問をすることが大切だと学びました。これにより、誤解や認識のずれが少なくなり、無駄な作業や手戻りを防ぐことができます。今後も、わからないことがあれば積極的に質問していこうと思います。

#### わかりやすい変数名と保守性を意識したコード作成
コードは他の人が理解できるものでなければならないと改めて認識しました。読み手に負担をかけるような変数名や、複雑でわかりにくい関数は避けるべきです。コードレビューを通して、自分のコードに対する意識がさらに高まり、今後はより保守性や可読性を意識したコードを書いていきたいと感じました。

#### DMMさんの自分なりの企業理解
新人研修では、フロントエンドからインフラまで幅広い技術に触れることができ、新しい技術領域の開拓が可能な会社です。さらに、数多くの事業が展開されているため、忙しい部署で自己研鑽に励むことも、程よい硬さと緩やかさのバランスを保ちながら充実したライフスタイルを送ることもできそうです。自分の目指す将来像に合わせて働き方を選べる会社だと思いました。

## 結果
お助けThanks賞とコツコツissue解決賞をいただきました!!!
やったぁ!!

## あとがき
最後になりますが、今回のインターンシップでタスクのレビューやサポートをしてくださった事業部の皆さんには、心から感謝しています。また、24卒のエンジニアの方々との座談会を通じて、エンジニアとしての働き方のイメージがより具体的になりました。来年度、インターンシップ選びで悩んでいる学生には、ぜひお薦めしたいインターンシップです！
DockerでRabbitMQをはじめる

# はじめに
RabbitMQは、メッセージブローカーとして広く利用されているツールです。メッセージの送受信を効率的に行うための中間層として機能し、分散システムやマイクロサービスアーキテクチャにおいて重要な役割を果たします。本記事では、Dockerを使用してRabbitMQを簡単にセットアップし、利用する方法を紹介します。

# 前提条件
- Dockerがインストールされていること
- 基本的なDockerコマンドの知識

# 手順
## Dockerのインストール確認
```terminal
docker --version
```

## RabbitMQのDockerイメージを取得
```terminal
docker pull rabbitmq
```

## RabbitMQコンテナの起動
```terminal
docker run -d --hostname my-rabbit --name some-rabbit -p 8080:15672 -p 5672:5672 rabbitmq:3-management
```
-d: デタッチモードでコンテナを実行
--hostname my-rabbit: コンテナのホスト名を設定
--name some-rabbit: コンテナに名前を設定
-p 8080:15672: RabbitMQの管理コンソールポートをホストのポート8080にマッピング
-p 5672:5672: RabbitMQのAMQPポートをホストのポートにマッピング

以下で動作を確認できる
```terminal
docker ps
```

## RabbitMQ管理コンソールへのアクセス
ブラウザで以下のURLへアクセスする
http://localhost:8080
![Screenshot 2024-09-13 at 18.08.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728030/b2e54ebc-dead-d9fb-eeb2-56f49ab766af.png)
デフォルトのログイン情報は以下の通り
Username: guest
Password: guest

これでRabbitMQのセットアップは完了です！Dockerを使うと簡単ですね！
kintoneプラグインの設定画面で画像を表示する方法

# 環境
- kintone
- javascript
- webpack

# 対象
- kintoneプラグインの設定画面で画像を表示したい人

# 対象ファイル
- webpack.config.js
- config.html
- config.js

### webpack.config.js
今回は "asset/inline"を使用した方法でやります
cssの['style-loader', 'css-loader']は使っていること多くあると思うので以下の様に下に追記して下さい。
``` webpack.config.js
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            //追記部分
            {
                test: /\.(png|jpg|gif)$/,
                type: "asset/inline",
            },
        ],
    },
```
### 画像の格納
iconが格納されているimageフォルダに格納して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120520/7c63a4d9-0c45-3576-3bea-5fd62a0a5914.png)

### config.html
画像を設置したい場所にID付きのDIVなどで記入して下さい。
```config.html
<div id="setting-sample"></div>
```

### config.js
以下のコードを追記します
```config.js
// 画像を格納した場所を相対パスで記入
import sampleImage from "../image/setting-sample.png";

(function(PLUGIN_ID) {
    'use strict';
    
    // htmlの方で指定したIDを設定
    const settingSample = document.getElementById("setting-sample"); 
    // imgタグの生成
    const img = document.createElement("img");
    // importした画像をsrcに指定
    img.src = sampleImage;
    // 埋め込み
    settingSample.appendChild(img); 
```
 
 

---
結構遠回りしている様な気もするのでもっと簡単な方法あったら教えて下さい！



# その他
Gitでソースを管理している場合にプッシュすると以下のエラーが出る場合はあります。
```
400 curl 22 The requested URL returned error: 400
```

その場合は以下のコマンドで対応できます。
```
git config http.postBuffer 500M
```