OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerコンテナを止めずにapache2を再起動する方法【php7-apache】

## 結論

下記コマンドでreloadさせれば、変更を有効化できます。

```
$ /etc/init.d/Apache2 reload
```


## 環境

```
Docker for Windows 19.03.8
DockerImage php:7.4-apache
```

## 背景
Dockerでローカル環境構築中に困りました。
普段CentOSで開発していると、設定ファイル変更後に有効化させる際、下記のコマンドをたたきたくなるところですが、
この場合コンテナごと停止してしまいます。

```
systemctl apache2[httpd] restart
```

コンテナを止めずに設定変更の有効化をするには下記のコマンドをたたきましょう。

```
$ /etc/init.d/Apache2 reload
```
[rails]部分テンプレートの作成方法

#部分テンプレートとは
「部分テンプレート」は、複数のページで共通して利用できるViewファイルのことです。
複数のファイルで重複しているコードを一つのファイルにまとまることで、修正時に一箇所だけの修正で済んだり、コードの記述が少なくなり可読性が高くなります。

手順はざっくりこんな感じです。
1.共通化できる部分を探し出す
2.部分テンプレートファイルを作成
3.部分テンプレートファイルに共通化部分を記述
4.部分テンプレートファイルを呼び出す

##1.共通化できる部分を探し出す
そのままですが、重複している箇所を探す作業です。

##2.部分テンプレートファイルを作成
ファイル名の先頭にアンダースコア（ _ ）付きのerbファイルが、部分テンプレートファイルとして認識されます。今回は投稿機能を部分テンプレート化で見ていきます。
app/views/books/_newform.html.erb

##3.部分テンプレートファイルに共通化部分を記述
共通部分を切り出し、ファイルに貼り付けます。
基本的に部分テンプレートファイルではローカル変数(@がないやつ)を使います。
部分テンプレートファイル内でインスタンス変数(@がついてるやつ)を利用すると、controller側でインスタンス変数の名前や挙動を変更したとき、部分テンプレート側も変更しなければいけなくなるからです。

```app/views/books/_newform.html.erb
<%= form_for(book) do |f| %>
	<div class="field row">
		<%= f.label :title %><br>
		<%= f.text_field :title, class: "col-xs-3 book_title" %>
	</div>
	<p></p>

	<div class="field row">
		<%= f.label :body %><br>
		<%= f.text_area :body, class: "col-xs-3 book_body" %>
	</div>

	<div class="actions row">
		<%= f.submit class: "btn btn-primary col-xs-3" %>
	</div>
<% end %>
</div>
```

##4.部分テンプレートファイルを呼び出す
呼び出す時の書き方は以下の通りです。
なお、呼び出すときは部分テンプレートのアンダースコアは省略します。

```
<%= render [部分テンプレートファイルの指定], [ローカル変数]:[渡す値] %>
```

```app/views/books/index.html.erb
<%= render 'books/newform', book: @book %>
```
wsl2でDocker for WindowsなしでDockerを利用できるようにする

# メモ
- Docker for Windows経由でDockerを使おうとするとどうしてもsudoが必要な感じだった

# 構成
- Windows10
- wsl2(Ubuntu20.04)

# 参考
https://docs.docker.com/engine/install/ubuntu/

# Dockerインストール

## プリインストールされているdockerパッケージを削除
```
sudo apt-get remove docker docker-engine docker.io containerd runc
```

## 最新化

```
sudo apt-get update
```

## 依存パッケージインストール

```
sudo apt-get -y install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
```

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```


## リポジトリ追加

```
sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```

## 最新化

```
sudo apt-get update
```

## Dockerインストール

```
sudo apt-get -y install docker-ce docker-ce-cli containerd.io
```

## キャッシュからインストールできるバージョン確認

```
apt-cache madison docker-ce
```

## インストール

```
sudo apt-get install docker-ce=5:19.03.12~3-0~ubuntu-focal docker-ce-cli=5:19.03.12~3-0~ubuntu-focal containerd.io
```

## sudoなしで実行できるようにする

```
sudo groupadd docker
sudo usermod -a -G docker yuta
```

# Docker-Composeインストール

```
sudo curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
```
ゆめみでのZapierによる自動化を紹介

ゆめみの[Zapier](https://zapier.com/)担当です
ゆめみで2018年頃からZapierを使った自動化に勝手に取り組んでいます

## 1. 新しいemojiを通知

よくある奴です。
<img width="282" alt="スクリーンショット 2020-08-03 22.57.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/0c9b6aac-be46-a59e-3053-58bfb003fbd8.png">
ゆめみでは2900 個のカスタム絵文字がありました(2020/8/3時点)

### 構成

1. trigger: Slack add emoji
2. send: Slack

## 2. 新しい[stand.fm](https://stand.fm/)の投稿を通知

社内でstand.fmが流行り始めたので作ってみた
<img width="507" alt="スクリーンショット 2020-08-03 23.02.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/ac9d3530-40a6-d3a4-cbca-008053a9ca16.png">
株式会社ゆめみ で取締役をしている [Keethこと桑原さん](https://qiita.com/clown0082)の[Web 業界のなんでも雑談室](https://stand.fm/channels/5e70dd5881d4e84e1ff1cab4)など定期的に更新されています

### 構成

1. trigger: Slack public message
2. filter
3. send: Slack

## 3. ヘルプデスク ヘルパー

ゆめみではSlackに総務や経理などのヘルプデスクチャンネルがあり気軽に相談できます
<img width="756" alt="スクリーンショット 2020-08-03 22.45.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/ed7f49ed-074e-4816-c870-241ea7c9d665.png">
上記の様にトピックでユーザグループへメンションを促してはいますが、うっかり忘れられるのが世の常なのでリマインド兼担当者へ通知してくれます
<img width="320" alt="スクリーンショット 2020-08-03 22.49.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/85a2c36a-4c5d-328e-5ad2-b133f5269f3b.png">

### 構成

1. trigger: Slack public message
2. filter
3. Lookup Spread sheets
4. filter
5. send: Slack

Spread sheetsでチャンネルとユーザグループの管理をしています

## 4. プロリクtoコミッター
<img width="318" alt="スクリーンショット 2020-08-03 23.14.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/8d16225b-eb45-e6b1-83b7-b730eb27101b.png">
まずプロリクを説明する必要があるんですが、簡単にまとめるとこんな感じです

> ゆめみではいろんな意思決定をあらゆるメンバーができるようになっており、意思決定を「プロリク」と呼んでいます。
> via [メンバーの心理的安全性を保ち、成長できる環境を本気で目指す。ゆめみの組織改革](https://zine.qiita.com/job-offer/yumemi-organization/)

物品購入や給与決定、制度利用、変更などほとんどプロリクを通して行われています。
適切なコミッターにレビューやLGTMをもらうため、コミッターへの＠つけ忘れや通知をします

また、コミッターシートが設定されていない場合、ユーザグループの作成や設定を促します
<img width="734" alt="スクリーンショット 2020-08-03 23.38.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/422f3ef9-7c4d-b05c-6002-342043dbf272.png">

### 構成

1. trigger: Slack public message
2. filter
3. Lookup Spread sheets
4. filter
5. send: Slack
6. filter
7. send: Slack

Spread sheetsにはチャンネルとコミッターが設定してあります

## 5. 新規チャンネル通知 with コミッター
新規チャンネルが作成された時の通知とプロリクtoコミッターのためにシート設定を促します
<img width="729" alt="スクリーンショット 2020-08-03 23.32.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/228438/6cfe32cb-ce3d-182d-0920-76cda7649593.png">

### 構成

1. trigger: Slack new channel
2. send: Slack
3. Lookup Spread sheets
4. filter
5. send: Slack

Spread sheetsはプロリクtoコミッターと兼用です

## 6. 会社批判
> ゆめみでは新入社員や中途社員のオンボーディングの中に「会社批判ができるようになる」ことが目標として設定されています、
via [新入社員でも「会社批判」!　持続的な成長を実現する組織風土とは!?](https://cloudhr.jp/blog/onboarding/interview_yumemi/)

ちょっと何言ってるかよくわからないですね
まぁ、会社批判を含む投稿を集めてくれます

### 構成

1. trigger: Slack public message
2. filter
3. send: Slack

# Zapierはいいぞ

Spread Sheetsなどと組み合わせることで簡単に自動応答などリッチに作成できるのでオススメです。
バックアップの対象と取得方法について

バックアップを考えるとき、「何をどのタイミングでバックアップするか」という点を考慮する。

バックアップの対象は主に以下の３つがある。

###1. OS環境
###2. データ(ファイル)
###3. アプリケーション(OS管理外のデータ)

この対象によってバックアップの取得方法が異なる。

#OS環境のバックアップ

- 一般的に**「イメージバックアップ」**という手法をとる。

- イメージバックアップは必要／不必要を問わず全てのデータを丸ごと取得する仕様になっており、バックアップ／リストア対象のデータを細かく指定することはできない。

#データ(ファイル)のバックアップ

- バックアップ対象を細かく指定する**「ファイルバックアップ」**という手法をとる。

- 更新頻度の高いファイルや重要なファイルだけをバックアップする際に必要となる。

#アプリケーション(OS管理外のデータ)のバックアップ

- イメージバックアップとファイルバックアップを組み合わせて、復旧の要件に合わせてリストアを実行することが多い。
PHPとは（入門します）

PHP（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）を勉強しようと思います。

なぜ、この言語なのか。なぜやろうと思ったか。興味を持ったか。
まずそれを自分の中でアウトプットする意味で、この記事に書いて、勉強を進めて行こうと思います。

スクールでHTMLとCSS（Haml、SCSS）、JavaScript,Ruby,Railsなどを学びました。それらを利用して、簡単なアプリ開発を行いました。結果、僕が一番興味を持ったのは、フロントエンド側の実装工程です。

PHPでは、HTMLやJavaScriptなどでは叶えることない動きを叶えることができます。

まずは、環境構築をしてから、progateなどを用いていく予定です。
【ROS】Ubuntu(18.04)にROS(melodic)をインストール

#1. ROSのインストールコマンド
　Ubuntu(18.04)にROS(melodic)を入れるためのコマンド. 本当はkineticを入れたかったけどUbuntuのバージョンが18.04だとkineticは入れられないらしい.

```
sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list'
sudo apt-key adv --keyserver 'hkp://keyserver.ubuntu.com:80' --recv-key C1CF6E31E6BADE8868B172B4F42ED6FBAB17C654

