OmniAICreator/Qiita-1.07M huggingface dataset:
ChatGPTのデスクトップアプリがクラッシュする問題の解決方法

# 概要
最近、macOS用のChatGPTアプリが起動時にクラッシュする現象が報告されています。この問題は、OpenAIのコミュニティフォーラムでも多くのユーザーから指摘されています。この記事では、問題の概要や原因、ユーザーが試せる解決策について解説します。

# 結論
`/Users/"your user"/Library/Preferences` から下記のファイル削除（※参考元では他にも指定がありましたが、自分のケースでは必要ありませんでした）。
```
com.openai.chat.plit
com.segment.storage.oai.plit
```

:::note info
追記！（2024/11/13）
恒久的な対策が取られるまではデスクトップアプリではなく、ブラウザから使いましょう！上記の方法で一時的には解決しますが、私の環境では画面拡張をすると度々同様の事象が発生しました。その度に該当ファイル削除の処理が必要となり、なかなかめんどくさいです。
:::

![chatgpt-problem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624930/64f31d2a-bd42-2431-c58d-bb85ccc15263.png)

# 環境
```
- macOS: Sonoma 14.3
- インストール元：https://openai.com/chatgpt/mac/
```
# 参考
https://community.openai.com/t/chatgpt-app-for-macos-crashing-on-open-november-3/1002242/2
OIDC認証におけるログアウト処理の仕組み

OIDC（OpenID Connect）認証におけるログアウト処理は、セキュリティとユーザー体験を確保しながらユーザーがセッションを終了するための方法です。OIDCではログアウト処理が「フロントチャネルログアウト」と「バックチャネルログアウト」の2つの方法に分けられます。それぞれの仕組みを以下に説明します。

### 1. フロントチャネルログアウト（Front-Channel Logout）

フロントチャネルログアウトは、ユーザーのブラウザを通じて複数のクライアント（Relying Parties, RPs）で同時にログアウトを行う方法です。

#### 仕組み:

- **ログアウトエンドポイント**: OIDCプロバイダ（IdP）が提供するログアウト用のエンドポイント（`end_session_endpoint`）にユーザーがアクセスします。
- **セッション削除**: このエンドポイントにアクセスすると、OIDCプロバイダはユーザーのセッションを終了します。
- **ログアウト通知**: ログアウト処理中に、OIDCプロバイダは登録された全てのクライアントに通知し、ブラウザ上でiframeを介してクライアント側のセッションも終了します。
- **リダイレクトURL**: ログアウト後、ユーザーは指定されたURLにリダイレクトされます。

この方式では、ユーザーのブラウザを経由するため、ブラウザを通じて複数のクライアントに対して同時にログアウトリクエストを送信できます。

### 2. バックチャネルログアウト（Back-Channel Logout）

バックチャネルログアウトは、よりセキュアで信頼性のある方法で、サーバー間でログアウト通知が行われます。ユーザーのブラウザを介さず、IdPから直接クライアントサーバーにログアウト通知が送られます。

#### 仕組み:

- **ログアウト通知**: OIDCプロバイダがクライアントにバックチャネルログアウトリクエストをサーバー間通信で送信します。
- **セッション無効化**: クライアントはこの通知を受け取り、ユーザーのセッションを無効化します。
- **同期的/非同期的処理**: クライアントはリクエストを同期的または非同期的に処理することが可能です。

この方式は、ユーザーがブラウザを閉じたりブラウザを介した通信が失敗した場合でも、確実にセッションを終了できるため、フロントチャネルログアウトよりも信頼性が高いです。

### 3. ログアウトに伴う注意点

- **セッション情報の削除**: ログアウトの際は、クライアント側でもユーザーのセッション情報を確実に削除する必要があります（例: クッキーやローカルストレージのクリア）。
- **リダイレクトの確認**: ログアウト後のリダイレクトURLは、セキュリティ的な観点から事前に登録・許可されたURLであるべきです。
- **IDトークンの送信**: ログアウトリクエストには、セッションを識別するために`id_token_hint`を含めることがあります。

### ログアウト処理の例

OIDCのログアウトリクエストのURLは以下のようになります。

```perl
https://idp.example.com/logout?post_logout_redirect_uri=https://client.example.com&state=xyz&id_token_hint=<ID Token>
```

‌

- `post_logout_redirect_uri`: ログアウト後のリダイレクト先URL。
- `id_token_hint`: ログアウトするセッションに関連付けられたIDトークン。
- `state`: セキュリティ用のパラメータで、CSRF対策のために使用されます。

このように、OIDC認証におけるログアウト処理は、セッションの終了とクライアント間の連携を考慮した多様なアプローチが存在し、それぞれの方法が特定のニーズに対応しています。
LINE Business アカウントにてメッセージ管理構築

LINE Business 公式アカウント取得例（その１）
公式サイト
https://www.lycbiz.com/jp/service/line-official-account/
より下記の手順にてビジネスアカウント取得。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/0fe7779e-f4d5-ea7c-0c0f-4a15b25d15ae.png" width="40%">
メールで登録。（LINEアカウント未使用例）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/0814f8fd-1058-298a-95d2-2dc3b2f4ec1b.png" width="40%">
登録メールに届くIDにて認証。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/7353a823-ae06-6e8a-03b0-b98376bad020.png" width="40%">
右端の設定をクリック後、Messaging API設定を選択

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/938a160b-bc50-f3db-31fd-d5e372cfcf26.png" width="30%">　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/c24771c7-acca-8ea3-bea2-caa724e7eb4c.png" width="50%">
Messaging API設定すると、Line Developerへ
チャネル基本設定の右にMessaging API設定が表示されます。

![line_developer_image001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/199c3105-ae21-e041-896c-757d97bf981b.jpeg)
Webhook URLを作成設定し、サイトよりLINE友達IDの登録やプッシュメッセージ送信等を行う際、下記チャンネルアクセストークンにてサイト認証をセットする。
![スクリーンショット 2024-11-05 2.31.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/39ce7047-0638-62a0-d5db-868346564cde.png)
【第３回 NTTデータ 西川洋平さん】2024 Japan AWS Jr. Champions インタビュー企画

こんにちは！2024 Japan AWS Jr. Championsの[@yakisobapan](https://qiita.com/yakisobapan)です。

AWS Japanが6月に開催したAWS Summit Japanにて、2024 Japan AWS Jr. Championsが発表されました。Jr.Championsは、AWSを積極的に学び、アクションを起こし、周囲に影響を与えている若手エンジニア向けの表彰プログラムとなっております。Jr.Championsについて多くの方に知ってもらいたいため、表彰された方々にインタビューをしていきます。
第3回目は、NTTデータの西川洋平さんです！
![IMG_2806.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737731/9311e9e6-0df4-6c12-c8f5-2cb2efbc0389.jpeg)

https://aws.amazon.com/jp/blogs/psa/2024-japan-aws-jr-champions/

# 質問１：これまでの経歴、現在の業務、AWSを知った経緯を教えてください。
2021年に入社後、公共部門の技術集約組織におけるクラウドチームに配属されました。
これがAWSを知り学び始めたきっかけです。
入社以来、同組織でクラウド案件に携わっており、公共分野のシステム開発におけるノウハウやアセットを作る施策活動や案件支援に携わっています。支援先としてはヘルスケアや決済関連、直近では地方公共団体のシステム開発案件です。

# 質問２：Jr.Championsを目指した理由、選出につながったと考える活動があれば教えてください。
所属組織のTop Engineersのアウトプットに対する姿勢に影響を受け、Top Engineersを目指そうと思いました。その過程で、Jr.Championsの存在を知った時、Top Engineersになるための前段として応募を決意しました。
高い目標をもって業務に向き合いつつ、主体的にアウトプット活動を継続的に実施していたことが、選出につながった大きな理由だと思います。


# 質問３：Jr.Championsとして現在どのような活動をしていますか。
業務としての案件支援を行いつつ、社内外のセミナー登壇や勉強会運営を中心に行っています。
また、公共のクラウドに関する社外コミュニティ立ち上げに挑戦しようと準備をしています。

# 質問４：Jr.Championsに選出されてよかったことはありますか。
同年代の社外のエンジニアやTop Engineers、Ambassadorsとの交流機会を得られたことです。
併せて、インプット/アウトプットの機会が圧倒的に増えた点もよかったことのひとつです。

# 質問５：Jr.Championsの活動で大変だったことはありますか。
特にありません。
あくまで自身の興味がある活動、やりたかった活動を中心に行っているため、大変と感じることはないです！
活動の中で困難にぶつかることはありますが、そこは活動を行うメンバーと協力しながら解決をしていっています。
# 質問６：今後の夢や目標はありますか。
以下3つがあります。
 - 社内外の関係者を巻き込みつつ、公共分野のクラウド利活用に係る課題解決に寄与すること
 - 公共分野で求められる技術領域に対する対応力の深化、幅出しをすること
 - 量はもちろん、質も伴ったインプット/アウトプットを継続していくこと

# 質問７：Jr.Championsを目指す若手に向けてメッセージをお願いします。
AWS Jr.Championsは、普段の業務の延長線上のゴールとは異なるかもしれません。
しかし、目指す過程で得られること、選出後に挑戦できること、コミュニティを通した人との出会いは貴重なものばかりなので、きっと何ごとにも代えがたい経験になるはずです。

# 質問８：全体を通しての質問
## 好きなAWSサービスはなんですか。
悩みましたが、、IAMです！多くの方に利用されていますが、奥が深いと思うので。
業務内容にも関連しますが、セキュリティ・ガバナンスという観点は大事だと考えています。
昨今のセキュリティインシデントのニュースも踏まえて、AWSを触る人は誰しもが関わるサービスですが、利用者の全員が深く理解するべきだと思います。

# 最後に
西川さんは、常に高い目標を持って、Top Engineers選出へ向けたアクションを行っています。
既に別媒体で、会社の代表としてインタビューを受けていることもあり、西川さんの能力を会社にも認められていると感じます。
活動ジャンルの幅も広く、今後の活躍も追っていきたいです。

次回のインタビューもお楽しみに！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737731/df49bf0c-f04b-95ca-281e-1f592df1b77f.png)
回転型リフレッシュトークンの仕組み

