OmniAICreator/Qiita-1.07M huggingface dataset:
磯野家DX物語 第4章：レガシー刷新！フネ式マイグレーション

![vd1p3rqs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212914/31d8c527-ab65-b8c4-ada2-22270b68997d.png)

# 最終章

https://qiita.com/EasyCording/items/41a8feefae4b63372241

カツオAPIとフネボットの活躍で、磯野家はデジタル化の波に乗り、一家はより快適な暮らしを送っていた。しかし、平和な磯野家に新たな課題が持ち上がる。それは、長年使い続けたRedmineの老朽化問題だった。


### 1. カツオの提案と波平の抵抗

「父さん、Redmine、古くない？新しいバージョンにしたらもっと便利になるよ！」カツオの提案に、波平は頑なに反対した。「動いているものを触るな！余計な手間をかけさせるな！」

確かに、Redmineは長年磯野家のプロジェクト管理を支えてきた。しかし、バージョンが古く、機能も限られていた。セキュリティリスクも懸念される。

マスオが仲裁に入った。「確かに、いきなり全部を変えるのはリスクがありますね。少しずつ移行していくのはどうでしょう？」


### 2. フネの知恵袋：お味噌汁方式

波平の頭ごなしの反対に、カツオは困り果てていた。そんなカツオに、フネが優しく声をかけた。「カツオ、お味噌汁って毎日新しい出汁を足していくでしょ？古いお味噌汁も少し残しながら、新しい味に馴染ませていくの」

この言葉に、カツオは閃いた。「なるほど！徐々に新しいシステムに移行していくのか！」


### 3. 技術解説：フネ流マイグレーション戦略

カツオは、フネの知恵を参考に、以下の戦略を立てた。

* **ストラングラーフィグパターン（お味噌汁方式）:** 新しいシステムを徐々に導入し、古いシステムを徐々に置き換えていく。味噌汁のように、新しい出汁を少しずつ加えていくイメージだ。
    * まずは、影響範囲の少ない機能から新システムに移行。
    * 徐々に新システムの適用範囲を広げ、最終的に旧システムを完全に置き換える。

* **カナリアリリース（タマの餌やり方式）:** 新システムを一部のユーザー（タマに見立てたテストグループ）に先行リリースし、問題がないか検証する。タマの餌を新しいものに変える時、最初は少しだけ与えて様子を見るのと同じだ。
    * テストグループで問題がなければ、順次他のユーザーにもリリース。
    * 問題が発生した場合は、すぐに旧システムに戻せるように準備しておく。

* **データマイグレーション（お部屋の模様替え方式）:** 旧システムから新システムにデータを移行する。まるで、お部屋の模様替えのように、必要なデータだけを新しいシステムに移動するイメージだ。
    * データの整合性を保つために、慎重に計画を立て、テストを繰り返す。
    * 不要なデータは整理し、新システムをクリーンな状態に保つ。

```plantuml
@startuml

/' コンポーネント図 '/
package "磯野家レガシーマイグレーション" {
    [旧Redmine\n(お味噌汁の古い出汁)] as OldRedmine
    [新Redmine\n(お味噌汁の新しい出汁)] as NewRedmine
    [カツオAPI\n(お玉)] as KatsuoAPI
    [フネボット\n(味見係)] as FuneBot
    
    database "旧データ\n(古いお味噌)" as OldDB
    database "新データ\n(新しいお味噌)" as NewDB
    
    interface "タマ検証環境\n(お味見皿)" as TestEnv
    
    OldRedmine --> OldDB
    NewRedmine --> NewDB
    KatsuoAPI --> OldRedmine
    KatsuoAPI --> NewRedmine
    FuneBot --> KatsuoAPI
    NewRedmine --> TestEnv
}

note right of KatsuoAPI
  カツオAPIの新機能
  ==
  - データ移行機能
  - 並行運用制御
  - 整合性チェック
end note

note right of FuneBot
  フネボットの役割
  ==
  - 移行状況監視
  - ユーザーサポート
  - 異常検知
end note

@enduml
```

```plantuml

@startuml
skinparam sequenceMessageAlign center

actor カツオ
participant "カツオAPI\n(お玉)" as API
participant "フネボット\n(味見係)" as FuneBot
participant "旧Redmine\n(古い出汁)" as OldRedmine
participant "新Redmine\n(新しい出汁)" as NewRedmine
actor "タマ\n(テストユーザー)" as Tama

== Phase 1: お味噌汁方式準備 ==
カツオ -> API: マイグレーション開始
API -> FuneBot: 移行計画チェック依頼
FuneBot -> カツオ: 「順序立てて進めましょう」

== Phase 2: 少しずつ移行 ==
API -> OldRedmine: データ抽出
API -> NewRedmine: 一部機能の移行
NewRedmine -> Tama: テスト機能提供
note right: タマによる\n新機能お試し

Tama -> FuneBot: フィードバック
FuneBot -> API: 「具合は良さそうですよ」

== Phase 3: 新旧並行運用 ==
API -> OldRedmine: 既存機能維持
API -> NewRedmine: 機能拡充
FuneBot -> カツオ: 「波平さんも慣れてきたわ」

== Phase 4: 完全移行 ==
API -> OldRedmine: 段階的機能停止
API -> NewRedmine: 全機能移行完了
FuneBot -> カツオ: 「美味しい出汁が取れましたね」

@enduml
```

### 4. 導入後の変化とサザエさんクラウド構想

フネ流マイグレーション戦略は大成功！新しいRedmineは、最新の機能とセキュリティを備え、磯野家のDXをさらに加速させた。

波平も「フネ、お前は本当に賢い女だ…」と感嘆の声を漏らした。

そして、カツオは新たな構想を練り始める。「磯野家クラウド」だ。家族の情報だけでなく、近所の人々、さらには世界中の人々と繋がり、より豊かな生活を実現する…カツオの夢は広がるばかりだ。

# まとめ

システム移行は大変！

カツオＡＰＩ連携の方がしっくりくるなあ・・・
昨日会社で話していたことと、妙に一致する。
【個人開発 with AI】Reactのコンポーネント間の結合関係(import, export)を可視化するアプリを作りました

# Reactのコンポーネント間の結合関係(import, export)を可視化するアプリを作りました
コンポーネントの結合関係を可視化できるアプリを作りました。

2024/12.06現在、meta情報はtitleしか付与していない。

https://react-dependencies-tree.com

## 実際の画面
### デフォルト画面
![default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3865740/03b755b3-7f13-4250-e218-36c37501c726.png)

### フォルダアップロード画面
![upload-form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3865740/56f66ec8-abdf-292e-0e32-07ac076bbc2b.png)

### フォルダ解析後
![upload-video.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3865740/53ec006e-3725-bea0-22bb-6d7f231c26f6.gif)

リポジトリはコードを多少綺麗にした後、貼ります。

## 開発のきっかけ
結合関係にあるコンポーネントを探すのを楽にしたいため作りました。

## 概要
解析したいディレクトリを選択・アップロードしたらフォルダを解析し、結合を調べて可視化します。基本的な`import`、 `export`に対応しているはずですので大体のReactのプロジェクトフォルダをアップロードしても動作すると思います。ファイルの総数は500以下までと制限を設けています。

グラフの座標計算アルゴリズムの実装は自分では実力不足だと感じたので`Claude`という生成AIを使用し実装してもらいました。結合関係にあるコンポーネントができるだけ近くに配置されるようになっています。また各コンポーネントのnodeは動かすことが可能なので結合関係を追跡することも可能です。

**描画までの処理の流れ**
1. フォルダの解析
2. ファイルの結合関係(import/export)を解析
3. 各ノードの座標の計算
4. データを生成
5. 描画

## 技術スタック
- Next.js
- TaliwindCSS
- Vercel
- React Flow

### Next.js
1ページアプリにはオーバースペックではありますが、App Routerに一刻も早く習得するために採用しました。

### TailwindCSS
素のCSSを書くより簡単にスタイルを適用できるので採用。デメリットでよく挙がるクラスがとても長くなるのでそこが難点。クラス名を結合するライブラリを使用すると各種類ごとにクラス名が分割できるのでデメリットも克服可能。

### Vercel
リポジトリを紐づけるだけで超簡単にアプリをデプロイできるため採用。独自のCI/CDも組んでくれる。

### React Flow
Github Actionsのワークフローのマップのような各コンポーネント同士の結合が見やすいライブラリを探していてちょうどマッチしたので採用しました。色々なサービスでの採用実績もあるみたいです。

## アプリの欠点
- フィルタリング機能がないので、結合関係のコンポーネントのみ表示などができない
- コンポーネント数が多いと画面外にはみ出すのでコンポーネントを探さないといけない

### 最後に
感想やエラーなどあればコメントに書いていただけると幸いです。
よろしくお願いいたします。
右クリック検知って、結局何を使えばいいの？

この記事はhttps://qiita.com/advent-calendar/2024/mccmd シリーズ2、13日目の記事です。
# はじめに
初めまして！sonichitsuiiです。
今回の記事では、初心者が行き詰まりやすい、**右クリック検知**について色々と試行錯誤したので、その結果をまとめようと思います。
# 方法
まず、右クリック検知の多くに使われているのが**ニンジン付きの棒を利用した方法**です。
この方法が一番簡単で扱いやすいのでよく使われています。
```
# 先に実行しておいてね
scoreboard objectives add hoge minecraft.used:minecraft.carrot_on_a_stick
```

