OmniAICreator/Qiita-1.07M huggingface dataset:
async/awaitについて理解する

async/await、なんとなく知ってるけどなんとなく使い方が分からないまま放置してしまい今に至るので、自分で色々な書き方を試して理解を深めてみた。

以下例などはほぼ[MDN]('https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await')ですが、自分がMDN以外からも学んだ内容などをまとめて書いています。

①awaitは別に必須ではない
`async`キーワードなしに`await`は書けませんが、`await`なしで`async`をつけることはできます。(MDNの言う通り、実際何も必要がないものを待ってもasync/awaitを付ける意味がないけど)

ちなみに知っての通り`await`は待ちが入るので、以下のメソッドを実行すると`test1`の実行結果が出てきます。

```index.js
async function test1() {
    return "hello"
}

async function test2() {
    return await "hello"
}

console.log(test1());
console.log(test2());
```

②asyncを付けた関数はPromiseを返す
asyncキーワードが付くとPromiseが返されるので、`then()`で受け取ることもできます。

```index.js
async function test2() {
    return await "hello"
}

test2().then(res => console.log(res)); 
```

ちなみにこれは勉強しながら知ったのですが、async/awaitがよく使われる例だと大体API呼び出しとかだと思うのですが、呼び出したAPIの結果をJSONにして使うのに`.json()`メソッドをよく使うと思うのですが、これもPromiseを返すようです。

```index.js
async function dataObj() { 
    return await fetch('https://randomuser.me/api/?gender=female')
}
        dataObj()
        .then(res => res.json()) //pending
        .then(res => console.log(res)) //実際のAPIの結果
```

ちなみに本来的にawaitを付けないと意味がない部分にawaitをつけないとどうなるのか。

```index.js
async function fetchData() {
            try {
                const res = await fetch('https://randomuser.me/api/?gender=female').then(res => res.json())
                console.log(res) //data
            } catch(e) {
                throw new Error("failed to fetch")
            }
            
        }

        fetchData();

        async function fetchData2() {
            try {
                const res = fetch('https://randomuser.me/api/?gender=female').then(res => res.json())
                console.log(res) //pending
            } catch(e) {
                throw new Error("failed to fetch")
            }
            
        }

        fetchData2();
```

上のawaitを付けた方はちゃんと`res`変数に値が入るのですが、Promiseがfulfilledされないまま返してしまうようで、pendingの初期状態のPromiseが格納されてしまっていました。
Swift初学者日記〜配列と辞書の違い〜

おはようございます。

Swiftを勉強中の初学者です。

今回は備忘録として、配列と辞書の違いについて学んだ事を紹介していこうと思います。

＊間違っていたらご指摘していただくたありがたいです。

# 結論

結論として、配列と辞書のメリット・デメリットをまとめておきました。

| 種類 | 内容 | メリット | デメリット |
|:-:|:-:|:-:|:-:|
|  配列 | 複数の値を手軽に扱える  | 手軽に複数のデータを格納できる  | 添字が数字なので、内容理解に時間がいる  |
| 辞書  | 複数の値をわかりやすく  | わかりやすくデータを扱う事ができる  | 添字を指定するのが面倒  |

では二つの違いについて紹介していきます。

# 配列
配列は、複数のデータを一つにまとめる事ができる機能の事です。データ数は任意で決めることができます。

##配列の宣言

配列の宣言方法は以下の通りです。

```swift:example.swift
//配列名 = ["データ","データ","データ"]//
var fruits = ["orange","apple","banana"]
```

まずvar(letでもOK)で配列名を書きます。

その後角括弧( [] )を書いた後、入れたいデータを記入します。

ひとつのデータを書き終わったら、カンマ（,）を書いて次のデータを記入します。

これで用意は完成です。

##配列のデータの呼び出し方

データを呼び出す時は以下のように書きます。

```swift:example.swift
//配列名[添字]//

//使用例
print(fruits[0])//orange
print(fruits[1])//apple
print(fruits[2])//banana
```
配列宣言時に決めた名前の隣に角括弧とその中に**添字**を入れることで呼び出すことができます。

添字というのは、配列のデータの位置を示す数字で、0から始まります。

#配列のデメリット
配列は変数や定数と違い、多くのデータを扱う事ができるので非常に便利な機能になります。

しかし、添字が数字であるが故に、呼び出すときにどのような中身なのかわからない事があります。

例えば、配列の宣言場所と呼び出し場所が離れていると、中身のデータがわからなくなるので、確認がめんどくさくなります。

そこで登場するのが**辞書**です！

#辞書

辞書は添字に整数以外を指定できる配列のことです。
任意で添字を決める事ができるので、より配列の中身を簡単に確認する事ができます。

#辞書の宣言
辞書の宣言方法は以下の通りです。

```swift:example.swift
//var(let) 配列名 = [キー名:データ]//

//使用例
var fruits = ["apple":"りんご","banana":"バナナ","orange":"オレンジ"]
```

まず、任意の配列名を書きます。

その後、**[キー名:値]**といった方法で書いていきます。

**辞書の特徴は、キー名を設定する事ができる点です。**

値を呼び出す時にこのキー名を使用します。

#辞書のデータの呼び出し方
呼び出し方は以下の通りです。

```swift:example.swift
//配列名[キー名]//

//使用例
print(fruits["apple"])//Optional("りんご")
print(fruits["banana"])//Optional("バナナ")
print(fruits["orange"])//Optional("オレンジ")
```

配列名を記入後に、自分で決めたキー名を記入することで、値を呼び出す事ができます。

任意のキー名を設定する事で、配列の中身がどういった物かを確認しながら操作することができます。

#まとめ

辞書が無難かもですね。
C#でカノジョをつくる（9日目）

お疲れ様です。たなしょです。
今日から[こちらの本](https://www.amazon.co.jp/Visual-2022%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC-Perfect-Master-186/dp/4798066192)で勉強していきます。
ただ最初から3章目までは[スラスラわかるC#](https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8BC-%E7%AC%AC2%E7%89%88-%E4%BA%94%E5%8D%81%E5%B5%90-%E7%A5%90%E8%B2%B4/dp/4798154636)で学習した内容とかなりかぶるので、適宜記載を省略していきたいと思います。

## Visual CSharp
今まで知らなかったですけど、Visual Studioで使うC#だから`Visual C#`というのですね。
`Visual C++`はVisual Studioで使うC++ということになりますね。
勝手にGUIアプリが作れるC#がVisual C#だと思っていました。

## .NET Framework
昔は.NET Frameworkと.NET Coreと別れてた気がするんですけど、今はまとめて.NETという名称になったんですね。
このフレームワークのおかげでGUIアプリを作れたり、データベースに接続できるんですね、
前に現場でVB.NETを使ってた現場で働いてましたね。その時も.NET Frameworkを使ってたんだと思うんですけどMVCとして使っていた[Seesar](seasar.org)の印象が強いのですっかり忘れていました。

## CLR
JavaでいうところJVMみたいなものですよね。
.NET FarameworkのプログラムはMSLという中間コードのコンパイルされるんですね。今度中身を見てみたいです！
あとはJVMと同じでガベージコレクターがあって、JITコンパイラがあって～という感じですね。詳細は省略します。

## Visual Studio使い方
色々と使い方を学びました（笑）
ファイルのアイコンの種類ってこんなにあるんだっけ？と全然別のところで関心しました。
さすがに9日間も使ってるので基本の操作はわかってるつもりです。
でもソースコードのキーワードを選択して`F1`を押すとマイクロソフトのドキュメントに飛べるのは便利だなと思いました。
今度から使っていきたいです。

## 最後に
今回はプログラミングしてないですね汗
はじめにも書いたのですが2,3章は今まで学習した内容と重複する部分が多いので、簡単なアプリなどをつくったり、新しく学んだ知識があればブログに書いていきます。もうアプリを作り始めてしまってもいいかもしれないですね。
ReactでStateの更新がうまくいかないなと思った時に疑ってみて欲しいこと

## はじめに

この記事は<a src="https://qiita.com/advent-calendar/2021/jsl">JSL(日本システム技研) Advent Calendar 2021</a>の記事です。
Reactで「なんかStateの値が意図したのもと違うんだけど！？」と思った時に読んでほしい記事になります。
1年目のペーペーですが、少しでもuseStateの挙動の理解の助けになれば幸いです。

## そのStateの更新関数、複数回呼ばれていないですか？

結論から言いますと、一回の処理の中で複数回Stateの更新関数がよばれているため、Stateの値が意図した値と異なっている可能性があります。

なぜ複数回Stateの更新関数が呼ばれるとStateの値が意図したものと異なってしまうのでしょうか？
というのをもったいぶって以下で説明します。（この章いらんかったかもしれない）


## Stateの更新関数が複数回呼ばれた時の挙動

例として、Reactを学んだことがある人なら１度は見たことがあるようなありがちなサンプルで説明します。

![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1035658/361a8c1b-a899-4a59-d004-c15ff36cf57c.gif)

こんな感じのボタンを押すと画面に表示されている数字がインクリメントするだけのサンプルです。
コードはこんな感じ

```react
import { useState } from 'react'

const Conponent = () => {
  const [number, setNumber] = useState(1)
  const countUp = () => setNumber(number + 1)
  return (
    <div>
      <button onClick={countUp}>+1</button>
      <h1>{number}</h1>
    </div>
  )
}

export default Conponent
```


仮にこのサンプルで、一度ボタンを押しただけで、numberというStateを、2ずつ、3ずつ増やしたいとした時、みなさんならどうしますでしょうか？



下のコードような感じの例を思いついた人が多いのかなと思います。
しかし、このうち例1は正常に動作するものの、例2は正常に動作しません。

```react
// 例１ こちらはボタンを押すと2ずつインクリメントしてくれる
const countUp = () => setNumber(number + 2)

// 例2 こちらはボタンを押しても1ずつしかインクリメントされない
const countUp = () => {
  setNumber(number + 1)
  setNumber(number + 1)
}
```

下のGIFを見ると、例２の場合、countUpの中で3回Stateの更新関数（setNumber）を呼んでいるにもかかわらず1ずつしか増えないことがわかると思います。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1035658/e7dab489-a94c-8b97-4961-b3d1a85c5c9a.gif)

setNumberを3回実行しても、現在のnumberの値に1を足すことを3回やるだけなので、最終的な更新結果は現在のnumberに1を加えただけということです。（説明難しいですが、最後のsetNumberの処理だけ生きるみたいなイメージ持ってもらえると）

## Stateを関数の戻り値で更新する

今回のようなただ特定の数字を増やすようなケースであれば、例1のようなコードを書けば済む話かとは思いますが、実際に複数回Stateの更新関数を呼び、前回値を使いたいときはどうすれば良いのか、、、？

そういったニーズに応えるべく、useStateのStateの更新関数には、引数に関数を取ることができ、その関数の第一引数に前回値を保持するという機能があります。（その関数の戻り値が更新する値になります。）

```react
const countUp = () => {
  setNumber(number + 1)
  // preの中に前回値（このケースだと上のsetNumberで+1された値）が入る
  setNumber((pre)=>pre + 1)
}
```

このコードであれば1回目のsetNumberで更新した値を、preが保持してくれているので、一回目のsetNumberで`number+1`、2回目のsetNumberで`(number+1)+1`のような処理になり、countUpを１度呼ぶだけでnumberが2ずつ増えてくれます。

以下のGIFのようなな感じで今度は3ずつ増やせています。（ボタン表示が+1のままでややこしいですが）
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1035658/8f7e0e0a-6ca3-1c5e-6f91-c0dc78fa2b14.gif)