回転型リフレッシュトークン（Rotating Refresh Token）は、トークンのセキュリティを高めるために使用される仕組みです。この方式では、リフレッシュトークンが使われるたびに新しいリフレッシュトークンが発行され、古いトークンは無効化されます。これにより、リフレッシュトークンの漏洩による不正使用を防ぐことができます。

### 回転型リフレッシュトークンの仕組み

1. **初回発行**:
   - クライアントが初回の認証を行うと、アクセストークンとリフレッシュトークンが発行されます。
2. **アクセストークンの期限切れ**:
   - アクセストークンの有効期限が切れた場合、クライアントはリフレッシュトークンを使用して新しいアクセストークンを取得します。
3. **リフレッシュトークンの更新**:
   - 新しいアクセストークンを発行する際、サーバーは新しいリフレッシュトークンも発行します。この新しいリフレッシュトークンがクライアントに送信されます。
   - 古いリフレッシュトークンは無効化され、以降のリクエストでは使用できなくなります。
4. **不正使用の防止**:
   - サーバーはリフレッシュトークンが一度だけ使用されることを確認することで、不正使用を防ぎます。もし古いリフレッシュトークンが再度使用された場合、不正アクセスの兆候として対処が必要です。

### セキュリティの利点

- **トークン漏洩の防止**: 回転型リフレッシュトークンの仕組みにより、リフレッシュトークンが漏洩しても一度使われると無効化されるため、攻撃者が使用することが難しくなります。
- **監視と対策**: サーバーは古いリフレッシュトークンの使用を検知できるため、セキュリティ監視の一環として不正行為を素早く特定し、対策を講じることが可能です。

### 実装のポイント

- **トークンのストレージ**: クライアントがリフレッシュトークンを適切に保管する必要があります。Webアプリケーションの場合、Secure Cookieやセキュアなストレージを使用します。
- **トークンの期限管理**: サーバー側では、各リフレッシュトークンに期限を設け、長期間未使用の場合は無効化されるようにします。
- **データベースの更新**: サーバーは、トークンの回転時に新しいリフレッシュトークンの記録をデータベースに保存し、古いトークンを無効にするためのトラッキングを行います。

この仕組みにより、セッションを安全に保ちながら、クライアントがスムーズにアクセストークンを更新できるようになります。
OIDC認証のおける各種トークンの有効期限ベストプラクティス

OIDC（OpenID Connect）認証において、各種トークンの有効期限を設定する際のベストプラクティスは、セキュリティとユーザー体験のバランスを取ることが重要です。各種トークン（アクセストークン、IDトークン、リフレッシュトークン）に関する推奨事項は以下の通りです。

### 1. アクセストークン（Access Token）

- **有効期限**: 通常、短い期間（数分から1時間以内）が推奨されます。多くの場合、5分から15分程度の設定が一般的です。
- **理由**: アクセストークンはAPIアクセスに使用されるため、有効期限が短い方が漏洩時のリスクが低減されます。
- **再取得**: アクセストークンが期限切れになった場合は、リフレッシュトークンを使用して新しいアクセストークンを取得します。

### 2. IDトークン（ID Token）

- **有効期限**: IDトークンは認証情報を含むため、アクセストークンよりも長め（1時間から数時間程度）に設定されることが多いです。
- **理由**: IDトークンはユーザーのセッション情報を認証するために使われます。あまり短くしすぎると頻繁に再認証が必要になり、ユーザー体験が低下します。
- **注意**: IDトークンの内容が不変であることを保証するために、適切な署名と検証を行うことが重要です。

### 3. リフレッシュトークン（Refresh Token）

- **有効期限**: リフレッシュトークンは長期間（数日から数週間、あるいは数カ月）の有効期限が設定されることが多いです。
- **理由**: リフレッシュトークンはクライアントが新しいアクセストークンを取得するために使用され、長期セッションを維持するために必要です。ただし、リフレッシュトークンを安全に管理し、漏洩を防ぐことが不可欠です。
- **回転型リフレッシュトークン**: セキュリティを高めるために、回転型リフレッシュトークンを使用して、リフレッシュトークンが使用されるたびに新しいものを発行することが推奨されます。

### ベストプラクティスまとめ

1. **アクセストークンの短い有効期限**（例: 15分）を設定し、必要に応じてリフレッシュトークンで再取得。
2. **IDトークンの中程度の有効期限**（例: 1～2時間）でユーザー認証情報を保持。
3. **リフレッシュトークンは長期間有効**（例: 数週間以上）で、回転型を使用することでセキュリティを強化。
4. **セキュリティ対策**:
   - トークンの保管はセキュリティが確保された環境で行う（例: クライアント側ではSecure Cookieやセキュアなストレージ）。
   - トークンの送信時は常にHTTPSを使用する。
   - アクセストークンのスコープを最小限にして、権限を限定する。

このような設定により、セキュリティとユーザー体験を両立させた適切なトークン管理が実現できます。
ターミナルからはSSH接続できるのに、VSCodeからRemote SSHできない時の対処法


## 症状

今まではVSCodeの拡張機能の「Remote SSH」を用いて，VSCodeでSSH接続&ファイルの編集ができていました．
しかしある日急に，「Time out」というエラーがでてSSH接続できなくなってしまいました．



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/692254e9-e4ed-3948-b9d0-0f9fe9815e3e.png)





## 環境

|項目||
|:-----------|:--|
|ローカルPC    |wnidows  |
|リモートOS    |Fedora Linux 40 (MATE-Compiz)  |
|VSCode version|バージョン: 1.95.1|


## 解決方法
### configファイルの見直し
VSCodeでSSH接続したことがある人は下記の設定ファイル
`~/.ssh/config`を設定したと思います．この設定を見直しました．

```
Host myserver # <------ この場合は、 myserver がHost名
    HostName 10.2.3.4
    User XXXXXXX
    IdentityFile /Users/<username>/.ssh/id_private_key

```
正しい設定になっていました．


