OmniAICreator/Qiita-1.07M huggingface dataset:
BigQuery Tips メモ

# 積算和の計算の仕方

```SQL
SELECT order_id, SUM(price)
  OVER (
    ORDER BY prices
    ROWS BETWEEN UNBOUNDED PRECEDING AND CURRENT ROW
  ) AS total_prices
FROM orders
```

# 中央値（近似値）の出し方

```sql
SELECT APPROX_QUANTILES(x, 2)[OFFSET(1)] FROM UNNEST([2.2, 1, 11.5, 6.6, 8, 14, 250 , 1.5, 0.15]) x
```

[APPROX_QUANTILES](https://cloud.google.com/bigquery/docs/reference/standard-sql/approximate_aggregate_functions?hl=ja#approx_quantiles) を使う。`number は作成する変位値の数を表します。この関数は、number +1 個の要素からなる配列を返します。最初の要素は近似最小値であり、最後の要素は近似最大値です。` ということなので、2を指定して返却された配列の2つ目の要素が中央値の近似値となる。


# 全体件数に対するパーセンテージの出し方

```sql
SELECT
  fruit,
  COUNT(1) AS cnt,
  SUM(COUNT(1)) OVER() AS total_cnt,
  COUNT(1) / SUM(COUNT(1)) OVER() * 100 AS percentage
FROM
  UNNEST(['Apple', 'Grape', 'Apple', 'Orange', 'Banana', 'Apple', 'Orange', 'Orange', 'Orage', 'Apple', 'Grape']) AS fruit
GROUP BY
  fruit
```

# ビンの作り方
## 範囲が決まっているとき

RANGE_BUCKETを使う方法

```sql
SELECT
  num,
  (RANGE_BUCKET(num,
      GENERATE_ARRAY(0,100,10) ) -1) * 10 AS bins
FROM
  UNNEST([83, 9, 19, 39, 10, 45, 111, -1, -100, 0, 1]) AS num
ORDER BY
  num
```

ここでは、以下の条件でビンを作った場合
- ビンの幅は10
- 最小は、0。最大は、90
- RANGE_BUCKETの性質上、下の数値が0より小さい場合、-10になり、100より大きい場合100になるため、それらを範囲外として処理などする必要あり

## 範囲が決まっていないとき

FLOORで計算する方法

```sql
SELECT
  num,
  CAST(FLOOR(num / 10) * 10 AS INT64) as bins
FROM
  UNNEST([83, 9, 19, 39, 10, 45, 111, -1, -100, 0, 1]) AS num
ORDER BY
  num
```

ビンの幅を10とした場合

# 指定開始日から一定期間の日付連続値を作る
2000/1/1からスタートして、100日分作る場合。日によってデータが抜けるレコードがある場合などの日付のテンプレートに使ったり。

```sql
SELECT
  DATE_ADD("2000-01-01",INTERVAL i DAY)
FROM
  UNNEST(GENERATE_ARRAY(1,100,1)) AS i
```

# クエリのフォーマットを素早く行う
BigQueryのコンソール上でクエリを書いていると見づらくなって、ちょくちょく「フォーマット」して整えたくなるけど、ボタンからクリックするのはちょっと面倒。

ショートカットで　`command` + `shift` + `f` で行える。(Macのば場合)

# ちょっとしたサンプルデータの作り方

```sql
CREATE TABLE `tmp.users` AS 
SELECT * 
FROM UNNEST(ARRAY<STRUCT<id INT64, name STRING, age INT64>>
[(1, 'John', 35),
 (2,'Mike', 27),
 (3, 'Brian', 23),
 (4, 'Jack', 45),
 (5, 'Nick', 33)]) AS users
```
【Nuxt.js】のSSRモードの開発時の注意点（SSRとCSRの説明〜）

Nuxt.jsで開発していると、SSR（サーバーサイドレンダリング）なのか、CSR（クライアントサーバーレンダリング）なのかで、エラーになったり、ならなかったりと頭を悩まされることがありました。
今回はそのCSRとSSRのそれぞれの説明と、実際に体験したNuxt.jsの実装する際にハマった点とその時の対処法についてです。

# CSRとは
英語で表記するとClient Side Renderingであり、頭文字を取ったものがCSRであります。
クライアントサイドで、サーバーに持っている情報（DBのデータなど）を非同期で必要部分を取得して、画面描画を行います。
クライアントサイドで、レンダリングするため画面描画が早いです。
しかし、初回リクエスト時は描画に必要な情報が多いため、初回の描画が遅いといったデメリットもあります。

# SSRとは
英語で表記すると、Server Side Renderingであり、頭文字を取ってSSRであります。
サーバーはクライアントからリクエストが来たら、DBからデータ取得などの処理をして、それを元にHTMLを構築して、ブラウザに返して、画面は表示されます。
Nuxt.jsのSSRは、初回のリクエストは、サーバーサイドで上記の操作を行い、画面が描画されます。
画面遷移時は`<nuxt-link>`での遷移ならCSRとなります。
そのため、先ほどの「CSRとは」で説明しました、クライアント側でまっさらな状態からDOMを構築するよりも画面描画が速くなります。
CSRの欠点である、「初回描画が遅い」を解消してくれる機能となります。
また、サーバーからHTMLが返されてくるため、検索エンジンのクローラが解析可能であり、SEOが向上します。


# Nuxt.jsのSSR（universal）モードの注意点と対処法
SSRを使えば、初回描画速度、SEO対策とメリットが大きいですが、もちろんデメリットもあります。
そのデメリットとして、よく言われるのが**実装が難しい**です。
CSRの時、SSRの時と処理を分けてコーディングをしないと、画面遷移（CSR）では問題なく画面が描画されるが、同じ画面を初回リクエスト（SSR）時にはエラーとなって、画面描画できないという場面がありえます。

遭遇したエラーの例が下記のようなコードの時でした。

```js
created() {
  this.hoge = sessionStorage.fuga
}
```
画面で表示してみると、CSRの時は正常に表示されるのですが、同じ画面をリロードしてみると、**「sessionStorage is not defined」**と言われ、SSRの時はエラーとなってしまいました。
いろいろ調べてみると、createdは、SSR、CSR両方とも動作します。
SSRの場合は、この`sessionStorage`が使用できないため、エラーとなっていました。
他にも、`localStorage`、`window`、`document`も、同様にSSRの場合はエラーとなります。

#### 対応策
この時の対応方法としては、下記のようにしました。

```js
created() {
  if (process.browser) {
    this.hoge = sessionStorage.fuga
  }
}
```
条件分を追加し、CSRの時なら、処理するといった形で対応できました。
CSRの時は動作するけど、SSRの時に**「XXX is not defined」**というエラーとなる場合は、SSRでは動作しないコードが含まれていないか、疑ってみると良いです。

# まとめ
CSR、SSRの説明と、Nuxt.jsのSSRモードの開発でCSR、SSRで引っかかった点と対応策について書いてきました。

**・CSR**
遷移前の画面からの差分のみを更新するため、画面遷移時の画面描画が速い。
しかし、初回画面描画は、一から画面情報をクライアント側で生成となるため、遅い。

**・SSR**
サーバー側でHTMLを構築したものをクライアントに返し、クライアントは受け取ったHTMLを画面上に表示する。
Nuxt.jsのSSRモードは、画面描画時はSSRで描画し、画面遷移はCSR。
そのため、CSRのデメリットである初回画面描画を解消できる。また、SRO対策にもなる。
しかし、実装難易度が高い。

**・Nuxt.jsのSSRモードの実装時の注意点と対応策**
画面をリロード（SSR）の時に**「XXX is not defined」**となる場合は、created内にSSRでは使用できないオブジェクトを使用している可能性あり。（例.window、document、localStorage、sessionStorageなど）
`if (process.browser) `で、CSRの場合（true）、SSRの場合（false）と条件分岐させて対処。

実装する時に心掛けていることとして、まずはCSRで動作することを確認してから、実装した画面をリロードして、SSRの場合でもエラーとならないことを確認するようにしています。
以上です。
郵便番号ハイフンあり、なしどちらでも補完できるように対応（PHP）

Webページで入力した郵便番号をDBに保存する場合の備忘録　※PHPの場合
ハイフンあり、なしどちらでも補完できるように対応

```
// 調査用文字列としてハイフンを変数に入れる
$pattern = '-';

// 入力文字列（郵便番号）にハイフンが含まれているか
$pos = strpos($p_data['inZipCode'], $pattern);

// ハイフンが無かったらハイフンを挿入する場合
if ($pos === false) {
    $chgZipCode = substr_replace($p_data['inZipCode'], $pattern, 3, 0);
// ハイフンがあったらハイフンを削除する場合
} else {
    $chgZipCode = str_replace($pattern, '', $p_data['inZipCode']);
}
```

SQL検索時に入力された値と変換された値をor検索すればOK

上記のコードをそのまま使ってうまくいかない！というのはナシね。
参考にする場合はちゃんと読み解いてください。
AWS CLIでWAFのCloudWatchメトリクスを取得するときにはまったはなし

## はじめに
<b> ■ やりたかったこと。</b> 
Cloudwatchにアラームを設定して、アラーム状態になったときにSNSを使って通知がいくようにしたい => <b>WAFのCloudWatchメトリクスの値をとらないと。</b> 

ということでaws cliでwafのメトリクスを取ってこようとしたのですが、なかなかうまくいかなくて半日費やしたので解決方法をまとめました。

## 失敗したやり方

▼ コマンド

```
root@xxxxxxx:/home# aws cloudwatch get-metric-statistics \
 --namespace AWS/WAFV2 \
 --metric-name CountedRequests \
 --start-time 2020-08-29T23:40:00 \
 --end-time 2020-08-31T10:00:00 \
 --period 300 \
 --statistics Sum \
 --dimensions Name=Rule,Value=Allow-Env-IP Name=WebACL,Value=env-create-acl
```
▼ 出力結果 

```
{
    "Label": "CountedRequests",
    "Datapoints": []
}
```
色々試してみたけれどDatapointsが何をしても空になってしまいます。

## 解決方法 

上手くいかなかったので、ぽちぽちアラームを作っていって何が必要なのか確認しました。
そして、アラーム状態にして飛んできたメールがこちら。

```
Alarm Details:
- Name:                       testtest
- Description:                
- State Change:               INSUFFICIENT_DATA -> ALARM
- Reason for State Change:    Threshold Crossed: 1 out of the last 1 datapoints [1.0 (31/08/20 04:39:00)] was greater than or equal to the threshold (1.0) (minimum 1 datapoint for OK -> ALARM transition).
- Timestamp:                  Monday 31 August, 2020 04:40:47 UTC
- AWS Account:                000000000000
- Alarm Arn:                  arn:aws:cloudwatch:ap-northeast-1:000000000000:alarm:testtest

Threshold:
- The alarm is in the ALARM state when the metric is GreaterThanOrEqualToThreshold 1.0 for 60 seconds. 

Monitored Metric:
- MetricNamespace:                     AWS/WAFV2
- MetricName:                          CountedRequests
- Dimensions:                          [WebACL = env-create-acl] [Region = ap-northeast-1] [Rule = Allow-Env-IP]
- Period:                              60 seconds
- Statistic:                           Sum
- Unit:                                not specified
- TreatMissingData:                    missing


State Change Actions:
- OK: 
- ALARM: [arn:aws:sns:ap-northeast-1:000000000000:snstopic]
- INSUFFICIENT_DATA: 

```


んんん、これが怪しい気がしてきたぞ。
`Dimensions:[WebACL = env-create-acl] [Region = ap-northeast-1] [Rule = Allow-Env-IP]`



そして、`--dimensions`に`Region`を追加してみたコマンドがこちら。

▼ コマンド

```
root@xxxxxxx:/home# aws cloudwatch get-metric-statistics \
 --namespace AWS/WAFV2 \
 --metric-name CountedRequests \
 --start-time 2020-08-29T23:40:00 \
 --end-time 2020-08-31T10:00:00 \
 --period 300 \
 --statistics Sum \
 --dimensions Name=Rule,Value=Allow-Env-IP Name=WebACL,Value=env-create-acl Name=Region,Value=ap-northeast-1
```

▼ 出力結果 

```
{
    "Label": "CountedRequests",
    "Datapoints": [
        {
            "Timestamp": "2020-08-31T04:40:00Z",
            "Sum": 8.0,
            "Unit": "None"
        },
        {
            "Timestamp": "2020-08-31T05:20:00Z",
            "Sum": 40.0,
            "Unit": "None"
        }
    ]
}
```
できた！

## おわりに

おまけ：後から気付いたのですがメールを送信しなくても、実はもうアラーム作成画面に答えがあったみたいです。確認大事！

![図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491542/70ccda5e-d549-686b-e8e5-fcc6f6d1ab38.png)
Webアプリを作成するときに心がけること

#プログラミングの勉強日記
2020年8月31日
Webアプリの開発において事前に準備しておく大切なことを備忘録として書き残しておく。

#1. 何を作るのか明確にする
　当たり前のように感じるかもしれないが、最初に何を作るのかを決める。作るものが定まっていないと、途中で方向性を失ってしまう。このときに、だれに対して作るサービスなのかも明確にする。

- よく使うWebサービスを真似する
- 身近なWebサービスを少し変えてみる
- 普段の生活の中で役立ちそうなものを考えてみる

　このように何かを参考にしながらアイディアを出すとよい。

#2. 全体図を書く
　イメージしたものを全体図に書いて、大まかなページのイメージや画面遷移の流れをイメージできるようにする。全体図を書くことで、これから作るものを整理することができ、必要な処理を明確にすることができる。また、設計図としても使うことができ、コードを書くときにスムーズにできる。
　チーム開発においては、言葉だけでは伝えられないので全体図を書くことでどういったアプリを作るのかを明確にすることができる。

#3. 期限を決める
　アプリを作るときには、いつまでに完成させるか期限を決める。アプリを開発するときには完成の期限を決めてその中でも短期的な目標を立てる。

#4. できることとできないことの差別化
　できることとできないことを見分けて、必須でやることと出来たらやることをはっきりと分けることも大切。3番では期限を決めているので、その限られた時間の中で何ができるかできないかを決めたほうがスムーズに開発を進められる。
　できなさそうなことは諦めるのではなく、「できたらやる」こともリストに追加すると良い。
Linuxでサイズの大きいファイルを探す方法

サーバのHDD使用率が95%超えてます！！
というアラートを受けたときに素早く対応できる方法
この手順で調査して、要らないものを`rm`してしまいましょう

//ディスクの使用状況を確認
`$ df -h `

//1GB以上の大きいディレクトリを見つける　※状況によってサイズは変更
`$ du -h ./ | grep [0-9]G`

//大きいファイルを直ぐ見つけたい場合はこっちの方が良いかも
`$ find ./ -size +1G`

//重い順にソートしてファイルを表示
`$ ls -lS`

対象ファイルが不要な場合はは`rmコマンド`で削除しましょう。
Visual Studio Codeを日本語化

 VSCodeの日本語化をメモ書き

##### ■ 初めてのとき
Setup直後は英語表記になっているので、左側のバーのMARKETPLACEを選択し、「Japanese Language Pack」を検索。installして再起動すると日本語化完了！

##### ■ 二度目以降
VSCodeをアップデートしたときなど、日本語化したはずなのに急に英語表記に。そういうときは shift + command + P キーでコマンドパレットを表示し、「Configure Display Language」で検索。その後「ja」を選択で日本語化完了！
Chromeで開発中にERR_UNSAFE_PORTが出た件

Webページで開発を実施中、IEでのチェックがOKだったので、Chromeで調べようとしたところ<b>「ERR_UNSAFE_PORT」</b>が出たので備忘録メモ


`調べてみるとポートで87番を使っていたのが原因`

IEではOKだったが、ChromeとFirefoxはNGだった
※セキュリティの設定の問題

参考サイト：<a>https://hi-nemos.com/port/?</a>
Cocos2d-xの開発環境を作成してAndroidで動かすまでの話

![Screenshot_20200831-150447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624329/2ba30fef-526d-4b13-ef16-4ceb4caaed10.png)

Androidでこの画面を出すまでやりました。

# 参考サイト

http://libro.tuyano.com/index2?id=9486003

# 環境

* Windows10 Pro(2004)
* OpenJDK 14
* Android Studio 4.0.1
* Android SDK 9.0(API Level 28)
* Android NDK r21b
* Python 2.7
* Cocos2d-x 3.17.2

## 必要な物をダウンロード

### OpenJDK 14

http://jdk.java.net/14/

### Android NDK

https://developer.android.com/ndk/downloads

### Python 2.7

https://www.python.org/downloads/release/python-2718/

### Cocos2d-x 3.17.2

https://cocos2d-x.org/download

適当な場所に展開。
PythonとJavaは環境変数でPATHを通しておく。

## Cocoa2d-xのセットアップ

```
cocos2d-x-3.17.2\setup.py
```

を実行する。
実行に失敗する場合はPython3が動いている可能性があるので、Python3のPATHよりPython2.7のPATHを上に持っていくことで解決する。（めんどくさい）
基本的にPython2.7じゃないといろいろ動かないので注意。

Android SDKとAndroid NDKのパスを聞かれるので、確認して入力する。
正しく実行されれば環境変数が追加されているはず。

## プロジェクトの作成

適当なフォルダで

```
cocos new MyCocosApp -l cpp
```

## プロジェクトの実行

```
cocos run -p android
```

で動作するはずなのだが、エラーになるので、以下のフォルダをAndroid Studioで開いた。

```
MyCocosApp\proj.android\
```

Android Studioからプラグインの更新リクエストが出るので、実行。
gradle/wrapper/gradle-wrapper.propertiesの

```
distributionUrl=https\://services.gradle.org/distributions/gradle-6.1.1-all.zip
```

の行が更新される。（バージョンがおかしかったみたい。）

再び

```
cocos run -p android
```

を実行し、gradle-6.1.1-all.zipのダウンロードが始まるも、再び失敗。

しかし、Android Studioから実行すると、動いた。(理由は分からなかった)

まあ、動いたから良しとする。
postgresqlのログについて（場所と設定内容）

Postgresqlの設定ファイルの場所を良く忘れるので、備忘録的にメモ
※バージョンによって異なるので要注意


#####ファイルの置き場所
/var/lib/pgsql/

####設定内容
<dl>
<dt>log_min_duration_statement</dt>
<dd>
  文の実行に少なくとも指定したミリ秒数かかった場合、それぞれの文の実行に要した時間をログに記録します。
  0に設定すれば、すべての文の実行時間が出力されます。
  -1（デフォルト）は、文実行時間の記録を無効にします。
  例えば、250msと設定した場合、250msもしくはそれ以上長くかかった全てのSQL文がログとして残ります。
</dd>
</dl>

<dl>
<dt>log_connections</dt>
 <dd>
  これにより、クライアント認証の成功終了などのサーバへの接続試行がログに残ります。
</dd>
</dl>

<dl>
<dt>log_disconnections</dt>
<dd>
  セッションの終了をログします。
  ログ出力の情報はlog_connectionsと同様で、更にセッションの経過時間が追加されます。
</dd>
</dl>

<dl>
<dt>log_duration</dt>
<dd> 
  すべての完了した文について、その経過時間をログするようにします。 デフォルトはoffです。
</dd>
</dl>


※参考URL：<a>https://www.postgresql.jp/document/9.4/html/runtime-config-logging.html</a>
見出し行を特定の文字列で検索し、マッチした列を一括取得するやつ（Google スプレッドシートの関数を使用する Ver.）

## まずは結論

### 同一スプレッドシート内の場合
```
= QUERY('【検索対象シート名】'!A:ZZ,"select " & LEFT(ADDRESS(1,MATCH("【探している文字列】", '【検索対象シート名】'!A1:ZZ1, 0),2), FIND("$",ADDRESS(1,MATCH("【探している文字列】", '【検索対象シート名】'!A1:ZZ1, 0),2))-1),1)
```

### 別のスプレッドシートの場合
```
= QUERY(IMPORTRANGE(【検索対象スプレッドシートURL】, "【検索対象シート名】!A:ZZ"),"select Col" & MATCH("【探している文字列】", IMPORTRANGE(【検索対象スプレッドシートURL】, "【検索対象シート名】!A1:ZZ1"), 0), 1)
```

<br>

## 見出し行を文字列で探して、その列を一括で取得したくなったことはありませんか？

はい、僕はあります。

例えば、あるテーブルではこのようにデータが記録され、

|くだもの|値段|在庫数|
|:-:|:-:|:-:|
|りんご|50|10|
|みかん|100|5|
|バナナ|200|3|
別のテーブルではこのようにデータが記録されていた場合、

|さかな|在庫数|値段|
|:-:|:-:|:-:|
|アジ|10|500|
|タイ|5|1000|
|ノドグロ|3|2000|
どちらも変わらず「値段」の列のみを取得したい……
つまり前者では

|値段|
|:-:|
|50|
|100|
|200|
後者では

|値段|
|:-:|
|500|
|1000|
|2000|
を抜き出したい場合です。

この手のは今までスクリプトエディタを開いて、GASでfor文を使い、タイトル行にその文字列があるのを探し、そこから列を取ってきたのですが、これをする場合、手動実行もしくはトリガーの設定が必要になってしまうので、頑張った割には見返りが少ない感じが否めません。

スプレッドシートのテンプレートを作り、その複製を作って運用するみたいな場合は、なおさらあまり賢い選択ではない感じがするためできればスクリプトエディタを使わずに、普通の関数で運用したいところです。

<br>
## それでは解説

### 別のスプレッドシートの場合の解説
この関数を作るにあたって、別スプレッドシートのほうが簡単に作れるという珍しいパターンなので、順番は上記のサンプルと違ってしまいますが、まずこちらを解説します。

#### QUERY
別スプレッドシートのデータを読みに行く IMPORTRANGE と組み合わせた場合、Select で列を選択する時に列はアルファベット「A」や「B」ではなく、列番号「Col1」や「Col2」で指定することになります。

```
QUERY(【範囲】,"select Col1", 1)
```
※QUERY自体の使い方
https://support.google.com/docs/answer/3093343?hl=ja

<br>
#### IMPORTRANGE
検索範囲を「A:ZZ」や「A1:ZZ1」としているのは、おそらくこれでシート全体や、見出し行全体をカバーできるというアテで入れています。もしものすごく列が大きいスプレッドシートを扱う場合は、適宜変更してください。
（もしこんなことしなくても最大範囲を取れるという方法を御存知の方がいらっしゃったら教えていただけると助かります。）

```
IMPORTRANGE(【検索対象スプレッドシートURL】, "【検索対象シート名】!A:ZZ")
```
```
IMPORTRANGE(【検索対象スプレッドシートURL】, "【検索対象シート名】!A1:ZZ1")
```
※IMPORTRANGE自体の使い方
https://support.google.com/docs/answer/3093340?hl=ja

<br>
#### MATCH
MATCHで返ってきた列番号を取得。（例：1）
それを「Col」と連結し「Col1」を取得しています。

```
"select Col" & MATCH("【探している文字列】", IMPORTRANGE(【検索対象スプレッドシートURL】, "【検索対象シート名】!A1:ZZ1"), 0)
```
※MATCH自体の使い方
https://support.google.com/docs/answer/3093378?hl=ja

これで別スプレッドシートの列は好きに取得することができるようになります。

---

### 同一スプレッドシート内の場合

#### QUERY
同一スプレッドシートの場合も、基本的には別のスプレッドシートの場合と同じ手順になるのですが、問題は Select で列番号ではなく、列のアルファベットで指定することになります。

```
QUERY(【範囲】,"select A", 1)
```
つまりこの「A」の部分を列番号から変換しなければならない分、別スプレッドシートに比べて複雑になっているわけです。

<br>
#### ADDRESS
前述の「くだものテーブル」で値段の列「B」を取得したいので ADDRESS を使用します。ただアルファベットは A - Z のような1文字だけでなく、AA や AB のような2文字のケースも考えられるので「B\$1」のような、列は相対参照、行は絶対参照のモード「2」を使用し「\$」を区切り文字として扱うことを目論んでいます。

```
ADDRESS(1,MATCH("【探している文字列】", '【検索対象シート名】'!A1:ZZ1, 0),2)
```
※ADDRESS自体の使い方
https://support.google.com/docs/answer/3093308?hl=ja

<br>
#### LEFTとFIND
「B\$1」の中の「\$」の位置をFINDで探し出すと「2」が返ってきます。
その1つ前の文字までをLEFTで抜き出したいので、FINDで返ってきた数字に -1 をします。

```
LEFT(ADDRESS(1,MATCH("【探している文字列】", '【検索対象シート名】'!A1:ZZ1, 0),2), FIND("$",ADDRESS(1,MATCH("【探している文字列】", '【検索対象シート名】'!A1:ZZ1, 0),2))-1)
```
※LEFT自体の使い方
https://support.google.com/docs/answer/3094079?hl=ja
※FIND自体の使い方
https://support.google.com/docs/answer/3094126?hl=ja

<br>
## 長々と……
書いてきましたが、基本的には最初の結論部分をコピーしていただいて、必要な個所を書き換えていただければ使えるようになっているはずです！

みなさまの快適なGoogleスプレッドシート生活のお役に立てたら幸いです。
🙇🏻‍♂️
DeepIE3D　環境構築

#やること
https://github.com/ukuleleplayer/DeepIE3D
にあるDeepIE3Dの環境構築をしていきます。

開発者のgithubだと
Frontend

```
webdev build--output web:build
```
Backend

```
gcloud app deploy
```
となっていますが、これらはrelease用のコマンドであるため、開発時には不適です。
#環境
macOS Catalina 10.15.4
Python 3.7.4
Dart VM version: 2.6.0
webdev 2.5.6
pip 19.0.3

(dart sdkをdowngradeする方法に関してはこちら
https://qiita.com/sk161717/items/d44fed3464bc7c9f0d6b)
#方法
https://github.com/ukuleleplayer/DeepIE3D
をローカルにクローンしてきます。
##Frontend
ローカルのDeepIE3D_Frontendフォルダで

```
webdev serve --auto=restart --launch-in-chrome --debug
```

を実行。localhost:8080でフロントにアクセスできるようになる。
##Backend
ローカルの/DeepIE3D/DeepIE3D_Backendにあるmain.pyを変更する。

```main.py
@APP.after_request
def add_cors(response):
    '''
    Add CORS header(s) to every response from valid sites

    Allow:
    - Origin from everywhere
    - Content-Type to be shown in headers
    - GET, POST and OPTIONS methos
    '''
    #r = request.referrer[:-1]
    #if r in ['http://localhost:8080', 'localhost:8080', 'https://localhost:8080',
    #         'https://adrianwesth.dk', 'https://www.adrianwesth.dk']:
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers',
                            'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods',
                            'GET,POST,OPTIONS')

    return response
```
変更箇所:真ん中の3行をコメントアウト。

```
python main.py
```
でlocalhost:5000にBackendが立つ。

##実行
```
http://127.0.0.1:8080/
```
にアクセスすれば初期化終了次第自由に動かせるはずです。
[BootstrapVue]Tableのカンマ区切りの値をソートする

### やりたい事

こんなコードがあったとして

```vuejs
<template>
  <b-table
    :items="items"
    :fields="fields"
  />
</template>

<script>
export default {
  data() {
    return {
      items: [
        { num: "12,345,678" },
        { num: "54,321" },
        { num: "1,234" },
        { num: "10" }
      ]
      fields: [
        { key: 'num', sortable: true }
      ]
    }
  }
}
```

テーブルがあったとして、ソートするとこんな感じにカンマの影響で文字列としてソートしようとして想定していた並びになりません。

![スクリーンショット 2020-08-31 15.10.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/38759075-f7fb-2951-57f5-1212c43a5e02.png)

これに直接的に対応できるオプションは無いので、ソートのルールを自作していきましょう。

### やり方
> https://bootstrap-vue.org/docs/components/table#sort-compare-routine

この、 `sort-compare` を使います。ソートのルールを記述する事ができます。

```vuejs

  <b-table
    :items="items"
    :fields="fields"
    :sort-compare="sortCompare" // <- これ追加
  />
```

ソート時に `sortCompare` メソッドを呼びソートを行ってくれます。
実際のsortCompareを実装しましょう。

```javascript

  methods: {
    sortCompare(a, b, key) {
      const numA = Number(a[key].split(',').join(''))
      const numB = Number(b[key].split(',').join(''))
      return numA - numB;
    }
  }
```

第4引数以降も色々受け取れますが、今回は不要なのでこの3つだけ使います。

* 引数1 `a` : 前列のオブジェクト
* 引数2 `b` : 次列のオブジェクト
* 引数3 `key` : ソートしようとしたカラムのキー （num をソートしようとしたならば、 `num` )

列のオブジェクトから、今回ソートしようとしたカラムを取り出すために `a[key]` として、そこから `.split(',').join('')` としてカンマを切り捨て `Number()` で数値に変換します。

そこから比較して返してあげるようにします。これで数値でソートができるようになりました。

![スクリーンショット 2020-08-31 15.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/ce7d1dc6-f374-813d-0c97-1a5456cea981.png)

最初からカンマ区切りに対応するようなオプションがあればいいんですけどね。
Visual Studio for Macでよく使うショートカットキー一覧

## 環境

- OS：macOS Catalina 10.15.5
- Visual Studio Community 2019 for Mac：Version 8.7.4 (build 38)
- キーボード ショートカット：Visual Studio for Mac

## よく使うショートカットキー一覧

|キー|説明|
|:---|:---|
|⌘↩|デバッグ開始|
|⇧⌘↩|デバッグ終了|
|⌘\ or F9|ブレークポイントの設定/解除|
|⇧⌘O or F10|ステップオーバー(メソッドに入らない)|
|⇧⌘I or ⌘F11|ステップイン(メソッドに入る)|
|^I|コードの整形|
|⌘/|コメントアウト/イン|
|/, /, /|ドキュメンテーションコメントの挿入|
|⌘R|リネーム|
|⌥⇧⌘←|展開/折り畳みの切替(選択範囲)|
|⌥⇧⌘↑|展開/折り畳みの切替(ファイル全体)|
|^⌘←|前に戻る|
|^⌘→|次に進む|
|⌘Click or ⌘D|定義へ移動|
|⇧⌘R|定義の呼び出し元を表示|
|⌘P|ファイルに移動|
|⌘L|指定行へジャンプ|
|⌘W|タブを閉じる|
|^'|ターミナルの表示|

上記はすべてデフォルトのショートカットキーです。
私は以下のようにショートカットキーをカスタマイズしています。
https://qiita.com/uhooi/items/c604842f82736661dc7e#ショートカットキー

## 参考リンク

- [既定のキーボード ショートカット - Visual Studio for Mac | Microsoft Docs](https://docs.microsoft.com/ja-jp/visualstudio/mac/keyboard-shortcuts?view=vsmac-2019)
IBM Cloud の IAM トークンの中身を確認する


# IAM トークンとは

IBM Cloud アクセストークンとも呼ばれます。
トークンを使うことで認証されたリソースアクセスを行うことができます。

CLI では `ibmcloud iam oauth-tokens` のコマンドで取得できます。
>[CLI を使用したアクセス・トークンの取得](https://cloud.ibm.com/docs/key-protect?topic=key-protect-retrieve-access-token#retrieve-token-cli)

IAM トークンは `<ヘッダー>.<ペイロード>.<署名>` の形式をとる JSON Web Token (JWT) です。


# JSON Web Token (JWT) とは
こちらの外部記事が参考になります。

>JWTとはJSON Web Tokenの略称であり、属性情報（Claim）をJSONデータ構造で表現したトークンの仕様です。
仕様はRFC7519（外部サイト）で定められています。
特徴として、署名、暗号化ができ、URL-safeであることなどが挙げられます。発音は"ジョット"です。
> 
参考：[JSON Web Token（JWT）の紹介とYahoo! JAPANにおけるJWTの活用 - Yahoo! JAPAN Tech Blog](https://techblog.yahoo.co.jp/advent-calendar-2017/jwt/)

# JWT デコード
以下のようなコマンドで自身の IAM トークンの中身を確認できます。
自身が取得して変数に格納した値が正しい内容かの確認にも使えますね。

```shell:

ibmcloud login -a cloud.ibm.com
export IAM_TOKEN=$(ibmcloud iam oauth-tokens | awk '{print $4}')
echo $IAM_TOKEN | cut -d. -f1 | base64 -D | jq -r \
&& echo $IAM_TOKEN | cut -d. -f2 | base64 -D | jq -r
```

```json:result
{
  "kid": "xxxxxxxxxxxx",
  "alg": "RS256"
}
{
  "iam_id": "IBMid-xxxxxxXXXX",
  "id": "IBMid-xxxxxxXXXX",
  "realmid": "IBMid",
  "identifier": "xxxxxxXXXX",
  "given_name": "Taro",
  "family_name": "Hoge",
  "name": "Taro Hoge",
  "email": "xxx",
  "sub": "xxx",
  "account": {
    "valid": true,
    "bss": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "ims_user_id": "xxxxxx",
    "ims": "xxxxxxx"
  },
  "iat": 1598853406,
  "exp": 1598857006,
  "iss": "https://iam.cloud.ibm.com/identity",
  "grant_type": "urn:ibm:params:oauth:grant-type:passcode",
  "scope": "ibm openid",
  "client_id": "bx",
  "acr": 1,
  "amr": [
    "pwd"
  ]
}
```

また、[jwt.io](https://jwt.io/#libraries-io) のサイトでもオンラインでデコードが可能です。
上記サイトではサーバー保存は行わないと明記されていますが、IAM トークンを使えばユーザーリソースにアクセスできてしまうので IAM トークンの取り扱いには注意しましょう。

# 参考

- [IBM Cloud Identity and Access Management — Tokens in Details | by Martin Smolny | Medium](https://medium.com/@martin.smolny/ibm-cloud-identity-and-access-management-tokens-in-details-49eac14d5298)
CameraX でカメラを一時停止する方法

# 概要
CameraX で、alpha05 -> beta04 にあげる時に、カメラを一時停止する方法について試行錯誤したメモ

# Camera を停止する方法

```
// UseCase を指定して unbind
CameraX.unbind(preview)
// 全ての UseCase を unbind
CameraX.unbindAll()
// LifecycleCamera に対して unbind（beta04時点）
cameraProvider?.unbindAll()
```

### 課題
カメラは停止されるが、復帰する際に画面が**暗転してしまう**

#### 画面が暗転する問題への対処方法
`androidx.camera:camera-core:1.0.0-alpha05` までは下記の方法で `Preview.OnPreviewOutputUpdateListener` を入れ替えることで、復帰時に画面が暗転せずにカメラの一時停止が実現できていた。

```
private var onPreviewOutputUpdateListener: Preview.OnPreviewOutputUpdateListener? = null

// resume
fun resumeCamera() {
  preview.onPreviewOutputUpdateListener = onPreviewOutputUpdateListener
}

// pause
fun pauseCamera() {
  onPreviewOutputUpdateListener = preview.onPreviewOutputUpdateListener
  preview.onPreviewOutputUpdateListener = null
}
```

#### beta04 で試した方法（失敗）

Preview.setSurfaceProvider() を切り替える

```
private var surfaceProvider: Preview.SurfaceProvider? = null

// resume
fun resumeCamera() {
  preview?.setSurfaceProvider(surfaceProvider)
}

// pause
fun pauseCamera() {
  preview?.setSurfaceProvider(null)
}
```

# 結果
`androidx.camera:camera-core:1.0.0-alpha05` までは復帰時に暗転せずにカメラを一時停止する方法があったが、`androidx.camera:camera-core:1.0.0-beta04` では暗転せずにカメラを一時停止する方法が現状見つけられず。
ボイチェン ベストプラクティス

ボイチェンの方法いろいろあるけど

- ぜんぶフリーソフトで
- なるべく遅延なくモニター(自分の声を聴く)できて
- カスタマイズ性が高いほうが好き

な人向けです

# つかうもの
- Element (https://github.com/kushview/element/releases/latest)
- GForm (https://www.gvst.co.uk/Downloads/GForm/Select)
- SYNCROOM (https://syncroom.yamaha.com/)

# Element + GForm (ボイチェンするだけならこれだけ)
Element は [Element Windows 64bit](https://github.com/kushview/element/releases/download/0.46.6/element-win64-0.46.6.exe) をインストール。
GForm は `GFormWin64.zip` の中にある `GForm.dll` を `C:\Program Files\VstPlugins` にコピーする。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/d5396444-765f-b332-86b7-9969ba01a5aa.png)

Element を起動して、メニューバーから File -> Preferences で

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/a3336758-fe10-de8c-d075-20f9de7f7f1a.png)

（Element はデフォルト設定で起動すると音が聞こえなくなることがあります
これは Audio device type が Windows Audio Exclusive になってるためで、 Exclusive 以外に変えてソフト再起動すれば治ります）

- Audio device type を Windows Audio (いいオーディオインターフェースを使ってる場合はASIO)
- よしなにOutput/Input を選ぶ
- Audio buffer size を最小に (これでラグが小さくなります)

(Output/Input を選ぶときに sampling rate が合わないとかいうエラーが出るときは、 Windows のサウンドコントロールパネルから選びたい再生デバイスと録音デバイスのサンプリングレート (デバイスを右クリックして詳細→既定の形式)を合わせてください)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/cfd7e849-3668-c520-1580-e9d1ad41d9f8.png)
右クリックしてGFormを挿す (最初は一番下の Unverified にあるかも)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/db6e8e83-56d1-cbd5-70f2-7f9c9d5c0136.png)
こんな感じに配線

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/bfb0b85b-8214-4eec-3851-658adf62eadb.png)
PitchとFormantを両方4くらいにする

(半音表記なのでバ美声とかの%の対応表を置いておきます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/a566e387-c98e-bd83-9826-7ed0e2892905.png)

# SYNCROOM (VRChatとかに声を流す)
SYNCROOM の zip についてきた Vstplugins の中身を `C:\Program Files\VstPlugins` に放り込む
(SYNCROOM2 の場合は`C:\Program Files\Common Files\VST3`)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/2440d721-05d4-3e5a-eb7f-ae307cb3d7d6.png)
挿す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/9f13c497-dbc6-3956-257a-e01d2ef99140.png)
流す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700889/39636a9b-0c4f-9e65-3386-38477ca15f7b.png)
変える

たぶんこれでいけます
（いけなかったらVRCでnaca_nyanに聞いてください）

# ちなみに
VSTプラグインを自由に使えるようになると、ノイズ除去とかリバーブ(いわゆるエコー)かけたりとか便利です。
GForm 以外にも使えそうなボイチェン用VSTエフェクトを置いておきます。

 * Graillon 2 (https://www.auburnsounds.com/products/Graillon.html)
 * Pitch Proof (https://aegeanmusic.com/pitchproof-specs)
 * Manipulator(デモ版は30分ごとに無音になる) (https://dirigent.jp/polyverse/manipulator/)
 * Vocal Bender(無料版は1週間) (https://www.waves.com/plugins/vocal-bender)

(あしもすさんがほかにもいろんなVSTの[比較動画](https://www.youtube.com/watch?v=i84MX7OkBK4)を出してくれてます)
[備忘録]git-secretsが原因でコミットできなくなったときの解決手順

##経緯
後輩にSourcetree環境構築を教えていて、
リモートリポジトリからクローン後、ファイルを初回コミットしようとした際に発生した。

調べてみると`git-secrets`が邪魔をしていた。
後輩曰く、プライベートでAWSにデプロイする機会があったとのことだったので、それ関係で入れていたとのこと。
今は使用していないとのことなので、削除する方向で対処した。

またいつかハマりそうなのと、今回解決した内容が一式書いてあるところが見当たらなかったため備忘メモ。

##環境
**Mac Pro(2019モデル)**

* **OS**: macOS
* **CPU**：core i5
* **RAM**：8GB

**Sourcetree**

* **バージョン**: SourceTree version 3.3.9

##エラーメッセージ

* `Sourcetree`でファイルをコミットしようとした際に、以下のエラーが発生。

```
git: 'secrets' is not a git command. See 'git --help'.
```

ターミナル上で`git commit -m "(コミットメッセージ)"`を打鍵したが、同様のエラー結果に。


##解決手順

* `git-secrets`をアンインストール。

```terminal:terminal
$ brew uninstall git-secrets
```
<br>

* `.gitconfig`から`secrets`に関する記述を削除。

```terminal:terminal
$ vi ~/.gitconfig
```

↓

```terminal:~/.gitconfig
[secrets]
    providers = git secrets --aws-provider # ...(略)
[init]
    templatedir = ~/.git-templates/git-secrets
```

※修正前後の内容チェックは`git config –l`を打鍵。
<br>

* 対象リポジトリの`.git/hooks`の中にある以下ファイルを削除。
   * `commit-msg`
   * `pre-commit`
   * `prepare-commit-msg`

以上。

##参考
* [git-secretsを削除したのにSourceTreeでコミットできない！？](https://y-u-y-a-blog.com/uncategorized/git-secrets-source-tree/)
* [git secretsを削除する時の注意](https://piruty2.hatenablog.jp/entry/%3Fp%3D521)
🔰【C#】演算と変数(解答2-5)

## この記事の注意事項
この記事に記載の内容(解答)が模範解答というわけではありません。
あくまで自身の学習の過程での足跡的な内容で記載するものです。
そのため、記述が汚い箇所もあるかと思いますので悪しからず。

## 開発環境
OS:Windows10 Pro 64bit
IDE:VisualStudio Community 2015

---

###問題
以下の例のように、コンソールで2つの文字列を入力し、その文字列を結合した文字列を出力するプログラムを作りなさい。

```:コンソール
文字列１を入力:Good  // キーボードから文字列を入力
文字列２を入力:Morning  // キーボードから文字列を入力
文字列１＋文字列２＝GoodMorning  // 入力した文字列を結合したもの
```

###解答

```C#:Ex2_5/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Ex2_5
{
    class Program
    {
        static void Main(string[] args)
        {
            string a, b;

            Console.Write("文字列1を入力：");
            a = Console.ReadLine();

            Console.Write("文字列2を入力：");
            b = Console.ReadLine();

            Console.WriteLine("文字列1 + 文字列2 = {0}", a + b);
        }
    }
}

```
```:コンソール
文字列1を入力：Good
文字列2を入力：Morning
文字列1 + 文字列2 = GoodMorning
続行するには何かキーを押してください . . .
```
---
## 参考記事
[1週間で身につくC#言語の基本](https://csharp.sevendays-study.com/index.html)
react-native でアプリが foreground, background に行ったことを検知する方法

たまに必要になって毎回調べるので忘備録。

react-native でモバイルアプリを作成するとき、Web サイトと違うのは、「アプリを開く度、毎回 Component が mount されるわけではない」という事。同じく、アプリをbackgroundに持っていった時に unmount もされない。

例えば、ユーザーがアプリを開いている状態でホームボタンを押しても unmount 処理は行われないし、その後またアプリを foreground に戻したとき、react の再 render は行われないので mount 処理も行われない。

ユーザーが foreground に戻ってきたときにログインの session が切れているかどうかを確認したいと言ったときに、上記の理由から、useEffect だけで session をチェックすると言うことは厳しい。

その代わり、react-native は [AppState](https://reactnative.dev/docs/appstate) という API を用意している。

```jsx
import {AppState} from 'react-native'
```

これは、アプリが foreground であれば `active` 、background にあれば `background` という状態を持つ。

iOS であれば、タスク一覧画面など、アプリがforegroundでもbackgroundでもない状態として `inactive` という状態もある。

AppState には以下のように EventListener を設けて、AppState が変更した際に処理を追加することができる。


```jsx
// ref: https://reactnative.dev/docs/appstate
import React, { useEffect } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";

const AppStateExample = () => {
  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      console.log("App has come to the foreground!");
    }

    console.log("AppState", appState.current);
  };

  ...
};

```

「ユーザーがアプリを開いた時」というのは、毎回未起動時から入るか、backgroundからforegroundに変わる時か、わからないので、「ユーザーがアプリを開いた時」に毎回処理を挟みたいと言う場合は、AppStateを使うのが良い。

### 参考
[React Native 公式ドキュメント - AppState](https://reactnative.dev/docs/appstate)
🔰【C#】演算と変数(解答2-4)

## この記事の注意事項
この記事に記載の内容(解答)が模範解答というわけではありません。
あくまで自身の学習の過程での足跡的な内容で記載するものです。
そのため、記述が汚い箇所もあるかと思いますので悪しからず。

## 開発環境
OS:Windows10 Pro 64bit
IDE:VisualStudio Community 2015

---

###問題
以下の例のように、コンソールで文字列を入力し、入力された文字列をそのまま表示するプログラムを作りなさい。

```:コンソール
文字列を入力:Bird  // キーボードから文字列を入力
入力された文字列:Bird
```

###解答

```C#:Ex2_4/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Ex2_4
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("文字列を入力：");
            string a = Console.ReadLine();

            Console.WriteLine("入力された文字列：{0}", a);
        }
    }
}

```
```:コンソール
文字列を入力：Bird
入力された文字列：Bird
続行するには何かキーを押してください . . .
```
---
## 参考記事
[1週間で身につくC#言語の基本](https://csharp.sevendays-study.com/index.html)
🔰【C#】演算と変数(解答2-3)

## この記事の注意事項
この記事に記載の内容(解答)が模範解答というわけではありません。
あくまで自身の学習の過程での足跡的な内容で記載するものです。
そのため、記述が汚い箇所もあるかと思いますので悪しからず。

## 開発環境
OS:Windows10 Pro 64bit
IDE:VisualStudio Community 2015

---

###問題
以下のプログラムは、a～eの5つの変数にそれぞれ初期値を与え、様々な演算を施したのち、コンソール画面にその値を表示したものである。
このプログラムの14行目から18行目を、全く同じ計算になるような代入演算子による計算に変え、結果が全く同じになるようにプログラムを書き換えなさい。

```C#:Pro2-3_/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Problem2_3
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 1,b = 2,c = 3,d = 4,e = 5;
            a = a + 2;  //  aに2を加える
            b = b - 1;  //  bから1を引く
            c = c * 3;  //  cに3をかける
            d = d / 2;  //  dを2で割る
            e = e % 2;  //  eに、eを2で割った余りを代入する
            Console.WriteLine("a = {0}",a);
            Console.WriteLine("b = {0}",b);
            Console.WriteLine("c = {0}",c);
            Console.WriteLine("d = {0}",d);
            Console.WriteLine("e = {0}",e);
        }
    }
}
```
```:コンソール
a = 3
b = 1
c = 9
d = 2
e = 1
```

###解答

```C#:Ex2_3/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Ex2_3
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 1, b = 2, c = 3, d = 4, e = 5;

            a += 2;
            b -= 1;
            c *= 3;
            d /= 2;
            e %= 2;

            Console.WriteLine("a = {0}", a);
            Console.WriteLine("b = {0}", b);
            Console.WriteLine("c = {0}", c);
            Console.WriteLine("d = {0}", d);
            Console.WriteLine("e = {0}", e);

        }
    }
}

```
```:コンソール
a = 3
b = 1
c = 9
d = 2
e = 1
続行するには何かキーを押してください . . .

```
---
## 参考記事
[1週間で身につくC#言語の基本](https://csharp.sevendays-study.com/index.html)
jqでUnicodeエスケープシーケンスのdecodeできるの知らなかったけどnkfよりお手軽

```
echo '"\u65e5\u672c\u8a9e"' | jq -r
日本語
```


↓nkf版

```
echo "\u65e5\u672c\u8a9e" | sed 's/\\\u\(....\)/\&#x\1;/g' | nkf --numchar-input -w
日本語
```

* 参考情報
  * https://qiita.com/m_kawaguchi/items/3feaeab510508740c530
🔰【C#】演算と変数(解答2-2)

## この記事の注意事項
この記事に記載の内容(解答)が模範解答というわけではありません。
あくまで自身の学習の過程での足跡的な内容で記載するものです。
そのため、記述が汚い箇所もあるかと思いますので悪しからず。

## 開発環境
OS:Windows10 Pro 64bit
IDE:VisualStudio Community 2015

---

###問題
以下のプログラムを実行すると、二つの整数値の足し算の結果が画面に出力される。
これを、以下のように二つの数の四則演算と剰余が表示されるようにプログラムを変更しなさい。

```C#:Pro2_2/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Problem2_2
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 4,b = 2;
            Console.WriteLine("a = {0}",a);
            Console.WriteLine("b = {0}",b);
            Console.WriteLine("a + b = {0}",a + b);
        }
    }
}
```
```:コンソール
a = 4
b = 2
a + b = 6
```

###解答

```C#:Ex2_2/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Ex2_2
{
    class Program
    {
        static void Main(string[] args)
        {
            int a = 4, b = 2;
            Console.WriteLine("a = {0}", a);
            Console.WriteLine("b = {0}", b);
            Console.WriteLine("a + b = {0}", a + b);
            Console.WriteLine("a - b = {0}", a - b);
            Console.WriteLine("a * b = {0}", a * b);
            Console.WriteLine("a / b = {0}", a / b);
            Console.WriteLine("a % b = {0}", a % b);

        }
    }
}
```
```:コンソール
a = 4
b = 2
a + b = 6
a - b = 2
a * b = 8
a / b = 2
a % b = 0
続行するには何かキーを押してください . . .
```
---
## 参考記事
[1週間で身につくC#言語の基本](https://csharp.sevendays-study.com/index.html)
🔰【C#】演算と変数(解答2-1)

## この記事の注意事項
この記事に記載の内容(解答)が模範解答というわけではありません。
あくまで自身の学習の過程での足跡的な内容で記載するものです。
そのため、記述が汚い箇所もあるかと思いますので悪しからず。

## 開発環境
OS:Windows10 Pro 64bit
IDE:VisualStudio Community 2015

---

###問題
以下のプログラムを実行すると、二つの整数値の足し算の結果が画面に出力される。
このプログラムをもとにして、2つの整数型変数、a,bの和、差、積、商、および剰余（割り算の余り）を求めるプログラムを作りなさい。

```C#:Pro2_1/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace Problem2_2
{
    class Program
    {
        static void Main(string[] args)
        {
        Console.WriteLine("{0} + {1} = {2}",5,3,5 + 3);
        }
    }
}
```
```:コンソール
5 + 3 = 8
```

###解答

```C#:Ex2_1/Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Ex2_1
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("{0} + {1} = {2}", 5, 3, 5 + 3);
            Console.WriteLine("{0} - {1} = {2}", 5, 2, 5 - 2);
            Console.WriteLine("{0} * {1} = {2}", 5, 2, 5 * 2);
            Console.WriteLine("{0} / {1} = {2}", 5, 2, 5 / 2);
            Console.WriteLine("{0} % {1} = {2}", 5, 2, 5 % 2);
        }
    }
}

```
```:コンソール
5 + 3 = 8
5 - 2 = 3
5 * 2 = 10
5 / 2 = 2
5 % 2 = 1
続行するには何かキーを押してください . . .
```
---
## 参考記事
[1週間で身につくC#言語の基本](https://csharp.sevendays-study.com/index.html)
RaspberryPi 3 model B+にXenomaiを導入する手順 その２

#概要
前回Xenomaiを導入するためのKernelを構築する手順を説明した。
今回はXenomai本体をビルドして、RaspberryPi上のXenomaiの機能を使えるようにする。Xenomaiをマイコンに導入できればロボット操作などリアルタイム性を求められる動作が可能となる。

#注意事項
前回の続きとなるので、まだそちらを見てない人はこちらを先に読むのを推奨

#####RaspberryPi 3 model B+にXenomaiを導入する手順 その１
https://qiita.com/TordanHatiman/items/697aaa520914e159de2b

スペック等についてはその１と全く変わらないので省略


#目次
- 作業内容
- 動作確認

#作業内容
前回同様Xenomai用のKernelをビルドしたクロスコンパイル環境で作業する。
Xenomai本体も同じ作業ディレクトリ内に配置されている。
(前回の作業ディレクトリはkernel_cnstとしていた)

では、作業をしていこう。まずはXenomaiのライブラリ群をビルドする。
クロスコンパイル環境のため、クロスコンパイラにパスを通す。（前回やったことと一緒）

```
linux_user@TN-201709Fxxxx:~$ cd ~/kernel_cnst
linux_user@TN-201709Fxxxx:~$ cd ./Xenomai3.x/
linux_user@TN-201709Fxxxx:~$ export CROSS_COMPILE=../tools/arm-bcm2708/gcc-linaro-arm-linux-gnueabihf-raspbian-x64/bin/arm-linux-gnueabihf-
```
次にXenomaiをビルドするが、ビルドしたファイル群をRPiに移すためにビルドしたファイルを格納しておくディレクトリを作成する。

```
linux_user@TN-201709Fxxxx:~$ mkdir ~/kernel_cnst/target
linux_user@TN-201709Fxxxx:~$ ./scripts/bootstrap
linux_user@TN-201709Fxxxx:~$ ./configure CFLAGS="-march=armv7-a -mtune=cortex-a8 -mfloat-abi=hard -mfpu=neon -ffast-math" --enable-smp --with-core=cobalt
linux_user@TN-201709Fxxxx:~$ make -j4 install DESTDIR=~/kernel_cnst/target/
```
これでビルドが通ればコンパイル完了。
前回同様にファイル群を圧縮し、RPiへ持ってくる。
(SSHとかでも転送できるけど、セキュリティ上おすすめしない)

```
linux_user@TN-201709Fxxxx:~$ cd ~/kernel_cnst
linux_user@TN-201709Fxxxx:~$ tar -zcvf xenomai_tools.tgz ./target
```

適当なところに持ってきて解凍
--------ここからはRPiで作業--------

```
linux_user@TN-201709Fxxxx:~$ cd ~/workspace(解凍する場所なのでどこでもいい)
linux_user@TN-201709Fxxxx:~$ tar -zxvf ./target.tgz
```

解凍できたら、持ってきたファイルをRPiにインストール

```
linux_user@TN-201709Fxxxx:~$ sudo cp -rd ./target/dev/* /dev/
linux_user@TN-201709Fxxxx:~$ sudo cp -rd ./target/usr/* /usr/
```

このときも必ず<font color="Red">導入前の/dev/や/usr/のバックアップを取っておくこと</font>
これでXenomai自体の導入も完了となる

#動作確認
特にエラーもなく、Xenomai導入作業が完了したら以下を実行する

```
linux_user@TN-201709Fxxxx:~$ sudo /usr/xenomai/bin/latency
```
もし正常に動作すれば以下のようにlatencyの計測が行われる

```
== Sampling period: 1000 us
== Test mode: periodic user-mode task
== All results in microseconds
warming up...
RTT|  00:00:01  (periodic user-mode task, 1000 us period, priority 99)
RTH|----lat min|----lat avg|----lat max|-overrun|---msw|---lat best|--lat worst
RTD|     12.239|     12.693|     19.427|       0|     0|     12.239|     19.427
RTD|     12.291|     12.720|     16.926|       0|     0|     12.239|     19.427
RTD|     12.290|     12.701|     17.447|       0|     0|     12.239|     19.427
RTD|     12.238|     12.709|     14.634|       0|     0|     12.238|     19.427
```
出展:https://lemariva.com/blog/2018/07/raspberry-pi-xenomai-patching-tutorial-for-kernel-4-14-y   
(今回このログを取り忘れてしまったので、以上を参照した。)

このようにXenomaiは1ms単位のアプリケーション動作でも処理できるリアルタイム性を持っている。
C言語でXenomaiの関数を使ったアプリケーション動作確認コードなどもネット上で公開されたりしているので、そちらは調べてみるといいかも。

私も実際XenomaiのLatencyを計測したけど確かに1ms周期で動作するプログラムに対してLatencyがどんなに遅くとも1ms±0.1msで動作し、ほとんどが1msで応答を返すので、Linuxベースのマイコンをリアルタイムで動作させるには最適だと思う。
(諸事情により、計測データは載せられないよ.....)

#終わりに
Xenomaiの導入は日本語ベースの資料がほぼないので、海外の資料とかを読み解いていくのに慣れてないと結構難しいです。
もし、同じようにやろうとして詰まってしまったら遠慮なく質問してください。
（できる限り答えます）

パッチについては別記事で書こうかなと思います。文章化して見たい人は申し訳ないですが、それまでお待ちを......

ではまたね！
Laravelでオリジナルのバリデーションルールを作成する

開発を進める中で、名前のフリガナを入力してもらう際にカタカナ以外を弾くというバリデーションルールが必要になりました。
しかし、デフォルトではそんなルールはないということで自作しました。
##動作環境
Docker 19.03.8
CentOS 7.8.2003
Laravel 5.5

##ルールオブジェクトの作成
artisanコマンドを用いてルールオブジェクトを作成します。

```
$ php artisan make:rule name_kana
```
appディレクトリ下にRulesディレクトリが作られその中にnama_kana.phpが作られているはずです。

```name_kana.php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class name_kana implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        //
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'The validation error message.';
    }
}
```
##ルール、メッセージを定義
passesメソッドにはルールを定義、messageメソッドにはエラーメッセージを定義します。

```name_kana.php
    public function passes($attribute, $value)
    {
        if(!preg_match('/[^ァ-ヴー]/u',$value))
        {
            return true;
        }

        return false;
    }
```
正規表現を使い、カタカナ、「ー」（全角伸ばし棒）以外の文字列が含まれるときはfalseを返し、それ以外はtrueを返すようにします。
引数の`$attribute`にはキー、`$value`には値が入ります。
preg_match()で第一引数の正規表現に、第二引数の値がマッチしたらtrue、マッチしなければfalseとなりますが、
!で否定していることによりマッチしたらfalse、しなければtrueになります。
つまりでカタカナと「ー」以外（/[^ァ-ヴー　]/u）が`$value`に含まれていなければtrueを返すということです。

```name_kana.php
    public function message()
    {
        return 'カタカナを入力してください';
    }
```
お好みのバリデーションメッセージも作りましょう。
##バリデーションに定義
他のバリデーションルール同様、定義します。
ルールオブジェクトのインスタンスを渡して指定します。

```Validate.php
'kana' => ['nullable', 'max:50', new name_kana],
```

以上でオリジナルバリデーションが完成しました。
カタカナの他に、郵便番号や電話番号のバリデーションも作ることができます。
Pythonで簡単に音声認識を導入

#音声toTXT変換
```python
import speech_recognition as sr
import soundfile as sf
from io import BytesIO
import os

r = sr.Recognizer()

def analyze_wav(wavfile):
    try:
        adata, samplerate = sf.read(BytesIO(wavfile.read()))

        newpath = "new_file.wav"

        path_tmp = os.path.join(os.path.dirname(os.path.abspath(__file__)), "tmp")

        if not os.path.exists(path_tmp):
            os.mkdir(path_tmp)

        savepath = os.path.join(path_tmp, newpath)
        sf.write(savepath, adata, samplerate)

        with sr.AudioFile(savepath) as src:
            audio = r.record(src)
        txt = r.recognize_google(audio, language='ja-JP')

        return txt
    except:
        import traceback
        traceback.print_exc()
```

#サーバーで利用する場合(Flask)

```python
from flask import Flask, request, abort

import speech_recognition as sr
import soundfile as sf
from io import BytesIO
import os

r = sr.Recognizer()

@app.route("/webapp", methods=['POST'])
def webapp():
    wavdata = request.files["file"].stream
    txt = analyze_wav(wavdata)
    return txt

def analyze_wav(wavfile):
    try:
        adata, samplerate = sf.read(BytesIO(wavfile.read()))

        newpath = "new_file.wav"

        path_tmp = os.path.join(os.path.dirname(os.path.abspath(__file__)), "tmp")

        if not os.path.exists(path_tmp):
            os.mkdir(path_tmp)

        savepath = os.path.join(path_tmp, newpath)
        sf.write(savepath, adata, samplerate)

        with sr.AudioFile(savepath) as src:
            audio = r.record(src)
        txt = r.recognize_google(audio, language='ja-JP')

        return txt
    except:
        import traceback
        traceback.print_exc()
```
【PowerAutomate】Outlookを使いメーリングリストからメールを送る方法

以下､メーリングリスト＝MLとする
#注意
注意事項ですが､本記事が唯一絶対の方法とは限りません｡
また記載に間違いがあるかもしれません､何卒ご了承くださいませ｡

#PowerAutomateとは(めっちゃ簡単に)
Microsoft社が提供している4つのPowerPlatformの内の1つです｡
PowerAutomateは積み木やレゴをする感覚で視覚的に自動化がすることが可能でして､
使い方さえマスターしてしまえばあんなことやそんなことも自動化できちゃいます｡

#Outlookを使いMLからメールを送る
PowerAutomateのOutlookアクションを使ってメールを送るフローは簡単に作成できますが
差出人を自身ではなく､MLとしてメールを送るとなると話は変わってきます｡

####１．何が違うのか？
例えば､Outlookから差出人を自分以外に設定してメールを送る場合は
なりすまし設定というものがあり､Outlook自体にMLのアカウント設定を行えば
容易になりすますことができます｡

しかしPowerAutomateで差出人を設定する場合は､なりすましではなく
｢代理送信｣という形式になります｡
つまりMLから代理送信を行う権限が必要となります｡
ちなみに代理送信の権限がない場合は下記のエラーが表示されます｡

>"error":{"message":"指定した送信アカウントの代理でメールを送信する権限がありません。

####２．設定方法(ざっくりver)
Exchange管理センター(EAC)からMLに代理送信許可の追加を行えばいいだけです｡
具体的な説明は後ほど記載しますが､これがまた企業というものは複雑でして
会社さんによっては申請が必要だとか､管理者が不明とかになってるわけですよ｡

設定方法よりも管理者を探して申請する方が100万倍めんどくさいです(私の場合ですが)

####３．設定方法(詳細ver)
こちらを参考にしてください(投げやり笑)
>URL　http://outlook-navi.com/qa/ol9.htm

#最後に
MLを差出人にしてメールを送る場面ってすごく限られてきます｡
例えば､あるサービスを扱っている窓口に問合せのメールを受信すると
個人ではなくチームとして共有で使ってるメールアドレス(またはML)から自動で返信する｡など

一次応答だけでも自動化したいってときにこの記事は役に立つのかなと思います｡

質問や要望がございましたら､可能な範囲で記事を書きます｡
お気軽にコメントください｡
ミドルウェアを使ってNuxtプロジェクトの特定ページに認証機能を導入する

SPAアプリケーションを開発していて特定のページは条件次第で表示させず、トップ画面に戻したいとかあると思います。

Angularにはガードという機能が標準で提供されています。特定のページに対して遷移前にチェックを挟むことができます。
[Qiita Angularのルーティング設定（応用編）](https://qiita.com/Yamamoto0525/items/bebb507416b562b14b77)

Nuxt.jsではそれっぽい名前のものがなさそうですが、ミドルウェアという機能を使えば実現できそうです。
[Nuxt.js公式ドキュメント](https://ja.nuxtjs.org/guide/routing#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2)
>
ミドルウェアを使うと、特定のページやいくつかのページのグループがレンダリングされる前に実行されるカスタム関数を定義することができます。


##環境
- Nuxt.js v2.14.0　**SPAモード**

ユニバーサルモードとSPAモードではミドルウェアの挙動が違います。
本記事ではSSRの挙動は確認していません。
>
ユニバーサルモードの場合、ミドルウェアはサーバサイドでは一度だけ呼び出され（Nuxt アプリケーションへの最初のリクエスト時、またはページの再読込み時）クライアントサイドでは他のルートへ移動したときに呼び出されます。ページを静的に生成しているときは、ミドルウェアはサーバーサイドではなくビルド時に一度だけ呼び出されます。SPA モードの場合、ミドルウェアはクライアントサイドで最初のリクエスト時と他のルートへ移動したときに呼び出されます。


##実装
###ミドルウェアファイルの作成

ミドルウェアとして使用するファイルは`middleware`フォルダに置く必要があります。
テストなので半分の確率でログイン画面にリダイレクトするようにしています。実際にアプリを作成する際は、ストアなどから情報を取得して判定します。

```middleware/guard.js
export default function ({ redirect }) {

    if (Math.random() > 0.5) {
        return redirect('/login');
    }
}
```

###ミドルウェアの利用
`export default`の`middleware`にファイル名を指定することで利用できます。
これでprotectページが開く前（レンダリング前）にミドルウェアの処理が割り込まれるようになります。

```pages/protect.vue
<template>
  <div>
    <div>protect-page</div>
    <img src="~/assets/img/secret.jpeg">
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  middleware: 'guard',
}
</script>
```

##動作検証

ホーム画面からprotectページに遷移した際にミドルウェアが動作するか検証します。

![スクリーンショット 2020-08-31 12.21.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/37ea1549-3d33-df6b-8399-128acce01509.png)

###ミドルウェアによるチェックをパスした場合
通常通りページ遷移を行います。
![スクリーンショット 2020-08-31 13.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/1695a8b9-ff74-185c-0afe-ac2f050f493f.png)

###ミドルウェアのチェックにひっかかった場合
protectページへの遷移がキャンセルされて、ログインページにリダイレクトします。

この場合にprotectページのブラウザ履歴はありません。リソースの読み込みも発生しません。
home→loginという遷移が行われたことになっており、ブラウザバックするとhomeに戻ります。
![スクリーンショット 2020-08-31 13.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/110338af-47dd-8042-af4a-e1b44e816d6a.png)


###直接URL窓にガード対象のページパスを打ち込んだ場合
![スクリーンショット 2020-08-31 13.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537165/bbb62cd9-51ed-4c0a-dbcb-e0eee904e05d.png)

直接URL窓に打ち込んだ場合でも、protectページのレンダリング前にミドルウェアは動作しログイン画面に遷移しました。

###余談
Vue Routerのナビゲーションガードを使って、ガードする方法もあるみたいですが、直接URL打ち込んだ場合に動かずprotectページが表示されてしまったので、Vue Routerのナビゲーションガードは使用しないことにしました。※うまくやればできる？

記述量が少なく、とてもシンプルに実装できたので、特に問題なければこの方法でフロント側のナビゲーションチェックしようと思います。
LibreOffice がモッサリ重い件をどうにかする

長く続くテレワーク生活。当社も勿論例外ではなく今年の四月からは専ら自宅に引き篭もって VPN 接続でシンクライアント環境を経由して社内の開発環境に接続して一日中業務をしています。もはや開発センタはただ機材を設置するためのサーバールームであって、ありがたいことにほぼ出社の必要の無い日々をすごす毎日です。あの満員電車での通勤の日々は一体何だったのか。ちょうど子供もまだ小さいため、自宅で仕事をしながら子の成長を見守ることができる時代が訪れたことに[圧倒的感謝](http://e-village.main.jp/gazou/entry/000363.html)をしております。世の中には大変な思いをしている方も多いでしょうが、自分にとっては今回の騒動はテクノロジーはもちろん衛生面など世の中に革新をもたらし、まさに僥倖であったとつくづく感じているところです。もっとも自分が感染したらそんなことも言ってられないでしょうが。

さて、自分の場合リモート接続する母艦となる環境は iMac Retina 5K です。オンライン会議などは VPN を介するよりも直接通信したほうがスムーズであるため Microsoft Teams や Zoom での会議のときは母艦から直接会議に参加します。そうなると今までほぼ利用していなかった手元の Mac での表計算ソフトウェアを利用する機会がなにかと増えてきます。そこで気になるのがこの LibreOffice の重いこと重いこと。購入後数年たったやや古いマシンとはいえ、メモリも 16GB 程度は搭載しているこのマシンでこんなにモッサリなのは異常です。 Windows 版の Microsoft Excel のサクサク動作とはまるで比較になりません。

そこで今回は LibreOffice のモッサリを少しでも改善するための設定を調べたので忘れないようメモ。同様の記事は[他の人も書いています](https://qiita.com/octopus/items/77fda4254b0296089a29)がそこは気にしない。

調べると LibreOffice の設定でキャッシュのサイズを増やせば解決するというブログ記事がちょこちょこ見つかりますが、実際には[バージョン 6.0 以降より設定画面からこのメモリの設定は削除](https://wiki.documentfoundation.org/ReleaseNotes/6.0/ja#.E3.83.A1.E3.83.A2.E3.83.AA.E8.A8.AD.E5.AE.9A)されています。

記事執筆時点 (2020/08/31) での最新バージョンは 6.4 です。

![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38501/88d6e5df-8687-d748-e6cd-e5afb8b7a3fb.png)

じゃあどうするのかと言うと「熟練者向け設定」を利用します。

LibreOffice - 詳細 の右下にある Advanced Settings を開きます。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38501/45ac8fab-6fff-d1d2-8f65-6b535fe39126.png)

次に org.openoffice.Office.Common - Cache - GraphicManager を探します。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38501/f8d1da88-f54a-475c-bc83-3759a05942e3.png)

そして TotalCacheSize, ObjectCacheSize, GraphicMemoryLimit あたりに適当にデカイ数字を設定しておきます。

これでだいぶモッサリは改善するかと思います。それでもサクサク動くというレベルからは程遠いですが。。

現場からは以上です。
pythonのclassを”かんりか”する

#はじめに
pythonでhelloworldしてから今まで、オブジェクト指向や、クラスの概念をもやっとしたまま用いていました。
そろそろかんりか（完全理解）したいと考え自分なりにまとめようと思います。

#オブジェクト指向とは
オブジェクトや、クラス、インスタンス、メソッド、オーバーライド、インテリヘンス、、など横文字用語が多すぎる！
中学の頃やった世界史を思い出しますね、五賢帝とか、、、(笑)

調べたところオブジェクトと命令型は対になる概念のようです。

命令型プログラミング：データと命令を別々に記述して処理をする
**オブジェクト指向：データと命令を一緒にしてしまう考え方、変数と関数をひとまとめにする考え方**

別々で処理していたデータと命令を合体させて考えようっていうのがオブジェクト指向の概形みたいです。また、ここで言う「命令」を「メソッド」といいます。

**クラスと関数の違い**もこの点にあると考えれます。

#クラス
オブジェクト指向というのは考え方を指していることが分かったと思います。
その考え方を「クラス」を用いると実現できます。クラスは設計図に例えられることが多いですね。

クラスという箱の中に「データ」と「命令（メソッド）」というモノを入れているという考え方もできるのかなと思います。

データとメソッドの考え方は[このサイト](https://note.com/tokitky/n/n6e70d7e7a236)がわかりやすいと感じました。




#インスタンス
「インスタンスを生成する」見慣れた語感です。
instanceは例、実例、事例という意味で、クラスを実際に使うときに”生成”されるものです。

クラスが車の設計図だとしたら、インスタンスはもっと具体的な「ベンツ」「フェラーリ」の設計図と考えていいのではないでしょうか。
クラスはインスタンスを包含しているイメージを持っていますが合ってますでしょうか・・・？

クラスで定義したデータの枠組み（名前、体重など）に具体的な数字を入れたものがインスタンスになるのかなと

#クラスの継承
親クラスをスーパークラス
子クラスをサブクラスといいます

スーパークラスを雛形にして、サブクラスを作ることを継承といいます。
サブクラスでは、スーパークラスのデータやメソッドを利用できるほか、別のメソッドを追加して機能を拡張できます。
また、スーパークラスのメソッドを書き換えて、上書き保存することをオーバーライドという。

複数のスーパークラスから継承することを多重継承という。