``` tick.mcfunction
# 人参棒の使用を検知
execute as @a[scores={hoge=1..}] at @s run summon tnt ~ ~ ~

# スコアリセット
scoreboard players set @a[scores={hoge=1..}] hoge 0
```
こんな感じですね。`summon tnt ~ ~ ~`の部分は好きに変えてください。
見たとおり、これだけでできるのでとても簡単です。
ガバガバですが、長押しも一応検知出来なくもないです。
他にも、特定の場所への右クリックと左クリックを検知する方法にinteractionエンティティを利用した方法や村人を利用した方法がありますが、ここでは省きます。

次は長押し検知の方法を紹介します。
主に使われていたのは、弓を使った方法です。
``` using_bow.json
{
  "criteria": {
    "use_bow": {
      "trigger": "minecraft:using_item",
      "conditions": {
        "player": {
          "slots": {
            "weapon.mainhand": {
              "items": "minecraft:bow",
              "components": {
                "minecraft:custom_data": {
                  "custom_item": 1
                }
              }
            }
          }
        }
      }
    }
  },
  "rewards": {
    "function": "hoge:main"
  }
}
```
このファイルは、`custom_data`コンポーネントの`custom_item=1`の弓を使用中、関数`hoge:main`が実行される進捗です。`hoge:main`には、この進捗を削除するコマンドを書いてください。これで、長押しすると毎tick実行されるようになります。
そして、押し終わりも検知したいですね。
```
scoreboard objectives add use_bow minecraft.used:minecraft.bow
```
これで押し終わるとこのスコアボードに1が足されます。これを利用して、長押しと押し終わりを検知できるのです。
しかし、この方法には
・弓なのでインベントリに矢が必要
・音と矢が消えるまでに一瞬かかる
という問題点があります。

ですが、上記の問題点を解決できる方法があります。
それが、**consumeableを利用する方法**です。
`consumeable`とは、食べ物やポーションに記述されているコンポーネントです。
食べるのにかかる時間をすっごく長くして、食べるアニメーションと食べる時の音とパーティクルも消せば、長押しを検知できるアイテムの完成です。
これを進捗で検知しましょう。
``` using_item
{
  "criteria": {
    "a": {
      "trigger": "minecraft:using_item",
      "conditions": {
        "player": {
          "slots": {
            "weapon.mainhand": {
              "components": {
                "minecraft:custom_data": {
                  "custom_item": 1
                }
              }
            }
          }
        }
      }
    }
  },
  "rewards": {
    "function": "hoge:main"
  }
}
```
さっきと同様、`hoge:main`でこの進捗を消すコマンドを書いておいてください。
これで右クリックをしている間実行される関数の完成です。
押し終わりは実行が途切れたことなどで検知してください。私の使用している例を挙げておきます。
``` main.mcfunction
# 進捗消去
advancement revoke @s only sorcery:using_wand

# スタート
tag @s add Click.Check
tag @s add Click.Right
```
``` tick.mcfunction
# 押し終わるとClick.Checkが消えるので検知が可能
execute as @a at @s if entity @s[tag=Click.Right,tag=!Click.Check] run summon tnt ~ ~ ~
execute as @a at @s if entity @s[tag=Click.Right,tag=!Click.Check] run scoreboard players set @s Click.Right 0

# 長押し中はスコア増加
execute as @a at @s if entity @s[tag=H.Click.Check] run scoreboard players add @s Click.Right 1

# タグ消去
tag @s remove Click.Check
```
こんな感じですね。先ほどと同様、`summon tnt ~ ~ ~`の部分は好きなコマンドに変えてもらって大丈夫です。

# おわりに
いかがでしたか？
`consumeable`は死ぬほど万能なので、是非使ってください！
あと、この記事に乗っているコマンドもすべて好きに使ってください。
皆さんのコマンド制作の参考になれば幸いです。
それでは！
GitLabの活用について

# はじめに

オンプレミスの資産管理の方法として、GitLabなど利用している企業の方も多いのではないでしょうか? 今回はGitLabの活用方法についていくつかご紹介したいと思います。

# 資產管理

一番スタンダードな使い方です。
ソースコードの管理の他、設計書などの管理も行うとよろしいと思います。
そうすることで、「このリビジョンではこうゆう設計である。」などが明確になるため、 バグを検出した際に、どのリビジョンから発生したのか?設計バグなのか?いつその設計バグが盛り込まれたのか などが明確になります。
なお、ドキュメント類に関してはどの形式で作成していくか?というのは好みがあります。

* 差分を見ることが多い場合
マークダウンなどテキストファイルでの作成をお勧めします。
ただし、表や図などを入れ込む際、外部ツールで作成したものを埋め込んだりというのをやることが多く、 表現の幅にも若干疑があります。

* 差分を見ることはほとんどなく、図・表をきれいに作りたい場合
Officeのファイルをそのまま資産管理に入れてしまうことをお勧めします。 なんだかんだでいろいろと表現しやすい点が魅力です。

# デプロイ (構成)

例えばサーバーに入っているディレクトリ構成などを他に移行したいときにお勧めです。
もちろん仮想化した基盤であれば他にもやりようがありますが、アプリケーション領域の構成を作るのは 管理部署が異なるなどであれば活用するケースはあると思います。
同じ構成をpullするだけで作れますし、他にもセカンダリのサーバーに変更を適用したい場合などにも
コマンドーつで適用できますので構築・変更時の作業漏れ・ミスを軽減することにもつながります。

# CICD

登録された資産がビルドを通るか検査することができます。
これにより、いざリリース時にビルドが通らないのだが・・・といったことを防ぐことができますし、ワーニングなど開発担当が見過ごしているものなど検知することもできます。
静的解析などを自動で通すこともできますので、マージ時に静的解析を通して・・・などの作業も不要となります。

他、自動テストのコマンドを実行することもできますので、デグレードの検出などにも有効です。
一方、上記についてはサーバーの環境(各種ミドルウェアなどのバージョン)と揃える必要があります。 
その為、GitLabサーバーが実行環境のサーバーと同居であれば良いのですが(サーバーのリソースを共有するためお勧めしませんが)、ほとんどの場合、複数のプロジェクトの構成管理をすると思いますので、実行自体は検証環境上で行うなどした方が無難ではないかなと思います。

# ソースコードレビューの強制化

masterはレビューアのみ適用可能で、マージする際にレビューアがレビューするというルールにて運用する ことでレビューを強制化できます。
もちろんレビューアが手を抜くと台無しですが、知らない変更が勝手に組み込まれているというのは防ぐ ことができます。

# アジャイル開発での活用

issue及びマイルストーンを使用することで、1スプリントごとにやることとその進捗管理をすることができます。 
筆者はあまり使ったことはありませんが、アジャイル開発のPMをする際にはぜひ使いたい機能であると 考えています。

# 終わりに

まだまだ使いこなせていない機能はたくさんありますが、構成管理に困っている、CICDを実現したい、 アジャイル開発の管理ツールが欲しいなど検討中の方には多少ご参考になるのではないでしょうか? わたしはwincvs、svnと使ってきて、gitを使う際に若干戸惑いがありましたが、1年ほど使用すると慣れてくると思います。
Suspenseとuse()とErrorBoundaryを使ったコードサンプル

## コード例

```react:SuspenseSample.tsx
"use client";

import { FC, Suspense, use } from "react";
import { ErrorBoundary } from "../ErrorBoundary"

async function fetchWillError() {
  throw new Error
};

const ErrorFC:FC<{errorPromise:Promise<any>}> = ({errorPromise}) => {
  const data = use(errorPromise);
  return (
    <div>{JSON.stringify(data)}</div>
  )
};
const FallbackFC:FC = () => {
  return(
    <div>Loading...</div>
  )
};

export const PromiseErrorClient = () => {
  const errorPromise = fetchWillError();
  return (
    <>
      <ErrorBoundary>
        <Suspense fallback={<FallbackFC />}>
          <ErrorFC {...{errorPromise}}></ErrorFC>
        </Suspense>
      </ErrorBoundary>
    </>
  )
};

export default PromiseErrorClient
```

親コンポーネントで変数にPromiseを入れて、Suspenseの子コンポーネントに`use`APIで値を遅延読み込み。Promiseの失敗はErrorBoundaryコンポーネントで吸収する。
このコード例だと即時エラーをthrowしているが、ErrorBoundaryでwrapするだけでクラッシュを避けられる。

```react:ErrorBoundary.tsx
import { Component, ReactNode } from 'react';

// Error Boudary Sample
export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean; error: any }> {
  constructor(props: { children: ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: any) {
    return { hasError: true, error };
  }

  componentDidCatch(error: any, errorInfo: any) {
    console.error("Error caught in ErrorBoundary:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div style={{ color: "red" }}>Error: {String(this.state.error.message || this.state.error)}</div>;
    }
    return this.props.children;
  }
};
```

## :x:Bad Pattern
```react:bad_pattern.tsx
/** bad pattern */
const ErrorFC:FC<{errorPromise:Promise<any>}> = ({errorPromise}) => {
  try {
    const data = use(errorPromise);
    return <div>{JSON.stringify(data)}</div>
  } catch(err) {  
      return <div>Error!</div>
  }
};
```
`use`をtry/catchで囲うなというエラーが出ます。
PostgreSQLのデータバックアップとリストア方法

# はじめに

Postgresqlにはいくつかバックアップ・リストアの方法があります。
それぞれの種類に応じてどのような時にどのような方法を用いればよいかまとめました。
具体的な手順については各種記事が出ておりますので、ここでは触れませんが要件に応じて何を選択すれば 良いか?という指針の立て方がわからないという方向けになります。

