OmniAICreator/Qiita-1.07M huggingface dataset:
スーツケースと鍵の物語：ビットコインマイニングの詳細な探求

# ブロックチェーン（ビットコイン）マイニングについて

以下にブロックチェーンのマイニングというプロセスについて詳しく説明しました。

まずは、ブロックチェーンの概念を理解するために、一つのアナロジーを考えてみましょう。ある大きな部屋を想像してみてください。その部屋の中にはたくさんのスーツケースがあり、それぞれのスーツケースはチェーンでつながっています。そして、それぞれのスーツケースを開けるための鍵が必要です。このイメージこそがブロックチェーンです。スーツケースはブロックを、鍵はそれぞれのブロックのハッシュ値を、そしてチェーンは全体のブロックチェーンを表しています。

では、これらの「スーツケース」（ブロック）をつなげる鍵（ハッシュ値）を見つけるプロセス、つまり「マイニング」について詳しく見てみましょう。

## ビットコインマイニングのステップ

イメージ図
![スクリーンショット 2023-06-19 午後10.45.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479750/5194b41e-7f95-4dfa-82a5-8a1d74d4103b.png)


### 1. トランザクションの収集

ビットコインの送金が行われると、そのトランザクションはネットワークに公開され、未確認のトランザクションとして取り扱われます。例えば、AliceがBobに1ビットコインを送るとします。

### 2. ブロックの作成

マイナーは未確認のトランザクションを集め、新たなブロックを作成します。この新たなブロックには、以前のブロックのハッシュ値、タイムスタンプ、トランザクションのリストが含まれます。

### 3. ハッシュの計算

ブロックのデータ（以前のブロックのハッシュ、新たなトランザクション、タイムスタンプ）と、ランダムに選ばれたナンスがハッシュ関数に入力され、ハッシュ値が計算されます。初期のナンスは通常ゼロから始め、必要に応じて増やされます。
### 4. ターゲット値の比較

計算されたハッシュ値がターゲット値以下であるかどうかを確認します。ハッシュ値がターゲット値以下であれば、マイニングは成功となります。そうでなければ、ナ

ンスを1増やし（または他の方法で変更し）、新たなハッシュ値を計算します。

### 5. ブロック生成間隔の調整とその理由
ビットコインでは、新たなブロックがおよそ10分ごとに生成されるように設計されています。これはビットコインネットワークの安全性と効率性を保つための重要なバランスを提供します。

1. セキュリティ: ブロック生成時間が長すぎると、トランザクションの確認時間が長くなります。一方、ブロック生成時間が短すぎると、ブロックがネットワーク全体に広がる前に新たなブロックが生成される可能性があり、これは分岐（ブロックが複数の有効な続き方を持つ状態）を引き起こす可能性があります。これはネットワークの安全性を低下させる可能性があります。

2. 効率性: ブロック生成時間が適切であれば、マイナーは新たなブロックを迅速に探し出すことができ、これによりネットワーク全体の処理能力が向上します。ブロック生成時間が短いと、より多くのブロックが生成され、より多くのトランザクションがブロックチェーンに追加されるため、トランザクションの承認時間が短くなります。しかし、あまりにも頻繁にブロックが生成されると、ネットワーク全体が一貫した状態を維持するのが難しくなり、セキュリティの問題が生じる可能性があります。

ビットコインのマイニングパワーは、マイナーが1秒間に行うハッシュ関数の試行回数を表しています。高いマイニングパワーは、ブロックのマイニング速度を向上させ、ブロック報酬を得る確率を高めます。ただし、これは一方で、マイニングの難易度も上がることを意味します。難易度は、マイナーがブロックをマイニングするために必要なハッシュ関数の試行回数を制御する値です。マイニングパワーが増加すると、難易度も増加し、その結果、ブロックの生成速度が一定（おおよそ10分ごと）に保たれます。

10分という間隔は、これらの要因のバランスを取るための妥協点として設定されました。ネットワークのハッシュレート（マイニングのパワー）が変化すると、この間隔も自動的に調整されます。つまり、ネットワークの全体的なマイニングパワーが増えると、難易度（ターゲット値）も上がり、ブロックの生成速度が10分に近づくように調整されます。このメカニズムにより、ビットコインネットワークは常に均衡を保つように設計されています。

参考文献:
Antonopoulos, A. M., & Wood, G. (2018). Mastering Ethereum: Building Smart Contracts and Dapps. O'Reilly Media.

以上がビットコインマイニングの基本的なプロセスとその重要な要素についてのチュートリアルです。このプロセスは全てのマイナーが同時に行うため、大規模な競争となります。そしてその結果、最も高速に正しいハッシュ値を見つけたマイナーが報酬を得ることができます。これらのコンセプトは、ビットコインだけでなく、他の多くのブロックチェーンシステムにも共通しています。
Eclips で自動整形をする

業務の都合上、使い慣れていないEditorを使うことありますよね。
そんな時に設定したいことを調べても結局よく分からずに諦めることが良くあります。
今回はEclipsの自動整形の方法を画面キャプチャをもとに説明します。
いろいろ方法はあると思いますが、ショートカットキーが一番おすすめです。

・保存時に自動で整形する
プロジェクト＞プロパティ＞Javaエディター＞保存アクション＞プロジェクト固有の設定を可能にするにチェック
　＞ソースコードのフォーマット＞適用

![スクリーンショット 2023-06-19 222040.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484672/f1d534c2-5e1c-a053-8b7f-fc02ed0e26de.png)
![スクリーンショット 2023-05-02 093926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484672/83754f64-8e6f-5421-0f3b-d786fa3dcca3.png)
これで保存ボタンを押したときに自動で整形してくれます。

・ショートカットキーで整形

Control + Shift + F

個人的にはショートカットキーがおすすめ
（改訂作業など余分な差分が出ると面倒なので必要ない時は整形してほしくないこともあるのです。）
M5AtomS3でHello World! with mac

## 本記事について

M5Stackの開発手法は Arduino や UIFlow, PlatformIO等複数ある。
2023/06時点でM5AtomS3の体系的な本はなく、どうやって始めるべきか分からなかった。

