OmniAICreator/Qiita-1.07M huggingface dataset:
ESP32でカメラ画像取得とオーディオ再生を同時にやる方法

# 現象
ESP32のスケッチ例の[CameraWebServer](https://github.com/espressif/arduino-esp32/tree/b3c203db26f87efd965f6c3f6cc078f1b3f2c5db/libraries/ESP32/examples/Camera/CameraWebServer)に対し、I2Sによる音声ファイル再生を足したところ、音声が全く再生されなかった。Webサーバーで画像取得はできる。

音声出力ライブラリ：[ESP32-audioI2S](https://github.com/schreibfaul1/ESP32-audioI2S)

```C:CameraWebServerAudio.ino
#include "Arduino.h"
#include "WiFi.h"
#include "Audio.h"
#include "SD.h"
#include "FS.h"

// Digital I/O used
#define SD_CS          5
#define SPI_MOSI      23
#define SPI_MISO      19
#define SPI_SCK       18
#define I2S_DOUT      25
#define I2S_BCLK      27
#define I2S_LRC       26

//カメラピン定義は省略

void startCameraServer();

Audio audio;

String ssid =     "*******";
String password = "*******";

void setup() {
   
    pinMode(SD_CS, OUTPUT);      digitalWrite(SD_CS, HIGH);
    SPI.begin(SPI_SCK, SPI_MISO, SPI_MOSI);
    Serial.begin(115200);
    SD.begin(SD_CS);
    WiFi.disconnect();
    WiFi.mode(WIFI_STA);
    WiFi.begin(ssid.c_str(), password.c_str());
    Serial.print("Camera Ready! Use 'http://");
    Serial.print(WiFi.localIP());
    Serial.println("' to connect");
    audio.setPinout(I2S_BCLK, I2S_LRC, I2S_DOUT);
    audio.setVolume(21); // 0...21
    audio.connecttoFS(SD, "/320k_test.mp3");

    cameraInit(); //この関数内でカメラの設定が成されているが省略
    startCameraServer();
}

void loop()
{
    audio.loop();
}
```

# 対策
Audioの定義でI2Sのポート番号を変えてあげるとうまくいく。

```
Audio audio(false, 3, 1);
```

使用したライブラリだと、上記定義の3番目の引数がI2Sポート番号（ポート１に設定）。

全く知らなかったがスケッチ例の esp_camera.h の中ではカメラの制御にI2Sのポート０を使っているらしく、I2S音声出力がポート０だとリソース競合してしまう。なので、I2S音声出力のポート番号を変えてあげる必要がある。別のライブラリを使っても同じことだと思う。大体のESP32は２つのI2Sポートを持っていると思うが、デバイスによっては無いのかもしれないのでそこも確認が必要。今回使ったデバイスはESP32-S3でした。



# 所感
ESP32のカメラ関係のドキュメントをよーく読んでみると、I2Sのポートを使っていると書いてあり、ここでようやく対策をひらめきました。いやぁ、これは気が付きづらい。そして、オーディオライブラリでポート指定できるようになっていなかったら路頭に迷うところでした。
サヤ取りツールを作ってみた

海外FX向けのサヤ取りツールを作ってみた。

サヤ取りとは「スワップポイントの両建て」のことで、A社では買い、B社では売りを入れて両建てをすること。
為替取引のテクニックの1つで、「通貨スワップ」と言われるもの。

これを簡単に判別するツールを作れないか？と思って作ってみた。

海外FXのサヤ取りツール
https://nagoweb.co.jp/kaigaifx/sayadori/

海外FXのスワップポイントを自動取得するツールは作っていたので、そこから2業者でロングとショートを自動的に組み合わせるのを自動化した。

2業者間のサヤ取りをしたい人には良いツールができたと思う。
多言語FizzBuzzチャレンジ18日目:LISP

## これまでのまとめ
https://qiita.com/tenteko/private/fc52f7aec63ba5f67854

https://qiita.com/tenteko/private/ca9813f0982370d0c901

https://qiita.com/tenteko/private/bc808ba59f6993019045

https://qiita.com/tenteko/private/74aa4c422196cb5cdeac

https://qiita.com/tenteko/private/ea22bd19360333f9ca85

https://qiita.com/tenteko/private/ec2f7c2f99229a55a7aa

https://qiita.com/tenteko/private/237556777f5c5546af6e

https://qiita.com/tenteko/private/264e4aca8a2ee6761a6c

https://qiita.com/tenteko/private/6e86fa0eeed9d24805ab

https://qiita.com/tenteko/private/f32baaf43fe0217b7fc7

https://qiita.com/tenteko/private/b44e1e5bfc91f6f3a52f

https://qiita.com/tenteko/private/333b9697c03561fb6158

https://qiita.com/tenteko/private/667f5f69eda60f221912

https://qiita.com/tenteko/private/eff296000ecbc7b43f07

https://qiita.com/tenteko/private/f5ea89c185b14a5952f3

https://qiita.com/tenteko/private/64a5814d35f73972bde9

https://qiita.com/tenteko/private/7981389372c7f6bdc073


## 本日のお品書き
ついに来ましたLISP(Common LISP)…! 括弧がたっぷりということだけは知っていますが、自分で書いたことはない…！楽しみですね。

## FizzBuzz
```lisp
(defun fizzbuzz(i)
  ;; Lispではelse ifが無いので複数条件を書くときはcondが楽そう
  ;; princでは""は無視して表示される。改行のためにterpriを追加。
  (cond ((= (mod i 15) 0) (princ "FizzBuzz")(terpri))
        ((= (mod i 3) 0) (princ "Fizz")(terpri))
        ((= (mod i 5) 0) (princ "Buzz")(terpri))
        ;; t = trueのこと
        (t (princ i)(terpri))))

(dotimes (x 100) (fizzbuzz (+ x 1)))
```

## おまけ：実行環境
Common LISPのHPを見ると`sbcl`の利用が案内されていたのでLinux環境に導入しました。

```shell
sudo apt-get sbcl
# edit fizzbuzz.lisp
sbcl --script fizzbuzz.lisp
```
Flutter初心者がwebviewを表示した話

## 概要
ちょっと前にflutterを触ったが結局「触った」にとどまってしまったので１つアプリを作りきりたいと思い、１から手順をメモに近い形で残していく

## プロジェクトの作成

![スクリーンショット 2022-11-08 6.54.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/c90bf079-7d30-dbd9-3b90-cd11106f2071.png)
画面の「New Flutter Project」を選択し、SDKなどを選んで作成。

## プロジェクトにwebviewのプラグインを追加
```yml
  webview_flutter: ^3.0.4
```

## androidの設定変更
自分がAndroidユーザーなのでAndroidのことしか書きません
android/app/build.gradle
```gradle
minSdkVersion flutter.minSdkVersion
```
を
```gradle
minSdkVersion 20
```
に変更

あと
```
compileSdkVersion flutter.compileSdkVersion
```
を
```
compileSdkVersion 32
```
に変更

## 起動
![Screenshot_20221108_072603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/e261ff9e-5f3d-d3c2-a81f-14aa01230c44.png)
表示できちゃった
とても簡単

## 参考にしたURL
https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ja#2
AUTOSAR 22-11 資料整理方針

あと１ヶ月以内に次のAUTOSAR文書が公開になるらしい。

AUTOSAR 19-11
AUTOSAR 20-11
AUTOSAR 21-11

の３年資料を整理してきて、方針を決めて対応することにする。　

# 各文書　

文書番号順に資料を作る。　

これまでは、わかりやすいものから順だったかもしれない。　

AUTOSARで文書番号を重要視していない理由がわかっていない。　
文書番号をもっと大切にすれば、意思疎通がしやすくなる気がする。　
なぜ、国際規格などを番号で呼んでいるか、考えてみるきっかけになるかもしれない。　

# 単語帳　

PDFからTextに変換する際に、空白が消える問題を事前に調査する。 

短縮名の重複を、一覧にできればその都度照らし合わせて確認する。

# 参考資料　

過去の不十分な名称、誤植などを一覧にしておいて、対応しやすくする。　
その後、変更、改定したものには気をつける。　

## bosch automotive handbook
関係をなにかしら探し出す。　

## ISO, IEC, DIN, EU Directives
関係をなにがしら探し出す。　



AUTOSAR 「完全に理解した」

https://qiita.com/kaizen_nagoya/items/51983798ad7902b33cb1

A big wrapping cloth with the miniature garden

https://qiita.com/kaizen_nagoya/items/96411f20632e7f3ff73a
paiza.ioでelixir その48

# 概要
paiza.ioでelixirやってみた。
練習問題やってみた。

# 練習問題
Forthインタープリタを書け。
forthで数9を4個つかって1から15までの数を表す式を実行せよ。
Tupleを使え。

# サンプルコード

```
defmodule Forth do
	def start_link do
		Agent.start_link(fn ->
			{}
		end, name: __MODULE__)
	end
	def add do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
		    top = elem(stack, po)
		    nd = elem(stack, po - 1)
		    stack = put_elem(stack, po - 1, nd + top)
		    stack = Tuple.delete_at(stack, po)
		end)
	end
	def sub do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
		    top = elem(stack, po)
		    nd = elem(stack, po - 1)
		    stack = put_elem(stack, po - 1, nd - top)
		    stack = Tuple.delete_at(stack, po)
		end)
	end
	def mul do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
		    top = elem(stack, po)
		    nd = elem(stack, po - 1)
		    stack = put_elem(stack, po - 1, nd * top)
		    stack = Tuple.delete_at(stack, po)
		end)
	end
	def div do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
		    top = elem(stack, po)
		    nd = elem(stack, po - 1)
		    stack = put_elem(stack, po - 1, nd / top)
		    stack = Tuple.delete_at(stack, po)
		end)
	end
	def dup do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
			top = elem(stack, po)
			stack = Tuple.append(stack, top)
		end)
	end
	def drop do
		Agent.update(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
			stack = Tuple.delete_at(stack, po)
		end)
	end
	def get do
		Agent.get(__MODULE__, fn stack ->
		    po = tuple_size(stack) - 1
			elem(stack, po)
		end)
	end
	def push(n) do
		Agent.update(__MODULE__, fn stack ->
		    {v, _} = Integer.parse(n)
			stack = Tuple.append(stack, v)
		end)
	end
end

defmodule Main do
    def run(str) do
    Enum.map(String.split(str, " "), fn s ->
        cond do
	    s == "+" ->
		    Forth.add
	    s == "-" ->
		    Forth.sub
	    s == "*" ->
		    Forth.mul
	    s == "/" ->
		    Forth.div
	    s == "dup" ->
		    Forth.dup
	    s == "drop" ->
		    Forth.drop
	    s == "." ->
		    IO.inspect Forth.get
	    true ->
            Forth.push(s)
        end
    end)
    end
end

Forth.start_link

Main.run("9 9 - 9 9 / .")

Main.run("9 9 / 9 9 / + .")# 2  ok

Main.run("9 9 + 9 + 9 / .")# 3  ok

Main.run("9 9 9 + 9 / dup + .")# 4  ok

Main.run("9 9 9 + 9 / dup + - .")# 5  ok

Main.run("9 dup 9 + 9 + 9 / - .")# 6  ok

Main.run("9 9 9 + 9 / - .")# 7  ok

Main.run("9 9 9 drop 9 / - .")# 8  ok

Main.run("9 9 - 9 * 9 + .")# 9  ok

Main.run("9 9 / 9 dup 9 / + .")# 10  ok

Main.run("9 9 9 + 9 / + .")# 11  ok

Main.run("9 dup 9 9 + + 9 / + .")# 12  ok

Main.run("9 9 9 + 9 / dup + + .")# 13  ok

Main.run("9 dup 9 9 + 9 / dup + - + .")# 14  ok

Main.run("9 dup dup 9 + 9 + 9 / - + .")# 15  ok


```

# 実行結果


```
1.0
2.0
3.0
4.0
5.0
6.0
7.0
8.0
9
10.0
11.0
12.0
13.0
14.0
15.0


```

# 成果物

https://paiza.io/projects/z8LwM8cnFR7OciLWInpQVQ



以上。
関数は変数である - Good Concepts in Programming -

# 概要
プログラミングの良い概念を理解するとプログラマーレベルが上がると考えています。
良い概念は特定のプログラミング言語に縛られないので、様々なプログラミング言語で役に立ちます。
前回は[良いコードは良い名前から生まれる](https://qiita.com/masaki_nakada_ari/items/d5fd8df6f515debf00fa)を紹介しました。
今回紹介する良い概念は「関数は変数である」です。

本記事のタイトルを見て「ちょっと何言ってるかわからない」と感じた方はぜひ最後まで読んでほしいです。
関数の見え方、使い方が劇的に変わります。

# 第一級関数
あまり聞き慣れない用語ですが、第一級関数は関数がその他の変数と同様に扱われることを表します。
JavaScriptで関数を宣言するサンプルコードを見てみましょう。

## 関数宣言（functionオブジェクト）
足し算をする関数（add）を宣言してみましょう。

``` function_add.js
function add(a, b) {
    return a + b;
}

add(100, 23); // 123
```

よく見かける関数宣言です。特に問題ないですね。

## 関数式（関数を変数に代入）
次に関数式で記述してみましょう。

``` const_add.js
const add = function(a, b) {
    return a + b;
}; // セミコロンを忘れずに付ける

add(100, 23); // 123
```

ここでは関数を変数に代入できる（エラーにならない）ということが理解できればOKです。
「これができると何が嬉しいの？」はこの後の高階関数で説明します。

# 高階関数
こちらもあまり聞き慣れない用語ですが、高階関数には以下の特徴（機能）があります。
・関数を引数として扱う
・関数の戻り値に関数を返す

## 関数を引数として扱う
今回一番伝えたい内容が「関数を引数として扱う」です。
関数も変数と同様に引数として他の関数へ渡すことができるということを知っているとプログラミングの幅が広がります。
サンプルコードを見てみましょう。

``` try_catch_finally.js
const init = function() {
    // TODO 初期処理を記述する
};

const calc = function() {
    // TODO 計算処理を記述する
};

try {
    preProcessing();
    init();
} catch (error) {
    // エラーが発生した場合、プロジェクト共通のログ出力処理を実行する
    logging(error);
} finally {
    // 事後処理を記述する
    postProcessing();
}

try {
    preProcessing();
    calc();
} catch (error) {
    // エラーが発生した場合、プロジェクト共通のログ出力処理を実行する
    logging(error);
} finally {
    // 事後処理を記述する
    postProcessing();
}
```

try { ... } catch { ... } finallyはプログラミングをしているとよく記述しますが、何度も記述していると少し煩わしさ感じることもあります。
上記サンプルコードではtry { ... } catch { ... } finallyの中でinit()とcalc()が違うだけです。
関数を引数として扱う関数を定義してtry { ... } catch { ... } finallyを共通化してみましょう。

``` do_processing.js
const init = function() {
    // TODO 初期処理を記述する
};

const calc = function() {
    // TODO 計算処理を記述する
};

const doProcessing = function(processing) {
    try {
        // 事前処理を実行する
        preProcessing();
        // 引数で受け取った関数を実行する
        processing();
    } catch (error) {
        // エラーが発生した場合、プロジェクト共通のログ出力処理を実行する
        logging(error);
    } finally {
        // 事後処理を記述する
        postProcessing();
    }
};

doProcessing(init); // 引数としてinitを渡す
doProcessing(calc); // 引数としてcalcを渡す
```

try { ... } catch { ... } finallyの部分が共通化（コードで1箇所しかない）できました。
以前の記事で紹介した[OAOO原則](https://qiita.com/masaki_nakada_ari/items/1b4e1ea9a758ef86a498)に従い、重複したコードがなくなりました。
私は初めて上記のようなコードを見たときに「関数にこんな使い方あるのか！」と感動しました。

## 関数の戻り値に関数を返す
戻り値に変数を返すように戻り値に関数を返すことができます。
足し算をする関数（add）を修正したサンプルコードを見てみましょう。

```add.js
const add = function(a) {
    return function(b) {
        return a + b;
    };
};

add(200)(67); // 267

const add100 = add(100);

add100(23); // 123
add100(45); // 145
```

上記のようなコードをカリー化と言います。
カリー化についての詳細は割愛しますが、関数型プログラミング言語ではよく見かけます。

# まとめ
今回は関数は変数であるを紹介しました。
関数はとても奥が深く色んな概念（コールバック関数、クロージャ、カリー化、部分適用、関数合成など）があります。
関数は変数であるを理解してプログラマーレベルが上がったと感じていただければ幸いです。

最後まで読んでいただきありがとうございます。
多言語FizzBuzzチャレンジ17日目:Shell script(bash)

## これまでのまとめ
https://qiita.com/tenteko/private/fc52f7aec63ba5f67854

https://qiita.com/tenteko/private/ca9813f0982370d0c901

https://qiita.com/tenteko/private/bc808ba59f6993019045

https://qiita.com/tenteko/private/74aa4c422196cb5cdeac

https://qiita.com/tenteko/private/ea22bd19360333f9ca85

https://qiita.com/tenteko/private/ec2f7c2f99229a55a7aa

https://qiita.com/tenteko/private/237556777f5c5546af6e

https://qiita.com/tenteko/private/264e4aca8a2ee6761a6c

https://qiita.com/tenteko/private/6e86fa0eeed9d24805ab

https://qiita.com/tenteko/private/f32baaf43fe0217b7fc7

https://qiita.com/tenteko/private/b44e1e5bfc91f6f3a52f

https://qiita.com/tenteko/private/333b9697c03561fb6158

https://qiita.com/tenteko/private/667f5f69eda60f221912

https://qiita.com/tenteko/private/eff296000ecbc7b43f07

https://qiita.com/tenteko/private/f5ea89c185b14a5952f3

https://qiita.com/tenteko/private/64a5814d35f73972bde9

## 本日のお品書き
唐突なshell(bash)。（何を書こうか思いつかなかったんです…）

## FizzBuzz
```bash
for i in $(seq 1 100); do
    if [ $((i%15)) -eq 0 ]; then
        echo "FizzBuzz"
    elif [ $((i%3)) -eq 0 ]; then
        echo "Fizz"
    elif [ $((i%5)) -eq 0 ]; then
        echo "Buzz"
    else
        echo $i
    fi
done
```

## おまけ：実行方法
スクリプトをファイルに書いておいて、実行権限付けてあげるだけですね。

```shell
# edit fizzbuzz.sh
chmod 755 fizzbuzz.sh
./fizzbuzz.sh
```
多言語FizzBuzzチャレンジ16日目:JavaScript

## これまでのまとめ
https://qiita.com/tenteko/private/fc52f7aec63ba5f67854

https://qiita.com/tenteko/private/ca9813f0982370d0c901

https://qiita.com/tenteko/private/bc808ba59f6993019045

https://qiita.com/tenteko/private/74aa4c422196cb5cdeac

https://qiita.com/tenteko/private/ea22bd19360333f9ca85

https://qiita.com/tenteko/private/ec2f7c2f99229a55a7aa

https://qiita.com/tenteko/private/237556777f5c5546af6e

https://qiita.com/tenteko/private/264e4aca8a2ee6761a6c

https://qiita.com/tenteko/private/6e86fa0eeed9d24805ab

https://qiita.com/tenteko/private/f32baaf43fe0217b7fc7

https://qiita.com/tenteko/private/b44e1e5bfc91f6f3a52f

https://qiita.com/tenteko/private/333b9697c03561fb6158

https://qiita.com/tenteko/private/667f5f69eda60f221912

https://qiita.com/tenteko/private/eff296000ecbc7b43f07

https://qiita.com/tenteko/private/f5ea89c185b14a5952f3

## 本日のお品書き
みんな大好きJavaScriptです。不慣れな関数型言語が続いていたので少しほっとしますね。（いや、関数型言語も面白いんですけどね）

## FizzBuzz
```javascript
for (let i = 1; i < 101; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}
```

## おまけ：実行環境
denoでさくっとやるだけですね。formatもお任せできるので適当にスクリプト書いて実行する分には本当にお手軽でありがたいです。
「"LC.exe"はコード-1を伴って終了しました。」エラー

ビルド時に「"LC.exe"はコード-1を伴って終了しました。」

とエラーが発生する場合がある

突然、発生することもあり原因は不明
（プロジェクトファイルの構成を変えた時に起こる？）

## 解決方法
1. プロジェクトの「licenses.licx」を開く
2. プロジェクトで使用していないコントロールのライセンス情報を削除する

または

1. visual studio 閉じる
2. bin objフォルダ削除
3. visual studio でリビルド

※「licenses.licx」は「Properties」フォルダの中

## Reference
[ビルド時に「"LC.exe"はコード-1を伴って終了しました。」のエラーが表示されます。](https://developer-tools.zendesk.com/hc/ja/articles/360003972895-%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB-LC-exe-%E3%81%AF%E3%82%B3%E3%83%BC%E3%83%89-1%E3%82%92%E4%BC%B4%E3%81%A3%E3%81%A6%E7%B5%82%E4%BA%86%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F-%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99-)

[「"LC.exe" はコード -1 を伴って終了しました（"LC.exe" exited with code -1）」エラーのトラブルシューティング](https://developer-tools.zendesk.com/hc/ja/articles/360003961275--LC-exe-%E3%81%AF%E3%82%B3%E3%83%BC%E3%83%89-1-%E3%82%92%E4%BC%B4%E3%81%A3%E3%81%A6%E7%B5%82%E4%BA%86%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F-LC-exe-exited-with-code-1-%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)

https://kb.jp.infragistics.com/?p=955

https://www.out48.com/archives/2437/
プランニングポーカーを作ってFirebaseで公開してみた

# プランニングポーカーを作ってFirebaseで公開してみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/39144a82-3adc-5cc7-a40b-6dcc5f20ed63.png)


利用してみたい方は、こちら

https://team-poker.app/


## 背景

チームでプランニングポーカーを実施していた時に、`１３〜２１って範囲が少し広すぎるよ`とか`気づいたら接続切れてて部屋作り直しになった`など、大した問題ではないが、少し使い勝手の悪さを感じていたので自作してみました。

## 利用技術

- Vue.js
- Bulma
- Firebase
  - hosting
  - firestore

### 仕組み

- Clientで稼働するのは、Vue.js＋Bulmaで構築される画面
- Firestoreで、ルームデータをリアルタイムで共有

## 機能紹介

- 選択項目を誰でも好きなように変更可能

    <img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/b8dde55d-6397-9314-ace7-4deb6e1b9a1e.png"><img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/28e8c540-94f6-f503-510c-b8e6c053764e.png"><img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/bf903792-7776-da37-5384-b31c1a75ab0d.png"><img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/29c0f049-cf28-6432-9b13-faa5d785e321.png">


  - プリセットされている選択項目は6つ
  - 値は変更可能であり、制限も設けていないので自由な文字に変更可能
  - `+ -`ボタンで自由に追加削除可能

- 作成した部屋にアクセスするID付きURLをクリップボードコピー

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/2cb14102-f73e-82d7-ae8d-18bfd44f154e.png)


- カード表示の各種機能

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/cc6eee2c-34b0-67ee-4786-e749d05de16a.png)

  - アイコンにより、選択中/済みが判別可能
  - 右上の`x`ボタンで退場する、させることが可能
  - 全員の選択が完了すると自動オープン

- 選択結果の平均、最大、最小表示

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/25ffad30-ae29-f118-4de3-af5d53d24937.png)

- 閲覧モード参加機能

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282054/c4fa18f0-e5e5-6f7c-b592-93d926c3c83a.png)


    - ポーカーに参加しないが、見学する場合にカードを選択が制限されている状態で参加することが可能


## 感想

ここをベースに、チームにあった選択項目や、カード表示にカスタマイズしていくことで、楽しいプランニングポーカーが実施できるのではないかと感じました。

当初はGASで利用していたのですが、実際に運営してみると好評だったので
GASからFirebaseにリホストして、公開しています。
pythonエンジニアになるための教材とは?(非エンジニアのメモ)


pythonエンジニアになるべく学習中。なのだがいかんせん所持している教材が多すぎる。
手元にある教材をジャンル別にまとめてみた。

<h2>コンピュータサイエンス</h2>

- 『基本情報技術者』
- 『みんなのコンピュータサイエンス』
- 『決定版 コンピュータサイエンス図鑑』
- 『教養としてのコンピューターサイエンス講義　今こそ知っておくべき「デジタル世界」の基礎知識』
- 『コンピュータ、どうやってつくったんですか？ はじめて学ぶ コンピュータの歴史としくみ』
- 『UNIXという考え方―その設計思想と哲学』


<h2>Python,Django</h2>

- 『シリコンバレー一流プログラマーが教える Pythonプロフェッショナル大全』

- 『ゲームを作りながら楽しく学べるPythonプログラミング (Future Coders（NextPublishing）)』
- 『独学プログラマー Python言語の基本から仕事のやり方まで』

<h5>Udemy:</h5>

- はじめてのPython 少しずつ丁寧に学ぶプログラミング言語Python3のエッセンス

- 現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

- 現役シリコンバレーエンジニアが教えるアルゴリズム・データ構造・コーディングテスト入門

- 100 Days of Code: The Complete Python Pro Bootcamp for 2022

- Python and Django Full Stack Web Developer Bootcamp

- The Self-Taught Programmer

- Pythonによるビジネスに役立つWebスクレイピング（BeautifulSoup、Selenium、Requests）

- 【画像判定AIアプリ開発・パート1】TensorFlow・Python・Flaskで作る画像判定AIアプリ開発入門

- 【画像判定AIアプリ開発パート2】Django・TensorFlow・Python・転移学習による高精度AIアプリ開発

<h5>youtube:</h5>

- Djangoチュートリアル
https://www.youtube.com/playlist?list=PLuCS8p0T7ozK4Ne1e5eAVG2R5Gbs1naix


<h2>web全般</h2>

- 『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』

- 『ほんの一手間で劇的に変わるHTML ＆ CSSとWebデザイン実践講座』

- 『作りながら学ぶ HTML/CSSデザインの教科書』

- 『21世紀最強の職業 Web系エンジニアになろう AI/DX時代を生き抜くためのキャリアガイドブック』

- 『イラスト図解式 この一冊で全部わかるWeb技術の基本』

<h5>Udemy:</h5>

- 【世界で70万人が受講】Web Developer Bootcamp 2021（日本語版）

- The Complete 2022 Web Development Bootcamp


<h2>ネットワーク</h2>

- 『図解入門TCP/IP　仕組み・動作が見てわかる』


<h2>データベース</h2>

- 『おうちで学べるデータベースのきほん』

- 『XML徹底入門【わかりやすい図解解説】』
- 『SQL 第2版 ゼロからはじめるデータベース操作』

<h5>Udemy:</h5>
- Die komplette SQL Masterclass: Vom Anfänger zum Profi


<h2>プログラミング</h2> 

- 『プログラムはなぜ動くのか 第３版　知っておきたいプログラミングの基礎知識』


<h2>アルゴリズム</h2>

- 『アルゴリズムを、はじめよう』

- 『プログラミングコンテスト攻略のためのアルゴリズムとデータ構造』

- 『世界でもっとも強力な9のアルゴリズム』

- 『問題解決のための「アルゴリズム×数学」が基礎からしっかり身につく本』

<h2>オブジェクト指向</h2>

- 『オブジェクト指向でなぜつくるのか 第2版』

<h2>インフラ</h2>

- 『絵で見てわかるITインフラの仕組み 新装版』

<h2>Linux</h2>

- 『Linuxの絵本 サーバーOSが楽しくわかる9つの扉』

<h2>その他</h2>

- 『プログラマの数学』

- 『「技術書」の読書術 達人が教える選び方・読み方・情報発信&共有のコツとテクニック』

- 『人月の神話』

- 『ハッカーと画家 コンピュータ時代の創造者たち』

- 『いかにして問題をとくか』

- 『いかにして問題をとくか・実践活用編』

誰が見ても多すぎる...自分でもそう思う。勿論全てを使ってるわけではないけれど。
原因としては、まずweb系エンジニアに必要な知識が理解できていない、お勧めされている本や講座を何も考えずにポチってしまうのと、内容を理解できずに別の教材に浮気してしまうのがあげられる。酷い。
そこで改めてネットでDjangoの学習ロードマップを調べ、元々気になってた『21世紀最強の職業 Web系エンジニアになろう AI/DX時代を生き抜くためのキャリアガイドブック』を参考にしたところ、必要な基礎知識として以下が挙げられる。

- Django
- Python
- HTML/CSS
- JavaScript/TypeScript
- クラウド
- インフラのコード化
- データベース
- Mac基礎
- コンピュータサイエンス基礎
- Linux基礎
- Git/GitHub基礎
- エディタ/IDE
- パッケージマネージャ
- Linter/Formatter
- 単体テスト/統合テスト
- セキュリティ
- Webサーバ/アプリケーションサーバ
- Rest API

これらの内容全てが先に挙げた教材リストに含まれるか。

- Django
- Python
- HTML/CSS
- JavaScript/TypeScript
- データベース
- Git/GitHub基礎
- エディタ/IDE
- パッケージマネージャ
- Rest API
udemyの講座で学習。

- コンピュータサイエンス基礎
『基本情報技術者』で学習。

- Mac基礎
古いMacbook airで十分だろうか？それともWSLを利用すべきか？

- Linux基礎
『Linuxの絵本 サーバーOSが楽しくわかる9つの扉』で学習。だがもう少し深堀するべきか?

- クラウド
- インフラのコード化
- Linter/Formatter
- 単体テスト/統合テスト
- セキュリティ
- Webサーバ/アプリケーションサーバ
これらが恥ずかしながらよくわからない。インフラ、ネットワークは『絵で見てわかるITインフラの仕組み 新装版』、『図解入門TCP/IP　仕組み・動作が見てわかる』で学習できそうだが、その他は別途他の教材で学ぶ必要がありそう？
[WordPress]headに差し込まれるやつ消すなど

アップデートされる度に余計なものが出力されるのまじ・・

```php:functions.php 
/**
 * JS, CSS
 */
add_action('wp_enqueue_scripts', function() {
	if ( is_admin() ) return;
	add_action('wp_enqueue_scripts', function() {
		wp_deregister_style('wp-block-library');
		wp_deregister_style('wp-block-library-theme');
		wp_dequeue_style('global-styles');
		wp_dequeue_style('classic-theme-styles');
        wp_deregister_script('jquery');
        wp_enqueue_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', [], 'latest');
        //any
	});
});

/**
 * ショートコードボタン追加
 * ※引数指定しないと表示されなくなった
 */
add_action('admin_print_footer_scripts', function() {
    global $post_type;
?>
<script>
<?php if ( in_array($post_type, ['post']) && wp_script_is('quicktags') ):?>
QTags.addButton('any', '[any]', '[any id=""]');
<?php endif;?>
</script>
<?php
}, 20);
```
2022/11/08主にITとかセキュリティの記事

【特別企画】ソフト開発で不可避なOSSリスク - SBOMでは乗り切れない実情
https://www.security-next.com/141021

IoTデータベース「Apache IoTDB」にサービス拒否のおそれ
https://www.security-next.com/141177

分散ストリームエンジン「Apache Heron」に脆弱性
https://www.security-next.com/141173

韓国語を話す持続的標的型攻撃グループ「Andariel」、金銭目的で活動か(11/6)
https://news.mynavi.jp/techplus/article/20221106-2503779/

ウーバーをハッキングした「Lapsus＄」の正体。求められる「ソーシャルエンジニアリング」への対策(11/6)
https://news.yahoo.co.jp/articles/6e48adf4cb41c66cb34438ed65d661b39ef4cafc

Microsoft 365 (旧 Office 365) とその他のグループウェアを比較 | 機能やコストについても解説(11/4)
https://www.kddimatomete.com/magazine/221104173055/

10月フィッシング被害報告、えきねっとが20％超-イオン、三井住友カードも続く(11/6)
https://news.mynavi.jp/techplus/article/20221106-2505670/

Rustは難しい？シーザー暗号を解いてみよう(11/6)
https://news.mynavi.jp/techplus/article/rustalgorithm-2/

ファイルを探し回るのは時間の無駄！効率的なデータ管理のキホン(11/7)
https://xtech.nikkei.com/atcl/nxt/column/18/02247/110200001/

DX人材育成の指針「DXリテラシー標準」、体系的な学びを企業と個人へ(11/7)
https://xtech.nikkei.com/atcl/nxt/column/18/02220/100600009/

「失われた30年」は「失った30年」　デジタル革命を逸した日本の危機(11/7)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600007/102700125/

新規事業で料理レシピアプリ　工場担当者らがゼロから開発(11/7)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600004/102800116/

デジタルシティズンシップ（Digital Citizenship）(11/7)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600009/103100127/

インボイスまで1年　「請求書洪水」に備える(11/7)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600014/110100130/
Dockerで２つのプロジェクトで参照し合う場合の注意の話

開発環境としてDockerって結構使いますよね。
今回は開発プロジェクトが別の開発プロジェクトにアクセスするときに発生しました不具合とその対応を書いておきたいと思います。
正直、この問題は難しくて一日悩んでいました。
答えはシンプルでしたw

# 開発環境
はじめに開発環境を書いておきます。

今回はPHPStormを使いまして以下のプロジェクトを作成しています

- Webページのプロジェクト(port : 8000)
- Web API開発プロジェクト(port : 8001)

それぞれの動作確認はHTTP Requestとブラウザにて確認していました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2481837/2aae960c-9481-0c50-a382-9d75a722f67c.png)


# 不具合
はじめに開発スケジュールを書き出します

1. Webページプロジェクトの開発 ( リリースしたWeb APIを利用 )
2. 今回、Web APIプロジェクトの追加機能を開発
3. WebページプロジェクトからWeb APIプロジェクトにアクセスして動作確認
4. << 不具合発生 >>

不具合発生でWebページからアクセスできない；；
となっております
今考えると1で動作確認しているんですよねw

何も考えず設定しますとWebページプロジェクトからWeb APIプロジェクトにアクセスするにはPHPStormでいじっているとおりにlocalhost :8001と指定しますよね。

想定する頭の中を図にするとこんな感じです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2481837/a20436cd-eca8-dd37-33cc-42c433f663fb.png)


