OmniAICreator/Qiita-1.07M huggingface dataset:
韓国大統領選挙は投開票速報の演出が熱い

## もはや名物
今日は韓国大統領選挙の投開票日である。
そして韓国の選挙といえばテレビ局がCGを駆使した投開票速報番組をぶち抜き放送するのが恒例となっている。
投票時間中は各地域の投票率をCGとともに紹介。
そして開票速報は候補の写真を使い、派手にCG演出を行う。

## 今回の見どころ、生成AIの活用やXR
すでに各放送局が当開票速報の演出の見どころを発表している。
「대통령 선거 cg」（大統領 選挙 CG）で検索すると各局の予告動画・記事がいくつも出てくる。

ここでは聯合ニュースの韓国語記事を紹介する。
[[大統領選挙D-2] AI・XR新技術総動員…開票放送「火花激戦」予告](https://www.yna.co.kr/view/AKR20250531024000005)

Google翻訳をかけた上で注目点を抜き出すと
- 特に地上波放送3社は、生成型人工知能(AI)、拡張現実(XR)など新技術を導入し、華やかなグラフィックを披露し、有名論客も交渉するなど熱い激戦を予告した。
- KBSは今回の大統領選挙開票放送に生成型AI技術を全面導入する。
候補者得票の現状を示すグラフィックとともに、生成型AIで作った韓国現代史の主要な瞬間を見せ、出口調査のカウントダウン映像もAI技術で具現する予定だ。
- MBCは開票放送で超大型発光ダイオード(LED)のステージを披露する。
放送史上最大規模のLEDを投入し、既存の4面スクリーンから6面スクリーンに選挙放送スペースを拡張した。
- SBSは開票放送で国内初のXRライブトークショーに挑戦する。
トークショースタジオを国会、仮想の大統領執務室など3次元(3D)立体デザインで作られた5カ所の場所に変える演出を追加して没入感を引き上げる予定だ。

## 各局ともYouTubeで配信予定
地上波3系列のYouTubeライブページは以下の通り。
- KBS https://www.youtube.com/@newskbs/streams
- MBC https://www.youtube.com/@MBCNEWS11/streams
- SBS https://www.youtube.com/@sbsnews8/streams

各局ともすでに配信予約が入っている。
![koreaelect1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943774/139334c5-c086-4dae-9e65-b1df635517f6.png)
![koreaelect2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943774/29b74889-3f34-4466-a547-b11441548016.png)
![koreaelect3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943774/638ab931-3e56-4591-86bc-4cf55436d36a.png)


日本からも楽しめる投開票速報。選挙結果だけでなく、各テレビ局の技術にも注目したい。

## 追記：アーカイブ公開中
2025/6/4現在、YouTube配信のアーカイブが各局とも残されている。
地上波とJTBC、合わせて4局分のリンクを以下に貼っておく。
予告なく公開が終了となる可能性もあるので、チェックしたい人はお早目に。

- KBS
['2025 대선-내 삶을 바꾸는 선택' 개표방송](https://www.youtube.com/watch?v=9gyhzGex2F8)

- MBC
['선택2025' MBC 선거방송](https://www.youtube.com/watch?v=LdAfk1yrZDs)

- SBS
[2025 국민의 선택 | SBS 21대 대통령 선거 방송](https://www.youtube.com/watch?v=IJGWaIHodEA)

- JTBC
[JTBC 대선개표방송｜2025 우리의 선택 - we대한민국](https://www.youtube.com/watch?v=T3WaIzin6uA)
【tmux】 使い方を簡単に解説

#### tmux を解説していきます。

- tmux をサーバ側で立ち上げると、端末からのssh接続が落ちたとき、または長くかかるコマンドを実行中に端末を閉じたいときなどに当該sshセッション続行し、後ほど都合の良いときにそのsshセッションに戻ることができます。

- tmux は CentOS7では おそらく `yum install tmux` で入ります。

---

とりあえずインストールしたら `tmux` で起動してためしてみましょう。

起動するとこんな感じでステータスラインが出ると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3991757/05746716-898a-4dad-8836-e9d1bb522288.png)

というわけで、まずは tmux を起動後に

```
mysql -uhoge -p < BIG_DATA.sql ; date
```

とか時間がかかるコマンドを実行しちゃいます。あるいはわかりやすく `top` とか継続されるコマンドでも良いです。

それでもってコマンド実行中に `ctrl+b` をタイプしてから `ctrl` から手を離して `d` をタイプすると、tmux から抜けることができます。これをデタッチと言います。

で、もう抜けられたので、正しく `exit` としてコンソールを終了します。

ほとぼりが冷めた頃 あらためてssh接続し、 `tmux a` とすると、さきほどデタッチしたセッションに接続できます。どうでしょうか、そのコマンド、すでに終了している、といいですね…

---

##### ウインドウ分割について

- `ctrl+b` をタイプしてから `ctrl` から手を離して `"` をタイプすると、ウインドウが上下に分割されます。
- `ctrl+b` をタイプしてから `ctrl` から手を離して `%` をタイプすると、ウインドウが左右に分割されます。
- `ctrl+b` をタイプしてから `ctrl` から手を離して `q` をタイプすると、分割されたウインドウそれぞれに番号がついていることがわかります。(それぞれをペインというそうです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3991757/bfdb687e-72bb-46a6-8b7b-87bb92fbf1b4.png)

- `ctrl+b` をタイプしてから `ctrl` から手を離して上下左右のカーソルキーで分割されたウインドウ(ペイン)間を移動することができます。

---

##### ウインドウについて

- `ctrl+b` をタイプしてから `ctrl` から手を離して `c` をタイプすると、新しいウインドウを開きます。ステータスラインでウインドウを一覧できます。
- `ctrl+b` をタイプしてから `ctrl` から手を離して `w` をタイプすると、ウインドウ一覧が表示されます。カーソルキーで移動したいセッションを選び、エンターでそのウインドウに入れます。
- 二つ以上のウインドウ間を移動したいときは、`ctrl+b` をタイプしてから `ctrl` から手を離して `n` または `p` をタイプします。

---

##### セッションについて

- 二つ以上のセッションからデタッチしてる場合は、`tmux a -t 0` とか `tmux a -t 1` とかでそれぞれのセッションに戻れます。
- `tmux ls` をまだ紹介してなかったですね。セッション一覧が出ます。
- `ctrl+b` をタイプしてから `ctrl` から手を離して `s` をタイプすると、セッション一覧が表示されます。カーソルキーで移動したいセッションを選び、エンターでそのセッションに入れます。

---

##### はたしてウインドウとセッションはどう違うのか？

セッション -> ウインドウ -> ペイン というハイアラーキーと理解できるのでは。

---

- `ctrl+b` をタイプしてから `ctrl` から手を離して `:` をタイプすると、コマンドモードに入ります。ステータスラインにコマンドが入力できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3991757/0dd611cd-8fbb-4cdc-a3b2-d2b666ac68b8.png)

- いくつかペインを開いてから、上記コマンドモードに入り、`set synchronize-panes on` とすると、以降、入力が全てのペインに反映されるようになります。いくつかのサーバに同時に同一コマンドを発行するとき、便利ですね。

---

ほかに参考にできるtmux解説一覧。 特に二番目の "カビパン男と私" がたいへんおもしろかったです。

- https://qiita.com/nmrmsys/items/03f97f5eabec18a3a18b
- https://www.kabipan.com/densan/tmuxmemo.html
- https://tech.visasq.com/introduce-tmux-powerful-features
- https://docs.oracle.com/cd/E62101_01/html/E62874/tmux-1.html
- https://qiita.com/vintersnow/items/be4b29652ff665c45198
- https://www.task-notes.com/entry/20150711/1436583600
- https://linuc.spa-miz.com/2020/09/13/tmux/
Reactでの`doSomething`, `() => doSomething()`, `doSomething()`の違いと使い分け

# はじめに

ReactでイベントハンドラやuseEffect、コールバック関数を記述するときによく出てくる以下の3パターン：

```js
doSomething
() => doSomething()
doSomething()
```

一見似ていますが、**それぞれ意味や挙動が異なり、使う場面を間違えるとバグの原因になります**。この記事では、それぞれの違いとReactでの正しい使い分け方を解説します。

# 1. `doSomething`：関数そのものを渡す

```js
<button onClick={doSomething}>Click</button>
```

* これは「`doSomething`という関数を**実行せずに**そのまま渡す」意味になります。
* `onClick`などイベント発火時にReactが関数を呼び出します。
* **おすすめ：イベントハンドラやコールバック関数として使うとき**

# 2. `doSomething()`：関数を**即座に実行**して、その戻り値を渡す

```js
<button onClick={doSomething()}>Click</button> // ❌ NG
```

* この書き方は、**レンダリング中に関数が実行される**という意味です。
* `onClick`には関数ではなく、「関数の戻り値」が渡されてしまいます。
* ほとんどのケースでReactが期待するのは関数そのものなので、これは**間違った使い方**になります。

### 例：NGな使い方（即時実行）

```js
useEffect(doSomething(), []); // ❌ useEffect実行時にdoSomething()が実行され、戻り値が使われる
```

# 3. `() => doSomething()`：ラップされた関数（無名関数）

```js
<button onClick={() => doSomething()}>Click</button>
```

* 無名関数を作って、それが実行されたときに`doSomething()`を呼び出すという意味。
* **引数を渡したいときや、関数を条件付きで実行したいときに使います。**

### 例：引数を渡したい場合

```js
<button onClick={() => doSomething("Hello")}>Click</button>
```

### 例：useEffect内で関数を呼びたい

```js
useEffect(() => {
  doSomething();
}, []);
```

**✅ まとめ：どう使い分ける？**

| 書き方                   | 説明                                | よく使う場面例                                    |
| --------------------- | --------------------------------- | ------------------------------------------ |
| `doSomething`         | 関数をそのまま渡す。実行はしない。                 | `onClick`, `setTimeout`, `useEffect(fn)`など |
| `doSomething()`       | 関数をすぐ実行し、その戻り値を渡す                 | 意図的に即時実行したいとき以外は避ける                        |
| `() => doSomething()` | ラップして遅延実行。引数が必要なときや条件付きで使いたいときに便利 | `onClick`, `useEffect`内で副作用を実行             |

**補足：よくあるミスとデバッグヒント**

* **レンダリング時に関数が勝手に実行される** → `doSomething()`を書いてしまっていないか確認
* **意図通りに動かないイベント** → 無名関数で引数を渡し忘れていないか確認

# おわりに

Reactを使い始めたばかりの頃は、`doSomething`と`doSomething()`の違いがわからず、意図しない動作で苦労することがよくあります。しかし、**「渡すのか」「実行するのか」「包むのか」** を意識することで、使い分けはすぐに身につきます。

ぜひこの記事を参考に、自信を持ってイベントハンドラや副作用のコードを書いていきましょう！
Arts and Systems Workshop #6

Arts and Systems Workshop #6 [27 May 2025]

[English]
# Research Consultation 

May 27, 2025 (Tue) 7:00 PM - 9:20 PM @ C3N07

### Participants 
On-site: Ka yi Lung, Kana Matsuno, Miya Kohno 
Online: Shinya Akado, Daiki Nakazono

#### “Is C major truly Radiant?”  - Miya Kohno
  [Materials](https://drive.google.com/file/d/1dmhLobH1l045N8zcKgibBSQN4IGE3W-l/view?usp=drive_link) 
  
#### “A Review of Semiotics” and “Tea Room Scapes” - Daiki Nakazono
  [Materials](https://docs.google.com/document/d/1ov_SnH1DwzXyHhy4sLB42khIDLio0yDzoEYspUOFGCk/edit?tab=t.0)


[日本語]
# 研究相談

27 May, 2025 (Tue) 7:00 PM - 9:20 PM @ C3N07
### 参加者
現地参加 : カイさん、松野さん、河野
オンライン :  明土さん、中園さん

#### 「ハ長調は本当に明るく輝かしいのか？」 - 河野 美也
　[資料](https://drive.google.com/file/d/1dmhLobH1l045N8zcKgibBSQN4IGE3W-l/view?usp=drive_link) 

#### 「記号論の整理」と「茶室スケープ」の検討　- 中園 大樹
　[資料](https://docs.google.com/document/d/1ov_SnH1DwzXyHhy4sLB42khIDLio0yDzoEYspUOFGCk/edit?tab=t.0)
[AWS]StrandsAgentをとりあえず使ってみた

## はじめに

AIエージェント開発の複雑さに悩んでいませんか？Strands Agents SDKを使えば、わずか数行のコードで強力なAIエージェントを作成できます。このブログでは、テキスト操作機能を持つシンプルなエージェントを実装した例を紹介します。

## Strands Agents SDKとは？

Strands Agents SDKは、AIエージェント開発のためのPythonライブラリです。モデル駆動型アプローチを採用し、以下の特徴があります：

- **軽量＆柔軟**：シンプルでカスタマイズ可能なエージェントループ
- **モデルに依存しない**：Amazon Bedrock、Anthropic、OpenAIなど多様なモデルプロバイダーをサポート
- **高度な機能**：マルチエージェントシステム、自律型エージェント、ストリーミングサポート

## サンプルコードの解説

今回紹介するサンプルコードでは、テキスト処理ツールを持つAIエージェントを作成します。

### 1. カスタムツールの定義

```python
@tool
def word_count(text: str) -> int:
    """テキスト内の単語数をカウントします。"""
    return len(text.split())

@tool
def character_count(text: str) -> int:
    """テキスト内の文字数をカウントします（スペースを除く）。"""
    return len(text.replace(" ", ""))

@tool
def reverse_text(text: str) -> str:
    """テキストを逆順にします。"""
    return text[::-1]
```

`@tool`デコレータを使って、AIエージェントが使用するツールを簡単に定義できます。ドキュメント文字列はAIがツールの目的を理解するために使われます。

### 2. エージェントの作成

```python
def create_simple_agent() -> Optional[Agent]:
    # 試すモデル（inference profileを含む）
    models_to_try = [
        ("us.anthropic.claude-3-7-sonnet-20250219-v1:0", "Claude 3.7 Sonnet"),
        ("us.anthropic.claude-3-5-sonnet-20241022-v2:0", "Claude 3.5 Sonnet v2"),
        ("us.anthropic.claude-3-haiku-20240307-v1:0", "Claude 3 Haiku"),
        ("us.amazon.nova-micro-v1:0", "Nova Micro"),
    ]

    for model_id, model_name in models_to_try:
        try:
            # Bedrockモデルを設定
            bedrock_model = BedrockModel(
                model_id=model_id,
                region_name="us-east-1",
                temperature=0.3,
                max_tokens=1000,
                streaming=True,
            )

            # エージェントを作成
            agent = Agent(
                model=bedrock_model,
                tools=[word_count, character_count, reverse_text],
            )

            # 動作確認
            agent("Hello")
            return agent

        except Exception as e:
            continue

    return None
```

このコードは複数のモデルを順番に試み、最初に成功したモデルでエージェントを作成します。これにより、利用可能なモデルに自動的に適応します。

### 3. エージェントの実行

```python
# サンプルクエリ
queries = [
    "Hello world from Strands Agents の単語数を教えて",
    "Python is awesome の文字数は？（スペースを除く）",
    "Strands Agents SDK というテキストを逆順にして",
    "AI agents are the future という文の単語数と文字数を両方教えて",
]

for query in queries:
    response = agent(query)
    print(f"🤖 回答: {response}")
```

エージェントは自然言語で指示を受け、適切なツールを選択して実行します。日本語と英語の混合クエリにも対応可能です。

## 実行結果例

```
📝 質問 1: Hello world from Strands Agents の単語数を教えて
🤖 回答: "Hello world from Strands Agents"の単語数は5です。

📝 質問 2: Python is awesome の文字数は？（スペースを除く）
🤖 回答: "Python is awesome"のスペースを除いた文字数は15文字です。

📝 質問 3: Strands Agents SDK というテキストを逆順にして
🤖 回答: "Strands Agents SDK"を逆順にすると "KDS stnegA sdnartS" になります。

📝 質問 4: AI agents are the future という文の単語数と文字数を両方教えて
🤖 回答: "AI agents are the future"の単語数は5語、スペースを除いた文字数は16文字です。
```

## 使い方のポイント

1. **コマンドライン引数でのクエリ**：`python simple_example.py "あなたのクエリ"` で直接質問できます
2. **モデルの選択**：複数のモデルを定義し、利用可能なものから自動選択
3. **ストリーミングサポート**：`streaming=True` でリアルタイムレスポンスが可能

## まとめ

Strands Agents SDKを使えば、わずか数十行のコードで機能的なAIエージェントを作成できます。カスタムツールの定義からモデル選択、エージェント作成まで、すべてがシンプルで直感的です。
見習いデータアナリストの僕が思う数学の重要度

# こんにちは！
今回はちょっと数学について
語っていこうと思います。
一応数学科で4年間数学について学びましたので
多少語る資格はあるかな？と考えてます笑
ということで早速いきましょう

## 自己紹介
少しだけ自己紹介をすると
3年前に山形大学の理学部理学科数学コースを
卒業後、大手のホームセンターにDX担当を
希望して入社したものの
すぐには行けないと言われ、即転職。
転職先では英語が多少できるという理由から
某メガサプライヤーでブレーキのSEを
やっていました。
が、激務&営業に干される事件があり、心を病み
データを扱える会社に転職したいと思い、
再度転職して現在は見習いデータアナリスト
として研修が終わったところです。

ゆくゆくはデータサイエンティストに
なりたい僕がデータアナリストとして数学が
必要か、また数学は重要なのかについて
考えたので共有します。

# データアナリストに数学は必要?
結論から言うと必ずしも必要というわけでは
ないと思います。
というのも僕がいる会社のホームページには
うちの人間にはこんな強みがありますという
チャートを出しているのですが、
統計やらPythonがちょっと弱い...
という感じなのです。
統計やらPythonがちょっと弱い
というチャートを見る限り「数学が強い集団」
とは言えないですよね。

ですが、皆さんかなり優秀ですごく仕事が
できる人たちですし取引先のお客様からの
信頼も絶大です。
アナリストの守備範囲であれば
特に数学がめっちゃできる必要はなさそう。
じゃあ、アナリストで数学ができると
なにがいいのか？
って話になってきますよね

# アナリストが数学強者で良いことは？
ずばりアナリストが数学強者であるメリットは
### データ分析ができることです！
は？データアナリストなんだから
そりゃデータ分析できるだろ
と思ったあなたはとても正しいです。大正解。
ただ、ある意味では不正解だと思ってます。
どういうことかというと
ツールを使用するだけなら
高校数学程度のレベルでもできるので
データ分析ができてしまいます。

じゃ、大学数学まで学んだお前は
なにができるの？
ということですが、本格的なデータ分析を
行うことができます。
まだ、自分が持っている知識と業務が
どんなふうにつながるか
分かっていないので全然偉そうなことは
言えませんが、複雑なパターンの解析を
する際には、微積分や線形代数の知識が
必要になってきます。さらに、
機械学習アルゴリズムを理解するために
確率論や統計学が関わっているので
必然的に数学をできる必要があります。
僕は一応大学まで数学をやっていたので
このあたりに少し明るいわけです。

# アナリストにとって数学は重要なのか？
ぶっちゃけ、僕は重要だと思いますが、
色んなタイプのアナリストがいて良いとも
思っています。
例えば僕の会社では営業畑にいたから
そっちに強いアナリストとか
エンジニアをやってたので
データエンジニアリングに強いアナリストとか
僕のようにエンジニアリングも数学もやれる
データサイエンティスト志望の
アナリストがいたりとか、十人十色です。
それぞれがそれぞれの場所で輝けばいいのです。
僕はこれからいろいろと経験を積むと
思いますが、その中で自分が得意な数学を
業務に絡めていこうと思います。

# 終わりに
というわけでデータアナリストの卵である
僕の私見を書いてみました。
現状はこう思っていますが、だんだん考え方が
変わるかもしれませんので
タイムカプセル？記録的な？感じで
今思うことを書きました。
データサイエンティストになれたら
またこんな記事書いてみようかな？
それではまた次回！
【AWS】Amazon Q CLIでAWSアイコンクイズを作ってみた


## はじめに
AWSが、**Amazon Q CLI**を使ってゲームを作成、内容をブログ等で公開すれば**特製Tシャツ**がもらえるイベントを開催していたのでそれの紹介です

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/

https://community.aws/content/2xIoduO0xhkhUApQpVUIqBFGmAc/build-games-with-amazon-q-cli-and-score-a-t-shirt

:::note warn
**2025/5/20-2025/6/20 までの開催です**
:::



## 作成したもの
どうせならAWSに関連したゲームがいいなと思い、**AWSアイコンクイズ**を作りました🎮


![Videotogif (7) (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/0ddf0bb4-f7bd-41df-ad19-dad767936633.gif)
※1.2倍速

### タイトル画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/1e1785c5-0fba-4703-bda0-1bb50b1b0cc2.png" width=70%>

### 問題画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/7cf16721-eadc-4b24-8873-1e79f0e7cfb8.png" width=70%>

### リザルト画面
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/200e51c5-512d-40b1-9e9b-f3695427b875.png" width=70%>

### 解答画面
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/34a82a43-d4f7-4d0c-8062-a91211f9d635.png" width=70%>

### ルール
・表示されるアイコンに対応するサービス名を4択から答える
・問題は全部で10問、正解数と回答時間によってレベルが決まる

```bash:レベル一覧
1. AWS EXPERT（AWSエキスパート）
   • 新基準: 10問正解（満点）、かつ回答時間が30秒以内

2. AWS PROFESSIONAL（AWSプロフェッショナル）
   • 基準: 9問以上正解、かつ回答時間が60秒未満

3. AWS ASSOCIATE（AWSアソシエイト）
   • 基準: 8問以上正解、かつ回答時間が90秒未満

4. AWS PRACTITIONER（AWSプラクティショナー）
   • 基準: 6問以上正解

5. BEGINNER（ビギナー）
   • 基準: 6問未満の正解
```

#### AWS EXPERT（AWSエキスパート）はこれくらいのスピード(まぁまぁむずかった)

![Videotogif (6).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/34f2617e-2702-43d7-af0c-6f82f041afac.gif)

## 開発プロセス(めちゃ簡単に)
AWS Builder ID の作成～Amazon Q CLIのインストールまでの手順は [はじめに](#はじめに) のリンクを参照して行いました

Amazon Q CLIがインストールできたら、
```bash:
q chat
```
で、Amazon Qとのセッションを開始し、以下の内容を指示しました

```bash:
 pygameを用いて、AWSのアイコン当てゲームをカレントディレクトリに作成してください。
・AWSのアイコンが徐々に表示され、そのアイコンに対応するAWSサービス名を4択から選択する。
・問題は全部で10問あり、最後に正解数、回答タイムが表示され、レベル判定がされる。
・仮想環境はpyenvを使用する。
```

この指示をもとに出来上がったゲームがこちら

![Videotogif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085218/1b662282-1714-40e9-aacc-f99303e14c92.gif)

UIは改善の余地があるとして、機能としてはイメージ通りのものができています👍

:::note warn
指示が雑すぎましたね
:::

次に、見栄え・使い勝手を良くするため、以下の観点の修正を行いました

```bash:
・アイコンのサイズは統一する
・アイコンの種類を増やす
・UIはサイバーパンク風にする
・リザルト画面に答え合わせボタンを配置し、問題の答え・解説を見れる画面を作成する
```

その他、細かいところを少し修正を加え、最終的に [作成したもの](#作成したもの) で載せているゲームが完成しました🎉

AWS Builder IDの作成から最終的な完成までは1時間くらいでした(この記事まとめるほうが時間かかった)

:::note warn
AWSアイコンのダウンロードがCLIでは実行できず(制限されている?)、そこだけ手動でダウンロードしました。
:::

## GitHub
作成したコードはこちら
ゲームに挑戦・改良してみてください

https://github.com/makopen/aws-icon-game.git

## 感想
・コードをまったく触らず&短時間でこのレベルのゲームが作れるのはただただ感動でした

・エージェント型AIということで、ローカルファイルの操作・Bashコマンドの実行等、いろいろやってくれるので便利でした

・Amazon Qは、AWS環境に特化した知識を持つAIアシスタントで、トラブルシューティングやインフラ構築などのAWS関連タスクへの幅広いサポートが強みなので、AWSを使う際は、Amazon Qをどんどん活用していきたいですね(Amazon Qに書かせた)

・Tシャツ楽しみです👕
[SwiftUI 🔰] onAppearとonDisappearを簡単に説明してみました【初心者向け】

SwiftUIには、ビューが表示されたときや消えたときに処理を実行できる便利な機能があります。
それがonAppearとonDisappearです。


onAppearとは？
--
onAppearは、画面やビューが画面に表示されたタイミングで呼ばれる機能です。
例えば、画面に入ったときにデータを読み込んだり、処理を始めたりするのに使います。

使い方の例
--
```swift
struct ContentView: View {
    @State var message = "画面を表示してください"

    var body: some View {
        Text(message)
            .padding()
            .onAppear {
                message = "画面が表示されました！"
                print("onAppearが呼ばれた")
            }
    }
}
```

onAppearのクロージャ（中のコード）は、ビューが画面に表示された瞬間に実行されます。また、何度も画面を行き来すると、そのたびに呼ばれます。


onDisappearとは？
---
onDisappearは、ビューが画面から消えたタイミングで呼ばれる機能です。
例えば、画面を離れるときに保存処理をしたり、監視を止めたりできます。


```swift
struct ContentView: View {
    @State var message = "画面を表示してください"

    var body: some View {
        Text(message)
            .padding()
            .onDisappear {
                print("onDisappearが呼ばれた")
            }
    }
}
```

まとめ
---
| メソッド          | タイミング         | 使いどころの例            |
| ------------- | ------------- | ------------------ |
| `onAppear`    | ビューが画面に表示された時 | データの読み込み、初期設定      |
| `onDisappear` | ビューが画面から消えた時  | 保存処理、監視停止、タイマー停止など |


以上、onAppearとonDisappearを簡単に説明してみました！
アプリ開発でこれらの機能は必ず役に立つのでぜひ使ってみてください！✌️
[Java SE 17 Silver] javaコマンドについて

## 概要
いつも忘れがちなjavaコマンドについてまとめておく

## javaコマンドとは
- JVMを起動するためのコマンド
- JVM起動後は、指定されたクラスをロードし、このクラスの`main`メソッドを実行する
- `java 完全修飾クラス名 [引数]`の形式で実行する
- **※ 完全修飾クラス名：パッケージ名を含むクラス名**

例：以下のようなクラスがある場合
```java
package com.example.demo.original;

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

- Java SE11以降で、`javac`コマンドを使わずに「**ソースファイルモード**」で直接実行できる。
  - `java ソースファイル名.java [引数]`の形式で実行する
  - この場合、メモリ上にコンパイル後のクラスファイルに相当するバイトコードを出力している
```shell
> java /Users/takumi.kuroiwa/java-silver-se-17-practice/demo/src/main/java/com/example/demo/original/Main.java
Hello, World!
```

- `javac`コマンドを使ってコンパイルしてから実行する場合は、コンパイルして生成されたクラスファイルを実行する
  - `javac 完全修飾クラス名.java`でコンパイル：`javac`コマンドは「`ソースファイル名.java`」を指定する
  - `javac -d . demo/src/main/java/com/example/demo/original/Main.java`でコンパイル：`-d`オプションを使うと、**指定したディレクトリにクラスファイルを出力する**
  - `java 完全修飾クラス名 [引数]`で実行： `java`コマンドで実行する際には「完全修飾クラス名」を指定する

```shell
> javac -d . /Users/takumi.kuroiwa/java-silver-se-17-practice/demo/src/main/java/com/example/demo/original/Main.java
> java com.example.demo.original.Main
Hello, World!
```
実行時は`java com.example.demo.original.Main`のように、**パッケージ名を含む完全修飾クラス名を指定する。**

- ソースファイルモードでの実行の際には、ファイル拡張子が`.java`はなしでも実行可能
  - `--source`オプションを使うと、Java SE11以降でソースファイルモードでの実行が可能

```shell
> mv Main.java Main
> java --source 21  Main
Hello, World!
```

### クラス内にインナークラスがある場合
- インナークラスを含むクラスを実行する場合、インナークラスの名前も含めて完全修飾クラス名を指定する必要がある
  - `javac`でコンパイルすると、Main.class と Main$InnerClass.class が生成される

```java
package com.example.demo.original;

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
        InnerClass inner = new Main().new InnerClass();
        inner.innerMethod();
    }

    class InnerClass {
        public void innerMethod() {
            System.out.println("This is an inner class method.");
        }
    }
}
```

ソースファイルモードで実行
```shell
> java /Users/takumi.kuroiwa/java-silver-se-17-practice/demo/src/main/java/com/example/demo/original/Main.java
Hello, World!
This is an inner class method.
```

クラスファイルをコンパイルして実行
※ **`javac`コマンドでコンパイルすると、インナークラスのクラスファイルも生成される**

```shell
> javac -d . /Users/takumi.kuroiwa/java-silver-se-17-practice/demo/src/main/java/com/example/demo/original/Main.java
> java com.example.demo.original.Main                                                                        
Hello, World!
This is an inner class method.
```

### javaコマンドの引数
- `java`コマンドの引数は、スペースで区切られた文字列として渡される

```java
package com.example.demo.original;

public class Main {
  public static void main(String[] args) {
    System.out.println(args.length);
    for (String arg : args) {
      System.out.println(arg);
    }
  }
}
```

- バッククォートでエスケープされると文字として扱われるので注意
```shell
> java Main.java a \" a\" "a "b c
5
a
"
a"
a b
c
```

## まとめ
- `java 完全修飾クラス名 [引数]`で実行
- Java11以降はソースファイルモードあり（`java ソースファイル名.java`）
- javacでコンパイルする場合は`-d`オプションで出力先を指定
- インナークラスはコンパイル後、`$`記法でクラスファイルが作成される

## 参考文献
- [徹底攻略Java SE 17 Silver問題集［1Z0-825］対応](https://book.impress.co.jp/books/1123101160)
【SwiftUI　🔰】PickerとPickerStyleの使い方を説明してみました！

SwiftUIのPickerは、ユーザーが選択肢の中から1つ（または複数）を選ぶためのUIパーツです。

 Pickerとは？
 --
Pickerは、iOSアプリで「ドロップダウンメニュー」「リスト選択」「セグメント選択」などを作るためのコンポーネントです。


基本の使い方
---
```swift


struct ContentView: View {
    @State var selectedColor = "赤"
    let colors = ["赤", "青", "緑"]

    var body: some View {
        VStack {
            Picker("色を選んでください", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            Text("選んだ色：\(selectedColor)")
        }
        .padding()
    }
}

```
![Screenshot 2025-06-02 at 22.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/37d7267d-b720-4200-b18e-24c41a6e5c1c.png)


様々なPickerStyle
---
SwiftUIでは、PickerStyleを使ってPickerの表示スタイルを変えることができます。

1.wheel スタイル （良くアプリで見るスタイル）
--

![Screenshot 2025-06-02 at 22.59.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/82ccc483-5394-4c00-acda-ad944a5bc07f.png)

 iPhoneのアラーム設定のようなUIになります。

2.segmented スタイル (タブ切り替え風）
---

![Screenshot 2025-06-02 at 22.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/c88fa21c-107f-4b79-b945-b731c696d4b3.png)

例:
```swift
struct ContentView: View {
    @State var selectedColor = ""
    let colors = ["🍎", "🍌", "🍇"]

    var body: some View {
        VStack {
            Text("好きなフルーツを選んでください")
                .font(.title2)

            Picker("フルーツ", selection: $selectedColor) {
                ForEach(colors, id: \.self) { color in
                    Text(color)
                }
            }
            .pickerStyle(SegmentedPickerStyle())

            Text("あなたが選んだフルーツ：\(selectedColor)")
                .padding(.top, 20)
        }
        .padding()
    }
}
```
- → 横並びのボタンで簡単に切り替えられるスタイルです。

3.MenuPickerStyle (ポップアップスタイル）
----
![Screenshot 2025-06-02 at 22.58.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/943d1850-6754-4c84-a66c-d405a0ead090.png)
- ラベルをタップするとメニューが開く形式。スペースを取らずに済みます。

まとめ
--
| 項目   | 内容                                         |
| ---- | ------------------------------------------ |
| 用途   | 選択肢の中から1つを選ぶUI                             |
| 基本構文 | `Picker("ラベル", selection: $state) { ... }` |
| スタイル | `.wheel`, `.segmented`, `.menu`などで見た目を変更可能 |
APIを使ったデータ取得・加工処理をしたときSnowflake/AWSどちらのコストが安い？

本記事では、コンピューティングからテーブル格納までをSnowflake上で全て行った場合と、前者をAWSへ寄せて、テーブル格納のみをSnowflakeで行う２つのパターンでどちらがコストを抑えることができるかを紹介します。

:::note info
本記事は元々、データパレード様のブログに私が執筆した技術ノウハウとして掲載したものです（下記）。Qiitaを通じてより多くの方に届けられれば、そして技術者の方と知見を共有し、フィードバックをいただく目的で許可をいただき掲載しました。
:::
https://data-parade.com/api-to-snowflake-on-aws/

# 処理フローの違い
## Snowflakeで処理

1. SnowflakeのNotebookもしくはWorksheet上にPythonコードを記述した関数を作成
1. INSERT INTO SELECT文もしくはMERGE文でテーブルへデータ挿入

こちらの処理の流れについては下記の記事にて紹介しています。

https://qiita.com/ebi_ebi_dev/items/b90f3f4bac7567498224

## AWS

1. Lambda上にPythonコードを記述。取得したデータをS3へCSVとして格納
1. COPY INTO文を使ってテーブルへデータをインポート

こちらの手法については下記の記事にて紹介しています。

https://qiita.com/ebi_ebi_dev/items/d58cb431197908800b36

https://qiita.com/ebi_ebi_dev/items/4b68cbaf81f324fc536c

# コスト計算

本記事ではコンピューティング（Pythonの実行時間）のコストに焦点を当ててみます。

下記はInstagramの場合を例に、取得するデータごとのPythonの実行時間を記録したものです。あまり件数自体も多くなく、数分で終わっている点はご了承ください。

取得データ|データ取得・加工処理時間|クレジット消費
---|---|---|
アカウントのプロファイル情報|5.1秒|1 x 1/60 = 1/60
投稿情報|90.1秒|2 x 1/60 = 2/60
投稿へのコメント|113.1秒|2 x 1/60 = 2/60
エンゲージメント（REEL）|16.5秒|1 x 1/60 = 1/60
エンゲージメント（FEED）|124.7秒|3 x 1/60 = 3/60

ウェアハウスはX-Small、Standardタイプとしています。こちらを日次バッチで毎日実行した場合、コンピューティングについてひと月（30日）でどの程度かかるか試算してみます。

## Snowflakeで処理
Snowflakeは最低でも１分単位のクレジット課金です。仮に10秒で終わる処理も１分として、X-Smallであれば1/60クレジット消費されます。

表の右の列を合計すると、およそ9/60クレジット消費しています。本記事の投稿時点では1クレジットあたり$2.85なので、こちらの処理を一度実行するたび、$2.85 × 9/60 = $0.4275かかります。したがって、ひと月あたり下記の程度かかります。

\\$0.4275 × 30日 = **$12.825** /月

こちらにINSERT INTO SELECTによる挿入処理の時間分加算されますが、今回は無視して話を進めちゃいます。

# AWS
LambdaでのPython処理およびS3への格納という構成になります。１日一回実行なので、リクエスト数は30、実行時間は表から合計350秒程度、メモリは512MB（0.5GB）となっています。

これが意味するところは、**Lambdaは無料枠で全然収まる**ということです。他はS3への保管料金になります。

こちらはAWSのコンソール画面での紹介で少々粗い計算ですが、月で$1前後になるかと思います。

![スクリーンショット-2025-05-21-21.02.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4099119/ac4f3d37-ee88-431b-9277-bc519e41aefb.png)

SnowflakeではS3からのインポートにCOPY INTO文をそれぞれ実行します。現状の件数では、60秒以上かかることはないため、データ取得の数5つ分 x 1/60 × $2.85 = $0.2375が一回の実行にかかります。よって、ひと月（30日）実行すると下記のようになります。

\\$0.2375 × 30日 = \\$7.125 /月

ここにAWSの料金（$1）を足して下記になります。

\\$7.125 + \\$1 = **$8.125** /月

# 結論
前章をまとめるとこのようになります。

* Snowflake：$12.875 + [INSERT INTO SELECT処理でかかる従量料金]
* AWS：$8.125

すなわち、コンピューティングをAWS側に寄せることですくなくとも$4/月以上のコスト削減が見込めます。INSERT INTO よりもCOPY INTOで代替することを推奨する点は、Snowflakeの公式ドキュメントでも紹介されているので、実際の効果についても確認できました。

https://docs.snowflake.com/ja/sql-reference/sql/insert#usage-notes

AWSとSnowflakeでうまくコストを下げられるように、計算やデータ格納の役割分担を検討できると良いですね！
覚えておきたい必須知識

## 備忘録

### データ構造
##### 連結リスト
ノードの並びを表すデータ構造．双方向連結リストでは，前のノードと次のノードの位置を示す．
##### 木，トライ木，グラフ
木はノードで構成されるデータ構造であり，グラフはノード同士に辺を持った者の集まりである．まだあんまり理解できていない．
##### スタックとキュー
スタックは，後入れ先出しのデータ構造で，キューは先入先出しのデータ構造である．
##### ヒープ
子ノードが常に親ノードよりも大きいか等しい（もしくは常に親ノードよりも小さいか等しい）木構造のことである．
##### ベクタ，配列リスト
配列の長さを自由に変更できる配列のこと．
##### ハッシュテーブル
キーとインデックスを関連づけたデータ構造．

### アルゴリズム
##### 幅優先探索
同じ深さの要素を先に走査するアルゴリズム．
##### 深さ優先探索
ノードを行けるところまで走査して行き，詰まったら他の路に切り替えて走査するアルゴリズム．
##### 二分木
in-order,post-order,pre-order走査がある．
##### マージソート
配列を要素が一つずつになるように二分割して行き，並び替えるアルゴリズム．
##### クイックソート
適当な基準値を設定し，その大小でグループを作成する．グループごとに同じことを行い，並び替えを行うアルゴリズム．
### 概念
##### ビット操作
ビット単位でデータを操作すること．シフトやxorなど．
##### メモリ
スタックはCPUによってメモリが管理されており，ヒープは自分でメモリを管理する必要がある．大きさはヒープのほうが大きい．
##### 再帰
関数が自身を呼び出すテクニック．
##### 動的計画法
大きな問題を小さな問題に分割して考え，最終的な解を得る方法．
##### ビッグオー記法，スペース
ビッグオー記法とは，空間計算量や時間計算量がどのように増加していくかを簡易に表す方法．スペースは文字リテラル．

<br>
自分なりに解釈したものなので間違えてたら教えてください．
Felt で絵文字を使う

# はじめに
[Felt](https://felt.com) のサイトをざっと眺めていると、私がいうのもなんですが、とてもセンスが良いというか、視覚的に魅力的な表現が多いと思います。[絵文字マップ](https://felt.com/map/Emoji-Map-b0aAvseVSfqnbHSlq2p1pD?loc=14.34,13.08,3.32z)はこれまで見たことのない、面白い地図です。ということで、Feltが力を入れている絵文字を使った簡単な地図作成を試してみました。詳しくは、以下のブログポストに書かれています。

https://felt.com/blog/map-symbols-and-icons

# 何をするか？
バス停のオープンデータをダウンロードして、簡単なバス停マップを作ってみます。データは以下からダウンロードできます。沖縄	シェープ、geojson形式	世界測地系	2022年（令和4年）

https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-P11-2022.html

# 作業手順
まずはじめに、Feltにログインして、新規の地図を作ります。
その次に、先ほどダウンロードしたZIPファイルをそのまま地図上にドラッグ&ドロップします。

ZIPの中には、ShapefileとGeoJSONファイルが入っているので、優秀なFeltは、両方ともデータ変換するので、二つのレイヤがしばらくすると現れます。一つだけ必要なので、片方は削除しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59906/9d4dc87a-28b6-433b-94ca-fe7e3694eb46.png)

その上で、レイヤの設定画面のIconのドロップダウンリストをクリックし、開いたメニューでEmojiを選びます。

<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59906/3b65468c-41f4-4b75-b144-6d4734b4d0dc.png">

Searchウィンドウでbusと入力すると、かわいらしいバスの絵文字が出てきます。

<img width=200 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59906/a02bd34c-21f2-4f39-b030-4c3e6b52cda6.png">

バスのアイコンを選んで、アイコンのサイズを変えると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59906/41845b1e-549b-4220-abd9-e50efe01e3fa.png)

あっという間に、バスルートの絵文字地図の完成です。

https://felt.com/map/Chong-Nawa-basuTing-matupu-vg9BrG9AKgS66AvXZ00AucSD?loc=26.17287,127.72297,13.1z&share=1

私もFeltの人のように、絵文字を駆使した地図を作ってみたいので、どこかで試したいと思います。
ちなみに、アイコンの画像をアップロードして使うこともできるので、表現の可能性は無限大ですね。楽しい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59906/98d41955-06ca-490e-9d29-505453ddb43a.png)
Claude Codeのコスト爆増を防ぐVSCode/Cursor拡張をつくった

最近、[Claude Codeの使用料金を可視化する神CLIツール](https://zenn.dev/ryoppippi/articles/6c9a8fe6629cd6)が話題ですが、そもそもコマンドを打たずにIDE上で料金確認できたら楽じゃね!?と思い、VSCode(とCursor)の拡張機能をつくりました(もちろんClaude Codeで)。

ソースはこちらです。

https://github.com/suzuki0430/ccusage-vscode-extension

## 拡張機能でできること

- 当日のClaude Code利用料金を下部バーに表示(30秒間隔で更新)
- クリックで「過去7日間の料金＆トークン利用量の表」を表示
- VSCodeでもCursorでも使える

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

![スクリーンショット 2025-06-02 22.04.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/c507d149-4481-4fbd-94b7-415f0f8fc987.png)

クリックで詳細が出ます。

![スクリーンショット 2025-06-03 9.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/3b1fc709-0f3d-4c62-b2c1-82bf94836c97.png)

## インストール方法(3分でできます)
### 1. クローン&ビルド
```bash
git clone https://github.com/suzuki0430/ccusage-vscode-extension.git
cd ccusage-vscode-extension

# 依存関係インストール
npm install

# TypeScriptコンパイル
npm run compile

# 拡張機能パッケージ化
npm run package
```

カレントディレクトリに`ccusage-vscode-0.1.0.vsix`ファイルができます。

### 2. VSCodeへのインポート
- EXTENSIONSタブの「…」 → Install from VSIX → 作成したVSIXファイルを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/3d93afca-6942-464d-8afe-661aa760add0.png)


- インポート後は下部バーに料金表示(表示されなかったらVSCodeを再起動)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/6dc556aa-24d5-4abc-b75e-e163d7d7c787.png)

### 3. Cursorへのインポート

- EXTENSIONSサイドバーにVSIXファイルをドラッグ＆ドロップでOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/d1911283-23bc-4a94-a6b0-43da1f4d50f6.png)

## さいごに

API利用で使いすぎが心配な方も、MAXプランの元が取れているか気になる方も、こちらの拡張で手軽にチェックできます！ぜひ使ってみてください！

## 参考

https://github.com/ryoppippi/ccusage
【SQL】第6回勉強日記 問題解答 難易度★★☆☆☆ 内容：JOIN

## お疲れ様です！
今日も今日とてSQLをやっていきます
毎日やることに意味があると思っているので...
では早速今日の問題です！

## 今日の問題
今日はこちら！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053502/e80cb2d3-5349-4471-b437-83d95d7c6b64.png)
今日はテーブル結合を使えと言われているので
とりあえずテーブル結合は使用しましょう！
あとは前回と同じような感じがします！
JOINする場所を変えるだけですかね！

【私の解答】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053502/74889311-52d2-4f2d-b5f6-736c95ef0b85.png)
予想通り、前回とだいぶ似ているクエリになりましたね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4053502/31472f40-e8c5-4c8e-bf3b-4c9a6320f78a.png)
んでもって、やっぱり7ゴールになってるし...
ただ方向性はあっているのでクエリの書き方は
だんだん身についてきたかなという感じです！

## 終わりに
最近はSQLの本を読んだり、数学を勉強したり、統計を勉強したり、
BIについての記事を読んだり、~~ゲームをしたり~~大忙しです！
明日はSQLの勉強日記と数学に関する記事をあげられればと思います！
それではまた明日！
[Swift UI🔰] のToggle の使い方を説明してみました！

 Toggle とは？
 ---
「設定アプリでWi-Fiをオン・オフにするスイッチ」のようなUIを作れるコンポーネントです。
ユーザーが「ON / OFF」を切り替えられるときに使います。



```swift


struct ContentView: View {
//Toggleの状態（ONかOFFか）を保持する変数です
    @State  var isOn = false

    var body: some View {
        VStack {
            Toggle("Wi-Fi", isOn: $isOn)
            Text(isOn ? "Wi-Fi is ON" : "Wi-Fi is OFF") //ラベル付きのスイッチを表示します。$isOnで状態を双方向バインディングします。
             .foregroundStyle(.white)
                   .frame(width: 130,height: 30)
                   .background(.blue)
                   .cornerRadius(10)
        }
        .padding()
    }
}

```

例:
![Screenshot 2025-06-02 at 22.37.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977742/abdc9f11-a810-4587-8058-93e8249971c8.png)
--


まとめ
--
| 項目  | 内容                              |
| --- | ------------------------------- |
| 機能  | ON/OFFを切り替えるスイッチ                |
| 必須  | `@State` で状態を持つ、`$変数名` でバインディング |
| 利用例 | 設定画面、通知ON/OFFなど                 |


以上、Swift UIのToggle の使い方を説明してみました！
初心者の方は、ぜひ参考にしてください！
インターフェースとは？

## インターフェースとは？
"このインタフェースを呼んでください"と言われると、単なる関数または関数仕様のことを指すこともあるが、ここで言及したいのは、オブジェクト指向における"インターフェース"。

## オブジェクト指向における"インターフェース"とは？
キーワード
* 純粋仮想関数
* ポリモーフィズム
* 
https://zenn.dev/yuki_tu/articles/8def6851273424
メソッドの実装強制
将来追加されるであろうクラス(機能)に追加すべき関数を強制し、
呼び元からの機能実行の仕方を、機能に応じて、変更しなくてもよいようにする。
https://www.gixo.jp/blog/5159/

何が良いか。
何が良くないか。注意点
Zustand？useRef？状態管理の使い分けをわかりやすく整理してみた

# はじめに

React開発でよく出てくる「状態の持ち方」には、`useState`だけでなく、`useRef`や外部の状態管理ライブラリ（例：Zustand、Recoil、Jotaiなど）もあります。

この記事では特に「Zustandのようなstate管理ライブラリ」と「useRef」の使い分けについて、どんなケースでどちらを使うべきかを具体例とともに解説します。

# useRef を使うべきケース

Reactで `useRef` は以下のような「**描画に関係しない情報の保持**」に使います。

**例1：setIntervalのIDを保持する**

```tsx
const intervalRef = useRef<NodeJS.Timeout | null>(null);

useEffect(() => {
  intervalRef.current = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => clearInterval(intervalRef.current!);
}, []);
```

再描画する必要がないため、stateではなく`useRef`が最適です。

**例2：キー押下イベントの一時的なフラグ**

```tsx
const isKeyDown = useRef(false);

const handleKeyDown = () => {
  isKeyDown.current = true;
};

const handleKeyUp = () => {
  isKeyDown.current = false;
};
```

このように、DOMの状態を追うだけでUI更新がいらないケースも `useRef` を選びます。

# Zustand（など）を使うべきケース

`Zustand`はグローバルに状態を管理できる軽量なstateライブラリで、次のようなユースケースに向いています。

**例1：ログイン中のユーザー情報などをアプリ全体で共有**

```ts:store.ts
import { create } from "zustand";

export const useUserStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));
```

```tsx
// 任意のコンポーネントで使える
const user = useUserStore((state) => state.user);
```

複数コンポーネント間で共有したい状態には`useRef`では不十分で、Zustandなどのライブラリを使う方が適切です。

**例2：ゲームやフォームなどで複数状態をまとめて管理したいとき**

```ts
const useGameStore = create((set) => ({
  score: 0,
  isRunning: false,
  start: () => set({ isRunning: true }),
  stop: () => set({ isRunning: false }),
  increment: () => set((state) => ({ score: state.score + 1 })),
}));
```

`useState`や`useReducer`で煩雑になりがちなケースでも、Zustandを使えばロジックを外部に切り出してスッキリ書けます。

# 🤔 使い分けの判断ポイントまとめ

以下のように考えると選択しやすくなります。

* **再描画したいなら useRef ではなく state（useState や Zustand）**
* **一時的で再描画不要な値は useRef で十分**
* **複数コンポーネントにまたがる or 状態が複雑 → Zustandなどの状態管理ライブラリ**
* **1つのコンポーネント内だけで完結 → useState または useRef**

| 目的・特徴                     | Zustandなどの状態管理ライブラリ | useRef         |
| ------------------------- | ------------------- | -------------- |
| **状態に変更があったら再描画したい**      | ✅ Yes               | ❌ No（再描画されない）  |
| **他のコンポーネントと状態を共有したい**    | ✅ Yes               | ❌ 基本できない       |
| **一時的なデータ・DOM参照を持ちたい**    | ❌ 状態としては不適切         | ✅ 最適           |
| **状態を永続的に保持したい（グローバル）**   | ✅ グローバルストアで可能       | ❌ コンポーネント単位の寿命 |
| **パフォーマンスに配慮したい（再描画最小化）** | 🔺（適切な設計が必要）        | ✅ 再描画しないので高速   |

# おわりに

Reactの状態管理は柔軟ですが、適切な選択をしないとバグやパフォーマンス劣化につながります。

* `useRef`は **「描画に関係しないけど記憶したい情報」**
* Zustandのようなライブラリは **「アプリ全体で状態を統一的に扱いたい」**

と整理すると、判断しやすくなると思います。
【HTML5】合格体験記

# はじめに
この度、HTML5 Professional Certification Level.1に合格いたしました！
申込手順や勉強方法を残します。
（対象：受験を悩んでいる方、受験が決まっている方）

# 筆者のスペック
2024年
4月：未経験でIT企業に入社
～6月：Javaの研修を受講
9月：Java Silver11　合格
12月：Python3(基礎試験)　合格

2025年
1月：PHP7初級　合格
4月：情報系大学（通信制）　入学
5月：HTML5 Level.1　合格

実務経験は、圧倒的にJavaが多めです。
HTMLは、入社後の研修と実務で少し触ったことがある程度で受験しました。

# 申込方法
①[Pearson VUE](https://wsr.pearsonvue.com/testtaker/signin/SignInPage/EDUCO?locale)に個人情報を登録する。
②HTML5 level.1を選択し、受験会場を選択する（自宅などでのオンライン受験可）。
③受験料を支払う。

# 勉強期間
4か月ほど（計画的に取り組めばもっと早く合格できると思います！）

# 勉強方法
今回受験するにあたり、
[HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集 Ver2.5対応](https://www.shoeisha.co.jp/book/detail/9784798176468)
を用いて学習しました。

あまりにも無計画・不定期な勉強だったので、かかった日数は割愛し、取り組んだ順序のみご紹介します。

①★★★の問題のみを1周
②★★★と★★の問題を1周
③模擬試験以外のすべての問題を1周
④③を1周
⑤本書の最後についている模擬試験を1周
⑥間違えた問題のみ解く

上記のような流れです。

①～③くらいまで、すごく期間を空けてしまったので、③時点では、★★★の問題は3周目のはずなのに、全然覚えておらず、苦戦しました。
⑤は、53%程度だったと記憶しています。実際の試験の合格点は、60～70%と言われているため、模擬試験の時点では、点数が足りていませんでした。

ちなみに、私は、資格の勉強はできるだけ少ない教材で勉強したいという考えがある(みんなそうかも?)のですが、③時点で、解説のみでは理解しきれないと思い他のツールを使うことにしました。
[PLAYCODE](https://playcode.io/)というサイトを利用し、実際に動かして確認しました。
※「START CODING」ボタンを押下し、「HTML」を選択するとすぐ利用できます。

個人的に試してみて一番良かったのは、linear-gradientプロパティ(グラデーションをかけることができるCSSのプロパティ)です！本書は白黒なので、PC上でカラーでみると感動しました。知識に感情が乗ったことにより、記憶に残りやすくなりました。

`background: linear-gradient(to right, #00eeff, #001aff);`

あと、本書の解説では、問題に出題された要素やプロパティに関連するものが羅列されているだけのものもあったり、少しラフに解説されている部分もあったので、④以降は、分からない部分はChatGPTに聞きました。聞きたいこと他にもあったけど、言葉足らずだったかも！と思ったら、こちらの思いを汲み取ってくれて、完璧になんでも教えてくれました。本当に、生成AIには脱帽です。

# さいごに
自社の先輩に、「コスパいい資格教えてください」と相談し、おすすめしてくださったので、今回受験を決めました。
（私にとっては、コスパよくはなかったです（笑））

受験前は、属性・プロパティの意味すら危うく、また、HTMLとCSSで使うものがごちゃごちゃになっていました。それが、試験のおかげで少しは整備された知識になった気がしています！

また、勉強していくうちに、HTTPやその他APIの知識も増えたので、結果的に受験して良かったです！

この記事が参考になったと感じていただけましたら幸いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3892685/032cced8-3bc5-496a-93bb-7a06003de69d.png)
MacアプリがWebクローリング出来ない問題の解決手順

# MacアプリがWebクローリング出来ない

前回の続きで、Webページからデータをクローリングする
Macアプリを開発中なのですが
URLを入力してボタンを押しても
「A server with the specified hostname could not be found.」
となりクローリングが出来ません

今回はその解決手順のメモです

結論から言うと２つの手順が必要でした
①App Transport Security (ATS) の設定
②ネットワーク権限の追加

* * *

①のApp Transport Security（ATS）が何かと言うと
Appleがセキュリティ強化のために導入した仕組みです。
iOS 9、macOS 10.11から標準で有効になっています。
ATSの目的は、「アプリから安全でないネットワーク通信を防ぐ」 ことです。

要はこいつに一時的に「すべてのネットワーク通信を許可する」 設定を行います。

①の手順は、
1. Info.plistファイルを見つける
Xcodeでプロジェクトを開く
左側のプロジェクトナビゲーター（ファイル一覧）で Info.plist
（Infoとだけ書いてあるファイル） を探す
通常は プロジェクト名のフォルダ内にあります

2. Info.plistを開く
Info.plist をクリックして開きます。

3. 設定を追加
Xcodeの表形式で追加
Info.plistが開いたら、右クリック → "Add Row" をクリック
新しい行が追加されるので、キー名に App Transport Security Settings と入力
型が自動的に Dictionary になります
その行の左側の三角をクリックして展開
展開された中で右クリック → "Add Row"
キー名に Allow Arbitrary Loads と入力
型を Boolean に変更
値を YES に設定

成功すると図のようになります。

![スクリーンショット 2025-06-02 17.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790258/a5104d80-57e4-4f36-9ef1-94311d405fac.png)


②の手順は以下の通りです

1. プロジェクト設定を開く
Xcodeでプロジェクトを開いている状態で
左側のプロジェクトナビゲーター（ファイル一覧）の一番上にあるプロジェクト名
（青いアイコン）をクリック
メイン画面の中央にプロジェクト設定が表示されます

2. ターゲットを選択
プロジェクト設定が開いたら、左側のアプリ名（通常はプロジェクト名と同じ）を
クリックして選択
選択されると青くハイライトされます

3. Signing & Capabilitiesタブを開く
上部のタブで 「Signing & Capabilities」 をクリック
画面には現在の設定が表示されます

4. Capabilityを追加
「App Sandbox」の中にある２つの設定、
「Outgoing Connections (Client)」 ← これを選択
「Incoming Connections (Server)」 ← これも選択

この２つにチェックを入れて完了です

下の画像をご参照下さい。

![スクリーンショット 2025-06-02 16.59.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2790258/9489c2ab-5959-4825-9005-a9163a9e85df.png)


これでMacアプリがクローリングできるようになりました😊
シェルソートについて調べてみた

## はじめに
　大学の授業でシェルソートについて習ったので、自分自身の理解を深める目的で、最低限の情報だけ記事にまとめてみました。

## 操作
　配列を一定間隔で分け、それぞれに対して挿入ソートをすることを繰り返していき、最後に全体を挿入ソートをすることでソートを行います。

挿入ソートについては前回の記事で解説しています。

https://qiita.com/Prosamo/items/b60e6d2b299e17a7f80d

### 可視化
　間隔を4, 2, 1と変化させる場合を例に可視化してみました

![shell_sort_animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3922095/7662404d-2822-4147-9990-878f67a24e4b.gif)


## 計算量
　シェルソートの計算量は、配列を切り出す間隔の決め方によっても変化します。具体的な計算量は示せませんが、O(n^1.25)～O(n^1.5)程度と言われているようです。先ほどは説明のため、間隔に4, 2, 1を採用しましたが、高速化の観点からは,、一般に以下のような漸化式がよく採用されるようです。

 ```math
 \begin{align}
   h_0 &= 1\\
   h_{n+1} &= 3 h_n + 1
 \end{align}
 ```
※ただしhはデータ数の1/9を超えない程度

計算量について、詳しい解説をしてくれている記事がありました。

https://qiita.com/tomabou/items/ae27209e782d2c04ff17

## 安定ソートではない
　切り出した部分ごとに挿入ソートを適応しますが、挿入ソート自体が安定ソートでも、切り出した範囲ごとにソートする過程で、順番が入れ替わることがあります。よって安定ソートではありません。
 
## 内部ソート
　シェルソートは切り出した部分ごとに、比較対象の値以下のものを見つけたら入れ替えていくソート方法ですが、後述のコードを見ればわかる通り、入れ替えなどの操作が配列自身のメモリ領域内で完結できるので、内部ソートです。

## コード
pythonで書くと、こんな感じです。
```python
def shell_sort(arr):
    n = len(arr)
    hs = [4, 2, 1]
    for h in hs:
        for i in range(n-h):
            di = arr[i+h]
            for j in range(i, -1, -h):
                if arr[j] <= di:
                    j += h
                    break
                arr[j+h] = arr[j]
            arr[j] = di
```
※h = 1のとき挿入ソートになります
## 総評

### 強み
- 比較的高速
- 内部ソート

### 弱み
- 安定ソートではない

→　比較的高速な内部ソートなので、メモリの使用量が制限される場合に適正あり。

## 最後に
　ここまで読んで下さりありがとうございました。挿入ソートのコードを少し弄るだけですし、安定ソートである必要がない場面なら、積極的に使った方がよさそうですね。といっても自分で書いたソートを利用する場面なんてなさそうですが。（少なくともPythonメインでやっているうちは）
UbuntsuからiPad経由でVPNへ繋ぐ(備忘録)

## 初めに
筆者は中国に住んでおりYouTsubeやLINE等に接続するにはVPNが欠かせません。
搜搜加速器というVPNに課金をして使っているのですが機器毎にアプリを入れなけれならず不便です。
長年WiFiへ接続するだけでVPN接続できれば便利なのにと考えていました。
やっとやり方が分かったので記録として残します。

## IPAD側
ShadowroketというアプリでVPNへ接続します。
代理(proxy)を有効にし、IPアドレス及びポート番号を控えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4054974/aee22ff0-6478-4678-b479-c9d026b73aa6.png)
Shadowroket

ルータ等でゲートウェイを変更できればどんな機器でもWiFiに繋ぐだけでVPNを自動的に享受できる筈ですが生憎筆者のWiFiでは対応しておりませんでした。

## LinuxのFireFox
搜搜加速器はUbuntsuに対応しておらず、VPNへ繋ぐ時にだけWindowsに切り替えたり面倒な運用を行って来ました。
主にQiitaに投稿する時にVPNが必要なので一旦UbuntsuのFireFoxだけ代理の設定をしました。

設定を開き以下のように設定をするだけです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4054974/85adfbf2-45d2-4cb1-8bcb-9d57c1ba98d7.png)

## Windoiws
プロキシを開きせってい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4054974/c0f8ad30-e7ee-4d42-9f73-a1bc1ffa4822.png)

## iPhone
![iPhoneProxy.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4054974/ba2e4c64-1d23-460a-b5e1-07078af08ead.jpeg)
機械系専攻のプログラミング勉強その１

初めまして！

大学4年生のくろと申します。

大学では機械系の勉強をしていて、プログラミングは初心者レベルのものです。

簡単に自己紹介をします。

学部4年生
学部：機械系（制御工学専攻）
使用している言語：Python, C, Swift
過去のPJ: HTML/CSSによるWebサイト公開
趣味：自転車
最近はChatGPTとGeminiでわいわいしてます



と自己紹介は終わりまして、今回どうして記事を書こうと思ったかというと、これからの私の勉強ルートをここに記したかったからです。

この拙い記事が、私と同じような初学者の人々のためになれば幸いです。

次回から色々書いていきます！！
是非とも応援よろしくお願いします！
他のサービスからGitHubにリポジトリを移動させたいとき

# 使うもの
github importerなるもの

https://docs.github.com/ja/migrations/importing-source-code/using-github-importer/importing-a-repository-with-github-importer#importing-a-repository-with-github-importer

# codecommitの場合
まずこれのステップ3のようにgitの認証情報を取得する

https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-gc.html

後はgithubのドキュメントに記載のある通りに`Import repository`を押して移行元・移行先の情報を入力するフォームに行く。
codecommitのクローンURLとgitの認証情報を入れて、リポジトリの名前決めてimportボタン押したらOK!

インポート中みたいなくるくる回る画面に行くけど、これは閉じて大丈夫って書いてあったので閉じて大丈夫。
(自分は怖いので閉じない派。
※ちなみにこの画面の時エラーは非同期で出てくるけど完了は非同期で出てこない。ページ再読み込みすると完了が出てくる。)

ちょっと経ったらメール来るので問題なく完了したよって言ってたら終わり。

# これがしっかり書かれている記事
このQiitaのメモ見ずにこのサイト見てやる方が分かりやすい

https://dev.classmethod.jp/articles/codecommit-to-github-migration-guide/
C++におけるvectorとdequeの違い

## 事の発端
以下のAtCoderの問題を解いている時にvectorで実装していたらTLEしたので、調べたところdequeなるコレクションがあるらしい。

https://atcoder.jp/contests/abc389/tasks/abc389_c

## 記事の結論

- コレクションの先頭要素も追加、削除がある場合はdequeの使用を検討する
- コレクションの末尾への追加、削除とランダムアクセスに強いのはvector

## vectorの特徴
メモリは連続した領域に確保される配列型のデータ構造をしている。
連続したメモリ領域に要素が順番に格納されるため、ランダムアクセスが高速で、かつ順番に要素が格納されるから末尾への操作に強い。
あらかじめ確保したメモリ容量よりも多く要素を管理しようとすると、新しい大きな配列を作ってコピーする。（これが起きると遅い）
要素の挿入や削除が起きると、例えば先頭の要素の削除をする場合は配列を詰めようとするためO(N)だけ時間がかかる。

## dequeの特徴
両側から挿入と削除が出来るキュー(Double Ended Queueでdequeらしい)
実装的には一定サイズのブロックに分けて要素を格納し、それらをインデックス表で管理している。先頭や末尾のブロックにスペースがあればO(1)で要素の追加が出来る。スペースがないと新しくブロックを確保してそこに要素を詰める。先頭と末尾両方でデータの追加と削除をしてもデータのお引越しが発生しない。(vectorとの差別化ポイント)
名前の由来的にキューならランダムアクセス出来なくね？という気持ちになるが、先に述べたようにどのインデックスの何番かはすぐわかるため、vectorよりも遅いもののO(1)でランダムアクセスが可能。
弱点として、スペースの確保が動的でメモリの連続性も保証されないため、ポインタ操作や予め使用するメモリを確保しておくと言った操作はできない。
Audacityで録音データに任意のBGMを編集・追加する

# はじめに

録音データにBGMを付けたい！！


そんな場合にAudacityを使ってBGMを編集/追加する手順を備忘録も兼ねて書いておきたいと思います。

まあ正直、
そんなのはyoutubeとかにあるハンズオンとかAIに訊けば十分だろ…と思ってたんですが、
最近は20秒以内に３回もCMが流れるようなクソみたいなものが多く、検索性もAIの方が割と良い状況なので記事化することにしました。。
それに案外こういう基本的なUI説明がどこにもなかったりするのが個人的にはよくあるので。


前置きはこの辺で、以下手順です。
※2025年6月時点の内容です。




# 手順
〇前提
任意の録音データとBGMデータを用意しておく

1.PCにインストールしたAudacityを起動する
2.ファイル＞「開く」で編集したい録音データを表示する
3.ファイル＞「オーディオをインポート」より背景で流したいBGMを追加表示する

問題なく読み込めたら以下のような状態になる。


![スクリーンショット 2025-06-02 213448.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709549/04186732-9fe5-417a-bed0-8e51c8855a4c.jpeg)



4.BGMの方を録音データの尺にクリック＆ドラッグして合わせる（一致したら両方のデータに黄色い線が表示される）
![スクリーンショット 2025-06-02 213448.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2709549/0e8abc5c-a167-4ddf-b5e4-ced2583e86b1.jpeg)

5.左上にある再生ボタンを押しながら「エフェクト」のバーでBGMと録音の音声を調整する

6.作成できたら停止ボタンを押す
7.ファイル＞「オーディオをエクスポート」から任意の保存場所へエクスポートする（ファイル形式はMP3などに設定可能）
国土地理院の標高データ（DEM）Rustで高速にパースしてGeoTiffに変換するツールを公開しました！（Terrain RGBもあるよ）

みなさんこんにちわ！

みなさんは突然「あーーーー地表面の形状を可視化してぇなーーーーー」と思うことはありますか？

僕はあります。
（4年ぶり2度目）

以前こんな記事を公開しました！

https://qiita.com/nokonoko_1203/items/b99aa733cb215305f8aa 

これはQGISで国土地理院のDEM（数値標高モデル）XMLファイルを読み込むQGISプラグインを作った記事なんですが、おかげさまでとてもたくさんの方に利用してもらっています。
（現在、僕は関わっていないんですが…）

https://plugins.qgis.org/plugins/QuickDEM4JP/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/2c96476e-4286-406f-a6a6-de94ed040b9f.png)

この中で利用している内部モジュールで`convert_fgd_dem`というライブラリも自作しています。

https://github.com/MIERUNE/convert_fgd_dem/tree/c6070928b30de0ea63a4a36f133bb7b2d00abcb7 

なんですが！結構処理が非効率だったり、そもそもPythonで書かれていて遅かったりします。

もう4年も経ったし、最近はRustも書いてるしAIも発展しているしで色々状況は変わったので「ちょっとリファクタするかー」と思ったのでガッと作り直してしまいました！

今回はQGISプラグイン化していないんですが、PyO3とmaturinでPythonバインディングも作ってるので、いつかQGISプラグインにも移植しようと思います！

## 使い方

### インストール

今回作ったのはこちらのライブラリです。

https://github.com/nokonoko1203/japan-dem

crates.ioに公開しているので、Cargoでサクッとインストールできます。

Rustがインストールされていない場合は以下を参考にしてコマンドを1つ実行するだけでインストールできるようになります。

https://www.rust-lang.org/learn/get-started

もしくは、curlでバイナリを直接インストールすることもできます。

```bash
$ cargo install japan-dem
or
$ curl --proto '=https' --tlsv1.2 -LsSf https://github.com/nokonoko1203/japan-dem/releases/download/${VERSION}/japan-dem-installer.sh | sh
```

### 基本的な使い方

利用方法はとても簡単です。

```bash
# 単一XMLファイルの変換
japan-dem input.xml -o output_dir

# ディレクトリ一括変換（複数DEM結合しない）
japan-dem input_dir/ -o output_dir

# ZIPファイルを処理（複数DEM結合）
japan-dem input.zip -o output_dir --merge

# Terrain-RGB形式で出力
japan-dem input.xml -o output_dir --terrain-rgb

# 並列処理のスレッド数を明示的に指定
japan-dem input_dir/ -o output_dir --threads 8
```

QGISなどで読み込ませるとこんな感じでよく見るDEMが表示されます。

QuickDEM4JPプラグインと比較すると20倍超の速度が出ていたので、大規模に変換したい場合はこちらのツールで変換されると良いのではないでしょうか！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/64f8b323-23fb-4a61-95fd-9ed59e65ca48.png)

ちなみにTerrain-RGBも綺麗に変換できていそうです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/203944/053d886b-238c-44a9-a1a8-572377a57090.png)

## Pythonバインディングの実装

せっかくRustで高速なパーサーを作ったので、Pythonからも使えるようにしたくなりました。

現代ではPyO3を利用してこんな感じで簡単にバインディングを作れます。
（作成したRustの関数などをPythonで呼び出すための特殊な記法で修飾してあげるだけ）

https://github.com/nokonoko1203/gsi-dem/blob/1af9e2a161a26730a7d811b4eca4b4019a4bbe8d/src/python.rs

（ちなみに、こんな感じで公開していますが、CIが微妙に上手くいってなくて最新版がアップロードされていないかもしれません。）

https://pypi.org/project/japan-dem/

### Pythonでの使い方

```python
import japan_dem

# XMLファイルを解析
dem_tile = japan_dem.parse_dem_xml("input.xml")
print(f"Mesh code: {dem_tile.metadata.mesh_code}")
print(f"Size: {dem_tile.rows}x{dem_tile.cols}")

# Terrain-RGB GeoTIFFとして出力
japan_dem.dem_to_terrain_rgb(dem_tile, "output.tif")
```

## 終わりに

今回はRustで高速なDEM（XML）パーサーを作ってみました！
また、Pythonバインディングも提供することで、既存のGISワークフローにも簡単に組み込めるようになりそうです！

オープンソースで公開しているので、ぜひ皆さんも使ってみてください！
バグ報告や機能要望もお待ちしています。

- **GitHub**: https://github.com/nokonoko1203/japan-dem
- **crates.io**: https://crates.io/crates/japan-dem
- **PyPI**: https://pypi.org/project/japan-dem/
Claudeにローカルフォルダを操作させる方法を試してみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389386/a0002bb0-bf1f-4dc4-84e1-e5bb1567e366.png)

## はじめに

現在、フロントエンドエンジニア2年目として働いている者です。
最近、ClaudeやMCPサーバーまわりの技術に興味を持ち始め、いろいろと試行錯誤しながら学んでいます。

今回は、Claudeにローカルフォルダを操作させる機能を試してみたので、その方法とポイントをまとめてみました。似たようなニーズを持つ方の参考になれば嬉しいです！

簡単にClaudeについて紹介すると、Anthropic社が開発した対話型AIです。
ChatGPTのように自然な応答や高い安全性を特徴とし、APIを通じてさまざまな用途に活用できます。
詳しくは以下リンクを参照してください。

https://www.anthropic.com/claude

## 前提条件・準備

環境
Windows 11
node v20.11.0
npx 10.5.2

今回の環境は **Windows 11** ですが、**Mac** でも同様の手順で実行可能です。

mcpサーバーとの接続？でnpxを実行するようなので、事前にNode.jsのインストールが必要です。

Claudeにローカルフォルダを操作させるには、AnthropicのMCPサーバーが提供する **`Filesystem`** 機能に接続する必要があります。そのために、まず **Claude Desktop** をインストールする必要があります。

Claude Desktopは、ローカル環境とClaudeを接続するための公式クライアントアプリで、ローカルフォルダへのアクセスやファイル操作を可能にするインターフェースを提供します。

https://claude.ai/download

## 設定方法

ここからは、Claudeにローカルフォルダを操作させるための環境構築手順を紹介します。

### 1. claude_desktop_configを編集する

まず、claude_desktop_configを開きます。
Claude Desktopから開く場合は、左上のハンバーガーメニューからファイル＞設定＞開発者を選択すると、以下のウィンドウが開くと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389386/ac2eae1a-3b5d-4724-a8f5-9509ce1e15b7.png)
すでに何らかのMCPサーバーとの接続設定をしている場合は「構成を編集」をクリックでclaude_desktop_configがあるフォルダーが開くと思います。
初期画面がどのような構成だったか忘れてしまったのですが、編集する的なボタンをクリックすると同様にフォルダーが開くと思います。


