OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonで医用画像解析1（SimpleITKでMRI画像を読み込む）

#はじめに
DICOMを読み込むライブラリはいくつかありますが，この記事ではSimpleITKを使ってMRIやCTなどの医用画像を読み込む方法を解説します．

#SimpleITKとは
SimpleITKはITKという医用画像解析のための形式をPythonやほかの言語で容易に利用するためのライブラリです．（https://en.wikipedia.org/wiki/SimpleITK）
3D SlicerやImageJ，ITK-Snapなどのソフトウェアでも利用されています．

#医用画像の形式
例えばMRI画像はDICOMデータとして利用することが多く，SimpleITKではDICOMを直接読み込むことができます．また，DICOM画像はしばしばNIFTI(.nii, .nii.gz)やNRRD形式(.nrrd)として保存されることがありますが同様に読み込めます．（https://simpleitk.readthedocs.io/en/master/IO.html）
ただし，出力に関してはDICOM形式では出力できないと思われます．
#目的
SimpleITK形式で読み込まれた画像を用いて表示やndarray形式に変換でき，処理や解析を行えます．
このライブラリを用いた目的は，PyRadiomicsという別の画像解析用ライブラリ上でSimpleITK形式で画像を読み込む必要があったためです．自分の学習記録としてもせっかくなのでまとめました．


#環境
* Windows 10
* Python 3.7
* Jupyter Notebook(Anaconda)　　　　　　　　　

Google Collaboratoryでも同様に行えますがローカルにあるDICOMデータなどをいちいちアップロードするのは面倒なので環境構築しました．

#SimpleITKのインストール
```terminal
conda install -c simpleitk simpleitk
```
pipでは普通にインストール可能です．

#画像の読み込み
DICOM画像が複数枚同じフォルダーに保存されている場合を想定しています．

```python:image_input.py
import sys

import SimpleITK as sitk
import numpy as np
import matplotlib.pyplot as plt

# Dicomの読み込み
imgdir = sys.argv[1]
reader = sitk.ImageSeriesReader()

dicom_names = reader.GetGDCMSeriesFileNames(imgdir)
reader.SetFileNames(dicom_names)
image = reader.Execute()  # ITK形式で読み込まれた画像

# NIFTIやNRRDを読み込む場合
image = sitk.ReadImage("画像のディレクトリ")

# 画像のサイズ取得
size = image.GetSize()
print("Image size:", size[0], size[1], size[2])

# ITK形式をndarray形式に変換
ndImage = sitk.GetArrayFromImage(image)
# 画像を表示
plt.imshow(ndImage[n], cmap='gray')  # nは任意のスライスについて表示

```

```terminal
$ python3 image_input.py "DICOMが存在するディレクトリ名"
```

#まとめ＆読み込んだ画像の使い道
上記のコードではサイズのチェックと簡単な表示を行いました．
画像を読み込んだあとの使い道は様々です．
例えば，３次元のndarray形式になっているのでprintで任意のボクセルの信号値を見ることもできます．
画像の出力やどんな解析ができるかどうかは別の記事でまとめたいと思います．
Rails チュートリアル_5章_学習メモ

#学んだ事
##bootstrap
+ Twitterが解放しているCSSのフレームワーク的なもの??

##パーシャル

HTMLを短くキレイに書くために、headやheader、footerなどの決まった構造を移す別ファイルの事

+ ```_head.html.erb```など
+ renderで呼び出す

##〇〇_pathにクオテーションは付けない！
pathにシングルクオテーションが付いていな事で、エラーとなった事が何回かあったので、気をつける
PHP、Laravel　学習　コントローラーの説明①

#コントローラーの説明
まずはこの画像をみてください
![MVCmodel-1024x492.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651096/443e4044-32fe-93d2-dc90-08e866e6b751.jpeg)
ルーティングの先にあるコントローラーを説明していきます。

コントローラーはユーザーから送られてきた指令に対して**どのようにアクションするか**を決める場所です。
要するに**総合窓口**ですね。。。市役所とか電話すると「そのご相談しでしたら○○課ですね〜」って案内する人いるじゃないですか？それがコントローラーです。
ルーティングから直接ビューを見せることはたまにありますが、基本的にコントローラーを介して見せる場合が多いです
（モデルはルーティングから直接見せることはほぼない）

#コントローラーの記法、RestFulコントローラー（リソースコントローラー）について
基本的な記法を以下に書いておきます

    //HomeController
    public function top(){
    return view('home.top');
    }
このソースコードは「top」という命令がきたら、「home」フォルダーの中にある「top」という名前のファイルを表示してくださいね、というコントローラーです。これが基本中の基本です。
これ以外で基本的なところで言えば

１、リストを表示させる
２、入力した情報をデータベースに保存させる
３、保存したデータを編集する
４、保存したデータを削除する
...etc

がありますが
**「いや〜、ルーティングに対していちいちコントローラー書いてるのめんどくさいっすよ。っていうかルーティングもコントローラーと同じ数書くんですか〜？」**

という方に朗報があります。それはRestFulなコントローラー（リソースコントローラー）です
**（以下、リソースコントローラーで統一します。）**

簡単に説明すると**ルーティングにを一回書いたらその中に大体の人が使うであろうルートとコントローラーを作ってくれる**と言う代物です。公式が用意してくれてるわけですね。。。

用意してくれている内容は以下になります。
**※ほぼ公式からの抜粋**

| 動詞| URI | アクション | ルート名 |
|:-:|:-:|:-:|:-:|
| GET | /photos  | index  | 	photos.index  |
| GET | /photos/create  | create  |photos.create   |
| POST | /photos  | store  | photos.store  |
| GET | /photos/{id}  | show  | photos.show  |
| GET |  /photos/{id}/edit | edit  | 	photos.edit  |
|  PUT/PATCH | /photos/{id}  | update  | photos.update  |
| DELETE  | /photos/{id}  | destroy  | 	photos.destroy  |

こちらはルーティングのことが記載されている表ですが、もちろんこれに合わせたコントローラーも自動生成されてます。（リソースコントローラーの自動生成の仕方は後述）

上から一つづつ説明していきます。
####①index####
保存したデータのリストを表示する時に使うアクション
####②create####
データを保存するためのビューを表示させるためのアクション
####③store####
送られてきたデータを保存するためのアクション（基本的にcreateから送られて来る）
####④show####
一つのデータの詳細を表示するアクション
####⑤edit####
一つのデータを編集するためのビューを表示するためのアクション
####⑥update####
送られてきた「こう言う風に変更してくれ」と言う命令をきくアクション（基本的にeditから送られて来る）
####⑦destroy####
送られてきたデータを削除するアクション

↑で説明したものは**基本的にこう言う風に使われますよ**と言うものの例で必ずしもこれにのっとった使い方をしろと言うわけではないです、ただこの通りに進めて行けば迷わずに開発が進められるので私はこのリソースコントローラーを使って開発をすることにしました。あと何より記述が少なくて済む！

#リソースコントローラーを使っていく#
では勿体ぶって申し訳ございません、リソースコントロラーの自動生成をしていきます。
まずはじめに以下のコマンドをterminalで入力しましょう

    $ php artisan make:controller PhotoController --resource

ちなみに公式にのっとってやっているのでコントローラー名（Photo)のところは好きに変えてOKです。
これを入力するだけで↑で説明した７つのコントローラーが自動生成されます。

あとはルーティングを書いてきますが。。。

    Route::resource('photos', PhotoController::class);
こちらもこれを書くだけでこの中に７つのルーティングが内包されています。
いや〜少ない記述で便利。

ここから使い方について説明していこうと思ったのですが**この時点で長くなりすぎてしまったので**次回にしたいと思います。

#次回以降の予定#
①コントローラーの残りの説明
②Viewの詳しい説明
③Viewの継承（@extend)について
④Bootstrapについて

ちゃんと説明しようと思うとつい長くなりがちですね。。。
あっ、ちなみにこの記事で至らない点等ございましたら是非、ご指導ご鞭撻ください。
Microsoft IME ローマ字入力の第1文字目が入力されない場合の対応

#最近ローマ字入力第1文字目が入力されない
IMEのアップデートなのか、ローマ字入力の第1文字目が入力されないことが多発したので、どうしたものかと対応策を模索してみました。

#結論
**以前のバージョンのMicrosoft IME を使う** が手っ取り早いです。

#設定方法
Windows10 - 設定 - IMEで設定を検索 - 日本語IMEの設定 - 全般 - 以前のバージョンの Microsoft IME を使う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/366986/12d42c5f-68af-63c3-5dcc-05a5ad081c1e.png)

これをオンにします。

#現象
えっ？そんなことある？　っていう方は多分入力方法が私と違うんだと思います。
https://techno-kuro.com/tk-b-log/post/128
こちらの現象です。
[Python] フォームで送信

#[Python]フォームで送信
```java:
<!DOCTYPE html>
<html lang="ja">
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="{% url 'index' %}" method="post">
      {% csrf_token %}
      {{form}}
      <input type="submit" value="click">
    </form>
  </body>
</html>
```
###action="{% url 'index' %}" method="post"でデータの送信先を指定している
###{% csrf_token %}でCSRF対策をしている
###{{form}}はフォームの具体的な内容が作成される
CentOS8 言語と時刻設定


### 言語
**現在の言語の設定を確認**

```
# locale language
Japanese
```
```
# localectl status
   System Locale: LANG=ja_JP.utf8
       VC Keymap: jp
      X11 Layout: jp
```