でも、これの場合動きません…

ここでのポイントはlocalhostはPHPStormが動作している開発PCのlocalhostではありません。
実際は実行コンテナがlocalhostに当たります。
つまりはこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2481837/00525250-e619-82bc-7d3c-5f357f48de1a.png)


Webページプロジェクトからlocalhostを参照すると自分の8001にアクセスします…
つまり何のサービスをしていないポートにアクセスすることになります

# 問題の解決方法
この問題の解決するにはどうすれば良いでしょうか？
はい、この場合にはシンプルでした開発PCのIPを指定してやれば動作します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2481837/3880c619-f1a8-f123-e935-04851e85f6f7.png)


これで平和になりました。

Web APIプロジェクトの動作確認後　Webページプロジェクトの参照先を変更したコンフィグはコミットしないように注意が必要ですね

# 引っかかった問題
ってかPHPで開発していたWebページプロジェクトの時のエラーメッセージに引っかかりました。
エラーメッセージは以下です…

```
ErrorException: Undefined variable: http_response_header in file .../WebAPIAccessService.php on line 49
```
エラー発生部分抜粋すると
```php
$contents = @file_get_contents($url, false, stream_context_create($options));
Log::debug("APIAccessService@post_request : headers "
    . print_r($http_response_header,true)
    . ' contents ' . "\n"
    . print_r($contents,true));
```
file_get_contentsなんてレガシーなもの使っていたからあれだし調べるとこんなの出ているし

