OmniAICreator/Qiita-1.07M huggingface dataset:
【VB.NET】DataGridviewの列の幅を文字列の幅に合わせて調整する方法

## やりたいこと
- DataGridviewの列の幅を、各列のセル内のテキストで一番長いテキストの幅に合わせる。
![やりたいこと.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/87073920-00b5-4e0d-5346-de4cfdde6f6c.png)

<br>

## コード
```vb
''' <summary>
''' DataGridviewの幅を一番長い文字列の幅に合わせる処理
''' </summary>
''' <param name="columnIndex">列番号</param>
Public Sub autoSizeDGVColumnWidth(columnIndex As Integer)
	' DataGridViewのGraphicsを取得
	Dim gGrid As Graphics = Graphics.FromHwnd(DGVCard.Handle)

	' すべてのセルを調べて、一番広い幅を取得
	Dim sf As New StringFormat(StringFormat.GenericTypographic)
	Dim dt As DataTable = CType(DGVCard.DataSource, DataTable)      ' DGVにバインドしたデータをDataTable型に変換
	Dim rowsCount As Integer = dt.Rows.Count
	Dim maxWidth As Single = 0
	For i As Integer = 0 To rowsCount - 1
		Dim text As String = CStr(DGVCard.Rows(i).Cells(columnIndex).Value)     ' セルの内の値を文字列に変換
		' セル内の値の長さと現時点の最大幅を比較する
		maxWidth = Math.Max(gGrid.MeasureString(text, DGVCard.Font, DGVCard.Width, sf).Width, maxWidth)
	Next i

	' ヘッダー幅を調べる
	Dim dgv As DataGridViewCellStyle = DGVCard.ColumnHeadersDefaultCellStyle
	maxWidth = Math.Max(gGrid.MeasureString(DGVCard.Columns(columnIndex).HeaderText, dgv.Font, DGVCard.Width, sf).Width, maxWidth)

	' 破棄する
	gGrid.Dispose()

	' 幅の変更
	If DGVCard.Columns(columnIndex).HeaderText.Count > 10 Then
		DGVCard.Columns(columnIndex).Width = CInt(maxWidth)
	Else
		DGVCard.Columns(columnIndex).Width = CInt(maxWidth) + 50
	End If
End Sub
```

- 幅の変更
if文を追加しなかった場合、DataGridviewのヘッダー列が折り返して表示された。
![image 41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/f8e6821a-0e94-e754-21ed-c71a828a1e41.png)

　ヘッダー列の文字数が10文字より多い場合は幅を50プラスして設定する処理を追加した。
　 ![image 42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3323019/817f4273-43b9-f7f4-cf30-e94a90fe6b4b.png)

<br>

## 参考サイト
https://dobon.net/vb/dotnet/datagrid/adjustcolumn.html
リモートデスクトップ比較

# 経緯
外出先からのパソコン操作をする機会があり、また課題研究の一環として「GeForce NOW」の再現を行うためゲームや普段使いとして最適なリモートデスクトップを探すためこの記事を書くことに至った。

# 今回使用するソフトウェア
- Google Remote Desktop
 
- Parsec

- Tailscale + Moonlight

:::note warn

 Tailscale + Moonlightの方法はNVIDIA製GPUを用いてるPCのみ使用可能

:::

Windows標準のリモートデスクトップは除外
特にカメラやマイクといったデバイスを使うことがない、またポート解放等設定がめんどくさいので今回は用いない。

※Tailscaleを用いることでポート開放が不要となる。詳しくはTailscale + Moonlightを参照

# 難易度順に紹介
|   | Google Remote Desktop | Parsec | Tailscale + Moonlight |
|:-:|:-:|:-:|:-:|
| 難易度  | 低 | 中  | 高  |
| セキュリティ  | 高  | 低  | 高  |
| 遅延 | めっちゃある  |ほぼ感じない   |ほぼ感じない   |
| 画質 | 低(設定次第)|高   |高   |
# Google Remote Desktop
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/0af78054-8bfa-4064-f9f8-2b1989e7b7d9.png)
Google Chromeの拡張機能でリモートデスクトップが行えます。「パソコンにアクセス」を押すと「Chrome リモート デスクトップ をこのデバイスにインストールしますか？ 」というポップアップが出るのでそこからダウンロードしてセットアップを行ってください。

# Parsec
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/eca7bda9-f5b5-0ece-027d-2cb916bc8356.png)
左上のDownloadを押し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/914fc647-c328-20e1-9be5-f3e42aaa3562.png)
Download for Windows[64 bit]を選択

:::note 

Parsec portable app を選択すると管理者権限不要でParsecを使うことができる

:::
今回はポータブル版を使用。

https://dash.parsec.app/signup/username-email/

上記サイトからアカウントを作成
二段階認証を勧められるのでお好みで設定を行ってください。
![parsec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/bfc75faf-d80f-a685-53bd-7d94b29d6b4c.png)
ログインが済むとこのようなUIが表示されます。「Connect」から接続が可能になります。また、伏せてありますが右上には自分のユーザー名とIDがあり、他者とFriendになることでその人のPCにアクセスすることができるようになります。ですが、最初はキーボードとマウスの使用が制限されているので下部のバーからユーザーを選択しそれぞれ設定をしてあげて下さい。


# Tailscale + Moonlight
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/dc1ee650-ee42-8f13-a171-cc84a41c906e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/cc9cef77-ea68-de53-495d-dc0f97851d18.png)

https://tailscale.com

左上のLog Inからアカウントを作成する。Tailscaleは外部サービスを用いて認証が可能なため非常に便利である。今回はGoogleアカウントを使用しました。ログインが終わるとTailscale側から独自の100から始まるIPが割り振られます。

Tailscaleのインストールが完了したら次は「GeForce Experience」から設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/8dc94f7b-7fba-79fe-1628-5a9e0e136c75.png)

:::note warn
ホスト側(アクセスされる側)のみの設定です
:::

設定内の「SHELD」からGAMESTREAMのバーをONにし「追加」からゲームを追加してください。
上記の設定がすべて終わったら下記から自分のPCに合わせたMoonlightをダウンロードし起動します


https://github.com/moonlight-stream/moonlight-qt/releases/tag/v5.0.1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574826/cc3e4775-2ea1-d6b3-ece5-28a822a3f2a1.png)

右上の「+」が書かれたPCマークから繋げたいパソコンのTailscaleでのIPを入力することでアクセスが可能となります。初回起動時のみPINが要求されるので表示されたコードを入力してください。

# 最終的に比較して
遅延を気にしない些細な作業や、ファイルのやり取りをする場合は「Google Remote Desktop」や、紹介はしてませんがWindows標準のリモートデスクトップ接続がおすすめです。
ゲームなどをする場合は、「Parsec」が「Tailscale + Moonlight」よりお手軽でおすすめです。

Google Remote Desktop以外は、原神が快適に動かすことができました。設定次第でより高画質で楽しむことができると思います。
ubuntuでUSBメモリの使用をできなくする方法

先日、上長から
「社内のPCでUSBメモリを使えないようにすることはできないか」　という依頼が来ました。

情報流出の観点から、USBメモリの使用をできないようにしたいとのこと。
確かに直近でも、このようなニュースがありました。

https://www.sankei.com/article/20231107-NOEN2W3UD5OA3I2UNN3BFGJH6E/

現在、フロントエンドエンジニアとして参画しているのですが、ひょんな事からLinux周りの困りごとの解決も頼まれることが多くなりました。

このプロジェクトに参画するまでLinuxをそこまで触っていなかったので、調べながら下記手順で解決しました。

#### 検証した環境
・Ubuntu 20.04

### 手順
##### Blacklist USB Storage Moduleの設定
USBストレージドライバをブラックリストに登録して、システムがUSBストレージデバイスを自動的に認識しないようにします。
まずはターミナルにて下記コマンドを入力
```
echo "blacklist usb-storage" | sudo tee -a /etc/modprobe.d/blacklist.conf
```
##### 続けてuasも登録
UASは、高速なデータ転送をサポートするUSB 3.0デバイスで一般的に使用されるプロトコルです。
```
echo "blacklist uas" | sudo tee -a /etc/modprobe.d/blacklist.conf
```

##### 変更を有効にするためinitramfsをアップデート
```
sudo update-initramfs -u
```

これでusbメモリを指しても認識されなくなりました。
MacでPythonをインストールする方法 



MacにPythonを新しく導入する際の分かりやすい手順をご紹介します。

## まずは準備
ご存知かもしれませんが、Macには標準でPythonがインストールされております。ただし、古いバージョンであることが多いので、最新のPythonを使うためには改めてインストールが必要です。

## 方法1: 公式サイトからのダウンロード