とりあえずHelloWorldしたいと思い、
[Visual Studio Codeを用いたM5Unifiedの導入方法](https://docs.m5stack.com/ja/quick_start/m5unified/intro_vscode)
をやってみたところ、以下の図のようにHelloWorldすることができた。

![IMG_5436.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/a4f19e5b-e657-470a-3e79-b4c8fa503127.jpeg)

多少戸惑うところもあったため、手順ごとに実践したメモを残す。

## 環境・準備するもの

MacBook Air M2 
macOS 13.3
AtomS3
mac と Atom を繋げるための type C ケーブル
VSCode (記事のVSCodeのインストールは省略)

## PlatformIO のインストール

参照記事の通りだが、インストールに5分程度かかった気がする(うろ覚え)

## プロジェクト作成〜ビルド
### プロジェクト作成
参照記事通り

#### プロジェクトウィザードへの入力

Use default locationのはてなマークは見ておいた方がいい。
デフォルトでは以下のパスに入力した Name でプロジェクトが作られる。

`~/Documents/PlatformIO/Projects`

Frameworkは最初何も選択できない。しかし、Board で AtomS3 を選択すると Framework から Arduino を選択できるようになる。

事前に Arduino IDE インストールしなくてもいいのかな？と思っていたが必要なかった。

で、Finish を押すとプロジェクトが作られるのだが、5分程度かかった。
(初回だったから何かインストールしてたのかもしれない)

途中で VSCode クリックしたら進行中が消えて何の表示もされなかった。
プロジェクトフォルダは作られていたため、そのフォルダに移動して VSCode を開き直した。

開く時も5分くらいかかった。(ここも何かインストールしてたような感じがある)

VSCodeの出力は以下のようになっていて、一番上の
`Resolving m5stack-atoms3 dependencies...`に時間がかかった。

```
Resolving m5stack-atoms3 dependencies...
Already up-to-date.
Updating metadata for the vscode IDE...
Project has been successfully updated!
```

待てば終わるので放置をすること。

## ライブラリをプロジェクトに追加する
参照記事通り。ライブラリのインストールはわりとすぐ終わったと思う

## プログラムをビルドする

当たり前といえばそうだが、書き込む前に AtomS3 に type C　ケーブルで mac と AtomS3 を接続する必要がある。

繋ぐと、 AtomS3 の画面に 「Wi-fi 接続するためにタッチしてね(うろ覚え)」のようなメッセージが表示されるが無視する。

ビルド・書き込みはすぐおわる。

AtomS3 の画面が小さいため 「Hello World!」ではなく「Hello W」になっているのが趣がある。

## Serialの確認

PlatformIO の Serial Monitor でデータが送られてくることが確認できなかった。
USBSerialを使用したらできた。

![スクリーンショット_2023-06-23_21_33_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/350f5437-6898-e495-f122-f364c7f76890.png)

```main.cpp
#include <M5Unified.h> // M5Unifiedライブラリをプログラムで使用可能にします。

// グローバル変数（プログラム全体で使用する変数の定義をします。）
uint32_t count;


// setup関数は起動時に一度だけ実行されます。
// 主に初期化処理を記述します。
void setup() {

  auto cfg = M5.config();       // M5Stack初期設定用の構造体を代入
  // configを設定する場合はここで設定
  // 例
  // cfg.external_spk = true;

  M5.begin(cfg);                           // M5デバイスの初期化
  USBSerial.begin(115200);                 // シリアルモニターの初期化
  M5.Display.setTextSize(3);               // テキストサイズを変更
  M5.Display.print("Hello World!!");       // 画面にHello World!!と1行表示
  USBSerial.println("Hello World!!");         // シリアルモニターにHello World!!と1行表示
  count = 0;                               // countを初期化

}

// loop関数は起動している間ずっと繰り返し実行されます。
// センサーから値を取得したり、画面を書き換える動作等をおこないます。
void loop() {

  M5.Display.setCursor(0, 20);              // 文字の描画座標（カーソル位置）を設定
  M5.Display.printf("COUNT: %d\n", count);  // countを画面に表示
  USBSerial.printf("COUNT: %d\n", count);      // countをシリアルに表示
  count++;                                  // countを1増やす
  delay(1000);                              // 1秒待つ

}

```

参考

https://lang-ship.com/blog/work/m5stack-atoms3-2/
Leetcode 1732. Find the Highest Altitude

https://leetcode.com/problems/find-the-highest-altitude/description/

# 難易度
- Easy 


```java
class Solution {
    public int largestAltitude(int[] gain) {
     int[] dp = new int[gain.length + 1];
        int index = 0;
        dp[index] = 0;

        index++;
        int result = 0;

        for (int i : gain) {
            dp[index] = dp[index - 1] + i;
            result = Math.max(result, dp[index]);
            index++;
        }
        return result;
    }
}
```
[aws cli / ECS] TaskDefinition is inactive と書かれたエラーが発生した時の対処

# 症状

`aws ecs run-task`を実行したときに、以下のようなエラーが発生

```bash
$ aws ecs run-task --cluster "cluster-name" --task-definition "arn:aws:ecs:us-east-1:111122223333:task-definition/task-name:12" --network-configuration --launch-type FARGATE
An error occurred (InvalidParameterException) when calling the RunTask operation: TaskDefinition is inactive
```

先週まで動いてたんですけど...( ˘·ω·˘ ).。oஇ


# 対策

## 1. タスク定義の状態を確認

`TaskDefinition is inactive`がやっぱり怪しい。

ということで、ECSのタスク定義を見にいきましょう。

![スクリーンショット 2023-06-19 19.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327407/66b8582b-be6c-87bb-9315-74d7f4c48257.png)

上記「タスク定義」をクリックすると、たくさんタスク定義(TaskDefinition)が出てきますね。

その中から、今回使用しようとしているタスク定義の詳細ページを選択してください。
すると、私が使用しようとしていたタスク定義の `リビジョン` がなくなっていました。

どうやら他のメンバーに削除（inactive化）されていたっぽいです。。。


## 2. activeなタスク定義のリビジョン番号を取得

タスク定義を改めて作成するか、既に存在するタスク定義を確認するかして、有効なリビジョン番号を取得しましょう。( ..)φメモメモ


## 3. コマンド修正して再実行

```diff_shell
# リビジョン番号だけ変えたらうまく行ったよ( *¯ ꒳¯*)✨
- $ aws ecs run-task --cluster "cluster-name" --task-definition "arn:aws:ecs:us-east-1:111122223333:task-definition/task-name:12" --network-configuration --launch-type FARGATE
+ $ aws ecs run-task --cluster "cluster-name" --task-definition "arn:aws:ecs:us-east-1:111122223333:task-definition/task-name:13" --network-configuration --launch-type FARGATE
```
GASでスプレッドシートからPDFを作成する方法

```createPDF.gs
/**
 * 現在開いているシートよりPDFを出力
 */
function createPDF() {

  // アクティブなスプレッドシート
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();

  // スプレッドシートID
  const spreadsheetId = spreadsheet.getId();

  // アクティブなシートID
  const gid = spreadsheet.getActiveSheet().getSheetId();

  // スプレッドシートのあるフォルダ
  const folder = DriveApp.getFileById(spreadsheetId).getParents().next();

  // 出力するPDFファイル名(シート名_20230619.pdf)
  const fileName = `${spreadsheet.getSheetName()}_${Utilities.formatDate(new Date(), 'JST', 'yyyyMMdd')}.pdf`;
  
  // 出力オプション
  var opts = {
    'exportFormat' : 'pdf',    // ファイル形式の指定 （pdf / csv / xls / xlsx）
    'format'       : 'pdf',    // ファイル形式の指定 （pdf / csv / xls / xlsx）
    'size'         : 'A4',     // 用紙サイズの指定 （legal / letter / A4）
    'portrait'     : 'true',   // 用紙の向き （true : 縦向き / false : 横向き）
    'fitw'         : 'true',   // 幅を用紙に合わせるか （true : 合わせる / false : 合わせない）
    'sheetnames'   : 'false',  // シート名をPDF上部に表示するか （true : 表示する / false : 表示しない）
    'printtitle'   : 'false',  // スプレッドシート名をPDF上部に表示するか （true : 表示する / false : 表示しない）
    'pagenumbers'  : 'false',  // ページ番号の有無 （true : 表示する / false : 表示しない）
    'gridlines'    : 'false',  // グリッドラインの表示有無 （true : 表示する / false : 表示しない）
    'fzr'          : 'true',   // 固定行の表示有無 （true : 表示する / false : 表示しない）
    'top_margin'   : 0.8,
    'bottom_margin': 0.8,
    'left_margin'  : 0.7,
    'right_margin' : 0.7,
  };

  let urlExt = [];
  
  // オプション名と値を「=」で繋げて配列に格納
  for( optName in opts ){
    urlExt.push( optName + '=' + opts[optName] );
  }

  // 各要素を「&」で繋げる
  const options = urlExt.join('&');

  // API使用のためのOAuth認証用トークン
  var token = ScriptApp.getOAuthToken();

  // URLの組み立て
  const url = `https://docs.google.com/spreadsheets/d/${spreadsheetId}/export?gid=${gid}&${options}`;

  // PDF作成
  var response = UrlFetchApp.fetch(
    url, {
      headers: {'Authorization': 'Bearer ' +  token}
    }
  );

  // Blob を作成する
  var blob = response.getBlob().setName(fileName);

  //　PDFを指定したフォルダに保存
  var file = folder.createFile(blob);

  return file.getUrl();
}
`
```
長文英語を翻訳し、要約の粒度を自由に変更出来るツール

## 目的
英語の長文を読むとき、とても苦労してしまう。自分が読むときは一番最初に全体の要約を知りたい。その次はもう少し細かくした要約。その次はもっともっと細かい要約という様にどんどん細かくして要約が欲しい。

そこで今回は全体をn分割したツールの作成を行う

## ツールの挙動
- M行の文章があった時
1. M行をN分割する
1. N分割した文章を翻訳する
1. 翻訳した結果を要約する。
1. 要約した内容を合併する

## 完成
全体を2分割した要約が欲しい場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/3b215e48-9a99-c4e8-2f24-65106dd4b003.png)

要約結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2738475/92b0bef9-6e41-c9f4-e760-ea448b84b5c7.png)



## コード
```python
from deep_translator import GoogleTranslator
from pysummarization.nlpbase.auto_abstractor import AutoAbstractor
from pysummarization.tokenizabledoc.mecab_tokenizer import MeCabTokenizer
from pysummarization.abstractabledoc.top_n_rank_abstractor import TopNRankAbstractor
import pymsteams, re, time, math, sys

args = sys.argv
b=args[1]
b=int(b)

translist=[]
translists=[]


f = open('text2.txt', 'r')
intext = f.read()
f.close()


split_text = intext.split('. ') 
print(len(split_text))


n = math.ceil(len(split_text) / b)
result = [ split_text[idx: idx + n] for idx in range(0,len(split_text), n)] 

for splitsaki in result:
    documentlist=[]
    for sourcetext in splitsaki:
        sourcetext = sourcetext.replace('\n+', ' ')
        sourcetext = re.sub('\s+', ' ', sourcetext)

        try:
            document = GoogleTranslator(source='auto',target='ja').translate(sourcetext)
            documentlist.append(document)
        except:
            pass

    documents=''.join(documentlist)
    auto_abstractor = AutoAbstractor()
    auto_abstractor.tokenizable_doc = MeCabTokenizer()
    auto_abstractor.delimiter_list = ["。", "\n"]
    abstractable_doc = TopNRankAbstractor()
    result_dict = auto_abstractor.summarize(documents, abstractable_doc)
    for x in result_dict["summarize_result"]:
        translist.append(x)
        print(x)


transresult = ''.join(translist)
print(transresult)


f = open('youyaku.txt', 'x')
f.write(transresult)
```
WSL2ではWindowsのシステムフォルダを使わない方が身のためだ

## はじめに

このドキュメントでは、Windows上でLinux環境を動かすためのWSL2でハマったポイント(注意点)について解説します。
ただ自分のような初心者でも理解しやすいように、いきなり注意点に関して説明するのではなく、まずはWSL2に関して基本的な内容から説明していきます。

