OmniAICreator/Qiita-1.07M huggingface dataset:
都道府県プルダウンリスト（コピペ用　１列バージョン）

# アプリ作成用（メモ）
　検索フォーム用に残します。
　「brand（産地）」としていますが，都道府県は「prefecture(s)」です。

````Ruby:app/models/brand
class Brand < ActiveHash::Base
  self.data = [
    { id: 1, name: '--' },
    { id: 2, name: '北海道' },
    { id: 3, name: '青森県' },
    { id: 4, name: '岩手県' },
    { id: 5, name: '宮城県' },
    { id: 6, name: '秋田県' },
    { id: 7, name: '山形県' },
    { id: 8, name: '福島県' },
    { id: 9, name: '茨城県' },
    { id: 10, name: '栃木県' },
    { id: 11, name: '群馬県' },
    { id: 12, name: '埼玉県' },
    { id: 13, name: '千葉県' },
    { id: 14, name: '東京都' },
    { id: 15, name: '神奈川県' },
    { id: 16, name: '新潟県' },
    { id: 17, name: '富山県' },
    { id: 18, name: '石川県' },
    { id: 19, name: '福井県' },
    { id: 20, name: '山梨県' },
    { id: 21, name: '長野県' },
    { id: 22, name: '岐阜県' },
    { id: 23, name: '静岡県' },
    { id: 24, name: '愛知県' },
    { id: 25, name: '三重県' },
    { id: 26, name: '滋賀県' },
    { id: 27, name: '京都府' },
    { id: 28, name: '大阪府' },
    { id: 29, name: '兵庫県' },
    { id: 30, name: '奈良県' },
    { id: 31, name: '和歌山県' },
    { id: 32, name: '鳥取県' },
    { id: 33, name: '島根県' },
    { id: 34, name: '岡山県' },
    { id: 35, name: '広島県' },
    { id: 36, name: '山口県' },
    { id: 37, name: '徳島県' },
    { id: 38, name: '香川県' },
    { id: 39, name: '愛媛県' },
    { id: 40, name: '高知県' },
    { id: 41, name: '福岡県' },
    { id: 42, name: '佐賀県' },
    { id: 43, name: '長崎県' },
    { id: 44, name: '熊本県' },
    { id: 45, name: '大分県' },
    { id: 46, name: '宮崎県' },
    { id: 47, name: '鹿児島県' },
    { id: 48, name: '沖縄県' }
  ]

end
````
【Javascript】filterメソッドー学習ノート

#初めに
javascriptのfilterメソッドについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

#filterメソッド
対象の配列にメソッド内の関数からの条件がtrueの値のみを選び、新しい配列を生成するメソッド。引数に関数を取るため高階関数の一つ。

# 使ってみる
まずfilterメソッドの対象となる配列を用意します。

```javascript
const changes = [100, 400, -300, 120, -50, -330, 1400, 500];
```

この配列の中の値から300以上の値だけを残す場合はfilterメソッドで以下のように書くことができます。

```javascript
const filterChanges = changes.filter((arr) => arr >= 300);
console.log(filterChanges);
//(3) [400, 1400, 500]
```

これはfor of文を使えば同じような結果を得られます。

```javascript
const filterChanges2 = [];

for (const change of changes) if (change >= 300) filterChanges2.push(change);
console.log(filterChanges2);
//(3) [400, 1400, 500]
```

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
STM32F767と温度センサーMCP9701で温度をシリアル出力 (Arduino)


x MCP9701-E/TO 販売コード 103199

x あまり正確では、ない

目的
秋月で売っている安価なMCP9701(約25円)を使って温度を出力する。

構成
MCP9701-E/TO I-03199

説明
MCP9701は、
0℃の時、400mV
1℃あたり19.5mV
精度は、±4℃
電線が引き出しやすい位置のA0をアナログ入力にする
計算には、容量削減の為に浮動小数点となるべく割り算は、使わない
MCP9700は、ファミリー、オフセット500mV、10mV/1℃ 今回は、使わない

x プログラムは、STM32F303と同じ


```c++


//初期化
void setup()
{

  Serial.begin(9600);

} //setup

//メインループ
void loop()
{

  int s;  //センサーの値
  int n0; //小数点以上

  analogReadResolution(12);
  s = analogRead(A0);

  //電圧を温度に変換 ex 20.0 -> 200 温度の十倍を出力
  s=((  (s)  -496)*27081)>>16;

  //s = 0;   //0  debug
  //s = 200; //20 debug

  //小数点以上と小数点以下を分ける
  n0 =(s/10);      // 小数点以上
  s  =(s-(n0*10)); // 小数点以下

  //温度の小数点以上の表示
  Serial.print(n0);

  //小数点の表示
  Serial.print('.');

  //温度の小数点以下の表示
  Serial.println(s);

  //1秒の待ち
  delay(1000);

} //loop



```
画像処理ソフトでBlenderのPython APIみたいなものを作りたかった

