OmniAICreator/Qiita-1.07M huggingface dataset:
[node.js] If you are behind a proxy, please make sure that the network 'proxy' config is set properly.  の解決例

## どんなエラー？
`npm install`しようとしたら下記のようになりました。

```:ターミナル
% docker-compose exec web npm install

npm notice 
npm notice New patch version of npm available! 8.1.0 -> 8.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.2
npm notice Run npm install -g npm@8.1.2 to update!
npm notice 
npm ERR! code ERR_SOCKET_TIMEOUT
npm ERR! errno ERR_SOCKET_TIMEOUT
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@babel%2fruntime: Socket timeout
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-11-03T10_45_55_391Z-debug.log
```

## 原因
確証はないのですが下記のどちらかが原因だったと思われます

・コンテナの外から`docker-compose exec web npm install `を実行したため第三者とみなされ、権限が必要な部分のinstallができなかった（外からならsudoが必要だった）

・ネット環境が弱すぎて、ネットワークエラーをproxiesエラーと判断された(300kbps程度だった）

## 解決した方法
・`docker exec -it laravel-fargate-app-web-1 sh`してから`npm install`した（おそらくroot権限で実施した） 

・通信状況が良い時間帯に再度行った(170Mbps程度）

## 参考にさせてもらった記事
https://teratail.com/questions/58037
Azure AD入門 どんな機能があるかざっくり紹介

#はじめに
初心者の方を対象に、Azure ADの入門書代わりに利用していただければ。

機能の使い方は解説しないので、気になるトピックがあれば調べてみてください。

##どんな機能があるの？
多くの方が使いそうな機能をピックアップして紹介していきます。

以下の記事では、今回話す内容+αで細かく解説しています。
[AzureADとは？初心者が押さえておくべき4つの機能をわかりやすく解説](https://www.karikawa-blog.com/learn-azure-active-directory/)

###①ユーザ管理機能
Azure ADはActive Directoryと同様に、ユーザを管理する機能を持っています。

ユーザにはAzureの特権ロールであったり、Microsoft365のライセンスをつけられたりできます。

###②ID管理機能
Azureへの認証部分の管理ができます。

多要素認証・条件付きアクセスなどが代表例です。

###③SSO機能
Microsoft製品やSalesforce、Dropboxなどサードパーティ製の製品へAzureのアカウント1つで認証がかけられます。

Azure ADはIdP（Identify Provider）と呼ばれたりします。対して、認証先のアプリケーションはSP（Service Provider）と呼ばれます。

##まとめ
Azure ADは他にも沢山の機能がありますが、核となる機能を紹介しました。

使いこなすと特に認証周りは楽になると思います。#各サービス毎にID/PWを打ちログインをする面倒な作業がなくなります。
git メモ

# gitコマンド

# 初回のシステムセットアップ

## 名前とメールをGitに設定

```
$ git config --global user.name "自分の名前"
$ git config --global user.email your.email@example.com
```

## `git co`をcheckoutのエイリアスに設定する

```
$ git config --global alias.co checkout
```

## Gitでパスワードを一定時間保持するように設定する

```
$ git config --global credential.helper "cache --timeout=86400"
```

Gitはパスワードを86,400秒（つまり1日）の間保持してくれます

# 初回のリポジトリセットアップ

## 新しいリポジトリの初期化

```
$ cd ~/environment/hello_app    # Just in case you weren't already there
$ git init
```

## プロジェクトの全ファイルをリポジトリに追加(gitignoreを除く)

```
$ git add -A
```

## コミット

```
$ git commit -m "Initialize repository"
```

## コミットメッセージの履歴を参照

```
$ git log
```

## GitHubをリモートoriginに追加してそのリポジトリにpushする

```
$ git remote add origin https://github.com/<あなたのGitHubアカウント名>/hello_app.git
$ git push -u origin main
```

-uはset upstream用

# ブランチ、編集、コミット、マージ

## ブランチ

```
$ git checkout -b modify-README

$ git branch
```

## （ブランチの状態を確認）

```
$ git status
```

## 変更を一括でコミットする

```
$ git commit -a -m "Improve the README file"
```

## マージ

```
$ git checkout master
$ git merge modify-README
```

## (トピックブランチを削除)

```
$ git branch -d modify-README
```

## プッシュ

```
$ git push
```
SimpleGUIのFileBrowseで一度選択したフォルダのパスをクリアする

#背景
SimpleGUIのFileBrowseでファイルのパスを入手、再度空白に戻すという操作を紹介します。

#コード紹介
コードは上半分でウィンドウレイアウト、下半分で挙動を定義しています。上半分のウィンドウレイアウトのコードは以下の通り。

```python:demo1.py
import PySimpleGUI as sg

sg.theme('DarkTeal7')
layout = [[sg.Input(key="input_path"), sg.FileBrowse('Select', key='input_path2')],
          [sg.Button('submit', key='submit'),sg.Button('clear', key='-clear-') ],
          [sg.Output(size=(60,20))],
          ]
window = sg.Window('ファイル選択', layout)
```
残り半分のコード。右上の×ボタン、submitボタン、clearボタンの挙動を定義。（敢えてelseを使わずに記載しています。）

```python:demo2.py
while True:
    event, values = window.read()
    if event == sg.WIN_CLOSED:
        break
    elif event == "-clear-" :  
        window['input_path'].update("")
    elif event =='submit': 
        print('input_path:' + str(values['input_path']))
        print('input_path2:' + str(values['input_path']))
window.close
```
上の二つのコードをつなげて実行すると以下のウィンドウが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481632/e355e168-c240-b319-845f-6ffd9562b971.png)
selectボタンを押すと以下のようにファイルのパスを選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481632/cf7ba959-401a-1e7d-22e8-3b88a305aaba.png)
submitボタンを押すと以下のようにファイルのパスがプリントされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481632/fa82c37d-ed9f-ef58-9f71-038d06e4e18e.png)
cleartボタンを押してからもう一度submitボタンを押すと以下のようにファイルのパスがクリアされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481632/1cbe7250-44f6-bbbe-bc8c-fe56b0c514ed.png)

#ポイント
ポイントはsg.Input()のkey=input_pathをクリアするというコードにしたところ。何故だかわからなかったのですがsg.FileBrowse()のkey=input_path2をクリアしようとするとうまくいきませんでした。
Google App Script『REST APIを使用して、Salesforceのバージョン取得』

# はじめに
- Salesforceで、**REST API**の使い方について知りたい方
- Salesforceのバージョンを確認したい方
- ※今回は、GASを使用します。


## REST APIとは
> REST API (RESTful API とも言います) は、REST アーキテクチャスタイルの制約に従い、RESTful Web サービスとの対話を可能にするアプリケーション・プログラミング・インタフェース (API または Web API) です。REST は REpresentational State Transfer の略で、コンピュータ・サイエンティストの Roy Fielding によって作られました。

引用：[REST API とは](https://www.redhat.com/ja/topics/api/what-is-a-rest-api)

また、SalesforceのREST API リソースへの HTTP 要求には、以下の情報が含まれている必要があります。

- HTTPメソッド(HEAD、GET、POST、PATCH、DELETE)
-  OAuth 2.0認証で要求されるアクセストークン
-  HTTP ACCEPTヘッダー(デフォルトは、JSON)
-  Lightning Platform REST リソース。
-  要求に必要な情報が含まれるJSONファイルまたはXMLファイル






## Salesforceのバージョン取得



######サンプルコード
```js:version.gas
function getVersion() {
  const options = {
    "method" : "GET",
    "headers" : {
      "Authorization": "Bearer " + ここにアクセストークン
    }
  }
  const instance = ここにインスタンス名(※ドメイン名のこと)
  const request_url = `https://${instance}.salesforce.com/services/data/`
  const response = UrlFetchApp.fetch(request_url , options);
  Logger.log(response);
}
```
## 参考サイト
- [REST API とは](https://www.redhat.com/ja/topics/api/what-is-a-rest-api)
- [ステップ 4: サンプルコードを実行する](https://developer.salesforce.com/docs/atlas.ja-jp.232.0.api_rest.meta/api_rest/quickstart_code.htm)
Rust  OpenCVのimreadメソッドのエラーハンドリング

## 発生した問題
rust-opencvを使って画像ファイルを読み込む際、`imread()` を使います。
こんな感じ↓

```rust
fn main() {
   imread("path/to/image.png", IMREAD_COLOR);
}
```

画像の読み込みに失敗したときにエラーを出したいので、このように書きました。

```rust
fn main() {
    let src_img;
    let result_read_img = imread("path/to/image.png", IMREAD_COLOR);
    match result_read_img {
        Ok(img) => src_img = img,
        Err(error) => {
            panic!("{:?}", error);
        }
    };
}
```

しかし、[ドキュメント](https://docs.rs/opencv/0.53.1/opencv/imgcodecs/fn.imread.html) をよく読んでみると、**「画像読み込みに失敗した場合は空のデータを返す」**と書いてあります。

https://docs.rs/opencv/0.53.1/opencv/imgcodecs/fn.imread.html

したがって、読み込み失敗した場合でも`Err`の箇所が呼ばれることはありません。


##　結論
`empty()`で評価する。

https://docs.rs/opencv/0.59.0/opencv/core/prelude/trait.MatTraitConst.html#method.empty

```rust
fn main() {
    let src_img = imread("path/to/image.png", IMREAD_COLOR).unwrap();
    if src_img.empty().unwrap() {
        panic!("Failed to read image.")
    };
}
```
`data()`でも良さそう。

https://docs.rs/opencv/0.36.0/opencv/core/trait.MatTraitManual.html#method.data

```rust
fn main() {
    let src_img = imread("path/to/image.png", IMREAD_COLOR).unwrap();
    if src_img.data().is_err() {
        panic!("Failed to read image.")
    };
}
```

### バージョン情報
```toml
# Cargo.toml