**英語・USにする**

```
# localectl set-locale LANG=en_US.utf8
# source /etc/locale.conf
```

**日本・日本語にする**

```
# localectl set-locale LANG=ja_JP.utf8
# source /etc/locale.conf
```

**使用可能なもの一覧**

```
# localectl list-locales
```

### 時刻
**確認**

```
# timedatectl
               Local time: 火 2020-12-08 14:10:01 EST
           Universal time: 火 2020-12-08 19:10:01 UTC
                 RTC time: 火 2020-12-08 19:21:30
                Time zone: America/New_York (EST, -0500)
System clock synchronized: no
              NTP service: active
          RTC in local TZ: no
```


**時刻を日本標準時JSTにする**

```
# timedatectl set-timezone Asia/Tokyo
```

chrony.confは`pool ntp.jst.mfeed.ad.jp iburst`がいいんだろうか。


`timedatectl show` のほうがすっきり見れる。

```
# timedatectl show
Timezone=Asia/Tokyo
LocalRTC=no
CanNTP=yes
NTP=yes
NTPSynchronized=yes
TimeUSec=Wed 2020-12-09 00:27:48 JST
RTCTimeUSec=Wed 2020-12-09 09:27:48 JST
```
flutter createでうっかり--orgオプションをつけ忘れたときにやること

# モチベーション
* `flutter create hoge`と何も考えずに打ち、Bundle IDが`com.example.hoge`になってしまうのを何度もやらかした
* これを直すのが結構めんどうだった（特にAndorid)
* これがいちばん早いと思います

## iOS

* Xcodeを起動
* プロジェクト設定の`General` -> `Bundle Identifier`を書き換えれば終わり

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26446/04342bed-7b7e-f613-d83b-b06f03c4c548.png" width=320>

## Andorid

* Flutteプロジェクトのルートディレクトリにて、ターミナルから`flutter create --org com.nicedomain .`と打つと足りないファイルを追加してくれる。
* Android Studioの`Replace in Path(⌘⇧R)`を使い、全てのファイルの`com.example.hoge`を`com.nicedomein.hoge`に置換する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26446/8cd4015e-7e59-7361-43b9-b6a5d16a3391.png" width=320>

* `android/app/src/main/kotlin/com.example/`をディレクトリごと削除する

## おまけ
* Firebaseの`GoogleService-Info.plist`(iOS用)とか`google-services.json`（Andorid用)は、Bundle IDに紐付いているので、Firebaseアプリを新しいBundle IDで作り直して、もう一度ダウンロードしてくる必要がある。
ラビットチャレンジ - 深層学習 Day3 Section2 LSTM

# 0．概要
本記事は日本ディープラーニング協会認定の講座プログラムである「ラビット・チャレンジ」が提供している科目の1つである深層学習のレポートである。
記事タイトルに記載のとおり、Day3 Section2 LSTMについて以下にまとめる。

# 1．LSTM(Long Short Term Memory)
RNNでは時系列を過去に遡るほど勾配が消失する。
活性化関数や重み等の初期化の手法を変えることも抑制する方法の1つだが、ニューラルネットワークの構造を変えて解決したものがLSTM。

下記のサイトにあるような図で見ると流れが分かりやすい。

参考：https://sagantaf.hatenablog.com/entry/2019/06/04/225239#3-LSTM-Long-short-term-model

## 1.1．CEC
過去のデータを保存するための部分。

CEC単独では以下のような問題があるためゲート、覗き穴結合で解決する。

時間依存度に関係なく重みが一律(重み衝突)になってしまう問題
過去の情報をすべて持っているため、その情報がいらなくなってもずっと影響を及ぼしてしまう問題
CEC自身の値はゲートの制御に影響を与えないためCECの過去の情報を任意のタイミングで伝搬させたり忘却させたり出来ない問題。

## 1.2．入力ゲート
1つ前のユニットの入力をどの程度受け取るか(一律ではなく可変の重みとする)を調整する。

```math
i=\sigma(W_{i}h_{t-1}+U_{i}x_{t})
```

## 1.3．出力ゲート
1つ前のユニットの入出力をどの程度受け取るか(一律ではなく可変の重みとする)を調整する。

```math
o=\sigma(W_{o}h_{t-1}+U_{o}x_{t})
```

## 1.4．忘却ゲート
CECの中身をどの程度残すか(いらない情報を忘却する)を調整する。

```math
f=\sigma(W_{f}h_{t-1}+U_{f}x_{t})
```

## 1.5．メモリセル

```math
g=tanh(W_{g}h_{t-1}+U_{g}x_{t})
```

```math
c_{t}=(c_{t-1}\otimes f)\oplus(g\otimes i)
```

## 1.6．出力

```math
h_{t}=tanh(c_{t})\otimes o
```

## 1.7．覗き穴結合
CEC自身の値に重み行列を介して伝搬可能にした構造。

# 2．確認テスト

## 2.1．確認テスト1
シグモイド関数を微分した時、入力値が0の時に最大の値を取る。
その値はいくつか。

回答：
シグモイド関数の微分

```math
f'(x)=(1-f(x))・f(x)
```

シグモイド関数の入力値$x$に0を代入すると

```math
sigmoid(x)=\frac{1}{1+e^{-x}}=\frac{1}{2}=0.5
```

微分の式に当てはめると

```math
f'(x)=(1-0.5)・0.5=0.25
```

## 2.2．確認テスト2
以下の文章をLSTMに入力し、空欄に当てはまる単語を予測したいとする。
文中の「とても」という言葉は空欄の予測においてなくなっても影響を及ぼさないと考えられる。
このような場合、どのゲートが作用すると考えられるか。

「映画おもしろかったね。ところで、とてもお腹が空いたから何か____。」

回答：忘却ゲート

# 3．演習チャレンジ

## 3.1．クリッピング
勾配のノルムが閾値を超えた場合、勾配のノルムを閾値をに正規化することで勾配爆発を防ぐ手法。

```Python:
def gradient_clipping(grad, threshould):
  norm = np.linalg.norm(grad)
  rate = threshould / norm

  if rate < 1:
    return grad * rate
  return grad
```

## 3.2．LSTM

```Python:
def lstm(x, prev_h, prev_c, W, U, b):
  # セルへの入力やゲートをまとめて計算し、分割
  lstm_in = _activation(x.dot(W.T)) + prev_h.dot(U.T) + b)
  a, i, f, o = np.hsplit(lstm_in, 4)

  # 値を変換、セルへの入力:(-1, 1)、ゲート:(0, 1)
  a = np.tanh(a)
  input_gate = _sigmoid(i)
  forget_gate = _sigmoid(f)
  output_gate = _sigmoid(o)

  # セルの状態を更新し、中間層の出力を計算
  c = input_gate * a + forget_gate * c
  h = output_gate * np.tanh(c)
  return c, h
```

# X．ラビットチャレンジとは
ラビットチャレンジとは、日本ディープラーニング協会認定の講座プログラムの1つ。
E資格を受験するためにはこのラビットチャレンジ等、いずれかの講座プログラムを修了しなければならない。

ラビットチャレンジの特徴は「現場で潰しが効くディープラーニング講座」の通学講座録画ビデオを編集した教材を使用した自習スタイルであるという点。
サポートは他の講座より少なく、受け身ではなく自主的に学んでいく姿勢でなければ進められないが、その分、他の講座に比べると安価であり、手が出しやすい。
ある程度知識がある人、自力で頑張るぞというガッツのある人向けではないかと感じる。

![bnr_jdla.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389699/bce66671-a2f5-a7f9-de6f-3f87e15c253b.png)
VueでJestで画面サイズの単体テストをやってみる

#概要
画面サイズの変更を単体テストでテストしたかった。

#環境
- Vue3
- Typescript
- Jest

#コード
まずはテスト駆動ぽくやるために、テストコードの方を記述する

```javascript
describe("LogListContent", () => {
    test("画面のサイズによって、フラグが切り替わるか", (): void => {

        const wrapper = mount(LogListContent);

        //とりあえずPCサイズ
        resizeWindow(1440);

        //PCサイズの画面判定なので、mobileモードは偽値になっているはず
        expect(wrapper.vm.isMobileMode).toEqual(false)

        //mobileサイズをiPhoneSE2にする
        resizeWindow(740);

        //PCサイズの画面判定なので、mobileモードは真になっているはず
        expect(wrapper.vm.isMobileMode).toEqual(true)
    });
});

const resizeWindow=(x:number) =>{
    window = Object.assign(window, { innerWidth: x });
    window.dispatchEvent(new Event("resize"));
}
```

テスト対象のコンポーネントにて、`isMobileMode`でモバイルで見ているかPCなのかの真偽値を持たせて管理したいと思います。
`resizeWindow`関数で、画面サイズの値を更新しています。
Typescriptだと、`window.innerWidth`へ値を代入して更新しようとすると、読み取り専用だぞと怒られるので、
スマートではありませんが、`Object.assing`を使って更新しています。

