OmniAICreator/Qiita-1.07M huggingface dataset:
【gas・vscode】GASをvscodeで編集する

初書：2021/04/24
mac : 11.2.3
vscode : 1.55.1
clasp : 2.3.0
gas : Chrome V8 ランタイムが有効

# 前書き

GAS を vscode でも編集できないかなぁと思ったら出来そうなのでメモ。

しかも vscode だと typescript を使用できるらしい。

# 前提

homebrew・node.js がインストール済み

# npm init

node.js を使うのでとりあえず初期化。
作業を行うディレクトリにて、

```zsh
% npm init -y
```

`-y`オプションをつけると、デフォルト設定を使用してくれるらしい。
パッケージ化するわけでも実行するわけでもないのでこれでいいかと。

# clasp のインストール

vscode \- gas を接続する方法として、clasp というものが存在しているらしいのでインストールする。

```zsh
% npm install @google/clasp --save-dev
```

`7 high severity vulnerabilities`という表示。どうやら脆弱性が存在しているらしい。大丈夫なのだろうか…？[^1]

[^1]:
    なお、npm audit fix や npm audit fix --force をしても消えないので今のところどうしようもないっぽい。そのため一応グローバルインストールではなく作業ディレクトリのみにインストールをした。
    インストールが終われば、連携できるように google にログインする

```zsh
% npx clasp login
```

ブラウザが立ち上がり、ログインができれば完了。

# プロジェクトをローカルに入れる

既に GAS を作成している場合は、プロジェクトをローカルに入れるところから始まるので、まずはダウンロード。

```zsh
npx clasp clone --rootDir ./src プロジェクトID
```

これで、`.clasp.json`と`src`ができる。

# typescript にする

せっかく vscode で編集するので、typescript で編集したいですよね。
なので変更する。

・・・前に、念のためにバックアップ(git)を取っておく。

## バックアップ(git)

```zsh
% git init
% git add -A
% git commit -m "first commit"
```

