OmniAICreator/Qiita-1.07M huggingface dataset:
sourceコマンドによるエラー

## はじめに
オリアプの新規登録やログインなどにSNS認証を用いる実装を行おうとした際に予想外のエラーが発生したので、備忘録として載せておこうと思う。
結論として、今回のエラーは**sourceコマンド**に対しての知識不足が原因だった。

## 1.エラー発生
SNS認証の実装を行う中で、以下のエラーが発生した。
エラー内容としてはclient_idがないよというエラー。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/57324d17-f63f-2a0a-78d7-800269dd14d9.png" width=70%>

##2.エラー原因と解決
色々なサイトで原因と解決法を調べたが、なかなか解決することが出来なかった。
その中であるサイトに以下のようなことが記載されていた。
**『複数タブを開いており、rails sをしているタブでsourceコマンドを入力していなかったためでした。』**

もしかして、これが原因か？と思い、sourceコマンドで環境変数を設定したタブでrails sをしてみたら…


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/941480/99d40d3a-4509-f79c-9bff-228310b5fec5.png" width=70%>

**無事解決！！！**

##今回学んだことは
ターミナルで複数のタブを開いている時に片方のタブでsourceコマンドで何かを設定しても、もう片方のタブに反映されない。
　→**タブごとに異なるzshが並列に起動しており、あるタブのzshでsourceした結果は並列して起動している別のタブのzshへは反映されない。**
なので設定していないタブでも**source ~/.zshrc**をしないといけない。

##最後に
原因を解決するまでは記述したコードが間違っているんだろうとしか考えておらず、なかなかエラーを解決することが出来なかった。
今回のエラーは自分が予想していない箇所に原因があり、そういった箇所に目を向けていなかった。
今後はここに原因があるのだろうといった決めつけをせず、もっと柔軟に原因を探る必要があると実感した。


##参考
参考1: https://teratail.com/questions/221942

参考2: https://ja.stackoverflow.com/questions/47624/source-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AB%E3%82%88%E3%82%8B-bashrc-%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E3%81%8C%E5%88%A5%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB%E3%81%AB%E5%8F%8D%E6%98%A0%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AF%E3%81%AA%E3%81%9C
DBで一部カラムにデータが保存されない



下記はcloud9の db/developmentをダウンロードして表示したものです。
一人だけユーザーが保存されており、emailカラムだけがNULLになっているのが分かるでしょうか。

![スクリーンショット 2021-02-13 18.07.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/b38a950f-3c87-c53d-834c-29587d96c199.png)

newとしてあげて代入した後,呼び出すまでは問題ないのですが.saveを実行するとemailカラムにだけ値が抜けてしまいました。エラーも表示されなかったため、どこが間違えているの分からず時間を取られました..
見づらいですが、一番下の行を見るとエラーはなくtrueで表示されているのが分かります。
![スクリーンショット 2021-02-13 18.24.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/0b2b4f06-7b59-5c2e-ffd6-9bc4f805c442.png)


**原因**
原因はapp/models/[ファイル名]として使用していたdowncase!メソッドでした。

