OmniAICreator/Qiita-1.07M huggingface dataset:
JavaSilver 黒本　第2章

## 問題1
bool型はJavaには存在しない
Javaにおいて真偽値を扱うデータ型はbooleanである
## 問題２
### リテラルについて
リテラル・・・ソースコードに記述する値のこと。リテラルには整数、浮動小数点数、真偽、文字の4つがある。
リテラルを他のデータ型であることを示したいなら、
long型の場合Lやl
float型の場合Fやf
を接尾辞の後ろにつける。
例
~~~
int a = 100L;
int b = 3.0F;
~~~
### 整数リテラル
整数リテラルでは10進数のほかに、2進数、8進数、16進数で記述できる。
それぞれ接頭辞を加えることで記述できる。
2進数・・・０ｂ
8進数・・・０
16進数・・・０ｘ
上記のように接頭辞をつけることでそれぞれ記述できる。
## 問題３
### 整数リテラルのアンダースコア
アンダースコアは桁数の多い数値リテラルの見やすさを向上させる目的で追加された。
### アンダースコアのルール
１．リテラルの先頭と末尾には記述できない
２．記号の前後には記述できない
2つ目のルールの記号とは、.,L,F,0b,0xなどである。
## 問題4
### 文字リテラルと文字列リテラル
文字リテラル・・・'a'のようにシングルクオーテーション
文字列リテラル・・・"abc"のようにダブルクオーテーション
### char
char型は文字を表すデータ型
以下の3種類がchar型の変数に代入できる
１．シングルクオーテーションで括った文字
２．文字シングルクオーテーションで括った「￥u」から始まるUnicode番号（文字リテラル）
３.０から65535までの数値（数値リテラル）
### null
nullは代入できない
## 問題5
### 識別子
変数やメソッド、クラスなどの名前
### 識別子の規則
１．予約語を識別子として使用できない
２．使用可能なのは、アンダースコアと通貨記号のみ
３．数字から始めてはいけない
## 問題6
### 型推論
型推論を行うためにはvar型を使って変数を宣言する。
varを使った型推論は、コンパイル時に代入演算子「＝」の右辺から変数のデータ型を推論し、そのデータ型に置き換える機能である。
### コンパイルエラーとなる場合
・変数が初期化されていない
・nullで初期化されている
・ラムダ式を受け取るための変数宣言
・配列の初期化式を代入する変数
### 問題7
var型による型推論はローカル変数の宣言にしか使えない
引数の型宣言にも使えない
### 問題9
### Stringオブジェクトの生成方法
・newを用いてインスタンス化する
~~~
String a = new String("sample");
~~~
・""で括った文字リテラルを記述する
~~~
String b = "sample";
~~~
・valueOfメソッドを使う
~~~
String c = String.valueOf("sample");
~~~
## 問題１０
Stringオブジェクトは不変なオブジェクトである。
## 問題１１
### charAtメソッド
charAtメソッドはインスタンスが保持している文字列から、引数で指定された位置の一文字だけを抜き出す。
## 問題１２
### indexOfメソッド
引数で指定された文字が文字列のどの位置に存在するかを調べるためのメソッド
引数で指定された文字が存在しなければー１が返される。
文字列を引数に渡した場合、その文字列が始まる最初の文字位置を返す。
## 問題１３
### substringメソッド
文字列から任意の文字列を抽出するメソッド
抽出する範囲は文字の間に線を引いて０から数を振っていくとわかりやすい
## 問題１４
### replaceメソッド
文字列を置き換えるためのメソッド
文字列は''か""のどちらかに統一されていなければならない
## 問題１５
charAtは指定した位置が存在しない場合はスローする
## 問題１６
### starsWithメソッド
文字列が引数で指定された文字で始まるかどうかを調べるためのメソッド
endsWithメソッドはその逆
## 問題１７
### concatメソッド
インスタンスが保持する文字列を、引数として渡された文字列と連結し、新しい文字列をメソッド
## 問題２０
### stringBuilderクラス
stringBuilderは保持している文字列＋余分のバッファを持ち、デフォルトで１６のバッファを持っている。
驚愕！Replit Agent

# はじめに
この記事は[リンクアンドモチベーション Advent Calendar 2024](https://qiita.com/advent-calendar/2024/lmi)の5日目の記事です。

こんにちは！リンクアンドモチベーションに入社して2年目のデータアナリスト、小林です。

最近、X（旧Twitter）でAIに関する情報を集めている中で目に留まった「Replit Agent」。ウェビナーに参加してその便利さに驚いたので、今回の記事でその魅力をお伝えしたいと思います！


# Replitって何？

**Replit**はブラウザ上で動作するオンラインの開発ツール（IDE）です。コーディングやチームでの作業を簡単に始められるだけでなく、多機能で初心者にもプロにも使いやすい環境を提供しています。

## Replitの特徴

### 🌐 多言語対応
Replitは**50以上のプログラミング言語**に対応しています。例えば：
- **Python**
- **Ruby**
- **JavaScript**

豊富な言語の種類があるので、初心者の学習にもプロの開発にもぴったりです！



### 🤝 リアルタイムコラボレーション
チームメンバーとリアルタイムでコードを共有し、一緒に編集できます。物理的に離れていても、スムーズにプロジェクトを進められます！


### 🌍 ブラウザだけでOK
- **セットアップ不要**で、すぐにプロジェクトを始められます！
- インターネット環境があればどこでも作業可能です！



### 🤖 AIサポート
AIによる**コード補完やエラーチェック**が非常に便利です。初心者が躓きやすい部分も安心して進められます！


### 📱 スマホでも使える
Replitはスマホアプリにも対応しているので、どこにいても気軽にコーディングできます。


# Replit Agentって？

**Replit Agent**はReplitが提供するAI開発アシスタントです。なんと、**自然言語で指示するだけでアプリが完成**します！

## Replit Agentのスゴい機能

### 💬 自然言語で指示を出すだけ！
例えば、「TODOアプリを作成して」と入力すると、即座にコードが生成されます。  
さらに、「検索機能を追加して」など後から指示を出せば、アプリをアップデートします。


### 🔧 こんな使い方ができる！
- **プロトタイプ作成**  
  本格的な開発に入る前に素早く試作品を作れます。
- **学習ツールとして**  
  コードの流れを可視化して学ぶのに最適です！


# Replitの何がスゴいの？

Replitは、開発AIとしてまさに「**フルスタックエンジニア**」の役割を果たせる点が魅力です。

### 🔥 特徴
- **バックエンドまで自動実装**  
  フロントエンドだけでなく、APIやデータベース連携まで一気に完成します！
- **APIとの連携もお得意**  
  例: GPTやDifyと組み合わせた製品レベルのツール作成。
- **高精度なデバッグ＆クラウドデプロイ**  
  完成したアプリをすぐに公開できます。

### 将来への影響
- **個人が簡単な社内システムを作れる時代に！**
- **営業時にその場で動くデモを作成可能！**
- **開発期間が大幅短縮！**

SaaS中心だった開発が、**個人制作の無料ツール**の時代に移行する未来も近いかもしれません。


# Replitの使い方アイデア

### 📖 コードリーディングで学ぶ
- 作ったアプリのコードを読みながら「どこを変えればどうなるか」を学ぶ。
- 自然言語の指示に基づいて変更された部分を見ることで、効率的に理解を深められます。


### 🏢 社内アプリのプロトタイプ作成
- プロトタイプを作成し、それを参考に現行の開発環境で実装。
- 負担を大幅に軽減できます！


### 🛠️ 業務効率化アプリの個人開発
- 単純作業を代替するアプリを作成し、手間を省く。
  - **例**: データ整理やタスク管理ツールなど。


### 🏡 プライベートアプリも！
- 趣味や日常生活を便利にするアプリも簡単に作成可能。
  - 🐎 **競馬アプリ**？  
    レース結果を管理するツールなど。
  - 🚣‍♀️ **趣味の管理アプリ**？  
    トレーニング記録やスケジュール管理など。


# まとめ

ReplitとReplit Agentは、初心者からプロまで幅広い層にとって非常に便利なツールです。**ブラウザだけで簡単に使える開発環境**を活用して、ぜひ新しいアイデアを形にしてみてください！  
AIが可能性を広げてくれる未来を楽しみにしましょう！


明日のアドベントカレンダーも乞うご期待！
【React/Next.js】依存関係やキャッシュのせいで急に動かない？？Next.jsにおけるキャッシュの消し方。styleが急に効かなくなった??よくわからないエラーが出てしまった時のとりあえずの対処法。

# はじめに
Next.jsを利用しているときにさっきまで動いていたのに急に動かなくなること、友人と同じ環境なのに自分だけ動かないなんてことありませんか？Next.jsを使う際によくあることです。今回は、この際の解決方法を紹介します。

## 解決方法
以下のコードを打ち込み
```sh
rm -rf node_modules/
rm -rf .next
```
自分の使っているパッケージに合わせたインストールを行う
```sh
npm install
```
<details><summary>npm以外の場合</summary>

- yarn
    ```sh
    yarn install
    ```
- pnpm
    ```sh
    pnpm install
    ```
- bun
    ```sh
    bun install
    ```

</details>


## 説明

1. 依存関係の削除

    ```sh
    rm -rf node_modules/
    ```

    `node_modules`ディレクトリ内の依存パッケージをすべて削除します。依存パッケージがキャッシュされていたり、破損していたりする場合があるため、一度削除し、後で再インストールすることで問題を解決できる可能性があります。
    <br/>

2. キャッシュの削除

    ```sh
    rm -rf .next
    ```
    
    次に、`.next`ディレクトリを削除します。このディレクトリには、Next.jsのビルド時に生成されるキャッシュファイルが格納されています。キャッシュが原因で問題が発生している場合、このディレクトリを削除することで解決できます。
    <br/>

3. 依存関係の再インストール
    ```sh
    npm install
    ```
    依存関係とキャッシュを削除した後は、再び依存パッケージをインストールする必要があります。
    
    <details><summary>npm以外の場合</summary>
    
    - yarn
        ```sh
        yarn install
        ```
    - pnpm
        ```sh
        pnpm install
        ```
    - bun
        ```sh
        bun install
        ```
    
    </details>
    
# さいごに
今回は、Next.jsで開発中に急に依存関係とキャッシュを削除し、再インストールすることで問題を解決する方法を共有しました。絶対に正しいはずなのに動かない！急にstyleが効かなくなって、HTMlそのままになってしまったときに役立ちます。多くの問題を解決できる可能性があり、この作業をしてもなにも支障を起こすことはありません。そのため、よくわからないエラーが出た時のとりあえずの対処法として覚えておきましょう！！
それではみなさん、良いエンジニアライフを〜👋
ログにタグづけするツール作ったよ

# はじめに

* 繰り返しの再現確認で、再現してるかの判断が単調で面倒くさい
* 引き継いだプロジェクトで有用なログがわからない
* 複数のログ（android+qnx+ボードとか）があって時系列が重要なんだけどソートするのが面倒くさい
* etc

みんなも一度はこんなことあるよね？
ということでツール化しました。

## LogTag

https://github.com/ShotaIuchi/LogTag

https://pypi.org/project/logtag/

## 使い方

https://github.com/ShotaIuchi/LogTag/blob/main/doc/README-ja.md

#### ◎ 例

1. ログファイル
    ```s
    $ cat log1.txt
    111
    222
    333
    $ cat log2.txt
    333
    222
    111                              
    ```
1. タグ
    ```yml
    - keyword: "111"
      message: "tag1-1"
    - keyword: "111"
      message: "tag1-2"
    - keyword: "999"
      message: "tag1-3"
    ```
1. 結果
    ```s
    $ logtag * --sort
    TAG     CATEGORY    LOG-FILE      LOG
    tag1-1  tag1        log1.txt      111
    tag1-1  tag1        log2.txt      111
                        log1.txt      222
                        log2.txt      222
    tag1-3  tag1        log1.txt      333
    tag1-3  tag1        log2.txt      333
    ```

!! 正規表現も使えるよ

##

よければ使ってみてね
いい感じのデザインを作る方法

(デザインなんて全く学んでないからなんとなくで作ってるとか言えない)
# はじめに
皆さん、かっこいいデザインを作りたい！とか思ったことありますよね。
しかし、良いデザインを作るには経験と才能が全てだとか思ってますよね？
**それ、違うんです。**
経験や才能は大事ですが、知識があっても意外と作れます
## 情報量を増やす
これをすれば、何かかっこいいデザインが簡単に作れます。
高級感を出したかったりするなら情報量は少なくするべきだと思いますが。
情報量を増やすなら、それっぽいところにそれっぽい図形を置くだけですが、
四隅にでかい図形をはみ出させたりするといい感じです。
![Screenshot 2024-12-03 9.44.34 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3946443/def9e572-b65f-4eca-b12d-af7599332d88.png)
わかりづらいけどこんな感じ

また、使う図形でおすすめなのは、〼と、上の画像のような丸に斜線を引いたもの
丸に斜線を引いたものは、基本的に大きくして四隅に置くだけですが、
〼は3連結しても結構使えます。

例として、俺のアイコン。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3946443/ed957de8-3012-3116-4397-ec88d91651cc.png)