【PHP8.1】PHP8.1で削除される機能 – Predefined variable $http_response_header –
https://qiita.com/rana_kualu/items/c894b2160d1f8799eed2#predefined-variable-http_response_header


え！？PHP 8.1に移行したばかりなのにこんなトラップが！とか思っていました

そう、公開中のWeb APIにアクセスできていたことを失念していましてw
近々に開発環境をPHP 8.1に切り替えてたことに注意を向けてしましました。
実行環境を確認するとPHP 8.1ではなくPHP 7.4だったので合わせたり…
試行錯誤していましたが、結論 Dockerコンテナのlocalhostでした

file_get_contentsで開いていないポートにアクセスするとhttp_response_headerがnullって…

その辺りは勉強になりましたw

そもそもレガシーなfile_get_contentsなんて使っているからでしょうね
作っていたときに考えなしでどっかからコピペしていたのでしょう
コピペはだめですね…

# 終いに
今回の問題点はDockerコンテナも独立したサーバっぽいということです。
つまりはlocalhostは開発PCではなく自分のコンテナを指すということです

今後同じミスしないようにメモっておきます
Vue2.7ではVue3のようなカスタムコンポーネント上で使えるv-modelを使用した親子間の双方向バインディングができない

タイトルにあるとおり、Vue2.7とVue3では似ているようで完全に機能がバックポートされているわけではないので一部使えないVue3の機能があります。