```
  before_save { self.email = email.downcase! }
```
downcaseは通常文字列を小文字に変換してくれる便利なメソッドですが、!をつける事で、文字列に変更がない場合nillを返して上書きします。
downcseメソッドの[リファレンス](https://docs.ruby-lang.org/ja/latest/method/String/i/downcase=21.html)を確認すると文字列に変更がない場合はnilを返しますとはっきり書いています。
![スクリーンショット 2021-02-13 18.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641519/3ad882e1-8dfb-244e-a4ca-e913442f7fea.png)

今回の経験で破壊的メソッドの怖さを思い知りました。
以後、破壊的メソッドを使用する際は十分注意して記述したいと思います。（できるだけ使わない）
Vueでローディング画面の実装

#概要
Vueでローディング画面を作成します。

こういうの↓
![ダウンロード (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643906/7b38c816-9ccf-5541-5347-4291ff75e4d9.gif)

#実装
ローディングのモジュールはいくつかありますが、今回は`vue-loaders`というモジュールを利用します。
アニメーションの種類が多かったのでこれにしました。

導入方法はこちら
[github](https://github.com/Hokid/vue-loaders?ref=kabanoki.net)

今回は`mounted()`のタイミングでローディングを開始し、`mounted()`が終わったタイミングでローディングを終了したいと思います。

##store
```store/loading.js
const state ={
    loading: true, //true:ローディングを表示, false:ローディング非表示
};

const getters ={
    loading: state => state.loading ? state.loading: '',
};

const mutations ={
    setLoading(state,loading){
        state.loading = loading;
    },
};
const actions = {
    async startLoad(context){
        context.commit('setLoading', true);
    },
    async endLoad(context){
        context.commit('setLoading', false);
    } 
};

export default{
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}
```
ローディングが開始したら`startLoad`を発火、終わったら`endLoad`を発火して非表示にします。

##template
```.vue
<template>
    <div class="new-article">
            <div class="loader-space" v-show="loading">
                <vue-loaders-ball-beat color="#FFF" class="loader"></vue-loaders-ball-beat>
            </div>
            <div class="contents" v-show="!loading">
            <!--ローディング後に表示したいコンテンツ-->
            </div>
        </div>
    
</template>
<script>
export default {
    computed: {
        loading(){
            return this.$store.getters["loading/loading"];
        },
    },
    methods: {
        async getPost() {
            const post = this.$store.getters["newtimeline/post"];
            if(!post){
                await this.$store.dispatch('newtimeline/getPost');
            }
        },
    },
    mounted() {
        console.log('mounted start');
        this.$store.dispatch('loading/startLoad')               //ローディング開始をする　loading = true;
            .then(()=>this.getPost())                           //getPost()メソッドを開始
            .then(()=>this.$store.dispatch('loading/endLoad')); //ローディング終了 loading = false;
    },
}
</script>
```

非同期処理で動かさないと`endLoad()`の方が先に走ってしまうので、非同期で実装しましょう。


#最後に
割と簡単に実装することができました。
面白いアニメーションもあり、使ってて楽しかったです。


#参考文献
[Vue.jsで28種類のローディングアニメーションを実装する「vue-loaders」](https://www.kabanoki.net/6414/)
M5Stack/Stick/ATOMのドライバーインストールできないときに助けになるかもしれないメモ

#背景
久々にM5Stackデバイス(ATOM Liteなど)を使おうと思い、Windows10端末に接続しましたが、うまく認識されません。
(デバイスドライバーで 他のデバイスにM5Stackと表示される)

#試したこと
こちらの[M5Stackのページ](https://m5stack.com/pages/download)に紹介されている CP2104 Driver を使っても上手くいきませんでした。

#上手く行った方法
色々と試したした結果、下記のドライバー製造元[FTDIのVCP Driver](https://ftdichip.com/drivers/vcp-drivers/)をインストールしたところ無事成功しました。
※最初ほかのデバイス、に表示されているデバイスが消えたのですがポートに不明なデバイスが出ました。2回インストールして成功しました。
誰でもできる！DiscordのBotアカウント作成

## Botアカウント作成
Discord APIを使用するには、BotのDiscordアカウントを用意する必要があります。

Botのアカウント作成はとても簡単です。

以下の手順に従って、Botアカウントを作成してください。

### [DiscordのWebサイト](https://discord.com/)にログインしていることを確認してください。
### [アプリケーションページ](https://discord.com/developers/applications)に移動します。(このページは英語です。)
###「New Application」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/cbfba598-6b33-cf0f-1a72-497f7132feb5.png)
### アプリケーションの名前を決めて、「Create」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/e820e382-cfd0-5e28-da24-901dc999c3df.png)
###「Bot」タブへ移動し、「Add Bot」をクリックしてBotユーザーを作成します。

「Yes, do it!」をクリックして続行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/17fa4e00-2a86-9f92-b617-d6eed795f321.png)
### 他人にBotの招待を許可する場合には、 Public Bot にチェックを入れてください。

また、必要なサービスを開発している場合を除いて、 Require OAuth2 Code Grant がオフになっていることを確認する必要があります。わからない場合は チェックを外してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/8a856b4c-a04a-2511-22da-66e3fbf60275.png)
### 「Copy」ボタンを使ってトークンをコピーします。

```text
このトークンは、あなたのBotのパスワードと同義であることを覚えておきましょう。
誰か他の人とトークンを共有することは絶対に避けてください。
トークンがあれば、誰かがあなたのBotにログインし、サーバーから退出したり、サーバー内のすべてのメンバーをBANしたり、すべての人にメンションを送るなどといった悪質な行為を行える様になってしまいます。

可能性は無限にあるので、絶対に トークンを共有しないでください。

誤ってトークンを流出させてしまった場合、可能な限り速急に「Regenerate」ボタンをクリックしましょう。
これによって古いトークンが無効になり、新しいトークンが再生成されます。今度からは新しいトークンを利用してログインを行う必要があります。
```

### 以上です。 これでボットアカウントが作成され、そのトークンでログインできます。
## Botを招待
Botのユーザーを作成しましたが、現時点ではどのサーバーにも参加していない状態です。

Botを招待したい場合は、そのための招待URLを作成する必要があります。

### 
DiscordのWebサイトにログインしていることを確認してください。

### [アプリケーションページ](https://discord.com/developers/applications)に移動します。(このページは英語です。)
### Botのページを開きます。
### 「OAuth2」タブへ移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/cae946cd-0565-5ad9-c305-1ae897ebd743.png)
### 「scopes」下にある「bot」チェックボックスを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/3329eaed-6fb6-6955-5524-67f54d4712e3.png)
### 「Bot Permissions」からBotの機能に必要な権限を選択してください。
Botに「管理者」権限を要求させることによる影響は認識しておきましょう。

ボットの所有者は、サーバー全体に二段階認証が有効になっているサーバーに追加する場合、特定のアクションと権限に対して二段階認証を有効にする必要があります。詳細については、[二段階認証サポートページ](https://support.discord.com/hc/en-us/articles/219576828-Setting-up-Two-Factor-Authentication)を確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/998021/12a31285-6226-cdcd-58e6-74e5f231c0af.png)
### 結果的に生成されたURLを使ってBotをサーバーに追加することができます。URLをコピーしてブラウザに貼り付け、Botを招待したいサーバーを選択した後、「認証」をクリックしてください。
## 終わりに
この記事で、DiscordBotのアカウント作成とBotの招待リンクの作成方法について解説しました。

もし、これでわからない場合は、コメントなどにぜひぜひご質問ください！！
ES2015における分割代入の使い方まとめ

# ES2015における分割代入の使用例
## 使う場面：
１．複数の変数の宣言・代入を一つの文の中で行うことができる
２．データの代入元がオブジェクトのプロパティ群、或いは配列となります。
## 使い方：
### １．オブジェクトの分割代入
１．宣言なしで代入のみを行う

- データ元となるオブジェクトのプロパティ名と一致する変数にのみ対して代入を行う。
- {}がブロック構文と解釈されないために、 ()で囲む必要がある。


```js
    const obj1 = {
      a: 1,
      b: 2,
      c: 3
    };

    let b, c;
    ({ b, c } = obj1);
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`c:${c}`);  // 出力結果：c:3
```

２．宣言と代入を同時に行う

- 変数宣言に使うキーワードconst、letを使うこと
-  ()をつける必要がない
- オブジェクトのプロパティ名と一致する変数名が必要

```js
    const obj1 = {
      a: 1,
      b: 2,
      c: 3
    };

    const { b, c } = obj1;
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`c:${c}`);  // 出力結果：c:3
```

### ２．配列の分割代入
１．宣言なしで代入のみを行う

- 左辺に並べた変数を[]で囲む
- 右側の配列要素に対応して順番に代入していきます。
- 残りの要素を捕捉して配列型変数に渡せる

```js
    const obj1 = [1, 2, 3, 4];

    let a, b, rest;
    [a, b, ...rest] = obj1;
    console.log(`a:${a}`);  // 出力結果：a:1
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4
```

２．宣言と代入を同時に行う

- 変数宣言に使うキーワードconst、letを使うこと

```js
    const obj1 = [1, 2, 3, 4];

    const [a, b, ...rest] = obj1;
    console.log(`a:${a}`);  // 出力結果：a:1
    console.log(`b:${b}`);  // 出力結果：b:2
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4
```

## 応用
配列分割代入を使うと、変数の値の入れ替えは簡単にできにできます。

```js
let a = 5, b = 10;
[a, b] = [b, a];  // 一時的な変数を使わずに済む
    console.log(`rest:${rest}`);  // 出力結果：rest:3,4
```
世界各国のCOVID-19接触通知アプリ・ソースコードまとめ

日本のCOCOAが残念だったニュースは各所で話題になりました。
では世界を見るとどうなんだろう？と思い、GitHub上にソースが公開されている各国のCOVID-19接触通知アプリをまとめました。

詳しいアーキテクチャまでは見ていないですが、Xamarinを使っているのは日本だけでした。
（個人的にAndroidはわかるけどXamarinはほとんどわからないので、「素直にKotlinで作ってくれていたら多少はコントリビューションできたのに...」と感じています）

## イギリス

https://github.com/nhsx

* バックエンドAPI: https://github.com/nhsx/covid19-app-system-public
    * https://github.com/nhsx/covid19-app-system-public/blob/master/doc/architecture/guidebook.md とか、AWSのterraform定義とか、かなりがっつり作られている印象
* iOSアプリ: https://github.com/nhsx/covid-19-app-ios-ag-public
* Androidアプリ: https://github.com/nhsx/covid-19-app-android-ag-public
    * Dagger2, Retrofit, OkHttp, Moshiなど定番ライブラリが使われている
    * 画面ごとにフォルダが切られていて、概ねMVVM https://github.com/nhsx/covid-19-app-android-ag-public/tree/master/app/src/main/java/uk/nhs/nhsx/covid19/android/app

## イタリア

https://github.com/immuni-app

* バックエンドサービスが、リポジトリ6個（いずれもPython）から成る。
* iOSアプリ: https://github.com/immuni-app/immuni-app-ios
    * Logic, State, UI, など役割ごとにディレクトリが分かれている https://github.com/immuni-app/immuni-app-ios/tree/development/App
* Androidアプリ: https://github.com/immuni-app/immuni-app-android
    * Retrofit, OkHttp, Moshi, Glide, 定番ライブラリが一通り使われている。
    * Navigation-Fragmentなども使われている



## オーストラリア

https://github.com/AU-COVIDSafe

* iOSアプリ: https://github.com/AU-COVIDSafe/mobile-ios
* Androidアプリ: https://github.com/AU-COVIDSafe/mobile-android
    * フルKotlinではなく、一部のコンポーネントにJavaが使われている。そのためか、RxJava2やGuavaなどが使われている。

## ドイツ

https://github.com/corona-warn-app

* バックエンドサービスのリポジトリが3,4個、AWSのTerraform用のリポジトリなどがある
* iOSアプリ: https://github.com/corona-warn-app/cwa-app-ios
* Androidアプリ: https://github.com/corona-warn-app/cwa-app-android
    * 定番ライブラリが一通り使われている。
    * ディレクトリ構造が、かなり細かく分かれている https://github.com/corona-warn-app/cwa-app-android/tree/main/Corona-Warn-App/src/main/java/de/rki/coronawarnapp
【Rails】Zeitwork::NameError を解消する

### 1.はじめに
railsでアプリを作成し、サーバーを立ち上げ`rails s`を行い、`http://localhost:3000/XX`にアクセスしました。
すると、`Zeitwork::NameError`と表示されました。

### 2.使用環境
・mac.os バージョン10.15.6
・Ruby 2.6.6
・Rails 6.0.3.5
・psql (PostgreSQL) 12.6


### 3.実際のエラー
<img width="580" alt="Zeitwerk NameError.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/be6135b7-96d4-a27b-2808-168b43f36748.png">

太字に着目するとPostsControllerの定義が変という旨が書かれていますね。

### 4.結論:スペルミスでした
ということで`Postscontroller`クラスの記述をしている`posts_controller.rb`を確認すると...

```posts_controller.rb
class Postcontroller < ApplicationController
  def index
    @posts = Post.all
  end
end
```
2箇所も間違えておりました。（下記が正しいものです。）

```posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end
```

### 5.まとめ：スペルミス気をつけます
とは言え、Rails6.0で新たに導入された`Zeitwork`モードについて学ぶ良い機会となりました。

### 6.参考リンク
[Railsガイド-定数の自動読み込みと再読み込み (Zeitwerk)](https://railsguides.jp/autoloading_and_reloading_constants.html)

### 7.最後に
記事の感想や意見、ご指摘等あれば伝えていただけるとありがたいです。
読んでいただき、ありがとうございました。
LaravelのDB接続、というか .env でハマった話

Laravel 5.8 から PostgreSQL に接続しようとして .env に必要な情報を記述し、接続テストをすると
"password authentication failed"
というエラーになってつながらない。

同じ設定でPDOを直接使って接続したら普通に接続できる。
数時間悩んで試行錯誤して、原因が判明。
パスワードに "#" が含まれていて .env に

```
DB_PASSWORD=abc#123
```

のように書いていたので、 "#"以降がコメントと見なされていた。

```
DB_PASSWORD="abc#123"
```

とダブルクォートで囲んだら接続できた。
アホ過ぎるorz

### 教訓
"#" を含む可能性がある文字列（パスワード、何かのキーなど）を .env に書くときはダブルクォートで囲んでおいた方が無難。
【メモ】ショートカットの設定

ショートカットに色々設定したくて調べたときのメモです。

# はじめに

#### ショートカットの設定をするために必要な、アプリケーションの場所の調べ方

* アプリの検索で、ショートカットで使いたいアプリを検索し、ファイルの場所を開く

※開いた場所がショートカットの場合は「そのショートカットを右クリック」 → 「プロパティ」 → 「ファイルの場所を開く」でたどってexeファイルの場所を探す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580406/0f6753fb-411f-1991-28a2-3e51fce75bd5.png)


# 規定のブラウザ以外でURLを開くショートカット
* ショートカットのプロパティを開く
* 「リンク先(T)」に、「使いたいブラウザのexeファイルのパス＋半角スペース＋開きたいURL」を設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580406/366ac8d4-654b-f12e-8b02-75ac2cba50b7.png)


# 特定のアプリケーションでファイルを開く
URLと同じ設定方法です。

* ショートカットのプロパティを開く
* 「リンク先(T)」に、「使いたいアプリのexeファイルのパス＋半角スペース＋開きたいファイルのパス」を設定


# 管理者権限で実行するショートカット
* ショートカットを右クリックして「プロパティ(R)」
* ショートカットタブの「詳細設定(D)」
* 「管理者として実行(R)」にチェックを入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580406/7d8a3ebd-da89-5eb3-82a4-a6f0ba0a4d08.png)
自作レーザーポインター　Ⅰ

![IMG_3728.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/d5ec214d-9739-3053-16f1-39a6656ff7e8.jpeg)

#はじめに
絶対に人体に向けて照射しないこと。 プレゼンテーションでの画面への指示や手で触れない物の指摘等の本来の目的外の用途では使用しないこと。 鏡やガラス等の正反射するものに向けて照射しないこと。 レーザー光線は直接目に入ると網膜に障害を起こす危険性があるので、レーザー光線を絶対に直視しない、のぞかないこと。

__絶対に守って下さい。__

#目的
プロジェクタやポスターを使ったプレゼンテーションでの使用。
FRISKケースを__スライド__する事で、電源がONになります。

※注意※
電源を逆に接続しますと、レーザー発光モジュールの素子が破損する恐れがありますので十分に注意してください。

#目次
1. 電子部品リスト
2. 配線図
3. ケース加工
4. 動作確認



#１.電子部品リスト
|名称|型番|備考|
|:----:|:----:|:---:|
|赤色レーザー発光モジュール（薄型）|LM-102-B|https://akizukidenshi.com/catalog/faq/goodsfaq.aspx?goods=M-01091|
|極超小形検出スイッチ 標準/ノンショーティング形|D3C-1210|https://www.marutsu.co.jp/pc/i/54443/|
|9V電池||100円ショップ|
|FRISKケース||セルの右揃えです|
※レーザーモジュールやリミットスイッチを固定するために、接着剤を使用しました。
TAMIYA EPOXY PUTTY（タミヤ・エポキシ造形パテ）



#２.配線図
配線図は以下の通りになっています。
![quiit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/5edb5d4f-e948-a4f0-8cfb-1c16f339ddd5.jpeg)




#３.ケース加工
FRISKケースに赤色が付いてる所に穴を開けます。
レーザー発光が出る穴とスイッチの部分になります。
![IMG_3568.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/7e1ace6b-65ed-3e85-78ce-db1716aa9b99.jpeg)







#４.動作確認
内部の様子になります。
![IMG_3725.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/42ac6736-8722-1023-e757-9a71527b08ea.jpeg)

開閉の様子になります。
![プレゼンテーション1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/b104eb75-ec07-8ca2-5772-48b3d2836a2c.jpeg)
![IMG_3728.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675881/d5ec214d-9739-3053-16f1-39a6656ff7e8.jpeg)
しっかりと動作している事を確認出来ました。
応用数学レポート

※日本ディープラーニング協会のDeep Learning資格試験（E資格）受験に必要な、協会認定の講座プログラム( https://ai999.careers/rabbit/ )がある。
※本プログラム受講に際し、レポート作成はWebやBlogなどで作成する必要があるとのことで、Qiitaで作成することとした。
※個人的な備忘録兼レポート作成用であり、網羅的にカバーするものではありません。ご了承ください。

応用数学においては線形代数、確率統計、情報理論の3項目についてレポート課題として100文字以上で要点をまとめる必要があり、以下に記載する。

#1.線形代数（固有値分解・特異値分解）#

ここでは線形代数のうち応用範囲の広い固有値分解、特異値分解について記載する。ある行列に対して、$$\boldsymbol{Ax}=λ\boldsymbol{x}$$を満たす定数λを固有値、0でないベクトル**x**を固有ベクトルと呼ぶ。正方行列**A**が固有値λ、固有ベクトル**V**を持つとき、

```math
\boldsymbol{A}=\boldsymbol{VSV^{-1}}
```
と分解することを固有値分解という。ただし、**V**=(v1 v2 ・・・)、**S**の対角成分はλ1　λ2・・・、非対角成分0。また、正方行列でない場合は

```math
\boldsymbol{AA^{T}}=\boldsymbol{USS^{T}U^{-1}}\\
\\
\boldsymbol{A^{T}A}=\boldsymbol{VS^{T}SV^{-1}}\\
```

と変形され

```math
\boldsymbol{A}=\boldsymbol{USV^{-1}}
```
と分解される。
固有値分解・特異値分解は主成分分析や対角化など幅広い分野で活用される。例えば画像の固有値分解によって、データの特徴を損なうことなくデータ圧縮やノイズの抑制を可能とする。

###参考図書###

なお、個人的なおすすめ文献は金谷健一先生の「これならわかる最適化数学」。行列演算や最小二乗法などの基礎や導出が丁寧に記載されている。
https://www.kyoritsu-pub.co.jp/kenpon/bookDetail/9784320017863


#2.確率統計#

講義にてカバーされる確率統計のうち備忘録兼レポートを以下に記す。

###条件付き確率###
ある事象X=xが与えられたもとで、Y=yとなる確率。例えば、雨が降る条件（天気X＝雨x）での交通事故（Y=y）の確率

```math
P(Y=y|X=x)=\frac{P(Y=y, X=x)}{P(X=x)}  
```

なお、ベイズの定理

```math
P(B|A)=\frac{P(A\cap B)}{P(A)}　
より、\\

P(A|B)P(B)=P(B|A)P(A)\\
から\\

P(A|B)=\frac{P(B|A)P(A)}{P(B)}
```

を用い、雨の降る確率、交通事故の確率が与えられれば、交通事故が起こったとき（Y=y)に雨（X=x)だった確率

```math
P(X=x|Y=y)=\frac{P(X=x, Y=y)}{P(Y=y)}  
```
も求まる。

###ベルヌーイ分布###

確率 p で 1 を、確率 q = 1 − p で 0 をとる確率分布であり、以下で表される。

```math
P(x|\mu)=\mu^x(1-\mu)^{1-x}
```
この確率分布の平均は$\mu$、分散はpq＝p(1－p)となる。

###参考図書###

統計学の本は様々あるが、機械学習に限らない基礎に関する参考図書として蓑谷先生の本を挙げる。
http://www.tokyo-tosho.co.jp/books/ISBN4-489-00698-5.html

#3.情報理論#

講義にてカバーされる情報理論のうち備忘録兼レポートを以下に記す。

自己情報量は以下に定義される。

```math
{I(x)=-\log{(P(x))}}
```

ただし、P(x)は確率を表しており、例えばサイコロで偶数がでる確率、1が出る確率はそれぞれ1/2、1/6。サイコロ1がでる確率が低く、より低い確率に関する情報量I(x)がより大きいということになる。

自己情報量の期待値H(x)をシャノンエントロピーと呼び、以下で計算される。

```math
{H(x) =  \sum -P(x)\log{P(x)}}
```

これは、確率変数 $\log{P(x)}$、確率P(x)の確率分布の期待値を示す。

カルバック・ライブラーダイバージェンスとは、2つの確率分布の異なり具合を示す。
各々の確率分布の自己情報量の差の期待値を取っている。



```math
{{\begin{eqnarray}

D_{KL}(P||Q) &=& \sum P(x){(-\log{Q(x)}) - (-\log{P(x)})} \\
&=& \sum P(x)\log{\frac{P(x)}{Q(x)}}

\end{eqnarray}}


}
```
###交差エントロピー###

交差エントロピーは2つの確率分布の離れ具合を判定する。確率分布P(x)とQ(x)の交差エントロピーは下記のように定義される。

```math
{\begin{eqnarray}

H(P, Q) &=& -\sum P(x)\log{Q(x)}

\end{eqnarray}}
```


PとQの確率分布が似ていると交差エントロピー誤差は小さくなり、似ていないと大きくなる。最小二乗和とともに誤差関数としてよく用いられる。


###参考図書###
参考書として深層学習の基礎に関し、とっつきにくい面はあるが洞察が深いように感じられる岡本先生の以下の本を挙げる。
https://bookclub.kodansha.co.jp/product?item=0000147653
Minecraftで松明の光の色を変更してみよう！

前回：[影をつける方法](https://qiita.com/MCH_YamaRin/items/771e0d49ef90c39d3fbc)
次回：[葉っぱを風で揺らす方法](https://qiita.com/MCH_YamaRin/items/198be6e14a0f24dcdec1)

#はじめに

今回は、**松明などの光源の色を変更する方法を解説していこうと思います！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1087947/8e05e59a-a9f8-33ca-ac78-a74f70db9348.png)
（画像:SEUS Renewed）

光源の光の色もMinecraftの影Modならではのものですよね。

光源の色を変更するために、**前回も紹介した光源の情報が入った変数、「lmcoord.x」を使っていきます！**

#さっそく色をつけていこう！

```glsl
diffuse.rgb += vec3(1.0 , 0.3 , 0.0) * lmcoord.x;
```

こちらのコードを書いてみましょう。

**「A += B」は「A *= B」と同じように、「Aに、AとBを足し算したものを入れる」という意味になります。**

色は好きな色にしてもらって構わないです！

![2021-02-13_16.57.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1087947/b0c3aa88-8d9b-69be-48fe-55ca8cf0f44f.png)

明るすぎますね

```glsl
diffuse.rgb += vec3(1.0 , 0.3 , 0.0) * max(lmcoord.x - 0.4 , 0.0);
```
「max()」という関数を使って、光の色をつける範囲を調整してみます。

**「max(A , B)」では、AとBのうち、大きい方を返してくれます！**

![2021-02-13_16.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1087947/d12593d7-80d4-e35b-d3ec-b500efbb2be5.png)

いい感じですね～！

```glsl
diffuse.rgb += vec3(1.0 , 0.3 , 0.0) * max(lmcoord.x - 0.4 , 0.0) * (1.0 - lmcoord.y);
```

**明るいところでも光に色がついているのは少し不自然かと思いますので、「lmcoord.y」を使って色をつける場所を洞窟などの暗い場所に限定させてみましょう！**

![2021-02-13_17.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1087947/0b534907-a9e5-4869-be5d-20856d46b92a.png)
![2021-02-13_17.01.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1087947/d70c03d5-39bd-80e1-6018-22d00d0717b1.png)

#さいごに

**次回は草や葉っぱを風で揺らす方法を解説していこうと思います！**

ではまた次回でお会いしましょう～
deviseのform_for をform_with に書き換える。

```erb:form_for
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
```

```erb:form_with
<%= form_with(model: resource, scope: resource_name, url: session_path(resource_name)) do |f| %>
```

早く本家で対応してくれないかしら。

#### 参考
- [【Rails 5】\(新\) form\_with と \(旧\) form\_tag, form\_for の違い \- Qiita](https://qiita.com/hmmrjn/items/24f3b8eade206ace17e2)
- [【Rails】deviseのビューのform\_forをform\_withに置き換える \- Qiita](https://qiita.com/wonder_meet/items/fac07af1edcd79ad102a)
STM32F767のArduinoでの温度,STTS751で温度表示


x 愛用していたSTTS751の入手が難しくなったので代用品は、S-5851A。(おもにアドレスの違い)

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

```c++

#include <Wire.h> //I2C library

// STTS751のドライブは、下記のアドレスを参考にした。
// mike.saunby.net/2013_03_01_archive.html

// I2C temperature sensor - see table 1 of data sheet.  Resistor selects address. 
#define STTS751 0x39

//
byte i2c_sensor_read_byte( int deviceaddress, int eeaddress ) {
  byte rdata = 0xFF;
  int rc;
  Wire.beginTransmission(deviceaddress);
  Wire.write((int)eeaddress);
  rc = Wire.endTransmission(false);
  Wire.requestFrom(deviceaddress, 1);
  if (Wire.available()){
    rdata = Wire.read();
  }
  if(rc != 0){
    //Serial.print("Error ");
    //Serial.println(rc);
  } 
  return rdata;
}

int led     = 16; //adc2
int led_gnd = 17; //adc3

int lo_on = 1; // 1=on 0=off

//プロトタイプ宣言
void stts751_init();

void setup()
{  
    Wire.begin(); // initialise the connection
    Serial.begin(9600);
    //Serial.println("Setup done");
    
   // initialize the digital pin as an output.
  pinMode(led, OUTPUT);     
  pinMode(led_gnd, OUTPUT);     
 
  digitalWrite(led, HIGH);   // turn the LED on (HIGH is the voltage level)
  digitalWrite(led_gnd, LOW);    // turn the LED off by making the voltage LOW

  stts751_init();


} //end setup

void stts751_init()
{
    //4回読み捨てる
    int loop_i;
    for(loop_i=1;loop_i<=4;loop_i++){
      byte lo;
      signed char hi;
      hi = i2c_sensor_read_byte(STTS751, 0);
      if(lo_on == 1 ) {
        lo = i2c_sensor_read_byte(STTS751, 2);
      }
      delay(500);
    } //end for    
} // stts751_init


int stts751_run()
{
 
    byte lo;
    signed char hi;
    float temperature;

    //Serial.println("satart");
    
    // read temperature
    hi = i2c_sensor_read_byte(STTS751, 0);
    lo = 0;
    if(lo_on == 1) {
      lo = i2c_sensor_read_byte(STTS751, 2);
    }
    if( hi > 0){ 
      temperature = hi + lo * 1.0/256.0;
    }else{
      temperature = hi - lo * 1.0/256.0;
    }
    //Serial.print(temperature);
    //Serial.println(" ");
    //delay(1000);
    
    int ret_q;
    ret_q = temperature * 100;
    return(ret_q);
}
 
 
void loop()
{
    //stts751 start 
    int stts751_tmp1 = 0;
    float temperature;
    int hi;
    int lo;
    //stts751 end
  
    //stts751 start  
    stts751_tmp1 = stts751_run();
    temperature = stts751_tmp1 /100.0;
    hi =  stts751_tmp1 >> 8;
    lo =  stts751_tmp1 & 0xFF;
    //stts751 end

    //stts751 start  
    Serial.print(temperature);
    Serial.println(" ");
    //stts751 end

    delay(1000);
}

```

![i2c_f767_stts751_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/e9bef957-53ea-aa61-1215-65c3330850ee.jpeg)

![f767_stts751_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/6e508715-03c9-82ca-caeb-ed19d6e0ed76.jpeg)
Deviseのログイン・ログアウト後に転送するURLを変更する

以下のように `after_sign_in_path_for`、`after_sign_out_path_for` をオーバーライドします。
調べてると`applicationController` に追加するという記事ばかりで、複数のアカウントを扱う場合に制御しにくいなと（UserとAdminとか）。
`SessionController`に記述してあげましょう。
`stored_location_for` を書いておくと、フレンドリーフォワーディング（ログイン画面に転送されるまえにリクエストしたページへリダイレクト）にも対応します。

```rb
class Hoge::SessionsController < Devise::SessionsController

  # 以下を追加
  def after_sign_in_path_for(resource_or_scope)
    stored_location_for(resource_or_scope) || customized_root_path
  end

  def after_sign_out_path_for(resource)
    new_hoge_session_path
  end
end
```

#### 参考
https://github.com/heartcombo/devise/blob/45b831c4ea5a35914037bd27fe88b76d7b3683a4/lib/devise/controllers/helpers.rb

ソースのコメントに `Method used by sessions controller` って書いてますな。
証明書の透明性が怖いという話

# Certificate Transparency(証明書の透明性）
ウェブサイトの信頼性を担保するため、SSL証明書を用意に検索し、情報を閲覧できるようにする仕組み。
不正に取得された証明書を見つけやすくするべく、すべての証明書の情報を検索・閲覧できるようにしてしまおうというそのコンセプトは理解できるのだけれど、、結構困ったケースが発生するなぁという愚痴です。
https://transparencyreport.google.com/https/certificates?hl=ja

ちなみにぐぐったら、まさにドンピシャな内容を5年前に公演している方が。
https://www.jnsa.org/seminar/pki-day/2016/data/1-2_oosumi.pdf

うーわ。。。私の情報おそすぎ、、、
まぁいいか。

## 公開したくない公開サイト
例えばあるシステムの管理用Webシステムで、インタネット経由で接続させないと使いにくいけど、接続元はベンダの拠点のIPレンジに限られるものとか。
Webサイトとしてユーザからの接続を受け付けるために公開しているものではなく、システム同士の接続のためだけに接続を受け付けていて、暗号化のためにSSLを使っている非Webサービスとか。

インタネット上に存在する以上、どれだけ頑張って隠しても、ガッツリ要塞化しても、不特定多数からアクセスされていまうケースは現実的なレベルでありえるわけで、あくまで公開サイトと同等のレベルでのセキュリティを担保して公開するべきもの、、って大前提ではあるのですが、とはいえわざわざ晒す必要もないので、原則隠しておきたいシステムというのは少なからずあるわけです。

## 透明性の怖さ
で、厄介なのが、上記のような隠しておきたいサイトについても、インタネット公開時同等のセキュリテイレベルを担保するべきと考えるとどうなるかというと、、、ちゃんと証明書をとる、というか、取ってしまうんですよね。。
そうすると、透明性で、ガッツリ検索可能になってしまうわけです。
証明書のCN情報であったり、SAN情報であったり。
証明書にサイトのFQDNを書かざるを得ないので、「その名前のサイトが存在する」というのがわかってしまうわけです。

あとは、DNSでそのFQDNを検索し、検索に引っかからなければ、関係者が自組織のDNSにだけレコード登録して使っている関係者限定のサイトか、あるいは構築中で近日公開予定のサイトか、という想像がつくわけです。
あるいはIPアドレスが引けたとして、接続してみてFWで遮断されている雰囲気があるなら、、やはり関係者限定のサイトがそこにある、、というあたりがつくわけですね。。

ワイルドカード証明書使ってれば個別FQDNが隠蔽できるのですけれど、「キチンとFQDNを指定したほうが安全だろう！」みたいに考えると逆にFQDNがモロバレになるという皮肉なことになるわけです。。
実運用考えてもワイルドカードの方が確実に効率的でローコストなのですが、「信頼性（というか監査と基準への適用）」とのトレードオフになるので、如何とも。

## なんで怖いの？
繰り返しですが、隠してるシステムもインタネット公開システムであるという前提で作ってるはずではあるんですが、、、、得てして、ガッツリ公開してるシステムよりはセキュリティがきちんと担保しきれてないケースが少なからずあるわけです。
いつもはFire Wallで接続を遮断してるけどうっかり開けちゃって、、、Fire Wallが遮断してくれてる前提で安心して迂闊な設定残してたり、、、
ってなことが出てくる。

攻撃する側から見れば、ローコストに監視を継続して、運用者がうっかりやらかす日を静かに待ってりゃいいわけですね。

## で、どうするの？
非公開システムではいっそ自己証明書を使うほうがいいのでは、、とすら思いますが、それはそれで発行局管理や失効管理の信頼性が損なわれるし、それより何より監査と規格が通せなくなる、、という悲しい状態が出来上がるわけです。。

まぁ、できることは、自分が面倒をみているドメインの状況を正しく把握しておいて、ヤバそうだなァ。。。というシステムを把握しておくくらいですかね。。

以下のサイトがjsonで透明性の結果を引っこ抜かせてくれるので、大変ありがたい。
https://crt.sh

ここで自分が面倒を見ているドメインの証明書を検索し、証明書のCNやSANに登録されたFQDNを引っこ抜いて、DNS検索+接続性の確認をするスクリプトを組んでおけば状況把握はできるかな。

つくっとくか。。
CSS デベロッパーツールを初めて勉強した。

####CSSの勉強
```html
<!DOCTYPE html>
<html lang="ja"> <!--htmlで囲む。langで日本語にする。-->

<head>
  <meta charset="utf-8"> <!--文字コードをutf-8に設定-->
  <title>あいうえお</title> <!--タブの名前を”あいうえお”に指定-->
  <link rel="stylesheet" href="css/styles.css"> <!--stylesheetを作る-->

  <!-- <style>　<!--コメント-->
    h1 {
      color: red;
    }
  </style>  -->
</head>
<body>　<!--bodyで本文を入れる。-->
  <h1>CSSの勉強</h1> <!--文字をh1サイズにする。タイトルにする。-->
  <p style="color:green;">こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<!--
・<style="color:英語の色;"と指定すると色が指定される。
・要素に直接スタイルをつける事ができる。 
・cssが長くなると別のファイルに書き込む。
-->
</body>
</html>
```
####CSS
```css
h1 {
  color: skyblue;
}
/*
・h1をセレクター
・color:skyblue;を宣言という。
　　右側をプロパティ
　　左側を値という。
・スペースや改行を必ずしもしなくてい良い。
*/
```
```css
body { 
/*
bodyを指定した場合　その子要素であるもの全てにスタイルを指定できる
*/
  color: skyblue;
  border: 1px solid pink;
/*
borderで枠線を作成。body中の子要素に継承されない。
*/
}
h1 {
  border: inherit; /*子要素に継承される。*/
}
```

```css

h1 {
  color: red;/*テキストを赤くする*/
  font-size: 48px;/*フォントのサイズ48px*/
  text-align: center;/*テキストを中央にする*/
  font-weight: normal; /*フォントの太さを通常(normal)にする*/
  text-decoration: line-through;/*line-through テキストに線をひく*/
}

p {
  font-weight: bold;/*フォントを太字（bold）にする*/
  text-decoration: underline;/*underline フォントに下線を引く*/
}

a {
  text-decoration: none;/*テキストに装飾的な線を無くす*/
}
```

```css
@charset "utf-8"; /*CSSに日本語が存在する場合文字化けする可能性があるため文字コードを入力*/

h1 {
  font-family: Verdana, "Arial Black", メイリオ, sans-serif; 
}　
/*PCの中にフォントがない場合、このカテゴリの中のフォントを表示する。*/
```
####フォントファミリー
総称フォントファミリーと呼ばれ、個々のフォント名ではなくフォントのカテゴリーを指定するもの
**・sans-serif ゴシック体
・serif 明朝体
・cursive 筆記体
・monospace 等幅フォント　全ての幅が同じになる**
**・相手のPCにそのフォントがなければ、表示されない。**
**・日本語フォントを先に書くと英字に日本語が適用される。それが嫌な場合英文フォ ントの後に日本語を書く**</p>


####デベロッパーツール
デベロッパーツールを使い、CSSをブラウザで確認。。
その中の<strong>エレメンツパネル</strong>を使えるようになる。
<strong>セクレターに設定されているスタイル</strong>を調べる。

####MDN
MDNで、どのプロパティに継承されるもの、されないものを調べる。
####vscode
vscodeを使うと色を指定した場合、色が表示される。
####macの操作
デベロッパーツールを出す
<strong>option+command+i </strong>
####シンタックスハイライト
コードを書く場合　シングルクゥオートを三つ入力する後に　言語の名前か何かを入力する。
詳しくは　qiita シンタックスハイライトと検索してもらいたい。
以上のコードのように文字に**色**をつける事ができる。
####これから
・理解できるように頑張りたい。
フォントファミリー
ページ内のリンクの作り方
Go 言語仕様3（エラーハンドリング、for文、型アサーション、switch文、型スイッチ）

## 概要
複数の言語を扱っていると仕様が混ざるので、まとめておく。

前回：
[Go 言語仕様2（関数）](https://qiita.com/R_R/items/d8432ddee83ba35769bc)

## 内容
- エラーハンドリング
- for文
- 型アサーション
- switch文
- 型スイッチ

## エラーハンドリング

戻り値のエラーを受け取って、エラーがあれば処理する。

```GO
func main() {
	var s string = "Golang"

	// エラーの場合は、2つ目の戻り値にエラー内容が入る
	i, err := strconv.Atoi(s)
	if err != nil {
		panic(err) // panic: strconv.Atoi: parsing "test": invalid syntax
	}

	fmt.Println(i)
}
```

## for文

- Go言語のループ処理はfor文のみ

```GO
func main() {
	for i := 0; i < 10; i++ {
		if i == 4 {
			continue
		}

		if i == 8 {
			break
		}

		fmt.Println(i) // 0 1 2 3 5 6 7
	}

	// 配列の要素数分ループさせる
	arr := [4]int{1, 2, 3, 4}
	for i := 0; i < len(arr); i++ {
		fmt.Println(arr[i]) // 1 2 3 4
	}
}
```


```GO:ラベル付きfor
// 多重ループの内側で全ループを終了させたい場合、ラベルを使う
func main() {
Loop:
	for {
		for {
			for {
				fmt.Println("start")
				break Loop
			}
		}
	}
	fmt.Println("end")
}
```

```GO
// foreachのようなループは、rangeを使う
m := map[string]int{"cat": 10, "coyote": 20, "giraffe": 30}
for k, v := range m {
	fmt.Println(k, v) // cat 10 coyote 20 giraffe 30
}

// valueのみほしい場合は、_を使う
m2 := map[string]int{"cat": 10, "coyote": 20, "giraffe": 30}
for _, v := range m2 {
	fmt.Println(v) // 10 20 30
}
```

## 型アサーション
interface{}型はすべての型と互換性があるが、
interface{}型で受け取った値は、元の型として処理を実行できない。
そこで、型アサーションをすることで、元の型として扱えるようにする。

```GO:型アサーション
// 型アサーションをしないままだと、元の型として値を扱えない
var f interface{} = "Hello"
fmt.Println(ff + "World") // invalid operation: ff + "World" (mismatched types interface {} and string)

/*
  stringに型アサーションする
  value, ok := 変数.(型)
  valueで値を受け取り、okでは型アサーションの実行結果をboolで受け取る。
*/
var ff interface{} = "Hello"
value, ok := ff.(string)
if ok {
	fmt.Println(value + "World") // HelloWorld
} else {
	// エラー処理
}
```

## switch文

Go言語switch文の特徴は以下。

- caseに複数の値を指定できる。 
- caseの条件に入り処理が実行されると自動的にbreakされるため、breakの記述が必要ない。 
- fallthroughと記述することで、次のcase文を実行できる。

```GO:switch文
func main() {
	var s string = "Golang"
	// switchで評価する値とcaseの型は合わせる必要がある
	switch s {
	case "Java":
		fmt.Println("Java")
	case "Pyhon", "Golang":
		fmt.Println("Python or Golang")
		// fallthroughを入れることで、breakされずに次のcaseを実行する
		fallthrough
	default:
		fmt.Println("default")
	}
}
```

## 型スイッチ
型アサーションとswitch文の合せ技。
受け取るパラメータの型が決まっていないときなどに有効。

```GO:型スイッチ
func checkTypes(f interface{}) {
	if f == nil {
		return
	}

	switch v := f.(type) {
	case int:
		fmt.Println("type: int ", v)
	case string:
		fmt.Println("type: string ", v)
	case float64:
		fmt.Println("type: float64 ", v)
	case bool:
		fmt.Println("type: bool ", v)
	default:
		fmt.Println("type: unknown ", v)
	}
}

func main() {
	checkTypes(3)
	checkTypes("Golang")
	checkTypes(true)
}
```

## 次回
[Go 言語仕様4（defer, panic, recover）](https://qiita.com/R_R/items/f68c9ca03f9df3d8520d)
react-hook-formでフォームに初期値を設定するには

## 概要
以前に[react-hook-formでの値登録](https://qiita.com/someone7140/items/19602655da974336834d)に関する記事を投稿しました。formに値登録する仕組みは分かったのですが、では変更画面のような用途を想定して事前にformに値をセットするにはどうすれば良いかというのが今回の記事です。

## 対応
[こちら](https://react-hook-form.com/jp/api)のドキュメントにある通り、`useForm`を使った宣言部分で`defaultValues`を設定します。`setValue`でも値自体は設定できるのですが、Validationと連動しないので適切な値を入れた状態にしてもValidationの結果がfalseとなっている状態になります。

## 実装サンプル
IDと名前を入力する実装サンプルです。

```js:sample.js
export default function UserRegisterComponent(prop) {
  const { register, handleSubmit, errors, formState, setValue } = useForm({
    mode: "onChange",
    defaultValues: {
      id: "initial_id",
      name: "初期値の名前",
    },
  });
  function submitData(data) {
    // submit以降の処理は割愛・・
  }

  return (
    <div>
      <Form onSubmit={handleSubmit(registerUser)}>
        <Form.Label>ユーザID</Form.Label>
        <Form.Control
          id="id"
          type="text"
          name="id"
          placeholder="ユーザID"
          isInvalid={errors.id}
          style={{ width: "300px" }}
          ref={register({
            required: "IDは入力必須です",
          })}
        />
        {errors.id && (
          <Form.Control.Feedback type="invalid">
            {errors.id.message}
          </Form.Control.Feedback>
        )}
        <br />
        <Form.Label>名前</Form.Label>
        <Form.Control
          id="name"
          type="text"
          name="name"
          placeholder="名前"
          isInvalid={errors.name}
          style={{ width: "300px" }}
          ref={register({
            required: "名前は入力必須です",
          })}
        />
        {errors.name && (
          <Form.Control.Feedback type="invalid">
            {errors.name.message}
          </Form.Control.Feedback>
        )}
      </Form>
    </div>
  };
}


```
【Gatsby】JS歴ゼロ秒から始める、ポートフォリオサイト構築

![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207577/ac1cf8be-c974-c03e-fe90-150852ef9000.png)



# この記事でやること

- 自分語り
- Homebrew 導入
- Xcode 導入
- Node.js 導入
- GatsbyCLI 導入

## あらすじ

どうも、JS 歴ゼロ秒だった、自称 JC です。
普段はプログラムも含めて、音楽を歌ったり、絵を書いたりと
創作活動を行っている僕です。

普段作っているブツは、
Tumblr や forio などのポートフォリオサービスなどを使って
ログとして残してあるのですが、

ふと Twitter を見ていたらこんなツイートが流れてきました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">駆け出しでお仕事募集中の絵描きはTwitterに投稿する前にHP整備したほうがいいですよ。pixivとかポートフォリオサイトじゃなくて、独自ドメインの自分のHPがあるって、「こいつまともに絵でビジネスしてそう…」って思わせる効果があるんですよ。</p>&mdash; よー清水🐧 YoShimizu (@you629) <a href="https://twitter.com/you629/status/1321295824010268674?ref_src=twsrc%5Etfw">October 28, 2020</a></blockquote>

**_いいこと言うじゃん…_**

まあ僕も作品のジャンルバラバラだったり、
ポートフォリオサイトだと困るなーってところがあったりしていたので、
自分のホームページを作りたいなーと思っていたのでした。
そんな中、ふと Qiita を見ているとこんな記事が話題になっていました。

[ボカロ P になったし、爆速ホームページを作る！ \- Qiita](https://qiita.com/KazukiSadasue/items/cf0d1d5b711a78bcd051)

爆速という魅惑的な単語に惹かれ、少し調べてみると、
僕の思い描いていたカスタマイズが施せることがわかってきました。

**よし！オラも Gatsby で爆速ホームページ作っちゃうぞ！！**

## で　き　ま　し　た

できたものがこちらになります。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207577/b59847d3-fb29-ee04-ea58-2c102891faf3.png)

[実際のページはこちらから](https://stoic-chandrasekhar-069fbd.netlify.app/)

僕は極力シンプルなのが好きなのでこんな感じになりました。
いかがだったでしょうか、それではまたお会いしましょう。
ではでは…**で終わるわけあるか！！**

## というわけで始まります、Gatsby でホームページ作り。

- プログラミング？if とかならまあわかるけど…
- JavaScript？そんな名前の言語知らない！！

な僕でも簡単に~~四苦八苦して~~
自前のポートフォリオサイトを作ることができたので、
本記事もそういう人向けに記述していきます。

ちなみに僕はシンプルなのが好きなので、
装飾などは特に施さずにやっていきます。

## …そもそも Gatsby って何？

- JavaScript と HTML で構成されたフレームワーク
- 画像の最適化とビルドによる**表示速度の最適化**
- プラグインが豊富で制作のサポートも充実
- **Markdown でブログを作ることができたりする**

みたいな感じ。
詳しく知りたい人はググってね。

## Gatsby でブログを作るまでの手順

僕の PC が Mac なので Mac での手順を記載します。
Windows とかの人は各自「Gatsby 導入」とかでググってください。

### Homebrew からの Gatsby 導入

#### `Homebrew`と`Xcode`をインストールする

1.  [macOS（または Linux）用パッケージマネージャー — Homebrew](https://brew.sh/index_ja)
     より、Homebrew というパッケージマネージャーをインストールします。
     これは、要するに「Mac でなんやかんやを自動で管理してくれる便利なやつ」です。
    [Homebrew のインストール \- Qiita](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
    を参考にしながら導入していきましょう。

2.  `Xcode`を導入します。 
    これは、要するに「Mac で開発するときに使うツール」です。
    ないと`Homebrew`から怒られちゃうので導入しておきましょう。

```zsh
# 1.
# コマンド省略
$ ~

# 2.
$ xcode-select --install

```

#### `Node.js`をインストールする

1. `Homebrew`で`Node.js`をインストールします。  
   これは、要するに「Java という言語を実行できる環境を構築するやつ」です。  
   もっと噛み砕くと「サッカーで言うところのサッカーボール」です。  
   これがないと`Gatsby`を動かせないので導入します。

```zsh
# 1.
$ brew install node
```

#### `Git`をインストールする

1. `Git`をインストールします。
   これは、要するに「好きなところでセーブできるセーブポイント」です。
   セーブしなくても俺は突き進むぜ！って人がいたらごめんなさい、
   **これがないと`Gatsby`を世に公開することができません。**
   「セーブしたところを世に公開するツール」でもあるのです。
   入れましょう。

2. `Git`を使用するには、名前とメールアドレスが必要です。  
   正しいかどうかわかりませんが、僕は名前を Sotono にしています。
   本当は本名入れたほうがいいと思うけど、嫌ならいいと思います…

```zsh
# 1.
brew install git

# 2.
git config --global user.name "Taro Yamada"
git config --global user.email "taro@gmail.com"

```

#### `Gatsby`を導入する

1. おまたせしました、ようやく Gatsby を導入します。  
   Gatsby の使用には`Gatsby-CLI`というものが必要となるので、
   これを`Node.js`でインストールします。

```zsh
# 1.
npm install -g gatsby-cli
```

## 次回

次回から Gatsby いじりを開始していきます。
AutoAI: Machine Learningサービスとプロジェクトの関連付け

Watson Studio(またはCloud Pak for Data)からAutoAIを使うには、Machine Learningサービスとプロジェクトの関連付けが必要です。
この方法を説明します。

#0. 前提
 - Watson Studio(またはCloud Pak for Data)でプロジェクト作成済み
   - 未作成場合は以下を参考に作成してくだい
      -  [Watson Studio サービスとプロジェクトの作成](https://qiita.com/nishikyon/items/ba698b638300848b746e)

 - Watson Studio(またはCloud Pak for Data)と同じリージョンでMachine Learningサービス作成済み
   - 未作成場合は以下を参考に作成してくだい
      -  [Watson Studio(Cloud Pak for Data)からサービスを作成](https://qiita.com/nishikyon/private/feff6467e1f75fcc0dfd)
      

#1. プロジェクトを開く
左上のナビゲーションメニューをクリックし、`プロジェクト`の下の`すべてのプロジェクトの表示`をクリックします。
または`すべてのプロジェクトの表示`の下に、開きたいプロジェクトが表示されていれば、それをクリックすればそれだけで開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/b9cf3982-768e-3ec8-4162-c016dc21a653.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/f4d8fcc5-cd28-714e-0ab0-b8e0f8b85a85.png)

プロジェクトの一覧が表示されるので、開きたいプロジェクトの名前をクリックします。
尚、たくさんプロジェクトがあって表示されてない場合は、`さらに表示`をクリックするか、検索窓で検索してみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/e6f3f38e-8e43-6b53-cc22-3f39a04eddbe.png)

プロジェクトが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/91893936-50cc-a926-a858-71f1823e0aac.png)

#2. `設定`タブをクリックして、設定ページを表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/6df33054-c4be-4727-9663-63bda20c9ada.png)

#3. スクロールして`関連サービス`表示し、`サービスの追加`→`Watson`をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/d852c4f3-ff17-b5ea-4e6d-325549095392.png)

#4. 「サービスの関連付け」の画面が表示されるので、`Machine Learning`のサービスにチェックを入れ、`サービスの関連付け`の`＋`マークををクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/4945420d-7c39-627a-adde-3e13cc1d5f7d.png)

`Machine Learning`のサービスが関連付けられました。右上の`X`マークをクリックして「サービスの関連付け」の画面を閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/82d2ac21-49e8-8636-f743-312a85c69749.png)

`関連サービス`に`Machine Learning`のサービスが表示されていることを確認してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/c701bada-4cde-08cd-62b4-d37e96d1de15.png)

以上です。
ユーザーグロースにおけるデータドリブンのすすめ

アルゴリズムエンジニアやデータサイエンティストのようなデータに関するポジションを設けている企業がますます多くなっているが、直感でユーザグロースを考える部署は依然として多い。
事業開発の黎明期では、「直感ドリブン」の方が効率よく、場合によっては唯一の策とも言える。しかし、事業が発展するにつれて、「良い直感力」は徐々に使い果たされる。そのようなボトル・ネックでは「データドリブン」の価値が高まる。
以下では事業開発の4つの時期において、データアナリストによるデータドリブンのすすめを論じる。
##高成長期：「直感ドリブン」による野蛮な成長
事業開発の黎明期では、成熟した類似製品や競合製品から成功経験を学ぶことで、短時間で高速な事業成長ができる。事業開発では、0→1は非常に難しい時期ではあるが、ユーザグロースの意味では、起点は0なのでこれは最も簡単な「野蛮な成長」ができる時期とも言える。
典型的な黎明期では、ブレインストーミングなどの「直感ドリブン」の手法から始まる。データアナリストはこの時期では、BIオペレーター的な役割になることが多い。サービスのOKRパフォーマンスを正確に反映できるダッシュボードを作成し、タイムリーにBIレポートを提供することが業務となる。

この時期においてデータアナリストの主な業務内容
>
* イベントトラッキングの設計、OKR設計、SQLとデータウェアハウスの導入
* 成長指標をタイムリーに分析、異常を検知・記録。カスタマージャーニーに合わせてデータセットを作成
* 記述統計でサービスの成長ポイントを発見：
    * ユーザーラベル、ユーザーアクションの記録で、ページ別・機能別のユーザー密度を統計
    * ファネル分析で各プロセスのコンバージョン率を評価、サービスのボトル・ネックを見つけてエクスペリエンスを改善
    * 競合製品との比較分析で、現在の成長率を評価し、今後の成長見込みを予測

##低成長期：科学的な実験によるアップデート
「直感ドリブン」でのグロースは持続可能ではない。ユーザー数が増加するにつれて、成長はいずれ鈍化する。激烈な影響を与えられるアップデートはますます見つかりにくくなり、実装前後の記述統計だけでバージョンの評価ができなくなる。
この時期におけるデータアナリストのミッションは、開発や企画の部隊と協働し、科学的な実験ができるような効果測定システムを構築すること。「ABテスト」や「カナリアリリース」といった典型的な統計手法では、アップデートの小さいな成果を科学的に測定でき、バージョンの評価をサポートできる。同時に、科学的な「ABテスト」や「カナリアリリース」を導入することにより、複数のアップデート案を同時にテストすることが可能に、バージョンアップの行方を従来より素早く見つけることができる。

この時期においてデータアナリストの主な業務内容
>
* 実験設計及び分析、実験コンサルティング、統計指標の設計
* 企画、開発部隊と協働し、並行テストができるようなABテストのプラットフォームを構築。ABグループ分け、統計的有意差検定の業務を自動化。
* 実験結果のレポートをテンプレート化し、企画部隊を実験設計と分析ができるように育成する。

##横ばい期：データドリブンによる新しい成長指標の発見
事業の横ばい期に入ると、直感で考えたアップデート案の成功率は大幅に下落する。統計的に有意ではない案と、負の相関関係になってしまう案も出てくるだろう。
この時期においてデータアナリストがやるべきことは、今ままでの統計コンサルタントのような役割から脱出し、データドリブンなプロダクトオーナーとして能動的に企画会議や経営会議に参加し、事業の全体像を俯瞰してOKRに関わる潜在な課題と新しい成長指標を見つけること。
グロースハックのAARRRモデルを用いて具体的に述べる。AARRRモデルでは、この時期において最も重要な成長指標は継続利用率である。ユーザーグロースの成果は、「新規ユーザー数＋リテンションユーザー数＋アクティブユーザー数×継続利用率」という式で描写できる。成熟した事業を持続的にグロースさせるために、最も経済的かつ効果的な手法は、アクティブユーザー数の継続利用率を向上させること。そこで、継続利用率と正しく相関する指標を発見し、そしてそれを新しい重要な成長指標として提示するのがデータアナリストのミッション。
さらに分かりやすく説明するために、コミュニティサイトの事例を挙げる。あるコミュニティサイトでは、今まではCTR、いいね数÷閲読数、ふぁぼ数÷閲読数などの指標でコンテンツの推薦アルゴリズムを構成した。しかしながら差分の差分分析（Difference-in-differences design）をしたところ、いいね数÷閲読数、ふぁぼ数÷閲読数は継続利用率と非常に弱い相関関係を示した。一方で、CTRと今まで考慮しなかった精読率は継続利用率と強い相関関係を示した。この分析結果に踏まえ、アルゴリズムエンジニアは推薦アルゴリズムを大きく改変し、CTRのウェイトを高めると同時に、精読可能性と平均閲読スピードなどの変数も採用し、Multi-Objective Optimizationモデルに基づいたアルゴリズムを設計した。この改変のおかげで、サービスの継続利用率が大幅に向上し、新規ユーザー獲得キャンペーンを実施していないにもかかわらず、継続利用率が高くなることにより、アクティブユーザーを増やすことに成功した。

この時期においてデータアナリストの主な業務内容
>
* 過去のOKR、アルゴリズムとデータを用いて模索型研究を行う。OKR、アルゴリズムで使用している指標・変数と、会社全体の経営目標との相関関係を明らかにする。企画部隊と協業し、新しい目標と成長指標を定義する。
* 模索型研究のツール化を推進し、企画部隊を指標とOKRの最適化ができるように育成する。

##再成長期：データドリブンのもとでユーザーをセグメント化
横ばい期を経過したサービスは、衰退期に入らないための取り組みとして、新しい機能やスピンオフサービスを企画することが多い。この時期における経営の課題は、新しい機能やスピンオフサービスをリリースしたとき、指標の間にトレード・オフが見出されたことが多く、データを用いてリリースを評価することが難しい。
この課題を科学的に解決するためには、ユーザーをセグメント化する必要がある。ユーザー全体を一つのペルソナとして集約してユーザーエクスペリエンスを分析することは、ユーザー数が膨大なサービスには非常に相応しくない。ユーザー全体が示した「見掛けの影響」は、セグメントユーザーに与えた「本質的な影響」の合計であり、「本質的な影響」はセグメントによって大きく異なることがある。
したがって、この時期におけるデータアナリストのミッションは、セグメントごとに低成長期でやっていた「実験」と安定期でやっていた「模索型研究」を行い、データドリブンによる戦略策定・アルゴリズム設計のプロセス化を実現すること。

この時期においてデータアナリストの主な業務内容
>
* セグメント別で実験を行い、正の結果が示されたセグメントで実装し、負の結果が示されたセグメントで実装を見直す。
* プロダクトマネジャーと協働し、ユーザーインタビューと模索型研究を行い、満足度が低いセグメントユーザーを対象に新しい成長指標を見つける。
* セグメント別で異常検知・要因分析を行い、課題と成長点を素早く見つける。
Lambdaで異なるリージョンにSNS Publishするときはリージョンを指定する

# Lambdaで異なるリージョンにSNS Publishする

　LambdaではPython3.6を使用しています。
　バージニア北部リージョンから、東京リージョンのSNSにPublishします。
　バージニアのLambdaコードはこちら。

```py:lambda_function
from __future__ import print_function
import boto3
import json
import os

def lambda_handler(event, context):
    region = os.environ.get("REGION")
    sns = boto3.client("sns", region_name=region)
    print(region)
    print(sns)
    response = sns.publish(
        TopicArn=os.environ.get("SNS_ARN"),
        Subject="テスト",
        Message="Lambdaで異なるリージョンにSNS Publishしてみた"
    )
    print(response)
    return response
```

　環境変数`REGION`に送信先SNSのリージョンを、`SNS_ARN`にSNSトピックARNを設定しています。
　空のテストを作成し、テストを実行します。
　数分後、以下のとおりメールの受信を確認できました。

![スクリーンショット 2021-02-13 15.18.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344711/bf041a5d-97fe-ae76-6582-20485184bd33.png)

　リージョンを指定しない場合、`An error occurred (InvalidParameter) when calling the Publish operation: Invalid parameter: TopicArn`とエラーになります。

# なぜリージョンを指定する必要があるのか

　リージョンを指定しない場合、boto3のデフォルトリージョンはLambdaのリージョンとなるからです。
　これは、AWSがLambdaの環境変数でリージョンを定義しているからです。
　Lambdaで`os.environ`(環境変数)をprintで表示し、抜粋したものが以下のJSONです。
　一番下に`AWS_REGION`があり、バージニア北部リージョンが指定されています。

```json:
{
    "PATH": "/var/lang/bin:/usr/local/bin:/usr/bin/:/bin:/opt/bin",
    "LD_LIBRARY_PATH": "/var/lang/lib:/lib64:/usr/lib64:/var/runtime:/var/runtime/lib:/var/task:/var/task/lib:/opt/lib",
    "LANG": "en_US.UTF-8",
    "TZ": ":UTC", 
    "_HANDLER": "lambda_function.lambda_handler", 
    "LAMBDA_TASK_ROOT": "/var/task", 
    "LAMBDA_RUNTIME_DIR": "/var/runtime", 
    "AWS_REGION": "us-east-1", 
}
```

　クライアントのリージョンを指定していない場合、今回はデフォルトのクライアントのリージョンはバージニア北部リージョンになります。
　そのため、`TopicArn`で適切にリージョンを指定しても、クライアントのリージョンと異なるためエラーが出てしまいます。

　`boto3.client()`を実行する際にパラメーターとして資格情報（リージョン）を渡すことで、環境変数より優先されて使用されます（https://boto3.amazonaws.com/v1/documentation/api/latest/guide/credentials.html#guide-credentials）。
TWELITE OPEN-CLOSE SENSE PALを使って窓の鍵開閉を検知してみた

前から出かけるときに窓の鍵が閉まってるか確認するのが面倒だなと思ってて、IoT機器で簡単に確認できるようにしたいと思っていて、製品が出てるのは知ってるのですが、結構値段が高いので自分で作れないかと思っていました。
そんなある日、たまたま[郵便がポストに届いたらLINEで通知がくるようにした](https://qiita.com/task_jp/items/85ccc04a00982569f6c5)という記事を見てTWELITEを知って、これ使えばやりたいことができると思いました。

これ誰かやってるんじゃないか？と思ったら、案の定すでにやってる人がいました。
[TWELITE PALを使って窓の施錠確認システムを電子工作なしで作る](https://zlog.hateblo.jp/entry/2019/08/18/Twelite-pal-window-monitor)

基本はこれの通りにやったのですが、最初にセットアップする部分がTWELITEのバージョン？によって違ったりWindows向けの情報はすぐ見つかるけどMac向けが見当たらなかったり、親機子機の設定方法がもっと簡単な方法があったので備忘録として残しておきます。ここではPythonでセンサーの変化を読み取るところをゴールとします。

### 結果
こんな感じで動きます。
![twelite_open_close-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37387/2f06be1e-4421-b590-ba5a-0d5ed251d043.gif)
手に磁石を持っていて、近づけるとセンサーが感知します。
見づらいですがターミナル上で出力が変わっていて、手を近づけたときにOpen、離すとCloseと出てます。磁石を窓の鍵に付ければ開いてるか閉まってるかわかりますね。

### 動作環境
macOS Catalina 10.15.7
MacBook Air
Python 3.8.6

### セットアップ
親機をMacにUSB接続して認識されているかlsコマンドで確認する。
`ls -l /dev/tty.* `
正常に認識されてると
`/dev/tty.usbserial-XXXXXX`
みたいな結果があるはずです。あとでPythonのスクリプトからセンサー読み取るときに使います。

必要なライブラリをインストールする。（[公式](https://sdk.twelite.info/twelite-sdkno/fumuua/tweterm.py)を参考に）
`brew install libusb
pip install pyserial
pip install pyftdi`

TWELITE STAGE APPのバイナリで親機の設定を行う。
githubに販売元が公開しているバイナリを使う。（ここがソースコードからインストールしている説明がたくさんあって迷ってしまったところ。バイナリを使うのが一番簡単）
https://github.com/monowireless/TWELITE_Stage_BIN_macOS
ダウンロードして解凍したら、解凍したディレクトリ直下にある「TWELITE_Stage.command」がアプリです。これに実行権限をつけます。ターミナルで以下を実行。

`chmod +x TWELITE_Stage.command `

あとは、公式ページにある通りに以下の設定していく。
https://www.mono-wireless.com/jp/products/twelite-pal/sense/pal-usage.html
 - 親機・中継機アプリ（App_Wings）に書換える。
 - アプリケーションIDを子機と同じにする。
 - 周波数チャネルを子機と同じにする。
 - 親機か中継機を選択する（親機モード0に設定する）
 - [ビューア]>[PALビューア]で動作確認する。

最後に、Pythonからセンサーの状態を読み取るプログラムについて。
公式ページにある下記のスクリプトでできます。
> TWELITE PALシリーズのデータを受信したときに出力されたシリアルデータを解釈するためのPythonのサンプルスクリプトです。
https://mono-wireless.com/jp/products/TWE-APPS/App_pal/palscript.html

引数にUSBが認識されて出力されたIDを指定して実行
`python PAL_Script.py -t /dev/tty.usbserial-XXXXXX`

これで最初に紹介した動画のようにセンサーの変化を検知して出力できます。
TWELITEは電子工作なしでもセンサーでいろいろ遊べそうです。


### 参考にした記事たち
郵便がポストに届いたら LINE で通知がくるようにした
https://qiita.com/task_jp/items/85ccc04a00982569f6c5

TWELITEの無線タグアプリを試す
https://qiita.com/miminashi/items/453f7f3e31c8c009e486

無線通信機能付き磁力センサ「OPEN-CLOSE SENSE PAL」を使ってみた
https://qiita.com/RyoOkaya/items/660ceb91d2b4e0378a8d

TWELITE STAGE を試す
https://qiita.com/nanbuwks/items/bb07970d5339177aa7a0

TWELITE PALを使って窓の施錠確認システムを電子工作なしで作る
https://zlog.hateblo.jp/entry/2019/08/18/Twelite-pal-window-monitor

TWELITE STAGE APP　macOS向けのバイナリ
https://github.com/monowireless/TWELITE_Stage_BIN_macOS
Windowsでvenv

# はじめに
Windowsにおける、venvのメモ
venv単位で仮想環境が作れるので便利
１週間で忘れてしまっていたので、メモ残し(特にポリシーのやつ)

# 構築＆実行プロセス
## venvの環境を構築
``` Shell
python -m venv envsample
``` 
※envsampleは好きな名前を(以下そのテイで記載)
※上記で、envsampleのフォルダができる

## ポリシーの設定
``` Shell
Set-ExecutionPolicy RemoteSigned -Scope Process
``` 
※このコマンドは毎回実行する必要がある(その代わり管理権限が不要)
※永続設定もある(こちらは管理権限が必要)

## 環境下に入る
``` 
.\envsample\Scripts\activate
``` 
※Script以下のactivateを実行すればよい(確かbatファイル)
※docker exec ~ bash みたいなイメージ

```
(envsample) PS C:\sample\python
```
※上みたいに先頭にカッコ書きになったら、仮想環境下にいる

## pipのバージョンアップ
```
python -m pip install -U pip
```
※activateした初回はやっておこう

## 環境外に出る
``` Shell
deactivate
```
※カッコが外れる
「S3とは」

<h1>S3とは</h1>
<p>
前回に<a target=“_blank” href="https://qiita.com/houka/items/98de0469fc1ac5d5f6b9">「EBS、S3、EFS三者の違い」</a>でAWSのストレージサービスを紹介しました。
<br>今回はそのS3について、詳しく紹介させていただきます。
<br>
<br>
S3:Simple Storage Service
（頭文字は三つのSなので、S3を名前にしています。）
<br>
ユーザーがデータを容量制限なく保存可能なマネージド型で提供されるオブジェクト型ストレージ。
</p>
<span>
🌟特徴:
・耐久性：99.999999999%。（11個9）
・データを暗号化可能

🌟データ保存形式
・バケット
　オブジェクトの保存場所。
　（命名ルール：全regionで使うため、名前がユニークな必要がある。）

・オブジェクト
　S3に格納されるファイルはURLが付与される。

・データサイズ
　OKB～5TBまで保存可能。
</span>

<span>
<h6>S3のデータ構造
![s3_bucket.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082021/60a0217f-70ea-c94a-9c6a-24ecc853b061.png)

<h1>S3のストレージタイプとその特徴</h1>
![S3 ストレージクラスのパフォーマンス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082021/cf5bbeff-770f-f31e-7445-a19ee0b7b2fa.jpeg)
<p>参照先：Amazon AWS　Document↓</p>
<cite><a   href="https://aws.amazon.com/jp/s3/storage-classes/?nc=sn&loc=3">ストレージクラスのパフォーマンス</cite>

<h1>S3の暗号化</h1>
<span>
S3の暗号化は二つの方法があります。
・サーバーサイト暗号化（暗号化タイプ：SSE-S3,SSE-KMS,SSE-C）
・クライアントサイト暗号化(暗号化タイプ：AWS-KMS)
</span>

<h1>S3のその他の機能</h1>
<span>
・ライフサイクル管理
・バージョン管理
・バックアップ＆復元
</span>
SaaS PaaS IaaS DaaS 一瞬で確認

未だにごっちゃになるのでメモしとく。

# SaaS (Software as a Service)

### インターネット上で使えるソフトウェア。

例)

* GitHub
* DropBox
* Gmail

# PaaS (Platform as a Service)

### インフラ環境がサービスとして構築しやすくなっている。

例)

* Amazon Web Service (AWS)
* Microsoft Azure
* Google Cloud Platform (GCP)

※ただし、上記のどれもIaaSとしても使える。

# IaaS (Infrastructure as a Service)

### OS付の仮想サーバだけ借りる感じ。

例)

* AWS EC2
* SAKURA Internet VPS
* EINS/SPS Managed (TIS Intec Group)

# DaaS (Desktop as a Service)

### 仮想デスクトップのこと。

例)

* Microsoft Windows Virtual Desktop
GitHub Pagesでpathが重複している場合の優先度

# TL;DR

GitHub Pagesのユーザータイプ用リポジトリで公開しているpathとプロジェクトタイプのリポジトリ名に由来するpathが同名で競合している場合、プロジェクトタイプが優先される。例えば`<username>/<username>.github.io`配下に`/example`で公開されるコンテンツがあり、同時に`<username>/example`というリポジトリがあってGitHub Pagesを有効にしている場合、`https://<username>.github.io/example`では後者が表示される。

# 本文

GitHub Pagesについて調べたメモ。[GitHub Pages について - GitHub Docs](https://docs.github.com/ja/github/working-with-github-pages/about-github-pages)（や[英語版](https://docs.github.com/en/github/working-with-github-pages/about-github-pages)）の内容と実際にリポジトリを作って挙動を調べた結果をまとめる。

GitHub Pagesにはタイプが3種類ある。

1. プロジェクト (project)
2. ユーザー (user)
3. 組織 (organization)

今回はOrganizationでは実験しておらず、この記事はプロジェクトタイプとユーザータイプに限った内容になる（ユーザータイプと組織タイプはどちらも特定のアカウントに紐づくものと説明されているので、似た挙動が多そうではある）。

ユーザータイプは`http(s)://<username>.github.io/`というURL以下でコンテンツを公開でき、サブディレクトリを作ることもできる。プロジェクトタイプは`http(s)://<username>.github.io/<repository>/`というURL以下になる。ということは、ユーザータイプ用リポジトリのサブディレクトリ名と、それとは別の（GitHub Pagesを有効にしている）リポジトリ名が重複している場合、URLが競合してしまう。このときどちらが優先されるのか知りたかった。

実際に`cu39/project-type`というリポジトリに`index.html`というファイルをコミット・プッシュし、同時に`cu39/cu39.github.io`にも（中身を変えた）`project-type/index.html`を作り、両方ともGitHub Pagesを有効にしてみたところ、`https://cu39.github.io/project-type/`で表示されたのは`cu39/project-type`のほうのコンテンツだった。

なお、ユーザータイプ配下にプロジェクトタイプ（リポジトリ名）と競合しないディレクトリを作った場合には、ユーザータイプ側のコンテンツがきちんと表示される。