「そんなこといいからさっさと表題について教えてくれ」という方は、真っ先に[ハマったポイントと注意点](#ハマったポイントと注意点)にどうぞ。

## WSLとは？

WSLはWindows Subsystem for Linuxの略で、Windows上でLinuxの環境を動かすことができる機能です。

## WSL2とその特徴

WSL2は、WSLのバージョン2で、いくつかの重要な改善が行われています。

- 完全なLinuxカーネルを使用
- 完全なシステムコール互換性

## WSL2のインストール方法

1. PowerShell (または Windows コマンド プロンプト)を管理者モードで開きます
1. `wsl --install` コマンドを入力します
1. 再起動しましょう
1. PowerShell/コマンドプロンプトで`wsl`コマンド入力すればもうそこはWSL2の世界です
    - コマンドプロンプトを起動せずともタスクバーでWSLと検索しても出てくるかと思うのでそちらでも大丈夫です

## WSL2を活用する

WSL2を活用して、Linuxコマンドラインツール、スクリプト、アプリケーションの開発、テストなどを行うことができます。
ビバLinux ！！

## ハマったポイントと注意点

「よーし、これでLinuxが動かせるぞ〜。まずは`yarn install`コマンド実行してhogehogeプロジェクトの依存関係をインストールしよう！」

```bash
User /mnt/c/hogehoge  $ yarn
```

「。。。遅い」

そうなんです。コマンド実行にめちゃくちゃ時間がかかるんです。

これはなぜかというと、WSL2とWindowsのファイルシステム間での通信が遅いためです。

実際に[Microsoftのドキュメント](https://learn.microsoft.com/ja-jp/windows/wsl/compare-versions#comparing-wsl-1-and-wsl-2)でも WSL1 と WSL2 を比較した際に、 WSL2 が劣っている点として「OS ファイル システム間でのパフォーマンス」を挙げているのです。

なのでWSL2でWindowsのファイルシステムを`/mnt`下で操作するときは、パフォーマンスが落ちることがあります。

ですので可能な限り、Linux環境内でファイルを操作することをお勧めします。

```bash
User /mnt/c/hogehoge  $ cd
User ~  $ git clone hogeohge
User ~  $ cd hogehoge
User ~/hogehoge $ yarn
```

このようにLinux環境内に移動してファイル操作(コマンド実行)してみてください。
実際に比べてみると一目瞭然かと思います。

## まとめ

先にも述べたように、`/mnt`下でのファイル操作はパフォーマンスの面で若干遅くなることがあるため、注意が必要です。
しかしながら、それ以外の面においては、[Linux GUI アプリを実行する](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gui-apps)こともできますし、
完全なLinuxカーネルをWindows上で動作させることが出来るので、
WSL2は(階層にさえ注意すれば)開発者にとって強い味方になってくれるはずです。
ARC162回答メモ

0.はじめに
　昨日は調子が悪かったので気を取り直してレギュラーコンテスト。
　A問題は解けましたが、B以降は解き方の考えがまとまりませんでした・・・。
　レートは微増でした。


1.A - Ekiden Race
　問題名が駅伝となっていたので、問題がすんなり理解できませんでした・・・。
　駅伝は忘れて取り組みました。
　
　考え方
　　往路順位が最終順位より高いかつ、往路順位が自分以下な人に袋順位で抜かされていない人が
　　区間賞を取っている可能性がある。
　　注意点としては、以下のようなケースの場合
　　2　1　4　3
　　最終1位の人は、最終2位の人を抜かしているので
　　区間賞の可能性があるが、最終3位の人も、1位の人に抜かれていないので
　　区間賞の可能性があるということ。
　　
　実装
　　以下ケースごとの実装内容
　　変数定義
　　　N：ケースごとの人数(入力値)
　　　P：順位リスト(入力値)
　　　Q：往路が下位の人に、復路で抜かれていないかを保持するリスト(初期値0)
　　　　 0(未チェック・抜かれていない)　1：抜かれたorチェック済
　　　chk：復路順位チェック用変数(初期値1)
　　　flg：抜かした人用ループフラグ(初期値0)
　　　ans：回答用変数(初期値0)
　　　i：抜かした人用ループ変数
　　　
　　　Q[1]に1(チェック済)をセット
　　　
　　以下flgが0の間繰り返す
　　　-chk位の人が往路どの順位だったかを探す＆抜かした人を抜かれた状態にする
　　　以下P[i]がchkと異なる間繰り返す
　　　　Q[P[i]に1(抜かれた)をセット
　　　　　→最初のループ(1位の人を探すループ)時を例にとると
　　　　　　最終順位1位より前にいる→往路で1位の人より先にいた→復路で抜かれた
　　　　iに1を加算
　　　最終順位1の人は区間賞の可能性があるので、ansに1加算
　　　
　　　-次に探す順位を求める処理
　　　j：chk+1↑で調べた順位の次の順位をセット
　　　iに1を加算(次のループ時には今まで調べた往路順位移行から調べればよいため)
　　　flg2に0をセット：2個目のループ制御用
　　　以下、flg2が0の間実行
　　　　jがNを超えた場合（全員チェックを終えた場合）
　　　　　flg2に1をセット
　　　　Q[j]が0（未チェック＆抜かされてない）の時
　　　　　Q[j]に1をセット→チェック対象とする
　　　　　flg2に1をセット
　　　　　chkにjをセット
　　　　上記以外の場合
　　　　　jに1を加算
　　　　　　
　　　-1週目のループ終了判定
　　　　jがNを超えた場合
　　　　　flgに1をセット
　　　　　
　　最後にansを出力して終了


　https://atcoder.jp/contests/arc162/submissions/42722070

以上
【SwiftUI】TabViewに通知バッジを付ける

# はじめに
iOS15からTabViewにバッジを付けられるようになりました。

# サンプルアプリ
![simulator_screenshot_192A3CD9-4C2B-41E0-827D-07398BD5BA87.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/0db03b31-97e8-35f3-60a4-52c095d561a7.png)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            Text("1st")
                .tabItem {
                    Label("1st", systemImage: "1.circle")
                }
                .badge(30)
            
            Text("2nd")
                .tabItem {
                    Label("2nd", systemImage: "2.circle")
                }
                .badge(100)
            
            Text("3rd")
                .tabItem {
                    Label("3rd", systemImage: "3.circle")
                }
                .badge(50)
        }
    }
}
```

# おわり
iOS14以前までこれができないのきついですね
まぁでももうiOS14は切ってもいいかもしれないですね
UE5.1/5.2でForDistribution=TrueだとDevelopmentを指定してもShippingでパッケージされる

# エンジンバージョン
Unreal Engine 5.1.1
Unreal Engine 5.2.0
(UE4.27.2では発生せず）

全てVRテンプレートにて確認

# はじめに
タイトルがすべてです。

DefaultGame.iniでForDistribution=Falseに変更、もしくはForDistributionの記述自体を削除すると、UEエディタからDevelopmentでパッケージングできるようになりました。

エディタからだと、プロジェクト設定＞パッケージ化＞プロジェクト＞配布用のチェックを外します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668217/8228047f-ec94-375f-d256-4110c4409223.png)

（設定値の名称を考えれば当たり前といえば当たり前ではあるのかなといった印象ですが、UE4.27と挙動が違うのでハマりました。。）

以上

下記は暇な人向けのおまけです。

# おまけ
## ForDistribution=True のままでDevelopmentでパッケージングする回避策

下記ドキュメントの「コマンドライン」の章のように、CLIでのパッケージングであればForDistribution=True のままでもDevelopmentでパッケージングできました。

https://docs.unrealengine.com/5.2/ja/build-operations-cooking-packaging-deploying-and-running-projects-in-unreal-engine/

ただし、この方法ではデバッグ用のpdbファイルが生成されないみたいです。（要検証）
*23.6.19追記：エディターからパッケージングしても内部的にはコマンドが実行されているらしいので、私がオプションの値を間違えたせいでpdbファイルが生成されなかったものと思われます。（要検証）*

これまではこちらの方法でDevelopmentパッケージングしてお茶を濁していましたが、クラッシュ時のスタックトレースがうまくいかなかったので重い腰を上げて調査しました。。

## Oculusアプリが起動していると、パッケージアプリへのVSデバッガのアタッチがうまくいかない
（わざわざ別記事を作るほどではないと思ったので、ついでにここに記録しておきます。。）

環境
Windows11
Visual Studio2022
Meta Quest2のPC Link
UE5.2.0のVRテンプレート

上記方法にて、UE5.2.0でDevelopmentパッケージングしたアプリのpdbファイルが生成できたので、[こちらの記事](https://qiita.com/donbutsu17/items/77cdd27edad446b7195e)のように`-WaitForDebugger`を起動時引数で渡してVisual Studioでプロセスアタッチしました。

しかしアタッチ後もアプリケーションのウィンドウは開かれませんでした。
この状態でPC Linkに使用しているOculusアプリのウィンドウを閉じると、アプリケーションのウィンドウが開きました。

また、初めからOculusアプリを起動していない状態（PC Linkをしていない状態）でプロセスアタッチすると、問題なくアプリケーションのウィンドウが開きました。

このように、私の環境ではPC Linkをしたままではアプリの起動直後からデバッガをアタッチすることはできませんでした。
もし解決方法をご存じの方がいらっしゃれば、教えてください。
（現状この問題で困っているわけではないので、追加調査はせずに記録だけ残しておきます。）
Jetson Orin NanoでVNC環境を構築する

# はじめに
Jetson Orin Nano 開発者キットに、VNC環境を構築した手順を記載しています。

# 前提
・Jetson Orin Nano 8GB + JetPack 5.1.1
・VinoというVNCサーバを使用しています。
・Jetson Orin Nanoにディスプレイが接続されている必要があります。
　→Displayportのダミープラグを接続すると、モニターなしで画面共有できます。

# 手順
## VNCの設定
　設定方法自体は、デスクトップ上にある、nv_l4t_readme\README-vnc.txtの通りなのですが、補足含めてざっくりと下記に記載します。

**1.ログイン設定を、自動ログインに設定する**
　初期設定時に自動ログインに選択していれば設定不要です。そうでなければ、以下のファイルにある、AutomaticLoginEnableと、AutomaticLoginのコメントアウトを解除して、user1のところを、ログインユーザー名にします。

/etc/gdm3/custom.conf
```
#  AutomaticLoginEnable = true
#  AutomaticLogin = user1
```

**2.VNCサーバをログイン時に自動起動にする**
下記を実行します。
```
mkdir -p ~/.config/autostart
cp /usr/share/applications/vino-server.desktop ~/.config/autostart
```

**3.VNCサーバの設定をする**
下記を実行します。
```
gsettings set org.gnome.Vino prompt-enabled false
gsettings set org.gnome.Vino require-encryption false
```

**4.VNCサーバの認証方法とパスワードを設定する**
　下記を実行します。thepasswordのところは、好きなパスワードを入れてください。さもなければ、thepasswordという考えられない程に脆弱なパスワード設定となってしまいます。
```
gsettings set org.gnome.Vino authentication-methods "['vnc']"
gsettings set org.gnome.Vino vnc-password $(echo -n 'thepassword'|base64)
```
**5.画面解像度を設定する**
　以下のファイルに、下記を追記してください。virtual 1920 1080のところは、好きな解像度に変更してください。

/etc/X11/xorg.conf
```
Section "Screen"
   Identifier    "Default Screen"
   Monitor       "Configured Monitor"
   Device        "Tegra0"
   SubSection "Display"
       Depth    24
       Virtual 1920 1080
   EndSubSection