# 前提知識
v-modelは`value`propsと`@input`emitイベントを一つのディレクティブにまとめて双方向バインディングをするための省略記法、いわゆるシンタックスシュガーです。

# 問題
`Vue >= 3`からはこのv-modelの記法が
> プロパティ: value -> modelValue
> イベント: input -> update:modelValue

に変わりました。https://v3.ja.vuejs.org/guide/migration/v-model.html
たしかにselectboxやswitch buttonなどでもイベントがinputという命名になるのは少し変な感じがするのでupdateにしたのは合理的ですね。
この内容はVue3のマイグレーションガイドでも大々的に「破壊的変更」であると明記されています。
Vue2.7からVue3の記法をサポートするよ〜みたいな情報を鵜呑みにしてしまっている人が多いと思いました。
内部のエコシステム自体は変わっておらず、実は拡張構文をVue2にバックポートしただけなので、それほど全ての機能をサポートしているわけでもないようですね。
Vue2リポジトリにその内容がissueとして建てられていました[^1]
> The main goal of v2.7 is not align with Vue 3 completely but only back port some of the useful features (not breaking changes) introduced in Vue 3. It should be compatible with Vue 2 for most cases.

要するにv2.7の主な目的は、Vue3に合わせることではなく、そのVue3へのマイグレーション段階として近い記法でかけるようにとバックポートしただけだということだそうです。