1. Pythonの[公式サイト](https://www.python.org/downloads/mac-osx/)にアクセスしてください。
2. 「Python 3.x.xのダウンロード」をクリックし（x.xはバージョン番号）、ファイルをダウンロードします。
3. ダウンロードした `.pkg` ファイルを開いて、画面に表示される指示に従いインストールを進めてください。

公式サイトからのダウンロードは、最も直接的なインストール方法です。

## 方法2: Homebrewを活用する

HomebrewとはMac用のパッケージ管理ツールで、コマンドラインから簡単に様々なソフトウェアをインストールできます。

初めに、Homebrewが既にインストールされているかを確認しましょう。ターミナルを開き、次のコマンドを入力してください。

```sh
brew -v
```

もしインストールされていない場合は、以下のコマンドで導入できます。

```sh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

そして、Pythonをインストールするためには次のコマンドを実行します。

```sh
brew install python
```

これで最新のPythonがご利用いただけます。

## 方法3: pyenvでのバージョン管理

異なるバージョンのPythonを管理する必要がある場合は、`pyenv`が非常に便利です。

まず`pyenv`をインストールするには、以下のコマンドを利用します。

```sh
brew install pyenv
```

インストール後、お望みのPythonのバージョンをインストールしてください。

```sh
pyenv install 3.x.x
pyenv global 3.x.x
```

`3.x.x`の部分には、インストールしたいPythonのバージョン番号を入力してください。

## インストールの確認

Pythonが正しくインストールされたかを確認するために、ターミナルで以下のコマンドを入力してください。

```sh
python --version
```

または

```sh
python3 --version
```

これでインストールされたPythonのバージョンが表示されます。
Optimal Transport Minimization: Crowd Localization on Density Maps for Semi-Supervised Counting


# 1. 概要
密集した群衆画像から正確に人数をカウントする技術は、Deep Learningの精度向上に伴って高精度化してきている。しかし、従来手法ではCNNs(Convolutional Neural Networks)などを用いて抽出した特徴マップに対して、そのピークを求めて人数をカウントするなどナイーブな手法だった。この研究では、CNNで抽出した特徴マップに対して最適輸送最小化アルゴリズム(Optimal Transport Algorithm)を逐次的に適用することで正確な人数カウントを実現している。

---

# 2. 新規性
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158742/c9e69788-8eeb-87aa-dd97-0053007a4755.png)
最適輸送問題を解くためにSinkhornアルゴリズムを用いており、CNNで抽出した特徴マップと実際の人がいる箇所との間の二つの確率分布の最小輸送パスを求める。ラフな特徴マップから正確な人の位置を推定できるよう問題を定式化した。

---

# 3. 実現方法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158742/af8f2ced-5d06-be7f-72d6-250372b4b9eb.png)
最小輸送パスを見つけるために、一方の分布をもう一つの分布に適切に変換するために必要な最小コストを逐次的に計算する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158742/ca4fb596-d763-218b-ed9d-8acf7f940f87.png)
学習は半教師有り学習(semi-supervised leraning)を採用しており、Sinkhornアルゴリズムで推定した人の位置(point map)を教師データとして用いることで、ラベリングの自動化を行っている。蒸留(distillation)を用いており、TeacherネットワークはEMA(Exponential Moving Average)をStudentネットワークに適用して重みが更新される。Teacherネットワークで予測した特徴マップにSinkhornアルゴリズムを適用してpoint mapを求め、これをStudentネットワークの学習にも使う。

---

# 4. 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158742/7705e01f-aa24-271c-5d3e-5cc1665ae977.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158742/dad0f6d9-2e3e-0498-3c77-fe3bc823985b.png)
ラベリングの割合が極めて少なくても高精度に人の位置を予測できることが分かった。Sinkhornアルゴリズムを逐次的に適用する際も高々10試行程度で正解に近づいている。

---

Paper URL: <https://openaccess.thecvf.com/content/CVPR2023/papers/Lin_Optimal_Transport_Minimization_Crowd_Localization_on_Density_Maps_for_Semi-Supervised_CVPR_2023_paper.pdf>

last updates: July 19 2023
[Vue.js]　v-modelを使用したフォームの基本を簡潔に

フォーム系のタグは、v-modelディレクティブを利用してリアルタイムに管理ができる。

input type=“checkbox”は複数の場合は配列に格納する。入るのはvalueの値。

```index.vue
<div id="app">
<input type="checkbox" name="" id="" v-model="Category" value="value-1" />
<input type="checkbox" name="" id="" v-model="Category" value="value-2" />
<input type="checkbox" name="" id="" v-model="Category" value="value-3" />
<p>{{Category}}</p>
</div>
<script src="app.js"></script>
```

```app.js
Vue.createApp({
  data: function () {
    return {
      message: 'メッセージ',
      Category: [],
    };
  },
}).mount('#app');
```

表示
![スクリーンショット 2022-06-20 12.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3587300/e85c91a8-6546-732c-3c60-0e398a670ebe.png)
aws cloud9でエラーがでた時の解決策の備忘メモ(You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.)

Mac環境+safariでaws cloud9を使っているときにエラーが出た時の解決策の備忘メモ

以下のようなエラーが出ました

```
You can't access preview functionality because your browser blocks third-party cookies (also known as cross-site tracking). To use previews, allow third-party cookies and reload your IDE.
```

以下を参考にして、safariの環境設定から「サイト越えトラッキングを防ぐ」のチェックを外す-->Mac再起動することで解決した模様

https://qiita.com/Pyama_5555/items/140f3eddbdb2b41a66ae
Dependabot version updatesを使ってみる

# 目次
1. 背景
2. dependabotとは
3. 使ってみる
4. 参考
5. 感想

# 1. 背景
以下のRenovateの記事を最近書きました。
https://qiita.com/yamatai12/items/c27afaf7c2883909f4ad

dependabotも似たようなものらしいので今回は実際にdependabotを使ってみます。

# 2. dependabotとは
https://github.com/dependabot#:~:text=Automated%20dependency%20updates%20built%20into%20GitHub
>Automated dependency updates built into GitHub

GitHubのbuilt-inで依存関係の自動更新をしてくれるツールとのことです。

# 3. 使ってみる
以下のdoc見ながら進めていきます。

https://docs.github.com/ja/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates

[こちらのリポジトリ](https://github.com/yamatai12/dependabot-lab)でdependabotを使ってみます。
以下がライブラリの依存関係です。
```package.json
"dependencies": {
    "typescript": "^4.1.6"
  },
  "volta": {
    "node": "18.18.0"
  }
```

dependabot.yml 構成ファイルをリポジトリにチェックインして、Dependabot version updates を有効にします。 
設定ファイルは、リポジトリに保存されているマニフェストまたは他のパッケージ定義ファイルの場所を指定します。
以下サンプルを参考に記述します。

https://docs.github.com/ja/code-security/dependabot/dependabot-version-updates/configuring-dependabot-version-updates#example-dependabotyml-file

```dependabot.yml
version: 2
updates:
  # Enable version updates for npm
  - package-ecosystem: "npm"
    # Look for `package.json` and `lock` files in the `root` directory
    directory: "/"
    # Check the npm registry for updates every day (weekdays)
    schedule:
      interval: "daily"
```
こちらを.github配下に置き、リモートブランチにpushします。

すると以下のようにPull Requestが作成されてました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/d1675bf9-92b5-baf8-cd90-608dbfc8288f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/52ba9c59-a540-e3bd-c6df-fbc32d004926.png)

package.json,package-lock.jsonも修正してくれてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/42bc7b48-b229-2707-9831-895582511cfd.png)

[前にRenovateで依存関係を監視](https://qiita.com/yamatai12/items/c27afaf7c2883909f4ad)した際はnodeのバージョンも上げるようにしてくれましたが、dependabotではしてくれないということが分かりました。

# 4. 参考
- https://tech.macloud.jp/entry/2022/07/27/182109
- https://zenn.dev/dzeyelid/articles/e36d439cdeda5edb7ddc

# 5. 感想
- dependabotはdependencies、devDependenciesしか見てないのか、他にもvoltaで書いたNodeバージョンも見てくれのか調べたいと思いました。
- Renovateの方が依存関係の監視でカバーしてくれるものが広いので今の所使えそうな印象です。
求人投稿用( job posting)のカスタム ジャンクション オブジェクトで求人サイト( job posting site)が見つかりません

不思議ですね。ここ数日よく見かけます。

+ [【未解決】Not able to find job posting site in custom junction object for job posting](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007PgX39)

基本的には

Had the same challenge. Solved it by creating new playground and installing the package and then open the AW Recruiting App. You will find the fields are already created and available for selection.

https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007DhAKB

同じ挑戦をしました。新しいプレイグラウンドを作成してパッケージをインストールし、AW Recruiting App を開くことで問題を解決しました。フィールドはすでに作成されており、選択できることがわかります

:::note
 In the second unit we're asked to create a "Job Posting site" custom object, please check the below screenshot for your reference. Can you please make sure you're checking in the correct org where you completed the previous units? 

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/51ae6719-82ac-4043-25ee-1c3d483e6115.png)
:::
オープンソースの住所正規化ライブラリ NormalizeJapaneseAddresses .NET版 公開

## 概要
https://github.com/mikihiro-t/NormalizeJapaneseAddressesNET

住所正規化ライブラリを、C#で.NETに移植したものです。

- [normalize-japanese-addresses](https://github.com/geolonia/normalize-japanese-addresses)
- [japanese-numeral](https://github.com/geolonia/japanese-numeral)

## 開発の目的

住所から郵便番号への変換が目的です。
そのために、住所を正規化する必要があります。

## 予定
#### Excelアドインに追加
- 住所正規化機能
- 住所から郵便番号に変換機能

を追加予定

https://ganges.pro/customer/blog/yuubinhelper/

#### ローカルのみで利用可にする
町丁目データ https://geolonia.github.io/japanese-addresses/api/ja
をローカルファイルとして利用できるようにする。


## 開発にいたる流れ
住所正規化について、以前から調べていました。
ただ、C#で利用できそうなものはなく、次のライブラリを作成して、利用していました。
[できるだけ正確に、住所を3分割（都道府県・市区町村・その他）する(C#)](https://qiita.com/hiro_t/items/aee87c1357a96cabd01f)
しかし、これだけでは、雑多に入力された住所の場合、住所から郵便番号への変換は困難です。

そのため、[normalize-japanese-addresses](https://github.com/geolonia/normalize-japanese-addresses)を利用できないか、検討しました。

#### 最初、TypeScriptからC#への移植を検討
TypeScriptは私の技術の範囲外なので、技術的に難しいと判断。

#### 次に、TypeScript(JavaScript)のコードを直接C#から利用できないか、試行錯誤
[C#のアプリから、JavaScriptを実行して、結果を受け取る](https://qiita.com/hiro_t/items/45460dea35db13e9bedf)
に書きましたが、できる可能性がありそうなので、ずいぶん試行錯誤しました。しかし、最終的に断念。

#### 最後、TypeScriptからC#への変換サービスを利用
調べるうちに、オンラインで、TypeScriptからC#へのコード変換サービスがあるのが分かりました。これを利用すると、ある程度形になったC#のコードが生成できました。これなら、修正すれば作成できるだろうと判断。難しい部分もありましたが、開発に成功。

#### 公開
GitHubに公開

#### 忘れないうちに、ドキュメントにまとめる
移植にあたって得た知識を、ドキュメントにまとめておかないと忘れてしまいます。Qiitaに技術的な記事を書きました。これで一段落です。

## 参照
- [TypeScriptからC#へ変換で、はまったポイント](https://qiita.com/hiro_t/items/6e1dd8a0c1a2d3b5cfbe)
- [JavaScriptと.NETのRegexは解釈が異なる（言語によって異なる）](https://qiita.com/hiro_t/items/b5963812544c6479dd2b)
- [日本の住所の正規化に本気で取り組んでみたら大変すぎて鼻血が出た。](https://qiita.com/miya0001/items/598070abcdf0799daebc)
[EIP4] EIPの分類を理解しよう！

# はじめに

初めまして。
**CryptoGames**というブロックチェーンゲーム企業でエンジニアをしている **cardene（かるでね）** です！
スマートコントラクトを書いたり、フロントエンド・バックエンド・インフラと幅広く触れています。

https://cryptogames.co.jp/

代表的なゲームは**クリプトスペルズ**というブロックチェーンゲームです。

https://cryptospells.jp/

今回は、EIPの分類を提案している**EIP4**についてまとめていきます！

:::note info
以下にまとめられているものを翻訳・要約・補足しながらまとめていきます。
:::

https://eips.ethereum.org/EIPS/eip-4

他にも様々なERCについてまとめています。

https://cardene.notion.site/ERC-EIP-2a03fa3ea33d43baa9ed82288f98d4a9?pvs=4

# 概要

この文書は、EIP（Ethereum Improvement Proposals）の分類方法を説明しており、**BIP123**から適応されました。
EIPsは、システムのレイヤーによって分類されており、数字が低いレイヤーほど、より複雑な相互運用性要件が関与します。
この仕様は、各標準のEIPがどのレイヤーに属するかを決定するための具体的な基準を定義しています。

# 動機

Ethereumは、さまざまな標準を含むシステムです。
一部の標準は、相互運用性のための絶対的な要件であり、他の標準はオプションと考えることができ、実装者がそれらをサポートするかどうかの選択肢があります。

相互運用性の要件をより反映するEIPプロセスを持つために、EIPを適切にカテゴリー分けする必要があります。
下位のレイヤーでは、標準を受け入れて展開する際にかなりの課題が存在します。

# 仕様

EIPの企画は以下の4つのレイヤーに分類されます。

- Consensus
- Networking
- API/RPC
- Applications

## コンセンサス レイヤー

コンセンサス レイヤーは、ブロックチェーンにおける非常に重要な部分です。
このレイヤーは、暗号コミットメント構造を定義し、ブロックチェーンの適切な動作を確保する役割を果たします。
具体的には、特定の状態や取引履歴が正当かどうかを個々のノードが独自に確認できるようにし、取引の決済を保証し、最終的な合意に至るプロセスを確保します。

コンセンサス レイヤーは、メッセージのネットワーク内での伝達方法には関与しません。
その代わり、取引の整合性を確保するためのしくみを提供します。

コンセンサス レイヤーにおける異論が生じると、ネットワークが分断されたり、異なるノードが異なる互換性のない取引履歴を受け入れる可能性があります。
さらに、コンセンサスレイヤーの変更は、ソフトフォークとハードフォークという2つのカテゴリーに分けることができます。

### ソフトフォーク
ソフトフォークでは、以前のルールで正当だった一部の取引が新しいルールに従うと正当ではなくなります。
以前のルールで不正当だった取引は、新しいルールでも不正当のままです。

### ハードフォーク
ハードフォークでは、以前のルールで不正当だった取引が新しいルールに従うと正当になります。

コンセンサス レイヤーは、ブロックチェーンネットワーク全体で取引の整合性と合意を確保するために極めて重要です。
また、ソフトフォークとハードフォークは、ルールの変更がブロックチェーン全体に与える影響の異なる方法を示します。

## ネットワーキング レイヤー
ネットワーキング レイヤーは、EthereumのコミュニケーションプロトコルであるEthereumワイヤープロトコル（eth）とLight Ethereumサブプロトコル（les）を規定します。
RLPxは除外され、[devp2p](https://github.com/ethereum/devp2p)で管理されています。

基本的なノード間の相互運用性を確保するには、一部のサブプロトコルだけが必要です。
ノードは追加のオプション拡張をサポートすることも可能です。

新しいサブプロトコルを追加することは、既存のプロトコルとの互換性を壊すことなく常に実現可能ですそして、古いプロトコルを段階的に非推奨化していくことができます。
この方法により、サービスの中断リスクを最小限に抑えつつ、ネットワーク全体をアップグレードできます。

ネットワーキング レイヤーは、Ethereumノード間での通信プロトコルを規定し、ネットワーク全体でのコミュニケーションを支えます。
新しいサブプロトコルの追加と旧プロトコルの非推奨化は、ネットワークの改善と発展を可能にし、サービスの連続性を確保します。

## API/RPC レイヤー
API/RPC レイヤーは、アプリケーションからアクセス可能な高レベルの呼び出しを規定します。
これらのEIPのサポートは、基本的なネットワーク間の相互運用性には必須ではありませんが、一部のクライアントアプリケーションから期待されることがあります。
このレイヤーでは、アプリケーションがブロックチェーンと対話し、データを取得し、操作するための手段を提供します。

## アプリケーション レイヤー
アプリケーション レイヤーは、異なるアプリケーションが類似の機能をサポートし、データを共有できるようにする高レベルな構造、抽象化、および規則を定義します。
このレイヤーは、異なるアプリケーション間での相互運用性を高め、ブロックチェーンを活用したさまざまなアプリケーションが類似の機能を共有し、データを交換できるようにします。

# 引用

Joseph Chow (@ethers), "EIP-4: EIP Classification," Ethereum Improvement Proposals, no. 4, November 2015. [Online serial]. Available: https://eips.ethereum.org/EIPS/eip-4.

# 最後に

今回は「EIPの分類を提案している**EIP4**」についてまとめてきました！
いかがだったでしょうか？

質問などがある方は以下のTwitterのDMなどからお気軽に質問してください！

[Twitter @cardene777](https://twitter.com/cardene777)

他の媒体でも情報発信しているのでぜひ他も見ていってください！

https://chaldene.net/

https://zenn.dev/heku

https://mirror.xyz/0xcE77b9fCd390847627c84359fC1Bc02fC78f0e58


https://cardene.notion.site/ERC-EIP-2a03fa3ea33d43baa9ed82288f98d4a9?pvs=4
AI-102試験対策のまとめ「検索インデックスの作成」

## はじめに
Azure AI Engineer Associate(AI-102)取得に向けた勉強でまとめた内容を本記事では投稿しています。
試験範囲の内容を私が勉強していく中で、
・忘れてしまっていた内容
・他の知識と絡めて理解した方が良い内容
・Microsoft Learnの読解に苦戦した内容
などをできるだけ分かりやすく簡潔にまとめることを意識しています。
Azureの勉強を一から始め、AI-102取得を目指している方の参考になれば幸いです。
※本記事の内容が必ず試験に出るわけではないこと、ご注意ください
※勉強しながら投稿しているため、追加で学んだことがあれば随時投稿内容を更新します。

## 試験対策のまとめ
### 検索インデックスの作成
下記の手順では、架空のホテルデータを含んだ組み込みのサンプルデータソースを使用

#### **「データのインポート」ウィザードの起動**
1. Azure Cognitive Search サービスに移動
1. 「概要」から「データのインポート」を選択して「データのインポート」ウィザードが起動

#### **検索インデックスに使用するデータソースに接続**
1. 「データソース」ドロップダウンリストを展開し、「サンプル」を選択
1. 組み込みのサンプル一覧で「hotels-sample」を選択  
    ※独自のデータソースを作成する場合は、名前/型/接続情報を指定
1. 「Next：Add cognitive skills (Optional)」を選択

#### **コグニティブスキルの構成をスキップ**
※この例ではAIエンリッチメントパイプラインは作成しない
1. 「Skip to：Customize target index」を選択

#### **インデックスの構成**
※この例ではシステムによって生成された値をそのまま使用
1. 「インデックス名」と「キー」をそのまま使用
1. すべてのフィールド属性をそのまま使用
1. 「Next：Create an Indexer」を選択

#### **インデクサーを構成**
定期的なスケジュールに従って実行するように構成可能  
※この例では既定のオプションを使ってインデクサーをすぐに1回実行させる
1. システムによって生成された値を「インデクサー名」にそのまま使用
1. スケジュールで「Once」を選択
1. 「Submit」を選択してインデクサーを作成
1. 作成と同時に実行され、インデックスが作成される

* 参考
    - https://learn.microsoft.com/ja-jp/azure/search/search-get-started-portal


## 次の試験対策のまとめ
* **AI-102試験対策のまとめ「Azure AI Video Indexerウィジェット」**

https://qiita.com/fsd-jume/items/7be35c66b2f1147ce50f

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/65aba5d5514e023fd66d
chromaticなにそれ？


コードの変更におけるUIの変更をレビューすることができるようになるツールです。
Storrybookのチュートリアルで触りを学ぶことができます。

:::note info
deplyの項目で確認することができます！
https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/
:::

https://www.chromatic.com/docs/


## chromaticとは？
Storybookと連携してビジュアルリグレッションテストを実行することができます。
各コンポーネントのスナップショットを生成し、画像を比較し差分を検出することができます。

また、作成・編集されたコンポーネントのUIレビューを行うことができ、Githubと組み合わせることでUIのチェックステータスをGithub上で確認することができるのでQAテストまでのステータスを一元管理することができます！

### chromaticの利用料金
料金プランがいくつかあります。
プランによってできることが異なるので事業で利用する場合は事前に確認しておくと良いと思います。

https://www.chromatic.com/pricing

プライベートで勉強したぐらいであればFreeのプランで問題ないと思います！

有料プランは
- STARTER: $149/月
- STANDARD: $349/月
- PRO: $649/月
- ENTERPRISE
の4つあります。

グレードを上げるとテストできるブラウザが増える、スナップショットの数が増えるなどがあります。

:::note warn
ブラウザテストをChrome以外でも行いたい場合はSTANDARD以上のプランでないといけません。
また、VRTを利用したいと考えchromaticを利用するのであれば、reg-suitを利用して独自で実装する方法もあるので合わせて検討いただくのが良いと思います！
:::

## chromaticはUIレビューできる仕組みを提供してくれる
前述でも触れましたが、chromaticはビジュアルのレビューUIやUXのフィードバックを蓄積することができます。

もちろんFigmaなどデザインツール内のコメント機能を利用するなど、制作のワークフローを工夫することでコードレビューのように社内にノウハウを蓄積することはできます。

ただ、より効率的にノウハウを蓄積することができるかつコード側とも紐づくので管理も容易になります。

## chromaticの設定を学びたい時は？
Storybookの公式でtutorialを用意してくれているのでそちらから一通り学ぶことができると思います！

https://storybook.js.org/tutorials/design-systems-for-developers/react/ja/introduction/

Storybookの内容も多く含まれるので同時に学ぶと良いと思います。
chromaticはStorybookの利用を前提としており、もっと言うとデザインシステムを構築することも前提とされています。

:::note info
開発チームが大規模であればあるほどデザインシステムがもたらす恩恵は大きいと思います。
Storybookやchromaticもそうですが、導入で得たいものは何か？を明確にできるよ良いのではと考えます！
:::

## まとめ
Figmaとの連携などもできるそうで、デザインとの連携もよりシームレスかつ強化できそうなイメージがわきました。

これまでデザインとコードを紐づけるのは運用でカバーするなど管理という面では悩ましい部分が多かったと思いますが、その点は解決してくれそうだというのが所感です。

Saasサービスであるためメンテナンスコストは抑えることができる反面、細かい要望には対応しにくいというデメリットはあります。

ENTERPRISEプランであれば叶えられる可能性はあります。

ただ、実装されている機能以上のことはできませんので特殊な要件がある場合やVRTが使いたいだけということであれば独自実装を選択することがいいかもしれないのでよく検討いただけると幸いです
【エラー】このファイルのアクセス許可が更新されたため、このファイルを表示する権限がありません

# 事象
OneDrive 上にある Excel ファイルを開こうとすると、

:::note warn
このファイルのアクセス許可が更新されたため、このファイルを表示する権限がありません。
このファイルに対して以前に変更を加えた場合は、保存されない可能性があります。
:::

というエラーメッセージが表示されて開けなくなったとのこと。
特定の端末あるいはアカウントで発生しているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/36847b39-44d5-60ca-4796-9c145ac312eb.png)

メッセージの内容的には OneDrive（SharePoint）のアクセス権に起因しているように見えますが、ダイアログのタイトルが「Microsoft Excel」になっているので、このメッセージは Excel が出していると判ります。

試しに、このファイルをCドライブ等のローカルディスクにコピーし、ローカルディスクから開こうとするとどうなるでしょうか ➡ 開けました。

永続ライセンス版の Office を過去に使ったことがあると、このようなことがあるらしいのですが、該当端末ではこれまで Microsoft365 のライセンスしか使っていません。

# 対処
端末上の認証情報不整合が原因の場合、Officeアプリの認証情報を削除することで解決できる場合があるようです。

以下の手順を試してみます。

## Office からサインアウト
Officeアプリケーションの [アカウント] から [サインアウト] をクリックします。

## Azure AD Join の解除
これは該当する場合に実施します。
Windows の [設定]－[アカウント]－[職場または学校にアクセスする] より、Officeライセンス認証を行ったアカウントを選択し、[切断] をクリックします。

## Officeクライアントアプリのキャッシュ削除
%LOCALAPPDATA%\Microsoft\Office\16.0\OfficeFileCache やレジストリ、資格情報を粛々と削除していくのですが、公式がツールを配布していると判ったのでそれを使います。

https://learn.microsoft.com/ja-jp/office/troubleshoot/activation/reset-office-365-proplus-activation-state?_fsi=4fsIADx6

`OlicenseCleanup.vbs` を実行し、端末を再起動します。
なお、Office2019 の場合、Officeアップロードセンターからもキャッシュを削除できるらしいです。
Experience Builderのまとめ

[コミュニティの設定に戻る](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Py0CI)

+ [Experienceビルダーでのページ削除について](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Py0CI)

:::note
確かに英文を見ても同じ記述ですね。矛盾していると感じました。

以下のヘルプを読むと削除できる場合には条件がありそうな記述です。

[ページアクション] メニューから、次の操作を実行できます。

+ [ページの設定] をクリックして、URL、レイアウト、バリエーションなどのページのプロパティを編集します。
+ [ページの設定] から、[ページのバリエーション] をクリックし、ページの代替バージョンを作成して、ページの表示に関する利用者の条件を設定します。選択したページがテンプレートページでなければ、そのページとバリエーションを 1 回のクリックで削除できます。
 エクスペリエンスビルダーでのサイトのページとそのプロパティの管理

https://help.salesforce.com/s/articleView?id=sf.community_builder_manage_pages_overview.htm&type=5
:::

+ [Why hyperlinks in a community site page don't work?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007PvUQR)

:::note

プレビューモードではできないことがある


Within Experience Builder in Preview mode, certain features are not available in their entirety. This is expected behavior.

List of current limitations:

+ Submitting attachments with cases
+ Embedded snap-ins chat
+ **Hyperlinks in components**
+ Add Profile Picture
+ Preview Surveys
+ Flow component Preview
+ URL Redirect
+ External URL type in Navigation menu  
+ Preview of CMS Document (PDF/Docs)

Preview mode within the Experience Builder
https://help.salesforce.com/s/articleView?id=000383579&type=1
:::
PythonでのGmailの自動化

## はじめに
PythonでのGmail送信自動化の備忘録です💁
初心者です😅
間違えてる部分多々あると思います。
もし見つけた場合、ツッコミいただけると助かります🙇


## 内容
PythonにGmailを送るときに使えるやり方。
関数化しておいて後で再利用できるように作成。

### メール処理定義

```python:sendsys.py
import smtplib
from email.mime.text import MIMEText


def send_email(from_email, to_email, subject, message, smtp_password, smtp_host='smtp.gmail.com', smtp_port=587):
    msg = MIMEText(message, 'plain')
    msg['Subject'] = subject
    msg['To'] = to_email
    msg['From'] = from_email

    with smtplib.SMTP(smtp_host, smtp_port) as server:
        try:
            server.starttls()
            server.login(from_email, smtp_password)
            server.send_message(msg)
            print(f'メール送信が完了しました。')
        except Exception as e:
            print(f'メール送信に失敗しました:{e}')
```

### メール内容を定義
本文、件名などを決めておいて送信できるように設定。
「処理に成功」「処理に失敗」
このようなシーンでメールでの通知が欲しいシュチュエーションに合わせて内容を記載する。

```python:sample.py
from sendsys import send_email

# 処理が成功した際にメールを送る機能
def success_send():
    # 送信するメールの情報を設定
    # 送信元
    from_email = '*****@gmail.com'

    # メールを送る相手のアドレス
    to_email = '*****@gmail.com'

    # 件名
    subject = 'テストメール'

    # 本文
    message = '今日も最高でした。'

    # アプリパスワードを設定
    # やり方 Googleのアカウント→セキュリティ→2段階認証→アプリパスワード
    smtp_password = 'eaqa kyvh pmso xzmr'

    # メール送信関数を呼び出す
    send_email(from_email, to_email, subject, message, smtp_password)
```

:::note info
押さえておくべき点🧠
* アプリパスワードの取得
* Gmailの受信メールなどの機能を使いたい場合はAPI
:::

## 参考にしたサイト
[Pythonでメール作成・自動送信](https://qiita.com/taidong5588/items/731c7f226e80c5b908d5)
【AWS re:Invent 準備編】英語力の不安を軽減する為に準備する３のコト

# はじめに

あっという間にAWS re:Inventまで後３週間と迫ってきましたね:wink:

そこで、英語力がとても不安な私が海外に行く時に行っている英語力の不安を軽減するための準備事項を３つ紹介します！

今年参加予定の皆さんや、来年以降参加を検討されている皆さんの参考になれば幸いです:airplane_small:

re:Invent 準備編の記事として以下も投稿しておりますので併せて読んで頂けましたら嬉しいです:relaxed:

https://qiita.com/mizuki_hori_POHD_CCoE/items/baf357e3857370cd3067

# AWS re:Inventとは

AWS 最大規模のラーニングカンファレンスで、世界中から約5万人の参加者が集まります。会期中は、新サービスやサービスアップデートの発表が大量に行われます。re:Inventに参加することでAWSの最新情報を入手する事が出来ます！

つまり、約１週間にわたってAWSにずっぷり浸かることができるカンファレンスです:writing_hand:
AWS re:InventはAWSユーザーの武者修行といっても過言ではないです:lifter:

詳細は公式サイトをご確認ください。

https://reinvent.awsevents.com/

# その① 入国審査で質問されそうなことは印刷！:card_index:

私自身、英語に不安があるため入国審査が一つの心配事です:airplane:（共感してくださる方、多いのではないでしょうか！）

そんな時に活躍するのが、よく聞かれる内容について記載されている紙です！
一般的に入国審査で聞かれる内容は以下かなと思います。

- USに来た目的（観光？ビジネス？）
- （ビジネスの場合）職業、勤務先
- USのどこに行くのか？
- 滞在期間
- 宿泊先はどこか？
- 帰りの航空チケットの有無

さらに、現金はいくら持っているか、何人で行くのかも聞かれたことがあります。


入国審査のタイミングでスマホをいじることはかなりハードルが高いですので、上記の項目をみて答えられるか不安な方は必要な情報については予め印刷していくことをオススメします:fist:

- 宿泊先情報（ホテルの名前、ホテルの所在地が記載されているもの）
- 帰りのフライト情報が記載されているeチケット
- （ジャパンツアーの場合）申し込みを行ったプランの行程表

ITのイベントに行くのに・・このデジタルの時代に・・と思ってしまいますが、入国審査で頼れるのは紙です！
長時間フライトでの疲労もありますし、入国審査官の英語がなにも聞き取れなく焦ったときには必要情報が含まれる紙を見せれば審査官が確認してくれると思います。

私はいつも必要なかったとしてもお守りだと思って持っていきます:writing_hand:



# その② 現地で話しそうな英語はメモしていく:writing_hand:

re:Invent中は英語で話かけられる場面は多いです。例えば、受付の時やEXPOでグッズを受け取る時に企業スタッフと軽く話す等多数あります。そんな時どうすれば良いか不安ですよね。

そこで、現地で使いそうだなと思う英文をメモしておいて毎朝確認することで急に話かけられても最低限コミュニケーションができるように準備しています。

私がメモしている英文から利用する可能性が高い２つの英文を紹介します。とても初心者英語ですが、しっかり準備してきた！ということが自信になり英語で話かけられた時の不安を軽減できます:relaxed:

:grinning:  My English is not so good, so could you contact me by e-mail ?
（私は英語があまり得意ではないので、Eメールで連絡をいただけますか？）
主にEXPOで活躍するフレーズです。この文章と一緒に名刺を差し出してお渡しする事で相手も察してくれますし、ネットワーキングもできます。

:grinning:  What field of AWS are you interested in?
(AWSのどの分野に興味がありますか？)
主に食事のタイミングやセッションの合間に話かけられた時の返しとして活躍するフレーズです。

シンプルな英文ほどパッと出てこない為いつもメモしています。
参加者全員がなにかしらAWSを活用している場所ですので、AWSについての話をすると楽しいと思います:100:

その他聞いてみたい事等があれば事前にメモをしていき、自分だけの英文シートを作成していくことをオススメします:pencil2:

# その③ re:Invent出発日まで毎日10分以上英語を浴びる

普段英語を利用していないような場合ですと現地で突然英語を耳にすると、何も聞き取れず耳のシャッターが降りてしまうかなと思います:sweat:

私は、耳シャッター現象を起こさせないためにも毎日１０分以上英語を聞くようにしています。最初は抵抗ありましたが、電車の時間や洗い物をしている間だけBGMとして聞いていると徐々に単語が聞き取れるようになってきます:sunny: 

これを毎日行うことで、少しずつ英単語が聞き取れるようになり、現地でもなんとかなるという自信がついてきます:sunglasses:

楽しく英語を毎日聞くために私が聞いているコンテンツは以下２つです。日常生活の話や、現地でのやりとりを知ってリアルな英会話を聞くことができるので、何を聞いたらいいかわからない方にオススメです！

https://www.youtube.com/channel/UCPlreGCqby4Qg9Vuem5scpw

https://podcastranking.jp/1518322346



# 最後に

まとめますと、英語が不安な私がいつも準備していることは３つです！（英語が得意な方はこのような準備は不要かと思います:sunglasses:）

:::note info
-  入国審査で質問されそうなことは印刷して手元に持っておく:card_index:
-  現地で話しそうな英語についてはメモしていく:writing_hand:
- re:Invent出発日まで毎日10分以上英語を浴びる
:::

私は英語がペラペラではないので海外に行くというだけでとても不安になりますが、準備を工夫する事でその不安を軽減するようにしています。

折角の貴重な機会なので全力でその場を楽しむための準備として、皆様の参考になると嬉しいです:shamrock:
ぜひ現地に参加される方は、日本では味わうことができない特別な雰囲気を楽しんで下さいね:tiger:

# :maple_leaf: 弊社では一緒に働く仲間を募集中です :maple_leaf: 
現在、様々な職種を募集しております。
カジュアル面談も可能ですので、ご連絡お待ちしております！

募集内容等詳細は、是非採用サイトをご確認ください。
https://engineer.po-holdings.co.jp/
タブ

~~~javascript
// 現在のタブの情報を取得
var currentTab = browser.tabs.getCurrent();

currentTab.then(function(tabInfo) {
    // タブのタイトルを取得
    var tabTitle = tabInfo.title;
    
    // タブのURLを取得
    var tabUrl = tabInfo.url;

    console.log("タブのタイトル:", tabTitle);
    console.log("タブのURL:", tabUrl);
}).catch(function(error) {
    console.error("エラー:", error);
});
~~~

~~~javascript
// すべてのタブの情報を取得
browser.tabs.query({}).then(function(tabs) {
    tabs.forEach(function(tab) {
        // タブのタイトルを取得
        var tabTitle = tab.title;

        // タブのURLを取得
        var tabUrl = tab.url;

        console.log("タブのタイトル:", tabTitle);
        console.log("タブのURL:", tabUrl);
    });
}).catch(function(error) {
    console.error("エラー:", error);
});

~~~

~~~javascript
// 新しいタブを開く前に同じURLのタブが存在するか確認する
function openNewTabIfNotExists(url) {
    browser.tabs.query({ url: url }).then(function(tabs) {
        if (tabs.length > 0) {
            // 同じURLのタブが存在する場合、そのタブをアクティブにする
            browser.tabs.update(tabs[0].id, { active: true });
        } else {
            // 同じURLのタブが存在しない場合、新しいタブを開く
            browser.tabs.create({ url: url });
        }
    }).catch(function(error) {
        console.error("エラー:", error);
    });
}

// 使用例
var targetUrl = "https://example.com";
openNewTabIfNotExists(targetUrl);
~~~

~~~html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Window Example</title>
</head>
<body>

<!-- ボタンをクリックすると新しいウィンドウが開かれる -->
<button onclick="openNewWindow('https://example.com', 'exampleWindow')">Open Example.com in a new window</button>

<script>
function openNewWindow(url, windowName) {
    // 同じ名前のウィンドウが存在するか確認する
    var existingWindow = window.open('', windowName);

    if (existingWindow) {
        // 同じ名前のウィンドウが存在する場合は既存のウィンドウをアクティブにする
        existingWindow.focus();
    } else {
        // 同じ名前のウィンドウが存在しない場合は新しいウィンドウを開く
        window.open(url, windowName);
    }
}
</script>

</body>
</html>

~~~
【Vue.js】watch(ウォッチャー)の使い方

# watch（ウォッチャー）とは
データの変更があった場合に、事前に登録した処理を実行する。

# watchのvalueの中身
```ruby:HTML
 <section id="events">
      <input type="text" v-model="name">
      <p>Your Name:{{ fullName }}</p>
    </section>
```

```ruby:Javascript
const app = Vue.createApp({
  data() {
    return {
      fullName:''
    };
  },
  watch:{
    name(value){
      console.log(value)
    }
  },
}).mount('#events');

```

コンソールで引数valueの値を確認すると、
①入力値が変更される度に
②入力値がvalueに格納
されていることが分かる。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521217/208c69c2-ef9a-d1b9-4f3e-ded2d30cf99b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521217/c6fd3e15-2de6-8ec6-7f6e-62fb999bf44f.png)


# 実践
watchの処理内容を以下のようにvalueを使ったものに変更する。
```ruby:Javascript
  watch:{
    name(value){
      if(value === ''){
        this.fullName = ''
      }else{
        this.fullName = value + ' ' + 'yamada'
      }
    }
  }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2521217/fbcbd6d6-fa85-696d-7bbb-72a5954b4e67.png)