このように複数回Stateの更新関数を呼びたい（かつ前回値を使いたい）ときは、関数の戻り値で更新するようにしましょう。

## これが意外とバグの原因になりうる

タイトルが<b>「ReactでStateの更新がうまくいかないなと思った時に疑ってみて欲しいこと」</b>であるにもかかわらず、これまで、useStateの便利機能紹介みたいな記事になっておりすいません。

この複数回Stateの更新関数が走った時の挙動がらみで、アプリ開発中、意図したデータが返ってこなかったり、意図した表示にならなかったりすることがあるので注意しましょうということが言いたかったわけです。

私自身、Stateの更新をしているのに、正常に更新できていないみたいなケースで、調べてみると、実は遠いところで複数回にわたり更新関数が呼ばれていたりすることは何度かありました。(色んなところで別々にStateを更新していると起きやすい）

また、意図して複数回Stateの更新関数を使う時も、このuseStateの前回値保持の機能を知らないと、最後の更新関数だけ生きてその前の更新関数の処理は無かったことになってしまうので気をつけましょう。

## おわりに
<a src="https://qiita.com/advent-calendar/2021/jsl">JSL(日本システム技研) Advent Calendar 2021</a>
先輩方の良記事が見れますので、興味あったら覗いてみてください。
という宣伝だけ最後にしておきます。
括弧書き満載の拙い記事でしたがお読みいただきありがとうございました。
【Git Bash, conda】Git Bashでcondaを使えるようにする

## 環境
+ Microsoft Windows 10.0.22000.318（21H2）
+ conda 4.11.0
+ Git Bash 2.34.1.windows.1

## 手順
1. スタートで「conda.sh」と入力して「パスのコピー」をクリック。
1. コピーしたパスの `\` を `/` に置き換える。（そのままだと上手くいかなかった）
1. Git Bashで `echo ". PATH" >> ~/.profile` を実行。（ `PATH` の部分に2のパスを入れる）--> これで、Git Bash起動後すぐにcondaコマンドが使えるようになる。
1. `conda activate ENVNAME` で環境を指定。（デフォルトのconda環境なら `conda activate base` ）

## 確認
`conda list` を実行すると、以下のように表示される。

```powershell
$ conda list
# packages in environment at C:\Users\USERNAME\.pyenv\pyenv-win\versions\Anaconda3:
#
# Name                    Version                   Build  Channel
_anaconda_depends         2021.11                  py38_0
_ipyw_jlab_nb_ext_conf    0.1.0                    py38_0
_tflow_select             2.3.0                     eigen
absl-py                   0.13.0           py38haa95532_0
...
```

## 参考
https://tropicbird.hatenablog.com/entry/2020/09/15/150400
Prettierでmarkdownフォーマットすると漢字とアルファベットの間にスペース開くやつ直す(VSCode)

```text
Amazonは、11月26日（金）午前9時から12月2日（木）午後11時59分までの7日間のビッグセール「Amazonブラックフライデー」を開催します。
```

↓ Run prettier

```text
Amazon は、11 月 26 日（金）午前 9 時から 12 月 2 日（木）午後 11 時 59 分までの 7 日間のビッグセール「Amazon ブラックフライデー」を開催します。
```

直します
Prettier v3で直されるらしいですがいつ出るかわからないからね

## 結論
[tats-u/prettier-plugin-md-nocjsp](https://github.com/tats-u/prettier-plugin-md-nocjsp)を入れてVSCodeの設定をごちゃごちゃする

- 参考:[和欧文字間（漢字仮名と英数字の間）に半角スペースが挿入されないようにするPrettier Markdownプラグインを作った - Qiita](https://qiita.com/tats-u/items/bcbfe2bb4e71bf0a2b87)

## 直す

プラグイン入れる(拡張機能とは別に手元にPrettierも入れる必要があります)
ローカル環境でしかフォーマットしないなら`global`とか`-g`いらないです

```sh
# yarn
$ yarn global add prettier prettier-plugin-md-nocjsp

# npm
$ npm i -g prettier prettier-plugin-md-nocjsp
```

VSCodeの`prettier.prettierPath`にPrettierのmoduleパスを追加する(binではないので注意)
具体的には、yarnなら`$(yarn global dir)/node_modules/prettier`、npmなら`$(npm root -g)/prettier`を設定すればよいです

```sh
$ echo $(yarn global dir)/node_modules/prettier
/home/ras/.config/yarn/global/node_modules/prettier
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693676/76bac535-4e69-0f2b-2dc0-58552682c4e5.png)

OR

```diff:setting.json
{
  ...,
+ "prettier.prettierPath": "/home/ras/.config/yarn/global/node_modules/prettier"
}
```

治ります

Prettier拡張機能で入れてるのにnodejs環境用意してPrettierさらに入れないといけないのびみょいのでもっといい方法があればコメントください
Rails Devise インストール方法

#このページの目標
DeviseをRailsにインストールする

###環境
ruby 2.6.3
rails 2.6
cloud9

#Deviseとは
Railsで作成したアプリケーションに、
ユーザー名やメールアドレスを使用してログインを行うなどの認証機能を簡単に実装する事ができるライブラリ（Gem)

#1 Gemfileに追加

Gemfileの最終行にDeviseを追加する。

```ruby:Gemfile
gem 'devise'
```

注意：deviseをdeviceと記述してしまわないように気をつける


#2 アプリケーションに読み込む


追加したGemをアプリケーションに読み込むためにターミナルに記述

```
$bundle install
```

Gemを変更したら必ずbundle installのコマンドを実行する


#3 初期設定を行う


下記コマンドを実行し、初期設定を行う

