OmniAICreator/Qiita-1.07M huggingface dataset:
[SwiftUI]TextFieldでFirstResponderでキーボードを非表示にする方法とtextFieldStyleによるサイズや色の変更方法

#今回実装するもの
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517666/2d6022d1-19ac-74eb-2097-7bd6b1670b30.gif)


#Code
```Swift:ContentView
struct ContentView: View {
    @State private var text = ""
    @State private var flag = false
    var body: some View {
        let textFlag = String(flag)
        VStack {
            TextField("サンプル", text: $text)
            Text("\(textFlag)")
        } .textFieldStyle(CustomTextFieldStyle())
        .onTapGesture {
            if flag {
                UIApplication.shared.closeKeyboard()
            }
            flag.toggle()
        }
    }
}

struct CustomTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(.horizontal,16)
            .font(.system(size: 20))
            .frame(width: UIScreen.main.bounds.width, height: 60)
            .background(Color.secondary)
            .cornerRadius(8)
            .foregroundColor(.white)
        
    }
}

extension UIApplication {
    func closeKeyboard() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
```

#解説
let textFlag = String(flag)によりキーボードの出し入れの様子を可視化しています。
またtapGestureによりUIApplication.shared.closeKeyboard()でキーボードを閉じています。
closeKeyboard()については

```swift
extension UIApplication {
    func closeKeyboard() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}
```

とする事でキーボードを閉じる事ができます。

またSwiftUIではtextFieldStyleにてTextFieldを装飾する事ができます。
おすすめは

```swift
.frame(width: UIScreen.main.bounds.width, height: 60)
```
の部分で`width: UIScreen.main.bounds.width`にする事でどのデバイスでも綺麗に表示する事ができます。


#最後に
普段は個人でSwiftUIでアプリを作っています。ハードも作るの大好きです。
よければ下記もチェックして下さい♪
Twitter
https://twitter.com/oka_yuuji
note
https://note.com/oka_yuuji
Twitterでかっこよくソースコードを表示するCarbonを君は知っているか。

こんにちは、現在フリーのweb制作者として活動していますしょーごと申します。

さてみなさん、`ソースコードのハイライトは見ていて気持ちが良いですよね。`

VSCodeのコードハイライトだと、class名が緑色になるのが好きだったりします。

![スクリーンショット 2020-09-07 20.47.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/f46661a3-794b-c78c-b139-8176cc054f7c.jpeg)

これに慣れてしまうと、もう質素なメモ帳など使えなくなりますよね。

しかし、Twitterにはエディター機能はないので、ツイートしたくても**そのままソースコードを貼り付けると、すごく味気なくなります**（文字数制限もきつい）

![スクリーンショット 2020-09-07 20.51.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/05d9eb69-f83b-e25e-c29e-5cd201c27ca5.jpeg)


私はTwitterを初めて8年、エンジニアを初めて2年立ちますが、2020年からイカしたサービスを活用しています。

`コードハイライト大好き教のあなた、今日からCarbonを使うのです。`

## Carbonとは

`Twitterできれいにソースコードを共有できるサービス`です。

>[Carbon](https://carbon.now.sh/)

スクショで貼るより綺麗です。

![スクリーンショット 2020-09-07 20.10.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/b17707b5-7021-1309-1550-990a557d3ecd.jpeg)

様々な言語、テーマに対応しているのが写真でわかるかと思います。

上記の写真でのテーマは`VSCode`ですが、私は`seti`というテーマが好きなので、setiで表示していきます。

### Ruby

![スクリーンショット 2020-09-07 20.16.29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/aa7d33b2-adf4-e475-e048-50ae3fb3cbae.jpeg)

### JavaScript（Vue）

![スクリーンショット 2020-09-07 20.19.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/382da9ca-0bc0-7e29-859a-7360c553712a.jpeg)

### Sass

![スクリーンショット 2020-09-07 20.23.08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/cb56d43b-2d18-2376-4d70-34fbeee40d3c.jpeg)

### PHP

![スクリーンショット 2020-09-07 20.40.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/c5e5bdd4-ec1d-9f0b-cf11-98cdd051f390.jpeg)

### 簡単投稿、画像保存も可能

Twitterでサインインすればすぐツイートできますし、画像としてpngなどでエクスポートすることも可能です。

![スクリーンショット 2020-09-07 20.34.36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/e6662546-3587-1ada-59ee-c049fa3c8b37.jpeg)

投稿時には`Created with @carbon_app`は消しても問題ありません。
pic.twitter.com以下があれば問題ありません。

![スクリーンショット 2020-09-07 20.23.34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/3fa38cc7-8e43-d704-6906-4839cd2d3741.jpeg)

![スクリーンショット 2020-09-07 20.32.28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/5a0585f3-7d04-199b-2be6-ebf388d2b4ba.jpeg)

**うーん、おしゃれ！！！**

Twitterにソースコードを共有する心理としては、

**「私のこのスマートなコードを見てくれ！これ便利でおすすめだぜ！！」**

![pose_makasenasai_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472701/031f6eb3-727e-6ca1-3b17-cfae5ee8d00d.png)

という心理かと思いますので（独断と偏見）

訴求力で見ても、とてもスマートなソースコードの共有方法だと思います。

>[Carbon](https://carbon.now.sh/)
【備忘録】はじめてのGit環境構築 #2

# 前置き
[前回の記事](https://qiita.com/AIRO/items/1bca0d823b5994794f5a)では，Gitの環境構築を行った。
今回はGitとGitHubの連携方法について，簡単にまとめていこうと思う。

## 環境
OS:Windows10
Git:2.28.0

## GitHubアカウントの作成
GitHubを利用するには，まずはアカウントを作成する必要がある。
まずは，[GitHub](https://github.com)にアクセス。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/7234d4f6-d40b-5fa3-2b95-876ef214555a.png)
[Username]，[Email]，[Password]をそれぞれ入力し，「Sign up for GitHub」をクリック。
その後，表示される画面に従って登録を進める。
(※特に複雑なことを聞かれたりはしないので省略。)

## リポジトリの作成
登録が完了し，ログインしたら画面の右上付近にある「+」ボタンをクリック。
更にその中にある，「New repository」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/16a28b9b-942f-24d9-ab9a-13781c6d082c.png)

リポジトリの作成画面に遷移出来たら，「Repository name」に好きなリポジトリ名を入力する。
公開設定について選べるので今回は「Public(公開)」を選択。
「Add a README file」にチェックを入れるとリポジトリ内にREADMEファイルが作成される。
「Create repository」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/ca8b2d5c-82e0-9753-a786-ef72ca600771.png)

リポジトリが無事作成されると，以下のような画面が表示される。
「Code」をクリックすると，作成したリモートリポジトリのリンクが表示されるのでメモしておく。
※「https:://github.com/ユーザ名/リポジトリ名.git」みたいなリンク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/ec1868d5-4e31-6f1c-bea0-42a190acd3ea.png)

## Gitとの連携

Gitで管理するディレクトリを作成していく。
まず，GitBushを起動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/7f2f1d43-89bb-a831-7758-ebfad995e2eb.png)

以下コマンドを実行する。

```
$ mkdir Qiita_test
$ cd Qiita_test
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/05fbe793-c6c5-865a-9d86-ab691fa7f6be.png)
そうするとディレクトリが作成される。
作成したディレクトリをGitで管理出来るよう，「init」コマンドを実行する。

```
$ git init
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/2ae8ab4f-e699-bb4e-0122-830c8786c766.png)

「init」出来たら，先程GitHubで作成した，リモートリポジトリのURLをコピーし，以下コマンドを実行する。

```
$ git remote add origin "https:://github.com/ユーザ名/リポジトリ名.git"
```

プッシュ先の指定が出来たので，ファイルを作成し，コミットする。