EndSection
```
## 2.ディスプレイを接続せずにVNCで接続する方法
　ディスプレイに接続せずにVNC接続しようとしても、とてもNVIDAな壁紙画像が表示されるだけで、GNOMEのディスクトップ画面は表示されません。

　Displayportのダミープラグを、開発キットのDisplayportに接続することで、ディスプレイ無しでもGNOMEのディスクトップ画面が表示されます。

　ちなみに、私が使用したのは「KAUMO DisplayPort ダミープラグ PCにディスプレイが接続していると認識させるアダプタ」です。商品名が長いですね。

## 参考資料
1) https://forums.developer.nvidia.com/t/jetson-nano-vnc-headless-connections/77399
Elixirの対話モードでエラーハンドリングの動作を確認してみた

# 概要
Elixirの対話モードでエラーハンドリングの動作を確認してみました。以下のページを参考にしました。

https://elixirschool.com/ja/lessons/intermediate/error_handling

# 対話モードで実行
以下のコマンドを実行しました。
```
$ iex
Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [jit]

Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> raise "Oh no!"
** (RuntimeError) Oh no!

iex(1)> raise ArgumentError, message: "the argument value is invalid"
** (ArgumentError) the argument value is invalid

iex(1)> try do
...(1)> raise "Oh no!"
...(1)> rescue
...(1)> e in RuntimeError -> IO.puts("An error occurred: " <> e.message)
...(1)> end
An error occurred: Oh no!
:ok
iex(2)> try do
...(2)> raise "Oh no!"
...(2)> rescue
...(2)> e in RuntimeError -> IO.puts("An error occurred: " <> e.message)
...(2)> after
...(2)> IO.puts "The end!"
...(2)> end
An error occurred: Oh no!
The end!
:ok
iex(3)> {:ok, file} = File.open("example.json")
** (MatchError) no match of right hand side value: {:error, :enoent}

iex(3)> defmodule ExampleError do
...(3)> defexception message: "an example error has occurred"
...(3)> end
{:module, ExampleError,
 <<70, 79, 82, 49, 0, 0, 13, 124, 66, 69, 65, 77, 65, 116, 85, 56, 0, 0, 1, 93,
   0, 0, 0, 34, 19, 69, 108, 105, 120, 105, 114, 46, 69, 120, 97, 109, 112, 108,
   101, 69, 114, 114, 111, 114, 8, 95, 95, ...>>, :ok}
