OmniAICreator/Qiita-1.07M huggingface dataset:
40 代おっさん GASのオブジェクトを学ぶ

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## オブジェクト

オブジェクトとは
関連のあるデータと機能の集合です。(機能はたいていは変数と関数で構成されており、オブジェクトの中ではそれぞれプロパティとメソッドと呼ばれます。) 

構文

```javascript
{プロパティ 1: 値１, プロパティ 2: 値2, …}
```

プロパティをキーとしてデータにアクセスできる。
関数を格納でき、関数を格納されたプロパティをメソッドと呼ぶ

## プロパティの参照と代入

オブジェクトから値を取り出す方法は2つある

構文（ドット記法）

```javascript
オブジェクト. プロパティ
```

構文（ブラケット記法）

```javascript
オブジェクト['プロパティ']
```

お試しコード

```javascript
function myFunction() {
  const personal = {name:'利樹', age: 4, favorite: 'みかん'};
  console.log(personal.name);
  console.log(personal['age']);
}
```

指定したプロパティの値を再代入もでき、また存在しないプロパティに代入すると追加される

お試しコード

```javascript
function myFunction() {
  const personal = {name:'利樹', age: 4, favorite: 'みかん'};
  personal.name = 'アッキー';
  personal.gender = '男';
  console.log(personal);
}
```

### 参照とプリミティブ

いきなり説明は難しいのでこちらを

```javascript
function myFunction() {
  const x = '利樹';
  
  let y = x;
  y = 'アッキー';
  console.log(x);
  console.log(y);
}
```

これを行うと
コンソールには
x 利樹
y アッキー
になっています。

これは値を複製していることになり別々のアドレスを見ています。
値渡しているのでプリミティブになります。
次は

```javascript
function myFunction() {
  const x = {name: '利樹'};
  
  const y = x;
  y.name = 'アッキー';
  console.log(x);
  console.log(y);
}
```

オブジェクトを使うと二つとのアッキーになったと思います。
オブジェクトはアドレスを参照していますので起きます。
これは<font color="Red">参照値</font>を渡しています。

### オブジェクトの分割代入

代入の仕方は

構文

```javascript
{変数1,　変数2, …} = オブジェクト
```

```javascript
const {変数1,　変数2, …} = オブジェクト
```

になります。
この場合、各変数名及び定数名は、右辺の指定したオブジェクトのプロパティと一致している必要がある。

```javascript
function myFunction() {
  const family = {　a:'利樹', b:`パパ`, c:'ママ'};
  let a, b, c;
  ({a, b, c} = family);
  console.log(a, b, c); 
  
  const {name, age, favorite} = {name: '利樹', age: 4, favorite: 'みかん'};
  console.log(name, age, favorite);
}
```

### オブジェクトのスプレッド構文

構文

```javascript
...構文
```

```javascript
function myFunction() {
  const family = {　a:'利樹', b:`パパ`, c:'ママ'};
  const family2 = { ...family, d: 'アッキー'}
  console.log(family2);
  //console.log(...family);この使い方はエラーになります
}
```

## 参考資料

<https://www.amazon.co.jp/s?k=google+apps+script+%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80&adgrpid=110264232688&gclid=CjwKCAiA9aKQBhBREiwAyGP5lSl7AJJLCvOEHb4wQgMlyqW1fll5X8GDTT_Rkd1_soUAyIPMXQr26hoClHEQAvD_BwE&hvadid=553833563682&hvdev=c&hvlocphy=1009076&hvnetw=g&hvqmt=b&hvrand=4378489642044417389&hvtargid=kwd-594191211348&hydadcr=4106_13159878&jp-ad-ap=0&tag=googhydr-22&ref=pd_sl_2x1owglv0s_b_p52>
AWS Transfer Family ってのがあるらしい

## 勉強前イメージ

データを転送する的な？

## 調査

### AWS Transfer Family とは

ストレージサービスとの間でファイルを送受信できるフルマネージド型の転送サービスで、
現在はs3とEFSが対象として使用できます。
また、アクセス方法はFTP、FTPS、SFTPの3つのプロトコルで使用できます。

なぜfamilyという名称がついているかというと
元々、AWS Transfer for SFTP というサービスがあり
2020年にAWS Transfer for FTPとAWS Transfer for FTPSが提供されて
総称してAWS Transfer Familyというようになりました。

### AWS Transfer Family のメリット

- インフラの管理を軽減

同時にSFTPサーバなどを建てなくてもAWS側で管理してくれるため
負荷などを気にせずにデータの転送が可能です。

- ワークフローの設定変更が簡単

もしデータの共有方法を変える必要がある場合、
共有方法は変えずに転送の変更を行うことが出来ます。

- 転送ファイルの使用

転送されたデータをそのままAWSのサービスに利用することが出来ます。

## 勉強後イメージ

安全に利用するってところが大きなところなのかな？
s3とかaws cli使えばいいじゃんって思っちゃったけどあまりまだよく理解できてないかも。。。
一応転送サービスってことはわかった

## 参考

- [AWSのFTPとは？AWS Transfer Familyの特徴やメリットを紹介！](https://www.fenet.jp/aws/column/aws-beginner/804/)
Flutterでアプリをリリース

##感想
インターンなどで、リリースするときはすごい大変という噂は聞いていましたが、実際は本当にそうでした…
まだ申請が通ったわけではないのですが私がなにを作ったかここに残すと共に、アプリのプライバシーポリシーページにさせていただきたいと思います。
　
###アプリ概要
つまるところ、コーディネートアプリを作りました。
その名も… "from Color" です!

このアプリは「色の組み合わせからコーディネートを考えよう」です。
皆さんは服を選ぶ時鏡の前でなんとなーく、「この色の組み合わせなんか違うな…」と思ったことはないでしょうか。

こちらのアプリはそんな洋服の色の組み合わせを、塗り絵を使って客観視することができるのです。
ホーム画面には男女の可愛いイラストが描かれており、ユーザーはこのイラストにある４つのアイテム（アウター、トップス、ボトムス、シューズ）の色を256色にそれぞれ塗り替えることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2058516/df56377e-751c-39cd-ee8d-f14c5bb43752.png" width=30%>


オンラインショッピングなどで「この服の色合わせやすいかな…」なんて思うときにもお使いただけると思います！

###プライバシーポリシー
以下にこのアプリのプライバシーポリシーを書かせていただきます🙇

プライバシーポリシー
開発者　Yuta Aruga（以下「当社」という）は、当開発者の提供するサービスの利用者（以下「ユーザー」）に関する個人情報を含んだ情報（以下「ユーザー情報」）の取扱いについて、以下のとおりプライバシーポリシー（以下「本ポリシー」）を定めます。取得する情報およびその取得方法\n当社が取得するユーザー情報は、その取得方法に応じて、以下のとおりとなります。
（１）ユーザーから直接取得する情報\n当社は、本サービスの利用にあたって、ユーザーから以下の情報を取得します。
・ユーザーがアップロードする服飾画像（以下「アイテム画像」という）
・ユーザーが任意に指定する、アイテム画像に関する情報（色および洋服カテゴリ）
・ユーザーのGoogleアカウント©︎表示名
（２）技術情報の取得\nユーザーが本サービスにアクセスする際に、当社は以下の技術情報を取得します。
・端末の種類
・端末のアイテム記憶場所
・端末識別子
・その他広告識別子
（３）Google Inc.提供サービス(Firebase©︎)により生成される情報
本サービスの利用にあたって、Google Inc.の提供サービス(Firebase©︎)を用いて以下の個人情報が生成・取得されます。
・Firebase©︎によって生成されるユーザー識別子

２．利用目的\n当社は、取得したユーザー情報を以下に定める目的のために使用します。
・商品・サービスの提供
・本人確認、ユーザー認証
・広告の配信およびその成果確認
・その他当社が提供する各種サービスにおいて定める目的

３．個人情報の第三者提供\n当社は、ユーザー情報のうち個人情報に関して、あらかじめユーザーの同意を得ることなく、第三者に提供しません。但し、次に定める場合にはこの限りではなく、ユーザー情報を第三者に提供することがあります。
（１）国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行することに対して、当社が協力する必要があり、かつユーザーからの同意取得が当該事務の遂行に支障を及ぼすおそれがある場合
（２）その他法令で認められる場合

４．個人情報の共同利用
当社は、ユーザー情報のうち個人情報に関して、以下のとおり共同利用します。
共同して利用される個人情報の項目：
・アイテム画像
・アイテム画像に関する情報
・ユーザーのGoogleアカウント©︎表示名
・Firebase©︎によって生成されるユーザー識別子
共同して利用する者の範囲：当社
共同して利用する者の利用目的：本サービスの保守運用業務
個人情報の管理責任者：当開発者

５．個人情報の開示
当社は、ユーザーから、個人情報保護法の定めに基づき個人情報の開示を求められたときは、ユーザーご本人からのご請求であることを確認のうえで、ユーザーに対し、開示を行います。但し、個人情報保護法その他の法令により、当社が開示の義務を負わない場合は、この限りではありません。

６．個人情報の訂正および利用の停止等
（１）当社は、ユーザーから、個人情報の内容が事実ではなく、訂正・追加・削除（以下「訂正等」という）を求められたときは、ユーザーご本人からのご請求であることを確認のうえ遅滞なく調査を行い、その結果に基づき、個人情報の内容の訂正等を行い、その旨をユーザーに通知します。
（２）当社は、ユーザーから、以下の各号の理由に基づき個人情報の利用の停止または消去（以下「利用の停止等」という）を求められたときは、ユーザーご本人からのご請求であることを確認のうえ遅滞なく調査を行い、その結果に基づき、個人情報の利用の停止等を行い、その旨をユーザーに通知します。
①あらかじめ公表された利用目的の範囲を超えて個人情報が取扱われているという理由
②偽りその他の手段により個人情報が取得されたものであるという理由
（３）個人情報保護法その他の法令により、当社が訂正等または利用の停止等の義務を負わない場合、本条１項、２項の定めは適用されません。

７．お問い合わせ\n当社のプライバシーポリシーに関する、ご意見、ご質問、苦情の申出その他ユーザー情報の取扱いに関するお問い合わせは、以下の窓口にご連絡ください。

e-mail: colorfrom90@gmail.com

８．改定
当社の裁量に基づいて、本ポリシーを変更します。但し、個人情報保護法その他の法令により、改定に必要な手続が定められている場合には、当該法令に基づき改定を行うものとします。
なお、当社は、ユーザーに対して本ポリシーを変更する場合には、変更後の本ポリシーの施行時期および内容を以下の方法で周知します。
・本サービスアプリケーション内での適切な方法 

９．制定日
制定：2021年12月17日
Vuetifyのv-mutateを使ってclassの変化を監視する

# はじめに
Vuetifyのコンポーネントに[v-autocomplete](https://vuetifyjs.com/ja/components/autocompletes/)というものがあります。
このコンポーネントのフォーカスが外れるタイミングを検知したかったのですが、Blurのイベントはv-autocomplete内のv-selectに該当する機能ではなく、入力部分に対して掛かってしまっているようでした。
https://github.com/vuetifyjs/vuetify/issues/11066

そのため、実際にv-autocompleteのフォーカスを監視するために、[MutationObserverAPI](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)を利用してclassの監視をしていたのですが、Vuetifyには[v-mutateディレクティブ](https://vuetifyjs.com/ja/directives/mutate/)が存在していることに気が付き、使ってみました。
※Nuxt+CompositionApiの記述になってしまっているので、ご了承ください。

# MutationObserverによる実装
```html
<v-autocomplete 
  ref="autocomplete"
  />
```

```typescript
// $refsでv-autocompleteを監視
const autocomplete = ref<Vue>()
// Observerを生成
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.attributeName) {
      const className = (mutation.target as Element).getAttribute(mutation.attributeName)
      const isFocus = className?.includes('v-input--is-focused') ?? false
      // クラスを監視してフォーカス状態を検知！
    }
  }
})
// マウント時に監視開始し、アンマウント時に監視終了する
onMounted(() => {
  if (autocomplete.value) {
    observer.observe(autocomplete.value.$el, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class'],
    })
  }
})
onUnmounted(() => {
  observer.disconnect()
})
```

マウントしてコンポーネントのrefが取れたらObserverを適用、アンマウント時にdisconnectする必要があります。

# v-mutateによる実装
```html
<v-autocomplete 
  v-mutate.attr="{
    handler: onMutate,
    options: {
      attributeOldValue: true,
      attributeFilter: ['class'],
    },
  }"
  />
```

```typescript
const onMutate = (mutationsList: any) => {
  for (const mutation of mutationsList) {
    if (mutation.attributeName) {
      const className = (mutation.target as Element).getAttribute(mutation.attributeName)
      const isFocus = className?.includes('v-input--is-focused') ?? false
      // クラスを監視してフォーカス状態を検知！
    }
  }
}
```

関数を渡すだけでシンプルになりました。
また、refではHTML側だけで読み取れる情報が少なくしっかりコードを読み込む必要がありましたが、v-mutateを記述していることにより可読性も上がったように思えます。

# おわりに
少しニッチかもしれませんが、誰かの役に立てば幸いです。
他の方法や改善点等あれば教えていただけると嬉しいです。
初心者でもわかるBuilderパターン　Builderパターンでカレーを作くろう！！

##はじめに
皆さんはBuilderパターンをご存知でしょうか。
Builderパターンには色々な種類ありますが、今回はGoFのBuilderパターンについて解説していきます。

##GoFのBuilderパターンとは
Builder パターン（ビルダー・パターン）とは、GoF（Gang of Four; 4人のギャングたち）によって定義されたデザインパターンの1つです。 オブジェクトの生成過程を抽象化することによって、動的なオブジェクトの生成を可能にします。(引用　wikipedia）

分かりやすく言うなら、猫というクラスがあるとします。猫の抽象的な概念は動物ですよね。
この場合、猫クラスから犬クラスに変わったとしても対応できますよね。
どうでしょうか？イメージが湧いたでしょうか。サンプルコード通してどんなものか具体的に説明していきます。

##クラス図
![スクリーンショット 2022-02-15 20.51.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2526916/00b09582-8ed6-b40c-4b9d-c5c02c774778.png)


##サンプルコード
いきなりですが、皆さんは冷蔵庫の中に玉ねぎ、にんじん、ポテト、お肉、カレールーがあったら、何を作りますか？そう！！カレーですよね。では、カレーを作っていきましょう。

まずは、材料量の入った冷蔵庫を作成します。
<p align="center">
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2526916/3d915292-1555-50bf-602e-96cc54cc2338.png"/>
</p>

```Fridge.java
public enum Fridge {
	ONION ,CARROT,CURRYSAUCEMIX,POTATO ,METTO
}
```
先程Briderパターンについて説明した抽象的なクラスを作っていきます。
ここではカレーの抽象的な概念として料理クラスを作成していきます。
これが出来れば、肉じゃがに変更しても対応できるようになります。

```Cooking.java
public class Cooking {
	private Fridge food1;
	private Fridge food2;
	private Fridge food3;

	void setFood1(Fridge f) {
		this.food1 = f;
	}
	void setFood2(Fridge f) {
		this.food2 = f;
	}
	void setFood3(Fridge f) {
		this.food3 = f;
	}
    //,,,

	public String toString() {
		return "[food1:" + this.food1 + ", food2:" + this.food2 + ", food3:" + this.food3 + "]";
	}
}
```
レシピがないと料理人が勝手にアレンジをしてしまうのでレシピを作っていきます。
ここでは、抽象メソッドを定義していきます。
<p align="center">
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2526916/927fe142-45af-80c4-f472-620cf44e42b5.png"/>
</p>

```Recipe.java
public interface Recipe {
	void cook1();
	void cook2();
	void cook3();
	Cooking getResult();
}
```
皆さんお待たせいたしました。お待ちかねのカレーを作っていきましょう。
レシピ通りにカレーを作っていきましょう。
また、コンストラクタにはCookingをインスタンス化してオブジェクトに必要な材料を詰めてあげます。
要するに料理という抽象的な概念から、カレーを料理するという具体的な概念に落とし込むということです。
<p align="center">
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2526916/82a63783-e1fa-aa58-763b-79172fe820e4.png"/>
</p>

```Curry.java
public class Curry implements Recipe {
	private Cooking cooking;
	Curry(){
		this.cooking = new Cooking();
	}
	public void cook1() {
		this.cooking.setFood1(Fridge.ONION);
	}
	public void cook2() {
		this.cooking.setFood2(Fridge.METTO);
	}
	public void cook3() {
		this.cooking.setFood3(Fridge.CURRYSAUCEMIX);
	}
	public Cooking getResult() {
		return this.cooking;
	}
}
```
仕上げに盛り付けていきましょう。
platingメソッドを使うことで、料理してきたものが形になります。

```Cooker.java
public class Cooker {
	private Recipe recipe;
	Cooker (Recipe recipe){
		this.recipe=recipe;
	}
	Cooking plating() {
		this.recipe.cook1();
		this.recipe.cook2();
		this.recipe.cook3();
		return this.recipe.getResult();
	}
}
```
完成です。

```Test.java
public class Test {
	public static void main(String[] args) {
		Cooker w = new Cooker(new Curry());
		Cooking c = w.plating();
		System.out.println(c);
	}
}
```
#終わりに
めちゃくちゃなサンプルコードですが、皆さんはbuilderクラスについてお分かり頂けたでしょうか。わからない方は実際に手を動かしてみると分かってくるのでお勧めです。
最後まで読んで頂きありがとうございます。
Rails チュートリアルのrails serverでエラーが出た

<h2>前提</h2>
railsチュートリアルの「1.3.2 rails server」でサイトを表示したい。

開発環境 -> Cloud9
rubyおよびrailsバージョンは以下の通り。

```terminal
ruby -v -> '6.0.3'
rails -v -> '5.1.0'
```

チュートリアルの1.3.1までの環境構築は終わった状態で以下を実行。

```terminal
Cloud9User:~/environment/hello_app (master) $ rails server

#省略

Use Ctrl-C to stop

```

ここでpreviewすると以下のメッセージ

![ecc24368fac55bcbb0887b02bedc8076.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106470/c3d3aef3-741d-23f1-8a01-7de51cb31f91.png)

エラーメッセージ↓
config.hosts << "de3360345ba44de8a4f180097aa67618.vfs.cloud9.ap-southeast-1.amazonaws.com"

調べた結果、ホストがブロックされているため、表示ができないようです。

<h2>試したこと</h2>
development.rbで以下を追記

```deveropment.ruby

# Allow connections to local server
  config.hosts.clear

```

再度rails server実行

![スクリーンショット 2022-02-15 20.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106470/218b912e-2c16-8960-2c35-1efc075f9f84.png)

表示されました。
このほかに、yarnのアップデートがされず、webpacker:installがうまく実行されない問題があります。
これは奮闘中のエラーなので、今後解決した時に記事にしたいと思います。

<h3>追記</h3>

Qiita初投稿です。
とりあえず投稿してみたかったので、中身や構成は適当です。
今後も継続的にアウトプットをしていきます！
ありがとうございました！
Notionで作成したテーブルに対して追加/検索/更新/削除を行う

# 前回のあらすじ
Notionでテーブルやトークンなどを準備して、テーブルにあるデータを取ってくる検証を行いました。

# 今回やったこと
Notionで作ったテーブルに対してデータを追加/検索/更新/削除がひととおりできるようAPIを検証してみました。

以下の公式情報を参考にしています。

https://developers.notion.com/reference/intro

# 環境
・AWS Lambda(Node.js 14.X)
・Notionのテーブルイメージ
　カラム構成はキー(key)・値(value)・タイムスタンプ(timestamp)です。
・各カラムのNotionにおけるタイプについて、キーはtitle、値はrich_text、タイムスタンプはnumberにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455207/87762d8b-dede-9db3-f25d-71ac6fa5edea.png)

# 書いたもの

### 準備

```
const { Client } = require("@notionhq/client");
const notionToken = "secret_Notionから発行したトークン";
const databaseId = 'ここにデータベースを指定するIDを書きます。';
const notion = new Client({
  auth: notionToken,
});
```

### 追加

```
function addItem(keyItem, valueItem) {

  //成功or失敗したときのメッセージとして用意しています。
  let returnMessage = "";
  try {
    const response = notion.pages.create({
      parent: { database_id: databaseId },
      properties: {
        key: {
          title: [
            {
              text: {
                // 引数
                content: keyItem,
              },
            },
          ],
        },
        value: {
          rich_text: [
            {
              text: {
                // 引数
                content: valueItem,
              },
            },
          ],
        },
        timestamp: {
          // 現在時刻を取得
          number: Date.now()

        }
      }
    });
    console.log(response);
    returnMessage =  `key:${keyItem}・value:${valueItem}をメモに追加しました。`;
  } catch (error) {
    console.error(error.body);
    returnMessage = `追加処理に失敗しました。詳細：${error.body}`;
  }
  return returnMessage;
}
```

### 検索

```
function searchPage(searchItem){
  const response = notion.search({
    query: searchItem,
  });

  // 検索でヒットした結果の分だけ改行しながら文字列を作成しています。
  // response.results[i].id の値はこの後の更新・削除で対象を特定するのに必要になります。
  for (let i =0; i < response.results.length; i++) {
    let count = i + 1;
    let searchResult = "\n【" + count + "件目】\nid: " 
      + response.results[i].id
      + "\nkey: "
      + response.results[i].properties.key.title[0].text.content
      + "\nvalue: "
      + response.results[i].properties.value.rich_text[0].text.content;
    searchResults += searchResult;
  }
  return searchResults;
}
```

次の更新と削除では、変更対象を指定するために上記の検索で取得したIDが必要です。

### 更新
指定したIDに該当するデータのkeyを「target」に変更する例です。

```
function updateItem(item) {
  try {
    const response = notion.pages.update({
    page_id: "上記の検索で取得したID",
    properties: {
      key: {
          title: [
            {
              text: {
                content: 'target',
              },
            },
          ],
        },
    },
  });
    console.log(response);
    console.log("Success! Entry updated.");
  } catch (error) {
    console.error(error.body);
  }
}
```


### 削除
指定したIDに該当するデータのセットを削除します。
データの削除そのもののAPIは存在せず、データをarchivedにすることで削除となります。

```
function deleteItem(item) {
  try {
    const response = notion.pages.update({
    page_id: "上記の「検索」で取得したID",
    archived : true,
  });
    console.log(response);
    console.log("Success! Entry deleted.");
  } catch (error) {
    console.error(error.body);
  }
}
```

# 次回予告
時間かかりそうですがそろそろ何か形にしたいです。
【Next.js + Rails + CarrierWave + S3】 Next.jsのnext/imageで画像を表示させる方法

# 初めに
　この記事ではNext.js が提供している[Image コンポーネント](https://nextjs.org/docs/api-reference/next/image) (next/image)についてのお話です。
　__imgタグのこと__ではないので注意してください。

# 内部の画像を表示
　内部ではルートディレクトリ配下にあるpublicを基準にして表示させることができます。
　とても簡単ですね
　【例】
 　/public/images/test.png

``` JSX:test.js
<Image src={'/images/test.png'} alt="sample" width={300} height={300} />
```

# 外部の画像を表示
　公式にも書いてある通り
　ルートディレクトリ直下にnext.config.jsを作り
　【例】
　example.comの場合　

``` JSX:next.config.js
module.exports = {
  images: {
    domains: ["example.com"]
  },
}
```
 こんな感じでドメインを指定してやると認識してくれます。

# S3の場合
　問題はこちらです。
　このままいくとバケットのURLをそのままドメインに突っ込みたくなるところをぐっとこらえて。
　こうです。

``` JSX:next.config.js
module.exports = {
  images: {
    domains: ["s3.[region].amazonaws.com"]
  },
}
```

　東京の場合ap-northeast-1これをregionのところに入れてあげればいいですね。

# 終わりに
　特にはまっていませんが、ちょっと調べる羽目になったので誰かのお役に立てれば幸いです。
Richardson-Lucy deconvolutionの理論式を導出しよう

# はじめに
Richardson-Lucy deconvolution（以下、RL法）は、画像等を鮮明にする手法である。一般的な撮像観測では、観測装置の回折等により光源が拡がって撮像される。この拡がり具合は、点拡がり関数(Point Spread Function, 以下、PSF)で表される。RL法は既知のPSFと撮像画像から、真の画像を推定する手法である。本記事では**RL法の理論式を導出する**。
![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599258/1ce4c96a-b902-8d29-7d32-62842014d6bf.png)

# RL法の理論式
RL法は、既知のPSFと撮像画像を用いて真の画像を推定する手法である。真の画像の分布、既知のPSF、撮像画像の関係をベイズの定理を用いて関係づける。そして、ベイズ推定を繰り返し計算することにより真の画像を推定する。理論式は

```math
 W_{i,r+1} = W_{i,r}\sum_k \frac{P_{i,k}H_k}{\sum_j P_{j,k}W_{j,r}}\
\quad r = 0,\ 1,\  2,\  \dots  \tag{1}
```
と表される。$i,j,k$はピクセル座標とする。$W$は真の画像、$H$は撮像画像、$r$は反復回数とする。$P_{j,k}$はPSFで、$W_j$が$H_k$で観測される確率を$P(H_k|W_j)=P_{j,k}$とする。

# RL法の理論式の導出
式(1)を示す。$W_i$を真の画像の$i$番目のピクセル値、$H_k$を撮像画像の$k$番目のピクセル値とする。以下、ピクセル値では分かりにくいため、光子として考える。
任意の1つ光子が$H_k$であるとき、$W_i$からのものである確率は、ベイズの定理で

```math
  P(W_i|H_k) = 
  \frac{P(H_k|W_i)P(W_i)}{\sum_{j} P(H_k|W_j)P(W_j)} \tag{2}
```
と表される。まず、式(2)の左辺と右辺の意味を考えることで、式(2)全体の意味を理解する。

* 左辺は、$H_k$に入った全ての光子のうち、$W_i$からきた光子の確率を表す。
* 右辺の分子は、任意の1つの光子が$W_i$でもあり$H_k$でもある確率を表す。
* 右辺の分母は、任意の1つの光子が$H_k$である確率を表す。（シグマ和を取るところ以外は、右辺の分子同様に任意の1つの光子が$W_j$でもあり$H_k$でもある確率を表す。それを全てのピクセル座標で和を取るため、真の画像$W$の任意のピクセル座標のものからでよい。つまり、任意の1つの光子が$H_k$である確率を表す。）
* 右辺の分子分母から右辺は、$H_k$に入った全ての光子のうち、$W_i$からきた光子の確率を表す。


よって、式(2)の左辺と右辺の同じ意味である。このように、ベイズの定理によって**求めたい関係性を既知の情報を含んだ別の関係性から捉えることができる**。また、式(2)の$P(H_k|W_i)$は尤度と呼ばれ、既知のPSFで表される。

ここで、$W_i$がPSF程度に散らばって$H_k$で得られるので、全ての$W_i\cap H_k$を計算することで$W_i$を求めると、

```math
  P(W_i) = 
  \sum_{k} P(W_i\cap H_k)=\sum_{k} P(W_i|H_k)P(H_k) \tag{3}
```
となる。（条件付き確率より、$P(W_i|H_k)=P(W_i\cap H_k)/P(H_k)$を用いた。）

式(2)を式(3)に代入すると、

```math
  P(W_i) = 
  \sum_{k} \frac{P(H_k|W_i)P(W_i)P(H_k)}{\sum_{j} P(H_k|W_j)P(W_j)} \tag{4}
```
となる。

$P(W_i)$は本来知り得ない値なので、適当な推定値（撮像画像、全て均等な値の画像等）を初期値として入れることで逐次的に求めることができ、

```math
  P_{r+1}(W_i) = 
  P_r(W_i)\sum_{k} \frac{P(H_k|W_i)P(H_k)}{\sum_{j} P(H_k|W_j)P_r(W_j)} \quad
  r = 0,\ 1,\  2,\  \dots \tag{5}
```
となる。

PSFが規格化されていて全てのピクセル座標で同一のものを使用するとき、$W_i$のピクセルの座標を中心として$H_k$の確率は、

```math
P(H_k|W_i) = P_{i,k} \tag{6}
```
となる。また、真の画像と撮像画像で光子の総数は不変なので、

```math
\begin{align}
P(W_i) &= \frac{W_i}{\sum_l W_l} \\
P(H_k) &= \frac{H_k}{\sum_l H_l} = \frac{H_k}{\sum_l W_l} \tag{7}
\end{align}
```
となる。

よって、式(6), (7)を式(5)に代入して

```math
\begin{align}
    \frac{W_{i,r+1}}{\sum_l W_l} &= 
    \frac{W_{i,r}}{\sum_l W_l}
    \sum_{k} \frac{P_{i,k} \frac{H_k}{\sum_l W_l}}
    {\sum_j P_{j,k}\frac{W_{j,r}}{\sum_l W_l}} \\
    \iff W_{i,r+1} &= W_{i,r}\sum_k \frac{P_{i,k}H_k}{\sum_j P_{j,k}W_{j,r}}
    \quad r = 0,\ 1,\  2,\  \dots \tag{9}
\end{align}
```
となる。よって、RL法の理論式(1)は示された。

# 参考文献
* Richardson, William Hadley. 1972, JOSA, 62, 55–59
* Lucy, L. B. 1974, Astronomical Journal, 79, 745–754

# 関連資料
* [Richardson-Lucy deconvolutionの特徴をシミュレーションで理解しよう（前編：シミュレーションの実装）](https://qiita.com/yusuke_s_yusuke/items/c0e3ba1cf26e96e6696b)
* [Richardson-Lucy deconvolutionの特徴をシミュレーションで理解しよう（中編：結果の解析）](https://qiita.com/yusuke_s_yusuke/items/186d2b2af04391bcd7e0)
WPFをWindowsFormsのOwnerに設定する


## 問題

WPFのウィンドウ（System.Windows.Window）を
WindowsFormsのフォーム（System.Windows.Forms.Form）のOwnerに設定したい。

検索すると一番上に↓が出てきたが欲しい答えではなかったので別解をメモしておく。
[WPFウィンドウをWindowsフォームの親に設定する - MSDN](https://social.msdn.microsoft.com/Forums/ja-JP/122720a2-670f-41cd-8b87-7ae46ed580ca/wpf124541245112531124891245412434windows1250112457125401251212398?forum=csharpgeneralja)

## 解法

WindowInteropHelperとIWin32Windowを利用する。

```cs
// WPFのウィンドウ
var window = new System.Windows.Window();

// WindowsFormsのフォーム
var form = new System.Windows.Forms.Form();

// おまじない
var wih = new System.Windows.Interop.WindowInteropHelper(window);
var wnd = new Win32Window(wih.Handle);

// WPFをWindowsFormsのOwnerに設定
form.Show(wnd);


// IWin32Windowを継承したクラスを用意しておく
class Win32Window : System.Windows.Forms.IWin32Window
{
    public IntPtr Handle { get; }

    public Win32Window(IntPtr handle)
    {
        this.Handle = handle;
    }
}
```
Apache EChartsのグラフをスイッチで切り替えられるようにする ~1日10行コーディング~

## 概要

### 1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる...)

### 実装するもの

とあるソシャゲのイベント走った記録とかができるサービスを作りたい。

ただ、今日その中のグラフのタイプを切り替えられるようにする部分を作る。

## 手順

1. jqueryを使えるようにする
ラジオボタンの切り替えを検知したりするので素のJSだと大変なのでjqueryを使います。
jqueryのcdnを埋め込む

    ```html
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    ```
2. ラジオボタンを配置
グラフ切り替え用のラジオボタンを配置

    ````html
    <input type="radio" name="graf_type" value="線グラフ" checked/>線グラフ
    <input type="radio" name="graf_type" value="棒グラフ"/>棒グラフ
    ````
3. 切り替えを検知してグラフタイプを切り替える
スクリプトを記載(function以下が今回の実装)

    ````js
    // Initialize the echarts instance based on the prepared dom
    var myChart = echarts.init(document.getElementById('main'));

    // Specify the configuration items and data for the chart
    var option = {
        title: {
        text: 'ECharts Getting Started Example'
        },
        tooltip: {
        trigger: 'item'
        },
        legend: {
        data: ['sales']
        },
        xAxis: {
        data: ['1/11', '1/12', '1/13', '1/14', '1/15', '1/16']
        },
        yAxis: {},
        series: [
        {
            name: 'sales',
            type: 'line',
            data: [1000, 2000, 3000, 3000, 5000, 6000]
        }
        ]
    };

    // Display the chart using the configuration items and data just specified.
    myChart.setOption(option);

    $(function () {
        // ラジオボタンを選択変更したら実行
        $('input[name="graf_type"]').change(function () {
            console.log("sss");
            // value値取得
            var val = $(this).val();
            if(val == "棒グラフ"){
                option['series'] = [
                    {
                    name: 'sales',
                    type: 'bar',
                    data: [1000, 2000, 3000, 3000, 5000, 6000]
                    }
                ];
                myChart.setOption(option);
            }else{
                option['series'] = [
                    {
                    name: 'sales',
                    type: 'line',
                    data: [1000, 2000, 3000, 3000, 5000, 6000]
                    }
                ];
                myChart.setOption(option);
            }
        });
    });
    ````
ラジオボタンの切り替えを検知して、optionの値を書き換えて登録してsetOptionを流せばおｋ
でもちょっと気に入らないので一部書き換え

    ````js
    $(function () {
        // ラジオボタンを選択変更したら実行
        $('input[name="graf_type"]').change(function () {
            // value値取得
            var val = $(this).val();
            if(val == "棒グラフ"){
                option['series'][0]['type'] = 'bar';
                myChart.setOption(option);
            }else{
                option['series'][0]['type'] = 'line';
                myChart.setOption(option);
            }
        });
    });
    ````
AWS認定 MLS-C01に合格しました（2022/02/15）

## はじめに

2022/02/15にAWSの機械学習試験`AWS MLS-C01`に合格したので、使った教材や出題内容について書きます。
これから受ける方の参考になれば嬉しいです。

参考）[AWS MLS合格記(2022/1/28投稿) - Qiita](https://qiita.com/handy-dd18/items/42ae7b81851658ee3187)

## 受験結果
ガッツリ勉強したのは10日間くらいでしたが、なんとか合格できました。
![スクリーンショット 2022-02-15 19.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119757/b848403a-bff8-ac42-b797-cc093742725e.png)


## 受験前の経験・知識など

* 新卒2年目、データエンジニア・データサイエンティスト
* 機械学習は専門ではないが、学生時代に授業などで触ったことはあるのでキーワードはそこそこ覚えている
    * [少し前に簡単な画像分類アプリも作った](https://qiita.com/oddgai/items/2a1074cbd127c1a62709)
* AWS系の業務経験はあまりない
    * 日常的にSQL（RedShift）とS3は使うが、管理者ではないのでアクセス権などはよくわからない
    * SageMakerは一瞬だけ触ったことがある
* `SAA-C02`を半年前に合格したので、AWS全体のざっくりとした知識はある


## 使った教材

このような流れで勉強しましたが、AWS公式教材は最初のほうに触ったほうがよいと思いました（koiwaclubに解答ミスがあり、直前で公式模試を解いて間違いに気づきました）。
**koiwaclub（1週間）→ AWS公式教材（3日）→ 受験**

* [koiwaclub（AWS WEB問題集）](https://aws.koiwaclub.com/)
    * 1周目の正解率は40~50%ほどで、2周目で90%以上にしました
    * 前日に受けた本試験モードでは900点（92%）でした
    * 解答ミスがいくつかあったので、合格後に訂正依頼をしました（AWS公式模試と同じ問題で公式と正解が違う）
* AWS公式教材
    * [Black Belt](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut)
        * `Analytics`、`Machine Learning`、`Internet of Things`の3分野を読みました
    * [Exam Readiness: AWS Certified Machine Learning - Specialty (Japanese)](https://explore.skillbuilder.aws/learn/course/629)
        * 公式学習ガイド＋30問くらいの模試
    * [AWS Certification Official Practice Question Sets (Japanese)](https://explore.skillbuilder.aws/learn/course/9159)
        * 公式模試

あまり良くないとは思いますが、SageMakerや他AIサービスのハンズオンなどはしていません。細かい使い方を知らないと解けない問題もあるとは思っていましたが、そこは切り捨てました。


## 出題内容

ざっくり、以下のような出題でした。

* 30%：koiwaclubとほぼ同じ問題
* 55%：koiwaclubにはなかったが、koiwaclubやBlack Beltの内容を押さえておけば解ける問題
* 15%：使用経験がないとわからなそうな問題（SageMaker、Personalize、Forecastなどの使い方）

座学だけでも十分合格はできますが、実際にハンズオンなどをやるとさらに安心だと思います。

日本語で受験しましたが、問題文の和訳が微妙なところは英語でも確認しました。実際、混同行列の問題で`precision`が「精度」と訳されていたものがあり、危うく間違えるところでした。


## 感想

ずっと（受けないとな〜）と頭の片隅にあってモヤモヤしてたので、合格できてよかったです。
とはいえ「MLSもってるけどSageMaker使えません」は本末転倒なので、これからマイペースに触っていこうと思います。
40 代おっさん GASの配列

## 本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## 配列

複数のデータをまとめて集合として取り扱う方法の１つ

```javascript
[ 値1,値2,… ]
```

この表現方法を配列リテラルと言う

### インデックス

配列はそれぞれの入れ物（値が入っている物）に番号が振られている
この番号のことをインデックスと言う。
0から始める。

### 要素

格納する値を要素と言う

```javascript
function myFunction() {
  const familyname = ['パパ', 'ママ', '利樹'];
  console.log(familyname[2]);
}
```

利樹と出たと思います。
constだが定数はあくまで定数の再代入を禁止しているが、要素の変更は禁止していない。

## 二次元配列

配列を要素とした配列のこと

```javascript
[配列1, 配列2, …] 
```

```javascript
function myFunction() {
  const familyname = [['パパ', 'ママ', '利樹'],['アッキーママ', 'アッキー']];
  console.log(familyname[1]);
  familyname[1] = ['アッキーお母さん','アッキー']
  console.log(familyname);
}
```

## 配列の分割代入

変数に配列の要素をまとめて代入したいときに用いる

構文

```javascript
[変数1, 変数2, …] = 配列
```

定数にまとめて代入する場合も定数宣言と分割代入をまとめて行える。

```javascript
const [定数1, 定数2, …] = 配列
```

```javascript
function myFunction() {
  const familyname = ['パパ', 'ママ', '利樹'];
  let a, b, c;
  [a, b, c] = familyname;
  console.log(a, b, c);

  const [name, age, favorite] = [c, 4, 'みかん'];
  console.log(name, age, favorite);
}
```

## 配列のスプレッド構文

配列やオブジェクトの要素を文字通り展開する構文
...のあとに破裂をつなげる
わかりずらいので

```javascript
function myFunction() {
  const familyname = ['パパ', 'ママ', '利樹'];
  console.log( ['アッキー', ...familyname]);
}
```

配列を二つ使うこともできるみたいです。

## 参考資料

<https://www.amazon.co.jp/s?k=google+apps+script+%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80&adgrpid=110264232688&gclid=CjwKCAiA9aKQBhBREiwAyGP5lSl7AJJLCvOEHb4wQgMlyqW1fll5X8GDTT_Rkd1_soUAyIPMXQr26hoClHEQAvD_BwE&hvadid=553833563682&hvdev=c&hvlocphy=1009076&hvnetw=g&hvqmt=b&hvrand=4378489642044417389&hvtargid=kwd-594191211348&hydadcr=4106_13159878&jp-ad-ap=0&tag=googhydr-22&ref=pd_sl_2x1owglv0s_b_p52>
Node-RedでOpenCVするまでのメモ

色々試行錯誤が必要だったのでメモ

#環境
Ubuntu20.4.3LTS
Node-Red

#使いたいのはこちら
https://github.com/justadudewhohacks/opencv4nodejs

#Install
opencv4nodejsにOpenCVの自動Build Scriptが入っているのですが失敗するので、別々にインストールします。

##事前にインストールが必要な物
* git
* cmake
* gcc(これは入っていた)
* g++

Proxyを使う場合はnode、apt-get、gitのProxy設定が必要。

##OpenCV
opencv-4.5.3.tar.gz を github からダウンロード。
https://github.com/opencv/opencv/releases

```
$ tar xf opencv-4.5.3.tar.gz
$ cd  opencv-4.5.3
$ mkdir build
$ cd build
$ cmake .. -DCMAKE_INSTALL_PREFIX=/usr/local
$ make
$ sudo make install
```
##node-gyp　(これは必要かどうか不明）
g++が無いと失敗します?

```
$ npm install -g node-gyp
```
##opencv4nodejs
Node-Redのフォルダで作業

```
$ cd ~/.node-red
$ export OPENCV4NODEJS_DISABLE_AUTOBUILD=1
$ npm i --save opencv4nodejs
```
#設定
~/.node-red/settings.jsの
functionExternalModulesを trueに設定します。設定後はNode-Redを再起動します。
![Screenshot from 2022-02-15 19-06-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/dc6f004c-55a8-acb7-69ef-6f9449c1ef0c.png)
パレットの管理でnode-red-contrib-image-outputをインストールします。
以下のようなFlowを作ります。
![Screenshot from 2022-02-15 19-02-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/ee7c87a1-20a1-3c65-9414-38a1f2ad7a82.png)

FunctionノードのSetupは以下のようにします。**functionExternalModules**が**false**のままだったら、Modulesの設定は表示されません。

![Screenshot from 2022-02-15 19-03-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/d2923cdf-1da0-eda4-e809-681e42c22851.png)

あと、コードの部分がこんな感じです。capをReleaseしないとNode-Redが無応答になることがあります。
![Screenshot from 2022-02-15 19-03-28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/befa2c40-e05a-aeb2-7730-5faa00e2be2b.png)

#実行
Injectorのボタンを押すとUSBカメラから画像を取り込めました。
![Screenshot from 2022-02-15 19-03-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97061/dc2ceb45-5f52-5c58-924f-599af9d5ff0b.png)

#参考にした記事

https://waku-take-a.github.io/node-red_opencv_001.html

https://waku-take-a.github.io/node-red_opencv_002.html

https://osima.jp/posts/opencv4nodejs-ubuntu/
AWSロードマップ(Lamda基礎知識)

#目次
[1.はじめに](#1-はじめに)
[2.用語](#2-用語)
[3.ドローンでクラウドを利用](#3-ドローンでクラウドを利用)

#1. はじめに
ドローン✖︎クラウドの記事をよく見るけど、どうゆう仕組みで連携してるのか分からなかったので
[AWSロードマップ](https://qiita.com/KurokawaKouhei/items/4e9aa3b526f3f233bf85 "Qiita Home")で勉強をしたいと思います！
(まずはざっくり覚えて徐々に深堀していく、仕事でAWS少し触ったぐらい)

####Lamdaとは『サーバレスのFaaS』
- クラウド上にプログラムを定義しておき、インターネットを通じて実行できるサービス
- サーバやミドルウェアの管理はAWSがしてくれるので、プログラムだけを考えればいい

#2. 用語
![スクリーンショット 2022-02-15 17.51.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2181084/0d430232-81ac-7dd6-9347-f472e9b000ad.png)

####バージョン管理
- ソースコードの過去バージョンの保管と開発段階(開発、本番)に合わせたコードの利用に使える
- $LATEST
    - 最新
    - これしか編集できない、過去のコードはできない
- エイリアス
    - 特定のバージョンに紐づけるポインタ
    - このエイリアスで環境を使い分ける

####テストイベント実行
- 作成した関数をテストできる

####同期呼び出し
- Lambdaが実行され、処理が完了してからレスポンスが返ってくる
- 非同期呼び出し
    - 直接呼び出す訳ではなく、キューイングされた後に実行

####環境変数
- コードを更新せずに関数の動作を調整できる

####Serverless Framework
- お手軽に「サーバレスアーキテクチャ」を構築することができるフレームワーク
    - サーバーレスアーキテクチャ => 常時起動しているサーバーを使わずにサーバーの仕組みが実現できている

#3. ドローンでクラウドを利用
####[小菅村でのドローン配送](https://drone-journal.impress.co.jp/docs/special/1184002-2.html "小菅村でのドローン配送")
- 今は現地で補助員などを配置したりしてて今後は遠隔監視で自動離着陸させる
    - 離着陸地点の映像をリアルタイムで取得とかが必要そう
        - 最適かは分からんけど、案件で使った[IVS](https://docs.aws.amazon.com/ja_jp/ivs/latest/userguide/what-is.html "IVS")は知識が少ない状態でもリアルタイム通信(10秒後の映像が表示される)できた
【git】ひっかかったことと解決法一覧


gitでデータアップロードする際にひっかかった事と解決策一覧。
英語で返ってくるので一見難しいこと言われてる気がしてくるけど、翻訳すると結構親切な文で返してくれてるなという印象。
でも忘れた頃にやると、結構混乱するので自分用メモです。

参考にさせていただいた記事やページは本文下部に記載しております。

# ①This key is not known by any other names　Are you sure you want to continue connecting (yes/no/[fingerprint])? 

git push -u origin masterコマンドを打った際にでる。

###### 解決策
yesと入力するだけ。

- ざっくりした文の内容
「この公開鍵は初見だけど本当にアップロード続けて大丈夫？」
- 初回アップロード時に発生。（OS変更したときなど）
- 自分的ひっかかりポイント…yes/noで聞かれてるのに脳死エンターしていた


# ②error: src refspec masuter does not match any

こちらもgit push -u origin masuterコマンドを打った際に出る。

###### 解決策①そもそもローカルリポジトリ内にプッシュするデータがない場合
```
#インデックスに登録し、ローカルリポジトリにデータを反映
git add .
git commit 'first commit'
```
###### 解決策②ブランチ名の不一致が原因の場合
```
git push origin main
```

解決策②についてはこちらの記事を参照
https://deepblue-ts.co.jp/git/git-push-error/

# ③Nothing specified, nothing added.
hint: Maybe you wanted to say 'git add .'?
hint: Turn this message off by running
hint: "git config advice.addEmptyPathspec false"

git add と打った際にでた。

###### 解決策　ヒントをちゃんと見る。「git add .」と入力
```
# 以下はNG
git add

# 正しくはこっち
git add .
```

- ざっくりした文の内容
「何も追加されてないよ。もしかして 'git add .'がやりたかった？それだったら実行してみてね」
- 自分的ひっかかりポイント…最後の「.」忘れの凡ミス

# ④error: failed to push some refs to "URL"

リモートにアップ後、SQL文のドキュメントファイル入れるのを忘れていたことに気づきデータ更新しようとした際に発生。
原因としては、GitHub上でREADMEを更新していた為ローカルからの上書きができない状態だった。

###### 解決策２案
```
# ①強制的にpushする場合（個人開発時の他人に影響でない時はこれでもよい）
git push --force

# ②リモートのデータ（READMEが入ってる最新版）をローカルに反映させてから、再push
git pull origin develop
```

個人開発時は案①、チーム開発時は案②で対応するのが良いとのこと。
横着せず基本案②で行うのが安全そうです。

- ざっくりした文の内容
「リモートリポジトリが最新だからpushできるものないよ」

# 参考記事

https://deepblue-ts.co.jp/git/git-push-error/


https://qiita.com/chiaki-kjwr/items/118a5b3237c78d720582
rpyc で Python でそこそこお手軽にリモートで Python 動かしたり分散処理するメモ

## 背景

Python スクリプトを Windows で動かしたい(windows の固有の機能を呼ぶとか)が, Windows 上でやるのはめんどいし, ssh で入ってというのもめんどいので, Linux から制御したい..

小規模なクラスタ(Linux, Windows 混在)でちょっとした分散処理したい.

rpyc がありました!

https://rpyc.readthedocs.io/en/latest/

## Windows でサーバはうまく行かない...?

ただ, 筆者の環境では Windows でサーバを建てて Linux からアクセスというのは, private だけチェックでは firewall によりポートがブロックされるのかできませんでした.
(ポート開放リクエスト時, public にチェックいれれば解放されるが... private(ローカルネットワークだけ OK にしたいところ))

## セキュリティ

いずれにせよ簡易に Windows 上でサーバが素でうごくとセキュリティ上よろしくないと思いますから(public で on になっているとインターネット外部からアクセスできちゃうかも! :rolling_eyes: )ので, ssl 通信させるか, ssh Zero deploy で対応するのがいいでしょう.

さらによりセキュリティを確保したい場合は, Windows ではサーバを建てず, Linux のどこか(Docker コンテナ内とか)にサーバを建てて, Windows ノードはクライアントとさせるのがよいでしょうか. 

### SSL でつなぐ

https://rpyc.readthedocs.io/en/latest/docs/secure-connection.html

openssl あたりで鍵とか作ります.
最初めんどい感じですが, 大まかには

- CA の鍵とか作る
- サーバの鍵と証明書作る(証明書は CA ので署名)
- client の鍵と証明書とか作る(証明書は CA ので署名)

という感じでしょうか.

http://www2.matsue-ct.ac.jp/home/kanayama/text/nginx/node94.html

https://mariadb.com/docs/security/encryption/in-transit/create-self-signed-certificates-keys-openssl/


## Zero deploy

ssh ログインでサーバ建てずにやる方法もあります.

https://rpyc.readthedocs.io/en/latest/docs/zerodeploy.html

Windows(not server version?) につなぐときは, sshd は最近は標準で入っているようだが, ポート解放されていないようなので, port 22 をうまく解放しておく必要がある.

https://qiita.com/aeas44/items/28b965d4f41c04f28d5a
Webの勉強はじめてみた その32 〜AJAXとWebSocket〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章9,10節です。

## AJAX
Asynchronous JavaScript + XML
クライアント-サーバー間で、非同期に通信が行える。

:::note
複数ページで実装していたサイトを単一のページで複数の機能(AJAXやWebSocket)を表現したアプリケーションを、シングルページアプリケーション(SPA)という。
:::



```javascript:app.js
const serverStatus = require('./routes/server-status');
app.use('/server-status', serverStatus);
```

```javascript:app/entry.js
const loadavg = $('#loadavg');

setInterval(() => {
  $.get('/server-status', {}, (data) => {
    loadavg.text(data.loadavg.toString());
  });
}, 10);
```

```javascript:routes/server-status.js
'use strict';
const express = require('express');
const router = express.Router();
const os = require('os');

router.get('/', (req, res, next) => {
  res.json({ loadavg: os.loadavg() });
});

module.exports = router;
```

ちょっとわかりにくい。

json形式はJavaScriptのオブジェクトの書き方ができるので、`{loadavg: os.loadavg()}`となる。

最初に`app.js` が読み込まれ、 `/server-status`にアクセスされると、`server_status.js`が呼び出される。
なお、`server-status.js`の`get`は、自分のことを指すので `/`になる。
`server-status.js`の`res.json`の値が`entry.js`の`data`に格納される。

### ポーリング
:::note
クライアントからサーバーに対して一定間隔に情報を取得する実装方法
:::

今回みたいな10ミリ秒はかなり負荷がかかる。

### ロードアベレージ
:::note
1 CPU における単位時間あたりの実行待ちとディスクI/O待ちのプロセス数
:::

1を超えるとビジー状態。

### 同一生成元ポリシー（Same-Origin Policy）
:::note
ブラウザのセキュリティ上の考え方で、 コンテンツが同一の生成元から提供されているかを確認し、外部からの干渉を防ごうとするポリシー
:::

今回でいうと、

スキーム: http
ホスト: localhost
ポート: 8000

この三つが同じでないとAJAXでは弾かれる
同一生成でない領域へのアクセスのことをクロスオリジンリクエストという。

## WebSocket
:::note
Webサーバーとブラウザ間で利用できる双方向通信の規格
リアルタイムを優先するなら、AJAXよりもWebSocket。
:::

プル通信： 常にクライアントがサーバーに情報を要求する(AJAX)
プッシュ通信: クライアントだけでなく、サーバーからも任意のタイミングでクライアントに情報を送信できる(WebSocket)

リクエストがあると、接続を維持し続ける。

### Socket.IO を利用する

```
yarn add socket.io@2.1.1 socket.io-client@2.1.1
```

サーバー側

```javascript:bin/www
var server = http.createServer(app);
const io = require('socket.io')(server);
const os = require('os');

function emitServerStatus(socket){
  socket.emit('server-status', {loadavg: os.loadavg()});
  console.log(`server-status event emitted.`);
}

io.on('connection', function(socket){
  setInterval(emitServerStatus, 10, socket);
});
```

クライアント側

```javascript:app/entry.js
const loadavg = $('#loadavg');

import io from 'socket.io-client';
const socket = io('http://localhost:8000');
socket.on('server-status', (data) => {
  loadavg.text(data.loadavg.toString());
});
socket.on('connect', () => {
  console.log('接続しました');
});
socket.on('disconnect', () => {
  console.log('切断しました')
});
```

`connection` イベントは、クライアントから接続要求があったときに発生する。

`socket.emit('server-status', {})`
全てのクライアントに向けて、`server-status`というイベントを発生させる。

## まとめ
AJAXは以前にも何回か使ったことはあるけれど、WebSocketははじめて。サーバーを閉じて接続を切断した時にもクライアントが延々と情報を送り続けようとするのをみても、単純にどっちがいいってこともなさそう。
しかし`express`にまだ慣れてないのもあって、どこに何を書けばいいのかというのがぱっと判断できないのが悩み。
Githubがmermaid.jsに対応したので早速使ってみました。


こんにちは。
Twitterでトレンドに上がっていたmermaid.jsとの連携対応が可能になったとの事だったので遊んでみました。
それだけの報告なので、特に技術的な価値はあまりないっす。

実際のGithubでの表示とコードをそれぞれ記載していますので参考にどうぞ！

# シーケンス図

![sequenceDiagram.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2028663/1b470287-2685-700f-393b-225c5ad09cd6.png)
書き方。

 ```
 ```mermaid
sequenceDiagram
    ブラウザ->>+Controller: Httpリクエスト
    Controller->>+Service: ロジック層処理
    Service->>+Repository: クエリ発行
    Repository->>+DB: データベース操作
    DB->>-Repository: データベース結果
    Repository->>-Service: データ返却
    Service->>-Controller: コンバート処理
    Controller->>-ブラウザ: Htmlレンダリング
 ```
 
# フローチャート

![flow.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2028663/3309b819-e768-8ab8-b499-0427395e38f4.png)
書き方。

 ```
  ```mermaid
 graph TB
  朝起きる --> 筋トレする
  筋トレする -->|はい| プロテイン飲む
  筋トレする -->|いいえ| お風呂
  プロテイン飲む --> お風呂
  お風呂 --> 保湿
  保湿 --> 休日
  休日　--> |Yes| ゲームする
  休日　--> |No| Slack確認
 ```
# ステートダイアグラム

 ![state.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2028663/e438608c-fd52-46e6-225a-34044ee9c11d.png)
書き方。

 ```
  ```mermaid
 stateDiagram
  [*] --> Render
  Render --> Submit
  Submit --> Loading
  Loading --> Render
  Loading --> dataLoad
  dataLoad --> UseEffect
  UseEffect --> Loading
 ```
【Qiita】これだけで完璧！10個のMarkdown記法🖋

# はじめに
はじめまして！
フリーランスマーケターをしながら独学でプログラミングを学んでいるたくろーと申します。

こちらの記事では、Qiitaを投稿する上で欠かせないMarkdown記法について、
__これさえ覚えておけば間違いない10個の記法__を厳選しました。🖋

ぜひこちらの記事を参考にしながら、より質の高いアウトプットを目指して
記事を執筆していただきたいなと思います。

# この記事の使い方

こちらの記事では、それぞれの記法ごとに

__・書き方
・表示例__

をセットで記載しています。

目次から使用したい記法を選択し、書き方の部分をコピー&ペーストすることで
すぐに使用することが可能です。

別タブでこちらの記事を開きながら記事執筆を進めると、より効率的かと思います。
ぜひご自由にお使いください。

## 【目次】
[①見出し](#見出し)
[②リスト](#リスト)
[③太字](#太字)
[④文字色の変更](#文字色の変更)
[⑤斜体](#斜体)
[⑥引用](#引用)
[⑦コードの挿入](#コードの挿入)
[⑧リンクの挿入](#リンクの挿入)
[⑨画像の挿入](#画像の挿入)
[⑩テーブル（表）の挿入](#テーブルの挿入)

## 見出し

```HTML:書き方
# ここにテキストを挿入
## ここにテキストを挿入
### ここにテキストを挿入
#### ここにテキストを挿入
##### ここにテキストを挿入
```
# ここにテキストを挿入
## ここにテキストを挿入
### ここにテキストを挿入
#### ここにテキストを挿入
##### ここにテキストを挿入

## リスト

```HTML:書き方（通常）
* ここにテキストを挿入
    * ここにテキストを挿入
    * ここにテキストを挿入
        * ここにテキストを挿入
        * ここにテキストを挿入
```

* ここにテキストを挿入
    * ここにテキストを挿入
    * ここにテキストを挿入
        * ここにテキストを挿入
        * ここにテキストを挿入

```HTML:書き方（番号付き）
1. ここにテキストを挿入
2. ここにテキストを挿入
    3. ここにテキストを挿入
    4. ここにテキストを挿入
        5. ここにテキストを挿入
```

1. ここにテキストを挿入
2. ここにテキストを挿入
    3. ここにテキストを挿入
    4. ここにテキストを挿入
        5. ここにテキストを挿入

## 太字

```HTML:書き方
**ここにテキストを挿入**
```
**ここにテキストを挿入**

##文字色の変更
```HTML:書き方
<font color="Red">ここにテキストを挿入</font>
<font color="Blue">ここにテキストを挿入</font>
<font color="Green">ここにテキストを挿入</font>
<font color="#fcba03">ここにテキストを挿入</font>
```
<font color="Red">ここにテキストを挿入</font>
<font color="Blue">ここにテキストを挿入</font>
<font color="Green">ここにテキストを挿入</font>
<font color="#fcba03">ここにテキストを挿入</font>

## 斜体
```HTML:書き方
*ここにテキストを挿入*
```
*ここにテキストを挿入*

## 引用
```HTML:書き方
> ここにテキストを挿入します
ここにテキストを挿入します
>> ここにテキストを挿入します
ここにテキストを挿入します
```
> ここにテキストを挿入します
ここにテキストを挿入します
>> ここにテキストを挿入します
ここにテキストを挿入します

## コードの挿入
書き方
> \`\`\`言語名:タイトル
> ここにテキストを挿入します
> \`\`\`

```言語名:タイトル
ここにテキストを挿入します
```

書き方例（Javascriptの場合）
> \`\`\`Javascript:タイトル
> function hello(){
  return "hello world!";
}
> \`\`\`

```Javascript:タイトル
function hello(){
  return "hello world!";
}
```

## リンクの挿入
```HTML:書き方
[ここにテキストを挿入します](URL)
```
[ここにテキストを挿入します](URL)

## 画像の挿入
```HTML:書き方（ドラッグ&ドロップ）
![代替テキスト](URL)
```
```HTML:書き方例（ドラッグ&ドロップ）
![Photo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/ccfa0e0f-209d-99cc-ec5f-e5679fc6718c.jpeg)
```
![Photo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/ccfa0e0f-209d-99cc-ec5f-e5679fc6718c.jpeg)

```HTML:書き方（サイズ指定）
<img width="数値" alt="代替テキスト" src="URL">
```
```HTML:書き方例（サイズ指定）
<img width="300" alt="Photo.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/ccfa0e0f-209d-99cc-ec5f-e5679fc6718c.jpeg">
```
<img width="300" alt="Photo.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2478073/ccfa0e0f-209d-99cc-ec5f-e5679fc6718c.jpeg">

## テーブルの挿入
```HTML:書き方（入力時）
列数x行数
```
```HTML:書き方例（入力時）
3x2
```
```HTML:書き方例（自動変換後）
| 1 | 2 | 3 |
|:-:|:-:|:-:|
|   |   |   |
|   |   |   |
```
| 1 | 2 | 3 |
|:-:|:-:|:-:|
|   |   |   |
|   |   |   |
Zshではread -pが動かない

# はじめに
Zshで`read -p`で標準入力を変数に格納しようとすると`read: -p: no coprocess`とエラーになります。
ちょっとハマったので対処方法を書きます。

# 原因
ZshとBashで`read`コマンドのオプションが変更されています。
[マニュアル](https://zsh.sourceforge.io/Doc/Release/Shell-Builtin-Commands.html#index-read)によると、

> -p
Input is read from the coprocess.

とあります。
coprocessについてはおそらく[Bashのもの](https://qiita.com/arc279/items/0f44b2495c847a12b2e4)と同等の機能と思われます（すみません詳しくないです）。

# solution
`read "変数名?プロンプト"`とすればBashにおける`read -p "プロンプト" 変数名`と同等の動作になります。

ZshでもBashでも動くようにします。

```
if [ -n "$ZSH_VERSION" ]; then
  read "STDIN?pronpt: "
else
  read -p "pronpt: " STDIN
fi

echo $STDIN
```

# 参考
https://stackoverflow.com/questions/15174121/how-can-i-prompt-for-yes-no-style-confirmation-in-a-zsh-script
n2p2のインストール

[n2p2](https://compphysvienna.github.io/n2p2/)はBehler-Parrinelloニューラルネットワークポテンシャルを構築するためのプログラムです (Behlerによるオリジナルのコードに関しては[こちらのページ](https://theochemgoettingen.gitlab.io/RuNNer/1.3/)を参照して下さい)。
以下に私の所属するグループで使用しているクラスターシステム上でのn2p2の導入の手順をまとめました。

## 環境

- クラスターシステム
    - smith (Intel(R) Xeon(R) CPU E5-2680 v4 @ 2.40GHz)

```
Linux smith2 3.10.0-1127.18.2.el7.x86_64 #1 SMP Sun Jul 26 15:27:06 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
```
- モジュール
    - intel/2020.2.254
    - intelmpi/2020.2.254
    - python/3.8
    - cmake/3.18.3

## 準備

必要なライブラリは~/local以下にインストールするものとし、ソースファイルは~/local/srcでダウンロード・コンパイルすることにします。

### Eigenのインストール

``~/local/src``で以下を実行

```bash
wget https://gitlab.com/libeigen/eigen/-/archive/3.4.0/eigen-3.4.0.tar.gz
```

```bash
 tar zxvf eigen-3.4.0.tar.gz; cd eigen-3.4.0
```

``~/local/include/eigen3``というディレクトリを作製し、以下を実行します。
ディレクトリ名は任意ですが、``n2p2``をコンパイルするときに正しいパスをmakefileの中で指定する必要があります。

```bash
mkdir -p ~/local/include/eigen3
```
コンパイルは不要なので``Eigen``というディレクトリをコピーします。
```bash
cp -r Eigen ~/local/include/eigen3
```

### GSLのインストール

Eigenと同様、``~/local/src``で以下を実行：

```bash
wget ftp://ftp.gnu.org/gnu/gsl/gsl-latest.tar.gz
```

```bash
tar zxvf gsl-latest.tar.gz
```

```bash
cd gsl-2.7.1
```

ソースディレクトリで以下を実行してGSLをコンパイル、インストールします。

```bash
./configure --prefix=$(HOME)/local
```

```bash
make
```

```bash
make check
```

```bash
make install
```

## n2p2のコンパイル

n2p2のソースディレクトリを適当に作製し、n2p2の[github](https://github.com/CompPhysVienna/n2p2)ページからソースコードをダウンロードします

```bash
git clone https://github.com/CompPhysVienna/n2p2.git
```

``n2p2/src``に移動してmakefileを編集します。
ここではintelコンパイラを使用することにし、``makefile.intel``を編集します。

GSLとEigenへのパスを指定

```
PROJECT_GSL=${HOME}/local/
PROJECT_EIGEN=${HOME}/local/include/eigen3
```

コンパイラオプションは以下を指定しておきます（オリジナルの``-xHost``を外しています）。

```
PROJECT_CFLAGS=-O3 -std=c++11 -ipo
```

makeの実行

```bash
make all COMP=intel
```

エラーが起きなければ``n2p2/bin``以下になどの実行ファイル (``nnp-*``) がインストールされます。
Laravel sail で composer が失敗するエラーの対処

# 環境
Laravel 8.1
WSL

# エラー内容
sail で立ち上げたプロジェクトに対し、composer install などが失敗する。
どうやら chmod が使えないようだ。
```bash
> ./vendor/bin/sail composer install
(省略)
chmod(): Operation not permitted
```

# 対処
chmod を使えるようにしてあげれば OK。

1. WSL 上に ``/etc/wsl.conf`` を作成し、以下をコピペ。
   ```/etc/wsl.conf
   [automount]
   enabled = true
   options = "metadata"
   mountFsTab = false
   ```
1. 全ての WSL にアクセスしているウィンドウを閉じる。Docker Desktop も終了しておく。
1. powershell を開き、``wsl --list`` を叩いて sail に使っているディストリビューションの名前を確認する。
   ```powershell
   > wsl --list
   docker-desktop-data (既定)
   Debian
   docker-desktop
   Ubuntu # これを使っているとする
   ```
1. 以下を叩いて対象のディストリビューションを終了する。
   ```powershell
   wsl --terminate Ubuntu 
   ```
1. Docker Desktop を再起動

これで、あとは再び ``./vendor/bin/sail up`` して、``./vendor/bin/sail composer install`` すればうまくいくはず。

# 参考

https://github.com/Microsoft/WSL/issues/81#issuecomment-796798258
C言語　回転行列関数を自作した。

# はじめに

C言語で回転行列を行いたくて、コードを探したのですが、解説は出てくるものの具体的なコードがなかったので、自作しました。

## コード

```c
# include <math.h>

typedef struct s_vect
{
	double		x;
	double		y;
	double		z;
}				t_vect;

t_vect	vect_rotate(t_vect vect, t_vect axis, double angle)
{
	t_vect	ret;
	double	x_rot;
	double	y_rot;
	double	z_rot;

	x_rot = axis.x * axis.x * (1 - cos(angle)) + cos(angle);
	y_rot = axis.x * axis.y * (1 - cos(angle)) - axis.z * sin(angle);
	z_rot = axis.z * axis.x * (1 - cos(angle)) + axis.y * sin(angle);
	ret.x = x_rot * vect.x + y_rot * vect.y + z_rot * vect.z;
	x_rot = axis.y * axis.x * (1 - cos(angle)) + axis.z * sin(angle);
	y_rot = axis.y * axis.y * (1 - cos(angle)) + cos(angle);
	z_rot = axis.y * axis.z * (1 - cos(angle)) - axis.x * sin(angle);
	ret.y = x_rot * vect.x + y_rot * vect.y + z_rot * vect.z;
	x_rot = axis.z * axis.x * (1 - cos(angle)) - axis.y * sin(angle);
	y_rot = axis.z * axis.y * (1 - cos(angle)) + axis.x * sin(angle);
	z_rot = axis.z * axis.z *  (1 - cos(angle)) + cos(angle);
	ret.z = x_rot * vect.x + y_rot * vect.y + z_rot * vect.z;
	return (ret);
}
```
Apple Silicon (Apple M1) のmacOSからRosetta 2を駆逐する

## はじめに

この記事は、Apple Developer Forumsのスレッド["Can you remove Rosetta 2 on Apple Silicon?"](https://developer.apple.com/forums/thread/669486)のkyrsquirさんの投稿について、実際に検証したという記事になります。

## Rosetta 2を駆逐する手順

### 0. アクティビティモニタでIntelプロセスが動いていることを確認

Rosetta 2がインストールされていれば、起動直後には`CarbonComponentScannerXPC`というプロセスが存在しているはずです。一連の作業の後、このプロセスが消えればOKです。

### 1. Rosetta 2に関係するファイルの洗い出し

以下のコマンドで、`com.apple.pkg.RosettaUpdateAuto`に関連するファイル・ディレクトリ・LaunchAgentを洗い出します。

```shell:
% pkgutil --files com.apple.pkg.RosettaUpdateAuto
Library
Library/Apple
Library/Apple/usr
Library/Apple/usr/lib
Library/Apple/usr/lib/libRosettaAot.dylib
Library/Apple/usr/libexec
Library/Apple/usr/libexec/oah
Library/Apple/usr/libexec/oah/debugserver
Library/Apple/usr/libexec/oah/libRosettaRuntime
Library/Apple/usr/libexec/oah/runtime
Library/Apple/usr/libexec/oah/translate_tool
Library/Apple/usr/share
Library/Apple/usr/share/rosetta
Library/Apple/usr/share/rosetta/rosetta
```

洗い出したものはリダイレクトなりでtxtに落として保存しましょう。

### 2. Recoveryモード (macOS復旧) で起動

Macの電源を落とします。Powerボタンを押しっぱなしにし、オプションを表示させて「macOS復旧」に入ります。([詳細](https://support.apple.com/ja-jp/guide/mac-help/mchl82829c17/mac))

ステータスバーの「Utilities」(ユーティリティ)から、ターミナルを起動します。

### 3. System Integrity Protection (SIP)の無効化

以下のコマンドを実行し、SIPを無効化します。`y/N`が聞かれるので`y`でconfirm、パスワードを入力。

```shell:
# csrutil disable
```

「再起動後にSIPが無効化される」という旨が表示されます。

なお、SIPは「システム整合性保護」の機構で、以下のような機能を提供します。**無効化することはリスクを伴う行為であること**は承知しましょう。(ソース: [Mac のシステム整合性保護について](https://support.apple.com/ja-jp/HT204899))

> Mac 上の保護されたファイルやフォルダを改ざんしようとする悪質なソフトウェアからデータを守ります。システム整合性保護では、ルートユーザアカウントに制約を課し、Mac オペレーティングシステムの保護されている部分に対してルートユーザが実行できる操作を制限します。

### 4. 再起動後、1.で記録しておいたファイルを削除

通常のブートオプションで再起動・ログインします。ターミナルを開き、記録しおいたファイルを削除していきます。**以下のコマンドはディレクトリごと消しているため、そのまま実行すると、余計なものまで消されるかもしれません。確認しつつ削除していきましょう**。

```shell:
% sudo rm /Library/Apple/usr/lib/libRosettaAot.dylib
% sudo rm -rf /Library/Apple/usr/libexec
% sudo rm -rf /Library/Apple/usr/share/rosetta
```

### 5. Recoveryモード (macOS復旧) で起動

再び再起動、macOS復旧に入り、ステータスバーの「Utilities」(ユーティリティ)からターミナルを起動します。

### 6. SIPの有効化

以下のコマンドを実行し、SIPを有効化します。`y/N`が聞かれるので`y`でconfirm、パスワードを入力。

```shell:
# csrutil enable
```

### 7. 再起動してRosetta 2のプロセスが死んだことを確認

通常のブートオプションで再起動・ログインし、アクティビティモニタで`CarbonComponentScannerXPC`が消えたことを確認します。Kindでソートして、Appleのプロセスのみとなったことを確認します。スッキリ！

![Screen Shot 2022-02-15 at 17.38.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/194702/dda14817-7701-767f-6e63-a2c0e75d9255.png)


## さいごに

Apple M1 Chipを搭載したMacbookを最近職場で導入し、せっかくなのでと絶対にRosetta 2を入れない縛りプレイをしていました。[DropboxもとうとうApple Siliconに対応した](https://help.dropbox.com/ja-jp/installs-integrations/apple-silicon-support)ということで、私の使用方法的には、特にもう困ることはないなと思っていました[^1]。が、気づかぬうちにRosetta 2を入れてしまうソフトウェアがあって、今回の記事を書くに至りました。

[^1]: Intel特有のソフトウェアは意外とリモートログイン先のLinuxでどうとでもなっているという特殊環境でもあります。