### TerminalからSSH接続できるかを確認
ローカルPCのTerminalを開いて
```
ssh myserver       <--- 上記のconfigファイルで設定したホスト名
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/897245a3-e242-2d7d-1270-d1c7fac1d756.png)

このような画像に変わると思います．
Terminalからは，きちんとSSH接続ができた証拠です．

VSCodeに問題があることが分かります．


### VSCodeリモートサーバの設定やキャッシュを削除
先ほどのローカルPCのTerminalでSSH接続した後に，下記のコマンドを実行するだけです．


``` Bash: Bash
$ rm -Rf ~/.vscode-server/
```

#### コマンドの構成
`rm` : 「remove」の略で、ファイルやディレクトリを削除するためのコマンド。
`-R` : 「recursive（再帰的）」のオプションで、指定したディレクトリとその中のすべてのファイルやサブディレクトリを再帰的に削除します。
`-f` : 「force（強制）」のオプションで、確認メッセージを出さずに強制的に削除します。
`~/.vscode-server/` : ユーザーのホームディレクトリにある .vscode-server ディレクトリを指定しています。


### コマンドの解説
このコマンドを実行することで，VSCodeのリモートサーバの設定やキャッシュを削除することができます．
私の場合は，前回Remote SSHを使用した際に，接続を切っていなかったためその設定ファイルが壊れていたのかもしれません．
【Draw.io】ちょっとまって！フローチャートをPowerPointで書いてるの？！

# はじめに
レポートでフローチャートを作らなければいけない機会、ありませんでしたか？
筆者も今現在高専に在学している中、何度もありました。
そんな際に、「このパワポのテンプレを使ってレポートを書きましょう」と授業で始動されましたが、「めんどくせぇ！！！！」となったので、Draw.ioを使い始めました。

# Draw.ioとは
https://app.diagrams.net/

以下、WikipediaのENをJPに翻訳したものになります。
>HTML5 と JavaScript で開発されたクロスプラットフォームのグラフ描画ソフトウェア アプリケーションです。そのインターフェイスを使用して、フローチャート、ワイヤーフレーム、UML 図、組織図、ネットワーク図などの図を作成できます。

つまるところ「結構便利なWebアプリ」ってところでしょうか。

# 何ができるの
割と何でもできますが、何ができるかを示します。

## フローチャート作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/3de1e4ba-f6e5-84c8-93d0-5303a0c9fe63.png)
左のメニューバーの初期プリセットではこんなものです。
これをD&Dして作成します。

この矢印ボタンを押すと次のオブジェクトも素早く配置できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/e9df66e5-4959-7886-ab0f-be0b7ee75b0d.png)

こんな風につながります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/b59f3a05-5908-1016-5bcd-ba506a00c7da.png)

## 論理回路
これ高専で結構使うんですよねー。うちの高専はロジックICの実験があるので重宝します。
ただ、プリセットには配置されていないのでその他の図形→電気にチェックで追加しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/2e84d0d1-428f-30b4-1286-7107a3ab3e15.png)
ロジックゲート関係も入りますが、電気回路的な記号もまとまって入ります。

## UML図
コンテストに参加する学生は、チーム開発の時に重宝するんじゃないでしょうか。

## ネットワーク図
これも作れるらしいです。
見たところはCisco、アラテレあたりの有名どころはありました。
この辺はどちらかというとVisioなどのほうがやりやすいかもしれませんので、お好きな手段を選んでいただくのがいいかと思います。

# メリット
- 素早い図の作成が可能になる
- きれいな図の作成が可能
- プリセットが豊富
- Webなので軽量

# デメリット
- なんかある？

# おまけ：VSCodeでDraw.io
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/017844b1-4f4e-dccd-155b-e5cdc8e3dfee.png)
これを入れるとVSCodeでDraw.ioの図が扱えるそうです。便利。
.drawio形式のファイルを読み込むと以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3628829/7c6f2d1a-af8f-d906-926a-b19e2d012a23.png)
すごい便利

# まとめ
パワポはさすがにやめよう。こっちのほうが早く終わって楽だよ。
LinuC Level1 第一章 Linuxのインストールと仮想マシン・コンテナの利用

Ping-tで問題を解いていて忘れやすいところや失点しやすい箇所をまとめました。
# 第一章 Linuxのインストールと仮想マシン・コンテナの利用
### ブートプロセス
- **Linuxの起動の流れ**
BIOS/UEFI → ブートローダ → カーネル → init/systemd
- **シャットダウンや再起動のコマンド**
22時にシステムをシャットダウンする場合 `shutdown -h 22:00`
60分後にシステムをシャットダウンする場合 `shutdown -h +60`
:::note warn
時間指定する場合は+はつかないので注意！
:::

### psコマンド
|オプション|覚え方や語源|説明|
|:-:|:-:|:-:|
|a|all|他ユーザのプロセスも表示|
|f|forest|親子関係をツリー状で表示|
|u|user|ユーザ名を表示|
|x|eXtend|デーモンなどのプロセスも表示|
|-e|every|すべてのプロセスを表示|
|-l|list|詳細な情報を表示|
|-p PID|process|特定のプロセスIDの情報を表示|

※他にもオプションはありますが試験で問われやすい主要なオプションのみまとめています。

### プロセスの終了
|シグナル名|シグナルID|動作|
|:-:|:-:|:-:|
|SIGHUP(HUP)|1|ハングアップ|
|SIGINT(INT)|2|キーボードからの割り込み(Ctrl+C)|
|SIGKILL(KILL)|9|強制終了|
|SIGTERM(TERM)|15|終了(デフォルト)|
|SIGCONT(CONT)|18|再開|
|SIGSTOP(STOP)|19|一時停止|

例文(以下は全部同じ動作をする)
`kill -s SIGKILL 123`
`kill -9 123`
`kill -KILL 123`
`kill -SIGKILL 123`

SIGHUPとSIGKILLとSIGTERMとかは結構問われやすい気がするので、シグナルIDも覚えるようにする。

### killallとpkill
killコマンドは基本的に1つのプロセスを殺すのに使うが、30個のPHPのジョブプロセスが暴走しているのを止めるときに使うときなどには向いていない。
そのような複数のプロセスキルにはkillallやpkillを用いる。
`killall php` phpという名前のプロセス全てにSIGTERMを送る
`pkill -U motoki php` motokiというユーザーが実行しているphpプロセス全てにSIGTERMを送る

### SSH周り
- SSHサーバで接続ユーザの公開鍵が格納されているファイル `authorized_keys`
- SSHサーバの公開鍵/秘密鍵が保存されているディレクトリ `/etc/ssh/`
- SSHクライアントでSSH接続先のホスト名やIPアドレス、公開鍵が格納されるファイル `known_hosts`
- `ssh-copy-id`コマンドを使うとサーバに公開鍵を簡単にコピーできる

| |SSHクライアント|SSHサーバ|
|:-:|:-:|:-:|
|設定ファイル|/etc/ssh/ssh_config|/etc/ssh/sshd_config|
|秘密鍵|~/.ssh/id_rsa|/etc/ssh/ssh_host_rsa_key|
|公開鍵|~/.ssh/id_rsa.pub|/etc/ssh/ssh_host_rsa_key.pub|
|認証鍵リスト|~/.ssh/known_hosts|~/.ssh/authorized_keys|

※秘密鍵や公開鍵の名称は鍵の種類によって異なる。

`ホスト認証` : SSHクライアントの「~/.ssh/known_hosts」のサーバ公開鍵と、サーバの公開鍵が一致するかどうか
`ユーザ認証` : SSHサーバの「~/.ssh/authorized_keys」のユーザ公開鍵と、ユーザの秘密鍵のペアが一致するかどうか

### KVM周り
KVMを使うにはCPUが仮想化支援機能に対応している必要がある。
IntelはVT-x、AMDはAMD-Vがそれらの仮想化支援機能である。
仮想化機能と連携するライブラリは`libvert`

### Virsh周り
|コマンド|説明|
|:-:|:-:|
|create|XML形式のファイルから仮想マシンを作成&起動|
|console|仮想マシンのコンソールに接続|
|start|起動|
|shutdown|終了|
|destroy|強制終了|
|reboot|再起動|
|suspend|一時停止|
|resume|再開|
|list|稼働中の仮想マシンを表示|
|list --all|全ての仮想マシンを表示|
|dumpxml|定義ファイルをXML出力|

参考 : Ping-t問題集 

### Docker周り
|コマンド|説明|
|:-:|:-:|
|docker run|コンテナ作成&起動|
|docker start|既存のコンテナを起動|
|docker stop|コンテナを停止|
|docker kill|コンテナを強制停止|
|docker ps|コンテナを一覧表示|
|docker rm|コンテナを削除|
|docker attach|コンテナの標準入出力に接続|
|docker exec|起動中のコンテナでコマンドを実行|
|docker pull|Docker Hubからイメージをダウンロード|
|docker push|Docker Hubにアップロード|
|docker images|イメージを一覧表示|

参考 : Ping-t問題集 

### デスクトップ環境
Xサーバ : ディスプレイやキーボードなどのハードウェアの管理を行う
Xクライアント : UIの描画やユーザー入力の受け取りなどを行う。
ウィンドウマネージャ : ウィンドウの外観、メニュー、アイコンなどを提供するXクライアント(twmなど)
ディスプレイマネージャ : GUIでログイン画面を表示しユーザ認証を行うソフトウェア
統合デスクトップ環境 : GNOMEやKDE
AI夢占い：世界中の夢を覗き見る新しい体験

こんにちは、データサイエンティストの山田です。最近、AIを活用した夢占いプラットフォームを使ってみて、とても興味深い発見があったので共有させていただきます。

## きっかけは深夜の不思議な夢

先日、私は奇妙な夢を見ました。空を飛ぶ電車に乗って、見知らぬ街の上を移動している夢です。普段なら、そのまま忘れてしまうような夢でしたが、たまたま見つけたAI夢占いサービス（ https://dream-interpretation.ai/ ）を使ってみることにしました。

## 予想外の発見：世界の夢データベース

このプラットフォームで最も興味深かったのは、「世界の夢」機能（https://dream-interpretation.ai/dreams-around-world ）です。世界中の人々が見た夢とその解釈を閲覧できるのです。

### 驚きの発見

1. **文化による解釈の違い**
- 同じ「飛行」の夢でも、文化によって全く異なる意味を持つ
- 日本人の夢には和風モチーフが多い
- 欧米人は行動的な夢が多い傾向

2. **共通するテーマ**
- コロナ禍での不安の夢
- 仕事や人間関係の悩み
- 将来への期待と不安

## 個人的な活用方法

### 毎日の記録
- 朝起きたらすぐに夢の内容を入力
- AIによる即時解析
- 他のユーザーの類似した夢を参照

### パターンの発見
- 仕事のストレスと夢の関連性
- 睡眠の質と夢の内容の相関
- 定期的に現れるシンボルの意味

## なぜAI夢占いが面白いのか

1. **リアルタイム性**
  - 深夜でも即座に解析が可能
  - 思い出しているうちにすぐ記録

2. **グローバルな視点**
  - 世界中の夢を参照できる
  - 文化的な違いを学べる

3. **プライバシーの保護**
  - 匿名で安心して共有可能
  - 個人情報の保護

## 実際の使用例

先日見た「空飛ぶ電車」の夢を入力したところ、興味深い解釈が返ってきました：

- 通常の移動手段（電車）が異常な状況（空飛ぶ）にある
- 新しい視点で物事を見る必要性
- 現状からの脱却願望

さらに、同じような「空の移動」に関する夢を見た世界中のユーザーの解釈も参照でき、自分の状況をより深く理解することができました。

## 技術的な観点から

AIの夢解析がなぜ効果的なのか：

- 大規模な夢のデ
Google スプレッドシートで在庫の「更新された日時」と「更新前の数量」が簡単にわかる方法

# はじめに
在庫管理をしたい場合、皆さんはどんなツールを思いつきますか？
商材が多い場合、データべースを導入して....と想像される方も多くいるかと思います。
しかし、導入に至るハードルは結構高いと考えています。

在庫管理では、「商品の在庫で更新されたタイミングがいつか？」「更新前の数量はいくつだったのか？」を気にされる方も多いと思います。
比較的簡単に操作できるGoogleスプレッドシードを用いることでも、上記２つの課題が解決できます。
スプレッドシートであれば、導入障壁も低く、最初の入り口としてはいいツール選定だなと感じています。

今回は、Google スプレッドシートを用いて在庫の更新日時と更新前の数量が簡単に特定できる方法について紹介します。

# 対象の読者
- 在庫管理をこれから始めたいけどデータベースを導入するほどでもないと感じてる方
- プログミングを駆使することなく、できるだけ工数かけることなく在庫管理をしたい方


# 方法
### データの準備
まず在庫データについての準備です。
今回は以下でデータを準備し、在庫更新が模擬的にできるような設計にしました。

:::note warn
すでに日別の在庫数がわかっている場合はこちらの章はスキップで問題ないです。
:::

- 2024年7月1日から2024年9月30日までの商品A001のデータが記載（A列、B列）
- 在庫の更新の有無(F列)と更新された増減数（D列）を記載
- 初期の在庫数のみを一番最初の行に記載
- 列名は「日時」「商品名」「在庫数」「在庫の増減」「更新前の在庫」「在庫更新の有無」「在庫更新のあった日付」の７つ


![スクリーンショット 2024-11-04 23.17.21 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725527/a0f41724-9cb8-53de-6f06-1e950fc95275.png)

ではここから在庫更新を模擬的に実践していきます。
更新があった日のみ値を変えるのには、`IF`関数を用います。
数式の表現としては、下記で記載してきます。

```
=IF(「在庫更新の有無」列のN行目="◯",「在庫数」列N-1行+「在庫の増減」列N行,「在庫数」列N-1行)
```

上記数式を活用すると、在庫更新のあった`2024/07/10`の値が、増減数のあった量になっていることがわかります。
他の更新のあった日も同様の結果となっています。

![スクリーンショット 2024-11-04 23.40.35 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725527/bd7f5290-717b-0b68-9c73-2929ac81dbe3.png)


### 「在庫更新の日時」の特定
では、本題に入っていきましょう。
先ほどのデータ準備と同じように、`IF`関数を使って下記のように数式を設定してきます。

```
=IF(「在庫の更新の有無」列N行目="◯",「日時」列N行目,「在庫更新があった日付」N-1行目)
```

それで数式を設定すると、「在庫更新の有無」で⚪︎がついているところで、更新のあった日付が記載されていることがわかります。

![スクリーンショット 2024-11-04 23.56.47 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725527/67854ac9-35cb-aeba-bba0-e7f4dbdee513.png)

### 「更新前の数量」の特定
最後に「更新前の数量」の特定を行います。
前段と同様に、`IF`関数を用います。数式は以下で設定します。

```
=IF(「在庫数」列N行=「在庫数」列N行,「更新前の在庫数」列N-1,「在庫数」列N行+(-「在庫の増減」N行))
```

上記数式を活用すると、更新前の在庫数がE列に入っていることがわかりました。

![スクリーンショット 2024-11-05 0.10.05 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725527/b3ff902c-5d2b-6285-8f17-ac7845f9cb5c.png)

# まとめ
今回はスプレッド在庫更新があった日時と更新前の在庫数について紹介しました。
IF関数を活用することで、とても簡単に「更新された日時」と「更新前の数量」が特定できました。
また、私が模擬的なデータでやってみましたが、皆さんの環境下に合わせてカスタマイズすることで多くのケースで適応が可能です。
これから在庫管理を始めたい方、すでにスプレッドシートで在庫管理をされている方は活用してみてください！
ブラウザのStorage機能の種類とそれぞれの特徴

ブラウザの`Storage`機能は、ウェブアプリケーションがユーザーのデバイスにデータを保存し、後で取得するための方法を提供します。主に以下の種類があります。

### 1. `LocalStorage`

- **概要**: `LocalStorage`は、ブラウザ内にデータをローカルに永続的に保存するための仕組みです。
- **特徴**:
  - **容量制限**: 通常は5〜10MB程度。
  - **持続性**: データは手動で削除しない限り永続的に保持されます（ブラウザを閉じても残る）。
  - **スコープ**: 同じオリジン（プロトコル、ドメイン、ポート）であれば、ページ間でデータを共有できる。
  - **データ型**: すべて文字列として保存される（オブジェクトを保存する場合は`JSON.stringify()`などで変換が必要）。
- **使用例**:
  ```javascript
  localStorage.setItem('key', 'value');
  console.log(localStorage.getItem('key')); // 'value'
  localStorage.removeItem('key');
  localStorage.clear();  // すべてのデータを削除
  ```

### 2. `SessionStorage`

- **概要**: `SessionStorage`は、ユーザーのセッション中に限りデータを保存するための仕組みです。
- **特徴**:
  - **容量制限**: `LocalStorage`と同様に5〜10MB程度。
  - **持続性**: 同じウィンドウまたはタブでのセッション中のみ有効。ブラウザのタブやウィンドウを閉じるとデータは失われる。
  - **スコープ**: 同じオリジン内の同じウィンドウまたはタブでのみデータを共有。
  - **データ型**: `LocalStorage`と同様に文字列として保存される。
- **使用例**:
  ```javascript
  sessionStorage.setItem('sessionKey', 'sessionValue');
  console.log(sessionStorage.getItem('sessionKey')); // 'sessionValue'
  sessionStorage.removeItem('sessionKey');
  sessionStorage.clear(); // すべてのデータを削除
  ```

### 3. `Cookies`

- **概要**: クッキーはサーバーとクライアントの間で小さなデータを保持するために使用されます。
- **特徴**:
  - **容量制限**: 1つのクッキーは4KB程度、全体で約300〜400個のクッキーを保持可能。
  - **持続性**: クッキーは有効期限を設定することでセッション中または一定期間保持できる。
  - **スコープ**: 同じオリジンで使用されるが、パスを指定することで細かく制限できる。
  - **用途**: 主にセッション管理、ユーザートラッキング、保存されたユーザー設定など。
- **使用例**:
  ```
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
  ```

### 4. `IndexedDB`

- **概要**: `IndexedDB`は、クライアント側のデータベースで、大量の構造化データを格納・検索するための仕組みです。
- **特徴**:
  - **容量制限**: 大容量のデータを扱える（ブラウザによっては数百MB以上）。
  - **持続性**: 永続的。ユーザーが手動でデータを削除するまで保持される。
  - **スコープ**: オリジンごとに分離。
  - **データ型**: オブジェクト、バイナリデータなど複雑な構造を保存可能。
  - **用途**: オフラインアプリ、リッチなデータ操作が必要なウェブアプリ。
- **使用例**:
  ```javascript
  let request = indexedDB.open("myDatabase", 1);
  request.onupgradeneeded = function(event) {
    let db = event.target.result;
    db.createObjectStore("myStore", { keyPath: "id" });
  };
  request.onsuccess = function(event) {
    let db = event.target.result;
    let transaction = db.transaction(["myStore"], "readwrite");
    let store = transaction.objectStore("myStore");
    store.add({ id: 1, name: "John Doe" });
  };
  ```

### 5. `Web Storage API`と`Cookie`の比較

- \*\*`LocalStorage`と`SessionStorage`\*\*は、単純なキーバリュー形式でデータを保存し、より使いやすいインターフェースを提供。
- \*\*`Cookies`\*\*は、HTTPリクエストヘッダに送信されるため、サーバーサイドとのやり取りに便利だが、容量制限が厳しく設定がやや複雑。

これらのストレージは、用途や要件によって適切に使い分けることで、効率的なデータ管理が可能になります。
VBAで画像挿入を一括実行

久々にコードプログラミングを。
業務でExcelに画像を大量に貼り付けることがあったので、
リサイズや配置間隔、画像の埋め込み等、諸々やってくれるコードを作ってみました。

# コード

```vb
Sub 画像挿入マクロ()
    Dim ws As Worksheet
    Dim selectedFiles As Variant
    Dim file As Variant
    Dim pic As Shape
    Dim startCell As Range
    Dim i As Long
    Dim cellWidth As Double
    Dim cellHeight As Double
    Dim picRatio As Double
    Dim nextCell As Long

    ' アクティブシートを設定(画像を挿入するシート指定する場合はここを変更)
    Set ws = ActiveSheet
    
    ' 画像を挿入する開始セルを設定（必要に応じて開始セルを変更）
    Set startCell = ws.Range("A1")
    
    ' 挿入する次のセルの間隔を設定（例：下方向に1セルごとに挿入）
    nextCell = 1
    
    ' ファイルダイアログを開いて画像ファイルを選択
    selectedFiles = Application.GetOpenFilename(MultiSelect:=True)
    
    ' ファイルが選択された場合
    If IsArray(selectedFiles) Then
        ' 選択された各ファイルについて処理
        For Each file In selectedFiles
            ' 画像をシェイプとして挿入（画像埋め込み）
            Set pic = ws.Shapes.AddPicture(file, msoFalse, msoCTrue, 0, 0, -1, -1)

            ' セルの幅と高さを取得
            cellWidth = startCell.Width
            cellHeight = startCell.Height

            ' 画像の縦横比を保ちながらリサイズ（セルの横幅に合わせる）
            picRatio = pic.Width / pic.Height
            pic.Width = cellWidth
            pic.Height = cellWidth / picRatio

            ' 画像をターゲットセルの位置に配置
            pic.Top = startCell.Top
            pic.Left = startCell.Left

            ' シェイプの配置オプションを設定 (セル削除や移動に合わせて移動するが、リサイズは行わない)
            pic.Placement = xlMove

            ' 次のセルに移動（横方向に移動したい場合は、nextCell変数を右側に変更）
            Set startCell = startCell.Offset(nextCell, 0)
        Next file

        MsgBox "画像の挿入が完了しました。", vbInformation
    Else
    End If