[dependencies]
opencv = "0.53.1"
```

```bash
$ cargo --version
cargo 1.54.0 (5ae8d74b3 2021-06-22)

$ rustc -V                                                                                                                                                                 
rustc 1.54.0 (a178d0322 2021-07-26)

$ rustup -V                                                                                                                                                                
rustup 1.24.3 (ce5817a94 2021-05-31)
```
【AWS CDK】Batchで起動テンプレートを利用する場合のユーザーデータの実装

Batchのコンピューティング環境で利用する起動テンプレートのユーザーデータは **MIME マルチパートアーカイブの形式** で定義しなければならないらしい。
CDKで実装するときに少しハマったので調べた内容を残しておく。

https://docs.aws.amazon.com/ja_jp/batch/latest/userguide/launch-templates.html#lt-user-data

# 実装

何はともあれ実装。こんな感じで実装するとうまくいく。

```python
from aws_cdk import aws_ec2

# UserDataインスタンスの作成
user_data = aws_ec2.MultipartUserData()

# UserDataの中身を定義。
user_data.add_part(
    # MIME マルチパートアーカイブの形式のUserDataを定義する
    aws_ec2.MultipartBody.from_raw_body(
        # データの種類を指定。今回はシェルスクリプト
        content_type='text/x-shellscript; charset="utf-8"',
        # シェルスクリプトを定義
        body="echo 'hello world'",
    )
)

# 起動テンプレートを定義
launch_template = aws_ec2.LaunchTemplate(
    self, "HogehogeLaunchTemplate",
    ebs_optimized=False,
    key_name=definition.key_name,
    launch_template_name="HogehogeLaunchTemplate",
    user_data=user_data # 先ほど定義した UserDataを指定
)
```

こんな感じのUserDataが生成される。

```
Content-Type: multipart/mixed; boundary="+AWS+CDK+User+Data+Separator=="
MIME-Version: 1.0

--+AWS+CDK+User+Data+Separator==
Content-Type: text/x-shellscript; charset="utf-8"

echo 'hello world'

--+AWS+CDK+User+Data+Separator==--
```

# 説明

## MultipartUserData 

MIME マルチパートアーカイブの形式のUserDataオブジェクトは [MultipartUserData クラス](https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_ec2/MultipartUserData.html)で作成する。

※ [UserData クラス](https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_ec2/UserData.html#aws_cdk.aws_ec2.UserData) は抽象クラスでnewできないので注意。

```python
user_data = aws_ec2.MultipartUserData()
```

## MultipartBody 

UserDataの中身は　[MultipartBody クラス](https://docs.aws.amazon.com/cdk/api/latest/python/aws_cdk.aws_ec2/MultipartBody.html#aws_cdk.aws_ec2.MultipartBody) で定義する。 

- `content_type`   
UserDataのデータ形式を指定する。  
シェルスクリプトを書く場合は `text/x-shellscript; charset="utf-8"` を指定
- `body`  
データ本体を記述する。 `transfer_encoding` を指定しなければ自動でbase64エンコードされる。
- `transfer_encoding`  
`body` のエンコード方法を指定する。指定した場合は `body` にエンコード済みの文字列を渡さないといけない


```python
user_data.add_part(
    aws_ec2.MultipartBody.from_raw_body(
        content_type='text/x-shellscript; charset="utf-8"',
        body="echo 'hello world'",
    )
)
```

`MultipartBody` は下記のような定型的な記述をラッピングしてくれるオブジェクトだと思っていい。

```
Content-Type: multipart/mixed; boundary="+AWS+CDK+User+Data+Separator=="
MIME-Version: 1.0

--+AWS+CDK+User+Data+Separator==