```
$rails g devise:install
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309717/32d25b58-6dd0-7fb1-1d9b-162a30d41d6d.png" width="80%">

上記の表示が出ればインストール＆初期設定の完了
【Git Bash for Windows】アップデート時のssh-agentに関するエラー

## 環境
+ Microsoft Windows 10.0.22000.318（21H2）
+ Git Bash 2.34.1.windows.1

## 現象
`git update-git-for-windows` でGitのアップデートをした際、以下のように書かれたエラーダイアログが表示された。

```
The following process(es) use Git for Windows:
ssh-agent.exe
Please terminate those processes and retry.
Alternatively, cancel to abandon setup altogether.
```

## 原因
ssh-agent が起動していた（＝Git を使用していた）ために、アップデートできなかったようだ。

## 対処法

`ssh-agent -k` を実行して ssh-agent を停止することで解決した。
ちなみに、起動するときは、`ssh-agent bash` を実行する。

## 参考
https://qiita.com/Yarimizu14/items/6a4bab703d67ea766ddc
複数利用者向けJupyterHub環境構築

#目的
社内で簡単なデータ分析ハンズオン（複数人向け）をやる必要があり、そのための環境構築を目的に実施。
最初はあまり考えずに、Jupyter Notebook環境をEC2（Linux）上に構築し、複数人にログインしてもらってやろうとしたが、５人目からログインできなくなり、EC2サイズを変えてもダメだったので、断念（ちゃんと調べてません）。
なので、JupyterHubを構築する方向に変更。

#環境条件
- JupyerHubサーバ
    - EC2：t2.micro（構築時はこちらで進めて、利用時はスケールアップ。）
    - OS：Red Hat Enterprise Linux 8 (HVM), SSD Volume Type
    - Disk：汎用SSD（GP2） 30GB

セキュリティグループの設定等はいい感じに。

#構築手順

ec2-userでログイン

```
# rootユーザにスイッチ
sudo su - 
```

```
#ソフトウェアの更新
dnf update -y
```

```
#wgetのインストール
dnf install -y wget
```

### Python環境構築はminicondaで実施
```
#minicondaのインストールスクリプトのダウンロード
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
```

```
#スクリプトを実行するための権限変更
chmod 775 Miniconda3-latest-Linux-x86_64.sh
```

```
#インストールスクリプトの実行
bash Miniconda3-latest-Linux-x86_64.sh
```
いくつか質問があるので、以下で回答。
Enter
yes
/opt/miniconda3
yes

```
#環境変数の読み込み
source ~/.bashrc
```

```
#仮想環境の構築
conda create -n py39 python=3.9 anaconda
```

質問には以下で回答。
y

```
#py39環境のアクティベート
conda activate py39
```

```
#Jupyeter関連の必要なソフトウェアのインストール
conda install -c conda-forge jupyterhub
```

質問には以下で回答。
y

```
conda install -c conda-forge notebook
```

質問には以下で回答。
y

```
conda install -c conda-forge sudospawner
```

質問には以下で回答。
y

```
#jupyterhub用ディレクトリ構築
mkdir /opt/jupyterhub
```

```
cd /opt/jupyterhub
```

```
#JupyterHub設定ファイルの生成
jupyterhub --generate-config
```

```
#管理者アカウントの作成
useradd jupyter
passwd jupyter
```

```
#管理者アカウント用の作業
su - jupyter
mkdir notebooks
touch notebooks/jupyter
```

```
#利用者アカウントの作成
useradd test
passwd test
```

```
#利用者アカウント用の作業
su - test
mkdir notebooks
touch notebooks/test
```

```
#JupyterHub設定ファイルへの追記
vi /opt/jupyterhub/jupyterhub_config.py 
```
追記内容は以下の通り。

```jupyterhub_config.py 
#管理者アカウントの登録
c.Authenticator.admin_users = {'jupyter'}
#利用者アカウントの登録（増やす場合にはここに追記）
c.Authenticator.allowed_users = {'test'}

#以下パラメータはうまく説明できません笑
c.JupyterHub.confirm_no_ssl = True
c.JupyterHub.spawner_class = 'sudospawner.SudoSpawner'
c.Spawner.notebook_dir = '~/notebooks'
```

```
#サービス登録のためのファイル作成
 vi /lib/systemd/system/jupyterhub.service
```

```jupyterhub.service
[Unit]
Description=Jupyterhub

[Service]
User=root
Environment="PATH=/opt/miniconda3/envs/py39/bin:/opt/miniconda3/condabin:/usr/lib64/qt-3.3/bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/root/bin"
ExecStart=/opt/miniconda3/envs/py39/bin/jupyterhub -f /opt/jupyterhub/jupyterhub_config.py
WorkingDirectory=/opt/jupyterhub

[Install]
WantedBy=multi-user.target
```

```
#サービスのアクティベート
systemctl enable jupyterhub
```

```
#jupyterhubの起動
systemctl start jupyterhub
```

#接続テスト

http://<IPアドレス>:8000にブラウザからアクセスし、
jupyterとtestのアカウント/パスワードでログインできることを確認。
OS上でユーザを追加し、設定ファイルにも追記することで利用者を量産。
【React】 UseEffect を使用して、コンポーネントの特定の処理が呼ばれたときだけある処理を実行する

今回のテスト
ボタンとテキストボックスを用意して、ボタンをクリックするときだけ、カウントをする。

■以下前提のコード

```react:sample.js
import React,{useState,useEffect} from 'react'
const sample= () => {
}
export default sample
```
■以下テストコード

```react:sample.js
import React,{useState,useEffect} from 'react'

const BasicUseEffect = () => {
    const [cnt,setCnt] = useState(0)
    const [item,setItem] = useState('')
    useEffect(()=> {
        console.log("useEffect invoked")
    },[cnt])

    return (
        <div>
            <button onClick={()=> setCnt(prevCnt=>prevCnt+1)}>Click {cnt}</button>
            <input type='text' value={item} onChange={evt=>setItem(evt.target.value)}/>          
        </div>
    )
}