End Sub

```
# 使用例
### マクロを起動して、画像を挿入した順番に複数選択する。
![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260705/6e448673-9e2e-5cee-c0e5-0e8f745173b6.png)

### 選択後に画像をセルの横幅に合わせてリサイズして挿入される。
![101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260705/cd07ae03-9deb-dee9-9822-95a7f1a93e84.png)

### コード内の変数値をいじると位置や間隔も指定できます。
![102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260705/7d2d6818-2b67-c98c-4751-38f0bfac102a.png)
【Mac】コマンドでBase64エンコード・デコードする方法

## エンコード

`base64`コマンドを使用することでエンコードできます。

```terminal
$ echo "sample" | base64
c2FtcGxlCg==
```

```terminal
base64 -i image.jpg -o output.txt
```


## デコード

デコードするには`-d`を使用します。

```terminal
$ echo "c2FtcGxlCg==" | base64 -d
sample
```

```terminal
base64 -d -i sample.txt -o image.jpg 
```

## オプション

```terminal
$ base64 --help
Usage:	base64 [-Ddh] [-b num] [-i in_file] [-o out_file]
  -b, --break       break encoded output up into lines of length num
  -D, -d, --decode  decode input
  -h, --help        display this message
  -i, --input       input file (default: "-" for stdin)
  -o, --output      output file (default: "-" for stdout)