```
$ touch test.py
$ git add test.py
$ git commit -m "Create test.py"
$ git push origin master
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/dd387b20-0ab0-9604-1b2c-b2fdbedbbff3.png)
すると，上記のように，エラーが発生する場合がある。
どうやら，リモートリポジトリとローカルリポジトリの最新情報が異なっていることが原因らしい。
その場合は，「-f」をプッシュコマンドに付与することで，強制的にプッシュ出来る。
(※:今回はテスト環境なので強引にやってしまったが，実環境では推奨しない...)

```
$ git push -f origin master
```

プッシュ後，再度リモートリポジトリを見てみると・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686741/4a7df766-9ce6-c778-53dd-b57553552073.png)

作成した「test.py」がリモートリポジトリに登録されている!

ちなみに，リモートリポジトリの更新内容をローカルに反映したい時は，
以下コマンドを実行する。

```
$ git pull origin master
```

## 参考にした記事
・git pushがreject（拒否）されたときの対処法 @Takao_ さん
https://qiita.com/Takao_/items/5e563d5ea61d2829e497


## 今回のまとめ
これにてGit及びGitHubの環境が出来た。
おそらくもっと色々な設定やコマンドがあると思うのでその辺はまた別途記事に起こしていこうかな。
今後は自分で書いたソースコードとかもガンガン上げてアウトプットしていきたいと思う。
【Hash関数】できるだけ衝突率を上げずにIDを短くしたい

## 背景
- もともと一意のIDを別DBでも使いたかったが、該当のカラムの文字数に制限があり、そのまま使うことができなかった。

## やりたいこと
- 英数字でできたIDををなるべく一意性を保ったまま短くしたい
  - 例: `abc123DEF456fgh7890`(19桁) => `123abc456DEF`(12桁)

## 手順
1. Hash関数を用いて文字列から数値に変換する
2. その数値を62進数(`a-z + A-Z + 0-9`)に変換する

こうすることで、一意性をギリギリまで保ったまま短くできると考えた

## 使用環境・言語
- macOS Mojave 10.14.5
- node 10.19.0
- TypeScript 3.9.7

## 実装
### 1. ハッシュ関数の選定
ハッシュ関数と言っても、アルゴリズムや出力サイズ等、様々な種類が存在している。
=> 参考: [hashアルゴリズムとハッシュ値の長さ一覧（＋ハッシュ関数の基本と応用）](https://qiita.com/KEINOS/items/c92268386d265042ea16)

今回、選定の肝となるのは「出力サイズ」。つまり、何bitの出力が得られるか。
bit数は最終的な桁数に直結するため、ちょうどいいサイズを探す必要がある。

先駆者の方が公開してくださっていたので、[任意の長さの短いハッシュ関数を考える（短縮 URLなど）](https://blog.keinos.com/20180905_4226) で実際に試しながら良さげなものを探してみる。

結果、今回は`64bit`出力の`fnv1a64`を使うことにした。
（`64bit`を62進数にすると`11桁`になる）

```ts
// 色々ライブラリがあったが、DL数が多いのを選んだ
import fnv1a from '@sindresorhus/fnv1a';

const inputStr = 'abc123DEF456fgh7890';
// jsのNumber型は2^53-1までしか表現できないのでBiGInt型の出力
const hash = fnv1a.bigInt(inputStr, { size: 64 });
console.log(hash); // 9465884287178377307n
```

### 2. 10進数を62進数に変換
10進数を2進数に変換するのと同様の方法で62進数に変換する。
62進数の一桁を`0~9,a~z,A~Z`にすることで、10進数を文字列に変換することができる。

```ts
const D_62 = BigInt(62);
const DIGIT_62 =
  '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
​
const decTo62 = (num: bigint): string => {
  const converted = [];
  while (num >= D_62) {
    const quotient = num / D_62;
    const remainder = Number(num % D_62);
    num = quotient;
    // インデックスはNumber型のみ
    // 64bitなら一度1/62にすれば2^53-1以下になる想定
    converted.unshift(DIGIT_62[remainder]);
  }
  converted.unshift(DIGIT_62[Number(num)]);
  return converted.join('');
};

const inputBigInt = BigInt(9465884287178377307);
console.log(decTo62(inputBigInt)); // INdk5tWOAhb
```

### 3. 完成したコード
```ts
import fnv1a from '@sindresorhus/fnv1a';
​
const D_62 = BigInt(62);
const DIGIT_62 =
  '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
​
const decTo62 = (num: bigint): string => {
  const converted = [];
  while (num >= D_62) {
    const quotient = num / D_62;
    const remainder = Number(num % D_62);
    num = quotient;
    converted.unshift(DIGIT_62[remainder]);
  }
  converted.unshift(DIGIT_62[Number(num)]);
  return converted.join('');
};
​
export const hash11 = (v: string): string => {
  /**
  * 文字列から一意の文字列11桁を生成する
  * 使用しているhashアルゴリズムはfnv1a、サイズは64bit
  * 衝突確率は 2^(bit数/2) 程度と言われているため
  * 2^(64/2) = 4294967296
  * 約42億分の1
  */
  
  const hash = fnv1a.bigInt(v, { size: 64 });
  return decTo62(hash);
}
​
// 使用例
const v = 'testRequestUID12345'
console.log(v, hash11(v)); // lhu2C5XktMT
```

### 4. まとめ
- 同じ入力に対しては毎回同じ文字列が返せる（短くなった分衝突率は上がってしまうが）
  - 「最初のxx桁を切り抜く」よりかはマシ
  - インクリメントで一意のIDを生成するほうが素直
- 要件にあったHash関数ライブラリを見つけるのに苦労した
  - 文字列を引数に取れるものが見つからない・・・

最後まで読んでいただき、ありがとうございました:sob:
svelte/transitionでさくっと使うことができる5つのアニメーション

# はじめに
Svelte.jsでは`svelte/transition`モジュールを取り込むことによって、アニメーションを使うことができる。
今回はさくっと使うことができる5つに絞ってそれぞれどのような動きになるのか、簡単に見てみる。

# svelte/transition一覧

## fade
名前の通りフェードアニメーションです。
`svelte/transition`をインポートする際に`fade`を指定することで使うことができる。 
そしてfadeしたい部分に`transition:fade`を追加する。※後に続くアニメーション紹介では省略します。

```javascript
<script>
  import { fade } from 'svelte/transition';
  ...

<p transition:fade>Hi Fade!</p>
```

![fade](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/9e808313-7f82-1211-eafe-7c799735f970.gif)


さらに`fade`に`delay`パラメータを渡すことによって、fadeを遅延させることが可能です。

```javascript
  <p transition:fade="{{delay: 250}}">Hi Fade!</p> 
```
※デフォルトdelay値は0

## blur

blurは`fade`と少し似ているがぼかしながら消えていくアニメーション。

```javascript

<script>
  import { blur } from 'svelte/transition';
</script>

...

<p transition:blur>Hi Blur!</p>
```

![blur](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/91054857-0b98-1cfb-82e5-3dce1dec5a41.gif)

また、`delay`意外にも`duration`、`opacity`、`amount`といったパラーメーターがあります。

試しに`opacity`を500にしたとき

```javascript
<p transition:blur="{{opacity: 500}}">Hi Blur! </p>
```

![blur_no_check_opacity (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/6279bb3a-001d-968e-b5da-ca2b0b8b96c8.gif)

先ほどよりも不透明度が強く感じる。長く見てると気持ち悪くなりそう、、

## fly
flyはパラメーター`x`,`y`のいずれかに数値を設定することでその方向に飛ばすことができる。
ちなみにパラメーターを指定しないと`fade`と同じような動きになった。

`x`を200で指定したとき

```javascript
<script>
  import { fly } from 'svelte/transition';
</script>

...

<p transition:fly="{{x: 200}}">Hi Fly!</p>
```

![fly_no_check (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/ed15701a-a29c-1ba5-39b3-e8c9af929c04.gif)



### flyのパラメーターなしのとき

ちなみに先ほど言った`x`も`y`も指定しないとき

![fly_no_xy](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/be1c44af-5758-3e20-b336-ad683b7822c7.gif)

やはり`fade`と同じなような気がするので`fly`を使うときは注意が必要そう。


## slide
`slide`は指定した要素をスライドさせるアニメーション

```javascript
<script>
  import { slide } from 'svelte/transition';
</script>

...

<p transition:slider>Hi Slide!</p>
```

![slide](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/f2a204fa-0552-8b44-b1ac-d3f73d74fbe5.gif)


## scale

`scale`は横方向にサッと消えていくようなアニメーション

```javascript

<script>
  import { scale } from 'svelte/transition';
</script>

...

<p transition:scaler>Hi Scale!</p>
```

![scale](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/f52c8caa-a352-9475-929e-d6c70fdc20e4.gif)

ちなみにですが、`duration`パラメーターを使って数値を低く設定すると早く消えます。

`duration`を100に設定したとき

![scale_duration](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325401/5fbf8d09-29e6-8f00-d557-2ff9f838bd91.gif)


# 最後に
その他にもSVGと一緒に使う`draw`といったものもあるので、気になる方は公式ドキュメントをみるといいかもしれません。

# 参考資料
[API Docs • Svelte](https://svelte.dev/docs)
Qiitaの質問に回答しまくって気が付いた、答えやすい質問の書き方とは

質問力つくので質問投稿するのも勉強になりそう

## 答えづらい例

* `ふわっとした`表現。
* あなたはどう思いますか？というオープンクエスチョン。
    * 意見を募るのは、そのアプリケーションやミドルウェアの公式サイトのコミュニティが意見を集めやすいと数か月レスがつかなかったのを見かけて思いました。

## 答えやすい例

* エラーメッセージを載せてくれること。<pre>```</pre>でくくると読みやすいです。
* syntax hilightは`go`決め打ちでいいから指定してくれると色がついて読みやすいです。

<pre>
```go
ここにプログラムやエラーメッセージを張り付けてください。
多少長くても大丈夫です！
```
</pre>