sudo apt-get -y update
sudo apt-get -y upgrade

sudo apt-get -y install ros-melodic-desktop-full
apt-cache search ros-melodic

sudo apt-get install python-rosdep
sudo rosdep init
rosdep update

echo "source /opt/ros/kinetic/setup.bash" >> ~/.bashrc
source ~/.bashrc
source /opt/ros/kinetic/setup.bash

sudo apt-get -y install python-rosinstall
```
#2. ROSが入ったことの確認
　ワークスペースを作ってroscoreを実行することでROSのバージョンを確認できる. これが実行できたらROSのインストール成功.

```
mkdir -p ~/catkin_ws/src
cd ~/catkin_ws/src
catkin_init_workspace
cd ~/catkin_ws
catkin_make
roscore
```
else if(){}を大量に書きたくない時の小ネタ

C++だとswitchは整数型の引数しかとれないので、例えば以下のような場合に記述量が増えがちですよね。

```C++
string checkee = getSomeString();
if(checkee == "hoge") {
	// なんか数行かかる処理A
}
else if(checkee == "fuga") {
	// なんか数行かかる処理B
}
else if(checkee == "piyo") {
	// なんか数行かかる処理C
}
```

そういうときにこう書くとすっきりしますよという小ネタです。

```C++:前準備

class Checker {
public:
	Checker(string tester):tester_(tester){}
	bool checkAndRun(string checkee) {
		if(tester_ == checkee) {
			run();
			return true;
		}
		return false;
	}
protected:
	virtual void run() {
		printf("[warning] unhandled symbol: %s", tester_);
	}
	string tester_;
};
class ProcessA : public Checker {
private:
	void run() {
		// 処理A
	}
};
class ProcessB : public Checker {
private:
	void run() {
		// 処理B
	}
};
class ProcessC : public Checker {
private:
	void run() {
		// 処理C
	}
};
```

```C++:実行部分
string checkee = getSomeString();

if(ProcessA("hoge").checkAndRun(checkee)) {}
else if(ProcessB("fuga").checkAndRun(checkee)) {}
else if(ProcessC("piyo").checkAndRun(checkee)) {}

// ソースコード上の見た目を揃えたければ
if(false) {}
else if(ProcessA("hoge").checkAndRun(checkee)) {}
else if(ProcessB("fuga").checkAndRun(checkee)) {}
else if(ProcessC("piyo").checkAndRun(checkee)) {}

//  または
ProcessA("hoge").checkAndRun(checkee) ||
ProcessB("fuga").checkAndRun(checkee) ||
ProcessC("piyo").checkAndRun(checkee);

// 同様にこれもあり
false
|| ProcessA("hoge").checkAndRun(checkee)
|| ProcessB("fuga").checkAndRun(checkee)
|| ProcessC("piyo").checkAndRun(checkee);
```

以上、小ネタでした。

参考までに、この小ネタを使ったソースコードへのリンクを貼っておきます。
[ofxPoDoFo](https://github.com/nariakiiwatani/ofxPoDoFo)
今回の小ネタに該当するところは[このへん](https://github.com/nariakiiwatani/ofxPoDoFo/blob/master/src/ofxPoDoFoParse.cpp#L342-L401)ですね。

商用含めフリーで使えるオープンソースのPDF読み書きライブラリである[PoDoFo](http://podofo.sourceforge.net/)をラップするopenFrameworks addonです。
PDF内のパスデータを読んでofPathとして取り出すことができます。
（実務上の必要から作ったもので、そのときテキストのパースやPDFの書き出しと生成は必要なかったのでいまのところサポートしていません。）

応用例として読んでもらえると良さそうなところとして、
`run`の中で使うために`Parser::Context`という構造体を作って`extract`(今回の例で言う`checkAndRun`)に渡しています。
分岐するいろんな処理に共通の何かが必要な場合はこうすると良さそうです。

それと、[このへん](https://github.com/nariakiiwatani/ofxPoDoFo/blob/master/src/ofxPoDoFoParse.cpp#L247-L285)にある`Ignore` `ShouldHandle` `Any` とかみたいな、何もしないんだけど意味合いが異なるものを区別しておくのも、本記事のトピックからは外れますが意図が見えるソースコードになって良いのではないかな、と思います。
【javascript】テトリスの作成に向けて

javascriptでのテトリス作成において必要になった知識をまとめていきます。
#ランダムな整数値の生成
これでmin以上max以下の整数を得られる

```javascript
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}
```
>出典：[Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)

#多重ループを抜け出す
ラベルをつけることでループを抜け出せる

```javascript
var grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

function validate(value) {
  return value !== 5;
}

grid_loop:
for (var row = 0; row < grid.length; row++) {
  for (var col = 0; col < grid[row].length; col++) {
    var value = grid[row][col];
    console.log(value);
    if (!validate(value)) {
      break grid_loop;
    }
  }
}
```
>出典：[JavaScriptで2重ループをbreakする](http://www.dcom-web.co.jp/lab/javascript/break_nested_loop)

#配列の中で最大値を見つける
```javascript
var arr = [1,2,3];
var max = arr.reduce(function(a, b) {
    return Math.max(a, b);
});
````
>出典：[Math.max()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)

##スプレッド構文
```javascript
var arr = [1, 2, 3];
var max = Math.max(...arr);
```
>出典：[Math.max()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max)

スプレッド構文により、イテラブルである配列を展開している

#配列内を検索する
##Array.prototype.includes()
配列内を検索して真偽値を返す
Let's Encryptの自動更新で失敗したときの対応方法


## Let's Encryptの自動更新で失敗したときの対応方法

更新期限ぎりぎりで更新したからなのか、パッケージを色々とアップデートしてしまったからなのか
Let's EncryptでSSL証明書の更新を行おうとしたらエラーがでたのでその対応方法のメモです。


#### エラー内容
certbot renew で更新かけた際に下記のエラーが出ました。

```エラー内容
# certbot renew
Saving debug log to /var/log/letsencrypt/letsencrypt.log

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Processing /etc/letsencrypt/renewal/【ドメイン名】.cnf
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Cert is due for renewal, auto-renewing...
Could not choose appropriate plugin: The manual plugin is not working; there may be problems with your existing configuration.
The error was: PluginError('An authentication script must be provided with --manual-auth-hook when using the manual plugin non-interactively.',)
Attempting to renew cert (【ドメイン名】) from /etc/letsencrypt/renewal/【ドメイン名】.cnf produced an unexpected error: The manual plugin is not working; there may be problems with your existing configuration.
The error was: PluginError('An authentication script must be provided with --manual-auth-hook when using the manual plugin non-interactively.',). Skipping.
All renewal attempts failed. The following certs could not be renewed:
  /etc/letsencrypt/live/【ドメイン名】/fullchain.pem (failure)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

All renewal attempts failed. The following certs could not be renewed:
  /etc/letsencrypt/live/【ドメイン名】/fullchain.pem (failure)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1 renew failure(s), 0 parse failure(s)
```

#### 対応方法
仕方ないので、ググった結果、証明書の初回作成時と同様に certbot certonly を実行するしかないみたいでした。