いい感じの上か横が平らなところにこれ置くといい感じになります
あと、ぴったり三角が収まりそうなところには入れてみるといいかも

## 文字
次は文字です。
文字は、自分で造形するかフォント使うかです。
僕はいつも前者ですが、フォントを使うなら細ゴシックおすすめ。
また、文字の下にローマ字とかをスペース開けて置くとパッと見いい感じになる
![Screenshot 2024-12-03 9.58.28 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3946443/199e75b5-aab6-a323-f702-6f0e19fc37db.png)
また、端に、文字を横にして置くのもあり。
それと、図形だけでなく、文字だってはみ出しても良い。
![Screenshot 2024-12-03 10.03.56 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3946443/d6f81684-12ef-3bd0-d024-ac07337b04f1.png)
あとは、三角を離して配置したり、線引いてみたりするのもあり
![Screenshot 2024-12-03 10.08.32 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3946443/b320a700-eca9-2bf7-792a-443b4ad44671.png)
(1分クオリティだから左右非対称なのは許して)

# おわりに
まあ、頑張れ。

因みに、文字を一から作るなら一つの特徴を決めたり、文字を図形で代用したり、文字をくっつけたり、文字を図形で削ってみたりするといい
身近なサービスが UCEPROTECT L2 ブロックリストに入ったことでたまたま一部の宛先にメールの送信をブロックされた話

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

昨日（3 日目）は CIB-MC さんでした。

https://rainyvillage.jp/blog/616/