```
多言語非同期処理ベンチマークリベンジ

以前やってたベンチマークをリベンジ。
ソース: [【GitHub】AsyncBenchmark](https://github.com/yosgspec/AsyncBenchmark)

### 経緯
* 非同期処理を少し触る機会があったので、学びなおそうと思った
* 久々にいろいろなプログラミング言語を触りたいと思った
* 新しい非同期手法があるか確認したかった

### 処理内容
* スリープ(100～1000ms)
* たらい回し関数(12, 6, 0)
* フィボナッチ数計算(31～40)

### 処理方法
* 同期処理
* 非同期処理
    * シングルスレッド
    * マルチスレッド
    * マルチプロセス

### 言語(処理系)
* C++(g++)
* D(dmd)
* JavaScript(Node.js)
* C#(dotnet-script)
* CommonLisp(SBCL)
* Python(CPython、PyPy)
* HSP
* R(GNU R)

### 環境
* Windows11(ゲーミングノート)

### 実施結果
![sammary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147573/ffbf0272-8d1e-0ef1-b807-1f8d7c20dfd2.png)
![data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147573/e4cd26f0-1135-26bd-fb8a-dcaf435d2a87.png)

## 考察
* C++、Dのコンパイル言語は同期・非同期処理問わずに最速となった
* JITコンパイル系※の処理系もこれに続く結果となった
  ※Node.js、.Net、SBCL、PyPy
* インタプリタ系※の処理系は目立って遅かった
  ※CPython、HSP、R
* JITコンパイルはコンパイルより確かに遅いが、差はかなり小さい
  (型付けの適当なjsでここまで早いのは逆に異常。流石はブラウザ戦争の賜物というところ)
* PyPyはやはり早い。ただ、CPythonの完全代替までは届かないのが惜しい(今でもそのままのコードで動かせないことがある)
* GNU Rの遅さがヤバい。ベクトル計算をうまく活用できれば早くできそうな気はするけど独自のチューニング技術が必要そう
    * GNU RにはWindowsでマルチスレッドを使用することができないらしい。Windowsへの最適化の甘さみたいなものも遅くなる一因として考えられるのかも
* シングルスレッドによる非同期処理※ではスリープ処理以外の並行処理ができていないことが見て取れる。使いどころは加味して選択しなければならない
  ※JS Promise、Python ayincio
* Pythonのマルチスレッドでは[GIL](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%97%E3%83%AA%E3%82%BF%E3%83%AD%E3%83%83%E3%82%AF)の影響でシングルスレッドの非同期とほぼ同じになった
  GILはPyPyでも有効な様子

## 結論
* JITコンパイルって凄い

## 余談とか感想
* ソースコードは勉強がてらに無理やりいろんな書き方をしている
* C#のコンパイル版がない理由は以下の理由
	* 軽く測ってみた結果だとあまり差が見られなかった(ただし、最適化すれば変わるかも)
	* エントリポイントの変更が必要
	* .Netのコンパイルはプロジェクトファイルが必要で面倒
	* .Net Framework版でも別の修正が必要になるかも
* C++については導入が手軽なg++のみにした。cl.exeは導入が面倒なので非実施(VSと抱き合わせだよね?)
* CommonLispには仕様にスレッドが入っていないのでSBCL付属ライブラリで対応
* Rの内部計測時間と実時間の差おかしいので60倍で補正。時間を分で得ている…?

* コンパイル言語だとうまくやれば最適化次第で計算後の結果をあらかじめ持たせられると思う
* JSはスレッドもマルチプロセスの書けるようになったけど、文法が異質すぎる
  async/awaitだけでマルチスレッドできる方法が欲しくない?
* C++は大体ChatGPTに書いてもらった
* D言語で凄く苦しんだ。ChatGPTとペアプログラミングしてたけど、マイナー寄りの言語だと平気で嘘吐いてくるから困る
    * sendとreceiveの挙動の理解に苦しんだ
    * Dのthreadの結果がうまく収集できなかったので対象外にした
    * コンパイル通った後のエラー発生率が結構高くて辛い
* HSPは結構無理やりマルチプロセスにしている。GUI版のHSPには部分的なマルチスレッドに対応しているらしい
    * mistのマルチスレッドを使用するのも一つの手ではある
    * データのやり時は共有メモリではなくファイルを使用。共有メモリは標準ライブラリではサポートされていないため
Jenkins pipelineで、 docker agentをクリーンに利用する


# 解決したい問題点

Jenkins pipelineで agentにDocker Containerを指定・実行した場合、
WorkspaceをCleanしているのにかかわらず、前回実行時のファイルが残っている。     

この問題を解決するための記事です。

# 結論

私は `ws("${WORKSPACE}/${BUILD_NUMBER}/${EXECUTOR_NUMBER}")` を活用して、ディレクトリの分離を行いました。

```groovy
pipeline {
    stages {
        stage("docker agent sample") {
            agent {
                docker {
                    image 'hoge.com/sample-run:latest'
                    label env.NODE_LABEL
                    args "--rm -v /etc/hosts:/etc/hosts:ro -v ${WORKSPACE}:${WORKSPACE}" // ホストの/etc/hostsを読み取り専用でマウント
                }
            }
            steps {
                ws("${WORKSPACE}/${BUILD_NUMBER}/${EXECUTOR_NUMBER}") {
                    script {
                    	resultText = "Currrent dir is ${WORKSPACE}/${BUILD_NUMBER}/${EXECUTOR_NUMBER}"
                        writeFile(file: "result.log", text: resultText)
                        archiveArtifacts artifacts: "result.log", allowEmptyArchive: true
                    }
                }
            }
        }
    }
}
```

# 原因

JenkinsがContainerを起動するときに `-w ${WORKSPACE}` が強制的に付与されます
```bash
$ docker run -t -d -u 0:0 --rm -v /etc/hosts:/etc/hosts:ro -w $WORKSPACE --volumes-from xxxxx -e ******** hoge.com/sample-run:latest cat
```

かつ、docker argで指定したとしても、パメーターをオーバーライドしてくるので、下記の様に-w オプションを付与しても 効果なしです

```groovy
agent {
    docker {
        image 'hoge.com/sample-run:latest'
        label env.NODE_LABEL
        args "-w ${WORKSPACE}/${BUILD_NUMBER}/${EXECUTOR_NUMBER}"
    }
}
```
Flet を試す(2024/11)

# はじめに

久々にFletで何かを作ってみようということで、環境整備の手順をまとめておく。
2024/11時点での情報。

https://flet.dev/docs/getting-started/
↑に書いてある内容をまとめただけなので、不明点などあったら本家を参照ください。

# 前提事項

- OS: Windows11
- Python 3.13 インストール済み
- git インストール済み
- Flet のバージョン: 0.24.1

# 手順

## １）プロジェクトフォルダの作成と Python 仮想環境の準備

コマンドプロンプトにて、以下のコマンドを実行する。
プロジェクト名は「first-flet-app」としておくが、なんでもOK。

パッケージのバージョン衝突等を避けるため、仮想環境にしておく方が良い。

```winbatch
rem フォルダ作成＆移動
md first-flet-app
cd first-flet-app

rem 仮想環境作成
python -m venv .venv

rem 仮想環境を有効化
.venv\Scripts\activate

rem ※メモ：戻すときはこちら
.venv\Scripts\deactivate
```

## ２）最新バージョンの Flet をインストール

仮想環境を有効化した状態で、Flet をインストールする。
現時点での最新 0.24.1 が入った。

```winbatch
rem Fletインストール
pip install flet

rem バージョン確認
flet --version
↓出力
0.24.1
```

## ３）新しい Flet アプリを作成

テンプレート「counter」を指定してアプリを作成する。
多少コードが書いてあるので参考になるため。
特に要らないなら `flet create .` でOK。

```winbatch
rem テンプレを指定してアプリを作成 ※git が使えないとエラーになるので注意
> flet create --template counter .
↓出力
Done!

Run the app:

flet run

rem 作成されたファイルを確認 ※いろいろと自動作成される
dir /w
↓出力
[.]                [..]               .gitattributes     .gitignore         [.venv]            [assets]
main.py            README.md          requirements.txt
```

## ４）作成したアプリを実行

`flet run` で実行する。デフォルトで `main.py` が実行される。
ソースを指定する場合は、`flet run hoge.py` で指定可能。

```winbatch
rem 実行
flet run

rem webアプリとして実行
flet run --web
```

↓実行した様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273897/c8da99f9-8017-752c-edea-b9903e45a54c.png)
モダンJavascript 基本概念


モダンなJavascriptでよく引き合いに出される用語や概念をまとめました。
[【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner)で視聴したことを軽くメモしただけになっているので、近いうちに自分で調べたことをかみ砕いて補足するようにしたいです。

#### Javascriptってなに？
- もともとはHTML + CSSに動きを付けるために作られた言語
#### 初学者にJSがおすすめの理由
- ブラウザ上で動くためとりあえず動かすだけなら開発環境の構築が不要
- モダンJSは技術の移り変わりが早い→比較的ブルーオーシャン\
    (※ずっと勉強し続ける必要はあるが)
- Webシステムでは必ずJSを使う→大体のシステムで応用が利く
- バックエンドでアプリ開発もできる

### モダンJSとは
- 仮想DOMを用いるライブラリ、フレーム
- npm yarn などのパッケージを用いる
- E16の記法を用いる
- モジュールハンドラーを使用
- トランパイラを使用

### 仮想DOM
- DOM操作をいきなり行わず、JS上で仮想DOMを操作し、差分を出してから実際のDOMに反映する技術
- 開発者は仮想DOMを意識しなくても良い

### パッケージマネージャとは
#### パッケージファイル採用前
- プロジェクトの依存関係を管理するシステムのこと。
- パッケージマネージャを使用する前じゃ、すべて1つのJSにまとめていた。→共通化皆無。開発コストがかかる
  - →大きなまとまりごとにJSファイルを作成し、それを組み合わせる
    - コードの再利用や共通化ができるようになった
    - 依存関係が分かりにくくなった
    - 何をどこから読み込んだのか不明
  - npm, yarn →Node.jsが動いてくれる→依存関係を勝手に解決してくれるように。

#### npm, yarnの基本
1. NPM(様々なパッケージが保存・公開されているプラットフォームのこと。)から開発に必要なパッケージをインストールする(`npm install`)
2. package.json(パッケージの設計書)に何をどのバージョンでインストールするかの情報が記録される
3. 2.と同時にpackage-lock.jsonまたはyarn.lockが生成され、インストールしたモジュールが裏で使用しているほかのモジュールに関する情報が記録される(※手動で上書きとかしない)
4. nodeModulesに実際にモジュールがインストールされる(※ファイルが大きいのでGithubに上げない)

### ECMAScript
- JSの標準規格(こういう決まりでJSを書きましょう)。毎年更新される
- ES2015(ES6)で新機能が多く追加された
#### ES6の追加点
- 変数宣言
- アロー関数
- クラス構文
- テンプレート文字列
- スプレッド構文
- 非同期処理
など


### モジュールバンドラー
- 複数のJSファイルを一つにまとめてくれる機能
  - 開発時は細かく分けて開発したい(開発効率)
  - 本番環境での実行時は分かれている必要がない、パフォーマンスに影響する
  - →本番環境様にビルドするときに、依存関係の解決もしつつ1つのファイルにまとめるようにしよう！
ex Webpack

### トランスパイラ
- JSの新しい記法を古い記法に変換してくれる機能
- ES6の機能追加などに対応しきれていないブラウザ(IEとか)で新しい記法を使ったファイルを実行できるように
ex BABEL, SWC(Next.jsはSWCを内部で使用している)

### SPA
**Single Page Application**
- 画面に動きが生じたときに、JSでサイトの一部を表現する
- 従来のWebシステムは、リクエストに応じたHTMLを探す
- SPAは遷移先の画面表示のために必要なデータだけ受け取り、受け取ったデータをJSで動かして画面を構築して見せる
- 画面遷移ごとのちらつきがなくなる
- 表示速度が上がる
- コンポーネント分割が容易になり開発効率が上がる

### 参考
[【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門](https://www.udemy.com/course/modern_javascipt_react_beginner)
typescriptのデコレーターを理解する（サンプルコードあり）

TypeScriptのデコレーターは、クラスやそのメンバー（プロパティ、メソッド、アクセサリ、パラメータ）に特定の機能を追加するための機能です。デコレーターは関数として定義され、クラス宣言やクラスメンバーの定義に特定のアノテーションを追加し、その動作を変更することができます。これにより、コードの再利用性を高めたり、処理の共通部分を抽出して簡潔に記述できるようになります。

デコレーターは以下のように宣言します：

- **クラスデコレーター**：クラスに適用される。
- **メソッドデコレーター**：クラスのメソッドに適用される。
- **アクセサリデコレーター**：クラスのプロパティのgetterやsetterに適用される。
- **プロパティデコレーター**：クラスのプロパティに適用される。
- **パラメータデコレーター**：メソッドのパラメータに適用される。

## 使用例

### 1. クラスデコレーター

クラス全体に対して何らかの処理を行う場合に使用します。

```typescript
function Logger(constructor: Function) {
  console.log(`Class ${constructor.name} was created`);
}
@Logger class ExampleClass {
  constructor() {
    console.log('Instance created');
  }
}
const example = new ExampleClass();
// 出力:
// Class ExampleClass was created
// Instance created
```

この`Logger`デコレーターはクラスが宣言されたときに呼び出され、コンストラクターの名前をログに出力します。

### 2. メソッドデコレーター

メソッドの動作を拡張したり、ラップするために使用されます。

```typescript
function LogMethod(target: Object, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with arguments: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args); };

    return descriptor;
}

