OmniAICreator/Qiita-1.07M huggingface dataset:
【Obsidian初心者】資格勉強管理テンプレートを作って勉強を捗らせたい

# 【Obsidian初心者】資格勉強管理テンプレートを作って勉強を捗らせたい

## やりたいこと
1. 取りたい資格ごとに情報まとめノートを作成する
2. 資格ごとのタグも同時に作り、勉強メモにタグ付けできるようにする

## 実行環境
- Obsidian[^1](Version 1.8.7)
- Mac OS
- 使用プラグイン：
	- Templater[^2](Version 2.9.3)

## ソースコード
- テンプレート：

```markdown: template.md
<%* 
const title = await tp.system.prompt("資格名を入力");
const revised_title = title.split(" ").join("_");
const folder = "exams";
await tp.file.move(`${folder}/${title}`);
%>
---
title: <% title %>
date: <% tp.date.now("YYYY-MM-DD") %>
tags: ["資格/<% revised_title %>"]
---
# <% title %>

## 基本情報
- 概要URL：
- 試験日：
- 試験時間：
- 試験形態：
- 受験料：

```

- 実行例：

```markdown: Cloud_Practitioner.md
---
title: Cloud Practitioner
date: 2000-01-01
tags: ["資格/Cloud_Practitioner"]
---

# Cloud Practitioner
以下略
```

- ポイント：

1. `tp.system.prompt()`でプロンプト入力できるようにする
2. タグにスペースは使えないため、資格の名前にスペースがあるときは`_`で置換する
3. スラッシュを使うとタグはネストできる(参考[^3])

## まとめ
テンプレートを作ったのであとは勉強するだけ