```
certbot certonly --manual -d 【ドメイン名】
```

ググると 証明書の更新は cron で仕掛けて自動化とかの記事を読み見ますが
個人的に cron って運用に向いてないので、ansible のプレイリスト作って、
AWXとかで自動化したいなと思ってます。
『Demo of FOUNDATIONS OF FUNCTIONAL PROGRAMMING IN SCALA』学んだことまとめ

#概要
[『Demo of FOUNDATIONS OF FUNCTIONAL PROGRAMMING IN SCALA』](https://www.fp-tower.com/courses/foundations-demo)で学習した内容を備忘録としてまとめる。

#Val関数とDef関数
###Val関数とDef関数の違い
- Val関数はデータ構造を持つオブジェクト（型はFunction0~Function22）
- Def関数はメソッド
- Def関数は引数に名前をつけることができ、Val関数はできない（型のみ指定できる）

```Scala:Val関数
// 引数から得られる情報量が少ない（「Int型の値を3つ引数に取り、Date型の値を作成する」ことしかわからない）
val createDate: (Int, Int, Int) => Date = {
    // do something
}
```
```Scala:Def関数
// 引数から得られる情報量が多い（「年、月、日を受け取って、その日付をDate型の値として作成する」ことまでわかる）
def createDate(year: Int, month: Int, dayOfMonth: Int): Date = {
    // do something
}

// 引数の名前を明示すれば、呼び出し時の引数の順番を変えることができる
val christmas = createDate(dayOfMonth = 25, month = 12, year = 2020)
```
関数を定義する際は、基本的にはDef関数を使用する

###Def関数からVal関数への変換
- 方法1
末尾にアンダースコアを付ける

- 方法2
引数の型と数、戻り値の型が同じ場合、コンパイラが自動で変換する

```Scala:方法1
def createDate(year: Int, month: Int, dayOfMonth: Int): Date = {
    // do something
}

val valFunc: (Int, Int, Int) => Date = createDate _
```
```Scala:方法2
def createDate(year: Int, month: Int, dayOfMonth: Int): Date = {
    // do something
}

// 引数の型と数、戻り値の型が変数valFuncの型と一致している
val valFunc: (Int, Int, Int) => Date = createDate
```

#高階関数

###高階関数とは
関数を引数に取る関数

#プロパティベーステスト
VNRecognizedObjectObservationのboundingboxの座標をCGRectに合わせる。

#BoundingBoxがうまく表示されないときは座標をチェック

Visionの物体検出の結果（VNRecognizedObjectObservation）は、0~1の数字に正規化されています。
これを画像上の座標に直すにはVNImageRectForNormalizedRectメソッドを使います。

```swift
rectInImage = VNImageRectForNormalizedRect(observation.boundingBox, Int(image.size.width), Int(image.size.height))
```

また、boundingboxのy座標は、CGRectのyと上下逆（一番下が0）なので、BoundingBoxをViewで表示するときは、上下を逆にする必要があります。

```swift
yInImage = image.size.height - rectInImage.minY - rectInImage.height
```
AOJ 1127 - Building a Space Station　解答例

#AOJ 1127 - Building a Space Station
Atcoderのなかに答えなかったので、自分用のメモ。
宇宙ステーションの半径と距離の比較にやや工夫がいるだけで、あとはprim heap。


```python:sample.py
import math
import heapq
while True:
    n = int(input())
    if n==0: break
    if n==1: print(0);exit()
    edges = [[] for _ in range(n)]
    coordinates = []
    for _ in range(n):
        x,y,z,r = map(float,input().split())
        coordinates.append((x,y,z,r))
    for i in range(n):
        for j in range(i+1,n):
            dist = math.sqrt((coordinates[i][0]-coordinates[j][0])**2 + (coordinates[i][1]-coordinates[j][1])**2+(coordinates[i][2]-coordinates[j][2])**2)
            if coordinates[i][3] + coordinates[j][3]>=dist:
                dist = 0
            else:
                dist -=coordinates[i][3] + coordinates[j][3]
            edges[i].append((dist,j))
            edges[j].append((dist,i))
    seen = [False]*n
    hq = []
    res = 0
    for e in edges[0]:
        heapq.heappush(hq,e)
    seen[0] = True
    while len(hq):
        minedge = heapq.heappop(hq)
        if seen[minedge[1]]:
            continue
        seen[minedge[1]] = True
        v = minedge[1]
        for e in edges[v]:
            heapq.heappush(hq,e)
        res += minedge[0]
    print(f"{res:.3f}")
```
一瞬で正確にファイル検索を行う方法

Windowsのエクスプローラー右上の検索機能って使えないなぁと思う人への解決策です。

<h2>ソフト概要</h2>
「Everything」という検索ソフトですが、速度・精度ともにエクスプローラーとは段違いの性能です。基本動作として自分のHDD内にある全てのファイルの中から指定された言葉のファイルを高速で検索してくれます。

<h2>特徴</h2>
エクスプローラーでの検索がどの程度の時間がかかるかはその環境やPCによりますが、Everythingでの検索を行う場合はほぼ1秒のラグもなく検索が終了します。
これに加えてエクスプローラーはいまいち法則性のわからない形で検索が失敗(検索後は間違っていなくとも検索ができない)したりするので、その点においても優秀です。

<h2>追加メリット</h2>
その上、更に便利ポイントとしてこのソフトはネットワーク上の共有フォルダであっても自分のHDDと全く変わらぬ動作で検索をすることが可能です。
指定方法は下記の通り「ツール」→「オプション」のメニューからと同様に検索したいフォルダを指定するだけ。
![参考画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675167/6bc40ef1-b69c-2339-8fc3-8241b58afc9b.png)

<h2>インストールについて</h2>
ダウンロードは下記から可能です。
https://forest.watch.impress.co.jp/library/software/everything/
I2 localization における Font Asset の切り替え設定

#概要
Unityで多言語対応するのに便利なアセット [I2 Localization](https://assetstore.unity.com/packages/tools/localization/i2-localization-14884?locale=ja-JP)におけるFont Assetの切り替え方法のメモです。

#参考にしたページ
いろいろとwebを探りましたが、結局のところ以下のマニュアルが情報がまとまっていてわかりやすかったです。
http://inter-illusion.com/assets/I2LocalizationManual/I2LocalizationManual.html


#TextMeshPro Font Assetの切り替え設定
事前作成したTextMeshProのFont Assetを活用するには、言語によりFont Assetを切り替える必要があります。この方法がわかりにくくはまりました。
Font Assetの切り替え設定は、Termsタブで行います。

- Keyにわかりやすい名称をつける（ここではfont）
- TypeにText Mesh P Fontを設定
- 各言語にFont Assetを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300678/16ede34e-3e57-9d3e-1f1d-8edc871df05f.png)


マニュアルにも以下のように方法が載っています。
http://inter-illusion.com/assets/I2LocalizationManual/HowtoChangeFontperLanguage.html
マニュアルの方法はTypeにFontを指定する方法（これはおそらくビルド時に自動でFont Assetを作成する方式だと思います）をとっています。

#コンポーネントでの設定
コンポーネントにI2 Localizeをつけて設定します。
LocalizeのウィンドウにはMainとSecondaryがタブで存在します。
Mainには用語の設定をSecondaryにはFont Assetの設定を行います。

以下がMainタブです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300678/4428c967-0669-11bd-43d6-7f96f3b65ee5.png)

以下がSecondaryタブです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300678/3544d65c-881b-b082-d183-6c543eb838e1.png)

Font Assetの切り替えはSecondaryに設定する、ということになります。これはマニュアルを見ないと気付きにくいですね。。
Blazor WebAssembly で input タグの値をリアルタイムに双方向バインディングしたい

## Blazor WebAssembly

Blazor WebAssemblyはWebAssemblyによって.NET環境がブラウザに用意されC#で書いたコードがそのまま動いちゃうすごいやつです。そしてきちんとSPAフレームワークになっているのですがDOMとモデルの双方向バインディングで少しハマったので記録として残しておきます。

[ASP.NET Core Blazor の概要](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195024/47bdf773-c118-53ee-dc7b-13a052398ff8.png)


> Blazor WebAssemblyは、.NETとC#などを用いてWebブラウザ上で実行可能なWebアプリケーションを開発できるフレームワークおよび実行系です。
> Blazor WebAssembly 3.2.0はBlazor WebAssemblyとしてフル機能が実装され、本番運用に対応したバージョンです。これによりBlazor WebAssemblyは正式版としてリリースされたことになります。