# 解決策
いままでのVue2の書き方の通りvalue/@inputを使いましょう。

[^1]:https://github.com/vuejs/vue/issues/12654
ubuntuでtkinterが使えなくなった（泣）

## はじめに
初カキコども
Ze;roPです〜  
最近pythonにお熱で難しいことはよくわからないけど、適当にツール作って遊んではそれを仕事で活かしたりして遊んでます。  
さて、コマンドラインツールやマクロのようなものばかり作っていて、ちょっとユーザーに優しい感じのツールも作れたらいいかも〜って思ってtkinterを使おうとインストールして、リファレンスのhello worldを実行しようとした矢先、それは起きました。。。  
## 突然のエラー
```
$ python3 -m tkinter
Traceback (most recent call last):
  File "/home/USER/.pyenv/versions/3.10.7/lib/python3.10/runpy.py", line 187, in _run_module_as_main
    mod_name, mod_spec, code = _get_module_details(mod_name, _Error)
  File "/home/USER/.pyenv/versions/3.10.7/lib/python3.10/runpy.py", line 146, in _get_module_details
    return _get_module_details(pkg_main_name, error)
  File "/home/USER/.pyenv/versions/3.10.7/lib/python3.10/runpy.py", line 110, in _get_module_details
    __import__(pkg_name)
  File "/home/USER/.pyenv/versions/3.10.7/lib/python3.10/tkinter/__init__.py", line 37, in <module>
    import _tkinter # If this fails your Python may not be configured for Tk
ModuleNotFoundError: No module named '_tkinter'

```
**どうなってんじゃい!!!!**  
これもうわかんねえなぁ〜？お前どう?(他人事)  
  
一番下に関してはtkのdevとかが入ってねえぞ〜とか出てきます。  
入ってないってほんまか〜?
```
$ sudo apt install python3-tk -y
[sudo] USER のパスワード: 
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています... 完了        
状態情報を読み取っています... 完了        
python3-tk はすでに最新バージョン (3.10.6-1~22.04) です。
アップグレード: 0 個、新規インストール: 0 個、削除: 0 個、保留: 0 個。

```
**ありますねえ!ありますあります**  
えーどうして〜？って感じでググってたんですけど、そもそもおかしい  
皆さん入れたら解決しているんですよね  
僕みたいにpyenv配下に配置されてないんです(どうしてこうなった？)  
最初はpython verかなって思って色々localを切り替えてみたり、venv clearしてみたりしたんですけど、いっそpyenvくんを疑おうとしたわけです。
 
## 原因はお前だった
原因は私の環境だとpyenv 3.10.7のインストール先でした。  
なのでとりあえずpyenvから消し飛ばしましょう
```
pyenv uninstall 3.10.7
pyenv install 3.10.7(使いたいverいれてください)
```
これで再度実行すると出てきました!(助かった〜)  
なんか変なとこから呼び出せれちゃいましたって感じです。これでGUI設計できますね〜  
ひとまずメッセージよく読めば解決できるぞって感じで、凄い簡単な記事から始めていきます〜よろりん
使える TypeScript を覚える一歩目

最初の言語で TypeScript を覚えようとした時や、JavaScript の経験から続きでやろうとして伸び悩むときにお勧めのアイテムを紹介します。**一歩目** を踏み出すエントリーポイントにどうぞ。

# 書籍

## プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで

リンク先で目次の一覧が見れます。

https://gihyo.jp/book/2022/978-4-297-12747-3

* 発売: 2022年4月
* 著者: 鈴木僚太 氏
* 頁数: 424 ページ

個人的には、これぞ教典と思える一冊です。
社内では「ブルーベリー本がお勧め」と吹聴してますｗ

目次を見て圧倒するかもしれませんが、TypeScript ならではの記述法や演算子、テクニックが幅広くぎっしり網羅されています。それでも実際には、1つ1つが程よく短く纏まっているので読み進めやすいというのが理由です。
さらに 38 個にもおよぶコラムで「そうだったのか」と理解を深めれたり、実務におけるノウハウ、周辺の情報も知れたりできます。

主要所の1～8章は各章が70ページ前後にならされているので、各章を区切りとして継続的な学習に凄く便利です。時間に余裕があるなら1日1章のペースで自分でコードを書いて実行しながら読み進めれば、2週間弱でマスターできる計算です。

読み終わる頃には any をよく書いていた自分がもう過去になり、async/await/Promise を自由に操れるようになっていることでしょう。

実務として使えるレベルに言語を習得するにはこの一冊で事足ります。

# サイト

## TypeScript Deep Dive 日本語版

https://typescript-jp.gitbook.io/deep-dive/

多くの有志の方々により翻訳されている TypeScript Deep Dive です。
左メニューからポチポチして見れますし、検索もできるのでまずはこのサイトをぐるりと散策するのも良いと思います。

Deep Dive の名の如く主要所に絞って、らしさの紹介がメインのコンテンツです。もっと使えるテクニックを身に付けたいと思ったら（必要を感じたら）上の書籍に手を出すというステップも選択肢になります。

## サバイバルTypeScript

https://typescriptbook.jp/

「はじめに」に書かれている通り、実務でつかう際によく使うものは大体揃っています。

左のメニューは折りたたまれているので少なそうに見えますが、展開するとそのボリュームに圧倒するかもしれません。
Deep Dive のようにぐるりと散策・・・は結構しんどいので、気になる章から読むのが良いです。