iex(4)> try do
...(4)> raise ExampleError
...(4)> rescue
...(4)> e in ExampleError -> e
...(4)> end
%ExampleError{message: "an example error has occurred"}
iex(5)> try do
...(5)> for x <- 0..10 do
...(5)> if x == 5, do: throw(x)
...(5)> IO.puts(x)
...(5)> end
...(5)> catch
...(5)> x -> "Caught: #{x}"
...(5)> end
0
1
2
3
4
"Caught: 5"
iex(6)> spawn_link fn -> exit("oh no") end
** (EXIT from #PID<0.106.0>) shell process exited with reason: "oh no"

Interactive Elixir (1.12.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> try do
...(1)> exit "oh no!"
...(1)> catch
...(1)> :exit, _ -> "exit blocked"
...(1)> end
"exit blocked"
iex(2)> 
```

# まとめ
何かの役に立てばと。
【AWS】アーティファクトストアはどこで確認・変更するのか（CodeBuildプロジェクトがCodePipelineと統合されている場合）

# 概要
- AWSでCodeBuildのアーティファクトストアを変更したいと思ったら「アーティファクトタイプを更新することはできません」というアラートメッセージが表示されました。
- 本記事ではアーティファクトストアの確認・変更方法について解説します。

# アラートメッセージの内容
- CodeBuildプロジェクトがCodePipelineと統合されている場合、以下のアラートメッセージが表示されます（CFを使わない場合、ビルドプロジェクトからアーティファクトの設定方法があるはず）。

```
アーティファクトタイプを更新することはできません
このビルドプロジェクトは AWS CodePipeline を使用しているため、ソースタイプとアーティファクトタイプを CODEPIPELINE に設定する必要があります。変更するには、AWS CLI を使用して両方の値を編集する必要があります。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/9631c686-2cc4-8cb7-6325-3ec6a1e6c54a.png)

# アーティファクトストアとは？
- アーティファクトストアとは、アーティファクトの保存場所。AWSでは、ビルドプロセスにおいて生成される成果物のことをアーティファクトと呼びます。アーティファクトはパイプラインの異なるステージで受け渡すことができます。アーティファクトストアがあることで、一元管理できたり履歴から検証できたりしますので、効率的で信頼性の高い開発プロセスを実現する上で重要な要素です。
- CFでのアーティファクトストアの設定方法は、以下の公式ドキュメントやテンプレートを参照。
    - 公式ドキュメント1：[AWS::CodePipeline::Pipeline ArtifactStore](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-codepipeline-pipeline-artifactstore.html)
    - 公式ドキュメント2：[CodePipeline pipeline structure reference](https://docs.aws.amazon.com/codepipeline/latest/userguide/reference-pipeline-structure.html)

```json
{
    "roleArn": "An IAM ARN for a service role, such as arn:aws:iam::80398EXAMPLE:role/CodePipeline_Service_Role",
    "stages": [
        {
            "name": "SourceStageName",
            "actions": [
            ... See Action structure requirements in CodePipeline ...
            ]
        },
        {
            "name": "NextStageName",
            "actions": [
            ... See Action structure requirements in CodePipeline ...
            ]
        }
    ],
    "artifactStore": {
        "type": "S3",
        ... ここにS3バケットの保存先を指定します　... 
        "location": "The name of the Amazon S3 bucket automatically generated for you the first time you create a pipeline
            using the console, such as codepipeline-us-east-2-1234567890, or any Amazon S3 bucket you provision for this purpose"
    },
    "name": "YourPipelineName",
    "version": 1
}
```

## CodeBuildプロジェクトがCodePipelineと統合されている場合
- CodeBuildプロジェクトがCodePipelineと統合されている場合、CodeBuildのアーティファクトタイプとソースタイプをマネジメントコンソールから直接変更することはできない...。これは、CodePipelineによってソースコードが提供され、CodeBuildはCodePipelineからのアーティファクトをビルドに使用するためです。
- CFテンプレートを使用してArtifactStoreを定義しているので、マネジメントコンソールからではなくテンプレートの該当部分を変更してArtifactStoreの設定を調整する必要があるようです。マネジメントコンソールでは、ビルドプロジェクトだと上述のエラーメッセージであり、パイプラインからではArtifactStoreの設定が可能な箇所が見当たりませんでした...うーむ、CFでしか確認・変更できないんですね、もしくはAWS CLIでやるしかないのか（ここにあるよ！って情報ありましたらぜひ教えてください）。
Python3エンジニア基礎試験_模擬試験の復習⑩

# 問題-1

Pythonインタプリタにて以下のように入力した場合の出力結果として正しいものを求めよ。

```python.py
>>> from math import pi
>>> [str(round(pi, i)) for i in range(0, 5)]
# ['3.0', '3.1', '3.14', '3.142', '3.1416']
```

* 解説
`math`モジュールの円周率`pi`の問題です。`pi`を小数点毎に`round`メソッドで四捨五入しています。

# 問題-2

以下のプログラムを実行した際の出力結果を求めよ。

```python.py
diver = [d * 2 for d in 'diver']
print(diver)
# ['dd', 'ii', 'vv', 'ee', 'rr']
```

* 解説
リスト内包表記の問題です。書き方は次の通りです。
[式 for 変数 in リスト等]
for でループする毎に式の値が新しいリストに格納されています。

# 問題-3

以下のプログラムを実行した際の出力結果を求めよ。

```python.py
d = 'diveinto'
d + 'code'
print(d)
# diveinto
```

* 解説
基本的な構文の問題です。d という文字列に ‘code’ を加算していますが、結果を d に格納をしないと d は書き換わりません。

# 問題-4

下のユーザー定義例外について正しいものを求めよ。

```python.py
class MyError(Exception):
    def __init__(self, value):
        self.value = value
    def __str__(self):
        return repr(self.value)
# このユーザー定義例外は、Exceptionクラスのデフォルトの__init__をオーバーライドしている。
```

* 解説
ユーザ定義例外の問題です。Python で例外クラスを自分で定義するときには、Python のビルトインの Exception クラスを親クラスになるように例外クラスを作ります。
従ってこのユーザ定義例外は、Exception クラスのデフォルトの__init__ をオーバーライドしています。

# 問題-5

以下のプログラムを実行した際の出力結果を求めよ。

```python.py
import json
x = {'name':'yamada','data':[2,3,4]}
print(json.dumps(x))
# {"name": "yamada", "data": [2, 3, 4]}
```

* 解説
`json` モジュールの問題です。ここでは `dumps` を使って出力がどうなるかが問われています。`json.dumps()` とすると、辞書を `JSON` 形式の文字列として出力します。

# 問題-6

以下のプログラムを実行した際の出力結果を求めよ。

```python.py
dive_into_code = [(1, 'Noro'), (2, 'Nakao'), (3, 'Miyaoka'), (4, 'Kimura')]
dic = dive_into_code
dic.sort(key=lambda dic: dic[1])

print(dic)
# [(4, 'Kimura'), (3, 'Miyaoka'), (2, 'Nakao'), (1, 'Noro')]
```

* 解説
`sort` 文と `lambda` 式の問題です。`sort` の `key` として `lambda dic[1]` を使っています。`dic[1]` はリストの名前の部分ですので、名前の昇順で並び替えられているものが正解になります。

# 問題-7

pythonインタプリタにて以下のように入力した場合の出力結果を求めよ。

```python.py
25//7
# 3
```

* 解説
// は切り捨ての商です。25 / 7 は 3 余り 4 ですので、 4 は切り捨てられ 3 が正解になります。

# 問題-8

対話モード時に、最後に表示した式を格納している変数を求めよ。

```python.py
# 変数：_ (アンダーバー)
```

* 解説
対話モード時に、最後に表示した式を格納している変数は `_ （アンダーバー）`です。

# 問題-9

問題文のfor文を実行した場合の、出力結果を求めよ。

```python.py
titles={'title1':'hoge1','title2':'hoge2','title3':'hoge3'}
 
print("出力結果:")
for k,v in titles.items():
  print(v)
# 出力結果:
# hoge1
# hoge2
# hoge3
```

* 解説
for 文と辞書型の問題です。辞書型を for 文で k, v に分けて取り出しています。k, v は key 部分と value 部分に分かれて格納され、5 行目で v 部分だけ出力しています。
ざっくりAPI

# APIって知ってますか？  
APIって聞いたこともある人もいない人もいると思いますが、今回自分はそのAPIの一歩めの知識をざっくりと教えたいと思います！　　
自分自身かなりAPIで詰まっていたので少しでも初学者の力になれたら初学者の自分的にも幸いです（？)
### それでは早速行きましょう！

## API（Application Programming Interface）  
いきなりこんなん言われてもなんのこっちゃですよね、、まずAPIがなんなのかって話なんですよ  
かなり簡単にいうと自分自信に技術力がなくても、大手サイト例（google,googleMAP,chatGPT,Amazon)などの技術を丸々使えちゃうわけです！！まだわかんないですよね、そうなんですこれを聞いてどーゆーことやねんwになると思います。なのでもっとイメージを語らせていただきます！例えば自分がAmazonの3000円以下の商品しかないサイトを作りたいぜ！となったとします。　　
これってAPIを使わないと3000円以下の商品を自分がAmazonを見てメモ帳に書きまくることになります。　　
するとですよみなさんAPIを使えば、、、なんとさっきも言った通りAmazonが丸々使えちゃうのでそんなことしなくてもいいんですよ。　　
もう少し詳しく話すと、APIはデータを受け取るものです！あのAmazonのアプリがそのまま使える！ってわけではないんですよね　　
ちなみにそちらの部分は逆にサイトのデザインなので完璧にアプリ内のデザインをパクることができたら実質Amazonは手作りできちゃうわけですよ!このAPIはデータというのはなかなか気づくのに時間がかかるので気をつけてください！  

## 結論APIはクソ凄い、楽しいものだと思うべし！！
いきなり結論かよって感じですが、APIってまじ凄すぎるので興味がある方はというか初学者で何か作りたいなと思う方は、ぜひAPIを取り入れることをお勧めします！なんでかって？そら大手の技術が自分で使えるんだもん！話はズレますけど結局学習って楽しい方がやれるのでAPI
はまじ最強なんで学習の幅もそうですし、自分が製作したいものの幅が10000倍くらい上がるんで超お勧めです！（chatGPTの検索結果などを出力できたりしますw）
【推し活】推しから寝起きとか仕事終わりにLINEが来たら嬉しくないか？？？〜疑問解決編その1〜

# きっかけ
前回記事を書いた際に生じた疑問をコメント欄で@tenmyoさんに補足してもらった（ありがとうございます！）．しかし，理解ができず月日は去って2ヶ月．その間に昔作った別の古いプログラムを動かしたところ，ファイルに書き込まれないことがあったことで解決方法を理解したため新たに記事にする．

