OmniAICreator/Qiita-1.07M huggingface dataset:
kubeadmin join が動かない (kubelet isn't running or healthy.)

Kubernetes に node を追加する際に sudo kubeadm join とするも以下のエラーでうまく動作しなかった際のメモです。

```
[kubelet-start] Waiting for the kubelet to perform the TLS Bootstrap...
[kubelet-check] Initial timeout of 40s passed.
[kubelet-check] It seems like the kubelet isn't running or healthy.
[kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused.
```

syslog を良く見るとこんなエラーが。

```
"Failed to run kubelet" err="failed to run Kubelet: misconfiguration: kubelet cgroup driver: \"systemd\" is different from docker cgroup driver: \"cgroupfs\""
```

動いているものと見比べた結果以下のような設定を追加することで解決しました。[ここ](https://kubernetes.io/docs/setup/production-environment/container-runtimes/)に情報がありました。

```/etc/docker/daemon.json
{
  "exec-opts": ["native.cgroupdriver=systemd"],
  "log-driver": "json-file",
  "log-opts": {
    "max-size": "100m"
  },
  "storage-driver": "overlay2"
}
```

~~うーん、前にインストールした時はこんな設定追加した覚え無いんだけどな・・・。~~
dockerのコンテナーに入るコマンド

# docker exec 
実行中のコンテナでコマンドを実行
`docker exec -it コンテナID bashShell`

例：`docker exec -it ubuntu_bash bash`


# docker attach
実行中のコンテナにアタッチする
`docker attach コンテナID`
例：`docker attach test`

# execとattach区別

- execでコンテナに入り : 新しターミナル開くため、コンテナ停止せず、exitする
- attachでコンテナに入り: 直接コンテナに入るため、コンテナを停止して、exitする
書籍「最短コースでわかる PyTorch &深層学習プログラミング」3値分類モデルの決定境界の表示

# はじめに
書籍「**最短コースでわかる PyTorch &深層学習プログラミング**」の著者です。
この本の姉妹版にあたる「**最短コースでわかるディープラーニングの数学**」の補足として、３値分類モデルの決定境界を求めるコードをアップしたところ、結構評判がいいようなので、調子にのってこちらの本でも同じことをやってみます。

-----

書籍のリンクは[こちら](https://www.amazon.co.jp/dp/4296110322)
2つの書籍は、まったく同じデータを例題で扱っており、こちらの本で３値分類モデルは７章に該当します。

Notebook全体のリンクは、[こちら](https://github.com/makaishi2/pytorch_book_info/blob/main/notebooks/ch07_multi_classifier_dec.ipynb)です。

# 考え方
決定境界とは、２つの確率値が等しくなる点の集まりです。つまり、　softmax関数の入力の時点で考えると、「*２つの１次関数の計算結果が等しい場所*」ということになります。
これを、重み行列とバイアスの言葉でいいかえると、重み行列とバイアスを当時に一列ずらして元の行列との差をとり、その結果で計算される１次関数の結果がゼロになる場所です。
※　この考え方が成り立つのは正確にいうと例題で扱っている３値分類の場合に限定されます。４値以上の分類の場合は、決定境界の組み合わせがもっと複雑なので、計算もそれに対応して複雑になります。

これから紹介するコードはこの考えに基づいて実装されています。

# 実装コード紹介
これから紹介する実装コードは、書籍でいうとp.263で学習が終わり、weightとbiasの値の表示までできた後に追加したものです。

## x, yの描画領域の計算
決定境界の直線を元の散布図と同時に表示しようとすると。決定境界の直線に引っ張られて、散布図の点と関係ない領域まで表示されてしまいます。そのことを防ぐために、x, yの描画領域をあらかじめ計算し、 axis関数で明示的に描画領域を指定するようにします。
※　この考え方は一般論としては間違っていないのですが、今回の場合は、一番最後の図を見ると、こういう問題は起きなかったみたいです。つまり、結果論としては、y_min, y_maxの計算と、描画のときのaxis関数呼び出しは不要でした。

```py
# x, yの描画領域計算
x_min = x_train[:,0].min()
x_max = x_train[:,0].max()
y_min = x_train[:,1].min()
y_max = x_train[:,1].max()
x_bound = torch.tensor([x_min, x_max])

# 結果確認
print(x_bound)
```


## 決定境界のyの値計算用関数

```py
# 決定境界用の１次関数定義

# 決定境界用の１次関数定義
def d_bound(x, i, W, B):
    W1 = W[[2,0,1],:]
    W2 = W - W1
    w = W2[i,:]
    B1 = B[[2,0,1]]
    B2 = B - B1
    b = B2[i]
    v = -1/w[1]*(w[0]*x + b)
    return v
```

行列W2は上の説明に基づいて実装しています。
その後の計算は、

$ w_0 + w_1 x + w_2 y = 0$

をyについて解いた結果です。


## 決定境界のｙの値を計算
今、定義した関数を使って、決定境界のyの値を計算していきます。決定境界は全部で３つあります。

```py
# 決定境界のyの値を計算

W = net.l1.weight.data
B = net.l1.bias.data

y0_bound = d_bound(x_bound, 0, W, B)
y1_bound = d_bound(x_bound, 1, W, B)
y2_bound = d_bound(x_bound, 2, W, B)

# 結果確認
print(y0_bound)
print(y1_bound)
print(y2_bound)
```

```
tensor([3.0898, 4.9179], dtype=torch.float64)
tensor([2.2871, 3.7670], dtype=torch.float64)
tensor([3.7981, 5.9337], dtype=torch.float64)
```

## グラフ描画
これで準備は全部整いました。あとは、今計算で出したyの値を使ってplot関数で直線を書けばいいだけとなります。

```py3
# 散布図と決定境界の標示

# xとyの範囲を明示的に指定
plt.axis([x_min, x_max, y_min, y_max])

# 散布図
plt.scatter(x_t0[:,0], x_t0[:,1], marker='x', c='k', s=50, label='0 (setosa)')
plt.scatter(x_t1[:,0], x_t1[:,1], marker='o', c='b', s=50, label='1 (versicolour)')
plt.scatter(x_t2[:,0], x_t2[:,1], marker='+', c='k', s=50, label='2 (virginica)')

# 決定境界
plt.plot(x_bound, y0_bound, label='2_0')
plt.plot(x_bound, y1_bound, linestyle=':',label='0_1')
plt.plot(x_bound, y2_bound,linestyle='-.',label='1_2')

# 軸ラベルと凡例
plt.xlabel('sepal_length')
plt.ylabel('petal_length')
plt.legend()
plt.show()
```

下のようなグラフが表示されれば成功です！

![スクリーンショット 2022-01-15 13.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206130/b1093821-cd0d-e8ca-98aa-48834697cbb5.png)
Redashでコホート分析のはまりどころ

## はじめに

Redashでコホート分析ができるですが、いくつかハマったのでメモを残しておきます。

## コホートとは？

詳細は他のサイトで調べて頂きたいですが、例えば、ある月に100人が予約して、その翌月にその100人のうち何人が予約したか？その翌々月は？というの表した図です。継続率の分析やリピートするタイミングの分析などに使うことが多いと思います。

こんな感じの図です
![Screen Shot 2022-01-15 at 13.52.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397257/3c100353-6165-7593-e984-1d6f2b30b5a3.png)


## サンプルデータ

- 以下のようなシンプルなテーブルを例とします

- Ordersテーブル：予約データ
 - orders.user_id：予約者
 - orders.created_at：予約作成日

## SQL

- クエリはこんな感じです。mysql5系で試したので、MySQL8.0とかでしたら、with句を使ったほうが見やすいかと思います。

```SQL
-- ユーザーごとの予約の初回の月
CREATE TEMPORARY TABLE tmp_first_date_by_user AS (
 SELECT
  DATE_FORMAT(MIN(orders.created_at), '%Y%m') AS first_date,
  user_id
 FROM orders
 WHERE orders.created_at IS NOT NULL
 GROUP BY user_id
);

-- 初回の月ごとの予約の件数
CREATE TEMPORARY TABLE tmp_user_count_by_first_date AS (
 SELECT
  first_date,
  COUNT(user_id) AS total
 FROM tmp_first_date_by_user
 GROUP BY first_date
);

-- それぞれのorderの月ごとの件数を求める(同月の予約は1とする)
CREATE TEMPORARY TABLE tmp_user_count_by_date AS (
 SELECT
  DATE_FORMAT(orders.created_at, '%Y%m') AS cohort_date,
  tmp_first_date_by_user.first_date AS first_date,
  COUNT(DISTINCT orders.user_id) AS user_count
 FROM orders
 INNER JOIN tmp_first_date_by_user ON tmp_first_date_by_user.user_id = orders.user_id
 WHERE orders.created_at IS NOT NULL
 GROUP BY 1, 2 
);


SELECT
 date_format(CONCAT(tmp_user_count_by_first_date.first_date, '01'),'%Y-%m-%d') AS date,
 PERIOD_DIFF(tmp_user_count_by_date.cohort_date, tmp_user_count_by_first_date.first_date) AS month_number,
 CAST(SUM(tmp_user_count_by_date.user_count) AS SIGNED) AS value,
 tmp_user_count_by_first_date.total AS total
FROM tmp_user_count_by_first_date
LEFT OUTER JOIN tmp_user_count_by_date ON tmp_user_count_by_date.first_date = tmp_user_count_by_first_date.first_date
GROUP BY 1, 2, 4
ORDER BY 1, 2, 4

```

## Redashの設定

- RedashのVisualizationの設定1

![Screen Shot 2022-01-15 at 13.44.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397257/0cefe9cb-34be-bd07-abe4-2e8acbfc93bb.png)

- RedashのVisualizationの設定2

![Screen Shot 2022-01-15 at 13.44.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397257/74eb4d4b-467f-7de0-77fb-667ef97617a2.png)

## はまりポイント

- なにかがおかしいと、RedashでCohortにVisualization Typeを選べない（何が原因かわからないのでハマる）
- データが多すぎるとブラウザが固まるっぽいので、最初はWHERE句で数行だけにして、設定がうまくいってから、データ量を調整して増やしていく
- Redash では、月、週、日の単位でコホート分析するだけの機能なので、年や四半期などはできない
    - Redash設定画面の Time Interval
- 結果は、次の4つのカラムをかならず出力する。
    - 日付：必ずYYYY-MM-DDの形式にする
        - SQLの date
        - Redash設定画面の Date(Bucket)
    - 期間：最初の日付からの経過時間
        - SQLの month_number
        - Redash設定画面の Stage
    - その期間のデータ：その経過時間のデータ
        - SQLの value
        - Redash設定画面の Stage Value
    - 最初の日付のデータ：初回のデータ
        - SQLの total
        - Redash設定画面の Bucket Population Size
- 日付は、必ずYYYY-MM-DDの形式にする。月のコホートでもYYYY-MMだとブラウザが固まる。YYYYMMDDでもだめ。
- 結果として表示するカラム名は、全部小文字にする。大文字と小文字が混じっているとブラウザが固まる


## 参考

https://redash.io/help/user-guide/visualizations/cohort-howto
windows git bash ssh接続

# はじめ
リモートとやりとりするときにパスワード入力は面倒なのでssh通信しようと思ったとき皆もよく忘れる例の手順を適当に書く

# てじゅん

git bash起動

.sshディレクトリを作成

```
$ mkdir .ssh
```

id_githubという鍵を生成

```
$ ssh-keygen -t id_github -C "your_emai@example.com"
```

SSHエージェントが起動してるか確認

```
$ eval "$(ssh-agent -s)" 
```

起動してたら、SSHエージェントに登録

```
$ ssh-add　id_github
```

公開キーをコピー

```
$ clip < ~/.ssh/id_github.pub
```

GithubのSettings/SSH and GPG keysのAdd SSH keyをクリックして、コピーした公開キーを登録

登録がうまくいっていれば成功メッセージが返ってくる

```
$ ssh -T git@github.com
Hi youname! ... successfully ... access.
```

.sshフォルダのconfigファイルを作成

```
$ vim ~/.ssh/config
```

ここにはssh通信するときに設定ファイルの参照場所を書く

```
Host github
    HostName github.com
    IdentityFile ~/.ssh/id_github
    User git
```

git pushしてうまくいくか試す

```
$ git push
```
シェルスクリプト 出力文字列の部分色付け Linux sh bash sed echo printf

# 概要
シェルスクリプト出力結果の一部を指定して色つけしたい
実行環境は Mac or RHEL系Linux
![e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/39332a40-9143-02f2-1e55-d44034a93933.png)

※ 今回は紫色にするので
　色数字に`035 → [35m`を使用する

# 形式例
```zsh:シンプルに色つけ
ESC=$(printf '\033')
echo "${ESC}[35m色をつけたい文字列${ESC}[m"
```
```zsh:開始/終了記号も変数化してみた
ESC=$(printf '\033');COLS=$(printf '[35m');COLE=$(printf '[m')
echo "${ESC}${COLS}色をつけたい文字列${ESC}${COLE}/g"
```
```zsh:sed：複数指定する(-E使用時の)場合
# ; で区切って複数書く

sed -E "s/条件1/変更内容1/g; s/条件2/変更内容2/g"
```
```zsh:sed：条件で拾った内容をそのまま出力に流用
# () で囲って \1 で出力

sed -E "s/(条件1)/\1/g"
```


# サンプル

```zsh:コマンド
ESC=$(printf '\033');COLS=$(printf '[35m');COLE=$(printf '[m'); \echo -e "hogehttppiyo\nhttppiyo\nhogehttpshoge" | \sed -E "s/(^http.*$)/${ESC}${COLS}\1${ESC}${COLE}/g; s/(https)/${ESC}${COLS}\1${ESC}${COLE}/g"
```

```zsh:シェルスクリプト
#!/bin/sh

ESC=$(printf '\033')
COLS=$(printf '[35m')
COLE=$(printf '[m')
TEXT1="hogehttppiyo"
TEXT2=`echo "http"`
TEXT="${TEXT1}\n${TEXT2}piyo\nhogehttpshoge"

\echo -e $TEXT | \sed -E \
"s/(^http.*$)/${ESC}${COLS}\1${ESC}${COLE}/g;\
 s/(https)/${ESC}${COLS}\1${ESC}${COLE}/g"

# Macでは echo -e の -e は不要なので消す
```

# 出力結果
![スクリーンショット 2022-01-15 12.52.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23248/457cdd24-6f6c-0e2c-760f-37bb51709a4e.png)

# 応用
`echo`内容を 変数 に置き換えれば色々流用できそう。
あとは`sed`の正規表現が組めるか次第


# 参考
https://qiita.com/ko1nksm/items/095bdb8f0eca6d327233

https://atmarkit.itmedia.co.jp/ait/articles/1610/18/news008.html

https://qiita.com/shge/items/1905ae37978a88d2ef95

https://stackoverflow.com/questions/24717676/bash-profile-sed-1-not-defined-in-the-re
extensionを使ってみた

## extensionとは?

わかりやすくいうと拡張という意味

こちらの記事がわかりやすいのでリンクを貼っておきます。
https://www.sejuku.net/blog/33334

以前アプリを作るときに参考にしていたソースコードで、

```
ViewController: UIViewController {}
```
に、UITableViewDelegate、UITableViewDataSourceを追加して、

```
ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {}
```

としていたのですが、後からコードを追加していくとグチャグチャになってしまったことがありました。
その、反省を踏まえてプログラミングスクールで学んだ書き方ではextensionを使ってclassの外に追加したいプログラムを書いていくと、コードがすっきりしてみやすくなりました。

TableViewCellに画像を入れる記事で参考になった記事のリンクも貼っておきます。
https://qiita.com/kapiemon/items/f8a919343a1def729275

ということでこんな感じにコードを修正してみました。

```

//
//  ViewController.swift
//  IconImageSample
//
//  Created by 橋本純一 on 2022/01/15.
//

import UIKit

class ViewController: UIViewController {
    
    // 名前を入れる配列
    let placeArray = [
        "寝室", "収納BOX", "車の中", "冷凍庫", "リビング",
        "冷蔵庫", "シューズBOX", "収納スペース", "トイレ", "倉庫・ガレージ"
    ]
    // 画像を入れる配列 .jpgだとか.pngといった拡張子は省略してもよいみたい
    let imageArray = [
        "bead", "box", "car", "freezer", "living",
        "refrigerator", "shoes", "storage", "toilet", "warehouse"
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

extension ViewController: UITableViewDelegate {
    // セルの個数を指定する
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return placeArray.count
    }
}

extension ViewController: UITableViewDataSource {
    // セルに値を設定する
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        
        // セルに表示する値を設定
        // テキストラベル
        cell.textLabel?.text = placeArray[indexPath.row]
        // 画像を複数入れる
        cell.imageView?.image = UIImage(named: imageArray[indexPath.row])
        return cell
    }
}

```

**別ファイルにclass構文でまとめた方が良いのですがうまくいかなかった...**

Assets.xcassetsに画像を配置

![スクリーンショット 2022-01-15 13.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303722/8fa003e0-2e64-032d-a2ff-8a7a1b92b1b0.png)

サンプルアプリをbuildするとこんな感じになりました。

![スクリーンショット 2022-01-15 11.11.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303722/5c874207-754d-05c3-e559-43dba2c8107e.png)

## 最後に

初心者なもので、まだまだ人の真似をしたり手探りでソースコードを書いて動かしてみるぐらいしかできません。
技術を高めようと日々アウトプットしております。
Pythonのリストのメソッドに慣れる

# はじめに

Pythonのリストメソッドの使い方を覚え書きです。
難しい事が書きません。


# 目次
- append(x)
- insert(i, x)
- pop(i)
- remove(x)
- clear() 

# リスト作成（サンプル）
サンプルのリストを作成し、次から説明するメソッドを実行した時にどういう結果になるか、確かめながら進めます。
まず、11,12,13,14の４個の数値が入ったリストを作成します。

```python:list
>>> list = [11,12,13,14]
>>> list
[11, 12, 13, 14]
```

# リストのメソッド

###list.append(x) - リストの追加(最後に)

リストの最後にxを追加します。

```python:append
>>> list.append(25)
>>> list
[11, 12, 13, 14, 25]
```
はい、最後に'25'が追加されましたね。


###list.insert(i, x) - 指定の場所へ挿入

i番目の前に、Xを挿入します。

```python:insert
>>> list.insert(2, 22)
>>> list
[11, 12, 22, 13, 14, 25]
```
2番目の前、つまり、
11が0番目、12が1番目、13が2番目なので、13の前に22を追加されましたね。



###list.pop(i) - 指定の場所を削除

i番目を削除を追加します。戻り値は削除する値。

```python:pop
>>> list.pop(4)
14
>>> list
[11, 12, 22, 13, 25]
```
4番目の14が結果として出力されて、14が削除されていますね。



###list.remove(x) - 指定の値を削除

指定値を削除します。
popメソッドと違い、場所ではなく、値の指定です。

```python:remove
>>> list.pop(12)
>>> list
[11, 22, 13, 25]
```
指定した12が削除されていますね。


###list.clear() - すべての要素をクリアする

すべての要素がクリアされます。

```python:remove
>>> list.clear()
>>> list
[]
```
空になりましたね。すっきり！
【Ruby】特定の文字列を検知　check_nameメソッド

※初心者向け
※アウトプット練習の為

開発環境
rails 6.0.4.4
ruby 2.6.5

##概要##
対象の文字列の中に特定の値が含まれているかどうかを検知するプログラムを実装。

##問題内容##
以下の要件を満たすcheck_nameメソッドを実装しましょう。

**・名前を入力すると「登録が完了しました」という文字列を出力すること**
**・名前の中にピリオド(.)がある場合は、「 "!エラー!記号は登録できません"」という文字列を出力すること**
**・名前の中に空白（半角のみ）がある場合は、「 "!エラー!空白は登録できません"」という文字列を出力すること**
※今回空白に関しては、半角スペースのみを考えることとします。

**雛形**

```ruby
def check_name(str) 
  # 処理を記述
end

puts "登録したい名前を入力してください(例)YamadaTaro"
str = gets
check_name(str) 
```

**出力例**
YamadaTaro → 登録が完了しました
Yamada.Taro→!エラー!記号は登録できません
Yamada Taro → !エラー!空白は登録できません

**ヒント**
**include?メソッド**を使用しましょう。
**include?メソッド**
include?メソッドは、指定した値が配列や文字列内に含まれているかを判定するメソッドです。指定した値が含まれている場合はtrueを、含まれていない場合はfalseを返り値として返します。


##解答内容##

```ruby
def check_name(str) 
  if str.include?(".")
    puts "!エラー!記号は登録できません"
  elsif str.include?(" ")
    puts "!エラー!空白は登録できません"
  else
    puts "登録が完了しました"
  end
end
puts "登録したい名前を入力してください(例)YamadaTaro"
str = gets
check_name(str) 
```

**解説**
1行目から9行目で**check_nameメソッド**を定義し、その定義した**check_nameメソッド**を13行目で呼び出しています。この際、引数にはgetsメソッドで入力された文字列を渡しています。

**check_nameメソッド**では、「ピリオドや空白（半角スペース）がない場合は登録を行い、ピリオドや空白がある場合はエラーを出す」という条件分岐を行うためにif文を使用しています。
2行目から8行目にわたるif文による条件分岐では、1行目の仮引数**str**で受け取った文字列に対して**include?メソッドを使用し、** **”.”(ピリオド)**と **” ”(半角スペース)**がないかを判断しています。

注意点として、if文は条件が当てはまった時点で処理が終了します。
そのため、「ピリオドや空白があるかどうか」という条件式を先に記述しましょう。

そして、出力例を参考にそれぞれの場合で出力させる値を、putsメソッドを用いて記述しましょう。

これで、コードは完成です。
MacOS　fatal error: 'wchar.h' file not foundの解消方法

# OSのUpdate後、clang++が動かなくなった

MacOSをUpdateした後、clang++がコンパイルできなくなりました。

```shell
❯ clang++ ./includes/std_vector_test.cpp
In file included from ./includes/std_vector_test.cpp:1:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/iostream:37:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/ios:214:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/__locale:15:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/string:519:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/__debug:14:
In file included from /usr/local/opt/llvm/bin/../include/c++/v1/iosfwd:98:
/usr/local/opt/llvm/bin/../include/c++/v1/wchar.h:119:15: fatal error: 'wchar.h' file not found
#include_next <wchar.h>
              ^~~~~~~~~
1 error generated.
```

## 解決方法

ここらへんのエラーはXcode周りのエラーが多いようです。

以下のコマンドで、デベロッパツールのインストールをチェックします。

```shell
xcode-select --install
```

インストールが開始され、問題が解決しました。
【typescript入門2】動的型付け・静的型付け、プリミティブ型とオブジェクト、nullとundefinedの使い分け

# 概要

オンラインサロン IT_KINGDOM で、typescript で学んだことを備忘録としてメモしていきます。

# 学習内容

- 動的型付け言語(プリミティブ型・オブジェクト型）
- 静的型付け言語

# 動的型付け言語

- 自動で型を付与する
- Javascript は動的型付け言語

## プリミティブ型

- 真偽値・文字列・数値・null・undefined・BigInt・シンボル
- null と undefined の使い分けはやや微妙（null は使えない変数、undefined は初期化されていない変数を示すことが多い。typescript では undefined を推奨）

## オブジェクト型

- Javascript のもつ型
- プリミティブ型以外（配列や関数など）

# 静的型付け言語

- 変数の型(文字列型、数値型等）を明示する
- 変数名：データ型で指定する

```typescript
const foo: boolean = true;
const foo: string = "test";
const foo: number = 1;
const foo: null = null; // nullのみ
const foo: undefined = undefined; // undefinedのみ
```

# 学習サイト

[オンラインサロン IT_KINGDOM](https://it-kingdom.com)
Amplifyの開発環境をdockerで作成

## 概要
AWS Amplifyの開発環境のdocker-compose.ymlとDockerfileを作成しました。

## なぜ作ったか?
久しぶりにローカルでAmplifyでの開発を行おうとすると、nodeやpythonが古かったり、amplify pushにはpipenv、pip3が必要だと言われたりで環境を整えるのに時間がかかってしまったので、開発環境のdocker化を行いました。

## 前提条件
amplifyでの開発をローカル環境で行なっている。

## Dockerfileの作成
node.jsとpythonが入っているイメージを使用します。

```dockerfile:Dockerfile
FROM nikolaik/python-nodejs:python3.8-nodejs12

# amplify CLI
RUN npm install -g @aws-amplify/cli

WORKDIR /var/www/app
```

## docker-compose.ymlの作成

```yml:docker-compose.yml
version: '3'

services:
    amplify:
        build: ./
        ports:
            - "8080:8080"
            - "20002:20002"
        volumes:
            - .:/var/www/app
            - ~/.aws/:/root/.aws/
        tty: true
        command: "npm run serve"
```

## ビルドとコンテナ立ち上げ
上記の2ファイルをローカル環境のamplifyプロジェクトの直下におきます。

`$ docker-compose build`
でビルドして
`$ docker-compose up`
でコンテナを立ち上げればローカル環境が立ち上がります。
この状態でlocalhost:8080をブラウザで開くと、起動を確認できます。

`$ docker-compose exec amplify bash`
でコンテナの中に入り、
`amplify push`を叩くこともできました。
Googleカレンダーの予定をTrelloに流し込むGAS

## 概要
スプレッドシートでボタンを押すと、Googleカレンダーの１週間の予定をTrelloに流し込む機能を作りました。
Googleスプレッドシート からボタンを押すことで起動する仕組みになっています。
この記事は自分の備忘録も兼ねて書きました。

## なぜ作ったか
個人の予定をGoogleカレンダーで管理していたが、それをタスクとしてチームのtrelloにも登録する必要があったので作りました。

## 予定を流し込むために必要なもの
Google カレンダーID
Trello APIキー
Trello トークン
Trello リストID
これらは以下で取得していきます。

## カレンダーIDの取得
Googleカレンダーを開き、「オーバーフローメニュー」→「設定と共有」を押します。
![スクリーンショット 2021-03-29 9.35.54（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022647/6c88d5c2-fd7b-0c6b-7d24-b64c12b63f7a.png)
設定画面が開き、中にカレンダーIDが書いてあります。

## Trello APIキーの取得
Trelloにログインした状態で[https://trello.com/1/appKey/generate](https://trello.com/1/appKey/generate)を開くと、開発者向けAPIキーを取得することができます。

## Trelloトークンの取得
https://trello.com/1/authorize?key=APIキー&name=&expiration=never&response_type=token&scope=read,write
を開くと、トークンを取得できます。

## TrelloリストIDの取得
TrelloボードIDを取得し、それを使用してTrelloリストIDを取得します。

まず、Trelloのプロフィール画面からユーザー名を取得します。
取得したユーザー名、APIキー、トークンを使用し、以下のようにAPIを叩くことで、ボードIDを取得できます。

```
$ curl "https://trello.com/1/members/ユーザー名/boards?key=APIキー&token=トークン&fields=name"
```
カレンダーの予定を流し込みたいボードIDを使用し、以下のようにAPIを叩くことで、リストIDを取得できます。

```
$ curl "https://trello.com/1/boards/ボードID/lists?key=APIキー&token=トークン&fields=name"
```
## スプレッドシートからGASを作成
スプレッドシートにGoogle カレンダーID、APIキー、トークン、リストIDを記入します。
![スクリーンショット 2021-03-31 15.18.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022647/85b6e097-4a9c-5ace-e028-ed87df2c35e0.png)

Googleスプレッドシートを開き、ツールから「スクリプトエディタ」を開きます。
以下を記述します。

```
function getCalendarEvents() {
  let sheet = SpreadsheetApp.getActiveSheet();
  const CALENDAR_ID = sheet.getRange("2", "2").getValue();
  const TRELLO_KEY = sheet.getRange("3", "2").getValue();
  const TRELLO_TOKEN = sheet.getRange("4", "2").getValue();
  const TRELLO_LIST_ID = sheet.getRange("5", "2").getValue();
  const calendar = CalendarApp.getCalendarById(CALENDAR_ID);
  
  // 期間
  let startTime = new Date();
  var endTime = new Date();
  endTime.setDate(endTime.getDate() + 7);
  
  const events = calendar.getEvents(startTime, endTime);
 
  //APIを叩き、カレンダーの情報を流し込みます。
  for(const event of events){
    var url = `https://trello.com/1/cards?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&idList=${TRELLO_LIST_ID}&name=${event.getTitle()}`;

    var headers = {
      "Accept": "application/json",
      "Content-type": "application/json"
    }
    
    var options = {
      "method": "post",
      "headers": headers
    };
    UrlFetchApp.fetch(url, options);
  }
}
```
実行するために、スプレッドシート内に図形を配置し、右クリックでスクリプトの割り当てをします。ここで「getCalendarEvents」を入力することで作成したコードを実行することができます。

## 参考にしたサイト
https://blog.serverworks.co.jp/tech/2016/05/16/trello-api/
【Powershell】画面キャプチャを一括リネームしたい

作業でいっぱい撮ったスクショを一括リネームしたい


# 1. コマンド
コマンドの実行のみでリネームできます。
（ps1ファイル作成不要）

下記コマンドをそのまま実行すると
「20220115_work_**01**.png」「20220115_work_**02**.png」「20220115_work_**03**.png」...と連番が付与されます。

```renAllPicInAFolder.ps1
ls | sort Name | 
% {$i = 1} { $NewName = (Get-Date).ToString("yyyyMMdd") + "_work_" + "{0:00}.png" -f $i; mv $_.Name $NewName; $i++ }
```
【AWS認定】SysOps アドミニストレーター(SOA-C02)試験受験記

# はじめに
私はAWSを仕事で扱うようになって１年程度経ちます。
自分がどの程度AWSが扱えるのか、どの程度理解できているかを客観的に示してみたいと思い、2021年12月からAWSの試験を受験しています。
この記事の執筆時点では、CLFとSAAを取得しています。（どちらも2021年12月に取得）

SAPに行くよりはまずはアソシエイト３冠を目指そうと思い、AWS SysOps アドミニストレーター試験を2022年の1月10日に受験しました。
この記事はSOA試験の備忘録となります。

# 受験対策
受験するにあたり、以下のサイトを利用し勉強しました。

* [AWS Certifited SysOps Administrator - Associate (SOA-C02) 試験問題サンプル](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-sysops-associate/AWS-Certified-SysOps-Administrator-Associate_Sample-Questions.pdf)
AWS公式のサンプル問題です。10問しかありませんが、どのような問題が出るかを確認する程度には役に立ちます。

* [kws-cloud-tech](https://kws-cloud-tech.com/)
ユーザー登録すれば50問まで無料で学習可能です。
受験後の感想となりますが、無料枠で出る問題は実際のSOA-C02試験で類似した問題は出ませんでした。
有料で使用できる問題には本番に似た問題があるかもしれません。

* [benchprep](https://amazonwebservices.benchprep.com/?locale=ja-jp)
AWS公式の模擬試験です。ユーザー登録すれば20問まで無料で模擬問題が学習可能です。
これまで模擬試験はお金がかかっていたのでこれはありがたいサービスです。
SOAに限らず、他の試験の模擬問題もありますので、記載している中では一番お勧めです。
詳細は以下のページを参照してください。
[ななななんと！AWS認定の模擬試験が無料になりました！！](https://dev.classmethod.jp/articles/new-aws-official-practice-questions/)

Qiitaで受験している方を見た感じでは、Udemyを使用されている方が圧倒的に多かったですが、AWS試験は受験料が若干高いので私はなるべく出費を抑えたいと思い、基本的に無料で勉強できるサイトを使用しています。

※SOA-C02に限らずAWS試験対策としてUdemyを使用されている方が多いので、どの資料で勉強するか迷われている方は選んでみても良いと思います。

模擬問題を解いて足りない知識があれば、必要に応じて検索して調べたり、Black Belt見て確認するといった感じで勉強しました。
試験ラボ対策は普段仕事でAWSコンソール触ってるので、よほど変な問題が出なければ大丈夫だろうとタカをくくっていました。

# 試験結果
678点で不合格でした。おそらく４問程度足りなかったと思われます。
試験中に問題を解いてて今まで見たような問題がなく、あまり手応えがない中で進めていたので、正直微妙だろうなと思っていました。
VPCトラフィックログの見方を問われる問題も出て、VPCトラフィックログ見たことなかったので全然わからなかった。。。
[VPCトラフィックログの見方](https://faq2.bit-drive.ne.jp/support/traina-faq/result/21-2362?ds=&receptionId=4672&receptionNum=1607896398459&page=1&inquiryWord=&categoryPath=138&selectedDataSourceId=&sort=_score&order=desc&attachedFile=false)

試験結果の内訳では１～５の分野でまだまだ知識が足りないことが伺えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262522/3dc3af89-c0fb-834e-182a-01e827ebf10b.png)

足りないところは試験ガイドをもとに再度勉強する必要がありますね。
[AWS Certified SysOps Administrator – Associate (SOA-C02) 試験ガイド](https://d1.awsstatic.com/ja_JP/training-and-certification/docs-sysops-associate/AWS-Certified-SysOps-Administrator-Associate_Exam-Guide_C02.pdf)

試験ラボでは２問それぞれ20分程度で回答できてよかったですが、出る問題によってはまったく触ったことのないサービスだったり、処理時間がかかるものがあると思われるため、１問あたり30分は見といた方が良いと思います。

# 終わりに
不合格の結果を受けて、やはり課金して対策するしかないか、、、と思っていたところ、本番の問題とかなり似ている問題があるサイトを発見しました。
ぶっちゃけ、このサイトで勉強していれば本番も受かっていたと思うほどの内容でしたが、若干日本語が怪しかったり、同じ問題が何回か出たりしてて色々怪しいですｗ

[無料Amazon認定試験問題集](https://www.jpnshiken.com/certification/Amazon.html#)

不合格だったので２週間ほど再受験ができませんが、さらに勉強して１月中にはリベンジを果たしたいと思います！

# Qiitaで参考になるページ
[AWS SysOps アドミニストレーター試験に合格したぞ！(SOA-C02)](https://qiita.com/Gomane2/items/7d331c0d37dd7e8d793d)

[AWS Certified SysOps Administrator の試験勉強して「へぇ〜」って思ったものを列挙してる記事](https://qiita.com/atsushi586/items/fed6d4d69c9bc69b87e4)

# 2022/02/05追記
再試験を受けて734点でギリギリ合格でした。
２度目の試験では選択問題は結構解けたものの、試験ラボの問題が壊滅的にダメでしたが、なんとか合格出来てよかったです。
次はDVAを取得したいと思います！
cloudfunctions から document id で firestore を where クエリする

```
const admin = require("firebase-admin");

const documentId = "VRqVLJyFGHVAIngtgP2Z";
const collection = admin.firestore().collection("sample");
const snapshot = await collection
      .where(admin.firestore.FieldPath.documentId(), "==", documentId)
      .get();
```
DeepstreamSDKインストールUbuntu18.04

# dGPU Setup for Ubuntu
次のコンポーネントインストールが必要です。ただし、必ず以下のバージョンでの組み合わせでありません。高い以下のバージョンでも交換性があります。

- Ubuntu 18.04
- GStreamer 1.14.3(1.14.5)
- NVIDIA driver 460.32(460.91.03)
- CUDA 11.1
- TensorRT 7.2.X

# 依存関係インストール
注意：一つpackageインストール完了したら、必ず以下のコマンドで関連packageを更新してください。
 `sudo apt update`
 `sudo apt upgrade`
## gstreamer
- 手順
https://docs.nvidia.com/metropolis/deepstream/dev-guide/text/DS_Quickstart.html#dgpu-setup-for-ubuntu

## NVIDIA driver
460.32インストールとPCが画面が表示できなくなります。

### 使用しているGPUの確認

    lspci | grep -i nvidia

### 現状入っているCUDA,nvidia-driverの確認

    dpkg -l | grep nvidia
    dpkg -l | grep cuda

### 現状入っているCUDA nvidiaドライバの削除（ない場合スキップ）

    sudo apt-get --purge remove nvidia-*
    sudo apt-get --purge remove cuda-*

### nvidia-driver のインストール
以下で推奨のドライバを確認

    ubuntu-drivers devices

インストール（nvidia-driver-460の場合) `460.91.03`がインストールされる

    sudo add-apt-repository ppa:graphics-drivers/ppa
    sudo apt update
    sudo apt install nvidia-driver-460
再起動

    sudo reboot

NVIDIA Driverのバージョンと対応CUDAバージョン確認

    nvidia-smi

https://qiita.com/porizou1/items/74d8264d6381ee2941bd

## CUDAのインストール

### CUDAインストール
https://developer.nvidia.com/cuda-downloads?target_os=Linux&target_arch=x86_64&Distribution=Ubuntu

### CUDA11.1インストール
現在NVIDIA Driver対応しているCUDAをremoveしてからCUDA11.1インストールすることが必要です。（もしくは同時存在、方法調査中）

CUDAアンインストール [`*`]はバージョン指定

    sudo apt-get --purge remove cuda-*

CUDA11.1インストールは上記と同じです。

インストール後の確認
    
    sudo apt list | grep cuda

`cuda11.1`の後ろに`now`が付いていることは、11.1がインストールされました。

## TensorRTのインストール

手順はDeepstream SDK サイト

## librdkafka インストール
### 依存インストール

git

    sudo apt install git
    sudo apt update
    sudo apt upgrade

python

    sudo apt install pyhton
    sudo apt update
    sudo apt upgrade

手順はDeepstream SDK サイト

# Install the DeepStream SDK

手順はDeepstream SDK サイト
https://docs.nvidia.com/metropolis/deepstream/dev-guide/text/DS_Quickstart.html

## 確認
### deepstream関連バージョン確認
cudaruntimeのバージョン確認が11.1になっていること

    deepstream-app --version-all

### deepstreamappサンプル

    deepstream-app -c /opt/nvidia/deepstream/deepstream-5.1/samples/configs/deepstream-app/source4_1080p_dec_infer-resnet_tracker_sgie_tiled_display_int8.txt

### gstreamerサンプル
sample.jpg自分で準備

    gst-launch-1.0 filesrc location=sample.jpg ! jpegdec ! imagefreeze ! autovideosink
VRChatのワールドの不具合個人的備忘録

個人的な備忘録です。
文章を書くのに慣れていません。読みづらかったりするかもしれません。
Qiitaの書式を理解していないため装飾等がほぼないです。徐々に更新していくつもりです。
あくまで自分もしくは身内で発生した不具合とそのとき見つけた解決法を載せていくだけなので、情報が欠けていたり誤っていたりすることがあります。
記事は随時更新していくつもりです。



症状：
アップロードボタンが押せない。
2回目以降のアップロードなのにVRCSDKの表示が初めてアップロードする表示になる。

エラー：
NullReferenceException: Object reference not set to an instance of an objectVRCSDK2.RuntimeWorldCreation.Start () (at Assets/VRCSDK/Dependencies/VRChat/Scripts/RuntimeWorldCreation.cs:82)

原因：
ワールドのシーンにPipelineManagerコンポーネントが複数ある。

解決法：
PipelineManagerコンポーネントをシーンの中に一つだけにする。（VRCworld以外にはPipelineManagerが存在しないようにする。）

補足：
ワールド用のアセットを複数インポートしたり、アバターを設置物として設置したときは注意。
22番ポートでGitHubにssh接続するとtimeoutになる原因と対策

# 結論

- 原因: 使うネットワークが変わった
- 対策: ssh諦めてhttpsで接続した

# 事象

- githubにssh接続しようとしたが、timeoutエラーとなり接続できなくなった

# 前提

- 前日まではssh接続できていた
- ssh keyまわりは触ってない
- **作業場所が変わった**
    - 作業場所の変更、つまり使うネットワークが変わったことが今回の問題の原因だった

# 調査

## ログ確認

```
ssh -vvv git@github
OpenSSH_8.1p1, LibreSSL 2.7.3
debug1: Reading configuration data /Users/hogehoge/.ssh/config
debug1: /Users/hogehoge/.ssh/config line 15: Applying options for github
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: /etc/ssh/ssh_config line 47: Applying options for *
debug1: Connecting to github.com port 22.
ssh: connect to host github.com port 22: Operation timed out
```

timeout以外の情報得られず

## 情報収集

どうやら443番ポートを使ってssh接続する手段もあるらしい

https://qiita.com/yuikoito/items/672cd9e2c62a5d897b72

https://docs.github.com/en/authentication/troubleshooting-ssh/using-ssh-over-the-https-port

> GitHub Enterprise Server users: Accessing GitHub Enterprise Server via SSH over the HTTPS port is currently not supported.

と記載あり、Enterprise Server userに当てはまらなかったが、
`kex_exchange_identification: banner line contains invalid characters`
のエラーになり上手くいかず
（こちら解決すればsshのままでもいけた可能性あり）

## ポート開放確認

そもそも使用中のWi-Fiでport22が使えるか確認

下記のサイトから確認できる

https://canyouseeme.org/

`Error: I could not see your service on 103.5.140.187 on port (22)`と出れば、使えない

https://www.wikihow.jp/%E3%83%9D%E3%83%BC%E3%83%88%E3%81%8C%E9%96%8B%E3%81%84%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B

（他には`netstat`コマンドなど用いて確認する方法もありそう）

# 対処方法

sshでの接続を諦めて、httpsで接続した

`Settings` > `Developer settings` > `Personal access tokens`から`Generate new token`

アクセス権限は適宜付与してトークン作成
（今回は、Repoのみ全て許可）

一度しか表示されないので、忘れずにコピーしておく

remote-urlを変更

```
$ git remote set-url origin https://github.com/hogehoge/fugafuga.git
```

適当にfetchコマンド打つと認証情報聞かれるので、githubのユーザー名と、先ほど作成したトークンを入力

```
$ git fetch
Username for 'https://github.com': hogehoge
Password for 'https://hogehoge@github.com':
```

## ssh使える状況になったら戻すこと

sshが使える状況になったら、httpsからsshに変更したほうが良いので

```
$ git remote set-url origin git@github:[リモートリポジトリ名].git
```

configファイルの`HostName`に合わせて`github`部分は適宜読み替え
【Rails】rails routesの見方

## rails routesの見方

現在のルーティングを確認する際にroutes.rbフォルダを見に行く方法もありますが、以下のコマンドでも確認できます。

```
$ rails routes
```
上記コードを入力すると下のような画面がターミナル上で表示されます。

![スクリーンショット 2022-01-15 11.53.56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581028/3a0c37c0-bfe9-fad1-8858-d64cb7ba51d5.jpeg)

Prefix：URLのニックネームです。（routes.rb内で「as:ニックネーム」で設定したものがここに表示されます）

Verb：HTTPメソッドです。

URI：URL（例 /books）
※(.:format)というのは、/books.htmlとしてもいいよという意味です。htmlがフォーマットです。

Controller#Action：コントローラーとアクションを意味しています。
【Javascript/Typescript】fetch APIでmultipart/form-dataを送信したい(備忘録)

# 結論
Content-Typeに値を設定しない & FormDataオブジェクトをbodyにセット
FormDataオブジェクトをbodyにセットすれば、fetch APIが予期に計らって、HTTPリクエストを作ってくれるようです。

## サンプルコード
※ TSで書いてるので型まわりのコードも含まれています。

```typescript:
type contentProps = {
	title: string,
	description: string,
	image: Blob | null
}

const CreateContent = async (props: contentProps) => {

	const headers = new Headers({
      // 略
	})

	const body = new FormData()
	body.append("title", props.title)
	body.append("description", props.description)
	if (props.image != null) {
		body.append("image", props.image, 'image.jpg')
	}

	const data: RequestInit = {
		method: 'POST',
		headers: headers,
		body: body
	}

	const response = await fetch('http://localhost:8080/contents', data)
	.then((response) => {return (response.json()).then((data) => {return data})}).catch((error) => {
		console.log(error)
	})
	return response
}

```

# 備考:NGだったパターン
- Content-Typeにmultipart/form-dataをセット。
- Content-Typeにmultipart/form-data; boundary=-------------------[ランダム半角英数列]
- [bodyからContent-Typeを削除する(StackOverflow)](https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post)

2つ目bodyのセットの仕方によってはうまくいくかもしれない。
3つめのContent-Type削除はおそらく特殊ケース。

# 参考
#### どんぴしゃだったStackOverflowの質問
https://stackoverflow.com/questions/35192841/how-do-i-post-with-multipart-form-data-using-fetch

#### FormData#append (MDN)
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
Gremlin ConsoleをEC2で動かす

## まとめ
グラフデータベースを仕事で使う可能性が出てきたので、まずは触ってみた記録。環境としてはEC2上でTinkerPopのGremlin Consoleを動かした。

## つまづいた点
TinkerPopのチュートリアルの通りにやってみたら、Javaが見つからないとのエラーが出たので、何も考えずに以下のコマンドでJavaを入れてみたらエラーが出てコンソールが立ち上がらなかった。

```linux
sudo yum install java
wget https://dlcdn.apache.org/tinkerpop/3.5.2/apache-tinkerpop-gremlin-console-3.5.2-bin.zip
unzip apache-tinkerpop-gremlin-console-3.5.2-bin.zip
cd apache-tinkerpop-gremlin-console-3.5.2
bin/gremlin.sh
```
調べてみたら、以下のドキュメントに当たったので、これに沿ってJavaのバージョンを変えたら、うまく立ち上がった。CA証明書はスキップしたけど動いたので良しとする。

https://docs.aws.amazon.com/ja_jp/neptune/latest/userguide/access-graph-gremlin-console.html

```linux
sudo yum install java-1.8.0-devel
sudo /usr/sbin/alternatives --config java
# ここで新たに入れたバージョンを選ぶ
bin/gremlin.sh
```




## 参考情報

https://www.slideshare.net/AmazonWebServicesJapan/20200714-aws-black-belt-online-seminar-amazon-neptune

* 58ページにTinkerPopのワークショップが紹介されている。

https://tinkerpop.apache.org/docs/current/tutorials/getting-started/
angular勉強時に調べた記事をとりあえず挙げてくよ

勝手に拾ってごめんなさい。
でも必要なんです。

https://webman-japan.com/angular-intro/#ngmodule

https://qiita.com/endam/items/7c7422e9dd821c7f7ff4

https://qiita.com/kasaharu/items/d99052f75d308c92f2f7

serviceかstore直接か
https://blog.deltabox.site/post/2019/01/angular_tutorial_with_state/

https://qiita.com/Yamamoto0525/items/e66804ba742bceeb3e38

関係ないけどわからないことメモしてかないとやってられない
・typescriptのenumの使い方
・型定義するときにnull|undefinedを入れるタイミング
・featureってなんぞ
⇒回答になるかな？
https://qiita.com/puku0x/items/0a8e7224761dc549bd06
・ジェネリクス学ばないとな
・featureの使い勝手がわからん



<h3>ngrxの書き方いろいろありすぎ（怒）
ngrxから勉強し始めた人がreact redux勉強してなんか意味あるんすか？（怒）
白黒画像をカラーにしてくれるAPI DeOldify

#かんたんに使える自動着色
![ダウンロード (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/7f48cded-de19-71df-5346-cf7e1dd707aa.png)
#昔の白黒写真をカラーに
昔の白黒写真をカラーにした動画などをみたことがないだろうか？
あれをかんたんにつかえたら良くないですか？

#DeOldify

かんたんに自動着色が行えるAPIである。

#使い方

これだけで実行できる。

```python
colorizer = get_image_colorizer(artistic=False)
image_path = colorizer.plot_transformed_image_from_url(url=source_url, render_factor=35, compare=True, watermarked=False)
```

https://colab.research.google.com/github/jantic/DeOldify/blob/master/ImageColorizerColabStable.ipynb#scrollTo=hlQeXBj-lUu8

Videoもできる。
![Jan-15-2022 12-13-35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/f48c5f94-f372-7b94-523d-b0f914a3138f.gif)


🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
【 Rocky Linux 8】一般ユーザーにsudoアクセス権を付与する方法

# はじめに

一般ユーザーにsudoで管理コマンドを使わせたかった備忘録。

# 動作環境
- Rocky Linux release 8.5 (Green Obsidian)

# sudoとは

一般ユーザーで管理コマンド実行するためのコマンド。sudoアクセス権が付与されている必要がある。

#手順

testuserへの付与手順。

## 1. rootユーザーでログイン

```shell-session
$ su -
```

## 2. sudo コマンドで適用されるポリシーの定義確認と変更

### /etc/sudoers ファイルを開く

```shell-session
# visudo
```

### wheel 管理グループに適用するポリシーを指定する

sudo時、rootユーザーのパスワードを要求する場合、下をコメントアウト（デフォルト）。

```bash
## Allows people in group wheel to run all commands
%wheel  ALL=(ALL)       ALL

## Same thing without a password
# %wheel        ALL=(ALL)       NOPASSWD: ALL
```

sudo時、rootユーザーのパスワードを要求しない場合、上をコメントアウト。

```bash
## Allows people in group wheel to run all commands
# %wheel  ALL=(ALL)       ALL

## Same thing without a password
%wheel        ALL=(ALL)       NOPASSWD: ALL
```

### /etc/sudoers ファイルを閉じる

## 3. 一般ユーザーをwheel管理グループに追加

```shell-session
 # usermod --append -G wheel testuser
```

## 4. sudoアクセス権が付与されたことの確認

### testuserのグループを確認する

groupsにwheelが付与されていれば成功。

```shell-session
# id testuser
uid=1000(testuser) gid=1000(testuser) groups=1000(testuser),10(wheel)
```

### sudoコマンドが使えることを確認する

$ から # に代われば成功。
下の例はパスワードを要求しない場合。

```shell-session
[testuser@XXXXXXXX ~]$ sudo su -
Last login: Sat Jan 15 11:28:41 JST 2022 on pts/0
[root@XXXXXXXX ~]#
```

# 参考

- [Product Documentation for Red Hat Enterprise Linux 8 24.2. ユーザーへの sudo アクセス権限の付与](https://access.redhat.com/documentation/ja-jp/red_hat_enterprise_linux/8/html/configuring_basic_system_settings/granting-sudo-access-to-a-user_managing-sudo-access)
- man sudo
- [CentOS7で一般ユーザがsudoを使えるようにする](https://qiita.com/polarbear08/items/c07fc1316a94c2ef49e8)
【ターミナル操作】エイリアスを使って作業スピード爆上げ

# エイリアスとは？
> 偽名、別名、通称などの意味を持つ英単語。ITの分野では、ある対象や実体を、複数の異なるシンボルや識別子で同じように参照する仕組みを指す。別名。

簡単に言うと、ターミナル操作に使うコマンドを自分で打ちやすいようにカスタマイズして実行出来るよ、ということ。


## （例） "hello world!!"と出力する場合
**通常**

```
echo "hello world!!"
```

**エイリアス使用**

```
hw
```

`hello`と`world`の1文字目を組み合わせて独自のコマンドにしてみました。出力結果はどちらも同じです。
こんな風に短く出来ちゃう。エイリアスを使う以外の選択肢が無い。

# エイリアスの設定方法
## 1. .bash_profileと.bashrcを作成する
ホームディレクトリ下にファイルを作成します。

```
cd ~
touch .bash_profile .bashrc
```

「.bash_profileと.bashrcって何？」とか「2つがどう違うのかよく分からない」って方は、非常に分かりやすく内容をまとめてくれている↓の記事を読むのがオススメです。

https://qiita.com/shyamahira/items/260862743e4c9794b5d2

## 2. .bash_profileを編集する
ファイルを開いて

```
vi .bash_profile
```

以下を記述

```vim
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

ターミナルにログインした際に、`.bashrc`を読み込むようにしてあります。

ファイルを開いて保存するまではvimコマンドを使用します。
今回の操作で使うのは以下のみ。

```vim
#ファイルを開く
vi [ファイル名]

#編集モードにする
i

#編集モードを終了する
(escボタン)

#編集内容を保存して終了する
:wq
```

他のvimコマンドも確認しておきたいよーって方は↓の記事に目を通すといいかも。

https://qiita.com/hide/items/5bfe5b322872c61a6896

## 3. .bashrcを編集する

ファイルを開いて

```
vi .bashrc
```

あとは下記のような形式で自由にエイリアスの設定を記述して保存するだけ。何個でも作れる。

```vim
alias [独自コマンド]= "実行コマンド"
```

冒頭で先述した例だと、下記のように設定する。

``` vim
alias hw="echo hello world!!"
```

## 4. 設定を反映する

```
source ~/.bash_profile
```
`source`は、ファイル内に書かれたコマンドを現在のシェルで実行するコマンドです。
`.bash_profile`内に`.bashrc`を読み込む記述をしたので、それが実行されエイリアスの設定が反映されます。

# 便利なエイリアス設定の例
参考までに、私が実際に設定しているエイリアスの一部をご紹介。
エイリアスの使用に慣れると、ターミナル操作が爆速になります。

## Git操作系

```vim
alias ga="git add"
alias gl="git log"
alias gb="git branch"
alias gf="git fetch"
alias gst="git status"
alias gco="git checkout"
alias gcm="git commit -m"
alias grh="git reset --hard"
alias grs="git reset --soft"
alias gpso="git push origin"
alias gplo="git pull origin"
```

## docker操作系

```vim
alias dl="docker logs"
alias dps="docker ps"
alias dst="docker start"
alias dsp="docker stop"
alias dcex="docker-compose exec"
```
## ディレクトリ移動系

```vim
alias .="cd .."
alias ..="cd ../.."
alias pjt="cd ~/Desktop/work/my_project"
```

## その他

```vim
alias ns="npm start"
alias pa="php artisan"
```

# まとめ
**『ツールの操作スピードを上げることが即、生産性の向上に直結する』**　（下記書籍より一部抜粋）

https://www.amazon.co.jp/%E3%82%B3%E3%83%B3%E3%82%B5%E3%83%AB%E4%B8%80%E5%B9%B4%E7%9B%AE%E3%81%8C%E5%AD%A6%E3%81%B6%E3%81%93%E3%81%A8-%E5%A4%A7%E7%9F%B3-%E5%93%B2%E4%B9%8B/dp/4799315323
Grasshopper で Shift JIS 形式のテキストデータを読み込む

#はじめに
Grasshopper の ReadFileコンポーネント でCSVデータを読み込んだら文字化けしてしまった。Shift JIS のテキストデータはエンコード指定が必要と教えていただいたのでやってみた。（kanano さんありがとうございます！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/3fcdfab1-d419-668a-0eb6-effdb3e8efb1.png)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ReadFileコンポーネントはutf-8で書かれているみたいですね！shift-jisで読むにはスクリプトでエンコード指定する必要がありそうです。</p>&mdash; kanano (@_kkanano) <a href="https://twitter.com/_kkanano/status/1482002231612559361?ref_src=twsrc%5Etfw">January 14, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#Pythonで文字コードをゴニョゴニョ
GhPython Script コンポーネントのインプットを FileName アウトプットを txt に変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/32421e5c-ef79-c0fd-d6a1-47918f4c67a3.png)

「Python 文字コード」で検索すると山ほど情報が出てくるんだけど、GhPythonではうまく動かないものが多くいが意外と苦労した。最終的に成功したのはこちら

```python
txt = []
with open(FileName) as f:
    for line in f:
        txt.append(unicode(line, 'shift-jis'))
```

#変換成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/2c2f593f-be91-7660-d251-d5cba1d93aec.png)

#C#でもやってみた
このサイトを参考にC# Script コンポーネントでも作ってみた
[Shift_Jisで保存されたファイルを読み込んでUTF-8に変換する](https://typea.info/tips/wiki.cgi?page=C%23+%CA%B8%BB%FA%A5%B3%A1%BC%A5%C9%CA%D1%B4%B9#p1)

###using ディレクティブに追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/099efc21-8b22-84f4-e6aa-8aa483f3bae9.png)

```C#
using System.Text;
using System.IO;
```
###RunScriptの中に追記

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/243176ae-679c-145c-a9f4-e2f9870c5bcd.png)

```C#
    Encoding srcEncoding = Encoding.GetEncoding("shift_jis");
    Encoding dstEncoding = Encoding.UTF8;
    using (var reader = new StreamReader(FileName, srcEncoding))
    {
      string line = null;
      var strList = new List<string>();
      while ((line = reader.ReadLine()) != null)
      {
        String convertedLine =
          dstEncoding.GetString(
          System.Text.Encoding.Convert(
          srcEncoding,
          dstEncoding,
          srcEncoding.GetBytes(line)));

        strList.Add(convertedLine);
      }
      txt = strList;
    }

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433170/f217a6b5-f4e6-5a3c-e32b-f42b0bc29855.png)
RaspberryPi HQカメラ同期信号

# HQカメラ同期信号について

注意：この記事は、Raspberry Pi OS Buster版での設定方法です。Bullseye版では設定が異なるようですが、まだ確認できていません。カメラ周りもlibcameraに移行しているのでまだ手が回っていないのでしょうかね。

Raspberry Pi フォーラムにHQカメラの外部同期信号についての投稿がありました。
HQカメラはテスト端子から同期信号とストロボ信号を取り出すことができます。
同期信号を使うと、複数台のRaspberryPiに接続したHQカメラの同期動作が可能になります。(RealSenseの同期動作とおなじようなイメージです。)
また、カメラのタイミングに合わせて照明をストロボ発光ができるようになります。
このスレッドを参考にして動作を確認してみました。

["HQ Camera external sync signals support added"](https://www.raspberrypi.org/forums/viewtopic.php?f=43&t=281913)


<img width="360" alt="hq_camera_rear" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331423/541e6a91-83ec-5f25-b499-6d98339dc802.jpeg">

HQカメラ背面の端子、右から

|端子|信号|
|:---|:---|
|GND| GND|
|GP0| HSYNC(水平同期)|
|FSTROBE|STROBE|
|XVS|VSYNC(垂直同期)|

注：カメラの信号は1.8V振幅のロジック信号です。RaspberryPiのGPIOなど3.3V系の端子に接続する場合は信号レベルの変換が必要です。

# 設定

CMOSセンサから同期信号を出力させるためには/boot/config.txtに以下の設定を追加します。

```
# HQ camera sync signal settings
imx477_hv_sync_enable=1
imx477_hsync_polarity=1
imx477_vsync_polarity=1

# Pulse width, proportional to the pixel clock frequency.
# Valid values are 0 (smallest width) to 7 (largest width)
imx477_hsync_width=6
imx477_vsync_width=7

# HQ camera strobe signal settings
imx477_fstrobe_enable=1

# Set to 0 for single strobe pulse, or 1 for continuous pulses every frame.
imx477_fstrobe_cont_trig=1

# Number of lines to delay before triggering the pulse.
# Set this to the frame height if you want all lines to be exposing for the flash strobe.
imx477_fstrobe_delay=5

# Set to 1 to only trigger the pulse in stills capture mode.
imx477_fstrobe_stills_only=0

# Width of the pulse, in units of the INCLK period.
imx477_fstrobe_width=10000
```

HQカメラを起動すると、各端子にこのような波形が観測されます。
<img width="600" alt="hq_camera_sync_signals" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331423/ad493fc0-1a37-6980-0dff-4f65c78a3742.png">

#使い方

注意：これらの機能は確認が完了しているものではありませんので、参考情報です。

## VSYNC
出力と入力に設定ができます。
入力に設定した場合は外部同期信号でカメラの露光タイミングが制御できます。
VSYNCを入力に設定するには/boot/config.txtに以下の行を追加します。

```
imx477_trigger_mode=2
```

VSYNCを出力にする場合は以下の通りです。

```
imx477_trigger_mode=1
```

マスターになるHQカメラはVSYNCを出力に、スレーブになるHQカメラはVSYNCを入力に設定してそれぞれを接続します。
スレーブカメラを先に起動し、マスターカメラを最後に起動します。
注意：カメラの信号をそのままケーブルで長距離伝送することはできないと思います。

#STROBE

STROBE信号は、フレームに同期して出力されます。VSYNCからのタイミングとパルス幅は調整できます。
この信号はストロボ発光に使用できます。
注：タイミングとパルス幅は使用状況により調整が必要です。

#RspberryPi 4B + HQカメラ一体型ケース

カメラの信号端子をコンタクトピンで接続できる、RaspberryPi 4BとHQカメラを一体にしたケースを試作しました。
![s-HQ_camera_front.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331423/8aac4ee1-93e5-df92-3822-806ff17d336d.jpeg)
![s-HQ_camere_rear.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331423/b3c2838a-b932-7211-3e5f-2a9912dd08be.jpeg)

以下の機能を持たせています。

- VYSNC信号: 長距離伝送できるようにRS485レベルでの入出力(RealsenseのSYNC延長基板と類似)
- STROBE信号: オープンコレクタ出力
Vue.jsの仕組み

# 概要
ここではVue.jsの基本的な使い方について記載します。  

# 基本コード  
以下のコードを例に挙げて説明していきます。  

```html
<!DOCTYPE html>
<html>
    <head>
        <title>My First Vue App</title>
        <script src="https://unpkg.com/vue"></script> 　  ----- ①
    </head>
    <body>
        <h1>Vue.js</h1>
        <div id="app">
            {{ text }}                                   ----- ②
        </div>

        <script>                                         ----- ③
            var app = new Vue({
                el: '#app',
                data: {
                    text: 'Vue Test'
                }
            })
        </script>
    </body>
</html>
```

* Vue.jsに関係している部分はコードの①,②,③の部分になります。  
 * ①ではVue.jsを読み込んでいます。  
 * ②で変数に入れられた文字列の表示を行います。
 * ③ではVueオブジェクトの定義をしています。
* `el:`というプロパティでVueオブジェクトの対象となるものを指定します。

# まとめ
Vue.jsはhtmlに埋め込むことで非同期処理を実現できます。
今回はhtmlファイルに書き込むような形でしたが、複雑な処理の場合はjs用にファイルを切り分けて実装しても良いと思います。
【Django】SNS app作成手順02-サインアップページ作成1

----------snsapp-urls.py----------

from xml.etree.ElementInclude import include
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
]

⏬


from xml.etree.ElementInclude import include
from django.contrib import admin
from django.urls import path

from .views import signupfanc

urlpatterns = [
    path('signup/', sigunupfanc),
]




—————snsapp-views.py—————

def signupfanc(request):
    return render(request,'signup.html',{})


—————snsフォルダ内にtemplates作成----------
—————templates内にsignup.htmml作成----------


—————サーバー立ち上げ----------
python3 manage.py runserver
JPEG画像からwebm動画を生成する。

# 1. この記事は

Raspberry Pi上でにて静止画(jpegファイル)から動画ファイル(webm)を作成する方法を説明します。


# 2. 方法

Raspberry Pi上にffmpegがインストールされているものとします。

```python:example
ffmpeg -loop 1 -y -i n225.jpg -vcodec libvpx -pix_fmt yuv420p -t 1 -r 1 n225.webm
```

構文
<b>-loop 1 -i n225.jpg</b> 
-loop 1のところでn225.jpgという入力を延々とループすることを意味します。また、-iオプションで入力画像の名前を設定します。

<b>-y</b>
同名の出力ファイルがあった場合上書きする。 

<b>vcodec libvpx</b>
動画の出力形式を指定する。

<b>-t 1</b>
-tオプションで出力する動画の時間を示します。3を設定しているので3秒の動画になります。

<b>-r 1</b>
-rオプションでfpsを示します。1なので1fpsの動画で出力されます。

<b>n225.webm</b> 
出力ファイル名(webm形式)


-----

N225_01.png,N225_02.png,N225_03.png,N225_04.png の4枚について、1枚1秒表示させる動画を作成する。(動画の長さは4秒になる)

webm形式の場合
```python:example
 ffmpeg -y -r 1 -i N225_%02d.png -vcodec libvpx -pix_fmt yuv420p  -crf 18 -t 4  test.webm
```

mp4形式の場合(mp4形式のほうがwebmよりも動画はきれい)
```python:example
ffmpeg -y -r 1 -i myslide_%02d.jpg -vcodec libx264 -pix_fmt yuv420p  -crf 18 -t 4  myslide.mp4
```
【php MyAdmin】 「エラー　SQLクエリ：コピー」が表示された

今回、初めての投稿になります。何卒宜しくお願い致します。

現在XAMMPを使ってPHPを勉強しているのですが、パソコンの不具合が生じたので、新しいパソコンに移動することになりました。

そこで新しいパソコンにデータを移動したときに下記のようなエラーが表示されました。
![その７.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/43b153d2-c992-47a4-e5a3-021ad98c62c4.png)

##エラー
__SQLクエリ：コピー__
とのことです。

そこでもう一度phpmyadminのsqlデータを移動する方法をまとめてみました

__[PC環境]__
●　故障したPC　→　window10 64ビット
●　新しく入れるPC　→　window10 64ビット　（故障したPCとおなじものになります）



主な流れを書くと次の通りになります。
__１、　前のパソコンからSQLデータをエクスポートする__
__２、　新しいパソコンでXAMMPをインストールする__
__３、　新しいパソコンのphpmyAdminで新しいデータベースを作成する__
__４、　３で作成したデータベースに１のデータをインポートする__


では順番にやっていきましょう

###１、　前のパソコンからSQLデータをエクスポートする
⓵XAMMPからPHP myAdminを立ち上げて、移動したいデータベースを選択します。(今回は「todo」のデータを移動したいとします）
⓶データベースを選択したページに「エクスポート」という項目があるのでそこをクリックします
![その１.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/c549038a-6de6-9b3e-b43c-f1f368a98d64.png)


⓷右下の「実行」ボタンをクリックする。そうすると、データベース名のSQL（〇〇.sql）がダウンロードされます

![その２.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/29d33c13-3416-68c5-08a7-81232684124b.png)



###２、　新しいパソコンでXAMMPをインストールする
こちらに関しては今回省略します。「XAMMP　インストール」などで検索すれば出てくると思います

###３、　新しいパソコンのphpmyAdminで新しいデータベースを作成する
⓵新しいパソコンにてPHP myAdminを立ち上げます。
⓶１－⓷で出来上がったsqlのタイトル名で、データベースを作成します。（今回はtodoのデータベースを作成）
![その３.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/8faa7a79-f417-95b5-17e1-8a9d0f57fab0.png)

＊　データベースの作り方は画面左にある「新規作成」ボダンをクリックすると作成画面が出来上がります。


###４、　３で作成したデータベースに１のデータをインポートする
⓵３で作成したデータベースの画面から「インポート」のボタンをクリックし、インポート画面に移動します
![その４.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/fc00cda1-7ea1-f735-291a-5cd88501056b.png)

⓶インポート画面から「ファイルを選択する」のボタンをクリックして、１－⓷のsqlを選びます。
　右下にある「実行」のボタンをクリックすると終了です。

![その５.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/7500c22f-13e5-074c-f80b-3a5897cbdb1a.png)



無事にデータが移動されたらこんな感じに表示されます。
![その６.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1203654/ddc75a82-0349-00e4-a200-f2a01cfdc881.png)


なお、私の間違った原因は
__３、のデータベースを作成せずに、そのまま４の内容を実行してしまった__結果でした。

単純なことですが、いざやってみると抜けてしまった内容なので、今回はここにまとめておきます。


なお、私はプログラミング歴約１年の新人です。
もっと効率よい方法があればご意見いただければ幸いです。

今後ともよろしくお願いいたします
文字列を作るときに%でも作る方法を見つけたので備忘録

#目的
文字列を作るときに%でも作る方法を見つけたので備忘録
#感想
使うんかなぁ

#%q! !  シングルクオートで囲んだことになる
```ruby:%q!!
puts %q!Hello world! #=> Hello world
```

#%Q! !  ダブルクオートで囲んだことになる
```ruby:%Q!!
it = “this”
puts %q!#{it}Hello world! #=> this Hello world
```

#%! !  ダブルクオートで囲んだことになる
```ruby:%!!
it = “this”
puts %q!#{it}Hello world! #=> this Hello world
```

#参考
プロを目指す人のためのRuby入門書