```javascript
  setup() {
    const isMobileMode = ref(false);

    /**
     * 画面サイズ変更時に変更イベントを検知しモバイルかどうか判断する
     */
    const changeWindowSize = () => {
      750 >= window.innerWidth
        ? (isMobileMode.value = true)
        : (isMobileMode.value = false);
    };

    //画面サイズが変更された時に発火するイベントを登録する
    //Vue3からcreatedは明示的に書かずにsetupに直接コードするためここにかく
    window.addEventListener("resize", changeWindowSize);

    //インスタンスが破棄された時に画面サイズ変更でのイベントを破棄する
    //破棄イベントは明示的に書かなくてはいけないので、Vue3でのdestroyedの役目であるonUnmountedを利用する
    onUnmounted(() => {
      window.removeEventListener("resize", changeWindowSize);
    });

    return {
      isMobileMode
    };
  },
```

Vueのコンポーネント側のコードはこんな感じになります。
三項演算子を使っている条件文のところで、`750 >= window.innerWidth`と画面幅をハードコーディングしていますが、
実際に使う場合には、定数を使ったりするなどでハードコーディングしないようにしましょう。
今回は説明用なのでハードコーディングしちゃってます。

Vue2でのライフサイクルにおける、`created`における役割は今回は明示的に書かなくてもよくなりました。
`setup`関数の中がそれを担っているようなので、Vue2のような

```javascript
  created(){
    window.addEventListener("resize", changeWindowSize);
   }
```
とは書かずに、ダイレクトに`setup`関数に書いています。
このままだとこのコンポーネントのインスタンスが破棄されても、イベントは残り続けるので、イベントを削除する必要があります。
以前なら、`destoryed`で行っていましたが、Vue3ではそれが`onUnmounted`へと変更になりました。

これで画面サイズの変更を単体テストでテストすることができました。
Vue3になっても、単体テストのコードはVue2からあまり変更がないため、再度の覚え直しが少なくて楽かなと思います。
laravel dumpが原因でphpunit Target class [config] does not exist

備忘録です。
コントローラーを書いている時など、dump()は画面で確認出来て便利なのですが、
そのdumpが残ったままphpunit で当該コントローラーのテストを行うと、
Target class [config] does not exist
のエラーが起こる事があります。

Target class [config] does not exist
が起こる状態を色々見ていて、どうもdump()が怪しいと気が付いたのでした。
そこで、テスト時と実行時で切りわけるdumpもどきを作成してみました。


```php:
class MyFunctions
{

public static function mydump(...$d){
    //$_SERVER['APP_ENV'] は phpunit 実行時のみセットされるみたい
    if( isset($_SERVER['APP_ENV'])){
        foreach($d as $n){ var_dump($n); }
    }else{
        foreach($d as $n){ dump($n); }
    }
}

}
```
呼び出し可能な状態にしておいて、dump()と書いている部分を、MyFunctions::Mydump（）に書き換えていけばどちらでも通るようになりました。
実運用する際にmydumpの中味書き換えてしまえばdump()が残ることもなさそうです。
text-overflow: ellipsis を使うのに width を指定したくない

# やりたいこと
パンくずリストの構造化データで
- 枠で囲んでいる中のテキストが長いときは三点リーダーをつけたい
    - 枠の長さを可変にしたい（widthを指定したくない）
- 短いときはそのまま表示したい

![スクリーンショット 2020-11-23 23.38.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/904348/69ece24f-aaab-992f-3ec4-180e2602a45e.png)

# 実装