# 定期的なバックアップおよび復元 (論理バックアップ)

要件として、復元地点が例えば日単位などある程度目標値が高くない場合については pg_dumpを定期的に実行します。
バックアップの形式にもいくつかありますが大きくは平文とカスタム形式の2種類でしょう。 ほとんどの場合、カスタム形式でバックアップした方が圧縮されますし復元も早いのでお勧めします。
あえて平文を選択する意図としては、可読性に優れている点、必要な部分が限定されている場合抜き出しやすい点 差分検出がしやすい点でしょう。

定期的な取得はcronを使用するか、Jenkinsなどのツールを使うのも良いでしょう。
https://www.postgresql.jp/document/16/html/app-pgdump.html
https://www.postgresql.jp/document/16/html/app-pgrestore.html

# PITRを使ったバックアップおよび復元 (オンライン物理バックアップ)

要件として特定の地点、主に障害発生直前までや、ある操作の直前まで復元する必要がある場合は PITRを選択します。
起点となるバックアップを取得して、復旧する地点までのWALファイルを適用させるという方式です。
設定がいくつか必要ですし、postgresqlのファイル構成を多少知らないといけませんので論理バックアップ よりは少し難しい面があります。
どの程度のトランザクションがあるかにもよりますが、定期的にpg basebackupとWALの退避を行うとよいでしょう。

具体的な方法については公式記事やポータルサイトなどを参照ください。
https://www.postgresql.jp/document/16/html/continuous-archiving.html
https://lets.postgresql.jp/documents/technical/backup/4

# ファイルコピーによるバックアップ(オフライン物理バックアップ)

postgresqlは究極的にはただのファイルですので、対象を全てコピーしてしまうという手段もとることができます。 
具体的にはDBを停止してpostgresqlのディレクトリをtarなどで固め、復元場所に展開した後起動するという内容となります。
通常の運用ではあまり使用するケースは考えられませんが、定期的なバックアップを取得し災害時に復旧を図るためであったり、テスト環境へのコピーを作成する場合であったりの場合に使用します。

# レプリケーションを用いたバックアップ(その他)

レプリケーションを用いてバックアップの用途を果たすという方法もあります。
マスタ側で障害が発生した場合、スレーブ側に切り替えて運用を行うようなことを想定する場合です。 一方で基盤側に自動でマイグレーションするような仕組みがあれば同等のことを行うことは可能と考えます。

# 終わりに

今回はバックアップ・リカバリについてご紹介いたしました。
いくつかバックアップの種類はありますが、用途に応じて使い分ける必要があります。 DB単位での備えも必要ですが、基盤側で補えるようなエラーケースも存在するため、
使用する環境に応じて必要な処置を検討する必要があるでしょう。
どれか一つを選択するというよりは、以下の障害に対して要件やコストに応じて必要な設定・対処を行う必要があるというところとなります。

1. ハードウェア故障
2. データの損失や破損
3. ソフトウェアバグやエラー
4. 人為的ミス
5. セキュリティ侵害
続 ため息が出るDB設計書


# はじめに

