OmniAICreator/Qiita-1.07M huggingface dataset:
TouchDesignerでArUcoマーカーのコーナーを可視化する

# はじめに
困っている人がいたので数か月前にやってみたやつです。

# 開発環境
- Touch Designer 
- OpenCV 
- Python 

# 導入

始め方はこちらを参考にします。
- [TouchDesignerでOpenCVをはじめーる（Windows10、Python3.7、OpenCV4.0）](https://qiita.com/SatoshiGachiFujimoto/items/f548501a52d8c34fb73d)

## マーカーの生成

arucoマーカーを30種類生成します。

~~~python
import cv2
aruco = cv2.aruco
dictionary = aruco.getPredefinedDictionary(aruco.DICT_4X4_50)

def arGenerator():
    for i in range(30):
        fileName = "{}.png".format(i)
        generator = aruco.drawMarker(dictionary, i, 100)
        cv2.imwrite(fileName, generator)
    cv2.waitKey(0)
arGenerator()
~~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6f91fd45-d6f2-89cc-abc1-649a23839385.png)

## 可視化

検出されたcornersをscript1で可視化します。

~~~python 
import cv2
import numpy as np


def onPostCook(changeOp):
    image = changeOp.numpyArray(delayed=True)
    image = np.array(image)
    image = np.uint8(image * 255.0)
    image = np.flipud(image)
    image = cv2.cvtColor(image, cv2.COLOR_RGBA2BGR)

    out = op('script1')
    out.clear()

    aruco = cv2.aruco
    dictionary = aruco.getPredefinedDictionary(aruco.DICT_4X4_50)
    corners, ids, rejectedImgPoints = aruco.detectMarkers(image, dictionary)
    aruco.drawDetectedMarkers(image, corners, ids, (255, 0, 0))

    if len(corners) > 0:
        out.numSamples = len(corners)
    else:
        out.numSamples = 1

    x0 = out.appendChan('x0')
    y0 = out.appendChan('y0')
    x1 = out.appendChan('x1')
    y1 = out.appendChan('y1')
    x2 = out.appendChan('x2')
    y2 = out.appendChan('y2')
    x3 = out.appendChan('x3')
    y3 = out.appendChan('y3')

    if len(corners) > 0:
        for index, corner in enumerate(corners):
            x0[index] = corner[0][0][0]
            y0[index] = corner[0][0][1]
            x1[index] = corner[0][1][0]
            y1[index] = corner[0][1][1]
            x2[index] = corner[0][2][0]
            y2[index] = corner[0][2][1]
            x3[index] = corner[0][3][0]
            y3[index] = corner[0][3][1]
    else:
        x0[0] = 0.
        y0[0] = 0.
        x1[0] = 0.
        y1[0] = 0.
        x2[0] = 0.
        y2[0] = 0.
        x3[0] = 0.
        y3[0] = 0.

    return
~~~

# 実行　

マーカーが1個の時の結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/40bb6002-1fb4-d062-7943-56dd514ae43d.png)

マーカーが複数の時の結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ab253e4d-30a5-d0f9-3c89-176938160297.png)

お疲れ様でした。