パンくずリストのhtmlは下記と同じようにしています。（記事内では長くなるのでmicrodataは省略しています。）
[パンくずリスト  |  Google 検索セントラル  |  Google Developers](https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja#microdata_1)

```html
<ol>
  <li><a><span>TOP</span></a></li>
  ›
  <li><a><span>Category1</span></a></li>
  ›
  <li><a><span>Category2</span></a></li>
  ›
  <li><a><span>すごくながいたいとるすごくながいたいとるすごくながいたいとるすごくながいたいとる</span></a></li>
</ol>
```

cssも一部抜粋です。構造はすごくシンプルで`ol`を`display: flex;`で横並びにしているだけです。

```css
/* 横並びにする */
ol {
  display: flex;
}

/* 最後のliのテキストが長いとき省略する */
li:last-child {
   overflow: hidden;
 }
li:last-child span {
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
```

表示はここから確認できます
https://jsfiddle.net/Lb8podhk/

# なんでこうなるの？
はっきりと原因がわかってないのですが `li` に `overflow: hidden;` が必要なのは下記の記事と同じっぽいです。
[flexbox内でtext-overflowが効かない | cly7796.net](http://cly7796.net/wp/css/it-does-not-work-text-overflow-in-the-flexbox/)

>対応方法としては、text-overflowの要素が入っている.flex-itemに対して、min-width: 0;を指定するといいようです。
>もしくは、.flex-itemにoverflow: hidden;を指定でも対応できます。

`span` の方は `text-overflow` や `overflow` の適用対象がインライン要素ではないっぽいので `display: block;` などを追加してあげないとダメなのかな？と思っています。

[text-overflow - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow)
>適用対象 ブロックコンテナー要素

[overflow - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/overflow)

>適用対象 ブロックコンテナー, フレックスコンテナー, グリッドコンテナー


# 余談
すごいニッチな悩みだと思うのですが解消するのに地味に時間かかったので共有です。
こんなんすぐ実装できるやろ〜と思っていたのに時間かかってしまったかなしみと
`text-overflow: ellipsis`使うときは`width`が指定してあるサンプルが多くてでも欲しいのはそうじゃない…という気持ちで書きました。
イベントハンドラって？

# 初めに
5000連休欲しい

# イベントハンドラとは

日々のC#学習で「イベントハンドラ」について学習しましたが、あまり理解できなかったので復習のために。

イベントハンドラとは、__イベントが発生したときに実行される処理__のことで、この処理を行うために__デリゲート__が渡されます。

・・・急にイベントとかデリゲートとか知らない単語が出てきた、という人のために、それぞれ簡単に説明すると

> __イベント__
> コンピューター上で発生する「キーが押された」、「マウスが移動した」といった何らかの事象

> __デリゲート__
> メソッドをオブジェクトの一種として扱うことのできる機能

です。デリゲートは__変数のような扱い__ができるので、デリゲートの中に関数を複数個入れて実行、といった使い方ができます。

まとめると

- デリゲートに処理を格納
- そのデリゲートをイベントハンドラに渡す
- すると、特定のイベント発生時にデリゲートの中の処理が実行される

というわけですね。

# 便利なんこれ？

実は、まだ学習したばかりで自分でプログラムを書いてもいないので、あまり利点がつかめていません・・・。学習して出た感想といえば
（あるイベント発生時の処理を行う、ということは__GUIアプリ__を作成する際に使えそうだな～）
くらいです。
今後の勉強会で、また何か分かったらサンプルプログラム付きで説明したいです。

では。
Ansibleのexpectモジュールでエラー発生の原因はこれかも⁉

####Ansibleはエージェントレスの構成管理ツール
Ansibleはエージェントレスなのでターゲットノードにインストール不要で使用できる

####expectモジュール
expectモジュールは対話式のコマンドを実行できる

####expectモジュール使用時の必須バージョン
・python >= 2.6
・pexpect >= 3.3

####実行コード例
```
- name: install patch8
  expect:
    command: ./splx_30_lx_en_sp1_patch8.bin
    responses:
      "Do you want to continue and remove the previous RPM information*": "y"
  args:
    chdir: /tmp/splx
```

####エラー応答
```
fatal: [node01]: FAILED! => {"changed": false, "msg": "The pexpect python module is required"}
```
####エラー原因
上で述べた必須バージョンはコントロールノードだけでなく、ターゲットノードにも必要だった！

####バージョン確認方法
pipがインストールされていない場合、pexpectがインストール済みか確認するには下記ディレクトリの有無を確認する。

```
/usr/lib/python<バージョン>/site-packages/pexpect
```
ディレクトリが無い場合はインストールする必要あり。

pipがインストールされていない場合、pipコマンドを使用せずにpexpectをインストールする方法を見つけられませんでした。
分かり次第、更新します（ご存知の方がいらっしゃいましたらご教示ください）。
go modやgo getやgo mod vendorとは何か？

Goを始めたばかりでgo modやgo getやgo mod vendorがよくわかってないので、そのメモ

間違ってる可能性はあるので、そこはご了承ください

go.modファイルはGemfile.lockやpackage-lock.jsonみたいなもので、go.sumファイルはgo.modのchecksum

`go get <ライブラリのpath>`で、go.modとgo.sumにライブラリ名がバージョン明示で書き込まれ、GOPATH/pkg/mod配下にgo.modに書かれたバージョンのそのライブラリがインストールされる（Gemfileに欲しいgemを追記してbundle installしてgemを取り込むのとは流れが違う）

アプリケーションのコード内で外部ライブラリを使用する際は`import`の記述が必要なわけだが、go.modに書かれたバージョンが適用され、goがGOPATH/pkg/mod配下にインストールされたものを参照しにいく

なのでAプロジェクトではバージョン2.2のXライブラリを、Bプロジェクトではバージョン3.3のXライブラリを使用したいとなった場合でも、GOPATH/pkg/mod配下にバージョン2.2とバージョン3.3のXライブラリが両方インストールされていれば、プロジェクトごとで使い分けることができる

また、go1.15までは`go get`しなくても、先にアプリケーションのコードに外部ライブラリのimportの記述をして`go build`や`go test`をすることでも、go.modとgo.sumに記述が追加されたりGOPATH/pkg/mod配下に外部ライブラリをインストールしてくれていた

既存プロジェクトの環境構築する際は自分のローカルpc（GOPATH/pkg/mod配下）に不足している外部ライブラリをインストールしなければいけないのだが、その時は`go mod tidy`を使うのが良い

`go mod tidy`はプロジェクトの全てのgoファイルのimportの記述を見て、go.modを書き換えてくれて、さらにGOPATH/pkg/mod配下に不足しているライブラリをインストールもしてくれる

`go mod vendor`でgo.modにファイルに記載されているライブラリを、vendor以下にコピーしてくれる
vendorディレクトリがある場合、アプリケーションのコードが外部ライブラリを参照する際GOPATH/pkg/mod配下ではなく、vendorディレクトリ以下にある外部ライブラリを参照するようになる

go1.11が出るまでは、glide,depといったサードパーティを使うか上記で述べたvendorディレクトリを用意するやり方でないとプロジェクト毎に外部ライブラリのバージョンを分けるということができなかったが
go1.11以降はgo modules（go.mod）が出てきたのでvendorを用いるやり方やglide,depといったサードパーティを使うやり方は無くなってきている

参考サイト
https://ren.nosuke.me/blog/202002/20200222/
https://qiita.com/eihigh/items/9fe52804610a8c4b7e41
https://blog.mmmcorp.co.jp/blog/2019/10/10/go-mod/
Dockerでsupervisor (docker execでsupervisorctl利用、docker logsでプロセスログ確認、Webインターフェース機能でブラウザ表示)

# はじめに

Dockerでsupervisorを起動し以下の項目の確認まで実施します。

* `docker exec`でsupervisorctl利用
* `docker logs`でログ確認
* supervisordのWebインターフェース機能でブラウザ表示

# [supervisor](http://supervisord.org/) is 何？

> Supervisor is a client/server system that allows its users to monitor and control a number of processes on UNIX-like operating systems.

# 用意するプログラム

Sleepで10秒に一度出力をするGoプログラム

# 構成

```
.
├── Dockerfile
├── go.mod
├── go.sum
├── main.go
└── supervisord.conf
```

```conf:supervisord.conf
[supervisord]
nodaemon=true ; Docker利用ではtrueにする必要あり

[unix_http_server]
file=/var/run/supervisor.sock ; このパスにしないとdocker execで入りsupervisorctlで操作できない

[supervisorctl]
serverurl=unix:///var/run/supervisor.sock

[inet_http_server]
port=0.0.0.0:9001 ; HTTPでのプロセス監視機能。9001ポートで受ける。
username=user     ; ログインするのに必要なBasic認証のユーザーとパス
password=123

[program:mytool]
command=/usr/local/bin/mytool  ; プログラムはmytoolという名前にした
stdout_logfile=/dev/stdout     ; 今回は標準出力へ出すことでdocker logsで確認する
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
```

```Dockerfile:Dockerfile
FROM golang:1.15.5-buster as builder

WORKDIR /workspace

ENV GO111MODULE="on"
COPY go.mod go.sum ./
RUN go mod download

COPY . ./

RUN CGO_ENABLED=0 GOOS=linux go build -o mytool

FROM ubuntu:16.04

RUN apt-get update && apt-get install -y supervisor
RUN mkdir -p /var/log/supervisor # TODO: need?

COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

COPY --from=builder /workspace/mytool /usr/local/bin/

CMD ["/usr/bin/supervisord"]
```

```go:main.go
package main

import (
	"fmt"
	"time"

	"github.com/vikyd/zero"
)

func main() {
	for {
		var v int
		fmt.Println("hello supervisor!?", zero.IsZeroVal(v))
		time.Sleep(10 * time.Second)
	}
}
```

# 動かす

## Docker起動

```terminal
$ docker build -t supervisor-image .
$ docker run --name supervisor -p 9001:9001 -d supervisor-image
```

## コンテナに入りsupervisorctlを使う

```
$ docker exec -it supervisor bash
root@e70e1f0c07ef:/# supervisorctl help

default commands (type help <topic>):
=====================================
add    exit      open  reload  restart   start   tail
avail  fg        pid   remove  shutdown  status  update
clear  maintail  quit  reread  signal    stop    version

root@e70e1f0c07ef:/# supervisorctl status
mytool                           RUNNING   pid 8, uptime 0:09:25
```

## `docker logs`でプロセス確認

```
$ docker logs -f supervisor
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
hello supervisor!? true
```

## Webインターフェース機能でブラウザ表示

http://localhost:9001 へアクセス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91562/928580e8-a955-7889-5d27-3650b475f99f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/91562/f76d0612-f35f-4b63-286e-d493117d9b42.png)
seed_fu: herokuにrailsアプリをデプロイしたら,初期データが反映されてなかった

#困っていたこと

railsでwebアプリケーションを完成した。よっしゃherokuにデプロイしようと思いデプロイしたところ
表示してほしいユーザーデータとかの初期データが反映されていなかった

ぼくは初期データをseed_fuといったgemを使って、開発環境では下のコマンドで初期データを投入していた

```
rails db:seed_fu
```

#結論
以下のコマンドを使えばseed_fuのデータは本番環境に反映される(<font color="Red">**herokuでは**）</font>

```
heroku run rails db:seed_fu
```

以上です。なにか間違っている点などあれば、コメントお願いいたします
[初心者向け]怪奇！Herokuで画像投稿する際の謎のエラー


ローカルでは正常に動いていた。Herokuになると途端に
![スクリーンショット 2020-11-23 23.43.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674994/633f1ecc-0053-0b12-5bf2-533dd1d1b526.png)
こうなってしまいます。



#エラーの正体を先にいうと、、
<br>
###拡張子です。
<br>



ファイルの名前の最後についてるあれです。<font color="Red">.pdf</font>や<font color="Red">.png</font>や<font color="Red">.mp3</font>です
**Herokuでは、"jpeg"が使えません。**

※ちなみに"jpg"は使えます。



僕が投稿しようとしてエラーが出ていた画像は拡張子が全てjpegでした。

ログを見ても気付きにくい初心者には手強いエラーなので気をつけてください！:)
【設計検討1】PC操作自動化システムの設計検討1

#概要
本日よりPC自動化システムの開発を行う。
以下をまとめた
・要件定義
・ユーザ操作
・GUI画面
・概略仕様

#要件定義
PCのクリック操作、キーボード入力を自動化したい
#ユーザ操作
ユーザ操作について説明する。ユーザがGUIを立ち上げた際に、過去の自動操作データ(コードファイルと画像ファイル)が取り込まれていた場合Executeをクリックしプログラムが実行される。GUI起動時、GUI側はコードファイルと画像ファイルを取り込む。画像ファイルはクリック操作の対象となる画像である。コードファイルはユーザが保存したコードがである。
過去の自動操作データがない場合、Read pictureをクリックし画像が保存されているフォルダを選択する。
画像が取り込まれた、コードを記述しSaveボタンによるコードを保存する。ここで保存したコードは次回UIを立ち上げた際に自動で読み込まれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/da3514da-6cf8-3270-bbfb-1f44d614b38e.png)


#GUI画面
GUI画面と各機能付いて説明した図を示す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/f319ca91-25c8-1f04-f92b-991cec648a62.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/ca8532fc-f75a-b4da-d0df-d3d91f85441b.png)