## 答えに困っている例で多かったもの

* python のエラー、AWS、PHP、Ruby、バージョンアップによる互換性トラブルへの質問が多かった印象があります。
* ググれば答えはほとんど出てくるので一緒に頑張りましょう :sushi:
Vuetify でフィルタリング機能付きセレクトボックスを実装する

Vuetifyのv-autocompleteを利用して絞り込み機能付きのセレクトボックスを実装します。

https://vuetifyjs.com/ja/components/autocompletes/


### vueでの記述は下記のようになります

```vuejs:page.vue
<v-autocomplete
    :items="users"
    item-value="id"
    item-text="name"
    placeholder="ユーザーを選択してください"
    v-model="user"
    autocomplete="off"
>
</v-autocomplete>

```

### methodは以下のようになります

```vuejs:page.vue
  data() {
    return {
      users: []
    };
  },
  methods: {
    userListLoad() {
      axios.get('https://example.com/users')
        .then(
          result => {
            Object.entries(result.users).forEach(user =>
              this.users.push({ name: user["name"], id: user["id"] })
            );
          },
          err => {
            console.log(err);
          }
        );
    },
  },
```

かんたんですね。
【Android】Contextについて

## 【Android】Contextについて
* Contextとは
  * Androidによって、実装が提供されているクラス
  * アプリケーションとのインターフェースの役割をしていて、アプリ名の取得(getPackageName)などのアプリのリソースなどを取得できる
  * AppCompatActivity(Activityが継承するクラス)もContextを継承しているので、intentなどの引数にAcitivity.thisで渡せる

## Contextの2つの取得方法
* Contextを取得する方法は、2つあります。
   * 1つめは、Activityでthis 例: MainActivity.this 
   * 2つめは、getApplicationContextを使う

* 以下に、それぞれについてまとめる

## それぞれの使い分け
* ApplicationContextを使うタイミング
  * Acitivityのライフサイクルより長い時間使いたい場合
    * Acitivityから取得するContextはActivityのライフサイクル依存するため、それよりも長い期間使用したい場合は、こちらを使う感じになると思います。

* ActivityのContextを使うタイミング
  * いろいろ調べたところ、基本的にはこちらを使うので問題ないのではと思っています。
  * 例えば、viewに渡すcontextはこちらの方がよく、なぜならActivityに適用したテーマなどが反映されなくなるためです。

## まとめ
* Contextとは、アプリケーションとのインターフェースになるクラス
* 取得方法は、2つ( getApplicationContext, Activity.this)
* 大体は、Activity.thisで取得する方がいいんじゃないのか。