# 前提
- [【推し活】推しから寝起きとか仕事終わりにLINEが来たら嬉しくないか？？？](https://qiita.com/NAT/items/eeb40ac5fc59be86a468)を見てきた人用


# 今回やること
1. 動作理解
    1-1. なぜだめだったのか
    1-2. ディレクトリ構成の比較
    1-3. ディレクトリ構成の変更に伴ったソースコードの変更点
2. 新たな問題点

# 1.動作理解
## 1-1.どこの理解ができていなかったのか
1-2.旧ディレクトリ構成を見てもらいたい．`Users/hoge1/hoge2/hoge3/test.py`が実行するファイルである．このファイルが存在する場所から見て画像ファイル(ex. test1.jpg)が存在する場所を相対パスで指定するはずだと考えてはいたもののソースコード上では`image_file_dict`のように指定するとうまくいっていたことが疑問だった．その旨を以前の記事で書いたところコメントが返ってきた．

@tenmyoさんの「たぶんプログラム実行の初期位置がホームディレクトリ（/Users/hoge1）なんじゃないかな。」がまさにその通りだった．`crontab -e`で実行したいファイルの存在する場所を記述してもcronから起動された場合，作業ディレクトリは/Users/hoge1であるためそこから見て同じ階層にある画像ファイルにアクセスできるようだ．

以上のことを理解したが結局新たにディレクトリを作って（line_api），そこにまとめておくことにした（新ディレクトリ構成参照）．それに伴ってソースコードの`image_file_dict`を作業ディレクトリ（hoge1）から見た相対パスに変え，`crontab -e`で実行ファイルのパスも変えた．

## 1-2.ディレクトリ構成の比較
旧ディレクトリ構成
```
Users /
├─hoge1 /
    ├─test1.jpg
    ├─test2.jpg
    ├─test3.jpg
    ├─test4.jpg
    ├─test5.jpg
    ├─hoge2 /
        ├─hoge3 /
            ├─test.py
```
新ディレクトリ構成
```
Users /
├─hoge1 /
    ├─line_api /
        ├─test1.jpg
        ├─test2.jpg
        ├─test3.jpg
        ├─test4.jpg
        ├─test5.jpg
        └─line.py
```

## 1-3.ディレクトリ構成の変更に伴ったソースコードの変更点

```python
import requests

TOKEN = 'さっき発行したトークン'
api_url = 'https://notify-api.line.me/api/notify'
send_contents = '毎日早起きしてすごい！'  # 画像だけでは送信できない．メッセージ必須．

TOKEN_dic = {'Authorization': 'Bearer' + ' ' + TOKEN} 
send_dic = {'message': send_contents}

# LINE通知を送る（200: 成功時、400: リクエストが不正、401: アクセストークンが無効：公式より）
# 5枚のうち，どの画像にするかを疑似乱数で決める
choice = random.randint(1,5)
image_file_dict = {1:'line_api/test1.jpg',2:'line_api/test2.jpg',3:'line_api/test3.jpg',4:'line_api/test4.jpg',5:'line_api/test5.jpg'}
# 画像ファイルのパスを指定
image_file = image_file_dict[choice]
# バイナリデータで読み込む
binary = open(image_file, mode='rb')
# 指定の辞書型にする
image_dic = {'imageFile': binary}
# LINEに画像とメッセージを送る
requests.post(api_url, headers=TOKEN_dic, data=send_dic, files=image_dic)
```

前回の記事からさらに変更する場所は画像のパス．
このソースコードを前回の test.py から line.py と変更して保存した．

前回同様 Terminal を開いて`crontab -e`と入力し，Enter を押すと Vi で入力できる画面がでてくる．ここに例えば毎日6時に line.py というファイルを python3 コマンドで実行したい場合は新ディレクトリ構成を参照して次のように書く．
```
0 6 * * * python3 /Users/hoge1/line_api/line.py
```

# 2.新たな問題点
実は旧ディレクトリ構成における hoge3 は pyenv で作成した仮想環境だった．今回はそれをやめて新たにまとめディレクトリ（line_api）を作ったわけだが，ソースコードの1行目の`import requests`の時点で
```
no module named `requests`
```
というエラーが起きるようになってしまった．requests ライブラリはすでにインストールしてあったため何がダメなのか分からず，再びしばらく詰まっていたが解決したため，次の記事とする．結局パスの問題だった……．


# 参考文献
この記事は以下の情報を参考にして執筆しました。

- [【推し活】推しから寝起きとか仕事終わりにLINEが来たら嬉しくないか？？？](https://qiita.com/NAT/items/eeb40ac5fc59be86a468)での@tenmyoさんのコメント
ABC306 - B - Base 2 自己解法

# 問題
https://atcoder.jp/contests/abc306/tasks/abc306_b

# 考察
素直に数式に当てはめて答えを求めていけばいい問題です。$A$の添字が1つ増えるに連れて、係数が2倍になっています。そこで、答えを出力するための変数$ans=0$と現在の係数を表す$x=1$を用意。$i=0$から順に$A_i×x$を計算して$ans$に足していきましょう。$i$を1つ増やすたびに$x$も2倍にすればOKです。
1つ注意点として、答えの値は最大で$2^{64}-1$になります。C++では`long long`型の変数でもオーバーフローを起こす可能性があります。`unsigned long long`型の変数にするなど、できるだけ大きな整数が扱えるようにしておきましょう。

# 提出コード(コンテスト後)

https://atcoder.jp/contests/abc306/submissions/42745385

ご不明点などがあれば教えていただけると幸いです。

# 参考

https://qiita.com/hryshtk/items/b848ed3bd78f940ac5af
[vb.net] Visual Studio 2022インストール


Visual Studio 2022のインストール手順


#__URL__
https://visualstudio.microsoft.com/downloads/

#__目次__
1.　ダウンロード方法
2.　ユニバーサルWindowsプラットフォーム開発の初期設定
3.　新しいプロジェクトの作成手順


#__１.ダウンロード方法__
「<font color="red">Community</font>」コミュニティを選んでください。
内容：「学生、オープンソースの貢献者、そして個人に無料で提供されるパワフルなIDE」になります。

![2023-05-03 (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/4ed0d8a2-a3c4-726a-e047-9e593cadd6d3.png)



#__２.初期設定__
ダウンロードした「<font color="red">VisualStudioSetup</font>.exe」を起動していきます。

____

「Visual Studio Community 2022」のインストールを選択
![2023-05-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/b007a7ce-afbf-f219-fce8-98ae0792142d.png)

____

今回は、ユニバーサルWindowsプラットフォーム開発を選択します。
<font color="red">※各々が必要なアイテムをインストールしてください。</font>
「ダウンロードしながらインストール」or「インストール」を押します。
![2023-05-03 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/8453abbf-dee1-6b88-648e-b95a421bd957.png)
____


インストール中
![2023-05-03 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/5bd371be-d232-3013-eddf-c1d0db6e1a2f.png)

____

サインインしていきます。
![2023-05-03 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/196d67bd-24a5-ecb1-e283-05a0cc7b809f.png)


#__３.新しいプロジェクトの作成手順__
「<font color="red">新しいプロジェクトの作成</font>」を選んでいきます。
![2023-05-03 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/9a547c12-145e-4e18-bcfd-f21457621afe.png)

____

「<font color="red">Windowsフォームアプリ</font>」を選んでください。
![2023-05-03 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/672d9dd1-d6f7-db02-9e8d-5e148a29a69c.png)


____
プロジェクト名を付けていきます。
![2023-05-03 (10).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/49ddb922-ad90-ad2d-0b89-f88a927c4788.jpeg)



____

そのままで「__作成__」を押します。
![2023-05-03 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/32275697-5f24-fbcc-a8da-4f65858ca959.png)

____
新しいプロジェクトの作成が完了します。
![2023-05-03 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/b8953e1d-0d6b-df25-ac33-c676e7cc6ef2.png)
データ型(integer、float、double)について

本日ご質問で頂いた内容をより詳しく理解するために調べたので、自分のまとめとして記載します

データ型はプログラミングにおいて、各データがどんなデータを表しているのかを区別するためのものです。

今回はinteger、float、doubleについて自分の調べて理解している範囲で記載します。
修正点などあれば教えていただけるとありがたいです！

integer型は整数を表す時に使用する型のことを言います

float型とdouble型はどちらも浮動小数点のことです
浮動小数点型は符号部、指数部、仮数部の３つに分かれています

符号部:-と+といった、数字の正負を表す部分
指数部:5のn乗、10のn乗といった部分の「5」や「2」の部分
仮数部:正規化した小数点以下の部分を表す部分

float型は単精度小数点と言います。
double型は倍精度小数点と言います。
float型とdouble型の違いはdouble型はfloat型の倍の数字を表現できるという違いがあります


float型のメリットとデメリット
double型と比較して、小数点以下が表現できる数字の範囲が狭いため、処理速度が速いというメリットがあると思います
デメリットにおいては、double型の1/2しか表現できる数字の範囲がないため、正確性に劣るという点だと思います

double型のメリットとデメリット
float型と比較すると小数点以下が表現できる数字の範囲が倍あるためdouble型の方が正確性があると思います
デメリットにおいては、float型の倍、表現できる数字の範囲があるため処理速度が遅いという点だと思います

自分で調べて理解できた範囲はここまでです！


今後は定期的に、自分のアウトプット用として気になったことなどを
書いていこうと思います！
AWS CDKでAuroraServeless V2がサポートされたので書き換えてみた


# 突然ですが`deprecated`していいですか

最近、CDKでデプロイしていたら、

```
[WARNING] aws-cdk-lib.aws_rds.DatabaseClusterProps#instanceProps is deprecated.
  - use writer and readers instead
  This API will be removed in the next major release.
```

と出てきたので、RDSの書き方変わるのかなーとChangeLogを漁りに行ったら、

https://github.com/aws/aws-cdk/blob/main/CHANGELOG.v2.md

直近、`2.82.0`でRDSの変更があって

`rds: support Aurora Serverless V2 instances`の文字が！！！待望！！


# Before

通常は下記のような、Auroraの書き方をすると

```typescript
   const rds = new DatabaseCluster(this, DatabaseCluster.name, {
      engine: DatabaseClusterEngine.auroraMysql({ version: AuroraMysqlEngineVersion.VER_3_03_0 }),
      instanceProps: {
        vpc,
        vpcSubnets: { subnetType: SubnetType.PRIVATE_WITH_EGRESS },
      },
      defaultDatabaseName,
      removalPolicy: RemovalPolicy.DESTROY,
    });
```

現在はインスタンスタイプが、`db.t3.medium`のリーダーインスタンス・ライターインスタンスが作成されます。

# After

今後はこうなるようです。

```typescript
    const rds = new DatabaseCluster(this, DatabaseCluster.name, {
      engine: DatabaseClusterEngine.auroraMysql({ version: AuroraMysqlEngineVersion.VER_3_03_0 }),
      vpc,
      vpcSubnets: { subnetType: SubnetType.PRIVATE_WITH_EGRESS },
      instanceUpdateBehaviour: InstanceUpdateBehaviour.ROLLING,
      writer: ClusterInstance.provisioned("WriterInstance", {
        instanceType: InstanceType.of(InstanceClass.T3, InstanceSize.MEDIUM),
        enablePerformanceInsights: true,
      }),
      readers: [
        ClusterInstance.provisioned("ReaderInstance", {
          instanceType: InstanceType.of(InstanceClass.T3, InstanceSize.MEDIUM),
          enablePerformanceInsights: true,
        }),
      ],
      defaultDatabaseName,
      removalPolicy: RemovalPolicy.DESTROY,
    });
```

## ポイント

- writer・readersでインスタンスを定義

## serveless v2用に書き換え

writerだけ`serverlessV2`に書き換えるとこうなりました。

```typescript
const rds = new DatabaseCluster(this, DatabaseCluster.name, {
      engine: DatabaseClusterEngine.auroraMysql({ version: AuroraMysqlEngineVersion.VER_3_03_0 }),
      vpc,
      vpcSubnets: { subnetType: SubnetType.PRIVATE_WITH_EGRESS },
      instanceUpdateBehaviour: InstanceUpdateBehaviour.ROLLING,
+     writer: ClusterInstance.serverlessV2("Writer", { scaleWithWriter: true, enablePerformanceInsights: true }),
      defaultDatabaseName,
      removalPolicy: RemovalPolicy.DESTROY,
    });
```

## servelessv2用に書き換えたのをデプロイしてみました。

まず、Beforeで書いたテンプレートをデプロイしておき
次に、servelessv2用に書き換えたのをデプロイしてみました。


### 1. servelessv2インスタンスが`リーダーインスタンス`で作られる

![rds-writer-phase-1-2023-06-19 19.03.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/c3e2bd17-9a82-0607-4557-8c73c7019311.png)


### 2. servelessv2インスタンスが`リーダーインスタンス`→`ライターインスタンス`に昇格し、`リーダーインスタンス`が削除

![rds-writer-phase-2-2023-06-19 19.13.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/bfe4094f-9ad4-4e37-991f-fc620519712b.png)

### 3. servelessv2インスタンスのみになった

![rds-writer-phase-3-2023-06-19 19.41.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/7ec37a92-1d07-0199-8135-7f2304686916.png)

ローリングデプロイもバッチリでした。
メモ：Hyper-Vが突然起動しなくなる原因


# 経緯
Windows Server 2019をqemu-img convertでHyper-Vへ移行したところ、以下のエラーとなりました。

:::note warn
選択した仮想マシンの起動中にエラーが発生しました。
ハイパーバイザーが実行されていないため、仮想マシンを起動できませんでした。
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790864/09775a9b-69d1-6fc3-de7c-48daf8b3ba19.png)

# 原因
可能性としては以下があるようです。

:::note info
- ネスト仮想化が有効の状態でのマイグレーション（V2PまたはV2V）
- WindowsUpdateにともなうBIOSアップデート
- BCDEditによるブート情報の変更
:::

# 結論
Hyper-Vをいったん削除したあと有効にします。再起動すると起動ができるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790864/f512b51c-6e43-e5b5-75d7-6eecaa37f5fd.png)

# まとめ

- 移行前にいちどHyper-Vを無効化するのが確実のようです。
- Hyper-Vを稼働させているWindows Serverは、Windows Updateを単独実行させず、WSUSかオフラインで運用するのが安心とおもわれます。

# 参考にさせていただいたサイト

**【Hyper-V】ハイパーバイザーが実行されていないため、仮想マシンを起動できませんでした**
https://postgresweb.com/hyper-v-error-hypervisor-is-not-running

**【解決】Hyper-Vで突然ゲストOS起動が起動しなくなった**
https://blackbird-blog.com/windows2012r2-hyper-v-202201
C言語でpow関数使ってみた。

# 注意
・AtCoderの[abc306_B - Base 2](https://atcoder.jp/contests/abc306/tasks/abc306_b)のネタバレあり。

# 学んだこと
・[浮動小数点数とは](https://ja.wikipedia.org/wiki/%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0)
・pow関数
・累乗(power)とべき乗(exponentiation)


# ACしたコード
```C
#include <stdio.h>
#include <math.h>

int main(void)
{
	int a[64];
    unsigned long long sum = 0;
	unsigned long long total = 0;

    for (int i = 0; i < 64; i++)
    {
        scanf("%d", &a[i]);
		// printf("%d ", a[i]);

		if(a[i] == 1){
            // pow関数の結果をunsigned long longの型に代入したら浮動小数点数を整数にできた！
			sum = pow(2, i);
			// printf("sum = %llu\n", sum);
			total += sum;
			// printf("total = %llu\n", total);
		}
	}
	printf("%llu\n", total);
    return 0;
}
```

# 浮動小数点数とは
<b>chatGPTに聞いてみた</b>

浮動小数点数は、コンピュータで実数（小数点を持つ数）を表現する方法の一つです。これは、大きな数や小さな数をコンピュータで扱えるようにするための仕組みです。

想像してみてください。数を書くための紙には、一定のスペースしかありません。だから、とても大きな数や小さな数を正確に書くことは難しいですよね。浮動小数点数は、その紙のスペースを有効に使うための工夫です。

浮動小数点数では、数を２つの部分に分けます。一つ目の部分は「仮数部」といい、小数点以下の数字を表します。そして、二つ目の部分は「指数部」といい、小数点の位置を表します。

例えば、10000という数を浮動小数点数で表すとき、仮数部には「1」と書き、指数部には「4」と書きます。これは、「1を小数点を使って4つ右に動かす」という意味です。

このようにすることで、とても大きな数や小さな数を表現することができます。でも、少しの間違いが生じるかもしれません。それは、浮動小数点数で表現できる数には限りがあるからです。

だから、浮動小数点数を使うときは、数が正確に表現されているか確認する必要があります。特に、計算をするときには、正しい答えを得るために注意が必要です。

簡単に言うと、浮動小数点数は、コンピュータで大きな数や小さな数を表現する方法で、紙のスペースを有効に使う工夫です。でも、正確な表現には限りがあるので、計算するときは注意が必要です。

# pow関数
・累乗(power)を短縮した表記。

https://daeudaeu.com/c-pow/#pow-4

# 累乗(power)とべき乗(exponentiation)
・0乗は1
・累乗の指数は正の数　
・べき乗の指数は複素数と呼ばれているけど今は正の数と正の数以外も指定できると覚えておく。
・累乗とべき乗の計算方法は同じで、基数(底数)を指数の回数だけ繰り返し掛け合わせる。

http://kentiku-kouzou.jp/suugaku-2no0jou.html

https://atarimae.biz/archives/20521

https://chisikiyoku.com/%E5%86%AA%E4%B9%97%E3%81%A8%E7%B4%AF%E4%B9%97%E3%81%AE%E9%81%95%E3%81%84/

https://xn--48s96ub7b0z5f.net/shisuu-beki-rui/

https://e-nine.com/programming-c-2pow-2/#rtoc-5
OpenAPI GeneratorでプロパティをNULL許容型にする

# 1. はじめに
* スキーマファイルからソースコードを自動生成した時に、文字列をNULL許容型にしたい

# 2. 開発環境
* OpenAPI 3.0
* OpenAPI Generator
* C#
* .NET 6

# 3. スキーマファイルの書き方(抜粋)
* nullableを明示的にtrueに指定する
```YAML:
properties:
    hoge:
        type: string
        fomat: date-time
        nullable: true
```

# 4. 参考文献

https://future-architect.github.io/articles/20211028b/
Rails はじめてマイグレーションファイルを作成したのでそのまとめ

業務ではじめてマイグレーションファイルを作成しました。

# 行ったこと
①新規モデル作成
②新しく作成したモデルに、既存のテーブルからデータをインサート

# ①新規モデル作成

実行したいコンテナの中に入り

まず新しくモデルを作成しました
例）
ここでは
AfterHogesモデルを作成し
BeforeHogesモデルから
2023/01/01以降のデータをインサートしたい場合
と仮定して処理を進めます。

この場合、まずはAfterHogesモデルを作成します。

`rails g model AfterHoges`
とコマンドを打ちAfterHoges　モデルを作成します。

その後、マイグレーションファイルの配下に新規でファイルを作成し
その中に各カラムの情報をファイルに記述します。

参考）☟このように

```
class AfterHoges < ActiveRecord::Migration[5.2]
  def change
    create_table :after_hoges do |t|
      t.references :hoge, foreign_key: true, null: false
      t.string :name, null: false

      t.timestamps
    end
  end
end
```

ファイルに記述がおわったら、下記コマンド
`rails db:migrate`
を実行すると、①の完了です。
新しくAfterHogesモデルが作成できました。
しかし、まだデータがはいっていません。
なので、②にいきます。

# ②新しく作成したモデルに、既存のテーブルからデータをインサート

先ほど作成した
AfterHoges　モデル に　BeforeHogesモデル
からdateが　2023/01/01 以降のデータを入れていきます。

＊あくまで例です


```
# 既存のBeforeHogesモデルからデータを取得
before_hoges_data = BeforeHoges.where("date > ?", Date.new(2023, 1, 1))

# AfterHogesモデルにデータをいれる
before_hoges_data.each do |before_hoge|
  after_hoge = AfterHoge.create(
      hoge = before_hoge.hoge
      name = before_hoge.name
  )
end
```

データが入れば②も完成です。

# 役にたったコマンド
`rails db:migrate:status`
マイグレファイルの状態を出してくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3396298/9ff3aea2-74fe-bf50-527d-ae04e89f7cb2.png)

up  →  マイグレーション成功
down  →  マイグレーション失敗

`rails db:migrate:down VERSION="ここにマイグレ前に戻したいMigration IDをかく"`
例えば
もう一度マイグレーション前の状態に戻したい
となった際に
上のコマンドで任意のマイグレーションファイルのみ
マイグレーション前の状態に戻すことができます。
Migration ID　は
`rails db:migrate:status`
をうつと分かります。

# 参考記事
https://qiita.com/you8/items/32f9799e79b9941dd01a

https://qiita.com/yoshimurayoshiki/items/631370cbdded9d2c34ea
C#でAOPを実装したい

# 1. はじめに
* C#でJavaのSprping AOPと同じに様なことをしたい
* メソッドの実行前、後に共通ログを出力したい

# 2. 開発環境
* C#
* .NET 6
* Visual Studio 2022
* MethodBoundaryAspect.Fody (NuGet)
* Windows 11

# 3. 事前準備
* NuGetから```MethodBoundaryAspect.Fody```をインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852081/fe2b6468-a36e-252c-d309-30c27c57a85f.png)

# 4. ソースコード
## 4.1. Aspectコード
```Csharp:LogAttribute.cs
using static System.Console;
using MethodBoundaryAspect.Fody.Attributes;
using System.Diagnostics;

public sealed class LogAttribute : OnMethodBoundaryAspect
{
    public override void OnEntry(MethodExecutionArgs args)
    {
        Debug.Print("On entry");
    }

    public override void OnExit(MethodExecutionArgs args)
    {
        Debug.Print("On exit");
    }

    public override void OnException(MethodExecutionArgs args)
    {
        Debug.Print("On exception");
    }
}
```

## 4.2. サンプルコード
```Csharp
        [Log]
        private void button1_Click(object sender, EventArgs e)
        {
            MessageBox.Show("OK");
        }

        [Log]
        private void button2_Click(object sender, EventArgs e)
        {
            MessageBox.Show("NG");
            throw new Exception();
        }

```

## 4.3. 実行結果
* OKの場合
```
On entry
On exit
```

* NGの場合
```
On entry
On exception
```

# 5. 参考文献

https://github.com/vescon/MethodBoundaryAspect.Fody

https://qiita.com/you2143/items/852e62492568cdc7d3fa
検索機能を実装する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/cc47b53c-ad42-0e5c-556e-08ba52ad5c56.png)
１：検索フォームを作成
index.html.erbを編集しましょう
検索の入力欄とボタンには、フォームを使います。