昨年 [ため息が出るDB設計書](https://qiita.com/jun2/items/f4be237fed04c88dc1f5) の記事を作りましたが、その続編です。

# 概念設計がない、足りない

一般的な話と企業で最適化したアウトプットというものはあるとは思いますが、 「概念設計として少なくともER図くらいは書かなければいけないものではないでしょうか。
ER図はテーブル間の関連をつかむのに非常に適切であり、システムの全体像をつかむのにも役立ちます。
また、多対多の関係になっているなどのアンチパターンも検出・解消できるため概念設計の段階では 非常に有用なアウトプットであると考えます。

# 列名を頑張って英訳しすぎる

論理名を定めるとすべて英訳したくなるものではありますが、全てを英訳して長くなりすぎるパターンです。 例えば、
　購入履歴詳細→detailed_purchase_history
ですが、テーブルの構成にもよりますが、 detailed hisutoryでも十分伝わる場合が多いと思います。
正確に書きたくなる気持ちはわかりますが、最短で伝わる言葉を選択することが重要かなと思います。

# 権限設定が適切ではない

アプリケーションから不要に強い権限のロール、ユーザーを使って操作しているなど。
あまりに強い権限は、DBのドロップができてしまったり、負荷のかかるコマンドを発行できたり、バグの温床以外にもセキュリティ的な観点で非常に危ういものとなります。 
サニタライズに全てセキュアな面を持たせるよりもDB層でも適切な設定を行うことで強固なものになります。

# 同じようなテーブルが沢山ある

手続き毎にテーブルを作ってしまっている場合です。
確かに手続き毎に静的に残す必要があれば納得なのですが、手続き毎の画面をそのままテーブル化してしまうとこのようなパターンになります。
データ中心アプローチを行うことでこのようなことは回避されます。

# 終わりに

もっとDBのこと勉強しようよ! ということに尽きるでしょう。
わたしもまだまだ未熟ものですが、今の自分をイケてなかったなと思えるように精進したいものです。
【Suno AIでつくった楽曲】声でつながるAIとの対談: 挿入曲 #6【動画 3分19秒】【YouTubeチャンネルからの転記です】

この記事は、わたしの[YouTubeチャンネル](https://bit.ly/Yamanaka-YouTube "Living without things. 持たない生き方 手放す生き方")にある公開動画を転記しております。
( どこかのタイミングで、プログラミング-Google Apps Script or iPaaS-Zapier をつかって自動転記させる予定です )

転記のための時間コストを少なくしたいので、文字装飾( Markdown記法 )を極力つかわずに書いております。

こちらが動画内容です👇

***

![01 YouTube再生中の画像 Suno AI _ 声でつながるAIとの対談_ 挿入曲 #6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386308/9647699d-a8cf-1460-f624-e3dbc3849b16.png)




* # 動画URL
    * https://youtu.be/t56I0Z05HI0

<br>

* # 動画タイトル
    * 【Suno AIでつくった楽曲】声でつながるAIとの対談: 挿入曲 #6【動画 3分19秒】

<br>

* # 動画の説明欄(一部を抜粋)

📅撮影日 = 2024-12-02(月)

Suno AIとは、文章から音楽を生成することができるAI( Text-to-Music-AI )です。
わたしは、2024-04-02(火)に初めてSuno AIで有償プランを契約してから、時々楽曲をつくって遊んでいます。

🎦【Suno AI】文章から音楽を生成するAI( Text-to-Music-AI )で、3分間で2曲、6分間で4曲作りました【試聴可能】1)伴侶の曲 2)税理士の曲【動画 16分11秒】
https://youtu.be/QKfhk4HgQ_g

🎦“Suno AIでつくった楽曲”シリーズ
https://www.youtube.com/playlist?list=PLpQhBHT4oghMLdiSVqwvSs_Z5y0H4VGOe

🎦“効果的にSuno AIを活用するヒント”シリーズ
https://www.youtube.com/playlist?list=PLpQhBHT4oghPuaNOVZn-N53wVvsBkeHdI


今回は、Suno AIでつくった曲を WAV で出力してから、動画編集いたしました。

“声でつながるAIとの対談”シリーズ
https://www.youtube.com/playlist?list=PLpQhBHT4oghOpTHU0rmfXSgjqV1_j6Eao
👆の挿入曲としてつかう予定です。

ぜひ聴いてみてください。
そして、ぜひみなさんも、ご自身の対談、番組、コンテンツのために楽曲をつくってみてください！

作曲日:
2024-11-25(月)

Suno AI 契約の種類:
Pro Plan

Suno AI Version:
v4

楽曲の正式名称:
声でつながるAIとの対談: 挿入曲 #6 - AI Voice Talks: Minimal Melody #6

Suno AI Library URL:
https://bit.ly/AI-Voice-Talks-Minimal-Melody-06

Custom Mode: On

Audio Inputs: Not Used

Instrumental:


---


Suno AIへの指示文章( プロンプト/Prompt ): Custom Modeの場合は”Style of Music”を指定します。


🇬🇧English

Hip hop[Jazz][Piano][Ballad][220 Seconds][Break][Outro]


🇯🇵日本語訳

[ヒップホップ][ジャズ][ピアノ][バラード][220秒][ブレイク][アウトロ]


---


Suno AI 公式URL
https://accounts.suno.ai


---


✓ 🎥この動画と関連が強いわたしの動画 ↙
　・“Suno AIでつくった楽曲”シリーズ
　https://www.youtube.com/playlist?list=PLpQhBHT4oghMLdiSVqwvSs_Z5y0H4VGOe


　・“効果的にSuno AIを活用するヒント”シリーズ
　https://www.youtube.com/playlist?list=PLpQhBHT4oghPuaNOVZn-N53wVvsBkeHdI


　・“声でつながるAIとの対談”シリーズ
　https://www.youtube.com/playlist?list=PLpQhBHT4oghOpTHU0rmfXSgjqV1_j6Eao


✓ 🎥Shortened URL for this video | この動画の短縮URL ↙
　https://bit.ly/49j00mR
レガシーシステムのリプレイス戦略

# はじめに

前回レガシーシステムの解決法として、あえて書き換えにほとんど触れずに記事を作りましたが、 今回は書き換えをやっていくぞ!という記事を書きたいと思います。
IT企業の現場の方であれば本来はこちらをやりたいのではないでしょうか? どうやってリプレイスまでもっていくか、何にリプレイスするか?など記載したいと思います。

# 古いからリプレイスしたいです!→なぜ?

[前](https://qiita.com/jun2/items/253226bbe2188ee290ce)にも似たようなことを書きましたが「古いから」「わからないから」は「御社の都合でしょ?」 となりますよね。

それでも強行することはできるとは思うのですが、継続してもらえるかは別問題となってしまいます。 相手にそれなら・・・となってもらうためには相手へのメリットが必要でしょう。

例えば
* 今後端末を変えても導入の手間・費用がかかりません
* 操作の手順が少なくなり業務効率化になります 
* ランニングコストが下がるため、XX年後を比較すると安くなります 

など、何かしらの提示がなければ同意してもらえないものです。

# なにでリプレイス開発すればよいか?

ほとんどの場合、COBOLやVBAでの開発が行われたシステムに課題を持っている方が多いと考えています。
その上でリプレイスするのであれば基本的にフレームワークでの開発を行うこととして、

①ローコード・ノーコードフレームワークを使用する。
②C#.Netなど企業が提供しているフレームワークを使用する。
③OSSのフレームワークを使用する。
それぞれ課題があり、自社にマッチした方針をとる必要があります。

①ローコード・ノーコードフレームワークを使用する。
基本的に開発者の確保がしやすい。
ライセンスなどの費用が発生する。 これまでできていたことを完全再現できるとは限らない。

②.Netなど企業が提供しているフレームワークを使用する。
開発ツールとしてVisual studio、その他Activereportなどのツールも使用でき多種要件に対応できる。
それに伴いライセンスなどの費用が発生する。
C#の開発者は比較的多い方である。

③OSSのフレームワークを使用する。
費用が安い反面、プログラムに対する深い知識を要するため学習コストがかかる。
Webアプリケーションなどであれば開発経験者は多く、昨今では多くの企業でフレームワーク開発 が多いことから、技術者の確保はしやすいものと思われる(ただし地域差がある)

まとめると

①ローコード・ノーコードフレームワークを使用する。
比較的業務ロジックを含まないアプリで、自社に技術者が少ない・いない場合。 イニシャルコストが発生が、将来的な人員確保の容易性の観点としては有利。 どちらかというと新規開発のスピードにメリットを感じる。

②.Netなど企業が提供しているフレームワークを使用する。
やや規模の大きいアプリで、.Net経験者が社に既にいる場合。
こちらも、リプレイスというよりは多数のプロジェクトで活用していく前提であれば コストメリットを感じるが、基本的には安くなる提示は難しそうであるため、①と同様コスト以外に メリットを訴えていく必要がありそうである。

③OSSのフレームワークを使用する。
現在ライセンス費用が発生しているような状況であればコストメリットを提示できる。
所属している技術者に経験がない場合、特に初動では開発期間が必要となる。
レポートやスプレッドといった機能を実現するツールには乏しい面があるため、開発期間が必要。

# アプリケーションの形態はどのようにするか?

要件次第にはなりますが、例えばクロスプラットフォームで動作させたいかつスプレッドやレポートのような機能を有さないのであれば Webアプリケーションでしょう。
操作が複雑であるため、PCでの操作が必須であればその通りデスクトップアプリケーションにする必要があり ます。
何を申し上げたいかというと、書き換えができるからと言ってモバイルが一番いいのだ、Webアプリケーション が一番良いのだ!ではなくて、利用者はどれであれば一番使いやすいか?と重視すべきと考えます。
とは言え、体制面も踏まえ現在持ちうる武器と与えてもらえる武器が限定されてしまうのは中小企業では宿命でしょう。

# まとめ

レガシーシステムのリプレイスは、技術的な選択肢だけでなく、コスト、保守性、ユーザー体験など多角的な視点で検討する必要があります。
それぞれのアプローチには利点と欠点がありますので、自社のニーズに最適なソリューションを選ぶことが重要だと思います。
【PDF-LIB】生成したPDFのファイルサイズが大きすぎる!?【サブセット化】

# はじめに
PDF内の文章をアプリで入力し、生成できる系アプリのお話。

ユーザーが沢山PDFを生成できる条件であればよりコストを抑えるためにファイルサイズを落としてデータ転送量やストレージ使用量を抑えたいですよね・・・

PDFのファイルサイズはただ圧縮するだけが方法ではないことに気づいたので記事にしました。

## PDFで何をしたかったか
・日本語を表示するPDFの新規作成したい

## 実装してみると
ライブラリを使用して日本語の書き込みをしたPDFを生成するだけの簡単なお仕事に見えますが、ちょっとした落とし穴があります。

今回はPDF-LIBを使用していますが、デフォルトで日本語がサポートされておらず日本語が正しく書き込みされません。

そのため、自分でフォントを用意してPDFに埋め込みをする必要性があります。

◻︎日本語フォントを埋め込みした場合の実装は以下の通り
```js
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
import fs from 'fs'; // Node.js環境用（ブラウザではfetchを使用）

async function createPDF() {
  // 新しいPDFドキュメントを作成
  const pdfDoc = await PDFDocument.create();

  // ページを追加
  const page = pdfDoc.addPage([600, 400]);

  // カスタムフォントを埋め込む（例: Noto Sans JP）
  const fontBytes = fs.readFileSync('NotoSansJP-Regular.otf'); // フォントファイルを読み込む
  const customFont = await pdfDoc.embedFont(fontBytes);
  // 書き込み
  page.drawText('こんにちは', {
    x: 50,
    y: 300,
    size: 20,
    font: customFont,
    color: rgb(0, 0.5, 0),
  });

  // PDFを保存
  const pdfBytes = await pdfDoc.save();
  fs.writeFileSync('output.pdf', pdfBytes);
}

createPDF().then(() => console.log('PDF Created!')).catch(console.error);
```

フォントを埋め込む一手間があったとはいえ簡単ですね！

## ここで問題が発生
「こんなシンプルなPDFなのにファイルサイズが大きすぎる...！？』

こんなことが発生しました。（10MBくらい）

私が最初にこの問題へ遭遇したときは、ベースとなるPDFが別にありそれに大量に文字の書き込みや画像の埋め込みをしていたため、ベースのPDFのファイルサイズを小さくしたり、圧縮を検討したりなどして苦戦しておりました（ライブラリさん、あんたが悪いんか…? とか）

## 結局何が悪かったか
先に示したコードから分かる通り、PDFに対して埋め込んでいるのは「こんにちは」の文字と```フォント```です。

フォントは必要不可欠なものですが、フォントのサイズがしっかりとPDFのファイルサイズに直結しております。

過去に多言語対応したフォント（18MBくらい）を使用した際は、PDFのファイルサイズもそれに近いものとなりました。

## サブセット化による解決
今回この問題を解決するためにサブセット化（フォントの軽量化）をしていきます。

つまりは、使用することが期待されない文字もフォントに含まれているのでそれを削ぎ落としてフォントのファイルサイズを減らすということです。

サブセット化を行うために、[サブセットフォントメーカー](https://opentype.jp/subsetfontmk.htm)といったツールがあり、フォントファイルと残しておきたい文字をインプットとして与えると、その文字だけの軽量化されたフォントが生成されます。

ここで気をつける必要性があるのは、使用が期待される文字をしっかり予測しておかないと文字化けが起きてしましますので、気をつけて行いましょう。

私の場合はベトナム人やネパール人の使用ケースに対応させる必要性があり、言語の理解をするイベントが発生。
※『नमस्ते』 何これ、難しい・・・

漢字も数は膨大でどこまで対応させるかを検討する必要性があり地味に大変なお仕事です。

フォントの世界で日本語など漢字を扱う言語は大変だろうなと実感しました。

## 最後に
今回、なかなか気づけなかった原因として日本語を書き込むためにフォントは当然必要なもので思考が止まっていたこと、PDF書き込みの機能を作り上げた後で「サイズ大きい！？」となってしまったため問題点に気づくのが遅くなりました。

ファイルサイズはコスト面やユーザー体験的にも致命傷になりかねないので、アンテナを常に張りながら開発をしていきたいと思ったといった記事でした。
パスワードの表示・非表示を切り替える

## はじめに
パスワードの表示・非表示を切り替えるには、パスワード入力欄のinput type属性を動的に変更することで実現します
今回は既存のサイトにあるパスワード入力欄をhtml構造を変更せずにjavascriptだけでパスワードの表示・非表示を切り替えるためのjavascriptを説明します

## 完成イメージ
![chrome-capture-2024-12-6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4450/0b01fd21-eee7-7293-0f88-9e7c9576c919.gif)


以下のサンプルサイトで実際に動作を確認できます

https://luckofwise.github.io/password-visibility.github.io/

## 全体のコード
コード全体は以下を参照してください

https://github.com/LuckOfWise/password-visibility.github.io/blob/main/application.js

## コードの説明

### パスワードの表示・非表示切り替えの仕組み
パスワード入力欄のinput type属性を動的に変更することでパスワードの表示・非表示切り替え。具体的には、「password」と「text」の間で切り替えを行うことで、パスワードの表示・非表示を制御しています。
```javascript
function togglePasswordVisibility(input, passwordVisibleIcon, passwordHiddenIcon) {
  if (input.type === 'password') {
    input.type = 'text';
    // アイコンの表示を切り替え
  } else {
    input.type = 'password';
    // アイコンの表示を切り替え
  }
}
```

### やっていることの概要
- パスワード入力フィールドの自動検出
- 表示・非表示を切り替えるボタンの動的追加
- パスワードの表示状態の切り替え
- スタイルの動的適用

### コードの構造
定数の定義
```javascript
const PASSWORD_TOGGLE_CLASSES = { ... };
const SVG_PATHS = { ... };
```
これらの定数は、CSSクラス名やSVGパスを定義しており、コード全体で一貫して使用されます。
ここで定義したクラス名が既存のコードと競合する場合は変更してください。

ラッパー要素の作成
```javascript
function createWrapper(input, originalDisplay) {
  const wrapper = document.createElement('div');
  wrapper.className = PASSWORD_TOGGLE_CLASSES.wrapper;
  wrapper.style.display = originalDisplay;
  wrapper.style.width = window.getComputedStyle(input).width;
  wrapper.style.height = window.getComputedStyle(input).height;
  return wrapper;
}
```

この関数は、パスワード入力フィールドを包む新しいdiv要素を作成します。これにより、切り替えボタンを適切に配置できます。
また、元々のフィールドのサイズを維持するためにdiv要素のサイズを指定しています。

切り替えボタンの作成
```javascript
function createToggleButton() { ... }
```

パスワードの表示・非表示を切り替えるボタンを作成します。SVGアイコンを使用して、現在の状態を視覚的に表現します。

パスワードの表示・非表示の切り替え
```javascript
function togglePasswordVisibility(input, passwordVisibleIcon, passwordHiddenIcon) { ... }
```

この関数が、パスワードフィールドのtype属性を「password」と「text」の間で切り替え、アイコンの表示も適切に変更します。

パスワードの表示・非表示の切替ボタンの追加
```javascript
function setupPasswordToggle(input) {
  const originalDisplay = window.getComputedStyle(input).display;
  const wrapper = createWrapper(input, originalDisplay);
  input.parentNode.insertBefore(wrapper, input);
  input.style.paddingRight = '40px';
  input.style.width = wrapper.style.width;
  wrapper.appendChild(input);
  ...
}
```

各パスワード入力フィールドに対して、ラッパー要素とトグルボタンを追加し、イベントリスナーを設定します。
トグルボタンと入力した値が被らないようにパスワード入力フィールドに対してpaddingを指定していますが、この指定を行うことで元の要素と幅が変わってしまうためstyleで定義せずにここで指定し、wrapperに指定した元の幅を指定しています。

スタイルの追加
```javascript
function addStyles() { ... }
```

必要なCSSスタイルを動的に追加し、レイアウトとデザインを整えます。

初期化
```javascript
document.addEventListener('DOMContentLoaded', () => { ... });
```

DOMの読み込みが完了したら、すべてのパスワード入力フィールドを検出し、パスワードの表示・非表示の切替ボタンを追加します。


## まとめ
今回は、htmlやスタイルシートを変更することなく、javascriptファイルを追加するだけで、サイト全体のパスワード入力項目に表示・非表示を切り替えるボタンを追加する方法を紹介しました。
ある程度、既存のスタイルを変えないようにしていますが、実際に利用する際はしっかりと動作確認をするようにしてください。
【AWS】HTTP API vs REST API ECS FargateとAPI Gatewayの統合をする上での比較

## 前提

プライベートサブネット内にECS Fargateでアプリケーションがホスティングされており、その前段にALB (Internal)が配置されている構成があるとします。

![alb_fargate.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/94f784fa-c3d5-2a62-04ec-04a8ee0d843c.png)

普段はALBを通してVPC内のサービスからECSのアプリケーションへ疎通するようにしていますが、VPC外のリソースからアプリケーションに通信したいケースが出てきました。
その際、ALBの前段にAPI Gatewayを構築することにしたのですが、HTTP APIとREST API、どちらを採用するか、今回比較した上で検討してみたいと思います！

## ECS Fargateとの統合

API Gatewayの統合機能を用いてECS Fargateと接続する場合、間にVPCリンクを挟む必要があります。
REST API, HTTP APIではVPCリンクの仕様が異なるため、Fargateと接続する際の構成も異なります。


### HTTP API
HTTP APIで提供されるプライベート統合では、VPCリンク経由でALBに接続可能。

![httpapi_fargate.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/410e5a2b-694b-b02e-be64-043be0de05fe.png)


### REST API
REST APIにおいては、VPCリンクのターゲットとしてサポートされているのがNLBのみのため、VPCリンク -> NLB -> ALB(Internal) -> ECS といった構成となり、ALBの前段にNLBを挟む構成になります。

![restapi_fargate.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689205/0310e6cc-f07a-1d2f-2736-507f72cc2195.png)


## セキュリティ周り

### WAF / WebACL


HTTP APIではWeb ACLをアタッチすることができない(2024/12現在)


:::note info
HTTP APIを採用した上でWAFを利用したい場合は、前段にCloudFrontを置く構成にして、CloudFrontにWeb ACLをアタッチすると良いでしょう。
:::

#### 参考

https://repost.aws/ja/knowledge-center/api-gateway-cloudfront-distribution

### Authorizer / Resource Policy

REST APIと同様, Cognito, IAM, Lambda関数を用いたAuthorizerの設定ができる。

**しかしリソースポリシーは利用不可**

例えばIP制限を行いたい場合、リソースポリシーの代わりに以下の手段を用いると良いでしょう。
- 前段にCloudFrontを置く構成にして、WAFによるアクセス制限を行う
- Lambda関数によるAuthorizerで送信元IPによるアクセス制御を行う

### 相互TLS認証

> mTLSとはMutual Transport Layer Security (相互トランスポート層セキュリティ)の略称で、さらに、略して「相互TLS認証」と言います。クライアントとサーバーの両方が互いに証明書を利用して認証することで、セキュアに認証できる方式のことを指します。
> 

REST API, HTTP APIともに相互TLS認証が利用可能です。

## コスト面

東京リージョンでの料金

### HTTP API
| リクエスト数(月間) | 料金 |
| --- | --- |
| 最初の 3 億 | USD 1.29 |
| 3 億以上 | USD 1.18 |

### REST API

| リクエスト数(月間) | 料金 |
| --- | --- |
| 最初の 3 億 3,300 万 | USD 4.25 |
| 次の 6 億 6,700 万 | USD 3.53 |
| 次の 190 億 | USD 3.00 |
| 200 億以上 | USD 1.91 |

HTTP APIを用いる場合の方が基本的にコストが低い
また、VPC内のFargateと統合するという前提であれば、HTTP APIを採用すればNLBを配置するコストも削減できます。

### VPC Linkの料金

REST APIとHTTP APIではVPC Linkの仕様も異なり、RESTの場合はVPCエンドポイント(Interface), HTTPの場合はENIがVPCリンクの実態となっております。

VPCエンドポイントは1時間あたり0.014 USDの料金と、データ処理で1GBあたり0.01 USDが発生しますが、ENI自体には料金が発生しません。

そのため、VPCリンクに関してもHTTP APIの方が安くつくということになります。

:::note warn
HTTP APIのVPCリンクは60日間トラフィックがないとENIが削除される仕様となっているので、留意しておく必要があります。
:::

#### 参考

https://dev.classmethod.jp/articles/difference_between_rest_api_and_http_api_each_vpc_link/#http-api-%E3%81%AE-vpc-%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AF%E7%84%A1%E6%96%99


## まとめ
設定項目のシンプルさ・コスト効率の良さという観点ではHTTP APIを採用した方が良さそうに見えます。
また、HTTP APIのVPCリンクはREST APIと異なり、ALBもターゲットとして設定できるのでHTTP APIを採用することで余分にNLBを立てる必要もなくなるでしょう。

しかし、WAFのWeb ACLを直接アタッチできない, リソースポリシーによるアクセス制御に対応してないといった部分もあるので、要件によってはREST APIを選択した方が良い場合もあるでしょう。
GHAをKEDAで動かす

## 方法
Azure × GitHub Actions 環境では動かし方が大きく分けて3つあります。
1. GitHub Action Runner の利用
2. [VNET統合](https://docs.github.com/ja/enterprise-cloud@latest/admin/configuring-settings/configuring-private-networking-for-hosted-compute-products/about-azure-private-networking-for-github-hosted-runners-in-your-enterprise)の利用
これにより、RunnerがAzure Vnet上に用意されます。
3. [Container Apps Jobの利用](https://learn.microsoft.com/ja-jp/azure/container-apps/tutorial-ci-cd-runners-jobs?tabs=bash&pivots=container-apps-jobs-self-hosted-ci-cd-github-actions)

## 3を利用する際のメリット
- 2を利用する際ほど複雑な設定が不要
- [コンテナ](https://github.com/Azure-Samples/container-apps-ci-cd-runner-tutorial/tree/main)のためイメージをカスタム可能
- Azure上に実行環境を作れるため、Firewallを用意してランディングゾーンを構築することでアウトバウンドトラフィックもコントロールすることが可能
⇒セキュリティが厳しいところには向いているかもしれません。

## 参考
裏側の仕組みはKEDAなので、他のクラウド環境、オンプレでもKubernetesがあれば同じことが出来ると思われます。
https://keda.sh/docs/2.14/scalers/github-runner/
【MacOS 14.5】仮想環境内でJupyterNotebookを動かす方法

## 本記事で解説するること
Pythonを使った開発環境をMacで構築し、Jupyter NotebookやStreamlitなどのツールを仮想環境を利用して効率的に管理する方法を紹介します。本記事では、以下の内容について説明します：

1. MacでのPython環境セットアップ
2. 仮想環境の作成と活用方法
3. Jupyter Notebookのインストールと使い方
4. 仮想環境を使うメリット

## 1. MacでのPython環境セットアップ

### HomebrewでPythonをインストールする

Homebrewを使うと、Pythonの管理が簡単になります。

#### 手順:

1. **Homebrewをインストール**
   まだHomebrewをインストールしていない場合は、以下をターミナルに入力します：
   ```
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
   ```

2. **Pythonをインストール**
   ```
   brew install python
   ```

3. **Pythonのバージョン確認**
   ```
   python3 --version
   pip3 --version
   ```

## 2. 仮想環境の作成と活用方法

仮想環境は、プロジェクトごとに異なるライブラリや依存関係を分離できる便利な機能です。

### 仮想環境を作成する

1. **仮想環境を作成**
   ```
   python3 -m venv [好きなフォルダ名]
   ```

2. **仮想環境を有効化**
   ```
   source [好きなフォルダ名]/bin/activate
   ```

3. **pipのアップグレード**
   仮想環境内で以下を実行：
   ```
   pip install --upgrade pip
   ```

4. **仮想環境の終了**
   作業終了時は以下を実行して仮想環境を無効化します：
   ```
   deactivate
   ```

## 3. Jupyter Notebookのインストールと使い方

### Jupyter Notebookのインストール

仮想環境内（2.3実行後）で以下のコマンドを実行してインストールします。

```
pip install notebook
```

### Jupyter Notebookの起動

仮想環境を有効化した状態で以下を実行します。

```
jupyter notebook
```

ターミナルに表示されるURL（通常は`http://localhost:8888`）をブラウザで開くと、Jupyter Notebookが利用可能です。

### サンプルコードを実行

1. 新しいノートブックを作成します。
2. 以下のコードを入力してセルを実行します：
   ```python
   print("Hello, Jupyter Notebook!")
   ```

## 4. 仮想環境を使うメリット

### 仮想環境の利点

1. **依存関係の分離**
   プロジェクトごとに異なるPythonバージョンやライブラリを使用できます。

2. **簡単なリセット**
   仮想環境を削除すればクリーンな状態に戻せます。

3. **システム環境を汚さない**
   システム全体に影響を与えず、トラブルを回避できます。

### 仮想環境が特に有用なケース

* 複数のプロジェクトで異なるバージョンのライブラリを利用する場合。
* チーム開発時に、他の開発者と同じ環境を再現したい場合。

## まとめ

本記事では、MacでのPython開発環境の構築方法、仮想環境の作成と管理、Jupyter Notebookの使い方について詳しく説明しました。
エンジニアのキャリアについて整理

エンジニアのキャリアパスについてざっくり整理してみた🙋

## 前提

キャリアパスは、企業間が結ぶ契約形態(= フリーランスやSES、派遣等)とは別になります。当記事におけるキャリアパスとは、エンジニア個人に焦点を当てた際の、スキルの分岐点のようなものと私は考えます。
また、当記事においてはシステムの規模を、小規模=数百万規模のプロジェクト、中規模=数千万のプロジェクト、大規模=数億規模のプロジェクトと分類しています。

## 基本分類：駆け出し〜シニア

いくつかのサイトで見られる分類は、ITの世界に初参入した状態(1年未満) 〜 シニアレベル(5〜8年目)までの表現です。

- 駆け出しエンジニア(= ジュニアクラス)
- ミドルクラス(= メンバクラス?)
- シニアクラス

### ジュニアクラス

開発/テスト、運用/保守 ができる。プログラミングの基本文法を理解していて、設計書通りに実装が出来る。統合環境(IDE)、バージョン管理システム(Git,SVN等)、ビルドツール(CircleCI,Gradle,Ansible等)、プロジェクト管理ツール(Redmine,backlog等)、運用監視ツール(JP1,オペマネ等)の基本的な操作が出来る。QCD管理のうち、Delivery(=納期)を意識した報連相🥬が出来る。

### ミドルクラス

小〜大規模(=数百万〜数億規模)のプロジェクトにおいて、開発/テスト 〜 リリース 〜 運用/保守  まで一貫して進めることができる。コンテナ化・仮想化ツール(Docker,VMWare,VirtualBox等)を使って開発環境を一から構築して、それをマニュアル化できる。また、ある一つの機能やサブシステムについて、技術選定や顧客折衝が出来る。QCDを意識した仕事ができる。

### シニアクラス

小〜中規模(=数百〜数千万規模)のプロジェクトにて、ある機能またはサブシステムの上流(=要件定義) 〜 開発/テスト 〜 リリース 〜 運用/保守 まで、チームを率いて完遂できる。QCDに対する意思決定が出来る。ICT領域における横断的な技術(=セキュリティ,AI,ソフトウエア,データ,ネットワーク)をある程度網羅している。

## 分類①：シニア〜

シニアより上のキャリアパスは、シニアで培った基本的な技術力をベースに、自分が得意とする分野の専門性を高めていくような形となります。

極めて行く専門性は、様々な分類があるようですが、転職サイトとかでよく見る大きな分類法としては、『**スペシャリスト**(技術志向)』と『**マネージャー**(管理志向)』と『**ゼネラリスト**(技術志向と管理志向の中間)』です。

**◎マネージャー**

- プロジェクトリーダー
- プロジェクトマネージャー
- ディレクター

**◎スペシャリスト**

- プロダクトマネージャー
- アーキテクト
- ネットワークエンジニア

**◎ゼネラリスト**

- フルスタックエンジニア
- ITコンサルタント
- CTO、CIO

「エンジニア」という言葉が技術を想起させる事もあるので、「〇〇〇エンジニア」という言葉は、スペシャリストかゼネラリストに対して使われる言葉のようです。

あと、以下の分類法も時間があれば整理してみる👇

https://qiita.com/oko1977method/items/e26d9f791986f0d82757

## 気をつけてほしいこと

技術志向のエンジニアでも、人・物・金の管理が求められることを覚えておきましょう。というのも、これらの管理は、基本分類の「シニアクラス」で身につけるものだからです。超上流工程・上流工程は、顧客との要求の調整、システムの成長性や方向性、人員の確保、お金の管理、工数の計算等、マネジメントの基本的なスキルが求められます。

技術志向のエンジニアは、こういった大局的な視点をベースに、自身の専門分野の関係性を整理し、どう振る舞うべきか、何が最適なのかを考えていきます。

よく、「人と関わることが苦手だから、技術よりのキャリアに進みたい」というのを目にします。それは個人の考えなので、何を考えても自由だと思うのですが、マネジメントを避ける理由としては不適切だし、大局的な視点に欠けているとも感じます。そして、避けている事は、結構簡単に見破られたりします。
Kamal。― デプロイの仕組みについて ―

この記事は[ソニックガーデン 若手プログラマ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/sonicgarden-junior)の７日目の記事です。

---

# はじめに

2024年9月に[Rails World 2024](https://rubyonrails.org/world/2024)が開催されました。Railsの創始者であるDHHの[発表](https://www.youtube.com/watch?v=-cEn_83zRFw)で、Rails 8のベータ版が[リリース](https://rubyonrails.org/2024/9/27/rails-8-beta1-no-paas-required)されました！

このリリースにより、Railsの[The One Person Framework](https://world.hey.com/dhh/the-one-person-framework-711e6318) 化が格段に前進しました。SQLiteだけで、プライマリーデータベース、キャッシュ、キュー、リアルタイム通信の機能をカバーできるようになりました。[Kamal](https://kamal-deploy.org/) により、さまざまなところに簡単にデプロイできるようになりました。

Kamalを使って、RailsサーバーをVPSにデプロイしてみました。コマンドを叩くだけでサクッとデプロイでき、体感がとても良かったです。「Kamalを使えるようになったのはいいけど、どういう仕組みでデプロイしてるんだ？」と思ったので、本記事では、Kamalのデプロイの仕組みをまとめます。

# Kamalって何？

まず、Kamalとは何なのかを簡単にまとめます。

Kamalの[公式サイト](https://kamal-deploy.org/)を見てみると、以下のメッセージに目を引かれます。つまり、Kamal は、**「物理サーバーからクラウドの仮想マシンまで、どんなところにもWebアプリケーションをデプロイすること」を目的としたソフトウェア**ということです。

![スクリーンショット 2024-12-07 5.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3472392/5bb3816a-b180-10dd-61a6-e3a369c1bd6d.png)


さらに、公式サイトを読み進めていくと以下の文章があります。

> Kamal offers zero-downtime deploys, rolling restarts, asset bridging, remote builds, accessory service management, and everything else you need to deploy and manage your web app in production with Docker. Originally built for Rails apps, Kamal will work with any type of web app that can be containerized.

これを粗く要約すると **「Kamalは、Webアプリケーションの本番環境デプロイに関することでやりたいことを色々やってくれる」** ということです。

# Kamalのデプロイの仕組み

Kamalを使ってWebアプリケーションをデプロイする際は、基本的に`kamal setup`と`kamal deploy`のこれらコマンドしか使いません。

デプロイ先サーバーに対して、Kamalによるデプロイを初めてする場合、`kamal setup`を実行します。そうすると、サーバーにKamalを使ったデプロイが環境が作られます。そして、Webアプリケーションがサーバーにデプロイされます。


デプロイ先サーバーに対して、Kamalによるデプロイをしたことがある場合は、`kamal deploy`を実行すれば、サーバーにWebアプリケーションがデプロイされます。

## デプロイの戦略

デプロイの戦略は、「デプロイ先サーバー群に対するローリングリスタート戦略」と「ブルーグリーン・デプロイメント戦略」を組み合わせたものを採用しています。

新しい変更をサーバーごとにデプロイして、各サーバーが新しいバージョンのWebアプリケーションを古いバージョンと並行して実行します。トラフィックが安全に切り替わったら、古いバージョンのWebアプリケーションを停止します。


## `kamal deploy`実行時の処理の流れ

上記戦略を実現するために、`kamal deploy`実行時に以下の処理が行われます。

1. SSHにより、ローカルマシンとデプロイ先サーバーに接続
1. ローカルマシンとデプロイ先サーバーの両方で、Dockerレジストリにログイン
1. ローカルマシンで、Dockerイメージをビルドして、DockerレジストリにDockerイメージをプッシュ
1. デプロイ先サーバーで、DockerレジストリからDockerイメージをプル
1. デプロイ先サーバーで、[kamal-proxy](https://github.com/basecamp/kamal-proxy)が80番と443番のポートを受け付けているか確認
1. 新バージョンのWebアプリケーション用のDockerコンテナーを起動
1. 新コンテナーが `GET /up`へのリクエストに対して `200 OK`で応答することを確認する
1. 新コンテナーへのトラフィックがルーティングされるように、kamal-proxyに設定する
1. 古いバージョンのWebアプリケーションが実行しているコンテナーを停止


kamal-proxyは、Kamalに同梱されているHTTPプロキシです。これにより、HTTPリクエストを適切なコンテナーにルーティングしています。

kamal-proxyにより、古いバージョンのコンテナーから、新しいバージョンのコンテナーへのトラフィックルーティングを適切に行なっています。適切なルーティングにより、ダウンタイムがない安全なデプロイを実現しています。

# おわりに

本記事では、Kamalのデプロイの仕組みについてまとめました。デプロイの戦略は、「ローリングリスタート戦略」と「ブルーグリーン・デプロイメント戦略」の組み合わせたものを採用しています。その戦略をどのように実現しているのか具体的にまとめました。

この記事を読んで、Kamalを使ってみようと感じてもらえれば幸いです。

---

[ソニックガーデン 若手プログラマ Advent Calendar 2024](https://qiita.com/advent-calendar/2024/sonicgarden-junior)の８日目は[@Ito-Misaki](https://qiita.com/Ito-Misaki) です。お楽しみに！
New Relicって何者？調べてみた～ / What is New Relic? I looked it up~ (日本語 / 英語)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/c04e4538-477f-66a6-6404-e967e8d351fd.png)

# 日本語
こんばんわ！
Advent Calendar 2024に参加してまして、7日目の記事を書いていこうと思います。
題材は「New Relic 使ってみた情報をシェアしよう！ by New Relic Advent Calendar 2024」ということでNew Relicについて調べた情報を記事にしていこうと思います。本当は使った感想を書きたかったのですが、時間がなくご容赦ください。。

### New Relictとは
New Relic（ニューリリック）は、アプリケーションパフォーマンス管理（APM）と監視ツールを提供するサービスです。開発者や運用チームが、ソフトウェアやインフラストラクチャの状態をリアルタイムで監視し、パフォーマンスの問題を迅速に特定・解決するために利用されています。

### New Relictの主な機能

##### New Relicをアプリケーションパフォーマンス管理（APM）

アプリのレスポンス時間やエラー率を監視。
どのコードやクエリがボトルネックになっているかを可視化。

##### インフラ監視

サーバー、データベース、クラウドサービス（AWSやGoogle Cloudなど）の状態をモニタリング。CPU使用率、メモリ使用率、ディスク容量などを追跡。

##### リアルユーザー監視（RUM）

実際のユーザーがアプリやウェブサイトを使ったときのパフォーマンスを測定。地域やデバイスごとに違うユーザー体験を比較。

##### ログ管理とトラブルシューティング

エラーログやトラブル発生時の状況を一元的に管理。

### 活躍しような場面
私がこのサービスを調べて、死活チェックにすごく適しているなと思いました。色々なサービスを運用している企業等はいちいちサイトが問題ないか確認していると日が暮れてしまいます。そんな時にこのサービスを使用し、チャットサービスで連携すれば、サイトに問題が発生したときに対応しやすくなるなと感じます。

ここまで読んでいただきありがとうございます！

# ENGLISH

Good evening!
I'm participating in Advent Calendar 2024 and I'm going to write an article for the 7th day.
The subject is “Let's share information about New Relic! by New Relic Advent Calendar 2024”, so I'm going to write an article about the information I found out about New Relic. I really wanted to write about my impressions of using it, but I don't have time, so please forgive me.

### What is New Relict?
New Relic is a service that provides application performance management (APM) and monitoring tools. It is used by developers and operations teams to monitor software and infrastructure status in real time to quickly identify and resolve performance issues.

### New Relict Key Features

##### Application Performance Management (APM) with New Relic

Monitor application response times and error rates.
Visualize which code and queries are bottlenecks.

##### Infrastructure Monitoring

Monitor status of servers, databases, and cloud services (AWS, Google Cloud, etc.) Track CPU usage, memory usage, disk space, etc.

##### Real User Monitoring (RUM)

Measure performance of apps and websites when used by real users. Compare user experience across geographies and devices.

##### Log Management and Troubleshooting

Centrally manage error logs and troubleshooting situations.

### Situations where it could be useful.
When I researched this service, I thought it was very suitable for life-and-death checks. Companies that operate a variety of services will lose days if they have to check every single site for problems. If this service is used in such cases, and if it is linked with a chat service, I feel that it will be easier to respond when a problem occurs on the site.

Thank you for reading this far!
【準1級】統計学実践ワークブック　例題6.1（4） 条件付き期待値

統計検定準1級の勉強のための解説記事となります。下記にご了承いただける方のみ、お読みください。

:::note warn
##### 注意
* 著作権の都合により問題文は掲載せず解説のみの記述となります。
* 独自の解釈により、不適切な表現がある可能性があります。
:::

以下の動画でも解説していますので、見やすいほうでご覧ください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/hhPYzE1_ysY?si=jZXL9we9onNIgxsX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 問題のポイント


:::note
・期待値の性質：$E[aX+b|C] = aE[X|C] + b$　・・・①

・$P(A|B) = \frac{P(A \cap B)}{P(B)}$より、条件付き確率密度関数は、
```math
f(z \mid z \geq c) = 
\begin{cases} 
\frac{f(z)}{P(z \geq c)} & (z \geq c) \\
0 & (z < c)
\end{cases}　・・・②
```

・条件付き期待値：$E[X|Y \geq c] = \int_{-\infty}^{\infty} x f(x \mid Y \geq c) dx$　・・・③

:::
# 解法ノート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618291/4fa97010-9320-cc1c-4afa-5919ef3d56c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618291/918f9556-f0f8-b59e-a209-f530759f5ab7.png)


# 解答
#### 条件付き期待値と標準化
テストの得点を$X$とすると、条件より、$X$は平均65、標準偏差10の正規分布に従います。

よって、標準化した$Z$は、$Z = \frac{X - 65}{10}$と表されます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618291/5b6f4a07-3064-67e7-403c-f0284b906205.png)


ここで求めたい平均は、$E[X|X \geq 65]$と表記でき、$X=65+10Z$なので、
```math
E[X|X \geq 65] = E[ 65+10Z|　65+10Z \geq 65] = E[65+10Z|Z \geq 0]
```
です。ここで、式①から、
```math
E[X|X \geq 65] =65 + 10 \times E[Z | Z \geq 0]
```
となります。

#### 条件付き確率密度関数の導出
今回の問題の条件付き確率密度関数は、式②に$c=0$を代入して、

```math
f(z \mid z \geq 0) = 
\begin{cases} 
\frac{f(z)}{P(z \geq 0)} & (z \geq 0) \\
0 & (z < 0)
\end{cases}
```
と表されます。

$Z$は標準正規分布に従うため、$f(z) = \frac{1}{\sqrt{2\pi}} e^{-\frac{z^2}{2}}$です。

また、$z=0$が境界のとき、面積が半分ずつに分かれるため、$P(z \geq 0)= \int_{0}^{\infty} \frac{1}{\sqrt{2\pi}} e^{-\frac{x^2}{2}} dx = \frac{1}{2}$です。


よって、
```math
f(z \mid z \geq 0) = \frac{f(z)}{P(z \geq 0)}  =\frac{2}{\sqrt{2\pi}} e^{-\frac{z^2}{2}}
```

となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618291/95f72dc7-f0c8-292d-edb7-d0aa647bac39.png)


#### 求めたい平均の導出
ここで、式③から
```math
E[Z \mid Z \geq 0] = \int_{0}^{\infty} z × f(z \mid z \geq 0) dz= \sqrt{\frac{2}{\pi}} \int_{0}^{\infty} z e^{-\frac{z^2}{2}} dz
```
と表されます。

ここで、置換積分$t = \frac{z^2}{2}$を行うと、$\frac{dt}{dz} = z$ より、$dz = \frac{1}{z}dt$です。また、積分範囲は、$z = 0$ のとき $t = 0$、$z → ∞$ のとき $t → ∞$ となります。

よって、
```math
E[Z | Z ≥ 0] = \sqrt{\frac{2}{\pi}} \int_{0}^{\infty} e^{-t} dt =\sqrt{\frac{2}{\pi}}  \left[-e^{-t}\right]_{0}^{\infty} =\sqrt{\frac{2}{\pi}} \simeq 0.798
```

と求まるので、

```math
E[X|X \geq 65] = 65 + 10 \times E[Z|Z \geq 0]=72.98
```

が導かれます。


# 参考）高校数学
置換積分の公式は以下となります。
```math
\int f(g(x))g'(x)dx = \int f(u)du \quad (ただし、u = g(x))
```
育児中の方にオススメ！生成AIで今我が子にピッタリのコンテンツを作成する【「どうだった？」ゲーム】

## 育児×生成AI
この記事はこそぷろQiitaアドベントカレンダー2024の7日目の記事です🎄
生成AIを使って、育児をちょっぴり楽しくする、そんな記事が盛りだくさんなのでぜひご覧ください✨

https://qiita.com/advent-calendar/2024/kosopro2024

## DALL-E3の活用
私は3歳娘、1歳息子の子育て中の小児科医です。
以前にもいくつかDALL-Eを育児に活用させた体験談を投稿しています。

https://note.com/nice_alpaca828/n/nc5c32f974faa

https://note.com/nice_alpaca828/n/nb04b8dae8e3a

親子の会話を弾ませるアイテムとして絵本を挙げる方は多いのではないでしょうか？
そして絵本を通じて、人にやさしくすることを学んだり、やってはいけないことを学んだり、子どもたちの世界は豊かになっていくと私は日々感じています。

## 「どうだった？」の質問がまだ分からない娘
娘は現在3歳。
どこかへ行ったり、遊んだりした後に、こちらが「楽しかった？」と聞くと「楽しかった」と答えますが、それだとこちらの意見を押し付けているようだなという気がしたので、質問の仕方を「どうだった？」に変えてみました。娘の回答は・・・・・。


<font color="#FF0000">**「どうだった。」**</font>

なんと！これもオウム返しで返ってきてしまいました。
そうか、まだ「どうだった？」の概念が分からないのだと気づきました。
（さらに、普段の「楽しかった？」「楽しかった」にも意味がないと改めて痛感。）

## 「どうだった？」に続く会話例を見せたい
「どうだった？」という質問には、その時の状況や感想などを言うのだということを伝えたいなと思いましたが、そんな簡単にピッタリな絵本は見つかりません（探せばあるだろうけど）。
それならDALL-Eで作ってしまえと作ってみました(※DALL-Eで作成した絵に[Canva](https://www.canva.com/)でキャプションをつけています）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653579/0ea9f5d9-2740-cb6e-f580-0cc12bb95238.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653579/e8bfb749-f111-86de-03ab-64a4d81e487d.png)

うさぎにした理由は、娘が好きだから、ただそれだけです。
うさぎのプロンプトは
>うさぎの親子が会話している絵　ピクサ―風　毛は灰色と白色

たったこれだけです。

## ルール説明
まずは「どうだった？」に対してはどんな風に答えるか例を挙げて説明します。
>うさぎさんがどこかに遊びに行ったんだって。
  うさぎのかっかが「どうだった？」って聞くから、うさぎさんなんて答えるか考えてみてくれる？
  例えばこれだったら、お花がたくさんあってキレイだったよーとか、空気がキレイで気持ちよかったよーとか言うかな？

  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653579/ff42543f-b03b-38dc-824d-3227334372d5.png)

## 行き先の絵を作成
ここからはDALL-Eに行き先の指示を出して、絵を作ってもらうだけです。
（私はChatGPT Plusの有料会員です。無料だと枚数制限がありますので、たくさん絵を作りためてからやってみるといいかもしれません。）
プロンプトは「リアルに描いて。横長にして。」だけで十分です。
多少絵が変なところがあってもこのゲームには支障ありません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2653579/c9346748-509c-c997-b377-a42d3861df2e.png)


## 実際の様子

https://www.youtube.com/watch?v=gQXiO1LI3Ao

想像以上に盛り上がって楽しかったです！！
ぜひ皆さんも試されてください！！

## おわりに
テクノロジーを用いてちょっと育児を楽しくする方法を日々考えています。
私が作成したLINEで見られる図鑑「ぽちずかん」もぜひお試しを！

https://twitter.com/Pochizukan555/status/1740412860231192982
Storage Account の Applied Skills とか AZ-204 の更新とかの話

今年を振り返る「なんかかく」アドベントカレンダー 7 日目です。土曜日ですね。今年は AZ-204 取れました。

[AZ-204 合格まで (2024.05) #AZ-204 - Qiita](https://qiita.com/e99h2121/items/efbc9164bf5276880d9d)

以下最近更新しました。半年って早いですね...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/0babd571-8d3f-b667-6825-e08f83fbc3e8.png)

AZ-204 ということで、そこに関わる [Storage Account](https://qiita.com/e99h2121/items/25ae757eaa884b8e35c1) の演習を少しやってみたという話をします。

## 結論
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ea00b9ab-e85a-3b41-2f2c-5fb9947f1fe1.png)

結論 とは...

## Applied Skills 

Applied Skills というのは試験センターやらで受ける資格試験とは別で、無料で試せる力試しシリーズです。

[Announcing Microsoft Applied Skills, the new credentials to verify in-demand technical skills | Microsoft Community Hub](https://techcommunity.microsoft.com/blog/microsoftlearnblog/announcing-microsoft-applied-skills-the-new-credentials-to-verify-in-demand-tech/3775645)

[Microsoft の新しい認定スキル "Microsoft Applied Skills" とは #SKILL - Qiita](https://qiita.com/bbdsuno5/items/b31cc513da6382cb9478)

[Microsoftの新しい資格 Microsoft Applied Skills を受けてみた](https://zenn.dev/muka18/articles/000000000012)

35 件位出てきます。

[資格を確認する | Microsoft Learn](https://learn.microsoft.com/ja-jp/credentials/browse/?credential_types=applied%20skills)


## 「Azure Files と Azure Blob Storage のストレージをセキュリティで保護する」

今回やってみたのはこれです。

[ガイド付きプロジェクト - Azure Files と Azure BLOB - Training | Microsoft Learn](https://learn.microsoft.com/ja-jp/training/modules/guided-project-azure-files-azure-blobs/)

[Azure Files と Azure Blob Storage のストレージをセキュリティで保護する - Applied Skills | Microsoft Learn](https://learn.microsoft.com/ja-jp/credentials/applied-skills/secure-storage-azure-files-azure-blob-storage/)



## まとめ

とにかく環境と闘いながら一回やってみた:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/89af2857-f56b-98a4-04b1-574a28c17fc3.png)

クセツヨな試験画面に対峙しながら集中力とやる気と闘った結果がこれなら 57 ％、もう少し真面目に取り組めば行けるかもしれないな、という所感でした。71 時間待たないといけないわけですが...

対戦ありがとうございました:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/d940117b-acea-ce63-a6bc-8dada8f8a8ba.png)


> おめでとうございます!
> Microsoft Applied Skills: Azure Files と Azure Blob Storage のストレージをセキュリティで保護する の Microsoft Applied Skills の資格情報を獲得しました。
Microsoft Learn プロファイルを通じて、Applied Skills 資格情報の取得を祝い、次のようなことができます。
•	資格情報を獲得した日付や関連するスキルなど、この資格情報に関する詳細をご覧ください。
•	メール、LinkedIn などのソーシャル ネットワーキング プラットフォーム、履歴書などを介して、共有および確認します。詳細については、資格情報の共有及び確認をご覧ください。
•	トランスクリプトと資格情報をダウンロードして印刷します。
Applied Skills 資格情報を取得したので、その他の Microsoft 資格情報を探索して機会を探ります。
さらに質問がある場合は、資格情報サポートまでご連絡ください。
Microsoft の追加の資格情報の取得を目指す皆様の成功をお祈りします。


とりあえず無料でそこそこ証明してもらえるのが良いので皆様もおひとついかがでしょう。気軽に取り組めて面白かったよという紹介でした。今日は以上です！！
Oops, something went wrong creating your Agentforce Playground. Please refresh the page and try again in an hour.



# Quick Start: Build Your First Agent with Agentforce > Configure an Agentforce Service Agent

2024/12/12現在、修正されたみたい

+ [I'm not able to create a playground for "Connect Data Cloud to Agentforce and Prompt Builder"](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000KAOFj0AP)


------------------

+ [I am getting the following error while creating Agentforce playground : error Oops, something went wrong creating your Agentforce Playground. Please refresh the page and try again in an hour.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000o8nG)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/08c4c6f7-969d-5c8d-de00-ea7e85d92a41.png)

+ [I cannot create the Service Agent instance](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000oCqy)
+ [I'm getting "Oops, something went wrong creating your Agentforce Playground."](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000oEha0AE)


----------------

+ [Oops, something went wrong creating your Agentforce Playground. Please refresh the page and try again in an hour. ](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000J6exz0AB)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/ab9e6ec7-09ea-c77f-c167-345b743193f2.png)


+ [Not able to create playground for agentforce](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ifvh4SAA)

+ [Questions regarding Configure an Agentforce Service Agent lab](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000J6duw0AB)

+ [Not able to create playground.After clicking Create Playground , getting this "error Oops, something went wrong creating your Agentforce Playground. Please refresh the page and try again in an hour. Still having trouble?"](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000lxPO0AY)


+ [Unable to create Agentforce Trial Playground.](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000nfff)

:::note
The issue had been resolved by our engineering team. Can yoou please try creating a new playground now ?
:::

:::note
この問題は、一時的な遅延が原因で、しばらくすると自然に解決されることが多いです。
:::

+ [I cannot create the Service Agent instance](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX000000oCqy0AE)
+ [Trouble Creating New Custom Agentforce Playground](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000J7WLH0A3)

:::note
finally mine worked, i hit refresh and it worked
:::


# Something went wrong. Please refresh and try again

+ [Error message with Einstein Copilot](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007clQSf)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/a63d7208-e79b-4d3b-9b85-46e831d8d94d.png)

:::note
Usually, this is due to the Agent not being Activated 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/b88ab878-1558-46bc-916c-2918814a5e96.png)
:::