OmniAICreator/Qiita-1.07M huggingface dataset:
ラズパイにpython3-OpenCV3 を導入

##モチベーション
ラズパイで顔認識しようとするとopencvが王道。だが、調べると一筋縄ではいかず、トラップがあるようだ。バージョン等きっちり残して、手順を明確にしておこう。同じ環境もう一回作りたいケースも今後出てくるであろうし。

##環境
* RaspberryPi3B+
* OS:Raspbian stretch 9.13
* opencv-python　3.4.4.19

##参考
結果としてはこちらのページをほぼそのままでできました。
[Raspberry Pi + Python 3 に OpenCV 3 をなるべく簡単にインストールする](https://qiita.com/masaru/items/658b24b0806144cfeb1c)

## 手順

rasbianのバージョン確認

```
pi@raspberrypi:~ $ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 9.13 (stretch)
Release:        9.13
Codename:       stretch
```

OpenCV が依存しているライブラリを事前にインストール(参考と全く同じ)

```
$ sudo apt-get install libhdf5-dev libhdf5-serial-dev libhdf5-100
$ sudo apt-get install libqtgui4 libqtwebkit4 libqt4-test python3-pyqt5
$ sudo apt-get install libatlas-base-dev
$ sudo apt-get install libjasper-dev
```

opencvをインストール
2021/1/10現在　最新は4.4.0.42.参考に合わせるためにバージョン指定でインストールする。
ただ3.4.4というのが無いので、3.4.4を指定するとエラーになって、存在するバージョンを教えてくれる。

```
$ sudo pip3 install opencv-python==3.4.4
  Could not find a version that satisfies the requirement opencv-python==3.4.4(from versions: 3.2.0.6, 3.2.0.7, 3.2.0.8, 3.3.0.9, 3.3.0.10, 3.3.1.11, 3.4.0.12, 3.4.0.13, 3.4.0.14, 3.4.1.15, 3.4.2.16, 3.4.2.17, 3.4.3.18, 3.4.4.19, 3.4.6.27, 3.4.7.28, 3.4.10.37, 3.4.11.39, 3.4.11.41, 4.0.1.24, 4.1.0.25, 4.1.1.26, 4.3.0.38, 4.4.0.40, 4.4.0.42)
```
改めて3.4.4.19を指定してインストールする。

```
$ sudo pip3 install opencv-python==3.4.4.19
```

3.4.4がインストールできたことが確認できました。（ここでも3.4.4.19って表示してよ、とは思いますが）

```
pi@raspberrypi:~/face $ python3
Python 3.5.3 (default, Nov 18 2020, 21:09:16) 
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>> cv2.__version__
'3.4.4'
```

動作確認(参考と全く同じ)
canny.jpgが生成されたので、少なくともpython3からopencvを使えるようにはなったようです。

```
pi@raspberrypi:~/face $ python3
Python 3.5.3 (default, Nov 18 2020, 21:09:16) 
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import cv2
>>> bgr = cv2.imread('./test.jpg', cv2.IMREAD_COLOR)
>>> gray = cv2.cvtColor(bgr, cv2.COLOR_BGR2GRAY)
>>> canny = cv2.Canny(gray, 200, 50)
>>> cv2.imwrite('./canny.jpg', canny)
True
```
test.jpgはopencvの例題でよく使われるlenaさんにしておきました。GrayScaleへの変換ができたことがわかります。
![test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/a2bc3be3-e711-b261-5d23-96420de6efc2.jpeg)


![canny.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/da05b67a-e91b-d1ec-8d28-0463c8db5d95.jpeg)

##最後に
最新のopencv 4.4.0.42で動くかは試してません。
【Ruby On Rails / HTML】ウェブページ表示時、カーソル（キャレット）を適当な場所へ合わせ表示する方法

備忘録です。

# カーソルとキャレットとは

![スクリーンショット 2021-01-10 15.31.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/076158a1-a3e2-968f-4f92-529768752a9f.png)


キャレット≒カーソル
マウスカーソルなどと区別したい場合にキャレットという言葉が用いられます。

# 本題
カーソルを適当な場所へフォーカスするには、autofocusを使います。
Rubyでは、次のような書き方をします

```ruby
autofocus: true
```

それでは、Deviseの新規登録画面に"Nickname"という項目を設けた場合で見ていきます。
まずは"Nickname"にautofocusを使わない場合はどのように表示されるでしょうか。

①"Nickname"にautofocusなし

```erb:new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :nickname, "Nickname" %><br />
    <%= f.text_field :nickname %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

（後略）
```

![スクリーンショット 2021-01-10 15.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/6167b5a0-ea48-e7a0-6bfa-2a618ad6d0d2.png)

上記の場合、新規登録のウェブページを開いてみると、Nicknameではなく、Emailにカーソルがフォーカスされています。

次に、<%= f.text_field :nickname %>にautofocusを付与して、Nicknameにカーソルの焦点を当てた状態で見ていきます。

②"Nickname"にautofocusあり

```erb:new.html.erb
<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :nickname, "Nickname" %><br />
    <%= f.text_field :nickname, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div>

（後略）
```
![スクリーンショット 2021-01-10 15.47.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/12098b71-dc59-4a12-8d22-a93adcda8f7f.png)

このようにautofocusを"Nickname"に付与してあげることで、自動的に一番最初にカーソルが当てられる場所がNicknameとなりました。



# 参考記事
https://www.sophia-it.com/content/%E3%82%AD%E3%83%A3%E3%83%AC%E3%83%83%E3%83%88
http://www.htmq.com/html5/input_autofocus.shtml
Rails環境構築 with Docker

##参考サイト
[Docker超入門](https://www.youtube.com/watch?v=DNnW4I43wyU&list=PLs3eD4QT7ow6O5wyRRnRCvB7JMuq_D3-D&index=1) :[きよとのプログラミング大学](https://www.youtube.com/c/KiyotoUniv)
[丁寧すぎるDocker-composeによるrails5 + MySQL on Dockerの環境構築(Docker for Mac)](https://qiita.com/azul915/items/5b7063cbc80192343fc0)
##環境
Mac OS
docker-compose 1.27.4
Mysql 8.0
ruby 2.7
rails 6.1.0
 
##ファイル作成・記述

```terminal.
 ~ % cd Desktop
Desktop % mkdir rails_on_docker
Desktop % cd rails_on_docker
rails_on_docker % tree  
├── Dockerfile
├── docker-compose.yml
└── src
    └── Gemfile
1 directory, 3 files
rails_on_docker % code .
```
###docker-compose-yml
```yml:docker-compose-yml
version: '3'
# 管理するコンテナの記述
services:
  # データベース
  db:
    image: mysql:8.0
    # Mysqlの認証設定
    command: --default-authentication-plugin=mysql_native_password
    volumes:
    # ローカルのデータ：dockerのデータ　同期するための記述
      - ./src/db/mysql_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
  # rails
  web:
    # ディレクトリ直下のDockerfileを参照
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
    # ローカルのデータ：dockerのデータ　同期するための記述
      - ./src:/app
    ports:
    # ローカルのポート：dockerのポート
      - "3000:3000"
    depends_on:
    # Myaqlに接続するための記述
      - db
```
###Dockerfile
```Docker:Dockerfile
# ベースイメージの指定
FROM ruby:2.7

# 必要なライブラリのインストール
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y nodejs yarn 
#   作業ディレクトリの指定
WORKDIR /app
# ソース以下のファイルをコピー
COPY ./src /app
# rubyに必要なgemのインストール
RUN bundle config --local set path 'vendor/bundle' \
  && bundle install
```
###Gemfile
```yml:Gemfile
# railsのgemをインストールするための雛形
source 'https://rubygems.org'

gem 'rails','~> 6.1.0'
```
##railsのインストール
###使用するコマンド
```terminal.
% docker-compose run <サービス> <コマンド>
```
railsのインストール

```terminal.
rails_on_docker % docker-compose run web rails new . --force --database=mysql  // dbをmysqlに指定しrailsのインストール　--force(強制的に実行オプション)
.
.
.
Webpacker successfully installed 🎉 🍰
```
イメージのビルド

```terminal.
rails_on_docker % docker-compose build 
```
新しく作成されたdatabase.ymlに追記

```yml:database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password  //記述
  host: db　　//記述
```
データベースの作成

```terminal.
rails_on_docker % docker-compose run web rails db:create  
```
##起動
```terminal.
rails_on_docker % docker-compose up
```
![スクリーンショット 2021-01-10 15.41.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646600/575fa32b-6030-7842-0d87-904b54c895b0.png)

##まとめ
途中エラーが幾つか発生しましたが、DockerはもちろんRails,Mysqlを学ぶいい機会となりました。
次は本番環境(heroku)へのデプロイもまとめます。
TabView のアイコンの色を変える方法...

```swift
init() {
  UITabBar.appearance().unselectedItemTintColor = unselectedColor
}

var body: some View {
  TabView {
    CustomView()
      .tabItem {
        Image(icon)
          .renderingMode(.template)
        Text(title)
      }
  }
  .accentColor(selectedColor)
}
```
🤩
中小企業は黙ってZohoCRMを使え

煽りタイトルすみません。まめぞうです。

皆さんはCRMを使っていますか？
「もちろん天下のSalesforce使っているよ」という方や、「え、うちはまだExcelやで」という方もいらっしゃると思います。

今回は「ZohoCRM」をお勧めしたいと思います。
さくっと読んでみてくださいね。

#CRMについて
CRMとはカスタマーリレーションシップマネジメント（Customer Relationship Management）の略。
顧客関係管理と言います。
その名の通り、顧客満足度とロイヤリティ向上のための戦略、並びにシステムのことを言います。
LTVなどマーケティングや顧客へのサポートにおいて力を発揮するのがこのCRMシステムです。
取引先や顧客管理に最適です。

# ZohoCRMの特徴
SalesforceやKintoneなど様々なCRM・SFAがありますが、今回ご紹介するのは「ZohoCRM」です。
特徴として以下があります。
>
・GUIでカンタンにシステムを構築できる。
・外部アプリケーションとの連携がカンタンにできる。
・ランニングコストがかなり安い。
・プログラム系のスキルがあれば容易にカスタマイズできる。

中小企業では、月額ランニングコストをなるべく抑えて運用したいと思います。その点ZohoCRMは最適だと思います。日本語サポートもかなり充実してきており、導入支援もあるのでCRMデビューにも良いかと思います。

また、ワークフロー構築や自動化もカンタンにチャレンジしていけるのでおすすめですよ！

# プラン解説
一番安いプランで ¥1,440 / 月です。詳細は以下を確認してください。
https://www.zoho.com/jp/crm/zohocrm-pricing.html

スタンダード、プロフェッショナル、エンタープライズ、アルティメットと規模に合わせてプラン展開がなされています。
もちろん無料プランもあるのでスタートしてみるのにはちょうど良いでしょう。

# 最強全部入り、ZohoOneについて
従業員数が10人未満の場合、[ZohoOne](https://www.zoho.com/jp/one/)というパッケージがとてもおすすめです。ほんとに全部入りで、40以上のアプリケーションが使い放題です。
以下のようなアプリケーションが全て使い放題です。
・労務管理
・会計管理、請求書等
・マーケティングツール
・メルマガ配信ツール
・チャットツール
・外部アプリケーションとの自動化
・Excelのようなシート
・プレゼンテーションツール
などなど、今挙げたものはほんの一例です。たくさんのアプリケーションを利用できるようになります。
AWS SAA-C02 受験対策(1) Route53

# 0. はじめに
AWS SAAのお勉強をする中で学んだことをメモしています。
（試験に出そうで自分の理解の足りなさそうな部分のみピックアップしています）
※ 間違い等ありましたらコメントなどで指摘してください

■前提
SIer 7年目
AWSの有名どころのサービス(EC2,S3,RDS..)を若干齧ったことある程度

■教材
黒本
[徹底攻略 AWS認定 ソリューションアーキテクト – アソシエイト教科書](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E2%80%93-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88%E6%95%99%E7%A7%91%E6%9B%B8/dp/4295005495)

Udemy
[【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）]
(https://www.udemy.com/course/aws-knan/)

その他公式のドキュメント etc..

# 1. Route53とは
可用性の高いDNSを提供するマネージドサービス。
外部向けの**パブリックホストゾーン**と内部向けの**プライベートホストゾーン**がある。

**機能①　DNS機能**
Route53は、ELBやCloudFrontに対して、ZoneApexレコードをAレコードで指定することができる。
■イメージ
example.com(サブドメインを含まないルートドメイン) ⇒ Aレコード(elasticloadbalancing.us-east-2.amazonaws.com)

**機能②　ポリシーによる通信制御**
ルーティングポリシーを設定することでRoute53がクエリに対してどう応答するか設定できる。

# 2. 主なルーティングポリシー

| ルーティングポリシー | 特徴 |
|:-:|:--|
|シンプルルーティング |・ドメインで特定の機能を実行する単一のリソースがある場合に使用します<br>・複数値を１つのレコードに指定するとランダムな順序でルーティングされる|
|レイテンシールーティング| ・最もレイテンシーが低いリソースへルーティングする<br>・基本的には位置的に近いリージョンで解決される |
|加重ルーティング|・複数のリソースに対して加重度を設定し、指定した比率に応じて処理を分散する|
|複数値回答ルーティング|・ランダムに選ばれた最大 8 つの正常なレコードを使用して Route 53 が DNS クエリに応答する場合に使用します。|
|位置情報ルーティング|・ユーザーの位置に基づいてトラフィックをルーティングする場合に使用します。<br>・特定の国、地域にローカライズされたコンテンツを表示したい場合等に使用。|
|地理的近接性ルーティング|・リソースの場所に基づいてトラフィックをルーティングし、必要に応じてトラフィックをある場所のリソースから別の場所のリソースに移動する場合に使用します。|
|フェイルオーバールーティング|・アクティブ/パッシブフェイルオーバーを構成する場合に使用します。|

[参考: AWS 開発者ガイド ルーティングポリシーの選択](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/routing-policy.html)
サーマルカメラ(サーモ AI デバイス TiD) Python 高速化編

MH ソフトウェア&サービスでの画像処理として、OpenCV使用しています。
Raspberry Piでの最高速な処理方法を検討すべく、OpenCVとnumpyの処理速度の比較をしています。

***
1. [紹介編](https://qiita.com/MH-SS/items/c3d12abe871bfd62d1df)
2. [センサ編](https://qiita.com/MH-SS/items/61021e58b3a5a7f81b3d)
3. [センサケース編](https://qiita.com/MH-SS/items/ab142942c702eb6e545f)
4. [Raspberry Pi編](https://qiita.com/MH-SS/items/73f09db1ad1890c90987)
5. Python編  
    5.1 [Form編](https://qiita.com/MH-SS/items/035682853d18dc2074f2)  
    5.2 [オムロン 非接触温度センサ D6T-44L-06編](https://qiita.com/MH-SS/items/f9301bde143de482a17a)  
    5.3 [Pololu 測距センサ VL53L0X編](https://qiita.com/MH-SS/items/df3c33a6256a533d4eb5)  
    5.4 [BOSCH 温湿度・気圧センサ BME280](https://qiita.com/MH-SS/items/aff10e7b4d84c1b03714)  
    5.5 [シャットダウン・再起動スイッチ編](https://qiita.com/MH-SS/items/82db17524553e56d7605)  
    5.6 [OpenCV編](https://qiita.com/MH-SS/items/bcc9092bb9b6977014a1)  
    5.7 [高速化編](https://qiita.com/MH-SS/items/154dd994d73b4c93854f)  

***

# ベンチマーク結果

各処理を50万回処理させて、どちらが速いか調査し、速い方を採用してTiD サーモ AI デバイス TiDの処理の高速化を図りました。

```
import cv2
import numpy as np

# ファイル名は適宜決定してください
file_name = "test.jpg"

img = None
org = cv2.imread(file_name)

for i in range(500000):
    # Resize: OpenCV is fast.
    #img = cv2.resize(org, (300,300), cv2.INTER_CUBIC)
    #img = cv2.resize(org, dsize=(300,300))
    #img = org.repeat(2, axis=0).repeat(2, axis=1)

    # Frip: OpenCV is fast.
    #img = cv2.flip(org, 1)
    #img = np.fliplr(org)

    # BGR to RGB: Numpy is fast.
    #img = org
    #img = cv2.cvtColor(org, cv2.COLOR_BGR2RGB)
    #img = org[:, :, ::-1]

    # Grayslace: OpenCV is fast.
    #img = cv2.cvtColor(org, cv2.COLOR_BGR2GRAY)
    #img = 0.299 * org[:, :, 0] + 0.587 * org[:, :, 1] + 0.114 * org[:, :, 2]

    # Rotate: OpenCV is fast.
    #img = np.rot90(org)
    #img = cv2.rotate(org, cv2.ROTATE_90_CLOCKWISE) #2.99[sec]
```

***
[YouTube: サーマルカメラ(サーモ AI デバイス TiD) Python編](https://www.youtube.com/watch?v=fgwBsISDtXo)
[web: サーモ AI デバイス TiD Python 高速化編](https://mhss.server-on.net/?f401c=Index&ae504=tid3/development/python/accelerate) (URLが変更されました)
［Shortcuts]DataURLを使ってJSを実行する


1. HTMLの`script`タグに処理を書く
2. HTMLを`[URLエンコード]`でエンコードする
3. `data:text/html,(ここにエンコードしたHTML)`の形式でDataURLを作る
4. 出力させたい値を`document.write()`などでBodyタグに書き出す
5. `[Webページの内容を取得]`の入力に渡す
6. `[テキストを取得]`
 
## 実践
とりあえず`[辞書]`アクションを`JSON.stringify()`で整形してみる。

### ショートカット側
![shortcut](https://user-images.githubusercontent.com/66032272/104115203-13d2c000-5350-11eb-8078-efadaa2f8a85.jpeg)

### 辞書アクションの中身
```json
{
  "fizz": "bizz",
  "bool": false,
  "apple": {
    "hiragana": "りんご",
    "chineseChar": "林檎"
  },
  "array": [
    "hoge",
    "fuga",
    "puyo"
  ]
}
```

### テキストアクション内のHTML
```html
<!DOCTYPE HTML>
<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>pretty-json</title>
	<script>
		const json = [辞書];  // [辞書]アクションに置き換える
		const pretty = JSON.stringify(json, null, "&emsp;").replace(/\n/g, "<BR>");
		document.write(pretty)
	</script>
  </head>
</html>
```

### ちょっとミソ

#### HTMLで使うJSON.stringify()
```JavaScript
// これだと整形されて表示されない(HTMLはスペースや改行は反映されないため)
const bad = JSON.stringify(json, null, "\t");

// スペースや改行をHTML用に置き換える
const good = JSON.stringify(json, null, "&emsp;").replace(/\n/g, "<BR>");
```
サーマルカメラ(サーモ AI デバイス TiD) Raspberry Pi編

サーモ AI デバイス TiDは、Raspberry Piで制御しています。
Raspberry Piは安価で、使いやすいと思います。

***
1. [紹介編](https://qiita.com/MH-SS/items/c3d12abe871bfd62d1df)
2. [センサ編](https://qiita.com/MH-SS/items/61021e58b3a5a7f81b3d)
3. [センサケース編](https://qiita.com/MH-SS/items/ab142942c702eb6e545f)
4. [Raspberry Pi編](https://qiita.com/MH-SS/items/73f09db1ad1890c90987)
5. Python編  
    5.1 [Form編](https://qiita.com/MH-SS/items/035682853d18dc2074f2)  
    5.2 [オムロン 非接触温度センサ D6T-44L-06編](https://qiita.com/MH-SS/items/f9301bde143de482a17a)  
    5.3 [Pololu 測距センサ VL53L0X編](https://qiita.com/MH-SS/items/df3c33a6256a533d4eb5)  
    5.4 [BOSCH 温湿度・気圧センサ BME280](https://qiita.com/MH-SS/items/aff10e7b4d84c1b03714)  
    5.5 [シャットダウン・再起動スイッチ編](https://qiita.com/MH-SS/items/82db17524553e56d7605)  
    5.6 [OpenCV編](https://qiita.com/MH-SS/items/bcc9092bb9b6977014a1)  
    5.7 [高速化編](https://qiita.com/MH-SS/items/154dd994d73b4c93854f)  

***

# Raspberry Pi
サーモ AI デバイス TiDは、Raspberry Pi 4を使用しています。

## ケース
ケースとして<a href="https://www.amazon.co.jp/gp/product/B081CL5KYK/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1" target="_blank">Physical Computing Lab製のDIYメタルケース</a>を使用しています。Amazonで購入できます。
色々なケースを試してきましたが、金属製でケース自体が放熱機能を持っている物が扱いやすいです。
触ると暑い場合もあるようですので、火傷にはお気を付けください。

## VISAマウントプレート
![rh.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/f38bd81a-e520-b720-705c-9325cc978d98.jpeg)
Raspberry PiはFreeCADで設計したマウントプレートでVESA規格のプレートに取り付けられています。
<a href="https://www.amazon.co.jp/gp/product/B081CL5KYK/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1" target="_blank">Physical Computing Lab製のDIYメタルケース</a>をはめ込み式で取り付けられますので、脱着が容易で、がっちりホールドできます。
製作する場合は、ナイロンなどの弾力のある材質をお勧めします。
<a href="https://mhss.server-on.net/a656d/index/tid3/development/raspberry-pi/rh.wrl">3Dプリンタ用データ(.wrl)をダウンロード</a>

## 組み立てイメージ
![assembly.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/75e42477-faf6-41aa-64d9-5c7c27be866e.jpeg)
映像はナイロン(白)で製作したマウントプレートと金属ケースとRaspberry Pi 4です。

***
[YouTube: サーマルカメラ(サーモ AI デバイス TiD) Raspberry Pi編](https://www.youtube.com/watch?v=BBEfnhYeh90)
[web: サーモ AI デバイス TiD Raspberry Pi編](https://mhss.server-on.net/?f401c=Index&ae504=tid3/development/raspberry-pi) (URLが変更されました)
サーマルカメラ(サーモ AI デバイス TiD) センサケース編

サーモ AI デバイス TiDで使用している、センサケースの紹介です。
FreeCADで設計しています。

***
1. [紹介編](https://qiita.com/MH-SS/items/c3d12abe871bfd62d1df)
2. [センサ編](https://qiita.com/MH-SS/items/61021e58b3a5a7f81b3d)
3. [センサケース編](https://qiita.com/MH-SS/items/ab142942c702eb6e545f)
4. [Raspberry Pi編](https://qiita.com/MH-SS/items/73f09db1ad1890c90987)
5. Python編  
    5.1 [Form編](https://qiita.com/MH-SS/items/035682853d18dc2074f2)  
    5.2 [オムロン 非接触温度センサ D6T-44L-06編](https://qiita.com/MH-SS/items/f9301bde143de482a17a)  
    5.3 [Pololu 測距センサ VL53L0X編](https://qiita.com/MH-SS/items/df3c33a6256a533d4eb5)  
    5.4 [BOSCH 温湿度・気圧センサ BME280](https://qiita.com/MH-SS/items/aff10e7b4d84c1b03714)  
    5.5 [シャットダウン・再起動スイッチ編](https://qiita.com/MH-SS/items/82db17524553e56d7605)  
    5.6 [OpenCV編](https://qiita.com/MH-SS/items/bcc9092bb9b6977014a1)  
    5.7 [高速化編](https://qiita.com/MH-SS/items/154dd994d73b4c93854f)  

***

# センサケース
## フロントパネル(前面)
![front_panel_f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/bbf277e6-6f3c-c6bf-17d9-85a3cdcc780f.jpeg)
センサ、電源スイッチを取り付けるフロントパネルです。
縦・横寸法、各穴の位置はフィボナッチ配列(黄金比)で配置されています。
<a href="https://mhss.server-on.net/a656d/index/tid3/development/sensor-case/front_panel.wrl">3Dプリンタ用データ(.wrl)をダウンロード</a>

## フロントパネル(背面)
![front_panel_r.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/e2afcc08-afa4-9ac7-d975-58e77df9001a.jpeg)
フロントパネルの裏面です。フロントパネルにセンサが埋め込み・設置されます。
<a href="https://mhss.server-on.net/a656d/index/tid3/development/sensor-case/front_panel.wrl">3Dプリンタ用データ(.wrl)をダウンロード</a>

## ベースプレート
![base_plate.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/17ebe35b-244d-a550-029b-8a7de2c67386.jpeg)
フロントパネルをVESA規格のプレートに取り付けるプレートです。
<a href="https://mhss.server-on.net/a656d/index/tid3/development/sensor-case/base_plate.wrl">3Dプリンタ用データ(.wrl)をダウンロード</a>

## センサレイアウト
![layout.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/21b20b92-b3b6-a47d-2642-ae877fa4a1d3.jpeg)
センサ・電源スイッチをフロントパネルに設置した図です。

## 完成イメージ
![tid1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/4d87d9b8-7d48-de43-8e37-7bacff6218ff.jpeg)
センサ・電源スイッチを設置し配線を行い、VESA規格プレートに取り付けた写真です。
材質にもよりますが、フロントパネル・ベースプレート共にDMM.makeで2,000～3,000円で作製出来ます。

***
[YouTube: サーマルカメラ(サーモ AI デバイス TiD) センサケース編](https://www.youtube.com/watch?v=FTpb_DGKFKM)
[web: サーモ AI デバイス TiD センサケース編](https://mhss.server-on.net/?f401c=Index&ae504=tid3/development/sensor-case) (URLが変更されました)
Picoをdockerで動かす


## 本記事の目的

PicoというMarkdownで記事を書くCMSをdockerで利用する。
構成は以下です。

- PHP(php:8.0-fpm)
- Nginx

## ソース
                    │  ├─filters


### ディレクトリ構成

```
├─nginx
│  ├─Dockerfile
│  └─conf/nginx.conf
├─php
│  ├─Dockerfile
│  └─php.ini
└─src
```

### docker-compose.yml

```yml:docker-compose.yml
version: '3'
services:
  php:
    build:
      context: ./php
      args:
        TZ: $TZ
    volumes:
      - ./src:/var/www/html/
      - ./php/php.ini:/usr/local/etc/php/conf.d/php.ini

  nginx:
    build:
      context: ./nginx
      args:
        TZ: $TZ
    ports:
      - "80:80"
    volumes:
      - ./nginx/conf:/etc/nginx/conf.d
      - ./src:/var/www/html/
    depends_on:
      - php
```

### PHP

```Dockerfile:php/Dockerfile
FROM php:8.0-fpm
ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update && apt-get install -y \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        libpng-dev \
        apt-utils \
        zip \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install -j$(nproc) gd

# Timezone
ARG TZ
RUN apt-get install -y tzdata && \
    cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    echo ${TZ} > /etc/timezone

# Composer
COPY --from=composer /usr/bin/composer /usr/bin/composer

# coofiguration
COPY php.ini /usr/local/etc/php/
```

```ini:php/php.ini
date.timezone = "Asia/Tokyo"
```

### Nginx

```Dockerfile:nginx/Dockerfile
FROM nginx:1.19.6

ADD conf /etc/nginx/conf.d

ARG TZ
ENV TZ ${TZ}
RUN apt-get install -y tzdata && \
    echo "${TZ}" > /etc/timezone && \
    dpkg-reconfigure -f noninteractive tzdata

RUN ln -sf /dev/stdout /var/log/nginx/access.log \
	&& ln -sf /dev/stdout /var/log/nginx/error.log
```

```nginx:nginx/conf/nginx.conf
server {
	listen 80;

	server_name _;
	root /var/www/html/pico;

	index index.php index.html;

	location ~ ^/((config|content|vendor|composer\.(json|lock|phar))(/|$)|(.+/)?\.(?!well-known(/|$))) {
		try_files /index.php$is_args$args =404;
	}

	location ~ \.php$ {
		try_files $uri =404;

		fastcgi_pass php:9000;
		fastcgi_index index.php;
		fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
		include fastcgi_params;

		# Let Pico know about available URL rewriting
		fastcgi_param PICO_URL_REWRITING 1;
	}

	location / {
		try_files $uri $uri/ /index.php$is_args$args;
	}
}
```


## リポジトリ

Githubに使ったリポジトリは残しておきます。

https://github.com/daikidomon/pico-docker


ちなみにだけどPicoを使おうと思いましたがGravの方が優れていたいので今回はPicoで運用しませんでした（ﾃﾍﾍﾟﾛ）
Githubおもしろリポジトリ③ ~ループ中も飽きない?新しいプログレスバー~

## このシリーズについて
githubのトレンドリポジトリから情報を[定期通知する機能](https://qiita.com/Hiroaki-K4/items/61b357fa69c90fd9bbfd)を作ったのですが、それを通じて発見した面白そうなリポジトリを紹介するシリーズです。目次は[こちら](https://qiita.com/Hiroaki-K4/items/b6d780f636e87923ad8e)です。

## alive-progressとは
今回は[alive-progress](https://github.com/rsalmei/alive-progress)という面白いプログレスバーを紹介します。pythonのプログレスバーといえばtqdmを使う方が多いと思うのですが、ちょっと遊び心をいれたプログレスバーを使いたいという方のために作られたのがalive-progressです。下のような感じになります。
![progress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/2f84124e-212f-2c35-b0c4-d022e9a30046.gif)


## 使い方
まずはalive-progressをインストールします。

```bash
pip install alive-progress
```
上のGIFのような動作にしたい場合は、下のコードで出来ます。

```python3
from alive_progress import alive_bar, config_handler
import time
from tqdm import tqdm

def main():
	for x in 5000, 6000:
		with alive_bar(x, bar='checks', spinner='notes') as bar:
			for i in range(5000):
				time.sleep(.001)
				bar()
    # show_bars()
    # show_spinners()
    

if __name__ == '__main__':
	main()
```
with文の第一引数としてループを回す数を渡してあげれば大丈夫です。あとは、barの種類をbar=''のところに、barの右側の表示をspinner=''で選んであげればGIFのようになります。barにチェックマーク、spinnerに音符を選んでいます。そしてfor文の最後にbar()を入れてあげれば完成です。
barとspinnersのバリュエーションは、それぞれshow_bars(),show_spinners()で表示されます。
barの一覧
![bars.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/5b8ecf57-1605-a957-fd85-94c9f7abe531.gif)
spinnerの一覧
![spinners.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/c05a516a-b435-e2c2-7805-809de34a5ace.gif)

## tqdmとの比較
下のコードで比較してみました。

```python3
from alive_progress import alive_bar, config_handler
import time
from tqdm import tqdm

def main():
	print("~~Using tqdm~~")
	for i in 1000, 2000:
		for x in tqdm(range(1000)):
			time.sleep(.001)

	print("~~Using active-progress")
	for x in 1000, 2000:
		with alive_bar(x, bar='checks', spinner='notes') as bar:
			for i in range(1000):
				time.sleep(.001)
				bar()
```
結果は下のような感じになりました。
![tqdm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663246/06b17a75-57e3-dc95-06de-a72c25c6af55.gif)
渡された値がループしきれていないときに(今回は2000)、active-progressは(!)のマークで知らせていますね。シンプルさはtqdmが良いですが、自分はactive-progress好きですね(笑)。

## まとめ
ループ回すコードを書くのが楽しみになりました(笑)。

**間違いや質問、ご意見等ありましたらお気軽にコメントください。頑張って答えますので(笑)。**
集団遺伝学の数学的理論　木村資夫先生

```{r}



#量的形質の分散分析

P=matrix(c(0.5,0.36,0.44,0.12,0.23,0.32,0.56,0.98,0.36,0.54,0.75,0.48,0.15,0.48,0.84,0.52),ncol=4)

Y=matrix(c(50,42,40,15,28,40,50,85,45,42,60,40,20,50,80,60),ncol=4)

P=P+t(P);Y=Y+t(Y);P=P/sum(P)

alpha=c(1:ncol(P))

Y_bar=mean(Y)

#Broyden Quasi-Newton Algorithm p.213

f=function(x){

alpha=x  
  
alpha_mat=t(matrix(rep(alpha,length(alpha)),ncol=length(alpha)))  
  
mat=P*(Y-mean(Y))

f=c()

for(k in 1:length(alpha)){
  
f=c(f,sum(mat[k,]-P[k,]*(alpha[k]+alpha))+sum(mat[,k]-P[,k]*(alpha[k]+alpha)))  
  
}
return(c(f))

}

X=alpha

ite=100

H=diag(f(X))

for(l in 1:ite){

if(sum(abs(f(X)))>10^(-9)){  

X_pre=X  

X=X-H%*%f(X)  

s=X-X_pre

y=f(X)-f(X_pre)

H=H+((s-H%*%y)/as.numeric(t(s)%*%H%*%y))%*%t(s)%*%H

print(sum(abs(f(X))))

}

}  


predicts=t(matrix(rep(X,length(X)),ncol=length(X)))+c(X)+Y_bar

d=Y-predicts

a=apply(P*(Y-Y_bar),1,sum)/apply(P,1,sum)

#遺伝的分散

Vg=2*alpha*a*apply(P,1,sum)

#優性分散

Vd=sum(P*d^2)

sita=P/(t(t(c(apply(P,1,sum))))%*%t(c(apply(P,1,sum))))


```
LINEでURLを共有した時に、外部ブラウザからリンクを開くように設定する

WebアプリやWebサイトのURLを
LINEや、Instagramとかで共有すると
そのアプリのブラウザでリンクが開かれてしまいます。
（LINEであればLINEのブラウザ、InstagramならInstagramのブラウザ）

でも、できれば、ユーザーがいつも使っているブラウザで開いてもらいたい。
そうすれば、ブックマークへの登録も簡単になるし。。。

というときのやり方がこちらです！

#共有するURLのクエリにopenExternalBrowserを追加する
共有するURLのクエリの部分に
__openExternalBrowser=1__
を追加することで、
LINEなどで共有しても、ChromeやSafariなどで開かれることになります♪
https://sakidesign.com/line-browser/ を参照

・普通のURLで共有したら、LINEブラウザで開かれること
・クエリにopenExternalBrowser=1を追加したら、Chromeで開いてくれること
を確認できました！(≧▽≦)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">openExternalBrowser=1<br>をURLのクエリ部分に追加すれば、LINEで共有しても、外部ブラウザで開いてくれる。 <a href="https://t.co/GUQwCyGnc8">pic.twitter.com/GUQwCyGnc8</a></p>&mdash; ナイスガイ (@Skz3Px7cebZBn0a) <a href="https://twitter.com/Skz3Px7cebZBn0a/status/1348148499209076737?ref_src=twsrc%5Etfw">January 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

JSで実装しようかと思ってたんですが、結構楽にできました。(笑)

#openExternalBrowserがクエリにあったら、ルートに戻すようルーティングする。
「～/?openExternalBrowser=1」でURLを共有すると、ユーザーはたぶん「～/?openExternalBrowser=1」をブックマークしてしまうことになります。
なので、
・クエリに「～/?openExternalBrowser=1」があれば、「～/」に遷移する。
というロジックを組んでおくと、すっきりすると思います。


Next.jsだとこんな感じですね。

```index.js
import React from "react";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();
  const OPEN_EXTERNAL_BROWSER = router.query.openExternalBrowser
    ? router.query.openExternalBrowser
    : null;
  React.useEffect(() => {
    if (OPEN_EXTERNAL_BROWSER) {
      router.push("./");
    }
  });
  return <div>Hello world</div>
}


```
Laravel 認証機能を作成

#使用環境
・Laravel7
・MAMP
・Mac OS Catalina

#認証機能の作成手順（ターミナル操作）

```
composer require laravel/ui 2.0
```

※LaravelのバージョンによってLaravel/uiのバージョンも変化する。Laravel7系であれば、2.0になる。

```
php artisan ui vue --auth
```

この二つのコマンドを打つと、laravelプロジェクト内の、
app/Http/Controllersの配下に`Auth`というフォルダが作成される。

そして、Laravelのメインページにも、認証の機能が追加されていることが分かる。
VisualStudioCode ターミナルタブを切り替えるショートカットを設定する

## 目的

- VisualStudioCode（以後VScode）のターミナルタブを切り替えることのできるショートカットを設定する方法をまとめる

## 情報

- 筆者のVScodeの動作OSはMacであるがWindowsでも同様の方法でショートカットを設定する事ができると思う。（検証後に追記予定）

## ショートカットで操作したいこと

- VScodeのターミナルのタブを複数開いている場合に行うタブ切り替えをショートカットで行いたい。「ターミナルタブの選択をする」→「開きたいタブをクリックする」のマウス操作をショートカットで実施したい。
- 下記にショートカット化したい操作のスクショを貼る。

    ![mail_blade_php_—_laravel6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a139469c-7553-dd0d-2294-9b1f81e852b8.png)
    ![スクリーンショット_2021-01-08_18_16_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/efa6da01-7591-f61c-d74d-0cf43a5987b9.png)

## 当該操作のショートカットはデフォルトで設定されていない

- 若干めんどくさいことに当該操作のショートカットはデフォルトで登録されていないので自前で設定してあげる必要がある。
- 次に設定方法を記載する。 

## 方法

1. ショートカットの設定
    1. VScodeを開き左下の歯車マークをクリックする。

        ![Visual_Studio_Code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/8e847c0b-b6b3-26d7-cf05-de3ec1b0a669.png)

    1. 「キーボード ショートカット」をクリックする。

        ![スクリーンショット_2021-01-08_18_22_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/9bb3a3fe-9e27-e65e-d839-a4e6a1a185f6.png)

    1. 「入力してキーバインド内を検索」の部分に「Terminal: Focus Next Terminal」と入力してEnterを押下する。

        ![キーボード_ショートカット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f1562818-0268-6bed-ad90-8ac9db836122.png)

    1. いくつかのコマンドが検索にヒットする。

        ![キーボード_ショートカット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/25da6229-c205-e66b-0613-b28821ecc1d2.png)

    1. 「ターミナル: 次のターミナルにフォーカス」と書かれた部分をダブルクリックする。

        ![キーボード_ショートカット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/f32bbf10-e911-04c0-ca73-7ac41fc428c8.png)

    1. 「任意のキーの組み合わせを押し、ENTERキーを押します」と表示されたウインドウが開くのでこのショートカットを使用したいキーの組み合わせを入力する。（間違えて入力してしまっても「esc」キーを何度か押下することで当該の動作のショートカットキーの組み合わせを最初からやり直す事ができる。）
    1. 動作しないキーの組み合わせもあるようで、筆者の環境だと「control」 + 「shift」 + 「option」だと動作しなかった。
    1. ショートカットキーが設定できると当該動作の「キーバインド」にショートカットキーが表示される。（筆者は「control」 + 「shift」 + 「n」を設定した。）

        ![キーボード_ショートカット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/49248c2c-6610-7773-22c3-0e40cf4a9477.png)

1. 確認
    1. 2個以上のターミナルを開き、先に設定したショートカットキーを押下してターミナルのタブを切り替えることができれば作業完了である。
JavaScriptのスコープ内関数のホイスティングでハマった

#ハマった内容

* ブロックスコープ内の関数はブロックスコープ外から呼び出せる。(ブロックスコープの仕様)
* 関数はホイスティングされるから、関数の定義より前に関数の呼び出しを書いても、問題なく呼び出せる。(ホイスティングの仕様)

と言うことは、ブロックスコープの外側で、ブロックスコープ内の関数定義より前に呼び出したら、呼び出せるのでは...?（馬鹿）

#結論
ホイスティングは、スコープ内で巻き上げを行うものです。
スコープ外まで巻き上げないので、呼び出せません。
なので、`Uncaught TypeError: fn is not a function`となります。


#ホイスティングとは
JavaScriptの仕様で、_**スコープの中で**_、変数や関数が先頭に巻き上げられることです。

###具体例

```javascript:Example
fn();

function fn() {
    console.log('hoge');
}

/**
 * 出力:hoge
 * 理由:ホイスティングされるので、関数の定義より前に関数を呼び出していても、関数は問題なく実行される。
**/
```

#ブロックスコープとは
`{...}`で括られたスコープのことです。
ブロックスコープ内の let / const はブロックスコープ外から参照できません。
function は参照できます。

###具体例
```javascript:Example2
{
    let a = 0;
    function fn() {
        console.log('hoge');
    }
}
```
```javascript:Example2-1
console.log(a);

/**
 * 出力(エラー):Uncaught ReferenceError: a is not defined
 * 理由:ブロックスコープ内の let / const はブロックスコープ外から参照できない
**/
```
```javascript:Example2-2
fn();

/**
 * 出力:hoge
 * 理由:funtionは参照できる
**/
```

#ハマったところ

```javascript:Example3
fn();
{
    let a = 0;
    function fn() {
        console.log('hoge');
    }
}
/**
 * 出力(エラー):Uncaught TypeError: fn is not a function
 * 理由:ホイスティングはスコープ内が対象のため、ブロックスコープ定義より前からの呼び出しはできない
**/
```

#まとめ
間違っていたら、コメントで教えていただけると嬉しいです。
そもそもＣＰＵ、メモリ、ＨＤＤとは

###__■はじめに__
この記事は、エンジニアの人には必要ありません。
ＰＣの基礎知識ゼロの人の為の記事です。

###__■PCの５大要素__

ＰＣの５大要素と言われるものがあります。
それが下記の表のとおり、__演算装置、制御装置、入力装置、出力装置、記憶装置__になります。

|５大要素|説明|具体例|
|:-:|:--|:-:|
|演算装置|論理演算や四則演算など演算を行う装置|ＣＰＵ|
|制御装置|プログラム（命令）を解釈し、プログラムの流れを理解してシステム全体を制御する装置|ＣＰＵ|
|入力装置|人が扱う文字や数値（10進数）等のデータをＰＣが処理できるように加工（2進数のデータ、バイナリー化）してＰＣに渡す装置|マウス・キーボード等|
|出力装置|入力装置の逆でバイナリー化した（2進数の）データを人がわかる、扱える形に変換して出力する装置|ディスプレイ・プリンター等|
|記憶装置|ＰＣが処理するデータを保存する装置|メモリ・ＨＤＤ（ハードディスクドライブ）|

###__■ＣＰＵとは__

ＣＰＵとは中央処理装置と訳され、上記の表でわかるとおり、大きく分けると演算装置の部分と制御装置の部分を併せ持つ装置になります。
大まかに言えば、制御装置の部分がプログラム（命令）を理解して適宜、必要な処理を演算装置の部分で行う流れになります。
細かい話をすると、ＣＰＵの中には演算装置や制御装置以外にもデータを一時的に保管する__レジスタ__があったり、外部と通信を行う__インターフェース__という回路があります。

インターフェースは、外部の入力装置や出力装置とデータをやりとりする回路だと考えてもらえればイメージしやすいと思います。
記憶装置があるのになぜ、ＣＰＵにレジスタが必要なのかという疑問も出てくるかと思いますが、それについては後ほど説明します。

###__■メモリとＨＤＤの違い__

マウスとキーボード、ディスプレイとプリンターの違いはイメージしやすいと思いますが、__メモリとＨＤＤの違いって何でしょうか？__
メモリとＨＤＤの違いを表で表すと下のようになります。

|記憶装置の種類|説明|具体例|
|:-:|:--|:-:|
|メモリ（主記憶装置）|ＣＰＵが演算など処理する際に必要なデータを一時的に保存する装置でＨＤＤに比べ、保存できるデータ量は少ない|メインメモリ|
|ＨＤＤ（補助記憶装置）|人が必要なデータを長期的に保存する為の装置で大量のデータが保存できる|ＰＣ内蔵のＨＤＤ　外付けＨＤＤ　ＵＳＢメモリー

メモリの特徴は、__保存できるデータ量が少なく、一時的にしか保存しない__ということです。あくまでもＣＰＵが処理するのに必要なデータを保存するのが役割の記憶装置ということになります。一時的というのは、ＰＣをシャットダウンしたり、再起動するとデータは消えてしまうという意味です。

ＨＤＤの特徴は、__大量のデータを長期的に保存できる__ということです。ある意味、本当の記憶装置でＰＣのユーザーが保存しておきたいデータを保存する役割を担っているのがこのＨＤＤになります。

###__■どうしてメモリとＨＤＤが両方、存在するのか__

ここまでの話だと、大量のデータを長期的に保存できるＨＤＤでＣＰＵの処理に必要なデータも扱った方がいい気がします。
しかし、__ＣＰＵとメモリ、ＨＤＤでは処理速度が大きく違います__

正確な数字ではないですが、イメージとしては__ＨＤＤが１回、処理する間にメモリは１００回、ＣＰＵは１０万回処理するイメージです。__
もしＣＰＵの演算や処理に必要なデータをＨＤＤに保存をしていたら、データを保存したり、読み込むたびにＨＤＤの処理が完了するまでＣＰＵが待機しなければならず、ＣＰＵの処理速度を全く活かせず非常に性能の悪いＰＣとなってしまうわけです。
その為、ＨＤＤより処理速度が速い、メモリがＨＤＤの代わりにデータを保存しておくことでデータのやりとりがスムーズとなり、処理速度が上がるというわけです。
ここで「後ほど説明します」と記載したレジスタについて思い出して欲しいのですが、ＣＰＵのレジスタについてもこの処理速度の違いの問題を解決する為の装置です。レジスタは保存できるデータ量は少ないですが、メモリよりもさらに処理速度が速く、メモリ以上にＣＰＵの処理速度を活かせるようになります。ＣＰＵにはレジスタ以外にもキャッシュメモリという記憶装置があったりもします。
JavaScriptで画像を表示する方法

JavaScript初心者のメモとして「JavaScriptで画像を表示する方法」を残します。
今まではホームページの作成にHTMLのみで画像を表示していましたが、せっかくJavaScriptを学習しているのでJavaScriptでも表示したいと思ってやってみました。

#画像を表示する方法

##1.HTMLで表示する方法

1枚だけ画像を画面に表示するためのHTMLです。（コピーすれば何枚でも表示できます）
imgタグにより画像を表示しています。
まずはhtmlの全体です。

```php:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>HTMLで画像を表示する方法</title>
</head>
<body>
  <img src='images/image000.jpg'>
</body>
</html
```
次にimgタグだけみてみます。

```php:
  <img src='images/image000.jpg'>
```
imgタグのsrcの部分は画像がhtmlに対してどのこフォルダーに入っているかを表しています。
この場合だとimagesフォルダーの下にimage000.jpgという画像ファイルが入っています。
imagesフォルダーはhtmlと同じ階層（フォルダー内）にあります。
これでhtmlのみで画面上に画像を表示できます。



##2.JavaScriptで表示する方法

ではこれからJavaScriptで画像を表示してみましょう


```php:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>HTMLで画像を表示する方法</title>
</head>
<body>
  <img src='images/image000.jpg'>
  <script src="main.js"></script>
</body>
</html
```

```php:main.js
'use strict';
{
document.write('<img id="carousel__main" src="images/image000.jpg">');
}
```

上記がJavaScriptで画像を表示するためのコードです。

以下説明します。
HTMLにJavaScriptを読み込ませるためにスクリプトタグを追加しています。

```php:
<script src="main.js"></script>
```
画面に出力する時は以下のコードを使用します。

```php:
document.write
//画面に出力するコマンド
```
を使用して画面に出力することができます。
文字を表示する時は以下のように書きます。

```php:main.js

'use strict';
{
document.write('JavaScriptで画像を表示する');
}
```
同じ容量で画像を出力してみます。

```php:main.js
'use strict';
{
document.write('<img src="images/image000.jpg">');
}
```
以上の方法でJavaScriptで画像を画面に表示することができます。
ちなみに以下のように「'」ではなく「"」で書くと文字の区切る場所が異なり（青の文字部分）
エラーとなります。

```php:main.js
'use strict';
{
document.write("<img src="images/image000.jpg">");
}
```
アドベントカレンダー34日目：SREを読んでみた「効果的なトラブルシューティング」編②

前回はトラブルシューティングの理論について、学びました。
今回からは実践編です。
実際のトラブルシューティングは、理論のようにきれいなものではないですが、その過程をよりよくするにはどのようのすればいいでしょうか？

## 実践

### 問題のレポート
問題は必ずレポートから始まります。
レポートがでるのは、さまざまな状況があります。（アラートや同僚からの報告）
効果的なレポートにするためには、以下を含める必要があります。

* 期待される動作
* 実際の動作
* できれば、その状況を再現する方法

#### 理想的なレポート

* レポートを一定の形式で作成する
* バグ追跡システムのような検索できる場所に保存する

#### レポートの報告ですべきでないこと
Googleにおいて、レポートを人へ直接報告することは、推奨されません。
その理由は次の通りです。

* 問題の報告をチケットに起こす手間が増える
* チーム内の他のメンバーから見えない低品質のレポートを生み出す
* 報告者がたまたま知っている少数のメンバーへ負荷が集中する

### トリアージ
レポートを受け取った後、次にすべきなのは、何をすべきかを決定することです。

問題は大小さまざまで、ユーザー一人にのみ生じている場合もあれば、システム全体にかかわることもあります。
できるだけ早く根本原因の特定を行うことがいいように思われますが、そうではなく、行うべきは、システムを**その環境下でできる限り上手く動作させること**です。
なぜなら、根本原因を探っている間にシステムが完全停止してしまったら意味がないからです。

逆に回復不可能なデータ破壊を起こすバグがある場合、システムを動作させ続けることより、停止してしまうことがよりかもしれません。

## まとめ
* 問題レポートの3つの観点。
* バグ報告はオープンにする。
* 原因調査の前にトリアージを行う。

#### 参考文献
1. Betsy Seyerほか　SRE サイトリライアビリティエンジニアリング　オライリー　142-143
[Ruby] ArgumentError の本質を見る

#ArgumentError
Argumentとは"引数"と言う意味です。
ArgumentErrorは「引数の数が合わないよー」というメッセージになります。
様々なケースが考えられますので、
本質的な基礎の部分を例に考えて行こうと思います。

---
wikiで「Rubyを対話的に実行 (REPL) するためのシェル」と紹介されている
irbを使っていきます。

下記の実引数と仮引数を用いたコードを、irbで実行

```
def test(number)
  puts number * number
end

test(5)
```


[![Image from Gyazo](https://i.gyazo.com/0bb6891a00e8efc9a13ad1b64eb96f73.png)](https://gyazo.com/0bb6891a00e8efc9a13ad1b64eb96f73)
testの引数に（５）を設定して仮引数(number)に値を渡すと、
25という結果が出力されました。

---
では次に、実引数なしでtestを実行してみます。
[![Image from Gyazo](https://i.gyazo.com/c3a7e4a38174e0bb0769816cfa2f884e.png)](https://gyazo.com/c3a7e4a38174e0bb0769816cfa2f884e)

するとエラーが発生しました。
[![Image from Gyazo](https://i.gyazo.com/c33175de8e06592516b3d15e15e50a9d.png)](https://gyazo.com/c33175de8e06592516b3d15e15e50a9d)

エラーメッセージを翻訳するとこうです。
[![Image from Gyazo](https://i.gyazo.com/a1bec1fa0a0b0a0d9bbc5c026f69b9cc.png)](https://gyazo.com/a1bec1fa0a0b0a0d9bbc5c026f69b9cc)
コンピューターさんがこう言ってます
「引数が１つあることを期待してたのに、０だったよ」
引数が一つ足りないんですね。

---
じゃあ今度は実引数の数を２つにして実行してみます。
[![Image from Gyazo](https://i.gyazo.com/0406c21e5d65f674248a8a359e3825a0.png)](https://gyazo.com/0406c21e5d65f674248a8a359e3825a0)


またエラーです。
[![Image from Gyazo](https://i.gyazo.com/50ce1ebbc431e1a53c8a83161b96b454.png)](https://gyazo.com/50ce1ebbc431e1a53c8a83161b96b454)

今度はこう言っていますね
「引数が１つあることを期待してたのに、２つだったよ」
一個多いよと怒っています。

実引数(5, 6)を２つ送ろうとしても、受け取る側の仮引数(number)の数が１つだと上手くいかないんですね。

#まとめ
ArgumentErrorは「引数の数が合わないよー」というエラーです。
メソッドを定義してる箇所の、実引数・仮引数を確認してみましょう！
【macOS】goenvを使用したGo(Go言語)のインストール

# 概要
**macOS**に**Go**(Go言語)をインストールする手順を記載しています。
GoのインストールにはGoのバージョン管理ツールである**goenv**を使用しました。
また、goenvのインストールには**Homebrew**を使用しています。
PATHを通す部分でつまずいたので、そこの解説も後半に記載しています。

最新バージョンのGoをインストールする場合は下記をご覧ください。↓
[【MacOS】Homebrewを使わずに、goenvでGoの環境構築](https://qiita.com/hayatoiwashita/items/08aa4485f8966bc26add)

#### [参考] 公式
- [Go](https://golang.org/)
- [goenv](https://github.com/syndbg/goenv)（github）
- [Homebrew](https://brew.sh/index_ja)

# 実行環境
- macOS Big Sur 11.1
- Homebrew 2.7.2

# インストール手順
### 1. Homebrewをアップデートする。  
Homebrewをインストールできていない方は、こちらの[公式](https://brew.sh/index_ja)からインストールお願いします。

```
$ brew update
```

### 2. goenvのインストール

```
$ brew install goenv
```

下記コマンドでバージョンが表示されれば完了。

```
$ goenv -v
```

### 3. 使用できるGO言語のバージョンを確認

```
$ goenv install -l
```

バージョンを指定してGoをインストール。 (本記事では1.11.4を指定)

```
$ goenv install 1.11.4

```

マシンにインストールされているGoを確認。

```
$ goenv versions
```

コマンドを実行すると下記のような出力がターミナルに表示される。
*(アスタリスク)がついているバージョンが現在使用しているバージョン。

```
  system
* 1.11.4 (set by /Users/[User名]/.goenv/version)
```

ここまでで一旦インストールは完了。


# つまずいたポイント
上記手順でインストール後、goコマンドを実行すると下記のようなエラーが発生。

```
bash: go: command not found
```

エラー内容の通り、PATHが通っていないことが原因のようなのでPATHを設定していく。
まずはGoがインストールされているディレクトリを確認。

ただ、goenvでインストールしたために、なかなかディレクトリを見つけられない...。
結局、下記コマンドを実行した時に出力されていたディレクトリをあさってインストール先のディレクトリを発見。

```
$ goenv version
1.11.4 (set by /Users/[User名]/.goenv/version)
```

実際にインストールされていたディレクトリは下記。

```
/Users/[User名]/.goenv/versions/1.11.4/
```

### PATHの設定
`.bash_profile`(設定ファイル)をvimで開く。

```
$ vim ~/.bash_profile
```

`.bash_profile`に下記を追加。

```
export GOROOT=$HOME/.goenv/versions/1.11.4
export PATH=$GOROOT/bin:$PATH
```

`.bash_profile`の変更を反映。

```
$ source ~/.bash_profile
```

Goのバージョンが表示されれば完了。

```
$ go version
go version go1.11.4 darwin/amd64
```
Web API入門#2 〜REST、アーキテクチャについて〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ REST、アーキテクチャについて

■ Web API入門についての過去記事
・ [Web API入門#1 〜APIとWeb API、Webの概要〜](https://qiita.com/s79ns/items/8dd2f06145cbf9464b99)

## RESTとアーキテクチャスタイルとは何か

<font color="red">REST</font>は、Webのアーキテクチャスタイルと呼ばれ、<font color="red">アーキテクチャスタイル</font>とは、複数あるアーキテクチャに共通する性質・作法・流儀をまとめた設計様式のことです。RESTを使って実装したものがWebです。

![スクリーンショット 2021-01-10 10.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/eebe659f-0abc-5ab4-2538-dadcd87dbdab.png)

週刊少年ジャンプで例えると、<font color="red">実装</font>が<font color="red">作品（ワンピースや僕のヒーローアカデミアなど）</font>で、<font color="blue">アーキテクチャ</font>は、<font color="blue">アンケート至上主義</font>で、<font color="green">アーキテクチャスタイル</font>は、ジャンプのテーマでもある<font color="green">友情・努力・勝利</font>~~（世代がバレますよ！！）~~といったところでしょうか（？）。

## Webにおけるリソース

Webにおけるリソースとは、Web上に存在する、名前を持ったあらゆる情報です。

前回書きましたURIは、『リソースの名前＋住所』と思ってもらえると分かりやすいです。
例えば、Yahoo!ニュースがリソースの名前で、住所が、https://news.yahoo.co.jp/ となります。

RESTというアーキテクチャスタイルを使って実装されたWebのAPIは、URIにアクセスをし、リソースを取得してユーザーにブラウザを介して表示しています。

## RESTを構成するアーキテクチャスタイル

RESTはいくつかのアーキテクチャスタイルを組み合わせたもので、複合型のアーキテクチャスタイルだと思ってもらえるとイメージしやすいです。

#### クライアントサーバー

機能や情報を持つサーバとユーザー（クライアント）をネットワークで結び、クライアントの要求で処理を行います。一言で、UIと処理を分離するアーキテクチャスタイルです。

#### ステートレスサーバー

クライアントの状態をサーバーが検知せず、管理を行いません。
クライアントがリクエストをしたら、クライアントの状態を問わずリクエストに応じたレスポンスを返します。

#### キャッシュ

サーバーから一度取得したリソースの再利用をし、クライアントとサーバー間での通信頻度を減らします。
ネットワークの帯域を消費を抑え、サーバーからのレスポンスの高速化ができます。
ただ、一度取得したキャッシュの情報が古かったりして、情報の信頼性が落ちるなどのデメリットもありますので、使い所に注意を払う必要があります。

#### 統一インターフェース

操作可能なインターフェースを限定します。RESTの設計思想に基づいて作られたAPIであれば、HTTPメソッドを限定的にします。（リソースの取得ならGET、リソースの更新や作成はPUTなど）

#### 階層化システム

システムが幾つもの階層に分離されていること状態で、役割に応じて異なるサーバーが階層になって存在していますが、統一インターフェースで設計されていれば、HTTPというプロトコルを使って処理ができます。

#### コードオンデマンド

JSで処理を行う時（JSに限りませんが）、サーバー側においてあるJSファイルをダウンロードし、クライアント側でJSファイルを実行しています。一言で、必要な時にコードをダウンロードし実行します。

## まとめ

処理の流れを図にしました。

![スクリーンショット 2021-01-10 13.52.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/91b0fead-14b3-cf95-cf3a-b9707981d58c.png)

まず、ブラウザが統一インターフェースを通じて、サーバーに接続します。
※ この時に取得したリソースをキャッシュとして所持します

ステートレスサーバーに接続してリクエストを受け取ると、クライアントの状態を問わず
リクエストに応じた処理結果をDBから探し、レスポンスを返します。

プロキシサーバーに接続してリクエストを受け取ると、プロキシサーバーが処理の振り分け先を判別します。

図のように、プロキシサーバーの下にステートレスサーバーがあるように階層化されて使われています。
サーバーが返すリソースの中にJSファイルがある場合は、クライアントがファイルをDLし、ブラウザ上で実行しています。

これらの流れが、RESTというアーキテクチャスタイルを使ったWebの処理です。

## 次の記事はこちら

[Web API入門#3 〜URIの基礎知識〜](https://qiita.com/s79ns/items/c4ec2db048fa3b13638e)
EC2の自動デプロイが反映されない

##前書き
タイトルにあるようにAWSを使って自動デプロイにしたところ変更が反映されておらず死ぬほど焦りました笑
調べていると他の人もなっている人たちがいたのでよくあることなんだなーと学んだと共に今後同じことがあったときに焦ることがないよう、備忘録として残しておきます。


##環境
AWS EC2
Ruby 2.6.5
Rails 6.0.3.3
capistrano

##解決法
EC2インスタンスを再起動することで解決します。
自動デプロイを複数回行うと変更が反映されないことがあるためその際はインスタンスの再起動を行います。
再起動手順はこちらの記事にわかりやすく解説されています↓
https://qiita.com/qolayumusou/items/a34cccbb07802c94eeef


##まだやることがあった
インスタンスの再起動を行った際はデータベースとNginxの再起動も忘れずに行う必要があります。
EC2内のターミナルで実行します！

```
[ec2-user@ip-000-00-00-000 ~]$ sudo systemctl restart mariadb 
[ec2-user@ip-000-00-00-000 ~]$ sudo systemctl restart nginx
```

##終わりに
AWSは実際の業務で触れることが多いと思われるので今のうちに少しでも慣れていければと思いました。
PowerAppsとPowerAutomateを連結してAADの拡張項目を取得する

#はじめに
PowerAppsからアプリを作るケースって大抵の場合社内システムみたいなものが多いと思います。で、大抵の場合コネクタとしてOffice365ユーザーとかAzureADみたいなものを使って社内の情報を取得するんじゃないかと。そんでもって、キーは社員番号にしてデータを登録する。なんていうのがテンプレだと思っています。勝手に。

AzureActiveDicrectoryの設定画面を見ると従業員IDというものがあります。
一部マスキングしてますが、私の場合はこの2016XXXXの箇所が社員番号にあたります。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240108/49cd87c5-99b3-3743-b00b-d5c67a8fd73a.png)


#従業員IDが取れない
あとは、PowerAppsのAzureADコネクタを使って、この情報を引っ張ってくればOK。とか思っていたのですが、、ない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240108/b2db720e-702e-b438-3c34-ff6e5c2116f4.png)

てっきり、AzureAD.GetUser().EmplyeeIdみたいな形で取れると思ってたのですが、項目が存在しません。同様に、Office365ユーザー.MyProfileV2().EmployeeIdも存在しません。

#あと付けの拡張項目だから取れない説

@fukasuke様の記事(https://qiita.com/fukasuke/items/9fc3dd6b4594bce89393)
にあるように従業員IDというのは後で追加された拡張項目です。 


AzureD.GetUser()やOffice365ユーザー.MyProfileで取得できるのは最初からある項目だけのような気がします。

#PowerAutomateを呼び出して取得する

@fukasuke様の記事を見ると、graphAPIで頑張れば取れるみたいなのでカスタムコネクタを作って取る方法が手っ取り早そうですが、カスタムコネクタはまた別途お金がかかります。じゃあ、PowerAppsからPowerAutomateを呼び出せば取れるんじゃないかと。

GetEmployeeIdToPowerAppsという従業員IDを取得するPowerAutomateを作ります。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240108/c443b976-c9ca-92f4-c4c2-221fec8fb306.png)


でこれをPowerAppsのonStart時に呼び出して変数EmployeeIdに入れて置けば任意の場所でEmployeeId.idで取得できます。(ID.idってなんか変だけど変数名はまぁテキトーに変えて下さい。GetEmployeeIdToPowerAppsという英語も変ですね。)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240108/61360bdf-8d50-7132-48ca-bf4eaf26ceb8.png)

#所感
個人的にはPowerAutomateよりFlowって名前の方が好きです
サーマルカメラ(サーモ AI デバイス TiD) センサ編

サーモ AI デバイス TiDで使用している、センサの概要です。

***
1. [紹介編](https://qiita.com/MH-SS/items/c3d12abe871bfd62d1df)
2. [センサ編](https://qiita.com/MH-SS/items/61021e58b3a5a7f81b3d)
3. [センサケース編](https://qiita.com/MH-SS/items/ab142942c702eb6e545f)
4. [Raspberry Pi編](https://qiita.com/MH-SS/items/73f09db1ad1890c90987)
5. Python編  
    5.1 [Form編](https://qiita.com/MH-SS/items/035682853d18dc2074f2)  
    5.2 [オムロン 非接触温度センサ D6T-44L-06編](https://qiita.com/MH-SS/items/f9301bde143de482a17a)  
    5.3 [Pololu 測距センサ VL53L0X編](https://qiita.com/MH-SS/items/df3c33a6256a533d4eb5)  
    5.4 [BOSCH 温湿度・気圧センサ BME280](https://qiita.com/MH-SS/items/aff10e7b4d84c1b03714)  
    5.5 [シャットダウン・再起動スイッチ編](https://qiita.com/MH-SS/items/82db17524553e56d7605)  
    5.6 [OpenCV編](https://qiita.com/MH-SS/items/bcc9092bb9b6977014a1)  
    5.7 [高速化編](https://qiita.com/MH-SS/items/154dd994d73b4c93854f)  

***

# センサ
## オムロン MEMS非接触温度センサ D6T-44L-06
| 項目 | 内容 |
| :-: | :-: |
| 型式 | D6T-44L-06 |
| 画素数 | 16 (4x4) |
| 電源電圧 | DC5[V] |
| イメージ | ![d6t.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/57367792-bf60-e5ef-3528-7a5a150b90f5.jpeg)|
* 電源電圧がDC5[V]なので、Raspberry PiのI2Cに接続する場合、レベル変換が必要です。
* D6T-44L-06は4x4のグリッドですので、処理を行っても人の形の認識は難しいです。温度を検出用途として全く問題は無いと思います。

## Pololu Time-of-Flight 距離センサモジュール VL53L0X
| 項目 | 内容 |
| :-: | :-: |
| 型式 | VL53L0X |
| 検出範囲 | 3 ～ 200[cm] |
| 動作電圧 | DC2.6 ～ 5.5[V] |
| イメージ | ![vl53l0x.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/b227d8f2-986b-0a0e-db9e-e61c9fc84e3e.jpeg) |
* 電源電圧がDC2.6 ～ 5.5[v]なので、Raspberry Pi のI2Cに直接接続出来ます。

## BOSCH 温湿度気圧センサ BME280
| 項目 | 内容 |
| :-: | :-: |
| 型式 | BME280 |
| 温度 | -40 ～ +85[℃] |
| 相対湿度 | 0 ～ 100[%] |
| 気圧 | 300 ～ 1100[hPa] |
| 動作電圧 | DC1.71 ～ 3.6[V] |
| イメージ | ![bme280.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/c6bae237-534d-3503-7570-9d9b4149d3a6.jpeg) |
* 電源電圧がDC1.71 ～ 3.6[V]なので、 Raspberry Pi のI2Cに直接接続出来ます。
* センサ自体はBosch Sensortec社製ですが、色々なメーカから基板組込で販売されています。

## 非接触温度センサの距離補正
![calibration.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/ec97ec78-0146-0227-0b68-ee5dc02c9723.jpeg)
サーモ AI デバイス TiDはVL53L0Xにより、非接触温度センサの測定温度補正を行っています。
サーモ AI デバイス TiDには距離と温度の関係を記録できるプログラムがあります。
これによりデータを記録し、表計算ソフトにて近似式を求めて、その近似式によって距離の温度補正を行っています。

***
[YouTube: サーマルカメラ(サーモ AI デバイス TiD) センサ編](https://www.youtube.com/watch?v=7Y5yYKwtgH4)
[web: サーモ AI デバイス TiD センサ編](https://mhss.server-on.net/?f401c=Index&ae504=tid3/development/sensor) (URLが変更されました)
サーマルカメラ(サーモ AI デバイス TiD) 紹介編

# はじめに
MH ソフトウェア & サービスでは非接触温度センサなどを用いて、サーモ AI デバイス TiDを設計開発いたしました。
市販のサーマルカメラは、まだまだ高価なものが多いです。
一般的に入手しやすい部品を利用して、温度を測定し**コロナ感染防止対策**が取れないかと試行錯誤しました。
![tid.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569469/4ff64b72-cf1b-e778-af0e-61a9564c6ff5.jpeg)

そこで、興味のある方にサーモ AI デバイス TiDで使用しているセンサやRaspberry Piの配線、Pythonによる処理を公開する事で、**コロナ感染防止対策**の一端を担えればよいと考えております。

***
1. [紹介編](https://qiita.com/MH-SS/items/c3d12abe871bfd62d1df)
2. [センサ編](https://qiita.com/MH-SS/items/61021e58b3a5a7f81b3d)
3. [センサケース編](https://qiita.com/MH-SS/items/ab142942c702eb6e545f)
4. [Raspberry Pi編](https://qiita.com/MH-SS/items/73f09db1ad1890c90987)
5. Python編  
    5.1 [Form編](https://qiita.com/MH-SS/items/035682853d18dc2074f2)  
    5.2 [オムロン 非接触温度センサ D6T-44L-06編](https://qiita.com/MH-SS/items/f9301bde143de482a17a)  
    5.3 [Pololu 測距センサ VL53L0X編](https://qiita.com/MH-SS/items/df3c33a6256a533d4eb5)  
    5.4 [BOSCH 温湿度・気圧センサ BME280](https://qiita.com/MH-SS/items/aff10e7b4d84c1b03714)  
    5.5 [シャットダウン・再起動スイッチ編](https://qiita.com/MH-SS/items/82db17524553e56d7605)  
    5.6 [OpenCV編](https://qiita.com/MH-SS/items/bcc9092bb9b6977014a1)  
    5.7 [高速化編](https://qiita.com/MH-SS/items/154dd994d73b4c93854f)  

***

# 使用部品
紹介するサーモ AI デバイス TiDの使用部品一覧です。名称とメーカ/型式/購入先(参考)です。
別部品を使用する場合は、同等の配線をお願いします。

## RaspberryPi 4
* Raspberry財団 / Raspberry Pi 4 Bodel B (8GB) / <a href="https://www.amazon.co.jp/gp/product/B0891RC99L/ref=ppx_yo_dt_b_asin_title_o05_s01?ie=UTF8&psc=1" target="_blank">Amazon</a>

## RaspberryPi ケース
* Physical Computing Lab / Raspberry Pi4 Model B DIYメタルケース / <a href="https://www.amazon.co.jp/gp/product/B081CL5KYK/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1" target="_blank">Amazon</a>

## 非接触温度センサ
* D6T-44L-06 / <a href="https://www.chip1stop.com/" target="_blank">chip1stop</a>
* D6T-HARNESS-02が必要です。

## I2Cレベル変換
* ELEFINE / I2Cレベル変換器 / <a href="https://www.elefine.jp/SHOP/I2C-LVL01.html" target="_blank">ELEFINE</a>
* D6T-44L-06は5[V]で動作しますので、Raspberry PiのI2Cに接続する為に、3.3[V]へレベル変換する必要があります。

## 測距センサ
* KOOKYE / KK-VL53L0X-JP / <a href="https://www.amazon.co.jp/gp/product/B07WK1FRZG/ref=ppx_yo_dt_b_asin_title_o00_s01?ie=UTF8&psc=1" target="_blank">Amazon</a>

## 温湿度・気圧センサ
* KeeYees / KYES503 / <a href="https://www.amazon.co.jp/gp/product/B07QXPJ8XP/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1" target="_blank">Amazon</a>
* 3個入っています。

***
[YouTube: サーマルカメラ(サーモ AI デバイス TiD) 紹介編](https://www.youtube.com/watch?v=UK0aJ8J-Lrg&t=55s)
[web: サーモ AI デバイス TiD 紹介編](https://mhss.server-on.net/?f401c=Index&ae504=tid3) (URLが変更されました)