app/views/tweets/index.html.erb
<%= form_with(url: search_tweets_path, local: true, method: :get, class: "search-form") do |form| %>
  　<%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %>
  　<%= form.submit "検索", class: "search-btn" %>
<% end %>
・form_withのtext_fieldとsubmitを使って検索窓と検索ボタンを作成した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/87a754c4-980e-a419-52e2-d9449fef8865.png)

２：searchアクションのルーティングを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/d4be1f39-0e2d-92b3-8d58-ae1d31f5d3bc.png)

３：検索のメソッドをモデルに定義
　whereウェアーメソッド
　モデルが使用できる、ActiveRecordメソッドの1つです。
　モデル.where(条件)のように、引数部分に条件を指定することで、テーブル内の「条件に一致したレコードのインスタンス」を配列の形で取得できます。

引数の条件には、「検索対象となるカラム」を必ず含めて、条件式を記述します。
【例】whereメソッド
モデル.where('検索対象となるカラムを含む条件式')
条件式には'カラム名 > 5'やキーバリューの形でカラム名: 値などの記述が可能です。
条件と一致する値を持つレコードを、すべて取得します。

また、whereメソッドを連続して記述することによって、複数の条件に一致したレコードを取得することもできます。

「LIKEライク句」
LIKE句は、曖昧（あいまい）な文字列の検索をするときに使用するもので、whereメソッドと一緒に使います。