class ExampleClass {
  @LogMethod
  print(message: string) {
    console.log(message);
  }
}
const example = new ExampleClass();
example.print('Hello, Decorators!');
// 出力:
// Method print called with arguments: ["Hello, Decorators!"]
// Hello, Decorators!
```

‌

この例では、`LogMethod`デコレーターによって、`print`メソッドが呼び出されたときに引数がログに出力されるようになっています。

### 3. プロパティデコレーター

プロパティのデコレーションに使用され、主にメタデータを追加する目的で使われます。

```typescript
function ReadOnly(target: Object, propertyName: string) {
  Object.defineProperty(target, propertyName, {
    writable: false,
  });
}
class ExampleClass {
  @ReadOnly name: string = 'Initial Value';
}
const example = new ExampleClass();
example.name = 'Changed Value';
// エラー: プロパティは書き込み不可
```

`ReadOnly`デコレーターは、`name`プロパティを読み取り専用にします。

### デコレーターを有効にする設定

TypeScriptでデコレーターを使用するためには、`tsconfig.json`で以下の設定を有効にする必要があります：

```json
{ "compilerOptions": { "experimentalDecorators": true } }
```

## まとめ

デコレーターはコードの再利用を促進し、簡潔かつ保守しやすいコードを書くのに役立ちます。上記のような例を使って、クラスやメソッド、プロパティなどにアノテーションを追加し、その動作を変更することで柔軟な設計が可能になります。
PostmanでAPIのリクエスト・レスポンスを確認する方法

## はじめに

Postmanを利用してAPIにリクエストを送り、そのレスポンスを確認する方法を順を追って簡単にご説明しようと思います。

## Postmanとは

APIを開発、テスト、デバッグするためのツールです。開発者やテスターが、RESTful API や GraphQL API へのリクエストを簡単に送信し、レスポンスを確認するために使用されます。

フロントエンドエンジニアも、バックエンドエンジニア(サーバーサイドエンジニア)も必ず一度は利用するツールでしょう！

## Postmanにサインアップ or サインイン

Postmanを利用するにはアカウントが必要ですので、(まだ作成していない方は)作成してください。

https://www.postman.com

## collectionとRequestの作成

Postmanへのログインが無事成功したら、Workspaceを作成し、Collections -> Blank collectionを作成してください。(ディレクトリを作成するようなイメージです。)

※ collectionには様々な種類がありますが、特に理由がなければBlan collectionでOKです。

collectionを作成したら、Add requestを押下してリクエストを作成してください。(ファイルを作成するようなイメージです。)

![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3829908/af495a89-734e-6756-7cdd-5e371d8b7e9b.png)

## リクエストの送信方法

先ほど作成したリクエストを開くと、リクエストの送信方法に関する設定項目を入力できる画面が開きます。

1. GETやPUTなど対象のAPIのメソッドを選択
2. 対象のAPIのURL(URI + エンドポイント)を入力
3. Sendをクリック

↑でリクエスト送信完了です！
あとはそのAPIレスポンスが画面下側にある、Responseセクションに表示されるので確認してみましょう。

:::note alert
リクエストを送信してもエラーが出る場合

Postman Agent を Desktopにダウンロードしてください！(Responseセクションのエラーの内容にこのようなニュアンスの文言が含まれている場合、ダウンロードすれば解決します。)
:::

## リクエストの送信方法(オプション)

よく利用するリクエストの各セクションについて簡単に解説しておきます。

しかし、設定内容はAPIによって変わってくるので一概には言えないのですが、大抵のAPIに共通して利用できるような設定内容で解説します。

### Params

クエリパラメータのことです。
KeyとValueを入力すれば、APIのURLにクエリパラメータがクエリ文と一緒に自動で挿入されます。
(もちろん直接APIのURLの部分を編集してクエリ文を作成してもOKです。)

![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3829908/7c3acf1c-7a6d-37ac-c6c3-ec06fa3198c4.png)

### Authrization

特に理由がなければ触らなくてOKです。

### Headers

特に理由がなければ触らなくてOKです。

### Body

- form-data ... POST送信など、リクエストでフォームデータを送信する際に使います
- raw ... JSON形式で利用することが大体だと思われます(直接JSONを記述してリクエストを送信します)

### Scripts

特に理由がなければ触らなくてOKです。

### Settings

特に理由がなければ触らなくてOKです。

## さいごに

Postmanについて全く深掘りした内容でなくて申し訳ないです。(泣)

ですが、以上解説した内容がわかっていれば、必要最低限、業務は遂行できるかと思います。初めてPostmanを利用する人はぜひ参考にしてみてください！

## おまけ

APIにGETリクエストを送信する際、通常は**Params**でクエリパラメータを設定して送信すると思います。

ですが最近のAPIではRESTfulな設計になっているため、Bodyにraw(JSON)を含めてGETリクエストを送信することができるものもあります。
【開発メモ】Vue3の基本的な開発用語・記法の確認メモ③

# v-show
v-ifとの違いはタグがレンダリングされるかされないか。
表示されるかされないか、はv-ifと同じ動き。
ただし表示されなかった場合にもv-showはタグがdisplay:noneとして画面上には存在している。
頻繁に表示非表示を切り替えたいならv-showが負担少なくていい

# v-for
配列の中身を順番に出せる
```
const listInit : string[] = ['本庄','高崎']
const list = ref(listInit)

<ul>
    <li v-for="name in list" 
        v-bind:key="name" //配列の中身ひとつずつ出すときの名
    >
    </li>
</ul>
```

インデックスも出せる
```
v-for="(name,index) in list"
```

連想配列を使う時
```
v-for="(name, id, index) // 引数の順番大事。idは配列のキー。
```

v-bind:keyの存在意義が良く分からない。
とにかく一意になる値を設定（indexはNG）しておけば良さそう
同じコンポーネント内でおなじkeyが設定されないような工夫は必要


## Mapを使ったv-for
```
const actMapListInit = new Map<number, string>();
actMapListInit.set(1,'要潤')
    
    
    <ul>
      <li
        v-for="[id, name] in actMapList" // エイリアス部分をブラケット[]で囲む
        v-bind:key="id"
        >
        {{ name }}
      </li>
    </ul>
```

## ひとつのオブジェクトの中身(プロパティ)をひとつずつ表示
連想配列と同じような感じ。
そもそもJSの連想配列はオブジェクトらしい。
```vuejs
const objList: {
  id: string,
  name: string,
} = {
  id: '1',
  name: '名前',
}

<ul>
  <li
  v-for="(value, key) in objList"
  v-bind:key="key + value">
  <dt>{{ key }}</dt>
  <dd>{{ value }}</dd>
  </li>
</ul>
```

## オブジェクト配列のv-for
インターフェースを使っているが、インターフェースにする必要はない。
テンプレート変数の定義の時にオブジェクトの型を定義するのでもいい。
ただ、こうやってインターフェースを作っておくと、記述的に楽できるし、
次回以降同じ定義のオブジェクトを作りたいときに、
またインターフェースを継承すればよくなるので楽
あとエンジニアっぽくてかっこいい

```
const objListInit: ObjTest[] = [
  {
    id: '1', name:'あ'
  },
  {
    id: '2', name:'い'
  },
]

const objList2 = ref(objListInit);

interface ObjTest {
  id: string,
  name: string,
}

<ul>
  <li
  v-for="obj2 in objList2"
  v-bind:key="obj2.name">
  <dt>{{ obj2.id }}</dt>
  <dd>{{ obj2.name }}</dd>
  </li>
</ul>
```

## Mapの中にオブジェクト
```
// Mapにするのはgetメソッドで値を取り出しやすくなるから
const actMapListInit2 = new Map<number, ObjTest>();
actMapListInit2.set(1,  {id: '1', name:'石川'})
actMapListInit2.set(2,  {id: '2', name:'木崎'})