# おわりに
場合によってはcomputedの方が処理を短く書ける場合もある。
うまく活用していきたい。

# 参考
https://ja.vuejs.org/guide/essentials/watchers.html
Vueの勉強で活用中⇒https://www.udemy.com/course/vuejs-2-the-complete-guide/
GitHub Pagesを使ったサイトの公開を説明してみた

昨今、自分のサイトを公開する方法は色々ありますが、今回はGitHub Pagesを使って公開する方法を実践してみたので、やり方を説明してみたいと思います。

## 1. コードエディター(Visual Studio Code等)でサイトの中身を作成する。
具体的にはindex.htmlファイル、必要であればCSSファイルや画像ファイル
(※トップページとしてindex.htmlを見に行くように設定されている為。)
index.htmlファイルはHTMLで記述されたファイルでサイトのコンテンツを記述したものです。
公開するだけであればindex.htmlファイルだけでも問題ありませんが、サイトを装飾したり画像を掲載したい場合はCSSファイルや画像ファイルを使います。
  ![INDEX,HTML.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/0de0f533-ab10-b965-e675-2bfd5829b9ec.jpeg)

## 2. Gitを使ってコミットする。
Gitとはシステム開発で用いるバージョンを管理する為のツールです。
今回はGitHubにサイトを立ち上げるので、Gitツールを通してGitHubにデータを送ります。