お勧めの章は [Next.jsで猫画像ジェネレーターを作ろう](https://typescriptbook.jp/tutorials/nextjs) です。
プログラマーといえば、猫ですよね？ ~~ヨシ！~~

フロントエンドではおなじみの [Next.js](https://nextjs.org/) を使ったチュートリアルです。猫ジェネから発展させて自分なりの工夫を仕込んでいくと TypeScript 言語自体に加えて、周辺のフレームワーク・関係性も一緒に学べて良いです。

# 今すぐに試す

## プレイグラウンド

https://www.typescriptlang.org/ja/play

ローカル開発環境を準備する手間が惜しい、すぐに試したいんだ！！
というあなた、上のリンクをクリックすれば試せます。

# じっくり試す

https://qiita.com/bugtrap/items/9f65eeaf8f5edb56705d

ローカルでじっくり試したいなら、こちらの記事もお勧めです（宣伝）

# おわりに

例え話として「TypeScript は JavaScript みたいなもの」「JavaScript のプログラムはそのまま TypeScript でも大抵動く」とされたりします。ある側面から見れば合っていますが、それは TypeScript のもつ魅力のほんの一部です。がっつり使えるようになるともはや別言語であり、開発環境との組み合わせでその威力も倍増するのを感じれます。

個人的な魅力は、凄まじいまでの型推論のパワーです。

推論の結果、ダイナミックに新しい型が組上がり、それがジェネリクス関数やクラス・別のタイプ等へ広範囲に適用され、それがさらに型推論されて他所で適用される・・・。おまえは何を言ってるんだと思われるかもですが、僕も最初は不可解な挙動で理解が追いつかなかったです。

小さいコードから練習して組み合わせたりして覚えてきたら「はえーすっご！変態的な推理力（誉め言葉）」と関心しました。

一歩目からどんどん進んで、何十歩目か、プログラムを再利用性よく部品化して効率を上げたいときに面白味が増すのではと思います。この辺りはいつか記事に出来たら…。

それではまた！
【Next.js】React-Hook-FormとSSGformを使ったお問い合わせフォーム作成【フォーム送信】

<h2>はじめに</h2>
Next.jsで作成中のポートフォリオにお問い合わせフォームを設置したいと考え、
色々試行錯誤しながらなんとか原型が出来たので備忘録がてらここに書き記す。
<h2>使ったパッケージ等</h2>
<ul>
<li>"react-hook-form": "^7.39.1"</li>
<li>"yup": "^0.32.11"</li>
<li>"@hookform/resolvers": "^2.9.10"</li>
<li>SSGform</li>
</ul>

<h2>SSGform</h2>
フォーム送信よりも先にバリデーションを実装してしまい、その後にフォーム送信機能を作成しようとして詰まった。
サーバーレスで簡単に実装出来るフォーム送信ライブラリを探していたところ、ヒットしたのがこちらの

[SSGform](https://ssgform.com/)と言うサービス。
無料会員登録さえ行えばJSX内のformやinputにちょろっと記載するだけでフォーム機能を実装できる優れもの。

コード例
```html
<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post">
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <button type="submit">送信する</button>
</form>

```
１、formのactionには会員登録後、フォーム追加で生成されるURLを入れて、methodはPOSTにする。
２、各inputやtextareaにname属性を持たせる

ほとんどこれだけでフォームができちゃう。ヤヴァイ。

ただし、自分の環境の場合、React-Hook-FormとYupを使ってバリデーションを実装しているので、actionとmethodをformタグに追加すると、メールは遅れるがバリデーションが発動しない。その逆もしかり。みたいな状況に、、、
まあ原因は割とすぐに見つかって、このonSubmitがあるとどうやらうまくいかないらしい、、、
```javascript
<form onSubmit={handleSubmit(onSubmit)}>
```
<h2>どうしたか</h2>
色々試したんですが、結局落ち着いたのはこれ。
actionとmethodは使わず、onSubmit関数にaxiosを追加することでバリデーションとフォーム送信機能を両立しました。

```javascript
//フォーム送信処理
  const onSubmit: SubmitHandler<InputsProps> = (data) => {
    console.log(data)
    axios.post('URL', data, {
      headers: {
        'content-type': 'multipart/form-data', //axiosでフォーム送信する時に必要なheader情報
      },
    })
  }
```
dataと言う引数に入力データが格納されているので、axiosの第二引数に指定。
headers情報に'multipart/form-data'を持たせることでエラーも出ず、正常にフォーム送信ができるようになりました。

めでたしめでたし。
SvelteKitでスキーマ駆動的な

## やりたかったこと
* [Svelte公式チュートリアル](https://svelte.jp/tutorial/await-blocks)の`fetch(uri)`の代わりに、
OpenAPI定義から自動生成した型定義されたTypescriptコードを使ってバックエンドと通信したい

タイトルに書いてしまったけどスキーマ駆動という語が妥当なのかはよくわからない...

調べ方が悪いのかやろうとする人にとっては当然の内容なのか、調べても出てこなかったので備忘録として


## やったこと
公式チュートリアルを一通り眺めた状況からスタート
1. SvelteKitの準備
1. API定義からコード生成
1. 実装

### SvelteKitの準備
viteってビルドツールが全部やってくれた(全部Yes)
```powershell
> yarn create vite
√ Project name: ... sample
√ Select a framework: » Svelte
√ Select a variant: » SvelteKit ↗
√ Which Svelte app template? » Skeleton project
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes
```
あとは`cd sample`して`yarn`からの`yarn dev`でとりあえず起動

### API定義からコード生成

CLIでコード生成するパッケージをインストールして、
```powershell
yarn add -D @openapitools/openapi-generator-cli
```
API定義からコード生成
```powershell
yarn openapi-generator-cli generate -i ../spec/UserApi.yaml -g typescript-fetch -o ./src/lib/
```
`-i`はソースファイル、`-g`は生成時のテンプレート、`-o`は出力先(事前にフォルダを作っておかなくても`./src/lib/`に出力される)

参考：[Stoplight StudioとOpenAPI Generatorを使ってみる](https://zenn.dev/tekihei2317/articles/9fbd013b445a9e)

API定義は[StoplightStudio](https://github.com/stoplightio/studio)起動時にサンプルで入ってた`UserApi.yaml`を使った


### 実装
[公式チュートリアル](https://svelte.jp/tutorial/await-blocks)でpromiseを扱えればよさそうだったので、
```html
<script lang="ts">
	import { DefaultApi } from '$lib/apis/DefaultApi';
	const api = new DefaultApi();

	let userId = '';
	let promise = api.getUsersUserId({ userId: null });
	const fetchEvent = () => {
		promise = api.getUsersUserId({ userId: userId });
	};
</script>

ユーザID:<input bind:value={userId} />
<button on:click={fetchEvent}> fetch </button>
{#await promise then user}
	{user.firstName + ' ' + user.lastName}
{/await}
```
として、IDを入力してボタン押下でユーザ名が表示されるコードを作成

`$lib`は`src/lib/`へのショートカットで、呼び出し側の階層に関わらず使えて便利らしいけど`yarn dev`しないとパスが見つからないと言われる

動作確認はStoplightStudioのモックサーバで実施
(自動生成された`src/lib/runtime.js`で3100番ポートを指定した)


## 経緯という名の雑感

RTKQueryとかいうのが便利らしいけど(関数コンポーネントの)stateの実態がよく分からなくてReact挫折したのでSvelte触ってみてついでに研修でやったスキーマ駆動っぽいことがしたかった
~~研修でReactもやったはずなんだけどな~~

フロントとバックを分離したりコンポーネントに分割したりして変更容易性高めるとかスキーマに合わせて開発して齟齬無くすとか事前に型定義してTypescriptの恩恵受けるとか思想は分かっても技術力がついていかないのでできることを模索したらこうなった(´・ω・｀)

とりあえず普通のtsファイルをインポートできるのか分からなかったけど書いたらできたのでよかったし、IDE支援も受けられるようになったので捗りそう

promise、await、asyncあたりがまだしっくりきていないというか挙動の脳内イメージができていないので頑張りたい









###### メモ

* API定義はspec(specification)でdefではないらしい
* `lang='typescript'`ではなく`lang='ts'`らしい
* import時のファイル名に`.ts`はつけなくていいらしい
【Azure】イメージからVMをデプロイする際にディスク名を指定する

# 困ったこと
新規にVMを作るとディスク名が以下のようになります。
| ディスク種別 | ディスク名 |
|:-:|:-:|
| OSディスク  | \<VM名\>\_OsDisk_1\_<ランダムな文字列> |
| データディスク  | 自分で好きな名前を指定  |

しかし、自分で作ったイメージからVMをデプロイすると以下のような名前になってしまいました。

| ディスク種別 | ディスク名 |
|:-:|:-:|
| OSディスク  |  \<VM名\>\_Disk1\_<ランダムな文字列> |
| データディスク  | \<VM名\>\_Disk2\_<ランダムな文字列>  |

ディスク名を使ってスナップショットを作成するスクリプトを作成していたので、ディスクのネーミングルールが変わってしまうとスナップショットのネーミングも変わってしまいます。環境内にいろんなネーミングルールのディスクが混在しているのも管理上気持ち悪いです。なので、イメージから展開する場合でも新規VM作成時と同じようなディスク名をつける方法はないか調べました。

# 参考にしたもの

まず見つけたのが以下のやり方です。
[既存 VM の OS ディスクのリソース名を変更する](https://jpaztech.github.io/blog/vm/how-to-change-os-disk-name/)

このやり方を要約すると
1. ディスクのスナップショットをとる
1. スナップショットからディスクを作成する
1. ディスクを入れ替える

となります。確かにできなくはないのですが、イメージからVM展開しているのに展開後にわざわざディスクを作って入れ替えるのはナンセンスです…。
データディスクをアタッチしていたらそれらに対しても同じ操作をしないといけないので、手間がかかりすぎてしまいます。

他に方法はないかと探したところ、以下のやり方が見つかりました。
[VM作成時にOSディスク名を指定する方法について](https://jpaztech.github.io/blog/vm/set-os-disk-name-using-arm-template/)

このやり方はARMテンプレートをカスタムして新規VM作成する場合にディスク名を指定する方法ですが、イメージから展開する際にも応用できそうです。

# イメージから展開する際にディスク名を指定する方法

1. 通常の手順でイメージからVMをデプロイする手順を進めます。
1. デプロイする直前の「確認および作成」の画面で右下の「Automationのテンプレートをダウンロードする」を選択します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/44164379-0f9c-bb78-e122-d1702ec075c0.png)

1. 「デプロイ」を選択します。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/e5ece804-c89c-5862-bfc1-cffad6d1cb91.png)

1. 「テンプレートの編集」ボタンを押します。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/79caa469-07fe-cff3-64a1-6c9842e13236.png)

1. ARMテンプレートの下図の場所に以下の文言を追加します。ここで指定する名前がディスク名になるので、指定したい名前に置き換えてください。以下の例ではconcat関数を使って文字列の結合処理をしていますが、「"name": "testvm_OsDisk"」といった文字列で指定しても問題ありません。データディスクの数が1つの場合は文字列指定も可能ですが、2個以上存在する場合は文字列指定だと名前が重複してしまうので工夫が必要になると思います。
   ~~~json:OSディスク：「＜VM名＞_OsDisk」 というディスク名を指定
   "name": "[concat(parameters('virtualMachineName'),'_OsDisk')]",
   ~~~
   ~~~json:データディスク：「＜VM名＞_DataDisk_＜LUN番号＞」というディスク名を指定
   "name": "[concat(parameters('virtualMachineName'),'_DataDisk_',parameters('dataDisks')[copyIndex('dataDisks')].lun)]",
   ~~~
   ![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/9e73bb5a-3ae6-0df4-d2b1-510435994983.png)

1. 追記が完了したら「保存」を選択します。

1. 管理者のパスワードのみ空欄に戻ってしまっているので、再度パスワードを指定し、「確認と作成」を選択します。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/3ce44ca0-aa99-16ad-5f93-7dd0df028656.png)

1. 「作成」を選択します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/56055ed4-1054-9bdd-8b34-2b1254406994.png)

1. これで指定のディスク名でVMをデプロイすることができました。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850747/8a2eb8b6-5c4c-5239-76d1-b994dcb06ff5.png)


細かな調整がしたい、となるとやはりARMテンプレートと向き合わないといけないですね。
仮想マシンを構成するディスク

●仮想マシンを構成するディスク
・OSディスク
OSが含まれるディスク。規定サイズは127GiB(Windows)、または３０GiB(Linux)。必要に応じて4TiBまで拡張できる。
OSディスクは、Windows仮想マシンでは規定でCドライブとしてラベル付けされる。通常はOSディスクはAzure Storageに作成される。

・一時ディスク
キャッシュ用の特ベルなディスク。OSディスクに比べてより高速にアクセスできるが、非永続化領域であるため、通常はページファイルなどのキャッシュの格納先として使用される。

・データディスク
アプリけーしょにゃデータを格納するために追加が可能なオプションのディスク。
で＾たディスクはAzure Storageに作成され、Ultra Diskでは最大64TiB、それ以外の種類では最大32TiBまでサイズを指定可能。
ホットアドに対応しているため、仮想マシンを停止することなく追加と削除ができる。

●ディスクの種類
・Standard HDD
データへのアクセスが低いクリティカルではないワークロード向けのディスク。
最大IOPSは2000、最大スループットは500MB/秒

・Standard SSD
Webサーバーなどの高いIOPSが要求されないワークロードや使用頻度の低い開発やテスト向けのディスク。
最大IOPSは6000、最大スループットは750MB/秒
Standard HDDより待ち時間が短縮される。

・Premium SSD
Exchange Serverのん用環境などのエンタープライズワークロード向けのディスク。
最大IOPSは20000、最大スループットは900MB/秒

・Ultra Disk
SAP HANAやSQL Serverなどのトランザクション量の多いワークロード向けのディスク、
最大IOPSは160000、最大スループットは4000MB/秒
※Ultra DiskはOSディスクとしては使用できず、データディスクとしてのみ使用可能。
Git for Windows(Git Bash)にstarshipを導入する

# はじめに

本記事はGit for Windows(Git Bash)にstarshipを導入した際の作業備忘録です。
なお、Git Bashはすでに導入済みの環境を前提としています。

# starshipのインストール

今回のインストール用にbinディレクトリを作成しインストールします。

```bash
mkdir -p "$HOME/.local/bin"
curl -sS https://starship.rs/install.sh | sh -s -- --bin-dir "$HOME/.local/bin"
```

# インストール後環境設定

starshipをインストールすると以下のように言われます。

* **$PATHにbinディレクトリがないよ**
* **`~/.bashrc`の最終行に`eval "$(starship init bash)"`を追記してね**

なので`~/.bashrc`をこんな感じで編集してあげます。

```bash:~/.bashrc
# starship setting
export PATH=$PATH:/c/Users/username/.local/bin
eval "$(starship init bash)"
```

`source ~/.bashrc`もしくはGit Bashを再起動すると、starshipが適用されているのを確認できました。
![starshipimage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554835/6be8e84b-c736-13eb-228b-ac4d3f0c3ed3.png)

やったね！
[Part1] PHP7 サイコロゲームを作る

## 概要

PHP7を先月から学びはじめました。
まだまだ、未熟ですがご容赦ください。

## はじめに
PCとプレーヤーの二人でサイコロで対戦をします。
どちらの出目が大きいほうが勝ちになります。

## 変数を用意する

```
$pc //コンピューターの出目の変数
$player //プレーヤーの出目の変数

```
## rand()関数を使用します

サイコロの出目は1~6なので、これらの数字からランダムに数字を出力します。

```
$pc = rand(1,6);

$player = rand(1,6);

```
## 条件分岐で判定を行う

```

if($player > $pc){　　　　　　　　　　　　　　　　　//プレーヤーのゾロ目が大きい時
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターのでめは".$pc."です。\n";
    echo "判定:プレーヤーの勝ちです。";　　　　　　


}elseif($player == $pc){　　　　　　　　　　　　　//両者の出目が同じ時
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターの出目は".$pc."です。\n";
    echo "判定:引き分けです";
}else{　　　　　　　　　　　　　　　　　　　　　　　//コンピューターの出目が大きい時
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターの出目は".$pc."です。\n";
    echo "判定:コンピューターの勝ちです。";
    
}

```

## 実装

```main.php

<?php

$pc = rand(1, 6);

$player = rand(1, 6);

if($player > $pc){
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターの出目は".$pc."です。\n";
    echo "判定:プレーヤーの勝ちです。";


}
elseif($player == $pc){
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターの出目は".$pc."です。\n";
    echo "判定:引き分けです";
}
else{
    echo "プレーヤーの出目は".$player."です。\n";
    echo "コンピューターの出目は".$pc."です。\n";
    echo "判定:コンピューターの勝ちです。";
    
}

?>



```
## 結果

### 1回目

```
プレーヤーの出目は2です。
コンピューターの出目は5です。
判定:コンピューターの勝ちです。
```

### 2回目

```
プレーヤーの出目は6です。
コンピューターの出目は5です。
判定:プレーヤーの勝ちです。
```
### 3回目
```
プレーヤーの出目は4です。
コンピューターの出目は4です。
判定:引き分けです。
```
光の芯の入ったエフェクト


## これやりたい
この動画のエフェクトすごく綺麗だな。UNITYでも出来ないかなと思いました。

https://www.youtube.com/watch?v=b-I5571-CwQ

特に動画の１１分あたりの光に芯を入れるという部分がやってみたい！と思う部分でした。

## ということで、まずはParticle Systemを作ってから
まず、Start Colorにグラデーション入れたり、パラメータ調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59173/1a928a48-ed30-4ff0-471f-21d8b37c6f93.png)
Max Particlesを50000。
EmissionのRate over Timeを3000にしています。
ある程度、数を出したいので。
また、形状は、動画を参考にしてCircleです。
サイズなども調整します。

そうすると、こうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59173/c6fd5e27-d83e-a84d-df30-8f24ed6ce3f6.png)

## 次にシェーダーを作ります
光の芯を入れる部分は、適当にシェーダーを書いて、それっぽくしようというのが今回のやり方になります。

~~~LightParticle.shader
Shader "Unlit/LightParticle"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _ColorRatio("ColorRatio", Range(0,10)) = 1
        _Brightness("Brightness", Range(0,2)) = 1
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" }
        Blend SrcAlpha One
        ZWrite Off
        LOD 100

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float3 normal : NORMAL;
                fixed4 color : COLOR;
                float4 texcoords : TEXCOORD0;
                float texcoordBlend : TEXCOORD1;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                fixed4 color : COLOR;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            float _ColorRatio;
            float _Brightness;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.texcoords.xy, _MainTex);
                o.color = v.color;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);

                float bright = col.x * 0.3 + col.y * 0.58 + col.z * 0.12;   // 適当に輝度を求める
                bright = bright * _Brightness;

                col *= saturate(i.color * _ColorRatio);
                col.xyz += bright;
                return col;
            }
            ENDCG
        }
    }
}
~~~