ファイルを開いたら、以下のコードを追加します。
/Users/usernameの部分は自身のディレクトリに書き換えてください。
また、Claudeにアクセスさせたいパスは変更することが可能ですので、
パスの部分を修正、追加してください。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/username/Desktop",
        "/Users/username/Downloads"
      ]
    }
  }
}
```

### 2. Claudeを再起動する
構成ファイルを更新した後、デスクトップ用のClaudeを再起動する必要があります。

再起動後、設定＞開発者を確認すると先ほど設定した内容が反映されていると思います。
エラーが出ている場合は、エラー内容を確認して修正してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389386/159261c3-aab3-4d68-a70e-5bbe7427fff0.png)

### 3. 試運転
これで設定は完了です。
試しに、「ルクレティウスの詩の一節を書いて、デスクトップに.txtとして保存して」と指示してみます。
実行すると以下のようにfilesystemとの連携の許可を求められますので、許可をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389386/abc3520b-42b1-4427-a664-3e6beee756eb.png)

無事にアクセスを許可したフォルダー内にlucretius_poem.txtが保存されました。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_389386_0c411694-1c82-49df-974c-88f35a3cf77b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389386/62b81c26-5996-4aeb-9113-02514d3d96ff.png)


## 終わり

今回は、Claudeにローカルフォルダを操作させる方法として、Claude DesktopとFilesystem機能を活用した手順をご紹介しました。

今回参考にしたページは以下です。より詳細に知りたい人は参考にしてみてください。

https://modelcontextprotocol.io/quickstart/user

ChatGPTでもClaudeのようにできないか調べてみたところ、調べた限りでは、できないようです。APIを利用すればできるみたいですが、お金がかかるので少々ハードルがあります。

Claudeはローカル環境と連携させることで、より実用的な活用が広がると感じました。セキュリティには十分配慮しながら、工夫次第で自分専用のAIアシスタントのように使うことも可能です。

今後もClaudeの機能やMCPサーバーについて学びながら、便利な使い方を模索していこうと思います。この記事が、どなたかの参考になれば幸いです！
Command PhaseScriptExecution failed with a nonzero exit codeのエラーの対処法

# 「Command PhaseScriptExecution failed with a nonzero exit code」エラーの解決方法

業務中にXcodeで遭遇したエラー「Command PhaseScriptExecution failed with a nonzero exit code」に少しだけ時間を取られてので、解決策を書いておきます！

> **注意**: プロジェクト名やファイルパスなど、機密情報は「名前」に置き換えています。

## エラーの詳細
ビルド時に以下のエラーメッセージが表示されました：

/Users/kosuke/ファイル名/Pods/Target Support Files/名前/名前-frameworks.sh: line 132: ARCHS[@]: unbound variable


## 解決方法
・Productionにある情報(arm64など）を消す
![スクリーンショット 2025-05-29 17.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3791320/59f33d04-e972-4a82-b7bb-5f14598692c8.png)

これによってエラーが解消しました。