必要なデータ(index.html, CSSファイル, 画像データなど)の作成が終わったら、Git Bash(gitコマンドを使う為のプログラム)を通して`git add`, `git commit`のコマンドを使ってファイルをコミットする。
作成したデータは最初はワーキングツリーというエリアに存在します。

`git add` コマンドを使うことで対象のデータをステージエリアに移動することができます。
(※ステージエリアとはコミットする対象のデータを置くエリアです。
ステージエリアに移動するファイルは一つだけ指定したり、フォルダ全体を指定することが可能)
記入例１：`git add .`カレントディレクトリ以下の全てのファイル、フォルダの変更内容が対象
記入例２：`git add ファイル名 or フォルダ名` 指定したファイルやフォルダのみが対象

次に`git commit` コマンドを使って対象のデータをローカルリポジトリに移動します。
(※ローカルリポジトリとはリモートリポジトリに移動する対象データを置くエリアです。)
記入例：`git commit -m "コミットコメント"`
-mでコメントを記入するというオプション指定、コミットコメント欄には何をコミットするか等を記入
ローカルリポジトリにデータを移動することでHPを掲載する場所であるGitHubへデータを移動する準備ができます。
  ![Git.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/be9a3963-301c-a0df-e307-dcdacc3b4a1d.jpeg)