git の話は過去に何回か書いたので説明は省略：
[git : vscode で扱う git のあれこれ(個人メモ) - Qiita](https://qiita.com/yuu_1st/items/61476cc921dab90764e7)
[【git】ターミナルで github と連携する - Qiita](https://qiita.com/yuu_1st/items/9648d19edc2a90fa1cdb)

## ts-migrate のインストール

バックアップが取れたら、実際に変更していく。
今回調べたところ、`ts-migrate`なるものが存在しているらしいので、これを使用する。

まずはインストール

```zsh
% npm install --save-dev ts-migrate
```

## 実行する

無事インストールが終われば、次は実行する

```zsh
% npx ts-migrate-full src
```

バックアップを取ってますか？という警告と、続けるか聞かれるので y を、
コンパイラをどうするか聞かれるのでそのままエンターを
これで js ファイルが ts ファイルへと変換される。

結構変換時エラーが出た。これ修正大変そう・・・
あと引数とか型 any にしてくれるかと思っていたが、そんなことはなかった。基本的にコメントアウトでエラーを提示してくるだけっぽい。

# 補完機能を入れる

typescript には入力補完がある上、型宣言とかが必要になるので以下も入れる

```zsh
% npm install --save-dev @types/google-apps-script
```

# API を有効にする

pull は可能なのだが、push をするには API を有効にする必要があるらしい。
なので設定する。
まずは[https://script.google.com/home](https://script.google.com/home)にアクセス

その後、設定 →`Google Apps Script API`をクリックし、オフをオンに変更
これだけ。

# GAS との連携

あとは簡単。サーバー側のスクリプトを DL し、更新する場合は

```zsh
% npx clasp pull
```

ローカル側のスクリプトをアップロード(アップロードは UL で通じるのだろうか？)し、更新する場合は

```zsh
% npx clasp push
```

するだけ。

# バージョン管理

バージョンを追加する

```zsh
% npx clasp version "説明"
```

バージョンを確認する

```zsh
% npx clasp versions
```

後ろに s があるかないかの違い

[GAS の Google 謹製 CLI ツール clasp - Qiita](https://qiita.com/HeRo/items/4e65dcc82783b2766c03)

# pushする際にファイル順を指定する

グローバル変数を使用する場合、GAS側でのファイルの上から順番に読み込まれるため、使いたい変数が使う場所より後にファイルがあると実行時エラーが出てしまう。
それを回避するために、claspはアップロードするファイルの順番を指定できるようになっている。

方法は簡単で、`.clasp.json`に`filePushOrder`を追加する。

```json
    "filePushOrder" : [
        "src/filename2.ts",
        "src/filename1.ts"
    ]
```

これで、`filename2.ts`が先頭、その次に`filename1.ts`がアップロードされ、その後指定されていないファイルが一気にアップロードされる。

# 終わりに

脆弱性だけが気がかりだが、使いこなすと便利そう。

# 参考サイト：

[VisualStudioCode で GoogleAppsScript を補完機能を使いながら開発する方法 - Qiita](https://qiita.com/ubatanosuke/items/6952f663963985129bc0)

[JS から TS への移行ツール、ts-migrate を試してみた - Qiita](https://qiita.com/Sotq_17/items/56403d3b8137affc1d10)
消費税計算~JS側~

今回は、JS側での消費税計算をする関数を作り、それを表に出力できるようにしました。

#HTML側

```index.html
  <table class="tax-answer" id="tax-answer" border="1">
    <caption>結果一覧</caption>
    <tr>
      <th>何月何日</th><th>式</th><th>結果</th>
    </tr>
    <tr>
      <th>データ</th><th>データ</th><th id="total1">データ</th>
    </tr>
    <tr>
      <th>データ</th><th>データ</th><th id="total2">データ</th>
    </tr>
  </table>

```
今回は、結果の欄に出力できるようにしていきます。

```index.js
const tax = 0.1;
    function totalTax(taxNot) {
      const total = taxNot + taxNot * tax;
      return total;
    }

    
    document.getElementById('total1').textContent = totalTax(3000);
    document.getElementById('total2').textContent = totalTax(400);
```

document.getElementByIdでHTMLのid属性を取得します。そして、textContent( これは開始タグから終了タグまでを書き換えてくれます)にtotalTax(値);で関数を呼び出し、代入します。
これで、データを書き換えることができました。

今回の場合は、ユーザーが計算した値を計算したいので、入力イベント発生から書き換えて行きます！
TerraformでAWSのEC2インスタンスを作成する

# 概要
Terraformを用いて、AWSのEC2インスタンスを作成する。
Terraformを用いることで毎回同一構成でのインスタンスが作成可能となる。

# Terraformをインストール

```
$ brew install terraform

$ terraform -v

Terraform v0.14.10
+ provider registry.terraform.io/hashicorp/aws v2.70.0

Your version of Terraform is out of date! The latest version
is 0.15.0. You can update by downloading from https://www.terraform.io/downloads.html
```

# AWSのアカウント作成
アカウントを作成して、作業用ユーザーを作成しておく

https://aws.amazon.com/jp/

# Terraformの設定

## 作業用ディレクトリを作成
```
$ mkdir terraform_for_aws

$ cd terraform_for_aws
```

## AWSへのアクセス情報を作成

AWSコンソールのIAMのユーザーから使用したいユーザーの概要に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/6ce8499b-a5c0-7fe0-562f-31fa229d391e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/235df124-5d06-3479-7ceb-f7116148c0a4.png)

作成した情報をもとにawsへのアクセス情報を記載したファイルを作成する

```
$ vim ~/.aws/`file_name`

aws_access_key_id = XXXXXXXXXXXXXX
aws_secret_access_key = XXXXXXXXXXXXXXXXXXXXXXXXX
```


```
$ vim main.tf
```

```main.tf
resource "aws_instance" "sandbox" {
  count         = 2 # インスタンス数
  ami           = "ami-785c491f" # Ubuntu 16.04 LTS official ami
  instance_type = "t2.micro"

  tags = {
    Name = "${format("sandbox-%02d", count.index + 1)}"
  }
}
```

```
$ vim variables.tf
```

```variables.tf
provider "aws" {
  version = "~> 2.0"
  region  = "ap-northeast-1" # 東京リージョン
  shared_credentials_file = "/Users/`user_name`/.aws/`file_name`" # 作成したファイルパス
}
```

# インスタンスを作成する

```
# 初期化
$ terraform init
# 構築する環境の確認
$ terraform plan
# 実際に構築する
$ terraform apply
```

実際にEC2インスタンスが作成された

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/730f6a19-5e32-4d37-03fa-f726f6b9e8e6.png)

# インスタンスを削除する

```
$ terraform destory
```

作成したインスタンスが終了済みとなる
一定期間経過すると一覧からも消える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/717281/0abcec4f-459b-b123-7da3-e519cca61af3.png)
React Native DebuggerがWaiting for..から繋がらない動かない時にやったこと【expo】

RNを試しにさわってみようとしたらコードよりも環境構築まわりで何度かつまづきました。しかし情報は英語ばかりでしかも未解決なものも少なくない。
今回は特につまったReact Natvie Debuggerで解説。


React Natvie Debuggerとは

```
brew install --cask react-native-debugger
```
などを使って落としてきたRNデバッグ専用ツールを指しています。

様々な記事にlocalhostの19001と同じポートをReact Natvie Debuggerで立ち上げたら繋がるよ。と書いてありますが何度立ち上げ直しても繋がりませんでした。

ライブラリのバージョンを変えてみたり、
VSCode、エミュレータ、Macbook本体それぞれで再起動したりnode_modulesを何度か消して入れ直しても無駄でした。
数時間とかしたのですが灯台下くらしですぐに解消しました。

## 結論：19000でいけた
結論から言うと19000のポートがexpoで割り当てられていました。

①React Native Debugger側で19000ポートを事前に立てておく
②いつも通りエミュレータを立ち上げる（ cmd + D て開いたメニューの Remote Debug JS を選択する。（Debugg中の履歴が残っていたらStopさせて再度つなげる） ）
これだけです。

### 勝手にブラウザの新タブにデバッガーページ（debugger-ui）が勝手に開かれる場合
19000で繋がれば良いという簡単な方法に気がつかなかった大きな要因はdebugger-uiページの存在です。
これが開かれたページが19000の場合はReact Native Debuggerは使えません。

もし事前にReact Natvie Debugger側で19000ポートを開いている状態でエミュレータを立ち上げてもブラウザにdebugger-uiページが開かれてしまったよ。と言う人はdebugger-uiページを閉じてみてください。
それからRemote Debug JSを立ち上げ直してみてください。
それでもうまくいかない場合は、React Natvie Debugger側で19000ポートを開くタイミングを変えて何度か同じことをやってみてください。


## 19000で事前に試していたがうまくいかなかった理由を整理
途中から19000で十分試したつもりに勘違いしてしまいました。なぜ勘違いしたのか理由を挙げてみました。

1.いろいろな記事には19001でポート開けと書かれているのでそうだと鵜呑みにした
2.ブラウザの新タブにデバッガーページ（debugger-ui）が勝手に開かれていたがすでに何度もエミュレータは立ち上げ直していて気がつかなかった
3.19000のポートを開くとanother debugger is already connected react nativeとずっと警告がログに出て使えない
4.Remoto Debug JSを何度立ち上げ直しても3が変わらないのでexpoがデフォで占有してる？みたいな謎理論を展開してしまった
5.React Natvie Debuggerが新ポート番号を入力するページにて自動で19001を推測してくる
6.ネットの情報がすくない
7.VSCodeにDebuggerが開けないことでエラーが表示されるがそのエラーがDebuggerと関連してるものかわからないメッセージ内容でエラーをググっても情報がほとんど出てこないので自分のコードや環境がどこか悪いのかもと疑い始めた

上の理由が要因だったかなと思います。これは他の人も同じ沼にハマっていそう。
【JavaScript基礎】キーボード入力時に処理をする

JavaScriptにおける__「キーボード入力時に処理するイベント」__について、自己の忘備録としてまとめています。

## 参考URL
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

## 参考著書
https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%B1%A0%E7%94%B0-%E6%B3%B0%E5%BB%B6/dp/4297103680/ref=sr_1_7?dchild=1&keywords=javascript&qid=1618412284&sr=8-7

### 文字を入力するたびに処理をする

キーの入力時に発生するイベントはkeydown、keyup、keypressで監視することができます。

| イベント名 | 発生タイミング                   |
| ---------- | -------------------------------- |
| keydown    | キーが押されたとき               |
| keyup      | キーが離されたとき               |
| keypress   | 文字を生成するキーが押されたとき |

```html
<!-- HTML -->
<textarea class="textarea"></textarea>
```
```js
// JS
const textarea = document.querySelector('.textarea');

// キーが押されたとき
textarea.addEventListener('keydown', () => {
    console.log('キーが押されました。');
});

// 文字が入力された
textarea.addEventListener('keypress', () => {
    console.log('文字が入力されました。');
});

// キーが離されたとき
textarea.addEventListener('keyup', () => {
    console.log('キーが離されました。');
});
```

### 入力されたキーを調べる

KeyboardEventオブジェクトのプロパティを調べることで、入力されたキーの種類を判定できます。keydownやkeyupイベントと組み合わせて使用します。

| プロパティ                     | 意味                                 | 型     | 
| ------------------------------ | ------------------------------------ | ------ | 
| キーボードイベント.key         | 押されたボタンの値                   | 文字列 | 
| キーボードイベント.code        | 押されたボタンのコード               | 文字列 | 
| キーボードイベント.altKey      |  Altキーが押されたかどうか           | 真偽値 | 
| キーボードイベント.ctrlKey     | Ctrlキーが押されたかどうか           | 真偽値 | 
| キーボードイベント.shiftKey    | Shiftキーが押されかどうか            | 真偽値 | 
| キーボードイベント.metaKey     | metaキー※が押されたかどうか           | 真偽値 | 
| キーボードイベント.repeat      | キーを押しっぱなしにしているかどうか | 真偽値 | 
| キーボードイベント.isComposing | 入力が未確定かどうか※             | 真偽値 | 
※metaキーは、Macであれば⌘キーを指す。
※全角で日本語を入力中に、確定しない状態であればtrueとなる。

```js
// JS
const textarea = document.querySelector('.textarea');

// キーが押されたとき
textarea.addEventListener('keyup', (event) => {
    // 出力例は「a」を押したととき
    console.log(event.key); //'a'
    console.log(event.code); //'KeyA'
    console.log(event.altKey); // false
    console.log(event.ctrlKey); // false
    console.log(event.shiftKey); // false
    console.log(event.metaKey); // false
    console.log(event.repeat); // false
    console.log(event.isComposing); // false
});
```

どのキーが押されたを判定するには、キーコードの数値を使用します。

```js
const handleKeyDown = (event) => {
    // キーコード（どのキーが押されたか）を取得
    const keyCode = event.keyCode;

    if (keyCode === 39) {
        console.log('右キーが押されました。');
    }
};

window.addEventListener('keydown', handleKeyDown);
```
[Python] 計算量 ABC199C

#[ABC199C](https://atcoder.jp/contests/abc199/tasks/abc199_c)

１文字を入れ替える操作の計算量は$O(1)$である。$T=2$のとき、前半と後半を１文字ずつ入れ替える操作は$O(N)$となり、合計$O(QN)$で間に合わない。この操作処理を単純化すると、indexにnを加え2nのmodを取ることで実装できる。
合計計算量は$O(N+Q)$となり十分である。本番ではほぼ同様の設計まではしたのだが、計算量の評価に自信が持てずパスしてしまった。当投稿は、計算量の見積もりを正確にしなくてはならないという反省によるものである。

蛇足かもしれないが、Atcoderで公式にユーザー解説が付くようになった結果、多様な解説が投稿されなくなっている状況であるようだ。公式解説はともかく、ユーザー解説は載せなくて良いのではないかと個人的には思う。

```python:サンプルコード
n=int(input())
S=list(input())
Q=int(input())

ind=0
for i in range(Q):
    t,a,b=map(int,input().split())
    a=a-1
    b=b-1
    if (t==1): # T=1
        S[(ind+a)%(2*n)],S[(ind+b)%(2*n)]=S[(ind+b)%(2*n)],S[(ind+a)%(2*n)]

    else: # T=2
        ind=(ind+n)%(2*n)


S=S[ind:]+S[:ind]
print(*S,sep="")
```
lessの代わりにview(vim)を使うための仕上げ

## はじめに

lessはとても便利なのですが、`~/.bashrc`のような拡張子がないshellスクリプトだと、`source-highlight`を使っても色なしになるのが玉に瑕。
そもそも長いScriptを書くときはVScodeのようなエディタを使っている以上、lessで開くファイルに対してbashの設定ファイル系が占める割合は少なくありません。

加えて、lessでファイルの上限や下限まで見たときの**beep音がどういう設定にしてもオフにならない**……。
vimのbeep音は簡単に解消できたので、この機に正規のlessから乗り換えることにしました。

## じゃあview使えばいいじゃん?

とはいっても、viewにも多少の不満点があるのでそれを解決していきます。
ちなみに、vim内にあるless.shは.vimrcのkey mapが完全には反映されないので不採用です。

### パイプ経由の場合と非経由の場合の判断
パイプ経由の場合、viewは`view -`で起動します。
これは引数の有無で判断させます。

```bash:.bashrc
alias less="_ViewForLess"
function _ViewForLess(){
    input="$@"
    if [[ "x${input}" != "x" ]] ; then
        view "${input}"
    else
        view -
    fi
}
```

### 行番号の表示/非表示
lessとvim系は、多少同じコマンドが使えます。(`/`による検索や`g`による移動など)
ただ、vimでは行番号の表示/非表示のコマンドが`:set number/nonumber`と、ちょっとだけ冗長です。
これはkey mapで解決できました。
以下の設定により`m`で行番号の表示/非表示がtoggleできます。

```vim:.vimrc
set number
nnoremap m :set number!<CR>
```

### 行番号の色変更

行番号の色を変更します。
color themeとの併用もできます。

```vim:.vimrc
highlight LineNr ctermfg=120
autocmd ColorScheme * highlight LineNr ctermfg=120
```


### beep音
beep音は邪魔なので消します。

```vim:.vimrc
set belloff=all
```

### ペーストの変なインテントを解消する
vimは複数行の内容をペーストする場合、変なインテントが挿入されてしまいます。修正します。

```vim:.vimrc
set pastetoggle=<F2>
```

### まとめ

```vim:.vimrc
" paste setting
set pastetoggle=<F2>
" no beep
set belloff=all
" show line number
set number

" Color
"" line number
highlight LineNr ctermfg=120
autocmd ColorScheme * highlight LineNr ctermfg=120

" key map
"" toggle line number
nnoremap n :set number!<CR>
```

## おまけ

今回でお役御免になった正規のlessですが、そちらに関するおまけです。

`source-highlight`を使えば大半のファイルに対してsyntax-highlightがオンになるのですが、その際、`export LESSOPEN='|/usr/share/source-highlight/src-hilite-lesspipe.sh %s'`と設定するようにと指示されるのですが、それにより**圧縮ファイルを含むbinaryファイルが開けなくなります**。
正直、無視していい程度のデメリットなのですが、`/usr/bin/lesspipe`をかませると解消できます。

```bash:.bashrc
alias less2='/usr/bin/less -R -N --QUIET'
export LESSOPEN='|/usr/bin/lesspipe | /usr/share/source-highlight/src-hilite-lesspipe.sh %s'
export VISUAL="vim"
```
TypeScriptで配列のインデックスアクセス時の型推論にundefinedを含める

## 環境
- TypeScript 4.2.3

該当のコードはTypeScript Playgroundにあります。

https://www.typescriptlang.org/play?noUncheckedIndexedAccess=true&noFallthroughCasesInSwitch=false#code/MYewdgzgLgBArmAJgUwGYEszMQQwEYA2yMAvDANoCMANAEzUDMAuuQCxMDcAUF6JLGDgBbPMgBOAeTAEAngC4YgkeNLwkaTNnxFufCCCIA6AiADmACiWjJ0mQEoOMAPROSAPjUoMWRDxcx0VBhzKBkAB2QQIIQvTVxCYhIkmAByK3EUuxgAby5-GAKYPQFhaylZBXSxVRiNH21kbn8AXz8nAKDzWu8tBKzc-MLixVLxcvkR5WqybriGpvbWvPbhqvHK0enPOt6iAEJuIA

## TypeScriptでは、配列のインデックスアクセス時の型推論にundefinedが含まれない
下記のコードは`number`型の変数に`undefined`を代入していますが、TypeScriptのデフォルトの設定だとコンパイルエラーになりません。

```typescript
const undefinedable = [1,2,3][4];
const numberOnly: number = undefinedable;

console.log(numberOnly); //=> undefined
```

これは`const undefinedable = [1,2,3][4]`が`number | undefined`ではなく`number`のみで型推論されるためです。

tsconfigで`strict: true`や`strictNullChecks: true`の設定を使っても変わりません。ですが[TypeScript4.1で追加](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#no-unchecked-indexed-access)された[noUncheckedIndexedAccess](https://www.typescriptlang.org/ja/tsconfig#noUncheckedIndexedAccess)というオプションを使うと、`const undefinedable = [1,2,3][4]`が`number | undefined`に型推論されるためコンパイルエラーにすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50391/8d7c2214-bc14-d776-62ea-3e95eddbd043.png)

## コンパイルエラーを修正する方法
この値を代入するには、`undefinedable`が`number`であることを確認するか、`undefined`でない事を確認する必要があります。

```ts
if (typeof undefinedable === 'number') {
    const numberOnly: number = undefinedable;
}
```

```ts
if (undefinedable) {
    const numberOnly: number = undefinedable;
}
```

あるいは、値の存在が自明なときはnon-nullアサーション演算子（`!`）を使う事もできます。

```ts
const numberOnly: number = undefinedable!;
```

このコンパイルエラーは毎回チェックの手間がかかる割に多くの場合では有効に機能しないと言われているらしく、デフォルトでオンになったり`strict: true`に含まれたりはしていないようです。

## 参考
- [Suggestion: option to include undefined in index signatures · Issue \#13778 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/13778)
- [Announcing TypeScript 4\.1 Beta \| TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#no-unchecked-indexed-access)
【Terraform】【AWS】VPC/サブネットとEC2を同時にapplyする方法

#VPC/サブネットとEC2を同時にapplyする方法#

こんにちは、Deliaです。
今回はTerraformで詰まった体験談です。
しらべてもサクッと解決できなかったので残します。。。

moduleは自分で作成したものを使用しています。

##0．前提##

```shell
$ t -v
Terraform v0.15.0
on darwin_amd64
+ provider registry.terraform.io/hashicorp/aws v3.37.0
```

##１．手順##
###1. サブネットを作成するモジュールにoutputを定義###

受け取りたい値を「outoutブロック」で定義します。
ファイルは適宜分けても大丈夫です。
この例では「variableブロック」は分けています。
private_subnetsがユーザ定義ということに注意してください。

```terraform:/module/VPC/main.tf
resource "aws_vpc" "main" {
    cidr_block       = var.main_vpc_cidr
    instance_tenancy = "default"
}
resource "aws_subnet" "private_subnets" {
    vpc_id     = aws_vpc.main.id
    cidr_block = var.private_subnets_cidr
}
# outputを定義するとモジュール呼び出し元で使える
output "subnets_id" { 
    value = "${aws_subnet.private_subnets.id}"
}
```
 
 
###2. ルート側で使用する###
アウトプットされた値を、さらにEC2作成用のモジュールに渡します。

```terraform:/main.tf
module "VPC" {
  source                   = "./module/VPC"
  main_vpc_cidr            = var.main_vpc_cidr
  private_subnets_cidr     = var.private_subnets_cidr
}
# private_subnets内にEC2インスタンスを作成したい為、IDを渡す
module "EC2" {
  source     = "./module/EC2"
  subnet_ids = "${module.VPC.subnets_id}"    # ここ
}
```

###３. モジュール側で使用する###
受け取って使用する。

```terraform:/module/EC2/main.tf
resource "aws_instance" "AppServer01" {
    ami           = data.aws_ami.amazon_linux_2.id
    instance_type = "t2.micro"
    subnet_id = var.subnet_ids    # ここ
    tags = { 
        Name = "AppServer01"
    }
}
```

```terraform:/module/EC2/variables.tf
variable "subnet_ids" {
  # default = ""
}
```

以上でできました。

#2.最後に#
3時間ほど調べまくってもできなくて、「もう明日にしよう、でも最後にコードをみておこう」
とした際に、スペルミスに気づきました。
フロー自体は簡単だと思いますので、参考にしていただければ幸いです。

にしても、順番に書かなくてもよしなにやってくれるの助かりますね(笑)
UbuntuにPostgreSQLをインストールしてリモートアクセスする

# 環境
- サーバー：
    - [NVIDIA JETSON AGX XAVIER](https://www.nvidia.com/ja-jp/autonomous-machines/jetson-agx-xavier/)
    - os：Ubuntu 18.04 LTS
- クライアント：
    - [NVIDIA JETSON NANO](https://www.nvidia.com/ja-jp/autonomous-machines/embedded-systems/jetson-nano/)
    - os：Ubuntu 18.04 LTS
   
# 背景
IoTやAIの普及により大量データを様々な形式で管理することになるかと思います。
しかし、必ず整合性のとれたデータを管理する必要があります。
少なくとも処理ステータスやユーザー管理などシステムを管理するための情報は整合性を取る必要があります。
データを整合性をとって管理するためにはRDBの使用が必須になります。
本記事では、RDBの一つであるPostgreSQLのインストールからデータの登録までを説明します。

# 手順
1. [【サーバー】PostgreSQLのインストール](#postgresqlのインストール)
1. [【サーバー】postgresqlユーザーにパスワードを付与](#postgresユーザーにパスワードを付与)
1. [【サーバー】サービス開始](#サービス開始)
1. [【サーバー】Postgreプロンプトにアクセス](#postgreプロンプトにアクセス)
1. [【サーバー】ロール（ユーザー）作成](#ユーザー作成)
1. [【サーバー】データベース作成・権限付与](#データベース作成と権限付与)
1. [【サーバー】外部接続許可設定](#外部接続許可設定)
1. [【クライアント】PostgreSQLクライアントのインストール](#postgresqlクライアントのインストール)
1. [【クライアント】Postgreプロンプトにアクセス](#postgreプロンプトにアクセス)

### postgresqlのインストール

[サーバー](#環境)側のターミナルから下記コマンドを実行することでpostgreSQLがインストールできます。

```
sudo apt install postgresql postgresql-contrib https://qiita.com/SierSetup/items/041939690cea80c1b1d9
```

### postgresユーザーにパスワードを付与
PostgreSQLをインストール直後はpostgresユーザー（スーパーユーザー）にパスワードが付与されていないので、下記コマンドを実行して付与します。

```
sudo passwd postgres
```

### サービス開始
下記コマンドを実行してサービスを起動します。

```
/etc/init.d/postgresql start
```

### postgreプロンプトにアクセス
下記コマンドを実行してPostgreプロンプトを起動します。

```
sudo -u postgres psql
```

なお、Postgreプロンプトを終了するときは下記コマンドを実行します。

```
\q
```

### ユーザー作成
次に、外部からアクセスするようにユーザーを作成します。
Postgreプロンプトにて下記コマンドを実行します。

```
create role <ユーザー> LOGIN CREATEDB PASSWORD <パスワード>
```

### データベース作成と権限付与
データベースを作成し、先ほど登録したユーザーがアクセスできるように権限を付与します。
Postgreプロンプトにて下記コマンドを実行します。

```
create database <データベース> owner <ユーザー>
```

### 外部接続許可設定
リモートアクセスする場合は下記サイトに設定下さい。
リモートアクセスが不要な場合は本処理は不要です。

- 参考
    - [【PostgreSQL】外部からデータベースへ接続するためのアクセス制御設定](https://densan-hoshigumi.com/server/postgresql-remote-connection)

### postgresqlクライアントのインストール
[クライアント](#環境)側のターミナルから下記コマンドを実行することでpostgresql-clientがインストールできます。
サーバーとクライアントを分けない場合は不要です。

```
sudo apt install -y postgresql-client
```

### postgreプロンプトにアクセス
サーバー側で[サービスを起動](#【サーバー】サービス開始)後、クライアント側のターミナルから下記コマンドを実行することでPostgreプロンプトにアクセスできます。

```
psql -U <ユーザー> -h <URL or host名> -p <ポート番号> -d <データベース>
```

# 終わりに
以上でPostgreSQLのセットアップは終了になります。
sketchupでruby その12

# 概要

sketchupでrubyやってみた。
練習問題やってみた。

# 練習問題

ドーナッツを描け。

# 写真

![donut.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/884a4387-fb3c-f4f3-7f73-4d26d4d045ff.png)


# サンプルコード

```
def donut
   model = Sketchup.active_model
   model.start_operation('Create Donut', true)
   group = model.active_entities.add_group
   num_segments = 24
   center_radius = 1.m
   thickness = 0.5.m
   origin = Geom::Point3d.new(0, center_radius, 0)
   circle = group.entities.add_circle(origin, X_AXIS, thickness, num_segments)
   face = group.entities.add_face(circle)
   path = group.entities.add_circle(ORIGIN, Z_AXIS, center_radius, num_segments)
   face.followme(path)
   model.commit_operation
end


```

以上。
HTTPとHTTPS、SSLについて整理する

※2022年から技術系の記事は[個人ブログ](https://yamaday0u.net/category/programmer/)に投稿しております。ぜひこちらもご覧ください→[yamaday0u Blog](https://yamaday0u.net/category/programmer/)

今回は業界未経験からのITエンジニア転職を目指し、これまでいろんなサイトやアプリを使うことを楽しむだけで、これらのサービスがどのように動いているのか知らなかったぼくが、HTTPとHTTPS、SSLについて調べたことを整理してみます。

また、内容に誤りがあれば教えていただけると嬉しいです。

## HTTPとは
HTTPは「Hyper Text Transfer Protocol 」の略で、インターネット上の情報を転送するときの、OSI基本参照モデルにおける第7層である「アプリケーション層」のプロトコルです。

プロトコルとは、ネットワークを通じコンピュータ同士がやり取りするための約束事を指します。

インターネット上の情報とはHTML文書などを指し、その中身はテキスト、レイアウトの定義、画像、動画、スクリプトなどで構成されています。

URLに「http」と表示されているページはHTTPによって通信されています。

情報がそのまま状態で転送されているため、情報を盗み見られる危険があります。

## HTTPSとは
HTTPSは「Hyper Text Transfer Protocol Secure」の略で、HTTPによる通信をよりsecure（安全に）行うための、アプリケーション層のプロトコルです。

「SSL」を使って暗号化しています。

URLに「https」と表示されているページはHTTPSによって通信されています。

GoogleによるとWebサイトの90％以上がhttps化されているそう。

## SSLとは
SSLは「Secure Sockets Layer」の略で、インターネット上のWebブラウザとWebサーバ間の通信を暗号化するプロトコルで、アプリケーション層のプロトコルです。

ただし、現在ではSSLよりも安全なTLSが使われていますが、SSLという言葉が一般名称として定着していることから「SSL/TLS」と呼ばれるようになっているそうです。

>なお、SSLとは古い規格の名称であり、2014年に脆弱性が発見されたため翌年には使用が禁止されました。現在では、より安全なTLS（Transport Layer Security）という暗号化通信の規格が使われています。SSLが「SSL/TLS」や「TLS」と呼ばれるのはそのためです。しかしながら、世間では「常時SSL化」のようにSSLという名称が暗号化通信規格の一般名称として定着しているため、本コラムでもSSLという名称を使っています。（[SSLって何？意味や仕組みをわかりやすく解説！（SAKURA internet）](https://ssl.sakura.ad.jp/column/ssl/)より）

ではSSLではどのように暗号化された通信を行っているのでしょうか。

### SSLによる暗号化通信の手順
SSLによる暗号化通信は以下の手順で行われています。

1. Webブラウザ：SSL通信をリクエスト
1. Webサーバー：SSL証明書と公開鍵を送付
1. Webブラウザ：Webブラウザにあらかじめ登録されている認証局の証明書（ルート証明書）を使って「SSL証明書に記載されたドメイン」と「通信先のドメイン」が同じであることを確認
1. Webブラウザ：有効なSSL証明書であった場合は、「共通鍵（セッションキー）」を生成
1. Webブラウザ：共通鍵をSSL証明書に含まれる「公開鍵」で暗号化し、Webサーバーに返送
1. Webサーバー：Webサーバーで保持している「秘密鍵」で共通鍵を復号
1. Webブラウザ/サーバー：共通鍵を使って送受信するデータを暗号化・復号してSSL通信を成立

今回はざっくりこんな感じでまとめてみました。
ITを学び始めた初心者の参考になれば幸いです。

## 参考資料
[HTTP の概要（MDN Web Docs moz://a）](https://developer.mozilla.org/ja/docs/Web/HTTP/Overview)
[今や常識！知っておきたいhttpsとは？httpとの違いは？（ColorfulMediaBox）](https://www.colorfulbox.jp/media/https/)
[SSLって何？意味や仕組みをわかりやすく解説！（SAKURA internet）](https://ssl.sakura.ad.jp/column/ssl/)
[SSL証明書とは？仕組みや種類についてわかりやすく解説（Reworks）](https://www.rworks.jp/system/system-column/sys-entry/21283/)
[キタミ式イラストIT塾 基本情報技術者 令和03年（技術評論社）](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5%BC%8F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88IT%E5%A1%BE-%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85-%E4%BB%A4%E5%92%8C03%E5%B9%B4-%E3%81%8D%E3%81%9F%E3%81%BF%E3%82%8A%E3%82%85%E3%81%86%E3%81%98/dp/4297117819)
pip3をupgradeする方法

## pip3使っていたところwarning文が出ていた。
```
WARNING: You are using pip version 20.2.3; however, version 21.0.1 is available.
```
どうやらpip3のversionが古いので警告が出ているらしい。

## pip3をupgradeする
```
pip install --upgrade pip
```

これで警告文は消えた。
【C言語】整数のいずれかの桁に特定の数字が含まれているかを確認する

簡単に実装できそうな割には、調べてもあまり出てこなかったためメモ書きとして残しておく~~（調べ方が悪いだけ）~~。
適当に書いたため結構ガバガバなコードかも。なにか指摘あればお願いします。
なおバッファオーバーフロー時の処理を省いているので、ちゃんと実装したい時にはその辺もしっかり考える必要あり。

~~~C
#include <stdio.h>
int check(int n, char c){
    int i = 0, f = 0;
    char suzi[64];
    snprintf(suzi, sizeof(suzi), "%d", n);
    while(suzi[i] != '\0'){
        if(suzi[i] == c){
            f = n;
            break;
        }
        i++;
    }
    return f;
    //確認したい数字が含まれている場合は整数をそのまま返す
    //確認したい数字が含まれていない場合は0を返す
}

int main(void){
int n = 123450;   //調べたい整数
char c = '0';    //確認したい数字
printf("%d\n", check(n, c));
// 実行結果> 123450
return 0;
}
~~~
よく使うTrelloのショートカットキー

<h1>Trello<br>覚えていると便利なショートカット一覧<h1>
<p>個人的に普段良く使っているショートカットキーを共有します。<br>これを覚えておくと、作業時間を短縮出来ます。</p>

<ul>
 <li>Z</li>
<p>→ 行った動作の一つ前に戻すキーです　MacでいうCommand+Z</p>
 <li>C</li>
<p>カードをアーカイブに移動させます。</p>
 <li class="movecommand">, . > < </li>
<p>カードを左または右隣のリストに移動させます。</p>
 <li>1~9</li>
<p>1緑2黄3オレンジ4赤5紫6青7スカイブルー8ライム9ピンク0黒<br>色別にラベルをつけることができます。</p>
 <li>R</li>
<p>前に行った動作を繰り返します。</p> 
 <li>E</li>
<p>カードのクイック編集ができます。</p> 
 <li>D</li>
<p>カードの期限を設定出来ます。</p> 




</ul>


<style>

.movecommand {
font-size:30px;
color:red;
}

</style>
Raspberry pi homeassistant core autostart

#Hass を自動起動するための設定。
##準備

```.sh
$ mkdir -p ~/.config/lxsession/LXDE-pi
$ cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/
$ nano ~/.config/lxsession/LXDE-pi/autostart
```
##~/.config/lxsession/LXDE-pi/autostartの内容
```autostart
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@xscreensaver -no-splash
lxterminal -e sudo -u homeassistant -H -s /home/pi/hass.sh
```
##/home/pi/hass.shの内容

```hass.sh
#!/bin/bash
cd /srv/homeassistant
source bin/activate
hass
```
Pythonのライブラリが既にインストール済みか調べるコマンド

## Pythonのライブラリが既にインストール済みか調べたい時
以下のコードをCLIで打てば良い

```
pip3 list | grep <調べたいライブラリの名前> 
```

### 例
feedparserライブラリがインストールされているか確認する

```
pip3 list | grep feedparser
```

検索したいライブラリ名の一部でも検索をかけられる

```
pip3 list | grep feed
```

結果 

```
feedparser     6.0.2
```

検索したライブラリ名が存在しない場合は、何も表示されません。
CodePipelineとCodeDeployでEC2インスタンスへのデプロイを自動化する

#EC2インスタンス側の操作
##EC2インスタンスの起動
OSはAmazon Linux 2を選択し、デフォルト設定のままインスタンスを起動する。
IAMポリシー```AmazonEC2RoleforAWSCodeDeploy```を持つIAMロールを作成（ここではロール名を```CodeDeployRoleForEC2```とした）し、EC2インスタンスにアタッチする。

##CodeDeployエージェントのインストール
EC2インスタンスにSSHでログイン。
CodeDeployと連携するためにCodeDeployエージェントをインストールする。

```bash
$ sudo yum install ruby
$ wget https://aws-codedeploy-ap-northeast-1.s3.ap-northeast-1.amazonaws.com/latest/install
$ chmod +x ./install
$ sudo ./install auto
$ sudo service codedeploy-agent status
```

```The AWS CodeDeploy agent is running as PID XXXXX```と表示されればエージェントが正常に動いている。

##デプロイ先の場所、デプロイ中の操作を記述したファイルの作成
これらは```appspec.yml```と名付けたファイルの中に記述する。
以下はその簡単な例

```yml
version: 0.0
os: linux
files:
  - source: ./
    destination: /home/ec2-user/ci
```
ここで```source```にはGitHubのリポジトリ中のどのファイルをデプロイするかを記述（この例では全てのファイル）。
```destination```はEC2インスタンス内のどこに保存するかを記述（絶対パス）。
```appspec.yml```をリポジトリのルートに配置。

#CodeDeployの設定
##アプリケーションの作成
EC2インスタンスへのデプロイを想定しているため```EC2/オンプレミス```を選択。
##デプロイグループの作成
サービスロールに、IAMポリシー```AWSCodeDeployRole```を持つIAMロールを設定する（ここではロール名を```CodeDeployServiceRole```とした）。
##デプロイの作成
先ほど作成したデプロイグループを選択する。
今回、リビジョンタイプは```GitHub```を選択。
commit IDを入力する。
```デプロイの作成```を押下。
ここでEC2インスタンスにログインし、選択したGitHubのリポジトリのファイル群がデプロイされているかを確認する。
※もし、エージェントの起動が先でEC2へのロールのアタッチが後になってしまった場合、正常にデプロイが行われない。ログファイルを見ればcredentialがどうのこうのというエラーログが見られる（```/var/log/aws/codedeploy-agent/codedeploy-agent.log```）。

#CodePipelineの設定
エージェントとCodeDeployは連携された。次にGitHubへのcommitをトリガーとしてCodeDeployが走るようにCodePipelineを設定する。
流れに沿って、CodeDeployでの設定事項とGitHubのブランチの等を入力していけば良い。
```パイプラインの作成```を押下すると、CodePipelineが動き始め、masterブランチのファイル群がEC2インスタンスへデプロイされ始める。
この様子はCodePipelineのマネジメントコンソールからリアルタイムで確認することができる。
EC2インスタンスへSSH接続し、```appspec.yml```のdestinationに設定した```/home/ec2-user/ci```を確認し、ファイル群が配置されていれば正常に動作している。

#ファイルを編集しGitHubへpush
何かしらの変更をファイル群に加え、pushする。
CodePipelineが走り、EC2インスタンス内でのファイル群にも変更が見られれば正常に動作している。

#参考
https://blog.logical-dice.com/articles/2019/02/28/aws-code-deploy
https://qiita.com/nasuB7373/items/081f5974e31419a1a844
オブジェクト指向による要求分析についての調査メモ①

# TL;DR
* オブジェクト指向による要求分析についていろんな本を読み漁っているがそのメモです。
* UMLの書き方は触れてないです。
* デザインパターンとかそういう話はないです。
* 何度も言いますが自分用の読書メモです。過度な期待はしないでください
* 参考文献載せてますが、自分なりの解釈とか思ったことも記載しています。単なる本やネット記事の内容と思わないほうがいいです

# 要件定義～詳細設計までの流れ
## ユースケースの整理
* ユーザの業務オペレーションを整理する。
  * 事前条件・・・その業務の前提条件
  * 基本フロー・・・業務の流れ
  * 代替フロー・・・基本フロー以外の業務がある場合、その流れ
  * 事後条件・・・その業務の完了条件
* who、whatを中心として整理する。

## ロバストネス分析
* ユースケースを一段詳細化し、ユースケースから漏れているものの確定、機能整理を行う
* 主語＋目的語＋動詞、という具合で整理する。
  * 例：管理者アカウントが（主語）一般アカウントを（目的語）作成する（動詞）
* 機能整理のやり方として、上記で整理した目的語と動詞を以下のように機能として定義していく。
  * バウンダリ（目的語）・・・ユーザが直接操作するもの。MVCで言うところのV
  * コントロール（動詞）・・・MVCでいうところのCと一部Mも入る
  * エンティティ（目的語）・・・MVCでいうところのM
* who、what、howを中心として整理する。

## シーケンス図
* ロバストネス分析で整理したバウンダリ、コントロール、エンティティがどのタイミングでどう機能するかを時系列で整理する
* who、what、how、whenを中心として整理する。

# その他
常にwhyを意識してユーザが必要なもの、そんなに力を入れなくてよさそうなところなども柔軟に整理する

# 参考文献
https://www.amazon.co.jp/%E5%85%A5%E9%96%80-%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E8%A8%AD%E8%A8%88%E2%80%95%E5%A4%89%E6%9B%B4%E3%81%AB%E5%BC%B7%E3%81%8F%E7%94%9F%E7%94%A3%E6%80%A7%E3%81%8C%E9%AB%98%E3%81%84%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92-%E6%BB%9D%E6%B2%A2-%E5%85%8B%E6%B3%B0/dp/4797328517
【Java】ArrayListのremoveIf()メソッドの使い方

ArrayListのremoveIf()メソッドは、引数として渡された条件でリストのアイテムを削除します。 
条件に合致するものは削除され、そうでないものはリストに残ります。

# removeIf()メソッドの使い方

removeIf()メソッドは引数として Predicate を受け取ります。 
Predicateはラムダ式に渡すことができ、リストからアイテムをフィルタリングする条件を表しています。

```java
public boolean removeIf(Predicate<? super E> filter)
```

# 使用例

```java

        // 数値を格納するリスト
		ArrayList<Integer> Numbers = new ArrayList<Integer>();

		// 数値をリストに追加
		Numbers.add(33);
		Numbers.add(8291);
		Numbers.add(182930);
		Numbers.add(182);

		// 3で割り切れる数をリストから削除
		Numbers.removeIf(n -> (n % 3 == 0));

		// 出力
		Numbers.forEach(s -> {
			System.out.println(s);
		});
```

# 出力

```
8291
182930
182
```

 参照
[Java Platform SE 10 #removeIf(java.util.function.Predicate)] (https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html#removeIf-java.util.function.Predicate-)
Heroku でよく使用するコマンド

学習メモとして、よく使うコマンドを振り返ってみました。

１　Heroku へログイン（ターミナルベース）

```
heroku login --interactive
```
２　アプリ一覧を確認する

```
heroku apps 
```

３　アプリを削除する

```
heroku apps:destroy --app アプリ名 —confirm アプリ名
```

４　Heroku に設定した環境変数を表示

```
heroku config
```

５　Herokuのドメインを確認

```
heroku domains
```

６　Heroku に環境変数を設定する

```
heroku config:set LINE_CHANNEL_USER_ID= 設定したい内容
```

７　デプロイした後、ブラウザを開く

```
heroku open
```

８　エラーログを見る

```
heroku logs 
```
IPA proccesing failedの解決方法 (M1 mac)

もうみたくない
![スクリーンショット 2021-04-25 9.04.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103494/0f1f7ce6-295c-a436-7be6-1df2a86c1207.png)

# 結論: M1でExportする場合はXcodeを`Rosettaを使用して開く`で実行する
`Xcode`を`Rosettaを使用して開く`で起動してExoportすると正常に完了します。

- Xcodeは必ず再起動が必要
- OrganizerでExportするときに利用※１

Intel macを下取りしてしまったら、こちらが今のところの解決策のようです。

※１ Archiveまで通常起動で完了します。Archiveも失敗するときは別の原因がありそうです。

# M1ではXcode 12.4までは、Exportができない

下のログはwarningではあって、直接の原因ではなさそう。（でも手がかりはこれしかない。）
ipaを作るときに「universal framework」に不要なx86やi386が入ってエラーはよく見かけるケースだが、今回は「シミュレータを見ようとしたけどないので無視します」なので念の為、作成したバイナリをlipoで確認するもののarm64しかなかった。

```
/Applications/Xcode.app/Contents/Developer/usr/bin/ipatool exited with 1
ipatool JSON: {
    alerts =     (
                {
            code = 3736;
            description = "Configuration issue: platform AppleTVSimulator.platform doesn't have any non-simulator SDKs; ignoring it";
            info =             {
            };
            level = WARN;
        },
                {
            code = 3736;
            description = "Configuration issue: platform WatchSimulator.platform doesn't have any non-simulator SDKs; ignoring it";
            info =             {
            };
            level = WARN;
        },
                {
            code = 3736;
            description = "Configuration issue: platform iPhoneSimulator.platform doesn't have any non-simulator SDKs; ignoring it";
            info =             {
            };
            level = WARN;
        }
    );
}
```

サードパーティライブラリを利用しないプロジェクトで試したところ、Rossetaなしで成功したので、
CarthageやCocoaPodsなどでサードパーティ製のライブラリを取り込んだものは今のところできないようです。
（不確かなので自己責任でお願いします）

ipa tool自体はM1で動くけど、バイナリをパッケージングして行く途中で、static libraryやdynamic frameworkなどが混在している中でarm64のバイナリがシミュレータか実機用かで判定が上手くいっていないような気がしています。
（占い）

# 参考

https://stackoverflow.com/questions/64916429/how-to-fix-ipa-processing-failed-in-xcode-12-2-with-mac-m1
[Xcode] Find Call Hierarchyで古いコードがヒットしてしまう事象の回避策（共有＆情報募集）

# 前提環境

Xcode 12.1

# 前置き

Xcode上で、関数やprotocolの呼び出し元を調べたい場合、

1. カーソルを合わせて右クリックし、
2. コンテキストメニューから `Find Call Hierarchy` を選択すると、

左ペインの Find navigator に、呼び出し元のツリーが表示されます。
![スクリーンショット 2021-04-24 9.12.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/df277c07-a2de-6aad-b7ce-6ed6e55764af.png)

# 問題事象

コードを改修しながら `Find Call Hierarchy` を実行すると、改修前のコードがヒットしてしまい、もう呼び出していないはずなのに、呼び出し元のツリーに表示されてしまう場合があります。

地味に煩わしいです…

- Xcodeメニューの `Product > Clean Build Folder` で直る場合があるような気もするし、
- Gitのブランチを切り替えると直る場合があるような気もするし、
- Xcode再起動で直る場合があるような気もするし、

どれをやっても一向に解消しない場合もあります。

Xcode上部のステータス領域に"Indexing..."が表示されているタイミングで再構築しているのかな？と思いきや、その後でもやはり解消しない場合があるような…

都度あれこれ試すのもイライラするので、確実に回避したい！と考えた次第です。

# 私なりにたどり着いた回避方法

私は今のところ以下の方法で回避しています。

まず、Macアプリ [DevCleaner for Xcode](https://apps.apple.com/app/devcleaner/id1388020431) を入れます。
詳細はこちらの記事が素晴らしいのでご紹介しておきます。
[Xcodeの面倒なキャッシュ削除をGUIで行えるMacアプリ『DevCleaner for Xcode』 - DevelopersIO](https://dev.classmethod.jp/articles/introduction-of-devcleaner/)

以下の操作を行います。

1. DevCleanerにて、"Derived Data"から該当アプリのデータを削除する。
2. Xcodeプロジェクトを開き直す。
![スクリーンショット 2021-04-24 9.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/3138f269-8fbf-624d-1116-752dbc187338.png)
「もっと簡単・確実に回避できるよ！」という情報をお持ちの方がいらっしゃいましたら、ぜひ情報提供をお願いいたします。:bow_tone1:
[Unity]Zenject(Extenject)の勉強用サンプルコード

# 概要
Zenject(Extenject)の勉強用サンプルコードを作ってみたので共有します。

補足説明はこちらの記事をご覧ください。

https://qiita.com/kazuma_f/items/3608fb27e677885bee06

# Extenjectをインポートする
Package ManagerでExtenjectをインポートします。
![スクリーンショット 2022-12-21 6.51.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/31e7dc26-0a6c-ec3b-6f9e-6d8e3b393eaa.png)

# クラスを作成する
動作確認用のクラスを作成します。

```cs

using UnityEngine;
using Zenject;

/// <summary>
/// テスト用クラス
/// </summary>
public class TextDisplay : MonoBehaviour {
    [Inject] private ITest test;

    private void Start() {
        test.DebugTest();
    }
}

/// <summary>
/// インタフェース
/// </summary>
public interface ITest {
    void DebugTest();
}

/// <summary>
/// インスタンスA
/// </summary>
public class Test : ITest {
    public void DebugTest() {
        Debug.Log("初期メッセージ");
    }
}

/// <summary>
/// インスタンスB
/// </summary>
public class Test2 : ITest {
    public void DebugTest() {
        Debug.Log("機能変更後メッセージ");
    }
}
```
空のオブジェクトを作成してそこに貼り付けてください
![スクリーンショット (80).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/f8172702-ae0e-1697-9c47-b33a1391ab3b.png)


# MonoInstallerを作成する
Projectビュー上の任意の場所にMonoInstallerを作成します。
Create > Zenject > Mono Installer
![スクリーンショット (123).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/c922d5a8-ce4b-3d65-bb9d-94bd96e30f62.png)
これによってMonoInstallerのひな型が作られるのでそのコードを以下の様に書き換えます。

```cs

using UnityEngine;
using Zenject;

public class TestInstaller : MonoInstaller {
    public override void InstallBindings() {
        Container
            .Bind<ITest>()
            .To<Test>()
            .AsCached();
    }
}
```

# SceneContextを作成する
Hierarchy上の任意の場所にSceneContextを作成します。
Zenject > Scene Context
![スクリーンショット (122).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/3325535d-9745-8c5e-6296-b68db620465e.png)

作成されたSceneContextオブジェクトを選択し先ほど作成したTestInstallerをアタッチします。
続けてSceneContextコンポーネントのMonoInstallersにTestInstallerを登録します。
![sceneContext.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/ca9fbcfb-a19a-3871-f520-b9658fdbdd98.png)


# 実行する
実行するとデバッグログが表示されます。
![スクリーンショット (118).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/e192dae9-d7a2-dc06-e33c-7dff88808479.png)

# コードを変更する
コードを変更してみます。TestInstallerクラスを1行だけ変更します。

```cs
            .To<Test>()
```
↓

```cs
            .To<Test2>()
```

実行するとデバッグログが変化して正常にコードが変更された事を確認できました。
![スクリーンショット (121).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/6703d9d8-3931-6e8a-f6a5-231a24e4d38f.png)


# 補足
Zenjectはクラス間の密な結合を避ける為に導入されます。

今回の例では、TextDisplayのデバッグログ表示方法を変更する為にコードを書き換えましたが、1行の変更だけで実現できました。（現実的な所では「機能変更の新規インスタンスを用意する」 > 「MonoInstallerの必要部分を変更する」の手順になると思います）

従来の記述方法では依存している部分の変更を依存しているクラスの数だけやる必要があります。
規模が大きくなる程にZenjectの恩恵は大きくなっていきます。
Proxmoxで時刻同期

Proxmoxではデフォルトでは時刻設定がうまくされず、5分おきにログアウトしてしまいます。
また、マイグレートやノード間クローンなどができず、様々なトラブルになります。

新規ノードを作成した場合は、全てのノードにおいて以下のコマンドで必ず設定・確認を行います。
また、全ノードの再起動を行います。

```
date -s "04/25 9:05 2021"
timedatectl set-local-rtc 0
timedatectl
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790864/9292f75a-2659-b793-45c3-82c5d814f401.png)
Unity初心者のメモ帳

# what's this
これはunity，C#の初心者が開発を進めるにあたってメモしたほうがいいなということをメモしていきます．誰かの参考になればと公開記事にしておきます．随時更新していきます．

# 目次
## 基本操作編

## エラー編
1. [NullReferenceException]()
Docker環境で起きたCannot allocate memoryのエラー解決

## 概要
Docker環境に下記のようなメモリ不足のエラーが起きました。
その原因と解決策を共有します。

```
mmap() failed: [12] Cannot allocate memory
PHP Fatal error:  Out of memory (allocated 61079552) (tried to allocate 135168 bytes)
(省略)
```

## 再現環境
- MacBook Pro 
バージョン : 11.2
チップ : Apple M1

- Docker Desktop for Mac
バージョン : 3.3.1
その他設定
![スクリーンショット 2021-04-25 8.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502753/deaf20b2-91cf-cca4-aa37-36c379336420.png)

- php.ini 
memory_limit : 1280M


## 原因
M1 MacでDocker(3.3.1)を使うとメモリリークをしてしまうバグがあり、
負荷が高い処理をすると止まってしまうとのことです。
[Memory Leak on M1 Macs](https://github.com/docker/for-mac/issues/5204#issuecomment-820720389)

## 解決策
Docker Desktop for M1を使い、Dockerのバージョンが3.1.0になったことで解決いたしました。
![スクリーンショット 2021-04-25 8.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/502753/f2fe722a-0490-59f7-af6e-28fa9079879e.png)
jQuery: 簡単なパスワード認証

Web サーバーの設定を変更出来ない時、（権限がないとか設定ファイルが難解な為）簡単なパスワード認証をつける方法です。
私は、Synology の NAS の nginx の設定が難解な為に、Basic 認証をつけることを諦めました。nginx を再起動する度に、複数の mustache ファイルから、nginx.conf が生成されるという仕組みでした。
次のページを参考にしました。
[[JavaScript] 簡単にパスワード認証(のようなもの)を作る](https://qiita.com/TR246/items/104320a937e00f31cd8f)
[JavaScriptで文字列のハッシュ値を取得する](https://qiita.com/economist/items/768d2f6a10d54d4fa39f)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>Simple Login</title>
</head>
<body>
<blockquote>
<h2>Simple Login</h2>
</blockquote>
<hr />
<table>
<tr><td>
UserName:
</td><td>
 <input id="user" type="passsword"></input>
</td></tr>
<tr><td>
Password:
</td><td>
<input id="pass" type="passsword"></input>
</td></tr>
<tr><td>
</td><th>
<button id="enter">OK</button>
</th></tr>
</table>

<hr />
<p>Apr/25/2021 AM 07:19</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="password_check.js"></script>
</body>
</html>
```

```js:password_check.js
// ---------------------------------------------------------------
//	password_check.js
//
//					Apr/25/2021
//
// ---------------------------------------------------------------
jQuery(function()
{
	jQuery("#enter").click(function ()
		{
		const key = jQuery("#user").val() + "_" + jQuery("#pass").val()
		sha256_async(key).then(value_hash => {
			console.log(key)
			console.log(value_hash)

		
		jQuery.ajax({
			url: value_hash + ".html"
		}).then(html => {
			jQuery("body").html(html)
		}).catch(() => {
			alert("パスワード認証に失敗しました")
			jQuery("#pass").val("")
		})
			})
	})

	jQuery("#pass").on("keydown", e => {
		if(e.keyCode === 13)
			{
			jQuery("#enter").trigger("click")
			}
	})
})

// ---------------------------------------------------------------
async function sha256_async(text){
    const uint8  = new TextEncoder().encode(text)
    const digest = await crypto.subtle.digest('SHA-256', uint8)
    return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('')
}

// ---------------------------------------------------------------
```

例えば、

```text
UserName: good 	
Password: morning
```

と入れると、コンソールに、ハッシュが表示されます。
![simple_login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/096c71a2-b943-c6ab-bbed-c8bd8bff4f2a.png)
この時は、
7f48567474fc65934fa4f1e50c9c2fd8f8123a257433b9255104e71607a255cf.html
というファイルを作成して下さい。それが表示されます。

https でなくて、http でアクセスすると、次のエラーが出ます。
![error_apr27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/02d9e392-2d22-3fe8-834b-65196594bd31.png)

```text
password_check.js:39 Uncaught (in promise) TypeError: Cannot read property 'digest' of undefined
    at sha256_async (password_check.js:39)
    at HTMLButtonElement.<anonymous> (password_check.js:12)
    at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)
```
外付けUSBドライブが「アクセスが拒否されました」


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/00a8bb19-3284-24b5-44c5-99baf1625274.png)

Windowsを再インストールしたら、外付けの　USB　ハードディスクの中身が見えなくなった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/4157082b-99e4-b8dd-e0f8-eadefac23d60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/807334a8-eb9b-6874-353c-9fba502a5828.png)



# 環境

- Windows 10 Pro　バージョン 2004

# 対応

該当のドライブのアイコンを右クリックして「プロパティ」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/442dd660-d898-5258-2b8b-ad358ae3b1ec.png)

「詳細設定」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0888d790-b420-2efe-5367-c56051846d49.png)

「OK」としても

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f9749c8b-736b-19eb-1bbf-7214281e942e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ced71fc4-685a-e79e-7515-c9eb6b00707f.png)

となり、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/101ce459-e0fc-81dc-2ac1-481619fc85ae.png)

うまくいきません。




「所有者：」の「変更」を試してみると


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/b7df9291-ad6d-911e-0fbc-e704a8398eba.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f170a73a-0384-591c-abe4-9a04b0459c62.png)

「Administrators」を入力して進めます。

所有権の変更が行われます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cef563e0-6376-6aef-3add-c372b98886dd.png)

いくつかはエラーが起こりましたが無視して進めます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/439286d7-accb-fa8d-f6c5-3f7b31987d53.png)

同様に、「SYSTEM」も追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/be13b7fb-cc93-31a4-eb12-e1c2b4ca5f30.png)

この時点で、管理者権限で中身が読み出せるようになっています。更に「Users」を追加すると正常に見えるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/02bbd3a3-c77e-b6d2-7697-7b2f9f2a89ad.png)
pythonでgnuradio その5

#概要

pythonでgnuradioやってみた。
AM変調を表示。
信号は、440ｈｚのサイン波、搬送波は、5KHZ。

#写真

![am0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/112962f4-f4c2-a7c1-8912-d02571067af3.jpeg)


#サンプルコード

```
from gnuradio import gr, blocks, analog, filter
import sys
import sip
from gnuradio import qtgui
from PyQt4 import Qt, QtGui, QtCore

class my_top_block(gr.top_block):
	def __init__(self):
		gr.top_block.__init__(self)
		samp_rate = 32000
		self.qapp = QtGui.QApplication(sys.argv)
		self.sink1 = qtgui.sink_c(1024, filter.firdes.WIN_BLACKMAN_hARRIS, 0, samp_rate, "", True, True, True, True, )
		self.blocks_multiply_xx_0 = blocks.multiply_vcc(1)
		self.blocks_add_const_vxx_0 = blocks.add_const_vcc((1, ))
		self.analog_sig_source_x_1 = analog.sig_source_c(samp_rate, analog.GR_COS_WAVE, 5000, 1, 0)
		self.analog_sig_source_x_0 = analog.sig_source_c(samp_rate, analog.GR_COS_WAVE, 440, 1, 0)
		self.connect((self.analog_sig_source_x_0, 0), (self.blocks_add_const_vxx_0, 0))
		self.connect((self.analog_sig_source_x_1, 0), (self.blocks_multiply_xx_0, 1))
		self.connect((self.blocks_add_const_vxx_0, 0), (self.blocks_multiply_xx_0, 0))
		self.connect((self.blocks_multiply_xx_0, 0), (self.sink1, 0))
		pyQt = self.sink1.pyqwidget()
		pyWin = sip.wrapinstance(pyQt, QtGui.QWidget)
		self.top_widget = Qt.QWidget()
		self.top_layout = Qt.QVBoxLayout(self.top_widget)
		self.top_layout.addWidget(pyWin)
		self.top_widget.show()

if __name__ == "__main__":
	tb = my_top_block();
	tb.start()
	tb.qapp.exec_()
	tb.stop()





```

以上。
wsl2のUbuntu20.4へのpostgresの導入方法


# コマンド一覧
```bash
sudo apt update
sudo apt install postgresql postgresql-contrib

# postgres起動
sudo /etc/init.d/postgresql start

# postgresユーザで接続
sudo -i -u postgres

# postgresに入れるか検証（はいれたら\qで終了）
psql

# postgresにuser追加し、権限とか聞かれるので確認
createuser --interactive

#psql内に入り、作成したパスワード変更 passwordはdetabase.ymlのdevelopmentに記載されているやつ
psql
alter role username with password 'password'

# user名でDB作成
createdb username

# psqlでユーザ経由で入れるか確認（パスワード入れる）
psql -U username

# developmentのDB作成
createdb development_database -O username
 
# 認証の変更
sudo vi /etc/postgresql/12/main/pg_hba.conf

## 変更前
local all postgres peer
## 変更後
local all postgres md5

```
途中つまったら、適宜postgresqlを再起動させてください。
 sudo  /etc/init.d/postgresql restart

## 参考資料
https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql-on-ubuntu-20-04-ja
https://ryotatake.hatenablog.com/entry/2019/05/03/postgresql_peer_authentication_failed
React Kawaii がかわいい + Superconsも

React Kawaii という React コンポーネントのお試し。
[10 Trending projects on GitHub for web developers - 23rd April 2021](https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-23rd-april-2021-4g02) で紹介されていたもの。

![image](https://raw.githubusercontent.com/miukimiu/react-kawaii/master/docs/images/react-kawaii-example.gif)

## React Kawaii

https://react-kawaii.vercel.app/

https://github.com/miukimiu/react-kawaii

## 使い方

以下で。

`npm install --save react-native-svg`
`npm install --save react-kawaii`

かわいいのは題名のとおりさておいて、React ってこういう感じなのかあ というのが分かるところが面白かったかもしれない。

https://github.com/e99h2121/next-netlify-starter/blob/main/pages/index.js#L28

書いたのこれだけ。

```js
import { Planet } from 'react-kawaii'
import { Cat } from 'react-kawaii'
import { Ghost } from 'react-kawaii'

//中略

<Planet size={90} mood="blissful" color="#FDA7DC" />
<Planet size={90} mood="lovestruck" color="#FDA7DC" />
<Planet size={90} mood="blissful" color="#FDA7DC" />
<Cat size={110} mood="excited" color="#596881" />
<Cat size={110} mood="happy" color="#596881" />
<Cat size={110} mood="excited" color="#596881" />
<Ghost size={100} mood="excited" color="#83D1FB" />
<Ghost size={100} mood="happy" color="#83D1FB" />
<Ghost size={100} mood="ko" color="#83D1FB" />

```

## こうなる

https://e99h2121.netlify.app/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/ba7a659a-72c1-f45c-33ee-878c7dbb4a73.png)

https://react-kawaii.vercel.app/#/Components?id=cat

## 追記: Supercons も

```
# yarn add supercons
npm i supercons
```

https://github.com/lachlanjc/supercons

https://supercons.vercel.app/

```js
import React from 'react'
import Icon from 'supercons'

export default () => (
  <div style={{ color: 'magenta' }}>
    <Icon glyph="like" size={128} />
    <Icon glyph="cloud" size={32} />
  </div>
)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/1dcc8e9a-0e91-6da9-f428-7e0485af5b0a.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/98843a98-630d-9b50-201d-99403157e780.png)


## React メモ

https://qiita.com/mikan3rd/items/b9ac6125b1f14175677e

https://qiita.com/naruto/items/fdb61bc743395f8d8faf

以上お楽しみいただければさいわいです。