[publickeyより引用](https://www.publickey1.jp/blog/20/blazor_webassemblycnetwebmicrosoft_build_2020.html)

## 要件

下記のような`input`タグの値を変えたら、リアルタイムで`h2`タグのインナーテキストも変更させることが要件です。

```html
<h2>@name</h2>
<input type="text" />
```

## NG実装

双方向バンディングの`@bind`を使ってみます。

```csharp:NG.razor
<h2>@name</h2>
<input type="text" @bind="name" />

@code {
    string name = "";
}
```

上記では双方向にバインドできていますが、**フォーカスが離れたり、エンターを押したりしないと反映されません**。


## OK実装①


`@bind-value`で双方向バインディングしつつ、`@bind-value:event`でインプットイベント拾います。

```csharp:OK1.razor
<h2>@name</h2>
<input type="text" @bind-value="name" @bind-value:event="oninput" />

@code {
    string name = "";
}
```

フォーカスアウトやエンター入力で発生する`@bind`異なり、テキストボックスの値が変更されたときにイベントが発生します。
単純な実装でコード量が少ないです。

## OK実装②

`@oninput`で入力時に実行されるメソッドをバンディングします。
バインドしたメソッド内で`name`の値を書き換えて画面に反映します。
値の変更だけでなく、何かしら処理をしたい場合に使います。

```csharp:OK2.razor
<h2>@name</h2>
<input type="text" value="@name" @oninput="HandleInput" />

@code {
    string name = "";

    void HandleInput(ChangeEventArgs  e)
    {
        // メソッド内でなにか処理をできる
        name = e.Value.ToString();
    }
}
```

## おまけ

`@bind`は下記のように`@onchange`を使ったコードに内部的に変換されるらしく、
１つの要素に対して`@bind`と`@onchange`を同時に使用することはできないようです。

```csharp:実際のコード
<input @bind="CurrentValue" />
```

```csharp:内部的なコード
<input type="text" value="@CurrentValue"
    @onchange="@((ChangeEventArgs __e) => CurrentValue = __e.Value.ToString())" />
```
Redmine 4.1をUbuntu 20.04にインストール

##必要なパッケージのインストール
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####rbenv&ruby2.6インストール

``` shell
sudo git clone https://github.com/rbenv/rbenv.git /usr/local/rbenv
sudo git clone https://github.com/rbenv/ruby-build.git /usr/local/rbenv/plugins/ruby-build
sudo RBENV_ROOT=/usr/local/rbenv /usr/local/rbenv/bin/rbenv init -
sudo RBENV_ROOT=/usr/local/rbenv /usr/local/rbenv/bin/rbenv install 2.6.x
sudo RBENV_ROOT=/usr/local/rbenv /usr/local/rbenv/bin/rbenv global 2.6.x
```

####/etc/profileに追加

```
export RBENV_ROOT=/usr/local/rbenv
export PATH="$RBENV_ROOT/bin:$RBENV_ROOT/shims:$PATH"
eval "$(rbenv init -)"
```

####visudoでパスの設定

``` ini
Defaults	secure_path="/usr/local/rbenv/bin:/usr/local/rbenv/shims:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin"
Defaults	env_keep += "RBENV_ROOT"
```
####Bundlerインストール

``` shell
gem install bundler  
```


#### PostgreSQLの設定
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####database.yml編集
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####gemパッケージのインストール
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####Redmineの初期設定
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####Passengerのインストール
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

#### Apacheの設定
http://blog.redmine.jp/articles/4_1/install/ubuntu/
の通りに実施

####stringio
ApacheのErrorログでstringioが古いといわれたのでupdate

```shell
sudo gem update stringio
```
Tableau勉強会に参加してきた話

# はじめに
今回、[岩橋　智宏](http://lovedata.main.jp/)さん主催の
「Tableau Publicで始めるデータ分析基礎講座 Step#3 ユニオンとジョイン」に参加させていただきましたので備忘録的まとめです。

# 参加の経緯
私は現在、自社ECサイト・業務システムの運用をメインに行なっているしがないエンジニアです。
今後データアナリストを目指すにあたって、エンジニアリング部分（Python、統計学、数学）は今までの経験を活かし独学で学んでいこうと思っていますが、、、
どうしてもマーケティング部分の実務ベース経験、知識が足らない…！
というわけでまずは良く使われるツール周りからでも触ってみようと思い今回の参加になりました。

# BIツール初心者から見たTableauとは？
> Tableau は、接続からコラボレーションまでをスムーズに行える、最も強力でセキュアかつ柔軟なエンドツーエンドのデータ分析プラットフォームです。
データのパワーの活用を可能にして、ビジネスをサポートします。
個人で利用できるように設計され、エンタープライズ規模に拡張することもできる Tableau は、アクションを生み出すインサイトをデータから引き出せる唯一の BI プラットフォームです。

※[Tableau HP](https://www.tableau.com/ja-jp/products/what-is-tableau)から抜粋
要は**GUI上で簡単にデータ分析が行なえ、グラフィカルかつ直感的に操作が可能なツール！！**とBIツール初心者なりの理解とします。

# 今回の使用ツール
**Tableau Public**
TableauのメインツールであるTableau Desktopというのがあるのですが、今回使用するTableau Publicはその機能限定版となっています。
実際今回の勉強会でも説明があったのですが、
・ワークブックの保存はオンライン上のみ
・パッケージド ワークブック (.twbx)ファイルが開けない
等
もちろん他にも機能制限があると思いますが、そこは触ってみないとなんとも言えないですね。

# 勉強会概要
1. ユニオンとは？
2. 結合とは？
3. ピボットとは？
4. データブレンドとは？

# 勉強会内容
基本的に勉強会はZoomで先生がTableau publicを動かしながら事前に用意したテキストベースで進めていきます。
なので、私は今回初めてTableauを触ったのですが、特に置いていかれたり分からないまま進むというのがほぼ無かったです。
実際の内容としては、**データの使い方**という点に重きをおく回だったと思いました。
全くの初心者でしたが、最終的には↓のような比較グラフを作れるようになりました。（ほぼ頭の良いTableauのｵｶｹﾞ）
![スクリーンショット 2020-08-03 23.00.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665888/25954610-58cf-c73e-3a7e-5ffb5211e464.png)

# まとめ
今回始めてBIツールを使用してみての感想としては、「こりゃ〜すごい、SQL書けなくても簡単に分析、レポーティングができてしまうのでは・・」と思いました。
データアナリストの実業務としてはこういったBIツールを使いこなせるのはほぼマストだと思うので遊びがてら今後も触って行こうと思います。
勉強会の内容自体はSQLのJOIN、UNIONあたりをGUI上で操作してみる形だったのでSQLバリバリの経験者としてはツールを覚える手始めとしてはうってつけの回でした。


以上
自作コンピュータの作り方  第１話

# 第１話　はじまりのはじまり。
# はじめに

皆さん、自作コンピュータと聞いて、思い浮かべるのは・・・

秋葉原でCPU、メモリ、グラボやマザボを買って、説明書通りにカチャカチャ接続する・・・

いえいえ、それは悪い事ではないです。ですが、本当に**”自作”**と言えるのでしょうか。

この話をすると・・・**CPUを自作しないのか！OSを自作しないのか！**となるでしょう。

その話は、先人たちに・・・お任せで！
　●CPUの作り方　
　　https://www.amazon.co.jp/dp/4839909865/ref=cm_sw_r_tw_dp_x_7TakFb873ZFS9
　●OSの作り方
　　https://www.amazon.co.jp/dp/B00IR1HYI0/ref=cm_sw_r_tw_dp_x_XSakFbW0QBSRQ

自分は、**マザーボードの自作がしたい**ので、その話をしていきます。

#マザーボードと言っても組込みマザーボード

以前、Intel Edisonというボードにハマり、Intelマザボが作れる！と思ってたんですが、不運にもディスコンになり、
ちぇ～と思ってましたが、時代はSiP(System in Package)に！！　
自分にも作れるかも！！マザボ作るぞぉ～！好きなインターフェースで構築するぞぉ～設計が楽しいんだよこういうのはさぁ！！

#SiP(System in Package)とは

普段見かける半導体は、黒いブロックにピンが沢山生えた物だと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/ff2997ce-c2fb-cd33-9af8-ba232c6c7dff.png)
http://akizukidenshi.com/catalog/g/gI-04386/

対して、**SiP**は、半導体の内部に、半導体が入ってる物を指します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/f8c080d1-26a8-7a36-c363-1791edca6701.png)
https://octavosystems.com/octavo_products/osd335x-sm/

黒い箱の中に、CPUを入れ、電源管理ICを入れ、RAMを入れ、ROMも入れ、さらにコンデンサも入れて・・・

凄い技術だ・・・

もともと、こういったSiPは、基板上で実現されていた機能を、１か所に集約したら便利じゃね？？といった感じで進みました。
もちろん、高集積が出来、基板サイズも小さくなります。
（とは言え、高さがあったりするので微妙ですが。今後に期待という事で）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/e7753732-6384-252d-81fb-89da3a81a30c.png)
https://www.tij.co.jp/tool/jp/PHYTC-3P-PHYCORE-AM335X

