OmniAICreator/Qiita-1.07M huggingface dataset:
Office ScriptsからのfetchでCORSエラーが発生する場合の対処

# 注意：最初に書いてた方法ではうまく行かなくなりました

2025年5月9日頃に突然、またCORSエラーが起きるようになっちゃいました。
調べてみると、Office ScriptsからのリクエストヘッダーのOriginがこうなっちゃってました。
```test
"Origin": "null"
```

こうなると、残念ながらバックエンド側のレスポンスヘッダーでは
全オリジンを許可してあげるしかありません。

```text:正しいヘッダー
"Access-Control-Allow-Origin": "*"
```

ちょっと嫌なんですけど、動かないものは仕方ないっすねー。。。
おそらくMS側で何らかの理由で仕様変更されたものと思われます。
詳しい方おられたら教えてください。

# 以下、一応文面は残しておきますが古い記事です

## 結論

バックエンド側のレスポンスヘッダーに以下を設定すればOK！
```text:正しいヘッダー
"Access-Control-Allow-Origin": "https://*.officescripts.microsoftusercontent.com"
```

Web版のExcelを使っている場合は、ブラウザで開いているURLと同じオリジン↓に設定したくなりますが、これでは動きません。
```text:誤ったヘッダー
"Access-Control-Allow-Origin": "https://*.sharepoint.com/"
```

どうやら`<iframe>`タグで別のオリジンのHTMLが多重に呼ばれており、最深部が`officescripts.microsoftusercontent.com`になっているようです。

## 感想
Google Apps Script(GAS)とかなり似ているOfficeスクリプトですが、GASはサーバーサイド、Officeスクリプトはクライアントサイドで動いているようで、GASで動いているロジックをOfficeスクリプトに移植とかは、それなりにハマる部分が多いかもしれません。
公式ドキュメントでもCORSまわりの解説は見つからなかったし、まだまだ発展途上でユーザー人口も少なそうですねぇ。けっこう便利なので、もっと普及してほしいです。

ではまた！

参考: https://answers.microsoft.com/ja-jp/msoffice/forum/all/office%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97/4215ea5d-1e11-4917-876e-0bd0c358ce04
PLaMo-100Bのβ版トライアルAPIを用いてデモ用アプリを作ってみた