export default sample
'''
■結果
ボタンをクリックしたときだけ、ブラウザのコンソールに「useEffect invoked」がよばれる。
※const [item,setItem]の定義の最後にある　,[cnt]　部分を削除すると、テキストボックスに文字を入力したときと、
　ボタンを押したときの両方でブラウザのコンソールに「useEffect invoked」がよばれる。
時間のないエンジニアの簡単な革靴お手入れ

#何でQiitaで革靴を？
こんにちは！GxPの小松崎です。
この記事は[グロースエクスパートナーズ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/gxp)の14日目です。


エンジニアの技術系サイトで、何ぜ革靴の話をしているのか？私もそう思います。
しかし、エンジニアとて社会人、技術力ももちろんだけど、身だしなみにも気を付けたい。
コロナ禍で客先に行くことも少なくなって、履いていない革靴が下駄箱の中で死んでるハズ！
さらには、靴をお手入れにより靴を長持ちさせようじゃないの。安い靴を使い捨てる生活とおさらばだ。個人で体現できるミクロサステナブル万歳！

本記事はそんな革靴を100均で手に入る道具によって簡単にお手入れをし、革靴の救済と身だしなみの向上を目指す！
そんな記事です。
※本記事では天然皮革製靴をモデルとしていますが、別に合成革でも同じ手順で良いです。
※※液体タイプや薬剤のしみ込んだスポンジ式靴磨きもこの世には存在ます。
　　個人の宗教的理由により今回のお手入れでは使用しません。

#必要な道具をそろえよう
必要な道具は100均ですべて揃います。
![IMG_3780.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/f2c75d2c-1a91-e29d-d947-1ac0f8dbe267.jpeg)
右から靴ブラシ(豚毛) 靴ブラシ(馬毛) コットン靴磨きクロス
左に移って、靴クリーナー 靴クリーム(茶) 靴磨きミトン

これだけ買っても600円！(税抜き)
今回試してみてもっと拘りたかったら、良いやつを買い揃えましょう。コロンブスのツヤ革専用クリームはオススメ
※靴クリームは原料にシリコンを含まないものを選んでください。
　シリコン配合品は揮発する際に革の水分を奪い、靴に大敵の乾燥を招きます(受け売り)
  シリコン防水スプレーも同様です。

#実際にやってみる
###工程(カッコ内は使用する道具)
1. ホコリ落とし(靴ブラシ(馬毛))
1. クリーナ塗り(靴クリーナ)
1. 靴クリーム塗り(靴ブラシ(豚毛)＋靴クリーム(茶)
1. ブラッシング(靴ブラシ(豚毛))
1. 布磨き(靴磨きミトン)

##今回のターゲット
靴箱の中に居ました。いつ磨いたか判らない革靴。
色は褪せ、潤いはなくなり…今助けるぞ！
![IMG_3777.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/65e8eeed-52e3-427f-e5a2-b2400433b2ae.jpeg)

##1.ホコリ落とし
靴ブラシ(馬毛)で靴のホコリを落とします。適当でいいです。
![IMG_3786.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/51763ded-0e3d-8a2f-db67-3837dec6d09e.jpeg)

##2.クリーナ塗り
クリーナを塗って革に潤いを与えます。雰囲気でいいです。
なんとなく、革に生気が戻ったような…(右が磨き中。左が元のまま)
![IMG_3788.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/d429fd51-dad2-d193-227c-d7389eeedfff.jpeg)

##3.靴クリーム塗り + 4.ブラッシング
ここは気合の入れどころ。クリームをブラシで直接すくい、靴に塗っていきます。
クリームを靴に塗り過ぎても大丈夫。靴をブラシ全体でこすることで余分なクリームはブラシが調整しくれます。
比較的気にされがちですが、こする方向は適当でいいです。クリームが満遍なく延びるまで頑張りましょう。
![IMG_3789.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/f3dd485d-b084-d6f7-90c4-86069e8718b8.jpeg)

##5.布磨き
お手入れも仕上げの段階。ブラッシング後10分くらい放置したら靴磨きミトンで艶出しをしましょう。
靴クリームに含まれるロウを摩擦熱で溶かすイメージ。ちょっと疲れるけど最後の仕上げ！
でも力は入れすぎないで！靴の型が崩れちゃう。
+αでボロのストッキングで磨くのも効果的。水研ぎは懐疑的だからしない！

![IMG_3793.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/4eed6737-d310-1118-77d1-3514a4f961e2.jpeg)

##できた！
死んでた靴に色とツヤと潤いが戻ってきた！

![IMG_3794.JPEG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/9902f8b0-19d7-d01d-bd7c-53facae7b866.jpeg)

##物足りなかったので…
色の好みで靴クリーム(黒)を重ね掛けしました。
3～5の工程は繰り返すことが可能です。好みのツヤと色合いを求めましょう。
さらに重ね掛けすることで水耐性を獲得できます。これで雨の日も怖くない！
![IMG_3813.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/b25514e2-7470-f4b2-a4fb-af8792f1547e.jpeg)
サイドの色落ちもピカピカに！
![IMG_3816.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2312600/05131fcb-c1d3-6f45-4b72-117379c153da.jpeg)


##日常のメンテナンスは？
日常的には1.ホコリ落としを。
部分的にクリームの剥がれは3.靴クリーム塗り～5.布磨きを。
3か月くらいに一回、全工程をやればいいんじゃないですかね。


#最後に
最近革靴磨きにはまってしまい、自己流ながら知識をひけらかす場を頂き感謝します。
これによって少しでも革靴履く人が増えて、みんなで靴磨きできればいいなぁ。
そんなところです。
cynefin frameworkについてまとめてみる

# はじめに
こんにちは。 KDDIアジャイル開発センターの小板橋です。 この記事は、[KDDI Engineer&Designer Advent Calendar 2021](https://qiita.com/advent-calendar/2021/engineer-designer)の10日目の記事です。

今回は、部内での会議で教えていただきましたcynefin frameworkという意思決定フレームワークについて気になった為、自分なりに調べた内容をまとめていこうという記事になります。

# cynefin framework(カネヴィンフレームワーク)とは
* cynefin framework(カネヴィンフレームワーク)は、1999年にDavid SnowdenとMary Booneにより提言されました。
* ちなみに、カネヴィンというのは、生息地を表すウェールズ語だそうです。

## cynefin framework(カネヴィンフレームワーク)を使うと何が嬉しいのか？
* 今までの会社の意思決定は、トップマネジメント層だけがやることとされていた。
* しかし、会社の組織やチームなどに弊害が出たときに**全員がハラオチする過程**を理解するべきだと思います。
=> この時、現状と打ち手を認識し、 その時にするべき行動パータンについてまとめられたものがcynefin framework(カネヴィンフレームワーク)と言えそうです。

## 状況・問題を大きく４つのドメインに分類
このフレームワークでは、状況・問題を大きく４つのドメインに分類します。

![Untitled(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/3c1f2e3b-52f2-7b0e-9445-a8cdb935a276.png)


### Simple(シンプル)
**Simple: 単純**は、既に知られている問題対して、既にやったことある手法で対処する。。で何とでもなる問題のこと
つまり、問題の因果関係や対処が明確になっているものとも言えます。
=> なので、社内でヒアリングしベストプラクティスを探し適用すればよいOK

### Complicated(コンプリケーティッド)
**Complicated: 煩雑** は、問題に対し分析する過程が必要となり、ある問題の１つは解決方法が知られているような問題のこと

=> つまり、既に知られている解決方法があり、未知の問題に対処するパターンといえます。 

### Complex(コンプレックス)
**Complex: 複雑**は、問題に対し問題の因果関係が未知で、解決策もわかってない状態です。

例えば、担当しているプロジェクトのように、問題の状況やチームの状況が変化し、ベストプラクティスで解決するとは限らない問題とされている。

=> なので、**調査や把握、対処を繰り返す**のがComplexへの対処となります。

### Chaotic(カオス)
**Chaotic: 混乱**は、問題も解決策も何も分からない(不明瞭)な状況です。

=> この時の対応方法は、簡単でまず**行動/認知/反応**というのが推奨される対応フローとされています。
これにより**まずはカオスをComplexに落とし込むのが初手というのが発案者Snowdenは考えています。**


# まとめ
非常に面白いフレームワークでした！
特にカオスった時はとりあえず動けというのがいいですね！笑
それで、みんながちゃんと行動し、(目をつぶらず/無理矢理ベストプラクティスに持っていくのではなく)別の次元に(Complex)に持っていき、既知の問題/対処までもっていけたら幸せな世界がやってきそうですね！
Codeigniter4環境構築中に「Whoops！」でハマった件

#システム環境
・Codeigniter4
・CentOs7
・php8.0
・nginx1.20.2
・MySQL8.0

#エラー内容
ミドルウェア周りのセットアップが完了してブラウザにアクセスすると「Whoops！」画面が表示されてハマりました
![woops.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372159/ce0fb3b3-1558-4df2-7ebf-3fa937d943ee.jpeg)

#解決法
結論、writableディレクトリに権限付与をしていなかったことが原因でした
キャッシュなどを書き込むディレクトリ仕様の為、権限を付与する必要があります

```
chown nginx:nginx -R writable
```
所有者を変更することで解決できました！！

#さいごに
[Codeigniter4の環境構築方法の記事](https://qiita.com/kenken-9/items/f71850212f3d77a84c9f)をUPしました
宜しければご参考下さい
【Android】MVVM で Hilt


コツ:
dagger や hilt 系の記事は古い記事が検索でヒットして混乱するので注意。

✅ @HiltAndroidApp
Application クラスに付ける。

✅ @AndroidEntryPoint
Android クラスに付ける。最低でも ViewModel をktx経由で inject するのでほぼ必須。
Activity / Fragment / Service /

✅ @HiltViewModel
AAC ViewModel クラスにつける。Repository を取り込むためにconstructor に @Inject も付ける。

✅ @Inject
コンストラクタ - constructor に付けてインスタンス名と型を明示する。
フィールド - @AndroidEntryPoint を付けたクラス内のフィールドに付ける。private であってはならない。

→ Android クラスでなければ フィールドインジェクションはできない。
→ ViewModel の Android クラスへのフィールドインジェクションでは不要。

✅ @Module / @InstallIn
コンストラクターで注入できない型のバインディングを追加できるクラス。
→ di/ 以下に置く。
→ 基本 @InstallIn(SingletonComponent::class) 
→ RepositoryModule @InstallIn(ViewModelComponent::class) 

Hiltで生成されたDIコンテナ（コードではSingletonComponent）モジュールバインディングが使用可能である必要があることを示します。

✅ @Provides

コンストラクターで注入できない型のバインディングを追加します。
-戻り型はバインディング型です。 
-パラメータは依存関係です。 
-型がスコープされていない場合、インスタンスが必要になるたびに、関数本体が実行されます。
→ 基本 @Provides @Singleton
→ ReposirotyModule @Provides ViewModelScoped

✅ @Binds

インターフェイスタイプをバインドするための省略形：
-メソッドはモジュール内にある必要があります。 
-@ Bindsアノテーション付きメソッドは抽象でなければなりません。 
-リターンタイプはバインディングタイプです。 
-パラメータは実装タイプです。

✅ Scope Annotations :
オブジェクトをコンテナにスコープします。
タイプの同じインスタンスは、そのタイプを依存関係として使用する場合、フィールドインジェクションのために、または階層の下のコンテナーによって必要とされる場合に、コンテナーによって提供されます。

✅ Qualifers for predefned Bindings:
@ApplicationContext / @ ActivityContext対 応するコンテナーの依存関係として使用できる事前定義されたバインディング。これらは修飾子の注釈です。

✅ @EntryPoint
Hiltで直接サポートされていないか、Hiltを使用できないクラスの依存関係を取得-します。 @EntryPointアノテーションが付けられたインターフェースは、その依存関係の取得元であるHilt定義済みコンポーネントを渡す@InstallInアノテーションも付けられている必要があります。 DIコンテナ（@InstallInアノテーションの値と一致する）とエントリを持つクラスのインスタンスを渡すEntryPointAccessorsから適切な静的メソッドを使用してバインディングにアクセスします

MVVM で Hilt のパターン化 💉 | #android ファショ通
👉 https://android.benigumo.com/20211209/mvvm-hilt/
一応エンジニアをしてきて約1年半、すぐに脳裏に浮かぶ読んで良かった記事2つ

新卒で、エンジニアとして働き始めて約1年と半年が過ぎました。
いろいろな方のいろいろな記事に教わり、また救われてきましたが、その中でも特に心に刻まれ、今の自分の指針になっているものをピックアップしてみたいと思います。

※現場では TypeScript, Reactを書いている時間が多い身です。故にそれらの記事の色が強めかと思いますが、ご容赦ください。

###　自己点検に持ってこい


1つ目は、@hirokidaichi さんの以下の記事です

https://qiita.com/hirokidaichi/items/27c757d92b6915e8ecf7

もちろん回数が多ければ良いわけではないのですが、この1年半の間に3回は読みました。
技術力以前に、日頃の仕事への「姿勢矯正」に、非常に学びになりました。
この記事に書いてある「悪い習慣」を見て、「自分はそれしてはいないか？」とチェックをすることは、新人プログラマでなくても価値ある行為だと感じました。

@hirokidaichi さんよりも「すごい・強いエンジニア」なら、この考えは当てはまらないかもしれないですが、今の自分には十分に検証するに値すると思い、日々、指標にさせていただいています。


>プログラミングをする中で、プロジェクトの種類にもよるが、コードリーディングの占める割合は高い傾向がある。ものによっては８割読み、２割書くといった具合だ。

自分に言い聞かせたいこと　→　コードを読み・書きする比率は、8:2くらいになってる？

>プログラミング言語のエラーメッセージや、ライブラリの出力するエラーメッセージは問題箇所を特定するために、人間が人間のために記述した情報だ。ところが、成長しづらいプログラマはそれを読まない。何か問題があったという情報として２値化してとらえてしまう。

自分に言い聞かせたいこと　→　エラーコード、読んでる？ 2値化しちゃってない？

>プログラムのエラーが発生したということは、本来「完成に近づいた」一つの証跡であるはずだ。なぜなら、今まで意識されていなかった情報が一つ明らかになり、間違った仮説をたててしまっていた部分が棄却されて、それを修正するという明確なネクストアクションが手に入るからだ。

自分に言い聞かせたいこと　→　エラー発生した状況に対して焦ってない？　「完成に一歩近づいた」と思えてる？

### 1つの技術に対する姿勢

2つ目は、@kfurumiyaさんの記事です。

https://sbfl.net/blog/2019/02/09/react-hooks-usestate/

正直、読んだ当時は、内容がほとんど分かりませんでした。

ですが、特定の技術・機能(上記記事では `useState` )に限らず、少なくとも自分が日常的に触れる技術に対して、もっと造詣を深めるべきである」というのを読んでいて強く感じました。

ある技術に対して、どの程度の造詣・理解度合いを自分に課すかは、当然、自分が決めれば良いことだと思います。

それにそう思っていていたとしても、目の前の業務に追われてしまって、理解を深めることを怠ってしまう時もあると思います(自戒...)。

ですが、「エンジニアとして働く」ということは、「自分が十分にプロレベルであるかどうか」であったり、実際に周りの人に、自分がどう思われているかにかかわらず、「プロとして周りから見られている」と思って働くべきだとボクは思っています。

Reactを日頃書く人にとってのuseStateのような技術1つ1つは、普段何気なく使っているし、便利ゆえにその構造を深く理解していなくても使えてしまいます。
ですが、それぞれの技術の仕組みについて最低限でも、原理・原則を抑えることが大切だと感じました。
neosでlogix その19

#概要

niosでlogixやってみる。
timerノードを使ってみた。

#写真

![2021-12-09 09.21.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/2248abd3-6844-2c4b-9d1b-9e77255c8535.jpeg)


#Timer

```
Inputs
 	Float	Interval
 	User	UpdatingUser
Outputs
 	Impulse	Pulse
```

以上。
【Anaconda】インストール時のCondaVerificationError対処法（Windows）

## 環境
+ Microsoft Windows 10.0.22000.318（21H2）
+ conda 4.11.0


## 現象
TensorFlowのインストール時に `CondaVerificationError` が出た。

```powershell
CondaVerificationError: The package for tensorflow-base located at C:\Users\USERNAME\...
...
specified in the package manifest cannot be found.
```

## 原因
[こちらのサイト](https://anton0825.hatenablog.com/entry/2018/04/12/000000)によると、Windows10既定の256文字のパスの長さ制限（ `MAX_PATH` ）が原因であるようだ。

## 対処法
[こちらのサイト](https://knowledge.autodesk.com/ja/support/autocad/troubleshooting/caas/sfdcarticles/sfdcarticles/JPN/The-Windows-10-default-path-length-limitation-MAX-PATH-is-256-characters.html)を参考にした。
1. Windows のスタートメニューで、「regedit」と入力。
2. 「レジストリ エディター」を選択。（許可を求められたら「はい」を選択）
3. `コンピューター\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem` に存在する `LongPathsEnabled` をダブルクリック。
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/be9cbb88-61f7-ffcb-4d28-af242eeb1f6a.png)
4. 「値のデータ」に「1」と入力。（長いパスが許可される）
![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1946472/ed2fc1f3-86be-af1a-f4d9-19b4442410f6.png)

## 再実行
もう一度、`conda install tensorflow` でTensorFlowをインストールすると、上手くいった。

## 参考

https://anton0825.hatenablog.com/entry/2018/04/12/000000

https://knowledge.autodesk.com/ja/support/autocad/troubleshooting/caas/sfdcarticles/sfdcarticles/JPN/The-Windows-10-default-path-length-limitation-MAX-PATH-is-256-characters.html
wordpressでのアーカイブページ（投稿一覧ページ）でカテゴリーの取得がうまくいってない時の対処法

WordPressの投稿一覧ページでカテゴリーのタイトルとスラッグの情報がうまく取得できなかったので、調べつつ解決したので備忘録。
今回出てくる関数は`get_thecategory()`と`get_queried_object()`
#起きたこと

前提として、カスタム投稿タイプは使用していない、デフォルトの投稿タイプの話になる。
先述の通りで、参照しているテンプレートファイルはarchive.phpになる。
まずはパンクズリストの該当コードを抜粋。


```
<li><span><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span></li>
```
今回最初につまずいたのが、カテゴリーが複数ある中でいくつかは正常に表示がされていて、少数の表記が意図していないものになっているということ。
カテゴリーをよく見てみると、親子階層になっていて、調べたら上記のget_the_category()関数は親子関係のカテゴリー情報取得には向いていないということ、
厳密には子カテゴリーが正常に取得できていて、親カテゴリーが子カテゴリーの情報をランダムで取得するらしい。

#解決策
いくつかやり方はあるっぽいが、一番簡単そうな修正を見つけた。
デフォルトの投稿一覧ページしか検証していないので、他のテンプレートファイルで使えるかどうかわからないが、上記コードを

```
<li><span><?php echo get_queried_object()->name; ?></span></li>
```

これに変更して解決。
とてもシンプルな記述になった。

もともとのコードget_the_category()は'$cat[0]'で配列を取得して`$cat`に代入しているが、
親子関係になると多次元配列となり、$cat[0]では階層関係までは取得できないとのこと、
`get_queried_object()`関数は、単純に今閲覧しているカテゴリー情報を取得してきているだけらしい。

これにならって、タイトル部分も

```
<span class="en"><span class="eachTextAnime"><?php  $cat = get_the_category();  $catslug = $cat[0]->slug; ?><?php echo $catslug; ?></span></span>
```

下記に変更

```
<span class="en"><span class="eachTextAnime"><?php echo get_queried_object()->slug; ?></span></span>
```

これだけで解決。

#参考文献
wordpressのget_the_categoryで親又は子カテゴリーのみ取得
[https://garop.net/wordpress-get-the-category/]
関数リファレンス/get queried object
[https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_queried_object]
Webページ表示の高速化に向けた調査ツール群を整理する

## 動機
知人が運用しているWordpressベースのホームページの表示が遅いと相談を受けたことが発端。
> トップページの表示で7秒くらいかかってる
> これじゃお客さん離脱しまくりや

正式な保守運用は別途委託されているのですが、委託任せになっちゃうのも不利だなと思いまして、
調査のお手伝いしようと思い立ちました。

執筆段階で原因特定に至っていないのですが、調査手順・ツールを備忘録としてメモしておきます。
もっといい方法・ツール知ってるよ！！というツッコミ大歓迎です＼(^o^)／

## はじめに
Chromeさん、ありがとう。
サクサク動くだけではなく、開発者に思いやりのあるツールが充実しすぎていて最高です。

## ツール群
- Webページの表示パフォーマンス測定
    - [PageSpeed Insights](https://pagespeed.web.dev/)：Google先生提供無料Webページ診断ツール。診断と改善項目の提示をしてくれる。
    - [Lighthouse](https://developers.google.com/web/tools/lighthouse/)：Chrome開発者ツール。パソコン/モバイルの表示パフォーマンスを計測、問題有りげな箇所を提示してくれる。レスポンシブ対応していてモバイルだけ遅い、とか起きたときに使うの良いかも。PageSpeed Insightsに近い？
    - [Chrome開発者ツールのネットワークのログ](https://developer.chrome.com/docs/devtools/network/)：、TTFB(Time To First Byte)をチェックしてくれる。
    - [Chrome開発者ツールのパフォーマンスのログ](https://developer.chrome.com/docs/devtools/evaluate-performance/)：クライアント側のページ処理のパフォーマンスチェック。

上記を駆使して、クライアント側に問題があるのか、サーバー側なのか、ネットワークなのか、ざっくりと当たりを付ける。

今回はTTFBが遅い(CSSのTTFBに3秒弱、、1つではなく複数のCSSで発生。Google先生は0.6秒提唱としてるので、、まぁ遅いよね)ことが見えてきたので、
まずはCSS関連挙動の詳細をすすめることにした。

- CSS読み込み
 - [Chrome開発者ツールのCSS Overview(概要)](https://developer.chrome.com/ja/blog/new-in-devtools-96/)：ページ内の色やフォントサイズなど概要を表示してくれる。長年、複数人によって無法地帯で増改築を重ねてきたのでしょう、同じような色でもカラーコードが異なるものがぞろぞろぞろーり、、、。こういうのはルール決めて最適化しなきゃですね。
 - [Chrome開発者ツールのcoverage](https://developer.chrome.com/docs/devtools/coverage/)：CSSセレクタの使用率評価してくれる。Wordpressでおしゃれプラグインを入れすぎると、読み込まれないおしゃれCSSもたくさんありそうです。
 - [jitbi](https://www.jitbit.com/unusedcss/)：指定したURLのページで読み込まれていないCSSセレクタを抽出してくれるサービス。ありがたい結果ではあったのですが大量に出過ぎてつらい気持ちになりました、、、
 - [UnCSS](https://uncss-online.com/)：htmlとCSSをinputして、htmlで実際に呼び出されてるCSSセレクタのみを抽出したCSSを作ってくれる。他ページが依存してるかもなので、男気ガッツリ削除は禁物。

- Wordpressキャッシュプラグイン
 - [Wordpress Super Cache](https://ja.wordpress.org/plugins/wp-super-cache/):いま使ってるやつ。ググると参考情報も多く、実力高い？？ガーベージコレクションしてくれるってどこかで読んだのですが、この手の処理って若干怪しさがありますよね、、(コントロールできないという点で
 - [Cloudfare](https://ja.wordpress.org/plugins/cloudflare/):勉強中。。。

今回、ネットワークのログを確認した感じ、
CSSのTTFBが遅そうなので、そのあたりを探っていきます。
(後日追加予定)
KeyoxideでPGP鍵の所有者証明をする

ディレクトリサービスとして、Keybaseを使用している人はちらほらいると思います。
私も無論使用しています。

https://keybase.io/yuzuryo61

[Keyoxide](https://keyoxide.org/)はOpenPGP(gpg)鍵でアカウント証明するためのサービスです。
またこのサービス自体は[オープンソース](https://codeberg.org/keyoxide/keyoxide-web)になっています。

Keyoxideの作成例↓

https://keyoxide.org/hkp/yuzuryo61%40yuzulia.work

# 使うには

まずはgpgなどでOpenPGPの鍵を作ります。
作成方法は割愛いたします。

そしてその鍵を`keys.openpgp.org`にアップロードします。

```console
gpg --keyserver hkps://keys.openpgp.org --send-keys <フィンガープリント>
```

`keys.openpgp.org`側からメールアドレスによる検索を有効にするためのメールが届くかもしれません。
その場合は受理しておいたほうが良いと思います。

https://keyoxide.org/ にアクセスするとこのような項目があるので、ここにフィンガープリント（`keys.openpgp.org`でメールアドレスによる検索を許可した場合はメールアドレスでも可）を入れて「GENERATE PROFILE」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/0d6eebe9-d6b1-4a3a-a189-712777edc9b3.png)

そうすると自分の名前が出てくるはずです。

# 証明を追加する

証明はドメイン(DNS)や、Mastodon、GitHubに対応しています。
対応しているサービスはここから確認できます → https://docs.keyoxide.org/key-management/adding-claims/

証明を追加し終わったら、鍵を`keys.openpgp.org`にアップロードします。

追加方法をいくつか紹介します。

## ドメイン

https://docs.keyoxide.org/service-providers/dns/

証明を追加したいドメインのTXTレコードに以下の内容を追加します。

```
openpgp4fpr:<フィンガープリント>
```

そしてgpgで鍵の編集を行います。（鍵の編集の手順は以後同じ手順になります）

```console
$ gpg --edit-key <フィンガープリント>
gpg> notation # 注釈を追加します
注釈を入力: 
```

注釈は以下のように入力します

```
proof@ariadne.id=dns:<ドメイン>?type=TXT
```

以下のようになるはずです。

```
proof@ariadne.id=dns:yuzulia.work?type=TXT
```

## GitHub

https://docs.keyoxide.org/service-providers/github/

[gist.github.com](https://gist.github.com/)へアクセスし、以下のgistを作成します。
gistは公開設定にします。

```markdown:openpgp.md
This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/<フィンガープリント>) to [this Github account](https://github.com/<GitHubのユーザー名>). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:<フィンガープリント>]
```

自分のフィンガープリントや自分のGitHubユーザー名に変更します。

注釈を追加します。

```
proof@ariadne.id=<作成したgistのURL>
```

## Mastodon

https://docs.keyoxide.org/service-providers/mastodon/

所有するMastodonアカウントのプロフィール補足情報に、どちらかを入力します。

| ラベル | 内容 |
|:--|:-:|
| **OpenPGP** | フィンガープリント |
| **Keyoxide** | KeyoxideのプロフィールURL |

注釈を追加します。

```
proof@ariadne.id=https://<Mastodonのインスタンスアドレス>/@<ユーザー名>
```

# 確認

自分のKeyoxideのプロフィールに行き、証明が追加されていてかつ緑のチェックマークがついていれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/4e82675f-eb80-6fa2-9d29-d1312d250dc8.png)

# 注釈を確認する

gpgで鍵の編集モードに入り、`showpref`コマンドを入力します。

```console
$ gpg --edit-key <フィンガープリント>
gpg> showpref
```

# 証明を削除する

gpgで鍵の編集モードに入り、注釈を追加するところまで手順を進めます。

```console
$ gpg --edit-key <フィンガープリント>
gpg> notation
注釈を入力: 
```

## すべての証明を削除する

`none`と入力します。

## 一つの証明を削除する

削除したい証明の注釈の先頭に`-`(ハイフン)をつけて削除します。
確認されるので問題がなければ`Y`で決定します。


証明を削除したら鍵のアップロードを忘れずに行ってください。
Material-UIのTextFieldのボーダー色を変更する

Material-UIのTextFieldのボーダー色を変更する方法。

TextFieldの`color`プロパティで指定できる色はフォーカス時のみ。
通常状態のボーダーやラベル(プレースホルダ)の色を変えるプロパティが用意されていないのでCSSで変更した。

```react
import { TextField } from '@mui/material'
import { styled } from '@mui/material/styles'

const myStyle = {
  '& .MuiInputBase-input': {
    color: '#000000',    // 入力文字の色
  },
  '& label': {
    color: '#AAAAAA', // 通常時のラベル色 
  },
  '& .MuiInput-underline:before': {
    borderBottomColor: '#CCCCCC', // 通常時のボーダー色
  },
  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
    borderBottomColor: '#DDDDDD',  // ホバー時のボーダー色
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: '#CCCCCC',    // 通常時のボーダー色(アウトライン)
    },
    '&:hover fieldset': {
      borderColor: '#DDDDDD',    // ホバー時のボーダー色(アウトライン)
    },
  },
}

export const MyTextField = styled(TextField)(myStyle)
```

↓こっちの書き方でもいける。

```react
import { TextField } from '@mui/material'

const myStyle = {
  '& .MuiInputBase-input': {
    color: '#000000',    // 入力文字の色
  },
  '& label': {
    color: '#AAAAAA', // 通常時のラベル色 
  },
  '& .MuiInput-underline:before': {
    borderBottomColor: '#CCCCCC', // 通常時のボーダー色
  },
  '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
    borderBottomColor: '#DDDDDD',  // ホバー時のボーダー色
  },
  '& .MuiOutlinedInput-root': {
    '& fieldset': {
      borderColor: '#CCCCCC',    // 通常時のボーダー色(アウトライン)
    },
    '&:hover fieldset': {
      borderColor: '#DDDDDD',    // ホバー時のボーダー色(アウトライン)
    },
  },
}

export const MyTextField = (
  <TextField sx={myStyle} />
)

```
AWSの「IAM」とは？ユーザー/グループ/ポリシー まとめ

## IAMの概要

- IAMは、Identity and Access Managementの略。
- ユーザーを管理するサービス。
- 特に複数人で開発・運用を行う際に、各ユーザーのアクセス権限（後述）を定めるために使用。
- グローバルサービスのため、リージョンの指定の必要なし。
- デフォルトで作成されるRootアカウント(ルートユーザー)は、運用ではできるだけ使用せず、アカウントの共有も避けるべき。

## ユーザーとグループ (Users & User Groups)

- **ユーザー**
    - AWSで開発や運用を行うひとつの組織において、AWSを使用できる1ユーザーのこと。
    - 各々にユーザーネームとパスワードの設定をする。
    - アクセス権限を設定できる。
- **グループ**
    - 複数のユーザーに同一のアクセス権限を定義するためグループのこと。
    - 1ユーザーが複数のグループに所属することも可能。

## アクセス権限（Permissions)

- ユーザーまたはユーザーグループに割り当てられる権限。
- データの「作成」はできるけど「削除」はできませんよ、といったように可能な操作が決定される。
- AWSのUIを用いるか、JSONで定義可。
例えば、AWSがデフォルトで用意してくれている「AdministratorAccess」という権限は、以下のようになっている。
    
    ```json
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Action": "*",
                "Resource": "*"
            }
        ]
    }
    ```
    
- AWSではグッドプラクティス（GP）として、そのユーザーが最低限必要な権限のみを与える、ということが推奨されている。
Mockitoを使用したJUnitテスト

Mockitoに初めて触れました。
絶対に忘れるので少しだけメモ。

##@BeforeEach



各テストの処理前に実行してくれる便利。
事前に必ず実行したい共通の処理があるときに書く。

    @BeforeEach
    public void setUp() throws Exception {

        Mockito.when(response.getWriter()).thenReturn(responseWriter);

    }

##@BeforeEachのモック処理を解除
1テストケースだけBefore処理をスキップしたいとき

```
　Mockito.reset(response.getWriter());
```

##今回使用した形式
これが一般的なのかはわからないけれどメモ。

```
        MockedConstruction<Client> mockedConstruction = 
                Mockito.mockConstruction(Client.class, (mock, context) -> {
                            client = mock;
                            Mockito.when(client.メソッド(any(),eq(Response.class))).thenReturn(Response);
```
Stringやbooleanには**「eq()」**をつける。
上記の例Clientクラスは対象のクラスの１つ奥の処理のクラスを当てはめるとうまくいった（仕組みがまだよくわかってない）。

ちなみにstaticメソッドの場合は別の書き方がある。
最近Mockitoで出来るようになったらしい。

##JUnitでPrivateメソッドのテストをしたいとき
Mockito関係ないけどお世話になった記事。
https://qiita.com/village/items/2f0d99b25eef0c8fd4ec

例外処理で引っかかったのでメモ。

    @Test
    @DisplayName("Check List ID ：1")
    public void checkListID1() throws Exception {

        testTarget = new Service(request);

        Method system = Service.class.getDeclaredMethod("executeMethod");
        system.setAccessible(true);

        try {
            system.invoke(testTarget);
        } catch (Exception e) {
            assertEquals("0000", result);
            assertThrows(BusinessException.class, () -> {
                throw e.getCause();
            });
        }
    }

privateメソッド使うときは`try-catch`にして`e.getCause`しないとinvokeのエラーになるので注意！
【 まとめ 】AWS - サーバーレスについて、知見を深める（随時更新）

## 自己紹介

主にFlutter, Golang使ってるエンジニアのpommです。 FlutterやGolangについて、業務や趣味の中で気づいたTipsなどをまとめます。

## サーバーレスとは

> 必要なとき (モバイルユーザーがメッセージを送信する、画像がクラウドにアップロードされる、レコードがストリームに到達するなど) にのみビジネスロジックがトリガーされる、クリーンなファンクショナルアプローチです

サーバーの管理（構築・保守）をすることなく、プログラムを必要な時にのみサーバー上で実行できる仕組み。

ちょっとしたことでもサーバーを構築しなくて済む。

## ユースケース・特徴

使用度に応じて自動的にスケーリングすること。請求は従量課金。実行にかかった時間で請求される。

今後のPV数が予測できないとき。PVが少なくても想定以上に多くなっても、スケーリングできる。アプリやサイトにも。

> Cron ジョブやその他の IT インフラストラクチャの要件は、特にジョブや要件に低頻度な性質や変化しやすい性質がある場合、その使用のためにサーバーを所有および維持する要件がなくなることでかなりシンプルになります。

要件が不安定だけど、重要度が高くすぐに壊したり修正したり復活させたりしたい自動実行プログラムなどに良いかもしれない。

Alexaなどのチャットボットシステム。必要な時だけアクションを実行できるので、低コスト性が見込める。
実際、Alexaスキルの大部分はAWS Lambdaを使用しているとのこと。

リアルタイムに行いたい処理。データに応じたスケーリングができる柔軟性がある。

## 最後に

主にFlutter, Golang使ってるエンジニアのpommです。 FlutterやGolangについて、業務や趣味の中で気づいたTipsなどをまとめます。

Twitterもフォローしてくれると喜びます！励みになります。
https://twitter.com/osushitabetaipo

この記事が1人でも多くの方へ参考になっていれば嬉しいです。

## 参考リンク

参考にさせていただきました。良記事ありがとうございます。

- https://docs.aws.amazon.com/whitepapers/latest/security-overview-aws-lambda/security-overview-aws-lambda.pdf#security-overview-aws-lambda

- https://d1.awsstatic.com/whitepapers/ja_JP/optimizing-enterprise-economics-serverless-architectures.pdf?did=wp_card&trk=wp_card
トラブル事案｜AWS-LightsailのWordPress（bitnami）で failed to open stream: Permission denied が出た場合

# どんな環境でおきたか
* AWS-LightsailでWordPress（bitnami）を使っていた
* テストサーバーで構築していたWPのファイル一式を、本番環境（AWS-Lightsail）へ移行した（ファイル一式をFTPクライアント経由で上書きアップロード）
* **WordPress の更新**をした際に、下記のエラーが表示された（更新が出来なかった）

> Warning: copy(/opt/bitnami/wordpress/wp-content/languages/ja-******.json): failed to open stream: Permission denied in /opt/bitnami/wordpress/wp-admin/includes/class-wp-filesystem-direct.php on line 309

> Warning: chmod(): Operation not permitted in /opt/bitnami/wordpress/wp-admin/includes/class-wp-filesystem-direct.php on line 173


# 解決方法：パーミッションの再設定
* bitnamiは、各ファイル・各ディレクトリのパーミッションを厳格に定めているようです
* 参考サイト：[bitnami：Understand WordPress Filesystem Permissions（WordPressのファイルシステムパーミッションの理解）](https://docs.bitnami.com/google/apps/wordpress/administration/understand-file-permissions/)

> Files and directories are owned by user bitnami and group daemon.
Directories are configured with permissions 775 by default.
Files are configured with permissions 664 by default.
The wp-config.php file is configured with permissions 640.

> ファイルとディレクトリの所有者は、ユーザーのbitnamiとグループのdaemonです。
ディレクトリのパーミッションは、デフォルトでは775に設定されています。
ファイルのパーミッションは、デフォルトでは664に設定されています。
wp-config.phpファイルのパーミッションが640に設定されています。


## ディレクトリの場所の確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/9c6fabbd-b94c-b5a9-e6b9-804fc791b848.png)

* 2021年12月現在、bitnamiのWordPressは、ディレクトリが２箇所に分かれて配置されています。
* WordPress本体部は`/opt/bitnami/wordpress/`にあります。
* ユーザーが触りそうなファイルなどは`/bitnami/wordpress/`にあります。

## パーミッションの変更
* 今回は、ファイル`wp-config.php`およびディレクトリ`wp-content`のパーミッションの一括変更を記します。

```terminal:terminal
$ cd /bitnami  # ディレクトリ[bitnami]へ移動

$ sudo chown -R bitnami:daemon wordpress  # ディレクトリ[wordpress]以下の所有者：グループを一括変更

$ sudo find wordpress -type d -exec chmod 775 {} \;  # ディレクトリ[wordpress]以下のディレクトリのパーミッションを775へ一括変更

$ sudo find wordpress -type f -exec chmod 664 {} \;  # ディレクトリ[wordpress]以下のファイルのパーミッションを664へ一括変更

$ sudo chmod 640 wordpress/wp-config.php  # ファイル[wp-config.php]のパーミッションを640へ変更
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/747640e4-269f-eedc-500a-ab80494fda0c.png)


以上で、問題解決しました（**WordPress の更新**がエラーなく出来るようになりました）


# 考察：何故この事態になったのか
* ディレクトリ`wp-content/plugins`以下、あるプラグインの一部ディレクトリのパーミッションが755になっておりました。
* テスト環境においてのプラグインのインストールの仕方がまずかったのか、それとも本番環境へのアップロードの仕方が悪かったのか...
* パーミッション問題とか所有者問題とか...引っかかると面倒ですよね...


誰かのお役に立てば幸いです
【ゲーム】QAからプランナーに異動する話

これまで弊社のゲームタイトル（モンスターストライク、共闘ことばRPGコトダマンなど）では、
QAからプランナーに異動することが年1人ペースであります。
長年運営しているタイトルですので、当然プランナーチームの人員が不足するタイミングがあります。
その時にプランナーチームから、「QAさんから立候補者いませんかね？」とお誘い頂けることがあるのです。

私自身、データ設定ミスのバグを減らしたい！根元からバグを駆逐したい！
という思いで１年程プランナーにロールチェンジした経験がありますので、
今回はQAからプランナーに異動するとはどういうことかお話したいと思います。


## QAでの経験が爆速オンボーディングにつながる
そのタイトルのQAからプランナーに異動するにあたり、当然ですがそのタイトルの知識・経験が活かせます。

- データ構造の理解
    - キャラクター、ステージ、ガチャといったゲーム内部の仕組み
- ツールの理解
    - チャット、タスク管理、バージョン管理（ブランチ戦略）、デバッグツールなど
- リリースまでの業務フローの理解
    - いつ誰が何をするのか、どのチームへタスクが渡るのか、困ったときはあの人に聞けばOK、など
    - スケジュール感

度重なるアップデート、新機能追加により複雑化していくタイトルにおいて、
完全に把握している状態でチームに参加するということは、一般的な採用で入社する方と比べて大きなアドバンテージであるのです。

## バグが埋め込まれる瞬間が分かる
プランナーに異動すると、はじめはデータ作成を任されます。
データの作り方を教わると、どんどん気付きが出てきます。

「ここは手入力でやってたのか〜〜！」
「この資料はQAがテストケースに貼り付けやすいように改修できそう！」
「こんな便利な資料が！QAに教えてあげたい！」

この気付きを、ツーカーであるQAチームにできるのは元QAである利点と言えます。
QAチームとしても、聞きやすい・相談しやすい人がプランナーチームに1名増える訳なのです。

そして自分が自信をもってデータ作成してみても、やっぱりQAからバグの指摘を受けてしまいます。
しかしそれは学びとして、なぜバグが出来てしまったのか、QAと根本から改善に向けて会話をします。


## QAの新たなキャリアパスとして
異動によるチーム変動に耐えられるということは、それだけ悪い属人化が排除され、柔軟性のある強いチームだと思います。

プランナーの枠が空いている時に、QAチーム内に異動可能な立候補者が居ることは時の運ですが、
これからもQAからプランナーに異動する道は常に開いておきたいと考えてします！
cookieによるセッション管理

## はじめに
　cookieとセッション、今まで何度も調べてはいるけれどよく忘れてしまい、わかったようでわからない状態が続いていたので、この機会に言語化したいと思います。

## HTTPはステートレス
　Webサイトを閲覧するときは、ブラウザとサーバー間でHTTPプロトコルを使ってやり取りが行なわれていますが、HTTPはステートレスという特徴があり、状態を持ちません。つまり、同じユーザーからリクエストを送っても、サーバーはいつも初めまして状態で同じユーザーとは認識できないのです。
　しかし、世の中には、ステートレスでないWebサービスがあります。代表的なのが、ログイン機能でしょう。YouTubeにログインすれば、各ユーザーにあった画面をちゃんと返してくれますし、あるページから別ページに移動したときも、ユーザー情報を失うことく常に同一ユーザーであることを認識してくれます。
　このように、HTTPにステートフルな振る舞いを実現させる手法が、cookieによるセッション管理です。

## cookieとセッション
　まずセッションとは、システムにログインしてからログアウトするまでの一連の処理を表す概念です。セッションという概念があることで、ユーザーは認証を一回行うだけで、サーバーと仲良しでいることができるのです。
　cookieとは、セッションを実現するための手法であることから、セッションは目的であり、cookieはその手段と言えます。
　Railsでは、sessionというメソッドが用意されています。

```
session[:user_id] = "hogehoge"
```
 
のように呼び出してあげると、Railsは、暗号化したcookieを生成し、デフォルトでブラウザ側に保存されます。実際に保存されたcookieは、Developerツールのapplicationタグで確認することもできます。

## まとめ
この辺りの話は奥が深いです。cookieに関わるセキュリティ周りの話も深掘りしていきたい。
Qt Creator/C++ サブクラス/サブプロジェクトの扱い方 メモ

サブクラスの取り込み方法について
自分または他の人が作ったQWidgetクラス等取り込めると便利

# 内容

プロジェクト内に更に,"widget1"というQWidgetクラスのプロジェクトを作成.それを取り込みたい.(ビルドシステムはcmakeを使用)

add_executableで以下のようにサブプロジェクトクラスのパスを通す.

```CMakeLists.txt
  add_executable(connect_qt2
    main.cpp
    mainwindow.cpp
    mainwindow.h
    mainwindow.ui

    widget1/widget1.cpp
    widget1/widget1.h
    widget1/widget1.ui

  )
```

Layout内にQWidgetを包み,親プロジェクトのQWidgetに入れ込む.今回はサブプロジェクトのクラスとQPushButtonを入れてみた.

```mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include "./widget1/widget1.h"
#include <QVBoxLayout>
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    Widget1 *w = new Widget1;
    layout->addWidget(w);
    QPushButton *button1 = new QPushButton("One");
    layout->addWidget(button1);

    ui->centralwidget->setLayout(layout);
}


MainWindow::~MainWindow()
{
    delete ui;
}
```

stacked widgetにサブクラスを入れ込む場合->insertWidgetでページにQWidgetを入れる.

```mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"
#include "./widget1/widget1.h"
#include <QPushButton>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    Widget1 *w = new Widget1;
    QPushButton *button1 = new QPushButton("One");

    ui->stackedWidget->insertWidget(0,w);
    ui->stackedWidget->insertWidget(1,button1);
    ui->stackedWidget->setCurrentIndex(0);// インサートでページ2くらいになってしまっている?みたいなのでindexを0に設定
}


MainWindow::~MainWindow()
{
    delete ui;
}
```
【備忘録】Git用語、コマンドの個人用メモ（更新あり）

# 用語集

自分用に作った早見表の為、下記の記事をそのまま引用しています。

### 参考記事

[Git 基本の用語集 - Qiita](https://qiita.com/toshi_um/items/72c9d929a600323b2e77)

### 用語一覧
| Name | Mean | 
| ---- | ---- | 
| リポジトリ(repository) | 履歴管理を行う場所。 |
| ローカル(local) | 自分のPCにあるリポジトリ。基本はノンベアリポジトリで運用される。 | 
| インデックス(index) | コミットしたいファイル又はファイルの一部を登録するところ。 |
| コミット(commit)| インデックスに登録してある変更対象をローカルリポジトリに反映すること。 |
| ヘッド(head) | 作業対象となっているブランチ、コミット。 | 
| フォーク(fork) | リモートリポジトリをコピーしてリモートリポジトリを作成すること。 |
| プルリクエスト（pull request） | フォークしたリポジトリでの変更を、フォーク元のリポジトリへ反映するよう依頼すること。 |
| マージ(merge) | 異なるブランチの変更を反映させること。お互いの変更履歴が残る。 | 
| チェックアウト(checkout) | ヘッドを切り替えること。過去のコミットを対象にチェックアウトした場合、それをもとにコミットすることはできない。 |
| ブランチ(branch) | 履歴管理を枝分かれさせてたもの。ブランチを使うことにより、複数の履歴を並列に管理できる。 |

# コマンド集

gitのバージョンを確認する

```jsx
git version

//return versionが表示されればインストールされている
```

PRのレビューに指定されて、人のブランチをローカルで確認する方法

```jsx
git checkout -b レビューする人のブランチ名 origin/ブランチ名
```

最新のdevelopをブランチに反映させる

```jsx
git merge origin/develop
 *// or*
git merge develop
 // or
git pull
 // or
git fetch
```

PRのレビューのブランチを最新に変更する

```jsx
git merge origin/ブランチ名
```

ローカルのブランチ名を変更する方法

```jsx
git branch -m <古いブランチ名> <新しいブランチ名>
```

今開いているブランチをリネームする方法

```jsx
git branch -m <新しいブランチ名>
```

特定のブランチを指定してcloneする

```jsx
git clone -b develop https://[projectURL]
```

間違ってプッシュしてしまったコミットを一つ前に戻す

```jsx

git reset --soft HEAD^
```
私が，OculusをWindowsで開発するために最初に入れるソフトウェア

#はじめに
これは，私の個人的な好みが強く出ている構成になります．
#ソフトウェア

* Unity
* Android Studio
* Oculus adb drivers
* Visual Studio Community 2019

#説明
**Unity**
3Dゲームエンジン．基本的に開発をここで行う．
**Android Studio**
Oculus向けアプリをデバッグするのに便利．エラーが出たりしたときにここでチェックできる．
**Oculus adb drivers**
Oculusハードウェア向けのドライバ．
**Visual Studio Community 2019**
Unityで開発するときに使う，エディタ．Visual Studioが2019以上新しいとエラーがでたことがある．ちなみに，Unityインストール時に同時にインストールできる．
xcode-select: error: command line tools are already installed, use "Software Update" to install updatesが表示された場合の対処法

# 環境
- パソコン: Macbook

# 起きたこと
xcode-selectのCLIツールを久々に利用しようとしたら、エラーとなったので解決方法の備忘としてメモ

```bash
$ xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates
```

# 解決方法
Mac自体のOSアップデートを繰り返すうちに何らかの問題が発生していたのか根本原因は、分からないですが一旦古いツールを削除して再インストールしたら解決したので、こちらの手順を紹介します。

## 1. 古いツールを削除
次のコマンドを実行して古いツールを削除します

```bash
sudo rm -rf /Library/Developer/CommandLineTools
```

## 2. CLIツールをインストール

```bash
xcode-select --install
```

![スクリーンショット 2021-06-26 13.05.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79238/0d9b9e17-4f7c-0533-5fd7-cf0f86d9eb9a.png)

![スクリーンショット 2021-06-26 13.13.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79238/99592384-5df1-cb39-df7c-9fb4ae789843.png)
Twitter4Jをeclipseで使えるようにするまで

多分初めてまともに役立つ？記事を書けるかもしれません。
個人的に使いたいアプリケーションがあったのでTwitter4Jを導入したのですが、その際の導入手順をeclipseユーザーさん向けに備忘録として残しておきます。
TwitterAPIの登録は省略。
今回導入の参考にしたのはこちらのブログなのですが、Twitter4Jをダウンロード、解凍するところまではこちらの記事と全く同じです。
https://rainbow-engine.com/twitterapi-howto-java/


1.Twitter4Jをダウンロード、解凍する
https://twitter4j.org/ja/index.html
(最新安定バージョンをダウンロードする）

![スクリーンショット 2021-12-01 0.56.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036739/a344b910-1161-b2bb-5698-dc181cfca2f1.png)


2.eclipseを立ち上げ、プロジェクトを作成。
プロジェクトの作成が終わったら、プロジェクト名を右クリック→「ビルド・パスの構成」を選択。
![スクリーンショット 2021-12-01 0.58.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036739/0af8ad63-46fa-28bb-d3a8-410b1b3fe8d3.png)

3.すると、こんな感じで何やら出てきますので、「クラスパス」をクリックし、「外部JARの追加」を選びます。
![スクリーンショット 2021-12-09 19.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036739/df09c4e6-7c41-f7a0-875d-5c1164655552.png)


ダウンロードの中にある「Twitter4J/lib」を開くと、こんな感じでjarファイルが4つあります。これら全てを追加。これで完了です。
![スクリーンショット 2021-12-01 0.59.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2036739/b85e3c93-59f5-2dce-2691-300da14c2cba.png)

まとめ
参考にしたサイトではteratermを使う、とありましたがeclipseではクラスパスに配置するだけでTwitter4Jを使うことができました。
ジャム信号 とは

## 勉強前イメージ

日経ネットワークでちらっと見たから・・・

## 調査

### ジャム信号 とは

ジャムとは衝突のことで、CSMA/CDのネットワーク上でデータの衝突が発生した際に送る衝突信号のことになります。

### そもそも CSMA/CD とは？

CSMA/CD とは
Carrier Sense Multiple Access with Collision Detection の略で、
初期のethernetで使用されてたアクセス制御の方式です。
半二重の通信なので、他の人が送ってないときを見計らってデータを送ります。
しかしそれでもぶつかることがあります。
そのときに送るのが ジャム信号 になります。
ジャム信号は、他の機器に 「データがぶつかってるから今はちょっと送るのやめてね。」 と送ります。

### ジャム信号後の挙動

半二重通信で、ジャム信号が送られれば各機器はランダム秒送るのをやめます。
ランダム秒の理由は、ジャム信号が送られるのはethernet上の機器全部なので
規定の期間を決めるとまたぶつかってしまうからです。

また、再送の回数も決まっており16回になっています。
16回送っても送られなければ通信失敗になります。

現在は通信が高速化したり、ノードが増えたりでCSMA/CD方式はあまり使われていません。
現在は全二重通信が主流で衝突することもあまりありません。

## 勉強後イメージ

送る通信が、コリジョンドメインだと思ってたけど
通信がぶつかって、ジャム信号を送る範囲をコリジョンドメインっていうのね。
今はあまり使わないかもしれないけどね。

## 参考

- [ジャム信号](https://w.atwiki.jp/sevenlives/pages/855.html)
- [CSMA/CDのジャム信号](https://hamamuratakuo.blog.fc2.com/blog-entry-543.html?sp)