const actMapList2  = ref(actMapListInit2);
  <!-- Mapを利用するときはv-forのエイリアスは[]になる -->
  <template
    v-for="[id, obj2] in actMapList2" 
    v-bind:key="id">

  <dt>{{ obj2.id}}</dt>
  <dd>{{ obj2.name }}</dd>
  
  </template>
  ```

  ## 普通に回数指定もできちゃう
  5回ループ。始まりは１から。
  ```vue
    <template
    v-for="num in 5"
    v-bind:key="num">
    <ul>
      <li>{{ num }}</li>
    </ul>
  </template>
  ```
  こんな形にすれば始まりの値を調整できる。
```vue
v-for="num in 5"
v-bind:value="num + 4"
```
SD/TFの復活法

## はじめに
Windows, Linuxを関わらずSDカード、TF（microSD)カードが、使えなくなることがあります。記録した内容が不要ならSdFormatして、復活することもありますが、そもそもSystemに認識されなくなり、Format不能なこともあります。
ここに記すのは、こうした場合にデーターをできるだけ救い出し、ダメでも、Formatを可能にするTipです。

## ddrescueのinstall
toolとしてddrescueを導入します。
ただし、データーを修復しないで、Formatする場合はこの操作と、rescueは不要です。
```sh
upt update
apt install ddrescue
```
## rescue
- TFをリーダーに刺し、USBで接続します。
- 接続されたか、調べます。
``` sh
ls /dev/sd*
```
- バッファ側のTFをリーダー、USBを介して繋ぎます。
- 接続したか、調べます。
``` sh
ls /dev/sd*
```
- rescueします。
``` sh
ddrescue -f /dev/sdb /dev/sdc
```
- /dev/sdc をWindowsにつなぎ認識されるか調べます。
## Format
前節のReescue作業でLinuxでも読めない場合、Rescueはあきらめて、再Formatを試みます。
```sh
fdisk /dev/sdb # USBで認識されたSD
d #パーテーションを消す
d #複数あれば全部消す
n #パーテーションを新設
p # primary
1 # パーテーションナンバ
# start sector
# end sector
t #toggle mode
e # win95 extended
w
```
- windowsに繋いでformatします。多くの場合に認識されます。
【初心者向け】APIの強みとは？「速い」「安い」「高品質」な理由を徹底解説

# はじめに
APIの導入には多くの利点がありますが、**特に「速い」「安い」「高品質」という3つの強み**が際立っています。本記事では、APIがなぜシステム開発において優れた選択肢となるのか、それぞれの理由を具体例とともに詳しく解説していきます。

## APIの強み
APIは、システム同士の連携をスムーズにし、さまざまな機能を外部から簡単に取り入れるための仕組みです。開発現場では、APIの導入によってシステム開発の速度やコストが大幅に改善され、品質の高いサービスが提供可能になります。
　APIの「速い」「安い」「高品質」という3つの強みを理解することで、APIの価値をより深く知ることができます。

## APIの３つの特徴「速い」「安い」「高品質」について
**１、速い：システム開発の速度を大幅に向上**

・APIを利用することで、**システム開発における「製造」や「テスト」の工程が短縮され、結果として開発全体のスピードが上がります。**

・例えば、会社のホームページを作成する際、地図機能を導入するとします。

　・**APIなしの場合**：地図のデータ収集やズーム機能を自分で作成し、画面全体のデザインやテストも含めると時間がかかります。

　・**APIありの場合**：GoogleマップAPIを導入することで、地図表示とズーム機能が簡単に実装可能です。Google側で事前にテスト済みのため、こちらでのテストも少なくて済みます。

・このように、他社のAPIを使うことで、作業量が減り、完成までの時間が短縮されます。**「速い」という強みは、自分で作る必要がない部分をカットできる**ことにあります。



![](https://storage.googleapis.com/zenn-user-upload/678a27c81068-20241104.png)

**「速い」について**

**２、安い：コストを抑えた開発が可能**

・APIには多くの無料のものが存在します。たとえば、Googleマップや楽天、Dropboxなど、多くの大手企業がAPIを無料で提供しています。

　・**無料APIの活用**：商用利用や使用頻度によっては一部の機能が有料化される場合もありますが、多くの場合、試用や個人プロジェクトの範囲で無料利用が可能です。

　・**有料APIの例**：有料APIの代表例としてChatGPT APIやAmazon Payがあります。

　ChatGPT APIはAIを用いたチャットサービスで、簡単な質問に0.1円程度の料金がかかりますが、大量利用でも高額にならない仕組みです。また、Amazon Payは取引額の3.9％を手数料として支払うことで、顧客の決済を代行してもらえます。

APIの**「安い」という強みは、無料で提供されているAPIを活用することで、大幅に開発コストを削減できる点**が挙げられます。



![](https://storage.googleapis.com/zenn-user-upload/e285b73c72fd-20241104.png)

**「安い」について**
**高品質：信頼性の高いシステム構築が可能**

・APIの品質の高さも大きな強みです。高品質である理由は以下の通りです。

　・**高性能なAI**：AIを活用したAPIは、日々のアップデートにより品質が向上しており、ChatGPTやDeepL翻訳APIなどがその代表例です。こうしたAPIを利用することで、高度なAI技術をシステムに簡単に取り入れることが可能です。

　・**膨大なデータ量**：多くのAPIは、企業が保有するビッグデータにアクセス可能にしてくれます。たとえば、Googleマップの地図データや楽天の価格データなど、**大手企業の膨大なデータを利用して、自社システムで効果的に活用できます**。

　・**高いセキュリティ**：Amazon Payのように、セキュリティ面で優れたAPIを活用することで、**顧客の決済情報や個人情報を自社で管理する必要がなくなり、セキュリティ事故のリスクを軽減できます**。また、OAuthなどのAPIも、ログイン機能を外部に委ねることでセキュリティを確保しやすくなります。



![](https://storage.googleapis.com/zenn-user-upload/d8f9ecf90cf8-20241104.png)

「高品質」について
## まとめ
APIの強みは、「速い」「安い」「高品質」であり、これらの特徴を活かすことで、エンジニアは効率的なシステム開発が可能になります。また、マーケティング担当者やビジネスサイドの方でも、APIを理解し、どのようにビジネスに活かすかを考えることで、自身のキャリア向上に役立てられるでしょう。APIを積極的に活用し、よりスムーズな開発とビジネスの強化を図りましょう。

# ここでお知らせ！
APIに興味がある初心者の方へ、**基礎から実際のビジネス活用事例まで分かりやすく解説した講座**です！今なら、**このページから1か月限定で94％オフクーポン**を利用できます。今すぐAPIの知識を深め、ビジネスの幅を広げる一歩を踏み出しましょう。クーポンがなくなる前にお見逃しなく！


**クーポンコードはこちら：NOTEAPI202410**

https://www.udemy.com/course/oshiro_002/?couponCode=NOTEAPI202410

**Udemyは購入後30日以内であれば返金可能**
上記講座はUdemyで受講することができ、Udemyでは受講コースに納得がいかない場合、購入後30日以内であれば返金可能となっています。

購入後に「思っていたものと違う」、「学びにならなかった」と感じた場合は、返金申請を出すことができます。

返金の詳細はUdemy公式ページの**コースの返金方法**をご参照ください。
https://support.udemy.com/hc/ja/articles/229604248-%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%AE%E8%BF%94%E9%87%91%E6%96%B9%E6%B3%95
【初心者向け】APIの基本を理解！WEBAPI、NATIVEAPI、ランタイムAPIの違いを解説

# はじめに
前回の記事でAPIの基本を紹介しましたが、実はAPIにもさまざまな種類があります。本記事では、APIを「WEBAPI」「NATIVEAPI」「ランタイムAPI」の3つに分類し、それぞれの特徴や使用例について詳しく解説していきます。

## APIの種類について
APIには複数の種類があり、それぞれ異なる役割を持っています。一般的に使用されるのは「WEBAPI」ですが、「NATIVEAPI」や「ランタイムAPI」も特定の用途で活用されます。
　APIの種類を知ることで、システム間の連携やアプリケーションの開発がより効率的になります。特にWEBAPIは、インターネットを通じてデータをやり取りするための仕組みとして多くの場面で使用されています。

## APIの大まかな分類と特徴について
**・WEBAPI**
　・WEBAPIは、インターネットを通じてアプリやサービスがデータをやり取りするための仕組みです。

　・通信の流れは「リクエスト（要求）を送る → レスポンス（応答）を受け取る」という手順です。この流れでデータのやり取りが行われます。

　・WEBAPIには、自作のAPIと他社が提供するAPIの2種類があります。

　・例：自分のアプリでAI機能を利用したい場合、ChatGPTが提供するAPIを使ってAIの機能を組み込むことができます。

**・ネイティブAPI（OSのAPI）**

　・ネイティブAPIは、WindowsやmacOSなどのOSに最初から組み込まれているAPIです。OSの基本機能にアクセスするために使われることが多いです。

　・主にシステム内の操作や設定を行うために使われるため、頻繁に使われることは少なく、特定の場面で使用されます。

**・ランタイムAPI**

　・ランタイムAPIは、システムが実行中に外部システムと情報をやり取りするためのAPIです。

　・これはユーザーが意識せずに動作することが多く、使用頻度も低めです。

　・例えば、バックグラウンドでデータをやり取りするようなアプリケーションで、自動的に動作する仕組みとして活用されます。

![](https://storage.googleapis.com/zenn-user-upload/8062c8f83365-20241104.png)


## まとめ
APIにはWEBAPI、NATIVEAPI、ランタイムAPIの3種類があり、それぞれ異なる特徴と用途を持っています。特に、WEBAPIはインターネット上でデータをやり取りするために頻繁に利用されるため、APIといえばWEBAPIを指すことが多いです。今後、APIについて学ぶ際には、基本的にWEBAPIを念頭に置きつつ進めていくと理解が深まるでしょう。


# ここでお知らせ！
APIに興味がある初心者の方へ、**基礎から実際のビジネス活用事例まで分かりやすく解説した講座**です！今なら、**このページから1か月限定で94％オフクーポン**を利用できます。今すぐAPIの知識を深め、ビジネスの幅を広げる一歩を踏み出しましょう。クーポンがなくなる前にお見逃しなく！


**クーポンコードはこちら：NOTEAPI202410**

https://www.udemy.com/course/oshiro_002/?couponCode=NOTEAPI202410

**Udemyは購入後30日以内であれば返金可能**
上記講座はUdemyで受講することができ、Udemyでは受講コースに納得がいかない場合、購入後30日以内であれば返金可能となっています。

購入後に「思っていたものと違う」、「学びにならなかった」と感じた場合は、返金申請を出すことができます。

返金の詳細はUdemy公式ページの**コースの返金方法**をご参照ください。
https://support.udemy.com/hc/ja/articles/229604248-%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%AE%E8%BF%94%E9%87%91%E6%96%B9%E6%B3%95
【初心者向け】APIとは何か？APIの基礎知識を解説

# APIとは？

あなたはAPIについて、どんなイメージを持っていますか？よく耳にするけど、どういったものか漠然としていて分からないという人も多いかと思われます。

ではまず、APIとは、**Application Programming Interface**の略で、日本語にすると「アプリケーション・プログラミング・インターフェース」となります。

**・Application:** アプリケーション、つまりソフトウェアのことです。

**・Programming:** プログラミング、つまりソフトウェアを作るための作業のことです。

**・Interface:** インターフェース、つまり接続部分や仲介物のことです。

つまり、APIは「ソフトウェア同士を繋ぐための仕組み」と言えるのです。

## インターフェースとは？

「インターフェース」という言葉は、簡単に言うと**「異なるもの同士を繋ぐもの」**です。　
　ITの分野では、特にシステムや機器、ソフトウェアなど、異なる要素の間で情報をやり取りするための接点を指します。　
 　少し抽象的な言葉なので、具体的な例を見てみましょう。

**ユーザーインターフェース（UI）**

**・例:** スマートフォンの画面、パソコンのキーボードやマウス

**・役割:** ユーザーとコンピューターの間の橋渡し

**・特徴:** 直感的に操作できるよう、視覚的に分かりやすいデザインがされています。

**ハードウェアインターフェース**

**・例:** HDMIケーブル、USBケーブル

**・役割:** 異なるハードウェア同士を接続する

**・特徴:** 電気信号やデータのやり取りを可能にする物理的な接続部分です。

**アプリケーションプログラミングインターフェース（API）**

**・例:** 楽天市場のAPI、Google Maps API

**・役割:** 異なるソフトウェア同士を接続する

**・特徴:** プログラムから呼び出すことによって、他のソフトウェアの機能を利用することができます。

![](https://storage.googleapis.com/zenn-user-upload/0083706bc585-20241104.png)

**インターフェイスの具体例**

## APIの役割（重要）

APIは、異なるソフトウェア同士を繋ぐことで、以下のようなことを可能にします。

**・データのやり取り:** 異なるシステム間でデータを交換することができます。

**・機能の利用:** 他のソフトウェアが提供している機能を自分のソフトウェアから利用することができます。

**・システムの連携:** 複数のシステムを統合し、より大きなシステムを構築することができます。

## APIの例：楽天市場のAPI

例えば、あなたがECサイト（プログラム）を開発しているとします。このECサイトに、楽天市場の商品情報を表示したい場合、楽天市場が提供しているAPIを利用することができます。

楽天市場のAPIを利用することで、あなたのECサイトから楽天市場の商品検索ができたり、商品詳細情報を表示したりすることが可能になります。

![](https://storage.googleapis.com/zenn-user-upload/946fc23d7ca3-20241104.png)

**APIのイメージ図**

## まとめ

APIは、ソフトウェア同士を繋ぐための仕組みであり、異なるソフトウェアが連携して動作することを可能にします。APIを利用することで、開発者は、既存のソフトウェアの機能を再利用でき、開発効率を向上させることができます。

# ここでお知らせ！
APIに興味がある初心者の方へ、**基礎から実際のビジネス活用事例まで分かりやすく解説した講座**です！今なら、**このページから1か月限定で94％オフクーポン**を利用できます。今すぐAPIの知識を深め、ビジネスの幅を広げる一歩を踏み出しましょう。クーポンがなくなる前にお見逃しなく！


**クーポンコードはこちら：NOTEAPI202410**

https://www.udemy.com/course/oshiro_002/?couponCode=NOTEAPI202410

**Udemyは購入後30日以内であれば返金可能**
上記講座はUdemyで受講することができ、Udemyでは受講コースに納得がいかない場合、購入後30日以内であれば返金可能となっています。

購入後に「思っていたものと違う」、「学びにならなかった」と感じた場合は、返金申請を出すことができます。

返金の詳細はUdemy公式ページの**コースの返金方法**をご参照ください。
https://support.udemy.com/hc/ja/articles/229604248-%E3%82%B3%E3%83%BC%E3%82%B9%E3%81%AE%E8%BF%94%E9%87%91%E6%96%B9%E6%B3%95
Amazon WorkSpacesメモ

Amazon WorkSpacesは、AWSが提供する仮想デスクトップインフラストラクチャ（VDI）サービスです。これにより、ユーザーはクラウド上でWindowsやLinuxのデスクトップ環境を仮想的に利用でき、インターネット接続があればどこからでもデスクトップにアクセス可能です。企業内でのリモートワーク、BYOD（Bring Your Own Device）環境、柔軟なデバイスアクセスが求められるシナリオに最適です。

### Amazon WorkSpacesの主な特徴
1. **フルマネージドのVDI**  
   Amazon WorkSpacesはAWSが完全に管理しているため、インフラのセットアップやメンテナンスが不要です。仮想デスクトップのセットアップ、ソフトウェアのインストール、パッチ適用などの運用管理がAWSによって行われます。

2. **スケーラブルな仮想デスクトップ**  
   必要に応じて、デスクトップのリソース（CPU、メモリ、ストレージなど）を柔軟に設定・変更できます。また、企業規模に合わせて数十台から数千台の仮想デスクトップを迅速に展開可能です。

3. **セキュリティとコンプライアンス**  
   WorkSpacesはAWSのセキュリティ基準に従って管理され、データはAWSの安全なインフラ内で保存されます。画面転送プロトコルを使用して、データをローカルデバイスに残さずにセキュアに操作可能です。多要素認証（MFA）や、仮想プライベートクラウド（VPC）との統合も可能で、セキュリティ要件の厳しい業界にも対応できます。

4. **デバイスの柔軟性**  
   Windows、Mac、Chromebook、iPad、Androidデバイスなど、さまざまなデバイスからアクセスできます。BYODやリモートワーク環境に適しており、社外からでもセキュアに企業リソースへアクセス可能です。

5. **コスト管理の柔軟性**  
   WorkSpacesは、ユーザーごとに月額料金や時間単位の利用料金が選択できるため、利用状況に応じた柔軟なコスト管理が可能です。

### Amazon WorkSpacesの利用シーン
- **リモートワーク**: 自宅や出先からも社内環境にアクセスできるため、リモートワークのニーズに対応。
- **BYOD環境**: 社員が自分のデバイスから業務を行いたい場合でも、WorkSpacesであればセキュアな環境が提供でき、デバイスごとの管理負担が軽減。
- **季節・プロジェクトごとの追加人員**: 短期のプロジェクトや季節雇用での社員に対して、短期間でデスクトップ環境を提供でき、プロジェクト終了後には簡単に削除可能。
- **教育機関や研修環境**: 仮想デスクトップを活用して、学生や研修生向けに共通環境を提供しやすくなります。

Amazon WorkSpacesは、仮想デスクトップの管理が容易で、安全性の高いクラウド環境を提供するため、さまざまな業界で活用されています。
AWS Directory Serviceメモ

AWS Directory Serviceは、AWSが提供するクラウドベースのディレクトリサービスで、Microsoft Active Directory（AD）の機能をAWS環境で使用できるようにします。特に、既存のオンプレミスのADと統合したり、完全にAWS上で新たなADを構築したりするのに役立ちます。これにより、Windows環境のシングルサインオンやセキュリティ設定の管理を、クラウド上で簡単に行えます。

### AWS Directory Serviceの主なタイプ
1. **AWS Managed Microsoft AD**  
   AWSがフルマネージドで提供するMicrosoft Active Directory。Windows Server Active Directoryと同様の機能を持ち、既存のオンプレミスADとAWS ADをディレクトリ信頼関係で接続することも可能です。これにより、既存の認証情報やポリシーをAWSリソースに対しても活用できます。

2. **Simple AD**  
   Microsoft ADの基本機能を備えた軽量ディレクトリサービスです。ADの完全な機能が不要な場合や、少人数の組織向けに設計されています。基本的なドメインコントローラーとしての機能や、シングルサインオンが必要な場合に利用できます。

3. **AD Connector**  
   オンプレミスのADとAWSを簡単に統合するためのプロキシサービスです。AWS上に新たにADを構築することなく、既存のオンプレミスADをそのまま利用したい場合に適しています。これにより、AWS環境でもオンプレミスのADと同じ認証情報やアクセス権を使えます。

4. **Amazon Cognitoユーザープールとの統合**  
   AWS Directory ServiceはAmazon Cognitoと統合されており、Active Directoryを使った認証をAmazon Cognito経由で行うことができます。これにより、AD認証を活用したアプリケーションへのアクセスをAWS内でシンプルに管理できます。

### AWS Directory Serviceの利用シーン
- **シングルサインオン（SSO）**: AWS Managed Microsoft ADやAD Connectorを使って、社内のActive Directoryと統合し、AWSサービスやアプリケーションに対してシングルサインオンを実現。
- **オンプレミスADとの連携**: ハイブリッドクラウド環境で、オンプレミスADとAWS上のADを信頼関係でつなぎ、クラウドリソースに社内ADの認証情報を活用。
- **IAMの簡素化**: 既存のADユーザーとグループを活用することで、IAMユーザーの個別設定を最小限に抑え、アクセス管理を簡素化。

### AWS Directory Serviceのメリット
- **フルマネージド**: サーバのパッチ適用やバックアップなどの運用管理はAWSが行うため、手間がかかりません。
- **セキュアなアクセス**: AWS環境においても、オンプレミスADと同じセキュリティモデルでアクセス管理が行えます。
- **スケーラビリティ**: ユーザー数が増えても、自動的にスケールし、高い可用性を維持できます。

AWS Directory Serviceを使用することで、オンプレミスのAD環境をAWS上に拡張し、クラウドリソースへのアクセス管理をセキュアに効率化できます。

###　イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/7492c42d-1443-7018-677a-04c4ca0be2fc.png)