## 3. Gitを使ってリモートリポジトリにPushする。
コミットまで終わらせたらGitHubにあるリモートリポジトリにPushする。
これにより編集した内容についてローカルリポジトリとリモートリポジトリの内容が同じになる。
(ローカルリポジトリの内容をリモートリポジトリに反映させることができる)
コマンドは`git push origin main`などと記入します。
`origin`とはリモートリポジトリのことで`main`はリモートリポジトリのmainというブランチを指します。
(※ブランチとは１つのプロジェクトから分岐させることにより、プロジェクト本体には影響させずに開発を進められる機能を指します。初期状態では`main`のみだが、他にブランチを設定することが可能。)

## 4. GitHubの対象リポジトリでサイトの設定をする
対象リポジトリのページに移動して、①Settings → ②Pages → ③Branchに移動する
Branchの欄でサイト設定に必要なファイルがあるブランチを設定する
ブランチ直下に必要なファイルが置いてある場合は/(root)を置き場所として設定
もし他のデータと分ける必要がある場合は/(docs)というフォルダの下に配置することも出来る

ページ最上部のYour site is live at のURLが自分のサイトのURL
※もしindex.htmlファイルがフォルダの階層に入ってしまっている場合はURLの後に階層を入れる必要有り
例：https://tohru-f.github.io/resume/sample/index.html
これはresumeというリポジトリの中にsampleフォルダがあり、その下にindex.htmlがある場合

公開する時のブランチはmainである必要は無く、他のブランチから公開することも可能です。
稀にサイトを公開できない時がありますが、そんな時はリポジトリを一度削除して再作成もやってみましょう。
私は一度どうしても公開できなくて、リポジトリを作り直した経験があります。
![GitHub Pages after decoration.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3508918/01e76309-119b-24d3-a635-a922817d564c.jpeg)


## 5. サイトを変更する場合は新たにコミット、Pushを行う
サイトの内容を変更したり、追加したい場合は元のデータ(PC内にある)を編集して保存する。
編集して生まれた差分は初回と同様に`git add`, `git commit`のコマンドでローカルリポジトリに移動させる。
ローカルリポジトリのデータを`git push`でリモートリポジトリに反映させる。
DreamboothでSD1.5のオリジナルモデルを作るメモ

## 必要なもの
・Colab proアカウント
・Colab(pro)-Dreambooth
https://github.com/TheLastBen/fast-stable-diffusion
・512x512,768x768の画像

## 手順

![スクリーンショット 2023-11-08 045951.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/5aa230db-02ab-9f97-2bd0-daee4a350878.png)

ドライブにコピーする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/5d51345c-9a62-c0e5-82ce-6d534242e8e5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/e7c738a5-b41f-87f2-349b-0cc23e2e0c41.png)

T4を使っている状態なのでA100に変更する。
ランタイムのタイプ変更をします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/b651acdd-5a59-8df6-cfcf-55f4dc77c696.png)

自身のドライブにアクセスできるようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/4dfc9972-1f06-e77e-76a0-ceb875ee0906.png)

依存関係の話なのでそのままクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/5f186581-a5cc-5a5d-75ef-2f385e75f162.png)

学習モデルの設定をします。基本SD1.5でいいですが、希望があれば2.1を指定します。
Path_to_HuggingFaceのトークンが必要になるのは指定したいモデルがあるときだけです。空欄にしておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/8fe3e17a-1a60-e96e-7ed1-96ef980266bd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/0c7ee874-b372-385e-c969-a6f6d56fff8f.png)

Session_Nameはモデルの名前になります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/625ef454-6a8f-d14c-184c-6bf7b12a4c97.png)

このままクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/50e754cd-da41-7977-16c4-2dc36ce9a9ca.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/884bc7ca-056c-ee95-2ff9-b86b21b319d2.png)

下にファイル選択が出てくるのでファイルを複数枚選択して開く。
※注意点。画像の命名がプロンプトになります。今回はJapaneseGirlとしています。JapaneseGirl(1)、JapaneseGirl(2)となるようにしましょう。画像サイズは512x512に加工する。
背景、ポーズ、表情、などすべてがばらばらになるようなものを用意しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/3883daba-9d53-c792-8602-9e24e3893cbb.png)

これはクリックしなくてよいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/0b1458c1-4793-0d73-046b-414003d03daf.png)

コードを表示し、UNet_Learning_Rateの部分を書き換える必要があります。
UNet_Learning_Rate = 2e-6 #@param ["2e-5","1e-5","9e-6","8e-6","7e-6","6e-6","5e-6", "4e-6", "3e-6", "2e-6"] {type:"raw"}
となっているのを、
UNet_Learning_Rate = 2e-6 #@param ["1e-6","1e-5","9e-6","8e-6","7e-6","6e-6","5e-6", "4e-6", "3e-6", "2e-6"] {type:"raw"}
untlr=UNet_Learning_Rate
に書き換えてください
1x10の-6乗

わざわざ小さい学習量を作る理由はstep数を多くして、学習量を小さくすることで高ビットレートで学習できるような状態を作りたいためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/547b4751-df7f-95ac-aeaa-6d3dc2448eb5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/b3fefee6-6cfe-0158-f494-3f2cba8688fb.png)

以上の形に変更し、実行するとトレーニングが開始されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609493/14683df7-a279-b1bd-93b4-5ee3aefa0e02.png)

学習が終わったらJapaneseGirlColの直下にckptファイルができています。（画像ではまだ学習中なのでできてません）
【最新版】Expo（React Native）にESLintとPrettierを導入する方法