輝度を求めて、後で足すというところが主な部分です。

_ColorRatioに１、_Brightnessに0.7ぐらいをいれると、こういう感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59173/7a6fd64c-48b1-f096-b14f-408747acc8a3.png)

良いですね！
光の芯を入れることで、本当に光っている感じがでています。

## 適当にポストエフェクト入れよう
あとは、適当にブルームなどをかけると、こういう感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59173/c836cfbc-7d04-83a8-0389-04d5f681b4ff.png)

すごくいい感じ。
（でも改めて見返してみると、元の動画と全然同じ感じにはなってない）
python subprocess

## コマンドの結果取得
```py
import subprocess, sys

cp = subprocess.run(['ls', '-1'], encoding='utf-8', stdout=subprocess.PIPE)
print('ファイル名：' + cp.stdout )
print('ファイル数：' + str(len(cp.stdout.splitlines())))
```

## ファイルへ書き込み
```py
with open('out.txt', 'w') as fp:
  subprocess.run(['ls', '-1'], stdout=fp)
```
【DVA対策】EC2フリートとスポットフリートについて

# はじめに
EC2購入モデルとして「フリート」というモデルがあるらしくまったくわけらからんので試験対策として超ざっくりまとめる

# おさらい
 - オンデマンドインスタンス：普通のインスタンス
 - スポットインスタンス　　：中断が発生する可能性があるけどめちゃ安い
　　