## 参考記事
[Android DeveloperのContext](https://developer.android.com/reference/android/content/Context)
[Androidの勉強：Contextについて](https://qiita.com/iduchikun/items/34b3ae26cfc438e7e5dc)
ちょっと最適化問題が解けるplatypusを動かしてみた-その２

前の記事の
[ちょっと最適化問題が解けるplatypusを動かしてみた](https://qiita.com/motoyuki1963/items/8df7e98972542698541b)
で、ドキュメントのDTLZ2 問題問題を動かしてみた。
でも、このドキュメントが細かく書いてないので、よくわかりません。

ちょっと簡単な問題で、どう計算されるか、動かしてみて、理解しようと思います。


```math
minimize (x,-x)\qquad  for\quad x\in[-10,10]
```


plotypusの例題にある問題を少し変えてます。
この問題の意味は、$x$が$-10$から$10$を取った時に、二つの関数

```math
y=f(x)\qquad y=-f(x) 
```
を最小にする答えは何か？という問題です。

まず`import`です。この３つでよさそうです。
`from platypus import NSGAII, Problem, Real`

次に多目的解の元となる関数を作ります。
`def schaffer(x):return [x[0], (x[0]*(-1))]`

`problem = Problem(1, 2)`で、説明変数の数と目的変数の数を設定します。つまり、説明変数の$x$が一つで、目的変数が２つと言っているのだと思います。
次に
`problem.types[:] = Real(-10, 10)`で、xに与える数値の型と範囲を設定します。`Real`は,たぶん実数であるという宣言だと思います。
`problem.function = schaffer`で、計算する関数を宣言します。`schaffer`関数を問題として解くと宣言します。

`algorithm = NSGAII(problem)`で、NSGAIIで`problem`で宣言してきた関数の問題を解くというインスタンスを作ります。

`algorithm.run(10000)`で、10000回繰り返して計算すると設定して、計算を行います。

これが基本で、設定を変えていけば、なんとか動きそうです。

```python
from platypus import NSGAII, Problem, Real

def schaffer(x):
    return [x[0], (x[0]*(-1))]

problem = Problem(1, 2)
problem.types[:] = Real(-10, 10)
problem.function = schaffer

algorithm = NSGAII(problem)
algorithm.run(10000)
```

答えが出て、勝手に`result`に入っているようなので、それを取り出して、グラフを描きます。

```python
import matplotlib.pyplot as plt

plt.scatter([s.objectives[0] for s in algorithm.result],
            [s.objectives[1] for s in algorithm.result])
plt.xlim([-10, 10])
plt.ylim([-10, 10])
plt.xlabel("$f_1(x)$")
plt.ylabel("$f_2(x)$")
plt.show()

```

結果です。

![platypus_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336017/54b1c65d-1ef8-850f-3e69-6006d83be1e0.png)

まぁ、予想通りの答えです。
LightsailのWordPressにBasic認証を設定する


## 1. htaccess.conf 修正
`vim /opt/bitnami/apps/wordpress/conf/htaccess.conf`


---
__※ 2021年 11月追記__

下記のディレクトリに wordpress-htaccess.conf なるものができてました。
`/opt/bitnami/apache/conf/vhosts/htaccess/`

/opt/bitnami/apps ディレクトリが存在しない場合は、下記のファイルを書き換えてください。
`vim /opt/bitnami/apache/conf/vhosts/htaccess/wordpress-htaccess.conf`

---

末尾に下記追記

```
<Directory "/opt/bitnami/apps/wordpress/htdocs">
    AuthUserfile /home/bitnami/apps/wordpress/htdocs/.htpasswd
    AuthGroupfile /dev/null
    AuthName "Please enter your ID and password"
    AuthType Basic
    require valid-user
</Directory>
```

## 2. htpasswd ファイル作成

`htpasswd -c /home/bitnami/apps/wordpress/htdocs/.htpasswd [ユーザー名]`

## 3. apache 再起動

`sudo /opt/bitnami/ctlscript.sh restart apache`

以上！
ターミナルのコマンド

#ファイルの作成
```
touch ファイル名
```

#ディレクトリ名の変更
```terminal
mv 変更前ディレクトリ名　変更後ディレクトリ名
```
ただし、変更後ディレクトリ名がすでに存在する場合、変更前ディレクトリが変更後ディレクトリに移動してしまうので注意。

#ディレクトリの削除
ディレクトリとその中身を削除。取り返しのつかないことにならないように注意。
```terminal
rm -r ディレクトリ名
```
TSでArray.reduce使ったら第一引数のaccumulatorがnever型になって混乱した話

# Array.reduceが一度も回らないとcallbackが無いのでaccumulatorはneverになる

配列の型に[]の空配列を想定していると一度も回らないのでaccumulatorの戻り値無しでnever型になる。
空が想定される場合はそもそも回す処理まで到達出来ないようにしてあげよう。

```typescript

// const orderArray: string[]|[] = this.orderArray
// ↓
const orderArray: string[] = this.orderArray

arrFunc () {
  return orderArray.reduce((accumulator, id) => {
    const item: ItemDocument|undefined = items.find(item => item.id === id)
    if (item) { accumulator.push(item) }
      return accumulator
    }, [])
}
```

## 対策

1. 型の[]がArray系関数に到達しない処理にする
2. Arrayを型キャストする
    1. https://stackoverflow.com/questions/54117100/why-does-typescript-infer-the-never-type-when-reducing-an-array-with-concat

```typescript
const orderArray = this.orderArray as string[]

arrFunc () {
  return orderArray.reduce((accumulator, id) => {
    const item: ItemDocument|undefined = items.find(item => item.id === id)
    if (item) { accumulator.push(item) }
      return accumulator
    }, [])
}
```
オブジェクト指向開発：C++プログラミングケース1：仕様の変化

個人開発をしていても、なかなか`C++`の`オブジェクト指向`パラダイムから恩恵を得ている感覚が湧いてこないかもしれません。
そんなあなたに1つ具体的なケースをご紹介しましょう。

#イントロ
システムの中に、何かを制御するような機能があったとしましょう。
クラス図で表現すると以下のようなイメージです。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634905/091fe4e0-2d04-228d-fcc4-aee679d87ad1.png)

クラスの責務は、それぞれノートに記載している通りです。
　A：制御指示を出したり、制御情報を管理したりする
　B：対象物を制御している
　C：対象物の状態を取得する
　D：制御対象に出力を指示する
　E：制御情報をユーザーに公開する（GUIとかその辺）

だいぶ抽象化してしまっているので、イメージが湧かないかもしれません。
電気ポットをイメージしてみましょう。
あ、ネーミングがイマイチ・・・
　`TemperatureOperator`：温度情報を管理する
　`TemperatureController`：水の温度を制御する
　`TemperatureAccessor`：温度センサから水の温度を取得する
　`Heater`：ヒーターにかける電圧を指示する
　`TemperatureInformation`：水の温度を何度にしているかディスプレイに表示する

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634905/3e863e35-3ba8-3296-b7eb-39b782154ce7.png)

#仕様の変化
仕様とは常に変化していくものです。
それに応じてソフトウェアも変化していきます。

例えば「温度センサから取得するデータは、10secの単純移動平均にしてほしい」と要求されたとしましょう。
この場合どのような対応が求められるでしょうか？

![Untitled (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634905/8f1baed8-bc0b-da56-44cd-378d51865593.png)

そうですね、温度センサから取得して`TemperatureController`に温度データを渡す前に、内部で10secの単純移動平均をかけるようなクラスがあればいいですね。
既に`TemperatureController`が温度データを取得するための`I/Fクラス`が存在するわけですから
、その派生クラス（実現クラス、具象クラス）として`new`すればいいことになります。

```TemperatureController.cpp
    // Instantiate. 
    temperatureAccessor_ = new TemperatureSimpleMovingAverage;

    // get temperature data. 
    if(NULL != temperatureAccessor_)
    {
        currentTemperature_ = temperatureAccessor_->getTemperature();
    }
```

```TemperatureController.h
private:
    ITemperatureAccessor* temperatureAccessor_;
```

`TemperatureController`からすれば、取得した温度データが移動平均をかけたものかどうかなんて知りません。
温度センサから取得した温度に3度（3°C）足したデータを`TemperatureController`が知らずに取得しているかも知れません。

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634905/4d04e863-6c23-6ccc-fde8-09cd7f259407.png)

仕様の変化がこれくらいであれば、生成されるインスタンスのクラスが変わるだけです。
`I/Fクラス`の派生クラスとしては、以下が存在していて、`new`する箇所だけ変更すればいいですね。
　`TemperatureAccessor`
　`TemperatureSimpleMovingAverage`
　`TemperatureKatteniHosei`

インスタンス生成時に、どのクラスのインスタンスなのか`configuration`ファイルで設定できるようにすれば、コードの変更すらありません。
いやー、ありがたい。

というわけで、変化に強いソフトウェアを開発するために`オブジェクト指向`が有効なんですね。
まだまだ`責務`がどうだとか話に出せていないので、具体的なケースをもとにまた執筆します。

※「こういう考え方だぞ、間違えんなよ」とか「クラス図イケてないよ」とかコメント大歓迎！
IEでheight:autoが効かない場合の対応＝min-height:1pxを指定する

IEでimgにheightを指定すると…CSSで `height:auto`が効かないようです。
最近、imgにheightを指定するのでバグに気づきました。

##解決方法

そんな場合のかんたんな解決方法を見つけました。
このようにimgタグにwidthとheightを指定した場合…

```HTML:HTML
<img class="hoge" src="hoge.png" width="1200" height="800">
```

IE対応は `min-width:1px`を指定すればOKでした。


```CSS:CSS

.hoge {
width:auto;
max-width:100%;
height:auto;
min-width:1px; /*IE対策*/
}
```

##imgタグにwidthとheightを指定する理由

imgタグにwidthとheightを指定すると読み込みスピードが早くなります。
その場合にIEのCSS指定にコツがあることを知りませんでした。

参考記事にもっと詳しいwidthとheightを指定するメリットが掲載されています。

###参考URL

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver
https://parashuto.com/rriver/development/img-size-attributes-are-back
WioNodeをArduino化してHX711と組み合わせて計量してみた話

WioNodeをArduino化して遊んでたら，重さ測れたら楽しいよね．という声がどこからか聞こえてきたのでやってみました．

HX711って5V駆動な品かと思ったら3.3v駆動なマイコンでもいけるっぽい？
ちょっと試してみました．

# WioNodeと繋いでみた
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304878/003b3306-88a8-75b8-6d0a-6b085a881322.png" width=600>


今回はAmazonで買った安いHX711基板を使用しています．
ロードセルはビーム型．1kgまで計測できるモノです．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304878/f6e69017-4b90-369b-7de6-028cd75ea5a7.jpeg" width=600>

ビーム型のロードセル向けにthingiverseにこんな3Dモデルが落ちているのでサクッと打ち出してみました．
3Dプリンタが無い人は，Amazonのこの辺を使ってみると良いかも．

- [thingiverse > Load cell testbed](https://www.thingiverse.com/thing:3129439)
- [Amazon > デジタルロードセル 電子スケール ロードセル計量センサ 重量センサ](https://www.amazon.co.jp/dp/B07JL7NP3F)

もう片側はUARTのままで，シリアル経由で結果を吐き出してます


# コードはこんな感じ
```
#include "HX711.h"

const uint8_t PORT0A = 1;
const uint8_t PORT0B = 3;
const uint8_t PORT1A = 4;
const uint8_t PORT1B = 5;
const uint8_t PORT_POWER = 15; // (common with RED_LED)
//set PORT_POWER as HIGH for power supply. Low means no power.

const uint8_t FUNC_BTN = 0;
const uint8_t BLUE_LED = 2;
const uint8_t RED_LED = PORT_POWER;

const uint8_t UART_TX = PORT0A;
const uint8_t UART_RX = PORT0B;
const uint8_t I2C_SDA = PORT1A;
const uint8_t I2C_SCL = PORT1B;

// HX711 circuit wiring
const int LOADCELL_DOUT_PIN = PORT1B;
const int LOADCELL_SCK_PIN = PORT1A;

HX711 scale;

void setup() {
  // ----------
  // デバッグ用のシリアル通信の初期化
  Serial.begin(9600);
  while (!Serial); //waits for serial terminal to be open, necessary in newer arduino boards.
  Serial.println("HX711 demo");

  // ----------
  // IO周りの初期化
  pinMode(PORT1B, INPUT);
  pinMode(FUNC_BTN, INPUT);
  pinMode(BLUE_LED, OUTPUT);
  pinMode(PORT_POWER, OUTPUT);
  digitalWrite(PORT_POWER, HIGH);
  digitalWrite(BLUE_LED, HIGH);

  // ----------
  // HX711の初期化
  scale.begin(LOADCELL_DOUT_PIN, LOADCELL_SCK_PIN);
  scale.set_scale(2280.f);    // this value is obtained by calibrating the scale with known weights; see the README for details
  scale.tare();               // reset the scale to 0
}

void loop() {
  if (scale.is_ready()) {
    Serial.print("meas : ");
    Serial.println(scale.get_units(10), 1);
  } else {
    Serial.println("HX711 not found.");
  }

  delay(100);
}
```

# 分銅を使った動作確認
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304878/63fd3139-7d54-8481-ae6e-d5a13d420a7f.jpeg" width=600>

10gから900gの間で検証してみた所，こんな具合でした．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304878/8f1aa753-8b71-d1b0-b535-10d9fe19d2bf.png)

重量が増していくと差が出てきちゃいますね．数点計測した結果からキャリブレーションかけた方がより正しい数値になるんだろうな．

# 【オマケ】3.3vで動作させる場合は，20kΩの抵抗を10kΩに変更した方が良いみたい
- [Modifying the HX711 Breakout Board for 3.3V operation](https://hackaday.io/project/1741-honeybee-hive-monitoring/log/9780-modifying-the-hx711-breakout-board-for-33v-operation)

どうもHX711は2.7～5.5vまでの範囲で動作するようですが，VFBピンに入れる電圧の観点から3.3v駆動させる場合は，分圧している抵抗値を変更すべきのようです．

(改造せずとも結果的には正しく動作しましたが、ちょっと気持ち悪いので私は10kΩ抵抗に改造しました


以上，WioNodeをArduino化してHX711を使ってみた話でした．
Laravelでuniqueの対象から自分自身の値を外す

## 問題
- ユーザー情報の編集や更新をするフォームを作ってバリデーションを設けた
- ユーザー名メールアドレスに`unique`を適用した
- `unique`の対象以外の情報を変更したいのに、`unique`に引っかかってしまって、その先に進めない

### 例

この職種の`DELETE_FLAG`を変更したいのに、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/4133ed85-cd7e-562a-8ca9-67fb01577635.png)

`unique`が適用されている`職種名`のエラーが出てきてしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/7e27c02d-a9c9-66d6-a800-5cae3d62f2c9.png)


### コード
現在のコード、バリデーションはこのような状態

```Works/EditCheckController.php
$validator = Validator::make($request->all(), [
    'edit_name' => 'required|max:20|unique:works,works_name',
    'edit_flag' => 'boolean',
],
[
    'edit_name.required' => '職種名を入力してください。',
    'edit_name.max' => '職種名は20字以内で入力してください。',
    'edit_name.unique' => 'この職種名は既に登録されています。',
    'edit_flag.boolean'  => '0か1を入力してください。',
]);
```

## 解決策

**`unique`の引数を増やす**

```Works/EditCheckController.php
$validator = Validator::make($request->all(), [
    'edit_name' => 'required|max:20|unique:works,works_name,'.$request -> edit_id.',works_id',
    'edit_flag' => 'boolean',
],
[
    'edit_name.required' => '職種名を入力してください。',
    'edit_name.max' => '職種名は20字以内で入力してください。',
    'edit_name.unique' => 'この職種名は既に登録されています。',
    'edit_flag.boolean'  => '0か1を入力してください。',
]);
```

`unique`の内容は、
**`unique: uniqueチェックをしたいテーブル名, uniqueチェックをしたいカラム名,.uniqueチェックの対象外にしたいデータがあるレコードの主キー.',uniqueチェックの対象外にしたいデータがあるレコードの主キーのカラム名'`**
 となっている。

処理の内容としては、

- `uniqueチェックをした時の主キー`と`対象外にしたいデータがあるレコードの主キー`が一致すれば、`unique`の結果を返さない
- `uniqueチェックをした時の主キー`と`対象外にしたいデータがあるレコードの主キー`が一致しなければ、`unique`の結果を返す

(であってるはず)

### 確認

`unique`の対象となっている`WORKS_NAME`を変更せずに他のデータを編集できるようになり、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/526d0cdb-a825-ca2c-7277-5b468645d4a7.png)

既に登録されているデータは`unique`の対象にすることができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218398/ce4a4cbd-b770-3559-46d3-5a8436537c77.png)


