OmniAICreator/Qiita-1.07M huggingface dataset:
MuleSoftのBasic Endpointを試してみよう！

# はじめに
　MuleSoftではAPIのポリシーを適応する場合、リソース使用量やデプロイの観点から、MuleアプリケーションにはBasic Endpointの適応が推奨されています。
　ただし、実際に構築する際にAPI Proxyとは違い手作業の手順が多く、ヘルプを見ただけでは全体的な手順を把握することが難しく、動かすためにはMuleSoftのアーキテクチャの知識が必要になります。私は、色々試してみてやっと設定する方法が分かりました。。。
　ここでは、Basic Endpointの設定手順やハマったところをご説明します。

# Basic Endpointとは
Basic Endpointの説明は以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/118f3929-4d9a-e9f9-1847-8b0c43289a42.png)

# Basic Endpoint設定の流れ
設定手順は以下の通りです。
説明１と説明２については、補足説明として説明します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/99b02409-2511-02e6-5d52-7c1cfe74eaea.png)


## API と MuleSoftのペアリング（説明１）
自動検出用の”API ID”を利用してペアリングを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/76d3f9c0-a120-f954-31ed-8585358bc352.png)

[公式ヘルプ：Mule 4 アプリケーションでの API ゲートウェイの API 自動検出の設定](https://docs.mulesoft.com/jp/api-manager/2.x/configure-autodiscovery-4-task)

## APIインスタンスの管理（説明２）
アプリケーションのプロパティーに環境のクライアントID情報を設定し、API Manager管理に追加します。

環境のクライアントIDとシークレットをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/633f8b6b-df10-ae0d-cfa1-d0487b2d5875.png)

Runtime ManagerにコピーしたクライアントIDとシークレットを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/50e43496-e2d5-e845-2e2a-4706be93dd63.png)

```
anypoint.platform.client_id={対象組織のクライアントID}
anypoint.platform.client_secret={対象組織のシークレット}
```

[公式ヘルプ：API Manager における環境への API インスタンスの分類 > Runtime Manager を介してデプロイされた基本エンドポイントまたはプロキシを使用して API インスタンスを管理する](https://docs.mulesoft.com/jp/api-manager/2.x/classify-api-task)

# 動作確認
API実行時に最新のポリシーが適応されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/e214a5cb-0030-d912-85b1-796aebee739a.png)

## トラブルシューティング（忘れがちな重要ポイント！）
事象：Runtime Managerで“Deploy failed”で起動できない。
解決法：アプリケーションのプロパティーに環境のログイン情報(Client ID, Client Secret)が登録すると解消されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76270/f7c0ec2e-f332-ea39-471c-9ed6208fd493.png)

# まとめ
　ここまで、設定の流れ、動作確認、トラブルシューティングを説明してきました。
　作業手順が確立していれば、Basic Endpointを利用した検証をする際に、環境がササっと準備できるとプロフェッショナル感がフワッとでそうですね。
　MuleSoft ライフをエンジョイしてください。では！！
既存のプロジェクトをリモートリポジトリにpushするまで

コピペ用

# 1, [GitHub](https://github.com/)で空のリモートリポジトリを作成

# 2, ローカルリポジトリを作成

作業ディレクトリに移動

```
cd /dev/sample
```
Gitディレクトリを作成

```
git init
```
作業ディレクトリ内の全てのファイルをステージングエリアに追加

```
git add *
```
ローカルリポジトリにコミット（ステージングエリアのファイルをローカルリポジトリに登録）

```
git commit -m 'initial commit'
```

# 3, リモートリポジトリを登録

```
git remote add origin git@github.com:fujisawatk/sample.git
```

# 4, リモートリポジトリへプッシュ（ローカルリポジトリに登録された情報をリモートリポジトリに追加）

```
git push origin master
```

# 参考
https://qiita.com/satoshi1335/items/ead109412430a078feaa
デザインなしが意味無しか

WEBは時代が変わってきました。昔のようなフレームデザインは淘汰される。モバイルファーストインデックスというGoogle主導の考え方で激変します。スマホに最適化されていないサイトはアクセスが急減。これが旧来型のサイトでは死活問題です。

<a href="https://pressurize-shirt.com/kaatushirt-comparision-list-matome/" >加圧シャツ比較一覧</a>サイトは最近作られたものです。昔のサイトはこれから消滅の危機に瀕する。それはつまりCSSやデザインやユーザーフレンドリーなサイトではないといけないのです。サイズが小さすぎること。反対に大きすぎることで、検索順位が急落。検索圏外になるのも現代のWEB事情特有でした。

<a href="https://note.com/romkun/n/nf90330bfd35a" >ノート</a>のようなサイトはモバイルファースト。しかしデザインはシンプルです。このようなサイトがUXに優れているのでしょうか。サイトの総合評価は、文章や画像やデザインなど総合的に決まります。Noteのようなサイトでも上位表示例はあり。しかしサイトの価値とは総合的になりつつあります。
GCPでロードバランサのアクセスログをBigQueryに同期する

# はじめに

現在、GCPでロードバランサとCompute Engineを使ってWebサービスを公開しています。

**構成**
`インターネット <--> Cloud Load Balancing(GCP) <--> Compute Engine(GCP)`

GCPのCloud Loggingの機能を使うと、ロードバランサのアクセスログをBigQueryにリアルタイムに同期することができます。

BigQueryを使ってアクセスログを解析したいときに手軽に利用することができます。

同期の方法と、簡単な解析のサンプルを紹介します。

# シンクの作成

まずは「Logging > ログルーター」からシンクを作成します。

「Cloud HTTP ロードバランサ」から同期したいロードバランサを選択します。
シンクサービスは「BigQuery」を選択して、シンクのエクスポート先のBigQueryのデータセットを選択して、シンクを作成します。
<img width="617" alt="sync.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278715/03454d2a-63e9-a2ef-746f-d3f867f7a560.jpeg">


# BigQueryで解析

シンクしたログは日別のテーブルに格納されます。
requests_20200421
requests_20200422
requests_20200423
：

「HTTPステータス」「ユーザーエージェント」「リファラ」「リクエストURL」「IPアドレス」「リクエストサイズ」などのカラムがあるので解析していきたいと思います

テーブル名の（your-project.your_dataset.requests_20200421）は、ご自身のアカウントのものに置き換えてください。

## HTTPステータスを解析
500番台のリクエストを表示

```sql
SELECT * FROM `your-project.your_dataset.requests_20200421` WHERE httpRequest.status >= 500
```

## リファラを解析
参照サイトの多い順に表示
ドメイン名の（example.com）は、ご自身のサイトのドメインに置き換えてください。

```sql
 SELECT
   httpRequest.referer AS referer,
   COUNT(*) AS access_count
 FROM `your-project.your_dataset.requests_20200421`
 WHERE httpRequest.referer NOT LIKE '%example.com%'
 GROUP BY referer
 ORDER BY access_count DESC
```

## ユーザーエージェントを解析
アクセスされたユーザーエージェントの多い順に表示

```sql
 SELECT
   httpRequest.userAgent AS user_agent,
   COUNT(*) AS access_count
 FROM `your-project.your_dataset.requests_20200421`
 GROUP BY user_agent
 ORDER BY access_count DESC
 ```

# おわりに
Fluentdなどでログを収集してBigQueryにインサートすることもできますが、ロードバランサのアクセスログを同期することで、手軽にBigQueryのアクセス解析が始められます。
論文の読み方

<!-- wp:paragraph -->
<p>論文の読み方に関する資料。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://web.stanford.edu/class/ee384m/Handouts/HowtoReadPaper.pdf">https://web.stanford.edu/class/ee384m/Handouts/HowtoReadPaper.pdf</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>目的によって以下の３つの段階(the three-pass approach)で論文を読むことを推奨</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>概要を抑える</li><li>内容を把握する</li><li>詳細を理解する</li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>The First Pass: 概要を抑える</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>目的：俯瞰して読み、読むべき論文かどうか判断すること<br>所要時間：５～１０分<br>方法：以下の手続きで論文を読み、その後チェックする<br>読み方</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>タイトル、アブスト、イントロを注意深く読む</li><li>各節の見出しだけ読む、その他は無視</li><li>結論を読む</li><li>読んだことがある論文があるかリファレンスを確認する</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>チェック項目</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>分類：論文の種類は？</li><li>文脈：関連している論文は？どんな解析が使用されている？</li><li>正確性：仮定や前提は正しそうか？</li><li>貢献性：論文の主な貢献は？</li><li>明確性：論文は良く書かれているか？</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>以上の手続きから論文が、興味が異なる、理解するための知識が足りない、前提がおかしいということが分かった場合、これ以上その論文を読むべきでないと判断できる</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>The Second Pass: 内容を把握する</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>目的：根拠ともに内容を理解する<br>所要時間：１時間<br>方法：以下の点に気を付けて読む</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>図や説明を注意深く読む。特にグラフはよく見る。<br>軸は適切か？エラーバーはあるか？統計的に有意か？<br>こんなミスがあったらそれはやっつけ仕事の論文かもしれない</li><li>未読のリファレンスを覚えておく</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>この段階まで完了すれば、根拠を示しながら内容を要約することができる。<br>このレベルの粒度は興味を持っているけれど自分の専門分野でない論文では十分。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ここまでやって分からないときは知らない専門用語を伴う新しいテーマであったり、知らない実験や解析手法が用いられているとき。そんなときは以下の選択肢のうちどれかをとる</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>そこまで理解しなくても問題ないとして、横に置いておく</li><li>背景を読んだ後、また読む</li><li>third passへ進む</li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>The Third Pass: 詳細を理解する</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>目的：論文を完全に理解する<br>所要時間：４～５時間（初心者<br>　　　　　１時間（熟練者<br>方法：仮想的に論文の内容をトレースする<br>著者になったつもりで論文が取り上げている課題を解決しようとしてみる<br>その後で改めて論文と比較することにより、革新的な点や隠れた失敗や仮定が分かるようになる<br>このパスが完了したら記憶から論文の内容を再構築できるようになり、強みと弱みが分かる</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>　文献調査方法</h2>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><li>関連するキーワードで検索をかけ総説がないか探す<br>もし見つかったらその総説を読む</li><li>よく引用されている論文や著者を探す<br>著者のwebサイトへ行き、その分野カンファレンスを探す</li><li>カンファレンスで最近の論文を収集する</li><li>収集した論文をもとに1-2passを実施する</li><li>未読の重要論文がリファレンスにあればそれらを加えて同じステップを繰り返す</li></ol>
<!-- /wp:list -->
HTMLは意味がない

コンテンツマーケティングの時代。反対にコンテンツの中でも質がなにか問われてきています。つまりとにかく役立つ情報を発信しているだけでは評価されない時代になっています。HTMLよりはコンテンツの中身。つまり文章や画像やその他JAVAやプログラムに価値があるのかでした。

これからは総合的な評価が求められています。雑に作ったサイトは生き残れない。サイトの質とはHTMLの構文にも及んできました。<a href="https://ps-game-cheap.net/donnatokimo-wifi-review/" >どんなときもWi-FiとWiMAX比較</a>サイトではデザインCSSも重視。

例えばブログサービスではどうでしょうか。<a href="https://medium.com/@ant07420mm/%E5%8A%A0%E5%9C%A7%E3%82%B7%E3%83%A3%E3%83%84%E4%BA%8B%E6%83%85-cd3bf595c161" >Medium</a>というブログでは文字のみでカスタマイズ性はありません。NOTEと同じように、文章や画像などが中心です。HTMLよりは文章。ブロガー向きですが、そのブロガーがネットで今苦戦しているのです。
同一ページに対して２つのsubmit(POST)【Ruby】

１つのHTMLのページに２つのformと2つのsubmitボタンがあり、かつ、formのactionが同じページを指定している時の処理の分け方です。
サーバーサイドはRubyを使用しています。

# HTML
```html:index.erb
<html>
  <head>
    〜〜〜〜〜中略〜〜〜〜〜
  </head>
  <body>
    <form action="/" method="POST">
      〜〜〜〜〜中略〜〜〜〜〜
      <input type="submit" name="post" value="投稿">
    </form>
      〜〜〜〜〜中略〜〜〜〜〜
    <form action="/" method="POST">
      〜〜〜〜〜中略〜〜〜〜〜
      <input type="submit" name="delete" value="削除"> 
    </form>
  </body>
</html>
```
このように、両方のformのactionが`"/"`を指定しているとします。
ここで記述しておくのが、submitボタンに対しての`name属性`です。

# Ruby
```app.rb
post "/" do
 if params[:post]
  # submitmのnameがpostのformの処理
 end

 if params[:delete]
  # submitmのnameがdeleteのformの処理
 end

 erb :index
end
```
このように書けば、同じページに対して複数のPOSTがあったとしても処理を分けられるみたいです。

【参考記事】
[【Ruby on Rails】呼び出し元のボタンによって処理を分けたい場合](https://teratail.com/questions/101815)
【Swift】メソッドの書き方②

【パターン２】
パターン１よりも汎用性がある書き方

```
func test ( s: String ) {

     print(s)

}

test ( s: "プログラミング" ) //文字列『プログラミング』が出力される。

test ( s: "AI" ) //文字列『AI』が出力される。
```

※　s：　仮引数

■仮引数を持たせる理由
決まった値ではなく、いろんな値を代入し、汎用性を持たせるため。
pandasでNull値やNull値以外を抽出する方法

データ準備

df=pd.DataFrame(np.random.randn(5,5))
df.columns=list('ABCDE')
df.iloc[1,1]=np.nan

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370345/9b9b1a4c-6637-fbad-23d5-5dd9648f8880.png)


B列のNull値を抽出
isnull()を使用

df[df['B'].isnull()]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370345/6d057334-b204-7268-e192-6392eaafc6d7.png)


B列のNull値以外を抽出
isnull()で抽出を否定（~）で抽出

df[~(df['B'].isnull())]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370345/5fa86663-7f8a-1a07-342d-b0dade4146c2.png)
[GCP] Cloud Loggingのログ保持期間を変更する

Cloud Logging（旧称Stackdriver Logging）のログ保持期間は長らく変更不可でしたが、[2020-06-05に保持期間の変更機能が一般提供されました](https://cloud.google.com/logging/docs/release-notes#June_05_2020)。
保持期間の変更が可能なログ（バケット）とその方法は、次の公式ドキュメントに記されています。

- [Storing logs | Cloud Logging | Google Cloud](https://cloud.google.com/logging/docs/storage#logs-retention)

以下では、[gcloud beta logging buckets](https://cloud.google.com/sdk/gcloud/reference/beta/logging/buckets)コマンドの実行結果を紹介します。

# gcloud beta logging bucketsを使う

```sh:ログバケット一覧の表示
% gcloud beta logging buckets list
LOCATION  BUCKET_ID  RETENTION_DAYS  LIFECYCLE_STATE  LOCKED  CREATE_TIME  UPDATE_TIME
global    _Default   30              ACTIVE
global    _Required  400             ACTIVE
```

## `_Default` バケットのログ保持期間を変更

```sh:_Defaultバケットのログ保持期間を変更
# 変更前
% gcloud beta logging buckets describe _Default --location=global
description: Default bucket
lifecycleState: ACTIVE
name: projects/[PROJECT_ID]/locations/global/buckets/_Default
retentionDays: 30

# 変更実行
% gcloud beta logging buckets update _Default --location=global --retention-days=90

# 変更後
% gcloud beta logging buckets describe _Default --location=global
description: Default bucket
lifecycleState: ACTIVE
name: projects/[PROJECT_ID]/locations/global/buckets/_Default
retentionDays: 90
updateTime: '2020-04-23T23:08:14.491801134Z'
```

## `_Require` バケットのログ保持期間は変更不可

ドキュメントに記載されている通り、 `_Require` バケットのログ保持期間を変更することはできません。
コマンドを実行するとエラーになりました。

```sh:_Requireバケットの保持期間変更を試す
% gcloud beta logging buckets update _Required --location=global --retention-days=365
ERROR: (gcloud.beta.logging.buckets.update) FAILED_PRECONDITION: This bucket is locked. Locked buckets are immutable
```

# むすびに

Cloud Loggingのログ保持期間が短いため、BigQueryやGCSなどにエクスポートしていた方が多いのではないでしょうか。
Cloud Loggingで最長10年間までの保持が可能になれば、そうした手間を省く有力な選択肢になると思います。
一般提供時のストレージのコストは1GBあたり毎月$0.01と予定されているそうで、これはGCSのNealine Storage相当の価格です（2020-04-24現在）。このコストは、ログ保持期間をデフォルトより長くしたログの使用量に適用されるようです。
【SQL】COALESCEで値が「NULL」だった場合に別の値を返す

## COALESCE関数とは

COALESCE(コアレス)とは、リストの最初の非NULL値を返します。非NULL値がない場合は、NULLを返す関数です。

例)

```sql

SELECT COALESCE('山田', '鈴木', '田中');
/*
 =>
 '山田'
*/

SELECT COALESCE(NULL, '鈴木', NULL);
/*
 =>
 '鈴木'
*/

SELECT COALESCE(NULL, NULL, '田中');
/*
 =>
 '田中'
*/

SELECT COALESCE(数値型の列, 0);
/*
 数値型の列の出力
 NULLが格納されている場合は0を返す
*/

```

## COALESCEで「NULL」を別の値に置き換え

例1) ユーザーテーブル

| 名前 | ポイント | 性別 |
| :--- | :--- | :--- |
| 山田 | 200 | 男 |
| 鈴木 | 220 | NULL |
| 田中 | 250 | 女 |

```sql
SELECT 名前, ポイント, COALESCE (性別, 'この値はNULLです') AS 性別
FROM ユーザー
```

例1の結果

| 名前 | 年齢 | 性別 |
| :--- | :--- | :--- |
| 山田 | 200 | 男 |
| 鈴木 | 220 | この値はNULLです |
| 鈴木 | 250 | 女 |

***

例2) ユーザーテーブル

| 名前 | ポイント | 性別 |
| :--- | :--- | :--- |
| 山田 | 200 | 男 |
| 鈴木 | 220 | 女 |
| 田中 | NULL | 女 |

```sql
SELECT 名前, COALESCE (ポイント, 0) AS ポイント, 性別
FROM ユーザー
```

例2の結果

| 名前 | 年齢 | 性別 |
| :--- | :--- | :--- |
| 山田 | 200 | 男 |
| 鈴木 | 220 | 女 |
| 田中 | 0 | 女 |

値がNULL際に任意の値を返したい時に使えます。COALESCEを使用する際は、RDBによって関数の動作が異なる場合があるので、お使いのRDBの公式サイトでCOALESCEの動作確認した方が良いですね。

## 参考

[MySQL公式サイト](https://dev.mysql.com/doc/refman/5.6/ja/comparison-operators.html)
[スッキリわかるSQL入門](https://www.amazon.co.jp/dp/4295005096/ref=cm_sw_em_r_mt_dp_U_bEIOEb7FB5D67)
[【MySQL】最初に見つかった「NULLじゃない」値を返すCOALESCE()を使ってみる。](http://bashalog.c-brains.jp/18/02/28-171400.php)
Terminatingのまま止まっているPodを一括削除する

#現象
たまにJenkins + Kubernetes で動かしているJobのPodがTerminatingで止まり、かつ複数Pod起動したままとなっている。
```
root@yourdomain:/# kubectl get pods
NAME                         READY   STATUS        RESTARTS   AGE
generatedomain-ksjvd-12xz9   1/2     Terminating   0          6h14m
generatedomain-ksjvd-2dnf5   1/2     Terminating   0          7h40m
generatedomain-ksjvd-45nmq   1/2     Terminating   0          5h40m
generatedomain-ksjvd-dg08q   1/2     Terminating   0          7h38m
generatedomain-ksjvd-l1lzg   1/2     Terminating   0          7h39m
generatedomain-ksjvd-qrgnf   1/2     Terminating   0          7h33m
generatedomain-ksjvd-qwr9d   1/2     Terminating   0          7h35m
generatedomain-ksjvd-qxpzl   1/2     Terminating   0          7h36m
generatedomain-ksjvd-sz0sq   1/2     Terminating   0          7h34m
generatedomain-ksjvd-wjpg0   1/2     Terminating   0          7h37m
```

#一括削除
1つづつ削除すると面倒なので下記コマンドで一括削除
```
kubectl get pods | awk '{if ($3 ~ /Terminating/) system ("kubectl delete pods --grace-period=0 --force " $1)}'
```

#参考にさせて頂いた記事
[k8sでEvictedされたpodを一括削除する](https://qiita.com/keizokeizo3/items/84a3ece88cd86fde9f75)
#rspec で allow_any_instance_of / expect_any_instance_of が非推奨な理由

# 何？

- ひとつのクラスのすべてのインスタンス+特定メソッドに対して expect / allow してしまうので、単純に、エッジケースをカバーできないでしょう (同じクラスが2個以上のインスタンス生成・メソッド実行する場合はどうするの？)
- allow_any_instance_of / expect_any_instance_of を使うということはそもそも、テストがやりすぎか、複雑で乱れているケースでは？
- rspec-mocks で多くのバグレポートが上がった歴史があるらしい

というようなことが書いてある気がした。

# Doc

Settings mocks or stubs on any instance of a class

rspec-mocks provides two methods, allow_any_instance_of and expect_any_instance_of, that will allow you to stub or mock any instance of a class. They are used in place of allow or expect:

```
allow_any_instance_of(Widget).to receive(:name).and_return("Wibble")
expect_any_instance_of(Widget).to receive(:name).and_return("Wobble")
```

These methods add the appropriate stub or expectation to all instances of Widget.

This feature is sometimes useful when working with legacy code, though in general we discourage its use for a number of reasons:

- The rspec-mocks API is designed for individual object instances, but this feature operates on entire classes of objects. As a result there are some semantically confusing edge cases. For - example in expect_any_instance_of(Widget).to receive(:name).twice it isn't clear whether each specific instance is expected to receive name twice, or if two receives total are expected. (It's the former.)
- Using this feature is often a design smell. It may be that your test is trying to do too much or that the object under test is too complex.
- It is the most complicated feature of rspec-mocks, and has historically received the most bug reports. (None of the core team actively use it, which doesn't help.)

[rspec/rspec-mocks: RSpec's 'test double' framework, with support for stubbing and mocking](https://github.com/rspec/rspec-mocks#settings-mocks-or-stubs-on-any-instance-of-a-class)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3087











<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
マネージャー

```py
import logging
import multiprocessing
import time

logging.basicConfig(level=logging.DEBUG, format='%(processName)s: %(message)s')


def worker1(l, d, n):
    l.reverse()
    d['x'] +=1
    n.y += 1


if __name__ == '__main__':
    with multiprocessing.Manager() as manager:
        l = manager.list()
        d = manager.dict()
        n = manager.Namespace()

        l.append(1)
        l.append(2)
        l.append(3)
        d['x'] = 0
        n.y = 0

        p1 = multiprocessing.Process(target=worker1, args=(l, d, n))
        p1.start()
        p1.join()

        logging.debug(l)
        logging.debug(d)
        logging.debug(n)
```

```txt
MainProcess: [3, 2, 1]
MainProcess: {'x': 1}
MainProcess: Namespace(y=1)
```
【Unity】クラスや関数の名前の先頭は大文字な件→アッパーキャメルケース

#はじめに
クラス名や関数名の名前の付け方は、
プログラミング界隈では一般常識があるようです。

個人制作では関係無いですが、頭の片隅にでも入れておきましょう。

#結論
クラスや関数の名前は
複合語の先頭を、大文字で書き始める
**アッパーキャメルケース**
で書くのが一般的なようです。

例)
PushButton
GetNumber

#書き方の種類
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613985/c56b5d32-ad60-17cf-447e-5ec6be27e662.png)

#さいごに
私がこの内容を知るまでは、
単語の頭を大文字にしてアンダースコアで区切ってました。
(個人開発なので好きに名前つけ放題)

Unityのクラス名は大文字から始まるので
知っていて損はしない知識だなと感じました。

単語の最初は大文字で書く！！
これをやり始めてから、なんちゃってエンジニア気分で開発してます笑
プロセス間での共有メモリ

```py
import logging
import multiprocessing
import time

logging.basicConfig(level=logging.DEBUG, format='%(processName)s: %(message)s')


def f(num, arr):
    logging.debug(num)
    num.value += 1.0
    logging.debug(arr)
    for i in range(len(arr)):
        arr[i] *= 2

if __name__ == '__main__':
    num = multiprocessing.Value('f', 0.0)
    arr = multiprocessing.Array('i', [1, 2, 3, 4, 5])

    p1 = multiprocessing.Process(target=f, args=(num, arr))
    p2 = multiprocessing.Process(target=f, args=(num, arr))
    p1.start()
    p2.start()
    p1.join()
    p2.join()
    logging.debug(num.value)
    logging.debug(arr[:])
```

```txt
Process-1: <Synchronized wrapper for c_float(0.0)>
Process-1: <SynchronizedArray wrapper for <multiprocessing.sharedctypes.c_int_Array_5 object at 0x1113b73b0>>
Process-2: <Synchronized wrapper for c_float(1.0)>
Process-2: <SynchronizedArray wrapper for <multiprocessing.sharedctypes.c_int_Array_5 object at 0x1113b73b0>>
MainProcess: 2.0
MainProcess: [4, 8, 12, 16, 20]
```
パイプ

```py
import logging
import multiprocessing
import time

logging.basicConfig(level=logging.DEBUG, format='%(processName)s: %(message)s')


def f(conn):
    conn.send(['test'])
    time.sleep(5)
    conn.close()


if __name__ == '__main__':
    parent_conn, child_conn = multiprocessing.Pipe()
    p = multiprocessing.Process(target=f,args=(parent_conn, ))
    p.start()
    #p.join() プロセスが終了するまで待つ場合はコメントアウトする
    logging.debug(child_conn.recv())
```

```txt
MainProcess: ['test']
```
初心者によるプログラミング学習ログ 298日目

#100日チャレンジの298日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
298日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>298日目　2h<br>・xdデザインカンプからのサイト模写<br>・ハンバーガーメニュー作成<br>・三本線を×印に<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1253419017512947712?ref_src=twsrc%5Etfw">April 23, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【初心者】webpackってなんぞ

#webpackとは
**Node.jsでサーバーサイドで動かすモジュールバンドラーツール**

##モジュールとは
プログラムのJavaScriptファイルやSCSSファイルのこと
webpackを使うと、複数のjsファイルを１つのjsファイルにまとめたりできる。

##バンドル(bandle)
束にするという意味
webpackはモジュールを束にする。


##webpackを使うメリット
- コードが読みやすくなる
- 保守性が高くなる
- コードをほかプロジェクトに転用しやすくなる
- JavaScriptだけでなく、CSSや画像もバンドルできる
- 包括的な開発環境が整うため、開発作業の分担やテストがしやすくなる
- jsファイルがまとまっていると、複数ファイルの場合に比べブラウザでjsを読み込む時間も短くなる
Laravel 7 で開発と本番のSeederクラスをサブフォルダに分ける

#やりたいこと
開発用のSeederと本番での初期挿入のSeederを分けて使いたい

環境
Laravel7

#やりかた
フォルダ構成を下記のようにする

 - database
   - seeds
     - local
     - production

まずは適当なSeederクラスを作成して開発と本番のディレクトリにコピー

```
php artisan make:seeder HogeSeeder
```

サブディレクトリ内で同一のSeederクラス名をつけたかったのと、
IDEで呼び出すときに補完が効かなくなるので
名前空間を追加

```php

<?php

namespace Database\Seeds\Local;#追加(本番要はLocalの箇所をProductionに)

use App\Hoge;
use Illuminate\Database\Seeder;

class HogeSeeder extends Seeder
{
    public function run()
    {
        factory(Hoge::class, 20)->create();
    }
}
```

あとは`DatabaseSeeder`でよびだす

```php
<?php

use Database\Seeds\Local;
use Database\Seeds\Production;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class DatabaseSeeder extends Seeder
{
    const LOCAL = [
        Lcal\AreasTableSeeder::class,
    ];

    const PROD = [
        Production\OccupationsTableSeeder::class
    ];

    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        DB::transaction(function () {
            $this->call(App::isLocal() ? self::Local : self::PROD);
        });
    }
```

```
composer dump-autoload
```
ToolBarにボタンを適切に配置したい

ToolBarにボタンを配置したい！と思ったもののボタンが左にしか配置されなかったり色々苦労しました。
なかなかストライクな記事がなかったので、共有しようと思います。

##最終的にできるもの
<img width="200" alt="スクリーンショット 2020-04-24 4.16.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/b446aaab-07b2-038c-2911-d2cccd31cd15.png">

##解決方法
<img width="200" alt="スクリーンショット 2020-04-24 4.26.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/26f221d6-3d69-9f7f-ddae-8490fe3d8f34.png">

ToolBarを配置して、そこにBar Button ItemとFixed Space Bar Button Itemを交互に配置すればいいだけでした。

##参考サイト
https://techacademy.jp/magazine/2804
Vue.js入門準備


　JavaScriptも初心者ですが、Vue.jsに入門しようと思います。
Vue.jsを使い始めるにあたってドキュメント等の理解を早めるためにも、
事前知識としてVue.jsとはどのようなものか、分かる範囲で簡単に調べてまとめてみました。

#Vue.jsとは
　JavaScriptフレームワークの１つで、MVVMという設計パターンを採用している。
　React、Angularとならんで人気がある。

#特徴
##リアクティブなデータバインディング
　HTMLテンプレート内でデータバインディングを指定することで、DOMとJavaScriptのデータが同期され続ける。
　データを変更する度にDOMが、DOMを変更する度にデータがそれに応じて更新される。
　
##コンポーネントシステム
　WebアプリケーションのUIをコンポーネントとして設計・実装すると、再利用性が高く、カプセル化され開発が楽になる。
　コンポーネントを組み合わせることで大規模なアプリケーション構築もできる。

##高速なレンダリングシステム
　Vue.jsは仮想DOMというものを採用している。実際のDOMと同じ構造の仮想DOMを用意し、仮想DOMに対して処理を行って生まれた差分のみを実際のDOMに反映するという仕組み。
　この仕組みによりDOMを高速にレンダリングできる。

#設計思想
　どんな規模でも対応できるプログレッシブフレームワーク。
　プログレッシブフレームワークが解決する領域には以下の６つがあって、どんな
規模・段階のアプリケーションにも適用できるように、段階的に柔軟に使えるよう
に設計されている。

##１.宣言的レンダリング（Declarative Rendering）
　レンダリングする対象をテンプレートに宣言的に記述することで、データを変更する度に、ユーザー入力によるデータの同期とリアクティブなDOMレンダリングが可能になる。Vue.js本体に備わる機能。
　シンプルなWebページなどの小規模なものはこの領域で対応できる。

##２.コンポーネントシステム（Component System）
　１よりも少し複雑な、UIをモジュール化して再利用する必要がある領域。
　UIを構造化（モジュール化）してコンポーネントとして再利用することで、
開発効率が向上できる。Vue.js本体に備わる機能。

##３.クライアントサイドルーティング（Client-side Routing）
　SPAのWebアプリケーション構築も、Vue.jsが提供する「vue-router」を利用する
ことで、これまで作成したコンポーネントを利用して対応できる。

##４.大規模向け状態管理（Large-scale State Management）
　コンポーネント間で状態の共有が必要な領域では、Vue.jsが提供する状態管理
ライブラリである「vuex」を利用することで、既存のコンポーネントを拡張して
状態を集中管理できる。

##５.ビルドシステム（Build System）
　Webアプリケーションのコンポーネントの管理や本番環境への配信、プロジェクト構成について考える必要がある領域。
　Vue.jsが提供する開発サポートツールである「vue-cli」「vueify」「vue-loader」を利用して、本質的ではないプロジェクトの環境構築や構成管理に時間を費やすことなく継続的な開発を持続できるようになる。

##６.クライアントサーバーデータ永続化（Client-server Data Persistence）
　クライアントサイドとサーバーサイドにおいてWebアプリケーションの複雑な
データ構造の永続化が必要な領域。
　今回調べた情報では、この段階における公式ライブラリがもう存在するのか否かに
ついてはよくわからなかった。

#参考資料
- [gihyo.jp>Vue.js入門 ―最速で作るシンプルなWebアプリケーション>第1回　プログレッシブフレームワーク Vue.js](http://gihyo.jp/dev/serial/01/vuejs/0001)
- [もがき系プログラマの日常>Vue.js入門 基礎から実践アプリケーション開発までを読んだ vol.1](https://kojirooooocks.hatenablog.com/entry/2018/12/01/180000)
Chromeでお気に入りバーへジャンプするショートカット

### はじめに
ふと思いついたので書きました。
意外とみんな知らない（そして知っていると時々使う）ショートカット。

### コマンドはこちら

| OS | command |
|---|---|
| Windows | Alt+Shift+B |
| Mac | ??? |

### 勝手にハッシュタグ
\#知られざるChromeショートカットキー
\#しれっと使っているとカッコイイ（個人の見解です）
\#公式にも載っていない！ -> 参考: [\[公式\]Chromeのキーボードショートカット](https://support.google.com/chrome/answer/157179?hl=ja)
\#Macのショートカットキーは人生でTotal 10時間くらい調べたけど、いまだに見つかっておりません...(T_T)  
  
  
（余談）
最近、職場が変わってPCがMac -> Windowsになったんですよね...。

以上、お読みいただきありがとうございました。
tumo.jp
Ruby present

present?とかよく見るけど、なんだっけ？ってよくなるので、ここに簡単にメモ。

##present?
オブジェクトに値が格納されているかを判定するメソッド。

#####構文例

```
 if オブジェクト.present  
```

##似たメソッド

####nil?
オブジェクトの値がnilの場合、trueになる

####empty?
オブジェクトの値（様々なデータ型）が空である場合、trueになる

####blank?
オブジェクトの値が、nil、false、様々なデータ型の値が空（スペースなども）だった場合、trueになる。empty?、nil？のorバージョンみたいなもの
ESP32にATコマンドファームを焼くとリブートを繰り返した原因

## ESP32-WROOM32にATコマンドファームを焼くとリブートを繰り返した

### ATファームを焼くとリブートを繰り返した
ESP32-WROOM32にATファーム(Ver1.12)の書き込みに成功後、ESP32の電源を抜き差しして再起動した。
ESP32のUART0に、次のログを出力後、リセットがかかり再起動を繰り返した。

```text:UART0
rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
ets Jun  8 2016 00:22:57
  ……省略……
I (539) boot: Loaded app from partition at offset 0x100000
I (539) boot: Disabling RNG early entropy source...

rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
ets Jun  8 2016 00:22:57
  ……省略……
I (539) boot: Loaded app from partition at offset 0x100000
I (539) boot: Disabling RNG early entropy source...
  
rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT)
ets Jun  8 2016 00:22:57
```
  

### 環境、動作確認
図のようにstm32vldiscoveryの3.3vPINからESP32の電源を供給した。
stm32vldiscoveryにはファームを焼いていてプログラムが動作していた。

![回路図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419346/9c5f5781-3ceb-d097-b801-54035788dd22.jpeg)

ESP32のUART0とPCを接続した。コンソールから出荷時書き込み済みのSSCコマンドを実行して、Wifi-APに接続出来るのを確認した。
回路的に問題ないと判断した。

```text:UART0
sta -S
+SCAN:ASUS-XXXXXX,aa:xx:yy:zz:xx:xx,4,2,-56,0,0
  ……

sta -C -s ssid -p password
```

同じ回路でATファームの焼き込みをして、エラーなく「Finished」が表示されるのを確認した。
電源を抜き差しして再起動するとリブートを繰り返した。

### 原因と対処
ESP32のDIP化キットの説明書に次の注意事項があった。
> USB2.0までの500mA出力や1AのUSB充電アダプタを定電圧ICで3.3Vに変換して供給に利用した場合、電流不足になる可能性があります。

ARMの評価ボードから電源を取っていたので、ESP32とARMマイコンの両方に電流を供給して不足してるかも？と思い、電源を変えてみた。
するとリブートせずESP32が安定起動した。
ファームサイズの違いによる消費電流の違いにビックリした。。。

### 参考文献
[共立電子 ESP-WROOM-32 ブレッドボード用変換基板](https://eleshop.jp/shop/g/g402544/) [説明書(PDF)](http://www.kyohritsu.jp/eclib/PROD/MANUAL/kpesp32x.pdf)
Vue.jsの始め方(html/css/js/jQueryがある程度わかる方向け)

#Vue.jsの始め方(html/css/js/jQueryがある程度わかる方向け)

フロントの技術力アップのためvue.jsの勉強をはじめました
これから始めたいと考えている方向け+備忘録として
ブログに書いていこうと思います

##Vue.jsとは？

Evan you氏によって開発されたjavascriptフレームワーク（ライブラリ）です
PHPフレームワークLaravelに標準搭載されたことで近年人気が高まっています

###主なjavascriptフレームワーク

[Angular](https://angular.jp/)
　→googleを中心に開発されているフルスタックフレームワーク
[React](https://ja.reactjs.org/)
　→Facebookが開発したフレームワークでビュー相当の機能を提供
[Vue.js](https://jp.vuejs.org/index.html)
　→ビューに特化したシンプルなフレームワーク

###Vue.jsの特徴

Vue.jsはビュー（見た目）に特化したフレームワークで
導入が手軽で学習コストが低い点がおすすめです。

またアプリが複雑になってきたのでフレームワークを
後から導入したい場合も気軽に後乗せできる手軽さが強みです

コンポーネント（ページを構成するUI部品）を使用するため
コンポーネント指向について学ぶこともできます。

コミュニティの活動が活発で関連する情報やライブラリも豊富です。

##Vue.jsを使うための準備
[jsfiddle](https://jsfiddle.net/)で実際に記述しながら読むことをおすすめします。

vue.jsを使うにはCDN（content delivery network）経由で
ライブラリをインストールするのが手軽です。
まずはHTML5を以下で準備しましょう。
本記事ではVue.js ver2.6.11を使用します。

まずは基本となるVueインスタンスを作成し
データをマスタッシュ構文でバインディングしてみましょう

```html:index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vue.js</title>
</head>
<body>
  <div id="app">  <!-- この範囲にVue.jsのコードを記載 -->
   
  </div><!-- この範囲にVue.jsのコードを記載 -->

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <script src="js/index.js"></script>
</body>
</html>
```
CDN部分はJSシートよりも前で読み込んでください。
本記事ではid="app"の中がvue.jｓが使える範囲です。
続いて下記のように追記をしてください

```html:index.html
<div id="app">
  <p>{{ message }}</p>
</div>
```

{{　　　}}　部分をマスタッシュ構文と呼びます
つづいてindex.jsシートに以下を記述しましょう

```js:index.js

let app = new Vue({
  el:"#app",　/* インスタンスのエレメントを指定 */
  data:{ /* バインディングするデータを記載 */
    message: '皆さんこんにちは！'
  }
});
```

こちらをchromeで実行すると結果は以下の通りになるはずです

```
皆さんこんにちは！
```

Vue.jsの核となるのが"Vueクラス"です。
起動はこのVueクラスをインスタンス化するだけです。
※変数appに格納していますが参照する用途がなければ省略可能です。

次回はデータバインディングについて記事にしていきます。
[Vue.js　データバインディングの基礎](https://qiita.com/fumiya0414/items/e8f128374f8c41e14326)
深夜のノリでAtCoder #1

### はじめに
こんばんは。突然始まった不定期企画です。深夜にノリで書いた問題を貼るだけという企画です。眠たいです。

### #1
[問題](https://atcoder.jp/contests/abc047/tasks/abc047_b)

**考えたこと**
制約が小さいので、W*Hのlistを用意して操作を実際に行いました。要素1が白いマスで、0が黒いマスです。操作が4通りあるのでifゴリ押し

```python
w, h, n = map(int,input().split())
xy = [list(map(int,input().split())) for _ in range(n)]

def view(now): #この関数は処理がうまくできてるかを可視化するために書いたので消しても良い
    s = ''
    now = list(reversed(now))
    for i in range(h):
        for j in range(w):
            s += str(now[i][j])
        else:
            s += '\n'
    return s

mapp = [[1]*(w)] * (h) #もとの図

for i in range(n):
    if xy[i][2] == 1 or xy[i][2] == 2:
        for j in range(h):
            if xy[i][2] == 1:
                mapp[j][:xy[i][0]] = [0]*xy[i][0]

            elif xy[i][2] == 2:
                mapp[j][xy[i][0]:] = [0]*(w-xy[i][0])

    elif xy[i][2] == 3:
        for s in range(xy[i][1]):
            mapp[s] = [0] * w

    elif xy[i][2] == 4:
        for s in range(xy[i][1],h):
            mapp[s] = [0] * w

    #print(view(mapp))
ans = 0
for i in range(h):
    ans += mapp[i].count(1)
print(ans)
```

### 気持ち
眠い。そして夜にこんな問題を解いてはいけない。おやすみなさい。
備忘録 ~Mysqlの照合順序に関して~ 2020/04/23

## 内容
mysqlの照合順序に関して、自分でも試してみた結果を載せようと思ったけど、網羅できているのか疑問、且つ照合順序に関しては詳しい記事が既にたくさんあるので記事に載せるのは断念。


結論から言うと、

* 日本語を検索する場合： `general_ci`（unicode_ciだと濁点・半濁点のものにもマッチしてしまう）
* アルファベットを検索する場合： `unicode_ci`（全角・半角、大文字・小文字にマッチする）

がよさそう。ただアルファベットを全角でDBに入れることってあまりなさそうなので、何れにせよ`general_ci`でいいのかなと思った。


アルファベットの大文字と小文字を区別したいときは`utf8-bin`なのかな。

#### 補足

[こちら](https://dev.mysql.com/doc/refman/5.6/ja/charset-unicode-sets.html)を参考にすると、

* `utf8_general_ci`: 単純に比較する
* `utf8_unicode_ci`: 似たような文字を同じ文字として扱う

ので、`utf8_unicode_ci`だと、`は`で検索した時に`ば`と`ぱ`もマッチするのだろうか。

> [データベース名設定時の「utf8 / utf8_general_ci」とは？ / 文字セット（文字コード名）と照合順位のまとめ](http://lovee7.blog.fc2.com/blog-entry-45.html)

> [MySQL 5.6 リファレンスマニュアル 10.1.14.1 Unicode 文字セット
](https://dev.mysql.com/doc/refman/5.6/ja/charset-unicode-sets.html)


あと大文字小文字がマッチするのは`_ci`が`case insensitive`だからで、`_cs`(case sensitive)ならマッチしないとのこと。
> [MySQLの照合順序（collation）をイチから勉強する](https://www.playfulit.net/articles/2018/09/11/kzvXJM6YfWT1mUP492odNfBR/)



参考

> [【MySQL】照合順序とは？](https://qiita.com/kazu56/items/6af85ffcf8d3954455ad)
> [MySQLの照合順序](https://qiita.com/Vit-Symty/items/159c27d7d62c78ee9ce7)
> [MySQLの文字コードとCollation](https://qiita.com/tfunato/items/e48ad0a37b8244a788f6)
> > [MySQL Forums :: Character Sets, Collation, Unicode :: utf8 unicode ci vs utf8 general ci](https://forums.mysql.com/read.php?103,187048,187048)
[React] props.childrenに値を入れたときの挙動


Reactのprops.childrenに値を入れてみたときの挙動が気になったので試してみた。
先に結論。子要素がある場合はprops.childrenに子要素に差し込まれるけど、子要素がないなら自由に使える。

## 環境

```json-doc
    "react": "^16.13.1"
    "react-dom": "^16.13.1"
```


## 前提知識

Reactにおいてprops.childrenは子要素の値が格納されている予約後。

```react
const WithPizza = (props) => <div>{props.children}🍕</div>

ReactDOM.render(
	<WithPizza>Hello World</WithPizza>,
	document.getElementById('root')
)

// => Hello World🍕
```
- [React 用語集 – React](https://ja.reactjs.org/docs/glossary.html#propschildren)


## childrenプロパティに値を入れてみる

実験的にあえてchildrenプロパティに値を入れたときの挙動がどうなるか見てみる。

下記の計4ケースでそれぞれ確認。

- 子要素を持つ／持たない
- childrenプロパティを持つ／持たない



```react
const Wrap = ({ children, text }) => (
  <div>
    <h2>{text}</h2>
    <li>children: {children}</li>
  </div>
);

function App() {
  const Case1 = <Wrap text="CASE1" />
  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  const Case3 = <Wrap text="CASE3" children="🐠" />
  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>

  return (
    <div>
      {Case1}
      {Case2}
      {Case3}
      {Case4}
    </div>
  );
}
```



この結果が下記の通り。

<img width="137" alt="Screen Shot 2020-04-24 at 1.51.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186228/aa427680-efc5-4d99-d784-e605ae54c270.png">



Case1〜Case2は一般的な挙動。Case3〜Case4は違和感はないが、どうしてそうなるかのもう少し正確に知りたいところ。

## ロギングしてみる

`<Wrap />` などのJSXは、`React.createElement`のシンタックスシュガーです。
ここでは`React.createElement`によって生成されたオブジェクトのpropsプロパティをロギングして確認する。

```react
function App() {
  // ...

  const Case1 = <Wrap text="CASE1" />
  console.log('Case1', Case1.props.children)
  // => undeifned

  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  console.log('Case2', Case2.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  const Case3 = <Wrap text="CASE3" children="🐠" />
  console.log('Case3', Case3.props.children)
  // => 🐠

  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>
  console.log('Case4', Case4.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  // ...
}
```

Case3とCase4で比較するとわかりやすい。

Case3ではchildrenプロパティに入れていた文字列が、Case4では子要素によって差し替えられている。

## 結論

- 子要素があるときは、props.childrenに子要素が差し込まれる
- 子要素がないときは、props.childrenを好きに使える
- とはいえ、バグの温床だしprops.childrenは予約後なので子要素の取り出し以外には使うな
マップ

```py
import logging
import multiprocessing
import time

logging.basicConfig(level=logging.DEBUG, format='%(processName)s: %(message)s')


def worker1(i):
    logging.debug('start')
    time.sleep(5)
    logging.debug('end')
    return i * 2


if __name__ == '__main__':
    with multiprocessing.Pool(3) as p:
        r = p.map(worker1, [100, 200])
        logging.debug('excuted map')
        logging.debug(r)

        r = p.map_async(worker1, [100, 200])
        logging.debug('excuted map_async')
        logging.debug(r.get())

        r = p.imap(worker1, [100, 200])
        logging.debug('excuted imap')
        logging.debug([i for i in r])

        #p1 = p.apply_async(worker1, (100,)) #非同期なので値が返ってくるのを待たずに次に進む
        #p2 = p.apply_async(worker1, (100,))
        #logging.debug('excuted')
        #logging.debug(p1.get())
        #logging.debug(p2.get())
```

```
ForkPoolWorker-1: start
ForkPoolWorker-2: start
ForkPoolWorker-1: end
ForkPoolWorker-2: end
MainProcess: excuted map
MainProcess: [200, 400]
MainProcess: excuted map_async
ForkPoolWorker-1: start
ForkPoolWorker-3: start
ForkPoolWorker-1: end
ForkPoolWorker-3: end
MainProcess: [200, 400]
MainProcess: excuted imap
ForkPoolWorker-2: start
ForkPoolWorker-1: start
ForkPoolWorker-2: end
ForkPoolWorker-1: end
MainProcess: [200, 400]
```
Macbookで音声と画面を収録する方法

#使ったソフト
##BlackHole
[[Mac] 仮想オーディオデバイス BlackHole Virtual Audio Driver](https://note.com/wacw/n/n5fd75f7edc67)

```
brew cask install blackhole
```

##QuickTimePlayer（画面をキャプションするツール）
[MacのQuickTime Playerで画面を収録する](https://support.apple.com/ja-jp/guide/quicktime-player/qtp97b08e666/mac)
####オプション→マイクで「BlackHole」

##LadioCast（ミキサー）
[LadioCast （AppStore）](https://apps.apple.com/jp/app/ladiocast/id411213048?mt=12)
####入力1をBlackHole、入力2を「内蔵出力」

----
###ソフトのスピーカーの設定はBlackHoleにしておく
解説。インストールから作成まで（Shiny)

##目的
「ShinyでWebアプリケーションを作ってみたいけど何から始めればいい？」
というRやShinyを触ったことのない方向けに
R、Shinyのインストール～Webアプリケーション実行までを解説します。
※今回はwindows環境にてインストールする方法をご紹介します。

##必要なもの
1.R（プログラミング言語）
2.Rstudio（R言語の開発環境）
3.やる気（そこまでいらない）

##手順
1.R言語のインストール
2.Rstudioのインストール
3.Rstudioを起動し、プロジェクトを作成する
4.プロジェクトを作成し、実行する


##1.R言語のインストール
下記URLからR言語をダウンロードして実行する。
▼URL
https://cran.r-project.org/bin/windows/base/
![sample_ui_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279857/47f6f5b9-79ae-d5bd-06cd-2e37cb01ec29.gif)

##2.Rstudioのインストール
下記URLからRstudioをダウンロードし、実行する。
https://rstudio.com/products/rstudio/download/
![sample_ui_3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279857/54f87d55-fefb-56e8-056f-2f2f82afb4aa.gif)

##3.Rstudioを起動し、プロジェクトを作成する
2でダウンロードしたRstudioを起動したのち、プロジェクトを作成する。
![sample_ui_4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279857/ad697bc2-7dbf-3c35-143e-b4fe7f824b52.gif)

##4.プロジェクトを作成し、実行する
表示されたソースコードを全選択し、ctrl+Shift+Enterで実行。
![sample_ui_5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279857/d950fd72-2a43-e1ce-a276-29c9e4659e49.gif)

##まとめ
インストールから作成、実行はとても簡単。
ぜひお試しあれ。
Amazon AppFlow と ServiceNow の連携を試してみる

# はじめに
いろいろなSaaS（Datadog、Google Analytics、Salesforce等）からAmazon S3、Amazon Redshift等にデータ連携が可能となったようです。ServiceNowも連携できるようなので試してみました。
#連携してみる
こちらを参考にさせていいただき、ServiceNowにかかわるところをまとめます。
[AWSの新サービス「Amazon AppFlow」でSaaS-AWS間のデータ連携を試してみた](https://qiita.com/nasuvitz/items/092ad4b21a82abeb72bb)

Amazon AppFlow で「お気に入りのアプリケーションを開始する」からServiceNowを選択しフローを作成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/feb49b7c-ef24-0d05-7467-3246abb4a63a.png)

「フローの詳細を指定」でフロー名などを設定して「フローを設定」に進みます。
「送信元の詳細」で接続するインスタンスを設定します。
今回はOrlandoのDeveloper instanceを設定しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/ff70f53b-f362-aef7-c6c1-0c5dd71a5232.png)
一度作成した接続先は保存されます。「新規接続を作成」からインスタンス情報を設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/d902ed20-c5fe-01cf-c356-c26647a73dcb.png)
ここで設定するユーザにはweb_service_admin、rest_api_explorerロール、またはadminロールが必要です。

「ServiceNow オブジェクトを選択」から連携するテーブルを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/2bcf2eb2-35bc-2295-cbe0-8e0f75ba8845.png)
あれ・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/435782c5-a3f7-5a4c-3355-0e6dc15b3a9f.png)
連携できるテーブルが限られています・・・

とりあえずincidentを選び送信先にAmazon S3を選んで次に進みます。

「データフィールドをマッピング」から連携するデータのマッピングを行います。
「手動でフィールドをマッピングする」からマッピングしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/e4b751e8-51f9-59d4-9961-82ebe6a22d3c.png)
incidentなので、State、Short description、Priority、Callerなんかを連携しようと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/3dab2a43-3cc3-9263-8087-89d8775ecfb9.png)
あれ・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/dd64d422-36e6-135f-4db8-632eab9b1224.png)
incidentテーブルで追加されたカラムしか選択できなさそうです・・・
※Sys IDはリストにありました。
csvでマッピングすればいけるかなと思いましたが・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/fe6f0f8b-2d23-e273-aa30-1b4f10f94bcd.png)

```
short_description,short_description
state,state
```
などを試しました。※何か不備があれば教えていただけると助かります

とりあえず「手動でフィールドをマッピングする」から選択できるものを選び
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/f15300f7-dc31-d7a7-8897-6711153c8d16.png)

フローを作成、実行しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450412/0d1ecee4-aa7a-7a73-befa-c11a357403f1.png)
このようにJSON形式でAmazon S3に格納されます。

#結論
AWS マネジメントコンソールでポチポチするだけで連携できる点は素晴らしいです。
任意のテーブル、カラムと連携できるようになればServiceNowで保管期限があるログのバックアップや重要データのバックアップなどにも活用できるかなと思いました。
（任意のテーブル、カラムを指定できないのは設定方法に漏れがあるだけのような気もしています・・・）
プール

```py
import logging
import multiprocessing
import time

logging.basicConfig(level=logging.DEBUG, format='%(processName)s: %(message)s')


def worker1(i):
    logging.debug('start')
    time.sleep(5)
    logging.debug('end')
    return i


if __name__ == '__main__':
    with multiprocessing.Pool(3) as p:　#3個まで同時にプロセスを実行できる
        logging.debug(p.apply(worker1, (200,))) #値が返ってくるまで次に進まない
        logging.debug('excuted apply')
        p1 = p.apply_async(worker1, (100,)) #非同期なので値が返ってくるのを待たずに次に進む
        p2 = p.apply_async(worker1, (100,)) 
        logging.debug('excuted')
        logging.debug(p1.get())
        logging.debug(p2.get())
```

```txt
ForkPoolWorker-1: start
ForkPoolWorker-1: end
MainProcess: 200
MainProcess: excuted apply
MainProcess: excuted
ForkPoolWorker-2: start
ForkPoolWorker-3: start
ForkPoolWorker-2: end
ForkPoolWorker-3: end
MainProcess: 100
MainProcess: 100
```
【Vanilla.js VS JQuery】classの属性変更する方法

今までJQueryを使っていた人で、
-共通 html

```haml

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>

	<meta charset="UTF-8" />
	<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<h1 id="title" class="btn">Hello!</h1>
	<script src="index.js">
	</script>
</body>

</html>

```


- 共通css
- 

```css

body {
  font-family: sans-serif;
}

h1{
  color: red;
  transition: color 0.5s ease-in-out
}

.clicked{
  color: aqua;
}

.btn{
  cursor: pointer;
}
```

- Vanilla.jsで作成
- https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
参照MDN文書読む練習すること

```js
const title = document.querySelector('#title');

const CLICKED_CLASS = "clicked";



function handleClick() {
  var currentClass = title.className;
  
  if (!title.classList.contains(CLICKED_CLASS)) {

    title.classList.add(CLICKED_CLASS);
  } else {

    title.classList.remove(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}




init();
```


- Jquery.jsで作成



```js


const title = document.querySelector('#title');

const CLICKED_CLASS = "clicked";



function handleClick() {
 

  if (!$("#title").hasClass(CLICKED_CLASS)) {

    $("#title").addClass(CLICKED_CLASS);
  } else {

    $("#title").removeClass(CLICKED_CLASS);
  }
}

function init() {
  title.addEventListener("click", handleClick);
}




init();


```

- Vanilla.jsで作成
- もっと簡単に

```js

const title = document.querySelector('#title');

const CLICKED_CLASS = "clicked";



function handleClick() {
  title.classList.toggle(CLICKED_CLASS);
  
}

function init() {
  title.addEventListener("click", handleClick);
}




init();


```
GASで銀行API (sunabar)を実行してみた

#※追記
リクエスト先URLがドキュメントと違っていました。
sunabarポータルサイトに注意事項として記載あり。

```
APIをコールする際に、HTTPリクエストヘッダに含めるメインURLは以下を利用してください。
個人メインURL https://api.sunabar.gmo-aozora.com/personal/v1
法人メインURL https://api.sunabar.gmo-aozora.com/corporation/v1
```
個人、法人でURLが異なるようです。

---

※GASスクリプトエディタについては[前回](https://qiita.com/manchan/items/01b0ac86017d434e9ec7)参照

# sunabarとは
GMOあおぞらネット銀行が提供している銀行APIのサンドボックス環境

# やったこと
ドキュメントを参考に残高紹介APIを実行

# テストデータの残高
とりあえず１億円ほど入金してみた。
<img width="1073" alt="スクリーンショット 2020-04-24 0.54.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/5ae5119d-d371-cf43-fc98-e8d73ffed8c3.png">

# スクリプト
```javascript
function myFunction() {
  //アクセストークン
  var accesstoken="<アクセストークン>";

  //リクエストデータ
  var url = "https://api.sunabar.gmo-aozora.com/personal/v1/accounts/balances";
  var headers = {
    'accept' : "application/json;charset=UTF-8",
    'x-access-token' : accesstoken,
  };
  var options = {
    "method" : "GET",
    "headers" : headers,
    "muteHttpExceptions" : true
  }
 
  //レスポンス結果
  var response = UrlFetchApp.fetch(url, options);
  Logger.log(response.getResponseCode());
  Logger.log(response.getContentText());
}
```

#スクリプト実行結果
![IMG_7253.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/fd3388d7-bca1-43e8-4915-eb43ee184aa0.png)

#結果
残高が正しく取得できた。
React + Firebase でhostingしたwebアプリをSafariで開くと<script>要素と<style>要素の値が表示されてハマった話

## 経緯

Reactで開発してFirebaseにHostingした。
Hosting先のURLをiPhone(safari)で開いてみたら、下の画像のようなコード？が画面に表示されていた。
エラーかと思ったが、Macでsafariの [開発者ツール](https://qiita.com/sahara_kyoto/items/d3e1a0658c34cb622c18) を使って確認したところ`<script>`要素と`<style>`要素の値がブラウザに表示されてしまっているだけで他の要素は正常だった。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490464/1416141b-a137-1dfc-9fcc-bfe5e580e181.png" width=400">

## 解決

そもそも`<script>`要素と`<style>`要素はchromeでは自動的に非表示になっていたが、safariでは表示されてしまったようだ。
cssで下記を追加して見た目的には解決した。

```css:

style {
  display: none;
}

script {
  display: none;
}

```

## 追記

問題は他にあるのかもしれないが、ひとまずこれで。下記の問題は先送り。
- FirebaseのHostingの設定を漏らした？
- Reactの設定を漏らした？
- Reactのライブラリの不具合？
RSpecでlet_it_beを使って、作成されるレコード数を減らす

# let_it_beを使うと作成されるレコード数を減らすことができる

## 解説

こういうbooksテーブルがあるとする

```ruby
create_table "books", force: :cascade do |t|
  t.string "title"
  t.string "description"
  t.datetime "created_at", precision: 6, null: false
  t.datetime "updated_at", precision: 6, null: false
end
```

factoryを用意します

```ruby
FactoryBot.define do
  factory :book do
    title { 'hoge' }
    description { 'fuga' }
  end
end
```

こんな感じのテストがあるとします

```ruby
RSpec.describe do
  describe 'Book' do
    let!(:book) { create(:book) }
    it 'test 1' do
      expect(book.title).to eq('hoge')
      expect(Book.count).to eq(1)
    end

    it 'test 2' do
      expect(book.title).to eq('hoge')
      expect(Book.count).to eq(1)
    end

    it 'test 3' do
      expect(book.title).to eq('hoge')
      expect(Book.count).to eq(1)
    end
  end
end
```

上のテストを実行することで、計3回レコードが生成されます


検証のため、
Bookモデルにafter_saveコールバックを設定してテストを走らせてみます

```ruby
class Book < ApplicationRecord
  after_save :check_create

  private

  def check_create
    p 'created!'
  end
end
```

コールバックが3回呼ばれています
<img width="439" alt="スクリーンショット 2020-04-24 0.40.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151354/5ca3bf68-e219-81b0-73b3-1200274bc6d3.png">


### レコード生成回数を減らしたい！
let_it_beという存在を知りました 
[gemのリポジトリ](https://github.com/test-prof/test-prof/blob/922009eb771364f5a4057d281f77c9820cf631e5/docs/recipes/let_it_be.md)

## セットアップ

`gem 'test-prof'` をGemfileに追加し、`bundle install`

`rails_helper.rb`に`require 'test_prof/recipes/rspec/let_it_be'`を追加

先ほどのテストファイルで

```ruby
let!(:book) { create(:book) }
```

の`let!`を

```ruby
let_it_be(:book) { create(:book) }
```

`let_it_be`に変えるだけ

これでテスト走らせてみると、１度しかコールバック呼ばれていない

<img width="442" alt="スクリーンショット 2020-04-24 0.47.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151354/d2747b2c-e152-0234-961d-1f45bdd67815.png">

### 所感
テストが遅くならないようちりつもでやっていきたいと思いました

以上です。
読んでいただき、ありがとうございます。
Shinyとはいったい...?

##目次
1.shinyとは何なのか
2.shinyでどんなものが作成できるか
3.作品例
4.まとめ

##Shinyとは何なのか
R言語のみでWebアプリケーションを作成できる**Rのパッケージ**です。
R言語しか使用しないため、HTML、CSS、javascriptなどの知識が浅い方でも作成がしやすくなっています。

##Shinyでどんなものが作成できるか
下記のようなグラフを直感的に操作できるようなサイトが短時間で作成できます。
![sample_ui_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279857/424d44be-5eb3-e953-86a3-e02524102d0a.gif)
R言語自体が統計解析向け言語のため、グラフや表を表示することに使われることが多いです。

##作品例
公式ページにてGalleryが公開されています。どのようなものが作成可能なのかイメージができるかと思います。
▼公式Gallery
https://shiny.rstudio.com/gallery/

##まとめ
Shinyとは...
-R言語のみでWebアプリケーションが作成できる。
-グラフなど統計情報を表示するのが得意
なパッケージとなっています。
ぜひ一度お試しあれ～
node-fetchでeuc-jpのページを取得する場合

2020年もなると文字コード関連のノウハウなんてものはすっかりプログラミングサイト上からも消えています。世間は当たり前のようにutf-8化しています。いまだにutf-8化していないのはwindowsの一部くらいなものでしょう。

で、webの世界は当然utf-8で全部済むと思っていたのですが、最近、node-fetchでeuc-jpのページを拾ってくる作業にぶつかりました。node-fetchとはnode.jsでjavascriptのfetch関数を使うライブラリです。fetchとはXMLHttprequestのモダンなやつです。

こういう場合はfetchにURL渡して引っ張ってきてその文字列を何かのライブラリーで変換というのがセオリー中のセオリーですが、そんなのは20世紀のプログラミングらしいです。perlのJcodeとかの時代のセオリーのようです。

モダンなプログラミングというのは「誰かがどこかで勝手にutf-8に変換してくれてる」というもので、特にウェブの場合はhtmlに文字コードがcharsetとして記載されており、それを読んで変換、あるいはソースの文字コード自動判別して現代的標準であるutf-8に変換してくる、というのが当たり前のようです。ですが、そうはうまくは行きません。世界のプログラマはasciiからutf-8になったのであり、eucやらShiftJISやらCN、KRなんてものは頭の片隅にもありません。

というわけで、結局は生の文字列を現代のJcode、nkfで変換してやるという泥臭いが慣れている作業をやればいいのですが、これがうまく行かない。「誰かがどこかで中途半端にutf-8に変換してる」というトラブルが待っているのです。

詳しくはわかりませんが、「8bitだからLatin-1だろうからそれを強引にutf-8にしておいてあげましたよ」的なことをやられているのでしょう、生の文字列だと受け取った文字列は化けており、それをeuc-jpに変換してやっても化けているという、ありがちなにっちもさっちも行かない事態になります。

さてここからソースを交えた説明になります。
使用しているiconv-liteというライブラリは文字コード変換です。iconvでピンとくるかもしませんがlinuxやらglibc周りで聞いた名前ですね。

いまだにeuc-jpを使ってるページとして
https://www.rakuten.co.jp/
を参考例にしています。

まずはiconvを使わずにnode-fetchが自動変換してくれるという期待を込めたパターン。

```js

const node_fetch = require('node-fetch');
const url = "https://www.rakuten.co.jp/"
node_fetch(url)
    .then(res => res.body.text())
    .then(body => console.log(body));
```

化けているのか、もとのeuc-jpのページがそのまま表示されているのこの段階では追いませんが、とにかくうまく行かなかったので次へ


次はtext()で生の文字列が得られると仮定してiconvで変換

```js

const node_fetch = require('node-fetch');
const iconv = require("iconv-lite")
const url = "https://www.rakuten.co.jp/"
node_fetch(url)
    .then(res => res.text())
    .then(body => console.log(iconv.decode(body)));
```

これもうまく行きません。おそらく生の文字列は取得できてないようです。つまりnode-fetch(かjavascriptのバッファー周り)が変換に失敗しているかと

途方に暮れているとエラーメッセージの中に公式ヘルプへのリンクが表示され
https://github.com/ashtuchkin/iconv-lite/wiki/Use-Buffers-when-decoding
このページのサンプル通りにやったのがこれ

```js

const node_fetch = require('node-fetch');
const iconv = require("iconv-lite")
const url = "https://www.rakuten.co.jp/"
node_fetch(url)
    .then(res => res.body)
    .then(body => body.pipe(iconv.decodeStream('euc-jp').collect((err, res) => console.log(res))));
```
これでやっとうまく行きました。
node-fetchのソースを軽く見てみると、bufferからの型変換がいろいろ複雑なようです。bufferといってもいろいろあるようで、深く追うのは面倒なので諦めました。
javascriptは型が無い(弱い)ようでガッチガチに面倒なのでそのへんは名前の通りjavaだなーと。

というわけで2020年のバッドノウハウ(?)でした