# スポットフリート
 - 上限価格とインスタンスタイプを設定しておくことで一番安いスポットインスタンスを任意の個数を自動で起動出来る仕組み
 - 簡単に言うとめちゃめちゃ安くなるけど、サーバーが落ちる危険性もあり

# EC2フリート
 - スポットフリートのオンデマンドインスタンスも含めて管理できる仕組み
 　オンデマンドインスタンス：10個 スポットインスタンス：5個 といった設定ができる
 - 簡単に言うとめちゃ安くなるけど、サーバーが落ちる危険性もちょっとあり
　
# まとめ
　- フリートを使うとオンデマンドインスタンスで運用するより、安くなるけど予期しない部分でスポットが落ちて、
　  サーバー負荷が上がったり、最悪落ちたりするある意味諸刃の剣でもあるモデルという理解で自分の中で納得した
gitのmerge.conflictStyleに新しく追加されたzdiff3について見ていく

### 概要
git 2.35で新しく `merge.conflictStyle`に`zdiff3`という設定が誕生したそうなので、どう変わったのかを見てみよう。
前提として意図的にコンフリクトするような環境は事前に作ってある
東京23区一覧を書いていくMarkdownを作った
![スクリーンショット 0004-11-08 0.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155341/7d493ef0-2041-482c-38ea-de566e852174.png)


### まずはデフォルトの`merge`
```sh
# 明示的に指定するならこうだが、デフォルトがこの挙動だ
❯ git config --global merge.conflictStyle merge

❯ git merge adachi-ku
Auto-merging tokyo-23ku.md
CONFLICT (content): Merge conflict in tokyo-23ku.md
Automatic merge failed; fix conflicts and then commit the result.

❯ git diff
diff --cc tokyo-23ku.md
index 34042c5,80b4120..0000000
--- a/tokyo-23ku.md
+++ b/tokyo-23ku.md
@@@ -1,4 -1,4 +1,8 @@@
  * Chiyoda-ku
++<<<<<<< HEAD
 +* Meguro-ku
++=======
+ * Adachi-ku
++>>>>>>> adachi-ku
  * Shinjuku-ku
  * Minatoku-ku
```

当たり前のように見慣れた結果だｗ


### 続いて`diff3`
```sh
# まずは設定
❯ git config --global merge.conflictStyle diff3

❯ git merge adachi-ku
Auto-merging tokyo-23ku.md
CONFLICT (content): Merge conflict in tokyo-23ku.md
Automatic merge failed; fix conflicts and then commit the result.

❯ git diff
diff --cc tokyo-23ku.md
index 34042c5,80b4120..0000000
--- a/tokyo-23ku.md
+++ b/tokyo-23ku.md
@@@ -1,4 -1,4 +1,10 @@@
  * Chiyoda-ku
++<<<<<<< HEAD
 +* Meguro-ku
 +* Shinjuku-ku
++||||||| 6ac52f7
++=======
+ * Adachi-ku
+ * Shinjuku-ku
++>>>>>>> adachi-ku
  * Minatoku-ku
```

個人的には見慣れている `merge` が圧倒的に見やすいｗｗｗ
`diff3`はパイプが入るのと、マージ元になる枝分かれ前のコミットID:`6ac52f7`が出てくるのが特徴的だ

### 本日のメイン `zdiff3`

```sh
# まずは設定
❯ git config --global merge.conflictStyle zdiff3

❯ git merge adachi-ku
Auto-merging tokyo-23ku.md
CONFLICT (content): Merge conflict in tokyo-23ku.md
Automatic merge failed; fix conflicts and then commit the result.

❯ git diff
diff --cc tokyo-23ku.md
index 34042c5,80b4120..0000000
--- a/tokyo-23ku.md
+++ b/tokyo-23ku.md
@@@ -1,4 -1,4 +1,9 @@@
  * Chiyoda-ku
++<<<<<<< HEAD
 +* Meguro-ku
++||||||| 6ac52f7
++=======
+ * Adachi-ku
++>>>>>>> adachi-ku
  * Shinjuku-ku
  * Minatoku-ku
```

`diff3`と`zdiff3`の違いが分かるだろうか？
`zdiff3`では`Shinjuku-ku`の情報がコンフリクトしていない、というのが大きな特徴だ。

### 公式ドキュメントによる説明
https://git-scm.com/docs/git-config#Documentation/git-config.txt-mergeconflictStyle
> マージ時に競合したハンクが作業ツリーファイルに書き出されるスタイルを指定します。デフォルトは "merge" で、<<<<<衝突マーカー、一方が行った変更、========マーカー、もう一方が行った変更、そして >>>>> マーカーが表示されます。別のスタイルである "diff3" は、====== マーカの前に |||| マーカと元のテキストを追加します。マージ」スタイルは、元のテキストを除外するため、また、行のサブセットが両側で一致した場合、それらがちょうど競合領域から引き出されるため、diff3よりも小さい競合領域を生成する傾向がある。別のスタイルである "zdiff3 "はdiff3に似ていますが、両側で一致する行が競合領域の最初か最後の近くに現れると、競合領域から削除されます。

なるほど、確かに今回の例だと`Shinjuku-ku`の情報だけがコンフリクトから外れたのも納得だ。
個人的には`merge.conflictStyle zdiff3`は普段から設定として含んでしまっていいかなと思いました！

ではまた！
【Angular】練習アプリ作成日記（ソースコードの管理する環境を作る）

[前記事](https://qiita.com/lacky-lacky/items/e8ea6cee66e806cf15d3)

# 環境構築をしてみます
前回、どんなものを作りたいのかというのをまとめました。
今回はそれを作成するにあたって準備していきたいと思います。

# ソースコードを保存～Gitを入れてみる～
案件それぞれだと思いますが、ソースコードを保存するということで
Gitを入れてみようと思います。
以下のサイトからGitをダウンロードすることができます。
[公式サイト](https://gitforwindows.org/)
ダウンロード後はインストールをします。
色々と聞かれましたが、筆者は何も考えずにNEXTを押しまくって
とりあえず、インストールしました:smiley:

# GitHubへ登録
作成したソースコードを公開したい場合はGitHubへ
登録してもいいかもしれません。
筆者はこれに登録しています。

[GitHub公式サイト](https://github.com/)

# ソースコード管理ツールについて
Gitへ登録したら次にプロジェクトとGitを連携しなければなりません。
例えば、以下のフォルダを連携させたいとしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/fa020c0d-f6eb-8daf-fe59-10b9285a5d11.png)
※フォルダの中にはREADME.mdのようなものを入れておいてください。

GitHubのページにNewボタンがありますので、それをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/76ac94ae-bcb8-8fa0-0563-a7f536b3737f.png)

必要最低限の入力をする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/70f0f4de-25b4-48ad-248b-d45881e42aa8.png)

連携したいフォルダ内でGitbashを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/20dcdf84-383a-92c0-a812-46e1b562e0f2.png)

作りたてのプロジェクトのところに以下のコマンドがメモされていますので、
それをGitBushで打ってください。

```
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/作成したGITのID/practiceStu.git
git push -u origin main
```
コマンド入力後、作成したプロジェクトは以下のような感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/2e50c710-5a53-06c5-a4f8-94c032842464.png)

では、これをツールで連携させましょう。
先ほどの画面のコードボタンにURLがありますので、コピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/620b886f-6ad9-f211-a3a1-5a00faf7f628.png)

ここから先、どのようなツールを使うのかは好みになります。
筆者はVSCodeのこれを使いたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/bef7de16-2fc7-fbcb-d5c4-54d8cff21d87.png)

Git Cloneすると、以下のように連携されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1991436/66342d27-411e-1a1b-9b3d-24e05b5e8266.png)

とりあえず、これでソースコードの管理する環境が整いました。

# まとめ
ソースコードの管理する環境を作りました。
簡易に書いていますが、これでとりあえず、それっぽい雰囲気に
なったのではないかと思います。

という訳で、今回はここまでにしたいと思います。
次回はデータベース環境の選定をしたいと思います。ではでは～:raised_hand: