OmniAICreator/Qiita-1.07M huggingface dataset:
AWSソリューションアーキテクト―アソシエイト用語集②ストレージ編

# <font color="#ff9900">■</font> はじめに
https://qiita.com/tatsumicro/items/55c191eea8553a52463c


# <font color="#ff9900">■</font> ストレージ
https://aws.amazon.com/jp/products/storage/

|  カテゴリ  |  AWS のサービス  |
|----|----|
|  オブジェクトストレージ  |  **S3**  |
|  ファイルストレージ  |  **EFS**、**FSx for Windows File Server**、**FSx for Lustre**  |
|  ブロックストレージ  |  **EBS**  |
|  バックアップ  |  **Backup**  |
|  データ転送  |  **Storage Gateway**、**Snow ファミリー**  |
|  エッジコンピューティングとストレージ  |  **Snow ファミリー**  |

# <font color="#ff9900">■</font> Storage Gateway
###### キャッシュ型ボリューム
> 頻繁にアクセスするデータをローカルにしつつ、
> S3をプライマリデータストレージとして利用
> iSCSIデバイスをアタッチ

###### 保管型ボリューム
> ローカル

###### ファイル
> S3

###### テープ
> ローカル

# <font color="#ff9900">■</font> EFS
###### どんな時に使用する？
> NFSv4プロトコル
> インスタンス間のデータ共有に使用する
> （インターネット経由の共有はできない）
> 
> 10 GB/s、50万IOPS


# <font color="#ff9900">■</font> FSx
###### FSx for Windows
> 高速ストレージ、数百万IOPS、DFS名前空間、ファイルサーバ、数十G/s
> SMBプロトコル


# <font color="#ff9900">■</font> S3
###### S3の特徴
> 高可用、高耐久性のストレージ

###### S3の暗号化
> SSE-S3 ・・・ S3管理キーを利用したサーバサイド暗号化（AES-256）
> SSE-KMS ・・・ KMS管理キーを利用したサーバサイド暗号化
> SSE-C ・・・ クライアント提供のキーで暗号化

###### S3のクロスリージョンレプリケーション
> 異なるリージョンの2つのバケット間でオブジェクトを自動的に非同期にコピーする
> （異なるアカウント間でも可能）

###### S3のIA (Infrequent Access: 低頻度アクセス)
> S3 One Zone-IA ・・・ アクセス頻度低い、コスト低い、データ取り出しは通常の標準クラスと同じく即時可能、単AZだからコスト低い→データ冗長性低い→再作成可能なもの
> S3 Standard-IA ・・・ 複数AZ、アクセス頻度低い

###### S3のストレージタイプ
|  ストレージタイプ  |  特徴  |
| ---- | :----: |
|  Standard  |  アクセス頻度が高い、アクセス効率が良い  |
|  Glacier  |  長期用  |
|  Glacier deep archive  |  長期用  |
|  RRS (Reduced Redundancy)  |  冗長性が低い、安い、可用性重視  |

###### 3か月後に安くしたい？
> ライフサイクルポリシーによって、途中でストレージタイプを変えてデータを移行できる

###### オブジェクトの誤った削除を防ぎたい？
> 1. `バージョニング機能`で、削除しても復元できるようにする
> 2. `MFA認証`で、削除するたびに認証しないといけないようにする

###### 一時的に共有したい場合は？
> `期限付きの事前著名付きURL`を発行する

###### 簡易なWebサイトを公開するには？
> `HTTP`で公開する場合は、`静的ホスティング`で公開する
> `HTTPS`でも公開したい場合は、`CloudFront`と`静的ホスティング`を組み合わせて公開する

###### マルチパートアップロードとは？
> 大きなファイルをアップロードする

###### オブジェクトキー名のプレフィックスでPUT要求を早くする！？
> ランダムプレフィックス（昔）、日付などのプレフィックス（今）

###### 結果整合性と強い整合性？
> 結果整合性とは、変更中のデータにアクセスできるが、参照したデータが古い可能性がある
> 強い整合性とは、変更中のデータにはアクセスできず、参照したデータは必ず最新である
>
> S3は強い整合性


# <font color="#ff9900">■</font> S3 Glacier
###### S3 Glacierの特徴
> デフォルトで暗号化

###### S3 Glacierの取り出し方法
|  取り出し方法  |  時間  |  コスト  |
| ---- | :----: | :----: |
|  迅速取り出し  |  1~5分  |  |
|  標準取り出し  |  3~5時間  |    |
|  大容量取り出し  |  5~12時間  |  安  |

###### S3 GlacierのVault Lock
> ボールトロック・ポリシーを使用して、各ボールトに対するコンプライアンス管理
> （ボールト ・・・ アーカイブを格納するコンテナ）


# <font color="#ff9900">■</font> EBS
###### EBSのストレージタイプ
|  ストレージタイプ  |  パフォーマンス  |  コスト  |
| ---- | :----: | :----: | :----: |
|  汎用SSD  |    |    |
|  プロビジョンドIOPS SSD  |  高  |    |
|  スループット最適化HDD  |  高  |  低  |
|  Cold HDD  |    |    |

###### EBSのストレージタイプと特徴
> プロビジョンドIOPS SSD ・・・ 高速、コストが最も高い、スループットとIO性能は最も高い
> スループット最適化HDD ・・・ 高速と安いの両立

###### ビッグデータやログデータに使用する最適なストレージタイプは？
> `スループット最適化HDD`　（安くて速い）
AWSソリューションアーキテクト―アソシエイト用語集①データベース編

https://qiita.com/tatsumicro/items/55c191eea8553a52463c

# <font color="#ff9900">■</font> データベース
https://aws.amazon.com/jp/products/databases/

|  カテゴリ  |  AWS のサービス  |
|----|----|
|  リレーショナル  |  **Aurora**、**RDS**、**Redshift**  |
|  キー値  |  **DynamoDB**  |
|  インメモリ  |  **ElastiCache for Memcached**、**ElastiCache for Redis**  |
|  ドキュメント  |  **DocumentDB (MongoDB 互換)**  |
|  ワイドカラム  |  **Keyspaces (Apache Cassandra 向け)**  |
|  グラフ  |  **Neptune**  |
|  時系列  |  **Timestream**  |
|  台帳  |  **QLDB**  |


# <font color="#ff9900">■</font> SQL and NoSQL
|  サービス名  |  Fully Managed  |  SQL  |  NoSQL  |
| ---- | :----: | :----: | :----: |
|  RDS  |  〇  |  〇  |    |
|  Aurora  |  〇  |  〇  |    |
|  Redshift  |  〇  |  〇  |    |
|  DynamoDB  |  〇  |    |  〇  |
|  EMR  |  〇  |    |  〇  |
|  Elastic Cache  |  〇  |    |  〇  |
|  EC2  |    |  〇  |  〇  |
###### Q. 自社内でデータベースを管理したい場合は？
> → EC2内にデータベースを構築する


# <font color="#ff9900">■</font> RDS
###### 読み込み処理のパフォーマンスを上げるには？
> `リードレプリカ`によって、読み込み処理に対する応答処理を複数台で分散する

###### 可用性を上げるには？
> `マルチAZ`によって、AZ障害によるシステム停止の可能性を低くする

###### レプリケーションラグとは？
> 非同期的にコピーされるレプリカが間に合わず、最新のはずのデータが古いままになっている

###### データを暗号化するには？
> → 暗号化を有効化すると、DBインスタンス、自動バックアップ、リードレプリカ、スナップショットの暗号化が可能である

###### 拡張モニタリング
> DBインスタンスのプロセス、スレッドのCPU使用率などの監視をする
> 30日間CloudWatch Logsに保存する

###### プライマリが停止したら？
> CNAMEレコードがプライマリからセカンダリに移行する


# <font color="#ff9900">■</font> Aurora
###### 障害時に別リージョンでもデータを利用するには？
> 複数リージョンへ`リードレプリカ`を作成しておく
> （スナップショットでもデータの移行はできるが、時間がかかる）

###### 互換性のあるデータベースは？
> `MySQL` （標準的なMySQLより5倍高速）
> `PostgreSQL`（標準的なPostgreSQLより3倍高速）


# <font color="#ff9900">■</font> Redshift
###### Redshiftの特徴
> `ペタバイト`規模のデータウェアハウス
ストレージ超過で課金が始まる

###### Redshiftクラスター
> 拡張VPCルーティング ・・・ VPCに出入りするCOPY、UNLOADトラフィックを監視する


# <font color="#ff9900">■</font> ElastiCache
###### ElastiCacheの特徴
> インメモリ型のキーバリューストア、高速なデータベース
> 行動データの高速処理