# 追記
importはメインプロセス内でほかのスクリプトを実行できるので，importを弄って書いた方がいいと思います．（2021/06/29）
[画像処理ソフトでBlenderのPython APIみたいなものを作りたかった（２）](https://qiita.com/ambara/items/6820ceadf120c6fe5632)にてimportを用いて実装する方法を書きました．（2021/07/01）
# 目的
[ImageJ](https://imagej.nih.gov/ij/)などの画像処理ソフトは画面がごちゃごちゃになりがちで個人的に使いづらいため，シンプルな画像処理ソフトを作ろうと思いました．

ImageJや，私の作ったものと同じでPythonで書かれている[Image-Py](https://github.com/Image-Py/imagepy)ではプラグイン形式での機能の追加が可能ですが，画像を直接扱えた方が便利だと思いタイトルの考えに至ります．

環境はWindows，python=3.9.5，pyqt5=5.15.4です．

実装は[Github上](https://github.com/murata721/imagepy)に公開しています．

# 仕組み
「BlenderのPython Scripting APIみたいなものを作りたかった」という割には[Blenderのソース](https://github.com/blender/blender?files=1)が時間と能力的に読めなかったので出来そうな方法を採りました．

以下の画像が大まかな処理の流れです．
<div align="center">
<img width=500 alt=process.png src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624506/8b77fd5b-0799-80ed-c05c-bf7e8315291f.png>
</div>
GUI関連の処理をメインプロセスで，スクリプトの実行をサブプロセスで行うことで実現しています．この方法だと，メインプロセスとサブプロセス間のやり取りは標準出力で行う必要があるので，サブプロセスで処理した画像はバイナリ化してメインプロセスに渡されます．

# コード
重要な部分だけ拾ってみていきましょう．

まずはメインプロセスからサブプロセスに渡す部分です．

```python:main,py
    def select_script_dialog(self):
        """中略"""
        subprocess.run("python " + str(self.script_file_path) + " " + self.img_file_path)
        """後略"""
```
この関数はGUI上の「scriptを選ぶボタン」を押したら動くものです．Pythonの組み込み関数であるsubprocessを用いてスクリプトを実行することが出来ます．run関数に"python スクリプトファイルのパス 画像のパスを渡すことで「python」で，「スクリプト」を，コマンドライン引数として「画像のパス」を取って実行してくれます．

次にサブプロセスでの処理を見ます．

```python:test.py
import sys
from PIL import Image
import numpy as np

img_path = sys.argv[1]

im_gray = np.array(Image.open(img_path).convert('L'))
im_gray = np.stack([im_gray, im_gray, im_gray], -1)

np.save('tmp.npy', im_gray)
```
画像をグレースケールにしてnp.saveでバイナリ化して保存しています．画像処理の部分は自由に変えることが可能だと思われます．

処理された画像は以下のようにメインプロセスに渡され，表示させられます．

```python:main.py
    def select_script_dialog(self):
        """中略"""
        loaded_array = np.load('tmp.npy')
        h, w = loaded_array.shape[:2]
        qimg_format = QImage.Format_RGB888 if len(
            loaded_array.shape) == 3 else QImage.Format_Indexed8
        self.qimg = QImage(loaded_array.flatten(), w, h, qimg_format)

        self.set_image_on_viewer()
```

画像をndarray形式で読み取った後，QImage（pyQt5で表示可能な形式）に変換します．そして，それを表示する関数set_image_on_viewer()を実行しています．

なお，pyQt5の大部分は[この記事](https://qiita.com/koharite/items/de23ab1bf3f4c4d708ef)を参考にしました．

## 実際の画面
実際のソフトウェアの画面は以下のようになります．
![Image_view.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624506/5d361892-fc25-fc1b-5089-a62588209310.gif)
例外処理やUI周りは未完成です．

# 所感
確かにそれっぽいものはできたが，スクリプト内で扱えるものが標準入出力で扱えるものに限られるためコレジャナイ感が否めない．Blenderや商用のソフトウェアではそのあたりをどのように対処しているのか気になる．

# 参考
[Pythonで画像表示、お絵描き用のアプリケーション作りの解説](https://qiita.com/koharite/items/de23ab1bf3f4c4d708ef)（Qiita記事）
[OpenCVで読み込んだ画像(numpy.array)をQt5(QImage)で表示する](https://symfoware.blog.fc2.com/blog-entry-2302.html)（ブログ，Symfoware）
attr_accessorがあれば、attr_reader、attr_writerはいらない？

<h1>はじめに</h1>
インスタンス変数へのアクセサメソッド（読み書きのためのメソッド）について、学んだことをまとめます。
「attr_accessor？とりあえず、最初に書いとくお決まりの言葉でしょ。」という方は、ぜひご覧ください。

<h1>アクセサメソッド</h1>
３つのアクセサメソッドの特徴は以下のとおりです。

<h4>attr_reader</h4>
インスタンス変数への読み込みを行うためのメソッドを定義します。

<h4>attr_writer</h4>
インスタンス変数への書き込みを行うためのメソッドを定義します。

<h4>attr_accessor</h4>
インスタンス変数への書き込み、読み込みを行うためのメソッドを定義します。

<h3>アクセサメソッドを使わない場合</h3>

````ruby:attr.rb
class User
  def name=(name) #nameへの書き込みメソッド（セッター）を定義
    @name = name
  end

  def name #nameへの読み込みメソッド（ゲッター）を定義
    @name
  end

  def age=(age) #ageへの書き込みメソッド（セッター）を定義
    @age = age
  end

  def age #ageへの読み込みメソッド（ゲッター）を定義
    @age
  end

end

  user = User.new #Userクラスのインスタンスを作成

  user.name = "ruby太郎" #userにnameを書き込み
  user.age = 20 #userにageを書き込み

  puts "名前:#{user.name}" #userのnameを読み込んで出力
  puts "年齢:#{user.age}歳" #userのageを読み込んで出力

=> "名前：ruby太郎"
   "年齢：20歳"
```
<h3>attr_readerを使う場合</h3>
上記コードから読み込みメソッドの定義を削除し、以下のコードを追加します。

```
attr_reader :name, :age
```

<h3>attr_writerを使う場合</h3>
上記コードから書き込みメソッドの定義を削除し、以下のコードを追加します。

```
attr_writer :name, :age
```

<h3>上記反映後のコード</h3>
次のとおり、非常にスッキリとしました。

```ruby:attr.rb
class User
  attr_writer :name, :age
  attr_reader :name, :age
end

  user = User.new

  user.name = "ruby太郎"
  user.age = 20

  puts "名前:#{user.name}"
  puts "年齢:#{user.age}歳"

```

<h3>attr_accessorを使う場合</h3>
attr_accessorを使うと、読み書きのメソッドが同時に定義できるため、以下のとおりになります。


```ruby:attr.rb
class User
  attr_accessor :name, :age #ここを修正
end

  user = User.new

  user.name = "ruby太郎"
  user.age = 20

  puts "名前:#{user.name}"
  puts "年齢:#{user.age}歳"

```

<h3>attr_reader、attr_writerって必要？</h3>
さて、attr_accessorにより、読み書き同時に定義できるのであれば、attr_reader、attr_writerは必要なのでしょうか？

もちろん、必要です。

試しに、上記コードにinitializeメソッドを追加して初期値を設定してみます。

```ruby:attr.rb
class User
   attr_accessor :name, :age

  def initialize(name:, age:)
    @name = name
    @age = age
  end
end

  user = User.new(name: "ruby太郎", age: 20)

  puts "名前:#{user.name}"
  puts "年齢:#{user.age}歳"

```

このとき、年齢は歳をとれば変わる（上書きが必要）けど、名前は変わらない（上書きが不要）ということであれば、attr_accessorにより、名前の書き込みメソッドも定義しているというのは、予期せぬ動作の原因となります。
つまり、名前については、書き込みメソッドがない（上書きできない）ほうがよいということになります。

であるならば、先程のコードは以下のとおり、書き換えるほうがよいということになります。

```ruby:attr.rb
class User
  attr_reader :name
  attr_accessor :age

  def initialize(name:, age:)
    @name = name
    @age = age
  end
end

  user = User.new(name: "ruby太郎", age: 20)

  puts "名前:#{user.name}"
  puts "年齢:#{user.age}歳"

```

<h1>参考</h1>
https://docs.ruby-lang.org/ja/latest/method/Module/i/attr_reader.html
https://docs.ruby-lang.org/ja/latest/method/Module/i/attr_writer.html
https://docs.ruby-lang.org/ja/latest/method/Module/i/attr_accessor.html
カラーパレットを作る際、明暗の変化にあわせて色相も変える理由

## これは何

- UIを作るにあたって最初期にカラーパレットを整えておくと便利
- そしてカラーパレットを展開する際は、明度だけではなく色相も少しだけ変えてあげる方が自然に見えやすい
    - その理由をまとめた記事

## 色温度という概念

> 色温度（いろおんど、しきおんど、英語：color temperature）とは、ある光源が発している光の色を定量的な数値で表現する尺度（単位）である。単位には熱力学的温度の K（ケルビン） を用いる。 [色温度 - Wikipedia](https://ja.wikipedia.org/wiki/%E8%89%B2%E6%B8%A9%E5%BA%A6)

小難しい書き方ですが「光源によって光の色が変わるんだな」とだけ理解してもらえれば大丈夫です。

## 太陽の色温度

だいたい5~6000K。つまり、黄色。

理屈はともかく「太陽の光は黄色いんですよ」と言われたら「あーなんとなく分かる」と感じるのではないでしょうか？

## ナチュラルハーモニー

色彩学には「自然の中で、明るい場所の色は黄色く、暗い場所の色は青っぽい」という理屈があり、ナチュラルハーモニーと呼ばれます。
ナチュラルというだけあって、この理屈に沿えばだいたい自然に見えます。

### なぜ黄色→青色？

以下に示したような内容が絡み合っています。

- ものが固有色を持っていて、太陽の光（＝黄色い光）が当たるので、当たった箇所が黄色く見える
- 人間の目の錯覚として、光の色の逆側の色相を陰側に感じる
    - 黄色い光の陰に補色として青や紫を錯視する

説明はしましたが私自身詳細まで理解しているわけではありません。
もし間違いや補足などありましたら、コメントで指摘 or 編集リクエストをいただけると嬉しいです。

## 全部あわせて、明度+色相変化

テキストだけ読むより、ものを見た方が早いでしょう。

QiitaのVIカラーである`#55c500`を中心にして、明るい暗いを展開してみました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/5b7d7de0-7b7b-6118-e2f4-5611bcc16306.png)

7つのカラーチップがあるうち、真ん中が`#55c500`で、左にいくにつれて明るく、右にいくにつれて暗くしています。
また上段は明度の変化だけ、下段は明るい方を黄色く暗い方を青くしています。

上段もそこまで違和感があるわけではありませんが、若干くすんで見えるのではないでしょうか？
特に1番左にあるカラーチップ同士を見比べると分かりやすい気がします。

## まとめ

- 色の明度展開をするとき、色相も一緒に変わっている方が自然に見えやすい
    - 明るい方が黄色、暗い方が青色
- 色相を変化させず明度だけ変化させても悪くはないけど少し表情が乏しく見えるかもしれない
【Unity】PlayFabのリクエストをUniTaskを使って非同期処理する方法

PlayFabのリクエストって、同じプレイヤーに対して同じタイミングで行ってしまうと駄目じゃないですか？

なのでリクエストを送ったら、そのコールバックの中でまたリクエストを送って、そしてそのコールバックでまたリクエストを送って…と、コールバックに殺されそうになったので、どうにか非同期処理にできないかなー？と調べていたのですが、出てきた結果が思うようなものではありませんでした。

なんとかできないかなー…と悩んだ結果、かなり簡単な方法で実現することが出来たので、共有したいと思います。

必要なのはUniTaskのみ。

https://github.com/Cysharp/UniTask/releases

上記のリンクからUniTaskのUnityPackageをダウンロードしてインポートするだけです。

あとはリクエストを送りたいタイミングでこういうコードを書くだけです。

```C#
using PlayFab;
using PlayFab.ClientModels;
using Cysharp.Threading.Tasks;
public class Sample
{
    public async UniTask LogInSample()
    {
        var request = new LoginWithCustomIDRequest();
        request.CustomId = System.Guid.NewGuid().ToString();

        LoginResult result = null;
        PlayFabError error = null;

        PlayFabClientAPI.LoginWithCustomID(request, x => result = x, x => error = x);
        await new WaitUntil(() => result != null || error != null);

        if (result != null)
        {
            Debug.Log("ログインに成功しました");
        }
        else if (error != null)
        {
            Debug.Log("ログインに失敗しました");
        }
    }
}
```

やっていることは非常に簡単で、コールバックに入ってくる引数を、予め用意したresult、error変数に代入するようにして、それをWaitUntilでどちらかがnullじゃなくなるまで待機しているだけです。

これをするだけで上から下に流すように処理が書けて、可読性も上がるし、何より簡単に実装できるのでオススメです。
配列に格納されている async 関数を順番に実行したい

## 前哨

https://qiita.com/Real_analysis/items/11f3af652b4339fd1a00

## `for await` なんて便利な物があるではないか

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for-await...of

以下そのまま転載

```javascript
const asyncIterable = {
  [Symbol.asyncIterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return Promise.resolve({ value: this.i++, done: false });
        }

        return Promise.resolve({ done: true });
      }
    };
  }
};

(async function() {
   for await (let num of asyncIterable) {
     console.log(num);
   }
})();

// 0
// 1
// 2
```

つまり内部に `Promise` や `await` があるイテレータを `for` ループで回せる訳ですね。
とすれば配列にたくさん `Primise` ぶちこんで、こんなかんじに回してあげれば逐次実行できる訳です。

```javascript
// 関数を遅延実行できるようにする
lazyFunction = (f, ...args) => {
  return () => f(...args)
}

async executePromiseSerearize(ps) {
  const rs = []
  // ps を頭から実行するイテレータを作る
  const executer = async function*(ps){
    const _ps = [].concat(ps)
    while(_ps.length){
      const p = _ps.shift()
      yield await p()
    }
  }
  // イテレータを for of で実行
  for await(const r of executer(ps)){
    rs.push(r)
  }
  return rs
}

// 1秒後に n が出力されて n が帰ってくる
const hogehoge = (n) => new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log(n)
    resolve(n)
  }, 1000)
})

const ps = [1,2,3,4,5].map(n => lazyFunction(hogehoge, n))

!(async () => {
  res = await executePromiseSerearize(ps)
  console.log(res)
})()
// 1 から 5 が1秒毎に出力されて最後に配列が出る
```

## でも eslint では非推奨

https://eslint.org/docs/rules/no-await-in-loop

書いてある事をざっくり言うと __「なんで `async` でプロセスが並列で処理できるのに逐次実行しようとするの？？なんで時間の無駄遣いをしようとするの？？バカなの？？＊ぬの？？？:angry::angry::angry::angry:」__

という事ですが……例えばさぁ……WEBスクレイピングするのに何万ページ一気に開いてアクセスするとか……もうDDoS攻撃レベルじゃないですか……

## というわけで

非推奨の物でも、使わなきゃいけない事がある。おします。
RailsとMySQL5.7を使ったアプリでDISTINCTで重複を削除した後にORDERクエリ使ったところエラーが発生した

## きっかけ

SNS的なWebアプリを作成しており、投稿一覧ページで最新の投稿を一番上に表示させるために、postテーブルのcreated_atをキーにORDERクエリを実行したところ下記のエラーが発生した。

```ブラウザ.web
Mysql2::Error: Expression #1 of 
ORDER BY clause is not in SELECT list, references column 
'app_name_development.posts.created_at' which is not in SELECT list;this is incompatible with 
DISTINCT: SELECT DISTINCT posts.id FROM `posts` WHERE `posts`.`body` LIKE '%うま%' ORDER BY `posts`.`created_at` DESC
```



```posts_controller.rb
@posts = @q.result(distinct: true).order(created_at: :desc)
```

## 環境
ruby:2.7.2
Rails 5.2.5
mysql:5.7
開発環境： Docker


## 原因
どうやらMySQL5.7から`sql_mode,'ONLY_FULL_GROUP_BY`という設定が追加されたことが原因となっているらしい。



## 解決方法
解決方法としては2つあるらしい。

#### 解決方法1
影響するSQL文を変える



#### 解決方法2
MySQLの設定を変える



今回の場合は投稿の一覧の順番を変えるだけだったので、created_atではなくテーブルのidでORDERクエリを使うことで同じような動きはしてくれたが、今後のことも考えてMySQLの設定を変えることにしました。


## こうしたらいけた

```docker-compose.yml
db:
    image: mysql:5.7
    # ONLY_FULL_GROUP_BYを回避するために追加
    command: #追加
      - --sql-mode=NO_ENGINE_SUBSTITUTION #追加
```

#### ビルドするとORDERクエリを無事に使えるようになった！！！





## 参考URL

https://qiita.com/hidetoshi-tsubaki/items/046d16ab46d954c55a40

https://qiita.com/masayuki14/items/3aa199035eb4fdcfa446%20#
[Ruby]メソッドが定義されているクラスを調べる方法

##環境
Ruby 2.6.2

##本題
Rubyではメソッドはクラスまたはモジュール内に定義されています。
呼び出したメソッドがどのクラスで定義されているか知りたいとき、は`owner`メソッドを使って調べることができます。

`owner`メソッドはRubyの`Method`クラスに定義されているインスタンスメソッドです。
メソッドを定義しているクラスかモジュールを返します。

## 実践

```
12.method(:to_i).owner #=> Integer

[1,2,3].method(:join).owner #=> Array

1.23456.method(:round).owner #=> Float
```

自作のクラス場合以下のようになります。

```
class Hoge
 def hoge

 end
end

h = Hoge.new

h.method(:hoge).owner
#=> Hoge
```

## 参考
[リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/class/Method.html#I_OWNER)
DjangoでDatabase is uninitialized and superuser password is not specified.となった

###環境
- wsl
- docker
- docker-compose
- postgresql
- django

### エラーメッセージ
>Database is uninitialized and superuser password is not specified.
db_1   |        You must specify POSTGRES_PASSWORD to a non-empty value for the
db_1   |        superuser. For example, "-e POSTGRES_PASSWORD=password" on "docker run".
db_1   | 
db_1   |        You may also use "POSTGRES_HOST_AUTH_METHOD=trust" to allow all
db_1   |        connections without a password. This is *not* recommended.


POSTGRES_HOST_AUTH_METHODという環境変数をtrustとすれば一応できるみたいなので

#解決法
docker-compose.ymlを

    db:
        image: postgres
        environment:
            - POSTGRES_HOST_AUTH_METHOD=trust

のようにしました。
本来はパスワードを設定するべきのようですね。

#参考文献
https://qiita.com/tomopict/items/23cc4332781bb28d2973
[CSS] なぜタグに対してスタイルを当ててはいけないか

CSS で「タグに対してスタイルを当てず、クラスに対してスタイルを当てる」という規約をよく聞くと思いますが、その理由は理解しているでしょうか？

この記事では、なぜタグに対してスタイルを当てるのが駄目か解説したいと思います。

## この記事を理解するために必要な前提知識

+ CSSの詳細度に関する理解

詳細度がわからないという方は解説記事が色々あるため、理解できそうな記事を探して一度読んでみましょう。

## 結論

タグに対してスタイルを当てると、コンポーネントのスタイルにまで影響を与えてしまう可能性があるからです。

## 具体例

[例1](https://codesandbox.io/embed/whytagstyleisforbidden-9cv78?fontsize=14&hidenavigation=1&initialpath=%2Fexample_01%2Findex.html&module=%2Fexample_01%2Findex.html&theme=dark)

上の例のように、ナビのクラス `.nav-list` が `ul` に対して指定されており、ナビに関連するスタイルが `li` と `a` タグに対して直接指定されているとします。  
今回の例では、汎用コンポーネントとして `c-button` も定義されています。

この例1の時点では問題ないように見えますね。

次に、「ナビにログインボタンを追加したい。ログインボタンは目立たせたいので他と差別化するために汎用ボタンコンポーネントを使ってほしい」という要望が来たとします。

その場合以下のように実装しようとするはずです。

[例2](https://codesandbox.io/embed/whytagstyleisforbidden-9cv78?fontsize=14&hidenavigation=1&initialpath=%2Fexample_02%2Findex.html&module=%2Fexample_02%2Findex.html&theme=dark)

汎用ボタンコンポーネントを使ったはずが、見た目が全然違いますね。背景色が違いますし、左右の余白も全然短いです。

これは何故かと言うと、 `.c-button` のスタイル指定より、 `ul.nav-list > li > a` のスタイル指定の方が詳細度が高いため `.c-button` のスタイル指定が打ち消されてしまったからです。

今回のように、ナビのaタグに対して直接スタイルを当ててしまうと、aタグを使用したい汎用コンポーネントのスタイルにも影響が出てきてしまいます。  
これがタグに対してスタイルを当ててはいけない理由です。

## どうすればよかったか

[例3](https://codesandbox.io/embed/whytagstyleisforbidden-9cv78?fontsize=14&hidenavigation=1&initialpath=%2Fexample_03%2Findex.html&module=%2Fexample_03%2Findex.html&theme=dark)

今回の例の場合、上のようにタグに対してスタイルを当てるのでなく、全てクラスを付与してそれに対してスタイルを当てればボタンコンポーネントも本来の見た目で表示されます。

## まとめ

「タグに対してスタイルを当てず、クラスに対してスタイルを当てる」という規約はこういう問題を防ぐためのものです。  
この規約に違反すると、折角汎用的に作られたコンポーネントが全然使えなくなってしまいますので注意しましょう。
MLB関係のデータの選手ID(playerID)一覧

自分の記録用に。


2022/2/19追記
現在はこちらを活用している。
https://github.com/chadwickbureau
上記サイトにあるregisterをzip形式でダウンロード
↓
dataフォルダにあるpeople.csvを使う。
こちらの場合でもretrosheetやfangraphsのIDとの紐づけが可能なようだ。こっちのほうが漏れはなさそう。確認はしていない。

```R:data.R
library(tidyverse)
statcast <- read_csv("statcast_data.csv") #ダウンロードしたstatcastデータ
ID <- read_csv("people.csv")

ID <- ID %>%
  select(key_mlbam, name_last, name_first) %>%
  mutate(name_full = paste(name_first, name_last, sep = " ")) %>%
  select(key_mlbam, name_full)

statcast <- statcast %>%
  left_join(ID, by = c("batter" = "key_mlbam"))
```

2021/6/29作成

baseballrなどを活用してstatcastのデータを収集した際、選手のデータはplayerIDなるもので記録されている。
例えば、AJ Pollockは572041。この数値はMLB.comやbaseballsavantの選手個人のページのURLにも活用されている。

ただ、Rなどで解析するときに選手IDではどの選手を示しているのかわからない。
そのような時に照合してくれるのがSmartFantasyBaseballというサイト
https://www.smartfantasybaseball.com/tools/

ここでダウンロードできるエクセルファイルやcsvには全選手の選手IDと選手名が照合できるようになっている。
また、MLB.comやbaseballsavantの選手IDだけでなく、yahooなどの選手IDにも対応しているらしい。自分はstatcastのデータ収集にしか使わないので詳細は調べていない。
そして、最大の問題点は、全ての選手に対応しきれていないということ。例えば田中賢介とかは入っていない。


>DOES THE PLAYER ID MAP INCLUDE ALL MLB PLAYERS?
No. The tool is intended to be used for fantasy baseball purposes. Accordingly, the goal is to include only “fantasy relevant” players. That’s a purposely vague threshold. In the preseason, I generally keep the top 750ish players accordingly to NFBC ADP included in the Player ID Map. This should be enough players to cover most normal leagues. It’s possible the Player ID Map will not be deep enough for your 20-team NL-only league, your AL Central-only league, or your middle-reliever contest. Keep reading for advice on how to get more players added to the Player ID Map.

とのこと。解析とかする時は基本的にIDでフィルタリングやグルーピングをして、グラフ化時のラベル付けにこの対応表を使うといいかも。

statcastから取得したデータをstatcast.csv、
上記サイトで取得したデータをID.csv
と保存した時、statcastデータのIDに対応した選手名の行を追加するときのRのコードは以下の通り


```R:data.R
statcast <- read_csv("statcast.csv") %>%
  select(-X1)

ID <- read_csv("ID.csv") %>%
  select(MLBID, MLBNAME)
statcast %>%
  left_join(ID, by =c("batter" = "MLBID")) %>%
  rename(BatterID = MLBNAME) -> statcast_ID
```

事例として、2017年のstatcastデータを集計し、打者別にx軸にフライ打球数、y軸にゴロ打球数をプロットする。そしてフライ打球数が250以上、ゴロ打球数が100以下のプロットに名前をラベル付け事例を書いてみる。(上のコードの続きで記載する)

```R:data.R
library(ggplot2)
statcast_ID %>%
  filter(type == "X") %>%
  group_by(batter, bb_type) %>%
  summarize(n = n()) %>%
  pivot_wider(names_from="bb_type", 
  values_from="n", values_fill = 0) -> player_bb
player_bb %>%
  left_join(ID, by = c("batter" = "MLBID") )-> player_bb2

library(ggrepel)
ggplot(player_bb2, aes(x = fly_ball, y = ground_ball, label = MLBNAME)) + geom_point() +
  geom_text_repel(data = filter(player_bb2, ground_ball > 270, fly_ball<100),
                  aes(fly_ball, ground_ball, label = MLBNAME))
```

pivot_widerは便利
既存ディレクトにあるgitとディレクト内のプロジェクトにある別gitの統一 [忘却録]

忘却録です
参考になれば幸いです。適当に記事のタイトルを決めて分かりづらいと思いますが自分の言葉の引き出しが少なすぎてこれが限界です。適切な言葉があればコメントで教えてください。


## 内容
既存ディレクトAとA内に新規で作ったプロジェクトBにはそれぞれ独立したbranchで管理されている。このブランチは同じgitで管理はされていない。

##　対処
まずB内のbranchを消す
`rm -rf .git`
そしたらディレクトAのbranchがBを管理してくれるようになった（自分の場合）
ディレクトAに戻り、AのbranchからPushすれば統一されていた。
[Angular] PDF-LIBを利用して、PDFファイルに印影（スタンプ）画像を埋め込むサンプルプログラム

# これはなに？

[PDF-LIB](https://pdf-lib.js.org/)を利用して、PDFファイルにPNG画像を埋め込むサンプルプログラムです。

![pdf-lib-stamp.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59475/b9108131-b439-1ca2-8e7c-173c95801850.gif)

クリックした位置にPNGを追加しています。[保存]ボタンクリックで、PDFファイルを出力します。

# やっていること

1. [PDF.JS](https://mozilla.github.io/pdf.js/)を利用して、PDFファイルを表示
1. PDF-LIBを利用して、マウスクリック位置にPNG画像を追加
1. PDF-JSを利用して再描画
1. 保存ボタンクリック時、PDFをBLOBにして別ウィンドウに表示

# プログラム

https://github.com/sengokyu/ex.angular-pdfjs/tree/pngstamp に置きました。

肝となるのはこちらのメソッドです。`PDFDocument`インスタンスを作ったあと、ページを取得し、ページ内に画像を描画しています。

```ts
  private async saveStamp(pos: position): Promise<void> {
    const buf = await this.pdfBlob?.arrayBuffer();
    const pdfDoc = await PDFDocument.load(buf!);
    const pngImage = await pdfDoc.embedPng(this.stampPngBuf!);
    const page = pdfDoc.getPage(0);

    pngImage.scale(1);
    page.drawImage(pngImage, {
      x: pos.left,
      // PDFは原点が左下のため、計算し直しています。
      y: page.getHeight() - pos.top - STAMP_SIZE,
      width: STAMP_SIZE,
      height: STAMP_SIZE,
    });

    const newBuf = await pdfDoc.save();
    this.pdfBlob = new Blob([newBuf], { type: 'application/pdf' });
    await this.renderPdf(1, 1);
    this.updateBlobUrl();
  }
```


# KNOWN ISSUE

* ObjectURLを作ったあと、メモリ解放していません。
Unicornについて簡単にまとめてみた

調べるとどんどん深みにハマっていきます。それは決して悪い事ではなく、知識が増え、理解が深まり、自分でコントールできる範囲が増える事に、高揚感を覚えます。ただ掘れば掘るほど分からないことは出てくるので、一度区切りとして、自分の言葉でここにまとめておきます。

この記事ではNginxとUnicornを用いて、Rails専用のWebサーバーを立てる為に、それぞれの役割などを理解する過程で得た情報をまとめています。具体的な実装方法や設定などについては記載しません。
また記事内では曖昧で抽象的な表現が見受けられると思いますが、それは現状ではそのような表現以上の理解が進んでいない為です（ダサい）。

この記事における主な目的は以下の通りです。

1. Nginx × Unicorn × Rails においてUnicornが必要な理由
2. NginxとUnicornの補完関係の概要

### 参考

https://techracho.bpsinc.jp/piichan1031/2010_07_09/2075

https://www.autovice.jp/articles/146

https://chopesu.com/programing/aws環境構築-nginxとunicornの導入の目的を自分なりにメモ/

## Unicorn

### Rack

まずUnicornの理解の前に、**Rack**というアプリケーションサーバーに関して軽く触れておきます。

RackとはRubyで作られたフレームワーク（Railsやsinatra）とWebサーバーを繋ぐためのアプリケーションサーバーです。WebサーバーからのリクエストをRailsに伝え、そのレスポンスをwebサーバーへ返す仲介役を担います。

### Unicornの概要とその特徴

Unicornは、Rack専用のWebサーバーです。Webサーバーである為、Nginxを利用せずともクライアン（iPhoneなど）からのリクエストに対し、Unicorn単体でレスポンスを返すことは可能です。

しかし、Unicornでは「ブロッキングI/Oモデル」で実行されているため、クライアントからのリクエストを非同期で処理することができません（ここからが怪しい）。
あるユーザーが不安定な通信環境（3Gなど）でリクエストしてきた場合、その処理が終了するまでは、それ以外のリクエストに対応できなくなります。2つのワーカープロセスが存在していても、重い処理が終わるまでは、その他のリクエストに対し、実質1つのワーカープロセスで対応する状況になってしまいます。

#### ブロッキングI/Oモデル

I/O処理時に対象が準備完了になるまで待機し続けること。（ここに関しては理解を深める必要あり。

### Unicornの動作

上で既に触れましたが、Unicornではマルチプロセスによるclusterではなく、forkを用いたmaster-slaveというアーキテクチャを採用しており、マスタープロセスとワーカープロセスという概念があります。

マスターはアプリケーションのインスタンスを持つ唯一のプロセスで、複数のワーカープロセスを生成し、所有します。マスタープロセスがワーカープロセスを生成することをフォークと呼びます。
つまりUnicornにおいて処理を裁いているのは、マスタープロセスをフォークしたワーカープロセスが処理しています。
Unicornの設定は大別して「変数の設定」と「フォーク前後の処理」に分けられます。これに関しては、参考記事の2つ目が詳しく解説しています。

### 何故Nginxが必要か

NginxもWebサーバーの一つです。Nginx × Unicornはどちらもwebサーバーです。
なぜNginxを用いるかと言うと、先ほど説明したブロッキングI/Oモデルを採用した大量のアクセスを裁く事が苦手なUnicornに対し、Nginxはイベント駆動型モデルを採用しており、大量のアクセスを裁く事が得意である特徴を所持しています。

この事から大量のアクセスが苦手なUnicornに対し、高負荷に対応できるNginxを補完した2つのWebサーバーを用いる事で、
クライアント　⇄　Webサーバー（Nginx × Unicorn）　⇄　Rails

という構図を実現しているのです（多分）。

### 他に何の理解が必要か

それぞれのwebサーバーのアーキテクチャ（？）・特徴に関しての理解が必要であると考えています。
I/Oモデルやイベント駆動型、これらの理解にはLinuxの理解などが必要であり、中々苦戦しています。（同時に面白くもありますが...）

まだまだ知識不足ですが、最後までお読み頂き、ありがとうございました。
間違い等ご指摘いただけると幸いです。
Reactでroutingを設定する


#Reactでのルーティングの設定方法

react-router-domを使用して、ルーティングを設定します。

##BrowerRouter
react-router-domの機能を使用するためには、使用するコード全体を<BrowserRouter></BrowserRouter>で囲う必要があります。


```
return (
 <BrowerRouter>
  ・・・
</BrowerRouter>
);

```

##Link
react-router-domのLinkを使うと、Linkで囲った子要素を押下して特定のパスのページを開く機能を実装できます。

```
import {Link} from "react-router-dom";

const example = () => {
 return (
  <BrowerRouter>
     <Link to="パスの入力位置">移動</Link>
  </BrowerRouter>
);
}
```
上記の場合、画面に移動というリンクが表示されているので、押下すると入力位置に入力したパスのページを開きます。

##Route
react-router-domのRouteを使うと、どのパスにページが対応しているかを設定できます。

```
import {Route} from "react-router-dom";
import {Home} from "Home.tsxのファイルのパスを入力"

const example = () => {
 return (
  <BrowerRouter>
     <Route path="/home">
        <Home/>
     </Route>
  </BrowerRouter>
);
}
```

上記の場合、/homeというパスをurlに指定したり、/homeを先程のLinkのtoの引数に渡した状態で、その子要素を押下したとき、Home.tsxファイルの画面に遷移します。

##Switch
react-router-domのSwitchは、基本的に複数のRouteを設定するときに<Switch></Switch>で囲みます。
(なくても動作するそうですが。)

```
import {Switch} from "react-router-dom";
import {Home} from "Home.tsxのファイルのパスを入力"
import {Page1} from "Page1.tsxのファイルのパスを入力"

const example = () => {
 return (
  <BrowerRouter>
   <Switch>
     <Route path="/home">
        <Home/>
     </Route>
     <Route path="/page1">
        <Page1 />
     </Route>
   <Switch>
  </BrowerRouter>
);
}
```

#まとめ
Reactのルーティングの設定の、基礎の基礎だけですが、紹介させていただきました。
何かの参考になれば幸いです。
ワールドにUdonでかんたんなギミックを設定したいがお勉強が嫌いな人向けの記事

集え勉強嫌い&三日坊主勢

## ええい記事を読むのも煩わしい結末だけ教えろ

- ***boothにあるギミック集を探して入れよう***。よく使われるギミックはけっこうある
- 探しても見つからないときはTwitterで質問してみると運良く拾われて回答が帰ってくるかもしれない
- 一応、いくつかのやり方については下に私の回答だけ書いておいたのでよかったら見て

## about

### なにこれ

VRChatのSDK3.0を使ったワールド作成において、手っ取り早く鏡をオンオフしたい、ドア開けたりワープしたりしたいとかとか、基本的だが作るのにUdonの勉強をしなきゃいけない...ときの記事です  

- とりあえず自宅ワールドを作りたい。見た目は作ったが、ドアが開かないのは違和感ある
- 雰囲気重視のワールドを作ったが、広すぎて移動が大変。ワープできればいいんだが…
- とかとか、ワールドの内容とやりたいことに対してUdonの学習コストが高すぎると感じる場合の記事

## 方針

- 目的達成できれば良し。方法は(非合法じゃない限り)問わない。最速を目指すぞ。
- ソースコードとGraphは可能な限り触らない
- わかってそうなことはひたすら端折って書く

## Udon(というかU#)を導入する

### 最新のSDKを入れてリスポーン設定して床作るとこまでやっといてください

- この辺は割と記事あるからそっち参考にしてね

### U#を入れる

- [U#Github](https://github.com/MerlinVR/UdonSharp)から最新版unitypackageをダウンロード
- プロジェクトにインポートする

## ギミックを入れる

- 使ったツールとか、設定とか...

### スイッチ類(オンオフ系)

- インポートする → [[無料版あり] VRchat向け 基本的でシンプルなUDONギミック](https://booth.pm/ja/items/2218271)
- このギミック集が優秀なので…説明書を読もうね

#### ユーザーが操作したら動作する

- 説明書のシンプルスイッチを読んでSimpleSwitchをセットアップする 
- あとはInspectorのUdon Behabiourを見ればだいたい分かる

#### ~~ユーザーが"触ったら"動作する~~ソースコードいじることになりそうなのでパス

- 説明書のシンプルスイッチを読んでAreaSwitchをセットアップする
- これだけだと近づいただけで動作するので、参照先のコライダーのサイズをいじっていい具合に調整する
- と、できるかなって思ったけど、ユーザーの位置情報を参照しているようで、自分の中心が判定に入らないと動かない。
- 一旦パス

### ドアの開閉

- [【VRC U#】DoorSystem（ドア開閉機構）](https://booth.pm/ja/items/2733172)

### ワープする

- インポートする → [[無料版あり] VRchat向け 基本的でシンプルなUDONギミック](https://booth.pm/ja/items/2218271)
- 説明書のテレポートする扉を読んでセットアップする
- ワープ先には任意のオブジェクトか、CreateEnptyでGameObjectをつくってワープさせたい場所に設置→
toPointに指定してやる
- GameObjectは床よりちょっと上に配置するといいかもしれない
- この機能を別の、すでにあるドアとかにつけるときは
    - コライダーをAdd Component
    - isTriggerにチェック
    - Udon BehaviourをAdd Component
    - Program SourceにOnTriggerPlayerTeleportを設定
    - toPointを設定

### 文字を表示する

- Unityの機能のTextMeshProを使えば良い
- UnityのWindowメニュー内にTestMeshProの項目があるので、その中のImport~をやるとTMPのアセット？がはいる
- Hierarchyで右クリック→3D Object→Text - TextMeshProで生成できる
- 使い方は他記事に任せる

### ものを持てるようにする

- 持ち上げたいものにVRCPickupをつける
- 設定に関してはおいおい

### 以下追記中...

## その他

### 210628追記

この記事を書いている途中、書いたあとも拡散されたツイートにツールとかハウツーが引用とかリプで飛んできました

~~どうして僕が探したときは出てこなかったんだ~~

ので、発端になったツイートをたどってみていただければ、他にも有用な情報が手に入ると思います。

### タイムライン

https://twitter.com/notika_VRC/status/1408648370504179712?s=20

二郎の待ち行列の中、空腹で気の狂った頭で書いたボヤキが伸びるなんて…

https://twitter.com/notika_VRC/status/1408649352835342340?s=20

https://twitter.com/notika_VRC/status/1408809128412151814?s=20

責任は自分で取ります...

リプライを見るとわかりますが、親切な方がいろいろアセットとか記事とか教えてくれた。~~ので、みんなもTwitterで聞いてみよう。~~

### 自己紹介

- **のちかるが**　もしくは　**れいめん**
- 勉強嫌い、死ぬほど嫌い。Unityのゲーム作るチュートリアルやってみたが三日坊主で終わった
- 英語は読めない。目指せTOEIC300点
- 本業はセキュリティとpython
PyAtomDB を google Colab で簡単に動かす方法

# はじめに

[PyAtomDB](https://atomdb.readthedocs.io/en/master/) とは、[AtomDB](http://www.atomdb.org) という宇宙物理向けの原子物理データベースです。これはとっても便利なツールなのですが、パソコンが変わるたびに環境を構築するのが面倒、という人向けに、google Colab で、[PyAtomDB example scripts](https://atomdb.readthedocs.io/en/master/examples.html) を動かす例を紹介します。

コードを読めばわかる人は、

**PyAtomDB を google Colab で動かした例のColabのページ**

https://colab.research.google.com/drive/1R0MqIIfjehnilOnKXPE9Dr7PXneAPYx6?usp=sharing

を参照ください。出力結果は、

- [PyAtomDB を google Colab で動かした例のColabのPDFファイル](https://drive.google.com/file/d/15Sjs59HUuMkB2_uj4McNUwN5vC_Uv9ay/view?usp=sharing)

をご覧ください。

# セットアップの概要解説

## 環境変数の設定

自分のgoogle Drive、google Colab 上では、/content/drive/MyDrive/ としてマウントされている。自分のgoogle Drive に atomdb というディレクトリを作成する。　その場所(/content/drive/MyDrive/atomdb)を環境変数ATOMDBが参照するように設定する。

Colabのマウントって何？という方は、[ColaboratoryでのGoogle Driveへのマウントが簡単になっていたお話](https://qiita.com/kado_u/items/45b76f9a6f920bf0f786) を一読ください。

``` python:
!export ATOMDB=/content/drive/MyDrive/atomdb
```

google Colab は、bashが動いているが、shコマンドで変数などを設定するときは、!を初めにつける必要がある。(ちなみに、移動するときは、%cd のように %が先頭に着くことには注意。)

## データのダウンロード

[PyAtomDB example scripts](https://atomdb.readthedocs.io/en/master/examples.html) は、Chandra衛星の
cycle22 の CALDB を使う例になっているが、これを持ってない場合は、

``` bash:
!wget https://cxc.cfa.harvard.edu/caldb/prop_plan/grating/CY23/aciss_meg1_cy23.grmf
!wget https://cxc.cfa.harvard.edu/caldb/prop_plan/grating/CY23/aciss_meg1_cy23.garf
``` 

を実行して、cycle23のデータをダウンロードしておこう(2021.6.28の話)。以下、rmf (検出器応答の行列成分) と arf (有効面積のベクトル成分) は、これらのファイルを使う設定とする。

## データベースのファイルのダウンロード

一番最初にexampleを動かす時に、ファイルをダウンロードする。

``` bash:
ATOMDB environment variable not set. Set up AtomDB files now? (yes/no/info) [yes]yes
Location to install AtomDB files [/root/atomdb] :/content/drive/MyDrive/atomdb
Allow reporting of anonymous usage statistics (yes/no/info) [yes]no
You are about to install:
AtomDB installation location: /content/drive/MyDrive/atomdb
Transmit anonymous user data: no
Randomly generated userid: 00000000
Is this ok? (y/n) [y]y
Temporarily setting $ATOMDB environment variable to /content/drive/MyDrive/atomdb.  It is *strongly* recommended that you add this to your environment   permanently.
creating directory /content/drive/MyDrive/atomdb ...done
creating user data file /content/drive/MyDrive/atomdb/userdata ...done
finding current version of AtomDB.  Latest version is 3.0.9
Do you wish to download the emissivity data for these files (recommended)? (y/n) [y]y
making directory /content/drive/MyDrive/atomdb/installtmp

Uncompressing ...  Uncompressed
...
```

「AtomDB installation location: /content/drive/MyDrive/atomdb」　のように、自分のgoogle drive 上の atomdb ディレクトリが設定されていることを確認しよう。

## 図の出力

colab上では、plt.show(), plot.draw() のタイミングが、ローカルと違う場合があるので、図がでない??と思ったら、show のタイミングや、ax, plt.figure の初期化などを微調節しよう。
TypeORM+Expressjsでお手軽バックエンドサーバ構築

#ソースコードはこちら

TypeORM+ExpressでMySQLに接続するRESTAPIを作成してみました。

https://github.com/shoma-mano/typeORMwithExpress

#実行手順
```shell:
docker compose up
npm i
npm run start
```

#ファイル構成

```:ファイル構成
.
├── src
│   ├── entity
│   │   └── User.ts
│   └── index.ts
├── docker
│   ├── data
│   └── my.cnf
├── docker-compose.yml
├── ormconfig.json
├── package-lock.json
├── package.json
└── tsconfig.json
```
typeorm initで作成したものをベースとしています。

https://typeorm.io/#/

#index.ts
```typescript:index.ts
import "reflect-metadata";
import {getConnectionOptions, createConnection, BaseEntity, getManager} from 'typeorm'
import {User} from "./entity/User";
import * as express from 'express'


let app = async () => {
    const app= express();
    const connection = await createConnection()
    const manager = await getManager();
    app.get('/', async (req, res) => {
        const user = new User()
        user.firstName = 'Qiita'
        user.lastName = "test"
        user.age=25
        user.name="test"
        await manager.save(user)
        const users = await manager.findOne(User,1);
        res.send(users)
    })
    app.listen(3000, () => console.log('Example app listening on port 3000!'))
}
app();
```
localhost:3000にアクセスするたびにuserが増えていきます。
reflect-metadataに関してはこちらの記事が参考になります。

https://kakkoyakakko2.hatenablog.com/entry/2019/12/29/003000

#User.ts
```typescript:User.ts
import {Entity, PrimaryGeneratedColumn, Column} from "typeorm";

@Entity()
export class User {

    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    firstName: string;

    @Column()
    lastName: string;

    @Column()
    age: number;

    @Column()
    name: string;

}
```
テーブル定義はこのファイルで行います。

#ormconfig.json
```json:ormconfig.json:
{
   "type": "mysql",
   "host": "127.0.0.1",
   "port": 3308,
   "username": "root",
   "password": "root",
   "database": "test_database",
   "synchronize": true,
   "logging": false,
   "entities": [
      "src/entity/**/*.ts"
   ],
   "migrations": [
      "src/migration/**/*.ts"
   ],
   "subscribers": [
      "src/subscriber/**/*.ts"
   ],
   "cli": {
      "entitiesDir": "src/entity",
      "migrationsDir": "src/migration",
      "subscribersDir": "src/subscriber"
   }
}
```
**"synchronize": true**を設定する事によって、マイグレーションをしなくてもAPIを叩いたときにユーザーテーブルが自動に作成されます。開発時には便利ですが、本番環境ではfalseが推奨されています。

#docker-compose.yml
```yaml:docker-compose.yml
services:
  # MySQL
  db:
    image: mysql:5.7
    container_name: mysql_host
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test_database
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/data:/var/lib/mysql
      - ./docker/my.cnf:/etc/mysql/conf.d/my.cnf
    ports:
      - 3308:3306
```
MySQL用のdocker-composeファイルです。
#まとめ
多分これが一番お手軽だと思います。
残プロ　第-26回　~flaskでhtmlから配列を受け取る~

# 変数の受け渡し

flaskはrouteを設定することで変数を受け取ることができました．

~~~ python:
@app.route('/<string:message>')
~~~

上記の例だと文字列型のmessageを受け取っています．

しかし，残念ながら配列はこの方法で受け取ることはできません．


# 正解：文字列として受け取る

配列を**文字列として受け取り**，正規表現を使って**配列に変換**することで，配列の受け取りが可能になります．

~~~ html:.html
<a href="{{ url_for('list_pass', l="[1,2,3,4,5]") }}>配列渡す</a>
~~~

~~~ python:.py
@app.route('/list_pass/<string:l>')
def list_get(l):
    l = re.sub('(\[|\'|\]|\s)', '', l).split(',')
    print(l) # ['1', '2', '3', '4', '5']
~~~
草野球の出欠確認Webアプリを作ろう！　part.13

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

[<<前回の記事](https://qiita.com/tomodachi_uec/items/cb877de04924d974c4bb)

##今回やったこと

今回はページヘッダーを作成したい。

###ヘッダーの作成

まずヘッダーのレイアウトを作成する。

```bash
$ touch app/views/layouts/_header.html.erb
```

最初のヘッダーの中身はこんな感じ。

```erb:app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "yaQue", root_path, id: "logo" %>
    <nav>
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="<%= root_path %>">Home</a>
          <a class="dropdown-item" href="<%= schedules_path %>">Schedules</a>
          <a class="dropdown-item" href="<%= users_path %>">Users</a>
        </div>
      </div>
    </nav>
  </div>
</header>
```

`application.html.erb`に反映するのも忘れない。

```erb:app/views/layouts/application.html.erb
（略）
<body>
  <%= render 'layouts/header' %>
    
  <%= yield %>
</body>
（略）
```

なんかドロップダウンリストがはたらかない...。
[いろいろな記事](https://www.tmp1024.com/use-bootstrap-of-rails6-0/)を探して、どうやら環境が悪いらしいことが分かった（ふわふわ理解）。
なのでまずは`popper.js`をインストールする。

```bash
$ yarn add popper.js
```

ここから試行錯誤したが、どうも以下の部分だけはローカルのみではいかんともしがたい状態だった。
そのため本末転倒ではあるが、以下のようにwebから一部取得していくことにした。

```erb:app/views/layouts/application.html.erb
（略）
<head>
（略）
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
（略）
```

これにより、以下のようにスタイルが未実装なヘッダーができた。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/092faaf2-761f-af53-b198-bcfc0ba18f4a.png)

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/ad3e8a23-f288-83c0-5f41-624fe596e51b.png)


今日はここまで。
だんだんわからないことが増えてきて手が止まる時間が長くなってきた。
そういった部分はできるだけ回避しながらやっていきたい。（まず動く、これが大事）


<!--
[次回の記事>>](https://qiita.com/tomodachi_uec/items/5d6181434bd241760eaa)
-->
改：Rとggplot（バープロット）

barplot() を使うだけだが。

```R 
library(datarium)
barplot(by(jobsatisfaction$score, jobsatisfaction$education_level,mean),
  xlab="education level", ylab="score", col="#0000aa50")
```
![Rplot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1653782/6f913aab-0f82-0152-17c3-d43f4aababd5.png)
【Flutter】Could not determine the dependencies of task ':app:compileDebugJavaWithJavac' のエラー対処方法



## この記事について
udemyのコースで、Flutterの勉強をしている際に、パッケージの依存関係で、詰まってしまった箇所があったので、その時の解決方法を残します。

## 環境

windows 10
## エラー内容

エラーは以下のような内容になります。

```
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
 In project 'app' a resolved Google Play services library dependency depends on another at an exact version (e.g. "[19.1.
  0]", but isn't being resolved to that version. Behavior exhibited by the library will be unknown.

  Dependency failing: com.google.android.gms:play-services-vision-image-label:18.0.4 -> com.google.android.gms:play-servic
  es-vision-common@[19.1.0], but play-services-vision-common version was 19.1.1.
(省略)
```

## 原因
エラー内容を見ると書いてあるのですが、
 `play-services-vision-image-label:18.0.4` のパッケージが `play-services-vision-common`の19.1.0を使おうとしているのに、現在のバージョンが19.1.1で、ズレがあるということでエラーになっているようです。

## 解決方法

エラー内容を順番に見てみると、教材のpubspec.yamlに追加していた。 `firebase_ml_vision` というのが、今回の教材で、新しく追加したパッケージの名前にあったので
このパッケージについて、調べてみる。

```
  -- Project 'app' depends onto com.google.firebase:firebase-ml-vision@{strictly 24.1.0}
  -- Project 'app' depends onto com.google.android.gms:play-services-vision-face-contour-internal@{strictly 16.0.0}       
  -- Project 'app' depends on project 'firebase_ml_vision' which depends onto com.google.firebase:firebase-ml-vision@20.0.
  0
```

以下のコマンドを実行すると、パッケージの状態を一覧表示できます。

``` 
flutter pub outdated
 ```  

```
C:\Flutter >flutter pub outdated
Showing outdated packages.
[*] indicates versions that are not the latest available.

Package Name                      Current    Upgradable  Resolvable  Latest   

direct dependencies:
camera                            *0.5.8+17  *0.5.8+17   0.8.1+3     0.8.1+3  
firebase_core                     *0.5.3     *0.5.3      1.3.0       1.3.0    
image_picker                      *0.6.7+22  *0.6.7+22   0.8.1+1     0.8.1+1  
(省略)
```

この中の `Resolvable` というのが、パッケージの依存関係を意識した最新バージョンになるので、pubspec.yamlのバージョンを一覧の通りに更新する。
Resolvable以外の意味については、参考にさせて頂いたリンクがあります。

あとは、pubspec.yamlを　`Resolvable` に記載のあったバージョンに更新したら、
私の場合、正常に稼働するようになりました。

## まとめ
２年前の僕だったら、エラーが出たら投げてたかもしれなかったですが、無事解決できて良かったです。
文章を書き慣れていないため、誤植などがありましたら、すいません。


## 参考にさせて頂いたリンク
[Flutter]バージョンアップする必要のあるパッケージを特定する方法（pub outdatedの使い方）
 https://minpro.net/flutter-pub-outdated
CentOS7ではデフォルトだとブロードキャストに対して返事をしてくれない件

# はじめに
LPIC201の勉強をしていて「Ｌinuxホストの場合カーネル変数net.ipv4.icmp_echo_ignore_broadcastsの値はSmurt対策としてデフォルトでは1に設定しており、ブロードキャストを無視する」
ということを知る。

一生懸命ブロードキャストを実行しても返事がないと思ったらそういうことかーー！
ということで検証する

# 前提条件
Vagrant 上にてCentOS7を実行。

```:HOST名/CentOS72_sv1
[root@localhost ~]# cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
[root@localhost ~]# ip addr show dev enp0s8
3: enp0s8: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
    link/ether 08:00:27:ee:fa:43 brd ff:ff:ff:ff:ff:ff
    inet 192.168.33.10/24 brd 192.168.33.255 scope global enp0s8
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:feee:fa43/64 scope link
       valid_lft forever preferred_lft forever
```

```:HOST名/CentOS72_sv2
[root@localhost ~]# cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
[root@localhost ~]# ip addr show dev enp0s8
3: enp0s8: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
    link/ether 08:00:27:07:97:d6 brd ff:ff:ff:ff:ff:ff
    inet 192.168.33.11/24 brd 192.168.33.255 scope global enp0s8
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:fe07:97d6/64 scope link
       valid_lft forever preferred_lft forever
```

## カーネル変数net.ipv4.icmp_echo_ignore_broadcastsの値をチェック
ここが想定通りじゃないと始まらないので見てみる
→ホントでした。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e710f255-3acb-1ca6-327a-4cea90492913.png)

なるほどなるほど、今どきブロードキャストは応答無くて当たり前、なんですね。。。

## カーネル変数を変更して有効化する
https://qiita.com/masahixixi/items/14630b501d8fb8aee477　によると
↓↓のコマンドで変更可能、とのこと。

```
# sysctl -w net.ipv4.icmp_echo_ignore_broadcasts=0
```
実際の結果がコチラ。いい感じに変更されてる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1eab2a47-5f3d-3995-764a-3059bc69f50d.png)


ちなみに恒久的に変更したい場合は

```
# vim /etc/sysctl.conf
```

で変更すればよいとのこと。

## 早速ブロードキャスト打ってみる。
ホントに応答来るようになった…。すごい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/6ea74d96-be79-1483-9f7c-cbd594bd6002.png)

試しに変数を1に戻したらブロードキャストの応答がなくなるのか確認すると、ホントに応答なくなった。すごい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/446b3657-94cf-b384-1713-ec7b572468cb.png)

## CenOS72_sv2もブロードキャストOKにしてみてどんな感じに応答来るのか試してみる
実際の結果がコチラ。LPIC201の参考書通りの結果になった。よかった。。。

```
# ping -b 192.168.33.255
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c3125a4e-63ba-6cf1-95c8-0deacdf12be8.png)
SSH&Proxyでgithubのpush先アカウントを切り替える方法

今回はgithubへのpushに対する記事を書いていこうと思います。
これもまた結構時間がかかりました。
複数のgithubアカウントの切り替えに加え、ssh接続のためのプロキシの設定もあり結構戸惑いました。
以前の[rails構築記事](https://qiita.com/sifa_app/items/4dcf9cea3920d145d27d)同様に備忘録として残したいと思います。

環境
・git 2.26.2
・sshキー作成場所：~/.ssh


#sshキーを作成する
念のためここから書いていきます。

```
>cd ~/.ssh
>ssh-keygen -t rsa
```

上記のコマンドをそれぞれ打ってEnter。
するとキーの名前を聞かれるので入力します。(何も入力せずEnterでもOK。)
そのあと二回パスフレーズの入力を求められます。これも必要なら設定して下さい。
今回は2つのgithubアカウント用に2つのsshキーを作成しました。

#sshキーをgithubのアカウントと紐づける
githubアカウントの右上のアイコンを左クリック -> Settings-> SSH and GPG keys
ここのnew SSH keyを押します。
名前はなんでもよさそうですが、一応キーの名前にしておきました。
その下の広いスペースには、C:￥ユーザー￥ユーザ名￥.sshの中にあるsshキー名.pubの中身を貼り付けます。
これは以下のコマンドでできます。

```
>clip < ~/.ssh/sshキー名.pub(Windows)
>pbcopy < ~/.ssh/sshキー名.pub(Mac)
```


#configファイルの設定をする
次にconfigファイルの設定を行います。
先ほどのsshキーが保存されている場所(C:￥ユーザー￥ユーザ名￥.ssh)にconfigファイルを作成します。(拡張子なし。すでにある場合は作らなくていい。)
その中に以下のように記述します。

```
Host github.com
	HostName github.com
	IdentityFile ~/.ssh/pushしたいsshキー名
	User git
	ProxyCommand connect.exe -H プロキシのホスト名:ポート %h %p
```

sshキー名にはpushしたいリポジトリを有するアカウントに関連付けたsshキーを設定します。
push先を変えたい場合はここと後述するremoteリポジトリを変更すればよいです。
最後の一文はプロキシを使用する場合に必要になります。
プロキシのホスト名にはhttp://をつける必要はありません。

#pushしてみる
いよいよpushしてみます。
pushしたいファイルはaddやcommitを済ませていることを想定しています。
まず、以下のコマンドを実行し、ssh接続できているかを確かめます。

```
>ssh -T git@github.com
```

パスフレーズを設定した場合は聞かれるので入力します。
Hi! ... みたいなものが出ていれば接続は成功です。
22番ポートが開かない場合ははconfigファイルに```Port 443```と指定して443番で接続してみるといいかもしれません。
```yes/no```みたいなものが出てきたら、接続していいか聞かれているので```yes```と入力してEnterでOKです。

ではあとはコマンドを載せていきます。
ちなみに、```git remote -v```を入力して、originのURLがあるなら、
```git remote rm origin```で消しておいてください。

```
>git remote add origin git@github.com:ユーザ名/リポジトリ名.git
>git push -u origin main
```

ここでもパスフレーズを聞かれた場合は入力します。
リモートリポジトリのURLを変更したい場合は、

```
>git remote set-url origin git@github.com:ユーザ名/リポジトリ名.git
```

を入力してください。
これで1台のPCで、複数のアカウントのリポジトリに切り替えながらpushすることができました。

#最後に
ここまで読んでいただきありがとうございます。
今回は、configのsshキー指定とgitのリモートリポジトリの変更で1台のPCで複数のgithubアカウントのそれぞれのリポジトリにpushする方法を書きました。そしてプロキシ対応も行いました。
画像を貼れていなくて申し訳ないですが、参考になれば幸いです。
【Javascript】テンプレートリテラルでスマートに値を置き換える。

テンプレートリテラルを使うと動的に値を置き換えることが出来て、しかもスマートにコーディングできます。

以下、サンプルを載せておきます。

```HTML:Sample.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript">

	//DOMContentLoadedイベントでWebページのロードを実行する。
	document.addEventListener('DOMContentLoaded',function(){
		//ID=dataSubmitが付与されたタグを特定する。
		let submitBtn = document.getElementById('dataSubmit');

		//入力ボタンのクリックイベントをaddEventListenerメソッドを使ってイベントリスナーを登録する。
		submitBtn.addEventListener('click',()=>{
			
			//入力情報の入ったinputタグのIDを取得し、変数inputDataに格納する。
			let inputData = document.getElementById('inputTxt');
			
			//inputタグに入力されている値をvalueプロパティを使って取得し、変数inputDataTxtに格納する。
			let inputDataTxt = inputData.value;

			//変数inputDataTxtに格納されている値がnull出ない場合、入力内容を表示し、アラートメッセージにも入力内容を表示する。
			if(inputDataTxt != null)
			{
				//ID=resultDataが付与されたタグを特定する。
				let resultData = document.getElementById('resultData');
				
				//ID=resultDataが付与されたdivタグに入力欄で取得した値を入れる。
				resultData.innerText = inputDataTxt;
				
				//テンプレートリテラル文字列を入力欄で取得した値に置き換え、アラート表示する。
				alert(`入力内容：${inputDataTxt}`);
			}
		});
	},false);

</script>
<body>
	<div class="tempClass" id="temp">
		<div class="inputTxtAreaClass" id="inputTxtArea">
			<input type="text" name="inputTxt" class="inputTxtClass" id="inputTxt">
		</div>
		<div class="dataSubmitAreaClass">
			<div class="dataSubmitTitleClass">
				<button type="button" class="dataSubmitClass" id="dataSubmit">
					入力内容を表示する
				</button>
			</div>
		</div>
		<!--結果を表示するエリア-->
		<div class="resultAreaClass">
			<div class="resultClass" id="resultData">
			
			</div>
		</div>
	</div>
</body>
</html>
```

【参考にしたサイト】
①【JS】addEventListenerが機能しない理由についてご教示ください
URL:https://teratail.com/questions/24714

②Window: DOMContentLoaded イベント
URL:https://developer.mozilla.org/ja/docs/Web/API/Window/DOMContentLoaded_event
ログ設計について自分の考え

## 概要

世間ではDevOpsが話題になり、運用を考慮した開発を行うことになっていると思います。
そこでまずはログの設計について自分なりの考えをまとめていこうかと思います。
* 最近はあまりそういった開発にかかわっていませんが昔は ERROR,WARNINGの区別がついていなかったり、ログはERRORだけでいいじゃんなんて言われて何とも言えない気持ちになったので・・・
* 今後追記するかも


## ログの出力レベル

ログの出力レベルは以下のものがあるかと思います。(個人の見解です)

|レベル|用途|
|-|-|
|FATAL|DBへのアクセスエラーなどアプリ以外の要因のケース|
|ERROR|アプリケーション内でのエラー時のログ 何等かの処理で失敗した場合など|
|WARNING|エラーではないが注意が必要な場合 特殊なパターンが発生したときなど|
|INFO|情報としてログに残したいもの 監査ログやバッチ処理の件数など|
|DEBUG|普段は出力はしないが設定を変更して詳細なログを出力したいとき用|

## 各ログの使い方
* 各ログの使い方について見解を記載していきます。
    * FATAL
        * あまり使ったことがないですが、前提条件が整っていないときなどに使われている印象があります。
    * ERROR
        * ログを設定するときに必ず使うことになるかなと思います。
        * 最近というほど最近ではないですが、AWS のCloudWatch Logs などで監視もできます[この辺参照](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/Working-with-log-groups-and-streams.html) Lambdaなどでは特に設定しなくてもログが見られます。
        * CloudWatch Events でログの監視を行いアラートの通知など行うようにする場合は `エラーが発生しました。` の一文でメッセージを切るのではなく発生したExceptionの情報も同じ行に出力させる方がよさそうです。
        * Exceptionのスタックトレースだけでなく可能であれば入力パラメータも出してあげると調査が楽になるかと思います。
        * 注意するべき点は障害が発生した際に何が起こったか？を調査できるようなログを出せるようにしておくことかなと思います。
    * WARNING
        * エラーほどではないが注意が必要な状況がある場合に出力させます。
        * 例としては以下のようなケースかなと
            * 連番を発行する処理でエラーで再度連番を発行する場合
            * 注意が必要なデータが来たパターン(エラーデータではないが、通常想定されていないようなデータ)
    * INFO
        * 処理の状況などを知らせるために使用します。
        * WEB系の場合画面遷移の状況などを把握するために出力するときに使用します。
            * 誰の操作かわかるようにセッションIDやユーザIDなどと合わせて出力させないとただのゴミになってしまいます。
        * バッチ処理などで処理件数などを表示させて処理時間を計算させるように出力させます。
    * DEBUG
        * 普段は出力させず開発中や、本番で何かあったときに設定を変更して出力される時に使います。
        * SQLのクエリやリクエストパラメータを出したり事細かな情報を取得するのに使います。

## ログの出力設計について
* ログを出力するときの注意点
    * 必要な情報を出力する。
        * エラーログなどは原因となった入力値などを出力するようにする必要があります。
    * 出しちゃまずいものは出力しない。
        * 監査ログとして入力内容などを出す場合でも氏名やパスワードといった考慮が必要な情報は●で置き換えるなどしてログに残さないようにする必要があります。そうしないとログからパスワードなどが漏れたり個人情報保護法に引っかかったりします。