## 参考文献
- [【Laravel】更新時のユニークチェックで特定の値は対象外としたいときの対応](https://qiita.com/daiki_44/items/0445355e6f688f6385a9)
- [Laravel5のバリデーションの重複チェックで自分自身は除外する方法](https://qiita.com/qwe001/items/997016be3ca4c7bde47e)
【PHP】unset、isset、header

PHPについて学習内容を備忘録としてまとめます。

#unset
定義した変数の割り当てを削除する関数。不要になった配列を削除することも可能です。
例えば、配列で要素を削除したい場合にこのように記述します。

```php
$ary = array(0,1,2,3,4); 
unset($array[3]);

```
上記のように定義すると4番目の要素『3』を削除することができます。


#isset
引数に変数にすることができ、変数に値がセットされている場合にtrueを返します。
もし値がセットされていない場合にはfalseを返します。

たとえば下記のようなコードのような分岐処理を行うことができます。

```php
if(isset(x)){
	xに値がセットされている場合
}
else
{
	xに値がセットされていない場合
}

```
セッションに値がポストした際に指定のパスに飛ばすなどの動作をすることも可能になります。

#header
HTTPヘッダを送信する関数になります。
ある処理を終えた後に指定のパスに飛ばしたい時などに使用されます。

下記のように定義すると指定パスのファイルに飛ばすことができます。

```php
<?php
 　header('Location: ../index.php');
　 exit;
?>
```
上記の例だと、header関数が動いた時点でindex.phpに飛ばしてくれます。
ファイル分岐などを行いたいときに活用することができます。

#参考URL
https://techacademy.jp/magazine/11410
https://techacademy.jp/magazine/12288
https://techacademy.jp/magazine/11609
Vuetify使うとmarginやpaddingの調整がめっちゃ楽な件

# Vuetifyとは

VuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできる**UIライブラリ**です。
※[Vuetify](https://vuetifyjs.com/ja/)

実際に私もよく使っていて、とても気に入っています。
Vuetifyの書き方は少し特殊なので慣れるまではちょっとややこしいかもしれませんが、**慣れるとパパッとUIの実装ができる**のでオススメです

# 本題

本題のmarginやpaddingの設定ですが、
実際どんな感じで書くのかというと、こんな感じ。

```index.vue
<div class="my-5" />
```

## property

感の鋭い方はもうお分かりかもしれませんが、
**最初の「m」はmarginの「m」です。**

**paddingの場合は「p」と書きます。**

それだけです。

## direction

そして、次の「y」という文字。
**これはy軸方向の「y」という意味です。
つまり上下を対象に適用させるということです。**

となると、**「x」は左右を対象とします。**

他にも、
**・「t」 Top
・「b」 Bottom
・「l」 Left
・「r」 Right
・「a」 全方向**
などがあります。

## size

最後の「5」という数字、これはsizeを表すもので、
「1」が4pxを表しています。

なので「5」の場合は5×4で20pxです。

#### つまり「my-5」は

上下にマージンを20px適用するという意味になります！

## ネガティブ margin・padding

そして個人的にめっちゃイイ！と思ったのが、
**ネガティブ（マイナス）な値も設定できる**という点です

ネガティブを設定するには、
**size（数字の部分）の前に、「n」を追加します。**

なので「my-n5」と書くと、
上下にネガティブマージンを20px適用するという意味になります。

# 最後に

Vuetifyを使うと直接タグ内に書けるので、
わざわざCSSをstyleに分けて書かなくて済みますし、
コード量も肥大化しにくく且つ、開発スピードも上がるのでメリットは大きいかと思います

また今回紹介したmarginとpadding以外にもたくさんの機能があるので、他の機能も是非見てみてください。
ある程度のことはVuetifyで再現できるかと思います。
※[Vuetify](https://vuetifyjs.com/ja/)
WebGazer.jsを使って、Webカメラで顔認識してみた

[WebGazer.js](https://webgazer.cs.brown.edu/)という、Webカメラを使って**視線の追跡機能**を実装できる面白そうなものを見つけたので試してみました。

ただこの視線の追跡機能、私も試してみたのですがうまく精度が出なかったので途中で断念しました。。

なので**顔認識**させるところまでのやり方を書いていこうと思います！

# 手順

まず[こちらのURL](https://webgazer.cs.brown.edu/webgazer.js?)から、webgazer.jsファイルをダウンロードします。

適当なエディタを開いてプロジェクトを作成し、index.htmlファイルを作成します。
先ほどダウンロードしたwebgazer.jsファイルも同じプロジェクト内に入れておきます。

そしてhead内でscriptタグを使ってwebgazer.jsを読み込みます。

```index.html
<script src="webgazer.js" type="text/javascript"></script>
```

あとはbody内にscriptダグで下記コードを追加します。

```index.html
<script>
  webgazer.setGazeListener(function (data, elapsedTime) {
    if (data == null) {
      return;
    }
    var xprediction = data.x;
    var yprediction = data.y;
    console.log(elapsedTime);
  }).begin();
</script>
```

もうこれだけでいけます。

実際に試してみましょう。
ブラウザからサーバにアクセスするとカメラの使用許可を求められるので、**許可**を選択しましょう！

するとこんな感じで顔認識してくれます！
すごい！楽しい！

![Animated GIF-downsized_large (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/d6295235-b573-4ef3-9336-61df53a0ea07.gif)


ここからさらに視線追跡機能も試してみて、
動くには動いたのですが、私の環境だといまいち精度が出なかったので断念しました。。

興味のある方は是非上手くいくか試してみてください！

実装方法などについては[こちら](https://webgazer.cs.brown.edu/)をご参照ください。
RaspberryPi4 DLNA編

# はじめに
リビングのTVで動画ファイルを再生したかったのでセットアップした

# minidlnaのインストール

``` bash
sudo apt update
sudo apt install minidlna
```

# 共有フォルダの準備
場所はどこでも良い。
ここでは外付けSSDにフォルダを切る。

``` bash
cd /mnt/ex-ssd/share/
mkdir movies
mkdir photos
mkdir musics
```

# 設定ファイルの編集
`/etc/minidlna.conf`のmedia_dirを共有フォルダに書き換える

```bash:minidlna.conf
media_dir=/mnt/ex-ssd/share
```

# 終わり
共有フォルダにファイルを放り込んで、DLNA対応機から再生する

## 備考
ファイルが見えない時はサービスをリスタートすると見えるようになるかも

``` bash
sudo systemctl restart minidlna
```
児童の見守り機能付き防犯ブザー（組込みシステム開発）ー午後

応用情報技術者平成30年春期 午後問7

ファイル：2018h30h_ap_pm_qs.pdf

参照：
https://www.ap-siken.com/kakomon/30_haru/pm07.html


メモも簡単に記載します。
詳細の分析は、上記リンクをご参照くだいますようよろしくお願いします。

１、防犯ブザーの動作について，(1)，(2)に答えよ。
（１）、通信圏内にある防犯ブザーが，ある日の午前8時00分に静止状態から移動状態となった。防犯ブザーが次に静止状態になったのは午前8時20分であり，その後，同日の午前9時20分まで静止状態のままであった。防犯ブザーが午前8時台に位置登録を行った回数は何回か。整数で求めよ。

登録タイミングにより、
８：００　静止→移動　　１
８：０５　１
８：１０　１
８：１５　１
８：２０　移動→静止　１
８：５０　１
９：２０　１　→９時台ので、対象外。

なので、６回でしょう。


＜＜登録タイミング＞＞
・「静止状態で移動を検出すると，直ちに位置登録を行い，状態を移動状態にする」
・「移動状態で，登録周期中に一度も移動を検出しなかったときは， 位置登録を行った後，状態を静止状態にする」
・「静止状態では，消費電力の低減を図るために登録周期を30分にする」

（２）、通信圏内にある防犯ブザーが，5分よりも短い間隔で位置登録を行うことがある。それはどのようなときか。40字以内で述べよ。

通信圏内で静止状態から移動状態に遷移する際には、登録周期に関係なく必ず位置登録が行われます。つまり静止状態で位置登録が行われた後、5分以内に移動を検出したときには、5分よりも短い間隔で位置登録が行われることになります。

移動状態から静止状態なって、５分以内でまた移動状態になる場合（私の答え）
→
静止状態で位置登録を行った後，5分経過する前に移動を検出したとき（参考答え）


２、タイマタスクの設計に関する検討について，(1)，(2)に答えよ。
（１）登録周期の計測に16ビットタイマを用いて100ミリ秒を計測し，16ビットタイマ割込みの発生が通知された回数を数えて位置登録のタイミングを通知する方式を考えてみた。この場合に，16ビットタイマのカウント値に設定する値を10進数で求めよ。ここで，1MHz＝106Hzとし，ソフトウェアの動作時間は考慮しなくてよいものとする。

・MPUの動作クロックが16MHz
・タイマのカウントクロックはMPUの動作クロックを32分周（1／32）した信号
とあるので、1秒あたりのカウント数は、

　16,000,000÷32＝500,000(カウント)

とわかります。

計測したい時間間隔は100ミリ秒ですので、必要なカウント数は以下のように計算できます。

　500,000×1／10＝50,000(カウント)

※クロック数は
クロック周波数とも呼ばれ、CPUが処理を行う際に発する信号を扱う速さで、「Hz（ヘルツ）」という単位で表されます。この数値が高いと、同じ時間内により多くの処理を行うことができる、ということになります。

レストランのシェフに例えると、「クロック数が低い＝動きがゆっくり」、「クロック数が高い＝動きが速い」ということになります。

例の16MHzとは、１秒16M回動いているとのこと。


※分周とは、
周波数を下げること。2分周といえば半分に、4分周といえば1/4にすることをいう。

例の16MHzの32分周とすると、１秒16M/32回動いているとのこと。


後は、ひどい所は、問題文中に16ビットカウントタイマの動作として「カウンタ値が0になった次のカウントクロックで割込みを発生させる。」の説明があります。
例え、カウントタイマが３にセットされると、３、２、１、０で合わせて　４回計算されます。まるでC言語の配列のインデックスのようなものでしょう。

なので、50000回だけど、実は49999カウントに設定されないといけないでしょう。


（２）、検討の結果，登録周期の計測には16ビットタイマを使用せず，日付時刻用タイマを使用することにした。日付時刻用タイマを使用する理由を20字以内で述べよ。

16ビットカウントタイマはMPUに内蔵されており、カウントされる度に割込みを発生させます。
MPUは割込みを検知すると、省電力モードから通常モードに復帰するので、16ビットカウントタイマを用いた場合には通信圏内でのカウント中は常に通常モードでの利用になります。

これに対して、日付時刻用タイマでは設定時刻になったときにだけ割込みを発生させるので、カウント中でもMPUはアイドル状態になり省電力モードへと切り替わります。

つまり、上記（１）によると、
・16ビットカウントタイマは、MPUを割り込み通知は頻繁過ぎる（100ミリ秒一回）ので、MPUは常に通常モードで利用しています。
・日付時刻用タイマは、１回だけ割り込み通知をする、ほぼ、MPUは省電モードで利用できるでしょう。


３、本文中の下線①について，移動検出情報がセットされていないときだけ，メインタスクがタイマタスクに行う要求を，表2中の字句で答えよ。

移動情報がセットされていないということは、前回の位置登録から登録周期の5分間、一度も移動を検出しなかったということです。このとき、防犯ブザーは位置登録を行った後、状態を静止状態に変更します。

メインタスクからタイマタスクへの要求には、「登録周期の計測開始」「登録周期の計測停止」「登録周期の変更」がありますが、この場合にメインタスクから行うべき要求は登録周期の変更です。なぜなら、静止状態への切り替わりに伴い、移動状態では5分だった登録周期を静止状態の30分に変更しなくてはならないからです。

＜＜表２＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/86350344-323b-a6e9-8618-a9efeed8b0d1.png)


＜＜メインタスクの主な処理＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/05d608f2-be88-438c-b48f-c9866005e64b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/6d9db4d0-eef2-b620-15d2-e5106595c75f.png)
Sinatra アプリを CSS で装飾

# はじめに
[前回の記事 - Qiita](https://qiita.com/superrino130/items/a002538de3f02ed63451)で更に味を占めたので、`CSS`でチョットだけ色を付けてみました

# 完成画面
![20200907A.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/e0258c1b-59c6-96dd-ab3b-e1959e707da3.png)
[heroku アプリ](https://vast-bastion-88155.herokuapp.com/)
# 前回の反省点
```err.or
app.rb:2:in `require': cannot load such file -- sinatra/reloader (LoadError)
```
単に、`sinatra-contrib`が`group :development`になっているだけでした。
# CSS
ずらずらと並んでいるのはカッコ悪いので、社名のみを表示し、路線名はクリックして表示させることにしました。

```style.css
.btm {
    transition: 0.2s;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
}
.container input:checked + .btm {
    height: auto;
    padding: 0 10px 10px 10px;
    background-color: lightsalmon;
}
```
`height`が`0`になっているので隠れているんだと思います~~結果オーライ~~
# まとめ
+ 初アプリ修正
+ CSS に詳しくなった

参照したサイト
*[【CSS】CSSだけでブロック要素の表示非表示](https://www.webdlab.com/labs/object-open-3/)*
*[【初学者向け】Ruby 遅延鉄道路線名の入手方法 - Qiita](https://qiita.com/EightTreesCoffee/items/d9bc07316e5b2f6900c2)*
k3d cluster create逆引きメモ

※ 随時追加・修正していきます。 基本的に自分用のメモです。
# 目次
- [基本](#基本)
- [Server APIのポートを指定する](#server-apiのポートを指定する)
- [Service Type LoadBalancerを使用可能にする](#service-type-loadbalancerを使用可能にする)
- [workerノードの数を指定する](#workerノードの数を指定する)
- [ノード内で実行されるk3sコマンドに引数を渡す](#ノード内で実行されるk3sコマンドに引数を渡す)
- [【リモート】 ローカルのkubectlから操作可能なリモートk3dクラスターを作る](#リモート-ローカルのkubectlから操作可能なリモートk3dクラスターを作る)
- [【リモート】 Service Type LoadBalancerを使用可能にする](#リモート-service-type-loadbalancerを使用可能にする)
- [【リモート】 ingressを利用する場合](#リモート-ingressを利用する場合)


## 基本

```
k3d cluster create
```

## Server APIのポートを指定する

```
k3d cluster create --api-port 6550
```

## Service Type LoadBalancerを使用可能にする

```
k3d cluster create -p 8081:80@loadbalancer
```

## workerノードの数を指定する

```
k3d cluster create --agents <n>
```

## ノード内で実行されるk3sコマンドに引数を渡す

```
k3d cluster create --k3s-server-arg '--tls-san="1.2.3.4"'
```

## 【リモート】 ローカルのkubectlから操作可能なリモートk3dクラスターを作る

```
k3d cluster create --api-port <your server ip>:6550
```

## 【リモート】 Service Type LoadBalancerを使用可能にする

```
k3d cluster create -p <your server ip>:8081:<your LoadBalancer port>@loadbalancer
```

## 【リモート】 ingressを利用する場合

```
k3d cluster create -p 80:80@agent[0] -p 443:443@agent[0]
```
【JavaScript】何も考えずfill()で横着して初期化しない

# 初めに

`fill()`でずぼらして初期化したら思った挙動にならなかったので備忘録。
実際のコードを引っこ抜いてちょっと変えてるので変な感じになってるかも。

JavaScriptは最近やり始めましたがよくわからんですね。



# 起こったこと

以下のような変数を作成した

```typescript:sub.ts
export const FuncA = (): HogeHoge => {
    const [a, setA] = useState("0");
    const [b, setB] = useState("0");
    retunrn {
        parameter: {a,b},
        setter: {setA,setB}
    };
}
```

`fill(funcA)`をした`parameters`配列のそれぞれの要素を突っ込んだテーブルを以下みたいな感じで作る。

```tsx:main.tsx
function TableBody(params: Params){
    const parameters = Array(params.lineCount).fill((FuncA));

    return (
        <table>
            <thead>...</thead>
            <tbody> { getLines(parameters) } </tbody>
        </table>
    );
}
...
function getLines(foo: Array<FuncA>) {
    return ([...Array<number>(foo.length)].map((_, i) => {
        return (
            <tr>
                <td>{ i + 1}</td>
                <td>
                    <label>A: <input type="number" value={foo.parameter.a} onChange={(e) => foo.setter.setA(e.target.value)} /></label><br />
                    <label>B: <input type="number" value={foo.parameter.b} onChange={(e) => foo.setter.setB(e.target.value)} /></label>
               </td>
            </tr> 
        )
    }));
}
```

全てのinputが独立して変更されることを想定していたが、
画面上でinputの値を変更したばあい全ての行の値が変更された。

`FuncA`の定義を`export const FuncA(){...}`にして`fill( ()=> FuncA())`とかにもしたけど同じだった。

# よくわからないけど直した

`fill()`をやめて`map()`で割り当てたら独立した。
`fill(0)`をしている場合上記みたいなことにならないので、
非プリミティブ型の場合は参照で引きたわされるのだろうか。
(そもそも関数を変数に入れること自体がこれまでなかったのでそこの挙動の把握も実は微妙)

```typescript
const parameters = [...Array(params.lineCount)].map(() => FuncA());
```

# おそらくこの部分の記載に基づくもの

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
Polyfillのが同等の実装らしいので少し見たところ
`var O = Object(this);`のところが多分そうかなとは思った。


Objectのコンストラクタのページは404だったが、Objectクラスの説明に以下の記載があった。

> https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object
> Object コンストラクターは、指定された値のオブジェクトラッパーを生成します。
> - 値が null または undefined である場合、空のオブジェクトを生成して返します。
> -  それ以外の場合は、与えられた値に関連する型のオブジェクトを返します。
> -  値がすでにオブジェクトであった場合は、その値を返します。

少し調べた感じJavaScriptもプリミティブ型はオブジェクトではなさそうなので、
プリミティブ型は２つ目の挙動、それ以外の場合は３つ目の挙動になるのだろうか。
この「その値」というのが複製ではなく引き渡したオブジェクト自体がかえるという意味であれば納得できる。
railsのハッシュタグ検索の実装

今回は、railsでハッシュタグ機能を実装しました。
https://glodia.jp/blog/3936/
のサイトを参考にさせていただきました。

完成図
商品を出品する時にタグをつけると

![スクリーンショット 2020-09-07 18.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682043/fa5a191a-9cc5-c5e7-56a9-03f09e952ead.png)

リンクが踏めるハッシュタグが投稿詳細の際に確認でき、
![スクリーンショット 2020-09-07 18.45.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682043/fb65e546-02b1-d7e5-9a9d-5b8e0dd72f70.png)

リンクの先には同じタグを持った商品が並ぶ
![スクリーンショット 2020-09-07 18.57.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682043/a074e21d-ddbc-6a0d-eef9-924438662696.png)


実装方法
1 商品テーブルitemsとタグテーブルtagsは中間テーブルで結びついている
2 ヘルパーに、タグ名をリンクにするための記述をする


```ruby:items_helper.rb
def render_with_hashtags(tag_name, tag_id)
tag_name.gsub(/[#＃][\w\p{Han}ぁ-ヶｦ-ﾟー]+/){|word| link_to word, "/item/hashtag/#{word.delete("#")}?tag_id=#{tag_id}"}.html_safe
end
```
第一引数でタグの名前、第二引数で中間テーブルに保存されているタグのidを渡してます。
gsubメソッドでurlに置換しhtml_safeメソッドをつけることでエスケープ処理を避け、ビューに「＃名前」の形でリンクが踏めるようになります。
?tag_id=#{tag_id}　の記述で、タグのidをリンクの中に仕込む

3 ルーティングの実装

```ruby:routes.rb
 get '/item/hashtag/:name', to: "items#hashtag"
```
本来はitemコントローラーの中にネストするのがベストだと思います

4 コントローラーの実装

```ruby:items_controller.rb
def hashtag
  @tag = Tag.find(params[:tag_id])
  @items = @tag.items
end
```
2でリンクの中に仕込んだtag_idをparamsで渡し、該当するタグを探す
該当するタグを持つ商品を変数に入れる

5　投稿詳細一覧を作る時と同様、eachメソッドを@itemsを使用してビューを実装

完成です！
OpTaliX のメモ

## 背景

* 光学シミュレーションを学んだり調査したい
* 光学シミュレーションソフトで計算したのと, 自前計算したのとを比較したい
 
## OpTaliX とは?

http://www.optenso.com/index.html

古めかしいですが, 一応一通りの光学計算ができます.
波動光学などを扱える Pro 版は 1,600 EUR です(買い切り. 1 年間のサポートとアップデート). 日本円でだいたい 20 万円くらいです.
更新は 1 年 400 EUR(5~6 万円くらい)です.

一人で切り盛りしているようです. 質問するとだいたいすぐに答えてくれる(式の説明とかもしてくれる)ので, 光学相談代と思えば安いでしょう :smiley: 

Windows でしか動きません. GPU は使っていないので Virtual Box などの仮想環境で動かすこともできるかもですが, ライセンス認証が USB ドングルなのでなにかうまいこと設定しないとだめかもです.

他の有名な光学ソフト CodeV, ZEMAX のファイルをある程度 import できます.

ドキュメントが, (光学)エンジニア向けにはそこそこ充実していて, 計算式など載っているので参考になります.

使ったことはないですが, どうも CodeV といろいろ互換性があるようです.

## Lens data export

CodeV, ZMAX などにエクスポートできます. ASCII フォーマットです. ただ完全というわけではありません.

OpTaliX の自身のフォーマットも ASCII です.

Lens 定義自体はだいたいどのフォーマットでも似ているので, 各種フォーマットで出力すればどれがどれに対応しているかなんとなくわかります.


## Entrance pupil, exit pupil

* `SAP` : 最後面からの exit pupil 位置
* `SEP` : 最前面からの entrance pupil 位置
* `APD` : exit pupil diameter(ドイツ語で ’Austrittspupillendurchmesser’)
* `EPD` : entrance pupil diameter

## chief ray

YIM(paraxial image height)などから chief ray の情報を求める.

`y`, `rsi` あたりで field の ray fan 情報をダンプして aperture 位置 0, 0 のレイ

image plane の Y 位置. 最終面(image 面)が s12 とすると,


`y s12 f1 0 0`

など.(f = field number)
(`Edit` -> `Configuration` > `Fields` で Image height paraxial になっているとする)

## single ray trace

`sin` コマンド

## レイの軌跡のダンプ

raylog コマンドで, その後の操作(e.g. Spot diagram 計算)でのレイの軌跡(交点)をファイルに保存できます.

ログは一度に 1 surface 単位のため, lens 全部の交点をダンプしたい場合は surface ごとに raylog を呼ばないとだめかもです...

## real image height 

`EVA [YRI f1]`

で field 1 の real image height(YRI) が取得できます.

## ior

`EVA [IND s1 wavelength]`

でサーフェスの特定の波長の屈折率を取得できる.

### Private glass

CodeV の `PRV` glass を読んでよろしく CodeV と同じように補間はしてくれないです.
自前で補間して, `.idx`(CSV)で wavelength/value のペアデータを Melted glass として読み込ませるしかない感じです.

100 ペアまでしか対応していかなったので精度が出せないため, リクエストしたら, 最新版では 2000 ペアまで対応してくれました :smiley: 

## first order data

`FIR` : first order(近軸近似量)の表示
`FIO` : paraxial ray trace で各面の u, h の表示

## MTF

vs Field の plot では 3 本(`lp/mm`)しか表示できない...
Config で Max `lp/mm` を指定する. その 1/2, 1/4 が計算される.
たとえば 40 `lp/mm` であれば `40, 20, 10` が計算される.

### MTF export

MTF の数値はファイルにエクスポートできず, コマンドライン(ヒストリ)にテキストで表示するだけのようです. 適当に手動でコピペしてファイルにエクスポートします.

## PSF

Diffraction は Fraunhofer 近似の FFT.
2D では Huygens PSF は計算できない(X/Y の 1D のみ)

### PSF export

Surface mesh モードでファイルに強度を出力できます.

Excel 形式ですと 256x256 以上の大きさはエクスポートできません.
4x4 されて出力されるので, NRD(number of ray grids) は 64 までになります.

Ray grids 128x128 以上のデータがほしい場合は ASCII 形式を選びます(UI では拡張子を .txt or .dat にする)

データは数値だけなので, 他の情報(image patch size など)は別途手動でファイルに残するなり, ファイル名に埋め込むなどしておく必要があります.

## Wavefront(Optical Path Difference)


* `WAVPV` PtV(Peak-to-valley)
* `WAV` RMS
* `WAVZ` Zernike 多項式でフィッティングされた wavefront?

## 制約など

* Zemax とかでいう Huygens PSF/Huygens MTF(数値積分で求めるやつ)は計算できません(PSF は 1D cross section のみ可能)
* 非球面の追跡がどうもうまくいかないときがあったりします.
* Private glass のフィッティングがそれほど精度高くないような...?
* レイ数やサンプル数増やすと画面がハングしたりします :cry:
* MTF の `lp/mm` が 3 パターンしか選べません
  * MTF の数値出力とかができません
【Laravel】foreachで回したセレクトボックスの初期値を変数で設定する

## 概要

例えばキャラクターAの職業を変更したいと仮定する。編集ボタンを押すとキャラクターAの情報が表示され、職業はセレクトボックスで選択できる。セレクトボックスの中身は `foreach` を使って、コントローラから持ってきた職業一覧である `$jobs` の中身を表示するが、その初期値をキャラクターAの変更前の職業である `戦士` にしたい。

## リレーション

- **charactersテーブル**と**jobsテーブル**がある。
- charactersテーブルには `jobs_id` というインデックスがあり、リレーションを組んでいる。
- jobsテーブルの `name` カラムには職業が入っている。魔術師とか竜騎士とか（まあなんでもいい）。セレクトボックスにはこの職業が羅列されることになる

## セレクトボックス

基本として、これでセレクトボックスに『jobsテーブルに入っている職業』が羅列される。

```php:edit.blade.php
<div class="">
  <select name="job_id">
    @foreach($jobs as $job)
      <option value="{{ $job->id }}">{{ $job->name }}</option>
    @endforeach
  </select>
</div>
```

## デフォルト値の設定

コントローラからキャラクターの職業を持ってくる
（職業一覧、キャラクターの情報などを取得する部分、渡すべき変数でこの記事に関係ないものは省略する）。


```php:CharacterController.php
$character_job = $character->job->character_name;

return view('character.edit')
  // 中略
  ->with('jobs', $jobs)
  ->with('character_job', $character_job);
```

あとはセレクトボックスの記述を修正する。

```php:edit.blade.php
<div class="">
  <select name="job_id">
    @foreach($jobs as $job)
      @if ($job->name === $character_job)
        <option value="{{ $job->id }}" selected="selected">{{ $job->name }}</option>
      @else
        <option value="{{ $job->id }}">{{ $job->name }}</option>
      @endif
    @endforeach
  </select>
</div>
```

**「セレクトボックスの職業とキャラクターの職業が一致する場合」**で `selected` する
（書いたはいいが記事に登場する職業の設定などはほとんど関係がなかった）。
AWS Athenaに関して

### Athenaとは
Athena（アテナ）とはAWSのデータ分析サービスであり、S3に格納されたデータに対して、集計やソートなどの分析を実行することができます。分析する際に使用する言語はSQLになり、実行したクエリに対してのみ料金がかかる。
サーバーレスであるため、インフラの管理は不要。S3にはデータだけが置かれているようなものです。そのため、S3に直接Athenaがクエリを行ってもデータの構造が分からないためうまくいきません。そのテーブル構造（メタデータ）を定義するのがGlueカタログです。一つのテーブルにつき一つのGlueカタログを作成します。AthenaはこのGlueカタログを参照しながらクエリを行うといった感じになります。このGlueカタログを作成するサービスの一つとしてGlueクローラーというものがあります。GlueクローラーはS3等においてあるデータ構造を推測して、データカタログに表構造を登録するサービスです。そのためAthenaがS3にあるデータをSQLでクエリを行うには、データカタログの作成が必要であり、データカタログを作成するためにGlueクローラを使用するといった感じです。
ではRDSからS3 にどのようにしてデータを持ってくるのか？？それは、RDSのスナップショットからParquet形式でS3にexportすることが出来ます。その際、RDSからスナップショットを作成しS3に保存するときは、KMSという暗号化を行うサービスを使用して暗号化し、S3に保存されることに注意が必要です。そのため、Glueクローラーでデータカタログを作成する際にはKMSで複合する操作が必要になってきます。

### Athenaの実装
今回はS3にあるデータをAthenaで分析するのを想定して行っていきます。
今S3には一つのCSVファイルが入っています。![2020-09-07 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/a42a800e-2637-7e6e-c268-22d199abaaae.png)

次にGlue クローラーでデータカタログを設定します。
Glueの画面に移動しクローラを選択。その後クローラの追加を押します。
![2020-09-07 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/09fe95b1-dd56-f54c-7316-6b0d81020988.png)

クローラの名前は適当に設定し、source typeはDatastoreを設定します。
クロールするS3のパスを選択するには下図の赤いところを選択すると、自分のAWSアカウントのS3バケットの一覧が表示されるので使用するS3バケットを選択します。
![2020-09-07 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/76f4ebb9-13fe-ef49-d3c0-76a275d20e90.png)

別のデータストアの追加は今回は必要ないため、いいえを選択します。
Glueクローラー用のIAMを選択。今回は新しく作成しました。
Glueクローラのスケジュールは今回一回のみでよいのでオンデマンドで実行を選択します。Glueクローラーは定期的に実行することも可能であるので定期的に実行したいときは頻度に応じて設定を行います。
テーブル定義情報を取得したいデータベースの情報を入力します。今回は新しくデータベースを追加します。![2020-09-07 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/508c1998-93b4-53aa-fc2f-08454c3f3acd.png)

内容を確認し大丈夫であれば完了を押します。

そしたら今作成したクローラを選択し、クローラの実行を押します。
![2020-09-07 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/f86d647b-08f1-c980-9a51-3fdbb4dcb2b1.png)

実行が終わるとテーブルでカタログが作成されていることが分かります。![2020-09-07 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/0944e19e-3382-975e-01f6-60234b052dd6.png)

これでAthenaを実行する環境が整ったのでAthenaのマネジメントコンソール画面に移動します。
まずはsettingで結果の保存場所を指定します。
![2020-10-09 (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/f33d6b82-f1a7-392c-1e39-6ca8c72d1e41.png)


クエリを行うときはpreview tableを使用すると簡単なクエリが発行されます。
![2020-09-07 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676443/db36f2b8-5894-5eb1-7034-18bb7e1d002c.png)


またこのクエリの実行結果は先ほど設定した保存先のS3の場所に保存されます。














<参考させていただいたサイト>
<a href = "https://business.ntt-east.co.jp/content/cloudsolution/column-72.html">Amazon Athenaによるデータ分析入門</a>
【RaspberryPi 】初期設定

#ウィザードをコマンドで
それぞれ
- wifi設定
- タイムゾーン
- ローケル
- ホスト名

を設定する。
ローケルを設定すると日本語になる。

```bash
$ sudo raspi-config nonint do_wifi_country JP
$ sudo raspi-config nonint do_change_timezone Asia/Tokyo
$ sudo raspi-config nonint do_change_locale ja_JP.UTF-8
$ sudo raspi-config nonint do_hostname XXXXX
```

#piユーザの削除
##自動ログインを無効化
デフォルトでラズパイ起動時にpiユーザで自動ログインするようになっている

この設定を無効にする

```
$ sudo raspi-config
```
そのご
Boot Option→Desctop/CLI→Desctop Autologin>Consoleに変更
##新規ユーザ追加
```
$ sudo adduser ユーザ名
```
これを入力sた後、色々効かれるけどほぼエンターでOK
最後に「ほんとにこれでいい？(Y?n)」って効かれるから`Y`を入力して追加完了

###sudoグループへ追加
```
$ sudo gpasswd -a ユーザ名 sudo
```
###追加したユーザへログイン
```
$ su ユーザ名
```
パスワードを入力してログインできる

##パスワードなしでsudoを使う
visudoをvimで編集したい場合は以下コマンドを実行

```
sudo update-alternatives --config editor
```

```
sudo visudo
```
その後、以下を修正

```bash:/etc/sudoers
#%sudo  ALL=(ALL:ALL) ALL
%sudo  ALL=(ALL:ALL) NOPASSWD:ALL
```
これでsudoグループはパスワードが不要になった

##piユーザ削除
###sudo権限の削除
```
$ sudo gpasswd -d pi sudo
```
###ユーザ削除
###ホームディレクトリ削除
```
$ sudo userdel -r pi
```
`-r`をつけることでホームディレクトリも削除する

```
$ id -a pi
```
idコマンドでpiが削除されたことを確認する
#参考
- [【Raspberry Pi】ユーザの追加とそのユーザにsudo実施できるようにする
](https://engetu21.hatenablog.com/entry/2014/11/23/000423)
- [Raspberry Pi 4にRaspbianの初期設定2020年版](https://raspida.com/setup-raspbian4rpi4b-2020)