# <font color="#ff9900">■</font> DynamoDB
###### Auto Scaling
> テーブルとグローバルセカンダリインデックス（GSI）の容量増加と自動化（コスト最適）

###### DAX
> 1つのみのプライマリーノードと0~9個のリードレプリカ

###### グローバルテーブル
> マルチリージョンにマルチデータベースをデプロイする
> 高い冗長化を実現
chromeのフルスクリーンショットが途切れる場合の原因と解決策

chromeでフルスクリーンショットを撮るには、

1. F12キーでデベロッパーツールを開く
2. エミュレーターの三点ボタンを押してCapture full size screenshotを選択
![2021-05-29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620685/75f1751d-517d-d3f7-1114-7c754b993456.png)


だが、まれに上手く撮れない場合がある。
画像の中身が滅茶苦茶になっている場合や、途中で途切れて真っ白になってしまう場合などだ。
（この画像の場合はヘッダーが変な位置に表示され、画面の途中で途切れて真っ黒になっている）

![www.php.net_urlhowto.php (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620685/d5f07ef7-e1a4-7ef9-59f6-f5e31610c18f.png)

これはキャプチャボタンを押した時、画面の表示位置が最上部になっていないからだと思う。
ページを途中までスクロールした状態でキャプチャボタンを押すと、上手く撮れないことが多い。
ページ位置を最上部まで戻した状態でもう一度キャプチャを撮ると、今度は上手くいった。
![www.php.net_urlhowto.php.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620685/e95c39f9-b455-3846-8d4d-9ea6a94b2cc1.png)
Nuxt.jsで作成したアプリをHerokuにデプロイする際の注意点


# HOSTに0.0.0.0を指定

[NuxtJSのリファレンス](https://ja.nuxtjs.org/docs/2.x/deployment/heroku-deployment/)に記載がありますが、Herokuの設定で`HOST=0.0.0.0`を指定する必要があります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/41c1ee7d-49b6-2a37-89ac-6ca3aee6a4c5.png)
Laravelで毎月の支出を確認するお小遣い帳をつくる(1)

# 記事の目的
- 約2ヶ月ほどさわっていたLaravelの使い方の備忘録
- 未来の自分のため、artisanコマンドぐぐったり教材見返さなくてこれを見返せばいいようにしたい。

# 注意点
- 下記の大きな流れにそって、記事を更新していくので、小出しに出していきます。
- 経験がまだまだ浅いので、内容に不備があればコメントいただけると助かります。

## 大きな流れ
- Dockerで環境構築
- CRUD作成
- クロス集計について
- UIの調整（Bootstrapを使用） 
- jsライブラリとの連携
- リファクタ（未定）
- AWSのEC2にデプロイ（未定）

# 環境
- MacOS 10.15.6
- PHP 7.4.18
- Composer 2.0.10

# Dockerで環境構築
- こちらの記事が神なので、これを参考にする。
  - https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4
- なお、php-MyAdminを使用したいので、下記記事を参考にしながた、docker-compose.ymlには下記記事の内容を追記する。
  - yamlファイルはインデントが意味をもつので注意
  - 下記記事だと`volumes`は上の方にあるけど、元々のyamlファイルのは下の方に書いてあるので注意。
　　- https://qiita.com/ucan-lab/items/a0c8d6d73aca03325362
- buildをする。-dはつけなくてもいいけど、バックで動いてくれるのでつけた方が便利。
  - `docker compose up -d --build`
- 立ち上がったら、docker ps + localhost:8080で確認。ちなみにこの時点ではLaravelが入ってないので、いまからインストールします。
## appに入って、Laravelインストール
- `$ docker compose exec app bash`
- `$ composer create-project --prefer-dist "laravel/laravel=8.*" .`
  - なんか、ターミナル画面がばぐった(途中で謎の改行が自動で入ってしまい、引数が変だよとエラーがでる)のでLaravelのver引数を指定せず、下記コマンドだけでLaravel立ち上げ
  - `$ composer create-project --prefer-dist`
  - `php artisan -V`でLaravel Framework 8.40.0と表示される。（Laravelのver指定せずインストールすると最新版が入るので、将来インストールした時には8じゃない可能性もある）。exitコマンドでコンテナから出ます。
  - ブラウザでhttp://localhost:10080/ でLaravel画面が立ち上がります。
- とりあえず、ここまで。cloneしてきたファイル名変えたりとかしたいから、やはり１からつくりなおす可能性もあり
【Rails】pgのバージョンの関係でherokuへデプロイできない

#エラー内容

``$ git push heroku master``

でherokuにデプロイ成功したように見えたが、errorとなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339483/6faa68d7-45b6-99e4-51d7-db0f5ac92c11.png)

# 原因の特定

``$ heroku logs``

してみると、下記のようなエラーが出た。

```
at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=u-app-beta.herokuapp.com request_id=955c19bf-bd70-4a3c-a40a-62435a4becc3 fwd="118.21.136.11" dyno= connect= service= status=503 bytes= protocol=https
```


いろいろ試してみた中で、

``$ heroku run console``

で下記エラーにたどり着いた。

```
Error loading the 'postgresql' Active Record adapter. Missing a gem it depends on? can't activate pg (~> 1.1), already activated pg-0.20.0. Make sure all dependencies are added to Gemfile. (LoadError)
```

'postgresql'のバージョンが合っていない？
（既に'0.20.0'がアクティベートされていて、'1.1'をアクティブにできない）


# 解決

[同じエラーの記事](https://stackoverflow.com/questions/54527277/cant-activate-sqlite3-1-3-6-already-activated-sqlite3-1-4-0/54729071)を見つけた。

'sqlite3'の部分を'pg'に読み替えて、、、

``$ gem uninstall pg -v 0.20.0``

を実行。

```Ruby:Gemfile
group :production do
  gem 'pg', '0.20.0'
end
```
となっていたところを

```Ruby:Gemfile
group :production do
  gem 'pg', '1.1'
end
```
と書換えて、

``$ bundle update``

を実行。

``$ git commit``

して、

``$ git push heroku``

でうまく動きました！
PyJWTを利用したES256形式のJWT生成方法 メモ

* PyJWTを利用したES256形式のJWTの生成方法についてメモする。

  

## 事前準備

### 署名用公開鍵・秘密鍵の生成

* [こちら](https://www.sassy-blog.com/entry/20170414/1492169790#3-3ECDSA-using-P-256-and-SHA-256ES256)を参考にOpenSSLを利用して生成する。

### PyJWTインストール

```shell
pip install PyJWT
```


## 実装

* [Sign in With Apple用クライアントシークレット例](https://developer.apple.com/documentation/sign_in_with_apple/generate_and_validate_tokens)を参考にJWTの生成と検証を行う。

```python
import jwt

##### JWT 生成 ####
# 1. OpenSSLで生成した署名用秘密鍵の読み込み
with open('./es256.key.pkcs8') as f_private:
    private_key = f_private.read()

# Sign in With Apple用クライアントシークレット例を参考にヘッダー、ペイロードを定義
# 以降のデコード処理でこけるため、expを未来日に変更する。
header = {
    'alg': 'ES256',
    'kid': 'ABC123DEFG'
}
payload = {
    'iss': 'DEF123GHIJ',
    'iat': 1437179036,
    'exp': 4102326000,
    'aud': 'https://appleid.apple.com',
    'sub': 'com.mytest.app'
}

# 2. JWT生成
encoded_jwt = jwt.encode(payload, private_key,
                         algorithm='ES256', headers=header)
print("encoded_jwt:", encoded_jwt)

##### JWT 検証 #####
# 1. OpenSSLで作成した署名用公開鍵の読み込み
with open('./es256.pub.key') as f_public:
    public_key = f_public.read()

# 2. JWTデコード
# ※audが含まれている場合は引数に`audience`が必要
decoded_jwt = jwt.decode(encoded_jwt, key=public_key,
                         audience='https://appleid.apple.com', algorithms=['ES256'])
print("decoded_jwt:", decoded_jwt)

```



### 動作確認

```shell
python jwt_test.py
encoded_jwt: eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiIsImtpZCI6IkFCQzEyM0RFRkcifQ.eyJpc3MiOiJERUYxMjNHSElKIiwiaWF0IjoxNDM3MTc5MDM2LCJleHAiOjQxMDIzMjYwMDAsImF1ZCI6Imh0dHBzOi8vYXBwbGVpZC5hcHBsZS5jb20iLCJzdWIiOiJjb20ubXl0ZXN0LmFwcCJ9.TAfLTlq8K9utFMYm2biURdkjL6453wuLMM17NuPQVibJWv0lpE9BiHm4IaIWof9mGqnA11xRdIkGWDmzROZqWQ
decoded_jwt: {'iss': 'DEF123GHIJ', 'iat': 1437179036, 'exp': 4102326000, 'aud': 'https://appleid.apple.com', 'sub': 'com.mytest.app'}
```



## 参考情報

* [PyJWT - Docs - API Reference](https://pyjwt.readthedocs.io/en/stable/api.html)
* [Javaで秘密鍵を使用してRSA256、HMAC256、ECDSA256それぞれの暗号化を行う実装サンプルについて](https://www.sassy-blog.com/entry/20170414/1492169790)
* [encode->decode returns: InvalidAudienceError: Invalid audience](https://github.com/jpadilla/pyjwt/issues/120)
vue routerのナビゲーションガード機能を利用して外部サイトへリダイレクトする方法 メモ

* 検査目的で外部サイトへのリダイレクト機能を持つモックアプリをVue.jsで作る必要があり、その実現方法を調べた。

## 実現方法

* ナビゲーションガード機能のルートガード`beforeEnter`と`window.location`を組み合わせる。

### ナビゲーションガード

* 画面遷移(ナビゲーション)を制御するためのフック機能。


* ルートガードメソッド`beforeEnter`
  * ルートの遷移前に実行されるメソッド。
  * ここで`window.location`で遷移先を指定して、リダイレクトさせる。

### `window.location`

* 現在表示しているWebページの位置情報を表すプロパティ。
* 新しい値を代入することで、その値(ページ)に遷移させることができる。

### 実装
* `router/index.js`

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
	... ,
  {
    path: '/external_site',
    name: 'external',
    beforeEnter() {
      window.location = "https://www.example.com/top"
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
```



## 参考情報

* [VueJs vue-router linking an external website](https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website)
* [vue-routerでbeforeEnterとwindow.locationを組み合わせて外部サイトへページ遷移させてみた](https://polidog.jp/2019/01/24/vue-router/)
* [Window.location](https://developer.mozilla.org/ja/docs/Web/API/Window/location)
npmパッケージを公開するときにやらなきゃいけないこと

npm publishを実行しようとしたらできなくて泣きそうになった：

```shell:failure.sh
$ npm publish ./
npm notice
npm notice package: newman-reporter-test@1.0.0
npm notice === Tarball Contents ===
npm notice 557B package.json
npm notice === Tarball Details ===
npm notice name:          newman-reporter-test
npm notice version:       1.0.0
npm notice package size:  361 B
npm notice unpacked size: 557 B
npm notice shasum:        70f20b94eb8816931feda3f041b06bb0647aaa99
npm notice integrity:     sha512-R2P6RDOWq6PpW[...]fJEvcJ5qmFgKw==
npm notice total files:   1
npm notice
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/newman-reporter-test - Forbidden
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxxxxxx\AppData\Roaming\npm-cache\_logs\2021-05-28T22_03_29_322Z-debug.log
```

以下の手続きが済んでいることを確認ししたら大丈夫だった：

* npm loginコマンドでログインしている
* ユーザー登録後の、メールアドレス確認が完了している

```shell:success.sh
$ npm publish ./
npm notice
npm notice package: newman-reporter-test@1.0.0
npm notice === Tarball Contents ===
npm notice 557B package.json
npm notice === Tarball Details ===
npm notice name:          newman-reporter-test
npm notice version:       1.0.0
npm notice package size:  361 B
npm notice unpacked size: 557 B
npm notice shasum:        70f20b94eb8816931feda3f041b06bb0647aaa99
npm notice integrity:     sha512-R2P6RDOWq6PpW[...]fJEvcJ5qmFgKw==
npm notice total files:   1
npm notice
+ newman-reporter-test@1.0.0
```
git@github.com: Permission denied (publickey)　が出たときの対処法


## Permanently added the RSA host key for IP address

```
Warning: Permanently added the RSA host key for IP address '[ip address]' to the list of known hosts.
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
```

## 対処法

```
$ ssh-keygen -R '[ip address]' 
```


## Please make sure you have the correct access rights

```
$git clone git@github.com:xxxxxx/xxxxx.git
Cloning into 'docker-elk'...
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
```

## 対処法

### 鍵を生成
```
$ ssh-keygen -t rsa -C [mail address]
Enter file in which to save the key (/home/vagrant/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
```

```
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/[pc name]/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/[pc name]/.ssh/id_rsa.
Your public key has been saved in /Users/[pc name]/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:[hash] [mail address]
The key's randomart image is:
+---[RSA 3072]----+
|      o o.E      |
|     o . .       |
|    x x     .    |
|     x x   x .   |
|    * * x + + .  |
|   o = . x = . . |
|    . ..+x+ . .  |
|       +xxx* o . |
|       =BBBo=..  |
+----[SHA256]-----+
```
（一応適当に書き換えてあります）

### 鍵をコピー
```
$ less ~/.ssh/id_rsa.pub
```
```
ssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx [mail address]
```
[mail address]以外の部分をコピーする

### github settingへ遷移
https://github.com/settings/keys

![スクリーンショット 2021-05-28 9.08.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/0639eea0-a9f5-5e4f-e8e7-db8ec561419b.png)

「New SSH　Key」を押下

### 鍵を追加
![スクリーンショット 2021-05-28 9.19.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/996a92e2-ae09-57fa-d4b1-2f3f06d5fe72.png)

### 疎通確認
ターミナルに戻り疎通を確認する
```
$ vim ~/.ssh/config 
```

```
Host github
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git
```
これを貼り付ける

```
ssh -T git@github.com
Warning: Permanently added the RSA host key for IP address '[ip address]' to the list of known hosts.
Enter passphrase for key '/Users/[pc name]/.ssh/id_rsa': 
Hi [git config name]! You've successfully authenticated, but GitHub does not provide shell access.
```

こんな感じの、successfullyメッセージが表示されたら完了。
JavaScriptで「return a && b」の構文が便利すぎた話

タイトル通りです。

**＊ただ、あんまり使わない方がいい構文なのかも。。。（？）詳細はコメント欄を見てください(*´ω｀*)ﾉ**

JavaScriptでは、下記のような構文があります。

```JavaScript
return a && b
```

これは**「a が偽の場合は a を返し、a が真の場合は b を返す」**という構文です。

aが真の時にbを返すってなんか違和感ですが、こんな感じらしいです。

しかし、なかなかに便利。
ESP32Pingを使う（2021年梅雨）

# 1. はじめに
Ardino-IDEを用いてESP32でpingをするためには、ライブラリが必要なようです。今回は、ESP32Pingライブラリを試して見ました。ただ、Arduino-IDEに候補として上がってこなかったため、スケッチと同梱し（手動インストールせずに）利用しました。（この記事は2021年5月現在のものです。今後、Arduino-IDE上にpingライブラリの候補として上がるかもしれません）

# 2. ESP32pingライブラリをクローン

次のページからzipをダウンロードし展開します。(もしくは、このリポジトリをgit clone し、そのフォルダに移動します）
https://github.com/marian-craciunescu/ESP32Ping
![download_repzip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/1926b404-69ae-34fa-8689-b8f9f116c0c8.png)


# 3. サンプルを試す

ESP32Pingのフォルダ直下にある次の4つのファイルを ``` examples\SimplePing``` フォルダにコピー(or移動)します。

- ESP32Ping.cpp
- ESP32Ping.h
- ping.cpp
- ping.h

![filecopy_esp32ping.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698531/4b6b90c6-118a-2a3c-c39e-ae5136a36b37.png)


そのままでは動きません(ライブラリとしてインストールしていないため)ので、少し修正します。

``` ESP32Ping.h ``` を開きます。27行目にある

```c++
#include <ping.h>
```
を

```c++
#include "ping.h"
```
に変更します。つまり、不等号```<>```をダブルクオーテーション```"```に書き換えます。

``` SimplePing.ino ```も同様です。7行目にある


```c++
#include <ESP32Ping.h>
```
を

```c++
#include "ESP32Ping.h"
```
に変更します。

これらは、ESP32Pingライブラリをインストールせずに、スケッチと同梱して利用するための変更です。


あとは、SSIDとパスワード、pingしたいリモートIPアドレス(192.168.1.1など)を書き換えます。

たったこれだけです。

# 3. 実行

焼き込んだら、シリアルモニタを開きます。
Wi-Fiに接続されると、自身のIPアドレスが表示され、対象のIPアドレスが表示され、成功すると、Successと表示されます。

```
Connecting to WiFi
.......................................
WiFi connected with ip 192.168.1.3
Pinging ip 192.168.1.1
Success!!
```
（これは192.168.1.1 に対してpingした例です）

# 4. おわりに

ESP32でpingをする場合、別途ライブラリが必要という点に驚いたのですが、そのライブラリ多く、どれを選ぶか結構悩みました。
今回はESP32Pingを使いましたが、他にも色々とあるようです。例えば次の記事が、とても参考になります。ライブラリの手動インストール方法も説明されています。
https://qiita.com/nanbuwks/items/06f87b278a3d2269e39a

ライブラリがあれば、ping自体は手軽にできるということが伝わればと思います。

おっと、記載するのを忘れてました。
pingが何か分からない場合は、「[ping コマンド 初心者](https://www.google.com/search?q=ping+%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89+%E5%88%9D%E5%BF%83%E8%80%85)」みたいな単語で検索すると良いでしょう。

pingをESP32に行わせる必要性ですが、基本的には無いでしょう。それぞれの目的のサービスにアクセスし、タイムアウトになれば、それはサーバが落ちていると判断して、その場合の処理を行う、という実装で良いと思います。今回私は、ESP32自身にネットワークの状態を把握させたいと思いpingについて調べました。自身のパソコンやラズパイで行うのも手軽で良いのですが、作業している最中に、いちいちコマンドで行うのも面倒です。そこで、状態をLEDで表示することを考えました。NGであれば赤、OKであれば緑のLEDを点灯させました。いわゆるパトライト(←(株)パトライトの商標とのこと)みたいなものです。 それにはESP32は都合が良い訳です。今回の例のように、とても簡単に作ることができました。
【glot.io】paiza.ioやWandboxに代わるオンラインプログラム実行API

# glot.ioとは

[glot.io](https://glot.io/)とは、Webサイト上のエディタで書いたプログラムの実行やスニペットの保存・共有ができるサービスです。またどちらの機能にもAPIが用意されているため、汎用的な利用ができます。  

# 3つのサービスの比較

主にAPIとしての利用を目的とした比較です。

### glot.io

- APIからスニペットを登録して実行可能
- 複数ファイル対応
- 実行時コマンドを指定可能
- 実行時間は15秒まで
- 出力は100KiBまで
- メモリは500MBまで
- 対応言語  
Assembly, ats, Bash, C, Clojure, COBOL, CoffeeScript, C++, Crystal, C#, D, Elixir, Elm, Erlang, F#, Go, Groovy, Haskell, Idris, Java, JavaScript, Julia, Kotlin, Lua, mercury, Nim, Nix, OCaml, Perl, PHP, Python, Raku, Ruby, Rust, Scala, Swift, TypeScript

https://glot.io/api

### paiza.io

- コードの共有機能はあるが、APIからの利用は不可
- 実行時間は2秒まで(要検証、実際1秒で打ち切られている？)
- APIの使用方法が分かりやすい [APIインターフェース](http://api.paiza.io/docs/swagger/#!/runners/)
- メモリは512MBまで
- 対応言語  
Java, PHP, Ruby, Python2, Perl, C, C++, C#, JavaScript, Objective-C, Scala, Go, Haskell, CoffeeScript, Bash, Erlang, R, COBOL, VB, F#, Python3, Clojure, D, Swift, Kotlin, Elixir, Rust, Scheme, Nadesiko, TypeScript, MySQL

https://paiza.io/help?locale=ja-jp

### Wandbox

- 言語実行環境のバージョンを指定可能
- 複数ファイル対応
- 実行時間は10秒まで(要検証)
- メモリ制限は不明
- 対応言語  
Bash, C, C#, C++, CLISP, CoffeeScript, Crystal, D, Elixir, Erlang, F#, Free Pascal, Go, Groovy, Haskell, Java, JavaScript, Lazy K, Lua, Nim, OCaml, OpenSSL, Perl, PHP, Pony, PyPy, Python, R, Rill, Ruby, Rust, Scala, SQL, Swift, TypeScript, VimScript

https://github.com/melpon/wandbox

### まとめ

glot.ioのスニペット機能があることと実行時間が15秒までという点は、他の2つに比べ大きなメリットだと思います。また、APIの仕様もシンプルでわかりやすいです。  

# glot.ioをPythonから使うためのライブラリ

https://pypi.org/project/glotio-api/1.0.1/

### インストール

```
$ pip install glotio-api
```

使用例

```py
from glotio import Runner 


g = Runner("[YOUR_API_KEY]")

# language list
print(Runner.get_lang().keys())

g.set_lang("python")
code = "import sys;print(input() + ', ' + sys.argv[1])"
g.set_code(code, filename="main.py")
g.set_stdin("input text")
g.set_command("python3 main.py 'command line argument'")

result = g.run()
print(result)
```
pyrealsense2 読み込んだbagファイがループ再生されてしまう件

bagファイルを読み込んで再生させると永久ループしてしまうので，ループさせずに終わらせる方法を紹介します．


bagファイルを読み込むコードはRealsenseの公式サンプルコードが参考になります．
[Example: Read Bag File](https://github.com/IntelRealSense/librealsense/blob/master/wrappers/python/examples/read_bag_example.py)


# ループフラグをFalseに設定
永久ループされてしまう原因は以下のbagファイルを読み込んでいる部分にあります．

```python
rs.config.enable_device_from_file(config, file_name)
```
このenable_device_from_file関数にはrepeat_playbackというbool型のデフォルト引数があり初期値はTrueに設定されています．
このrepeat_playbackがTrueに設定されていると，ループ再生されてしまいます．
そのため，Falseに設定することでループ再生は解消されます．

```python
rs.config.enable_device_from_file(config, file_name, repeat_playback=False)
```
出典：[Pyrealsense2 Documents: pyrealsense2.config](https://intelrealsense.github.io/librealsense/python_docs/_generated/pyrealsense2.config.html)

しかし，Falseに設定したことで次のようなエラーが発生してしまうかと思います．

```
Traceback (most recent call last):
  File "/Users/user/realsense/play_bug.py", line 54, in <module>
    frames = pipeline.wait_for_frames()
RuntimeError: Frame didn't arrive within 5000
```

このエラーの解消方法について説明します．

# タイムアウトエラーの解消
エラー文にもあるようにエラーの原因はwait_for_frames関数のタイムアウトによるものです．

```python
frames = pipeline.wait_for_frames()
```

wait_for_frames関数は次のフレームが利用できるようになるまで待ち続ける関数で，timeout_msというint型のデフォルト引数があり，初期値は5000に設定されています．
そのため，5000ms待っても次のフレームがなければ，タイムアウトエラーとなります．
解消方法として，wait_for_frames関数の代わりにtry_wait_for_frames関数を使うか，try-except構文で処理する方法が考えられます．
try_wait_for_frames関数を使う場合は，次のように書くことでタイムアウトエラーに陥ることを解消できます．

```python
while Ture:
    flag,frames = pipeline.try_wait_for_frames()
    if flag == False: break
```
try-except構文で処理する場合は，次のように書くことでタイムアウトエラーに陥ることを解消できます．

```python
while Ture:
    try: frames = pipeline.wait_for_frames()
    except: break
```


出典：[Pyrealsense2 Documents: pyrealsense2.pipeline](https://intelrealsense.github.io/librealsense/python_docs/_generated/pyrealsense2.pipeline.html)
Laravelでデータベースのテーブル名やカラム詳細情報を取得する方法

## はじめに
この記事はLaravelを使ったテーブル名一覧や各カラム詳細情報の取得方法についての解説記事です。

## 動作確認環境
- PHP 8.0
- Laravel 8.0

※下位環境でも動作する場合がございます

## 全テーブル情報の取得
```php
use DB;

// 全スキーマ情報を取得
$schema = DB::connection()->getDoctrineSchemaManager();

// テーブル名一覧を取得
$tableNames = $schema->listTableNames();

foreach ($tableNames as $tableName) {
    // テーブル情報を取得
    $schema = DB::connection()->getDoctrineSchemaManager();
    $table = $schema->listTableDetails($tableName);

    // カラム情報を取得
    $columns = $table->getColumns();

    $columnNames = [];
    $columnComment = [];
    foreach ($columns as $column) {
        $columnNames[] = $column->getName();
        $columnComment[] = $column->getComment();
    }
}
```

## 各カラム情報
$column->get****()とメソッドを呼び出すことでカラムのそれぞれの詳細を取得することができます。

```php
array:2 [
  "id" => Doctrine\DBAL\Schema\Column^ {#858
    #_type: Doctrine\DBAL\Types\IntegerType^ {#875}
    #_length: null
    #_precision: 10
    #_scale: 0
    #_unsigned: false
    #_fixed: false
    #_notnull: false
    #_default: null
    #_autoincrement: false
    #_platformOptions: []
    #_columnDefinition: null
    #_comment: "hoge1"
    #_customSchemaOptions: []
    #_name: "id"
    #_namespace: null
    #_quoted: false
  }
  "name" => Doctrine\DBAL\Schema\Column^ {#886
    #_type: Doctrine\DBAL\Types\IntegerType^ {#875}
    #_length: null
    #_precision: 10
    #_scale: 0
    #_unsigned: false
    #_fixed: false
    #_notnull: false
    #_default: null
    #_autoincrement: false
    #_platformOptions: []
    #_columnDefinition: null
    #_comment: "hoge2"
    #_customSchemaOptions: []
    #_name: "name"
    #_namespace: null
    #_quoted: false
  }
]
```
CesiumJS Getting Started (Build a Flight Tracker)のフォロー

# はじめに

おじさん、ハイテンション！(^^)/ よなよな続きをフォローしています。CESIUMのtutorial の次のものをなぞりました。全て動きました。

モデルの表示に時間がかかる時がありますが、おおむね想定通り動きます。glitch というプラットフォームを使い、java script の書いてある　index.html を編集すると、それがすぐに反映されて動作を確認できました。便利だなー。

https://cesium.com/docs/tutorials/build-a-flight-tracker/

# 作業メモ

### Step 1

チュートリアルのリンクをひらくと、Glitchのテンプレートのプロジェクトが開きます。ここで編集と動作確認ができます。このチュートリアルはここで全て完結します。すごいなー。
sign in もせずに、最後まで行けました。

https://glitch.com/edit/#!/flame-poised-earthquake

default で使える asset は以下だそうです。

- Cesium World Terrain: 解像度１ｍのデータ
- Cesium OSM Buildings: Open Street Mapのデータ
- Bing Maps Aerial Imagery: 解像度15cmの航空写真 

### Step 2

Step 1のときにあったindex.html の const viewer = ... の部分をコメントアウトして、step2 のコードをペーストします。飛行場の建物が表示されます。3D buildings をデフォルトのモデル？から持ってきているようです。

```javascript
const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/36b4f2ff-a894-b1c6-5736-b33f4eb5a207.png)

### Step 3

続きのコードをGlitch に貼り付けます。赤い点をクリックすると、情報が表示されます。チュートリアルに書いてある通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/7e2704c9-a6b9-eadd-01be-2517ab7cb215.png)

### Step 4

飛行場から飛び立って山々をこえて移動してくところが、アニメーションになりました。
Step 3のコードを貼り付ける前に、const viewer = ... の行はコメントアウトしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/6885ad3b-ccf6-2c61-24f3-531c464c3f9b.png)

### Step 5 

インストラクションに従い、サイトにあるファイル Cesium_Air.glb をダウンロードし、Secium ion の自分のasset に upload します。「3D Model (Convert to glTF)」としてupload しました。モデルが表示されますが、プロペラが回っている、アニメーションだ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/1bf8de82-c4c8-adea-3104-629b9671d5dd.png)

### Complete Source Code

最後にindex.html のコードのすべてがあるので、コピペしました。token と asset ID のところだけ書き換えると、飛行機と飛行場のビルのモデルを使って、アニメーションでフライトが再現されました。すばらしい。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/8aab4776-ac23-2163-5969-524bdfb16aa6.png)

# まとめ

とりあえず、こちらのtutorial もそのまま動いた。CESIUM ion すごいなー。
次のステップは、、、なんだろう。他のデータとか動かしてみたい。建物情報のロード、アニメーションの仕組みを理解して、自分も使ってみたい。日本のデータも調べたい。たくさんあるなぁ。。。もう寝ます。
(2021/05/029 2:23)

次のステップメモ

- 自分のnpm 環境で動かす。クラウドで動かす。
- ファイル形式の調査
- 日本で動かす
- Cesiumの概要のまとめ

みんなやってるのかな。

### 追記

- 2021/05/29 誤字訂正。次のステップメモを追加。
【Nuxt.js】 Nuxt/content を使用してみた

はじめに
---
最近 Nuxt/content を初めて使用してみたので、自身の記憶定着と備忘録のために記事として残しておきたいと思います。

（参考サイト）
[nuxt/content公式](https://content.nuxtjs.org/ja/installation)
<br>

 Nuxt/content とは
---
Nuxt.js のアプリ内で、マークダウン方式を使用できるようになります。
マークダウン方式を使用したいファイルは、contentディレクトリの直下に作成し、末尾に.mdをつけます。
<br>

ファイル構成
---
とある製品、またはサイトについてなどの説明書きをまとめたページを作成するとします。

```
├ content
│　└ manuals
│　　├ 001.md
│　　└ 002.md
│
├ pages
│　└ manuals
│　　├ _slug.vue (詳細ページ)
│　　└ index.vue (一覧ページ)
└ index.vue
```
<br>

使用方法
---
- 1. Nuxt/content をインストールする

```terminal.
$ npm install @nuxt/content
```

```nuxt.config
{
  modules: [
    '@nuxt/content'
  ],
  :
}
```
<br>

- 2. pages/manuals/index.vue を作成する

ファイル構成でも簡単に表記していますが、pages/manuals/index.vue は、pages/manuals/_slug.vue へのリンクを載せた一覧ページになります。
 
```pages/manuals/index.vue
<template>
  <div>
    <h1>一覧ページ</h1>
    <ul>
      <li v-for="manual in manuals" :key="manual.slug">
        <!-- manual.slug はファイル名を表すので、リンクへ飛べる -->
        <nuxt-link :to="'/manuals/' + manual.slug">
          {{ manual.title }}
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    // content/manuals 直下のファイルを全て取得
    const manuals = await $content('manuals').fetch()
    return { manuals }
}
</script>
```
※ 最後まで実装をすると、このように表示されます。
![0FAA575A-619E-40DF-9A79-D09D049292BC_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/76c8af89-c228-179c-d81f-47989a0353bc.jpeg)
<br>

- 3. pages/manuals/_slug.vue を作成する

この _slug.vue には、content/manuals/001.md や 002.md が読み込まれ,
各ページが表示されるようになります。

```pages/manuals/_slug.vue
<template>
  <div>
    <h1>{{ manuals.title }}</h1>
    <!-- nuxt-content で作成した、content/manuals 直下のファイルを読み込む -->
    <nuxt-content :document="manuals" />
  </div>
</template>

<script>
export default {
  async asyncData ({ $content, params }) {
    const manuals = await $content('manuals', params.slug || 'index').fetch()
    return { manuals }
  }
}
</script>
```
<br>

- 4. content/manuals フォルダを作成し、ファイルをいくつか作成する

content/manuals/manuals1.md を作成する
    
```content/manuals/manuals1.md
---
title: マニュアル１
---
## サブタイトル
マニュアル1の説明文です。
```

content/manuals/manuals2.md を作成する


```content/manuals/manuals2.md
---
title: マニュアル2
---
## サブタイトル
マニュアル2の説明文です。
```
![576AE181-A67C-4BD0-BA9B-03757ABEB736_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/88ba8aea-8918-c778-18e6-458f769d5ac2.jpeg)


まとめ
---
Nuxt/content の導入で、マークダウンを使用することにより箇条書きが使いやすい、簡単に Qiita の投稿ページのようなものが作成できる、という点は大きな利点だと感じました。ただし、スタイルを当ててデザインを調整することを考えると、HTML の方が融通が効くという印象でした。
あくまでも個人的な意見ですが、以下のようにまとめます。

- **Nuxt/content**
    - マークダウン記法が使用できる
    - スタイルは一般的なタグに当てる（h1, p, ulなど）
        - 同じタグのものに対するデザインの使い分けが効かない
    - 比較的簡単かつシンプルなサイトには向いている

- **HTML**
    - スタイルは、各タグや各クラスに当てる
        - 同じタグのものでも、個々にデザインを当てられる
    - 凝ったデザインで作りに向いている

終わり
---
今回は以上になります。
ざっくりとした記事にはなってしまいましたが、公式ページには様々なオプションなども掲載されていますので、用途に合わせて使用すると良いと思います。
私自身まだまだ未熟ではありますが、同じ様な立場の方に少しでも参考になれば幸いです。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
StoryboardでUIScrollViewをデザインする為のスニペット

# はじめに
次の仕様で、制約エラーの無い状態のUIScrollViewを配置する手順です。
- 横スクロール無し
- 縦スクロールあり
- UIScrollView.size.heightは少なくとも親View.bounds.size.height以上

# 手順
すべてStoryboard上で行う操作です。
Superviewは対象のviewを配置している親viewです。

1. UIScrollViewを配置する（以降scrollView）
1. scrollView.trailing = Superview.trailing
1. scrollView.leading = Superview.leading
1. scrollView.bottom = Superview.bottom
1. scrollView.top = Superview.top
1. scrollViewにUIViewを配置する（以降contentView）
1. contentView.trailing = scrollView.ContentLayoutGuide.trailing
1. contentView.leading = scrollView.ContentLayoutGuide.leading
1. contentView.bottom = scrollView.ContentLayoutGuide.bottom
1. contentView.top = scrollView.ContentLayoutGuide.top
1. contentView.width = scrollView.FrameLayoutGuide.width
1. contentView.height ≧ scrollView.FrameLayoutGuide.height
1. contentView.height = scrollView.FrameLayoutGuide.height(Priority = 250)
【C++】引数に数値を入れるときのcall of overloaded '-----(int)' is ambiguousエラーを解決した話

##初めに
C++でオブジェクト指向プログラミングをしてる時に初歩的な問題にぶち当たったので備忘録です。

##どうして引っかかったの？
ArduinoIDEでライブラリ開発をしているときにあたりました。
今まで、引数に変数ではなく、数値を入力してエラーを食らったことがなかったので気が付くまで時間がかかりました。

以下のコードをコンパイルするとエラーが出ます。
アンコメントするとコンパイルできます。

```L6470.hpp
#define uchar unsigned char 
#define ushort unsigned short
class L6470
{
  public:
    L6470(char port)
    {
      SSport = port;
    }
    void step_mode(uchar);
    void spiSend(uchar);
    void spiSend(ushort);
    //void spiSend(int);
};
```
```L6470.cpp
#include "L6470.hpp"

void L6470::init()
{
  SPI.begin(); 
  pinMode(PIN_SPI_MOSI, OUTPUT);
  pinMode(PIN_SPI_MISO, INPUT);
  pinMode(PIN_SPI_SCK, OUTPUT);
  pinMode(SSport, OUTPUT);

  //nop命令
  spiSend(0x00);
  spiSend(0x00);
  spiSend(0x00);
  spiSend(0x00);
  //デバイスリセットコマンド
  spiSend(0xc0);
}
//ステップ分解能
void L6470::step_mode(uchar value)
{
  spiSend(0x16);
  spiSend(value);
}
void L6470::spiSend(uchar value)
{
  digitalWrite(SSport,LOW);
  SPI.transfer(value);
  digitalWrite(SSport,HIGH);
}
void L6470::spiSend(ushort value)
{
  uchar ucWork1,ucWork2;
  ucWork1 = value >> 8;
  ucWork2 = value & 0x00FF;

  digitalWrite(SSport,LOW);
  SPI.transfer(ucWork1);
  SPI.transfer(ucWork2);
  digitalWrite(SSport,HIGH);
}
/*void L6470::spiSend(int value)
{
  digitalWrite(SSport,LOW);
  SPI.transfer(value);
  digitalWrite(SSport,HIGH);
}*/
```
コンパイルすると
error:call of overloaded 'spiSend(int)' is ambiguous
というエラーが生じます。
引数の型が曖昧で、オーバーロードでintが無いよっていう感じのエラーですね。

このコードでは、spiSend(0xc0);引数に数値を入力したあたりがエラーになっています。

数値といえど、1バイトなのでcharでいけると思いましたが、だめみたいです。

```C++
void L6470::spiSend(ushort value)
void L6470::spiSend(uchar value)
```
>
ucharはunsigned char 
ushortはunsigned shortと定義しています
>

上記の二つのオーバーロードされたメソッドは引数としてucharとushortにしています。

##どうしてエラーになるのか

引数を数値にした場合にエラーが出ます。

```C++
spiSend(0xc0);
```
上記の部分です。

オーバーロードで、他の型が定義されているときには、<b>数値はint型</b>として処理されます。

よって、オーバーロードの引数のintが無いよっていうエラーが出るみたいです。

解決するにはオーバーロードで

```C++
void L6470::spiSend(int value)
```
を定義する必要があります。

##まとめ
オーバーロードをしているときはの引数として数値を入力すると、int型として処理されます。

そもそもcharは一文字intは数値なのでよくよく考えたら当たり前のエラーですね。

気づくのが時間かかったの悲しいです。
ubuntu 20.04 の QjackCtl の ALSA を bluetooth に接続

試しにやろうとしたら、手こずったので、載せておきます。
bluealsa をインストールした上で動作させる前に、 PlusAudio の module-bluetooth-discover をアンロードする必要があります。
<dl>  <dt>システム</dt>  <dd>Intel® Core™ i7-8700 CPU @ 3.20GHz × 12</dd>  <dd>NVIDIA Corporation TU104 [GeForce RTX 2080]</dd>  <dd>Ubuntu 20.04.2 LTS</dd>  <dd>bluetoothスピーカー BOSE mini Ⅱ SoundLink</dd>  </dl>  <dl>  <dt>アプリ</dt>  <dd>QjackCtl 0.9.3 <a href="https://qjackctl.sourceforge.io">: url</a>　最新をメイクしました。</dd>  <dd>MusE 4.0 <a href="https://muse-sequencer.github.io/">: url</a>　.AppImageを使用しました。</dd>  <dd>bluez-alsa <a href="https://github.com/Arkq/bluez-alsa/">: url</a>　最新をメイクしました。</dd>  </dl>
＊ bluez-alsa のインストールについては、たくさん出てますが、[ココのREADME.md](https://github.com/Arkq/bluez-alsa) の通りで動きました。
## 作業内容
・bluetoothスピーカーが「切断」されていることを確認。
・PlusAudio の module-bluetooth-discover をアンロードする。
<dl>  <dd>この操作はOSやアプリの状態で、固まってしまう場合がありますので、PlusAudio と pacmdコマンドを理解した上で作業してください。<a href="https://wiki.archlinux.jp/index.php/PulseAudio">: PlusAudio</a>  <a href="https://www.freedesktop.org/wiki/Software/PulseAudio/Documentation/User/Modules/#bluetoothmodules">: PlusAudioのモジュール</a></dd>  </dl>

```bash:cmd
pacmd unload-module module-bluetooth-discover
```

・aplay コマンドで、デバイスの存在をを確認。

```bash:cmd
aplay -L | grep bluealsa
```

・bluealsa を実行。（デーモンで動かす場合は、[wiki](https://github.com/Arkq/bluez-alsa/wiki) 参照）

```bash:cmd
sudo bluealsa -p a2dp-source
```
・ループに入ったら、bluetoothスピーカーを接続。
ここで、bluealsa: D: ../../src/bluez.c:1004: Adding new Stream End-Point: xx:xx:xx:xx:xx:xx: SBC　と表示されればOK、ダメな場合は、「not Available」とかと出てくる。
なお、xx:xx:xx:xx:xx:xxは、`bluetoothctl devices`で出てきます。（コマンドの詳細は、[ココ](https://wiki.archlinux.jp/index.php/Bluetooth)）

・テスト

```bash:cmd
aplay -D bluealsa:DEV=xx:xx:xx:xx:xx:xx hogehoge.wav
```

xx:xx:xx:xx:xx:xxは、上記の通り。

・QjackCtl　を起動し「設定」の「出力デバイス」に先程 aplay コマンドで確認した`bluealsa`というデバイス名を設定して、おわり。

・終了後は、module-bluetooth-discover をロードし、PlusAudioをもとに戻しておいてください。
`pacmd load-module module-bluetooth-discover`

## 最後に
実用的に使うには、ボリューム調整や接続切断検知など、手を加える必要があります。
バリデーションのメッセージ　カスタマイズしてみた


<h1>バリデーションのメッセージカスタマイズ</h1>
validation.phpの中エラーメッセージを変更せずに、オリジナルのバリデーションメッセージを
設定してバリデートメッセージを出せたので記事にしました。

基本的には英語ですが、validation.phpの中に設定されています。
日本語版は下記から確認できます。
https://readouble.com/laravel/5.6/ja/validation-php.html

一部ですが、こんな感じでバリデーションメッセージが設定されています。
attributeは好きなように設定できます。

<pre>
'required'=> ':attributeは必須です。',
'unique'   => ':attributeは既に存在します。',

 'attributes' => [
 'first_name'=>'姓名',
 'last_name'=>'姓名',
]
</pre>
下記のようにバリデーションを設定できます。
このように設定すると、first_name、last_nameが空欄の場合、
姓名は必須です。などとエラーメッセージが出力されます。
<pre>
  public function rules()
    {
        return [
            'first_name' => 'required',
            'last_name' => 'required',
        ];
    }
</pre>
例えば、他のbladeではattributeは必要です。としたい場合、
<pre>
'required'=> ':attributeは必要です。',
</pre>
上記のように変えてあげればよいのですが、そうすると先程のエラーメッセージも変わってしまいます。
ここのページだけメッセージを変えるということができるのです。

結論、messages()メソッドを設定できます。
下記のように設定してあげると、実現できます。

<pre>
    public function messages()
    {
        return [
            'first_name.required' => ':attributeは必要です。'
　　　　　　　 'last_name.required' => ':attributeは必要です。'
        ];
    }
</pre>
<h1>まとめ</h1>
 messages()メソッドを追加して、first_name.requiredとドット区切りで指定すると、メッセージのみ変更可能でした。
[ ROS ]他パッケージで作成したpythonモジュールをimportする方法

# はじめに
- 2パターンあります
 - 簡単な方法: 簡単ですがゴチャゴチャします
 - 綺麗な方法: 手順が増えますが１行で済みます
 
# 簡単
## import元
- ディレクトリ構造

```
test/                           --- package
└── scripts                 
        └── test_import.py
├── CMakeLists.txt
├── package.xml
```
- test_import.py
 - importできるかの確認用

```python:test_import.py
import rospy
def called():
    rospy.loginfo("Success!")
```

## import先
``` python
import os
import sys

import rospkg

rospack = rospkg.RosPack()
sys.path.append(os.path.join(rospack.get_path('test'),"scripts"))

from test.test_import import called

called()

```

# きれい
## ディレクトリ構造
- 以下のような感じで
 - 必ずしもこうする必要はない
 - 下記のsetup.pyで調整

```
test/                           --- package
└── scripts                 
    └── test                    --- このフォルダ中のmoduleをimport 
        ├── __init__.py
        └── test_import.py
├── CMakeLists.txt
├── package.xml
├── setup.py                    --- 追加・編集（下記参照）
```

## ファイル作成
- test_import.py
 - importできるかの確認用

```python:test_import.py
import rospy
def called():
    rospy.loginfo("Success!")
```

- setup.py
 - packagesとpackage_dirは自分の環境に合わせる

```python:setup.py
from distutils.core import setup
from catkin_pkg.python_setup import generate_distutils_setup

d = generate_distutils_setup(
    packages=['test'],
    package_dir={'': 'scripts'}
)

setup(**d)
```

## CMakeLists.txtの編集
- 以下の2行を探してコメントを外す

```xml:CMakeListx.txt
catkin_python_setup()
catkin_package()
```
- 最後にビルド

```bash:bash
$ catkin build
```

## やってみよう

```bash:bash
$ python
>>> from test.test_import import called
>>> called()
```
ビジネスロジックの実装だけしている状態は、試験だけ点数が良くて英語を喋れない状態と似ている

私のことです。
３年くらいコードを書いているのですが、全く実生活で役に立っていない状態です。

##どういうこと？
前職ではエンジニアとしてプログラミングをしていたのですが、僕がやっていたのは主にビジネスロジックの実装でした。
つまり、
・開発環境も用意されている（指定のフォーマットやプラグインがあるため、環境構築のbat等が専用に用意されていた）
・Gitプロジェクト等も最初から存在している（案件に途中参加のため）
・CI系はJenkinsジョブが用意されていて、開発が完了したら蹴るだけ（管理はSREチーム）
つまり、システム開発においての「始まり」と「終わり」が全く分かっていなかったのです。
IDEが設定されていて、Gitプロジェクトが既にあって、「もうコードが書きだせる状態」であればそれなりにロジックの実装はできるのですが、
①コードが書ける状態になる
②書いたものを使ってもらえる状態にする
という部分の知識がゴソっと抜けていたのです。

##その結果何が起こるか
###１．前職で自分がやっていたコーディング作業に入ることができない
・環境構築の仕方がわからない１（Windowsのどのフォルダに何があるの？このフォルダには通常何系のものを置くの？）
・環境構築の仕方がわからない２（環境変数って何？どういう仕組みなの？）
・Gitプロジェクトを作成するときは何から始めるの？（Git上でプロジェクトを作ってから開発なのか、開発してからGit上でプロジェクトを作るのか）
・閉鎖された社内ネットワーク内では、今まで使用していた各種の便利ツールが使えないor使えるようになるまで色々な設定が必要になる（が、知識が無いので何をどう設定してよいのかわからない）
###２．コーディングした後にどうやってみんなが使ってもらえばよいかわからない
・周りは当然JRE何か入っていないし、どうやって動く状態のものを配布したらよいのか
・前職は適当にロジックだけGitにコミットしておけば、勝手にクローンして使ってくれていた

##この状態は、試験だけ点数が取れる高校生に似ている（気がする）
英語というものに対して、日本の高校生は「机に向かって問題を解く」ことはできるが、「実際に外国人に対して、コミュニケーションをとったり自分の意見を話す（＝実生活で使える英語）」ことができないという話を聞いたことがあります。
・机に向かって問題を解く＝やることが明確で、道筋が立っている中でインプットしたものアウトプットする
・実生活で使える英語＝状況や自分のやりたいことに応じて、柔軟にアウトプットを出す必要がある

試験問題を解くのは、ぶっちゃけ英語の本質や本当に理解していなくても、できてしまうと思います。ただ、実生活で英語を使用していくには、そもそも英語とは何なのか、言葉ひとつひとつの本質的な意味を理解していなくてはできないと思います。
日本の高校生（そこそこ英語の点数が良い学生）に、「はい、今から外国人とおしゃべりしてね！」と言われてもおそらく「あ、あ、、、」となって終わってしまうと思います。
難しい英語の長文に対して、正解を選べという問題はスラスラ解けるのに、問題という枠組みの外では何もできなくなってしまう状態はまさに私が直面している状態です。

##で？
基礎から勉強して、Qiitaにもその過程で学んだことを投稿していくつもりです。
今回この記事を書いたのは、自分への戒めと意外とこういう人って多いんじゃないかと思って少しでも共感してもらえたらうれしいなと思ったからです。
【React】Element type is invalid: expected a stringの対処法

<h2>症状</h2>
Reactでnpmstartしたとき、下記エラーが発生してしまいました。コンパイルエラー発生していませんでした。

```react:エラーメッセージ
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
```

翻訳すると、「エラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されました：未定義。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたか、デフォルトのインポートと名前付きのインポートを混同している可能性があります。」

要素タイプが無効だそうですが、若干意味がつかみにくく調べてみると、<a href="https://cpoint-lab.co.jp/article/202005/15172/">こちら</a>が出てきました。

サイトを参考にしたところ、2つのいずれかで発生するみたいです。
<b>1.export もしくは import を間違えている
2.setState() 内の記述が誤っている</b>

が、どちらも該当するミス等は見つかりませんでした。

```react:Hoge.jsx
import React, { Fraeegment } from "react";

export const Hoge = () => {

    return(
        <Fraeegment>
          {"Fuga"}
        </Fraeegment>
    )
} 
```

<h2>解決策</h2>
importしていたFragmentのスペルが間違っていたため、エラーが発生していました。
Fragmentのスペルを修正したら、解決しました。

```react:Hoge.jsx
import React, { Fragment} from "react";

export const Hoge = () => {

    return(
        <Fragment>
          {"Fuga"}
        </Fragment>
    )
} 
```

もう一度エラーを見直すと、「エラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されました：未定義。」とあり、returnの中にある要素タイプが未定義であるため、要素タイプが無効と怒られていたようです。


<h2>参考</h2>
https://cpoint-lab.co.jp/article/202005/15172/
JavascriptのHTMLの取得方法

Javascriptの学習において、DOMツリーからHTMLを取得する方法をまとめました。
# DOMツリーとは
DOMとはHTMLを解析し、データを作成する仕組みのことで、ブラウザによって、階層構造のあるデータになります。
これをDOMツリーやドキュメントツリーと呼びます。
JavaScriptを使うと、このDOMツリーを取得することができ、要素を増やしたり、削除したりといった操作が可能になります。

# HTMLの取得方法
　HTMLを取得する方法として、大きく以下の３つの方法があります。

- id名から取得する方法
- class名から取得する方法
- セレクタ名から取得する方法

####document.getElementById("id名")
引数に指定した`id`を持つ要素を取得することができます。

####document.getElementsByClassName("class名")
`Elements`と複数形になっているのが注意です。
id名は必ず１つしか存在しないのに対して、class名は同じものが複数存在する場合があるので、複数形になっています。
指定したclass名をとマッチする要素を全て取得することができます。

####document.querySelectorAll("セレクタ名")
セレクタ名で取得する方法で、主にclass名、id名、HTMLタグで指定します。
class名は(".class名")、id名は("#id名")、HTMLタグは("タグ名")で指定することができます。

```javascript
//class名の要素を指定する場合
document.querySelectorAll(".class名")

//id名の要素を指定する場合
document.querySelectorAll("#id名")

//Pタグの要素を指定する場合
document.querySelectorAll("P（タグ名）")
```

# getElementsByClassNameとquerySelectorAllの違い
結論、戻り値が異なります。
getElementsByClassNameはHTMLCollectionというオブジェクト
querySelectorAllはNodeListというオブジェクト
をそれぞれ戻り値として返し、使えるメソッドが異なります。
【Swift】文字列の末尾からn文字を削除したい

# どういうことか

『フルーツポンチ』を『フルーツ』にしたい。

## dropLast

```swift
var fruits = "フルーツポンチ"

// 3文字削る
let dropLastString = fruits.dropLast(3)
```

おわり(´・ω・｀)
Python3.9 で nagisa をインストールする on M1 Mac

# やりたいこと

nagisa をインストールしたい。nagisa については以下参照。

https://qiita.com/taishi-i/items/5b9275a606b392f7f58e

# インストールの手順

## 必要なもののインストール

```
brew install cmake eigen
```

pkg-config で見つかるようにパスを通す。~/.zshrc に以下の行を追加

```
export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/homebrew/share/pkgconfig
```

##  エラー対策

### `pip install dynet` に失敗

```bash
error: Could not download Eigen from 'https://github.com/clab/dynet/releases/download/2.1/eigen-b2e267dc99d4.zip': <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1129)>
```

これは、Certificate の設定が無いかららしい。そこで、

https://stackoverflow.com/questions/40684543/how-to-make-python-use-ca-certificates-from-mac-os-truststore

以下のコマンドを実行

```
/Applications/Python\ 3.9/Install\ Certificates.command 
```

###  `import nagisa` で失敗

以下のエラーで import できない

```python
ImportError: dlopen(/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/_dynet.cpython-39-darwin.so, 2): Library not loaded: /private/var/(中略)/dynet/libdynet.dylib
  Referenced from: /Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/_dynet.cpython-39-darwin.so
  Reason: image not found
```

Path が無いかららしい

https://github.com/clab/dynet/issues/1034


以下のパス設定で import に成功

```
export DYLD_LIBRARY_PATH=$(dirname $(which python3))/../lib:$DYLD_LIBRARY_PATH
```
yukicoder contest 297 参戦記

# yukicoder contest 297 参戦記

## [A 1517 Party Location](https://yukicoder.me/problems/no/1517)

重心に集合すれば良いのかと思ってたけど、どっちかの町だったのか……. WAになってしまったので、「つねに整数」を頼りに全探索になってしまった…….

```python
d = int(input())
a, b = map(int, input().split())

result = 10 ** 15
for i in range(d + 1):
    result = min(result, i * a + (d - i) * b)
print(result)
```

## [B 1518 Simple Combinatorics](https://yukicoder.me/problems/no/1518)

完全に数学. ある整数が出る確率は、1から出ない確率を引いたものなので 1-((N - 1)/N)<sup>K</sup>. これがN種類あり、求める答えはN<sup>K</sup>をかけたものなので、N<sup>K+1</sup> - N(N-1)<sup>K</sup> (≡ 10<sup>9</sup> + 7) となる.

```python
m = 1000000007

N, K = map(int, input().split())

print((pow(N, K + 1, m) - N * pow(N - 1, K, m)) % m)
```
単一責任の原則とは何だったのか

はてブで[単一責任の原則（Single responsibility principle）について、もう一度考える](https://www.ogis-ri.co.jp/otc/hiroba/others/OOcolumn/single-responsibility-principle.html)といふ記事を見掛けて、なんとなく懐かしい気持ちになった。久し振りにこの言葉を見たなって。

「一つのモノに一つの責任 (役割) を」といふモットーは、初めて聞いた時にはすごくもっともらしく聞こえるんだけど、いろいろ考へてくと結局「責任が一つであるとはどういふことなのか?」「といふか、責任って一つとか二つとか数へられるものなのか?」といふ疑念を抱くよね。俺も昔さう思ひました。

で、この菅野さんの記事では「責任が一つであるとは、一人の利用者 (アクター) に対してだけ責務を果たすこと」といふ話をしてゐる。その理解はたぶんそんなに間違ってはゐないと思ふ。ブコメに「[作者の人そこまで考えてないと思うよ](https://b.hatena.ne.jp/entry/4703171128247686914/comment/otihateten3510)」とかいふコメントもあったけれども、菅野さんの記事が信用できないと思ふんなら[ボブ本人による記事](https://blog.cleancoder.com/uncle-bob/2014/05/08/SingleReponsibilityPrinciple.html)を見たらいい。

> However, as you think about this principle, remember that the reasons for change are _people_. It is _people_ who request changes. (強調は原文のまま)

ってちゃんと書いてある。

単一責任原則の紛らはしいところは、「一つの**クラス**に一つの責任を」といふフレーズが独り歩きしちゃったことがあるのかなとも思った。クラスといふ単位にこだはりすぎてはいけないんだ。さっきのボブをぢさんの記事をもう一度引くと、

> The Single Responsibility Principle (SRP) states that each software module should have one and only one reason to change.

とある。クラスの話はしてない。**モジュール**の話をしてる。一つのクラスが一つのモジュールとなることもあるかもしれないが、常にさうだといふわけではない。複数のクラスが一つのモジュールになることの方が多いだらう。その場合、一つ一つのクラスについて単一責任を考へてもしゃうがない。

しかし、だ。結局のところ、ある機能 (といふか要件) の出処が同じアクターなのか違ふアクターなのかって、さう簡単にわかるものなのだらうか? ボブの記事に出てくる「CFO にとっての社員と COO にとっての社員と CTO にとっての社員は別だよね」といふ話は何となくそれらしく感じられるが、菅野さんの記事に出てくる管理者ユーザーと一般ユーザーの共通部分としての共通ユーザーはかなり人工物っぽさがある。単一責任原則が常に成り立つことを正当化するために無理やり架空のアクターを捏造してる雰囲気ありません?

例へばあるプログラミング言語のインタープリターを作るとする。いはゆる REPL といふやつだ。この場合、R の部分と E の部分と P の部分 (つまり、コマンドを読み込む部分と実行する部分と結果を出力する部分) はそれぞれ別々のモジュールにすべきだらうなといふことはまあ直観的に分かる。が、それは三つの部分に異なるアクターがゐるからなんだらうか? ややもすると「言語設計者といふ一人のアクターがゐるだけでは?」といふ結論で満足して終はってしまはないだらうか?

アクターといふ概念は、といふかある部分に対応するアクターが同じなのか別なのかといふ観念は、設計時に最初から解ってるものといふよりも、むしろドメインに対する理解が進んだ後から判ってくるものではなからうか。何もかも最初からうまく設計できるなんてことがないのはみんな分かってるでせう?

……とか考へると、単一責任原則が適用できるのは割と限られた状況だと思へてくる。責任がどのアクターに向いてるものなのかがはっきりしてる状況なら、それに従ってそのモジュールを明確化できるだらう。さうでないのなら、単一責任原則はうまく働いてくれさうにない。

一方俺はむしろ、ボブの記事に引用されてたパーナス論文の一節に大きなヒントを感じる。

> We propose instead that one begins with a list of difficult design decisions or design decisions _which are likely to change_. Each module is then designed to hide such a decision from the others.

アクターとか責任とかを云々するよりも、「変更され得る design decisions (設計上の選択) を分離する」といふ一言の方が分かりやすくないだらうか。アクターってその機能を使ふ人つまりその機能の外側にゐる人なので、その機能からは離れてるといふかちょっと遠いんだよね。それよりも、機能そのものについて考へを巡らせた方が捗る気がする。

設計に関して選択を迫られることはよくあると思ふんですよ。ここはかういふ設計にすべきだろうか、あるいはああいふ設計の方が良いだらうか——ドメインが複雑なとき、どんな設計にするのが良いのかその場で見当が付かないこともある。それでも、我々はどれか一つの設計を選んで実装しなくてはいけない。それはつまり、今選ばなかった設計を将来選び直すかもしれないといふことでもある。

あるいは、要件や仕様が不安定な場合もある。実験的な機能を実装した後、評判次第で仕様を変へたり変へなかったり。

さういふ「変更され得る部分」を実際に変更しようとするときに毎回システム全体をいぢくらないとダメなんてことになったらやってられんわけで、だからなるべく最小限の手直しで変更が可能となるやうに分けておくって話。さう考へると何をどう分ければいいか何となく分かってくる気がしませんかさうですか