[^1]: [Obsidian公式ページ](https://obsidian.md/)
[^2]: [TemplaterのGitHubリポジトリ](https://github.com/SilentVoid13/Templater/)
[^3]: [Obsidianのタグはスラッシュで階層化できる / 多元的な階層化の良さ](https://blog.3qe.us/entry/2023/06/28/010326)
Pythonの仮想環境venvをVSCodeで実行する

## はじめに
VSCodeでPythonの仮想環境venvに入ったと思ってpip install したら、

**グローバルにインストールするのを2回やらかした**ので記事にします。


### この記事でわかること

- VSCodeのターミナルでPythonの仮想環境venvの使い方が分かる

### この記事の対象者

- Python使う人
- VSCode使う人

### 動作環境

- Windows11
- Python 3.11.9 (pyenv-win)
- VSCode 1.97.2
普通のPythonやWinPythonでも一緒です。

## やり方
1. Git使っている場合は.gitignoreに.venv/を追加しておく
1. VSCodeのターミナルで以下を実行(今回はbash)
```python -m venv .venv```
1. VSCodeの右下になんか出るのでOK。またはPythonファイルにフォーカスして、右下のPython部分をクリックしてインタープリターを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/8c051089-072b-4f56-9679-c1127407f3d1.png)
1. Pythonファイルにフォーカスして、右下を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/136a1a0b-f849-4dcc-8eae-a6684e665f97.png)
1. VSCodeのターミナルで以下を実行(最初の.はsorce、コマンドプロンプトなら.venv/Scripts/activate.bat)
```. .venv/Scripts/acitvate ```
1. pip listをしてみる
    ```
    $ pip list
    Package     Version
    ----------- -------
    pip         25.0.1
    setuptools  65.5.0
    (.venv) 
    ```
1. (.venv)が最後につくようになる。この状態が**仮想環境**なのでpip installすると仮想環境内に保存されるようになる

## 抜ける時
1. 抜ける時はターミナルでDeactivateを実行
1. インタープリターの変更


## まとめ
もうグローバルインストールしません。(自戒)
あとVSCode右上の再生ボタンでも大丈夫という噂があります。
myGPTsで試験問題出題アプリを作ってみた　~ITストラテジスト試験の勉強方法~

## はじめに
ITストラテジスト試験の午前Ⅱ問題対策を効率的に行うために、独自のmyGPTで試験問題出題アプリを構築しました。本記事では、その構築プロセスや活用方法、学習効果について紹介します。

## myGPTを作成した背景
ITストラテジスト試験の午前Ⅱ問題は、専門知識を問う選択問題が多く、幅広い分野の理解が求められます。市販の問題集や既存のアプリも検討しましたが、解説が浅いものが多く、実例や深い解説をchatGPTに提供してもらうためにmyGPTを活用した自学自習の環境を整えたいと考えました。

## myGPTの構築方法
myGPTの構築にはAPIを使用せず、シンプルなファイルベースのロジックを採用しました。

### 実装手順
1. **ファイル構造の設定**
   - 各年度の問題データ、正解データをテキストファイルとして読み込ませる。図が必要な問題は図をzipファイルにして読み込ませる。

2. **問題の出題ロジック**
   - 例えば「2018年度の問題を解く」を選択すると、2018年の問題ファイルを読み込み、問1から順に出題。
   - 特定の問題（画像が必要な場合）は「図一覧.zip」から該当画像を解凍して表示させる。

3. **回答の正誤判定**
   - ユーザーが入力した選択肢（ア〜エ）を、対応する正解データファイルから確認して「正解」または「不正解」を表示。- 選択肢の語句に対して簡単な解説を提供する。

4. **選択肢の実装と学習効果向上**
   - 「次の問題に進む」「詳しく解説する」の2つの選択肢を提供。
   -最後に シラバスと照らし合わせ、分類別の問題数と正答率を計算、合否判定も実施。

## 実際のmyGPTの使用感
実際のmyGPTでは、以下のように利用できます。

- **年度別問題選択機能**: 何年度の問題を解くか選択することで、特定の年度の問題に集中できます。
- **順次出題機能**: 問1から順に出題され、飛ばしたい場合は「問〇へ」と指示するだけで簡単に次の問題に進めます。
- **即時解説機能**: 回答後、myGPTが即座に詳しい解説を行い、さらに深堀りした内容にも対応可能です。

一般的な学習アプリとは異なり、myGPTは解説を掘り下げるだけでなく、関連する知識や実務での応用例も即時に提示できるため、学びがより深まります。また、解説が対話形式で進むため、学習が単調になりにくい点も良いです。

## まとめ
IPAの情報処理試験対策において、myGPTは強力なサポートツールとなるように思います。特に午前Ⅱ問題のような知識系の学習には、AIの即時フィードバックが大いに役立つと思います。

作成したmyGPTは[こちら](https://chatgpt.com/g/g-67b54e5831dc819185d385c3e41805fe-itsutoratesisutoshi-yan-dui-ce-wu-qian-ii)
【Obsidian初心者】tp.frontmatterがundefinedになるときの対処方法

# 【Obsidian初心者】tp.frontmatterがundefinedになるときの対処方法

## 概要
- 筆者はObsidian初心者です。
- テンプレートからの新規作成時に、tp.frontmatterがundefinedになることでつまずきました。
- 理由と対処法が示されたGitHubのDiscussionがあったため、備忘録として引用しながらまとめていきます。

## 実行環境
- Obsidian[^1](Version 1.8.7)
- Mac OS
- 使用プラグイン：
	- Templater[^2](Version 2.9.3)

## つまずいたこと

- テンプレートからの新規作成時に、frontmatter(プロパティ)の内容を参照するため`tp.frontmatter.title`を使用したが、undefinedになってしまう

- 使用したテンプレート：

```markdown: template.md
---
title: "<% tp.system.prompt("タイトルを入力")%>"
---

# <% tp.frontmatter.title %>
```

- 作成されたノート(プロンプトには「テスト」を入力)：

```markdown: 
---
title: テスト
---

# undefined
```

## tp.frontmatterがundefinedになるのを回避する方法

- `tp.frontmatter`は**既にfrontmatterがあるファイルでのみ正しく動作する**
	- 参考：[frontmatter not picking up the value of the defined field.](https://github.com/SilentVoid13/Templater/discussions/763)
- テンプレートからの新規作成時には`tp.frontmatter`を使わない

- 今回やりたかったことの実現例：

```markdown: revised_template.md
---
<% const title = await tp.system.prompt("タイトルを入力") %>
title: <% title %>
---

# <% title %>
```

## 参考記事の解説

> The documentation starts with a file that already has frontmatter. 
> Then, the `tp.frontmatter` is applied.
> In other words, `tp.frontmatter` only works if the document already has pre-existing frontmatter to work with.
> If you are using this template on a new file, there is no frontmatter to parse because there is no frontmatter yet.

- 雑日本語訳：
	- ドキュメント[^3]は、既にfrontmatterがあるファイルであることを前提にしており、そのときは`tp.frontmatter`を適用することができます。
	- すなわち、`tp.frontmatter`は、既にfrontmatterがあるファイルでのみ動作します。
	- もし、新規ファイルの作成に`tp.frontmatter`を含むテンプレートを使用した場合は、そのファイルにはまだfrontmatterがないので、`tp.frontmatter`でパージングできるfrontmatterがないと言えます。

[^1]: [Obsidian公式ページ](https://obsidian.md/)
[^2]: [TemplaterのGitHubリポジトリ](https://github.com/SilentVoid13/Templater/)
[^3]: [Templaterのfrontmatterに関するドキュメント](https://silentvoid13.github.io/Templater/internal-functions/internal-modules/frontmatter-module.html)
【メイクToDo】自分好みにカスタマイズできるToDoアプリ

# ◆◇自分好みにカスタマイズできるToDoアプリ◇◆
 - パターンは1万通り以上！
 - あなただけのアプリに仕上げられます

https://apps.apple.com/us/app/%E3%83%A1%E3%82%A4%E3%82%AFtodo-%E8%87%AA%E5%88%86%E5%A5%BD%E3%81%BF%E3%81%AB%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%A7%E3%81%8D%E3%82%8Btodo%E3%82%A2%E3%83%97%E3%83%AA/id6741789561

## 『メイクToDo』で理想のアプリに出会いましょう。
 このToDoアプリでは、単なるタスク管理を超えて、あなたの個性が輝くカスタマイズ体験をご提供します。 
「使いやすさ」と「デザイン自由度」の両立で、日々のタスクがもっと楽しく、もっと効率的に！

## アプリ概要
アプリ内には、洗練されたヘッダ、魅力的なToDoリスト、直感的な追加ボタン、そして多彩な背景デザインが用意されています。

 ・ヘッダ、ToDoリスト、追加ボタン、背景など、各パーツを自由にカスタマイズ可能！ 
・なんと1万通り以上のパターンから、お好みのデザインをセレクトできる！ 
・お気に入りのカスタマイズはそのまま保存し、いつでも呼び出し可能！

あなた好みのデザインで、日々のタスク管理があなただけのアートに変わります。 
シンプルな操作性と多彩なカスタマイズ機能が、あなたのタスクライフを劇的にアップグレード！


![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/ba828030-c04d-461a-a45f-97358684f097.png)

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/5a79ce39-6217-4e20-b00d-61850ddc1ce7.png)


## 機能
* ヘッダ、ToDoリスト、追加ボタン、背景のデザインを自由にカスタマイズ
* 1万通り以上の豊富なデザインパターン
* お気に入りのカスタマイズ設定を保存可能
* 直感的でシンプルな操作性

-----

以上、最後までお読みいただきありがとうございます。 
あなたのタスク管理ライフがより快適に、よりクリエイティブになるよう、日々アップデートを続けています。
ぜひ、『メイクToDo』で、あなたの新しいタスク管理体験をお楽しみください！
3層スキーマ

データベースは、3層のスキーマ(枠組み)からなる

- 外部スキーマ(ユーザーから見たDB、ビュー)
- 概念スキーマ(開発者から見たDB、テーブル)
- 内部スキーマ(DBMから見たDB、データ物理的配置)

## 論理設計と物理設計

### 論理設計(概念スキーマの設計)

データを管理するためのデータモデルの設計

### 物理設計(内部スキーマの設計)

DDLによる実装やストレージの構成などの設計

### 概念スキーマはなぜ必要?

データ独立性を確保するのに、概念スキーマは絶対に必要

### データ独立性とは?

外部スキーマを変更しても、内部スキーマを変更する必要がない状態(論理的データ独立性)

もしくは、内部スキーマを変更しても、外部スキーマを変更する必要がない状態(物理的データ独立性)
【Swift】Queryで取得したデータのバインディング方法で悩んだ

## やりたいこと
SwiftDataで定義したモデル`TodoItem`をForEach内で展開し、Toggleにバインディングとして渡して`TodoItem.isDone`とチェックボックスを連動させたかった。

## 躓いたこと
ForEachで`todo`として展開してToggleにそのまま渡すと、当然ながら
```
Cannot convert value of type 'Bool' to expected argument type 'Binding<Bool>'
```
と怒られる。
なので何らかの形で`todo`ないしは`isDone`をバンディングにしてあげないといけない。
そこで[こちら](https://zenn.dev/holoholo/articles/db774b4eea9d67)を参考に、以下のようにしてみたところ。。。


```ContentView.swift
ForEach(todos) { todo in
    let bindedTodo = Bindable(todo)
    Toggle(isOn: bindedTodo.isDone) {       // ①
        // ...
    }
                            
    @Bindable var bt = todo
    Toggle(isOn: bt.isDone) {               // ②
        // ...
    }
    
    // ...
}
```

①はうまくいった。が②は↓のエラーが出る。
```
Generic parameter 'V' could not be inferred
```
ちなみに②を①の前に移動させたら↓に変わる。
```
Cannot reference invalid declaration 'todo'
```

## 解決策
②では`Toggle`に渡す際にドルマーク`$`をつけないといけないらしく、そこが原因だったもよう。
なので正しいコードは次の通り。

```ContentView.swift
ForEach(todos) { todo in
    let bindedTodo = Bindable(todo)
    Toggle(isOn: bindedTodo.isDone) {
        // ...
    }
                            
    @Bindable var bt = todo
    Toggle(isOn: $bt.isDone) {    // bt -> $bt
        // ...
    }
    
    // ...
}
```

## 考察
`Bindable()`はBindable型のオブジェクトを生成するイニシャライザであり、
>create bindings to mutable properties of a data model object that conforms to the Observable protocol.

だそうなので、それ自体がバインディングを有すると。
一方で`@Bindable`は付与しただけでバインディングになるわけではなく、バインディングを得るには`$`またはprojectedValueを用いる必要があると。

わかったようなわからないような。いや、わからない。
とりあえずバインディングやプロパティラッパーについての理解が乏しい（表面的）ことは明らかなので、一旦それらを深掘りしたい。

以上

### 参考
https://zenn.dev/holoholo/articles/db774b4eea9d67
https://developer.apple.com/documentation/swiftui/bindable/init(wrappedvalue:)
[Linux][command] ファイルの所有者管理_chown, chgrp

# chownコマンド
~~~terminal:
# chown [オプション] ユーザー:グループ ファイル名
# chown [オプション] ユーザー.グループ ファイル名
~~~

| オプション | 英語の由来 | 説明 |
|:--|:--|:--|
|           | change owner | 設定しない場合、所有者やグループは変更されない |
| `-R` | recursive | 指定したディレクトリ以下のすべてのファイル・ディレクトリの所有者を再帰的に変更 |

## 使用例
### ユーザーのみを変更する場合
~~~terminal
# chown user1 filename
~~~
- `filename` の所有者を `user1` に変更
- グループは変更されない

### ユーザーとグループを変更する場合
~~~terminal
# chown user1:group1 filename
or
# chown user1.group1 filename
~~~
- `filename` の所有者を `user1` に変更
- グループを `group1` に変更

### ディレクトリ以下すべてのファイルを再帰的に変更
~~~terminal
# chown -R user1:group1 /path/to/directory
or
# chown -R user1.group1 /path/to/directory
~~~
- `/path/to/directory` 以下のすべてのファイル・ディレクトリの所有者を `user1`、グループを `group1` に変更

# chgrpコマンド

~~~terminal
# chgrp [オプション] グループ名 ファイル名
~~~

| オプション | 英語の由来 | 説明 |
|:--|:--|:--|
| (default) | change group | 指定したファイルやディレクトリのグループを変更 |
| `-R` | recursive | 指定したディレクトリ以下のすべてのファイル・ディレクトリのグループを再帰的に変更 |
| `-c` | changes | 実際に変更が行われた場合にのみ詳細情報を表示 |
| `-f` | silent, quiet | エラーメッセージを表示しない |
| `-v` | verbose | 処理の詳細を表示 |

## 使用例

### ファイルのグループを変更する場合

~~~terminal
# chgrp group1 filename
~~~

- `filename` のグループを `group1` に変更します。

### ディレクトリ以下すべてのファイルを再帰的に変更する場合

~~~terminal
# chgrp -R group1 /path/to/directory
~~~

- `/path/to/directory` 以下のすべてのファイル・ディレクトリのグループを `group1` に変更します。

### 実際に変更が行われた場合のみ詳細情報を表示する場合

~~~terminal
# chgrp -c group1 filename
~~~

- `filename` のグループが `group1` に変更された場合、その詳細が表示されます。

### エラーメッセージを表示しない場合

~~~terminal
# chgrp -f group1 filename
~~~

- `filename` のグループ変更時にエラーが発生しても、メッセージは表示されません。

### 処理の詳細を表示する場合

~~~terminal
# chgrp -v group1 filename
~~~

- `filename` のグループ変更の詳細が表示されます。



# Ping-t
- [3250_chown](https://mondai.ping-t.com/question_subjects/31/question_sessions/32581786/progressing_questions/499228195?result=true)
- [3251_chown](https://mondai.ping-t.com/question_subjects/31/question_sessions/32919483/progressing_questions/504279528)
- [3252_chown :, chown .](https://mondai.ping-t.com/question_subjects/31/question_sessions/30870646/progressing_questions/472924562)
- [3254_chown -R :, chown -R ., chgrp -R](https://mondai.ping-t.com/question_subjects/31/question_sessions/31232403/progressing_questions/478592409)
エクセルからAPI経由でbacklogの課題一覧を取得する

　誰でも使えるように、XLS形式の古い形式のエクセルをあえて使用し、より簡単に実行できるよう、追加の外部参照なしでbacklogの一覧を取得するエクセルシートを作成しました。

　良ければ使ってみてください。

　出来れば、それ！ここにあるとか、backlogとエクセル連携（パワークエリーとかなしで！）の情報交換よろしくお願いいたします。
　backlog利用者少ないのか、開発者少ないのかオープンソース等の情報なくて悲しいです。
　なんとか、便利にbacklog使いたい。。。
 
　詳細は、
https://github.com/yamamoto-ryuzo/portal/tree/main/backlog

　以下に必要項目を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2015118/f510a432-887f-4249-bf49-850ebcfdba12.png)
【React】初めて作ったアプリを改良してみた

# はじめに
[前回](https://qiita.com/IchidaU/items/6781c87ffb1af12dd61d "Reactで初めてのアプリ制作")とりあえずローカルで動くところまで作った学習記録アプリの機能を改良し、テストとCI/CDまでを行いました。

機能自体は簡単なCRUDアプリなのですが、完成にこぎつけるまでに様々な学びを得ることが出来ました。アプリは下記のリンクで公開しています。

https://github.com/IchidaU/learning-record-app

後ほど書きますがめっちゃ大変でした。

# 使用技術
- Vite
- React
- Supabase
    - バックエンドDB
-  Jest
    -  React Testing Library
-  Firebase
    -  デプロイ先
-  GitHub Actions
    -  CI/CDに使用

# 前回からの変更点
1. Supabaseを使用してのデータ永続化
1. 削除機能の実装
1. Firebaseへのデプロイ
1. Jest、React Testing Libraryを使用してのテスト
1. GitHub Actionsを使用したCI/CD

## 1．Supabaseを使用してのデータ永続化
前回作ったアプリはデータをstateに保持していただけなので、リロードしたりタブを閉じて開き直したりすると、登録したデータは消えてしまっていました。
そこで、Supabaseと連携してデータを永続化しました。

データベースを扱うのは初めてだったため、設定などに苦労するかな、と予想していましたが、YouTubeや公式ドキュメントに詳しい解説があったのもあり、割とすんなり実装できました。

どちらかというとLoading画面の実装に苦労しました。こちらは当初`Suspense`で実装しようとして諦めた経緯があるので、次回以降はここの改善にチャレンジしたいですね。

https://qiita.com/IchidaU/items/444a674e3aa84ea2f3ba

https://qiita.com/IchidaU/items/fc300d10656066801086

## 2. 削除機能の実装
ここは少し悩みました。
DBへの反映はうまくいったのですが、結果を一覧に即時反映させる実装のイメージがわかず困っていたところ、@Sicut_studyさんからヒントを頂きつつなんとか完了までこぎつけました。

## 3. Firebaseへのデプロイ
以前、インターンでFirebaseを少し触った経験があった（デプロイまではしていない）ので、これは特に苦もなく実現できました。

とはいえ、自分の作ったアプリが実際にオンラインで動いているのを見ると嬉しいですね。

## 4. Jest、React Testing Libraryを使用してのテスト
ここが最も苦労しました。
ハンズオンで導入し、サンプルテスト自体は動いたものの、いざ自分のやりたいテストを実装しようとしても何をどう書けばいいのかわからない、というところからのスタートでした。

ドキュメントや他の人が書いた記事を見たり、導入したサンプルコードを読み解いてもイメージの掴めないところが多く、AIに聞きながら書いていく形になりました。
ところが、いざ書き上げても実行してみるとエラーに次ぐエラーの嵐で、まさに試行錯誤の日々でした。

いくつかテストを書いていくうちに、そもそもやりたいことを実現するには何をすればいいかわかっていない、ということに気付き、まずはそこを書き出していくところから進めると、序盤ほど悩まずに書けるようになりました。

## 5. GitHub Actionsを使用したCI/CD
以前Dockerを勉強していたこともあってか、ymlファイルの作成・編集自体は苦労しなかったのですが、いざデプロイ、という段になるとエラーを解消するとまたエラー、といった感じで手こずりました。特に、GitHub Actons上ではデプロイが成功しているにもかかわらず、実際にはアプリが表示すらされない、という事態が起きたときは何が起きているかわからずにエラー解消に手こずりました。

https://qiita.com/IchidaU/items/910037475236087eebf0


# 気付き・学び
- 環境構築～CI/CDによるデプロイを一気通貫で学ぶことで、個人開発における流れを把握することができた
- プログラミングにおける自動テストを始めて経験することで、テストにおける目標設定及びコード実装前のテスト要件の洗い出しの重要性に気付いた
- ReactにおけるAPI連携方法及び非同期処理について理解を深めることができた
- GitHub Actionsとはどういうサービスか、またその仕組みについて学べた
- コード書いてるとき以上にyml書いてデプロイを試行錯誤してるときが楽しかった
- 今回の開発からCodiumを導入し、その威力に驚いた（特に入力支援）
- ただ、問題解決においてついAIに頼りがちになってしまう面があるため、基礎を理解するまでは一定のルールを設けて運用する必要性は感じた（特に問題解決後の復習は必須）

# 苦労した点
- 非同期処理について、頭ではなんとなく理解していても実装においてどのような配慮が必要かをあまり理解できておらず、機能実装時やテスト制作時に苦労した
- テストの課程は何をやるべきかわからず、とにかく苦労した。今から振り返ると、そもそもテストとは何を目的に行い、それを達成するために何が必要なのかを理解していなかったので、いきなりコードを書こうとせずそこの整理やインプットから始めるべきだった
- ドキュメントがあまり親切でないこともあり、JestやReact Testing Libraryの書き方を理解するのに時間を要した。こういう場合はサンプルコード参考にとりあえず書いてみて、ダメなら調べてみる、を繰り返すのが結果的に早く覚えられそう

# 成長を感じた点
私は、JISOU入会以前にインターンに参加して挫折した経験があります。
そのときの課題はFirebaseを利用した会員管理アプリの制作とデプロイでした。
当時の自分は「constって何、コードに出てくるこの矢印みたいなの何」みたいな状態だったので、今から思うと失敗して当然だったのですが、そんな自分でもなんとかCRUDアプリを制作してデプロイするところまで成長することができました。

理想の自分に至るまではまだまだ学ばなければならないこと、克服しなければいけないことは多いですが、それでも今回の経験は一つの自信に繋がりました。

今後も学習を続けて、自分の作りたいものを作れるよう今後も努力したいと思います。

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼

https://projisou.jp
【Chakra UI】Tooltipが画面左上に表示されてしまう事象の解消方法

# はじめに

お疲れ様です、りつです。

Chakra UIには`Tooltip`コンポーネントという、ホバーした際に追加情報を表示してくれるUIが存在します。

https://www.chakra-ui.com/docs/components/tooltip

今回は、`Tooltip`コンポーネントを利用した際に発生した事象の解消方法です。
なお、Chakra UI v3を使用しています。

# 問題

以下の画像のように、参加者のアバターにカーソルを合わせた際に、ツールチップでユーザー名を表示させるようにしたいと考えていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/af16333d-2b89-4e4d-9393-8243b27f920a.png)

しかし、実際は画面の左上にツールチップが表示されてしまいました。
※ わかりにくいですが、以下の画像は参加者のアバターにカーソルを合わせている状態です。ロゴに重なる形でツールチップが表示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3911933/4fe41cdf-af25-454b-9217-02e8dc6ace50.png)

該当部部のソースコードは以下の通りです。

```react:src/components/pages/EventShow.tsx
<DataList.Item pt="4">
  <DataList.ItemLabel>参加者</DataList.ItemLabel>
  <DataList.ItemValue>
    <HStack>
      <Text alignContent="center">{event?.profiles?.length ? `${event?.profiles?.length}：` : 0}</Text>
      {event?.profiles?.map((profile) => (
        <Link onClick={() => onClickShowProfile(profile.profile_id)} key={profile.profile_id}>
          <Tooltip content={profile.user_name} openDelay={0} showArrow>
            <Avatar.Root size="xs">
              {profile.avatar_url ? <Avatar.Image src={profile.avatar_url} /> : <Avatar.Image src={defaultAvatar} />}
            </Avatar.Root>
          </Tooltip>
        </Link>
      ))}
    </HStack>
  </DataList.ItemValue>
</DataList.Item>
```

# 解決方法

`Tooltip`コンポーネントと`Avatar`コンポーネントのpropsに`ids`を付与する必要がありました。

```diff_tsx:src/components/pages/EventShow.tsx
<DataList.Item pt="4">
  <DataList.ItemLabel>参加者</DataList.ItemLabel>
  <DataList.ItemValue>
    <HStack>
      <Text alignContent="center">{event?.profiles?.length ? `${event?.profiles?.length}：` : 0}</Text>
      {event?.profiles?.map((profile) => (
        <Link onClick={() => onClickShowProfile(profile.profile_id)} key={profile.profile_id}>
-         <Tooltip content={profile.user_name} openDelay={0} showArrow>
-           <Avatar.Root size="xs">
+         <Tooltip content={profile.user_name} ids={{ trigger: profile.profile_id }} openDelay={0} showArrow>
+           <Avatar.Root size="xs" ids={{ root: profile.profile_id }}>
              {profile.avatar_url ? <Avatar.Image src={profile.avatar_url} /> : <Avatar.Image src={defaultAvatar} />}
            </Avatar.Root>
          </Tooltip>
        </Link>
      ))}
    </HStack>
  </DataList.ItemValue>
</DataList.Item>
```

# おわりに

今回は`Avatar`コンポーネントに対してツールチップを適応するパターンでしたが、`Button`のコンポーネントの場合は`ids`がなくても機能するようです。

# 参考

https://www.chakra-ui.com/docs/components/tooltip#with-avatar
Linux ライブラリ

# 周辺知識

## 実行可能ファイル

https://qiita.com/AsahinaKei/items/22d9fae93cabfbf137ee#%E5%AE%9F%E8%A1%8C%E5%8F%AF%E8%83%BD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E5%BD%A2%E5%BC%8F

## `/etc/` ディレクトリ

https://qiita.com/AsahinaKei/items/09ee7ce55b1a0be01ff0#fhs

## リンク

オブジェクトファイル（`.o`）やライブラリ（`.a`、`.so`）を結合し、1つの実行可能ファイルやライブラリを作成するプロセスのこと

## リンカ

リンクを実行するプログラム、またはツール。

静的リンカ（`ld`） と 動的リンカ（`ld.so`） がある。

## ライブラリ

Linux のライブラリは C言語や C++ で作られることが多い。Rust、Python、Go などでも作成することができる。

ライブラリには **静的ライブラリ** と **動的ライブラリ** がある。


# 静的ライブラリ

- **`lib<ライブラリ名>.a`**
    - オブジェクトファイル（`.o`）をまとめたもの
    - a：[archive](https://qiita.com/AsahinaKei/items/c8fe67bd4c37af96f2d9#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
- **コンパイル時** にリンクされる
    - ライブラリのコードが実行可能ファイルに埋め込まれる
- ライブラリ変更時に再コンパイルが必要
- 実行可能ファイルが大きくなる

```console:C 言語でライブラリを利用する場合
$ gcc -c mylib.c -o mylib.o # ソースファイル mylib.c をコンパイルしてオブジェクトファイルを生成
$ ar rcs libmylib.a mylib.o # オブジェクトファイル mylib.o から 静的ライブラリを生成する
$ gcc main.c -o myapp -L/home/user/mylib -lmylib # -L で指定したディレクトリにある静的ライブラリを main.c にリンクしながらコンパイルして myapp として出力する
```

## リンク

静的リンクはプログラムの実行前に行われる。静的なリンクを行うリンカには以下がある。

- `$ ld`
    - `ld` の語源は link editor とされる
- `$ gcc`
    - コンパイルもできるツール
    - 内部で `ld` が利用される

# 動的ライブラリ（共有ライブラリ）

動的ライブラリは **共有ライブラリ** と呼ばれる。

- **`lib<ライブラリ名>.so.<メジャーバージョン>.<マイナーバージョン>`**
    - so：shared object
- **実行時** にリンクされる
    - 「ライブラリ」と「実行ファイル」は別ファイルで存在する
- ライブラリの変更時に実行可能ファイルは再コンパイル不要
- 実行可能ファイルを小さくできる

## リンク

共有ライブラリのリンクはプログラムの実行時に行われるため、リンカはプログラムをロードする機能を併せ持つ。

共有ライブラリのリンカには以下がある。リンカ自体もプログラムである。

- `ld.so`
- `ld-linux.so`


## 配置

リンカは下記に配置された共有ライブラリから必要なものを探すため、それ以外のディレクトリに配置した場合には **`/etc/ld.so.conf`** に検索パスを追加する必要がある。

- [`/lib/`](https://qiita.com/AsahinaKei/items/09ee7ce55b1a0be01ff0#fhs)
- [`/user/lib/`](https://qiita.com/AsahinaKei/items/09ee7ce55b1a0be01ff0#fhs)

また [環境変数](https://qiita.com/AsahinaKei/items/22d9fae93cabfbf137ee#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0) **`$LD_LIBRARY_PATH`** にパスを追加する方法もある。

リンカがリンクを実行する際に、共有ライブラリを探す場所の優先順位は以下の通り。

1. `LD_LIBRARY_PATH` に記載されたパス
1. `/etc/ld.so.cache`
1. `/lib/`、`/usr/lib/`、`/etc/ld/so.conf` に記載されたパス

## キャッシュ

共有ライブラリはプログラム実行の度に必要となるため、**`/etc/ld.so.cache`** というバイナリファイルにキャッシュされ、再利用されることがある。

この `/etc/ld.so.cache` を更新するためには `$ ldconfig` コマンドを実行する必要がある。

## `$ ldconfig`

`/etc/ld.so.conf` を基に、`/etc.ld.so.cache` を再構築する。

共有ライブラリを変更した場合に、変更前のキャッシュが使用されないようするために利用される。

## `$ ldd`
list dynamic dependencies

```console:実行ファイルが必要としている共有ライブラリを確認する
$ ldd 実行可能ファイル
```

# 参考

- [Linux教科書 LPICレベル1 Version5.0対応](https://amzn.asia/d/dBEcH3k)
【自分用】EC2で作成したdockerイメージをECRにプッシュする方法

# EC2からECRにイメージをプッシュする方法

### 1. EC2構築
・パブリックサブネットに構築
・パブリックIPの自動割り当てを有効化
・基本デフォルト

### 2. IAMロール作成
・AmazonEC2ContainerRegistryFullAccessポリシーをロールに追加
・EC2にアタッチ
![スクリーンショット 2025-02-23 16.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754158/0aaed738-9fcd-461a-b2a0-3185714265c7.png)

### 3. EC2にDockerをインストール
・EC2 Instance Connect を使用して接続する
・以下のコマンドを実行

yumコマンド更新
```
sudo yum update -y
```
dockerインストール
```
sudo yum install -y docker
```
docker起動
```
sudo systemctl start docker
```
docker自動起動設定
```
sudo systemctl enable docker
```
ec2-user を docker グループに追加
```
sudo usermod -aG docker ec2-user
```
一度EC2の接続を終了して、再接続後グループが適用されたか確認
```
groups
```
以下のようにdockerが適用されていること
![スクリーンショット 2025-02-23 16.47.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754158/88bd2c81-9ce8-4d88-83f1-68b54f2baf18.png)

### 4. ECRリポジトリの作成
・リポジトリ名は適当な名前を設定
今回は「nginx-private」を設定

### 5. Dockerfileの作成
Dockerfileを作成
```
vi Dockerfile
```
```
# 公式の Nginx イメージを使用
FROM nginx:latest

# カスタム HTML を追加
COPY index.html /usr/share/nginx/html/

# ポート 80 を開放
EXPOSE 80
```
index.htmlを作成
```
echo "<h1>Hello, ECR</h1>" > index.html
```

### 6. ECRにイメージファイルをpush
・プッシュコマンドを表示を押し、表示されたコマンドを実行
![スクリーンショット 2025-02-23 16.55.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754158/5985f87d-2b13-4384-bbc0-eed9a8ef5f66.png)
![スクリーンショット 2025-02-23 16.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754158/12e24fdf-ba92-45a7-a3da-188d04db85c6.png)

・ECRにイメージファイルがプッシュされていること
![スクリーンショット 2025-02-23 17.00.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3754158/01837a6c-486c-48f2-87fc-afb319905a75.png)
iOS・iPadOSアプリのストア用スクリーンショット作成ガイド

# 概要
最近、iOS・iPadOS・macOS標準のリマインダーと自動同期するカンバン型リマインダーアプリ「[Kanbanize](https://apps.apple.com/jp/app/kanbanize-%E3%82%AB%E3%83%B3%E3%83%90%E3%83%B3%E3%81%A7%E3%83%AA%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%80%E3%83%BC%E7%AE%A1%E7%90%86/id6739810692)」をリリースしました。その際、App Store用のスクリーンショットを一から作成する機会があり、改めて方法を調べ直したので、その知見をまとめます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4019/6fdc89ba-5d5a-4896-bbb2-ce76830900d8.png)

## App Storeに必要なスクリーンショットサイズ

### iPhone向け
6.5インチディスプレイ（iPhone 11 Pro Max相当）のスクリーンショットが必須となっています。他のサイズも設定可能ですが、6.5インチサイズがあれば、App Store側で自動的にスケーリングして他のサイズに対応してくれます。

| 画面サイズ | 代表的な機種 |
|------------|--------------|
| 6.7インチ | iPhone 15 Pro Max, iPhone 14 Pro Max |
| 6.5インチ | iPhone 11 Pro Max, XS Max |
| 6.1インチ | iPhone 15 Pro, iPhone 14, iPhone 13 |
| 5.5インチ | iPhone 8 Plus, iPhone 7 Plus |

重要なポイントとして、App Storeの検索結果では最初の3枚が表示されます。ユーザーの目を引くためにも、最低でも3枚は魅力的なスクリーンショットを用意することをお勧めします。

### iPad向け
13インチディスプレイ（iPad Pro 13インチ相当）のスクリーンショットが必要です。

## スクリーンショット作成手法の比較

### 1. シミュレータを使用する方法
最も確実で手軽な方法は、Xcodeのシミュレータを使用することです。

- iPhone用：iPhone 11 Pro Maxのシミュレータで撮影
- iPad用：iPad Pro 13インチのシミュレータで撮影

Kanbanizeの開発では、まずこの方法で基本となるスクリーンショットを撮影し、後述のFigmaで装飾を加えていきました。

### 2. Figmaテンプレートを使用する方法（推奨）
実際のアプリ画面に装飾を加え、よりプロフェッショナルな見た目にするために、Figmaのテンプレートを活用しました。

#### iPhone用テンプレート
数多くのテンプレートがある中で、[iPhone App Store Screenshots](https://www.figma.com/community/file/1165594034578098226)が特に使いやすかったです。このテンプレートは：
- レイヤー構造が分かりやすい
- カスタマイズが容易
- モックアップの配置が直感的

#### iPad用テンプレート
13インチ向けの専用テンプレートは意外と少ないのですが、[iPad Pro 11インチ用テンプレート](https://www.figma.com/community/file/1288121980561553565)を使用して作成した画像でも、App Storeへのアップロードが問題なく行えました。


### 3. Webサービスを使用する方法
[App Launchpad](https://theapplaunchpad.com/)のようなWebサービスも選択肢の一つです。ただし、iPadのスクリーンショット生成機能は限定的なため、今回のプロジェクトでは見送りました。

## まとめ：Kanbanizeでの実践から得た教訓

1. まずシミュレータで基本となるスクリーンショットを撮影
2. Figmaで装飾を加えて魅力的な見た目に仕上げる
3. 必須サイズ（iPhone 6.5インチ、iPad 13インチ）を確実に押さえる
4. 検索結果での表示を考慮して、最初の3枚に特に力を入れる

実際のアプリ開発では、機能開発に力を入れがちですが、App Storeでの見せ方も成功の重要な要素です。今回の経験から、計画的にスクリーンショット作成に時間を確保することをお勧めします。

## 最後に

この記事で紹介したスクリーンショット作成のノウハウは、私が開発した「[Kanbanize](https://kanbanize.tokyo/)」で実践したものです。

Kanbanizeは、iOS・iPadOS・macOS標準のリマインダーと自動同期するカンバン型リマインダーアプリです。タスクの進捗管理を直感的に行える看板型レイアウトを採用し、ドラッグ＆ドロップで簡単にタスクの状態を管理できます。

主な機能：
- iOS/iPadOS/macOSのリマインダーとシームレスな同期
- カンバン型レイアウトでの直感的なタスク管理
- ドラッグ＆ドロップによる簡単な進捗更新
- タイトル候補機能
- 優先度設定と優先度順ソート

ぜひApp Storeでチェックしてみてください！

- App Store: [Kanbanize: カンバンでリマインダー管理](https://apps.apple.com/jp/app/kanbanize-%E3%82%AB%E3%83%B3%E3%83%90%E3%83%B3%E3%81%A7%E3%83%AA%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%80%E3%83%BC%E7%AE%A1%E7%90%86/id6739810692)
- 紹介サイト: [Kanbanize](https://kanbanize.tokyo/)
プロダクトマネージャーとは？役割と必要なスキル

# プロダクトマネージャーとは？役割と必要なスキル
## はじめに

近年、プロダクトマネージャー（PM）の重要性が急速に高まっています。特にテクノロジー業界では、PMが企業の成長と製品の成功に大きく貢献する役割を果たしています。「製品のCEO」とも称されるこの職種は、アイデアを形にし、ユーザーに価値を提供するために必要不可欠な存在です。本記事では、プロダクトマネージャーの役割、必要なスキル、キャリアパスについて詳しく解説していきます。

## 1. プロダクトマネージャーの主要な役割

プロダクトマネージャーの役割は多岐にわたりますが、大きく以下の4つに分類されます。

### 1.1 戦略的リーダーシップ

PMは製品の方向性を決める責任を担っています。

- 製品ビジョンの策定と共有：長期的な目標を設定し、チームとビジョンを共有する。
- 市場機会の特定と分析：業界のトレンドを把握し、成長のチャンスを見つける。
- 競合分析と差別化戦略の立案：競争優位性を確立するための戦略を練る。
- ビジネスケースの構築：収益性や投資対効果を分析し、経営陣に提案する。

### 1.2 プロダクト開発のオーケストレーション

プロダクト開発プロセス全体を統括し、円滑に進めることもPMの役割です。

- 要件定義とプライオリタイゼーション：ユーザーの課題を整理し、重要な機能を決定する。
- 開発ロードマップの作成と管理：短期・長期の計画を立て、チームの指針を示す。
- アジャイル開発プロセスの推進：スクラムやカンバンを活用し、効率的な開発を促進する。
- クロスファンクショナルチームの連携促進：エンジニア、デザイナー、マーケティング担当者と密接に協力する。

### 1.3 データドリブンな意思決定

定量的なデータを活用して、より良い製品を作る意思決定を行います。

- ユーザーデータの分析と解釈：Google AnalyticsやMixpanelを用いてユーザー行動を分析。
- KPIの設定と監視：主要業績評価指標を定め、プロダクトの成果を測定する。
- A/Bテストの計画と実行：異なるバージョンの製品を比較し、最適なものを選択する。
- インサイトに基づく製品改善：データに基づいて機能の追加や改善を行う。

### 1.4 ステークホルダーマネジメント

社内外の関係者と調整を行い、円滑なコミュニケーションを図ります。

- 経営陣とのアライメント：企業の戦略に沿ったプロダクト開発を推進。
- 開発チームとの密接な協働：エンジニアと要件を明確にし、適切なリソースを割り当てる。
- マーケティング・営業との連携：製品の市場投入戦略を策定。
- カスタマーサポートからのフィードバック活用：ユーザーの声を製品改善に活かす。

## 2. 必要なスキルセット

プロダクトマネージャーとして成功するためには、多様なスキルが求められます。

### 2.1 ハードスキル

- データ分析能力（SQL, Excel, データ可視化ツール）
- プロジェクト管理手法（アジャイル, スクラム）
- 基本的な技術理解（開発プロセス, アーキテクチャ）
- ビジネス分析（市場分析, 収益モデリング）

### 2.2 ソフトスキル

- リーダーシップとチーム管理
- 効果的なコミュニケーション
- 問題解決能力と創造的思考
- 戦略的思考と意思決定能力

## 3. プロダクトマネジメントのプロセス

PMの業務は、以下の4つのフェーズに分かれます。

- 企画フェーズ：市場調査、ユーザーリサーチ、ロードマップ策定
- 開発フェーズ：要件定義、スプリント計画、開発の推進
- リリースフェーズ：マーケティング戦略、ローンチ計画
- 改善フェーズ：データ分析、フィードバック反映、継続的改善

## 4. 実践的なツールとテクノロジー

PMがよく利用するツールは以下の通りです。

- プロジェクト管理：Jira, Trello, Asana, Monday.com
- データ分析：Google Analytics, Mixpanel, Amplitude
- コミュニケーション：Slack, Microsoft Teams, Notion

## 5. キャリアパスと成長

プロダクトマネージャーのキャリアは以下のように進展します。

### 5.1 エントリーレベル

- アソシエイトPM、プロダクトオーナー

### 5.2 中級レベル

- プロダクトマネージャー、シニアPM

### 5.3 上級レベル

- プロダクトディレクター、VP of Product、CPO

### 5.4 成長のためのリソース

- 専門書とオンラインコース（例: 『INSPIRED』, Coursera）
- PMコミュニティへの参加
- メンターシップとネットワーキング

## まとめ

プロダクトマネージャーは、技術とビジネスの架け橋として、製品の成功に不可欠な役割を果たします。顧客中心の思考、データドリブンな意思決定、チームとの協力が成功の鍵となります。

## 備考

この文章は、ChatGPTなどの生成AIで作成された文章をもとに、加筆・修正を加えたものになります。
【セッションレポート】「”TiDB” をKubernetesで動かしてみよう！2025年最新版」に参加しました

# はじめに

本記事は Open Source Conference 2025 Day2(2025/2/22)において PingCAP株式会社 Executive Technical Advisor 長谷川誠氏 が講演された「”TiDB” をKubernetesで動かしてみよう！2025年最新版」のレポートです。


# 公式セッション紹介

> TiDBは水平方向のスケーラビリティと強力な一貫性、そしてMySQLとの互換性による高い可用性を備えた、クラウドネイティブ思考で設計されたOSSの分散型SQLデータベースプラットフォームです。
Kubernetesとの相性も大変良く、運用者はコストをかけずに構築・運用することが可能です。
> 本セッションではTiDB Operatorを使用してTiDBをKubernetes上に展開する方法や運用する際のポイントをご紹介いたします。


（引用：[「TiDB」をKubernetesで動かしてみよう! 2025年最新版](https://event.ospn.jp/osc2025-spring/session/1977229)）

# 発表資料

※2025/2/23時点では未公開

# 概要／おすすめポイント

TiDBのメリット・デメリットやk8s上で利用するためのTIPSがちりばめられていたので、最近流行のTiDBに興味がある方や k8s 上でデータベースを動かすことに興味ある方は確認されてみてはと思いました。

# セッション内容の紹介

#### PingCAP社の紹介

TiDBの開発元。
TiDBで利用している TiKV、Chaos Mesh を オープンソースとしてCNCFへ寄贈。
2021年4月に 日本法人が設立されている。

#### TiDBの紹介

TiDBはHTAPをサポートするオープンソースのNewSQLで、MySQLとの互換性がある。
次の三つの形態で利用が可能。
- TiDB Cloud(フルマネージド)
    - 一部無償での利用も可能
- TiDB Self Managed(自己管理)
    - k8s上での利用もサポートされる
- TiDB Community(コミュニティ版、無償)
    - サポートはない

###### TiDBの特徴

- Horizontal Scalability(水平拡張)
    - SQL処理部分とストレージの分離がなされているためそれぞれで水平拡張が可能
    - 無停止での水平拡張が可能
    - https://docs.pingcap.com/ja/tidb/stable/tidb-architecture
- MySQL Compatible Syntax(MySQL 互換)
    - MySQL 5.7、8.0と互換(8.4は未)
    - 既存のMySQLクライアント・ライブラリはそのまま利用可能
    - 完全互換ではない(https://docs.pingcap.com/ja/tidb/stable/mysql-compatibility)
- Distributed Transactions(分散トランザクション)
    - 一貫性が保たれる仕組みを提供
    - https://www.slideshare.net/slideshow/tidb-249788408/249788408
- Cloud Native(クラウドネイティブ志向)
    - 複数のコンポーネントからできており、それぞれが独立しているためクラウド環境、k8sと親和性が高い
- Minimize ETL(OLTP と OLAPのサポート)
    - TiFlashというコンポーネントを動かすことで分析が可能、分析用のデータベースにデータを移す必要がない
- High Availability(高可用性)
    - コンポーネントはそれぞれ冗長化が可能
    - 自動的に負荷分散が行われる

###### TiDBの苦手な点

- データが分散配置されているためネットワークレイテンシがかかる(環境にもよるが数msecは難しい)
    - キャッシュを利用するなど、システムとして対策
- データが3重化されているためストレージコストがかかる
- ストアドプロシージャやトリガー、UDFには未対応

###### TiDBの運用管理

- TiUPという構築・運用管理ツールがある(https://github.com/pingcap/tiup)
    - yamlを読み込ませることで自動構築が可能
        - ssh での接続が必要になる
    - TiUPではベンチマークやデモデータの登録が可能

TiUPは仮想・物理サーバにのみ対応、k8sには未対応となる。

#### k8sでのTiDB

TiDB Operatorを利用することで k8s 上での管理が可能、TiDB Operator は k8s 上で動くコントローラー、次のコマンドのように kubectl にyaml(k8sのカスタムリソースTidbClusterで定義)を読み込ませることでTiUPと同じような構築が可能に。
```shell:TiDB Operator
$ kubectl apply -f tidb_cluster.yaml
```

###### TiDB Operatorの利用TIPS

- 各コンポートネントがバラけるようにAffinity/AntiAffinityの適切な設定が必要
    - 設定が複雑なので tidb-scheduler を利用することで自動的に設定が可能
- クラウドのゾーン分散などもtidb-schedulerで定義が可能
- Advanced StatefulSetを利用することで欠番などを利用した分散が可能に
    - 別途インストールが必要
- バックアップ・リカバリもOperatorの設定で実施が可能
    - クラウドのオブジェクトストレージなどもバックアップ先として指定が可能

#### セッションまとめ

- TiDBはHTAPワークロードをサポートするオープンソースのNewSQLデータベース
- MySQLとの互換性、水平方向のスケーラビリティ、強力な一貫性、および高可用性を持っている

TiDB Monitorを利用することで個別にPrometheusやGrafanaを設定することなくダッシュボードの確認が可能となる。

# まとめ・感想

TiDB自体はだいぶ紹介事例も積み重ねられてきており、先日のデブサミでも [mixi2 の事例](https://qiita.com/asahide/items/a47325278b3fc14c046f) が、昨年のGoogle Cloud Nextでは [menu の事例](https://qiita.com/asahide/items/b22673abbcc91ebe8199) が紹介されていました。
今回は事例紹介ではなく、基本的な話から k8s での運用・構築に向けての話でしたので、利用に向けて最初に確認しておくような形でも良いかもしれません。

2025/3（？）にTiDBの運用管理本が出るみたいなので、興味ある方は是非チェックしてみましょう！
Linuxカーネルについての自分用メモ

本内容は、「Linuxカーネルの基礎」について私の理解をもとに要約したものです。
正確な情報については、書籍をご確認ください。
以下の書籍を参考に学習を進めています。

https://www.oreilly.co.jp/books/9784873113135/

# Linux概要
1. [Linux 概要 - Linuxと他のUNIX系カーネル](https://qiita.com/comchiki66/private/0a2105c50d673902bf7e)
1. [Linux概要 - オペレーティングシステムの基本概念(1)](https://qiita.com/comchiki66/private/54f1ded8625f96637a45)
1. [Linux概要 - オペレーティングシステムの基本概念(2)](https://qiita.com/comchiki66/private/51d1ab2c171cc35f7a1e)
1. [Linux概要 - オペレーティングシステムの基本概念(3)](https://qiita.com/comchiki66/private/6ef5ae38a31b732ae7ec)
1. [Linux概要 - UNIXファイルシステムの概要(1)](https://qiita.com/comchiki66/private/f7cc916af26daa0b72bb)
1. [Linux概要 - UNIXファイルシステムの概要(2)](https://qiita.com/comchiki66/private/c3dde590b65f9a89334d)
1. [Linux概要 - UNIXファイルシステムの概要(3)](https://qiita.com/comchiki66/private/759223ae65cf9d228940)
1. [Linux概要 - UNIXカーネルの概要(1)](https://qiita.com/comchiki66/private/3eec69eee95641678f2e)
1. [Linux概要 - UNIXカーネルの概要(2)](https://qiita.com/comchiki66/private/e99092c72026b61b726d)
1. [Linux概要 - UNIXカーネルの概要(3)](https://qiita.com/comchiki66/private/ec2eea3c8222a7813edf)
1. [Linux概要 - UNIXカーネルの概要(4)](https://qiita.com/comchiki66/private/868a8e02ae4463ae4176)
1. [Linux概要 - UNIXカーネルの概要(5)](https://qiita.com/comchiki66/private/d4553a49ec2e76a5f208)
1. [Linux概要 - UNIXカーネルの概要(6)](https://qiita.com/comchiki66/private/76786597a011a5ed3e41)
※記事追加の度、更新します。

:::note warn
免責事項
本記事は、筆者の理解に基づいて執筆したものです。正確性には十分配慮していますが、内容の誤りや最新の情報と異なる可能性があります。
本記事の内容を参考にしたことによるいかなる損害についても、筆者は責任を負いかねますのでご了承ください。
正確な情報や書籍に書かれている根拠等はサポートしませんので、ご自身で公式ドキュメントをお調べください。
よって、この内容をAIの学習データに活用することはおすすめしません。
:::
【役職パネル】役職パネルv3の後継として [非公式]

役職パネルv3のサービス終了(サ終)を受け、役職パネルv4を作りました。
有志による開発のbotです。

## 特徴
- **ボタン**/リアクション型のロールパネル！
- v3のパネルを**引き継げる**！
- v3と**同じ操作感**！

## 導入リンク
https://discord.com/oauth2/authorize?client_id=1338490969754173531

## サポートサーバー
https://discord.gg/hb844FGmaN

---

# クイックスタート(簡単な操作方法)
詳細は[公式サイト](https://w.atwiki.jp/rolepanelbotv4/)をご覧ください。

### 完成系
このような役職パネルを作ります
![sample](https://img.atwiki.jp/rolepanelbotv4/attach/14/18/sample.png)

### ロールを作ろう
Discordのサーバー設定からロールを作ります。</br>
この時、役職パネルv4のロールよりも下に作成するようにしてください。</br></br>
![1](https://img.atwiki.jp/rolepanelbotv4/attach/14/13/1.jpeg)
</br>

### パネルを作ろう

    /rp create

このようにタイプしたら、button / reaction の選択画面が出てきます。</br>
![2](https://img.atwiki.jp/rolepanelbotv4/attach/14/14/2.jpeg)</br> </br>
パネルに最初に追加するロールを選択後、パネルタイトル・色などをお好みで指定してください。</br>
![3](https://img.atwiki.jp/rolepanelbotv4/attach/14/15/3.jpeg)</br>

### ロールを追加しよう

    /rp add
Microsoft FabricでのAzureデータソースへのプライベート接続

# はじめに
Microsoft FabricでAzureへのプライベート接続について、自社環境で検証した手順を記載します。データソースへのアクセスとしてパブリックアクセスを許可する方法もありますが、扱うデータの重要性からセキュリティが気になるケースもあると思います。その際にこの方式ではパブリックを開放せずにアクセス・データ更新が可能となります。

# 概要
ここでは、ゲートウェイとして、[仮想ネットワーク(VNet)データゲートウェイ] を使用する方式について記載します。
※以前に、[オンプレミスデータゲートウェイ]を使用する方式については記事しています。

https://qiita.com/dohrui/items/70cf8399b3ad25f92207

[仮想ネットワークデータゲートウェイ]では前提や制約はあるものの、ゲートウェイの仮想マシンへの導入などが不要であり、管理負荷の面でメリットある方式と考えられます。

https://learn.microsoft.com/ja-jp/data-integration/vnet/overview

https://learn.microsoft.com/ja-jp/data-integration/vnet/create-data-gateways


## 準備事項
* Power BI Premium 容量ライセンス (A4 SKU 以上または任意の P SKU) あるいは Fabric ライセンス (任意の SKU) 
* Azureサブスクリプション - リソースプロバイダー登録権限
  （/register/action 操作、共同作成者ロールと所有者ロールに含まれる）
  
※制限事項として、サポートされるリージョン、データソースは以下を参照ください。
　https://learn.microsoft.com/ja-jp/data-integration/vnet/create-data-gateways#regions-supported-for-vnet-data-gateways
　https://learn.microsoft.com/ja-jp/data-integration/vnet/overview#limitations

## 設定手順

**1. Azureで"Microsoft.PowerPlatform"をリソースプロバイダーとして登録**
AzureポータルでVNetを含むサブスクリプションのリソースプロバイダーとして"Microsoft.PowerPlatform"を登録する。
1. 対象の[サブスクリプション]画面で[リソースプロバイダー]を選択
2. ”Microsoft.PowerPlatform"を登録
(検索すると選択しやすいです)

![step1_check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563999/c0b1a113-4ee5-4270-9a68-ec868f47faf2.png)



**2. サブネットにMicrosoft PowerPlaformを関連付ける**
1. 仮想ネットワーク(VNet)を作成
2. VNet画面内でサブネットを作成
3. サブネットの設定画面にて、[サブネットの委任]で"Microsoft.PowerPlatform/vnetaccesslinks"を選択して、[保存/追加]を選択
![step2_check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563999/b0d1137e-c91c-4645-bb38-4528d803b1ba.png)



**3. VNetデータゲートウェイを作成**
1. Microsoft Fabricの管理ポータルにログイン
2. ホーム画面上部のナビゲーションバーの[設定(歯車のアイコン)]から[接続とゲートウェイの管理]を選択
3. 画面で[仮想ネットワーク データ ゲートウェイ]タブを選択、 [新規("＋"のアイコン)]を選択
4. [新しい仮想ネットワーク データ ゲートウェイ]ウィンドウで、必要な情報を入力。
  (Azureリソースとして、手順2で設定したサブネットを選択。 ゲートウェイの[名前]は任意に設定可能)
5. [保存]を選択
  ![step3_check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563999/1ef74a40-e036-4f4b-829e-153229245a77.png)
  
6. 上記にて設定したゲートウェイが作成されていることを確認
![step4_check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2563999/d16a54d8-0d2b-42d9-9b54-0a016ffb1bb5.png)



## まとめ
実機検証にもとづき、仮想ネットワークゲートウェイの作成手順を記載しました。容易な手順でAzureへのプライベートな接続が実装できました。別記事にてオンプレミスデータゲートウェイの構成も行いましたが、仮想マシンへの導入作業負荷、また運用管理負荷の面からも、Azureへの接続ではメリットがある方式と思います。
この記事が参考になれば幸いです。
Reactについての徹底解説: モダンなフロントエンド開発のための必須ツール

# Reactについての徹底解説: モダンなフロントエンド開発のための必須ツール

## はじめに

近年、ウェブアプリケーションの開発においてReactは欠かせない存在となっています。ReactはFacebookによって開発され、現在も広く利用されているJavaScriptライブラリです。本記事では、Reactの基本的な概念から、実践的な使用方法、さらにはそのメリットとデメリットまで、1000字以上にわたって詳細に解説します。

---

## Reactとは？

Reactは、ユーザーインターフェース（UI）を構築するためのライブラリであり、特にシングルページアプリケーション（SPA）の構築に適しています。Reactの最大の特徴は「コンポーネント志向」の開発ができる点です。コンポーネントはUIの再利用可能なパーツであり、アプリケーション全体を小さな部品に分割して開発・管理することが可能です。

---

## Reactの主な特徴

### 1. 仮想DOM (Virtual DOM)

Reactは仮想DOMを使用して、UIのパフォーマンスを向上させます。仮想DOMは実際のDOMの軽量なコピーであり、状態の変更があった際に最小限の再描画を行うことで、高速なレンダリングを実現します。

### 2. JSX (JavaScript XML)

JSXは、JavaScriptの中でHTMLのような構文を記述できる拡張構文です。これにより、UIの見た目とロジックを同じファイル内で扱うことができ、開発者の生産性が向上します。

### 3. コンポーネントベースのアーキテクチャ

Reactでは、すべてのUI要素をコンポーネントとして定義します。これにより、コードの再利用性が高まり、大規模なアプリケーションでも効率的に開発できます。

### 4. 単方向データフロー

Reactのデータフローは親コンポーネントから子コンポーネントへの一方向となっており、データの管理がシンプルになります。これにより、バグの発生率を低減し、アプリケーションの信頼性を向上させます。

---

## Reactのメリット

- **高速なレンダリング:** 仮想DOMのおかげで、UIの変更が迅速かつ効率的に反映されます。
- **再利用可能なコンポーネント:** コンポーネントの再利用により、開発コストが削減されます。
- **大規模なエコシステム:** Reactには多くのライブラリやツールが存在し、ニーズに応じた機能拡張が可能です。
- **コミュニティサポート:** 世界中の開発者による活発なコミュニティがあり、情報やサポートが得やすいです。

---

## Reactのデメリット

- **学習コスト:** JSXやコンポーネント志向の設計に慣れるまでに時間がかかる場合があります。
- **急速な変化:** Reactのエコシステムは進化が速く、常に最新の情報を追う必要があります。
- **SEO対策が必要:** Reactはクライアントサイドでレンダリングされるため、SEO対応には追加の工夫が必要です。

---

## Reactを使った開発の実践

### 環境構築

Reactプロジェクトを始めるには、`create-react-app`を使用するのが最も簡単な方法です。

```bash
npx create-react-app my-app
cd my-app
npm start
```

---

### 基本的なコンポーネントの作成

以下は、シンプルなReactコンポーネントの例です。

```jsx
import React from 'react';

function HelloWorld() {
  return <h1>こんにちは、Reactの世界！</h1>;
}

export default HelloWorld;
```

このように、Reactでは関数コンポーネントを使用して簡単にUIを作成できます。

---

### 状態管理 (State Management)

Reactでは、`useState`フックを使用してコンポーネント内の状態を管理します。

```jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

export default Counter;
```

この例では、ボタンをクリックするたびにカウントが1ずつ増加します。

---

## まとめ

Reactはモダンなウェブアプリケーションを構築する上で非常に強力なツールです。コンポーネント志向の設計、仮想DOM、JSX、単方向データフローといった特徴により、効率的かつ保守性の高い開発が可能になります。学習コストはあるものの、Reactの提供する柔軟性とパフォーマンスを活用することで、スケーラブルなアプリケーションを構築できます。

今後もReactの進化に注目し、最新の機能やベストプラクティスを学んでいきましょう。
正規表現の超基本まとめ

# はじめに
`^`や`*`といった謎の文字列を見かけることが多く、理解に苦しんでいた”正規表現”についてまとめました。

# 正規表現（Regex: Regular Expression）とは
文字列のパターンを表現するための記法のことで、
特定のパターンにマッチする文字列を検索・抽出・置換するためのルールのことを言います。
正規表現を使うことで、電話番号やメールアドレスのような特定の形式をもつ文字列の検索が簡単になります。

# 構成要素
正規表現を理解するためには、以下の要素を理解する必要があります。これらの要素を組み合わせて使用することで、検索したいパターンを作成することができます。

## 1. メタキャラクタ
特定の意味を持つ特殊な文字のことを指します。

#### 代表的なメタ文字一覧
|メタ文字|意味|
|-|-|
|`.`|任意の1文字にマッチ<br>（改行文字を除く）|
|`*`|直前の文字が0回以上繰り返す|
|`+`|直前の文字が1回以上繰り返す|
|`?`|直前の文字が0回または1回出現|
|`^`|行の先頭にマッチ|
|`$`|行の末尾にマッチ|
|`\`|エスケープ文字<br>（特殊文字をエスケープする）|
|`[]`|文字クラス<br>（指定した文字のいずれかにマッチ）|
|\||OR条件<br>（A\|BでAまたはBにマッチ）|
|`()`|グループ化<br>（部分式をグループ化する）|

## 2. 文字セット
正規表現の中で「特定の文字のいずれか1つ」にマッチさせるための仕組みのことを指します。
文字セットを使うことで、複数の文字の中からどれか1つにマッチするパターンを簡単に表現できます。

### 基本的な使い方
#### ①角括弧 `[]` 
角括弧の中に文字を記述し、指定した文字のいずれか1つにマッチします。

#### ②範囲指定
文字セット内でハイフン`-`を使用することで、連続した文字や数字の範囲を指定することができます。
（例）`[a-zA-Z]` 大文字または小文字のアルファベットのいずれか1文字にマッチ

#### ③否定の文字セット
文字セットの先頭に`^`を置くことで、「指定した文字以外」にマッチします。
（例）`[^abc]`"a", "b", "c" 以外の任意の1文字にマッチ

## 3. 文字クラス
特定の文字セットにマッチさせるために使用します。
（例）`[abc]` a、b、cのいずれか1文字にマッチ

## 4. 量指定子
直前の文字やグループが何回繰り返されるかを指定します。
`{}`（中括弧）を使って表現します。

（例）
`{0}`: 直前の文字がちょうど0回繰り返す
`{0,}` `{1,}`: 直前の文字が0回、1回以上繰り返す(`*` `+`)
`{0,1}`: 直前の文字が0回以上、1回以下(0回または1回)繰り返す(`?`)
※実際には`*` `+` `?`のようなショートカットを使用されることが多いです。
※「0回以上繰り返す」という表現は、指定した文字が存在しなくてもいいことを意味します。

## 5. エスケープシーケンス
特殊文字をそのままの文字として扱いたい場合、バックスラッシュ`\`を使ってエスケープします。
エスケープすることで文字として認識することができます。
※特殊文字：正規表現以外でも使用される、特別な意味を持つ文字のこと。

（例）
`\.`  ピリオドそのものにマッチ
`\*`  アスタリスクそのものにマッチ
`\\`  バックスラッシュそのものにマッチ

## 具体例
```regex: メールアドレス
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
```
`^` 行の先頭
`[a-zA-Z0-9._%+-]+` ユーザー名部分（英数字と一部の記号）
`@` @マーク
`[a-zA-Z0-9.-]+` ドメイン名部分
`\.` ドット
`[a-zA-Z]{2,}$` トップレベルドメイン（2文字以上）


## まとめ
正規表現は、要素を組み合わせることで文字列操作を簡単にします。
仮に、正規表現を使わない場合、if 文や for ループが増えてコードが複雑になる傾向があります。
たとえば、文字列の中に 「abc」 が含まれるかどうかをチェックするとき、 contains() メソッドを使ったり、`文字列 = ""`などを使ってチェックしますが、この方法だと「ac」「aBc」など「abc」以外の条件が増えると、if 文や for ループが増えてコードが複雑になってしまいます。
このような記述を減らす方法として正規表現は強力なツールになります。

最後までご覧いただき、ありがとうございました。

### 参考にしたURL
・https://zenn.dev/ryome/articles/9a28660d27363b（『正規表現の基礎まとめ』）
・https://www.tohoho-web.com/perl/regexp.htm（『正規表現』とほほのWWW入門）
Dockerを使おうとしたら「command not found」が表示され、Dockerが使えなかったときの解決方法

# はじめに
Dockerを使おうとしたとき、次のようなエラーメッセージが表示されたことはありませんか？

```
$ docker  --version
zsh: command not found: docker
```
Dockerがインストールされているにもかかわらず、このエラーが発生し、どうしてもdockerコマンドが使えませんでした。パスを通そうと試みたものの、うまくいかず、最終的には**CLI（コマンドラインインターフェース）**を使うことで解決したので、その方法を記録しておきます。


## エラーの内容
ターミナルでdocker --versionやdocker-compose --versionを実行したところ、次のようなエラーが表示されました。

```
$ docker  --version
zsh: command not found: docker
```
パスを通す試み
まず最初に試したのは、パスを通す方法です。Dockerがインストールされているのにコマンドが認識されないということは、パスに問題があるのではないかと思ったからです。


export PATH=$PATH:/usr/local/bin/docker


# 解決方法：CLIでの実行

### 1. HomebrewでDockerをインストール
私はbrew install docker docker-composeを使って、DockerとDocker Composeをインストールしました。Homebrewを使用することで、必要なパッケージが簡単にインストールできます。

まず、Homebrewがインストールされていなければ、次のコマンドでインストールします。
```
brew install docker docker-compose
```

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

インストールが完了したら、次のコマンドでDockerがインストールされているか確認します

docker --version

これで、Dockerが正しく動作することを確認できました。

### 結論

Dockerを使おうとしたとき、最初は「command not found」のエラーが発生し、パスを通しても解決しなかった。
しかし、brew install docker docker-composeで再インストールした結果、CLI（コマンドライン）で正常に動作するようになった。
GUIのDocker Desktopではなく、CLIでDockerを操作する方法で問題を解決。
CLIで直接Dockerを操作したかった方には、この方法がオススメです。
pythonでのdebug用print効率化

# 背景
pritn出力で変数名：値を表示させるための記載が煩わしい
例）
~~~ python3
abc = 123
print(f"abc:{abc}")
~~~
~~~:出力
abc: 123
~~~

# 調査結果
3つの対策を検討した。
## 対策１
Python 3.8 以降で使用できる「f-string デバッグ」の機能を利用
~~~ python3
abc = 123
print(f"{abc=}")
~~~
~~~:出力
abc: 123
~~~

## 対策2
Python 3.8 以降で関数を作成
~~~ python3
def print_variable_name_and_value(variable, variable_name):
    """
    変数名と値を表示します。
    """
    print(f"{variable_name}: {variable}")

abc=123
print_variable_name_and_value(abc, "abc") # 明示的に変数名を渡す
~~~
~~~:出力
abc: 123
~~~

## 対策3
inspect関数を利用する。
~~~ python3
import inspect

def print_var_value(var):
  frame = inspect.currentframe().f_back
  #print(frame.f_locals)
  names = []
  for k, v in frame.f_locals.items(): # k:変数名、v:変数の値
    if v is var: #値及びオブジェクトが一緒か確認する
      names.append(k)
  name = names[0]
  print(f"{name}: {var}")

abc=123
print_var_value(abc)
~~~ 
~~~:出力
abc: 123
~~~

# 結論
対策1を推奨。
対策3は記載する文字列数が少なく便利であるが、
for文が呼び出し元の関数の変数の数だけループするので、処理速度の観点で対策1or2の方がよさそう
対策１と2は記述量と関数作成の手間の観点で対策1がよさそう
AtCoderデビュー(ABC394)

どうもこんにちは！

AtCoderなるもので毎週土曜日にビギナー向けのコンテストがあるということで初参加しました。結果はA,Bを完答、Cで方針はまとまったものの実装が間に合わず終了となりました。以下は個人記録もかねた振り返りです。

https://atcoder.jp/contests/abc394

# 問題
問題は以下から。以下では取り組んだA～Cまでを振り返り。

https://atcoder.jp/contests/abc394/tasks

# A -22222-
数字で構成される文字列から、2だけを抜き取って結合した文字列を出力するというもの。ここは~~効率はともかく~~特に苦労はなし。
実施日が2/22にちなんでとのこと。
~~~Python
s = input()
for i in s:
  if i == '2':
    print(i,end="")
print("")
~~~

# B -CAT-
標準入力で得た文字列を長さが短い順に並び変えて結合して出力するというもの。とりあえずリストに入れて、文字列の長さでソートして、結合したらいけるよねと考えました。
問題名は実施日が猫の日にちなんでとのこと。
~~~Python
n = int(input())
s = [input() for _ in range(n)]
s.sort(key=len)
print("".join(s))
~~~

# C -Debug-
英大文字からなる文字列を最も先頭のWAをACに置き換えることを繰り返して、WAがなくなったら最終の文字列を出力するというもの。入力例にあったWWAだと、WWA→WCA→CAAという手順で置き換わっていくことになりますね。文字列は最大$3×10^5$、実行時間制限は2秒。
Pythonには指定した文字を置き換える[replace関数](https://docs.python.org/ja/3.13/library/stdtypes.html#str.replace)があるので、WAがすべて置き換わるまで繰り返すことにしました。問題が先頭のWAをCAに置き換えるのを繰り返しということで、関数の実行回数は1回に指定。
~~~Python
s = input()
while "WA" in s:
  s = s.replace("WA","AC",1)
print(s)
~~~
これで置き換え処理自体はできると思うのですが、タイムオーバーで実行できないテストデータが多数。WWWWWWWAのようにWが続くと文字列全部を対象にした置き換えの回数が増えて時間がかかるんですよね。
途中で文字列を最後からチェックして順番に置き換えていけば手戻り無く置き換えできることに気づいたんですが、いろいろこねくり回して作ったもののデバッグが間に合わずタイムアップ。心の乱れはコードの乱れにつながりますね。。
一夜明けて取り組んだのが以下。これならテストコードをすべてクリアできました。
~~~Python
s = list(input())
for i in range(len(s)-1,0,-1):
    if s[i] == 'A' and s[i-1] == 'W':
        s[i] = 'C'
        s[i-1] = 'A'
print("".join(s))
~~~

# おわりに
完答が2問と悔しい結果ですが、次回は3問完答、3月中に4問は完答を目指して頑張りたいと思います。

ではでは。
Adapterパターン

## はじめに
**Java言語で学ぶデザインパターン入門**を読んで勉強中です。
備忘録としてAdapterパターンについて書きました。

## Adapterパターン
Adapter パターンは、既存のクラスを変更せずに新しいインターフェースに適応させるためのデザインパターンです。Java の Adapter パターンを使って、どのように既存のコードを変更せずに新しいシステムに適応させるかを書いてみます。

## 背景(例)
プロジェクトで新しいシステムが導入され、すべての動物クラスが特定のインターフェースを実装する必要があるとします。しかし、すでにある**Cat**という古いクラスは、このままでは新システムに適応できません。

そこで登場するのが Adapter パターン です。これを使えば、既存の**Cat**クラスをそのまま活用しつつ(修正しない)、新しいインタフェースを適応することができます。

### 1. 新しいシステムで求められるインタフェース
新しいシステムでは、全ての動物クラスが以下のインタフェースを実装して、cryメソッドで鳴き声をあげることが求められます。


```Animal.java
interface Animal {
    void cry();
}
```
このインターフェースを実装することで、すべての動物クラスは一貫した使い方を提供します。

### 2. Catクラス
次に、すでにある**Cat**クラス。**Cat**は bark() というメソッドを使って鳴き声をあげますが、これは**Animal**のcry()とは異なります。

```Cat.java
class Cat {
    private String name;

    public Cat(String name) {
        this.name = name;
    }

    public void bark() {
        System.out.println(name + "がニャーと鳴く");
    }
}
```
### 3. Adapter パターンの導入
Adapter パターンを使って**Cat**を**Animal**に適応させるため**AnimalAdapter**クラスを作成します。このクラスは、**Cat**を内部でラップし、**Animal**インターフェースを実装します。

```PrinterAdapter.java
// Adapter クラス（Cat を Animal に適応させる）
class AnimalCat extends Cat implements Animal {

    public AnimalCat(String name) {
        super(name);
    }

    @Override
    public void cry() {
        bark();  // barkメソッドを内部で呼ぶ
    }
}
```

### 4. 使ってみる
次に、main メソッドで**Cat**を**AnimalCat**を使って新しいシステムに適応させます。

```Main.java
public class Main {
    public static void main(String[] args) {
        // Adapterパターンを使って、Animalインタフェースに適応させる
        Animal animal = new AnimalCat("トラ");

        // 新システムのcryを使う
        animal.cry();     
    }
}
```
**出力結果**
```java
トラがニャーと鳴く
```
**Cat**クラスを修正せず、Animalインタフェースに適応させることができました！

## 終わり
Adapterパターンは、既存のコードを変更せず新しいインターフェースに適応できます。
**Cat**をそのまま使いつつ、新しいシステムに統一された方法でニャーと鳴かせることができました。
実際の開発では、まだ使ったことないのでメリットがピンときませんが、知っておかないといけないかなと思い書きました:smiley:
MFA設定ありのRoleでCross-Accountリソースアクセス

# はじめに
Cross Account間のリソースアクセスには、roleの利用が一つのやり方です。
さらにMFA設定が有効な場合のCLIの実行方法を試します。

# 構成
Account-BにおけるUser01から、Account-Aのリソースをアクセスします。
- AWS Account
  - Account-A: 12345678900
  - Account-B: 00123456789
- Account-A: 12345678900
  - Role：role-s3-for-other-account作成
    - Policy: AmazonS3FullAccess
    - Trust relationships:
      - Account-Bのユーザから及びMFA必須設定
- Account-B: 00123456789
  - User01のPolicy設定
    - Role「role-s3-for-other-account」へのAssumeRole許可
  - User01のMFA設定
---
- Account-A
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470230/04d126f7-1c19-4747-8e94-c2b1a83c1e33.png)

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::00123456789:root"
            },
            "Action": "sts:AssumeRole",
            "Condition": {
                "Bool": {
                    "aws:MultiFactorAuthPresent": "true"
                }
            }
        }
    ]
}
```

- Account-B
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470230/a6c387f3-8547-4438-bd2f-8bb37447dd5c.png)

```
{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "sts:AssumeRole",
        "Resource": "arn:aws:iam::12345678900:role/role-s3-for-other-account"
    }
}
```
---

# CLI利用
## aws credential設定
### config file
```
[profile tmp01-role]
role_arn = arn:aws:iam::12345678900:role/role-s3-for-other-account
source_profile = tmp
mfa_serial=arn:aws:iam::00123456789:mfa/myMFA01
```

### credentials
```
[tmp]
AWS_ACCESS_KEY_ID=xxxxxxxxxx
AWS_SECRET_ACCESS_KEY=xxxxxxxxxxyyyyyy
```

## Account-Aのbucketにアクセス
MFA Codeを入力した後、Account-Aにあるbucketが表示されます。
```
aws --profile tmp01-role s3 ls
Enter MFA code for arn:aws:iam::00123456789:mfa/myMFA01:
```
AWS LightsailにDockerでWebアプリをデプロイするのに苦労した話


AWSのLightsailはDockerでWebアプリをさくっとデプロイ出来そうなので、ECSなんかに比べたらかなり簡単にWebアプリを公開できそうです。

同じように簡単にWebアプリを公開できるサービスとしてはBeanstalkやAmplifyがありますが、Beanstaklは意外にデプロイに手間がかかったり、Amplifyはランタイムが限定される、など、ちょっと使いにくさがあり、Lightsailの手軽さには敵いません。

（Amplifyは大好きですけどね）

そこでちょっと試してみたのですが・・・これがなかなか上手くいかない！

# 上手くいくケース

Lightsailの中にサンプルコンテナをデプロイする機能があり、これを使うとうWebアプリが起動します。
（まあ、これが上手くいかなかったら大問題

# 上手くいかないケース

では、サンプルコンテナのソースを自分でデプロイし、Docker Hubにアップしたイメージから起動しようと考えたのですが、これが上手くいかない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10225/50a7fce2-3405-41c9-ada8-56fd9f49e612.png)

上記のようなログが出ているので、Dockerコンテナが起動していないか、あるいは所定のポートが開かれていないかのいずれかなのでしょう。

が、何せこれ以上のログが出ないので調べようがないのですよね・・・どうやってデバッグするのが正解なんでしょう？

色々試してみます。

ちなみに、サンプルのソースはここです。
https://github.com/aws-samples/amazon-lightsail-examples/tree/main/containers/hello-world

これを自前でビルドしてLightsailで起動できることを当面の目標とします。

# 目標を達成しました！〜やったこと〜

こちらの記事にある通り、Lightsailはlinux/x86_64向けにビルドされたものしか実行できないようです。

https://qiita.com/strings/items/ba4ab40b79b24ca4548d

（そもそも、```docker build```にプラットフォーム指定がある、ということを知りませんでした）

HTMLファイル１枚のどシンプルなWebアプリのビルドには成功したので、Haskell+Elmもこれで上手くいったらいいな・・・妄想しています。そちらのチャレンジはまた別記事にて。