すでに[初日に記事を投稿した](https://qiita.com/hmatsu47/items/66dec58086b70514a23c)ので今日は予定していなかったのですが、前日夜の時点で枠が空いたままだったので、ちょっとした小ネタを投稿します。

## UCEPROTECT ブロックリスト（ブラックリスト）とは？

こちらに参考になりそうな記事を挙げておきます。

https://www.mailreach.co/blog/uceprotectl2-blacklist

- L1 : 単一の IP アドレスのリスト
- L2 : ISP / ホスト / ドメインプロバイダの複数の IP アドレス（アドレスブロック）のリスト
- L3 : ISP / ホスト / ドメインプロバイダの IP アドレスの全範囲のリスト

ということのようです。

例えば AWS の AS16509 全体が L3 に登録されていることが知られています。

- **[HENNGE Email DLP の IP アドレスが RBL に登録されている](https://support.hdeone.com/hc/ja/articles/900000189826-HENNGE-Email-DLP-%E3%81%AE-IP-%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%8C-RBL-%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B)**
  - 「UCEPROTECTL3 に登録されていることに起因する場合」のセクション

詳細についての明示はありませんが、AWS 公式ドキュメントでも UCEPROTECT について例示されていますね。

https://docs.aws.amazon.com/ja_jp/ses/latest/dg/faqs-dnsbls.html

SendGrid や Cisco のサポートサイトにも色々と記載されていますが、

https://support.sendgrid.com/hc/en-us/articles/16514400844827-UCEPROTECT-Blocklistings

https://www.cisco.com/c/ja_jp/support/docs/security/cloud-email-security/217934-cisco-secure-email-cloud-gateway-and-uce.html

- 迷惑行為に直接関係のない IP アドレスもまとめてひろ L2 / L3 のブロックリストに登録している
- L1 ブロックリストからの（速やかな）削除申請に金銭を要求している
  - これは RFC6471 が示すブロックリストのベストプラクティスに反する

というわけで、ちょっとお行儀の悪い（？）ブロックリストのようです。

一方で、

- 多くのサービスでは UCEPROTECT L2 ブロックリストを採用していないので、L2 ブロックリストに登録されてたとしても放置で OK
- L1 ブロックリストに登録されたとしても（お金を払うべきではないので）一切対応しない（無視する）

という形で言及されていることが多いです。

:::note
こちらのブログ記事も参考になります。
http://www.ujp.jp/modules/d3blog/details.php?bid=9783
:::

## ある日

身近にあるメールサーバーで「特定のメールアドレスに送信できない」事象があり、ログを調べてみると、対象のメールアドレスへの送信時に SMTP の接続が確立できずにタイムアウトが記録されていました。

ブロックリスト登録調査ツール（例 : [MxToolbox](https://mxtoolbox.com/blacklists.aspx) など）でチェックしてみたところ、メールサーバの IP アドレスが UCEPROTECT L2 ブロックリストに登録されていることがわかりました。

:::note
身近なメールサーバーそのものではなく、その周辺のどこかの IP アドレスから迷惑メールが送信されて L1 / L2 ブロックリストに登録され、結果として巻き添えを食ってしまったようです。
:::

当該メールアドレスのドメインの DNS レコードから辿ると、どうやら、国内の某レンタルサーバーで DNSRBL を有効にしているとデフォルトでこの UCEPROTECT のブロックリストも有効になるらしいことがわかりました。

## というわけで

「相手先に UCEPROTECT のブロックリストを使わないようにお願いしてみてください」と伝えて対応終了しました。

:::note
仮に自ら（迷惑メール送信の踏み台にされるなどして） L1 ブロックリストに登録されたとしても金銭は払うべきではないのですが、今回は L2（巻き添え）なのでいずれにせよ削除申請はできませんでした。
:::

---

明日（5 日目）は mame_mema さんです。
【Linux限定】ropenblasでRを楽々高速化

昨年のアドベントカレンダーで「[Rユーザーの9割が知らない高速化の禁断の裏技！！！](https://bob3.hatenablog.com/entry/2023/12/08/000000)」という記事を書きました。
これはRにOpenBLASを導入して行列計算を爆速にするという内容ですが、Windowを想定しています。

個人的な話ですが、自宅のパソコンをLinux（Linux Mint 22）に切り替えたところなので、今度はLinux版のRにOpenBLASを導入しようと思います。

OpenBLASとはなにか？という話は[Wikipediaの説明](https://ja.wikipedia.org/wiki/OpenBLAS)をご参照ください。
***
LinuxでのOpenBLASの導入について調べてみるとホクソエムの人が書いた記事が見つかります。

[OpenBLASでRを高速化](https://qiita.com/hoxo_m/items/aa04b9d3d7a32cb6a1a3)

えーと、gitでcloneして、makeして、ライブラリを切り替えて……めんどくせぇな！
もっとササッてできないのかな！
***
そこで今回ご紹介する[ropenblas](https://prdm0.github.io/ropenblas/)パッケージの登場です。
ソースコードのDLからコンパイル、Rとのリンクまでやってくれるパッケージです。ただし、Linux専用。
remotesパッケージを先にインストールしておいてください。
そして以下をR上で実行するだけでOK。
```r:ropenblas
remotes::install_github(repo = "prdm0/ropenblas", force = TRUE)
library(ropenblas)
ropenblas()
```
ソースコードからコンパイルするため、そこそこ時間はかかります。

Linuxはディストリビューションによって構成が変わるため、実行に必要なLinuxライブラリが足りない場合もあります。
そうした場合はエラーメッセージの中に足りないライブラリ名が示されていると思うので、それをインストールした上で再実行しましょう。

自分の環境では git と libgit2-dev が足りないと言われたので、以下のようにインストールしてから再実行しました。
```bash
sudo apt install git libgit2-dev
```

これで完了。

私の環境ではOpenBLAS導入前と比べて行列計算が30倍ぐらい速くなりました。

Enjoy!
【TIPS】マップリストにpandasのget_dummiesっぽいダミー値処理をする①

この記事は、[Elixir Advent Calendar 2024 シリーズ9](https://qiita.com/advent-calendar/2024/elixir) の6日目です

---

【本コラムは、10分で読め、5分で試せます】

[piacere](https://twitter.com/piacere_ex) です、ご覧いただいてありがとございます :bow:

pandasのget_dummiesは、AI・LLMの前処理における「ワン・ホット・エンコーディング」、つまり「ダミー値処理」を実現します

これにより、数値しか行列処理では扱えないAI・LLMに対し、数値以外の値（カテゴリ値と言います）のバリエーションごとにデータの数値化を行うことで、行列処理を可能とし、傾向分析を可能とします

たとえば、下記マップリストのc1／c3キーをダミー値処理すると、下記の結果のように、c1／c3の値が数値化されます（なお簡略化のため、今回はget_dummiesのように値のバリエーションごとに列生成せず、元の列の値を通番で数値化しています）

```diff_elixir
maplist = [
  %{"c1" => "v1", "c2" => 2, "c3" => true}, 
  %{"c1" => "v1", "c2" => 5, "c3" => false}
]
keys = ["c1", "c3"]

結果：[
  %{"c1" => 0, "c2" => 2, "c3" => 0}, 
  %{"c1" => 0, "c2" => 5, "c3" => 1}
]
```

これを実装すると、こんなコードになります

```diff_elixir
maplist = [%{"c1" => "v1", "c2" => 2, "c3" => true}, %{"c1" => "v2", "c2" => 5, "c3" => false}]
keys = ["c1", "c3"]

Enum.reduce(keys, maplist, fn key, acc -> 
  categories = 
    Enum.map(maplist, & &1[key]) 
    |> Enum.uniq 
    |> Enum.with_index 
    |> Enum.into(%{})
  acc
  |> Enum.map(& Map.put(&1, key, categories[&1[key]]))
end)

結果：[
  %{"c1" => 0, "c2" => 2, "c3" => 0}, 
  %{"c1" => 0, "c2" => 5, "c3" => 1}
]
```

コード解説ですが、全体としては、ダミー値処理を各キーごとに行い、ダミー値化した結果をaccに積み続けます

最初に、各キーごとに、カテゴリ値に値のバリエーションをEnum.uniqでユニーク化し、Enum.with_indexで通番化された数値を付与したものを、下記のように値をキーとして通番を値として返せる `categories` として保持します

```diff_elixir:c1分
categories = %{"v1" => 0, "v2" => 1}
```

```diff_elixir:c3分
categories = %{false: 1, true: 0}
```

次に、Enum.mapでマップリストを回し、各マップをMap.putを使ってダミー値化した値を `categories` から取り出して、マップの値を置き換えます

# p.s.このコラムが、面白かったり、役に立ったら…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155423/907a8695-4d83-1b5c-8052-d0ce52de5f66.png) にて、どうぞ応援よろしくお願いします :bow:
【Vuetify, Vue】カスタムカラー、文字の色を変更したい

vuetifyでカスタムしたカラーを、標準の色と同様に`class=`で呼びたい時の設定方法

```js
// vuetify.js
export default createVuetify({
  theme:{
    defaultTheme:'myCustomTheme', //こいつが案外重要
    themes:{
        myCustomTheme:{
            colors:{
                logoCyan:'#00aae3', // これで class="text-logoCyan"で呼べる
                logoGreen:'#80af26',
            },
        },
    },
  },
})
```

カスタムカラーを設定すると、色に合わせて自動で文字色が決まります。
大体はいい感じに設定してくれますが、たまに見づらい色になることも…
（緑背景に黒文字って見づらくないですか？？）

変更したい場合はこちらもカスタムカラーに設定ができます。

```js
// vuetify.js
export default createVuetify({
  theme:{
    defaultTheme:'myCustomTheme',
    themes:{
        myCustomTheme:{
            colors:{
                logoCyan:'#00aae3',
                logoGreen:'#80af26',
                'on-logoGreen': '#fff' // これで文字色が白になる！
            },
        },
    },
  },
})
```

以上です。
【ハッカソンは福利厚生】新人プログラマが出場（運営）すると得られる21のこと

## 21のこと

1. 何をつくるか？から考えられる体験が得られる
1. おなじテーマでまったく違う作品に出会える
1. 他の参加者といっしょに話す機会ができる
1. 結果がともなわず悔しい思いをできる
1. 作品をつくってプレゼンするところまでをワンセットで経験できる
1. 時間のすくなさをアイデアと工夫で乗りこなすスキルが身につく
1. ものづくりの楽しさを再認識できる
1. 懇親会で他のチームとわいわい感想戦に花が咲く
1. 技術力の無駄遣いを思う存分できる
1. 運用責任のない作品を全力でつくりきれる
1. DRYやリーダブルとは真逆の世界線で遊べる
1. あわよくば賞品をゲットしてあたらしいモニタが買える
1. 知らない技術を知ることができる
1. まだまだ面白いコミュニティがあるのでは？という観点ができる
1. 運営と参加者で良いフィードバックループができて楽しい
1. 受賞者インタビューをすることで開発裏話がたくさん聞ける
1. 回を重ねて振り返るとなかなかの歴史になっていて驚ける
1. 若者と熟達プログラマがおなじ話で盛り上がれる空間がある
1. ハッカソンには正解がない、すごい！とヤバイ！がある
1. いい大人が我を忘れて夢中になれる
1. 遊びにも全力を注ぐ愛すべき開発者がたくさん集まる


これまでハッカソンに参加し、運営も3年ほど続けてみて得られたことをまとめてみました。技術を試す、賞を狙うというのももちろんですが、コミュニティにふれる、あたらしい関心軸を見つけることもできるのがハッカソンの良いところだと感じています。

## 22個目を探しに

弊社ソニックガーデンでは、2021年から年2回のペースでツクってアソぶハッカソンを主催しています。テーマは参加者から公募し当日の投票で決まります（開発時間は72時間）

2024年も2回開催することができました。

:::note info
第6回：洗練された無駄のない無駄な機能
:::
:::note info
第7回：ギリギリ商売できないアプリ
:::

運営も予想できない斜めうえのテーマが選ばれるのが醍醐味となっていますが、毎回参加者を悩ませつつも思い思いの作品が生まれているイベントになっています。学生・社会人を問わず参加できます。


https://tsukuaso.com/

https://www.youtube.com/@tsukuaso
進捗報告 (2024-12-03 21:42:23)

# Twitter自動投稿ボットの修正と新規アプリ開発

## 背景

最近、Twitter自動投稿ボットの実行が停止していることに気付きました。調査した結果、使用していたニュースAPIが当日分のデータを取得できないことが原因で、レスポンスがnullになっていました。この問題を解決するため、昨日分のデータを取得して投稿するようにボットのコードを修正しました。

## Twitter自動投稿ボットの修正

### 問題点
- ニュースAPIが当日分のデータを取得できず、レスポンスがnullになる。

### 修正内容
- 昨日分のニュースデータを取得するようにAPI呼び出しを変更。

### 結果
- 修正後はボットが正常に動作し、定期的に投稿を行うことが確認できました。

## 介護記録音声即記録アプリの開発

### 概要
研修中に思い付いた介護記録音声即記録アプリの開発を開始しました。このアプリは、音声で記録した内容をテキストとして取得し、それをOpenAI APIに送信します。

### 要件
1. 音声から生成されたテキスト情報を取得する。
2. あらかじめDBに設定したテーブルとカラムに基づき、テキストの内容を特定。
3. 特定した内容をDBに登録する。

### 技術スタック
- **音声認識**: 音声をテキスト化するための技術。
- **OpenAI API**: テキスト解析を行うために使用。
- **AWS**: サーバー環境の構築。

## インスタグラムAPIを用いたディープフェイク自動投稿スクリプト

### 現状
ディープフェイクの自動投稿スクリプトを開発していますが、意外と結果がうまくいかず手こずっています。

### 次のステップ
- 現在、AIにAWSの構築方法を質問しており、その実行を進める予定です。

## 結論

Twitter自動投稿ボットの問題を解決し、介護記録音声即記録アプリの開発を進めています。同時にディープフェイクの自動投稿スクリプトに取り組んでおり、次のステップとしてAWSの構築に関する知識を深めていきます。
今年読んでみてよかった本

毎日ブログ書いてる人すげぇなと思っている今日この頃です。多分1時間弱くらいで書ききれる量を連発しないと難しそう。さて、一年を振り返る Advent Calendar 2024の4日目です。

既に25日も書ききれるネタが無いので本の紹介に走っていますが、今年読んでみてよかった本をさらっと紹介してみようと思います。

## プロジェクトのトラブル解決大全 小さな問題から大炎上まで使えるプロの火消し術86

https://amzn.asia/d/4lVnkwE

これまでの10年以上培ってきたインフラエンジニアのキャリアから一変して、この一年はアプリ開発のプロマネ寄りの業務だったこともあり、いかんせんプロジェクトのハンドリングのコツが掴めずかなり苦労していました。（というか現在進行形で苦労しています。）
しっかりプロジェクトも燃えているのですが、燃えているときにどう振る舞うべきかの選択肢が少なかったのでこちらの書籍を読んでみましたが、プロジェクトの軌道修正の手法からマインドの部分にわたって大事だなと思うことが書いていて大変勉強になりました。何事も自分事として前向きに取り組んでいくのが大事だなぁと思いました。


## アジャイルサムライ 達人開発者への道
https://amzn.asia/d/gosnTXe

最近Xでも話題になりましたが、自分もこれまでウォーターフォールしかやってこなかったので実際にアジャイル開発をするにあたり知見が少なく、有名なこの一冊にとうとう手を出してみました。スクラムマスターの資格は持っていましたが、改めてスクラムとアジャイルの違いやアジャイルの目的がしっかり学べた良書だったと思います。
技術的負債（この単語もなんかXでわちゃわちゃしてる人たちがいた気が）についても、日々しっかり返済していく仕組みづくりが大事だなぁというのを再認識しました。
ちなみに、実際にアジャイル開発に取り組んで実感しているのが、ウォーターフォールもアジャイルも期日は決めないといけないし、どっちもちゃんと（？）炎上するので、プロジェクトの特性に合わせて開発手法をテーラリングするのが大事だなと思った一年でした。


## Web API The Good Parts
https://amzn.asia/d/9eDTj9d

クラウドチームに配属されたものの想定外にバックエンドやAPI設計をすることになったこともあり、改めて何となくでしか理解してなかったRestAPIを理解しようと思い読んでみました。10年前の書籍ではあるものの、中身的にはかなりの良書でした。
エンドポイントのネーミングとかステータスコードの使い方とか基礎的なところが結構わかりやすく頭に入ってきたので読んでよかったなぁと思いました。
話はそれますが、"初めてのGraphQL" という本も読んでみましたが、この技術使わないといけないシステム要件って何があるの？？という疑問を持ちつつ、まだまだRestAPIで事足りるんじゃないか？となりました。


## 苦しかったときの話をしようか
https://amzn.asia/d/5KS4HrC

技術というよりはキャリアの話ですが、これ大学生の就活の時に読めたらなぁと思った一冊でした。（あと10年早ければ。。。）
自分の強みを知っておくこと、自分の強みで戦うこと。強みに相反する弱みの克服からはあきらめること。この辺の話が結構自分にはしっくり来て腹落ちしました。正直、自分が今転職してやってることって、完全に自分の強みから大きく逸れまくっているのでなかなかに悩ましんでいるところはありますが、最低限の知識として必要なんだろうと若干割り切って取り組むようにしています。。。

## まとめ
今年売られた本も結構読み漁ってはいたんですが、昔の本がなかなかいい学びになった一年でした。
多分、改めて基礎を学びなおすのが大事なのかなと思いました。来年もどんどん読書していこうと思います。
【AWS】設計編 - AWS Systems Managerがあれば、踏み台サーバはいらないのか

## この記事で伝えたいこと（ポイント）

- [前回の内容](https://qiita.com/ymd65536/items/c6488bb82e0db699b986)を振り返って何が必要か検討してみたよ

## はじめに

この記事では「この前リリースされた機能って実際に動かすとどんな感じなんだろう」とか「もしかしたら内容次第では使えるかも」などAWSサービスの中でも特定の機能にフォーカスして検証していく記事です。

主な内容としては実践したときのメモを中心に書きます。（忘れやすいことなど）
誤りなどがあれば書き直していく予定です。

今回は[前回](https://qiita.com/ymd65536/items/c6488bb82e0db699b986)の内容をもとに実際に必要な要件を考えてみます。

## 前提

まず、AWS Systems Managerのセッションマネージャー（以下、ssm）が代わりになるという条件を考えていきます。

[前回](https://qiita.com/ymd65536/items/c6488bb82e0db699b986)の内容では`なぜ踏み台サーバが必要なのか`ということについて考えた際、以下のようなことが必要だということがわかりました。

- 操作ログをとる
- セッション開始時に通知を出す
- VPCエンドポイントで対象にアクセス（接続まわり）
- 特定のIPアドレスからアクセス（接続まわり）

このうち`VPCエンドポイントで対象にアクセス`と`特定のIPアドレスからアクセス`についてはやりようによってはさまざまな方法があります。今回はシンプルに`接続まわり`と題しましょう。

それでは順番に見ていきます。

## 操作ログをとる

まずは操作ログを取得することです。イメージとしてはTeraTermのようなターミナルのソフトでSSHアクセスした時に取得されるようなログです。
具体的にはコマンドの実行時間と実行したコマンドの詳細を取得できることが重要です。

※希望としては以下の形式、区切り文字はなんでも良い

```text
{時間} {コマンド}
```

1つのセッションで異なるユーザがアクセスするというのは考えにくいのでログのファイル名にユーザ名が入っていると良いかもしれません。
※ユーザ名がIAMユーザなのかLinuxのユーザのことなのかは議論の余地ありです。

また、ストレージについては検証レベルなのでS3で対応することにします。

## セッション開始時に通知を出す

次にセッション開始時に通知を出すというところです。
どのように通知を出すと良いでしょうか。通知といっても色々あります。
メール、チャットアプリ（SlackやTeamsなど）、スマホの通知（Firebaseのプッシュ通知）などです。

記録だけが重要であるならば、前述の操作ログだけでも良いかもしれません。
「承認していない誰かが入ってきたらすぐに気づきたい」ということであれば、速報性が大事なのでチャットアプリやスマホの通知が良いでしょう。
今回はできるだけ速報性の高いもので実装したいと思います。

## 接続まわり

次にネットワークです。接続元がどうなっているかでさまざまな方法があります。具体的には以下のとおりです。（一部記載）

### ローカル端末接続

- パブリックなインタンス/ECSサービスに接続する（特定のIPに制限する）

特定のIPアドレスからのアクセスですが、これは特定の組織がVPNで入ることを考えて実装してみましょう。セキュリティグループで言うと`MyIP`に該当するものです。

ですが、ssmではセキュリティグループを利用できません。
まだ試せてはいませんが、このアプローチの場合IAMロールによる制御が必要になります。
※LookerとAmazon AthenaをIAM認証させた時にソースIPを使って制限できたのでできると推測

### CloudShell接続

- CloudShellからパブリックに接続する
- CloudShellからプライベートに接続する（CloudShellのVPC機能とVPCエンドポイントを利用）

2つの手段がありますが、これは内部に閉じるのが賢明でしょう。なお、実装ではインターフェイスエンドポイントが必要になるため、多少の料金は見積もりに入れないといけません。
また、CloudShellをVPCで利用できるようにする必要があります。

## まとめ

今回は「AWS Systems Managerがあれば、踏み台サーバはいらないのか」というテーマで何が必要なのかを考えてみました。パターンをきれいに分けていくと「なんかやれそうだな」というのが見えてきたと思います。考察と設計をもとに次は実践していきたいと思います。
【MS-900】Microsoft365 Fundamentals試験の合格体験記（2023年夏合格)

MS-900を以前受験し、合格したので合格記を投稿します！！

## 前提

2023年夏に受験したので、情報的に少し違う部分があるかもです。
まずは私の前提から。

:::note info
- 職種：情報システム部
- 業務内容：Microsoftのライセンス管理、ヘルプデスク(2年)
- 取得資格：ITパスポート、情報セキュリティマネジメント、AZ-900
:::

## 勉強法

私が受験した当時は、まったくMS-900に関する情報がなく、情報がないゆえに難しい試験だとまことしやかに噂されていました。
幸いなことに今は、俗に言う赤本の「MCP教科書 Microsoft 365 Fundamentals（試験番号:MS-900）」があるので、以前よりも勉強しやすいかと思います。

https://www.shoeisha.co.jp/book/detail/9784798180816

#### まずは試験範囲の確認
下記から確認できます。

https://learn.microsoft.com/ja-jp/credentials/certifications/resources/study-guides/ms-900

試験範囲(2024/12月現在)
> #### スキルの概要
> クラウドの概念について説明する (5–10%)
> Microsoft 365 Apps とサービスについて説明する (45–50%)
> Microsoft 365 のセキュリティ、コンプライアンス、プライバシー、信頼について説明する (25–30%)
> Microsoft 365 の価格、ライセンス、サポートについて説明する (10–15%)

私の場合は、クラウドの概念とライセンスについては、AZ-900取得とM365のライセンス管理をしていたため、
M365Appsの理解と、セキュリティについて重点的に確認しました。

#### 実際にしたことが下記になります。

| 番号 | やったこと | おすすめ度 | 関連リンク|
|:-:|:-:|:-:|:-:|
| １  | 模擬試験を受ける  | ★★★★★  |  [Microsoft 認定資格](https://learn.microsoft.com/ja-jp/credentials/certifications/microsoft-365-fundamentals/practice/assessment?assessment-type=practice&assessmentId=50&practice-assessment-type=certification) |
| ２  | Learnを読み込む  |  ★★☆☆☆ | [Learn](https://learn.microsoft.com/ja-jp/credentials/certifications/microsoft-365-fundamentals/?practice-assessment-type=certification#two-ways-to-prepare)  |
|  ３ | Exam Topicsを受ける  |  ★★★★☆ | [Exam Topics](https://www.examtopics.com/exams/microsoft/ms-900/)  |
|  ４ |  5分でわかるシリーズの動画を見る | ★★★★☆  | [Youtube再生リスト](https://www.youtube.com/watch?v=OskCCQhXGNg&list=PL1RqQ3kddIpYqqe5GwG8x2qQaukPP0FFK)  |
|  ５ |  Udemyの問題集を解く | ★☆☆☆☆  |  [模擬問題集](https://www.udemy.com/course/ms-900-microsoft-365-fundamentals-z/?couponCode=V2JPLETSLEARN) |
| ６  | ブログでMS-900の合格記をひたすら読む  | ★★☆☆☆  | [例えばこういうの](https://qiita.com/ponponmikankan/items/77202be0de32cda5893d)  |
| 7  | ChatGPTに問題を作ってもらう  | ★★★☆☆  | ｰ  |

:::note info
 - 期間：2週間
 - 勉強時間：平日1時間、休日2時間。合計20時間弱
:::


それぞれ簡単にどんな感じだったか説明していきます。

### １．模擬試験を受ける

これは試験の直前まで全部の問題を覚える勢いで解きました。
公式から出されている数少ない情報源だったので、実際に試験に出た問題もあり、振り返るとやっててよかったなと思います。

### ２．Learnを読み込む

Learnを読み込みましたが、正直実務で使っていないとよくわからないものが多く（Viva Engageなど）、
なぞにややこしい英語翻訳された日本語を読むのに苦労しました。
ChatGPTに何度もこのページの要約をしてくれと頼むことになりました。。。

### ３．Exam Topicを受ける

今はどうかわからないですが、私が受けたころは実際の問題と似た問題が多く、試験を受けに行ったときにこういう問題やったことある！と何度かなりました。
Learn読んで理解→製品知識理解→Exam Topicsを受けまくりました。

### ４．5分でわかるシリーズの動画を見る

上記にもリンクは貼りましたが、実務でM365Appsを使うことが全くなく、社内のセキュリティ的にも使用を禁止されているものもあったので、Youtubeでどういったことができるのかひたすら動画を見ました。
ユーザー向けに動画が作成されているので、非常にわかりやすく、少しMicrosoftのことも好きになれる気がしました。

### 試験の感想

テストセンターで受験しました。
試験時間45分でしたが、さくさくと解けて20分程度で解き終わり、何度か見直し30分くらいで出ました。

受けてみてやっぱり情報が少なすぎて、難しくさせている試験だと感じました。
うかうかしていると足元を救われる危険性が高く、試験中は常にヒヤヒヤでした。
個人的には教材があるAZ-900より難しかったです。

次はPL-900取得に向けてがんばるぞ～～！
【C++】vectorの入出力でfor文を使うのが面倒！

## 🎄 Qiita Advent Calendar 2024 🎄

この記事は，[Qiita Advent Calendar 2024](https://qiita.com/advent-calendar/2024) の [ひとりアドベントカレンダー by Hietan](https://qiita.com/advent-calendar/2024/hietan) というカレンダーの3日目の記事です．

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

アウトプット力の強化を目的に，25日分すべて１人で書ききるというチャレンジをしています．是非他の記事もご覧ください．

---

## はじめに

:::note warn
以下では，以下のコードを記載している前提で進めます．

```c++
#include <bits/stdc++.h>
using namespace std;

#define rep(i, n) for(int i = 0; i < (int)n; i++)
```
:::

みなさんは，競技プログラミングをやっていますか？
競技プログラミングだと，速度の速さから C++ を使っている方も多いと思います．
ただ，配列の入出力のコーディング面倒じゃないですか？

## Before

例えば，長さが `n` の int 型 vector を作成し，データを標準入力から取得するとします．
標準ライブラリだと，次のような記述になります．

```c++
vector<int> arr(n);
for (int i = 0; i < n; i++) {
    cin >> arr.at(i);
}
```

範囲 for 文を使うとこのようになります．

```c++
vector<int> arr(n);
for (int &e: arr) cin >> e;
```

いちいち for 文を書くのは面倒です．

特に範囲 for 文の場合，

```
for (int &e: arr) cin >> arr;
```

と書いてしまって，コンパイルエラーを起こすことがよくあります．

## After

vector に対して `cin` するだけで一括で標準入力ができるようにします．
以下の記述をテンプレートとして準備します．

```c++
template <typename T>
istream& operator>>(istream& is, vector<T>& v) {
	for (T& e: v) is >> e;
	return is;
}
```

vector 型に対する `>>` 演算子を定義しています．
これで必要なコードは以下の通りです．

```c++
vector<int> arr(n);
cin >> arr;
```

非常に直感的でスッキリしました．

出力についても同じようにできます．

```c++
template <typename T>
ostream& operator<<(ostream& os, V<T> v) {
	rep(i, v.size() - 1) os << v.at(i) << ' ';
	os << v.back() << endl;
	return os;
}
```

末尾に空白を含めないために，最後の要素だけ別の処理にしています．
これを使う時は以下の通りです．

```c++
cout << arr;
```
【検証】生成AIバズらせマッスル選手権を勝手に開催してみる

最近、ITの世界にいて生成AIという言葉を耳にしない日はありません。
「ChatGPT」や「Claude」などの名前が会話の中に登場するのはもはや日常ですが、ふとした疑問が頭をよぎりました。

**「もし生成AI同士でバズらせることを競わせたら、どんな戦いになるんだろう？」**

そんな妄想が膨らんでしまったので、今回は「生成AIバズらせマッスル選手権」を勝手に開催してみることにしました！
果たして、どの生成AIが最も「バズる」ポテンシャルを秘めているのか？
この選手権を一緒に覗いてみましょう:clap_tone1:

そして「わたしもやってみたい」「他のAIでも試してみたい」と思ったそこのあなた！次の選手権を開催してくれると嬉しいです:tada:


## 選手権のルール
- バズる = 閲覧数が多い
    - 公開から一週間の間に得たview数で競う
    - いいね数は考慮しない
- 考えてもらうのは「タイトル」だけ
    - 記事の内容はわたしが書きます
- どのAIがどのタイトルを考えたのかは、結果発表まで内緒
- プロンプトは全AIで共通
    - 日本語対応しているものでも英語

<details><summary>プロンプト</summary>

> あなたはWebアプリケーションを開発するITエンジニアです。
Qiitaという、エンジニアに関する知識を記録・共有するためのブログサービスにて、たくさん閲覧される記事を書きたいと思っています。
たくさん閲覧されるためには、タイトルに他の人の興味をひくようなワードが入っていることが重要です。
たくさん閲覧される記事のタイトルを考え、タイトルと概要、結論を200文字程度で出力してください。
>> You are an IT engineer.
You want to write a post that gets a lot of views on Qiita, a blog service for recording and sharing engineering knowledge.
To get a lot of views, it is important that the title contains words that will attract other people's interest.
Please come up with a title for an article that will be viewed a lot and output the title, summary and conclusion in about 200 words.
</details>


## エントリー選手の紹介
- ChatGPT-4
    - いわずもがな強そう
- Claude 3 Haiku
    - 賢い答えが返ってきそう
- Titan Text G1 - Express
    - わたしがAWS好きという理由だけで選定w

これ以上記事書けないよう:cry:
ということで泣く泣く3つです..ぜひ他の子も参加させてあげてください。

## 結果発表！
まずは生成されたタイトルと閲覧数です:star2:
各記事でちょこちょこ集計時間がズレてすいません:pray_tone1:
- これを知らないと損！開発者なら知っておきたいGitコマンド10選：**6860** views
![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932771/140cbf8b-a001-710e-f03a-9e409c3a4f70.png)
- 成功するITエンジニアになるには：成功の秘訣とコツ：**7350** views
![it.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932771/b0239271-3569-4c92-10ed-47e6867c2a84.png)
- 【緊急公開】現役エンジニアが教える！本当は教えたくない最強のコーディング効率化テクニック10選：**4552** views
![tech.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932771/a207948a-e395-3fce-77d2-7d7dfbb71809.png)

一番、閲覧数が多かったのは
**成功するITエンジニアになるには：成功の秘訣とコツ**
となりました:clap_tone1:

### タイトルを考えた子は！？
- ChatGPT-4
これを知らないと損！開発者なら知っておきたいGitコマンド10選
- Claude 3 Haiku
【緊急公開】現役エンジニアが教える！本当は教えたくない最強のコーディング効率化テクニック10選
- Titan Text G1 - Express
成功するITエンジニアになるには：成功の秘訣とコツ

です！
優勝は「**Titan Text G1 - Express**」となりましたー！:tada: ぱちぱち


## おわりに
投稿時期や締切タイミングにズレがあるので全然ちゃんとした検証にはなっていないですが、企画としては面白かったのではないでしょうか！？（自画自賛していくスタイル）
この記事を見てくださった誰かが次回大会を開催してくれることを祈ってます:pray_tone1:
今年一年を振り返る

## はじめに

今年も多くの出来事がありました、そして、多くの悪い出来事もありました。この1年間を振り返り、学びや成長を記録しておこうと思います。

## 挑戦したこと

今年は特に新しい技術の習得に力を入れました。その中で、最も印象的だったのは以下の内容です。

- Scrach、HTMLなどの最初のプログラミング言語をやめ、新しく、ちょっと難しいプログラミング言語の基本的な(Node.js,Javascript,Typescript,Python)学習を始めた
- 画像生成計Ai(Stable Diffusion)に手を出し、最近のAiの力を確認した

これらの取り組みを通じて、基本的な、プログラミング言語、知識を習得しました！

## 挫折とその克服

もちろん、順調なことばかりではありませんでした。特に以下のような場面で困難を感じました。

- プログラミング言語全般の、特にNextjsで、躓いたとこは、'use client'みたいな、とこが難しかったです。
- ITパスポートの取得勉強のやる気が起きなかったこと
- C++などのコンパイラ言語

しかし、これらの問題に対しては、1日何分勉強するなどの1日のTodoをを設けることで改善する予定です！

## 来年の目標

来年は、以下の目標を実現させます！

- 最低1個資格を取る！
- より良いタイムマネジメントを実現し、いい時間の使い方を習得する
- 新しい言語に手を出してみる(Rust,etc)
- 仮想通貨の勉強をする


これらを達成することで、さらなる成長を目指したいと思います。

## 最後に

今年一年を振り返って、自分の成長を感じると同時に、まだまだ学ぶべきことが多いと痛感しました。来年も新たな挑戦を恐れず、積極的に行動していきたいと思います。

読んでいただきありがとうございました！
SharedWorkerを使っているのは誰だ

SharedWorkerというWeb Workerがあります。
よく使うWeb Worker(`new Worker(...)`)をDedicated(専用)Workerと呼ぶのに対し、SharedWorker(`new SharedWorker(...)`)はShared(共有)Workerと呼びます。

Sから始まるWorkerでService Workerというものもありますが、これとは全くの別物です。

SharedWorkerは、複数のウィンドウやタブを開いたときでもスレッドが共有され、各ウィンドウとはメッセージで情報を共有することができます。

これを使うことで、WebSocketなどを使っている場合に各ウィンドウからコネクションを生やさずに、SharedWorker経由の1つのコネクションで済ませるという手法があります。

```mermaid
graph LR
  tabA --> w((SharedWorker))
  tabB --> w
  tabC --> w
  w --WebSocket--> Server
```

ところで、iOS 16.1のWebViewで利用するとクラッシュします。([ref](https://forums.developer.apple.com/forums/thread/718757))

## SharedWorkerを使っているのは誰だ

突如、iOS16.1のみWebViewがクラッシュするとわかり、調べるとSharedWorkerが悪いとわかりました。

自身のコードの中ではSharedWorkerを使っていないのになぜでしょうか。

### ほんとうにSharedWorkerを使っているか確認する

Google Chrome (Chromium)ブラウザのDeveloper ToolsのPerformanceタブを利用することで、Worker含め、どのような関数が実行されたかなどを閲覧できます。

関数からコード片を確認することもできます。

### SharedWorkerを初期化しているひとを探す

実際にSharedWorkerを使っていることがわかりました。次は実際に初期化しているコードを探します。

SafariのWeb development toolsには、HTTPリクエスト/レスポンスの上書き機能があります。
Networkタブからリソースを選択、右クリックしコンテキストメニューから「リクエスト(レスポンス)のローカルオーバーライドを作成」します。

ここで最初に読み込まれるHTMLへJavaScriptを注入します。どのJavaScriptよりも早く読み込みたいのでheadの開始タグ直後などがいいでしょう。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <script>
    (() => {
      const Original = window.SharedWorker;
      window.SharedWorker = class Override extends SharedWorker {
        constructor(...args) {
          super(...args);
          console.trace(args);
          debugger;
        }
      }
    })();
  </script>
  <meta charset="utf-8">
  ...
```

これにより、 `new SharedWorker('...')` されるときに、そのスタックトレースを確認できるようになります。

### Blob

上のコードを挿し込んでもわからなかったり、スクリプト自体がBlob URLだったりします。なのでBlobも同様にスタックトレースを確認します。

```html
  <script>
    (() => {
      const Original = window.Blob;
      window.Blob = class Override extends Original {
        constructor(...args) {
          super(...args);
          console.trace(args);
          debugger;
        }
      }
    })();
  </script>
```

これでどのようなコードが誰によって埋め込まれているか確認できました。

Blob URLを使うことで、same-origin制約を無視してWorkerを初期化することができるようになります。

## まとめ

* ChromeのDeveloper Tools、PerformanceタブでWorkerなどがどのようなコード(関数)を実行しているかタイムラインで確認できる
* SafariのWeb development tools、Networkタブでリクエストおよびレスポンスを上書きして動作確認できる
* クラスインスタンスの初期化時に処理を挟む場合対象クラスをextendsするとよい
* Blob URLを用いたWorkerの初期化はよくある
自作アプリをX（旧Twitter）に共有するボタンを作成する。

初めまして未経験で園児ニア転職目指しています。りんころです。
今回ポートフォリオのアプリでX共有できるリンクを作成したのでその内容をまとめます。

## 結果

以下のコードでできました。以上。…だとアレなので解説します。

```html
<%= link_to  "https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}&text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE", target: "_blank", rel: "noopener noreferrer", title: "Xでシェアする" do %>
    <i class="fa-brands fa-x-twitter "></i>
<% end %>
```
- **link_to：ここはいつものlink_toメソッドです。**

```html
"https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}&text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE"
```

このリンクは、Xの新規ポストに飛んで『 https://style-love.net/ 』 リンクを表示させるページに飛ぶためのURLです。このURLについて詳しくみていきます。

```html
"https://twitter.com/share?url=#{CGI.escape('https://style-love.net/')}
```

上記の部分が、X（Twitter）共有ページに飛ぶリンクを表示しています。

また、上記の『share?url=#{CGI.escape('https://style-love.net/')}』 この部分で共有するアプリのリンクを表しています。


```html
text=#{CGI.escape('推し活コーデ投稿サービス')}&hashtags=Style-LOVE"
```
- **text=#{CGI.escape('推し活コーデ投稿サービス')}**

このtext部分で、共有ツイートの本文（**`推し活コーデ投稿サービス`** ）を自動で書き込みできます。

- **hashtags=Style-LOVE**

この部分は、名前の通り共有ツイートのハッシュタグを自動指定できます。

#### 最後に以下の部分について解説します。
```html
target: "_blank", rel: "noopener noreferrer", title: "Xでシェアする"
```

- **target: "_blank”**：これを書いておくことで、押したリンクを新しいタブで開けるよう設定させることができます。`'_blank'`は新しいウィンドウで開くことという意味らしい。
- **rel:"noopener noreferrer"**：rel属性に、”noopener”と、” noreferrer”二つの設定をつけています。

⭐️**noopener**

この設定をつけることで、新しく開いたタブから元のタブにアクセスできなくなるようにできます。つまり、リンク先が悪意あるサイトであったり、ハッキングされたサイト(実質悪意あるサイトの振る舞いをするサイト)だった場合に、リンク先から自分の見ていたリンク元ページが操作されるリスクがあるのを防いでいるということです。

（例えば、Xで知らない人の投稿で表示されたリンク先がハッキングサイトだった時、

自分のXのページが操作される可能性があるのを防いでいるみたいな感じ）

⭐️**noreferrer:**

- noreferrer設定を加えることで、新しいタブに遷移したときに、元のページのリンク情報（リファラ）を新しいタブに送信しないようにできます。
- つまり、noreferrer設定をつけると、自分が、どこのサイトから飛んできたのかわからないようにできます。

（例えば、自分のブログから外部サイト（例えば、ショッピングサイト）へのリンクを作ったとします。このとき、`rel="noreferrer"`を設定すると、そのリンクをクリックして新しいタブでショッピングサイトが開かれた時、ショッピングサイトは自分のブログのURLを知ることができなくなります。）

- title: "Xでシェアする"：この部分を設定すると、リンクにカーソルを当てたときに、「Xでシェアする」という文字が表示されます。

以上が、自分のアプリをXに共有するリンクの詳細です。

またアイコンの表示方法については以下の記事を参考にしました。

https://qiita.com/rei-dev99/items/d347bbe457520bfa8d61
DDJ-FLX4のPadでLチカ

PioneerDjのDDJ-FLX4でLチカを実装します
# 前提

https://qiita.com/t-yamanashi/items/38e4cd7124c4daac111f

でportmidiが設定済みとします

## DDJ-FLX4のPad LEDの仕様

まず、DDJ-FLX4のPadを光らせるMIDIの通信仕様を理解する必要があります
MIDIは3バイトで1つの命令になります
16進数で表現します

Padの場合

`デッキ番号`, `Pad番号`, `LEDのON/OFF`　の3バイトになります

## デッキ番号

デッキは２つあります

- デッキ1(左) `97`
- デッキ2(右) `99`

## Pad番号
上段左から
- Pad1 `00`
- Pad2 `01`
- Pad3 `02`
- Pad4 `03`

下段段左から
- Pad5 `04`
- Pad6 `05`
- Pad7 `06`
- Pad8 `07`

## LEDのON/OFF
- ON  `7F`
- OFF `00`

# 例
デッキ1(左) 
上段左の1つめのPadをLEDをON

`97`, `00`, `7F`

デッキ2(左) 
上段左の1つめのPadをLEDをOFF

`97`, `00`, `00`

## ElixirでPadのLチカをする
プログラムの仕様

- Pad1〜Pad8までLEDをON/OFF
- デッキ1,デッキ2は交互に光らせる

例
- デッキ1のPad1→デッキ2のPad1
- デッキ1のPad2→デッキ2のPad2
　　　　　　︙
- デッキ1のPad8→デッキ2のPad8

```elixir:lib/pad.ex
defmodule Pad do
  @moduledoc """
  Documentation for `pad`.
  """

  @led_on "7F"
  @led_of "00"

  @pad1 "00"
  @pad2 "01"
  @pad3 "02"
  @pad4 "03"
  @pad5 "04"
  @pad6 "05"
  @pad7 "06"
  @pad8 "07"

  @deck1 "97"
  @deck2 "99"

  @pad_list [@pad1, @pad2, @pad3, @pad4, @pad5, @pad6, @pad7, @pad8]

  def start() do
    {_, output} = PortMidi.open(:output, "DDJ-FLX4 MIDI 1")

    Enum.each(0..7, fn pad -> pad_led(output, pad) end)
    PortMidi.close(:output, output)
  end

  def pad_led(output, pad) do
    pad_hex = Enum.at(@pad_list, pad)
    pad_led(output, @deck1, pad_hex)
    pad_led(output, @deck2, pad_hex)
  end

  def pad_led(output, deck, pad) do
    [deck, pad, @led_on]
    |> send_midi(output)

    Process.sleep(500)

    [deck, pad, @led_of]
    |> send_midi(output)

    Process.sleep(100)
  end

  def send_midi(v, output) do
    Enum.map(v, fn x -> hex_to_dec(x) end)
    |> List.to_tuple()
    |> then(&PortMidi.write(output, &1))
  end

  def hex_to_dec(hex), do: String.to_integer(hex, 16)
end
```

実行
```bash
$ mix run --eval "Pad.start()"
```

## 動作結果

<iframe width="560" height="315" src="https://www.youtube.com/embed/xRpx27Uv7KI?si=doraIfsghwMRTnSc" 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>
数値を文字列表示するときに正・負・0で表記を変えたり、左揃えにしたり表示幅を指定する

# はじめに
入力した値をUI上に表示したり、コンソール画面に出力する際、数値型を文字列で表示するのにずっとstring.Format()やtoString()を使用していましたが、文字列補間が便利でした。

# 方法
文字列補完は、$マークを使って文字列に変数を埋め込む方法です。
```C#: console.css
int num1 = 123;
Console.WriteLine($"出力: この本の値段は{num1}円です。");  
// 出力: この本の値段は123円です。
```

[C# における文字列補間](https://learn.microsoft.com/ja-jp/dotnet/csharp/tutorials/string-interpolation)によると、文字列補完では以下の通り、書式設定された式の結果の最小フィールド幅と配置を指定したり、フォーマットを指定できます。
```C#
{<interpolationExpression>,<alignment>:<formatString>}
```
- interpolationExpression: 埋め込む値
- alignment: フィールド幅。負の数の場合は左寄せ。フィールド幅が埋め込む値より大きければ空白で埋める。
- formatString: 数値のフォーマット指定。正;負;0

例えば、幅12で左揃え、埋め込み値が正の時はそのまま、負の時は頭に▼つき、0の時はカッコ囲いとする場合は以下のようになります。
```C#: example
int num1 = 123;
int num2 = -456;
int num3 = 0;

Console.WriteLine($出力1: "|{num1,-12:#;▼#;(0)}|");
Console.WriteLine($出力2: "|{num2,-12:#;▼#;(0)}|");
Console.WriteLine($出力3: "|{num3,-12:#;▼#;(0)}|");

// 出力1: |123         |
// 出力2: |▼456        |
// 出力3: |(0)         |
```


# 参考資料
- [C# における文字列補間](https://learn.microsoft.com/ja-jp/dotnet/csharp/tutorials/string-interpolation)
- [【C#】string.Format() をやめて $"{}"（文字列補間式）を使う](https://qiita.com/Nossa/items/c2226232b31d7665267f)
- [[C#] 文字列補間による値の整形](https://qiita.com/laughter/items/b49e5bc1b18ea370b94d)
オープンソースの Lambda Layer をエクスポートして自アカウントに複製する

# はじめに

普段、東京リージョン(ap-northeast-1)で運用している Lambda 関数があり、その中でオープンソースの Lambda Layer を利用しています。
<!-- BCP 対策の一環としてディザスタリカバリ環境を -->あるプロジェクトで大阪リージョン(ap-northeast-3)にも同じ Lambda が必要となり構築する際、大阪リージョンでは一部の Lambda Layer がサポートされていないケースがありました。そのため、やむを得ず東京リージョンから該当の Layer をエクスポートし、自アカウントの大阪リージョンに新たに作成して対応しました。
この対応について備忘録として記事にまとめておきます。

# 手順

:::note warn
必ず事前にライセンスと利用規約などを読み、複製することが問題無いことを確認して下さい。
:::

## 1. 対象 Layer & バージョンの URL を取得
まず、以下の AWS CLI コマンドで対象 Layer のソースとなる S3 バケットの署名付き URL を取得しました。
[AWS CLI - get-layer-version-by-arn](https://docs.aws.amazon.com/cli/latest/reference/lambda/get-layer-version-by-arn.html)
```bash
aws lambda get-layer-version-by-arn \
 --arn arn:aws:lambda:ap-northeast-1:123456789012:layer:[LayerName]:[Version]
```
`Content.Location` の値が URL になります。

## 2. Layer の実体をローカルへダウンロード
1 で取得した URL から実体一式を curl でダウンロードしました。
```bash
curl -o test-lambda-layer.zip "https://awslambda-ap-ne-1-layers.s3.ap-northeast-1.amazonaws.com/snapshots/123456789012/[LayerName]-999abc...(省略)"
```

## 3. S3 にアップロード
ダウンロードしたファイルは、そのままではサイズが大きく(50MB超過) Layer に登録出来なかったので一旦任意の S3 バケットへアップロードしました
<!--
- また、アップロード前にダウンロードしたファイルに拡張子 `.zip` が付いていなかったので付与しました (Layer 作成時に拡張子が無いと使えない)
-->

## 4. Lambda Layer を作成
AWS マネジメントコンソールで上記 S3 ファイルの URL を指定して Layer を作成しました。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080620/779f7e92-eb62-171a-1646-6e55fc160661.png)

出来ました！
これで Lambda 内で同じように使用出来ます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2080620/ce679d64-fa0e-4051-5416-e86fdbff5e4a.png)

# Ref
- [AWS CLI - get-layer-version-by-arn](https://docs.aws.amazon.com/cli/latest/reference/lambda/get-layer-version-by-arn.html)


# おわりに

思ったよりも簡単に Layer を複製出来ました。
使用する Layer のバージョンを更新する際には、同様な手順が必要になるなど課題はありますが、ひとまず複製がしたい場合にはこの手順が使えそうです。
Azure AIのtsuzumiを使ってみた

## はじめに

Azureで使えるLLMモデルに、国産LLM(SLM?)であるtsuzumiが加わりました。
Azure AI Studio(Azure AI Foundryになったようです)で、モデルをデプロイすることで、Azure OpenAIやLlama等の他のモデルと同じようにAPIで呼び出して使えたりします。

[公式ガイド](https://www.nttdata.com/jp/ja/lineup/tsuzumi/)がありました。
[使い方](https://www.nttdata.com/jp/ja/-/media/nttdatajapan/files/lineup/tsuzumi/tsuzumionazuremaasv10-2.pdf?rev=9b5e30a9378a41c183a914b76b5153be)が詳しく説明されています。

## モデルデプロイ

AI Studioのリソースを作ってプロジェクトを作ってデプロイするだけですが、以下がデプロイに必要となる条件のようです。

- リソースグループ、AI Studioのリージョンを`eastus2`にする
- 事前にプロジェクトを作成し、Marketplaceからtsuzumiをサブスクライブする

1. リージョンが `eastus2`のリソースグループを用意します。
   ![resource_group.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/3aee3329-62e1-2b92-a323-b91bce3e811e.jpeg)
2. Marketplaceで検索して、AI Studioを作成します。リージョンは `eastus2`にします。
   ![ai_studio_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/b106451e-04ea-6b92-6071-bca3bcc15870.jpeg)

3. AI Studioができたら、そこにプロジェクトというものを作ります。プロジェクトにモデルをデプロイできます。
   ![project.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/ae68e197-945b-9266-632a-f665a4229e7f.jpeg)


4. モデルカタログというところにtsuzumiがいますので、デプロイしようとしてみます。

   ①条件で検索できます。
   ![catalog_2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/807b7183-1689-63b7-4175-114f10fd8ed8.jpeg)

   ②デプロイしようとします
   ![catalog_3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/96363292-3b51-dad2-157e-ce08f5f76f6f.jpeg)

   ③できません!
   ![catalog_4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/b610f5e1-4092-9c0d-5f65-4fb4f2e6cf7e.jpeg)

5. 気を取り直してMarketplaceからtsuzumiを探します。リソースグループからリソースの作成を試みるとMarketplaceに移動できます。
購読する(サブスクライブ)を選んでAI Studioに遷移します。
  ![marketplace_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/839eef6b-8791-19e5-669e-24d53ccb176f.jpeg)
  ![marketplace_2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/3da77851-9aab-1309-4faa-46cb870ad003.jpeg)

6. デプロイを選ぶとプロジェクト選択になるので、先ほど作ったプロジェクトを選びます。
   ![deploy_1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/26cf0aad-d85a-090b-cb7e-229161303cd4.jpeg)
   ![deploy_2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/3bf8f030-b019-ff3e-37c8-b7896573df0d.jpeg)

7. デプロイします。Content Filterというのをつけると良い子には有害な言葉を防いでくれます。是非つけましょう。
   ![deploy_3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/b6dec0ad-a073-d35a-a3de-bfd913da3adb.jpeg)

8. デプロイが終わるとこんな画面になります。
   ![deploy_4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/ab98f8af-9570-c160-649b-7ffc28746839.jpeg)

9. プレイグラウンドという画面に行くとチャットできます。デプロイできたことを一緒に喜んでくれます。
    ![deploy_5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3781545/bdd8f27a-2853-4a43-c76e-0c532a45eb04.jpeg)


## まとめ

デプロイは簡単ですが、リージョンが間違っていたり、同じプロジェクトでデプロイ済みのモデルがあったり、サブスクライブができていないと失敗したりします。
失敗したときはこれらをチェックしてみましょう。
デプロイができれば、Python等でAPIで呼び出して、Azure OpenAIと同じように使うことができます。
くそアプリ リリース！

![kuso1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31758/941e7c0e-c85e-e1a3-bd93-f32d7bd99be3.png)

https://capp.mz4u.net/kuso/

もう、このアドカレのために作ってリリースしました！

[いらすとや](https://www.irasutoya.com) さんの画像を利用させていただきました！

## 機能

![IMG_3595.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31758/92f70b84-b680-fb46-459c-e289827001c3.png)

- 「出す！」ボタンを押すと、うんちが出ます！
- 音が鳴ります。**適度な音量にボリュームを上げて**お楽しみください！
- 一緒にアクセスしてる人がいると、うんちを届けられます！
- 届けたうんちと、届いたうんちの数をカウントしてます！（相当どうでもいい）
- 何人同時アクセスしてるか？だけわかります。（誰がアクセスしてるか？まではわかりません！プライバシーもバッチリ！）

という、実は超絶斬新なコミュニケーションアプリです！（と言わないと、気づいてもらえない！）

ぜひ、スマホでアクセスしてお子様とうんちの投げ合いで遊んでください！！！

現場からは以上です！

https://capp.mz4u.net/kuso/

## 宣伝

生成AIで生成した画像からサウンドコラージュを無限に生成するアプリを作ってます！

[[RG] Rhythm Generator](https://capp.mz4u.net/rg/)
【初心者向け】SQL文 THENについて

<!--

## 技術記事のタイトル

最も伝えたいこと。
簡潔かつ分かりやすく過不足ないタイトルを考えましょう。

### 【 】(墨付き括弧)

- 【言語やサービス】
    - 例1.【Python】すぐにpytestで単体テストを実行するまでの手順
- 【言いたいこと】
    - 例1.【必見】Objectはどこに消えた？
- 【前提】
    - 例1.【個人開発】○○を○○できるサービスをリリースしました
    - 例2.【初心者向け】Reactとはそもそも何なのか説明します
- 【続き物の番号】
    - 例1.【2024年版】新入社員向け研修資料を公開します
    - 例2.【環境構築編】Windows11でPythonを実行するまで

【前提】詳しいタイトル【言語やサービス】のように、複数を併用するパターンもあります。

-->

## はじめに
<!--
何についての記事なのか、誰に向けた記事なのかを簡単に説明しましょう。
-->
　IT工程でテストを実施している際に、想定結果と実施結果が違う、、となり
 久々にSQL文を読んだところCASE式とTHENの使い方を忘れていたので忘備録として残しておきます。


### この記事でわかる・できること
<!--
読んだら何がわかるようになるのか、何ができるようになるのかを書きましょう。
-->

- SQL文でのCASE式とTHENについて
- （参考までに）実務ではどんな時に使われているのか


### この記事の対象者
<!--
誰に向けた記事なのかを明確にすることで読者に選んでもらいましょう。
-->

- 初心者






## CASE式とTHENの使い方
<!--
章全体の要約や、何について書くのかをここに書きます。
記事が長い時や資料として作るときは番号を振ることをおすすめします。
章を増やすときは章から項までをコピーしてください。
-->
早速ですが結論です。
・THENはCASE式と一緒に使い、条件が真の時に対応する結果を返します。
 　今回の場合は、「scoreが90以上の場合Aを返す」という感じです。

```SQL:使用例

    CASE 
        WHEN score>=90 THEN'A'
        WHEN score>=70 THEN'B'
        WHEN score>=40 THEN'C'

         ELSE 'F'
    
```



### 
<!--
記事の主要な部分です。ここに思い思いの内容を書いていってください。

画像やGIFがあると分かりやすいです。
画像があるとUIが変わったとしても読者がアタリをつけて対応しやすくなります。

コードを記載する場合は必ずコードブロックを使いましょう。
バッククオート3つで囲んでください。
```python:表示名

    print('Hello World')
    
```
-->
#### 具体例
　私が業務上遭遇した場面だと、２つのテーブル（今日の分の情報が入ってるテーブルと前の日の情報が入っているテーブル）の差分を抽出する動きの中で以下のようにCASE式、THENが使われていました。
 ・差分がある＝今日のデータと前日のデータが異なる場合、今日の分のデータを取得。
 ・差分がない＝今日のデータと前日のデータが同じ場合、NULLとなる。
 
<!--
より詳細な内容を書いたり、事例を挙げたりするときに使います。
- 節の内容の列挙
- 節の補足事項
- 例外
-->





## おわりに
<!--
どちらかを書きます。あってもなくても良いです。
-->
私が勉強し始めた時は、実際にどう使っていくのかイメージできていなかったので参考になればと思います・・・テスト工程でもコードを読んで判断する場合があるので言語の理解を深めていくことが必要ですね。
Jinja2 変数内を再帰的に render するフィルタ処理

# 概要

- jinja2 を使って文字列をレンダリングする際に、テンプレートに対して渡したデータ自体が jinja2 のテンプレート形式であるときに、その内容もテンプレートとしてレンダリングを行いたい。
    - 例
        - テンプレート: `Hello, {{ sample_var }}`
        - データ: `{"sample_var": "{{ nested_var }}!", "nested_var": "world"}`
        - 期待する出力: "Hello, world!"
- 影響範囲を限定するため、jinja2 の filter で実現する。
- ※ユーザが入力するデータに対して使用する場合にはセキュリティ上の注意が必要です。xss (クロスサイトスクリプティング), SQLインジェクション等の脆弱性になることが考えられるため。
    - 以下の例では、管理者が作成するマスタデータに対して行う処理とします。

# 実装

filter の実装

```python
from jinja2 import Template, Environment, FileSystemLoader, pass_context

@pass_context
def recursive_render(context, value, max_iterations=10, **kwargs):
    template = Template(value)
    result = template.render(**context, **kwargs)

    for _ in range(max_iterations):
        new_result = Template(result).render(**context, **kwargs)
        if new_result == result:
            break
        result = new_result

    return result
```

# 使用方法

## サンプル

```python
env = Environment(loader=FileSystemLoader("."))
env.filters['recursive_render'] = recursive_render

template_str = """
{{ var1 | recursive_render }} is {{ var2 }}
"""

template = env.from_string(template_str)
context = {
    "var1": "{{ nested_var }}",
    "var2": "awesome",
    "nested_var": "Python"
}

output = template.render(**context)
print(output)
```

出力
```
Python is awesome
```

### テンプレート内で定義される変数は filter に引数として渡す

for ループなどによって、テンプレート内で定義される変数については、filter 使用時に引数として渡す必要がある。
`@pass_context` デコレータによって `context` 変数に渡される内容は、`render()` の引数のみであるため。

### 失敗例
```python
template_str = """\
{% for member in members %}
{{ member.name }}
{{ member.introduction | recursive_render }}
{% endfor %}
"""

template = env.from_string(template_str)
context = {
    "members": [
        {"name": "テスト1", "introduction": "はじめまして、{{ member.name }} です。"},
        {"name": "テスト2", "introduction": "はじめまして、{{ member.name }} です。"},
    ]
}

output = template.render(**context)
print(output)
```

-> `jinja2.exceptions.UndefinedError: 'member' is undefined` 例外が発生

### 成功例 (recursive_render フィルタに引数を渡すように変更)

```python
template_str = """\
{% for member in members %}
{{ member.name }}
{{ member.introduction | recursive_render(member=member) }}
{% endfor %}
"""

template = env.from_string(template_str)
context = {
    "members": [
        {"name": "テスト1", "introduction": "はじめまして、{{ member.name }} です。"},
        {"name": "テスト2", "introduction": "はじめまして、{{ member.name }} です。"},
    ]
}

output = template.render(**context)
print(output)
```

出力
```
テスト1
はじめまして、テスト1 です。

テスト2
はじめまして、テスト2 です。
```

# 最後に

概要に記載しましたが改めて、ユーザが入力するデータに対して使用する際にはセキュリティ上の注意が必要です。
少なくとも上記の実装では context で渡されるデータに、recursive_render する変数の中身がアクセスできてしまいます。その際には、`@pass_context` デコレータを外しアクセスできる変数を制限するなどの対応が必要になると考えられます。
CustomtkinterでMVC

カスタム的インターを使って、ボタンに対してコントローラーで関数を設定する方法とラメを使って、ボタンの動きを複雑にして持たせることができる方法を記述します

ラムダ使うって便利、、。

```
import customtkinter as ctk

# モデルクラス：データの管理を行う
class Model:
    def __init__(self):
        # データを格納する変数を初期化
        self.data = ""

    # データを設定するメソッド
    def set_data(self, data):
        self.data = data

    # データを取得するメソッド
    def get_data(self):
        return self.data

# ビュークラス：ユーザーインターフェースを構築する
class View(ctk.CTkFrame):
    def __init__(self, master):
        super().__init__(master)
        # 実行ボタンを作成し、配置
        self.button = ctk.CTkButton(self, text="実行")
        self.button.pack(pady=10)
        # 出力ラベルを作成し、配置
        self.label = ctk.CTkLabel(self, text="")
        self.label.pack(pady=10)

    # ボタンにコマンドを設定するメソッド
    def set_button_command(self, command):
        self.button.configure(command=command)

    # ラベルに出力テキストを設定するメソッド
    def set_output(self, text):
        self.label.configure(text=text)

# コントローラークラス：モデルとビューの仲介役
class Controller:
    def __init__(self, model, view):
        self.model = model
        self.view = view
        # ボタンがクリックされたときに実行される関数を設定
        self.view.set_button_command(self.execute_function)

    # ボタンがクリックされたときに呼び出される関数
    def execute_function(self):
        # 条件に基づいてタプルを生成し、結果をモデルに保存
        result = (lambda: ("A", ("B", "C") if True else print))()
        self.model.set_data(str(result))
        # モデルからデータを取得してビューに表示
        self.view.set_output(f"結果: {self.model.get_data()}")

# アプリケーションクラス：アプリ全体の設定と起動を行う
class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        # ウィンドウタイトルとサイズを設定
        self.title("MVC CustomTkinter App")
        self.geometry("300x200")

        # モデル、ビュー、コントローラーのインスタンスを作成
        model = Model()
        view = View(self)
        controller = Controller(model, view)
        
        # ビューをウィンドウ内に配置
        view.pack(expand=True, fill="both")

# メインプログラム：アプリケーションの起動処理
if __name__ == "__main__":
    # 外観モードとカラーテーマの設定
    ctk.set_appearance_mode("dark")
    ctk.set_default_color_theme("blue")
    
    # アプリケーションのインスタンスを作成して実行
    app = App()
    app.mainloop()
```