上の画像のように、AM335xのCPUに、電源IC、eMMC、DDR RAMといった構成が**標準的**になり、どのメーカーも似たような構成になりました。
その**標準的**となった構成を、SiP(System in Package)にしていくという訳です。

#SiP(System in Package)のある世界

ここで、**標準的**と言ったのは、**長年の経験と利用実績がある構成**　という話です。

コンピュータは、長い歴史より、**基本構成**といったものが出来てきました。
その話はまたどこかでまとめますが、いわゆるコンピュータアーキテクチャ（コンピュータ構成とも言うかも）です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12499/b8fa068e-decb-5abf-a519-e2aa28a0cdae.png)


http://cpu4edu.net/4001.html
その**基本構成**に加えて、CPU特有の癖や良くある構成について、CPUを使い機器を作る方々により蓄積された物があります。**SiP**には、そういった**今までのノウハウを詰め込んだ変わりにくい構成**という感じで研ぎ澄まされた物があります。

というのも・・・SiPは通常の半導体を作るのと訳が違い、何倍にも工数や価格がかかります。
その為、**ふつうは余ほどの事が無いとSiPになんかしない**といった感じです。

なので、**SiP**が登場したら、**おめでとう！君はVIPerだ。まだまだ働けるICのようだな！**と思ってあげましょう。

逆に言えば・・・**SiPは、新しいCPUを持つ事は滅多にない**　という事です。
もちろん、時代の流れによっては、最初っからSiPで登場するものも出てくるでしょう。
新しいCPUがSiPに乗って出て来た際に、こんな使い方があった！こういう使い方がしたかった！という場面で使えない場合があります。
その為、**すでに使い古されてて、長く同じ構成が続き、これ以上進化しないが、使う場面がまだある**という場所にSiPパッケージが出来るように思えます。その方が正解です。


#各社のSiPへの対応

**Octavosystems**：SiPを行うために出来た組織で、TIのAM335Xのコアを買いオリジナルのSiPを作成した先駆者。
https://octavosystems.com/octavo_products/osd335x-sm/

**Microcip**：Atmel時代にあったATSAM5Dや、AT9Xが新たにSiP化されました。ただしARM9コアなので随分古い。
https://www.microchip.com/design-centers/32-bit-mpus/sip-som/system-in-package

**ルネサス**：自動車向け出るが、数点SiPパッケージが登場しているようです。
https://www.renesas.com/us/ja/solutions/automotive/soc/r-car-m3.html


# 次回
次回、CPUの選択　です！
https://qiita.com/nonNoise/items/01427a281ceb7bdc0238
Nuxt.jsでurl('@/assets/xxx.png')がエラーになる時の解決策

# Nuxt.jsでurl('@/assets/xxx.png')がエラーになる時の解決策

nuxt 2.13.0で確認。

背景画像を設定したい時など、以下のように書くことがある。

```vue:index.vue（抜粋）
<style>
.test-class {
  background-image: url('@/assets/xxx.png');
}
</style>
```

しかし、これでは以下のようなエラーが出てしまう。

```
Module not found: Error: Can't resolve './@/assets/xxx.png' in ...
```

見ての通り、`./`が追加されて相対パスとみなされてしまっている。

正しくは以下のように書く。

```vue:index.vue（抜粋）
<style>
.test-class {
  background-image: url('~assets/xxx.png');
}
</style>
```