#概略仕様
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/ffb9cbc8-d7f6-66f6-ccc0-86b446f20456.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700308/021e9caa-cbf8-7243-ba48-40ea01fc63ff.png)
.NET(C#)でファイル暗号化・復号化ツールを作ったのでメモ

GitHubに上げています。

- [encryptor (GitHub)](https://github.com/yukgithub/encryptor)

ただ、勉強用に作成したものなので、**実務などでは使用しないで下さい**。
暗号化処理の実装とか、バイナリファイルの読込・書込、タプルやディクショナリを勉強したり、GitHubへの反映の仕方を知りたかったのも動機です。

開発環境は以下の通りです。

- NET 5.0
- C#
- Visual Studio Community for Mac
- macOS Mojave

・更新履歴
11/23 新規公開
11/25 リファクタリングの結果などを追記

## 個人的に気になったところ

### Dictionary初期化の書き方

こんな風に書く。

```csharp
private static Dictionary<string, string> argConst = new Dictionary<string, string>
{
	{ "key1", "value1" },
	{ "key2", "value2" }
};
```

### StreamReader, StreamWriterはテキストの読み書きに使う

.NETのドキュメントに書いてある通り、それぞれ基底クラスが`TextReader`と`TextWriter`という名前の通り、テキストを扱う。

- [StreamReader クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.io.streamreader?view=net-5.0)
- [StreamWriter クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.io.streamwriter?view=net-5.0)

バイナリファイルは、`BinaryReader`、`BinaryWriter`を使う。この辺りで結構はまった。

- [BinaryReader クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.io.binaryreader?view=net-5.0)
- [BinaryWriter クラス](https://docs.microsoft.com/ja-jp/dotnet/api/system.io.binarywriter?view=net-5.0)

`BinaryWriter`だと以下のように書く。

```csharp
//write decrypted data to file
using (BinaryWriter binaryWriter = new BinaryWriter(new FileStream(outputFile, FileMode.Create)))
{
	foreach (byte b in byteArray)
	binaryWriter.Write(b);
}
```

### 他
`CryptoStream`を使用している場合、`BinaryReader`のLengthが取れなかった。seekができないようで、要するに今どの場所を読み取っているかという情報が取れないらしい。

~~なので、復号化処理で入力データのseekが終了しているかどうかは、`EndOfStreamException`の発生を例外処理で補足する方法しかできなかった。~~
→ CopyToを使うことで一応回避（但し、メモリを使うので注意）。
あと、usingをすっきりさせた。(2020/11/25追記)

```csharp
using (FileStream   fileStream   = new FileStream(inputFile, FileMode.Open))
using (CryptoStream cryptoStream = new CryptoStream(fileStream, transform, CryptoStreamMode.Read))
using (MemoryStream memory       = new MemoryStream())
using (BinaryWriter binaryWriter = new BinaryWriter(new FileStream(outputFile, FileMode.Create)))
	{
		//Read decrypted data into memory
		cryptoStream.CopyTo(memory);
		byte[] decryptBytes = memory.ToArray();

		//write decrypted data to file
		binaryWriter.Write(decryptBytes);

	}
```

Rijndael = AESという認識だったので、`Rijndael`クラスを使用したが、`Aes`クラスもあるようで、Microsoftのドキュメント(英語）では後者を使用すべきと書かれている…。

>You should use the Aes algorithm instead of Rijndael.



[Rijndael Class](https://docs.microsoft.com/en-us/dotnet/api/system.security.cryptography.rijndael?view=net-5.0)

実際、MSのドキュメントでは、`Aes aes = Aes.Create()`のように、`Aes.Create`のFactoryが使用されている。

ちなみに、日本語サイトは機械翻訳のようで、意味が全然理解できないくらい文章が変でした。

まぁ今回はC#の自習でしたが、実務で暗号化が必要な時は、基本的には自作しない方が無難だと思います。

以上です。
ResNet の細かい話 

 
ResNet に関する細かい話の備忘録です。 
 
# ResNet 

ResNetの提案論文は以下になります。 
 
- https://arxiv.org/abs/1512.03385 
 
# PreAct ResNet 
 
最初の提案論文では以下の構造のブロックを積層していました。 
 
![resblock_orig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494948/aedf92d4-d7d3-d8aa-04eb-61c82f17e468.png)
 
この構造の場合、入力を加算した後に活性関数(ReLU)があります。 
ReLU関数では負の値の場合勾配が0になります。 
したがって、入力を加算する構造にして勾配がそのまま伝播するようにしているのに ReLU の部分で徐々に勾配が消えてしまいます。 
 
これを解決したのが pre-activation(PreAct) と呼ばれる構造です。 
具体的には以下の形になっています。 
 
![resblock_preact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494948/139c06d8-bbc6-e0bd-4d13-adcd3703ec06.png)
 
加算した後の活性関数が残差を計算するパスの一番最初に移動しています。 
これにより、スキップコネクション側には変換処理が一切適用されなくなり、勾配がそのまま伝播されていきます。 
 
この構造を提案した以下の論文の実験では 164 層のネットワークを 1001 層に拡張した場合、 
オリジナルの構造では精度が低下していますが、PreAct 版では精度が向上しています。 
 
- https://arxiv.org/abs/1603.05027 
 
なお、この論文では様々な変更を ResNet に加えて性能を確認しています。 
また、最後の Convolution の後、加算の前に BatchNormalization をさらに加える亜種もあります。 
さらに最初の ReLU を削除してブロック内の活性関数を1つにする構造も提案されています(SingleReLU)。 

# 初期化 
 
ニューラルネットでは Xavier の初期値や He の初期値が使われます。 
これらの目的は初期値の状態で出力の平均と分散が、入力とほぼ同じになるようにすることです(加えて、Xavierの初期化では重み行列の勾配の平均と分散も考慮されます)。 
また、BatchNormalization 等の Normalization は出力の平均と分散を強制的に一定の値にします(正確には出力の平均と分散を強制的に一定の値にする処理を Normalization と呼んでいます)。 
 
しかし、ResNet では出力値に入力を加算する処理が加わるため、層が深くなるほど出力値の分散が大きくなっていきます。
そのあたりの問題をきちんと整理したのが以下の論文になります。 
 
- https://arxiv.org/abs/2002.10444 
 
上記の論文では以下のことが示されています。 
 
- Normalization がある場合は、入力の加算により、出力値の標準偏差は深さに比例して増加する 
- Normalization がない場合は、入力の加算により、出力値の標準偏差は深さに対する指数関数的に増加する 
 
その上で残差を学習する関数側に「初期値0の学習パラメータとの積算」を加えるSkipInitという手法を提案しています。 
これにより Normalization がなくとも学習が可能であることが示されています。 
 
以下の論文でも同様の手法が提案されています。 
 
- https://arxiv.org/abs/2003.04887 
 
こちらは Multi-Head Attention での実験結果も記載されています。 

# Down Sampling 
 
畳み込みニューラルネットワークで分類問題を処理する場合、一般に変換処理の中で徐々に空間的な大きさを減らしていきます。 
ResNetでも空間的な大きさを半分にするブロックがあります。このブロックの構造についていくつか改善手法が提案されています。

- https://arxiv.org/abs/1812.01187

ResNetのブロックでは出力値に入力を加算します。
しかし、空間的な大きさを減らす場合、入力と出力の要素数が異なるため、どうしても何らかの変換を行う必要があります。

オリジナルの ResNet では stride=2 の 1x1 Conv を使っています。この場合、要素数の3/4を使いません。
そこで代わりに、2x2のAveragePooling + 1x1 Conv を利用する手法が提案されています。

個人的には AveragePooling だけでいいのではないかと思っているのですが、一般的には(チャンネル数を変えるのもあって)1x1 Conv が使う場合が多いです。
なお、これらの変換では活性関数を利用しません。非線形性は残差を計算する側が担当します。

つぎに残差を計算する側についてです。
ResNet-50より深いネットワークでは BottleNeck と呼ばれるモジュールが利用されています。
これは 1x1 Conv - 3x3 Conv - 1x1 Conv の3つの畳込み演算で構成されています。
このときに、空間的な大きさを減らすために最初の1x1 Conv の stride を 2 にすると先程と同様に入力値の3/4が利用されません。
そのため、stride=2 を挿入する位置を最初の 1x1 Conv から 2番目の 3x3 Conv に変更する手法が提案されています。

なお、解像度を減らす処理で以下のページで提案されている BlurPooling を使う手もありますが、計算量的にペイするのかはよくわかりません。

- https://richzhang.github.io/antialiased-cnns/

# STEM

本筋とは関係のない部分ですが、ResNetには最初に7x7 Conv(stride=2) を行い次に3x3 MaxPooling(stride=2) を行う STEM(幹) と呼ばれる部分があります。
Down Sampling の際にも参照した以下の論文では、7x7 Conv を 3x3 Conv 3つで代替することにより計算コストを削減しています。

- https://arxiv.org/abs/1812.01187

また、以下の論文では最初に4x4の領域を一つのピクセル?にまとめてしまい、画像サイズが1/4、チャンネル数がが3(RGB)x4x4=48の形に変換した後、3x3 Conv を適用するという手法で計算コストと性能の改善を行っています。
この処理は SpaceToDepth と呼ばれます。

- https://arxiv.org/abs/2003.13630

空間サイズを減らして、チャンネル数を増やすという手法は ViT でも利用されています。

以上
C++ 私的入門まとめ 

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[新・明解C++入門](https://www.amazon.co.jp/gp/product/B0787YH4L2/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1)

##コード解説

```c++
unsigned x
```
unsignedは符号なし整数型で0と1の整数値を表現する

```c++
x & 1U
```
1Uは最下位ビットが1のみである符号なし整数
xと1Uの論理積を求める
論理積は**両方とも1なら1**
xの最下位ビットが1なら

```c++
x >>= 1;
```
xの最下位ビットが1ならxの全ビットを1ビット右にシフト

`~0U`は全ビットが0である符号なし整数 0Uの全ビットを反転したもの

##参照と参照渡し
###参照
```c++
int x=1;
int& a=x;
```
&を付けることで別名とすることができる
###参照渡し
関数で仮引数へ&を付けることで参照渡しとすることができる

```c++
void func(int&a){}
```
##有効範囲と記憶域期間
###有効範囲
スコープのこと。

- ファイル有効範囲
- ブロック有効範囲

###有効範囲解決演算子

|名称|説明|
|---|---|
|::x|大域的なxにアクセスする|
|x::y|名前空間x中のyにアクセス|

###記憶域期間
変数の生存期間のことで3つある

####静的記憶域期間
関数外で宣言・定義された、もしくはstatic(static int a)をつけて関数中で宣言・定義されたもの

プログラムを実行して終了までの寿命

####自動記憶域期間
関数内で宣言・定義されたもの
プログラムが宣言を通過するしてから}までいくと破棄される

##多重定義とインライン関数
###多重定義
多重定義は同じ名前の関数を複数定義すること
呼び出しの区別はシグネチャ(仮引数の並びなどの情報でどの関数を呼び出すかを区別する)

```c++
int max(int a,int b){}
int max(int a,int b,int c){}
```
返す型が違っても、引数の個数方が同じ関数は手重定義できない

```c++
//多重定義はできない
int max(int a,int b){}
double max(int a,int b){}
```
###インライン関数
関数を使用するメリットはタイプ数の減少など挙げられるが、メモリをわずかながらでも消費してしまうなどのデメリットもある。インライン関数はそうした関数のデメリットを解決する関数

インライン関数は関数定義にinlineをつけるだけ

```c++
inline int max(int a){}
```
インライン関数は実行効率を上げるために使われる事が多い
初期データをseeds.rbに記述して、ゲストログイン機能のエラーを解決してみた

#はじめに
　ゲストログイン機能を実装したが、ユーザー登録以前に、２つの情報を登録し、ユーザーと紐づけていたので、それを解決するために、試行錯誤した結果、初期データの作成にたどり着いた。

##seeds.rbとは
　Rails6.0では、（もう少し前からだとは思うが、）デフォルトで入っているファイル。dbディレクトリの配下にある。最初から、コメントアウトで色々記述されているが、説明なので、消してしまって構わない。

##記述方法
　`seeds.rb`には、初期データとして作成しておきたい（テスト用などの目的）データを直接作る。

```ruby:seeds.rb
User.create!(name: 'ゲスト', email: 'gest@sample.com')
```
`モデル名.create!(カラム名: 値)`が基本形。
`create!`の部分は他にも、いくつか使えるメソッドがある。（次回、紹介予定）
上記のように、書けば、いくつでも初期データを作成できる。モデル名の部分を他に変えれば、別のテーブルにも作成可能。

<font color=red>カラム名にidを用いることもできるので、いつもは自動で振り当てられるidについても、任意で作成可能。</font>

ちなみに、eachメソッドやtimesメソッドを使って、繰り返し処理によって、大量の初期データを作成することも可能。


##初期データ生成方法
ターミナルで、

```bash
rails db:seed
```
を実行。特にエラーが無ければ、特に反応なく、次の行にいき、待機状態となる。（success！みたいに、表示してくれれば安心なのに…）。テーブルで実際に保存されているか、確認するとよい。

##最後に
　これで本番環境でも、生成のコマンドさえ実行すれば、無事に、ゲストログインもできるはず！
React - 2つのテキストボックスの入力を相互に反映する

#概要

[公式サイトにすでに解説がありますが](https://ja.reactjs.org/docs/lifting-state-up.html)、そこ扱われているサンプルソースがやや煩雑に感じました。なので、キーとなるポイントを抽出、分かりやすく短いソースで書いてみました。

**この記事のサンプルソース概要**

* テキストボックスが2つあり、税抜きと税込みの価格を表示します。
* いずれのテキストボックスも入力可能で、数字をタイプすると即時反映します。
（税抜きのテキストボックスに入力すると税込みのテキストボックスに即反映される。逆も同様。）
* 同じコンポーネント(MyForm)を2つ配置してあり、入力値が他のテキストボックスに干渉しないことを確認できる。

**作動イメージ**
![0001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/7fdc9b9c-9306-5a8d-9381-2cf3a485855f.gif)

#ソースコード

```html:index.html
<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="root"></div>
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="script.js"></script>
</body>
</html>
```

```react:script.js
// 軽減税率(8%)
const taxrate = 0.08;

// テキストボックス
class MyInput extends React.Component {
    constructor(props) {
        super(props);
    }

    onChange(e) {
        // MyInputコンポーネントを配置したときの onValChange={...} に指定したメソッドがここで呼ばれる。
        this.props.onValChange(e.target.value);
    }
    render() {
        const value = this.props.value;
        return (
            <input
                type="text"
                value={value}
                onChange={(e) => this.onChange(e)}
            />);
    }
}

// 価格比較フォーム
class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value1: 0,
            value2: 0
        };
    }

    handleChange1(val) {
        this.setState({
            value1: val,
            value2: val * (1 + taxrate)
        });
    }

    handleChange2(val) {
        this.setState({
            value1: val / (1 + taxrate),
            value2: val
        });
    }

    render() {
        return (
            <div>
                税抜き
                <MyInput
                    name="taxout"
                    value={this.state.value1}
                    onValChange={(e) => this.handleChange1(e)} /><br />
                税込み
                <MyInput
                    name="taxin"
                    value={this.state.value2}
                    onValChange={(e) => this.handleChange2(e)} />(軽減税率)
            </div>
        );
    }
}

// 画面に表示
ReactDOM.render(
    <div>
        フォーム1
        <MyForm name="form1" /><br />
        フォーム2
        <MyForm name="form2" /><br />
    </div>,
    document.getElementById('root')
);
```
Code coverageをオンにした状態でSwiftUIのXcode previewを有効化する方法

### 概要
CocoaPodsからインポートしているDynamic frameworkで以下のコンパイルエラーが出る場合がある。

`SwiftUi canvas preview compile error: Undefined symbols for architecture x86_64`

そこでアプリケーション(SwiftUIのpreviewを利用するターゲット)のスキームにある`Test/Options/Code coverage`のフラグを無効化するとコンパイルエラーが消える場合がある

### 解消策

Code coverageを切る。

or 

ビルド対象であるターゲットの`Build settings/Linking/Other linker flags`に`-fprofile-instr-generate`を追加する。

### まとめ
とりあえず正常にpreviewも確認できたので一安心

llvm関連のflagで特に知見もないのでとりあえずはDebug buildのみにflagを追加することで対応しました


### 参考リンク
https://stackoverflow.com/questions/59705079/swiftui-canvas-preview-compile-error-undefined-symbols-for-architecture-x86-64
「N+1問題」とは？？


##１． 「N+1問題」とは？？
アソシエーションを利用した際に、データベースへのアクセス回数が多くなってしまう問題を「**N+1問題**」といいます。

例えば１つのツイート投稿（tweet）は１人のユーザー（user）とアソシエーションで結びついているとします。そして、データベースから全てのツイート投稿を取得するとアソシエーションによりユーザー情報も取得しようとします。
この時、次のコードだとターミナルではこのようなログを示します。

```ruby
class TweetsController < ApplicationController
  def index
    @tweets = Tweet.all
  end
end
```
![スクリーンショット 2020-11-23 22.07.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/875779/2c3b9693-8821-15e5-938e-8484ea8fb9d6.png)
<font color="skyblue">水色の箇所</font>がTweetsテーブルとUsersテーブルにアクセスしているログです。
Tweetsテーブルに対しては**１**回で全ての情報を取得していますが、Usersテーブルには**６**回アクセスしています。
（このときTweetsテーブルに存在するTweetのレコードは６つです。）
取得したTweet１つ１つに対して、アソシエーションを使ってユーザーのレコードを取得する処理を繰り返していることを示しています。つまり１００個のツイート投稿を取得すると、１００回Usersテーブルにアクセスすることになり、データ取得に時間がかかります。その結果、アプリケーションのパフォーマンスが著しく下がることになります。これが「N+1問題」です。これを解決するためには、includesメソッドを利用します。

##２． includesメソッド
```ruby
モデル名.includes(:アソシエーションで紐付くモデル名)
```
**includesメソッド**は、引数に指定された関連モデルを1度のアクセスでまとめて取得するメソッドです。このメソッドを用いて以下のようにコードを書き換えます。

```ruby
class TweetsController < ApplicationController
  def index
    @tweets = Tweet.includes(:user)
  end
end
```

![スクリーンショット 2020-11-23 22.07.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/875779/37516669-c52c-e6a8-ff79-e2ab9e211aa2.png)
結果、<font color="skyblue">水色の箇所</font>が２つに変わりました。Tweetsテーブルに対して**１**回、Usersテーブルに対しても**１**回のアクセスで全ての情報を取得できました。

##3. さいごに
　私自身、今まで勉強する中で膨大なデータの使用を想定した開発をしていませんでした。そのため「**N+1問題**」を勉強して、アプリケーションのパフォーマンスを意識した開発する重要性を感じました。この記事を読んで、内容が良かったらLGTMお願いします！また、ご意見があれば是非コメントもお願いします。
【環境構築＋α】Typescriptをいじってみたいお年頃

#はじめに
こんにちは！フロントエンド大好きといっておきながらまだTypescriptをあまりいじったことがないヨシキです。今回はTypescriptの環境構築を行うとともに少し触っていけたらと思います。

#環境
- Ubuntu 20.04　(Windows Sub System for Linux)
- node v14.15.1
- npm 6.14.8
- Typescript Version 3.8.3


#インストールの軌跡
nodeとnpmに関しては、もともと入っていたのですが、念のため重ねてインストールしておきました。

```
sudo apt install nodejs npm
```
次にn packageを使い安定板のnodeとnpmを取得します。

```
sudo npm install n -g
sudo n stable
```
以下のような文言をはいてくれれば成功です。

```
installing : node-v14.15.1
       mkdir : /usr/local/n/versions/node/14.15.1
       fetch : https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz
   installed : v14.15.1 (with npm 6.14.8)
```
#####おや？様子が、、、
よーし！これで残すはメインのTypescriptのインストールのみだ！と心を躍らせていたら何故か躓きました、、、
参考記事のTypescriptインストール方法を試してみてもエラーが吐かれるばかりで全然インストールしてくれませんでした。以下が私の環境では無理だったインストール方法です。

```
sudo npm install -g typescript ts-node
npm install -g typescript
sudo npm install -g typescript
```

何かしらヒントを求め、ターミナルで以下のようなTypescript関連のコードを打ち込むと・・・

```
tsc --version
```
以下のような出力がありました！

```
Command 'tsc' not found, but can be installed with:

sudo apt install node-typescript
```
これはと思い上記のコードを打ち込んでみると・・・
すんなり入りました笑
なぜ上記の参考文献のインストール方法を受け付けてくれなかったのかはわかりませんが入ってよかった！
同じようなエラーが発生してしまった方は是非お試しください。

#実際に動かしてみよう！
ターミナルでディレクトリを作成し、実際にコードを書いてみます！
最初なので、おなじみのやつ行っときます

```hello.ts

const message:string = 'Hello! TypeScript!';
console.log(message);
```
ここでTypescriptは静的型付け言語なので、書いて、さあ！実行！とはいきません。
コンパイルという作業が必要なのです。
私はc++をはじめに触ったので、コンパイルがあるほうが自然なのですが、多くの人は動的型付け言語（PythonやJavaScript）を最初のプログラミング言語に選んでいる傾向があると思うので、最初は少しばかり慣れないかもしれませんね。

次はチュートリアルに載っていたコードを少し改変して,クラスと構造体に関してのコードを書いてみました。

```sample.ts

interface Point {
    x: number;
    y: number;
}

function printPoint(p: Point) {
    console.log(`${p.x},${p.y}`);
}

class  VirtualPoint {
    x: number;
    y: number;

    constructor (x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

const newVPoint = new VirtualPoint(1, 6);
printPoint(newVPoint);

```

`interface`を使うことによってjavascriptではなかった（たぶん笑）構造体を宣言できるようになるんですね。これも静的型付け言語の特徴の1つなのかもしれませんね。

#おわりに
今回はTypescriptの環境構築を主にやってきました。
もう少し高位に扱うのなら、webpackを通してトランスパイルようにBabelをインストールして、Typescriptを扱うのが望ましいのかもしれません。webpackには結構親しみがあるので、今度はそちらのほうで試していきたいと思います。
それではお疲れ様でした！
この記事が参考になった方はぜひgoodしてってくだされ～笑

#参考文献
[TypeScriptをWSL+Ubuntuで環境構築する](https://qiita.com/pgDora56/items/1459bb83e3bc6ba84a9e)
[TypeScriptチュートリアル① -環境構築編-](https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103#%E7%9B%AE%E6%AC%A1)
[公式チュートリアル](https://www.typescriptlang.org/)
formを使ってGET送信なんてもうしない！

まずはGETとPOSTの違いについて自己流で簡単に笑
・GET idやkeyを送りたい 直接URLアクセスが可能
・POST 大事なデータ(パスワードなど)をデータベースに格納したい時

例えるなら厳しい母親がPOSTとすると、GETは優しいおばあちゃんみたいな（全然ズレてたらごめんなさい笑）

と、まぁ冗談はこれくらいにして
本題はどうやってform使わずに簡単にget送信するかって話。

まずはこれが普通のget送信


``` php:send.php

~
<form method="get" action="receive.php" >
<input type="text" name="id">
</form>
~

```

仮にformに入れた値を 1 だとすると

``` php:receive.php
<?php
echo $_GET['id']; // 1
```

となりますよね。

それじゃあこれをHTMLのaタグを使ってやってみよう！
aタグってのはページを行き来したりするリンクことだね。

まずは散歩がてらに
普通に行き来するaタグがこれ


``` php:send.php
~
<a href="receive.php">受け取るページ</a>
~
```

になります。
このときにGETパラメータを渡すやり方がこちら

``` php:send.php
~
<a href="receive.php?id=1">受け取るページ</a>
~
```

``` php:receive.php
<?php
echo $_GET['id']; // 1
```
え？PHPで定義したidを送りたい？？
考え方はシンプルにこうしてやろう！！

``` php:send.php
<?php
$id = 13;
?>
~
<a href="receive.php?id=<?php echo $id; ?>">受け取るページ</a>
~
```
``` php:receive.php
<?php
echo $_GET['id']; // 13
```
と、ざっくりこんな感じです！
これでformなんて作らずにGET送信ができましたね！

よし！今日はこれで終わ、、、

え！？　複数の値を送りたいだって！！？？
そんなことが、、、。

できます！！
ここまで見てくださったあなたに特別ですよ？（笑）

``` php:send.php
<?php
$id = 13;
$name = '好きな名前';
$email = 'Eメール';
?>
~
<a href="receive.php?id=<?php echo $id; ?>&name=<?php echo $name; ?>&email=<?php echo $email; ?>">受け取るページ</a>
~
```
間に & を挟むだけ！簡単です！！
これで三つの値を同時に送ることができます。

``` php:receive.php
<?php
echo $_GET['id']; // 13
echo $_GET['name']; // 好きな名前
echo $_GET['email']; // Eメール
```

普段はポエム書いてます！
よろしければTwitterもフォローしてください！！
Spring Boot を使ったアプリケーション開発

![Spring.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/04cb42fa-99d3-8d2c-bb0e-47be85895bf4.png)

#１,　使用言語

###Spring Bootを利用したアプリケーション開発には

>１，**Groovy**によるアプリケーション開発

>２，**java**によるアプリケーション開発

の大きく２つに分けて考えることができます。

#2,　Spring Boot CLI の用意
Groovyを利用したアプリケーション開発には、**「Spring Boot CLI」**というソフトウェアを使います。
**環境変数Pathの設定**も必要です。

#3,　Groovy スクリプトを作成

![code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/4b51270e-9253-06e6-25b8-d5ea5639ce89.png)

#4, app.groovyを実行する
app.groovyがある場所にカレントディレクトリを移動して、以下のように実行

```ruby:
    spring run app.groovy
```

![helloworld.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/d40fc7c3-4429-07b9-8f26-a36a53e4befb.png)

#5, 実行完了
ブラウザに表示されたら成功です:v:

本格的な開発にはJavaを使うので次回は、Javaを使った開発を進めていきます:airplane:
[SwiftUI] Viewを強制再読み込みする賢くない方法

どうしてもViewを再読み込みしたいが、どうやってもうまくいかない、という場合、賢くないですがこの方法でいけます。
**SwiftUIのお気持ちに沿って作っていればそもそも強制再読み込みは必要ないはずなので、対処法として正しいのは設計の見直しです。**

# 対処

```Swift
struct HogeView: View {
    var body: some View {
        Hoge()
    }
}
```

を強制再読み込みしたい場合、

```Swift
struct HogeView: View {
    @State private var flag = true

    func refresh(){
        flag.toggle()
    }

    var mainView: some View {
        Hoge()
    }

    var body: some View {
        Group{
            if flag{
                mainView
            }else{
                mainView
            }
        }
    }
}
```
としてあげれば、flagを切り替えるたびにmainViewが計算しなおされるので実質再読み込みになります。

# 自戒
本当に賢くないのでSwiftUIをちゃんと勉強します。
PHPで標準入力の値を取得するときの注意

# はじめに
fgets(STDIN)で標準入力の値を取得すると改行されることを知らなくてハマったときのこと

# こうなってしまう
```
入力
Hello
```
```PHP
$input = fgets(STDIN);
$length = strlen($input);
echo $input . ' is ' . $length . ' letters.';
```
```
出力
Hello
 is 6 letters.
```

# 対策
そのままだと改行されてしまうし文字数も合わないので改行コードをrtrim()で消す

rtrim()は引数に指定した文字列の最後から空白やタブ、改行などを取り除いてくれる。

```php
$input = rtrim(fgets(STDIN));

printf('%s is %d letters.', $input, mb_strlen($input, 'UTF-8'));

```
```
出力
Hello is 5 letters.
```

# 参照
[PHP:rtrim - Manual]
(https://www.php.net/manual/ja/function.rtrim.php)
PHP 処理で "Warning: Cannot modify header information…" が出たときの解決方法

さくらのレンタルサーバ（スタンダードプラン）で WordPress をおまかせインストールした後、ちょっと色々の必要があって、さくらサーバの「コントロールパネル」を使って `php.ini` を（はじめて）設定したら、

```php
PHP Warning:  Cannot modify header information - headers already sent by (output started at /home/XXXX/www/AAAA.php:NNN) in /home/XXXX/www/index.php on line NNN
PHP Warning:  Use of undefined constant SOME_VALUE - assumed 'SOME_VALUE' (this will throw an Error in a future version of PHP) in /home/XXXX/www/index.php on line NNN
```

などという Warning とともにページが表示されなくなって焦ったのでメモ。問題だったのは 1 行目の `Cannot modify header information…` なのだが、2 行目の Warning も生じていたことにより発見が遅くなった（後述）。

# 環境
* PHP 7.4.10
* さくらのレンタルサーバ
  * 2020/11/23 に発生・解決

# 解決方法
`/home/XXXX/www` 直下にある `php.ini` に以下を設定する。

```php
output_buffering = On
```

さくらインターネットのコントロールパネル的には以下の操作です。

> 1. さくらインターネットコントロールパネルにログイン
> 2. PHP設定の編集をクリック
> 3. php.ini 設定ファイル編集画面で「output_buffering = On」を入力し「保存する」をクリック
> 4. エラーが出ていた所が正常にリダイレクト処理を行っているか確認

参考 :  [[さくらインターネット スタンダードプラン]リダイレクト処理ができない - じゃみじゃみ.net](http://blog.jamijami.net/webserver/1164.html)

# 原因
リダイレクトの際にこれを設定していないとうまく動かないということらしい。「原因」と銘打っておきながらよくわかってない[^1]。

# 発見が遅れたわけ
発見が遅れた理由は次のことが発生したためである。

1. 二行目の Warning の意味がわかってなかった
2. 二行目の Warning 解消で画面表示がなくなり問題に気づかなかった

それぞれ説明しておく。

## 二行目の Warning の意味がわかってなかった
上記の通り

```php
PHP Warning:  Use of undefined constant SOME_VALUE - assumed 'SOME_VALUE' (this will throw an Error in a future version of PHP) in /home/XXXX/www/index.php on line NNN
```

という Warning もでていた。これはシンプルには「未定義な定数だ。ひょっとして任意のテキストか？ テキストならクォーテーションで囲んどけ。将来的なバージョンではエラーになるぞ」という Warning である。ここでは単にユーザ（私）が未定義な変数を参照しようとしているという間違いなのだが、PHP はこれをみて「任意の文字列を入れようとしているならちゃんとクォーテーションで囲めよ」と解釈して、こういった Warning を出しているようである。

これに気づくのに時間がかかり、この Warning が出る行をコメントアウトしたり、むやみにクォーテーションをつけるなど色々試してしまった。

## 二行目の Warning 解消で画面表示がなくなり問題に気づかなかった
結局、先の未定義定数部分を取り除けば問題となるのは `Cannot modify header information...` だけだったのだが、この問題だけになると**ブラウザ画面が真っ白になる**という状態になった。それまではブラウザ画面上にページのコンテンツと共にいくつかの Warning メッセージが吐き出されていたいたのだが、`Use of undefined constant` がなくなると、ブラウザにはまったく何も表示されないのである。そのため結果として

> 二行目 Warning の原因をコメントアウトするかしないかで問題が生じている

と勘違いしてしまい、`Cannot modify header information…` の Warning を調べ始めるまでに時間がかかってしまった。

# 参考資料
* [[さくらインターネット スタンダードプラン]リダイレクト処理ができない - じゃみじゃみ.net](http://blog.jamijami.net/webserver/1164.html)
* [CakePHPをさくらインターネットのサブドメインを使用する環境へインストールする - Wataame Frog](https://nodoame.net/archives/2898)

[^1]: というか……一度さくらのコントロールパネル上で `php.ini` を作って、問題が生じ始めた（Warning 出始めた）ので一旦中身を削除したのに元に戻らないってどういうことやねん、と焦った。`php.ini` を作成する以外に何か処理をしているのだろうか。「php.ini さくら デフォルト」みたいなキーワードで無駄にググったりしてしまった。
error: 'hoge/' does not have a commit checked out

#　はじめに


新しく作ったファイルをpushしようと思い、

```
$ git add .
```
したら、error: 'hoge/' does not have a commit checked outと出た。
.gitがファイルと、ファイルの内のファイルにあったのが原因だった。

# 解決

https://zjschulz.medium.com/error-does-not-have-a-commit-checked-out-573c0ed9c49



このサイトをなぞった。
フロントエンドとバックエンドでファイル一つのファイルにまとめて作るときは、はじめに、リモートに空のファイルををpushしてから、フロント、バックをそのフォルダの中に作成して,add, commit, pushした方がいい。

## 補足

私の場合は、apiとfrontファイルが一つのファイルにまとまっていたのでややこしくなっていた。ls -laコマンドで、.gitがついているファイルがあるかapi,frontそれぞれ確認し、rm -rf .gitで削除してから, add,commit,pushをすると、成功した。
[Rails]collection_selectについて勉強してみた！[初心者]

#はじめに
現在作成しているアプリの中で、``collection_select``を使用する場面があり、備忘録のためにアウトプットします。
正直、このメソッドにたどり着くまでに、メチャクチャ時間がかかりました笑

``collection_select``とは、モデルの情報を元に、セレクトボックスを生成できるメソッドです。
具体的に見ていきましょう！！

#やりたかったこと
セレクトボックス内に、ユーザーの登録済住所を選択肢として用意したかったのですが、どのような記載方法が適切なのか、全然分からなくて、けっこう長い時間グーグル検索して辿り着いたのが、``collection_select``です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/ac24a0ac-bea6-4793-ec94-2c23cc07730f.png)
このセレクトボックスをクリックすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/824345/44691f3d-3655-00eb-0aa7-b10839ddf9e1.png)
というように、登録している住所一覧が出るようにしたかったです！！

#使い方

````
collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
````

````
f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])
````

#使用例

````
<%= f.collection_select(:address_id, @addresses, :id, :order_address, prompt: "選択してください") %>
````

上の``collection_select``がHTMLでどうなっているのか確認すると、こうなっていました。

````
<select name="order[address_id]" id="order_address_id"><option value="">選択してください</option>
  <option value="1">1111111京都市田中</option>
  <option value="2">2222222アメリカ佐藤</option>
  <option value="3">3333333インド安井</option>
</select>
````

それぞれの引数について確認しましょう！！

##第一引数　→　:address_id
第一引数（プロパティ名）は、selectタグのid属性とname属性に関係しています。
今回で言うと、
``name="order[〜〜〜]" id="order_〜〜〜"``
という風に反映されています。

##第二引数　→　:@addresses
第二引数（オブジェクトの配列）は、コントローラで
``@addresses = Address.where(customer_id: current_customer.id)``
と定義しています。
つまり、現在ログインしているユーザー(cuurent_customer)の登録済住所を全て取得しているということです。

##第三引数　→　:id
第三引数（value属性の項目）は、``<option value="〜〜〜">``において。設定したい値のカラム名が入ります。
今回はidカラムの値を設定するので、上記記述となります。

##第四引数　→　:order_address
第四引数（テキストの項目）は、optionタグ内のテキスト``<option>〜〜〜</option>``に設定したい値のカラム名が入ります。

##第五引数　→　prompt: "選択してください")
最後はオプションですが、これを付け足すことにより、``選択してください``の文言が一番上に表示されるようになります。
[Python] DP　ABC184D

#[ABC184D](https://atcoder.jp/contests/abc184/tasks/abc184_d)

X,Y,Zのいずれかが100のときdp(X,Y,Z)=0 です。そうでないとき、どの硬貨を引いたか3通りの場合を考えることで、

dpの定義：　金貨がX枚、銀貨がY枚、銅貨がZ枚のときの答え

dp漸化式の定義：
$dp(X,Y,Z)$
$=\frac{X}{X+Y+Z}(dp(X+1,Y,Z)+1)+\frac{Y}{X+Y+Z}(dp(X,Y+1,Z)+1)+\frac{Z}{X+Y+Z}(dp(X,Y,Z+1)+1)$

dp終端条件：
$dp(M,M,M)=0$

となります。（金貨を引く確率×金貨を引いた時の操作回数の期待値＋銀貨を……）

この式に従ってDPを行うと答えを求めることができます。実装はメモ化再帰により行うと容易です。

```python:サンプルコード
import sys
sys.setrecursionlimit(10 ** 6)  # 再帰数上限の引き上げ


def dfs(x, y, z):  # メモ化再帰
    if dp[x][y][z] >= 0: # 既に値がわかっている場合はそのまま返す.
        ret = dp[x][y][z]
    else:  # 値がわかっていない場合、漸化式により値を求める.
        ret = 0
        S = x + y + z
        ret += x / S * (dfs(x+1, y, z) + 1)
        ret += y / S * (dfs(x, y+1, z) + 1)
        ret += z / S * (dfs(x, y, z+1) + 1)
        dp[x][y][z] = ret  # メモ
    return ret


X, Y, Z = map(int, input().split())
M = 100
dp = [[[-1] * (M + 1) for _ in range(M + 1)] for _ in range(M + 1)]
# 終端条件（初期化）
for i in range(A, M + 1):
    for j in range(B, M + 1):
        for k in range(C, M + 1):
            if i == M or j == M or k == M:
                dp[i][j][k] = 0

# dp(X, Y, Z)が求める答え
print(dfs(X, Y, Z))
```
【Rails】重複した要素を取り除くメソッド！

現在作っているウェブアプリで、記事を投稿したユーザーの画像と名前をサイドバーに一覧表示したい！と思って使ったメソッドの話です。

まずやってみたのは、controllerで投稿ユーザーの情報をインスタンス変数 @post_usersに代入。

```ruby
def post_users
  @post_users = Post.select(:user_id)
end
```

その後、viewのファイルで@post_usersから要素を取り出して表示。

しかしこのやり方だと（当然ですが）ブログの投稿の数だけユーザーの写真と名前が表示されてしまいます（写真ではuserの象が２つ出てきている）。
![スクリーンショット 2020-11-23 21.58.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634245/4c06fa84-9147-45e9-2f29-e6ffbf7c784a.png)


そこで使ったのがdistinctメソッドです。Railsガイドにも記述がありました。
https://railsguides.jp/active_record_querying.html
(下記Railsガイドより)
>特定のフィールドについて、重複のない一意の値を1レコードだけ取り出したい場合、distinctを使用できます。

>Client.select(:name).distinct
上のコードを実行すると、以下のようなSQLが生成されます。

>SELECT DISTINCT name FROM clients

「重複のない一意の値を1レコードだけ取り出したい場合」というのがいかにもRailsガイドっぽい言い回しの気がしますが、、、要するに
>モデル.select(:取得する列).distinct"

の形にすれば、重複した要素をはじいてくれるようです。早速controllerにdistinctを追加。

```ruby
def post_users
  @post_users = Post.select(:user_id).distinct
end
```

今度はうまくいきました。
![スクリーンショット 2020-11-23 21.57.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634245/afb0ad2e-d6dd-6d29-4e3e-ce4f95edb711.png)