OmniAICreator/Qiita-1.07M huggingface dataset:
SvelteKit初心者がForm actionsで悩んでたら、HTMLの基本を思い出した話

## TL;DR :chocolate_bar: 

:warning: \<form\>で`submit`イベントを発火させるときは\<button\>に`type="submit"`が指定されていることを確認しよう:exclamation: 

> あるいは`type`になにも指定しなければ自動で`submit`になります。なにも指定しなければ。

### この記事は何？ :dango:

`GitHub Copilot` :airplane: に頼りすぎた愚かな開発者（筆者）がHTMLの基本を忘れたことを戒めるための記事です。

### 起きたこと :book: 

それは`SvelteKit`の[Form Actions](https://kit.svelte.dev/docs/form-actions)学習中のことでした。
筆者は`GitHub Copilot` :airplane: を使いながら、以下のコードを作成しました。

```svelte +page.svelte //.html
<script lang="ts">
	import type { ActionData } from './$types';
	export let form: ActionData;
</script>

<h1>{form}</h1>

<form method="POST">
	<button type="button">
        Click
    </button>
</form>
```

```typescript +page.server.ts
import { error } from '@sveltejs/kit';
import type { Actions } from './$types';

export const actions: Actions = {
	default: async () => 'Hello World!'
};
```
(`.svelte`もシンタックスハイライト対応しないかな...)

ここで詳しい話は割愛いたしますが、`+page.svelte`で`form`が`submit`された場合、`+page.server.ts`で定義した`Form  Actions`が実行され、画面に"Hello World!"と出力されるのが期待される動作です。

しかし実際には`{form}`は`null`のまま動きません。

### 解決方法 :coffee: 

```html
    <-- 下記コードを -->
	<button type="button">
        Click
    </button>
    
    <-- こうする -->
	<button>
        Click
    </button>
```

### 特に必要のない解説 :bee: 

あまり説明することもないのですが、`<button type="button" />`と、ボタンの`type`に`button`が指定されている場合、`submit`する能力を失ってただのボタンになっています。
そのためイベントが発火せず、`Form`が送信されなかったということです。

> ボタンの`type`が指定されていない場合の初期値は`submit`です。[form 内の button 要素を押すと submit される理由](https://zenn.dev/phi/articles/form-submit-button-type-default)
> `type`が`button`の場合でも、イベントハンドラーを登録することで発火させることが可能

## まとめ :beach_umbrella: 

`GitHub Copilot` :airplane: は非常に頼れる開発ツールですが、盲目的になってはいけないと再確認しました。
少なくとも、出力された結果に対してしっかり理解する姿勢が必要です。

ちなみに原因特定は`ChatGPT` にお願いしました。
便利な世の中になったものです。いや、ほんと。
PHP環境構築_XAMPP

# XAMPPとは
XAMPPは、phpでのWebアプリケーション開発に欠かすことのできないソフトウェアやツールを無料で一括インストールすることができるパッケージ。
Webアプリケーションを作成するには、ApacheやMySQL、Webプログラミング言語（PHP、Rubyなど）が必要。
この3つのソフトウェアはそれぞれ別の団体で作成・アップデートされているため、本来開発する際には個別にそれぞれダウンロードとインストールをする必要がある。
個別で環境構築を行う必要があるが、XAMPPを使うことでMacでもWindowsでも簡単に開発環境を構築することができる。
ただ、サーバの細かい設定ができないことや、サーバの構造が理解しにくいといった欠点もある。
### XAMPPの中身
- X：Windows, Linux, MacOS, Solarisのクロスプラットフォーム（異なるOSでも同じように使うことができる）
- A：Apache
- M：MySQL（MariaDB） ※MariaDBは、MySQLから派生したデータベース管理システム
- P：PHP
- P：Perl（PHPと同じく、サーバー側で動くプログラミング言語）

# XAMPPのダウンロードとインストール
[Mac編](https://www.youtube.com/embed/k5kGmWOdmrE)
[Windows編](https://www.youtube.com/embed/FHFeISydZ7k)


# 利用方法
画像アップロードできなくなったので、できるようになったら画像とともに追記します…
MacでMAMPのMySQLを操作する方法を一通り説明する

# MacでMAMPのMySQLを操作する方法を一通り説明する

MySQLの起動→データベース作成→テーブル作成→テーブル削除→データベース削除→MySQLの停止の順で説明する。

MacでMAMPのMySQLを操作する方法を一通り知りたい場合は、下記のコードを上から順に実行していくと良い。

## １、MAMPアプリケーションを開き、STARTボタンを押して、起動する。

## ２、Macのターミナルを開き、mysqlのパスに移動して、MySQLを起動する。
方法１か方法２を実行する。

mysqlのユーザ名とパスワードはデフォルトでは、rootである。
MySQLのパスワードを設定していない場合は、""かEnterだと勘違いしていたので手間取った。

### 方法１
```zsh
% cd /Applications/MAMP/Library/bin/
% ./mysql -u root -p
// Enter password: ←MySQLのパスワードを設定していない場合はroot
//Welcome to the MySQL monitor
```
これでMySQLが起動できた。

### 方法2
MySQLのホストとポート番号を指定する。
```zsh
% cd /Applications/MAMP/Library/bin/
% ./mysql --host = localhost -uroot -proot -P8889
```

## 2,データベースを見る
```sql
SHOW DATABASES;
```
## 3,データベースを作成
database_nameという名前のデータベースを作成
```sql
CREATE DATABASE database_name;
```
## 4,特定のデータベースを使用する
USE文を使って、現在の作業用データベースを指定できる。
以降のSQL文は、このデータベース上で実行される。
database_nameを作業用データベースとして設定する場合は以下のコードを実行する。
```sql
USE database_name;
```


## 5,データベースにテーブルを作成
４の通りにdatabase_nameという名前のデータベースに移動した状態で、table_nameテーブルを作る。

テーブルはデータベースに所属していてデータベース内で一意である。テーブルの操作を行うには、どのデータベースに所属しているテーブルなのかを明確にする必要がある。

```sql
CREATE TABLE table_name (
       id INT,
       name VARCHAR(50),
      );
```
table_nameという名前のテーブルに、idとnameという2つのカラムを定義した。idは整数型(INT)、nameは文字列型(VARCHAR)にした。

## 6,テーブルのカラムを確認
```sql
DESC table_name;
```

## 7,テーブルにデータを挿入する
```sql
INSERT INTO table_name (id, name) VALUES (1, 'yume');
```
## 8,テーブルのデータを見る
```sql
SELECT * FROM table_name;
```
*を使用することで、すべてのカラムのデータが取得される。
特定のカラムだけを指定することも可能。

## 9,テーブルを削除
```sql
　DROP TABLE table_name;
```
## 10,データベースを削除
```sql
DROP DATABASE database_name;
```

## 11,MySQLサーバーを停止
```
exit;
```

## 番外編、MySQLのステータス確認方法
ステータス情報には、MySQLサーバーのバージョン、現在のデータベース名、現在のユーザ、接続されているクライアントのIPアドレスなどの情報が含まれている。
```
status;
```
webサイトとwebアプリの違い

## はじめに
基本的なことでもいざ聞かれた時にスラスラ答えられるように書き留めたいと思います。
自分なりの解釈なので間違っていたらコメントで指摘してください。

## webサイトとは
+ 静的サイト。
+ webページの集合。ホームページや、コンタクトページ、お問い合わせページなどに行き来で、これらは同じIPアドレスを持つ。
+ 何度訪問しても内容は変わらず同じコンテンツを返す。
+ webサイトを作ることを「web制作」という
+ 主に使用される言語は、「HTML」「CSS」「javascript」
+ wikipediaやブログがwebサイトにあたる。

## webアプリとは
+ 動的サイト。
+ ログイン、予約、入力、送信など、ユーザーがページの情報を操作可能で、コンテンツを変化させることができる。
+ ログインするとページに自分の名前が表示されたり、買い物かごに入れた商品がページに表示されていたり、ページが変化することから動的と呼ばれる。
+ webアプリを作ることを「web開発」という。
+ 使用される言語は「Java」「PHP」「Ruby」「Python」など
+ 食べログやホットペッパー、Qiitaもwebアプリにあたる。

## まとめ
webサイトとwebアプリの違いは、ざっくりいうと操作の複雑性。
webアプリはwebサイトを内包していて、ページの内容を書き換えたりできるがwebサイトはできない。

## 参考サイト
[未経験からエンジニア転職を目指す初学者が知っておくべきこと〜【周りと差をつける知識10選＋α】〜](https://note.com/sew_sou/n/na3d2afe926d3)
[【WebサイトとWebアプリって何が違うの？】販促ツールとしての使い方をご紹介！](https://3inc.jp/3incwp/blog/web-app-site/)
HeartToHeart4のファイルと保存を理解する



![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) 何がどこにどう保存されてんのさ

## この記事について
近藤科学のHeartToHeart4（以下HTH4）というホビーロボット用のアプリケーションについて、ファイルの場所、保存方法、挙動などのわかりにくい部分を自分用にまとめてみました。


## 理解のポイントその１ ： ボードの起動時の挙動

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/73a8eed8-7f33-203f-e223-12df3264f99a.png" width=800>
HTH4はRCB-4HVというボードと共に使います。
RCB-4HVが起動時にどういう挙動になるかを知っておくことが理解への近道です。

ボードは起動時にまず①ROMの内容をRAMに展開します。そして②CPUはRAMの内容にのみアクセスします。
ボードのCPUがROMの内容に直接アクセスすることはないようです。つまりPCからROMの内容を書き換えただけではロボットの挙動には反映されません。

ROMに書き込んだ場合にボードの再起動を促されるのはこのためで、再起動時をすることでROMの内容がRAMに展開され、データがロボットの動きに反映されるようになります。

## 理解のポイントその２ ： ボード読み書きボタンの挙動

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/61f621b0-92e4-3d90-780a-f0fb951dbeb7.png" width=800>

設定データのボードへの読み書きは、RAMへの書き込み、RAMからの読み込み、ROMへの書き込みの３通があります。

**RAMへの書き込みボタン（>RAM）** を押せば、データが即座にロボットの動きに反映されます。ただしRAMに書き込んだだけなので保存はされていません。

**[ROMにすべて保存]ボタン** を押せばデータをROMに焼くことができます。しかし、データをロボットの動きに反映させるためには前述のようにボードの再起動が必要です。

**RAMからの読み込みボタン（<RAM）** を押せば、ロボット側が持つ設定データをPCに読み込むことができます。この機能を使えばRCB-4HVからデータを吸い出してPCに保存することが可能です。

## 理解のポイントその３ ： PCに保存されるファイルの種類

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a52f4a84-de50-bf2e-7eab-0aa2ce9f0c7e.png" width=800>

プロジェクトで作成されるファイルには、
・プロジェクトファイルである「○○○.h4p」
・トリムデータを格納する「△△△.h4t」
・モーションデータ等を格納する「□□□.xml」
などがあります。
格納場所は（おそらくドキュメントフォルダ内の）[HeartToHeart4]>[project]のフォルダの中になります。
ボードのROM,RAMが絡んでくることもあって、自分が作成したデータの保存場所の見通しが悪い感じがしますが、少し冷静になればなんとか把握できると思います。

## 理解のポイントその４ ： セーブボタンとファイルの対応

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/d5bfd225-893d-a913-4782-2c87e3e279bb.png" width=800>

HTH4は至る所にセーブボタンがあり混乱しますが、先ほどのファイルとボタンの関係はこのようになります。
ファイルの実体とセーブボタンの対応をイメージすることで、すっきりと理解できるのではないでしょうか。

## 理解のポイントその５ ： ホームポジションの保存場所

このソフトで出てくる 「ホームポジション」がいったいどこに保存されるのかということですが、PCには保存されません。（ボードには保存されるようです）

ホームポジションを設定するには、Sync状態でモーションの１コマを選んで**ホームポジションに設定するボタン(赤い丸)** を押します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/1280cfbd-594a-a5c8-892c-c3ae69773b87.png" width=400>

しかるのち、**[ROMにすべて保存]ボタン** を押します。ダイアログボックスで起動時の姿勢を問われるので、「ホームポジション」を選択すると、ボードのROMにホームポジションが保存されるようになります。
PC上であらかじめ決めておいたポーズのホームポジションをモーションとして登録しておくのがおすすめです。


## おわりに
他にもモーションのリストやリモコンボタンの対応データなど、どこに何が格納されているのかよくわかならない部分もありますが、そちらについては時間があったら調べて更新したいと思います。
また、記事の間違いなどがありましたらぜひご指摘いただければ幸いです。

公式のユーザーマニュアルは以下にあります。

https://kondo-robot.com/faq/earttoheart4manual_v8
PDOを使ってMySQLのテーブルをPHPファイルのWebページに表示してみた

# PDOを使ってMySQLのテーブルをPHPファイルのWebページに表示してみた。

## まずphpファイルを作成してwebブラウザで表示できることを確認する。
1. MAMPを起動。
2. htmlファイルの雛形を用意。
3. VSCodeを起動して、MAMPのhtdocsフォルダを開く。
4. 新規ファイルを作成し、htmlファイルの雛形をコピペしてhdoc.phpという名前で保存。
5. chromeの検索バーで"http://localhost:8888/hdoc.php" を検索。表示されることを確認。

という手順で行った。

htmlファイルの雛形
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ページタイトル</title>
</head>
<body>
	<h1>見出し1</h1>
	<p>段落1</p>
	<h2>見出し2</h2>
	<p>段落2</p>
</body>
</html>
```

## 次に、MySQLのテーブルの表示に必要なコードを挿入する
hdoc.phpのbodyの段落1を消して、MySQLのテーブルの表示に必要なコードを挿入。

＜MySQLサーバーへの接続に必要な指定＞
- ホスト名、ユーザー名、パスワードはデフォルトだと"localhost"、"root"、"root"である。
- portは、MySQLのデフォルトのポート番号は8889を設定している。
MAMPでMySQLのポート番号を確認するには、MAMPアプリの画面左上の"Preferences"を選択する。"Ports"タブを選択して、MySQLのポート番号を確認できる。
- dbnameは、接続したいデータベースの名前を選択する。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ページタイトル</title>
</head>
<body>
	<h1>見出し1</h1>
  <?php
    // MySQLサーバーへの接続
    $servername = "localhost"; // ホスト名
    $username = "root"; // ユーザー名
    $password = "root"; // パスワード
    $port = 8889; 
    $dbname = "shirokuma"; // データベース名

    try {
        $conn = new PDO("mysql:host=$servername;port=$port;dbname=$dbname", $username, $password);
        // PDOエラーモードを例外モードに設定
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        echo "Connected successfully"." <br>";
        echo "<br>";
        $stmt = $conn->prepare("SELECT * FROM menu");
        $stmt->execute();
        // set the resulting array to associative
        // 結果を取得
         $result = $stmt->fetchAll();

        // 結果を表示
        echo "price  menu"."<br>";
    foreach($result as $row) {
        echo $row['name']." ".$row['price']."円<br>";
        }
    } catch(PDOException $e) {
        echo "Connection failed: " . $e->getMessage();
    }
    ?>
  
	<h2>見出し2</h2>
	<p>段落2</p>
</body>
</html>
```
chromeの検索バーで"http://localhost:8888/hdoc.php" を検索して、表示されることを確認する。
![スクリーンショット 2023-03-21 23.39.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3268288/4c5f6599-e758-1a20-b2b1-5513d0cffae6.png)
LAMPをEC2にインストールする（失敗し断念）

## 失敗した方法

AWSのチュートリアルに従ってLAMPをEC2にインストールする。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/install-LAMP.html

Amazon Linux AMIのec2にLAMPをインストールしようとしたが、下のコマンドができなかった。

```bash
sudo yum install -y httpd24 php72 mysql57-server php72-mysqlnd

// Last metadata expiration check: 4:37:06 ago on Mon Mar 20 01:48:33 2023.
// No match for argument: httpd24
// No match for argument: php72
// No match for argument: mysql57-server
// No match for argument: php72-mysqlnd
// Error: Unable to find a match: httpd24 php72 mysql57-server php72-mysqlnd

```
原因を調べてみても、うまくいっている例が見つからなかった。
チュートリアルの記事が古いかもしれないので、断念した。

webでよくあるAmazon Linux 2のec2インスタンス上にLAMPを構成することにする。
ElixirDesktopのiOS版サンプルを動かす

## Elixir Desktopとは

Phoenix LiveViewを使って、ネイティブアプリのようなElixirアプリを作成できるパッケージです。

> Building native-like Elixir apps for Windows, MacOS, Linux, iOS and Android using Phoenix LiveView!

https://github.com/elixir-desktop/desktop

## サンプルを動してみる

### サンプルをgit cloneする

https://github.com/elixir-desktop/ios-example-app

### サンプルのREADMEどおりコマンドを実行する

```zsh
brew install carthage git openssl@1.1 npm
```

```zsh
export DED_LDFLAGS_CONFTEST="-bundle"
export KERL_CONFIGURE_OPTIONS="--without-javac --with-ssl=$(brew --prefix openssl@1.1)"
asdf install erlang 25.0.4
asdf install elixir 1.13.4-otp-25
```

```zsh
carthage update --use-xcframeworks
```

### XCodeでプロジェクトを開く

#### PlatformsのwatchOSとtvOSが未インストールだったらインストール

メニューバーのSettings＞Settings＞Platformsからインストールできる

![スクリーンショット 2023-03-21 23.18.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/3e86e726-5ee8-34da-c6ad-b7b797338ff8.png)

#### 設定を変更する

Singing & Capabilities の下記をそれぞれ変更する
* Team
* Bundle Indentifir

![スクリーンショット 2023-03-21 23.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/80e485a1-f04c-a9ca-1a96-c53a3a448140.png)

#### ビルドしてシュミレーターを実行する

![スクリーンショット 2023-03-21 23.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/340e52e1-23e9-abb0-3544-0dfecd506c55.png)

無事に起動できました:clap:

## ビルドできるまでにハマった箇所

サンプルのREADMEに書いてなかった箇所でだいたいハマりました:sweat_smile:

* git cloneした.tool-versionsとローカルのバージョンが合ってなかった
* DED_LDFLAGS_CONFTESTとKERL_CONFIGURE_OPTIONSをexportしてなかった
* watchOS、tvOSのインストールがまだだった
* Singing & Capabilitiesの設定をしてないままビルドした
AWS SAA 合格体験記・勉強方法

# 目次
[1.この記事を書いた経緯](#1-この記事を書いた経緯)
[2.使用した教材と勉強方法](#2-使用した教材と勉強方法)
[3.かかった時間](#3-かかった時間)
[4.かかった金額](#4-かかった金額)
[5.苦労したところと対策](#5-苦労したところと対策)
[6.クラウドプラクショナーは取得するべきか](#6-クラウドプラクショナーは取得するべきか)
[7.座学だけで合格できるか](#7-座学だけで合格できるか)
[8.まとめ](#8-まとめ)
[9.参考サイト](#9-参考サイト)

# 1-この記事を書いた経緯
IT業界の仕事に従事してはいる(非インフラ系)が、AWS実務未経験者がSAA(**AWS Certified Solutions Architect - Associate**)を取得するまでの備忘録として書きました。

以下本文内では、
「AWS Certified Cloud Practitioner」を「CLF」、
「AWS Certified Solutions Architect - Associate」を「SAA」
と呼称します。

:::note warn
注意点
本記事ではSAAの概要については特に説明しません。
概要については[こちら](https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/)を参照して下さい。
:::

CLF(**AWS Certified Cloud Practitioner**)を取得した際の記事も[こちら](https://qiita.com/wiskerpaddy/items/7430412d7f3bf57b4e73)に書いています。

# 2-使用した教材と勉強方法

教材は模擬問題集と復習用のまとめノートだけ使いました。
　**➀** [【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/)
　**➁** 自作のまとめノート


以下手順で勉強しました。
* 模擬問題(➀)をひたすら解く。
* 間違えた問題とその関連知識をWEBで調べて、一元化してまとめる(➁)。
* ➁をまとめた翌日、1週間後、テスト直前に見直す。
※入門講座やハンズオントレーニングでの勉強は行っていません。

# 3-かかった時間
　試験本番までのタイムテーブルは以下です(目安)。
　試験日までに模擬問題を3周することを目標に予定を立てました。
　※表内の➀,➁は [上記教材](#2-使用した教材と勉強方法)と対応しています。

|期日(週目)|勉強したこと※|時間(h)|
|:-----------|:------------|:------------|
|2023/01/09|➀-模擬問題1（1週目）|8|
|2023/01/16|➀-模擬問題2（1週目）、➀-模擬問題1（2週目）|8|
|2023/01/23|➁|1|
|2023/01/30|➁|1|
|2023/02/06|➀-模擬問題3（1週目）、➀-模擬問題2（2週目）|8|
|2023/02/13|➀-模擬問題4（1週目）、➀-模擬問題3（2週目）|8|
|2023/02/20|➀-模擬問題5（1週目）、➀-模擬問題4（2週目）|8|
|2023/02/27|➀-模擬問題6（1週目）|7|
|2023/03/06|➁|1|
|2023/03/13|➀-模擬問題1～4（3週目）、➁|6|
|2023/03/19|試験本番|ー|


合計で約**56**時間、**3ヶ月**かけて勉強しました。途中で急な出張が入ったので模擬問題6回分全てを3周するのはできないと判断して、模擬問題1～4回目までを3周することを目標に予定を変更しました。

CLFを取得した後に勉強を始めましたが、1週目の正答率が**40～50**％で結構ショックでした！そして2週目で60～70％、3周目で80％と徐々に正答率を上げていき、最終的には一発で合格することができました。
![AWS_SAA_合格証明書.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677151/57763428-5db7-d0d6-6e1d-a8786bf100c5.png)


# 4-かかった金額
* [教材](#2-使用した教材と勉強方法)代1600円
* 受験費用15000円
合計で16600円かかりました。

# 5-苦労したところと対策
* 問題文が5行程度と長く、初見だと何を問われているのかわからない
CLFだと問題文が短く何を答えればいいかすぐに理解できましたが、SAAだとそのような問題がほぼなく、問題文を理解するのにも時間がかかりました。
対策として問題の中で**何が問われているのか**(論点)を明確にして、ノートにまとめました。

* AWSのサービスを把握すること
CLFでも同じことで苦労しましたが、SAAではAWSのサービスについてより細かい内容についての理解が求められるので、「これ全部暗記するのか(絶望)」と何度も絶望しながら勉強しました。
対策として模擬問題の**➀正解になっている選択肢のサービス、➁不正解になっている選択肢のサービス、③解説に出てくる類似サービス**を論点と一緒にノートにまとめて、暗記をする内容を明確に絞りました。

# 6-クラウドプラクショナーは取得するべきか
**取得するべきだと思いますが、必須ではないと思います。** クラウドプラクショナー(CLF)取得のメリットは、AWSサービスの概要を把握できることだと思います。したがってAWSサービスの概要理解するための入門・総論講座を受講するのであれば、あえてCLFを取得する必要はないと思います。

# 7-座学だけで合格できるか
**ハンズオンはやらず、座学だけでも合格はできます**。しかしながら、ハンズオンでトレーニングをすることは、AWSサービスの理解につながると思うので、勉強時間の短縮に繋がると思います。

# 8-まとめ
業務で扱ったことがなかったので合格できるかとても不安でしたが、なんとか気合でやり切りました。諸事情で合否結果を会社に報告しなければならず、合否が発表されるまで胃が痛かったです。仕事をしながらだとやはり業務との兼ね合いで、勉強時間の確保が難しくなるので、範囲を絞って勉強することが大事だと思います。私は１日の可処分時間を逆算して、入門講座をやっている時間は確保できないと考え、**模擬問題を完璧にすること**を目標に勉強しました。この記事がSAAを受ける方の参考になれば幸いです。

# 9-参考サイト
* [【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/)
MacにMAMPをインストールする（2023/3/12時点）

# MacにMAMPをインストールする（2023/3/12）
当初はAWS上でホームページを作成しようとしていたが難しかったので、自分のMac上で作ることにした。
XAMPPを使おうとしたが自分のMacにインストールできなかったので、MAMPをダウンロードした。

## MAMPのインストール方法
MAMPのホームページにアクセスする。

https://www.mamp.info/en/　

1. 中央のFree Downloadをクリック。
リンゴマークが表示されている「MAMP & MAMP PRO」をダウンロードする。
２つあるうちの自分のMacのCPUと同じ方をダウンロードする。
自分のMacのCPUが分からない場合は、自分のパソコンの右上のリンゴマーク→このMacについて→概要にMacのチップ(CPU)が記載されている。

2. 次のファイルを開こうとしています。→「OK」をクリックしインストールを行う。
※ダウンロード後にインストールされるため、少し時間が掛かる。
3. 「はじめに」→「続ける」をクリック。
4. 「大切な情報」→「続ける」をクリック。
5. 「使用許諾契約」→「続ける」をクリック。
6. 「ソフトウェア使用許諾契約の同意」→「同意する」をクリック。
7. 「インストールの種類」→「インストール」をクリック。
インストールが開始する。
8. 「インストールが完了しました。」→「閉じる」をクリック。
これでインストールが完了する。

## MAMP（Apache、PHP）の実行
インストールした「MAMP.app」はApplicationsディレクトリに保存されている。

1. 「Finder」を起動しサイドバーの「アプリケーション」をクリック。

2. 「MAMP.app」をクリックし起動させる。

3. 「MAMP.app」はMAMPの起動時に毎回使うので「Dock」に追加しておく。

4. 「MAMP.app」が起動するとMAMP Cloudの広告が表示されるので、下部のチェックボックスのチェックを外してから「閉じる」をクリック。

5. 右上の「Start」をクリックしてApacheを起動する。
「Welcome to MAMP」と表示されたwebブラウザが立ち上がったら起動している。

これでMAMPが使える。

＜補足＞
MAMPのドキュメントルートは、初期設定では「MAMP/htdocs」である。
chatGPTに相談しながら、Cloud9でApacheのインストール確認・起動・停止　

# chatGPTに相談しながら、Cloud9上でApacheを使えるようにしたい
chatGPTに相談しながら、Cloud9でApacheを起動してホームページを作りたい。

## １、chatGPTにcloud9にはApacheがインストールされているかを確認する方法を聞いてみた。
chatGPTが教えてくれたコマンド
```bash
#間違っている
apache2 -v　　
```
このコマンドを実行すると"command not found"と返ってきた。

Cloud9には、Apacheがインストールされてないのではないかと思い、
インストール方法をweb検索した。
そうしたら、デフォルトでapacheがインストールされていることが分かった。

更に、Cloud9でApacheのインストールを確認する方法をweb検索した。
```bash
httpd -v
#Server version: Apache/2.4.55 ()
#Server built:   Feb  9 2023 18:42:11
```
このコマンドを実行して、Apacheがデフォルトでインストールされていることを確認できた。

とりあえずは、アップデートせずにこのまま進めることにした。

## ２、次にchatGPTにApacheの起動方法を聞いた。
「Cloud9には、デフォルトでApacheがインストールされており、起動する必要はありません。」と返ってきた。
更に「インストールしても起動はかかっていないよね？」と聞いてみたら、
「Cloud9では、Apacheが自動的に起動するわけではありません。手動でApacheを起動する必要があります。」
と答えてくれて、下のコマンド教えてくれた。
```bash
#間違っている
sudo service apache2 start
```
実行したら "Unit not found."と返ってきた。

次に、web検索して見つけた方法を試した。
```bash
sudo systemctl start httpd    
```
これで、Apacheを起動できた。

## 2、Apacheが起動しているか確認する方法

```bash
systemctl status httpd
```
起動していれば、Active: running　になっている。
起動していなければ、Active: inactive (dead)になる。

## ３、Apacheを停止する方法
```bash
sudo systemctl stop httpd
```
ちなみに、sudoは管理者権限がないと実行できないコマンドの先頭につける。
Apacheの起動と停止は管理者権限が必要だが、起動しているか状態を確認するだけなら必要ない。

## ４、解決した疑問点をまとめる

### ・web検索して分かったこと。
・Linuxディストリビューションによって、apache2とhttpdを使い分ける必要がある。
・Cloud9ではhttpdである。

#### serviceとsystemctlの違い
##### service
serviceは、/etc/init.dにあるシェルスクリプトのファイルを指定し引数を与えると、シェルを実行してくれる。
例えば、service apache2 startの場合は、/etc/init.d/apache2と言うシェルスクリプトにstartと言う引数を与えることで、apache2を実行してくれる。
##### systemctl
一方、systemctlは/lib/systemdにある各サービスの定義ファイル（.serviceファイル）に基づいて動作する。
systemctlは、Linuxシステムのサービスの管理を行うシステム管理用のツールである。管理されるサービスに対して、起動、停止、再起動、有効化、無効化などの操作を行うことができる。
AWS EC2インスタンスへMacからSSH接続する（接続失敗の解決策も記載）

# AWS EC2インスタンスへmacからSSH接続してみた
MAMPで作成したWebページをEC2上で公開するために、自分のMacのターミナルからEC2を操作したいので取り組んでみた。


#### AWSのコンソールにログインし、EC2ダッシュボードに移動。
ルートユーザーとしてログインした。
#### EC2インスタンスを選択し起動。EC2インスタンスのssh接続のコマンドをコピーする。

1. 選択したEC"インスタンスの2インスタンスIDをクリックし、「インスタンス概要」ページに移動する。
2. 右上にある「接続」をクリックして「インスタンスに接続」ページに移動する。
3. 「例」の下のコマンドをコピーしてターミナルで実行する。

下記のようなコマンドが、「例」の下にあるのでそれをコピー。
```zsh
ssh -i key.pem ec2-user@<EC2インスタンスのパブリックDNS>
```
<コマンドの意味を簡単に説明>
- -iオプションを使用すると、SSH接続の認証に使用する秘密鍵ファイルを指定することができる。

- key.pemは秘密鍵ファイルのパス、ec2-userはログインするユーザー名である。

- EC2インスタンスを起動する際に使用したAMI（Amazon Machine Image）がAmazon Linuxの場合は、デフォルトのログインユーザー名がec2-userになる。

#### macのターミナルを開き、コピーしてきたコマンドを実行する。

4. Are you sure you want to continue connecting (yes/no/[fingerprint])?と聞かれたらyesと入力してEnterキーを押す。

5. パスワードを聞かれた場合は、自分のパソコンのログインアドレスを入力

#### SSH接続が確立されると、EC2インスタンスにログインできる。

#### SSH接続を解除するには、接続中のターミナルウィンドウで、以下のコマンドを入力。
```zsh
exit
```



# 番外編：私がSSH接続で失敗した時の原因まとめ
1. ec2インスタンスが実行中かつ、ステータスチェックの項目２つに合格している必要がある。

2. キーペアを選択していないec2インスタンスにはssh接続できない。

3. ec2インスタンスのパブリックIPv4アドレスが動的割り当てなので、ec2インスタンスを停止したら次に開始した時は違うIPv4アドレスが割り振られている。

4. MacからEC2インスタンスにSSH接続するためには、EC2インスタンスのセキュリティグループでポート22が許可されている必要がある。

5. "Permissions 0644 for 'キーペアの名前' are too open."というエラーメッセージが出る。接続できなかった。このエラーメッセージは、秘密鍵ファイルのアクセス許可を他の人も読み取ることができるようになっているため、SSHが許可されていないことを示している。
以下のコマンドを使用して、秘密鍵ファイルのアクセス許可を修正し、再度試みたらssh接続ができた。
```zsh
chmod 400 秘密鍵ファイルの名前
```
このコマンドで所有者に読み取りおよび書き込みの権限が与えられ、他の人にはアクセスできないようになる。また、ssh接続ができるようになる。


## ＜セキュリティグループで自分のMacからのSSH接続を許可する方法＞
- EC2の「インスタンス」ページから接続したいEC2インスタンスを選択し、その詳細を表示する。
- 「セキュリティグループ」タブを選択。
- インバウンドルールを編集するために「インバウンド」タブをクリックし、下部の「ルールの追加」をクリックする。
- 「タイプ」で「SSH」を選択し、SSHを許可するIPアドレスを指定する。基本的には必要最小限の自分のIPアドレス、「マイIP」を指定する。
- 「ルールの追加」をクリックして、変更を保存する。
SCMにはDXが必要ですか？

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiixta.com/7_inai_)

コロナウイルスの流行により、世界中の物流が混乱し、製造現場や世界経済に大きなダメージを与えました。そのことをきっかけに、SCMの見直しや強化が多くの企業で進められています。そんなSCMのDX化について本記事では解説していきます。


__■用語説明__
・SCM(Supply Chain Management)：直訳すれば「供給連鎖管理」となります。サプライチェーンは、「原材料 -> 製造 -> 卸売 -> 小売 -> 消費者」という一連のプロセスを指し、これらを __管理(マネジメント)__ するため、SCMと呼ばれています。
・[DX(Digital Transformation)](https://qiita.com/7_inai_/items/c365a3dfc8637d35c014)：DXとは、IT技術により、産業構造や人々の生活をより良いものにすることです。

# SCMにDXが必要な理由
"はじめに"で述べたとおり、コロナウイルスにより世界中のサプライチェーンは大きく乱れました。その理由としては、大きく以下の2点が考えられます。
- 需要予測の困難化(金融緩和政策、外出自粛制限)
- 休業による材料不足(緊急事態宣言や、中国のゼロコロナ政策)

コロナウイルスのような不測かつインパクトの大きい事象が発生した際の対策は非常に難しいですが、もしも、サプライチェーンのIT化/DX化が以前から積極的に進められていれば、より被害を抑えることができたでしょう。


# 「SCM × DX」の事例3選
### ①ブロックチェーンで組織横断的な情報管理
SCMは前述したとおり、「供給連鎖管理」を表していますので、ある1点で考えるのではなく、__連続的に考える__ 必要があります。そのため、組織横断的であることが求められるのですが、そのために最適な技術が、[ブロックチェーン](https://qiita.com/7_inai_/items/2ea53163ae5ec3df9cfe)です。
ブロックチェーンを使用することで、異なる組織間でも一意の情報にアクセスできるだけでなく、サプライチェーンへの導入障壁を低くすることができるなど（非中央集権的なシステムであるため）、組織横断的な情報管理に非常に有効です。

### ②需要予測AI
社内で蓄積している過去の売上データ、気象情報、市場動向、経済見通し、といった様々なデータをAIに取り込むことで、今後の需要を予測することができます。まだまだ発展途上の技術ですが、AIは加速度的に進化する技術であるため、急速に精度が高まる可能性があります。

### ③リアルタイムな在庫管理で在庫減少
高度経済成長期の日本は、商品を作れば売れる時代でした。そのため、在庫があっても最悪値引きすれば売ることができたこともあり、「在庫＝資産」と考えられていました。しかし、基本的な家電や生活必需品が人々の手に行き届いている昨今、消費者のニーズを捉えていない商品は売ることができず、「在庫＝負債」という考え方が一般的になってきています。
そのために、__「RFID、在庫管理ソフト、重量センサー、在庫管理カメラ」__ といったDXツールにより、リアルタイムの在庫数を把握することで、品切れにならない程度の最小限の在庫を保つことができます。

# 終わりに
SCMとDXについてまとめましたが、Amazonの物流倉庫の仕組みをTVで見かけたり、原材料補足(特に半導体)による納期遅れが連日のニュースなったりと、SCMの注目度合いは非常に高まってきていると感じています。そんな時代だからこそ、SCMの発展は経済の発展に密接につながるでしょう。


最後までお付き合いくださりありがとうございました。
ChatGPTに聞きます。

**chatGPTに聞きます。**
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/34T5G7iIBbwMdZaS.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2F34T5G7iIBbwMdZaS.jpg?alt=media&token=9f3b2794-f15a-4094-b5a5-1ee3d98b669b)

**正確な答えだけではなく、関連情報も沢山もりこんでくれます。**
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/UBHLm6y7OiuAxGah.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2FUBHLm6y7OiuAxGah.jpg?alt=media&token=22684691-1ad6-45dd-834a-ab445ea5aadb)
長崎点群をクラウド最適化すれば、147GB

## 概要
惑星間ファイルシステム（IPFS）に置かれたファイルのサイズを測る、という話です。

## 背景
[オープンナガサキ](https://opennagasaki.nerc.or.jp/)から公開された三次元点群データを[クラウド最適化ポイントクラウド](https://copc.io)形式に変換して[惑星間ファイルシステム](https://ipfs.tech/)に置くということを[国連オープンGISイニシアティブ](http://unopengis.org/unopengis/main/main.php)の[スマートマップ作業部会](https://github.com/UNopenGIS/7/wiki/Project-Document)の活動である「Smart Maps Bazaar」として行なっています。

ファイルサイズを測るというタスクを通じて、Smart Maps Bazaarによるファイルアクセスの方法を説明してみます。goによるIPFS実装である`kubo`と`ruby`が導入された環境での作業になります。

## 結論から先に
1. クラウド最適化した長崎点群のサイズは約147GBでした。
1. 詳細値は　[size_all.csv](https://github.com/optgeo/free-nagasaki-stats/blob/main/size_all.csv)に、各ファイルのサイズは [size.csv](https://github.com/optgeo/free-nagasaki-stats/blob/main/size.csv)においています。
1. このエントリでご案内する成果の全ては[optgeo/free-nagasaki-stats](https://github.com/optgeo/free-nagasaki-stats)に置いてあります。

## ステップ1: 長崎点群（クラウド最適化版）のCIDリストをとる
長崎点群（クラウド最適化版）のCIDリストは https://raw.githubusercontent.com/optgeo/free-nagasaki/main/convert/dst/list.csv にご用意しています。

これを`curl`で取ってきてパーズしながら`ipfs`コマンドでアクセスしていくというやり方をこれから使っていきます。

## ステップ2: Smart Maps Bazaar にコネクトする
長崎点群のCIDが分かれば、原理的には`ipfs`コマンドでファイルにアクセスできることになりますが、実際には、そのCIDオブジェクトを持っているノードに実際に接続するのに時間がかかってしまいます。

そこで出てくるのが Smart Maps Bazaar です。

Smart Maps Bazaar は、次のことを目指したIPFSノードです。

1. 地理空間情報を共有したいIPFSノードが接続するノードとなる、
1. 惑星間ファイルシステムに格納された地理空間情報をウェブに取り出すためのゲートウェイとして働く

ホスト名としては smb.optgeo.org という名前を持っています。

Smart Maps Bazaarノードに自分のノードを接続するためには、次のようにすることができます。

```sh
curl --silent https://unopengis.github.io/smb/connect.sh | sh
```

## ステップ3: ファイルサイズを調べる
目的とするファイルのCIDが分かり、Smart Maps Bazaarノードに接続することができたので、あとは次のコマンドを使えばファイルサイズが取得できます。
```sh
ipfs files stat --size /ipfs/#{cid}
```

## 自動処理
実際には、次のRakefileとsize.rbを使って自動処理をしました。

```Rakefile
task :default do
  sh <<-EOS
curl --silent https://raw.githubusercontent.com/optgeo/free-nagasaki/main/convert/dst/list.csv |
ruby size.rb
  EOS
end
```

```ruby
require 'filesize'

w = File.open('size.csv', 'w')
w_all = File.open('size_all.csv', 'w')
size_all = 0
while gets
  (fn, cid) = $_.strip.split(',')
  size = `ipfs files stat --size /ipfs/#{cid}`.to_i
  size_all += size
  human = Filesize.from("#{size} B").pretty
  w.print [fn, cid, size, human].join(','), "\n"
  print [fn, cid, size, human].join(','), "\n"
end
w_all.print [size_all, Filesize.from("#{size_all} B").pretty].join(','), "\n"
print [size_all, Filesize.from("#{size_all} B").pretty].join(','), "\n"
w.close
w_all.close
```

## 終わりに
ここまでお読みくださり、ありがとうございます。
クラウド最適化した長崎点群のカタログサイトを[free-nagasaki-collection](https://github.com/optgeo/free-nagasaki-collection)に作っています。

また、長崎点群のうt長崎港まわりについてまとめて見ることができるよう[リンク](https://viewer.copc.io?state=3dcfc9d935beaff0a67cf08956b9cf9b91f1362e7a93389afaea3779a3e4ed80)を作ってみました。下図のような表示が可能です。
![ 2023-03-18 18.30.14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102082/837b7bff-7e4e-0d79-cad2-801ee74c472b.jpeg)
【Stablediffusion】自動で背景を消した透過画像を作れる、Rembgを入れる。

# 概要
Uniyとか動画制作とかでで背景透過画像を欲しいと思った時に、いちいちPhotoshopとか使うのは面倒。
ちなみに自分は無料の以下サイトを使っていたりしていた。

https://www.remove.bg/ja

しかし今回、Stable diffusion内で画像を透過画像にして作れる拡張機能があるので、それを入れてみる。

# 入れ方


rembgのリポジトリはこちら。

https://github.com/AUTOMATIC1111/stable-diffusion-webui-rembg

`Extension/Available/Loadfrom`をクリックして読み込む。

![スクリーンショット 2023-03-21 22.36.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/25397fa3-795f-96c6-0fdb-44b175aa4b3c.png)


インストールしようとしたら、なんか変なのが出た。これは、PythonがSSLエラーを吐いているらしい。
![スクリーンショット 2023-03-21 22.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/98629f13-d128-3ecc-631b-36b15a9de35d.png)
以下の手順を実行し、解決した、自分hがPython3.10.0を使用していたので、それにバージョンを変更してコマンドを実行した。
https://qiita.com/SakaDKyo/items/89e80201843c681f6e87

再度実行すると、以下のように拡張機能が出てくる。
![スクリーンショット 2023-03-21 22.37.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/76c79d6e-3dff-5556-f910-f40511eb93a7.png)

rembgを検索してみたが出てこなかった。他の人の記事ではでてくるらしいのだが、何が違うのか。。
![スクリーンショット 2023-03-21 22.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/e31bfca4-37cd-bf78-0c00-330b2a8bf896.png)

仕方がないので、URLから直接入れてこようと思う。
Extensionsの中のInstallfromURLから、上記リポジトリにあるクローン先`https://github.com/AUTOMATIC1111/stable-diffusion-webui-rembg.git`を入力しInstallを押す。
![スクリーンショット 2023-03-21 22.45.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/f4744777-d897-b716-e7ec-0868937f431c.png)

Installedの中にはあるので、問題なさそう。
![スクリーンショット 2023-03-21 22.49.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/d0d35df8-dd12-5c3d-5b20-5df9738a8bce.png)

一回Stable diffusionを閉じて、もう一度起動させる。

そして、Extraタブの下の方に、`remove background`というのが追加されているのを確認する。
![スクリーンショット 2023-03-21 22.52.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/20ec4740-8d5e-68db-4dde-beab9f842943.png)

u2setを入れてみて、画像をアップロードしてみる。アップロードした後は、Generateを押す。

すると、以下のように出てくる。rpg、ノベルゲームの立ち絵みたいな風に使いやすくなるのではないだろうか。
![スクリーンショット 2023-03-21 23.04.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/4e980410-4541-bc57-735d-b35484c09d8e.png)

# 参考サイト

https://kurokumasoft.com/2023/03/16/web-ui-rembg/
【Python】Atcoder勉強記録③

# atcoder復習
AtCoder Beginner Contest 294の問題を解いたので記録として残します。
勉強の参考にしてください。

# 1. 問題
[A - Filter](https://atcoder.jp/contests/abc294/tasks/abc294_a)（<font color="SpringGreen">Difficulty8</font>）

### 解答
```python
n = int(input())
n_list = list(map(int, input().split()))
ans_list = []
for i in n_list:
    if i % 2 == 0:
        ans_list.append(i)

print(*ans_list)
```
### 解法
listでデータを受け取りfor文で内容を確認して偶数の場合にans_listに追加する。

# 2.問題
[B - ASCII Art](https://atcoder.jp/contests/abc294/tasks/abc294_b)（<font color="SpringGreen">Difficulty25</font>）
### 解答
```python
n, m = map(int, input().split())
ans = ''
ans_list = []
flg_lst = [chr(ord("A")+i) for i in range(26)] # アルファベット格納
for i in range(n):
    m_list = list(map(int, input().split()))
    for i in m_list:
        if i == 0:
            ans += '.'
        else:
            a = flg_lst[i - 1] # 配列に格納されている文字を取り出しセットする。
            ans += a
    ans_list.append(ans)
    ans = ''

for ans_value in ans_list:
    print(ans_value)
```
### 解法
アルファベットを配列に格納する。入力されたデータを配列で受け取りfor文でアルファベットの配列にアクセスして要素を取得する。
その文字を繋げるようにする。配列のデータが0の場合はアルファベットの配列にアクセスしない。
内側のループが終了したら連結した配列を初期化する。
新しい文字を連結出来るように準備する。
最後はfor文で表示を行う。

# 3.問題
[C - Merge Sequences](https://atcoder.jp/contests/abc294/tasks/abc294_c)（<font color="SpringGreen">Difficulty127</font>）

### 解答
```python
n, m = map(int, input().split())
flg_list = []

n_list = list(map(int, input().split()))
m_list = list(map(int, input().split()))
ans_list = sorted(n_list + m_list)
flg_list_1 = {ans_list[i]: i + 1 for i in range(len(ans_list))} # {3: 1, 6: 2, 14: 3, 15: 4, 53: 5, 58: 6, 92: 7}

for j in [n_list, m_list]:
    for k in j:
        print(flg_list_1[k], end= ' ')
    print()
```
### 解法
配列でデータを二個受け取るようにする。下記に記載
n_list,m_list
その配列のデータを結合させてsortで並び替えを行い別の配列データを作成する。今回の場合だとans_listを作成
flg_list_1で辞書を作成する。辞書の構成→キーが今回確認したい要素、値が要素の場所(index)
for文でn_listとm_listを回してflg_list_1の値(index)を半角スペース区切りで表示する。
キーを[k]でアクセスして紐づいている値を表示する。
React+TypeScriptでmovieサイトを作ってみた

<h1>映画サイトの紹介</h1>
今回作成した、映画サイトはシンプルなUIを心がけて作成しました。

映画を見る瞬間として、時間が空いた時にその時間を埋めるのが、
邦画や洋画だったら素敵だなと思い作成いたしました。


![スクリーンショット 2023-02-23 20.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/6e4af778-0002-4dfd-6acf-98e0c7dff067.png)


<h1>苦労した点</h1>
ポスター情報をuseStateで更新した後、map関数で新しい配列として展開するのに苦労しました。

```jsx
 <div className={styles.movieList}>
   {movieList.map((movie) => {
     return <MovieItem item={movie} key={movie.id} />;
   })}
  </div>
```

はじめはmap関数の使い方が全く分からず、ポスター情報を取得するのにとても苦労しましたが、
下記のサイトや書物を購入し、見ていくうちにidの指定方法やkeyの使い方を理解することができました。

・参考にしたサイト
　　https://sossy-blog.com/useful/6285/

・参考にした書物
　　https://iwasiman.hatenablog.com/entry/20220801-react-jakee-book

・map関数に関する学習内容をまとめたサイトを作成
　　https://qiita.com/Yuta-Tsutsumi/items/72b6a0913692db06693f


<h1>工夫した点</h1>

onmouseover属性、onmouseleave属性を使用し、マウスがポスター画像に触れたときに
映画タイトル・説明がポスター内に表示されるシンプルなUIを心がけました。

↓マウスを当てたときに出現する映画タイトルと説明
![スクリーンショット 2023-03-21 17.33.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/bccb7078-2b8a-fe1e-20b1-dc0abf5a4034.png)

↓onmouseover属性、onmouseleave属性、useStateえお使用し、true、falseの切り替えを行っている。
```jsx
const MovieItem: React.FC<Props> = ({ item }) => {
  const [onMouse, setOnMouse] = useState(false);
  const onMouseOverEvent = () => {
    setOnMouse(true);
  };
  const onMouseLeaveEvent = () => {
    setOnMouse(false);
  };
  return (
    <div className={styles.root}>
      <div className={styles.posterBox}>
        <img
          className={styles.posterImage}
          src={`https://image.tmdb.org/t/p/original/${item.poster_path}`}
          alt="movie poster"
          onMouseOver={onMouseOverEvent}
          onMouseLeave={onMouseLeaveEvent}
        />
        {onMouse && (
          <div className={styles.movieInfo}>
            <div className={styles.movieTitle}>{item.title}</div>
            <div className={styles.overview}>{item.overview}</div>
          </div>
        )}
      </div>
    </div>
  );
};

```
・参考にしたサイト
　　https://www.sejuku.net/blog/77696


<h1>まとめ・今後の課題</h1>
今回、Web APIを使用した映画サイトを作成しました。

全体的にさっぱりとしたシンプルなサイトに出来上がっています。
map関数でポスターデータを更新・反映できず苦労しましたが、
調べるにつれて少しずつ解決していき、UIに処理が反映されたときは
本当にホッとしました。
今後の課題としてPaginationの実装ががあります。
20個のデータをそれぞれのページに反映させたいのですが、
うまく、ボタンの押したときの処理とUIが連動しなかったため、
今後、調べて分かり次第反映する予定です。
Mac OSでLaravel開発環境を構築する【メモ】

Mac OSでLaravel開発環境を作る時に、サクッと作るための手順を
メモという簡単なかたちですが、残しておきます。
今後のために役立てれば幸いです。

# 1. Laravelのインストール

```
curl -s "https://laravel.build/example-dir?php=83" | bash
```
※ "example-dir"の部分は、プロジェクト名など、任意のディレクトリ名を入れます。

# 2. Sailコマンドのエイリアス設定
./vendor/bin/sail up -d など、起動コマンドのパスを毎回入力するのは面倒なので、エイリアスを設定します。

## 2-1. シェルの設定ファイルを開く
```
vim ~/.zshrc 
```

## 2-2. エイリアスを入力し、保存する 
```
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
```

## 2-3. エイリアス変更を反映する
```
source ~/.zshrc
```

# 3. タイムゾーン設定
## 3-1. Dockerfileの設定ファイルを生成

```
sail up -d
sail artisan sail:publish
```
## 3-2. docker-compose.ymlを開き、PHPバージョンを確認する
```
version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.3  ←←←【確認】
            dockerfile: Dockerfile
```
※ここでは、PHPのバージョンは8.3。

## 3-3. Dockerfileを開き、タイムゾーンを変更
docker-compose.ymlで指定しているPHPのバージョンのフォルダにあるDockerfileを開き、タイムゾーンを変更します。
（例 /docker/8.3/Dockerfile）

```
ENV TZ='Asia/Tokyo'
```

## 3-4. Dockerを再ビルド

```
sail build --no-cache
```

# 4. MYSQLの文字コードを変更

Dockerfileと同じ階層に「my.cnf」を新規作成し、以下の内容を記述します。
（例 /docker/8.3/my.cnf）
```
[mysqld]
character-set-server = utf8mb4
collation-server = utf8mb4_bin

[client]
default-character-set = utf8mb4
```

docker-compose.ymlの mysql内 volumesの項目に、
'./docker/8.3/my.cnf:/etc/my.cnf' を追記します。
```
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: '%'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './docker/8.3/my.cnf:/etc/my.cnf'  ←←←【追記】
```



# 5. アプリケーションコンテナを起動する

Dockerのアプリケーションコンテナを起動します。

```
sail up -d
```

以上、ざっくりとですが、Mac OSでLaravel開発環境を構築する手順でした。
Python｜同じファイルをコピーして大量のファイルを整理してくれるプログラム

## 同じファイルをコピーして大量のファイルを整理してくれるプログラム

# はじめに
ファイル整理に役立つようなソースコードを作ろうと思いました。
まずは、一番使えそうな　どうフォルダー内の同じファイル消してくれるPythonのサンプルプログラムです

~~~ Python：removeSameFile.py

import os
import hashlib

def get_file_hash(file_path):
    """
    ファイルのハッシュ値を計算する関数
    :param file_path: ファイルパス
    :return: ファイルのハッシュ値
    """
    try:
        with open(file_path, "rb") as f:
            file_hash = hashlib.md5()
            while chunk := f.read(8192):
                file_hash.update(chunk)
            return file_hash.hexdigest()
    except FileNotFoundError:
        return None

def delete_duplicate_files(folder_path):
    """
    重複したファイルを削除する関数
    :param folder_path: フォルダパス
    """
    delete_count = 0
    total_count = 0
    hashes = {}
    for dirpath, dirnames, filenames in os.walk(folder_path):
        for filename in filenames:
            file_path = os.path.join(dirpath, filename)
            file_hash = get_file_hash(file_path)
            if file_hash is None:
                continue
            if file_hash in hashes:
                os.remove(file_path)
                delete_count += 1
            else:
                hashes[file_hash] = file_path
            total_count += 1
    print(f"削除したファイル数: {delete_count}/{total_count}")

if __name__ == "__main__":
    folder_path = "./"
    delete_duplicate_files(folder_path)


~~~

実行してみよう
~~~ Python：コマンドプロンプト.
# python3 removeSameFile.py
# 削除したファイル数: 914/916
~~~


下の部分は、今いるフォルダー内のファイル対象になります
~~~ Python：removeSameFile.py
    folder_path = "./"
~~~

folder_path に　消したいフォルダーの位置を指定してください。

ファイルが消されてしまいますので、念の為に新しいフォルダーを作りその中の不必要になったファイルをコピーを何回かして試してみてください。

# おわりに
割とゴミみたいなファイルがいっぱいあるんだなと思いますね。
chatGPTに聞きます

**W3School**
https://www.w3schools.com/java/default.asp#

**下記の練習問題があります。**
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/Y31ohEmGQ5x0Mcvc.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2FY31ohEmGQ5x0Mcvc.jpg?alt=media&token=01cf7af7-971e-4816-94e3-d229ad3b23a0)

**この問題をchatGPTに聞いてみましょう。**
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/pllMKjqyfdPV04Wh.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2FpllMKjqyfdPV04Wh.jpg?alt=media&token=f760b49e-45f0-48bb-aeed-9c0215a15594)

**答えは下記になります。**
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/RKi3jiUftSMntR8K.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2FRKi3jiUftSMntR8K.jpg?alt=media&token=d28b1434-6ed8-403c-88ac-8a51e36972b1)
![6mMfkmBJhzTeFUzqrRoA8J4KaAY2/ukhG264bEnldtH5k.jpg](https://firebasestorage.googleapis.com:443/v0/b/type-c1c71.appspot.com/o/6mMfkmBJhzTeFUzqrRoA8J4KaAY2%2FukhG264bEnldtH5k.jpg?alt=media&token=66aab3be-415f-4aff-a0b9-62c6740c9cfa)
**いかがでしょうか。**

**答えだけではなく、丁寧に説明してくれています。**
AWSのEC2インスタンスのキーペアとは


# AWSのEC2インスタンスのキーペアとは

#### EC2インスタンスにキーペアを設定する主な目的
EC2インスタンスに不正アクセスされるリスクを減らすためである。
EC2インスタンスにパブリックIPアドレスを割り当てた場合は、インターネットから直接アクセス可能なため不正アクセスのリスクがある。
キーペアを使用することで、外部からアクセスされることのない秘密鍵を保持し、それを使用してEC2インスタンスにログインすることができる。
#### 具体的には
EC2起動の過程で、キーペアを新規作成した時に秘密鍵ファイルが自分のパソコン（Macの場合はDownloadsフォルダ）にダウンロードされる。
次にパブリックIPアドレスを持つEC2インスタンスにログインする際に、自分のパソコンに保存した秘密鍵ファイルを使用してSSH接続を行う。EC2インスタンスには公開鍵が格納されており、秘密鍵ファイルを使ってSSH接続を行うことで、公開鍵と秘密鍵のペアが一致するかどうかを認証し、正当なユーザーであることを確認する。

#### キーペア使用上の注意点

キーペアは簡単に作成することができ、使い捨てにすることもできる。
また、秘密鍵ファイルが自分のMacに保存されている限り、キーペアは新規のEC2を作成する時に使い回せる。
ただし、秘密鍵を紛失した場合、EC2インスタンスにログインすることができなくなる。
私は秘密鍵ファイルを自分のMac上だけで保存しているので、自分のMacが壊れてデータが失われたら２度とログインできないようだ。

### Macからec2インスタンスに接続しようとしたらエラーが出たときの話
"Permissions 0644 for 'key.pem' are too open."というエラーメッセージが出て接続できなかった。
chatGPTに聞いてみたら、このエラーメッセージは、秘密鍵ファイル key.pem のアクセス許可が他の人が読み取ることができるようになっているため、SSHが許可されていないことを示しているそうだ。

以下のコマンドを使用して、key.pemファイルのアクセス許可を修正し、再度試みたらssh接続ができた。
```
chmod 400 key.pem
```
このコマンドで所有者に読み取りおよび書き込みの権限が与えられ、他の人にはアクセスできないようになる。
Reactとは？簡単にまとめてみた

Mastering Reactという英語の教材の「Reactの特徴」の章を読んだので勉強のメモ。
Mastering React(https://www.amazon.co.jp/Mastering-React-Computer-Science/dp/1032313552/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1ZDY080SHN4M7&keywords=Mastering+React&qid=1679405362&s=english-books&sprefix=mastering+react%2Cenglish-books%2C184&sr=1-2)

## Reactの強み

- JSと比べるとコーディングをあまりしなくていい
- JSと比べてより機能的である。
- 仮想DOMのおかげで高速なWebアプリケーションを作ることができる。
- 単方向データフローにより、開発やデバッグが簡単である。
- HTMLとJSの主要な考え方が分かり、あとは少しばかりフレームワークに対して理解を深めることができれば書けるので簡単。
- モバイルもいける。
- Chromeの拡張機能を使って簡単にデバッグなどができる。

## Flux

- Facebookが提唱している、クライアントサイドのWebアプリ開発のための設計思想。
- Store、Action、Dispatcherという3つの要素から成り立つ。
- Fluxの構造に従うことで単方向データフローが実現される。

## 単方向データフロー

- 親コンポーネントから子コンポーネントにデータが流れ込み、逆流することはない。（単方向データフローの対義語は、双方向バインディング）

## クロスプラットフォーム

- OSやデバイスなどの違いを超えてデータの受け渡しが可能である設計のこと。

## Babel（バベル）

- 簡単にいうと、新しい書き方で記述したJSを、古いJS変換してくれるツール。
- 次の世代のJSの機能をブラウザのサポートを待たずに使えるようにしてくれる。

## SEO

- Search Engine Optimizationの略。
- 日本語に訳すと検索エンジン最適化。
- 自社サイトを検索エンジンで上位に表示させるための施策みたいなニュアンス。
- JSの他のフレームワークにはSEO対策の観点で問題があるものが多いが、Reactはそんなこともない。Reactでサーバーサイドレンダリングを実装すれば解消する。
AWS Certificate Managery(ACM)ってなに？

# AWS Certificate Manageryとは？
**AWS Certificate Manager** (ACM)は、AWSが提供するマネージドSSL/TLS証明書を発行、管理するサービス

## 料金体系
基本的には無料で使えますが、 **AWS Private Certificate Authority**を使用したい場合には＄50~＄400くらいの金額が月間でかかります。
※異なる場合がありますので、使う際は必ず[料金表](https://aws.amazon.com/jp/certificate-manager/pricing/)を確認してください。

**AWS Certificate Managery**　←通常使用はこちらで十分
　AWSが提供する公共のルートCA (認証局) を使用して一般的な証明書を発行するサービス
　AWSが提供するサービス (Elastic Load Balancer, CloudFront, API Gateway)などで使用する

**AWS Private Certificate Authority**
　カスタムルートCA (認証局) を作成し、独自の証明書を発行することができるサービス
　オンプレミスサーバーや仮想サーバーに対しても使用することができる


## AWS Certificate Managerと一般的な証明書の違い
一般的な証明書には、pemやkeyファイルをサーバー(NginxやApache、EC2など)に紐づけることで、自身の存在を証明し、セキュアな通信が可能となります。
しかし、AWS Certificate Manageryを使用する場合は、AWS側で証明書を発行して　AWSが提供するサービス (Elastic Load Balancer, CloudFront, API Gatewayなど)と紐づけることで簡単にセキュアな通信を行うことができます。

![amplem (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236873/57ae0882-4ac2-3979-858f-0bb8c3eaa0a1.png)

## AWS Certificate Managerのメリット・デメリット
#### ■メリット
　・無料で使用できる
　・物理的な鍵ファイルの管理が必要なくなり、証明書の更新などの手間を自動化できる
　・AWS(Route53)以外でドメインを購入しても証明書が発行できる
　・ドメインや証明書の管理など、UIがわかりやすいので、使いやすい

#### ■デメリット
　・サーバーと証明書を直接紐づけることができない (ACM for Nitro Enclavesを使用すれば可能)
　・使用にはAWSのユーザー(クレジットカード)が必要になる


## AWS Certificate Managerの具体的な手順
やり方は色々な記事があふれているので、よさげな記事のリンクを置いておきます。

https://dev.classmethod.jp/articles/alb-route53-acm-build2/

https://nishinatoshiharu.com/ssl-alb-with-acm/


#### ちなみに
上でもお伝えした通り、AWS Certificate Manageryではpemやkeyファイルといった**実態**を伴うものが存在しません。
そのため、そのままではNginxやApache、EC2といったサーバーで直接使用することはできず、AWSが提供するサービス (Elastic Load Balancer, CloudFront, API Gatewayなど)と紐づけることで使用することになります。

しかし、少し変則的にはなりますが、**ACM for Nitro Enclaves**を使用すれば、サーバー(NginxやApache、EC2など)に直接紐づけること可能になります。
こちらも記事は色々あるので、良さげな記事を張っておきます。

https://dev.classmethod.jp/articles/acm-for-nitro-enclaves-apache-support/

https://blog.serverworks.co.jp/2020/10/30/083000

## 使ってみて思うこと
無料で証明書を発行することができ、更新などの管理もいらなくなるので、**AWSが提供するサービス(Elastic Load Balancer, CloudFront, API Gatewayなど)でホスティングを行うのであれば**、使用しない理由が存在しないくらい便利です。

ただ、ELBなどを使用しない場合には、サーバーに直接紐づけることが難しいため、使用するかどうかは検討が必要になります。
(まぁ、Nitro Enclavesを使えば問題ないのですが。。。)

## 参考資料
https://docs.aws.amazon.com/ja_jp/acm/latest/userguide/acm-overview.html

https://aws.amazon.com/jp/certificate-manager/

https://aws.amazon.com/jp/about-aws/whats-new/2020/10/announcing-aws-certificate-manager-for-nitro-enclaves/
Git のコミット順を並び替えたい

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.425 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β34
* Sun Dec 18 2022 23:14:21 GMT-0800 (PST)
* Source doc: 2022-12-14 Git のコミット順を並び替えたい
----->

## やりたいこと

粒度を小さくしてプルリクエストを行うために、コミット順を並び替えたい。


## 方法

`git rebase -i HEAD~17` という形で割といい感じにできる。

設定している任意のエディタが開くので、順番を入れ替えてエディタを閉じればよい。


### コンフリクト

並び替えにおいてコンフリクトが発生した場合、安易に解決するとその後何度もコンフリクトが発生して面倒だったりする。

コンフリクトの解消は安易に行わないこと。まだよくわかっていないため。


## そもそも

粒度を小さくしてプルリクエストを行うという意味であれば、単にもっとプルリクエストを行う頻度を上げ、小さな単位でプルリクエストを行えばよかったのではないかと思う。

「誤字修正」単位の、一つのプルリクエストを送ってもよいはず。

「ある程度まとまった単位でプルリクエストを送ろう」という意識がそもそもの問題の発生源であるような気がしていて、ここを改めようと思う。
CBQ とは

cbq (Class Based Queueing)
--------------------------

man cbq(8) より

> Class Based Queueing is a classful qdisc that implements a rich linksharing hierarchy of classes.

qdisc
-----

Queuing Disciplines。

Linux Traffic Control (TC) が利用する filter や action のルールを保管したもの。

Classfull と Classless がある。

CBQ はこのうち、 Classfull の方だと思う。

[![](https://access.redhat.com/webassets/avalon/g/favicon.ico)第27章 Linux トラフィックの制御 Red Hat Enterprise Linux 8 | Red Hat Customer Portal](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/configuring_and_managing_networking/linux-traffic-control_configuring-and-managing-networking#overview-of-queuing-disciplines_linux-traffic-control)

TC
--

Linux Traffic Control。

Linux のトラフィックのハンドリングを行う。

> The Linux Traffic Control (TC) subsystem helps in policing, classifying, shaping, and scheduling network traffic. TC also mangles the packet content during classification by using filters and actions.
【Vim基本操作】慣れたら強いエディタ

# Vim とは
[wikipedia](https://ja.wikipedia.org/wiki/Vim) から引用。
> Vim（ヴィム。「ヴィアイエム」という読み方は誤り[2][3]）は、vi から派生し、発展した高機能なテキストエディタである。

とても使いやすいエディタということですね。

#### 起動方法
下記のように `vim ファイル名` で起動する。
ここからはキーと動作の紹介になるので、実際にターミナルから任意のファイル(何か記載されているファイルが望ましい)を起動させて動作を確認するとわかりやすい。
```
$ vim test.sh
```

## 目次
|No|項目|
|:----:|:-------------|
|1|[カーソル移動](#カーソル移動) |
|2|[コマンドモード](#コマンドモード) |
|3|[編集系](#編集系) |
|4|[コピー&ペースト](#コピー&ペースト) |
|5|[ファイルの操作](#ファイルの操作) |
|6|[検索と置換](#検索と置換) |


---
### カーソル移動
下記のキーでマウスを使わずカーソル移動ができる。
|動作|キー|
|:----:|:-------------|
|左に移動|h|
|下に移動|j|
|上に移動|k|
|右に移動|l|
|ファイル先頭に移動|gg|
|ファイル最後尾に移動|G|
|指定した{count}行に移動、例：120G|{count}G|
|行末尾へ移動する|$|
|行先頭へ移動する|0|
|行の文字の開始位置へ移動する|^|
|次の単語へ移動する|w|



---
### コマンドモード
デフォルトはノーマルモードで、下記のキーで操作したいモードに切り替える。
|動作|キー|
|:----:|:-------------|
|カーソルのある部分で挿入モード|i|
|カーソルの後ろで挿入モード|a|
|カーソルのある行の下に新しい行を追加して挿入モード|o|
|カーソルのある行の上に新しい行を追加して挿入モード|O|
|カーソルのある行を削除して挿入モード|S|
|ビジュアルモード|v|
|ノーマルモードに戻る|ESC|

---
### 編集系
下記のキーでコピペの操作ができる。
|動作|キー|
|:----:|:-------------|
|カーソル行をコピーする|yy|
|カーソル行を削除する|dd|
|カーソル位置から後ろを削除する|D|
|カーソル位置の後ろにペーストする|p|
|カーソル位置にペーストする|P|



---
### 検索と置換
下記のキーで検索や置換ができる。
|動作|キー|
|:----:|:-------------|
|検索を行う|/|
|該当の単語を検索する|#|
|検索結果を順にたどる|n|
|検索結果を逆順にたどる|N|
|文字列をを別の文字列に置き換える|:s|



---
### ファイルの保存
下記のキーでファイルの保存操作ができる。
|動作|キー|
|:----:|:-------------|
|ファイル保存|:w|
|ファイル終了|:q|
|強制終了|:q!|
|ファイル保存して終了|:wq|
|保存してから強制的に終了|:wq!|
|変更があれば保存して終了、なければ上書きせずに終了|ZZ|


# まとめ
今回まとめたキー(コマンド)を覚えておくだけで、それなりにVimを操作できる。
テキストエディタはサーバー上のファイルに手を加える際によく使用するので、必須知識であると感じる。

- 参考

https://www.udemy.com/course/vim-tmux-zsh/
【Swift】指定した文字列が複数個連なった文字列を作成する

# はじめに
ChatGPTForXcodeを作成する中で、指定した文字列が複数個連なった文字列を作成しないといけない場面に遭遇しまし。
ChatGPTに聞いたら教えてくれたので記録しておきます。

# やりかた
```swift
// Aを5個連続させる
String(repeating: "A", count: 5) // AAAAA
```

# おわり
知らないとFor文などで作ってしまいそうです笑
【ベン図付き】diffコマンドで差分のみテキスト抽出

# FileAにあってFileBにないもの
```
$ diff --old-line-format='%L' --new-line-format='' --unchanged-line-format='' FileA FileB
```
![Aのみ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534367/6b08f068-d62b-a823-cda2-2b0586bafe6a.png)


# FileBにあってFileAにないもの
```
$ diff --old-line-format='' --new-line-format='%L' --unchanged-line-format='' FileA FileB
```
![Bのみ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534367/9d411f02-88c0-c6e6-51d2-2fae516ff125.png)


# FileAまたはFileBにしかないもの
```
$ diff --old-line-format='%L' --new-line-format='%L' --unchanged-line-format='' FileA FileB
```
![AまたはBのみ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534367/29a73cb9-1c88-1a8e-9e70-0e85a6616885.png)




# 参考リンク
https://qiita.com/n_slender/items/b951daf444c2fba0dbac
AzureAppServiceにおけるDBパスワードの管理（Docker+Go）

AppServieでアプリを動かす場合にDBのパスワードやトークンなど公開すべきでない情報はKeyVaultに文字列を登録してAppServiceからのみ参照できるように制御するのが推奨されているように思います。テスト用アプリで動かしたので備忘録として残しておきます。

## やりたいこと
・パスワードなどの文字列はKeyVaultで管理する
・アプリケーションはAppServiceで動かしアプリケーション設定経由で文字列を渡す
・Goの標準パッケージのosから環境変数として取得する

## AppServiceでDockerを動かす
Goのプログラム

```go:main.go
import (
	"fmt"
	"net/http"
	"os"
)
func main() {
	http.HandleFunc("/", handler)
	http.ListenAndServe(":80", nil)
}
func handler(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "Hello, World."+os.Getenv("password"))
}
```

DockerFile

```dockerfile:Dockerfile
FROM golang:1.20

WORKDIR /usr/src/app
COPY go.mod go.sum ./
RUN go mod download && go mod verify

COPY *.go ./
RUN go build -v -o /app
EXPOSE 80

CMD ["/app"]
```

## AppServiceのオブジェクトID（プリンシパル）取得
IDからオブジェクトIDをコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/50178eb5-b01e-4705-e926-f27cc7f1a6ec.png)

## KeyVault側に参照権限を付与する
アクセスポリシーにオブジェクトIDを入れてポリシー追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/2e969baa-9873-8622-4e5e-b99fe58ae553.png)

## KeyVaultのシークレット識別子をコピーする
シークレットの識別子（https://〜）をコピーする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/d705d929-30b6-42d9-f937-93a28e3a70ab.png)

## AppServiceのアプリケーション設定に追加する
以下の文字列を追加する
@Microsoft.KeyVault(SecretUri=<シークレット識別子)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/41be8deb-3a79-1a54-77fd-a0c9a77df479.png)

## 結果の確認
KeyVaultに設定した文字列を確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/01c92db6-7a9c-750b-347b-3192a6f98494.png)

一連の流れで文字列の追加とAppServiceからの参照を試しました。
ER図の説明 (IE記法)

# ER図

データベース設計(Entity Relationship Diagram)で使う設計手法です。
・E = エンティティ(Entity) = モノ
・R = リレーションシップ(Relationship) = 関係
・D = ダイアグラム(Diagram) = 図式

エンティティ / アトリビュート / リレーション / カーディナリティと呼ばれるオブジェクトで構成されており、データ構造を俯瞰的に設計するため、把握しやすくなります。システム開発において不可欠です。

よく使われているER図の記法は2種類あり（IE記法 / IDEF1X記法）今回は「IE記法」について記載します。


## ER図の書き方

ER図を書く流れは以下です。

１：要件定義
システムの目的や機能、利用者、誰の何を解決するのかといった必要な情報の定義を行い、要件を明確にします。

２：エンティティの洗い出し
要件定義に基づいて、必要なエンティティを洗い出します。エンティティとはデータの集合体です。例えば、顧客(User)、商品(Product)、注文(Oder)、支払い(Payment)などがあります。これらを要件定義に基づいて識別していきます。

３：エンティティ間の関係性の洗い出し
各エンティティ間の関係性を洗い出します。例えば「注文は複数の商品に紐づく」「顧客は複数の注文を持つ」といった関係性です。

４：ER図の作成
エンティティ(E)と関係性(R)を元に、ER図を作成します。ER図は、エンティティを箱で表し、箱同士の関係性を線で結んで表現します。また、エンティティには名前をつけて、属性や関係性の数を定義します。以下、ER図です。


![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668222/46f0738e-b798-8e24-f450-69ebe66ebd21.png)
Diagramsを使用：https://www.diagrams.net/

#### メモ
・エンティティ：枠で囲まれた箱。属性の集合体
・アトリビュート：エンティティ内の属性情報。対象の項目に "PK(主キー), FK(外部キー)" を記載する。
・リレーション：エンティティ間の関連性を線で表す。一対一 / 一対多 / 多対多のリレーションがある
・カーディナリティ：それぞれのエンティティはいくつ関連を持つのか表す

エンティティ間で親子関係があり、子となるエンティティの枠線は「角丸」で表現する。


#### 参考
https://qiita.com/muuuuu/items/a9e780f8610425ca313e
https://it-koala.com/entity-relationship-diagram-1897