自分のプロジェクトでExpoを使ってアプリ開発をする際に行なった、ESLintとPrettierの導入の手順を備忘録も含め残しておきます。

（とはいえ、ほぼほぼ[Expoの公式Doc](https://github.com/expo/expo/tree/master/packages/eslint-config-universe)に従った感じですが。）
## 全体的な流れ
まずは全体的流れです。
以下の４ステップでできます。

1. パッケージのインストール
2. 既存ファイルの修正
3. .prettierrc作成
4. （オプショナル）TypeScriptへの対応

それぞれ簡単に解説していきます。

## 1. パッケージのインストール
今回は`eslint-config-universe`を使います。
ので、それをまずはインポート。
```commandline
yarn add --dev eslint-config-universe
```
もし`eslint`や`prettier`のパッケージ等をまだインストールしていない場合は以下も併せてインストールします。
```commandline
yarn add --dev eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
```
## 2. 既存ファイルの修正
インストールした`eslint-config-universe`の設定を`package.json`と`.eslint.*`にインポートします。
```package.json
{
  "eslintConfig": {
    "extends": "universe"
  }
}
```
```.eslint.js
module.exports = {
  extends: 'universe',
};
```

### extendsの設定値
extendsに指定できるのは上記のuniverse以外にもいくつかあります。
- `universe/native`: Expoを含むReactNativeのプロジェクト用の設定
- `universe/web`: Webブラウザで実行されるコード用の設定
- `universe/node`: Nodeで実行されるコード用の設定


ちなみに、`universe`は特定の設定がない場合のプロジェクトに用いるためのベーシックな設定となります。

## 3. .prettierrc作成
Prettierの設定カスタマイズのための`.prettierrc`を作成します。
デフォルトからカスタマイズしない場合はスキップしてOKです。

以下のような感じで、お好みで`.prettierrc`を設定してください。
```.prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5"
}
```

## 4. （オプショナル）TypeScriptへの対応
TypeScriptを導入している場合は、以下の設定もしておきましょう。
```.eslint.js
module.exports = {
  extends: [
    'universe',
+   'universe/shared/typescript-analysis',
  ],
+ overrides: [
+   {
+     files: [
+       '*.ts',
+       '*.tsx',
+       '*.d.ts'
+     ],
+     parserOptions: {
+       project: './tsconfig.json'
+     },
+   },
+ ],
};
```
## まとめ
非常に楽にESLintとPrettierを導入できる。

ESLintの設定等いろいろ変更できるが、それが面倒な人やあまりわからないなど特にこだわりがなければこれで良さそう。

## 参照
https://github.com/expo/expo/tree/master/packages/eslint-config-universe
Linuxの基礎 1日目

# 1日目

## 1 Linuxとオープンソース

### 1-1 OSって何だろう？

- OS（基本ソフトウェア）はハードウェアとアプリケーションを仲介するソフトウェアである
- 代表的なOSには、Windows, macOS, UNIXがある
  - LinuxはUNIXを改良（UNIXを参考作成）されたOSである

### 1-2 Linuxについて知ろう

- Linuxはカーネル部分の名称である
  - カーネルとは何か？
    - Linuxの中枢プログラムの名称である。以下の機能を管理するプログラムの総称である。
      - ファイルシステム管理
      - メモリ管理
      - 仮想記憶
      - プロセス管理
      - ネットワーク管理
      - デバイス管理
- LinuxをOSとして使えるようにした配布形態がディストリビューションである
  - ディストリビューションとは何か？  
    - Linuxカーネルに、ライブラリやツール、インストーラが組み込まれた一つの製品（OS）のことである。
      - 要は、一つのLinuxOSの商品をひとまとめに完成されたことを「**Linuxディストリビューション**」という。
- ディストリビューションには、**Red Hat系**や**Debian系**、**その他**がある
  - Red Hat系
    - Fedora(フェドーラ)
      - 無償（無料）のディストリビューションである。
    - Red Hat Enterprise Linux
      - 有償（有料）のディストリビューションである。
    - CentOS(セントオーエス)
      - 無償ディストリビューションを**RHELクローンOS**というが、その中で最も知られているのが**CentOS**である。
      - RHELとほぼ100%の互換性を持ち、わずかな遅れでセキュリティアップデートを随時しているため、レッドハット社のサポート不要とする企業、個人の間では人気のディストリビューションである。

  - Debian系
    - Ubuntu(ウブントゥ)
      - 無償（無料）のディストリビューションである。
      - 使いやすさを重視しているので、主にGUIでのデスクトップ用途で人気が高い
      - 最新版は4月と10月に半年おきに、リリースされる。
      - LTS（長期サポート）版は、5~10年はサポートされている。
    - Linux Mint（リナックス・ミント）
      - Ubuntuから派生したディストリビューションで、使いやすいデスクトップOSを目指して開発されている。
    - Raspbian(ラズビアン)
      - RasberryPi向けのディストリビューションで、Debian GNU/Linuxをベースに作られている。
        - RasberryPiとは？
          - 超小型のワンボードコンピュータ
          - 現在は、手軽なIoTデバイスとして、さまざまな分野で使われている。

  - その他
    - Slackware(スラックウェア)
      - 8cm CDに収まるようコンパクトにした、SLAXなど、いくつもの派生ディストリビューションが生み出されている。
    - openSUSE(オープンスーぜ)
      - Slackwareから派生した、無償のディストリビューションで現在は、ノベル社などが支援するコミュニティ、openSUSE Projectによって開発されている。
      - デスクトップからサーバ用途まで幅広く使用することができ、独自のシステム管理も充実している。
      - 企業向けには、SUSE Linux Enterprise Server(SLES)が飯場にされている。

### 1-3 オープンソースとは

- オープンソースではソースコードを自由に利用できる
  - Linuxではソースコードが公開され、誰でも自由に閲覧・改変が可能である。
- オープンソースのライセンスとしてGNU GPLなどがある
  - Linux(OS)、Samba(ファイル共有サーバー)、GCC(コンパイラ)など
- オープンソースを支えるコミュニティがある
  - 日本Sambaユーザー会
  - 日本PostgreSQLユーザー会
  - 日本MySQLユーザー会 など...
システム運用保守を2年以上やってわかったこと

# はじめに
自身がお客様先でシステム運用保守を2年間以上やってきた中で、
わかったことや必要なことをまとめてみました。
※内容によっては現場で変わってくると思います。

私はエンジニアとしてまだ経験は浅いですが、
これから運用保守を始める方が雰囲気を知るための記事になればと思い投稿しました。

## 作業の種類
現場によって違いはありますが、
私の現場では以下4つの作業に分けられておりました。

・定型作業（定常作業）
　⇒決まった時期に依頼される。手順なども確立されていることが多い。
・不定型作業
　⇒調査対応やデータ抽出など、作業時期がランダムなもの。
・問い合わせ対応
　⇒そのサービスを使用しているユーザーが絡んでいることが多い。
  　急ぎの対応として依頼されることがほとんど。
・障害対応
　⇒最優先。主に原因の判明と復旧を行う。

通常業務の中では定型作業、不定型作業がメインとなっており、
稀に問い合わせ対応や障害対応をするような流れとなっております。

## 基本的にはマルチタスク
様々な依頼が発生するため、どうしてもマルチタスクになります。
タスクの中には期日までが近いものや遠いもの、
その作業を対応する日が指定されているものなど複数存在するので
優先順位やそれぞれに使う工数などを考慮して作業する必要があります。

## 正確さとスピードが必要
問い合わせ対応や障害対応では、
速やかに原因と解決法をお客様に提示する必要があります。
そのため、大量の設計書やドキュメント、過去の対応ログなどから
必要な情報のみを探し出す能力と判断力が必要です。

## 初めて対応する依頼はメモを残す
リーダーでさえ対応したことがない不定型作業の依頼が来ることもあります。
大概は他の不定型作業の手順などを応用することで対応自体はできますが、
同じ依頼が再度来た時に他のメンバーでも円滑に対応できるようにするため、
手順書やメモを残すことが重要です。

## 文章力、説明力が必要
これはSEをやってる方であれば共感できるかと思いますが、
エンジニアではないお客様には専門用語を使わずに作業の内容などを説明する必要があります。
また、メールやRedmineなどを使用して伝えるとなった場合は
わかりやすく見やすい文章を作成する能力も必要になります。

## コミュニケーションが多く発生します
お客様とチーム内（開発メンバーも含め）でコミュニケーションが多く発生します。
Wチェック（1人作業してもう1人が不備がないかをチェックする）作業や
調査対応の規模によっては2人以上で対応することもあるため、
連携を意識して動くことも必要です。

## 幅広く技術の知識が必要
もちろんプログラミング言語のことだけ勉強すればいい、というわけではありません。
サーバー、DB周り、などインフラ面の知識も必要になってきます。
現場によってはクラウドの知識も必要です。

## 設計書や作業手順書のメンテナンスも必要です。
長く使われているシステムだとサーバーが変わったりしているため、
更新が必要になってきます。
また、設計書なども「古い情報がそのままになっていた」ということもあるため、
空き時間を利用してメンテナンスを行うことにより
間違った情報の拡散を防ぐことも重要です。

## まとめ
運用保守は幅広く知識が求められ、スピードと正確性が必要な仕事だと思っております。
「技術」といえば色々な意味がありますが、
上記で述べたような作業方法に関する技術も重要だと思いました。

この記事を読んでいただきありがとうございます。
これから運用保守を始める方が雰囲気を知るための足掛かりとなれば嬉しいです。
【Linux】lessコマンドでファイル内を検索、行数の表示、ページ送りをする方法をまとめてみました

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民こと、
新藏（にいくら）と申します♪
(/・ω・)/

Linux、みんな好きですよね。
先日Linuxのlessコマンドを使用した時に何個か便利なオプションが出てきました。

そこで今回は**Linuxのlessコマンドで便利なオプションについて**記事にしたいと思います！
IT初心者の方、Linuxについて勉強中の方の参考になれば幸いです。
(*^^)v

# 2.lessコマンドとは
まず初めに、lessコマンドが何かについてですが
**「テキストファイルを1行ずつ表示するコマンド」** となります。

基本的な使い方としては以下の様にlessの後ろに、
内容を確認したいファイル名を指定するとファイルの中身が表示されます。

```:コマンド例
less test.txt
```

**十字キーの上下を押すとスクロールができ、
「q」を入力するとファイルを開くのを終了してCLIに戻ります。**

:::note info
テキストファイルを確認するコマンドとして「cat」コマンドもありますが、
catコマンドはテキストファイルの中身をすべて表示するコマンドとなります。

私のイメージとなりますが、
ファイルの行数が多いときはlessで少しずつ確認することが多いです。
:::

## 2.1.特定の文字列を検索する
lessコマンドではファイルに特定の文字列が含まれるかを、検索することができます。

具体的にはlessコマンド実行後に、
**スラッシュ + 検索したい文字列**を入力し、エンターキーを押します。

以下は「TEST」という文字列を検索しています。
```
/TEST
```

エンターキーを押した後は
**「n」で次の候補、「N」で前の候補を表示することができます。**

## 2.2.行数を表示する
lessコマンドを実行しただけでは各行が何行目かは分からないのですが、
**lessコマンド実行後に「- N」を実行すると行数が表示されます。**

イメージは以下となります。

```:lessコマンド実行直後
あ
い
う
え
お
```

```:「- N」実行後
1 あ
2 い
3 う
4 え
5 お
```

## 2.3.ページ送りをする
十字キーだけでは1行1行スクロールされるので、
ファイルが大きいと少々大変ですが、ページ単位で次へ進むことができます。

**lessコマンド実行後に「f」で次のページ、「b」で前のページを表示します。**

```:lessコマンド実行直後 or 「f」実行後の画面にて「b」実行後
あ
い
う
え
```
```:「f」実行後
お
か
き
く
```

# 3.おわりに
ここまで読んで下さり、ありがとうございます！！！
(^^)

今回はサクッと備忘録的な内容でしたが、
lessコマンドは使う機会が多いのでまとめてみました。
次回も何かしら記事にします♪
(:3_ヽ)_
【iOS】iPhoneでもpopoverを吹き出しにする方法【SwiftUI】

# はじめに

左みたいなポップアップを出したいだけだったのに、かなりハマったので備忘録。
調べて出てくるpopoverの見た目と手元の環境での見た目(右)がまるで違う。昔は左がデフォルトだったのだろう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603149/bad1e285-56dc-76e6-bc2f-c3cbc60635b3.png" width="300">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603149/61dd6f90-d8d1-902f-cc21-8c3a6e1d5880.png" width="300">

# 結論
1. デプロイの設定を`iOS 16.4`以上にする。
2. `.presentationCompactAdaptation(.none)`をつける。

```swift
var body: some View {
    @State var popoverVisible = true

    VStack {
        // メインコンテンツ
        ...
    }
    .popover(isPresented: popoverVisible, attachmentAnchor: .point(.bottom), arrowEdge: .bottom) {
        Text("text")
            .presentationCompactAdaptation(.none)
    }
}
```

# 参考文献

https://www.swiftyplace.com/blog/swiftui-popovers-and-popups

https://www.yururiwork.net/archives/1065

# おわりに
一つ目の記事の`How to set the size and location of a popover in SwiftUI?`でかなりサラッと書かれている。
日本語で調べた限りだと解決に繋がる記事は見つからなかった。
iOS(swift)ってポップアップ系のUIこれしかないと思っているのだが、みんな必要としてなかったり別の何かが存在したりするんだろうか。
初めてのDockerでぶち当たったエラー集

# 自分が体験した Docker エラー集

## はじめに
　どうも、最近Dockerを完全に理解したpizaです。
 一通りの操作に慣れるまでに遭遇したエラーたちを備忘録としてまとめてみました。実は、発見したエラーの殆どがスペルミスだったのですが、、、
 それはそうと、これらの発生要因について自分なりに読み解いてみました。どなたかのお役に立てれば幸いです。
　この記事では、Docker 24.0.6のバージョンを使用しています。また、一部エラー文は`{}`や`~~`で置き換えを行っています。

## エラー集
### 1. パーミッションエラー
>permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post ~~ : dial unix /var/run/docker.sock: connect: permission denied.

#### 概要
初期動作確認でsudo を付けてDockerを実行しようとしたときに検出された。Dockerを実行するには権限がないというエラー文。

#### 解決方法
```terminal
$ sudo groupadd docker
$ sudo usermod -aG docker $USER
$ newgrp docker

$ docker run hello-world
```
本来の解決方法と違うかもしれないが、Dockerの権限をユーザに与えてみた。
まず、Dockerのユーザグループを作り、ユーザをDockerグループに追加する。次に、newgrpコマンドで変更内容を反映。最後に、` docker run hello-world`で動作確認。

:::note warn
`sudo service docker restart` では反映されなかった。
:::

### 2. プロパティエラー
> validating {docker-compose.yml}: Additional property {service} is not allowed

#### 発生箇所
```yaml:docker-compose.yml
service:
        app:
        db:
```

#### 概要
プロパティの追加が何かしらの原因で出来なかった状態。キーが足りないとき、間違っているときに表示される。

#### 解決方法
```yaml:docker-compose.yml
services:
        app:
        db:
```
今回はスペルミスだったので「service」⇒「services」に修正して解決。


:::note warn
Composeの`services`はコンテナを定義する上で必要不可欠なものである。
参考 : https://github.com/compose-spec/compose-spec/blob/master/spec.md#services-top-level-element)
:::

:::note info
`version`は下位互換性のため、Compose 仕様に定義されている。ほとんどは単なる情報(=コメント)として扱われる。
:::

### 3. 構文エラー
>   line 24: mapping key "type" already defined at line 21
  line 25: mapping key "source" already defined at line 22
  line 26: mapping key "target" already defined at line 23

#### 発生箇所
```yaml:docker-compose.yml
volumes:
    type: bind
    source: ./docker/db/init.sql
    target: /docker-entrypoint-initdb.d/init.sql
```

#### 概要
`type`や`source`が`volumes`の同列のキーとして認識されてしまっている。インデントが正しくないときにも表示される。

#### 解決方法
```yaml:docker-compose.yml
volumes:
    - type: bind
      source: ./docker/db/init.sql
      target: /docker-entrypoint-initdb.d/init.sql
```
`--volume docker-practice-db-volume:/var/lib/mysql`はリスト要素の一つなので「-」を`type`の前に追加し、インデントを整えた。


## 最後に
Dockerの学習に特におすすめなのが、[**「実践 Docker - ソフトウェアエンジニアの「Docker よくわからない」を終わりにする本」** ](https://zenn.dev/suzuki_hoge/books/2022-03-docker-practice-8ae36c33424b59)です。私がDockerに対して感じていた苦手意識を克服させてくれた本なので「Dockerが難しそうだから触れない、、、」と悩んでいる方に強くおすすめします！！是非、読んでみてください！！

それでは、お互い楽しい Docker Life を過ごしましょう！
最後までお読みいただき誠にありがとうございました。

## 参考
1. パーミッションエラー
https://docs.oracle.com/cd/E39368_01/E75728/html/section_rdz_hmw_2q.html
https://qiita.com/ryoishizawa/items/1a459516b770548299fd

2. プロパティエラー
https://qiita.com/mida12251141/items/2e07cb332e436e56fcc9
https://qiita.com/tomocrafter/items/ae1217e54e7a66bc6a87

3. 構文エラー
https://kyozon.net/list/what-is-yaml/
swag: No such file or directoryとなった場合の対処法[WSL(ubuntu)]

## TL;DR
### ubuntuの場合
.bashrcを編集。
```
vim ~./bashrc
```
環境変数を登録
``` .bashrc
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin
```
編集後に更新をかける。
```
source ~/.bashrc
```


## 発生事由
swag コマンドは使えるが、makeコマンドでエラーが発生。

エラー理由を調べるために `which swag` でパスを読むと環境変数が存在しないことが判明した。

## 解決法
調べていくとキャッシュが悪さをしているようなので、`hash -r`でリセット。

また、VSCodeで作業していることも一因のようで、`go env`によるとパスは通っているが、ubuntu環境では通ってなかったので登録しました。

あとの詳しいことは下記参考記事を参照ください。

## 参考記事
https://stupiddog.jp/note/archives/951
https://tech.librastudio.co.jp/entry/index.php/2018/02/20/post-1792/