## はじめに
2024年2月から株式会社Preferred Network（以下、PFN）の子会社である株式会社Preferred Elements（以下、PFE）にて開発されているPLaMoという言語モデルのβ版トライアルAPIの発行が2024年8月9日から順次発行が開始されました[^1]。この記事では、この言語モデルおよび、β版トライアルAPIを利用して作成したデモ用アプリについて簡単にご紹介いたします。アプリについては以下のリンクからお試しいただけます。ただし、β版トライアルAPIの利用自体は期間限定であるため、期間外はご利用いただけなくなります。ご了承ください。
[^1]: [PFEが開発する大規模言語モデルPLaMo β版の無料トライアルの申込受付を開始](https://www.preferred.jp/ja/news/pr20240807/)

https://plamo100b-demo.streamlit.app/

また、作成したソースコードについてはGitHubにて公開しています。興味のある方は以下のリンクからご覧ください。

https://github.com/C-Naoki/PLaMo-100B

## PLaMo-100Bとは？
PLaMo-100Bは、PFNが2024年2月から開発している大規模言語モデルであり、パラメータの規模としては1000億にも及びます。このモデルの事前学習自体は、5月に完了しており、そして、2024年8月に事後学習も完了し、トライアルAPIの提供が開始される運びとなっています。このモデルの開発自体はなんと、データ収集からモデルの開発まで全てPFN独自に行われております。加えて、性能についても申し分なく、Jasterという日本語性能評価ベンチマークでGPT-4を超え、日本固有の知識を問うRakuda BenchmarkでもGPT-4の性能を超えることが確認されています[^2]。
[^2]: [1,000億パラメータの独自LLM「PLaMo-100B」の事後学習が完了](https://tech.preferred.jp/ja/blog/plamo-100b-post-training/)

PLaMo-100Bの開発プロジェクトは、経済産業省が主導する国内の生成AIの開発力を強化するためのプロジェクト「GENIAC（Generative AI Accelerator Challenge）」に採択され、計算資源の提供支援を受けているという背景もあり、日本の生成AIの研究開発をリードする存在として注目されています。

### ベンチマークを用いた評価実験
PFNのブログにて公開されている実験を簡易的に紹介いたします。詳しくは、[PFNのブログ](https://tech.preferred.jp/ja/blog/plamo-100b-post-training/)をご覧ください。

以下の表は、Jasterという日本語の言語理解能力を測定するベンチマークを用いた実験結果です。
![](https://raw.githubusercontent.com/C-Naoki/zenn-archive/main/images/plamo100b-demo/jaster.png)

このように、PLaMo-100B-Instruct（事後学習済みのPLaMo-100B）は全体的にGPT-4モデルを上回る性能を示しています。ただし、MR (Mathematical Reasoning) カテゴリのデータに対しては、GPT-4モデルを大きく下回る性能となってしまっているようです。

2024年10月15日追記：数学推論タスクの精度向上に関する検討がなされているようです[^3]。直接的にPLaMo-100Bの精度向上のための取り組みではないようですが、今後の性能向上に期待が持てる結果となっています。
[^3]: [LLMにおける合成データセットによる数学推論タスクの精度向上の検討](https://tech.preferred.jp/ja/blog/llm-synthetic-dataset-for-math/)

また、過去にPFNが開発していた言語モデルであるPLaMo-13B[^4]もあるのですが、このモデルとの比較実験の結果が見受けられませんでした。どの程度性能が向上しているのかどうか確認してみたいところです。加えて、表中のGPT-4はGPT-4oを指しているのかどうかに関する言及も見つけることができませんでいた。2024年8月現在、最新手法といえば、Gemini-1.5-Proをはじめとして、GPT-4oやClaude 3.5 Sonetなどが挙げられる[^5]と思いますが、どの程度の性能差なのか純粋に気になります。
[^4]: [PLaMo-13Bを公開しました](https://tech.preferred.jp/ja/blog/llm-plamo/)
[^5]: [LMSYS Chatbot Arena Leaderboard](https://chat.lmsys.org/?leaderboard)

## 作成したデモ用アプリについて
リンクを踏んでいただきますと、以下のようなアプリが表示されます。アプリの開発自体は、PythonのStreamlitというライブラリを使用しています。
![](https://raw.githubusercontent.com/C-Naoki/zenn-archive/main/images/plamo100b-demo/app.png)

### アプリの全体像
機能としては以下に記すような非常に簡易的なもののみとなっています。
- 入力としては、システムメッセージおよびユーザーメッセージを入力できます。
  - システムメッセージとは、チャットボット側に役割を与えることが可能です。
- そして、メッセージの履歴については一時的に保持されるようになっており、それをCSV形式でエクスポートすることも可能です。

メッセージの履歴については以下のように表示されます。画像中の「会話の履歴をCSVでエクスポート」ボタンを押すことで、CSV形式でエクスポートすることが可能です。
![](https://raw.githubusercontent.com/C-Naoki/zenn-archive/main/images/plamo100b-demo/history.png)


## まとめ
PLaMo-100BというPFNが開発した大規模言語モデルについての簡単な説明および評価実験の確認を行いました。日本発祥の強力な言語モデルが生まれたことは非常に喜ばしく、今後の展望が非常に興味深いです。また、PLaMo-100Bのβ版トライアルAPIを利用して、デモ用アプリを作成しました。しかし、まだまだ開発途中ではありますので、今後のアップデートをお待ちください。また、このデモ用アプリについてのフィードバックや要望があれば、ぜひお知らせください。
Vercel v0とは

# はじめに

この記事では、v0についての基礎知識から、実際に使い始めるまでの具体的な手順を紹介します。

# v0とは

v0は、WebページのUIデザインやコンポーネントを自動生成してくれるAIツールです。
自然言語を使って、簡単にデザインを作成でき、次のような特徴を持っています。

### v0の特徴
- **ReactおよびNext.jsとの高い互換性**
    **React**や**Next.js**と簡単に統合でき、開発がスムーズになります
    <br>
- **UIのカスタマイズ**
    自動生成されたUIは、細かいカスタマイズも簡単に行えます
    <br>
- **Shadcn UIとTailwind CSSに対応**
    生成されるコンポーネントは、**Shadcn UI**と**Tailwind CSS**という人気のライブラリに対応しているため、カスタマイズ性や拡張性が高いです
    <br>
- **画像生成**
    プロンプトに画像を含めることで、より具体的なデザインの指示が可能です
    <br>
- **CLIサポート**
    コマンドラインツールが提供されており、プロジェクトにスムーズに導入できます。CLIでの操作により、コードベースでの管理が容易です
    <br>

また、Vercel社が提供しているため、同社の他のプロダクトとの相性も抜群です。v0は特に開発者向けに設計されています。

:::note warn
 2024/09/29: 現在**v0**では**React**のみをサポートしています。
:::


# 実行手順 (Webページ作成)

### 1\. **アカウント作成**

まず、公式サイトからv0のアカウントを作成します。

:::note info
[v0公式サイト](https://v0.dev/?from=chat)
:::

### 2\. **自然言語からのUI作成**

アカウント作成後、自然言語を使ってプロンプトを入力し、簡単にUIを生成します。UI生成に必要な詳細な説明やテンプレートも用意されています。

### 3\. **Node.jsのインストール**

v0のプロジェクトを構築するために、まずNode.jsをインストールします。
MacOsの場合

```brew install node```

### 4\. **新規プロジェクトの作成** 
次に、プロジェクトの作成を行います。以下のコマンドでNext.jsのプロジェクトを作成します。

```npx create-next-app@latest --typescript --tailwind --eslint```

### 5\. **v0の初期化**

プロジェクトディレクトリに移動し、以下のコマンドでv0を初期化します。

```npx v0@latest init```

### 6\. **コンポーネントをインポート**  

v0で生成されたコンポーネントをプロジェクトにインポートします。CLIで以下部分のコードを実行し、コンポーネントを取り込むことができます![qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3814349/3c8ccd2d-6f19-baf8-263c-d3d13aec5ac7.png)


:::note info
[公式リファレンス](https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app)

:::


# まとめ

上記のようにv0を使うとこにより、機能的なUIコンポーネントをデザインスキルがない人でも簡単に作れます。
Mobianを古いPCに入れてみたメモ

# はじめに

HP Pavilion x360 11-k128tu(2015年10月発売) という、ノートPCでもタブレットのように利用できるPCを作業中の音楽垂れ流し用にしようと考えていました。
WIndowsでもいいんですが、重いのでLinuxを入れたい。
タッチパネルなので、タブレットとして使えるOSがいいなぁと思い、Mobianを選択しました。

スペックは以下の通りかなり貧弱
|項目|仕様|
|--|--|
|Celeron|N3050|
|メモリ|4GB|
|HDD|500GB|
|モニタ|1366×768|

もし、記事が役に立ったりしたらコメントやいいねしてくれると嬉しいです。

# 導入メモ

インストール後のメモなので、詳しくは描けないですが、参考にしたサイトを見ながらやればできます。

## イメージのダウンロード

[mobian公式](https://mobian-project.org/) でイメージをダウンロードします。

amd64の先にある mobian-amd64-nonfree-phosh-12.0.img.gz または mobian-amd64-phosh-12.0.img.gz をダウンロードします。

私は mobian-amd64-phosh-12.0.img.gz をダウンロードしましたが、WiFiドライバが入っておらず、nofreeのリポジトリからダウンロードして入れたこともあり、 mobian-amd64-nonfree-phosh-12.0.img.gz をダウンロードするのが良いと思います。

## 必要なもの

- PC
- ライブイメージ用のUDBメモリ(私は32GBを使いました)
- Mobianのダウンロードしたイメージを入れておくUSBメモリまたはSDカード

## 導入

[モバイル向けLinuxディストリビューションのMobianをWidownsタブレットで試す](https://speakerdeck.com/matoken/try-mobian)を参考に作業をしていきましょう。

まず、ライブイメージ用USBメモリを作成します。
ダウンロードしたイメージ書き込みます。
私はWindowsなので、 [Rufus](https://rufus.ie/ja/) でUSBに書き込みました。
LinuxやMacの場合は [モバイル向けLinuxディストリビューションのMobianをWidownsタブレットで試す](https://speakerdeck.com/matoken/try-mobian) なるようにddコマンドで書き込めばよいかと思います。

インストール対象のPCでUSBからの起動できるように設定。
あと、SecureBootも無効にします。

BIOSの作業が終わったら、USBメモリをPCに差し込み、起動します。
デフォルトユーザーmobianのパスワードは1234になります。

起動後、ターミナルを起動します。
ここで注意が必要なのは、書き込み先のディスクを認識しておくこと。
lsblkコマンドでPCのストレージを確認します。
私の場合、sdaがHDDでした。

ちなみに、mmcblk0はSDカードなどの外部ストレージのようなので注意

確認出来たらイメージのファイルの入っているUSBメモリを刺します。
USBメモリの場所まで移動して以下のコマンドを実行します。
(フルパスなら移動する必要はないですが)
of=/dev/sdaのとところは環境に合わせて変更してください。
```
zcat mobian-amd64-nonfree-phosh-12.0.img.gz | sudo dd of=/dev/sda bs=16M oflag=direct status=progress 12
```

導入するPC次第だとは思いますが、結構時間がかかるので、待ちます。
書き込みが終わったら、PCをシャットダウンし、USBメモリを取り外してPCを起動します。

無事起動すればOKです。


## 導入後に行うこと
導入直後は日本語表示になっていません。

Settingsを起動し、Region & Language を選択。
Languageを日本語に変更。
Formatsも日本に変更。
画面上部に Language and format will be changed after next loginのメッセージ共にLogouボタンがあるのでそれをクリックして一度ログアウトします。

![P_20241005_020630.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/75d38285-430a-469f-d923-83b37f249581.jpeg)



その後ログインすると日本語になっています。

## WiFiが使えない場合
WiFiが使えない場合、一度有線LANに接続し、ドライバをコマンドで入れましょう。
(おそらくダウンロードして、USBメモリなどに保存すればオフラインでもできると思いますがやったことない)

[Debianで無線LANに接続する](https://note.kurodigi.com/post-0-16/)にあるように、non-freeのリポジトリを/etc/apt/sources.listに追加し、その後、WiFiのドライバをaptコマンドで導入します。

私の場合、以下のコマンドで導入し、解決しました。
```
sudo apt-get install firmware-iwlwifi
```

## 日本語入力
[How to install Japanese IME (Google free)](https://wiki.debian.org/Mobian/How-to#How_to_install_Japanese_IME_.28Google_free.29)
を参考に導入すれば行けます。
もしくはソフトウェアを起動し、入力ソースからAmthyをインストールします。

ただ、日本語入力が時々できなくなったりする事象が発生したので、安定してないかも？

## その他注意点
導入するアプリによってはタイトルバーが出てこなかったりウィンドウのリサイズがちょっと面倒だったりします。
いくつかメディアプレイヤーをインストールしましたが、ウィンドウの移動もできないものがありました。
そのため、デフォルトで用意されたアプリを使うのが無難な使い方になるのかなと思います。

HP Pavilion x360 11-k128tuだとさすがにやれることが限られます・・・

# 最後に
古いPCでも、音楽再生程度なら十分使えます。
ただ、Webサイトの読み込みは遅いので、ブラウジングにはあまり向かないと思います。
この辺はスペック次第なので、それなりのPCだっったらストレスなく動くのではないかと思います。

あと、Mobianで使える軽いメディアプレイヤーないかなぁ
musicディレクトリの音声ファイルが一覧化されてアルバム単位でソートかけれるようなのがいいなぁ
プレイリスト作成面倒なので・・・
(Elisaに期待していた重くて使い物にならなかった・・・)
GLIBCXX_3.4.26 not foundと言われたraspberry piでもできるだけ新しいnodejsが使いたい

raspberrypi1(Raspberry Pi Model B Rev 2)がある。

普通にインストールしたら動かない

> libstdc++.so.6: version `GLIBCXX_3.4.26' not found (required by node)


https://github.com/homebridge/homebridge/issues/3453

## 方針

[症状](https://github.com/homebridge/homebridge/issues/3453#issue-1960138201)によるとv18.18.2までは正常に動いている。

そこで動く最終版であろうv18.18.2をインストールする
でも普通にインストールするとめちゃめちゃ古い

## nvm使ってみる

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install v18.18
```

けれどくそ遅いしエラーになるし解決策にならない


## 非公式のビルドを導入する

ここに非公式のビルドがある

https://unofficial-builds.nodejs.org/download/release

これを使ったらいけた

ちなみに[公式のリポジトリはここ](https://nodejs.org/dist/v18.18.2/)
もちろんこのなかにはarmv6l用のビルドはありません


```bash
curl -L https://unofficial-builds.nodejs.org/download/release/v18.18.2/node-v18.18.2-linux-armv6l.tar.gz -o node.tar.gz
tar xf node.tar.gz
rm node.tar.gz
sudo mv node-v18.18.2-linux-armv6l /usr/local/node
echo 'export PATH=$PATH:/usr/local/node/bin' >> ~/.bashrc
source ~/.bashrc
```


## 結果
今の所エラーは起きていないからこれでよし！
「良いコード/悪いコードで学ぶ設計入門」を読んで考えるUnrealEngine

# はじめに
UnrealEngineでの良い設計を学ぶために、以下の本を読みました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3115955/cf6eb82d-af86-be88-5657-c00956a82817.png)

[良いコード/悪いコードで学ぶ設計入門](https://amzn.asia/d/a9TFRYN)

UnrealEngine5でのBPオンリー開発勢でも役に立ちそうな学びを自分用にメモしました。
せっかくなので記事にして共有します。
未完成ですが、読み進めつつ足していく予定です。

# 対象者
この記事は下記のような人を対象にしています。

- 駆け出しUnrealEngineエンジニア
- 自分でも全体像が見えないような設計になっちゃうのをなんとかしたい人


# 学びMEMO

## 第２章　設計の初歩
### 変数名・関数名・クラス名は省略せずにわかりやすくする
改めて気を付けような。isGoodみたいなBool変数作っちゃダメだよ。

### 変数を使いまわさない、目的ごとの変数を用意する
ちゃんとつけた名前の役割だけを担うように！変数がいっぱい生まれるのは止む無し！

### 意味のあるまとまりで関数にする
Keep it simple, stupid!! 分けすぎてるくらいが丁度いい！

### 関係するデータとロジックをクラスにまとめる
独立した機能ごとにActorComponentやらGASを作ろう。
データクラスは避ける。

## 第３章　クラス設計 ～すべてにつながる設計の基盤～
### クラスが単体で機能するようにする
そして、そのクラスをテストする用のクラスを作っておくと便利だよって最近教わりました。

https://hogetatu.hatenablog.com/entry/2017/12/11/000638#:~:text=%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%97%E3%81%9F%E3%81%84%20Actor%EF%BC%88%E4%BB%A5%E9%99%8D%20HogeActor%20%E3%81%A8%E5%91%BC%E3%81%B3%E3%81%BE%E3%81%99%EF%BC%89%E3%82%92%20ChildActor%20%E3%81%A8%E3%81%97%E3%81%A6%E4%BF%9D%E6%9C%89%E3%81%99%E3%82%8B%E3%80%81%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E5%B0%82%E7%94%A8%E3%81%AE%20Actor%EF%BC%88%E4%BB%A5%E9%99%8D%20DebugHogeActor%20%E3%81%A8%E5%91%BC%E3%81%B3%E3%81%BE%E3%81%99%EF%BC%89%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E6%9C%89%E5%8A%B9%E3%81%A7%E3%81%99

### Componentにガード節を用いる
処理の対象外となる条件をメソッドの先頭に定義することをガード節って言うらしい。
引数に不正値が入ってきたときにエラーを吐くようにしておけば、不正値のまま処理が進むのを防げる。
BPコンポーネントにはコンストラクションスクリプトがないからBeginPlayに書くのがいいかな。


## 第４章　不変の活用 ～安定動作を構築する～
### 引数で状態を受け取り、状態変更せず、値を返すだけの関数が理想
状態を変更する責任は、その状態を管理するクラスにあるべき。
そうでないと、状態がどこで変更されているのか把握しきれなくなる。
例えば、アクターコンポーネント内の関数で、親の変数（状態）を変更するような仕組みにするのは避ける。
変数作った時に、privateにチェックつける癖つけてもいいのかも？


## 第５章　低凝集～バラバラになったモノたち～
### 凝集度は高いほうがいい
凝集度とは「モジュール内における、データとロジックの関係性の強さを表す指標」。
つまり「クラス内におけるデータとロジックの関係性の強さ」。
データクラスは、低凝集であることから望ましくない。

### 低凝集のデメリット
低凝集だと、重複実装が起きやすい。データクラスに対する処理があっちこっちに書かれやすいから。重複実装によって修正漏れが起きやすく、可読性も悪くなる。

### 共通処理クラス（Common, Util）の罠
低凝集を推し進めてしまう可能性がある。
お互い関連のない雑多なロジックが実装されてしまっている場合が多い。定義集な構造を多く作りこんでいる状態。
安易に共通処理クラスを作らない！

### 横断的関心事
さまざななユースケースに広く横断する事柄を横断的関心事といい、これは共通処理としてまとめあげてよい。
- ログ出力
- エラー検出
- デバッグ
- 例外処理
- キャッシュ
- 同期処理
- 分散処理

### 多すぎる引数





.
.
.
続く...。





# おわりに
まだ読み終わっていませんが、ゆっくり読み進めつつ内容を足していきます！
設計の勉強はスキ！



<!--

# 参考記事
[リンクタイトル](url)

# その他部品
```php:example.php
コード
```

| No |    内容     |    備考    |
|---:|-------------|------------|
| 1  |             |            |
| 2  |             |            |


:::note info
インフォメーション
infoは省略可能です。
:::

:::note warn
警告
○○に注意してください。
:::

:::note alert
より強い警告
○○しないでください。
:::

-->
[Joke]　c0ffee python版


c0ffeeをpythonで書いてみました。

辞書ファイルから、16進数で表せる単語を探します。Oは0に置換します。

例えば、CAFE C0DE BEEF C0FFEE DEADBEEF等です。

`chmod +x c0ffee.py`として実行権を付け、`./c0ffee.py dictionaryfile.txt`として実行してください。
辞書ファイルは、TABかスペースか改行で区切られた英単語列です。

```c0ffee.py
#!/usr/bin/python
import sys

def hexword(w):
    w=w.replace('O','0').replace('o','0')
    for k in w:
        if k.upper() not in 'ABCDEF0':
            return ""
    return w

def main():
    fn=sys.argv[1]
    with open(fn,"rt") as file:
        text=file.read()
    words=text.split()
    words=[w for w in words if w]
    for i in words:
        if w:=hexword(i):
            print(w)

if __name__=="__main__":
    main()
```
現在表示しているwebサイトを指定番号ページへ移動（AppleScript）

こんにちは。
現在表示しているwebサイトを指定番号ページへ移動させる AppleScript を作りました（Safari専用）。```pageNum```の値を設定すると動作します。


```applescript
set pageNum to 1

-- constants
set keyPageSpecify to {page:"?page=", P:"?P=", n:"/", _n:"_n"}
set keyUrl to {page:{"ismedia.jp"}, P:{"nikkeibp.co.jp"}, n:{"ascii.jp"}, _n:{"itmedia.co.jp"}}

global keyUrl, keyPageSpecify

-- main
scrollTop("Safari")

tell application "Safari"
	set theURL to getURL(URL of current tab of window 1) of me
	set theURL to nextPageUrl(theURL, pageNum) of me
	try
		set URL of the front document to theURL
	end try
end tell

-- handlers (functions)
on valueOfRecord(theKey, theRecord)
	run script "on run {thisRecord}" & linefeed & theKey & " of thisRecord" & linefeed & "end run" with parameters {theRecord}
end valueOfRecord

on scrollTop(appName)
	tell application "System Events"
		tell process appName
			set frontmost to true
			key code 126 using command down
		end tell
		delay 0.7
	end tell
end scrollTop

on getURL(theURL)
	set theURL to first item of splitStr(theURL, "?") of me
	set theURL to first item of splitStr(theURL, "#") of me
	set theSplitStr to splitStr(theURL, "/") of me
	if ((count of item of last item of theSplitStr) ≤ 2) then
		set theURL to first item of theSplitStr
	end if
	return theURL
end getURL

on nextPageUrl(theURL, pageNum)
	set keys to keysOfRecord(keyPageSpecify)
	repeat with k in keys
		if itemFound(theURL, valueOfRecord(k, keyUrl)) then
			set keyPage to valueOfRecord(k, keyPageSpecify)
			return pageURL(theURL, keyPage, pageNum)
		end if
	end repeat
end nextPageUrl

on pageURL(theURL, keyPage, pageNum)
	if keyPage is "_n" then
		return pageURL_n(theURL, pageNum)
	else
		return theURL & keyPage & pageNum
	end if
end pageURL

on pageURL_n(theURL, pageNum)
	set theSplitStr to splitStr(theURL, "/") of me
	set head to (first item of theSplitStr & "/")
	set tails to splitStr(last item of theSplitStr, ".") of me
	set theExt to "." & last item of tails
	set tail to first item of splitStr(first item of tails, "_") of me
	if pageNum ≥ 2 then
		set tail to tail & "_" & pageNum
	end if
	return head & tail & theExt
end pageURL_n

on splitStr(str, delim)
	if str does not contain delim then
		return {str}
	end if
	set delimiters_orig to AppleScript's text item delimiters
	set AppleScript's text item delimiters to delim
	set head to text from text item 1 to text item -2 of str
	set tail to last text item of str
	set AppleScript's text item delimiters to delimiters_orig
	return {head, tail}
end splitStr

on itemFound(anItem, aList)
	repeat with e in aList
		if anItem contains (contents of e) then
			return true
		end if
	end repeat
	return false
end itemFound

use framework "Foundation"
on keysOfRecord(theRecord)
	set ca to current application
	return (ca's NSDictionary's dictionaryWithDictionary:theRecord)'s allKeys() as list
end keysOfRecord
```
llm-jp-3-13b-instructはパソコンのキーボードを知っているのか

[llm-jp-3-13b-instruct](https://huggingface.co/llm-jp/llm-jp-3-13b-instruct)が[リリースされた](https://llmc.nii.ac.jp/topics/post-707/)ので、[2月25日の記事](https://qiita.com/KoichiYasuoka/items/05ec1db28177f9824bb0)を横目に「[パソコンのキーボードは，なぜABC順・五十音順ではないのですか](https://kotobaken.jp/qa/yokuaru/qa-35/)」と尋ねてみることにした。プログラムはこんな感じ。

```
#! /usr/bin/python3
from transformers import pipeline
tgn=pipeline("text-generation","llm-jp/llm-jp-3-13b-instruct",max_new_tokens=100)
nlp=lambda txt:tgn(f"以下は、タスクを説明する指示です。要求を適切に満たす応答を書きなさい。\n\n### 指示:{txt}\n\n### 応答:",do_sample=True)[0]["generated_text"]
print(nlp("パソコンのキーボードは，なぜABC順・五十音順ではないのですか"))
```

実行してみたところ、私(安岡孝一)の手元では以下の結果が出力された。

> 以下は、タスクを説明する指示です。要求を適切に満たす応答を書きなさい。
>
> \#\#\# 指示:パソコンのキーボードは，なぜABC順・五十音順ではないのですか
>
> \#\#\# 応答:
> キーボードの配列がアルファベット順ではない理由は、いくつかの理由があります。
>
> 第一に、一般的に広く使われているQWERTY配列は、タイプライターの時代に発明されましたが、当時のキーボードには紙と金属のロールが搭載されており、高速でキーを叩くと、紙と金属が絡み合って故障する可能性が高まります。この問題を解決するために、人間がタイプする時に「打ちにくい」位置に文字を配置した。例えば、「R」と「T」、「A

「金属のロール」って何のことだろう。もう一度やってみよう。

> 以下は、タスクを説明する指示です。要求を適切に満たす応答を書きなさい。
>
> \#\#\# 指示:パソコンのキーボードは，なぜABC順・五十音順ではないのですか
>
> \#\#\# 応答:
> パソコンのキーボードは、英語キートップの刻印は米国規格協会(ANSI)が定めた配列に従っています。この配列は、アルファベット順や五十音順ではなく、指の配置やシフトやスペース入力のしやすさから「QWERTY配列」と呼ばれています。欧米ではQWERTY配列がタイピングの基本として教えられているので、キーボードの文字の並びもアルファベット順になっているのです。日本語のキーボードのひらがな入力の配列も五十音順ですが、これはあいうえお順で指を動かしやすい

「スペース入力のしやすさ」って何のことだろう。うーん、13Bモデルだと60GBほどメモリが必要なのだけど、それでもこの程度ということなんだろうか。
忘れた頃のSQLリファレンス　STRING_SPLIT

## はじめに
`STRING_SPLIT()`を使用して文字列を特定の区切り文字で分割し、複数行に展開する方法です。
例えば、CSV形式のデータを取り扱う際や、ユーザー入力の解析を行う場合です。


https://learn.microsoft.com/ja-jp/sql/t-sql/functions/string-split-transact-sql?view=sql-server-ver16

## STRING_SPLIT()の使用例
### 基本的な文字列の分割
`STRING_SPLIT`関数は、指定した区切り文字で文字列を分割し、各部分を行として返します。
関数は分割対象の文字列と区切り文字の2つのパラメータを取ります。

```sql:文字列をカンマで分割する
SELECT value FROM STRING_SPLIT('apple,banana,cherry', ',');
```

```text
value
-------------------
apple
banana
cherry

(3 行処理されました)
```

### テーブル内のデータを分割する
次に、テーブル内のカンマ区切りデータを分割する方法を紹介します。

```sql:テーブルデータを空白で分割する方法
SELECT hid, value AS Hobby
FROM
	(VALUES (1, '映画鑑賞 読書 写真撮影'),(2, '登山 釣り キャンプ')
	) as Participants (hid ,Hobbies)
CROSS APPLY STRING_SPLIT(Hobbies, ' ');
```
```text
hid  Hobby
--- ----------
1   映画鑑賞
1   読書
1   写真撮影
2   登山
2   釣り
2   キャンプ

(6 行処理されました)
```

### NULLや空白の処理
`STRING_SPLIT`関数は、空白やNULL値も処理できます。例えば、区切り文字が連続している場合には空の部分文字列が生成されますが、それらを除外することも可能です。

```sql:分割した項目を条件で取得する
SELECT value
FROM STRING_SPLIT('clothing,road,,touing,bike', ',') --"road"と"touing"の間に空白行
WHERE value <> ''; --この条件で空白除去
```
```text
value
----------
clothing
road
touring
bike
```
## おわりに
画面からスペース区切りのテキストを持ってきて検索する機能を作るときに便利です。

SQLServerならそのままコピペしても動くように書きました。
必要に応じてテーブルを書き換えてつかってください。
ES1000%通過した文章術

こんにちは！palmです。

このブログを読んでほしい人
・文章が苦手
・ESなかなか通過しない
・惹きつけるコツが知りたい

まずはじめに私は目立った学歴がなければスキルも経験もないです。~~性格に難ありでもある。~~ それなのにメガベン2社の書類を自分で書いて通過した経験があります。（通過率の低いハッカソンと6人しか参加できなかった1day選考会）

普段はレバテックルーキーにESを任せています。しかし、その書類が2社ほどお見送りになりました。自分が気になってる企業なのに。

しかし、諦められなく、最近登録したサポーターズで競合を起こました。自分で履歴書を書きました。~~おそらく3000文字くらい書いてます。~~ それが再度認められて面接を組んでもらえることができました。（結構みんなが知ってる企業です。あまり聞かない出来事ですよね。）

今回はどんな文章を書いているのか？どのように惹き込んでいるのかを語ろうかと思います。

私が文書を書く時に意識していることは２つあります。

・1つ目は文に感情を入れること。
・2つ目は楽しんで書くこと。
・おまけに読み手を飽きさせない意識をすること。


「文に感情を入れる」
⭐︎文章に感情を入れることはすごく大切だと思います。

私は自分の文章をマンガみたいに読んでもらいたいという思いがあります。マンガが面白いのはキャラクターに表情があって吹き出しがついてるからだと思っています。

だけど文字だけでは表情と吹き出しをつけるのは難しいですよね。しかし、文に「感情」を入れたらなんと文章がマンガみたいに面白くなります！

楽しかった🥰悲しかったー😭面白かった☺️

堅苦しい文章をかく人がたまにいるけど、感情も付け加えて個性を出していこう！！


「楽しんで書く」
⭐︎一番大事なことだと思います。

あなたが今勉強していることや、仕事にしたいことは楽しいから続いてるんだよね？？（私は少なくとも楽しいから続いてます。）

文字は構成が上手くできなくても、苦手でも、簡単に楽しさ・ワクワク感を共有することができる道具だと思っています。

小学生でも目を輝かせてワクワクしてる人を惹きつける作文作ってますよね。やはり構成などいらないのです。

楽しい文章は、読んでる人も楽しいです。

途中で読むの疲れちゃう文章を今日から書くのは辞めましょう！自分が読み返して楽しい文章を書こう！


「読み手を飽きさせない意識をする」
⭐︎難しい言葉、専門用語を使うのはやめましょう。

たまに知的感を出すために使ったりするのはいいと思います。人事はあくまでも人事です。専門用語はあまり知らないと思います。

⭐︎行間を開けましょう。
⭐︎見出しをつけましょう。

貴方は自分を売り込むプロのブロガーです。視覚的に読みやすくしましょう。

人事の方は毎日100人以上見てると思います。
やはり、せっかく書いた文の最後まで、自分のやってきたことを見てもらいたいですよね！



以上私が気をつけていることを“少し”だけ語ってみました。まだまだ意識していることはたくさんあります。ライバルが増えないように内緒にしておきます。（自意識過剰）

最後まで読んでくれてありがとうございました。
おやすみなさい。
rails エラーメッセージの日本語化

# エラーメッセージの日本語化

### 日本語の言語設定
application.rbを編集して、言語設定を変更
:jaは日本語設定にするという意味

~~~config/application.rb
# 中略
module Pictweet
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 7.0

    # 日本語の言語設定
    config.i18n.default_locale = :ja
      # 省略
    end
end
~~~

### Gemfileを編集

日本語に対応する"rails-i18n"というGemを導入

rails-i18n

このGemの導入によって、下記サイトに記述してある日本語を使えるようになるみたいです。

[rails-i18nに登録されている日本語](https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml)

Gemfile
~~~
#中略
gem 'rails-i18n'
~~~

続いて、以下のコマンドを実行

ターミナル
~~~
bundle install
~~~


# 日本語化用のファイルを作成

エラーメッセージを全て日本語にするためには、もう一つファイルを用意する必要があります。そのファイルのことをlocaleファイルと言います。

### localeファイル
localeファイルとは、様々な言語に対応できる言語ファイルです。
localeファイルの中に日本語化用のファイルを作成することで、英語を日本語に翻訳してくれます。

そして、その日本語へ翻訳するためのファイルは、通常YAMLというファイル形式を用います。

### YAML（YAML Ain’t Markup Language）

YAMLとは、ファイルの書き方のルールの一つで、中身が文字だけで記述されてるテキストファイルです。
database.ymlもこれに当てはまり、データベースの接続に必要な設定が記述してあります。

デフォルトでは、下記の例のように「英語」でYAMLファイルが書かれていますので、先程のエラーメッセージが英語で表示されます。

~~~例】config/locales/devise.en.yml
en:
  devise:
    confirmations:
      confirmed: "Your email address has been successfully confirmed."
      send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
   errors:
     messages:
       already_confirmed: "was already confirmed, please try signing in"
       not_found: "not found"
~~~

### devise.ja.ymlを作成

config/localesディレクトリに、devise.ja.ymlというファイルを作成します。

下記のサイトに記述内容が掲載されているので、丸ごとコピーして作成したdevise.ja.ymlの中に貼り付けましょう。

ymlファイルは、インデントにミスがあるとエラーが生じます。コードを貼り付けた後、インデントにミスがないか必ず確認しましょう。
[devise.ja.yml](https://github.com/tigrish/devise-i18n/blob/master/rails/locales/ja.yml)


### 日本語に翻訳する文言を確認しましょう

このままだとNickname、Text、Imageは、Gem 'rails-i18n'やdevise.ja.ymlを導入したことによって使える日本語に含まれていないので、英語で表示されてしまいます。
したがって、これらを翻訳するファイルを手動で作成していきます。

### ja.ymlを作成しましょう

config/localesディレクトリに、ja.ymlというファイルを作成します。

ファイルを作成したら、以下の記述をしましょう。

~~~config/locales/ja.yml
ja:
  activerecord:
    attributes:
      user:
        nickname: ニックネーム
      tweet:
        text: テキスト
        image: 画像
~~~
【色変記事】AtCoderで入茶した件

# 始めに
初めましてyuumaと申します。
ABC373で初めての色変を体験したので色変記事というものを書いてみようと思います。
![スクリーンショット 2024-10-04 135742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3896155/b2469dc4-9b69-ba9a-0c97-541293a7b19c.png)
# 自己紹介
* 国立理系の大学一年生
* 大学入学前のプログラミング経験なし
# やったこと
* ほぼ毎週コンテストに出た（abc352から）
* AtCoder Daily Traningに参加(9月から)
大体上の2つだけであとはたまにA,B,Cを埋めていました。
# 使用言語
python3を使っています。~~python3で通らないときはChatGPTにC++へ変換させることもあるので、C++を使っていると言えるかもしれません~~
# 覚えたアルゴリズム
* 二分探索
* DP(動的計画法)
* 累積和
* BFS(幅優先探索）
# 競プロをやっていてよかったこと
半強制的に毎週プログラミングができるので、プログラミングになれることができた。
プログラミング初心者ながらもpaizaでSランクがとれた(上位3%らしい)。
# 最後に
AtCoder Daily Traningとかのバーチャルコンテストに参加することで早く解く能力や問題を読む能力が上がったのが茶色になれた主要因だと思うのでこれからも続けたいと思います。
また、明らかに精進量が足りていないのでC,D問題を中心に埋めていくのと、競技プログラミングの鉄則や典型90も進めていきたいと思います。年内に入緑できるようにファイト！
【Docker】未使用オブジェクトを削除する方法

## 未使用コンテナの削除

```terminal
docker container prune
```

## 未使用イメージの削除

```terminal
docker image prune
```

## 未使用ボリュームの削除

```terminal
docker volume prune
```

## 未使用ネットワークの削除

```terminal
docker network prune
```


## 未使用コンテナ、ネットワーク、イメージ、ビルドキャッシュの削除

```terminal
docker system prune
```
投稿 96 CRL 2024/10/04

本日の勉強時間　3H

CRL（Certificate Revocation List：証明書失効リスト）は、証明書の有効期間中に、証明書記載内容の変更、秘密鍵の紛失等の事由により失効された証明書情報が記載されたリストのこと
[Service Management] 解決及び実現、サービス保証

# 一覧
|||
|:--|:--|
|インシデント管理|インシデントの発生後に暫定的にサービスを復旧させ、業務を継続させる|
|問題管理|インシデントの発生後に根本原因を特定し、恒久的な解決策を策定する|
|サービス継続管理|インシデントの発生に備えて、復旧のための設計をする|
|||







# 参考リンク
- [平成27秋57_問題管理](https://www.ap-siken.com/kakomon/27_aki/q57.html)
ABC373参加記録　by Python

# リアルタイムに解けた問題

## [A - September](https://atcoder.jp/contests/abc373/tasks/abc373_a)

### 問題文
英小文字からなる12個の文字列$S_{1},S_{2},...,S_{12}$があります。
$S_{i}$の長さが$i$であるような整数$i(1\leq i\leq 12)$がいくつあるか求めてください。


### 制約
- $S_{i}$は英小文字からなる長さ1以上100以下の文字列である。$(1\leq i\leq 12)$

### アルゴリズム
ループを回しながら、入力を受け取り、その文字列の長さがループ回数と同じ値であれば、変数countを増やしていく。

### ソースコード
``` python
count = 0
for i in range(12):
  S = input()
  if len(S) == i+1:
    count += 1
    
print(count)
```

## [B - 1D Keyboard](https://atcoder.jp/contests/abc373/tasks/abc373_b)

### 問題文
26個のキーが数直線上に並んだキーボードがあります。

このキーボードの配列は<font color="Red">`ABCDEFGHIJKLMNOPQRSTUVWXYZ`</font>を並べ替えた文字列$S$で表されます。文字列$S_{x}$に対応するキーが座標$x(1\leq x \leq 26)$にあります。ここで、$S_{x}$は、$S$の$x$文字目を表します。

あなたはこのキーボードを使って<font color="Red">`ABCDEFGHIJKLMNOPQRSTUVWXYZ`</font>をこの順で右手人差し指で一度だけ入力します。ある文字を入力するためには、その文字に対応するキーの座標に指を移動させてキーを押す必要があります。

はじめ、指は<font color="Red">`A`</font>に対応するキーの座標にあります。<font color="Red">`A`</font>に対応するキーを押してから、<font color="Red">`Z`</font>に対応するキーを押すまでの指の移動距離の合計として考えられる最小値を求めてください。ただし、キーを押す動作は移動距離に含まれません。

### 制約
- $S$は<font color="Red">`ABCDEFGHIJKLMNOPQRSTUVWXYZ`</font>を並べ替えた文字列である。

### アルゴリズム
ループを用いて、入力におけるそれぞれの文字の位置を特定していく。移動距離の最小値を求めたいので、<font color="Red">`A`</font>をみつけたときは、その位置だけを変数に保持、それ以外の文字の時は移動距離を累積し、その位置を変数に保持する。

### ソースコード
``` python
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
S = input()

position = -1
total = 0

for word in alphabet:
  for i in range(len(S)):
    if word == S[i]:
      if word == "A":
        position = i
      else:
        total += abs(position-i)
        position = i
        
print(total)
```

## [C - Max Ai+Bj](https://atcoder.jp/contests/abc373/tasks/abc373_c)

### 問題文
長さ$N$の整数列$A,B$が与えられます。1以上$N$以下の整数$i,j$を選んで、$A_{i}+B_{j}$の値を最大化してください。

### 制約
- $1\leq N \leq 5 * 10^{5}$
- $|A_{i}|\leq 10^{9}(i = 1,2,...,N)$
- $|B_{j}|\leq 10^{9}(j = 1,2,...,N)$
- 入力はすべて整数

### アルゴリズム
入力を受け取る段階で、$A$と$B$それぞれの最大値を取得し、その和を出力

### ソースコード
``` python
N = int(input())
A = max(list(map(int, input().split())))
B = max(list(map(int, input().split())))

print(A+B)
```
runInterruptible: Coroutine上で時間のかかるコード実行を適切にキャンセルする

みなさんはKotlin Coroutines上で時間のかかる処理を行う際、処理のキャンセルについて意識されてますでしょうか？

この記事では、Coroutine上で動かす時間のかかるコード実行を適切にキャンセルするには[withContext](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/with-context.html)ではなく[runInterruptible](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/run-interruptible.html)を利用するべきであるという例を紹介します。

時間のかかるコード実行をキャンセルさせる例として以下のようなコードを用意しました。

```kotlin
runBlocking {
    val heavyWork = fun(): String {
        println("Start heavy work")
        repeat(10) {
            Thread.sleep(1000)
            println("Progress ${it + 1}")
        }
        return "Success"
    }
    val result = withTimeoutOrNull(5000) {
        withContext(Dispatchers.IO) {
            heavyWork()
        }
    }
    println("Result: $result")
}
```

時間のかかる処理のシミュレートとして`heavyWork`を定義しました。このメソッドの完了に10秒掛かります。
厳密にメソッドを10秒間ブロックするため、`delay`等のCoroutineの機能を利用せずに非Coroutineで実装していることが時間のかかる処理を再現する上でのポイントです。

このメソッドをCoroutine上で実行しますが、`withTimeoutOrNull`によって5秒のタイムアウトを設定しているため、実際には`Progress 5`以降は出力されないことを意図しています。

しかし、出力結果は以下の通りになります。

```
Start heavy work
Progress 1
Progress 2
Progress 3
Progress 4
Progress 5
Progress 6
Progress 7
Progress 8
Progress 9
Progress 10
Result: null
```

なぜタイムアウト時点で処理が停止せず`Progress 10`まで出力されたのかというと、非Coroutineなメソッドの実行中は途中で`CancellationException`をthrowするタイミングが存在しないため、呼び出し側のCoroutineがキャンセルされた後も意図せず処理が続行されてしまいます。

そこで[runInterruptible](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/run-interruptible.html)を利用します。

時間の掛かる処理の実行時に使っていた`withContext`を`runInterruptible`に入れ替えることによって、この問題は解消します。

```kotlin
runBlocking {
    val heavyWork = fun(): String {
        println("Start heavy work")
        repeat(10) {
            Thread.sleep(1000)
            println("Progress ${it + 1}")
        }
        return "Success"
    }
    val result = withTimeoutOrNull(5000) {
        runInterruptible(Dispatchers.IO) {
            heavyWork()
        }
    }
    println("Result: $result")
}
```

このコードの出力結果は以下の通りになり、タイムアウト後ただちに処理が中断されていることが分かります。

```
Start heavy work
Progress 1
Progress 2
Progress 3
Progress 4
Result: null
```

以上、ブロックの実行が途中であってもCoroutineのキャンセル時にCancellationExceptionをthrowし、適切に処理をキャンセルできる[runInterruptible](https://kotlinlang.org/api/kotlinx.coroutines/kotlinx-coroutines-core/kotlinx.coroutines/run-interruptible.html)の紹介でした。
Cognitoのユーザプール移行をやってみた

# 手のかかるCognitoくん
Cognitoを使っていて属性を変更したいと思ったのですが、実は必須の属性は変更できません。

![スクリーンショット 2024-10-04 22.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659784/f48f46d5-6082-ea74-1346-8c4440f811d0.png)

https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/user-pool-settings-attributes.html#cognito-user-pools-standard-attributes

既にある程度ユーザを作ってしまっていたのでなんとかユーザのデータ移行できないかと調べたところ、AWS公式ドキュメントでは2つの方法が紹介されていました。
1. [ユーザー移行Lambdaトリガーのインポート](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-import-using-lambda.html)
2. [CSVファイルからのユーザーのインポート](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-using-import-tool.html)

しかしそう上手くいかないのがAWS。
1番の方法では認証フローに `USER_PASSWORD_AUTH` を使用する必要があり既存の実装にマッチせず、2番の方法ではパスワードが移行できません。さすがです。

悩み抜いた末にしぶしぶ2番の方法でデータ移行することにしました。

# じゃあもうCSVでデータ移行するよ

CSVをインポートすれば簡単にできそうですが、実はインポートデータを作るところは自前でやる必要があるので意外と大変。

## 既存データのエクスポート

権限のある状態で次のコマンドでユーザデータを抽出
```
aws cognito-idp list-users --user-pool-id <元のユーザープールID> > users.json
```

## インポートデータへの変換

データ変換が億劫だったので生成AIにコードを出してもらって魔改造したコードがこちら。
```python
import json
import csv

# ヘッダー
headers = [
    'profile', 'address', 'birthdate', 'gender', 'preferred_username',
    'updated_at', 'website', 'picture', 'phone_number', 'phone_number_verified',
    'zoneinfo', 'custom:tmp_password', 'locale', 'email', 'email_verified',
    'given_name', 'family_name', 'middle_name', 'name', 'nickname',
    'cognito:mfa_enabled', 'cognito:username'
]

# JSONファイルを読み込む
with open('users.json', 'r') as f:
    data = json.load(f)

# CSVファイルを作成し、ヘッダーを書き込む
with open('cognito_users.csv', 'w', newline='', encoding='utf-8') as f:
    writer = csv.DictWriter(f, fieldnames=headers)
    writer.writeheader()

    # ユーザーデータを処理してCSVに書き込む
    for user in data['Users']:
        row = {'cognito:username': user['Username']}
        for attr in user['Attributes']:
            if attr['Name'] in headers:
                row[attr['Name']] = attr['Value']

        # MFA状態を設定（ユーザーデータに含まれていない場合はFalseとする）
        row['cognito:mfa_enabled'] = row.get('cognito:mfa_enabled', 'false')

        # すべてのヘッダーが含まれるように未定義のフィールドを空欄に設定
        for header in headers:
            if header not in row:
                row[header] = ''

        writer.writerow(row)

print("CSVファイルが作成されました: cognito_users.csv")
```

なおヘッダーについてはコマンドでも取得できるようだが、アップロード時にエラーのサジェストで`template.cvs`をコンソールからダウンロードできたのそちらを利用している。
ヘッダー不足や順序で何回か失敗してストレスゲージが貯まるので注意。

## インポート

インポートについては「[ユーザーインポートジョブの作成と実行](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-using-import-tool.html#cognito-user-pools-creating-import-job)」の通りに実施すればOK。コンソールからアップロード時実施した。

## まとめ
Cognitoくんってもしかしてイケてないの？
情報処理技術者試験役に立つのか問題に対する私見

# 筆者について
### 合格した試験
+ 基本情報(午後が大問だった時代なので、今の基本情報はわかりません)
+ 応用情報
+ 情報処理安全確保支援士(登録はしてない)
+ エンベデッドシステムスペシャリスト(午後2が論文じゃなかった時代なのでry)

:::note info
IPA以外の資格(各種ベンダの試験)については持ってないのでわかりません
:::

# 試験を受けた理由
<p>私の職場では情報処理技術者試験に受かると一時金に加えて結構な額の<strong>月額(重要)</strong>手当が出るため。<br>また新卒文系未経験でIT業界に入ったため、やる気が伝わるといいなと思って受けた側面もないことはないです。</p>

# 身についたと思うこと
<p>午前試験は早押しクイズなので、午後試験の話をします。</p>

<p>午後の大問は設問を見て探したいもの(動作の根拠となる仕様や不具合原因など)を決めてから問題文を読んでいた。そのため、軽く目を通したドキュメントから目当てのものを抜き出すような力はついたと思う。</p>

<p>大抵の大問は不具合が起きてそれに対応するといったシナリオになっている。当然ながらペーパーテストの中でコマンドを撃ったりすることはできないので、目の前に動くプログラムがない状態でデバッグしたりする能力はついたような気がする(本番環境で急に起きた障害を調査するときとか)。他の方の成果物のレビューの時も脳みその似たような部分を使っている気がする。</p>

# 身につかなかったと思うこと
<p>動くプログラムやドキュメントを作る力は身につかなかったと思う(そういう試験ではないので当然である)。もし作りたいプログラムがあったりする場合はそちらを優先していいと思う。</p>

# 受験を検討する際に
<p><strong>試験対策にはかなりの時間がかかる</strong>が、全く何も得るものがないわけでもないと思う。</p>
<p>自分のやりたいことやキャリアプランとよく相談したうえで受験するといいと思う。</p>

~~私はお財布と相談して受験しました~~


# おまけ　個人的ベスト開発中に役立ったで賞
<p>基本情報のbitとかn進数のところ</p>
Laravel Pail 公式ログ追跡ツール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/85262192-e59e-7ae3-b380-d95d96a1a42f.png)

## Laravel Pail とは

https://laravel-news.com/laravel-pail

2023年11月にリリースされた新しめのログ追跡ツールです。
Pail(ペイル)はロゴのデザイン通り、バケツを意味します。

## Laravel Pail のインストール

```shell
$ composer require laravel/pail
```

開発環境にしか入れたくない場合は `--dev` オプションを付けてください。

```shell
$ composer require laravel/pail --dev
```

## Laravel Pail の使い方

```shell
$ php artisan pail
```

![ScreenShot 2024-10-04 22.21.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/d13af0cc-38a6-9418-cac3-a0713c92720a.png)

Pailはフォアグラウンドで起動してログが流れてくるのを待ちます。

![ScreenShot 2024-10-04 22.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/4645e396-c7d6-b809-0d49-e9be65dee652.png)

![ScreenShot 2024-10-04 23.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52879/d3c41ac7-cf62-45cd-5337-fa5fdb3e9b1b.png)

こんな感じで表示されます。

過去のログファイルは表示しません。
Pailを停止したらバケツの中のログは捨て去られます。

[laravel-dump-server](https://github.com/beyondcode/laravel-dump-server)のログ版みたいな感じです。

### オプション

```shell
$ php artisan pail -h
Description:
  Tails the application logs.

Usage:
  pail [options]

Options:
      --filter[=FILTER]    Filter the logs by the given value
      --message[=MESSAGE]  Filter the logs by the given message
      --level[=LEVEL]      Filter the logs by the given level
      --auth[=AUTH]        Filter the logs by the given authenticated ID
      --user[=USER]        Filter the logs by the given authenticated ID (alias for --auth)
  -h, --help               Display help for the given command. When no command is given display help for the list command
  -q, --quiet              Do not output any message
  -V, --version            Display this application version
      --ansi|--no-ansi     Force (or disable --no-ansi) ANSI output
  -n, --no-interaction     Do not ask any interactive question
      --env[=ENV]          The environment the command should run under
  -v|vv|vvv, --verbose     Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
```

フィルタリング指定して起動できます。

```
$ php artisan pail --filter="QueryException"
$ php artisan pail --message="User created"
$ php artisan pail --level=error
$ php artisan pail --user=1
```

`_debugbar` とかを除外したいけど、設定ファイルとか exclude オプションはなさそう？
今後のアップデートに期待しておきます。
継続する力を身に着けるために必要な３つのこと

#### はじめに
最近Azureの技術ブログ多めだったので、少しマインド系の記事を書きたいと思いたち書くことにしました。今回のテーマは「継続する力」です。私は現在も続いている習慣で以下のようなものがあります。そんな私の考える「継続する力」を身に着けるために必要な習慣は何か。
それをここでは語っていきます。

自己紹介として、私は現在以下のようなことを継続しています。
+ トレーニング：週2日以上(4年目)
+ 英語学習：毎日30分以上(3年目)
+ 中国語学習：週3日(各30分)以上(2年目)
+ ブログ更新：週1本以上(4か月目)

#### 「継続する力」は「養える能力」
　私は昔、「何かを続けること」が苦手でコンプレックスでもありました。英語も半年間必死に学習して海外企業のインターンに行って学習したのに、それから4年も放置。続けてきたスポーツも自分に負けて断念。それでも、今では自分の能力の一つとして「継続する力」があると自負しています。「私でも出来たのだから誰でも絶対できる！」とは今回は言いません。はっきり言いますが、できない人もたくさんいます。しかし、当たり前だと思いますが「諦めなければ絶対にできる」それが「継続する力」だと私は思います。このブログを読んでいくことで少しだけでも、「やってやろう！」という気持ちに皆さんがなれたなら幸いです。

　それでは、ここからは３つのヒントを皆さんにお伝えします。
 1. [言い訳しない](#言い訳しない)
 1. [楽しくやる方法を模索する](#楽しくやる方法を模索する)
 1. [出来なくても自分を責めない](#出来なくても自分を責めない)

 ## 言い訳しない
 　一度やると決めたことでも、普段生活をしていると「今日はよそう」と思うことがあると思います。例えば、「飲み会が多くて時間が取れない」「今週は業務が忙しい」「熱が出てしまった」などなど、いろいろな妨害が「やってやろう！！」という気持ちの前に立ちふさがります。それでも決して諦めないでください。皆さんは飲み会が多くても、仕事が繁忙期でも、熱が出ていても毎日歯を磨いたり、お昼ご飯は食べますよね。１日や２日ぐらいすっぽかしても大丈夫なのに。
  ここのコラムで伝えたいことは、継続したいと思った行為は歯磨きや食事と同じレベルで必要な行為だと体が認識するまで、理性でやりきることです。決して障害に負けず継続していくと、３か月で体が慣れてきます。すると、自然とやっていない日は気分がモヤモヤするようになってくるので、そのようになればゴールです。あとは、体に従うだけです。

## 楽しくやる方法を模索する
  中国語の学習をしているときに「漢字ばっかで楽しくない！！」と思い、３か月続けたもののいつ辞めようかと考えていたことがありました。そこで思いたったのが、楽しく続けるです。現代においてはネットの学習コンテンツがたくさんあります。私が中国語学習で目を付けたのが「NHK講座」でした。これであれば、アニメスキットや中国文化の紹介も見ながら学習できるのでとても楽しくできる！！と思いました。もちろん、見るだけでは学習とは呼べないので「予習」「視聴」「復習」を徹底して進めています。
   もし、続けていく中で退屈になってきた時は思い切って学習コンテンツを変えてみるのも、大いにアリだと思います。参考までに私が今まで活用してきた学習コンテンツの事例です。
+ NHK講座（第３言語の語学学習にはかなりお勧め）
+ 学習アプリ(英語学習ならスタサプが個人的にはお勧め)
+ Udemy(IT技術系の学習にはおすすめ)
+ Youtube(GoogleやMicrosoft公式のクラウド技術解説動画だけでなく、英語学習には英語のvlogや実況動画もお勧め。飽きてきたときの気分転換に優秀。)
+ ポッドキャスト(技術系も探すといろいろある。語学学習で使うにはやや上級者向け)

## できなくても自分を責めない
　上の二つのことを上手くやっていければ、皆さん苦労しないですよね。多くの方はやっていく中で、「今日はしんどいもう嫌だ・・・」とか「全然時間とれない」といった日も出てきます。そんなときは諦めて「５分」だけやってみるようにしましょう。全然頭に入らなくても、進捗が無くても大丈夫です。続けていくことに意味があります。
　そして、もう一つ大事なことがあります。絶対にできなかった自分を責めないでください。「私はこんなに疲れてるのに５分頑張れた。えらい！！」とほめてあげましょう。どんな小さなことでも成功体験の積み重ねがモチベーションにつながります。でも、私も「疲れているときに５分でも向き合えたあなたはすっごくえらい！」と思います。

## 最後に
　ここまで読んでいただいた読者の方は少しやる気が出てきたのではないでしょうか。勝負は今日からです。これを読んだらすぐに、何を継続したいかと目標（週何日以上とかがおすすめ）考えて実践に移してみて下さい。みなさんの「継続する力」に良き結果があることを祈っています。
iPhoneでMarkdown形式のメモを取る方法

## 目次
[目的](#目的)

[Markdownメモアプリの機能](#markdownメモアプリの機能)

[まとめ](#まとめ)

## 目的
スマホでメモじゃなくてMarkdown形式で保存できたら便利でいいなと思っていると、良さそうなアプリを見つけたので紹介します

しかも、Qiitaにもそのまま投稿できるとのとこ

その名も[#type](https://apps.apple.com/jp/app/type/id1214613873)

リンク貼っておきます
https://apps.apple.com/jp/app/type/id1214613873

これで気軽にMarkdown形式のメモが取れるし、Qiitaにも投稿しやすくなるかもしれないです

## Markdownメモアプリの機能
僕が気に入っている機能について紹介します

### プレビュー機能
![YVdqShpBKMZkA3WFy2lZtK0QxKE2/49pVCDm41tzSRI6e.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/YVdqShpBKMZkA3WFy2lZtK0QxKE2%2F49pVCDm41tzSRI6e.jpg?alt=media&token=60496bc5-ea44-4d44-81ae-247e31aa1801)

書いた後右にスワイプ、もしくはプレビューのタブを押すとすぐに確認できる

### ショートカットキーがある
Markdownでよく使う記号達がキーボードの上部に配置されている

これでいちいちキーボードを切り替えなくても使いたい記号がすぐ使えます

### そのままQiitaに投稿できる
まさかのこのアプリ上からそのまま投稿できます！

右上にある共有マーク(アクションボタン)からQiitaに投稿するというのが選択できます

![YVdqShpBKMZkA3WFy2lZtK0QxKE2/4sIJc8dca2GGHO25.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/YVdqShpBKMZkA3WFy2lZtK0QxKE2%2F4sIJc8dca2GGHO25.jpg?alt=media&token=30d5d4c1-8261-4a27-9d39-0e52ecd439d2)

## まとめ
まさかiPhoneアプリでMarkdown形式のメモを取れるなんて思ってませんでした(世の中すごい人が多いなぁ)

しかも機能もUIもシンプルで使いやすいなと感じました
普通のメモアプリよりこちらを使うようになりそうです笑

ちなみに僕自身が自ら見つけたのではなく、Qiitaに投稿されている@kai_kouさんの記事で知りました

その記事も貼っておきます
https://qiita.com/kai_kou/items/0b69e0d347bd269a1c16

甲斐 甲さん記事にしてくださっててありがとうございます

この記事はスマホから書いたものです
また、試しにスマホから投稿してます
CSS

今回はCSSについて記事にしたいと思います。

 **CSSの基本的なプロパティ**
# 1 色の指定
CSSでは、要素の文字色や背景色を簡単に指定できます。
プロパティを使います。

```css
p {
  color: blue;  /* 文字色を青に設定 */
}
```

背景色: background-colorプロパティを使います。
```css
body {
  background-color: lightgray;  /* 背景をライトグレーに設定 */
}
```
# 2 フォントの設定
フォントサイズ: font-sizeプロパティで文字の大きさを指定します。
```css
h1 {
  font-size: 24px;  /* 見出しのフォントサイズを24pxに */
}
```
フォントファミリー: font-familyプロパティで文字のスタイルを指定します。

```css
p {
  font-family: Arial, sans-serif;  /* Arialフォントを適用 */
}
```

# 3 マージンとパディング
マージン: 要素の外側の余白を設定します。
```css
div {
  margin: 20px;  /* 要素の外側に20pxの余白 */
}
```

パディング: 要素の内側の余白を設定します。
```css
div {
  padding: 10px;  /* 要素の内側に10pxの余白 */
}
```

4 ボーダー（境界線）
ボーダー: 要素の周りに境界線を設定します。
```css
div {
  border: 2px solid black;  /* 黒色で2pxの実線の境界線 */
}
```

**レイアウトの基本**
# 1. ディスプレイプロパティ
displayプロパティを使うと、要素の表示方法を制御できます。

block: 要素がブロック要素として表示され、改行が入ります。
```css
div {
  display: block;
}
```
inline: 要素がインライン要素として表示され、横に並びます。

```css
span {
  display: inline;
}
```

flex: 要素をフレックスボックスレイアウトにします。要素を柔軟に配置できます。
```css
.container {
  display: flex;
}
```

フレックスボックス
フレックスボックスは、要素を効率的に整列・配置できるレイアウト方法です。

横並びに要素を配置する:
```css
.container {
  display: flex;
  justify-content: space-between;  /* 子要素を左右に均等に配置 */
}
```

縦方向に要素を配置する:
```css
.container {
  display: flex;
  flex-direction: column;  /* 縦に並べる */
}
```

グリッドレイアウト
グリッドレイアウトは、2次元のレイアウトシステムで、ページを行と列で分けて配置できます。

簡単なグリッドレイアウトの例:
```css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3列に分ける */
}
```

 応用テクニック
メディアクエリによるレスポンシブデザイン
メディアクエリを使うことで、画面サイズに応じてスタイルを変更することができます。これにより、スマートフォンやタブレットなど、異なるデバイスに対応したレスポンシブデザインを実現できます。

```css
@media (max-width: 600px) {
  body {
    background-color: lightblue;  /* 画面幅が600px以下のとき、背景色をライトブルーに */
  }
}
```

アニメーション
CSSで要素にアニメーションを追加することもできます。@keyframesを使って、時間経過に応じたスタイルの変化を定義できます。

シンプルなアニメーションの例:
```css
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

.slide {
  animation: slidein 2s ease-out;  /* 2秒間でスライドインするアニメーション */
}
```

トランジション
トランジションを使うことで、スタイルの変更を滑らかにすることができます。たとえば、ホバー時の色の変化を自然に見せたい場合に使います。
```css
button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: red;  /* ホバー時に赤色に変更（0.3秒で変化） */
}
```

 CSSフレームワークの利用
CSSを手動で書くのは柔軟ですが、フレームワークを使うことで、より早く美しいデザインを実現できます。代表的なCSSフレームワークには次のようなものがあります。

Bootstrap：すぐに使えるレスポンシブデザインやコンポーネントが豊富なフレームワーク。

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
```

Bulma：シンプルで使いやすいレスポンシブフレームワーク。
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
```

# まとめ
CSSを使うことで、HTMLで作成したページにスタイルを加えて、デザイン性を高めることができます。基本的なプロパティから、フレックスボックスやグリッドレイアウト、レスポンシブデザイン、アニメーションなど、さまざまな技術を駆使して魅力的なウェブページを作ることが可能です。
実際のところpodは使うんですかって話

## 実際の本番環境ではpodを直接作ることは推奨されていない
なぜか？　-> コンテナの冗長化ができないため

じゃあ何使うんですか
**Deployment** と **replicaSet**　ってうのがあるんですよ
replicaset...指定した数のpodを複製するリソース
deployment...replicasetを複数紐づけるためのもの

本番環境では無停止更新が理想。たとえばreplicasetにver1,ver2があった時にスムーズに切り替えるにはその上位概念であるDeploymentが必要になる。

構造的には
dep > rep1 > pod1,2,3...
　　-> rep2 > pod1,2,3...
みたいな感じ

実際はrep2を作るとrep1が消えるみたいな感じになる（あってるかわかんない）

## deploymentのいいところ！
**1.deploymentを使うとdesired（望んだ分）のpodを勝手に作ってくれる。**
例えばpod３つあったとして１つ消したら自動で３つある状態に維持するため１つ作ってくれる

**2.strategytype**っていうのがある
recreateとrollingupdateを選べる
recreate ... 全podを同時に更新
rollingupdate ... podを順番に更新
rollingupdateを使う時maxUnavailable maxSurgeっていう設定がある
例えば　pod四個の時を考える。初期値mU25%,mS25%とすると
mU25%はpod４つのうち１つ使えなくなってもいい　っていう意味になる。
mS25%はpod４つに加えてもう１つ新しく作ったっていい　っていう意味になる。
**rollingupdateのいいところ**
段階的にアップデートするのでアップデート中も運用を継続でき、サービスの停止を最小限に抑えられる。
Pythonで始める！金融計算をシンプルに：計算記号を使いこなす

Pythonは、金融業界でも利用されています。書籍も何冊か見つけられると思います。
本記事では、Pythonの基礎的な計算記号を使って、金融計算をどのように行うか、具体的な例を交えて解説していきます。
## この記事で得られること
- +, -, *, \/などの計算に利用する演算子の使い方がわかる。
- お金のシュミレーションに関心の持てるかも
- コードがシンプルにしてあるので、取り入れやすい。

## なぜ、この内容の記事なのか
シンプルに書いてあるので、すぐに行動に移しやすいのではと意図しています。
少しでも、お金を増やすことに関心持ってもらえるかも思っています。

# print関数と計算記号の基本
Pythonで計算結果を表示する際に最もよく利用されるのがprint()関数です。この関数に計算式を渡すことで、その結果をコンソールに出力することができます。

#### Pythonで利用できる主な計算記号は以下の通りです。

- +: 足し算
- -: 引き算
- *: 掛け算
- ***: べき乗
- /: 真の除算（小数点以下を含む）
- //: 整数除算（小数点以下を切り捨てる）
- %: 余り
## 金融計算の例

### 1\. 株価の計算

``` py: 株価の計算
current_price = 1000  # 現物株価
dividend = 10  # 1株当たりの配当金
growth_rate = 0.05  # 成長率
``` 

``` py: 1年後の株価
next_year_price = current_price * (1 + growth_rate) + dividend
print("1年後の株価:", next_year_price)
```
```:実行結果
1年後の株価: 1060.0
```

### 2\. 債券の利息計算
``` py:  債券の利息計算
##初期値
principal = 10000  # 元本
interest_rate = 0.03  # 利率
years = 5  # 年数
```
```py: 単利
simple_interest = principal * interest_rate * years
print("単利:", simple_interest)
```
```:実行結果
単利: 1500.0
```

```py: 複利
compound_interest = principal * (1 + interest_rate) ** years - principal
print("複利:", compound_interest)
```
```:実行結果
複利: 1592.7407430000003
```
債権のシュミレーションはこちらでできます。
[MUFG 既発外国債券シミュレーション](https://www.sc.mufg.jp/products/bond/fdb/detail.html "既発外国債券シミュレーション")
※既発外国債券とは、すでに発行されている外国の債権ですが。
例えば、アメリカ国債など

:::note info
他の既発外国債券は、以下のようなサイトで確認できます。
- [既発外貨建債券の銘柄一](https://www.nomura.co.jp/retail/bond/f_currency/kihatsu.html"既発外貨建債券の銘柄一覧")


:::

### 3\. ポートフォリオのリターン計算
```Py: ポートフォリオのリターン計算
#初期値
stock_return = 0.1  # 株式のリターン
bond_return = 0.05  # 債券のリターン
weight_stock = 0.7  # 株式のウェイト
weight_bond = 0.3  # 債券のウェイト
```
```Py:# ポートフォリオのリターン
portfolio_return = weight_stock * stock_return + weight_bond * bond_return
print("ポートフォリオのリターン:", portfolio_return)
```

```:実行結果
ポートフォリオのリターン: 0.08499999999999999
```

::: note info
変数の定義について:

stock_return: 株式の期待リターン
bond_return: 債券の期待リターン
weight_stock: ポートフォリオ全体における株式の割合
weight_bond: ポートフォリオ全体における債券の割合
ポートフォリオのリターン計算:

portfolio_return: 各資産のリターンに、その資産のウェイトを掛けて合計することで、
ポートフォリオ全体の期待リターンを計算しています。これは、ポートフォリオ全体の期待収益率を表します。
:::

整数と小数の利用
上の例では、株価や配当金は整数、成長率や利率は小数で表現されています。

``` Py: 整数と小数の計算
number_of_shares = 100
price_per_share = 123.5
total_cost = number_of_shares * price_per_share
print("総額:", total_cost)

```

```:実行結果
総額: 12350.0
```


## まとめ
Pythonのシンプルな計算記号を用いることで、金融計算を効率的に行うことができます。
本記事では、株価、債券、ポートフォリオの計算を例に挙げました。


さらに学びたい方へ


- [NumPy(日本語版): 高速な数値計算ライブラリ](https://numpy.org/ja/　"NumPy(日本語版)")

- [Pandas: データ分析ライブラリ](https://pandas.pydata.org/ "Pandas: データ分析ライブラリ")


- [SciPy: 科学技術計算ライブラリ](https://scipy.org/ "SciPy: 科学技術計算ライブラリ")
これらのライブラリを活用することで、より高度な金融分析を行うことができます。



金融データの取得: 金融データは、Yahoo FinanceやGoogle FinanceなどのAPIを利用して取得することができます。
【Panda CSS × Vite】ViteでPanda CSSを使ってみよう

# はじめに 
Reactでスタイリングをする際には、Tailwind CSSやstyled components、CSS Modulesなどさまざまな方法があります。個人的にはTailwind CSSとstyled componentsをよく使っていますが、今回は名前が可愛いPanda CSSが気になったので、インストール方法を記事にしたいと思います。


# Panda CSSとは？🐼

Panda CSSは、Chakra UIの開発チームが開発したCSS in JSライブラリです。Tailwind CSSに影響を受けており、ユーティリティクラスを使って簡潔なスタイリングが可能です。また、CSS in JSのアプローチを取り入れているため、Reactなどのコンポーネントベースのライブラリとの相性も良好です。


https://panda-css.com/

# 導入方法
## はじめに
今回はViteを使用しますが、Viteのセットアップは省略し、早速Panda CSSをインストールしてみます。Panda CSSの公式ドキュメントに沿って設定すれば、スムーズに導入できるはずです。詳細は[こちら](https://panda-css.com/)をご参照ください。


![スクリーンショット 2024-10-04 16.24.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835217/174c807e-09b2-9344-5f58-6883303d31bc.png)

![スクリーンショット 2024-10-04 16.25.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835217/6ffd1d12-ba35-1d29-f408-8da92a03abc6.png)

***Get Started***から***Framework Guides***の***Vite***を選択してください。

![スクリーンショット 2024-10-04 16.35.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835217/bee719c8-3914-c9bb-eccd-c62641ad29ba.png)

***Using Panda CSS with Vite***という画面が出てきたらあとは手順に従うだけす。

## インストール

```bash
npm install -D @pandacss/dev
npx panda init --postcss
```
まずはPanda CSSをインストールし、初期設定を行います。上記のコマンドを実行してください。

## package.jsonの編集
```package.json
  "scripts": {
    "prepare": "panda codegen",  
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
```
package.jsonに`"prepare": "panda codegen"`を追加します。

## index.cssの編集

```css
@layer reset, base, tokens, recipes, utilities;
```
index.cssに`@layer reset, base, tokens, recipes, utilities;`を追加します。

## 確認

```bash
npm run dev
```
テストサーバーを起動し、表示される🐼のキャラクターが確認できれば、Panda CSSの設定は正しく完了しています。これでスタイリングにPanda CSSを使用できるようになります！



![スクリーンショット 2024-10-04 16.53.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3835217/f2fe4147-d05e-7169-c8d7-7fa64ce67fd2.png)

# 終わりに
今回はViteにPanda CSSを導入する流れを紹介しました。今後は、Panda CSSを使った具体的なスタイリングの例や、他のCSSフレームワークとの比較についても記事にしていきたいと思います。ぜひPanda CSSを使って、あなたのプロジェクトでもスタイリングを楽しんでみてください！

# 参考

https://panda-css.com/

『PanndaCSSを使いこなそう』

https://zenn.dev/jun0723/articles/bfa4cd24096584
チュートリアルまとめ

![スクリーンショット 2024-10-09 22.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/da43f670-1b19-3994-4855-b8363d06365a.png)

![puyopuyo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900427/1fdf8221-96c5-fcfa-3a52-383422a6fdc3.gif)
　ぷよぷよプログラミングAI学習システムは、中高生の自己調整学習に向けて開発されました。
　どうやって、Chromebookで、１０分で、素敵な人工知能を作れるのでしょうか？
　秘密は、３つ。
　１　jupyter liteで、webクライアントがpythonコードを実行
　２　超軽量な機械学習フレームワークdezeroを採用
　３　ぷよぷよのstageとactionがコンパクト

### Github&X

https://github.com/Lunanaedu/jupyterlite-puyopuyo

https://github.com/Lunanaedu/puyopuyo-kai

https://x.com/educationai_ai

### ぷよぷよプログラミングAI学習用まとめ

https://qiita.com/educational-ai/items/50c0fa689c01794d145e



# Step1
https://qiita.com/educational-ai/items/836945e577b4d05f31e7

# Step2
https://qiita.com/educational-ai/items/74bd0ea17689fe00c526

# Step3
https://qiita.com/educational-ai/items/1487078d31c5cb4fdbaa

# Step4
https://qiita.com/educational-ai/items/4769d793d3e34246a77c

# Step5
https://qiita.com/educational-ai/items/ff8f88e2e55a7b572e60

# Step6
https://qiita.com/educational-ai/items/03458399b0257c7c3ad6

# Step7
https://qiita.com/educational-ai/items/8d06789cda03caf1ce18

# Step8
https://qiita.com/educational-ai/items/005a7d33213d1e301922

# Step9
https://qiita.com/educational-ai/items/07adea229ecb5ff7885b

# Step10
https://qiita.com/educational-ai/items/938f084578d4535ab7c1

# Step11
https://qiita.com/educational-ai/items/5c6c811fc9098ab49b11

# Step12
https://qiita.com/educational-ai/items/de0fcb8660c0a80582c9

# Step13
https://qiita.com/educational-ai/items/db9eafe82f53898fd160