曖昧な文字列の検索とは、たとえば「1文字目に'a'という文字列が入ったデータ」や「最後の文字に'b'が入っているデータ」、「文字列の途中に'c'が入ったデータ」などを検索するものです。
whereメソッドとLIKE句を使用して検索の処理を作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/662ad92b-de27-e602-78ba-7bb6f7e10f5c.png)

４：searchアクションをコントローラーに定義
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/d73f09a4-a1e6-21c1-a713-30bb323aa511.png)

５：検索結果画面のビューを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/5dd0c7da-c38a-a500-6345-2cfd35e1aae7.png)
AtCoder 高速化すると遅い解法で制約ギリギリで通る問題

## ABC033 D

[三角形の分類](https://atcoder.jp/contests/abc033/tasks/abc033_d)、[提出](https://atcoder.jp/contests/abc033/submissions/41723541)

制約・・・3≦N≦2000
解法・・・O(N^3)
TL・・・7sec
実際の提出・・・3153ms

## ABC 091 D

[Two Sequences](https://atcoder.jp/contests/abc091/tasks/arc092_b)、[提出](https://atcoder.jp/contests/abc091/submissions/42744855)

制約・・・1≦N≦200000
解法・・・O(N^2)
TL・・・3sec
実際の提出・・・2983ms
SQL Serverのバックアップを「さくらのクラウド オブジェクトストレージ」に保存する

SQL Server 2022からS3互換ストレージへバックアップ先を指定する機能が追加されました。
S3互換ストレージに対応しているということは、Amazon S3だけではなく、さくらのクラウドのオブジェクトストレージにも保存できるのでは？ということで試してみました。

# 前提

- SQL Server 2022が実行しているサーバを準備
  - [SQL Serverのダウンロード](https://www.microsoft.com/ja-jp/sql-server/sql-server-2022)
  - [あるいはさくらのクラウド上のSQL Server 2022](https://cloud-news.sakura.ad.jp/2023/01/19/ws2022-sql/)


# バックアップ処理（事前作業）
以下のクエリを実行する
- AAAAAA : さくらのクラウドのオブジェクトストレージで作成したバケット名
- BBBBBB : オブジェクトストレージのアクセスキーID
- CCCCCC : シークレットアクセスキー

※アクセスキーIDとシークレットアクセスキーはコンパネから発行できます（またはパーミッションの画面）

```sql
CREATE CREDENTIAL [s3://AAAAAA.s3.isk01.sakurastorage.jp]
WITH IDENTITY = 'S3 Access Key'
    ,SECRET   = 'BBBBBB:CCCCCC'
;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100935/57fffbff-a4fe-f665-7ce6-b9621ef73d6c.png)

# バックアップ処理（実際の作業）
- Backup_Test : バックアップ対象のデーブル名
- mydb.bak : 実際にバックアップするファイル名
```SQL
BACKUP DATABASE Backup_Test
TO URL = 's3://AAAAAA.s3.isk01.sakurastorage.jp/mydb.bak'
;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100935/7e892c8e-4b01-d6a8-f1f3-02d26e48b8c4.png)

実際にSQL Server Management Studioでコマンドを実行し、正常終了すると上記の通り無事に処理が完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100935/6a9fcef8-4240-5123-ac92-ecac11a624d0.png)

その結果としてオブジェクトストレージのコントロールパネル上にちゃんとバックアップファイルが作られていました。

SQL Server側の機能として新しくできるようになったことですが、ちゃんとS3互換ストレージでできるのかな？面倒な設定が必要なのではないか？　ということを実際に試してみました。
拍子抜けするほど簡単にできました😁
バックアップを保存し続ける領域の管理についてオブジェクトストレージに任せられるので、運用の手間を低減できます。



# 参考情報

https://dev.classmethod.jp/articles/sql-server-2022-ami-released/
PHPでのVS Codeのホットリロード環境を構築しよう(mac x XAMPP)

## 説明

この記事はVisual Studio CodeでPHPの開発体験をさらに向上させるために、ホットリロード(コードの変更を検知した時点でブラウザの画面を更新してくれる)の環境を構築するための記事になります。
主にYoutubeの設定動画を取り組んでいただくための補助的なサンプルコード、関連ツールの案内のための記事になります。

設定動画
---
<iframe width="560" height="315" src="https://www.youtube.com/embed/TwSmPRtTrcE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


関連ツール
---

1. (VS Code側)Live Server：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
1. (Chrome側)Live Server Web Extension：https://chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj/


<br>

コード
---
.vscode > settings.json のコード
```json:settings.json
{
    // Mainly for static files
    "liveServer.settings.useWebExt": true,

    // This means that you change your real URL (current PHP url)
    // to another URL (which Live Sever starts).
    "liveServer.settings.proxy": {
        "enable": true,
        "baseUri": "/",
        "proxyUri": "http://localhost:<port ID>/<File Path>"
    },
    "php.validate.executablePath": "<php file path in bin in xampp>"
}

```


おまけ
---
※Youtubeの動画のOGPはMicrosoftのImage Creatorで作成してみました。(思った通りの画像をプロンプトから作成するの難しいですね😇)
https://www.bing.com/images/create