参考：[アセット - NuxtJS](https://ja.nuxtjs.org/guide/assets)
> Warning: Nuxt 2.0 からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし）か、@ のエイリアスを使わなければなりません。 例：background: url("~assets/banner.svg")

ただし、`@assets/xxx.png`も`@/assets/xxx.png`も`~/assets/xxx.png`も試した限りはNG。
PythonのSliceにモヤっとした話

#モヤッとした
Python初心者がざっくり以下のようなコードを書いてるときに想定したのと違った結果が返ってきてモヤっとした話です。
#コード
~~~python
p=0
q=1
l=['a','b','c','d','e','f','g']
print(l[p:q])

#['a']
~~~
ちなみに初心者の私が想定した出力結果のは以下の通りでした。

~~~python
#['a','b']
~~~
#何故結果が異なる？
以下の記事で解決いたしました。
[【Python】スライス操作についてまとめ](https://qiita.com/tanuk1647/items/276d2be36f5abb8ea52e)
仕様ということのようです。
#でも納得行かない
参考のリンクを拝見させて頂いたりした結果、開発の意図としては
[a:b]という記述は between a to b であるという事のようです、日本語で言うならa以上b未満。

しかし初見でこの記述をbetween a to b であるとを理解しろと言うのは中々ハードルが高い気がします。
[恵比寿:六本木]と記載されてる記述を見たら私は from 恵比寿 to 六本木だと解釈してしまうでしょう、まさか降りる駅が広尾だとは思いませんでした。
![0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666328/e0e44b2d-c077-c750-cab0-31aaf223644b.png)



そもそも slice の a to b がそれぞれ上記画像の from index to len の意味になるわけで、感覚的もプログラマ的にも解釈するのは辛いと感じてしまいました。
そんな感じで[なんかの変数のindex,len(なんかの変数)]と指定して単一要素を取り出す事に意味が見いだせず調べ物に時間を費やしてしまう結果に。

明確なメリットが有るんだよという回答をお持ちの方がいらっしゃったなら、是非ご教示いただければ幸いです。

#気になりすぎて
ラブライブのMV自動再生してる暇がなかった
macOSでカメラを使うアプリを作るとき、'com.apple.security.device.camera' entitlementエラーが出たら

macOSでカメラを使うアプリを作るとき、以下のようなエラーが出ることがある。

> 2020-08-03 22:26:56.800910+0900 Day9[16262:644033] Metal API Validation Enabled
> 2020-08-03 22:26:56.904507+0900 Day9[16262:644432] [access] This app has crashed because it has a hardened runtime and attempted to access privacy-sensitive data without an entitlement indicating its intent to access this data.  The app must have the 'com.apple.security.device.camera' entitlement.
> (lldb)

これは、カメラを使うアプリはセキュリティの制限があり、それをあらかじめ指示しなくてはならないからである。

- Xcodeから、Cmd-1→infor.plist→右クリックしてAdd Row→Keyのところをダブルクリックして「`NSCameraUsageDescription`」と入力。自動的に「Privacy - Camera Usage Desciption」に変わる。
- Valueをダブルクリックして任意のメッセージを入れる。「`カメラからの画像を表示します。`」
- Xcodeから、Cmd-1→MyApp→TARGETS→MyApp→Signing & Capabilities→All→Hardend Runtime→Cameraの左をcheck
- Cmd-Rすると、「“MyApp.app”からカメラにアクセスしようとしています。」と、さきほどのメッセージと共に聞いてくるので「OK」

# 参考
- https://developer.apple.com/documentation/security/hardened_runtime
- https://developer.apple.com/documentation/bundleresources/entitlements/com_apple_security_device_camera
addEventListenerを使用する際に注意するべきこと

jsの実装中にエラーが起きたのでまとめます。

##addEventListnerとは

addEventListenerとは、イベント発火の際に実行する関数を定義するためのメソッドです。

以下のようにして実行できます。

```javascript

要素.addEventListener('イベント名', 関数);
```

エラーが起きたときのコード

```javascript

function calc() {
  const value = document.getElementsByClassName("price-input");
  value.addEventListener('input', (e) => {
    console.log("")
  });
}

window.addEventListener("load", calc);
```

エラー内容

```javascript

Uncaught TypeError: value.addEventListener is not a function
    at calc (calculation.js:5)
```

なぜかvalueが定義されてないことになっています。

valueがちゃんと定義されているか確認します。

```javascript
function calc() {
  const value = document.getElementsByClassName("price-input");
  console.log("value")
  value.addEventListener('input', (e) => {
    console.log("")
  });
}

window.addEventListener("load", calc);

```

コンソールを確認します。

```
HTMLCollection [input#item_price.price-input, item_price: input#item_price.price-input, item[price]: input#item_price.price-input]
```

なぜかいっぱいある。。。

そうです**getElementsbyClassNameで取得できるのは
HTMLCollectionというオブジェクト**になります。

HTMLCollectionは複数ノードなので
単一ノードのみ指定できるaddEventListnerでは取得することができなかったのですね。

idで取得するように変更してみます。

```javascript

function calc() {
  const value = document.getElementById("item_price");
  
  value.addEventListener('input', (e) =>{
    console.log("")
  });
}

window.addEventListener("load", calc);

```

これでエラーが解決できました。
【初心者でもわかる】一部だけ角丸をつける方法（border-radius）

# どうも、7noteです。今回は一部に角丸をつけたいときの方法を全パターン紹介。

どうも7noteです。
この記事は以下へ引っ越しました。


https://naruweb.com/coding/bordrer-radius/
React Routerについて

React Routerについて初心者がまだ理解できていませんが、メモしています。

#### V3,V4で大分変わったらしい
- v3のreact-routerとv4のreact-router-domのコンポーネントの比較
v3とv4では破壊的変更があり、簡単には移行ができない
- v4では、v3とは異なり、Routerコンポーネントの小要素には、好きなコンポーネントを配置できるようにな
- v3で<Router history={browserHistory}>と書いていましたが、v4でbrowserHistoryが廃止となります。v4では、単純な実装な場合はRouterからBrowserRouterに書き換えるだけになる

その前に

### Routerとは？

[参考](https://qiita.com/zgmf_mbfp03/items/06b8fe0cd8804540999b)

### v4で大きく３つのRouterコンポーネンネントが提供された

- BrowserRouterはHistoryAPIを使用してUIをURLと同期させるRouterを作成、
  - BrowserRouterは、historyを生成してRouterコンポーネントをレンダリングするコンポーネント

- HashRouterは履歴をwindow.location.hashを使ってUIをURLと同期させるRouterを作成、
- MemoryRouterは履歴をメモリ管理するRouterを作成

###

```n4.js
<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>
```

- 注意点としてRouterは、一つしか小要素を持つことができないので、RouterコンポーネントにRouteを使うときはdivタグなどでRouteコンポーネントを加工必要がある



---------

[ルーティング設定方法](https://qiita.com/k-penguin-sato/items/e46725edba00013a8300)
kill process for memory leak

# top
rails batch

## get process info that maybe leaked memory
```bash
pinfo=`ps aux --sort -rss| grep [r]uby | head -1 | tr -s ' ' | cut -d ' ' -f2,6`
echo $pinfo
```

## compare and graceful kill
```bash
pid=`echo -n $pinfo | cut -d ' ' -f 1`
mem=`echo -n $pinfo | cut -d ' ' -f 2`

threshold=20000
if [ "$mem" -ge "$threshold" ];then 
    echo "Memory leaked!"; 
    kill -s USR1 $pid; 
fi
```
## purge-memory-leak-process.sh
```bash
#!/bin/bash

# 200MiB
threshold=209715200

pinfo=`ps aux --sort -rss| grep [r]uby | head -1 | tr -s ' ' | cut -d ' ' -f2,6`
if test -z "$pinfo";then 
    echo "not found";
    exit; 
fi

pid=`echo -n $pinfo | cut -d ' ' -f 1`
mem=`echo -n $pinfo | cut -d ' ' -f 2`

if [ "$mem" -ge "$threshold" ];then 
    echo "[$pid]: Memory leaked!"; 
    kill -s USR1 $pid; 
fi
```
Dictionaryで存在しないKeyのItemを参照するとKeyが追加される（のを知らなかった･･･）

#現象
・空の`Dictionary`の`Count`はもちろんゼロだし、`Keys`プロパティも空

```vb
    Dim dict As Dictionary
    Set dict = New Dictionary
    Debug.Print dict.Count         '0
    Debug.Print dict.Keys(0)       'インデックスが有効範囲にありません
```

・空の`Dictionary`で、追加していない`Key`の`Item`を参照すると、`Key`が追加される（追記：これはばっちり明記された仕様でした）

```vb
    Dim dict As Dictionary
    Set dict = New Dictionary
    Debug.Print dict.Item("test")
    Debug.Print dict.Count         '1
    Debug.Print dict.Keys(0)       'test
```

・空の`Collection`で同じことをするとエラーが返る

```vb
    Dim col As Collection
    Set col = New Collection
    Debug.Print col.Item("test")   'プロシージャの呼び出し、または引数が不正です
```


##補足
・なので、こういうことはできない（`.Add`の前に`.Remove`が必要 ⇒は理解不十分でした。コメント欄参照ください）

```vb
    If IsEmpty(dict.Item("foo")) Then
        dict.Add Key:="foo", Item:=bar
    End If
```
道案内ボランティア向けのアプリ開発プロジェクト

#1 はじめに
みなさんはじめまして。塚原卜伝と申します。

仕事ではC,C++,pythonを扱っています。

仕事の合間に外国人道案内ボランティア団体であるask me!での活動に参加しています。

ask me!　HP　:　https://askme.ne.jp/
Twitter    　: https://twitter.com/askmeJAPAN
Facebook   　: https://www.facebook.com/weareaskme
Instagram　　：https://www.instagram.com/we.are.askme/?hl=ja


2020年の3月にask me!での活動の効率化のためにAndroid&iOSアプリ(ask me! app)をリリースしました。

今回初めての個人開発で大変な所も多かったですが、楽しい所もありました。

今回は自分がどのように「ask me! app」を作っていったのかをまとめたいと思います。


#2 ask me!の活動紹介

ask me! appはask me!での活動がベースになって作られたものなので、まずは活動内容の説明をしたいと思います。

活動中は困っていそうな外国人に積極的に話しかけていき、彼らの困っている内容を聞き出します（例：おすすめの寿司のお店はどこ？など）。

外国人の方を目的地までご案内いたしますが、我々はプロではないので、あくまでも自分たちの知っている範囲でorGoogle やスマートフォンで調べて分かる範囲でお伝えしています。

#3 アプリを作成しようと思ったきっかけ

きっかけとしては２つあります。

一つ目は人数集計作業の簡素化のためです。

活動中に案内した方々の国籍や人数等は下記のシートに記入しています。

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681104/f4ab4a97-fd2d-f162-457b-77fdfc2fa0a3.png)

一番最後に活動で関わった人達の合計人数を大陸別に集計するのですが、この作業を簡素化することを目指しました。

２つ目は、活動中に撮影した写真を参加者の間で共有するツールが必要だったためです。

今までは参加者同士でLINEのアカウント交換をしてLINE上で写真の共有を行っていましたが、LINEに頼らなくても写真を共有できるツールが必要でした。

以上の２点からask me!のオリジナルのアプリを開発することにしました！

#4 UI

開発したアプリの主なUIを下記に示します。

![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681104/2c967cbf-ad6d-4d6d-2ab2-b9e96fe00d29.png)

①ログイン画面

②活動する前に参加者や今日の目標等を登録する画面

③統計シート入力画面

④案内した合計人数を確認できる画面

⑤サイドバーメニュ

⑥写真共有機能画面

#5 アプリの機能説明

①ログイン画面
ask me! appはask me!の活動参加者が使うことを想定していますので、一番最初にログイン画面を設けています。

②活動する前に参加者や本日の目標等を登録する画面
統計シートでは活動前に参加者の名前や本日の活動目標を記載していましたが、それをスマホアプリでも記入できるようにする画面です。

③統計シート入力画面
活動中に案内した外国人の国籍や人数を記入する画面です。

④案内した合計人数を確認できる画面
活動中に案内した人数一覧を確認できる画面です。

⑤サイドバーメニュ
ask me!のHPやSNSおよび写真共有機能画面へのリンクを貼っています。

⑥写真共有機能画面
活動中に撮影した写真はこの画面で参加者と共有します。

#6 技術選定

ask me! app作成にはFlutterを利用しました。理由は同じソースコードでiOSとAndroidの開発が同時にできるからです。

バックエンドにはFirebaseを利用しました。

#7 技術習得方法

私はFlutter初心者だったため、まずは本で勉強しました。Flutterに関する本は少ないのですが、下記の本で勉強しました。

Android/iOSクロス開発フレームワーク：https://books.rakuten.co.jp/rk/8f657c363ada3ef9bd62b9abafc2fa28/

全部読んでいると非常に時間がかかるので、最初の２章までを読みました。２章までを読むだけでも、基本的な内容はわかると思います。

なお、Flutterで分からないことを知らべる際は英語の記事が多いので、英単語を入力して調べるといいとおもいます。

実現したい機能を英語で入力するとサンプルコードが出てくるのでそれを見て勉強していました。
（例：写真共有機能なら「Flutter photo share」で検索してみる、など）


#8 まとめ

今回はask me! appの簡単な紹介をさせていただきました。

次回以降は各画面についてソースコード例と共にどのように実装したのかを記載したいと思います。

また、興味があれば読んでいただけると幸いです（次回は８月下旬に投稿予定です）。

アプリは下記から

Android: https://play.google.com/store/apps/details?id=com.askme.flutter_app4
iOS    : https://apps.apple.com/us/app/ask-me/id1481671421?l=ja&ls=1
AWS HoneyCodeに詳しい人に聞いてみた

いつも忘れないように、コンセプトから。

###コンセプト
・お金かけてまでやりたくないのでほぼ無料でAWSを勉強する
　→ちょっとしたサービスを起動すると結構高額になりやすい。
・高いレベルのセキュリティ確保を目指す
　→アカウントを不正に使われるととんでもない額を請求されるので防ぐ

どこの誰から聞いたとは書けないんですが、まとまって聞いたので参考までにメモってみました。
そんなに深い内容ではありませんのであしからず。。。

###HoneyCodeのコンセプト
４つの概念で構成されています。４つの概念を簡単に表現してもらいました。
・Tables：包含されたデータベースの活用
・App builder：GUIによるアプリ開発
・Automations：ワークフローの自動化、Cronの設定、通知
・Teams：ACLの設定

###環境
開発環境と動作環境は異なっているようです。
開発環境：Chrome
動作環境：Chrome、Edge、Firefox、Safari

###Honeycodeコミュニティでオススメは？
Honeycode  coursesで学ぶのが一番近道

###価格に関すること
Basic(無料)はworkbook（プロジェクト毎のTableの行数が2500まで）
ユーザーは20人まで。上限を緩和すると有料になる。
→2500行までだとやれることは限られるなぁと思います。。。

###現状の作成手順
・Honeycodeアカウントを登録
・テンプレートからワークブック作成
・テーブル変更と確認
・アプリのカスタマイズとテストチームメンバーの共有と追加

###ちょっとしたTips
・デフォルトではWebとモバイルの画面が同期された形で生成される。同期を切ることもできる
・ビジネスロジックはAppsの確認オブジェクトのData部分に記載するイメージ
・Automationsでメール送信できるメールアドレスは、現状では任意のメールではなく、Teamsに登録されているメンバー限定
・ワークブックをシェアすると、ワークブックの変更もシェアされる。シェアAppだと、アプリケーションの利用だけがシェアされる
・現状アカウントが別だが、AWSアカウントと統合されていくか？
　→現状では未定
・Honeycodeアカウントが無いとアプリは使えないのか？
　→β版ではできない
・AWSのサービスとどのように連携してできるか？
　→有料のアカウントを作成すれば、Lambda連携可能

とまぁこの程度の内容でした。コミュニティかどこかで実装してほしいこととかをリクエストしたいと思います。それにしても今年はAWSサミットがオンラインになってしまい残念ですね。。。
Reactでモーダルコンポーネント実装

# はじめに

今回、インターン先の開発でモーダルコンポーネントを触る機会があったのでモーダルコンポーネントの理解を深めるために一からモーダルコンポーネントを実装してみました。スタイリングはstyled-componentを使用しています。

# 完成形

![画面収録 2020-08-03 20.58.37.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670219/7c37f915-4505-630c-158f-7acdb697d1cf.gif)

この猫の写真の部分に中に吐き出したいコンポーネントを入れていきます。
モダールという文字列をクッリクするとモーダルが開くようにしてます。

# 手順

1.  必要なpropsを定義。今回は表示させたい内容を渡すchildren,モーダル開閉状態を渡すisOpen,モダールを開くトリガーを渡すonClickを定義します。

```react
type Props = {
  children: JSX.Element; //表示させたい内容
  isOpen: boolean; //モーダル開閉状態の真偽
  onClick: Function;//モダールを開くトリガーになる関数
};
```
2.次にstyled-componentsを使いモーダルの開閉状態のcssでスタイル

```react
const Div = styled.div`
  @keyframes fadeIn {
    from {
      opacity: 0; /*アニメーション開始時は不透明度0%*/
    }
    to {
      opacity: 1;　 /*アニメーション終了時は不透明度100%*/
    }
  }
  display: none;
  &.fadeIn {
    display: block;
    animation: fadeIn 0.25s;　/*アニメーションにかかる時間(1s＝1秒)/
  }
`;
```
ここでは、cssの「animation」プロパティを使いフェードインを実装しています。


3.上の二つを利用し実装

コードはこんな感じ

```react
export const Modal: React.FC<Props> = ({
  children,
  isOpen,
  onClick,
}: Props) => {
  return (
    <Div
      className={`${
        isOpen ? 'fadeIn' : ''
      } w-full h-full justify-center flex items-center fixed`}//真ならfaidInさせる
    >
      <div
        className="fixed bg-black opacity-50 w-full h-full top-0 left-0"
        onClick={() => onClick()} //モーダルの外側
      />
      <div className="bg-white w-10/12 mx-auto rounded-lg z-50 fixed top-50 left-50 -translate-x-1/2 -translate-y-1/2 transform">
        <div className="py-1 px-3">
          <div className="relative">
            <div className="absolute h-4 top-0 right-0">
             //この中にはモダールを開くトリガーになるボタンなどが入る
            </div>
          </div>
          <div className="mt-8 mb-6 mx-3 flex justify-center items-center">
            {children}//表示させたい内容
          </div>
        </div>
      </div>
    </Div>
  );
};
```

# まとめ
今回モーダルコンポーネントを実装することでモーダルがどのような仕組みで動いているのかを理解することができました。a11yやパフォーマンスなどはあまり考慮できていないので、その辺を意識した実装も今後記事に残したいと思います。
border-radiusでムニュムニュするだけのページ作成

#動機
border-radiusってせいぜい使っても50%で球体が書けるねって話で終わってしまっていて、もっといろいろ書きたくなった。

#実装
まあ、何も言わず見てくれい
https://emptyset.sakura.ne.jp/munu/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647892/c0ad6498-2613-a911-a7c0-1b8d39dcb5ea.png)
こんな感じのヤツがひたすらムニュムニュする。

#動作原理
タイマでランダムにborder-radiusを生成してCSSを修正し、transitionさせる。

#結論
transitionって面白いな。
何も使い道が思いつかないけど。
aws の練習

AWSでサーバーを立ち上げ、Apache をインストールするまで。もしくはmysqlの設定まで。udemy の aws 講座の内容です。



## VPC(Virtual Private Could)の作成
ログインしてVPC dashboardへ。
Create VPC
Name tag に名前。
IPv4 CIDR に10.0.0.0/16

Subntets から Create subnet
Name tag を入力
VPCを選択
Availability Zone を選択
IPv4 CIDR block に 10.0.10.0/24

#Routingの設定

##create internet gateway
Action からVPCにアタッチ。
vpc を選択
ルートテーブルの作成
name を入れて
vpc を選ぶ。
subnet 関連付け
ルートの編集
ルートの追加
0.0.0.0/0 をinternet gatewayにしてください。

# create ec2 instance

AMIの選択。ex. Amazon Linux 
Instance Type の選択 General purpose t2.micro(無料なので)
Step 3 Coufigure Instance Details
Network 作ったやつ
Subnet 作ったやつ
Auto assign Public IP Enable

Capacity Reservation None

next

Step4 Add Strage　8g　next
Step5 Add Tags
key Name value start-aws-web


Step6 Configure Security Group
check Create a new security group
name yamaki-sg
description yamaki-sg
next

Launch
Key pair file を作って保存

## Security Group設定
http通信の設定
インバウンド edit add rule
type http 
Source 0.0.0.0/0, ::/0

# ssh でインスタンスに接続

terminal 起動
インスタンスからIPv4 Public IP確認
ダウンロードしたキーペアをchmod 600 
ssh -i key-pair ec2-user@domain
AliexpressでSMDを買うときは注意しろ～安物買いで不良発生～

先日Aliexpressで購入したSTM32がこんな状態で届きました。
##クッションにテープ止め
リールを剥がして、クッションにテープで止めて送ってきたのです。
しかし、テープをしっかり止めすぎて、テープからチップを剥がすのに非常に苦労しました。
![IMG_1161.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cb7e9ef1-a978-1058-0739-0a5b6a3f76be.jpeg)
これを実装しました。
![DSC_0354 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8ada6630-3608-59f5-4949-ce7121b94184.jpeg)
何度やっても動きません。
これは再三やって修復出来た状態です。
何が起きていたか
##ピンが曲がっていた
左が正常、右が今回の状態です。
![STM32-connect-error.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6ef10e77-9823-1785-ceb0-050f1a1b7a5e.jpeg)
目視でも、顕微鏡でも見えないのです。

##本来の状態
・リール切断
本来は、このリールの状態で来るべきです。
![DSC_0351 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4b61d5f4-13da-76fe-46ca-0ccb5b78c04d.jpeg)
・クッション梱包
本品はMouserですが、導電スポンジに入れて紙梱包です。
![DSC_0352 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0e26fc4b-155b-6a86-7eb6-b48f613ed189.jpeg)
ここまでしてあればピンが曲がっている確率は少ないと思います。
出来れば、リール切断で送ってくれると完璧です。

今回、5個買ったうち、2個が不良になりました。
MouserやDigiKeyで買えば、値段は高いですが、不良が出る確率は限りなく少ないです。
不良で苦労するのを選ぶか、値段を選ぶかはあなた次第です。

なお、上のリール切断品は、Aliexpressの別業者で購入したものです。
たまたまハズレだったのか？
これがデフォルトかは不明ですが、注意しないといけないです。
【初心者】GitLabとGitHub

#➊ざっくり導入の説明
### アカウント作成
0. GitLabページからサインイン。新しくアカウントを作るもよし、SNSやGitHubのアカウントを使ってログインも可能です。
0. アカウントの設定。右上のアイコン⇒Settingsでアカウントの設定が出来ます。 真ん中の画面はTOPのようなもので、各設定項目は左側に一覧が出てきます。

###リポジトリ作成
GitHub使ってる人が言うには、リポジトリ作成は非常に楽だそうです。
実際私もGitHubを使ってますが、GitLabのほうが楽で好きです。


0. 番号リストリポジトリを作成。左上の狐のアイコンでTOPに飛ぶと、New Projectのボタンがあります。そこからproject(リポジトリ)を作成。
0. コードをコミットすればOK。特に元々GitHubのリポジトリがある人は以下でOKなので楽ちん


```
#リポジトリのclone
git clone GitLabのリポジトリ
cd GitLabのリポジトリ

#GitHubのURLリンクしてpull
git remote add github GitHubのURL
git pull github

#GitHubコードのブランチを作成
git branch github github/master 

#GitHubマージ
git merge  github

#push
git push -u origin master
```
空でのマージが出来ない場合は、一旦空コミットをしてrebaseしてからマージしてください。

```
#空コミット作成
git commit --allow-empty  -m"1st commit"

#rebase
git checkout master
git rebase master github

#GitHubマージ
git checkout master
git merge  githu
```
これでリポジトリの移行も完了です。
さらにGithubからの以降なら、以下でサクッとインポートできます。

> 「New Project」→「Import Project」→「GitHub」で、リポジトリ以外にも「Issue」と「Pull Request」と「Wiki」も一緒にインポートできて便利。

#❷GitLabの利点って？欠点は？
### 1．Githubにある機能はあるので問題なし
GitLabならDockerとの連携など追加機能が便利で機能面は優れているかと
### 2．各種SNSアカウントでのログイン可能（GitHubも可）
### 3．リポジトリ
GitLabはグループ・**プライベートリポジトリ**が作れるし、リポジトリの見せ方もすっきりしているので「これいいな」ってなります。グループの作成でリポジトリをまとめて管理できたり、無料版でも最初からプライベートリポジトリは作成できたりするのは、ありがたや。

ちなみに、リポジトリ作成の際に公開範囲としてプライベート、内部(GitLabユーザーへ公開)、パブリックの3種類が指定できます。

ただ最近はGitHubでも制限付きですが、プライベートリポジトリは作成できるようです。wikiが使えないのは人によっては悲しいかもしれませんね。
### 4．リポジトリの考え方の違い
GitHub, GitLabどちらもプロジェクトを作成して、その中でissueによるタスク管理が出来るのは共通していますが、このプロジェクトに対する考え方が違います。

```
GitHub⇒gitリポジトリ管理が第一、プロジェクト作成はリポジトリ管理の為の1機能
GitLab⇒プロジェクトの作成が第一、プロジェクト管理の為のメイン機能としてgitリポジトリが利用可能
```
なので、GitLabには例えばスニペット(コードのパーツを貼り付けて使いまわせるようにすること)のようなリポジトリ管理とは関係ないけどプロジェクトとして有用な機能がついていたりします。

目的によって使い分けるといいのかな？って印象です。
たとえば、

```
- ずっと同じコードを成長させていくプロジェクト⇒GitHubのプロジェクト
- 逆にハードの違いに合わせてコードも変えるようなプロジェクト⇒GitLabのプロジェクト
```
が使いやすいと思います。

### 5．実行スクリプトを定義できるのが凄い
リポジトリのCI/CDという項目は、何やらjob実行のようなことが出来るようなことを書いています。
コミット後の自動テストなんてのも勝手にやってくれるみたいですよ？便利～

実際にDockerイメージを作成⇒ビルドやテストの自動化を実施している人がいました。
https://qiita.com/bremen/items/f47f383b9931a840a25c

また、github.ioのようなGitLabドメインを取得する方法も、こちらを利用しています。
https://about.gitlab.com/features/pages/

既存のdomainページ作成用リポジトリをforkしてきて、pipeline機能を利用してページ作成処理を走らせています。
https://www.youtube.com/watch?v=TWqh9MtT4Bg




#➌総合評価
リポジトリの扱いが楽で自由度が高いので、使ってて楽しくなっております。1から使う人には便利なのかなーって印象🙄
【iOS】ライセンス一覧を設定アプリに自動表記する方法【LicensePlist】

今回はアプリ内で利用したライブラリのライセンス一覧を、簡単に設定アプリに表記する方法を紹介します。
ライブラリを新しく追加しても更新されるのでとても便利です。

![スクリーンショット 2020-08-03 8.39.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549845/d2e35030-4725-8ec4-75b7-9b6356262f7e.png)


# LicensePlistというライブラリを活用する
ライセンス一覧を手軽に表記することができる、かなりオススメのライブラリです。
有名なアプリでも結構使われているみたいです、開発者の方いつもお世話になっています！

https://github.com/mono0926/LicensePlist

##①インストール
Cocoapodsを使いました。

`pod ‘LicensePlist’`とPodfileに入れてinstallします。

##②Run Scriptを編集
Xcodeの Build Phases のRun Script Phase に<img width="931" alt="スクリーンショット 2020-08-03 9.42.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549845/61d0465d-f047-883a-5926-b0167b38a74c.png">
下記を追加します。

```
if [ $CONFIGURATION = "Debug" ]; then
    ${PODS_ROOT}/LicensePlist/license-plist --output-path $PRODUCT_NAME/Settings.bundle
fi
```


##③Settings.bundleを追加
新規ファイルでSettings.bundleを追加します。
![スクリーンショット 2020-08-03 13.16.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549845/5a84ae6e-3597-ff42-62b8-bd91744e4836.png)

Settings.bundleの中に作られるen.lprojというフォルダは必要ないので削除して、Root.plistだけを残します。


##④Root.plistを編集
Root.plistを好きなエディタで開き、下記の様に編集します。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
    <dict>
        <key>PreferenceSpecifiers</key>
        <array>
            <dict>
                <key>Title</key>
                <string>Licenses</string>
                <key>Type</key>
                <string>PSChildPaneSpecifier</string>
                <key>File</key>
                <string>com.mono0926.LicensePlist</string>
            </dict>
        </array>
        <key>StringsTable</key>
        <string>Root</string>
    </dict>
</plist>
```

##⑤ビルドする
ビルドが完了するとSettings.bundleの中に、ライブラリのライセンスを表示するためのフォルダが追加されます。

設定アプリを見ると、ライセンス一覧が確認できます。
※表示されない場合は再度ビルドして下さい

<img width="414" alt="IMG_6F8E099B2506-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549845/d3b35c3e-5046-c8a2-7ecc-2a5924c72ae9.jpeg">


## 参考
https://github.com/mono0926/LicensePlist
https://medium.com/swift-column/license-plist-c0363a008c67
https://tomoyaonishi.hatenablog.jp/entry/2018/09/19/133447
[GitHub初心者] 他人のGithubをcloneして、自分のレポジトリにpushする

他の方がGithubに公開されているプロジェクトを、自分のローカルPCにプロジェクト毎DL?して、自分のGithubアカウントにpushするやり方です。


参考記事
・[【git】他人のからclone して自分のにpushする](https://bit.ly/3k3HHbr)
・[CloneしてからローカルPCで開発&変更を加える](https://bit.ly/2Pqc9OJ)


##まずローカルPCにプロジェクトをclone(ダウンロードするイメージ)
```
$ git clone [クローン元のリポジトリURL]
```

##ローカルで開発する
```
$bundle install #まずはgemをインストール

$ rails db:create #DBを作成
$ rails db:migrate

$ rails s #サーバー起動
```

##自分のGithubアカウントにpushする
```
$ git add .
$ git commit -m "my-first-clone"
$ git remote add origin <push先のURL>
$ git push origin master
```
オブジェクトのKeyの値を変更する

個人メモ

```javascript
array: [
  { id: 1, text: 'test' },
  { id: 2, text: 'test' },
  { id: 3, text: 'test' },
  { id: 4, text: 'test' },
  { id: 5, text: 'test' }
]
```

この配列の`test`を`testText`というKey名に変える。

![スクリーンショット 2020-08-03 午後21.22.44 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/ef4326a0-e343-340b-c072-9e2b7d767ff4.png)

```javascript

changeKey () {
  const array = this.array.map(value => {
    return {id: value.id, testText: value.text}
  })
  return array
}
```

![スクリーンショット 2020-08-03 午後21.24.42 午後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/bf219f2f-cd9e-6172-7354-8a0524110319.png)