OmniAICreator/Qiita-1.07M huggingface dataset:
Beginner picoMini 2022 writeup runme.py

## runme.py (General Skills)

Run the runme.py script to get the flag. Download the script with your browser or with wget in the webshell. Download runme.py Python script

添付ファイル
・runme.py

プロンプトに`python runme.py`を入力してrnme.pyを実行するだけでフラグが得られた。

`picoCTF{run_s4n1ty_run}`
【個人開発】【Electron + Vue.js】デジタルノートアプリ『Puppet』開発のまとめ

# この記事はまとめです

こちらの記事が長くなったために、簡潔にまとめました。


https://qiita.com/WhizzClocks/items/311eb642548fdf5f20ae




| タイトル | 内容 |
|:-:|:-:|
| [アプリ開発の背景](#開発経緯のまとめ)  |  アプリ開発をした理由は？ |
| [アプリに使った技術](#技術のまとめ)  | なぜその技術を使ったのか？  |
| [アプリで工夫したところ](#工夫ポイントのまとめ)  | 工夫点について  |
| [アプリの使い方](#使い方まとめ)  | どうやってアプリを使えばいいかの提案  |
| [アプリの改善点](#改善点のまとめ)  | これからの展望  |



## 開発経緯のまとめ

#### きっかけ
- 数ヶ月前、ソフトウェアの操作方法の詳細なマニュアルを制作。
- 30ページのPDFにしたが、他の人から「欲しい情報がすぐに見つけられない」と指摘された。
- 情報量が多く、探しにくいことが問題だったと感じた。

#### マニュアルのページ数削減では解決しなかった
- 言葉をコンパクトにしたり、画像の配置を変えてページ数を減らそうとした。
- 結果、2ページ減ったが、情報の探しやすさは変わらなかった。

#### 課題の本質

- 「情報量が多い中で、欲しい情報を探すのが難しい」ことが問題。
- 必要な情報を得るために、「情報の取捨選択が多すぎる」

#### 解決策の考案

- 「欲しい情報が探しやすく、情報の取捨選択を少なくする工夫」を考える必要がある。
- 文章の書き方の工夫では解決が難しいため、アプリの開発を考え始めた。

#### タブレット端末からのひらめき

- アプリのアイコンのように、見出しを並べて表示することで情報が探しやすくなると考えた。
- 直感的な操作で欲しい情報が取得できるアプリを作ることを目指した。


## 技術のまとめ

#### 【Electron】

- 半永久的に使うことを想定し、ネイティブアプリケーションを選択。
- 先輩が個人開発で使用していたため、実際に見て興味を持った。


#### 【Vue.js】

- Qiitaや技術ブログでの情報から、Electronと相性が良いことを確認。
- 記事や動画で「LocalStorageの使用も簡単で、ビルド時の設定が不要」と知り、希望が見えた。

#### 【VueQuill】

- メールアプリやWordのUIに似たものを探していた。
- QiitaでQuillを発見し、Vue向けのVueQuillがあることを知って選択。

#### 【vue-mermaid-string】

- 初めはfishbone diagramを考えたが、技術力不足で断念。
- jsライブラリでフローチャートを調査し、Mermaidを発見。
- 他のライブラリも試したが、完全無料のMermaidを選択。
- ノードをクリックする機能実装時の問題で、vue-mermaidではなくvue-mermaid-stringを選択。


## 工夫ポイントのまとめ

#### ノードの色と形の設定

- ノードの色
    - 見出し1を基準に色の系統を分け、階層ごとに色を濃くする。
    - 同じ色の系統でグループを直感的に識別可能に。
    - 12色用意し、13個以上の見出しがある場合は色を再利用。
- ノードの形
    - 階層ごとに形を変え、直感的に階層を識別できるように。
    - 外枠線を同じ色にして外枠を目立たなくし、線のみのタイプで見た目をすっきりさせる。

#### ポップアップ表示
- クリックした見出しの内容だけを表示し、周りをスッキリさせた。


#### トラックパッド操作によるインタラクション
- トラックパッド操作で見出し間を移動可能にし、操作性を向上。


## 使い方まとめ

#### マニュアルの閲覧
  - ノードグラフ（ダイアグラム）を自動で生成し、目次として機能。
  - 縦並びでどことどこが同じ階層なのか、わからなくなる問題を解決。
  - 横並びやノードの形設定で見間違い防止。
  - ポップアップ表示により、特定の見出しの内容だけを表示し、情報量を制限。

#### タッチパネルでの利用
  - タッチパネル対応パソコンで、人に何かを説明するときに使える。
  - 視覚的にわかりやすく、カテゴリ分けが一目で理解できる。

## 改善点のまとめ


- 現在地表示:
    - ポップアップに位置表示
    <br>
- アニメーション: 
    - トラックパッド操作に動き追加
    <br>
- 共有機能:
    - ノートの出力・読み込み
    <br>
- スケーリング対応: 
    - 高解像度や小型画面対応
    <br>
- サイズ調整: 
    - ノード数に応じてグラフサイズ自動調整
    <br>
- ノード編集: 
    - ノードから文章編集・ノードのドラッグ&ドロップ
    <br>
- マークダウン対応:
    - マークダウンを選べるように
    <br>
- 設定充実: 
    - 説明画面の強化、色変更、ダークモード対応
    <br>
- 色選択:
    - ノードの色を好きに設定できる

---

改善点について、アドバイスいただけると幸いです。


以上です。
お読みいただき、ありがとうございました！

---


# メイン記事（上記と同じもの）

https://qiita.com/WhizzClocks/items/311eb642548fdf5f20ae
Beginner picoMini 2022 writeup PW Crack 2

## PW Crack 2 (General Skills)

Can you crack the password to get the flag? Download the password checker here and you'll need the encrypted flag in the same directory too.

添付ファイル
・level2.py
・level2.flag.txt.enc

PW Crack 1とほぼ一緒と推察できる。なので、先にlevel2.pyのコードを確認。
```python
def level_2_pw_check():
    user_pw = input("Please enter correct password for flag: ")
    if( user_pw == chr(0x64) + chr(0x65) + chr(0x37) + chr(0x36) ):
        print("Welcome back... your flag, user:")
        decryption = str_xor(flag_enc.decode(), user_pw)
        print(decryption)
        return
    print("That password is incorrect")
```
user_pwがchr(0x64) + chr(0x65) + chr(0x37) + chr(0x36)であればフラグが得られるらしい。
16進数を文字列に直すと、`de76`であるから、level2.pyを実行してパスワードde76を入力する。

`picoCTF{tr45h_51ng1ng_489dea9a}`
chatGPTを使用しmidi譜面を作成(作曲)してみる

こんにちは　作曲大好きスクラムマスターKDDIアジャイル開発センターのたかたにです。
普段はバンドマンしてたり、会社の部活の音KAG\部で作曲をしてます。

# はじめに

本題ですが、1曲丸々作ってくれるSunoAIを使って作曲する人が最近、増えてます。
でも、それって気になったとこ直せなかったりかゆいとこに手が届かないことはありませんか？
また、作曲ソフトを使っている方は打ち込みが面倒なこと、打ち込みの案が思いつかないことは多々ありませんか？

そんな方に向けた記事を今回は投稿します。

# 譜面作成の手順

生成AIを使って、midi譜面を作ってみましょう。
手順は以下です。

1. 生成AIと作りたい曲、必要なパート、そのテンポを壁打ちして、ABC記譜法(※1)の譜面を作成させる
1. 生成AIにABC記譜法の譜面をpythonで実行する方法/ソースコードを聞いてみる
1. music21(※2)をインストールする
1. 生成AIに聞いたソースコードを環境に貼り付ける
1. 作成したABC記譜法の譜面を貼り付ける
1. 各パート分、実行
1. 作曲環境に入れてみる。（テンポ等も壁打ちしておくのが大事）

完成！！！

※1 ・・・ ABC記譜法とは、アスキー文字を並べて譜面を表現できるように考案された記法
※2 ・・・ music21とは、MITによって開発された音楽情報処理ライブラリです。本ライブラリでは、楽譜の解析や編集など多岐にわたった処理を行うことが可能

それでは、手順を細かく説明していきます。

### ABC記譜法の譜面を作成

普段はもっと細かくどんな曲を作りたいかを壁打ちするが、今回は「かえるのうた」を作ってもらうことにします。
chatGPTを立ち上げて、

```
あなたは音楽家です。かえるのうたのメロディーを教えてほしいな。ABC記譜法で作成することはできる？BPMもついでに教えてください。
```
と聞いてみると、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/4b985835-49d4-bfb8-cf2a-64f8ecf96865.png)

それっぽいものが出てくる。

せっかくなのでドラムパートも作ってもらう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/cd6b3cc4-92d1-abff-0f37-4dd27db6805d.png)

物足りなそうなので、ピアノ伴奏も足してもらう・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/86e2a71c-9772-0454-4d2e-58bb4445db7b.png)


調子乗って他のパートも考えてもらう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/bcba0679-b8a4-518d-500c-60174fe3e994.png)

なんとなく不協和音になる気がしてきたが、デモなのでヨシ！

### ソースコードを作ってもらう

こう聞けばよしなにやってくれる。

```
ABC記譜法の譜面をpythonでmidiに変換したいんだけどできる？
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/11a5d4c4-18bc-878c-d6ef-1443ff0e8f0b.png)

music21をインストールして、、、
```
pip install music21
```

以下のコードのpythonファイルを作成

```py 
from music21 import converter, midi

def abc_to_midi(abc_notation, output_file):
    # ABC記法の譜面を読み込み
    score = converter.parse(abc_notation, format='abc')
    
    # MIDIファイルに書き出し
    mf = midi.translate.music21ObjectToMidiFile(score)
    mf.open(output_file, 'wb')
    mf.write()
    mf.close()

# ABC記譜法のサンプル譜面
abc_notation = """
X:1
T:Simple Scale
M:4/4
L:1/4
K:C
C D E F | G A B c |
"""

# 出力するMIDIファイルのパス
output_file = 'output.mid'

# AABC記譜法の譜面をMIDIに変換
abc_to_midi(abc_notation, output_file)
```

### midiの作成
ABC記譜法の譜面を上記コードのサンプル譜面部分に貼り付けて実行します。
それを読み込めば・・・

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553613/feb94b96-6fe2-1889-0e63-6c94274096df.png)

完成〜〜〜！！！

↓作成した曲のリンク↓
https://drive.google.com/file/d/1IAzNguN3iMvvGjJY6s30Dse9US_PDbe2/view?usp=drive_link

カオスだけど、キーがあってるので、それっぽい曲はできました。

# 感想

- 新曲作ってみるときの壁打ち相手としては悪くなさそう。
- 欲しいループ素材のmidiが作曲環境にない時に簡単なループ素材のmidiを作ってもらうのには良さそう。
- やっぱ曲は自分の手で作るのが楽しいよね！

以上、chatGPTを使用し、midi譜面を作成してみるでした〜

最近作った曲はこちら！
https://www.youtube.com/watch?v=qRmpwQokeLM
photon pun2 備忘録

# はじめに
・photon pun2 の勉強したけど最近使わなくなったので、忘れる前にまとめておこうと思います
・必要な処理をすべて書くとコード量がすごいことになってしまうので、最低限の骨格だけを書いていきます
・photon pun2 の概要と、オンラインゲームの作り方がこの記事をみて少しでもわかるようになってくれれば嬉しいです

## 接続について
https://doc.photonengine.com/ja-jp/pun/current/connection-and-authentication/regions#pun-2

・下の図が接続の大まかな流れです
・ネームサーバーでは世界中にある photon cloud のリージョンサーバーから適切なリージョンを自動的に選択してくれるので実装する側はあまり気にしなくても大丈夫です、僕も初めて知りました
・実装する人はネームサーバーより後ろからみるとわかりやすいかもしれないです

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669184/692d1205-66f2-dc3d-9f64-afb63310e49a.jpeg">


## コードについて
### MonoBehaviour PunCallbacks
MonoBehaviour PunCallbacks を継承すれば　ルームに参加や退出したときにコールバックを受け取れます

### ユーザー　→　マスターサーバー
```
public void Start()
{

if (! PhotonNetwork.IsConnected)

{

 //  inspectorで設定したネットワークの設定でネットワークに接続する

PhotonNetwork.ConnectUsingSettings();    

}

}
```

### マスター　→　ロビー
```
public overrride void OnConnectedToMaster ()

{

//  ロビーに参加する

 PhotonNetwork.JoinLobby () ;

}
```

### ロビーに接続したときの処理
```
public override void OnJoinedLobby ()

{

}
```

### ルームを作成時の処理
```
RoomOptions options = new RoomOptions ();

//   無料版は20人まで
//   人数を増やしすぎると難しくなる
options. MaxPlayers = 8;  

//   ルーム作成

PhotonNetwork.CreateRoom ( roomName.text, options );
```

### ルーム作成失敗時の処理
```
public override void OnCreateRoomFailed ( short returnCode,  string message )

{

//   message は なんで失敗したか教えてくれる

}
```


### ルームに参加するときの処理
```
public void JoinRoom ( RoomInfo roomInfo ) 
{

PhotonNetwork. JoinRoom (roomInfo. Name);

}
```

### ルームに参加した時の処理
```
public override void OnJoinedRoom ()
{

}
```


### ルーム退出時の処理
```
public void LeaveRoom ()

{

//  ルームから退出

PhotonNetwork. LeaveRoom () ;

}

//  ルーム退出時に呼ばれる関数

public override void OnLeftRoom ()

{

}
```


## 参考, わかりやすいサイト
https://www.udemy.com/course/unity-photon-fps/?couponCode=24T3MT53024

https://youtu.be/mXPndbtKbTo?si=sRez4xHbjGEsQUee

https://zenn.dev/o8que/books/bdcb9af27bdd7d/viewer/3305df

# さいごに
・まだ初心者なので勘違いやミスがあると思います、もしあったら教えてもらえると嬉しいです
・結構 自分用みたいな感じになってしまいましたが誰かの役に立てたらうれしいです！

・以上です、お読みいただきありがとうございました。
Beginner picoMini 2022 writeup PW Crack 1

## PW Crack 1 (General Skills)

Can you crack the password to get the flag? Download the password checker here and you'll need the encrypted flag in the same directory too.

添付ファイル
・level1.py
・level1.flag.txt.enc

とりあえず、level1.pyを実行してみると、パスワードの入力を求められた。
level1.pyのコードを確認すると、
```python
def level_1_pw_check():
    user_pw = input("Please enter correct password for flag: ")
    if( user_pw == "1e1a"):
        print("Welcome back... your flag, user:")
        decryption = str_xor(flag_enc.decode(), user_pw)
        print(decryption)
        return
    print("That password is incorrect")
```
とある。user_pwが1e1aであればフラグが得られるらしいので、もう一度level1.pyを実行してパスワード1e1aを入力する。
`picoCTF{545h_r1ng1ng_fa343060}`
既存のGitリポジトリをorganizationに移行する

## 自分の環境
- macOS Sonoma 14.4
- コンソール : zsh

## 経緯
今まで個人リポジトリで管理していたプロジェクトを企業用リポジトリに移行することになったので、今後同様の機会があった時の為にも備忘録として残しておきます。
新しく企業用リポジトリを作成する際にも参考になります。

## 注意
これからの手順はコミット履歴を引き継ぐことはできません。私の場合はコミット件数が少ないかつ、完全個人で管理していたため下記手段を実施しましたが、状況に応じて適切な手段を取ってください。

## 1. 既存のプロジェクトから.gitを削除
既存のプロジェクトをコンソールで開きます。（以下参考）
```
cd /Document/Develop/{プロジェクト名}
```

念のため.gitが存在するか確認しておきます。
```
ls -la
```

![スクリーンショット 2024-06-10 13.52.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/839842/cd3e1e3b-9c1f-1ff5-73da-85c2b6955b0e.png)

.gitが存在するので消していきます。
```
sudo rm -rf
```

再び先ほど打ったlsコマンドで確認して削除されていれば完了です。

## 2. 企業用リモートリポジトリを作成
企業用GitHubアカウント（organization）の配下にリポジトリを作っていきます。
```
gh repo create <organization名>/<リポジトリ名> --private --confirm
```

## 3. リモートリポジトリにローカルプロジェクト追加
プッシュ予定のプロジェクトのルートで以下のコマンドを打ちます。
```
git remote add origin https://github.com/<organization名>/<リポジトリ名>.git
```

以下のエラーが出ることがあります。これはgitの設定の問題です。
```
fatal: not a git repository (or any of the parent directories): .git
```

以下で直ります。このコマンドでエラーが出る場合はgit --globalコマンドでgitの初期設定をしてみてください。
```
git init
```

最後にプッシュして完了です。（私はvscode上からGUIでやりました）
```
git add .
git commit -m "Initial commit"
git push -u origin master
```
laravel S3からファイル取得

前提
・コンポーザーで以下が入っている。
```
composer require aws/aws-sdk-php
```
・copnfig/app.phpなどAWS用のライブラリ設定済み(以下のもの)
```
  'providers' => array(
        // ...
        Aws\Laravel\AwsServiceProvider::class,
    )

'aliases' => array(
        // ...
        'AWS' => Aws\Laravel\AwsFacade::class,
    )
```
・ config/aws.php設定済み （こういうの）
```
<?php

use Aws\Laravel\AwsServiceProvider;

return [

    /*
    */
    'credentials' => [
        'key'    => env('AWS_ACCESS_KEY_ID', ''),
        'secret' => env('AWS_SECRET_ACCESS_KEY', ''),
    ],
    'region' => env('AWS_REGION', 'us-east-1'),
    'version' => 'latest',
    'ua_append' => [
        'L5MOD/' . AwsServiceProvider::VERSION,
    ],
];

```
1. AWSコンソールからアクセスキーとシークレットアクセスキーを取得
・サービスからIAMへ
・メニューからユーザを選択
・ セキュリティー認証情報からアクセスキーを作成
→ csvがダウンロードできる
・laravelへ設定
.envにそれぞれ設定
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=

以下のようなコードでS3からデータ取得できる
```
<?php

namespace App\Console\Commands;

use Aws\S3\S3Client;
use Config;
use Illuminate\Console\Command;

class LoanInitialRate extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'import:loan_initial_rate';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $s3 = new S3Client([
            'credentials' => Config::get('aws.credentials'),             // aws上では省いたほうが良さそうなのでちょっとそこはわけたほうがよいかも(推測)
            'version' => 'latest',
            'region' => 'ap-northeast-1'
        ]);
        $s3_list = $s3->ListObjects([
            'Bucket' => 'example-s3',//バケット名
            'Prefix' => "fileno_",//ファイル指定
        ]);

        foreach ($s3_list['Contents'] as $object) {
            echo "ファイル名: " . $object['Key'] . "\n";
        
            // 各ファイルの内容を取得
            $file = $s3->getObject([
                'Bucket' => 'example-s3',
                'Key'    => $object['Key']
            ]);
        
            // ファイル内容を表示
            $content = $file['Body']->getContents();
            echo $content . "\n";
        }        
        

    }

}
```
eslintをv7からv8にアップデート



## やったこと

```diff:diff
- "@typescript-eslint/eslint-plugin": "^6.21.0",
- "@typescript-eslint/parser": "^6.21.0",
- "eslint": "^7.29.0",
- "eslint-plugin-jest": "^27.2.3",
+ "@typescript-eslint/eslint-plugin": "^7.9.0",
+ "@typescript-eslint/parser": "^7.9.0",
+ "eslint": "^8.57.0",
+ "eslint-plugin-jest": "^28.5.0",
```

- nodeを18.18.0以上に変更
- @typescript-eslint/eslint-pluginと@typescript-eslint/parserをtypescript-eslintに変更

## @typescript-eslint　v7の要件
- node v18.18.0以上
- ESLint の最小バージョンが v8.56.0


https://github.com/typescript-eslint/typescript-eslint/pull/8377


## `@typescript-eslint/XX`が`typescript-eslint`に統合された


https://typescript-eslint.io/blog/announcing-typescript-eslint-v7/


typescript-eslintに移行するにはFlat Configに変更する必要があったが、移行後eslintを実行するとエラーが発生
eslint-config-nextもアップデートしてみたが変わらず
Flat Configはv9でデフォルトとなり、v10で完全に削除されるのでv9で対応することにした


https://zenn.dev/mayobimu/scraps/8c5f239324c514



```
Oops! Something went wrong! :(

ESLint: 8.57.0

Error: Failed to patch ESLint because the calling module was not recognized.
If you are using a newer ESLint version that may be unsupported, please create a GitHub issue:
https://github.com/microsoft/rushstack/issues
    at Object.<anonymous> (/XXX/node_modules/@rushstack/eslint-patch/lib/modern-module-resolution.js:141:19)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at Object.<anonymous> (/XXX/node_modules/@rushstack/eslint-patch/modern-module-resolution.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
Docker Imageどれを選んだらいいのかわからない

## 困ったこと
いざアップデートしようとしてtagsを見ていてもいっぱいあり過ぎてわからない...
slim?buster?alpine?何が違うんだ...
となったので調べてみました

nodeを導入する前提として進めていきますが、node以外でも参考になるはず

https://hub.docker.com/_/node/tags


よければこちらもみてください↓

https://qiita.com/mayobimu/items/c1eb88882dec2fa132ed

## node

`22.x`は2024-10-29からLTSになるのでそれまでは依存関係次第ですが`20.x`を選択しておけばOK


https://nodejs.org/en/about/previous-releases



https://github.com/nodejs/release?tab=readme-ov-file#release-schedule



## ベースイメージ
v20.10で絞り込んでみるとこれだけあリました

```
20.10.0
20.10-slim
20.10-buster
20.10-buster-slim
20.10.0-bullseye
20.10-bullseye-slim
20.10.0-bookworm
20.10-bookworm-slim
20.10.0-alpine3.19
20.10.0-alpine3.18
20.10.0-alpine3.17
20.10.0-alpine
20.10-alpine
```

## Dockerイメージの選び方

## 各ベースイメージの特徴

### Alpine Linux

- サイズ: 非常に小さい（数MB程度）
- 起動速度: 非常に速い
- 安定性: 高い
- セキュリティ: 最小限のパッケージで攻撃面が小さい
- 互換性: やや低い
- パッケージマネージャ: `apk`
- 使用シーン: 軽量でセキュリティが重視される場合

### Debian

- パッケージマネージャ: `apt-get`

#### Debian buster (Debian 10)
- リリース時期: 2019年7月
- 特徴: LTS
    - 保守的なエコシステムを好む企業やプロジェクトによく利用される

#### Debian bullseye (Debian 11)
- リリース時期: 2021年8月
- 特徴: 最新のLTS
    - 新しいパッケージや機能が多数含まれる。新しい技術を利用したい場合に適している

#### Debian bookworm (将来的なリリース)
- リリース時期: 現在開発中
- 特徴: 最先端の開発版
    - 最新のテクノロジーやライブラリをテストするために利用される立ち位置

### slimの特徴

通常のDebianイメージよりも軽量化されており、不要なパッケージやファイルが削除されているので、コンテナのサイズが小さくなり、起動速度が向上します。
軽量化に伴い、一部のユーティリティやツールが含まれていない場合があるため、必要に応じて追加のインストールが必要です。


### 選ぶ基準

| 基準                     | 条件                                                                  | 推奨イメージ                                    |
|------------------------|---------------------------------------------------------------------|---------------------------------------------|
| **コンテナのサイズ**       | 小さなサイズが必要                                                    | `alpine`, `slim`                           |
|                        | サイズが問題ではない                                                  | 標準の`Debian`（`buster`, `bullseye`, `bookworm`） |
| **互換性とパッケージ**     | 広範な互換性が必要                                                    | 標準の`Debian`（`buster`, `bullseye`, `bookworm`） |
|                        | 最低限の互換性で十分                                                  | `alpine`, `slim`                           |
| **セキュリティ**           | 高いセキュリティが必要                                                  | `alpine`                                   |
|                        | 標準的なセキュリティで十分                                              | 標準の`Debian`（`buster`, `bullseye`, `bookworm`） |
| **パフォーマンス**         | 起動速度が重要                                                       | `alpine`, `slim`                           |
|                        | 起動速度はそれほど重要でない                                            | 標準の`Debian`（`buster`, `bullseye`, `bookworm`） |
| **最新の技術やパッケージ** | 最先端の技術が必要                                                   | `bullseye`, `bookworm`                     |
|                        | 安定性重視                                                           | `buster`                                   |
Docker Imageのベースイメージとバリアントって?


### ベースイメージ
基礎となるImageでFROMへ記述する

#### 例
```
FROM ubuntu:20.04
```

### バリアント
ベースイメージを拡張・カスタマイズしたもの

```
RUN apt-get update && apt-get install -y \
    nginx \
    curl

COPY my-app /usr/src/my-app

ENTRYPOINT ["nginx", "-g", "daemon off;"]
```

### つまり
上記では、`ubuntu:20.04`ベースイメージを使って、追加のパッケージをインストールしてアプリケーションを特定のディレクトリにコピーし、nginxをエントリーポイントとして設定している

`node:20.14-alpine3.20`の場合は`alpine:3.20`をベースにしてバリアントとして`Node.js`を組み込んだイメージ

https://github.com/nodejs/docker-node/blob/daea62837e99456d7556b585edbc2b32fb57369e/20/alpine3.20/Dockerfile
Pythonでの数値計算を効率化する

#### NumPyとは？

NumPy（Numerical Python）は、Pythonで数値計算を行うためのライブラリです。
多次元配列（ndarray）を扱い、高速な計算を可能にします。
データ解析、機械学習、科学技術計算など、多くの分野で利用されています。

#### NumPyのインストール

以下のコマンドを実行することで、NumPyをインストールできます。

```bash
pip install numpy
```

#### NumPyの基本操作

次に、NumPyの基本的な操作をいくつか紹介します。

##### 1. NumPyのインポート

NumPyを使用するためには、まずライブラリをインポートする必要があります。
一般的には`np`という名前でインポートします。

```python
import numpy as np
```

##### 2. 配列の作成

NumPyでは、リストやタプルを使って配列を作成できます。

```python
# リストから1次元配列を作成
a = np.array([1, 2, 3, 4, 5])
print(a)

# リストから2次元配列を作成
b = np.array([[1, 2, 3], [4, 5, 6]])
print(b)
```

##### 3. 配列の操作

NumPy配列は、様々な方法で操作できます。

```python
# 配列の要素にアクセス
print(a[0])  # 1
print(b[1, 2])  # 6

# 配列の形状を確認
print(a.shape)  # (5,)
print(b.shape)  # (2, 3)

# 配列の要素を変更
a[0] = 10
print(a)  # [10, 2, 3, 4, 5]
```

##### 4. 配列の計算

NumPyでは、配列同士の計算も簡単に行えます。

```python
x = np.array([1, 2, 3])
y = np.array([4, 5, 6])

# 要素ごとの計算
print(x + y)  # [5, 7, 9]
print(x - y)  # [-3, -3, -3]
print(x * y)  # [4, 10, 18]
print(x / y)  # [0.25, 0.4, 0.5]
```

##### 5. 数学関数

NumPyには、多くの数学関数が用意されています。

```python
# 配列の合計
print(np.sum(a))  # 24

# 配列の平均
print(np.mean(a))  # 4.8

# 配列の最大値
print(np.max(a))  # 10

# 配列の最小値
print(np.min(a))  # 2
```

##### 6. ブロードキャスト

NumPyでは、異なる形状の配列間での演算も可能です。
これを「ブロードキャスト」と呼びます。

```python
# スカラー値との演算
print(x + 10)  # [11, 12, 13]

# 異なる形状の配列との演算
z = np.array([[1], [2], [3]])
print(x + z)
# [[2, 3, 4]
#  [3, 4, 5]
#  [4, 5, 6]]
```

##### 7. ランダムな配列の生成

NumPyを使うと、ランダムな値を持つ配列も簡単に生成できます。

```python
# 0から1の間のランダムな値を持つ配列
random_array = np.random.rand(3, 3)
print(random_array)

# 正規分布に従うランダムな値を持つ配列
normal_array = np.random.randn(3, 3)
print(normal_array)
```

以上
新・Bランクレベルアップメニュー（PHP）レベルアップ問題集 【マップの扱い 1】マップの書き換え・1 マス

#### 問題

https://paiza.jp/works/mondai/b_rank_new_level_up_problems

#### 解答

にょっす:raised_hand::cow:
入力を受け取り、変えたい座標の文字列を条件式で変換するだけです

```php
<?php
    // 入力
    list($h, $w) = explode(" " , trim(fgets(STDIN)));
    $s = [];
    for($i = 0; $i < $h; $i++) {
        $s[] = trim(fgets(STDIN));
    }
    list($y, $x) = explode(" ", trim(fgets(STDIN)));
    
    // 条件式
    if($s[$y][$x] === "#") {
        $s[$y][$x] = ".";
    } elseif($s[$y][$x] === '.') {
        $s[$y][$x] = "#"; 
    }
    
    // 出力
    foreach ($s as $line) {
        echo $line."\n";
    }
    
?>
Amazon Lookout for Visionを使ってみる

## はじめに
- Amazon Lookout for Visionで簡単に異常検知ができると聞き、試してみた記録

↓ほとんどこちらの手順通り

https://catalog.us-east-1.prod.workshops.aws/workshops/cbfb2625-416f-45e3-88b2-b68a1d25dab2/ja-JP

## 学習に使用するデータを用意
- 今回はMVTecのscrewデータセットをダウンロードして使用
- ダウンロード方法は割愛

https://www.mvtec.com/company/research/datasets/mvtec-ad

- 学習用に正常：20枚
- テスト用に正常：10枚、異常：10枚
を適当に選ぶ


## s3bucketを用意
- リージョンはLookout for Visionを使うリージョンと合わせる
- 以下のようなフォルダ構造にして、画像を入れる
- 今回は正常データのみで学習を試みたのでtrain/anomalyは空っぽ

任意の名前のbucket
├─train
│ 　 ├─anomaly（空っぽ）
│ 　 └─normal
└─test
　　　├─anomaly
  　　　└─normal



## Lookout for Visionのプロジェクトを作成

- Amazon Lookout for Visionのページに移動し【開始方法】をクリック

![グラフィックス2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/5dbae954-92b3-6374-3ddb-71185b5f13f9.png)

- 初回セットアップ時のみ【S3バケットを作成】をクリック

![グラフィックス3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/d7c6962f-b495-1ddb-2448-115ae0c79e7e.png)

- はじめはダッシュボードの画面が出てくるため、左側メニューでプロジェクトに移動し【プロジェクトを作成】をクリック

![グラフィックス5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/b7bd7e03-ca03-2722-34f2-ccc8e415ff8e.png)

プロジェクト名（今回はanomalydetection-demo）を入れ、【プロジェクトを作成】
![グラフィックス6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/be8a0cda-375b-19f1-4eee-01edb9cfeb1d.png)

## データセットの作成

- 【データセットを作成】をクリック

![グラフィックス7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/292c16ee-201e-fc1c-8670-561c7a6133fc.png)

- 【トレーニングデータセットとテストデータセットを作成する】を選択

![グラフィックス8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/aaef5a8c-4ced-8340-6603-70032943a7ae.png)


- 下にスクロールし、【S3バケットからイメージをインポートする】にチェック
- S3 URLの欄に予め作成したS3バケットのURLを入れる（trainのフォルダを指定）
- 自動ラベル付けの【フォルダ名に基づいてイメージに自動的にラベルをアタッチ】にチェックを入れる
![グラフィックス13_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/6ad9be1a-da3c-647e-0862-f01de581cd38.png)

- テストデータセットで同様に設定する（testのフォルダを指定）

![グラフィックス12_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/3e28cc85-d5e3-ecc0-d95b-93fa01c0c652.png)

‐ 最後に【データセットを作成】をクリック

## 学習を開始 
- データセットの作成が正しくできていれば【モデルをトレーニング】がクリックできるようになる
- データセットはtrain10枚以上、testのnormalとanomalyそれぞれ10枚以上必要

![グラフィックス16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/12031c31-a1fe-dd97-5700-5584e855af7e.png)

- 別画面が出るので再度【モデルをトレーニング】をクリック
![グラフィックス17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/9c1da685-c961-9bfa-86ad-0c060ed0e1f9.png)

- 学習が終わるのを待つ

## 学習済みモデルの確認
- 学習が終わると精度とリコールとF1スコア計算してくれる
![グラフィックス20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/632db2b0-1c6e-2aaf-58fa-c50b6297bc14.png)

- 正常のデータは正常に対する信頼性、異常のデータは異常に対する信頼性が表示される様子
![グラフィックス21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233734/8c5f59ff-73e9-1f2f-9cee-cd8c05263b3c.png)


以上
Beginner picoMini 2022 writeup HashingJobApp

## HashingJobApp (General Skills)

If you want to hash with the best, beat this test! nc saturn.picoctf.net 57702

問題文のとおりにプロンプトにコピペする。と、表示された文字列のMD5ハッシュ値を答えろとの指示があるため、MD5ハッシュ値を求めて入力する。３回繰り返すとフラグが得られた。
```
> nc saturn.picoctf.net 59114
Please md5 hash the text between quotes, excluding the quotes: 'log cabins'
Answer: 
0cf9a466703d6f50227a4f85dfc63b58
0cf9a466703d6f50227a4f85dfc63b58
Correct.
Please md5 hash the text between quotes, excluding the quotes: 'local police'
Answer: 
b36e4003adb9138e0c7f0379b9be4d5b
b36e4003adb9138e0c7f0379b9be4d5b
Correct.
Please md5 hash the text between quotes, excluding the quotes: 'Adolf Hitler'
Answer: 
540dea05a35b0fc9a050f36db954a484
540dea05a35b0fc9a050f36db954a484
Correct.
picoCTF{4ppl1c4710n_r3c31v3d_bf2ceb02}
```
`picoCTF{4ppl1c4710n_r3c31v3d_bf2ceb02}`
レスポンスタイム：IBM i 内部の処理内訳（待機アカウンティング）

## IBM i のレスポンスタイムの内訳

他のコンピューターでも基本はほぼ同じと思いますが、IBM i の特徴（いいところ）は、下記のようなサーバー内部のレスポンスタイムの内訳がパフォーマンスデータを取ると明確に識別できるところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/0cf5051d-39d9-d022-4fb0-69dd68044bd1.png)

活動状態は実質コンピューターが処理をしている時間なので、サーバーのスペックや処理負荷である程度予測や推測が容易なもの（と言っても精緻にするのは難しいわけですが）といえます。

***対して待機状態は分析してみないと分からない、本来は想定していない、というような属性を持っていることが多いと思います。待機状態の割合が増えると「あれ～、もっと速いはずなのになんでこんなに遅いの～？？」となってしまう事が多いですね。***

## IBM i の待機アカウンティング一覧

***IBM i の特徴（特許だそうです♪）にこの待機状態をカテゴリで分類して個々の処理時間として統計情報化できる機能があります。待機アカウンティング と呼びます。***

***こちらに[待機アカウンティング一覧](https://www.ibm.com/docs/ja/i/7.5?topic=problem-basics-i-wait-accounting)が記載されています。***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/d0ee86e1-9eb7-d422-1305-4fe46104b96b.png)

このページの中に待機アカウンティングの明細32が記載されています。
実際の処理の中ではここ記載されている待機状態を詳しく分析することで、パフォーマンスが（予想より）遅い状態を分析し、改善案を検討できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/10441700-8fa9-a09d-ee35-bfdbf7b4cb01.png)

現場で、パフォーマンスが期待値に達しない場合、インフラなのか、アプリコード単体なのか、アプリコードを複数実行した際のボトルネックなのか、、それ以外のトラブルなのか、、が識別できないことは（IBM i ということでなく一般的に）相当発生しているように思います。IBM i 待機アカウンティングはその理由を客観的に認識する方法として有効だと思います。
意外とここまでできるプラットフォームは少ないのではないでしょうか。

## 待機の分析サンプル

Q. 
待機アカウンティング は IBM Navigator for i や ACS を使えばグラフィカルに表示して確認することができるのでしょうか？

A.
収集サービス *MGTCOLオブジェクトをパフォーマンスデータに展開して（CRTPFRDTAコマンド）、Navigator for i で表示するだけです。
サンプルを記載します。
この例ですとあまり種類が多くないですが、ディスパッチされたCPU時間（赤）、CPUキューイング（紫）、ディスク・ページ不在（オレンジ）があることが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011394/c36bc48b-234c-583c-34b9-4a44123e8b0d.png)
記事投稿時にフェスタ・アドカレのテーマに登録し忘れた？それ、後から編集で追加しても大丈夫だよ！

前記事で、１日何度投稿しても投稿数だけバッジがもらえることを検証しました。

https://qiita.com/nomurasan/items/331ad07e5ccabd326864

本投稿は「キャンペーン期間中に投稿したが、公開設定時にうっかりキャンペーンに登録し忘れた記事は対象になるのか？」というものです。
正直、操作ミスでバッジ落としちゃうケースは結構あるあるだと思ってます。どうしてもバッジにこだわりたい場合は投稿ミスした記事は削除して、もう一回書き直したらええやん、とは思うんですけどね。

また、本記事は需要はありそうだけど、38記事書くぜ！というモチベーションを持っている人がどれだけいるか分からなかったので、後で編集時に誰得キャンペーンにつけておくことにします。
（新規画面では登録操作後、公開する前に「登録を取り消す」ボタンが押せるので、同じことができるのでは？という予想）

## 編集追記・キャンペーン登録せず公開しても記事カウントされない
予想通りです。というか、そりゃそうでしょと思ってます。
そもそも本題はこっちではない。これからです。

## 編集追記・ウッカリミスしても大丈夫！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/1b5ca9f4-e669-63f7-0638-9dad64c45ef5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/ccc8bc6d-6048-5f78-53d4-19e4c185156f.png)

もらえました！
すげーなここまで対応してくれるんだ、びっくりしました。
これで安心して記事を投稿していくことができそうです。

もう新規記事を作って追加する検証作業はないはず。

## QiitaCLIを使う
QiitaCLIを使うと、タグを登録できてもキャンペーンは登録できません。
おそらく、アドベントカレンダーでも同様の問題は発生しそうだとは思っています。過去のアドベントカレンダー執筆中にQiitaCLIを使ったことはなかったので未検証ですが、今回の方法で解決できないか検証してみるのはアリだなと思いました。
そうでなくても、QiitaCLIから記事を削除する事はできないので、同じように意図しない挙動になりそうなものは機能として組み込まれていないだろうと推測します。
機能追加するとしても、イベントごとに固有のIDを割り振ったりするのも、それをユーザー側に管理させるのも微妙な気がするので、ある意味これでいいのかも知れません。
Beginner picoMini 2022 writeup Glitch Cat

## Glitch Cat (General Skills)

Our flag printing service has started glitching! $ nc saturn.picoctf.net 49649

問題文どおりにプロンプトにコピペする。
```
'picoCTF{gl17ch_m3_n07_' + chr(0x39) + chr(0x63) + chr(0x34) + chr(0x32) + chr(0x61) + chr(0x34) + chr(0x35) + chr(0x64) + '}'
```
と出力されるので、cyberchefのfrom HEXで16進数を文字列に直す。

`picoCTF{gl17ch_m3_n07_9c42a45d}`
Azure Data Factory のメタデータ駆動のコピータスクにて作成されるパイプラインの名称を短くする方法

## 概要

Azure Data Factory のメタデータ駆動のコピータスクを作成すると、`MetadataDrivenCopyTask###_TopLevel`などの長い名称のパイプラインが作成されるが、そのパイプライン名を短くする方法を共有します。`設定`タブにて`タスクのプレフィック名`の値を変更することで、プレフィックス部分（`MetadataDrivenCopyTask`）を短くすることができます。

## 手順

### 1. Azure Data Factory のメタデータ駆動のコピータスクを作成する手順を`設定`まで実施

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/b15a1706-3f47-2576-7923-2f9b5f4f9f34.png)

### 2. `設定`タブにて`タスクのプレフィック名`の値（デフォルト`MetadataDrivenCopyTask`）を任意の値（）に変更（例：`MDCT`）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/b88a3428-15ad-86b5-e3bb-245693e8e5e3.png)

### 3. `設定`タブ以降の設定を進め、作成されたパイプラインの名称のプレフィックスが設定した値となっていることを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/bc0009ae-e7be-1476-d835-f7849936c1c7.png)
接続アプリを設定してみる



+ [Salesforce Reports and Dashboards REST API Curlコマンド偏](https://qiita.com/Keiji_otsubo/items/d6ceda32fdd8fe132b60)

上記でCurlコマンドを使ってOAuth 2.0 による認証を試していますが、今回はうまくいかないですね。


:::note alert
curl: (6) Could not resolve host: login.salesforce.com
:::

pingを叩いても

:::note alert
ping: login.salesforce.com: 名前またはサービスが不明です
:::

そういえば今試してるPCは新しいOSにしたんだったな。

+ [自動実行によるcsvファイルのエクスポートについて](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000FWeF1SAL)
+ [curl (6) はホスト ubuntu を解決できませんでした – なぜこのエラーが発生するのでしょうか?](https://bobcares.com/blog/curl-6-could-not-resolve-host-ubuntu/)

名前解決できてなさそうです。

:::note
これは主に/etc/resolv.confにネームサーバーがない場合に発生します。
そこで、ファイルに次の行を追加しました。
nameserver 8.8.8.8
:::

以下のように中途半端なパラメータで叩いてみます

```
/usr/bin/curl -s -S --compressed -tlsv1.2 https://login.salesforce.com/services/oauth2/token -d 'grant_type=password' -d 'client_id=xxxxxxxxxxxxxxxxxxx' -d 'client_secret=xxxxxxxxxxxxxxxxxxxxxxx'
```

おお、認識したみたいですね。ユーザ名とパスワードがないからな。

:::note alert
{"error":"invalid_grant","error_description":"authentication failure"}
:::

ちゃんとトークンが返ってきました

:::note
<?xml version="1.0" encoding="UTF-8"?><OAuth><access_token>xxxxxxxxxxxxxx</access_token><instance_url>https://fukadadenki--quote.sandbox.my.salesforce.com</instance_url><id>https://test.salesforce.com/id/00DO000000xxxxxxxx/005xxxxxxxx</id><token_type>Bearer</token_type><issued_at>1717993993397</issued_at><signature>zHD+mAgYGiXHL7ABTVZO/z9bvapqNGojX3+Dxu0c1oM=</signature></OAuth>admin@debian:~/REST/SHELL$
:::


トークンとインスタンスのURLをXMLから参照する自作のphpのプログラムを使って、上記のXMLのファイルから最終的なURLを生成します。

```
$tools/sfdc-tag2.php   |
cat > $tmp-loginInfo
access_token=$(nameread access_token $tmp-loginInfo)
instance_url=$(nameread instance_url $tmp-loginInfo)
my_access_token=`echo $access_token | sed -e 's/!/\\\!/g'`
my_instance_url=`echo $instance_url | sed -e 's,/, ,g' | self 1 2 | sed -e 's, ,//,g'`

curl_com="$my_instance_url/services/data/v55.0/sobjects/EventLogFile/describe -H \"Authorization: Bearer $access_token\" "

```

接続アプリの設定はただしくできているようです。

コールバック URLを以下のように設定しました。（今回はSandboxを使っています）
 
```
https://test.salesforce.com/services/oauth2/token
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/596a7045-9bfd-77b6-cd8c-d269e42f1bb4.png)


# jsonの整形


これを使うとjsonが整形されます

```
| python -m json.tool
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/5bffda35-5afa-2072-e967-684425a3df55.png)

# テストするきっかけになった質問

+ [GoogleフォームとGoogle Apps Script を利用したレコード入力について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007epPTXSA2)
+ [ファイル自動アップロードの仕組み開発について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007clsHvSAI)
AZ-900受験日記

## はじめに
AzureのAZ-900を受験しましたので、日記ついでに情報共有させて頂きます。
AZ-900についてはこちらの記事でも紹介している、Azureの入門資格です。

https://qiita.com/JinichiroYoshida/items/d582ee659de586dfb61a

## 出題範囲

https://learn.microsoft.com/ja-jp/credentials/certifications/azure-fundamentals/?practice-assessment-type=certification

上記に細かく書かれていますが、入門資格なので難易度は簡単です。
Cloudの基礎知識とAzureに関する広く浅い知識があれば問題ないです。

たまにサービスの細かい内容が出題される場合もありますが、その割合自体は少ないので、各サービスの大まかなユースケースが把握できていれば大丈夫です。

## 学習方法と時間について

### 学習方法
私はAzureが全く分からない状態でスタートしたので、まずはAmazonで参考書を買いました。

https://amzn.asia/d/a3XdCwK

この本を２日ぐらいでザラっと読んだあと、　後は２日ぐらいひたすら模擬テストを繰り返しました。
模擬テストはMicrosoftLean公式の他、Udemyの問題集も利用しました。

https://learn.microsoft.com/ja-jp/credentials/certifications/azure-fundamentals/?practice-assessment-type=certification

https://www.udemy.com/share/1042X83@qg-KzznBhObvav7RJzI0vCOFPLE_cJ4Me5uoABtjHPEgKuFdP0ZTntjP8ZBboAOWHw==/

## 受験時の注意事項
オンライン試験がおすすめですが、何かと注意事項がありますので以下の記事にまとめています。

https://qiita.com/JinichiroYoshida/items/d582ee659de586dfb61a

## 最後に
AZ-900は有効期限もなく更新不要なので、仕事でAzure使っていない人も勉強ついでに取得しやすい資格です。
Youtubeなどでも講義動画がたくさんあるので、入門用の資格として是非ご検討下さい！
Angular で画像を表示してみました。

記事を投稿する前にいろんな方の記事も参考にさせて頂いて勉強させてもらっています。ただ、画像を表示するという場面でも、いろんな方の記事を参照させてもらいましたが、なかなかうまくできませんでした。

原因は画像ファイルの格納先についてよくわかっていなかったことでした。
デフォルトプロジェクトの angular.json の設定に合わせて画像を表示できるようにしました。

こういうところ、独学では厳しいです。
とはいうものの、前向きにいきましょう。

#### １．画像ファイルの格納先を確認します。
##### １－１．画像ファイルの格納先の設定を確認します。
・以下のファイルを参照します。
`C:\Users\user\Angular\monotoneboy\angular.json`

（アウトプット）
![1-1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/c32ed17f-06c0-1692-f2ed-098b22b67242.png)

##### １－２．favicon.ico を設定します。
・以下のディレクトリに favicon.ico を設定します。
`C:\Users\user\Angular\monotoneboy\public`

:::note info
元々、Angular の favicon.ico が設定されています。
私の作成した favicon.ico に置き換えています。 
:::
（アウトプット）
![1-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/42a0a208-4a20-1436-2ef8-425fa312e65c.png)

#### ２．画像を表示します。
##### ２－１．画像を設定します。
・以下のディレクトリに画像を設定します。
`C:\Users\user\Angular\monotoneboy\public`
`MONOTONEBOY.png`

（アウトプット）
![2-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/dc34338c-e498-e13d-09b7-77e406f820f1.png)

#### ３．プログラムを更新します。
##### ３－１．component.ts に \<img> タグで画像を設定します。
・template: に以下を設定します。
`<img src="MONOTONEBOY.png">`

``` diff
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
template: `
+  <img src="MONOTONEBOY.png">
`
})
export class HeaderComponent {

}
```
（アウトプット）
![3-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798951/d4763480-90bf-56d1-10c2-1125832aaa4a.png)

html や css をもっと勉強して自由に使えたら、もっと楽しくなりそうです。
無事に思ったとおりになりました。
PHP dateをMysqlやPostgreSQLのdateタイプデータから曜日を取得する。

サイトにスケジュール等を日付別に表示する際、日付の横に（日）の様に曜日名を表示する際の記述例です。
```
$youbi = array("日", "月", "火", "水", "木", "金", "土");
echo "(".$youbi[date('w', strtotime($row['<database fieldname>']))].")";
```
参考になればと思います。
思ってた発音と違った技術英語

私が個人的に勘違いしていた発音、あるいは実際に誰かが発音しているのを聞いたことがあるものの、辞書を引いてみたら間違っていたものをリストアップました。
記事の内容はアメリカ発音に準拠しています。また、辞書は [Oxford Learner](https://www.oxfordlearnersdictionaries.com/) を、実際の話者の発音例は [YouGlish](https://youglish.com/) を参考にしています。

## 単純な勘違いのパターン

|単語|正|誤りの例|備考|
|-|-|-|-|
|administrator|/ədˈmɪnɪstˌreɪtɚ/|/ˈædmɪnɪstˌreɪtɚ/|第1ストレスは "ad" ではなく "min" に置かれる。| 
|asynchronous|/eɪˈsɪŋkrənəs/|/əˈsɪŋkrənəs/|第1音節がストレスのない /eɪ/ で発音される。略形の "async" も [/eɪˈsɪŋk/](https://youglish.com/pronounce/%22async%20%252F%20await%22/english/us) と発音される。|
|capacity|/kə'pæsəti/|/kæ'pæsəti/|カタカナの「キャパシティ」につられて第1音節を /kæ/ のつもりで発音して、/k/ が硬口蓋化しがち。「キャリア」 V.S. "Career" (/kəˈrɪɚ/) も同様。|
|daemon|/ˈdimən/|/ˈdeɪmən/|カタカナの「デーモン」に引きづられがち。|
|debug|名詞: /ˈdibʌɡ/<br />動詞: /ˌdiˈbʌɡ/| /dɪˈbʌɡ/ |カタカナの「デバッグ」に引きづられがち。また、名詞の場合ストレスが第1音節に置かれる。|
|demo|/ˈdɛmoʊ/|/ˈdɪmoʊ/,<br />/ˈdimoʊ/|カタカナの「デ」が /dɪ/,/di/ に対応することが多いため、「ディモ」のように過剰修正しがち。潔く「デモ」と言った方が辞書に近い。|
|execute|/ˈɛksɪkjut/|/ˈɛgzɪkjut/,<br />/ɪksɪˈkjut/|接頭辞 "ex-" の部分が無声音で発音され、かつ第1ストレスが置かれる。ちなみに `.exe` ファイルは日本語で俗に「エグゼ」と呼ばれているが、YouGlish を見る限り [/ˈi ˈɛks ˈi/](https://youglish.com/pronounce/%22exe%20file%22/english/us) と発音されている。|
|library|/ˈlaɪbrɛri/|/ˈlaɪbræri/| カタカナの「ライブラリ」に引きづられがち。「ディクショナリ」V.S."dictionary" (/ˈdɪkʃəˌnɛri/), 「テンポラリ」V.S. "temporary" (/ˈtɛmpəˌrɛri/) も同様。|
|machine|/məˈʃin/|/məˈsin/|カタカナの「シ」が /sɪ/,/si/ に対応することが多いため、「マスィン」のように過剰修正しがち。潔く「マシン」と言った方が辞書に近い。|
|reconcile|/ˈrɛkənˌsaɪl/|/ˈrikənˌsaɪl/|反復を表す "re-" は /ˈri/ と発音されることが多いが、この例には当てはまらない。|

## 許容されているパターン
よくパターン2で言いがちなものの、間違いとも言い難い、あるいは許容されているもの。

|単語|パターン1|パターン2|備考|
|-|-|-|-|
|router|/ˈraʊtɚ/|/ˈrutɚ/|辞書的には両方とも許容されているが、[YouGlish](https://youglish.com/pronounce/router/english/us) で探す限りパターン2で言っている話者が見つからない……。|
|status|/ˈstætəs/|/ˈsteɪtəs/| [YouGlish](https://youglish.com/pronounce/status/english/us) を確認する限りパターン1が主流に見えるが、パターン2の話者も見かける。 |
|template|/ˈtɛmplət/|/ˈtɛmpleɪt/|[YouGlish](https://youglish.com/pronounce/template/english/us) を確認する限りパターン1が主流に見えるが、パターン2の話者も見かける。|
|variable|/ˈvɛriəbl/|/ˈværiəbl/| アメリカ英語ではパターン2でも発音できる。 "various" も同様。|
QiitaEngineerFestaとアドベントカレンダーの記事投稿によるバッジのもらい方の違いを徹底検証！

さて、先ほど記事を投稿してみたのですが、記事を投稿するとどうなるかの検証記事がこちらです。
公式の説明だけでは正直分からん！とりあえずやってみるか！というテンションで書いてるので、ご迷惑をおかけする意図は一切ありません。

前回記事

https://qiita.com/nomurasan/items/d714f3ade53f3c62c1ea

## バッジもらいました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/9321030e-972d-4152-32a1-0da3650621ca.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/531d704a-ab98-69f6-f83b-6d70db3b2ea4.png)

通知名は「１記事投稿」とあるけど、バッジ画面だと１記事という指定はなかった。これはなんだろう🤔

## 投稿マラソンのページが更新されてる！
https://qiita.com/official-campaigns/engineer-festa/2024#posting-marathon

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/151eb72b-22a1-c20b-8b1e-b41d5dded57f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/98a35b21-b4ed-f969-0c53-8c98b64a346b.png)

バッジ画面じゃなくて、フェスタページの方に反映されるらしい。

### 投稿マラソンは「記事」でつくらしい
前回記事にて、

> アドベントカレンダーは１日１投稿だけど、このマラソンは38記事書けばいいだけ？
> どこかで２記事だす日を作ってみよう

と、思い立ったので早速やってみました。

1日で2記事書いていいなら、極端な話38記事書くだけを目標にすれば良くなるが、予約投稿の話がどっかに書いてあった気がするので、そんな虫のいい話はないだろうと思う。
（私のイメージ的にも、１日１記事だろうと思うし、なんならこの検証記事が２記事目にカウントされることを公開前時点では想定していない）

とりあえず、この段階で投稿してみる。なんかあったら追記します。

## １日２記事投稿してもバッジもらえました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/e199e12e-a725-2a3a-0974-3bf1a7d67313.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/1196ff7c-b1f2-57ee-fe08-be0e17d06e16.png)

毎日投稿するんか🤔
という疑問は解消できました。正直、アドベントカレンダーは毎日投稿なので結構しんどいので、**こっちの方がやりやすいぞ**、というのが率直な完走です。
完走というか、38記事書けば良いので、アウトプットのモチベーションが高い時にバンバン書いていくだけでいい。しかも、細かいことはあまり気にしなくていい。

【細かいこと】
アドベントカレンダーは毎日記事を書くモチベーションが必要なので、アウトプットのモチベーションが高い時に明日、明後日の記事も用意するというアプローチをする事になのですが、これが結構しんどい。
私は「とりあえず50%ぐらいでいったん出稿して、後から修正しまくって徐々に100%に寄せていく」という書き方をしているので、アドベントカレンダーだと非公開状態でプレビューしてレイアウトとかリンクとか気にしながらいじる事になります。
どこかで間違えて操作した結果、実は公開してないかどうかは気を遣っていたりします。
些細なことなんですが、編集ページを開いている時は結構慎重になるので、むしろ開き直って「一度予約投稿にしたら公開日まで触らない」という運用もします。

👆より、アドベントカレンダーよりエンジニアフェスタの方が書きやすいと感じた理由を言語化しました。
しがらみを考えず、ぜひ色々な投稿テーマに挑戦していってもらうのが良いと思いました。
CSSでボタンの枠を点滅させて強調表示する方法

CSSを使ってボタンの枠を点滅させて強調表示する方法を紹介します。
### 実行環境
HTML5
CCS3
Google Chrome: 126.0.6478.62（Official Build） （64 ビット）

## 準備
CSSで作成した以下のボタンを使います。
サイズ、色、枠線は任意のものに変更してください。
```html
<div class="button">ボタン</div>
```
```css
.button {
    width: 100px;
    height: 50px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background: palegreen;
}
```
![スクリーンショット 2024-06-10 090047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810489/4956a1ea-d225-004b-3908-ffb77c7c6f9f.png)

## 実装
HTMLとCSSに、ボタンを強調表示させるクラス`highlight`を追記します。
```html
<div class="button highlight">ボタン</div>
```
```css
.button {
  width: 100px;
  height: 50px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: palegreen;
}

.highlight {
  position: relative;
}

.highlight::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  display: block;
  border: 5px solid salmon;
  animation: blink 2s ease infinite;
}

@keyframes blink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
```
クラス`highlight`は疑似要素を使って、ボタンの周囲に点滅する枠線を追加しています。
`border: 5px solid salmon;`で枠線の設定をしています。任意の値に変更してください。
`animation: blink 2s ease infinite;`では、`@keyframes blink`で設定した表示(`opacity: 1`)と透明化(`opacity: 0`)の遷移を２秒かけて行っています。0%、50%、100%で設定することで、じんわりとした点滅に設定できます。
上記のコードを追記することで、以下のような点滅をした強調表示が実装できます。

![スクリーンショット 2024-06-10 090047.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810489/4956a1ea-d225-004b-3908-ffb77c7c6f9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810489/83ca9fd4-c3b4-dbd8-2ec2-7c1fc97ede23.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810489/b3dce03a-6677-d5f3-9081-08122be1bec0.png)
コンピュータの五大装置について

　　
そういえばどういうことだっただろうか、どんな機能だっただろうかと思うことがあるので整理してまとめます。

## そもそもコンピュータって？
電気信号を処理して、様々な用途において計算・利用できる機械のこと。
コンピュータの構成は「**五大装置**」といわれるそれぞれ機能があるハードウェアが備わっているものを指します。

* 入力装置 
* <font color="Red">制御装置</font> 
* <font color="blue">演算装置</font> 
* <font color="green">記憶装置</font> 
* 出力装置

---

#### ・入力装置
情報をコンピュータに入力する装置。
人間でいう目,耳,鼻,など知覚することにつながる部位。
※キーボード,マウス,音声マイク,カメラ,ICカードリーダ

#### <font color="Red">・制御装置</font> 
コンピュータの司令塔。
プログラムの命令を読み取り、全体の動作を制御する
記憶装置に格納されているデータや命令を読み出す。


#### <font color="blue">・演算装置</font> 
データを受け取り演算(四則演算)を行う。
制御装置からの信号を受けて行う。


 この二つ(<font color="Red">制御装置 </font>,<font color="blue"> 演算装置</font>)を一体として
<font color="purple">**CPU(中央処理装置)**</font>と呼び、人間でいう脳(考える)にあたる。
※代表的なメーカーは　Intel:Core , AMD:Ryzen　


#### <font color="green">・記憶装置</font> 
CPUが処理するためのデータを扱う装置。
主記憶装置と補助記憶装置がある。人間でいう脳(覚える)にあたる。
※メモリ , HDD ,　SSD

#### ・出力装置
処理された情報を出力する装置。
人間でいう言葉,手や足、身振りなど表現すること。
※モニター,スピーカー,3Dプリンタ

  ---
  ## 動作の流れ
プログラムに従い複雑な処理を行い、主に
 **入力 → 処理 → 出力**  という流れで動作します。
五大装置がどのような流れで動作しているのかをまとめます。

①**入力装置** から入力されたデータを、記憶装置に保存。
　　　　　　　　　　　　↓
②<font color="Red">制御装置</font> が、<font color="green">記憶装置</font> に保存されたデータや命令を読み込み。
　　　　　　　　　　　　↓
③<font color="Red">制御装置</font> は、命令に基づき装置を制御。
　　　　　　　　　　　　↓
④<font color="blue">演算装置</font> は、<font color="green">記憶装置</font> からデータ,命令を読み込んで演算処理し、結果を記憶装置へ返す。
　　　　　　　　　　　　↓
⑤**出力装置** は、<font color="green">記憶装置</font>から読み出したデータを表示。

![スクリーンショット 2024-06-07 095541.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806876/8a96a136-9c79-cf19-17bf-c055b232ac73.png)

---
### まとめ
五大装置がそれぞれ**個々**でどのような機能・役割をしているのか、**全体**で
どのように流れで動作しあっているのかをまとめてみました。

こちらの業界に入ってから、新たに出てくる **単語** , **横文字**, **英語**　どれも似ているけれども内容が異なり、物理的な実体がないものが沢山...
まだ五大装置はハードウェアとして物体が目に見えるので、捉えやすいほうなのかもしれません...
イメージや何かに**例えたり**することが結構業界では重要な捉え方.考え方なのかなと感じます。
皆さんはどのように覚えたり, 捉えていますか？
Qiita Engineer Festaとは？

結構知名度低かったみたいなので、紹介ということで投稿を促進しようというねらいがあります。
私も教えられて初めて知ったので、啓蒙していこうというモチベーションです。

## 対象者
- [Organizationメンバー](https://qiita.com/organizations/linuc/profile)
- アドベントカレンダーは知ってるよ！という方

## Qiita Engineer Festaとは？
https://qiita.com/official-campaigns/engineer-festa/2024

誤解を恐れずにいうとアドベントカレンダーの夏版。

https://help.qiita.com/ja/articles/qiita-adcal-1

### 参加方法

1. 記事を書く（ https://qiita.com/drafts/new ）
1. 公開設定を開いて下にスクロール。以下の画像がでるはず
1. どれか一つに登録して投稿する

アドベントカレンダーの時とほぼ一緒！

#### 2.投稿先選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/a207efe7-7760-2816-6fe2-ad10291a59b9.png)

#### 3. 投稿先を登録した状態（登録先は任意）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/80b64b3f-7fde-8e59-a0f7-95871dd8def2.png)

## 過去の様子
https://qiita.com/official-campaigns/engineer-festa/2021

https://qiita.com/official-campaigns/engineer-festa/2022

https://qiita.com/official-campaigns/engineer-festa/2023

もっと早くに知りたかったです。
が、過去を悔やんでも仕方ないので、今知れてよかったと前向きに受け止めます。

目標は38記事！
アドベントカレンダーの時は25記事だったのでさらに過酷！

## 以下、検証（多分増えます）
### 投稿マラソンとは？
https://qiita.com/official-campaigns/engineer-festa/2024#posting-marathon

これはどういう条件でつくんだろう？
アドベントカレンダーは１日１投稿だけど、このマラソンは38記事書けばいいだけ？
どこかで２記事だす日を作ってみよう

👇検証しました。結論からいうと「日付によらず書いた記事分だけもらえる。上限は38まで、キャンペーン終了まで」と思われます。

https://qiita.com/nomurasan/items/331ad07e5ccabd326864
Beginner picoMini 2022 writeup fixme2.py

## fixme2.py (General Skills)

Fix the syntax error in the Python script to print the flag.

添付ファイル
・fixme2.py

とりあえず実行してエラー確認。
```
if flag = "":
       ^^^^^^^^^
SyntaxError: invalid syntax. Maybe you meant '==' or ':=' instead of '='?
```
記述形式が違うらしいので`=`を`==`にしてもう一度実行すると、フラグが得られた。

`picoCTF{3qu4l1ty_n0t_4551gnm3nt_4863e11b}`
Node.js の環境構築をする際によく出てくるマネージャーたち

会社は Windows プライベートでは Mac な環境。
Node.js 周りの環境構築でパッケージマネージャーやらバージョンマネージャーやら混乱してきたので整理。

# Mac

## ターミナル
デフォルトのターミナルか好みで iTerm2 とか

## パッケージマネージャー

### Homebrew
[https://brew.sh/ja/](https://brew.sh/ja/)
macOS または Linux 用パッケージマネージャー

Mac の場合はとりあえずこれでいいんじゃないかな

## Node.js バージョンマネージャー
Node.js の バージョンを管理するツール
いくつかピックアップ

### nodebrew
[https://github.com/hokaccha/nodebrew](https://github.com/hokaccha/nodebrew)
プロジェクト単位で Node.js のバージョンを指定できる

### nodenv
[https://github.com/nodenv/nodenv](https://github.com/nodenv/nodenv)
ディレクトリ単位で Node.js のバージョンを指定できる

### nvm (Node Version Manager)
[https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)

### fnm (Fast Node Manager)
[https://github.com/Schniz/fnm](https://github.com/Schniz/fnm)

||スター数|最新バージョンとリリース日|
|---|---|---|
|nodebrew|35.5k|1.2.0 <br> （2022-03-19）|
|nodenv|2.7k|1.5.0 <br> （2024-05-28）|
|nvm|10.2k|0.39.7 <br> （2023-12-06）|
|fnm|16.1k|1.37.0 <br> （2024-05-30）|

更新止まってるけど nodebrew で今のところ不便を感じていない

## Node.js
[https://nodejs.jp/](https://nodejs.jp/)

## Node.js パッケージマネージャー
Node.js の パッケージを管理するツール
パッケージのインストールやアンインストール、アップデートなどをする

### npm
[https://www.npmjs.com/](https://www.npmjs.com/)
Microsoft 傘下の GitHub が買収、開発
Node.js をインストールすると一緒にインストールされる

### yarn
[https://yarnpkg.com/](https://yarnpkg.com/)
Meta（旧 Facebook）が開発
npm と互換性があり、npm より速度が速いらしい

# Windows

## ターミナル
コマンドプロンプトは ls コマンドを使えないのが面倒なので Windows PowerShell を使う

## パッケージマネージャー

### Chocolatey
[https://chocolatey.org/](https://chocolatey.org/)
[https://github.com/chocolatey/choco](https://github.com/chocolatey/choco)

### Scoop
[https://scoop.sh/](https://scoop.sh/)
[https://github.com/ScoopInstaller/Scoop](https://github.com/ScoopInstaller/Scoop)

### winget-cli
[https://github.com/microsoft/winget-cli/](https://github.com/microsoft/winget-cli/)

||スター数|最新バージョンとリリース日|
|---|---|---|
|Chocolatey|10.0k|2.3.0 <br> （2024-05-14）|
|Scoop|20.2k|0.4.2 <br> （2024-06-05）|
|winget|22.4k|1.7.11261 <br> （2024-05-08）|

特にこだわりが無ければ、後発の Microsoft 製パッケージマネージャーである winget-cli を選べば良さそう

## Node.js バージョンマネージャー
Node.js の バージョンを管理するツール
いくつかピックアップ

### nvm for Windows
[https://github.com/coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows)

### nvs (Node Version Switcher)
[https://github.com/jasongin/nvs](https://github.com/jasongin/nvs)

### Volta
[https://github.com/volta-cli/volta](https://github.com/volta-cli/volta)

### fnm (Fast Node Manager)
[https://github.com/Schniz/fnm](https://github.com/Schniz/fnm)

||スター数|最新バージョンとリリース日|
|---|---|---|
|nvm|35.5k|1.1.12 <br> （2023-11-23）|
|nvs|2.7k|1.7.1 <br> （2023-08-17）|
|Volta|10.2k|1.1.1 <br> （2023-01-25）|
|fnm|16.1k|1.37.0 <br> （2024-05-30）|

nvm またはクロスプラットフォームを考慮する場合は fnm が選択肢となるか

## Node.js
Mac と同じ

## Node.js パッケージマネージャー
Mac と同じ
Beginner picoMini 2022 writeup fixme1.py

## fixme1.py (General Skills)

Fix the syntax error in this Python script to print the flag.

添付ファイル
・fixme1.py

とりあえず実行してエラー確認。
```
    print('That is correct! Here\'s your flag: ' + flag)
IndentationError: unexpected indent
```
インデントエラーであることが分かった。printの前に謎のインデントがあるので、そこを削除してもう一度実行すると、フラグが得られた。

`picoCTF{1nd3nt1ty_cr1515_09ee727a}`
代数的データ型を理解するための参考

https://speakerdeck.com/yuitosato/functional-and-type-safe-ddd-for-oop

https://justinpombrio.net/2021/03/11/algebra-and-data-types.html

https://speakerdeck.com/yuitosato/algebraic-data-type-in-java-and-kotlin-happy-use-of-pattern-match

https://qiita.com/inamiy/items/9af1da1faec22cd968f0

https://blog.nnn.dev/entry/2023/08/31/110000
10進数、2進数と浮動小数点型

# 10進数の指数表記
限られたビット数でも非常に小さい値を表現できるのが浮動小数点型。
「IPv6 では、2^128 通りのアドレスが存在する」が、実際の数値は非常に大きく、数値の大きさがわかりにくいという問題がある。
そこで、以下のように指数表記を用いて表現することがある。
`3.4 × 10^38 通り`
このような表現を指数表記と呼ぶ。また、3.4E+38 や 3.4e+38 のように E や e が使われることにより、これを E 表記と呼ぶ。
非常に小さい数を示すのにも使える。
水素原子の重さ 0.000 000 000 000 000 000 000 000 167 キログラムを表すとき、
1.67 × 10^-27 キログラムと表示する。1.6E-27、1.6+e38のように表示もできる。

# 指数表示で使う用語
## 浮動小数点型
小数点を指数表記によって動かすことができる数値のこと。
3.40282 × 10^38 = 34028.2 × 10^34 = 0.340282 × 10^39 
また、小数を使うと、コンピュータに負荷がかかりやすく、高いメモリ要件が必要になってしまう

## 仮数、指数、基数
3.4 × 10^38 の場合、3.4 が仮数、10 が基数、38 が指数

## 正規化
仮数を１桁で表現すること

# 2進数に指数表示を適応
32ビットや64ビットと限られた枠内でも、固定小数点に比べて大きい値を表現することができる。

## float型
float型は32ビットで表される単精度浮動小数点型。約７桁分の値を保持可能。
範囲は
- -3.4 × 10^38 から -1.2 × 10^-38
- 0
- 1.2 × 10^-38 から 3.4 × 10^38

## double型
double型は64ビットで表される倍精度浮動小数点型。
約１５桁の値を保持可能。
表現できる値のおおよその範囲は
- -1.8 × 10^308 から -2.2 × 10^-308
- 0
- 2.2 × 10^-308 から 1.8 × 10^308
RustのCargoでプロジェクト作成

### cargoで何ができるのか

プロジェクトの作成ができます

### cargoでのプロジェクト作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533750/c44d2b96-087b-e5a9-93f8-49a27f5c7e48.png)

作成結果はこちらです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3533750/1e4bfe68-2ccd-69fb-4f5a-2a91759fad8c.png)

Cargo.tomlはプロジェクトの設定ファイルです。
文字列型

str型。char型とstr型は別物である。
プログラミングで文字を表現するには、ビットと文字を対応させる方法があるが、これだけでは一文字しか表せない。
文字列型（str型）とは特定の文字の並びを表現するためのデータ型。
`hello world`のような文字列は、プログラム乗では一続きの文字列として表される。
文字列とは、単純に文字の集合ではなく、特定の配列やデータ構造として定義される。