# 参考
- [[OpenCV] ArUcoマーカーを使用して、安定した商品の監視映像を撮影してみました。](https://dev.classmethod.jp/articles/opencv-aruco-marker/)
- [ArUco markers generator!](https://chev.me/arucogen/)
typescriptでasync await

Promiseを返すことでasync await構文で実行できる。

```typescript

// Promiseのジェネリックをvoidにすることでresolve/rejectに引数を渡す必要がなくなる
const voidPromise = (hoge : boolean) => new Promise<void>((resolve, reject) => {
    if (hoge) {
        resolve()
    } else {
        reject()
    }
})

// resolve, rejectに指定した型を渡せる
const stringPromise = (hoge : boolean) => new Promise<string>((resolve, reject) => {
    if (hoge) {
        resolve('resolve')
    } else {
        reject('reject')
    }
})

// rejectを受け取らないことも可能。Promiseにジェネリックを指定しない場合はresolveに渡した引数から推論される
const shortPromise = () => new Promise( resolve => {
    resolve('aaaa')
})

// setTimeoutにコールバックを渡すことで1秒後にresolveを実行できる
const deplayPromise = () => new Promise(resolve => {
    setTimeout(resolve, 1000)
})


// async付けることで非同期で関数を実行できる
const asyncBasic = async () => {
    console.log(1)
    await voidPromise(true)
    console.log(2)
    const stringPromiseReturn = await stringPromise(true)
    console.log(`3 - ${stringPromiseReturn}`)
    await shortPromise()
    console.log(4)
    await deplayPromise()
    console.log(5)
    // awaitで直接Promiseを渡すことも可能
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log(6)
}

asyncBasic()
```

↓実行ログ
![スクリーンショット 2020-12-21 2.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/e4dadd89-e2bb-d90c-e54a-661a350c7426.png)
Azure Static Web AppsでReactをはじめーる

# はじめに
Azure Static Web Appsで簡単にSPA（シングルページアプリケーション）を作れるようになったので、試してみました。なお、javascript初心者です。

静的 Web アプリ https://azure.microsoft.com/ja-jp/services/app-service/static/

# 開発環境
- MacBook Pro
- VSCode 

# 導入
Azureポータルを開き、「静的」で検索

　「追加」をクリック

githubアカウントを連携し、リポジトリを作成しておく(gachimoto, private)
index.htmlを追加し、pushしたら、見えた

apiの追加をしていく

https://docs.microsoft.com/ja-jp/azure/static-web-apps/getting-started?tabs=react

package.jsonに"react-router-dom": "^5.2.0"を追加し、

~~~package.json
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.4.0",
    "react-router-dom": "^5.2.0"
  },
~~~

下記の記事を参考にした
[React入門 #ルーティングでページを切り替える](http://www.tohoho-web.com/ex/react.html#routing)

~~~App.js
import React from 'react';
import { BrowserRouter, Link, Route } from 'react-router-dom';
// http://www.tohoho-web.com/ex/react.html#routing
// package.jsonに追加 "react-router-dom": "^5.2.0"

function HelloA() {
  return <h1>HelloA</h1>;
}

function HelloB() {
  return <h1>HelloB</h1>;
}

function App() {
  // const value = 'World';
  // return <div>Hello {value}</div>;
  return (
    <BrowserRouter>
      <div>
        <ul>
        <li><Link to="/hello-a">HelloA</Link></li>
        <li><Link to="/hello-b">HelloB</Link></li>
        </ul>
        <Route path="/hello-a" component={HelloA} />
        <Route path="/hello-b" component={HelloB} />
      </div>
    </BrowserRouter>
  );
}

export default App;
~~~

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">React完全に理解した <a href="https://t.co/ChTOwveJ91">pic.twitter.com/ChTOwveJ91</a></p>&mdash; 藤本賢志(ガチ本)@pixivFANBOXはじめました (@sotongshi) <a href="https://twitter.com/sotongshi/status/1281985701014167553?ref_src=twsrc%5Etfw">July 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
async ブロックの型を指定したい

# もうすこし忖度してほしい

asyncブロックは`Future<Output=何らかの戻り値型>`になるのですが、`Output`型を直接指定する構文がありません。
なので例えば以下のようなコードを書くと:

```rust:main.rs
use std::error::Error;
use tokio::{self, signal};

async fn async_func() -> Result<(), Box<dyn Error>> {
    tokio::time::sleep(std::time::Duration::from_secs(3)).await;
    println!("Done");
    Ok(())
}
#[tokio::main]
pub async fn main() -> Result<(), Box<dyn Error>> {
    let sig_term = async {
        let mut s = signal::unix::signal(signal::unix::SignalKind::terminate())?;
        s.recv().await;
        Ok(())
    };

    tokio::select! {
        result = sig_term => {
            result?;
            log::info!("SIGTERM");
        }
        val = async_func() => {
            val?
        }
    }
    Ok(())
}
```
`sig_term`変数の型の推測ができずコンパイルできません。

```
error[E0698]: type inside `async` block must be known in this context
  --> src/main.rs:14:9
   |
14 |         Ok(())
   |         ^^ cannot infer type for type parameter `E` declared on the enum `Result`
   |
note: the type is part of the `async` block because of this `await`
  --> src/main.rs:17:5
   |
17 | /     tokio::select! {
18 | |         result = sig_term => {
19 | |             result?;
20 | |             log::info!("SIGTERM");
...  |
24 | |         }
25 | |     }
   | |_____^
   = note: this error originates in a macro (in Nightly builds, run with -Z macro-backtrace for more info)

error: aborting due to previous error

For more information about this error, try `rustc --explain E0698`.
error: could not compile `playground`

To learn more, run the command again with --verbose.
```
プレイグラウンド: https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&gist=502eb9483c8d3d2c76bfd5ac99f4ee4f

# すっきり解決

以下のスレッドにいろんな解決方法がありましたが、型変換を行うトレイト`Outputting`を用意し、`Future`に対して実装することで明示的に指定してみます。
https://internals.rust-lang.org/t/return-type-annotation-of-async-block/12561/14

```rust:main.rs
use std::error::Error;
use tokio::{self, signal};

// Outputting トレイト
trait Outputting: Sized {
    fn outputting<O>(self) -> Self
    where
        Self: std::future::Future<Output = O>,
    {
        self
    }
}

// Futureに実装
impl<T: std::future::Future> Outputting for T {}

async fn async_func() -> Result<(), Box<dyn Error>> {
    tokio::time::sleep(std::time::Duration::from_secs(3)).await;
    println!("Done");
    Ok(())
}

#[tokio::main]
pub async fn main() -> Result<(), Box<dyn Error>> {
    let sig_term = async {
        let mut s = signal::unix::signal(signal::unix::SignalKind::terminate())?;
        s.recv().await;
        Ok(())
    }.outputting::<Result<(), Box<dyn Error>>>();  // asyncブロックに対してOutputの型を指定する

    tokio::select! {
        result = sig_term => {
            result?;
            log::info!("SIGTERM");
        }
        val = async_func() => {
            val?
        }
    }
    Ok(())
}
```

コンパイル出来ました。

プレイグラウンド: https://play.rust-lang.org/?version=stable&mode=debug&edition=2018&gist=7743dbdec2f52c9fdee49ccd7965f01d
Google Recruitを解く



# はじめに

授業の課題で，rubyで問題を解くことになったので，<br>ruby初心者なりに調べながら書いてみた．


# 問題

「e(自然対数の底)の値で連続する10桁の数のうち，最初の素数」をrubyで解いてみる．

-   素数:1と自分自身以外の数で割り切れない自然数

<br> **ただし，eは200桁までとする**

```text
2.71828182845904523536028747135266249775
7247093699959574966967627724076630353547
5945713821785251664274274663919320030599
2181741359662904357290033429526059563073
81323286279434907632338298807531952510190
```


# プログラム

```ruby:../codes/google_recruit.rb
def getfile()
      temps=readlines.map &:chomp
      temp=temps.join
      e=temp.delete('.')

      return e
end

def prime_judge(num)
      if num%2==0 then
	      return false
      end

      for i in 3...Math.sqrt(num) do
	      if num%i==0 then
		      return false
	      end
	      i+=2
      end
      return true
end

def main
      e=getfile()
      while e.length>=10 do
	      num=e.slice(0, 10)
	      if prime_judge(num.to_i) then
			      break
		      end
	      e.slice!(0)
      end
      puts "最初の素数は#{num}"
end

if $PROGRAM_NAME == __FILE__
      main
end
```


# 関数について簡単に

-   getfile()
    -   テキストから情報(e)を受け取る
-   prime\_judge(num)
    -   numが素数ならtrue，さもなければfalseを返す
-   main
    -   連続する10桁を取り出し，prime\_judgeへ渡す
    -   trueが返ってきたら表示


# 解説


## getfile()

```ruby
def getfile()
     temps=readlines.map &:chomp
     temp=temps.join
     e=temp.delete('.')

     return e
end
```

1.  改行をなくす
2.  配列の要素を文字列にする
3.  小数点消す


## prime\_judge(num)

```ruby
def prime_judge(num)
     if num%2==0 then
	     return false
     end

     for i in 3...Math.sqrt(num) do
	     if num%i==0 then
		     return false
	     end
	     i+=2
     end
     return true
end
```

1.  偶数ならfalse
2.  $\sqrt{num}$以下の整数で割り切れるならfalse
3.  どちらでもなければtrue


### さらに詳しく

まず，偶数かどうかの判断は終わっているので，奇数しか調べません．<br>`合成数Nは1より大きく$\sqrt{n}$ 以下の約数を持つ` を利用します．<br>合成数とは，1でも素数でもない数のことです．<br>つまり，合成数でないことを判断するために$\sqrt{n}$以下の奇数を順に調べていくことで素数判定を行うことができます．

```RUBY
for i in 3...Math.sqrt(num) do
     if num%i==0 then
	  return false
     end
     i+=2
end
return true   
```


## main

```ruby
def main
     e=getfile()
     while e.length>=10 do
	     num=e.slice(0, 10)
	     if prime_judge(num.to_i) then
			     break
		     end
	     e.slice!(0)
     end
     puts "最初の素数は#{num}"
end
```

1.  getfileを呼び出して200桁のEをもらう
2.  先頭から10桁目までを取り出して，prime\_judgeへ
3.  trueEならbreakして表示，falseなら先頭を消す


# 結果

    $ ruby google_recruit.rb < input.txt
    最初の素数は7427466391


# 参考

-   [class String](https://docs.ruby-lang.org/ja/latest/class/String.html)
-   [Ruby 複数行の入力を受け取る](https://qiita.com/ayacai115/items/e95f803d78c2a75e1fa7)
-   [配列の要素を連結して文字列化する](http://rubytips86.hatenablog.com/entry/2014/03/25/141326)
-   [プログラミング言語「Ruby」の記事まとめ](https://www.sejuku.net/blog/category/programming-language/ruby)
-   [素数と合成数](https://excelmath.atelierkobato.com/composite/)



------
 - **source** ~/Desktop/grad_members_20f/members/mm-cell/post_org/google_recruit.org
Pythonで自然順ソート 1,10,11,2,20...ではなく、1,2,3,4,5,6,7,8,9,10,11...

例えば、1.jpg から 20.jpg までがランダム順であるディレクトリがあるとします。

```python
path = "./directory"
file_names = os.listdir(path)
print(file_names)
```

>['18.jpg','5.jpg','1.jpg','11.jpg','20.jpg','6.jpg','8.jpg','4.jpg','2.jpg','12.jpg','14.jpg','19.jpg','10.jpg','3.jpg','7.jpg','9.jpg','13.jpg','16.jpg','17.jpg']

これを sorted メソッドで並べ替えると、

```python
sorted_file_names = sorted(file_names)
print(sorted_file_names)
```

>['1.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '2.jpg', '20.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg']

というように**大きい桁の数字を基準にソートされてしまいます**。

**1,2,3,4,5,6,7,8,9,10,11...と１０進数で並べかえたいときは、natsort というライブラリが使えます**。

```shell
pip install natsort
```

```python

from natsort import natsorted

natsorted_file_names = natsorted(file_names)

print(sorted_file_names)
```

>['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg', '11.jpg', '12.jpg', '13.jpg', '14.jpg', '16.jpg', '17.jpg', '18.jpg', '19.jpg', '20.jpg']



🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
electronでファイル読み込み

```
git clone  https://github.com/electron/electron-quick-start-typescript
cd electron-quick-start-typescript
yarn
yarn dev
```

nodeIntegrationを有効にする(セキュリティ的に良くないけど通信にしないので良いとする)

```main.ts
抜粋...
  const mainWindow = new BrowserWindow({
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true
    },
    width: 800,
  });

```

```index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>

    <input id="csvLoad" type="button" value="読み込み"/>
    <script> var exports = {}; </script>
    <script src="./dist/renderer.js"></script>
  </body>
</html>
```

buttonのイベントをトリガーにファイルを読み込みログに出す

```renderer.ts
import * as fs from 'fs';

const button = document.getElementById('csvLoad')
if (button !== null) {
    button.onclick = () => {
        a();
    }
}


const a = () => {
    fs.readFile('text file path', (error, data) => {
        console.log(data.toString())
    })
}
```
⚠️ IE11でvideo要素にフォーカスを当てたとき、動画が消えて見えなくなる

## TL;DR

- IE11で`video`要素にフォーカスを当てると動画が不可視になる
- CSSの`outline`プロパティが原因
- `outline`プロパティ以外でフォーカスリングを表現するべし

## 本題

```html:サンプルHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>動画にフォーカスを当てると表示されなくなる</title>
<style>
video {
  margin: 40px auto;
  display: block;
  max-width: 640px;
  height: auto;
}
</style>
</head>
<body>
<video src="path/to/movie.mp4" controls></video>
</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/ca72d77e-9a27-d08a-84de-5f694da772d6.png)


正常に再生可能な状態の`video`要素があります。これにフォーカスを当てると…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/05810f9d-abb3-4530-0dea-4447cd030cca.png)

このように動画が真っ白になります。再生が停止していても開始していても同様です。

## 解決策

```scss
video {
  &:focus {
    outline: 0;
    border: 2px solid #000; // なんでもいい
  }
}
```

原因は`outline`プロパティが当たっていることにあるようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142709/66e0b72d-0ae7-43f5-fe17-ae6e0d74ed73.png)

`border`や`box-shadow`などの代替手段でフォーカスリングを表現して解決します。

## 最後に

いまさらIE11関連の記事を書くのもなかなか誰得感がありますが、ちょっと調べたところこの件に言及している記事が見つからなかったのでメモ程度に。。。

動画は「HYBRID CREATIVE MOVIE サクラ」様からお借りしました。
<https://www.home-movie.biz/free_movie.html>
マンガでわかる総花主義ミニアンチパターン

![367BC50D-1BB0-4FEC-B577-143E9517D54D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/db15db8d-ea15-ca52-ee8e-ae6151258f81.png)
http://wiki.c2.com/?CoverYourAssets

総花(そうばな)主義は別の言い方をすると、八方美人です。自分では何の考えも持たず、たんに誰からも恨まれなければいいと、重要度を無視して網羅的なふるまいをすることを批判する言葉です。英語では少しニュアンスが違い、Cover Your Assets (財産奪い合いカードゲーム) という名前になっていますが、その根本問題は同じです。

すべての仕様が書かれていれば間違いではない、つまり、自分は悪くないから他の誰かが引責ペナルティを喰らうだろうという心理から思考停止して、あらゆることを均一に網羅した文書を作ると、じっさいは他の誰の役にも立ちません。意味を失っているため読みにくく、そのうえ量が多すぎてたいへんです。とくに、他のシステムの担当者が副次的な関連資料として見を通すには、あまりにも不向きです。ソースコードが仕様書ですと渡されたほうがまだ、IDE でコードリーディングできるぶん、いくらかましです。

また、文書には機械的に正しさを保証してくれる道具を使えません。じっさいの動きを知る人が、目で見て間違っていないことをチェックしないといけないため、量が多いと指数関数的に間違いが増えます。(単純に量に比例するのに加え、目を通せる回数が減り、関連する情報の距離が遠くなるからです)

ドキュメントが先行する開発プロセスでは、仕様書のミスが後の工程への責任問題になるので、概要のわかりやすさよりも総花的なやり方での保身を優先する心理に陥りやすくなります。話の合わないライバル ([曖昧な視点](https://qiita.com/tanakahisateru/items/b4fee2b22ef2cd071c69)
 のために利害が競合した要求側と設計者など) に仕様ミスを追求されて失脚したくないというのは、プロダクトにとっては無駄な努力であるだけでなく、理解しやすい状態を維持するうえではむしろ迷惑です。

要求と設計と実装とテストを繰り返す開発プロセスの中で、メンバーが同じ価値観を共有しながら、文書も徐々に正しさの精度を高めていくのが健全です。じっさいに繰り返し使われた文書は、開発の中でフィードバックを受けた推敲結果が残るので、後で見る人も安心できます。

「仕様書の厚みがあると安心する」と言うのは、趣味の悪い冗談か、そうでなければ、自分の愚かさをアピールしていることになりますね。
electronでUncaught ReferenceError: exports is not defined     at renderer.js:2

Electron実行時に以下のエラーが出た。

```
Uncaught ReferenceError: exports is not defined     at renderer.js:2
```

レンダラープロセスでnodejsを使おうとして上記のエラーが発生した。

## 簡単な解決策

window作成時にnodeIntegrationを有効にする。ただし有効にするのはセキュリティ上良くない。

```main.ts
  const mainWindow = new BrowserWindow({
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true // 追加
    },
    width: 800,
  });
```

index.htmlにexportsを定義する

```index.html
<script> var exports = {}; </script>
```

## noteIntegration
レンダラープロセスでnodejsの機能が使えるとxss脆弱性があった時に被害が大きくなるためデフォルトではnodejsの機能が使えなくなっている。
別の回避策はcontextBridgeを使う方法がある。
Artisanコマンドのargumentとoptionの指定方法と入力の相関

先日仕事でLaravelのカスタムコンソールコマンドを書いてる時に、シグネチャのパラメータ処理が泥臭く感じてモジュール化できないかなーと思い、どんな時にどんな返り値になるのか調査したので、結果を残しておきます。

|  シグネチャ | 入力 | 取得 | 結果 |
| --- | --- | --- | --- |
|  foo {key} | foo | - | エラー |
|  foo {key} | foo value | $this->argument('key'); | "value" |
|  foo {key?} | foo | $this->argument('key'); | null |
|  foo {key?} | foo value | $this->argument('key'); | "value" |
|  foo {key=default} | foo | $this->argument('key'); | "default" |
|  foo {key=default} | foo value | $this->argument('key'); | "value" |
|  foo {key*} | foo | - | エラー |
|  foo {key*} | foo value | $this->argument('key'); | ["value"] |
|  foo {--key} | foo | $this->option('key'); | false |
|  foo {--key} | foo --key | $this->option('key'); | true |
|  foo {--key} | foo --key=value | - | エラー |
|  foo {--key=} | foo | $this->option('key'); | null |
|  foo {--key=} | foo --key | $this->option('key'); | null |
|  foo {--key=} | foo --key=valie | $this->option('key'); | "value" |
|  foo {--key=default} | foo | $this->option('key'); | "default" |
|  foo {--key=default} | foo --key | $this->option('key'); | null |
|  foo {--key=default} | foo --key=value | $this->option('key'); | "value" |
|  foo {--key=*} | foo | $this->option('key'); | [] |
|  foo {--key=*} | foo --key | $this->option('key'); | [null] |
|  foo {--key=*} | foo --key=value | $this->option('key'); | ["value"] |
sklearn.linear_modelによる線形回帰分析に、いくつかの曲線を当てはめた時の決定係数の変化



#線形回帰分析は、与えあれたデータが最も近似する直線の式と、その式に与えられたデータがどれくらい近いかを算出してくれます。（雑な解釈ですが・・・）今回、以下のソース中のy - y7で示される曲線に対し線形回帰分析を行い、決定係数の違いを確認しました。yは、直線そのものですが、y1-y7は曲線になっています。


#ソース
```python
import pandas as pd 
from sklearn.linear_model import LinearRegression

import matplotlib.pyplot as plt


#データ準備
dt={
    "x"  :[1100 , 1200 , 1300 , 1400 , 1500 , 1600 , 1700 ]  ,
    "y"  :[1100 , 1200 , 1300 , 1400 , 1500 , 1600 , 1700 ]  ,
    "y1" :[1100 , 1100 , 1100 , 1100 , 1100 , 1700 , 1700 ]  ,
    "y2" :[1100 , 1100 , 1700 , 1700 , 1700 , 1700 , 1700 ]  ,
    "y3" :[1100 , 1150 , 1350 , 1350 , 1550 , 1550 , 1700 ]  ,
    "y4" :[1100 , 1200 , 2300 , 1400 , 1500 , 1600 , 1700 ]  ,
    "y5" :[1100 , 1200 ,  500 , 1400 , 1500 , 1600 , 1700 ]  ,
    "y6" :[1100 , 1700 , 1100 , 1700 , 1100 , 1700 , 1700 ]  ,
    "y7" :[1100 , 1100 , 1200 , 1300 , 1450 , 1520 , 1700 ]  ,
    }

#描画位置
pos={
    "y" :[0,0]  ,
    "y1":[0,1]  ,
    "y2":[1,0]  ,
    "y3":[1,1]  ,
    "y4":[2,0]  ,
    "y5":[2,1]  ,
    "y6":[3,0]  ,
    "y7":[3,1]  ,
}


yset=list(dt.keys())
yset.remove("x")
yset.sort()

x=pd.DataFrame(dt["x"])


#描画関連初期化
len_yset=len(yset)
fig, ax = plt.subplots(int(len_yset/2),2  , figsize=(13,8),constrained_layout=True )  # Create a figure and an axes.

for y_val in yset :
    y=pd.DataFrame(dt[y_val])

    #線形回帰モデルの実行
        
    #model = LinearRegression(fit_intercept=False)     #線形回帰モデルの呼び出し(切片は計算に使用しない)
    model = LinearRegression()          #線形回帰モデルの呼び出し
    model.fit(x   , y)                  #モデルの訓練
    
    coef=round(model.coef_[0][0] ,2)              #回帰変数
    intercept=round(model.intercept_[0] ,2)       #回帰直線の切片
    score=round(model.score(x,y) ,2)              #決定係数


    #text出力
    print("{} : y={}x {:+}  決定係数 {} ".format(y_val , coef ,intercept ,score))

    #描画
    ax[pos[y_val][0] , pos[y_val][1] ].plot(dt["x"] , dt[y_val]  , label= y_val)
    ax[pos[y_val][0] , pos[y_val][1] ].set_title("y={}x {:+}  決定係数 {} ".format(coef ,intercept ,score) , fontname="MS Gothic")  # Add a title to the axes.
    ax[pos[y_val][0] , pos[y_val][1] ].legend()  # Add a legend.
plt.show()
``` 


#結果   
| y |       式 |決定係数 |
|:--:|:----------|:--------:|
|y  |y=1.0x -0.0|1.0|
|y1 |y=1.07x -228.57|0.63| 
|y2 |y=1.07x +28.57|0.63| 
|y3 |y=1.0x -7.14|0.96| 
|y4 |y=0.64x +642.86|0.12| 
|y5 |y=1.29x -514.29|0.47| 
|y6 |y=0.64x +542.86|0.19| 
|y7 |y=1.03x -106.43|0.96| 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/8325f296-e102-7512-6e67-69908ee10ede.png)

#直線のy=1、直線に近いもの(y3,y7)は決定係数が1に近いが、それ以外は、0.6以下となっている。やっぱ、「決定係数」と言うだけのことはある。
##回帰分析についての、私なりの素人解釈になりましたが、間違い等ありましたら指摘していただけると助かります。

#参考
[LinearRegression クラスについてメモ](https://qiita.com/nanairoGlasses/items/084b7656c285b4a41e03)
[sklearn.linear_model.LinearRegression](https://scikit-learn.org/stable/modules/generated/sklearn.linear_model.LinearRegression.html)
VSCodeとDockerでシンプルなPythonの開発環境を作る

##はじめに
VSCodeでDockerで動いているPythonを使って開発をする際に, ちゃんとコード補完をしてくれるシンプルな開発環境を作る.

###準備
VSCodeのDockerとRomote-Containersの拡張機能をインストールしておく
![スクリーンショット 2020-12-21 0.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/9fad07dd-3069-c217-cac9-07dcdcd6bc1e.png)![スクリーンショット 2020-12-21 0.38.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/29397759-3055-6b62-92c5-c335a8fef6a4.png)

###DockerでPython3の環境を構築
Pythonの環境構築自体は[dockerで簡易にpython3の環境を作ってみる](https://qiita.com/reflet/items/4b3f91661a54ec70a7dc)を参考にした.

```ディレクトリ構成
├ Dockerfile
├ docker-compose.yml
└ workspace/ (ここをコンテナにマウントして開発する)
```

```Dockerfile:Dockerfile
FROM python:3

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

RUN pip install --upgrade pip
RUN pip install --upgrade setuptools
```

`workspace`をコンテナにマウントする. 
(コンテナ内で編集した内容を引き継ぐため)

```yml:dokcer-compose.yml
version: '3'
services:
  python3:
    restart: always
    build: .
    container_name: 'python3'
    working_dir: '/workspace/'
    tty: true
    volumes:
      - ./workspace:/workspace
```
コンテナを起動

```
$ docker-compose up -d --build
```
確認

```
$ docker ps
CONTAINER ID        IMAGE                COMMAND             CREATED             STATUS              PORTS               NAMES
ab664cabca5f        python-dev_python3   "python3"           44 minutes ago      Up 44 minutes                           python3
```
必要なライブラリをインストール (コード補完の確認用に適当にnumpyをインストールしておく)

```
pip install numpy
```

###起動したコンテナにVSCodeで接続する
サイドバーのDockerからコンテナを指定して`Attach Visual Studio Code`を選択すると, コンテナに接続したVSCodeのウィンドウが新たに開く.
![スクリーンショット 2020-12-21 0.43.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/9b28b34a-636d-9778-3d72-f20f5ef36c2d.png)  ![スクリーンショット 2020-12-21 0.08.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/88902cc9-59a6-43a5-8a9e-be0fe3f14873.png)
「フォルダを開く」を選択し, マウントしたディレクトリを選択する.
![スクリーンショット 2020-12-21 0.13.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/dbb71a9b-efbd-3057-4ed4-f42e3c6e62c9.png)
コンテナでPython拡張を使うために, Pythonの拡張機能をコンテナにインストールする.
![スクリーンショット 2020-12-21 0.16.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/ff482777-1387-ee65-2417-98ddbe0b7122.png)
適当なPythonのファイルを作成し, interpreterにDockerで動いているPythonを指定する.
今回はPython 3.9.1
![スクリーンショット 2020-12-21 0.27.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/28dbcca4-3b41-f8ba-18e0-27573f4250ad.png)
これでコンテナにインストールしたライブラリを使う際にちゃんと補完してくれる.
![スクリーンショット 2020-12-21 0.27.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/884891/81d27aac-9f40-b67d-3b7e-8626aaf465b2.png)

##参考
[dockerで簡易にpython3の環境を作ってみる](https://qiita.com/reflet/items/4b3f91661a54ec70a7dc)
【衝撃】Udemyで『デザイン思考』の動画を見たら、日常の見え方が変わった話 

心の底からオススメしたいと思えた動画があったので、紹介します。
##この動画は、こんな人にメリットがある

  - 0→1で発想する事に、苦手意識がある人
  - 自分の考えを、まとめるのが苦手な人
  - 上司から、業務の改善を求められた人
  - 目の前の課題が解決できずに悩んでいる人

##どうして良いのか？

- デザイン思考を「日常で考えるなら？」に例えてくれるので、話が入りやすい
- 私は、動画を見る前、0→1への抵抗感が凄くあったが、それが取り除かれた
- 今日から使えるポイントがいくつもある
- 動画の内容はコンパクトなのに、毎回新しい発見がある

　
　

いきなりですが、
##『デザイン思考』と聞いて何を思い浮かべるだろう？　　
動画の冒頭、
デザイン思考とは、「問題解決」の「考え方」であるというとこと
とあります。

『デザイン』 = 問題解決
『思考』 = 考え方


例えば、ペットボトル


ペットボトルは、なぜあんな形をしていると思いますか？
　


それは、様々な問題を解決するためです。

- 液体を入れたい
- 持ち手を滑りにくくしたい
- 口を飲みやすくしたい

など、よくよく考えてみると、
あのペットボトルというデザインの中にも、たくさんの課題解決の要素がつまっていることに気づけます。

私は、この時思いました。


デザインといいつつ、それは、ほぼ全員の人が使える考え方なのではないか！？！？

##心に残っている章

■ 動き方を改善する（動作のバグ）
　→普段何気なくやっている行動は、いかに無駄が溢れているかに気付ける

■ 発想→試行→フィードバック
　→最短、最速で自分のアイディアを試すには？ってところが好きです。

■ 弟子入りする(話の聞き方)
　→相槌とか、コミュニケーションとか、どうやって話を聞いたら良いかがわかる。

■ 話の掘り下げ方（ページをクリックする）
　→聞いた瞬間、これえええええええええええ！！！！
　　ってなりました。
　　全部すっ飛ばしても良いから、ここだけはマジで見て欲しい。
　　話が上手な人が、なぜ、話が上手なのかが理論敵にわかる。

■ アナロジーという考え方
   1. 機能分解
   2. 機能を例える
   3. 例えたものを機能分解
   4. 機能と元のものでフィルターインプット（掛け算）
　→こうやってモヤモヤって解消するんだ！？が分りました。
   
■ コンセプトの作り方
　→何かを作るときに、絶対忘れちゃいけないこと。

■ 自分の在り方
　→控えめに言って、人生を考えさせられました。

##得られたコト

- 問題、課題をゼロペースで、どのように切り分けたら良いかが分かる
- 何かを整理したいとき、自然と手が動く
- 最速、最短で動き出すマインドセットが身につく
- ふとした時に、デザイン思考ベースで、物事を考えれるようになる


##まとめ
いかかでしたでしょうか？

私は、以下の2点を知れたことが、1番大きな収穫でした。
・普段の日常で、どうやって話を深堀りしたらいいか？
・ある事柄について、どうやって情報を整理したら良いか？

正直ここまでのめり込んで勉強するとは思いませんでした。
（まさか、youtubeやNetflixより、デザイン思考の動画みたいと思うとは）

凄く気軽な気持ちで最初の動画を見始め、気付いたら半分くらい見てました。

それくらい、毎回学びがあって、見ることが楽しかったということなので、講師の「渡辺拓」さんは、説明がとても上手だったのだと思います。

ぜひ暇も持て余したら、『デザイン思考』を。

年明けから、あなたの生活を激変させてくれるかも。
##Udemyの動画
【超実践】すぐに使えるデザイン思考！〜基本をおさえ、日常にイノベーションを起こす38個の習慣〜
https://www.udemy.com/course/design-thinking-for-everyday-life/
Notionで全てのデバイスからログアウトする

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2020](https://qiita.com/advent-calendar/2020/notion) 20日目のエントリです。
19日目は[Notionで日付をメンションする](https://qiita.com/pictiny/items/bc86e8b7706508c6b0d3)でした。

# 全てのデバイスからログアウトする
Notionでログインした端末を紛失したり、不正なログインの疑いがあった場合に、ログインしている全てのデバイスからアカウントをログアウトしたいことがあるかと思います。

左のメニューバーの `Settings & Members` からモーダルを開き、 `My account` を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/81c7b657-9d1e-50e7-0259-859e5469b4a4.png)

`Log out of all devices` の `Log out` ボタンを押すと、全てのデバイスからログアウトできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/807ab73c-f7c3-f161-d689-86d9cda45b4d.png)

# まとめ
もしものときは速やかにログアウトしましょう！
Flutter✕Firebase(Authentication編)

---
# :book: Flutterの記事を整理し本にしました :book:
https://zenn.dev/kazutxt/books/flutter_practice_introduction

* <font color="red"><b>本稿の記事を含む様々な記事を体系的に整理し本にまとめました</b></font>
* 今後はこちらを最新化するため、<font color="red"><b>最新情報はこちらをご確認くださ</b>い</font>
* 10万文字を超える超大作になっています(笑)

---

# はじめに
## 概要
* FlutterとFirebaseのAuthenticationを使って、認証機構を実装します
* メールとパスワードによる認証を作り、パスワードの再設定も実装します

## 対象読者
* FlutterでFirebase(mBaaS)によるサーバ認証を行ってみたい人

## 関連記事
* [Flutter系の記事のまとめ](https://qiita.com/kazutxt/items/524acb1c134015682ccf)

## スタート(前提条件)
* flutterの基本概念を理解されているとより理解できると思います。
* Firebaseをflutterで使えるようになるまでの初期設定は省略します。

## ゴール(達成できること)
* flutter✕FirebaseのAuthenticationで認証ができるようになります

## スコープ外(ふれないもの)
* 認証方式はメール&パスワード方式のみとし、Google,Github,Lineなどのソーシャルアカウント認証については触れません

## 開発環境
* flutterWebを用いているため、現時点でbetaのチャンネルを使っています

```  .sh
% flutter --version
Flutter 1.25.0-8.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 8f89f6505b (5 days ago) • 2020-12-15 15:07:52 -0800
Engine • revision 92ae191c17
Tools • Dart 2.12.0 (build 2.12.0-133.2.beta)
```

---

# 本編
## 全体像/結論
* FirebaseのAuthenticationを設定し、flutterから呼び出すことで実現できます

## 実装例

### ソースコードなど

``` pubspec.yml
# 依存関係を記述しておきます
firebase_core: ^0.5.3
firebase_auth: ^0.18.0
```
* 今回はWeb版で利用するため、index.htmlのjsについても読み込んでおきます

``` index.html
<script src="https://www.gstatic.com/firebasejs/8.2.0/firebase-auth.js"></script>
```
* dartのソースコード(抜粋)

``` login.dart
// パッケージのimport
import 'package:firebase_auth/firebase_auth.dart';

// 登録
final User user = (await FirebaseAuth.instance.createUserWithEmailAndPassword(
  email: email, password: password)).user;

// ログイン
User user = (await FirebaseAuth.instance.signInWithEmailAndPassword(
  email: email,password: password)).user;

// パスワードリセット
await FirebaseAuth.instance.sendPasswordResetEmail(email: email);

// 例外処理(すでに登録済、フォーマットエラー、パスワードが短すぎなど)
// 例外のメッセージを少し加工して、flushbarで表示しています
Flushbar(
  message:e.toString().replaceAll(RegExp(r'\[.*\] '), ''),
  flushbarPosition: FlushbarPosition.TOP,
  backgroundColor: Colors.deepOrangeAccent,
  margin: EdgeInsets.all(8),
  borderRadius: 8,
  duration: Duration(seconds: 5),
)..show(context);
```


## 動作イメージ
* AuthenticationのSign in methodのメール/パスワードを有効にする
![pic2_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/8ef7cd2d-883d-5c2c-0c66-fdd0435e73af.png)

* 有効化と上述のソースコードの登録の部分を実行するとレコードが増える
![pic2_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/885da5cf-58cf-d582-89a7-47b10dfa731a.png)

* パスワードリセットメールは、templateのパスワード再設からテンプレートが作れる
![pic2_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/492f4678-9b71-16fa-2acc-947de0de5759.png)

* メソッドが呼び出されると、メールサーバなどを設定していなくてもメールが飛ぶ
*  本文中のリンクを踏んで、新しいパスワードを設定すると反映される
![pic2_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259228/fdfcacd7-0b2a-fb0f-6946-bee6259a621c.png)



---

# 補足
## 備考
* Google認証なども実現したかったのですが、証明書やフィンガープリントなどが少し手間だったのでまだ実現していません
* PWを自分で保持しないので、セキュリティ上も良いですね
 
## 参考文献
*  [Flutterで始めるアプリ開発|Authentication概要](https://www.flutter-study.dev/firebase/authentication)

## 追記
* 2020/12/21 初稿
競技プログラミング 日記 python 20201220

https://atcoder.jp/contests/abc186/

## A - Brick

```py
n, w = map(int, input().split())

print(n // w)
```

## B - Blocks on Grid

全てのマスの中で最も少ない数に合わせる。10の４乗程度のオーダーなので愚直にループを回せば良さそう

```py
h, w = map(int, input().split())

blocks = []

for i in range(h):
    blocks += list(map(int, input().split()))
    
min_block = min(blocks)

ans = 0

for a in blocks:
    ans += a - min_block
    
print(ans)
```

## C - Unlucky 7

> 1からNまでの数のうち、10進法でも8進法でも7を含まない物はいくつ？

Nは10の5乗以下なので、N以下のすべての数に対して確認すれば良さそうかな

```py
n = int(input())

ans = 0

for a in range(1, n+1):
    ten = str(a)
    eight = format(a, 'o')
    if "7" not in ten and "7" not in eight:
        ans += 1
print(ans)
```

## D - Sum of difference

Nこの数字に足して、すべての差の合計を求める。combinationを求めてループすればいい？
それだと計算量がオーバーする。大きさ順に事前にソートしておくと、絶対値の計算が要らなそう

```py
n = int(input())
numbers = sorted(list(map(int, input().split())))

ans = 0
other_sum = sum(numbers)
other_len = len(numbers)

for i, a in enumerate(numbers):
    other_sum -= a
    other_len -= 1
    ans += (other_sum) - a * (other_len)

print(ans)
```
ScullyでSSG試してみた

この記事はDMMグループ [Advent Calendar 2020の20日目](https://qiita.com/advent-calendar/2020/dmm)の記事です。

### 概要
プライベートに作っていた超静的なAngularアプリケーションがあったので、
Angular用のSSGである[Scully](https://github.com/scullyio/scully)を導入してみた話です

### 環境

```
Angular CLI: 11.0.5
Angular: 11.0.5
```
[ドキュメントには](https://scully.io/docs/learn/getting-started/requirements/)Angular v9.x.x or v10.x.xの指定がありましたがv11のアプリケーションに導入を行いました
私のアプリケーションがとても小さなものだったこともあり、特に問題は起きませんでした

### 導入
AngularプロジェクトにScullyのスキマティックスを入れるだけで基本的な設定が完了します

```
ng add @scullyio/init
```

`scully.log`, `/scully` が自動で追加されましたが、git管理不要そうなものだったので `.gitignore` に退避させました
（似たような[issue](https://github.com/scullyio/scully/issues/1141)があった）

### 開発
```
npx ng build --prod // Angular build
yarn scully // Scully start
yarn scully:serve // Scully serve
```
Angularのプロジェクトをbuildして、Scullyを走らせると `./dist/static` にプレレンダリングされたファイルが生成されます

また、ローカル環境を立ち上げると、AngularとScully両方のビルド結果をそれぞれホスティングした、２つのサーバを立ち上げます
プレレンダリングされたアプリケーションとSPA同時に動作検証ができます

本番環境へデプロイするときは、 `./dist/static` をホスティングするように変更します
私のアプリケーションは [@angular/fire](https://github.com/angular/angularfire) でfirebaseにホスティングしていたので `firebase.json` の設定変更を行いました

```json:firebase.json
"hosting": [
    {
      "target": "xxx",
      "public": "dist/static",
    　....
    }
]
```

ScullyはPuppeteerを使用してレンダリングしているためブラウザ環境以外のことを気にすることがないです
またスキマティクスが用意されているので、既存SPAアプリケーションを超超簡単にプレレンダリングできました！


### 動的ルーティング
自分のアプリケーションがとても小さなものだったので、よくありそうな動的ルーティングのプレレンダリングも試してみました

以下のような動的なルーティングがあるとします（商品の詳細ページのイメージ）

```typescript:app-routing.module.ts
const routes: Routes = [
  { path: 'book/:id', component: BookComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

```
動的ルーティングをプレレンダリングしたい場合、Scullyのconfigファイルに設定追加をする必要があります。
（設定がない場合はプレレンダリングの対象から外されます）

Scullyが用意している[jsonプラグイン](https://scully.io/docs/Reference/plugins/built-in-plugins/json/)を使い、`scully.<projectName>.config.ts` を修正しました

ScullyはAngularのルート設定を見てプレレンダリングの対象を検出しています、そのためルートの数だけ静的ファイルも増えていきます
jsonプラグインは、ルートを精査中に指定したAPIからデータをフェッチして、ルートパラメータを含むルートのリストを作成してくれます
これにより、動的ルーティングのページのプレレンダリングが可能となります


```typescript:scully.projectName.config.ts
export const config: ScullyConfig = {
  ....
  routes: {
    '/book/:id': {
      type: 'json',
      id: {
        url: "https://some-endpoint",
        property: "id",
        resultsHandler: () => [{ id: 1 }, { id: 2 }, { id: 3 }], // テスト用にダミーデータを返した
      }
    }
  }
}
```

設定後に再度AngularとScullyのビルドを行うと `./dist/static/book` にディレクトリ1,2,3とそれそれぞれの静的ファイルが生成されました
また、Scullyのルーティングファイルも更新されてました

```json:src/assets/scully-routes.json
[{"route":"/"},{"route":"/book/1"},{"route":"/book/2"},{"route":"/book/3"}]
```

[ScullyRoutesService](https://scully.io/docs/Reference/ngLib/scully-routes-service/)をDIすることでコンポネント側でルート情報の取得も可能です

動的パラメータはパターン数が多いケースが多々あるので、API経由で取得したデータを元に自動的にプレレンダリングの対象にしてくれるのは楽でいいなと思いました

他にもScullyが用意している[プラグイン](https://scully.io/docs/Reference/plugins/built-in-plugins/overview/)があったりカスタムプラグインも作成できるようで、各アプリケーションの仕様にそって色々試せそうです

### まとめ
とにかく簡単にSSG導入ができました
Scullyは9月頃にbeta版からv1になったばかりなこともあり今後もアップデートがありそうなので、引き続きwatchしていきたいです！
学習メモ：Ruby基礎１

プログラミングの学習としてRubyを勉強してみました。１日目
以下勉強しながらメモをしてみました。
以下メモの内容

Rubyとは
システムを作るためのプログラミング言語　
　　　似たものとしては、PHP、Pythonがある。

コンソール
コンソールとはコードを書き、その結果が出力される場所

文字列
文字列はクォーテーションで囲む　例　’文字列’
クォーテーションで囲まなければエラーを起こす。

命令文puts
Rubyのコードの中、「puts」がある。
コンソールに値を出力させる命令文である。
注意としては、putsの後には「半角スペース」が必要である。
例　puts “Hello Ruby” 
　　コンソールには
　 Hello Ruby と表示される。

コメント
「＃」の後に　書かれた文字がコメントになる
コメントとは、プログラミングに関するメモである。
注意としては、「＃」も必ず半角に記述すること、　コメントの色が灰色になること。

数値の計算
コンソールに出力する時文字列のようにクォーテーションで囲まない。
数値には足し算、引き算のような計算が可能である。
例　puts 2 + 3
　　puts 3 - 2
注意としては　
・半角で記述、
・数値と記号の間には半角のスペースがあった方がいい。
・クォーテーションで囲んでしまうと文字列扱いになる。
　　例　puts “2 + 3” とするとコンソールには　
　　　　「2 + 3」となる。
また
足し算、引き算以外にも掛け算、割り算、割り算の余りを計算することが出来る。
記号紹介
掛け算：＊
割り算：／
割り算の余り：％

文字列の結合
文字列同士で「＋」の記号を用いると文字列同士を連結することが出来る。
例　puts “あいう” + “えお” 　コンソールには　「あいうえお」と表示される。
また
数字の文字列を足す場合と数値を足す場合と違うので注意する。
例
puts “3” + “5” の場合　コンソールには35と表示される。
puts 3 + 5 の場合　コンソールには８と表示される。

文章が拙いですがお許しください。
Qiita、ブログ自体は初めてなのでよろしくお願いします。
１日ずつ頑張って参ります。
三項演算子でメソッドの返り値を用いた場合、実行されるのは片方だけなの？

# 三項演算子でメソッドの返り値を用いた場合、実行されるのは片方だけなの？

## この記事で述べていること
- この記事は備忘録です。見る人によっては当たり前のことしか書いてません
- 三項演算子で返り値の方のそれぞれにメソッドを2つ置いた際、実際にどちらが返り値とされるかはともかくとして、実行されるのって片方だけなの？  
- 片方だけでした
- リファレンスに書いてあったね、読もう
  
## 説明
皆さんご存知、三項演算子ってありますよね。  
?の手前に置いた条件で、どちらの値が返されるか決まるあれです。  
で、開発の最中に使おうとした際、ある疑問が走りました。

  ```c#:三項演算子とメソッドの実行
    var hoge = true ? test1() : test2();
  ``` 

「こんなとき、test1の返り値がhogeに入るのはまあ良いとして、test2って実行されないの？それとも一応実行されはするの？」

## やってみた
実際にテストしてみました。  
テストしたのがUnityなのでStart等を使っていますが、ただのC#でも同じはずです。
  
```c#:どのメソッドが呼び出されるかどうかのテスト
private void Start(){
  var hoge = true ? test1() : test2();
}

private int test1(){
    Debug.Log("Test1");
    return 0;
}

private int test2(){
    Debug.Log("Test2");
    return 1;
}
```

実行してみたところ、`Test1`と出力されました。  
どうやら選択された方のメソッドのみが評価・実行されるようです。

## 最後に
Microsoft Docs読んだら最初に書いてありましたね…(参考サイトを参照)

## 参考サイト
- ?: 演算子 (C# リファレンス)  
https://docs.microsoft.com/ja-jp/dotnet/csharp/language-reference/operators/conditional-operator
JavaScript~ログの確認、演算子~

#はじめに
第二回目の投稿です。今回はログの確認方法と演算のやり方を投稿します。
ぜひ読んでみて意見等あればよろしくお願いします。

#ログの確認
そもそも何故ログの確認が必要かというとデバックのためです。
デバックを行うことでエラーを早期発見、修正できプログラムを完成させやすくなります。
JavaScriptでログを表示する場合は次のように記載します。

```JavaScript:log
console.log(引数)
```
実際の使い方として次のように使います。

```JavaScript:こんばんは
console.log('こんばんは');
```
これにより各ブラウザーのコンソールパネルにメッセージを出力できます。
Google Chromeの場合
メニューバー→その他のツール→デベロッパーツール
で表示されたボックスの「Console」タブを選択します。

console.log()は複数の値をカンマで区切ることで引数を複数設定できます。

```JavaScript:複数
console.log('田中さんは','10才','です');
//田中さんは10才です 
```
このようにひとつのログとして表示されます。

#四則演算
JavaScriptの四則演算は次の演算子を使って行います。

```JavaScript:四則演算
console.log(10 + 5); //これは足し算で結果は15になります。
console.log(10 - 5); //これは引き算で結果は5になります。
console.log(10 * 5); //これは掛け算で結果は50になります。
console.log(10 / 5); //これは割り算で結果は2になります。
console.log(11 % 5); //これは割り算の余りで結果は1になります。
```

#終わりに
ログの確認と四則演算について書きました。
もし至らないところや分からないところがあればこちらでもTwitterでもいいので連絡ください。
最後まで読んでいただきありがとうございました。
スケジュールドリザーブドインスタンス とは

## 勉強前イメージ

リザーブドインスタンスが1年間で契約だから、
ある特定の期間から1年間購入が事前にできるってことかな？

## 調査

### スケジュールドリザーブドインスタンスとは？

EC2インスタンスの買い方です。
日次、週次、月次と３パターンのスケジューリングされた買い方があり、月に数回のバッチ用などで買うことができる

### リザーブドインスタンスとの違いは？

リザーブドインスタンスは1年間のEC2インスタンスの購入となっていますが、
日次バッチや、締め処理で動かすものなどはずっと稼働しないことがあります。
スケジュールドリザーブドインスタンスは日、週、月で購入することができます。

### 実際にコンソールを見てみよう

今のところ、東京リージョンでは使用できないのでオレゴンリージョンで確認します
EC2の `スケジュール済みインスタンス` へ移動します

![EC2 Management Console 2020-12-19 12-21-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/e426e075-9202-fa49-0d1e-a14d05c13f1a.png)


「24h365day 稼働させたい人はリザーブドインスタンスを見てね」 って書かれていますね。

## 勉強後イメージ

東京リージョンではまだ使えないのが悲しいが....
リザーブドインスタンスより細切れに買えるって認識。
管理が大変そうだなー

## 参考

- [【新機能】「スケジュールドリザーブドインスタンス」で定期的なサーバー運用をより格安に](https://dev.classmethod.jp/articles/introduce-to-scheduled-reserved-instance/)
GKEでもCluster Autoscalerの動きを意識しよう


## はじめに
GKEなりEKSなりフルマネージドk8sサービスを使ってるケースだと、ほぼ間違いなくCluster Autoscalerも活用してると思います。

EKSだとCluster Autoscalerを自分でデプロイする必要があります。結構大変ですね。
https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/cluster-autoscaler.html

ですが、GKEだとCluster Autoscalerの部分までマネージドなので、ものすごく簡単にAutoscalerを設定できます。以下、公式の引用です。

> 自動スケーリングを使用してクラスタを作成するには、--enable-autoscaling フラグを使用して --min-nodes と --max-nodes を指定します。

このように、オプションをいくつか指定するだけです。Cloud Console経由で作成する場合でもチョンチョンチョンくらいで設定できます。
とても簡単に設定できてよろしいのですが、だからこそCluster Autoscalerの存在を意識せずに運用している人も多いのではないでしょうか？

## そもそもGKEのCluster Autoscalerとは何なのか

フルマネージド故に普段意識することはないですが、Cluster Autoscalerの実態はこいつです。

https://github.com/kubernetes/autoscaler

## Cluster Autoscalerのログの見方

GKE Cluster Autoscalerのログはstackdriver loggingで見ることができます。

詳しくはここに書いてありますね。
https://cloud.google.com/kubernetes-engine/docs/how-to/cluster-autoscaler-visibility

例えば以下のようなイベントログを見ることができます。

| イベント  | 説明                                         |
| --------- | -------------------------------------------- |
| status    | 定期的にnodeの状態を取得                     |
| scaleUp   | スケールアップ時に発生                       |
| scaleDown | スケールダウン時に発生                       |
| noScaleUp | 何らかの理由でスケールアップできない時に発生 |

## GKEにおけるexpanderの動作

expanderとは、「どのような基準でclusterをスケールアップするか」というルールですね。詳しくは以下。

https://github.com/kubernetes/autoscaler/blob/master/cluster-autoscaler/FAQ.md#what-are-expanders

cluster autoscalerそのもののデフォルトとしては、`random`というルールが設定されます。文字通りランダムに選択されるというルールですね。

ですがGKEだと、`price`というルールが適応されます。これは、**選択可能なノードプールの内、最もコストの安いノードプールを拡張させる**という物です。
この設定のおかげで、プリエンプティブVMで構成されたノードプールが選択可能な場合は、**通常のVMよりもプリエンプティブVMが優先して立ち上がる**訳ですね。
ちなみに、GKE以外だと`price`は設定できないようです。

## 最後に

というわけで、GKEにおけるCluster Autoscalerの裏側？に関して簡単に書きました。ちなみに、一応GKEでも自分で(GKEマネージドでない)Cluster Autoscalerをデプロイして動かすことも可能だと思われます(ちょっと工夫は必要)。
OpenSCADでうんこを作る

OpenSCADはスクリプトで3Dモデルを作成するモデリングソフトウェアです。`translate([-5, 12, 0.5]) cube(5);` のようなスクリプトで3Dモデルを定義できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731232/b84b0ff1-892e-d347-1f09-b483463537ec.png)


主な用途は3Dプリンタで出力するようなソリッドモデルの作成です。今回はOpenSCADで **うんこ** を作成します。

# うんこ

うんこの形は様々ですが、アニメや漫画でよく用いられるのが渦巻き模様のうんこ通称うずまきうんこです。

> 💩

今回はこのうずまきうんこをOpenSCADでモデリングします。

## 作っていく

うんこの下の楕円柱部分を作成します。

OpenSCADで用意されてるプリミティブな立体はポリゴンか円柱、正六面体等のべーシックなもののみで楕円柱となるエッジが楕円な円柱は用意されていません。なので`回転押し出し`という手法で楕円柱を定義します。

まずは回転させるための平面を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731232/d966cee7-38cd-a629-662c-fe47c0dc019d.png)

```
square(10);
translate([10, 5, 0]) scale([2, 1, 1]) circle(5);
```

これを`rotate_extrude`で回転押し出しすると楕円柱となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731232/4a2a76fb-3a99-04c8-6102-ee0f785246b3.png)

```
rotate_extrude() {
    square(10);
    translate([10, 5, 0]) scale([2, 1, 1]) circle(5);
}
```

これを`for`で三段重ねにしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731232/4b0e0f6c-c8eb-3f67-7b18-c23237bb3425.png)

```
for (n = [0:2]) {
    translate ([0, 0, n * 10]) scale([1 - n * 0.15, 1 - n * 0.15, 1]) {
        rotate_extrude() {
            square(10);
            translate([10, 5, 0]) scale([2, 1, 1]) circle(5);
        }
    }
}
```

`cylinder`で頭頂部の円錐をつけて完成。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/731232/75f25aba-17f4-8fb1-2a89-e70aed8ea351.png)

```
for (n = [0:2]) {
    translate ([0, 0, n * 10]) scale([1 - n * 0.15, 1 - n * 0.15, 1]) {
        rotate_extrude() {
            square(10);
            translate([10, 5, 0]) scale([2, 1, 1]) circle(5);
        }
    }
}

translate([0, 0, 30]) cylinder(h=10, r1=5, r2=0);
```
TypeScriptを学んだ(2) ~モジュール編~

前編は、[TypeScriptを学んだ(1) ~型、クラス編~](https://qiita.com/kudojp/items/e89a42821f599fe8cf8e)

## 内部モジュール

コードを部品化してわかりやすく整理したりだとか、変数名とかクラス名の衝突を避けたりするために使用する。

```tsx

module UserModule {                 // モジュール定義
  export var name = "John";         // モジュールの外部からアクセスするにはexportを使う
  export module AddressModule {
    export var zip = "111-111";
  }
}

// dotアクセス
console.log(UserModule.AddressModule.zip);

// もしくはimportを使い、、
import addr = UserModule.AddressModule
console.log(addr.zip);

```

また、複数のファイルに別れており、別ファイルを読み込む必要がある場合には、ファイルの最初に

```main.ts

/// <reference path = "./user.ts" />
...
```

これらをコンパイルして一つのファイル(all.js)に書き出したい場合には、コンソールで`$ tsx main.ts --out all.js`を実行すれば良い。


## 外部モジュール


```user.ts
module UserModule {
  export var name = "John";
}
```

```main.ts
import User = require("./user") // 拡張子はいらない
console.log(User.name);         // モジュールにはimport時の変数からアクセス
```


```terminal

// Node JS でよく使われる CommonJS形式でのコンパイル方式
$ tsx main.js -m commonjs


// RequireJSなどで使われる AMD と呼ばれるコンパイル方式
$ tsx main.js -m amd

```


## 参考

- [ドットインストール TypeScript入門 #18~#19](https://dotinstall.com/lessons/basic_typescript)
react-hook-formでの値登録の処理

## 概要
Reactでフォームの実装をする際にバリデーションなど簡単に実装できる、[react-hook-form](https://github.com/react-hook-form/react-hook-form)というものがあります。使い方の概要などは、@akihiro_FEさんが[React-hook-formで簡単にバリデーションフォーム作る](https://qiita.com/akihiro_FE/items/b2295e6b98e8e8c881ed)という記事で紹介されています。
今回はフォームで入力する値の登録処理の詳細について、少し調べてみたのでメモ書きを残しておきます。

## registerメソッドについて
ドキュメントの[フィールドを登録する](https://react-hook-form.com/jp/get-started#Registerfields)にあるとおり、入力項目のref属性にregisterをセットすることでフォームフィールドの値の収集とバリデーションが実現できます。そして、onSubmitに指定するメソッドでregisterにセットした値を取得できます。[React Hook Formを使う](https://zenn.dev/nbr41to/articles/9da6fa9047f968)の記事の「送信の設定」の項にある通り、「refにregisterが設定された要素のvalueが,その要素のnameがプロパティとなり,dataにオブジェクトとして渡される」仕組みとなっています。

## 値登録の処理
では、submit時に取得できる値の登録はどのような処理を行っているのでしょうか。参考になるのはドキュメントの[refへのアクセスが出来ない場合は？](https://react-hook-form.com/jp/faqs#Whatifyoudonthaveaccesstoref)です。ref属性でのregisterメソッドを使用しない（もしくはできない）場合は、事前にregisterメソッドでプロパティ名を登録の上、`useForm`で設定されている`setValue`メソッドで個別に値が設定できます。
では、そのsetValueでは何をやっているかというと、[こちら](https://react-hook-form.com/jp/api#setValue)のドキュメントにある通り、「formStateはinputのnameをtouchedにプッシュ」とあります。最終的な状態の管理は[formState](https://react-hook-form.com/jp/api#formState)で行われていて、formStateの`touched`に「操作された全てのinputのnameの配列」が格納されています。
doctestの使い方メモ

# doctestとは


簡易なテストを実行する為のpython標準ライブラリです


# 使い方


#### 1. テストを書く


docstringに実行内容と正しい返り値をセットで書くだけです


```python
def add(a, b):
    '''
    >>> add(1, 2)
    3
    >>> add(-8, -2)
    -10
    '''
    pass

if __name__ == '__main__':
    import doctest
    doctest.testmod()
```


#### 2. テストを実行する


```terminal:terminal
python hoge.py
```


#### 3. 結果


```terminal:出力
**********************************************************************
File "__main__", line 3, in __main__.add
Failed example:
    add(1, 2)
Expected:
    3
Got nothing
**********************************************************************
File "__main__", line 5, in __main__.add
Failed example:
    add(-8, -2)
Expected:
    -10
Got nothing
**********************************************************************
1 items had failures:
   2 of   2 in __main__.add
***Test Failed*** 2 failures.
TestResults(failed=2, attempted=2)
```


#### 4. 修正する


正しく返すように修正します

```python:hoge.py
def add(a, b):
    '''
    >>> add(1, 2)
    3
    >>> add(-8, -2)
    -10
    '''
    return a + b

if __name__ == '__main__':
    import doctest
    doctest.testmod()
```


#### 5. 再度テストする


```terminal:terminal
python hoge.py
```


#### 6. 結果


テストがすべて成功すれば出力は出ません


```terminal:出力
```


# 特定の関数を指定してテストする


doctest.testmod()を使うとすべての関数をテストしてくれますが、特定の関数だけをテストする場合はdoctest.run_docstring_examples()を使います。以下のように書けばadd()だけテストします。


```python:hoge.py
    import doctest
    doctest.run_docstring_examples(add, globals())
```


# jupyter notebookで使う場合


doctest.testmod()すると定義したすべての関数をテストするのは同じなので、セル内で普通に実行するだけです。


```python:jupyter_notebook
def add(a, b):
    '''
    >>> add(1, 2)
    3
    >>> add(-8, -2)
    -10
    '''
    pass

import doctest
doctest.testmod()
```
Rubyならメソッドにして、処理をストックしておくと効率的だなぁって話

#はじめに
先日、ある企業と面談している中での気づきです。
もしかしたら、現場のエンジニアの方からしたら、当たり前のことなのかもしれませんが、まだ実務の経験もない私にとっては結構大きな気づきだったので、これを見た誰かにも同じ気づきになることを願って紹介します。

##よく使うコードはストックしておくということ

今の段階で、どんなコードがよく使うものなのかわからないけど、Rubyで言えば、処理をメソッド化してストックしておき、必要に応じて、コピペし、メソッドを呼び出すだけで処理を終えられるというのは、とても効率的だと感じました。
ポイントとしては、

- コメントで何の処理をしているのか記述しておく。
- メソッド化して、引数を渡すことで戻り値が返ってくるような感じ。（例えば、数値を渡したら文字列として返ってくるみたいな）

そういえば、Paizaの問題解くときに毎回新たにコード書いてたけど、何回も同じもの書いてたなぁ…

##最後に
これを受けて、新たな疑問としては、

- よく使うコードとは、どういったものの処理なのかということ。
- そもそも自分で考えなくても、ネット上に転がっているのを拾ってくる作業なのか。

ということです。
何かアドバイスがあればください…
numpy.zeros()でndarrayを初期化した際はメモリが確保されない

題の通り、ndarrayをnumpy.zeros([行数,列数])で初期化した際、**[行数,列数]サイズのndarrayのデータを入れるためのメモリ領域は確保されない。**内部的には0以外のデータに対してだけ実際にメモリを割り当てている模様。
このため、例えば100万×100万のような巨大なndarrayであっても、numpy.zeros()で初期化した場合は、メモリ32GBや64GBのPCでも軽快に扱うことが出来る。スパースな行列をメモリに制限のある環境で扱う際に利用できるかもしれない。(素直にscipy.sparseを使えば良い気もするが)


```python
import numpy as np
import sys

# 100万×100万,型はfloat64のndarrayを生成
zero_array = np.zeros([1000000,1000000])

# メモリサイズを確認
sys.getsizeof(zero_array)
# 8000000000112(約8TB)

# メモリ32GBのPCでも軽快に動作する
print(zero_array)
#[[0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# ...
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]]

zero_array[0,0] = 1
print(zero_array)
#[[1. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# ...
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]
# [0. 0. 0. ... 0. 0. 0.]]
```

numpy.ones()で初期化しようとすると、メモリが足りずプロセスが落ちる。

```python
one_array = np.ones([1000000,1000000])
# プロセス異常終了
```
[Ruby] クラス・インスタンスのざっくり理解


・Rubyでは、全ての値がオブジェクトである
・オブジェクトは、クラスから作ることができる
・オブジェクトは、何らかのクラスに属している
・オブジェクトとインスタンスはほぼ同じものである

オブジェクト ≒　インスタンス

---
・クラスとはデータと処理をまとめたもの
・そのデータをインスタンス変数と言い、処理をメソッドと言う

　　　　データ　→　インスタンス変数
クラス＜
　　　　処理　　→　メソッド


・インスタンス変数はクラス内で定義された変数のこと
・インスタンス変数と変数の違いはクラス内で定義されているかどうか
・インスタンス変数は、クラスの中でしか使えません
・クラスの中に書く変数は、他にクラス変数がある


・クラスの外に書いたメソッドを関数的メソッドと言う
・クラスの中に書いたメソッドをインスタンスメソッドと言う
・クラスの中に書くメソッドは、他にクラスメソッドがある

---
・ローカル変数　book = book_title
・ローカル変数とは、メソッドやブロックの内部で作成される変数のこと
・ローカル変数はメソッドやブロックの内部でのみ有効である

・インスタンス変数  @book = book_title
・インスタンス変数とは同じクラス内(オブジェクト内)で共有可能な変数のこと

・クラス変数　＠＠book = book＿title
・クラス変数とは、同じクラス内の全てのインスタンスメソッド内や
　継承されたクラス内(そのインスタンスメソッド内)で使用できる変数