--+AWS+CDK+User+Data+Separator==--
```
react まとめ

何日か勉強したので
ほんとにあさーい知識ですのでご容赦ください


また僕の感じたことが中心なので内容は間違えているかもです


## react とは

・生産性の高い javascript
・コンポーネントの概念が中心
・コンポーネントを組み合わせで１つのページをつくる
・非同期のSPAなページを作るのには必須

## コンポーネントとは

・javascript のオブジェクト指向を強くしたイメージ
・例えば動画再生のページがあったとして
　　動画再生ボタンのコンポーネント
　　動画停止ボタンのコンポーネント
　　動画を映す画面のコンポーネント
　　など様々なコンポーネントを組み合わせで１つのページを組み立てる
・それぞれのコンポーネントは ruby のクラスのように独自性を持つ
・コンポーネントは１つ作成すれば違う箇所でも使い回せる
・例えば動画再生ボタンは違うページでも動画再生ボタンとして使える
・よって保守性が高くなる

## SPAなページとは

・メインのページの中に各ページを描画するイメージ
・動画再生のホームページだったら以下みたいになる
　　メインページ
　　　↳ お気に入り動画一覧を表示するコンポーネント
　　　↳ 動画再生ページの描画をするコンポーネント
　　　↳ おすすめ動画一覧を表示するコンポーネント
・そして URL によってどのコンポーネントを表示するかを分けている
・よって Single Page Application (SPA) と呼ばれる

## 非同期処理とは

・コンポーネント毎に通信をさせるイメージ
・つまりページの更新とは別のタイミングで
　コンポーネントの描画が更新される
・例えば
　リロード中のマウスのくるくるとか
　画像表示されるまで骨組みを表示されるのとかは
   　非同期処理の一例
・UXが向上する

## rails との連携

・rails を APIモードにするのが主流
・つまり rails にはMVCのMCに集中させる
・Vの部分を react で作る

## SPA化のメリット・デメリット

・メリット
　UXが向上する
　フロントエンドとバックエンドの開発を分けられる
　最近の主流
　react のライブラリが充実している

・デメリット
　学習が大変
　工数が増える
　途中からSPAにするとかはしにくい（これはよくわからないです）
　構成によっては処理が遅くなる


バッチファイルのコード上で簡易編集モードを無効にする

先日『[【Python】スクリプトから簡易編集モードを無効にする](https://qiita.com/suga__/items/6d9eb44e2d6b581fce22)』という記事を書きました｡ 
この記事の処理を書こうと思った動機として､ batファイルで簡易編集モードをOFFにしようと思ったがやり方が分からなかった､ ということがあります｡ 

ですが今日バッチファイルからでも簡易編集モードをOFFにするやり方を見つけました｡

```bat
@echo off
setlocal
set /A STD_OUTPUT_HANDLE=-10
PowerShell  ^
   $GetStdHandle = Add-Type 'A' -PassThru -MemberDefinition '  ^
      [DllImport(\"Kernel32.dll\")]  ^
      public static extern IntPtr GetStdHandle(int nStdHandle);  ^
   ';  ^
   $SetConsoleMode = Add-Type 'B' -PassThru -MemberDefinition '  ^
      [DllImport(\"Kernel32.dll\")]  ^
      public static extern bool SetConsoleMode(IntPtr hWnd, int mode);  ^
   ';  ^
   $StdoutHandle = $GetStdHandle::GetStdHandle(%STD_OUTPUT_HANDLE%);  ^
   $mode= 0xFDB7; ^
   $null= $SetConsoleMode::SetConsoleMode($StdoutHandle,$mode);  ^
%End PowerShell%

set /p AAA=簡易編集モードがOFFになっていれば成功
```

以下のサイトを参考にしました｡[Detect ANSI-compatible console from Windows batch file?](https://stackoverflow.com/questions/38044810/detect-ansi-compatible-console-from-windows-batch-file)
(STD_OUTPUT_HANDLE=-10や0xFDB7の数字の意味については[自分の以前の記事](https://qiita.com/suga__/items/6d9eb44e2d6b581fce22)を見てください)

このやり方を書いている日本語サイトが見つからず苦労したので､同じことをやろうとしている人の助けになれば幸いです｡
CBORメモ

# 仕様
https://cbor.io/

# 概要
IOTなどで使用を想定されるエンコード方式。軽量。
16進数のバイト配列がエンコードされた場合の状態。

## 実際の計量度合い
`{"name":"山田太郎"}`をエンコード
### Base64 encode
```
JTdCJTIybmFtZSUyMjolMjIlRTUlQjElQjElRTclOTQlQjAlRTUlQTQlQUElRTklODMlOEUlMjIlN0Q
```
`79`bytes

### CBOR encode
```
a1646e616d656ce5b1b1e794b0e5a4aae9838e
```

`38`bytes

# テストサイト
cbor.meが死んでいるので、以下がオススメ。
https://cbor.nemo157.com/

# 各言語実装
https://cbor.io/impls.html

# JavaScriptサンプル

```javascript
const json = "{\"aaa\":111}";
const buf2hex = (buffer: ArrayBuffer) => { // buffer is an ArrayBuffer
        return [...new Uint8Array(buffer)]
            .map(x => x.toString(16).padStart(2, '0'))
            .join('');
    }
const cbor = require('cbor-web')
buf2hex(cbor.encode(JSON.parse(json)) as ArrayBuffer)
```

```console
a163616161186f
```

# Javaサンプル

```java
var json = "{\"aaa\":111}";
ObjectMapper om = new ObjectMapper();
Object object = om.readValue(json, Object.class);

CborObject cborObject = CborObject.createFromJavaObject(object);

log.info("{}", Base64.getEncoder().encode(cborObject.toCborByteArray()));
// Byte to Hex16
StringBuilder sb = new StringBuilder();
for (byte b : cborObject.toCborByteArray()) {
    sb.append(String.format("%02x", b));
}
log.info("{}", sb);
```

```console
a163616161186f
```
ラズパイを使ってスマートホームを実現

#ラズパイを使ってスマートホームを実現
　　目的は家のテレビ、エアコン、電気など、すべてのリモコン操作をラズパイ一つにまとめ、アレクサを利用してコントロールする。
　　1週間をかけてやったこと、まだ記憶が新しいうちに、下記をメモします。
###１．できたこと：
　　ラズパイからアレクサを利用して、テレビのオン／オフができました。
###２．アーキテクチャ：
####　ハードウエア編：
　　・Raspberry Pi4 Model B：本体＋電源１セット。アマゾンで調達した。
　　・Crowtail Stackable Shield For Raspberry Pi 2.0：配線なしでGPIO１０個、I2C１つ、UART１つのインタフェースを持つボード。秋葉原で調達した。
　　・Grove 赤外線レシーバー - Grove Infrared Receiver。秋葉原で調達した。
　　・Grove 赤外線エミッタ - Grove Infrared Emitter。秋葉原で調達した。
　　・USBマイク。アマゾンで調達した。
　　・ミニースピーカー。アマゾンで調達した。
　　組み立て完成図（配線がないため、スッキリします。）：
![20211103084826.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/a0723781-b00d-bf09-c3ad-18b801537ae5.jpeg)
####　ソフトウェア／ソリューション編：
　　・Node-RED Alexa Home Skill Bridgeでデバイスを登録
　　・https://alexa.amazon.co.jp　でデバイスを検出
　　・aspberry PiでNode-REDを起動する
　　・Raspberry PiのNode-REDをブラウザで開いて、デバイスのアクションを追加。
###３．手順：
####　①組み立て
　　Crowtail Stackable Shieldをラズパイに接続し、赤外線レシーバーをGPIO１４，赤外線エミッタをGPIO１５に挿します。
　　配線がないため、組み立てはめっちゃらくです、回路図も書いてないです。
　　ただ、Crowtail Stackable Shieldを挿したら、ラズパイのケースが使えなくなったので、楽を追及するの代わりに、ラズパイを保護するケースを外しました、拡張ボートを使ったほうがいいかもね。
####　②音声テスト
　　参考サイト：第1回 ラズパイでAIカメラを自作しよう！ 初めの一歩、ラズパイに目、耳、口を追加する
　　https://deviceplus.jp/hobby/entry_y01/
　　使ったスピーカーとUSBマイクはこのサイトに似ているため、参考することにしました。
####　③テレビリモコンの赤外線を受信し、ラズパイに保存する。
　　参考サイト：【Raspberry Pi】【エアコン操作】赤外線の受信・送信
　　https://qiita.com/oouaioi/items/f4bdd2024b1b9bd0f5c8
　　テレビ電源の赤外線を受信するコマンド：./irrp.py -r -g14 -f codes tv:on --post 130
　　テレビへ電源オン／オフの赤外線信号を送信するコマンド：./irrp.py -p -g15 -f codes tv:on
　　メモ：GPIO14から受信、GPIO15へ送信。
####　④AmazonEchoからRaspberryPiのコマンドを実行する
　　参考サイト：AmazonEchoからRaspberryPiのコマンドを実行する
　　https://pcvogel.sarakura.net/2018/04/16/31828
　　メモ：③のテレビ電源オン／オフコマンドをtv_on.shに保存。
　　Node-RED、Node-RED Alexa Home Skill Bridgeの設定など、
　　Node-RED でフロー作成（Raspberry Pi でのコマンド実行）
　　これでAmazonEchoに「アレクサ、テレビを開いて！」を声掛けたら、テレビのオン／オフができました。
　　家中のリモコンをバンバン取りまくっていこうと思います。
####　⑤Raspberry piのアレクサ化
　　参考サイト：Raspberry piのスマートスピーカー化 (Amazon Alexaの公式インストールシェルが利用できないのでソースからインストールしてみた)
　　https://qiita.com/kanamekun/items/12f5d970509b575edce4
　　ラズパイに入っている必要パッケージが足りなかったようで、インストール３回失敗を繰り返し、やっと成功になりました。
　　失敗したところをメモ：
　　　Alexaのインストール：エラー内容が覚えていないが、コンパイルでエラー／ワーニングが数回出ました、足りないパッケージを追加インストールしたらいけました。
　　　Python3.7　→　Python3.9.7にアップデート：Python-3.9.7.tarからのアップグレードは少々面倒です。
　　これでラズパイに「アレクサ、テレビを開いて！」を声掛けたら、同じくテレビのオン／オフができました。
####最後に
　　アレクサからの定型アクションを使ってテレビの音量上げるのも成功しましたが、チャンネルを変えるアクションはまだ出来ていない。家中すべてのリモコンをアクションに変更することは中々大変そうですね。
【悲報】日本人、呪術廻戦とボーボボの区別がつかない

まずはこちらの画像をご覧ください
![77d1d87d-s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/5f476242-5dc4-015c-d0e6-9ffcefa49e1f.jpeg)

左列は**呪術廻戦**という現在少年ジャンプで連載中の漫画で、右列は**ボボボーボ・ボーボボ**という私が中学生の時に同じく少年ジャンプで連載していた漫画となります。
この画像自体は、とあるまとめサイトから拾ってきた画像なのですが、２つの漫画は並べて比較されるとあまりに類似しており、正直区別が付かなくとも無理はないと感じました。
しかしながら、両者の見分けが付かないとなれば、単行本の購入ミスやキャラの誤りなどが発生してしまい、困る人がかなりいるのではないのでしょうか。人間の目で厳しいのであれば、AIに見分けていただきましょう。というのが今回のコンセプトです。

# 今回のプロダクト

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BadJQzL" data-user="watanabe-tsubasa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watanabe-tsubasa/pen/BadJQzL">
  ボーボボ廻戦</a> by watanabe-tsubasa (<a href="https://codepen.io/watanabe-tsubasa">@watanabe-tsubasa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

一旦はwebアプリでプロトタイプを作成しました。
※環境によって埋め込みがうまく作動しないようですので、以下のリンクよりご覧ください。

https://codepen.io/watanabe-tsubasa/pen/BadJQzL

以下詳細解説いたします。

#環境
>[CodePen](https://codepen.io/)：webアプリ開発
[TeachableMachine](https://teachablemachine.withgoogle.com/)：機械学習

#作業過程
まず、実装のさらに前段階のプロトタイプで、呪術廻戦とボーボボについて漫画のコマを区別することは、TeachableMachineによりかなり簡単にできることがわかりました。さすがAI。

ですので、せっかく漫画のコマを見分けられるのであれば、顔診断に使ってみよう、すなわち呪術廻戦顔か、ボーボボ顔かを診断してくれるツールにしてみようと考えました。
さらに、どちらの漫画かだけではつまらないので、特に人気のキャラに似ているかまで判定してもらえるように設計することとしました。

呪術廻戦側の人気キャラは言うまでもなく**五条悟**でしょう。読んだことがない私でも名前を知っているキャラです。
ボーボボ側は悩みましたが、以下の資料を見て判断しました。![EvDBrj-VIAA7Fot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/7c89071c-8ff6-b7b3-d9a2-b562766360e9.jpeg)
**ボーボボ**に決定します。

#学習データ
**呪術廻戦**
- 各単行本の表紙
- google画像検索 呪術廻戦＋名場面
- ただし**五条悟**が単独で写っているものは除く
計 79サンプル

**ボボボーボ・ボーボボ**
- 各単行本の表紙
- google画像検索 ボボボーボ・ボーボボ＋名場面
- ただし**ボーボボ本人**が単独で写っているものは除く
計 83サンプル

**五条悟**
- google画像検索 五条悟　により単独で写っている映像
計 54サンプル

**ボーボボ本人**
- google画像検索 ボーボボ＋本人　により単独で写っている映像
計 31サンプル
五条悟はpixivなど含めるとかなりの量がありましたが、ボーボボは単独での画像が少なく、なかなかサンプルが集まりませんでした。
人気キャラのはずなのに。

#実際の使用感
![スクリーンショット 2021-11-03 23.18.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/e947aed1-190d-18d8-d333-8b6aaea7efe9.png)
私は五条悟です。
成功したので、廻廻奇譚流しました。

真面目に書くと、**五条悟と呪術廻戦が判定されやすい**印象です。
ボーボボ本人も出なくはないですが、ボボボーボ・ボーボボは本当に漫画のコマを見せないと反応しないレベルなので、学習データのクレンジングが必要かもしれません。

#使ってもらって
高校時代の友人に使ってもらいましたが、やはりボボボーボ・ボーボボは漫画のコマ見せないと出ないとのこと。呪術廻戦とボーボボを見分けるという当初の目的は達成できましたが、ボーボボ顔の診断にはもう一工夫必要そうです。

#もし五条悟が出ない方がいたら
目を隠せば出ます。
あなたはイヌ科？ネコ科？それとも・・・を顔判定

#飼っているペットに似る？
最近学んだ機械学習を使って何かできないかな・・・と思っていたところ、
ちょうど同僚とランチをしているときに、
いずみさんって**「なんか犬っぽいですよね！」**
という会話から始まり、**飼っているペットに似るのかなぁ・・・**という疑問から
機械学習で猫っぽいのか？犬っぽいのか？を判定してみよう！ということでチャレンジ！

#猫と犬の学習
[Teachable　Machine](https://teachablemachine.withgoogle.com/)で犬と猫の写真を学習させました。
![犬と猫.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/14c31c04-7e69-d40b-21d1-bd8caa81e485.png)

工夫したところは、

:::note info
・顔がうつったアップの写真を選ぶこと
・犬や猫の中でも種類が違うものを選ぶこと
:::

です。

#完成品
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="gOxoRwX" data-user="haranakaizumi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haranakaizumi/pen/gOxoRwX">
  あなたはネコ科？イヌ科？</a> by HaranakaIzumi (<a href="https://codepen.io/haranakaizumi">@haranakaizumi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

ちなみに、結果は・・・**犬**でした！！

#耳が重要・・・？
家族や同僚に試してもらったのですが、ほぼほぼみんな**犬**でした。
学習させる画像を増やしても駄目で、ふと、**顔と耳の大きさの割合**なんじゃないかと思い、
![m_wowkorea-20210114wow063.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/06635c2f-4bea-c8c5-04c3-e92c0802fe5a.jpeg)
このポーズをしたところ、（画像はイメージです）
次はほぼほぼ、みんな**犬**になりました。

#おまけ
イヌ科？ネコ科？の中に、**『馬顔』**なんてあったら、面白いんじゃないかと思い、
馬も学習させてみました。
実際にやってみた結果は・・・
![thumb.jfif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2052662/afd670de-29e0-8d4e-896a-2d0ca712c45d.jpeg)
・・・**馬**でした。（画像は実際のものです）
かなりショックだったので、他の人にやってもらうのはやめました。（お馬さん、ごめん）
勇気のある方は、実践してみてください。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNzpwKV" data-user="haranakaizumi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/haranakaizumi/pen/rNzpwKV">
  あなたはイヌ科？ネコ科？それとも・・・</a> by HaranakaIzumi (<a href="https://codepen.io/haranakaizumi">@haranakaizumi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
【RxSwift】オペレーター


## はじめに
オペレータの使い方まとめ。備忘録。

### ToArray

```swift
let disposeBag = DisposeBag()
Observable.of(1,2,3,4).toArray().subscribe {
    print($0)
}.disposed(by: disposeBag)

// 出力
success([1, 2, 3, 4])
```


###Map

```swift
let disposeBag = DisposeBag()
Observable.of(1,2,3,4).map({$0 * 2}).subscribe {
    print($0)
}.disposed(by: disposeBag)

// 出力
next(2)
next(4)
next(6)
next(8)
completed
```

###FlatMap


```swift
let disposeBag = DisposeBag()

struct Subject {
    let like: BehaviorRelay<Bool>
}

let english = Subject(like: BehaviorRelay(value: true))
let math = Subject(like: BehaviorRelay(value: false))

let subject = PublishSubject<Subject>()

subject.asObservable()
    .flatMap { 
        $0.like.asObservable()
    }
    .subscribe {
        print($0)
    }
    .disposed(by: disposeBag)

subject.onNext(english)
english.like.accept(false)

subject.onNext(math)
english.like.accept(false)

// 出力
next(true)
next(false)
next(false)
next(false)
```

##FlatMapLatest


```swift
let disposeBag = DisposeBag()

// 構造体
struct Subject {
    let like: BehaviorRelay<Bool>
}

let english = Subject(like: BehaviorRelay(value: true))
let math = Subject(like: BehaviorRelay(value: false))

let subject = PublishSubject<Subject>()

subject.asObservable()
    .flatMapLatest {
        $0.like.asObservable()
    }
    .subscribe {
        print($0)
    }
    .disposed(by: disposeBag)

subject.onNext(english)
english.like.accept(false)

subject.onNext(math)
english.like.accept(false)

// 出力
next(true)
next(false)
next(false)
```

##終わりに
随時更新
scaffold で出来るよくわからんコード

今まで見て見ぬふりしてきたけど
scaffold で出来るコントローラー内のよくわからないコードに
真剣に向き合ってみた

```
status: :unprocessable_entity
```

https://developer.mozilla.org/ja/docs/Web/HTTP/Status/422

文法は正しいからエラーがださない。ただ失敗したという意味

```
status: :created, location: @blog
```

https://developer.mozilla.org/ja/docs/Web/HTTP/Status/201

新しくデータベースに追加した（リソースを作成した）
内容は `location` にいれておく
という意味

```
 head :no_content 
```
https://developer.mozilla.org/ja/docs/Web/HTTP/Status/204


処理は成功したけど特に返す情報はないという意味

```
head
```
これは HTTPリクエストではなく `render` とかの仲間　
通知するだけという意味

こちらは以下参照させていただいた

https://qiita.com/tfrcm/items/e3022f1508f1b030baca

その他参考になりそうな部分は以下

https://www.itmanage.co.jp/column/http-www-request-response-statuscode/




HTTP は調べれば調べるほど沼だった

気が向いたときにちまちま勉強する
[Swift] Computed Propertyにasyncとthrowsをつける方法


## モチベーション
functionでエラーを返す可能性がある時はthrowsをつけます。
Computed Propertyでもできそうだけとあんまりthrows使ってるの見ないなあと思ったのでどうやって書くのか調べてみました。
あとSwiftにasync-awaitが追加されたので、async-awaitと組み合わせるとどんな書き方になるか調べてみました。

## 環境
Swift5.5
Xcode13.1

## ComputedPropertyにthrowsをつける書き方

以下のようにgetterの後にthrowsをつけます。

**Before**

```swift
var body: Data? {
    try? JSONEncoder().encode(parameters)
}
````

**After**

```swift
var body: Data {
    get throws {
        try JSONEncoder().encode(parameters)
    }
}
```

※ setにも同じようにつけてみましたが怒られました。

`'set' accessor cannot have specifier 'throws'` と出るのでthrowsを付けられるのはgetterだけっぽいですね。

```swift
var foo: String {
    get {
        ""
    }
    set throws { // `'set' accessor cannot have specifier 'throws'`
            
    }
}
```

ProtocolでthrowsつきのComputed Propertyを宣言することもできました。

**Before**

```swift
protocol RequestProtocol {
    var body: Data? { get }
}
```

**After**

```swift
protocol RequestProtocol {
    var body: Data { get throws }
}
```

## ComputedPropertyにasyncとthrowsをつける書き方

以下のようにgetterの後にasyncとthrowsをつけるだけです。

```swift
var body: Data {
    get async throws {
        try await foo()
    }
}

func foo() async throws -> Data {
    Data()
}
```

呼び出す側

```swift
urlRequest.httpBody = try await requestItem.body
```

Protocolでの宣言時は以下のようになります。

```swift
protocol RequestProtocol {
    var body: Data { get async throws }
}
```

## 所感

async-awaitの登場で今までコールバックを渡していたfunctionがComputed Propertyに書き換わっていきそうな気がしています。
そうなるとthrowsやasyncなComputed Propertyを宣言する機会も増えてきそうなので、いい感じに予習ができてよかったです。

上記のコードはコンパイルが通るレベルでしか動作を確認できていないので、もし間違いがあればご指摘いただけると幸いです。
AOJトライに関する知識知見の記録共有 （Volume0-0042）

# 概要
A Thief

https://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=0042
 
# コード
TIPS：ビット演算での探索パターン制御

```
def ret_value_weight_items(items, w_limit=-1):
    items = sorted(items, key=lambda x: -x[1])
    le = len(items)
    ret = []
    for ptnbit in range(pow(2, le)):
        its = [items[i] for i in range(le) if (ptnbit>>i)%2 == 1]
        #print(its, ptn)
        value, weight = [sum([v[idx] for v in its]) for idx in [0, 1]]
        if weight <= w_limit:
            ret.append([value, weight, its])
    return ret

def core(args, nbests=3):
    w_limit = args[0]
    items = args[1]
    value_weight_items = ret_value_weight_items(items, w_limit=w_limit)
    return sorted(value_weight_items, key=lambda x: (-x[0], x[1]))[:nbests]

def app(*args):
    return [[arg, core(arg)] for arg in args]

from pprint import pprint
pprint(app(
[50, [[60,10],[100,20],[120,30],[210,45],[10,4]]],
[60, [[60,10],[100,20],[120,30],[210,45]]],
))

```

# 実行結果
デバッグログ出力部含む

```
[[[50, [[60, 10], [100, 20], [120, 30], [210, 45], [10, 4]]],
  [[220, 49, [[210, 45], [10, 4]]],
   [220, 50, [[120, 30], [100, 20]]],
   [210, 45, [[210, 45]]]]],
 [[60, [[60, 10], [100, 20], [120, 30], [210, 45]]],
  [[280, 60, [[120, 30], [100, 20], [60, 10]]],
   [270, 55, [[210, 45], [60, 10]]],
   [220, 50, [[120, 30], [100, 20]]]]]]
```

# 補足
残課題：探索途中での枝刈り高速化
【Django / heroku】デプロイ後のアプリケーションエラーに対する確認すべき点

#はじめに
どうもこんばんは、吉田プログラマーです。
herokuへのデプロイ経験は２回しかありませんが、エラーに対して確認してきた点を述べていきます。

なお、今回は__デプロイ時のエラー__ではなく、__デプロイ後のアプリケーションエラー__について説明します。

#アプリケーションエラー
![アプリケーションエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1608896/466c53d9-2bcc-1e9c-7cdc-b0128ccc0532.png)

出ました、憎きアプリケーションエラーの画面ですね。
親の顔よりとまではいかずとも、親戚の顔より見た人は多いんじゃないでしょうか（多分）。
[heroku logs --tail]でログを確認してもいまいちピンと来ませんでしたが、エラーの理由は結構初歩的なミスばかり。。。

遭遇したエラー原因を以下に記していきます。

##①Procfile
ここでミスしてはいけない点は、ちゃんとプロジェクト名を指定出来ているかだと思います。
Djangoで何かしらのアプリケーションを開発する際、最初にこのコマンドを打ちますよね。

```
django-admin startproject <プロジェクト名>
```

ここで指定したプロジェクト名は、Procfileの記述の際にも使用します。

```
web: gunicorn <プロジェクト名>.wsgi
```
それとProcfileの配置場所にもご注意ください。__プロジェクトフォルダ直下に作成__となります。

##②requirements.txt
このテキストファイルも必ず、__プロジェクトフォルダ直下に作成__します。
あと必要なライブラリをインストールした場合、下記コマンドで更新を忘れないようにしましょう。

```requirements.txt
pip freeze > requirements.txt
```

デプロイ後の「 heroku run python manage.py migrate 」実行時にエラーが出てしまいます。

##③runtime.txt
ちゃんとPythonのバージョンも教えてあげないとですね。こちらも当然、__プロジェクトフォルダ直下に作成__します。
使用しているPythonの現バージョンは以下のコマンドを実行して確認します。

```
python --version
```
表示されたバージョンが分かり次第、runtime.txtには以下のようにバージョンを記述していきます。

```runtime.txt
python-<pythonバージョン>
```

##④マイグレーション
上記3ファイルを作成後、今度はマイグレーションもしなければなりません。herokuのpostgreSQLに対してですね。

```
heroku run python manage.py migrate
```

##⑤スーパーユーザー
開発環境同様、スーパーユーザーの作成も必須です。
以下のコマンドを打って作成しましょう。

```
heroku run python manage.py createsuperuser
```

#おわりに
簡単に述べましたが、他にも沢山の原因があるかもしれません。
いま一度デプロイの方法等を一から確認し、スペルミスがないか、手順に抜け落ちがないか確認した方が良いでしょう。
……と自信満々に言ってますが、こちらも十分に気を付けていかないとですね(汗)

記事に間違い、追記すべき点等がありましたら、コメント欄にご連絡頂けますと幸いです。
ArduinoUNOやめない？って話

# はじめに
Arduino UNO・MEGA・NANO・Pro miniなどに使われているのが「ATmega328P」などのAVRマイコンです．
この記事では，筆者が考える「ArduinoIDEで開発する上で，AVRマイコン搭載のマイコンボードが~~クソな~~使いにくい理由」について紹介します．

# Arduino UNOのいいところ
本題の前に，Arduino UNOのいいところについて触れましょう．

1. Switch Scienceで買うと永久保証がつく
* 買ってArduino IDEをインストールしたらすぐ使える
* 対応していないライブラリはまずない（と思われる）

ボードマネージャのインストールとか面倒な作業なしで始められる上，壊してもタダで交換してもらえるので，初めてプロトタイピングする人にはとてもオススメです．

# Arduino UNOの悪いところ
いよいよ本題です．
あくまで，筆者の個人的な意見として読んでいただけると嬉しいです．

## ロジックレベルが5V
これが一番大きい理由です．
ロジックレベルとは，マイコンのGPIO(General Purpose Input/Output)が入出力する信号の電圧レベルのことです．

ロジックレベルが異なるモジュール同士では，デジタル信号のHIGH/LOWが認識できず，通信できない場合が多いです．
どうしても通信したい場合は，[双方向レベル変換モジュール](https://www.switch-science.com/catalog/1523/)とかを使わないといけません．なんだこれ．

で，最近のセンサとかってロジックレベルが3.3Vとか1.8Vが多いんですよね．
**毎度レベル変換しますか？筆者は嫌です．**

最近筆者がよく使うマイコンボードは以下のようなものですが，これらはすべてロジックレベルが3.3Vです．

* Metroシリーズ・Featherシリーズ（Adafruit社）
* ESPr-WROOM-32D/E

余談ですが，SwitchScienceで販売しているようなセンサの開発ボードは，ロジックレベルが異なっても，ボード上の部品がセンサに合わせてロジックレベルを調整したりしてくれるので問題なかったりします．

## RAM容量が小さい

RAMが小さいとどうなるかというと，変数の量が限られるということです．
音声など2次元以上の膨大なデータを扱うときにRAMが小さいと格納できるデータが限られてしまいます．

では，Arduino IDEで開発可能な各種マイコンボードはどれほどのRAM容量を持っているのでしょうか？

|マイコンの種類|RAM容量|
|:--|--:|
|Arduino UNO|2048 byte|
|Adafruit Metro M4 Express|196608 byte|
|ESPr-WROOM-32|327680 byte|
|Spresense|786432 byte|

...比べてわかる圧倒的小ささです．2桁差て．
SpresenseはSonyから発売されている高性能マイコンボードで，ハイレゾ音源なども扱えるらしいです．

## クロック周波数が遅い
「クロック周波数が遅い」とはすなわち「単位時間あたりの処理回数が少ない」ということです．
これも音声や振動などを非常に短い間隔でサンプリングしたいときなどに影響があります．

これについても他のマイコンボードと比較してみましょう．

|マイコンの種類|クロック周波数|
|:--|:--|
|Arduino UNO|16MHz|
|Adafruit Metro M4 Express|120MHz(Max 200MHz)|
|ESPr-WROOM-32|80MHz ~ 240MHz|
|Spresense|156MHz|

これも大きな差がついていますね．

## 価格について
ここまで性能差について着目してきましたが，「安けりゃいいじゃん」な人もいるかと思いますので，価格についても比較しましょう．

|マイコンの種類|価格|販売ページ|
|:--|--:|--|
|Arduino UNO|3300円|https://www.switch-science.com/catalog/789/|
|Adafruit Metro M4 Express|4323円|https://www.switch-science.com/catalog/5399/|
|ESPr-WROOM-32開発ボード|1480円|https://akizukidenshi.com/catalog/g/gM-11819/|
|Spresense|6050円|https://akizukidenshi.com/catalog/g/gM-14584/|

※2021/11/03時点の価格です．

Arduino UNOあまり安くない...
Switch Scienceで購入したArduino UNOには[永久保証](https://trac.switch-science.com/wiki/warranty)がつくので破損しても無償で交換できるからでしょうか．

ただArduino UNOって教育用途にも使われるのですごく頑丈にできているのか，筆者は初期不良以外で破損したケースを知りません．

# 結論
ここに書いた欠点は，筆者が実際にArduino UNOを使ってプロトタイピングをした際に直面した問題です（ロジックレベルが違うことに気づかずモジュールと通信できないまま数時間無駄にしたなど）．
そこで，同じ失敗をする人が減ったらいいなと思い，記事にしました．
<font color="Silver">あと，筆者は同じような価格帯なら性能いいほうを買いたい派です．</font>
iOSアプリ開発でPodfileにコピペする為のメモ（時々更新）

#Podfileにコピペするメモ


##Firebase

```:
  pod 'Firebase'
  pod 'Firebase/Auth'
  pod 'Firebase/Storage'
  pod 'Firebase/Firestore'
```

##RealmSwift

```:
  pod 'RealmSwift'
```

##カレンダー

```:
  pod 'FSCalendar'
  pod 'CalculateCalendarLogic'
```

##通信

```:
  pod 'Alamofire'
```

##JSON
```:
  pod 'SwiftyJSON'
```

##画像

```:
  pod 'SDWebImage'
```

##アニメーション

```:
  pod 'lottie-ios'
```

# 終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。
railsチュートリアル第１１章 AccountActivationsリソース

#アカウントの有効化
アカウントを有効化するステップを新規登録の途中に差し込むことで、
本当にそのメールアドレスの持ち主なのかどうかを確認できるようにしてみます。

・ユーザーの初期状態は「有効化されていない」（unactivated)
・ユーザー登録が行われたときに、有効化トークンと、それに対応する有効化ダイジェストを生成
・有効化ダイジェストはデータベースに保存しておき、有効化トークンはメールアドレスと一緒に、ユーザーに送信する有効化用メールのリンクに仕込んでおく
・ユーザーがメールのリンクをクリックしたら、アプリケーションはメールアドレスをキーにしてユーザーを探し、データベース内に保存しておいた有効化ダイジェストと比較することでトークンを認証する。
・ユーザーを認証できたら、ユーザーのステータスを「有効化されていない」から「有効化済み」（activated）に変更
##AccountActivationsリソース
セッション機能（8.1）を使って、アカウントの有効化という作業を「リソース」としてモデル化することにします。

```
$ git checkout -b account-activation
```
###AccountActivationsコントローラ
```
ubuntu:~/environment/sample_app (account-activation) $ rails generate controller AccountActivations
Running via Spring preloader in process 3511
      create  app/controllers/account_activations_controller.rb
      invoke  erb
      create    app/views/account_activations
      invoke  test_unit
      create    test/controllers/account_activations_controller_test.rb
      invoke  helper
      create    app/helpers/account_activations_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/account_activations.scss
```
####アカウント有効化に使うリソース（editアクション）を追加する
config/routes.rb

```rb
Rails.application.routes.draw do
  get 'sessions/new'
  root 'static_pages#home'
  # 何の意味がわからん
  # ホーム画面がhomeページなるらしい
  get  '/help',    to: 'static_pages#help'
  # static_pagesコントローラからhomeアクションに紐付けされる
  # getでアクセルすることでページを取得することができる
  get  '/about',   to: 'static_pages#about'
  # 何を書いているかはわからない
  get  '/contact', to: 'static_pages#contact'
  # aboutアクションにGETリクエストを送る
  get  '/signup',  to: 'users#new'
  # urlに/signupと書くとuserコントローラのnewアクションを起こす
  get    '/login',   to: 'sessions#new'
  # データを取得
  post   '/login',   to: 'sessions#create'
  # データを投稿
  delete '/logout',  to: 'sessions#destroy'
  # 削除
  resources :users
  # /users/1の有効にするため
  resources :account_activations, only: [:edit]
  # editアクションへの名前付きルートが必要になるため
  # ルーティングのアカウント有効化
end
```

リクエスト	　    GET
URL     　    /account_activation/トークン/edit
Action	     edit
名前付きルート  edit_account_activation_url(token)

###演習
1.
現時点でテストスイートを実行すると green になることを確認してみましょう。

```
ubuntu:~/environment/sample_app (account-activation) $ rails t
Running via Spring preloader in process 4158
Started with run options --seed 14759

  43/43: [============================] 100% Time: 00:00:08, Time: 00:00:08

Finished in 8.73823s
43 tests, 168 assertions, 0 failures, 0 errors, 0 skips
```

2.
表 11.2の名前付きルートでは、_pathではなく_urlを使うように記してあります。なぜでしょうか? 考えてみましょう。ヒント: 私達はこれからメールで名前付きルートを使います。

urlをメールで使うから


`
パケットトレーサーでネットワーク学習1103

・スイッチはレイヤー２の宛先MACアドレスを見て情報を送る。

・ルーターの設定を変更。
※Pysicalで電源ボタンを押す
コマンド：configuration dialog? [yes/no]: no

※ユーザーモードから特権モードにする。
コマンド：Router>enable 

※ルーターの設定
コマンド：Router#configure terminal 
※IPアドレスの設定
コマンド：（例）Router(config)#interface gigabitEthernet 0/0
Router(config-if)#ip address 192.168.1.254 255.255.255.0
Router(config-if)#no shutdown←ポートを開ける設定

※ルータのルーティングテーブルを見る。
コマンド：Router#show ip route

（例）
 192.168.1.0/24 is variably subnetted, 2 subnets, 2 masks
C       192.168.1.0/24 is directly connected, GigabitEthernet0/0
L       192.168.1.254/32 is directly connected, GigabitEthernet0/0
※IPアドレス192.168.1.0/24の情報
※CとLは192.168.1.0/24の情報を２つ持っている。
※Cはconnected。192.168.1.0/24はGigabitEthernet0/0の先に繋がっているということ。
※Lはlocal。192.168.1.254/32は自分自身の持っているIPアドレス。
vmwareをインストールする。

#はじめに
vmwareをインストールするまでの道のり。

# 最終更新日
2021年11月3日

# 環境の情報
OS
windows10


# 注意
最新の状態を確認して下さい。

# 公式はこちら
https://www.vmware.com/jp/products/workstation-player.html
https://customerconnect.vmware.com/en/downloads/info/slug/desktop_end_user_computing/vmware_workstation_player/16_0

ここから取ってくる。

![1D95B811-C136-466A-B459-B378934644E1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/e11e4b2e-0c46-ab4d-226b-5388888046f0.jpeg)

![1973C60A-E8BE-4206-B85A-DFFD4680DE7D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/5e839ef8-814f-63e9-2379-15fc9f8c86a3.jpeg)

![EF2F766E-507C-41BA-B25B-375110B6412F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/0e50efb2-c764-ba8e-b9b1-94af898586db.jpeg)


# セットアップしていく。

ぽちぽち押していく。

![スクリーンショット 2021-10-29 153803.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/984e0687-c604-ad9d-2fa3-0dc6de98360f.png)



![スクリーンショット 2021-10-29 153826.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/97705332-16f1-e7b9-2608-5c8674f4c0a0.png)
![スクリーンショット 2021-10-29 153921.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/acb4d291-8b3c-cd91-6823-d31145833e68.png)
![スクリーンショット 2021-10-29 154012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/68c452ed-aab0-419e-4920-df29ee4c7ebf.png)
![スクリーンショット 2021-10-29 154027.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/a728efe6-e4c5-0692-2f4c-19a684c26f0d.png)
![スクリーンショット 2021-10-29 154132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/a8888086-5c57-98fd-f8fa-dcc8ab679125.png)


# こんな感じの画面が出ればOK
![スクリーンショット 2021-10-29 154602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/1ec8da44-f0d7-2501-9d54-912a96f6f589.png)
AWS:便利なAutoScalingを設定してみた。

<h1>AWS:AutoScaling オートスケーリングについて</h1>
<h2>オートスケーリングとは</h2>
必要に応じてEC2インスタンスを増減してくれる便利な機能。
![IMG_84970B690799-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226984/3fa4746b-346f-9da1-88a8-88e487cbe511.jpeg)
<h2>まずは起動テンプレートを作成</h2>
EC2インスタンス＞起動テンプレート＞起動テンプレートを作成
それぞれ、必要に応じてカスタマイズをする。

アクションメニューからバージョンをつけて設定の更新ができる。これが最大の特徴。

☆インスタンスのアクションから「イメージ＆テンプレート」を選択しても作成可能。


<h2>AutoScalingグループを作成</h2>

AutoScaling>AutoScalingグループ＞AutoScalingグループを作成

名前や作成したテンプレートを選択し、容量を選択。最小、希望、最大の容量を設定。
注意：インスタンスのスケールイン保護を有効にすると、使用率などが低くなっても削除されないという設定になる。

Autoという名前のついたインスタンスが立ち上がる。


<h2>アラームの設定とCloudWatch</h2>
CloudWatch＞アラーム＞アラームの作成
・メトリクスを選択
・しきい値の設定

この設定を７０％以上と３０％以下で作成する。

<h2>スケーリングポリシーでCloudWatchのアラームを紐付け</h2>
AutoScalingグループからスケーリングポリシーを設定。
![スクリーンショット 2021-11-03 22.39.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226984/974f49e1-b546-2fd5-8b08-97cb647fef1e.png)

こちらも削除と追加の二つを作成する。

<h2>負荷をかけてテストをしてみる</h2>
・インスタンスに接続からLinuxコマンド”TOP"で状態を確認（抜けるにはctrl＋c）
・　yes >> /dev/null &
 →＆はバックグラウンドで実行というコマンド
　　→yes >> ひたすら　yesを出力し続ける

これを4回ほど叩いて負荷をかける（あるインスタンス分。今回は２つ）

しばらく時間をおいてみると、インスタンスが最大の４つにまで作成され、安定すると自動で削除される。

負荷の解除は、
TOP で　PIDの番号を取得し、kill {3091..3096} ←例
のように、連番になっている番号で一括でKillする。

<h2>まとめ</h2>
一連の必要な設定、流れを掴むと簡単に自動でスケーリングしてくれるなんて、本当に便利な機能ですね！
例えるなら、飲食店の１日のような感じですね。
朝からお昼前はお客さんが少ないのでスタッフも少なく、ランチタイムのピークに向けてスタッフを増員、そして夜のピークタイムまではまた人員を減らし、ピークタイムに人員を増やす。
そんなイメージを頭の中で描きながらやってみるととても面白いですよね。
しかも自動で調整してくれるなんて、本当に便利ですね！



___
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com
___
addEventListener の第３引数の false


なんかのテキストで
`addEventListener` の第３引数に false をつける箇所があった

```
  const lists = document.getElementById('lists');
  const target = document.getElementById('btn');
  target.addEventListener('click', function() {
    const form = document.getElementById('name');
    const list = document.createElement('li');
    list.textContent = form.value;
    lists.appendChild(list);
    form.value = "";
  },false); (←ここ)
```

 これってなんだって思って調べた

https://k-chan-note.jp/js-addeventlistener-usecapture.php

どうやらキャプチャフェーズとバブリングフェーズの制御をしているらしい

イベントの伝播が
親要素から起こるのと
イベント発生部から起こるかの違いとのこと

なるほど全然分からん。
って思いいろいろ試してみた

## 第３引数が false の場合

```
<body>
  <div id="div1">
    div1
    <div id="div2">
      div2
        <div id="div3">
          div3
        </div>
    </div>
  </div>
  <script>
    const target1 = document.getElementById("div1")
    const target2 = document.getElementById("div2")
    const target3 = document.getElementById("div3")
    target1.addEventListener("click", () => {
      alert("div1")
    }, false)
    target2.addEventListener("click", () => {
      alert("div2")
    }, false)
    target3.addEventListener("click", () => {
      alert("div3")
    }, false)
  </script>
</body>
</html>
```

こんなコードがあるとして


div3 をクリックするとイベントの伝播が起きるので
div3　⇒　div2 ⇒　div1 の順でアラートがでる


### 第３引数が true の場合

```
<body>
  <div id="div1">
    div1
    <div id="div2">
      div2
        <div id="div3">
          div3
        </div>
    </div>
  </div>
  <script>
    const target1 = document.getElementById("div1")
    const target2 = document.getElementById("div2")
    const target3 = document.getElementById("div3")
    target1.addEventListener("click", () => {
      alert("div1")
    }, true)
    target2.addEventListener("click", () => {
      alert("div2")
    }, true)
    target3.addEventListener("click", () => {
      alert("div3")
    }, true)
  </script>
</body>
</html>
```
このコードも上と同じ
ただ第３引数は true にしている


今回は `div3` をクリックすると親要素からイベントの伝播が起きる
つまり
div1　⇒　div2 ⇒　div3 の順でアラートがでる
HacobuneでSpringBoot(Java)起動してみた

Hacobune(PaaS)の使い方を理解するために、シンプルなSpringBootアプリを起動してみました。

## 参考にした情報

* Hacobuneのマニュアル
https://manual.c1.hacobuneapp.com/docs

* Hacobuneオープンβ版提供開始発表会
https://www.youtube.com/watch?v=a9u3682Erxs
動画後半の設定の流れが参考になりました。

## 起動してみた流れ


### アカウント開設
https://cloud.sakura.ad.jp

### ログイン後のコントロールパネル

以下のアイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/d5b5ee31-3dc4-9ae5-039f-09d5f906d11f.png)

### Hacobuneのコントロール画面から設定
プロジェクト作成し、アプリケーションにて新規作成ボタンを押して以下を設定。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/e834cf5b-6913-2e26-d433-5478d64327c7.png)

* アプリケーション名：gs-spring-boot-docker
* デプロイ方法：パブリックのDockerイメージを使用
* Dockerイメージ名：springio/gs-spring-boot-docker
* ポート：8080

(上記Dockerイメージ名：springio/gs-spring-boot-docker URL）
https://hub.docker.com/r/springio/gs-spring-boot-docker

### アプリの設定続き

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/97e1fd8b-1bf0-cb22-508e-18b0bbd2b886.png)

* ドメイン：sample-spring-boot
* プラン：フリー

### 起動

作成ボタンを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/b24448aa-fc91-5c55-a384-47fc86b60adb.png)

稼働しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/9a8c65e9-a59e-8859-5043-d668e41762dd.png)

いつものSpringBootが起動する際に表示されるメッセージですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/882c8d0f-0c68-1320-21ce-867a4d789082.png)

### 確認
画面上のURLをクリックして、公開されたアプリへアクセス。
ブラウザ上にHello Worldが表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25604/36f3bc03-d7b6-80f8-ed5c-45c65e51a8a8.png)


### 感想
設定自体はとても簡単でした。
まだベータ段階のサービスなので本番適用はできないと思いますが、
個人勉強で開発したアプリを公開する目的やデモアプリを検証するのに使えますね。
現在、無料でありがたい。今後はDBやRedis接続を試してみようと思っています。
【Unity】できるだけ何も考えずに、AssetStoreOriginals の アセット（HDRP）を Built-in に持って行く手順

学生アカウントでせっかく手に入れたこのアセットを使いたいけど、自分はずっと Built-in パイプラインで開発してるので、そっちに合わせたい。

https://assetstore.unity.com/packages/templates/packs/snaps-art-hd-school-158106

とりあえず、Unity 2021.1.20 で開いたらスクリプトがないとか重複してるとか色々エラーが出た。

ストアの説明では、

> Compatible with:
> 2018.4

とのことなので従うことにした。

以下、最小手順

1. 現時点で 2018.4 では最新の Unity 2018.4.36f1 を選択し、追加モジュールなしでインストール。
1. Unity 2018.4 の新規プロジェクトで上記アセットをインポート
1. 大したエラーもなくインポート完了※１
1. Assets/AssetStoreOriginals 配下をまるごとエクスポート
1. Unity 2021.1.20f1 の新規プロジェクトを開き、エクスポートしたパッケージをインポート
1. Unity 2021.1.20f1 側のシーンを開くと、例のごとくピンクムラサキになってるので、シェーダーを変更する。
1. マテリアルをまとめて表示※２し、全選択。インスペクターで好きなシェーダーに変更する。
1. あとは、使いたい Prefab だけ選択して include dependecies を入れたままエクスポートすれば、使えるはず。SimpleCameraController.cs は Unity Particle Pack に入ってるスクリプトと名前が衝突するし、使わないので省いて OK

以上。

元のプロジェクトでは、全マテリアルのシェーダーが HDRenderPipiline/Lit だけど、Built-in では草やガラス、壁面など、それぞれ適切なシェーダーを設定する必要あり。
とりあえずまとめてシェーダーを変更したあと、同類のものはフォルダ毎にまとまってると思うので、個別に調整しましょう。
HDRP関連のコンポーネントはお亡くなりになられますが、素材がほしいだけのときはこれで十分かと。

似たような感じで Unity Japan Office の素材も移植できます。

なお、インポート／エクスポートですごく時間がかかりました。丸一日つぶす覚悟でどうぞ。


※１
Warningくらいは出た

```
💭Packages were changed.
Update Mode: mergeDefaultDependencies

The following packages were added:
  com.unity.render-pipelines.high-definition@4.1.0-preview

UnityEditor.Web.JSProxyMgr:DoTasks()
```
```
⚠️ A polygon of Stairs_middle_LOD01 is self-intersecting and has been discarded.
```
```
⚠️ A polygon of Clock_01_LOD01 is self-intersecting and has been discarded.
```
```
⚠️ A polygon of Clock_01_LOD02 is self-intersecting and has been discarded.
```

※２
マテリアルをまとめて表示（ここにボタンと検索バーがあるじゃろ？）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253921/4bd51c3f-ddbd-67af-c38f-a18f38ac9661.png)
データを一元管理する「ERP」とは？

![qiita_header_007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1667780/888a3f6c-6742-752c-a58b-a550a27ec178.jpeg)

:::note info
YouTubeのBOXIL CHANNELさんの動画を参考に記事を書いております。大変分かりやすくERPについて説明してくださっているので、動画で学びたい方は一番下にある参考文献からアクセスしてください。
:::

## ERPって何？
ERPとは、Enterprise Resources Planning の略です。企業経営の基本となる資源要素（ヒト・モノ・カネ・情報）を適切に分配し有効活用する計画＝考え方を意味します。もう少し簡単に説明するとERPとは「自社の経営情報のほとんどすべてを集約するデータベース・データシステム」の総称です。日本では「統合基幹業務システム」や「基幹系情報システム」などと呼ばれています。

部門や業務別に専門のシステムを導入している企業にとって、それぞれの管理を一元化に行えるため、基幹業務の効率化や経営戦略決定に役立ちます。
（ex. 会計ソフト、給与計算システム、在庫管理システム、人材管理システム）


## ERPの活用プロセス
##### ①ITによって多くの情報を集約
営業情報・物流情報・経理情報・財務情報など、企業内に点在しているあらゆる情報をIT化により一元管理する
##### ②経営状態を定量的に把握する
##### ③現場の課題を解決していく


## ERPがユーザーに提供しているシステム
1.財務会計管理
2.予算管理
3.販売管理
4.購買管理
5.倉庫・在庫管理
6.顧客管理
7.営業支援管理
8.プロジェクト管理
9.人材管理
10.マーケティング管理
11.Eコマース
12.ビジネスインテリジェンス(BI)

このようなシステムのなかから、自社に必要な機能を搭載しているEPRを選びます。

## ERPの導入形態4つ
ERPとは「生産・在庫管理の手法」であり、MRP（Manufacturing Resource Planning / 資材所要計画）の考え方を企業経営向けに発展させた概念です。MRPとは資源を有効活用し、より効率の良い生産計画を立てるための生産管理手法のことです。企業が有する資源の活用、生産能力を最適化する管理手法の一つとされています。

ERPには「統合型」や「コンポーネント型」などのいくつかの導入形態があり、ERPの導入を検討する際には、どの形態が適しているかを事前に把握する必要があります。

#### 導入形態①【統合型】
「販売」「会計」「在庫」「人事」それぞれのデータベースを分けずに企業内のデータを一つに統合して管理します。情報共有化や社内での仕事の連携を効率化することが可能です。さらに、データが統合されているので、リアルタイムで確認でき、経営層も的確な判断が容易になります。

#### 導入形態②【コンポーネント型】
ERPの新規導入の際、既存の業務システムがあることが原因で導入をためらうことも多々あります。コンポーネント型のERPであれば既存業務システムの最適化が目的なので、既存の業務システムがあっても導入検討が可能です。既存システムとの連携ができるため、情報システムの強化や業務効率化が期待できます。

#### 導入形態③【業務ソフト型】
ERP導入の検討において、社内のすべてのデータを一つにしてまで管理する必要はないというケースがあります。「管理会計」や「発注管理」など、特定分野の業務だけのシステムに対応できれば良いと考える企業もあります。そのような場合、業務ソフト型が適しています。特定分野のみに対応しているため、比較的費用が安く、導入も容易です。

#### 導入形態④【クラウド型】
グローバル化や環境の多様化など、ニーズの変化は常に起こっています。こうしたニーズの変化に対応するには、従来のERPでは「コスト」「人的リソースの増加」などの課題があります。そのため、現在では導入の柔軟性が高い「クラウドサービス型」のERPが主流になっています。

## ERPの導入メリット3つ
#### 導入メリット①【情報の一元管理】
一般的に「経理の情報は経理のシステムで、営業の情報は営業のシステムで...」というように、別々で管理していますが、ERPではまとめて管理ができます。情報を一元化し、多くの部署で情報を横断的に共有することでデータ共有にかかっていた時間が少なくなります。さらに、全社的なデータ活用が可能です。部門や業務ごとに別のシステムを導入している場合、各システムの数字が合わないなど、擦り合わせや修正作業が必要になります。しかし、ERPでは整合性のとれた精度の高い情報をまとめて管理できるので効率的です。
#### 導入メリット②【迅速な意思決定が可能】
ERPを導入すると社内のさまざまな経営情報が集約されます。「売上データ」「在庫データ」「営業実績」などの経営管理に必要な情報を一元管理することで、より迅速で正確な意思決定を行うことが可能になります。さらに、多くのERPでは経営分析機能が搭載されています。ERPに蓄積された膨大なデータを瞬時に集計・分析することが可能です。データの集計や分析の時間を大幅に削減し、より迅速な企業経営の意思決定へとつながります。
#### 導入メリット③【顧客満足度の向上】
「営業実績」「顧客管理」などの情報を共有することでより迅速な対応が可能になります。緊急の発注があった際も他部署へ問い合わせることなく対応できるので、顧客を待たせることなく、満足度の向上につながります。カスタマーサポートの体制が充実しているERPを導入することで顧客対応が迅速になり、精度が向上します。

## まとめ
#### ERPとは
営業・販売・物流・経理・財務など、企業内に点在しているあらゆる情報をIT化により一元管理するシステム
#### ERPは4種類
統合型・コンポーネント型・業務ソフト型・クラウド型
#### ERP導入のメリット
- データへのアクセスが速くなり、社内での作業や迅速な意思決定が可能
- 顧客対応の精度も上がり、顧客満足度の向上も見込める



***
【参考文献】

https://www.youtube.com/watch?v=u4KXed5zbpk

https://www.oro.com/zac/blog/erp_guideline/

https://it-trend.jp/erp/article/merit

https://www.obic.co.jp/knowledge/erp_foundation/01.html

https://www.grandit.jp/erp/